[TEST] Add RNQuickCrypto provider to chat-rn-expo example

.changeset/config.json

@@ -6,6 +6,7 @@
   "fixed": [
     [
       "cojson",
+      "cojson-storage",
       "cojson-storage-indexeddb",
       "cojson-storage-sqlite",
       "cojson-transport-ws",

.github/pull_request_template.md

@@ -1,23 +1,24 @@
-# Description
-<!-- Please include a summary of the change and which issue is fixed -->
-<!-- Please also include relevant motivation and context -->
-<!-- Include any links to documentation like RFC’s if necessary -->
-<!-- Add a link to to relevant preview environments or anything that would simplify visual review process -->
-<!-- Supplemental screenshots and video are encouraged, but the primary description should be in text -->
+### What this Does
+Brief summary of the change, ideally framed in user or product terms.
 
-## Manual testing instructions
+### Why Are We Doing This?
+Link to the shaped pitch or explain what problem it solves.
 
-<!-- Add any actions required to manually test the changes -->
+### Scope / Boundaries
+Includes:
+- [x] Core feature functionality
+- [x] Tests or validation steps
 
-## Tests
+Do NOT include:
+- [ ] Related stretch features or follow-ups
 
-- [ ] Tests have been added and/or updated
-- [ ] Tests have not been updated, because: <!-- Insert reason for not updating tests here -->
-- [ ] I need help with writing tests
+### Testing Instructions
+How a reviewer or QA can verify behavior, offer step-by-step instructions if possible. Screenshots or recordings are welcome.
 
+### Known Issues / Open Questions (if any)
+- [ ] Note anything you’d like review on or decided async
 
-## Checklist
-
-- [ ] I've updated the part of the docs that are affected the PR changes
-- [ ] I've generated a changeset, if a version bump is required
-- [ ] I've updated the jsDoc comments to the public APIs I've modified, or added them when missing
+### Related Links
+- GitHub issue
+- Linear pitch
+- Design links or references

.github/workflows/code-quality.yml

@@ -1,11 +1,5 @@
 name: Code quality
 
-concurrency:
-  # For pushes, this lets concurrent runs happen, so each push gets a result.
-  # But for other events (e.g. PRs), we can cancel the previous runs.
-  group: ${{ github.workflow }}-${{ github.event_name == 'push' && github.sha || github.ref }}
-  cancel-in-progress: true
-
 on:
   push:
     branches: 
@@ -22,7 +16,7 @@ jobs:
       - name: Setup Biome
         uses: biomejs/setup-biome@v2
         with:
-          version: 2.1.3
+          version: 1.9.4
       - name: Run Biome
         run: biome ci .
 

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

@@ -1,11 +1,5 @@
 name: End-to-End Tests for React Native
 
-concurrency:
-  # For pushes, this lets concurrent runs happen, so each push gets a result.
-  # But for other events (e.g. PRs), we can cancel the previous runs.
-  group: ${{ github.workflow }}-${{ github.event_name == 'push' && github.sha || github.ref }}
-  cancel-in-progress: true
-
 on:
   pull_request:
     types: [opened, synchronize, reopened]

.github/workflows/jazz-run.yml

@@ -1,11 +1,5 @@
 name: Jazz Run Tests
 
-concurrency:
-  # For pushes, this lets concurrent runs happen, so each push gets a result.
-  # But for other events (e.g. PRs), we can cancel the previous runs.
-  group: ${{ github.workflow }}-${{ github.event_name == 'push' && github.sha || github.ref }}
-  cancel-in-progress: true
-
 on:
   push:
     branches: ["main"]

.github/workflows/playwright-homepage.yml

@@ -0,0 +1,46 @@
+name: Playwright Tests
+
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: blacksmith-4vcpu-ubuntu-2404
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          submodules: true
+
+      - name: Setup Source Code
+        uses: ./.github/actions/source-code/
+
+      - name: Install root dependencies
+        run: pnpm install && pnpm exec turbo build --filter="./packages/*"
+
+      - name: Install project dependencies
+        run: pnpm install
+        working-directory: ./homepage/homepage
+
+      - name: Pnpm Build
+        run: pnpm exec turbo build
+        working-directory: ./homepage/homepage
+
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install
+        working-directory: ./homepage/homepage
+
+      - name: Run Playwright tests
+        run: pnpm exec playwright test
+        working-directory: ./homepage/homepage
+
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: homepage-playwright-report
+          path: ./homepage/homepage/playwright-report/
+          retention-days: 30

.github/workflows/playwright.yml

@@ -1,11 +1,5 @@
 name: Playwright Tests
 
-concurrency:
-  # For pushes, this lets concurrent runs happen, so each push gets a result.
-  # But for other events (e.g. PRs), we can cancel the previous runs.
-  group: ${{ github.workflow }}-${{ github.event_name == 'push' && github.sha || github.ref }}
-  cancel-in-progress: true
-
 on:
   push:
     branches: ["main"]
@@ -19,7 +13,21 @@ jobs:
     continue-on-error: true
     strategy:
       matrix:
-        shard: ["1/2", "2/2"]
+        project: [
+          "tests/e2e",
+          "examples/chat",
+          "examples/chat-svelte",
+          "examples/clerk",
+          "examples/betterauth",
+          "examples/file-share-svelte",
+          "examples/form",
+          "examples/inspector",
+          "examples/music-player",
+          "examples/organization",
+          "starters/react-passkey-auth",
+          "starters/svelte-passkey-auth",
+          "tests/jazz-svelte"
+        ]
 
     steps:
       - uses: actions/checkout@v4
@@ -29,130 +37,25 @@ jobs:
       - name: Setup Source Code
         uses: ./.github/actions/source-code/
 
+      - name: Pnpm Build
+        run: |
+          if [ -f .env.test ]; then
+            cp .env.test .env
+          fi
+          pnpm turbo build
+        working-directory: ./${{ matrix.project }}
+
       - name: Install Playwright Browsers
         run: pnpm exec playwright install
+        working-directory: ./${{ matrix.project }}
 
-      - name: Run Playwright tests for shard ${{ matrix.shard }}
-        run: |
-          # Parse shard information (e.g., "1/2" -> shard_num=1, total_shards=2)
-          IFS='/' read -r shard_num total_shards <<< "${{ matrix.shard }}"
-          shard_index=$((shard_num - 1))  # Convert to 0-based index
-          
-          # Debug: Print parsed values
-          echo "Parsed shard_num: $shard_num"
-          echo "Parsed total_shards: $total_shards"
-          echo "Calculated shard_index: $shard_index"
-          
-          # Define all projects to test
-          all_projects=(
-            "tests/e2e"
-            "examples/chat"
-            "examples/chat-svelte"
-            "examples/clerk"
-            "examples/betterauth"
-            "examples/file-share-svelte"
-            "examples/form"
-            "examples/inspector"
-            "examples/music-player"
-            "examples/organization"
-            "examples/server-worker-http"
-            "starters/react-passkey-auth"
-            "starters/svelte-passkey-auth"
-            "tests/jazz-svelte"
-          )
-          
-          # Calculate which projects this shard should run
-          shard_projects=()
-          for i in "${!all_projects[@]}"; do
-            if [ $((i % total_shards)) -eq $shard_index ]; then
-              shard_projects+=("${all_projects[i]}")
-            fi
-          done
-          
-          # Track project results
-          overall_exit_code=0
-          failed_projects=()
-          passed_projects=()
-          
-          echo "=== Running tests for shard ${{ matrix.shard }} ==="
-          echo "Projects in this shard:"
-          printf '%s\n' "${shard_projects[@]}"
-          echo
-          
-          # Run tests for each project
-          for project in "${shard_projects[@]}"; do
-            echo "=== Testing project: $project ==="
-            
-            # Check if project directory exists
-            if [ ! -d "$project" ]; then
-              echo "❌ FAILED: Project directory $project does not exist"
-              failed_projects+=("$project (directory not found)")
-              overall_exit_code=1
-              continue
-            fi
-            
-            # Check if project has package.json
-            if [ ! -f "$project/package.json" ]; then
-              echo "❌ FAILED: No package.json found in $project"
-              failed_projects+=("$project (no package.json)")
-              overall_exit_code=1
-              continue
-            fi
-            
-            # Build the project
-            echo "🔨 Building $project..."
-            cd "$project"
-            
-            if [ -f .env.test ]; then
-              cp .env.test .env
-            fi
-            
-            if ! pnpm turbo build; then
-              echo "❌ BUILD FAILED: $project"
-              failed_projects+=("$project (build failed)")
-              overall_exit_code=1
-              cd - > /dev/null
-              continue
-            fi
-            
-            # Run Playwright tests
-            echo "🧪 Running Playwright tests for $project..."
-            if ! pnpm exec playwright test; then
-              echo "❌ TESTS FAILED: $project"
-              failed_projects+=("$project (tests failed)")
-              overall_exit_code=1
-            else
-              echo "✅ TESTS PASSED: $project"
-              passed_projects+=("$project")
-            fi
-            
-            cd - > /dev/null
-            echo "=== Finished testing $project ==="
-            echo
-          done
-          
-          # Print summary report
-          echo "=========================================="
-          echo "📊 TEST SUMMARY FOR SHARD ${{ matrix.shard }}"
-          echo "=========================================="
-          
-          if [ ${#passed_projects[@]} -gt 0 ]; then
-            echo "✅ PASSED (${#passed_projects[@]}):"
-            printf '  - %s\n' "${passed_projects[@]}"
-            echo
-          fi
-          
-          if [ ${#failed_projects[@]} -gt 0 ]; then
-            echo "❌ FAILED (${#failed_projects[@]}):"
-            printf '  - %s\n' "${failed_projects[@]}"
-            echo
-          fi
-  
-          
-          echo "Total projects in shard: ${#shard_projects[@]}"
-          echo "Passed: ${#passed_projects[@]}"
-          echo "Failed: ${#failed_projects[@]}"
-          echo "=========================================="
-          
-          # Exit with overall status
-          exit $overall_exit_code
+      - name: Run Playwright tests
+        run: pnpm exec playwright test
+        working-directory: ./${{ matrix.project }}
+
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: ${{ hashFiles(format('{0}/package.json', matrix.project)) }}-playwright-report
+          path: ./${{ matrix.project }}/playwright-report/
+          retention-days: 30

.github/workflows/pre-release.yml

@@ -1,11 +1,4 @@
 name: Pre-Publish tagged Pull Requests
-
-concurrency:
-  # For pushes, this lets concurrent runs happen, so each push gets a result.
-  # But for other events (e.g. PRs), we can cancel the previous runs.
-  group: ${{ github.workflow }}-${{ github.event_name == 'push' && github.sha || github.ref }}
-  cancel-in-progress: true
-
 on:
   pull_request:
     types: [opened, synchronize, reopened, labeled]

.github/workflows/unit-test.yml

@@ -1,11 +1,5 @@
 name: Unit Tests
 
-concurrency:
-  # For pushes, this lets concurrent runs happen, so each push gets a result.
-  # But for other events (e.g. PRs), we can cancel the previous runs.
-  group: ${{ github.workflow }}-${{ github.event_name == 'push' && github.sha || github.ref }}
-  cancel-in-progress: true
-
 on:
   pull_request:
     types: [opened, synchronize, reopened]

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.1.3/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
   "vcs": {
     "enabled": true,
     "clientKind": "git",
@@ -7,35 +7,39 @@
   },
   "files": {
     "ignoreUnknown": false,
-    "includes": [
-      "**",
-      "!**/jazz-tools.json",
-      "!**/ios/**",
-      "!**/android/**",
-      "!**/tests/jazz-svelte/src/**",
-      "!**/examples/**/*svelte*/**",
-      "!**/starters/**/*svelte*/**",
-      "!**/examples/server-worker-inbox/src/routeTree.gen.ts",
-      "!**/homepage/homepage/**",
-      "!**/package.json",
-      "!**/*svelte*/**"
+    "ignore": [
+      "jazz-tools.json",
+      "**/ios/**",
+      "**/android/**",
+      "tests/jazz-svelte/src/**",
+      "examples/*svelte*/**",
+      "starters/*svelte*/**",
+      "examples/jazz-paper-scissors/src/routeTree.gen.ts",
+      "homepage/homepage/**",
+      "**/package.json"
     ]
   },
   "formatter": {
     "enabled": true,
     "indentStyle": "space"
   },
-  "assist": { "actions": { "source": { "organizeImports": "off" } } },
+  "organizeImports": {
+    "enabled": true
+  },
   "linter": {
     "enabled": false,
     "rules": {
       "recommended": true,
       "correctness": {
-        "useExhaustiveDependencies": "off",
         "useImportExtensions": {
           "level": "error",
           "options": {
-            "forceJsExtensions": true
+            "suggestedExtensions": {
+              "ts": {
+                "module": "js",
+                "component": "jsx"
+              }
+            }
           }
         }
       }
@@ -43,7 +47,7 @@
   },
   "overrides": [
     {
-      "includes": ["**/packages/**/src/**"],
+      "include": ["packages/**/src/**"],
       "linter": {
         "enabled": true,
         "rules": {
@@ -52,10 +56,7 @@
       }
     },
     {
-      "includes": [
-        "**/packages/cojson/src/storage/**/*/**",
-        "**/cojson-transport-ws/**"
-      ],
+      "include": ["packages/cojson-storage*/**", "cojson-transport-ws/**"],
       "linter": {
         "enabled": true,
         "rules": {
@@ -64,7 +65,7 @@
       }
     },
     {
-      "includes": ["**/tests/**"],
+      "include": ["**/tests/**"],
       "linter": {
         "rules": {
           "correctness": {
@@ -74,7 +75,7 @@
             "noNonNullAssertion": "off"
           },
           "suspicious": {
-            "noExplicitAny": "off"
+            "noExplicitAny": "info"
           }
         }
       }

examples/chat-rn-expo/package.json

@@ -3,6 +3,7 @@
   "main": "index.ts",
   "scripts": {
     "build": "expo prebuild",
+    "check": "tsc --noEmit",
     "start": "expo start",
     "android": "expo run:android",
     "ios": "expo run:ios",
@@ -13,13 +14,13 @@
     "@bacons/text-decoder": "^0.0.0",
     "@bam.tech/react-native-image-resizer": "^3.0.11",
     "@react-native-community/netinfo": "11.4.1",
-    "expo": "54.0.0-canary-20250701-6a945c5",
+    "expo": "~53.0.9",
     "expo-clipboard": "^7.1.4",
     "expo-secure-store": "~14.2.3",
     "expo-sqlite": "~15.2.10",
     "jazz-tools": "workspace:*",
-    "react": "19.1.0",
-    "react-native": "0.80.0",
+    "react": "19.0.0",
+    "react-native": "0.79.2",
     "react-native-get-random-values": "^1.11.0",
     "readable-stream": "^4.7.0"
   },
@@ -29,4 +30,4 @@
     "typescript": "~5.8.3"
   },
   "private": true
-}
+}

examples/chat-rn-expo/src/App.tsx

@@ -2,6 +2,7 @@ import { JazzExpoProvider } from "jazz-tools/expo";
 import React, { StrictMode } from "react";
 import { apiKey } from "./apiKey";
 import ChatScreen from "./chat";
+import { RNQuickCrypto } from "jazz-tools/expo/crypto";
 
 export default function App() {
   return (
@@ -10,6 +11,7 @@ export default function App() {
         sync={{
           peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
         }}
+        CryptoProvider={RNQuickCrypto}
       >
         <ChatScreen />
       </JazzExpoProvider>

examples/chat-rn/android/app/build.gradle

@@ -11,11 +11,11 @@ react {
     //   The root of your project, i.e. where "package.json" lives. Default is '../..'
     // root = file("../../")
     //   The folder where the react-native NPM package is. Default is ../../node_modules/react-native
-    reactNativeDir = file("../../../../node_modules/react-native")
+    // reactNativeDir = file("../../node_modules/react-native")
     //   The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
-    codegenDir = file("../../../../node_modules/@react-native/codegen")
+    // codegenDir = file("../../node_modules/@react-native/codegen")
     //   The cli.js file which is the React Native CLI entrypoint. Default is ../../node_modules/react-native/cli.js
-    cliFile = file("../../../../node_modules/react-native/cli.js")
+    // cliFile = file("../../node_modules/react-native/cli.js")
 
     /* Variants */
     //   The list of variants to that are debuggable. For those we're going to

examples/chat-rn/android/settings.gradle

@@ -1,6 +1,6 @@
-pluginManagement { includeBuild("../../../node_modules/@react-native/gradle-plugin") }
+pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
 plugins { id("com.facebook.react.settings") }
 extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
 rootProject.name = 'ChatRN'
 include ':app'
-includeBuild('../../../node_modules/@react-native/gradle-plugin')
+includeBuild('../node_modules/@react-native/gradle-plugin')

examples/chat-rn/ios/ChatRN.xcodeproj/project.pbxproj

@@ -380,7 +380,7 @@
 					"$(inherited)",
 					" ",
 				);
-				REACT_NATIVE_PATH = "${PODS_ROOT}/../../../../node_modules/react-native";
+				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "$(inherited) DEBUG";
 				USE_HERMES = true;
@@ -452,7 +452,7 @@
 					"$(inherited)",
 					" ",
 				);
-				REACT_NATIVE_PATH = "${PODS_ROOT}/../../../../node_modules/react-native";
+				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				USE_HERMES = true;
 				VALIDATE_PRODUCT = YES;

examples/chat-rn/ios/Podfile.lock

@@ -2370,87 +2370,87 @@ PODS:
   - Yoga (0.0.0)
 
 DEPENDENCIES:
-  - boost (from `../../../node_modules/react-native/third-party-podspecs/boost.podspec`)
-  - DoubleConversion (from `../../../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
-  - fast_float (from `../../../node_modules/react-native/third-party-podspecs/fast_float.podspec`)
-  - FBLazyVector (from `../../../node_modules/react-native/Libraries/FBLazyVector`)
-  - fmt (from `../../../node_modules/react-native/third-party-podspecs/fmt.podspec`)
-  - glog (from `../../../node_modules/react-native/third-party-podspecs/glog.podspec`)
-  - hermes-engine (from `../../../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec`)
+  - boost (from `../node_modules/react-native/third-party-podspecs/boost.podspec`)
+  - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
+  - fast_float (from `../node_modules/react-native/third-party-podspecs/fast_float.podspec`)
+  - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`)
+  - fmt (from `../node_modules/react-native/third-party-podspecs/fmt.podspec`)
+  - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
+  - hermes-engine (from `../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec`)
   - "op-sqlite (from `../../../node_modules/@op-engineering/op-sqlite`)"
-  - RCT-Folly (from `../../../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
-  - RCTDeprecation (from `../../../node_modules/react-native/ReactApple/Libraries/RCTFoundation/RCTDeprecation`)
-  - RCTRequired (from `../../../node_modules/react-native/Libraries/Required`)
-  - RCTTypeSafety (from `../../../node_modules/react-native/Libraries/TypeSafety`)
-  - React (from `../../../node_modules/react-native/`)
-  - React-callinvoker (from `../../../node_modules/react-native/ReactCommon/callinvoker`)
-  - React-Core (from `../../../node_modules/react-native/`)
-  - React-Core/RCTWebSocket (from `../../../node_modules/react-native/`)
-  - React-CoreModules (from `../../../node_modules/react-native/React/CoreModules`)
-  - React-cxxreact (from `../../../node_modules/react-native/ReactCommon/cxxreact`)
-  - React-debug (from `../../../node_modules/react-native/ReactCommon/react/debug`)
-  - React-defaultsnativemodule (from `../../../node_modules/react-native/ReactCommon/react/nativemodule/defaults`)
-  - React-domnativemodule (from `../../../node_modules/react-native/ReactCommon/react/nativemodule/dom`)
-  - React-Fabric (from `../../../node_modules/react-native/ReactCommon`)
-  - React-FabricComponents (from `../../../node_modules/react-native/ReactCommon`)
-  - React-FabricImage (from `../../../node_modules/react-native/ReactCommon`)
-  - React-featureflags (from `../../../node_modules/react-native/ReactCommon/react/featureflags`)
-  - React-featureflagsnativemodule (from `../../../node_modules/react-native/ReactCommon/react/nativemodule/featureflags`)
-  - React-graphics (from `../../../node_modules/react-native/ReactCommon/react/renderer/graphics`)
-  - React-hermes (from `../../../node_modules/react-native/ReactCommon/hermes`)
-  - React-idlecallbacksnativemodule (from `../../../node_modules/react-native/ReactCommon/react/nativemodule/idlecallbacks`)
-  - React-ImageManager (from `../../../node_modules/react-native/ReactCommon/react/renderer/imagemanager/platform/ios`)
-  - React-jserrorhandler (from `../../../node_modules/react-native/ReactCommon/jserrorhandler`)
-  - React-jsi (from `../../../node_modules/react-native/ReactCommon/jsi`)
-  - React-jsiexecutor (from `../../../node_modules/react-native/ReactCommon/jsiexecutor`)
-  - React-jsinspector (from `../../../node_modules/react-native/ReactCommon/jsinspector-modern`)
-  - React-jsinspectorcdp (from `../../../node_modules/react-native/ReactCommon/jsinspector-modern/cdp`)
-  - React-jsinspectornetwork (from `../../../node_modules/react-native/ReactCommon/jsinspector-modern/network`)
-  - React-jsinspectortracing (from `../../../node_modules/react-native/ReactCommon/jsinspector-modern/tracing`)
-  - React-jsitooling (from `../../../node_modules/react-native/ReactCommon/jsitooling`)
-  - React-jsitracing (from `../../../node_modules/react-native/ReactCommon/hermes/executor/`)
-  - React-logger (from `../../../node_modules/react-native/ReactCommon/logger`)
-  - React-Mapbuffer (from `../../../node_modules/react-native/ReactCommon`)
-  - React-microtasksnativemodule (from `../../../node_modules/react-native/ReactCommon/react/nativemodule/microtasks`)
+  - RCT-Folly (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
+  - RCTDeprecation (from `../node_modules/react-native/ReactApple/Libraries/RCTFoundation/RCTDeprecation`)
+  - RCTRequired (from `../node_modules/react-native/Libraries/Required`)
+  - RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`)
+  - React (from `../node_modules/react-native/`)
+  - React-callinvoker (from `../node_modules/react-native/ReactCommon/callinvoker`)
+  - React-Core (from `../node_modules/react-native/`)
+  - React-Core/RCTWebSocket (from `../node_modules/react-native/`)
+  - React-CoreModules (from `../node_modules/react-native/React/CoreModules`)
+  - React-cxxreact (from `../node_modules/react-native/ReactCommon/cxxreact`)
+  - React-debug (from `../node_modules/react-native/ReactCommon/react/debug`)
+  - React-defaultsnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/defaults`)
+  - React-domnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/dom`)
+  - React-Fabric (from `../node_modules/react-native/ReactCommon`)
+  - React-FabricComponents (from `../node_modules/react-native/ReactCommon`)
+  - React-FabricImage (from `../node_modules/react-native/ReactCommon`)
+  - React-featureflags (from `../node_modules/react-native/ReactCommon/react/featureflags`)
+  - React-featureflagsnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/featureflags`)
+  - React-graphics (from `../node_modules/react-native/ReactCommon/react/renderer/graphics`)
+  - React-hermes (from `../node_modules/react-native/ReactCommon/hermes`)
+  - React-idlecallbacksnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/idlecallbacks`)
+  - React-ImageManager (from `../node_modules/react-native/ReactCommon/react/renderer/imagemanager/platform/ios`)
+  - React-jserrorhandler (from `../node_modules/react-native/ReactCommon/jserrorhandler`)
+  - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`)
+  - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
+  - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector-modern`)
+  - React-jsinspectorcdp (from `../node_modules/react-native/ReactCommon/jsinspector-modern/cdp`)
+  - React-jsinspectornetwork (from `../node_modules/react-native/ReactCommon/jsinspector-modern/network`)
+  - React-jsinspectortracing (from `../node_modules/react-native/ReactCommon/jsinspector-modern/tracing`)
+  - React-jsitooling (from `../node_modules/react-native/ReactCommon/jsitooling`)
+  - React-jsitracing (from `../node_modules/react-native/ReactCommon/hermes/executor/`)
+  - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
+  - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
+  - React-microtasksnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/microtasks`)
   - react-native-get-random-values (from `../../../node_modules/react-native-get-random-values`)
   - react-native-mmkv (from `../../../node_modules/react-native-mmkv`)
   - "react-native-netinfo (from `../../../node_modules/@react-native-community/netinfo`)"
-  - react-native-safe-area-context (from `../../../node_modules/react-native-safe-area-context`)
-  - React-NativeModulesApple (from `../../../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
-  - React-oscompat (from `../../../node_modules/react-native/ReactCommon/oscompat`)
-  - React-perflogger (from `../../../node_modules/react-native/ReactCommon/reactperflogger`)
-  - React-performancetimeline (from `../../../node_modules/react-native/ReactCommon/react/performance/timeline`)
-  - React-RCTActionSheet (from `../../../node_modules/react-native/Libraries/ActionSheetIOS`)
-  - React-RCTAnimation (from `../../../node_modules/react-native/Libraries/NativeAnimation`)
-  - React-RCTAppDelegate (from `../../../node_modules/react-native/Libraries/AppDelegate`)
-  - React-RCTBlob (from `../../../node_modules/react-native/Libraries/Blob`)
-  - React-RCTFabric (from `../../../node_modules/react-native/React`)
-  - React-RCTFBReactNativeSpec (from `../../../node_modules/react-native/React`)
-  - React-RCTImage (from `../../../node_modules/react-native/Libraries/Image`)
-  - React-RCTLinking (from `../../../node_modules/react-native/Libraries/LinkingIOS`)
-  - React-RCTNetwork (from `../../../node_modules/react-native/Libraries/Network`)
-  - React-RCTRuntime (from `../../../node_modules/react-native/React/Runtime`)
-  - React-RCTSettings (from `../../../node_modules/react-native/Libraries/Settings`)
-  - React-RCTText (from `../../../node_modules/react-native/Libraries/Text`)
-  - React-RCTVibration (from `../../../node_modules/react-native/Libraries/Vibration`)
-  - React-rendererconsistency (from `../../../node_modules/react-native/ReactCommon/react/renderer/consistency`)
-  - React-renderercss (from `../../../node_modules/react-native/ReactCommon/react/renderer/css`)
-  - React-rendererdebug (from `../../../node_modules/react-native/ReactCommon/react/renderer/debug`)
-  - React-rncore (from `../../../node_modules/react-native/ReactCommon`)
-  - React-RuntimeApple (from `../../../node_modules/react-native/ReactCommon/react/runtime/platform/ios`)
-  - React-RuntimeCore (from `../../../node_modules/react-native/ReactCommon/react/runtime`)
-  - React-runtimeexecutor (from `../../../node_modules/react-native/ReactCommon/runtimeexecutor`)
-  - React-RuntimeHermes (from `../../../node_modules/react-native/ReactCommon/react/runtime`)
-  - React-runtimescheduler (from `../../../node_modules/react-native/ReactCommon/react/renderer/runtimescheduler`)
-  - React-timing (from `../../../node_modules/react-native/ReactCommon/react/timing`)
-  - React-utils (from `../../../node_modules/react-native/ReactCommon/react/utils`)
+  - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
+  - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
+  - React-oscompat (from `../node_modules/react-native/ReactCommon/oscompat`)
+  - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
+  - React-performancetimeline (from `../node_modules/react-native/ReactCommon/react/performance/timeline`)
+  - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
+  - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
+  - React-RCTAppDelegate (from `../node_modules/react-native/Libraries/AppDelegate`)
+  - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`)
+  - React-RCTFabric (from `../node_modules/react-native/React`)
+  - React-RCTFBReactNativeSpec (from `../node_modules/react-native/React`)
+  - React-RCTImage (from `../node_modules/react-native/Libraries/Image`)
+  - React-RCTLinking (from `../node_modules/react-native/Libraries/LinkingIOS`)
+  - React-RCTNetwork (from `../node_modules/react-native/Libraries/Network`)
+  - React-RCTRuntime (from `../node_modules/react-native/React/Runtime`)
+  - React-RCTSettings (from `../node_modules/react-native/Libraries/Settings`)
+  - React-RCTText (from `../node_modules/react-native/Libraries/Text`)
+  - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
+  - React-rendererconsistency (from `../node_modules/react-native/ReactCommon/react/renderer/consistency`)
+  - React-renderercss (from `../node_modules/react-native/ReactCommon/react/renderer/css`)
+  - React-rendererdebug (from `../node_modules/react-native/ReactCommon/react/renderer/debug`)
+  - React-rncore (from `../node_modules/react-native/ReactCommon`)
+  - React-RuntimeApple (from `../node_modules/react-native/ReactCommon/react/runtime/platform/ios`)
+  - React-RuntimeCore (from `../node_modules/react-native/ReactCommon/react/runtime`)
+  - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
+  - React-RuntimeHermes (from `../node_modules/react-native/ReactCommon/react/runtime`)
+  - React-runtimescheduler (from `../node_modules/react-native/ReactCommon/react/renderer/runtimescheduler`)
+  - React-timing (from `../node_modules/react-native/ReactCommon/react/timing`)
+  - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`)
   - ReactAppDependencyProvider (from `build/generated/ios`)
   - ReactCodegen (from `build/generated/ios`)
-  - ReactCommon/turbomodule/core (from `../../../node_modules/react-native/ReactCommon`)
+  - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - "RNCClipboard (from `../../../node_modules/@react-native-clipboard/clipboard`)"
-  - RNScreens (from `../../../node_modules/react-native-screens`)
+  - RNScreens (from `../node_modules/react-native-screens`)
   - SocketRocket (~> 0.7.1)
-  - Yoga (from `../../../node_modules/react-native/ReactCommon/yoga`)
+  - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
   trunk:
@@ -2458,88 +2458,88 @@ SPEC REPOS:
 
 EXTERNAL SOURCES:
   boost:
-    :podspec: "../../../node_modules/react-native/third-party-podspecs/boost.podspec"
+    :podspec: "../node_modules/react-native/third-party-podspecs/boost.podspec"
   DoubleConversion:
-    :podspec: "../../../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec"
+    :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec"
   fast_float:
-    :podspec: "../../../node_modules/react-native/third-party-podspecs/fast_float.podspec"
+    :podspec: "../node_modules/react-native/third-party-podspecs/fast_float.podspec"
   FBLazyVector:
-    :path: "../../../node_modules/react-native/Libraries/FBLazyVector"
+    :path: "../node_modules/react-native/Libraries/FBLazyVector"
   fmt:
-    :podspec: "../../../node_modules/react-native/third-party-podspecs/fmt.podspec"
+    :podspec: "../node_modules/react-native/third-party-podspecs/fmt.podspec"
   glog:
-    :podspec: "../../../node_modules/react-native/third-party-podspecs/glog.podspec"
+    :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec"
   hermes-engine:
-    :podspec: "../../../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec"
+    :podspec: "../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec"
     :tag: hermes-2025-05-06-RNv0.80.0-4eb6132a5bf0450bf4c6c91987675381d7ac8bca
   op-sqlite:
     :path: "../../../node_modules/@op-engineering/op-sqlite"
   RCT-Folly:
-    :podspec: "../../../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec"
+    :podspec: "../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec"
   RCTDeprecation:
-    :path: "../../../node_modules/react-native/ReactApple/Libraries/RCTFoundation/RCTDeprecation"
+    :path: "../node_modules/react-native/ReactApple/Libraries/RCTFoundation/RCTDeprecation"
   RCTRequired:
-    :path: "../../../node_modules/react-native/Libraries/Required"
+    :path: "../node_modules/react-native/Libraries/Required"
   RCTTypeSafety:
-    :path: "../../../node_modules/react-native/Libraries/TypeSafety"
+    :path: "../node_modules/react-native/Libraries/TypeSafety"
   React:
-    :path: "../../../node_modules/react-native/"
+    :path: "../node_modules/react-native/"
   React-callinvoker:
-    :path: "../../../node_modules/react-native/ReactCommon/callinvoker"
+    :path: "../node_modules/react-native/ReactCommon/callinvoker"
   React-Core:
-    :path: "../../../node_modules/react-native/"
+    :path: "../node_modules/react-native/"
   React-CoreModules:
-    :path: "../../../node_modules/react-native/React/CoreModules"
+    :path: "../node_modules/react-native/React/CoreModules"
   React-cxxreact:
-    :path: "../../../node_modules/react-native/ReactCommon/cxxreact"
+    :path: "../node_modules/react-native/ReactCommon/cxxreact"
   React-debug:
-    :path: "../../../node_modules/react-native/ReactCommon/react/debug"
+    :path: "../node_modules/react-native/ReactCommon/react/debug"
   React-defaultsnativemodule:
-    :path: "../../../node_modules/react-native/ReactCommon/react/nativemodule/defaults"
+    :path: "../node_modules/react-native/ReactCommon/react/nativemodule/defaults"
   React-domnativemodule:
-    :path: "../../../node_modules/react-native/ReactCommon/react/nativemodule/dom"
+    :path: "../node_modules/react-native/ReactCommon/react/nativemodule/dom"
   React-Fabric:
-    :path: "../../../node_modules/react-native/ReactCommon"
+    :path: "../node_modules/react-native/ReactCommon"
   React-FabricComponents:
-    :path: "../../../node_modules/react-native/ReactCommon"
+    :path: "../node_modules/react-native/ReactCommon"
   React-FabricImage:
-    :path: "../../../node_modules/react-native/ReactCommon"
+    :path: "../node_modules/react-native/ReactCommon"
   React-featureflags:
-    :path: "../../../node_modules/react-native/ReactCommon/react/featureflags"
+    :path: "../node_modules/react-native/ReactCommon/react/featureflags"
   React-featureflagsnativemodule:
-    :path: "../../../node_modules/react-native/ReactCommon/react/nativemodule/featureflags"
+    :path: "../node_modules/react-native/ReactCommon/react/nativemodule/featureflags"
   React-graphics:
-    :path: "../../../node_modules/react-native/ReactCommon/react/renderer/graphics"
+    :path: "../node_modules/react-native/ReactCommon/react/renderer/graphics"
   React-hermes:
-    :path: "../../../node_modules/react-native/ReactCommon/hermes"
+    :path: "../node_modules/react-native/ReactCommon/hermes"
   React-idlecallbacksnativemodule:
-    :path: "../../../node_modules/react-native/ReactCommon/react/nativemodule/idlecallbacks"
+    :path: "../node_modules/react-native/ReactCommon/react/nativemodule/idlecallbacks"
   React-ImageManager:
-    :path: "../../../node_modules/react-native/ReactCommon/react/renderer/imagemanager/platform/ios"
+    :path: "../node_modules/react-native/ReactCommon/react/renderer/imagemanager/platform/ios"
   React-jserrorhandler:
-    :path: "../../../node_modules/react-native/ReactCommon/jserrorhandler"
+    :path: "../node_modules/react-native/ReactCommon/jserrorhandler"
   React-jsi:
-    :path: "../../../node_modules/react-native/ReactCommon/jsi"
+    :path: "../node_modules/react-native/ReactCommon/jsi"
   React-jsiexecutor:
-    :path: "../../../node_modules/react-native/ReactCommon/jsiexecutor"
+    :path: "../node_modules/react-native/ReactCommon/jsiexecutor"
   React-jsinspector:
-    :path: "../../../node_modules/react-native/ReactCommon/jsinspector-modern"
+    :path: "../node_modules/react-native/ReactCommon/jsinspector-modern"
   React-jsinspectorcdp:
-    :path: "../../../node_modules/react-native/ReactCommon/jsinspector-modern/cdp"
+    :path: "../node_modules/react-native/ReactCommon/jsinspector-modern/cdp"
   React-jsinspectornetwork:
-    :path: "../../../node_modules/react-native/ReactCommon/jsinspector-modern/network"
+    :path: "../node_modules/react-native/ReactCommon/jsinspector-modern/network"
   React-jsinspectortracing:
-    :path: "../../../node_modules/react-native/ReactCommon/jsinspector-modern/tracing"
+    :path: "../node_modules/react-native/ReactCommon/jsinspector-modern/tracing"
   React-jsitooling:
-    :path: "../../../node_modules/react-native/ReactCommon/jsitooling"
+    :path: "../node_modules/react-native/ReactCommon/jsitooling"
   React-jsitracing:
-    :path: "../../../node_modules/react-native/ReactCommon/hermes/executor/"
+    :path: "../node_modules/react-native/ReactCommon/hermes/executor/"
   React-logger:
-    :path: "../../../node_modules/react-native/ReactCommon/logger"
+    :path: "../node_modules/react-native/ReactCommon/logger"
   React-Mapbuffer:
-    :path: "../../../node_modules/react-native/ReactCommon"
+    :path: "../node_modules/react-native/ReactCommon"
   React-microtasksnativemodule:
-    :path: "../../../node_modules/react-native/ReactCommon/react/nativemodule/microtasks"
+    :path: "../node_modules/react-native/ReactCommon/react/nativemodule/microtasks"
   react-native-get-random-values:
     :path: "../../../node_modules/react-native-get-random-values"
   react-native-mmkv:
@@ -2547,75 +2547,75 @@ EXTERNAL SOURCES:
   react-native-netinfo:
     :path: "../../../node_modules/@react-native-community/netinfo"
   react-native-safe-area-context:
-    :path: "../../../node_modules/react-native-safe-area-context"
+    :path: "../node_modules/react-native-safe-area-context"
   React-NativeModulesApple:
-    :path: "../../../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios"
+    :path: "../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios"
   React-oscompat:
-    :path: "../../../node_modules/react-native/ReactCommon/oscompat"
+    :path: "../node_modules/react-native/ReactCommon/oscompat"
   React-perflogger:
-    :path: "../../../node_modules/react-native/ReactCommon/reactperflogger"
+    :path: "../node_modules/react-native/ReactCommon/reactperflogger"
   React-performancetimeline:
-    :path: "../../../node_modules/react-native/ReactCommon/react/performance/timeline"
+    :path: "../node_modules/react-native/ReactCommon/react/performance/timeline"
   React-RCTActionSheet:
-    :path: "../../../node_modules/react-native/Libraries/ActionSheetIOS"
+    :path: "../node_modules/react-native/Libraries/ActionSheetIOS"
   React-RCTAnimation:
-    :path: "../../../node_modules/react-native/Libraries/NativeAnimation"
+    :path: "../node_modules/react-native/Libraries/NativeAnimation"
   React-RCTAppDelegate:
-    :path: "../../../node_modules/react-native/Libraries/AppDelegate"
+    :path: "../node_modules/react-native/Libraries/AppDelegate"
   React-RCTBlob:
-    :path: "../../../node_modules/react-native/Libraries/Blob"
+    :path: "../node_modules/react-native/Libraries/Blob"
   React-RCTFabric:
-    :path: "../../../node_modules/react-native/React"
+    :path: "../node_modules/react-native/React"
   React-RCTFBReactNativeSpec:
-    :path: "../../../node_modules/react-native/React"
+    :path: "../node_modules/react-native/React"
   React-RCTImage:
-    :path: "../../../node_modules/react-native/Libraries/Image"
+    :path: "../node_modules/react-native/Libraries/Image"
   React-RCTLinking:
-    :path: "../../../node_modules/react-native/Libraries/LinkingIOS"
+    :path: "../node_modules/react-native/Libraries/LinkingIOS"
   React-RCTNetwork:
-    :path: "../../../node_modules/react-native/Libraries/Network"
+    :path: "../node_modules/react-native/Libraries/Network"
   React-RCTRuntime:
-    :path: "../../../node_modules/react-native/React/Runtime"
+    :path: "../node_modules/react-native/React/Runtime"
   React-RCTSettings:
-    :path: "../../../node_modules/react-native/Libraries/Settings"
+    :path: "../node_modules/react-native/Libraries/Settings"
   React-RCTText:
-    :path: "../../../node_modules/react-native/Libraries/Text"
+    :path: "../node_modules/react-native/Libraries/Text"
   React-RCTVibration:
-    :path: "../../../node_modules/react-native/Libraries/Vibration"
+    :path: "../node_modules/react-native/Libraries/Vibration"
   React-rendererconsistency:
-    :path: "../../../node_modules/react-native/ReactCommon/react/renderer/consistency"
+    :path: "../node_modules/react-native/ReactCommon/react/renderer/consistency"
   React-renderercss:
-    :path: "../../../node_modules/react-native/ReactCommon/react/renderer/css"
+    :path: "../node_modules/react-native/ReactCommon/react/renderer/css"
   React-rendererdebug:
-    :path: "../../../node_modules/react-native/ReactCommon/react/renderer/debug"
+    :path: "../node_modules/react-native/ReactCommon/react/renderer/debug"
   React-rncore:
-    :path: "../../../node_modules/react-native/ReactCommon"
+    :path: "../node_modules/react-native/ReactCommon"
   React-RuntimeApple:
-    :path: "../../../node_modules/react-native/ReactCommon/react/runtime/platform/ios"
+    :path: "../node_modules/react-native/ReactCommon/react/runtime/platform/ios"
   React-RuntimeCore:
-    :path: "../../../node_modules/react-native/ReactCommon/react/runtime"
+    :path: "../node_modules/react-native/ReactCommon/react/runtime"
   React-runtimeexecutor:
-    :path: "../../../node_modules/react-native/ReactCommon/runtimeexecutor"
+    :path: "../node_modules/react-native/ReactCommon/runtimeexecutor"
   React-RuntimeHermes:
-    :path: "../../../node_modules/react-native/ReactCommon/react/runtime"
+    :path: "../node_modules/react-native/ReactCommon/react/runtime"
   React-runtimescheduler:
-    :path: "../../../node_modules/react-native/ReactCommon/react/renderer/runtimescheduler"
+    :path: "../node_modules/react-native/ReactCommon/react/renderer/runtimescheduler"
   React-timing:
-    :path: "../../../node_modules/react-native/ReactCommon/react/timing"
+    :path: "../node_modules/react-native/ReactCommon/react/timing"
   React-utils:
-    :path: "../../../node_modules/react-native/ReactCommon/react/utils"
+    :path: "../node_modules/react-native/ReactCommon/react/utils"
   ReactAppDependencyProvider:
     :path: build/generated/ios
   ReactCodegen:
     :path: build/generated/ios
   ReactCommon:
-    :path: "../../../node_modules/react-native/ReactCommon"
+    :path: "../node_modules/react-native/ReactCommon"
   RNCClipboard:
     :path: "../../../node_modules/@react-native-clipboard/clipboard"
   RNScreens:
-    :path: "../../../node_modules/react-native-screens"
+    :path: "../node_modules/react-native-screens"
   Yoga:
-    :path: "../../../node_modules/react-native/ReactCommon/yoga"
+    :path: "../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
   boost: 7e761d76ca2ce687f7cc98e698152abd03a18f90
@@ -2692,7 +2692,7 @@ SPEC CHECKSUMS:
   React-timing: a275a1c2e6112dba17f8f7dd496d439213bbea0d
   React-utils: 449a6e1fd53886510e284e80bdbb1b1c6db29452
   ReactAppDependencyProvider: 3267432b637c9b38e86961b287f784ee1b08dde0
-  ReactCodegen: d82f538f70f00484d418803f74b5a0ea09cc8689
+  ReactCodegen: 5d41e1df061200130dd326e55cdfdf94b0289c6e
   ReactCommon: b028d09a66e60ebd83ca59d8cc9a1216360db147
   RNCClipboard: 54ff19965d7c816febbafe5f520c2c3e7b677a49
   RNScreens: ee2abe7e0c548eed14e92742e81ed991165c56aa

examples/chat-rn/package.json

@@ -13,7 +13,7 @@
     "@azure/core-asynciterator-polyfill": "^1.0.2",
     "@bacons/text-decoder": "0.0.0",
     "@op-engineering/op-sqlite": "14.1.0",
-    "@react-native-clipboard/clipboard": "1.16.3",
+    "@react-native-clipboard/clipboard": "1.16.2",
     "@react-native-community/netinfo": "11.4.1",
     "@react-navigation/native": "7.1.14",
     "@react-navigation/native-stack": "7.3.19",
@@ -40,7 +40,7 @@
     "@react-native/typescript-config": "0.80.0",
     "@rnx-kit/metro-config": "^2.0.1",
     "@rnx-kit/metro-resolver-symlinks": "^0.2.5",
-    "@types/react": "^19.1.0",
+    "@types/react": "19.1.0",
     "eslint": "^8.19.0",
     "pod-install": "^0.3.5",
     "prettier": "2.8.8",

examples/chat-rn/src/chat.tsx

@@ -76,9 +76,7 @@ export function ChatScreen({ navigation }: { navigation: any }) {
 
   const renderMessageItem = ({
     item,
-  }: {
-    item: Loaded<typeof Message, { text: true }>;
-  }) => {
+  }: { item: Loaded<typeof Message, { text: true }> }) => {
     const isMe = item._edits?.text?.by?.isMe;
     return (
       <View

examples/chat-rn/src/invite.tsx

@@ -3,7 +3,11 @@ import React from "react";
 import { Text } from "react-native";
 import { Chat } from "./schema";
 
-export function HandleInviteScreen({ navigation }: { navigation: any }) {
+export function HandleInviteScreen({
+  navigation,
+}: {
+  navigation: any;
+}) {
   useAcceptInviteNative({
     invitedObjectSchema: Chat,
     onAccept: async (chatId) => {

examples/chat-svelte/CHANGELOG.md

@@ -1,162 +1,5 @@
 # passkey-svelte
 
-## 0.0.113
-
-### Patch Changes
-
-- Updated dependencies [fcaf4b9]
-  - jazz-tools@0.17.0
-
-## 0.0.112
-
-### Patch Changes
-
-- Updated dependencies [67e0968]
-- Updated dependencies [2c8120d]
-  - jazz-tools@0.16.6
-
-## 0.0.111
-
-### Patch Changes
-
-- Updated dependencies [3cd1586]
-- Updated dependencies [33ebbf0]
-  - jazz-tools@0.16.5
-
-## 0.0.110
-
-### Patch Changes
-
-- Updated dependencies [16764f6]
-  - jazz-tools@0.16.4
-
-## 0.0.109
-
-### Patch Changes
-
-- Updated dependencies [43d3511]
-  - jazz-tools@0.16.3
-
-## 0.0.108
-
-### Patch Changes
-
-- jazz-tools@0.16.2
-
-## 0.0.107
-
-### Patch Changes
-
-- Updated dependencies [c62abef]
-  - jazz-tools@0.16.1
-
-## 0.0.106
-
-### Patch Changes
-
-- 2bbb07b: Introduce a cleaner separation between Zod and CoValue schemas:
-  - Zod schemas and CoValue schemas are fully separated. Zod schemas can only be composed with other Zod schemas. CoValue schemas can be composed with either Zod or other CoValue schemas.
-  - `z.optional()` and `z.discriminatedUnion()` no longer work with CoValue schemas. Use `co.optional()` and `co.discriminatedUnion()` instead.
-  - Internal schema access is now simpler. You no longer need to use Zod’s `.def` to access internals. Use properties like `CoMapSchema.shape`, `CoListSchema.element`, and `CoOptionalSchema.innerType` directly.
-  - CoValue schema types are now namespaced under `co.`. Non-namespaced exports have been removed
-  - CoMap schemas no longer incorrectly inherit from Zod. Previously, methods like `.extend()` and `.partial()` appeared available but could cause unexpected behavior. These methods are now disabled. In their place, `.optional()` has been added, and more Zod-like methods will be introduced in future releases.
-  - Upgraded Zod from `3.25.28` to `3.25.76`.
-  - Removed deprecated `withHelpers` method from CoValue schemas
-  - Removed deprecated `createCoValueObservable` function
-- Updated dependencies [c09dcdf]
-- Updated dependencies [2bbb07b]
-  - jazz-tools@0.16.0
-
-## 0.0.105
-
-### Patch Changes
-
-- Updated dependencies [9633d01]
-- Updated dependencies [4beafb7]
-  - jazz-tools@0.15.16
-
-## 0.0.104
-
-### Patch Changes
-
-- Updated dependencies [3fe53a3]
-  - jazz-tools@0.15.15
-
-## 0.0.103
-
-### Patch Changes
-
-- Updated dependencies [a584590]
-- Updated dependencies [9acccb5]
-  - jazz-tools@0.15.14
-
-## 0.0.102
-
-### Patch Changes
-
-- Updated dependencies [6c76ff8]
-  - jazz-tools@0.15.13
-
-## 0.0.101
-
-### Patch Changes
-
-- Updated dependencies [d1c1b0c]
-- Updated dependencies [cf4ad72]
-  - jazz-tools@0.15.12
-
-## 0.0.100
-
-### Patch Changes
-
-- Updated dependencies [bdc9aee]
-  - jazz-tools@0.15.11
-
-## 0.0.99
-
-### Patch Changes
-
-- Updated dependencies [9815ec6]
-- Updated dependencies [b4fdab4]
-  - jazz-tools@0.15.10
-
-## 0.0.98
-
-### Patch Changes
-
-- Updated dependencies [27b4837]
-  - jazz-tools@0.15.9
-
-## 0.0.97
-
-### Patch Changes
-
-- Updated dependencies [3844666]
-  - jazz-tools@0.15.8
-
-## 0.0.96
-
-### Patch Changes
-
-- Updated dependencies [c09b636]
-  - jazz-tools@0.15.7
-
-## 0.0.95
-
-### Patch Changes
-
-- Updated dependencies [a5ceaff]
-  - jazz-tools@0.15.6
-
-## 0.0.94
-
-### Patch Changes
-
-- Updated dependencies [23bfea5]
-- Updated dependencies [e4ba23c]
-- Updated dependencies [4b89838]
-  - jazz-tools@0.15.5
-
 ## 0.0.93
 
 ### Patch Changes

examples/chat-svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-svelte",
-  "version": "0.0.113",
+  "version": "0.0.93",
   "type": "module",
   "private": true,
   "scripts": {

examples/chat-svelte/src/lib/components/BubbleImage.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
   import { ImageDefinition, type Loaded } from 'jazz-tools';
-  import { Image } from 'jazz-tools/svelte';
+  import { useProgressiveImg } from '$lib/utils/useProgressiveImage.svelte';
   let { image }: { image: Loaded<typeof ImageDefinition> } = $props();
+  const { src } = $derived(
+    useProgressiveImg({
+      image
+    })
+  );
 </script>
 
-<Image
-  imageId={image.id}
-  alt=""
-  class="h-auto max-h-[20rem] max-w-full rounded-t-xl mb-1"
-/>
+<img class="h-auto max-h-[20rem] max-w-full rounded-t-xl mb-1" {src} alt="" />

examples/chat-svelte/src/lib/schema.ts

@@ -1,8 +1,8 @@
-import { co } from 'jazz-tools';
+import { co, z } from 'jazz-tools';
 
 export const Message = co.map({
   text: co.plainText(),
-  image: co.optional(co.image())
+  image: z.optional(co.image())
 });
 
 export const Chat = co.list(Message);

examples/chat-svelte/src/lib/utils/useProgressiveImage.svelte.ts

@@ -0,0 +1,53 @@
+import { ImageDefinition, type Loaded } from 'jazz-tools';
+import { onDestroy } from 'svelte';
+
+export function useProgressiveImg({
+  image,
+  maxWidth,
+  targetWidth
+}: {
+  image: Loaded<typeof ImageDefinition> | null | undefined;
+  maxWidth?: number;
+  targetWidth?: number;
+}) {
+  let current = $state<{
+    src?: string;
+    res?: `${number}x${number}` | 'placeholder';
+  }>();
+  const originalSize = $state(image?.originalSize);
+
+  const unsubscribe = image?.subscribe({}, (update: Loaded<typeof ImageDefinition>) => {
+    const highestRes = ImageDefinition.highestResAvailable(update, { maxWidth, targetWidth });
+    if (highestRes) {
+      if (highestRes.res !== current?.res) {
+        const blob = highestRes.stream.toBlob();
+        if (blob) {
+          const blobURI = URL.createObjectURL(blob);
+          current = { src: blobURI, res: highestRes.res };
+
+          setTimeout(() => URL.revokeObjectURL(blobURI), 200);
+        }
+      }
+    } else {
+      current = {
+        src: update?.placeholderDataURL,
+        res: 'placeholder'
+      };
+    }
+  });
+
+  onDestroy(() => () => {
+    unsubscribe?.();
+  });
+
+  return {
+    get src() {
+      return current?.src;
+    },
+    get res() {
+      return current?.res;
+    },
+
+    originalSize
+  };
+}

examples/chat-svelte/src/routes/chat/[id]/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { createImage } from 'jazz-tools/media';
+  import { createImage } from 'jazz-tools/browser-media-images';
   import { AccountCoState, CoState } from 'jazz-tools/svelte';
   import { Account, CoPlainText, type ID } from 'jazz-tools';
 

examples/chat/package.json

@@ -15,16 +15,16 @@
     "clsx": "^2.0.0",
     "hash-slash": "workspace:*",
     "jazz-tools": "workspace:*",
-    "lucide-react": "^0.536.0",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "zod": "3.25.76"
+    "lucide-react": "^0.274.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "zod": "3.25.28"
   },
   "devDependencies": {
     "@playwright/test": "^1.50.1",
     "@tailwindcss/postcss": "^4.1.10",
-    "@types/react": "19.1.0",
-    "@types/react-dom": "19.1.0",
+    "@types/react": "19.0.0",
+    "@types/react-dom": "19.0.0",
     "@vitejs/plugin-react-swc": "^3.10.1",
     "is-ci": "^3.0.1",
     "postcss": "^8.4.40",
@@ -32,4 +32,4 @@
     "typescript": "5.6.2",
     "vite": "^6.3.5"
   }
-}
+}

examples/chat/src/chatScreen.tsx

@@ -1,7 +1,6 @@
-import { Account } from "jazz-tools";
-import { createImage } from "jazz-tools/media";
-import { useAccount, useCoState } from "jazz-tools/react";
-import { useEffect, useState } from "react";
+import { Account, co } from "jazz-tools";
+import { createImage, useAccount, useCoState } from "jazz-tools/react";
+import { useState } from "react";
 import { Chat, Message } from "./schema.ts";
 import {
   BubbleBody,
@@ -16,17 +15,14 @@ import {
   TextInput,
 } from "./ui.tsx";
 
-const INITIAL_MESSAGES_TO_SHOW = 30;
-
 export function ChatScreen(props: { chatID: string }) {
-  const chat = useCoState(Chat, props.chatID);
+  const chat = useCoState(Chat, props.chatID, {
+    resolve: { $each: { text: true } },
+  });
   const { me } = useAccount();
-  const [showNLastMessages, setShowNLastMessages] = useState(
-    INITIAL_MESSAGES_TO_SHOW,
-  );
-  const isLoading = useMessagesPreload(props.chatID);
+  const [showNLastMessages, setShowNLastMessages] = useState(30);
 
-  if (!chat || isLoading)
+  if (!chat)
     return (
       <div className="flex-1 flex justify-center items-center">Loading...</div>
     );
@@ -41,15 +37,11 @@ export function ChatScreen(props: { chatID: string }) {
       return;
     }
 
-    createImage(file, {
-      owner: chat._owner,
-      progressive: true,
-      placeholder: "blur",
-    }).then((image) => {
+    createImage(file, { owner: chat._owner }).then((image) => {
       chat.push(
         Message.create(
           {
-            text: file.name,
+            text: co.plainText().create(file.name, chat._owner),
             image: image,
           },
           chat._owner,
@@ -67,14 +59,9 @@ export function ChatScreen(props: { chatID: string }) {
       <ChatBody>
         {chat.length > 0 ? (
           chat
-            // We call slice before reverse to avoid mutating the original array
             .slice(-showNLastMessages)
-            // Reverse plus flex-col-reverse on ChatBody gives us scroll-to-bottom behavior
-            .reverse()
-            .map(
-              (msg) =>
-                msg?.text && <ChatBubble me={me} msg={msg} key={msg.id} />,
-            )
+            .reverse() // this plus flex-col-reverse on ChatBody gives us scroll-to-bottom behavior
+            .map((msg) => <ChatBubble me={me} msg={msg} key={msg.id} />)
         ) : (
           <EmptyChatMessage />
         )}
@@ -93,7 +80,12 @@ export function ChatScreen(props: { chatID: string }) {
 
         <TextInput
           onSubmit={(text) => {
-            chat.push(Message.create({ text }, chat._owner));
+            chat.push(
+              Message.create(
+                { text: co.plainText().create(text, chat._owner) },
+                chat._owner,
+              ),
+            );
           }}
         />
       </InputBar>
@@ -101,7 +93,10 @@ export function ChatScreen(props: { chatID: string }) {
   );
 }
 
-function ChatBubble(props: { me: Account; msg: Message }) {
+function ChatBubble(props: {
+  me: Account;
+  msg: co.loaded<typeof Message, { text: true }>;
+}) {
   if (!props.me.canRead(props.msg) || !props.msg.text?.toString()) {
     return (
       <BubbleContainer fromMe={false}>
@@ -131,35 +126,3 @@ function ChatBubble(props: { me: Account; msg: Message }) {
     </BubbleContainer>
   );
 }
-
-/**
- * Warms the local cache with the initial messages to load only the initial messages
- * and avoid flickering
- */
-function useMessagesPreload(chatID: string) {
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    preloadChatMessages(chatID).finally(() => {
-      setIsLoading(false);
-    });
-  }, [chatID]);
-
-  return isLoading;
-}
-
-async function preloadChatMessages(chatID: string) {
-  const chat = await Chat.load(chatID);
-
-  if (!chat?._refs) return;
-
-  const promises = [];
-
-  for (const msg of Array.from(chat._refs)
-    .reverse()
-    .slice(0, INITIAL_MESSAGES_TO_SHOW)) {
-    promises.push(Message.load(msg.id, { resolve: { text: true } }));
-  }
-
-  await Promise.all(promises);
-}

examples/chat/src/schema.ts

@@ -1,8 +1,8 @@
-import { co } from "jazz-tools";
+import { co, z } from "jazz-tools";
 
 export const Message = co.map({
   text: co.plainText(),
-  image: co.optional(co.image()),
+  image: z.optional(co.image()),
 });
 export type Message = co.loaded<typeof Message>;
 

examples/chat/src/ui.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { CoPlainText, ImageDefinition } from "jazz-tools";
-import { Image } from "jazz-tools/react";
+import { ProgressiveImg } from "jazz-tools/react";
 import { ImageIcon } from "lucide-react";
 import { useId, useRef } from "react";
 
@@ -83,12 +83,14 @@ export function BubbleText(props: {
 
 export function BubbleImage(props: { image: ImageDefinition }) {
   return (
-    <Image
-      imageId={props.image.id}
-      className="h-auto max-h-80 max-w-full rounded-t-xl mb-1"
-      height="original"
-      width="original"
-    />
+    <ProgressiveImg image={props.image}>
+      {({ src }) => (
+        <img
+          className="h-auto max-h-80 max-w-full rounded-t-xl mb-1"
+          src={src}
+        />
+      )}
+    </ProgressiveImg>
   );
 }
 
@@ -110,9 +112,7 @@ export function InputBar(props: { children: React.ReactNode }) {
 
 export function ImageInput({
   onImageChange,
-}: {
-  onImageChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}) {
+}: { onImageChange?: (event: React.ChangeEvent<HTMLInputElement>) => void }) {
   const inputRef = useRef<HTMLInputElement>(null);
 
   const onUploadClick = () => {

examples/clerk-expo/package.json

@@ -14,15 +14,15 @@
     "@bam.tech/react-native-image-resizer": "^3.0.11",
     "@clerk/clerk-expo": "^2.13.1",
     "@react-native-community/netinfo": "11.4.1",
-    "expo": "54.0.0-canary-20250701-6a945c5",
+    "expo": "~53.0.9",
     "expo-crypto": "~14.1.5",
     "expo-linking": "~7.1.5",
     "expo-secure-store": "~14.2.3",
     "expo-sqlite": "~15.2.10",
     "expo-web-browser": "~14.2.0",
     "jazz-tools": "workspace:*",
-    "react": "19.1.0",
-    "react-native": "0.80.0",
+    "react": "19.0.0",
+    "react-native": "0.79.2",
     "react-native-get-random-values": "^1.11.0",
     "readable-stream": "^4.7.0"
   },
@@ -32,4 +32,4 @@
     "typescript": "~5.8.3"
   },
   "private": true
-}
+}

examples/clerk-expo/src/auth/SignInScreen.tsx

@@ -10,9 +10,7 @@ import {
 
 export function SignInScreen({
   setPage,
-}: {
-  setPage: (page: "sign-in" | "sign-up") => void;
-}) {
+}: { setPage: (page: "sign-in" | "sign-up") => void }) {
   const { signIn, setActive, isLoaded } = useSignIn();
 
   const [emailAddress, setEmailAddress] = useState("");

examples/clerk-expo/src/auth/SignUpScreen.tsx

@@ -10,9 +10,7 @@ import {
 
 export function SignUpScreen({
   setPage,
-}: {
-  setPage: (page: "sign-in" | "sign-up") => void;
-}) {
+}: { setPage: (page: "sign-in" | "sign-up") => void }) {
   const { isLoaded, signUp, setActive } = useSignUp();
 
   const [emailAddress, setEmailAddress] = React.useState("");

examples/clerk/package.json

@@ -14,17 +14,17 @@
   "dependencies": {
     "@clerk/clerk-react": "^5.4.1",
     "jazz-tools": "workspace:*",
-    "react": "19.1.0",
-    "react-dom": "19.1.0"
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.50.1",
     "@biomejs/biome": "1.9.4",
-    "@types/react": "19.1.0",
-    "@types/react-dom": "19.1.0",
+    "@types/react": "19.0.0",
+    "@types/react-dom": "19.0.0",
     "@vitejs/plugin-react": "^4.5.1",
     "globals": "^15.11.0",
     "typescript": "5.6.2",
     "vite": "^6.3.5"
   }
-}
+}

examples/filestream/package.json

@@ -11,14 +11,14 @@
   },
   "dependencies": {
     "jazz-tools": "workspace:*",
-    "react": "19.1.0",
-    "react-dom": "19.1.0"
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
     "@tailwindcss/postcss": "^4.1.10",
-    "@types/react": "19.1.0",
-    "@types/react-dom": "19.1.0",
+    "@types/react": "19.0.0",
+    "@types/react-dom": "19.0.0",
     "@vitejs/plugin-react": "^4.5.1",
     "globals": "^15.11.0",
     "is-ci": "^3.0.1",

examples/filestream/src/schema.ts

@@ -1,7 +1,7 @@
-import { co } from "jazz-tools";
+import { co, z } from "jazz-tools";
 
 export const JazzProfile = co.profile({
-  file: co.optional(co.fileStream()),
+  file: z.optional(co.fileStream()),
 });
 
 export const JazzAccount = co.account({

examples/form/package.json

@@ -12,16 +12,16 @@
   "dependencies": {
     "hash-slash": "workspace:*",
     "jazz-tools": "workspace:*",
-    "react": "19.1.0",
-    "react-dom": "19.1.0"
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
     "@playwright/test": "^1.50.1",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/postcss": "^4.1.10",
-    "@types/react": "19.1.0",
-    "@types/react-dom": "19.1.0",
+    "@types/react": "19.0.0",
+    "@types/react-dom": "19.0.0",
     "@vitejs/plugin-react": "^4.5.1",
     "globals": "^15.11.0",
     "is-ci": "^3.0.1",

examples/form/src/CreateOrder.tsx

@@ -1,4 +1,5 @@
 import { useIframeHashRouter } from "hash-slash";
+import { Loaded } from "jazz-tools";
 import { useAccount, useCoState } from "jazz-tools/react";
 import { useState } from "react";
 import { Errors } from "./Errors.tsx";
@@ -8,7 +9,7 @@ import {
   BubbleTeaOrder,
   DraftBubbleTeaOrder,
   JazzAccount,
-  validateDraftOrder,
+  ListOfBubbleTeaAddOns,
 } from "./schema.ts";
 
 export function CreateOrder() {
@@ -20,19 +21,20 @@ export function CreateOrder() {
 
   if (!me?.root) return;
 
-  const onSave = (draft: DraftBubbleTeaOrder) => {
-    const validation = validateDraftOrder(draft);
+  const onSave = (draft: Loaded<typeof DraftBubbleTeaOrder>) => {
+    // validate if the draft is a valid order
+    const validation = DraftBubbleTeaOrder.validate(draft);
     setErrors(validation.errors);
     if (validation.errors.length > 0) {
       return;
     }
 
     // turn the draft into a real order
-    me.root.orders.push(draft as BubbleTeaOrder);
+    me.root.orders.push(draft as Loaded<typeof BubbleTeaOrder>);
 
     // reset the draft
     me.root.draft = DraftBubbleTeaOrder.create({
-      addOns: [],
+      addOns: ListOfBubbleTeaAddOns.create([]),
     });
 
     router.navigate("/");
@@ -58,7 +60,7 @@ function CreateOrderForm({
   onSave,
 }: {
   id: string;
-  onSave: (draft: DraftBubbleTeaOrder) => void;
+  onSave: (draft: Loaded<typeof DraftBubbleTeaOrder>) => void;
 }) {
   const draft = useCoState(DraftBubbleTeaOrder, id, {
     resolve: { addOns: true, instructions: true },

examples/form/src/DraftIndicator.tsx

@@ -1,11 +1,11 @@
 import { useAccount } from "jazz-tools/react";
-import { JazzAccount, hasChanges } from "./schema";
+import { DraftBubbleTeaOrder, JazzAccount } from "./schema";
 export function DraftIndicator() {
   const { me } = useAccount(JazzAccount, {
     resolve: { root: { draft: true } },
   });
 
-  if (hasChanges(me?.root.draft)) {
+  if (DraftBubbleTeaOrder.hasChanges(me?.root.draft)) {
     return (
       <div className="absolute -top-1 -right-1 bg-blue-500 border-2 border-white w-3 h-3 rounded-full dark:border-stone-925">
         <span className="sr-only">You have a draft</span>

examples/form/src/OrderForm.tsx

@@ -1,4 +1,4 @@
-import { CoPlainText } from "jazz-tools";
+import { CoPlainText, Loaded } from "jazz-tools";
 import {
   BubbleTeaAddOnTypes,
   BubbleTeaBaseTeaTypes,
@@ -10,7 +10,7 @@ export function OrderForm({
   order,
   onSave,
 }: {
-  order: BubbleTeaOrder | DraftBubbleTeaOrder;
+  order: Loaded<typeof BubbleTeaOrder> | Loaded<typeof DraftBubbleTeaOrder>;
   onSave?: (e: React.FormEvent<HTMLFormElement>) => void;
 }) {
   // Handles updates to the instructions field of the order.

examples/form/src/OrderThumbnail.tsx

@@ -1,6 +1,11 @@
+import { Loaded } from "jazz-tools";
 import { BubbleTeaOrder } from "./schema.ts";
 
-export function OrderThumbnail({ order }: { order: BubbleTeaOrder }) {
+export function OrderThumbnail({
+  order,
+}: {
+  order: Loaded<typeof BubbleTeaOrder>;
+}) {
   const { id, baseTea, addOns, instructions, deliveryDate, withMilk } = order;
   const date = deliveryDate.toLocaleDateString();
 

examples/form/src/schema.ts

@@ -1,4 +1,4 @@
-import { co, z } from "jazz-tools";
+import { Loaded, co, z } from "jazz-tools";
 
 export const BubbleTeaAddOnTypes = [
   "Pearl",
@@ -15,46 +15,52 @@ export const BubbleTeaBaseTeaTypes = [
   "Thai",
 ] as const;
 
-export const ListOfBubbleTeaAddOns = co.list(
-  z.literal([...BubbleTeaAddOnTypes]),
-);
-export type ListOfBubbleTeaAddOns = co.loaded<typeof ListOfBubbleTeaAddOns>;
-
-function hasAddOnsChanges(list?: ListOfBubbleTeaAddOns | null) {
-  return list && Object.entries(list._raw.insertions).length > 0;
-}
+export const ListOfBubbleTeaAddOns = co
+  .list(z.literal([...BubbleTeaAddOnTypes]))
+  .withHelpers((Self) => ({
+    hasChanges(list?: Loaded<typeof Self> | null) {
+      return list && Object.entries(list._raw.insertions).length > 0;
+    },
+  }));
 
 export const BubbleTeaOrder = co.map({
   baseTea: z.literal([...BubbleTeaBaseTeaTypes]),
   addOns: ListOfBubbleTeaAddOns,
   deliveryDate: z.date(),
   withMilk: z.boolean(),
-  instructions: co.optional(co.plainText()),
+  instructions: z.optional(co.plainText()),
 });
-export type BubbleTeaOrder = co.loaded<typeof BubbleTeaOrder>;
 
-export const DraftBubbleTeaOrder = BubbleTeaOrder.partial();
-export type DraftBubbleTeaOrder = co.loaded<typeof DraftBubbleTeaOrder>;
+export const DraftBubbleTeaOrder = co
+  .map({
+    baseTea: z.optional(z.literal([...BubbleTeaBaseTeaTypes])),
+    addOns: z.optional(ListOfBubbleTeaAddOns),
+    deliveryDate: z.optional(z.date()),
+    withMilk: z.optional(z.boolean()),
+    instructions: z.optional(co.plainText()),
+  })
+  .withHelpers((Self) => ({
+    hasChanges(order: Loaded<typeof Self> | undefined) {
+      return (
+        !!order &&
+        (Object.keys(order._edits).length > 1 ||
+          ListOfBubbleTeaAddOns.hasChanges(order.addOns))
+      );
+    },
 
-export function validateDraftOrder(order: DraftBubbleTeaOrder) {
-  const errors: string[] = [];
+    validate(order: Loaded<typeof Self>) {
+      const errors: string[] = [];
 
-  if (!order.baseTea) {
-    errors.push("Please select your preferred base tea.");
-  }
-  if (!order.deliveryDate) {
-    errors.push("Plese select a delivery date.");
-  }
+      if (!order.baseTea) {
+        errors.push("Please select your preferred base tea.");
+      }
+      if (!order.deliveryDate) {
+        errors.push("Plese select a delivery date.");
+      }
 
-  return { errors };
-}
-
-export function hasChanges(order?: DraftBubbleTeaOrder | null) {
-  return (
-    !!order &&
-    (Object.keys(order._edits).length > 1 || hasAddOnsChanges(order.addOns))
-  );
-}
+      return { errors };
+    },
+  }));
 
 /** The root is an app-specific per-user private `CoMap`
  *  where you can store top-level objects for that user */
@@ -70,9 +76,15 @@ export const JazzAccount = co
   })
   .withMigration((account) => {
     if (!account.root) {
-      account.root = AccountRoot.create(
-        { draft: { addOns: [], instructions: "" }, orders: [] },
+      const orders = co.list(BubbleTeaOrder).create([], account);
+      const draft = DraftBubbleTeaOrder.create(
+        {
+          addOns: ListOfBubbleTeaAddOns.create([], account),
+          instructions: co.plainText().create("", account),
+        },
         account,
       );
+
+      account.root = AccountRoot.create({ draft, orders }, account);
     }
   });

examples/image-upload/package.json

@@ -11,14 +11,14 @@
   },
   "dependencies": {
     "jazz-tools": "workspace:*",
-    "react": "19.1.0",
-    "react-dom": "19.1.0"
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
     "@tailwindcss/postcss": "^4.1.10",
-    "@types/react": "19.1.0",
-    "@types/react-dom": "19.1.0",
+    "@types/react": "19.0.0",
+    "@types/react-dom": "19.0.0",
     "@vitejs/plugin-react": "^4.5.1",
     "globals": "^15.11.0",
     "typescript": "5.6.2",

examples/image-upload/src/App.tsx

@@ -1,24 +1,10 @@
 import ImageUpload from "./ImageUpload.tsx";
-import ProfileImageComponent from "./ProfileImageComponent.tsx";
-import ProfileImageImperative from "./ProfileImageImperative.tsx";
 
 function App() {
   return (
     <>
-      <main className="max-w-6xl mx-auto px-3 py-16">
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-          <div>
-            <h2 className="text-xl font-semibold mb-4">Upload Image</h2>
-            <ImageUpload />
-          </div>
-          <div>
-            <h2>Profile Image - imperative way</h2>
-            <ProfileImageImperative />
-            <hr />
-            <h2>Profile Image - component</h2>
-            <ProfileImageComponent />
-          </div>
-        </div>
+      <main className="max-w-3xl mx-auto px-3 py-16">
+        <ImageUpload />
       </main>
     </>
   );

examples/image-upload/src/ImageUpload.tsx

@@ -1,5 +1,4 @@
-import { createImage } from "jazz-tools/media";
-import { useAccount } from "jazz-tools/react";
+import { ProgressiveImg, createImage, useAccount } from "jazz-tools/react";
 import { ChangeEvent, useEffect, useRef, useState } from "react";
 import { JazzAccount } from "./schema";
 
@@ -36,14 +35,9 @@ export default function ImageUpload() {
       setImagePreviewUrl(objectUrl);
 
       try {
-        const startTime = performance.now();
         me.profile.image = await createImage(file, {
           owner: me.profile._owner,
-          progressive: true,
-          placeholder: "blur",
         });
-        const endTime = performance.now();
-        console.log(`Image upload took ${endTime - startTime} milliseconds`);
       } catch (error) {
         console.error("Error uploading image:", error);
       } finally {
@@ -53,6 +47,29 @@ export default function ImageUpload() {
     }
   };
 
+  const deleteImage = () => {
+    if (!me?.profile) return;
+    me.profile.image = undefined;
+  };
+
+  if (me?.profile?.image) {
+    return (
+      <>
+        <ProgressiveImg image={me.profile.image as any /* TODO: fix this */}>
+          {({ src }) => <img alt="" src={src} className="w-full h-auto" />}
+        </ProgressiveImg>
+
+        <button
+          type="button"
+          onClick={deleteImage}
+          className="mt-5 bg-blue-600 text-white py-2 px-3 rounded"
+        >
+          Delete image
+        </button>
+      </>
+    );
+  }
+
   if (imagePreviewUrl) {
     return (
       <div className="relative">

examples/image-upload/src/ProfileImageComponent.tsx

@@ -1,35 +0,0 @@
-import { Image, useAccount } from "jazz-tools/react";
-import { JazzAccount } from "./schema";
-
-export default function ProfileImage() {
-  const { me } = useAccount(JazzAccount, { resolve: { profile: true } });
-
-  const deleteImage = () => {
-    if (!me?.profile) return;
-    me.profile.image = undefined;
-  };
-
-  if (!me?.profile?.image) {
-    return (
-      <div className="flex items-center justify-center h-64 bg-gray-100 rounded-lg">
-        <p className="text-gray-500">No profile image</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-4">
-      <h2 className="text-xl font-semibold">Profile Image</h2>
-      <div className="border rounded-lg overflow-hidden">
-        <Image imageId={me.profile.image.id} alt="Profile" width={600} />
-      </div>
-      <button
-        type="button"
-        onClick={deleteImage}
-        className="bg-red-600 text-white py-2 px-3 rounded hover:bg-red-700"
-      >
-        Delete image
-      </button>
-    </div>
-  );
-}

examples/image-upload/src/ProfileImageImperative.tsx

@@ -1,80 +0,0 @@
-import {
-  highestResAvailable,
-  // loadImage,
-  // loadImageBySize,
-} from "jazz-tools/media";
-import { useAccount } from "jazz-tools/react";
-import { useEffect, useState } from "react";
-import { JazzAccount } from "./schema";
-
-export default function ProfileImageImperative() {
-  const [image, setImage] = useState<string | undefined>(undefined);
-  const { me } = useAccount(JazzAccount, { resolve: { profile: true } });
-
-  useEffect(() => {
-    if (!me?.profile?.image) return;
-
-    // `loadImage` returns always the original image
-    // loadImage(me.profile.image).then((image) => {
-    //   if(image === null) {
-    //     console.error('Unable to load image');
-    //     return;
-    //   }
-    //   console.log('loadImage', {w: image.width, h: image.height, ready: image.image.getChunks() ? 'ready' : 'not ready'});
-    // });
-
-    // `loadImageBySize` returns the best available image for the given size
-    // loadImageBySize(me.profile.image.id, 1024, 1024).then((image) => {
-    //   if(image === null) {
-    //     console.error('Unable to load image');
-    //     return;
-    //   }
-    //   console.log('loadImageBySize', {w: image.width, h: image.height, ready: image.image.getChunks() ? 'ready' : 'not ready'});
-    // });
-
-    // keep it synced and return the best _loaded_ image for the given size
-    const unsub = me.profile.image.subscribe({}, (image) => {
-      const bestImage = highestResAvailable(image, 1024, 1024);
-      console.info(bestImage ? "Blob is ready" : "Blob is not ready");
-      if (bestImage) {
-        const blob = bestImage.image.toBlob();
-        if (blob) {
-          setImage(URL.createObjectURL(blob));
-        }
-      }
-    });
-
-    return () => {
-      unsub();
-    };
-  }, [me?.profile?.image]);
-
-  const deleteImage = () => {
-    if (!me?.profile) return;
-    me.profile.image = undefined;
-  };
-
-  if (!me?.profile?.image) {
-    return (
-      <div className="flex items-center justify-center h-64 bg-gray-100 rounded-lg">
-        <p className="text-gray-500">No profile image</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-4">
-      <h2 className="text-xl font-semibold">Profile Image</h2>
-      <div className="border rounded-lg overflow-hidden">
-        <img alt="Profile" src={image} className="w-full h-auto" />
-      </div>
-      <button
-        type="button"
-        onClick={deleteImage}
-        className="bg-red-600 text-white py-2 px-3 rounded hover:bg-red-700"
-      >
-        Delete image
-      </button>
-    </div>
-  );
-}

examples/image-upload/src/schema.ts

@@ -1,7 +1,7 @@
-import { co } from "jazz-tools";
+import { co, z } from "jazz-tools";
 
 export const JazzProfile = co.profile({
-  image: co.optional(co.image()),
+  image: z.optional(co.image()),
 });
 
 export const JazzAccount = co.account({

examples/inspector/package.json

@@ -17,15 +17,15 @@
     "cojson-transport-ws": "workspace:*",
     "hash-slash": "workspace:*",
     "jazz-tools": "workspace:*",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-use": "^17.4.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.50.1",
     "@tailwindcss/postcss": "^4.1.10",
-    "@types/react": "19.1.0",
-    "@types/react-dom": "19.1.0",
+    "@types/react": "19.0.0",
+    "@types/react-dom": "19.0.0",
     "@vitejs/plugin-react-swc": "^3.10.1",
     "postcss": "^8.4.40",
     "tailwindcss": "^4.1.10",

examples/inspector/tests/lib/schema.ts

@@ -11,9 +11,9 @@ export const Issue = co.map({
   status: z.enum(["open", "closed"]),
   labels: co.list(z.string()),
   reactions: ReactionsList,
-  file: co.optional(co.fileStream()),
-  image: co.optional(co.image()),
-  lead: co.optional(co.account()),
+  file: z.optional(co.fileStream()),
+  image: z.optional(co.image()),
+  lead: z.optional(co.account()),
 });
 
 export const Project = co.map({

examples/jazz-nextjs/package.json

@@ -10,8 +10,8 @@
   "dependencies": {
     "jazz-tools": "workspace:*",
     "next": "15.3.2",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.10",
@@ -21,4 +21,4 @@
     "tailwindcss": "^4.1.10",
     "typescript": "^5"
   }
-}
+}

examples/jazz-nextjs/src/apiKey.ts

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

examples/jazz-nextjs/src/jazz.tsx

@@ -1,13 +1,12 @@
 import { JazzInspector } from "jazz-tools/inspector";
 import { JazzReactProvider } from "jazz-tools/react";
-import { apiKey } from "./apiKey";
 
 export function Jazz({ children }: { children: React.ReactNode }) {
   return (
     <JazzReactProvider
       enableSSR
       sync={{
-        peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
+        peer: `wss://cloud.jazz.tools/`,
       }}
     >
       {children}

examples/jazz-paper-scissors/package.json

@@ -24,15 +24,15 @@
     "clsx": "^2.1.1",
     "jazz-tools": "workspace:*",
     "lucide-react": "^0.485.0",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "tailwind-merge": "^3.0.2",
     "tailwindcss": "^4.0.17",
     "tw-animate-css": "^1.2.5"
   },
   "devDependencies": {
-    "@types/react": "19.1.0",
-    "@types/react-dom": "19.1.0",
+    "@types/react": "19.0.0",
+    "@types/react-dom": "19.0.0",
     "@vitejs/plugin-react": "^4.3.4",
     "jazz-run": "workspace:*",
     "npm-run-all": "^4.1.5",

examples/jazz-paper-scissors/src/schema.ts

@@ -8,7 +8,7 @@ export type Player = co.loaded<typeof Player>;
 
 export const Game = co.map({
   player1: Player,
-  player2: co.optional(Player),
+  player2: z.optional(Player),
   outcome: z.optional(z.literal(["player1", "player2", "draw"])),
   player1Score: z.number(),
   player2Score: z.number(),
@@ -17,8 +17,8 @@ export type Game = co.loaded<typeof Game>;
 
 export const WaitingRoom = co.map({
   account1: co.account(),
-  account2: co.optional(co.account()),
-  game: co.optional(Game),
+  account2: z.optional(co.account()),
+  game: z.optional(Game),
 });
 export type WaitingRoom = co.loaded<typeof WaitingRoom>;
 
@@ -47,7 +47,7 @@ export const JoinGameRequest = co.map({
 });
 export type JoinGameRequest = co.loaded<typeof JoinGameRequest>;
 
-export const InboxMessage = co.discriminatedUnion("type", [
+export const InboxMessage = z.discriminatedUnion("type", [
   PlayIntent,
   NewGameIntent,
   CreateGameRequest,

examples/multi-cursors/package.json

@@ -13,14 +13,14 @@
   "dependencies": {
     "@react-spring/web": "^9.7.5",
     "jazz-tools": "workspace:*",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "zod": "3.25.76"
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "zod": "3.25.28"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@types/react": "19.1.0",
-    "@types/react-dom": "19.1.0",
+    "@types/react": "19.0.0",
+    "@types/react-dom": "19.0.0",
     "@vitejs/plugin-react": "^4.5.1",
     "globals": "^15.11.0",
     "is-ci": "^3.0.1",
@@ -31,4 +31,4 @@
     "vite": "^6.3.5",
     "vitest": "3.1.1"
   }
-}
+}

examples/multi-cursors/src/components/Container.tsx

@@ -12,11 +12,7 @@ function Avatar({
   name,
   color,
   active,
-}: {
-  name: string;
-  color: string;
-  active: boolean;
-}) {
+}: { name: string; color: string; active: boolean }) {
   return (
     <span
       title={name}

examples/multiauth/package.json

@@ -12,14 +12,14 @@
   "dependencies": {
     "@clerk/clerk-react": "^5.4.1",
     "jazz-tools": "workspace:*",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "tailwindcss": "^4.1.10"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@types/react": "19.1.0",
-    "@types/react-dom": "19.1.0",
+    "@types/react": "19.0.0",
+    "@types/react-dom": "19.0.0",
     "@vitejs/plugin-react": "^4.5.1",
     "globals": "^15.11.0",
     "typescript": "5.6.2",

examples/multiauth/src/index.css

@@ -47,9 +47,7 @@ button {
   font-family: inherit;
   background-color: transparent;
   cursor: pointer;
-  transition:
-    all 0.05s ease,
-    border-color 0.1s ease;
+  transition: all 0.05s ease, border-color 0.1s ease;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 button:hover {
@@ -95,9 +93,8 @@ button:active {
   background-color: white;
   padding: 2rem;
   border-radius: 0.5rem;
-  box-shadow:
-    0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px
+    rgba(0, 0, 0, 0.06);
   width: 28rem;
 }
 

examples/music-player/package.json

@@ -22,9 +22,9 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "jazz-tools": "workspace:*",
-    "lucide-react": "^0.536.0",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
+    "lucide-react": "^0.274.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-router": "^6.16.0",
     "react-router-dom": "^6.16.0",
     "tailwind-merge": "^1.14.0"
@@ -32,13 +32,12 @@
   "devDependencies": {
     "@playwright/test": "^1.50.1",
     "@tailwindcss/postcss": "^4.1.10",
-    "@types/react": "19.1.0",
-    "@types/react-dom": "19.1.0",
+    "@types/react": "19.0.0",
+    "@types/react-dom": "19.0.0",
     "@vitejs/plugin-react-swc": "^3.10.1",
     "postcss": "^8.4.27",
     "tailwindcss": "^4.1.10",
     "typescript": "5.6.2",
-    "vite": "^6.3.5",
-    "vite-plugin-pwa": "^1.0.2"
+    "vite": "^6.3.5"
   }
 }

examples/music-player/src/1_schema.ts

@@ -66,7 +66,7 @@ export const MusicaAccountRoot = co.map({
   // track and playlist
   // You can also add the position in time if you want make it possible
   // to resume the song
-  activeTrack: co.optional(MusicTrack),
+  activeTrack: z.optional(MusicTrack),
   activePlaylist: Playlist,
 
   exampleDataLoaded: z.optional(z.boolean()),
@@ -84,14 +84,15 @@ export const MusicaAccount = co
      *  You can use it to set up the account root and any other initial CoValues you need.
      */
     if (account.root === undefined) {
+      const tracks = co.list(MusicTrack).create([]);
       const rootPlaylist = Playlist.create({
-        tracks: [],
+        tracks,
         title: "",
       });
 
       account.root = MusicaAccountRoot.create({
         rootPlaylist,
-        playlists: [],
+        playlists: co.list(Playlist).create([]),
         activeTrack: undefined,
         activePlaylist: rootPlaylist,
         exampleDataLoaded: false,

examples/music-player/src/2_main.tsx

@@ -15,7 +15,7 @@ import { SidebarProvider } from "@/components/ui/sidebar";
 import { JazzReactProvider } from "jazz-tools/react";
 import { onAnonymousAccountDiscarded } from "./4_actions";
 import { KeyboardListener } from "./components/PlayerControls";
-import { usePrepareAppState } from "./lib/usePrepareAppState";
+import { useUploadExampleData } from "./lib/useUploadExampleData";
 
 /**
  * Walkthrough: The top-level provider `<JazzReactProvider/>`
@@ -31,7 +31,7 @@ import { usePrepareAppState } from "./lib/usePrepareAppState";
 function Main() {
   const mediaPlayer = useMediaPlayer();
 
-  const isReady = usePrepareAppState(mediaPlayer);
+  useUploadExampleData();
 
   const router = createHashRouter([
     {
@@ -48,8 +48,6 @@ function Main() {
     },
   ]);
 
-  if (!isReady) return null;
-
   return (
     <>
       <RouterProvider router={router} />

examples/music-player/src/3_HomePage.tsx

@@ -11,7 +11,6 @@ import { uploadMusicTracks } from "./4_actions";
 import { MediaPlayer } from "./5_useMediaPlayer";
 import { FileUploadButton } from "./components/FileUploadButton";
 import { MusicTrackRow } from "./components/MusicTrackRow";
-import { PlayerControls } from "./components/PlayerControls";
 import { PlaylistTitleInput } from "./components/PlaylistTitleInput";
 import { SidePanel } from "./components/SidePanel";
 import { Button } from "./components/ui/button";
@@ -43,11 +42,7 @@ export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
   const playlistId = params.playlistId ?? me?.root._refs.rootPlaylist.id;
 
   const playlist = useCoState(Playlist, playlistId, {
-    resolve: {
-      tracks: {
-        $each: true,
-      },
-    },
+    resolve: { tracks: true },
   });
 
   const isRootPlaylist = !params.playlistId;
@@ -69,16 +64,16 @@ export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
   const isAuthenticated = useIsAuthenticated();
 
   return (
-    <SidebarInset className="flex flex-col h-screen text-gray-800">
+    <SidebarInset className="flex flex-col h-screen text-gray-800 bg-blue-50">
       <div className="flex flex-1 overflow-hidden">
-        <SidePanel />
-        <main className="flex-1 px-2 py-4 md:px-6 overflow-y-auto overflow-x-hidden relative sm:h-[calc(100vh-80px)] bg-white h-[calc(100vh-165px)]">
-          <SidebarTrigger className="md:hidden" />
-          <div className="flex flex-row items-center justify-between mb-4 pl-1 md:pl-10 pr-2 md:pr-0 mt-2 md:mt-0 w-full">
+        <SidePanel mediaPlayer={mediaPlayer} />
+        <main className="flex-1 p-6 overflow-y-auto overflow-x-hidden">
+          <SidebarTrigger />
+          <div className="flex items-center justify-between mb-6">
             {isRootPlaylist ? (
               <h1 className="text-2xl font-bold text-blue-800">All tracks</h1>
             ) : (
-              <PlaylistTitleInput className="w-full" playlistId={playlistId} />
+              <PlaylistTitleInput playlistId={playlistId} />
             )}
             <div className="flex items-center space-x-4">
               {isRootPlaylist && (
@@ -95,14 +90,14 @@ export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
               )}
             </div>
           </div>
-          <ul className="flex flex-col max-w-full sm:gap-1">
+          <ul className="flex flex-col max-w-full">
             {playlist?.tracks?.map(
-              (track, index) =>
+              (track) =>
                 track && (
                   <MusicTrackRow
                     trackId={track.id}
                     key={track.id}
-                    index={index}
+                    isLoading={mediaPlayer.loading === track.id}
                     isPlaying={
                       mediaPlayer.activeTrackId === track.id &&
                       isActivePlaylist &&
@@ -111,12 +106,12 @@ export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
                     onClick={() => {
                       mediaPlayer.setActiveTrack(track, playlist);
                     }}
+                    showAddToPlaylist={isRootPlaylist}
                   />
                 ),
             )}
           </ul>
         </main>
-        <PlayerControls mediaPlayer={mediaPlayer} />
       </div>
     </SidebarInset>
   );

examples/music-player/src/4_actions.ts

@@ -1,6 +1,11 @@
 import { getAudioFileData } from "@/lib/audio/getAudioFileData";
-import { FileStream, Group } from "jazz-tools";
-import { MusicTrack, MusicaAccount, Playlist } from "./1_schema";
+import { FileStream, Group, co } from "jazz-tools";
+import {
+  MusicTrack,
+  MusicTrackWaveform,
+  MusicaAccount,
+  Playlist,
+} from "./1_schema";
 
 /**
  * Walkthrough: Actions
@@ -46,7 +51,7 @@ export async function uploadMusicTracks(
       {
         file: fileStream,
         duration: data.duration,
-        waveform: { data: data.waveform },
+        waveform: MusicTrackWaveform.create({ data: data.waveform }, group),
         title: file.name,
         isExampleTrack,
       },
@@ -68,10 +73,18 @@ export async function createNewPlaylist() {
     },
   });
 
-  const playlist = Playlist.create({
-    title: "New Playlist",
-    tracks: [],
-  });
+  // Since playlists are meant to be shared we associate them
+  // to a group which will contain the keys required to get
+  // access to the "owned" values
+  const playlistGroup = Group.create();
+
+  const playlist = Playlist.create(
+    {
+      title: "New Playlist",
+      tracks: co.list(MusicTrack).create([], playlistGroup),
+    },
+    playlistGroup,
+  );
 
   // Again, we associate the new playlist to the
   // user by pushing it into the playlists CoList
@@ -116,7 +129,7 @@ export async function removeTrackFromPlaylist(
 
   if (track._owner._type === "Group" && playlist._owner._type === "Group") {
     const trackGroup = track._owner;
-    trackGroup.removeMember(playlist._owner);
+    await trackGroup.removeMember(playlist._owner);
 
     const index =
       playlist.tracks?.findIndex(

examples/music-player/src/5_useMediaPlayer.ts

@@ -5,7 +5,6 @@ import { FileStream } from "jazz-tools";
 import { useAccount } from "jazz-tools/react";
 import { useRef, useState } from "react";
 import { updateActivePlaylist, updateActiveTrack } from "./4_actions";
-import { useAudioManager } from "./lib/audio/AudioManager";
 import { getNextTrack, getPrevTrack } from "./lib/getters";
 
 export function useMediaPlayer() {
@@ -13,7 +12,6 @@ export function useMediaPlayer() {
     resolve: { root: true },
   });
 
-  const audioManager = useAudioManager();
   const playState = usePlayState();
   const playMedia = usePlayMedia();
 
@@ -26,10 +24,8 @@ export function useMediaPlayer() {
 
   async function loadTrack(track: MusicTrack) {
     lastLoadedTrackId.current = track.id;
-    audioManager.unloadCurrentAudio();
 
     setLoading(track.id);
-    updateActiveTrack(track);
 
     const file = await FileStream.loadAsBlob(track._refs.file!.id); // TODO: see if we can avoid !
 
@@ -44,6 +40,8 @@ export function useMediaPlayer() {
       return;
     }
 
+    updateActiveTrack(track);
+
     await playMedia(file);
 
     setLoading(null);
@@ -87,7 +85,6 @@ export function useMediaPlayer() {
     playNextTrack,
     playPrevTrack,
     loading,
-    loadTrack,
   };
 }
 

examples/music-player/src/components/ConfirmDialog.tsx

@@ -1,59 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-
-interface ConfirmDialogProps {
-  isOpen: boolean;
-  onOpenChange: (open: boolean) => void;
-  title: string;
-  description: string;
-  confirmText?: string;
-  cancelText?: string;
-  onConfirm: () => void;
-  variant?: "default" | "destructive";
-}
-
-export function ConfirmDialog({
-  isOpen,
-  onOpenChange,
-  title,
-  description,
-  confirmText = "Confirm",
-  cancelText = "Cancel",
-  onConfirm,
-  variant = "destructive",
-}: ConfirmDialogProps) {
-  function handleConfirm() {
-    onConfirm();
-    onOpenChange(false);
-  }
-
-  function handleCancel() {
-    onOpenChange(false);
-  }
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>{title}</DialogTitle>
-          <DialogDescription>{description}</DialogDescription>
-        </DialogHeader>
-        <DialogFooter>
-          <Button variant="outline" onClick={handleCancel}>
-            {cancelText}
-          </Button>
-          <Button variant={variant} onClick={handleConfirm}>
-            {confirmText}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

examples/music-player/src/components/MusicTrackRow.tsx

@@ -9,41 +9,31 @@ import {
 import { cn } from "@/lib/utils";
 import { Loaded } from "jazz-tools";
 import { useAccount, useCoState } from "jazz-tools/react";
-import { MoreHorizontal, Pause, Play } from "lucide-react";
-import { Fragment, useCallback, useState } from "react";
-import { EditTrackDialog } from "./RenameTrackDialog";
-import { Waveform } from "./Waveform";
+import { MoreHorizontal } from "lucide-react";
+import { Fragment } from "react/jsx-runtime";
+import { MusicTrackTitleInput } from "./MusicTrackTitleInput";
 import { Button } from "./ui/button";
 
-function isPartOfThePlaylist(
-  trackId: string,
-  playlist: Loaded<typeof Playlist, { tracks: true }>,
-) {
-  return Array.from(playlist.tracks._refs).some((t) => t.id === trackId);
-}
-
 export function MusicTrackRow({
   trackId,
+  isLoading,
   isPlaying,
   onClick,
-  index,
+  showAddToPlaylist,
 }: {
   trackId: string;
+  isLoading: boolean;
   isPlaying: boolean;
   onClick: (track: Loaded<typeof MusicTrack>) => void;
-  index: number;
+  showAddToPlaylist: boolean;
 }) {
   const track = useCoState(MusicTrack, trackId);
-  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
 
   const { me } = useAccount(MusicaAccount, {
-    resolve: { root: { playlists: { $each: { tracks: true } } } },
+    resolve: { root: { playlists: { $each: true } } },
   });
 
   const playlists = me?.root.playlists ?? [];
-  const isActiveTrack = trackId === me?.root._refs.activeTrack?.id;
 
   function handleTrackClick() {
     if (!track) return;
@@ -70,118 +60,71 @@ export function MusicTrackRow({
     }
   }
 
-  function handleEdit() {
-    setIsEditDialogOpen(true);
-  }
-
-  const handleContextMenu = useCallback((e: React.MouseEvent) => {
-    e.preventDefault();
-    setIsDropdownOpen(true);
-  }, []);
-
-  const showWaveform = isHovered || isActiveTrack;
-
   return (
     <li
-      className={cn(
-        "flex gap-1 hover:bg-slate-200 group py-2 cursor-pointer rounded-lg",
-        isActiveTrack && "bg-slate-200",
-      )}
-      onMouseEnter={() => {
-        setIsHovered(true);
-      }}
-      onMouseLeave={() => {
-        setIsHovered(false);
-      }}
+      className={"flex gap-1 hover:bg-slate-200 group py-2 px-2 cursor-pointer"}
+      onClick={handleTrackClick}
     >
       <button
         className={cn(
-          "flex items-center justify-center bg-transparent w-8 h-8 transition-opacity cursor-pointer",
-          // Show play button on hover or when active, hide otherwise
-          "md:opacity-0 opacity-50 group-hover:opacity-100",
-          isActiveTrack && "md:opacity-100 opacity-100",
+          "flex items-center justify-center bg-transparent w-8 h-8 ",
+          !isPlaying && "group-hover:bg-slate-300 rounded-full",
         )}
         onClick={handleTrackClick}
         aria-label={`${isPlaying ? "Pause" : "Play"} ${track?.title}`}
       >
-        {isPlaying ? (
-          <Pause height={16} width={16} fill="currentColor" />
+        {isLoading ? (
+          <div className="animate-spin">߷</div>
+        ) : isPlaying ? (
+          "⏸️"
         ) : (
-          <Play height={16} width={16} fill="currentColor" />
+          "▶️"
         )}
       </button>
-      {/* Show track index when play button is hidden - hidden on mobile */}
-      <div
-        className={cn(
-          "hidden md:flex items-center justify-center w-8 h-8 text-sm text-gray-500 font-mono transition-opacity",
-        )}
-      >
-        {index + 1}
-      </div>
-      <button
-        onContextMenu={handleContextMenu}
-        onClick={handleTrackClick}
-        className="flex items-center overflow-hidden text-ellipsis whitespace-nowrap cursor-pointer flex-1 min-w-0"
-      >
-        {track?.title}
-      </button>
-
-      {/* Waveform that appears on hover */}
-      {track && showWaveform && (
-        <div className="flex-1 min-w-0 px-2 items-center hidden md:flex">
-          <Waveform
-            track={track}
-            height={20}
-            className="opacity-70 w-full"
-            showProgress={isActiveTrack}
-          />
-        </div>
-      )}
-
+      <MusicTrackTitleInput trackId={trackId} />
       <div onClick={(evt) => evt.stopPropagation()}>
-        <DropdownMenu open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="ghost"
-              className="h-8 w-8 p-0"
-              aria-label={`Open ${track?.title} menu`}
-            >
-              <span className="sr-only">Open menu</span>
-              <MoreHorizontal className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem onSelect={handleEdit}>Edit</DropdownMenuItem>
-            {playlists.map((playlist, playlistIndex) => (
-              <Fragment key={playlistIndex}>
-                {isPartOfThePlaylist(trackId, playlist) ? (
+        {showAddToPlaylist && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                className="h-8 w-8 p-0"
+                aria-label={`Open ${track?.title} menu`}
+              >
+                <span className="sr-only">Open menu</span>
+                <MoreHorizontal className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem
+                key={`delete`}
+                onSelect={async () => {
+                  if (!track) return;
+                  deleteTrack();
+                }}
+              >
+                Delete
+              </DropdownMenuItem>
+              {playlists.map((playlist, index) => (
+                <Fragment key={index}>
                   <DropdownMenuItem
-                    key={`remove-${playlistIndex}`}
-                    onSelect={() => handleRemoveFromPlaylist(playlist)}
-                  >
-                    Remove from {playlist.title}
-                  </DropdownMenuItem>
-                ) : (
-                  <DropdownMenuItem
-                    key={`add-${playlistIndex}`}
+                    key={`add-${index}`}
                     onSelect={() => handleAddToPlaylist(playlist)}
                   >
                     Add to {playlist.title}
                   </DropdownMenuItem>
-                )}
-              </Fragment>
-            ))}
-          </DropdownMenuContent>
-        </DropdownMenu>
+                  <DropdownMenuItem
+                    key={`remove-${index}`}
+                    onSelect={() => handleRemoveFromPlaylist(playlist)}
+                  >
+                    Remove from {playlist.title}
+                  </DropdownMenuItem>
+                </Fragment>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
       </div>
-      {track && isEditDialogOpen && (
-        <EditTrackDialog
-          track={track}
-          isOpen={isEditDialogOpen}
-          onOpenChange={setIsEditDialogOpen}
-          onDelete={deleteTrack}
-        />
-      )}
     </li>
   );
 }

examples/music-player/src/components/PlayerControls.tsx

@@ -5,8 +5,7 @@ import { usePlayState } from "@/lib/audio/usePlayState";
 import { useKeyboardListener } from "@/lib/useKeyboardListener";
 import { useAccount, useCoState } from "jazz-tools/react";
 import { Pause, Play, SkipBack, SkipForward } from "lucide-react";
-import WaveformCanvas from "./WaveformCanvas";
-import { Button } from "./ui/button";
+import { Waveform } from "./Waveform";
 
 export function PlayerControls({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
   const playState = usePlayState();
@@ -16,61 +15,51 @@ export function PlayerControls({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
     resolve: { root: { activePlaylist: true } },
   }).me?.root.activePlaylist;
 
-  const activeTrack = useCoState(MusicTrack, mediaPlayer.activeTrackId);
+  const activeTrack = useCoState(MusicTrack, mediaPlayer.activeTrackId, {
+    resolve: { waveform: true },
+  });
 
   if (!activeTrack) return null;
 
   const activeTrackTitle = activeTrack.title;
 
   return (
-    <footer className="flex flex-wrap sm:flex-nowrap items-center justify-between pt-4 p-2 sm:p-4 gap-4 sm:gap-4 bg-white border-t border-gray-200 absolute bottom-0 left-0 right-0 w-full z-50">
-      {/* Player Controls - Always on top */}
-      <div className="flex justify-center items-center space-x-1 sm:space-x-2 flex-shrink-0 w-full sm:w-auto order-1 sm:order-none">
-        <div className="flex items-center space-x-2">
-          <Button
-            variant="ghost"
-            size="icon"
+    <footer className="flex items-center justify-between p-4 gap-4 bg-white border-t border-gray-200 fixed bottom-0 left-0 right-0 w-full">
+      <div className="flex justify-center items-center space-x-2">
+        <div className="flex items-center space-x-4">
+          <button
             onClick={mediaPlayer.playPrevTrack}
+            className="text-blue-600 hover:text-blue-800"
             aria-label="Previous track"
           >
-            <SkipBack className="h-5 w-5" fill="currentColor" />
-          </Button>
-          <Button
-            size="icon"
+            <SkipBack size={20} />
+          </button>
+          <button
             onClick={playState.toggle}
-            className="bg-blue-600 text-white hover:bg-blue-700"
+            className="w-[42px] h-[42px] flex items-center justify-center bg-blue-600 rounded-full text-white hover:bg-blue-700"
             aria-label={isPlaying ? "Pause active track" : "Play active track"}
           >
             {isPlaying ? (
-              <Pause className="h-5 w-5" fill="currentColor" />
+              <Pause size={24} fill="currentColor" />
             ) : (
-              <Play className="h-5 w-5" fill="currentColor" />
+              <Play size={24} fill="currentColor" />
             )}
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon"
+          </button>
+          <button
             onClick={mediaPlayer.playNextTrack}
+            className="text-blue-600 hover:text-blue-800"
             aria-label="Next track"
           >
-            <SkipForward className="h-5 w-5" fill="currentColor" />
-          </Button>
+            <SkipForward size={20} />
+          </button>
         </div>
       </div>
-
-      {/* Waveform - Below controls on mobile, between controls and info on desktop */}
-      <WaveformCanvas
-        className="order-1 sm:order-none"
-        track={activeTrack}
-        height={50}
-      />
-
-      {/* Track Info - Below waveform on mobile, on the right on desktop */}
-      <div className="flex flex-col gap-1 min-w-fit sm:flex-shrink-0 text-center w-full sm:text-right items-center sm:items-end sm:w-auto order-0 sm:order-none">
-        <h4 className="font-medium text-blue-800 text-base sm:text-base truncate max-w-80 sm:max-w-80">
-          {activeTrackTitle}
-        </h4>
-        <p className="hidden sm:block text-xs sm:text-sm text-gray-600 truncate sm:max-w-80">
+      <div className=" sm:hidden md:flex flex-col flex-shrink-1 items-center w-[75%]">
+        <Waveform track={activeTrack} height={30} />
+      </div>
+      <div className="flex flex-col items-end  gap-1 text-right min-w-fit w-[25%]">
+        <h4 className="font-medium text-blue-800">{activeTrackTitle}</h4>
+        <p className="text-sm text-gray-600">
           {activePlaylist?.title || "All tracks"}
         </p>
       </div>
@@ -80,9 +69,7 @@ export function PlayerControls({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
 
 export function KeyboardListener({
   mediaPlayer,
-}: {
-  mediaPlayer: MediaPlayer;
-}) {
+}: { mediaPlayer: MediaPlayer }) {
   const playState = usePlayState();
 
   useMediaEndListener(mediaPlayer.playNextTrack);

examples/music-player/src/components/PlaylistTitleInput.tsx

@@ -1,15 +1,12 @@
 import { Playlist } from "@/1_schema";
 import { updatePlaylistTitle } from "@/4_actions";
-import { cn } from "@/lib/utils";
 import { useCoState } from "jazz-tools/react";
 import { ChangeEvent, useState } from "react";
 
 export function PlaylistTitleInput({
   playlistId,
-  className,
 }: {
   playlistId: string | undefined;
-  className?: string;
 }) {
   const playlist = useCoState(Playlist, playlistId);
   const [isEditing, setIsEditing] = useState(false);
@@ -36,10 +33,7 @@ export function PlaylistTitleInput({
     <input
       value={inputValue}
       onChange={handleTitleChange}
-      className={cn(
-        "text-2xl font-bold text-blue-800 bg-transparent",
-        className,
-      )}
+      className="text-2xl font-bold text-blue-800 bg-transparent"
       onFocus={handleFoucsIn}
       onBlur={handleFocusOut}
       aria-label={`Playlist title`}