Merge pull request #1294 from boorad/authv2-web-example-refactoring

feat: update web examples to new auth system

biome.json

@@ -42,15 +42,6 @@
     }
   },
   "overrides": [
-    {
-      "include": ["**/package.json"],
-      "linter": {
-        "enabled": false
-      },
-      "formatter": {
-        "enabled": false
-      }
-    },
     {
       "include": ["packages/**/src/**"],
       "linter": {

examples/chat-rn-clerk/CHANGELOG.md

@@ -1,22 +1,5 @@
 # chat-rn-clerk
 
-## 1.0.63
-
-### Patch Changes
-
-- jazz-react-native@0.9.22
-- jazz-react-native-auth-clerk@0.9.22
-
-## 1.0.62
-
-### Patch Changes
-
-- Updated dependencies [1be017d]
-  - jazz-tools@0.9.21
-  - jazz-react-native@0.9.21
-  - jazz-react-native-auth-clerk@0.9.21
-  - jazz-react-native-media-images@0.9.21
-
 ## 1.0.61
 
 ### Patch Changes

examples/chat-rn-clerk/app/(app)/_layout.tsx

@@ -1,9 +1,9 @@
 import { Redirect, Stack } from "expo-router";
+import { useIsAuthenticated } from "jazz-react-native";
 import React from "react";
-import { useAuth } from "../../src/auth-context";
 
 export default function HomeLayout() {
-  const { isAuthenticated } = useAuth();
+  const isAuthenticated = useIsAuthenticated();
 
   if (isAuthenticated) {
     return <Redirect href={"/chat"} />;

examples/chat-rn-clerk/app/(auth)/_layout.tsx

@@ -1,8 +1,8 @@
 import { Redirect, Stack } from "expo-router";
-import { useAuth } from "../../src/auth-context";
+import { useIsAuthenticated } from "jazz-react-native";
 
 export default function UnAuthenticatedLayout() {
-  const { isAuthenticated } = useAuth();
+  const isAuthenticated = useIsAuthenticated();
 
   if (isAuthenticated) {
     return <Redirect href={"/chat"} />;

examples/chat-rn-clerk/app/chat/index.tsx

@@ -20,10 +20,15 @@ export default function ChatScreen() {
   const navigation = useNavigation();
   const { user } = useUser();
 
+  function handleLogOut() {
+    logOut();
+    router.navigate("/");
+  }
+
   useLayoutEffect(() => {
     navigation.setOptions({
       headerTitle: "Chat",
-      headerRight: () => <Button onPress={logOut} title="Logout" />,
+      headerRight: () => <Button onPress={handleLogOut} title="Logout" />,
     });
   }, [navigation]);
 

examples/chat-rn-clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "chat-rn-clerk",
   "main": "index.js",
-  "version": "1.0.63",
+  "version": "1.0.61",
   "scripts": {
     "build": "expo export -p ios",
     "start": "expo start",

examples/chat-rn-clerk/src/auth-context.tsx

@@ -1,49 +1,17 @@
-import { useClerk, useUser } from "@clerk/clerk-expo";
-import { JazzProvider, setupKvStore } from "jazz-react-native";
-import { useJazzClerkAuth } from "jazz-react-native-auth-clerk";
-import React, { createContext, PropsWithChildren, useContext } from "react";
-import { Text, View } from "react-native";
-const AuthContext = createContext<{
-  isAuthenticated: boolean;
-  isLoading: boolean;
-}>({
-  isAuthenticated: false,
-  isLoading: true,
-});
-
-export function useAuth() {
-  return useContext(AuthContext);
-}
-
-const kvStore = setupKvStore();
+import { useClerk } from "@clerk/clerk-expo";
+import { JazzProviderWithClerk } from "jazz-react-native-auth-clerk";
+import React, { PropsWithChildren } from "react";
 
 export function JazzAndAuth({ children }: PropsWithChildren) {
-  const { isSignedIn, isLoaded: isClerkLoaded } = useUser();
   const clerk = useClerk();
-  const [auth, state] = useJazzClerkAuth(clerk, kvStore);
-  const isAuthenticated = Boolean(isSignedIn && isClerkLoaded && auth);
 
   return (
-    <AuthContext.Provider
-      value={{ isAuthenticated, isLoading: !isClerkLoaded || !auth }}
+    <JazzProviderWithClerk
+      clerk={clerk}
+      storage="sqlite"
+      peer="wss://cloud.jazz.tools/?key=chat-rn-clerk-example-jazz@garden.co"
     >
-      {state?.errors?.length > 0 &&
-        state.errors.map((error) => (
-          <View key={error}>
-            <Text style={{ color: "red" }}>{error}</Text>
-          </View>
-        ))}
-      {auth && clerk.user ? (
-        <JazzProvider
-          auth={auth}
-          storage="sqlite"
-          peer="wss://cloud.jazz.tools/?key=chat-rn-clerk-example-jazz@garden.co"
-        >
-          {children}
-        </JazzProvider>
-      ) : (
-        children
-      )}
-    </AuthContext.Provider>
+      {children}
+    </JazzProviderWithClerk>
   );
 }

examples/chat-rn/CHANGELOG.md

@@ -1,19 +1,5 @@
 # chat-rn
 
-## 1.0.60
-
-### Patch Changes
-
-- jazz-react-native@0.9.22
-
-## 1.0.59
-
-### Patch Changes
-
-- Updated dependencies [1be017d]
-  - jazz-tools@0.9.21
-  - jazz-react-native@0.9.21
-
 ## 1.0.58
 
 ### Patch Changes

examples/chat-rn/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-rn",
-  "version": "1.0.60",
+  "version": "1.0.58",
   "main": "index.js",
   "scripts": {
     "build": "expo export -p ios",

examples/chat-rn/src/App.tsx

@@ -9,7 +9,7 @@ import * as Linking from "expo-linking";
 import React, { StrictMode, useEffect, useState } from "react";
 import HandleInviteScreen from "./invite";
 
-import { DemoAuthBasicUI, JazzProvider, useDemoAuth } from "jazz-react-native";
+import { JazzProvider } from "jazz-react-native";
 import ChatScreen from "./chat";
 
 const Stack = createNativeStackNavigator();
@@ -28,7 +28,6 @@ const linking = {
 };
 
 function App() {
-  const [auth, state] = useDemoAuth();
   const [initialRoute, setInitialRoute] = useState<
     "ChatScreen" | "HandleInviteScreen"
   >("ChatScreen");
@@ -43,14 +42,9 @@ function App() {
     });
   }, []);
 
-  if (!auth) {
-    return null;
-  }
-
   return (
     <StrictMode>
       <JazzProvider
-        auth={auth}
         storage="sqlite"
         peer="wss://cloud.jazz.tools/?key=chat-rn-example-jazz@garden.co"
       >
@@ -69,9 +63,6 @@ function App() {
           </Stack.Navigator>
         </NavigationContainer>
       </JazzProvider>
-      {state.state !== "signedIn" ? (
-        <DemoAuthBasicUI appName="Jazz Chat" state={state} />
-      ) : null}
     </StrictMode>
   );
 }

examples/chat-rn/src/chat.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import * as Clipboard from "expo-clipboard";
-import { Group, ID } from "jazz-tools";
+import { Group, ID, Profile } from "jazz-tools";
 import { useEffect, useState } from "react";
 import React, {
   Button,
@@ -22,10 +22,16 @@ export default function ChatScreen({ navigation }: { navigation: any }) {
   const [chatId, setChatId] = useState<ID<Chat>>();
   const loadedChat = useCoState(Chat, chatId, [{}]);
   const [message, setMessage] = useState("");
+  const profile = useCoState(Profile, me._refs.profile?.id, {});
+
+  function handleLogOut() {
+    setChatId(undefined);
+    logOut();
+  }
 
   useEffect(() => {
     navigation.setOptions({
-      headerRight: () => <Button onPress={logOut} title="Logout" />,
+      headerRight: () => <Button onPress={handleLogOut} title="Logout" />,
       headerLeft: () =>
         loadedChat ? (
           <Button
@@ -131,6 +137,18 @@ export default function ChatScreen({ navigation }: { navigation: any }) {
     <View className="flex flex-col h-full">
       {!loadedChat ? (
         <View className="flex flex-col h-full items-center justify-center">
+          <Text className="text-m font-bold mb-6">Username</Text>
+          <TextInput
+            className="rounded h-12 p-2 mb-12 w-40 border border-gray-200 block"
+            value={profile?.name ?? ""}
+            onChangeText={(value) => {
+              if (profile) {
+                profile.name = value;
+              }
+            }}
+            textAlignVertical="center"
+            onSubmitEditing={sendMessage}
+          />
           <TouchableOpacity
             onPress={createChat}
             className="bg-blue-500 p-4 rounded-md"

examples/chat-vue/CHANGELOG.md

@@ -1,21 +1,5 @@
 # chat-vue
 
-## 0.0.47
-
-### Patch Changes
-
-- jazz-browser@0.9.22
-- jazz-vue@0.9.22
-
-## 0.0.46
-
-### Patch Changes
-
-- Updated dependencies [1be017d]
-  - jazz-tools@0.9.21
-  - jazz-browser@0.9.21
-  - jazz-vue@0.9.21
-
 ## 0.0.45
 
 ### Patch Changes

examples/chat-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-vue",
-  "version": "0.0.47",
+  "version": "0.0.45",
   "private": true,
   "type": "module",
   "scripts": {

examples/chat-vue/src/main.ts

@@ -4,29 +4,35 @@ import App from "./App.vue";
 import "./index.css";
 import router from "./router";
 
+const AuthScreen = defineComponent({
+  name: "AuthScreen",
+  setup() {
+    const auth = useDemoAuth();
+
+    return () => [
+      auth.value.state === "anonymous"
+        ? h(DemoAuthBasicUI, {
+            appName: "Jazz Vue Chat",
+            auth,
+          })
+        : h(App),
+    ];
+  },
+});
+
 const RootComponent = defineComponent({
   name: "RootComponent",
   setup() {
-    const { authMethod, state } = useDemoAuth();
-
-    return () => [
+    return () =>
       h(
         JazzProvider,
         {
-          auth: authMethod.value,
-          peer: "wss://cloud.jazz.tools/?key=chat-example-jazz@garden.co",
+          peer: "wss://cloud.jazz.tools/?key=vue-chat-example-jazz@garden.co",
         },
         {
-          default: () => h(App),
+          default: () => h(AuthScreen),
         },
-      ),
-
-      state.state !== "signedIn" &&
-        h(DemoAuthBasicUI, {
-          appName: "Jazz Chat",
-          state,
-        }),
-    ];
+      );
   },
 });
 

examples/chat/CHANGELOG.md

@@ -1,21 +1,5 @@
 # jazz-example-chat
 
-## 0.0.143
-
-### Patch Changes
-
-- jazz-browser-media-images@0.9.22
-- jazz-react@0.9.22
-
-## 0.0.142
-
-### Patch Changes
-
-- Updated dependencies [1be017d]
-  - jazz-tools@0.9.21
-  - jazz-browser-media-images@0.9.21
-  - jazz-react@0.9.21
-
 ## 0.0.141
 
 ### Patch Changes

examples/chat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-chat",
   "private": true,
-  "version": "0.0.143",
+  "version": "0.0.141",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/chat/src/jazz.tsx

@@ -1,19 +1,11 @@
-import { DemoAuthBasicUI, JazzProvider, useDemoAuth } from "jazz-react";
-
+import { JazzProvider } from "jazz-react";
 export function JazzAndAuth({ children }: { children: React.ReactNode }) {
-  const [auth, state] = useDemoAuth();
-
   return (
-    <>
-      <JazzProvider
-        auth={auth}
-        peer="wss://cloud.jazz.tools/?key=chat-example-jazz@garden.co"
-      >
-        {children}
-      </JazzProvider>
-      {state.state !== "signedIn" && (
-        <DemoAuthBasicUI appName="Jazz Chat" state={state} />
-      )}
-    </>
+    <JazzProvider
+      localOnly="anonymous"
+      peer="wss://cloud.jazz.tools/?key=chat-example-jazz@garden.co"
+    >
+      {children}
+    </JazzProvider>
   );
 }

examples/clerk/CHANGELOG.md

@@ -1,21 +1,5 @@
 # minimal-auth-clerk
 
-## 0.0.42
-
-### Patch Changes
-
-- jazz-react@0.9.22
-- jazz-react-auth-clerk@0.9.22
-
-## 0.0.41
-
-### Patch Changes
-
-- Updated dependencies [1be017d]
-  - jazz-tools@0.9.21
-  - jazz-react@0.9.21
-  - jazz-react-auth-clerk@0.9.21
-
 ## 0.0.40
 
 ### Patch Changes

examples/clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clerk",
   "private": true,
-  "version": "0.0.42",
+  "version": "0.0.40",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,7 +13,7 @@
   "dependencies": {
     "@clerk/clerk-react": "^5.4.1",
     "jazz-react": "workspace:*",
-    "jazz-react-auth-clerk": "workspace:0.9.22",
+    "jazz-react-auth-clerk": "workspace:0.9.20",
     "jazz-tools": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

examples/clerk/src/App.tsx

@@ -1,13 +1,25 @@
-import { useAccount } from "jazz-react";
+import { SignInButton } from "@clerk/clerk-react";
+import { useAccount, useIsAuthenticated } from "jazz-react";
 
 function App() {
   const { me, logOut } = useAccount();
 
+  const isAuthenticated = useIsAuthenticated();
+
+  if (isAuthenticated) {
+    return (
+      <div className="container">
+        <h1>You're logged in</h1>
+        <p>Welcome back, {me?.profile?.name}</p>
+        <button onClick={() => logOut()}>Logout</button>
+      </div>
+    );
+  }
+
   return (
     <div className="container">
-      <h1>You're logged in</h1>
-      <p>Welcome back, {me?.profile?.name}</p>
-      <button onClick={() => logOut()}>Logout</button>
+      <h1>You're not logged in</h1>
+      <SignInButton />
     </div>
   );
 }

examples/clerk/src/index.css

@@ -62,7 +62,7 @@ button {
 }
 
 .container {
-  max-width: 200px;
+  max-width: 400px;
   margin: 0 auto;
   padding: 0 1rem;
   display: flex;

examples/clerk/src/main.tsx

@@ -1,10 +1,9 @@
-import { ClerkProvider, SignInButton, useClerk } from "@clerk/clerk-react";
-import { useJazzClerkAuth } from "jazz-react-auth-clerk";
+import { ClerkProvider, useClerk } from "@clerk/clerk-react";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
-import { JazzProvider } from "jazz-react";
+import { JazzProviderWithClerk } from "jazz-react-auth-clerk";
 
 // Import your publishable key
 const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
@@ -13,35 +12,26 @@ if (!PUBLISHABLE_KEY) {
   throw new Error("Add your Clerk publishable key to the .env.local file");
 }
 
-function JazzAndAuth({ children }: { children: React.ReactNode }) {
+function JazzProvider({ children }: { children: React.ReactNode }) {
   const clerk = useClerk();
-  const [auth, state] = useJazzClerkAuth(clerk);
 
   return (
-    <main className="container">
-      {state?.errors?.map((error) => (
-        <div key={error}>{error}</div>
-      ))}
-      {clerk.user && auth ? (
-        <JazzProvider
-          auth={auth}
-          peer="wss://cloud.jazz.tools/?key=minimal-auth-clerk-example@garden.co"
-        >
-          {children}
-        </JazzProvider>
-      ) : (
-        <SignInButton />
-      )}
-    </main>
+    <JazzProviderWithClerk
+      clerk={clerk}
+      localOnly="anonymous"
+      peer="wss://cloud.jazz.tools/?key=minimal-auth-clerk-example@garden.co"
+    >
+      {children}
+    </JazzProviderWithClerk>
   );
 }
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
-      <JazzAndAuth>
+      <JazzProvider>
         <App />
-      </JazzAndAuth>
+      </JazzProvider>
     </ClerkProvider>
   </StrictMode>,
 );

examples/file-share-svelte/CHANGELOG.md

@@ -1,19 +1,5 @@
 # file-share-svelte
 
-## 0.0.27
-
-### Patch Changes
-
-- jazz-svelte@0.9.22
-
-## 0.0.26
-
-### Patch Changes
-
-- Updated dependencies [1be017d]
-  - jazz-tools@0.9.21
-  - jazz-svelte@0.9.21
-
 ## 0.0.25
 
 ### Patch Changes

examples/file-share-svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "file-share-svelte",
-  "version": "0.0.27",
+  "version": "0.0.25",
   "private": true,
   "type": "module",
   "scripts": {

examples/file-share-svelte/src/lib/utils.ts

@@ -17,6 +17,6 @@ export function formatFileSize(bytes: number): string {
  * @param createdAt The creation date
  * @returns A unique file ID string
  */
-export function generateTempFileId(fileName: string, createdAt: Date): string {
-  return `file-${fileName}-${createdAt.getTime()}`;
+export function generateTempFileId(fileName: string | undefined, createdAt: Date | undefined): string {
+  return `file-${fileName ?? 'unknown'}-${createdAt?.getTime() ?? 0}`;
 }

examples/file-share-svelte/src/routes/+layout.svelte

@@ -14,9 +14,6 @@
   import { FileShareAccount } from '$lib/schema';
 
   let { children } = $props();
-  const auth = usePasskeyAuth({
-    appName: 'File Share'
-  });
 </script>
 
 <svelte:head>
@@ -25,21 +22,13 @@
 
 <Toaster richColors />
 
-{#if auth.state.state === 'ready'}
-  <div class="fixed inset-0 flex items-center justify-center bg-gray-50/80">
-    <div class="rounded-lg bg-white p-8 shadow-lg">
-      <PasskeyAuthBasicUI state={auth.state} />
-    </div>
-  </div>
-{/if}
-{#if auth.current}
-  <JazzProvider
-    AccountSchema={FileShareAccount}
-    auth={auth.current}
-    peer="wss://cloud.jazz.tools/?key=file-share-svelte@garden.co"
-  >
+<JazzProvider
+  AccountSchema={FileShareAccount}
+  peer="wss://cloud.jazz.tools/?key=minimal-svelte-auth-passkey@garden.co"
+>
+  <PasskeyAuthBasicUI auth={usePasskeyAuth({ appName: 'File Share' })}>
     <div class="min-h-screen bg-gray-100">
       {@render children()}
     </div>
-  </JazzProvider>
-{/if}
+  </PasskeyAuthBasicUI>
+</JazzProvider>

examples/file-share-svelte/src/routes/+page.svelte

@@ -28,7 +28,7 @@
     const input = event.target as HTMLInputElement;
     const files = input.files;
 
-    if (!files || !files.length || !me?.root?.sharedFiles || !me.root.publicGroup) return;
+    if (!files || !files.length || !me.root?.sharedFiles || !me.root.publicGroup) return;
 
     const file = files[0];
     const fileName = file.name;
@@ -129,12 +129,14 @@
       {#if sharedFiles.current}
         {#if !(sharedFiles.current.length === 0 && uploadingFiles.size === 0)}
           {#each [...sharedFiles.current, ...uploadingFiles.values()] as file (generateTempFileId(file?.name, file?.createdAt))}
-            <FileItem
-              {file}
-              loading={uploadingFiles.has(generateTempFileId(file?.name, file?.createdAt))}
-              onShare={shareFile}
-              onDelete={deleteFile}
-            />
+            {#if file}
+              <FileItem
+                {file}
+                loading={uploadingFiles.has(generateTempFileId(file?.name, file?.createdAt))}
+                onShare={shareFile}
+                onDelete={deleteFile}
+              />
+            {/if}
           {/each}
         {:else}
           <p class="text-center text-gray-500">No files yet</p>

examples/form/CHANGELOG.md

@@ -1,21 +1,5 @@
 # form
 
-## 0.0.38
-
-### Patch Changes
-
-- jazz-browser-media-images@0.9.22
-- jazz-react@0.9.22
-
-## 0.0.37
-
-### Patch Changes
-
-- Updated dependencies [1be017d]
-  - jazz-tools@0.9.21
-  - jazz-browser-media-images@0.9.21
-  - jazz-react@0.9.21
-
 ## 0.0.36
 
 ### Patch Changes

examples/form/package.json

@@ -1,7 +1,7 @@
 {
   "name": "form",
   "private": true,
-  "version": "0.0.38",
+  "version": "0.0.36",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/form/src/main.tsx

@@ -1,4 +1,4 @@
-import { DemoAuthBasicUI, JazzProvider, useDemoAuth } from "jazz-react";
+import { JazzProvider } from "jazz-react";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
@@ -6,22 +6,14 @@ import "./index.css";
 import { JazzAccount } from "./schema.ts";
 
 function JazzAndAuth({ children }: { children: React.ReactNode }) {
-  const [auth, authState] = useDemoAuth();
-
   return (
-    <>
-      <JazzProvider
-        auth={auth}
-        peer="wss://cloud.jazz.tools/?key=form-example@garden.co"
-        AccountSchema={JazzAccount}
-      >
-        {children}
-      </JazzProvider>
-
-      {authState.state !== "signedIn" && (
-        <DemoAuthBasicUI appName="Form" state={authState} />
-      )}
-    </>
+    <JazzProvider
+      peer="wss://cloud.jazz.tools/?key=form-example@garden.co"
+      localOnly="anonymous"
+      AccountSchema={JazzAccount}
+    >
+      {children}
+    </JazzProvider>
   );
 }
 

examples/image-upload/CHANGELOG.md

@@ -1,21 +1,5 @@
 # image-upload
 
-## 0.0.40
-
-### Patch Changes
-
-- jazz-browser-media-images@0.9.22
-- jazz-react@0.9.22
-
-## 0.0.39
-
-### Patch Changes
-
-- Updated dependencies [1be017d]
-  - jazz-tools@0.9.21
-  - jazz-browser-media-images@0.9.21
-  - jazz-react@0.9.21
-
 ## 0.0.38
 
 ### Patch Changes

examples/image-upload/package.json

@@ -1,7 +1,7 @@
 {
   "name": "image-upload",
   "private": true,
-  "version": "0.0.40",
+  "version": "0.0.38",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/image-upload/src/main.tsx

@@ -1,4 +1,4 @@
-import { DemoAuthBasicUI, JazzProvider, useDemoAuth } from "jazz-react";
+import { JazzProvider } from "jazz-react";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
@@ -6,21 +6,15 @@ import "./index.css";
 import { JazzAccount } from "./schema.ts";
 
 function JazzAndAuth({ children }: { children: React.ReactNode }) {
-  const [auth, authState] = useDemoAuth();
-
   return (
     <>
       <JazzProvider
-        auth={auth}
         peer="wss://cloud.jazz.tools/?key=image-upload-example@garden.co"
+        localOnly="anonymous"
         AccountSchema={JazzAccount}
       >
         {children}
       </JazzProvider>
-
-      {authState.state !== "signedIn" && (
-        <DemoAuthBasicUI appName="Image upload" state={authState} />
-      )}
     </>
   );
 }

examples/inspector/CHANGELOG.md

@@ -1,12 +1,5 @@
 # jazz-example-inspector
 
-## 0.0.101
-
-### Patch Changes
-
-- Updated dependencies [14b6149]
-  - cojson-transport-ws@0.9.22
-
 ## 0.0.100
 
 ### Patch Changes

examples/inspector/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-inspector-app",
   "private": true,
-  "version": "0.0.101",
+  "version": "0.0.100",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -17,7 +17,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cojson": "workspace:0.9.19",
-    "cojson-transport-ws": "workspace:0.9.22",
+    "cojson-transport-ws": "workspace:0.9.19",
     "hash-slash": "workspace:0.2.1",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",

examples/music-player/CHANGELOG.md

@@ -1,20 +1,5 @@
 # jazz-example-musicplayer
 
-## 0.0.64
-
-### Patch Changes
-
-- jazz-react@0.9.22
-
-## 0.0.63
-
-### Patch Changes
-
-- Updated dependencies [1be017d]
-  - jazz-tools@0.9.21
-  - jazz-inspector@0.9.22
-  - jazz-react@0.9.21
-
 ## 0.0.62
 
 ### Patch Changes

examples/music-player/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-music-player",
   "private": true,
-  "version": "0.0.64",
+  "version": "0.0.62",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,13 +13,16 @@
     "test:ui": "playwright test --ui"
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
-    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-toast": "^1.1.4",
+    "@radix-ui/react-tooltip": "^1.1.6",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-react": "workspace:0.9.22",
-    "jazz-tools": "workspace:0.9.21",
+    "jazz-react": "workspace:0.9.20",
+    "jazz-tools": "workspace:0.9.20",
     "jazz-inspector": "workspace:*",
     "lucide-react": "^0.274.0",
     "react": "^18.3.1",

examples/music-player/src/1_schema.ts

@@ -86,7 +86,7 @@ export class MusicaAccount extends Account {
    *  You can use it to set up the account root and any other initial CoValues you need.
    */
   migrate() {
-    if (!this._refs.root) {
+    if (this.root === undefined) {
       const ownership = { owner: this };
 
       const tracks = ListOfTracks.create([], ownership);

examples/music-player/src/2_main.tsx

@@ -11,7 +11,7 @@ import { PlayerControls } from "./components/PlayerControls";
 import "./index.css";
 
 import { MusicaAccount } from "@/1_schema";
-import { DemoAuthBasicUI, JazzProvider, useDemoAuth } from "jazz-react";
+import { JazzProvider } from "jazz-react";
 import { useUploadExampleData } from "./lib/useUploadExampleData";
 
 /**
@@ -54,30 +54,11 @@ function Main() {
   );
 }
 
-function JazzAndAuth({ children }: { children: React.ReactNode }) {
-  const [auth, state] = useDemoAuth();
-
-  const peer =
-    (new URL(window.location.href).searchParams.get(
-      "peer",
-    ) as `ws://${string}`) ??
-    "wss://cloud.jazz.tools/?key=music-player-example-jazz@garden.co";
-
-  return (
-    <>
-      <JazzProvider
-        storage="indexedDB"
-        auth={auth}
-        peer={peer}
-        AccountSchema={MusicaAccount}
-      >
-        {children}
-        <JazzInspector />
-      </JazzProvider>
-      <DemoAuthBasicUI appName="Jazz Music Player" state={state} />
-    </>
-  );
-}
+const peer =
+  (new URL(window.location.href).searchParams.get(
+    "peer",
+  ) as `ws://${string}`) ??
+  "wss://cloud.jazz.tools/?key=music-player-example-jazz@garden.co";
 
 declare module "jazz-react" {
   interface Register {
@@ -87,8 +68,15 @@ declare module "jazz-react" {
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <JazzAndAuth>
+    <JazzProvider
+      peer={peer}
+      storage="indexedDB"
+      localOnly="anonymous" // This makes the app work in local mode when the user is anonymous
+      AccountSchema={MusicaAccount}
+      defaultProfileName="Anonymous unicorn"
+    >
       <Main />
-    </JazzAndAuth>
+      <JazzInspector />
+    </JazzProvider>
   </React.StrictMode>,
 );

examples/music-player/src/3_HomePage.tsx

@@ -1,12 +1,17 @@
 import { useToast } from "@/hooks/use-toast";
-import { createInviteLink, useAccount, useCoState } from "jazz-react";
+import {
+  createInviteLink,
+  useAccount,
+  useCoState,
+  useIsAuthenticated,
+} from "jazz-react";
 import { ID } from "jazz-tools";
 import { useNavigate, useParams } from "react-router";
 import { Playlist } from "./1_schema";
 import { createNewPlaylist, uploadMusicTracks } from "./4_actions";
 import { MediaPlayer } from "./5_useMediaPlayer";
+import { AuthButton } from "./components/AuthButton";
 import { FileUploadButton } from "./components/FileUploadButton";
-import { LogoutButton } from "./components/LogoutButton";
 import { MusicTrackRow } from "./components/MusicTrackRow";
 import { PlaylistTitleInput } from "./components/PlaylistTitleInput";
 import { SidePanel } from "./components/SidePanel";
@@ -66,6 +71,8 @@ export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
     });
   };
 
+  const isAuthenticated = useIsAuthenticated();
+
   return (
     <div className="flex flex-col h-screen text-gray-800 bg-blue-50">
       <div className="flex flex-1 overflow-hidden">
@@ -86,12 +93,12 @@ export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
                   <Button onClick={handleCreatePlaylist}>New playlist</Button>
                 </>
               )}
-              {!isRootPlaylist && (
+              {!isRootPlaylist && isAuthenticated && (
                 <Button onClick={handlePlaylistShareClick}>
                   Share playlist
                 </Button>
               )}
-              <LogoutButton />
+              <AuthButton />
             </div>
           </div>
           <ul className="flex flex-col">

examples/music-player/src/components/AuthButton.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { useAccount, useIsAuthenticated } from "jazz-react";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { AuthModal } from "./AuthModal";
+
+export function AuthButton() {
+  const [open, setOpen] = useState(false);
+  const { logOut } = useAccount();
+  const navigate = useNavigate();
+
+  const isAuthenticated = useIsAuthenticated();
+
+  function handleSignOut() {
+    logOut();
+    navigate("/");
+  }
+
+  if (isAuthenticated) {
+    return (
+      <Button variant="outline" onClick={handleSignOut}>
+        Sign out
+      </Button>
+    );
+  }
+
+  return (
+    <>
+      <Button
+        onClick={() => setOpen(true)}
+        className="bg-white text-black hover:bg-gray-100"
+      >
+        Sign up
+      </Button>
+      <AuthModal open={open} onOpenChange={setOpen} />
+    </>
+  );
+}

examples/music-player/src/components/AuthModal.tsx

@@ -0,0 +1,97 @@
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { usePasskeyAuth } from "jazz-react";
+import { useState } from "react";
+
+interface AuthModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function AuthModal({ open, onOpenChange }: AuthModalProps) {
+  const [username, setUsername] = useState("");
+  const [isSignUp, setIsSignUp] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const auth = usePasskeyAuth({
+    appName: "Jazz Music Player",
+  });
+
+  const handleViewChange = () => {
+    setIsSignUp(!isSignUp);
+    setError(null);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    try {
+      if (isSignUp) {
+        await auth.signUp(username);
+      } else {
+        await auth.logIn();
+      }
+      onOpenChange(false);
+    } catch (error) {
+      setError(error instanceof Error ? error.message : "Unknown error");
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle className="text-2xl font-bold">
+            {isSignUp ? "Create account" : "Welcome back"}
+          </DialogTitle>
+          <DialogDescription>
+            {isSignUp
+              ? "Sign up to enable network sync and share your playlists with others"
+              : "Changes done before logging in will be lost"}
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {isSignUp && (
+            <div className="space-y-2">
+              <Label htmlFor="username">Username</Label>
+              <Input
+                id="username"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                placeholder="Enter your username"
+                required
+              />
+            </div>
+          )}
+          {error && <div className="text-sm text-red-500">{error}</div>}
+          <div className="space-y-4">
+            <Button
+              type="submit"
+              className="w-full bg-blue-600 hover:bg-blue-700"
+            >
+              {isSignUp ? "Sign up with passkey" : "Login with passkey"}
+            </Button>
+            <div className="text-center text-sm">
+              {isSignUp ? "Already have an account?" : "Don't have an account?"}{" "}
+              <button
+                type="button"
+                onClick={handleViewChange}
+                className="text-blue-600 hover:underline"
+              >
+                {isSignUp ? "Login" : "Sign up"}
+              </button>
+            </div>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

examples/music-player/src/components/LocalOnlyTag.tsx

@@ -0,0 +1,37 @@
+import { Badge } from "@/components/ui/badge";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useIsAuthenticated } from "jazz-react";
+import { Info } from "lucide-react";
+
+export function LocalOnlyTag() {
+  const isAuthenticated = useIsAuthenticated();
+
+  if (isAuthenticated) {
+    return null;
+  }
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div className="inline-flex items-center gap-1.5 cursor-help">
+            <Badge variant="default" className="h-5 text-xs font-normal">
+              Local only
+            </Badge>
+            <Info className="h-3.5 w-3.5 text-muted-foreground" />
+          </div>
+        </TooltipTrigger>
+        <TooltipContent className="max-w-[250px]">
+          <p>
+            Sign up to enable network sync and share your playlists with others
+          </p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

examples/music-player/src/components/SidePanel.tsx

@@ -1,5 +1,6 @@
 import { useAccount } from "jazz-react";
 import { useNavigate, useParams } from "react-router";
+import { LocalOnlyTag } from "./LocalOnlyTag";
 
 export function SidePanel() {
   const { playlistId } = useParams();
@@ -25,7 +26,7 @@ export function SidePanel() {
 
   return (
     <aside className="w-64 p-6 bg-white overflow-y-auto">
-      <div className="flex items-center mb-6">
+      <div className="flex items-center mb-1">
         <svg
           className="w-8 h-8 mr-2"
           viewBox="0 0 24 24"
@@ -46,6 +47,9 @@ export function SidePanel() {
         </svg>
         <span className="text-xl font-bold text-blue-600">Music Player</span>
       </div>
+      <div className="mb-6">
+        <LocalOnlyTag />
+      </div>
       <nav>
         <h2 className="mb-2 text-sm font-semibold text-gray-600">Playlists</h2>
         <ul className="space-y-1">

examples/music-player/src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

examples/music-player/src/components/ui/dialog.tsx

@@ -0,0 +1,120 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};

examples/music-player/src/components/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = "Input";
+
+export { Input };

examples/music-player/src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

examples/music-player/src/components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

examples/music-player/src/lib/useUploadExampleData.ts

@@ -1,11 +1,14 @@
 import { MusicaAccount } from "@/1_schema";
+import { useAccount } from "jazz-react";
 import { useEffect } from "react";
 import { uploadMusicTracks } from "../4_actions";
 
 export function useUploadExampleData() {
+  const { me } = useAccount();
+
   useEffect(() => {
     uploadOnboardingData();
-  }, []);
+  }, [me.id]);
 }
 
 async function uploadOnboardingData() {

examples/music-player/tests/createAndShare.spec.ts

@@ -1,44 +1,84 @@
-import { test } from "@playwright/test";
+import { BrowserContext, test } from "@playwright/test";
 import { HomePage } from "./pages/HomePage";
-import { LoginPage } from "./pages/LoginPage";
 
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
-test("create a new playlist and share", async ({ page }) => {
-  const loginPage = new LoginPage(page);
+async function mockAuthenticator(context: BrowserContext) {
+  await context.addInitScript(() => {
+    Object.defineProperty(window.navigator, "credentials", {
+      value: {
+        ...window.navigator.credentials,
+        create: async () => ({
+          type: "public-key",
+          id: new Uint8Array([1, 2, 3, 4]),
+          rawId: new Uint8Array([1, 2, 3, 4]),
+          response: {
+            clientDataJSON: new Uint8Array([1]),
+            attestationObject: new Uint8Array([2]),
+          },
+        }),
+        get: async () => ({
+          type: "public-key",
+          id: new Uint8Array([1, 2, 3, 4]),
+          rawId: new Uint8Array([1, 2, 3, 4]),
+          response: {
+            authenticatorData: new Uint8Array([1]),
+            clientDataJSON: new Uint8Array([2]),
+            signature: new Uint8Array([3]),
+          },
+        }),
+      },
+      configurable: true,
+    });
+  });
+}
 
-  await loginPage.goto();
-  await loginPage.fillUsername("S. Mario");
-  await loginPage.signup();
+// Configure the authenticator
+test.beforeEach(async ({ context }) => {
+  // Enable virtual authenticator environment
+  await mockAuthenticator(context);
+});
 
-  const homePage = new HomePage(page);
+test("create a new playlist and share", async ({
+  page: marioPage,
+  browser,
+}) => {
+  await marioPage.goto("/");
+
+  const marioHome = new HomePage(marioPage);
 
   // The example song should be loaded
-  await homePage.expectMusicTrack("Example song");
-  await homePage.editTrackTitle("Example song", "Super Mario World");
+  await marioHome.expectMusicTrack("Example song");
+  await marioHome.editTrackTitle("Example song", "Super Mario World");
 
-  await homePage.createPlaylist();
-  await homePage.editPlaylistTitle("Save the princess");
+  await marioHome.createPlaylist();
+  await marioHome.editPlaylistTitle("Save the princess");
 
-  await homePage.navigateToPlaylist("All tracks");
-  await homePage.addTrackToPlaylist("Super Mario World", "Save the princess");
+  await marioHome.navigateToPlaylist("All tracks");
+  await marioHome.addTrackToPlaylist("Super Mario World", "Save the princess");
 
-  await homePage.navigateToPlaylist("Save the princess");
-  await homePage.expectMusicTrack("Super Mario World");
+  await marioHome.navigateToPlaylist("Save the princess");
+  await marioHome.expectMusicTrack("Super Mario World");
 
-  const url = await homePage.getShareLink();
+  await marioHome.signUp("Mario");
+
+  const url = await marioHome.getShareLink();
 
   await sleep(4000); // Wait for the sync to complete
 
-  await homePage.logout();
+  const luigiContext = await browser.newContext();
+  await mockAuthenticator(luigiContext);
 
-  await loginPage.goto();
-  await loginPage.fillUsername("Luigi");
-  await loginPage.signup();
+  const luigiPage = await luigiContext.newPage();
+  await luigiPage.goto("/");
 
-  await page.goto(url);
+  const luigiHome = new HomePage(luigiPage);
 
-  await homePage.expectMusicTrack("Super Mario World");
-  await homePage.playMusicTrack("Super Mario World");
-  await homePage.expectActiveTrackPlaying();
+  await luigiHome.signUp("Luigi");
+
+  await luigiPage.goto(url);
+
+  await luigiHome.expectMusicTrack("Super Mario World");
+  await luigiHome.playMusicTrack("Super Mario World");
+  await luigiHome.expectActiveTrackPlaying();
 });

examples/music-player/tests/pages/HomePage.ts

@@ -95,6 +95,17 @@ export class HomePage {
       .click();
   }
 
+  async signUp(name: string) {
+    await this.page.getByRole("button", { name: "Sign up" }).click();
+    await this.page.getByRole("textbox", { name: "Username" }).fill(name);
+    await this.page
+      .getByRole("button", { name: "Sign up with passkey" })
+      .click();
+    await expect(
+      this.page.getByRole("button", { name: "Sign out" }),
+    ).toBeVisible();
+  }
+
   async logout() {
     await this.logoutButton.click();
   }

examples/music-player/tests/pages/LoginPage.ts

@@ -1,40 +0,0 @@
-import { Locator, Page, expect } from "@playwright/test";
-
-export class LoginPage {
-  readonly page: Page;
-  readonly usernameInput: Locator;
-  readonly signupButton: Locator;
-
-  constructor(page: Page) {
-    this.page = page;
-    this.usernameInput = page.getByRole("textbox");
-    this.signupButton = page.getByRole("button", {
-      name: "Sign up",
-    });
-  }
-
-  async goto() {
-    this.page.goto("/");
-  }
-
-  async fillUsername(value: string) {
-    await this.usernameInput.clear();
-    await this.usernameInput.fill(value);
-  }
-
-  async loginAs(value: string) {
-    await this.page
-      .getByRole("button", {
-        name: value,
-      })
-      .click();
-  }
-
-  async signup() {
-    await this.signupButton.click();
-  }
-
-  async expectLoaded() {
-    await expect(this.signupButton).toBeVisible();
-  }
-}

examples/onboarding/CHANGELOG.md

@@ -1,21 +1,5 @@
 # jazz-example-onboarding
 
-## 0.0.44
-
-### Patch Changes
-
-- jazz-browser-media-images@0.9.22
-- jazz-react@0.9.22
-
-## 0.0.43
-
-### Patch Changes
-
-- Updated dependencies [1be017d]
-  - jazz-tools@0.9.21
-  - jazz-browser-media-images@0.9.21
-  - jazz-react@0.9.21
-
 ## 0.0.42
 
 ### Patch Changes

examples/onboarding/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-onboarding",
   "private": true,
-  "version": "0.0.44",
+  "version": "0.0.42",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/onboarding/src/main.tsx

@@ -1,7 +1,7 @@
 import App from "@/App.tsx";
 import "@/index.css";
 import { HRAccount } from "@/schema.ts";
-import { DemoAuthBasicUI, JazzProvider, useDemoAuth } from "jazz-react";
+import { JazzProvider } from "jazz-react";
 import React from "react";
 import ReactDOM from "react-dom/client";
 
@@ -12,16 +12,10 @@ const peer =
   "wss://cloud.jazz.tools/?key=onboarding-example-jazz@garden.co";
 
 function JazzAndAuth({ children }: { children: React.ReactNode }) {
-  const [auth, authState] = useDemoAuth();
   return (
-    <>
-      <JazzProvider AccountSchema={HRAccount} auth={auth} peer={peer}>
-        {children}
-      </JazzProvider>
-      {authState.state !== "signedIn" && (
-        <DemoAuthBasicUI appName="Jazz Onboarding" state={authState} />
-      )}
-    </>
+    <JazzProvider AccountSchema={HRAccount} peer={peer}>
+      {children}
+    </JazzProvider>
   );
 }
 

examples/onboarding/vite.config.ts.timestamp-1738123585435-c5f316a1877fb.mjs

@@ -0,0 +1,20 @@
+// vite.config.ts
+import path from "path";
+import react from "file:///Users/brad/dev/jazz/node_modules/@vitejs/plugin-react-swc/index.mjs";
+import topLevelAwait from "file:///Users/brad/dev/jazz/node_modules/vite-plugin-top-level-await/exports/import.mjs";
+import { defineConfig } from "file:///Users/brad/dev/jazz/node_modules/vite/dist/node/index.js";
+var __vite_injected_original_dirname =
+  "/Users/brad/dev/jazz/examples/onboarding";
+var vite_config_default = defineConfig({
+  plugins: [react(), topLevelAwait()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__vite_injected_original_dirname, "./src"),
+    },
+  },
+  build: {
+    minify: false,
+  },
+});
+export { vite_config_default as default };
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvYnJhZC9kZXYvamF6ei9leGFtcGxlcy9vbmJvYXJkaW5nXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCIvVXNlcnMvYnJhZC9kZXYvamF6ei9leGFtcGxlcy9vbmJvYXJkaW5nL3ZpdGUuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9Vc2Vycy9icmFkL2Rldi9qYXp6L2V4YW1wbGVzL29uYm9hcmRpbmcvdml0ZS5jb25maWcudHNcIjtpbXBvcnQgcGF0aCBmcm9tIFwicGF0aFwiO1xuaW1wb3J0IHJlYWN0IGZyb20gXCJAdml0ZWpzL3BsdWdpbi1yZWFjdC1zd2NcIjtcbmltcG9ydCB7IGRlZmluZUNvbmZpZyB9IGZyb20gXCJ2aXRlXCI7XG5pbXBvcnQgdG9wTGV2ZWxBd2FpdCBmcm9tIFwidml0ZS1wbHVnaW4tdG9wLWxldmVsLWF3YWl0XCI7XG5cbi8vIGh0dHBzOi8vdml0ZWpzLmRldi9jb25maWcvXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoe1xuICBwbHVnaW5zOiBbcmVhY3QoKSwgdG9wTGV2ZWxBd2FpdCgpXSxcbiAgcmVzb2x2ZToge1xuICAgIGFsaWFzOiB7XG4gICAgICBcIkBcIjogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSwgXCIuL3NyY1wiKSxcbiAgICB9LFxuICB9LFxuICBidWlsZDoge1xuICAgIG1pbmlmeTogZmFsc2UsXG4gIH0sXG59KTtcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFBMFMsT0FBTyxVQUFVO0FBQzNULE9BQU8sV0FBVztBQUNsQixTQUFTLG9CQUFvQjtBQUM3QixPQUFPLG1CQUFtQjtBQUgxQixJQUFNLG1DQUFtQztBQU16QyxJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTLENBQUMsTUFBTSxHQUFHLGNBQWMsQ0FBQztBQUFBLEVBQ2xDLFNBQVM7QUFBQSxJQUNQLE9BQU87QUFBQSxNQUNMLEtBQUssS0FBSyxRQUFRLGtDQUFXLE9BQU87QUFBQSxJQUN0QztBQUFBLEVBQ0Y7QUFBQSxFQUNBLE9BQU87QUFBQSxJQUNMLFFBQVE7QUFBQSxFQUNWO0FBQ0YsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K

examples/organization/CHANGELOG.md

@@ -1,19 +1,5 @@
 # organization
 
-## 0.0.36
-
-### Patch Changes
-
-- jazz-react@0.9.22
-
-## 0.0.35
-
-### Patch Changes
-
-- Updated dependencies [1be017d]
-  - jazz-tools@0.9.21
-  - jazz-react@0.9.21
-
 ## 0.0.34
 
 ### Patch Changes

examples/organization/package.json

@@ -1,7 +1,7 @@
 {
   "name": "organization",
   "private": true,
-  "version": "0.0.36",
+  "version": "0.0.34",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/organization/src/main.tsx

@@ -1,4 +1,4 @@
-import { DemoAuthBasicUI, JazzProvider, useDemoAuth } from "jazz-react";
+import { JazzProvider } from "jazz-react";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
@@ -28,22 +28,13 @@ function Router() {
 }
 
 function JazzAndAuth({ children }: { children: React.ReactNode }) {
-  const [auth, authState] = useDemoAuth();
-
   return (
-    <>
-      <JazzProvider
-        AccountSchema={JazzAccount}
-        auth={auth}
-        peer="wss://cloud.jazz.tools/?key=organization-example@garden.co"
-      >
-        {children}
-      </JazzProvider>
-
-      {authState.state !== "signedIn" && (
-        <DemoAuthBasicUI appName="Organization" state={authState} />
-      )}
-    </>
+    <JazzProvider
+      AccountSchema={JazzAccount}
+      peer="wss://cloud.jazz.tools/?key=organization-example@garden.co"
+    >
+      {children}
+    </JazzProvider>
   );
 }
 

examples/passkey-svelte/CHANGELOG.md

@@ -1,17 +1,5 @@
 # passkey-svelte
 
-## 0.0.31
-
-### Patch Changes
-
-- jazz-svelte@0.9.22
-
-## 0.0.30
-
-### Patch Changes
-
-- jazz-svelte@0.9.21
-
 ## 0.0.29
 
 ### Patch Changes

examples/passkey-svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "passkey-svelte",
-  "version": "0.0.31",
+  "version": "0.0.29",
   "type": "module",
   "private": true,
   "scripts": {

examples/passkey-svelte/src/routes/+layout.svelte

@@ -2,26 +2,13 @@
   import { JazzProvider, PasskeyAuthBasicUI, usePasskeyAuth } from 'jazz-svelte';
 
   let { children } = $props();
-
-  let auth = usePasskeyAuth({ appName: 'minimal-svelte-auth-passkey' });
-
-  $inspect(auth.state);
 </script>
 
-<div
-  style="width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center;"
->
-  <PasskeyAuthBasicUI state={auth.state} />
-
-  {#if auth.current}
-    <JazzProvider
-      auth={auth.current}
-      peer="wss://cloud.jazz.tools/?key=minimal-svelte-auth-passkey@garden.co"
-    >
-      {@render children?.()}
-    </JazzProvider>
-  {/if}
-</div>
+<JazzProvider peer="wss://cloud.jazz.tools/?key=minimal-svelte-auth-passkey@garden.co">
+  <PasskeyAuthBasicUI auth={usePasskeyAuth({ appName: 'minimal-svelte-auth-passkey' })}>
+    {@render children?.()}
+  </PasskeyAuthBasicUI>
+</JazzProvider>
 
 <style>
   :global(html, body) {

examples/passkey/CHANGELOG.md

@@ -1,19 +1,5 @@
 # minimal-auth-passkey
 
-## 0.0.41
-
-### Patch Changes
-
-- jazz-react@0.9.22
-
-## 0.0.40
-
-### Patch Changes
-
-- Updated dependencies [1be017d]
-  - jazz-tools@0.9.21
-  - jazz-react@0.9.21
-
 ## 0.0.39
 
 ### Patch Changes

examples/passkey/package.json

@@ -1,7 +1,7 @@
 {
   "name": "passkey",
   "private": true,
-  "version": "0.0.41",
+  "version": "0.0.39",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/passkey/src/main.tsx

@@ -5,20 +5,15 @@ import App from "./App.tsx";
 import "./index.css";
 
 function JazzAndAuth({ children }: { children: React.ReactNode }) {
-  const [auth, state] = usePasskeyAuth({
+  const auth = usePasskeyAuth({
     appName: "Jazz Minimal Auth Passkey Example",
   });
 
   return (
-    <>
-      <JazzProvider
-        auth={auth}
-        peer="wss://cloud.jazz.tools/?key=minimal-auth-passkey-example@garden.co"
-      >
-        {children}
-      </JazzProvider>
-      <PasskeyAuthBasicUI state={state} />
-    </>
+    <JazzProvider peer="wss://cloud.jazz.tools/?key=minimal-auth-passkey-example@garden.co">
+      <PasskeyAuthBasicUI {...auth} />
+      {children}
+    </JazzProvider>
   );
 }
 

examples/password-manager/CHANGELOG.md

@@ -1,19 +1,5 @@
 # jazz-password-manager
 
-## 0.0.62
-
-### Patch Changes
-
-- jazz-react@0.9.22
-
-## 0.0.61
-
-### Patch Changes
-
-- Updated dependencies [1be017d]
-  - jazz-tools@0.9.21
-  - jazz-react@0.9.21
-
 ## 0.0.60
 
 ### Patch Changes

examples/password-manager/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-password-manager",
   "private": true,
-  "version": "0.0.62",
+  "version": "0.0.60",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -12,8 +12,8 @@
     "clean-install": "rm -rf node_modules pnpm-lock.yaml && pnpm install"
   },
   "dependencies": {
-    "jazz-react": "workspace:0.9.22",
-    "jazz-tools": "workspace:0.9.21",
+    "jazz-react": "workspace:0.9.20",
+    "jazz-tools": "workspace:0.9.20",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.41.5",

examples/password-manager/src/2_main.tsx

@@ -6,21 +6,18 @@ import App from "./5_App.tsx";
 import "./index.css";
 
 function JazzAndAuth({ children }: { children: React.ReactNode }) {
-  const [auth, state] = usePasskeyAuth({
+  const auth = usePasskeyAuth({
     appName: "Jazz Password Manager",
   });
 
   return (
-    <>
-      <JazzProvider
-        AccountSchema={PasswordManagerAccount}
-        auth={auth}
-        peer="wss://cloud.jazz.tools/?key=password-manager-example-jazz@garden.co"
-      >
-        {children}
-      </JazzProvider>
-      <PasskeyAuthBasicUI state={state} />
-    </>
+    <JazzProvider
+      AccountSchema={PasswordManagerAccount}
+      peer="wss://cloud.jazz.tools/?key=password-manager-example-jazz@garden.co"
+    >
+      <PasskeyAuthBasicUI {...auth} />
+      {children}
+    </JazzProvider>
   );
 }
 

examples/pets/CHANGELOG.md

@@ -1,21 +1,5 @@
 # jazz-example-pets
 
-## 0.0.160
-
-### Patch Changes
-
-- jazz-browser-media-images@0.9.22
-- jazz-react@0.9.22
-
-## 0.0.159
-
-### Patch Changes
-
-- Updated dependencies [1be017d]
-  - jazz-tools@0.9.21
-  - jazz-browser-media-images@0.9.21
-  - jazz-react@0.9.21
-
 ## 0.0.158
 
 ### Patch Changes

examples/pets/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-pets",
   "private": true,
-  "version": "0.0.160",
+  "version": "0.0.158",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -19,9 +19,9 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-browser-media-images": "workspace:0.9.22",
-    "jazz-react": "workspace:0.9.22",
-    "jazz-tools": "workspace:0.9.21",
+    "jazz-browser-media-images": "workspace:0.9.20",
+    "jazz-react": "workspace:0.9.20",
+    "jazz-tools": "workspace:0.9.20",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.3.1",
@@ -41,7 +41,7 @@
     "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.20",
     "is-ci": "^3.0.1",
-    "jazz-run": "workspace:0.9.22",
+    "jazz-run": "workspace:0.9.20",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.4.15",
     "typescript": "~5.6.2",

examples/pets/src/2_main.tsx

@@ -8,13 +8,7 @@ import {
 } from "react-router-dom";
 import "./index.css";
 
-import {
-  DemoAuthBasicUI,
-  JazzProvider,
-  useAcceptInvite,
-  useAccount,
-  useDemoAuth,
-} from "jazz-react";
+import { JazzProvider, useAcceptInvite, useAccount } from "jazz-react";
 
 import { PetAccount, PetPost } from "./1_schema.ts";
 import { NewPetPostForm } from "./3_NewPetPostForm.tsx";
@@ -41,14 +35,15 @@ const peer =
 const appName = "Jazz Rate My Pet Example";
 
 function JazzAndAuth({ children }: { children: React.ReactNode }) {
-  const [auth, authState] = useDemoAuth();
-
   return (
     <>
-      <JazzProvider auth={auth} peer={peer} AccountSchema={PetAccount}>
+      <JazzProvider
+        peer={peer}
+        AccountSchema={PetAccount}
+        localOnly="anonymous"
+      >
         {children}
       </JazzProvider>
-      <DemoAuthBasicUI appName={appName} state={authState} />
     </>
   );
 }

examples/reactions/CHANGELOG.md

@@ -1,21 +1,5 @@
 # reactions
 
-## 0.0.40
-
-### Patch Changes
-
-- jazz-browser-media-images@0.9.22
-- jazz-react@0.9.22
-
-## 0.0.39
-
-### Patch Changes
-
-- Updated dependencies [1be017d]
-  - jazz-tools@0.9.21
-  - jazz-browser-media-images@0.9.21
-  - jazz-react@0.9.21
-
 ## 0.0.38
 
 ### Patch Changes

examples/reactions/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reactions",
   "private": true,
-  "version": "0.0.40",
+  "version": "0.0.38",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/reactions/src/main.tsx

@@ -1,24 +1,18 @@
-import { DemoAuthBasicUI, JazzProvider, useDemoAuth } from "jazz-react";
+import { JazzProvider } from "jazz-react";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
 
 function JazzAndAuth({ children }: { children: React.ReactNode }) {
-  const [auth, authState] = useDemoAuth();
-
   return (
     <>
       <JazzProvider
-        auth={auth}
+        localOnly="anonymous"
         peer="wss://cloud.jazz.tools/?key=reactions-example@garden.co"
       >
         {children}
       </JazzProvider>
-
-      {authState.state !== "signedIn" && (
-        <DemoAuthBasicUI appName="Reactions" state={authState} />
-      )}
     </>
   );
 }

examples/todo-vue/CHANGELOG.md

@@ -1,21 +1,5 @@
 # todo-vue
 
-## 0.0.45
-
-### Patch Changes
-
-- jazz-browser@0.9.22
-- jazz-vue@0.9.22
-
-## 0.0.44
-
-### Patch Changes
-
-- Updated dependencies [1be017d]
-  - jazz-tools@0.9.21
-  - jazz-browser@0.9.21
-  - jazz-vue@0.9.21
-
 ## 0.0.43
 
 ### Patch Changes

examples/todo-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "todo-vue",
-  "version": "0.0.45",
+  "version": "0.0.43",
   "private": true,
   "type": "module",
   "scripts": {

examples/todo-vue/src/main.ts

@@ -11,30 +11,36 @@ declare module "jazz-vue" {
   }
 }
 
+const AuthScreen = defineComponent({
+  name: "AuthScreen",
+  setup() {
+    const auth = useDemoAuth();
+
+    return () => [
+      auth.value.state === "anonymous"
+        ? h(DemoAuthBasicUI, {
+            appName: "Jazz Vue Todo",
+            auth,
+          })
+        : h(App),
+    ];
+  },
+});
+
 const RootComponent = defineComponent({
   name: "RootComponent",
   setup() {
-    const { authMethod, state } = useDemoAuth();
-
-    return () => [
+    return () =>
       h(
         JazzProvider,
         {
           AccountSchema: ToDoAccount,
-          auth: authMethod.value,
           peer: "wss://cloud.jazz.tools/?key=vue-todo-example-jazz@garden.co",
         },
         {
-          default: () => h(App),
+          default: () => h(AuthScreen),
         },
-      ),
-
-      state.state !== "signedIn" &&
-        h(DemoAuthBasicUI, {
-          appName: "Jazz Vue Todo",
-          state,
-        }),
-    ];
+      );
   },
 });
 

examples/todo/CHANGELOG.md

@@ -1,19 +1,5 @@
 # jazz-example-todo
 
-## 0.0.159
-
-### Patch Changes
-
-- jazz-react@0.9.22
-
-## 0.0.158
-
-### Patch Changes
-
-- Updated dependencies [1be017d]
-  - jazz-tools@0.9.21
-  - jazz-react@0.9.21
-
 ## 0.0.157
 
 ### Patch Changes

examples/todo/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-todo",
   "private": true,
-  "version": "0.0.159",
+  "version": "0.0.157",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,8 +16,8 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-react": "workspace:0.9.22",
-    "jazz-tools": "workspace:0.9.21",
+    "jazz-react": "workspace:0.9.20",
+    "jazz-tools": "workspace:0.9.20",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.3.1",

examples/todo/src/2_main.tsx

@@ -38,18 +38,17 @@ import {
 const appName = "Jazz Todo List Example";
 
 function JazzAndAuth({ children }: { children: React.ReactNode }) {
-  const [passkeyAuth, passKeyState] = usePasskeyAuth({ appName });
+  const auth = usePasskeyAuth({ appName });
 
   return (
     <>
       <JazzProvider
         AccountSchema={TodoAccount}
-        auth={passkeyAuth}
         peer="wss://cloud.jazz.tools/?key=todo-example-jazz@garden.co"
       >
+        <PasskeyAuthBasicUI {...auth} />
         {children}
       </JazzProvider>
-      <PasskeyAuthBasicUI state={passKeyState} />
     </>
   );
 }

examples/version-history/CHANGELOG.md

@@ -1,19 +1,5 @@
 # version-history
 
-## 0.0.37
-
-### Patch Changes
-
-- jazz-react@0.9.22
-
-## 0.0.36
-
-### Patch Changes
-
-- Updated dependencies [1be017d]
-  - jazz-tools@0.9.21
-  - jazz-react@0.9.21
-
 ## 0.0.35
 
 ### Patch Changes

examples/version-history/package.json

@@ -1,7 +1,7 @@
 {
   "name": "version-history",
   "private": true,
-  "version": "0.0.37",
+  "version": "0.0.35",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/version-history/src/main.tsx

@@ -1,25 +1,17 @@
-import { DemoAuthBasicUI, JazzProvider, useDemoAuth } from "jazz-react";
+import { JazzProvider } from "jazz-react";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
 
 function JazzAndAuth({ children }: { children: React.ReactNode }) {
-  const [auth, authState] = useDemoAuth();
-
   return (
-    <>
-      <JazzProvider
-        auth={auth}
-        peer="wss://cloud.jazz.tools/?key=version-history@garden.co"
-      >
-        {children}
-      </JazzProvider>
-
-      {authState.state !== "signedIn" && (
-        <DemoAuthBasicUI appName="React + Demo Auth" state={authState} />
-      )}
-    </>
+    <JazzProvider
+      localOnly="anonymous"
+      peer="wss://cloud.jazz.tools/?key=version-history@garden.co"
+    >
+      {children}
+    </JazzProvider>
   );
 }
 

flake.lock

@@ -5,11 +5,11 @@
         "systems": "systems"
       },
       "locked": {
-        "lastModified": 1731533236,
-        "narHash": "sha256-l0KFg5HjrsfsO/JpG+r7fRrqm12kzFHyUHqHCVpMMbI=",
+        "lastModified": 1726560853,
+        "narHash": "sha256-X6rJYSESBVr3hBoH0WbKE5KvhPU5bloyZ2L4K60/fPQ=",
         "owner": "numtide",
         "repo": "flake-utils",
-        "rev": "11707dc2f618dd54ca8739b309ec4fc024de578b",
+        "rev": "c1dfcf08411b08f6b8615f7d8971a2bfa81d5e8a",
         "type": "github"
       },
       "original": {
@@ -20,11 +20,11 @@
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1737885589,
-        "narHash": "sha256-Zf0hSrtzaM1DEz8//+Xs51k/wdSajticVrATqDrfQjg=",
+        "lastModified": 1730785428,
+        "narHash": "sha256-Zwl8YgTVJTEum+L+0zVAWvXAGbWAuXHax3KzuejaDyo=",
         "owner": "nixos",
         "repo": "nixpkgs",
-        "rev": "852ff1d9e153d8875a83602e03fdef8a63f0ecf8",
+        "rev": "4aa36568d413aca0ea84a1684d2d46f55dbabad7",
         "type": "github"
       },
       "original": {

flake.nix

@@ -18,15 +18,12 @@
           buildInputs = with pkgs; [
             nodejs_22
             nodePackages.pnpm
-            git
           ];
 
           shellHook = ''
-            echo ""
             echo "Welcome to the Jazz development environment!"
             echo "Run 'pnpm install' to install the dependencies."
-            echo ""
           '';
         };
       });
-}
+}

homepage/homepage/.gitignore

@@ -40,6 +40,3 @@ codeSamples
 .turbo
 
 .env
-
-# LLM docs
-public/llms*.txt

homepage/homepage/app/docs/[framework]/[...slug]/page.tsx

@@ -1,7 +1,7 @@
 import DocsLayout from "@/app/docs/[framework]/(others)/layout";
 import { TableOfContents } from "@/components/docs/TableOfContents";
 import ComingSoonPage from "@/components/docs/coming-soon.mdx";
-import { docNavigationItems } from "@/lib/docNavigationItems.js";
+import { docNavigationItems } from "@/lib/docNavigationItems";
 import { Framework, frameworks } from "@/lib/framework";
 import type { Toc } from "@stefanprobst/rehype-extract-toc";
 import { Prose } from "gcmp-design-system/src/app/components/molecules/Prose";

homepage/homepage/components/docs/docs-intro.mdx

@@ -39,20 +39,7 @@ Sync and persist your data by setting up a [sync and storage infrastructure](/do
 
 Learn how to structure your data using [collaborative values](/docs/schemas/covalues).
 
-## API Reference
-
-Many of the packages provided are documented in the [API Reference](/api-reference).
-
-## LLM Docs
-
-We support the [llms.txt](https://llmstxt.org/) convention for making documentation available to large language models and the applications that make use of them.
-
-We currently have: 
-
-- [/llms.txt](/llms.txt) - A overview listing of the available packages and their documentation
-- [/llms-full.txt](/llms-full.txt) - Full documentation for our packages
-
 ## Get support
 
 If you have any questions or need assistance, please don't hesitate to reach out to us on [Discord](https://discord.gg/utDMjHYg42).
-We would love to help you get started.
+We would love to help you get started.

homepage/homepage/components/docs/nav.tsx

@@ -3,7 +3,7 @@
 import { SideNav } from "@/components/SideNav";
 import { SideNavHeader } from "@/components/SideNavHeader";
 import { FrameworkSelect } from "@/components/docs/FrameworkSelect";
-import { docNavigationItems } from "@/lib/docNavigationItems.js";
+import { docNavigationItems } from "@/lib/docNavigationItems";
 import { useFramework } from "@/lib/use-framework";
 import { clsx } from "clsx";
 

homepage/homepage/components/docs/tags.tsx

@@ -156,14 +156,8 @@ export function FnDecl({
   doc: ReactNode;
   example: ReactNode;
 }) {
-  // Extract the method name from the signature (everything before the first parenthesis or type parameter)
-  const methodName = signature.match(/^[^(<]+/)?.[0];
-
   return (
-    <div
-      id={methodName}
-      className="text-sm flex flex-col gap-3 my-2 p-3 rounded bg-stone-50 dark:bg-stone-925"
-    >
+    <div className="text-sm flex flex-col gap-3 my-2 p-3 rounded bg-stone-50 dark:bg-stone-925">
       <div className="flex flex-col gap-2">
         <div>
           {<Highlight>{signature + ":"}</Highlight>}{" "}

homepage/homepage/genDocs.mjs

@@ -1,7 +1,21 @@
 import { Application } from "typedoc";
-import { PACKAGES } from "./utils/config.mjs";
 
-for (const { packageName, entryPoint, tsconfig, typedocOptions } of PACKAGES) {
+for (const { packageName, entryPoint, tsconfig, typedocOptions } of [
+  {
+    packageName: "jazz-tools",
+    entryPoint: "exports.ts",
+  },
+  {
+    packageName: "jazz-react",
+    entryPoint: "index.ts",
+    typedocOptions: {
+      skipErrorChecking: true, // TODO: remove this. Temporary workaround
+    },
+  },
+  { packageName: "jazz-browser" },
+  { packageName: "jazz-browser-media-images" },
+  { packageName: "jazz-nodejs" },
+]) {
   const app = await Application.bootstrapWithPlugins({
     entryPoints: [
       `../../packages/${packageName}/src/${entryPoint || "index.ts"}`,

homepage/homepage/generate-docs/llms-full.mjs

@@ -1,511 +0,0 @@
-import { promises as fs } from "fs";
-import path from "path";
-import { Deserializer, ReflectionKind } from "typedoc";
-import { DOC_SECTIONS, PACKAGES } from "./utils/config.mjs";
-import {
-  getPackageDescription,
-  loadTypedocFiles,
-  writeDocsFile,
-} from "./utils/index.mjs";
-
-function formatType(type) {
-  if (!type) return "unknown";
-
-  // Handle type aliases and references
-  if (type.type === "reference") {
-    const name = type.package ? `${type.package}.${type.name}` : type.name;
-    return (
-      name +
-      (type.typeArguments
-        ? `<${type.typeArguments.map(formatType).join(", ")}>`
-        : "")
-    );
-  }
-
-  // Handle union types
-  if (type.type === "union") {
-    return type.types.map(formatType).join(" | ");
-  }
-
-  // Handle array types
-  if (type.type === "array") {
-    return `${formatType(type.elementType)}[]`;
-  }
-
-  // Handle basic types
-  if (type.type === "intrinsic" || type.type === "literal") {
-    return typeof type.value !== "undefined"
-      ? JSON.stringify(type.value)
-      : type.name;
-  }
-
-  // Handle tuple types
-  if (type.type === "tuple") {
-    return `[${type.elements.map(formatType).join(", ")}]`;
-  }
-
-  // Handle intersection types
-  if (type.type === "intersection") {
-    return type.types.map(formatType).join(" & ");
-  }
-
-  // Handle template literal types
-  if (type.type === "template-literal") {
-    return `\`${type.head}${type.tail.map((t) => `\${${formatType(t[0])}}${t[1]}`).join("")}\``;
-  }
-
-  // Handle reflection types (object types and function types)
-  if (type.type === "reflection") {
-    if (type.declaration.signatures) {
-      const sig = type.declaration.signatures[0];
-      const params =
-        sig.parameters
-          ?.map(
-            (p) =>
-              `${p.name}${p.flags?.isOptional ? "?" : ""}: ${formatType(p.type)}`,
-          )
-          .join(", ") || "";
-      return `(${params}) => ${formatType(sig.type)}`;
-    }
-
-    if (type.declaration.children) {
-      return (
-        "{ " +
-        type.declaration.children
-          .map((child) => {
-            const optional = child.flags?.isOptional ? "?" : "";
-            return `${child.name}${optional}: ${formatType(child.type)}`;
-          })
-          .join("; ") +
-        " }"
-      );
-    }
-  }
-
-  // Handle query types
-  if (type.type === "query") {
-    return `typeof ${formatType(type.queryType)}`;
-  }
-
-  // Handle conditional types
-  if (type.type === "conditional") {
-    return `${formatType(type.checkType)} extends ${formatType(type.extendsType)} ? ${formatType(type.trueType)} : ${formatType(type.falseType)}`;
-  }
-
-  // Handle index access types
-  if (type.type === "indexedAccess") {
-    return `${formatType(type.objectType)}[${formatType(type.indexType)}]`;
-  }
-
-  // Handle mapped types
-  if (type.type === "mapped") {
-    const readonly = type.readonlyModifier === "+" ? "readonly " : "";
-    const optional = type.optionalModifier === "+" ? "?" : "";
-    return `{ ${readonly}[${type.parameter} in ${formatType(type.parameterType)}]${optional}: ${formatType(type.templateType)} }`;
-  }
-
-  // Handle type operators
-  if (type.type === "typeOperator") {
-    return `${type.operator} ${formatType(type.target)}`;
-  }
-
-  // Handle predicate types
-  if (type.type === "predicate") {
-    return `${type.name} is ${formatType(type.targetType)}`;
-  }
-
-  // Handle inferred types
-  if (type.type === "inferred") {
-    return `infer ${type.name}`;
-  }
-
-  // Handle rest types
-  if (type.type === "rest") {
-    return `...${formatType(type.elementType)}`;
-  }
-
-  // Handle unknown types with more detail
-  if (type.toString) {
-    return type.toString();
-  }
-
-  return "unknown";
-}
-
-function formatComment(comment) {
-  if (!comment) return "";
-
-  let text =
-    comment.summary
-      ?.map((part) => part.text)
-      .join("")
-      .trim() || "";
-
-  // Add parameter descriptions if available
-  if (comment.blockTags) {
-    const params = comment.blockTags
-      .filter((tag) => tag.tag === "@param")
-      .map((tag) => {
-        const paramName = tag.param;
-        let description = "";
-        let codeExample = "";
-
-        tag.content.forEach((part) => {
-          if (part.kind === "code") {
-            // Don't wrap in code blocks since examples are already wrapped
-            codeExample += "\n" + part.text + "\n";
-          } else {
-            description += part.text;
-          }
-        });
-
-        return `- ${paramName}: ${description.trim()}${codeExample}`;
-      });
-
-    if (params.length > 0) {
-      text += "\n\nParameters:\n" + params.join("\n");
-    }
-
-    // Add remarks if available
-    const remarks = comment.blockTags
-      .filter((tag) => tag.tag === "@remarks")
-      .map((tag) =>
-        tag.content
-          .map((part) => part.text)
-          .join("")
-          .trim(),
-      );
-
-    if (remarks.length > 0) {
-      text += "\n\nRemarks:\n" + remarks.join("\n");
-    }
-
-    // Add examples
-    const examples = comment.blockTags
-      .filter((tag) => tag.tag === "@example")
-      .map((tag) =>
-        tag.content
-          .map((part) => {
-            if (part.kind === "code") {
-              // Don't wrap in code blocks since examples are already wrapped
-              return "\n" + part.text + "\n";
-            }
-            return part.text;
-          })
-          .join("")
-          .trim(),
-      );
-
-    if (examples.length > 0) {
-      text += "\n\nExamples:\n" + examples.join("\n");
-    }
-  }
-
-  return text;
-}
-
-async function readMdxContent(url) {
-  try {
-    // Special case for the introduction
-    if (url === "/docs") {
-      const introPath = path.join(
-        process.cwd(),
-        "components/docs/docs-intro.mdx",
-      );
-      try {
-        const content = await fs.readFile(introPath, "utf8");
-        // Remove imports and exports
-        return content
-          .replace(/^import[^\n]*\n/gm, "")
-          .replace(/export const metadata[^;]*;/, "")
-          .trim();
-      } catch (err) {
-        if (err.code !== "ENOENT") throw err;
-      }
-    }
-
-    // Convert URL to file path
-    // Remove leading slash and 'docs' from URL
-    const relativePath = url.replace(/^\/docs\/?/, "");
-
-    // Base directory for docs
-    const baseDir = path.join(process.cwd(), "app/docs/[framework]/[...slug]");
-
-    // If it's a directory, try to read all framework variants
-    const fullPath = path.join(baseDir, relativePath);
-    try {
-      const stats = await fs.stat(fullPath);
-      if (stats.isDirectory()) {
-        // Read all MDX files in the directory
-        const files = await fs.readdir(fullPath);
-        const mdxFiles = files.filter((f) => f.endsWith(".mdx"));
-
-        if (mdxFiles.length === 0) return null;
-
-        // Combine content from all framework variants
-        const contents = await Promise.all(
-          mdxFiles.map(async (file) => {
-            const content = await fs.readFile(
-              path.join(fullPath, file),
-              "utf8",
-            );
-            // Remove imports and exports
-            const cleanContent = content
-              .replace(/^import[^\n]*\n/gm, "")
-              .replace(/export const metadata[^;]*;/, "")
-              .trim();
-            return `### ${path.basename(file, ".mdx")} Implementation\n\n${cleanContent}`;
-          }),
-        );
-
-        return contents.join("\n\n---\n\n");
-      }
-    } catch (err) {
-      if (err.code !== "ENOENT") throw err;
-    }
-
-    // Try as a single MDX file
-    const mdxPath = fullPath + ".mdx";
-    try {
-      const content = await fs.readFile(mdxPath, "utf8");
-      // Remove imports and exports
-      return content
-        .replace(/^import[^\n]*\n/gm, "")
-        .replace(/export const metadata[^;]*;/, "")
-        .trim();
-    } catch (err) {
-      if (err.code !== "ENOENT") throw err;
-    }
-
-    console.warn(`Could not find MDX content for ${url} at ${fullPath}`);
-    return null;
-  } catch (error) {
-    console.warn(`Error reading MDX content for ${url}:`, error);
-    return null;
-  }
-}
-
-async function generateDetailedDocs(docs) {
-  const output = [];
-  const deserializer = new Deserializer();
-
-  // Project title
-  output.push("# Jazz\n");
-
-  // Documentation sections with full content
-  output.push("## Documentation\n");
-  for (const section of DOC_SECTIONS) {
-    output.push(`### ${section.title}\n`);
-
-    for (const page of section.pages) {
-      output.push(`#### ${page.title}\n`);
-      const content = await readMdxContent(page.url);
-      console.log(content);
-      if (content) {
-        // If the content contains framework-specific implementations, they're already properly formatted
-        // Otherwise, just add the content directly
-        output.push(content + "\n");
-      }
-      output.push("\n");
-    }
-  }
-
-  // API Reference by package
-  output.push("## API Reference\n\n");
-  // for (const [packageName, packageDocs] of Object.entries(docs)) {
-  //   const project = deserializer.reviveProject(packageDocs, packageName);
-
-  //   // Add package heading with description
-  //   output.push(`### ${packageName}\n`);
-  //   output.push(`${getPackageDescription(packageName)}\n\n`);
-  //   output.push(
-  //     `[API Reference](https://jazz.tools/api-reference/${packageName})\n\n`,
-  //   );
-
-  //   // Process each category
-  //   project.categories?.forEach((category) => {
-  //     output.push(`#### ${category.title}\n`);
-
-  //     category.children.forEach((child) => {
-  //       // Add name, kind, and API reference link
-  //       const apiLink = `[API Reference](https://jazz.tools/api-reference/${packageName}#${child.name})`;
-  //       output.push(
-  //         `##### ${child.name} (${ReflectionKind[child.kind]}) ${apiLink}\n`,
-  //       );
-
-  //       // Add description if available
-  //       const description = formatComment(child.comment);
-  //       if (description) {
-  //         output.push(`${description}\n`);
-  //       }
-
-  //       output.push("\n");
-
-  //       // Add properties for classes/interfaces
-  //       if (child.children) {
-  //         output.push("Properties:\n");
-
-  //         // Group overloaded methods by name
-  //         const methodGroups = new Map();
-  //         child.children.forEach((prop) => {
-  //           if (prop.signatures?.length > 0) {
-  //             const existing = methodGroups.get(prop.name) || [];
-  //             methodGroups.set(prop.name, [...existing, prop]);
-  //           }
-  //         });
-
-  //         child.children.forEach((prop) => {
-  //           // Skip if this is an overloaded method that we'll handle later
-  //           if (
-  //             prop.signatures?.length > 0 &&
-  //             methodGroups.get(prop.name)?.length > 1
-  //           ) {
-  //             return;
-  //           }
-
-  //           const type = formatType(prop.type);
-  //           const description = formatComment(prop.comment);
-
-  //           // Output the property name and type, but skip the type for methods since we'll show signatures
-  //           if (prop.signatures?.length > 0) {
-  //             output.push(
-  //               `- ${prop.name}${description ? ` - ${description}` : ""}\n`,
-  //             );
-  //           } else {
-  //             output.push(
-  //               `- ${prop.name}: ${type}${description ? ` - ${description}` : ""}\n`,
-  //             );
-  //           }
-
-  //           // Handle method signatures with proper indentation
-  //           if (prop.signatures) {
-  //             prop.signatures.forEach((sig) => {
-  //               const params = sig.parameters
-  //                 ?.map((p) => {
-  //                   const paramType = formatType(p.type);
-  //                   return `${p.name}: ${paramType}`;
-  //                 })
-  //                 .join(", ");
-
-  //               output.push(
-  //                 `    Method signature: \`(${params || ""}) => ${formatType(sig.type)}\`\n`,
-  //               );
-
-  //               // Add API reference URL for the method
-  //               output.push(
-  //                 `    [API Reference](https://jazz.tools/api-reference/${packageName}#${child.name}.${prop.name})\n`,
-  //               );
-
-  //               const methodDesc = formatComment(sig.comment);
-  //               if (methodDesc) {
-  //                 // Indent each line of the description
-  //                 const indentedDesc = methodDesc
-  //                   .split("\n")
-  //                   .map((line) => `    ${line}`)
-  //                   .join("\n");
-  //                 output.push(`${indentedDesc}\n`);
-  //               }
-  //             });
-  //           }
-  //         });
-
-  //         // Handle overloaded methods
-  //         methodGroups.forEach((props, name) => {
-  //           if (props.length <= 1) return;
-
-  //           const firstProp = props[0];
-  //           const description = formatComment(firstProp.comment);
-
-  //           output.push(`- ${name}${description ? ` - ${description}` : ""}\n`);
-
-  //           // Combine all signatures with proper indentation
-  //           const allSignatures = props.flatMap((p) => p.signatures || []);
-  //           allSignatures.forEach((sig) => {
-  //             const params = sig.parameters
-  //               ?.map((p) => {
-  //                 const paramType = formatType(p.type);
-  //                 return `${p.name}: ${paramType}`;
-  //               })
-  //               .join(", ");
-
-  //             output.push(
-  //               `    Method signature: \`(${params || ""}) => ${formatType(sig.type)}\`\n`,
-  //             );
-
-  //             // Add API reference URL for the overloaded method
-  //             output.push(
-  //               `    [API Reference](https://jazz.tools/api-reference/${packageName}#${child.name}.${name})\n`,
-  //             );
-
-  //             const methodDesc = formatComment(sig.comment);
-  //             if (methodDesc) {
-  //               // Indent each line of the description
-  //               const indentedDesc = methodDesc
-  //                 .split("\n")
-  //                 .map((line) => `    ${line}`)
-  //                 .join("\n");
-  //               output.push(`${indentedDesc}\n`);
-  //             }
-  //           });
-  //         });
-  //       }
-
-  //       // Add signatures for functions/methods
-  //       if (child.signatures) {
-  //         child.signatures.forEach((sig) => {
-  //           const params = sig.parameters
-  //             ?.map((p) => {
-  //               const type = formatType(p.type);
-  //               const desc = formatComment(p.comment);
-  //               return `${p.name}: ${type}${desc ? ` - ${desc}` : ""}`;
-  //             })
-  //             .join(", ");
-
-  //           output.push(`Signature: ${child.name}(${params || ""})`);
-
-  //           if (sig.type) {
-  //             output.push(`Returns: ${formatType(sig.type)}`);
-  //             if (sig.comment?.returns) {
-  //               output.push(
-  //                 `Return description: ${sig.comment.returns
-  //                   .map((part) => part.text)
-  //                   .join("")
-  //                   .trim()}`,
-  //               );
-  //             }
-  //           }
-
-  //           const sigComment = formatComment(sig.comment);
-  //           if (sigComment) {
-  //             output.push(`\n${sigComment}`);
-  //           }
-
-  //           output.push("\n");
-  //         });
-  //       }
-
-  //       output.push("\n");
-  //     });
-  //   });
-  // }
-
-  // Optional section for additional resources
-  output.push("## Resources\n\n");
-  output.push(
-    "- [Documentation](https://jazz.tools/docs): Detailed documentation about Jazz\n",
-  );
-  output.push(
-    "- [Examples](https://jazz.tools/examples): Code examples and tutorials\n",
-  );
-
-  await writeDocsFile("llms-full.txt", output.join("\n"));
-}
-
-// Main execution
-async function main() {
-  console.log("Generating detailed LLM docs...");
-  const docs = await loadTypedocFiles();
-  await generateDetailedDocs(docs);
-}
-
-main().catch(console.error);

homepage/homepage/generate-docs/llms.mjs

@@ -1,80 +0,0 @@
-import { Deserializer } from "typedoc";
-import { DOC_SECTIONS, PACKAGES } from "./utils/config.mjs";
-import {
-  cleanDescription,
-  loadTypedocFiles,
-  writeDocsFile,
-} from "./utils/index.mjs";
-
-async function generateConciseDocs(docs) {
-  const output = [];
-  const deserializer = new Deserializer();
-
-  // Project title
-  output.push("# Jazz\n");
-
-  // Documentation sections
-  output.push("## Documentation\n");
-  DOC_SECTIONS.forEach((section) => {
-    output.push(`### ${section.title}\n`);
-    section.pages.forEach((page) => {
-      output.push(`- [${page.title}](https://jazz.tools${page.url})\n`);
-    });
-    output.push("\n");
-  });
-
-  // API Reference by package
-  for (const [packageName, packageDocs] of Object.entries(docs)) {
-    const project = deserializer.reviveProject(packageDocs, packageName);
-
-    // Add package heading
-    output.push(`## ${packageName}\n`);
-
-    // Process each category and its exports with direct links
-    if (project.categories) {
-      const seen = new Set(); // Track seen names to avoid duplicates
-      project.categories.forEach((category) => {
-        category.children.forEach((child) => {
-          if (seen.has(child.name)) return;
-          seen.add(child.name);
-
-          // Get and clean up description
-          let description = child.comment?.summary
-            ? cleanDescription(child.comment.summary)
-            : "";
-
-          // Truncate description if it's too long
-          if (description && description.length > 150) {
-            description = description.substring(0, 147) + "...";
-          }
-
-          // Create the line without wrapping
-          output.push(
-            `- [${child.name}](https://jazz.tools/api-reference/${packageName}#${child.name})${description ? `: ${description}` : ""}\n`,
-          );
-        });
-      });
-      output.push("\n");
-    }
-  }
-
-  // Optional section for additional resources
-  output.push("## Optional\n");
-  output.push(
-    "- [Documentation](https://jazz.tools/docs): Detailed documentation about Jazz\n",
-  );
-  output.push(
-    "- [Examples](https://jazz.tools/examples): Code examples and tutorials\n",
-  );
-
-  await writeDocsFile("llms.txt", output.join(""));
-}
-
-// Main execution
-async function main() {
-  console.log("Generating concise LLM docs...");
-  const docs = await loadTypedocFiles();
-  await generateConciseDocs(docs);
-}
-
-main().catch(console.error);

homepage/homepage/generate-docs/utils/config.mjs

@@ -1,47 +0,0 @@
-import { docNavigationItems } from "../../lib/docNavigationItems.js";
-
-// Transform docNavigationItems into the format we need
-function transformNavItems() {
-  return docNavigationItems
-    .map((section) => ({
-      title: section.name,
-      pages: section.items
-        .filter((item) => item.done !== 0) // Skip not-yet-written docs
-        .map((item) => ({
-          title: item.name,
-          url: item.href,
-        })),
-    }))
-    .filter((section) => section.pages.length > 0); // Only include sections with pages
-}
-
-export const DOC_SECTIONS = transformNavItems();
-
-export const PACKAGES = [
-  {
-    packageName: "jazz-tools",
-    entryPoint: "exports.ts",
-    description:
-      "The base implementation for Jazz, a framework for distributed state. Provides a high-level API around the CoJSON protocol.",
-  },
-  {
-    packageName: "jazz-react",
-    entryPoint: "index.ts",
-    description: "React bindings for Jazz, a framework for distributed state.",
-    typedocOptions: {
-      skipErrorChecking: true, // TODO: remove this. Temporary workaround
-    },
-  },
-  {
-    packageName: "jazz-browser",
-    description: "Browser (Vanilla JavaScript) bindings for Jazz",
-  },
-  {
-    packageName: "jazz-browser-media-images",
-    description: "Image handling utilities for Jazz in the browser",
-  },
-  {
-    packageName: "jazz-nodejs",
-    description: "NodeJS/Bun server worker bindings for Jazz",
-  },
-];

homepage/homepage/generate-docs/utils/index.mjs

@@ -1,58 +0,0 @@
-import path from "path";
-import fs from "fs/promises";
-import { PACKAGES } from "./config.mjs";
-
-// Common configuration
-export const PACKAGE_DESCRIPTIONS = {
-  "jazz-tools":
-    "The base implementation for Jazz, a framework for distributed state. Provides a high-level API around the CoJSON protocol.",
-  "jazz-react": "React bindings for Jazz, a framework for distributed state.",
-  "jazz-browser": "Browser (Vanilla JavaScript) bindings for Jazz",
-  "jazz-browser-media-images":
-    "Image handling utilities for Jazz in the browser",
-  "jazz-nodejs": "NodeJS/Bun server worker bindings for Jazz",
-};
-
-// Helper functions
-export async function loadTypedocFiles() {
-  const docs = {};
-  for (const { packageName } of PACKAGES) {
-    docs[packageName] = JSON.parse(
-      await fs.readFile(
-        path.join(process.cwd(), "typedoc", packageName + ".json"),
-        "utf-8",
-      ),
-    );
-  }
-  return docs;
-}
-
-export function getPackageDescription(packageName) {
-  const pkg = PACKAGES.find((p) => p.packageName === packageName);
-  return pkg?.description || "";
-}
-
-export function cleanDescription(description) {
-  if (!description) return "";
-  return (
-    description
-      .map((part) => part.text)
-      .join(" ")
-      .trim()
-      // Remove code blocks
-      .replace(/```[\s\S]*?```/g, "")
-      // Remove line breaks and extra spaces
-      .replace(/\s+/g, " ")
-      // Clean up backticks
-      .replace(/\`/g, "'")
-  );
-}
-
-export async function writeDocsFile(filename, content) {
-  await fs.writeFile(
-    path.join(process.cwd(), "public", filename),
-    content,
-    "utf8",
-  );
-  console.log(`Documentation generated at 'public/${filename}'`);
-}

homepage/homepage/package.json

@@ -5,15 +5,11 @@
   "type": "module",
   "scripts": {
     "dev": "NODE_OPTIONS=--max-old-space-size=8192 next dev",
-    "build:generate-docs": "pnpm run generate:docs && pnpm run generate:llm-docs:all",
+    "build:generate-docs": "node genDocs.mjs --build",
     "build": "next build",
     "start": "next start",
     "format-and-lint": "biome check .",
-    "format-and-lint:fix": "biome check . --write",
-    "generate:docs": "node generate-docs/typedocs.mjs --build",
-    "generate:llm-docs:all": "pnpm run generate:llm-docs:concise && pnpm run generate:llm-docs:full",
-    "generate:llm-docs:concise": "node generate-docs/llms.mjs",
-    "generate:llm-docs:full": "node generate-docs/llms-full.mjs"
+    "format-and-lint:fix": "biome check . --write"
   },
   "packageManager": "pnpm@9.14.0",
   "dependencies": {

homepage/homepage/tsconfig.json

@@ -27,8 +27,7 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
-    "mdx.d.ts",
-    "lib/docNavigationItems.js"
+    "mdx.d.ts"
   ],
   "exclude": ["node_modules"]
 }

packages/cojson-transport-ws/CHANGELOG.md

@@ -1,11 +1,5 @@
 # cojson-transport-nodejs-ws
 
-## 0.9.22
-
-### Patch Changes
-
-- 14b6149: Handle websocket errors and add an onSuccess callback
-
 ## 0.9.19
 
 ### Patch Changes