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

Version Packages

.changeset/config.json

@@ -15,6 +15,7 @@
       "jazz-browser-media-images",
       "jazz-expo",
       "jazz-inspector",
+      "jazz-inspector-element",
       "jazz-nodejs",
       "jazz-react",
       "jazz-react-core",

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

@@ -1,5 +1,28 @@
 # chat-rn-expo-clerk
 
+## 1.0.115
+
+### Patch Changes
+
+- Updated dependencies [02a240c]
+  - jazz-tools@0.13.23
+  - jazz-expo@0.13.23
+  - jazz-react-native-media-images@0.13.23
+
+## 1.0.114
+
+### Patch Changes
+
+- jazz-expo@0.13.22
+
+## 1.0.113
+
+### Patch Changes
+
+- jazz-expo@0.13.21
+- jazz-tools@0.13.21
+- jazz-react-native-media-images@0.13.21
+
 ## 1.0.112
 
 ### Patch Changes

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

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

examples/chat-rn-expo/CHANGELOG.md

@@ -1,5 +1,26 @@
 # chat-rn-expo
 
+## 1.0.102
+
+### Patch Changes
+
+- Updated dependencies [02a240c]
+  - jazz-tools@0.13.23
+  - jazz-expo@0.13.23
+
+## 1.0.101
+
+### Patch Changes
+
+- jazz-expo@0.13.22
+
+## 1.0.100
+
+### Patch Changes
+
+- jazz-expo@0.13.21
+- jazz-tools@0.13.21
+
 ## 1.0.99
 
 ### Patch Changes

examples/chat-rn-expo/app.config.js

@@ -0,0 +1,55 @@
+const { withBuildProperties } = require("expo-build-properties");
+const { withDangerousMod } = require("@expo/config-plugins");
+const fs = require("fs/promises");
+const path = require("path");
+
+/**
+ *  https://github.com/mrousavy/nitro/issues/422#issuecomment-2545988256
+ */
+function withCustomIosMod(config) {
+  // Use expo-build-properties to bump iOS deployment target
+  config = withBuildProperties(config, { ios: { deploymentTarget: "16.0" } });
+  // Patch the generated Podfile fallback to ensure platform is always 16.0
+  config = withDangerousMod(config, [
+    "ios",
+    async (modConfig) => {
+      const podfilePath = path.join(
+        modConfig.modRequest.platformProjectRoot,
+        "Podfile",
+      );
+      let contents = await fs.readFile(podfilePath, "utf-8");
+
+      // Check if the IPHONEOS_DEPLOYMENT_TARGET setting is already present
+      // We search for the key being assigned, e.g., config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] =
+      const deploymentTargetSettingExists =
+        /\.build_settings\s*\[\s*['"]IPHONEOS_DEPLOYMENT_TARGET['"]\s*\]\s*=/.test(
+          contents,
+        );
+
+      if (!deploymentTargetSettingExists) {
+        // IPHONEOS_DEPLOYMENT_TARGET setting not found, proceed to add it.
+        contents = contents.replace(
+          /(post_install\s+do\s+\|installer\|[\s\S]*?)(\r?\n\s  end\s*)$/m,
+          `$1
+
+    # Expo Build Properties: force deployment target
+    # https://github.com/mrousavy/nitro/issues/422#issuecomment-2545988256
+    installer.pods_project.targets.each do |target|
+      target.build_configurations.each do |config|
+        config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '16.0'
+      end
+    end
+$2`,
+        );
+      }
+
+      await fs.writeFile(podfilePath, contents);
+      return modConfig;
+    },
+  ]);
+  return config;
+}
+
+module.exports = ({ config }) => {
+  return withCustomIosMod(config);
+};

examples/chat-rn-expo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-rn-expo",
-  "version": "1.0.99",
+  "version": "1.0.102",
   "main": "index.js",
   "scripts": {
     "build": "expo export -p ios",
@@ -36,6 +36,8 @@
     "react-dom": "18.3.1",
     "react-native": "0.76.7",
     "react-native-get-random-values": "^1.11.0",
+    "react-native-nitro-modules": "0.25.2",
+    "react-native-quick-crypto": "1.0.0-beta.15",
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "4.4.0",
     "react-native-url-polyfill": "^2.0.0",

examples/chat-rn-expo/src/App.tsx

@@ -6,6 +6,7 @@ import {
 } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import * as Linking from "expo-linking";
+import { RNQuickCrypto } from "jazz-expo/crypto";
 import React, { StrictMode, useEffect, useState } from "react";
 import HandleInviteScreen from "./invite";
 
@@ -46,6 +47,7 @@ function App() {
   return (
     <StrictMode>
       <JazzProvider
+        CryptoProvider={RNQuickCrypto}
         sync={{
           peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
         }}

examples/chat-rn/CHANGELOG.md

@@ -1,5 +1,32 @@
 # chat-rn
 
+## 1.0.110
+
+### Patch Changes
+
+- Updated dependencies [6b781cf]
+- Updated dependencies [02a240c]
+  - cojson@0.13.23
+  - jazz-tools@0.13.23
+  - cojson-transport-ws@0.13.23
+  - jazz-react-native@0.13.23
+
+## 1.0.109
+
+### Patch Changes
+
+- jazz-react-native@0.13.22
+
+## 1.0.108
+
+### Patch Changes
+
+- Updated dependencies [e14e61f]
+  - cojson@0.13.21
+  - cojson-transport-ws@0.13.21
+  - jazz-react-native@0.13.21
+  - jazz-tools@0.13.21
+
 ## 1.0.107
 
 ### Patch Changes

examples/chat-rn/package.json

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

examples/chat-vue/CHANGELOG.md

@@ -1,5 +1,22 @@
 # chat-vue
 
+## 0.0.93
+
+### Patch Changes
+
+- Updated dependencies [02a240c]
+  - jazz-tools@0.13.23
+  - jazz-browser@0.13.23
+  - jazz-vue@0.13.23
+
+## 0.0.92
+
+### Patch Changes
+
+- jazz-browser@0.13.21
+- jazz-tools@0.13.21
+- jazz-vue@0.13.21
+
 ## 0.0.91
 
 ### Patch Changes

examples/chat-vue/package.json

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

examples/chat/CHANGELOG.md

@@ -1,5 +1,23 @@
 # jazz-example-chat
 
+## 0.0.191
+
+### Patch Changes
+
+- Updated dependencies [02a240c]
+  - jazz-tools@0.13.23
+  - jazz-inspector@0.13.23
+  - jazz-react@0.13.23
+
+## 0.0.190
+
+### Patch Changes
+
+- Updated dependencies [7de210f]
+  - jazz-inspector@0.13.21
+  - jazz-react@0.13.21
+  - jazz-tools@0.13.21
+
 ## 0.0.189
 
 ### Patch Changes

examples/chat/package.json

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

examples/clerk/CHANGELOG.md

@@ -1,5 +1,22 @@
 # minimal-auth-clerk
 
+## 0.0.90
+
+### Patch Changes
+
+- Updated dependencies [02a240c]
+  - jazz-tools@0.13.23
+  - jazz-react@0.13.23
+  - jazz-react-auth-clerk@0.13.23
+
+## 0.0.89
+
+### Patch Changes
+
+- jazz-react@0.13.21
+- jazz-react-auth-clerk@0.13.21
+- jazz-tools@0.13.21
+
 ## 0.0.88
 
 ### Patch Changes

examples/clerk/package.json

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

examples/file-share-svelte/CHANGELOG.md

@@ -1,5 +1,30 @@
 # file-share-svelte
 
+## 0.0.74
+
+### Patch Changes
+
+- Updated dependencies [ec546b4]
+  - jazz-svelte@0.13.24
+
+## 0.0.73
+
+### Patch Changes
+
+- Updated dependencies [3431076]
+- Updated dependencies [02a240c]
+  - jazz-svelte@0.13.23
+  - jazz-tools@0.13.23
+  - jazz-inspector-element@0.13.23
+
+## 0.0.72
+
+### Patch Changes
+
+- jazz-inspector-element@0.13.21
+- jazz-svelte@0.13.21
+- jazz-tools@0.13.21
+
 ## 0.0.71
 
 ### Patch Changes

examples/file-share-svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "file-share-svelte",
-  "version": "0.0.71",
+  "version": "0.0.74",
   "private": true,
   "type": "module",
   "scripts": {
@@ -39,6 +39,7 @@
   },
   "dependencies": {
     "@tailwindcss/typography": "^0.5.15",
+    "jazz-inspector-element": "workspace:*",
     "jazz-svelte": "workspace:*",
     "jazz-tools": "workspace:*",
     "lucide-svelte": "^0.463.0",

examples/file-share-svelte/src/lib/components/FileItem.svelte

@@ -3,9 +3,8 @@
   import { SharedFile } from '$lib/schema';
   import { FileStream } from 'jazz-tools';
   import { File, FileDown, Trash2, Link2 } from 'lucide-svelte';
-  import { useAccount } from 'jazz-svelte';
   import { toast } from 'svelte-sonner';
-  import { formatFileSize } from '$lib/utils';
+  import { downloadFileBlob, formatFileSize } from '$lib/utils';
 
   const {
     file,
@@ -17,32 +16,22 @@
     onDelete: (file: SharedFile) => void;
   } = $props();
 
-  const { me } = useAccount();
-  const isAdmin = $derived(me && file._owner?.myRole() === 'admin');
+  const isAdmin = $derived(file._owner?.myRole() === 'admin');
+  const fileStreamId = $derived(file._refs.file?.id);
 
   async function downloadFile() {
-    if (!file._refs.file?.id || !me) {
+    if (!fileStreamId) {
       toast.error('Failed to download file');
       return;
     }
 
     try {
-      const fileId = file._refs.file.id;
-
-      // Load the file as a blob, can take a while
-      const blob = await FileStream.loadAsBlob(fileId);
+      const blob = await FileStream.loadAsBlob(fileStreamId);
       if (!blob) {
         toast.error('Failed to download file');
         return;
       }
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = file.name;
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
+      downloadFileBlob(blob, file.name);
       toast.success('File downloaded successfully');
     } catch (error) {
       console.error('Error downloading file:', error);
@@ -66,14 +55,19 @@
   class="flex items-center justify-between rounded-lg border border-gray-200 bg-white p-4"
   transition:slide={{ duration: 200 }}
 >
-  <div class="flex items-center space-x-4">
+  <div class="flex items-center space-x-4 flex-grow">
     <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600">
       <File class="h-6 w-6" />
     </div>
-    <div>
-      <a href="/file/{file.id}" class="hover:text-blue-600 hover:underline">
+    <div class="flex-grow">
+      {#if isAdmin}
+        <label class="sr-only" for={`file-name-${file.id}`}>File name</label>
+        <!-- Jazz values are reactive, but they are not recognized as reactive by Svelte -->
+        <!-- svelte-ignore binding_property_non_reactive -->
+        <input class="font-medium text-gray-900 w-full py-1" type="text" bind:value={file.name} id={`file-name-${file.id}`} />
+      {:else}
         <h3 class="font-medium text-gray-900">{file.name}</h3>
-      </a>
+      {/if}
       <p class="text-sm text-gray-500">
         {isAdmin ? 'Owned by you' : ''} • Uploaded {new Date(
           file.createdAt || 0

examples/file-share-svelte/src/lib/schema.ts

@@ -15,9 +15,8 @@ export class FileShareProfile extends Profile {
 export class ListOfSharedFiles extends CoList.Of(co.ref(SharedFile)) {}
 
 export class FileShareAccountRoot extends CoMap {
-  type = co.string;
+  type = co.literal('file-share-account');
   sharedFiles = co.ref(ListOfSharedFiles);
-  publicGroup = co.ref(Group);
 }
 
 export class FileShareAccount extends Account {
@@ -31,7 +30,7 @@ export class FileShareAccount extends Account {
     await this._refs.root?.load();
 
     // Initialize root if it doesn't exist
-    if (!this.root || this.root.type !== 'file-share-account') {
+    if (this.root === undefined || this.root?.type !== 'file-share-account') {
       // Create a group that will own all shared files
       const publicGroup = Group.create({ owner: this });
       publicGroup.addMember('everyone', 'reader');
@@ -40,9 +39,7 @@ export class FileShareAccount extends Account {
         {
           type: 'file-share-account',
           sharedFiles: ListOfSharedFiles.create([], { owner: publicGroup }),
-          publicGroup
         },
-        { owner: this }
       );
     }
   }

examples/file-share-svelte/src/lib/utils.ts

@@ -20,3 +20,13 @@ export function formatFileSize(bytes: number): string {
 export function generateTempFileId(fileName: string | undefined, createdAt: Date | undefined): string {
   return `file-${fileName ?? 'unknown'}-${createdAt?.getTime() ?? 0}`;
 }
+
+export function downloadFileBlob(blob: Blob, fileName: string) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = fileName;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+}

examples/file-share-svelte/src/routes/+layout.svelte

@@ -8,7 +8,8 @@
 
 <script lang="ts">
   import { JazzProvider } from 'jazz-svelte';
-  import { PasskeyAuthBasicUI, usePasskeyAuth } from 'jazz-svelte';
+  import "jazz-inspector-element"
+  import { PasskeyAuthBasicUI } from 'jazz-svelte';
   import { Toaster } from 'svelte-sonner';
   import '../app.css';
   import { FileShareAccount } from '$lib/schema';
@@ -29,6 +30,7 @@
     peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
   }}
 >
+  <jazz-inspector></jazz-inspector>
   <PasskeyAuthBasicUI appName="File Share">
     <div class="min-h-screen bg-gray-100">
       {@render children()}

examples/file-share-svelte/src/routes/+page.svelte

@@ -1,14 +1,22 @@
 <script lang="ts">
-  import { useAccount, useCoState } from 'jazz-svelte';
-  import { SharedFile, ListOfSharedFiles } from '$lib/schema';
+  import { AccountCoState } from 'jazz-svelte';
+  import { SharedFile } from '$lib/schema';
   import { FileStream } from 'jazz-tools';
   import FileItem from '$lib/components/FileItem.svelte';
   import { CloudUpload } from 'lucide-svelte';
 
-  const { me, logOut } = useAccount();
+  const me = new AccountCoState({
+    resolve: {
+      profile: true,
+      root: {
+        sharedFiles: {
+          $each: true
+        },
+      }
+    }
+  });
 
-  const mySharedFilesId = me?.root?._refs.sharedFiles.id;
-  const sharedFiles = $derived(useCoState(ListOfSharedFiles, mySharedFilesId));
+  const sharedFiles = $derived(me.current?.root.sharedFiles);
 
   let fileInput: HTMLInputElement;
 
@@ -16,17 +24,15 @@
     const input = event.target as HTMLInputElement;
     const files = input.files;
 
-    if (!files || !files.length || !me?.root?.sharedFiles || !me?.root?.publicGroup) return;
+    if (!files?.length || !sharedFiles) return;
 
     const file = files[0];
     const fileName = file.name;
     const createdAt = new Date();
 
     try {
-      const ownership = { owner: me.root.publicGroup };
-
       // Create a FileStream from the uploaded file
-      const fileStream = await FileStream.createFromBlob(file, ownership);
+      const fileStream = await FileStream.createFromBlob(file, sharedFiles._owner);
 
       // Create the shared file entry
       const sharedFile = SharedFile.create(
@@ -37,22 +43,22 @@
           uploadedAt: new Date(),
           size: file.size
         },
-        ownership
+        sharedFiles._owner
       );
 
       // Add the file to the user's files list
-      me.root.sharedFiles.push(sharedFile);
+      sharedFiles.push(sharedFile);
     } finally {
       fileInput.value = ''; // reset input
     }
   }
 
   async function deleteFile(file: SharedFile) {
-    if (!me?.root?.sharedFiles || !sharedFiles.current) return;
+    if (!sharedFiles) return;
 
-    const index = sharedFiles.current.indexOf(file);
+    const index = sharedFiles.indexOf(file);
     if (index > -1) {
-      me.root.sharedFiles.splice(index, 1);
+      sharedFiles.splice(index, 1);
     }
   }
 </script>
@@ -62,11 +68,11 @@
     <div class="mb-12 flex items-center justify-between">
       <div>
         <h1 class="mb-2 text-4xl font-bold text-gray-900">File Share</h1>
-        <h2 class="text-xl text-gray-600">Welcome back, {me?.profile?.name}</h2>
+        <h2 class="text-xl text-gray-600">Welcome back, {me.current?.profile.name}</h2>
       </div>
 
       <button
-        onclick={logOut}
+        onclick={me.logOut}
         class="rounded-lg bg-red-500 px-6 py-2.5 text-sm font-medium text-white transition-colors hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
       >
         Log Out
@@ -97,9 +103,9 @@
 
     <!-- Files List -->
     <div class="space-y-4">
-      {#if sharedFiles.current}
-        {#if !(sharedFiles.current.length === 0)}
-          {#each sharedFiles.current as file}
+      {#if sharedFiles}
+        {#if sharedFiles.length}
+          {#each sharedFiles as file}
             {#if file}
               <FileItem
                 {file}

examples/file-share-svelte/src/routes/file/[fileId]/+page.svelte

@@ -1,39 +1,33 @@
 <script lang="ts">
   import { page } from '$app/stores';
-  import { useAccount, useCoState } from 'jazz-svelte';
+  import {  CoState } from 'jazz-svelte';
   import { SharedFile } from '$lib/schema';
   import { File, FileDown, Link2 } from 'lucide-svelte';
   import type { ID } from 'jazz-tools';
   import { FileStream } from 'jazz-tools';
   import { toast } from 'svelte-sonner';
+  import { downloadFileBlob } from '$lib/utils';
 
-  const { me } = useAccount();
   const fileId = $page.params.fileId;
 
-  const file = $state(useCoState(SharedFile, fileId as ID<SharedFile>, {}));
-  const isAdmin = $derived(me && file.current?._owner?.myRole() === 'admin');
+  const file = $derived(new CoState(SharedFile, fileId as ID<SharedFile>));
+  const isAdmin = $derived(file.current?._owner?.myRole() === 'admin');
+
+  const fileStreamId = $derived(file.current?._refs.file?.id);
 
   async function downloadFile() {
-    if (!file.current?._refs.file?.id || !me) {
+    if (!fileStreamId || !file.current) {
       toast.error('Failed to download file');
       return;
     }
 
     try {
-      const fileId = file.current._refs.file.id;
-      const blob = await FileStream.loadAsBlob(fileId, me, {});
+      const blob = await FileStream.loadAsBlob(fileStreamId);
       if (!blob) {
         toast.error('Failed to download file');
         return;
       }
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = file.current.name;
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
+      downloadFileBlob(blob, file.current.name);
       toast.success('File downloaded successfully');
     } catch (error) {
       console.error('Error downloading file:', error);

examples/file-share-svelte/tests/upload.spec.ts

@@ -59,7 +59,7 @@ test('can login with passkey and upload file', async ({ page, browser }) => {
   await fileChooser.setFiles(filePath);
   
   // Verify the uploaded file appears in the list
-  await expect(page.getByText('test-file.txt')).toBeVisible();
+  await expect(page.getByRole("textbox", { name: "File name" })).toHaveValue("test-file.txt");
 
   await page.getByRole('button', { name: 'Share file' }).click();
   const inviteLink = await page.evaluate(() => navigator.clipboard.readText());

examples/filestream/CHANGELOG.md

@@ -1,5 +1,23 @@
 # jazz-tailwind-demo-auth-starter
 
+## 0.0.30
+
+### Patch Changes
+
+- Updated dependencies [02a240c]
+  - jazz-tools@0.13.23
+  - jazz-inspector@0.13.23
+  - jazz-react@0.13.23
+
+## 0.0.29
+
+### Patch Changes
+
+- Updated dependencies [7de210f]
+  - jazz-inspector@0.13.21
+  - jazz-react@0.13.21
+  - jazz-tools@0.13.21
+
 ## 0.0.28
 
 ### Patch Changes

examples/filestream/package.json

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

examples/filestream/src/FileWidget.tsx

@@ -189,7 +189,7 @@ export function FileWidget() {
     );
   }
 
-  const fileData = me?.profile?.file?.getChunks();
+  const fileData = me?.profile?.file?.getMetadata();
   const mimeType = fileData?.mimeType || "unknown";
 
   return (

examples/form/CHANGELOG.md

@@ -1,5 +1,20 @@
 # form
 
+## 0.1.31
+
+### Patch Changes
+
+- Updated dependencies [02a240c]
+  - jazz-tools@0.13.23
+  - jazz-react@0.13.23
+
+## 0.1.30
+
+### Patch Changes
+
+- jazz-react@0.13.21
+- jazz-tools@0.13.21
+
 ## 0.1.29
 
 ### Patch Changes

examples/form/package.json

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

examples/image-upload/CHANGELOG.md

@@ -1,5 +1,20 @@
 # image-upload
 
+## 0.0.87
+
+### Patch Changes
+
+- Updated dependencies [02a240c]
+  - jazz-tools@0.13.23
+  - jazz-react@0.13.23
+
+## 0.0.86
+
+### Patch Changes
+
+- jazz-react@0.13.21
+- jazz-tools@0.13.21
+
 ## 0.0.85
 
 ### Patch Changes

examples/image-upload/package.json

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

examples/inspector/CHANGELOG.md

@@ -1,5 +1,24 @@
 # jazz-example-inspector
 
+## 0.0.141
+
+### Patch Changes
+
+- Updated dependencies [6b781cf]
+  - cojson@0.13.23
+  - cojson-transport-ws@0.13.23
+  - jazz-inspector@0.13.23
+
+## 0.0.140
+
+### Patch Changes
+
+- Updated dependencies [7de210f]
+- Updated dependencies [e14e61f]
+  - jazz-inspector@0.13.21
+  - cojson@0.13.21
+  - cojson-transport-ws@0.13.21
+
 ## 0.0.139
 
 ### Patch Changes

examples/inspector/package.json

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

examples/multi-cursors/CHANGELOG.md

@@ -1,5 +1,20 @@
 # multi-cursors
 
+## 0.0.83
+
+### Patch Changes
+
+- Updated dependencies [02a240c]
+  - jazz-tools@0.13.23
+  - jazz-react@0.13.23
+
+## 0.0.82
+
+### Patch Changes
+
+- jazz-react@0.13.21
+- jazz-tools@0.13.21
+
 ## 0.0.81
 
 ### Patch Changes

examples/multi-cursors/package.json

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

examples/multiauth/CHANGELOG.md

@@ -1,5 +1,22 @@
 # multiauth
 
+## 0.0.31
+
+### Patch Changes
+
+- Updated dependencies [02a240c]
+  - jazz-tools@0.13.23
+  - jazz-react@0.13.23
+  - jazz-react-auth-clerk@0.13.23
+
+## 0.0.30
+
+### Patch Changes
+
+- jazz-react@0.13.21
+- jazz-react-auth-clerk@0.13.21
+- jazz-tools@0.13.21
+
 ## 0.0.29
 
 ### Patch Changes

examples/multiauth/package.json

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

examples/music-player/CHANGELOG.md

@@ -1,5 +1,23 @@
 # jazz-example-musicplayer
 
+## 0.0.112
+
+### Patch Changes
+
+- Updated dependencies [02a240c]
+  - jazz-tools@0.13.23
+  - jazz-inspector@0.13.23
+  - jazz-react@0.13.23
+
+## 0.0.111
+
+### Patch Changes
+
+- Updated dependencies [7de210f]
+  - jazz-inspector@0.13.21
+  - jazz-react@0.13.21
+  - jazz-tools@0.13.21
+
 ## 0.0.110
 
 ### Patch Changes

examples/music-player/package.json

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

examples/organization/CHANGELOG.md

@@ -1,5 +1,20 @@
 # organization
 
+## 0.0.83
+
+### Patch Changes
+
+- Updated dependencies [02a240c]
+  - jazz-tools@0.13.23
+  - jazz-react@0.13.23
+
+## 0.0.82
+
+### Patch Changes
+
+- jazz-react@0.13.21
+- jazz-tools@0.13.21
+
 ## 0.0.81
 
 ### Patch Changes

examples/organization/package.json

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

examples/passkey-svelte/CHANGELOG.md

@@ -1,5 +1,28 @@
 # passkey-svelte
 
+## 0.0.78
+
+### Patch Changes
+
+- Updated dependencies [ec546b4]
+  - jazz-svelte@0.13.24
+
+## 0.0.77
+
+### Patch Changes
+
+- Updated dependencies [3431076]
+- Updated dependencies [02a240c]
+  - jazz-svelte@0.13.23
+  - jazz-tools@0.13.23
+
+## 0.0.76
+
+### Patch Changes
+
+- jazz-svelte@0.13.21
+- jazz-tools@0.13.21
+
 ## 0.0.75
 
 ### Patch Changes

examples/passkey-svelte/package.json

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

examples/passkey/CHANGELOG.md

@@ -1,5 +1,20 @@
 # minimal-auth-passkey
 
+## 0.0.88
+
+### Patch Changes
+
+- Updated dependencies [02a240c]
+  - jazz-tools@0.13.23
+  - jazz-react@0.13.23
+
+## 0.0.87
+
+### Patch Changes
+
+- jazz-react@0.13.21
+- jazz-tools@0.13.21
+
 ## 0.0.86
 
 ### Patch Changes

examples/passkey/package.json

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

examples/passphrase/CHANGELOG.md

@@ -1,5 +1,20 @@
 # passphrase
 
+## 0.0.85
+
+### Patch Changes
+
+- Updated dependencies [02a240c]
+  - jazz-tools@0.13.23
+  - jazz-react@0.13.23
+
+## 0.0.84
+
+### Patch Changes
+
+- jazz-react@0.13.21
+- jazz-tools@0.13.21
+
 ## 0.0.83
 
 ### Patch Changes

examples/passphrase/package.json

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

examples/password-manager/CHANGELOG.md

@@ -1,5 +1,20 @@
 # jazz-password-manager
 
+## 0.0.109
+
+### Patch Changes
+
+- Updated dependencies [02a240c]
+  - jazz-tools@0.13.23
+  - jazz-react@0.13.23
+
+## 0.0.108
+
+### Patch Changes
+
+- jazz-react@0.13.21
+- jazz-tools@0.13.21
+
 ## 0.0.107
 
 ### Patch Changes

examples/password-manager/package.json

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

examples/pets/CHANGELOG.md

@@ -1,5 +1,20 @@
 # jazz-example-pets
 
+## 0.0.207
+
+### Patch Changes
+
+- Updated dependencies [02a240c]
+  - jazz-tools@0.13.23
+  - jazz-react@0.13.23
+
+## 0.0.206
+
+### Patch Changes
+
+- jazz-react@0.13.21
+- jazz-tools@0.13.21
+
 ## 0.0.205
 
 ### Patch Changes

examples/pets/package.json

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

examples/reactions/CHANGELOG.md

@@ -1,5 +1,20 @@
 # reactions
 
+## 0.0.87
+
+### Patch Changes
+
+- Updated dependencies [02a240c]
+  - jazz-tools@0.13.23
+  - jazz-react@0.13.23
+
+## 0.0.86
+
+### Patch Changes
+
+- jazz-react@0.13.21
+- jazz-tools@0.13.21
+
 ## 0.0.85
 
 ### Patch Changes

examples/reactions/package.json

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

examples/richtext/CHANGELOG.md

@@ -1,5 +1,22 @@
 # richtext
 
+## 0.0.77
+
+### Patch Changes
+
+- Updated dependencies [02a240c]
+  - jazz-tools@0.13.23
+  - jazz-react@0.13.23
+  - jazz-richtext-prosemirror@0.1.11
+
+## 0.0.76
+
+### Patch Changes
+
+- jazz-react@0.13.21
+- jazz-tools@0.13.21
+- jazz-richtext-prosemirror@0.1.10
+
 ## 0.0.75
 
 ### Patch Changes

examples/richtext/package.json

@@ -1,7 +1,7 @@
 {
   "name": "richtext",
   "private": true,
-  "version": "0.0.75",
+  "version": "0.0.77",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/todo-vue/CHANGELOG.md

@@ -1,5 +1,22 @@
 # todo-vue
 
+## 0.0.91
+
+### Patch Changes
+
+- Updated dependencies [02a240c]
+  - jazz-tools@0.13.23
+  - jazz-browser@0.13.23
+  - jazz-vue@0.13.23
+
+## 0.0.90
+
+### Patch Changes
+
+- jazz-browser@0.13.21
+- jazz-tools@0.13.21
+- jazz-vue@0.13.21
+
 ## 0.0.89
 
 ### Patch Changes

examples/todo-vue/package.json

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

examples/todo/CHANGELOG.md

@@ -1,5 +1,20 @@
 # jazz-example-todo
 
+## 0.0.206
+
+### Patch Changes
+
+- Updated dependencies [02a240c]
+  - jazz-tools@0.13.23
+  - jazz-react@0.13.23
+
+## 0.0.205
+
+### Patch Changes
+
+- jazz-react@0.13.21
+- jazz-tools@0.13.21
+
 ## 0.0.204
 
 ### Patch Changes

examples/todo/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-todo",
   "private": true,
-  "version": "0.0.204",
+  "version": "0.0.206",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/version-history/CHANGELOG.md

@@ -1,5 +1,23 @@
 # version-history
 
+## 0.0.85
+
+### Patch Changes
+
+- Updated dependencies [02a240c]
+  - jazz-tools@0.13.23
+  - jazz-inspector@0.13.23
+  - jazz-react@0.13.23
+
+## 0.0.84
+
+### Patch Changes
+
+- Updated dependencies [7de210f]
+  - jazz-inspector@0.13.21
+  - jazz-react@0.13.21
+  - jazz-tools@0.13.21
+
 ## 0.0.83
 
 ### Patch Changes

examples/version-history/package.json

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

homepage/homepage/content/docs/inspector.mdx

@@ -13,15 +13,14 @@ For now, you can get your account credentials from the `jazz-logged-in-secret` l
 ## Exporting current account to Inspector from your app [!framework=react,svelte,vue,vanilla]
 
 In development mode, you can launch the Inspector from your Jazz app to inspect your account by pressing `Cmd+J`.
-</ContentByFramework>
 
-<ContentByFramework framework="react">
-## Embedding the Inspector widget into your app [!framework=react]
+## Embedding the Inspector widget into your app [!framework=react,svelte,vue,vanilla]
 
 Alternatively, you can embed the Inspector directly into your app, so you don't need to open a separate window.
 
 Install the package.
 
+<ContentByFramework framework="react">
 <CodeGroup>
 ```sh
 npm install jazz-inspector
@@ -40,9 +39,42 @@ import { JazzInspector } from "jazz-inspector";
 </JazzProvider>
 ```
 </CodeGroup>
+</ContentByFramework>
+
+<ContentByFramework framework={["svelte", "vue", "vanilla"]}>
+<CodeGroup>
+```sh
+npm install jazz-inspector-element
+```
+</CodeGroup>
+
+Render the component.
+
+<CodeGroup>
+```ts
+import "jazz-inspector-element"
+
+document.body.appendChild(document.createElement("jazz-inspector"))
+```
+</CodeGroup>
+
+Or
+
+<CodeGroup>
+```tsx
+import "jazz-inspector-element"
+
+<jazz-inspector />
+```
+</CodeGroup>
+
+</ContentByFramework>
 
 This will show the Inspector launch button on the right of your page.
 
+</ContentByFramework>
+
+<ContentByFramework framework="react">
 ### Positioning the Inspector button [!framework=react]
 
 You can also customize the button position with the following options:
@@ -55,6 +87,7 @@ You can also customize the button position with the following options:
 - top left
 
 For example:
+
 <CodeGroup>
 ```tsx
 <JazzInspector position="bottom left"/>
@@ -68,6 +101,12 @@ For example:
     <JazzIcon className="w-full h-auto"/>
   </button>
 </div>
+</ContentByFramework>
 
+<ContentByFramework framework="react">
 Check out the [music player app](https://github.com/garden-co/jazz/blob/main/examples/music-player/src/2_main.tsx) for a full example.
 </ContentByFramework>
+
+<ContentByFramework framework="svelte">
+Check out the [file share app](https://github.com/garden-co/jazz/blob/main/examples/file-share-svelte/src/src/routes/%2Blayout.svelte) for a full example.
+</ContentByFramework>

packages/cojson-storage-indexeddb/CHANGELOG.md

@@ -1,5 +1,21 @@
 # cojson-storage-indexeddb
 
+## 0.13.23
+
+### Patch Changes
+
+- Updated dependencies [6b781cf]
+  - cojson@0.13.23
+  - cojson-storage@0.13.23
+
+## 0.13.21
+
+### Patch Changes
+
+- Updated dependencies [e14e61f]
+  - cojson@0.13.21
+  - cojson-storage@0.13.21
+
 ## 0.13.20
 
 ### Patch Changes

packages/cojson-storage-indexeddb/package.json

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

packages/cojson-storage-sqlite/CHANGELOG.md

@@ -1,5 +1,21 @@
 # cojson-storage-sqlite
 
+## 0.13.23
+
+### Patch Changes
+
+- Updated dependencies [6b781cf]
+  - cojson@0.13.23
+  - cojson-storage@0.13.23
+
+## 0.13.21
+
+### Patch Changes
+
+- Updated dependencies [e14e61f]
+  - cojson@0.13.21
+  - cojson-storage@0.13.21
+
 ## 0.13.20
 
 ### Patch Changes

packages/cojson-storage-sqlite/package.json

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

packages/cojson-storage/CHANGELOG.md

@@ -1,5 +1,19 @@
 # cojson-storage
 
+## 0.13.23
+
+### Patch Changes
+
+- Updated dependencies [6b781cf]
+  - cojson@0.13.23
+
+## 0.13.21
+
+### Patch Changes
+
+- Updated dependencies [e14e61f]
+  - cojson@0.13.21
+
 ## 0.13.20
 
 ### Patch Changes

packages/cojson-storage/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cojson-storage",
-  "version": "0.13.20",
+  "version": "0.13.23",
   "main": "dist/index.js",
   "type": "module",
   "types": "dist/index.d.ts",

packages/cojson-transport-ws/CHANGELOG.md

@@ -1,5 +1,19 @@
 # cojson-transport-nodejs-ws
 
+## 0.13.23
+
+### Patch Changes
+
+- Updated dependencies [6b781cf]
+  - cojson@0.13.23
+
+## 0.13.21
+
+### Patch Changes
+
+- Updated dependencies [e14e61f]
+  - cojson@0.13.21
+
 ## 0.13.20
 
 ### Patch Changes

packages/cojson-transport-ws/package.json

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

packages/cojson/CHANGELOG.md

@@ -1,5 +1,17 @@
 # cojson
 
+## 0.13.23
+
+### Patch Changes
+
+- 6b781cf: Add getBinaryStreamInfo to RawBinaryCoStreamView to make it possible to retrieve file info without processing all the chunks
+
+## 0.13.21
+
+### Patch Changes
+
+- e14e61f: Optimized the acceptInvite flow
+
 ## 0.13.20
 
 ### Patch Changes

packages/cojson/package.json

@@ -25,7 +25,7 @@
   },
   "type": "module",
   "license": "MIT",
-  "version": "0.13.20",
+  "version": "0.13.23",
   "devDependencies": {
     "@opentelemetry/sdk-metrics": "^2.0.0",
     "typescript": "catalog:"

packages/cojson/src/coValueCore/coValueCore.ts

@@ -311,14 +311,10 @@ export class CoValueCore {
     }
   }
 
-  contentInClonedNodeWithDifferentAccount(
-    controlledAccountOrAgent: ControlledAccountOrAgent,
-  ): RawCoValue {
-    const newNode = this.node.cloneWithDifferentAccount(
-      controlledAccountOrAgent,
-    );
-
-    return newNode.expectCoValueLoaded(this.id).getCurrentContent();
+  contentInClonedNodeWithDifferentAccount(account: ControlledAccountOrAgent) {
+    return this.node
+      .loadCoValueAsDifferentAgent(this.id, account.agentSecret, account.id)
+      .getCurrentContent();
   }
 
   knownState(): CoValueKnownState {

packages/cojson/src/coValues/coStream.ts

@@ -319,11 +319,7 @@ export class RawBinaryCoStreamView<
     return lastItem?.type === "end";
   }
 
-  getBinaryChunks(
-    allowUnfinished?: boolean,
-  ):
-    | (BinaryStreamInfo & { chunks: Uint8Array[]; finished: boolean })
-    | undefined {
+  getBinaryStreamInfo(): BinaryStreamInfo | undefined {
     const items = this.getSingleStream();
 
     // No active streams
@@ -336,6 +332,27 @@ export class RawBinaryCoStreamView<
       return;
     }
 
+    return {
+      mimeType: start.mimeType,
+      fileName: start.fileName,
+      totalSizeBytes: start.totalSizeBytes,
+    };
+  }
+
+  getBinaryChunks(
+    allowUnfinished?: boolean,
+  ):
+    | (BinaryStreamInfo & { chunks: Uint8Array[]; finished: boolean })
+    | undefined {
+    const items = this.getSingleStream();
+
+    // No active streams
+    if (!items) return;
+
+    const info = this.getBinaryStreamInfo();
+
+    if (!info) return;
+
     const end = items[items.length - 1];
 
     if (end?.type !== "end" && !allowUnfinished) return;
@@ -360,9 +377,7 @@ export class RawBinaryCoStreamView<
     }
 
     return {
-      mimeType: start.mimeType,
-      fileName: start.fileName,
-      totalSizeBytes: start.totalSizeBytes,
+      ...info,
       chunks,
       finished,
     };

packages/cojson/src/localNode.ts

@@ -433,32 +433,44 @@ export class LocalNode {
     groupOrOwnedValueID: CoID<T>,
     inviteSecret: InviteSecret,
   ): Promise<void> {
-    const groupOrOwnedValue = await this.load(groupOrOwnedValueID);
+    const value = await this.load(groupOrOwnedValueID);
 
-    if (groupOrOwnedValue === "unavailable") {
+    if (value === "unavailable") {
       throw new Error(
         "Trying to accept invite: Group/owned value unavailable from all peers",
       );
     }
 
-    if (
-      groupOrOwnedValue.core.verified.header.ruleset.type === "ownedByGroup"
-    ) {
-      return this.acceptInvite(
-        groupOrOwnedValue.core.verified.header.ruleset.group as CoID<RawGroup>,
-        inviteSecret,
-      );
-    } else if (
-      groupOrOwnedValue.core.verified.header.ruleset.type !== "group"
-    ) {
-      throw new Error("Can only accept invites to groups");
+    const ruleset = value.core.verified.header.ruleset;
+
+    let group: RawGroup;
+
+    if (ruleset.type === "unsafeAllowAll") {
+      throw new Error("Can only accept invites to values owned by groups");
     }
 
-    const group = expectGroup(groupOrOwnedValue);
+    if (ruleset.type === "ownedByGroup") {
+      const owner = await this.load(ruleset.group as CoID<RawGroup>);
+
+      if (owner === "unavailable") {
+        throw new Error(
+          "Trying to accept invite: CoValue owner unavailable from all peers",
+        );
+      }
+
+      group = expectGroup(owner);
+    } else {
+      group = expectGroup(value);
+    }
+
+    if (group.core.verified.header.meta?.type === "account") {
+      throw new Error("Can't accept invites to values owned by accounts");
+    }
 
     const inviteAgentSecret = this.crypto.agentSecretFromSecretSeed(
       secretSeedFromInviteSecret(inviteSecret),
     );
+
     const inviteAgentID = this.crypto.getAgentID(inviteAgentSecret);
 
     const inviteRole = await new Promise((resolve, reject) => {
@@ -493,9 +505,10 @@ export class LocalNode {
     }
 
     const groupAsInvite = expectGroup(
-      group.core.contentInClonedNodeWithDifferentAccount(
-        new ControlledAgent(inviteAgentSecret, this.crypto),
-      ),
+      this.loadCoValueAsDifferentAgent(
+        group.id,
+        inviteAgentSecret,
+      ).getCurrentContent(),
     );
 
     groupAsInvite.addMemberInternal(
@@ -524,7 +537,7 @@ export class LocalNode {
 
     if (!coValue.isAvailable()) {
       throw new Error(
-        `${expectation ? expectation + ": " : ""}CoValue ${id} not yet loaded. Current state: ${JSON.stringify(coValue)}`,
+        `${expectation ? expectation + ": " : ""}CoValue ${id} not yet loaded.`,
       );
     }
     return coValue;
@@ -621,46 +634,56 @@ export class LocalNode {
     return group;
   }
 
-  /** @internal */
-  cloneWithDifferentAccount(
-    controlledAccountOrAgent: ControlledAccountOrAgent,
-  ): LocalNode {
+  loadCoValueAsDifferentAgent(
+    id: RawCoID,
+    secret: AgentSecret,
+    accountId?: RawAccountID | AgentID,
+  ) {
+    const agent = new ControlledAgent(secret, this.crypto);
+
     const newNode = new LocalNode(
-      controlledAccountOrAgent.agentSecret,
-      this.crypto.newRandomSessionID(controlledAccountOrAgent.id),
+      secret,
+      this.crypto.newRandomSessionID(accountId || agent.id),
       this.crypto,
     );
 
-    newNode.cloneVerifiedStateFrom(this);
+    newNode.cloneVerifiedStateFrom(this, id);
 
-    return newNode;
+    return newNode.expectCoValueLoaded(id);
   }
 
   /** @internal */
-  cloneVerifiedStateFrom(otherNode: LocalNode) {
-    const coValuesToCopy = Array.from(otherNode.coValues.entries());
+  cloneVerifiedStateFrom(otherNode: LocalNode, id: RawCoID) {
+    const coValuesIdsToCopy = [id];
 
-    while (coValuesToCopy.length > 0) {
-      const [coValueID, coValue] = coValuesToCopy[coValuesToCopy.length - 1]!;
+    // Scan all the dependencies and add them to the list
+    for (let i = 0; i < coValuesIdsToCopy.length; i++) {
+      const coValueID = coValuesIdsToCopy[i]!;
+      const coValue = otherNode.getCoValue(coValueID);
 
       if (!coValue.isAvailable()) {
-        coValuesToCopy.pop();
         continue;
-      } else {
-        const allDepsCopied = coValue
-          .getDependedOnCoValues()
-          .every((dep) => this.coValues.get(dep)?.isAvailable());
-
-        if (!allDepsCopied) {
-          // move to end of queue
-          coValuesToCopy.unshift(coValuesToCopy.pop()!);
-          continue;
-        }
-
-        this.putCoValue(coValueID, coValue.verified);
-
-        coValuesToCopy.pop();
       }
+
+      for (const dep of coValue.getDependedOnCoValues()) {
+        coValuesIdsToCopy.push(dep);
+      }
+    }
+
+    // Copy the coValue all the dependencies by following the dependency order
+    while (coValuesIdsToCopy.length > 0) {
+      const coValueID = coValuesIdsToCopy.pop()!;
+      const coValue = otherNode.getCoValue(coValueID);
+
+      if (!coValue.isAvailable()) {
+        continue;
+      }
+
+      if (this.coValues.get(coValueID)?.isAvailable()) {
+        continue;
+      }
+
+      this.putCoValue(coValueID, coValue.verified);
     }
   }
 

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

@@ -512,7 +512,6 @@ test("Admins can set group read key and then use it to create private transactio
   const { node, groupCore, admin } = newGroup();
 
   const reader1 = createAccountInNode(node);
-
   const reader2 = createAccountInNode(node);
 
   const { secret: readKey, id: readKeyID } = Crypto.newRandomKeySecret();
@@ -583,6 +582,9 @@ test("Admins can set group read key and then use it to create private transactio
     childObject.contentInClonedNodeWithDifferentAccount(reader2),
   );
 
+  // Need to copy the account coValue to the new node to be able to read the readKey
+  childObjectAsReader2.core.node.cloneVerifiedStateFrom(node, reader2.id);
+
   expect(childObjectAsReader2.core.getCurrentReadKey().secret).toEqual(readKey);
   expect(childObjectAsReader2.get("foo")).toEqual("bar");
 });
@@ -1113,9 +1115,10 @@ test("Admins can create an adminInvite, which can add an admin (high-level)", as
   const invitedAdminSecret = Crypto.newRandomAgentSecret();
   const invitedAdminID = Crypto.getAgentID(invitedAdminSecret);
 
-  const nodeAsInvitedAdmin = node.cloneWithDifferentAccount(
-    new ControlledAgent(invitedAdminSecret, Crypto),
-  );
+  const nodeAsInvitedAdmin = node.loadCoValueAsDifferentAgent(
+    group.id,
+    invitedAdminSecret,
+  ).node;
 
   await nodeAsInvitedAdmin.acceptInvite(group.id, inviteSecret);
 
@@ -1219,9 +1222,10 @@ test("Admins can create a writerInvite, which can add a writer (high-level)", as
   const invitedWriterSecret = Crypto.newRandomAgentSecret();
   const invitedWriterID = Crypto.getAgentID(invitedWriterSecret);
 
-  const nodeAsInvitedWriter = node.cloneWithDifferentAccount(
-    new ControlledAgent(invitedWriterSecret, Crypto),
-  );
+  const nodeAsInvitedWriter = node.loadCoValueAsDifferentAgent(
+    group.id,
+    invitedWriterSecret,
+  ).node;
 
   await nodeAsInvitedWriter.acceptInvite(group.id, inviteSecret);
 
@@ -1308,9 +1312,10 @@ test("Admins can create a readerInvite, which can add a reader (high-level)", as
   const invitedReaderSecret = Crypto.newRandomAgentSecret();
   const invitedReaderID = Crypto.getAgentID(invitedReaderSecret);
 
-  const nodeAsInvitedReader = node.cloneWithDifferentAccount(
-    new ControlledAgent(invitedReaderSecret, Crypto),
-  );
+  const nodeAsInvitedReader = node.loadCoValueAsDifferentAgent(
+    group.id,
+    invitedReaderSecret,
+  ).node;
 
   await nodeAsInvitedReader.acceptInvite(group.id, inviteSecret);
 

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

@@ -0,0 +1,163 @@
+import { beforeEach, describe, expect, test } from "vitest";
+
+import { expectList, expectMap } from "../coValue";
+import { WasmCrypto } from "../crypto/WasmCrypto";
+import {
+  SyncMessagesLog,
+  loadCoValueOrFail,
+  setupTestNode,
+  waitFor,
+} from "./testUtils";
+
+const Crypto = await WasmCrypto.create();
+let jazzCloud = setupTestNode({ isSyncServer: true });
+
+beforeEach(async () => {
+  SyncMessagesLog.clear();
+  jazzCloud = setupTestNode({ isSyncServer: true });
+});
+
+describe("invitations sync", () => {
+  test("invite a client to a group", async () => {
+    const client = setupTestNode();
+    client.connectToSyncServer({
+      ourName: "invite-provider",
+    });
+    const client2 = setupTestNode();
+    client2.connectToSyncServer({
+      ourName: "invite-consumer",
+    });
+
+    const group = client.node.createGroup();
+    const map = group.createMap();
+    map.set("hello", "world");
+
+    await map.core.waitForSync();
+
+    const invite = group.createInvite("reader");
+
+    await group.core.waitForSync();
+    SyncMessagesLog.clear();
+
+    await client2.node.acceptInvite(map.id, invite);
+
+    const mapOnClient2 = await loadCoValueOrFail(client2.node, map.id);
+    expect(mapOnClient2.get("hello")).toEqual("world");
+
+    expect(
+      SyncMessagesLog.getMessages({
+        Group: group.core,
+        Map: map.core,
+      }),
+    ).toMatchInlineSnapshot(`
+      [
+        "invite-consumer -> server | LOAD Map sessions: empty",
+        "server -> invite-consumer | CONTENT Group header: true new: After: 0 New: 5",
+        "invite-consumer -> server | KNOWN Group sessions: header/5",
+        "server -> invite-consumer | CONTENT Map header: true new: After: 0 New: 1",
+        "invite-consumer -> server | KNOWN Map sessions: header/1",
+      ]
+    `);
+  });
+
+  test("invite a client to a group with parents", async () => {
+    const client = setupTestNode();
+    client.connectToSyncServer({
+      ourName: "invite-provider",
+    });
+    const client2 = setupTestNode();
+    client2.connectToSyncServer({
+      ourName: "invite-consumer",
+    });
+
+    const parentGroup = client.node.createGroup();
+    const group = client.node.createGroup();
+
+    group.extend(parentGroup);
+    const map = group.createMap();
+    map.set("hello", "world");
+
+    await map.core.waitForSync();
+
+    const invite = group.createInvite("reader");
+
+    await group.core.waitForSync();
+    SyncMessagesLog.clear();
+
+    await client2.node.acceptInvite(map.id, invite);
+
+    const mapOnClient2 = await loadCoValueOrFail(client2.node, map.id);
+    expect(mapOnClient2.get("hello")).toEqual("world");
+
+    expect(
+      SyncMessagesLog.getMessages({
+        Group: group.core,
+        ParentGroup: parentGroup.core,
+        Map: map.core,
+      }),
+    ).toMatchInlineSnapshot(`
+      [
+        "invite-consumer -> server | LOAD Map sessions: empty",
+        "server -> invite-consumer | CONTENT ParentGroup header: true new: After: 0 New: 4",
+        "invite-consumer -> server | KNOWN ParentGroup sessions: header/4",
+        "server -> invite-consumer | CONTENT Group header: true new: After: 0 New: 7",
+        "invite-consumer -> server | KNOWN Group sessions: header/7",
+        "server -> invite-consumer | CONTENT Map header: true new: After: 0 New: 1",
+        "invite-consumer -> server | KNOWN Map sessions: header/1",
+      ]
+    `);
+  });
+
+  test("invite a client to a parent group", async () => {
+    const client = setupTestNode();
+    client.connectToSyncServer({
+      ourName: "invite-provider",
+    });
+    const client2 = setupTestNode();
+    client2.connectToSyncServer({
+      ourName: "invite-consumer",
+    });
+
+    const parentGroup = client.node.createGroup();
+    const group = client.node.createGroup();
+
+    group.extend(parentGroup);
+    const map = group.createMap();
+    map.set("hello", "world");
+
+    await map.core.waitForSync();
+
+    const invite = parentGroup.createInvite("reader");
+
+    await parentGroup.core.waitForSync();
+    SyncMessagesLog.clear();
+
+    await client2.node.acceptInvite(parentGroup.id, invite);
+
+    const mapOnClient2 = await loadCoValueOrFail(client2.node, map.id);
+    expect(mapOnClient2.get("hello")).toEqual("world");
+
+    expect(
+      SyncMessagesLog.getMessages({
+        Group: group.core,
+        ParentGroup: parentGroup.core,
+        Map: map.core,
+      }),
+    ).toMatchInlineSnapshot(`
+      [
+        "invite-consumer -> server | LOAD ParentGroup sessions: empty",
+        "server -> invite-consumer | CONTENT ParentGroup header: true new: After: 0 New: 6",
+        "invite-consumer -> server | KNOWN ParentGroup sessions: header/6",
+        "invite-consumer -> server | LOAD Map sessions: empty",
+        "server -> invite-consumer | CONTENT Group header: true new: After: 0 New: 5",
+        "invite-consumer -> server | KNOWN Group sessions: header/5",
+        "server -> invite-consumer | CONTENT Map header: true new: After: 0 New: 1",
+        "invite-consumer -> server | CONTENT ParentGroup header: false new: After: 0 New: 2",
+        "server -> invite-consumer | KNOWN ParentGroup sessions: header/8",
+        "server -> invite-provider | CONTENT ParentGroup header: false new: After: 0 New: 2",
+        "invite-consumer -> server | KNOWN Map sessions: header/1",
+        "invite-provider -> server | KNOWN ParentGroup sessions: header/8",
+      ]
+    `);
+  });
+});

packages/cojson/src/utils.ts

@@ -1,9 +0,0 @@
-export function parseError(e: unknown): {
-  message: string | null;
-  stack: string | null;
-} {
-  return {
-    message: e instanceof Error ? e.message : null,
-    stack: e instanceof Error ? (e.stack ?? null) : null,
-  };
-}

packages/jazz-auth-clerk/CHANGELOG.md

@@ -1,5 +1,24 @@
 # jazz-auth-clerk
 
+## 0.13.23
+
+### Patch Changes
+
+- Updated dependencies [6b781cf]
+- Updated dependencies [02a240c]
+  - cojson@0.13.23
+  - jazz-tools@0.13.23
+  - jazz-browser@0.13.23
+
+## 0.13.21
+
+### Patch Changes
+
+- Updated dependencies [e14e61f]
+  - cojson@0.13.21
+  - jazz-browser@0.13.21
+  - jazz-tools@0.13.21
+
 ## 0.13.20
 
 ### Patch Changes

packages/jazz-auth-clerk/package.json

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

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

@@ -1,5 +1,20 @@
 # jazz-browser-media-images
 
+## 0.13.23
+
+### Patch Changes
+
+- Updated dependencies [02a240c]
+  - jazz-tools@0.13.23
+  - jazz-browser@0.13.23
+
+## 0.13.21
+
+### Patch Changes
+
+- jazz-browser@0.13.21
+- jazz-tools@0.13.21
+
 ## 0.13.20
 
 ### Patch Changes

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

@@ -1,6 +1,6 @@
 {
   "name": "jazz-browser-media-images",
-  "version": "0.13.20",
+  "version": "0.13.23",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -8,8 +8,8 @@
   "dependencies": {
     "@types/image-blob-reduce": "^4.1.1",
     "image-blob-reduce": "^4.1.0",
-    "jazz-browser": "workspace:0.13.20",
-    "jazz-tools": "workspace:0.13.20",
+    "jazz-browser": "workspace:0.13.23",
+    "jazz-tools": "workspace:0.13.23",
     "pica": "^9.0.1"
   },
   "scripts": {

packages/jazz-browser/CHANGELOG.md

@@ -1,5 +1,26 @@
 # jazz-browser
 
+## 0.13.23
+
+### Patch Changes
+
+- Updated dependencies [6b781cf]
+- Updated dependencies [02a240c]
+  - cojson@0.13.23
+  - jazz-tools@0.13.23
+  - cojson-storage-indexeddb@0.13.23
+  - cojson-transport-ws@0.13.23
+
+## 0.13.21
+
+### Patch Changes
+
+- Updated dependencies [e14e61f]
+  - cojson@0.13.21
+  - cojson-storage-indexeddb@0.13.21
+  - cojson-transport-ws@0.13.21
+  - jazz-tools@0.13.21
+
 ## 0.13.20
 
 ### Patch Changes

packages/jazz-browser/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jazz-browser",
-  "version": "0.13.20",
+  "version": "0.13.23",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/jazz-expo/CHANGELOG.md

@@ -1,5 +1,37 @@
 # jazz-browser
 
+## 0.13.23
+
+### Patch Changes
+
+- Updated dependencies [6b781cf]
+- Updated dependencies [02a240c]
+  - cojson@0.13.23
+  - jazz-tools@0.13.23
+  - cojson-transport-ws@0.13.23
+  - jazz-auth-clerk@0.13.23
+  - jazz-react-core@0.13.23
+  - jazz-react-native-core@0.13.23
+
+## 0.13.22
+
+### Patch Changes
+
+- Updated dependencies [b0c2a5a]
+  - jazz-react-native-core@0.13.22
+
+## 0.13.21
+
+### Patch Changes
+
+- Updated dependencies [e14e61f]
+  - cojson@0.13.21
+  - cojson-transport-ws@0.13.21
+  - jazz-auth-clerk@0.13.21
+  - jazz-react-core@0.13.21
+  - jazz-react-native-core@0.13.21
+  - jazz-tools@0.13.21
+
 ## 0.13.20
 
 ### Patch Changes

packages/jazz-expo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jazz-expo",
-  "version": "0.13.20",
+  "version": "0.13.23",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

packages/jazz-inspector-element/.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-element/CHANGELOG.md

@@ -0,0 +1,17 @@
+# jazz-inspector-element
+
+## 0.13.23
+
+### Patch Changes
+
+- Updated dependencies [02a240c]
+  - jazz-tools@0.13.23
+  - jazz-inspector@0.13.23
+
+## 0.13.21
+
+### Patch Changes
+
+- Updated dependencies [7de210f]
+  - jazz-inspector@0.13.21
+  - jazz-tools@0.13.21

packages/jazz-inspector-element/README.md

@@ -0,0 +1,31 @@
+# Jazz Inspector Element
+
+A custom element that renders the Jazz Inspector component for inspecting Jazz accounts and CoValues.
+
+## Installation
+
+```bash
+npm install jazz-inspector-element
+```
+
+## Usage
+
+By default jazz-inspector-element relies on `Account.getMe()` to link itself to the Jazz context, so it's enough to mount the html element in a page with a loaded Jazz app:
+
+```ts
+import "jazz-inspector-element"
+
+document.body.appendChild(document.createElement("jazz-inspector"))
+```
+
+OR
+
+```ts
+import "jazz-inspector-element" // somewhere in your app modules
+```
+
+and
+
+```html
+<jazz-inspector />
+```

packages/jazz-inspector-element/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "jazz-inspector-element",
+  "version": "0.13.23",
+  "type": "module",
+  "main": "./dist/main.js",
+  "types": "./dist/main.d.ts",
+  "files": [
+    "dist/**",
+    "src"
+  ],
+  "scripts": {
+    "dev": "rm -rf ./dist && tsc --emitDeclarationOnly --watch & vite build --watch",
+    "build": "rm -rf ./dist && tsc --sourceMap --declaration --outDir dist",
+    "format-and-lint": "biome check .",
+    "format-and-lint:fix": "biome check . --write",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "jazz-inspector": "workspace:*",
+    "jazz-tools": "workspace:*",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "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": "catalog:",
+    "vite": "catalog:"
+  }
+}

packages/jazz-inspector-element/src/element.tsx

@@ -0,0 +1,63 @@
+import { JazzInspectorInternal } from "jazz-inspector";
+import { Account } from "jazz-tools";
+import { createRoot } from "react-dom/client";
+
+export class JazzInspectorElement extends HTMLElement {
+  private root: ReturnType<typeof createRoot> | null = null;
+
+  account: Account | null = null;
+
+  private interval: ReturnType<typeof setInterval> | undefined;
+
+  loadAccount() {
+    try {
+      const value = Account.getMe();
+
+      if (value !== this.account) {
+        this.account = value;
+        this.render();
+      }
+    } catch {}
+  }
+
+  startAccountPolling() {
+    if (this.interval) return;
+
+    this.loadAccount();
+
+    this.interval = setInterval(() => {
+      this.loadAccount();
+    }, 1000);
+  }
+
+  stopAccountPolling() {
+    if (this.interval) clearInterval(this.interval);
+  }
+
+  connectedCallback() {
+    this.root = createRoot(this);
+    this.startAccountPolling();
+    this.render();
+  }
+
+  disconnectedCallback() {
+    this.root?.unmount();
+    this.root = null;
+    this.stopAccountPolling();
+  }
+
+  private render() {
+    if (!this.account) {
+      return;
+    }
+
+    this.root?.render(
+      <JazzInspectorInternal
+        localNode={this.account._raw.core.node}
+        accountId={this.account._raw.id}
+      />,
+    );
+  }
+}
+
+customElements.define("jazz-inspector", JazzInspectorElement);

packages/jazz-inspector-element/src/main.ts

@@ -0,0 +1,3 @@
+if (typeof window !== "undefined" && process.env.NODE_ENV === "development") {
+  import("./element.js");
+}

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

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

packages/jazz-inspector-element/tsconfig.json

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

packages/jazz-inspector-element/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-element/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: "app",
+      formats: ["es"],
+    },
+  },
+});

packages/jazz-inspector/CHANGELOG.md

@@ -1,5 +1,25 @@
 # jazz-inspector
 
+## 0.13.23
+
+### Patch Changes
+
+- Updated dependencies [6b781cf]
+- Updated dependencies [02a240c]
+  - cojson@0.13.23
+  - jazz-tools@0.13.23
+  - jazz-react-core@0.13.23
+
+## 0.13.21
+
+### Patch Changes
+
+- 7de210f: Export JazzInspectorInternal component to be used for jazz-inspector-element
+- Updated dependencies [e14e61f]
+  - cojson@0.13.21
+  - jazz-react-core@0.13.21
+  - jazz-tools@0.13.21
+
 ## 0.13.20
 
 ### Patch Changes

packages/jazz-inspector/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jazz-inspector",
-  "version": "0.13.20",
+  "version": "0.13.23",
   "type": "module",
   "main": "./dist/app.js",
   "types": "./dist/app.d.ts",

packages/jazz-inspector/src/app.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export { JazzInspector } from "./viewer/new-app.js";
+export { JazzInspector, JazzInspectorInternal } from "./viewer/new-app.js";
 export { PageStack } from "./viewer/page-stack.js";
 export { Breadcrumbs } from "./viewer/breadcrumbs.js";
 export { AccountOrGroupText } from "./viewer/account-or-group-text.js";

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

@@ -1,6 +1,6 @@
-import { CoID, RawCoValue } from "cojson";
+import { CoID, LocalNode, RawAccount, RawCoValue } from "cojson";
 import { styled } from "goober";
-import { useAccount } from "jazz-react-core";
+import { useJazzContext } from "jazz-react-core";
 import React, { useState } from "react";
 import { Button } from "../ui/button.js";
 import { Input } from "../ui/input.js";
@@ -8,6 +8,7 @@ import { Breadcrumbs } from "./breadcrumbs.js";
 import { PageStack } from "./page-stack.js";
 import { usePagePath } from "./use-page-path.js";
 
+import { Account } from "jazz-tools";
 import { GlobalStyles } from "../ui/global-styles.js";
 import { Heading } from "../ui/heading.js";
 import { InspectorButton, type Position } from "./inpsector-button.js";
@@ -59,15 +60,34 @@ const OrText = styled("p")`
 `;
 
 export function JazzInspector({ position = "right" }: { position?: Position }) {
+  const context = useJazzContext<Account>();
+  const localNode = context.node;
+  const me = "me" in context ? context.me : undefined;
+
+  if (process.env.NODE_ENV !== "development") return null;
+
+  return (
+    <JazzInspectorInternal
+      position={position}
+      localNode={localNode}
+      accountId={me?._raw.id}
+    />
+  );
+}
+
+export function JazzInspectorInternal({
+  position = "right",
+  localNode,
+  accountId,
+}: {
+  position?: Position;
+  localNode?: LocalNode;
+  accountId?: CoID<RawAccount>;
+}) {
   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;
-
-  if (process.env.NODE_ENV !== "development") return;
-
   const handleCoValueIdSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     if (coValueId) {
@@ -127,17 +147,21 @@ export function JazzInspector({ position = "right" }: { position?: Position }) {
               Inspect CoValue
             </Button>
 
-            <OrText>or</OrText>
+            {accountId && (
+              <>
+                <OrText>or</OrText>
 
-            <Button
-              variant="secondary"
-              onClick={() => {
-                setCoValueId(me._raw.id);
-                setPage(me._raw.id);
-              }}
-            >
-              Inspect my account
-            </Button>
+                <Button
+                  variant="secondary"
+                  onClick={() => {
+                    setCoValueId(accountId);
+                    setPage(accountId);
+                  }}
+                >
+                  Inspect my account
+                </Button>
+              </>
+            )}
           </InitialForm>
         )}
       </PageStack>