Fix mock button alignment

Soft-launch first blog post

.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",

.github/workflows/build-examples.yaml

@@ -17,6 +17,7 @@ jobs:
           "music-player",
           "password-manager",
           "pets",
+          "reactions",
           "todo",
           "onboarding",
         ]

.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", "examples/onboarding"]
+        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

.node-version

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

.nvmrc

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

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: [X](https://x.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.

biome.json

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

@@ -1,33 +0,0 @@
-{
-  "name": "@jazz-e2e/filestream",
-  "private": true,
-  "version": "0.0.111",
-  "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.34",
-    "hash-slash": "workspace:0.2.1",
-    "is-ci": "^3.0.1",
-    "jazz-react": "workspace:0.8.34",
-    "jazz-tools": "workspace:0.8.34",
-    "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,43 +0,0 @@
-import { Account, FileStream, ID } from "jazz-tools";
-import { useEffect } from "react";
-import { useAccount, useCoState } from "./jazz";
-import { UploadedFile } from "./schema";
-
-async function getUploadedFile(me: Account, uploadedFileId: ID<UploadedFile>) {
-  const uploadedFile = await UploadedFile.load(uploadedFileId, me, {});
-
-  if (!uploadedFile) {
-    throw new Error("Uploaded file not found");
-  }
-
-  uploadedFile.coMapDownloaded = true;
-
-  await FileStream.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/src/app.tsx

@@ -1,34 +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 { RetryUnavailable } from "./pages/RetryUnavailable";
-import { TestInput } from "./pages/TestInput";
-
-const router = createBrowserRouter([
-  {
-    path: "/test-input",
-    element: <TestInput />,
-  },
-  {
-    path: "/resume-sync",
-    element: <ResumeSyncState />,
-  },
-  {
-    path: "/retry-unavailable",
-    element: <RetryUnavailable />,
-  },
-  {
-    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,83 @@
 # jazz-example-book-shelf
 
+## 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

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.26",
+  "version": "0.1.35",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -11,19 +11,19 @@
   },
   "dependencies": {
     "clsx": "^2.0.0",
-    "jazz-browser-media-images": "workspace:0.8.34",
-    "jazz-react": "workspace:0.8.34",
-    "jazz-tools": "workspace:0.8.34",
+    "jazz-browser-media-images": "workspace:0.8.45",
+    "jazz-react": "workspace:0.8.45",
+    "jazz-tools": "workspace:0.8.45",
     "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/vercel.json

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

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,111 @@
 # chat-rn-clerk
 
+## 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

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"],
+    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.26",
+  "version": "1.0.37",
   "scripts": {
     "build": "expo export -p ios",
     "start": "expo start",
@@ -17,62 +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",
     "@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,84 @@
 # chat-rn
 
+## 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

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"],
+    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.24",
+  "version": "1.0.34",
   "main": "index.js",
   "scripts": {
     "build": "expo export -p ios",
@@ -13,41 +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",
-    "@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/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,85 @@
 # chat-vue
 
+## 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

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.17",
+  "version": "0.0.26",
   "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"
   }

examples/chat-vue/src/main.ts

@@ -1,7 +1,7 @@
-import "./index.css";
 import { DemoAuthBasicUI, createJazzVueApp, useDemoAuth } from "jazz-vue";
 import { createApp, defineComponent, h } from "vue";
 import App from "./App.vue";
+import "./index.css";
 import router from "./router";
 
 const Jazz = createJazzVueApp();
@@ -18,7 +18,7 @@ const RootComponent = defineComponent({
         JazzProvider,
         {
           auth: authMethod.value,
-          peer: "wss://mesh.jazz.tools/?key=chat-example-jazz@gcmp.io",
+          peer: "wss://cloud.jazz.tools/?key=chat-example-jazz@garden.co",
         },
         {
           default: () => h(App),

examples/chat-vue/tailwind.config.js

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

examples/chat-vue/tailwind.config.ts

@@ -0,0 +1,11 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+
+export default config;

examples/chat/CHANGELOG.md

@@ -1,5 +1,100 @@
 # jazz-example-chat
 
+## 0.0.121
+
+### Patch Changes
+
+- Updated dependencies [6f0bd7f]
+- Updated dependencies [fca6a0b]
+- Updated dependencies [fa41f8e]
+- Updated dependencies [88d7d9a]
+- Updated dependencies [60e35ea]
+  - cojson@0.8.45
+  - jazz-tools@0.8.45
+  - jazz-react@0.8.45
+  - jazz-browser-media-images@0.8.45
+
+## 0.0.120
+
+### Patch Changes
+
+- Updated dependencies [5d20c81]
+  - cojson@0.8.44
+  - jazz-react@0.8.44
+  - jazz-tools@0.8.44
+  - jazz-browser-media-images@0.8.44
+
+## 0.0.119
+
+### Patch Changes
+
+- Updated dependencies [3252502]
+- Updated dependencies [6370348]
+- Updated dependencies [ac216b9]
+  - cojson@0.8.41
+  - jazz-react@0.8.41
+  - jazz-tools@0.8.41
+  - jazz-browser-media-images@0.8.41
+
+## 0.0.118
+
+### Patch Changes
+
+- jazz-browser-media-images@0.8.40
+- jazz-react@0.8.40
+
+## 0.0.117
+
+### Patch Changes
+
+- Updated dependencies [249eecb]
+- Updated dependencies [3121551]
+  - jazz-tools@0.8.39
+  - cojson@0.8.39
+  - jazz-browser-media-images@0.8.39
+  - jazz-react@0.8.39
+
+## 0.0.116
+
+### Patch Changes
+
+- Updated dependencies [b00ee91]
+- Updated dependencies [f488c09]
+  - cojson@0.8.38
+  - jazz-react@0.8.38
+  - jazz-tools@0.8.38
+
+## 0.0.115
+
+### Patch Changes
+
+- Updated dependencies [3d9f12e]
+  - cojson@0.8.37
+  - jazz-react@0.8.37
+  - jazz-tools@0.8.37
+
+## 0.0.114
+
+### Patch Changes
+
+- Updated dependencies [441fe27]
+  - cojson@0.8.36
+  - jazz-tools@0.8.36
+  - jazz-react@0.8.36
+
+## 0.0.113
+
+### Patch Changes
+
+- Updated dependencies [3f15a23]
+- Updated dependencies [9212ab8]
+- Updated dependencies [46f2ab8]
+- Updated dependencies [8b87117]
+- Updated dependencies [a6b6ccf]
+  - cojson@0.8.35
+  - jazz-react@0.8.35
+  - jazz-tools@0.8.35
+
 ## 0.0.112
 
 ### Patch Changes

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

@@ -1,32 +1,27 @@
-# Jazz Chat Example
+# Chat example with Jazz and React
 
 Live version: [https://chat.jazz.tools](https://chat.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`
+(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
-git clone https://github.com/gardencmp/jazz.git
-cd jazz/examples/chat
-pnpm pack --pack-destination /tmp
-mkdir -p ~/jazz-examples/chat # or any other directory
-tar -xf /tmp/jazz-example-chat-* --strip-components 1 -C ~/jazz-examples/chat
-cd ~/jazz-examples/chat
+npx degit gardencmp/jazz jazz
 ```
 
-This ensures that you have the example app without git history and independent of the Jazz multi-package monorepo.
-
-Install dependencies:
-
+Go to the chat example directory:
 ```bash
-pnpm install
+cd jazz/examples/chat
+```
+
+Install and build dependencies:
+```bash
+pnpm i && npx turbo build
 ```
 
 Start the dev server:
-
 ```bash
 pnpm dev
 ```
@@ -39,4 +34,4 @@ If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or
 
 By default, the example app uses [Jazz Cloud](https://jazz.tools/cloud) (`wss://cloud.jazz.tools`) - so cross-device use, invites and collaboration should just work.
 
-You can also run a local sync server by running `npx jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of the `<Jazz.Provider>` provider component in [./src/2_main.tsx](./src/2_main.tsx).
+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/main.tsx](./src/main.tsx).

examples/chat/index.html

@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Jazz Chat Example</title>
   </head>
-  <body class="h-full">
+  <body class="h-full bg-white text-stone-700 dark:text-stone-400 dark:bg-stone-925">
     <div id="root" class="h-full"></div>
     <script type="module" src="/src/app.tsx"></script>
   </body>

examples/chat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-chat",
   "private": true,
-  "version": "0.0.112",
+  "version": "0.0.121",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,37 +13,25 @@
     "test:ui": "playwright test --ui"
   },
   "dependencies": {
-    "@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.34",
-    "hash-slash": "workspace:0.2.1",
-    "jazz-react": "workspace:0.8.34",
-    "jazz-tools": "workspace:0.8.34",
+    "hash-slash": "workspace:*",
+    "jazz-browser-media-images": "workspace:*",
+    "jazz-react": "workspace:*",
+    "jazz-tools": "workspace:*",
     "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"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@playwright/test": "^1.46.1",
-    "@types/qrcode": "^1.5.1",
-    "@types/react": "^18.2.19",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react-swc": "^3.3.2",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.20",
     "is-ci": "^3.0.1",
     "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"
   }
 }

examples/chat/src/app.tsx

@@ -18,7 +18,7 @@ export function App() {
     router.navigate("/#/chat/" + chat.id);
 
     // for https://jazz.tools marketing site demo only
-    onChatLoad(chat, me);
+    onChatLoad(chat);
   };
 
   return (

examples/chat/src/chatScreen.tsx

@@ -1,21 +1,54 @@
+import { createImage } from "jazz-browser-media-images";
 import { ID } from "jazz-tools";
 import { useState } from "react";
-import { useCoState } from "./main.tsx";
+import { useAccount, useCoState } from "./main.tsx";
 import { Chat, Message } from "./schema.ts";
 import {
   BubbleBody,
   BubbleContainer,
+  BubbleImage,
   BubbleInfo,
+  BubbleText,
   ChatBody,
-  ChatInput,
   EmptyChatMessage,
+  ImageInput,
+  InputBar,
+  TextInput,
 } from "./ui.tsx";
 
 export function ChatScreen(props: { chatID: ID<Chat> }) {
   const chat = useCoState(Chat, props.chatID, [{}]);
+  const { me } = useAccount();
   const [showNLastMessages, setShowNLastMessages] = useState(30);
 
-  return chat ? (
+  if (!chat)
+    return (
+      <div className="flex-1 flex justify-center items-center">Loading...</div>
+    );
+
+  const sendImage = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (!me?.profile) return;
+
+    const file = event.currentTarget.files?.[0];
+
+    if (!file) return;
+
+    if (file.size > 5000000) {
+      alert("Please upload an image less than 5MB.");
+      return;
+    }
+
+    createImage(file, { owner: chat._owner }).then((image) => {
+      chat.push(
+        Message.create(
+          { text: file.name, image: image },
+          { owner: chat._owner },
+        ),
+      );
+    });
+  };
+
+  return (
     <>
       <ChatBody>
         {chat.length > 0 ? (
@@ -35,24 +68,31 @@ export function ChatScreen(props: { chatID: ID<Chat> }) {
           </button>
         )}
       </ChatBody>
-      <ChatInput
-        onSubmit={(text) => {
-          chat.push(Message.create({ text }, { owner: chat._owner }));
-        }}
-      />
+
+      <InputBar>
+        <ImageInput onImageChange={sendImage} />
+
+        <TextInput
+          onSubmit={(text) => {
+            chat.push(Message.create({ text }, { owner: chat._owner }));
+          }}
+        />
+      </InputBar>
     </>
-  ) : (
-    <div className="flex-1 flex justify-center items-center">Loading...</div>
   );
 }
 
 function ChatBubble(props: { msg: Message }) {
   const lastEdit = props.msg._edits.text;
   const fromMe = lastEdit.by?.isMe;
+  const { text, image } = props.msg;
 
   return (
     <BubbleContainer fromMe={fromMe}>
-      <BubbleBody fromMe={fromMe}>{props.msg.text}</BubbleBody>
+      <BubbleBody fromMe={fromMe}>
+        {image && <BubbleImage image={image} />}
+        <BubbleText text={text} />
+      </BubbleBody>
       <BubbleInfo by={lastEdit.by?.profile?.name} madeAt={lastEdit.madeAt} />
     </BubbleContainer>
   );

examples/chat/src/index.css

@@ -1,78 +1,3 @@
 @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/src/main.tsx

@@ -1,3 +1,4 @@
+import { ThemeProvider } from "@/themeProvider.tsx";
 import { DemoAuthBasicUI, createJazzReactApp, useDemoAuth } from "jazz-react";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
@@ -13,7 +14,7 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
     <>
       <Jazz.Provider
         auth={auth}
-        peer="wss://cloud.jazz.tools/?key=chat-example-jazz@gcmp.io"
+        peer="wss://cloud.jazz.tools/?key=chat-example-jazz@garden.co"
       >
         {children}
       </Jazz.Provider>
@@ -25,9 +26,11 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
 }
 
 createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <JazzAndAuth>
-      <App />
-    </JazzAndAuth>
-  </StrictMode>,
+  <ThemeProvider>
+    <StrictMode>
+      <JazzAndAuth>
+        <App />
+      </JazzAndAuth>
+    </StrictMode>
+  </ThemeProvider>,
 );

examples/chat/src/schema.ts

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

examples/chat/src/themeProvider.tsx

@@ -0,0 +1,72 @@
+import { createContext, useContext, useEffect, useState } from "react";
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  defaultTheme?: string;
+  storageKey?: string;
+};
+
+type ThemeProviderState = {
+  theme: string;
+  setTheme: (theme: string) => void;
+};
+
+const initialState = {
+  theme: "system",
+  setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "vite-ui-theme",
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState(
+    () => localStorage.getItem(storageKey) || defaultTheme,
+  );
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove("light", "dark");
+
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light";
+
+      root.classList.add(systemTheme);
+      return;
+    }
+
+    root.classList.add(theme);
+  }, [theme]);
+
+  const value = {
+    theme,
+    setTheme: (theme: string) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider");
+
+  return context;
+};

examples/chat/src/ui.tsx

@@ -1,5 +1,8 @@
 import clsx from "clsx";
-import { useId } from "react";
+import { ProgressiveImg } from "jazz-react";
+import { ImageDefinition } from "jazz-tools";
+import { ImageIcon } from "lucide-react";
+import { useId, useRef } from "react";
 
 export function AppContainer(props: { children: React.ReactNode }) {
   return (
@@ -56,7 +59,7 @@ export function BubbleBody(props: {
     <div
       className={clsx(
         "line-clamp-10 text-ellipsis whitespace-pre-wrap",
-        "rounded-2xl max-w-full py-1 px-3 shadow-sm",
+        "rounded-2xl overflow-hidden max-w-[calc(100%-5rem)] shadow-sm p-1",
         props.fromMe
           ? "bg-white dark:bg-stone-700 dark:text-white"
           : "bg-blue text-white",
@@ -67,6 +70,23 @@ export function BubbleBody(props: {
   );
 }
 
+export function BubbleText(props: { text: string }) {
+  return <p className="px-2 leading-relaxed">{props.text}</p>;
+}
+
+export function BubbleImage(props: { image: ImageDefinition }) {
+  return (
+    <ProgressiveImg image={props.image}>
+      {({ src }) => (
+        <img
+          className="h-auto max-h-[20rem] max-w-full rounded-t-xl mb-1"
+          src={src}
+        />
+      )}
+    </ProgressiveImg>
+  );
+}
+
 export function BubbleInfo(props: { by: string | undefined; madeAt: Date }) {
   return (
     <div className="text-xs text-neutral-500 mt-1.5">
@@ -75,17 +95,59 @@ export function BubbleInfo(props: { by: string | undefined; madeAt: Date }) {
   );
 }
 
-export function ChatInput(props: { onSubmit: (text: string) => void }) {
+export function InputBar(props: { children: React.ReactNode }) {
+  return (
+    <div className="p-3 bg-white border-t shadow-2xl mt-auto flex gap-1 dark:bg-transparent dark:border-stone-800">
+      {props.children}
+    </div>
+  );
+}
+
+export function ImageInput({
+  onImageChange,
+}: { onImageChange?: (event: React.ChangeEvent<HTMLInputElement>) => void }) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const onUploadClick = () => {
+    inputRef.current?.click();
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        aria-label="Send image"
+        title="Send image"
+        onClick={onUploadClick}
+        className="text-stone-500 p-1.5 rounded-full hover:bg-stone-100 hover:text-stone-800 dark:hover:bg-stone-800 dark:hover:text-stone-200 transition-colors"
+      >
+        <ImageIcon size={24} strokeWidth={1.5} />
+      </button>
+
+      <label className="sr-only">
+        Image
+        <input
+          ref={inputRef}
+          type="file"
+          accept="image/png, image/jpeg, image/gif"
+          onChange={onImageChange}
+        />
+      </label>
+    </>
+  );
+}
+
+export function TextInput(props: { onSubmit: (text: string) => void }) {
   const inputId = useId();
 
   return (
-    <div className="p-3 bg-white border-t shadow-2xl mt-auto dark:bg-transparent dark:border-stone-800">
+    <div className="flex-1">
       <label className="sr-only" htmlFor={inputId}>
         Type a message and press Enter
       </label>
       <input
         id={inputId}
-        className="rounded-full py-2 px-4 border block w-full dark:bg-black dark:text-white dark:border-stone-700"
+        className="rounded-full py-1 px-3 border block w-full placeholder:text-stone-500 dark:bg-black dark:text-white dark:border-stone-700"
         placeholder="Type a message and press Enter"
         maxLength={2048}
         onKeyDown={({ key, currentTarget: input }) => {

examples/chat/src/util.ts

@@ -2,20 +2,10 @@
 // This is NOT needed to make the chat work
 
 import { Chat } from "@/schema.ts";
-import { Account, CoValue, ID } from "jazz-tools";
 
-export function waitForUpload(id: ID<CoValue>, me: Account) {
-  const syncManager = me._raw.core.node.syncManager;
-  const peers = syncManager.getPeers();
-
-  return Promise.all(
-    peers.map((peer) => syncManager.waitForUploadIntoPeer(peer.id, id)),
-  );
-}
-
-export function onChatLoad(chat: Chat, me: Account) {
+export function onChatLoad(chat: Chat) {
   if (window.parent) {
-    waitForUpload(chat.id, me).then(() => {
+    chat.waitForSync().then(() => {
       window.parent.postMessage(
         { type: "chat-load", id: "/chat/" + chat.id },
         "*",

examples/chat/tailwind.config.js

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

examples/chat/tailwind.config.ts

@@ -0,0 +1,79 @@
+import type { Config } from "tailwindcss";
+import plugin from "tailwindcss/plugin";
+const colors = require("tailwindcss/colors");
+
+const stonePalette = {
+  50: "oklch(0.988281 0.002 75)",
+  75: "oklch(0.980563 0.002 75)",
+  100: "oklch(0.964844 0.002 75)",
+  200: "oklch(0.917969 0.002 75)",
+  300: "oklch(0.853516 0.002 75)",
+  400: "oklch(0.789063 0.002 75)",
+  500: "oklch(0.726563 0.002 75)",
+  600: "oklch(0.613281 0.002 75)",
+  700: "oklch(0.523438 0.002 75)",
+  800: "oklch(0.412109 0.002 75)",
+  900: "oklch(0.302734 0.002 75)",
+  925: "oklch(0.220000 0.002 75)",
+  950: "oklch(0.193359 0.002 75)",
+} as const;
+
+const stonePaletteWithAlpha = { ...stonePalette };
+
+Object.keys(stonePalette).forEach((key) => {
+  stonePaletteWithAlpha[key] = stonePaletteWithAlpha[key].replace(
+    ")",
+    "/ <alpha-value>)",
+  );
+});
+
+const config: Config = {
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        stone: stonePaletteWithAlpha,
+        blue: {
+          ...colors.indigo,
+          500: "#5870F1",
+          DEFAULT: "#3313F7",
+        },
+      },
+      container: {
+        center: true,
+        padding: {
+          DEFAULT: "0.75rem",
+          sm: "1rem",
+        },
+        screens: {
+          md: "500px",
+          lg: "500px",
+          xl: "500px",
+        },
+      },
+    },
+  },
+  plugins: [
+    plugin(({ addBase }) =>
+      addBase({
+        ":root": {
+          "--gcmp-border-color": stonePalette[200],
+          "--gcmp-invert-border-color": stonePalette[900],
+        },
+        "*": {
+          borderColor: "var(--gcmp-border-color)",
+        },
+        "@media (prefers-color-scheme: dark)": {
+          "*": {
+            borderColor: "var(--gcmp-invert-border-color)",
+          },
+        },
+        "*:focus": {
+          outline: "none",
+        },
+      }),
+    ),
+  ],
+} as const;
+
+export default config;

examples/chat/tests/chat.spec.ts

@@ -38,14 +38,11 @@ test("chat between two users", async ({ page }) => {
   await chatPage.sendMessage(message2ByLuigi);
   await chatPage.expectMessageRow(message2ByLuigi);
 
-  // This breaks with (Error: Error reading from peer storage, handling msg)
-  // await chatPage.logout();
-  // await loginPage.loginAs(mario);
+  await chatPage.logout();
+  await loginPage.loginAs(mario);
 
-  // await chatPage.expectLoaded();
+  await page.goto(roomURL);
 
-  // await page.goto(roomURL);
-
-  // await chatPage.expectMessageRow(message1ByMario);
-  // await chatPage.expectMessageRow(message2ByLuigi);
+  await chatPage.expectMessageRow(message1ByMario);
+  await chatPage.expectMessageRow(message2ByLuigi);
 });

examples/chat/tests/pages/LoginPage.ts

@@ -25,7 +25,7 @@ export class LoginPage {
   async loginAs(value: string) {
     await this.page
       .getByRole("button", {
-        name: `Log in as "${value}"`,
+        name: value,
       })
       .click();
   }

examples/chat/vercel.json

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

examples/clerk/CHANGELOG.md

@@ -1,5 +1,83 @@
 # minimal-auth-clerk
 
+## 0.0.20
+
+### Patch Changes
+
+- Updated dependencies [fa41f8e]
+- Updated dependencies [88d7d9a]
+- Updated dependencies [60e35ea]
+  - jazz-tools@0.8.45
+  - jazz-react@0.8.45
+  - jazz-react-auth-clerk@0.8.45
+
+## 0.0.19
+
+### Patch Changes
+
+- jazz-react@0.8.44
+- jazz-react-auth-clerk@0.8.44
+- jazz-tools@0.8.44
+
+## 0.0.18
+
+### Patch Changes
+
+- jazz-react@0.8.41
+- jazz-react-auth-clerk@0.8.41
+- jazz-tools@0.8.41
+
+## 0.0.17
+
+### Patch Changes
+
+- jazz-react@0.8.40
+- jazz-react-auth-clerk@0.8.40
+
+## 0.0.16
+
+### Patch Changes
+
+- Updated dependencies [249eecb]
+  - jazz-tools@0.8.39
+  - jazz-react@0.8.39
+  - jazz-react-auth-clerk@0.8.39
+
+## 0.0.15
+
+### Patch Changes
+
+- jazz-react@0.8.38
+- jazz-react-auth-clerk@0.8.38
+- jazz-tools@0.8.38
+
+## 0.0.14
+
+### Patch Changes
+
+- jazz-react@0.8.37
+- jazz-react-auth-clerk@0.8.37
+- jazz-tools@0.8.37
+
+## 0.0.13
+
+### Patch Changes
+
+- Updated dependencies [441fe27]
+  - jazz-tools@0.8.36
+  - jazz-react@0.8.36
+  - jazz-react-auth-clerk@0.8.36
+
+## 0.0.12
+
+### Patch Changes
+
+- Updated dependencies [9212ab8]
+- Updated dependencies [8b87117]
+  - jazz-react@0.8.35
+  - jazz-tools@0.8.35
+  - jazz-react-auth-clerk@0.8.35
+
 ## 0.0.11
 
 ### Patch Changes

examples/clerk/README.md

@@ -1,3 +1,34 @@
-# Minimal Jazz Auth Clerk Example
+# Clerk authentication example with Jazz and React
+
+This is an example of how to use clerk authentication with Jazz.
+
+Live version: https://clerk-demo.jazz.tools
+
+## Installing & running the example locally
+
+(This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
+
+Start by downloading the [jazz repository](https://github.com/garden-co/jazz):
+```bash
+npx degit gardencmp/jazz jazz
+```
+
+Go to the clerk example directory:
+```bash
+cd jazz/examples/clerk
+```
+
+Install and build dependencies:
+```bash
+pnpm i && npx turbo build
+```
+
+Start the dev server:
+```bash
+pnpm dev
+```
+
+## Questions / problems / feedback
+
+If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
 
-This is a minimal example of how to use Clerk authentication with Jazz.

examples/clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clerk",
   "private": true,
-  "version": "0.0.11",
+  "version": "0.0.20",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -12,9 +12,9 @@
   },
   "dependencies": {
     "@clerk/clerk-react": "^5.4.1",
-    "jazz-tools": "workspace:*",
     "jazz-react": "workspace:*",
-    "jazz-react-auth-clerk": "workspace:0.8.34",
+    "jazz-react-auth-clerk": "workspace:0.8.45",
+    "jazz-tools": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

examples/clerk/src/main.tsx

@@ -28,7 +28,7 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
       {clerk.user && auth ? (
         <Jazz.Provider
           auth={auth}
-          peer="wss://cloud.jazz.tools/?key=minimal-auth-clerk-example@gcmp.io"
+          peer="wss://cloud.jazz.tools/?key=minimal-auth-clerk-example@garden.co"
         >
           {children}
         </Jazz.Provider>

examples/clerk/vercel.json

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

examples/file-share-svelte/.gitignore

@@ -0,0 +1,23 @@
+node_modules
+
+# Output
+.output
+.vercel
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+
+playwright-report

examples/file-share-svelte/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

examples/file-share-svelte/.prettierignore

@@ -0,0 +1,4 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

examples/file-share-svelte/.prettierrc

@@ -0,0 +1,16 @@
+{
+  "useTabs": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "printWidth": 100,
+  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+  "overrides": [
+    {
+      "files": "*.svelte",
+      "options": {
+        "parser": "svelte"
+      }
+    }
+  ]
+}

examples/file-share-svelte/CHANGELOG.md

@@ -0,0 +1,40 @@
+# file-share-svelte
+
+## 0.0.6
+
+### Patch Changes
+
+- Updated dependencies [fa41f8e]
+- Updated dependencies [88d7d9a]
+- Updated dependencies [60e35ea]
+  - jazz-tools@0.8.45
+  - jazz-svelte@0.8.45
+
+## 0.0.5
+
+### Patch Changes
+
+- jazz-tools@0.8.44
+- jazz-svelte@0.8.44
+
+## 0.0.4
+
+### Patch Changes
+
+- jazz-tools@0.8.41
+- jazz-svelte@0.8.41
+
+## 0.0.3
+
+### Patch Changes
+
+- jazz-svelte@0.8.40
+
+## 0.0.2
+
+### Patch Changes
+
+- Updated dependencies [249eecb]
+- Updated dependencies [aa21072]
+  - jazz-tools@0.8.39
+  - jazz-svelte@0.8.39

examples/file-share-svelte/README.md

@@ -0,0 +1,56 @@
+# File share example with Jazz and Svelte
+
+This example app demonstrates how to implement secure file sharing in a Svelte application using Jazz.
+
+## Features
+
+This example showcases how to:
+
+- Upload files securely with end-to-end encryption
+- Generate and manage sharing links
+- Handle file downloads with decryption
+- Manage file access permissions
+- Authenticate users using passkeys
+
+## Getting Started
+
+1. Clone the repository:
+
+```sh
+git clone https://github.com/garden-co/jazz.git
+```
+
+2. Navigate to the example directory:
+
+```sh
+cd examples/file-share-svelte
+```
+
+3. Install dependencies:
+
+```sh
+pnpm install
+```
+
+4. Run the development server:
+
+```sh
+turbo dev
+```
+
+5. Open your browser and visit [http://localhost:5173](http://localhost:5173)
+
+---
+
+Alternatively, you can build and preview the app:
+
+```sh
+turbo build
+pnpm preview
+```
+
+## Learn More
+
+- [Jazz Documentation](https://jazz.tools/docs/svelte)
+- [Svelte Documentation](https://svelte.dev)
+- [WebAuthn API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API)

examples/file-share-svelte/eslint.config.js

@@ -0,0 +1,33 @@
+import js from '@eslint/js';
+import prettier from 'eslint-config-prettier';
+import svelte from 'eslint-plugin-svelte';
+import globals from 'globals';
+import ts from 'typescript-eslint';
+
+export default ts.config(
+  js.configs.recommended,
+  ...ts.configs.recommended,
+  ...svelte.configs['flat/recommended'],
+  prettier,
+  ...svelte.configs['flat/prettier'],
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node
+      }
+    }
+  },
+  {
+    files: ['**/*.svelte'],
+
+    languageOptions: {
+      parserOptions: {
+        parser: ts.parser
+      }
+    }
+  },
+  {
+    ignores: ['build/', '.svelte-kit/', 'dist/']
+  }
+);

examples/file-share-svelte/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "file-share-svelte",
+  "version": "0.0.6",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint .",
+    "format-and-lint": "pnpm run format && pnpm run lint",
+    "format-and-lint:fix": "pnpm run format --write && pnpm run lint --fix",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-vercel": "^5.5.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.1",
+    "@types/is-ci": "^3.0.4",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.7.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-svelte": "^2.36.0",
+    "globals": "^15.11.0",
+    "is-ci": "^3.0.1",
+    "prettier": "^3.3.2",
+    "prettier-plugin-svelte": "^3.2.6",
+    "prettier-plugin-tailwindcss": "^0.6.5",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "tailwindcss": "^3.4.15",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.0.0",
+    "vite": "^5.4.10"
+  },
+  "dependencies": {
+    "@tailwindcss/typography": "^0.5.15",
+    "jazz-svelte": "workspace:*",
+    "jazz-tools": "workspace:*",
+    "lucide-svelte": "^0.463.0",
+    "svelte-sonner": "^0.3.28"
+  }
+}

examples/file-share-svelte/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};

examples/file-share-svelte/src/app.css

@@ -0,0 +1,3 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';

examples/file-share-svelte/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface PageState {}
+    // interface Platform {}
+  }
+}
+
+export {};

examples/file-share-svelte/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>

examples/file-share-svelte/src/lib/components/FileItem.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  import { slide } from 'svelte/transition';
+  import { SharedFile } from '$lib/schema';
+  import { FileStream } from 'jazz-tools';
+  import { File, FileDown, Trash2, Link2 } from 'lucide-svelte';
+  import { useAccount } from '$lib/jazz';
+  import { toast } from 'svelte-sonner';
+  import { formatFileSize } from '$lib/utils';
+
+  const {
+    file,
+    loading = false,
+    onDelete
+  }: {
+    file: SharedFile;
+    loading?: boolean;
+    onDelete: (file: SharedFile) => void;
+  } = $props();
+
+  const { me } = useAccount();
+  const isAdmin = $derived(me && file._owner?.myRole() === 'admin');
+
+  async function downloadFile() {
+    if (!file._refs.file?.id || !me) {
+      toast.error('Failed to download file');
+      return;
+    }
+
+    try {
+      const fileId = file._refs.file.id;
+
+      // Load the file as a blob, can take a while
+      const blob = await FileStream.loadAsBlob(fileId, me, {});
+      if (!blob) {
+        toast.error('Failed to download file');
+        return;
+      }
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = file.name;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+      toast.success('File downloaded successfully');
+    } catch (error) {
+      console.error('Error downloading file:', error);
+      toast.error('Failed to download file');
+    }
+  }
+
+  async function shareFile() {
+    try {
+      const fileUrl = `${window.location.origin}/file/${file.id}`;
+      await navigator.clipboard.writeText(fileUrl);
+      toast.success('Share link copied to clipboard');
+    } catch (error) {
+      console.error('Error sharing file:', error);
+      toast.error('Failed to create share link');
+    }
+  }
+</script>
+
+<div
+  class="flex items-center justify-between rounded-lg border border-gray-200 bg-white p-4"
+  transition:slide={{ duration: 200 }}
+>
+  <div class="flex items-center space-x-4">
+    <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600">
+      <File class="h-6 w-6" />
+    </div>
+    <div>
+      <a href="/file/{file.id}" class="hover:text-blue-600 hover:underline">
+        <h3 class="font-medium text-gray-900">{file.name}</h3>
+      </a>
+      <p class="text-sm text-gray-500">
+        {isAdmin ? 'Owned by you' : ''} • Uploaded {new Date(
+          file.createdAt || 0
+        ).toLocaleDateString()} •
+        {formatFileSize(file.size || 0)}
+      </p>
+    </div>
+  </div>
+
+  <div class="flex items-center space-x-2">
+    {#if loading}
+      <div class="text-sm text-gray-500">Uploading...</div>
+    {:else}
+      <button
+        onclick={downloadFile}
+        class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700"
+        aria-label="Download file"
+      >
+        <FileDown class="h-5 w-5" />
+      </button>
+
+      {#if isAdmin}
+        <button
+          onclick={shareFile}
+          class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700"
+          aria-label="Share file"
+        >
+          <Link2 class="h-5 w-5" />
+        </button>
+
+        <button
+          onclick={() => onDelete(file)}
+          class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-red-600"
+          aria-label="Delete file"
+        >
+          <Trash2 class="h-5 w-5" />
+        </button>
+      {/if}
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

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

@@ -0,0 +1,7 @@
+import { createJazzApp } from 'jazz-svelte';
+import { FileShareAccount } from './schema';
+
+export const { useAccount, useCoState, useAcceptInvite, useAccountOrGuest, Provider } =
+  createJazzApp({
+    AccountSchema: FileShareAccount
+  });

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

@@ -0,0 +1,51 @@
+import { Account, CoList, CoMap, FileStream, Profile, co, Group } from 'jazz-tools';
+
+export class SharedFile extends CoMap {
+  name = co.string;
+  file = co.ref(FileStream);
+  createdAt = co.Date;
+  uploadedAt = co.Date;
+  size = co.number;
+}
+
+export class FileShareProfile extends Profile {
+  name = co.string;
+}
+
+export class ListOfSharedFiles extends CoList.Of(co.ref(SharedFile)) {}
+
+export class FileShareAccountRoot extends CoMap {
+  type = co.string;
+  sharedFiles = co.ref(ListOfSharedFiles);
+  publicGroup = co.ref(Group);
+}
+
+export class FileShareAccount extends Account {
+  profile = co.ref(FileShareProfile);
+  root = co.ref(FileShareAccountRoot);
+
+  /** 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.
+   */
+  async migrate(creationProps?: { name: string }) {
+    super.migrate(creationProps);
+
+    await this._refs.root?.load();
+
+    // Initialize root if it doesn't exist
+    if (!this.root || this.root.type !== 'file-share-account') {
+      // Create a group that will own all shared files
+      const publicGroup = Group.create({ owner: this });
+      publicGroup.addMember('everyone', 'reader');
+
+      this.root = FileShareAccountRoot.create(
+        {
+          type: 'file-share-account',
+          sharedFiles: ListOfSharedFiles.create([], { owner: publicGroup }),
+          publicGroup
+        },
+        { owner: this }
+      );
+    }
+  }
+}

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

@@ -0,0 +1,22 @@
+/**
+ * Formats a file size in bytes to a human readable string
+ * @param bytes The size in bytes
+ * @returns A formatted string like "1.5 MB"
+ */
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+}
+
+/**
+ * Generates a temporary file ID based on the file name and creation time
+ * @param fileName The name of the file
+ * @param createdAt The creation date
+ * @returns A unique file ID string
+ */
+export function generateTempFileId(fileName: string, createdAt: Date): string {
+  return `file-${fileName}-${createdAt.getTime()}`;
+}

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { Provider } from '$lib/jazz';
+  import { PasskeyAuthBasicUI, usePasskeyAuth } from 'jazz-svelte';
+  import { Toaster } from 'svelte-sonner';
+  import '../app.css';
+
+  let { children } = $props();
+  const auth = usePasskeyAuth({
+    appName: 'File Share'
+  });
+</script>
+
+<svelte:head>
+  <title>File Share</title>
+</svelte:head>
+
+<Toaster richColors />
+
+{#if auth.state.state === 'ready'}
+  <div class="fixed inset-0 flex items-center justify-center bg-gray-50/80">
+    <div class="rounded-lg bg-white p-8 shadow-lg">
+      <PasskeyAuthBasicUI state={auth.state} />
+    </div>
+  </div>
+{/if}
+{#if auth.current}
+  <Provider auth={auth.current} peer="wss://cloud.jazz.tools/?key=file-share-svelte@garden.co">
+    <div class="min-h-screen bg-gray-100">
+      {@render children()}
+    </div>
+  </Provider>
+{/if}

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

@@ -0,0 +1,145 @@
+<script lang="ts">
+  import { useAccount, useCoState } from '$lib/jazz';
+  import { SharedFile, ListOfSharedFiles } from '$lib/schema';
+  import { createInviteLink } from 'jazz-svelte';
+  import { FileStream } from 'jazz-tools';
+  import FileItem from '$lib/components/FileItem.svelte';
+  import { SvelteMap } from 'svelte/reactivity';
+  import { generateTempFileId } from '$lib/utils';
+  import { CloudUpload } from 'lucide-svelte';
+
+  const { me, logOut } = useAccount();
+
+  const mySharedFilesId = me?.root?._refs.sharedFiles.id;
+  const sharedFiles = $derived(useCoState(ListOfSharedFiles, mySharedFilesId, [{}]));
+
+  let fileInput: HTMLInputElement;
+
+  type PendingSharedFile = {
+    name: string;
+    id: string;
+    createdAt: Date;
+  };
+
+  // Track files that are currently uploading
+  const uploadingFiles = new SvelteMap<string, PendingSharedFile>();
+
+  async function handleFileUpload(event: Event) {
+    const input = event.target as HTMLInputElement;
+    const files = input.files;
+
+    if (!files || !files.length || !me?.root?.sharedFiles || !me.root.publicGroup) return;
+
+    const file = files[0];
+    const fileName = file.name;
+    const createdAt = new Date();
+    const fileId = generateTempFileId(fileName, createdAt);
+
+    const tempFile: PendingSharedFile = {
+      name: fileName,
+      id: fileId,
+      createdAt
+    };
+
+    // Add to uploading files
+    uploadingFiles.set(fileId, tempFile);
+
+    try {
+      const ownership = { owner: me.root.publicGroup };
+
+      // Create a FileStream from the uploaded file
+      const fileStream = await FileStream.createFromBlob(file, ownership);
+
+      // Create the shared file entry
+      const sharedFile = SharedFile.create(
+        {
+          name: fileName,
+          file: fileStream,
+          createdAt,
+          uploadedAt: new Date(),
+          size: file.size
+        },
+        ownership
+      );
+
+      // Add the file to the user's files list
+      me.root.sharedFiles.push(sharedFile);
+    } finally {
+      uploadingFiles.delete(fileId);
+      fileInput.value = ''; // reset input
+    }
+  }
+
+  async function shareFile(file: SharedFile) {
+    const inviteLink = createInviteLink(file, 'reader');
+    await navigator.clipboard.writeText(inviteLink);
+    alert('Share link copied to clipboard!');
+  }
+
+  async function deleteFile(file: SharedFile) {
+    if (!me?.root?.sharedFiles || !sharedFiles.current) return;
+
+    const index = sharedFiles.current.indexOf(file);
+    if (index > -1) {
+      me.root.sharedFiles.splice(index, 1);
+    }
+  }
+</script>
+
+<div class="min-h-screen bg-gray-50">
+  <div class="container mx-auto max-w-4xl px-4 py-8">
+    <div class="mb-12 flex items-center justify-between">
+      <div>
+        <h1 class="mb-2 text-4xl font-bold text-gray-900">File Share</h1>
+        <h2 class="text-xl text-gray-600">Welcome back, {me?.profile?.name}</h2>
+      </div>
+
+      <button
+        onclick={logOut}
+        class="rounded-lg bg-red-500 px-6 py-2.5 text-sm font-medium text-white transition-colors hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
+      >
+        Log Out
+      </button>
+    </div>
+
+    <!-- Upload Section -->
+    <div class="mb-8 rounded-xl bg-white p-6 shadow-sm">
+      <div
+        class="group relative flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-white p-12 text-center hover:border-blue-500 hover:bg-blue-50"
+        onclick={() => fileInput.click()}
+        onkeydown={(e) => e.key === 'Enter' && fileInput.click()}
+        role="button"
+        tabindex="0"
+      >
+        <CloudUpload class="mb-2 h-8 w-8 text-gray-400 group-hover:text-blue-600" />
+        <h3 class="mb-1 text-lg font-medium text-gray-900">Upload a new file</h3>
+        <p class="text-sm text-gray-500">Click to select a file from your computer</p>
+        <input
+          type="file"
+          bind:this={fileInput}
+          onchange={handleFileUpload}
+          class="hidden"
+          accept="*/*"
+        />
+      </div>
+    </div>
+
+    <!-- Files List -->
+    <div class="space-y-4">
+      {#if sharedFiles.current}
+        {#if !(sharedFiles.current.length === 0 && uploadingFiles.size === 0)}
+          {#each [...sharedFiles.current, ...uploadingFiles.values()] as file (generateTempFileId(file?.name, file?.createdAt))}
+            <FileItem
+              {file}
+              loading={uploadingFiles.has(generateTempFileId(file?.name, file?.createdAt))}
+              onShare={shareFile}
+              onDelete={deleteFile}
+            />
+          {/each}
+        {:else}
+          <p class="text-center text-gray-500">No files yet</p>
+        {/if}
+      {/if}
+    </div>
+  </div>
+</div>

examples/file-share-svelte/src/routes/file/[fileId]/+page.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { useAccount, useCoState } from '$lib/jazz';
+  import { SharedFile } from '$lib/schema';
+  import { File, FileDown, Link2 } from 'lucide-svelte';
+  import type { ID } from 'jazz-tools';
+  import { FileStream } from 'jazz-tools';
+  import { toast } from 'svelte-sonner';
+
+  const { me } = useAccount();
+  const fileId = $page.params.fileId;
+
+  const file = $state(useCoState(SharedFile, fileId as ID<SharedFile>, {}));
+  const isAdmin = $derived(me && file.current?._owner?.myRole() === 'admin');
+
+  async function downloadFile() {
+    if (!file.current?._refs.file?.id || !me) {
+      toast.error('Failed to download file');
+      return;
+    }
+
+    try {
+      const fileId = file.current._refs.file.id;
+      const blob = await FileStream.loadAsBlob(fileId, me, {});
+      if (!blob) {
+        toast.error('Failed to download file');
+        return;
+      }
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = file.current.name;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+      toast.success('File downloaded successfully');
+    } catch (error) {
+      console.error('Error downloading file:', error);
+      toast.error('Failed to download file');
+    }
+  }
+
+  async function shareFile() {
+    try {
+      const fileUrl = `${window.location.origin}/file/${file.current?.id}`;
+      await navigator.clipboard.writeText(fileUrl);
+      toast.success('Share link copied to clipboard');
+    } catch (error) {
+      console.error('Error sharing file:', error);
+      toast.error('Failed to copy share link');
+    }
+  }
+</script>
+
+<svelte:head>
+  <title>{file.current?.name} | File Share</title>
+</svelte:head>
+
+{#if file.current}
+  <div class="container mx-auto max-w-3xl p-4">
+    <div class="rounded-lg bg-white p-6 shadow-md">
+      <div class="mb-6 flex items-center justify-between">
+        <div class="flex items-center gap-3">
+          <File class="h-6 w-6" />
+          <h1 class="text-2xl font-semibold">{file.current.name}</h1>
+        </div>
+        <div class="flex gap-2">
+          {#if isAdmin}
+            <button
+              onclick={shareFile}
+              class="flex items-center gap-2 rounded-md bg-gray-100 px-4 py-2 text-gray-700 hover:bg-gray-200"
+            >
+              <Link2 class="h-4 w-4" />
+              Share
+            </button>
+          {/if}
+          {#if file.current._refs.file}
+            <button
+              onclick={downloadFile}
+              class="flex items-center gap-2 rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
+            >
+              <FileDown class="h-4 w-4" />
+              Download
+            </button>
+          {/if}
+        </div>
+      </div>
+
+      <p class="text-gray-600">
+        {isAdmin ? 'You own this file' : 'Shared with you'} • Uploaded {new Date(
+          file.current.createdAt || 0
+        ).toLocaleDateString()}
+      </p>
+    </div>
+  </div>
+{:else}
+  <div class="container mx-auto max-w-3xl p-4">
+    <div class="rounded-lg bg-white p-6 shadow-md">
+      <p class="text-gray-600">Loading file...</p>
+    </div>
+  </div>
+{/if}

examples/file-share-svelte/svelte.config.js

@@ -0,0 +1,15 @@
+import adapter from '@sveltejs/adapter-vercel';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  // Consult https://svelte.dev/docs/kit/integrations
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+
+  kit: {
+    adapter: adapter()
+  }
+};
+
+export default config;

examples/file-share-svelte/tailwind.config.ts

@@ -0,0 +1,12 @@
+import typography from '@tailwindcss/typography';
+import type { Config } from 'tailwindcss';
+
+export default {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+
+  theme: {
+    extend: {}
+  },
+
+  plugins: [typography]
+} satisfies Config;

examples/file-share-svelte/tests/fixtures/test-file.txt

@@ -0,0 +1 @@
+This is a test file for e2e testing

examples/file-share-svelte/tests/upload.spec.ts

@@ -0,0 +1,82 @@
+import { expect, test } from '@playwright/test';
+import type { BrowserContext } from 'playwright-core';
+import path from 'path';
+
+async function mockAuthenticator(context: BrowserContext) {
+  await context.addInitScript(() => {
+    Object.defineProperty(window.navigator, 'credentials', {
+      value: {
+        ...window.navigator.credentials,
+        create: async () => ({
+          type: 'public-key',
+          id: new Uint8Array([1, 2, 3, 4]),
+          rawId: new Uint8Array([1, 2, 3, 4]),
+          response: {
+            clientDataJSON: new Uint8Array([1]),
+            attestationObject: new Uint8Array([2])
+          }
+        }),
+        get: async () => ({
+          type: 'public-key',
+          id: new Uint8Array([1, 2, 3, 4]),
+          rawId: new Uint8Array([1, 2, 3, 4]),
+          response: {
+            authenticatorData: new Uint8Array([1]),
+            clientDataJSON: new Uint8Array([2]),
+            signature: new Uint8Array([3])
+          }
+        })
+      },
+      configurable: true
+    });
+  });
+}
+
+// Configure the authenticator
+test.beforeEach(async ({ context }) => {
+  // Enable virtual authenticator environment
+  await mockAuthenticator(context);
+});
+
+test('can login with passkey and upload file', async ({ page, browser }) => {
+  // Navigate to the home page
+  await page.goto('/');
+  
+  // Click login and handle the passkey authentication
+  await page.getByRole('textbox').fill('Capitan Hook');
+  await page.getByRole('button', { name: "Sign up" }).click();
+  
+  // Verify successful login by checking for user-specific element
+  await expect(page.getByText("File Share")).toBeVisible();
+  
+  // Prepare file upload
+  const filePath = path.join(import.meta.dirname, 'fixtures/test-file.txt');
+  
+  // Click upload button and handle file selection
+  const fileChooserPromise = page.waitForEvent('filechooser');
+  await page.getByRole('button', { name: /upload|add file/i }).click();
+  const fileChooser = await fileChooserPromise;
+  await fileChooser.setFiles(filePath);
+  
+  // Verify the uploaded file appears in the list
+  await expect(page.getByText('test-file.txt')).toBeVisible();
+
+  await page.getByRole('button', { name: 'Share file' }).click();
+  const inviteLink = await page.evaluate(() => navigator.clipboard.readText());
+
+  // Create a new incognito instance and try to load the shared file
+  const newContext = await browser.newContext();
+  await mockAuthenticator(newContext);
+
+  const newUserPage = await newContext.newPage();
+  await newUserPage.goto(`/`);
+
+  await newUserPage.getByRole('textbox').fill('Mr. Smee');
+  await newUserPage.getByRole('button', { name: "Sign up" }).click();
+
+  await expect(newUserPage.getByText("File Share")).toBeVisible();
+
+  await newUserPage.goto(inviteLink);
+
+  await expect(newUserPage.getByText("test-file.txt")).toBeVisible();
+});