Merge pull request #1638 from garden-co/changeset-release/main

Version Packages

.changeset/afraid-queens-bathe.md

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

.changeset/blue-kids-remain.md

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

.changeset/chatty-cherries-poke.md

@@ -1,5 +0,0 @@
----
-"cojson": patch
----
-
-Drop node 14 polyfill for globalThis.crypto

.changeset/clever-actors-turn.md

@@ -1,5 +0,0 @@
----
-"jazz-tools": patch
----
-
-Make ensureLoaded throw when the resolved value is undefined

.changeset/config.json

@@ -9,12 +9,15 @@
       "cojson-storage",
       "cojson-storage-indexeddb",
       "cojson-storage-sqlite",
+      "cojson-storage-rn-sqlite",
       "cojson-transport-ws",
       "jazz-browser",
       "jazz-auth-clerk",
       "jazz-browser-media-images",
+      "jazz-inspector",
       "jazz-nodejs",
       "jazz-react",
+      "jazz-react-core",
       "jazz-react-auth-clerk",
       "jazz-react-native",
       "jazz-react-native-auth-clerk",

.changeset/eighty-dingos-whisper.md

@@ -1,5 +0,0 @@
----
-"create-jazz-app": patch
----
-
-Add framework and api-key param to create-jazz-app

.changeset/loud-spiders-reply.md

@@ -1,5 +0,0 @@
----
-"create-jazz-app": patch
----
-
-Correctly handle cd when the project name has spaces

.changeset/proud-scissors-double.md

@@ -1,6 +0,0 @@
----
-"jazz-tools": minor
----
-
-Group.addMember and Group.removeMember are not chainable anymore.
-Group.removeMember now returns the internal promise.

.changeset/purple-eagles-cover.md

@@ -1,15 +0,0 @@
----
-"jazz-nodejs": minor
----
-
-Remove ws dependency to use native WebSocket. 
-
-NodeJS versions prior to v22 will need to provide a WebSocket constructor from ws:
-
-```ts
-import { WebSocket } from "ws"
-
-const { worker } = await startWorker({ WebSocket, synServer });
-```
-
-This makes it easier to run workers on every JS runtime.

.changeset/silent-turtles-obey.md

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

.changeset/thick-bags-glow.md

@@ -1,5 +0,0 @@
----
-"cojson": patch
----
-
-Reduce the retries on coValue not found to two

.changeset/thirty-lemons-call.md

@@ -1,5 +0,0 @@
----
-"cojson": patch
----
-
-Add role mapping to Group.extend

.github/actions/android-emulator/action.yml

@@ -0,0 +1,39 @@
+name: Setup Android Emulator
+
+inputs:
+  api-level:
+    description: 'API level to use for the emulator'
+    required: true
+    default: '29'
+
+runs:
+  using: "composite"
+  steps:
+    - name: Enable KVM
+      shell: bash
+      run: |
+        echo 'KERNEL=="kvm", GROUP="kvm", MODE="0666", OPTIONS+="static_node=kvm"' | sudo tee /etc/udev/rules.d/99-kvm4all.rules
+        sudo udevadm control --reload-rules
+        sudo udevadm trigger --name-match=kvm
+
+    - name: Gradle cache
+      uses: gradle/actions/setup-gradle@v4
+
+    - name: AVD cache
+      uses: useblacksmith/cache@v5
+      id: avd-cache
+      with:
+        path: |
+          ~/.android/avd/*
+          ~/.android/adb*
+        key: avd-${{ inputs.api-level }}
+
+    - name: Create AVD and Generate Snapshot for Caching
+      if: steps.avd-cache.outputs.cache-hit != 'true'
+      uses: reactivecircus/android-emulator-runner@v2
+      with:
+        api-level: ${{ inputs.api-level }}
+        force-avd-creation: false
+        emulator-options: -no-window -gpu swiftshader_indirect -noaudio -no-boot-anim -camera-back none -no-metrics
+        disable-animations: false
+        script: echo "Generated AVD snapshot for caching."

.github/workflows/build-examples.yaml

@@ -19,7 +19,6 @@ jobs:
           "pets",
           "reactions",
           "todo",
-          "onboarding",
         ]
 
     steps:

.github/workflows/build-starters.yaml

@@ -9,7 +9,7 @@ jobs:
     runs-on: blacksmith-4vcpu-ubuntu-2204
     strategy:
       matrix:
-        starter: ["react-demo-auth-tailwind"]
+        starter: ["react-passkey-auth"]
 
     steps:
       - uses: actions/checkout@v4

.github/workflows/e2e-rn-test.yml

@@ -4,14 +4,16 @@ on:
   pull_request:
     types: [opened, synchronize, reopened]
     paths:
+      - ".github/actions/android-emulator/**"
+      - ".github/actions/source-code/**"
       - ".github/workflows/e2e-rn-test.yml"
       - "examples/chat-rn/**"
       - "examples/chat-rn-clerk/**"
-      - "packages/jazz-react-native*/**"
+      - "packages/**"
 
 jobs:
   e2e-tests:
-    runs-on: macos-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2204
 
     steps:
       - name: Checkout
@@ -24,55 +26,47 @@ jobs:
         run: |
           mkdir -p ~/output
 
+      - name: Setup JDK
+        uses: actions/setup-java@v4
+        with:
+          distribution: corretto
+          java-version: 22
+          cache: gradle
+
       - name: Pnpm Build
         run: pnpm turbo build --filter="./packages/*"
 
-      - name: iOS Simulator
-        id: ios-simulator
-        uses: futureware-tech/simulator-action@v4
-        with:
-          os: iOS
-          wait_for_boot: true
-
       - name: chat-rn App Pre Build
         working-directory: ./examples/chat-rn
         run: |
           pnpm build
           pnpm expo prebuild --clean
 
-      - name: chat-rn App Build
-        working-directory: ./examples/chat-rn/ios
-        run: |
-          xcodebuild -scheme "jazzchatrn" \
-            -workspace jazzchatrn.xcworkspace \
-            -archivePath $RUNNER_TEMP/jazzchatrn.xcarchive \
-            -derivedDataPath $RUNNER_TEMP/build \
-            -destination "id=${{ steps.ios-simulator.outputs.udid }}" \
-            -configuration Release \
-            -sdk iphonesimulator \
-            build
-          xcrun simctl install booted $RUNNER_TEMP/build/Build/Products/Release-iphonesimulator/jazzchatrn.app
-          xcrun simctl spawn booted log stream --level debug | tee ~/output/sim.log &
-
-
       - name: Install Maestro
         run: |
           curl -fsSL "https://get.maestro.mobile.dev" | bash
 
-      - name: chat-rn App Test
-        id: e2e_test
-        working-directory: ./examples/chat-rn
-        continue-on-error: true
-        run: |
-          export PATH="$PATH":"$HOME/.maestro/bin"
-          export MAESTRO_DRIVER_STARTUP_TIMEOUT=300000 # setting to 5 mins 👀
-          export MAESTRO_CLI_NO_ANALYTICS=1
-          maestro test test/e2e/flow.yml
+      - name: Setup Android Emulator
+        id: android-emulator
+        uses: ./.github/actions/android-emulator/
+        with:
+          api-level: 29
 
-      - name: Copy Maestro and Diagnostic Files
+      - name: Test App
+        uses: reactivecircus/android-emulator-runner@v2
+        id: e2e_test
+        continue-on-error: true
+        with:
+          api-level: 29
+          force-avd-creation: false
+          emulator-options: -no-snapshot-save -no-window -gpu swiftshader_indirect -noaudio -no-boot-anim -camera-back none -no-metrics
+          disable-animations: true
+          working-directory: ./examples/chat-rn/
+          script: ./test/e2e/run.sh
+
+      - name: Copy Maestro Output
         if: steps.e2e_test.outcome != 'success'
         run: |
-          cp -r ~/Library/Logs/DiagnosticReports/* ~/output
           cp -r ~/.maestro/tests/* ~/output
 
       - name: Upload Output Files

.github/workflows/playwright.yml

@@ -13,7 +13,7 @@ jobs:
     continue-on-error: true
     strategy:
       matrix:
-        project: ["tests/e2e", "examples/chat", "examples/file-share-svelte", "examples/form", "examples/music-player", "examples/pets", "examples/onboarding", "starters/react-demo-auth-tailwind"]
+        project: ["tests/e2e", "examples/chat", "examples/file-share-svelte", "examples/form", "examples/music-player", "examples/pets", "starters/react-passkey-auth"]
 
     steps:
       - uses: actions/checkout@v4

.github/workflows/pre-release.yml

@@ -1,7 +1,7 @@
 name: Pre-Publish tagged Pull Requests
 on:
   pull_request:
-    types: [opened, synchronize, reopened]
+    types: [opened, synchronize, reopened, labeled]
 
 jobs:
   pre-release:
@@ -19,4 +19,84 @@ jobs:
         run: pnpm turbo build --filter="./packages/*"
 
       - name: Pre publish
-        run: pnpm exec pkg-pr-new publish "./packages/*"
+        run: pnpm exec pkg-pr-new publish --json output.json --comment=off "./packages/*"
+
+      - name: Post or update comment
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const fs = require('fs');
+            const output = JSON.parse(fs.readFileSync('output.json', 'utf8'));
+
+            const packages = output.packages
+              .map((p) => `- ${p.name}: ${p.url}`)
+              .join('\n');
+
+            const sha =
+              context.event_name === 'pull_request'
+                ? context.payload.pull_request.head.sha
+                : context.payload.after;
+
+            const resolutions = Object.fromEntries(
+              output.packages.map((p) => [p.name, p.url])
+            );
+
+            const commitUrl = `https://github.com/${context.repo.owner}/${context.repo.repo}/commit/${sha}`;
+
+            const body = `## Jazz pre-release
+
+            ### Packages:
+            
+            \`\`\`json
+            ${JSON.stringify(resolutions, null, 4)}
+            \`\`\`
+
+            [View Commit](${commitUrl})`;
+
+            async function logPublishInfo() {
+              console.log('\n' + '='.repeat(50));
+              console.log('Publish Information');
+              console.log('='.repeat(50));
+              console.log('\nPublished Packages:');
+              console.log(output.packages);
+              console.log('\nTemplates:');
+              console.log(templates);
+              console.log(`\nCommit URL: ${commitUrl}`);
+              console.log('\n' + '='.repeat(50));
+            }
+
+            if (context.eventName === 'pull_request') {
+              if (context.issue.number) {
+                await github.rest.issues.createComment({
+                  issue_number: context.issue.number,
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  body: body,
+                });
+              }
+            } else if (context.eventName === 'push') {
+              const pullRequests = await github.rest.pulls.list({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                state: 'open',
+                head: `${context.repo.owner}:${context.ref.replace(
+                  'refs/heads/',
+                  ''
+                )}`,
+              });
+
+              if (pullRequests.data.length > 0) {
+                await github.rest.issues.createComment({
+                  issue_number: pullRequests.data[0].number,
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  body: body,
+                });
+              } else {
+                console.log(
+                  'No open pull request found for this push. Logging publish information to console:'
+                );
+                await logPublishInfo();
+              }
+            }

.github/workflows/release.yml

@@ -25,6 +25,9 @@ jobs:
       - name: Setup Source Code
         uses: ./.github/actions/source-code/
 
+      - name: Build packages
+        run: pnpm exec turbo run build --filter='./packages/*'
+
       - name: Create Release Pull Request or Publish to npm
         id: changesets
         uses: changesets/action@v1

.gitignore

@@ -7,11 +7,15 @@ docsTmp
 coverage
 .direnv
 
+# Typescript
+**/*.tsbuildinfo
+
 # Next.js
 **/.next
 
 # Vite output
 **/dist
+__screenshots__
 
 # Playwright
 test-results

CONTRIBUTING.md

@@ -36,7 +36,7 @@ We welcome all ideas! If you have suggestions, feel free to open an issue marked
 
 ### 5. Local Setup
 
-You'll need Node.js 20.x or 22.x installed (we're working on support for 23.x), and pnpm 9.x installed. If you're using nix, run `nix develop` to get a shell with the correct versions of everything installed.
+You'll need Node.js 22.x installed (we're working on support for 23.x), and pnpm 9.x installed. If you're using nix, run `nix develop` to get a shell with the correct versions of everything installed.
 
 1. **Clone the repository**:
    ```bash
@@ -48,7 +48,25 @@ You'll need Node.js 20.x or 22.x installed (we're working on support for 23.x),
    pnpm install
    ```
 
-3. **Run tests** to verify everything is working:
+3. **Install homepage dependencies**:
+
+   ```bash
+   cd homepage && pnpm install
+   ```
+
+4. **Go back to the project root**:
+
+   ```bash
+   cd ..
+   ```
+
+4. **Build the packages**:
+
+   ```bash
+   pnpm build
+   ```
+
+5. **Run tests** to verify everything is working:
    ```bash
    pnpm test
    ```

biome.json

@@ -12,7 +12,9 @@
       "**/ios/**",
       "**/android/**",
       "packages/jazz-svelte/**",
-      "examples/*svelte*/**"
+      "examples/*svelte*/**",
+      "homepage/homepage/**",
+      "**/package.json"
     ]
   },
   "formatter": {
@@ -42,15 +44,6 @@
     }
   },
   "overrides": [
-    {
-      "include": ["**/package.json"],
-      "linter": {
-        "enabled": false
-      },
-      "formatter": {
-        "enabled": false
-      }
-    },
     {
       "include": ["packages/**/src/**"],
       "linter": {
@@ -61,21 +54,24 @@
       }
     },
     {
-      "include": ["packages/**/src/tests/**", "packages/**/src/test/**"],
+      "include": ["packages/cojson-storage*/**", "cojson-transport-ws/**"],
       "linter": {
+        "enabled": true,
         "rules": {
-          "correctness": {
-            "useImportExtensions": "off"
-          }
+          "recommended": true
         }
       }
     },
     {
-      "include": ["packages/cojson-storage-indexeddb/**"],
+      "include": ["packages/**/src/tests/**"],
       "linter": {
-        "enabled": true,
         "rules": {
-          "recommended": true,
+          "correctness": {
+            "useImportExtensions": "off"
+          },
+          "style": {
+            "noNonNullAssertion": "off"
+          },
           "suspicious": {
             "noExplicitAny": "info"
           }

examples/chat-rn-clerk/CHANGELOG.md

@@ -1,5 +1,213 @@
 # chat-rn-clerk
 
+## 1.0.85
+
+### Patch Changes
+
+- Updated dependencies [57a3dbe]
+- Updated dependencies [a717754]
+- Updated dependencies [a91f343]
+  - jazz-tools@0.11.4
+  - jazz-react-native@0.11.4
+  - jazz-react-native-auth-clerk@0.11.4
+  - jazz-react-native-media-images@0.11.4
+
+## 1.0.84
+
+### Patch Changes
+
+- jazz-react-native@0.11.3
+- jazz-react-native-auth-clerk@0.11.3
+- jazz-tools@0.11.3
+- jazz-react-native-media-images@0.11.3
+
+## 1.0.83
+
+### Patch Changes
+
+- Updated dependencies [6892dc6]
+  - jazz-tools@0.11.2
+  - jazz-react-native@0.11.2
+  - jazz-react-native-auth-clerk@0.11.2
+  - jazz-react-native-media-images@0.11.2
+
+## 1.0.82
+
+### Patch Changes
+
+- jazz-react-native@0.11.1
+- jazz-react-native-auth-clerk@0.11.1
+
+## 1.0.81
+
+### Patch Changes
+
+- Updated dependencies [6a96d8b]
+- Updated dependencies [a35249a]
+- Updated dependencies [b9d194a]
+- Updated dependencies [a4713df]
+- Updated dependencies [34cbdc3]
+- Updated dependencies [f039e8f]
+- Updated dependencies [e22de9f]
+  - jazz-tools@0.11.0
+  - jazz-react-native-media-images@0.11.0
+  - jazz-react-native-auth-clerk@0.11.0
+  - jazz-react-native@0.11.0
+
+## 1.0.80
+
+### Patch Changes
+
+- Updated dependencies [2f99de0]
+  - jazz-tools@0.10.15
+  - jazz-react-native@0.10.15
+  - jazz-react-native-auth-clerk@0.10.15
+  - jazz-react-native-media-images@0.10.15
+
+## 1.0.79
+
+### Patch Changes
+
+- Updated dependencies [75211e3]
+  - jazz-tools@0.10.14
+  - jazz-react-native@0.10.14
+  - jazz-react-native-auth-clerk@0.10.14
+  - jazz-react-native-media-images@0.10.14
+
+## 1.0.78
+
+### Patch Changes
+
+- Updated dependencies [07feedd]
+  - jazz-tools@0.10.13
+  - jazz-react-native@0.10.13
+  - jazz-react-native-auth-clerk@0.10.13
+  - jazz-react-native-media-images@0.10.13
+
+## 1.0.77
+
+### Patch Changes
+
+- Updated dependencies [4612e05]
+  - jazz-tools@0.10.12
+  - jazz-react-native@0.10.12
+  - jazz-react-native-auth-clerk@0.10.12
+  - jazz-react-native-media-images@0.10.12
+
+## 1.0.76
+
+### Patch Changes
+
+- Updated dependencies [5a54e4a]
+  - jazz-react-native@0.10.11
+  - jazz-react-native-auth-clerk@0.10.11
+
+## 1.0.75
+
+### Patch Changes
+
+- Updated dependencies [3405d8f]
+  - jazz-react-native@0.10.10
+  - jazz-react-native-auth-clerk@0.10.10
+
+## 1.0.74
+
+### Patch Changes
+
+- jazz-react-native-auth-clerk@0.10.9
+
+## 1.0.73
+
+### Patch Changes
+
+- Updated dependencies [2fb6428]
+  - jazz-tools@0.10.8
+  - jazz-react-native@0.10.8
+  - jazz-react-native-auth-clerk@0.10.8
+  - jazz-react-native-media-images@0.10.8
+
+## 1.0.72
+
+### Patch Changes
+
+- Updated dependencies [1136d9b]
+- Updated dependencies [0eed228]
+  - jazz-react-native@0.10.7
+  - jazz-tools@0.10.7
+  - jazz-react-native-auth-clerk@0.10.7
+  - jazz-react-native-media-images@0.10.7
+
+## 1.0.71
+
+### Patch Changes
+
+- Updated dependencies [ada802b]
+  - jazz-tools@0.10.6
+  - jazz-react-native@0.10.6
+  - jazz-react-native-auth-clerk@0.10.6
+  - jazz-react-native-media-images@0.10.6
+
+## 1.0.70
+
+### Patch Changes
+
+- Updated dependencies [59ff77e]
+  - jazz-tools@0.10.5
+  - jazz-react-native@0.10.5
+  - jazz-react-native-auth-clerk@0.10.5
+  - jazz-react-native-media-images@0.10.5
+
+## 1.0.69
+
+### Patch Changes
+
+- jazz-react-native@0.10.4
+- jazz-react-native-auth-clerk@0.10.4
+- jazz-tools@0.10.4
+- jazz-react-native-media-images@0.10.4
+
+## 1.0.68
+
+### Patch Changes
+
+- Updated dependencies [d8582fc]
+  - jazz-tools@0.10.3
+  - jazz-react-native@0.10.3
+  - jazz-react-native-auth-clerk@0.10.3
+  - jazz-react-native-media-images@0.10.3
+
+## 1.0.67
+
+### Patch Changes
+
+- jazz-react-native@0.10.2
+- jazz-react-native-auth-clerk@0.10.2
+- jazz-tools@0.10.2
+- jazz-react-native-media-images@0.10.2
+
+## 1.0.66
+
+### Patch Changes
+
+- Updated dependencies [5a63cba]
+  - jazz-tools@0.10.1
+  - jazz-react-native@0.10.1
+  - jazz-react-native-auth-clerk@0.10.1
+  - jazz-react-native-media-images@0.10.1
+
+## 1.0.65
+
+### Patch Changes
+
+- Updated dependencies [498954f]
+- Updated dependencies [d42c2aa]
+- Updated dependencies [dd03464]
+- Updated dependencies [b426342]
+  - jazz-react-native-auth-clerk@0.10.0
+  - jazz-react-native@0.10.0
+  - jazz-tools@0.10.0
+  - jazz-react-native-media-images@0.10.0
+
 ## 1.0.64
 
 ### Patch Changes

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

@@ -1,5 +1,6 @@
 import "../global.css";
 import { ClerkLoaded, ClerkProvider } from "@clerk/clerk-expo";
+import { secureStore } from "@clerk/clerk-expo/secure-store";
 import { useFonts } from "expo-font";
 import { Slot } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
@@ -33,7 +34,11 @@ export default function RootLayout() {
   }
 
   return (
-    <ClerkProvider tokenCache={tokenCache} publishableKey={publishableKey}>
+    <ClerkProvider
+      tokenCache={tokenCache}
+      publishableKey={publishableKey}
+      __experimental_resourceCache={secureStore}
+    >
       <ClerkLoaded>
         <JazzAndAuth>
           <Slot />

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

@@ -19,7 +19,6 @@ config.resolver.nodeModulesPaths = [
   path.resolve(workspaceRoot, "node_modules"),
 ];
 config.resolver.sourceExts = ["mjs", "js", "json", "ts", "tsx"];
-config.resolver.unstable_enablePackageExports = true;
 config.resolver.requireCycleIgnorePatterns = [
   /(^|\/|\\)node_modules($|\/|\\)/,
   /(^|\/|\\)packages($|\/|\\)/,

examples/chat-rn-clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "chat-rn-clerk",
   "main": "index.js",
-  "version": "1.0.64",
+  "version": "1.0.85",
   "scripts": {
     "build": "expo export -p ios",
     "start": "expo start",
@@ -9,23 +9,22 @@
     "format-and-lint:fix": "biome check . --write",
     "android": "expo run:android",
     "ios": "expo run:ios",
-    "web": "expo start --web",
-    "test": "jest --watchAll"
+    "web": "expo start --web"
   },
   "jest": {
     "preset": "jest-expo"
   },
   "dependencies": {
     "@azure/core-asynciterator-polyfill": "^1.0.2",
+    "@bacons/text-decoder": "0.0.0",
     "@bam.tech/react-native-image-resizer": "^3.0.11",
+    "@craftzdog/react-native-buffer": "6.0.5",
     "@clerk/clerk-expo": "^2.2.21",
     "@expo/vector-icons": "^14.0.2",
     "@op-engineering/op-sqlite": "^11.2.12",
     "@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": "^52.0.0",
     "expo-build-properties": "~0.13.1",
@@ -51,18 +50,14 @@
     "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.20.2",
     "react-native-get-random-values": "^1.11.0",
-    "react-native-polyfill-globals": "^3.1.0",
-    "react-native-quick-base64": "^2.1.2",
     "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.13",
-    "text-encoding": "^0.7.0",
-    "web-streams-polyfill": "^3.2.1"
+    "readable-stream": "4.7.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

examples/chat-rn-clerk/polyfills.js

@@ -1,8 +1,17 @@
-import "react-native-polyfill-globals/auto";
-import "@azure/core-asynciterator-polyfill";
-import { Buffer } from "buffer";
-import { polyfillGlobal } from "react-native/Libraries/Utilities/PolyfillFunctions";
-import { ReadableStream } from "web-streams-polyfill/ponyfill/es6";
+/* eslint-disable import/order */
 
+// @ts-expect-error - @types/react-native doesn't cover this file
+import { polyfillGlobal } from "react-native/Libraries/Utilities/PolyfillFunctions";
+
+import { Buffer } from "@craftzdog/react-native-buffer";
 polyfillGlobal("Buffer", () => Buffer);
+
+// @ts-expect-error - @types/readable-stream doesn't have ReadableStream type
+import { ReadableStream } from "readable-stream";
 polyfillGlobal("ReadableStream", () => ReadableStream);
+
+import "@azure/core-asynciterator-polyfill";
+
+import "@bacons/text-decoder/install";
+
+import "react-native-get-random-values";

examples/chat-rn/CHANGELOG.md

@@ -1,5 +1,170 @@
 # chat-rn
 
+## 1.0.81
+
+### Patch Changes
+
+- Updated dependencies [57a3dbe]
+- Updated dependencies [a717754]
+- Updated dependencies [a91f343]
+  - jazz-tools@0.11.4
+  - jazz-react-native@0.11.4
+
+## 1.0.80
+
+### Patch Changes
+
+- jazz-react-native@0.11.3
+- jazz-tools@0.11.3
+
+## 1.0.79
+
+### Patch Changes
+
+- Updated dependencies [6892dc6]
+  - jazz-tools@0.11.2
+  - jazz-react-native@0.11.2
+
+## 1.0.78
+
+### Patch Changes
+
+- jazz-react-native@0.11.1
+
+## 1.0.77
+
+### Patch Changes
+
+- Updated dependencies [6a96d8b]
+- Updated dependencies [a35249a]
+- Updated dependencies [b9d194a]
+- Updated dependencies [a4713df]
+- Updated dependencies [34cbdc3]
+- Updated dependencies [f039e8f]
+- Updated dependencies [e22de9f]
+  - jazz-tools@0.11.0
+  - jazz-react-native@0.11.0
+
+## 1.0.76
+
+### Patch Changes
+
+- Updated dependencies [2f99de0]
+  - jazz-tools@0.10.15
+  - jazz-react-native@0.10.15
+
+## 1.0.75
+
+### Patch Changes
+
+- Updated dependencies [75211e3]
+  - jazz-tools@0.10.14
+  - jazz-react-native@0.10.14
+
+## 1.0.74
+
+### Patch Changes
+
+- Updated dependencies [07feedd]
+  - jazz-tools@0.10.13
+  - jazz-react-native@0.10.13
+
+## 1.0.73
+
+### Patch Changes
+
+- Updated dependencies [4612e05]
+  - jazz-tools@0.10.12
+  - jazz-react-native@0.10.12
+
+## 1.0.72
+
+### Patch Changes
+
+- Updated dependencies [5a54e4a]
+  - jazz-react-native@0.10.11
+
+## 1.0.71
+
+### Patch Changes
+
+- Updated dependencies [3405d8f]
+  - jazz-react-native@0.10.10
+
+## 1.0.70
+
+### Patch Changes
+
+- Updated dependencies [2fb6428]
+  - jazz-tools@0.10.8
+  - jazz-react-native@0.10.8
+
+## 1.0.69
+
+### Patch Changes
+
+- Updated dependencies [1136d9b]
+- Updated dependencies [0eed228]
+  - jazz-react-native@0.10.7
+  - jazz-tools@0.10.7
+
+## 1.0.68
+
+### Patch Changes
+
+- Updated dependencies [ada802b]
+  - jazz-tools@0.10.6
+  - jazz-react-native@0.10.6
+
+## 1.0.67
+
+### Patch Changes
+
+- Updated dependencies [59ff77e]
+  - jazz-tools@0.10.5
+  - jazz-react-native@0.10.5
+
+## 1.0.66
+
+### Patch Changes
+
+- jazz-react-native@0.10.4
+- jazz-tools@0.10.4
+
+## 1.0.65
+
+### Patch Changes
+
+- Updated dependencies [d8582fc]
+  - jazz-tools@0.10.3
+  - jazz-react-native@0.10.3
+
+## 1.0.64
+
+### Patch Changes
+
+- jazz-react-native@0.10.2
+- jazz-tools@0.10.2
+
+## 1.0.63
+
+### Patch Changes
+
+- Updated dependencies [5a63cba]
+  - jazz-tools@0.10.1
+  - jazz-react-native@0.10.1
+
+## 1.0.62
+
+### Patch Changes
+
+- Updated dependencies [498954f]
+- Updated dependencies [d42c2aa]
+- Updated dependencies [dd03464]
+- Updated dependencies [b426342]
+  - jazz-react-native@0.10.0
+  - jazz-tools@0.10.0
+
 ## 1.0.61
 
 ### Patch Changes

examples/chat-rn/metro.config.js

@@ -19,7 +19,6 @@ config.resolver.nodeModulesPaths = [
   path.resolve(workspaceRoot, "node_modules"),
 ];
 config.resolver.sourceExts = ["mjs", "js", "json", "ts", "tsx"];
-config.resolver.unstable_enablePackageExports = true;
 config.resolver.requireCycleIgnorePatterns = [
   /(^|\/|\\)node_modules($|\/|\\)/,
   /(^|\/|\\)packages($|\/|\\)/,

examples/chat-rn/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-rn",
-  "version": "1.0.61",
+  "version": "1.0.81",
   "main": "index.js",
   "scripts": {
     "build": "expo export -p ios",
@@ -13,17 +13,17 @@
   },
   "dependencies": {
     "@azure/core-asynciterator-polyfill": "^1.0.2",
+    "@bacons/text-decoder": "0.0.0",
+    "@craftzdog/react-native-buffer": "6.0.5",
     "@op-engineering/op-sqlite": "^11.2.12",
     "@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": "^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",
@@ -34,14 +34,11 @@
     "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-polyfill-globals": "^3.1.0",
     "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"
+    "readable-stream": "4.7.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

examples/chat-rn/polyfills.js

@@ -1,6 +1,17 @@
-import "react-native-polyfill-globals/auto";
-import "@azure/core-asynciterator-polyfill";
-import { polyfillGlobal } from "react-native/Libraries/Utilities/PolyfillFunctions";
-import { ReadableStream } from "web-streams-polyfill/ponyfill/es6";
+/* eslint-disable import/order */
 
+// @ts-expect-error - @types/react-native doesn't cover this file
+import { polyfillGlobal } from "react-native/Libraries/Utilities/PolyfillFunctions";
+
+import { Buffer } from "@craftzdog/react-native-buffer";
+polyfillGlobal("Buffer", () => Buffer);
+
+// @ts-expect-error - @types/readable-stream doesn't have ReadableStream type
+import { ReadableStream } from "readable-stream";
 polyfillGlobal("ReadableStream", () => ReadableStream);
+
+import "@azure/core-asynciterator-polyfill";
+
+import "@bacons/text-decoder/install";
+
+import "react-native-get-random-values";

examples/chat-rn/test/e2e/flow.yml

@@ -25,11 +25,8 @@ appId: com.jazz.chatrn
 - assertVisible: "Logout"
 
 # send a message
-- runFlow:
-    label: "Erase existing message"
-    file: erase_text.yml
-    env:
-      id: "message-input"
+- tapOn:
+    id: "message-input"
 - inputText: "bro, low key, it do be like that tho"
 - tapOn:
     id: "send-button"
@@ -45,3 +42,9 @@ appId: com.jazz.chatrn
 # logout
 - tapOn: "Logout"
 - assertVisible: "Anonymous user"
+# This doesn't work on CI, maybe because Android has a different alert dialog
+# - tapOn: "Join chat"
+# - inputText: "co_zFs6KFyhxPw4xtw83tcEMzeHUNv" # Use a static id because maestro doesn't have access to the system clipboard
+# - pressKey: "enter"
+# - assertVisible: "boorad"
+# - assertVisible: "bro, low key, it do be like that tho"

examples/chat-rn/test/e2e/run.sh

@@ -0,0 +1,20 @@
+#!/bin/bash
+
+# This script is necessary, because unlike ios, the android emulator action
+# accepts a script, runs it as your tests, then terminates.
+
+set -e
+
+# build and install the app
+echo "Building and installing Android app."
+echo "If it fails, its output will be in artifact: android-install.log..."
+cd ./android/
+./gradlew installRelease >> ~/output/android-install.log 2>&1
+cd ..
+
+# run the e2e tests
+export PATH="$PATH":"$HOME/.maestro/bin"
+export MAESTRO_DRIVER_STARTUP_TIMEOUT=300000 # setting to 5 mins 👀
+export MAESTRO_CLI_NO_ANALYTICS=1
+export MAESTRO_CLI_ANALYSIS_NOTIFICATION_DISABLED=true
+maestro test test/e2e/flow.yml

examples/chat-vue/CHANGELOG.md

@@ -1,5 +1,178 @@
 # chat-vue
 
+## 0.0.66
+
+### Patch Changes
+
+- Updated dependencies [57a3dbe]
+- Updated dependencies [a717754]
+- Updated dependencies [a91f343]
+  - jazz-tools@0.11.4
+  - jazz-browser@0.11.4
+  - jazz-vue@0.11.4
+
+## 0.0.65
+
+### Patch Changes
+
+- jazz-browser@0.11.3
+- jazz-tools@0.11.3
+- jazz-vue@0.11.3
+
+## 0.0.64
+
+### Patch Changes
+
+- Updated dependencies [6892dc6]
+  - jazz-tools@0.11.2
+  - jazz-browser@0.11.2
+  - jazz-vue@0.11.2
+
+## 0.0.63
+
+### Patch Changes
+
+- Updated dependencies [6a96d8b]
+- Updated dependencies [a35249a]
+- Updated dependencies [b9d194a]
+- Updated dependencies [a4713df]
+- Updated dependencies [34cbdc3]
+- Updated dependencies [18428ea]
+- Updated dependencies [f039e8f]
+- Updated dependencies [e22de9f]
+  - jazz-tools@0.11.0
+  - jazz-browser@0.11.0
+  - jazz-vue@0.11.0
+
+## 0.0.62
+
+### Patch Changes
+
+- Updated dependencies [2f99de0]
+  - jazz-tools@0.10.15
+  - jazz-browser@0.10.15
+  - jazz-vue@0.10.15
+
+## 0.0.61
+
+### Patch Changes
+
+- Updated dependencies [75211e3]
+  - jazz-tools@0.10.14
+  - jazz-browser@0.10.14
+  - jazz-vue@0.10.14
+
+## 0.0.60
+
+### Patch Changes
+
+- Updated dependencies [07feedd]
+  - jazz-tools@0.10.13
+  - jazz-browser@0.10.13
+  - jazz-vue@0.10.13
+
+## 0.0.59
+
+### Patch Changes
+
+- Updated dependencies [4612e05]
+  - jazz-tools@0.10.12
+  - jazz-vue@0.10.12
+  - jazz-browser@0.10.12
+
+## 0.0.58
+
+### Patch Changes
+
+- Updated dependencies [834203f]
+  - jazz-browser@0.10.9
+  - jazz-vue@0.10.9
+
+## 0.0.57
+
+### Patch Changes
+
+- Updated dependencies [1e87fc7]
+- Updated dependencies [2fb6428]
+  - jazz-browser@0.10.8
+  - jazz-tools@0.10.8
+  - jazz-vue@0.10.8
+
+## 0.0.56
+
+### Patch Changes
+
+- Updated dependencies [1136d9b]
+- Updated dependencies [bf76d79]
+- Updated dependencies [0eed228]
+  - jazz-browser@0.10.7
+  - jazz-tools@0.10.7
+  - jazz-vue@0.10.7
+
+## 0.0.55
+
+### Patch Changes
+
+- Updated dependencies [ada802b]
+  - jazz-tools@0.10.6
+  - jazz-browser@0.10.6
+  - jazz-vue@0.10.6
+
+## 0.0.54
+
+### Patch Changes
+
+- Updated dependencies [59ff77e]
+  - jazz-tools@0.10.5
+  - jazz-browser@0.10.5
+  - jazz-vue@0.10.5
+
+## 0.0.53
+
+### Patch Changes
+
+- jazz-browser@0.10.4
+- jazz-tools@0.10.4
+- jazz-vue@0.10.4
+
+## 0.0.52
+
+### Patch Changes
+
+- Updated dependencies [d8582fc]
+  - jazz-tools@0.10.3
+  - jazz-browser@0.10.3
+  - jazz-vue@0.10.3
+
+## 0.0.51
+
+### Patch Changes
+
+- jazz-browser@0.10.2
+- jazz-tools@0.10.2
+- jazz-vue@0.10.2
+
+## 0.0.50
+
+### Patch Changes
+
+- Updated dependencies [5a63cba]
+  - jazz-tools@0.10.1
+  - jazz-browser@0.10.1
+  - jazz-vue@0.10.1
+
+## 0.0.49
+
+### Patch Changes
+
+- Updated dependencies [498954f]
+- Updated dependencies [d42c2aa]
+- Updated dependencies [dd03464]
+- Updated dependencies [b426342]
+  - jazz-browser@0.10.0
+  - jazz-tools@0.10.0
+  - jazz-vue@0.10.0
+
 ## 0.0.48
 
 ### Patch Changes

examples/chat-vue/package.json

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

examples/chat/CHANGELOG.md

@@ -1,5 +1,183 @@
 # jazz-example-chat
 
+## 0.0.163
+
+### Patch Changes
+
+- 2074e45: In the chat app example, show a "Message not readable" placeholder, if messages from a chat list are not readable by the user.
+- Updated dependencies [57a3dbe]
+- Updated dependencies [a717754]
+- Updated dependencies [a91f343]
+  - jazz-tools@0.11.4
+  - jazz-browser-media-images@0.11.4
+  - jazz-react@0.11.4
+
+## 0.0.162
+
+### Patch Changes
+
+- jazz-react@0.11.3
+- jazz-tools@0.11.3
+- jazz-browser-media-images@0.11.3
+
+## 0.0.161
+
+### Patch Changes
+
+- Updated dependencies [6892dc6]
+  - jazz-tools@0.11.2
+  - jazz-react@0.11.2
+  - jazz-browser-media-images@0.11.2
+
+## 0.0.160
+
+### Patch Changes
+
+- jazz-react@0.11.1
+
+## 0.0.159
+
+### Patch Changes
+
+- Updated dependencies [6a96d8b]
+- Updated dependencies [a35249a]
+- Updated dependencies [b9d194a]
+- Updated dependencies [a4713df]
+- Updated dependencies [34cbdc3]
+- Updated dependencies [f039e8f]
+- Updated dependencies [e22de9f]
+  - jazz-tools@0.11.0
+  - jazz-browser-media-images@0.11.0
+  - jazz-react@0.11.0
+
+## 0.0.158
+
+### Patch Changes
+
+- Updated dependencies [2f99de0]
+  - jazz-tools@0.10.15
+  - jazz-browser-media-images@0.10.15
+  - jazz-react@0.10.15
+
+## 0.0.157
+
+### Patch Changes
+
+- Updated dependencies [75211e3]
+  - jazz-tools@0.10.14
+  - jazz-react@0.10.14
+  - jazz-browser-media-images@0.10.14
+
+## 0.0.156
+
+### Patch Changes
+
+- Updated dependencies [07feedd]
+  - jazz-tools@0.10.13
+  - jazz-browser-media-images@0.10.13
+  - jazz-react@0.10.13
+
+## 0.0.155
+
+### Patch Changes
+
+- Updated dependencies [4612e05]
+  - jazz-tools@0.10.12
+  - jazz-react@0.10.12
+  - jazz-browser-media-images@0.10.12
+
+## 0.0.154
+
+### Patch Changes
+
+- jazz-browser-media-images@0.10.9
+- jazz-react@0.10.9
+
+## 0.0.153
+
+### Patch Changes
+
+- Updated dependencies [2fb6428]
+  - jazz-tools@0.10.8
+  - jazz-react@0.10.8
+  - jazz-browser-media-images@0.10.8
+
+## 0.0.152
+
+### Patch Changes
+
+- Updated dependencies [1136d9b]
+- Updated dependencies [0eed228]
+  - jazz-react@0.10.7
+  - jazz-tools@0.10.7
+  - jazz-browser-media-images@0.10.7
+
+## 0.0.151
+
+### Patch Changes
+
+- Updated dependencies [1d71ca1]
+- Updated dependencies [ada802b]
+  - hash-slash@0.2.2
+  - jazz-react@0.10.6
+  - jazz-tools@0.10.6
+  - jazz-browser-media-images@0.10.6
+
+## 0.0.150
+
+### Patch Changes
+
+- Updated dependencies [59ff77e]
+  - jazz-tools@0.10.5
+  - jazz-browser-media-images@0.10.5
+  - jazz-react@0.10.5
+
+## 0.0.149
+
+### Patch Changes
+
+- jazz-react@0.10.4
+- jazz-tools@0.10.4
+- jazz-browser-media-images@0.10.4
+
+## 0.0.148
+
+### Patch Changes
+
+- Updated dependencies [d8582fc]
+  - jazz-tools@0.10.3
+  - jazz-browser-media-images@0.10.3
+  - jazz-react@0.10.3
+
+## 0.0.147
+
+### Patch Changes
+
+- jazz-react@0.10.2
+- jazz-tools@0.10.2
+- jazz-browser-media-images@0.10.2
+
+## 0.0.146
+
+### Patch Changes
+
+- Updated dependencies [5a63cba]
+  - jazz-tools@0.10.1
+  - jazz-browser-media-images@0.10.1
+  - jazz-react@0.10.1
+
+## 0.0.145
+
+### Patch Changes
+
+- Updated dependencies [498954f]
+- Updated dependencies [d42c2aa]
+- Updated dependencies [dd03464]
+- Updated dependencies [b426342]
+  - jazz-react@0.10.0
+  - jazz-tools@0.10.0
+  - jazz-browser-media-images@0.10.0
+
 ## 0.0.144
 
 ### Patch Changes

examples/chat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-chat",
   "private": true,
-  "version": "0.0.144",
+  "version": "0.0.163",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -9,8 +9,8 @@
     "format-and-lint": "biome check .",
     "format-and-lint:fix": "biome check . --write",
     "preview": "vite preview",
-    "test": "playwright test",
-    "test:ui": "playwright test --ui"
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui"
   },
   "dependencies": {
     "clsx": "^2.0.0",

examples/chat/src/app.tsx

@@ -31,6 +31,7 @@ export function App() {
         <input
           type="text"
           value={me?.profile?.name ?? ""}
+          className="bg-transparent"
           onChange={(e) => {
             if (!me?.profile) return;
             me.profile.name = e.target.value;

examples/chat/src/chatScreen.tsx

@@ -1,6 +1,6 @@
 import { createImage } from "jazz-browser-media-images";
-import { useCoState } from "jazz-react";
-import { ID } from "jazz-tools";
+import { useAccount, useCoState } from "jazz-react";
+import { Account, ID } from "jazz-tools";
 import { useState } from "react";
 import { Chat, Message } from "./schema.ts";
 import {
@@ -17,6 +17,7 @@ import {
 } from "./ui.tsx";
 
 export function ChatScreen(props: { chatID: ID<Chat> }) {
+  const account = useAccount();
   const chat = useCoState(Chat, props.chatID, [{}]);
   const [showNLastMessages, setShowNLastMessages] = useState(30);
 
@@ -47,7 +48,7 @@ export function ChatScreen(props: { chatID: ID<Chat> }) {
           chat
             .slice(-showNLastMessages)
             .reverse() // this plus flex-col-reverse on ChatBody gives us scroll-to-bottom behavior
-            .map((msg) => <ChatBubble msg={msg} key={msg.id} />)
+            .map((msg) => <ChatBubble me={account.me} msg={msg} key={msg.id} />)
         ) : (
           <EmptyChatMessage />
         )}
@@ -74,7 +75,20 @@ export function ChatScreen(props: { chatID: ID<Chat> }) {
   );
 }
 
-function ChatBubble(props: { msg: Message }) {
+function ChatBubble(props: { me: Account; msg: Message }) {
+  if (!props.me.canRead(props.msg)) {
+    return (
+      <BubbleContainer fromMe={false}>
+        <BubbleBody fromMe={false}>
+          <BubbleText
+            text="Message not readable"
+            className="text-gray-500 italic"
+          />
+        </BubbleBody>
+      </BubbleContainer>
+    );
+  }
+
   const lastEdit = props.msg._edits.text;
   const fromMe = lastEdit.by?.isMe;
   const { text, image } = props.msg;

examples/chat/src/ui.tsx

@@ -6,7 +6,7 @@ import { useId, useRef } from "react";
 
 export function AppContainer(props: { children: React.ReactNode }) {
   return (
-    <div className="flex flex-col justify-between w-screen h-screen bg-stone-50 dark:bg-black dark:text-white">
+    <div className="flex flex-col justify-between w-screen h-screen bg-stone-50 dark:bg-stone-925 dark:text-white">
       {props.children}
     </div>
   );
@@ -14,7 +14,7 @@ export function AppContainer(props: { children: React.ReactNode }) {
 
 export function TopBar(props: { children: React.ReactNode }) {
   return (
-    <div className="p-3 bg-white w-full flex justify-between gap-2 border-b dark:bg-transparent dark:border-stone-800">
+    <div className="p-3 bg-white w-full flex justify-between gap-2 border-b dark:bg-transparent dark:border-stone-900">
       {props.children}
     </div>
   );
@@ -33,7 +33,7 @@ export function ChatBody(props: { children: React.ReactNode }) {
 
 export function EmptyChatMessage() {
   return (
-    <div className="h-full text-base text-stone-500 flex items-center justify-center px-3 text-lg md:text-2xl">
+    <div className="h-full text-base text-stone-500 flex items-center justify-center px-3 md:text-2xl">
       Start a conversation below.
     </div>
   );
@@ -61,7 +61,7 @@ export function BubbleBody(props: {
         "line-clamp-10 text-ellipsis whitespace-pre-wrap",
         "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-white dark:bg-stone-900 dark:text-white"
           : "bg-blue text-white",
       )}
     >
@@ -70,8 +70,12 @@ export function BubbleBody(props: {
   );
 }
 
-export function BubbleText(props: { text: string }) {
-  return <p className="px-2 leading-relaxed">{props.text}</p>;
+export function BubbleText(props: { text: string; className?: string }) {
+  return (
+    <p className={clsx("px-2 leading-relaxed", props.className)}>
+      {props.text}
+    </p>
+  );
 }
 
 export function BubbleImage(props: { image: ImageDefinition }) {
@@ -97,7 +101,7 @@ export function BubbleInfo(props: { by: string | undefined; madeAt: Date }) {
 
 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">
+    <div className="p-3 bg-white border-t shadow-2xl mt-auto flex gap-1 dark:bg-transparent dark:border-stone-900">
       {props.children}
     </div>
   );
@@ -147,7 +151,7 @@ export function TextInput(props: { onSubmit: (text: string) => void }) {
       </label>
       <input
         id={inputId}
-        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"
+        className="rounded-full py-1 px-3 border block w-full placeholder:text-stone-500 dark:bg-stone-925 dark:text-white dark:border-stone-900"
         placeholder="Type a message and press Enter"
         maxLength={2048}
         onKeyDown={({ key, currentTarget: input }) => {

examples/clerk/CHANGELOG.md

@@ -1,5 +1,182 @@
 # minimal-auth-clerk
 
+## 0.0.62
+
+### Patch Changes
+
+- Updated dependencies [57a3dbe]
+- Updated dependencies [a717754]
+- Updated dependencies [a91f343]
+  - jazz-tools@0.11.4
+  - jazz-react@0.11.4
+  - jazz-react-auth-clerk@0.11.4
+
+## 0.0.61
+
+### Patch Changes
+
+- jazz-react@0.11.3
+- jazz-react-auth-clerk@0.11.3
+- jazz-tools@0.11.3
+
+## 0.0.60
+
+### Patch Changes
+
+- Updated dependencies [6892dc6]
+  - jazz-tools@0.11.2
+  - jazz-react@0.11.2
+  - jazz-react-auth-clerk@0.11.2
+
+## 0.0.59
+
+### Patch Changes
+
+- jazz-react@0.11.1
+- jazz-react-auth-clerk@0.11.1
+
+## 0.0.58
+
+### Patch Changes
+
+- Updated dependencies [6a96d8b]
+- Updated dependencies [a35249a]
+- Updated dependencies [b9d194a]
+- Updated dependencies [a4713df]
+- Updated dependencies [34cbdc3]
+- Updated dependencies [f039e8f]
+- Updated dependencies [e22de9f]
+  - jazz-tools@0.11.0
+  - jazz-react-auth-clerk@0.11.0
+  - jazz-react@0.11.0
+
+## 0.0.57
+
+### Patch Changes
+
+- Updated dependencies [2f99de0]
+  - jazz-tools@0.10.15
+  - jazz-react@0.10.15
+  - jazz-react-auth-clerk@0.10.15
+
+## 0.0.56
+
+### Patch Changes
+
+- Updated dependencies [75211e3]
+  - jazz-tools@0.10.14
+  - jazz-react@0.10.14
+  - jazz-react-auth-clerk@0.10.14
+
+## 0.0.55
+
+### Patch Changes
+
+- Updated dependencies [07feedd]
+  - jazz-tools@0.10.13
+  - jazz-react@0.10.13
+  - jazz-react-auth-clerk@0.10.13
+
+## 0.0.54
+
+### Patch Changes
+
+- Updated dependencies [4612e05]
+  - jazz-tools@0.10.12
+  - jazz-react@0.10.12
+  - jazz-react-auth-clerk@0.10.12
+
+## 0.0.53
+
+### Patch Changes
+
+- jazz-react@0.10.9
+- jazz-react-auth-clerk@0.10.9
+
+## 0.0.52
+
+### Patch Changes
+
+- Updated dependencies [2fb6428]
+  - jazz-tools@0.10.8
+  - jazz-react@0.10.8
+  - jazz-react-auth-clerk@0.10.8
+
+## 0.0.51
+
+### Patch Changes
+
+- Updated dependencies [1136d9b]
+- Updated dependencies [0eed228]
+  - jazz-react-auth-clerk@0.10.7
+  - jazz-react@0.10.7
+  - jazz-tools@0.10.7
+
+## 0.0.50
+
+### Patch Changes
+
+- Updated dependencies [1d71ca1]
+- Updated dependencies [ada802b]
+  - jazz-react-auth-clerk@0.10.6
+  - jazz-react@0.10.6
+  - jazz-tools@0.10.6
+
+## 0.0.49
+
+### Patch Changes
+
+- Updated dependencies [59ff77e]
+  - jazz-tools@0.10.5
+  - jazz-react@0.10.5
+  - jazz-react-auth-clerk@0.10.5
+
+## 0.0.48
+
+### Patch Changes
+
+- jazz-react@0.10.4
+- jazz-react-auth-clerk@0.10.4
+- jazz-tools@0.10.4
+
+## 0.0.47
+
+### Patch Changes
+
+- Updated dependencies [d8582fc]
+  - jazz-tools@0.10.3
+  - jazz-react@0.10.3
+  - jazz-react-auth-clerk@0.10.3
+
+## 0.0.46
+
+### Patch Changes
+
+- jazz-react@0.10.2
+- jazz-react-auth-clerk@0.10.2
+- jazz-tools@0.10.2
+
+## 0.0.45
+
+### Patch Changes
+
+- Updated dependencies [5a63cba]
+  - jazz-tools@0.10.1
+  - jazz-react@0.10.1
+  - jazz-react-auth-clerk@0.10.1
+
+## 0.0.44
+
+### Patch Changes
+
+- Updated dependencies [498954f]
+- Updated dependencies [d42c2aa]
+- Updated dependencies [dd03464]
+- Updated dependencies [b426342]
+  - jazz-react-auth-clerk@0.10.0
+  - jazz-react@0.10.0
+  - jazz-tools@0.10.0
+
 ## 0.0.43
 
 ### Patch Changes

examples/clerk/package.json

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

examples/file-share-svelte/CHANGELOG.md

@@ -1,5 +1,156 @@
 # file-share-svelte
 
+## 0.0.46
+
+### Patch Changes
+
+- Updated dependencies [57a3dbe]
+- Updated dependencies [a717754]
+- Updated dependencies [a91f343]
+  - jazz-tools@0.11.4
+  - jazz-svelte@0.11.4
+
+## 0.0.45
+
+### Patch Changes
+
+- jazz-svelte@0.11.3
+- jazz-tools@0.11.3
+
+## 0.0.44
+
+### Patch Changes
+
+- Updated dependencies [6892dc6]
+  - jazz-tools@0.11.2
+  - jazz-svelte@0.11.2
+
+## 0.0.43
+
+### Patch Changes
+
+- Updated dependencies [6a96d8b]
+- Updated dependencies [a35249a]
+- Updated dependencies [b9d194a]
+- Updated dependencies [a4713df]
+- Updated dependencies [34cbdc3]
+- Updated dependencies [f039e8f]
+- Updated dependencies [e22de9f]
+  - jazz-tools@0.11.0
+  - jazz-svelte@0.11.0
+
+## 0.0.42
+
+### Patch Changes
+
+- Updated dependencies [2f99de0]
+  - jazz-tools@0.10.15
+  - jazz-svelte@0.10.15
+
+## 0.0.41
+
+### Patch Changes
+
+- Updated dependencies [75211e3]
+  - jazz-tools@0.10.14
+  - jazz-svelte@0.10.14
+
+## 0.0.40
+
+### Patch Changes
+
+- Updated dependencies [07feedd]
+  - jazz-tools@0.10.13
+  - jazz-svelte@0.10.13
+
+## 0.0.39
+
+### Patch Changes
+
+- Updated dependencies [4612e05]
+  - jazz-svelte@0.10.12
+  - jazz-tools@0.10.12
+
+## 0.0.38
+
+### Patch Changes
+
+- jazz-svelte@0.10.9
+
+## 0.0.37
+
+### Patch Changes
+
+- Updated dependencies [2fb6428]
+  - jazz-tools@0.10.8
+  - jazz-svelte@0.10.8
+
+## 0.0.36
+
+### Patch Changes
+
+- Updated dependencies [1136d9b]
+- Updated dependencies [0eed228]
+  - jazz-svelte@0.10.7
+  - jazz-tools@0.10.7
+
+## 0.0.35
+
+### Patch Changes
+
+- Updated dependencies [ada802b]
+  - jazz-tools@0.10.6
+  - jazz-svelte@0.10.6
+
+## 0.0.34
+
+### Patch Changes
+
+- Updated dependencies [59ff77e]
+  - jazz-tools@0.10.5
+  - jazz-svelte@0.10.5
+
+## 0.0.33
+
+### Patch Changes
+
+- jazz-svelte@0.10.4
+- jazz-tools@0.10.4
+
+## 0.0.32
+
+### Patch Changes
+
+- Updated dependencies [d8582fc]
+  - jazz-tools@0.10.3
+  - jazz-svelte@0.10.3
+
+## 0.0.31
+
+### Patch Changes
+
+- jazz-svelte@0.10.2
+- jazz-tools@0.10.2
+
+## 0.0.30
+
+### Patch Changes
+
+- Updated dependencies [5a63cba]
+  - jazz-tools@0.10.1
+  - jazz-svelte@0.10.1
+
+## 0.0.29
+
+### Patch Changes
+
+- Updated dependencies [498954f]
+- Updated dependencies [d42c2aa]
+- Updated dependencies [dd03464]
+- Updated dependencies [b426342]
+  - jazz-tools@0.10.0
+  - jazz-svelte@0.10.0
+
 ## 0.0.28
 
 ### Patch Changes

examples/file-share-svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "file-share-svelte",
-  "version": "0.0.28",
+  "version": "0.0.46",
   "private": true,
   "type": "module",
   "scripts": {
@@ -13,8 +13,8 @@
     "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"
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui"
   },
   "devDependencies": {
     "@sveltejs/adapter-vercel": "^5.5.0",

examples/filestream/CHANGELOG.md

@@ -1,5 +1,128 @@
 # jazz-tailwind-demo-auth-starter
 
+## 0.0.2
+
+### Patch Changes
+
+- Updated dependencies [57a3dbe]
+- Updated dependencies [a717754]
+- Updated dependencies [a91f343]
+  - jazz-tools@0.11.4
+  - jazz-react@0.11.4
+
+## 0.0.52
+
+### Patch Changes
+
+- Updated dependencies [2f99de0]
+  - jazz-tools@0.10.15
+  - jazz-react@0.10.15
+
+## 0.0.51
+
+### Patch Changes
+
+- Updated dependencies [75211e3]
+  - jazz-tools@0.10.14
+  - jazz-react@0.10.14
+
+## 0.0.50
+
+### Patch Changes
+
+- Updated dependencies [07feedd]
+  - jazz-tools@0.10.13
+  - jazz-react@0.10.13
+
+## 0.0.49
+
+### Patch Changes
+
+- Updated dependencies [4612e05]
+  - jazz-tools@0.10.12
+  - jazz-react@0.10.12
+
+## 0.0.48
+
+### Patch Changes
+
+- jazz-react@0.10.9
+
+## 0.0.47
+
+### Patch Changes
+
+- Updated dependencies [2fb6428]
+  - jazz-tools@0.10.8
+  - jazz-react@0.10.8
+
+## 0.0.46
+
+### Patch Changes
+
+- Updated dependencies [1136d9b]
+- Updated dependencies [0eed228]
+  - jazz-react@0.10.7
+  - jazz-tools@0.10.7
+
+## 0.0.45
+
+### Patch Changes
+
+- Updated dependencies [1d71ca1]
+- Updated dependencies [ada802b]
+  - jazz-react@0.10.6
+  - jazz-tools@0.10.6
+
+## 0.0.44
+
+### Patch Changes
+
+- Updated dependencies [59ff77e]
+  - jazz-tools@0.10.5
+  - jazz-react@0.10.5
+
+## 0.0.43
+
+### Patch Changes
+
+- jazz-react@0.10.4
+- jazz-tools@0.10.4
+
+## 0.0.42
+
+### Patch Changes
+
+- Updated dependencies [d8582fc]
+  - jazz-tools@0.10.3
+  - jazz-react@0.10.3
+
+## 0.0.41
+
+### Patch Changes
+
+- jazz-react@0.10.2
+- jazz-tools@0.10.2
+
+## 0.0.40
+
+### Patch Changes
+
+- Updated dependencies [5a63cba]
+  - jazz-tools@0.10.1
+  - jazz-react@0.10.1
+
+## 0.0.39
+
+### Patch Changes
+
+- Updated dependencies [498954f]
+- Updated dependencies [d42c2aa]
+- Updated dependencies [dd03464]
+- Updated dependencies [b426342]
+  - jazz-react@0.10.0
+  - jazz-tools@0.10.0
+
 ## 0.0.38
 
 ### Patch Changes

examples/filestream/README.md

@@ -1,4 +1,8 @@
-# Onboarding example with Jazz and React
+# File upload example with Jazz and React
+
+This is an example of how to upload and render images with Jazz.
+
+Live version: https://file-upload-demo.jazz.tools
 
 ## Getting started
 
@@ -11,12 +15,12 @@ You can either
 
 Create a new Jazz project, and use this example as a template.
 ```bash
-npx create-jazz-app@latest --example onboarding --project-name onboarding
+npx create-jazz-app@latest --example file-upload --project-name file-upload
 ```
 
 Go to the new project directory.
 ```bash
-cd onboarding
+cd file-upload
 ```
 
 Run the dev server.
@@ -40,7 +44,7 @@ pnpm i && npx turbo build
 
 Go to the example directory.
 ```bash
-cd jazz/examples/onboarding/
+cd jazz/examples/file-upload/
 ```
 
 Start the dev server.
@@ -49,12 +53,14 @@ pnpm dev
 ```
 
 Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
+
 ## Questions / problems / feedback
 
 If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
 
+
 ## 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 cojson-simple-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 `<JazzProvider>` provider component in [./src/main.tsx](./src/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 `JazzProvider` component in [./src/main.tsx](./src/main.tsx).

examples/filestream/package.json

@@ -1,34 +1,30 @@
 {
-  "name": "jazz-example-onboarding",
+  "name": "filestream",
   "private": true,
-  "version": "0.0.45",
+  "version": "0.0.2",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
-    "format-and-lint": "biome check .",
-    "format-and-lint:fix": "biome check . --write",
+    "build": "tsc -b && vite build",
     "preview": "vite preview",
-    "test": "playwright test",
-    "test:ui": "playwright test --ui",
-    "sync": "jazz-run sync"
+    "format-and-lint": "biome check .",
+    "format-and-lint:fix": "biome check . --write"
   },
   "dependencies": {
-    "jazz-browser-media-images": "workspace:*",
     "jazz-react": "workspace:*",
     "jazz-tools": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@playwright/test": "^1.50.1",
+    "@biomejs/biome": "1.9.4",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
     "autoprefixer": "^10.4.20",
+    "globals": "^15.11.0",
     "is-ci": "^3.0.1",
-    "jazz-run": "workspace:*",
-    "postcss": "^8.4.27",
+    "postcss": "^8.5.3",
     "tailwindcss": "^3.4.17",
     "typescript": "~5.6.2",
     "vite": "^6.0.11"

examples/filestream/src/App.tsx

@@ -0,0 +1,37 @@
+import { FileWidget } from "./FileWidget.js";
+import { Logo } from "./Logo.tsx";
+
+function App() {
+  return (
+    <>
+      <main className="container mt-16 flex flex-col gap-8">
+        <Logo />
+        <FileWidget />
+        <p className="text-center">
+          Edit the form above,{" "}
+          <button
+            type="button"
+            onClick={() => window.location.reload()}
+            className="font-semibold underline"
+          >
+            refresh
+          </button>{" "}
+          this page, and see your changes persist.
+        </p>
+
+        <p className="text-center my-16">
+          Go to{" "}
+          <a
+            className="font-semibold underline"
+            href="https://jazz.tools/docs/react/guide"
+          >
+            jazz.tools/docs/react/guide
+          </a>{" "}
+          for a full tutorial.
+        </p>
+      </main>
+    </>
+  );
+}
+
+export default App;

examples/filestream/src/FileWidget.tsx

@@ -0,0 +1,269 @@
+"use client";
+import { useAccount } from "jazz-react";
+import { FileStream } from "jazz-tools";
+import { useRef, useState } from "react";
+
+export function FileWidget() {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const dragAndDropElementRef = useRef<HTMLDivElement>(null);
+  const [isUploading, setIsUploading] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+  const { me } = useAccount();
+
+  async function handleUpload(event: React.FormEvent) {
+    event.preventDefault();
+    setError(null);
+    if (!me?.profile) {
+      setError("User profile not found");
+      return;
+    }
+
+    setProgress(0);
+
+    const file = inputRef.current?.files?.[0];
+    if (!file) {
+      setError("Please select a file");
+      return;
+    }
+
+    try {
+      setIsUploading(true);
+      me.profile.file = await FileStream.createFromBlob(file, {
+        onProgress: (p) => setProgress(Math.round(p * 100)),
+      });
+    } catch (error) {
+      setError(
+        error instanceof Error ? error.message : "Failed to upload file",
+      );
+      console.error("Error uploading file:", error);
+    } finally {
+      setIsUploading(false);
+    }
+  }
+
+  function handleDelete() {
+    if (!me?.profile) return;
+    delete me.profile?.file;
+  }
+
+  async function handleDownload() {
+    if (!me?.profile) return;
+
+    const file = me.profile.file;
+    if (!file) return;
+
+    try {
+      const blob = file.toBlob();
+      const url = URL.createObjectURL(blob || new Blob());
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = file.id || "download";
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error("Error downloading file:", error);
+    }
+  }
+
+  function formatFileSize(bytes?: number): string {
+    if (!bytes) return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+  }
+
+  const onDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragAndDropElementRef?.current?.classList.replace(
+      "border-stone-400",
+      "border-blue-700",
+    );
+  };
+
+  const onDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragAndDropElementRef?.current?.classList.replace(
+      "border-stone-400",
+      "border-blue-700",
+    );
+  };
+
+  const onDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragAndDropElementRef?.current?.classList.replace(
+      "border-blue-700",
+      "border-stone-400",
+    );
+  };
+
+  const onDrop = async (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragAndDropElementRef?.current?.classList.replace(
+      "border-blue-700",
+      "border-stone-400",
+    );
+
+    if (!me?.profile) {
+      setError("User profile not found");
+      return;
+    }
+
+    const droppedFiles = e.dataTransfer.files;
+    if (!droppedFiles || droppedFiles.length === 0) {
+      return;
+    }
+
+    const file = droppedFiles[0];
+    setProgress(0);
+
+    try {
+      setIsUploading(true);
+      me.profile.file = await FileStream.createFromBlob(file, {
+        onProgress: (p) => setProgress(Math.round(p * 100)),
+      });
+    } catch (error) {
+      setError(
+        error instanceof Error ? error.message : "Failed to upload file",
+      );
+      console.error("Error uploading file:", error);
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  if (me?.profile?.file == null) {
+    return (
+      <div className="flex flex-col gap-4">
+        <div
+          className="flex flex-col border-2 border-dashed border-stone-400 h-48 items-center justify-center bg-stone-100 m-5 rounded-md"
+          ref={dragAndDropElementRef}
+          onDragEnter={onDragEnter}
+          onDragOver={onDragOver}
+          onDragLeave={onDragLeave}
+          onDrop={onDrop}
+        >
+          <p>Drag & drop your file here</p>
+        </div>
+        <form onSubmit={handleUpload} className="flex gap-2">
+          <input
+            className="bg-stone-100 py-1.5 px-2 text-sm rounded-md w-4/5"
+            ref={inputRef}
+            type="file"
+            accept="file"
+            onChange={() => setError(null)}
+            disabled={isUploading}
+          />
+
+          <button
+            type="submit"
+            className="bg-stone-100 py-1.5 px-3 text-sm rounded-md disabled:opacity-50"
+            disabled={isUploading}
+          >
+            {isUploading ? `Uploading...` : "Upload file"}
+          </button>
+        </form>
+        {error && (
+          <div className="text-red-800 text-sm pl-4" role="alert">
+            {error}
+          </div>
+        )}
+
+        {isUploading && (
+          <div className="flex gap-2 items-center">
+            <div className="py-1.5 px-3 text-sm">Progress: {progress}%</div>
+            <div className="h-2 bg-stone-200 rounded-full flex-1">
+              <div
+                className="h-full bg-blue-500 rounded-full transition-all duration-300"
+                style={{ width: `${progress}%` }}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  const fileData = me?.profile?.file?.getChunks();
+  const mimeType = fileData?.mimeType || "unknown";
+
+  return (
+    <div className="gap-2">
+      <div className="p-4">
+        <div className="space-y-2">
+          <div className="flex justify-between">
+            <span className="font-bold">File name</span>
+            <span>{fileData?.fileName}</span>
+          </div>
+          <div className="flex justify-between">
+            <span className="font-bold">Type</span>
+            <span>{mimeType}</span>
+          </div>
+          <div className="flex justify-between">
+            <span className="font-bold">Size</span>
+            <span>{formatFileSize(fileData?.totalSizeBytes)}</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex gap-2 justify-end">
+        <button
+          className="bg-stone-100 py-1.5 px-3 text-sm rounded-md"
+          onClick={handleDelete}
+        >
+          Delete file
+        </button>
+
+        <button
+          className="bg-stone-100 py-1.5 px-3 text-sm rounded-md"
+          onClick={handleDownload}
+        >
+          Download file
+        </button>
+      </div>
+
+      <div className="w-full justify-center pt-8">
+        {fileData?.mimeType?.startsWith("image/") && (
+          <div className="flex justify-center">
+            <img
+              src={URL.createObjectURL(
+                me?.profile?.file?.toBlob() || new Blob(),
+              )}
+              alt="File preview"
+              className="max-w-xs mb-4"
+            />
+          </div>
+        )}
+
+        {fileData?.mimeType?.startsWith("audio/") && (
+          <div className="flex justify-center">
+            <audio
+              src={URL.createObjectURL(
+                me?.profile?.file?.toBlob() || new Blob(),
+              )}
+              controls
+              className="w-full mb-4"
+            />
+          </div>
+        )}
+
+        {fileData?.mimeType?.startsWith("video/") && (
+          <div className="flex justify-center">
+            <video
+              src={URL.createObjectURL(
+                me?.profile?.file?.toBlob() || new Blob(),
+              )}
+              controls
+              className="w-full mb-4"
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

examples/filestream/src/apiKey.ts

@@ -0,0 +1 @@
+export const apiKey = "filestream-example-jazz@garden.co";

examples/filestream/src/main.tsx

@@ -0,0 +1,29 @@
+import { JazzProvider } from "jazz-react";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+import { apiKey } from "./apiKey.ts";
+import "./index.css";
+import { JazzAccount } from "./schema.ts";
+
+// We use this to identify the app in the passkey auth
+export const APPLICATION_NAME = "Jazz File Stream Example";
+
+declare module "jazz-react" {
+  export interface Register {
+    Account: JazzAccount;
+  }
+}
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <JazzProvider
+      sync={{
+        peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
+      }}
+      AccountSchema={JazzAccount}
+    >
+      <App />
+    </JazzProvider>
+  </StrictMode>,
+);

examples/filestream/src/schema.ts

@@ -0,0 +1,14 @@
+import { Account, FileStream, Profile, co } from "jazz-tools";
+
+export class JazzProfile extends Profile {
+  file = co.ref(FileStream, { optional: true });
+}
+
+export class JazzAccount extends Account {
+  profile = co.ref(JazzProfile);
+
+  /** The account migration is run on account creation and on every log-in.
+   *  You can use it to set up the account root and any other initial CoValues you need.
+   */
+  migrate(this: JazzAccount) {}
+}

examples/filestream/tests/starter.spec.ts

@@ -2,7 +2,7 @@ import { expect, test } from "@playwright/test";
 
 test("home page loads", async ({ page }) => {
   await page.goto("/");
-  await expect(page.getByText("Welcome, Anonymous user!")).toBeVisible();
+  await expect(page.getByText("Welcome!")).toBeVisible();
 
   await page.getByLabel("Name").fill("Bob");
   await expect(page.getByText("Welcome, Bob!")).toBeVisible();

examples/filestream/vercel.json

@@ -1,7 +1,7 @@
 {
   "build": {
     "env": {
-      "APP_NAME": "react-demo-auth-tailwind"
+      "APP_NAME": "filestream"
     }
   },
   "ignoreCommand": "node ../../ignore-vercel-build.js"

examples/form/CHANGELOG.md

@@ -1,5 +1,186 @@
 # form
 
+## 0.1.4
+
+### Patch Changes
+
+- Updated dependencies [57a3dbe]
+- Updated dependencies [a717754]
+- Updated dependencies [a91f343]
+  - jazz-tools@0.11.4
+  - jazz-browser-media-images@0.11.4
+  - jazz-react@0.11.4
+
+## 0.1.3
+
+### Patch Changes
+
+- jazz-react@0.11.3
+- jazz-tools@0.11.3
+- jazz-browser-media-images@0.11.3
+
+## 0.1.2
+
+### Patch Changes
+
+- Updated dependencies [6892dc6]
+  - jazz-tools@0.11.2
+  - jazz-react@0.11.2
+  - jazz-browser-media-images@0.11.2
+
+## 0.1.1
+
+### Patch Changes
+
+- jazz-react@0.11.1
+
+## 0.1.0
+
+### Minor Changes
+
+- 18428ea: PasskeyAuth: Sets `profile.name` only if a non-empty username is passed to `signUp`
+
+### Patch Changes
+
+- Updated dependencies [6a96d8b]
+- Updated dependencies [a35249a]
+- Updated dependencies [b9d194a]
+- Updated dependencies [a4713df]
+- Updated dependencies [34cbdc3]
+- Updated dependencies [f039e8f]
+- Updated dependencies [e22de9f]
+  - jazz-tools@0.11.0
+  - jazz-browser-media-images@0.11.0
+  - jazz-react@0.11.0
+
+## 0.0.53
+
+### Patch Changes
+
+- Updated dependencies [2f99de0]
+  - jazz-tools@0.10.15
+  - jazz-browser-media-images@0.10.15
+  - jazz-react@0.10.15
+
+## 0.0.52
+
+### Patch Changes
+
+- Updated dependencies [75211e3]
+  - jazz-tools@0.10.14
+  - jazz-react@0.10.14
+  - jazz-browser-media-images@0.10.14
+
+## 0.0.51
+
+### Patch Changes
+
+- Updated dependencies [07feedd]
+  - jazz-tools@0.10.13
+  - jazz-browser-media-images@0.10.13
+  - jazz-react@0.10.13
+
+## 0.0.50
+
+### Patch Changes
+
+- Updated dependencies [4612e05]
+  - jazz-tools@0.10.12
+  - jazz-react@0.10.12
+  - jazz-browser-media-images@0.10.12
+
+## 0.0.49
+
+### Patch Changes
+
+- jazz-browser-media-images@0.10.9
+- jazz-react@0.10.9
+
+## 0.0.48
+
+### Patch Changes
+
+- Updated dependencies [2fb6428]
+  - jazz-tools@0.10.8
+  - jazz-react@0.10.8
+  - jazz-browser-media-images@0.10.8
+
+## 0.0.47
+
+### Patch Changes
+
+- Updated dependencies [1136d9b]
+- Updated dependencies [0eed228]
+  - jazz-react@0.10.7
+  - jazz-tools@0.10.7
+  - jazz-browser-media-images@0.10.7
+
+## 0.0.46
+
+### Patch Changes
+
+- Updated dependencies [1d71ca1]
+- Updated dependencies [ada802b]
+  - hash-slash@0.2.2
+  - jazz-react@0.10.6
+  - jazz-tools@0.10.6
+  - jazz-browser-media-images@0.10.6
+
+## 0.0.45
+
+### Patch Changes
+
+- Updated dependencies [59ff77e]
+  - jazz-tools@0.10.5
+  - jazz-browser-media-images@0.10.5
+  - jazz-react@0.10.5
+
+## 0.0.44
+
+### Patch Changes
+
+- jazz-react@0.10.4
+- jazz-tools@0.10.4
+- jazz-browser-media-images@0.10.4
+
+## 0.0.43
+
+### Patch Changes
+
+- Updated dependencies [d8582fc]
+  - jazz-tools@0.10.3
+  - jazz-browser-media-images@0.10.3
+  - jazz-react@0.10.3
+
+## 0.0.42
+
+### Patch Changes
+
+- jazz-react@0.10.2
+- jazz-tools@0.10.2
+- jazz-browser-media-images@0.10.2
+
+## 0.0.41
+
+### Patch Changes
+
+- Updated dependencies [5a63cba]
+  - jazz-tools@0.10.1
+  - jazz-browser-media-images@0.10.1
+  - jazz-react@0.10.1
+
+## 0.0.40
+
+### Patch Changes
+
+- Updated dependencies [498954f]
+- Updated dependencies [d42c2aa]
+- Updated dependencies [dd03464]
+- Updated dependencies [b426342]
+  - jazz-react@0.10.0
+  - jazz-tools@0.10.0
+  - jazz-browser-media-images@0.10.0
+
 ## 0.0.39
 
 ### Patch Changes

examples/form/package.json

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

examples/form/src/App.tsx

@@ -1,5 +1,4 @@
 import { useIframeHashRouter } from "hash-slash";
-import { useAccount } from "jazz-react";
 import { ID } from "jazz-tools";
 import { CreateOrder } from "./CreateOrder.tsx";
 import { EditOrder } from "./EditOrder.tsx";
@@ -7,25 +6,10 @@ import { Orders } from "./Orders.tsx";
 import { BubbleTeaOrder } from "./schema.ts";
 
 function App() {
-  const { me, logOut } = useAccount();
   const router = useIframeHashRouter();
 
   return (
     <>
-      <header>
-        <nav className="container py-2 border-b flex items-center justify-between">
-          <span>
-            You're logged in as <strong>{me?.profile?.name}</strong>
-          </span>
-          <button
-            className="bg-stone-100 py-1.5 px-3 text-sm rounded-md dark:bg-stone-900 dark:text-white"
-            onClick={() => logOut()}
-          >
-            Log out
-          </button>
-        </nav>
-      </header>
-
       <main className="container py-8 space-y-8">
         {router.route({
           "/": () => <Orders />,

examples/form/tsconfig.tsbuildinfo

@@ -1 +0,0 @@
-{"root":["./src/app.tsx","./src/createorder.tsx","./src/draftindicator.tsx","./src/editorder.tsx","./src/errors.tsx","./src/linktohome.tsx","./src/orderform.tsx","./src/orderthumbnail.tsx","./src/orders.tsx","./src/main.tsx","./src/schema.ts","./src/vite-env.d.ts"],"version":"5.6.3"}

examples/image-upload/CHANGELOG.md

@@ -1,5 +1,181 @@
 # image-upload
 
+## 0.0.60
+
+### Patch Changes
+
+- Updated dependencies [57a3dbe]
+- Updated dependencies [a717754]
+- Updated dependencies [a91f343]
+  - jazz-tools@0.11.4
+  - jazz-browser-media-images@0.11.4
+  - jazz-react@0.11.4
+
+## 0.0.59
+
+### Patch Changes
+
+- jazz-react@0.11.3
+- jazz-tools@0.11.3
+- jazz-browser-media-images@0.11.3
+
+## 0.0.58
+
+### Patch Changes
+
+- Updated dependencies [6892dc6]
+  - jazz-tools@0.11.2
+  - jazz-react@0.11.2
+  - jazz-browser-media-images@0.11.2
+
+## 0.0.57
+
+### Patch Changes
+
+- jazz-react@0.11.1
+
+## 0.0.56
+
+### Patch Changes
+
+- Updated dependencies [6a96d8b]
+- Updated dependencies [a35249a]
+- Updated dependencies [b9d194a]
+- Updated dependencies [a4713df]
+- Updated dependencies [34cbdc3]
+- Updated dependencies [f039e8f]
+- Updated dependencies [e22de9f]
+  - jazz-tools@0.11.0
+  - jazz-browser-media-images@0.11.0
+  - jazz-react@0.11.0
+
+## 0.0.55
+
+### Patch Changes
+
+- Updated dependencies [2f99de0]
+  - jazz-tools@0.10.15
+  - jazz-browser-media-images@0.10.15
+  - jazz-react@0.10.15
+
+## 0.0.54
+
+### Patch Changes
+
+- Updated dependencies [75211e3]
+  - jazz-tools@0.10.14
+  - jazz-react@0.10.14
+  - jazz-browser-media-images@0.10.14
+
+## 0.0.53
+
+### Patch Changes
+
+- Updated dependencies [07feedd]
+  - jazz-tools@0.10.13
+  - jazz-browser-media-images@0.10.13
+  - jazz-react@0.10.13
+
+## 0.0.52
+
+### Patch Changes
+
+- Updated dependencies [4612e05]
+  - jazz-tools@0.10.12
+  - jazz-react@0.10.12
+  - jazz-browser-media-images@0.10.12
+
+## 0.0.51
+
+### Patch Changes
+
+- jazz-browser-media-images@0.10.9
+- jazz-react@0.10.9
+
+## 0.0.50
+
+### Patch Changes
+
+- Updated dependencies [2fb6428]
+  - jazz-tools@0.10.8
+  - jazz-react@0.10.8
+  - jazz-browser-media-images@0.10.8
+
+## 0.0.49
+
+### Patch Changes
+
+- Updated dependencies [1136d9b]
+- Updated dependencies [0eed228]
+  - jazz-react@0.10.7
+  - jazz-tools@0.10.7
+  - jazz-browser-media-images@0.10.7
+
+## 0.0.48
+
+### Patch Changes
+
+- Updated dependencies [1d71ca1]
+- Updated dependencies [ada802b]
+  - jazz-react@0.10.6
+  - jazz-tools@0.10.6
+  - jazz-browser-media-images@0.10.6
+
+## 0.0.47
+
+### Patch Changes
+
+- Updated dependencies [59ff77e]
+  - jazz-tools@0.10.5
+  - jazz-browser-media-images@0.10.5
+  - jazz-react@0.10.5
+
+## 0.0.46
+
+### Patch Changes
+
+- jazz-react@0.10.4
+- jazz-tools@0.10.4
+- jazz-browser-media-images@0.10.4
+
+## 0.0.45
+
+### Patch Changes
+
+- Updated dependencies [d8582fc]
+  - jazz-tools@0.10.3
+  - jazz-browser-media-images@0.10.3
+  - jazz-react@0.10.3
+
+## 0.0.44
+
+### Patch Changes
+
+- jazz-react@0.10.2
+- jazz-tools@0.10.2
+- jazz-browser-media-images@0.10.2
+
+## 0.0.43
+
+### Patch Changes
+
+- Updated dependencies [5a63cba]
+  - jazz-tools@0.10.1
+  - jazz-browser-media-images@0.10.1
+  - jazz-react@0.10.1
+
+## 0.0.42
+
+### Patch Changes
+
+- Updated dependencies [498954f]
+- Updated dependencies [d42c2aa]
+- Updated dependencies [dd03464]
+- Updated dependencies [b426342]
+  - jazz-react@0.10.0
+  - jazz-tools@0.10.0
+  - jazz-browser-media-images@0.10.0
+
 ## 0.0.41
 
 ### Patch Changes

examples/image-upload/package.json

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

examples/image-upload/src/App.tsx

@@ -1,19 +1,8 @@
-import { useAccount } from "jazz-react";
 import ImageUpload from "./ImageUpload.tsx";
 
 function App() {
-  const { me, logOut } = useAccount();
-
   return (
     <>
-      <header>
-        <nav className="container">
-          <span>
-            You're logged in as <strong>{me?.profile?.name}</strong>
-          </span>
-          <button onClick={() => logOut()}>Log out</button>
-        </nav>
-      </header>
       <main className="container">
         <ImageUpload />
       </main>

examples/image-upload/src/ImageUpload.tsx

@@ -46,7 +46,12 @@ export default function ImageUpload() {
         ) : (
           <div>
             <label>Upload image</label>
-            <input ref={inputRef} type="file" onChange={onImageChange} />
+            <input
+              ref={inputRef}
+              type="file"
+              accept="image/png, image/jpeg, image/gif"
+              onChange={onImageChange}
+            />
           </div>
         )}
       </div>

examples/image-upload/src/index.css

@@ -72,8 +72,7 @@ nav {
 .container {
   margin-right: auto;
   margin-left: auto;
-  padding-right: 0.75rem;
-  padding-left: 0.75rem;
+  padding: 2rem 0.75rem;
   max-width: 800px;
 }
 

examples/inspector/CHANGELOG.md

@@ -1,5 +1,104 @@
 # jazz-example-inspector
 
+## 0.0.113
+
+### Patch Changes
+
+- Updated dependencies [7f036c1]
+  - cojson@0.11.4
+  - cojson-transport-ws@0.11.4
+
+## 0.0.112
+
+### Patch Changes
+
+- Updated dependencies [68b0242]
+  - cojson-transport-ws@0.11.3
+  - cojson@0.11.3
+
+## 0.0.111
+
+### Patch Changes
+
+- Updated dependencies [b9d194a]
+- Updated dependencies [a4713df]
+- Updated dependencies [e22de9f]
+- Updated dependencies [34cbdc3]
+- Updated dependencies [0f67e0a]
+  - cojson@0.11.0
+  - cojson-transport-ws@0.11.0
+
+## 0.0.110
+
+### Patch Changes
+
+- Updated dependencies [f86e278]
+  - cojson@0.10.15
+  - cojson-transport-ws@0.10.15
+
+## 0.0.109
+
+### Patch Changes
+
+- Updated dependencies [153dc99]
+  - cojson@0.10.8
+  - cojson-transport-ws@0.10.8
+
+## 0.0.108
+
+### Patch Changes
+
+- Updated dependencies [0f83320]
+- Updated dependencies [012022d]
+  - cojson@0.10.7
+  - cojson-transport-ws@0.10.7
+
+## 0.0.107
+
+### Patch Changes
+
+- Updated dependencies [1d71ca1]
+- Updated dependencies [5c76e37]
+  - hash-slash@0.2.2
+  - cojson@0.10.6
+  - cojson-transport-ws@0.10.6
+
+## 0.0.106
+
+### Patch Changes
+
+- Updated dependencies [1af6072]
+  - cojson@0.10.4
+  - cojson-transport-ws@0.10.4
+
+## 0.0.105
+
+### Patch Changes
+
+- Updated dependencies [cae3a9e]
+  - cojson@0.10.2
+  - cojson-transport-ws@0.10.2
+
+## 0.0.104
+
+### Patch Changes
+
+- Updated dependencies [5a63cba]
+  - cojson@0.10.1
+  - cojson-transport-ws@0.10.1
+
+## 0.0.103
+
+### Patch Changes
+
+- Updated dependencies [b426342]
+- Updated dependencies [498954f]
+- Updated dependencies [8217981]
+- Updated dependencies [ac3d9fa]
+- Updated dependencies [610543c]
+  - cojson@0.10.0
+  - cojson-transport-ws@0.10.0
+
 ## 0.0.102
 
 ### Patch Changes

examples/inspector/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-inspector-app",
   "private": true,
-  "version": "0.0.102",
+  "version": "0.0.113",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,9 +16,9 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "cojson": "workspace:0.9.23",
-    "cojson-transport-ws": "workspace:0.9.23",
-    "hash-slash": "workspace:0.2.1",
+    "cojson": "workspace:0.11.4",
+    "cojson-transport-ws": "workspace:0.11.4",
+    "hash-slash": "workspace:0.2.2",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.3.1",

examples/inspector/src/viewer/co-stream-view.tsx

@@ -5,13 +5,9 @@ import {
   RawCoStream,
   RawCoValue,
 } from "cojson";
-import { base64URLtoBytes } from "cojson/src/base64url.ts";
-import {
-  BinaryStreamItem,
-  BinaryStreamStart,
-  CoStreamItem,
-} from "cojson/src/coValues/coStream.ts";
-import { JsonObject, JsonValue } from "cojson/src/jsonValue.ts";
+import { base64URLtoBytes } from "cojson";
+import { BinaryStreamItem, BinaryStreamStart, CoStreamItem } from "cojson";
+import { JsonObject, JsonValue } from "cojson";
 import { ArrowDownToLine } from "lucide-react";
 import { useEffect, useState } from "react";
 import { PageInfo } from "./types";

examples/inspector/src/viewer/grid-view.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { CoID, LocalNode, RawCoValue } from "cojson";
-import { JsonObject } from "cojson/src/jsonValue.ts";
+import { JsonObject } from "cojson";
 import { ResolveIcon } from "./type-icon";
 import { PageInfo, isCoId } from "./types";
 import { CoMapPreview, ValueRenderer } from "./value-renderer";

examples/inspector/src/viewer/new-app.tsx

@@ -6,9 +6,9 @@ import {
   RawAccount,
   RawAccountID,
   RawCoValue,
-  WasmCrypto,
 } from "cojson";
 import { createWebSocketPeer } from "cojson-transport-ws";
+import { WasmCrypto } from "cojson/crypto/WasmCrypto";
 import { Trash2 } from "lucide-react";
 import React, { useState, useEffect } from "react";
 import { Breadcrumbs } from "./breadcrumbs";
@@ -83,7 +83,10 @@ export default function CoJsonViewerApp() {
 
   const addAccount = (id: RawAccountID, secret: AgentSecret) => {
     const newAccount = { id, secret };
-    setAccounts([...accounts, newAccount]);
+    const accountExists = accounts.some((account) => account.id === id);
+    if (!accountExists) {
+      setAccounts([...accounts, newAccount]);
+    }
     setCurrentAccount(newAccount);
   };
 
@@ -102,6 +105,7 @@ export default function CoJsonViewerApp() {
     if (coValueId) {
       setPage(coValueId);
     }
+    setCoValueId("");
   };
 
   if (
@@ -118,8 +122,22 @@ export default function CoJsonViewerApp() {
 
   return (
     <div className="w-full h-screen bg-gray-100 p-4 overflow-hidden flex flex-col">
-      <div className="flex justify-between items-center mb-4">
+      <div className="flex items-center mb-4 gap-4">
         <Breadcrumbs path={path} onBreadcrumbClick={goToIndex} />
+        <div className="flex-1">
+          <form onSubmit={handleCoValueIdSubmit}>
+            {path.length !== 0 && (
+              <input
+                className="border p-2 rounded-lg min-w-[21rem] font-mono"
+                placeholder="co_z1234567890abcdef123456789"
+                value={coValueId}
+                onChange={(e) =>
+                  setCoValueId(e.target.value as CoID<RawCoValue>)
+                }
+              />
+            )}
+          </form>
+        </div>
         <AccountSwitcher
           accounts={accounts}
           currentAccount={currentAccount}
@@ -172,7 +190,6 @@ export default function CoJsonViewerApp() {
                 type="button"
                 className="border inline-block px-2 py-1.5 text-black rounded"
                 onClick={() => {
-                  setCoValueId(currentAccount.id);
                   setPage(currentAccount.id);
                 }}
               >

examples/inspector/src/viewer/table-viewer.tsx

@@ -1,5 +1,5 @@
 import { CoID, LocalNode, RawCoValue } from "cojson";
-import { JsonObject } from "cojson/src/jsonValue.ts";
+import { JsonObject } from "cojson";
 import { useMemo, useState } from "react";
 import { LinkIcon } from "../link-icon";
 import { PageInfo } from "./types";

examples/inspector/src/viewer/value-renderer.tsx

@@ -18,6 +18,8 @@ export function ValueRenderer({
   compact?: boolean;
   onCoIDClick?: (childNode: CoID<RawCoValue>) => void;
 }) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
   if (typeof json === "undefined" || json === undefined) {
     return <span className="text-gray-400">undefined</span>;
   }
@@ -85,15 +87,31 @@ export function ValueRenderer({
     return (
       <span
         title={JSON.stringify(json, null, 2)}
-        className="inline-block max-w-64 truncate"
+        className="inline-block max-w-64"
       >
         {compact ? (
           <span>
             Object{" "}
             <span className="text-gray-500">({Object.keys(json).length})</span>
+            <pre className="mt-1 text-sm whitespace-pre-wrap">
+              {isExpanded
+                ? JSON.stringify(json, null, 2)
+                : JSON.stringify(json, null, 2)
+                    .split("\n")
+                    .slice(0, 3)
+                    .join("\n") + (Object.keys(json).length > 2 ? "\n..." : "")}
+            </pre>
+            <button
+              onClick={() => setIsExpanded(!isExpanded)}
+              className="text-xs text-gray-500 hover:text-gray-700"
+            >
+              {isExpanded ? "Show less" : "Show more"}
+            </button>
           </span>
         ) : (
-          JSON.stringify(json, null, 2)
+          <pre className="whitespace-pre-wrap">
+            {JSON.stringify(json, null, 2)}
+          </pre>
         )}
       </span>
     );

examples/multiauth/.env

@@ -0,0 +1 @@
+VITE_CLERK_PUBLISHABLE_KEY=pk_test_ZXZpZGVudC1kYW5lLTg5LmNsZXJrLmFjY291bnRzLmRldiQ

examples/multiauth/.gitignore

@@ -22,5 +22,3 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-
-playwright-report

examples/multiauth/CHANGELOG.md

@@ -0,0 +1,29 @@
+# multiauth
+
+## 0.0.3
+
+### Patch Changes
+
+- Updated dependencies [57a3dbe]
+- Updated dependencies [a717754]
+- Updated dependencies [a91f343]
+  - jazz-tools@0.11.4
+  - jazz-react@0.11.4
+  - jazz-react-auth-clerk@0.11.4
+
+## 0.0.2
+
+### Patch Changes
+
+- jazz-react@0.11.3
+- jazz-react-auth-clerk@0.11.3
+- jazz-tools@0.11.3
+
+## 0.0.1
+
+### Patch Changes
+
+- Updated dependencies [6892dc6]
+  - jazz-tools@0.11.2
+  - jazz-react@0.11.2
+  - jazz-react-auth-clerk@0.11.2

examples/multiauth/README.md

@@ -0,0 +1,43 @@
+# Multi-auth example with Jazz and React
+
+This example demonstrates using Jazz with multiple authentication methods; in this case, Clerk and passphrases are able to be used.
+
+## Getting started
+
+To run this example, you may either:
+* Clone the Jazz monorepo and run this example from within.
+* Create a new Jazz project using this example as a template, and run that new project.
+
+
+### Using this example as a template
+
+1. Create a new Jazz project, and use this example as a template.
+```bash
+npx create-jazz-app@latest --example counter --project-name counter
+```
+2. Navigate to the new project and start the development server.
+```bash
+cd counter
+npm run dev
+```
+
+### Using the monorepo
+
+This requires `pnpm` to be installed; see [https://pnpm.io/installation](https://pnpm.io/installation).
+
+1. Clone the `jazz` repository.
+```bash
+git clone https://github.com/garden-co/jazz.git
+```
+2. Install dependencies.
+```bash
+cd jazz
+pnpm install
+```
+3. Navigate to the example and start the development server.
+```bash
+cd examples/counter
+pnpm dev
+```
+
+The example should be running at [http://localhost:5173](http://localhost:5173) by default.

examples/multiauth/eslint.config.js

@@ -0,0 +1,28 @@
+import js from "@eslint/js";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  { ignores: ["dist"] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+    },
+  },
+);

examples/multiauth/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Jazz onboarding example</title>
+    <title>Jazz Multi-auth (React)</title>
   </head>
   <body>
     <div id="root"></div>

examples/multiauth/package.json

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

examples/multiauth/src/App.css

@@ -0,0 +1,12 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.card {
+  padding: 2em;
+  display: flex;
+  flex-direction: column;
+}

examples/multiauth/src/App.tsx

@@ -0,0 +1,12 @@
+import { Home } from "./components/Home.tsx";
+import "./App.css";
+
+export default function App() {
+  return (
+    <div className="card">
+      <h1>Jazz Multi-auth (React)</h1>
+
+      <Home />
+    </div>
+  );
+}

examples/multiauth/src/apiKey.ts

@@ -0,0 +1 @@
+export const apiKey = "counter-example@garden.co";

examples/multiauth/src/components/Home.tsx

@@ -0,0 +1,26 @@
+import { useAccount, useIsAuthenticated } from "jazz-react";
+
+export function Home() {
+  const { me, logOut } = useAccount({ root: {} });
+  const isAuthenticated = useIsAuthenticated();
+
+  if (!me) return;
+  if (!isAuthenticated) return;
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "1rem",
+      }}
+    >
+      <div className="container">
+        <h1>You're logged in</h1>
+        <p>Welcome back, {me?.profile?.name}</p>
+        <button onClick={() => logOut()}>Logout</button>
+      </div>
+    </div>
+  );
+}

examples/multiauth/src/components/OmniAuth.tsx

@@ -0,0 +1,184 @@
+import { SignInButton } from "@clerk/clerk-react";
+import { usePassphraseAuth } from "jazz-react";
+import { JazzProviderProps, useIsAuthenticated } from "jazz-react";
+import { useState } from "react";
+import "../index.css";
+import { useClerk } from "@clerk/clerk-react";
+import { JazzProviderWithClerk } from "jazz-react-auth-clerk";
+import { wordlist } from "../wordlist.ts";
+
+export function OmniAuthContainer(props: {
+  appName: string;
+  wordlist: string[];
+  children?: React.ReactNode;
+}) {
+  const isAuthenticated = useIsAuthenticated();
+
+  const passphraseAuth = usePassphraseAuth({
+    wordlist: props.wordlist,
+  });
+
+  const [step, setStep] = useState<
+    "initial" | "create" | "loginWithPassphrase" | "loginWithClerk"
+  >("initial");
+  const [loginPassphrase, setLoginPassphrase] = useState("");
+  const [isCopied, setIsCopied] = useState(false);
+  const [currentPassphrase, setCurrentPassphrase] = useState(() =>
+    passphraseAuth.generateRandomPassphrase(),
+  );
+
+  if (passphraseAuth.state === "signedIn" || isAuthenticated) {
+    return props.children ?? null;
+  }
+
+  const handleCreateAccount = async () => {
+    setStep("create");
+  };
+
+  const handleLoginWithPassphrase = () => {
+    setStep("loginWithPassphrase");
+  };
+
+  const handleLoginWithClerk = () => {
+    setStep("loginWithClerk");
+  };
+
+  const handleReroll = () => {
+    const newPassphrase = passphraseAuth.generateRandomPassphrase();
+    setCurrentPassphrase(newPassphrase);
+    setIsCopied(false);
+  };
+
+  const handleBack = () => {
+    setStep("initial");
+    setLoginPassphrase("");
+  };
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(passphraseAuth.passphrase);
+    setIsCopied(true);
+  };
+
+  const handleLoginSubmit = async () => {
+    await passphraseAuth.logIn(loginPassphrase);
+    setStep("initial");
+    setLoginPassphrase("");
+  };
+
+  const handleNext = async () => {
+    await passphraseAuth.registerNewAccount(currentPassphrase, "My Account");
+    setStep("initial");
+    setLoginPassphrase("");
+  };
+
+  return (
+    <div className="auth-container">
+      <div className="auth-card">
+        {step === "initial" && (
+          <div>
+            <h1 className="auth-heading">{props.appName}</h1>
+            <button
+              onClick={handleCreateAccount}
+              className="auth-button-primary"
+            >
+              Signup with passphrase
+            </button>
+            <button
+              onClick={handleLoginWithPassphrase}
+              className="auth-button-secondary"
+            >
+              Login with passphrase
+            </button>
+            <button
+              onClick={handleLoginWithClerk}
+              className="auth-button-secondary"
+            >
+              Login with Clerk
+            </button>
+          </div>
+        )}
+
+        {step === "create" && (
+          <>
+            <h1 className="auth-heading">Your Passphrase</h1>
+            <p className="auth-description">
+              Please copy and store this passphrase somewhere safe. You'll need
+              it to log in.
+            </p>
+            <textarea
+              readOnly
+              value={currentPassphrase}
+              className="auth-textarea"
+              rows={5}
+            />
+            <button onClick={handleCopy} className="auth-button-primary">
+              {isCopied ? "Copied!" : "Copy"}
+            </button>
+            <div className="auth-button-group">
+              <button onClick={handleBack} className="auth-button-secondary">
+                Back
+              </button>
+              <button onClick={handleReroll} className="auth-button-secondary">
+                Generate New Passphrase
+              </button>
+              <button onClick={handleNext} className="auth-button-primary">
+                Register
+              </button>
+            </div>
+          </>
+        )}
+
+        {step === "loginWithPassphrase" && (
+          <div>
+            <h1 className="auth-heading">Log In</h1>
+            <textarea
+              value={loginPassphrase}
+              onChange={(e) => setLoginPassphrase(e.target.value)}
+              placeholder="Enter your passphrase"
+              className="auth-textarea"
+              rows={5}
+            />
+            <div className="auth-button-group">
+              <button onClick={handleBack} className="auth-button-secondary">
+                Back
+              </button>
+              <button
+                onClick={handleLoginSubmit}
+                className="auth-button-primary"
+              >
+                Log In
+              </button>
+            </div>
+          </div>
+        )}
+
+        {step === "loginWithClerk" && <SignInButton />}
+      </div>
+    </div>
+  );
+}
+
+export function OmniAuth({
+  children,
+  AccountSchema,
+  sync,
+}: {
+  children: React.ReactNode;
+} & JazzProviderProps) {
+  const clerk = useClerk();
+
+  return (
+    <JazzProviderWithClerk
+      clerk={clerk}
+      sync={sync}
+      AccountSchema={AccountSchema}
+    >
+      <OmniAuthContainer
+        appName="Jazz Multi-Authentication Example"
+        wordlist={wordlist}
+      >
+        {children}
+      </OmniAuthContainer>
+    </JazzProviderWithClerk>
+  );
+}

examples/multiauth/src/index.css

@@ -0,0 +1,151 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: auto 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 2.2em;
+  line-height: 1.1;
+  font-weight: 500;
+  letter-spacing: 0.6px;
+}
+
+button {
+  border-radius: 6px;
+  border: 1px solid white;
+  color: inherit;
+  padding: 0.5rem 1rem;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: transparent;
+  cursor: pointer;
+  transition: all 0.05s ease, border-color 0.1s ease;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+button:hover {
+  background-color: #313131;
+}
+
+button:active {
+  border-color: #3313f7;
+  transform: translateY(2px);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: rgb(21, 20, 20);
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    border-color: #e5e4e2;
+  }
+  button:hover {
+    border-color: rgb(47, 46, 46);
+    background-color: white;
+  }
+
+  button:active {
+    border-color: #3313f7;
+  }
+}
+
+.auth-container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f3f4f6;
+}
+
+.auth-card {
+  background-color: white;
+  padding: 2rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px
+    rgba(0, 0, 0, 0.06);
+  width: 28rem;
+}
+
+.auth-button-primary,
+.auth-button-secondary {
+  width: 100%;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  font-weight: bold;
+  cursor: pointer;
+  margin-bottom: 1rem;
+}
+
+.auth-button-primary {
+  background-color: black;
+  color: white;
+  border: none;
+}
+
+.auth-button-secondary {
+  background-color: white;
+  color: black;
+  border: 1px solid black;
+}
+
+.auth-heading {
+  color: black;
+  font-size: 1.5rem;
+  font-weight: bold;
+  text-align: center;
+  margin-bottom: 1rem;
+}
+
+.auth-textarea {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.25rem;
+  margin-bottom: 1rem;
+  box-sizing: border-box;
+}
+
+.auth-description {
+  font-size: 0.875rem;
+  color: #4b5563;
+  text-align: center;
+  margin-bottom: 1rem;
+}
+
+.auth-button-group {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+}

examples/multiauth/src/main.tsx

@@ -0,0 +1,29 @@
+import { ClerkProvider } from "@clerk/clerk-react";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import "./index.css";
+import { apiKey } from "./apiKey.ts";
+import { OmniAuth } from "./components/OmniAuth.tsx";
+
+// Import your publishable key
+const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
+
+if (!PUBLISHABLE_KEY) {
+  throw new Error("Add your Clerk publishable key to the .env.local file");
+}
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
+      <OmniAuth
+        sync={{
+          peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
+          when: "signedUp", // This makes the app work in local mode when the user is not authenticated
+        }}
+      >
+        <App />
+      </OmniAuth>
+    </ClerkProvider>
+  </StrictMode>,
+);