fix(useCoState): requested changes

fix: include tests in the typescript validation on cojson and jazz-tools

.changeset/empty-points-crash.md

@@ -0,0 +1,5 @@
+---
+"jazz-react-core": patch
+---
+
+Fix useCoState stale data

.changeset/selfish-guests-promise.md

@@ -0,0 +1,5 @@
+---
+"create-jazz-app": patch
+---
+
+Added Cursor docs to create-jazz-app

.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();
               }
-            }
+            }

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,57 @@
 # chat-rn-clerk
 
+## 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

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

examples/chat-rn/CHANGELOG.md

@@ -1,5 +1,43 @@
 # chat-rn
 
+## 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

examples/chat-rn/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-rn",
-  "version": "1.0.69",
+  "version": "1.0.74",
   "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,41 @@
 # chat-vue
 
+## 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

examples/chat-vue/package.json

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

examples/chat/CHANGELOG.md

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

examples/chat/package.json

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

examples/clerk/CHANGELOG.md

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

examples/clerk/package.json

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

examples/file-share-svelte/CHANGELOG.md

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

examples/file-share-svelte/package.json

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

examples/form/CHANGELOG.md

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

examples/form/package.json

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

examples/image-upload/CHANGELOG.md

@@ -1,5 +1,39 @@
 # image-upload
 
+## 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

examples/image-upload/package.json

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

examples/inspector/CHANGELOG.md

@@ -1,5 +1,13 @@
 # jazz-example-inspector
 
+## 0.0.109
+
+### Patch Changes
+
+- Updated dependencies [153dc99]
+  - cojson@0.10.8
+  - cojson-transport-ws@0.10.8
+
 ## 0.0.108
 
 ### Patch Changes

examples/inspector/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-inspector-app",
   "private": true,
-  "version": "0.0.108",
+  "version": "0.0.109",
   "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.7",
-    "cojson-transport-ws": "workspace:0.10.7",
+    "cojson": "workspace:0.10.8",
+    "cojson-transport-ws": "workspace:0.10.8",
     "hash-slash": "workspace:0.2.2",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",

examples/music-player/CHANGELOG.md

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

examples/music-player/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-music-player",
   "private": true,
-  "version": "0.0.73",
+  "version": "0.0.77",
   "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.7",
-    "jazz-tools": "workspace:0.10.7",
+    "jazz-react": "workspace:0.10.13",
+    "jazz-tools": "workspace:0.10.13",
     "lucide-react": "^0.274.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

examples/organization/CHANGELOG.md

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

examples/organization/package.json

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

examples/passkey-svelte/CHANGELOG.md

@@ -1,5 +1,30 @@
 # passkey-svelte
 
+## 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

examples/passkey-svelte/package.json

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

examples/passkey/CHANGELOG.md

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

examples/passkey/package.json

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

examples/passphrase/CHANGELOG.md

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

examples/passphrase/package.json

@@ -1,7 +1,7 @@
 {
   "name": "passphrase",
   "private": true,
-  "version": "0.0.47",
+  "version": "0.0.51",
   "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,35 @@
 # jazz-password-manager
 
+## 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

examples/password-manager/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-password-manager",
   "private": true,
-  "version": "0.0.71",
+  "version": "0.0.75",
   "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.7",
-    "jazz-tools": "workspace:0.10.7",
+    "jazz-react": "workspace:0.10.13",
+    "jazz-tools": "workspace:0.10.13",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.41.5",

examples/pets/CHANGELOG.md

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

examples/pets/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-pets",
   "private": true,
-  "version": "0.0.169",
+  "version": "0.0.173",
   "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.7",
-    "jazz-react": "workspace:0.10.7",
-    "jazz-tools": "workspace:0.10.7",
+    "jazz-browser-media-images": "workspace:0.10.13",
+    "jazz-react": "workspace:0.10.13",
+    "jazz-tools": "workspace:0.10.13",
     "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.7",
+    "jazz-run": "workspace:0.10.13",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.4.17",
     "typescript": "~5.6.2",

examples/reactions/CHANGELOG.md

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

examples/reactions/package.json

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

examples/todo-vue/CHANGELOG.md

@@ -1,5 +1,41 @@
 # todo-vue
 
+## 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

examples/todo-vue/package.json

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

examples/todo/CHANGELOG.md

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

examples/todo/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-todo",
   "private": true,
-  "version": "0.0.168",
+  "version": "0.0.172",
   "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.7",
-    "jazz-tools": "workspace:0.10.7",
+    "jazz-react": "workspace:0.10.13",
+    "jazz-tools": "workspace:0.10.13",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.3.1",

examples/version-history/CHANGELOG.md

@@ -1,5 +1,35 @@
 # version-history
 
+## 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

examples/version-history/package.json

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

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

@@ -14,6 +14,7 @@ import {
   FolderArchiveIcon,
   GaugeIcon,
   GlobeIcon,
+  HashIcon,
   ImageIcon,
   LinkIcon,
   LockKeyholeIcon,
@@ -53,6 +54,7 @@ const icons = {
   encryption: LockKeyholeIcon,
   faceId: ScanFace,
   file: FileTextIcon,
+  hash: HashIcon,
   help: MessageCircleQuestionIcon,
   image: ImageIcon,
   instant: GaugeIcon,

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]/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

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]/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-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/(others)/cloud/page.tsx

@@ -1,25 +1,27 @@
 import { Pricing } from "@/components/Pricing";
 import { LatencyMap } from "@/components/cloud/latencyMap";
 import { GridCard } from "gcmp-design-system/src/app/components/atoms/GridCard";
-import {
-  H2,
-  H3,
-  H4,
-} from "gcmp-design-system/src/app/components/atoms/Headings";
-import { LI } from "gcmp-design-system/src/app/components/atoms/ListItem";
+import { H2, H3 } from "gcmp-design-system/src/app/components/atoms/Headings";
 import { P } from "gcmp-design-system/src/app/components/atoms/Paragraph";
 import { GappedGrid } from "gcmp-design-system/src/app/components/molecules/GappedGrid";
 import { HeroHeader } from "gcmp-design-system/src/app/components/molecules/HeroHeader";
-import { UL } from "gcmp-design-system/src/app/components/molecules/List";
 import { Prose } from "gcmp-design-system/src/app/components/molecules/Prose";
 import { SectionHeader } from "gcmp-design-system/src/app/components/molecules/SectionHeader";
+import type { Metadata } from "next";
 import CloudPlusBackup from "./cloudPlusBackup.mdx";
 import CloudPlusDIY from "./cloudPlusDIY.mdx";
 import CompletelyDIY from "./completelyDIY.mdx";
 
-export const metadata = {
-  title: "Jazz Cloud",
-  description: "Serverless sync & storage for Jazz apps.",
+const title = "Jazz Cloud";
+const description = "Serverless sync & storage for Jazz apps.";
+
+export const metadata: Metadata = {
+  title,
+  description,
+  openGraph: {
+    title,
+    description,
+  },
 };
 
 export default function Cloud() {

homepage/homepage/app/(others)/examples/page.tsx

@@ -11,6 +11,20 @@ import { H2 } from "gcmp-design-system/src/app/components/atoms/Headings";
 import { Icon } from "gcmp-design-system/src/app/components/atoms/Icon";
 import { GappedGrid } from "gcmp-design-system/src/app/components/molecules/GappedGrid";
 import { HeroHeader } from "gcmp-design-system/src/app/components/molecules/HeroHeader";
+import type { Metadata } from "next";
+
+const title = "Examples";
+const description =
+  "Find an example app with code most similar to what you want to build.";
+
+export const metadata: Metadata = {
+  title,
+  description,
+  openGraph: {
+    title,
+    description,
+  },
+};
 
 const MockButton = ({ children }: { children: React.ReactNode }) => (
   <p className="bg-blue-100 text-blue-800 py-1 px-3 rounded-full font-medium  text-xs inline-flex items-center justify-center">

homepage/homepage/app/(others)/showcase/page.tsx

@@ -1,11 +1,19 @@
 import { products } from "@/lib/showcase";
 import { HeroHeader } from "gcmp-design-system/src/app/components/molecules/HeroHeader";
+import type { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
 
-export const metadata = {
-  title: "Built with Jazz",
-  description: "Great apps by smart people.",
+const title = "Built with Jazz";
+const description = "Great apps by smart people.";
+
+export const metadata: Metadata = {
+  title,
+  description,
+  openGraph: {
+    title,
+    description,
+  },
 };
 
 export default function Page() {

homepage/homepage/app/(others)/status/page.tsx

@@ -1,8 +1,18 @@
 import { clsx } from "clsx";
 import { HeroHeader } from "gcmp-design-system/src/app/components/molecules/HeroHeader";
+import type { Metadata } from "next";
 import dynamic from "next/dynamic";
 import { Fragment } from "react";
 
+const title = "Status";
+
+export const metadata: Metadata = {
+  title,
+  openGraph: {
+    title,
+  },
+};
+
 const LatencyChart = dynamic(() => import("@/components/LatencyChart"), {
   ssr: false,
 });
@@ -133,11 +143,6 @@ const query = async () => {
   return byRegion;
 };
 
-export const metadata = {
-  title: "Status",
-  description: "Great apps by smart people.",
-};
-
 export default async function Page() {
   const byRegion = await query();
 

homepage/homepage/components/docs/DocHeading.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { type ReactNode, useRef } from "react";
+
+interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+  children?: ReactNode;
+}
+export const Heading = ({ children, tag: Tag, ...props }: HeadingProps) => {
+  const linkRef = useRef<HTMLAnchorElement>(null);
+
+  return (
+    <Tag {...props} className="group">
+      <a
+        href={`#${props.id}`}
+        className="no-underline float-left absolute -ml-[1.25em] hidden sm:block opacity-0 group-hover:opacity-100 transition-opacity"
+        aria-label="Navigate to header"
+        ref={linkRef}
+      >
+        <span aria-hidden="true">#</span>
+      </a>
+
+      <span className="cursor-pointer" onClick={() => linkRef.current?.click()}>
+        {children}
+      </span>
+    </Tag>
+  );
+};

homepage/homepage/generate-docs/llms-full.mjs

@@ -1,12 +1,10 @@
 import { promises as fs } from "fs";
 import path from "path";
-import { Deserializer, ReflectionKind } from "typedoc";
-import { DOC_SECTIONS, PACKAGES } from "./utils/config.mjs";
-import {
-  getPackageDescription,
-  loadTypedocFiles,
-  writeDocsFile,
-} from "./utils/index.mjs";
+import { join } from "path";
+import { readFile, readdir } from "fs/promises";
+import { Deserializer } from "typedoc";
+import { DOC_SECTIONS } from "./utils/config.mjs";
+import { loadTypedocFiles, writeDocsFile } from "./utils/index.mjs";
 
 function formatType(type) {
   if (!type) return "unknown";
@@ -500,9 +498,90 @@ async function generateDetailedDocs(docs) {
     "- [Examples](https://jazz.tools/examples): Code examples and tutorials\n",
   );
 
-  const content = output.join("\n");
-  await writeDocsFile("llms.txt", content);
-  await writeDocsFile("llms-full.txt", content);
+  const outputWithExamples = [...output];
+  await readMusicExample(outputWithExamples);
+
+  await writeDocsFile("llms.txt", output.join("\n"));
+  await writeDocsFile("llms-full.txt", outputWithExamples.join("\n"));
+}
+
+/**
+ * @typedef {Object} FileContent
+ * @property {string} filepath - The relative path to the file
+ * @property {string} content - The content of the file
+ */
+
+/**
+ * Recursively loads all files from a directory and its subdirectories
+ * @param {string} directoryPath - The path to the directory to load
+ * @param {Object} options - Optional configuration
+ * @param {string[]} options.exclude - File patterns to exclude (e.g., ['*.md', '*.git'])
+ * @param {string} options.encoding - File encoding (default: 'utf-8')
+ * @returns {Promise<FileContent[]>} Array of filepath/content pairs
+ */
+async function loadDirectoryContent(directoryPath, options = {}) {
+  const { exclude = [], encoding = "utf-8" } = options;
+
+  async function processDirectory(currentPath) {
+    const results = [];
+
+    try {
+      const entries = await readdir(currentPath, { withFileTypes: true });
+
+      for (const entry of entries) {
+        const fullPath = join(currentPath, entry.name);
+
+        if (entry.isDirectory()) {
+          // Recursively process subdirectories
+          const subDirResults = await processDirectory(fullPath);
+          results.push(...subDirResults);
+        } else if (entry.isFile()) {
+          // Check if file should be excluded
+          const shouldExclude = exclude.some((pattern) => {
+            if (pattern.startsWith("*.")) {
+              const extension = pattern.slice(1);
+              return entry.name.endsWith(extension);
+            }
+            return entry.name === pattern;
+          });
+
+          if (!shouldExclude) {
+            try {
+              const content = await readFile(fullPath, { encoding });
+              results.push({
+                filepath: fullPath,
+                content: content,
+              });
+            } catch (error) {
+              console.error(`Error reading file ${fullPath}:`, error);
+            }
+          }
+        }
+      }
+    } catch (error) {
+      console.error(`Error reading directory ${currentPath}:`, error);
+    }
+
+    return results;
+  }
+
+  try {
+    return await processDirectory(directoryPath);
+  } catch (error) {
+    throw new Error(`Failed to load directory content: ${error.message}`);
+  }
+}
+
+async function readMusicExample(output) {
+  const files = await loadDirectoryContent(
+    path.join(process.cwd(), "../../examples/music-player/src"),
+  );
+
+  output.push("## Music Example\n\n");
+  for (const file of files) {
+    output.push(`### ${file.filepath}\n`);
+    output.push(`\`\`\`ts\n${file.content}\n\`\`\`\n`);
+  }
 }
 
 // Main execution

homepage/homepage/lib/docNavigationItems.js

@@ -29,6 +29,11 @@ export const docNavigationItems = [
         href: "/docs/ai-tools",
         done: 100,
       },
+      {
+        name: "Inspector",
+        href: "/docs/inspector",
+        done: 100,
+      },
     ],
   },
   {

homepage/homepage/mdx-components.tsx

@@ -1,16 +1,22 @@
 import { DocsLink } from "@/components/docs/DocsLink";
 import type { MDXComponents } from "mdx/types";
+import { Heading } from "./components/docs/DocHeading";
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
     a: (props) => <DocsLink {...props} />,
+    h2: (props) => <Heading tag="h2" {...props} />,
+    h3: (props) => <Heading tag="h3" {...props} />,
+    h4: (props) => <Heading tag="h4" {...props} />,
+    h5: (props) => <Heading tag="h5" {...props} />,
+    h6: (props) => <Heading tag="h6" {...props} />,
     ...components,
     CodeWithInterpolation: ({
       highlightedCode,
     }: { highlightedCode: string }) => {
       return <div dangerouslySetInnerHTML={{ __html: highlightedCode }} />;
     },
-  };
+  } satisfies MDXComponents;
 }
 
 export function InterpolateInCode(replace: { [key: string]: string }) {

packages/cojson-storage-indexeddb/CHANGELOG.md

@@ -1,5 +1,13 @@
 # cojson-storage-indexeddb
 
+## 0.10.8
+
+### Patch Changes
+
+- Updated dependencies [153dc99]
+  - cojson@0.10.8
+  - cojson-storage@0.10.8
+
 ## 0.10.7
 
 ### Patch Changes

packages/cojson-storage-indexeddb/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cojson-storage-indexeddb",
-  "version": "0.10.7",
+  "version": "0.10.8",
   "main": "dist/index.js",
   "type": "module",
   "types": "src/index.ts",

packages/cojson-storage-rn-sqlite/CHANGELOG.md

@@ -1,5 +1,13 @@
 # cojson-storage-sqlite
 
+## 0.8.66
+
+### Patch Changes
+
+- Updated dependencies [153dc99]
+  - cojson@0.10.8
+  - cojson-storage@0.10.8
+
 ## 0.8.65
 
 ### Patch Changes

packages/cojson-storage-rn-sqlite/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cojson-storage-rn-sqlite",
   "type": "module",
-  "version": "0.8.65",
+  "version": "0.8.66",
   "main": "dist/index.js",
   "types": "src/index.ts",
   "license": "MIT",

packages/cojson-storage-rn-sqlite/src/client.ts

@@ -1,7 +1,7 @@
-import { type DB as DatabaseT } from "@op-engineering/op-sqlite";
-import {
+import type { DB as DatabaseT } from "@op-engineering/op-sqlite";
+import type {
   CojsonInternalTypes,
-  type OutgoingSyncQueue,
+  OutgoingSyncQueue,
   RawCoID,
   SessionID,
 } from "cojson";
@@ -29,14 +29,25 @@ export class SQLiteClient implements DBClientInterface {
 
     if (!rows || rows.length === 0) return;
 
-    const coValueRow = rows[0] as any & { rowID: number };
+    type DbCoValueRow = {
+      id: string;
+      header: string;
+      rowID: number;
+      [key: string]: unknown;
+    };
+
+    const coValueRow = rows[0] as DbCoValueRow;
     try {
       const parsedHeader =
-        coValueRow?.header &&
-        (JSON.parse(coValueRow.header) as CojsonInternalTypes.CoValueHeader);
+        coValueRow?.header && coValueRow.header.trim() !== ""
+          ? (JSON.parse(coValueRow.header) as CojsonInternalTypes.CoValueHeader)
+          : undefined;
+
+      if (!parsedHeader) return undefined;
 
       return {
         ...coValueRow,
+        id: coValueId,
         header: parsedHeader,
       };
     } catch (e) {
@@ -76,10 +87,13 @@ export class SQLiteClient implements DBClientInterface {
     if (!rows || rows.length === 0) return [];
 
     try {
-      return rows.map((row: any) => ({
-        ...row,
-        tx: JSON.parse(row.tx) as CojsonInternalTypes.Transaction,
-      }));
+      return rows.map((row) => {
+        const rowData = row as { ses: number; idx: number; tx: string };
+        return {
+          ...rowData,
+          tx: JSON.parse(rowData.tx) as CojsonInternalTypes.Transaction,
+        };
+      });
     } catch (e) {
       console.warn("Invalid JSON in transaction", e);
       return [];
@@ -126,7 +140,7 @@ export class SQLiteClient implements DBClientInterface {
         sessionUpdate.sessionID,
         sessionUpdate.lastIdx,
         sessionUpdate.lastSignature,
-        sessionUpdate.bytesSinceLastSignature!,
+        sessionUpdate.bytesSinceLastSignature ?? 0,
       ],
     );
     return rows[0]?.rowID as number;

packages/cojson-storage-rn-sqlite/src/sqlite-react-native.ts

@@ -113,7 +113,7 @@ export class SQLiteReactNative {
       );
 
       await db.execute(
-        `CREATE INDEX IF NOT EXISTS sessionsByCoValue ON sessions (coValue);`,
+        "CREATE INDEX IF NOT EXISTS sessionsByCoValue ON sessions (coValue);",
       );
 
       await db.execute(
@@ -125,7 +125,7 @@ export class SQLiteReactNative {
       );
 
       await db.execute(
-        `CREATE INDEX IF NOT EXISTS coValuesByID ON coValues (id);`,
+        "CREATE INDEX IF NOT EXISTS coValuesByID ON coValues (id);",
       );
 
       await db.execute("PRAGMA user_version = 1");
@@ -142,7 +142,7 @@ export class SQLiteReactNative {
       );
 
       await db.execute(
-        `ALTER TABLE sessions ADD COLUMN bytesSinceLastSignature INTEGER;`,
+        "ALTER TABLE sessions ADD COLUMN bytesSinceLastSignature INTEGER;",
       );
 
       await db.execute("PRAGMA user_version = 3");

packages/cojson-storage-sqlite/CHANGELOG.md

@@ -1,5 +1,13 @@
 # cojson-storage-sqlite
 
+## 0.10.8
+
+### Patch Changes
+
+- Updated dependencies [153dc99]
+  - cojson@0.10.8
+  - cojson-storage@0.10.8
+
 ## 0.10.7
 
 ### Patch Changes

packages/cojson-storage-sqlite/package.json

@@ -1,13 +1,13 @@
 {
   "name": "cojson-storage-sqlite",
   "type": "module",
-  "version": "0.10.7",
+  "version": "0.10.8",
   "main": "dist/index.js",
   "types": "src/index.ts",
   "license": "MIT",
   "dependencies": {
     "better-sqlite3": "^11.7.0",
-    "cojson": "workspace:0.10.7",
+    "cojson": "workspace:0.10.8",
     "cojson-storage": "workspace:*"
   },
   "devDependencies": {

packages/cojson-storage-sqlite/src/sqliteClient.ts

@@ -1,14 +1,11 @@
-import { Database as DatabaseT } from "better-sqlite3";
+import type { Database as DatabaseT } from "better-sqlite3";
 import {
-  CojsonInternalTypes,
-  OutgoingSyncQueue,
-  SessionID,
+  type CojsonInternalTypes,
+  type OutgoingSyncQueue,
+  type SessionID,
   logger,
 } from "cojson";
-import RawCoID = CojsonInternalTypes.RawCoID;
-import Signature = CojsonInternalTypes.Signature;
-import Transaction = CojsonInternalTypes.Transaction;
-import {
+import type {
   DBClientInterface,
   SessionRow,
   SignatureAfterRow,
@@ -17,6 +14,10 @@ import {
   TransactionRow,
 } from "cojson-storage";
 
+type RawCoID = CojsonInternalTypes.RawCoID;
+type Signature = CojsonInternalTypes.Signature;
+type Transaction = CojsonInternalTypes.Transaction;
+
 export type RawCoValueRow = {
   id: CojsonInternalTypes.RawCoID;
   header: string;
@@ -43,7 +44,7 @@ export class SQLiteClient implements DBClientInterface {
 
   getCoValue(coValueId: RawCoID): StoredCoValueRow | undefined {
     const coValueRow = this.db
-      .prepare(`SELECT * FROM coValues WHERE id = ?`)
+      .prepare("SELECT * FROM coValues WHERE id = ?")
       .get(coValueId) as RawCoValueRow & { rowID: number };
 
     if (!coValueRow) return;
@@ -58,7 +59,7 @@ export class SQLiteClient implements DBClientInterface {
       };
     } catch (e) {
       const headerValue = coValueRow?.header ?? "";
-      logger.warn("Invalid JSON in header: " + headerValue, {
+      logger.warn(`Invalid JSON in header: ${headerValue}`, {
         id: coValueId,
       });
       return;
@@ -67,7 +68,7 @@ export class SQLiteClient implements DBClientInterface {
 
   getCoValueSessions(coValueRowId: number): StoredSessionRow[] {
     return this.db
-      .prepare<number>(`SELECT * FROM sessions WHERE coValue = ?`)
+      .prepare<number>("SELECT * FROM sessions WHERE coValue = ?")
       .all(coValueRowId) as StoredSessionRow[];
   }
 
@@ -77,7 +78,7 @@ export class SQLiteClient implements DBClientInterface {
   ): StoredSessionRow | undefined {
     return this.db
       .prepare<[number, string]>(
-        `SELECT * FROM sessions WHERE coValue = ? AND sessionID = ?`,
+        "SELECT * FROM sessions WHERE coValue = ? AND sessionID = ?",
       )
       .get(coValueRowId, sessionID) as StoredSessionRow | undefined;
   }
@@ -88,7 +89,7 @@ export class SQLiteClient implements DBClientInterface {
   ): TransactionRow[] {
     const txs = this.db
       .prepare<[number, number]>(
-        `SELECT * FROM transactions WHERE ses = ? AND idx >= ?`,
+        "SELECT * FROM transactions WHERE ses = ? AND idx >= ?",
       )
       .all(sessionRowId, firstNewTxIdx) as RawTransactionRow[];
 
@@ -109,7 +110,7 @@ export class SQLiteClient implements DBClientInterface {
   ): SignatureAfterRow[] {
     return this.db
       .prepare<[number, number]>(
-        `SELECT * FROM signatureAfter WHERE ses = ? AND idx >= ?`,
+        "SELECT * FROM signatureAfter WHERE ses = ? AND idx >= ?",
       )
       .all(sessionRowId, firstNewTxIdx) as SignatureAfterRow[];
   }
@@ -117,7 +118,7 @@ export class SQLiteClient implements DBClientInterface {
   addCoValue(msg: CojsonInternalTypes.NewContentMessage): number {
     return this.db
       .prepare<[CojsonInternalTypes.RawCoID, string]>(
-        `INSERT INTO coValues (id, header) VALUES (?, ?)`,
+        "INSERT INTO coValues (id, header) VALUES (?, ?)",
       )
       .run(msg.id, JSON.stringify(msg.header)).lastInsertRowid as number;
   }
@@ -153,7 +154,7 @@ export class SQLiteClient implements DBClientInterface {
   ) {
     this.db
       .prepare<[number, number, string]>(
-        `INSERT INTO transactions (ses, idx, tx) VALUES (?, ?, ?)`,
+        "INSERT INTO transactions (ses, idx, tx) VALUES (?, ?, ?)",
       )
       .run(sessionRowID, nextIdx, JSON.stringify(newTransaction));
   }
@@ -165,12 +166,13 @@ export class SQLiteClient implements DBClientInterface {
   }: { sessionRowID: number; idx: number; signature: Signature }) {
     this.db
       .prepare<[number, number, string]>(
-        `INSERT INTO signatureAfter (ses, idx, signature) VALUES (?, ?, ?)`,
+        "INSERT INTO signatureAfter (ses, idx, signature) VALUES (?, ?, ?)",
       )
       .run(sessionRowID, idx, signature);
   }
 
   transaction(operationsCallback: () => unknown) {
     this.db.transaction(operationsCallback)();
+    return undefined;
   }
 }

packages/cojson-storage-sqlite/src/sqliteNode.ts

@@ -1,12 +1,12 @@
-import Database, { Database as DatabaseT } from "better-sqlite3";
+import Database, { type Database as DatabaseT } from "better-sqlite3";
 import {
-  IncomingSyncStream,
-  OutgoingSyncQueue,
-  Peer,
+  type IncomingSyncStream,
+  type OutgoingSyncQueue,
+  type Peer,
   cojsonInternals,
   logger,
 } from "cojson";
-import { SyncManager, TransactionRow } from "cojson-storage";
+import { SyncManager, type TransactionRow } from "cojson-storage";
 import { SQLiteClient } from "./sqliteClient.js";
 
 export class SQLiteNode {
@@ -46,7 +46,7 @@ export class SQLiteNode {
               msg,
               (k, v) =>
                 k === "changes" || k === "encryptedChanges"
-                  ? v.slice(0, 20) + "..."
+                  ? `${v.slice(0, 20)}...`
                   : v,
             )}`,
           );
@@ -117,7 +117,7 @@ export class SQLiteNode {
       ).run();
 
       db.prepare(
-        `CREATE INDEX IF NOT EXISTS sessionsByCoValue ON sessions (coValue);`,
+        "CREATE INDEX IF NOT EXISTS sessionsByCoValue ON sessions (coValue);",
       ).run();
 
       db.prepare(
@@ -129,7 +129,7 @@ export class SQLiteNode {
       ).run();
 
       db.prepare(
-        `CREATE INDEX IF NOT EXISTS coValuesByID ON coValues (id);`,
+        "CREATE INDEX IF NOT EXISTS coValuesByID ON coValues (id);",
       ).run();
 
       db.pragma("user_version = 1");
@@ -138,17 +138,17 @@ export class SQLiteNode {
     if (oldVersion <= 1) {
       // fix embarrassing off-by-one error for transaction indices
       const txs = db
-        .prepare(`SELECT * FROM transactions`)
+        .prepare("SELECT * FROM transactions")
         .all() as TransactionRow[];
 
       for (const tx of txs) {
-        db.prepare(`DELETE FROM transactions WHERE ses = ? AND idx = ?`).run(
+        db.prepare("DELETE FROM transactions WHERE ses = ? AND idx = ?").run(
           tx.ses,
           tx.idx,
         );
         tx.idx -= 1;
         db.prepare(
-          `INSERT INTO transactions (ses, idx, tx) VALUES (?, ?, ?)`,
+          "INSERT INTO transactions (ses, idx, tx) VALUES (?, ?, ?)",
         ).run(tx.ses, tx.idx, tx.tx);
       }
 
@@ -166,7 +166,7 @@ export class SQLiteNode {
       ).run();
 
       db.prepare(
-        `ALTER TABLE sessions ADD COLUMN bytesSinceLastSignature INTEGER;`,
+        "ALTER TABLE sessions ADD COLUMN bytesSinceLastSignature INTEGER;",
       ).run();
 
       db.pragma("user_version = 3");

packages/cojson-storage/CHANGELOG.md

@@ -1,5 +1,12 @@
 # cojson-storage
 
+## 0.10.8
+
+### Patch Changes
+
+- Updated dependencies [153dc99]
+  - cojson@0.10.8
+
 ## 0.10.7
 
 ### Patch Changes

packages/cojson-storage/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cojson-storage",
-  "version": "0.10.7",
+  "version": "0.10.8",
   "main": "dist/index.js",
   "type": "module",
   "types": "src/index.ts",

packages/cojson-storage/src/syncManager.ts

@@ -1,15 +1,15 @@
 import {
   CojsonInternalTypes,
   MAX_RECOMMENDED_TX_SIZE,
-  OutgoingSyncQueue,
-  SessionID,
-  SyncMessage,
+  type OutgoingSyncQueue,
+  type SessionID,
+  type SyncMessage,
   cojsonInternals,
   emptyKnownState,
   logger,
 } from "cojson";
 import { collectNewTxs, getDependedOnCoValues } from "./syncUtils.js";
-import { DBClientInterface, StoredSessionRow } from "./types.js";
+import type { DBClientInterface, StoredSessionRow } from "./types.js";
 import NewContentMessage = CojsonInternalTypes.NewContentMessage;
 import KnownStateMessage = CojsonInternalTypes.KnownStateMessage;
 import RawCoID = CojsonInternalTypes.RawCoID;
@@ -82,12 +82,15 @@ export class SyncManager {
 
     // reverse it to send the top level id the last in the order
     const collectedMessages = Object.values(outputMessages).reverse();
-    collectedMessages.forEach(({ knownMessage, contentMessages }) => {
+    for (const { knownMessage, contentMessages } of collectedMessages) {
       this.sendStateMessage(knownMessage);
 
-      contentMessages?.length &&
-        contentMessages.forEach((msg) => this.sendStateMessage(msg));
-    });
+      if (contentMessages?.length) {
+        for (const msg of contentMessages) {
+          this.sendStateMessage(msg);
+        }
+      }
+    }
   }
 
   private async collectCoValueData(
@@ -106,7 +109,9 @@ export class SyncManager {
         action: "known",
         ...emptyKnownState(peerKnownState.id),
       };
-      asDependencyOf && (emptyKnownMessage.asDependencyOf = asDependencyOf);
+      if (asDependencyOf) {
+        emptyKnownMessage.asDependencyOf = asDependencyOf;
+      }
       messageMap[peerKnownState.id] = { knownMessage: emptyKnownMessage };
       return messageMap;
     }
@@ -153,7 +158,9 @@ export class SyncManager {
       action: "known",
       ...newCoValueKnownState,
     };
-    asDependencyOf && (knownMessage.asDependencyOf = asDependencyOf);
+    if (asDependencyOf) {
+      knownMessage.asDependencyOf = asDependencyOf;
+    }
     messageMap[newCoValueKnownState.id] = {
       knownMessage: knownMessage,
       contentMessages: newContentMessages,
@@ -272,11 +279,13 @@ export class SyncManager {
 
     const nextIdx = sessionRow?.lastIdx || 0;
 
+    if (!msg.new[sessionID]) throw new Error("Session ID not found");
+
     const sessionUpdate = {
       coValue: storedCoValueRowID,
       sessionID,
       lastIdx: newLastIdx,
-      lastSignature: msg.new[sessionID]!.lastSignature,
+      lastSignature: msg.new[sessionID].lastSignature,
       bytesSinceLastSignature: newBytesSinceLastSignature,
     };
 
@@ -289,7 +298,7 @@ export class SyncManager {
       await this.dbClient.addSignatureAfter({
         sessionRowID,
         idx: newLastIdx - 1,
-        signature: msg.new[sessionID]!.lastSignature,
+        signature: msg.new[sessionID].lastSignature,
       });
     }
 
@@ -306,7 +315,11 @@ export class SyncManager {
 
   handleDone(_msg: CojsonInternalTypes.DoneMessage) {}
 
-  async sendStateMessage(msg: any): Promise<unknown> {
+  async sendStateMessage(
+    msg:
+      | CojsonInternalTypes.KnownStateMessage
+      | CojsonInternalTypes.NewContentMessage,
+  ): Promise<unknown> {
     return this.toLocalNode
       .push(msg)
       .catch((e) =>

packages/cojson-storage/src/syncUtils.ts

@@ -1,11 +1,15 @@
 import {
-  CojsonInternalTypes,
-  JsonValue,
-  SessionID,
-  Stringified,
+  type CojsonInternalTypes,
+  type JsonValue,
+  type SessionID,
+  type Stringified,
   cojsonInternals,
 } from "cojson";
-import { StoredCoValueRow, StoredSessionRow, TransactionRow } from "./types.js";
+import type {
+  StoredCoValueRow,
+  StoredSessionRow,
+  TransactionRow,
+} from "./types.js";
 
 export function collectNewTxs({
   newTxsInSession,
@@ -19,19 +23,17 @@ export function collectNewTxs({
   firstNewTxIdx: number;
 }) {
   for (const tx of newTxsInSession) {
-    let sessionEntry =
-      newContentMessages[newContentMessages.length - 1]!.new[
-        sessionRow.sessionID
-      ];
+    const lastMessage = newContentMessages[newContentMessages.length - 1];
+    if (!lastMessage) return;
+
+    let sessionEntry = lastMessage.new[sessionRow.sessionID];
     if (!sessionEntry) {
       sessionEntry = {
         after: firstNewTxIdx,
         lastSignature: "WILL_BE_REPLACED" as CojsonInternalTypes.Signature,
         newTransactions: [],
       };
-      newContentMessages[newContentMessages.length - 1]!.new[
-        sessionRow.sessionID
-      ] = sessionEntry;
+      lastMessage.new[sessionRow.sessionID] = sessionEntry;
     }
 
     sessionEntry.newTransactions.push(tx.tx);

packages/cojson-storage/src/tests/syncManager.test.ts

@@ -1,5 +1,5 @@
 import {
-  Mocked,
+  type Mocked,
   afterEach,
   beforeEach,
   describe,
@@ -8,7 +8,7 @@ import {
   vi,
 } from "vitest";
 
-import {
+import type {
   CojsonInternalTypes,
   OutgoingSyncQueue,
   SessionID,
@@ -16,11 +16,12 @@ import {
 } from "cojson";
 import { SyncManager } from "../syncManager.js";
 import { getDependedOnCoValues } from "../syncUtils.js";
-import { DBClientInterface } from "../types.js";
+import type { DBClientInterface } from "../types.js";
 import { fixtures } from "./fixtureMessages.js";
-import RawCoID = CojsonInternalTypes.RawCoID;
-import NewContentMessage = CojsonInternalTypes.NewContentMessage;
 
+type RawCoID = CojsonInternalTypes.RawCoID;
+type NewContentMessage = CojsonInternalTypes.NewContentMessage;
+type Transaction = CojsonInternalTypes.Transaction;
 vi.mock("../syncUtils");
 
 const coValueIdToLoad = "co_zKwG8NyfZ8GXqcjDHY4NS3SbU2m";
@@ -40,7 +41,7 @@ const incomingContentMessage = fixtures[coValueIdToLoad].getContent({
 
 describe("DB sync manager", () => {
   let syncManager: SyncManager;
-  let queue: OutgoingSyncQueue = {} as unknown as OutgoingSyncQueue;
+  const queue: OutgoingSyncQueue = {} as unknown as OutgoingSyncQueue;
 
   const DBClient = vi.fn();
   DBClient.prototype.getCoValue = vi.fn();
@@ -154,11 +155,11 @@ describe("DB sync manager", () => {
         header: true,
         id: coValueIdToLoad,
         sessions: sessionsData.reduce(
-          (acc, sessionRow) => ({
-            ...acc,
-            [sessionRow.sessionID]: sessionRow.lastIdx,
-          }),
-          {},
+          (acc, sessionRow) => {
+            acc[sessionRow.sessionID] = sessionRow.lastIdx;
+            return acc;
+          },
+          {} as Record<string, number>,
         ),
       });
 
@@ -167,15 +168,22 @@ describe("DB sync manager", () => {
         header: coValueHeader,
         id: coValueIdToLoad,
         new: sessionsData.reduce(
-          (acc, sessionRow) => ({
-            ...acc,
-            [sessionRow.sessionID]: {
+          (acc, sessionRow) => {
+            acc[sessionRow.sessionID] = {
               after: expect.any(Number),
               lastSignature: expect.any(String),
               newTransactions: expect.any(Array),
-            },
-          }),
-          {},
+            };
+            return acc;
+          },
+          {} as Record<
+            string,
+            {
+              after: number;
+              lastSignature: string;
+              newTransactions: Transaction[];
+            }
+          >,
         ),
         priority: 0,
       });

packages/cojson-storage/src/types.ts

@@ -1,7 +1,8 @@
-import { CojsonInternalTypes, SessionID } from "cojson";
-import RawCoID = CojsonInternalTypes.RawCoID;
-import Transaction = CojsonInternalTypes.Transaction;
-import Signature = CojsonInternalTypes.Signature;
+import type { CojsonInternalTypes, SessionID } from "cojson";
+
+type RawCoID = CojsonInternalTypes.RawCoID;
+type Transaction = CojsonInternalTypes.Transaction;
+type Signature = CojsonInternalTypes.Signature;
 
 export type CoValueRow = {
   id: CojsonInternalTypes.RawCoID;
@@ -72,7 +73,7 @@ export interface DBClientInterface {
     sessionRowID: number,
     idx: number,
     newTransaction: Transaction,
-  ): Promise<number> | void | unknown;
+  ): Promise<number> | undefined | unknown;
 
   addSignatureAfter({
     sessionRowID,
@@ -82,7 +83,7 @@ export interface DBClientInterface {
     sessionRowID: number;
     idx: number;
     signature: Signature;
-  }): Promise<number> | void | unknown;
+  }): Promise<number> | undefined | unknown;
 
-  transaction(callback: () => unknown): Promise<unknown> | void;
+  transaction(callback: () => unknown): Promise<unknown> | undefined;
 }

packages/cojson-transport-ws/CHANGELOG.md

@@ -1,5 +1,12 @@
 # cojson-transport-nodejs-ws
 
+## 0.10.8
+
+### Patch Changes
+
+- Updated dependencies [153dc99]
+  - cojson@0.10.8
+
 ## 0.10.7
 
 ### Patch Changes

packages/cojson-transport-ws/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cojson-transport-ws",
   "type": "module",
-  "version": "0.10.7",
+  "version": "0.10.8",
   "main": "dist/index.js",
   "types": "src/index.ts",
   "license": "MIT",

packages/cojson-transport-ws/src/BatchedOutgoingMessages.ts

@@ -1,10 +1,10 @@
-import { SyncMessage } from "cojson";
+import type { SyncMessage } from "cojson";
 import { addMessageToBacklog } from "./serialization.js";
 
 export const MAX_OUTGOING_MESSAGES_CHUNK_BYTES = 25_000;
 
 export class BatchedOutgoingMessages {
-  private backlog: string = "";
+  private backlog = "";
   private timeout: ReturnType<typeof setTimeout> | null = null;
 
   constructor(private send: (messages: string) => void) {}

packages/cojson-transport-ws/src/WebSocketPeerWithReconnection.ts

@@ -1,4 +1,4 @@
-import { Peer, logger } from "cojson";
+import { type Peer, logger } from "cojson";
 import { createWebSocketPeer } from "./createWebSocketPeer.js";
 
 export class WebSocketPeerWithReconnection {
@@ -61,7 +61,7 @@ export class WebSocketPeerWithReconnection {
       const timeout = this.reconnectionTimeout * this.reconnectionAttempts;
 
       logger.debug(
-        "Websocket disconnected, trying to reconnect in " + timeout + "ms",
+        `Websocket disconnected, trying to reconnect in ${timeout}ms`,
       );
 
       await this.waitForOnline(timeout);

packages/cojson-transport-ws/src/createWebSocketPeer.ts

@@ -1,14 +1,14 @@
 import {
-  DisconnectedError,
-  Peer,
-  PingTimeoutError,
-  SyncMessage,
+  type DisconnectedError,
+  type Peer,
+  type PingTimeoutError,
+  type SyncMessage,
   cojsonInternals,
   logger,
 } from "cojson";
 import { BatchedOutgoingMessages } from "./BatchedOutgoingMessages.js";
 import { deserializeMessages, getErrorMessage } from "./serialization.js";
-import { AnyWebSocket } from "./types.js";
+import type { AnyWebSocket } from "./types.js";
 
 export const BUFFER_LIMIT = 100_000;
 export const BUFFER_LIMIT_POLLING_INTERVAL = 10;
@@ -52,7 +52,7 @@ function waitForWebSocketOpen(websocket: AnyWebSocket) {
     if (websocket.readyState === 1) {
       resolve();
     } else {
-      websocket.addEventListener("open", resolve, { once: true });
+      websocket.addEventListener("open", () => resolve(), { once: true });
     }
   });
 }
@@ -144,6 +144,8 @@ export function createWebSocketPeer({
   }
 
   websocket.addEventListener("close", handleClose);
+  // TODO (#1537): Remove this any once the WebSocket error event type is fixed
+  // biome-ignore lint/suspicious/noExplicitAny: WebSocket error event type
   websocket.addEventListener("error" as any, (err) => {
     if (err.message) {
       logger.warn(err.message);
@@ -174,7 +176,7 @@ export function createWebSocketPeer({
 
     if (!result.ok) {
       logger.warn(
-        "Error while deserializing messages: " + getErrorMessage(result.error),
+        `Error while deserializing messages: ${getErrorMessage(result.error)}`,
       );
       return;
     }
@@ -227,7 +229,7 @@ export function createWebSocketPeer({
             },
             { once: true },
           );
-        } else if (websocket.readyState == 1) {
+        } else if (websocket.readyState === 1) {
           websocket.close();
         }
       },

packages/cojson-transport-ws/src/serialization.ts

@@ -1,5 +1,5 @@
-import { SyncMessage, logger } from "cojson";
-import { PingMsg } from "./types.js";
+import { type SyncMessage, logger } from "cojson";
+import type { PingMsg } from "./types.js";
 
 export function getErrorMessage(error: unknown) {
   return error instanceof Error ? error.message : "Unknown error";
@@ -28,7 +28,7 @@ export function deserializeMessages(messages: unknown) {
         | PingMsg[],
     } as const;
   } catch (e) {
-    logger.error("Error while deserializing messages: " + getErrorMessage(e));
+    logger.error(`Error while deserializing messages: ${getErrorMessage(e)}`);
     return {
       ok: false,
       error: e,

packages/cojson-transport-ws/src/tests/BatchedOutgoingMessages.test.ts

@@ -1,5 +1,5 @@
-import { SyncMessage } from "cojson";
-import { CojsonInternalTypes } from "cojson";
+import type { SyncMessage } from "cojson";
+import type { CojsonInternalTypes } from "cojson";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import {
   BatchedOutgoingMessages,

packages/cojson-transport-ws/src/tests/createWebSocketPeer.test.ts

@@ -1,14 +1,14 @@
-import { SyncMessage } from "cojson";
+import type { SyncMessage } from "cojson";
 import type { Channel } from "queueueue";
-import { Mocked, describe, expect, test, vi } from "vitest";
+import { type Mocked, describe, expect, test, vi } from "vitest";
 import { MAX_OUTGOING_MESSAGES_CHUNK_BYTES } from "../BatchedOutgoingMessages.js";
 import {
   BUFFER_LIMIT,
   BUFFER_LIMIT_POLLING_INTERVAL,
-  CreateWebSocketPeerOpts,
+  type CreateWebSocketPeerOpts,
   createWebSocketPeer,
 } from "../createWebSocketPeer.js";
-import { AnyWebSocket } from "../types.js";
+import type { AnyWebSocket } from "../types.js";
 
 function setup(opts: Partial<CreateWebSocketPeerOpts> = {}) {
   const listeners = new Map<string, (event: MessageEvent) => void>();
@@ -472,6 +472,7 @@ describe("createWebSocketPeer", () => {
   });
 });
 
+// biome-ignore lint/suspicious/noConfusingVoidType: Test helper
 function waitFor(callback: () => boolean | void) {
   return new Promise<void>((resolve, reject) => {
     const checkPassed = () => {

packages/cojson-transport-ws/src/tests/syncServer.ts

@@ -1,7 +1,7 @@
-import { createServer } from "http";
+import { createServer } from "node:http";
 import { ControlledAgent, LocalNode } from "cojson";
 import { WasmCrypto } from "cojson/crypto/WasmCrypto";
-import { WebSocket, WebSocketServer } from "ws";
+import { type WebSocket, WebSocketServer } from "ws";
 import { createWebSocketPeer } from "../createWebSocketPeer";
 
 export const startSyncServer = async (port?: number) => {
@@ -75,16 +75,18 @@ export const startSyncServer = async (port?: number) => {
 
   server.listen(port ?? 0);
 
-  port = (server.address() as { port: number }).port;
-  const syncServer = `ws://localhost:${port}`;
+  const actualPort = (server.address() as { port: number }).port;
+  const syncServer = `ws://localhost:${actualPort}`;
 
   return {
     close: () => {
-      connections.forEach((ws) => ws.close());
+      for (const ws of connections) {
+        ws.close();
+      }
       server.close();
     },
     syncServer,
-    port,
+    port: actualPort,
     localNode,
   };
 };

packages/cojson-transport-ws/src/tests/utils.ts

@@ -1,3 +1,4 @@
+// biome-ignore lint/suspicious/noConfusingVoidType: Test helper
 export function waitFor(callback: () => boolean | void) {
   return new Promise<void>((resolve, reject) => {
     const checkPassed = () => {

packages/cojson-transport-ws/src/types.ts

@@ -1,7 +1,7 @@
 export interface WebsocketEvents {
   close: { code: number; reason: string };
   message: { data: unknown };
-  open: void;
+  open: unknown;
 }
 
 export interface PingMsg {