fix: remove the prepublish hook

Version Packages

.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:

.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
@@ -54,6 +54,12 @@ You'll need Node.js 20.x or 22.x installed (we're working on support for 23.x),
    cd homepage && pnpm install
    ```
 
+4. **Go back to the project root**:
+
+   ```bash
+   cd ..
+   ```
+
 4. **Build the packages**:
 
    ```bash

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": {
+          "recommended": true
-            "useImportExtensions": "off"
-          }
         }
       }
     },
     {
-      "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,114 @@
 # chat-rn-clerk
 
+## 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

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.70",
+  "version": "1.0.81",
   "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",
+    "web": "expo start --web"
-    "test": "jest --watchAll"
   },
   "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",
+    "readable-stream": "4.7.0"
-    "web-streams-polyfill": "^3.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

examples/chat-rn-clerk/polyfills.js

@@ -1,8 +1,17 @@
-import "react-native-polyfill-globals/auto";
+/* eslint-disable import/order */
-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";
 
+// @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,90 @@
 # chat-rn
 
+## 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

examples/chat-rn/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-rn",
-  "version": "1.0.67",
+  "version": "1.0.77",
   "main": "index.js",
   "scripts": {
     "build": "expo export -p ios",
@@ -13,11 +13,12 @@
   },
   "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",
@@ -33,16 +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-nitro-modules": "0.21.0",
-    "react-native-polyfill-globals": "^3.1.0",
-    "react-native-quick-crypto": "1.0.0-beta.12",
     "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",
+    "readable-stream": "4.7.0"
-    "web-streams-polyfill": "^3.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

examples/chat-rn/polyfills.js

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

examples/chat-rn/src/App.tsx

@@ -9,7 +9,7 @@ import * as Linking from "expo-linking";
 import React, { StrictMode, useEffect, useState } from "react";
 import HandleInviteScreen from "./invite";
 
-import { JazzProvider, RNQuickCrypto } from "jazz-react-native";
+import { JazzProvider } from "jazz-react-native";
 import { apiKey } from "./apiKey";
 import ChatScreen from "./chat";
 
@@ -50,7 +50,6 @@ function App() {
         sync={{
           peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
         }}
-        CryptoProvider={RNQuickCrypto}
       >
         <NavigationContainer linking={linking} ref={navigationRef}>
           <Stack.Navigator initialRouteName={initialRoute}>

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-vue/CHANGELOG.md

@@ -1,5 +1,95 @@
 # chat-vue
 
+## 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

examples/chat-vue/package.json

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

examples/chat/CHANGELOG.md

@@ -1,5 +1,93 @@
 # jazz-example-chat
 
+## 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

examples/chat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-chat",
   "private": true,
-  "version": "0.0.150",
+  "version": "0.0.159",
   "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:e2e": "playwright test",
-    "test:ui": "playwright test --ui"
+    "test:e2e:ui": "playwright test --ui"
   },
   "dependencies": {
     "clsx": "^2.0.0",

examples/clerk/CHANGELOG.md

@@ -1,5 +1,92 @@
 # minimal-auth-clerk
 
+## 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

examples/clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clerk",
   "private": true,
-  "version": "0.0.49",
+  "version": "0.0.58",
   "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.5",
+    "jazz-react-auth-clerk": "workspace:0.11.0",
     "jazz-tools": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

examples/file-share-svelte/CHANGELOG.md

@@ -1,5 +1,82 @@
 # file-share-svelte
 
+## 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

examples/file-share-svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "file-share-svelte",
-  "version": "0.0.34",
+  "version": "0.0.43",
   "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:e2e": "playwright test",
-    "test:ui": "playwright test --ui"
+    "test:e2e:ui": "playwright test --ui"
   },
   "devDependencies": {
     "@sveltejs/adapter-vercel": "^5.5.0",

examples/form/CHANGELOG.md

@@ -1,5 +1,97 @@
 # form
 
+## 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

examples/form/package.json

@@ -1,7 +1,7 @@
 {
   "name": "form",
   "private": true,
-  "version": "0.0.45",
+  "version": "0.1.0",
   "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,92 @@
 # image-upload
 
+## 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

examples/image-upload/package.json

@@ -1,7 +1,7 @@
 {
   "name": "image-upload",
   "private": true,
-  "version": "0.0.47",
+  "version": "0.0.56",
   "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: 2rem 0.75rem;
-  padding-left: 0.75rem;
   max-width: 800px;
 }
 

examples/inspector/CHANGELOG.md

@@ -1,5 +1,52 @@
 # 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

examples/inspector/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-inspector-app",
   "private": true,
-  "version": "0.0.106",
+  "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.4",
+    "cojson": "workspace:0.11.0",
-    "cojson-transport-ws": "workspace:0.10.4",
+    "cojson-transport-ws": "workspace:0.11.0",
-    "hash-slash": "workspace:0.2.1",
+    "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/music-player/CHANGELOG.md

@@ -1,5 +1,92 @@
 # jazz-example-musicplayer
 
+## 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

examples/music-player/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-music-player",
   "private": true,
-  "version": "0.0.71",
+  "version": "0.0.80",
   "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:e2e": "playwright test",
-    "test:ui": "playwright test --ui"
+    "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.5",
+    "jazz-react": "workspace:0.11.0",
-    "jazz-tools": "workspace:0.10.5",
+    "jazz-tools": "workspace:0.11.0",
     "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;
   }
+}
 
-  /**
+export async function removeTrackFromPlaylist(
-   * Since musicTracks are created as private values (see uploadMusicTracks)
+  playlist: Playlist,
-   * to make them shareable as part of the playlist we are cloning them
+  track: MusicTrack,
-   * and setting the playlist group as owner of the clone
+) {
-   *
+  const notAdded = !playlist.tracks?.some(
-   * Doing this for backwards compatibility for when the Group inheritance wasn't possible
+    (t) => t?.id === track.id || t?._refs.sourceTrack?.id === track.id,
-   */
-  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,
   );
 
-  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
+                <Fragment key={index}>
-                  key={index}
+                  <DropdownMenuItem
-                  onSelect={() => handleAddToPlaylist(playlist)}
+                    key={`add-${index}`}
-                >
+                    onSelect={() => handleAddToPlaylist(playlist)}
-                  Add to {playlist.title}
+                  >
-                </DropdownMenuItem>
+                    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/organization/CHANGELOG.md

@@ -1,5 +1,83 @@
 # organization
 
+## 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

examples/organization/package.json

@@ -1,7 +1,7 @@
 {
   "name": "organization",
   "private": true,
-  "version": "0.0.43",
+  "version": "0.0.52",
   "type": "module",
   "scripts": {
     "dev": "vite",

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

examples/organization/tsconfig.tsbuildinfo

@@ -1 +0,0 @@
-{"root":["./src/acceptinvitepage.tsx","./src/homepage.tsx","./src/layout.tsx","./src/organizationpage.tsx","./src/main.tsx","./src/schema.ts","./src/vite-env.d.ts","./src/components/createorganization.tsx","./src/components/createproject.tsx","./src/components/errors.tsx","./src/components/heading.tsx","./src/components/invitelink.tsx","./src/components/organizationform.tsx","./src/components/organizationmembers.tsx","./src/components/organizationselector.tsx"],"version":"5.6.3"}

examples/passkey-svelte/CHANGELOG.md

@@ -1,5 +1,61 @@
 # passkey-svelte
 
+## 0.0.47
+
+### Patch Changes
+
+- jazz-svelte@0.11.0
+
+## 0.0.46
+
+### Patch Changes
+
+- jazz-svelte@0.10.15
+
+## 0.0.45
+
+### Patch Changes
+
+- jazz-svelte@0.10.14
+
+## 0.0.44
+
+### Patch Changes
+
+- jazz-svelte@0.10.13
+
+## 0.0.43
+
+### Patch Changes
+
+- Updated dependencies [4612e05]
+  - jazz-svelte@0.10.12
+
+## 0.0.42
+
+### Patch Changes
+
+- jazz-svelte@0.10.9
+
+## 0.0.41
+
+### Patch Changes
+
+- jazz-svelte@0.10.8
+
+## 0.0.40
+
+### Patch Changes
+
+- Updated dependencies [1136d9b]
+  - jazz-svelte@0.10.7
+
+## 0.0.39
+
+### Patch Changes
+
+- jazz-svelte@0.10.6
+
 ## 0.0.38
 
 ### Patch Changes

examples/passkey-svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "passkey-svelte",
-  "version": "0.0.38",
+  "version": "0.0.47",
   "type": "module",
   "private": true,
   "scripts": {

examples/passkey/CHANGELOG.md

@@ -1,5 +1,83 @@
 # minimal-auth-passkey
 
+## 0.0.57
+
+### 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.56
+
+### Patch Changes
+
+- Updated dependencies [2f99de0]
+  - jazz-tools@0.10.15
+  - jazz-react@0.10.15
+
+## 0.0.55
+
+### Patch Changes
+
+- Updated dependencies [75211e3]
+  - jazz-tools@0.10.14
+  - jazz-react@0.10.14
+
+## 0.0.54
+
+### Patch Changes
+
+- Updated dependencies [07feedd]
+  - jazz-tools@0.10.13
+  - jazz-react@0.10.13
+
+## 0.0.53
+
+### Patch Changes
+
+- Updated dependencies [4612e05]
+  - jazz-tools@0.10.12
+  - jazz-react@0.10.12
+
+## 0.0.52
+
+### Patch Changes
+
+- jazz-react@0.10.9
+
+## 0.0.51
+
+### Patch Changes
+
+- Updated dependencies [2fb6428]
+  - jazz-tools@0.10.8
+  - jazz-react@0.10.8
+
+## 0.0.50
+
+### Patch Changes
+
+- Updated dependencies [1136d9b]
+- Updated dependencies [0eed228]
+  - jazz-react@0.10.7
+  - jazz-tools@0.10.7
+
+## 0.0.49
+
+### Patch Changes
+
+- Updated dependencies [1d71ca1]
+- Updated dependencies [ada802b]
+  - jazz-react@0.10.6
+  - jazz-tools@0.10.6
+
 ## 0.0.48
 
 ### Patch Changes

examples/passkey/package.json

@@ -1,7 +1,7 @@
 {
   "name": "passkey",
   "private": true,
-  "version": "0.0.48",
+  "version": "0.0.57",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/passphrase/CHANGELOG.md

@@ -1,5 +1,83 @@
 # passphrase
 
+## 0.0.54
+
+### 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.53
+
+### Patch Changes
+
+- Updated dependencies [2f99de0]
+  - jazz-tools@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
+
+## 0.0.51
+
+### Patch Changes
+
+- Updated dependencies [07feedd]
+  - jazz-tools@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
+
+## 0.0.49
+
+### Patch Changes
+
+- jazz-react@0.10.9
+
+## 0.0.48
+
+### Patch Changes
+
+- Updated dependencies [2fb6428]
+  - jazz-tools@0.10.8
+  - jazz-react@0.10.8
+
+## 0.0.47
+
+### Patch Changes
+
+- Updated dependencies [1136d9b]
+- Updated dependencies [0eed228]
+  - jazz-react@0.10.7
+  - jazz-tools@0.10.7
+
+## 0.0.46
+
+### Patch Changes
+
+- Updated dependencies [1d71ca1]
+- Updated dependencies [ada802b]
+  - jazz-react@0.10.6
+  - jazz-tools@0.10.6
+
 ## 0.0.45
 
 ### Patch Changes

examples/passphrase/package.json

@@ -1,7 +1,7 @@
 {
   "name": "passphrase",
   "private": true,
-  "version": "0.0.45",
+  "version": "0.0.54",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/passphrase/src/index.css

@@ -66,3 +66,72 @@ main {
   margin: 0 auto;
   text-align: center;
 }
+
+.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/passphrase/src/main.tsx

@@ -1,10 +1,142 @@
-import { JazzProvider, PassphraseAuthBasicUI } from "jazz-react";
+import { JazzProvider, usePassphraseAuth } from "jazz-react";
-import { StrictMode } from "react";
+import { StrictMode, useState } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
 import { wordlist } from "./wordlist.ts";
 
+function PassphraseAuthBasicUI(props: {
+  appName: string;
+  wordlist: string[];
+  children?: React.ReactNode;
+}) {
+  const auth = usePassphraseAuth({
+    wordlist: props.wordlist,
+  });
+
+  const [step, setStep] = useState<"initial" | "create" | "login">("initial");
+  const [loginPassphrase, setLoginPassphrase] = useState("");
+  const [isCopied, setIsCopied] = useState(false);
+  const [currentPassphrase, setCurrentPassphrase] = useState(() =>
+    auth.generateRandomPassphrase(),
+  );
+
+  if (auth.state === "signedIn") {
+    return props.children ?? null;
+  }
+
+  const handleCreateAccount = async () => {
+    setStep("create");
+  };
+
+  const handleLogin = () => {
+    setStep("login");
+  };
+
+  const handleReroll = () => {
+    const newPassphrase = auth.generateRandomPassphrase();
+    setCurrentPassphrase(newPassphrase);
+    setIsCopied(false);
+  };
+
+  const handleBack = () => {
+    setStep("initial");
+    setLoginPassphrase("");
+  };
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(auth.passphrase);
+    setIsCopied(true);
+  };
+
+  const handleLoginSubmit = async () => {
+    await auth.logIn(loginPassphrase);
+    setStep("initial");
+    setLoginPassphrase("");
+  };
+
+  const handleNext = async () => {
+    await auth.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"
+            >
+              Create new account
+            </button>
+            <button onClick={handleLogin} className="auth-button-secondary">
+              Log in
+            </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 === "login" && (
+          <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>
+        )}
+      </div>
+    </div>
+  );
+}
+
 function JazzAndAuth({ children }: { children: React.ReactNode }) {
   return (
     <JazzProvider

examples/password-manager/CHANGELOG.md

@@ -1,5 +1,83 @@
 # jazz-password-manager
 
+## 0.0.78
+
+### 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.77
+
+### Patch Changes
+
+- Updated dependencies [2f99de0]
+  - jazz-tools@0.10.15
+  - jazz-react@0.10.15
+
+## 0.0.76
+
+### Patch Changes
+
+- Updated dependencies [75211e3]
+  - jazz-tools@0.10.14
+  - jazz-react@0.10.14
+
+## 0.0.75
+
+### Patch Changes
+
+- Updated dependencies [07feedd]
+  - jazz-tools@0.10.13
+  - jazz-react@0.10.13
+
+## 0.0.74
+
+### Patch Changes
+
+- Updated dependencies [4612e05]
+  - jazz-tools@0.10.12
+  - jazz-react@0.10.12
+
+## 0.0.73
+
+### Patch Changes
+
+- jazz-react@0.10.9
+
+## 0.0.72
+
+### Patch Changes
+
+- Updated dependencies [2fb6428]
+  - jazz-tools@0.10.8
+  - jazz-react@0.10.8
+
+## 0.0.71
+
+### Patch Changes
+
+- Updated dependencies [1136d9b]
+- Updated dependencies [0eed228]
+  - jazz-react@0.10.7
+  - jazz-tools@0.10.7
+
+## 0.0.70
+
+### Patch Changes
+
+- Updated dependencies [1d71ca1]
+- Updated dependencies [ada802b]
+  - jazz-react@0.10.6
+  - jazz-tools@0.10.6
+
 ## 0.0.69
 
 ### Patch Changes

examples/password-manager/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-password-manager",
   "private": true,
-  "version": "0.0.69",
+  "version": "0.0.78",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -12,8 +12,8 @@
     "clean-install": "rm -rf node_modules pnpm-lock.yaml && pnpm install"
   },
   "dependencies": {
-    "jazz-react": "workspace:0.10.5",
+    "jazz-react": "workspace:0.11.0",
-    "jazz-tools": "workspace:0.10.5",
+    "jazz-tools": "workspace:0.11.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.41.5",

examples/password-manager/src/3_vault.tsx

@@ -6,7 +6,7 @@ import NewItemModal from "./components/new-item-modal";
 import Table from "./components/table";
 
 import { useAccount, useCoState } from "jazz-react";
-import { CoMapInit, Group, ID } from "jazz-tools";
+import { CoMapInit, ID } from "jazz-tools";
 import { useNavigate, useParams } from "react-router-dom";
 import { Folder, FolderList, PasswordItem } from "./1_schema";
 import {
@@ -136,20 +136,14 @@ const VaultPage: React.FC = () => {
           </Button>
           <Button
             onClick={() => setEditingItem(item)}
-            disabled={
+            disabled={!me.canWrite(item)}
-              item._owner.castAs(Group).myRole() !== "admin" &&
-              item._owner.castAs(Group).myRole() !== "writer"
-            }
           >
             Edit
           </Button>
           <Button
             onClick={() => handleDeleteItem(item)}
             variant="danger"
-            disabled={
+            disabled={!me.canWrite(item)}
-              item._owner.castAs(Group).myRole() !== "admin" &&
-              item._owner.castAs(Group).myRole() !== "writer"
-            }
           >
             Delete
           </Button>
@@ -210,21 +204,13 @@ const VaultPage: React.FC = () => {
         <div className="flex gap-2">
           <Button
             onClick={() => setIsNewItemModalOpen(true)}
-            disabled={
+            disabled={!selectedFolder || !me.canWrite(selectedFolder)}
-              !selectedFolder ||
-              (selectedFolder._owner.castAs(Group).myRole() !== "admin" &&
-                selectedFolder._owner.castAs(Group).myRole() !== "writer")
-            }
           >
             New Item
           </Button>
           <Button
             onClick={() => setIsInviteModalOpen(true)}
-            disabled={
+            disabled={!selectedFolder || !me.canWrite(selectedFolder)}
-              !selectedFolder ||
-              (selectedFolder._owner.castAs(Group).myRole() !== "admin" &&
-                selectedFolder._owner.castAs(Group).myRole() !== "writer")
-            }
           >
             Share Folder
           </Button>

examples/password-manager/src/components/invite-modal.tsx

@@ -21,11 +21,9 @@ const InviteModal: React.FC<InviteModalProps> = ({
   >("reader");
   const [inviteLink, setInviteLink] = useState("");
 
-  const members = selectedFolder?._owner.castAs(Group).members;
+  const members = selectedFolder?._owner.members;
   const invitedMembers = members
-    ? members
+    ? members.filter((m) => !m.account?.isMe).map((m) => m.account)
-        .filter((m) => !m.account?.isMe && m.role !== "revoked")
-        .map((m) => m.account)
     : [];
 
   const handleCreateInviteLink = () => {

examples/pets/CHANGELOG.md

@@ -1,5 +1,92 @@
 # jazz-example-pets
 
+## 0.0.176
+
+### 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.175
+
+### Patch Changes
+
+- Updated dependencies [2f99de0]
+  - jazz-tools@0.10.15
+  - jazz-browser-media-images@0.10.15
+  - jazz-react@0.10.15
+
+## 0.0.174
+
+### Patch Changes
+
+- Updated dependencies [75211e3]
+  - jazz-tools@0.10.14
+  - jazz-react@0.10.14
+  - jazz-browser-media-images@0.10.14
+
+## 0.0.173
+
+### Patch Changes
+
+- Updated dependencies [07feedd]
+  - jazz-tools@0.10.13
+  - jazz-browser-media-images@0.10.13
+  - jazz-react@0.10.13
+
+## 0.0.172
+
+### Patch Changes
+
+- Updated dependencies [4612e05]
+  - jazz-tools@0.10.12
+  - jazz-react@0.10.12
+  - jazz-browser-media-images@0.10.12
+
+## 0.0.171
+
+### Patch Changes
+
+- jazz-browser-media-images@0.10.9
+- jazz-react@0.10.9
+
+## 0.0.170
+
+### Patch Changes
+
+- Updated dependencies [2fb6428]
+  - jazz-tools@0.10.8
+  - jazz-react@0.10.8
+  - jazz-browser-media-images@0.10.8
+
+## 0.0.169
+
+### 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.168
+
+### 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.167
 
 ### Patch Changes

examples/pets/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-pets",
   "private": true,
-  "version": "0.0.167",
+  "version": "0.0.176",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -10,8 +10,8 @@
     "format-and-lint:fix": "biome check . --write",
     "preview": "vite preview",
     "sync": "jazz-run sync",
-    "test": "playwright test",
+    "test:e2e": "playwright test",
-    "test:ui": "playwright test --ui"
+    "test:e2e:ui": "playwright test --ui"
   },
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.0.4",
@@ -19,9 +19,9 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-browser-media-images": "workspace:0.10.5",
+    "jazz-browser-media-images": "workspace:0.11.0",
-    "jazz-react": "workspace:0.10.5",
+    "jazz-react": "workspace:0.11.0",
-    "jazz-tools": "workspace:0.10.5",
+    "jazz-tools": "workspace:0.11.0",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.3.1",
@@ -41,7 +41,7 @@
     "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.20",
     "is-ci": "^3.0.1",
-    "jazz-run": "workspace:0.10.5",
+    "jazz-run": "workspace:0.11.0",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.4.17",
     "typescript": "~5.6.2",

examples/pets/src/3_NewPetPostForm.tsx

@@ -34,7 +34,7 @@ export function NewPetPostForm() {
       if (newPetPost) {
         newPetPost.name = name;
       } else {
-        const petPostGroup = Group.create({ owner: me });
+        const petPostGroup = Group.create();
         const petPost = PartialPetPost.create(
           {
             name,

examples/pets/src/4_RatePetPostUI.tsx

@@ -2,7 +2,7 @@ import { useParams } from "react-router";
 
 import { PetPost, PetReactions, ReactionTypes } from "./1_schema";
 
-import { ProgressiveImg } from "jazz-react";
+import { ProgressiveImg, useAccount } from "jazz-react";
 import { useCoState } from "jazz-react";
 import { ID } from "jazz-tools";
 import uniqolor from "uniqolor";
@@ -26,6 +26,7 @@ const reactionEmojiMap: {
 export function RatePetPostUI() {
   const petPostID = useParams<{ petPostId: ID<PetPost> }>().petPostId;
 
+  const { me } = useAccount();
   const petPost = useCoState(PetPost, petPostID);
 
   return (
@@ -60,7 +61,7 @@ export function RatePetPostUI() {
         ))}
       </div>
 
-      {petPost?._owner.myRole() === "admin" && petPost.reactions && (
+      {petPost && me.canAdmin(petPost) && petPost.reactions && (
         <ReactionOverview petReactions={petPost.reactions} />
       )}
     </div>

examples/pets/src/components/ShareButton.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 
 import { PetPost } from "../1_schema";
 
-import { createInviteLink } from "jazz-react";
+import { createInviteLink, useAccount } from "jazz-react";
 import QRCode from "qrcode";
 
 import { Button, useToast } from "../basicComponents";
@@ -10,9 +10,11 @@ import { Button, useToast } from "../basicComponents";
 export function ShareButton({ petPost }: { petPost?: PetPost | null }) {
   const [existingInviteLink, setExistingInviteLink] = useState<string>();
   const { toast } = useToast();
+  const { me } = useAccount();
 
   return (
-    petPost?._owner.myRole() === "admin" && (
+    petPost &&
+    me.canAdmin(petPost) && (
       <Button
         size="sm"
         className="py-0"

examples/reactions/CHANGELOG.md

@@ -1,5 +1,93 @@
 # reactions
 
+## 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]
+  - hash-slash@0.2.2
+  - jazz-react@0.10.6
+  - jazz-tools@0.10.6
+  - jazz-browser-media-images@0.10.6
+
 ## 0.0.47
 
 ### Patch Changes

examples/reactions/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reactions",
   "private": true,
-  "version": "0.0.47",
+  "version": "0.0.56",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/reactions/src/App.tsx

@@ -9,8 +9,7 @@ function App() {
   const router = useIframeHashRouter();
 
   const createReactions = () => {
-    if (!me) return;
+    const group = Group.create();
-    const group = Group.create({ owner: me });
     group.addMember("everyone", "writer");
     const chat = Reactions.create([], { owner: group });
     router.navigate("/#/reactions/" + chat.id);

examples/todo-vue/CHANGELOG.md

@@ -1,5 +1,95 @@
 # todo-vue
 
+## 0.0.61
+
+### 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.60
+
+### Patch Changes
+
+- Updated dependencies [2f99de0]
+  - jazz-tools@0.10.15
+  - jazz-browser@0.10.15
+  - jazz-vue@0.10.15
+
+## 0.0.59
+
+### Patch Changes
+
+- Updated dependencies [75211e3]
+  - jazz-tools@0.10.14
+  - jazz-browser@0.10.14
+  - jazz-vue@0.10.14
+
+## 0.0.58
+
+### Patch Changes
+
+- Updated dependencies [07feedd]
+  - jazz-tools@0.10.13
+  - jazz-browser@0.10.13
+  - jazz-vue@0.10.13
+
+## 0.0.57
+
+### Patch Changes
+
+- Updated dependencies [4612e05]
+  - jazz-tools@0.10.12
+  - jazz-vue@0.10.12
+  - jazz-browser@0.10.12
+
+## 0.0.56
+
+### Patch Changes
+
+- Updated dependencies [834203f]
+  - jazz-browser@0.10.9
+  - jazz-vue@0.10.9
+
+## 0.0.55
+
+### 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.54
+
+### 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.53
+
+### Patch Changes
+
+- Updated dependencies [ada802b]
+  - jazz-tools@0.10.6
+  - jazz-browser@0.10.6
+  - jazz-vue@0.10.6
+
 ## 0.0.52
 
 ### Patch Changes

examples/todo-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "todo-vue",
-  "version": "0.0.52",
+  "version": "0.0.61",
   "private": true,
   "type": "module",
   "scripts": {

examples/todo/CHANGELOG.md

@@ -1,5 +1,83 @@
 # jazz-example-todo
 
+## 0.0.175
+
+### 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.174
+
+### Patch Changes
+
+- Updated dependencies [2f99de0]
+  - jazz-tools@0.10.15
+  - jazz-react@0.10.15
+
+## 0.0.173
+
+### Patch Changes
+
+- Updated dependencies [75211e3]
+  - jazz-tools@0.10.14
+  - jazz-react@0.10.14
+
+## 0.0.172
+
+### Patch Changes
+
+- Updated dependencies [07feedd]
+  - jazz-tools@0.10.13
+  - jazz-react@0.10.13
+
+## 0.0.171
+
+### Patch Changes
+
+- Updated dependencies [4612e05]
+  - jazz-tools@0.10.12
+  - jazz-react@0.10.12
+
+## 0.0.170
+
+### Patch Changes
+
+- jazz-react@0.10.9
+
+## 0.0.169
+
+### Patch Changes
+
+- Updated dependencies [2fb6428]
+  - jazz-tools@0.10.8
+  - jazz-react@0.10.8
+
+## 0.0.168
+
+### Patch Changes
+
+- Updated dependencies [1136d9b]
+- Updated dependencies [0eed228]
+  - jazz-react@0.10.7
+  - jazz-tools@0.10.7
+
+## 0.0.167
+
+### Patch Changes
+
+- Updated dependencies [1d71ca1]
+- Updated dependencies [ada802b]
+  - jazz-react@0.10.6
+  - jazz-tools@0.10.6
+
 ## 0.0.166
 
 ### Patch Changes

examples/todo/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-todo",
   "private": true,
-  "version": "0.0.166",
+  "version": "0.0.175",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,8 +16,8 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-react": "workspace:0.10.5",
+    "jazz-react": "workspace:0.11.0",
-    "jazz-tools": "workspace:0.10.5",
+    "jazz-tools": "workspace:0.11.0",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.3.1",

examples/todo/src/3_NewProjectForm.tsx

@@ -21,7 +21,7 @@ export function NewProjectForm() {
       // To create a new todo project, we first create a `Group`,
       // which is a scope for defining access rights (reader/writer/admin)
       // of its members, which will apply to all CoValues owned by that group.
-      const projectGroup = Group.create({ owner: me });
+      const projectGroup = Group.create();
 
       // Then we create an empty todo project within that group
       const project = TodoProject.create(

examples/todo/src/components/InviteButton.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 
 import QRCode from "qrcode";
 
-import { createInviteLink } from "jazz-react";
+import { createInviteLink, useAccount } from "jazz-react";
 import { CoValue } from "jazz-tools";
 import { Button, useToast } from "../basicComponents";
 
@@ -15,9 +15,11 @@ export function InviteButton<T extends CoValue>({
 }) {
   const [existingInviteLink, setExistingInviteLink] = useState<string>();
   const { toast } = useToast();
+  const { me } = useAccount();
 
   return (
-    value?._owner?.myRole() === "admin" && (
+    value &&
+    me.canAdmin(value) && (
       <Button
         size="sm"
         className="py-0"

examples/version-history/CHANGELOG.md

@@ -1,5 +1,83 @@
 # version-history
 
+## 0.0.53
+
+### 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.52
+
+### Patch Changes
+
+- Updated dependencies [2f99de0]
+  - jazz-tools@0.10.15
+  - jazz-react@0.10.15
+
+## 0.0.51
+
+### Patch Changes
+
+- Updated dependencies [75211e3]
+  - jazz-tools@0.10.14
+  - jazz-react@0.10.14
+
+## 0.0.50
+
+### Patch Changes
+
+- Updated dependencies [07feedd]
+  - jazz-tools@0.10.13
+  - jazz-react@0.10.13
+
+## 0.0.49
+
+### Patch Changes
+
+- Updated dependencies [4612e05]
+  - jazz-tools@0.10.12
+  - jazz-react@0.10.12
+
+## 0.0.48
+
+### Patch Changes
+
+- jazz-react@0.10.9
+
+## 0.0.47
+
+### Patch Changes
+
+- Updated dependencies [2fb6428]
+  - jazz-tools@0.10.8
+  - jazz-react@0.10.8
+
+## 0.0.46
+
+### Patch Changes
+
+- Updated dependencies [1136d9b]
+- Updated dependencies [0eed228]
+  - jazz-react@0.10.7
+  - jazz-tools@0.10.7
+
+## 0.0.45
+
+### Patch Changes
+
+- Updated dependencies [1d71ca1]
+- Updated dependencies [ada802b]
+  - jazz-react@0.10.6
+  - jazz-tools@0.10.6
+
 ## 0.0.44
 
 ### Patch Changes

examples/version-history/package.json

@@ -1,7 +1,7 @@
 {
   "name": "version-history",
   "private": true,
-  "version": "0.0.44",
+  "version": "0.0.53",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/version-history/src/App.tsx

@@ -15,7 +15,7 @@ function App() {
   const issue = useCoState(Issue, issueID);
 
   const createIssue = () => {
-    const group = Group.create({ owner: me });
+    const group = Group.create();
     group.addMember("everyone", "writer");
 
     const newIssue = Issue.create(

examples/version-history/src/Project.tsx

@@ -1,4 +1,4 @@
-import { createInviteLink } from "jazz-react";
+import { createInviteLink, useAccount } from "jazz-react";
 import { useCoState } from "jazz-react";
 import { ID } from "jazz-tools";
 import { IssueComponent } from "./Issue.tsx";
@@ -21,14 +21,15 @@ export function ProjectComponent({ projectID }: { projectID: ID<Project> }) {
           estimate: 0,
           status: "backlog",
         },
-        { owner: project._owner },
+        project._owner,
       ),
     );
   };
+  const { me } = useAccount();
   return project ? (
     <div>
       <h1>{project.name}</h1>
-      {project._owner?.myRole() === "admin" && (
+      {me.canAdmin(project) && (
         <>
           <button onClick={() => invite("reader")}>Invite Guest</button>
           <button onClick={() => invite("writer")}>Invite Member</button>

flake.lock

@@ -20,11 +20,11 @@
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1737885589,
+        "lastModified": 1739580444,
-        "narHash": "sha256-Zf0hSrtzaM1DEz8//+Xs51k/wdSajticVrATqDrfQjg=",
+        "narHash": "sha256-+/bSz4EAVbqz8/HsIGLroF8aNaO8bLRL7WfACN+24g4=",
         "owner": "nixos",
         "repo": "nixpkgs",
-        "rev": "852ff1d9e153d8875a83602e03fdef8a63f0ecf8",
+        "rev": "8bb37161a0488b89830168b81c48aed11569cb93",
         "type": "github"
       },
       "original": {

flake.nix

@@ -16,15 +16,19 @@
       {
         devShells.default = pkgs.mkShell {
           buildInputs = with pkgs; [
+            # General development
+            git
+            turbo
+            
+            # JS development
             nodejs_22
             nodePackages.pnpm
-            git
           ];
 
           shellHook = ''
             echo ""
             echo "Welcome to the Jazz development environment!"
-            echo "Run 'pnpm install' to install the dependencies."
+            echo "Run 'pnpm install' to install dependencies."
             echo ""
           '';
         };

homepage/design-system/src/app/components/atoms/Alert.tsx

@@ -0,0 +1,49 @@
+import clsx from "clsx";
+import type { ReactNode } from "react";
+import { Icon } from "./Icon";
+
+interface Props {
+  children: ReactNode;
+  variant?: "warning" | "info";
+  title: string;
+  className?: string;
+}
+
+export function Alert({
+  children,
+  variant = "warning",
+  title,
+  className,
+}: Props) {
+  return (
+    <div
+      className={clsx(
+        "border-l-4 p-4 pl-6 dark:bg-red-200/5 overflow-hidden relative rounded",
+        {
+          "border-yellow-400 bg-yellow-50 dark:border-yellow-500 dark:bg-yellow-200/5":
+            variant === "warning",
+          "border-blue-400 bg-blue-50 dark:border-blue-500 dark:bg-blue-200/5":
+            variant === "info",
+        },
+        className,
+      )}
+    >
+      <span
+        className={clsx(
+          "text-sm font-bold flex items-center gap-1",
+          variant === "warning" && "text-yellow-700 dark:text-yellow-400",
+          variant === "info" && "text-blue-700 dark:text-blue-400",
+        )}
+      >
+        <Icon
+          name={variant}
+          size="7xl"
+          className="absolute -z-10 right-0 opacity-5 top-0 rotate-12 pointer-events-none"
+        />
+        <Icon name={variant} size="xs" />
+        {title}
+      </span>
+      <span className={clsx("text-sm")}>{children}</span>
+    </div>
+  );
+}

homepage/design-system/src/app/components/atoms/Icon.tsx

@@ -1,4 +1,6 @@
 import {
+  AlertCircleIcon,
+  AlertTriangleIcon,
   ArrowDownIcon,
   ArrowRightIcon,
   BookTextIcon,
@@ -8,15 +10,18 @@ import {
   ChevronRight,
   CodeIcon,
   CopyIcon,
+  FileLock2Icon,
   FileTextIcon,
   FingerprintIcon,
   FolderArchiveIcon,
   GaugeIcon,
   GlobeIcon,
+  HashIcon,
   ImageIcon,
+  InfoIcon,
   LinkIcon,
   LockKeyholeIcon,
-  LucideIcon,
+  type LucideIcon,
   MailIcon,
   MenuIcon,
   MessageCircleQuestionIcon,
@@ -52,6 +57,7 @@ const icons = {
   encryption: LockKeyholeIcon,
   faceId: ScanFace,
   file: FileTextIcon,
+  hash: HashIcon,
   help: MessageCircleQuestionIcon,
   image: ImageIcon,
   instant: GaugeIcon,
@@ -61,12 +67,15 @@ const icons = {
   newsletter: MailIcon,
   offline: WifiOffIcon,
   package: BoxIcon,
+  permissions: FileLock2Icon,
   social: UsersIcon,
   spatialPresence: MousePointerSquareDashedIcon,
   tableOfContents: ScrollIcon,
   touchId: FingerprintIcon,
   upload: UploadCloudIcon,
   zip: FolderArchiveIcon,
+  warning: AlertTriangleIcon,
+  info: InfoIcon,
 };
 
 // copied from tailwind line height https://tailwindcss.com/docs/font-size
@@ -117,7 +126,7 @@ export function Icon({
   className?: string;
 } & React.SVGProps<SVGSVGElement>) {
   if (!icon && (!name || !icons.hasOwnProperty(name))) {
-    throw new Error(`Icon not found`);
+    throw new Error(`Icon not found: ${name}`);
   }
 
   // @ts-ignore

homepage/design-system/src/app/components/organisms/Footer.tsx

@@ -36,7 +36,9 @@ export function Footer({
       <div className="container grid gap-8 md:gap-12">
         <div className="grid grid-cols-12 gap-y-3 sm:items-center pb-8 border-b">
           <div className="col-span-full sm:col-span-6 md:col-span-8">
-            {logo}
+            <Link href="https://garden.co" target="_blank">
+              {logo}
+            </Link>
           </div>
           <p className="col-span-full sm:col-span-6 md:col-span-4 text-sm sm:text-base">
             Playful software for serious problems.

homepage/design-system/tailwind.config.js

@@ -136,6 +136,7 @@ const config = {
               padding: "0.15rem 0.25rem",
               borderRadius: "2px",
               whiteSpace: "nowrap",
+              fontWeight: 400,
             },
             p: {
               marginBottom: theme("spacing.3"),

homepage/homepage/app/(docs)/api-reference/page.tsx

@@ -1,8 +1,16 @@
 import { packages } from "@/lib/packages";
 import { clsx } from "clsx";
 import { Icon } from "gcmp-design-system/src/app/components/atoms/Icon";
+import type { Metadata } from "next";
 import Link from "next/link";
 
+export const metadata: Metadata = {
+  title: "API reference",
+  openGraph: {
+    title: "API reference",
+  },
+};
+
 const CardHeading = ({
   children,
   className,

homepage/homepage/app/(docs)/docs/[framework]/(others)/page.mdx

@@ -1,5 +1,12 @@
 import { CodeGroup, ContentByFramework, JazzLogo } from '@/components/forMdx'
 
+export const metadata = {
+  title: "Learn some Jazz",
+  openGraph: {
+    title: "Learn some Jazz",
+  },
+};
+
 # Learn some <span className="sr-only">Jazz</span> <JazzLogo className="h-[41px] -ml-0.5 -mt-[3px] inline" />
 
 Welcome to the Jazz documentation!
@@ -47,12 +54,7 @@ Many of the packages provided are documented in the [API Reference](/api-referen
 
 ## LLM Docs
 
-We support the [llms.txt](https://llmstxt.org/) convention for making documentation available to large language models and the applications that make use of them.
+Get better results with AI by [importing the Jazz docs](/docs/ai-tools) into your context window.
-
-We currently have:
-
-- [/llms.txt](/llms.txt) - A overview listing of the available packages and their documentation
-- [/llms-full.txt](/llms-full.txt) - Full documentation for our packages
 
 ## Get support
 

homepage/homepage/app/(docs)/docs/[framework]/[...slug]/ai-tools.mdx

@@ -0,0 +1,43 @@
+import { ContentByFramework, FileDownloadLink, CodeGroup } from '@/components/forMdx'
+
+# Using AI to build Jazz apps
+
+AI tools, particularly large language models (LLMs), can accelerate your development with Jazz. Searching docs, responding to questions and even helping you write code are all things that LLMs are starting to get good at.
+
+However, Jazz is a rapidly evolving framework, so sometimes AI might get things a little wrong.
+
+To help the LLMs, we provide the Jazz documentation in a txt file that is optimized for use with AI tools, like Cursor.
+
+<FileDownloadLink href="/llms-full.txt">llms-full.txt</FileDownloadLink>
+
+## Setting up AI tools
+
+Every tool is different, but generally, you'll need to either paste the contents of the [llms-full.txt](https://jazz.tools/llms-full.txt) file directly in your prompt, or attach the file to the tool.
+
+### ChatGPT and v0
+
+Upload the txt file in your prompt.
+
+![ChatGPT prompt with llms-full.txt attached](/chatgpt-with-llms-full-txt.jpg)
+
+### Cursor
+
+1. Go to Settings > Cursor Settings > Features > Docs
+2. Click "Add new doc"
+3. Enter the following URL:
+
+<CodeGroup>
+```
+https://jazz.tools/llms-full.txt
+```
+</CodeGroup>
+
+## llms.txt convention
+
+We follow the llms.txt [proposed standard](https://llmstxt.org/) for providing documentation to AI tools at inference time that helps them understand the context of the code you're writing.
+
+## Limitations and considerations
+
+AI is amazing, but it's not perfect. What works well this week could break next week (or be twice as good).
+
+We're keen to keep up with changes in tooling to help support you building the best apps, but if you need help from humans (or you have issues getting set up), please let us know on [Discord](https://discord.gg/utDMjHYg42).

homepage/homepage/app/(docs)/docs/[framework]/[...slug]/authentication/overview.mdx

@@ -211,7 +211,7 @@ The clerk provider is not built into `jazz-react` and needs the `jazz-react-auth
 </ContentByFramework>
 
 <ContentByFramework framework="react-native">
-The clerk provider is not built into `jazz-react-native` and needs the `jazz-react-native-auth-clerk` package to be installed.
+The clerk provider is not built into `jazz-react-native` and needs the `jazz-react-native-auth-clerk` package to be installed.  Note the `__experimental_resourceCache` option.  This helps render Clerk components when offline.
 </ContentByFramework>
 
 After installing the package you can use the `JazzProviderWithClerk` component to wrap your app:
@@ -249,6 +249,7 @@ createRoot(document.getElementById("root")!).render(
 <CodeGroup>
 ```tsx
 import { JazzProviderWithClerk } from "jazz-react-native-auth-clerk";
+import { secureStore } from "@clerk/clerk-expo/secure-store";
 
 function JazzAndAuth({ children }: { children: React.ReactNode }) {
   const clerk = useClerk();
@@ -275,7 +276,11 @@ export default function RootLayout() {
   }
 
   return (
-    <ClerkProvider tokenCache={tokenCache} publishableKey={publishableKey}>
+    <ClerkProvider
+      tokenCache={tokenCache}
+      publishableKey={publishableKey}
+      __experimental_resourceCache={secureStore}
+    >
       <ClerkLoaded>
         <JazzAndAuth>
           <Slot />

homepage/homepage/app/(docs)/docs/[framework]/[...slug]/faq.mdx

@@ -0,0 +1,17 @@
+# Frequently Asked Questions
+
+## How established is Jazz?
+
+Jazz is backed by fantastic angel and institutional investors with experience and know-how in devtools and has been in development since 2020.
+
+## Will Jazz be around long-term?
+
+We're committed to Jazz being around for a long time! We understand that when you choose Jazz for your projects, you're investing time and making a significant architectural choice, and we take that responsibility seriously.
+That's why we've designed Jazz with longevity in mind from the start:
+
+- The open source nature of our sync server means you'll always be able to run your own infrastructure
+- Your data remains accessible even if our cloud services change
+- We're designing the protocol as an open specification
+
+This approach creates a foundation that can continue regardless of any single company's involvement. The local-first architecture means your apps will always work, even offline, and your data remains yours.
+

homepage/homepage/app/(docs)/docs/[framework]/[...slug]/groups/inheritance.mdx

@@ -133,6 +133,36 @@ teamGroup.extend(companyGroup);
 ```
 </CodeGroup>
 
+## Revoking a group extension
+
+You can revoke a group extension by using the `revokeExtend` method:
+
+<CodeGroup>
+```typescript
+const parentGroup = Group.create();
+const childGroup = Group.create();
+
+childGroup.extend(parentGroup); 
+
+// Revoke the extension
+await childGroup.revokeExtend(parentGroup);
+```
+</CodeGroup>
+
+## Getting all parent groups
+
+You can get all the parent groups of a group by calling the `getParentGroups` method:
+
+<CodeGroup>
+```typescript
+const childGroup = Group.create();
+const parentGroup = Group.create();
+childGroup.extend(parentGroup);
+
+console.log(childGroup.getParentGroups()); // [parentGroup]
+```
+</CodeGroup>
+
 ## Example: Team Hierarchy
 
 Here's a practical example of using group inheritance for team permissions:

homepage/homepage/app/(docs)/docs/[framework]/[...slug]/groups/intro.mdx

@@ -9,8 +9,6 @@ Every CoValue has an owner, which can be a `Group` or an `Account`.
 You can use a `Group` to grant access to a CoValue to multiple users. These users can
 have different roles, such as "writer", "reader" or "admin".
 
-...more docs coming soon
-
 ## Creating a Group
 
 Here's how you can create a `Group`.
@@ -19,7 +17,7 @@ Here's how you can create a `Group`.
 ```tsx
 import { Group } from "jazz-tools";
 
-const group = Group.create({ owner: me });
+const group = Group.create();
 ```
 </CodeGroup>
 
@@ -53,7 +51,6 @@ const bob = await Account.load(bobsID as ID<Account>, []);
 group.addMember(bob, "writer");
 ```
 </CodeGroup>
-...more docs coming soon
 
 ## Getting the Group of an existing CoValue
 
@@ -77,7 +74,47 @@ import { Group } from "jazz-tools";
 
 const group = existingCoValue._owner.castAs(Group);
 group.addMember(bob, "writer");
-group.myRole();
+
+const role = group.getRoleOf(bob);
+```
+</CodeGroup>
+
+## Checking the permissions
+
+You can check the permissions of an account on a CoValue by using the `canRead`, `canWrite` and `canAdmin` methods.
+
+<CodeGroup>
+```tsx
+const value = await MyCoMap.load(valueID, {});
+const me = Account.getMe();
+
+if (me.canAdmin(value)) {
+  console.log("I can share value with others"); 
+} else if (me.canWrite(value)) {
+  console.log("I can edit value");
+} else if (me.canRead(value)) {
+  console.log("I can view value");
+} else {
+  console.log("I cannot access value");
+}
+```
+</CodeGroup>
+
+To check the permissions of another account, you need to load it first:
+
+<CodeGroup>
+```tsx
+const value = await MyCoMap.load(valueID, {});
+const bob = await Account.load(accountID, []);
+
+if (bob.canAdmin(value)) {
+  console.log("Bob can share value with others"); 
+} else if (bob.canWrite(value)) {
+  console.log("Bob can edit value");
+} else if (bob.canRead(value)) {
+  console.log("Bob can view value");
+} else {
+  console.log("Bob cannot access value");
+}
 ```
 </CodeGroup>
-...more docs coming soon

homepage/homepage/app/(docs)/docs/[framework]/[...slug]/guide/react.mdx

@@ -442,11 +442,11 @@ All we have to do is create a new group to own each new issue and add "everyone"
 import { useState } from "react"; // old
 import { Issue } from "./schema"; // old
 import { IssueComponent } from "./components/Issue.tsx"; // old
-import { useCoState } from "jazz-react"; // old
+import { useAccount, useCoState } from "jazz-react";
 import { ID, Group } from "jazz-tools"
 // old
 function App() { // old
-    const { me } = useAccount(); // old
+    const { me } = useAccount();
     const [issueID, setIssueID] = useState<ID<Issue> | undefined>(// old
         (window.location.search?.replace("?issue=", "") || undefined) as ID<Issue> | undefined,// old
     ); // old
@@ -665,7 +665,7 @@ export function ProjectComponent({ projectID }: { projectID: ID<Project> }) {//
 
 The loading-depth spec `{ issues: [{}] }` means "in `Project`, load `issues` and load each item in `issues` shallowly". (Since an `Issue` doesn't have any further references, "shallowly" actually means all its properties will be available).
 
--   Now, we can get rid of a lot of coniditional accesses because we know that once `project` is loaded, `project.issues` and each `Issue` in it will be loaded as well.
+-   Now, we can get rid of a lot of conditional accesses because we know that once `project` is loaded, `project.issues` and each `Issue` in it will be loaded as well.
 -   This also results in only one rerender and visual update when everything is loaded, which is faster (especially for long lists) and gives you more control over the loading UX.
 
 {/* TODO: explain about not loaded vs not set/defined and `_refs` basics */}
@@ -749,6 +749,8 @@ import { createInviteLink } from "jazz-react";
 export function ProjectComponent({ projectID }: { projectID: ID<Project> }) {// old
     const project = useCoState(Project, projectID, { issues: [{}] }); // old
 
+    const { me } = useAccount();
+
     const invite = (role: "reader" | "writer") => {
         const link = createInviteLink(project, role, { valueHint: "project" });
         navigator.clipboard.writeText(link);
@@ -766,7 +768,7 @@ export function ProjectComponent({ projectID }: { projectID: ID<Project> }) {//
     return project ? (// old
         <div>// old
             <h1>{project.name}</h1>// old
-            {project._owner?.myRole() === "admin" && (
+            {me.canAdmin(project) && (
                 <>
                     <button onClick={() => invite("reader")}>Invite Guest</button>
                     <button onClick={() => invite("writer")}>Invite Member</button>

homepage/homepage/app/(docs)/docs/[framework]/[...slug]/inspector.mdx

@@ -0,0 +1,39 @@
+import { CodeGroup } from '@/components/forMdx'
+
+# Jazz Inspector
+
+[Jazz Inspector](https://inspector.jazz.tools) is a tool to visually inspect a Jazz account or other CoValues.
+
+For now, you can get your account credentials from the `jazz-logged-in-secret` local storage key from within your Jazz app.
+
+[https://inspector.jazz.tools](https://inspector.jazz.tools)
+
+## Exporting current account to Inspector from your app
+
+In development mode, you can launch the Inspector from your Jazz app to inspect your account by pressing `Cmd+J`.
+
+## Embedding the Inspector widget into your app
+
+Alternatively, you can embed the Inspector directly into your app, so you don't need to open a separate window.
+
+Install the package.
+
+<CodeGroup>
+```sh
+npm install jazz-inspector
+```
+</CodeGroup>
+
+Render the component within your `JazzProvider`.
+
+<CodeGroup>
+```sh
+import { JazzInspector } from "jazz-inspector";
+
+<JazzProvider> // old
+  <JazzInspector />
+</JazzProvider> // old
+```
+</CodeGroup>
+
+Check out the [music player app](https://github.com/garden-co/jazz/blob/main/examples/music-player/src/2_main.tsx) for a full example.

homepage/homepage/app/(docs)/docs/[framework]/[...slug]/page.tsx

@@ -6,6 +6,38 @@ import { Framework, frameworks } from "@/lib/framework";
 import type { Toc } from "@stefanprobst/rehype-extract-toc";
 import { Prose } from "gcmp-design-system/src/app/components/molecules/Prose";
 
+async function getMdxSource(slugPath: string, framework: string) {
+  try {
+    return await import(`./${slugPath}.mdx`);
+  } catch (error) {
+    return await import(`./${slugPath}/${framework}.mdx`);
+  }
+}
+
+export async function generateMetadata({
+  params: { slug, framework },
+}: { params: { slug: string[]; framework: string } }) {
+  const slugPath = slug.join("/");
+  try {
+    const mdxSource = await getMdxSource(slugPath, framework);
+    const title = mdxSource.tableOfContents?.[0].value || "Documentation";
+
+    return {
+      title,
+      openGraph: {
+        title,
+      },
+    };
+  } catch (error) {
+    return {
+      title: "Documentation",
+      openGraph: {
+        title: "Documentation",
+      },
+    };
+  }
+}
+
 export default async function Page({
   params: { slug, framework },
 }: { params: { slug: string[]; framework: string } }) {
@@ -13,13 +45,7 @@ export default async function Page({
   const bodyClassName = "overflow-x-hidden lg:flex-1 py-10  max-w-3xl mx-auto";
 
   try {
-    let mdxSource;
+    const mdxSource = await getMdxSource(slugPath, framework);
-    try {
-      mdxSource = await import(`./${slugPath}.mdx`);
-    } catch (error) {
-      mdxSource = await import(`./${slugPath}/${framework}.mdx`);
-    }
-
     const { default: Content, tableOfContents } = mdxSource;
 
     // Exclude h1 from table of contents

homepage/homepage/app/(docs)/docs/[framework]/[...slug]/project-setup/react-native.mdx

@@ -34,15 +34,17 @@ Tested with:
 
 <CodeGroup>
   ```bash
-  npx expo install expo-linking expo-secure-store expo-file-system @react-native-community/netinfo @bam.tech/react-native-image-resizer @azure/core-asynciterator-polyfill
+  npx expo install expo-linking expo-secure-store expo-file-system @react-native-community/netinfo @bam.tech/react-native-image-resizer
 
-  npm i -S react-native-polyfill-globals react-native-url-polyfill web-streams-polyfill@3.2.1 base-64 text-encoding react-native-fetch-api react-native-get-random-values buffer @op-engineering/op-sqlite
+  npm i -S @azure/core-asynciterator-polyfill react-native-url-polyfill readable-stream react-native-get-random-values @craftzdog/react-native-buffer @op-engineering/op-sqlite
 
   npm i -S jazz-tools jazz-react-native jazz-react-native-media-images
 
   ```
 </CodeGroup>
 
+> note: Hermes has added support for `atob` and `btoa` in React Native 0.74.  If you are using earlier versions, you may also need to polyfill `atob` and `btoa` in your `package.json` . Packages to try include `text-encoding` and `base-64`, and you can drop `@bacons/text-decoder`.
+
 ### Fix incompatible dependencies
 
 <CodeGroup>
@@ -134,16 +136,21 @@ For more information, refer to [this](https://github.com/byCedric/expo-monorepo-
 Create a file `polyfills.js` at the project root with the following content:
 
 <CodeGroup>
-  ```ts
+  ```js
-  import "react-native-polyfill-globals/auto";
+import { polyfillGlobal } from 'react-native/Libraries/Utilities/PolyfillFunctions';
-  import "@azure/core-asynciterator-polyfill";
-  import { ReadableStream } from "web-streams-polyfill/ponyfill/es6";
-  import { polyfillGlobal } from "react-native/Libraries/Utilities/PolyfillFunctions";
-  import { Buffer } from "buffer";
 
-  polyfillGlobal("Buffer", () => Buffer);
+import { Buffer } from '@craftzdog/react-native-buffer';
-  polyfillGlobal("ReadableStream", () => ReadableStream);
+polyfillGlobal('Buffer', () => Buffer);
-  ```
+
+import { ReadableStream } from 'readable-stream';
+polyfillGlobal('ReadableStream', () => ReadableStream);
+
+import '@azure/core-asynciterator-polyfill';
+
+import '@bacons/text-decoder/install';
+
+import 'react-native-get-random-values';
+```
 </CodeGroup>
 
 Update `index.js` based on whether you are using expo-router or not:

homepage/homepage/app/(docs)/docs/[framework]/[...slug]/schemas/accounts-and-migrations.mdx

@@ -146,8 +146,9 @@ Jazz waits for the migration to finish before passing the account to your app's
 ```ts
 export class MyAppAccount extends Account {
   root = co.ref(MyAppRoot);
+  profile = co.ref(MyAppProfile);
 
-  async migrate() {
+  async migrate(this: MyAppAccount, creationProps?: { name: string }) {
     // we specifically need to check for undefined, 
     // because the root might simply be not loaded (`null`) yet
     if (this.root === undefined) {
@@ -159,6 +160,17 @@ export class MyAppAccount extends Account {
         myContacts: ListOfAccounts.create([], Group.create())
       });
     }
+
+    if (this.profile === undefined) {
+      const profileGroup = Group.create();
+      // Unlike the root, we want the profile to be publicly readable.
+      profileGroup.addMember("everyone", "reader");
+
+      this.profile = MyAppProfile.create({
+        name: creationProps?.name,
+        bookmarks: ListOfBookmarks.create([], profileGroup),
+      }, profileGroup);
+    }
   }
 }
 ```
@@ -179,7 +191,7 @@ Now let's say we want to add a `myBookmarks` field to the `root` schema:
 export class MyAppAccount extends Account {
     root = co.ref(MyAppRoot);// old
 
-    async migrate() { // old
+    async migrate(this: MyAppAccount) {
       if (this.root === undefined) {  // old
         this.root = MyAppRoot.create({  // old
           myChats: ListOfChats.create([], Group.create()),  // old
@@ -188,12 +200,10 @@ export class MyAppAccount extends Account {
       } // old
 
       // We need to load the root field to check for the myContacts field
-      const result = await this.ensureLoaded({
+      const { root } = await this.ensureLoaded({
         root: {},
       });
 
-      const { root } = result;
-
       // we specifically need to check for undefined, 
       // because myBookmarks might simply be not loaded (`null`) yet 
       if (root.myBookmarks === undefined) {

homepage/homepage/app/(docs)/docs/[framework]/[...slug]/upgrade/0-10-0.mdx

@@ -4,31 +4,24 @@ export const metadata = { title: "Jazz 0.10.0 is out!" };
 
 # Jazz 0.10.0 is out!
 
-<h2 className="not-prose text-sm text-stone-600 dark:text-stone-400 mb-5 pb-2 border-b">
+For Jazz 0.10.0 we have been focusing on enhancing authentication to make it optional, more flexible and easier to use.
-  11 February 2025
-</h2>
 
-<div>
+The default is now anonymous auth, which means that you can build the functionality of your app first and figure out auth later. For users this means that they can start using your app right away on one device -- and once you integrate an auth method, users can sign up and their anonymous accounts are transparently upgraded to authenticated accounts that work across devices.
-  For Jazz 0.10.0 we have been focusing on enhancing authentication to make it optional, more flexible and easier to use.
 
-  The default is now anonymous auth, which means that you can build the functionality of your app first and figure out auth later. For users this means that they can start using your app right away on one device -- and once you integrate an auth method, users can sign up and their anonymous accounts are transparently upgraded to authenticated accounts that work across devices.
+There are also some other minor improvements that will make your Jazz experience even better!
 
-  There are also some other minor improvements that will make your Jazz experience even better!
+## What's new?
+Here is what's changed in this release:
+- [New authentication flow](#new-authentication-flow): Now with anonymous auth, redesigned to make Jazz easier to start with and be more flexible.
+- [Local-only mode](#local-only-mode): Users can now explore your app in local-only mode before signing up.
+- [Improvements on the loading APIs](#improved-loading-api); `ensureLoaded` now always returns a value and `useCoState` now returns `null` if the value is not found.
+- [Jazz Workers on native WebSockets](#native-websocket-for-jazz-workers): Improves compatibility with a wider set of Javascript runtimes.
+- [Group inheritance with role mapping](#group-inheritance): Groups can now inherit members from other groups with a fixed role.
+- Support for Node 14 dropped on cojson.
+- Bugfix: `Group.removeMember` now returns a promise.
+- Now `cojson` and `jazz-tools` don't export directly the crypto providers anymore. Replace the import with `cojson/crypto/WasmCrypto` or `cojson/crypto/PureJSCrypto` depending on your use case.
 
-  <h3>What's new?</h3>
+## New authentication flow
-  Here is what's changed in this release:
-  - [New authentication flow](#new-authentication-flow): Now with anonymous auth, redesigned to make Jazz easier to start with and be more flexible.
-  - [Local-only mode](#local-only-mode): Users can now explore your app in local-only mode before signing up.
-  - [Improvements on the loading APIs](#improved-loading-api); `ensureLoaded` now always returns a value and `useCoState` now returns `null` if the value is not found.
-  - [Jazz Workers on native WebSockets](#native-websocket-for-jazz-workers): Improves compatibility with a wider set of Javascript runtimes.
-  - [Group inheritance with role mapping](#group-inheritance): Groups can now inherit members from other groups with a fixed role.
-  - Support for Node 14 dropped on cojson.
-  - Bugfix: `Group.removeMember` now returns a promise.
-  - Now `cojson` and `jazz-tools` don't export directly the crypto providers anymore. Replace the import with `cojson/crypto/WasmCrypto` or `cojson/crypto/PureJSCrypto` depending on your use case.
-</div>
-
-  <h3 id="new-authentication-flow">New authentication flow</h3>
-  <div>
     Up until now authentication has been the first part to figure out when building a Jazz app, and this was a stumbling block for many.
 
     Now it is no longer required and setting up a Jazz app is as easy as writing this:
@@ -267,16 +260,16 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
 ```
 </CodeGroup>
 </ContentByFramework>
-For the changes related to the specific auth providers see the updated [authentication docs](/docs/authentication/overview).
-  </div>
 
-<h3 id="local-only-mode">Local-only mode</h3>
+For the changes related to the specific auth providers see the updated [authentication docs](/docs/authentication/overview).
-<div>
+
+## Local-only mode
+
 If you are ok with data not being persisted on the sync server for anonymous users, you can now set your app to local-only depending on the user's authentication state.
 
 With `sync.when` set to `"signedUp"` the app will work in local-only mode when the user is anonymous and unlock the multiplayer/multi-device features and cloud persistence when they sign up:
 <CodeGroup>
-```ts
+```tsx
 <JazzProvider
   sync={{
     peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
@@ -290,10 +283,9 @@ With `sync.when` set to `"signedUp"` the app will work in local-only mode when t
 </CodeGroup>
 
 You can control when Jazz will sync by switching the `when` config to `"always"` or `"never"`.
-</div>
 
-<h3 id="improved-loading-api">Improvements on the loading APIs</h3>
+## Improvements on the loading APIs
-<div>
+
 Before 0.10.0 `ensureLoaded` was returning a nullable value forcing the Typescript code to always include null checks:
 <CodeGroup>
 ```ts
@@ -337,16 +329,16 @@ if (value === null) {
 }
 ```
 </CodeGroup>
-</div>
 
-<h3 id="native-websocket-for-jazz-workers">Jazz Workers on native WebSockets</h3>
+## Jazz Workers on native WebSockets
-<div>
-  We have removed the dependency on `ws` and switched to the native WebSocket API for Jazz Workers.
 
-  This improves the compatibility with a wider set of Javascript runtimes adding drop-in support for Deno, Bun, Browsers and Cloudflare Durable Objects.
+We have removed the dependency on `ws` and switched to the native WebSocket API for Jazz Workers.
 
-  If you are using a Node.js version lower than 22 you will need to install the `ws` package and provide the WebSocket constructor:
+This improves the compatibility with a wider set of Javascript runtimes adding drop-in support for Deno, Bun, Browsers and Cloudflare Durable Objects.
-  <CodeGroup>
+
+If you are using a Node.js version lower than 22 you will need to install the `ws` package and provide the WebSocket constructor:
+
+<CodeGroup>
 ```ts
 import { WebSocket } from "ws";
 import { startWorker } from "jazz-nodejs";
@@ -356,23 +348,20 @@ const { worker } = await startWorker({
 });
 ```
 </CodeGroup>
-</div>
 
-<h3 id="group-inheritance">Group inheritance with role mapping</h3>
+## Group inheritance with role mapping
-<div>
+You can override the inherited role by passing a second argument to `extend`.
-  You can override the inherited role by passing a second argument to `extend`.
 
-  This can be used to give users limited access to a child group:
+This can be used to give users limited access to a child group:
-  <CodeGroup>
+<CodeGroup>
-  ```ts
+```ts
-  const organization = Group.create();
+const organization = Group.create();
-  const billing = Group.create();
+const billing = Group.create();
 
-  billing.extend(organization, "reader");
+billing.extend(organization, "reader");
-  ```
+```
-  </CodeGroup>
+</CodeGroup>
 
-  This way the members of the organization can only read the billing data, even if they are admins in the organization group.
+This way the members of the organization can only read the billing data, even if they are admins in the organization group.
 
-  More about the group inheritance can be found in the [dedicated docs page](/docs/groups/inheritance).
+More about the group inheritance can be found in the [dedicated docs page](/docs/groups/inheritance).
-</div>

homepage/homepage/app/(docs)/docs/[framework]/[...slug]/upgrade/0-11-0.mdx

@@ -0,0 +1,247 @@
+import { ContentByFramework, CodeGroup } from '@/components/forMdx'
+import { Alert } from "gcmp-design-system/src/app/components/atoms/Alert";
+
+export const metadata = { title: "Upgrade to Jazz 0.11.0" };
+
+# Jazz 0.11.0 is out!
+
+Jazz 0.11.0 brings several improvements to member handling, roles, and permissions management. This guide will help you upgrade your application to the latest version.
+
+## What's new?
+Here is what's changed in this release:
+- [New permissions check APIs](#new-permissions-check-apis): New methods like `canRead`, `canWrite`, `canAdmin`, and `getRoleOf` to simplify permission checks.
+- [Group.revokeExtend](#grouprevokeextend): New method to revoke group extension permissions.
+- [Group.getParentGroups](#accountgetparentgroups): New method to get all the parent groups of an account.
+- [Account Profile & Migrations](#account-profile--migrations): Fixed issues with custom account profile migrations for a more consistent experience
+- [Dropped support for Accounts owning Profiles](#dropped-support-for-accounts-owning-profiles): Profiles can now only be owned by Groups.
+- [Group.members now includes inherited members](#member-inheritance-changes): Updated behavior for the `members` getter method to include inherited members and have a more intuitive type definition.
+
+## New Features
+
+### New permissions check APIs
+
+New methods have been added to both `Account` and `Group` classes to improve permission handling:
+
+#### Permission checks
+
+The new `canRead`, `canWrite` and `canAdmin` methods on `Account` allow you to easily check if the account has specific permissions on a CoValue:
+
+<CodeGroup>
+{/* prettier-ignore */}
+```typescript
+const me = Account.getMe();
+
+if (me.canAdmin(value)) {
+  console.log("I can share value with others"); 
+} else if (me.canWrite(value)) {
+  console.log("I can edit value");
+} else if (me.canRead(value)) {
+  console.log("I can view value");
+} else {
+  console.log("I cannot access value");
+}
+```
+</CodeGroup>
+
+#### Getting the role of an account
+
+The `getRoleOf` method has been added to query the role of specific entities:
+
+<CodeGroup>
+```typescript
+const group = Group.create();
+group.getRoleOf(me); // admin
+group.getRoleOf(Eve); // undefined
+
+group.addMember(Eve, "writer");
+group.getRoleOf(Eve); // writer
+```
+</CodeGroup>
+
+#### Group.revokeExtend
+
+We added a new method to revoke the extend of a Group:
+<CodeGroup>
+```typescript
+function addTrackToPlaylist(playlist: Playlist, track: MusicTrack) {
+  const trackGroup = track._owner.castAs(Group);
+  trackGroup.extend(playlist._owner, "reader"); // Grant read access to the track to the playlist accounts
+
+  playlist.tracks.push(track);
+}
+
+function removeTrackFromPlaylist(playlist: Playlist, track: MusicTrack) {
+  const trackGroup = track._owner.castAs(Group);
+  trackGroup.revokeExtend(playlist._owner); // Revoke access to the track to the playlist accounts
+  
+  const index = playlist.tracks.findIndex(t => t.id === track.id);
+  if (index !== -1) {
+    playlist.tracks.splice(index, 1);
+  }
+}
+```
+</CodeGroup>
+
+### Group.getParentGroups
+
+The `getParentGroups` method has been added to `Group` to get all the parent groups of a group.
+
+<CodeGroup>
+```ts
+const childGroup = Group.create();
+const parentGroup = Group.create();
+childGroup.extend(parentGroup);
+
+console.log(childGroup.getParentGroups()); // [parentGroup]
+```
+</CodeGroup>
+
+## Breaking Changes
+
+### Account Profile & Migrations
+
+The previous way of making the `Profile` migration work was to assume that the profile was always already there:
+
+<CodeGroup>
+```ts
+export class MyAppAccount extends Account {
+  profile = co.ref(MyAppProfile);
+
+  async migrate(this: MyAppAccount, creationProps: { name: string, lastName: string }) {
+    if (creationProps) {
+      const { profile } = await this.ensureLoaded({ profile: {} });
+
+      profile.name = creationProps.name;
+      profile.bookmarks = ListOfBookmarks.create([], profileGroup);
+    }
+  }
+}
+```
+</CodeGroup>
+
+This was kind-of tricky to picture, and having different migration strategies for different CoValues was confusing.
+
+We changed the logic so the default profile is created only if you didn't provide one in your migration.
+
+This way you can use the same pattern for both `root` and `profile` migrations:
+<CodeGroup>
+```ts
+export class MyAppAccount extends Account {
+  profile = co.ref(MyAppProfile);
+
+  async migrate(this: MyAppAccount, creationProps?: { name: string }) {
+    if (this.profile === undefined) {
+      const profileGroup = Group.create();
+      profileGroup.addMember("everyone", "reader");
+
+      this.profile = MyAppProfile.create({
+        name: creationProps?.name,
+        bookmarks: ListOfBookmarks.create([], profileGroup),
+      }, profileGroup);
+    }
+  }
+}
+```
+</CodeGroup>
+
+<Alert variant="warning" title="Warning" className="mt-4">
+If you provide a custom `Profile` in your `Account` schema and migration for a Worker account, 
+make sure to also add  `everyone` as member with `reader` role to the owning group. 
+Failing to do so will prevent any account from sending messages to the Worker's Inbox.
+</Alert>
+
+### Dropped support for Accounts owning Profiles
+Starting from `0.11.0` `Profile`s can only be owned by `Group`s.
+
+<Alert variant="info" title="Note" className="mt-4">
+Existing profiles owned by `Account`s will still work, but you will get incorrect types when accessing a `Profile`'s `_owner`.
+</Alert>
+
+### Member Inheritance Changes
+
+The behavior of groups' `members` getter method has been updated to return both direct members and inherited ones from ancestor groups. 
+This might affect your application if you were relying on only direct members being returned.
+
+<CodeGroup>
+```ts
+/**
+ *  The following pseudocode only illustrates the inheritance logic, 
+ *  the actual implementation is different.
+*/
+
+const parentGroup = Group.create();
+parentGroup.addMember(John, "admin");
+
+const childGroup = Group.create();
+childGroup.addMember(Eve, "admin");
+
+childGroup.extend(parentGroup);
+
+console.log(childGroup.members);
+// Before 0.11.0
+// [Eve]
+
+// After 0.11.0
+// [Eve, John]
+```
+</CodeGroup>
+
+Additionally:
+- now `Group.members` doesn't include the `everyone` member anymore
+- the account type in `Group.members` is now the globally registered Account schema and we have removed the `co.members` way to define an AccountSchema for members
+
+If you need to explicitly check if "everyone" is a member of a group, you can use the `getRoleOf` method instead:
+<CodeGroup>
+```ts
+if (group.getRoleOf("everyone")) {
+  console.log("Everyone has access to the group");
+}
+```
+</CodeGroup>
+
+
+#### Migration Steps
+
+1. Review your member querying logic to account for inherited members.
+2. Update your permission checking code to utilize the new [`hasPermissions` and `getRoleOf`](#enhanced-permission-management) methods.
+3. Consider implementing `"everyone"` role checks where appropriate.
+
+### Removed auto-update of `profile.name` in `usePasskeyAuth`
+
+The `usePasskeyAuth` hook now doesn't update the `profile.name` if the provided username is empty.
+
+## Troubleshooting
+
+> I'm getting the following error: `Error: Profile must be owned by a Group`
+
+If you previously forced a migration of your `Account` schema to include a custom `Profile`, 
+and assigned its ownership to an `Account`, you need to recreate your profile code and assign it to a `Group` instead.
+
+<CodeGroup>
+```ts
+export class MyAppAccount extends Account {
+  profile = co.ref(MyAppProfile);
+
+  override async migrate() {
+    // ...
+
+    const me = await this.ensureLoaded({
+      profile: {},
+    });
+
+    if ((me.profile._owner as Group | Account)._type === "Account") {
+      const profileGroup = Group.create();
+      profileGroup.addMember("everyone", "reader");
+
+      // recreate your profile here...
+      me.profile = Profile.create(
+        {
+          name: me.profile.name,
+        },
+        profileGroup,
+      );
+    }
+  }
+}
+```
+</CodeGroup>

homepage/homepage/app/(docs)/docs/[framework]/[...slug]/upgrade/0-9-0.mdx

@@ -1,545 +0,0 @@
-import { ContentByFramework, CodeGroup } from '@/components/forMdx'
-
-export const metadata = { title: "Upgrade to Jazz 0.9.0" };
-
-# Upgrade to Jazz 0.9.0
-
-<h2 className="not-prose text-sm text-stone-600 dark:text-stone-400 mb-5 pb-2 border-b">
-  08 January 2025
-</h2>
-
-<ContentByFramework framework="react">
-  <div>
-    Version 0.9.0 simplifies the application setup and makes Jazz more intellisense friendly by
-    replacing the `createJazzReactApp` API with top-level imports.
-
-    We have also introduced some new API to make testing Jazz components a breeze. 🌬️
-  </div>
-
-  <h3>New provider setup</h3>
-
-  <div>
-    The `JazzProvider` is now imported from `jazz-react` instead of `createJazzReactApp`.
-
-    While `createJazzReactApp` was originally designed to setup strong typing for custom Account schemas in `useAccount`,
-    we found that this approach made the Jazz setup awkward and confusing for some users.
-
-    So we decided to remove `createJazzReactApp` step and to provide the types through namespace declarations:
-  </div>
-
-  <CodeGroup>
-      {/* prettier-ignore */}
-      ```tsx
-      import { JazzProvider, usePasskeyAuth, PasskeyAuthBasicUI } from "jazz-react";
-      import { MyAppAccount } from "./schema";
-
-      // Remove these lines  // *bin*
-      const Jazz = createJazzReactApp({ AccountSchema: MyAppAccount }); // *bin*
-      export const { useAccount, useCoState } = Jazz; // *bin*
-
-      export function JazzAndAuth({ children }: { children: React.ReactNode }) {  // old
-          const [passkeyAuth, passKeyState] = usePasskeyAuth({ appName });  // old
-
-          return (
-              <>
-                  {/* Replace Jazz.Provider with provider from jazz-react */}
-                  <JazzProvider
-                      auth={passkeyAuth} // old
-                      peer="wss://cloud.jazz.tools/?key=you@example.com" // old
-                      AccountSchema={MyAppAccount} {/* The custom Account schema is passed here */} // *add*
-                  >
-                      {children} // old
-                  </JazzProvider>
-                  <PasskeyAuthBasicUI state={passKeyState} /> // old
-              </> // old
-          );
-      }
-
-      // Register the Account schema so `useAccount` returns our custom `MyAppAccount`
-      declare module "jazz-react" { // *add*
-          interface Register { // *add*
-              Account: MyAppAccount; // *add*
-          } // *add*
-      } // *add*
-      ```
-  </CodeGroup>
-
-  <h3>Top level imports for hooks</h3>
-
-  <div>
-    All Jazz hooks are now available as top-level imports from the `jazz-react` package.
-
-    This change improves IDE intellisense support and simplifies imports:
-  </div>
-
-  <CodeGroup>
-    {/* prettier-ignore */}
-    ```tsx
-    // Replace local imports with "jazz-react" imports
-    import { useAccount } from "./main"; // *bin*
-    import { useAccount } from "jazz-react"; // *add*
-
-    export function Hello() {
-        const { me } = useAccount();
-
-        return (
-            <>
-              Hello {me.profile?.name}
-            </>
-        );
-    }
-    ```
-  </CodeGroup>
-
-  <h3>New testing utilities</h3>
-
-  <div>
-    Removing `createJazzReactApp` also makes testing way easier!
-
-    We can now use `createJazzTestAccount` to setup accounts and testing data and pass it to
-    your components and hooks using `JazzTestProvider`:
-  </div>
-
-  <CodeGroup>
-      {/* prettier-ignore */}
-      ```tsx
-      import { createJazzTestAccount, JazzTestProvider } from "jazz-react/testing";
-      import { renderHook } from "@testing-library/react"; // old
-      import { usePlaylist } from "./usePlaylist"; // old
-      import { Playlist, MusicAccount } from "./schema"; // old
-
-      test("should load the playlist", async () => {
-        // ✅ Create a test account with your schema
-        const account = await createJazzTestAccount({ AccountSchema: MusicAccount });
-
-        // ✅ Set up test data
-        const playlist = Playlist.create({
-          name: "My playlist",
-        }, account);
-
-        // ✅ Use JazzTestProvider in your tests
-        const { result } = renderHook(() => usePlaylist(playlist.id), {
-          wrapper: ({ children }) => (
-            <JazzTestProvider account={account}>
-              {children}
-            </JazzTestProvider>
-          ),
-        });
-
-        // The result is resolved synchronously, so you can assert the value immediately
-        expect(result.current?.name).toBe("My playlist");
-      });
-      ```
-  </CodeGroup>
-</ContentByFramework>
-
-<ContentByFramework framework="react-native">
-  <div>
-    Version 0.9.0 simplifies the application setup and makes Jazz more intellisense friendly by
-    replacing the `createJazzRNApp` API with top-level imports.
-
-    We have also introduced some new API to make testing Jazz components a breeze. 🌬️
-  </div>
-
-  <h3>New provider setup</h3>
-
-  <div>
-    The `JazzProvider` is now imported from `jazz-react-native` instead of `createJazzRNApp`.
-
-    While `createJazzRNApp` was originally designed to setup strong typing for custom Account schemas in `useAccount`,
-    we found that this approach made the Jazz setup awkward and confusing for some users.
-
-    So we decided to remove `createJazzRNApp` step and to provide the types through namespace declarations:
-  </div>
-
-  <CodeGroup>
-      {/* prettier-ignore */}
-      ```tsx
-      import { JazzProvider, useDemoAuth, DemoAuthBasicUI } from "jazz-react-native";
-      import { MyAppAccount } from "./schema";
-
-      // Remove these lines  // *bin*
-      const Jazz = createJazzRNApp({ AccountSchema: MyAppAccount }); // *bin*
-      export const { useAccount, useCoState } = Jazz; // *bin*
-
-      export function JazzAndAuth({ children }: { children: React.ReactNode }) {  // old
-          const [auth, state] = useDemoAuth();  // old
-
-          return (
-              <>
-                  {/* Replace Jazz.Provider with provider from jazz-react */}
-                  <JazzProvider
-                      auth={auth} // old
-                      peer="wss://cloud.jazz.tools/?key=you@example.com" // old
-                      AccountSchema={MyAppAccount} {/* The custom Account schema is passed here */}
-                  >
-                      {children} // old
-                  </JazzProvider>
-                  <DemoAuthBasicUI appName="My App" state={state} /> // old
-              </> // old
-          );
-      }
-
-      // Register the Account schema so `useAccount` returns our custom `MyAppAccount`
-      declare module "jazz-react-native" {
-          interface Register {
-              Account: MyAppAccount;
-          }
-      }
-      ```
-  </CodeGroup>
-
-  <h3>Top level imports for hooks</h3>
-
-  <div>
-    All Jazz hooks are now available as top-level imports from the `jazz-react-native` package.
-
-    This change improves IDE intellisense support and simplifies imports:
-  </div>
-
-  <CodeGroup>
-    {/* prettier-ignore */}
-    ```tsx
-    // Replace local imports with "jazz-react-native" imports
-    import { useAccount } from "./main"; // *bin*
-    import { useAccount } from "jazz-react-native"; // *add*
-
-    export function Hello() {
-        const { me } = useAccount();
-
-        return (
-            <>
-              Hello {me.profile?.name}
-            </>
-        );
-    }
-    ```
-  </CodeGroup>
-
-  <h3>New testing utilities</h3>
-
-  <div>
-    Removing `createJazzRNApp` also makes testing way easier!
-
-    We can now use `createJazzTestAccount` to setup accounts and testing data and pass it to
-    your components and hooks using `JazzTestProvider`:
-  </div>
-
-  <CodeGroup>
-      {/* prettier-ignore */}
-      ```tsx
-      import { createJazzTestAccount, JazzTestProvider } from "jazz-react-native/testing";
-      import { renderHook } from "@testing-library/react-native"; // old
-      import { usePlaylist } from "./usePlaylist"; // old
-      import { Playlist, MusicAccount } from "./schema"; // old
-
-      test("should load the playlist", async () => {
-        // ✅ Create a test account with your schema
-        const account = await createJazzTestAccount({ AccountSchema: MusicAccount });
-
-        // ✅ Set up test data
-        const playlist = Playlist.create({
-          name: "My playlist",
-        }, account);
-
-        // ✅ Use JazzTestProvider in your tests
-        const { result } = renderHook(() => usePlaylist(playlist.id), {
-          wrapper: ({ children }) => (
-            <JazzTestProvider account={account}>
-              {children}
-            </JazzTestProvider>
-          ),
-        });
-
-        // The result is resolved synchronously, so you can assert the value immediately
-        expect(result.current?.name).toBe("My playlist");
-      });
-      ```
-  </CodeGroup>
-</ContentByFramework>
-
-<ContentByFramework framework="svelte">
-  <div>
-    Version 0.9.0 simplifies the application setup and makes Jazz more intellisense friendly by
-    replacing the `createJazzApp` API with top-level imports.
-
-    We have also introduced some new API to make testing Jazz components a breeze. 🌬️
-  </div>
-
-  <h3>New provider setup</h3>
-
-  <div>
-    The `JazzProvider` is now imported from `jazz-svelte` instead of `createJazzApp`.
-
-    While `createJazzApp` was originally designed to setup strong typing for custom Account schemas in `useAccount`,
-    we found that this approach made the Jazz setup awkward and confusing for some users.
-
-    So we decided to remove `createJazzApp` step and to provide the types through namespace declarations:
-  </div>
-
-  <CodeGroup>
-      {/* prettier-ignore */}
-        ```svelte
-        <!-- src/routes/+layout.svelte -->
-        <script lang="ts" module>
-          // Register the Account schema so `useAccount` returns our custom `MyAppAccount`
-          declare module 'jazz-svelte' {
-            interface Register {
-              Account: MyAccount;
-            }
-          }
-        </script>
-
-        <script lang="ts">
-          import { Provider } from '$lib/jazz'; // *bin*
-          import { JazzProvider } from 'jazz-svelte';
-
-          // Example configuration for authentication and peer connection
-          let auth = null; // Replace with your auth implementation
-          let peer = "wss://your-peer-endpoint";
-
-          // The custom Account schema is passed now as a prop
-          let AccountSchema = MyAccount;
-        </script>
-
-        <JazzProvider {auth} {peer} {AccountSchema}>
-          <App />
-        </JazzProvider>
-        ```
-  </CodeGroup>
-
-  <h3>Top level imports for hooks</h3>
-
-  <div>
-    All Jazz hooks are now available as top-level imports from the `jazz-svelte` package.
-
-    This change improves IDE intellisense support and simplifies imports:
-  </div>
-
-  <CodeGroup>
-    {/* prettier-ignore */}
-```svelte
-
-<script lang="ts">
-  import { useAccount } from '$lib/jazz'; // *bin*
-  import { useAccount } from 'jazz-svelte'; // *add*
-
-  const { me } = useAccount();
-</script>
-
-<div>
-  Hello {me.profile?.name}
-</div>
-
-```
-  </CodeGroup>
-
-  <h3>New testing utilities</h3>
-
-  <div>
-    Removing `createJazzApp` also makes testing way easier!
-
-    We can now use `createJazzTestAccount` to setup accounts and testing data and pass it to
-    your components and hooks using `JazzTestProvider`:
-  </div>
-
-  <CodeGroup>
-      {/* prettier-ignore */}
-      ```ts
-      import { useCoState } from "jazz-svelte";
-      import { createJazzTestAccount, JazzTestProvider } from "jazz-svelte/testing";
-      import { render } from "@testing-library/svelte"; // old
-      import { Playlist, MusicAccount } from "./schema"; // old
-
-      test("should load the playlist", async () => {
-        // ✅ Create a test account with your schema
-        const account = await createJazzTestAccount({ AccountSchema: MusicAccount });
-
-        // ✅ Set up test data
-        const playlist = Playlist.create({
-          name: "My playlist",
-        }, account);
-
-        // ✅ Use createJazzTestContext in your tests
-        render(PlaylistComponent, {
-          context: createJazzTestContext({ account: options.account }),
-          props: {
-            id: playlist.id,
-          },
-        });
-
-        expect(await screen.findByRole("heading", { name: "My playlist" })).toBeInTheDocument();
-      });
-      ```
-  </CodeGroup>
-</ContentByFramework>
-
-<ContentByFramework framework="vue">
-  <div>
-    Version 0.9.0 simplifies the application setup and makes Jazz more intellisense friendly by
-    replacing the `createJazzVueApp` API with top-level imports.
-
-    We have also introduced some new API to make testing Jazz components a breeze. 🌬️
-  </div>
-
-  <h3>New provider setup</h3>
-
-  <div>
-    The `JazzProvider` is now imported from `jazz-vue` instead of `createJazzVueApp`.
-
-    While `createJazzReactApp` was originally designed to setup strong typing for custom Account schemas in `useAccount`,
-    we found that this approach made the Jazz setup awkward and confusing for some users.
-
-    So we decided to remove `createJazzReactApp` step and to provide the types through namespace declarations:
-  </div>
-
-  <CodeGroup>
-      {/* prettier-ignore */}
-```typescript
-import "./assets/main.css"; // old
-import { DemoAuthBasicUI, useDemoAuth, JazzProvider } from "jazz-vue";
-import { createApp, defineComponent, h } from "vue"; // old
-import App from "./App.vue"; // old
-import router from "./router"; // old
-import { ToDoAccount } from "./schema"; // old
-
-// Remove these lines  // *bin*
-const Jazz = createJazzVueApp<ToDoAccount>({ AccountSchema: ToDoAccount }); // *bin*
-export const { useAccount, useCoState } = Jazz; // *bin*
-const { JazzProvider } = Jazz; // *bin*
-
-const RootComponent = defineComponent({ // old
-  name: "RootComponent", // old
-  setup() { // old
-    const { authMethod, state } = useDemoAuth(); // old
-    return () => [  // old
-      h( // old
-        JazzProvider, // old
-        { // old
-          AccountSchema: ToDoAccount, // The custom Account schema is passed here now
-          auth: authMethod.value, // old
-          peer: "wss://cloud.jazz.tools/?key=vue-todo-example-jazz@garden.co", // old
-        }, // old
-        { // old
-          default: () => h(App), // old
-        }, // old
-      ), // old
-      state.state !== "signedIn" && // old
-        h(DemoAuthBasicUI, { // old
-          appName: "Jazz Vue Todo", // old
-          state, // old
-        }), // old
-    ]; // old
-  }, // old
-}); // old
-
-// Register the Account schema so `useAccount` returns our custom `MyAppAccount`
-declare module "jazz-vue" {
-  interface Register {
-    Account: ToDoAccount;
-  }
-}
-
-const app = createApp(RootComponent); // old
-app.use(router); // old
-app.mount("#app"); // old
-```
-  </CodeGroup>
-
-  <h3>Top level imports for hooks</h3>
-
-  <div>
-    All Jazz hooks are now available as top-level imports from the `jazz-vue` package.
-
-    This change improves IDE intellisense support and simplifies imports:
-  </div>
-
-  <CodeGroup>
-    {/* prettier-ignore */}
-```typescript
-<template>
-  Hello {{ me.profile?.name }}
-</template>
-
-<script setup lang="ts">
-  // Replace local imports with "jazz-vue" imports
-  import { useAccount } from "./main"; // *bin*
-  import { useAccount } from "jazz-vue"; // *add*
-
-  const { me, logOut } = useAccount();
-</script>
-```
-  </CodeGroup>
-
-  <h3>New testing utilities</h3>
-
-  <div>
-    Removing `createJazzTestApp` also makes testing way easier!
-
-    We can now use `createJazzTestAccount` to setup accounts and testing data and pass it to
-    your components and hooks using `JazzTestProvider`:
-  </div>
-
-  <CodeGroup>
-      {/* prettier-ignore */}
-      ```tsx
-      import { createJazzTestAccount, JazzTestProvider } from "jazz-vue/testing";
-      import { createApp, defineComponent, h } from "vue";
-      import { usePlaylist } from "./usePlaylist";
-      import { Playlist, MusicAccount } from "./schema"; // old
-
-      // This can be reused on other tests!
-      export const renderComposableWithJazz = <C extends (...args: any[]) => any>(
-        composable: C,
-        { account }: { account: Account | { guest: AnonymousJazzAgent } },
-      ) => {
-        let result;
-
-        const wrapper = defineComponent({
-          setup() {
-            result = composable();
-            // suppress missing template warning
-            return () => {};
-          },
-        });
-
-        // ✅ Use JazzTestProvider in your tests
-        const app = createApp({
-          setup() {
-            return () =>
-              h(
-                JazzTestProvider,
-                {
-                  account,
-                },
-                {
-                  default: () => h(wrapper),
-                },
-              );
-          },
-        });
-
-        app.mount(document.createElement("div"));
-        return [result, app] as [ReturnType<C>, ReturnType<typeof createApp>];
-      };
-
-      test("should load the playlist", async () => {
-        // ✅ Create a test account with your schema
-        const account = await createJazzTestAccount({ AccountSchema: MusicAccount });
-
-        // ✅ Set up test data
-        const playlist = Playlist.create({
-          name: "My playlist",
-        }, account);
-
-        // ✅ Set up test data
-        const { result } = renderComposableWithJazz(() => usePlaylist(playlist.id), {
-          account,
-        });
-
-        // The result is resolved synchronously, so you can assert the value immediately
-        expect(result?.name).toBe("My playlist");
-      });
-      ```
-  </CodeGroup>
-</ContentByFramework>