fix: The .load function now returns null on error

1656 Document loading and subscriptions

.changeset/breezy-boxes-unite.md

@@ -0,0 +1,6 @@
+---
+"jazz-tools": minor
+"cojson": minor
+---
+
+Check CoValue access permissions when loading

.changeset/config.json

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

.changeset/fast-beans-decide.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": minor
+---
+
+Implement new API for deep loading

.changeset/forty-tips-swim.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": minor
+---
+
+The .load function now returns `null` on error

.changeset/funny-birds-flash.md

@@ -0,0 +1,5 @@
+---
+"cojson": minor
+---
+
+Return the EVERYONE role if the account is not direct a member of the group

.changeset/thin-melons-give.md

@@ -0,0 +1,5 @@
+---
+"jazz-vue": patch
+---
+
+Fix types compilation for useAccount

.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,220 @@
 # chat-rn-clerk
 
+## 1.0.87
+
+### Patch Changes
+
+- 1bfa9bb: Removed when="singedUp" from examples apps' Jazz providers. This is a really niche use-case option and can lead to broken-feeling experiences when anonymous users try to load something.
+- Updated dependencies [e7c85b7]
+  - jazz-react-native@0.11.6
+  - jazz-tools@0.11.6
+  - jazz-react-native-auth-clerk@0.11.6
+  - jazz-react-native-media-images@0.11.6
+
+## 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/app/chat/[chatId].tsx

@@ -28,7 +28,7 @@ export default function Conversation() {
   const { me } = useAccount();
   const [chat, setChat] = useState<Chat>();
   const [message, setMessage] = useState("");
-  const loadedChat = useCoState(Chat, chat?.id, [{}]);
+  const loadedChat = useCoState(Chat, chat?.id, { resolve: { $each: true } });
   const navigation = useNavigation();
   const [isUploading, setIsUploading] = useState(false);
 
@@ -71,7 +71,7 @@ export default function Conversation() {
 
   const loadChat = async (chatId: ID<Chat>) => {
     try {
-      const chat = await Chat.load(chatId, me, []);
+      const chat = await Chat.load(chatId, me);
       setChat(chat);
     } catch (error) {
       console.log("Error loading chat", error);

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.87",
   "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-clerk/src/auth-context.tsx

@@ -12,7 +12,6 @@ export function JazzAndAuth({ children }: PropsWithChildren) {
       storage="sqlite"
       sync={{
         peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
-        when: "signedUp", // This makes the app work in local mode when the user is not authenticated
       }}
     >
       {children}

examples/chat-rn/CHANGELOG.md

@@ -1,5 +1,174 @@
 # chat-rn
 
+## 1.0.83
+
+### Patch Changes
+
+- Updated dependencies [e7c85b7]
+  - jazz-react-native@0.11.6
+  - jazz-tools@0.11.6
+
+## 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.83",
   "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/src/chat.tsx

@@ -20,7 +20,7 @@ import { Chat, Message } from "./schema";
 export default function ChatScreen({ navigation }: { navigation: any }) {
   const { me, logOut } = useAccount();
   const [chatId, setChatId] = useState<ID<Chat>>();
-  const loadedChat = useCoState(Chat, chatId, [{}]);
+  const loadedChat = useCoState(Chat, chatId, { resolve: { $each: true } });
   const [message, setMessage] = useState("");
   const profile = useCoState(Profile, me._refs.profile?.id, {});
 

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,183 @@
 # chat-vue
 
+## 0.0.68
+
+### Patch Changes
+
+- Updated dependencies [e7c85b7]
+  - jazz-tools@0.11.6
+  - jazz-vue@0.11.6
+  - jazz-browser@0.11.6
+
+## 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/README.md

@@ -11,12 +11,12 @@ You can either
 
 Create a new Jazz project, and use this example as a template.
 ```bash
-npx create-jazz-app@latest --example chat-vue --project-name chat-vue
+npx create-jazz-app@latest chat-vue-app --example chat-vue
 ```
 
 Go to the new project directory.
 ```bash
-cd chat-vue
+cd chat-vue-app
 ```
 
 Run the dev server.

examples/chat-vue/package.json

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

examples/chat-vue/src/views/ChatView.vue

@@ -49,7 +49,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const chat = useCoState(Chat, props.chatId, [{}]);
+    const chat = useCoState(Chat, props.chatId, { resolve: { $each: true } });
     const showNLastMessages = ref(30);
 
     const displayedMessages = computed(() => {

examples/chat/CHANGELOG.md

@@ -1,5 +1,192 @@
 # jazz-example-chat
 
+## 0.0.165
+
+### Patch Changes
+
+- Updated dependencies [e7c85b7]
+- Updated dependencies [09f0a98]
+- Updated dependencies [11da4d1]
+- Updated dependencies [8ed144e]
+  - jazz-react@0.11.6
+  - jazz-tools@0.11.6
+  - jazz-inspector@0.11.6
+  - jazz-browser-media-images@0.11.6
+
+## 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/README.md

@@ -13,12 +13,12 @@ You can either
 
 Create a new Jazz project, and use this example as a template.
 ```bash
-npx create-jazz-app@latest --example chat --project-name chat
+npx create-jazz-app@latest chat-app --example chat
 ```
 
 Go to the new project directory.
 ```bash
-cd chat
+cd chat-app
 ```
 
 Run the dev server.

examples/chat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-chat",
   "private": true,
-  "version": "0.0.145",
+  "version": "0.0.165",
   "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,7 +17,8 @@ import {
 } from "./ui.tsx";
 
 export function ChatScreen(props: { chatID: ID<Chat> }) {
-  const chat = useCoState(Chat, props.chatID, [{}]);
+  const chat = useCoState(Chat, props.chatID, { resolve: { $each: true } });
+  const account = useAccount();
   const [showNLastMessages, setShowNLastMessages] = useState(30);
 
   if (!chat)
@@ -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,188 @@
 # minimal-auth-clerk
 
+## 0.0.64
+
+### Patch Changes
+
+- 1bfa9bb: Removed when="singedUp" from examples apps' Jazz providers. This is a really niche use-case option and can lead to broken-feeling experiences when anonymous users try to load something.
+- Updated dependencies [e7c85b7]
+  - jazz-react@0.11.6
+  - jazz-tools@0.11.6
+  - jazz-react-auth-clerk@0.11.6
+
+## 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/README.md

@@ -15,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 clerk --project-name clerk
+npx create-jazz-app@latest clerk-app --example clerk
 ```
 
 Go to the new project directory.
 ```bash
-cd clerk
+cd clerk-app
 ```
 
 Run the dev server.

examples/clerk/package.json

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

examples/clerk/src/main.tsx

@@ -21,7 +21,6 @@ function JazzProvider({ children }: { children: React.ReactNode }) {
       clerk={clerk}
       sync={{
         peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
-        when: "signedUp", // This makes the app work in local mode when the user is not authenticated
       }}
     >
       {children}

examples/file-share-svelte/CHANGELOG.md

@@ -1,5 +1,161 @@
 # file-share-svelte
 
+## 0.0.48
+
+### Patch Changes
+
+- 1bfa9bb: Removed when="singedUp" from examples apps' Jazz providers. This is a really niche use-case option and can lead to broken-feeling experiences when anonymous users try to load something.
+- Updated dependencies [e7c85b7]
+  - jazz-tools@0.11.6
+  - jazz-svelte@0.11.6
+
+## 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.48",
   "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/file-share-svelte/src/routes/+layout.svelte

@@ -27,7 +27,6 @@
   AccountSchema={FileShareAccount}
   sync={{
     peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
-    when: "signedUp",
   }}
 >
   <PasskeyAuthBasicUI appName="File Share">

examples/filestream/CHANGELOG.md

@@ -1,5 +1,132 @@
 # jazz-tailwind-demo-auth-starter
 
+## 0.0.4
+
+### Patch Changes
+
+- Updated dependencies [e7c85b7]
+  - jazz-react@0.11.6
+  - jazz-tools@0.11.6
+
+## 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.4",
   "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,192 @@
 # form
 
+## 0.1.6
+
+### Patch Changes
+
+- Updated dependencies [e7c85b7]
+- Updated dependencies [8ed144e]
+  - jazz-react@0.11.6
+  - jazz-tools@0.11.6
+  - jazz-browser-media-images@0.11.6
+
+## 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/README.md

@@ -28,12 +28,12 @@ You can either
 
 Create a new Jazz project, and use this example as a template.
 ```bash
-npx create-jazz-app@latest --example form --project-name form
+npx create-jazz-app@latest form-app --example form
 ```
 
 Go to the new project directory.
 ```bash
-cd form
+cd form-app
 ```
 
 Run the dev server.

examples/form/package.json

@@ -1,7 +1,7 @@
 {
   "name": "form",
   "private": true,
-  "version": "0.0.40",
+  "version": "0.1.6",
   "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/src/CreateOrder.tsx

@@ -12,7 +12,9 @@ import {
 } from "./schema.ts";
 
 export function CreateOrder() {
-  const { me } = useAccount({ root: { draft: {}, orders: [] } });
+  const { me } = useAccount({
+    resolve: { root: { draft: true, orders: true } },
+  });
   const router = useIframeHashRouter();
   const [errors, setErrors] = useState<string[]>([]);
 
@@ -60,7 +62,7 @@ function CreateOrderForm({
   onSave: (draft: DraftBubbleTeaOrder) => void;
 }) {
   const draft = useCoState(DraftBubbleTeaOrder, id, {
-    addOns: [],
+    resolve: { addOns: true },
   });
 
   if (!draft) return;

examples/form/src/DraftIndicator.tsx

@@ -2,7 +2,7 @@ import { useAccount } from "jazz-react";
 
 export function DraftIndicator() {
   const { me } = useAccount({
-    root: { draft: {} },
+    resolve: { root: { draft: true } },
   });
 
   if (me?.root.draft?.hasChanges) {

examples/form/src/EditOrder.tsx

@@ -6,7 +6,7 @@ import { OrderThumbnail } from "./OrderThumbnail.tsx";
 import { BubbleTeaOrder } from "./schema.ts";
 
 export function EditOrder(props: { id: ID<BubbleTeaOrder> }) {
-  const order = useCoState(BubbleTeaOrder, props.id, []);
+  const order = useCoState(BubbleTeaOrder, props.id);
 
   if (!order) return;
 

examples/form/src/Orders.tsx

@@ -4,7 +4,7 @@ import { OrderThumbnail } from "./OrderThumbnail.tsx";
 
 export function Orders() {
   const { me } = useAccount({
-    root: { orders: [] },
+    resolve: { root: { orders: true } },
   });
 
   return (

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,187 @@
 # image-upload
 
+## 0.0.62
+
+### Patch Changes
+
+- Updated dependencies [e7c85b7]
+- Updated dependencies [8ed144e]
+  - jazz-react@0.11.6
+  - jazz-tools@0.11.6
+  - jazz-browser-media-images@0.11.6
+
+## 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/README.md

@@ -15,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 image-upload --project-name image-upload
+npx create-jazz-app@latest image-upload-app --example image-upload
 ```
 
 Go to the new project directory.
 ```bash
-cd image-upload
+cd image-upload-app
 ```
 
 Run the dev server.

examples/image-upload/package.json

@@ -1,7 +1,7 @@
 {
   "name": "image-upload",
   "private": true,
-  "version": "0.0.42",
+  "version": "0.0.62",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -24,6 +24,9 @@
     "@vitejs/plugin-react": "^4.3.3",
     "globals": "^15.11.0",
     "typescript": "~5.6.2",
-    "vite": "^6.0.11"
+    "vite": "^6.0.11",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.27",
+    "tailwindcss": "^3.4.17"
   }
 }

examples/image-upload/src/App.tsx

@@ -1,20 +1,9 @@
-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">
+      <main className="container py-16">
         <ImageUpload />
       </main>
     </>

examples/image-upload/src/ImageUpload.tsx

@@ -1,55 +1,97 @@
 import { createImage } from "jazz-browser-media-images";
 import { ProgressiveImg, useAccount } from "jazz-react";
-import { ImageDefinition } from "jazz-tools";
-import { ChangeEvent, useRef } from "react";
-
-function Image({ image }: { image: ImageDefinition }) {
-  return (
-    <ProgressiveImg image={image}>
-      {({ src }) => <img src={src} />}
-    </ProgressiveImg>
-  );
-}
+import { ChangeEvent, useEffect, useRef, useState } from "react";
 
 export default function ImageUpload() {
   const { me } = useAccount();
-
+  const [imagePreviewUrl, setImagePreviewUrl] = useState<string | null>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
+  useEffect(() => {
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (imagePreviewUrl) {
+        e.preventDefault();
+        return "Upload in progress. Are you sure you want to leave?";
+      }
+    };
+
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+
+      if (imagePreviewUrl) {
+        URL.revokeObjectURL(imagePreviewUrl);
+      }
+    };
+  }, [imagePreviewUrl]);
+
   const onImageChange = async (event: ChangeEvent<HTMLInputElement>) => {
     if (!me?.profile) return;
 
     const file = event.currentTarget.files?.[0];
 
     if (file) {
-      me.profile.image = await createImage(file, {
-        owner: me.profile._owner,
-      });
+      const objectUrl = URL.createObjectURL(file);
+      setImagePreviewUrl(objectUrl);
+
+      try {
+        me.profile.image = await createImage(file, {
+          owner: me.profile._owner,
+        });
+      } catch (error) {
+        console.error("Error uploading image:", error);
+      } finally {
+        URL.revokeObjectURL(objectUrl);
+        setImagePreviewUrl(null);
+      }
     }
   };
 
   const deleteImage = () => {
     if (!me?.profile) return;
-
     me.profile.image = null;
   };
 
-  return (
-    <>
-      <div>{me?.profile?.image && <Image image={me.profile.image} />}</div>
+  if (me?.profile?.image) {
+    return (
+      <>
+        <ProgressiveImg image={me.profile.image}>
+          {({ src }) => <img alt="" src={src} className="w-full h-auto" />}
+        </ProgressiveImg>
 
-      <div>
-        {me?.profile?.image ? (
-          <button type="button" onClick={deleteImage}>
-            Delete image
-          </button>
-        ) : (
-          <div>
-            <label>Upload image</label>
-            <input ref={inputRef} type="file" onChange={onImageChange} />
-          </div>
-        )}
+        <button type="button" onClick={deleteImage} className="mt-5">
+          Delete image
+        </button>
+      </>
+    );
+  }
+
+  if (imagePreviewUrl) {
+    return (
+      <div className="relative">
+        <p className="z-10 absolute font-semibold text-gray-900 inset-0 flex items-center justify-center">
+          Uploading image...
+        </p>
+        <img
+          src={imagePreviewUrl}
+          alt="Preview"
+          className="opacity-50 w-full h-auto"
+        />
       </div>
-    </>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      <label htmlFor="image">Image</label>
+      <input
+        id="image"
+        name="image"
+        ref={inputRef}
+        type="file"
+        accept="image/png, image/jpeg, image/gif, image/bmp"
+        onChange={onImageChange}
+      />
+    </div>
   );
 }

examples/image-upload/src/index.css

@@ -1,83 +1,3 @@
-: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;
-  --border-color: #2f2e2d;
-}
-
-html,
-body,
-#root {
-  height: 100%;
-}
-
-body {
-  margin: 0;
-}
-
-button {
-  border-radius: 8px;
-  border: 0;
-  padding: 0.6em 1.2em;
-  font-weight: 500;
-  background-color: #1a1a1a;
-  cursor: pointer;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    --border-color: #e5e5e5;
-    color: #213547;
-    background-color: #ffffff;
-  }
-
-  a:hover {
-    color: #747bff;
-  }
-
-  button {
-    background-color: #f9f9f9;
-  }
-}
-
-* {
-  border-color: var(--border-color);
-}
-
-header,
-main {
-  padding: 0.5rem 0;
-}
-
-header {
-  border-bottom: 1px solid var(--border-color);
-  margin-bottom: 2rem;
-}
-
-nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.container {
-  margin-right: auto;
-  margin-left: auto;
-  padding-right: 0.75rem;
-  padding-left: 0.75rem;
-  max-width: 800px;
-}
-
-label {
-  display: block;
-  margin-bottom: 0.25rem;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

examples/image-upload/tailwind.config.ts

@@ -3,9 +3,16 @@ import type { Config } from "tailwindcss";
 const config: Config = {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      container: {
+        center: true,
+        padding: {
+          DEFAULT: "0.75rem",
+          sm: "1rem",
+        },
+      },
+    },
   },
-  plugins: [],
-};
+} as const;
 
 export default config;

examples/inspector/CHANGELOG.md

@@ -1,5 +1,113 @@
 # jazz-example-inspector
 
+## 0.0.115
+
+### Patch Changes
+
+- 09f0a98: UI and JSON display improvements
+- 11da4d1: isolate class name hashing on inspector
+- Updated dependencies [09f0a98]
+- Updated dependencies [11da4d1]
+- Updated dependencies [8ed144e]
+  - jazz-inspector@0.11.6
+  - cojson@0.11.6
+  - cojson-transport-ws@0.11.6
+
+## 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.115",
   "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.6",
+    "cojson-transport-ws": "workspace:0.11.6",
+    "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/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,18 @@ import {
   RawAccount,
   RawAccountID,
   RawCoValue,
-  WasmCrypto,
 } from "cojson";
 import { createWebSocketPeer } from "cojson-transport-ws";
-import { Trash2 } from "lucide-react";
+import { WasmCrypto } from "cojson/crypto/WasmCrypto";
+import {
+  Breadcrumbs,
+  Button,
+  Icon,
+  Input,
+  PageStack,
+  Select,
+} from "jazz-inspector";
 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 +88,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 +110,7 @@ export default function CoJsonViewerApp() {
     if (coValueId) {
       setPage(coValueId);
     }
+    setCoValueId("");
   };
 
   if (
@@ -117,9 +126,31 @@ 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={clsx(
+        "h-screen overflow-hidden flex flex-col",
+        " text-stone-700 bg-white",
+        "dark:text-stone-300 dark:bg-stone-950",
+      )}
+    >
+      <header className="flex items-center gap-4 p-3">
         <Breadcrumbs path={path} onBreadcrumbClick={goToIndex} />
+        <div className="flex-1">
+          <form onSubmit={handleCoValueIdSubmit}>
+            {path.length !== 0 && (
+              <Input
+                className="min-w-[21rem] font-mono"
+                placeholder="co_z1234567890abcdef123456789"
+                label="CoValue ID"
+                hideLabel
+                value={coValueId}
+                onChange={(e) =>
+                  setCoValueId(e.target.value as CoID<RawCoValue>)
+                }
+              />
+            )}
+          </form>
+        </div>
         <AccountSwitcher
           accounts={accounts}
           currentAccount={currentAccount}
@@ -127,7 +158,7 @@ export default function CoJsonViewerApp() {
           deleteCurrentAccount={deleteCurrentAccount}
           localNode={localNode}
         />
-      </div>
+      </header>
 
       <PageStack
         path={path}
@@ -135,50 +166,39 @@ export default function CoJsonViewerApp() {
         goBack={goBack}
         addPages={addPages}
       >
-        {!currentAccount ? (
-          <AddAccountForm addAccount={addAccount} />
-        ) : (
+        {!currentAccount && <AddAccountForm addAccount={addAccount} />}
+
+        {currentAccount && path.length <= 0 && (
           <form
             onSubmit={handleCoValueIdSubmit}
             aria-hidden={path.length !== 0}
-            className={clsx(
-              "flex flex-col justify-center items-center gap-2 h-full w-full mb-20 ",
-              "transition-all duration-150",
-              path.length > 0
-                ? "opacity-0 -translate-y-2 scale-95"
-                : "opacity-100",
-            )}
+            className="flex flex-col relative -top-6 justify-center gap-2 h-full w-full max-w-sm mx-auto"
           >
-            <fieldset className="flex flex-col gap-2 text-sm">
-              <h2 className="text-3xl font-medium text-gray-950 text-center mb-4">
-                Jazz CoValue Inspector
-              </h2>
-              <input
-                className="border p-4 rounded-lg min-w-[21rem] font-mono"
-                placeholder="co_z1234567890abcdef123456789"
-                value={coValueId}
-                onChange={(e) =>
-                  setCoValueId(e.target.value as CoID<RawCoValue>)
-                }
-              />
-              <button
-                type="submit"
-                className="bg-indigo-500 hover:bg-indigo-500/80 text-white px-4 py-2 rounded-md"
-              >
-                Inspect
-              </button>
-              <hr />
-              <button
-                type="button"
-                className="border inline-block px-2 py-1.5 text-black rounded"
-                onClick={() => {
-                  setCoValueId(currentAccount.id);
-                  setPage(currentAccount.id);
-                }}
-              >
-                Inspect My Account
-              </button>
-            </fieldset>
+            <h1 className="text-lg text-center font-medium mb-4 text-stone-900 dark:text-white">
+              Jazz CoValue Inspector
+            </h1>
+            <Input
+              label="CoValue ID"
+              className="font-mono"
+              hideLabel
+              placeholder="co_z1234567890abcdef123456789"
+              value={coValueId}
+              onChange={(e) => setCoValueId(e.target.value as CoID<RawCoValue>)}
+            />
+            <Button type="submit" variant="primary">
+              Inspect CoValue
+            </Button>
+
+            <p className="text-center">or</p>
+
+            <Button
+              variant="secondary"
+              onClick={() => {
+                setPage(currentAccount.id);
+              }}
+            >
+              Inspect my account
+            </Button>
           </form>
         )}
       </PageStack>
@@ -200,8 +220,11 @@ function AccountSwitcher({
   localNode: LocalNode | null;
 }) {
   return (
-    <div className="relative flex items-center gap-1">
-      <select
+    <div className="relative flex items-stretch gap-1">
+      <Select
+        label="Account to inspect"
+        hideLabel
+        className="label:sr-only max-w-96"
         value={currentAccount?.id || "add-account"}
         onChange={(e) => {
           if (e.target.value === "add-account") {
@@ -211,7 +234,6 @@ function AccountSwitcher({
             setCurrentAccount(account || null);
           }
         }}
-        className="p-2 px-4 bg-gray-100/50 border border-indigo-500/10 backdrop-blur-sm rounded-md text-indigo-700 appearance-none"
       >
         {accounts.map((account) => (
           <option key={account.id} value={account.id}>
@@ -223,15 +245,16 @@ function AccountSwitcher({
           </option>
         ))}
         <option value="add-account">Add account</option>
-      </select>
+      </Select>
       {currentAccount && (
-        <button
+        <Button
+          variant="secondary"
           onClick={deleteCurrentAccount}
-          className="p-3 rounded hover:bg-gray-200 transition-colors"
-          title="Delete Account"
+          className="rounded-md p-2 ml-1"
+          aria-label="Remove account"
         >
-          <Trash2 size={16} className="text-gray-500" />
-        </button>
+          <Icon name="delete" className="text-gray-500" />
+        </Button>
       )}
     </div>
   );
@@ -255,30 +278,34 @@ function AddAccountForm({
   return (
     <form
       onSubmit={handleSubmit}
-      className="flex flex-col gap-2 max-w-md mx-auto h-full justify-center"
+      className="flex flex-col gap-3 max-w-md mx-auto h-full justify-center"
     >
-      <h2 className="text-2xl font-medium text-gray-900 mb-3">
-        Add an Account to Inspect
+      <h2 className="text-2xl font-medium text-gray-900 dark:text-white">
+        Add an account to inspect
       </h2>
-      <input
-        className="border py-2 px-3 rounded-md"
-        placeholder="Account ID"
+      <p className="leading-relaxed mb-5">
+        Use the{" "}
+        <code className="whitespace-nowrap text-stone-900 dark:text-white font-semibold">
+          jazz-logged-in-secret
+        </code>{" "}
+        local storage key from within your Jazz app for your account
+        credentials.
+      </p>
+      <Input
+        label="Account ID"
         value={id}
+        placeholder="co_z1234567890abcdef123456789"
         onChange={(e) => setId(e.target.value)}
       />
-      <input
+      <Input
+        label="Account secret"
         type="password"
-        className="border py-2 px-3 rounded-md"
-        placeholder="Account Secret"
         value={secret}
         onChange={(e) => setSecret(e.target.value)}
       />
-      <button
-        type="submit"
-        className="bg-indigo-500 text-white px-4 py-2 rounded-md"
-      >
-        Add Account
-      </button>
+      <Button className="mt-3" type="submit">
+        Add account
+      </Button>
     </form>
   );
 }

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>
-  );
-}