fix: remove the prepublish hook

Version Packages

.changeset/new-nails-knock.md

@@ -1,12 +0,0 @@
----
-"jazz-react-auth-clerk": patch
-"jazz-react-native": patch
-"jazz-auth-clerk": patch
-"jazz-react-core": patch
-"jazz-browser": patch
-"jazz-svelte": patch
-"jazz-react": patch
-"jazz-tools": patch
----
-
-Fixed isAuthenticated out-of-sync with the account state during the logOut and authenticate flows

.changeset/selfish-llamas-pump.md

@@ -1,8 +0,0 @@
----
-"cojson-storage-indexeddb": patch
-"cojson-storage-rn-sqlite": patch
-"cojson-storage-sqlite": patch
-"cojson-storage": patch
----
-
-Improve rollback on error when failing to add new content

.changeset/spotty-shoes-play.md

@@ -1,9 +0,0 @@
----
-"jazz-react-auth-clerk": patch
-"jazz-auth-clerk": patch
-"jazz-browser": patch
-"jazz-react": patch
-"jazz-tools": patch
----
-
-Fixes clerk auth flow

.github/workflows/pre-release.yml

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

.github/workflows/release.yml

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

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": {
-            "useImportExtensions": "off"
-          }
+          "recommended": true
         }
       }
     },
     {
-      "include": ["packages/cojson-storage-indexeddb/**"],
+      "include": ["packages/**/src/tests/**"],
       "linter": {
-        "enabled": true,
         "rules": {
-          "recommended": true,
+          "correctness": {
+            "useImportExtensions": "off"
+          },
+          "style": {
+            "noNonNullAssertion": "off"
+          },
           "suspicious": {
             "noExplicitAny": "info"
           }

examples/chat-rn-clerk/CHANGELOG.md

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

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.71",
+  "version": "1.0.81",
   "scripts": {
     "build": "expo export -p ios",
     "start": "expo start",

examples/chat-rn/CHANGELOG.md

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

examples/chat-rn/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-rn",
-  "version": "1.0.68",
+  "version": "1.0.77",
   "main": "index.js",
   "scripts": {
     "build": "expo export -p ios",
@@ -35,8 +35,6 @@
     "react": "^18.3.1",
     "react-native": "~0.76.3",
     "react-native-get-random-values": "^1.11.0",
-    "react-native-nitro-modules": "0.21.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",

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

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

examples/chat-vue/package.json

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

examples/chat/CHANGELOG.md

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

examples/chat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-chat",
   "private": true,
-  "version": "0.0.151",
+  "version": "0.0.159",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/clerk/CHANGELOG.md

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

examples/clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clerk",
   "private": true,
-  "version": "0.0.50",
+  "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.6",
+    "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,74 @@
 # 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

examples/file-share-svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "file-share-svelte",
-  "version": "0.0.35",
+  "version": "0.0.43",
   "private": true,
   "type": "module",
   "scripts": {

examples/form/CHANGELOG.md

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

examples/form/package.json

@@ -1,7 +1,7 @@
 {
   "name": "form",
   "private": true,
-  "version": "0.0.46",
+  "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/image-upload/CHANGELOG.md

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

examples/image-upload/package.json

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

examples/inspector/CHANGELOG.md

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

examples/inspector/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-inspector-app",
   "private": true,
-  "version": "0.0.107",
+  "version": "0.0.111",
   "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",
-    "cojson": "workspace:0.10.6",
-    "cojson-transport-ws": "workspace:0.10.6",
+    "cojson": "workspace:0.11.0",
+    "cojson-transport-ws": "workspace:0.11.0",
     "hash-slash": "workspace:0.2.2",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",

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

examples/music-player/CHANGELOG.md

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

examples/music-player/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-music-player",
   "private": true,
-  "version": "0.0.72",
+  "version": "0.0.80",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -22,8 +22,8 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "jazz-inspector": "workspace:*",
-    "jazz-react": "workspace:0.10.6",
-    "jazz-tools": "workspace:0.10.6",
+    "jazz-react": "workspace:0.11.0",
+    "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;
   }
+}
 
-  /**
-   * Since musicTracks are created as private values (see uploadMusicTracks)
-   * to make them shareable as part of the playlist we are cloning them
-   * and setting the playlist group as owner of the clone
-   *
-   * Doing this for backwards compatibility for when the Group inheritance wasn't possible
-   */
-  const blob = await FileStream.loadAsBlob(track._refs.file.id);
-  const waveform = await MusicTrackWaveform.load(track._refs.waveform.id, {});
-
-  if (!blob || !waveform) return;
-
-  const trackClone = MusicTrack.create(
-    {
-      file: await FileStream.createFromBlob(blob, playlist._owner),
-      duration: track.duration,
-      waveform: MusicTrackWaveform.create(
-        { data: waveform.data },
-        playlist._owner,
-      ),
-      title: track.title,
-      sourceTrack: track,
-    },
-    playlist._owner,
+export async function removeTrackFromPlaylist(
+  playlist: Playlist,
+  track: MusicTrack,
+) {
+  const notAdded = !playlist.tracks?.some(
+    (t) => t?.id === track.id || t?._refs.sourceTrack?.id === track.id,
   );
 
-  playlist.tracks?.push(trackClone);
+  if (notAdded) return;
+
+  if (track._owner._type === "Group" && playlist._owner._type === "Group") {
+    const trackGroup = track._owner;
+    await trackGroup.revokeExtend(playlist._owner);
+
+    const index =
+      playlist.tracks?.findIndex(
+        (t) => t?.id === track.id || t?._refs.sourceTrack?.id === track.id,
+      ) ?? -1;
+    if (index > -1) {
+      playlist.tracks?.splice(index, 1);
+    }
+    return;
+  }
 }
 
 export async function updatePlaylistTitle(playlist: Playlist, title: string) {

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

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

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

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

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

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

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

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

examples/organization/CHANGELOG.md

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

examples/organization/package.json

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

examples/passkey-svelte/CHANGELOG.md

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

examples/passkey-svelte/package.json

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

examples/passkey/CHANGELOG.md

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

examples/passkey/package.json

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

examples/passphrase/CHANGELOG.md

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

examples/passphrase/package.json

@@ -1,7 +1,7 @@
 {
   "name": "passphrase",
   "private": true,
-  "version": "0.0.46",
+  "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 { StrictMode } from "react";
+import { JazzProvider, usePassphraseAuth } from "jazz-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,74 @@
 # 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

examples/password-manager/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-password-manager",
   "private": true,
-  "version": "0.0.70",
+  "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.6",
-    "jazz-tools": "workspace:0.10.6",
+    "jazz-react": "workspace:0.11.0",
+    "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={
-              item._owner.castAs(Group).myRole() !== "admin" &&
-              item._owner.castAs(Group).myRole() !== "writer"
-            }
+            disabled={!me.canWrite(item)}
           >
             Edit
           </Button>
           <Button
             onClick={() => handleDeleteItem(item)}
             variant="danger"
-            disabled={
-              item._owner.castAs(Group).myRole() !== "admin" &&
-              item._owner.castAs(Group).myRole() !== "writer"
-            }
+            disabled={!me.canWrite(item)}
           >
             Delete
           </Button>
@@ -210,21 +204,13 @@ const VaultPage: React.FC = () => {
         <div className="flex gap-2">
           <Button
             onClick={() => setIsNewItemModalOpen(true)}
-            disabled={
-              !selectedFolder ||
-              (selectedFolder._owner.castAs(Group).myRole() !== "admin" &&
-                selectedFolder._owner.castAs(Group).myRole() !== "writer")
-            }
+            disabled={!selectedFolder || !me.canWrite(selectedFolder)}
           >
             New Item
           </Button>
           <Button
             onClick={() => setIsInviteModalOpen(true)}
-            disabled={
-              !selectedFolder ||
-              (selectedFolder._owner.castAs(Group).myRole() !== "admin" &&
-                selectedFolder._owner.castAs(Group).myRole() !== "writer")
-            }
+            disabled={!selectedFolder || !me.canWrite(selectedFolder)}
           >
             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
-        .filter((m) => !m.account?.isMe && m.role !== "revoked")
-        .map((m) => m.account)
+    ? members.filter((m) => !m.account?.isMe).map((m) => m.account)
     : [];
 
   const handleCreateInviteLink = () => {

examples/pets/CHANGELOG.md

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

examples/pets/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-pets",
   "private": true,
-  "version": "0.0.168",
+  "version": "0.0.176",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -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.6",
-    "jazz-react": "workspace:0.10.6",
-    "jazz-tools": "workspace:0.10.6",
+    "jazz-browser-media-images": "workspace:0.11.0",
+    "jazz-react": "workspace:0.11.0",
+    "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.6",
+    "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,82 @@
 # 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

examples/reactions/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reactions",
   "private": true,
-  "version": "0.0.48",
+  "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({ owner: me });
+    const group = Group.create();
     group.addMember("everyone", "writer");
     const chat = Reactions.create([], { owner: group });
     router.navigate("/#/reactions/" + chat.id);

examples/todo-vue/CHANGELOG.md

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

examples/todo-vue/package.json

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

examples/todo/CHANGELOG.md

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

examples/todo/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-todo",
   "private": true,
-  "version": "0.0.167",
+  "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.6",
-    "jazz-tools": "workspace:0.10.6",
+    "jazz-react": "workspace:0.11.0",
+    "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,74 @@
 # 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

examples/version-history/package.json

@@ -1,7 +1,7 @@
 {
   "name": "version-history",
   "private": true,
-  "version": "0.0.45",
+  "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>

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,
@@ -14,10 +16,12 @@ import {
   FolderArchiveIcon,
   GaugeIcon,
   GlobeIcon,
+  HashIcon,
   ImageIcon,
+  InfoIcon,
   LinkIcon,
   LockKeyholeIcon,
-  LucideIcon,
+  type LucideIcon,
   MailIcon,
   MenuIcon,
   MessageCircleQuestionIcon,
@@ -53,6 +57,7 @@ const icons = {
   encryption: LockKeyholeIcon,
   faceId: ScanFace,
   file: FileTextIcon,
+  hash: HashIcon,
   help: MessageCircleQuestionIcon,
   image: ImageIcon,
   instant: GaugeIcon,
@@ -69,6 +74,8 @@ const icons = {
   touchId: FingerprintIcon,
   upload: UploadCloudIcon,
   zip: FolderArchiveIcon,
+  warning: AlertTriangleIcon,
+  info: InfoIcon,
 };
 
 // copied from tailwind line height https://tailwindcss.com/docs/font-size

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!

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 />
@@ -380,7 +385,7 @@ export async function onAnonymousAccountDiscarded(
 ```
 </CodeGroup>
 
-To see how this works in reality we suggest you to try 
+To see how this works in reality we suggest you to try
 to upload a song in the [music player demo](https://music-demo.jazz.tools/) and then
 try to log in with an existing account.
 

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>
-...more docs coming soon
+
+## 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>

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;
-    try {
-      mdxSource = await import(`./${slugPath}.mdx`);
-    } catch (error) {
-      mdxSource = await import(`./${slugPath}/${framework}.mdx`);
-    }
-
+    const mdxSource = await getMdxSource(slugPath, framework);
     const { default: Content, tableOfContents } = mdxSource;
 
     // Exclude h1 from table of contents

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">
-  11 February 2025
-</h2>
+For Jazz 0.10.0 we have been focusing on enhancing authentication to make it optional, more flexible and easier to use.
 
-<div>
-  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.
 
-  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!
 
-  <h3>What's new?</h3>
-  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>
+## 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 id="new-authentication-flow">New authentication flow</h3>
-  <div>
+## New authentication flow
     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:
@@ -191,8 +184,8 @@ export function AuthButton() {
 
   if (isAuthenticated) {
     return (
-      <Button 
-        variant="outline" 
+      <Button
+        variant="outline"
         onClick={logOut}
       >
         Sign out
@@ -224,8 +217,8 @@ export function AuthButton() {
 
   if (isAuthenticated) {
     return (
-      <Button 
-        variant="outline" 
+      <Button
+        variant="outline"
         onPress={logOut}
       >
         Sign out
@@ -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>
-<div>
+For the changes related to the specific auth providers see the updated [authentication docs](/docs/authentication/overview).
+
+## 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>
-<div>
+## Improvements on the loading APIs
+
 Before 0.10.0 `ensureLoaded` was returning a nullable value forcing the Typescript code to always include null checks:
 <CodeGroup>
 ```ts
@@ -336,17 +328,17 @@ if (value === null) {
   return <div>Track not found</div>;
 }
 ```
-</CodeGroup> 
-</div>
+</CodeGroup>
 
-<h3 id="native-websocket-for-jazz-workers">Jazz Workers on native WebSockets</h3>
-<div>
-  We have removed the dependency on `ws` and switched to the native WebSocket API for Jazz Workers.
+## Jazz Workers on native WebSockets
 
-  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:
-  <CodeGroup>
+This improves the compatibility with a wider set of Javascript runtimes adding drop-in support for Deno, Bun, Browsers and Cloudflare Durable Objects.
+
+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";
@@ -355,24 +347,21 @@ const { worker } = await startWorker({
   WebSocket,
 });
 ```
-</CodeGroup> 
-</div>
+</CodeGroup>
 
-<h3 id="group-inheritance">Group inheritance with role mapping</h3>
-<div>
-  You can override the inherited role by passing a second argument to `extend`.
+## Group inheritance with role mapping
+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:
-  <CodeGroup>
-  ```ts
-  const organization = Group.create();
-  const billing = Group.create();
+This can be used to give users limited access to a child group:
+<CodeGroup>
+```ts
+const organization = Group.create();
+const billing = Group.create();
 
-  billing.extend(organization, "reader");
-  ```
-  </CodeGroup>
+billing.extend(organization, "reader");
+```
+</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).
-</div>
+More about the group inheritance can be found in the [dedicated docs page](/docs/groups/inheritance).

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>

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

@@ -0,0 +1,123 @@
+import { ContentByFramework, CodeGroup } from '@/components/forMdx'
+
+export const metadata = { title: "Upgrade to Jazz 0.9.0" };
+
+# Upgrade to Jazz 0.9.0
+
+
+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. 🌬️
+
+## New provider setup
+
+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:
+
+  <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>
+
+## Top level imports for hooks
+
+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:
+
+  <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>
+
+## New testing utilities
+
+  <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>

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

@@ -0,0 +1,120 @@
+import { ContentByFramework, CodeGroup } from '@/components/forMdx'
+
+export const metadata = { title: "Upgrade to Jazz 0.9.0" };
+
+# Upgrade to Jazz 0.9.0
+
+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. 🌬️
+
+## New provider setup
+
+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:
+
+  <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>
+
+## Top level imports for hooks
+
+All Jazz hooks are now available as top-level imports from the `jazz-react` package.
+
+This change improves IDE intellisense support and simplifies imports:
+
+  <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>
+
+## New testing utilities
+
+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`:
+
+  <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>

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

@@ -0,0 +1,113 @@
+import { ContentByFramework, CodeGroup } from '@/components/forMdx'
+
+export const metadata = { title: "Upgrade to Jazz 0.9.0" };
+
+# Upgrade to Jazz 0.9.0
+
+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. 🌬️
+
+## New provider setup
+
+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:
+
+  <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>
+
+## Top level imports for hooks
+
+  <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>
+
+## New testing utilities
+
+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`:
+
+  <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>

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

@@ -0,0 +1,165 @@
+import { ContentByFramework, CodeGroup } from '@/components/forMdx'
+
+export const metadata = { title: "Upgrade to Jazz 0.9.0" };
+
+# Upgrade to Jazz 0.9.0
+
+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. 🌬️
+
+## New provider setup
+
+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:
+
+  <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>
+
+## Top level imports for hooks
+
+All Jazz hooks are now available as top-level imports from the `jazz-vue` package.
+
+This change improves IDE intellisense support and simplifies imports:
+
+  <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>
+
+## New testing utilities
+
+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`:
+
+  <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>

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

@@ -4,15 +4,9 @@ export const metadata = { title: "Upgrade to Jazz 0.9.0" };
 
 # Jazz 0.9.8 - Without me!
 
-<h2 className="not-prose text-sm text-stone-600 dark:text-stone-400 mb-5 pb-2 border-b">
-  14 January 2025
-</h2>
+We have simplified the API to make the "me" value always optional!
 
-<div>
-  We have simplified the API to make the "me" value always optional!
-
-  This removes the need of using `useAccount` like the 90% of the time!
-</div>
+This removes the need of using `useAccount` like the 90% of the time!
 
 <CodeGroup>
     {/* prettier-ignore */}
@@ -20,6 +14,7 @@ export const metadata = { title: "Upgrade to Jazz 0.9.0" };
     import { useState } from "react";
     import { Issue } from "./schema";
     import { IssueComponent } from "./components/Issue.tsx";
+
     function App() {
         const [issue, setIssue] = useState<Issue>();
 
@@ -43,9 +38,7 @@ export const metadata = { title: "Upgrade to Jazz 0.9.0" };
     ```
 </CodeGroup>
 
-<div>
-  This also applies to the load API:
-</div>
+This also applies to the load API:
 
 <CodeGroup>
   {/* prettier-ignore */}
@@ -54,9 +47,7 @@ export const metadata = { title: "Upgrade to Jazz 0.9.0" };
   ```
 </CodeGroup>
 
-<div>
-  And `Group.create`:
-</div>
+And `Group.create`:
 
 <CodeGroup>
     {/* prettier-ignore */}
@@ -67,8 +58,6 @@ export const metadata = { title: "Upgrade to Jazz 0.9.0" };
     ```
 </CodeGroup>
 
-<div>
 Everything is backward compatible, so no upgrade steps are required.
 
 With this Jazz API becomes way more lean and more is coming!
-</div>

homepage/homepage/app/(docs)/docs/[framework]/[...slug]/upgrade/react-native-local-persistence.mdx

@@ -4,46 +4,34 @@ export const metadata = { title: "Enable local persistence" };
 
 # Enable local persistence
 
-<h2 className="not-prose text-sm text-stone-600 dark:text-stone-400 mb-5 pb-2 border-b">
-  10 January 2025
-</h2>
+Version 0.9.2 introduces local persistence for React Native apps using SQLite.
 
-<ContentByFramework framework="react-native">
-  <div>
-    Version 0.9.2 introduces local persistence for React Native apps using SQLite.
+If you are upgrading from a version before 0.9.2, you need to enable local persistence by following the steps below.
 
-    If you are upgrading from a version before 0.9.2, you need to enable local persistence by following the steps below.
+Local persistence will become the default in 0.10.0.
 
-    Local persistence will become the default in 0.10.0.
-  </div>
+## Add the required dependencies
 
-  <h3>Add the required dependencies</h3>
+As SQLite package we now use `@op-engineering/op-sqlite`.
 
-  <div>
-    As SQLite package we now use `@op-engineering/op-sqlite`.
+To get local persistence working, you need to add `@op-engineering/op-sqlite` as a direct dependency to your project and run `npx pod-install`.
 
-    To get local persistence working, you need to add `@op-engineering/op-sqlite` as a direct dependency to your project and run `npx pod-install`.
-  </div>
+## Update your JazzProvider to enable local persistence
 
-  <h3>Update your JazzProvider to enable local persistence</h3>
+Local persistence is now disabled by default.
 
-  <div>
-    Local persistence is now disabled by default.
+To enable it, you need to pass the `storage` option to the `JazzProvider` component:
 
-    To enable it, you need to pass the `storage` option to the `JazzProvider` component:
-  </div>
-
-  <CodeGroup>
-    ```tsx
-    <JazzProvider 
-      auth={auto}
-      storage="sqlite"
-      peer="wss://cloud.jazz.tools/?key=you@example.com"
-      AccountSchema={MyAppAccount}
-    >
-      <App />
-    </JazzProvider>
-    ```
-  </CodeGroup>
-</ContentByFramework>
+<CodeGroup>
+  ```tsx
+  <JazzProvider
+    auth={auto}
+    storage="sqlite"
+    peer="wss://cloud.jazz.tools/?key=you@example.com"
+    AccountSchema={MyAppAccount}
+  >
+    <App />
+  </JazzProvider>
+  ```
+</CodeGroup>
 

homepage/homepage/app/(docs)/docs/[framework]/[...slug]/using-covalues/cofeeds.mdx

@@ -0,0 +1,225 @@
+export const metadata = { title: "CoFeeds" };
+
+import { CodeGroup, ComingSoon, ContentByFramework } from "@/components/forMdx";
+
+# CoFeeds
+
+CoFeeds are append-only data structures that track entries from different user sessions and accounts. Unlike other CoValues where everyone edits the same data, CoFeeds maintain separate streams for each session.
+
+Each account can have multiple sessions (different browser tabs, devices, or app instances), making CoFeeds ideal for building features like activity logs, presence indicators, and notification systems.
+
+The [Reactions example](https://github.com/garden-co/jazz/tree/main/examples/reactions) demonstrates a practical use of CoFeeds.
+
+## Creating CoFeeds
+
+CoFeeds are defined by specifying the type of items they'll contain, similar to how you define CoLists:
+
+<CodeGroup>
+```ts
+// Define a schema for feed items
+class Activity extends CoMap {
+  timestamp = co.Date;
+  action = co.literal("watering", "planting", "harvesting", "maintenance");
+  notes = co.optional.string;
+}
+
+// Define a feed of garden activities
+class ActivityFeed extends CoFeed.Of(co.ref(Activity)) {}
+
+// Create a feed instance
+const activityFeed = ActivityFeed.create([]);
+```
+</CodeGroup>
+
+Like other CoValues, you can specify [ownership](/docs/using-covalues/ownership) when creating CoFeeds.
+
+## Reading from CoFeeds
+
+Since CoFeeds are made of entries from users over multiple sessions, you can access entries in different ways - from a specific user's session or from their account as a whole.
+
+### Per-Session Access
+
+To retrieve entries from a session:
+
+<CodeGroup>
+```ts
+// Get the feed for a specific session
+const sessionFeed = activityFeed.perSession[sessionId];
+
+// Latest entry from a session
+console.log(sessionFeed.value.action); // "watering"
+```
+</CodeGroup>
+
+For convenience, you can also access the latest entry from the current session with `inCurrentSession`:
+
+<CodeGroup>
+```ts
+// Get the feed for the current session
+const currentSessionFeed = activityFeed.inCurrentSession;
+
+// Latest entry from the current session
+console.log(currentSessionFeed.value.action); // "harvesting"
+```
+</CodeGroup>
+
+### Per-Account Access
+
+To retrieve entries from a specific account you can use bracket notation with the account ID:
+
+<CodeGroup>
+```ts
+// Get the feed for a specific account
+const accountFeed = activityFeed[accountId];
+
+// Latest entry from the account
+console.log(accountFeed.value.action); // "watering"
+```
+</CodeGroup>
+
+For convenience, you can also access the latest entry from the current account with `byMe`:
+
+<CodeGroup>
+```ts
+// Get the feed for the current account
+const myLatestEntry = activityFeed.byMe;
+
+// Latest entry from the current account
+console.log(myLatestEntry.value.action); // "harvesting"
+```
+</CodeGroup>
+
+### Feed Entries
+
+#### All Entries
+
+To retrieve all entries from a CoFeed:
+
+<CodeGroup>
+```ts
+// Get the feeds for a specific account and session
+const accountFeed = activityFeed[accountId];
+const sessionFeed = activityFeed.perSession[sessionId];
+
+// Iterate over all entries from the account
+for (const entry of accountFeed.all) {
+  console.log(entry.value);
+}
+
+// Iterate over all entries from the session
+for (const entry of sessionFeed.all) {
+  console.log(entry.value);
+}
+```
+</CodeGroup>
+
+#### Latest Entry
+
+To retrieve the latest entry from a CoFeed, ie. the last update:
+
+<CodeGroup>
+```ts
+// Get the latest entry from the current account
+const latestEntry = activityFeed.byMe;
+
+console.log(`My last action was ${latestEntry.value.action}`); 
+  // "My last action was harvesting"
+
+// Get the latest entry from each account
+const latestEntriesByAccount = Object.values(activityFeed).map(entry => ({
+  accountName: entry.by?.profile?.name,
+  value: entry.value,
+}));
+```
+</CodeGroup>
+
+## Writing to CoFeeds
+
+CoFeeds are append-only; you can add new items, but not modify existing ones. This creates a chronological record of events or activities.
+
+### Adding Items
+
+<CodeGroup>
+```ts
+// Log a new activity
+activityFeed.push(Activity.create({
+  timestamp: new Date(),
+  action: "watering",
+  notes: "Extra water for new seedlings"
+}));
+```
+</CodeGroup>
+
+Each item is automatically associated with the current user's session. You don't need to specify which session the item belongs to - Jazz handles this automatically.
+
+### Understanding Session Context
+
+Each entry is automatically added to the current session's feed. When a user has multiple open sessions (like both a mobile app and web browser), each session creates its own separate entries:
+
+<CodeGroup>
+```ts
+// On mobile device:
+fromMobileFeed.push(Activity.create({
+  timestamp: new Date(),
+  action: "harvesting",
+  location: "Vegetable patch"
+}));
+
+// On web browser (same user):
+fromBrowserFeed.push(Activity.create({
+  timestamp: new Date(),
+  action: "planting",
+  location: "Flower bed"
+}));
+
+// These are separate entries in the same feed, from the same account
+
+```
+</CodeGroup>
+
+## Metadata
+
+CoFeeds support metadata, which is useful for tracking information about the feed itself. 
+
+### By
+
+The `by` property is the account that made the entry.
+
+<CodeGroup>
+```ts
+const accountFeed = activityFeed[accountId];  
+
+// Get the account that made the last entry
+console.log(accountFeed?.by);
+```
+</CodeGroup>
+
+### MadeAt
+
+The `madeAt` property is a timestamp of when the entry was added to the feed.
+
+<CodeGroup>
+```ts
+const accountFeed = activityFeed[accountId];
+
+// Get the timestamp of the last update
+console.log(accountFeed?.madeAt);
+
+// Get the timestamp of each entry
+for (const entry of accountFeed.all) {
+  console.log(entry.madeAt);
+}
+```
+</CodeGroup>
+
+## Best Practices
+
+### When to Use CoFeeds
+
+- **Use CoFeeds when**:
+  - You need to track per-user/per-session data
+  - Time-based information matters (activity logs, presence)
+
+- **Consider alternatives when**:
+  - Data needs to be collaboratively edited (use CoMaps or CoLists)
+  - You need structured relationships (use CoMaps/CoLists with references)

homepage/homepage/app/(docs)/docs/[framework]/[...slug]/using-covalues/colists.mdx

@@ -0,0 +1,192 @@
+import { CodeGroup, ContentByFramework } from "@/components/forMdx";
+
+export const metadata = { title: "CoLists" };
+
+# CoLists
+
+CoLists are ordered collections that work like JavaScript arrays. They provide indexed access, iteration methods, and length properties, making them perfect for managing sequences of items.
+
+## Creating CoLists
+
+CoLists are defined by specifying the type of items they contain:
+
+<CodeGroup>
+```ts
+class ListOfResources extends CoList.Of(co.string) {}
+
+class ListOfTasks extends CoList.Of(co.ref(Task)) {}
+```
+</CodeGroup>
+
+To instantiate a CoList:
+
+<CodeGroup>
+```ts
+// Create an empty list
+const resources = ListOfResources.create([]);
+
+// Create a list with initial items
+const tasks = ListOfTasks.create([
+  Task.create({ title: "Prepare soil beds", status: "in-progress" }),
+  Task.create({ title: "Order compost", status: "todo" })
+]);
+```
+</CodeGroup>
+
+Like other CoValues, you can specify [ownership](/docs/using-covalues/ownership) when creating CoLists.
+
+## Reading from CoLists
+
+CoLists support standard array access patterns:
+
+<CodeGroup>
+```ts
+// Access by index
+const firstTask = tasks[0];
+console.log(firstTask.title);  // "Prepare soil beds"
+
+// Get list length
+console.log(tasks.length);     // 2
+
+// Iteration
+tasks.forEach(task => {
+  console.log(task.title);
+  // "Prepare soil beds"
+  // "Order compost"
+});
+
+// Array methods
+const todoTasks = tasks.filter(task => task.status === "todo");
+console.log(todoTasks.length); // 1
+```
+</CodeGroup>
+
+## Writing to CoLists
+
+CoLists support all the standard JavaScript array mutation methods:
+
+<CodeGroup>
+```ts
+// Add items
+resources.push("Courgette");          // Add to end
+resources.unshift("Lettuce");         // Add to beginning
+
+console.log(resources);
+  // ["Lettuce", "Tomatoes", "Basil", "Peppers", "Courgette"]
+
+// Add complex items to lists of references
+tasks.push(Task.create({
+  title: "Install irrigation system", 
+  status: "todo"
+}));
+
+// Remove items
+resources.pop();                      // Remove last item
+resources.shift();                    // Remove first item
+resources.splice(1, 2);               // Remove items at index 1 and 2
+
+// Replace items
+resources[0] = "Cucumber";            // Replace first item
+
+console.log(resources);               // ["Cucumber"]
+
+// Modify items in a list of references
+tasks[0].status = "in-progress";  // Modify a property of an item
+```
+</CodeGroup>
+
+
+### Type Safety
+
+CoLists maintain type safety for their items:
+
+<CodeGroup>
+```ts
+// TypeScript knows each item's type
+resources.push("Carrots");        // ✓ Valid string
+resources.push(42);               // ✗ Type error: expected string
+
+// For lists of references, TypeScript knows the referenced type
+tasks.forEach(task => {
+  console.log(task.title);     // TypeScript knows 'task' has a 'title'
+});
+```
+</CodeGroup>
+
+### Array Methods
+
+CoLists support many standard JavaScript array methods:
+
+<CodeGroup>
+```ts
+resources.push("Tomatoes", "Basil", "Peppers");
+
+// Filter
+const springResources = resources.filter(resource => resource.includes("Tomato"));
+console.log(springResources); // ["Tomatoes"]
+
+// Map (creates a regular array, not a CoList)
+const resourceNames = resources.map(resource => resource.toUpperCase());
+console.log(resourceNames); // ["TOMATOES", "BASIL", "PEPPERS"]
+
+// Find
+const basil = resources.find(resource => resource === "Basil");
+
+// Sort (modifies the CoList in-place)
+resources.sort();
+console.log(resources); // ["Basil", "Cucumber", "Peppers", "Tomatoes"]
+```
+</CodeGroup>
+
+## Best Practices
+
+### Common Patterns
+
+#### List Rendering
+
+CoLists work well with UI rendering libraries:
+
+<CodeGroup>
+```tsx
+// React example
+function TaskList({ tasks }) {
+  return (
+    <ul>
+      {tasks.map(task => (
+        <li key={task.id}>
+          {task.title} - {task.status}
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+</CodeGroup>
+
+#### Managing Relations
+
+CoLists can be used to create one-to-many relationships:
+
+<CodeGroup>
+```ts
+class Project extends CoMap {
+  name = co.string;
+  tasks = co.ref(ListOfTasks);
+}
+
+// ...
+
+const task = Task.create({ 
+  title: "Plant seedlings",
+  status: "todo",
+  project: project, // Add a reference to the project
+});
+
+// Add a task to a garden project
+project.tasks.push(task);
+
+// Access the project from the task
+console.log(task.project); // { name: "Garden Project", tasks: [task] }
+```
+</CodeGroup>
+

homepage/homepage/app/(docs)/docs/[framework]/[...slug]/using-covalues/comaps.mdx

@@ -0,0 +1,199 @@
+import { CodeGroup, ContentByFramework } from "@/components/forMdx";
+
+export const metadata = { title: "CoMaps" };
+
+# CoMaps
+
+CoMaps are key-value objects that work like JavaScript objects. You can access properties with dot notation and define typed fields that provide TypeScript safety. They're ideal for structured data that needs type validation.
+
+## Creating CoMaps
+
+CoMaps are typically defined by extending the `CoMap` class and specifying primitive fields using the `co` declarer (see [Defining schemas: CoValues](/docs/schemas/covalues) for more details on primitive fields):
+
+<CodeGroup>
+```ts
+class Project extends CoMap {
+  name = co.string;
+  startDate = co.Date;
+  status = co.literal("planning", "active", "completed");
+  coordinator = co.optional.ref(Member);
+}
+```
+</CodeGroup>
+
+You can create either struct-like CoMaps with fixed fields (as above) or record-like CoMaps for key-value pairs:
+
+<CodeGroup>
+```ts
+class Inventory extends CoMap.Record(co.number) {}
+```
+</CodeGroup>
+
+To instantiate a CoMap:
+
+<CodeGroup>
+```ts
+const project = Project.create({
+  name: "Spring Planting",
+  startDate: new Date("2025-03-15"),
+  status: "planning",
+});
+
+const inventory = Inventory.create({
+  tomatoes: 48,
+  basil: 12,
+});
+
+```
+</CodeGroup>
+
+### Ownership
+
+When creating CoMaps, you can specify ownership to control access:
+
+<CodeGroup>
+```ts
+// Create with default owner (current user)
+const privateProject = Project.create({
+  name: "My Herb Garden",
+  startDate: new Date("2025-04-01"),
+  status: "planning",
+});
+
+// Create with shared ownership
+const gardenGroup = Group.create();
+gardenGroup.addMember(memberAccount, "writer");
+
+const communityProject = Project.create(
+  {
+    name: "Community Vegetable Plot",
+    startDate: new Date("2025-03-20"),
+    status: "planning",
+  },
+  { owner: gardenGroup },
+);
+```
+</CodeGroup>
+
+## Reading from CoMaps
+
+CoMaps can be accessed using familiar JavaScript object notation:
+
+<CodeGroup>
+```ts
+console.log(project.name);      // "Spring Planting"
+console.log(project.status);    // "planning"
+```
+</CodeGroup>
+
+### Handling Optional Fields
+
+Optional fields require checks before access:
+
+<CodeGroup>
+```ts
+if (project.coordinator) {
+  console.log(project.coordinator.name);  // Safe access
+}
+```
+</CodeGroup>
+
+### Working with Record CoMaps
+
+For record-type CoMaps, you can access values using bracket notation:
+
+<CodeGroup>
+```ts
+const inventory = Inventory.create({
+  tomatoes: 48,
+  peppers: 24,
+  basil: 12
+});
+
+console.log(inventory["tomatoes"]);  // 48
+```
+</CodeGroup>
+
+## Updating CoMaps
+
+Updating CoMap properties uses standard JavaScript assignment:
+
+<CodeGroup>
+```ts
+project.name = "Spring Vegetable Garden";    // Update name
+project.startDate = new Date("2025-03-20");  // Update date
+```
+</CodeGroup>
+
+### Type Safety
+
+CoMaps are fully typed in TypeScript, giving you autocomplete and error checking:
+
+<CodeGroup>
+```ts
+project.name = "Spring Vegetable Planting";  // ✓ Valid string
+project.startDate = "2025-03-15";  // ✗ Type error: expected Date
+```
+</CodeGroup>
+
+
+### Deleting Properties
+
+You can delete properties from CoMaps:
+
+<CodeGroup>
+```ts
+delete inventory["basil"];  // Remove a key-value pair
+
+// For optional fields in struct-like CoMaps
+project.coordinator = null;  // Remove the reference
+```
+</CodeGroup>
+
+## Best Practices
+
+### Structuring Data
+
+- Use struct-like CoMaps for entities with fixed, known properties
+- Use record-like CoMaps for dynamic key-value collections
+- Group related properties into nested CoMaps for better organization
+
+### Common Patterns
+
+#### Using Computed Properties
+
+CoMaps support computed properties and methods:
+
+<CodeGroup>
+```ts
+class ComputedProject extends CoMap {
+  name = co.string;
+  startDate = co.Date;
+  endDate = co.optional.Date;
+
+  get isActive() {
+    const now = new Date();
+    return now >= this.startDate && (!this.endDate || now <= this.endDate);
+  }
+
+  formatDuration(format: "short" | "full") {
+    const start = this.startDate.toLocaleDateString();
+    if (!this.endDate) {
+      return format === "full"
+        ? `Started on ${start}, ongoing`
+        : `From ${start}`;
+    }
+
+    const end = this.endDate.toLocaleDateString();
+    return format === "full"
+      ? `From ${start} to ${end}`
+      : `${(this.endDate.getTime() - this.startDate.getTime()) / 86400000} days`;
+  }
+}
+
+// ...
+
+console.log(computedProject.isActive); // false
+console.log(computedProject.formatDuration("short")); // "3 days"
+```
+</CodeGroup>

homepage/homepage/app/(docs)/docs/[framework]/[...slug]/using-covalues/creation.mdx

@@ -0,0 +1,107 @@
+import { CodeGroup, ComingSoon, ContentByFramework } from "@/components/forMdx";
+
+export const metadata = { title: "Creation & ownership" };
+
+# Creation & Ownership
+
+CoValues are collaborative by nature - anything you create can be shared and synced with others. Who gets to read or change each CoValue is controlled by its owner - either an individual `Account` or a shared `Group`. This foundation of ownership is what enables Jazz applications to support real-time collaboration while maintaining proper access control. Understanding how to create and manage ownership of CoValues is essential for building effectively with Jazz.
+
+## Creating CoValues
+
+Every CoValue starts with a [schema](/docs/schemas/covalues#start-your-app-with-a-schema). From there you can create CoValues with the `create` method. Creating CoValues is straightforward - you define the structure in your schema and then instantiate instances with initial values. These newly created CoValues automatically sync across devices and users who have access to them. 
+
+Here's a simple example:
+
+<CodeGroup>
+```ts
+class Task extends CoMap {
+  title = co.string;
+  description = co.string;
+  status = co.literal("todo", "in-progress", "completed");
+}
+
+// Create a new task
+const task = Task.create({
+  title: "Plant spring vegetables",
+  description: "Plant peas, carrots, and lettuce",
+  status: "todo",
+});
+```
+</CodeGroup>
+
+When you create a CoValue, you provide its initial data and optionally specify who owns it. The data must match the schema you defined - TypeScript will help ensure you get this right.
+
+For more examples of creating different types of CoValues:
+
+<CodeGroup>
+```ts
+// Creating a CoFeed for activity notifications
+class ActivityNotification extends CoMap {
+  message = co.string;
+  type = co.literal("info", "warning", "success");
+  timestamp = co.Date;
+}
+
+class ActivityFeed extends CoFeed.Of(co.ref(ActivityNotification)) {}
+
+const feed = ActivityFeed.create();
+
+// Adding an item to the feed
+feed.addItem(ActivityNotification.create({
+  message: "New task created",
+  type: "info",
+  timestamp: new Date()
+}));
+```
+</CodeGroup>
+
+## Ownership & Access Control
+
+Every CoValue needs an owner to control who can access it. An owner can be an individual `Account`, but it's usually a `Group` since that lets you share with multiple people. The ownership model in Jazz provides fine-grained control over who can read, write, or administer your collaborative data. This system makes it easy to implement common patterns like shared workspaces, personal data, or public resources.
+
+### Groups & Roles
+
+Groups have members with different roles that control what they can do. These roles provide a permission system that's both simple to understand and powerful enough for complex collaboration scenarios. By assigning appropriate roles, you can control exactly who can view, edit, or manage access to your data.
+
+<CodeGroup>
+```ts
+// Create a group
+const gardenTeam = Group.create();
+
+// Add garden members with different roles
+gardenTeam.addMember(coordinator, "admin");     // Garden coordinator manages everything
+gardenTeam.addMember(gardener, "writer");       // Gardeners can update tasks
+gardenTeam.addMember(visitor, "reader");        // Visitors can view progress
+
+// Create a list of tasks with the same owner
+const taskList = ListOfTasks.create([]);
+
+// Create a garden project with nested tasks, all with the same ownership
+const springProject = Project.create({
+  name: "Spring Planting",
+  description: "Preparing the community garden for spring vegetables",
+  tasks: taskList
+});
+
+// Add tasks to the list
+taskList.push(Task.create({
+  title: "Start tomato seedlings",
+  description: "Plant Roma and Cherry varieties in seed trays",
+  status: "todo"
+});
+
+taskList.push(Task.create({
+  title: "Prepare herb garden",
+  description: "Clear old growth and add fresh compost",
+  status: "todo"
+});
+```
+</CodeGroup>
+
+Each role has specific permissions:
+- `admin`: Full control including managing members
+- `writer`: Can modify content
+- `reader`: Can only read content
+- `writerOnly`: Can only write to the CoValue, not read it
+
+For more information on groups and roles, see the [Groups](/docs/groups/intro) documentation.

homepage/homepage/app/(docs)/docs/[framework]/[...slug]/using-covalues/metadata.mdx

@@ -0,0 +1,269 @@
+import { CodeGroup } from "@/components/forMdx";
+
+export const metadata = { title: "Metadata & time-travel" };
+
+# Metadata & time-travel
+
+One of Jazz's most powerful features is that every CoValue automatically tracks its complete edit history. This means you can see who changed what and when, examine the state of your data at any point in time, and build features like audit logs, activity feeds, and undo/redo functionality. This page explores how to access and work with the rich metadata that comes with every CoValue.
+
+## Understanding Edit History
+
+Every CoValue in Jazz maintains a full history of all changes made to it. This edit history is accessible through two main APIs:
+
+`CoValue._edits` provides a structured, field-by-field view of a CoValue's edit history. It organizes edits by property name and makes them easily accessible. For each field:
+- `_edits.fieldName` gives you the most recent edit
+- `_edits.fieldName.all` provides all historical edits as an array
+- `_edits.fieldName.madeAt` gives you the timestamp of the last edit
+- Each edit contains the value, who made the change, and when it happened
+
+`CoValue._raw` gives you access to the internal state and lower-level operations on a CoValue. As this is an internal API, it should be used with caution. If you find yourself using `_raw`, consider letting us know so we can consider adding a public API for your use case.
+
+## Working with Edit History Metadata
+
+CoValues track who made each change and when. Every edit has metadata attached to it, including the author, timestamp, value, and transaction ID. This metadata enables you to build powerful audit and history features without having to implement your own tracking system.
+
+<CodeGroup>
+```ts
+class Task extends CoMap {
+  title = co.string;
+  description = co.string;
+  status = co.literal("todo", "in-progress", "completed");
+  priority = co.literal("low", "medium", "high");
+  subtasks = co.optional.ref(ListOfTasks);
+}
+
+class ListOfTasks extends CoList.Of(co.ref(Task)) {}
+
+const task = Task.create({
+  title: "Plant spring vegetables",
+  description: "Plant peas, carrots, and lettuce in the south garden bed",
+  status: "todo",
+  priority: "medium",
+});
+
+// Change the status
+task.status = "in-progress";
+
+// Get the latest edit for a field
+console.log("Latest edit:", task._edits.status);
+// { value: "in-progress", by: Account, madeAt: Date, ... }
+
+// Get when a field was last edited (timestamp)
+const lastEditTime = task._edits.status.madeAt;
+console.log(`Status was last changed at: ${lastEditTime?.toLocaleString()}`);
+
+// Get the full edit history for a field
+for (const edit of task._edits.status.all) {
+  console.log({
+    author: edit.by,        // Account that made the change
+    timestamp: edit.madeAt, // When the change happened
+    value: edit.value,      // Value of the change
+  });
+}
+```
+</CodeGroup>
+
+### Common Patterns
+
+With knowledge of the edit history, you can build all sorts of useful features that enhance your application's user experience and administrative capabilities. Here are some common patterns that leverage CoValue metadata.
+
+#### Audit Log
+
+Getting all the changes to a CoValue in order allows you to build an audit log. This is especially useful for tracking important changes in collaborative environments or for compliance purposes:
+
+<CodeGroup>
+```ts
+
+function getAuditLog(task: Task) {
+  const changes = [];
+
+  for (const field of Object.keys(task)) {
+    // Check if the field has edits to avoid accessing non-existent properties
+    if (task._edits[field as keyof typeof task._edits]) {
+      for (const edit of task._edits[field as keyof typeof task._edits].all) {
+        changes.push({
+          field,
+          ...edit,
+          timestamp: edit.madeAt,
+          at: edit.madeAt,
+          by: edit.by,
+        });
+      }
+    }
+  }
+
+  // Sort by timestamp
+  return changes.sort((a, b) => b.at.getTime() - a.at.getTime());
+}
+
+// Example usage
+const auditLog = getAuditLog(task);
+auditLog.forEach((entry) => {
+  console.log(
+    `${entry.timestamp} - ${entry.field} changed to "${entry.value}" by ${entry.by?.id}`,
+  );
+});
+```
+</CodeGroup>
+
+#### Activity Feeds
+
+Activity feeds are a great way to see recent changes to a CoValue, helping users understand what's happening in a collaborative workspace. They can show who did what and when, creating transparency in team environments:
+
+<CodeGroup>
+```ts
+function getRecentActivity(project: Project) {
+  const activity = [];
+  const hourAgo = new Date(Date.now() - 3600000);
+  
+  for (const field of Object.keys(project)) {
+    // Skip if the field doesn't have edits
+    if (!project._edits[field as keyof typeof project._edits]) continue;
+    
+    for (const edit of project._edits[field as keyof typeof project._edits].all) {
+      if (edit.madeAt > hourAgo) {
+        activity.push({
+          field,
+          value: edit.value,
+          by: edit.by,
+          at: edit.madeAt
+        });
+      } 
+    }
+  }
+  
+  return activity.sort((a, b) => b.at.getTime() - a.at.getTime());
+}
+
+// Example usage
+const recentActivity = getRecentActivity(gardenProject);
+console.log("Recent Garden Activity:");
+recentActivity.forEach(activity => {
+  console.log(`${activity.at.toLocaleString()} - ${activity.field} updated by ${activity.by?.id}`);
+});
+```
+</CodeGroup>
+
+## Edit History & Time Travel
+
+CoValues track their entire history of changes, creating a timeline you can explore. You can see who changed what and when, or even view past states of the data. This capability enables powerful debugging tools and user-facing features like history browsing and restoration of previous versions:
+
+<CodeGroup> 
+```ts
+class Task extends CoMap {
+  title = co.string;
+  description = co.string;
+  status = co.literal("todo", "in-progress", "completed");
+  priority = co.literal("low", "medium", "high");
+}
+
+// Create a new task
+const task = Task.create({
+  title: "Plant spring vegetables",
+  description: "Plant peas, carrots, and lettuce in the south garden bed",
+  status: "todo",
+  priority: "medium",
+});
+
+// Make some changes
+task.status = "in-progress";
+task.priority = "high";
+
+// See all edits for a field
+for (const edit of task._edits.status.all) {
+  console.log(
+    `${edit.madeAt.toISOString()}: Status changed to "${edit.value}" by ${edit.by?.id}`,
+  );
+}
+
+// Get the initial value
+const initialStatus = task._edits.status.all[0]?.value;
+console.log(`Original status: ${initialStatus}`);
+
+// Get a specific edit by index
+const previousEdit = task._edits.status.all[1]; // Second edit
+console.log(`Previous status: ${previousEdit?.value}`);
+
+// Check who made the most recent change
+const latestEdit = task._edits.status;
+console.log(`Latest change made by: ${latestEdit?.by?.id}`);
+```
+</CodeGroup>
+
+## Time Travel
+
+The ability to view a CoValue as it existed at any point in time is one of Jazz's most powerful features. Looking into the past can help you understand how things changed - perfect for audit logs, debugging, or showing user activity. You can reconstruct the exact state of any CoValue at any moment in its history:
+
+<CodeGroup>
+```ts
+class Project extends CoMap {
+  name = co.string;
+  status = co.literal("planning", "active", "completed");
+  lastUpdate = co.Date;
+}
+
+// See when a project was started
+function findStatusChange(project: Project, targetStatus: string) {
+  // Get all the edits for the status field
+  const statusEdits = project._edits.status.all;
+  
+  for (const edit of statusEdits) {
+    if (edit.value === targetStatus) {
+      console.log({
+        changeTime: edit.madeAt,
+        lastUpdate: project.lastUpdate,
+        changedBy: edit.by,
+      });
+    }
+  }
+}
+
+// Example usage
+findStatusChange(gardenProject, "active");
+```
+</CodeGroup>
+
+### Common Use Cases
+
+The time travel capabilities of CoValues enable several practical use cases that would otherwise require complex custom implementations. Here are some examples of how you can use time travel in your applications:
+
+<CodeGroup>
+```ts
+// Track task progress over time
+function getTaskStatusHistory(task: Task, days: number = 7) {
+  const statusHistory = [];
+  const dayInMs = 86400000;
+  
+  // Check every day for the past week
+  for (let day = 0; day < days; day++) {
+    const timePoint = new Date(Date.now() - day * dayInMs);
+    // Using the internal _raw API to get state at a specific point in time
+    const state = task._raw.atTime(timePoint);
+    statusHistory.push({
+      date: timePoint.toLocaleDateString(),
+      status: state.status,
+      priority: state.priority
+    });
+  }
+  
+  return statusHistory;
+}
+
+// Example usage
+const history = getTaskStatusHistory(plantingTask);
+history.forEach(entry => {
+  console.log(`${entry.date}: Status was "${entry.status}" with ${entry.priority} priority`);
+});
+```
+</CodeGroup>
+
+### Best Practices
+
+- Check field existence before accessing edits (`if (task._edits.fieldName)`)
+- Access the most recent edit directly with `_edits.fieldName` instead of using any `.latest` property
+- Cache historical queries if you're displaying them in UI
+- Be specific about time ranges you care about
+- Remember that accessing history requires loading the CoValue
+- Consider using timestamps from your data rather than scanning all edits
+
+Time travel is great for understanding how you got here, but keep queries focused on the range of time that matters to your use case.