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

Version Packages

.changeset/config.json

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

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

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

.github/workflows/build-examples.yaml

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

.github/workflows/build-starters.yaml

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

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

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

.github/workflows/playwright.yml

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

.github/workflows/pre-release.yml

@@ -1,7 +1,7 @@
 name: Pre-Publish tagged Pull Requests
 on:
   pull_request:
-    types: [opened, synchronize, reopened]
+    types: [opened, synchronize, reopened, labeled]
 
 jobs:
   pre-release:
@@ -99,4 +99,4 @@ jobs:
                 );
                 await logPublishInfo();
               }
-            }
+            }

.github/workflows/release.yml

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

.gitignore

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

CONTRIBUTING.md

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

biome.json

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

examples/chat-rn-clerk/CHANGELOG.md

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

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

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

examples/chat-rn-clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "chat-rn-clerk",
   "main": "index.js",
-  "version": "1.0.66",
+  "version": "1.0.83",
   "scripts": {
     "build": "expo export -p ios",
     "start": "expo start",
@@ -9,23 +9,22 @@
     "format-and-lint:fix": "biome check . --write",
     "android": "expo run:android",
     "ios": "expo run:ios",
-    "web": "expo start --web",
-    "test": "jest --watchAll"
+    "web": "expo start --web"
   },
   "jest": {
     "preset": "jest-expo"
   },
   "dependencies": {
     "@azure/core-asynciterator-polyfill": "^1.0.2",
+    "@bacons/text-decoder": "0.0.0",
     "@bam.tech/react-native-image-resizer": "^3.0.11",
+    "@craftzdog/react-native-buffer": "6.0.5",
     "@clerk/clerk-expo": "^2.2.21",
     "@expo/vector-icons": "^14.0.2",
     "@op-engineering/op-sqlite": "^11.2.12",
     "@react-native-community/netinfo": "^11.4.1",
     "@react-navigation/native": "^7.0.13",
     "@react-navigation/native-stack": "^7.1.14",
-    "base-64": "^1.0.0",
-    "buffer": "^6.0.3",
     "clsx": "^2.0.0",
     "expo": "^52.0.0",
     "expo-build-properties": "~0.13.1",
@@ -51,18 +50,14 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-native": "~0.76.3",
-    "react-native-fetch-api": "^3.0.0",
     "react-native-gesture-handler": "~2.20.2",
     "react-native-get-random-values": "^1.11.0",
-    "react-native-polyfill-globals": "^3.1.0",
-    "react-native-quick-base64": "^2.1.2",
     "react-native-reanimated": "~3.16.3",
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "4.1.0",
     "react-native-url-polyfill": "^2.0.0",
     "react-native-web": "~0.19.13",
-    "text-encoding": "^0.7.0",
-    "web-streams-polyfill": "^3.2.1"
+    "readable-stream": "4.7.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

examples/chat-rn-clerk/polyfills.js

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

examples/chat-rn/CHANGELOG.md

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

examples/chat-rn/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-rn",
-  "version": "1.0.63",
+  "version": "1.0.79",
   "main": "index.js",
   "scripts": {
     "build": "expo export -p ios",
@@ -13,17 +13,17 @@
   },
   "dependencies": {
     "@azure/core-asynciterator-polyfill": "^1.0.2",
+    "@bacons/text-decoder": "0.0.0",
+    "@craftzdog/react-native-buffer": "6.0.5",
     "@op-engineering/op-sqlite": "^11.2.12",
     "@react-native-community/netinfo": "^11.4.1",
     "@react-navigation/native": "^7.0.13",
     "@react-navigation/native-stack": "^7.1.14",
-    "base-64": "^1.0.0",
     "clsx": "^2.0.0",
     "expo": "^52.0.0",
     "expo-build-properties": "~0.13.1",
     "expo-clipboard": "~7.0.0",
     "expo-constants": "~17.0.3",
-    "expo-crypto": "~14.0.1",
     "expo-dev-client": "~5.0.5",
     "expo-linking": "~7.0.3",
     "expo-secure-store": "~14.0.0",
@@ -34,14 +34,11 @@
     "nativewind": "^4.1.21",
     "react": "^18.3.1",
     "react-native": "~0.76.3",
-    "react-native-fetch-api": "^3.0.0",
     "react-native-get-random-values": "^1.11.0",
-    "react-native-polyfill-globals": "^3.1.0",
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "4.1.0",
     "react-native-url-polyfill": "^2.0.0",
-    "text-encoding": "^0.7.0",
-    "web-streams-polyfill": "^3.2.1"
+    "readable-stream": "4.7.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

examples/chat-rn/polyfills.js

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

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

@@ -44,4 +44,5 @@ appId: com.jazz.chatrn
 
 # logout
 - tapOn: "Logout"
-- assertVisible: "Anonymous user"
+- assertVisible: "boorad"
+- assertVisible: "bro, low key, it do be like that tho"

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

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

examples/chat-vue/CHANGELOG.md

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

examples/chat-vue/package.json

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

examples/chat/CHANGELOG.md

@@ -1,5 +1,142 @@
 # jazz-example-chat
 
+## 0.0.161
+
+### Patch Changes
+
+- Updated dependencies [6892dc6]
+  - jazz-tools@0.11.2
+  - jazz-react@0.11.2
+  - jazz-browser-media-images@0.11.2
+
+## 0.0.160
+
+### Patch Changes
+
+- jazz-react@0.11.1
+
+## 0.0.159
+
+### Patch Changes
+
+- Updated dependencies [6a96d8b]
+- Updated dependencies [a35249a]
+- Updated dependencies [b9d194a]
+- Updated dependencies [a4713df]
+- Updated dependencies [34cbdc3]
+- Updated dependencies [f039e8f]
+- Updated dependencies [e22de9f]
+  - jazz-tools@0.11.0
+  - jazz-browser-media-images@0.11.0
+  - jazz-react@0.11.0
+
+## 0.0.158
+
+### Patch Changes
+
+- Updated dependencies [2f99de0]
+  - jazz-tools@0.10.15
+  - jazz-browser-media-images@0.10.15
+  - jazz-react@0.10.15
+
+## 0.0.157
+
+### Patch Changes
+
+- Updated dependencies [75211e3]
+  - jazz-tools@0.10.14
+  - jazz-react@0.10.14
+  - jazz-browser-media-images@0.10.14
+
+## 0.0.156
+
+### Patch Changes
+
+- Updated dependencies [07feedd]
+  - jazz-tools@0.10.13
+  - jazz-browser-media-images@0.10.13
+  - jazz-react@0.10.13
+
+## 0.0.155
+
+### Patch Changes
+
+- Updated dependencies [4612e05]
+  - jazz-tools@0.10.12
+  - jazz-react@0.10.12
+  - jazz-browser-media-images@0.10.12
+
+## 0.0.154
+
+### Patch Changes
+
+- jazz-browser-media-images@0.10.9
+- jazz-react@0.10.9
+
+## 0.0.153
+
+### Patch Changes
+
+- Updated dependencies [2fb6428]
+  - jazz-tools@0.10.8
+  - jazz-react@0.10.8
+  - jazz-browser-media-images@0.10.8
+
+## 0.0.152
+
+### Patch Changes
+
+- Updated dependencies [1136d9b]
+- Updated dependencies [0eed228]
+  - jazz-react@0.10.7
+  - jazz-tools@0.10.7
+  - jazz-browser-media-images@0.10.7
+
+## 0.0.151
+
+### Patch Changes
+
+- Updated dependencies [1d71ca1]
+- Updated dependencies [ada802b]
+  - hash-slash@0.2.2
+  - jazz-react@0.10.6
+  - jazz-tools@0.10.6
+  - jazz-browser-media-images@0.10.6
+
+## 0.0.150
+
+### Patch Changes
+
+- Updated dependencies [59ff77e]
+  - jazz-tools@0.10.5
+  - jazz-browser-media-images@0.10.5
+  - jazz-react@0.10.5
+
+## 0.0.149
+
+### Patch Changes
+
+- jazz-react@0.10.4
+- jazz-tools@0.10.4
+- jazz-browser-media-images@0.10.4
+
+## 0.0.148
+
+### Patch Changes
+
+- Updated dependencies [d8582fc]
+  - jazz-tools@0.10.3
+  - jazz-browser-media-images@0.10.3
+  - jazz-react@0.10.3
+
+## 0.0.147
+
+### Patch Changes
+
+- jazz-react@0.10.2
+- jazz-tools@0.10.2
+- jazz-browser-media-images@0.10.2
+
 ## 0.0.146
 
 ### Patch Changes

examples/chat/package.json

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

examples/clerk/CHANGELOG.md

@@ -1,5 +1,142 @@
 # minimal-auth-clerk
 
+## 0.0.60
+
+### Patch Changes
+
+- Updated dependencies [6892dc6]
+  - jazz-tools@0.11.2
+  - jazz-react@0.11.2
+  - jazz-react-auth-clerk@0.11.2
+
+## 0.0.59
+
+### Patch Changes
+
+- jazz-react@0.11.1
+- jazz-react-auth-clerk@0.11.1
+
+## 0.0.58
+
+### Patch Changes
+
+- Updated dependencies [6a96d8b]
+- Updated dependencies [a35249a]
+- Updated dependencies [b9d194a]
+- Updated dependencies [a4713df]
+- Updated dependencies [34cbdc3]
+- Updated dependencies [f039e8f]
+- Updated dependencies [e22de9f]
+  - jazz-tools@0.11.0
+  - jazz-react-auth-clerk@0.11.0
+  - jazz-react@0.11.0
+
+## 0.0.57
+
+### Patch Changes
+
+- Updated dependencies [2f99de0]
+  - jazz-tools@0.10.15
+  - jazz-react@0.10.15
+  - jazz-react-auth-clerk@0.10.15
+
+## 0.0.56
+
+### Patch Changes
+
+- Updated dependencies [75211e3]
+  - jazz-tools@0.10.14
+  - jazz-react@0.10.14
+  - jazz-react-auth-clerk@0.10.14
+
+## 0.0.55
+
+### Patch Changes
+
+- Updated dependencies [07feedd]
+  - jazz-tools@0.10.13
+  - jazz-react@0.10.13
+  - jazz-react-auth-clerk@0.10.13
+
+## 0.0.54
+
+### Patch Changes
+
+- Updated dependencies [4612e05]
+  - jazz-tools@0.10.12
+  - jazz-react@0.10.12
+  - jazz-react-auth-clerk@0.10.12
+
+## 0.0.53
+
+### Patch Changes
+
+- jazz-react@0.10.9
+- jazz-react-auth-clerk@0.10.9
+
+## 0.0.52
+
+### Patch Changes
+
+- Updated dependencies [2fb6428]
+  - jazz-tools@0.10.8
+  - jazz-react@0.10.8
+  - jazz-react-auth-clerk@0.10.8
+
+## 0.0.51
+
+### Patch Changes
+
+- Updated dependencies [1136d9b]
+- Updated dependencies [0eed228]
+  - jazz-react-auth-clerk@0.10.7
+  - jazz-react@0.10.7
+  - jazz-tools@0.10.7
+
+## 0.0.50
+
+### Patch Changes
+
+- Updated dependencies [1d71ca1]
+- Updated dependencies [ada802b]
+  - jazz-react-auth-clerk@0.10.6
+  - jazz-react@0.10.6
+  - jazz-tools@0.10.6
+
+## 0.0.49
+
+### Patch Changes
+
+- Updated dependencies [59ff77e]
+  - jazz-tools@0.10.5
+  - jazz-react@0.10.5
+  - jazz-react-auth-clerk@0.10.5
+
+## 0.0.48
+
+### Patch Changes
+
+- jazz-react@0.10.4
+- jazz-react-auth-clerk@0.10.4
+- jazz-tools@0.10.4
+
+## 0.0.47
+
+### Patch Changes
+
+- Updated dependencies [d8582fc]
+  - jazz-tools@0.10.3
+  - jazz-react@0.10.3
+  - jazz-react-auth-clerk@0.10.3
+
+## 0.0.46
+
+### Patch Changes
+
+- jazz-react@0.10.2
+- jazz-react-auth-clerk@0.10.2
+- jazz-tools@0.10.2
+
 ## 0.0.45
 
 ### Patch Changes

examples/clerk/package.json

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

examples/file-share-svelte/CHANGELOG.md

@@ -1,5 +1,120 @@
 # file-share-svelte
 
+## 0.0.44
+
+### Patch Changes
+
+- Updated dependencies [6892dc6]
+  - jazz-tools@0.11.2
+  - jazz-svelte@0.11.2
+
+## 0.0.43
+
+### Patch Changes
+
+- Updated dependencies [6a96d8b]
+- Updated dependencies [a35249a]
+- Updated dependencies [b9d194a]
+- Updated dependencies [a4713df]
+- Updated dependencies [34cbdc3]
+- Updated dependencies [f039e8f]
+- Updated dependencies [e22de9f]
+  - jazz-tools@0.11.0
+  - jazz-svelte@0.11.0
+
+## 0.0.42
+
+### Patch Changes
+
+- Updated dependencies [2f99de0]
+  - jazz-tools@0.10.15
+  - jazz-svelte@0.10.15
+
+## 0.0.41
+
+### Patch Changes
+
+- Updated dependencies [75211e3]
+  - jazz-tools@0.10.14
+  - jazz-svelte@0.10.14
+
+## 0.0.40
+
+### Patch Changes
+
+- Updated dependencies [07feedd]
+  - jazz-tools@0.10.13
+  - jazz-svelte@0.10.13
+
+## 0.0.39
+
+### Patch Changes
+
+- Updated dependencies [4612e05]
+  - jazz-svelte@0.10.12
+  - jazz-tools@0.10.12
+
+## 0.0.38
+
+### Patch Changes
+
+- jazz-svelte@0.10.9
+
+## 0.0.37
+
+### Patch Changes
+
+- Updated dependencies [2fb6428]
+  - jazz-tools@0.10.8
+  - jazz-svelte@0.10.8
+
+## 0.0.36
+
+### Patch Changes
+
+- Updated dependencies [1136d9b]
+- Updated dependencies [0eed228]
+  - jazz-svelte@0.10.7
+  - jazz-tools@0.10.7
+
+## 0.0.35
+
+### Patch Changes
+
+- Updated dependencies [ada802b]
+  - jazz-tools@0.10.6
+  - jazz-svelte@0.10.6
+
+## 0.0.34
+
+### Patch Changes
+
+- Updated dependencies [59ff77e]
+  - jazz-tools@0.10.5
+  - jazz-svelte@0.10.5
+
+## 0.0.33
+
+### Patch Changes
+
+- jazz-svelte@0.10.4
+- jazz-tools@0.10.4
+
+## 0.0.32
+
+### Patch Changes
+
+- Updated dependencies [d8582fc]
+  - jazz-tools@0.10.3
+  - jazz-svelte@0.10.3
+
+## 0.0.31
+
+### Patch Changes
+
+- jazz-svelte@0.10.2
+- jazz-tools@0.10.2
+
 ## 0.0.30
 
 ### Patch Changes

examples/file-share-svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "file-share-svelte",
-  "version": "0.0.30",
+  "version": "0.0.44",
   "private": true,
   "type": "module",
   "scripts": {
@@ -13,8 +13,8 @@
     "lint": "prettier --check . && eslint .",
     "format-and-lint": "pnpm run format && pnpm run lint",
     "format-and-lint:fix": "pnpm run format --write && pnpm run lint --fix",
-    "test": "playwright test",
-    "test:ui": "playwright test --ui"
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui"
   },
   "devDependencies": {
     "@sveltejs/adapter-vercel": "^5.5.0",

examples/form/CHANGELOG.md

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

examples/form/package.json

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

examples/form/src/App.tsx

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

examples/form/tsconfig.tsbuildinfo

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

examples/image-upload/CHANGELOG.md

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

examples/image-upload/package.json

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

examples/image-upload/src/App.tsx

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

examples/image-upload/src/ImageUpload.tsx

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

examples/image-upload/src/index.css

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

examples/inspector/CHANGELOG.md

@@ -1,5 +1,68 @@
 # jazz-example-inspector
 
+## 0.0.111
+
+### Patch Changes
+
+- Updated dependencies [b9d194a]
+- Updated dependencies [a4713df]
+- Updated dependencies [e22de9f]
+- Updated dependencies [34cbdc3]
+- Updated dependencies [0f67e0a]
+  - cojson@0.11.0
+  - cojson-transport-ws@0.11.0
+
+## 0.0.110
+
+### Patch Changes
+
+- Updated dependencies [f86e278]
+  - cojson@0.10.15
+  - cojson-transport-ws@0.10.15
+
+## 0.0.109
+
+### Patch Changes
+
+- Updated dependencies [153dc99]
+  - cojson@0.10.8
+  - cojson-transport-ws@0.10.8
+
+## 0.0.108
+
+### Patch Changes
+
+- Updated dependencies [0f83320]
+- Updated dependencies [012022d]
+  - cojson@0.10.7
+  - cojson-transport-ws@0.10.7
+
+## 0.0.107
+
+### Patch Changes
+
+- Updated dependencies [1d71ca1]
+- Updated dependencies [5c76e37]
+  - hash-slash@0.2.2
+  - cojson@0.10.6
+  - cojson-transport-ws@0.10.6
+
+## 0.0.106
+
+### Patch Changes
+
+- Updated dependencies [1af6072]
+  - cojson@0.10.4
+  - cojson-transport-ws@0.10.4
+
+## 0.0.105
+
+### Patch Changes
+
+- Updated dependencies [cae3a9e]
+  - cojson@0.10.2
+  - cojson-transport-ws@0.10.2
+
 ## 0.0.104
 
 ### Patch Changes

examples/inspector/package.json

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

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

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

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

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

examples/multiauth/.env

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

examples/multiauth/.gitignore

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

examples/multiauth/CHANGELOG.md

@@ -0,0 +1,10 @@
+# multiauth
+
+## 0.0.1
+
+### Patch Changes
+
+- Updated dependencies [6892dc6]
+  - jazz-tools@0.11.2
+  - jazz-react@0.11.2
+  - jazz-react-auth-clerk@0.11.2

examples/multiauth/README.md

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

examples/multiauth/eslint.config.js

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

examples/multiauth/index.html

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

examples/multiauth/package.json

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

examples/multiauth/src/App.css

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

examples/multiauth/src/App.tsx

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

examples/multiauth/src/apiKey.ts

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

examples/multiauth/src/components/Home.tsx

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

examples/multiauth/src/components/OmniAuth.tsx

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

examples/multiauth/src/index.css

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

examples/multiauth/src/main.tsx

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

examples/music-player/CHANGELOG.md

@@ -1,5 +1,143 @@
 # jazz-example-musicplayer
 
+## 0.0.82
+
+### Patch Changes
+
+- Updated dependencies [6892dc6]
+  - jazz-tools@0.11.2
+  - jazz-inspector@0.11.2
+  - jazz-react@0.11.2
+
+## 0.0.81
+
+### Patch Changes
+
+- Updated dependencies [7b00a81]
+  - jazz-inspector@0.11.1
+  - jazz-react@0.11.1
+
+## 0.0.80
+
+### Patch Changes
+
+- Updated dependencies [6a96d8b]
+- Updated dependencies [a35249a]
+- Updated dependencies [b9d194a]
+- Updated dependencies [a4713df]
+- Updated dependencies [34cbdc3]
+- Updated dependencies [b7deb3c]
+- Updated dependencies [f039e8f]
+- Updated dependencies [e22de9f]
+  - jazz-tools@0.11.0
+  - jazz-react@0.11.0
+  - jazz-inspector@0.10.13
+
+## 0.0.79
+
+### Patch Changes
+
+- Updated dependencies [2f99de0]
+  - jazz-tools@0.10.15
+  - jazz-inspector@0.10.12
+  - jazz-react@0.10.15
+
+## 0.0.78
+
+### Patch Changes
+
+- Updated dependencies [75211e3]
+  - jazz-tools@0.10.14
+  - jazz-inspector@0.10.11
+  - jazz-react@0.10.14
+
+## 0.0.77
+
+### Patch Changes
+
+- Updated dependencies [07feedd]
+  - jazz-tools@0.10.13
+  - jazz-inspector@0.10.10
+  - jazz-react@0.10.13
+
+## 0.0.76
+
+### Patch Changes
+
+- Updated dependencies [4612e05]
+  - jazz-tools@0.10.12
+  - jazz-inspector@0.10.9
+  - jazz-react@0.10.12
+
+## 0.0.75
+
+### Patch Changes
+
+- jazz-react@0.10.9
+
+## 0.0.74
+
+### Patch Changes
+
+- Updated dependencies [2fb6428]
+  - jazz-tools@0.10.8
+  - jazz-inspector@0.10.8
+  - jazz-react@0.10.8
+
+## 0.0.73
+
+### Patch Changes
+
+- Updated dependencies [1136d9b]
+- Updated dependencies [0eed228]
+  - jazz-react@0.10.7
+  - jazz-tools@0.10.7
+  - jazz-inspector@0.10.7
+
+## 0.0.72
+
+### Patch Changes
+
+- Updated dependencies [1d71ca1]
+- Updated dependencies [ada802b]
+  - jazz-react@0.10.6
+  - jazz-tools@0.10.6
+  - jazz-inspector@0.10.6
+
+## 0.0.71
+
+### Patch Changes
+
+- Updated dependencies [59ff77e]
+  - jazz-tools@0.10.5
+  - jazz-inspector@0.10.5
+  - jazz-react@0.10.5
+
+## 0.0.70
+
+### Patch Changes
+
+- jazz-inspector@0.10.4
+- jazz-react@0.10.4
+- jazz-tools@0.10.4
+
+## 0.0.69
+
+### Patch Changes
+
+- Updated dependencies [d8582fc]
+  - jazz-tools@0.10.3
+  - jazz-inspector@0.10.3
+  - jazz-react@0.10.3
+
+## 0.0.68
+
+### Patch Changes
+
+- jazz-inspector@0.10.2
+- jazz-react@0.10.2
+- jazz-tools@0.10.2
+
 ## 0.0.67
 
 ### Patch Changes

examples/music-player/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-music-player",
   "private": true,
-  "version": "0.0.67",
+  "version": "0.0.82",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -9,8 +9,8 @@
     "format-and-lint": "biome check .",
     "format-and-lint:fix": "biome check . --write",
     "preview": "vite preview",
-    "test": "playwright test",
-    "test:ui": "playwright test --ui"
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui"
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.4",
@@ -22,8 +22,8 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "jazz-inspector": "workspace:*",
-    "jazz-react": "workspace:0.10.1",
-    "jazz-tools": "workspace:0.10.1",
+    "jazz-react": "workspace:0.11.2",
+    "jazz-tools": "workspace:0.11.2",
     "lucide-react": "^0.274.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

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

@@ -112,34 +112,31 @@ export async function addTrackToPlaylist(
     playlist.tracks?.push(track);
     return;
   }
+}
 
-  /**
-   * Since musicTracks are created as private values (see uploadMusicTracks)
-   * to make them shareable as part of the playlist we are cloning them
-   * and setting the playlist group as owner of the clone
-   *
-   * Doing this for backwards compatibility for when the Group inheritance wasn't possible
-   */
-  const blob = await FileStream.loadAsBlob(track._refs.file.id);
-  const waveform = await MusicTrackWaveform.load(track._refs.waveform.id, {});
-
-  if (!blob || !waveform) return;
-
-  const trackClone = MusicTrack.create(
-    {
-      file: await FileStream.createFromBlob(blob, playlist._owner),
-      duration: track.duration,
-      waveform: MusicTrackWaveform.create(
-        { data: waveform.data },
-        playlist._owner,
-      ),
-      title: track.title,
-      sourceTrack: track,
-    },
-    playlist._owner,
+export async function removeTrackFromPlaylist(
+  playlist: Playlist,
+  track: MusicTrack,
+) {
+  const notAdded = !playlist.tracks?.some(
+    (t) => t?.id === track.id || t?._refs.sourceTrack?.id === track.id,
   );
 
-  playlist.tracks?.push(trackClone);
+  if (notAdded) return;
+
+  if (track._owner._type === "Group" && playlist._owner._type === "Group") {
+    const trackGroup = track._owner;
+    await trackGroup.revokeExtend(playlist._owner);
+
+    const index =
+      playlist.tracks?.findIndex(
+        (t) => t?.id === track.id || t?._refs.sourceTrack?.id === track.id,
+      ) ?? -1;
+    if (index > -1) {
+      playlist.tracks?.splice(index, 1);
+    }
+    return;
+  }
 }
 
 export async function updatePlaylistTitle(playlist: Playlist, title: string) {

examples/music-player/src/6_InvitePage.tsx

@@ -1,4 +1,4 @@
-import { useAcceptInvite } from "jazz-react";
+import { useAcceptInvite, useIsAuthenticated } from "jazz-react";
 import { ID } from "jazz-tools";
 import { useCallback } from "react";
 import { useNavigate } from "react-router-dom";
@@ -7,6 +7,8 @@ import { MusicaAccount, Playlist } from "./1_schema";
 export function InvitePage() {
   const navigate = useNavigate();
 
+  const isAuthenticated = useIsAuthenticated();
+
   useAcceptInvite({
     invitedObjectSchema: Playlist,
     onAccept: useCallback(
@@ -32,5 +34,9 @@ export function InvitePage() {
     ),
   });
 
-  return <p>Accepting invite....</p>;
+  return isAuthenticated ? (
+    <p>Accepting invite....</p>
+  ) : (
+    <p>Please sign in to accept the invite.</p>
+  );
 }

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

@@ -1,5 +1,5 @@
 import { MusicTrack, Playlist } from "@/1_schema";
-import { addTrackToPlaylist } from "@/4_actions";
+import { addTrackToPlaylist, removeTrackFromPlaylist } from "@/4_actions";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -10,6 +10,7 @@ import { cn } from "@/lib/utils";
 import { useAccount, useCoState } from "jazz-react";
 import { ID } from "jazz-tools";
 import { MoreHorizontal } from "lucide-react";
+import { Fragment } from "react/jsx-runtime";
 import { MusicTrackTitleInput } from "./MusicTrackTitleInput";
 import { Button } from "./ui/button";
 
@@ -46,6 +47,11 @@ export function MusicTrackRow({
     addTrackToPlaylist(playlist, track);
   }
 
+  function handleRemoveFromPlaylist(playlist: Playlist) {
+    if (!track) return;
+    removeTrackFromPlaylist(playlist, track);
+  }
+
   return (
     <li
       className={
@@ -85,12 +91,20 @@ export function MusicTrackRow({
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
               {playlists.map((playlist, index) => (
-                <DropdownMenuItem
-                  key={index}
-                  onSelect={() => handleAddToPlaylist(playlist)}
-                >
-                  Add to {playlist.title}
-                </DropdownMenuItem>
+                <Fragment key={index}>
+                  <DropdownMenuItem
+                    key={`add-${index}`}
+                    onSelect={() => handleAddToPlaylist(playlist)}
+                  >
+                    Add to {playlist.title}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    key={`remove-${index}`}
+                    onSelect={() => handleRemoveFromPlaylist(playlist)}
+                  >
+                    Remove from {playlist.title}
+                  </DropdownMenuItem>
+                </Fragment>
               ))}
             </DropdownMenuContent>
           </DropdownMenu>

examples/music-player/tests/createAndShare.spec.ts

@@ -82,3 +82,47 @@ test("create a new playlist and share", async ({
   await luigiHome.playMusicTrack("Super Mario World");
   await luigiHome.expectActiveTrackPlaying();
 });
+
+test("create a new playlist, share, then remove track", async ({
+  page: marioPage,
+  browser,
+}) => {
+  // Create playlist with a song and share
+  await marioPage.goto("/");
+  const marioHome = new HomePage(marioPage);
+  await marioHome.expectMusicTrack("Example song");
+  await marioHome.editTrackTitle("Example song", "Super Mario World");
+  await marioHome.createPlaylist();
+  await marioHome.editPlaylistTitle("Save the princess");
+  await marioHome.navigateToPlaylist("All tracks");
+  await marioHome.addTrackToPlaylist("Super Mario World", "Save the princess");
+  await marioHome.navigateToPlaylist("Save the princess");
+  await marioHome.expectMusicTrack("Super Mario World");
+  await marioHome.signUp("Mario");
+  const url = await marioHome.getShareLink();
+
+  await sleep(4000); // Wait for the sync to complete
+
+  // Retrieve shared playlist
+  const luigiContext = await browser.newContext();
+  await mockAuthenticator(luigiContext);
+  const luigiPage = await luigiContext.newPage();
+  await luigiPage.goto("/");
+  const luigiHome = new HomePage(luigiPage);
+  await luigiHome.signUp("Luigi");
+  await luigiPage.goto(url);
+  await luigiHome.expectMusicTrack("Super Mario World");
+
+  // Remove track from playlist
+  await marioHome.navigateToHome();
+  await marioHome.removeTrackFromPlaylist(
+    "Super Mario World",
+    "Save the princess",
+  );
+  await sleep(4000); // Wait for the sync to complete
+
+  // Expect that the track is removed from the playlist
+  await marioHome.navigateToPlaylist("Save the princess");
+  await marioHome.notExpectMusicTrack("Super Mario World");
+  await luigiHome.notExpectMusicTrack("Super Mario World");
+});

examples/music-player/tests/pages/HomePage.ts

@@ -33,6 +33,14 @@ export class HomePage {
     ).toBeVisible();
   }
 
+  async notExpectMusicTrack(trackName: string) {
+    await expect(
+      this.page.getByRole("button", {
+        name: `Play ${trackName}`,
+      }),
+    ).not.toBeVisible();
+  }
+
   async playMusicTrack(trackName: string) {
     await this.page
       .getByRole("button", {
@@ -65,6 +73,14 @@ export class HomePage {
       .click();
   }
 
+  async navigateToHome() {
+    await this.page
+      .getByRole("link", {
+        name: "All tracks",
+      })
+      .click();
+  }
+
   async getShareLink() {
     await this.page
       .getByRole("button", {
@@ -95,6 +111,20 @@ export class HomePage {
       .click();
   }
 
+  async removeTrackFromPlaylist(trackTitle: string, playlistTitle: string) {
+    await this.page
+      .getByRole("button", {
+        name: `Open ${trackTitle} menu`,
+      })
+      .click();
+
+    await this.page
+      .getByRole("menuitem", {
+        name: `Remove from ${playlistTitle}`,
+      })
+      .click();
+  }
+
   async signUp(name: string) {
     await this.page.getByRole("button", { name: "Sign up" }).click();
     await this.page.getByRole("textbox", { name: "Username" }).fill(name);

examples/onboarding/CHANGELOG.md

@@ -1,395 +0,0 @@
-# jazz-example-onboarding
-
-## 0.0.47
-
-### Patch Changes
-
-- Updated dependencies [5a63cba]
-  - jazz-tools@0.10.1
-  - jazz-browser-media-images@0.10.1
-  - jazz-react@0.10.1
-
-## 0.0.46
-
-### Patch Changes
-
-- Updated dependencies [498954f]
-- Updated dependencies [d42c2aa]
-- Updated dependencies [dd03464]
-- Updated dependencies [b426342]
-  - jazz-react@0.10.0
-  - jazz-tools@0.10.0
-  - jazz-browser-media-images@0.10.0
-
-## 0.0.45
-
-### Patch Changes
-
-- jazz-react@0.9.23
-- jazz-tools@0.9.23
-- jazz-browser-media-images@0.9.23
-
-## 0.0.44
-
-### Patch Changes
-
-- jazz-browser-media-images@0.9.22
-- jazz-react@0.9.22
-
-## 0.0.43
-
-### Patch Changes
-
-- Updated dependencies [1be017d]
-  - jazz-tools@0.9.21
-  - jazz-browser-media-images@0.9.21
-  - jazz-react@0.9.21
-
-## 0.0.42
-
-### Patch Changes
-
-- Updated dependencies [b01cc1f]
-  - jazz-tools@0.9.20
-  - jazz-browser-media-images@0.9.20
-  - jazz-react@0.9.20
-
-## 0.0.41
-
-### Patch Changes
-
-- jazz-react@0.9.19
-- jazz-tools@0.9.19
-- jazz-browser-media-images@0.9.19
-
-## 0.0.40
-
-### Patch Changes
-
-- jazz-react@0.9.18
-- jazz-tools@0.9.18
-- jazz-browser-media-images@0.9.18
-
-## 0.0.39
-
-### Patch Changes
-
-- Updated dependencies [c2ca1fe]
-- Updated dependencies [1227047]
-  - jazz-tools@0.9.17
-  - jazz-browser-media-images@0.9.17
-  - jazz-react@0.9.17
-
-## 0.0.38
-
-### Patch Changes
-
-- Updated dependencies [24b3b6a]
-  - jazz-tools@0.9.16
-  - jazz-browser-media-images@0.9.16
-  - jazz-react@0.9.16
-
-## 0.0.37
-
-### Patch Changes
-
-- Updated dependencies [7491711]
-  - jazz-tools@0.9.15
-  - jazz-browser-media-images@0.9.15
-  - jazz-react@0.9.15
-
-## 0.0.36
-
-### Patch Changes
-
-- Updated dependencies [3df93cc]
-  - jazz-tools@0.9.14
-  - jazz-browser-media-images@0.9.14
-  - jazz-react@0.9.14
-
-## 0.0.35
-
-### Patch Changes
-
-- jazz-react@0.9.13
-- jazz-tools@0.9.13
-- jazz-browser-media-images@0.9.13
-
-## 0.0.34
-
-### Patch Changes
-
-- jazz-react@0.9.12
-- jazz-tools@0.9.12
-- jazz-browser-media-images@0.9.12
-
-## 0.0.33
-
-### Patch Changes
-
-- jazz-react@0.9.11
-- jazz-tools@0.9.11
-- jazz-browser-media-images@0.9.11
-
-## 0.0.32
-
-### Patch Changes
-
-- Updated dependencies [5e83864]
-  - jazz-react@0.9.10
-  - jazz-tools@0.9.10
-  - jazz-browser-media-images@0.9.10
-
-## 0.0.31
-
-### Patch Changes
-
-- Updated dependencies [8eb9247]
-  - jazz-tools@0.9.9
-  - jazz-browser-media-images@0.9.9
-  - jazz-react@0.9.9
-
-## 0.0.30
-
-### Patch Changes
-
-- Updated dependencies [d1d773b]
-  - jazz-tools@0.9.8
-  - jazz-react@0.9.8
-  - jazz-browser-media-images@0.9.8
-
-## 0.0.29
-
-### Patch Changes
-
-- jazz-react@0.9.4
-
-## 0.0.28
-
-### Patch Changes
-
-- Updated dependencies [1b71969]
-  - jazz-react@0.9.1
-  - jazz-tools@0.9.1
-  - jazz-browser-media-images@0.9.1
-
-## 0.0.27
-
-### Patch Changes
-
-- Updated dependencies [956a4d1]
-- Updated dependencies [8eda792]
-  - jazz-react@0.9.0
-  - jazz-tools@0.9.0
-  - jazz-browser-media-images@0.9.0
-
-## 0.0.26
-
-### Patch Changes
-
-- Updated dependencies [dc62b95]
-- Updated dependencies [1de26f8]
-  - jazz-tools@0.8.51
-  - jazz-browser-media-images@0.8.51
-  - jazz-react@0.8.51
-
-## 0.0.25
-
-### Patch Changes
-
-- jazz-react@0.8.50
-- jazz-tools@0.8.50
-- jazz-browser-media-images@0.8.50
-
-## 0.0.24
-
-### Patch Changes
-
-- jazz-react@0.8.49
-- jazz-tools@0.8.49
-- jazz-browser-media-images@0.8.49
-
-## 0.0.23
-
-### Patch Changes
-
-- Updated dependencies [635e824]
-- Updated dependencies [0a85982]
-  - jazz-tools@0.8.48
-  - jazz-browser-media-images@0.8.48
-  - jazz-react@0.8.48
-
-## 0.0.22
-
-### Patch Changes
-
-- Updated dependencies [fa41f8e]
-- Updated dependencies [88d7d9a]
-- Updated dependencies [60e35ea]
-  - jazz-tools@0.8.45
-  - jazz-react@0.8.45
-  - jazz-browser-media-images@0.8.45
-
-## 0.0.21
-
-### Patch Changes
-
-- jazz-react@0.8.44
-- jazz-tools@0.8.44
-- jazz-browser-media-images@0.8.44
-
-## 0.0.20
-
-### Patch Changes
-
-- jazz-react@0.8.41
-- jazz-tools@0.8.41
-- jazz-browser-media-images@0.8.41
-
-## 0.0.19
-
-### Patch Changes
-
-- jazz-browser-media-images@0.8.40
-- jazz-react@0.8.40
-
-## 0.0.18
-
-### Patch Changes
-
-- Updated dependencies [249eecb]
-  - jazz-tools@0.8.39
-  - jazz-browser-media-images@0.8.39
-  - jazz-react@0.8.39
-
-## 0.0.17
-
-### Patch Changes
-
-- jazz-react@0.8.38
-- jazz-tools@0.8.38
-- jazz-browser-media-images@0.8.38
-
-## 0.0.16
-
-### Patch Changes
-
-- jazz-react@0.8.37
-- jazz-tools@0.8.37
-- jazz-browser-media-images@0.8.37
-
-## 0.0.15
-
-### Patch Changes
-
-- Updated dependencies [441fe27]
-  - jazz-tools@0.8.36
-  - jazz-react@0.8.36
-  - jazz-browser-media-images@0.8.36
-
-## 0.0.14
-
-### Patch Changes
-
-- Updated dependencies [9212ab8]
-- Updated dependencies [8b87117]
-  - jazz-react@0.8.35
-  - jazz-tools@0.8.35
-  - jazz-browser-media-images@0.8.35
-
-## 0.0.13
-
-### Patch Changes
-
-- jazz-react@0.8.34
-- jazz-tools@0.8.34
-- jazz-browser-media-images@0.8.34
-
-## 0.0.12
-
-### Patch Changes
-
-- jazz-browser-media-images@0.8.33
-- jazz-react@0.8.33
-
-## 0.0.11
-
-### Patch Changes
-
-- Updated dependencies [df42b2b]
-  - jazz-tools@0.8.32
-  - jazz-react@0.8.32
-  - jazz-browser-media-images@0.8.32
-
-## 0.0.10
-
-### Patch Changes
-
-- jazz-react@0.8.31
-- jazz-tools@0.8.31
-- jazz-browser-media-images@0.8.31
-
-## 0.0.9
-
-### Patch Changes
-
-- jazz-react@0.8.30
-- jazz-tools@0.8.30
-- jazz-browser-media-images@0.8.30
-
-## 0.0.8
-
-### Patch Changes
-
-- jazz-react@0.8.29
-- jazz-tools@0.8.29
-- jazz-browser-media-images@0.8.29
-
-## 0.0.7
-
-### Patch Changes
-
-- jazz-react@0.8.28
-- jazz-tools@0.8.28
-- jazz-browser-media-images@0.8.28
-
-## 0.0.6
-
-### Patch Changes
-
-- jazz-react@0.8.27
-- jazz-tools@0.8.27
-- jazz-browser-media-images@0.8.27
-
-## 0.0.5
-
-### Patch Changes
-
-- Updated dependencies [59d37df]
-  - jazz-react@0.8.26
-
-## 0.0.4
-
-### Patch Changes
-
-- jazz-browser-media-images@0.8.24
-- jazz-react@0.8.24
-
-## 0.0.3
-
-### Patch Changes
-
-- Updated dependencies [d348c2d]
-- Updated dependencies [6902b5b]
-- Updated dependencies [1a0cd3d]
-  - jazz-tools@0.8.23
-  - jazz-react@0.8.23
-  - jazz-browser-media-images@0.8.23
-
-## 0.0.2
-
-### Patch Changes
-
-- Updated dependencies [59cc64d]
-  - jazz-react@0.8.22
-  - jazz-browser-media-images@0.8.22

examples/onboarding/Dockerfile

@@ -1,4 +0,0 @@
-FROM caddy:2.7.3-alpine
-LABEL org.opencontainers.image.source="https://github.com/garden-co/jazz"
-
-COPY ./dist /usr/share/caddy/

examples/onboarding/README.md

@@ -1,60 +0,0 @@
-# Onboarding example with Jazz and React
-
-## Getting started
-
-You can either
-1. Clone the jazz repository, and run the app within the monorepo.
-2. Or create a new Jazz project using this example as a template.
-
-
-### Using the example as a template
-
-Create a new Jazz project, and use this example as a template.
-```bash
-npx create-jazz-app@latest --example onboarding --project-name onboarding
-```
-
-Go to the new project directory.
-```bash
-cd onboarding
-```
-
-Run the dev server.
-```bash
-npm run dev
-```
-
-### Using the monorepo
-
-This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation).
-
-Clone the jazz repository.
-```bash
-git clone https://github.com/garden-co/jazz.git
-```
-
-Install and build dependencies.
-```bash
-pnpm i && npx turbo build
-```
-
-Go to the example directory.
-```bash
-cd jazz/examples/onboarding/
-```
-
-Start the dev server.
-```bash
-pnpm dev
-```
-
-Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
-## Questions / problems / feedback
-
-If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
-
-## Configuration: sync server
-
-By default, the example app uses [Jazz Cloud](https://jazz.tools/cloud) (`wss://cloud.jazz.tools`) - so cross-device use, invites and collaboration should just work.
-
-You can also run a local sync server by running `npx cojson-simple-sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of the `<JazzProvider>` provider component in [./src/main.tsx](./src/main.tsx).

examples/onboarding/src/App.tsx

@@ -1,100 +0,0 @@
-import { Button } from "@/components/Button.tsx";
-import { EmployeeList } from "@/pages/EmployeeList.tsx";
-import { EmployeeOnboading } from "@/pages/EmployeeOnboarding.tsx";
-import { NewEmployee } from "@/pages/NewEmployee.tsx";
-import { CoEmployee, EmployeeCoList } from "@/schema.ts";
-import { useAcceptInvite, useAccount, useCoState } from "jazz-react";
-import { ID } from "jazz-tools";
-import { useEffect } from "react";
-import {
-  RouterProvider,
-  createHashRouter,
-  useNavigate,
-  useParams,
-} from "react-router-dom";
-
-function ImportEmployee({
-  employeeListCoId,
-}: { employeeListCoId: ID<EmployeeCoList> }) {
-  const { employeeCoId } = useParams();
-  const navigate = useNavigate();
-
-  const employees = useCoState(EmployeeCoList, employeeListCoId, [{}]);
-  const employee = useCoState(CoEmployee, employeeCoId as ID<CoEmployee>, {});
-
-  useEffect(() => {
-    if (!employee || !employees) return;
-
-    const exists = employees.find((employee) => employeeCoId === employee.id);
-
-    if (!exists) {
-      employees.push(employee);
-    }
-    navigate("/");
-  }, [employee, employees, navigate]);
-
-  return <div>Importing Employee ${employeeCoId} ...</div>;
-}
-
-function AcceptInvite() {
-  const navigate = useNavigate();
-
-  useAcceptInvite({
-    invitedObjectSchema: CoEmployee,
-    onAccept: (employeeCoId) => {
-      navigate(`/import/${employeeCoId}`);
-    },
-  });
-
-  return <p>Accepting invite...</p>;
-}
-
-function App() {
-  const { me, logOut } = useAccount();
-  const employeeCoListId = me.profile?._refs.employees.id;
-
-  const router = createHashRouter([
-    {
-      path: "/",
-      element: <EmployeeList employeeListCoId={employeeCoListId} />,
-    },
-    {
-      path: "employee/new",
-      element: <NewEmployee employeeListCoId={employeeCoListId} />,
-    },
-    {
-      path: "/employee/:employeeCoId",
-      element: <EmployeeOnboading />,
-    },
-    {
-      path: "/import/:employeeCoId",
-      element: <ImportEmployee employeeListCoId={employeeCoListId} />,
-    },
-    {
-      path: "/invite/*",
-      element: <AcceptInvite />,
-    },
-  ]);
-
-  return (
-    <>
-      <header className="flex flex-wrap space-x-8   max-w-screen-lg m-2">
-        <h1 className="text-3xl font-extrabold">
-          Jazz Onboarding Flow example
-        </h1>
-        <Button
-          onClick={() => {
-            window.location.href = "/";
-            logOut();
-          }}
-          text="Log Out"
-        />
-      </header>
-      <main className="ml-2">
-        {employeeCoListId && <RouterProvider router={router} />}
-      </main>
-    </>
-  );
-}
-
-export default App;

examples/onboarding/src/apiKey.ts

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

examples/onboarding/src/components/Button.tsx

@@ -1,31 +0,0 @@
-const disabledClasses =
-  "text-white bg-gray-400 dark:bg-gray-500 cursor-not-allowed";
-const regularClasses =
-  "text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-green-300 dark:focus:ring-green-800";
-
-export function Button({
-  text,
-  onClick,
-  disabled,
-  type = "button",
-  ...props
-}: {
-  text: string;
-  type?: "button" | "submit";
-  onClick?: () => void;
-  disabled?: boolean;
-}) {
-  return (
-    <button
-      {...props}
-      onClick={onClick}
-      type={type}
-      disabled={disabled}
-      className={`${
-        disabled ? disabledClasses : regularClasses
-      } text-base font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2`}
-    >
-      {text}
-    </button>
-  );
-}

examples/onboarding/src/components/ButtonLink.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-import { Link } from "react-router-dom";
-
-export function ButtonLink({
-  to,
-  children,
-}: {
-  to: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <Link
-      className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
-      to={to}
-    >
-      {children}
-    </Link>
-  );
-}

examples/onboarding/src/components/NavLink.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-import { Link } from "react-router-dom";
-
-export function NavLink({
-  to,
-  children,
-}: {
-  to: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <Link
-      className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
-      to={to}
-    >
-      {children}
-    </Link>
-  );
-}

examples/onboarding/src/components/NavigateBack.tsx

@@ -1,24 +0,0 @@
-import { useNavigate } from "react-router-dom";
-import { Button } from "./Button.tsx";
-
-export function NavigateBack() {
-  const navigate = useNavigate();
-  const canGoBack = window.history.state.idx !== 0;
-
-  if (!canGoBack) return null;
-
-  return (
-    <div>
-      <Button onClick={() => navigate(-1)} text="< Back" />
-    </div>
-  );
-}
-
-export function NavigateButton({ text, to }: { text: string; to: string }) {
-  const navigate = useNavigate();
-  return (
-    <div>
-      <Button onClick={() => navigate(to)} text={text} />
-    </div>
-  );
-}

examples/onboarding/src/components/Stack.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-
-export function Stack({
-  children,
-  horizontal,
-}: {
-  children: React.ReactNode;
-  horizontal?: boolean;
-}) {
-  return (
-    <div
-      className={`container flex ${
-        horizontal ? "flex-row" : "flex-col"
-      } col ${horizontal ? "space-x-4 flex-wrap" : "space-y-4"} p-4`}
-    >
-      {children}
-    </div>
-  );
-}

examples/onboarding/src/components/TextInput.tsx

@@ -1,36 +0,0 @@
-import { ChangeEvent } from "react";
-
-export function TextInput({
-  id,
-  value,
-  label,
-  onChange,
-  disabled,
-}: {
-  id: string;
-  label: string;
-  value: string;
-  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
-  disabled?: boolean;
-}) {
-  return (
-    <div>
-      <label
-        htmlFor={id}
-        className="block mb-2 font-medium text-gray-900 dark:text-white"
-      >
-        {label}
-      </label>
-      <input
-        value={value}
-        onChange={onChange}
-        type="text"
-        id={id}
-        disabled={disabled}
-        className="disabled:cursor-not-allowed bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-        placeholder="John"
-        required
-      />
-    </div>
-  );
-}

examples/onboarding/src/main.tsx

@@ -1,31 +0,0 @@
-import App from "@/App.tsx";
-import "@/index.css";
-import { HRAccount } from "@/schema.ts";
-import { JazzProvider } from "jazz-react";
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { apiKey } from "./apiKey";
-
-const peer =
-  (new URL(window.location.href).searchParams.get(
-    "peer",
-  ) as `ws://${string}`) ?? `wss://cloud.jazz.tools/?key=${apiKey}`;
-
-declare module "jazz-react" {
-  interface Register {
-    Account: HRAccount;
-  }
-}
-
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <JazzProvider
-      AccountSchema={HRAccount}
-      sync={{
-        peer,
-      }}
-    >
-      <App />
-    </JazzProvider>
-  </React.StrictMode>,
-);

examples/onboarding/src/pages/EmployeeList.tsx

@@ -1,50 +0,0 @@
-import { NavLink } from "@/components/NavLink.tsx";
-import { NavigateButton } from "@/components/NavigateBack.tsx";
-import { Stack } from "@/components/Stack.tsx";
-import { CoEmployee, EmployeeCoList } from "@/schema.ts";
-import { useCoState } from "jazz-react";
-import { ID } from "jazz-tools";
-
-export function EmployeeList({
-  employeeListCoId,
-}: {
-  employeeListCoId: ID<EmployeeCoList>;
-}) {
-  const employees = useCoState(EmployeeCoList, employeeListCoId, [{}]);
-
-  if (!employees) {
-    return <div>Loading...</div>;
-  }
-
-  return (
-    <Stack>
-      <NavigateButton to="/employee/new" text={"Add New Employee"} />
-      <ul className="max-w-md">
-        {employees.map((employee: CoEmployee) =>
-          employee.deleted ? null : (
-            <li key={employee.id} className="flex flex-row space-x-8 w-full">
-              <span>{employee._owner.myRole()}</span>
-              <span className="w-1/3">
-                <NavLink to={`/employee/${employee.id}`}>
-                  {employee.name}
-                </NavLink>
-              </span>
-              {employee.finalStep?.done && <span>✅</span>}
-              {employee._owner.myRole() === "admin" &&
-                !employee.finalStep?.done && (
-                  <span
-                    onClick={() => {
-                      employee.deleted = true;
-                    }}
-                    className="cursor-pointer"
-                  >
-                    🗑
-                  </span>
-                )}
-            </li>
-          ),
-        )}
-      </ul>
-    </Stack>
-  );
-}

examples/onboarding/src/pages/EmployeeOnboarding.tsx

@@ -1,240 +0,0 @@
-import { Button } from "@/components/Button.tsx";
-import { NavigateBack } from "@/components/NavigateBack.tsx";
-import { Stack } from "@/components/Stack.tsx";
-import { TextInput } from "@/components/TextInput.tsx";
-import { createImage } from "jazz-browser-media-images";
-import { useCoState } from "jazz-react";
-import { ProgressiveImg, createInviteLink } from "jazz-react";
-import { CoMap, ID } from "jazz-tools";
-import { ChangeEvent, ReactNode, useCallback } from "react";
-import { useParams } from "react-router";
-import {
-  CoDocUploadStep,
-  CoEmployee,
-  CoFinalStep,
-  CoInitialStep,
-} from "../schema.ts";
-
-const Card = ({
-  children,
-  title,
-  isDone,
-  isActive,
-}: {
-  children: ReactNode;
-  title: string;
-  isDone: boolean;
-  isActive?: boolean;
-}) => (
-  <div
-    className={`w-full p-4 bg-white border border-gray-200 rounded-lg shadow max-w-md ${
-      isActive ? "border-gray-900 hover:bg-green-50 shadow-xl" : ""
-    }`}
-  >
-    <Stack horizontal={true}>
-      <h5 className="mb-2 text-2xl text-gray-900">{title}</h5>
-      <h6 className="mb-2 text-2xl">
-        {isDone ? "✅" : isActive ? "❓" : "⌛"}
-      </h6>
-    </Stack>
-    {children}
-  </div>
-);
-
-const InfoCard = ({
-  initialStep,
-  canWrite,
-}: {
-  initialStep: CoInitialStep;
-  canWrite: boolean;
-}) => {
-  const isDisabled = !initialStep.isCurrentStep() || !canWrite;
-
-  return (
-    <Card
-      title="Personal Info"
-      isDone={initialStep?.done}
-      isActive={initialStep.isCurrentStep()}
-    >
-      <Stack>
-        <TextInput
-          disabled={isDisabled}
-          id="ssn"
-          label="Social Security Number"
-          value={initialStep.ssn || ""}
-          onChange={({ target: { value } }) => (initialStep.ssn = value)}
-        />
-        <TextInput
-          disabled={isDisabled}
-          id="address"
-          label="Address"
-          value={initialStep.address || ""}
-          onChange={({ target: { value } }) => (initialStep.address = value)}
-        />
-        {!initialStep.done && (
-          <Button
-            text={"Upload step >"}
-            disabled={!initialStep.ssn || !initialStep.address || isDisabled}
-            onClick={() => (initialStep.done = true)}
-          />
-        )}
-      </Stack>
-    </Card>
-  );
-};
-
-const UploadCard = ({
-  uploadStep,
-  canWrite,
-}: {
-  uploadStep: CoDocUploadStep;
-  canWrite: boolean;
-}) => {
-  const isDisabled = !uploadStep.isCurrentStep() || !canWrite;
-
-  const onImageSelected = useCallback(
-    async (event: ChangeEvent<HTMLInputElement>) => {
-      if (!event.target.files) return;
-
-      const image = await createImage(event.target.files[0], {
-        owner: uploadStep._owner,
-      });
-
-      uploadStep.photo = image;
-    },
-    [uploadStep],
-  );
-
-  return (
-    <Card
-      title="Uploads"
-      isDone={uploadStep?.done}
-      isActive={uploadStep.isCurrentStep()}
-    >
-      <Stack>
-        {uploadStep.photo && (
-          <ProgressiveImg image={uploadStep.photo}>
-            {({ src }) => (
-              <img
-                className="max-h-full max-w-full rounded-l-sm rounded-r-md shadow-lg p-2"
-                src={src}
-              />
-            )}
-          </ProgressiveImg>
-        )}
-
-        {!uploadStep.done && (
-          <>
-            <input
-              type="file"
-              disabled={isDisabled}
-              onChange={onImageSelected}
-              data-testid="file-upload"
-            />
-            <Button
-              text={"Confirmation step >"}
-              disabled={isDisabled || !uploadStep.photo}
-              onClick={() => (uploadStep.done = true)}
-            />
-          </>
-        )}
-      </Stack>
-    </Card>
-  );
-};
-
-const ConfirmationCard = ({
-  finalStep,
-  editable,
-}: {
-  finalStep: CoFinalStep;
-  editable: boolean;
-}) => {
-  const isDisabled = !finalStep.isCurrentStep() || !editable;
-  return (
-    <Card
-      title="Confirmation by admin"
-      isDone={finalStep?.done}
-      isActive={finalStep.isCurrentStep()}
-    >
-      <Stack>
-        {!finalStep.done && (
-          <Button
-            text="Confirmation by admin"
-            disabled={isDisabled}
-            onClick={() => (finalStep.done = true)}
-          />
-        )}
-      </Stack>
-    </Card>
-  );
-};
-
-export function EmployeeOnboading() {
-  const { employeeCoId } = useParams();
-
-  const employee = useCoState(CoEmployee, employeeCoId as ID<CoEmployee>, {});
-
-  const handleInviteLinkCreation = useCallback(
-    (role: "reader" | "writer") => {
-      if (!employee) return;
-
-      const link = createInviteLink(employee, role);
-      navigator.clipboard.writeText(link);
-      alert("Invite link copied to clipboard!");
-    },
-    [employee],
-  );
-
-  const isMeWriter = (step: CoMap): boolean => {
-    return ["writer", "admin"].includes(step._owner.myRole() || "");
-  };
-
-  return (
-    <>
-      <Stack>
-        <Stack horizontal={true}>
-          <NavigateBack />
-          {employee?._owner.myRole() === "admin" && (
-            <Button
-              text={"Invite a co-worker"}
-              onClick={() => handleInviteLinkCreation("writer")}
-            />
-          )}
-        </Stack>
-        <h2 className="mb-2 text-2xl text-gray-900 font-semibold">
-          {employee ? employee.name : "Loading..."}
-        </h2>
-      </Stack>
-
-      {employee && (
-        <Stack>
-          {employee.initialStep ? (
-            <InfoCard
-              initialStep={employee.initialStep}
-              canWrite={isMeWriter(employee.initialStep)}
-            />
-          ) : (
-            <div>Loading...</div>
-          )}
-          {employee.docUploadStep ? (
-            <UploadCard
-              uploadStep={employee.docUploadStep}
-              canWrite={isMeWriter(employee.docUploadStep)}
-            />
-          ) : (
-            <div>Loading...</div>
-          )}
-          {employee.finalStep ? (
-            <ConfirmationCard
-              finalStep={employee.finalStep}
-              editable={isMeWriter(employee.finalStep)}
-            />
-          ) : (
-            <div>Loading...</div>
-          )}
-        </Stack>
-      )}
-    </>
-  );
-}

examples/onboarding/src/pages/NewEmployee.tsx

@@ -1,89 +0,0 @@
-import { Button } from "@/components/Button.tsx";
-import { NavigateBack } from "@/components/NavigateBack.tsx";
-import { Stack } from "@/components/Stack.tsx";
-import { TextInput } from "@/components/TextInput.tsx";
-import { useAccount, useCoState } from "jazz-react";
-import { Group, ID } from "jazz-tools";
-import { useCallback, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import {
-  CoDocUploadStep,
-  CoEmployee,
-  CoFinalStep,
-  CoInitialStep,
-  EmployeeCoList,
-} from "../schema.ts";
-
-export function NewEmployee({
-  employeeListCoId,
-}: {
-  employeeListCoId: ID<EmployeeCoList>;
-}) {
-  const navigate = useNavigate();
-  const { me } = useAccount();
-
-  const employees = useCoState(EmployeeCoList, employeeListCoId, [{}]);
-
-  const [employeeName, setEmployeeName] = useState<string>("");
-
-  const createEmployee = useCallback(() => {
-    if (!employees) return;
-
-    const writerGroup = Group.create({ owner: me });
-    const readerGroup = Group.create({ owner: me });
-    readerGroup.addMember("everyone", "reader");
-
-    const initialStep = CoInitialStep.create(
-      { done: false, type: "initial" },
-      { owner: writerGroup },
-    );
-
-    const docUploadStep = CoDocUploadStep.create(
-      { done: false, prevStep: initialStep, type: "upload" },
-      { owner: writerGroup },
-    );
-
-    const finalStep = CoFinalStep.create(
-      { done: false, prevStep: docUploadStep, type: "final" },
-      { owner: readerGroup },
-    );
-
-    const employee = CoEmployee.create(
-      {
-        name: employeeName,
-        initialStep,
-        docUploadStep,
-        finalStep,
-      },
-      { owner: writerGroup },
-    );
-
-    employees.push(employee);
-    setEmployeeName("");
-  }, [employeeName, employees]);
-
-  return (
-    <div className="w-96">
-      <Stack>
-        <NavigateBack />
-        <form className="grid gap-3">
-          <TextInput
-            label="Employee name"
-            id="employee-name"
-            value={employeeName}
-            onChange={({ target: { value } }) => setEmployeeName(value)}
-          />
-          <Button
-            type="submit"
-            disabled={!employeeName}
-            onClick={() => {
-              createEmployee();
-              navigate("/");
-            }}
-            text="Create Employee"
-          />
-        </form>
-      </Stack>
-    </div>
-  );
-}

examples/onboarding/src/schema.ts

@@ -1,76 +0,0 @@
-import {
-  Account,
-  CoList,
-  CoMap,
-  ImageDefinition,
-  Profile,
-  co,
-} from "jazz-tools";
-
-type Steps = "initial" | "upload" | "final";
-
-interface Step {
-  type: Steps;
-  prevStep: ReturnType<typeof co.ref> | undefined;
-  done: boolean;
-
-  isCurrentStep(): boolean;
-}
-
-export class CoInitialStep extends CoMap implements Step {
-  type = co.literal("initial");
-  ssn? = co.string;
-  address? = co.string;
-  done = co.boolean;
-  prevStep = co.null;
-  isCurrentStep() {
-    return !this.done;
-  }
-}
-
-export class CoDocUploadStep extends CoMap implements Step {
-  type = co.literal("upload");
-  prevStep = co.ref(CoInitialStep);
-  photo = co.ref(ImageDefinition, { optional: true });
-  done = co.boolean;
-
-  isCurrentStep() {
-    return !!(this.prevStep?.done && !this.done);
-  }
-}
-
-export class CoFinalStep extends CoMap implements Step {
-  type = co.literal("final");
-  prevStep = co.ref(CoDocUploadStep);
-  done = co.boolean;
-
-  isCurrentStep() {
-    return !!(this.prevStep?.done && !this.done);
-  }
-}
-
-export class CoEmployee extends CoMap {
-  name = co.string;
-  deleted? = co.boolean;
-  initialStep = co.ref(CoInitialStep);
-  docUploadStep = co.ref(CoDocUploadStep);
-  finalStep = co.ref(CoFinalStep);
-}
-
-export class EmployeeCoList extends CoList.Of(co.ref(CoEmployee)) {}
-
-export class HRProfile extends Profile {
-  employees = co.ref(EmployeeCoList);
-}
-
-export class HRAccount extends Account {
-  profile = co.ref(HRProfile)!;
-
-  migrate() {
-    if (!this.profile._refs.employees) {
-      this.profile.employees = EmployeeCoList.create([], {
-        owner: this.profile._owner,
-      });
-    }
-  }
-}

examples/onboarding/tailwind.config.ts

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

examples/onboarding/tests/onboardingFlow.spec.ts

@@ -1,96 +0,0 @@
-import {
-  Browser,
-  BrowserContext,
-  Page,
-  chromium,
-  expect,
-  test,
-} from "@playwright/test";
-import { EmployeeOnboardingPage } from "./pages/EmployeeOnboardingPage";
-import { HomePage } from "./pages/HomePage";
-import { LoginPage } from "./pages/LoginPage";
-
-async function scrollToBottom(page: Page) {
-  await page.evaluate(() => {
-    window.scrollTo(0, document.body.scrollHeight);
-  });
-}
-
-test.describe("Admin onboarding flow", () => {
-  let browser: Browser;
-  let adminContext: BrowserContext;
-  let writerContext: BrowserContext;
-
-  test.beforeAll(async () => {
-    browser = await chromium.launch();
-    adminContext = await browser.newContext();
-    writerContext = await browser.newContext();
-  });
-
-  test.afterAll(async () => {
-    await adminContext.close();
-    await writerContext.close();
-    await browser.close();
-  });
-
-  test("Create and delete flow", async () => {
-    const adminPage = await adminContext.newPage();
-    await adminPage.goto("/");
-    const adminHomePage = new HomePage(adminPage);
-    await adminHomePage.createEmployee("Paul");
-    await adminHomePage.createEmployee("Sean");
-    await adminHomePage.expectEmployee(["Sean", "admin"]);
-    await adminHomePage.expectEmployee(["Paul", "admin"]);
-    await adminHomePage.deleteEmployee("Sean");
-    await adminHomePage.expectEmployeeDeleted("Sean");
-
-    await adminPage.close();
-  });
-
-  test("Onboard flow", async () => {
-    const adminPage = await adminContext.newPage();
-    const writerPage = await writerContext.newPage();
-
-    await adminPage.goto("/");
-    await writerPage.goto("/");
-
-    const adminHomePage = new HomePage(adminPage);
-    await adminHomePage.createEmployee("Paul");
-    await adminHomePage.expectEmployee(["Paul", "admin"]);
-    await adminHomePage.navigateToEmployeeOnboardingPage("Paul");
-    const adminOnboardingPage = new EmployeeOnboardingPage(adminPage);
-
-    // create invitation
-    const invitation = await adminOnboardingPage.getShareLink();
-
-    // Wait for the invitation to be synced
-    await writerPage.waitForTimeout(3000);
-
-    //fill out by invitee (writer)
-    await writerPage.goto(invitation);
-
-    const writerHomePage = new HomePage(writerPage);
-    await writerHomePage.expectEmployee(["Paul", "write"]);
-    await writerHomePage.navigateToEmployeeOnboardingPage("Paul");
-    const writerOnboardingPage = new EmployeeOnboardingPage(writerPage);
-    await writerOnboardingPage.expectEmployeeName("Paul");
-    await writerOnboardingPage.fillPersonalDetailsCardAndSave(
-      "123-45-6789",
-      "123 Elm Street",
-    );
-    await writerOnboardingPage.fillUploadCardAndSave(
-      "./public/jazz-logo-low-res.jpg",
-    );
-
-    // invitee cannot confirm the onboarding completion
-    expect(
-      writerOnboardingPage.finalConfirmationButton.isDisabled(),
-    ).toBeTruthy();
-
-    // final confirmation step by admin
-    await scrollToBottom(adminPage);
-    await adminOnboardingPage.finalConfirmationButton.click();
-    await adminOnboardingPage.backButton.click();
-    await adminHomePage.expectOnboardingCompleteForEmployee("Paul");
-  });
-});

examples/onboarding/tests/pages/EmployeeOnboardingPage.ts

@@ -1,92 +0,0 @@
-import { Locator, Page, expect } from "@playwright/test";
-
-export class EmployeeOnboardingPage {
-  readonly page: Page;
-  readonly shareButton: Locator;
-  readonly backButton: Locator;
-  readonly logoutButton: Locator;
-  readonly finalConfirmationButton: Locator;
-  readonly fileInput: Locator;
-
-  constructor(page: Page) {
-    this.page = page;
-    this.shareButton = page.getByRole("button", {
-      name: /invite a co-worker/i,
-    });
-    this.backButton = page.getByRole("button", {
-      name: /back/i,
-    });
-    this.logoutButton = page.getByRole("button", {
-      name: /log out/i,
-    });
-    this.finalConfirmationButton = this.page.getByRole("button", {
-      name: /confirmation by admin/i,
-    });
-
-    this.fileInput = page.getByTestId("file-upload");
-  }
-
-  async uploadFile(value: string) {
-    // Start waiting for file chooser before clicking. Note no await.
-    const fileChooserPromise = this.page.waitForEvent("filechooser");
-
-    await this.fileInput.click();
-
-    const fileChooser = await fileChooserPromise;
-    await fileChooser.setFiles(value);
-  }
-
-  async expectEmployeeName(name: string) {
-    await expect(
-      this.page.getByRole("heading", {
-        name: name,
-      }),
-    ).toBeVisible();
-  }
-
-  async fillPersonalDetailsCardAndSave(ssn: string, address: string) {
-    const nextStepButton = this.page.getByRole("button", {
-      name: /upload step >/i,
-    });
-    await expect(nextStepButton).toBeDisabled();
-
-    const ssnInput = this.page.getByLabel(/Social Security Number/i);
-    await ssnInput.fill(ssn);
-
-    const addressInput = this.page.getByLabel(/Address/i);
-    await addressInput.fill(address);
-
-    // save and hide the button
-    await expect(nextStepButton).toBeEnabled();
-    await nextStepButton.click();
-    await expect(nextStepButton).not.toBeVisible();
-  }
-
-  async fillUploadCardAndSave(file: string) {
-    const nextStepButton = this.page.getByRole("button", {
-      name: /confirmation step >/i,
-    });
-    await expect(nextStepButton).toBeDisabled();
-
-    await this.uploadFile(file);
-    await expect(nextStepButton).toBeEnabled();
-    await nextStepButton.click();
-    await expect(nextStepButton).not.toBeVisible();
-  }
-
-  async getShareLink() {
-    await this.shareButton.click();
-
-    const inviteUrl = await this.page.evaluate(() =>
-      navigator.clipboard.readText(),
-    );
-
-    expect(inviteUrl).toBeTruthy();
-
-    return inviteUrl;
-  }
-
-  async logout() {
-    await this.logoutButton.click();
-  }
-}

examples/onboarding/tests/pages/HomePage.ts

@@ -1,66 +0,0 @@
-import { Locator, Page, expect } from "@playwright/test";
-import { NewEmployeePage } from "./NewEmployeePage";
-
-export class HomePage {
-  readonly page: Page;
-  readonly newEmployeeLink: Locator;
-  readonly logoutButton: Locator;
-
-  constructor(page: Page) {
-    this.page = page;
-    this.newEmployeeLink = page.getByRole("button", {
-      name: "Add New Employee",
-    });
-    this.logoutButton = page.getByRole("button", {
-      name: "Log Out",
-    });
-  }
-
-  async expectEmployee([name, role]: [string, string]) {
-    const liElement = this.page.locator(
-      `li:has-text("${name}"):has-text("${role}")`,
-    );
-    await expect(liElement).toBeVisible();
-  }
-
-  async deleteEmployee(name: string) {
-    const liElement = this.page.locator(`li:has-text("${name}")`);
-    const deleteIcon = liElement.locator('span:has-text("🗑")');
-    await deleteIcon.click();
-  }
-
-  async expectOnboardingCompleteForEmployee(name: string) {
-    const liElement = this.page.locator(`li:has-text("${name}")`);
-    const completionIcon = liElement.locator('span:has-text("✅")');
-    await expect(completionIcon).toBeVisible();
-  }
-
-  async expectEmployeeDeleted(name: string) {
-    const liElement = this.page.locator(`li:has-text("${name}")`);
-    await expect(liElement).not.toBeVisible();
-  }
-
-  async navigateToEmployeeOnboardingPage(name: string) {
-    await this.page
-      .getByRole("link", {
-        name,
-      })
-      .click();
-  }
-
-  async navigateToNewEmployee() {
-    await this.newEmployeeLink.click();
-  }
-
-  async createEmployee(name: string) {
-    await this.navigateToNewEmployee();
-    const newEmployeePage = new NewEmployeePage(this.page);
-
-    await newEmployeePage.fillEmployeeName(name);
-    await newEmployeePage.submit();
-  }
-
-  async logout() {
-    await this.logoutButton.click();
-  }
-}

examples/onboarding/tests/pages/LoginPage.ts

@@ -1,40 +0,0 @@
-import { Locator, Page, expect } from "@playwright/test";
-
-export class LoginPage {
-  readonly page: Page;
-  readonly usernameInput: Locator;
-  readonly signupButton: Locator;
-
-  constructor(page: Page) {
-    this.page = page;
-    this.usernameInput = page.getByRole("textbox");
-    this.signupButton = page.getByRole("button", {
-      name: "Sign up",
-    });
-  }
-
-  async goto(url: string) {
-    await this.page.goto(url);
-  }
-
-  async fillUsername(value: string) {
-    await this.usernameInput.clear();
-    await this.usernameInput.fill(value);
-  }
-
-  async loginAs(value: string) {
-    await this.page
-      .getByRole("button", {
-        name: value,
-      })
-      .click();
-  }
-
-  async signup() {
-    await this.signupButton.click();
-  }
-
-  async expectLoaded() {
-    await expect(this.signupButton).toBeVisible();
-  }
-}

examples/onboarding/tests/pages/NewEmployeePage.ts

@@ -1,24 +0,0 @@
-import { Locator, Page } from "@playwright/test";
-
-export class NewEmployeePage {
-  readonly page: Page;
-  readonly employeeNameInput: Locator;
-  readonly submitButton: Locator;
-
-  constructor(page: Page) {
-    this.page = page;
-    this.employeeNameInput = page.getByLabel(/employee name/i);
-    this.submitButton = page.getByRole("button", {
-      name: /create employee/i,
-    });
-  }
-
-  async fillEmployeeName(value: string) {
-    await this.employeeNameInput.clear();
-    await this.employeeNameInput.fill(value);
-  }
-
-  async submit() {
-    await this.submitButton.click();
-  }
-}

examples/onboarding/tsconfig.node.json

@@ -1,11 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
-    "strict": true
-  },
-  "include": ["vite.config.ts"]
-}

examples/onboarding/vite.config.ts

@@ -1,17 +0,0 @@
-import path from "path";
-import react from "@vitejs/plugin-react-swc";
-import { defineConfig } from "vite";
-import topLevelAwait from "vite-plugin-top-level-await";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react(), topLevelAwait()],
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
-    },
-  },
-  build: {
-    minify: false,
-  },
-});

examples/onboarding/vite.config.ts.timestamp-1738123585435-c5f316a1877fb.mjs

@@ -1,20 +0,0 @@
-// vite.config.ts
-import path from "path";
-import react from "file:///Users/brad/dev/jazz/node_modules/@vitejs/plugin-react-swc/index.mjs";
-import topLevelAwait from "file:///Users/brad/dev/jazz/node_modules/vite-plugin-top-level-await/exports/import.mjs";
-import { defineConfig } from "file:///Users/brad/dev/jazz/node_modules/vite/dist/node/index.js";
-var __vite_injected_original_dirname =
-  "/Users/brad/dev/jazz/examples/onboarding";
-var vite_config_default = defineConfig({
-  plugins: [react(), topLevelAwait()],
-  resolve: {
-    alias: {
-      "@": path.resolve(__vite_injected_original_dirname, "./src"),
-    },
-  },
-  build: {
-    minify: false,
-  },
-});
-export { vite_config_default as default };
-//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvYnJhZC9kZXYvamF6ei9leGFtcGxlcy9vbmJvYXJkaW5nXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCIvVXNlcnMvYnJhZC9kZXYvamF6ei9leGFtcGxlcy9vbmJvYXJkaW5nL3ZpdGUuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9Vc2Vycy9icmFkL2Rldi9qYXp6L2V4YW1wbGVzL29uYm9hcmRpbmcvdml0ZS5jb25maWcudHNcIjtpbXBvcnQgcGF0aCBmcm9tIFwicGF0aFwiO1xuaW1wb3J0IHJlYWN0IGZyb20gXCJAdml0ZWpzL3BsdWdpbi1yZWFjdC1zd2NcIjtcbmltcG9ydCB7IGRlZmluZUNvbmZpZyB9IGZyb20gXCJ2aXRlXCI7XG5pbXBvcnQgdG9wTGV2ZWxBd2FpdCBmcm9tIFwidml0ZS1wbHVnaW4tdG9wLWxldmVsLWF3YWl0XCI7XG5cbi8vIGh0dHBzOi8vdml0ZWpzLmRldi9jb25maWcvXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoe1xuICBwbHVnaW5zOiBbcmVhY3QoKSwgdG9wTGV2ZWxBd2FpdCgpXSxcbiAgcmVzb2x2ZToge1xuICAgIGFsaWFzOiB7XG4gICAgICBcIkBcIjogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSwgXCIuL3NyY1wiKSxcbiAgICB9LFxuICB9LFxuICBidWlsZDoge1xuICAgIG1pbmlmeTogZmFsc2UsXG4gIH0sXG59KTtcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFBMFMsT0FBTyxVQUFVO0FBQzNULE9BQU8sV0FBVztBQUNsQixTQUFTLG9CQUFvQjtBQUM3QixPQUFPLG1CQUFtQjtBQUgxQixJQUFNLG1DQUFtQztBQU16QyxJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTLENBQUMsTUFBTSxHQUFHLGNBQWMsQ0FBQztBQUFBLEVBQ2xDLFNBQVM7QUFBQSxJQUNQLE9BQU87QUFBQSxNQUNMLEtBQUssS0FBSyxRQUFRLGtDQUFXLE9BQU87QUFBQSxJQUN0QztBQUFBLEVBQ0Y7QUFBQSxFQUNBLE9BQU87QUFBQSxJQUNMLFFBQVE7QUFBQSxFQUNWO0FBQ0YsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K

examples/organization/CHANGELOG.md

@@ -1,5 +1,127 @@
 # organization
 
+## 0.0.54
+
+### Patch Changes
+
+- Updated dependencies [6892dc6]
+  - jazz-tools@0.11.2
+  - jazz-react@0.11.2
+
+## 0.0.53
+
+### Patch Changes
+
+- jazz-react@0.11.1
+
+## 0.0.52
+
+### Patch Changes
+
+- Updated dependencies [6a96d8b]
+- Updated dependencies [a35249a]
+- Updated dependencies [b9d194a]
+- Updated dependencies [a4713df]
+- Updated dependencies [34cbdc3]
+- Updated dependencies [f039e8f]
+- Updated dependencies [e22de9f]
+  - jazz-tools@0.11.0
+  - jazz-react@0.11.0
+
+## 0.0.51
+
+### Patch Changes
+
+- Updated dependencies [2f99de0]
+  - jazz-tools@0.10.15
+  - jazz-react@0.10.15
+
+## 0.0.50
+
+### Patch Changes
+
+- Updated dependencies [75211e3]
+  - jazz-tools@0.10.14
+  - jazz-react@0.10.14
+
+## 0.0.49
+
+### Patch Changes
+
+- Updated dependencies [07feedd]
+  - jazz-tools@0.10.13
+  - jazz-react@0.10.13
+
+## 0.0.48
+
+### Patch Changes
+
+- Updated dependencies [4612e05]
+  - jazz-tools@0.10.12
+  - jazz-react@0.10.12
+
+## 0.0.47
+
+### Patch Changes
+
+- jazz-react@0.10.9
+
+## 0.0.46
+
+### Patch Changes
+
+- Updated dependencies [2fb6428]
+  - jazz-tools@0.10.8
+  - jazz-react@0.10.8
+
+## 0.0.45
+
+### Patch Changes
+
+- Updated dependencies [1136d9b]
+- Updated dependencies [0eed228]
+  - jazz-react@0.10.7
+  - jazz-tools@0.10.7
+
+## 0.0.44
+
+### Patch Changes
+
+- Updated dependencies [1d71ca1]
+- Updated dependencies [ada802b]
+  - jazz-react@0.10.6
+  - jazz-tools@0.10.6
+
+## 0.0.43
+
+### Patch Changes
+
+- Updated dependencies [59ff77e]
+  - jazz-tools@0.10.5
+  - jazz-react@0.10.5
+
+## 0.0.42
+
+### Patch Changes
+
+- jazz-react@0.10.4
+- jazz-tools@0.10.4
+
+## 0.0.41
+
+### Patch Changes
+
+- Updated dependencies [d8582fc]
+  - jazz-tools@0.10.3
+  - jazz-react@0.10.3
+
+## 0.0.40
+
+### Patch Changes
+
+- jazz-react@0.10.2
+- jazz-tools@0.10.2
+
 ## 0.0.39
 
 ### Patch Changes

examples/organization/package.json

@@ -1,11 +1,11 @@
 {
   "name": "organization",
   "private": true,
-  "version": "0.0.39",
+  "version": "0.0.54",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "vite build",
     "preview": "vite preview",
     "format-and-lint": "biome check .",
     "format-and-lint:fix": "biome check . --write"

examples/organization/src/components/CreateOrganization.tsx

@@ -23,7 +23,7 @@ export function CreateOrganization() {
       return;
     }
 
-    const group = Group.create({ owner: me });
+    const group = Group.create();
 
     me.root.organizations.push(draft as Organization);
 

examples/organization/src/components/OrganizationMembers.tsx

@@ -1,5 +1,4 @@
-import { useCoState } from "jazz-react";
-import { Account, Group, ID } from "jazz-tools";
+import { Group } from "jazz-tools";
 import { Organization } from "../schema.ts";
 
 export function OrganizationMembers({
@@ -10,26 +9,13 @@ export function OrganizationMembers({
   return (
     <>
       {group.members.map((member) => (
-        <Member
-          key={member.id}
-          accountId={member.id as ID<Account>}
-          role={member.role}
-        />
+        <div key={member.id} className="px-4 py-5 sm:px-6">
+          <strong className="font-medium">
+            {member.account.profile?.name}
+          </strong>{" "}
+          ({member.role})
+        </div>
       ))}
     </>
   );
 }
-function Member({
-  accountId,
-  role,
-}: { accountId: ID<Account>; role?: string }) {
-  const account = useCoState(Account, accountId, { profile: {} });
-
-  if (!account?.profile) return;
-
-  return (
-    <div className="px-4 py-5 sm:px-6">
-      <strong className="font-medium">{account.profile.name}</strong> ({role})
-    </div>
-  );
-}