chore: changeset

feat: change the peer & localOnly props into sync

.changeset/afraid-queens-bathe.md

@@ -0,0 +1,5 @@
+---
+"cojson": patch
+---
+
+Export the coValue loading config to reduce the timeout on tests

.changeset/blue-kids-remain.md

@@ -0,0 +1,16 @@
+---
+"jazz-react-native-auth-clerk": minor
+"jazz-react-auth-clerk": minor
+"cojson-transport-ws": minor
+"jazz-react-native": minor
+"jazz-auth-clerk": minor
+"jazz-react-core": minor
+"jazz-inspector": minor
+"jazz-browser": minor
+"jazz-nodejs": minor
+"jazz-react": minor
+"jazz-tools": minor
+"cojson": minor
+---
+
+Introducing the new auth system!

.changeset/config.json

@@ -11,7 +11,7 @@
       "cojson-storage-sqlite",
       "cojson-transport-ws",
       "jazz-browser",
-      "jazz-browser-auth-clerk",
+      "jazz-auth-clerk",
       "jazz-browser-media-images",
       "jazz-nodejs",
       "jazz-react",

.changeset/silent-turtles-obey.md

@@ -0,0 +1,8 @@
+---
+"jazz-react-core": minor
+"jazz-svelte": minor
+"jazz-tools": minor
+"jazz-vue": minor
+---
+
+Return null when a coValue is not found

examples/chat-rn-clerk/CHANGELOG.md

@@ -1,5 +1,15 @@
 # chat-rn-clerk
 
+## 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/package.json

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

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

@@ -9,7 +9,10 @@ export function JazzAndAuth({ children }: PropsWithChildren) {
     <JazzProviderWithClerk
       clerk={clerk}
       storage="sqlite"
-      peer="wss://cloud.jazz.tools/?key=chat-rn-clerk-example-jazz@garden.co"
+      sync={{
+        peer: "wss://cloud.jazz.tools/?key=chat-rn-clerk-example-jazz@garden.co",
+        when: "signedUp", // This makes the app work in local mode when the user is not authenticated
+      }}
     >
       {children}
     </JazzProviderWithClerk>

examples/chat-rn/CHANGELOG.md

@@ -1,5 +1,13 @@
 # chat-rn
 
+## 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.58",
+  "version": "1.0.59",
   "main": "index.js",
   "scripts": {
     "build": "expo export -p ios",

examples/chat-rn/src/App.tsx

@@ -46,7 +46,9 @@ function App() {
     <StrictMode>
       <JazzProvider
         storage="sqlite"
-        peer="wss://cloud.jazz.tools/?key=chat-rn-example-jazz@garden.co"
+        sync={{
+          peer: "wss://cloud.jazz.tools/?key=chat-rn-example-jazz@garden.co",
+        }}
       >
         <NavigationContainer linking={linking} ref={navigationRef}>
           <Stack.Navigator initialRouteName={initialRoute}>

examples/chat-vue/CHANGELOG.md

@@ -1,5 +1,14 @@
 # chat-vue
 
+## 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.45",
+  "version": "0.0.46",
   "private": true,
   "type": "module",
   "scripts": {

examples/chat-vue/src/main.ts

@@ -1,25 +1,9 @@
-import { DemoAuthBasicUI, JazzProvider, useDemoAuth } from "jazz-vue";
+import { DemoAuthBasicUI, JazzProvider } from "jazz-vue";
 import { createApp, defineComponent, h } from "vue";
 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() {
@@ -27,11 +11,19 @@ const RootComponent = defineComponent({
       h(
         JazzProvider,
         {
-          peer: "wss://cloud.jazz.tools/?key=vue-chat-example-jazz@garden.co",
-        },
-        {
-          default: () => h(AuthScreen),
+          sync: {
+            peer: "wss://cloud.jazz.tools/?key=vue-todo-example-jazz@garden.co",
+          },
         },
+        h(
+          DemoAuthBasicUI,
+          {
+            appName: "Jazz Vue Chat",
+          },
+          {
+            default: () => h(App),
+          },
+        ),
       );
   },
 });

examples/chat/CHANGELOG.md

@@ -1,5 +1,14 @@
 # jazz-example-chat
 
+## 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.141",
+  "version": "0.0.142",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/chat/src/app.tsx

@@ -1,11 +1,10 @@
-import { inIframe, onChatLoad } from "@/util.ts";
+import { getRandomUsername, inIframe, onChatLoad } from "@/util.ts";
 import { useIframeHashRouter } from "hash-slash";
-import { useAccount } from "jazz-react";
+import { JazzProvider, useAccount } from "jazz-react";
 import { Group, ID } from "jazz-tools";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { ChatScreen } from "./chatScreen.tsx";
-import { JazzAndAuth } from "./jazz.tsx";
 import { Chat } from "./schema.ts";
 import { ThemeProvider } from "./themeProvider.tsx";
 import { AppContainer, TopBar } from "./ui.tsx";
@@ -28,7 +27,15 @@ export function App() {
   return (
     <AppContainer>
       <TopBar>
-        <p>{me?.profile?.name}</p>
+        <input
+          type="text"
+          value={me?.profile?.name ?? ""}
+          onChange={(e) => {
+            if (!me?.profile) return;
+            me.profile.name = e.target.value;
+          }}
+          placeholder="Set username"
+        />
         {!inIframe && <button onClick={logOut}>Log out</button>}
       </TopBar>
       {router.route({
@@ -39,12 +46,20 @@ export function App() {
   );
 }
 
+const url = new URL(window.location.href);
+const defaultProfileName = url.searchParams.get("user") ?? getRandomUsername();
+
 createRoot(document.getElementById("root")!).render(
   <ThemeProvider>
     <StrictMode>
-      <JazzAndAuth>
+      <JazzProvider
+        sync={{
+          peer: "wss://cloud.jazz.tools/?key=chat-example-jazz@garden.co",
+        }}
+        defaultProfileName={defaultProfileName}
+      >
         <App />
-      </JazzAndAuth>
+      </JazzProvider>
     </StrictMode>
   </ThemeProvider>,
 );

examples/chat/src/jazz.tsx

@@ -1,11 +0,0 @@
-import { JazzProvider } from "jazz-react";
-export function JazzAndAuth({ children }: { children: React.ReactNode }) {
-  return (
-    <JazzProvider
-      localOnly="anonymous"
-      peer="wss://cloud.jazz.tools/?key=chat-example-jazz@garden.co"
-    >
-      {children}
-    </JazzProvider>
-  );
-}

examples/chat/src/util.ts

@@ -15,3 +15,20 @@ export function onChatLoad(chat: Chat) {
 }
 
 export const inIframe = window.self !== window.top;
+
+const animals = [
+  "elephant",
+  "penguin",
+  "giraffe",
+  "octopus",
+  "kangaroo",
+  "dolphin",
+  "cheetah",
+  "koala",
+  "platypus",
+  "pangolin",
+];
+
+export function getRandomUsername() {
+  return `Anonymous ${animals[Math.floor(Math.random() * animals.length)]}`;
+}

examples/chat/tests/chat.spec.ts

@@ -1,48 +1,35 @@
 import { test } from "@playwright/test";
 import { ChatPage } from "./pages/ChatPage";
-import { LoginPage } from "./pages/LoginPage";
 
-test("chat between two users", async ({ page }) => {
-  const loginPage = new LoginPage(page);
+test("chat between two users", async ({ page: marioPage, browser }) => {
+  const context = await browser.newContext();
+  const luigiPage = await context.newPage();
 
-  const mario = "S. Mario";
-  const luigi = "Luigi";
+  await marioPage.goto("/");
 
-  await loginPage.goto();
-  await loginPage.fillUsername(mario);
-  await loginPage.signup();
+  const marioChat = new ChatPage(marioPage);
+  const luigiChat = new ChatPage(luigiPage);
 
-  const chatPage = new ChatPage(page);
+  await marioChat.setUsername("Mario");
 
   const message1ByMario = "Hello Luigi, are you ready to save the princess?";
 
-  await chatPage.sendMessage(message1ByMario);
-  await chatPage.expectMessageRow(message1ByMario);
+  await marioChat.sendMessage(message1ByMario);
+  await marioChat.expectMessageRow(message1ByMario);
 
-  const roomURL = page.url();
+  const roomURL = marioPage.url();
+  await luigiPage.goto(roomURL);
 
-  await chatPage.logout();
+  await luigiChat.setUsername("Luigi");
 
-  await loginPage.expectLoaded();
-
-  await loginPage.fillUsername(luigi);
-  await loginPage.signup();
-
-  await page.goto(roomURL);
-
-  await chatPage.expectMessageRow(message1ByMario);
+  await luigiChat.expectMessageRow(message1ByMario);
 
   const message2ByLuigi =
     "No, I'm not ready yet. I'm still trying to find the key to the castle.";
 
-  await chatPage.sendMessage(message2ByLuigi);
-  await chatPage.expectMessageRow(message2ByLuigi);
+  await luigiChat.sendMessage(message2ByLuigi);
+  await luigiChat.expectMessageRow(message2ByLuigi);
 
-  await chatPage.logout();
-  await loginPage.loginAs(mario);
-
-  await page.goto(roomURL);
-
-  await chatPage.expectMessageRow(message1ByMario);
-  await chatPage.expectMessageRow(message2ByLuigi);
+  await marioChat.expectMessageRow(message1ByMario);
+  await luigiChat.expectMessageRow(message2ByLuigi);
 });

examples/chat/tests/pages/ChatPage.ts

@@ -4,7 +4,7 @@ export class ChatPage {
   readonly page: Page;
   readonly messageInput: Locator;
   readonly logoutButton: Locator;
-
+  readonly usernameInput: Locator;
   constructor(page: Page) {
     this.page = page;
     this.messageInput = page.getByRole("textbox", {
@@ -13,6 +13,11 @@ export class ChatPage {
     this.logoutButton = page.getByRole("button", {
       name: "Log out",
     });
+    this.usernameInput = page.getByPlaceholder("Set username");
+  }
+
+  async setUsername(username: string) {
+    await this.usernameInput.fill(username);
   }
 
   async sendMessage(message: string) {

examples/chat/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/clerk/CHANGELOG.md

@@ -1,5 +1,14 @@
 # minimal-auth-clerk
 
+## 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.40",
+  "version": "0.0.41",
   "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.20",
+    "jazz-react-auth-clerk": "workspace:0.9.21",
     "jazz-tools": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

examples/clerk/src/main.tsx

@@ -18,8 +18,10 @@ function JazzProvider({ children }: { children: React.ReactNode }) {
   return (
     <JazzProviderWithClerk
       clerk={clerk}
-      localOnly="anonymous"
-      peer="wss://cloud.jazz.tools/?key=minimal-auth-clerk-example@garden.co"
+      sync={{
+        peer: "wss://cloud.jazz.tools/?key=minimal-auth-clerk-example@garden.co",
+        when: "signedUp", // This makes the app work in local mode when the user is not authenticated
+      }}
     >
       {children}
     </JazzProviderWithClerk>

examples/file-share-svelte/CHANGELOG.md

@@ -1,5 +1,13 @@
 # file-share-svelte
 
+## 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.25",
+  "version": "0.0.26",
   "private": true,
   "type": "module",
   "scripts": {

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

@@ -24,9 +24,12 @@
 
 <JazzProvider
   AccountSchema={FileShareAccount}
-  peer="wss://cloud.jazz.tools/?key=minimal-svelte-auth-passkey@garden.co"
+  sync={{
+    peer: "wss://cloud.jazz.tools/?key=minimal-svelte-auth-passkey@garden.co",
+    when: "signedUp",
+  }}
 >
-  <PasskeyAuthBasicUI auth={usePasskeyAuth({ appName: 'File Share' })}>
+  <PasskeyAuthBasicUI appName="File Share">
     <div class="min-h-screen bg-gray-100">
       {@render children()}
     </div>

examples/form/CHANGELOG.md

@@ -1,5 +1,14 @@
 # form
 
+## 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.36",
+  "version": "0.0.37",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/form/src/main.tsx

@@ -5,18 +5,6 @@ import App from "./App.tsx";
 import "./index.css";
 import { JazzAccount } from "./schema.ts";
 
-function JazzAndAuth({ children }: { children: React.ReactNode }) {
-  return (
-    <JazzProvider
-      peer="wss://cloud.jazz.tools/?key=form-example@garden.co"
-      localOnly="anonymous"
-      AccountSchema={JazzAccount}
-    >
-      {children}
-    </JazzProvider>
-  );
-}
-
 declare module "jazz-react" {
   interface Register {
     Account: JazzAccount;
@@ -25,8 +13,13 @@ declare module "jazz-react" {
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <JazzAndAuth>
+    <JazzProvider
+      sync={{
+        peer: "wss://cloud.jazz.tools/?key=form-example@garden.co",
+      }}
+      AccountSchema={JazzAccount}
+    >
       <App />
-    </JazzAndAuth>
+    </JazzProvider>
   </StrictMode>,
 );

examples/form/tests/form.spec.ts

@@ -1,13 +1,7 @@
 import { expect, test } from "@playwright/test";
-import { LoginPage } from "./pages/LoginPage";
 
 test("create and edit an order", async ({ page }) => {
-  const loginPage = new LoginPage(page);
-
-  await loginPage.goto();
-  await loginPage.fillUsername("Alice");
-  await loginPage.signup();
-
+  await page.goto("/");
   // start an order
   await page.getByRole("link", { name: "Add new order" }).click();
   await page.getByLabel("Base tea").selectOption("Oolong");

examples/form/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/image-upload/CHANGELOG.md

@@ -1,5 +1,14 @@
 # image-upload
 
+## 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.38",
+  "version": "0.0.39",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/image-upload/src/main.tsx

@@ -5,20 +5,6 @@ import App from "./App.tsx";
 import "./index.css";
 import { JazzAccount } from "./schema.ts";
 
-function JazzAndAuth({ children }: { children: React.ReactNode }) {
-  return (
-    <>
-      <JazzProvider
-        peer="wss://cloud.jazz.tools/?key=image-upload-example@garden.co"
-        localOnly="anonymous"
-        AccountSchema={JazzAccount}
-      >
-        {children}
-      </JazzProvider>
-    </>
-  );
-}
-
 declare module "jazz-react" {
   interface Register {
     Account: JazzAccount;
@@ -27,8 +13,13 @@ declare module "jazz-react" {
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <JazzAndAuth>
+    <JazzProvider
+      sync={{
+        peer: "wss://cloud.jazz.tools/?key=image-upload-example@garden.co",
+      }}
+      AccountSchema={JazzAccount}
+    >
       <App />
-    </JazzAndAuth>
+    </JazzProvider>
   </StrictMode>,
 );

examples/music-player/CHANGELOG.md

@@ -1,5 +1,14 @@
 # jazz-example-musicplayer
 
+## 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.62",
+  "version": "0.0.63",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -21,8 +21,8 @@
     "@radix-ui/react-tooltip": "^1.1.6",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-react": "workspace:0.9.20",
-    "jazz-tools": "workspace:0.9.20",
+    "jazz-react": "workspace:0.9.21",
+    "jazz-tools": "workspace:0.9.21",
     "jazz-inspector": "workspace:*",
     "lucide-react": "^0.274.0",
     "react": "^18.3.1",

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

@@ -69,9 +69,11 @@ declare module "jazz-react" {
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <JazzProvider
-      peer={peer}
+      sync={{
+        peer,
+        when: "signedUp", // This makes the app work in local mode when the user is anonymous
+      }}
       storage="indexedDB"
-      localOnly="anonymous" // This makes the app work in local mode when the user is anonymous
       AccountSchema={MusicaAccount}
       defaultProfileName="Anonymous unicorn"
     >

examples/onboarding/CHANGELOG.md

@@ -1,5 +1,14 @@
 # jazz-example-onboarding
 
+## 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.42",
+  "version": "0.0.43",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/onboarding/src/main.tsx

@@ -11,14 +11,6 @@ const peer =
   ) as `ws://${string}`) ??
   "wss://cloud.jazz.tools/?key=onboarding-example-jazz@garden.co";
 
-function JazzAndAuth({ children }: { children: React.ReactNode }) {
-  return (
-    <JazzProvider AccountSchema={HRAccount} peer={peer}>
-      {children}
-    </JazzProvider>
-  );
-}
-
 declare module "jazz-react" {
   interface Register {
     Account: HRAccount;
@@ -27,8 +19,13 @@ declare module "jazz-react" {
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <JazzAndAuth>
+    <JazzProvider
+      AccountSchema={HRAccount}
+      sync={{
+        peer,
+      }}
+    >
       <App />
-    </JazzAndAuth>
+    </JazzProvider>
   </React.StrictMode>,
 );

examples/onboarding/tests/onboardingFlow.spec.ts

@@ -16,25 +16,6 @@ async function scrollToBottom(page: Page) {
   });
 }
 
-const login = async ({
-  page,
-  userName,
-  loginAs = false,
-}: {
-  page: Page;
-  userName: string;
-  loginAs?: boolean;
-}) => {
-  const loginPage = new LoginPage(page);
-  await loginPage.goto("/");
-  if (loginAs) {
-    await loginPage.loginAs(userName);
-  } else {
-    await loginPage.fillUsername(userName);
-    await loginPage.signup();
-  }
-};
-
 test.describe("Admin onboarding flow", () => {
   let browser: Browser;
   let adminContext: BrowserContext;
@@ -54,7 +35,7 @@ test.describe("Admin onboarding flow", () => {
 
   test("Create and delete flow", async () => {
     const adminPage = await adminContext.newPage();
-    await login({ page: adminPage, userName: "HR specialist" });
+    await adminPage.goto("/");
     const adminHomePage = new HomePage(adminPage);
     await adminHomePage.createEmployee("Paul");
     await adminHomePage.createEmployee("Sean");
@@ -70,10 +51,8 @@ test.describe("Admin onboarding flow", () => {
     const adminPage = await adminContext.newPage();
     const writerPage = await writerContext.newPage();
 
-    const adminUser = "HR specialist";
-    const writerUser = "Invitee";
-    await login({ page: adminPage, userName: adminUser });
-    await login({ page: writerPage, userName: writerUser });
+    await adminPage.goto("/");
+    await writerPage.goto("/");
 
     const adminHomePage = new HomePage(adminPage);
     await adminHomePage.createEmployee("Paul");

examples/organization/CHANGELOG.md

@@ -1,5 +1,13 @@
 # organization
 
+## 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.34",
+  "version": "0.0.35",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/organization/src/main.tsx

@@ -27,17 +27,6 @@ function Router() {
   return <RouterProvider router={router}></RouterProvider>;
 }
 
-function JazzAndAuth({ children }: { children: React.ReactNode }) {
-  return (
-    <JazzProvider
-      AccountSchema={JazzAccount}
-      peer="wss://cloud.jazz.tools/?key=organization-example@garden.co"
-    >
-      {children}
-    </JazzProvider>
-  );
-}
-
 declare module "jazz-react" {
   interface Register {
     Account: JazzAccount;
@@ -46,8 +35,13 @@ declare module "jazz-react" {
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <JazzAndAuth>
+    <JazzProvider
+      AccountSchema={JazzAccount}
+      sync={{
+        peer: "wss://cloud.jazz.tools/?key=organization-example@garden.co",
+      }}
+    >
       <Router />
-    </JazzAndAuth>
+    </JazzProvider>
   </StrictMode>,
 );

examples/passkey-svelte/CHANGELOG.md

@@ -1,5 +1,11 @@
 # passkey-svelte
 
+## 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.29",
+  "version": "0.0.30",
   "type": "module",
   "private": true,
   "scripts": {

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

@@ -1,11 +1,16 @@
 <script lang="ts">
-  import { JazzProvider, PasskeyAuthBasicUI, usePasskeyAuth } from 'jazz-svelte';
+  import { JazzProvider, PasskeyAuthBasicUI } from 'jazz-svelte';
 
   let { children } = $props();
 </script>
 
-<JazzProvider peer="wss://cloud.jazz.tools/?key=minimal-svelte-auth-passkey@garden.co">
-  <PasskeyAuthBasicUI auth={usePasskeyAuth({ appName: 'minimal-svelte-auth-passkey' })}>
+<JazzProvider
+  sync={{
+    peer: "wss://cloud.jazz.tools/?key=minimal-svelte-auth-passkey@garden.co",
+    when: "signedUp",
+  }}
+>
+  <PasskeyAuthBasicUI appName="minimal-svelte-auth-passkey">
     {@render children?.()}
   </PasskeyAuthBasicUI>
 </JazzProvider>

examples/passkey/CHANGELOG.md

@@ -1,5 +1,13 @@
 # minimal-auth-passkey
 
+## 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.39",
+  "version": "0.0.40",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/passkey/src/main.tsx

@@ -1,18 +1,20 @@
-import { JazzProvider, PasskeyAuthBasicUI, usePasskeyAuth } from "jazz-react";
+import { JazzProvider, PasskeyAuthBasicUI } 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 = usePasskeyAuth({
-    appName: "Jazz Minimal Auth Passkey Example",
-  });
-
   return (
-    <JazzProvider peer="wss://cloud.jazz.tools/?key=minimal-auth-passkey-example@garden.co">
-      <PasskeyAuthBasicUI {...auth} />
-      {children}
+    <JazzProvider
+      sync={{
+        peer: "wss://cloud.jazz.tools/?key=minimal-auth-passkey-example@garden.co",
+        when: "signedUp",
+      }}
+    >
+      <PasskeyAuthBasicUI appName="Jazz Minimal Auth Passkey Example">
+        {children}
+      </PasskeyAuthBasicUI>
     </JazzProvider>
   );
 }

examples/passphrase/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/passphrase/README.md

@@ -0,0 +1,56 @@
+# Passphrase authentication example with Jazz and React
+
+This is an example of how to use passphrase authentication with Jazz.
+
+## Getting started
+
+You can either
+1. Clone the jazz repository, and run the app within the monorepo.
+2. Or create a new Jazz project using this example as a template.
+
+### Using the example as a template
+
+Create a new Jazz project, and use this example as a template.
+```bash
+npx create-jazz-app@latest --example passphrase --project-name passphrase
+```
+
+Go to the new project directory.
+```bash
+cd passphrase
+```
+
+Run the dev server.
+```bash
+npm run dev
+```
+
+### Using the monorepo
+
+This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation).
+
+Clone the jazz repository.
+```bash
+git clone https://github.com/garden-co/jazz.git
+```
+
+Install and build dependencies.
+```bash
+pnpm i && npx turbo build
+```
+
+Go to the example directory.
+```bash
+cd jazz/examples/passphrase/
+```
+
+Start the dev server.
+```bash
+pnpm dev
+```
+
+Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
+## Questions / problems / feedback
+
+If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
+

examples/passphrase/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Jazz | Minimal Auth Passphrase Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

examples/passphrase/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "passphrase",
+  "private": true,
+  "version": "0.0.39",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "format-and-lint": "biome check .",
+    "format-and-lint:fix": "biome check . --write"
+  },
+  "dependencies": {
+    "jazz-react": "workspace:*",
+    "jazz-tools": "workspace:*",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.9.4",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "globals": "^15.11.0",
+    "typescript": "~5.6.2",
+    "vite": "^5.4.10"
+  }
+}

examples/passphrase/src/App.tsx

@@ -0,0 +1,14 @@
+import { useAccount } from "jazz-react";
+
+function App() {
+  const { logOut } = useAccount();
+
+  return (
+    <main>
+      <h1>You're logged in</h1>
+      <button onClick={() => logOut()}>Logout</button>
+    </main>
+  );
+}
+
+export default App;

examples/passphrase/src/index.css

@@ -0,0 +1,68 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+#root {
+  width: 100%;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 0;
+  padding: 0.6em 1.2em;
+  font-weight: 500;
+  background-color: #1a1a1a;
+  cursor: pointer;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+
+main {
+  padding: 1rem;
+  margin: 0 auto;
+  text-align: center;
+}

examples/passphrase/src/main.tsx

@@ -0,0 +1,32 @@
+import { JazzProvider, PassphraseAuthBasicUI } from "jazz-react";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
+import { wordlist } from "./wordlist.ts";
+
+function JazzAndAuth({ children }: { children: React.ReactNode }) {
+  return (
+    <JazzProvider
+      sync={{
+        peer: "wss://cloud.jazz.tools/?key=minimal-auth-passphrase-example@garden.co",
+        when: "signedUp",
+      }}
+    >
+      <PassphraseAuthBasicUI
+        appName="Jazz Minimal Auth Passphrase Example"
+        wordlist={wordlist}
+      >
+        {children}
+      </PassphraseAuthBasicUI>
+    </JazzProvider>
+  );
+}
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <JazzAndAuth>
+      <App />
+    </JazzAndAuth>
+  </StrictMode>,
+);

examples/passphrase/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

examples/passphrase/tsconfig.app.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

examples/passphrase/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

examples/passphrase/tsconfig.node.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

examples/passphrase/vercel.json

@@ -0,0 +1,8 @@
+{
+  "build": {
+    "env": {
+      "APP_NAME": "passphrase-demo"
+    }
+  },
+  "ignoreCommand": "node ../../ignore-vercel-build.js"
+}

examples/passphrase/vite.config.ts

@@ -0,0 +1,7 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});

examples/password-manager/CHANGELOG.md

@@ -1,5 +1,13 @@
 # jazz-password-manager
 
+## 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.60",
+  "version": "0.0.61",
   "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.20",
-    "jazz-tools": "workspace:0.9.20",
+    "jazz-react": "workspace:0.9.21",
+    "jazz-tools": "workspace:0.9.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.41.5",

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

@@ -1,4 +1,4 @@
-import { JazzProvider, PasskeyAuthBasicUI, usePasskeyAuth } from "jazz-react";
+import { JazzProvider, PasskeyAuthBasicUI } from "jazz-react";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { PasswordManagerAccount } from "./1_schema.ts";
@@ -6,17 +6,17 @@ import App from "./5_App.tsx";
 import "./index.css";
 
 function JazzAndAuth({ children }: { children: React.ReactNode }) {
-  const auth = usePasskeyAuth({
-    appName: "Jazz Password Manager",
-  });
-
   return (
     <JazzProvider
       AccountSchema={PasswordManagerAccount}
-      peer="wss://cloud.jazz.tools/?key=password-manager-example-jazz@garden.co"
+      sync={{
+        peer: "wss://cloud.jazz.tools/?key=password-manager-example-jazz@garden.co",
+        when: "signedUp",
+      }}
     >
-      <PasskeyAuthBasicUI {...auth} />
-      {children}
+      <PasskeyAuthBasicUI appName="Jazz Password Manager">
+        {children}
+      </PasskeyAuthBasicUI>
     </JazzProvider>
   );
 }

examples/pets/CHANGELOG.md

@@ -1,5 +1,14 @@
 # jazz-example-pets
 
+## 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.158",
+  "version": "0.0.159",
   "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.20",
-    "jazz-react": "workspace:0.9.20",
-    "jazz-tools": "workspace:0.9.20",
+    "jazz-browser-media-images": "workspace:0.9.21",
+    "jazz-react": "workspace:0.9.21",
+    "jazz-tools": "workspace:0.9.21",
     "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.20",
+    "jazz-run": "workspace:0.9.21",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.4.15",
     "typescript": "~5.6.2",

examples/pets/src/2_main.tsx

@@ -8,7 +8,12 @@ import {
 } from "react-router-dom";
 import "./index.css";
 
-import { JazzProvider, useAcceptInvite, useAccount } from "jazz-react";
+import {
+  JazzProvider,
+  PasskeyAuthBasicUI,
+  useAcceptInvite,
+  useAccount,
+} from "jazz-react";
 
 import { PetAccount, PetPost } from "./1_schema.ts";
 import { NewPetPostForm } from "./3_NewPetPostForm.tsx";
@@ -25,43 +30,36 @@ const peer =
   ) as `ws://${string}`) ??
   "wss://cloud.jazz.tools/?key=pets-example-jazz@garden.co";
 
-/** Walkthrough: The top-level provider `<JazzProvider/>`
- *
- *  This shows how to use the top-level provider `<JazzProvider/>`,
- *  which provides the rest of the app with a `LocalNode` (used through `useJazz` later),
- *  based on `LocalAuth` that uses PassKeys (aka WebAuthn) to store a user's account secret
- *  - no backend needed. */
-
 const appName = "Jazz Rate My Pet Example";
 
-function JazzAndAuth({ children }: { children: React.ReactNode }) {
-  return (
-    <>
-      <JazzProvider
-        peer={peer}
-        AccountSchema={PetAccount}
-        localOnly="anonymous"
-      >
-        {children}
-      </JazzProvider>
-    </>
-  );
-}
-
 declare module "jazz-react" {
   interface Register {
     Account: PetAccount;
   }
 }
 
+/** Walkthrough: The top-level provider `<JazzProvider/>`
+ *
+ *  This shows how to use the top-level provider `<JazzProvider/>`,
+ *  which provides the rest of the app with a `LocalNode` (used through `useCoState` later),
+ *  based on `PasskeyAuth` that uses PassKeys (aka WebAuthn) to store a user's account secret
+ *  - no backend needed. */
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <ThemeProvider>
       <TitleAndLogo name={appName} />
       <div className="flex flex-col h-full items-center justify-start gap-10 pt-10 pb-10 px-5">
-        <JazzAndAuth>
-          <App />
-        </JazzAndAuth>
+        <JazzProvider
+          sync={{
+            peer,
+            when: "signedUp",
+          }}
+          AccountSchema={PetAccount}
+        >
+          <PasskeyAuthBasicUI appName={appName}>
+            <App />
+          </PasskeyAuthBasicUI>
+        </JazzProvider>
       </div>
     </ThemeProvider>
   </React.StrictMode>,
@@ -73,7 +71,6 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
  *  on the CoValue ID (CoID) of our PetPost, stored in the URL hash
  *  - which can also contain invite links.
  */
-
 export default function App() {
   const { logOut } = useAccount();
 

examples/pets/src/components/ShareButton.tsx

@@ -7,7 +7,7 @@ import QRCode from "qrcode";
 
 import { Button, useToast } from "../basicComponents";
 
-export function ShareButton({ petPost }: { petPost?: PetPost }) {
+export function ShareButton({ petPost }: { petPost?: PetPost | null }) {
   const [existingInviteLink, setExistingInviteLink] = useState<string>();
   const { toast } = useToast();
 

examples/pets/tests/createAndShare.spec.ts

@@ -1,4 +1,4 @@
-import { test } from "@playwright/test";
+import { BrowserContext, test } from "@playwright/test";
 import { HomePage } from "./pages/HomePage";
 import { LoginPage } from "./pages/LoginPage";
 import { NewPostPage } from "./pages/NewPostPage";
@@ -6,50 +6,80 @@ import { PostPage } from "./pages/PostPage";
 
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
-test("create a new post and share", async ({ page }) => {
-  const loginPage = new LoginPage(page);
+test("create a new post and share", async ({ page: luigiPage, browser }) => {
+  const context = await browser.newContext();
+  await mockAuthenticator(context);
 
-  await loginPage.goto();
-  await loginPage.fillUsername("S. Mario");
-  await loginPage.signup();
+  const marioPage = await context.newPage();
+  await marioPage.goto("/");
+  await luigiPage.goto("/");
 
-  const homePage = new HomePage(page);
+  const marioLoginPage = new LoginPage(marioPage);
+  await marioLoginPage.fillUsername("S. Mario");
+  await marioLoginPage.signup();
 
-  await homePage.navigateToNewPost();
+  const luigiLoginPage = new LoginPage(luigiPage);
+  await luigiLoginPage.fillUsername("Luigi");
+  await luigiLoginPage.signup();
 
-  const newPostPage = new NewPostPage(page);
+  const marioHomePage = new HomePage(marioPage);
+  await marioHomePage.navigateToNewPost();
+
+  const newPostPage = new NewPostPage(marioPage);
 
   await newPostPage.fillPetName("Yoshi");
   await newPostPage.uploadFile("./public/jazz-logo-low-res.jpg");
   await newPostPage.submit();
 
-  const postPage = new PostPage(page);
+  const marioPostPage = new PostPage(marioPage);
+  await marioPostPage.expectPetName("Yoshi");
 
-  await postPage.expectPetName("Yoshi");
-
-  const invitation = await postPage.getShareLink();
+  const invitation = await marioPostPage.getShareLink();
 
   await sleep(1000);
+  await luigiPage.goto(invitation);
 
-  await postPage.logout();
+  const luigiPostPage = new PostPage(luigiPage);
+  await luigiPostPage.expectPetName("Yoshi");
+  await luigiPostPage.expectReactionSelectedByCurrentUser("😍", false);
+  await luigiPostPage.toggleReaction("😍");
+  await luigiPostPage.expectReactionSelectedByCurrentUser("😍", true);
 
-  await loginPage.expectLoaded();
-
-  await loginPage.fillUsername("Luigi");
-  await loginPage.signup();
-
-  await page.goto(invitation);
-
-  await postPage.expectPetName("Yoshi");
-  await postPage.expectReactionSelectedByCurrentUser("😍", false);
-  await postPage.toggleReaction("😍");
-  await postPage.expectReactionSelectedByCurrentUser("😍", true);
-
-  await postPage.logout();
-  await loginPage.expectLoaded();
-  await loginPage.loginAs("S. Mario");
-
-  await homePage.navigateToPost("Yoshi");
-  await postPage.expectPetName("Yoshi");
-  await postPage.expectReactionByUser("😍", "Luigi");
+  await marioPostPage.expectReactionByUser("😍", "Luigi");
+});
+
+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,
+    });
+  });
+}
+
+// Configure the authenticator
+test.beforeEach(async ({ context }) => {
+  // Enable virtual authenticator environment
+  await mockAuthenticator(context);
 });

examples/reactions/CHANGELOG.md

@@ -1,5 +1,14 @@
 # reactions
 
+## 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.38",
+  "version": "0.0.39",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/reactions/src/main.tsx

@@ -1,26 +1,20 @@
-import { JazzProvider } from "jazz-react";
+import { JazzProvider, PasskeyAuthBasicUI } 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 }) {
-  return (
-    <>
-      <JazzProvider
-        localOnly="anonymous"
-        peer="wss://cloud.jazz.tools/?key=reactions-example@garden.co"
-      >
-        {children}
-      </JazzProvider>
-    </>
-  );
-}
-
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <JazzAndAuth>
-      <App />
-    </JazzAndAuth>
+    <JazzProvider
+      sync={{
+        peer: "wss://cloud.jazz.tools/?key=reactions-example@garden.co",
+        when: "signedUp",
+      }}
+    >
+      <PasskeyAuthBasicUI appName="Jazz Reactions Example">
+        <App />
+      </PasskeyAuthBasicUI>
+    </JazzProvider>
   </StrictMode>,
 );

examples/todo-vue/CHANGELOG.md

@@ -1,5 +1,14 @@
 # todo-vue
 
+## 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.43",
+  "version": "0.0.44",
   "private": true,
   "type": "module",
   "scripts": {

examples/todo-vue/src/main.ts

@@ -11,22 +11,6 @@ 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() {
@@ -35,11 +19,19 @@ const RootComponent = defineComponent({
         JazzProvider,
         {
           AccountSchema: ToDoAccount,
-          peer: "wss://cloud.jazz.tools/?key=vue-todo-example-jazz@garden.co",
-        },
-        {
-          default: () => h(AuthScreen),
+          sync: {
+            peer: "wss://cloud.jazz.tools/?key=vue-todo-example-jazz@garden.co",
+          },
         },
+        h(
+          DemoAuthBasicUI,
+          {
+            appName: "Jazz Vue Todo",
+          },
+          {
+            default: () => h(App),
+          },
+        ),
       );
   },
 });

examples/todo/CHANGELOG.md

@@ -1,5 +1,13 @@
 # jazz-example-todo
 
+## 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.157",
+  "version": "0.0.158",
   "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.20",
-    "jazz-tools": "workspace:0.9.20",
+    "jazz-react": "workspace:0.9.21",
+    "jazz-tools": "workspace:0.9.21",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.3.1",

examples/todo/src/2_main.tsx

@@ -8,10 +8,9 @@ import "./index.css";
 
 import {
   JazzProvider,
-  PasskeyAuthBasicUI,
+  PassphraseAuthBasicUI,
   useAcceptInvite,
   useAccount,
-  usePasskeyAuth,
 } from "jazz-react";
 
 import React from "react";
@@ -23,6 +22,7 @@ import {
   ThemeProvider,
   TitleAndLogo,
 } from "./basicComponents/index.ts";
+import { wordlist } from "./wordlist.ts";
 
 /**
  * Walkthrough: The top-level provider `<JazzProvider/>`
@@ -34,22 +34,21 @@ import {
  *
  * `<JazzProvider/>` also runs our account migration
  */
-
 const appName = "Jazz Todo List Example";
 
 function JazzAndAuth({ children }: { children: React.ReactNode }) {
-  const auth = usePasskeyAuth({ appName });
-
   return (
-    <>
-      <JazzProvider
-        AccountSchema={TodoAccount}
-        peer="wss://cloud.jazz.tools/?key=todo-example-jazz@garden.co"
-      >
-        <PasskeyAuthBasicUI {...auth} />
+    <JazzProvider
+      sync={{
+        peer: "wss://cloud.jazz.tools/?key=todo-example-jazz@garden.co",
+        when: "signedUp",
+      }}
+      AccountSchema={TodoAccount}
+    >
+      <PassphraseAuthBasicUI appName={appName} wordlist={wordlist}>
         {children}
-      </JazzProvider>
-    </>
+      </PassphraseAuthBasicUI>
+    </JazzProvider>
   );
 }
 
@@ -61,14 +60,14 @@ declare module "jazz-react" {
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <ThemeProvider>
-      <TitleAndLogo name={appName} />
-      <div className="flex flex-col h-full items-center justify-start gap-10 pt-10 pb-10 px-5">
-        <JazzAndAuth>
+    <JazzAndAuth>
+      <ThemeProvider>
+        <TitleAndLogo name={appName} />
+        <div className="flex flex-col h-full items-center justify-start gap-10 pt-10 pb-10 px-5">
           <App />
-        </JazzAndAuth>
-      </div>
-    </ThemeProvider>
+        </div>
+      </ThemeProvider>
+    </JazzAndAuth>
   </React.StrictMode>,
 );
 

examples/todo/src/components/InviteButton.tsx

@@ -10,7 +10,7 @@ export function InviteButton<T extends CoValue>({
   value,
   valueHint,
 }: {
-  value?: T;
+  value?: T | null;
   valueHint?: string;
 }) {
   const [existingInviteLink, setExistingInviteLink] = useState<string>();

examples/version-history/CHANGELOG.md

@@ -1,5 +1,13 @@
 # version-history
 
+## 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.35",
+  "version": "0.0.36",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/version-history/src/main.tsx

@@ -1,24 +1,20 @@
-import { JazzProvider } from "jazz-react";
+import { DemoAuthBasicUI, 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 }) {
-  return (
-    <JazzProvider
-      localOnly="anonymous"
-      peer="wss://cloud.jazz.tools/?key=version-history@garden.co"
-    >
-      {children}
-    </JazzProvider>
-  );
-}
-
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <JazzAndAuth>
-      <App />
-    </JazzAndAuth>
+    <JazzProvider
+      sync={{
+        peer: "wss://cloud.jazz.tools/?key=version-history@garden.co",
+        when: "signedUp",
+      }}
+    >
+      <DemoAuthBasicUI appName="Jazz Version History Example">
+        <App />
+      </DemoAuthBasicUI>
+    </JazzProvider>
   </StrictMode>,
 );

flake.lock

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

flake.nix

@@ -18,12 +18,15 @@
           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,3 +40,6 @@ 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";
+import { docNavigationItems } from "@/lib/docNavigationItems.js";
 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,7 +39,20 @@ 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";
+import { docNavigationItems } from "@/lib/docNavigationItems.js";
 import { useFramework } from "@/lib/use-framework";
 import { clsx } from "clsx";
 

homepage/homepage/components/docs/tags.tsx

@@ -156,8 +156,14 @@ 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 className="text-sm flex flex-col gap-3 my-2 p-3 rounded bg-stone-50 dark:bg-stone-925">
+    <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="flex flex-col gap-2">
         <div>
           {<Highlight>{signature + ":"}</Highlight>}{" "}

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

@@ -0,0 +1,511 @@
+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

@@ -0,0 +1,80 @@
+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/typedocs.mjs

@@ -1,21 +1,7 @@
 import { Application } from "typedoc";
+import { PACKAGES } from "./utils/config.mjs";
 
-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" },
-]) {
+for (const { packageName, entryPoint, tsconfig, typedocOptions } of PACKAGES) {
   const app = await Application.bootstrapWithPlugins({
     entryPoints: [
       `../../packages/${packageName}/src/${entryPoint || "index.ts"}`,

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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,58 @@
+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}'`);
+}