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

Version Packages

examples/betterauth/CHANGELOG.md

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

examples/betterauth/package.json

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

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

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

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

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

examples/chat-rn-expo/CHANGELOG.md

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

examples/chat-rn-expo/package.json

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

examples/chat-rn/CHANGELOG.md

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

examples/chat-rn/package.json

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

examples/chat-vue/CHANGELOG.md

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

examples/chat-vue/README.md

@@ -58,4 +58,4 @@ If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or
 
 By default, the example app uses [Jazz Cloud](https://jazz.tools/cloud) (`wss://cloud.jazz.tools`) - so cross-device use, invites and collaboration should just work.
 
-You can also run a local sync server by running `npx jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of `JazzProvider` in [./src/main.ts](./src/main.ts).
+You can also run a local sync server by running `npx jazz-run sync`, and setting the `sync` parameter of `JazzProvider` in [./src/main.ts](./src/main.ts) to `{ peer: "ws://localhost:4200" }`.

examples/chat-vue/package.json

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

examples/chat/CHANGELOG.md

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

examples/chat/README.md

@@ -60,4 +60,4 @@ If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or
 
 By default, the example app uses [Jazz Cloud](https://jazz.tools/cloud) (`wss://cloud.jazz.tools`) - so cross-device use, invites and collaboration should just work.
 
-You can also run a local sync server by running `npx jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of the `<JazzProvider>` provider component in [./src/main.tsx](./src/main.tsx).
+You can also run a local sync server by running `npx jazz-run sync`, and setting the `sync` parameter of `JazzProvider` in [./src/app.tsx](./src/app.tsx) to `{ peer: "ws://localhost:4200" }`.

examples/chat/package.json

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

examples/chat/src/app.tsx

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

examples/chat/vercel.json

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

examples/clerk/CHANGELOG.md

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

examples/clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clerk",
   "private": true,
-  "version": "0.0.116",
+  "version": "0.0.119",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/clerk/vercel.json

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

examples/file-share-svelte/CHANGELOG.md

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

examples/file-share-svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "file-share-svelte",
-  "version": "0.0.101",
+  "version": "0.0.104",
   "private": true,
   "type": "module",
   "scripts": {
@@ -30,7 +30,7 @@
     "prettier": "^3.3.2",
     "prettier-plugin-svelte": "^3.2.6",
     "prettier-plugin-tailwindcss": "^0.6.5",
-    "svelte": "^5.0.0",
+    "svelte": "^5.33.0",
     "svelte-check": "^4.0.0",
     "tailwindcss": "^3.4.17",
     "typescript": "5.6.2",

examples/filestream/CHANGELOG.md

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

examples/filestream/README.md

@@ -63,4 +63,4 @@ If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or
 
 By default, the example app uses [Jazz Cloud](https://jazz.tools/cloud) (`wss://cloud.jazz.tools`) - so cross-device use, invites and collaboration should just work.
 
-You can also run a local sync server by running `npx jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of `JazzProvider` component in [./src/main.tsx](./src/main.tsx).
+You can also run a local sync server by running `npx jazz-run sync`, and setting the `sync` parameter of `JazzProvider` in [./src/main.tsx](./src/main.tsx) to `{ peer: "ws://localhost:4200" }`.

examples/filestream/package.json

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

examples/filestream/vercel.json

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

examples/form/CHANGELOG.md

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

examples/form/README.md

@@ -75,4 +75,4 @@ If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or
 
 By default, the example app uses [Jazz Cloud](https://jazz.tools/cloud) (`wss://cloud.jazz.tools`) - so cross-device use, invites and collaboration should just work.
 
-You can also run a local sync server by running `npx jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of the `<JazzProvider>` provider component in [./src/main.tsx](./src/main.tsx).
+You can also run a local sync server by running `npx jazz-run sync`, and setting the `sync` parameter of `JazzProvider` in [./src/main.tsx](./src/main.tsx) to `{ peer: "ws://localhost:4200" }`.

examples/form/package.json

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

examples/form/vercel.json

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

examples/image-upload/CHANGELOG.md

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

examples/image-upload/README.md

@@ -63,4 +63,4 @@ If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or
 
 By default, the example app uses [Jazz Cloud](https://jazz.tools/cloud) (`wss://cloud.jazz.tools`) - so cross-device use, invites and collaboration should just work.
 
-You can also run a local sync server by running `npx jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of `JazzProvider` component in [./src/main.tsx](./src/main.tsx).
+You can also run a local sync server by running `npx jazz-run sync`, and setting the `sync` parameter of `JazzProvider` in [./src/main.tsx](./src/main.tsx) to `{ peer: "ws://localhost:4200" }`.

examples/image-upload/package.json

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

examples/image-upload/vercel.json

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

examples/inspector/CHANGELOG.md

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

examples/inspector/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-inspector-app",
   "private": true,
-  "version": "0.0.166",
+  "version": "0.0.169",
   "type": "module",
   "scripts": {
     "dev": "vite",

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

@@ -27,6 +27,13 @@ interface Account {
   secret: AgentSecret;
 }
 
+interface JazzLoggedInSecret {
+  accountID: string;
+  accountSecret: string;
+  secretSeed?: number[];
+  provider?: string;
+}
+
 export default function CoJsonViewerApp() {
   const [accounts, setAccounts] = useState<Account[]>(() => {
     const storedAccounts = localStorage.getItem("inspectorAccounts");
@@ -269,7 +276,26 @@ function AddAccountForm({
   const [id, setId] = useState("");
   const [secret, setSecret] = useState("");
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleIdChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    const value = e.target.value;
+    setId(value);
+
+    // Try to parse as JSON if it looks like a JSON object
+    if (value.trim().startsWith("{") && value.trim().endsWith("}")) {
+      try {
+        const parsed: JazzLoggedInSecret = JSON.parse(value);
+        if (parsed.accountID && parsed.accountSecret) {
+          setId(parsed.accountID);
+          setSecret(parsed.accountSecret);
+        }
+      } catch (error) {
+        // If parsing fails, just keep the raw value in the id field
+        console.log("Failed to parse JSON:", error);
+      }
+    }
+  };
+
+  const handleSubmit = (e: React.FormEvent): void => {
     e.preventDefault();
     addAccount(id as RawAccountID, secret as AgentSecret);
     setId("");
@@ -290,13 +316,14 @@ function AddAccountForm({
           jazz-logged-in-secret
         </code>{" "}
         local storage key from within your Jazz app for your account
-        credentials.
+        credentials. You can paste the full JSON object or enter the ID and
+        secret separately.
       </p>
       <Input
         label="Account ID"
         value={id}
-        placeholder="co_z1234567890abcdef123456789"
-        onChange={(e) => setId(e.target.value)}
+        placeholder="co_z1234567890abcdef123456789 or paste full JSON"
+        onChange={handleIdChange}
       />
       <Input
         label="Account secret"

examples/inspector/vercel.json

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

examples/jazz-nextjs/CHANGELOG.md

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

examples/jazz-nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jazz-nextjs",
-  "version": "0.1.6",
+  "version": "0.1.9",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",

examples/jazz-paper-scissors/vercel.json

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

examples/multi-cursors/CHANGELOG.md

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

examples/multi-cursors/README.md

@@ -1,7 +1,7 @@
 # Jazz Multi-Cursors Example
 
 Track user presence on a canvas with multiple cursors and out of bounds indicators.
-Live version: [https://multi-cursors-demo.jazz.tools/](https://multi-cursors-demo.jazz.tools/)
+Live version: [https://multi-cursors.demo.jazz.tools/](https://multi-cursors.demo.jazz.tools/)
 
 ## Getting started
 
@@ -62,4 +62,4 @@ If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or
 
 By default, the example app uses [Jazz Cloud](https://jazz.tools/cloud) (`wss://cloud.jazz.tools`) - so cross-device use, invites and collaboration should just work.
 
-You can also run a local sync server by running `npx jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of `JazzProvider` component in [./src/main.tsx](./src/main.tsx).
+You can also run a local sync server by running `npx jazz-run sync`, and setting the `sync` parameter of `JazzProvider` in [./src/main.tsx](./src/main.tsx) to `{ peer: "ws://localhost:4200" }`.

examples/multi-cursors/package.json

@@ -1,7 +1,7 @@
 {
   "name": "multi-cursors",
   "private": true,
-  "version": "0.0.109",
+  "version": "0.0.112",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/multi-cursors/src/schema.ts

@@ -36,7 +36,7 @@ export const CursorAccount = co
 
     if (account.profile === undefined) {
       const group = Group.create();
-      group.addMember("everyone", "reader"); // The profile info is visible to everyone
+      group.makePublic(); // The profile info is visible to everyone
 
       account.profile = CursorProfile.create(
         {

examples/multi-cursors/vercel.json

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

examples/multiauth/CHANGELOG.md

@@ -1,5 +1,36 @@
 # multiauth
 
+## 0.0.60
+
+### Patch Changes
+
+- Updated dependencies [048ac1d]
+  - jazz-tools@0.14.22
+  - jazz-react@0.14.22
+  - jazz-react-auth-clerk@0.14.22
+
+## 0.0.59
+
+### Patch Changes
+
+- Updated dependencies [e7e505e]
+- Updated dependencies [13b57aa]
+- Updated dependencies [5662faa]
+- Updated dependencies [2116a59]
+  - jazz-tools@0.14.21
+  - jazz-react@0.14.21
+  - jazz-react-auth-clerk@0.14.21
+
+## 0.0.58
+
+### Patch Changes
+
+- Updated dependencies [6f72419]
+- Updated dependencies [04b20c2]
+  - jazz-tools@0.14.20
+  - jazz-react@0.14.20
+  - jazz-react-auth-clerk@0.14.20
+
 ## 0.0.57
 
 ### Patch Changes

examples/multiauth/package.json

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

examples/music-player/CHANGELOG.md

@@ -1,5 +1,36 @@
 # jazz-example-musicplayer
 
+## 0.0.141
+
+### Patch Changes
+
+- Updated dependencies [048ac1d]
+  - jazz-tools@0.14.22
+  - jazz-inspector@0.14.22
+  - jazz-react@0.14.22
+
+## 0.0.140
+
+### Patch Changes
+
+- Updated dependencies [e7e505e]
+- Updated dependencies [13b57aa]
+- Updated dependencies [5662faa]
+- Updated dependencies [2116a59]
+  - jazz-tools@0.14.21
+  - jazz-inspector@0.14.21
+  - jazz-react@0.14.21
+
+## 0.0.139
+
+### Patch Changes
+
+- Updated dependencies [6f72419]
+- Updated dependencies [04b20c2]
+  - jazz-tools@0.14.20
+  - jazz-inspector@0.14.20
+  - jazz-react@0.14.20
+
 ## 0.0.138
 
 ### Patch Changes

examples/music-player/README.md

@@ -1,6 +1,6 @@
 # Music player example with Jazz and React
 
-Live version: [https://music-demo.jazz.tools](https://music-demo.jazz.tools)
+Live version: [https://music.demo.jazz.tools](https://music.demo.jazz.tools)
 
 ## Getting started
 
@@ -60,4 +60,4 @@ If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or
 
 By default, the example app uses [Jazz Cloud](https://jazz.tools/cloud) (`wss://cloud.jazz.tools`) - so cross-device use, invites and collaboration should just work.
 
-You can also run a local sync server by running `npx cojson-simple-sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of the `<JazzProvider>` provider component in [./src/2_main.tsx](./src/2_main.tsx).
+You can also run a local sync server by running `npx jazz-run sync`, and setting the `sync` parameter of `JazzProvider` in [./src/2_main.tsx](./src/2_main.tsx) to `{ peer: "ws://localhost:4200" }`.

examples/music-player/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-music-player",
   "private": true,
-  "version": "0.0.138",
+  "version": "0.0.141",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/music-player/src/1_schema.ts

@@ -41,8 +41,8 @@ export const MusicTrack = co.map({
   /**
    * You can use getters for recusrive relations
    */
-  get sourceTrack(): z.ZodOptional<typeof MusicTrack> {
-    return z.optional(MusicTrack);
+  get sourceTrack() {
+    return MusicTrack.optional();
   },
 });
 export type MusicTrack = co.loaded<typeof MusicTrack>;

examples/music-player/vercel.json

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

examples/organization/CHANGELOG.md

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

examples/organization/README.md

@@ -2,7 +2,7 @@
 
 This is an example of how to share a set of data between users through a CoMap called Organization. 
 Different apps have different names for this concept, such as "teams" or "workspaces".
-Live version: [https://jazz-organization.vercel.app/](https://jazz-organization.vercel.app/)
+Live version: [https://organization.demo.jazz.tools/](https://organization.demo.jazz.tools/)
 Refer to the [documentation](https://jazz.tools/docs/react/design-patterns/organization)  for more information.
 
 ## Getting started
@@ -63,4 +63,5 @@ If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or
 
 By default, the example app uses [Jazz Cloud](https://jazz.tools/cloud) (`wss://cloud.jazz.tools`) - so cross-device use, invites and collaboration should just work.
 
-You can also run a local sync server by running `npx jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of the `<JazzProvider>` provider component in [./src/main.tsx](./src/main.tsx).
+You can also run a local sync server by running `npx jazz-run sync`, and setting the `sync` parameter of `JazzProvider` in [./src/main.tsx](./src/main.tsx) to `{ peer: "ws://localhost:4200" }`.
+

examples/organization/package.json

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

examples/organization/vercel.json

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

examples/passkey-svelte/CHANGELOG.md

@@ -1,5 +1,34 @@
 # passkey-svelte
 
+## 0.0.106
+
+### Patch Changes
+
+- Updated dependencies [048ac1d]
+  - jazz-tools@0.14.22
+  - jazz-svelte@0.14.22
+
+## 0.0.105
+
+### Patch Changes
+
+- Updated dependencies [e7e505e]
+- Updated dependencies [d14a069]
+- Updated dependencies [13b57aa]
+- Updated dependencies [5662faa]
+- Updated dependencies [2116a59]
+  - jazz-tools@0.14.21
+  - jazz-svelte@0.14.21
+
+## 0.0.104
+
+### Patch Changes
+
+- Updated dependencies [6f72419]
+- Updated dependencies [04b20c2]
+  - jazz-tools@0.14.20
+  - jazz-svelte@0.14.20
+
 ## 0.0.103
 
 ### Patch Changes

examples/passkey-svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "passkey-svelte",
-  "version": "0.0.103",
+  "version": "0.0.106",
   "type": "module",
   "private": true,
   "scripts": {
@@ -25,7 +25,7 @@
     "globals": "^15.11.0",
     "prettier": "^3.3.2",
     "prettier-plugin-svelte": "^3.2.6",
-    "svelte": "^5.0.0",
+    "svelte": "^5.33.0",
     "svelte-check": "^4.0.0",
     "typescript": "5.6.2",
     "typescript-eslint": "^8.0.0",

examples/passkey/CHANGELOG.md

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

examples/passkey/README.md

@@ -2,7 +2,7 @@
 
 This is an example of how to use passkey authentication with Jazz.
 
-Live version: [https://passkey-demo.jazz.tools](https://passkey-demo.jazz.tools)
+Live version: [https://passkey.demo.jazz.tools](https://passkey.demo.jazz.tools)
 
 ## Getting started
 

examples/passkey/package.json

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

examples/passkey/vercel.json

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

examples/passphrase/CHANGELOG.md

@@ -1,5 +1,33 @@
 # passphrase
 
+## 0.0.114
+
+### Patch Changes
+
+- Updated dependencies [048ac1d]
+  - jazz-tools@0.14.22
+  - jazz-react@0.14.22
+
+## 0.0.113
+
+### Patch Changes
+
+- Updated dependencies [e7e505e]
+- Updated dependencies [13b57aa]
+- Updated dependencies [5662faa]
+- Updated dependencies [2116a59]
+  - jazz-tools@0.14.21
+  - jazz-react@0.14.21
+
+## 0.0.112
+
+### Patch Changes
+
+- Updated dependencies [6f72419]
+- Updated dependencies [04b20c2]
+  - jazz-tools@0.14.20
+  - jazz-react@0.14.20
+
 ## 0.0.111
 
 ### Patch Changes

examples/passphrase/package.json

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

examples/passphrase/vercel.json

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

examples/password-manager/CHANGELOG.md

@@ -1,5 +1,33 @@
 # jazz-password-manager
 
+## 0.0.138
+
+### Patch Changes
+
+- Updated dependencies [048ac1d]
+  - jazz-tools@0.14.22
+  - jazz-react@0.14.22
+
+## 0.0.137
+
+### Patch Changes
+
+- Updated dependencies [e7e505e]
+- Updated dependencies [13b57aa]
+- Updated dependencies [5662faa]
+- Updated dependencies [2116a59]
+  - jazz-tools@0.14.21
+  - jazz-react@0.14.21
+
+## 0.0.136
+
+### Patch Changes
+
+- Updated dependencies [6f72419]
+- Updated dependencies [04b20c2]
+  - jazz-tools@0.14.20
+  - jazz-react@0.14.20
+
 ## 0.0.135
 
 ### Patch Changes

examples/password-manager/README.md

@@ -1,6 +1,6 @@
 # Password manager example with Jazz and React
 
-Live version: [https://passwords-demo.jazz.tools](https://passwords-demo.jazz.tools)
+Live version: [https://passwords.demo.jazz.tools](https://passwords.demo.jazz.tools)
 
 ![Password Manager Screenshot](demo.png "Screenshot")
 
@@ -86,4 +86,4 @@ If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or
 
 By default, the example app uses [Jazz Cloud](https://jazz.tools/cloud) (`wss://cloud.jazz.tools`) - so cross-device use, invites and collaboration should just work.
 
-You can also run a local sync server by running `npx cojson-simple-sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of the `<JazzProvider>` provider component in [./src/2_main.tsx](./src/2_main.tsx).
+You can also run a local sync server by running `npx jazz-run sync`, and setting the `sync` parameter of `JazzProvider` in [./src/2_main.tsx](./src/2_main.tsx) to `{ peer: "ws://localhost:4200" }`.

examples/password-manager/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-password-manager",
   "private": true,
-  "version": "0.0.135",
+  "version": "0.0.138",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/password-manager/vercel.json

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

examples/pets/CHANGELOG.md

@@ -1,5 +1,33 @@
 # jazz-example-pets
 
+## 0.0.236
+
+### Patch Changes
+
+- Updated dependencies [048ac1d]
+  - jazz-tools@0.14.22
+  - jazz-react@0.14.22
+
+## 0.0.235
+
+### Patch Changes
+
+- Updated dependencies [e7e505e]
+- Updated dependencies [13b57aa]
+- Updated dependencies [5662faa]
+- Updated dependencies [2116a59]
+  - jazz-tools@0.14.21
+  - jazz-react@0.14.21
+
+## 0.0.234
+
+### Patch Changes
+
+- Updated dependencies [6f72419]
+- Updated dependencies [04b20c2]
+  - jazz-tools@0.14.20
+  - jazz-react@0.14.20
+
 ## 0.0.233
 
 ### Patch Changes

examples/pets/README.md

@@ -1,6 +1,6 @@
 # Rate My Pets example with Jazz and React
 
-Live version: [https://pets-demo.jazz.tools/](https://pets-demo.jazz.tools/)
+Live version: [https://pets.demo.jazz.tools/](https://pets.demo.jazz.tools/)
 
 ## Getting started
 
@@ -60,4 +60,4 @@ If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or
 
 By default, the example app uses [Jazz Cloud](https://jazz.tools/cloud) (`wss://cloud.jazz.tools`) - so cross-device use, invites and collaboration should just work.
 
-You can also run a local sync server by running `npx jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of the `<JazzProvider>` provider component in [./src/2_main.tsx](./src/2_main.tsx).
+You can also run a local sync server by running `npx jazz-run sync`, and setting the `sync` parameter of `JazzProvider` in [./src/2_main.tsx](./src/2_main.tsx) to `{ peer: "ws://localhost:4200" }`.

examples/pets/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-pets",
   "private": true,
-  "version": "0.0.233",
+  "version": "0.0.236",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/pets/src/2_main.tsx

@@ -25,11 +25,6 @@ import {
   TitleAndLogo,
 } from "./basicComponents/index.ts";
 
-const peer =
-  (new URL(window.location.href).searchParams.get(
-    "peer",
-  ) as `ws://${string}`) ?? `wss://cloud.jazz.tools/?key=${apiKey}`;
-
 const appName = "Jazz Rate My Pet Example";
 
 /** Walkthrough: The top-level provider `<JazzProvider/>`
@@ -45,7 +40,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
       <div className="flex flex-col h-full items-center justify-start gap-10 pt-10 pb-10 px-5">
         <JazzProvider
           sync={{
-            peer,
+            peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
           }}
           AccountSchema={PetAccount}
         >

examples/pets/vercel.json

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

examples/reactions/CHANGELOG.md

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

examples/reactions/README.md

@@ -1,6 +1,6 @@
 # Reactions example with Jazz and React
 
-Live version: [https://reactions-demo.jazz.tools](https://reactions-demo.jazz.tools)
+Live version: [https://reactions.demo.jazz.tools](https://reactions.demo.jazz.tools)
 
 ## Getting started
 
@@ -60,4 +60,4 @@ If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or
 
 By default, the example app uses [Jazz Cloud](https://jazz.tools/cloud) (`wss://cloud.jazz.tools`) - so cross-device use, invites and collaboration should just work.
 
-You can also run a local sync server by running `npx jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of the `<JazzProvider>` provider component in [./src/main.tsx](./src/main.tsx).
+You can also run a local sync server by running`npx jazz-run sync`, and setting the `sync` parameter of`JazzProvider` in [./src/main.tsx](./src/main.tsx) to`{ peer: "ws://localhost:4200" }`.

examples/reactions/package.json

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

examples/reactions/vercel.json

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

examples/richtext-prosekit/.prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "htmlWhitespaceSensitivity": "ignore"
+}

examples/richtext-prosekit/CHANGELOG.md

@@ -0,0 +1,10 @@
+# example-prosekit-jazz
+
+## 0.0.1
+
+### Patch Changes
+
+- Updated dependencies [048ac1d]
+  - jazz-tools@0.14.22
+  - jazz-react@0.14.22
+  - jazz-richtext-prosemirror@0.14.22

examples/richtext-prosekit/README.md

@@ -0,0 +1,121 @@
+# Jazz RichText ProseKit Example
+
+A demonstration of collaborative rich text editing with Jazz, React, and ProseKit.
+
+Original implementation by [prosekit](https://github.com/prosekit/prosekit-jazz)
+
+Live version: [https://richtext-prosekit.demo.jazz.tools](https://richtext-prosekit.demo.jazz.tools)
+
+## Overview
+
+This example shows how to implement collaborative rich text editing using:
+
+- **Jazz** for real-time synchronization
+- **CoRichText** for collaborative rich text data structures
+- **ProseKit** for the rich text editor UI
+- **React** for the component framework
+
+## Getting started
+
+You can either
+
+1. Clone the jazz repository, and run the app within the monorepo.
+2. Or create a new Jazz project using this example as a template.
+
+### Using the example as a template
+
+Create a new Jazz project, and use this example as a template.
+
+```bash
+npx create-jazz-app@latest richtext-prosekit-app --example richtext-prosekit
+```
+
+Go to the new project directory.
+
+```bash
+cd richtext-prosekit-app
+```
+
+Run the dev server.
+
+```bash
+npm run dev
+```
+
+### Using the monorepo
+
+This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation).
+
+Clone the jazz repository.
+
+```bash
+git clone https://github.com/garden-co/jazz.git
+```
+
+Install and build dependencies.
+
+```bash
+pnpm i && npx turbo build
+```
+
+Go to the example directory.
+
+```bash
+cd jazz/examples/richtext-prosekit/
+```
+
+Start the dev server.
+
+```bash
+pnpm dev
+```
+
+Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
+
+## How it works
+
+This example demonstrates two key functionalities:
+
+1. **CoRichText** - Jazz's collaborative rich text data structure
+2. **Rich text integration** - Using ProseKit with Jazz
+
+### Key components
+
+- `src/schema.ts` - Defines the data model, including the `bio` field using CoRichText
+- `src/Editor.tsx` - Implements both plaintext and rich text editor views
+- `jazz-richtext-prosekit` - Provides the plugin that connects Jazz to ProseKit
+
+### Implementation details
+
+The example shows how to:
+
+- Create and store CoRichText values
+- Set up a plaintext editor with CoRichText
+- Set up a ProseKit editor with a Jazz plugin
+
+## Extending this example
+
+You can extend this example by:
+
+- Adding formatting options to the rich text toolbar
+- Adding multiple collaborative documents
+- Building document history or versioning
+
+## Configuration: sync server
+
+By default, the app uses [Jazz Cloud](https://jazz.tools/cloud) (`wss://cloud.jazz.tools`) - so cross-device use, invites and collaboration should just work.
+
+You can also run a local sync server by running`npx jazz-run sync`, and setting the `sync` parameter of`JazzProvider` in [./src/main.tsx](./src/main.tsx) to`{ peer: "ws://localhost:4200" }`.
+
+## Learn more
+
+To learn more about Jazz's collaborative text capabilities:
+
+- [Jazz documentation](https://jazz.tools/docs)
+- [CoText documentation](https://jazz.tools/docs/using-covalues/cotext)
+- [ProseKit documentation](https://prosekit.dev/getting-started/introduction/)
+
+## Questions / problems / feedback
+
+If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
+

examples/richtext-prosekit/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en" class="h-full">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/png" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Rich text ProseKit example app | Jazz</title>
+</head>
+
+<body class="h-full flex flex-col">
+  <div id="root" class="align-self-center flex-1"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>

examples/richtext-prosekit/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "example-prosekit-jazz",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "tsc -b && vite build",
+    "dev": "vite",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "jazz-react": "workspace:*",
+    "jazz-richtext-prosemirror": "workspace:*",
+    "jazz-tools": "workspace:*",
+    "prosekit": "^0.13.3",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@egoist/tailwindcss-icons": "^1.9.0",
+    "@iconify-json/lucide": "^1.2.45",
+    "@types/react": "^19.1.6",
+    "@types/react-dom": "^19.1.5",
+    "@vitejs/plugin-react": "^4.5.0",
+    "postcss": "^8.5.4",
+    "tailwindcss": "^3.4.17",
+    "typescript": "5.6.2",
+    "vite": "6.3.5"
+  }
+}

examples/richtext-prosekit/postcss.config.mjs

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    "tailwindcss/nesting": {},
+    tailwindcss: {},
+  },
+};

examples/richtext-prosekit/src/apiKey.ts

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

examples/richtext-prosekit/src/app-name.ts

@@ -0,0 +1,2 @@
+// We use this to identify the app in the passkey auth
+export const APPLICATION_NAME = "Jazz prosekit example";

examples/richtext-prosekit/src/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

examples/richtext-prosekit/src/app.tsx

@@ -0,0 +1,56 @@
+import { useAccount, useIsAuthenticated } from "jazz-react";
+import { CoRichText } from "jazz-tools";
+import { useMemo } from "react";
+import { Logo } from "./app-logo.tsx";
+import { AuthButton } from "./auth-button.tsx";
+import Editor from "./editor/editor.tsx";
+import { JazzAccount } from "./schema.ts";
+import Textarea from "./textarea.tsx";
+
+function App() {
+  const { me } = useAccount(JazzAccount, {
+    resolve: { profile: true, root: true },
+  });
+
+  const isAuthenticated = useIsAuthenticated();
+
+  const memoCoRichText: CoRichText | undefined = useMemo(() => {
+    console.log("memoCoRichText");
+    return me?.profile.bio ?? undefined;
+  }, [me?.id, me?.profile.bio?.id]);
+  // Only recreate if the account or the bio changes
+  // https://github.com/garden-co/jazz/blob/b4cd307ebac5860df2f83d75a915906f472a5cd4/examples/richtext/src/Editor.tsx#L46C1-L46C88
+
+  return (
+    <>
+      <header>
+        <nav className="container flex justify-between items-center py-3">
+          {isAuthenticated ? (
+            <span>You're logged in.</span>
+          ) : (
+            <span>Authenticate to share the data with another device.</span>
+          )}
+          <AuthButton />
+        </nav>
+      </header>
+      <main className="container mt-16 flex flex-col gap-8">
+        <Logo />
+
+        <div className="text-center">
+          <h1>
+            Welcome{me?.profile.firstName ? <>, {me?.profile.firstName}</> : ""}
+            !
+          </h1>
+        </div>
+
+        <div className="flex flex-col gap-4">
+          <Editor coRichText={memoCoRichText} />
+          <Editor coRichText={memoCoRichText} />
+          <Textarea coRichText={me?.profile.bio} />
+        </div>
+      </main>
+    </>
+  );
+}
+
+export default App;

examples/richtext-prosekit/src/auth-button.tsx

@@ -0,0 +1,43 @@
+import { useAccount, usePasskeyAuth } from "jazz-react";
+import { APPLICATION_NAME } from "./app-name";
+
+export function AuthButton() {
+  const { logOut } = useAccount();
+
+  const auth = usePasskeyAuth({
+    appName: APPLICATION_NAME,
+  });
+
+  function handleLogOut() {
+    logOut();
+    window.history.pushState({}, "", "/");
+  }
+
+  if (auth.state === "signedIn") {
+    return (
+      <button
+        className="bg-stone-100 py-1.5 px-3 text-sm rounded-md"
+        onClick={handleLogOut}
+      >
+        Log out
+      </button>
+    );
+  }
+
+  return (
+    <div className="flex gap-2">
+      <button
+        className="bg-stone-100 py-1.5 px-3 text-sm rounded-md"
+        onClick={() => auth.signUp("")}
+      >
+        Sign up
+      </button>
+      <button
+        onClick={() => auth.logIn()}
+        className="bg-stone-100 py-1.5 px-3 text-sm rounded-md"
+      >
+        Log in
+      </button>
+    </div>
+  );
+}

examples/richtext-prosekit/src/editor/block-handle.tsx

@@ -0,0 +1,18 @@
+import {
+  BlockHandleAdd,
+  BlockHandleDraggable,
+  BlockHandlePopover,
+} from "prosekit/react/block-handle";
+
+export default function BlockHandle() {
+  return (
+    <BlockHandlePopover className="flex items-center flex-row box-border justify-center transition border-0 [&:not([data-state])]:hidden will-change-transform data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 data-[state=open]:animate-duration-150 data-[state=closed]:animate-duration-200">
+      <BlockHandleAdd className="flex items-center box-border justify-center h-[1.5em] w-[1.5em] hover:bg-gray-100 dark:hover:bg-gray-800 rounded text-gray-500/50 dark:text-gray-500/50 cursor-pointer">
+        <div className="i-lucide-plus h-5 w-5" />
+      </BlockHandleAdd>
+      <BlockHandleDraggable className="flex items-center box-border justify-center h-[1.5em] w-[1.2em] hover:bg-gray-100 dark:hover:bg-gray-800 rounded text-gray-500/50 dark:text-gray-500/50 cursor-grab">
+        <div className="i-lucide-grip-vertical h-5 w-5" />
+      </BlockHandleDraggable>
+    </BlockHandlePopover>
+  );
+}

examples/richtext-prosekit/src/editor/button.tsx

@@ -0,0 +1,42 @@
+import {
+  TooltipContent,
+  TooltipRoot,
+  TooltipTrigger,
+} from "prosekit/react/tooltip";
+import type { ReactNode } from "react";
+
+export default function Button({
+  pressed,
+  disabled,
+  onClick,
+  tooltip,
+  children,
+}: {
+  pressed?: boolean;
+  disabled?: boolean;
+  onClick?: VoidFunction;
+  tooltip?: string;
+  children: ReactNode;
+}) {
+  return (
+    <TooltipRoot>
+      <TooltipTrigger className="block">
+        <button
+          data-state={pressed ? "on" : "off"}
+          disabled={disabled}
+          onClick={() => onClick?.()}
+          onMouseDown={(event) => event.preventDefault()}
+          className="outline-unset focus-visible:outline-unset flex items-center justify-center rounded-md p-2 font-medium transition focus-visible:ring-2 text-sm focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 disabled:pointer-events-none min-w-9 min-h-9 disabled:opacity-50 hover:disabled:opacity-50 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-200 data-[state=on]:bg-gray-200 dark:data-[state=on]:bg-gray-400"
+        >
+          {children}
+          {tooltip ? <span className="sr-only">{tooltip}</span> : null}
+        </button>
+      </TooltipTrigger>
+      {tooltip ? (
+        <TooltipContent className="z-50 overflow-hidden rounded-md border border-solid bg-gray-900 dark:bg-gray-50 px-3 py-1.5 text-xs text-gray-50 dark:text-gray-900 shadow-sm [&:not([data-state])]:hidden will-change-transform data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 data-[state=open]:animate-duration-150 data-[state=closed]:animate-duration-200 data-[side=bottom]:slide-in-from-top-2 data-[side=bottom]:slide-out-to-top-2 data-[side=left]:slide-in-from-right-2 data-[side=left]:slide-out-to-right-2 data-[side=right]:slide-in-from-left-2 data-[side=right]:slide-out-to-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=top]:slide-out-to-bottom-2">
+          {tooltip}
+        </TooltipContent>
+      ) : null}
+    </TooltipRoot>
+  );
+}

examples/richtext-prosekit/src/editor/code-block-view.tsx

@@ -0,0 +1,36 @@
+import type { CodeBlockAttrs } from "prosekit/extensions/code-block";
+import { shikiBundledLanguagesInfo } from "prosekit/extensions/code-block";
+import type { ReactNodeViewProps } from "prosekit/react";
+
+export default function CodeBlockView(props: ReactNodeViewProps) {
+  const attrs = props.node.attrs as CodeBlockAttrs;
+  const language = attrs.language;
+
+  const setLanguage = (language: string) => {
+    const attrs: CodeBlockAttrs = { language };
+    props.setAttrs(attrs);
+  };
+
+  return (
+    <>
+      <div
+        className="relative mx-2 top-3 h-0 select-none overflow-visible text-xs"
+        contentEditable={false}
+      >
+        <select
+          className="outline-unset focus:outline-unset relative box-border w-auto cursor-pointer select-none appearance-none rounded border-none bg-transparent px-2 py-1 text-xs transition text-[var(--prosemirror-highlight)] opacity-0 hover:opacity-80 [div[data-node-view-root]:hover_&]:opacity-50 [div[data-node-view-root]:hover_&]:hover:opacity-80"
+          onChange={(event) => setLanguage(event.target.value)}
+          value={language || ""}
+        >
+          <option value="">Plain Text</option>
+          {shikiBundledLanguagesInfo.map((info) => (
+            <option key={info.id} value={info.id}>
+              {info.name}
+            </option>
+          ))}
+        </select>
+      </div>
+      <pre ref={props.contentRef} data-language={language}></pre>
+    </>
+  );
+}

examples/richtext-prosekit/src/editor/editor.tsx

@@ -0,0 +1,49 @@
+import "prosekit/basic/style.css";
+import "prosekit/basic/typography.css";
+
+import { createEditor } from "prosekit/core";
+import { ProseKit } from "prosekit/react";
+import { memo, useMemo } from "react";
+
+import { CoRichText } from "jazz-tools";
+import BlockHandle from "./block-handle";
+import { defineExtension } from "./extension";
+import InlineMenu from "./inline-menu";
+import SlashMenu from "./slash-menu";
+import TagMenu from "./tag-menu";
+import Toolbar from "./toolbar";
+import UserMenu from "./user-menu";
+
+interface EditorProps {
+  coRichText?: CoRichText;
+}
+
+function EditorComponent({ coRichText }: EditorProps) {
+  const editor = useMemo(() => {
+    const extension = defineExtension({ coRichText });
+    return createEditor({ extension });
+  }, [coRichText]);
+
+  return (
+    <ProseKit editor={editor}>
+      <div className="box-border h-full w-full min-h-72 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow flex flex-col color-black dark:color-white  bg-white">
+        <Toolbar />
+        <div className="relative bg-white w-full flex-1 box-border overflow-y-scroll">
+          <div
+            ref={editor.mount}
+            className="ProseMirror bg-white box-border min-h-full px-[max(4rem,_calc(50%-20rem))] py-8 outline-none outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500"
+          ></div>
+          <InlineMenu />
+          <SlashMenu />
+          <UserMenu />
+          <TagMenu />
+          <BlockHandle />
+        </div>
+      </div>
+    </ProseKit>
+  );
+}
+
+const EditorMemo = memo(EditorComponent);
+
+export default EditorMemo;

examples/richtext-prosekit/src/editor/extension.ts

@@ -0,0 +1,47 @@
+import { createJazzPlugin } from "jazz-richtext-prosemirror";
+import { defineBasicExtension } from "prosekit/basic";
+import { definePlugin, union } from "prosekit/core";
+import {
+  defineCodeBlock,
+  defineCodeBlockShiki,
+} from "prosekit/extensions/code-block";
+import { defineHorizontalRule } from "prosekit/extensions/horizontal-rule";
+import { defineMention } from "prosekit/extensions/mention";
+import { definePlaceholder } from "prosekit/extensions/placeholder";
+import {
+  type ReactNodeViewComponent,
+  defineReactNodeView,
+} from "prosekit/react";
+
+import { JazzPluginConfig } from "jazz-richtext-prosemirror/src/lib/plugin";
+import type { CoRichText } from "jazz-tools";
+import CodeBlockView from "./code-block-view";
+import ImageView from "./image-view";
+import { defineImageFileHandlers } from "./upload-file";
+
+export function defineExtension(jazz: {
+  coRichText?: CoRichText;
+  config?: JazzPluginConfig;
+}) {
+  return union(
+    defineBasicExtension(),
+    definePlaceholder({ placeholder: "Press / for commands..." }),
+    defineMention(),
+    defineCodeBlock(),
+    defineCodeBlockShiki(),
+    defineHorizontalRule(),
+    defineReactNodeView({
+      name: "codeBlock",
+      contentAs: "code",
+      component: CodeBlockView satisfies ReactNodeViewComponent,
+    }),
+    defineReactNodeView({
+      name: "image",
+      component: ImageView satisfies ReactNodeViewComponent,
+    }),
+    defineImageFileHandlers(),
+    definePlugin(createJazzPlugin(jazz.coRichText, jazz.config)),
+  );
+}
+
+export type EditorExtension = ReturnType<typeof defineExtension>;

examples/richtext-prosekit/src/editor/image-upload-popover.tsx

@@ -0,0 +1,115 @@
+import { useEditor } from "prosekit/react";
+import {
+  PopoverContent,
+  PopoverRoot,
+  PopoverTrigger,
+} from "prosekit/react/popover";
+import { type FC, type ReactNode, useState } from "react";
+
+import Button from "./button";
+import type { EditorExtension } from "./extension";
+
+export const ImageUploadPopover: FC<{
+  tooltip: string;
+  disabled: boolean;
+  children: ReactNode;
+}> = ({ tooltip, disabled, children }) => {
+  const [open, setOpen] = useState(false);
+  const [webUrl, setWebUrl] = useState("");
+  const [objectUrl, setObjectUrl] = useState("");
+  const url = webUrl || objectUrl;
+
+  const editor = useEditor<EditorExtension>();
+
+  const handleFileChange: React.ChangeEventHandler<HTMLInputElement> = (
+    event,
+  ) => {
+    const file = event.target.files?.[0];
+
+    if (file) {
+      setObjectUrl(URL.createObjectURL(file));
+      setWebUrl("");
+    } else {
+      setObjectUrl("");
+    }
+  };
+
+  const handleWebUrlChange: React.ChangeEventHandler<HTMLInputElement> = (
+    event,
+  ) => {
+    const url = event.target.value;
+
+    if (url) {
+      setWebUrl(url);
+      setObjectUrl("");
+    } else {
+      setWebUrl("");
+    }
+  };
+
+  const deferResetState = () => {
+    setTimeout(() => {
+      setWebUrl("");
+      setObjectUrl("");
+    }, 300);
+  };
+
+  const handleSubmit = () => {
+    editor.commands.insertImage({ src: url });
+    deferResetState();
+    setOpen(false);
+  };
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open) {
+      deferResetState();
+    }
+    setOpen(open);
+  };
+
+  return (
+    <PopoverRoot open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger>
+        <Button pressed={open} disabled={disabled} tooltip={tooltip}>
+          {children}
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent className="flex flex-col gap-y-4 p-6 text-sm w-sm z-10 box-border rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg [&:not([data-state])]:hidden will-change-transform data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 data-[state=open]:animate-duration-150 data-[state=closed]:animate-duration-200 data-[side=bottom]:slide-in-from-top-2 data-[side=bottom]:slide-out-to-top-2 data-[side=left]:slide-in-from-right-2 data-[side=left]:slide-out-to-right-2 data-[side=right]:slide-in-from-left-2 data-[side=right]:slide-out-to-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=top]:slide-out-to-bottom-2">
+        {objectUrl ? null : (
+          <>
+            <label>Embed Link</label>
+            <input
+              className="flex h-9 rounded-md w-full bg-white dark:bg-gray-950 px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-none focus-visible:outline-none file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50"
+              placeholder="Paste the image link..."
+              type="url"
+              value={webUrl}
+              onChange={handleWebUrlChange}
+            />
+          </>
+        )}
+
+        {webUrl ? null : (
+          <>
+            <label>Upload</label>
+            <input
+              className="flex h-9 rounded-md w-full bg-white dark:bg-gray-950 px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-none focus-visible:outline-none file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50"
+              accept="image/*"
+              type="file"
+              onChange={handleFileChange}
+            />
+          </>
+        )}
+
+        {url ? (
+          <button
+            className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white dark:ring-offset-gray-950 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-0 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 hover:bg-gray-900/90 dark:hover:bg-gray-50/90 h-10 px-4 py-2 w-full"
+            onClick={handleSubmit}
+          >
+            Insert Image
+          </button>
+        ) : null}
+      </PopoverContent>
+    </PopoverRoot>
+  );
+};

examples/richtext-prosekit/src/editor/image-view.tsx

@@ -0,0 +1,114 @@
+import { UploadTask } from "prosekit/extensions/file";
+import type { ImageAttrs } from "prosekit/extensions/image";
+import type { ReactNodeViewProps } from "prosekit/react";
+import { ResizableHandle, ResizableRoot } from "prosekit/react/resizable";
+import { type SyntheticEvent, useEffect, useState } from "react";
+
+export default function ImageView(props: ReactNodeViewProps) {
+  const { setAttrs, node } = props;
+  const attrs = node.attrs as ImageAttrs;
+  const url = attrs.src || "";
+  const uploading = url.startsWith("blob:");
+
+  const [aspectRatio, setAspectRatio] = useState<number | undefined>();
+  const [error, setError] = useState<string | undefined>();
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    if (!url.startsWith("blob:")) {
+      return;
+    }
+
+    const uploadTask = UploadTask.get<string>(url);
+    if (!uploadTask) {
+      return;
+    }
+
+    const abortController = new AbortController();
+    void uploadTask.finished
+      .then((resultUrl) => {
+        if (resultUrl && typeof resultUrl === "string") {
+          if (abortController.signal.aborted) {
+            return;
+          }
+          setAttrs({ src: resultUrl });
+        } else {
+          if (abortController.signal.aborted) {
+            return;
+          }
+          setError("Unexpected upload result");
+        }
+        UploadTask.delete(uploadTask.objectURL);
+      })
+      .catch((error) => {
+        if (abortController.signal.aborted) {
+          return;
+        }
+        setError(String(error));
+        UploadTask.delete(uploadTask.objectURL);
+      });
+    const unsubscribe = uploadTask.subscribeProgress(({ loaded, total }) => {
+      if (abortController.signal.aborted) {
+        return;
+      }
+      if (total > 0) {
+        setProgress(loaded / total);
+      }
+    });
+    return () => {
+      unsubscribe();
+      abortController.abort();
+    };
+  }, [url, setAttrs]);
+
+  const handleImageLoad = (event: SyntheticEvent) => {
+    const img = event.target as HTMLImageElement;
+    const { naturalWidth, naturalHeight } = img;
+    const ratio = naturalWidth / naturalHeight;
+    if (ratio && Number.isFinite(ratio)) {
+      setAspectRatio(ratio);
+    }
+    if (naturalWidth && naturalHeight && (!attrs.width || !attrs.height)) {
+      setAttrs({ width: naturalWidth, height: naturalHeight });
+    }
+  };
+
+  return (
+    <ResizableRoot
+      width={attrs.width ?? undefined}
+      height={attrs.height ?? undefined}
+      aspectRatio={aspectRatio}
+      onResizeEnd={(event) => setAttrs(event.detail)}
+      data-selected={props.selected ? "" : undefined}
+      className="relative flex items-center justify-center box-border overflow-hidden my-2 group max-h-[600px] max-w-full min-h-[64px] min-w-[64px] outline-2 outline-transparent data-[selected]:outline-blue-500 outline-solid"
+    >
+      {url && !error && (
+        <img
+          src={url}
+          onLoad={handleImageLoad}
+          className="h-full w-full max-w-full max-h-full object-contain"
+        />
+      )}
+      {uploading && !error && (
+        <div className="absolute bottom-0 left-0 m-1 flex content-center items-center gap-2 rounded bg-gray-800/60 p-1.5 text-xs text-white/80 transition">
+          <div className="i-lucide-loader-circle h-4 w-4 animate-spin"></div>
+          <div>{Math.round(progress * 100)}%</div>
+        </div>
+      )}
+      {error && (
+        <div className="absolute bottom-0 left-0 right-0 top-0 flex flex-col items-center justify-center gap-4 bg-gray-200 p-2 text-sm dark:bg-gray-800 @container">
+          <div className="i-lucide-image-off h-8 w-8"></div>
+          <div className="hidden opacity-80 @xs:block">
+            Failed to upload image
+          </div>
+        </div>
+      )}
+      <ResizableHandle
+        className="absolute bottom-0 right-0 rounded m-1.5 p-1 transition bg-gray-900/30 active:bg-gray-800/60 hover:bg-gray-800/60 text-white/50 active:text-white/80 active:translate-x-0.5 active:translate-y-0.5 opacity-0 hover:opacity-100 group-hover:opacity-100 group-[[data-resizing]]:opacity-100"
+        position="bottom-right"
+      >
+        <div className="i-lucide-arrow-down-right h-4 w-4"></div>
+      </ResizableHandle>
+    </ResizableRoot>
+  );
+}

examples/richtext-prosekit/src/editor/inline-menu.tsx

@@ -0,0 +1,146 @@
+import type { LinkAttrs } from "prosekit/extensions/link";
+import type { EditorState } from "prosekit/pm/state";
+import { useEditor } from "prosekit/react";
+import { InlinePopover } from "prosekit/react/inline-popover";
+import { useState } from "react";
+
+import Button from "./button";
+import type { EditorExtension } from "./extension";
+
+export default function InlineMenu() {
+  const editor = useEditor<EditorExtension>({ update: true });
+
+  const [linkMenuOpen, setLinkMenuOpen] = useState(false);
+  const toggleLinkMenuOpen = () => setLinkMenuOpen((open) => !open);
+
+  const getCurrentLink = (state: EditorState): string | undefined => {
+    const { $from } = state.selection;
+    const marks = $from.marksAcross($from);
+    if (!marks) {
+      return;
+    }
+    for (const mark of marks) {
+      if (mark.type.name === "link") {
+        return (mark.attrs as LinkAttrs).href;
+      }
+    }
+  };
+
+  const handleLinkUpdate = (href?: string) => {
+    if (href) {
+      editor.commands.addLink({ href });
+    } else {
+      editor.commands.removeLink();
+    }
+
+    setLinkMenuOpen(false);
+    editor.focus();
+  };
+
+  return (
+    <>
+      <InlinePopover
+        data-testid="inline-menu-main"
+        className="z-10 box-border border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg [&:not([data-state])]:hidden relative flex min-w-[8rem] space-x-1 overflow-auto whitespace-nowrap rounded-md p-1"
+        onOpenChange={(open) => {
+          if (!open) {
+            setLinkMenuOpen(false);
+          }
+        }}
+      >
+        <Button
+          pressed={editor.marks.bold.isActive()}
+          disabled={!editor.commands.toggleBold.canExec()}
+          onClick={() => editor.commands.toggleBold()}
+          tooltip="Bold"
+        >
+          <div className="i-lucide-bold h-5 w-5"></div>
+        </Button>
+
+        <Button
+          pressed={editor.marks.italic.isActive()}
+          disabled={!editor.commands.toggleItalic.canExec()}
+          onClick={() => editor.commands.toggleItalic()}
+          tooltip="Italic"
+        >
+          <div className="i-lucide-italic h-5 w-5"></div>
+        </Button>
+
+        <Button
+          pressed={editor.marks.underline.isActive()}
+          disabled={!editor.commands.toggleUnderline.canExec()}
+          onClick={() => editor.commands.toggleUnderline()}
+          tooltip="Underline"
+        >
+          <div className="i-lucide-underline h-5 w-5"></div>
+        </Button>
+
+        <Button
+          pressed={editor.marks.strike.isActive()}
+          disabled={!editor.commands.toggleStrike.canExec()}
+          onClick={() => editor.commands.toggleStrike()}
+          tooltip="Strikethrough"
+        >
+          <div className="i-lucide-strikethrough h-5 w-5"></div>
+        </Button>
+
+        <Button
+          pressed={editor.marks.code.isActive()}
+          disabled={!editor.commands.toggleCode.canExec()}
+          onClick={() => editor.commands.toggleCode()}
+          tooltip="Code"
+        >
+          <div className="i-lucide-code h-5 w-5"></div>
+        </Button>
+
+        {editor.commands.addLink.canExec({ href: "" }) && (
+          <Button
+            pressed={editor.marks.link.isActive()}
+            onClick={() => {
+              editor.commands.expandLink();
+              toggleLinkMenuOpen();
+            }}
+            tooltip="Link"
+          >
+            <div className="i-lucide-link h-5 w-5"></div>
+          </Button>
+        )}
+      </InlinePopover>
+
+      <InlinePopover
+        placement={"bottom"}
+        defaultOpen={false}
+        open={linkMenuOpen}
+        onOpenChange={setLinkMenuOpen}
+        data-testid="inline-menu-link"
+        className="z-10 box-border border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg [&:not([data-state])]:hidden relative flex flex-col w-xs rounded-lg p-4 gap-y-2 items-stretch"
+      >
+        {linkMenuOpen && (
+          <form
+            onSubmit={(event) => {
+              event.preventDefault();
+              const target = event.target as HTMLFormElement | null;
+              const href = target?.querySelector("input")?.value?.trim();
+              handleLinkUpdate(href);
+            }}
+          >
+            <input
+              placeholder="Paste the link..."
+              defaultValue={getCurrentLink(editor.state)}
+              className="flex h-9 rounded-md w-full bg-white dark:bg-gray-950 px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-none focus-visible:outline-none file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50"
+            ></input>
+          </form>
+        )}
+        {editor.marks.link.isActive() && (
+          <button
+            onClick={() => handleLinkUpdate()}
+            onMouseDown={(event) => event.preventDefault()}
+            className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white dark:ring-offset-gray-950 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-0 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 hover:bg-gray-900/90 dark:hover:bg-gray-50/90 h-9 px-3"
+          >
+            Remove link
+          </button>
+        )}
+      </InlinePopover>
+    </>
+  );
+}