Add 'use-client' directive

feat: deprecate extend methods

.changeset/empty-pears-carry.md

@@ -0,0 +1,6 @@
+---
+"jazz-example-music-player": patch
+"jazz-tools": patch
+---
+
+Deprecated `Group.extend` and `Group.revokeExtend` (use `Group.addMember` and `Group.removeMember` respectively)

.changeset/shaggy-cycles-carry.md

@@ -0,0 +1,5 @@
+---
+"create-jazz-app": patch
+---
+
+use new svelte starter

.github/workflows/build-starters.yaml

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

.github/workflows/playwright-homepage.yml

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

.github/workflows/playwright.yml

@@ -13,7 +13,21 @@ jobs:
     continue-on-error: true
     strategy:
       matrix:
-        project: ["tests/e2e", "examples/chat",  "examples/clerk", "examples/betterauth", "examples/file-share-svelte", "examples/form", "examples/music-player", "examples/organization", "examples/pets", "starters/react-passkey-auth"]
+        project: [
+          "tests/e2e",
+          "examples/chat",
+          "examples/clerk",
+          "examples/betterauth",
+          "examples/file-share-svelte",
+          "examples/form",
+          "examples/inspector",
+          "examples/music-player",
+          "examples/organization",
+          "examples/pets",
+          "starters/react-passkey-auth",
+          "starters/svelte-passkey-auth",
+          "packages/jazz-svelte"
+        ]
 
     steps:
       - uses: actions/checkout@v4
@@ -24,7 +38,11 @@ jobs:
         uses: ./.github/actions/source-code/
 
       - name: Pnpm Build
-        run: pnpm turbo build
+        run: |
+          if [ -f .env.test ]; then
+            cp .env.test .env
+          fi
+          pnpm turbo build
         working-directory: ./${{ matrix.project }}
 
       - name: Install Playwright Browsers

biome.json

@@ -13,6 +13,7 @@
       "**/android/**",
       "packages/jazz-svelte/**",
       "examples/*svelte*/**",
+      "starters/*svelte*/**",
       "examples/jazz-paper-scissors/src/routeTree.gen.ts",
       "homepage/homepage/**",
       "**/package.json"
@@ -64,7 +65,7 @@
       }
     },
     {
-      "include": ["packages/**/src/tests/**"],
+      "include": ["**/tests/**"],
       "linter": {
         "rules": {
           "correctness": {

examples/betterauth/.gitignore

@@ -36,8 +36,10 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # env files (can opt-in for committing if needed)
-.env*
-!.env
+.env
+.env.*
+!.env.example
+!.env.test
 
 # vercel
 .vercel

examples/betterauth/CHANGELOG.md

@@ -1,5 +1,56 @@
 # betterauth
 
+## 0.1.25
+
+### Patch Changes
+
+- Updated dependencies [048ac1d]
+  - jazz-tools@0.14.22
+  - jazz-betterauth-server-plugin@0.14.22
+  - jazz-inspector@0.14.22
+  - jazz-react@0.14.22
+  - jazz-react-auth-betterauth@0.14.22
+  - jazz-betterauth-client-plugin@0.14.22
+
+## 0.1.24
+
+### Patch Changes
+
+- Updated dependencies [e7e505e]
+- Updated dependencies [13b57aa]
+- Updated dependencies [5662faa]
+- Updated dependencies [2116a59]
+  - jazz-tools@0.14.21
+  - jazz-betterauth-server-plugin@0.14.21
+  - jazz-inspector@0.14.21
+  - jazz-react@0.14.21
+  - jazz-react-auth-betterauth@0.14.21
+  - jazz-betterauth-client-plugin@0.14.21
+
+## 0.1.23
+
+### Patch Changes
+
+- Updated dependencies [6f72419]
+- Updated dependencies [04b20c2]
+  - jazz-tools@0.14.20
+  - jazz-betterauth-server-plugin@0.14.20
+  - jazz-inspector@0.14.20
+  - jazz-react@0.14.20
+  - jazz-react-auth-betterauth@0.14.20
+  - jazz-betterauth-client-plugin@0.14.20
+
+## 0.1.22
+
+### Patch Changes
+
+- jazz-betterauth-client-plugin@0.14.19
+- jazz-betterauth-server-plugin@0.14.19
+- jazz-react-auth-betterauth@0.14.19
+- jazz-inspector@0.14.19
+- jazz-react@0.14.19
+- jazz-tools@0.14.19
+
 ## 0.1.21
 
 ### Patch Changes

examples/betterauth/README.md

@@ -5,10 +5,12 @@ This example demonstrates how to integrate [Better Auth](https://www.better-auth
 ## 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.
+
+- 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.
 
 ### Setting environment variables
+
 - `NEXT_PUBLIC_AUTH_BASE_URL`: A URL to a Better Auth server. If undefined, the example will self-host a Better Auth server.
 - `BETTER_AUTH_SECRET`: The encryption secret used by the self-hosted Better Auth server (required only if `NEXT_PUBLIC_AUTH_BASE_URL` is undefined)
 - `GITHUB_CLIENT_ID`: The client ID for the GitHub OAuth provider used by the self-hosted Better Auth server (required only if `NEXT_PUBLIC_AUTH_BASE_URL` is undefined)
@@ -17,38 +19,64 @@ To run this example, you may either:
 ### Using this example as a template
 
 1. Create a new Jazz project, and use this example as a template.
+
 ```sh
 npx create-jazz-app@latest betterauth-app --example betterauth
 ```
-2. Navigate to the new project and start the development server.
+
+2. Navigate to the new project and install dependencies.
+
 ```sh
 cd betterauth-app
 pnpm install
+```
+
+3. Create a .env file (don't forget to set your [BETTER_AUTH_SECRET](https://www.better-auth.com/docs/installation#set-environment-variables)!)
+
+```sh
+mv .env.example .env
+```
+
+4. Start the development server
+
+```sh
 pnpm dev
 ```
 
+https://www.better-auth.com/docs/installation#set-environment-variables
+
 ### 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/betterauth/
 ```
 
+Create a .env file (don't forget to set your [BETTER_AUTH_SECRET](https://www.better-auth.com/docs/installation#set-environment-variables)!)
+
+```sh
+mv .env.example .env
+```
+
 Start the dev server.
+
 ```bash
 pnpm dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

examples/betterauth/package.json

@@ -1,6 +1,5 @@
 {
 	"name": "betterauth",
-	"version": "0.1.21",
 	"private": true,
 	"type": "module",
 	"scripts": {

examples/chat-rn-expo-clerk/.env

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

examples/chat-rn-expo-clerk/.env.example

@@ -0,0 +1 @@
+EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=

examples/chat-rn-expo-clerk/.gitignore

@@ -15,3 +15,9 @@ web-build/
 
 ios
 android
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test

examples/chat-rn-expo-clerk/CHANGELOG.md

@@ -1,5 +1,46 @@
 # chat-rn-expo-clerk
 
+## 1.0.145
+
+### Patch Changes
+
+- Updated dependencies [048ac1d]
+  - jazz-tools@0.14.22
+  - jazz-expo@0.14.22
+  - jazz-react-native-media-images@0.14.22
+
+## 1.0.144
+
+### Patch Changes
+
+- Updated dependencies [e7e505e]
+- Updated dependencies [cfb6786]
+- Updated dependencies [13b57aa]
+- Updated dependencies [5662faa]
+- Updated dependencies [2116a59]
+  - jazz-tools@0.14.21
+  - jazz-expo@0.14.21
+  - jazz-react-native-media-images@0.14.21
+
+## 1.0.143
+
+### Patch Changes
+
+- Updated dependencies [6f72419]
+- Updated dependencies [04b20c2]
+  - jazz-tools@0.14.20
+  - jazz-expo@0.14.20
+  - jazz-react-native-media-images@0.14.20
+
+## 1.0.142
+
+### Patch Changes
+
+- Updated dependencies [061ec99]
+  - jazz-expo@0.14.19
+  - jazz-react-native-media-images@0.14.19
+  - jazz-tools@0.14.19
+
 ## 1.0.141
 
 ### Patch Changes

examples/chat-rn-expo-clerk/README.md

@@ -8,9 +8,12 @@ First, install dependencies and build the project:
 
 ```bash
 pnpm i
+mv .env.example .env
 pnpm run build
 ```
 
+Don't forget to update `VITE_CLERK_PUBLISHABLE_KEY` in `.env` with your [Publishable Key](https://clerk.com/docs/deployments/clerk-environment-variables#clerk-publishable-and-secret-keys) from Clerk.
+
 ### 2. Inside the `examples/chat-rn-expo-clerk` Directory
 
 Next, navigate to the specific example project and run the following commands:

examples/chat-rn-expo-clerk/package.json

@@ -1,7 +1,6 @@
 {
   "name": "chat-rn-expo-clerk",
   "main": "index.js",
-  "version": "1.0.141",
   "scripts": {
     "build": "expo export -p ios",
     "start": "expo start",

examples/chat-rn-expo/.gitignore

@@ -36,4 +36,9 @@ yarn-error.*
 # typescript
 *.tsbuildinfo
 android/
-ios/
+ios/
+# env files
+.env
+.env.*
+!.env.example
+!.env.test

examples/chat-rn-expo/CHANGELOG.md

@@ -1,5 +1,42 @@
 # chat-rn-expo
 
+## 1.0.13
+
+### Patch Changes
+
+- Updated dependencies [048ac1d]
+  - jazz-tools@0.14.22
+  - jazz-expo@0.14.22
+
+## 1.0.12
+
+### Patch Changes
+
+- Updated dependencies [e7e505e]
+- Updated dependencies [cfb6786]
+- Updated dependencies [13b57aa]
+- Updated dependencies [5662faa]
+- Updated dependencies [2116a59]
+  - jazz-tools@0.14.21
+  - jazz-expo@0.14.21
+
+## 1.0.11
+
+### Patch Changes
+
+- Updated dependencies [6f72419]
+- Updated dependencies [04b20c2]
+  - jazz-tools@0.14.20
+  - jazz-expo@0.14.20
+
+## 1.0.10
+
+### Patch Changes
+
+- Updated dependencies [061ec99]
+  - jazz-expo@0.14.19
+  - jazz-tools@0.14.19
+
 ## 1.0.9
 
 ### Patch Changes

examples/chat-rn-expo/package.json

@@ -1,6 +1,5 @@
 {
   "name": "chat-rn-expo",
-  "version": "1.0.9",
   "main": "index.ts",
   "scripts": {
     "build": "expo prebuild",

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

@@ -128,7 +128,11 @@ export default function ChatScreen() {
             }}
             testID="chat-id-input"
           />
-          <TouchableOpacity onPress={joinChat} style={styles.joinChatButton}>
+          <TouchableOpacity
+            testID="join-chat-button"
+            onPress={joinChat}
+            style={styles.joinChatButton}
+          >
             <Text style={styles.newChatButtonText}>Join chat</Text>
           </TouchableOpacity>
         </View>

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

@@ -41,12 +41,17 @@ appId: tools.jazz.chatrnexpo
 # logout
 - tapOn: "Logout"
 - assertVisible: "Username"
-- assertVisible: "Anonymous user"
 
-# join chat
+- extendedWaitUntil:
+    visible: "Anonymous user"
+    timeout: 10000
+# join chat 
+
+## Commented because it fails on CI
 # - tapOn:
 #     id: "chat-id-input"
 # - inputText: "co_zFs6KFyhxPw4xtw83tcEMzeHUNv" # Use a static id because maestro doesn't have access to the system clipboard
-# - tapOn: "Join chat"
+# - tapOn:
+#     id: "join-chat-button"
 # - assertVisible: "boorad"
 # - assertVisible: "bro, low key, it do be like that tho"

examples/chat-rn-expo/test/e2e/runLocal.sh

@@ -0,0 +1,13 @@
+#!/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
+
+# 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-rn/.gitignore

@@ -73,3 +73,9 @@ yarn-error.log
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+
+# env files
+.env
+.env.*
+!.env.example
+!.env.test

examples/chat-rn/CHANGELOG.md

@@ -1,5 +1,51 @@
 # chat-rn
 
+## 1.0.140
+
+### Patch Changes
+
+- Updated dependencies [57fb69f]
+- Updated dependencies [048ac1d]
+  - cojson@0.14.22
+  - jazz-tools@0.14.22
+  - cojson-transport-ws@0.14.22
+  - jazz-react-native@0.14.22
+
+## 1.0.139
+
+### Patch Changes
+
+- Updated dependencies [e7e505e]
+- Updated dependencies [c3d8779]
+- Updated dependencies [13b57aa]
+- Updated dependencies [5662faa]
+- Updated dependencies [2116a59]
+  - jazz-tools@0.14.21
+  - cojson@0.14.21
+  - jazz-react-native@0.14.21
+  - cojson-transport-ws@0.14.21
+
+## 1.0.138
+
+### Patch Changes
+
+- Updated dependencies [6f72419]
+- Updated dependencies [04b20c2]
+  - jazz-tools@0.14.20
+  - jazz-react-native@0.14.20
+  - cojson@0.14.20
+  - cojson-transport-ws@0.14.20
+
+## 1.0.137
+
+### Patch Changes
+
+- Updated dependencies [061ec99]
+  - jazz-react-native@0.14.19
+  - cojson@0.14.19
+  - cojson-transport-ws@0.14.19
+  - jazz-tools@0.14.19
+
 ## 1.0.136
 
 ### Patch Changes

examples/chat-rn/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-rn",
-  "version": "1.0.136",
+  "private": true,
   "main": "index.js",
   "scripts": {
     "android": "react-native run-android",

examples/chat-vue/.gitignore

@@ -1 +1,6 @@
-dist
+dist
+# env files
+.env
+.env.*
+!.env.example
+!.env.test

examples/chat-vue/CHANGELOG.md

@@ -1,5 +1,44 @@
 # chat-vue
 
+## 0.0.120
+
+### Patch Changes
+
+- Updated dependencies [048ac1d]
+  - jazz-tools@0.14.22
+  - jazz-browser@0.14.22
+  - jazz-vue@0.14.22
+
+## 0.0.119
+
+### Patch Changes
+
+- Updated dependencies [e7e505e]
+- Updated dependencies [13b57aa]
+- Updated dependencies [5662faa]
+- Updated dependencies [2116a59]
+  - jazz-tools@0.14.21
+  - jazz-browser@0.14.21
+  - jazz-vue@0.14.21
+
+## 0.0.118
+
+### Patch Changes
+
+- Updated dependencies [6f72419]
+- Updated dependencies [04b20c2]
+  - jazz-tools@0.14.20
+  - jazz-browser@0.14.20
+  - jazz-vue@0.14.20
+
+## 0.0.117
+
+### Patch Changes
+
+- jazz-browser@0.14.19
+- jazz-tools@0.14.19
+- jazz-vue@0.14.19
+
 ## 0.0.116
 
 ### Patch Changes

examples/chat-vue/README.md

@@ -58,4 +58,4 @@ If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or
 
 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 jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of `JazzProvider` in [./src/main.ts](./src/main.ts).
+You can also run a local sync server by running `npx jazz-run sync`, and setting the `sync` parameter of `JazzProvider` in [./src/main.ts](./src/main.ts) to `{ peer: "ws://localhost:4200" }`.

examples/chat-vue/index.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="./public/favicon.ico" type="image/png">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Jazz Chat Vue Example</title>
   </head>
   <body>

examples/chat-vue/package.json

@@ -1,6 +1,5 @@
 {
   "name": "chat-vue",
-  "version": "0.0.116",
   "private": true,
   "type": "module",
   "scripts": {
@@ -32,7 +31,7 @@
     "postcss": "^8.4.27",
     "tailwindcss": "^3.4.17",
     "typescript": "5.6.2",
-    "vite": "6.0.11",
+    "vite": "6.3.5",
     "vite-plugin-vue-devtools": "^7.4.6",
     "vue-tsc": "^2.1.6"
   }

examples/chat/.gitignore

@@ -29,3 +29,9 @@ sync-db/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+# env files
+.env
+.env.*
+!.env.example
+!.env.test

examples/chat/CHANGELOG.md

@@ -1,5 +1,44 @@
 # jazz-example-chat
 
+## 0.0.220
+
+### Patch Changes
+
+- Updated dependencies [048ac1d]
+  - jazz-tools@0.14.22
+  - jazz-inspector@0.14.22
+  - jazz-react@0.14.22
+
+## 0.0.219
+
+### Patch Changes
+
+- Updated dependencies [e7e505e]
+- Updated dependencies [13b57aa]
+- Updated dependencies [5662faa]
+- Updated dependencies [2116a59]
+  - jazz-tools@0.14.21
+  - jazz-inspector@0.14.21
+  - jazz-react@0.14.21
+
+## 0.0.218
+
+### Patch Changes
+
+- Updated dependencies [6f72419]
+- Updated dependencies [04b20c2]
+  - jazz-tools@0.14.20
+  - jazz-inspector@0.14.20
+  - jazz-react@0.14.20
+
+## 0.0.217
+
+### Patch Changes
+
+- jazz-inspector@0.14.19
+- jazz-react@0.14.19
+- jazz-tools@0.14.19
+
 ## 0.0.216
 
 ### Patch Changes

examples/chat/README.md

@@ -60,4 +60,4 @@ If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or
 
 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 jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of the `<JazzProvider>` provider component in [./src/main.tsx](./src/main.tsx).
+You can also run a local sync server by running `npx jazz-run sync`, and setting the `sync` parameter of `JazzProvider` in [./src/app.tsx](./src/app.tsx) to `{ peer: "ws://localhost:4200" }`.

examples/chat/index.html

@@ -2,7 +2,7 @@
 <html lang="en" class="h-full">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/jazz-logo.png" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <link rel="stylesheet" href="/src/index.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Jazz Chat Example</title>

examples/chat/package.json

@@ -1,7 +1,6 @@
 {
   "name": "jazz-example-chat",
   "private": true,
-  "version": "0.0.216",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -27,12 +26,12 @@
     "@playwright/test": "^1.50.1",
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",
-    "@vitejs/plugin-react-swc": "^3.3.2",
+    "@vitejs/plugin-react-swc": "^3.10.1",
     "autoprefixer": "^10.4.20",
     "is-ci": "^3.0.1",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.4.17",
     "typescript": "5.6.2",
-    "vite": "6.0.11"
+    "vite": "6.3.5"
   }
 }

examples/chat/src/app.tsx

@@ -18,7 +18,7 @@ export function App() {
   const createChat = () => {
     if (!me) return;
     const group = Group.create();
-    group.addMember("everyone", "writer");
+    group.makePublic("writer");
     const chat = Chat.create([], group);
     router.navigate("/#/chat/" + chat.id);
 

examples/chat/vercel.json

@@ -1,8 +1,3 @@
 {
-  "build": {
-    "env": {
-      "APP_NAME": "jazz-chat"
-    }
-  },
-  "ignoreCommand": "node ../../ignore-vercel-build.js"
+  "ignoreCommand": "npx turbo-ignore"
 }

examples/clerk/.env.example

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

examples/clerk/.env.test

@@ -1 +1 @@
-VITE_CLERK_PUBLISHABLE_KEY=pk_test_ZXZpZGVudC1kYW5lLTg5LmNsZXJrLmFjY291bnRzLmRldiQ
+VITE_CLERK_PUBLISHABLE_KEY=pk_test_ZXZpZGVudC1kYW5lLTg5LmNsZXJrLmFjY291bnRzLmRldiQ

examples/clerk/.gitignore

@@ -23,4 +23,10 @@ dist-ssr
 *.sln
 *.sw?
 
-playwright-report
+playwright-report
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test

examples/clerk/CHANGELOG.md

@@ -1,5 +1,44 @@
 # minimal-auth-clerk
 
+## 0.0.119
+
+### Patch Changes
+
+- Updated dependencies [048ac1d]
+  - jazz-tools@0.14.22
+  - jazz-react@0.14.22
+  - jazz-react-auth-clerk@0.14.22
+
+## 0.0.118
+
+### Patch Changes
+
+- Updated dependencies [e7e505e]
+- Updated dependencies [13b57aa]
+- Updated dependencies [5662faa]
+- Updated dependencies [2116a59]
+  - jazz-tools@0.14.21
+  - jazz-react@0.14.21
+  - jazz-react-auth-clerk@0.14.21
+
+## 0.0.117
+
+### Patch Changes
+
+- Updated dependencies [6f72419]
+- Updated dependencies [04b20c2]
+  - jazz-tools@0.14.20
+  - jazz-react@0.14.20
+  - jazz-react-auth-clerk@0.14.20
+
+## 0.0.116
+
+### Patch Changes
+
+- jazz-react@0.14.19
+- jazz-react-auth-clerk@0.14.19
+- jazz-tools@0.14.19
+
 ## 0.0.115
 
 ### Patch Changes

examples/clerk/README.md

@@ -7,23 +7,34 @@ Live version: [https://clerk-demo.jazz.tools](https://clerk-demo.jazz.tools)
 ## 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 clerk-app --example clerk
 ```
 
 Go to the new project directory.
+
 ```bash
 cd clerk-app
 ```
 
+Rename .env.example to .env
+
+```bash
+mv .env.example .env
+```
+
+Update `VITE_CLERK_PUBLISHABLE_KEY` with your [Publishable Key](https://clerk.com/docs/deployments/clerk-environment-variables#clerk-publishable-and-secret-keys) from Clerk.
+
 Run the dev server.
+
 ```bash
 npm run dev
 ```
@@ -33,21 +44,33 @@ npm run dev
 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/clerk/
 ```
 
+Rename .env.example to .env
+
+```bash
+mv .env.example .env
+```
+
+Update `VITE_CLERK_PUBLISHABLE_KEY` with your [Publishable Key](https://clerk.com/docs/deployments/clerk-environment-variables#clerk-publishable-and-secret-keys) from Clerk.
+
 Start the dev server.
+
 ```bash
 pnpm dev
 ```
@@ -57,4 +80,3 @@ Open [http://localhost:5173](http://localhost:5173) with your browser to see the
 ## 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.
-

examples/clerk/index.html

@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Minimal Auth Clerk Example | Jazz</title>
 </head>

examples/clerk/package.json

@@ -1,7 +1,6 @@
 {
   "name": "clerk",
   "private": true,
-  "version": "0.0.115",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -14,6 +13,7 @@
   },
   "dependencies": {
     "@clerk/clerk-react": "^5.4.1",
+    "jazz-inspector": "workspace:*",
     "jazz-react": "workspace:*",
     "jazz-react-auth-clerk": "workspace:*",
     "jazz-tools": "workspace:*",
@@ -25,9 +25,9 @@
     "@biomejs/biome": "1.9.4",
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",
-    "@vitejs/plugin-react": "^4.3.3",
+    "@vitejs/plugin-react": "^4.5.1",
     "globals": "^15.11.0",
     "typescript": "5.6.2",
-    "vite": "6.0.11"
+    "vite": "6.3.5"
   }
 }

examples/clerk/src/main.tsx

@@ -3,6 +3,7 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
+import { JazzInspector } from "jazz-inspector";
 import { JazzProviderWithClerk } from "jazz-react-auth-clerk";
 import { ReactNode } from "react";
 import { apiKey } from "./apiKey";
@@ -44,6 +45,7 @@ if (location.search.includes("expirationTest")) {
       <ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
         <JazzProvider>
           <App />
+          <JazzInspector />
         </JazzProvider>
       </ClerkProvider>
     </StrictMode>,

examples/clerk/vercel.json

@@ -1,8 +1,3 @@
 {
-  "build": {
-    "env": {
-      "APP_NAME": "clerk-demo"
-    }
-  },
-  "ignoreCommand": "node ../../ignore-vercel-build.js"
+  "ignoreCommand": "npx turbo-ignore"
 }

examples/file-share-svelte/CHANGELOG.md

@@ -1,5 +1,45 @@
 # file-share-svelte
 
+## 0.0.104
+
+### Patch Changes
+
+- Updated dependencies [048ac1d]
+  - jazz-tools@0.14.22
+  - jazz-svelte@0.14.22
+  - jazz-inspector-element@0.14.22
+
+## 0.0.103
+
+### Patch Changes
+
+- Updated dependencies [e7e505e]
+- Updated dependencies [d14a069]
+- Updated dependencies [13b57aa]
+- Updated dependencies [5662faa]
+- Updated dependencies [2116a59]
+  - jazz-tools@0.14.21
+  - jazz-svelte@0.14.21
+  - jazz-inspector-element@0.14.21
+
+## 0.0.102
+
+### Patch Changes
+
+- Updated dependencies [6f72419]
+- Updated dependencies [04b20c2]
+  - jazz-tools@0.14.20
+  - jazz-inspector-element@0.14.20
+  - jazz-svelte@0.14.20
+
+## 0.0.101
+
+### Patch Changes
+
+- jazz-inspector-element@0.14.19
+- jazz-svelte@0.14.19
+- jazz-tools@0.14.19
+
 ## 0.0.100
 
 ### Patch Changes

examples/file-share-svelte/package.json

@@ -1,6 +1,5 @@
 {
   "name": "file-share-svelte",
-  "version": "0.0.100",
   "private": true,
   "type": "module",
   "scripts": {
@@ -30,12 +29,12 @@
     "prettier": "^3.3.2",
     "prettier-plugin-svelte": "^3.2.6",
     "prettier-plugin-tailwindcss": "^0.6.5",
-    "svelte": "^5.0.0",
+    "svelte": "^5.33.0",
     "svelte-check": "^4.0.0",
     "tailwindcss": "^3.4.17",
     "typescript": "5.6.2",
     "typescript-eslint": "^8.0.0",
-    "vite": "6.0.11"
+    "vite": "6.3.5"
   },
   "dependencies": {
     "@tailwindcss/typography": "^0.5.15",

examples/file-share-svelte/src/app.html

@@ -1,8 +1,8 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <meta charset="utf-8" />    
+    <link rel="icon" type="image/png" href="%sveltekit.assets%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     %sveltekit.head%
   </head>

examples/file-share-svelte/src/routes/+layout.svelte

@@ -1,11 +1,3 @@
-<script lang="ts" module>
-  declare module 'jazz-svelte' {
-    interface Register {
-      Account: typeof FileShareAccount;
-    }
-  }
-</script>
-
 <script lang="ts">
   import { JazzProvider } from 'jazz-svelte';
   import "jazz-inspector-element"

examples/filestream/.gitignore

@@ -25,4 +25,10 @@ dist-ssr
 *.sln
 *.sw?
 
-playwright-report
+playwright-report
+
+# env files
+.env
+.env.*
+!.env.example
+!.env.test

examples/filestream/CHANGELOG.md

@@ -1,5 +1,44 @@
 # jazz-tailwind-demo-auth-starter
 
+## 0.0.59
+
+### Patch Changes
+
+- Updated dependencies [048ac1d]
+  - jazz-tools@0.14.22
+  - jazz-inspector@0.14.22
+  - jazz-react@0.14.22
+
+## 0.0.58
+
+### Patch Changes
+
+- Updated dependencies [e7e505e]
+- Updated dependencies [13b57aa]
+- Updated dependencies [5662faa]
+- Updated dependencies [2116a59]
+  - jazz-tools@0.14.21
+  - jazz-inspector@0.14.21
+  - jazz-react@0.14.21
+
+## 0.0.57
+
+### Patch Changes
+
+- Updated dependencies [6f72419]
+- Updated dependencies [04b20c2]
+  - jazz-tools@0.14.20
+  - jazz-inspector@0.14.20
+  - jazz-react@0.14.20
+
+## 0.0.56
+
+### Patch Changes
+
+- jazz-inspector@0.14.19
+- jazz-react@0.14.19
+- jazz-tools@0.14.19
+
 ## 0.0.55
 
 ### Patch Changes

examples/filestream/README.md

@@ -63,4 +63,4 @@ If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or
 
 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 jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of `JazzProvider` component in [./src/main.tsx](./src/main.tsx).
+You can also run a local sync server by running `npx jazz-run sync`, and setting the `sync` parameter of `JazzProvider` in [./src/main.tsx](./src/main.tsx) to `{ peer: "ws://localhost:4200" }`.

examples/filestream/index.html

@@ -2,7 +2,7 @@
 <html lang="en" class="h-full">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="./public/favicon.ico" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Jazz | React + Demo Auth + Tailwind</title>
   </head>

examples/filestream/package.json

@@ -1,7 +1,6 @@
 {
   "name": "filestream",
   "private": true,
-  "version": "0.0.55",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -21,13 +20,13 @@
     "@biomejs/biome": "1.9.4",
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",
-    "@vitejs/plugin-react": "^4.3.3",
+    "@vitejs/plugin-react": "^4.5.1",
     "autoprefixer": "^10.4.20",
     "globals": "^15.11.0",
     "is-ci": "^3.0.1",
     "postcss": "^8.5.3",
     "tailwindcss": "^3.4.17",
     "typescript": "5.6.2",
-    "vite": "6.0.11"
+    "vite": "6.3.5"
   }
 }

examples/filestream/vercel.json

@@ -1,8 +1,3 @@
 {
-  "build": {
-    "env": {
-      "APP_NAME": "filestream"
-    }
-  },
-  "ignoreCommand": "node ../../ignore-vercel-build.js"
+  "ignoreCommand": "npx turbo-ignore"
 }

examples/form/.gitignore

@@ -25,3 +25,9 @@ dist-ssr
 
 /test-results/
 /playwright-report/
+
+# env files
+.env
+.env.*
+!.env.example
+!.env.test

examples/form/CHANGELOG.md

@@ -1,5 +1,40 @@
 # form
 
+## 0.1.60
+
+### Patch Changes
+
+- Updated dependencies [048ac1d]
+  - jazz-tools@0.14.22
+  - jazz-react@0.14.22
+
+## 0.1.59
+
+### Patch Changes
+
+- Updated dependencies [e7e505e]
+- Updated dependencies [13b57aa]
+- Updated dependencies [5662faa]
+- Updated dependencies [2116a59]
+  - jazz-tools@0.14.21
+  - jazz-react@0.14.21
+
+## 0.1.58
+
+### Patch Changes
+
+- Updated dependencies [6f72419]
+- Updated dependencies [04b20c2]
+  - jazz-tools@0.14.20
+  - jazz-react@0.14.20
+
+## 0.1.57
+
+### Patch Changes
+
+- jazz-react@0.14.19
+- jazz-tools@0.14.19
+
 ## 0.1.56
 
 ### Patch Changes

examples/form/README.md

@@ -75,4 +75,4 @@ If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or
 
 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 jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of the `<JazzProvider>` provider component in [./src/main.tsx](./src/main.tsx).
+You can also run a local sync server by running `npx jazz-run sync`, and setting the `sync` parameter of `JazzProvider` in [./src/main.tsx](./src/main.tsx) to `{ peer: "ws://localhost:4200" }`.

examples/form/index.html

@@ -2,9 +2,9 @@
 <html lang="en" class="h-full">
   <head>
     <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Jazz | Form example</title>
-    <link rel="icon" type="image/png" href="./public/favicon.ico">
   </head>
   <body class="h-full flex flex-col bg-white text-stone-700 dark:text-stone-400 dark:bg-stone-925">
     <div id="root" class="align-self-center flex-1"></div>

examples/form/package.json

@@ -1,7 +1,6 @@
 {
   "name": "form",
   "private": true,
-  "version": "0.1.56",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -12,6 +11,7 @@
   },
   "dependencies": {
     "hash-slash": "workspace:*",
+    "jazz-inspector": "workspace:*",
     "jazz-react": "workspace:*",
     "jazz-tools": "workspace:*",
     "react": "19.0.0",
@@ -23,13 +23,13 @@
     "@tailwindcss/forms": "^0.5.9",
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",
-    "@vitejs/plugin-react": "^4.3.3",
+    "@vitejs/plugin-react": "^4.5.1",
     "autoprefixer": "^10.4.20",
     "globals": "^15.11.0",
     "is-ci": "^3.0.1",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.4.17",
     "typescript": "5.6.2",
-    "vite": "6.0.11"
+    "vite": "6.3.5"
   }
 }

examples/form/src/main.tsx

@@ -1,3 +1,4 @@
+import { JazzInspector } from "jazz-inspector";
 import { JazzProvider } from "jazz-react";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
@@ -15,6 +16,7 @@ createRoot(document.getElementById("root")!).render(
       AccountSchema={JazzAccount}
     >
       <App />
+      <JazzInspector />
     </JazzProvider>
   </StrictMode>,
 );

examples/form/vercel.json

@@ -1,8 +1,3 @@
 {
-  "build": {
-    "env": {
-      "APP_NAME": "form-demo"
-    }
-  },
-  "ignoreCommand": "node ../../ignore-vercel-build.js"
+  "ignoreCommand": "npx turbo-ignore"
 }

examples/image-upload/.gitignore

@@ -22,3 +22,9 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# env files
+.env
+.env.*
+!.env.example
+!.env.test

examples/image-upload/CHANGELOG.md

@@ -1,5 +1,40 @@
 # image-upload
 
+## 0.0.116
+
+### Patch Changes
+
+- Updated dependencies [048ac1d]
+  - jazz-tools@0.14.22
+  - jazz-react@0.14.22
+
+## 0.0.115
+
+### Patch Changes
+
+- Updated dependencies [e7e505e]
+- Updated dependencies [13b57aa]
+- Updated dependencies [5662faa]
+- Updated dependencies [2116a59]
+  - jazz-tools@0.14.21
+  - jazz-react@0.14.21
+
+## 0.0.114
+
+### Patch Changes
+
+- Updated dependencies [6f72419]
+- Updated dependencies [04b20c2]
+  - jazz-tools@0.14.20
+  - jazz-react@0.14.20
+
+## 0.0.113
+
+### Patch Changes
+
+- jazz-react@0.14.19
+- jazz-tools@0.14.19
+
 ## 0.0.112
 
 ### Patch Changes

examples/image-upload/README.md

@@ -63,4 +63,4 @@ If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or
 
 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 jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of `JazzProvider` component in [./src/main.tsx](./src/main.tsx).
+You can also run a local sync server by running `npx jazz-run sync`, and setting the `sync` parameter of `JazzProvider` in [./src/main.tsx](./src/main.tsx) to `{ peer: "ws://localhost:4200" }`.

examples/image-upload/index.html

@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Jazz | Image upload example</title>
-    <link rel="icon" href="./public/favicon.ico" type="image/png">
   </head>
   <body>
     <div id="root"></div>

examples/image-upload/package.json

@@ -1,7 +1,6 @@
 {
   "name": "image-upload",
   "private": true,
-  "version": "0.0.112",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -11,6 +10,7 @@
     "format-and-lint:fix": "biome check . --write"
   },
   "dependencies": {
+    "jazz-inspector": "workspace:*",
     "jazz-react": "workspace:*",
     "jazz-tools": "workspace:*",
     "react": "19.0.0",
@@ -20,10 +20,10 @@
     "@biomejs/biome": "1.9.4",
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",
-    "@vitejs/plugin-react": "^4.3.3",
+    "@vitejs/plugin-react": "^4.5.1",
     "globals": "^15.11.0",
     "typescript": "5.6.2",
-    "vite": "6.0.11",
+    "vite": "6.3.5",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.4.17"

examples/image-upload/src/main.tsx

@@ -1,3 +1,4 @@
+import { JazzInspector } from "jazz-inspector";
 import { JazzProvider } from "jazz-react";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
@@ -15,6 +16,7 @@ createRoot(document.getElementById("root")!).render(
       AccountSchema={JazzAccount}
     >
       <App />
+      <JazzInspector />
     </JazzProvider>
   </StrictMode>,
 );

examples/image-upload/vercel.json

@@ -1,8 +1,3 @@
 {
-  "build": {
-    "env": {
-      "APP_NAME": "image-upload-demo"
-    }
-  },
-  "ignoreCommand": "node ../../ignore-vercel-build.js"
+  "ignoreCommand": "npx turbo-ignore"
 }

examples/inspector/.gitignore

@@ -23,4 +23,10 @@ dist-ssr
 *.sln
 *.sw?
 
-sync-db/
+sync-db/
+
+# env files
+.env
+.env.*
+!.env.example
+!.env.test

examples/inspector/CHANGELOG.md

@@ -1,5 +1,39 @@
 # jazz-example-inspector
 
+## 0.0.169
+
+### Patch Changes
+
+- Updated dependencies [57fb69f]
+  - cojson@0.14.22
+  - cojson-transport-ws@0.14.22
+  - jazz-inspector@0.14.22
+
+## 0.0.168
+
+### Patch Changes
+
+- Updated dependencies [c3d8779]
+  - cojson@0.14.21
+  - jazz-inspector@0.14.21
+  - cojson-transport-ws@0.14.21
+
+## 0.0.167
+
+### Patch Changes
+
+- jazz-inspector@0.14.20
+- cojson@0.14.20
+- cojson-transport-ws@0.14.20
+
+## 0.0.166
+
+### Patch Changes
+
+- cojson@0.14.19
+- cojson-transport-ws@0.14.19
+- jazz-inspector@0.14.19
+
 ## 0.0.165
 
 ### Patch Changes

examples/inspector/index.html

@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="UTF-8" />
-  <link rel="icon" type="image/png" href="/jazz-logo.png" />
+  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
   <link rel="stylesheet" href="/src/index.css" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Jazz Inspector</title>

examples/inspector/package.json

@@ -1,36 +1,36 @@
 {
   "name": "jazz-inspector-app",
   "private": true,
-  "version": "0.0.165",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
+    "test": "playwright test",
+    "test:headed": "playwright test --headed",
     "format-and-lint": "biome check .",
     "format-and-lint:fix": "biome check . --write",
     "preview": "vite preview"
   },
   "dependencies": {
     "jazz-inspector": "workspace:*",
+    "jazz-tools": "workspace:*",
     "clsx": "^2.0.0",
     "cojson": "workspace:*",
     "cojson-transport-ws": "workspace:*",
     "hash-slash": "workspace:*",
-    "lucide-react": "^0.274.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "react-router": "^6.16.0",
-    "react-router-dom": "^6.16.0",
     "react-use": "^17.4.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.50.1",
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",
-    "@vitejs/plugin-react-swc": "^3.3.2",
+    "@vitejs/plugin-react-swc": "^3.10.1",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.4.17",
     "typescript": "5.6.2",
-    "vite": "6.0.11"
+    "vite": "6.3.5"
   }
 }

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

@@ -27,7 +27,15 @@ interface Account {
   secret: AgentSecret;
 }
 
+interface JazzLoggedInSecret {
+  accountID: string;
+  accountSecret: string;
+  secretSeed?: number[];
+  provider?: string;
+}
+
 export default function CoJsonViewerApp() {
+  const [errors, setErrors] = useState<string | null>(null);
   const [accounts, setAccounts] = useState<Account[]>(() => {
     const storedAccounts = localStorage.getItem("inspectorAccounts");
     return storedAccounts ? JSON.parse(storedAccounts) : [];
@@ -73,23 +81,46 @@ export default function CoJsonViewerApp() {
         websocket: new WebSocket("wss://cloud.jazz.tools"),
         role: "server",
       });
-      const node = await LocalNode.withLoadedAccount({
-        accountID: currentAccount.id,
-        accountSecret: currentAccount.secret,
-        sessionID: crypto.newRandomSessionID(currentAccount.id),
-        peersToLoadFrom: [wsPeer],
-        crypto,
-        migration: async () => {
-          console.log("Not running any migration in inspector");
-        },
-      });
+      let node;
+      try {
+        node = await LocalNode.withLoadedAccount({
+          accountID: currentAccount.id,
+          accountSecret: currentAccount.secret,
+          sessionID: crypto.newRandomSessionID(currentAccount.id),
+          peersToLoadFrom: [wsPeer],
+          crypto,
+          migration: async () => {
+            console.log("Not running any migration in inspector");
+          },
+        });
+      } catch (err: any) {
+        if (err.toString().includes("invalid id")) {
+          setAccounts(accounts.filter((acc) => acc.id !== currentAccount.id));
+          //remove from localStorage
+          localStorage.removeItem("lastSelectedAccountId");
+          localStorage.setItem(
+            "inspectorAccounts",
+            JSON.parse(localStorage.inspectorAccounts).filter(
+              (acc: Account) => acc.id != currentAccount.id,
+            ),
+          );
+          setCurrentAccount(null);
+          setErrors("Trying to load covalue with invalid id");
+        } else {
+          setErrors("The account could not be loaded");
+        }
+        setLocalNode(null);
+        goToIndex(-1);
+        return;
+      }
       setLocalNode(node);
     });
-  }, [currentAccount, goToIndex, path]);
+  }, [currentAccount, accounts, goToIndex, path]);
 
   const addAccount = (id: RawAccountID, secret: AgentSecret) => {
     const newAccount = { id, secret };
     const accountExists = accounts.some((account) => account.id === id);
+    //todo: ideally there would be some validation here so we don't have to manually remove a non existent account from localStorage
     if (!accountExists) {
       setAccounts([...accounts, newAccount]);
     }
@@ -167,7 +198,9 @@ export default function CoJsonViewerApp() {
         goBack={goBack}
         addPages={addPages}
       >
-        {!currentAccount && <AddAccountForm addAccount={addAccount} />}
+        {!currentAccount && (
+          <AddAccountForm addAccount={addAccount} errors={errors} />
+        )}
 
         {currentAccount && path.length <= 0 && (
           <form
@@ -263,13 +296,34 @@ function AccountSwitcher({
 
 function AddAccountForm({
   addAccount,
+  errors,
 }: {
   addAccount: (id: RawAccountID, secret: AgentSecret) => void;
+  errors: string | null;
 }) {
   const [id, setId] = useState("");
   const [secret, setSecret] = useState("");
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleIdChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    const value = e.target.value;
+    setId(value);
+
+    // Try to parse as JSON if it looks like a JSON object
+    if (value.trim().startsWith("{") && value.trim().endsWith("}")) {
+      try {
+        const parsed: JazzLoggedInSecret = JSON.parse(value);
+        if (parsed.accountID && parsed.accountSecret) {
+          setId(parsed.accountID);
+          setSecret(parsed.accountSecret);
+        }
+      } catch (error) {
+        // If parsing fails, just keep the raw value in the id field
+        console.log("Failed to parse JSON:", error);
+      }
+    }
+  };
+
+  const handleSubmit = (e: React.FormEvent): void => {
     e.preventDefault();
     addAccount(id as RawAccountID, secret as AgentSecret);
     setId("");
@@ -279,8 +333,17 @@ function AddAccountForm({
   return (
     <form
       onSubmit={handleSubmit}
-      className="flex flex-col gap-3 max-w-md mx-auto h-full justify-center"
+      className={`flex flex-col max-w-[30rem] mx-auto justify-center ${errors == null ? "h-full" : ""}`}
     >
+      {errors != null && (
+        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mt-4 font-mono whitespace-pre-wrap break-words mb-8">
+          <h3>Error</h3>
+          <pre className="whitespace-pre-wrap break-words overflow-hidden">
+            {errors}
+          </pre>
+        </div>
+      )}
+
       <h2 className="text-2xl font-medium text-gray-900 dark:text-white">
         Add an account to inspect
       </h2>
@@ -290,13 +353,14 @@ function AddAccountForm({
           jazz-logged-in-secret
         </code>{" "}
         local storage key from within your Jazz app for your account
-        credentials.
+        credentials. You can paste the full JSON object or enter the ID and
+        secret separately.
       </p>
       <Input
         label="Account ID"
         value={id}
-        placeholder="co_z1234567890abcdef123456789"
-        onChange={(e) => setId(e.target.value)}
+        placeholder="co_z1234567890abcdef123456789 or paste full JSON"
+        onChange={handleIdChange}
       />
       <Input
         label="Account secret"

examples/inspector/tests/data.ts

@@ -0,0 +1,91 @@
+import { co, z } from "jazz-tools";
+
+const projectsData: {
+  name: string;
+  description: string;
+  issues: {
+    title: string;
+    status: "open" | "closed";
+    labels: string[];
+  }[];
+}[] = [
+  {
+    name: "Jazz",
+    description: "Jazz is a framework for building collaborative apps.",
+    issues: [
+      {
+        title: "Issue 1",
+        status: "open",
+        labels: [
+          "bug",
+          "feature",
+          "enhancement",
+          "documentation",
+          "homepage",
+          "help needed",
+          "requested",
+          "blocked",
+          "high priority",
+          "urgent",
+        ],
+      },
+      { title: "Issue 2", status: "closed", labels: ["bug"] },
+      { title: "Issue 3", status: "open", labels: ["feature", "enhancement"] },
+    ],
+  },
+  {
+    name: "Waffle",
+    description: "Start waffling",
+    issues: [],
+  },
+  {
+    name: "Garden",
+    description: "Grow your garden",
+    issues: [],
+  },
+  {
+    name: "Tilescape",
+    description: "",
+    issues: [],
+  },
+];
+
+const Issue = co.map({
+  title: z.string(),
+  status: z.enum(["open", "closed"]),
+  labels: co.list(z.string()),
+});
+
+const Project = co.map({
+  name: z.string(),
+  description: z.string(),
+  issues: co.list(Issue),
+});
+
+const Organization = co.map({
+  name: z.string(),
+  projects: co.list(Project),
+});
+
+export const createOrganization = () => {
+  return Organization.create({
+    name: "Garden Computing",
+    projects: co.list(Project).create(
+      projectsData.map((project) =>
+        Project.create({
+          name: project.name,
+          description: project.description,
+          issues: co.list(Issue).create(
+            project.issues.map((issue) =>
+              Issue.create({
+                title: issue.title,
+                status: issue.status,
+                labels: co.list(z.string()).create(issue.labels),
+              }),
+            ),
+          ),
+        }),
+      ),
+    ),
+  });
+};

examples/inspector/tests/inspector.spec.ts

@@ -0,0 +1,82 @@
+import { expect, test } from "@playwright/test";
+import { createOrganization } from "./data";
+import { createAccount, initializeKvStore } from "./lib";
+
+initializeKvStore();
+const { account, accountID, accountSecret } = await createAccount();
+
+test("should add and delete account in dropdown", async ({ page }) => {
+  await page.goto("/");
+  await page.getByLabel("Account ID").fill(accountID);
+  await page.getByLabel("Account secret").fill(accountSecret);
+  await page.getByRole("button", { name: "Add account" }).click();
+
+  await expect(page.getByText("Jazz CoValue Inspector")).toBeVisible();
+  await page
+    .getByLabel("Account to inspect")
+    .selectOption(`Inspector test account <${accountID}>`);
+
+  await page.getByRole("button", { name: "Remove account" }).click();
+  await expect(page.getByText("Jazz CoValue Inspector")).not.toBeVisible();
+  await expect(page.getByText("Add an account to inspect")).toBeVisible();
+  await expect(
+    page.getByText(`Inspector test account <${accountID}>`),
+  ).not.toBeVisible();
+});
+
+test("should inspect account", async ({ page }) => {
+  await page.goto("/");
+  await page.getByLabel("Account ID").fill(accountID);
+  await page.getByLabel("Account secret").fill(accountSecret);
+  await page.getByRole("button", { name: "Add account" }).click();
+  await page.getByRole("button", { name: "Inspect my account" }).click();
+
+  await expect(page.getByRole("heading", { name: accountID })).toBeVisible();
+  await expect(page.getByText("👤 Account")).toBeVisible();
+
+  await page.getByRole("button", { name: "profile {} CoMap name:" }).click();
+  await expect(page.getByText("Role: admin")).toBeVisible();
+});
+
+test("should inspect CoValue", async ({ page }) => {
+  await page.goto("/");
+  await page.getByLabel("Account ID").fill(accountID);
+  await page.getByLabel("Account secret").fill(accountSecret);
+  await page.getByRole("button", { name: "Add account" }).click();
+
+  const organization = createOrganization();
+
+  await account.waitForAllCoValuesSync(); // Ensures that the organization is uploaded
+
+  await page.getByLabel("CoValue ID").fill(organization.id);
+  await page.getByRole("button", { name: "Inspect CoValue" }).click();
+
+  await expect(page.getByText(/Garden Computing/)).toHaveCount(2);
+  await expect(
+    page.getByRole("heading", { name: organization.id }),
+  ).toBeVisible();
+  await expect(page.getByText("Role: admin")).toBeVisible();
+
+  await page.getByRole("button", { name: /projects/ }).click();
+  await expect(page.getByText("Showing 4 of 4")).toBeVisible();
+
+  await page.getByRole("button", { name: "View" }).first().click();
+  await expect(
+    page.getByText("Jazz is a framework for building collaborative apps."),
+  ).toBeVisible();
+
+  await page.getByRole("button", { name: /issues/ }).click();
+  await expect(page.getByText("Showing 3 of 3")).toBeVisible();
+  await page.getByRole("button", { name: "View" }).first().click();
+
+  await page.getByRole("button", { name: /labels/ }).click();
+  // currently broken:
+  // await expect(page.getByText("Showing 10 of 10")).toBeVisible();
+  await expect(page.getByRole("table").getByRole("row")).toHaveCount(11);
+
+  await page.getByRole("button", { name: "issues" }).click();
+  await expect(page.getByRole("table").getByRole("row")).toHaveCount(4);
+
+  await page.getByRole("button", { name: "projects" }).click();
+  await expect(page.getByRole("table").getByRole("row")).toHaveCount(5);
+});

examples/inspector/tests/lib.ts

@@ -0,0 +1,43 @@
+import { createWebSocketPeer } from "cojson-transport-ws";
+import { WasmCrypto } from "cojson/crypto/WasmCrypto";
+import {
+  AuthSecretStorage,
+  InMemoryKVStore,
+  KvStoreContext,
+  co,
+  createJazzContext,
+  randomSessionProvider,
+  z,
+} from "jazz-tools";
+
+export const initializeKvStore = () => {
+  const kvStore = new InMemoryKVStore();
+  KvStoreContext.getInstance().initialize(kvStore);
+};
+
+export async function createAccount() {
+  const { account, authSecretStorage } = await createJazzContext({
+    defaultProfileName: "Inspector test account",
+    crypto: await WasmCrypto.create(),
+    sessionProvider: randomSessionProvider,
+    authSecretStorage: new AuthSecretStorage(),
+    peersToLoadFrom: [
+      createWebSocketPeer({
+        id: "upstream",
+        role: "server",
+        websocket: new WebSocket(
+          "wss://cloud.jazz.tools/?key=inspector-test@jazz.tools",
+        ),
+      }),
+    ],
+  });
+
+  await account.waitForAllCoValuesSync();
+
+  const credentials = await authSecretStorage.get();
+  if (!credentials) {
+    throw new Error("No credentials found");
+  }
+
+  return { account, ...credentials };
+}

examples/inspector/vercel.json

@@ -1,8 +1,3 @@
 {
-  "build": {
-    "env": {
-      "APP_NAME": "jazz-inspector"
-    }
-  },
-  "ignoreCommand": "node ../../ignore-vercel-build.js"
+  "ignoreCommand": "npx turbo-ignore"
 }

examples/jazz-nextjs/.gitignore

@@ -39,3 +39,9 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# env files
+.env
+.env.*
+!.env.example
+!.env.test

examples/jazz-nextjs/CHANGELOG.md

@@ -1,5 +1,40 @@
 # jazz-nextjs
 
+## 0.1.9
+
+### Patch Changes
+
+- Updated dependencies [048ac1d]
+  - jazz-tools@0.14.22
+  - jazz-react@0.14.22
+
+## 0.1.8
+
+### Patch Changes
+
+- Updated dependencies [e7e505e]
+- Updated dependencies [13b57aa]
+- Updated dependencies [5662faa]
+- Updated dependencies [2116a59]
+  - jazz-tools@0.14.21
+  - jazz-react@0.14.21
+
+## 0.1.7
+
+### Patch Changes
+
+- Updated dependencies [6f72419]
+- Updated dependencies [04b20c2]
+  - jazz-tools@0.14.20
+  - jazz-react@0.14.20
+
+## 0.1.6
+
+### Patch Changes
+
+- jazz-react@0.14.19
+- jazz-tools@0.14.19
+
 ## 0.1.5
 
 ### Patch Changes

examples/jazz-nextjs/package.json

@@ -1,6 +1,5 @@
 {
   "name": "jazz-nextjs",
-  "version": "0.1.5",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
@@ -12,6 +11,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "next": "15.3.2",
+    "jazz-inspector": "workspace:*",
     "jazz-react": "workspace:*",
     "jazz-tools": "workspace:*"
   },

examples/jazz-nextjs/src/jazz.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { JazzInspector } from "jazz-inspector";
 import { JazzProvider } from "jazz-react";
 
 export function Jazz({ children }: { children: React.ReactNode }) {
@@ -11,6 +12,7 @@ export function Jazz({ children }: { children: React.ReactNode }) {
       }}
     >
       {children}
+      <JazzInspector />
     </JazzProvider>
   );
 }

examples/jazz-paper-scissors/.gitignore

@@ -1,3 +1,7 @@
 dist
 
-.env
+# env files
+.env
+.env.*
+!.env.example
+!.env.test

examples/jazz-paper-scissors/index.html

@@ -2,8 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="/favicon.ico" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"

examples/jazz-paper-scissors/package.json

@@ -41,6 +41,6 @@
     "npm-run-all": "^4.1.5",
     "tsx": "^4.19.3",
     "typescript": "~5.6.2",
-    "vite": "6.0.11"
+    "vite": "6.3.5"
   }
 }

examples/jazz-paper-scissors/vercel.json

@@ -0,0 +1,3 @@
+{
+  "ignoreCommand": "npx turbo-ignore"
+}

examples/multi-cursors/.env.local.example

@@ -1,3 +0,0 @@
-VITE_CURSOR_FEED_ID=multi-cursors-250425-1708
-VITE_GROUP_ID=co_zXE8C8sd9QxEbxnt3neRvFRPFUc
-VITE_OLD_CURSOR_AGE_SECONDS=5

examples/multi-cursors/.gitignore

@@ -25,4 +25,9 @@ dist-ssr
 *.sln
 *.sw?
 
-playwright-report
+playwright-report
+# env files
+.env
+.env.*
+!.env.example
+!.env.test

examples/multi-cursors/CHANGELOG.md

@@ -1,5 +1,40 @@
 # multi-cursors
 
+## 0.0.112
+
+### Patch Changes
+
+- Updated dependencies [048ac1d]
+  - jazz-tools@0.14.22
+  - jazz-react@0.14.22
+
+## 0.0.111
+
+### Patch Changes
+
+- Updated dependencies [e7e505e]
+- Updated dependencies [13b57aa]
+- Updated dependencies [5662faa]
+- Updated dependencies [2116a59]
+  - jazz-tools@0.14.21
+  - jazz-react@0.14.21
+
+## 0.0.110
+
+### Patch Changes
+
+- Updated dependencies [6f72419]
+- Updated dependencies [04b20c2]
+  - jazz-tools@0.14.20
+  - jazz-react@0.14.20
+
+## 0.0.109
+
+### Patch Changes
+
+- jazz-react@0.14.19
+- jazz-tools@0.14.19
+
 ## 0.0.108
 
 ### Patch Changes

examples/multi-cursors/README.md

@@ -1,65 +1,87 @@
 # Jazz Multi-Cursors Example
 
 Track user presence on a canvas with multiple cursors and out of bounds indicators.
-Live version: [https://multi-cursors-demo.jazz.tools/](https://multi-cursors-demo.jazz.tools/)
+Live version: [https://multi-cursors.demo.jazz.tools/](https://multi-cursors.demo.jazz.tools/)
 
 ## 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 multi-cursors-app --example multi-cursors
 ```
 
 Go to the new project directory.
+
 ```bash
 cd multi-cursors-app
 ```
 
 Run the dev server.
+
 ```bash
 npm run dev
 ```
 
+If you want to persist the cursors between server restarts, you'll need to update your .env file. Check your console logs for the correct values to add to your .env file.
+
+```
+VITE_CURSOR_FEED_ID=
+VITE_GROUP_ID=
+VITE_OLD_CURSOR_AGE_SECONDS=5
+```
+
 ### 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/multi-cursors/
 ```
 
 Start the dev server.
+
 ```bash
 pnpm dev
 ```
 
 Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
 
+If you want to persist the cursors between server restarts, you'll need to update your .env file. Check your console logs for the correct values to add to your .env file.
+
+```
+VITE_CURSOR_FEED_ID=
+VITE_GROUP_ID=
+VITE_OLD_CURSOR_AGE_SECONDS=5
+```
+
 ## 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 jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of `JazzProvider` component in [./src/main.tsx](./src/main.tsx).
+You can also run a local sync server by running `npx jazz-run sync`, and setting the `sync` parameter of `JazzProvider` in [./src/main.tsx](./src/main.tsx) to `{ peer: "ws://localhost:4200" }`.

examples/multi-cursors/index.html

@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="UTF-8" />
-  <link rel="icon" type="image/png" href="/favicon.ico" />
+  <link rel="icon" type="image/x-icon" href="./favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Jazz | Multi-cursors</title>
 </head>

examples/multi-cursors/package.json

@@ -1,7 +1,6 @@
 {
   "name": "multi-cursors",
   "private": true,
-  "version": "0.0.108",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,6 +12,7 @@
   },
   "dependencies": {
     "@react-spring/web": "^9.7.5",
+    "jazz-inspector": "workspace:*",
     "jazz-react": "workspace:*",
     "jazz-tools": "workspace:*",
     "react": "19.0.0",
@@ -23,14 +23,14 @@
     "@biomejs/biome": "1.9.4",
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",
-    "@vitejs/plugin-react": "^4.3.3",
+    "@vitejs/plugin-react": "^4.5.1",
     "autoprefixer": "^10.4.20",
     "globals": "^15.11.0",
     "is-ci": "^3.0.1",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.4.17",
     "typescript": "5.6.2",
-    "vite": "6.0.11",
+    "vite": "6.3.5",
     "vitest": "3.1.1"
   }
 }