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

Version Packages

.changeset/famous-knives-cover.md

@@ -1,7 +0,0 @@
----
-"chat-rn-clerk": patch
-"jazz-react-native": patch
-"jazz-example-chat": patch
----
-
-Fix image handling in react-native

.changeset/silver-sheep-perform.md

@@ -1,5 +0,0 @@
----
-"cojson": patch
----
-
-Optimize queue management

examples/chat-rn-clerk/CHANGELOG.md

@@ -1,5 +1,35 @@
 # chat-rn-clerk
 
+## 1.0.53
+
+### Patch Changes
+
+- jazz-react-native@0.9.12
+- jazz-react-native-auth-clerk@0.9.12
+- jazz-tools@0.9.12
+- jazz-react-native-media-images@0.9.12
+
+## 1.0.52
+
+### Patch Changes
+
+- jazz-react-native@0.9.11
+- jazz-react-native-auth-clerk@0.9.11
+- jazz-tools@0.9.11
+- jazz-react-native-media-images@0.9.11
+
+## 1.0.51
+
+### Patch Changes
+
+- f76274c: Fix image handling in react-native
+- Updated dependencies [f76274c]
+- Updated dependencies [5e83864]
+  - jazz-react-native@0.9.10
+  - jazz-tools@0.9.10
+  - jazz-react-native-auth-clerk@0.9.10
+  - jazz-react-native-media-images@0.9.10
+
 ## 1.0.50
 
 ### Patch Changes

examples/chat-rn-clerk/package.json

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

examples/chat-rn/CHANGELOG.md

@@ -1,5 +1,28 @@
 # chat-rn
 
+## 1.0.50
+
+### Patch Changes
+
+- jazz-react-native@0.9.12
+- jazz-tools@0.9.12
+
+## 1.0.49
+
+### Patch Changes
+
+- jazz-react-native@0.9.11
+- jazz-tools@0.9.11
+
+## 1.0.48
+
+### Patch Changes
+
+- Updated dependencies [f76274c]
+- Updated dependencies [5e83864]
+  - jazz-react-native@0.9.10
+  - jazz-tools@0.9.10
+
 ## 1.0.47
 
 ### Patch Changes

examples/chat-rn/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-rn",
-  "version": "1.0.47",
+  "version": "1.0.50",
   "main": "index.js",
   "scripts": {
     "build": "expo export -p ios",

examples/chat-vue/CHANGELOG.md

@@ -1,5 +1,30 @@
 # chat-vue
 
+## 0.0.37
+
+### Patch Changes
+
+- jazz-browser@0.9.12
+- jazz-tools@0.9.12
+- jazz-vue@0.9.12
+
+## 0.0.36
+
+### Patch Changes
+
+- jazz-browser@0.9.11
+- jazz-tools@0.9.11
+- jazz-vue@0.9.11
+
+## 0.0.35
+
+### Patch Changes
+
+- Updated dependencies [5e83864]
+  - jazz-tools@0.9.10
+  - jazz-browser@0.9.10
+  - jazz-vue@0.9.10
+
 ## 0.0.34
 
 ### Patch Changes

examples/chat-vue/package.json

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

examples/chat/CHANGELOG.md

@@ -1,5 +1,31 @@
 # jazz-example-chat
 
+## 0.0.133
+
+### Patch Changes
+
+- jazz-react@0.9.12
+- jazz-tools@0.9.12
+- jazz-browser-media-images@0.9.12
+
+## 0.0.132
+
+### Patch Changes
+
+- jazz-react@0.9.11
+- jazz-tools@0.9.11
+- jazz-browser-media-images@0.9.11
+
+## 0.0.131
+
+### Patch Changes
+
+- f76274c: Fix image handling in react-native
+- Updated dependencies [5e83864]
+  - jazz-react@0.9.10
+  - jazz-tools@0.9.10
+  - jazz-browser-media-images@0.9.10
+
 ## 0.0.130
 
 ### Patch Changes

examples/chat/package.json

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

examples/clerk/CHANGELOG.md

@@ -1,5 +1,30 @@
 # minimal-auth-clerk
 
+## 0.0.32
+
+### Patch Changes
+
+- jazz-react@0.9.12
+- jazz-react-auth-clerk@0.9.12
+- jazz-tools@0.9.12
+
+## 0.0.31
+
+### Patch Changes
+
+- jazz-react@0.9.11
+- jazz-react-auth-clerk@0.9.11
+- jazz-tools@0.9.11
+
+## 0.0.30
+
+### Patch Changes
+
+- Updated dependencies [5e83864]
+  - jazz-react@0.9.10
+  - jazz-tools@0.9.10
+  - jazz-react-auth-clerk@0.9.10
+
 ## 0.0.29
 
 ### Patch Changes

examples/clerk/package.json

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

examples/file-share-svelte/CHANGELOG.md

@@ -1,5 +1,27 @@
 # file-share-svelte
 
+## 0.0.17
+
+### Patch Changes
+
+- jazz-svelte@0.9.12
+- jazz-tools@0.9.12
+
+## 0.0.16
+
+### Patch Changes
+
+- jazz-svelte@0.9.11
+- jazz-tools@0.9.11
+
+## 0.0.15
+
+### Patch Changes
+
+- Updated dependencies [5e83864]
+  - jazz-tools@0.9.10
+  - jazz-svelte@0.9.10
+
 ## 0.0.14
 
 ### Patch Changes

examples/file-share-svelte/package.json

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

examples/form/CHANGELOG.md

@@ -1,5 +1,30 @@
 # form
 
+## 0.0.28
+
+### Patch Changes
+
+- jazz-react@0.9.12
+- jazz-tools@0.9.12
+- jazz-browser-media-images@0.9.12
+
+## 0.0.27
+
+### Patch Changes
+
+- jazz-react@0.9.11
+- jazz-tools@0.9.11
+- jazz-browser-media-images@0.9.11
+
+## 0.0.26
+
+### Patch Changes
+
+- Updated dependencies [5e83864]
+  - jazz-react@0.9.10
+  - jazz-tools@0.9.10
+  - jazz-browser-media-images@0.9.10
+
 ## 0.0.25
 
 ### Patch Changes

examples/form/package.json

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

examples/image-upload/CHANGELOG.md

@@ -1,5 +1,30 @@
 # image-upload
 
+## 0.0.30
+
+### Patch Changes
+
+- jazz-react@0.9.12
+- jazz-tools@0.9.12
+- jazz-browser-media-images@0.9.12
+
+## 0.0.29
+
+### Patch Changes
+
+- jazz-react@0.9.11
+- jazz-tools@0.9.11
+- jazz-browser-media-images@0.9.11
+
+## 0.0.28
+
+### Patch Changes
+
+- Updated dependencies [5e83864]
+  - jazz-react@0.9.10
+  - jazz-tools@0.9.10
+  - jazz-browser-media-images@0.9.10
+
 ## 0.0.27
 
 ### Patch Changes

examples/image-upload/package.json

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

examples/inspector/CHANGELOG.md

@@ -1,5 +1,30 @@
 # jazz-example-inspector
 
+## 0.0.97
+
+### Patch Changes
+
+- Updated dependencies [15d4b2a]
+  - cojson-transport-ws@0.9.12
+  - cojson@0.9.12
+
+## 0.0.96
+
+### Patch Changes
+
+- Updated dependencies [efbf3d8]
+- Updated dependencies [5863bad]
+  - cojson@0.9.11
+  - cojson-transport-ws@0.9.11
+
+## 0.0.95
+
+### Patch Changes
+
+- Updated dependencies [4aa377d]
+  - cojson@0.9.10
+  - cojson-transport-ws@0.9.10
+
 ## 0.0.94
 
 ### Patch Changes

examples/inspector/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "jazz-inspector",
+  "name": "jazz-inspector-app",
   "private": true,
-  "version": "0.0.94",
+  "version": "0.0.97",
   "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.9.9",
-    "cojson-transport-ws": "workspace:0.9.9",
+    "cojson": "workspace:0.9.12",
+    "cojson-transport-ws": "workspace:0.9.12",
     "hash-slash": "workspace:0.2.1",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",

examples/music-player/CHANGELOG.md

@@ -1,5 +1,29 @@
 # jazz-example-musicplayer
 
+## 0.0.53
+
+### Patch Changes
+
+- jazz-inspector@0.9.12
+- jazz-react@0.9.12
+- jazz-tools@0.9.12
+
+## 0.0.52
+
+### Patch Changes
+
+- jazz-inspector@0.9.11
+- jazz-react@0.9.11
+- jazz-tools@0.9.11
+
+## 0.0.51
+
+### Patch Changes
+
+- Updated dependencies [5e83864]
+  - jazz-react@0.9.10
+  - jazz-tools@0.9.10
+
 ## 0.0.50
 
 ### Patch Changes

examples/music-player/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-music-player",
   "private": true,
-  "version": "0.0.50",
+  "version": "0.0.53",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -18,8 +18,9 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-react": "workspace:0.9.9",
-    "jazz-tools": "workspace:0.9.9",
+    "jazz-react": "workspace:0.9.12",
+    "jazz-tools": "workspace:0.9.12",
+    "jazz-inspector": "workspace:*",
     "lucide-react": "^0.274.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

examples/music-player/src/2_main.tsx

@@ -1,4 +1,5 @@
 import { Toaster } from "@/components/ui/toaster";
+import { JazzInspector } from "jazz-inspector";
 /* eslint-disable react-refresh/only-export-components */
 import React from "react";
 import ReactDOM from "react-dom/client";
@@ -71,6 +72,7 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
         AccountSchema={MusicaAccount}
       >
         {children}
+        <JazzInspector />
       </JazzProvider>
       <DemoAuthBasicUI appName="Jazz Music Player" state={state} />
     </>

examples/onboarding/CHANGELOG.md

@@ -1,5 +1,30 @@
 # jazz-example-onboarding
 
+## 0.0.34
+
+### Patch Changes
+
+- jazz-react@0.9.12
+- jazz-tools@0.9.12
+- jazz-browser-media-images@0.9.12
+
+## 0.0.33
+
+### Patch Changes
+
+- jazz-react@0.9.11
+- jazz-tools@0.9.11
+- jazz-browser-media-images@0.9.11
+
+## 0.0.32
+
+### Patch Changes
+
+- Updated dependencies [5e83864]
+  - jazz-react@0.9.10
+  - jazz-tools@0.9.10
+  - jazz-browser-media-images@0.9.10
+
 ## 0.0.31
 
 ### Patch Changes

examples/onboarding/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-onboarding",
   "private": true,
-  "version": "0.0.31",
+  "version": "0.0.34",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/organization/CHANGELOG.md

@@ -1,5 +1,27 @@
 # organization
 
+## 0.0.26
+
+### Patch Changes
+
+- jazz-react@0.9.12
+- jazz-tools@0.9.12
+
+## 0.0.25
+
+### Patch Changes
+
+- jazz-react@0.9.11
+- jazz-tools@0.9.11
+
+## 0.0.24
+
+### Patch Changes
+
+- Updated dependencies [5e83864]
+  - jazz-react@0.9.10
+  - jazz-tools@0.9.10
+
 ## 0.0.23
 
 ### Patch Changes

examples/organization/package.json

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

examples/passkey-svelte/CHANGELOG.md

@@ -1,5 +1,23 @@
 # passkey-svelte
 
+## 0.0.21
+
+### Patch Changes
+
+- jazz-svelte@0.9.12
+
+## 0.0.20
+
+### Patch Changes
+
+- jazz-svelte@0.9.11
+
+## 0.0.19
+
+### Patch Changes
+
+- jazz-svelte@0.9.10
+
 ## 0.0.18
 
 ### Patch Changes

examples/passkey-svelte/package.json

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

examples/passkey/CHANGELOG.md

@@ -1,5 +1,27 @@
 # minimal-auth-passkey
 
+## 0.0.31
+
+### Patch Changes
+
+- jazz-react@0.9.12
+- jazz-tools@0.9.12
+
+## 0.0.30
+
+### Patch Changes
+
+- jazz-react@0.9.11
+- jazz-tools@0.9.11
+
+## 0.0.29
+
+### Patch Changes
+
+- Updated dependencies [5e83864]
+  - jazz-react@0.9.10
+  - jazz-tools@0.9.10
+
 ## 0.0.28
 
 ### Patch Changes

examples/passkey/package.json

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

examples/password-manager/CHANGELOG.md

@@ -1,5 +1,27 @@
 # jazz-password-manager
 
+## 0.0.52
+
+### Patch Changes
+
+- jazz-react@0.9.12
+- jazz-tools@0.9.12
+
+## 0.0.51
+
+### Patch Changes
+
+- jazz-react@0.9.11
+- jazz-tools@0.9.11
+
+## 0.0.50
+
+### Patch Changes
+
+- Updated dependencies [5e83864]
+  - jazz-react@0.9.10
+  - jazz-tools@0.9.10
+
 ## 0.0.49
 
 ### Patch Changes

examples/password-manager/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-password-manager",
   "private": true,
-  "version": "0.0.49",
+  "version": "0.0.52",
   "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.9.9",
-    "jazz-tools": "workspace:0.9.9",
+    "jazz-react": "workspace:0.9.12",
+    "jazz-tools": "workspace:0.9.12",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.41.5",

examples/pets/CHANGELOG.md

@@ -1,5 +1,30 @@
 # jazz-example-pets
 
+## 0.0.150
+
+### Patch Changes
+
+- jazz-react@0.9.12
+- jazz-tools@0.9.12
+- jazz-browser-media-images@0.9.12
+
+## 0.0.149
+
+### Patch Changes
+
+- jazz-react@0.9.11
+- jazz-tools@0.9.11
+- jazz-browser-media-images@0.9.11
+
+## 0.0.148
+
+### Patch Changes
+
+- Updated dependencies [5e83864]
+  - jazz-react@0.9.10
+  - jazz-tools@0.9.10
+  - jazz-browser-media-images@0.9.10
+
 ## 0.0.147
 
 ### Patch Changes

examples/pets/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-pets",
   "private": true,
-  "version": "0.0.147",
+  "version": "0.0.150",
   "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.9.9",
-    "jazz-react": "workspace:0.9.9",
-    "jazz-tools": "workspace:0.9.9",
+    "jazz-browser-media-images": "workspace:0.9.12",
+    "jazz-react": "workspace:0.9.12",
+    "jazz-tools": "workspace:0.9.12",
     "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.9.9",
+    "jazz-run": "workspace:0.9.12",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.4.15",
     "typescript": "~5.6.2",

examples/reactions/CHANGELOG.md

@@ -1,5 +1,30 @@
 # reactions
 
+## 0.0.30
+
+### Patch Changes
+
+- jazz-react@0.9.12
+- jazz-tools@0.9.12
+- jazz-browser-media-images@0.9.12
+
+## 0.0.29
+
+### Patch Changes
+
+- jazz-react@0.9.11
+- jazz-tools@0.9.11
+- jazz-browser-media-images@0.9.11
+
+## 0.0.28
+
+### Patch Changes
+
+- Updated dependencies [5e83864]
+  - jazz-react@0.9.10
+  - jazz-tools@0.9.10
+  - jazz-browser-media-images@0.9.10
+
 ## 0.0.27
 
 ### Patch Changes

examples/reactions/package.json

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

examples/todo-vue/CHANGELOG.md

@@ -1,5 +1,30 @@
 # todo-vue
 
+## 0.0.35
+
+### Patch Changes
+
+- jazz-browser@0.9.12
+- jazz-tools@0.9.12
+- jazz-vue@0.9.12
+
+## 0.0.34
+
+### Patch Changes
+
+- jazz-browser@0.9.11
+- jazz-tools@0.9.11
+- jazz-vue@0.9.11
+
+## 0.0.33
+
+### Patch Changes
+
+- Updated dependencies [5e83864]
+  - jazz-tools@0.9.10
+  - jazz-browser@0.9.10
+  - jazz-vue@0.9.10
+
 ## 0.0.32
 
 ### Patch Changes

examples/todo-vue/package.json

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

examples/todo/CHANGELOG.md

@@ -1,5 +1,27 @@
 # jazz-example-todo
 
+## 0.0.149
+
+### Patch Changes
+
+- jazz-react@0.9.12
+- jazz-tools@0.9.12
+
+## 0.0.148
+
+### Patch Changes
+
+- jazz-react@0.9.11
+- jazz-tools@0.9.11
+
+## 0.0.147
+
+### Patch Changes
+
+- Updated dependencies [5e83864]
+  - jazz-react@0.9.10
+  - jazz-tools@0.9.10
+
 ## 0.0.146
 
 ### Patch Changes

examples/todo/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-todo",
   "private": true,
-  "version": "0.0.146",
+  "version": "0.0.149",
   "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.9.9",
-    "jazz-tools": "workspace:0.9.9",
+    "jazz-react": "workspace:0.9.12",
+    "jazz-tools": "workspace:0.9.12",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.3.1",

examples/version-history/CHANGELOG.md

@@ -1,5 +1,27 @@
 # version-history
 
+## 0.0.27
+
+### Patch Changes
+
+- jazz-react@0.9.12
+- jazz-tools@0.9.12
+
+## 0.0.26
+
+### Patch Changes
+
+- jazz-react@0.9.11
+- jazz-tools@0.9.11
+
+## 0.0.25
+
+### Patch Changes
+
+- Updated dependencies [5e83864]
+  - jazz-react@0.9.10
+  - jazz-tools@0.9.10
+
 ## 0.0.24
 
 ### Patch Changes

examples/version-history/package.json

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

packages/cojson-storage-indexeddb/CHANGELOG.md

@@ -1,5 +1,30 @@
 # cojson-storage-indexeddb
 
+## 0.9.12
+
+### Patch Changes
+
+- Updated dependencies [15d4b2a]
+  - cojson-storage@0.9.12
+  - cojson@0.9.12
+
+## 0.9.11
+
+### Patch Changes
+
+- Updated dependencies [efbf3d8]
+- Updated dependencies [5863bad]
+  - cojson@0.9.11
+  - cojson-storage@0.9.11
+
+## 0.9.10
+
+### Patch Changes
+
+- Updated dependencies [4aa377d]
+  - cojson@0.9.10
+  - cojson-storage@0.9.10
+
 ## 0.9.9
 
 ### Patch Changes

packages/cojson-storage-indexeddb/package.json

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

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

@@ -1,5 +1,30 @@
 # cojson-storage-sqlite
 
+## 0.8.55
+
+### Patch Changes
+
+- Updated dependencies [15d4b2a]
+  - cojson-storage@0.9.12
+  - cojson@0.9.12
+
+## 0.8.54
+
+### Patch Changes
+
+- Updated dependencies [efbf3d8]
+- Updated dependencies [5863bad]
+  - cojson@0.9.11
+  - cojson-storage@0.9.11
+
+## 0.8.53
+
+### Patch Changes
+
+- Updated dependencies [4aa377d]
+  - cojson@0.9.10
+  - cojson-storage@0.9.10
+
 ## 0.8.52
 
 ### Patch Changes

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

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

packages/cojson-storage-sqlite/CHANGELOG.md

@@ -1,5 +1,32 @@
 # cojson-storage-sqlite
 
+## 0.9.12
+
+### Patch Changes
+
+- 15d4b2a: Revert the custom logger
+- Updated dependencies [15d4b2a]
+  - cojson-storage@0.9.12
+  - cojson@0.9.12
+
+## 0.9.11
+
+### Patch Changes
+
+- 5863bad: Wrap all the console logs with a logger class to make possible to customize the logger
+- Updated dependencies [efbf3d8]
+- Updated dependencies [5863bad]
+  - cojson@0.9.11
+  - cojson-storage@0.9.11
+
+## 0.9.10
+
+### Patch Changes
+
+- Updated dependencies [4aa377d]
+  - cojson@0.9.10
+  - cojson-storage@0.9.10
+
 ## 0.9.9
 
 ### Patch Changes

packages/cojson-storage-sqlite/package.json

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

packages/cojson-storage/CHANGELOG.md

@@ -1,5 +1,29 @@
 # cojson-storage
 
+## 0.9.12
+
+### Patch Changes
+
+- 15d4b2a: Revert the custom logger
+- Updated dependencies [15d4b2a]
+  - cojson@0.9.12
+
+## 0.9.11
+
+### Patch Changes
+
+- 5863bad: Wrap all the console logs with a logger class to make possible to customize the logger
+- Updated dependencies [efbf3d8]
+- Updated dependencies [5863bad]
+  - cojson@0.9.11
+
+## 0.9.10
+
+### Patch Changes
+
+- Updated dependencies [4aa377d]
+  - cojson@0.9.10
+
 ## 0.9.9
 
 ### Patch Changes

packages/cojson-storage/package.json

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

packages/cojson-transport-ws/CHANGELOG.md

@@ -1,5 +1,29 @@
 # cojson-transport-nodejs-ws
 
+## 0.9.12
+
+### Patch Changes
+
+- 15d4b2a: Revert the custom logger
+- Updated dependencies [15d4b2a]
+  - cojson@0.9.12
+
+## 0.9.11
+
+### Patch Changes
+
+- 5863bad: Wrap all the console logs with a logger class to make possible to customize the logger
+- Updated dependencies [efbf3d8]
+- Updated dependencies [5863bad]
+  - cojson@0.9.11
+
+## 0.9.10
+
+### Patch Changes
+
+- Updated dependencies [4aa377d]
+  - cojson@0.9.10
+
 ## 0.9.9
 
 ### Patch Changes

packages/cojson-transport-ws/package.json

@@ -1,12 +1,12 @@
 {
   "name": "cojson-transport-ws",
   "type": "module",
-  "version": "0.9.9",
+  "version": "0.9.12",
   "main": "dist/index.js",
   "types": "src/index.ts",
   "license": "MIT",
   "dependencies": {
-    "cojson": "workspace:0.9.9",
+    "cojson": "workspace:0.9.12",
     "typescript": "~5.6.2"
   },
   "scripts": {

packages/cojson/CHANGELOG.md

@@ -1,5 +1,24 @@
 # cojson
 
+## 0.9.12
+
+### Patch Changes
+
+- 15d4b2a: Revert the custom logger
+
+## 0.9.11
+
+### Patch Changes
+
+- efbf3d8: Optimize queue management
+- 5863bad: Wrap all the console logs with a logger class to make possible to customize the logger
+
+## 0.9.10
+
+### Patch Changes
+
+- 4aa377d: Handle unkown coValue content type and optimize content access
+
 ## 0.9.9
 
 ### Patch Changes

packages/cojson/package.json

@@ -24,7 +24,7 @@
   },
   "type": "module",
   "license": "MIT",
-  "version": "0.9.9",
+  "version": "0.9.12",
   "devDependencies": {
     "@opentelemetry/sdk-metrics": "^1.29.0",
     "@types/jest": "^29.5.3",

packages/cojson/src/coValue.ts

@@ -35,6 +35,43 @@ export interface RawCoValue {
   subscribe(listener: (coValue: this) => void): () => void;
 }
 
+export class RawUnknownCoValue implements RawCoValue {
+  id: CoID<this>;
+  core: CoValueCore;
+
+  constructor(core: CoValueCore) {
+    this.id = core.id as CoID<this>;
+    this.core = core;
+  }
+
+  get type() {
+    return this.core.header.type;
+  }
+
+  get headerMeta() {
+    return this.core.header.meta as JsonObject;
+  }
+
+  /** @category 6. Meta */
+  get group(): RawGroup {
+    return this.core.getGroup();
+  }
+
+  toJSON() {
+    return {};
+  }
+
+  atTime() {
+    return this;
+  }
+
+  subscribe(listener: (value: this) => void): () => void {
+    return this.core.subscribe((content) => {
+      listener(content as this);
+    });
+  }
+}
+
 export type AnyRawCoValue =
   | RawCoMap
   | RawGroup

packages/cojson/src/coValueCore.ts

@@ -126,10 +126,7 @@ export class CoValueCore {
         .expectCoValueLoaded(header.ruleset.group)
         .subscribe((_groupUpdate) => {
           this._cachedContent = undefined;
-          const newContent = this.getCurrentContent();
-          for (const listener of this.listeners) {
-            listener(newContent);
-          }
+          this.notifyUpdate("immediate");
         });
     }
   }
@@ -244,11 +241,6 @@ export class CoValueCore {
             signerID,
           } satisfies InvalidSignatureError);
         }
-        // const afterVerify = performance.now();
-        // console.log(
-        //     "Verify took",
-        //     afterVerify - beforeVerify
-        // );
 
         this.doAddTransactions(
           sessionID,
@@ -263,138 +255,6 @@ export class CoValueCore {
       });
   }
 
-  /*tryAddTransactionsAsync(
-        sessionID: SessionID,
-        newTransactions: Transaction[],
-        givenExpectedNewHash: Hash | undefined,
-        newSignature: Signature,
-    ): ResultAsync<true, TryAddTransactionsError> {
-        const currentAsyncAddTransaction = this._currentAsyncAddTransaction;
-        let maybeAwaitPrevious:
-            | ResultAsync<void, TryAddTransactionsError>
-            | undefined;
-        let thisDone = () => {};
-
-        if (currentAsyncAddTransaction) {
-            // eslint-disable-next-line neverthrow/must-use-result
-            maybeAwaitPrevious = ResultAsync.fromSafePromise(
-                currentAsyncAddTransaction,
-            );
-        } else {
-            // eslint-disable-next-line neverthrow/must-use-result
-            maybeAwaitPrevious = ResultAsync.fromSafePromise(Promise.resolve());
-            this._currentAsyncAddTransaction = new Promise((resolve) => {
-                thisDone = resolve;
-            });
-        }
-
-        return maybeAwaitPrevious
-            .andThen((_previousDone) =>
-                this.node
-                    .resolveAccountAgentAsync(
-                        accountOrAgentIDfromSessionID(sessionID),
-                        "Expected to know signer of transaction",
-                    )
-                    .andThen((agent) => {
-                        const signerID = this.crypto.getAgentSignerID(agent);
-
-                        const nTxBefore =
-                            this.sessionLogs.get(sessionID)?.transactions
-                                .length ?? 0;
-
-                        // const beforeHash = performance.now();
-                        return ResultAsync.fromSafePromise(
-                            this.expectedNewHashAfterAsync(
-                                sessionID,
-                                newTransactions,
-                            ),
-                        ).andThen(({ expectedNewHash, newStreamingHash }) => {
-                            // const afterHash = performance.now();
-                            // console.log(
-                            //     "Hashing took",
-                            //     afterHash - beforeHash
-                            // );
-
-                            const nTxAfter =
-                                this.sessionLogs.get(sessionID)?.transactions
-                                    .length ?? 0;
-
-                            if (nTxAfter !== nTxBefore) {
-                                const newTransactionLengthBefore =
-                                    newTransactions.length;
-                                newTransactions = newTransactions.slice(
-                                    nTxAfter - nTxBefore,
-                                );
-                                console.warn(
-                                    "Transactions changed while async hashing",
-                                    {
-                                        nTxBefore,
-                                        nTxAfter,
-                                        newTransactionLengthBefore,
-                                        remainingNewTransactions:
-                                            newTransactions.length,
-                                    },
-                                );
-                            }
-
-                            if (
-                                givenExpectedNewHash &&
-                                givenExpectedNewHash !== expectedNewHash
-                            ) {
-                                return err({
-                                    type: "InvalidHash",
-                                    id: this.id,
-                                    expectedNewHash,
-                                    givenExpectedNewHash,
-                                } satisfies InvalidHashError);
-                            }
-
-                            performance.mark("verifyStart" + this.id);
-                            if (
-                                !this.crypto.verify(
-                                    newSignature,
-                                    expectedNewHash,
-                                    signerID,
-                                )
-                            ) {
-                                return err({
-                                    type: "InvalidSignature",
-                                    id: this.id,
-                                    newSignature,
-                                    sessionID,
-                                    signerID,
-                                } satisfies InvalidSignatureError);
-                            }
-                            performance.mark("verifyEnd" + this.id);
-                            performance.measure(
-                                "verify" + this.id,
-                                "verifyStart" + this.id,
-                                "verifyEnd" + this.id,
-                            );
-
-                            this.doAddTransactions(
-                                sessionID,
-                                newTransactions,
-                                newSignature,
-                                expectedNewHash,
-                                newStreamingHash,
-                                "deferred",
-                            );
-
-                            return ok(true as const);
-                        });
-                    }),
-            )
-            .map((trueResult) => {
-                thisDone();
-                return trueResult;
-            })
-            .mapErr((err) => {
-                thisDone();
-                return err;
-            });
-    }*/
-
   private doAddTransactions(
     sessionID: SessionID,
     newTransactions: Transaction[],
@@ -432,12 +292,6 @@ export class CoValueCore {
       );
 
     if (sizeOfTxsSinceLastInbetweenSignature > MAX_RECOMMENDED_TX_SIZE) {
-      // console.log(
-      //     "Saving inbetween signature for tx ",
-      //     sessionID,
-      //     transactions.length - 1,
-      //     sizeOfTxsSinceLastInbetweenSignature
-      // );
       signatureAfter[transactions.length - 1] = newSignature;
     }
 
@@ -463,34 +317,40 @@ export class CoValueCore {
     this._cachedDependentOn = undefined;
     this._cachedNewContentSinceEmpty = undefined;
 
-    if (this.listeners.size > 0) {
-      if (notifyMode === "immediate") {
-        const content = this.getCurrentContent();
-        for (const listener of this.listeners) {
-          listener(content);
-        }
-      } else {
-        if (!this.nextDeferredNotify) {
-          this.nextDeferredNotify = new Promise((resolve) => {
-            setTimeout(() => {
-              this.nextDeferredNotify = undefined;
-              this.deferredUpdates = 0;
-              const content = this.getCurrentContent();
-              for (const listener of this.listeners) {
-                listener(content);
-              }
-              resolve();
-            }, 0);
-          });
-        }
-        this.deferredUpdates++;
-      }
-    }
+    this.notifyUpdate(notifyMode);
   }
 
   deferredUpdates = 0;
   nextDeferredNotify: Promise<void> | undefined;
 
+  notifyUpdate(notifyMode: "immediate" | "deferred") {
+    if (this.listeners.size === 0) {
+      return;
+    }
+
+    if (notifyMode === "immediate") {
+      const content = this.getCurrentContent();
+      for (const listener of this.listeners) {
+        listener(content);
+      }
+    } else {
+      if (!this.nextDeferredNotify) {
+        this.nextDeferredNotify = new Promise((resolve) => {
+          setTimeout(() => {
+            this.nextDeferredNotify = undefined;
+            this.deferredUpdates = 0;
+            const content = this.getCurrentContent();
+            for (const listener of this.listeners) {
+              listener(content);
+            }
+            resolve();
+          }, 0);
+        });
+      }
+      this.deferredUpdates++;
+    }
+  }
+
   subscribe(listener: (content?: RawCoValue) => void): () => void {
     this.listeners.add(listener);
     listener(this.getCurrentContent());

packages/cojson/src/coreToCoValue.ts

@@ -1,3 +1,4 @@
+import { RawUnknownCoValue } from "./coValue.js";
 import type { CoValueCore } from "./coValueCore.js";
 import { RawAccount, RawControlledAccount } from "./coValues/account.js";
 import { RawCoList } from "./coValues/coList.js";
@@ -38,6 +39,6 @@ export function coreToCoValue(
       return new RawCoStream(core);
     }
   } else {
-    throw new Error(`Unknown coValue type ${core.header.type}`);
+    return new RawUnknownCoValue(core);
   }
 }

packages/cojson/src/tests/coValueCore.test.ts

@@ -1,11 +1,14 @@
 import { expect, test, vi } from "vitest";
-import { Transaction } from "../coValueCore.js";
+import { CoValueCore, Transaction } from "../coValueCore.js";
 import { MapOpPayload } from "../coValues/coMap.js";
 import { WasmCrypto } from "../crypto/WasmCrypto.js";
 import { stableStringify } from "../jsonStringify.js";
 import { LocalNode } from "../localNode.js";
 import { Role } from "../permissions.js";
-import { randomAnonymousAccountAndSessionID } from "./testUtils.js";
+import {
+  createTestNode,
+  randomAnonymousAccountAndSessionID,
+} from "./testUtils.js";
 
 const Crypto = await WasmCrypto.create();
 
@@ -191,3 +194,30 @@ test("New transactions in a group correctly update owned values, including subsc
 
   expect(map.core.getValidSortedTransactions().length).toBe(0);
 });
+
+test("creating a coValue with a group should't trigger automatically a content creation (performance)", () => {
+  const node = createTestNode();
+
+  const group = node.createGroup();
+
+  const getCurrentContentSpy = vi.spyOn(
+    CoValueCore.prototype,
+    "getCurrentContent",
+  );
+  const groupSpy = vi.spyOn(group.core, "getCurrentContent");
+
+  getCurrentContentSpy.mockClear();
+
+  node.createCoValue({
+    type: "comap",
+    ruleset: { type: "ownedByGroup", group: group.id },
+    meta: null,
+    ...Crypto.createdNowUnique(),
+  });
+
+  // It's called once for the group and never for the coValue
+  expect(getCurrentContentSpy).toHaveBeenCalledTimes(1);
+  expect(groupSpy).toHaveBeenCalledTimes(1);
+
+  getCurrentContentSpy.mockRestore();
+});

packages/cojson/src/tests/sync.test.ts

@@ -1985,6 +1985,25 @@ describe("waitForSyncWithPeer", () => {
   });
 });
 
+test("Should not crash when syncing an unknown coValue type", async () => {
+  const { client, jazzCloud } = createTwoConnectedNodes();
+
+  const coValue = client.createCoValue({
+    type: "ooops" as any,
+    ruleset: { type: "unsafeAllowAll" },
+    meta: null,
+    ...Crypto.createdNowUnique(),
+  });
+
+  await coValue.waitForSync();
+
+  const coValueOnTheOtherNode = await loadCoValueOrFail(
+    jazzCloud,
+    coValue.getCurrentContent().id,
+  );
+  expect(coValueOnTheOtherNode.id).toBe(coValue.id);
+});
+
 describe("metrics", () => {
   afterEach(() => {
     tearDownTestMetricReader();

packages/jazz-browser-auth-clerk/CHANGELOG.md

@@ -1,5 +1,34 @@
 # jazz-browser-media-images
 
+## 0.9.12
+
+### Patch Changes
+
+- Updated dependencies [15d4b2a]
+  - cojson@0.9.12
+  - jazz-browser@0.9.12
+  - jazz-tools@0.9.12
+
+## 0.9.11
+
+### Patch Changes
+
+- Updated dependencies [efbf3d8]
+- Updated dependencies [5863bad]
+  - cojson@0.9.11
+  - jazz-browser@0.9.11
+  - jazz-tools@0.9.11
+
+## 0.9.10
+
+### Patch Changes
+
+- Updated dependencies [4aa377d]
+- Updated dependencies [5e83864]
+  - cojson@0.9.10
+  - jazz-tools@0.9.10
+  - jazz-browser@0.9.10
+
 ## 0.9.9
 
 ### Patch Changes

packages/jazz-browser-auth-clerk/package.json

@@ -1,14 +1,14 @@
 {
   "name": "jazz-browser-auth-clerk",
-  "version": "0.9.9",
+  "version": "0.9.12",
   "type": "module",
   "main": "dist/index.js",
   "types": "src/index.ts",
   "license": "MIT",
   "dependencies": {
-    "cojson": "workspace:0.9.9",
-    "jazz-browser": "workspace:0.9.9",
-    "jazz-tools": "workspace:0.9.9"
+    "cojson": "workspace:0.9.12",
+    "jazz-browser": "workspace:0.9.12",
+    "jazz-tools": "workspace:0.9.12"
   },
   "scripts": {
     "format-and-lint": "biome check .",

packages/jazz-browser-media-images/CHANGELOG.md

@@ -1,5 +1,27 @@
 # jazz-browser-media-images
 
+## 0.9.12
+
+### Patch Changes
+
+- jazz-browser@0.9.12
+- jazz-tools@0.9.12
+
+## 0.9.11
+
+### Patch Changes
+
+- jazz-browser@0.9.11
+- jazz-tools@0.9.11
+
+## 0.9.10
+
+### Patch Changes
+
+- Updated dependencies [5e83864]
+  - jazz-tools@0.9.10
+  - jazz-browser@0.9.10
+
 ## 0.9.9
 
 ### Patch Changes

packages/jazz-browser-media-images/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jazz-browser-media-images",
-  "version": "0.9.9",
+  "version": "0.9.12",
   "type": "module",
   "main": "dist/index.js",
   "types": "src/index.ts",
@@ -8,8 +8,8 @@
   "dependencies": {
     "@types/image-blob-reduce": "^4.1.1",
     "image-blob-reduce": "^4.1.0",
-    "jazz-browser": "workspace:0.9.9",
-    "jazz-tools": "workspace:0.9.9",
+    "jazz-browser": "workspace:0.9.12",
+    "jazz-tools": "workspace:0.9.12",
     "pica": "^9.0.1",
     "typescript": "~5.6.2"
   },

packages/jazz-browser/CHANGELOG.md

@@ -1,5 +1,37 @@
 # jazz-browser
 
+## 0.9.12
+
+### Patch Changes
+
+- Updated dependencies [15d4b2a]
+  - cojson-transport-ws@0.9.12
+  - cojson@0.9.12
+  - cojson-storage-indexeddb@0.9.12
+  - jazz-tools@0.9.12
+
+## 0.9.11
+
+### Patch Changes
+
+- Updated dependencies [efbf3d8]
+- Updated dependencies [5863bad]
+  - cojson@0.9.11
+  - cojson-transport-ws@0.9.11
+  - cojson-storage-indexeddb@0.9.11
+  - jazz-tools@0.9.11
+
+## 0.9.10
+
+### Patch Changes
+
+- Updated dependencies [4aa377d]
+- Updated dependencies [5e83864]
+  - cojson@0.9.10
+  - jazz-tools@0.9.10
+  - cojson-storage-indexeddb@0.9.10
+  - cojson-transport-ws@0.9.10
+
 ## 0.9.9
 
 ### Patch Changes

packages/jazz-browser/package.json

@@ -1,16 +1,16 @@
 {
   "name": "jazz-browser",
-  "version": "0.9.9",
+  "version": "0.9.12",
   "type": "module",
   "main": "dist/index.js",
   "types": "src/index.ts",
   "license": "MIT",
   "dependencies": {
     "@scure/bip39": "^1.3.0",
-    "cojson": "workspace:0.9.9",
-    "cojson-storage-indexeddb": "workspace:0.9.9",
-    "cojson-transport-ws": "workspace:0.9.9",
-    "jazz-tools": "workspace:0.9.9",
+    "cojson": "workspace:0.9.12",
+    "cojson-storage-indexeddb": "workspace:0.9.12",
+    "cojson-transport-ws": "workspace:0.9.12",
+    "jazz-tools": "workspace:0.9.12",
     "typescript": "~5.6.2"
   },
   "scripts": {

packages/jazz-inspector/.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+sync-db/

packages/jazz-inspector/CHANGELOG.md

@@ -0,0 +1,20 @@
+# jazz-inspector
+
+## 0.9.12
+
+### Patch Changes
+
+- Updated dependencies [15d4b2a]
+  - cojson@0.9.12
+  - jazz-react-core@0.8.53
+  - jazz-tools@0.9.12
+
+## 0.9.11
+
+### Patch Changes
+
+- Updated dependencies [efbf3d8]
+- Updated dependencies [5863bad]
+  - cojson@0.9.11
+  - jazz-react-core@0.8.52
+  - jazz-tools@0.9.11

packages/jazz-inspector/README.md

@@ -0,0 +1,5 @@
+# Jazz Inspector
+
+Use this to visually inspect a Jazz account or other CoValue.
+
+Still unstable, you will very likely encounter bugs.

packages/jazz-inspector/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "jazz-inspector",
+  "version": "0.9.12",
+  "type": "module",
+  "main": "./dist/jazz-inspector.js",
+  "types": "./src/app.tsx",
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "tsc && vite build",
+    "format-and-lint": "biome check .",
+    "format-and-lint:fix": "biome check . --write",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "cojson": "workspace:*",
+    "jazz-react-core": "workspace:*",
+    "jazz-tools": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "rollup-plugin-node-externals": "^8.0.0",
+    "typescript": "~5.6.2",
+    "vite": "^5.4.10"
+  }
+}

packages/jazz-inspector/src/app.tsx

@@ -0,0 +1 @@
+export { JazzInspector } from "./viewer/new-app.tsx";

packages/jazz-inspector/src/link-icon.tsx

@@ -0,0 +1,18 @@
+export function LinkIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="w-3 h-3"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
+      />
+    </svg>
+  );
+}

packages/jazz-inspector/src/viewer/breadcrumbs.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import { PageInfo } from "./types.ts";
+
+interface BreadcrumbsProps {
+  path: PageInfo[];
+  onBreadcrumbClick: (index: number) => void;
+}
+
+export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
+  path,
+  onBreadcrumbClick,
+}) => {
+  return (
+    <div
+      style={{
+        position: "relative",
+        zIndex: 20,
+        backgroundColor: "rgba(129, 140, 248, 0.1)", // indigo-400/10 equivalent
+        backdropFilter: "blur(4px)",
+        borderRadius: "0.5rem",
+        display: "inline-flex",
+        paddingLeft: "0.5rem",
+        paddingRight: "0.5rem",
+        paddingTop: "0.25rem",
+        paddingBottom: "0.25rem",
+        whiteSpace: "pre",
+        transition: "all",
+        alignItems: "center",
+        gap: "0.25rem",
+        minHeight: "2.5rem",
+      }}
+    >
+      <button
+        onClick={() => onBreadcrumbClick(-1)}
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "0.25rem",
+          borderRadius: "0.125rem",
+          transition: "colors",
+        }}
+        onMouseOver={(e) =>
+          (e.currentTarget.style.backgroundColor = "rgba(99, 102, 241, 0.1)")
+        }
+        onMouseOut={(e) =>
+          (e.currentTarget.style.backgroundColor = "transparent")
+        }
+        aria-label="Go to home"
+      >
+        Start
+      </button>
+      {path.map((page, index) => {
+        return (
+          <span
+            key={index}
+            style={{
+              display: "inline-block",
+              paddingLeft: index === 0 ? "0.25rem" : "0",
+              paddingRight: index === path.length - 1 ? "0.25rem" : "0",
+            }}
+          >
+            {index === 0 ? null : (
+              <span style={{ color: "rgba(99, 102, 241, 0.3)" }}>{" / "}</span>
+            )}
+            <button
+              onClick={() => onBreadcrumbClick(index)}
+              style={{
+                color: "rgb(67, 56, 202)",
+              }}
+              onMouseOver={(e) =>
+                (e.currentTarget.style.textDecoration = "underline")
+              }
+              onMouseOut={(e) =>
+                (e.currentTarget.style.textDecoration = "none")
+              }
+            >
+              {index === 0 ? page.name || "Root" : page.name}
+            </button>
+          </span>
+        );
+      })}
+    </div>
+  );
+};

packages/jazz-inspector/src/viewer/co-stream-view.tsx

@@ -0,0 +1,389 @@
+import {
+  CoID,
+  LocalNode,
+  RawBinaryCoStream,
+  RawCoStream,
+  RawCoValue,
+} from "cojson";
+import { base64URLtoBytes } from "cojson/src/base64url.ts";
+import {
+  BinaryStreamItem,
+  BinaryStreamStart,
+  CoStreamItem,
+} from "cojson/src/coValues/coStream.ts";
+import type { JsonObject, JsonValue } from "cojson/src/jsonValue.ts";
+import { useEffect, useState } from "react";
+import { PageInfo } from "./types.ts";
+import { AccountOrGroupPreview } from "./value-renderer.tsx";
+
+// typeguard for BinaryStreamStart
+function isBinaryStreamStart(item: unknown): item is BinaryStreamStart {
+  return (
+    typeof item === "object" &&
+    item !== null &&
+    "type" in item &&
+    item.type === "start"
+  );
+}
+
+function detectCoStreamType(value: RawCoStream | RawBinaryCoStream) {
+  const firstKey = Object.keys(value.items)[0];
+  if (!firstKey)
+    return {
+      type: "unknown",
+    };
+
+  const items = value.items[firstKey as never]?.map((v) => v.value);
+
+  if (!items)
+    return {
+      type: "unknown",
+    };
+  const firstItem = items[0];
+  if (!firstItem)
+    return {
+      type: "unknown",
+    };
+  // This is a binary stream
+  if (isBinaryStreamStart(firstItem)) {
+    return {
+      type: "binary",
+      items: items as BinaryStreamItem[],
+    };
+  } else {
+    return {
+      type: "coStream",
+    };
+  }
+}
+
+async function getBlobFromCoStream({
+  items,
+  onlyFirstChunk = false,
+}: {
+  items: BinaryStreamItem[];
+  onlyFirstChunk?: boolean;
+}) {
+  if (onlyFirstChunk && items.length > 1) {
+    items = items.slice(0, 2);
+  }
+
+  const chunks: Uint8Array[] = [];
+
+  const binary_U_prefixLength = 8;
+
+  let lastProgressUpdate = Date.now();
+
+  for (const item of items.slice(1)) {
+    if (item.type === "end") {
+      break;
+    }
+
+    if (item.type !== "chunk") {
+      console.error("Invalid binary stream chunk", item);
+      return undefined;
+    }
+
+    const chunk = base64URLtoBytes(item.chunk.slice(binary_U_prefixLength));
+    // totalLength += chunk.length;
+    chunks.push(chunk);
+
+    if (Date.now() - lastProgressUpdate > 100) {
+      lastProgressUpdate = Date.now();
+    }
+  }
+  const defaultMime = "mimeType" in items[0] ? items[0].mimeType : null;
+
+  const blob = new Blob(chunks, defaultMime ? { type: defaultMime } : {});
+
+  const mimeType =
+    defaultMime === "" ? await detectPDFMimeType(blob) : defaultMime;
+
+  return {
+    blob,
+    mimeType: mimeType as string,
+    unfinishedChunks: items.length > 1,
+    totalSize:
+      "totalSizeBytes" in items[0]
+        ? (items[0].totalSizeBytes as number)
+        : undefined,
+  };
+}
+
+const detectPDFMimeType = async (blob: Blob): Promise<string> => {
+  const arrayBuffer = await blob.slice(0, 4).arrayBuffer();
+  const uint8Array = new Uint8Array(arrayBuffer);
+  const header = uint8Array.reduce(
+    (acc, byte) => acc + String.fromCharCode(byte),
+    "",
+  );
+
+  if (header === "%PDF") {
+    return "application/pdf";
+  }
+  return "application/octet-stream";
+};
+
+const BinaryDownloadButton = ({
+  pdfBlob,
+  fileName = "document",
+  label,
+  mimeType,
+}: {
+  pdfBlob: Blob;
+  mimeType?: string;
+  fileName?: string;
+  label: string;
+}) => {
+  const downloadFile = () => {
+    const url = URL.createObjectURL(
+      new Blob([pdfBlob], mimeType ? { type: mimeType } : {}),
+    );
+    const link = document.createElement("a");
+    link.href = url;
+    link.download =
+      mimeType === "application/pdf" ? `${fileName}.pdf` : fileName;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <button onClick={downloadFile}>
+      ⬇️ {label}
+      {/* Download {mimeType === "application/pdf" ? "PDF" : "File"} */}
+    </button>
+  );
+};
+
+const LabelContentPair = ({
+  label,
+  content,
+}: {
+  label: string;
+  content: React.ReactNode;
+}) => {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "0.375rem" }}>
+      <span>{label}</span>
+      <span>{content}</span>
+    </div>
+  );
+};
+
+function RenderCoBinaryStream({
+  value,
+  items,
+}: {
+  items: BinaryStreamItem[];
+  value: RawBinaryCoStream;
+}) {
+  const [file, setFile] = useState<
+    | {
+        blob: Blob;
+        mimeType: string;
+        unfinishedChunks: boolean;
+        totalSize: number | undefined;
+      }
+    | undefined
+    | null
+  >(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    // load only the first chunk to get the mime type and size
+    getBlobFromCoStream({
+      items,
+      onlyFirstChunk: true,
+    })
+      .then((v) => {
+        if (v) {
+          setFile(v);
+          if (v.mimeType.includes("image")) {
+            // If it's an image, load the full blob
+            getBlobFromCoStream({
+              items,
+            }).then((s) => {
+              if (s) setFile(s);
+            });
+          }
+        }
+      })
+      .finally(() => setIsLoading(false));
+  }, [items]);
+
+  if (!isLoading && !file) return <div>No blob</div>;
+
+  if (isLoading) return <div>Loading...</div>;
+  if (!file) return <div>No blob</div>;
+
+  const { blob, mimeType } = file;
+
+  const sizeInKB = (file.totalSize || 0) / 1024;
+
+  return (
+    <div
+      style={{
+        marginTop: "2rem",
+        display: "flex",
+        flexDirection: "column",
+        gap: "2rem",
+      }}
+    >
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(3, 1fr)",
+          gap: "0.5rem",
+          maxWidth: "48rem",
+        }}
+      >
+        <LabelContentPair
+          label="Mime Type"
+          content={
+            <span
+              style={{
+                fontFamily: "monospace",
+                backgroundColor: "rgb(243 244 246)",
+                borderRadius: "0.25rem",
+                padding: "0.25rem 0.5rem",
+                fontSize: "0.875rem",
+              }}
+            >
+              {mimeType || "No mime type"}
+            </span>
+          }
+        />
+        <LabelContentPair
+          label="Size"
+          content={<span>{sizeInKB.toFixed(2)} KB</span>}
+        />
+        <LabelContentPair
+          label="Download"
+          content={
+            <BinaryDownloadButton
+              fileName={value.id.toString()}
+              pdfBlob={blob}
+              mimeType={mimeType}
+              label={
+                mimeType === "application/pdf"
+                  ? "Download PDF"
+                  : "Download File"
+              }
+            />
+          }
+        />
+      </div>
+      {mimeType === "image/png" || mimeType === "image/jpeg" ? (
+        <LabelContentPair
+          label="Preview"
+          content={
+            <div
+              style={{
+                backgroundColor: "rgb(249 250 251)",
+                padding: "0.75rem",
+                borderRadius: "0.125rem",
+              }}
+            >
+              <RenderBlobImage blob={blob} />
+            </div>
+          }
+        />
+      ) : null}
+    </div>
+  );
+}
+
+function RenderCoStream({
+  value,
+  node,
+}: {
+  value: RawCoStream;
+  node: LocalNode;
+}) {
+  const streamPerUser = Object.keys(value.items);
+  const userCoIds = streamPerUser.map((stream) => stream.split("_session")[0]);
+
+  return (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(3, 1fr)",
+        gap: "0.5rem",
+      }}
+    >
+      {userCoIds.map((id, idx) => (
+        <div
+          style={{
+            padding: "0.75rem",
+            borderRadius: "0.5rem",
+            overflow: "hidden",
+            backgroundColor: "white",
+            border: "1px solid #e5e7eb",
+            cursor: "pointer",
+            boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+            transition: "background-color 0.2s",
+          }}
+          onMouseOver={(e) =>
+            (e.currentTarget.style.backgroundColor =
+              "rgba(243, 244, 246, 0.05)")
+          }
+          onMouseOut={(e) => (e.currentTarget.style.backgroundColor = "white")}
+          key={id}
+        >
+          <AccountOrGroupPreview coId={id as CoID<RawCoValue>} node={node} />
+          {/* @ts-expect-error - TODO: fix types */}
+          {value.items[streamPerUser[idx]]?.map(
+            (item: CoStreamItem<JsonValue>) => (
+              <div>
+                {new Date(item.madeAt).toLocaleString()}{" "}
+                {JSON.stringify(item.value)}
+              </div>
+            ),
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function CoStreamView({
+  value,
+  node,
+}: {
+  data: JsonObject;
+  onNavigate: (pages: PageInfo[]) => void;
+  node: LocalNode;
+  value: RawCoStream;
+}) {
+  // if (!value) return <div>No value</div>;
+
+  const streamType = detectCoStreamType(value);
+
+  if (streamType.type === "binary") {
+    if (streamType.items === undefined) {
+      return <div>No binary stream</div>;
+    }
+
+    return (
+      <RenderCoBinaryStream
+        value={value as RawBinaryCoStream}
+        items={streamType.items}
+      />
+    );
+  }
+
+  if (streamType.type === "coStream") {
+    return <RenderCoStream value={value} node={node} />;
+  }
+
+  if (streamType.type === "unknown") return <div>Unknown stream type</div>;
+
+  return <div>Unknown stream type</div>;
+}
+
+function RenderBlobImage({ blob }: { blob: Blob }) {
+  const urlCreator = window.URL || window.webkitURL;
+  return <img src={urlCreator.createObjectURL(blob)} />;
+}

packages/jazz-inspector/src/viewer/grid-view.tsx

@@ -0,0 +1,103 @@
+import { CoID, LocalNode, RawCoValue } from "cojson";
+import { JsonObject } from "cojson/src/jsonValue.ts";
+import { ResolveIcon } from "./type-icon.tsx";
+import { PageInfo, isCoId } from "./types.ts";
+import { CoMapPreview, ValueRenderer } from "./value-renderer.tsx";
+
+export function GridView({
+  data,
+  onNavigate,
+  node,
+}: {
+  data: JsonObject;
+  onNavigate: (pages: PageInfo[]) => void;
+  node: LocalNode;
+}) {
+  const entries = Object.entries(data);
+
+  return (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "1fr",
+        gap: "1rem",
+        padding: "0.5rem",
+      }}
+    >
+      {entries.map(([key, child], childIndex) => (
+        <div
+          key={childIndex}
+          style={{
+            padding: "0.75rem",
+            borderRadius: "0.5rem",
+            overflow: "hidden",
+            transition: "background-color 0.2s",
+            ...(isCoId(child)
+              ? {
+                  backgroundColor: "white",
+                  border: "1px solid #e5e7eb",
+                  cursor: "pointer",
+                  boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+                  ":hover": {
+                    backgroundColor: "rgba(243, 244, 246, 0.05)",
+                  },
+                }
+              : {
+                  backgroundColor: "rgb(249, 250, 251)",
+                }),
+          }}
+          onClick={() =>
+            isCoId(child) &&
+            onNavigate([{ coId: child as CoID<RawCoValue>, name: key }])
+          }
+        >
+          <h3
+            style={{
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+            }}
+          >
+            {isCoId(child) ? (
+              <span
+                style={{
+                  fontWeight: 500,
+                  display: "flex",
+                  justifyContent: "space-between",
+                }}
+              >
+                {key}
+
+                <div
+                  style={{
+                    padding: "0.25rem 0.5rem",
+                    fontSize: "0.75rem",
+                    backgroundColor: "rgb(243, 244, 246)",
+                    borderRadius: "0.25rem",
+                  }}
+                >
+                  <ResolveIcon coId={child as CoID<RawCoValue>} node={node} />
+                </div>
+              </span>
+            ) : (
+              <span>{key}</span>
+            )}
+          </h3>
+          <div style={{ marginTop: "0.5rem", fontSize: "0.875rem" }}>
+            {isCoId(child) ? (
+              <CoMapPreview coId={child as CoID<RawCoValue>} node={node} />
+            ) : (
+              <ValueRenderer
+                json={child}
+                onCoIDClick={(coId) => {
+                  onNavigate([{ coId, name: key }]);
+                }}
+                compact
+              />
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

packages/jazz-inspector/src/viewer/new-app.tsx

@@ -0,0 +1,164 @@
+import { CoID, RawCoValue } from "cojson";
+import { createUseAccountHooks } from "jazz-react-core";
+import React, { useState } from "react";
+import { Breadcrumbs } from "./breadcrumbs.tsx";
+import { PageStack } from "./page-stack.tsx";
+import { usePagePath } from "./use-page-path.ts";
+
+const { useAccount } = createUseAccountHooks();
+
+export function JazzInspector() {
+  const [open, setOpen] = useState(false);
+  const [coValueId, setCoValueId] = useState<CoID<RawCoValue> | "">("");
+  const { path, addPages, goToIndex, goBack, setPage } = usePagePath();
+
+  const { me } = useAccount();
+  const localNode = me._raw.core.node;
+
+  const handleCoValueIdSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (coValueId) {
+      setPage(coValueId);
+    }
+  };
+
+  if (!open) {
+    return (
+      <button
+        onClick={() => setOpen(true)}
+        style={{
+          position: "fixed",
+          bottom: 0,
+          right: 0,
+          margin: "1rem",
+          backgroundColor: "white",
+          border: "1px solid #e5e7eb",
+          borderRadius: "0.5rem",
+          padding: "6px",
+        }}
+      >
+        Jazz Inspector
+      </button>
+    );
+  }
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        bottom: 0,
+        left: 0,
+        width: "100%",
+        backgroundColor: "white",
+        borderTop: "1px solid #e5e7eb",
+        padding: "1rem",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: "1rem",
+        }}
+      >
+        <Breadcrumbs path={path} onBreadcrumbClick={goToIndex} />
+        <button onClick={() => setOpen(false)}>Close</button>
+      </div>
+
+      <PageStack
+        path={path}
+        node={localNode}
+        goBack={goBack}
+        addPages={addPages}
+      >
+        <form
+          onSubmit={handleCoValueIdSubmit}
+          aria-hidden={path.length !== 0}
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+            gap: "0.5rem",
+            height: "100%",
+            width: "100%",
+            marginBottom: "5rem",
+            transition: "all 150ms",
+            opacity: path.length > 0 ? 0 : 1,
+            transform:
+              path.length > 0 ? "translateY(-0.5rem) scale(0.95)" : "none",
+          }}
+        >
+          <fieldset
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: "0.5rem",
+              fontSize: "0.875rem",
+            }}
+          >
+            <h2
+              style={{
+                fontSize: "1.875rem",
+                fontWeight: 500,
+                color: "#030712",
+                textAlign: "center",
+                marginBottom: "1rem",
+              }}
+            >
+              Jazz CoValue Inspector
+            </h2>
+            <input
+              style={{
+                border: "1px solid #e5e7eb",
+                padding: "1rem",
+                borderRadius: "0.5rem",
+                minWidth: "21rem",
+                fontFamily: "monospace",
+              }}
+              placeholder="co_z1234567890abcdef123456789"
+              value={coValueId}
+              onChange={(e) => setCoValueId(e.target.value as CoID<RawCoValue>)}
+            />
+            <button
+              type="submit"
+              style={{
+                backgroundColor: "rgb(99 102 241)",
+                color: "white",
+                padding: "0.5rem 1rem",
+                borderRadius: "0.375rem",
+              }}
+              onMouseOver={(e) =>
+                (e.currentTarget.style.backgroundColor =
+                  "rgba(99 102 241, 0.8)")
+              }
+              onMouseOut={(e) =>
+                (e.currentTarget.style.backgroundColor = "rgb(99 102 241)")
+              }
+            >
+              Inspect
+            </button>
+            <hr />
+            <button
+              type="button"
+              style={{
+                border: "1px solid #e5e7eb",
+                display: "inline-block",
+                padding: "0.375rem 0.5rem",
+                color: "black",
+                borderRadius: "0.375rem",
+              }}
+              onClick={() => {
+                setCoValueId(me._raw.id);
+                setPage(me._raw.id);
+              }}
+            >
+              Inspect My Account
+            </button>
+          </fieldset>
+        </form>
+      </PageStack>
+    </div>
+  );
+}

packages/jazz-inspector/src/viewer/page-stack.tsx

@@ -0,0 +1,74 @@
+import { CoID, LocalNode, RawCoValue } from "cojson";
+import { Page } from "./page.tsx"; // Assuming you have a Page component
+
+// Define the structure of a page in the path
+interface PageInfo {
+  coId: CoID<RawCoValue>;
+  name?: string;
+}
+
+// Props for the PageStack component
+interface PageStackProps {
+  path: PageInfo[];
+  node?: LocalNode | null;
+  goBack: () => void;
+  addPages: (pages: PageInfo[]) => void;
+  children?: React.ReactNode;
+}
+
+export function PageStack({
+  path,
+  node,
+  goBack,
+  addPages,
+  children,
+}: PageStackProps) {
+  const page = path[path.length - 1];
+  const index = path.length - 1;
+
+  return (
+    <div
+      style={{
+        position: "relative",
+        marginTop: "1rem",
+        height: "40vh",
+        overflowY: "auto",
+      }}
+    >
+      {children && (
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            paddingBottom: "5rem",
+          }}
+        >
+          {children}
+        </div>
+      )}
+      {node && page && (
+        <Page
+          coId={page.coId}
+          node={node}
+          name={page.name || page.coId}
+          onHeaderClick={goBack}
+          onNavigate={addPages}
+          isTopLevel={index === path.length - 1}
+          style={{
+            transform: `translateZ(${(index - path.length + 1) * 200}px) scale(${
+              1 - (path.length - index - 1) * 0.05
+            }) translateY(${-(index - path.length + 1) * -4}%)`,
+            opacity: 1 - (path.length - index - 1) * 0.05,
+            zIndex: index,
+            transitionProperty: "transform, opacity",
+            transitionDuration: "0.3s",
+            transitionTimingFunction: "ease-out",
+          }}
+        />
+      )}
+    </div>
+  );
+}

packages/jazz-inspector/src/viewer/page.tsx

@@ -0,0 +1,186 @@
+import { CoID, LocalNode, RawCoStream, RawCoValue } from "cojson";
+import { useEffect, useState } from "react";
+import { CoStreamView } from "./co-stream-view.tsx";
+import { GridView } from "./grid-view.tsx";
+import { TableView } from "./table-viewer.tsx";
+import { TypeIcon } from "./type-icon.tsx";
+import { PageInfo } from "./types.ts";
+import { useResolvedCoValue } from "./use-resolve-covalue.ts";
+import { AccountOrGroupPreview } from "./value-renderer.tsx";
+
+type PageProps = {
+  coId: CoID<RawCoValue>;
+  node: LocalNode;
+  name: string;
+  onNavigate: (newPages: PageInfo[]) => void;
+  onHeaderClick?: () => void;
+  isTopLevel?: boolean;
+  style: React.CSSProperties;
+};
+
+export function Page({
+  coId,
+  node,
+  name,
+  onNavigate,
+  onHeaderClick,
+  style,
+  isTopLevel,
+}: PageProps) {
+  const { value, snapshot, type, extendedType } = useResolvedCoValue(
+    coId,
+    node,
+  );
+  const [viewMode, setViewMode] = useState<"grid" | "table">("grid");
+
+  const supportsTableView = type === "colist" || extendedType === "record";
+
+  // Automatically switch to table view if the page is a CoMap record
+  useEffect(() => {
+    if (supportsTableView) {
+      setViewMode("table");
+    }
+  }, [supportsTableView]);
+
+  if (snapshot === "unavailable") {
+    return <div style={style}>Data unavailable</div>;
+  }
+
+  if (!snapshot) {
+    return <div style={style}></div>;
+  }
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        inset: 0,
+        backgroundColor: "white",
+        borderWidth: "1px",
+        borderColor: "rgba(0, 0, 0, 0.05)",
+        borderRadius: "0.75rem",
+        boxShadow:
+          "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+        padding: "1.5rem",
+        width: "100%",
+        height: "100%",
+        backgroundClip: "padding-box",
+      }}
+    >
+      {!isTopLevel && (
+        <div
+          style={{
+            position: "absolute",
+            left: 0,
+            right: 0,
+            top: 0,
+            height: "2.5rem",
+          }}
+          aria-label="Back"
+          onClick={() => {
+            onHeaderClick?.();
+          }}
+          aria-hidden="true"
+        ></div>
+      )}
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: "1rem",
+        }}
+      >
+        <div
+          style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}
+        >
+          <h2
+            style={{
+              fontSize: "1.5rem",
+              fontWeight: "700",
+              display: "flex",
+              alignItems: "flex-start",
+              flexDirection: "column",
+              gap: "0.25rem",
+            }}
+          >
+            <span>
+              {name}
+              {typeof snapshot === "object" && "name" in snapshot ? (
+                <span style={{ color: "rgb(75, 85, 99)", fontWeight: "500" }}>
+                  {" "}
+                  {(snapshot as { name: string }).name}
+                </span>
+              ) : null}
+            </span>
+          </h2>
+          <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+            <span
+              style={{
+                fontSize: "0.75rem",
+                color: "rgb(55, 65, 81)",
+                fontWeight: "500",
+                padding: "0.125rem 0.25rem",
+                marginLeft: "-0.125rem",
+                borderRadius: "0.25rem",
+                backgroundColor: "rgba(55, 65, 81, 0.05)",
+                display: "inline-block",
+                fontFamily: "monospace",
+              }}
+            >
+              {type && <TypeIcon type={type} extendedType={extendedType} />}
+            </span>
+            <span
+              style={{
+                fontSize: "0.75rem",
+                color: "rgb(55, 65, 81)",
+                fontWeight: "500",
+                padding: "0.125rem 0.25rem",
+                marginLeft: "-0.125rem",
+                borderRadius: "0.25rem",
+                backgroundColor: "rgba(55, 65, 81, 0.05)",
+                display: "inline-block",
+                fontFamily: "monospace",
+              }}
+            >
+              {coId}
+            </span>
+          </div>
+        </div>
+      </div>
+      <div style={{ overflow: "auto", maxHeight: "calc(100% - 4rem)" }}>
+        {type === "costream" ? (
+          <CoStreamView
+            data={snapshot}
+            onNavigate={onNavigate}
+            node={node}
+            value={value as RawCoStream}
+          />
+        ) : viewMode === "grid" ? (
+          <GridView data={snapshot} onNavigate={onNavigate} node={node} />
+        ) : (
+          <TableView data={snapshot} node={node} onNavigate={onNavigate} />
+        )}
+        {extendedType !== "account" && extendedType !== "group" && (
+          <div
+            style={{
+              fontSize: "0.75rem",
+              color: "rgb(107, 114, 128)",
+              marginTop: "1rem",
+            }}
+          >
+            Owned by{" "}
+            <AccountOrGroupPreview
+              coId={value.group.id}
+              node={node}
+              showId
+              onClick={() => {
+                onNavigate([{ coId: value.group.id, name: "owner" }]);
+              }}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

packages/jazz-inspector/src/viewer/table-viewer.tsx

@@ -0,0 +1,194 @@
+import { CoID, LocalNode, RawCoValue } from "cojson";
+import type { JsonObject } from "cojson/src/jsonValue.ts";
+import { useMemo, useState } from "react";
+import { LinkIcon } from "../link-icon.tsx";
+import { PageInfo } from "./types.ts";
+import { useResolvedCoValues } from "./use-resolve-covalue.ts";
+import { ValueRenderer } from "./value-renderer.tsx";
+
+export function TableView({
+  data,
+  node,
+  onNavigate,
+}: {
+  data: JsonObject;
+  node: LocalNode;
+  onNavigate: (pages: PageInfo[]) => void;
+}) {
+  const [visibleRowsCount, setVisibleRowsCount] = useState(10);
+  const [coIdArray, visibleRows] = useMemo(() => {
+    const coIdArray = Array.isArray(data)
+      ? data
+      : Object.values(data).every(
+            (k) => typeof k === "string" && k.startsWith("co_"),
+          )
+        ? Object.values(data).map((k) => k as CoID<RawCoValue>)
+        : [];
+
+    const visibleRows = coIdArray.slice(0, visibleRowsCount);
+
+    return [coIdArray, visibleRows];
+  }, [data, visibleRowsCount]);
+  const resolvedRows = useResolvedCoValues(visibleRows, node);
+
+  const hasMore = visibleRowsCount < coIdArray.length;
+
+  if (!coIdArray.length) {
+    return <div>No data to display</div>;
+  }
+
+  if (resolvedRows.length === 0) {
+    return <div>Loading...</div>;
+  }
+
+  const keys = Array.from(
+    new Set(resolvedRows.flatMap((item) => Object.keys(item.snapshot || {}))),
+  );
+
+  const loadMore = () => {
+    setVisibleRowsCount((prevVisibleRows) => prevVisibleRows + 10);
+  };
+
+  return (
+    <div>
+      <table
+        style={{
+          minWidth: "100%",
+          borderSpacing: 0,
+          borderCollapse: "collapse",
+        }}
+      >
+        <thead
+          style={{
+            position: "sticky",
+            top: 0,
+            borderBottom: "1px solid #e5e7eb",
+          }}
+        >
+          <tr>
+            {["", ...keys].map((key) => (
+              <th
+                key={key}
+                style={{
+                  padding: "0.75rem 1rem",
+                  backgroundColor: "#f9fafb",
+                  textAlign: "left",
+                  fontSize: "0.75rem",
+                  fontWeight: 500,
+                  color: "#6b7280",
+                  borderRadius: "0.25rem",
+                }}
+              >
+                {key}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody
+          style={{ backgroundColor: "white", borderTop: "1px solid #e5e7eb" }}
+        >
+          {resolvedRows.slice(0, visibleRowsCount).map((item, index) => (
+            <tr key={index}>
+              <td style={{ padding: "0.25rem 0.25rem" }}>
+                <button
+                  onClick={() =>
+                    onNavigate([
+                      {
+                        coId: item.value!.id,
+                        name: index.toString(),
+                      },
+                    ])
+                  }
+                  style={{
+                    padding: "1rem",
+                    whiteSpace: "nowrap",
+                    fontSize: "0.875rem",
+                    color: "#6b7280",
+                    borderRadius: "0.25rem",
+                  }}
+                  onMouseOver={(e) => {
+                    e.currentTarget.style.backgroundColor = "#f3f4f6";
+                    e.currentTarget.style.color = "#3b82f6";
+                  }}
+                  onMouseOut={(e) => {
+                    e.currentTarget.style.backgroundColor = "transparent";
+                    e.currentTarget.style.color = "#6b7280";
+                  }}
+                >
+                  <LinkIcon />
+                </button>
+              </td>
+              {keys.map((key) => (
+                <td
+                  key={key}
+                  style={{
+                    padding: "1rem",
+                    whiteSpace: "nowrap",
+                    fontSize: "0.875rem",
+                    color: "#6b7280",
+                  }}
+                >
+                  <ValueRenderer
+                    json={(item.snapshot as JsonObject)[key]}
+                    onCoIDClick={(coId) => {
+                      async function handleClick() {
+                        onNavigate([
+                          {
+                            coId: item.value!.id,
+                            name: index.toString(),
+                          },
+                          {
+                            coId: coId,
+                            name: key,
+                          },
+                        ]);
+                      }
+
+                      handleClick();
+                    }}
+                  />
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <div
+        style={{
+          padding: "1rem 0",
+          color: "#6b7280",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: "0.5rem",
+        }}
+      >
+        <span>
+          Showing {Math.min(visibleRowsCount, coIdArray.length)} of{" "}
+          {coIdArray.length}
+        </span>
+        {hasMore && (
+          <div style={{ textAlign: "center" }}>
+            <button
+              onClick={loadMore}
+              style={{
+                padding: "0.5rem 1rem",
+                backgroundColor: "#3b82f6",
+                color: "white",
+                borderRadius: "0.25rem",
+              }}
+              onMouseOver={(e) => {
+                e.currentTarget.style.backgroundColor = "#2563eb";
+              }}
+              onMouseOut={(e) => {
+                e.currentTarget.style.backgroundColor = "#3b82f6";
+              }}
+            >
+              Load More
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

packages/jazz-inspector/src/viewer/type-icon.tsx

@@ -0,0 +1,54 @@
+import { CoID, LocalNode, RawCoValue } from "cojson";
+import {
+  CoJsonType,
+  ExtendedCoJsonType,
+  useResolvedCoValue,
+} from "./use-resolve-covalue.ts";
+
+export const TypeIcon = ({
+  type,
+  extendedType,
+}: {
+  type: CoJsonType;
+  extendedType?: ExtendedCoJsonType;
+}) => {
+  const iconMap: Record<ExtendedCoJsonType | CoJsonType, string> = {
+    record: "{} Record",
+    image: "🖼️ Image",
+    comap: "{} CoMap",
+    costream: "≋ CoStream",
+    colist: "☰ CoList",
+    account: "👤 Account",
+    group: "👥 Group",
+  };
+
+  const iconKey = extendedType || type;
+  const icon = iconMap[iconKey as keyof typeof iconMap];
+
+  return icon ? <span style={{ fontFamily: "monospace" }}>{icon}</span> : null;
+};
+
+export const ResolveIcon = ({
+  coId,
+  node,
+}: {
+  coId: CoID<RawCoValue>;
+  node: LocalNode;
+}) => {
+  const { type, extendedType, snapshot } = useResolvedCoValue(coId, node);
+
+  if (snapshot === "unavailable" && !type) {
+    return <div style={{ color: "#4B5563", fontWeight: 500 }}>Unavailable</div>;
+  }
+
+  if (!type)
+    return (
+      <div
+        style={{ whiteSpace: "pre", width: "3.5rem", fontFamily: "monospace" }}
+      >
+        {" "}
+      </div>
+    );
+
+  return <TypeIcon type={type} extendedType={extendedType} />;
+};

packages/jazz-inspector/src/viewer/types.ts

@@ -0,0 +1,9 @@
+import { CoID, RawCoValue } from "cojson";
+
+export type PageInfo = {
+  coId: CoID<RawCoValue>;
+  name?: string;
+};
+
+export const isCoId = (coId: unknown): coId is CoID<RawCoValue> =>
+  typeof coId === "string" && coId.startsWith("co_");

packages/jazz-inspector/src/viewer/use-page-path.ts

@@ -0,0 +1,52 @@
+import { CoID, RawCoValue } from "cojson";
+import { useCallback, useEffect, useState } from "react";
+import { PageInfo } from "./types.ts";
+
+export function usePagePath(defaultPath?: PageInfo[]) {
+  const [path, setPath] = useState<PageInfo[]>([]);
+
+  const updatePath = useCallback((newPath: PageInfo[]) => {
+    setPath(newPath);
+  }, []);
+
+  useEffect(() => {
+    if (defaultPath && JSON.stringify(path) !== JSON.stringify(defaultPath)) {
+      updatePath(defaultPath);
+    }
+  }, [defaultPath, path, updatePath]);
+
+  const addPages = useCallback(
+    (newPages: PageInfo[]) => {
+      updatePath([...path, ...newPages]);
+    },
+    [path, updatePath],
+  );
+
+  const goToIndex = useCallback(
+    (index: number) => {
+      updatePath(path.slice(0, index + 1));
+    },
+    [path, updatePath],
+  );
+
+  const setPage = useCallback(
+    (coId: CoID<RawCoValue>) => {
+      updatePath([{ coId, name: "Root" }]);
+    },
+    [updatePath],
+  );
+
+  const goBack = useCallback(() => {
+    if (path.length > 1) {
+      updatePath(path.slice(0, path.length - 1));
+    }
+  }, [path, updatePath]);
+
+  return {
+    path,
+    setPage,
+    addPages,
+    goToIndex,
+    goBack,
+  };
+}

packages/jazz-inspector/src/viewer/use-resolve-covalue.ts

@@ -0,0 +1,216 @@
+import { CoID, LocalNode, RawBinaryCoStream, RawCoValue } from "cojson";
+import { useEffect, useState } from "react";
+
+export type CoJsonType = "comap" | "costream" | "colist";
+export type ExtendedCoJsonType = "image" | "record" | "account" | "group";
+
+type JSON = string | number | boolean | null | JSON[] | { [key: string]: JSON };
+type JSONObject = { [key: string]: JSON };
+
+type ResolvedImageDefinition = {
+  originalSize: [number, number];
+  placeholderDataURL?: string;
+  [res: `${number}x${number}`]: RawBinaryCoStream["id"];
+};
+
+// Type guard for browser image
+export const isBrowserImage = (
+  coValue: JSONObject,
+): coValue is ResolvedImageDefinition => {
+  return "originalSize" in coValue && "placeholderDataURL" in coValue;
+};
+
+export type ResolvedGroup = {
+  readKey: string;
+  [key: string]: JSON;
+};
+
+export const isGroup = (coValue: JSONObject): coValue is ResolvedGroup => {
+  return "readKey" in coValue;
+};
+
+export type ResolvedAccount = {
+  profile: {
+    name: string;
+  };
+  [key: string]: JSON;
+};
+
+export const isAccount = (coValue: JSONObject): coValue is ResolvedAccount => {
+  return isGroup(coValue) && "profile" in coValue;
+};
+
+export async function resolveCoValue(
+  coValueId: CoID<RawCoValue>,
+  node: LocalNode,
+): Promise<
+  | {
+      value: RawCoValue;
+      snapshot: JSONObject;
+      type: CoJsonType | null;
+      extendedType: ExtendedCoJsonType | undefined;
+    }
+  | {
+      value: undefined;
+      snapshot: "unavailable";
+      type: null;
+      extendedType: undefined;
+    }
+> {
+  const value = await node.load(coValueId);
+
+  if (value === "unavailable") {
+    return {
+      value: undefined,
+      snapshot: "unavailable",
+      type: null,
+      extendedType: undefined,
+    };
+  }
+
+  const snapshot = value.toJSON() as JSONObject;
+  const type = value.type as CoJsonType;
+
+  // Determine extended type
+  let extendedType: ExtendedCoJsonType | undefined;
+
+  if (type === "comap") {
+    if (isBrowserImage(snapshot)) {
+      extendedType = "image";
+    } else if (isAccount(snapshot)) {
+      extendedType = "account";
+    } else if (isGroup(snapshot)) {
+      extendedType = "group";
+    } else {
+      // This check is a bit of a hack
+      // There might be a better way to do this
+      const children = Object.values(snapshot).slice(0, 10);
+      if (
+        children.every((c) => typeof c === "string" && c.startsWith("co_")) &&
+        children.length > 3
+      ) {
+        extendedType = "record";
+      }
+    }
+  }
+
+  return {
+    value,
+    snapshot,
+    type,
+    extendedType,
+  };
+}
+
+function subscribeToCoValue(
+  coValueId: CoID<RawCoValue>,
+  node: LocalNode,
+  callback: (result: Awaited<ReturnType<typeof resolveCoValue>>) => void,
+) {
+  return node.subscribe(coValueId, (value) => {
+    if (value === "unavailable") {
+      callback({
+        value: undefined,
+        snapshot: "unavailable",
+        type: null,
+        extendedType: undefined,
+      });
+    } else {
+      const snapshot = value.toJSON() as JSONObject;
+      const type = value.type as CoJsonType;
+      let extendedType: ExtendedCoJsonType | undefined;
+
+      if (type === "comap") {
+        if (isBrowserImage(snapshot)) {
+          extendedType = "image";
+        } else if (isAccount(snapshot)) {
+          extendedType = "account";
+        } else if (isGroup(snapshot)) {
+          extendedType = "group";
+        } else {
+          const children = Object.values(snapshot).slice(0, 10);
+          if (
+            children.every(
+              (c) => typeof c === "string" && c.startsWith("co_"),
+            ) &&
+            children.length > 3
+          ) {
+            extendedType = "record";
+          }
+        }
+      }
+
+      callback({
+        value,
+        snapshot,
+        type,
+        extendedType,
+      });
+    }
+  });
+}
+
+export function useResolvedCoValue(
+  coValueId: CoID<RawCoValue>,
+  node: LocalNode,
+) {
+  const [result, setResult] =
+    useState<Awaited<ReturnType<typeof resolveCoValue>>>();
+
+  useEffect(() => {
+    let isMounted = true;
+    const unsubscribe = subscribeToCoValue(coValueId, node, (newResult) => {
+      if (isMounted) {
+        setResult(newResult);
+      }
+    });
+
+    return () => {
+      isMounted = false;
+      unsubscribe();
+    };
+  }, [coValueId, node]);
+
+  return (
+    result || {
+      value: undefined,
+      snapshot: undefined,
+      type: undefined,
+      extendedType: undefined,
+    }
+  );
+}
+
+export function useResolvedCoValues(
+  coValueIds: CoID<RawCoValue>[],
+  node: LocalNode,
+) {
+  const [results, setResults] = useState<
+    Awaited<ReturnType<typeof resolveCoValue>>[]
+  >([]);
+
+  useEffect(() => {
+    let isMounted = true;
+    const unsubscribes: (() => void)[] = [];
+
+    coValueIds.forEach((coValueId, index) => {
+      const unsubscribe = subscribeToCoValue(coValueId, node, (newResult) => {
+        if (isMounted) {
+          setResults((prevResults) => {
+            const newResults = [...prevResults];
+            newResults[index] = newResult;
+            return newResults;
+          });
+        }
+      });
+      unsubscribes.push(unsubscribe);
+    });
+
+    return () => {
+      isMounted = false;
+      unsubscribes.forEach((unsubscribe) => unsubscribe());
+    };
+  }, [coValueIds, node]);
+
+  return results;
+}

packages/jazz-inspector/src/viewer/value-renderer.tsx

@@ -0,0 +1,279 @@
+import { CoID, JsonValue, LocalNode, RawCoValue } from "cojson";
+import React, { useEffect, useState } from "react";
+import { LinkIcon } from "../link-icon.tsx";
+import {
+  isBrowserImage,
+  resolveCoValue,
+  useResolvedCoValue,
+} from "./use-resolve-covalue.ts";
+
+// Is there a chance we can pass the actual CoValue here?
+export function ValueRenderer({
+  json,
+  compact,
+  onCoIDClick,
+}: {
+  json: JsonValue | undefined;
+  compact?: boolean;
+  onCoIDClick?: (childNode: CoID<RawCoValue>) => void;
+}) {
+  if (typeof json === "undefined" || json === undefined) {
+    return <span style={{ color: "#9CA3AF" }}>undefined</span>;
+  }
+
+  if (json === null) {
+    return <span style={{ color: "#9CA3AF" }}>null</span>;
+  }
+
+  if (typeof json === "string" && json.startsWith("co_")) {
+    const linkStyle = onCoIDClick
+      ? {
+          color: "#3B82F6",
+          cursor: "pointer",
+          display: "inline-flex",
+          gap: "0.25rem",
+          alignItems: "center",
+        }
+      : {
+          display: "inline-flex",
+          gap: "0.25rem",
+          alignItems: "center",
+        };
+
+    return (
+      <span
+        style={linkStyle}
+        onClick={() => {
+          onCoIDClick?.(json as CoID<RawCoValue>);
+        }}
+      >
+        {json}
+        {onCoIDClick && <LinkIcon />}
+      </span>
+    );
+  }
+
+  if (typeof json === "string") {
+    return (
+      <span style={{ color: "#064E3B", fontFamily: "monospace" }}>{json}</span>
+    );
+  }
+
+  if (typeof json === "number") {
+    return <span style={{ color: "#A855F7" }}>{json}</span>;
+  }
+
+  if (typeof json === "boolean") {
+    const booleanStyle = {
+      color: json ? "#15803D" : "#B45309",
+      backgroundColor: json
+        ? "rgba(34, 197, 94, 0.05)"
+        : "rgba(245, 158, 11, 0.05)",
+      fontFamily: "monospace",
+      display: "inline-block",
+      padding: "0.125rem 0.25rem",
+      borderRadius: "0.25rem",
+    };
+
+    return <span style={booleanStyle}>{json.toString()}</span>;
+  }
+
+  if (Array.isArray(json)) {
+    return (
+      <span title={JSON.stringify(json)}>
+        Array <span style={{ color: "#6B7280" }}>({json.length})</span>
+      </span>
+    );
+  }
+
+  if (typeof json === "object") {
+    return (
+      <span
+        title={JSON.stringify(json, null, 2)}
+        style={{
+          display: "inline-block",
+          maxWidth: "16rem",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+        }}
+      >
+        {compact ? (
+          <span>
+            Object{" "}
+            <span style={{ color: "#6B7280" }}>
+              ({Object.keys(json).length})
+            </span>
+          </span>
+        ) : (
+          JSON.stringify(json, null, 2)
+        )}
+      </span>
+    );
+  }
+
+  return <span>{String(json)}</span>;
+}
+
+export const CoMapPreview = ({
+  coId,
+  node,
+  limit = 6,
+}: {
+  coId: CoID<RawCoValue>;
+  node: LocalNode;
+  limit?: number;
+}) => {
+  const { value, snapshot, type, extendedType } = useResolvedCoValue(
+    coId,
+    node,
+  );
+
+  if (!snapshot) {
+    return (
+      <div
+        style={{
+          borderRadius: "0.25rem",
+          backgroundColor: "#F3F4F6",
+          animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+          whiteSpace: "pre",
+          width: "6rem",
+        }}
+      >
+        {" "}
+      </div>
+    );
+  }
+
+  if (snapshot === "unavailable" && !value) {
+    return <div style={{ color: "#6B7280" }}>Unavailable</div>;
+  }
+
+  if (extendedType === "image" && isBrowserImage(snapshot)) {
+    return (
+      <div>
+        <img
+          src={snapshot.placeholderDataURL}
+          style={{
+            width: "2rem",
+            height: "2rem",
+            border: "2px solid white",
+            boxShadow:
+              "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+            margin: "0.5rem 0",
+          }}
+        />
+        <span style={{ color: "#6B7280", fontSize: "0.875rem" }}>
+          {snapshot.originalSize[0]} x {snapshot.originalSize[1]}
+        </span>
+      </div>
+    );
+  }
+
+  if (extendedType === "record") {
+    return (
+      <div>
+        Record{" "}
+        <span style={{ color: "#6B7280" }}>
+          ({Object.keys(snapshot).length})
+        </span>
+      </div>
+    );
+  }
+
+  if (type === "colist") {
+    return (
+      <div>
+        List{" "}
+        <span style={{ color: "#6B7280" }}>
+          ({(snapshot as unknown as []).length})
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "auto 1fr",
+          gap: "0.5rem",
+        }}
+      >
+        {Object.entries(snapshot)
+          .slice(0, limit)
+          .map(([key, value]) => (
+            <React.Fragment key={key}>
+              <span style={{ fontWeight: "bold" }}>{key}: </span>
+              <span>
+                <ValueRenderer json={value} />
+              </span>
+            </React.Fragment>
+          ))}
+      </div>
+      {Object.entries(snapshot).length > limit && (
+        <div
+          style={{ textAlign: "left", fontSize: "0.875rem", color: "#6B7280" }}
+        >
+          {Object.entries(snapshot).length - limit} more
+        </div>
+      )}
+    </div>
+  );
+};
+
+export function AccountOrGroupPreview({
+  coId,
+  node,
+  showId = false,
+  onClick,
+}: {
+  coId: CoID<RawCoValue>;
+  node: LocalNode;
+  showId?: boolean;
+  onClick?: (name?: string) => void;
+}) {
+  const { snapshot, extendedType } = useResolvedCoValue(coId, node);
+  const [name, setName] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (extendedType === "account") {
+      resolveCoValue(
+        (snapshot as unknown as { profile: CoID<RawCoValue> }).profile,
+        node,
+      ).then(({ snapshot }) => {
+        if (
+          typeof snapshot === "object" &&
+          "name" in snapshot &&
+          typeof snapshot.name === "string"
+        ) {
+          setName(snapshot.name);
+        }
+      });
+    }
+  }, [snapshot, node, extendedType]);
+
+  if (!snapshot) return <span>Loading...</span>;
+  if (extendedType !== "account" && extendedType !== "group") {
+    return <span>CoID is not an account or group</span>;
+  }
+
+  const displayName = extendedType === "account" ? name || "Account" : "Group";
+  const displayText = showId ? `${displayName} (${coId})` : displayName;
+
+  const props = onClick
+    ? {
+        onClick: () => onClick(displayName),
+        style: {
+          color: "#3B82F6",
+          cursor: "pointer",
+          textDecoration: "underline",
+        },
+      }
+    : {
+        style: { color: "#6B7280" },
+      };
+
+  return <span {...props}>{displayText}</span>;
+}

packages/jazz-inspector/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/jazz-inspector/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

packages/jazz-inspector/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

packages/jazz-inspector/vite.config.ts

@@ -0,0 +1,23 @@
+import path from "path";
+import react from "@vitejs/plugin-react-swc";
+import depsExternal from "rollup-plugin-node-externals";
+import { defineConfig } from "vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), depsExternal()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/app.tsx"),
+      name: "JazzInspector",
+      // the proper extensions will be added
+      fileName: "jazz-inspector",
+      formats: ["es"],
+    },
+  },
+});

packages/jazz-nodejs/CHANGELOG.md

@@ -1,5 +1,34 @@
 # jazz-autosub
 
+## 0.9.12
+
+### Patch Changes
+
+- Updated dependencies [15d4b2a]
+  - cojson-transport-ws@0.9.12
+  - cojson@0.9.12
+  - jazz-tools@0.9.12
+
+## 0.9.11
+
+### Patch Changes
+
+- Updated dependencies [efbf3d8]
+- Updated dependencies [5863bad]
+  - cojson@0.9.11
+  - cojson-transport-ws@0.9.11
+  - jazz-tools@0.9.11
+
+## 0.9.10
+
+### Patch Changes
+
+- Updated dependencies [4aa377d]
+- Updated dependencies [5e83864]
+  - cojson@0.9.10
+  - jazz-tools@0.9.10
+  - cojson-transport-ws@0.9.10
+
 ## 0.9.9
 
 ### Patch Changes

packages/jazz-nodejs/package.json

@@ -5,11 +5,11 @@
   "types": "src/index.ts",
   "type": "module",
   "license": "MIT",
-  "version": "0.9.9",
+  "version": "0.9.12",
   "dependencies": {
-    "cojson": "workspace:0.9.9",
-    "cojson-transport-ws": "workspace:0.9.9",
-    "jazz-tools": "workspace:0.9.9",
+    "cojson": "workspace:0.9.12",
+    "cojson-transport-ws": "workspace:0.9.12",
+    "jazz-tools": "workspace:0.9.12",
     "ws": "^8.14.2"
   },
   "devDependencies": {

packages/jazz-react-auth-clerk/CHANGELOG.md

@@ -1,5 +1,37 @@
 # jazz-browser-media-images
 
+## 0.9.12
+
+### Patch Changes
+
+- Updated dependencies [15d4b2a]
+  - cojson@0.9.12
+  - jazz-browser-auth-clerk@0.9.12
+  - jazz-react@0.9.12
+  - jazz-tools@0.9.12
+
+## 0.9.11
+
+### Patch Changes
+
+- Updated dependencies [efbf3d8]
+- Updated dependencies [5863bad]
+  - cojson@0.9.11
+  - jazz-browser-auth-clerk@0.9.11
+  - jazz-react@0.9.11
+  - jazz-tools@0.9.11
+
+## 0.9.10
+
+### Patch Changes
+
+- Updated dependencies [4aa377d]
+- Updated dependencies [5e83864]
+  - cojson@0.9.10
+  - jazz-react@0.9.10
+  - jazz-tools@0.9.10
+  - jazz-browser-auth-clerk@0.9.10
+
 ## 0.9.9
 
 ### Patch Changes

packages/jazz-react-auth-clerk/package.json

@@ -1,15 +1,15 @@
 {
   "name": "jazz-react-auth-clerk",
-  "version": "0.9.9",
+  "version": "0.9.12",
   "type": "module",
   "main": "dist/index.js",
   "types": "src/index.tsx",
   "license": "MIT",
   "dependencies": {
-    "cojson": "workspace:0.9.9",
-    "jazz-browser-auth-clerk": "workspace:0.9.9",
-    "jazz-react": "workspace:0.9.9",
-    "jazz-tools": "workspace:0.9.9"
+    "cojson": "workspace:0.9.12",
+    "jazz-browser-auth-clerk": "workspace:0.9.12",
+    "jazz-react": "workspace:0.9.12",
+    "jazz-tools": "workspace:0.9.12"
   },
   "peerDependencies": {
     "react": "^18.2.0"

packages/jazz-react-core/CHANGELOG.md

@@ -1,5 +1,31 @@
 # jazz-react-core
 
+## 0.8.53
+
+### Patch Changes
+
+- Updated dependencies [15d4b2a]
+  - cojson@0.9.12
+  - jazz-tools@0.9.12
+
+## 0.8.52
+
+### Patch Changes
+
+- Updated dependencies [efbf3d8]
+- Updated dependencies [5863bad]
+  - cojson@0.9.11
+  - jazz-tools@0.9.11
+
+## 0.8.51
+
+### Patch Changes
+
+- Updated dependencies [4aa377d]
+- Updated dependencies [5e83864]
+  - cojson@0.9.10
+  - jazz-tools@0.9.10
+
 ## 0.8.50
 
 ### Patch Changes

packages/jazz-react-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jazz-react-core",
-  "version": "0.8.50",
+  "version": "0.8.53",
   "type": "module",
   "main": "dist/index.js",
   "types": "src/index.ts",

packages/jazz-react-native-auth-clerk/CHANGELOG.md

@@ -1,5 +1,35 @@
 # jazz-react-native-auth-clerk
 
+## 0.9.12
+
+### Patch Changes
+
+- Updated dependencies [15d4b2a]
+  - cojson@0.9.12
+  - jazz-react-native@0.9.12
+  - jazz-tools@0.9.12
+
+## 0.9.11
+
+### Patch Changes
+
+- Updated dependencies [efbf3d8]
+- Updated dependencies [5863bad]
+  - cojson@0.9.11
+  - jazz-react-native@0.9.11
+  - jazz-tools@0.9.11
+
+## 0.9.10
+
+### Patch Changes
+
+- Updated dependencies [4aa377d]
+- Updated dependencies [f76274c]
+- Updated dependencies [5e83864]
+  - cojson@0.9.10
+  - jazz-react-native@0.9.10
+  - jazz-tools@0.9.10
+
 ## 0.9.9
 
 ### Patch Changes

packages/jazz-react-native-auth-clerk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jazz-react-native-auth-clerk",
-  "version": "0.9.9",
+  "version": "0.9.12",
   "type": "module",
   "main": "dist/index.js",
   "types": "src/index.ts",

packages/jazz-react-native-media-images/CHANGELOG.md

@@ -1,5 +1,24 @@
 # jazz-browser-media-images
 
+## 0.9.12
+
+### Patch Changes
+
+- jazz-tools@0.9.12
+
+## 0.9.11
+
+### Patch Changes
+
+- jazz-tools@0.9.11
+
+## 0.9.10
+
+### Patch Changes
+
+- Updated dependencies [5e83864]
+  - jazz-tools@0.9.10
+
 ## 0.9.9
 
 ### Patch Changes

packages/jazz-react-native-media-images/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jazz-react-native-media-images",
-  "version": "0.9.9",
+  "version": "0.9.12",
   "type": "module",
   "main": "dist/index.js",
   "types": "src/index.ts",

packages/jazz-react-native/CHANGELOG.md

@@ -1,5 +1,42 @@
 # jazz-browser
 
+## 0.9.12
+
+### Patch Changes
+
+- Updated dependencies [15d4b2a]
+  - cojson-transport-ws@0.9.12
+  - cojson@0.9.12
+  - cojson-storage-rn-sqlite@0.8.55
+  - jazz-react-core@0.8.53
+  - jazz-tools@0.9.12
+
+## 0.9.11
+
+### Patch Changes
+
+- Updated dependencies [efbf3d8]
+- Updated dependencies [5863bad]
+  - cojson@0.9.11
+  - cojson-transport-ws@0.9.11
+  - cojson-storage-rn-sqlite@0.8.54
+  - jazz-react-core@0.8.52
+  - jazz-tools@0.9.11
+
+## 0.9.10
+
+### Patch Changes
+
+- f76274c: Fix image handling in react-native
+- 5e83864: Improve error management on initial auth, fixed an infinite loop when migration fails
+- Updated dependencies [4aa377d]
+- Updated dependencies [5e83864]
+  - cojson@0.9.10
+  - jazz-tools@0.9.10
+  - cojson-storage-rn-sqlite@0.8.53
+  - cojson-transport-ws@0.9.10
+  - jazz-react-core@0.8.51
+
 ## 0.9.9
 
 ### Patch Changes