more cleanup

[react native] Fix permissions of messages and fix chat loading

.changeset/config.json

@@ -6,18 +6,23 @@
   "linked": [
     [
       "cojson",
-      "jazz-tools",
-      "jazz-browser",
-      "jazz-browser-media-images",
-      "jazz-browser-auth-clerk",
-      "jazz-react-auth-clerk",
-      "jazz-react",
-      "jazz-react-native",
-      "jazz-nodejs",
-      "jazz-run",
-      "cojson-transport-ws",
+      "cojson-storage",
       "cojson-storage-indexeddb",
-      "cojson-storage-sqlite"
+      "cojson-storage-sqlite",
+      "cojson-transport-ws",
+      "jazz-browser",
+      "jazz-browser-auth-clerk",
+      "jazz-browser-media-images",
+      "jazz-nodejs",
+      "jazz-react",
+      "jazz-react-auth-clerk",
+      "jazz-react-native",
+      "jazz-react-native-auth-clerk",
+      "jazz-react-native-media-images",
+      "jazz-run",
+      "jazz-svelte",
+      "jazz-tools",
+      "jazz-vue"
     ]
   ],
   "access": "public",

.changeset/healthy-pianos-rest.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": patch
+---
+
+Return field name on \_edits

.changeset/loud-llamas-compare.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": patch
+---
+
+Simplify the .create calls by accepting directly "Account | Group" as second param

.github/workflows/build-examples.yaml

@@ -11,12 +11,15 @@ jobs:
       matrix:
         example: [
           "chat",
-          "chat-clerk",
+          "clerk",
+          "passkey",
           "inspector",
           "music-player",
           "password-manager",
           "pets",
+          "reactions",
           "todo",
+          "onboarding",
         ]
 
     steps:
@@ -55,4 +58,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: ["tests/e2e", "examples/chat", "examples/file-share-svelte", "examples/form", "examples/music-player", "examples/pets", "examples/onboarding"]
 
     steps:
       - uses: actions/checkout@v3
@@ -41,20 +41,16 @@ jobs:
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
-      
+
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
       - name: Pnpm Build
         run: pnpm turbo build
         working-directory: ./${{ matrix.project }}
-      
-      - name: Build jazz-run
-        run: pnpm exec turbo build && chmod +x dist/index.js;
-        working-directory: ./packages/jazz-run
 
       - name: Install Playwright Browsers
-        run: pnpm exec playwright install --with-deps
+        run: pnpm exec playwright install
         working-directory: ./${{ matrix.project }}
 
       - name: Run Playwright tests

.github/workflows/release.yml

@@ -4,6 +4,13 @@ on:
   push:
     branches:
       - main
+  workflow_dispatch:
+    inputs:
+      debug_enabled:
+        type: boolean
+        description: "Run tmate session for debugging"
+        required: false
+        default: false
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 
@@ -48,4 +55,11 @@ jobs:
           publish: pnpm release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      # Enable tmate debugging only if the workflow is manually triggered, debug_enabled is true, and the workflow failed
+      - name: Setup tmate session for debugging
+        if: ${{ failure() && github.event_name == 'workflow_dispatch' && inputs.debug_enabled }}
+        uses: mxschmitt/action-tmate@v3
+        with:
+          timeout-minutes: 15

.github/workflows/unit-test.yml

@@ -41,7 +41,7 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Pnpm Build
-        run: pnpm turbo build
+        run: pnpm turbo build --filter="./packages/*"
 
       - name: Unit Tests
         run: pnpm test:ci

.gitignore

@@ -5,6 +5,7 @@ docsTmp
 .DS_Store
 .turbo
 coverage
+.direnv
 
 # Next.js
 **/.next
@@ -15,4 +16,6 @@ coverage
 # Playwright
 test-results
 
-.husky
+.husky
+
+.vscode/settings.json

.node-version

@@ -1 +1 @@
-20
+22

.nvmrc

@@ -0,0 +1 @@
+22

.vscode/settings.json

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

CODE_OF_CONDUCT.md

@@ -59,7 +59,7 @@ representative at an online or offline event.
 ## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported to [the community leaders responsible for enforcement](mailto:hello@gcmp.io).
+reported to [the community leaders responsible for enforcement](mailto:hello@garden.co).
 All complaints will be reviewed and investigated promptly and fairly.
 
 All community leaders are obligated to respect the privacy and security of the

CONTRIBUTING.md

@@ -6,7 +6,7 @@ Thank you for considering contributing to Jazz! Jazz is an open-source framework
 
 ### 1. Reporting Bugs
 
-If you find a bug, please [open an issue with as much detail as possible](https://github.com/gardencmp/jazz/issues). Include:
+If you find a bug, please [open an issue with as much detail as possible](https://github.com/garden-co/jazz/issues). Include:
 
 - A clear and descriptive title.
 - Steps to reproduce the issue.
@@ -40,7 +40,7 @@ You'll need Node.js 20.x or 22.x installed (we're working on support for 23.x),
 
 1. **Clone the repository**:
    ```bash
-   git clone https://github.com/gardencmp/jazz.git
+   git clone https://github.com/garden-co/jazz.git
    ```
 
 2. **Install dependencies**:

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://garden.co/news)
 
-Copyright 2024 — Garden Computing, Inc.
+Copyright 2024 — Garden Computing, Inc.

biome.json

@@ -7,7 +7,14 @@
   },
   "files": {
     "ignoreUnknown": false,
-    "ignore": ["jazz-tools.json"]
+    "ignore": [
+      "jazz-tools.json",
+      "**/ios/**",
+      "**/android/**",
+      "packages/jazz-svelte/**",
+      "examples/*svelte*/**",
+      "examples/briscola/src/routeTree.gen.ts"
+    ]
   },
   "formatter": {
     "enabled": true,
@@ -19,7 +26,53 @@
   "linter": {
     "enabled": false,
     "rules": {
-      "recommended": true
+      "recommended": true,
+      "correctness": {
+        "useImportExtensions": {
+          "level": "error",
+          "options": {
+            "suggestedExtensions": {
+              "ts": {
+                "module": "js",
+                "component": "jsx"
+              }
+            }
+          }
+        }
+      }
     }
-  }
+  },
+  "overrides": [
+    {
+      "include": ["packages/**/src/**"],
+      "linter": {
+        "enabled": true,
+        "rules": {
+          "recommended": false
+        }
+      }
+    },
+    {
+      "include": ["packages/**/src/tests/**", "packages/**/src/test/**"],
+      "linter": {
+        "rules": {
+          "correctness": {
+            "useImportExtensions": "off"
+          }
+        }
+      }
+    },
+    {
+      "include": ["packages/cojson-storage-indexeddb/**"],
+      "linter": {
+        "enabled": true,
+        "rules": {
+          "recommended": true,
+          "suspicious": {
+            "noExplicitAny": "info"
+          }
+        }
+      }
+    }
+  ]
 }

e2e/BinaryCoStream/CHANGELOG.md

@@ -1,117 +0,0 @@
-# @jazz-e2e/binarycostream
-
-## 0.0.95
-
-### Patch Changes
-
-- Updated dependencies [d433cf4]
-  - cojson@0.8.17
-  - jazz-react@0.8.17
-  - jazz-tools@0.8.17
-
-## 0.0.94
-
-### Patch Changes
-
-- Updated dependencies [2af107c]
-- Updated dependencies [b934fab]
-  - jazz-react@0.8.16
-  - cojson@0.8.16
-  - jazz-tools@0.8.16
-
-## 0.0.93
-
-### Patch Changes
-
-- Updated dependencies [cce679b]
-  - jazz-tools@0.8.15
-  - jazz-react@0.8.15
-
-## 0.0.92
-
-### Patch Changes
-
-- Updated dependencies [36273b3]
-  - jazz-tools@0.8.14
-  - jazz-react@0.8.14
-
-## 0.0.91
-
-### Patch Changes
-
-- Updated dependencies [fd011d7]
-  - jazz-tools@0.8.13
-  - jazz-react@0.8.13
-
-## 0.0.90
-
-### Patch Changes
-
-- Updated dependencies [6ed75eb]
-- Updated dependencies [3cc6aee]
-  - cojson@0.8.12
-  - jazz-react@0.8.12
-  - jazz-tools@0.8.12
-
-## 0.0.89
-
-### Patch Changes
-
-- Updated dependencies [1ed4ab5]
-  - cojson@0.8.11
-  - jazz-react@0.8.11
-  - jazz-tools@0.8.11
-
-## 0.0.88
-
-### Patch Changes
-
-- jazz-react@0.8.7
-
-## 0.0.87
-
-### Patch Changes
-
-- jazz-react@0.8.6
-
-## 0.0.86
-
-### Patch Changes
-
-- Updated dependencies [c3f4e6b]
-- Updated dependencies [d9152ed]
-  - jazz-tools@0.8.5
-  - cojson@0.8.5
-  - jazz-react@0.8.5
-
-## 0.0.85
-
-### Patch Changes
-
-- Updated dependencies
-  - hash-slash@0.2.1
-
-## 0.0.84
-
-### Patch Changes
-
-- Updated dependencies
-  - cojson@0.8.3
-  - jazz-react@0.8.3
-  - jazz-tools@0.8.3
-
-## 0.0.83
-
-### Patch Changes
-
-- Updated dependencies [a075f90]
-  - jazz-tools@0.8.2
-  - jazz-react@0.8.2
-
-## 0.0.82
-
-### Patch Changes
-
-- Updated dependencies
-  - jazz-tools@0.8.1
-  - jazz-react@0.8.1

e2e/BinaryCoStream/index.html

@@ -1,14 +0,0 @@
-<!doctype html>
-<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 BinaryCoStream Tests</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/app.tsx"></script>
-  </body>
-</html>

e2e/BinaryCoStream/package.json

@@ -1,33 +0,0 @@
-{
-  "name": "@jazz-e2e/binarycostream",
-  "private": true,
-  "version": "0.0.95",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "format-and-lint": "biome check .",
-    "format-and-lint:fix": "biome check . --write",
-    "build": "tsc && vite build",
-    "preview": "vite preview",
-    "test": "playwright test",
-    "test:ui": "playwright test --ui"
-  },
-  "dependencies": {
-    "cojson": "workspace:0.8.17",
-    "hash-slash": "workspace:0.2.1",
-    "is-ci": "^3.0.1",
-    "jazz-react": "workspace:0.8.17",
-    "jazz-tools": "workspace:0.8.17",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@playwright/test": "^1.46.1",
-    "@types/node": "^22.5.1",
-    "@types/react": "^18.2.19",
-    "@types/react-dom": "^18.2.7",
-    "@vitejs/plugin-react-swc": "^3.3.2",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.10"
-  }
-}

e2e/BinaryCoStream/src/DownloaderPeer.tsx

@@ -1,46 +0,0 @@
-import { Account, BinaryCoStream, 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,
-    {},
-  );
-
-  uploadedFile.coMapDownloaded = true;
-
-  await BinaryCoStream.loadAsBlob(uploadedFile._refs.file.id, me);
-
-  return uploadedFile;
-}
-
-export function DownloaderPeer(props: { testCoMapId: ID<UploadedFile> }) {
-  const account = useAccount();
-  const testCoMap = useCoState(UploadedFile, props.testCoMapId, {});
-
-  useEffect(() => {
-    getUploadedFile(account.me, props.testCoMapId).then((value) => {
-      value.syncCompleted = true;
-    });
-  }, []);
-
-  return (
-    <>
-      <h1>Downloader Peer</h1>
-      <div>Fetching: {props.testCoMapId}</div>
-      <div data-testid="result">
-        Covalue: {Boolean(testCoMap?.id) ? "Downloaded" : "Not Downloaded"}
-      </div>
-      <div data-testid="result">
-        File:{" "}
-        {Boolean(testCoMap?.syncCompleted) ? "Downloaded" : "Not Downloaded"}
-      </div>
-    </>
-  );
-}

e2e/BinaryCoStream/src/app.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { DownloaderPeer } from "./DownloaderPeer";
-import { UploaderPeer } from "./UploaderPeer";
-import { AuthAndJazz } from "./jazz";
-import { getValueId } from "./lib/searchParams";
-
-function Main() {
-  const valueId = getValueId();
-
-  if (valueId) {
-    return <DownloaderPeer testCoMapId={valueId} />;
-  }
-
-  return <UploaderPeer />;
-}
-
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <AuthAndJazz>
-      <Main />
-    </AuthAndJazz>
-  </React.StrictMode>,
-);

e2e/BinaryCoStream/src/jazz.tsx

@@ -1,39 +0,0 @@
-import { createJazzReactApp, useDemoAuth } from "jazz-react";
-import { useEffect, useRef } from "react";
-import { getValueId } from "./lib/searchParams";
-
-const key = getValueId()
-  ? `downloader-e2e@jazz.tools`
-  : `uploader-e2e@jazz.tools`;
-
-const localSync = new URLSearchParams(location.search).has("localSync");
-
-const Jazz = createJazzReactApp();
-
-export const { useAccount, useCoState } = Jazz;
-
-export function AuthAndJazz({ children }: { children: React.ReactNode }) {
-  const [auth, state] = useDemoAuth();
-
-  const signedUp = useRef(false);
-
-  useEffect(() => {
-    if (state.state === "ready" && !signedUp.current) {
-      state.signUp("Mister X");
-      signedUp.current = true;
-    }
-  }, [state.state]);
-
-  return (
-    <Jazz.Provider
-      auth={auth}
-      peer={
-        localSync
-          ? `ws://localhost:4200?key=${key}`
-          : `wss://cloud.jazz.tools/?key=${key}`
-      }
-    >
-      {children}
-    </Jazz.Provider>
-  );
-}

e2e/CoValues/CHANGELOG.md

@@ -1,109 +0,0 @@
-# @jazz-e2e/covalues
-
-## 0.0.94
-
-### Patch Changes
-
-- Updated dependencies [d433cf4]
-  - cojson@0.8.17
-  - jazz-react@0.8.17
-  - jazz-tools@0.8.17
-
-## 0.0.93
-
-### Patch Changes
-
-- Updated dependencies [2af107c]
-- Updated dependencies [b934fab]
-  - jazz-react@0.8.16
-  - cojson@0.8.16
-  - jazz-tools@0.8.16
-
-## 0.0.92
-
-### Patch Changes
-
-- Updated dependencies [cce679b]
-  - jazz-tools@0.8.15
-  - jazz-react@0.8.15
-
-## 0.0.91
-
-### Patch Changes
-
-- Updated dependencies [36273b3]
-  - jazz-tools@0.8.14
-  - jazz-react@0.8.14
-
-## 0.0.90
-
-### Patch Changes
-
-- Updated dependencies [fd011d7]
-  - jazz-tools@0.8.13
-  - jazz-react@0.8.13
-
-## 0.0.89
-
-### Patch Changes
-
-- Updated dependencies [6ed75eb]
-- Updated dependencies [3cc6aee]
-  - cojson@0.8.12
-  - jazz-react@0.8.12
-  - jazz-tools@0.8.12
-
-## 0.0.88
-
-### Patch Changes
-
-- Updated dependencies [1ed4ab5]
-  - cojson@0.8.11
-  - jazz-react@0.8.11
-  - jazz-tools@0.8.11
-
-## 0.0.87
-
-### Patch Changes
-
-- jazz-react@0.8.7
-
-## 0.0.86
-
-### Patch Changes
-
-- jazz-react@0.8.6
-
-## 0.0.85
-
-### Patch Changes
-
-- Updated dependencies [c3f4e6b]
-- Updated dependencies [d9152ed]
-  - jazz-tools@0.8.5
-  - cojson@0.8.5
-  - jazz-react@0.8.5
-
-## 0.0.84
-
-### Patch Changes
-
-- Updated dependencies
-  - hash-slash@0.2.1
-
-## 0.0.83
-
-### Patch Changes
-
-- Updated dependencies
-  - cojson@0.8.3
-  - jazz-react@0.8.3
-  - jazz-tools@0.8.3
-
-## 0.0.82
-
-### Patch Changes
-
-- Updated dependencies [a075f90]
-  - jazz-tools@0.8.2
-  - jazz-react@0.8.2

e2e/CoValues/src/app.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { RouterProvider, createBrowserRouter } from "react-router-dom";
-import { AuthAndJazz } from "./jazz";
-import { ResumeSyncState } from "./pages/ResumeSyncState";
-import { TestInput } from "./pages/TestInput";
-
-const router = createBrowserRouter([
-  {
-    path: "/test-input",
-    element: <TestInput />,
-  },
-  {
-    path: "/resume-sync",
-    element: <ResumeSyncState />,
-  },
-  {
-    path: "/",
-    element: <TestInput />,
-  },
-]);
-
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <AuthAndJazz>
-      <RouterProvider router={router} />
-    </AuthAndJazz>
-  </React.StrictMode>,
-);

e2e/CoValues/vite.config.ts

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

examples/book-shelf/CHANGELOG.md

@@ -1,5 +1,242 @@
 # jazz-example-book-shelf
 
+## 0.1.38
+
+### Patch Changes
+
+- jazz-react@0.8.50
+- jazz-tools@0.8.50
+- jazz-browser-media-images@0.8.50
+
+## 0.1.37
+
+### Patch Changes
+
+- jazz-react@0.8.49
+- jazz-tools@0.8.49
+- jazz-browser-media-images@0.8.49
+
+## 0.1.36
+
+### Patch Changes
+
+- Updated dependencies [635e824]
+- Updated dependencies [0a85982]
+  - jazz-tools@0.8.48
+  - jazz-browser-media-images@0.8.48
+  - jazz-react@0.8.48
+
+## 0.1.35
+
+### Patch Changes
+
+- Updated dependencies [fa41f8e]
+- Updated dependencies [88d7d9a]
+- Updated dependencies [60e35ea]
+  - jazz-tools@0.8.45
+  - jazz-react@0.8.45
+  - jazz-browser-media-images@0.8.45
+
+## 0.1.34
+
+### Patch Changes
+
+- jazz-react@0.8.44
+- jazz-tools@0.8.44
+- jazz-browser-media-images@0.8.44
+
+## 0.1.33
+
+### Patch Changes
+
+- jazz-react@0.8.41
+- jazz-tools@0.8.41
+- jazz-browser-media-images@0.8.41
+
+## 0.1.32
+
+### Patch Changes
+
+- jazz-browser-media-images@0.8.40
+- jazz-react@0.8.40
+
+## 0.1.31
+
+### Patch Changes
+
+- Updated dependencies [249eecb]
+  - jazz-tools@0.8.39
+  - jazz-browser-media-images@0.8.39
+  - jazz-react@0.8.39
+
+## 0.1.30
+
+### Patch Changes
+
+- jazz-react@0.8.38
+- jazz-tools@0.8.38
+- jazz-browser-media-images@0.8.38
+
+## 0.1.29
+
+### Patch Changes
+
+- jazz-react@0.8.37
+- jazz-tools@0.8.37
+- jazz-browser-media-images@0.8.37
+
+## 0.1.28
+
+### Patch Changes
+
+- Updated dependencies [441fe27]
+  - jazz-tools@0.8.36
+  - jazz-react@0.8.36
+  - jazz-browser-media-images@0.8.36
+
+## 0.1.27
+
+### Patch Changes
+
+- Updated dependencies [9212ab8]
+- Updated dependencies [8b87117]
+  - jazz-react@0.8.35
+  - jazz-tools@0.8.35
+  - jazz-browser-media-images@0.8.35
+
+## 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/Dockerfile

@@ -1,4 +1,4 @@
 FROM caddy:2.7.3-alpine
-LABEL org.opencontainers.image.source="https://github.com/gardencmp/jazz"
+LABEL org.opencontainers.image.source="https://github.com/garden-co/jazz"
 
 COPY ./dist /usr/share/caddy/

examples/book-shelf/README.md

@@ -1,33 +1,30 @@
-# Jazz Book Shelf Example
+# Book shelf example with Jazz and Next.js
 
-Live version: [https://books-demo.jazz.tools](https://books-demo.jazz.tools)
+This is an example of a book shelf where you can add and review books.
+It shows you how to create and edit data, upload images, and share data publicly.
+
+Live version: https://books-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`
-
-Install dependencies:
+(This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
 
+Start by downloading the [jazz repository](https://github.com/garden-co/jazz):
 ```bash
-pnpm install
+npx degit gardencmp/jazz jazz
 ```
 
-Go to the `examples/book-shelf` directory.
-
+Go to the book-shelf example directory:
 ```bash
-cd examples/book-shelf
+cd jazz/examples/book-shelf
 ```
 
-Install dependencies:
-
+Install and build dependencies:
 ```bash
-pnpm install
+pnpm i && npx turbo build
 ```
 
 Start the dev server:
-
 ```bash
 pnpm dev
 ```
@@ -36,8 +33,9 @@ pnpm dev
 
 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/components/JazzAndAuth.tsx](./src/2_main.tsx).
+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/components/JazzAndAuth.tsx](./src/components/JazzAndAuth.tsx).

examples/book-shelf/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jazz-example-book-shelf",
-  "version": "0.1.10",
+  "version": "0.1.38",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -11,19 +11,19 @@
   },
   "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.50",
+    "jazz-react": "workspace:0.8.50",
+    "jazz-tools": "workspace:0.8.50",
     "next": "14.2.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@types/node": "^22.5.1",
-    "@types/react": "^18.2.19",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "postcss": "^8.4.27",
-    "tailwindcss": "3.3.2",
-    "typescript": "^5.3.3"
+    "tailwindcss": "^3.4.15",
+    "typescript": "~5.6.2"
   }
 }

examples/book-shelf/src/schema.ts

@@ -31,7 +31,5 @@ export class JazzAccount extends Account {
   /** The account migration is run on account creation and on every log-in.
    *  You can use it to set up the account root and any other initial CoValues you need.
    */
-  migrate(this: JazzAccount, creationProps?: { name: string }) {
-    super.migrate(creationProps);
-  }
+  migrate() {}
 }

examples/book-shelf/vercel.json

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

examples/briscola/.env.example

@@ -0,0 +1,2 @@
+VITE_JAZZ_WORKER_ACCOUNT=
+JAZZ_WORKER_SECRET=

examples/briscola/.gitignore

@@ -0,0 +1,21 @@
+# Local
+.DS_Store
+*.local
+*.log*
+
+# Dist
+node_modules
+dist/
+.vinxi
+.output
+.vercel
+.netlify
+.wrangler
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea
+
+
+.env

examples/briscola/README.md

@@ -0,0 +1,38 @@
+# Jazz Briscola
+
+This is a simplified implementation of the Italian card game [Briscola](https://en.wikipedia.org/wiki/Briscola), written using Jazz.
+
+While most Jazz apps don't need workers, in this game players must not be able to see each other's cards. This is a good example of when a worker is useful. In this case, the worker acts as a dealer, revealing the cards to each player as needed.
+
+In general this showcases how workers can be used to moderate access to coValues.
+
+The communication between the dealer and the players is done using the [Inbox API](#), which is an abstraction over the Jazz API that allows for easy communication between workers and clients.
+
+## Setup
+
+First of we need to create a new account for the dealer:
+
+```bash
+pnpx jazz-run account create --name "Dealer"
+```
+
+This will print an account ID and a secret key:
+
+```
+# Credentials for Jazz account "Dealer":
+JAZZ_WORKER_ACCOUNT=co_xxxx
+JAZZ_WORKER_SECRET=sealerSecret_xxx
+```
+use these to create a `.env` file based on the `.env.example` file and fill in the `VITE_JAZZ_WORKER_ACCOUNT` and `JAZZ_WORKER_SECRET` fields.
+
+We can then start the dealer worker:
+
+```bash
+pnpm dev:worker
+```
+
+and the client:
+
+```bash
+pnpm dev
+```

examples/briscola/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

examples/briscola/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en" class="bg-green-800">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Jazz Briscola</title>
+  </head>
+  <body>
+    <div id="app" class="min-h-screen"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

examples/briscola/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "jazz-example-briscola",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "dev": "vite --port=3001",
+    "dev:worker": "tsx --env-file=.env ./src/worker.ts",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "vite"
+  },
+  "devDependencies": {
+    "@tanstack/router-plugin": "^1.87.13",
+    "@types/node": "^22.10.2",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.27",
+    "tailwindcss": "^3.4.15",
+    "typescript": "~5.6.2",
+    "vite": "^5.4.10"
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-radio-group": "^1.2.2",
+    "@radix-ui/react-separator": "^1.1.1",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@tanstack/react-router": "^1.87.12",
+    "@tanstack/router-devtools": "^1.87.12",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.0.0",
+    "jazz-nodejs": "workspace:*",
+    "jazz-react": "workspace:*",
+    "jazz-tools": "workspace:*",
+    "lucide-react": "^0.468.0",
+    "motion": "^11.14.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss-animate": "^1.0.7",
+    "tsx": "^4.19.2"
+  }
+}

examples/briscola/src/components/how-to-play-content.tsx

@@ -0,0 +1,119 @@
+export function HowToPlayContent() {
+  return (
+    <div className="">
+      <h3 className="font-semibold text-lg">Objective:</h3>
+      <p className="mt-2">
+        The goal is to score the most points by winning tricks containing
+        high-value cards. The game is played until all card are played.
+      </p>
+
+      <h3 className="font-semibold text-lg mt-6">The deck</h3>
+      <p className="mt-2">
+        A deck with 40 cards is used, split into four suits:
+        <ul className="list-disc list-inside">
+          <li className="list-item">Coins (Denari)</li>
+          <li className="list-item">Cups (Coppe)</li>
+          <li className="list-item">Swords (Spade)</li>
+          <li className="list-item">Clubs (Bastoni)</li>
+        </ul>
+      </p>
+      <p className="mt-2">Each suit has cards numbered from 1 to 10.</p>
+
+      <h3 className="font-semibold text-lg mt-6">Card values</h3>
+      <p className="mt-2">
+        Each card has a point value:
+        <ul className="list-disc list-inside">
+          <li className="list-item">Ace (1): 11 points</li>
+          <li className="list-item">Three (3): 10 points</li>
+          <li className="list-item">Eight (8): 2 points</li>
+          <li className="list-item">Nine (9): 3 points</li>
+          <li className="list-item">Ten (10): 4 points</li>
+          <li className="list-item">All others (2, 4-7): 0 points</li>
+        </ul>
+      </p>
+      <p className="mt-2">
+        There are <span className="font-semibold">120 total points</span> in the
+        deck.
+      </p>
+
+      <h3 className="font-semibold text-lg mt-6">Gameplay</h3>
+      <p className="mt-2">
+        <ol className="list-inside list-decimal">
+          <li>
+            <span className="font-semibold">Starting the game:</span>
+            <ul className="list-inside list-disc">
+              <li className="list-item ml-4">
+                3 cards are dealt to each player.
+              </li>
+              <li className="list-item ml-4">
+                1 card is placed face-up on the table, on the bottom of the draw
+                pile, indicating the trump suit. (Briscola)
+              </li>
+              <li className="list-item ml-4">
+                One player is randomly chosen to start the game.
+              </li>
+            </ul>
+          </li>
+
+          <li>
+            <span className="font-semibold">Starting a trick:</span>
+            <ul className="list-inside list-disc">
+              <li className="list-item ml-4">
+                Players play one card each in turn, trying to win the trick.
+              </li>
+            </ul>
+          </li>
+
+          <li>
+            <span className="font-semibold">Winning a trick:</span>
+            <ul className="list-inside list-disc">
+              <li className="list-item ml-4">
+                The highest card of the trump suit wins the trick.
+              </li>
+              <li className="list-item ml-4">
+                If no trump cards are played, the highest card of the leading
+                suit wins.
+              </li>
+              <li className="list-item ml-4">
+                The leading suit is the suit of the first card played in the
+                current trick.
+              </li>
+              <li className="list-item ml-4">
+                The winner collects the cards, which are placed face-up in their
+                scoring pile.
+              </li>
+            </ul>
+          </li>
+
+          <li>
+            <span className="font-semibold">Drawing cards:</span>
+            <ul className="list-inside list-disc">
+              <li className="list-item ml-4">
+                After each trick, a new card is dealt to each player (starting
+                with the trick winner).
+              </li>
+            </ul>
+          </li>
+
+          <li>
+            <span className="font-semibold">Continuing play:</span>
+            <ul className="list-inside list-disc">
+              <li className="list-item ml-4">
+                The winner of the previous trick leads the next round.
+              </li>
+            </ul>
+          </li>
+
+          <li>
+            <span className="font-semibold">End of the game:</span>
+            <ul className="list-inside list-disc">
+              <li className="list-item ml-4">
+                Play continues until all cards are played.
+              </li>
+            </ul>
+          </li>
+        </ol>
+      </p>
+    </div>
+  );
+}

examples/briscola/src/components/playing-card.tsx

@@ -0,0 +1,75 @@
+import { cn } from "@/lib/utils";
+import type { Card, Suit } from "@/schema";
+import type { co } from "jazz-tools";
+import { motion } from "motion/react";
+
+import bastoni from "../img/bastoni.svg?url";
+import coppe from "../img/coppe.svg?url";
+import denari from "../img/denari.svg?url";
+import spade from "../img/spade.svg?url";
+
+interface Props {
+  card: co<Card>;
+  faceDown?: boolean;
+  className?: string;
+  layoutId?: string;
+}
+export function PlayingCard({
+  card,
+  className,
+  faceDown = false,
+  layoutId,
+}: Props) {
+  const cardImage = getCardImage(card.data?.suit!);
+  if (!faceDown && card.data?.value === undefined && card.data?.suit) {
+    return null;
+  }
+
+  return (
+    <motion.div
+      className={cn(
+        "block aspect-card w-[150px] bg-white touch-none rounded-lg shadow-lg p-2 border",
+        className,
+      )}
+      style={{
+        ...(faceDown && {
+          backgroundImage: `url(https://placecats.com/150/243)`,
+          backgroundSize: "cover",
+        }),
+      }}
+      layoutId={layoutId}
+    >
+      <div className="border-zinc-400 border rounded-lg h-full px-1 flex flex-col ">
+        {!faceDown && (
+          <>
+            <div className="text-4xl font-bold text-black self-start">
+              {card.data?.value}
+            </div>
+            <div className="grow flex justify-center items-center">
+              <img
+                src={cardImage}
+                className="pointer-events-none max-h-[140px]"
+              />
+            </div>
+            <div className="text-4xl font-bold text-black rotate-180 transform self-end">
+              {card.data?.value}
+            </div>
+          </>
+        )}
+      </div>
+    </motion.div>
+  );
+}
+
+function getCardImage(suit: typeof Suit) {
+  switch (suit) {
+    case "C":
+      return coppe;
+    case "D":
+      return denari;
+    case "S":
+      return spade;
+    case "B":
+      return bastoni;
+  }
+}

examples/briscola/src/components/ui/button.tsx

@@ -0,0 +1,82 @@
+import { Slot } from "@radix-ui/react-slot";
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+import { Loader2Icon } from "lucide-react";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  loading?: boolean;
+  loadingText?: string;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      disabled,
+      asChild = false,
+      loading = false,
+      loadingText,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        disabled={loading || disabled}
+        ref={ref}
+        {...props}
+      >
+        {loading ? (
+          <>
+            <Loader2Icon className="mr-2 h-4 w-4 animate-spin" />
+            {loadingText}
+          </>
+        ) : (
+          children
+        )}
+      </Comp>
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

examples/briscola/src/components/ui/card.tsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className,
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

examples/briscola/src/components/ui/dialog.tsx

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

examples/briscola/src/components/ui/input.tsx

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

examples/briscola/src/components/ui/label.tsx

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

examples/briscola/src/components/ui/separator.tsx

@@ -0,0 +1,29 @@
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref,
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

examples/briscola/src/constants.ts

@@ -0,0 +1 @@
+export const WORKER_ID = import.meta.env.VITE_JAZZ_WORKER_ACCOUNT;

examples/briscola/src/index.css

@@ -0,0 +1,66 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply text-foreground;
+  }
+}

examples/briscola/src/jazz.tsx

@@ -0,0 +1,25 @@
+import { DemoAuthBasicUI, createJazzReactApp, useDemoAuth } from "jazz-react";
+
+const Jazz = createJazzReactApp();
+export const {
+  useAccount,
+  useCoState,
+  experimental: { useInboxSender },
+} = Jazz;
+
+export function JazzAndAuth({ children }: { children: React.ReactNode }) {
+  const [auth, authState] = useDemoAuth();
+
+  return (
+    <>
+      <Jazz.Provider
+        auth={auth}
+        // replace `you@example.com` with your email as a temporary API key
+        peer="wss://cloud.jazz.tools/?key=you@example.com"
+      >
+        {children}
+      </Jazz.Provider>
+      <DemoAuthBasicUI appName="Briscola" state={authState} />
+    </>
+  );
+}

examples/briscola/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

examples/briscola/src/main.tsx

@@ -0,0 +1,27 @@
+import { RouterProvider } from "@tanstack/react-router";
+import { createRoot } from "react-dom/client";
+import { JazzAndAuth, useAccount } from "./jazz";
+import { router } from "./router";
+
+import "./index.css";
+
+const rootElement = document.getElementById("app")!;
+
+if (!rootElement.innerHTML) {
+  const root = createRoot(rootElement);
+  root.render(<App />);
+}
+
+function App() {
+  return (
+    <JazzAndAuth>
+      <Router />
+    </JazzAndAuth>
+  );
+}
+
+function Router() {
+  const { me } = useAccount();
+
+  return <RouterProvider router={router} context={{ me }} />;
+}

examples/briscola/src/routeTree.gen.ts

@@ -0,0 +1,207 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+// Import Routes
+
+import { Route as rootRoute } from './routes/__root'
+import { Route as HowToPlayImport } from './routes/how-to-play'
+import { Route as GameImport } from './routes/game'
+import { Route as IndexImport } from './routes/index'
+import { Route as WaitingRoomWaitingRoomIdImport } from './routes/waiting-room.$waitingRoomId'
+import { Route as GameGameIdImport } from './routes/game/$gameId'
+
+// Create/Update Routes
+
+const HowToPlayRoute = HowToPlayImport.update({
+  id: '/how-to-play',
+  path: '/how-to-play',
+  getParentRoute: () => rootRoute,
+} as any)
+
+const GameRoute = GameImport.update({
+  id: '/game',
+  path: '/game',
+  getParentRoute: () => rootRoute,
+} as any)
+
+const IndexRoute = IndexImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRoute,
+} as any)
+
+const WaitingRoomWaitingRoomIdRoute = WaitingRoomWaitingRoomIdImport.update({
+  id: '/waiting-room/$waitingRoomId',
+  path: '/waiting-room/$waitingRoomId',
+  getParentRoute: () => rootRoute,
+} as any)
+
+const GameGameIdRoute = GameGameIdImport.update({
+  id: '/$gameId',
+  path: '/$gameId',
+  getParentRoute: () => GameRoute,
+} as any)
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexImport
+      parentRoute: typeof rootRoute
+    }
+    '/game': {
+      id: '/game'
+      path: '/game'
+      fullPath: '/game'
+      preLoaderRoute: typeof GameImport
+      parentRoute: typeof rootRoute
+    }
+    '/how-to-play': {
+      id: '/how-to-play'
+      path: '/how-to-play'
+      fullPath: '/how-to-play'
+      preLoaderRoute: typeof HowToPlayImport
+      parentRoute: typeof rootRoute
+    }
+    '/game/$gameId': {
+      id: '/game/$gameId'
+      path: '/$gameId'
+      fullPath: '/game/$gameId'
+      preLoaderRoute: typeof GameGameIdImport
+      parentRoute: typeof GameImport
+    }
+    '/waiting-room/$waitingRoomId': {
+      id: '/waiting-room/$waitingRoomId'
+      path: '/waiting-room/$waitingRoomId'
+      fullPath: '/waiting-room/$waitingRoomId'
+      preLoaderRoute: typeof WaitingRoomWaitingRoomIdImport
+      parentRoute: typeof rootRoute
+    }
+  }
+}
+
+// Create and export the route tree
+
+interface GameRouteChildren {
+  GameGameIdRoute: typeof GameGameIdRoute
+}
+
+const GameRouteChildren: GameRouteChildren = {
+  GameGameIdRoute: GameGameIdRoute,
+}
+
+const GameRouteWithChildren = GameRoute._addFileChildren(GameRouteChildren)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/game': typeof GameRouteWithChildren
+  '/how-to-play': typeof HowToPlayRoute
+  '/game/$gameId': typeof GameGameIdRoute
+  '/waiting-room/$waitingRoomId': typeof WaitingRoomWaitingRoomIdRoute
+}
+
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/game': typeof GameRouteWithChildren
+  '/how-to-play': typeof HowToPlayRoute
+  '/game/$gameId': typeof GameGameIdRoute
+  '/waiting-room/$waitingRoomId': typeof WaitingRoomWaitingRoomIdRoute
+}
+
+export interface FileRoutesById {
+  __root__: typeof rootRoute
+  '/': typeof IndexRoute
+  '/game': typeof GameRouteWithChildren
+  '/how-to-play': typeof HowToPlayRoute
+  '/game/$gameId': typeof GameGameIdRoute
+  '/waiting-room/$waitingRoomId': typeof WaitingRoomWaitingRoomIdRoute
+}
+
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths:
+    | '/'
+    | '/game'
+    | '/how-to-play'
+    | '/game/$gameId'
+    | '/waiting-room/$waitingRoomId'
+  fileRoutesByTo: FileRoutesByTo
+  to:
+    | '/'
+    | '/game'
+    | '/how-to-play'
+    | '/game/$gameId'
+    | '/waiting-room/$waitingRoomId'
+  id:
+    | '__root__'
+    | '/'
+    | '/game'
+    | '/how-to-play'
+    | '/game/$gameId'
+    | '/waiting-room/$waitingRoomId'
+  fileRoutesById: FileRoutesById
+}
+
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  GameRoute: typeof GameRouteWithChildren
+  HowToPlayRoute: typeof HowToPlayRoute
+  WaitingRoomWaitingRoomIdRoute: typeof WaitingRoomWaitingRoomIdRoute
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  GameRoute: GameRouteWithChildren,
+  HowToPlayRoute: HowToPlayRoute,
+  WaitingRoomWaitingRoomIdRoute: WaitingRoomWaitingRoomIdRoute,
+}
+
+export const routeTree = rootRoute
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+/* ROUTE_MANIFEST_START
+{
+  "routes": {
+    "__root__": {
+      "filePath": "__root.tsx",
+      "children": [
+        "/",
+        "/game",
+        "/how-to-play",
+        "/waiting-room/$waitingRoomId"
+      ]
+    },
+    "/": {
+      "filePath": "index.tsx"
+    },
+    "/game": {
+      "filePath": "game.tsx",
+      "children": [
+        "/game/$gameId"
+      ]
+    },
+    "/how-to-play": {
+      "filePath": "how-to-play.tsx"
+    },
+    "/game/$gameId": {
+      "filePath": "game/$gameId.tsx",
+      "parent": "/game"
+    },
+    "/waiting-room/$waitingRoomId": {
+      "filePath": "waiting-room.$waitingRoomId.tsx"
+    }
+  }
+}
+ROUTE_MANIFEST_END */

examples/briscola/src/router.tsx

@@ -0,0 +1,18 @@
+import { createRouter } from "@tanstack/react-router";
+
+import { JazzAndAuth } from "./jazz";
+import { routeTree } from "./routeTree.gen";
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+export const router = createRouter({
+  routeTree,
+  context: {
+    me: undefined!,
+  },
+  Wrap: JazzAndAuth,
+});

examples/briscola/src/routes/__root.tsx

@@ -0,0 +1,20 @@
+import type { useAccount } from "@/jazz";
+import { Outlet, createRootRouteWithContext } from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/router-devtools";
+
+interface RouterContext {
+  me: ReturnType<typeof useAccount>["me"];
+}
+
+export const Route = createRootRouteWithContext<RouterContext>()({
+  component: RootComponent,
+});
+
+function RootComponent() {
+  return (
+    <>
+      <Outlet />
+      <TanStackRouterDevtools position="bottom-right" />
+    </>
+  );
+}

examples/briscola/src/routes/game.tsx

@@ -0,0 +1,11 @@
+import { Outlet, createFileRoute, redirect } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/game")({
+  beforeLoad: async ({ context: { me } }) => {
+    if (!me) {
+      throw redirect({
+        to: "/",
+      });
+    }
+  },
+});

examples/briscola/src/routes/game/$gameId.tsx

@@ -0,0 +1,317 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { type Card, Game, PlayIntent, type Player } from "@/schema";
+import * as RadioGroup from "@radix-ui/react-radio-group";
+import { createFileRoute, notFound, redirect } from "@tanstack/react-router";
+import { Group, type ID } from "jazz-tools";
+import { AnimatePresence, LayoutGroup, Reorder, motion } from "motion/react";
+import type { FormEventHandler, ReactNode } from "react";
+
+import { HowToPlayContent } from "@/components/how-to-play-content";
+import { PlayingCard } from "@/components/playing-card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { WORKER_ID } from "@/constants";
+import { useCoState, useInboxSender } from "@/jazz";
+import { InfoIcon } from "lucide-react";
+
+export const Route = createFileRoute("/game/$gameId")({
+  component: RouteComponent,
+  loader: async ({ params: { gameId }, context: { me } }) => {
+    // !FIXME: this is useless, the layout takes care of this
+    if (!me) {
+      throw redirect({
+        to: "/",
+      });
+    }
+    const game = await Game.load(gameId as ID<Game>, me, {});
+
+    if (!game) {
+      throw notFound();
+    }
+  },
+  // TODO: better loading screen
+  pendingComponent: () => <div>...</div>,
+  // TODO: better not found page
+  notFoundComponent: () => <div>Game not found</div>,
+});
+
+function RouteComponent() {
+  const { gameId } = Route.useParams();
+  const playCard = useInboxSender(WORKER_ID);
+
+  const game = useCoState(Game, gameId as ID<Game>, {
+    // TODO: load intent only for current user
+    deck: [{}],
+    playedCard: { data: {} },
+    player1: {
+      hand: [{ data: {}, meta: {} }],
+      scoredCards: [{ data: {} }],
+      account: {},
+    },
+    player2: {
+      hand: [{ data: {}, meta: {} }],
+      scoredCards: [{ data: {} }],
+      account: {},
+    },
+    activePlayer: { account: {} },
+  });
+
+  // TODO: loading
+  if (!game) return null;
+
+  const [opponent, me] = game.player1.account.isMe
+    ? [game.player2, game.player1]
+    : [game.player1, game.player2];
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (e) => {
+    e.preventDefault();
+
+    if (!game.activePlayer.account.isMe) {
+      alert("not your turn!");
+      return;
+    }
+
+    const playedCard = new FormData(e.target as HTMLFormElement).get(
+      "play",
+    ) as string;
+
+    const playedCardValue: number = Number.parseInt(playedCard?.slice(1));
+    const playedCardSuit: string = playedCard?.[0];
+
+    const pc = me.hand.find(
+      (card) =>
+        card.data?.value === playedCardValue &&
+        card.data.suit === playedCardSuit,
+    );
+    if (!pc) {
+      return;
+    }
+
+    playCard(
+      PlayIntent.create(
+        { type: "play", card: pc, game },
+        { owner: Group.create({ owner: me.account }) },
+      ),
+    );
+  };
+
+  return (
+    <LayoutGroup>
+      <div className="flex flex-col h-screen p-2 ">
+        <PlayerArea player={opponent}>
+          <ul className="flex gap-2 flex-row-reverse place-content-center ">
+            <AnimatePresence>
+              {opponent.hand.getSorted().map((card) => {
+                if (!card) return null;
+
+                return (
+                  <motion.li key={card?.id} layout>
+                    <PlayingCard card={card} faceDown layoutId={card?.id} />
+                  </motion.li>
+                );
+              })}
+            </AnimatePresence>
+          </ul>
+        </PlayerArea>
+
+        <div className="container mx-auto grow items-center justify-center grid grid-cols-2">
+          <div className="relative flex justify-center items-center">
+            {game.deck[0] && (
+              <PlayingCard
+                className="rotate-[88deg] left-1/2 absolute"
+                card={game.deck[0]}
+                layoutId={`${game.deck[0]?.id}`}
+              />
+            )}
+            <CardStack cards={game.deck.slice(1)} faceDown />
+          </div>
+
+          <div className="relative h-full items-center flex justify-center">
+            <AnimatePresence>
+              {game.playedCard && (
+                <motion.div
+                  className="absolute"
+                  key={game.playedCard.id}
+                  animate={{
+                    rotate: 0,
+                  }}
+                >
+                  <PlayingCard
+                    card={game.playedCard}
+                    layoutId={`${game.playedCard?.id}`}
+                  />
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+        </div>
+
+        <form onSubmit={handleSubmit}>
+          <PlayerArea player={me}>
+            <div className="">
+              <RadioGroup.Root
+                className="flex place-content-center"
+                aria-label="Play card"
+                orientation="horizontal"
+                loop
+                name="play"
+                required
+                asChild
+              >
+                <Reorder.Group
+                  axis="x"
+                  values={me.hand.getSorted()}
+                  onReorder={(cards) => {
+                    cards.forEach((card, i) => {
+                      if (!card?.meta) return;
+                      card.meta.index = i;
+                    });
+                  }}
+                >
+                  <AnimatePresence>
+                    {me.hand
+                      .getSorted()
+                      .filter(
+                        (card) =>
+                          card?.data?.value !== undefined &&
+                          card.data.suit !== undefined,
+                      )
+                      .map((card, i, cards) => {
+                        if (!card) return null;
+
+                        return (
+                          <Reorder.Item
+                            key={`${card?.data?.suit}${card?.data?.value}`}
+                            value={card}
+                            initial={{
+                              translateY: 800,
+                            }}
+                            animate={{
+                              rotate: i * 15 - (15 * (cards.length - 1)) / 2,
+                              translateY: 0,
+                            }}
+                            whileDrag={{ scale: 1.1 }}
+                            exit={{
+                              scale: 1.1,
+                            }}
+                            layout
+                            layoutId={`${card?.id}`}
+                          >
+                            <RadioGroup.Item
+                              value={`${card?.data?.suit}${card?.data?.value}`}
+                              className="relative data-[state=checked]:translate-y-[-10px] data-[state=checked]:scale-110 data-[state=unchecked]:translate-y-0 transition-transform"
+                              asChild
+                            >
+                              <motion.button>
+                                <PlayingCard card={card} />
+                              </motion.button>
+                            </RadioGroup.Item>
+                          </Reorder.Item>
+                        );
+                      })}
+                  </AnimatePresence>
+                </Reorder.Group>
+              </RadioGroup.Root>
+            </div>
+          </PlayerArea>
+        </form>
+      </div>
+    </LayoutGroup>
+  );
+}
+
+interface CardStackProps {
+  cards: Card[];
+  className?: string;
+  faceDown?: boolean;
+}
+
+function CardStack({ cards, className, faceDown = false }: CardStackProps) {
+  return (
+    <div className={cn("relative w-[150px] h-[245px]", className)}>
+      <AnimatePresence>
+        {cards.map((card) => (
+          <motion.div key={card?.id} className="absolute" animate layout>
+            <PlayingCard card={card} faceDown={faceDown} layoutId={card?.id} />
+          </motion.div>
+        ))}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+interface PlayerAreaProps {
+  player: Player;
+  children: ReactNode;
+}
+function PlayerArea({ children, player }: PlayerAreaProps) {
+  return (
+    <div className={cn("flex", !player.account?.isMe && "flex-row-reverse")}>
+      <div className="flex items-center  w-1/3 justify-around flex-col">
+        {player.account?.isMe && (
+          <>
+            <Button size="lg" type="submit">
+              Play selected card
+            </Button>
+            <Dialog>
+              <DialogTrigger>
+                <Button size="sm" type="button" variant="link">
+                  <InfoIcon />
+                  How to play?
+                </Button>
+              </DialogTrigger>
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>How to play Briscola</DialogTitle>
+                  <DialogDescription>
+                    <HowToPlayContent />
+                  </DialogDescription>
+                </DialogHeader>
+              </DialogContent>
+            </Dialog>
+          </>
+        )}
+      </div>
+      <div className="w-1/3">{children}</div>
+      <div
+        className={cn(
+          "flex justify-center flex-col items-center w-1/3 gap-2",
+          !player.account?.isMe && "flex-col-reverse",
+        )}
+      >
+        <span className="text-lg">
+          Score:{" "}
+          <span className="font-semibold">
+            {getScore(player.scoredCards?.map((c) => c!) ?? [])}
+          </span>
+        </span>
+        <CardStack cards={player.scoredCards?.map((c) => c!) ?? []} />
+      </div>
+    </div>
+  );
+}
+
+function getScore(cards: Card[]) {
+  return cards.reduce((acc, card) => {
+    switch (card.data?.value) {
+      case 3:
+        return acc + 10;
+      case 1:
+        return acc + 11;
+      case 10:
+        return acc + 4;
+      case 9:
+        return acc + 3;
+      case 8:
+        return acc + 2;
+    }
+    return acc;
+  }, 0);
+}

examples/briscola/src/routes/how-to-play.tsx

@@ -0,0 +1,38 @@
+import { HowToPlayContent } from "@/components/how-to-play-content";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Link, createFileRoute } from "@tanstack/react-router";
+import { ArrowLeftIcon } from "lucide-react";
+
+export const Route = createFileRoute("/how-to-play")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return (
+    <div className="flex flex-col w-full place-items-center justify-center p-2 min-h-screen">
+      <Card className="max-w-screen-lg">
+        <CardHeader>
+          <CardTitle>How to Play?</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <HowToPlayContent />
+        </CardContent>
+        <CardFooter className="flex justify-end">
+          <Button asChild variant="link">
+            <Link to="/">
+              <ArrowLeftIcon className="w-5 h-5" />
+              Play
+            </Link>
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

examples/briscola/src/routes/index.tsx

@@ -0,0 +1,81 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import { WORKER_ID } from "@/constants";
+import { useAccount, useInboxSender } from "@/jazz";
+import { CreateGameRequest } from "@/schema";
+import { Link, createFileRoute, useNavigate } from "@tanstack/react-router";
+import { Group } from "jazz-tools";
+import { ExternalLinkIcon } from "lucide-react";
+import { useState } from "react";
+
+export const Route = createFileRoute("/")({
+  component: HomeComponent,
+});
+
+function HomeComponent() {
+  const createGame = useInboxSender(WORKER_ID);
+  const { me } = useAccount();
+  const navigate = useNavigate({ from: "/" });
+  const [isLoading, setIsLoading] = useState(false);
+
+  const onNewGameClick = async () => {
+    setIsLoading(true);
+
+    const waitingRoomId = await createGame(
+      CreateGameRequest.create(
+        {
+          type: "createGame",
+        },
+        { owner: Group.create({ owner: me }) },
+      ),
+    );
+
+    if (!waitingRoomId) {
+      setIsLoading(false);
+      return;
+    }
+
+    navigate({ to: `/waiting-room/${waitingRoomId}` });
+  };
+
+  return (
+    <div className="h-screen flex flex-col w-full place-items-center justify-center p-2">
+      <Card className="w-[500px]">
+        <CardHeader>
+          <CardTitle>Welcome to Jazz Briscola</CardTitle>
+        </CardHeader>
+        <CardContent className="p-0">
+          <div className="flex items-center p-4">
+            <Button
+              onClick={onNewGameClick}
+              loading={isLoading}
+              loadingText="Creating game..."
+              className="w-full"
+            >
+              New Game
+            </Button>
+          </div>
+          <Separator />
+          <div className="p-4 flex items-center justify-between">
+            <Button variant="link" asChild>
+              <Link to="/how-to-play">How to play?</Link>
+            </Button>
+            <Button variant="link" asChild className="text-muted-foreground">
+              <Link
+                href="https://en.wikipedia.org/wiki/Briscola"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Briscola on Wikipedia
+                <ExternalLinkIcon className="w-4 h-4 ml-1" />
+              </Link>
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

examples/briscola/src/routes/waiting-room.$waitingRoomId.tsx

@@ -0,0 +1,103 @@
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { WORKER_ID } from "@/constants";
+import { JoinGameRequest, WaitingRoom } from "@/schema";
+import { createFileRoute, redirect } from "@tanstack/react-router";
+import { Group, type ID, InboxSender } from "jazz-tools";
+import { ClipboardCopyIcon, Loader2Icon } from "lucide-react";
+import { useEffect } from "react";
+
+export const Route = createFileRoute("/waiting-room/$waitingRoomId")({
+  component: RouteComponent,
+  loader: async ({ context: { me }, params: { waitingRoomId } }) => {
+    if (!me) {
+      throw redirect({ to: "/" });
+    }
+    const waitingRoom = await WaitingRoom.load(
+      waitingRoomId as ID<WaitingRoom>,
+      me,
+      { account1: {}, account2: {}, game: {} },
+    );
+
+    if (!waitingRoom) {
+      throw redirect({ to: "/" });
+    }
+
+    // If the waiting room already has a game, redirect to the game
+    if (waitingRoom?.game) {
+      throw redirect({ to: `/game/${waitingRoom.game.id}` });
+    }
+
+    if (!waitingRoom?.account1?.isMe) {
+      const sender = await InboxSender.load<JoinGameRequest, WaitingRoom>(
+        WORKER_ID,
+        me,
+      );
+      sender.sendMessage(
+        JoinGameRequest.create(
+          { type: "joinGame", waitingRoom },
+          { owner: Group.create({ owner: me }) },
+        ),
+      );
+    }
+    return { waitingRoom };
+  },
+});
+
+function RouteComponent() {
+  const { waitingRoom } = Route.useLoaderData();
+  const navigate = Route.useNavigate();
+
+  useEffect(() => {
+    if (!waitingRoom) {
+      return;
+    }
+
+    return waitingRoom?.subscribe({ game: {} }, () => {
+      if (waitingRoom.game) {
+        navigate({ to: `/game/${waitingRoom.game.id}` });
+      }
+    });
+  }, [waitingRoom]);
+
+  const onCopyClick = () => {
+    navigator.clipboard.writeText(window.location.toString());
+  };
+
+  return (
+    <div className="h-screen flex flex-col w-full place-items-center justify-center p-2">
+      <Card className="w-[500px]">
+        <CardHeader>
+          <CardTitle className="flex items-center">
+            <Loader2Icon className="animate-spin inline h-8 w-8 mr-2" />
+            Waiting for opponent to join the game
+          </CardTitle>
+          <CardDescription>
+            Share this link with your friend to join the game. The game will
+            automatically start once they join.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex">
+            <Input
+              className="w-full border bg-muted rounded-e-none"
+              readOnly
+              value={`${window.location}`}
+            />
+            <Button onClick={onCopyClick} className="rounded-s-none">
+              <ClipboardCopyIcon className="w-5 h-5" />
+              Copy
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

examples/briscola/src/schema.ts

@@ -0,0 +1,111 @@
+import { Account, CoList, CoMap, SchemaUnion, co } from "jazz-tools";
+
+export const CardValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as const;
+
+export const CardValue = co.literal(...CardValues);
+
+export const Suits = ["S", "B", "C", "D"] as const;
+
+export const Suit = co.literal(...Suits);
+
+export class CardMeta extends CoMap {
+  index = co.optional.number;
+}
+export class CardData extends CoMap {
+  value = CardValue;
+  suit = Suit;
+}
+
+export class Card extends CoMap {
+  data = co.ref(CardData);
+  meta = co.optional.ref(CardMeta);
+}
+
+export class CardList extends CoList.Of(co.ref(Card)) {
+  getSorted() {
+    return this.toSorted(
+      (a, b) => (a?.meta?.index ?? 0) - (b?.meta?.index ?? 0),
+    );
+  }
+}
+
+export class Player extends CoMap {
+  account = co.ref(Account);
+  hand = co.ref(CardList); // write Tavolo - read me - quando il Game mi da le carte le scrive qui, quando valida la giocata la toglie da qui
+  scoredCards = co.ref(CardList); // write Tavolo - read everyone -
+}
+
+export class Game extends CoMap {
+  deck = co.ref(CardList);
+
+  briscola = co.literal(...Suits);
+  /**
+   * The card that was played in the current turn.
+   */
+  playedCard = co.optional.ref(Card);
+
+  activePlayer = co.ref(Player);
+  player1 = co.ref(Player);
+  player2 = co.ref(Player);
+
+  /**
+   * Given a player, returns the opponent in the current game.
+   */
+  getOpponent(player: Player) {
+    // TODO: player may be unrelated to this game
+    const opponent =
+      player.account?.id === this.player1?.account?.id
+        ? this.player2
+        : this.player1;
+
+    if (!opponent) {
+      throw new Error("Opponent not found");
+    }
+
+    return opponent.ensureLoaded({
+      account: {},
+      hand: [{}],
+      scoredCards: [{}],
+    });
+  }
+}
+
+export class GameList extends CoList.Of(co.ref(Game)) {}
+
+export class WaitingRoom extends CoMap {
+  account1 = co.ref(Account);
+  account2 = co.optional.ref(Account);
+  game = co.optional.ref(Game);
+}
+
+class BaseInboxMessage extends CoMap {
+  type = co.literal("play", "createGame", "joinGame");
+}
+
+export class PlayIntent extends BaseInboxMessage {
+  type = co.literal("play");
+  card = co.ref(Card);
+  game = co.ref(Game);
+}
+
+export class CreateGameRequest extends BaseInboxMessage {
+  type = co.literal("createGame");
+}
+
+export class JoinGameRequest extends BaseInboxMessage {
+  type = co.literal("joinGame");
+  waitingRoom = co.ref(WaitingRoom);
+}
+
+export const InboxMessage = SchemaUnion.Of<BaseInboxMessage>((raw) => {
+  switch (raw.get("type")) {
+    case "play":
+      return PlayIntent;
+    case "createGame":
+      return CreateGameRequest;
+    case "joinGame":
+      return JoinGameRequest;
+    default:
+      throw new Error("Unknown request type");
+  }
+});

examples/briscola/src/worker.ts

@@ -0,0 +1,331 @@
+import {
+  Card,
+  CardData,
+  CardList,
+  CardMeta,
+  CardValues,
+  Game,
+  InboxMessage,
+  JoinGameRequest,
+  PlayIntent,
+  Player,
+  Suits,
+  WaitingRoom,
+} from "@/schema";
+import { startWorker } from "jazz-nodejs";
+import { Account, Group, type ID } from "jazz-tools";
+
+const {
+  worker,
+  experimental: { inbox },
+} = await startWorker({
+  accountID: process.env.VITE_JAZZ_WORKER_ACCOUNT,
+  syncServer: "wss://cloud.jazz.tools/?key=you@example.com",
+});
+
+inbox.subscribe(
+  InboxMessage,
+  async (message, senderID) => {
+    const playerAccount = await Account.load(senderID, worker, {});
+    if (!playerAccount) {
+      return;
+    }
+
+    switch (message.type) {
+      case "play":
+        console.log("play message from", senderID);
+        handlePlayIntent(senderID, message.castAs(PlayIntent));
+        break;
+      case "createGame":
+        console.log("create game message from", senderID);
+
+        const waitingRoomGroup = Group.create({ owner: worker });
+        waitingRoomGroup.addMember("everyone", "reader");
+        const waitingRoom = WaitingRoom.create(
+          { account1: playerAccount },
+          { owner: waitingRoomGroup },
+        );
+
+        console.log("waiting room created with id:", waitingRoom.id);
+
+        return waitingRoom;
+      case "joinGame":
+        console.log("join game message from", senderID);
+        const joinGameRequest = message.castAs(JoinGameRequest);
+        if (
+          !joinGameRequest.waitingRoom ||
+          !joinGameRequest.waitingRoom.account1
+        ) {
+          console.error("No waiting room in join game request");
+          return;
+        }
+        joinGameRequest.waitingRoom.account2 = playerAccount;
+
+        const game = await createGame({
+          account1: joinGameRequest.waitingRoom.account1,
+          account2: joinGameRequest.waitingRoom.account2,
+        });
+        console.log("game created with id:", game.id);
+
+        joinGameRequest.waitingRoom.game = game;
+        return joinGameRequest.waitingRoom;
+    }
+  },
+  { retries: 3 },
+);
+
+interface CreateGameParams {
+  account1: Account;
+  account2: Account;
+}
+async function createGame({ account1, account2 }: CreateGameParams) {
+  const publicReadOnly = Group.create({ owner: worker });
+  publicReadOnly.addMember(account1, "reader");
+  publicReadOnly.addMember(account2, "reader");
+
+  const player1 = createPlayer({ account: account1 });
+  const player2 = createPlayer({ account: account2 });
+
+  const deck = createDeck({ publicReadOnlyGroup: publicReadOnly });
+
+  while (player1.hand && player1.hand?.length < 3) {
+    await drawCard(player1, deck);
+  }
+
+  while (player2.hand && player2.hand?.length < 3) {
+    await drawCard(player2, deck);
+  }
+
+  const game = Game.create(
+    {
+      deck,
+      briscola: deck[0]?.data?.suit!,
+      activePlayer: player1,
+      player1: player1,
+      player2: player2,
+    },
+    { owner: publicReadOnly },
+  );
+
+  await game.waitForSync();
+
+  return game;
+}
+
+interface CreatePlayerParams {
+  account: Account;
+}
+function createPlayer({ account }: CreatePlayerParams) {
+  const publicRead = Group.create({ owner: worker });
+  publicRead.addMember("everyone", "reader");
+
+  const player = Player.create(
+    {
+      scoredCards: CardList.create([], {
+        owner: publicRead,
+      }),
+      account,
+      hand: CardList.create([], { owner: publicRead }),
+    },
+    { owner: publicRead },
+  );
+
+  return player;
+}
+
+interface CreateDeckParams {
+  publicReadOnlyGroup: Group;
+}
+function createDeck({ publicReadOnlyGroup }: CreateDeckParams) {
+  const allCards = Suits.flatMap((suit) => {
+    return CardValues.map((value) => {
+      return { value, suit };
+    });
+  });
+  shuffle(allCards);
+
+  const deck = CardList.create(
+    allCards.map((card, i) => {
+      const cardDataGroup = Group.create({ owner: worker });
+
+      return Card.create(
+        {
+          // The first card is the briscola, it should be visible by everyone,
+          // so we make its owner the public read-only group.
+          data: CardData.create(card, {
+            owner: i === 0 ? publicReadOnlyGroup : cardDataGroup,
+          }),
+        },
+        { owner: publicReadOnlyGroup },
+      );
+    }),
+    { owner: publicReadOnlyGroup },
+  );
+
+  return deck;
+}
+
+async function drawCard(player: Player, deck: CardList) {
+  const card = deck.pop();
+
+  const playerAccount = (await player.ensureLoaded({ account: {} }))?.account;
+
+  if (!playerAccount) {
+    console.error("failed to load player account");
+    return;
+  }
+
+  if (card) {
+    const metaGroup = Group.create({ owner: worker });
+    metaGroup.addMember("everyone", "reader");
+    metaGroup.addMember(playerAccount, "writer");
+    // Create the card meta. This is visible to everyone.
+    // It's used to sort the cards in the UI.
+    card.meta = CardMeta.create({}, { owner: metaGroup });
+    // Add the player to the card's data group so that
+    // the player can read the card data.
+    card.data?._owner.castAs(Group).addMember(playerAccount, "reader");
+    player.hand?.push(card);
+  }
+}
+
+// Fisher–Yates shuffle
+function shuffle(array: unknown[]) {
+  let currentIndex = array.length;
+
+  while (currentIndex) {
+    const randomIndex = Math.floor(Math.random() * currentIndex);
+    currentIndex--;
+
+    [array[currentIndex], array[randomIndex]] = [
+      array[randomIndex],
+      array[currentIndex],
+    ];
+  }
+}
+
+function getCardValue(card: CardData) {
+  switch (card.value) {
+    case 1:
+      return 20;
+    case 3:
+      return 15;
+    default:
+      return card.value;
+  }
+}
+
+async function handlePlayIntent(senderId: ID<Account>, playIntent: PlayIntent) {
+  const playedCard = await playIntent.ensureLoaded({ card: { data: {} } });
+  if (!playedCard) {
+    console.log("No card in play intent");
+    return;
+  }
+
+  const state = await playIntent.ensureLoaded({
+    game: {
+      playedCard: { data: {} },
+      deck: [{ data: {} }],
+      activePlayer: { account: {} },
+      player1: { hand: [{ data: {} }], scoredCards: [{}] },
+      player2: { hand: [{ data: {} }], scoredCards: [{}] },
+    },
+  });
+
+  if (!state?.game) {
+    console.log("No game found");
+    return;
+  }
+
+  if (state.game.activePlayer.account.id !== senderId) {
+    console.log("Not player's turn");
+    return;
+  }
+
+  const publicReadOnly = state.game?.deck._owner.castAs(Group);
+
+  const player = state.game.activePlayer;
+  const opponent = await state.game.getOpponent(player);
+
+  if (!opponent) {
+    console.error("failed to get opponent");
+    return;
+  }
+
+  console.log(
+    "player",
+    player.account?.id,
+    "played",
+    playedCard.card.data?.value,
+    playedCard.card.data?.suit,
+  );
+
+  const cardIndex =
+    player.hand?.findIndex((card) => {
+      return card?.id === playedCard.card.id;
+    }) ?? -1;
+
+  if (cardIndex === -1) {
+    console.log("Card not found in player's hand");
+    return;
+  }
+
+  // remove the card from player's hand
+  player.hand?.splice(cardIndex, 1);
+
+  // make the newly played card's data visible to everyone by extending its group with
+  // the public read-only group so that everyone can see the card.
+  const group = await playedCard.card.data._owner
+    .castAs(Group)
+    .ensureLoaded({});
+  group?.extend(publicReadOnly);
+
+  // If there's already a card on the table, it means both players have played.
+  if (state.game.playedCard) {
+    // Check who's this turn's winner
+    let winner: Player;
+    // If both cards have the same suit, the one with the highest value wins
+    if (state.game.playedCard.data?.suit === playedCard.card.data?.suit) {
+      winner =
+        getCardValue(playedCard.card.data) >
+        getCardValue(state.game.playedCard.data)
+          ? player
+          : opponent;
+    } else {
+      // else the active player wins only if they played a briscola.
+      // (we already know the other player didn't)
+      if (playedCard.card.data.suit === state.game.briscola) {
+        winner = player;
+      } else {
+        winner = opponent;
+      }
+    }
+
+    // Put the cards in the winner's scored cards pile.
+    winner.scoredCards?.push(state.game.playedCard, playedCard.card);
+
+    // The winner of the round always draws first.
+    if (state.game.deck.length > 0) {
+      drawCard(winner, state.game.deck);
+
+      const opponent = await state.game.getOpponent(winner);
+      if (!opponent) {
+        console.error("failed to get opponent");
+        return;
+      }
+      drawCard(opponent, state.game.deck);
+    }
+
+    // @ts-expect-error types are wonky
+    state.game.activePlayer = winner;
+    // And finally, remove the played card from the table.
+    delete state.game.playedCard;
+
+    // TODO: if there are no more cards in the deck and both players have played all their cards, end the game.
+  } else {
+    // else, just put the card on the table and switch the active player.
+    state.game.playedCard = playedCard.card;
+
+    state.game.activePlayer = opponent;
+  }
+}

examples/briscola/tailwind.config.js

@@ -1,26 +1,25 @@
 /** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "./pages/**/*.{ts,tsx}",
-    "./components/**/*.{ts,tsx}",
-    "./app/**/*.{ts,tsx}",
-    "./src/**/*.{ts,tsx}",
-  ],
+export default {
+  darkMode: ["class"],
+  content: ["./index.html", "./src/**/*.{ts,tsx}"],
   theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
     extend: {
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
       colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
         primary: {
           DEFAULT: "hsl(var(--primary))",
           foreground: "hsl(var(--primary-foreground))",
@@ -29,10 +28,6 @@ module.exports = {
           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))",
@@ -41,33 +36,24 @@ module.exports = {
           DEFAULT: "hsl(var(--accent))",
           foreground: "hsl(var(--accent-foreground))",
         },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
         },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        chart: {
+          1: "hsl(var(--chart-1))",
+          2: "hsl(var(--chart-2))",
+          3: "hsl(var(--chart-3))",
+          4: "hsl(var(--chart-4))",
+          5: "hsl(var(--chart-5))",
         },
       },
-      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",
+
+      aspectRatio: {
+        card: "2584/4181",
       },
     },
   },

examples/briscola/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

examples/briscola/vite.config.ts

@@ -0,0 +1,14 @@
+import { resolve } from "path";
+import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [TanStackRouterVite({}), react()],
+  resolve: {
+    alias: {
+      "@": resolve(__dirname, "./src"),
+    },
+  },
+});

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-rn-clerk/.env

@@ -1 +1 @@
-EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_ZXZpZGVudC1kYW5lLTg5LmNsZXJrLmFjY291bnRzLmRldiQ
+EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_ZXZpZGVudC1kYW5lLTg5LmNsZXJrLmFjY291bnRzLmRldiQ

examples/chat-rn-clerk/CHANGELOG.md

@@ -1,5 +1,279 @@
 # chat-rn-clerk
 
+## 1.0.40
+
+### Patch Changes
+
+- jazz-react-native@0.8.50
+- jazz-react-native-auth-clerk@0.8.50
+- jazz-tools@0.8.50
+- jazz-react-native-media-images@0.8.50
+
+## 1.0.39
+
+### Patch Changes
+
+- jazz-react-native@0.8.49
+- jazz-react-native-auth-clerk@0.8.49
+- jazz-tools@0.8.49
+- jazz-react-native-media-images@0.8.49
+
+## 1.0.38
+
+### Patch Changes
+
+- Updated dependencies [635e824]
+- Updated dependencies [0a85982]
+  - jazz-tools@0.8.48
+  - jazz-react-native@0.8.48
+  - jazz-react-native-auth-clerk@0.8.48
+  - jazz-react-native-media-images@0.8.48
+
+## 1.0.37
+
+### Patch Changes
+
+- Updated dependencies [33ef9c4]
+  - jazz-react-native@0.8.47
+  - jazz-react-native-auth-clerk@0.8.47
+
+## 1.0.36
+
+### Patch Changes
+
+- Updated dependencies [ab4ffbd]
+  - jazz-react-native@0.8.46
+  - jazz-react-native-auth-clerk@0.8.46
+
+## 1.0.35
+
+### Patch Changes
+
+- Updated dependencies [7701307]
+- Updated dependencies [fa41f8e]
+- Updated dependencies [88d7d9a]
+- Updated dependencies [60e35ea]
+  - jazz-react-native@0.8.45
+  - jazz-tools@0.8.45
+  - jazz-react-native-auth-clerk@0.8.45
+  - jazz-react-native-media-images@0.8.45
+
+## 1.0.34
+
+### Patch Changes
+
+- jazz-react-native@0.8.44
+- jazz-react-native-auth-clerk@0.8.44
+- jazz-tools@0.8.44
+- jazz-react-native-media-images@0.8.44
+
+## 1.0.33
+
+### Patch Changes
+
+- cdc7f9f: Fixing react-native examples
+- Updated dependencies [cdc7f9f]
+  - jazz-react-native-auth-clerk@0.8.43
+
+## 1.0.32
+
+### Patch Changes
+
+- jazz-react-native@0.8.41
+- jazz-react-native-auth-clerk@0.8.41
+- jazz-tools@0.8.41
+- jazz-react-native-media-images@0.8.41
+
+## 1.0.31
+
+### Patch Changes
+
+- Updated dependencies [0c6b0f3]
+- Updated dependencies [249eecb]
+  - jazz-react-native@0.8.39
+  - jazz-tools@0.8.39
+  - jazz-react-native-auth-clerk@0.8.39
+  - jazz-react-native-media-images@0.8.39
+
+## 1.0.30
+
+### Patch Changes
+
+- jazz-react-native@0.8.38
+- jazz-react-native-auth-clerk@0.8.38
+- jazz-tools@0.8.38
+- jazz-react-native-media-images@0.8.38
+
+## 1.0.29
+
+### Patch Changes
+
+- jazz-react-native@0.8.37
+- jazz-react-native-auth-clerk@0.8.37
+- jazz-tools@0.8.37
+- jazz-react-native-media-images@0.8.28
+
+## 1.0.28
+
+### Patch Changes
+
+- c84764a: feat: added jazz-react-native-auth-clerk package
+- Updated dependencies [c84764a]
+- Updated dependencies [441fe27]
+  - jazz-react-native-auth-clerk@0.8.36
+  - jazz-react-native@0.8.36
+  - jazz-tools@0.8.36
+  - jazz-react-native-media-images@0.8.27
+
+## 1.0.27
+
+### Patch Changes
+
+- Updated dependencies [8b87117]
+  - jazz-tools@0.8.35
+  - jazz-react-auth-clerk@0.8.35
+  - jazz-react-native@0.8.35
+  - jazz-react-native-media-images@0.8.26
+
+## 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/app.json

@@ -35,7 +35,9 @@
           }
         }
       ],
-      "expo-secure-store"
+      "expo-secure-store",
+      "expo-font",
+      "expo-router"
     ],
     "extra": {
       "eas": {

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

@@ -1,3 +1,4 @@
+import "../global.css";
 import { ClerkLoaded, ClerkProvider } from "@clerk/clerk-expo";
 import { useFonts } from "expo-font";
 import { Slot } from "expo-router";

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

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

examples/chat-rn-clerk/cache.ts

@@ -4,7 +4,7 @@ import { Platform } from "react-native";
 export interface TokenCache {
   getToken: (key: string) => Promise<string | undefined | null>;
   saveToken: (key: string, token: string) => Promise<void>;
-  clearToken?: (key: string) => void;
+  clearToken: (key: string) => void;
 }
 
 const createTokenCache = (): TokenCache => {
@@ -27,6 +27,9 @@ const createTokenCache = (): TokenCache => {
     saveToken: (key: string, token: string) => {
       return SecureStore.setItemAsync(key, token);
     },
+    clearToken: (key: string) => {
+      return SecureStore.deleteItemAsync(key);
+    },
   };
 };
 

examples/chat-rn-clerk/global.css

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

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

@@ -1,5 +1,6 @@
 // Learn more https://docs.expo.dev/guides/monorepos
 const { getDefaultConfig } = require("expo/metro-config");
+const { withNativeWind } = require("nativewind/metro");
 const { FileStore } = require("metro-cache");
 const path = require("path");
 
@@ -19,7 +20,10 @@ config.resolver.nodeModulesPaths = [
 ];
 config.resolver.sourceExts = ["mjs", "js", "json", "ts", "tsx"];
 config.resolver.unstable_enablePackageExports = true;
-config.resolver.requireCycleIgnorePatterns = [/(^|\/|\\)node_modules($|\/|\\)/];
+config.resolver.requireCycleIgnorePatterns = [
+  /(^|\/|\\)node_modules($|\/|\\)/,
+  /(^|\/|\\)packages($|\/|\\)/,
+];
 
 // Use turborepo to restore the cache when possible
 config.cacheStores = [
@@ -28,4 +32,5 @@ config.cacheStores = [
   }),
 ];
 
-module.exports = config;
+// module.exports = config;
+module.exports = withNativeWind(config, { input: "./global.css" });

examples/chat-rn-clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "chat-rn-clerk",
   "main": "index.js",
-  "version": "1.0.10",
+  "version": "1.0.40",
   "scripts": {
     "build": "expo export -p ios",
     "start": "expo start",
@@ -17,63 +17,61 @@
   },
   "dependencies": {
     "@azure/core-asynciterator-polyfill": "^1.0.2",
-    "@bam.tech/react-native-image-resizer": "^3.0.10",
+    "@bam.tech/react-native-image-resizer": "^3.0.11",
     "@clerk/clerk-expo": "^2.2.21",
     "@expo/vector-icons": "^14.0.2",
-    "@react-native-community/netinfo": "^11.3.1",
-    "@react-navigation/native": "^6.1.18",
-    "@react-navigation/native-stack": "^6.11.0",
+    "@react-native-community/netinfo": "^11.4.1",
+    "@react-navigation/native": "^7.0.13",
+    "@react-navigation/native-stack": "^7.1.14",
     "base-64": "^1.0.0",
     "buffer": "^6.0.3",
     "clsx": "^2.0.0",
-    "expo": "~51.0.37",
-    "expo-build-properties": "~0.12.5",
-    "expo-clipboard": "~6.0.3",
-    "expo-constants": "~16.0.2",
-    "expo-crypto": "~13.0.2",
-    "expo-dev-client": "~4.0.28",
-    "expo-file-system": "^17.0.1",
-    "expo-font": "~12.0.4",
-    "expo-linking": "~6.3.1",
-    "expo-router": "~3.5.23",
-    "expo-secure-store": "~13.0.2",
-    "expo-splash-screen": "~0.27.5",
-    "expo-status-bar": "~1.12.1",
-    "expo-system-ui": "~3.0.7",
-    "expo-web-browser": "~13.0.3",
-    "jazz-react-auth-clerk": "workspace:*",
+    "expo": "^52.0.0",
+    "expo-build-properties": "~0.13.1",
+    "expo-clipboard": "~7.0.0",
+    "expo-constants": "~17.0.3",
+    "expo-crypto": "~14.0.1",
+    "expo-dev-client": "~5.0.5",
+    "expo-file-system": "^18.0.4",
+    "expo-font": "~13.0.1",
+    "expo-linking": "~7.0.3",
+    "expo-router": "~4.0.11",
+    "expo-secure-store": "~14.0.0",
+    "expo-splash-screen": "~0.29.16",
+    "expo-status-bar": "~2.0.0",
+    "expo-system-ui": "~4.0.5",
+    "expo-web-browser": "~14.0.1",
     "jazz-react-native": "workspace:*",
+    "jazz-react-native-auth-clerk": "workspace:*",
     "jazz-react-native-media-images": "workspace:*",
     "jazz-tools": "workspace:*",
-    "nativewind": "^2.0.11",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-native": "~0.74.5",
+    "nativewind": "^4.1.21",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-native": "~0.76.3",
     "react-native-fetch-api": "^3.0.0",
-    "react-native-gesture-handler": "~2.16.1",
+    "react-native-gesture-handler": "~2.20.2",
     "react-native-get-random-values": "^1.11.0",
-    "react-native-mmkv": "3.0.1",
     "react-native-polyfill-globals": "^3.1.0",
     "react-native-quick-base64": "^2.1.2",
-    "react-native-reanimated": "~3.10.1",
-    "react-native-safe-area-context": "4.10.5",
-    "react-native-screens": "3.31.1",
+    "react-native-reanimated": "~3.16.3",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "4.1.0",
     "react-native-url-polyfill": "^2.0.0",
-    "react-native-web": "~0.19.10",
+    "react-native-web": "~0.19.13",
     "text-encoding": "^0.7.0",
     "web-streams-polyfill": "^3.2.1"
   },
   "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": "^18.3.12",
     "@types/react-test-renderer": "^18.0.7",
     "jest": "^29.2.1",
-    "jest-expo": "~51.0.3",
+    "jest-expo": "~52.0.2",
     "react-test-renderer": "18.2.0",
-    "tailwindcss": "3.3.2",
-    "typescript": "^5.3.3"
+    "tailwindcss": "^3.4.15",
+    "typescript": "~5.6.2"
   },
   "private": true
 }

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

@@ -1,14 +1,14 @@
 import { useClerk, useUser } from "@clerk/clerk-expo";
-import { useJazzClerkAuth } from "jazz-react-auth-clerk";
+import { useJazzClerkAuth } from "jazz-react-native-auth-clerk";
 import React, {
-  useContext,
   createContext,
+  PropsWithChildren,
+  useContext,
   useEffect,
   useState,
-  PropsWithChildren,
 } from "react";
 import { Text, View } from "react-native";
-import { Jazz } from "./jazz";
+import { Jazz, kvStore } from "./jazz";
 
 const AuthContext = createContext<{
   isAuthenticated: boolean;
@@ -25,7 +25,7 @@ export function useAuth() {
 export function JazzAndAuth({ children }: PropsWithChildren) {
   const { isSignedIn, isLoaded: isClerkLoaded } = useUser();
   const clerk = useClerk();
-  const [auth, state] = useJazzClerkAuth(clerk);
+  const [auth, state] = useJazzClerkAuth(clerk, kvStore);
   const [isAuthenticated, setIsAuthenticated] = useState(false);
 
   useEffect(() => {
@@ -46,10 +46,10 @@ export function JazzAndAuth({ children }: PropsWithChildren) {
             <Text style={{ color: "red" }}>{error}</Text>
           </View>
         ))}
-      {auth ? (
+      {auth && clerk.user ? (
         <Jazz.Provider
           auth={auth}
-          peer="wss://cloud.jazz.tools/?key=chat-rn-clerk-example-jazz@gcmp.io"
+          peer="wss://cloud.jazz.tools/?key=chat-rn-clerk-example-jazz@garden.co"
           storage={undefined}
         >
           {children}

examples/chat-rn-clerk/src/jazz.tsx

@@ -1,4 +1,4 @@
 import { createJazzRNApp } from "jazz-react-native";
 
 export const Jazz = createJazzRNApp();
-export const { useAccount, useCoState, useAcceptInvite } = Jazz;
+export const { useAccount, useCoState, useAcceptInvite, kvStore } = Jazz;

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

@@ -1,10 +1,12 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  // NOTE: Update this to include the paths to all of your component files.
   content: [
     "./app/**/*.{js,jsx,ts,tsx}",
     "./components/**/*.{js,jsx,ts,tsx}",
     "./src/**/*.{js,jsx,ts,tsx}",
   ],
+  presets: [require("nativewind/preset")],
   theme: {
     extend: {},
   },

examples/chat-rn-clerk/tsconfig.json

@@ -7,5 +7,5 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["**/*.ts", "**/*.tsx"]
+  "include": ["**/*.ts", "**/*.tsx", "nativewind-env.d.ts"]
 }

examples/chat-rn/CHANGELOG.md

@@ -1,5 +1,196 @@
 # chat-rn
 
+## 1.0.37
+
+### Patch Changes
+
+- jazz-react-native@0.8.50
+- jazz-tools@0.8.50
+
+## 1.0.36
+
+### Patch Changes
+
+- jazz-react-native@0.8.49
+- jazz-tools@0.8.49
+
+## 1.0.35
+
+### Patch Changes
+
+- Updated dependencies [635e824]
+- Updated dependencies [0a85982]
+  - jazz-tools@0.8.48
+  - jazz-react-native@0.8.48
+
+## 1.0.34
+
+### Patch Changes
+
+- Updated dependencies [33ef9c4]
+  - jazz-react-native@0.8.47
+
+## 1.0.33
+
+### Patch Changes
+
+- Updated dependencies [ab4ffbd]
+  - jazz-react-native@0.8.46
+
+## 1.0.32
+
+### Patch Changes
+
+- Updated dependencies [7701307]
+- Updated dependencies [fa41f8e]
+- Updated dependencies [88d7d9a]
+- Updated dependencies [60e35ea]
+  - jazz-react-native@0.8.45
+  - jazz-tools@0.8.45
+
+## 1.0.31
+
+### Patch Changes
+
+- jazz-react-native@0.8.44
+- jazz-tools@0.8.44
+
+## 1.0.30
+
+### Patch Changes
+
+- jazz-react-native@0.8.41
+- jazz-tools@0.8.41
+
+## 1.0.29
+
+### Patch Changes
+
+- Updated dependencies [0c6b0f3]
+- Updated dependencies [249eecb]
+  - jazz-react-native@0.8.39
+  - jazz-tools@0.8.39
+
+## 1.0.28
+
+### Patch Changes
+
+- jazz-react-native@0.8.38
+- jazz-tools@0.8.38
+
+## 1.0.27
+
+### Patch Changes
+
+- jazz-react-native@0.8.37
+- jazz-tools@0.8.37
+
+## 1.0.26
+
+### Patch Changes
+
+- Updated dependencies [c84764a]
+- Updated dependencies [441fe27]
+  - jazz-react-native@0.8.36
+  - jazz-tools@0.8.36
+
+## 1.0.25
+
+### Patch Changes
+
+- Updated dependencies [8b87117]
+  - jazz-tools@0.8.35
+  - jazz-react-native@0.8.35
+
+## 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

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

examples/chat-rn/global.css

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

examples/chat-rn/metro.config.js

@@ -1,5 +1,6 @@
 // Learn more https://docs.expo.dev/guides/monorepos
 const { getDefaultConfig } = require("expo/metro-config");
+const { withNativeWind } = require("nativewind/metro");
 const { FileStore } = require("metro-cache");
 const path = require("path");
 
@@ -7,7 +8,7 @@ const path = require("path");
 const projectRoot = __dirname;
 const workspaceRoot = path.resolve(projectRoot, "../..");
 
-const config = getDefaultConfig(projectRoot);
+const config = getDefaultConfig(projectRoot, { isCSSEnabled: true });
 
 // Since we are using pnpm, we have to setup the monorepo manually for Metro
 // #1 - Watch all files in the monorepo
@@ -19,7 +20,10 @@ config.resolver.nodeModulesPaths = [
 ];
 config.resolver.sourceExts = ["mjs", "js", "json", "ts", "tsx"];
 config.resolver.unstable_enablePackageExports = true;
-config.resolver.requireCycleIgnorePatterns = [/(^|\/|\\)node_modules($|\/|\\)/];
+config.resolver.requireCycleIgnorePatterns = [
+  /(^|\/|\\)node_modules($|\/|\\)/,
+  /(^|\/|\\)packages($|\/|\\)/,
+];
 
 // Use turborepo to restore the cache when possible
 config.cacheStores = [
@@ -28,4 +32,5 @@ config.cacheStores = [
   }),
 ];
 
-module.exports = config;
+// module.exports = config;
+module.exports = withNativeWind(config, { input: "./global.css" });

examples/chat-rn/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-rn",
-  "version": "1.0.12",
+  "version": "1.0.37",
   "main": "index.js",
   "scripts": {
     "build": "expo export -p ios",
@@ -13,42 +13,40 @@
   },
   "dependencies": {
     "@azure/core-asynciterator-polyfill": "^1.0.2",
-    "@react-native-community/netinfo": "^11.3.1",
-    "@react-navigation/native": "^6.1.18",
-    "@react-navigation/native-stack": "^6.11.0",
+    "@react-native-community/netinfo": "^11.4.1",
+    "@react-navigation/native": "^7.0.13",
+    "@react-navigation/native-stack": "^7.1.14",
     "base-64": "^1.0.0",
     "clsx": "^2.0.0",
-    "expo": "~51.0.37",
-    "expo-build-properties": "~0.12.5",
-    "expo-clipboard": "~6.0.3",
-    "expo-constants": "~16.0.2",
-    "expo-crypto": "~13.0.2",
-    "expo-dev-client": "~4.0.28",
-    "expo-linking": "~6.3.1",
-    "expo-secure-store": "~13.0.2",
-    "expo-status-bar": "~1.12.1",
-    "expo-web-browser": "~13.0.3",
+    "expo": "^52.0.0",
+    "expo-build-properties": "~0.13.1",
+    "expo-clipboard": "~7.0.0",
+    "expo-constants": "~17.0.3",
+    "expo-crypto": "~14.0.1",
+    "expo-dev-client": "~5.0.5",
+    "expo-linking": "~7.0.3",
+    "expo-secure-store": "~14.0.0",
+    "expo-status-bar": "~2.0.0",
+    "expo-web-browser": "~14.0.1",
     "jazz-react-native": "workspace:*",
     "jazz-tools": "workspace:*",
-    "nativewind": "^2.0.11",
-    "react": "^18.2.0",
-    "react-native": "~0.74.5",
+    "nativewind": "^4.1.21",
+    "react": "^18.3.1",
+    "react-native": "~0.76.3",
     "react-native-fetch-api": "^3.0.0",
     "react-native-get-random-values": "^1.11.0",
-    "react-native-mmkv": "3.0.1",
     "react-native-polyfill-globals": "^3.1.0",
-    "react-native-safe-area-context": "4.10.5",
-    "react-native-screens": "3.31.1",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "4.1.0",
     "react-native-url-polyfill": "^2.0.0",
     "text-encoding": "^0.7.0",
     "web-streams-polyfill": "^3.2.1"
   },
   "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"
+    "@types/react": "^18.3.12",
+    "tailwindcss": "^3.4.15",
+    "typescript": "~5.6.2"
   },
   "private": true
 }

examples/chat-rn/src/App.tsx

@@ -1,3 +1,5 @@
+import "../global.css";
+
 import {
   NavigationContainer,
   useNavigationContainerRef,
@@ -51,7 +53,7 @@ function App() {
     <StrictMode>
       <Jazz.Provider
         auth={auth}
-        peer="wss://cloud.jazz.tools/?key=chat-rn-example-jazz@gcmp.io"
+        peer="wss://cloud.jazz.tools/?key=chat-rn-example-jazz@garden.co"
         storage={undefined}
       >
         <NavigationContainer linking={linking} ref={navigationRef}>

examples/chat-rn/src/chat.tsx

@@ -19,45 +19,35 @@ import { Chat, Message } from "./schema";
 
 export default function ChatScreen({ navigation }: { navigation: any }) {
   const { me, logOut } = useAccount();
-  const [chat, setChat] = useState<Chat>();
+  const [chatId, setChatId] = useState<ID<Chat>>();
+  const loadedChat = useCoState(Chat, chatId, [{}]);
   const [message, setMessage] = useState("");
-  const loadedChat = useCoState(Chat, chat?.id, [{}]);
 
   useEffect(() => {
     navigation.setOptions({
       headerRight: () => <Button onPress={logOut} title="Logout" />,
       headerLeft: () =>
-        chat ? (
+        loadedChat ? (
           <Button
             onPress={() => {
-              if (chat?.id) {
+              if (loadedChat?.id) {
                 Clipboard.setStringAsync(
-                  `https://chat.jazz.tools/#/chat/${chat.id}`,
+                  `https://chat.jazz.tools/#/chat/${loadedChat.id}`,
                 );
-                Alert.alert("Copied to clipboard", `Chat ID: ${chat.id}`);
+                Alert.alert("Copied to clipboard", `Chat ID: ${loadedChat.id}`);
               }
             }}
             title="Share"
           />
         ) : null,
     });
-  }, [navigation, chat]);
+  }, [navigation, loadedChat]);
 
   const createChat = () => {
     const group = Group.create({ owner: me });
     group.addMember("everyone", "writer");
     const chat = Chat.create([], { owner: group });
-    setChat(chat);
-  };
-
-  const loadChat = async (chatId: ID<Chat>) => {
-    try {
-      const chat = await Chat.load(chatId, me, []);
-      setChat(chat);
-    } catch (error) {
-      console.log("Error loading chat", error);
-      Alert.alert("Error", `Error loading chat: ${error}`);
-    }
+    setChatId(chat.id);
   };
 
   const joinChat = () => {
@@ -73,7 +63,7 @@ export default function ChatScreen({ navigation }: { navigation: any }) {
           text: "Join",
           onPress: (chatId) => {
             if (chatId) {
-              loadChat(chatId as ID<Chat>);
+              setChatId(chatId as ID<Chat>);
             } else {
               Alert.alert("Error", "Chat ID cannot be empty.");
             }
@@ -85,9 +75,11 @@ export default function ChatScreen({ navigation }: { navigation: any }) {
   };
 
   const sendMessage = () => {
-    if (!chat) return;
+    if (!loadedChat) return;
     if (message.trim()) {
-      chat.push(Message.create({ text: message }, { owner: chat._owner }));
+      loadedChat.push(
+        Message.create({ text: message }, { owner: loadedChat?._owner }),
+      );
       setMessage("");
     }
   };
@@ -137,7 +129,7 @@ export default function ChatScreen({ navigation }: { navigation: any }) {
 
   return (
     <View className="flex flex-col h-full">
-      {!chat ? (
+      {!loadedChat ? (
         <View className="flex flex-col h-full items-center justify-center">
           <TouchableOpacity
             onPress={createChat}

examples/chat-rn/tailwind.config.js

@@ -1,10 +1,12 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  // NOTE: Update this to include the paths to all of your component files.
   content: [
     "./app/**/*.{js,jsx,ts,tsx}",
     "./components/**/*.{js,jsx,ts,tsx}",
     "./src/**/*.{js,jsx,ts,tsx}",
   ],
+  presets: [require("nativewind/preset")],
   theme: {
     extend: {},
   },

examples/chat-vue/CHANGELOG.md

@@ -1,5 +1,237 @@
 # chat-vue
 
+## 0.0.29
+
+### Patch Changes
+
+- jazz-browser@0.8.50
+- jazz-tools@0.8.50
+- jazz-vue@0.8.50
+
+## 0.0.28
+
+### Patch Changes
+
+- jazz-browser@0.8.49
+- jazz-tools@0.8.49
+- jazz-vue@0.8.49
+
+## 0.0.27
+
+### Patch Changes
+
+- Updated dependencies [635e824]
+- Updated dependencies [0a85982]
+  - jazz-tools@0.8.48
+  - jazz-browser@0.8.48
+  - jazz-vue@0.8.48
+
+## 0.0.26
+
+### Patch Changes
+
+- Updated dependencies [6f0bd7f]
+- Updated dependencies [fa41f8e]
+- Updated dependencies [88d7d9a]
+- Updated dependencies [60e35ea]
+  - jazz-browser@0.8.45
+  - jazz-tools@0.8.45
+  - jazz-vue@0.8.45
+
+## 0.0.25
+
+### Patch Changes
+
+- jazz-browser@0.8.44
+- jazz-tools@0.8.44
+- jazz-vue@0.8.44
+
+## 0.0.24
+
+### Patch Changes
+
+- Updated dependencies [ac216b9]
+  - jazz-browser@0.8.41
+  - jazz-tools@0.8.41
+  - jazz-vue@0.8.41
+
+## 0.0.23
+
+### Patch Changes
+
+- jazz-browser@0.8.40
+- jazz-vue@0.8.40
+
+## 0.0.22
+
+### Patch Changes
+
+- Updated dependencies [e386f2b]
+- Updated dependencies [249eecb]
+  - jazz-browser@0.8.39
+  - jazz-tools@0.8.39
+  - jazz-vue@0.8.39
+
+## 0.0.21
+
+### Patch Changes
+
+- jazz-browser@0.8.38
+- jazz-tools@0.8.38
+- jazz-vue@0.8.38
+
+## 0.0.20
+
+### Patch Changes
+
+- jazz-browser@0.8.37
+- jazz-tools@0.8.37
+- jazz-vue@0.8.25
+
+## 0.0.19
+
+### Patch Changes
+
+- Updated dependencies [441fe27]
+  - jazz-tools@0.8.36
+  - jazz-browser@0.8.36
+  - jazz-vue@0.8.24
+
+## 0.0.18
+
+### Patch Changes
+
+- Updated dependencies [8b87117]
+  - jazz-tools@0.8.35
+  - jazz-browser@0.8.35
+  - jazz-vue@0.8.23
+
+## 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/README.md

@@ -1,39 +1,35 @@
-# chat-vue
+# Chat example with Jazz and Vue
 
-This template should help get you started developing with Vue 3 in Vite.
+## Installing & running the example locally
 
-## Recommended IDE Setup
+(This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
-
-## Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vite.dev/config/).
-
-## Project Setup
-
-```sh
-pnpm install
+Start by downloading the [jazz repository](https://github.com/garden-co/jazz):
+```bash
+npx degit gardencmp/jazz jazz
 ```
 
-### Compile and Hot-Reload for Development
+Go to the todo-vue example directory:
+```bash
+cd jazz/examples/chat-vue
+```
 
-```sh
+Install and build dependencies:
+```bash
+pnpm i && npx turbo build
+```
+
+Start the dev server:
+```bash
 pnpm dev
 ```
 
-### Type-Check, Compile and Minify for Production
+## Questions / problems / feedback
 
-```sh
-pnpm build
-```
+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.
 
-### Lint with [ESLint](https://eslint.org/)
+## Configuration: sync server
 
-```sh
-pnpm lint
-```
+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 `JazzProvider` in [./src/main.ts](./src/main.ts).

examples/chat-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-vue",
-  "version": "0.0.2",
+  "version": "0.0.29",
   "private": true,
   "type": "module",
   "scripts": {
@@ -25,14 +25,14 @@
     "@vitejs/plugin-vue": "^5.1.4",
     "@vitejs/plugin-vue-jsx": "^4.0.1",
     "@vue/tsconfig": "^0.5.1",
-    "autoprefixer": "^10.4.14",
-    "eslint": "^8.46.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.7.0",
     "eslint-plugin-vue": "^9.28.0",
     "npm-run-all2": "^6.2.3",
     "postcss": "^8.4.27",
-    "tailwindcss": "3.3.2",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.10",
+    "tailwindcss": "^3.4.15",
+    "typescript": "~5.6.2",
+    "vite": "^5.4.10",
     "vite-plugin-vue-devtools": "^7.4.6",
     "vue-tsc": "^2.1.6"
   }