set inspector widget height

Fix filestreams link

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

.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,209 @@
 # chat-rn-clerk
 
+## 1.0.86
+
+### Patch Changes
+
+- jazz-react-native@0.11.5
+- jazz-react-native-auth-clerk@0.11.5
+- jazz-tools@0.11.5
+- jazz-react-native-media-images@0.11.5
+
+## 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

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.65",
+  "version": "1.0.86",
   "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,166 @@
 # chat-rn
 
+## 1.0.82
+
+### Patch Changes
+
+- jazz-react-native@0.11.5
+- jazz-tools@0.11.5
+
+## 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

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.62",
+  "version": "1.0.82",
   "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,174 @@
 # chat-vue
 
+## 0.0.67
+
+### Patch Changes
+
+- jazz-browser@0.11.5
+- jazz-tools@0.11.5
+- jazz-vue@0.11.5
+
+## 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

examples/chat-vue/package.json

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

examples/chat/CHANGELOG.md

@@ -1,5 +1,179 @@
 # jazz-example-chat
 
+## 0.0.164
+
+### Patch Changes
+
+- jazz-react@0.11.5
+- jazz-tools@0.11.5
+- jazz-browser-media-images@0.11.5
+
+## 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

examples/chat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-chat",
   "private": true,
-  "version": "0.0.145",
+  "version": "0.0.164",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -9,13 +9,14 @@
     "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",
     "hash-slash": "workspace:*",
     "jazz-browser-media-images": "workspace:*",
+    "jazz-inspector": "workspace:*",
     "jazz-react": "workspace:*",
     "jazz-tools": "workspace:*",
     "lucide-react": "^0.274.0",

examples/chat/src/app.tsx

@@ -1,6 +1,7 @@
 import { apiKey } from "@/apiKey.ts";
 import { getRandomUsername, inIframe, onChatLoad } from "@/util.ts";
 import { useIframeHashRouter } from "hash-slash";
+import { JazzInspector } from "jazz-inspector";
 import { JazzProvider, useAccount } from "jazz-react";
 import { Group, ID } from "jazz-tools";
 import { StrictMode } from "react";
@@ -31,6 +32,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;
@@ -60,6 +62,7 @@ createRoot(document.getElementById("root")!).render(
         defaultProfileName={defaultProfileName}
       >
         <App />
+        <JazzInspector />
       </JazzProvider>
     </StrictMode>
   </ThemeProvider>,

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

@@ -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 }) {

examples/clerk/CHANGELOG.md

@@ -1,5 +1,178 @@
 # minimal-auth-clerk
 
+## 0.0.63
+
+### Patch Changes
+
+- jazz-react@0.11.5
+- jazz-react-auth-clerk@0.11.5
+- jazz-tools@0.11.5
+
+## 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

examples/clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clerk",
   "private": true,
-  "version": "0.0.44",
+  "version": "0.0.63",
   "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.10.0",
+    "jazz-react-auth-clerk": "workspace:0.11.5",
     "jazz-tools": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

examples/file-share-svelte/CHANGELOG.md

@@ -1,5 +1,152 @@
 # file-share-svelte
 
+## 0.0.47
+
+### Patch Changes
+
+- jazz-svelte@0.11.5
+- jazz-tools@0.11.5
+
+## 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

examples/file-share-svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "file-share-svelte",
-  "version": "0.0.29",
+  "version": "0.0.47",
   "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,124 @@
 # jazz-tailwind-demo-auth-starter
 
+## 0.0.3
+
+### Patch Changes
+
+- jazz-react@0.11.5
+- jazz-tools@0.11.5
+
+## 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

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.46",
+  "version": "0.0.3",
   "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,182 @@
 # form
 
+## 0.1.5
+
+### Patch Changes
+
+- jazz-react@0.11.5
+- jazz-tools@0.11.5
+- jazz-browser-media-images@0.11.5
+
+## 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

examples/form/package.json

@@ -1,7 +1,7 @@
 {
   "name": "form",
   "private": true,
-  "version": "0.0.40",
+  "version": "0.1.5",
   "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,177 @@
 # image-upload
 
+## 0.0.61
+
+### Patch Changes
+
+- jazz-react@0.11.5
+- jazz-tools@0.11.5
+- jazz-browser-media-images@0.11.5
+
+## 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

examples/image-upload/package.json

@@ -1,7 +1,7 @@
 {
   "name": "image-upload",
   "private": true,
-  "version": "0.0.42",
+  "version": "0.0.61",
   "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,100 @@
 # jazz-example-inspector
 
+## 0.0.114
+
+### Patch Changes
+
+- Updated dependencies [60f5b3f]
+  - cojson@0.11.5
+  - cojson-transport-ws@0.11.5
+
+## 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

examples/inspector/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-inspector-app",
   "private": true,
-  "version": "0.0.103",
+  "version": "0.0.114",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -11,27 +11,19 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-slot": "^1.1.1",
-    "@radix-ui/react-toast": "^1.1.4",
-    "class-variance-authority": "^0.7.0",
+    "jazz-inspector": "workspace:*",
     "clsx": "^2.0.0",
-    "cojson": "workspace:0.10.0",
-    "cojson-transport-ws": "workspace:0.10.0",
-    "hash-slash": "workspace:0.2.1",
+    "cojson": "workspace:0.11.5",
+    "cojson-transport-ws": "workspace:0.11.5",
+    "hash-slash": "workspace:0.2.2",
     "lucide-react": "^0.274.0",
-    "qrcode": "^1.5.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router": "^6.16.0",
     "react-router-dom": "^6.16.0",
-    "react-use": "^17.4.0",
-    "tailwind-merge": "^1.14.0",
-    "tailwindcss-animate": "^1.0.7",
-    "uniqolor": "^1.1.0"
+    "react-use": "^17.4.0"
   },
   "devDependencies": {
-    "@types/qrcode": "^1.5.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react-swc": "^3.3.2",

examples/inspector/src/index.css

@@ -1,92 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
-
-    --primary: 24 9.8% 10%;
-    --primary-foreground: 60 9.1% 97.8%;
-
-    --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 24 9.8% 10%;
-
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
-
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-    --ring: 20 14.3% 4.1%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
-
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
-
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
-
-    --primary: 60 9.1% 97.8%;
-    --primary-foreground: 24 9.8% 10%;
-
-    --secondary: 12 6.5% 15.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
-
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
-
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-    --ring: 24 5.7% 82.9%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-    margin: 0;
-    padding: 0;
-  }
-}
-
-.animate-in {
-  animation: slideIn 0.3s ease-out;
-}
-@keyframes slideIn {
-  from {
-    transform: translateZ(400px) translateY(30px) scale(1.05);
-    opacity: 0.4;
-  }
-  to {
-    transform: translateZ(0) scale(1);
-    opacity: 1;
-  }
-}

examples/inspector/src/link-icon.tsx

@@ -1,18 +0,0 @@
-export function LinkIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={1.5}
-      stroke="currentColor"
-      className="w-3 h-3"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
-      />
-    </svg>
-  );
-}

examples/inspector/src/viewer/breadcrumbs.tsx

@@ -1,39 +0,0 @@
-import React from "react";
-import { PageInfo } from "./types";
-
-interface BreadcrumbsProps {
-  path: PageInfo[];
-  onBreadcrumbClick: (index: number) => void;
-}
-
-export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
-  path,
-  onBreadcrumbClick,
-}) => {
-  return (
-    <div className="z-20 relative bg-indigo-400/10 backdrop-blur-sm rounded-lg inline-flex px-2 py-1 whitespace-pre transition-all items-center space-x-1 min-h-10">
-      <button
-        onClick={() => onBreadcrumbClick(-1)}
-        className="flex items-center justify-center p-1 rounded-sm hover:bg-indigo-500/10 transition-colors"
-        aria-label="Go to home"
-      >
-        <img src="jazz-logo.png" alt="Jazz Logo" className="size-5" />
-      </button>
-      {path.map((page, index) => {
-        return (
-          <span key={index} className="inline-block first:pl-1 last:pr-1">
-            {index === 0 ? null : (
-              <span className="text-indigo-500/30">{" / "}</span>
-            )}
-            <button
-              onClick={() => onBreadcrumbClick(index)}
-              className="text-indigo-700 hover:underline"
-            >
-              {index === 0 ? page.name || "Root" : page.name}
-            </button>
-          </span>
-        );
-      })}
-    </div>
-  );
-};

examples/inspector/src/viewer/button.tsx

@@ -0,0 +1,65 @@
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "tertiary" | "destructive" | "plain";
+  size?: "sm" | "md" | "lg";
+  children?: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      children,
+      size = "md",
+      variant = "primary",
+      disabled,
+      type = "button",
+      ...buttonProps
+    },
+    ref,
+  ) => {
+    const sizeClasses = {
+      sm: "text-sm py-1 px-2",
+      md: "py-1.5 px-3",
+      lg: "md:text-lg  py-2 px-3 md:px-8 md:py-3",
+    };
+
+    const variantClasses = {
+      primary:
+        "bg-blue border-blue text-white font-medium bg-blue hover:bg-blue-800 hover:border-blue-800",
+      secondary:
+        "text-stone-900 border font-medium hover:border-stone-300 hover:dark:border-stone-700 dark:text-white",
+      tertiary: "text-blue underline underline-offset-4",
+      destructive:
+        "bg-red-600 border-red-600 text-white font-medium hover:bg-red-700 hover:border-red-700",
+    };
+
+    const classNames =
+      variant === "plain"
+        ? clsx(className, "text-left")
+        : clsx(
+            className,
+            "inline-flex items-center justify-center gap-2 rounded-lg text-center transition-colors",
+            "disabled:pointer-events-none disabled:opacity-70",
+            sizeClasses[size],
+            variantClasses[variant],
+            disabled && "opacity-50 cursor-not-allowed pointer-events-none",
+          );
+
+    return (
+      <button
+        ref={ref}
+        {...buttonProps}
+        disabled={disabled}
+        className={classNames}
+        type={type}
+      >
+        {children}
+      </button>
+    );
+  },
+);

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

@@ -1,348 +0,0 @@
-import {
-  CoID,
-  LocalNode,
-  RawBinaryCoStream,
-  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 { ArrowDownToLine } from "lucide-react";
-import { useEffect, useState } from "react";
-import { PageInfo } from "./types";
-import { AccountOrGroupPreview } from "./value-renderer";
-
-// typeguard for BinaryStreamStart
-function isBinaryStreamStart(item: unknown): item is BinaryStreamStart {
-  return (
-    typeof item === "object" &&
-    item !== null &&
-    "type" in item &&
-    item.type === "start"
-  );
-}
-
-function detectCoStreamType(value: RawCoStream | RawBinaryCoStream) {
-  const firstKey = Object.keys(value.items)[0];
-  if (!firstKey)
-    return {
-      type: "unknown",
-    };
-
-  const items = value.items[firstKey as never]?.map((v) => v.value);
-
-  if (!items)
-    return {
-      type: "unknown",
-    };
-  const firstItem = items[0];
-  if (!firstItem)
-    return {
-      type: "unknown",
-    };
-  // This is a binary stream
-  if (isBinaryStreamStart(firstItem)) {
-    return {
-      type: "binary",
-      items: items as BinaryStreamItem[],
-    };
-  } else {
-    return {
-      type: "coStream",
-    };
-  }
-}
-
-async function getBlobFromCoStream({
-  items,
-  onlyFirstChunk = false,
-}: {
-  items: BinaryStreamItem[];
-  onlyFirstChunk?: boolean;
-}) {
-  if (onlyFirstChunk && items.length > 1) {
-    items = items.slice(0, 2);
-  }
-
-  const chunks: Uint8Array[] = [];
-
-  const binary_U_prefixLength = 8;
-
-  let lastProgressUpdate = Date.now();
-
-  for (const item of items.slice(1)) {
-    if (item.type === "end") {
-      break;
-    }
-
-    if (item.type !== "chunk") {
-      console.error("Invalid binary stream chunk", item);
-      return undefined;
-    }
-
-    const chunk = base64URLtoBytes(item.chunk.slice(binary_U_prefixLength));
-    // totalLength += chunk.length;
-    chunks.push(chunk);
-
-    if (Date.now() - lastProgressUpdate > 100) {
-      lastProgressUpdate = Date.now();
-    }
-  }
-  const defaultMime = "mimeType" in items[0] ? items[0].mimeType : null;
-
-  const blob = new Blob(chunks, defaultMime ? { type: defaultMime } : {});
-
-  const mimeType =
-    defaultMime === "" ? await detectPDFMimeType(blob) : defaultMime;
-
-  return {
-    blob,
-    mimeType: mimeType as string,
-    unfinishedChunks: items.length > 1,
-    totalSize:
-      "totalSizeBytes" in items[0]
-        ? (items[0].totalSizeBytes as number)
-        : undefined,
-  };
-}
-
-const detectPDFMimeType = async (blob: Blob): Promise<string> => {
-  const arrayBuffer = await blob.slice(0, 4).arrayBuffer();
-  const uint8Array = new Uint8Array(arrayBuffer);
-  const header = uint8Array.reduce(
-    (acc, byte) => acc + String.fromCharCode(byte),
-    "",
-  );
-
-  if (header === "%PDF") {
-    return "application/pdf";
-  }
-  return "application/octet-stream";
-};
-
-const BinaryDownloadButton = ({
-  pdfBlob,
-  fileName = "document",
-  label,
-  mimeType,
-}: {
-  pdfBlob: Blob;
-  mimeType?: string;
-  fileName?: string;
-  label: string;
-}) => {
-  const downloadFile = () => {
-    const url = URL.createObjectURL(
-      new Blob([pdfBlob], mimeType ? { type: mimeType } : {}),
-    );
-    const link = document.createElement("a");
-    link.href = url;
-    link.download =
-      mimeType === "application/pdf" ? `${fileName}.pdf` : fileName;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-  };
-
-  return (
-    <button
-      className="flex items-center gap-2 px-2 py-1 text-gray-900 border border-gray-900/10 bg-clip-border shadow-sm transition-colors rounded bg-gray-50 text-sm"
-      onClick={downloadFile}
-    >
-      <ArrowDownToLine size={16} />
-      {label}
-      {/* Download {mimeType === "application/pdf" ? "PDF" : "File"} */}
-    </button>
-  );
-};
-
-const LabelContentPair = ({
-  label,
-  content,
-}: {
-  label: string;
-  content: React.ReactNode;
-}) => {
-  return (
-    <div className="flex flex-col gap-1.5 ">
-      <span className="uppercase text-xs font-medium text-gray-600 tracking-wide">
-        {label}
-      </span>
-      <span>{content}</span>
-    </div>
-  );
-};
-
-function RenderCoBinaryStream({
-  value,
-  items,
-}: {
-  items: BinaryStreamItem[];
-  value: RawBinaryCoStream;
-}) {
-  const [file, setFile] = useState<
-    | {
-        blob: Blob;
-        mimeType: string;
-        unfinishedChunks: boolean;
-        totalSize: number | undefined;
-      }
-    | undefined
-    | null
-  >(null);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    // load only the first chunk to get the mime type and size
-    getBlobFromCoStream({
-      items,
-      onlyFirstChunk: true,
-    })
-      .then((v) => {
-        if (v) {
-          setFile(v);
-          if (v.mimeType.includes("image")) {
-            // If it's an image, load the full blob
-            getBlobFromCoStream({
-              items,
-            }).then((s) => {
-              if (s) setFile(s);
-            });
-          }
-        }
-      })
-      .finally(() => setIsLoading(false));
-  }, [items]);
-
-  if (!isLoading && !file) return <div>No blob</div>;
-
-  if (isLoading) return <div>Loading...</div>;
-  if (!file) return <div>No blob</div>;
-
-  const { blob, mimeType } = file;
-
-  const sizeInKB = (file.totalSize || 0) / 1024;
-
-  return (
-    <div className="space-y-8 mt-4">
-      <div className="grid grid-cols-3 gap-2 max-w-3xl">
-        <LabelContentPair
-          label="Mime Type"
-          content={
-            <span className="font-mono bg-gray-100 rounded px-2 py-1 text-sm">
-              {mimeType || "No mime type"}
-            </span>
-          }
-        />
-        <LabelContentPair
-          label="Size"
-          content={<span>{sizeInKB.toFixed(2)} KB</span>}
-        />
-        <LabelContentPair
-          label="Download"
-          content={
-            <BinaryDownloadButton
-              fileName={value.id.toString()}
-              pdfBlob={blob}
-              mimeType={mimeType}
-              label={
-                mimeType === "application/pdf"
-                  ? "Download PDF"
-                  : "Download File"
-              }
-            />
-          }
-        />
-      </div>
-      {mimeType === "image/png" || mimeType === "image/jpeg" ? (
-        <LabelContentPair
-          label="Preview"
-          content={
-            <div className="bg-gray-50 p-3 rounded-sm">
-              <RenderBlobImage blob={blob} />
-            </div>
-          }
-        />
-      ) : null}
-    </div>
-  );
-}
-
-function RenderCoStream({
-  value,
-  node,
-}: {
-  value: RawCoStream;
-  node: LocalNode;
-}) {
-  const streamPerUser = Object.keys(value.items);
-  const userCoIds = streamPerUser.map((stream) => stream.split("_session")[0]);
-
-  return (
-    <div className="grid grid-cols-3 gap-2">
-      {userCoIds.map((id, idx) => (
-        <div
-          className="bg-gray-100 p-3 rounded-lg transition-colors overflow-hidden bg-white border hover:bg-gray-100/5 cursor-pointer shadow-sm"
-          key={id}
-        >
-          <AccountOrGroupPreview coId={id as CoID<RawCoValue>} node={node} />
-          {/* @ts-expect-error - TODO: fix types */}
-          {value.items[streamPerUser[idx]]?.map(
-            (item: CoStreamItem<JsonValue>) => (
-              <div>
-                {new Date(item.madeAt).toLocaleString()}{" "}
-                {JSON.stringify(item.value)}
-              </div>
-            ),
-          )}
-        </div>
-      ))}
-    </div>
-  );
-}
-
-export function CoStreamView({
-  value,
-  node,
-}: {
-  data: JsonObject;
-  onNavigate: (pages: PageInfo[]) => void;
-  node: LocalNode;
-  value: RawCoStream;
-}) {
-  // if (!value) return <div>No value</div>;
-
-  const streamType = detectCoStreamType(value);
-
-  if (streamType.type === "binary") {
-    if (streamType.items === undefined) {
-      return <div>No binary stream</div>;
-    }
-
-    return (
-      <RenderCoBinaryStream
-        value={value as RawBinaryCoStream}
-        items={streamType.items}
-      />
-    );
-  }
-
-  if (streamType.type === "coStream") {
-    return <RenderCoStream value={value} node={node} />;
-  }
-
-  if (streamType.type === "unknown") return <div>Unknown stream type</div>;
-
-  return <div>Unknown stream type</div>;
-}
-
-function RenderBlobImage({ blob }: { blob: Blob }) {
-  const urlCreator = window.URL || window.webkitURL;
-  return <img src={urlCreator.createObjectURL(blob)} />;
-}

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

@@ -1,65 +0,0 @@
-import clsx from "clsx";
-import { CoID, LocalNode, RawCoValue } from "cojson";
-import { JsonObject } from "cojson/src/jsonValue.ts";
-import { ResolveIcon } from "./type-icon";
-import { PageInfo, isCoId } from "./types";
-import { CoMapPreview, ValueRenderer } from "./value-renderer";
-
-export function GridView({
-  data,
-  onNavigate,
-  node,
-}: {
-  data: JsonObject;
-  onNavigate: (pages: PageInfo[]) => void;
-  node: LocalNode;
-}) {
-  const entries = Object.entries(data);
-
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-2">
-      {entries.map(([key, child], childIndex) => (
-        <div
-          key={childIndex}
-          className={clsx(
-            "bg-gray-100 p-3 rounded-lg transition-colors overflow-hidden",
-            isCoId(child)
-              ? "bg-white border hover:bg-gray-100/5 cursor-pointer shadow-sm"
-              : "bg-gray-50",
-          )}
-          onClick={() =>
-            isCoId(child) &&
-            onNavigate([{ coId: child as CoID<RawCoValue>, name: key }])
-          }
-        >
-          <h3 className="truncate">
-            {isCoId(child) ? (
-              <span className="font-medium flex justify-between">
-                {key}
-
-                <div className="px-2 py-1 text-xs bg-gray-100 rounded">
-                  <ResolveIcon coId={child as CoID<RawCoValue>} node={node} />
-                </div>
-              </span>
-            ) : (
-              <span>{key}</span>
-            )}
-          </h3>
-          <div className="mt-2 text-sm">
-            {isCoId(child) ? (
-              <CoMapPreview coId={child as CoID<RawCoValue>} node={node} />
-            ) : (
-              <ValueRenderer
-                json={child}
-                onCoIDClick={(coId) => {
-                  onNavigate([{ coId, name: key }]);
-                }}
-                compact
-              />
-            )}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}

examples/inspector/src/viewer/index.tsx

@@ -1,7 +1,6 @@
 import { LocalNode } from "cojson";
-import { Breadcrumbs } from "./breadcrumbs";
-import { PageStack } from "./page-stack";
-import { PageInfo } from "./types";
+import { Breadcrumbs, PageStack } from "jazz-inspector";
+import type { PageInfo } from "jazz-inspector";
 import { usePagePath } from "./use-page-path";
 
 export default function CoJsonViewer({

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

@@ -6,13 +6,12 @@ import {
   RawAccount,
   RawAccountID,
   RawCoValue,
-  WasmCrypto,
 } from "cojson";
 import { createWebSocketPeer } from "cojson-transport-ws";
+import { WasmCrypto } from "cojson/crypto/WasmCrypto";
+import { Breadcrumbs, PageStack } from "jazz-inspector";
 import { Trash2 } from "lucide-react";
 import React, { useState, useEffect } from "react";
-import { Breadcrumbs } from "./breadcrumbs";
-import { PageStack } from "./page-stack";
 import { usePagePath } from "./use-page-path";
 import { resolveCoValue, useResolvedCoValue } from "./use-resolve-covalue";
 
@@ -83,7 +82,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 +104,7 @@ export default function CoJsonViewerApp() {
     if (coValueId) {
       setPage(coValueId);
     }
+    setCoValueId("");
   };
 
   if (
@@ -117,9 +120,23 @@ 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="w-full h-screen bg-white p-4 overflow-hidden flex flex-col">
+      <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 +189,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/page-stack.tsx

@@ -1,53 +0,0 @@
-import { CoID, LocalNode, RawCoValue } from "cojson";
-import { Page } from "./page"; // Assuming you have a Page component
-
-// Define the structure of a page in the path
-interface PageInfo {
-  coId: CoID<RawCoValue>;
-  name?: string;
-}
-
-// Props for the PageStack component
-interface PageStackProps {
-  path: PageInfo[];
-  node?: LocalNode | null;
-  goBack: () => void;
-  addPages: (pages: PageInfo[]) => void;
-  children?: React.ReactNode;
-}
-
-export function PageStack({
-  path,
-  node,
-  goBack,
-  addPages,
-  children,
-}: PageStackProps) {
-  return (
-    <div className="relative mt-4 h-[calc(100vh-6rem)]">
-      {children && <div className="absolute inset-0 pb-20">{children}</div>}
-      {node &&
-        path.map((page, index) => (
-          <Page
-            key={`${page.coId}-${index}`}
-            coId={page.coId}
-            node={node}
-            name={page.name || page.coId}
-            onHeaderClick={goBack}
-            onNavigate={addPages}
-            isTopLevel={index === path.length - 1}
-            style={{
-              transform: `translateZ(${(index - path.length + 1) * 200}px) scale(${
-                1 - (path.length - index - 1) * 0.05
-              }) translateY(${-(index - path.length + 1) * -4}%)`,
-              opacity: 1 - (path.length - index - 1) * 0.05,
-              zIndex: index,
-              transitionProperty: "transform, opacity",
-              transitionDuration: "0.3s",
-              transitionTimingFunction: "ease-out",
-            }}
-          />
-        ))}
-    </div>
-  );
-}

examples/inspector/src/viewer/page.tsx

@@ -1,138 +0,0 @@
-import clsx from "clsx";
-import { CoID, LocalNode, RawCoStream, RawCoValue } from "cojson";
-import { useEffect, useState } from "react";
-import { CoStreamView } from "./co-stream-view";
-import { GridView } from "./grid-view";
-import { TableView } from "./table-viewer";
-import { TypeIcon } from "./type-icon";
-import { PageInfo } from "./types";
-import { useResolvedCoValue } from "./use-resolve-covalue";
-import { AccountOrGroupPreview } from "./value-renderer";
-
-type PageProps = {
-  coId: CoID<RawCoValue>;
-  node: LocalNode;
-  name: string;
-  onNavigate: (newPages: PageInfo[]) => void;
-  onHeaderClick?: () => void;
-  isTopLevel?: boolean;
-  style: React.CSSProperties;
-};
-
-export function Page({
-  coId,
-  node,
-  name,
-  onNavigate,
-  onHeaderClick,
-  style,
-  isTopLevel,
-}: PageProps) {
-  const { value, snapshot, type, extendedType } = useResolvedCoValue(
-    coId,
-    node,
-  );
-  const [viewMode, setViewMode] = useState<"grid" | "table">("grid");
-
-  const supportsTableView = type === "colist" || extendedType === "record";
-
-  // Automatically switch to table view if the page is a CoMap record
-  useEffect(() => {
-    if (supportsTableView) {
-      setViewMode("table");
-    }
-  }, [supportsTableView]);
-
-  if (snapshot === "unavailable") {
-    return <div style={style}>Data unavailable</div>;
-  }
-
-  if (!snapshot) {
-    return <div style={style}></div>;
-  }
-
-  return (
-    <div
-      style={style}
-      className={clsx(
-        "absolute inset-0 border border-gray-900/5 bg-clip-padding bg-white rounded-xl shadow-lg p-6 animate-in",
-      )}
-    >
-      {!isTopLevel && (
-        <div
-          className="absolute inset-x-0 top-0 h-10"
-          aria-label="Back"
-          onClick={() => {
-            onHeaderClick?.();
-          }}
-          aria-hidden="true"
-        ></div>
-      )}
-      <div className="flex justify-between items-center mb-4">
-        <div className="flex flex-col gap-2">
-          <h2 className="text-2xl font-bold flex items-start flex-col gap-1">
-            <span>
-              {name}
-              {typeof snapshot === "object" && "name" in snapshot ? (
-                <span className="text-gray-600 font-medium">
-                  {" "}
-                  {
-                    (
-                      snapshot as {
-                        name: string;
-                      }
-                    ).name
-                  }
-                </span>
-              ) : null}
-            </span>
-          </h2>
-          <div className="flex items-center gap-2">
-            <span className="text-xs text-gray-700 font-medium py-0.5 px-1 -ml-0.5 rounded bg-gray-700/5 inline-block font-mono">
-              {type && <TypeIcon type={type} extendedType={extendedType} />}
-            </span>
-            <span className="text-xs text-gray-700 font-medium py-0.5 px-1 -ml-0.5 rounded bg-gray-700/5 inline-block font-mono">
-              {coId}
-            </span>
-          </div>
-        </div>
-        {/* {supportsTableView && (
-          <button
-            onClick={toggleViewMode}
-            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
-          >
-            {viewMode === "grid" ? "Table View" : "Grid View"}
-          </button>
-        )} */}
-      </div>
-      <div className="overflow-auto max-h-[calc(100%-4rem)]">
-        {type === "costream" ? (
-          <CoStreamView
-            data={snapshot}
-            onNavigate={onNavigate}
-            node={node}
-            value={value as RawCoStream}
-          />
-        ) : viewMode === "grid" ? (
-          <GridView data={snapshot} onNavigate={onNavigate} node={node} />
-        ) : (
-          <TableView data={snapshot} node={node} onNavigate={onNavigate} />
-        )}
-        {/* --- */}
-        {extendedType !== "account" && extendedType !== "group" && (
-          <div className="text-xs text-gray-500 mt-4">
-            Owned by{" "}
-            <AccountOrGroupPreview
-              coId={value.group.id}
-              node={node}
-              showId
-              onClick={() => {
-                onNavigate([{ coId: value.group.id, name: "owner" }]);
-              }}
-            />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

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

@@ -1,133 +0,0 @@
-import { CoID, LocalNode, RawCoValue } from "cojson";
-import { JsonObject } from "cojson/src/jsonValue.ts";
-import { useMemo, useState } from "react";
-import { LinkIcon } from "../link-icon";
-import { PageInfo } from "./types";
-import { useResolvedCoValues } from "./use-resolve-covalue";
-import { ValueRenderer } from "./value-renderer";
-
-export function TableView({
-  data,
-  node,
-  onNavigate,
-}: {
-  data: JsonObject;
-  node: LocalNode;
-  onNavigate: (pages: PageInfo[]) => void;
-}) {
-  const [visibleRowsCount, setVisibleRowsCount] = useState(10);
-  const [coIdArray, visibleRows] = useMemo(() => {
-    const coIdArray = Array.isArray(data)
-      ? data
-      : Object.values(data).every(
-            (k) => typeof k === "string" && k.startsWith("co_"),
-          )
-        ? Object.values(data).map((k) => k as CoID<RawCoValue>)
-        : [];
-
-    const visibleRows = coIdArray.slice(0, visibleRowsCount);
-
-    return [coIdArray, visibleRows];
-  }, [data, visibleRowsCount]);
-  const resolvedRows = useResolvedCoValues(visibleRows, node);
-
-  const hasMore = visibleRowsCount < coIdArray.length;
-
-  if (!coIdArray.length) {
-    return <div>No data to display</div>;
-  }
-
-  if (resolvedRows.length === 0) {
-    return <div>Loading...</div>;
-  }
-
-  const keys = Array.from(
-    new Set(resolvedRows.flatMap((item) => Object.keys(item.snapshot || {}))),
-  );
-
-  const loadMore = () => {
-    setVisibleRowsCount((prevVisibleRows) => prevVisibleRows + 10);
-  };
-
-  return (
-    <div>
-      <table className="min-w-full divide-y divide-gray-200">
-        <thead className="sticky top-0 border-b">
-          <tr>
-            {["", ...keys].map((key) => (
-              <th
-                key={key}
-                className="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 rounded"
-              >
-                {key}
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody className="bg-white divide-y divide-gray-200">
-          {resolvedRows.slice(0, visibleRowsCount).map((item, index) => (
-            <tr key={index}>
-              <td className="px-1 py-0">
-                <button
-                  onClick={() =>
-                    onNavigate([
-                      {
-                        coId: item.value!.id,
-                        name: index.toString(),
-                      },
-                    ])
-                  }
-                  className="px-4 py-4 whitespace-nowrap text-sm text-gray-500 hover:text-blue-500 hover:bg-gray-100 rounded"
-                >
-                  <LinkIcon />
-                </button>
-              </td>
-              {keys.map((key) => (
-                <td
-                  key={key}
-                  className="px-4 py-4 whitespace-nowrap text-sm text-gray-500"
-                >
-                  <ValueRenderer
-                    json={(item.snapshot as JsonObject)[key]}
-                    onCoIDClick={(coId) => {
-                      async function handleClick() {
-                        onNavigate([
-                          {
-                            coId: item.value!.id,
-                            name: index.toString(),
-                          },
-                          {
-                            coId: coId,
-                            name: key,
-                          },
-                        ]);
-                      }
-
-                      handleClick();
-                    }}
-                  />
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-      <div className="py-4 text-gray-500 flex items-center justify-between gap-2">
-        <span>
-          Showing {Math.min(visibleRowsCount, coIdArray.length)} of{" "}
-          {coIdArray.length}
-        </span>
-        {hasMore && (
-          <div className="text-center">
-            <button
-              onClick={loadMore}
-              className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
-            >
-              Load More
-            </button>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

examples/inspector/src/viewer/type-icon.tsx

@@ -1,47 +0,0 @@
-import { CoID, LocalNode, RawCoValue } from "cojson";
-import {
-  CoJsonType,
-  ExtendedCoJsonType,
-  useResolvedCoValue,
-} from "./use-resolve-covalue";
-
-export const TypeIcon = ({
-  type,
-  extendedType,
-}: {
-  type: CoJsonType;
-  extendedType?: ExtendedCoJsonType;
-}) => {
-  const iconMap: Record<ExtendedCoJsonType | CoJsonType, string> = {
-    record: "{} Record",
-    image: "🖼️ Image",
-    comap: "{} CoMap",
-    costream: "≋ CoStream",
-    colist: "☰ CoList",
-    account: "👤 Account",
-    group: "👥 Group",
-  };
-
-  const iconKey = extendedType || type;
-  const icon = iconMap[iconKey as keyof typeof iconMap];
-
-  return icon ? <span className="font-mono">{icon}</span> : null;
-};
-
-export const ResolveIcon = ({
-  coId,
-  node,
-}: {
-  coId: CoID<RawCoValue>;
-  node: LocalNode;
-}) => {
-  const { type, extendedType, snapshot } = useResolvedCoValue(coId, node);
-
-  if (snapshot === "unavailable" && !type) {
-    return <div className="text-gray-600 font-medium">Unavailable</div>;
-  }
-
-  if (!type) return <div className="whitespace-pre w-14 font-mono"> </div>;
-
-  return <TypeIcon type={type} extendedType={extendedType} />;
-};

examples/inspector/src/viewer/types.ts

@@ -1,9 +0,0 @@
-import { CoID, RawCoValue } from "cojson";
-
-export type PageInfo = {
-  coId: CoID<RawCoValue>;
-  name?: string;
-};
-
-export const isCoId = (coId: unknown): coId is CoID<RawCoValue> =>
-  typeof coId === "string" && coId.startsWith("co_");

examples/inspector/src/viewer/use-page-path.ts

@@ -1,6 +1,6 @@
 import { CoID, RawCoValue } from "cojson";
+import { PageInfo } from "jazz-inspector";
 import { useCallback, useEffect, useState } from "react";
-import { PageInfo } from "./types";
 
 export function usePagePath(defaultPath?: PageInfo[]) {
   const [path, setPath] = useState<PageInfo[]>(() => {

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

@@ -1,242 +0,0 @@
-import clsx from "clsx";
-import { CoID, JsonValue, LocalNode, RawCoValue } from "cojson";
-import React, { useEffect, useState } from "react";
-import { LinkIcon } from "../link-icon";
-import {
-  isBrowserImage,
-  resolveCoValue,
-  useResolvedCoValue,
-} from "./use-resolve-covalue";
-
-// Is there a chance we can pass the actual CoValue here?
-export function ValueRenderer({
-  json,
-  compact,
-  onCoIDClick,
-}: {
-  json: JsonValue | undefined;
-  compact?: boolean;
-  onCoIDClick?: (childNode: CoID<RawCoValue>) => void;
-}) {
-  if (typeof json === "undefined" || json === undefined) {
-    return <span className="text-gray-400">undefined</span>;
-  }
-
-  if (json === null) {
-    return <span className="text-gray-400">null</span>;
-  }
-
-  if (typeof json === "string" && json.startsWith("co_")) {
-    return (
-      <span
-        className={clsx(
-          "inline-flex gap-1 items-center",
-          onCoIDClick && "text-blue-500 cursor-pointer hover:underline",
-        )}
-        onClick={() => {
-          onCoIDClick?.(json as CoID<RawCoValue>);
-        }}
-      >
-        {json}
-        {onCoIDClick && <LinkIcon />}
-      </span>
-    );
-  }
-
-  if (typeof json === "string") {
-    return (
-      <span className="text-green-900 font-mono">
-        {/* <span className="select-none opacity-70">{'"'}</span> */}
-        {json}
-        {/* <span className="select-none opacity-70">{'"'}</span> */}
-      </span>
-    );
-  }
-
-  if (typeof json === "number") {
-    return <span className="text-purple-500">{json}</span>;
-  }
-
-  if (typeof json === "boolean") {
-    return (
-      <span
-        className={clsx(
-          json
-            ? "text-green-700 bg-green-700/5"
-            : "text-amber-700 bg-amber-500/5",
-          "font-mono",
-          "inline-block px-1 py-0.5 rounded",
-        )}
-      >
-        {json.toString()}
-      </span>
-    );
-  }
-
-  if (Array.isArray(json)) {
-    return (
-      <span title={JSON.stringify(json)}>
-        Array <span className="text-gray-500">({json.length})</span>
-      </span>
-    );
-  }
-
-  if (typeof json === "object") {
-    return (
-      <span
-        title={JSON.stringify(json, null, 2)}
-        className="inline-block max-w-64 truncate"
-      >
-        {compact ? (
-          <span>
-            Object{" "}
-            <span className="text-gray-500">({Object.keys(json).length})</span>
-          </span>
-        ) : (
-          JSON.stringify(json, null, 2)
-        )}
-      </span>
-    );
-  }
-
-  return <span>{String(json)}</span>;
-}
-
-export const CoMapPreview = ({
-  coId,
-  node,
-  limit = 6,
-}: {
-  coId: CoID<RawCoValue>;
-  node: LocalNode;
-  limit?: number;
-}) => {
-  const { value, snapshot, type, extendedType } = useResolvedCoValue(
-    coId,
-    node,
-  );
-
-  if (!snapshot) {
-    return (
-      <div className="rounded bg-gray-100 animate-pulse whitespace-pre w-24">
-        {" "}
-      </div>
-    );
-  }
-
-  if (snapshot === "unavailable" && !value) {
-    return <div className="text-gray-500">Unavailable</div>;
-  }
-
-  if (extendedType === "image" && isBrowserImage(snapshot)) {
-    return (
-      <div>
-        <img
-          src={snapshot.placeholderDataURL}
-          className="size-8 border-2 border-white drop-shadow-md my-2"
-        />
-        <span className="text-gray-500 text-sm">
-          {snapshot.originalSize[0]} x {snapshot.originalSize[1]}
-        </span>
-
-        {/* <CoMapPreview coId={value[]} node={node} /> */}
-        {/* <ProgressiveImg image={value}>
-                    {({ src }) => <img src={src} className={clsx("w-full")} />}
-                </ProgressiveImg> */}
-      </div>
-    );
-  }
-
-  if (extendedType === "record") {
-    return (
-      <div>
-        Record{" "}
-        <span className="text-gray-500">({Object.keys(snapshot).length})</span>
-      </div>
-    );
-  }
-
-  if (type === "colist") {
-    return (
-      <div>
-        List{" "}
-        <span className="text-gray-500">
-          ({(snapshot as unknown as []).length})
-        </span>
-      </div>
-    );
-  }
-
-  return (
-    <div className="text-sm flex flex-col gap-2 items-start">
-      <div className="grid grid-cols-[auto_1fr] gap-2">
-        {Object.entries(snapshot)
-          .slice(0, limit)
-          .map(([key, value]) => (
-            <React.Fragment key={key}>
-              <span className="font-medium">{key}: </span>
-              <span>
-                <ValueRenderer json={value} />
-              </span>
-            </React.Fragment>
-          ))}
-      </div>
-      {Object.entries(snapshot).length > limit && (
-        <div className="text-left text-xs text-gray-500 mt-2">
-          {Object.entries(snapshot).length - limit} more
-        </div>
-      )}
-    </div>
-  );
-};
-
-export function AccountOrGroupPreview({
-  coId,
-  node,
-  showId = false,
-  onClick,
-}: {
-  coId: CoID<RawCoValue>;
-  node: LocalNode;
-  showId?: boolean;
-  onClick?: (name?: string) => void;
-}) {
-  const { snapshot, extendedType } = useResolvedCoValue(coId, node);
-  const [name, setName] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (extendedType === "account") {
-      resolveCoValue(
-        (snapshot as unknown as { profile: CoID<RawCoValue> }).profile,
-        node,
-      ).then(({ snapshot }) => {
-        if (
-          typeof snapshot === "object" &&
-          "name" in snapshot &&
-          typeof snapshot.name === "string"
-        ) {
-          setName(snapshot.name);
-        }
-      });
-    }
-  }, [snapshot, node, extendedType]);
-
-  if (!snapshot) return <span>Loading...</span>;
-  if (extendedType !== "account" && extendedType !== "group") {
-    return <span>CoID is not an account or group</span>;
-  }
-
-  const displayName = extendedType === "account" ? name || "Account" : "Group";
-  const displayText = showId ? `${displayName} (${coId})` : displayName;
-
-  const props = onClick
-    ? {
-        onClick: () => onClick(displayName),
-        className: "text-blue-500 cursor-pointer hover:underline",
-      }
-    : {
-        className: "text-gray-500",
-      };
-
-  return <span {...props}>{displayText}</span>;
-}

examples/inspector/tailwind.config.ts

@@ -1,5 +1,29 @@
 import type { Config } from "tailwindcss";
-import animate from "tailwindcss-animate";
+
+const stonePalette = {
+  50: "oklch(0.988281 0.002 75)",
+  100: "oklch(0.980563 0.002 75)",
+  200: "oklch(0.917969 0.002 75)",
+  300: "oklch(0.853516 0.002 75)",
+  400: "oklch(0.789063 0.002 75)",
+  500: "oklch(0.726563 0.002 75)",
+  600: "oklch(0.613281 0.002 75)",
+  700: "oklch(0.523438 0.002 75)",
+  800: "oklch(0.412109 0.002 75)",
+  900: "oklch(0.302734 0.002 75)",
+  925: "oklch(0.220000 0.002 75)",
+  950: "oklch(0.193359 0.002 75)",
+};
+
+const stonePaletteWithAlpha = { ...stonePalette };
+
+Object.keys(stonePalette).forEach((key) => {
+  // @ts-ignore
+  stonePaletteWithAlpha[key] = stonePaletteWithAlpha[key].replace(
+    ")",
+    "/ <alpha-value>)",
+  );
+});
 
 const config: Config = {
   content: [
@@ -18,62 +42,25 @@ const config: Config = {
     },
     extend: {
       colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
+        stone: stonePaletteWithAlpha,
+        gray: stonePaletteWithAlpha,
+        blue: {
+          50: "#f5f7ff",
+          100: "#ebf0fe",
+          200: "#d6e0fd",
+          300: "#b3c7fc",
+          400: "#8aa6f9",
+          500: "#5870F1",
+          600: "#3651E7",
+          700: "#3313F7",
+          800: "#2A12BE",
+          900: "#12046A",
+          950: "#1e1b4b",
+          DEFAULT: "#3313F7",
         },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
       },
     },
   },
-  plugins: [animate],
 };
 
 export default config;

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,37 @@
+# multiauth
+
+## 0.0.4
+
+### Patch Changes
+
+- jazz-react@0.11.5
+- jazz-react-auth-clerk@0.11.5
+- jazz-tools@0.11.5
+
+## 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.4",
+  "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>,
+);