Merge pull request #898 from garden-co/chore/example-projects-ci

Rename chat-clerk to clerk in yaml file

.github/workflows/build-examples.yaml

@@ -11,12 +11,14 @@ jobs:
       matrix:
         example: [
           "chat",
-          "chat-clerk",
+          "clerk",
+          "passkey",
           "inspector",
           "music-player",
           "password-manager",
           "pets",
           "todo",
+          "onboarding",
         ]
 
     steps:
@@ -55,4 +57,4 @@ jobs:
       run: |
         pnpm install
         pnpm turbo build;
-      working-directory: ./examples/${{ matrix.example }}
+      working-directory: ./examples/${{ matrix.example }}

.github/workflows/playwright.yml

@@ -13,7 +13,7 @@ jobs:
     continue-on-error: true
     strategy:
       matrix:
-        project: ["e2e/BinaryCoStream", "e2e/CoValues", "examples/chat", "examples/music-player", "examples/pets"]
+        project: ["e2e/BinaryCoStream", "e2e/CoValues", "examples/chat", "examples/music-player", "examples/pets", "examples/onboarding"]
 
     steps:
       - uses: actions/checkout@v3

.gitignore

@@ -15,4 +15,6 @@ coverage
 # Playwright
 test-results
 
-.husky
+.husky
+
+.vscode/settings.json

.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-  "editor.defaultFormatter": "biomejs.biome"
-}

README.md

@@ -15,6 +15,6 @@ For community and support, please join our [Discord](https://discord.gg/utDMjHYg
 - Homepage: [jazz.tools](https://jazz.tools)
 - Docs: [jazz.tools/docs](https://jazz.tools/docs)
 - Community & support: [Discord](https://discord.gg/utDMjHYg42)
-- Updates: [Twitter](https://twitter.com/jazz_tools) & [Email](https://gcmp.io/news)
+- Updates: [X](https://x.com/jazz_tools) & [Email](https://gcmp.io/news)
 
-Copyright 2024 — Garden Computing, Inc.
+Copyright 2024 — Garden Computing, Inc.

biome.json

@@ -7,7 +7,7 @@
   },
   "files": {
     "ignoreUnknown": false,
-    "ignore": ["jazz-tools.json"]
+    "ignore": ["jazz-tools.json", "**/ios/**", "**/android/**"]
   },
   "formatter": {
     "enabled": true,

e2e/BinaryCoStream/CHANGELOG.md

@@ -1,5 +1,148 @@
 # @jazz-e2e/binarycostream
 
+## 0.0.111
+
+### Patch Changes
+
+- Updated dependencies [e4f110f]
+  - cojson@0.8.34
+  - jazz-react@0.8.34
+  - jazz-tools@0.8.34
+
+## 0.0.110
+
+### Patch Changes
+
+- jazz-react@0.8.33
+
+## 0.0.109
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+- Updated dependencies [df42b2b]
+  - cojson@0.8.32
+  - jazz-tools@0.8.32
+  - jazz-react@0.8.32
+
+## 0.0.108
+
+### Patch Changes
+
+- Updated dependencies [e511d6d]
+  - cojson@0.8.31
+  - jazz-react@0.8.31
+  - jazz-tools@0.8.31
+
+## 0.0.107
+
+### Patch Changes
+
+- Updated dependencies [0a2fae3]
+- Updated dependencies [99cda2f]
+  - cojson@0.8.30
+  - jazz-react@0.8.30
+  - jazz-tools@0.8.30
+
+## 0.0.106
+
+### Patch Changes
+
+- Updated dependencies [dcc9c2e]
+- Updated dependencies [699553f]
+  - cojson@0.8.29
+  - jazz-react@0.8.29
+  - jazz-tools@0.8.29
+
+## 0.0.105
+
+### Patch Changes
+
+- Updated dependencies [605734c]
+  - cojson@0.8.28
+  - jazz-react@0.8.28
+  - jazz-tools@0.8.28
+
+## 0.0.104
+
+### Patch Changes
+
+- Updated dependencies [75fdff4]
+  - cojson@0.8.27
+  - jazz-react@0.8.27
+  - jazz-tools@0.8.27
+
+## 0.0.103
+
+### Patch Changes
+
+- Updated dependencies [59d37df]
+  - jazz-react@0.8.26
+
+## 0.0.102
+
+### Patch Changes
+
+- jazz-react@0.8.24
+
+## 0.0.101
+
+### Patch Changes
+
+- Updated dependencies [6f745be]
+- Updated dependencies [d348c2d]
+- Updated dependencies [124bf67]
+- Updated dependencies [6902b5b]
+- Updated dependencies [1a0cd3d]
+  - cojson@0.8.23
+  - jazz-tools@0.8.23
+  - jazz-react@0.8.23
+
+## 0.0.100
+
+### Patch Changes
+
+- Updated dependencies [59cc64d]
+  - jazz-react@0.8.22
+
+## 0.0.99
+
+### Patch Changes
+
+- Updated dependencies [0f30eea]
+- Updated dependencies [149ca97]
+  - cojson@0.8.21
+  - jazz-tools@0.8.21
+  - jazz-react@0.8.21
+
+## 0.0.98
+
+### Patch Changes
+
+- Updated dependencies [dd9b13f]
+- Updated dependencies [a69ed0b]
+- Updated dependencies [3ef3ff3]
+- Updated dependencies [c6931b8]
+  - jazz-react@0.8.20
+
+## 0.0.97
+
+### Patch Changes
+
+- Updated dependencies [9c2aadb]
+  - cojson@0.8.19
+  - jazz-react@0.8.19
+  - jazz-tools@0.8.19
+
+## 0.0.96
+
+### Patch Changes
+
+- Updated dependencies [d4319d8]
+  - cojson@0.8.18
+  - jazz-react@0.8.18
+  - jazz-tools@0.8.18
+
 ## 0.0.95
 
 ### Patch Changes

e2e/BinaryCoStream/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" type="image/png" href="/jazz-logo.png" />
     <link rel="stylesheet" href="/src/index.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Jazz BinaryCoStream Tests</title>
+    <title>Jazz FileStream Tests</title>
   </head>
   <body>
     <div id="root"></div>

e2e/BinaryCoStream/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "@jazz-e2e/binarycostream",
+  "name": "@jazz-e2e/filestream",
   "private": true,
-  "version": "0.0.95",
+  "version": "0.0.111",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,11 +13,11 @@
     "test:ui": "playwright test --ui"
   },
   "dependencies": {
-    "cojson": "workspace:0.8.17",
+    "cojson": "workspace:0.8.34",
     "hash-slash": "workspace:0.2.1",
     "is-ci": "^3.0.1",
-    "jazz-react": "workspace:0.8.17",
-    "jazz-tools": "workspace:0.8.17",
+    "jazz-react": "workspace:0.8.34",
+    "jazz-tools": "workspace:0.8.34",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

e2e/BinaryCoStream/src/DownloaderPeer.tsx

@@ -1,21 +1,18 @@
-import { Account, BinaryCoStream, ID } from "jazz-tools";
+import { Account, FileStream, ID } from "jazz-tools";
 import { useEffect } from "react";
 import { useAccount, useCoState } from "./jazz";
-import { waitForCoValue } from "./lib/waitForCoValue";
 import { UploadedFile } from "./schema";
 
 async function getUploadedFile(me: Account, uploadedFileId: ID<UploadedFile>) {
-  const uploadedFile = await waitForCoValue(
-    UploadedFile,
-    uploadedFileId,
-    me,
-    Boolean,
-    {},
-  );
+  const uploadedFile = await UploadedFile.load(uploadedFileId, me, {});
+
+  if (!uploadedFile) {
+    throw new Error("Uploaded file not found");
+  }
 
   uploadedFile.coMapDownloaded = true;
 
-  await BinaryCoStream.loadAsBlob(uploadedFile._refs.file.id, me);
+  await FileStream.loadAsBlob(uploadedFile._refs.file.id, me);
 
   return uploadedFile;
 }

e2e/BinaryCoStream/src/lib/generateTestFile.ts

@@ -1,4 +1,4 @@
-import { Account, BinaryCoStream, Group } from "jazz-tools";
+import { Account, FileStream, Group } from "jazz-tools";
 import { UploadedFile } from "../schema";
 
 export async function generateTestFile(me: Account, bytes: number) {
@@ -8,7 +8,7 @@ export async function generateTestFile(me: Account, bytes: number) {
   const ownership = { owner: group };
   const testFile = UploadedFile.create(
     {
-      file: await BinaryCoStream.createFromBlob(
+      file: await FileStream.createFromBlob(
         new Blob(["1".repeat(bytes)], { type: "image/png" }),
         ownership,
       ),

e2e/BinaryCoStream/src/schema.tsx

@@ -1,7 +1,7 @@
-import { BinaryCoStream, CoMap, co } from "jazz-tools";
+import { CoMap, FileStream, co } from "jazz-tools";
 
 export class UploadedFile extends CoMap {
-  file = co.ref(BinaryCoStream);
+  file = co.ref(FileStream);
   syncCompleted = co.boolean;
   coMapDownloaded = co.boolean;
 }

e2e/CoValues/CHANGELOG.md

@@ -1,5 +1,148 @@
 # @jazz-e2e/covalues
 
+## 0.0.110
+
+### Patch Changes
+
+- Updated dependencies [e4f110f]
+  - cojson@0.8.34
+  - jazz-react@0.8.34
+  - jazz-tools@0.8.34
+
+## 0.0.109
+
+### Patch Changes
+
+- jazz-react@0.8.33
+
+## 0.0.108
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+- Updated dependencies [df42b2b]
+  - cojson@0.8.32
+  - jazz-tools@0.8.32
+  - jazz-react@0.8.32
+
+## 0.0.107
+
+### Patch Changes
+
+- Updated dependencies [e511d6d]
+  - cojson@0.8.31
+  - jazz-react@0.8.31
+  - jazz-tools@0.8.31
+
+## 0.0.106
+
+### Patch Changes
+
+- Updated dependencies [0a2fae3]
+- Updated dependencies [99cda2f]
+  - cojson@0.8.30
+  - jazz-react@0.8.30
+  - jazz-tools@0.8.30
+
+## 0.0.105
+
+### Patch Changes
+
+- Updated dependencies [dcc9c2e]
+- Updated dependencies [699553f]
+  - cojson@0.8.29
+  - jazz-react@0.8.29
+  - jazz-tools@0.8.29
+
+## 0.0.104
+
+### Patch Changes
+
+- Updated dependencies [605734c]
+  - cojson@0.8.28
+  - jazz-react@0.8.28
+  - jazz-tools@0.8.28
+
+## 0.0.103
+
+### Patch Changes
+
+- Updated dependencies [75fdff4]
+  - cojson@0.8.27
+  - jazz-react@0.8.27
+  - jazz-tools@0.8.27
+
+## 0.0.102
+
+### Patch Changes
+
+- Updated dependencies [59d37df]
+  - jazz-react@0.8.26
+
+## 0.0.101
+
+### Patch Changes
+
+- jazz-react@0.8.24
+
+## 0.0.100
+
+### Patch Changes
+
+- Updated dependencies [6f745be]
+- Updated dependencies [d348c2d]
+- Updated dependencies [124bf67]
+- Updated dependencies [6902b5b]
+- Updated dependencies [1a0cd3d]
+  - cojson@0.8.23
+  - jazz-tools@0.8.23
+  - jazz-react@0.8.23
+
+## 0.0.99
+
+### Patch Changes
+
+- Updated dependencies [59cc64d]
+  - jazz-react@0.8.22
+
+## 0.0.98
+
+### Patch Changes
+
+- Updated dependencies [0f30eea]
+- Updated dependencies [149ca97]
+  - cojson@0.8.21
+  - jazz-tools@0.8.21
+  - jazz-react@0.8.21
+
+## 0.0.97
+
+### Patch Changes
+
+- Updated dependencies [dd9b13f]
+- Updated dependencies [a69ed0b]
+- Updated dependencies [3ef3ff3]
+- Updated dependencies [c6931b8]
+  - jazz-react@0.8.20
+
+## 0.0.96
+
+### Patch Changes
+
+- Updated dependencies [9c2aadb]
+  - cojson@0.8.19
+  - jazz-react@0.8.19
+  - jazz-tools@0.8.19
+
+## 0.0.95
+
+### Patch Changes
+
+- Updated dependencies [d4319d8]
+  - cojson@0.8.18
+  - jazz-react@0.8.18
+  - jazz-tools@0.8.18
+
 ## 0.0.94
 
 ### Patch Changes

e2e/CoValues/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jazz-e2e/covalues",
   "private": true,
-  "version": "0.0.94",
+  "version": "0.0.110",
   "type": "module",
   "scripts": {
     "dev": "vite",

e2e/CoValues/src/app.tsx

@@ -3,6 +3,7 @@ import ReactDOM from "react-dom/client";
 import { RouterProvider, createBrowserRouter } from "react-router-dom";
 import { AuthAndJazz } from "./jazz";
 import { ResumeSyncState } from "./pages/ResumeSyncState";
+import { RetryUnavailable } from "./pages/RetryUnavailable";
 import { TestInput } from "./pages/TestInput";
 
 const router = createBrowserRouter([
@@ -14,6 +15,10 @@ const router = createBrowserRouter([
     path: "/resume-sync",
     element: <ResumeSyncState />,
   },
+  {
+    path: "/retry-unavailable",
+    element: <RetryUnavailable />,
+  },
   {
     path: "/",
     element: <TestInput />,

e2e/CoValues/src/pages/RetryUnavailable.tsx

@@ -0,0 +1,46 @@
+import { CoMap, Group, ID, co } from "jazz-tools";
+import { useEffect, useState } from "react";
+import { useAccount, useCoState } from "../jazz";
+
+export class RetryUnavailableCoMap extends CoMap {
+  value = co.string;
+}
+
+function getIdParam() {
+  const url = new URL(window.location.href);
+  return (url.searchParams.get("id") as ID<RetryUnavailableCoMap>) ?? undefined;
+}
+
+export function RetryUnavailable() {
+  const [id, setId] = useState(getIdParam);
+  const coMap = useCoState(RetryUnavailableCoMap, id);
+  const { me } = useAccount();
+
+  useEffect(() => {
+    if (id) {
+      const url = new URL(window.location.href);
+      url.searchParams.set("id", id);
+      history.pushState({}, "", url.toString());
+    }
+  }, [id]);
+
+  const createCoMap = () => {
+    if (!me || id) return;
+
+    const group = Group.create({ owner: me });
+
+    group.addMember("everyone", "writer");
+
+    setId(
+      RetryUnavailableCoMap.create({ value: "Hello!" }, { owner: group }).id,
+    );
+  };
+
+  return (
+    <div>
+      <h1>Retry Unavailable</h1>
+      <p data-testid="id">{coMap?.id}</p>
+      <button onClick={createCoMap}>Create a new value!</button>
+    </div>
+  );
+}

e2e/CoValues/tests/RetryUnavailable.test.ts

@@ -0,0 +1,34 @@
+import { setTimeout } from "node:timers/promises";
+import { expect, test } from "@playwright/test";
+
+test.describe("Retry unavailable states", () => {
+  test("should retry unavailable values", async ({ page, browser }) => {
+    const context = page.context();
+
+    await page.goto("/retry-unavailable?userName=SuperMario");
+
+    await context.setOffline(true);
+
+    await page.getByRole("button", { name: "Create a new value!" }).click();
+
+    const id = await page.getByTestId("id").textContent();
+
+    // Create a new incognito instance and try to load the coValue
+    const newUserPage = await (await browser.newContext()).newPage();
+    await newUserPage.goto(`/retry-unavailable?userName=Luigi&id=${id}`);
+
+    await expect(newUserPage.getByTestId("id")).toBeInViewport({
+      timeout: 20_000,
+    });
+
+    // Make the load fail at least twice
+    await setTimeout(1000);
+
+    // Go back online, the value should be uploaded
+    await context.setOffline(false);
+
+    await expect(newUserPage.getByTestId("id")).toHaveText(id ?? "", {
+      timeout: 20_000,
+    });
+  });
+});

examples/book-shelf/CHANGELOG.md

@@ -1,5 +1,138 @@
 # jazz-example-book-shelf
 
+## 0.1.26
+
+### Patch Changes
+
+- jazz-react@0.8.34
+- jazz-tools@0.8.34
+- jazz-browser-media-images@0.8.34
+
+## 0.1.25
+
+### Patch Changes
+
+- jazz-browser-media-images@0.8.33
+- jazz-react@0.8.33
+
+## 0.1.24
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - jazz-tools@0.8.32
+  - jazz-react@0.8.32
+  - jazz-browser-media-images@0.8.32
+
+## 0.1.23
+
+### Patch Changes
+
+- jazz-react@0.8.31
+- jazz-tools@0.8.31
+- jazz-browser-media-images@0.8.31
+
+## 0.1.22
+
+### Patch Changes
+
+- jazz-react@0.8.30
+- jazz-tools@0.8.30
+- jazz-browser-media-images@0.8.30
+
+## 0.1.21
+
+### Patch Changes
+
+- jazz-react@0.8.29
+- jazz-tools@0.8.29
+- jazz-browser-media-images@0.8.29
+
+## 0.1.20
+
+### Patch Changes
+
+- jazz-react@0.8.28
+- jazz-tools@0.8.28
+- jazz-browser-media-images@0.8.28
+
+## 0.1.19
+
+### Patch Changes
+
+- jazz-react@0.8.27
+- jazz-tools@0.8.27
+- jazz-browser-media-images@0.8.27
+
+## 0.1.18
+
+### Patch Changes
+
+- Updated dependencies [59d37df]
+  - jazz-react@0.8.26
+
+## 0.1.17
+
+### Patch Changes
+
+- jazz-browser-media-images@0.8.24
+- jazz-react@0.8.24
+
+## 0.1.16
+
+### Patch Changes
+
+- Updated dependencies [d348c2d]
+- Updated dependencies [6902b5b]
+- Updated dependencies [1a0cd3d]
+  - jazz-tools@0.8.23
+  - jazz-react@0.8.23
+  - jazz-browser-media-images@0.8.23
+
+## 0.1.15
+
+### Patch Changes
+
+- Updated dependencies [59cc64d]
+  - jazz-react@0.8.22
+  - jazz-browser-media-images@0.8.22
+
+## 0.1.14
+
+### Patch Changes
+
+- Updated dependencies [149ca97]
+  - jazz-tools@0.8.21
+  - jazz-react@0.8.21
+  - jazz-browser-media-images@0.8.21
+
+## 0.1.13
+
+### Patch Changes
+
+- Updated dependencies [dd9b13f]
+- Updated dependencies [a69ed0b]
+- Updated dependencies [3ef3ff3]
+- Updated dependencies [c6931b8]
+  - jazz-react@0.8.20
+  - jazz-browser-media-images@0.8.20
+
+## 0.1.12
+
+### Patch Changes
+
+- jazz-react@0.8.19
+- jazz-tools@0.8.19
+- jazz-browser-media-images@0.8.19
+
+## 0.1.11
+
+### Patch Changes
+
+- jazz-react@0.8.18
+- jazz-tools@0.8.18
+- jazz-browser-media-images@0.8.18
+
 ## 0.1.10
 
 ### Patch Changes

examples/book-shelf/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jazz-example-book-shelf",
-  "version": "0.1.10",
+  "version": "0.1.26",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -11,9 +11,9 @@
   },
   "dependencies": {
     "clsx": "^2.0.0",
-    "jazz-browser-media-images": "workspace:0.8.17",
-    "jazz-react": "workspace:0.8.17",
-    "jazz-tools": "workspace:0.8.17",
+    "jazz-browser-media-images": "workspace:0.8.34",
+    "jazz-react": "workspace:0.8.34",
+    "jazz-tools": "workspace:0.8.34",
     "next": "14.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

examples/chat-clerk/README.md

@@ -1,42 +0,0 @@
-# Jazz Chat Example (with Clerk auth)
-
-Live version: [https://chat-clerk-demo.jazz.tools](https://chat-clerk-demo.jazz.tools)
-
-## Installing & running the example locally
-
-(this requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
-
-Start by checking out `jazz`
-
-```bash
-git clone https://github.com/gardencmp/jazz.git
-cd jazz/examples/chat-clerk
-pnpm pack --pack-destination /tmp
-mkdir -p ~/jazz-examples/chat-clerk # or any other directory
-tar -xf /tmp/jazz-example-chat-* --strip-components 1 -C ~/jazz-examples/chat-clerk
-cd ~/jazz-examples/chat-clerk
-```
-
-This ensures that you have the example app without git history and independent of the Jazz multi-package monorepo.
-
-Install dependencies:
-
-```bash
-pnpm install
-```
-
-Start the dev server:
-
-```bash
-pnpm dev
-```
-
-## 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.
-
-## Configuration: sync server
-
-By default, the example app uses [Jazz Cloud](https://jazz.tools/cloud) (`wss://cloud.jazz.tools`) - so cross-device use, invites and collaboration should just work.
-
-You can also run a local sync server by running `npx jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of the `<Jazz.Provider>` provider component in [./src/2_main.tsx](./src/2_main.tsx).

examples/chat-clerk/job-template.nomad

@@ -1,56 +0,0 @@
-job "chat$BRANCH_SUFFIX" {
-  region     = "global"
-  datacenters = ["*"]
-
-  group "static" {
-    count = 4
-
-    network {
-      port "http" {
-        to = 80
-      }
-    }
-
-    constraint {
-      attribute = "${node.class}"
-      operator  = "="
-      value     = "cloud"
-    }
-
-    spread {
-      attribute = "${node.datacenter}"
-      weight    = 100
-    }
-
-    constraint {
-      distinct_hosts = true
-    }
-
-    task "server" {
-      driver = "docker"
-
-      config {
-        image = "$DOCKER_TAG"
-        ports = ["http"]
-
-        auth = {
-          username = "$DOCKER_USER"
-          password = "$DOCKER_PASSWORD"
-        }
-      }
-
-      service {
-        tags = ["public"]
-        name = "chat$BRANCH_SUFFIX"
-        port = "http"
-        provider = "consul"
-      }
-
-      resources {
-        cpu    = 50 # MHz
-        memory = 50 # MB
-      }
-    }
-  }
-}
-# deploy bump 4

examples/chat-clerk/package.json

@@ -1,47 +0,0 @@
-{
-  "name": "jazz-example-chat-clerk",
-  "private": true,
-  "version": "0.0.94",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "format-and-lint": "biome check .",
-    "format-and-lint:fix": "biome check . --write",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@clerk/clerk-react": "^5.4.1",
-    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-toast": "^1.1.4",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.0.0",
-    "cojson": "workspace:0.8.17",
-    "hash-slash": "workspace:0.2.1",
-    "jazz-react": "workspace:0.8.17",
-    "jazz-react-auth-clerk": "workspace:0.8.17",
-    "jazz-tools": "workspace:0.8.17",
-    "lucide-react": "^0.274.0",
-    "qrcode": "^1.5.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router": "^6.16.0",
-    "react-router-dom": "^6.16.0",
-    "react-use": "^17.4.0",
-    "tailwind-merge": "^1.14.0",
-    "tailwindcss-animate": "^1.0.7",
-    "uniqolor": "^1.1.0"
-  },
-  "devDependencies": {
-    "@types/qrcode": "^1.5.1",
-    "@types/react": "^18.2.19",
-    "@types/react-dom": "^18.2.7",
-    "@vitejs/plugin-react-swc": "^3.3.2",
-    "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.27",
-    "tailwindcss": "3.3.2",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.10"
-  }
-}

examples/chat-clerk/src/app.tsx

@@ -1,31 +0,0 @@
-import { useIframeHashRouter } from "hash-slash";
-import { Group, ID } from "jazz-tools";
-import { ChatScreen } from "./chatScreen.tsx";
-import { useAccount } from "./main.tsx";
-import { Chat } from "./schema.ts";
-import { AppContainer, TopBar } from "./ui.tsx";
-
-export function App() {
-  const { me, logOut } = useAccount();
-  const router = useIframeHashRouter();
-
-  const createChat = () => {
-    if (!me) return;
-    const group = Group.create({ owner: me });
-    group.addMember("everyone", "writer");
-    const chat = Chat.create([], { owner: group });
-    router.navigate("/#/chat/" + chat.id);
-  };
-
-  return (
-    <AppContainer>
-      <TopBar>
-        {me?.profile?.name} · <button onClick={logOut}>Log out</button>
-      </TopBar>
-      {router.route({
-        "/": () => createChat() as never,
-        "/chat/:id": (id) => <ChatScreen chatID={id as ID<Chat>} />,
-      })}
-    </AppContainer>
-  );
-}

examples/chat-clerk/src/chatScreen.tsx

@@ -1,43 +0,0 @@
-import { ID } from "jazz-tools";
-import { useCoState } from "./main.tsx";
-import { Chat, Message } from "./schema.ts";
-import {
-  BubbleBody,
-  BubbleContainer,
-  BubbleInfo,
-  ChatContainer,
-  ChatInput,
-  EmptyChatMessage,
-} from "./ui.tsx";
-
-export function ChatScreen(props: { chatID: ID<Chat> }) {
-  const chat = useCoState(Chat, props.chatID, [{}]);
-
-  return chat ? (
-    <ChatContainer>
-      {chat.length > 0 ? (
-        chat.map((msg) => <ChatBubble msg={msg} key={msg.id} />)
-      ) : (
-        <EmptyChatMessage />
-      )}
-      <ChatInput
-        onSubmit={(text) => {
-          chat.push(Message.create({ text }, { owner: chat._owner }));
-        }}
-      />
-    </ChatContainer>
-  ) : (
-    <div>Loading...</div>
-  );
-}
-
-function ChatBubble(props: { msg: Message }) {
-  const lastEdit = props.msg._edits.text;
-
-  return (
-    <BubbleContainer fromMe={lastEdit.by?.isMe}>
-      <BubbleBody>{props.msg.text}</BubbleBody>
-      <BubbleInfo by={lastEdit.by?.profile?.name} madeAt={lastEdit.madeAt} />
-    </BubbleContainer>
-  );
-}

examples/chat-clerk/src/index.css

@@ -1,78 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
-
-    --primary: 24 9.8% 10%;
-    --primary-foreground: 60 9.1% 97.8%;
-
-    --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 24 9.8% 10%;
-
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
-
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-    --ring: 20 14.3% 4.1%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
-
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
-
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
-
-    --primary: 60 9.1% 97.8%;
-    --primary-foreground: 24 9.8% 10%;
-
-    --secondary: 12 6.5% 15.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
-
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
-
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-    --ring: 24 5.7% 82.9%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-    margin: 0;
-    padding: 0;
-  }
-}

examples/chat-clerk/src/schema.ts

@@ -1,7 +0,0 @@
-import { CoList, CoMap, co } from "jazz-tools";
-
-export class Message extends CoMap {
-  text = co.string;
-}
-
-export class Chat extends CoList.Of(co.ref(Message)) {}

examples/chat-clerk/src/ui.tsx

@@ -1,63 +0,0 @@
-export function AppContainer(props: { children: React.ReactNode }) {
-  return (
-    <div className="flex flex-col items-center justify-between w-screen h-screen p-2 dark:bg-black dark:text-white">
-      {props.children}
-    </div>
-  );
-}
-
-export function TopBar(props: { children: React.ReactNode }) {
-  return (
-    <div className="mb-5 px-2 py-1 text-sm self-end">{props.children}</div>
-  );
-}
-
-export function ChatContainer(props: { children: React.ReactNode }) {
-  return (
-    <div className="w-full max-w-xl h-full flex flex-col items-stretch">
-      {props.children}
-    </div>
-  );
-}
-
-export function EmptyChatMessage() {
-  return <div className="m-auto text-sm">(Empty chat)</div>;
-}
-
-export function BubbleContainer(props: {
-  children: React.ReactNode;
-  fromMe: boolean | undefined;
-}) {
-  const align = props.fromMe ? "items-end" : "items-start";
-  return <div className={`${align} flex flex-col`}>{props.children}</div>;
-}
-
-export function BubbleBody(props: { children: React.ReactNode }) {
-  return (
-    <div className="rounded-xl bg-stone-100 dark:bg-stone-700 dark:text-white py-2 px-4 mt-2 min-w-[5rem]">
-      {props.children}
-    </div>
-  );
-}
-
-export function BubbleInfo(props: { by: string | undefined; madeAt: Date }) {
-  return (
-    <div className="text-xs text-neutral-500 ml-2">
-      {props.by} {props.madeAt.toLocaleTimeString()}
-    </div>
-  );
-}
-
-export function ChatInput(props: { onSubmit: (text: string) => void }) {
-  return (
-    <input
-      className="rounded p-2 border mt-auto dark:bg-black dark:text-white border-stone-300 dark:border-stone-700"
-      placeholder="Type a message and press Enter"
-      onKeyDown={({ key, currentTarget: input }) => {
-        if (key !== "Enter" || !input.value) return;
-        props.onSubmit(input.value);
-        input.value = "";
-      }}
-    />
-  );
-}

examples/chat-clerk/tailwind.config.js

@@ -1,75 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "./pages/**/*.{ts,tsx}",
-    "./components/**/*.{ts,tsx}",
-    "./app/**/*.{ts,tsx}",
-    "./src/**/*.{ts,tsx}",
-  ],
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
-    },
-  },
-  plugins: [require("tailwindcss-animate")],
-};

examples/chat-rn-clerk/CHANGELOG.md

@@ -1,5 +1,144 @@
 # chat-rn-clerk
 
+## 1.0.26
+
+### Patch Changes
+
+- Updated dependencies [9ca25d1]
+  - jazz-react-auth-clerk@0.8.34
+  - jazz-react-native@0.8.34
+  - jazz-tools@0.8.34
+  - jazz-react-native-media-images@0.8.25
+
+## 1.0.25
+
+### Patch Changes
+
+- jazz-react-auth-clerk@0.8.33
+
+## 1.0.24
+
+### Patch Changes
+
+- Updated dependencies [1a4bda0]
+- Updated dependencies [df42b2b]
+  - jazz-react-auth-clerk@0.8.32
+  - jazz-tools@0.8.32
+  - jazz-react-native@0.8.32
+  - jazz-react-native-media-images@0.8.24
+
+## 1.0.23
+
+### Patch Changes
+
+- jazz-react-auth-clerk@0.8.31
+- jazz-react-native@0.8.31
+- jazz-tools@0.8.31
+- jazz-react-native-media-images@0.8.23
+
+## 1.0.22
+
+### Patch Changes
+
+- jazz-react-auth-clerk@0.8.30
+- jazz-react-native@0.8.30
+- jazz-tools@0.8.30
+- jazz-react-native-media-images@0.8.22
+
+## 1.0.21
+
+### Patch Changes
+
+- jazz-react-native@0.8.29
+- jazz-react-auth-clerk@0.8.29
+- jazz-tools@0.8.29
+- jazz-react-native-media-images@0.8.21
+
+## 1.0.20
+
+### Patch Changes
+
+- jazz-react-auth-clerk@0.8.28
+- jazz-react-native@0.8.28
+- jazz-tools@0.8.28
+- jazz-react-native-media-images@0.8.20
+
+## 1.0.19
+
+### Patch Changes
+
+- jazz-react-auth-clerk@0.8.27
+- jazz-react-native@0.8.27
+- jazz-tools@0.8.27
+- jazz-react-native-media-images@0.8.19
+
+## 1.0.18
+
+### Patch Changes
+
+- jazz-react-auth-clerk@0.8.26
+
+## 1.0.17
+
+### Patch Changes
+
+- jazz-react-auth-clerk@0.8.24
+
+## 1.0.16
+
+### Patch Changes
+
+- Updated dependencies [d348c2d]
+- Updated dependencies [6902b5b]
+- Updated dependencies [1a0cd3d]
+  - jazz-tools@0.8.23
+  - jazz-react-auth-clerk@0.8.23
+  - jazz-react-native@0.8.23
+  - jazz-react-native-media-images@0.8.18
+
+## 1.0.15
+
+### Patch Changes
+
+- jazz-react-auth-clerk@0.8.22
+
+## 1.0.14
+
+### Patch Changes
+
+- Updated dependencies [149ca97]
+  - jazz-tools@0.8.21
+  - jazz-react-auth-clerk@0.8.21
+  - jazz-react-native@0.8.21
+  - jazz-react-native-media-images@0.8.17
+
+## 1.0.13
+
+### Patch Changes
+
+- Updated dependencies [3ef3ff3]
+  - jazz-react-native-media-images@0.8.16
+  - jazz-react-native@0.8.20
+  - jazz-react-auth-clerk@0.8.20
+
+## 1.0.12
+
+### Patch Changes
+
+- jazz-react-auth-clerk@0.8.19
+- jazz-react-native@0.8.19
+- jazz-tools@0.8.19
+- jazz-react-native-media-images@0.8.15
+
+## 1.0.11
+
+### Patch Changes
+
+- jazz-react-auth-clerk@0.8.18
+- jazz-react-native@0.8.18
+- jazz-tools@0.8.18
+- jazz-react-native-media-images@0.8.14
+
 ## 1.0.10
 
 ### Patch Changes

examples/chat-rn-clerk/babel.config.js

@@ -2,6 +2,6 @@ module.exports = function (api) {
   api.cache(true);
   return {
     presets: ["babel-preset-expo"],
-    plugins: ["nativewind/babel", "@babel/plugin-transform-class-static-block"],
+    plugins: ["nativewind/babel"],
   };
 };

examples/chat-rn-clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "chat-rn-clerk",
   "main": "index.js",
-  "version": "1.0.10",
+  "version": "1.0.26",
   "scripts": {
     "build": "expo export -p ios",
     "start": "expo start",
@@ -65,7 +65,6 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@babel/plugin-transform-class-static-block": "^7.24.7",
     "@types/jest": "^29.5.3",
     "@types/react": "^18.2.19",
     "@types/react-test-renderer": "^18.0.7",

examples/chat-rn/CHANGELOG.md

@@ -1,5 +1,94 @@
 # chat-rn
 
+## 1.0.24
+
+### Patch Changes
+
+- jazz-react-native@0.8.34
+- jazz-tools@0.8.34
+
+## 1.0.23
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - jazz-tools@0.8.32
+  - jazz-react-native@0.8.32
+
+## 1.0.22
+
+### Patch Changes
+
+- jazz-react-native@0.8.31
+- jazz-tools@0.8.31
+
+## 1.0.21
+
+### Patch Changes
+
+- jazz-react-native@0.8.30
+- jazz-tools@0.8.30
+
+## 1.0.20
+
+### Patch Changes
+
+- jazz-react-native@0.8.29
+- jazz-tools@0.8.29
+
+## 1.0.19
+
+### Patch Changes
+
+- jazz-react-native@0.8.28
+- jazz-tools@0.8.28
+
+## 1.0.18
+
+### Patch Changes
+
+- jazz-react-native@0.8.27
+- jazz-tools@0.8.27
+
+## 1.0.17
+
+### Patch Changes
+
+- Updated dependencies [d348c2d]
+- Updated dependencies [6902b5b]
+- Updated dependencies [1a0cd3d]
+  - jazz-tools@0.8.23
+  - jazz-react-native@0.8.23
+
+## 1.0.16
+
+### Patch Changes
+
+- Updated dependencies [149ca97]
+  - jazz-tools@0.8.21
+  - jazz-react-native@0.8.21
+
+## 1.0.15
+
+### Patch Changes
+
+- Updated dependencies [3ef3ff3]
+  - jazz-react-native@0.8.20
+
+## 1.0.14
+
+### Patch Changes
+
+- jazz-react-native@0.8.19
+- jazz-tools@0.8.19
+
+## 1.0.13
+
+### Patch Changes
+
+- jazz-react-native@0.8.18
+- jazz-tools@0.8.18
+
 ## 1.0.12
 
 ### Patch Changes

examples/chat-rn/babel.config.js

@@ -2,6 +2,6 @@ module.exports = function (api) {
   api.cache(true);
   return {
     presets: ["babel-preset-expo"],
-    plugins: ["nativewind/babel", "@babel/plugin-transform-class-static-block"],
+    plugins: ["nativewind/babel"],
   };
 };

examples/chat-rn/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-rn",
-  "version": "1.0.12",
+  "version": "1.0.24",
   "main": "index.js",
   "scripts": {
     "build": "expo export -p ios",
@@ -45,7 +45,6 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@babel/plugin-transform-class-static-block": "^7.24.7",
     "@types/react": "^18.2.19",
     "tailwindcss": "3.3.2",
     "typescript": "^5.3.3"

examples/chat-vue/CHANGELOG.md

@@ -1,5 +1,131 @@
 # chat-vue
 
+## 0.0.17
+
+### Patch Changes
+
+- jazz-browser@0.8.34
+- jazz-tools@0.8.34
+- jazz-vue@0.8.22
+
+## 0.0.16
+
+### Patch Changes
+
+- Updated dependencies [3cb27e1]
+  - jazz-browser@0.8.33
+  - jazz-vue@0.8.21
+
+## 0.0.15
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - jazz-tools@0.8.32
+  - jazz-browser@0.8.32
+  - jazz-vue@0.8.20
+
+## 0.0.14
+
+### Patch Changes
+
+- jazz-browser@0.8.31
+- jazz-tools@0.8.31
+- jazz-vue@0.8.19
+
+## 0.0.13
+
+### Patch Changes
+
+- jazz-browser@0.8.30
+- jazz-tools@0.8.30
+- jazz-vue@0.8.18
+
+## 0.0.12
+
+### Patch Changes
+
+- jazz-browser@0.8.29
+- jazz-tools@0.8.29
+- jazz-vue@0.8.17
+
+## 0.0.11
+
+### Patch Changes
+
+- jazz-browser@0.8.28
+- jazz-tools@0.8.28
+- jazz-vue@0.8.16
+
+## 0.0.10
+
+### Patch Changes
+
+- jazz-browser@0.8.27
+- jazz-tools@0.8.27
+- jazz-vue@0.8.15
+
+## 0.0.9
+
+### Patch Changes
+
+- jazz-browser@0.8.24
+- jazz-vue@0.8.14
+
+## 0.0.8
+
+### Patch Changes
+
+- Updated dependencies [d348c2d]
+- Updated dependencies [e442bb8]
+- Updated dependencies [6902b5b]
+- Updated dependencies [1a0cd3d]
+  - jazz-tools@0.8.23
+  - jazz-browser@0.8.23
+  - jazz-vue@0.8.13
+
+## 0.0.7
+
+### Patch Changes
+
+- a734530: fix useCoState reactivity
+- Updated dependencies [f6bc8af]
+- Updated dependencies [a734530]
+  - jazz-browser@0.8.22
+  - jazz-vue@0.8.12
+
+## 0.0.6
+
+### Patch Changes
+
+- Updated dependencies [149ca97]
+  - jazz-tools@0.8.21
+  - jazz-browser@0.8.21
+  - jazz-vue@0.8.11
+
+## 0.0.5
+
+### Patch Changes
+
+- jazz-browser@0.8.20
+- jazz-vue@0.8.10
+
+## 0.0.4
+
+### Patch Changes
+
+- jazz-browser@0.8.19
+- jazz-tools@0.8.19
+- jazz-vue@0.8.9
+
+## 0.0.3
+
+### Patch Changes
+
+- jazz-browser@0.8.18
+- jazz-tools@0.8.18
+- jazz-vue@0.8.8
+
 ## 0.0.2
 
 ### Patch Changes

examples/chat-vue/package.json

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

examples/chat/CHANGELOG.md

@@ -1,5 +1,149 @@
 # jazz-example-chat
 
+## 0.0.112
+
+### Patch Changes
+
+- Updated dependencies [e4f110f]
+  - cojson@0.8.34
+  - jazz-react@0.8.34
+  - jazz-tools@0.8.34
+
+## 0.0.111
+
+### Patch Changes
+
+- jazz-react@0.8.33
+
+## 0.0.110
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+- Updated dependencies [df42b2b]
+  - cojson@0.8.32
+  - jazz-tools@0.8.32
+  - jazz-react@0.8.32
+
+## 0.0.109
+
+### Patch Changes
+
+- Updated dependencies [e511d6d]
+  - cojson@0.8.31
+  - jazz-react@0.8.31
+  - jazz-tools@0.8.31
+
+## 0.0.108
+
+### Patch Changes
+
+- Updated dependencies [0a2fae3]
+- Updated dependencies [99cda2f]
+  - cojson@0.8.30
+  - jazz-react@0.8.30
+  - jazz-tools@0.8.30
+
+## 0.0.107
+
+### Patch Changes
+
+- Updated dependencies [dcc9c2e]
+- Updated dependencies [699553f]
+  - cojson@0.8.29
+  - jazz-react@0.8.29
+  - jazz-tools@0.8.29
+
+## 0.0.106
+
+### Patch Changes
+
+- Updated dependencies [605734c]
+  - cojson@0.8.28
+  - jazz-react@0.8.28
+  - jazz-tools@0.8.28
+
+## 0.0.105
+
+### Patch Changes
+
+- Updated dependencies [75fdff4]
+  - cojson@0.8.27
+  - jazz-react@0.8.27
+  - jazz-tools@0.8.27
+
+## 0.0.104
+
+### Patch Changes
+
+- 59d37df: add autologin option to DemoAuth to skip login
+- Updated dependencies [59d37df]
+  - jazz-react@0.8.26
+
+## 0.0.103
+
+### Patch Changes
+
+- jazz-react@0.8.24
+
+## 0.0.102
+
+### Patch Changes
+
+- Updated dependencies [6f745be]
+- Updated dependencies [d348c2d]
+- Updated dependencies [124bf67]
+- Updated dependencies [6902b5b]
+- Updated dependencies [1a0cd3d]
+  - cojson@0.8.23
+  - jazz-tools@0.8.23
+  - jazz-react@0.8.23
+
+## 0.0.101
+
+### Patch Changes
+
+- Updated dependencies [59cc64d]
+  - jazz-react@0.8.22
+
+## 0.0.100
+
+### Patch Changes
+
+- Updated dependencies [0f30eea]
+- Updated dependencies [149ca97]
+  - cojson@0.8.21
+  - jazz-tools@0.8.21
+  - jazz-react@0.8.21
+
+## 0.0.99
+
+### Patch Changes
+
+- Updated dependencies [dd9b13f]
+- Updated dependencies [a69ed0b]
+- Updated dependencies [3ef3ff3]
+- Updated dependencies [c6931b8]
+  - jazz-react@0.8.20
+
+## 0.0.98
+
+### Patch Changes
+
+- Updated dependencies [9c2aadb]
+  - cojson@0.8.19
+  - jazz-react@0.8.19
+  - jazz-tools@0.8.19
+
+## 0.0.97
+
+### Patch Changes
+
+- Updated dependencies [d4319d8]
+  - cojson@0.8.18
+  - jazz-react@0.8.18
+  - jazz-tools@0.8.18
+
 ## 0.0.96
 
 ### Patch Changes

examples/chat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-chat",
   "private": true,
-  "version": "0.0.96",
+  "version": "0.0.112",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -18,10 +18,10 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "cojson": "workspace:0.8.17",
+    "cojson": "workspace:0.8.34",
     "hash-slash": "workspace:0.2.1",
-    "jazz-react": "workspace:0.8.17",
-    "jazz-tools": "workspace:0.8.17",
+    "jazz-react": "workspace:0.8.34",
+    "jazz-tools": "workspace:0.8.34",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",

examples/chat/src/app.tsx

@@ -1,3 +1,4 @@
+import { inIframe, onChatLoad } from "@/util.ts";
 import { useIframeHashRouter } from "hash-slash";
 import { Group, ID } from "jazz-tools";
 import { ChatScreen } from "./chatScreen.tsx";
@@ -15,12 +16,16 @@ export function App() {
     group.addMember("everyone", "writer");
     const chat = Chat.create([], { owner: group });
     router.navigate("/#/chat/" + chat.id);
+
+    // for https://jazz.tools marketing site demo only
+    onChatLoad(chat, me);
   };
 
   return (
     <AppContainer>
       <TopBar>
-        <p>{me?.profile?.name}</p> · <button onClick={logOut}>Log out</button>
+        <p>{me?.profile?.name}</p>
+        {!inIframe && <button onClick={logOut}>Log out</button>}
       </TopBar>
       {router.route({
         "/": () => createChat() as never,

examples/chat/src/chatScreen.tsx

@@ -48,10 +48,11 @@ export function ChatScreen(props: { chatID: ID<Chat> }) {
 
 function ChatBubble(props: { msg: Message }) {
   const lastEdit = props.msg._edits.text;
+  const fromMe = lastEdit.by?.isMe;
 
   return (
-    <BubbleContainer fromMe={lastEdit.by?.isMe}>
-      <BubbleBody>{props.msg.text}</BubbleBody>
+    <BubbleContainer fromMe={fromMe}>
+      <BubbleBody fromMe={fromMe}>{props.msg.text}</BubbleBody>
       <BubbleInfo by={lastEdit.by?.profile?.name} madeAt={lastEdit.madeAt} />
     </BubbleContainer>
   );

examples/chat/src/ui.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { useId } from "react";
 
 export function AppContainer(props: { children: React.ReactNode }) {
@@ -10,7 +11,7 @@ export function AppContainer(props: { children: React.ReactNode }) {
 
 export function TopBar(props: { children: React.ReactNode }) {
   return (
-    <div className="p-3 bg-white w-full flex justify-end gap-1 text-xs border-b dark:bg-transparent dark:border-stone-800">
+    <div className="p-3 bg-white w-full flex justify-between gap-2 border-b dark:bg-transparent dark:border-stone-800">
       {props.children}
     </div>
   );
@@ -29,7 +30,7 @@ export function ChatBody(props: { children: React.ReactNode }) {
 
 export function EmptyChatMessage() {
   return (
-    <div className="h-full text-base text-stone-500 flex items-center justify-center px-3 md:text-xl">
+    <div className="h-full text-base text-stone-500 flex items-center justify-center px-3 text-lg md:text-2xl">
       Start a conversation below.
     </div>
   );
@@ -41,15 +42,26 @@ export function BubbleContainer(props: {
 }) {
   const align = props.fromMe ? "items-end" : "items-start";
   return (
-    <div className={`${align} flex flex-col m-2`} role="row">
+    <div className={`${align} flex flex-col m-3`} role="row">
       {props.children}
     </div>
   );
 }
 
-export function BubbleBody(props: { children: React.ReactNode }) {
+export function BubbleBody(props: {
+  children: React.ReactNode;
+  fromMe: boolean | undefined;
+}) {
   return (
-    <div className="rounded-2xl text-sm line-clamp-10 text-ellipsis bg-white max-w-full whitespace-pre-wrap dark:bg-stone-700 dark:text-white py-1 px-3 shadow-sm">
+    <div
+      className={clsx(
+        "line-clamp-10 text-ellipsis whitespace-pre-wrap",
+        "rounded-2xl max-w-full py-1 px-3 shadow-sm",
+        props.fromMe
+          ? "bg-white dark:bg-stone-700 dark:text-white"
+          : "bg-blue text-white",
+      )}
+    >
       {props.children}
     </div>
   );
@@ -73,7 +85,7 @@ export function ChatInput(props: { onSubmit: (text: string) => void }) {
       </label>
       <input
         id={inputId}
-        className="rounded-full py-2 px-4 text-sm border block w-full dark:bg-black dark:text-white dark:border-stone-700"
+        className="rounded-full py-2 px-4 border block w-full dark:bg-black dark:text-white dark:border-stone-700"
         placeholder="Type a message and press Enter"
         maxLength={2048}
         onKeyDown={({ key, currentTarget: input }) => {

examples/chat/src/util.ts

@@ -0,0 +1,27 @@
+// This is only for demo purposes for https://jazz.tools
+// This is NOT needed to make the chat work
+
+import { Chat } from "@/schema.ts";
+import { Account, CoValue, ID } from "jazz-tools";
+
+export function waitForUpload(id: ID<CoValue>, me: Account) {
+  const syncManager = me._raw.core.node.syncManager;
+  const peers = syncManager.getPeers();
+
+  return Promise.all(
+    peers.map((peer) => syncManager.waitForUploadIntoPeer(peer.id, id)),
+  );
+}
+
+export function onChatLoad(chat: Chat, me: Account) {
+  if (window.parent) {
+    waitForUpload(chat.id, me).then(() => {
+      window.parent.postMessage(
+        { type: "chat-load", id: "/chat/" + chat.id },
+        "*",
+      );
+    });
+  }
+}
+
+export const inIframe = window.self !== window.top;

examples/chat/tailwind.config.js

@@ -16,6 +16,10 @@ module.exports = {
     },
     extend: {
       colors: {
+        blue: {
+          700: "#3313F7",
+          DEFAULT: "#3313F7",
+        },
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",

examples/chat/tests/pages/ChatPage.ts

@@ -20,10 +20,6 @@ export class ChatPage {
     await this.messageInput.press("Enter");
   }
 
-  async expectLoaded() {
-    await expect(this.messageInput).toBeVisible();
-  }
-
   async expectMessageRow(message: string) {
     await expect(this.page.getByText(message)).toBeVisible();
   }

examples/clerk/.gitignore

@@ -22,5 +22,3 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-
-sync-db/

examples/clerk/CHANGELOG.md

@@ -0,0 +1,94 @@
+# minimal-auth-clerk
+
+## 0.0.11
+
+### Patch Changes
+
+- 9ca25d1: Rename passkey and clerk examples
+- Updated dependencies [9ca25d1]
+  - jazz-react-auth-clerk@0.8.34
+  - jazz-react@0.8.34
+  - jazz-tools@0.8.34
+
+## 0.0.10
+
+### Patch Changes
+
+- jazz-react@0.8.33
+- jazz-react-auth-clerk@0.8.33
+
+## 0.0.9
+
+### Patch Changes
+
+- Updated dependencies [1a4bda0]
+- Updated dependencies [df42b2b]
+  - jazz-react-auth-clerk@0.8.32
+  - jazz-tools@0.8.32
+  - jazz-react@0.8.32
+
+## 0.0.8
+
+### Patch Changes
+
+- jazz-react@0.8.31
+- jazz-react-auth-clerk@0.8.31
+- jazz-tools@0.8.31
+
+## 0.0.7
+
+### Patch Changes
+
+- jazz-react@0.8.30
+- jazz-react-auth-clerk@0.8.30
+- jazz-tools@0.8.30
+
+## 0.0.6
+
+### Patch Changes
+
+- jazz-react@0.8.29
+- jazz-react-auth-clerk@0.8.29
+- jazz-tools@0.8.29
+
+## 0.0.5
+
+### Patch Changes
+
+- jazz-react@0.8.28
+- jazz-react-auth-clerk@0.8.28
+- jazz-tools@0.8.28
+
+## 0.0.4
+
+### Patch Changes
+
+- jazz-react@0.8.27
+- jazz-react-auth-clerk@0.8.27
+- jazz-tools@0.8.27
+
+## 0.0.3
+
+### Patch Changes
+
+- Updated dependencies [59d37df]
+  - jazz-react@0.8.26
+  - jazz-react-auth-clerk@0.8.26
+
+## 0.0.2
+
+### Patch Changes
+
+- jazz-react@0.8.24
+- jazz-react-auth-clerk@0.8.24
+
+## 0.0.1
+
+### Patch Changes
+
+- Updated dependencies [d348c2d]
+- Updated dependencies [6902b5b]
+- Updated dependencies [1a0cd3d]
+  - jazz-tools@0.8.23
+  - jazz-react@0.8.23
+  - jazz-react-auth-clerk@0.8.23

examples/clerk/README.md

@@ -0,0 +1,3 @@
+# Minimal Jazz Auth Clerk Example
+
+This is a minimal example of how to use Clerk authentication with Jazz.

examples/clerk/index.html

@@ -0,0 +1,16 @@
+<!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>Minimal Auth Clerk Example | Jazz</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>

examples/clerk/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "clerk",
+  "private": true,
+  "version": "0.0.11",
+  "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": {
+    "@clerk/clerk-react": "^5.4.1",
+    "jazz-tools": "workspace:*",
+    "jazz-react": "workspace:*",
+    "jazz-react-auth-clerk": "workspace:0.8.34",
+    "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/clerk/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

examples/clerk/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

examples/clerk/src/App.tsx

@@ -0,0 +1,16 @@
+import "./App.css";
+import { useAccount } from "./main";
+
+function App() {
+  const { me, logOut } = useAccount();
+
+  return (
+    <>
+      <h1>You're logged in</h1>
+      <p>Welcome back, {me?.profile?.name}</p>
+      <button onClick={() => logOut()}>Logout</button>
+    </>
+  );
+}
+
+export default App;

examples/clerk/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

examples/clerk/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;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

examples/clerk/src/main.tsx

@@ -1,10 +1,17 @@
+import { ClerkProvider, SignInButton, useClerk } from "@clerk/clerk-react";
 import { createJazzReactApp } from "jazz-react";
+import { useJazzClerkAuth } from "jazz-react-auth-clerk";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { App } from "./app.tsx";
+import App from "./App.tsx";
+import "./index.css";
 
-import { ClerkProvider, SignInButton, useClerk } from "@clerk/clerk-react";
-import { useJazzClerkAuth } from "jazz-react-auth-clerk";
+// Import your publishable key
+const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
+
+if (!PUBLISHABLE_KEY) {
+  throw new Error("Add your Clerk publishable key to the .env.local file");
+}
 
 const Jazz = createJazzReactApp();
 export const { useAccount, useCoState } = Jazz;
@@ -15,13 +22,13 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
 
   return (
     <>
-      {state.errors.map((error) => (
+      {state?.errors?.map((error) => (
         <div key={error}>{error}</div>
       ))}
-      {auth ? (
+      {clerk.user && auth ? (
         <Jazz.Provider
           auth={auth}
-          peer="wss://cloud.jazz.tools/?key=chat-example-jazz-clerk@gcmp.io"
+          peer="wss://cloud.jazz.tools/?key=minimal-auth-clerk-example@gcmp.io"
         >
           {children}
         </Jazz.Provider>
@@ -34,10 +41,7 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <ClerkProvider
-      publishableKey={import.meta.env.VITE_CLERK_PUBLISHABLE_KEY}
-      afterSignOutUrl="/"
-    >
+    <ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
       <JazzAndAuth>
         <App />
       </JazzAndAuth>

examples/clerk/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/clerk/tsconfig.json

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

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

@@ -1,5 +1,96 @@
 # jazz-example-inspector
 
+## 0.0.81
+
+### Patch Changes
+
+- Updated dependencies [e4f110f]
+  - cojson@0.8.34
+  - cojson-transport-ws@0.8.34
+
+## 0.0.80
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - cojson@0.8.32
+  - cojson-transport-ws@0.8.32
+
+## 0.0.79
+
+### Patch Changes
+
+- Updated dependencies [e511d6d]
+  - cojson@0.8.31
+  - cojson-transport-ws@0.8.31
+
+## 0.0.78
+
+### Patch Changes
+
+- Updated dependencies [0a2fae3]
+- Updated dependencies [99cda2f]
+  - cojson@0.8.30
+  - cojson-transport-ws@0.8.30
+
+## 0.0.77
+
+### Patch Changes
+
+- Updated dependencies [dcc9c2e]
+- Updated dependencies [699553f]
+  - cojson-transport-ws@0.8.29
+  - cojson@0.8.29
+
+## 0.0.76
+
+### Patch Changes
+
+- Updated dependencies [605734c]
+  - cojson@0.8.28
+  - cojson-transport-ws@0.8.28
+
+## 0.0.75
+
+### Patch Changes
+
+- Updated dependencies [75fdff4]
+  - cojson@0.8.27
+  - cojson-transport-ws@0.8.27
+
+## 0.0.74
+
+### Patch Changes
+
+- Updated dependencies [6f745be]
+- Updated dependencies [124bf67]
+  - cojson@0.8.23
+  - cojson-transport-ws@0.8.23
+
+## 0.0.73
+
+### Patch Changes
+
+- Updated dependencies [0f30eea]
+  - cojson@0.8.21
+  - cojson-transport-ws@0.8.21
+
+## 0.0.72
+
+### Patch Changes
+
+- Updated dependencies [9c2aadb]
+  - cojson@0.8.19
+  - cojson-transport-ws@0.8.19
+
+## 0.0.71
+
+### Patch Changes
+
+- Updated dependencies [d4319d8]
+  - cojson@0.8.18
+  - cojson-transport-ws@0.8.18
+
 ## 0.0.70
 
 ### Patch Changes

examples/inspector/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-inspector",
   "private": true,
-  "version": "0.0.70",
+  "version": "0.0.81",
   "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",
-    "cojson": "workspace:0.8.17",
-    "cojson-transport-ws": "workspace:0.8.17",
+    "cojson": "workspace:0.8.34",
+    "cojson-transport-ws": "workspace:0.8.34",
     "hash-slash": "workspace:0.2.1",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",

examples/music-player/CHANGELOG.md

@@ -1,5 +1,123 @@
 # jazz-example-musicplayer
 
+## 0.0.32
+
+### Patch Changes
+
+- jazz-react@0.8.34
+- jazz-tools@0.8.34
+
+## 0.0.31
+
+### Patch Changes
+
+- jazz-react@0.8.33
+
+## 0.0.30
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - jazz-tools@0.8.32
+  - jazz-react@0.8.32
+
+## 0.0.29
+
+### Patch Changes
+
+- jazz-react@0.8.31
+- jazz-tools@0.8.31
+
+## 0.0.28
+
+### Patch Changes
+
+- jazz-react@0.8.30
+- jazz-tools@0.8.30
+
+## 0.0.27
+
+### Patch Changes
+
+- jazz-react@0.8.29
+- jazz-tools@0.8.29
+
+## 0.0.26
+
+### Patch Changes
+
+- jazz-react@0.8.28
+- jazz-tools@0.8.28
+
+## 0.0.25
+
+### Patch Changes
+
+- jazz-react@0.8.27
+- jazz-tools@0.8.27
+
+## 0.0.24
+
+### Patch Changes
+
+- Updated dependencies [59d37df]
+  - jazz-react@0.8.26
+
+## 0.0.23
+
+### Patch Changes
+
+- jazz-react@0.8.24
+
+## 0.0.22
+
+### Patch Changes
+
+- Updated dependencies [d348c2d]
+- Updated dependencies [6902b5b]
+- Updated dependencies [1a0cd3d]
+  - jazz-tools@0.8.23
+  - jazz-react@0.8.23
+
+## 0.0.21
+
+### Patch Changes
+
+- Updated dependencies [59cc64d]
+  - jazz-react@0.8.22
+
+## 0.0.20
+
+### Patch Changes
+
+- Updated dependencies [149ca97]
+  - jazz-tools@0.8.21
+  - jazz-react@0.8.21
+
+## 0.0.19
+
+### Patch Changes
+
+- Updated dependencies [dd9b13f]
+- Updated dependencies [a69ed0b]
+- Updated dependencies [3ef3ff3]
+- Updated dependencies [c6931b8]
+  - jazz-react@0.8.20
+
+## 0.0.18
+
+### Patch Changes
+
+- jazz-react@0.8.19
+- jazz-tools@0.8.19
+
+## 0.0.17
+
+### Patch Changes
+
+- jazz-react@0.8.18
+- jazz-tools@0.8.18
+
 ## 0.0.16
 
 ### Patch Changes

examples/music-player/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-music-player",
   "private": true,
-  "version": "0.0.16",
+  "version": "0.0.32",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -18,8 +18,8 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-react": "workspace:0.8.17",
-    "jazz-tools": "workspace:0.8.17",
+    "jazz-react": "workspace:0.8.34",
+    "jazz-tools": "workspace:0.8.34",
     "lucide-react": "^0.274.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

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

@@ -1,11 +1,4 @@
-import {
-  Account,
-  BinaryCoStream,
-  CoList,
-  CoMap,
-  Profile,
-  co,
-} from "jazz-tools";
+import { Account, CoList, CoMap, FileStream, Profile, co } from "jazz-tools";
 
 /** Walkthrough: Defining the data model with CoJSON
  *
@@ -36,12 +29,12 @@ export class MusicTrack extends CoMap {
   sourceTrack = co.optional.ref(MusicTrack);
 
   /**
-   * In Jazz you can files using BinaryCoStream.
+   * In Jazz you can upload files using FileStream.
    *
-   * As for any other coValue the music files we put inside BinaryCoStream
+   * As for any other coValue the music files we put inside FileStream
    * is available offline and end-to-end encrypted 😉
    */
-  file = co.ref(BinaryCoStream);
+  file = co.ref(FileStream);
   waveform = co.ref(MusicTrackWaveform);
 }
 

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

@@ -70,7 +70,11 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
 
   return (
     <>
-      <Jazz.Provider auth={auth} peer={peer}>
+      <Jazz.Provider
+        storage={["singleTabOPFS", "indexedDB"]}
+        auth={auth}
+        peer={peer}
+      >
         {children}
       </Jazz.Provider>
       <DemoAuthBasicUI appName="Jazz Music Player" state={state} />

examples/music-player/src/4_actions.ts

@@ -1,5 +1,5 @@
 import { getAudioFileData } from "@/lib/audio/getAudioFileData";
-import { BinaryCoStream, Group } from "jazz-tools";
+import { FileStream, Group } from "jazz-tools";
 import {
   ListOfTracks,
   MusicTrack,
@@ -35,14 +35,14 @@ export async function uploadMusicTracks(
   for (const file of files) {
     const data = await getAudioFileData(file);
 
-    // We transform the file blob into a BinaryCoStream
+    // We transform the file blob into a FileStream
     // making it a collaborative value that is encrypted, easy
     // to share across devices and users and available offline!
-    const binaryCoStream = await BinaryCoStream.createFromBlob(file, ownership);
+    const fileStream = await FileStream.createFromBlob(file, ownership);
 
     const musicTrack = MusicTrack.create(
       {
-        file: binaryCoStream,
+        file: fileStream,
         duration: data.duration,
         waveform: MusicTrackWaveform.create({ data: data.waveform }, ownership),
         title: file.name,
@@ -98,7 +98,7 @@ export async function addTrackToPlaylist(
    * won't need to clone values to have this kind of sharing granularity
    */
   const ownership = { owner: playlist._owner };
-  const blob = await BinaryCoStream.loadAsBlob(track._refs.file.id, account);
+  const blob = await FileStream.loadAsBlob(track._refs.file.id, account);
   const waveform = await MusicTrackWaveform.load(
     track._refs.waveform.id,
     account,
@@ -109,7 +109,7 @@ export async function addTrackToPlaylist(
 
   const trackClone = MusicTrack.create(
     {
-      file: await BinaryCoStream.createFromBlob(blob, ownership),
+      file: await FileStream.createFromBlob(blob, ownership),
       duration: track.duration,
       waveform: MusicTrackWaveform.create({ data: waveform.data }, ownership),
       title: track.title,

examples/music-player/src/5_useMediaPlayer.ts

@@ -1,7 +1,7 @@
 import { MusicTrack, Playlist } from "@/1_schema";
 import { usePlayMedia } from "@/lib/audio/usePlayMedia";
 import { usePlayState } from "@/lib/audio/usePlayState";
-import { BinaryCoStream, ID } from "jazz-tools";
+import { FileStream, ID } from "jazz-tools";
 import { useRef, useState } from "react";
 import { useAccount } from "./2_main";
 import { updateActivePlaylist, updateActiveTrack } from "./4_actions";
@@ -27,7 +27,7 @@ export function useMediaPlayer() {
 
     setLoading(track.id);
 
-    const file = await BinaryCoStream.loadAsBlob(track._refs.file.id, me);
+    const file = await FileStream.loadAsBlob(track._refs.file.id, me);
 
     if (!file) {
       setLoading(null);

examples/onboarding/.gitignore

@@ -0,0 +1,26 @@
+# 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?
+
+playwright-report

examples/onboarding/CHANGELOG.md

@@ -0,0 +1,98 @@
+# jazz-example-onboarding
+
+## 0.0.13
+
+### Patch Changes
+
+- jazz-react@0.8.34
+- jazz-tools@0.8.34
+- jazz-browser-media-images@0.8.34
+
+## 0.0.12
+
+### Patch Changes
+
+- jazz-browser-media-images@0.8.33
+- jazz-react@0.8.33
+
+## 0.0.11
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - jazz-tools@0.8.32
+  - jazz-react@0.8.32
+  - jazz-browser-media-images@0.8.32
+
+## 0.0.10
+
+### Patch Changes
+
+- jazz-react@0.8.31
+- jazz-tools@0.8.31
+- jazz-browser-media-images@0.8.31
+
+## 0.0.9
+
+### Patch Changes
+
+- jazz-react@0.8.30
+- jazz-tools@0.8.30
+- jazz-browser-media-images@0.8.30
+
+## 0.0.8
+
+### Patch Changes
+
+- jazz-react@0.8.29
+- jazz-tools@0.8.29
+- jazz-browser-media-images@0.8.29
+
+## 0.0.7
+
+### Patch Changes
+
+- jazz-react@0.8.28
+- jazz-tools@0.8.28
+- jazz-browser-media-images@0.8.28
+
+## 0.0.6
+
+### Patch Changes
+
+- jazz-react@0.8.27
+- jazz-tools@0.8.27
+- jazz-browser-media-images@0.8.27
+
+## 0.0.5
+
+### Patch Changes
+
+- Updated dependencies [59d37df]
+  - jazz-react@0.8.26
+
+## 0.0.4
+
+### Patch Changes
+
+- jazz-browser-media-images@0.8.24
+- jazz-react@0.8.24
+
+## 0.0.3
+
+### Patch Changes
+
+- Updated dependencies [d348c2d]
+- Updated dependencies [6902b5b]
+- Updated dependencies [1a0cd3d]
+  - jazz-tools@0.8.23
+  - jazz-react@0.8.23
+  - jazz-browser-media-images@0.8.23
+
+## 0.0.2
+
+### Patch Changes
+
+- Updated dependencies [59cc64d]
+  - jazz-react@0.8.22
+  - jazz-browser-media-images@0.8.22

examples/onboarding/README.md

@@ -0,0 +1 @@
+# vite-ts-react-tailwind

examples/onboarding/index.html

@@ -2,13 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/jazz-logo.png" />
-    <link rel="stylesheet" href="/src/index.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Jazz Chat Example</title>
+    <title>Jazz onboarding example</title>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/app.tsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

examples/onboarding/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "jazz-example-onboarding",
+  "private": true,
+  "version": "0.0.13",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "format-and-lint": "biome check .",
+    "format-and-lint:fix": "biome check . --write",
+    "preview": "vite preview",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui",
+    "sync": "jazz-run sync"
+  },
+  "dependencies": {
+    "jazz-browser-media-images": "workspace:*",
+    "jazz-react": "workspace:*",
+    "jazz-tools": "workspace:*",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
+  },
+  "devDependencies": {
+    "jazz-run": "workspace:*",
+    "@playwright/test": "^1.46.1",
+    "@types/react": "^18.2.19",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.27",
+    "tailwindcss": "^3.3.2",
+    "typescript": "^5.3.3",
+    "is-ci": "^3.0.1",
+    "vite": "^5.0.10"
+  }
+}

examples/onboarding/playwright.config.ts

@@ -0,0 +1,46 @@
+import { defineConfig, devices } from "@playwright/test";
+import isCI from "is-ci";
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./tests",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: isCI,
+  /* Retry on CI only */
+  retries: isCI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: isCI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: "http://localhost:5173/",
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+    permissions: ["clipboard-read", "clipboard-write"],
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: [
+    {
+      command: "pnpm preview --port 5173",
+      url: "http://localhost:5173/",
+      reuseExistingServer: !isCI,
+    },
+  ],
+});

examples/onboarding/src/App.tsx

@@ -0,0 +1,100 @@
+import { Button } from "@/components/Button.tsx";
+import { useAcceptInvite, useAccount, useCoState } from "@/main.tsx";
+import { EmployeeList } from "@/pages/EmployeeList.tsx";
+import { EmployeeOnboading } from "@/pages/EmployeeOnboarding.tsx";
+import { NewEmployee } from "@/pages/NewEmployee.tsx";
+import { CoEmployee, EmployeeCoList } from "@/schema.ts";
+import { ID } from "jazz-tools";
+import { useEffect } from "react";
+import {
+  RouterProvider,
+  createHashRouter,
+  useNavigate,
+  useParams,
+} from "react-router-dom";
+
+function ImportEmployee({
+  employeeListCoId,
+}: { employeeListCoId: ID<EmployeeCoList> }) {
+  const { employeeCoId } = useParams();
+  const navigate = useNavigate();
+
+  const employees = useCoState(EmployeeCoList, employeeListCoId, [{}]);
+  const employee = useCoState(CoEmployee, employeeCoId as ID<CoEmployee>, {});
+
+  useEffect(() => {
+    if (!employee || !employees) return;
+
+    const exists = employees.find((employee) => employeeCoId === employee.id);
+
+    if (!exists) {
+      employees.push(employee);
+    }
+    navigate("/");
+  }, [employee, employees, navigate]);
+
+  return <div>Importing Employee ${employeeCoId} ...</div>;
+}
+
+function AcceptInvite() {
+  const navigate = useNavigate();
+
+  useAcceptInvite({
+    invitedObjectSchema: CoEmployee,
+    onAccept: (employeeCoId) => {
+      navigate(`/import/${employeeCoId}`);
+    },
+  });
+
+  return <p>Accepting invite...</p>;
+}
+
+function App() {
+  const { me, logOut } = useAccount();
+  const employeeCoListId = me.profile?._refs.employees.id;
+
+  const router = createHashRouter([
+    {
+      path: "/",
+      element: <EmployeeList employeeListCoId={employeeCoListId} />,
+    },
+    {
+      path: "employee/new",
+      element: <NewEmployee employeeListCoId={employeeCoListId} />,
+    },
+    {
+      path: "/employee/:employeeCoId",
+      element: <EmployeeOnboading />,
+    },
+    {
+      path: "/import/:employeeCoId",
+      element: <ImportEmployee employeeListCoId={employeeCoListId} />,
+    },
+    {
+      path: "/invite/*",
+      element: <AcceptInvite />,
+    },
+  ]);
+
+  return (
+    <>
+      <header className="flex flex-wrap space-x-8   max-w-screen-lg m-2">
+        <h1 className="text-3xl font-extrabold">
+          Jazz Onboarding Flow example
+        </h1>
+        <Button
+          onClick={() => {
+            window.location.href = "/";
+            logOut();
+          }}
+          text="Log Out"
+        />
+      </header>
+      <main className="ml-2">
+        {employeeCoListId && <RouterProvider router={router} />}
+      </main>
+    </>
+  );
+}
+
+export default App;

examples/onboarding/src/components/Button.tsx

@@ -0,0 +1,29 @@
+const disabledClasses =
+  "text-white bg-gray-400 dark:bg-gray-500 cursor-not-allowed";
+const regularClasses =
+  "text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-green-300 dark:focus:ring-green-800";
+
+export function Button({
+  text,
+  onClick,
+  disabled,
+  ...props
+}: {
+  text: string;
+  onClick?: () => void;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      {...props}
+      onClick={onClick}
+      type="button"
+      disabled={disabled}
+      className={`${
+        disabled ? disabledClasses : regularClasses
+      } text-base font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2`}
+    >
+      {text}
+    </button>
+  );
+}

examples/onboarding/src/components/ButtonLink.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+export function ButtonLink({
+  to,
+  children,
+}: {
+  to: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <Link
+      className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
+      to={to}
+    >
+      {children}
+    </Link>
+  );
+}

examples/onboarding/src/components/NavLink.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+export function NavLink({
+  to,
+  children,
+}: {
+  to: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <Link
+      className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
+      to={to}
+    >
+      {children}
+    </Link>
+  );
+}

examples/onboarding/src/components/NavigateBack.tsx

@@ -0,0 +1,24 @@
+import { useNavigate } from "react-router-dom";
+import { Button } from "./Button.tsx";
+
+export function NavigateBack() {
+  const navigate = useNavigate();
+  const canGoBack = window.history.state.idx !== 0;
+
+  if (!canGoBack) return null;
+
+  return (
+    <div>
+      <Button onClick={() => navigate(-1)} text="< Back" />
+    </div>
+  );
+}
+
+export function NavigateButton({ text, to }: { text: string; to: string }) {
+  const navigate = useNavigate();
+  return (
+    <div>
+      <Button onClick={() => navigate(to)} text={text} />
+    </div>
+  );
+}

examples/onboarding/src/components/Stack.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+export function Stack({
+  children,
+  horizontal,
+}: {
+  children: React.ReactNode;
+  horizontal?: boolean;
+}) {
+  return (
+    <div
+      className={`container flex ${
+        horizontal ? "flex-row" : "flex-col"
+      } col ${horizontal ? "space-x-4 flex-wrap" : "space-y-4"} p-4`}
+    >
+      {children}
+    </div>
+  );
+}

examples/onboarding/src/components/TextInput.tsx

@@ -0,0 +1,36 @@
+import { ChangeEvent } from "react";
+
+export function TextInput({
+  id,
+  value,
+  label,
+  onChange,
+  disabled,
+}: {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  disabled?: boolean;
+}) {
+  return (
+    <div>
+      <label
+        htmlFor={id}
+        className="block mb-2 font-medium text-gray-900 dark:text-white"
+      >
+        {label}
+      </label>
+      <input
+        value={value}
+        onChange={onChange}
+        type="text"
+        id={id}
+        disabled={disabled}
+        className="disabled:cursor-not-allowed bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        placeholder="John"
+        required
+      />
+    </div>
+  );
+}

examples/onboarding/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

examples/onboarding/src/main.tsx

@@ -0,0 +1,39 @@
+import App from "@/App.tsx";
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "@/index.css";
+import { HRAccount } from "@/schema.ts";
+import { DemoAuthBasicUI, createJazzReactApp, useDemoAuth } from "jazz-react";
+
+const Jazz = createJazzReactApp({
+  AccountSchema: HRAccount,
+});
+export const { useAccount, useCoState, useAcceptInvite } = Jazz;
+
+const peer =
+  (new URL(window.location.href).searchParams.get(
+    "peer",
+  ) as `ws://${string}`) ??
+  "wss://cloud.jazz.tools/?key=onboarding-example-jazz@gcmp.io";
+
+function JazzAndAuth({ children }: { children: React.ReactNode }) {
+  const [auth, authState] = useDemoAuth();
+  return (
+    <>
+      <Jazz.Provider auth={auth} peer={peer}>
+        {children}
+      </Jazz.Provider>
+      {authState.state !== "signedIn" && (
+        <DemoAuthBasicUI appName="Jazz Onboarding" state={authState} />
+      )}
+    </>
+  );
+}
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <JazzAndAuth>
+      <App />
+    </JazzAndAuth>
+  </React.StrictMode>,
+);

examples/onboarding/src/pages/EmployeeList.tsx

@@ -0,0 +1,50 @@
+import { NavLink } from "@/components/NavLink.tsx";
+import { NavigateButton } from "@/components/NavigateBack.tsx";
+import { Stack } from "@/components/Stack.tsx";
+import { useCoState } from "@/main.tsx";
+import { CoEmployee, EmployeeCoList } from "@/schema.ts";
+import { ID } from "jazz-tools";
+
+export function EmployeeList({
+  employeeListCoId,
+}: {
+  employeeListCoId: ID<EmployeeCoList>;
+}) {
+  const employees = useCoState(EmployeeCoList, employeeListCoId, [{}]);
+
+  if (!employees) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <Stack>
+      <NavigateButton to="/employee/new" text={"Add New Employee"} />
+      <ul className="max-w-md">
+        {employees.map((employee: CoEmployee) =>
+          employee.deleted ? null : (
+            <li key={employee.id} className="flex flex-row space-x-8 w-full">
+              <span>{employee._owner.myRole()}</span>
+              <span className="w-1/3">
+                <NavLink to={`/employee/${employee.id}`}>
+                  {employee.name}
+                </NavLink>
+              </span>
+              {employee.finalStep?.done && <span>✅</span>}
+              {employee._owner.myRole() === "admin" &&
+                !employee.finalStep?.done && (
+                  <span
+                    onClick={() => {
+                      employee.deleted = true;
+                    }}
+                    className="cursor-pointer"
+                  >
+                    🗑
+                  </span>
+                )}
+            </li>
+          ),
+        )}
+      </ul>
+    </Stack>
+  );
+}

examples/onboarding/src/pages/EmployeeOnboarding.tsx

@@ -0,0 +1,240 @@
+import { Button } from "@/components/Button.tsx";
+import { NavigateBack } from "@/components/NavigateBack.tsx";
+import { Stack } from "@/components/Stack.tsx";
+import { TextInput } from "@/components/TextInput.tsx";
+import { useCoState } from "@/main.tsx";
+import { createImage } from "jazz-browser-media-images";
+import { ProgressiveImg, createInviteLink } from "jazz-react";
+import { CoMap, ID } from "jazz-tools";
+import { ChangeEvent, ReactNode, useCallback } from "react";
+import { useParams } from "react-router";
+import {
+  CoDocUploadStep,
+  CoEmployee,
+  CoFinalStep,
+  CoInitialStep,
+} from "../schema.ts";
+
+const Card = ({
+  children,
+  title,
+  isDone,
+  isActive,
+}: {
+  children: ReactNode;
+  title: string;
+  isDone: boolean;
+  isActive?: boolean;
+}) => (
+  <div
+    className={`w-full p-4 bg-white border border-gray-200 rounded-lg shadow max-w-md ${
+      isActive ? "border-gray-900 hover:bg-green-50 shadow-xl" : ""
+    }`}
+  >
+    <Stack horizontal={true}>
+      <h5 className="mb-2 text-2xl text-gray-900">{title}</h5>
+      <h6 className="mb-2 text-2xl">
+        {isDone ? "✅" : isActive ? "❓" : "⌛"}
+      </h6>
+    </Stack>
+    {children}
+  </div>
+);
+
+const InfoCard = ({
+  initialStep,
+  canWrite,
+}: {
+  initialStep: CoInitialStep;
+  canWrite: boolean;
+}) => {
+  const isDisabled = !initialStep.isCurrentStep() || !canWrite;
+
+  return (
+    <Card
+      title="Personal Info"
+      isDone={initialStep?.done}
+      isActive={initialStep.isCurrentStep()}
+    >
+      <Stack>
+        <TextInput
+          disabled={isDisabled}
+          id="ssn"
+          label="Social Security Number"
+          value={initialStep.ssn || ""}
+          onChange={({ target: { value } }) => (initialStep.ssn = value)}
+        />
+        <TextInput
+          disabled={isDisabled}
+          id="address"
+          label="Address"
+          value={initialStep.address || ""}
+          onChange={({ target: { value } }) => (initialStep.address = value)}
+        />
+        {!initialStep.done && (
+          <Button
+            text={"Upload step >"}
+            disabled={!initialStep.ssn || !initialStep.address || isDisabled}
+            onClick={() => (initialStep.done = true)}
+          />
+        )}
+      </Stack>
+    </Card>
+  );
+};
+
+const UploadCard = ({
+  uploadStep,
+  canWrite,
+}: {
+  uploadStep: CoDocUploadStep;
+  canWrite: boolean;
+}) => {
+  const isDisabled = !uploadStep.isCurrentStep() || !canWrite;
+
+  const onImageSelected = useCallback(
+    async (event: ChangeEvent<HTMLInputElement>) => {
+      if (!event.target.files) return;
+
+      const image = await createImage(event.target.files[0], {
+        owner: uploadStep._owner,
+      });
+
+      uploadStep.photo = image;
+    },
+    [uploadStep],
+  );
+
+  return (
+    <Card
+      title="Uploads"
+      isDone={uploadStep?.done}
+      isActive={uploadStep.isCurrentStep()}
+    >
+      <Stack>
+        {uploadStep.photo && (
+          <ProgressiveImg image={uploadStep.photo}>
+            {({ src }) => (
+              <img
+                className="max-h-full max-w-full rounded-l-sm rounded-r-md shadow-lg p-2"
+                src={src}
+              />
+            )}
+          </ProgressiveImg>
+        )}
+
+        {!uploadStep.done && (
+          <>
+            <input
+              type="file"
+              disabled={isDisabled}
+              onChange={onImageSelected}
+              data-testid="file-upload"
+            />
+            <Button
+              text={"Confirmation step >"}
+              disabled={isDisabled || !uploadStep.photo}
+              onClick={() => (uploadStep.done = true)}
+            />
+          </>
+        )}
+      </Stack>
+    </Card>
+  );
+};
+
+const ConfirmationCard = ({
+  finalStep,
+  editable,
+}: {
+  finalStep: CoFinalStep;
+  editable: boolean;
+}) => {
+  const isDisabled = !finalStep.isCurrentStep() || !editable;
+  return (
+    <Card
+      title="Confirmation by admin"
+      isDone={finalStep?.done}
+      isActive={finalStep.isCurrentStep()}
+    >
+      <Stack>
+        {!finalStep.done && (
+          <Button
+            text="Confirmation by admin"
+            disabled={isDisabled}
+            onClick={() => (finalStep.done = true)}
+          />
+        )}
+      </Stack>
+    </Card>
+  );
+};
+
+export function EmployeeOnboading() {
+  const { employeeCoId } = useParams();
+
+  const employee = useCoState(CoEmployee, employeeCoId as ID<CoEmployee>, {});
+
+  const handleInviteLinkCreation = useCallback(
+    (role: "reader" | "writer") => {
+      if (!employee) return;
+
+      const link = createInviteLink(employee, role);
+      navigator.clipboard.writeText(link);
+      alert("Invite link copied to clipboard!");
+    },
+    [employee],
+  );
+
+  const isMeWriter = (step: CoMap): boolean => {
+    return ["writer", "admin"].includes(step._owner.myRole() || "");
+  };
+
+  return (
+    <>
+      <Stack>
+        <Stack horizontal={true}>
+          <NavigateBack />
+          {employee?._owner.myRole() === "admin" && (
+            <Button
+              text={"Invite a co-worker"}
+              onClick={() => handleInviteLinkCreation("writer")}
+            />
+          )}
+        </Stack>
+        <h2 className="mb-2 text-2xl text-gray-900 font-semibold">
+          {employee ? employee.name : "Loading..."}
+        </h2>
+      </Stack>
+
+      {employee && (
+        <Stack>
+          {employee.initialStep ? (
+            <InfoCard
+              initialStep={employee.initialStep}
+              canWrite={isMeWriter(employee.initialStep)}
+            />
+          ) : (
+            <div>Loading...</div>
+          )}
+          {employee.docUploadStep ? (
+            <UploadCard
+              uploadStep={employee.docUploadStep}
+              canWrite={isMeWriter(employee.docUploadStep)}
+            />
+          ) : (
+            <div>Loading...</div>
+          )}
+          {employee.finalStep ? (
+            <ConfirmationCard
+              finalStep={employee.finalStep}
+              editable={isMeWriter(employee.finalStep)}
+            />
+          ) : (
+            <div>Loading...</div>
+          )}
+        </Stack>
+      )}
+    </>
+  );
+}

examples/onboarding/src/pages/NewEmployee.tsx

@@ -0,0 +1,89 @@
+import { Button } from "@/components/Button.tsx";
+import { NavigateBack } from "@/components/NavigateBack.tsx";
+import { Stack } from "@/components/Stack.tsx";
+import { TextInput } from "@/components/TextInput.tsx";
+import { useAccount, useCoState } from "@/main.tsx";
+import { Group, ID } from "jazz-tools";
+import { useCallback, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import {
+  CoDocUploadStep,
+  CoEmployee,
+  CoFinalStep,
+  CoInitialStep,
+  EmployeeCoList,
+} from "../schema.ts";
+
+export function NewEmployee({
+  employeeListCoId,
+}: {
+  employeeListCoId: ID<EmployeeCoList>;
+}) {
+  const navigate = useNavigate();
+  const { me } = useAccount();
+
+  const employees = useCoState(EmployeeCoList, employeeListCoId, [{}]);
+
+  const [employeeName, setEmployeeName] = useState<string>("");
+
+  const createEmployee = useCallback(() => {
+    if (!employees) return;
+
+    const writerGroup = Group.create({ owner: me });
+    const readerGroup = Group.create({ owner: me });
+    readerGroup.addMember("everyone", "reader");
+
+    const initialStep = CoInitialStep.create(
+      { done: false, type: "initial" },
+      { owner: writerGroup },
+    );
+
+    const docUploadStep = CoDocUploadStep.create(
+      { done: false, prevStep: initialStep, type: "upload" },
+      { owner: writerGroup },
+    );
+
+    const finalStep = CoFinalStep.create(
+      { done: false, prevStep: docUploadStep, type: "final" },
+      { owner: readerGroup },
+    );
+
+    const employee = CoEmployee.create(
+      {
+        name: employeeName,
+        initialStep,
+        docUploadStep,
+        finalStep,
+      },
+      { owner: writerGroup },
+    );
+
+    employees.push(employee);
+    setEmployeeName("");
+  }, [employeeName, employees]);
+
+  return (
+    <div className="w-96">
+      <Stack>
+        <NavigateBack />
+        <form>
+          <TextInput
+            label="Employee name"
+            id="employee-name"
+            value={employeeName}
+            onChange={({ target: { value } }) => setEmployeeName(value)}
+          />
+        </form>
+
+        <Button
+          disabled={!employeeName}
+          onClick={() => {
+            createEmployee();
+            navigate("/");
+          }}
+          text="Create Employee"
+        />
+      </Stack>
+    </div>
+  );
+}

examples/onboarding/src/schema.ts

@@ -0,0 +1,78 @@
+import {
+  Account,
+  CoList,
+  CoMap,
+  ImageDefinition,
+  Profile,
+  co,
+} from "jazz-tools";
+
+type Steps = "initial" | "upload" | "final";
+
+interface Step {
+  type: Steps;
+  prevStep: ReturnType<typeof co.ref> | undefined;
+  done: boolean;
+
+  isCurrentStep(): boolean;
+}
+
+export class CoInitialStep extends CoMap implements Step {
+  type = co.literal("initial");
+  ssn? = co.string;
+  address? = co.string;
+  done = co.boolean;
+  prevStep = co.null;
+  isCurrentStep() {
+    return !this.done;
+  }
+}
+
+export class CoDocUploadStep extends CoMap implements Step {
+  type = co.literal("upload");
+  prevStep = co.ref(CoInitialStep);
+  photo = co.ref(ImageDefinition, { optional: true });
+  done = co.boolean;
+
+  isCurrentStep() {
+    return !!(this.prevStep?.done && !this.done);
+  }
+}
+
+export class CoFinalStep extends CoMap implements Step {
+  type = co.literal("final");
+  prevStep = co.ref(CoDocUploadStep);
+  done = co.boolean;
+
+  isCurrentStep() {
+    return !!(this.prevStep?.done && !this.done);
+  }
+}
+
+export class CoEmployee extends CoMap {
+  name = co.string;
+  deleted? = co.boolean;
+  initialStep = co.ref(CoInitialStep);
+  docUploadStep = co.ref(CoDocUploadStep);
+  finalStep = co.ref(CoFinalStep);
+}
+
+export class EmployeeCoList extends CoList.Of(co.ref(CoEmployee)) {}
+
+export class HRProfile extends Profile {
+  employees = co.ref(EmployeeCoList);
+}
+
+export class HRAccount extends Account {
+  profile = co.ref(HRProfile)!;
+
+  migrate(this: HRAccount, creationProps?: { name: string }) {
+    super.migrate(creationProps);
+
+    if (!this.profile._refs.employees) {
+      this.profile.employees = EmployeeCoList.create([], {
+        owner: this.profile._owner,
+      });
+    }
+  }
+}

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

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

examples/onboarding/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

examples/onboarding/tests/onboardingFlow.spec.ts

@@ -0,0 +1,117 @@
+import {
+  Browser,
+  BrowserContext,
+  Page,
+  chromium,
+  expect,
+  test,
+} from "@playwright/test";
+import { EmployeeOnboardingPage } from "./pages/EmployeeOnboardingPage";
+import { HomePage } from "./pages/HomePage";
+import { LoginPage } from "./pages/LoginPage";
+
+async function scrollToBottom(page: Page) {
+  await page.evaluate(() => {
+    window.scrollTo(0, document.body.scrollHeight);
+  });
+}
+
+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;
+  let writerContext: BrowserContext;
+
+  test.beforeAll(async () => {
+    browser = await chromium.launch();
+    adminContext = await browser.newContext();
+    writerContext = await browser.newContext();
+  });
+
+  test.afterAll(async () => {
+    await adminContext.close();
+    await writerContext.close();
+    await browser.close();
+  });
+
+  test("Create and delete flow", async () => {
+    const adminPage = await adminContext.newPage();
+    await login({ page: adminPage, userName: "HR specialist" });
+    const adminHomePage = new HomePage(adminPage);
+    await adminHomePage.createEmployee("Paul");
+    await adminHomePage.createEmployee("Sean");
+    await adminHomePage.expectEmployee(["Sean", "admin"]);
+    await adminHomePage.expectEmployee(["Paul", "admin"]);
+    await adminHomePage.deleteEmployee("Sean");
+    await adminHomePage.expectEmployeeDeleted("Sean");
+
+    await adminPage.close();
+  });
+
+  test("Onboard flow", async () => {
+    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 });
+
+    const adminHomePage = new HomePage(adminPage);
+    await adminHomePage.createEmployee("Paul");
+    await adminHomePage.expectEmployee(["Paul", "admin"]);
+    await adminHomePage.navigateToEmployeeOnboardingPage("Paul");
+    const adminOnboardingPage = new EmployeeOnboardingPage(adminPage);
+
+    // create invitation
+    const invitation = await adminOnboardingPage.getShareLink();
+
+    // Wait for the invitation to be synced
+    await writerPage.waitForTimeout(3000);
+
+    //fill out by invitee (writer)
+    await writerPage.goto(invitation);
+
+    const writerHomePage = new HomePage(writerPage);
+    await writerHomePage.expectEmployee(["Paul", "write"]);
+    await writerHomePage.navigateToEmployeeOnboardingPage("Paul");
+    const writerOnboardingPage = new EmployeeOnboardingPage(writerPage);
+    await writerOnboardingPage.expectEmployeeName("Paul");
+    await writerOnboardingPage.fillPersonalDetailsCardAndSave(
+      "123-45-6789",
+      "123 Elm Street",
+    );
+    await writerOnboardingPage.fillUploadCardAndSave(
+      "./public/jazz-logo-low-res.jpg",
+    );
+
+    // invitee cannot confirm the onboarding completion
+    expect(
+      writerOnboardingPage.finalConfirmationButton.isDisabled(),
+    ).toBeTruthy();
+
+    // final confirmation step by admin
+    await scrollToBottom(adminPage);
+    await adminOnboardingPage.finalConfirmationButton.click();
+    await adminOnboardingPage.backButton.click();
+    await adminHomePage.expectOnboardingCompleteForEmployee("Paul");
+  });
+});

examples/onboarding/tests/pages/EmployeeOnboardingPage.ts

@@ -0,0 +1,92 @@
+import { Locator, Page, expect } from "@playwright/test";
+
+export class EmployeeOnboardingPage {
+  readonly page: Page;
+  readonly shareButton: Locator;
+  readonly backButton: Locator;
+  readonly logoutButton: Locator;
+  readonly finalConfirmationButton: Locator;
+  readonly fileInput: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.shareButton = page.getByRole("button", {
+      name: /invite a co-worker/i,
+    });
+    this.backButton = page.getByRole("button", {
+      name: /back/i,
+    });
+    this.logoutButton = page.getByRole("button", {
+      name: /log out/i,
+    });
+    this.finalConfirmationButton = this.page.getByRole("button", {
+      name: /confirmation by admin/i,
+    });
+
+    this.fileInput = page.getByTestId("file-upload");
+  }
+
+  async uploadFile(value: string) {
+    // Start waiting for file chooser before clicking. Note no await.
+    const fileChooserPromise = this.page.waitForEvent("filechooser");
+
+    await this.fileInput.click();
+
+    const fileChooser = await fileChooserPromise;
+    await fileChooser.setFiles(value);
+  }
+
+  async expectEmployeeName(name: string) {
+    await expect(
+      this.page.getByRole("heading", {
+        name: name,
+      }),
+    ).toBeVisible();
+  }
+
+  async fillPersonalDetailsCardAndSave(ssn: string, address: string) {
+    const nextStepButton = this.page.getByRole("button", {
+      name: /upload step >/i,
+    });
+    await expect(nextStepButton).toBeDisabled();
+
+    const ssnInput = this.page.getByLabel(/Social Security Number/i);
+    await ssnInput.fill(ssn);
+
+    const addressInput = this.page.getByLabel(/Address/i);
+    await addressInput.fill(address);
+
+    // save and hide the button
+    await expect(nextStepButton).toBeEnabled();
+    await nextStepButton.click();
+    await expect(nextStepButton).not.toBeVisible();
+  }
+
+  async fillUploadCardAndSave(file: string) {
+    const nextStepButton = this.page.getByRole("button", {
+      name: /confirmation step >/i,
+    });
+    await expect(nextStepButton).toBeDisabled();
+
+    await this.uploadFile(file);
+    await expect(nextStepButton).toBeEnabled();
+    await nextStepButton.click();
+    await expect(nextStepButton).not.toBeVisible();
+  }
+
+  async getShareLink() {
+    await this.shareButton.click();
+
+    const inviteUrl = await this.page.evaluate(() =>
+      navigator.clipboard.readText(),
+    );
+
+    expect(inviteUrl).toBeTruthy();
+
+    return inviteUrl;
+  }
+
+  async logout() {
+    await this.logoutButton.click();
+  }
+}

examples/onboarding/tests/pages/HomePage.ts

@@ -0,0 +1,66 @@
+import { Locator, Page, expect } from "@playwright/test";
+import { NewEmployeePage } from "./NewEmployeePage";
+
+export class HomePage {
+  readonly page: Page;
+  readonly newEmployeeLink: Locator;
+  readonly logoutButton: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.newEmployeeLink = page.getByRole("button", {
+      name: "Add New Employee",
+    });
+    this.logoutButton = page.getByRole("button", {
+      name: "Log Out",
+    });
+  }
+
+  async expectEmployee([name, role]: [string, string]) {
+    const liElement = this.page.locator(
+      `li:has-text("${name}"):has-text("${role}")`,
+    );
+    await expect(liElement).toBeVisible();
+  }
+
+  async deleteEmployee(name: string) {
+    const liElement = this.page.locator(`li:has-text("${name}")`);
+    const deleteIcon = liElement.locator('span:has-text("🗑")');
+    await deleteIcon.click();
+  }
+
+  async expectOnboardingCompleteForEmployee(name: string) {
+    const liElement = this.page.locator(`li:has-text("${name}")`);
+    const completionIcon = liElement.locator('span:has-text("✅")');
+    await expect(completionIcon).toBeVisible();
+  }
+
+  async expectEmployeeDeleted(name: string) {
+    const liElement = this.page.locator(`li:has-text("${name}")`);
+    await expect(liElement).not.toBeVisible();
+  }
+
+  async navigateToEmployeeOnboardingPage(name: string) {
+    await this.page
+      .getByRole("link", {
+        name,
+      })
+      .click();
+  }
+
+  async navigateToNewEmployee() {
+    await this.newEmployeeLink.click();
+  }
+
+  async createEmployee(name: string) {
+    await this.navigateToNewEmployee();
+    const newEmployeePage = new NewEmployeePage(this.page);
+
+    await newEmployeePage.fillEmployeeName(name);
+    await newEmployeePage.submit();
+  }
+
+  async logout() {
+    await this.logoutButton.click();
+  }
+}

examples/onboarding/tests/pages/LoginPage.ts

@@ -0,0 +1,40 @@
+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(url: string) {
+    await this.page.goto(url);
+  }
+
+  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/tests/pages/NewEmployeePage.ts

@@ -0,0 +1,24 @@
+import { Locator, Page } from "@playwright/test";
+
+export class NewEmployeePage {
+  readonly page: Page;
+  readonly employeeNameInput: Locator;
+  readonly submitButton: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.employeeNameInput = page.getByLabel(/employee name/i);
+    this.submitButton = page.getByRole("button", {
+      name: /create employee/i,
+    });
+  }
+
+  async fillEmployeeName(value: string) {
+    await this.employeeNameInput.clear();
+    await this.employeeNameInput.fill(value);
+  }
+
+  async submit() {
+    await this.submitButton.click();
+  }
+}