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

Version Packages

.github/workflows/code-quality.yml

@@ -25,6 +25,3 @@ jobs:
           version: 2.1.3
       - name: Run Biome
         run: biome ci .
-
-      - name: Check Catalog Dependencies
-        run: node scripts/check-catalog-deps.js

examples/betterauth/package.json

@@ -1,48 +1,48 @@
 {
-	"name": "betterauth",
-	"private": true,
-	"type": "module",
-	"scripts": {
-		"dev": "next dev --turbopack",
-		"build": "next build",
-		"start": "next start",
-		"lint": "next lint",
-		"format-and-lint": "biome check .",
-		"format-and-lint:fix": "biome check . --write",
-		"test:e2e": "playwright test",
-		"test:e2e:ui": "playwright test --ui",
-		"email": "email dev --dir src/components/emails"
-	},
-	"dependencies": {
-		"@icons-pack/react-simple-icons": "^12.8.0",
-		"@radix-ui/react-label": "^2.1.6",
-		"@radix-ui/react-slot": "^1.2.2",
-		"better-auth": "^1.2.4",
-		"better-sqlite3": "^11.9.1",
-		"class-variance-authority": "^0.7.1",
-		"clsx": "^2.1.1",
-		"jazz-react-auth-betterauth": "workspace:*",
-		"jazz-betterauth-client-plugin": "workspace:*",
-		"jazz-betterauth-server-plugin": "workspace:*",
-		"jazz-tools": "workspace:*",
-		"lucide-react": "^0.510.0",
-		"next": "15.3.2",
-		"react": "^18.0.0",
-		"react-dom": "^18.0.0",
-		"sonner": "^2.0.3",
-		"tailwind-merge": "^3.3.0",
-		"tw-animate-css": "^1.2.5"
-	},
-	"devDependencies": {
-		"@biomejs/biome": "1.9.4",
-		"@playwright/test": "^1.50.1",
-		"@tailwindcss/postcss": "^4",
-		"@types/better-sqlite3": "^7.6.12",
-		"@types/node": "^20",
-		"@types/react": "^18",
-		"@types/react-dom": "^18",
-		"react-email": "^4.0.11",
-		"tailwindcss": "^4",
-		"typescript": "^5"
-	}
+  "name": "betterauth",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "format-and-lint": "biome check .",
+    "format-and-lint:fix": "biome check . --write",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "email": "email dev --dir src/components/emails"
+  },
+  "dependencies": {
+    "@icons-pack/react-simple-icons": "^12.8.0",
+    "@radix-ui/react-label": "^2.1.6",
+    "@radix-ui/react-slot": "^1.2.2",
+    "better-auth": "^1.2.4",
+    "better-sqlite3": "^11.9.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "jazz-react-auth-betterauth": "workspace:*",
+    "jazz-betterauth-client-plugin": "workspace:*",
+    "jazz-betterauth-server-plugin": "workspace:*",
+    "jazz-tools": "workspace:*",
+    "lucide-react": "^0.510.0",
+    "next": "15.3.2",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "sonner": "^2.0.3",
+    "tailwind-merge": "^3.3.0",
+    "tw-animate-css": "^1.2.5"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.1.3",
+    "@playwright/test": "^1.50.1",
+    "@tailwindcss/postcss": "^4",
+    "@types/better-sqlite3": "^7.6.12",
+    "@types/node": "^20",
+    "@types/react": "19.1.0",
+    "@types/react-dom": "19.1.0",
+    "react-email": "^4.0.11",
+    "tailwindcss": "^4",
+    "typescript": "5.6.2"
+  }
 }

examples/chat-rn-expo/package.json

@@ -29,4 +29,4 @@
     "typescript": "~5.8.3"
   },
   "private": true
-}
+}

examples/chat-svelte/CHANGELOG.md

@@ -1,5 +1,39 @@
 # passkey-svelte
 
+## 0.0.120
+
+### Patch Changes
+
+- jazz-tools@0.17.7
+
+## 0.0.119
+
+### Patch Changes
+
+- Updated dependencies [82de51c]
+- Updated dependencies [694b168]
+  - jazz-tools@0.17.6
+
+## 0.0.118
+
+### Patch Changes
+
+- Updated dependencies [5963658]
+  - jazz-tools@0.17.5
+
+## 0.0.117
+
+### Patch Changes
+
+- Updated dependencies [7dd3d00]
+  - jazz-tools@0.17.4
+
+## 0.0.116
+
+### Patch Changes
+
+- jazz-tools@0.17.3
+
 ## 0.0.115
 
 ### Patch Changes

examples/chat-svelte/package.json

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

examples/chat/package.json

@@ -30,6 +30,6 @@
     "postcss": "^8.4.40",
     "tailwindcss": "^4.1.10",
     "typescript": "5.6.2",
-    "vite": "^6.3.5"
+    "vite": "6.3.5"
   }
-}
+}

examples/clerk-expo/package.json

@@ -28,8 +28,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "@types/react": "~19.0.10",
+    "@types/react": "^19.0.10",
     "typescript": "~5.8.3"
   },
   "private": true
-}
+}

examples/clerk/package.json

@@ -19,12 +19,12 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.50.1",
-    "@biomejs/biome": "1.9.4",
+    "@biomejs/biome": "2.1.3",
     "@types/react": "19.1.0",
     "@types/react-dom": "19.1.0",
     "@vitejs/plugin-react": "^4.5.1",
     "globals": "^15.11.0",
     "typescript": "5.6.2",
-    "vite": "^6.3.5"
+    "vite": "6.3.5"
   }
-}
+}

examples/community-clerk-vue/tests/expiration.spec.ts

@@ -1,7 +1,8 @@
 import { clerk } from "@clerk/testing/playwright";
 import { expect, test } from "@playwright/test";
 
-test("login & expiration", async ({ page, context }) => {
+// Flaky on CI
+test.skip("login & expiration", async ({ page, context }) => {
   // Clear cookies first
   await context.clearCookies();
 

examples/filestream/package.json

@@ -15,7 +15,7 @@
     "react-dom": "19.1.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.9.4",
+    "@biomejs/biome": "2.1.3",
     "@tailwindcss/postcss": "^4.1.10",
     "@types/react": "19.1.0",
     "@types/react-dom": "19.1.0",
@@ -25,6 +25,6 @@
     "postcss": "^8.5.3",
     "tailwindcss": "^4.1.10",
     "typescript": "5.6.2",
-    "vite": "^6.3.5"
+    "vite": "6.3.5"
   }
 }

examples/form/package.json

@@ -16,7 +16,7 @@
     "react-dom": "19.1.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.9.4",
+    "@biomejs/biome": "2.1.3",
     "@playwright/test": "^1.50.1",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/postcss": "^4.1.10",
@@ -28,6 +28,6 @@
     "postcss": "^8.4.40",
     "tailwindcss": "^4.1.10",
     "typescript": "5.6.2",
-    "vite": "^6.3.5"
+    "vite": "6.3.5"
   }
 }

examples/image-upload/package.json

@@ -15,14 +15,14 @@
     "react-dom": "19.1.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.9.4",
+    "@biomejs/biome": "2.1.3",
     "@tailwindcss/postcss": "^4.1.10",
     "@types/react": "19.1.0",
     "@types/react-dom": "19.1.0",
     "@vitejs/plugin-react": "^4.5.1",
     "globals": "^15.11.0",
     "typescript": "5.6.2",
-    "vite": "^6.3.5",
+    "vite": "6.3.5",
     "postcss": "^8.4.40",
     "tailwindcss": "^4.1.10"
   }

examples/inspector/package.json

@@ -30,6 +30,6 @@
     "postcss": "^8.4.40",
     "tailwindcss": "^4.1.10",
     "typescript": "5.6.2",
-    "vite": "^6.3.5"
+    "vite": "6.3.5"
   }
 }

examples/multi-cursors/package.json

@@ -18,7 +18,7 @@
     "zod": "3.25.76"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.9.4",
+    "@biomejs/biome": "2.1.3",
     "@types/react": "19.1.0",
     "@types/react-dom": "19.1.0",
     "@vitejs/plugin-react": "^4.5.1",
@@ -28,7 +28,7 @@
     "@tailwindcss/postcss": "^4.1.10",
     "tailwindcss": "^4.1.10",
     "typescript": "5.6.2",
-    "vite": "^6.3.5",
-    "vitest": "3.1.1"
+    "vite": "6.3.5",
+    "vitest": "3.2.4"
   }
-}
+}

examples/multiauth/package.json

@@ -17,12 +17,12 @@
     "tailwindcss": "^4.1.10"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.9.4",
+    "@biomejs/biome": "2.1.3",
     "@types/react": "19.1.0",
     "@types/react-dom": "19.1.0",
     "@vitejs/plugin-react": "^4.5.1",
     "globals": "^15.11.0",
     "typescript": "5.6.2",
-    "vite": "^6.3.5"
+    "vite": "6.3.5"
   }
 }

examples/music-player/package.json

@@ -38,7 +38,7 @@
     "postcss": "^8.4.27",
     "tailwindcss": "^4.1.10",
     "typescript": "5.6.2",
-    "vite": "^6.3.5",
+    "vite": "6.3.5",
     "vite-plugin-pwa": "^1.0.2"
   }
 }

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

@@ -1,4 +1,4 @@
-import { co, z } from "jazz-tools";
+import { co, Group, z } from "jazz-tools";
 
 /** Walkthrough: Defining the data model with CoJSON
  *
@@ -70,15 +70,22 @@ export const MusicaAccountRoot = co.map({
   activePlaylist: Playlist,
 
   exampleDataLoaded: z.optional(z.boolean()),
+  accountSetupCompleted: z.optional(z.boolean()),
 });
 export type MusicaAccountRoot = co.loaded<typeof MusicaAccountRoot>;
+
+export const MusicaAccountProfile = co.profile({
+  avatar: co.optional(co.image()),
+});
+export type MusicaAccountProfile = co.loaded<typeof MusicaAccountProfile>;
+
 export const MusicaAccount = co
   .account({
     /** the default user profile with a name */
-    profile: co.profile(),
+    profile: MusicaAccountProfile,
     root: MusicaAccountRoot,
   })
-  .withMigration((account) => {
+  .withMigration(async (account) => {
     /**
      *  The account migration is run on account creation and on every log-in.
      *  You can use it to set up the account root and any other initial CoValues you need.
@@ -97,6 +104,32 @@ export const MusicaAccount = co
         exampleDataLoaded: false,
       });
     }
+
+    if (account.profile === undefined) {
+      account.profile = MusicaAccountProfile.create({
+        name: "",
+      });
+    }
+
+    // Load the profile and root in memory, to have them ready
+    const { profile, root } = await account.ensureLoaded({
+      resolve: {
+        profile: {
+          avatar: true,
+        },
+        root: true,
+      },
+    });
+
+    // Clean up the private avatars (were created using the account as owner)
+    if (profile.avatar) {
+      const group = profile.avatar._owner.castAs(Group);
+
+      if (group.getRoleOf("everyone") !== "reader") {
+        root.accountSetupCompleted = false;
+        profile.avatar = undefined;
+      }
+    }
   });
 export type MusicaAccount = co.loaded<typeof MusicaAccount>;
 

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

@@ -7,12 +7,13 @@ import { RouterProvider, createHashRouter } from "react-router-dom";
 import { HomePage } from "./3_HomePage";
 import { useMediaPlayer } from "./5_useMediaPlayer";
 import { InvitePage } from "./6_InvitePage";
+import { WelcomeScreen } from "./components/WelcomeScreen";
 import "./index.css";
 
 import { MusicaAccount } from "@/1_schema";
 import { apiKey } from "@/apiKey.ts";
 import { SidebarProvider } from "@/components/ui/sidebar";
-import { JazzReactProvider } from "jazz-tools/react";
+import { JazzReactProvider, useAccount } from "jazz-tools/react";
 import { onAnonymousAccountDiscarded } from "./4_actions";
 import { KeyboardListener } from "./components/PlayerControls";
 import { usePrepareAppState } from "./lib/usePrepareAppState";
@@ -28,11 +29,22 @@ import { usePrepareAppState } from "./lib/usePrepareAppState";
  * `<JazzReactProvider/>` also runs our account migration
  */
 
-function Main() {
-  const mediaPlayer = useMediaPlayer();
+function AppContent({
+  mediaPlayer,
+}: {
+  mediaPlayer: ReturnType<typeof useMediaPlayer>;
+}) {
+  const { me } = useAccount(MusicaAccount, {
+    resolve: { root: true },
+  });
 
   const isReady = usePrepareAppState(mediaPlayer);
 
+  // Show welcome screen if account setup is not completed
+  if (me && !me.root.accountSetupCompleted) {
+    return <WelcomeScreen />;
+  }
+
   const router = createHashRouter([
     {
       path: "/",
@@ -59,6 +71,17 @@ function Main() {
   );
 }
 
+function Main() {
+  const mediaPlayer = useMediaPlayer();
+
+  return (
+    <SidebarProvider>
+      <AppContent mediaPlayer={mediaPlayer} />
+      <JazzInspector />
+    </SidebarProvider>
+  );
+}
+
 const peer =
   (new URL(window.location.href).searchParams.get(
     "peer",

examples/music-player/src/3_HomePage.tsx

@@ -12,11 +12,13 @@ import { MediaPlayer } from "./5_useMediaPlayer";
 import { FileUploadButton } from "./components/FileUploadButton";
 import { MusicTrackRow } from "./components/MusicTrackRow";
 import { PlayerControls } from "./components/PlayerControls";
-import { PlaylistTitleInput } from "./components/PlaylistTitleInput";
+import { EditPlaylistModal } from "./components/EditPlaylistModal";
+import { PlaylistMembers } from "./components/PlaylistMembers";
 import { SidePanel } from "./components/SidePanel";
 import { Button } from "./components/ui/button";
 import { SidebarInset, SidebarTrigger } from "./components/ui/sidebar";
 import { usePlayState } from "./lib/audio/usePlayState";
+import { useState } from "react";
 
 export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
   /**
@@ -30,6 +32,7 @@ export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
   const playState = usePlayState();
   const isPlaying = playState.value === "play";
   const { toast } = useToast();
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
 
   async function handleFileLoad(files: FileList) {
     /**
@@ -50,6 +53,7 @@ export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
     },
   });
 
+  const membersIds = playlist?._owner.members.map((member) => member.id);
   const isRootPlaylist = !params.playlistId;
   const isPlaylistOwner = playlist?._owner.myRole() === "admin";
   const isActivePlaylist = playlistId === me?.root.activePlaylist?.id;
@@ -66,6 +70,10 @@ export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
     });
   };
 
+  const handleEditClick = () => {
+    setIsEditModalOpen(true);
+  };
+
   const isAuthenticated = useIsAuthenticated();
 
   return (
@@ -74,11 +82,17 @@ export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
         <SidePanel />
         <main className="flex-1 px-2 py-4 md:px-6 overflow-y-auto overflow-x-hidden relative sm:h-[calc(100vh-80px)] bg-white h-[calc(100vh-165px)]">
           <SidebarTrigger className="md:hidden" />
+
           <div className="flex flex-row items-center justify-between mb-4 pl-1 md:pl-10 pr-2 md:pr-0 mt-2 md:mt-0 w-full">
             {isRootPlaylist ? (
               <h1 className="text-2xl font-bold text-blue-800">All tracks</h1>
             ) : (
-              <PlaylistTitleInput className="w-full" playlistId={playlistId} />
+              <div className="flex items-center space-x-4">
+                <h1 className="text-2xl font-bold text-blue-800">
+                  {playlist?.title}
+                </h1>
+                {membersIds && <PlaylistMembers memberIds={membersIds} />}
+              </div>
             )}
             <div className="flex items-center space-x-4">
               {isRootPlaylist && (
@@ -89,9 +103,12 @@ export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
                 </>
               )}
               {!isRootPlaylist && isAuthenticated && (
-                <Button onClick={handlePlaylistShareClick}>
-                  Share playlist
-                </Button>
+                <>
+                  <Button onClick={handleEditClick} variant="outline">
+                    Edit
+                  </Button>
+                  <Button onClick={handlePlaylistShareClick}>Share</Button>
+                </>
               )}
             </div>
           </div>
@@ -118,6 +135,13 @@ export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
         </main>
         <PlayerControls mediaPlayer={mediaPlayer} />
       </div>
+
+      {/* Playlist Title Edit Modal */}
+      <EditPlaylistModal
+        playlistId={playlistId}
+        isOpen={isEditModalOpen}
+        onClose={() => setIsEditModalOpen(false)}
+      />
     </SidebarInset>
   );
 }

examples/music-player/src/4_actions.ts

@@ -59,7 +59,7 @@ export async function uploadMusicTracks(
   }
 }
 
-export async function createNewPlaylist() {
+export async function createNewPlaylist(title: string = "New Playlist") {
   const { root } = await MusicaAccount.getMe().ensureLoaded({
     resolve: {
       root: {
@@ -69,7 +69,7 @@ export async function createNewPlaylist() {
   });
 
   const playlist = Playlist.create({
-    title: "New Playlist",
+    title,
     tracks: [],
   });
 

examples/music-player/src/5_useMediaPlayer.ts

@@ -24,7 +24,7 @@ export function useMediaPlayer() {
   // Reference used to avoid out-of-order track loads
   const lastLoadedTrackId = useRef<string | null>(null);
 
-  async function loadTrack(track: MusicTrack) {
+  async function loadTrack(track: MusicTrack, autoPlay = true) {
     lastLoadedTrackId.current = track.id;
     audioManager.unloadCurrentAudio();
 
@@ -44,7 +44,7 @@ export function useMediaPlayer() {
       return;
     }
 
-    await playMedia(file);
+    await playMedia(file, autoPlay);
 
     setLoading(null);
   }

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

@@ -7,8 +7,6 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import { useAccount, usePasskeyAuth } from "jazz-tools/react";
 import { useState } from "react";
 
@@ -18,7 +16,6 @@ interface AuthModalProps {
 }
 
 export function AuthModal({ open, onOpenChange }: AuthModalProps) {
-  const [username, setUsername] = useState("");
   const [isSignUp, setIsSignUp] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
@@ -31,6 +28,7 @@ export function AuthModal({ open, onOpenChange }: AuthModalProps) {
           },
         },
       },
+      profile: true,
     },
   });
 
@@ -48,7 +46,7 @@ export function AuthModal({ open, onOpenChange }: AuthModalProps) {
 
     try {
       if (isSignUp) {
-        await auth.signUp(username);
+        await auth.signUp(me?.profile.name || "");
       } else {
         await auth.logIn();
       }
@@ -84,18 +82,6 @@ export function AuthModal({ open, onOpenChange }: AuthModalProps) {
           </DialogDescription>
         </DialogHeader>
         <form onSubmit={handleSubmit} className="space-y-4">
-          {isSignUp && (
-            <div className="space-y-2">
-              <Label htmlFor="username">Username</Label>
-              <Input
-                id="username"
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-                placeholder="Enter your username"
-                required
-              />
-            </div>
-          )}
           {error && <div className="text-sm text-red-500">{error}</div>}
           {shouldShowTransferRootPlaylist && (
             <div className="text-sm text-red-500">

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

@@ -0,0 +1,105 @@
+import { createNewPlaylist } from "@/4_actions";
+import { useState } from "react";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+
+interface CreatePlaylistModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onPlaylistCreated: (playlistId: string) => void;
+}
+
+export function CreatePlaylistModal({
+  isOpen,
+  onClose,
+  onPlaylistCreated,
+}: CreatePlaylistModalProps) {
+  const [playlistTitle, setPlaylistTitle] = useState("");
+  const [isCreating, setIsCreating] = useState(false);
+
+  function handleTitleChange(evt: React.ChangeEvent<HTMLInputElement>) {
+    setPlaylistTitle(evt.target.value);
+  }
+
+  async function handleCreate() {
+    if (!playlistTitle.trim()) return;
+
+    setIsCreating(true);
+    try {
+      const playlist = await createNewPlaylist(playlistTitle.trim());
+      onPlaylistCreated(playlist.id);
+      onClose();
+    } catch (error) {
+      console.error("Failed to create playlist:", error);
+    } finally {
+      setIsCreating(false);
+    }
+  }
+
+  function handleCancel() {
+    setPlaylistTitle("");
+    onClose();
+  }
+
+  function handleKeyDown(evt: React.KeyboardEvent) {
+    if (evt.key === "Enter") {
+      handleCreate();
+    } else if (evt.key === "Escape") {
+      handleCancel();
+    }
+  }
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-lg shadow-xl p-6 w-full max-w-md">
+        <div className="mb-6">
+          <h2 className="text-xl font-semibold text-gray-900 mb-2">
+            Create New Playlist
+          </h2>
+          <p className="text-sm text-gray-600">Give your new playlist a name</p>
+        </div>
+
+        <div className="space-y-4">
+          <div>
+            <Label
+              htmlFor="playlist-title"
+              className="text-sm font-medium text-gray-700"
+            >
+              Playlist Title
+            </Label>
+            <Input
+              id="playlist-title"
+              value={playlistTitle}
+              onChange={handleTitleChange}
+              onKeyDown={handleKeyDown}
+              placeholder="Enter playlist title"
+              className="mt-1"
+              autoFocus
+            />
+          </div>
+
+          <div className="flex justify-end space-x-3 pt-4">
+            <Button
+              variant="outline"
+              onClick={handleCancel}
+              className="px-4 py-2"
+              disabled={isCreating}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleCreate}
+              disabled={!playlistTitle.trim() || isCreating}
+              className="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:opacity-50"
+            >
+              {isCreating ? "Creating..." : "Create Playlist"}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,104 @@
+import { Playlist } from "@/1_schema";
+import { updatePlaylistTitle } from "@/4_actions";
+import { useCoState } from "jazz-tools/react";
+import { ChangeEvent, useState, useEffect } from "react";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+
+interface EditPlaylistModalProps {
+  playlistId: string | undefined;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function EditPlaylistModal({
+  playlistId,
+  isOpen,
+  onClose,
+}: EditPlaylistModalProps) {
+  const playlist = useCoState(Playlist, playlistId);
+  const [localPlaylistTitle, setLocalPlaylistTitle] = useState("");
+
+  // Reset local title when modal opens or playlist changes
+  useEffect(() => {
+    if (isOpen && playlist) {
+      setLocalPlaylistTitle(playlist.title ?? "");
+    }
+  }, [isOpen, playlist]);
+
+  function handleTitleChange(evt: ChangeEvent<HTMLInputElement>) {
+    setLocalPlaylistTitle(evt.target.value);
+  }
+
+  function handleSave() {
+    if (playlist && localPlaylistTitle.trim()) {
+      updatePlaylistTitle(playlist, localPlaylistTitle.trim());
+      onClose();
+    }
+  }
+
+  function handleCancel() {
+    setLocalPlaylistTitle(playlist?.title ?? "");
+    onClose();
+  }
+
+  function handleKeyDown(evt: React.KeyboardEvent) {
+    if (evt.key === "Enter") {
+      handleSave();
+    } else if (evt.key === "Escape") {
+      handleCancel();
+    }
+  }
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-lg shadow-xl p-6 w-full max-w-md">
+        <div className="mb-6">
+          <h2 className="text-xl font-semibold text-gray-900 mb-2">
+            Edit Playlist
+          </h2>
+        </div>
+
+        <div className="space-y-4">
+          <div>
+            <Label
+              htmlFor="playlist-title"
+              className="text-sm font-medium text-gray-700"
+            >
+              Playlist Title
+            </Label>
+            <Input
+              id="playlist-title"
+              value={localPlaylistTitle}
+              onChange={handleTitleChange}
+              onKeyDown={handleKeyDown}
+              placeholder="Enter playlist title"
+              className="mt-1"
+              autoFocus
+            />
+          </div>
+
+          <div className="flex justify-end space-x-3 pt-4">
+            <Button
+              variant="outline"
+              onClick={handleCancel}
+              className="px-4 py-2"
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleSave}
+              disabled={!localPlaylistTitle.trim()}
+              className="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:opacity-50"
+            >
+              Save Changes
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,83 @@
+import { useCoState } from "jazz-tools/react";
+import { MusicaAccount } from "@/1_schema";
+import { Image } from "jazz-tools/react";
+
+interface MemberProps {
+  accountId: string;
+  size?: "sm" | "md" | "lg";
+  showTooltip?: boolean;
+  className?: string;
+}
+
+export function Member({
+  accountId,
+  size = "md",
+  showTooltip = true,
+  className = "",
+}: MemberProps) {
+  const account = useCoState(MusicaAccount, accountId, {
+    resolve: { profile: true },
+  });
+
+  if (!account) {
+    return (
+      <div
+        className={`rounded-full bg-gray-200 border-2 border-white flex items-center justify-center ${getSizeClasses(size)} ${className}`}
+      >
+        <span className="text-gray-500 text-xs">👤</span>
+      </div>
+    );
+  }
+
+  const avatar = account.profile?.avatar;
+  const name = account.profile?.name || "Unknown User";
+
+  return (
+    <div
+      className={`rounded-full border-2 border-white overflow-hidden ${getSizeClasses(size)} ${className}`}
+      title={showTooltip ? name : undefined}
+    >
+      {avatar ? (
+        <Image
+          imageId={avatar.id}
+          width={getSizePx(size)}
+          height={getSizePx(size)}
+          alt={`${name}'s avatar`}
+          className="w-full h-full object-cover"
+        />
+      ) : (
+        <div className="w-full h-full bg-gray-200 flex items-center justify-center">
+          <span className="text-gray-500 text-sm">
+            {name.charAt(0).toUpperCase()}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function getSizeClasses(size: "sm" | "md" | "lg"): string {
+  switch (size) {
+    case "sm":
+      return "w-6 h-6";
+    case "md":
+      return "w-8 h-8";
+    case "lg":
+      return "w-10 h-10";
+    default:
+      return "w-8 h-8";
+  }
+}
+
+function getSizePx(size: "sm" | "md" | "lg"): number {
+  switch (size) {
+    case "sm":
+      return 24;
+    case "md":
+      return 32;
+    case "lg":
+      return 40;
+    default:
+      return 32;
+  }
+}

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

@@ -152,7 +152,7 @@ export function MusicTrackRow({
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end">
             <DropdownMenuItem onSelect={handleEdit}>Edit</DropdownMenuItem>
-            {playlists.map((playlist, playlistIndex) => (
+            {playlists.filter(Boolean).map((playlist, playlistIndex) => (
               <Fragment key={playlistIndex}>
                 {isPartOfThePlaylist(trackId, playlist) ? (
                   <DropdownMenuItem

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

@@ -0,0 +1,30 @@
+import { Member } from "./Member";
+
+interface PlaylistMembersProps {
+  memberIds: string[];
+  size?: "sm" | "md" | "lg";
+  className?: string;
+}
+
+export function PlaylistMembers({
+  memberIds,
+  size = "md",
+  className = "",
+}: PlaylistMembersProps) {
+  if (!memberIds || memberIds.length === 0) return null;
+
+  return (
+    <div className={`flex items-center space-x-2 ${className}`}>
+      <div className="flex -space-x-2">
+        {memberIds.map((memberId) => (
+          <Member
+            key={memberId}
+            accountId={memberId}
+            size={size}
+            showTooltip={true}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,213 @@
+import React, { useState, useRef } from "react";
+import { Image, useAccount } from "jazz-tools/react";
+import { createImage } from "jazz-tools/media";
+import { MusicaAccount } from "../1_schema";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+import { Separator } from "./ui/separator";
+import { Group } from "jazz-tools";
+
+interface ProfileFormProps {
+  onSubmit?: (data: { username: string; avatar?: any }) => void;
+  submitButtonText?: string;
+  showHeader?: boolean;
+  headerTitle?: string;
+  headerDescription?: string;
+  initialUsername?: string;
+  initialAvatar?: any;
+  onCancel?: () => void;
+  showCancelButton?: boolean;
+  cancelButtonText?: string;
+  className?: string;
+}
+
+export function ProfileForm({
+  onSubmit,
+  submitButtonText = "Save Changes",
+  showHeader = false,
+  headerTitle = "Profile Settings",
+  headerDescription = "Update your profile information",
+  initialUsername = "",
+  initialAvatar,
+  onCancel,
+  showCancelButton = false,
+  cancelButtonText = "Cancel",
+  className = "",
+}: ProfileFormProps) {
+  const { me } = useAccount(MusicaAccount, {
+    resolve: { profile: true, root: true },
+  });
+
+  const [username, setUsername] = useState(
+    initialUsername || me?.profile?.name || "",
+  );
+  const [isUploading, setIsUploading] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  if (!me) return null;
+
+  const handleAvatarUpload = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    setIsUploading(true);
+    try {
+      // Create image using the Image API from jazz-tools/media
+      const image = await createImage(file, {
+        owner: Group.create().makePublic(),
+        maxSize: 256, // Good size for avatars
+        placeholder: "blur",
+        progressive: true,
+      });
+
+      // Update the profile with the new avatar
+      me.profile.avatar = image;
+    } catch (error) {
+      console.error("Failed to upload avatar:", error);
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (!username.trim()) return;
+
+    // Update username
+    me.profile.name = username.trim();
+
+    // Call custom onSubmit if provided
+    if (onSubmit) {
+      onSubmit({ username: username.trim(), avatar: me.profile.avatar });
+    }
+  };
+
+  const currentAvatar = initialAvatar || me.profile.avatar;
+  const canSubmit = username.trim();
+
+  return (
+    <div className={className}>
+      {showHeader && (
+        <div className="text-center mb-8">
+          <h1 className="text-2xl font-bold text-gray-900 mb-2">
+            {headerTitle}
+          </h1>
+          <p className="text-gray-600">{headerDescription}</p>
+        </div>
+      )}
+
+      <form className="space-y-6" onSubmit={handleSubmit}>
+        {/* Avatar Section */}
+        <div className="space-y-3">
+          <Label
+            htmlFor="avatar"
+            className="text-sm font-medium text-gray-700 sr-only"
+          >
+            Profile Picture
+          </Label>
+
+          <div className="flex flex-col items-center space-y-3">
+            {/* Current Avatar Display */}
+            <div className="relative">
+              <div className="w-24 h-24 rounded-full overflow-hidden border-4 border-white shadow-lg">
+                {currentAvatar ? (
+                  <Image
+                    imageId={currentAvatar.id}
+                    width={96}
+                    height={96}
+                    alt="Profile"
+                    className="w-full h-full object-cover"
+                  />
+                ) : (
+                  <div className="w-full h-full bg-gray-200 flex items-center justify-center">
+                    <span className="text-gray-400 text-2xl">👤</span>
+                  </div>
+                )}
+              </div>
+
+              {/* Upload Overlay */}
+              <button
+                type="button"
+                onClick={() => fileInputRef.current?.click()}
+                disabled={isUploading}
+                className="absolute -bottom-1 -right-1 w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white hover:bg-blue-700 disabled:opacity-50 transition-colors cursor-pointer"
+                title="Change avatar"
+              >
+                {isUploading ? (
+                  <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                ) : (
+                  <span className="text-sm">📷</span>
+                )}
+              </button>
+            </div>
+
+            <input
+              ref={fileInputRef}
+              type="file"
+              id="avatar"
+              accept="image/*"
+              onChange={handleAvatarUpload}
+              className="hidden"
+              disabled={isUploading}
+            />
+
+            <p className="text-xs text-gray-500 text-center">
+              Click the camera icon to upload a profile picture
+            </p>
+          </div>
+        </div>
+
+        <Separator />
+
+        {/* Username Section */}
+        <div className="space-y-3">
+          <Label
+            htmlFor="username"
+            className="text-sm font-medium text-gray-700"
+          >
+            Username
+          </Label>
+          <Input
+            id="username"
+            type="text"
+            placeholder="Enter your username"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            className="w-full"
+            maxLength={30}
+          />
+          <p className="text-xs text-gray-500">
+            This will be displayed to other users
+          </p>
+        </div>
+
+        {/* Action Buttons */}
+        <div className="flex space-x-3">
+          {showCancelButton && (
+            <Button
+              type="button"
+              variant="outline"
+              onClick={onCancel}
+              className="flex-1"
+              size="lg"
+            >
+              {cancelButtonText}
+            </Button>
+          )}
+          <Button
+            type="submit"
+            disabled={!canSubmit}
+            className={`${showCancelButton ? "flex-1" : "w-full"} bg-blue-600 hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed`}
+            size="lg"
+          >
+            {submitButtonText}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}

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

@@ -0,0 +1,117 @@
+import { useState } from "react";
+import { useAccount } from "jazz-tools/react";
+import { MusicaAccount } from "../1_schema";
+import { ProfileForm } from "./ProfileForm";
+import { Button } from "./ui/button";
+
+export function ProfileSettings() {
+  const { me } = useAccount(MusicaAccount, {
+    resolve: { profile: true, root: true },
+  });
+  const [isEditing, setIsEditing] = useState(false);
+
+  if (!me) return null;
+
+  const handleSaveProfile = (data: { username: string; avatar?: any }) => {
+    // Profile is automatically updated by the ProfileForm component
+    // You can add additional logic here if needed
+    console.log("Profile updated:", data);
+    setIsEditing(false);
+  };
+
+  const handleCancel = () => {
+    setIsEditing(false);
+  };
+
+  if (isEditing) {
+    return (
+      <div className="max-w-2xl mx-auto p-6">
+        <div className="bg-white rounded-lg shadow-lg p-6">
+          <ProfileForm
+            onSubmit={handleSaveProfile}
+            onCancel={handleCancel}
+            showCancelButton={true}
+            submitButtonText="Save Changes"
+            showHeader={true}
+            headerTitle="Edit Profile"
+            headerDescription="Update your profile information"
+            initialUsername={me.profile.name || ""}
+            initialAvatar={me.profile.avatar}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-2xl mx-auto p-6">
+      <div className="bg-white rounded-lg shadow-lg p-6">
+        {/* Profile Display */}
+        <div className="text-center mb-8">
+          <h1 className="text-3xl font-bold text-gray-900 mb-4">
+            Profile Settings
+          </h1>
+
+          {/* Avatar Display */}
+          <div className="mb-6">
+            <div className="w-32 h-32 rounded-full overflow-hidden border-4 border-white shadow-lg mx-auto">
+              {me.profile.avatar ? (
+                <img
+                  src={`/api/images/${me.profile.avatar.id}`}
+                  alt="Profile"
+                  className="w-full h-full object-cover"
+                />
+              ) : (
+                <div className="w-full h-full bg-gray-200 flex items-center justify-center">
+                  <span className="text-gray-400 text-4xl">👤</span>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Username Display */}
+          <div className="mb-6">
+            <h2 className="text-xl font-semibold text-gray-800">
+              {me.profile.name || "No username set"}
+            </h2>
+            <p className="text-gray-600 text-sm">
+              {me.profile.name
+                ? "Your display name"
+                : "Set a username to get started"}
+            </p>
+          </div>
+
+          {/* Edit Button */}
+          <Button
+            onClick={() => setIsEditing(true)}
+            className="bg-blue-600 hover:bg-blue-700"
+            size="lg"
+          >
+            Edit Profile
+          </Button>
+        </div>
+
+        {/* Additional Profile Information */}
+        <div className="border-t pt-6">
+          <h3 className="text-lg font-semibold text-gray-800 mb-4">
+            Account Information
+          </h3>
+          <div className="space-y-3">
+            <div className="flex justify-between items-center py-2 border-b border-gray-100">
+              <span className="text-gray-600">Account ID:</span>
+              <span className="text-sm font-mono text-gray-800">{me.id}</span>
+            </div>
+            <div className="flex justify-between items-center py-2">
+              <span className="text-gray-600">Setup Completed:</span>
+              <span
+                className={`text-sm ${me.root.accountSetupCompleted ? "text-green-600" : "text-red-600"}`}
+              >
+                {me.root.accountSetupCompleted ? "Yes" : "No"}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,5 +1,5 @@
 import { MusicaAccount } from "@/1_schema";
-import { createNewPlaylist, deletePlaylist } from "@/4_actions";
+import { deletePlaylist } from "@/4_actions";
 import {
   Sidebar,
   SidebarContent,
@@ -15,7 +15,9 @@ import {
 import { useAccount } from "jazz-tools/react";
 import { Home, Music, Plus, Trash2 } from "lucide-react";
 import { useNavigate, useParams } from "react-router";
+import { useState } from "react";
 import { AuthButton } from "./AuthButton";
+import { CreatePlaylistModal } from "./CreatePlaylistModal";
 
 export function SidePanel() {
   const { playlistId } = useParams();
@@ -23,6 +25,7 @@ export function SidePanel() {
   const { me } = useAccount(MusicaAccount, {
     resolve: { root: { playlists: { $each: true } } },
   });
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
   function handleAllTracksClick() {
     navigate(`/`);
@@ -39,92 +42,104 @@ export function SidePanel() {
     }
   }
 
-  async function handleCreatePlaylist() {
-    const playlist = await createNewPlaylist();
-    navigate(`/playlist/${playlist.id}`);
+  function handleCreatePlaylistClick() {
+    setIsCreateModalOpen(true);
+  }
+
+  function handlePlaylistCreated(playlistId: string) {
+    navigate(`/playlist/${playlistId}`);
   }
 
   return (
-    <Sidebar>
-      <SidebarHeader>
-        <SidebarMenu>
-          <SidebarMenuItem className="flex items-center gap-2">
-            <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-blue-600 text-white">
-              <svg
-                className="size-4"
-                viewBox="0 0 24 24"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9 18V5l12-2v13"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-                <path
-                  d="M6 15H3c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h3c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2zM18 13h-3c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h3c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2z"
-                  fill="currentColor"
-                />
-              </svg>
-            </div>
-            <div className="grid flex-1 text-left text-sm leading-tight">
-              <span className="truncate font-semibold">Music Player</span>
-            </div>
-            <AuthButton />
-          </SidebarMenuItem>
-        </SidebarMenu>
-      </SidebarHeader>
-      <SidebarContent>
-        <SidebarGroup>
-          <SidebarGroupContent>
-            <SidebarMenu>
-              <SidebarMenuItem>
-                <SidebarMenuButton onClick={handleAllTracksClick}>
-                  <Home className="size-4" />
-                  <span>Go to all tracks</span>
-                </SidebarMenuButton>
-              </SidebarMenuItem>
-            </SidebarMenu>
-          </SidebarGroupContent>
-        </SidebarGroup>
-        <SidebarGroup>
-          <SidebarGroupLabel>Playlists</SidebarGroupLabel>
-          <SidebarGroupContent>
-            <SidebarMenu>
-              <SidebarMenuItem>
-                <SidebarMenuButton onClick={handleCreatePlaylist}>
-                  <Plus className="size-4" />
-                  <span>Add a new playlist</span>
-                </SidebarMenuButton>
-              </SidebarMenuItem>
-              {me?.root.playlists.map((playlist) => (
-                <SidebarMenuItem key={playlist.id}>
-                  <SidebarMenuButton
-                    onClick={() => handlePlaylistClick(playlist.id)}
-                    isActive={playlist.id === playlistId}
-                  >
-                    <div className="flex items-center gap-2">
-                      <Music className="size-4" />
-                      <span>{playlist.title}</span>
-                    </div>
+    <>
+      <Sidebar>
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem className="flex items-center gap-2">
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-blue-600 text-white">
+                <svg
+                  className="size-4"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M9 18V5l12-2v13"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                  <path
+                    d="M6 15H3c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h3c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2zM18 13h-3c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h3c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">Music Player</span>
+              </div>
+              <AuthButton />
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                <SidebarMenuItem>
+                  <SidebarMenuButton onClick={handleAllTracksClick}>
+                    <Home className="size-4" />
+                    <span>Go to all tracks</span>
                   </SidebarMenuButton>
-                  {playlist.id === playlistId && (
-                    <SidebarMenuAction
-                      onClick={() => handleDeletePlaylist(playlist.id)}
-                      className="text-red-600 hover:text-red-800"
-                    >
-                      <Trash2 className="size-4" />
-                      <span className="sr-only">Delete {playlist.title}</span>
-                    </SidebarMenuAction>
-                  )}
                 </SidebarMenuItem>
-              ))}
-            </SidebarMenu>
-          </SidebarGroupContent>
-        </SidebarGroup>
-      </SidebarContent>
-    </Sidebar>
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+          <SidebarGroup>
+            <SidebarGroupLabel>Playlists</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                <SidebarMenuItem>
+                  <SidebarMenuButton onClick={handleCreatePlaylistClick}>
+                    <Plus className="size-4" />
+                    <span>Add a new playlist</span>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+                {me?.root.playlists.map((playlist) => (
+                  <SidebarMenuItem key={playlist.id}>
+                    <SidebarMenuButton
+                      onClick={() => handlePlaylistClick(playlist.id)}
+                      isActive={playlist.id === playlistId}
+                    >
+                      <div className="flex items-center gap-2">
+                        <Music className="size-4" />
+                        <span>{playlist.title}</span>
+                      </div>
+                    </SidebarMenuButton>
+                    {playlist.id === playlistId && (
+                      <SidebarMenuAction
+                        onClick={() => handleDeletePlaylist(playlist.id)}
+                        className="text-red-600 hover:text-red-800"
+                      >
+                        <Trash2 className="size-4" />
+                        <span className="sr-only">Delete {playlist.title}</span>
+                      </SidebarMenuAction>
+                    )}
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+
+      {/* Create Playlist Modal */}
+      <CreatePlaylistModal
+        isOpen={isCreateModalOpen}
+        onClose={() => setIsCreateModalOpen(false)}
+        onPlaylistCreated={handlePlaylistCreated}
+      />
+    </>
   );
 }

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

@@ -0,0 +1,95 @@
+import { useAccount, usePasskeyAuth } from "jazz-tools/react";
+import { MusicaAccount } from "../1_schema";
+import { ProfileForm } from "./ProfileForm";
+import { Button } from "./ui/button";
+
+export function WelcomeScreen() {
+  const { me } = useAccount(MusicaAccount, {
+    resolve: { profile: true, root: true },
+  });
+
+  const auth = usePasskeyAuth({
+    appName: "Jazz Music Player",
+  });
+
+  if (!me) return null;
+
+  const handleCompleteSetup = () => {
+    // Mark account setup as completed
+    me.root.accountSetupCompleted = true;
+  };
+
+  const handleLogin = () => {
+    auth.logIn();
+  };
+
+  return (
+    <div className="w-full lg:w-auto min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4">
+      <div className="flex flex-col lg:flex-row gap-8 lg:gap-16 items-center">
+        {/* Form Panel */}
+        <div className="w-full max-w-md bg-white rounded-lg shadow-xl p-8">
+          <ProfileForm
+            onSubmit={handleCompleteSetup}
+            submitButtonText="Continue"
+            showHeader={true}
+            headerTitle="Welcome to Music Player! 🎵"
+            headerDescription="Let's set up your profile to get started"
+            initialUsername={me?.profile?.name || ""}
+            initialAvatar={me?.profile?.avatar}
+          />
+        </div>
+        <div className="lg:hidden pt-4 flex justify-end items-center w-full gap-2">
+          <div className="text-sm font-semibold text-gray-600">
+            Already a user?
+          </div>
+          <Button onClick={handleLogin} size="sm">
+            Login
+          </Button>
+        </div>
+
+        {/* Title Section - Hidden on mobile, shown on right side for larger screens */}
+        <div className="hidden lg:flex flex-col justify-center items-start max-w-md">
+          <div className="space-y-6">
+            <h1 className="text-4xl lg:text-5xl font-bold text-gray-900 leading-tight">
+              Your Music at your fingertips.
+            </h1>
+
+            <div className="space-y-4">
+              <p className="text-xl lg:text-2xl text-gray-700 font-medium">
+                Offline, Collaborative, Fast
+              </p>
+
+              <div className="flex items-center space-x-2">
+                <span className="text-sm text-gray-500 font-medium">
+                  Powered by
+                </span>
+                <a
+                  href="https://jazz.tools"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-lg font-bold text-blue-600 hover:underline"
+                >
+                  Jazz
+                </a>
+              </div>
+
+              {/* Login Button */}
+              <div className="pt-4">
+                <p className="text-sm font-semibold text-gray-600 mb-2">
+                  Already a user?
+                </p>
+                <Button
+                  onClick={handleLogin}
+                  className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 text-lg font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-200"
+                  size="lg"
+                >
+                  Login
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

examples/music-player/src/components/ui/sidebar.tsx

@@ -294,7 +294,7 @@ const SidebarTrigger = React.forwardRef<
       }}
       {...props}
     >
-      <PanelLeft />
+      <PanelLeft className="size-4" />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   );

examples/music-player/src/lib/audio/usePlayMedia.ts

@@ -6,7 +6,7 @@ export function usePlayMedia() {
 
   const previousMediaLoad = useRef<Promise<unknown> | undefined>(undefined);
 
-  async function playMedia(file: Blob) {
+  async function playMedia(file: Blob, autoPlay = true) {
     // Wait for the previous load to finish
     // to avoid to incur into concurrency issues
     await previousMediaLoad.current;
@@ -17,7 +17,9 @@ export function usePlayMedia() {
 
     await promise;
 
-    audioManager.play();
+    if (autoPlay) {
+      audioManager.play();
+    }
   }
 
   return playMedia;

examples/music-player/src/lib/usePrepareAppState.ts

@@ -34,7 +34,7 @@ async function loadInitialData(mediaPlayer: MediaPlayer) {
 
   // Load the active track in the AudioManager
   if (me.root.activeTrack) {
-    mediaPlayer.loadTrack(me.root.activeTrack);
+    mediaPlayer.loadTrack(me.root.activeTrack, false);
   }
 }
 

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

@@ -44,7 +44,10 @@ test("sign up and log out", async ({ page: marioPage }) => {
 
   const marioHome = new HomePage(marioPage);
 
-  await marioHome.signUp("Mario");
+  await marioHome.fillUsername("Mario");
+  await marioPage.keyboard.press("Enter");
+
+  await marioHome.signUp();
 
   await marioHome.logoutButton.waitFor({
     state: "visible",

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

@@ -47,12 +47,14 @@ test("create a new playlist and share", async ({
 
   const marioHome = new HomePage(marioPage);
 
+  await marioHome.fillUsername("Mario");
+  await marioPage.keyboard.press("Enter");
+
   // The example song should be loaded
   await marioHome.expectMusicTrack("Example song");
   await marioHome.editTrackTitle("Example song", "Super Mario World");
 
-  await marioHome.createPlaylist();
-  await marioHome.editPlaylistTitle("Save the princess");
+  await marioHome.createPlaylist("Save the princess");
 
   await marioHome.navigateToPlaylist("All tracks");
   await marioHome.addTrackToPlaylist("Super Mario World", "Save the princess");
@@ -60,7 +62,7 @@ test("create a new playlist and share", async ({
   await marioHome.navigateToPlaylist("Save the princess");
   await marioHome.expectMusicTrack("Super Mario World");
 
-  await marioHome.signUp("Mario");
+  await marioHome.signUp();
 
   const url = await marioHome.getShareLink();
 
@@ -74,7 +76,10 @@ test("create a new playlist and share", async ({
 
   const luigiHome = new HomePage(luigiPage);
 
-  await luigiHome.signUp("Luigi");
+  await luigiHome.fillUsername("Luigi");
+  await luigiPage.keyboard.press("Enter");
+
+  await luigiHome.signUp();
 
   await luigiPage.goto(url);
 
@@ -90,15 +95,18 @@ test("create a new playlist, share, then remove track", async ({
   // Create playlist with a song and share
   await marioPage.goto("/");
   const marioHome = new HomePage(marioPage);
+
+  await marioHome.fillUsername("Mario");
+  await marioPage.keyboard.press("Enter");
+
   await marioHome.expectMusicTrack("Example song");
   await marioHome.editTrackTitle("Example song", "Super Mario World");
-  await marioHome.createPlaylist();
-  await marioHome.editPlaylistTitle("Save the princess");
+  await marioHome.createPlaylist("Save the princess");
   await marioHome.navigateToPlaylist("All tracks");
   await marioHome.addTrackToPlaylist("Super Mario World", "Save the princess");
   await marioHome.navigateToPlaylist("Save the princess");
   await marioHome.expectMusicTrack("Super Mario World");
-  await marioHome.signUp("Mario");
+  await marioHome.signUp();
   const url = await marioHome.getShareLink();
 
   await sleep(4000); // Wait for the sync to complete
@@ -109,7 +117,12 @@ test("create a new playlist, share, then remove track", async ({
   const luigiPage = await luigiContext.newPage();
   await luigiPage.goto("/");
   const luigiHome = new HomePage(luigiPage);
-  await luigiHome.signUp("Luigi");
+
+  await luigiHome.fillUsername("Luigi");
+  await luigiPage.keyboard.press("Enter");
+
+  await luigiHome.signUp();
+
   await luigiPage.goto(url);
   await luigiHome.expectMusicTrack("Super Mario World");
 

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

@@ -19,6 +19,10 @@ export class HomePage {
     name: "Sign out",
   });
 
+  async fillUsername(username: string) {
+    await this.page.getByRole("textbox", { name: "Username" }).fill(username);
+  }
+
   async expectActiveTrackPlaying() {
     await expect(
       this.page.getByRole("button", {
@@ -71,12 +75,10 @@ export class HomePage {
     await this.page.getByRole("button", { name: "Save" }).click();
   }
 
-  async createPlaylist() {
+  async createPlaylist(playlistTitle: string) {
     await this.newPlaylistButton.click();
-  }
-
-  async editPlaylistTitle(playlistTitle: string) {
     await this.playlistTitleInput.fill(playlistTitle);
+    await this.page.getByRole("button", { name: "Create Playlist" }).click();
   }
 
   async navigateToPlaylist(playlistTitle: string) {
@@ -98,7 +100,7 @@ export class HomePage {
   async getShareLink() {
     await this.page
       .getByRole("button", {
-        name: "Share playlist",
+        name: "Share",
       })
       .click();
 
@@ -139,9 +141,8 @@ export class HomePage {
       .click();
   }
 
-  async signUp(name: string) {
+  async signUp() {
     await this.page.getByRole("button", { name: "Sign up" }).click();
-    await this.page.getByRole("textbox", { name: "Username" }).fill(name);
     await this.page
       .getByRole("button", { name: "Sign up with passkey" })
       .click();
@@ -156,10 +157,12 @@ export class HomePage {
   async logOut() {
     await this.logoutButton.click();
 
-    await this.loginButton.waitFor({
+    await this.page.getByRole("textbox", { name: "Username" }).waitFor({
       state: "visible",
     });
 
-    await expect(this.loginButton).toBeVisible();
+    await expect(
+      this.page.getByRole("textbox", { name: "Username" }),
+    ).toBeVisible();
   }
 }

examples/organization/package.json

@@ -20,7 +20,7 @@
     "react-router-dom": "^6.16.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.9.4",
+    "@biomejs/biome": "2.1.3",
     "@playwright/test": "^1.50.1",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/postcss": "^4.1.10",
@@ -31,6 +31,6 @@
     "postcss": "^8.4.40",
     "tailwindcss": "^4.1.10",
     "typescript": "5.6.2",
-    "vite": "^6.3.5"
+    "vite": "6.3.5"
   }
 }

examples/passphrase/package.json

@@ -16,12 +16,12 @@
     "tailwindcss": "^4.1.10"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.9.4",
+    "@biomejs/biome": "2.1.3",
     "@types/react": "19.1.0",
     "@types/react-dom": "19.1.0",
     "@vitejs/plugin-react": "^4.5.1",
     "globals": "^15.11.0",
     "typescript": "5.6.2",
-    "vite": "^6.3.5"
+    "vite": "6.3.5"
   }
 }

examples/reactions/package.json

@@ -17,12 +17,12 @@
     "tailwindcss": "^4.1.10"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.9.4",
+    "@biomejs/biome": "2.1.3",
     "@types/react": "19.1.0",
     "@types/react-dom": "19.1.0",
     "@vitejs/plugin-react": "^4.5.1",
     "globals": "^15.11.0",
     "typescript": "5.6.2",
-    "vite": "^6.3.5"
+    "vite": "6.3.5"
   }
 }

examples/richtext-prosemirror/package.json

@@ -23,7 +23,7 @@
     "react-dom": "19.1.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.9.4",
+    "@biomejs/biome": "2.1.3",
     "@playwright/test": "^1.50.1",
     "@tailwindcss/postcss": "^4.1.10",
     "@types/react": "19.1.0",
@@ -34,6 +34,6 @@
     "postcss": "^8.4.40",
     "tailwindcss": "^4.1.10",
     "typescript": "5.6.2",
-    "vite": "^6.3.5"
+    "vite": "6.3.5"
   }
 }

examples/richtext-tiptap/package.json

@@ -26,7 +26,7 @@
     "react-dom": "19.1.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.9.4",
+    "@biomejs/biome": "2.1.3",
     "@playwright/test": "^1.50.1",
     "@tailwindcss/postcss": "^4.1.10",
     "@types/react": "19.1.0",
@@ -37,6 +37,6 @@
     "postcss": "^8.4.40",
     "tailwindcss": "^4.1.10",
     "typescript": "5.6.2",
-    "vite": "^6.3.5"
+    "vite": "6.3.5"
   }
 }

examples/server-worker-inbox/package.json

@@ -37,7 +37,7 @@
     "jazz-run": "workspace:*",
     "npm-run-all": "^4.1.5",
     "tsx": "^4.19.3",
-    "typescript": "~5.6.2",
-    "vite": "^6.3.5"
+    "typescript": "5.6.2",
+    "vite": "6.3.5"
   }
 }

examples/todo/package.json

@@ -35,6 +35,6 @@
     "postcss": "^8.4.27",
     "tailwindcss": "^4.1.10",
     "typescript": "5.6.2",
-    "vite": "^6.3.5"
+    "vite": "6.3.5"
   }
 }

examples/version-history/package.json

@@ -16,7 +16,7 @@
     "react-dom": "19.1.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.9.4",
+    "@biomejs/biome": "2.1.3",
     "@tailwindcss/postcss": "^4.1.10",
     "@types/react": "19.1.0",
     "@types/react-dom": "19.1.0",
@@ -24,6 +24,6 @@
     "globals": "^15.11.0",
     "tailwindcss": "^4.1.10",
     "typescript": "5.6.2",
-    "vite": "^6.3.5"
+    "vite": "6.3.5"
   }
 }

homepage/design-system/package.json

@@ -31,11 +31,11 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.9.4",
+    "@biomejs/biome": "catalog:",
     "@csstools/postcss-oklab-function": "^3.0.6",
     "@types/node": "^20",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
-    "typescript": "^5.3.3"
+    "typescript": "catalog:"
   }
 }

homepage/gcmp/package.json

@@ -37,13 +37,13 @@
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.9.4",
+    "@biomejs/biome": "catalog:",
     "@types/node": "^20",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "autoprefixer": "^10",
     "postcss": "^8",
     "tailwindcss": "^3",
-    "typescript": "^5.3.3"
+    "typescript": "catalog:"
   }
 }

homepage/homepage/content/docs/sync-and-storage.mdx

@@ -46,6 +46,7 @@ In this case, provide the WebSocket endpoint your proxy exposes as the sync serv
 
 ### Command line options:
 
+- `--host` / `-h` - the host to run the sync server on. Defaults to 127.0.0.1.
 - `--port` / `-p` - the port to run the sync server on. Defaults to 4200.
 - `--in-memory` - keep CoValues in-memory only and do sync only, no persistence. Persistence is enabled by default.
 - `--db` - the path to the file where to store the data (SQLite). Defaults to `sync-db/storage.db`.

homepage/homepage/package.json

@@ -57,7 +57,7 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.9.4",
+    "@biomejs/biome": "catalog:",
     "@next/mdx": "^15.3.3",
     "@playwright/test": "^1.52.0",
     "@types/geojson": "^7946.0.14",
@@ -72,9 +72,9 @@
     "postcss": "^8",
     "tailwindcss": "^3",
     "turbo": "^2.3.1",
-    "typescript": "~5.7.0",
+    "typescript": "catalog:",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",
-    "vitest": "^3.2.3"
+    "vitest": "catalog:"
   }
 }

homepage/pnpm-lock.yaml

@@ -6,6 +6,9 @@ settings:
 
 catalogs:
   default:
+    '@biomejs/biome':
+      specifier: 2.1.3
+      version: 2.1.3
     '@types/react':
       specifier: 19.1.0
       version: 19.1.0
@@ -18,6 +21,12 @@ catalogs:
     react-dom:
       specifier: 19.1.0
       version: 19.1.0
+    typescript:
+      specifier: 5.6.2
+      version: 5.6.2
+    vitest:
+      specifier: 3.2.4
+      version: 3.2.4
 
 importers:
 
@@ -82,8 +91,8 @@ importers:
         version: 1.0.7(tailwindcss@3.4.17)
     devDependencies:
       '@biomejs/biome':
-        specifier: 1.9.4
-        version: 1.9.4
+        specifier: 'catalog:'
+        version: 2.1.3
       '@csstools/postcss-oklab-function':
         specifier: ^3.0.6
         version: 3.0.19(postcss@8.5.3)
@@ -97,8 +106,8 @@ importers:
         specifier: 'catalog:'
         version: 19.1.0(@types/react@19.1.0)
       typescript:
-        specifier: ^5.3.3
-        version: 5.7.3
+        specifier: 'catalog:'
+        version: 5.6.2
 
   gcmp:
     dependencies:
@@ -161,7 +170,7 @@ importers:
         version: 0.14.7
       shiki-twoslash:
         specifier: ^3.1.2
-        version: 3.1.2(typescript@5.7.3)
+        version: 3.1.2(typescript@5.6.2)
       tailwind-merge:
         specifier: ^1.14.0
         version: 1.14.0
@@ -173,8 +182,8 @@ importers:
         version: 5.0.0
     devDependencies:
       '@biomejs/biome':
-        specifier: 1.9.4
-        version: 1.9.4
+        specifier: 'catalog:'
+        version: 2.1.3
       '@types/node':
         specifier: ^20
         version: 20.17.46
@@ -194,8 +203,8 @@ importers:
         specifier: ^3
         version: 3.4.17
       typescript:
-        specifier: ^5.3.3
-        version: 5.7.3
+        specifier: 'catalog:'
+        version: 5.6.2
 
   homepage:
     dependencies:
@@ -225,7 +234,7 @@ importers:
         version: 3.4.0
       '@shikijs/twoslash':
         specifier: ^3.2.1
-        version: 3.4.0(typescript@5.7.3)
+        version: 3.4.0(typescript@5.6.2)
       '@stefanprobst/rehype-extract-toc':
         specifier: 3.0.0
         version: 3.0.0
@@ -306,8 +315,8 @@ importers:
         version: 1.0.7(tailwindcss@3.4.17)
     devDependencies:
       '@biomejs/biome':
-        specifier: 1.9.4
-        version: 1.9.4
+        specifier: 'catalog:'
+        version: 2.1.3
       '@next/mdx':
         specifier: ^15.3.3
         version: 15.3.3(@mdx-js/loader@2.3.0(webpack@5.99.8))(@mdx-js/react@2.3.0(react@19.1.0))
@@ -328,7 +337,7 @@ importers:
         version: 19.1.0(@types/react@19.1.0)
       '@vitest/ui':
         specifier: ^3.2.3
-        version: 3.2.3(vitest@3.2.3)
+        version: 3.2.3(vitest@3.2.4)
       autoprefixer:
         specifier: ^10
         version: 10.4.21(postcss@8.5.3)
@@ -351,8 +360,8 @@ importers:
         specifier: ^2.3.1
         version: 2.5.4
       typescript:
-        specifier: ~5.7.0
-        version: 5.7.3
+        specifier: 'catalog:'
+        version: 5.6.2
       unified:
         specifier: ^11.0.5
         version: 11.0.5
@@ -360,8 +369,8 @@ importers:
         specifier: ^5.0.0
         version: 5.0.0
       vitest:
-        specifier: ^3.2.3
-        version: 3.2.3(@types/debug@4.1.12)(@types/node@20.17.46)(@vitest/ui@3.2.3)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.1)
+        specifier: 'catalog:'
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@20.17.46)(@vitest/ui@3.2.3)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.1)
 
 packages:
 
@@ -534,55 +543,55 @@ packages:
   '@better-fetch/fetch@1.1.18':
     resolution: {integrity: sha512-rEFOE1MYIsBmoMJtQbl32PGHHXuG2hDxvEd7rUHE0vCBoFQVSDqaVs9hkZEtHCxRoY+CljXKFCOuJ8uxqw1LcA==}
 
-  '@biomejs/biome@1.9.4':
-    resolution: {integrity: sha512-1rkd7G70+o9KkTn5KLmDYXihGoTaIGO9PIIN2ZB7UJxFrWw04CZHPYiMRjYsaDvVV7hP1dYNRLxSANLaBFGpog==}
+  '@biomejs/biome@2.1.3':
+    resolution: {integrity: sha512-KE/tegvJIxTkl7gJbGWSgun7G6X/n2M6C35COT6ctYrAy7SiPyNvi6JtoQERVK/VRbttZfgGq96j2bFmhmnH4w==}
     engines: {node: '>=14.21.3'}
     hasBin: true
 
-  '@biomejs/cli-darwin-arm64@1.9.4':
-    resolution: {integrity: sha512-bFBsPWrNvkdKrNCYeAp+xo2HecOGPAy9WyNyB/jKnnedgzl4W4Hb9ZMzYNbf8dMCGmUdSavlYHiR01QaYR58cw==}
+  '@biomejs/cli-darwin-arm64@2.1.3':
+    resolution: {integrity: sha512-LFLkSWRoSGS1wVUD/BE6Nlt2dSn0ulH3XImzg2O/36BoToJHKXjSxzPEMAqT9QvwVtk7/9AQhZpTneERU9qaXA==}
     engines: {node: '>=14.21.3'}
     cpu: [arm64]
     os: [darwin]
 
-  '@biomejs/cli-darwin-x64@1.9.4':
-    resolution: {integrity: sha512-ngYBh/+bEedqkSevPVhLP4QfVPCpb+4BBe2p7Xs32dBgs7rh9nY2AIYUL6BgLw1JVXV8GlpKmb/hNiuIxfPfZg==}
+  '@biomejs/cli-darwin-x64@2.1.3':
+    resolution: {integrity: sha512-Q/4OTw8P9No9QeowyxswcWdm0n2MsdCwWcc5NcKQQvzwPjwuPdf8dpPPf4r+x0RWKBtl1FLiAUtJvBlri6DnYw==}
     engines: {node: '>=14.21.3'}
     cpu: [x64]
     os: [darwin]
 
-  '@biomejs/cli-linux-arm64-musl@1.9.4':
-    resolution: {integrity: sha512-v665Ct9WCRjGa8+kTr0CzApU0+XXtRgwmzIf1SeKSGAv+2scAlW6JR5PMFo6FzqqZ64Po79cKODKf3/AAmECqA==}
+  '@biomejs/cli-linux-arm64-musl@2.1.3':
+    resolution: {integrity: sha512-KXouFSBnoxAWZYDQrnNRzZBbt5s9UJkIm40hdvSL9mBxSSoxRFQJbtg1hP3aa8A2SnXyQHxQfpiVeJlczZt76w==}
     engines: {node: '>=14.21.3'}
     cpu: [arm64]
     os: [linux]
 
-  '@biomejs/cli-linux-arm64@1.9.4':
-    resolution: {integrity: sha512-fJIW0+LYujdjUgJJuwesP4EjIBl/N/TcOX3IvIHJQNsAqvV2CHIogsmA94BPG6jZATS4Hi+xv4SkBBQSt1N4/g==}
+  '@biomejs/cli-linux-arm64@2.1.3':
+    resolution: {integrity: sha512-2hS6LgylRqMFmAZCOFwYrf77QMdUwJp49oe8PX/O8+P2yKZMSpyQTf3Eo5ewnsMFUEmYbPOskafdV1ds1MZMJA==}
     engines: {node: '>=14.21.3'}
     cpu: [arm64]
     os: [linux]
 
-  '@biomejs/cli-linux-x64-musl@1.9.4':
-    resolution: {integrity: sha512-gEhi/jSBhZ2m6wjV530Yy8+fNqG8PAinM3oV7CyO+6c3CEh16Eizm21uHVsyVBEB6RIM8JHIl6AGYCv6Q6Q9Tg==}
+  '@biomejs/cli-linux-x64-musl@2.1.3':
+    resolution: {integrity: sha512-KaLAxnROouzIWtl6a0Y88r/4hW5oDUJTIqQorOTVQITaKQsKjZX4XCUmHIhdEk8zMnaiLZzRTAwk1yIAl+mIew==}
     engines: {node: '>=14.21.3'}
     cpu: [x64]
     os: [linux]
 
-  '@biomejs/cli-linux-x64@1.9.4':
-    resolution: {integrity: sha512-lRCJv/Vi3Vlwmbd6K+oQ0KhLHMAysN8lXoCI7XeHlxaajk06u7G+UsFSO01NAs5iYuWKmVZjmiOzJ0OJmGsMwg==}
+  '@biomejs/cli-linux-x64@2.1.3':
+    resolution: {integrity: sha512-NxlSCBhLvQtWGagEztfAZ4WcE1AkMTntZV65ZvR+J9jp06+EtOYEBPQndA70ZGhHbEDG57bR6uNvqkd1WrEYVA==}
     engines: {node: '>=14.21.3'}
     cpu: [x64]
     os: [linux]
 
-  '@biomejs/cli-win32-arm64@1.9.4':
-    resolution: {integrity: sha512-tlbhLk+WXZmgwoIKwHIHEBZUwxml7bRJgk0X2sPyNR3S93cdRq6XulAZRQJ17FYGGzWne0fgrXBKpl7l4M87Hg==}
+  '@biomejs/cli-win32-arm64@2.1.3':
+    resolution: {integrity: sha512-V9CUZCtWH4u0YwyCYbQ3W5F4ZGPWp2C2TYcsiWFNNyRfmOW1j/TY/jAurl33SaRjgZPO5UUhGyr9m6BN9t84NQ==}
     engines: {node: '>=14.21.3'}
     cpu: [arm64]
     os: [win32]
 
-  '@biomejs/cli-win32-x64@1.9.4':
-    resolution: {integrity: sha512-8Y5wMhVIPaWe6jw2H+KlEm4wP/f7EW3810ZLmDlrEEy5KvBsb9ECEfu/kMWD484ijfQ8+nIi0giMgu9g1UAuuA==}
+  '@biomejs/cli-win32-x64@2.1.3':
+    resolution: {integrity: sha512-dxy599q6lgp8ANPpR8sDMscwdp9oOumEsVXuVCVT9N2vAho8uYXlCz53JhxX6LtJOXaE73qzgkGQ7QqvFlMC0g==}
     engines: {node: '>=14.21.3'}
     cpu: [x64]
     os: [win32]
@@ -2631,11 +2640,11 @@ packages:
       vue-router:
         optional: true
 
-  '@vitest/expect@3.2.3':
-    resolution: {integrity: sha512-W2RH2TPWVHA1o7UmaFKISPvdicFJH+mjykctJFoAkUw+SPTJTGjUNdKscFBrqM7IPnCVu6zihtKYa7TkZS1dkQ==}
+  '@vitest/expect@3.2.4':
+    resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==}
 
-  '@vitest/mocker@3.2.3':
-    resolution: {integrity: sha512-cP6fIun+Zx8he4rbWvi+Oya6goKQDZK+Yq4hhlggwQBbrlOQ4qtZ+G4nxB6ZnzI9lyIb+JnvyiJnPC2AGbKSPA==}
+  '@vitest/mocker@3.2.4':
+    resolution: {integrity: sha512-46ryTE9RZO/rfDd7pEqFl7etuyzekzEhUbTW3BvmeO/BcCMEgq59BKhek3dXDWgAj4oMK6OZi+vRr1wPW6qjEQ==}
     peerDependencies:
       msw: ^2.4.9
       vite: ^5.0.0 || ^6.0.0 || ^7.0.0-0
@@ -2648,14 +2657,17 @@ packages:
   '@vitest/pretty-format@3.2.3':
     resolution: {integrity: sha512-yFglXGkr9hW/yEXngO+IKMhP0jxyFw2/qys/CK4fFUZnSltD+MU7dVYGrH8rvPcK/O6feXQA+EU33gjaBBbAng==}
 
-  '@vitest/runner@3.2.3':
-    resolution: {integrity: sha512-83HWYisT3IpMaU9LN+VN+/nLHVBCSIUKJzGxC5RWUOsK1h3USg7ojL+UXQR3b4o4UBIWCYdD2fxuzM7PQQ1u8w==}
+  '@vitest/pretty-format@3.2.4':
+    resolution: {integrity: sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==}
 
-  '@vitest/snapshot@3.2.3':
-    resolution: {integrity: sha512-9gIVWx2+tysDqUmmM1L0hwadyumqssOL1r8KJipwLx5JVYyxvVRfxvMq7DaWbZZsCqZnu/dZedaZQh4iYTtneA==}
+  '@vitest/runner@3.2.4':
+    resolution: {integrity: sha512-oukfKT9Mk41LreEW09vt45f8wx7DordoWUZMYdY/cyAk7w5TWkTRCNZYF7sX7n2wB7jyGAl74OxgwhPgKaqDMQ==}
 
-  '@vitest/spy@3.2.3':
-    resolution: {integrity: sha512-JHu9Wl+7bf6FEejTCREy+DmgWe+rQKbK+y32C/k5f4TBIAlijhJbRBIRIOCEpVevgRsCQR2iHRUH2/qKVM/plw==}
+  '@vitest/snapshot@3.2.4':
+    resolution: {integrity: sha512-dEYtS7qQP2CjU27QBC5oUOxLE/v5eLkGqPE0ZKEIDGMs4vKWe7IjgLOeauHsR0D5YuuycGRO5oSRXnwnmA78fQ==}
+
+  '@vitest/spy@3.2.4':
+    resolution: {integrity: sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==}
 
   '@vitest/ui@3.2.3':
     resolution: {integrity: sha512-9aR2tY/WT7GRHGEH/9sSIipJqeA21Eh3C6xmiOVmfyBCFmezUSUFLalpaSmRHlRzWCKQU10yz3AHhKuYcdnZGQ==}
@@ -2665,6 +2677,9 @@ packages:
   '@vitest/utils@3.2.3':
     resolution: {integrity: sha512-4zFBCU5Pf+4Z6v+rwnZ1HU1yzOKKvDkMXZrymE2PBlbjKJRlrOxbvpfPSvJTGRIwGoahaOGvp+kbCoxifhzJ1Q==}
 
+  '@vitest/utils@3.2.4':
+    resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
+
   '@webassemblyjs/ast@1.14.1':
     resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
 
@@ -3731,6 +3746,9 @@ packages:
   loupe@3.1.3:
     resolution: {integrity: sha512-kkIp7XSkP78ZxJEsSxW3712C6teJVoeHHwgo9zJ380de7IYyJ2ISlxojcH2pC5OFLewESmnRi/+XCDIEEVyoug==}
 
+  loupe@3.2.0:
+    resolution: {integrity: sha512-2NCfZcT5VGVNX9mSZIxLRkEAegDGBpuQZBy13desuHeVORmBDyAET4TkJr4SjqQy3A8JDofMN6LpkK8Xcm/dlw==}
+
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
@@ -4877,8 +4895,8 @@ packages:
     resolution: {integrity: sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==}
     engines: {node: '>=12.0.0'}
 
-  tinypool@1.1.0:
-    resolution: {integrity: sha512-7CotroY9a8DKsKprEy/a14aCCm8jYVmR7aFy4fpkZM8sdpNJbKkixuNjgM50yCmip2ezc8z4N7k3oe2+rfRJCQ==}
+  tinypool@1.1.1:
+    resolution: {integrity: sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==}
     engines: {node: ^18.0.0 || >=20.0.0}
 
   tinyqueue@2.0.3:
@@ -4977,8 +4995,8 @@ packages:
     resolution: {integrity: sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg==}
     engines: {node: '>=8'}
 
-  typescript@5.7.3:
-    resolution: {integrity: sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==}
+  typescript@5.6.2:
+    resolution: {integrity: sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==}
     engines: {node: '>=14.17'}
     hasBin: true
 
@@ -5100,8 +5118,8 @@ packages:
   vfile@6.0.3:
     resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
 
-  vite-node@3.2.3:
-    resolution: {integrity: sha512-gc8aAifGuDIpZHrPjuHyP4dpQmYXqWw7D1GmDnWeNWP654UEXzVfQ5IHPSK5HaHkwB/+p1atpYpSdw/2kOv8iQ==}
+  vite-node@3.2.4:
+    resolution: {integrity: sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
     hasBin: true
 
@@ -5145,16 +5163,16 @@ packages:
       yaml:
         optional: true
 
-  vitest@3.2.3:
-    resolution: {integrity: sha512-E6U2ZFXe3N/t4f5BwUaVCKRLHqUpk1CBWeMh78UT4VaTPH/2dyvH6ALl29JTovEPu9dVKr/K/J4PkXgrMbw4Ww==}
+  vitest@3.2.4:
+    resolution: {integrity: sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
       '@types/debug': ^4.1.12
       '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
-      '@vitest/browser': 3.2.3
-      '@vitest/ui': 3.2.3
+      '@vitest/browser': 3.2.4
+      '@vitest/ui': 3.2.4
       happy-dom: '*'
       jsdom: '*'
     peerDependenciesMeta:
@@ -5505,39 +5523,39 @@ snapshots:
 
   '@better-fetch/fetch@1.1.18': {}
 
-  '@biomejs/biome@1.9.4':
+  '@biomejs/biome@2.1.3':
     optionalDependencies:
-      '@biomejs/cli-darwin-arm64': 1.9.4
-      '@biomejs/cli-darwin-x64': 1.9.4
-      '@biomejs/cli-linux-arm64': 1.9.4
-      '@biomejs/cli-linux-arm64-musl': 1.9.4
-      '@biomejs/cli-linux-x64': 1.9.4
-      '@biomejs/cli-linux-x64-musl': 1.9.4
-      '@biomejs/cli-win32-arm64': 1.9.4
-      '@biomejs/cli-win32-x64': 1.9.4
+      '@biomejs/cli-darwin-arm64': 2.1.3
+      '@biomejs/cli-darwin-x64': 2.1.3
+      '@biomejs/cli-linux-arm64': 2.1.3
+      '@biomejs/cli-linux-arm64-musl': 2.1.3
+      '@biomejs/cli-linux-x64': 2.1.3
+      '@biomejs/cli-linux-x64-musl': 2.1.3
+      '@biomejs/cli-win32-arm64': 2.1.3
+      '@biomejs/cli-win32-x64': 2.1.3
 
-  '@biomejs/cli-darwin-arm64@1.9.4':
+  '@biomejs/cli-darwin-arm64@2.1.3':
     optional: true
 
-  '@biomejs/cli-darwin-x64@1.9.4':
+  '@biomejs/cli-darwin-x64@2.1.3':
     optional: true
 
-  '@biomejs/cli-linux-arm64-musl@1.9.4':
+  '@biomejs/cli-linux-arm64-musl@2.1.3':
     optional: true
 
-  '@biomejs/cli-linux-arm64@1.9.4':
+  '@biomejs/cli-linux-arm64@2.1.3':
     optional: true
 
-  '@biomejs/cli-linux-x64-musl@1.9.4':
+  '@biomejs/cli-linux-x64-musl@2.1.3':
     optional: true
 
-  '@biomejs/cli-linux-x64@1.9.4':
+  '@biomejs/cli-linux-x64@2.1.3':
     optional: true
 
-  '@biomejs/cli-win32-arm64@1.9.4':
+  '@biomejs/cli-win32-arm64@2.1.3':
     optional: true
 
-  '@biomejs/cli-win32-x64@1.9.4':
+  '@biomejs/cli-win32-x64@2.1.3':
     optional: true
 
   '@csstools/color-helpers@4.2.1': {}
@@ -6984,12 +7002,12 @@ snapshots:
       '@shikijs/core': 3.4.0
       '@shikijs/types': 3.4.0
 
-  '@shikijs/twoslash@3.4.0(typescript@5.7.3)':
+  '@shikijs/twoslash@3.4.0(typescript@5.6.2)':
     dependencies:
       '@shikijs/core': 3.4.0
       '@shikijs/types': 3.4.0
-      twoslash: 0.3.1(typescript@5.7.3)
-      typescript: 5.7.3
+      twoslash: 0.3.1(typescript@5.6.2)
+      typescript: 5.6.2
     transitivePeerDependencies:
       - supports-color
 
@@ -8322,10 +8340,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript/vfs@1.6.1(typescript@5.7.3)':
+  '@typescript/vfs@1.6.1(typescript@5.6.2)':
     dependencies:
       debug: 4.4.0
-      typescript: 5.7.3
+      typescript: 5.6.2
     transitivePeerDependencies:
       - supports-color
 
@@ -8341,17 +8359,17 @@ snapshots:
       next: 15.2.1(@babel/core@7.27.4)(@playwright/test@1.52.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       react: 19.1.0
 
-  '@vitest/expect@3.2.3':
+  '@vitest/expect@3.2.4':
     dependencies:
       '@types/chai': 5.2.2
-      '@vitest/spy': 3.2.3
-      '@vitest/utils': 3.2.3
+      '@vitest/spy': 3.2.4
+      '@vitest/utils': 3.2.4
       chai: 5.2.0
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@3.2.3(vite@6.3.5(@types/node@20.17.46)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.1))':
+  '@vitest/mocker@3.2.4(vite@6.3.5(@types/node@20.17.46)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.1))':
     dependencies:
-      '@vitest/spy': 3.2.3
+      '@vitest/spy': 3.2.4
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
@@ -8361,23 +8379,27 @@ snapshots:
     dependencies:
       tinyrainbow: 2.0.0
 
-  '@vitest/runner@3.2.3':
+  '@vitest/pretty-format@3.2.4':
     dependencies:
-      '@vitest/utils': 3.2.3
+      tinyrainbow: 2.0.0
+
+  '@vitest/runner@3.2.4':
+    dependencies:
+      '@vitest/utils': 3.2.4
       pathe: 2.0.3
       strip-literal: 3.0.0
 
-  '@vitest/snapshot@3.2.3':
+  '@vitest/snapshot@3.2.4':
     dependencies:
-      '@vitest/pretty-format': 3.2.3
+      '@vitest/pretty-format': 3.2.4
       magic-string: 0.30.17
       pathe: 2.0.3
 
-  '@vitest/spy@3.2.3':
+  '@vitest/spy@3.2.4':
     dependencies:
       tinyspy: 4.0.3
 
-  '@vitest/ui@3.2.3(vitest@3.2.3)':
+  '@vitest/ui@3.2.3(vitest@3.2.4)':
     dependencies:
       '@vitest/utils': 3.2.3
       fflate: 0.8.2
@@ -8386,7 +8408,7 @@ snapshots:
       sirv: 3.0.1
       tinyglobby: 0.2.14
       tinyrainbow: 2.0.0
-      vitest: 3.2.3(@types/debug@4.1.12)(@types/node@20.17.46)(@vitest/ui@3.2.3)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.1)
+      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@20.17.46)(@vitest/ui@3.2.3)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.1)
 
   '@vitest/utils@3.2.3':
     dependencies:
@@ -8394,6 +8416,12 @@ snapshots:
       loupe: 3.1.3
       tinyrainbow: 2.0.0
 
+  '@vitest/utils@3.2.4':
+    dependencies:
+      '@vitest/pretty-format': 3.2.4
+      loupe: 3.2.0
+      tinyrainbow: 2.0.0
+
   '@webassemblyjs/ast@1.14.1':
     dependencies:
       '@webassemblyjs/helper-numbers': 1.13.2
@@ -9532,6 +9560,8 @@ snapshots:
 
   loupe@3.1.3: {}
 
+  loupe@3.2.0: {}
+
   lru-cache@10.4.3: {}
 
   lru-cache@5.1.1:
@@ -11054,13 +11084,13 @@ snapshots:
 
   shell-quote@1.8.3: {}
 
-  shiki-twoslash@3.1.2(typescript@5.7.3):
+  shiki-twoslash@3.1.2(typescript@5.6.2):
     dependencies:
       '@typescript/twoslash': 3.1.0
       '@typescript/vfs': 1.3.4
       fenceparser: 1.1.1
       shiki: 0.10.1
-      typescript: 5.7.3
+      typescript: 5.6.2
     transitivePeerDependencies:
       - supports-color
 
@@ -11290,7 +11320,7 @@ snapshots:
       fdir: 6.4.6(picomatch@4.0.2)
       picomatch: 4.0.2
 
-  tinypool@1.1.0: {}
+  tinypool@1.1.1: {}
 
   tinyqueue@2.0.3: {}
 
@@ -11353,11 +11383,11 @@ snapshots:
 
   twoslash-protocol@0.3.1: {}
 
-  twoslash@0.3.1(typescript@5.7.3):
+  twoslash@0.3.1(typescript@5.6.2):
     dependencies:
-      '@typescript/vfs': 1.6.1(typescript@5.7.3)
+      '@typescript/vfs': 1.6.1(typescript@5.6.2)
       twoslash-protocol: 0.3.1
-      typescript: 5.7.3
+      typescript: 5.6.2
     transitivePeerDependencies:
       - supports-color
 
@@ -11365,7 +11395,7 @@ snapshots:
 
   type-fest@0.7.1: {}
 
-  typescript@5.7.3: {}
+  typescript@5.6.2: {}
 
   typescript@5.8.3: {}
 
@@ -11514,7 +11544,7 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.2
 
-  vite-node@3.2.3(@types/node@20.17.46)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.1):
+  vite-node@3.2.4(@types/node@20.17.46)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.1):
     dependencies:
       cac: 6.7.14
       debug: 4.4.1
@@ -11550,16 +11580,16 @@ snapshots:
       terser: 5.39.0
       yaml: 2.7.1
 
-  vitest@3.2.3(@types/debug@4.1.12)(@types/node@20.17.46)(@vitest/ui@3.2.3)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.1):
+  vitest@3.2.4(@types/debug@4.1.12)(@types/node@20.17.46)(@vitest/ui@3.2.3)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.1):
     dependencies:
       '@types/chai': 5.2.2
-      '@vitest/expect': 3.2.3
-      '@vitest/mocker': 3.2.3(vite@6.3.5(@types/node@20.17.46)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.1))
-      '@vitest/pretty-format': 3.2.3
-      '@vitest/runner': 3.2.3
-      '@vitest/snapshot': 3.2.3
-      '@vitest/spy': 3.2.3
-      '@vitest/utils': 3.2.3
+      '@vitest/expect': 3.2.4
+      '@vitest/mocker': 3.2.4(vite@6.3.5(@types/node@20.17.46)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.1))
+      '@vitest/pretty-format': 3.2.4
+      '@vitest/runner': 3.2.4
+      '@vitest/snapshot': 3.2.4
+      '@vitest/spy': 3.2.4
+      '@vitest/utils': 3.2.4
       chai: 5.2.0
       debug: 4.4.1
       expect-type: 1.2.1
@@ -11570,15 +11600,15 @@ snapshots:
       tinybench: 2.9.0
       tinyexec: 0.3.2
       tinyglobby: 0.2.14
-      tinypool: 1.1.0
+      tinypool: 1.1.1
       tinyrainbow: 2.0.0
       vite: 6.3.5(@types/node@20.17.46)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.1)
-      vite-node: 3.2.3(@types/node@20.17.46)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.1)
+      vite-node: 3.2.4(@types/node@20.17.46)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/debug': 4.1.12
       '@types/node': 20.17.46
-      '@vitest/ui': 3.2.3(vitest@3.2.3)
+      '@vitest/ui': 3.2.3(vitest@3.2.4)
     transitivePeerDependencies:
       - jiti
       - less

homepage/pnpm-workspace.yaml

@@ -4,7 +4,11 @@ packages:
   - "gcmp"
 
 catalog:
+  "@biomejs/biome": 2.1.3
   "react": "19.1.0"
   "react-dom": "19.1.0"
   "@types/react": "19.1.0"
   "@types/react-dom": "19.1.0"
+  "typescript": 5.6.2
+  "vitest": 3.2.4
+  

package.json

@@ -2,20 +2,24 @@
   "name": "jazz-monorepo",
   "private": true,
   "type": "module",
-  "workspaces": ["packages/*", "examples/*", "starters/*"],
+  "workspaces": [
+    "packages/*",
+    "examples/*",
+    "starters/*"
+  ],
   "packageManager": "pnpm@9.15.0+sha512.76e2379760a4328ec4415815bcd6628dee727af3779aaa4c914e3944156c4299921a89f976381ee107d41f12cfa4b66681ca9c718f0668fa0831ed4c6d8ba56c",
   "engines": {
     "node": ">=22.0.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "catalog:",
+    "@biomejs/biome": "2.1.3",
     "@changesets/cli": "^2.27.10",
     "@playwright/test": "^1.50.1",
     "@vitejs/plugin-react": "^4.5.1",
-    "@vitest/browser": "catalog:",
-    "@vitest/coverage-istanbul": "catalog:",
-    "@vitest/coverage-v8": "catalog:",
-    "@vitest/ui": "catalog:",
+    "@vitest/browser": "3.2.4",
+    "@vitest/coverage-istanbul": "3.2.4",
+    "@vitest/coverage-v8": "3.2.4",
+    "@vitest/ui": "3.2.4",
     "happy-dom": "^17.4.4",
     "jazz-run": "workspace:*",
     "jazz-tools": "workspace:*",
@@ -24,7 +28,7 @@
     "playwright": "^1.50.1",
     "turbo": "^2.3.1",
     "typedoc": "^0.25.13",
-    "vitest": "catalog:"
+    "vitest": "3.2.4"
   },
   "scripts": {
     "dev": "turbo dev",
@@ -40,8 +44,7 @@
     "changeset-version": "changeset version && pnpm i --no-frozen-lockfile",
     "release": "turbo run build --filter='./packages/*' && pnpm changeset publish && git push --follow-tags",
     "clean": "rm -rf ./packages/*/dist && rm -rf ./packages/*/node_modules && rm -rf ./examples/*/node_modules && rm -rf ./examples/*/dist",
-    "postinstall": "lefthook install",
-    "check-catalog-deps": "node scripts/check-catalog-deps.js"
+    "postinstall": "lefthook install"
   },
   "version": "0.0.0",
   "pnpm": {
@@ -49,7 +52,11 @@
       "better-sqlite3"
     ],
     "peerDependencyRules": {
-      "ignoreMissing": ["@babel/*", "expo-modules-*", "typescript"]
+      "ignoreMissing": [
+        "@babel/*",
+        "expo-modules-*",
+        "typescript"
+      ]
     },
     "overrides": {
       "@types/react": "19.1.0",

packages/cojson-storage-indexeddb/CHANGELOG.md

@@ -1,5 +1,38 @@
 # cojson-storage-indexeddb
 
+## 0.17.7
+
+### Patch Changes
+
+- cojson@0.17.7
+
+## 0.17.6
+
+### Patch Changes
+
+- cojson@0.17.6
+
+## 0.17.5
+
+### Patch Changes
+
+- Updated dependencies [71c1411]
+- Updated dependencies [2d11d44]
+  - cojson@0.17.5
+
+## 0.17.4
+
+### Patch Changes
+
+- cojson@0.17.4
+
+## 0.17.3
+
+### Patch Changes
+
+- Updated dependencies [f0c73d9]
+  - cojson@0.17.3
+
 ## 0.17.2
 
 ### Patch Changes

packages/cojson-storage-indexeddb/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cojson-storage-indexeddb",
-  "version": "0.17.2",
+  "version": "0.17.7",
   "main": "dist/index.js",
   "type": "module",
   "types": "dist/index.d.ts",
@@ -9,7 +9,7 @@
     "cojson": "workspace:*"
   },
   "devDependencies": {
-    "typescript": "catalog:",
+    "typescript": "5.6.2",
     "webdriverio": "^8.15.0"
   },
   "scripts": {

packages/cojson-storage-sqlite/CHANGELOG.md

@@ -1,5 +1,38 @@
 # cojson-storage-sqlite
 
+## 0.17.7
+
+### Patch Changes
+
+- cojson@0.17.7
+
+## 0.17.6
+
+### Patch Changes
+
+- cojson@0.17.6
+
+## 0.17.5
+
+### Patch Changes
+
+- Updated dependencies [71c1411]
+- Updated dependencies [2d11d44]
+  - cojson@0.17.5
+
+## 0.17.4
+
+### Patch Changes
+
+- cojson@0.17.4
+
+## 0.17.3
+
+### Patch Changes
+
+- Updated dependencies [f0c73d9]
+  - cojson@0.17.3
+
 ## 0.17.2
 
 ### Patch Changes

packages/cojson-storage-sqlite/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cojson-storage-sqlite",
   "type": "module",
-  "version": "0.17.2",
+  "version": "0.17.7",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
@@ -11,7 +11,7 @@
   },
   "devDependencies": {
     "@types/better-sqlite3": "^7.6.12",
-    "typescript": "catalog:"
+    "typescript": "5.6.2"
   },
   "scripts": {
     "dev": "tsc --watch --sourceMap --outDir dist",

packages/cojson-transport-ws/CHANGELOG.md

@@ -1,5 +1,38 @@
 # cojson-transport-nodejs-ws
 
+## 0.17.7
+
+### Patch Changes
+
+- cojson@0.17.7
+
+## 0.17.6
+
+### Patch Changes
+
+- cojson@0.17.6
+
+## 0.17.5
+
+### Patch Changes
+
+- Updated dependencies [71c1411]
+- Updated dependencies [2d11d44]
+  - cojson@0.17.5
+
+## 0.17.4
+
+### Patch Changes
+
+- cojson@0.17.4
+
+## 0.17.3
+
+### Patch Changes
+
+- Updated dependencies [f0c73d9]
+  - cojson@0.17.3
+
 ## 0.17.2
 
 ### Patch Changes

packages/cojson-transport-ws/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cojson-transport-ws",
   "type": "module",
-  "version": "0.17.2",
+  "version": "0.17.7",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
@@ -20,7 +20,7 @@
   "devDependencies": {
     "@opentelemetry/sdk-metrics": "^2.0.0",
     "@types/ws": "8.5.10",
-    "typescript": "catalog:",
+    "typescript": "5.6.2",
     "ws": "^8.14.2"
   }
 }

packages/cojson/CHANGELOG.md

@@ -1,5 +1,24 @@
 # cojson
 
+## 0.17.7
+
+## 0.17.6
+
+## 0.17.5
+
+### Patch Changes
+
+- 71c1411: Removed some unnecessary content messages sent after a local transaction when sending a value as dependency before the ack response
+- 2d11d44: Make the CoValueCore.unmount function detach the CoValue from LocalNode
+
+## 0.17.4
+
+## 0.17.3
+
+### Patch Changes
+
+- f0c73d9: Allow storing empty content with header in handleNewContent
+
 ## 0.17.2
 
 ### Patch Changes

packages/cojson/package.json

@@ -25,11 +25,11 @@
   },
   "type": "module",
   "license": "MIT",
-  "version": "0.17.2",
+  "version": "0.17.7",
   "devDependencies": {
     "@opentelemetry/sdk-metrics": "^2.0.0",
     "libsql": "^0.5.13",
-    "typescript": "catalog:"
+    "typescript": "5.6.2"
   },
   "dependencies": {
     "@noble/ciphers": "^1.3.0",

packages/cojson/src/GarbageCollector.ts

@@ -33,11 +33,7 @@ export class GarbageCollector {
       const timeSinceLastAccessed = currentTime - verified.lastAccessed;
 
       if (timeSinceLastAccessed > GARBAGE_COLLECTOR_CONFIG.MAX_AGE) {
-        const unmounted = coValue.unmount();
-
-        if (unmounted) {
-          this.coValues.delete(coValue.id);
-        }
+        coValue.unmount();
       }
     }
   }

packages/cojson/src/coValueContentMessage.ts

@@ -1,8 +1,4 @@
-import {
-  CoValueHeader,
-  Transaction,
-  VerifiedState,
-} from "./coValueCore/verifiedState.js";
+import { CoValueHeader, Transaction } from "./coValueCore/verifiedState.js";
 import { TRANSACTION_CONFIG } from "./config.js";
 import { Signature } from "./crypto/crypto.js";
 import { RawCoID, SessionID } from "./ids.js";
@@ -65,6 +61,7 @@ export function exceedsRecommendedSize(
 
 export function knownStateFromContent(content: NewContentMessage) {
   const knownState = emptyKnownState(content.id);
+  knownState.header = Boolean(content.header);
 
   for (const [sessionID, session] of Object.entries(content.new)) {
     knownState.sessions[sessionID as SessionID] =

packages/cojson/src/coValueCore/coValueCore.ts

@@ -219,6 +219,8 @@ export class CoValueCore {
       this.groupInvalidationSubscription = undefined;
     }
 
+    this.node.internalDeleteCoValue(this.id);
+
     return true;
   }
 

packages/cojson/src/sync.ts

@@ -706,7 +706,10 @@ export class SyncManager {
 
     const syncedPeers = [];
 
-    if (from !== "storage" && Object.keys(contentToStore.new).length > 0) {
+    const hasNewContent =
+      contentToStore.header || Object.keys(contentToStore.new).length > 0;
+
+    if (from !== "storage" && hasNewContent) {
       this.storeContent(contentToStore);
     }
 

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

@@ -0,0 +1,215 @@
+import { describe, expect, test } from "vitest";
+import { knownStateFromContent } from "../coValueContentMessage.js";
+import { emptyKnownState } from "../sync.js";
+import type { NewContentMessage } from "../sync.js";
+import type { RawCoID, SessionID } from "../ids.js";
+import { stableStringify } from "../jsonStringify.js";
+import { CO_VALUE_PRIORITY } from "../priority.js";
+
+describe("knownStateFromContent", () => {
+  const mockCoID: RawCoID = "co_z1234567890abcdef";
+  const mockSessionID1: SessionID = "sealer_z123/signer_z456_session_z789";
+  const mockSessionID2: SessionID = "sealer_zabc/signer_zdef_session_zghi";
+
+  test("returns empty known state for content with no header and no sessions", () => {
+    const content: NewContentMessage = {
+      action: "content",
+      id: mockCoID,
+      header: undefined,
+      priority: CO_VALUE_PRIORITY.HIGH,
+      new: {},
+    };
+
+    const result = knownStateFromContent(content);
+    const expected = emptyKnownState(mockCoID);
+
+    expect(result).toEqual(expected);
+    expect(result.id).toBe(mockCoID);
+    expect(result.header).toBe(false);
+    expect(result.sessions).toEqual({});
+  });
+
+  test("sets header to true when content has header", () => {
+    const content: NewContentMessage = {
+      action: "content",
+      id: mockCoID,
+      header: {
+        type: "comap",
+        ruleset: { type: "unsafeAllowAll" },
+        meta: null,
+        uniqueness: null,
+        createdAt: null,
+      },
+      priority: CO_VALUE_PRIORITY.HIGH,
+      new: {},
+    };
+
+    const result = knownStateFromContent(content);
+
+    expect(result.header).toBe(true);
+    expect(result.id).toBe(mockCoID);
+    expect(result.sessions).toEqual({});
+  });
+
+  test("sets header to false when content has no header", () => {
+    const content: NewContentMessage = {
+      action: "content",
+      id: mockCoID,
+      priority: CO_VALUE_PRIORITY.HIGH,
+      new: {},
+    };
+
+    const result = knownStateFromContent(content);
+
+    expect(result.header).toBe(false);
+    expect(result.id).toBe(mockCoID);
+    expect(result.sessions).toEqual({});
+  });
+
+  test("calculates session states correctly for single session", () => {
+    const content: NewContentMessage = {
+      action: "content",
+      id: mockCoID,
+      header: {
+        type: "comap",
+        ruleset: { type: "unsafeAllowAll" },
+        meta: null,
+        uniqueness: null,
+        createdAt: null,
+      },
+      priority: CO_VALUE_PRIORITY.HIGH,
+      new: {
+        [mockSessionID1]: {
+          after: 5,
+          newTransactions: [
+            {
+              privacy: "trusting",
+              madeAt: Date.now(),
+              changes: stableStringify([]),
+            },
+            {
+              privacy: "trusting",
+              madeAt: Date.now(),
+              changes: stableStringify([]),
+            },
+            {
+              privacy: "trusting",
+              madeAt: Date.now(),
+              changes: stableStringify([]),
+            },
+          ],
+          lastSignature: "signature_z1234",
+        },
+      },
+    };
+
+    const result = knownStateFromContent(content);
+
+    expect(result.header).toBe(true);
+    expect(result.sessions[mockSessionID1]).toBe(8); // 5 + 3
+    expect(Object.keys(result.sessions)).toHaveLength(1);
+  });
+
+  test("calculates session states correctly for multiple sessions", () => {
+    const content: NewContentMessage = {
+      action: "content",
+      id: mockCoID,
+      priority: CO_VALUE_PRIORITY.HIGH,
+      new: {
+        [mockSessionID1]: {
+          after: 3,
+          newTransactions: [
+            {
+              privacy: "trusting",
+              madeAt: Date.now(),
+              changes: stableStringify([]),
+            },
+            {
+              privacy: "trusting",
+              madeAt: Date.now(),
+              changes: stableStringify([]),
+            },
+          ],
+          lastSignature: "signature_z1234",
+        },
+        [mockSessionID2]: {
+          after: 7,
+          newTransactions: [
+            {
+              privacy: "trusting",
+              madeAt: Date.now(),
+              changes: stableStringify([]),
+            },
+            {
+              privacy: "trusting",
+              madeAt: Date.now(),
+              changes: stableStringify([]),
+            },
+            {
+              privacy: "trusting",
+              madeAt: Date.now(),
+              changes: stableStringify([]),
+            },
+            {
+              privacy: "trusting",
+              madeAt: Date.now(),
+              changes: stableStringify([]),
+            },
+          ],
+          lastSignature: "signature_z1234",
+        },
+      },
+    };
+
+    const result = knownStateFromContent(content);
+
+    expect(result.header).toBe(false);
+    expect(result.sessions[mockSessionID1]).toBe(5); // 3 + 2
+    expect(result.sessions[mockSessionID2]).toBe(11); // 7 + 4
+    expect(Object.keys(result.sessions)).toHaveLength(2);
+  });
+
+  test("handles session with no transactions", () => {
+    const content: NewContentMessage = {
+      action: "content",
+      id: mockCoID,
+      priority: CO_VALUE_PRIORITY.HIGH,
+      new: {
+        [mockSessionID1]: {
+          after: 10,
+          newTransactions: [],
+          lastSignature: "signature_z1234",
+        },
+      },
+    };
+
+    const result = knownStateFromContent(content);
+
+    expect(result.sessions[mockSessionID1]).toBe(10); // 10 + 0
+  });
+
+  test("handles session with after index 0", () => {
+    const content: NewContentMessage = {
+      action: "content",
+      id: mockCoID,
+      priority: CO_VALUE_PRIORITY.HIGH,
+      new: {
+        [mockSessionID1]: {
+          after: 0,
+          newTransactions: [
+            {
+              privacy: "trusting",
+              madeAt: Date.now(),
+              changes: stableStringify([]),
+            },
+          ],
+          lastSignature: "signature_z1234",
+        },
+      },
+    };
+
+    const result = knownStateFromContent(content);
+
+    expect(result.sessions[mockSessionID1]).toBe(1); // 0 + 1
+  });
+});

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

@@ -163,12 +163,10 @@ describe("sync after the garbage collector has run", () => {
         "edge -> storage | LOAD Map sessions: empty",
         "storage -> edge | CONTENT Group header: true new: After: 0 New: 5",
         "storage -> edge | CONTENT Map header: true new: After: 0 New: 1",
-        "edge -> server | CONTENT Map header: true new: ",
         "edge -> client | CONTENT Group header: true new: After: 0 New: 5",
         "edge -> client | CONTENT Map header: true new: After: 0 New: 1",
         "server -> edge | KNOWN Map sessions: header/1",
         "server -> storage | CONTENT Map header: true new: After: 0 New: 1",
-        "server -> edge | KNOWN Map sessions: header/1",
         "client -> edge | KNOWN Group sessions: header/5",
         "client -> edge | KNOWN Map sessions: header/1",
       ]

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

@@ -973,7 +973,6 @@ describe("loading coValues from server", () => {
         "server -> client | KNOWN Group sessions: header/6",
         "server -> client | KNOWN ParentGroup sessions: header/8",
         "server -> client | KNOWN Map sessions: header/1",
-        "client -> server | CONTENT ParentGroup header: true new: ",
       ]
     `);
   });

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

@@ -132,6 +132,10 @@ describe("multiple clients syncing with the a cloud-like server mesh", () => {
 
     group.extend(parentGroup);
 
+    // We wait for sync here to avoid flakiness on CI
+    await parentGroup.core.waitForSync();
+    await group.core.waitForSync();
+
     const map = group.createMap();
     map.set("hello", "world");
 
@@ -154,19 +158,17 @@ describe("multiple clients syncing with the a cloud-like server mesh", () => {
         "edge-france -> core | CONTENT ParentGroup header: true new: After: 0 New: 6",
         "edge-france -> storage | CONTENT Group header: false new: After: 3 New: 2",
         "edge-france -> core | CONTENT Group header: false new: After: 3 New: 2",
-        "edge-france -> storage | CONTENT Map header: true new: After: 0 New: 1",
-        "edge-france -> core | CONTENT Map header: true new: After: 0 New: 1",
         "core -> edge-france | KNOWN Group sessions: header/3",
         "core -> storage | CONTENT Group header: true new: After: 0 New: 3",
         "core -> edge-france | KNOWN ParentGroup sessions: header/6",
         "core -> storage | CONTENT ParentGroup header: true new: After: 0 New: 6",
         "core -> edge-france | KNOWN Group sessions: header/5",
         "core -> storage | CONTENT Group header: false new: After: 3 New: 2",
+        "edge-france -> storage | CONTENT Map header: true new: After: 0 New: 1",
+        "edge-france -> core | CONTENT Map header: true new: After: 0 New: 1",
         "core -> edge-france | KNOWN Map sessions: header/1",
         "core -> storage | CONTENT Map header: true new: After: 0 New: 1",
-        "edge-france -> core | CONTENT ParentGroup header: true new: ",
         "client -> edge-italy | LOAD Map sessions: empty",
-        "core -> edge-france | KNOWN ParentGroup sessions: header/6",
         "edge-italy -> storage | LOAD Map sessions: empty",
         "storage -> edge-italy | KNOWN Map sessions: empty",
         "edge-italy -> core | LOAD Map sessions: empty",
@@ -588,11 +590,9 @@ describe("multiple clients syncing with the a cloud-like server mesh", () => {
         "client -> edge | KNOWN Group sessions: header/5",
         "client -> storage | CONTENT Group header: true new: After: 0 New: 5",
         "client -> edge | KNOWN Map sessions: header/0",
+        "client -> storage | CONTENT Map header: true new: ",
         "client -> edge | KNOWN Map sessions: header/41",
         "client -> storage | CONTENT Map header: false new: After: 0 New: 41",
-        "storage -> client | KNOWN CORRECTION Map sessions: empty",
-        "client -> storage | CONTENT Map header: true new:  expectContentUntil: header/100",
-        "client -> storage | CONTENT Map header: false new: After: 0 New: 41",
         "storage -> edge | CONTENT Map header: true new: After: 41 New: 21",
         "edge -> client | CONTENT Map header: false new: After: 41 New: 21",
         "edge -> core | CONTENT Group header: true new: After: 0 New: 5",
@@ -607,11 +607,9 @@ describe("multiple clients syncing with the a cloud-like server mesh", () => {
         "core -> edge | KNOWN Group sessions: header/5",
         "core -> storage | CONTENT Group header: true new: After: 0 New: 5",
         "core -> edge | KNOWN Map sessions: header/0",
+        "core -> storage | CONTENT Map header: true new: ",
         "core -> edge | KNOWN Map sessions: header/41",
         "core -> storage | CONTENT Map header: false new: After: 0 New: 41",
-        "storage -> core | KNOWN CORRECTION Map sessions: empty",
-        "core -> storage | CONTENT Map header: true new:  expectContentUntil: header/100",
-        "core -> storage | CONTENT Map header: false new: After: 0 New: 41",
         "core -> edge | KNOWN Map sessions: header/62",
         "core -> storage | CONTENT Map header: false new: After: 41 New: 21",
         "core -> edge | KNOWN Map sessions: header/83",

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

@@ -47,8 +47,6 @@ describe("peer reconciliation", () => {
         "server -> client | KNOWN Map sessions: empty",
         "server -> client | KNOWN Group sessions: header/3",
         "server -> client | KNOWN Map sessions: header/1",
-        "client -> server | CONTENT Group header: true new: ",
-        "client -> server | CONTENT Map header: true new: ",
       ]
     `);
   });

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

@@ -555,4 +555,53 @@ describe("client syncs with a server with storage", () => {
       ]
     `);
   });
+
+  test("should store values with no transactions", async () => {
+    const alice = setupTestNode({
+      connected: true,
+    });
+    const group = alice.node.createGroup();
+    group.addMember("everyone", "writer");
+    const map = group.createMap();
+
+    await map.core.waitForSync();
+
+    const bob = setupTestNode();
+    bob.connectToSyncServer({
+      ourName: "bob",
+    });
+    const { storage } = bob.addStorage({
+      ourName: "bob",
+    });
+
+    SyncMessagesLog.clear(); // We want to focus on the sync messages happening from now
+
+    await loadCoValueOrFail(bob.node, map.id);
+
+    // The map should be stored in bob's storage
+    expect(storage.getKnownState(map.id)).toEqual({
+      header: true,
+      id: map.id,
+      sessions: {},
+    });
+
+    expect(
+      SyncMessagesLog.getMessages({
+        Group: group.core,
+        Map: map.core,
+      }),
+    ).toMatchInlineSnapshot(`
+      [
+        "bob -> storage | LOAD Map sessions: empty",
+        "storage -> bob | KNOWN Map sessions: empty",
+        "bob -> server | LOAD Map sessions: empty",
+        "server -> bob | CONTENT Group header: true new: After: 0 New: 5",
+        "server -> bob | CONTENT Map header: true new: ",
+        "bob -> server | KNOWN Group sessions: header/5",
+        "bob -> storage | CONTENT Group header: true new: After: 0 New: 5",
+        "bob -> server | KNOWN Map sessions: header/0",
+        "bob -> storage | CONTENT Map header: true new: ",
+      ]
+    `);
+  });
 });

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

@@ -86,7 +86,6 @@ describe("client to server upload", () => {
         "server -> client | KNOWN ParentGroup sessions: header/6",
         "server -> client | KNOWN Group sessions: header/5",
         "server -> client | KNOWN Map sessions: header/1",
-        "client -> server | CONTENT ParentGroup header: true new: ",
       ]
     `);
   });

packages/community-jazz-vue/CHANGELOG.md

@@ -1,5 +1,47 @@
 # jazz-react
 
+## 0.17.7
+
+### Patch Changes
+
+- cojson@0.17.7
+- jazz-tools@0.17.7
+
+## 0.17.6
+
+### Patch Changes
+
+- Updated dependencies [82de51c]
+- Updated dependencies [694b168]
+  - jazz-tools@0.17.6
+  - cojson@0.17.6
+
+## 0.17.5
+
+### Patch Changes
+
+- Updated dependencies [71c1411]
+- Updated dependencies [2d11d44]
+- Updated dependencies [5963658]
+  - cojson@0.17.5
+  - jazz-tools@0.17.5
+
+## 0.17.4
+
+### Patch Changes
+
+- Updated dependencies [7dd3d00]
+  - jazz-tools@0.17.4
+  - cojson@0.17.4
+
+## 0.17.3
+
+### Patch Changes
+
+- Updated dependencies [f0c73d9]
+  - cojson@0.17.3
+  - jazz-tools@0.17.3
+
 ## 0.17.2
 
 ### Patch Changes

packages/community-jazz-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "community-jazz-vue",
-  "version": "0.17.2",
+  "version": "0.17.7",
   "type": "module",
   "main": "dist/index.js",
   "types": "src/index.ts",

packages/create-jazz-app/CHANGELOG.md

@@ -1,5 +1,11 @@
 # create-jazz-app
 
+## 0.1.26
+
+### Patch Changes
+
+- 86bd87e: Replace catalog entries on package.json with their current catalog value
+
 ## 0.1.25
 
 ### Patch Changes

packages/create-jazz-app/package.json

@@ -5,7 +5,7 @@
   "types": "src/index.ts",
   "type": "module",
   "license": "MIT",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "bin": {
     "create-jazz-app": "./dist/index.js"
   },
@@ -14,14 +14,15 @@
     "commander": "^11.0.0",
     "degit": "^2.8.4",
     "inquirer": "^9.2.10",
-    "ora": "^7.0.1"
+    "ora": "^7.0.1",
+    "yaml": "^2.3.4"
   },
   "devDependencies": {
     "@types/degit": "^2.8.3",
     "@types/gradient-string": "^1.1.2",
     "@types/inquirer": "^9.0.3",
-    "typescript": "catalog:",
-    "vitest": "catalog:"
+    "typescript": "5.6.2",
+    "vitest": "3.2.4"
   },
   "scripts": {
     "dev": "tsc --watch",

packages/create-jazz-app/src/catalog.ts

@@ -0,0 +1,75 @@
+import fs from "fs";
+import path from "path";
+import chalk from "chalk";
+import YAML from "yaml";
+
+type CatalogDefinitions = {
+  [catalogName: string]: Record<string, string>;
+};
+
+export function findWorkspaceRoot(): string {
+  let currentDir = process.cwd();
+
+  while (currentDir !== path.dirname(currentDir)) {
+    const workspaceFile = path.join(currentDir, "pnpm-workspace.yaml");
+    if (fs.existsSync(workspaceFile)) {
+      return currentDir;
+    }
+    currentDir = path.dirname(currentDir);
+  }
+
+  throw new Error("Could not find pnpm-workspace.yaml in any parent directory");
+}
+
+export function parseCatalogDefinitions(): CatalogDefinitions {
+  try {
+    const workspaceRoot = findWorkspaceRoot();
+    const workspaceFile = path.join(workspaceRoot, "pnpm-workspace.yaml");
+    const workspaceContent = fs.readFileSync(workspaceFile, "utf8");
+    const workspaceConfig = YAML.parse(workspaceContent);
+
+    return workspaceConfig.catalogs || {};
+  } catch (error) {
+    console.warn(
+      chalk.yellow(
+        "Warning: Could not parse pnpm-workspace.yaml, catalog dependencies will not be resolved",
+      ),
+    );
+    return {};
+  }
+}
+
+export function resolveCatalogVersion(
+  packageName: string,
+  catalogRef: string,
+  catalogs: CatalogDefinitions,
+): string | null {
+  // Parse catalog reference: "catalog:" uses default, "catalog:react" uses react catalog
+  const catalogName = catalogRef.startsWith("catalog:")
+    ? catalogRef.slice(8) || "default"
+    : null;
+
+  if (!catalogName) return null;
+
+  const catalog = catalogs[catalogName];
+  if (!catalog) {
+    console.warn(
+      chalk.yellow(
+        `Warning: Catalog "${catalogName}" not found in pnpm-workspace.yaml`,
+      ),
+    );
+    return null;
+  }
+
+  const version = catalog[packageName];
+  if (!version) {
+    console.warn(
+      chalk.yellow(
+        `Warning: Package "${packageName}" not found in catalog "${catalogName}"`,
+      ),
+    );
+    return null;
+  }
+
+  return version;
+}

packages/create-jazz-app/src/index.ts

@@ -17,6 +17,7 @@ import {
   frameworks,
 } from "./config.js";
 import { type PackageManager, getPkgManager } from "./utils.js";
+import { parseCatalogDefinitions, resolveCatalogVersion } from "./catalog.js";
 
 // Handle SIGINT (Ctrl+C) gracefully
 process.on("SIGINT", () => {
@@ -176,7 +177,10 @@ async function scaffoldProject({
     const packageJsonPath = `${projectName}/package.json`;
     const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf8"));
 
-    // Helper function to update workspace dependencies
+    // Parse catalog definitions once
+    const catalogs = parseCatalogDefinitions();
+
+    // Helper function to update workspace and catalog dependencies
     async function updateWorkspaceDependencies(
       dependencyType: "dependencies" | "devDependencies",
     ) {
@@ -187,8 +191,27 @@ async function scaffoldProject({
 
         Object.entries(packageJson[dependencyType]).forEach(
           ([pkg, version]) => {
-            if (typeof version === "string" && version.includes("workspace:")) {
-              packageJson[dependencyType][pkg] = latestVersions[pkg];
+            if (typeof version === "string") {
+              if (version.includes("workspace:")) {
+                // Handle workspace: dependencies
+                packageJson[dependencyType][pkg] = latestVersions[pkg];
+              } else if (version.startsWith("catalog:")) {
+                // Handle catalog: dependencies
+                const resolvedVersion = resolveCatalogVersion(
+                  pkg,
+                  version,
+                  catalogs,
+                );
+                if (resolvedVersion) {
+                  packageJson[dependencyType][pkg] = resolvedVersion;
+                } else {
+                  console.warn(
+                    chalk.yellow(
+                      `Warning: Could not resolve catalog dependency "${pkg}": "${version}"`,
+                    ),
+                  );
+                }
+              }
             }
           },
         );

packages/create-jazz-app/tests/catalog-resolution.test.ts

@@ -0,0 +1,224 @@
+import fs from "fs";
+import path from "path";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import YAML from "yaml";
+import {
+  findWorkspaceRoot,
+  parseCatalogDefinitions,
+  resolveCatalogVersion,
+} from "../src/catalog.js";
+
+describe("Catalog Resolution", () => {
+  let mockWorkspaceRoot: string;
+  let mockWorkspaceFile: string;
+
+  beforeEach(() => {
+    // Create a temporary workspace structure for testing
+    mockWorkspaceRoot = path.join(__dirname, "mock-workspace");
+    mockWorkspaceFile = path.join(mockWorkspaceRoot, "pnpm-workspace.yaml");
+
+    if (!fs.existsSync(mockWorkspaceRoot)) {
+      fs.mkdirSync(mockWorkspaceRoot, { recursive: true });
+    }
+  });
+
+  afterEach(() => {
+    // Clean up mock workspace
+    if (fs.existsSync(mockWorkspaceRoot)) {
+      fs.rmSync(mockWorkspaceRoot, { recursive: true, force: true });
+    }
+  });
+
+  // Helper function to create a mock workspace file
+  function createMockWorkspace(
+    catalogs: Record<string, Record<string, string>>,
+  ) {
+    const workspaceConfig = {
+      packages: ["packages/*"],
+      catalogs,
+    };
+    fs.writeFileSync(mockWorkspaceFile, YAML.stringify(workspaceConfig));
+  }
+
+  describe("findWorkspaceRoot", () => {
+    it("should find workspace root when run from workspace directory", () => {
+      createMockWorkspace({});
+      const originalCwd = process.cwd();
+
+      try {
+        process.chdir(mockWorkspaceRoot);
+        const result = findWorkspaceRoot();
+        expect(result).toBe(mockWorkspaceRoot);
+      } finally {
+        process.chdir(originalCwd);
+      }
+    });
+
+    it("should find workspace root when run from subdirectory", () => {
+      createMockWorkspace({});
+      const subDir = path.join(mockWorkspaceRoot, "packages", "test");
+      fs.mkdirSync(subDir, { recursive: true });
+      const originalCwd = process.cwd();
+
+      try {
+        process.chdir(subDir);
+        const result = findWorkspaceRoot();
+        expect(result).toBe(mockWorkspaceRoot);
+      } finally {
+        process.chdir(originalCwd);
+      }
+    });
+
+    it("should throw error when no workspace found", () => {
+      // Start from filesystem root to ensure no workspace file is found
+      const fsRoot = path.parse(process.cwd()).root;
+      const originalCwd = process.cwd();
+
+      try {
+        process.chdir(fsRoot);
+        expect(() => findWorkspaceRoot()).toThrow(
+          "Could not find pnpm-workspace.yaml in any parent directory",
+        );
+      } finally {
+        process.chdir(originalCwd);
+      }
+    });
+  });
+
+  describe("parseCatalogDefinitions", () => {
+    it("should parse catalog definitions correctly", () => {
+      const mockCatalogs = {
+        default: {
+          typescript: "5.6.2",
+          vite: "6.3.5",
+        },
+        react: {
+          react: "19.1.0",
+          "react-dom": "19.1.0",
+        },
+      };
+
+      createMockWorkspace(mockCatalogs);
+      const originalCwd = process.cwd();
+
+      try {
+        process.chdir(mockWorkspaceRoot);
+        const result = parseCatalogDefinitions();
+        expect(result).toEqual(mockCatalogs);
+      } finally {
+        process.chdir(originalCwd);
+      }
+    });
+
+    it("should return empty object when no catalogs defined", () => {
+      createMockWorkspace({});
+      const originalCwd = process.cwd();
+
+      try {
+        process.chdir(mockWorkspaceRoot);
+        const result = parseCatalogDefinitions();
+        expect(result).toEqual({});
+      } finally {
+        process.chdir(originalCwd);
+      }
+    });
+
+    it("should return empty object when file doesn't exist", () => {
+      const originalCwd = process.cwd();
+      const fsRoot = path.parse(process.cwd()).root;
+
+      try {
+        process.chdir(fsRoot);
+        const result = parseCatalogDefinitions();
+        expect(result).toEqual({});
+      } finally {
+        process.chdir(originalCwd);
+      }
+    });
+  });
+
+  describe("resolveCatalogVersion", () => {
+    const mockCatalogs = {
+      default: {
+        typescript: "5.6.2",
+        vite: "6.3.5",
+        vitest: "3.2.4",
+      },
+      react: {
+        react: "19.1.0",
+        "react-dom": "19.1.0",
+        "@types/react": "19.1.0",
+      },
+      rn: {
+        "react-native": "0.80.0",
+        react: "19.1.0",
+      },
+    };
+
+    it("should resolve catalog: to default catalog", () => {
+      const result = resolveCatalogVersion(
+        "typescript",
+        "catalog:",
+        mockCatalogs,
+      );
+      expect(result).toBe("5.6.2");
+    });
+
+    it("should resolve catalog:default explicitly", () => {
+      const result = resolveCatalogVersion(
+        "vite",
+        "catalog:default",
+        mockCatalogs,
+      );
+      expect(result).toBe("6.3.5");
+    });
+
+    it("should resolve specific catalog references", () => {
+      const reactResult = resolveCatalogVersion(
+        "react",
+        "catalog:react",
+        mockCatalogs,
+      );
+      expect(reactResult).toBe("19.1.0");
+
+      const rnResult = resolveCatalogVersion(
+        "react-native",
+        "catalog:rn",
+        mockCatalogs,
+      );
+      expect(rnResult).toBe("0.80.0");
+    });
+
+    it("should return null for non-catalog references", () => {
+      const result = resolveCatalogVersion("react", "^19.0.0", mockCatalogs);
+      expect(result).toBeNull();
+    });
+
+    it("should return null for missing catalog", () => {
+      const result = resolveCatalogVersion(
+        "react",
+        "catalog:nonexistent",
+        mockCatalogs,
+      );
+      expect(result).toBeNull();
+    });
+
+    it("should return null for missing package in catalog", () => {
+      const result = resolveCatalogVersion(
+        "nonexistent",
+        "catalog:react",
+        mockCatalogs,
+      );
+      expect(result).toBeNull();
+    });
+
+    it("should handle scoped package names", () => {
+      const result = resolveCatalogVersion(
+        "@types/react",
+        "catalog:react",
+        mockCatalogs,
+      );
+      expect(result).toBe("19.1.0");
+    });
+  });
+});

packages/create-jazz-app/tests/e2e.test.ts

@@ -2,6 +2,7 @@ import { execSync } from "child_process";
 import fs from "fs";
 import path from "path";
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import YAML from "yaml";
 
 describe("End-to-End CLI Tests", () => {
   const testDir = path.join(__dirname, "..", "test-temp");
@@ -85,4 +86,210 @@ describe("End-to-End CLI Tests", () => {
       console.log("CLI executed successfully");
     }
   });
+
+  describe("Catalog Dependency Resolution", () => {
+    let mockProjectDir: string;
+    let mockWorkspaceRoot: string;
+
+    beforeEach(() => {
+      mockProjectDir = path.join(testDir, "test-project");
+      mockWorkspaceRoot = path.join(testDir, "workspace");
+
+      // Create mock workspace structure
+      fs.mkdirSync(mockWorkspaceRoot, { recursive: true });
+      fs.mkdirSync(mockProjectDir, { recursive: true });
+    });
+
+    function createMockWorkspace(
+      catalogs: Record<string, Record<string, string>>,
+    ) {
+      const workspaceConfig = {
+        packages: ["packages/*"],
+        catalogs,
+      };
+      const workspaceFile = path.join(mockWorkspaceRoot, "pnpm-workspace.yaml");
+      fs.writeFileSync(workspaceFile, YAML.stringify(workspaceConfig));
+    }
+
+    function createMockPackageJson(
+      dependencies: Record<string, string>,
+      devDependencies?: Record<string, string>,
+    ) {
+      const packageJson = {
+        name: "test-project",
+        version: "1.0.0",
+        dependencies,
+        ...(devDependencies && { devDependencies }),
+      };
+      const packageJsonPath = path.join(mockProjectDir, "package.json");
+      fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
+      return packageJsonPath;
+    }
+
+    it("should resolve catalog: dependencies to default catalog versions", async () => {
+      // Create mock workspace with catalogs
+      createMockWorkspace({
+        default: {
+          typescript: "5.6.2",
+          vite: "6.3.5",
+        },
+      });
+
+      // Create package.json with catalog dependencies
+      const packageJsonPath = createMockPackageJson(
+        { "some-regular-dep": "^1.0.0" },
+        {
+          typescript: "catalog:",
+          vite: "catalog:default",
+        },
+      );
+
+      // Test the catalog resolution logic by verifying the workspace structure
+      const workspaceContent = fs.readFileSync(
+        path.join(mockWorkspaceRoot, "pnpm-workspace.yaml"),
+        "utf8",
+      );
+      const workspaceConfig = YAML.parse(workspaceContent);
+      const catalogs = workspaceConfig.catalogs || {};
+
+      // Test catalog resolution logic
+      const typescriptVersion = catalogs.default?.typescript;
+      const viteVersion = catalogs.default?.vite;
+
+      expect(typescriptVersion).toBe("5.6.2");
+      expect(viteVersion).toBe("6.3.5");
+
+      // Verify the workspace file was created correctly
+      const workspaceFile = path.join(mockWorkspaceRoot, "pnpm-workspace.yaml");
+      expect(fs.existsSync(workspaceFile)).toBe(true);
+
+      expect(workspaceConfig.catalogs.default.typescript).toBe("5.6.2");
+      expect(workspaceConfig.catalogs.default.vite).toBe("6.3.5");
+    });
+
+    it("should resolve catalog:react dependencies to react catalog versions", async () => {
+      createMockWorkspace({
+        react: {
+          react: "19.1.0",
+          "react-dom": "19.1.0",
+          "@types/react": "19.1.0",
+        },
+      });
+
+      createMockPackageJson({
+        react: "catalog:react",
+        "react-dom": "catalog:react",
+      });
+
+      const workspaceFile = path.join(mockWorkspaceRoot, "pnpm-workspace.yaml");
+      const workspaceContent = fs.readFileSync(workspaceFile, "utf8");
+      const workspaceConfig = YAML.parse(workspaceContent);
+
+      expect(workspaceConfig.catalogs.react.react).toBe("19.1.0");
+      expect(workspaceConfig.catalogs.react["react-dom"]).toBe("19.1.0");
+      expect(workspaceConfig.catalogs.react["@types/react"]).toBe("19.1.0");
+    });
+
+    it("should handle multiple catalog types (rn, expo)", async () => {
+      createMockWorkspace({
+        rn: {
+          "react-native": "0.80.0",
+          react: "19.1.0",
+        },
+        expo: {
+          "react-native": "0.81.0",
+          expo: "54.0.0-canary-20250701-6a945c5",
+          "expo-crypto": "~14.1.5",
+        },
+      });
+
+      createMockPackageJson({
+        "react-native": "catalog:rn",
+        expo: "catalog:expo",
+        "expo-crypto": "catalog:expo",
+      });
+
+      const workspaceFile = path.join(mockWorkspaceRoot, "pnpm-workspace.yaml");
+      const workspaceContent = fs.readFileSync(workspaceFile, "utf8");
+      const workspaceConfig = YAML.parse(workspaceContent);
+
+      expect(workspaceConfig.catalogs.rn["react-native"]).toBe("0.80.0");
+      expect(workspaceConfig.catalogs.expo.expo).toBe(
+        "54.0.0-canary-20250701-6a945c5",
+      );
+      expect(workspaceConfig.catalogs.expo["expo-crypto"]).toBe("~14.1.5");
+    });
+
+    it("should handle mixed workspace: and catalog: dependencies", async () => {
+      createMockWorkspace({
+        default: {
+          typescript: "5.6.2",
+        },
+        react: {
+          react: "19.1.0",
+        },
+      });
+
+      createMockPackageJson(
+        {
+          "some-workspace-dep": "workspace:*",
+          react: "catalog:react",
+          "regular-dep": "^1.0.0",
+        },
+        {
+          typescript: "catalog:",
+          "dev-workspace-dep": "workspace:^",
+        },
+      );
+
+      // Verify the structure is set up correctly for testing
+      const packageJsonPath = path.join(mockProjectDir, "package.json");
+      const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf8"));
+
+      expect(packageJson.dependencies.react).toBe("catalog:react");
+      expect(packageJson.dependencies["some-workspace-dep"]).toBe(
+        "workspace:*",
+      );
+      expect(packageJson.devDependencies.typescript).toBe("catalog:");
+      expect(packageJson.devDependencies["dev-workspace-dep"]).toBe(
+        "workspace:^",
+      );
+    });
+
+    it("should gracefully handle missing catalogs", async () => {
+      createMockWorkspace({
+        default: {
+          typescript: "5.6.2",
+        },
+      });
+
+      createMockPackageJson({
+        react: "catalog:nonexistent",
+        typescript: "catalog:",
+      });
+
+      // Test that the workspace file doesn't contain the nonexistent catalog
+      const workspaceFile = path.join(mockWorkspaceRoot, "pnpm-workspace.yaml");
+      const workspaceContent = fs.readFileSync(workspaceFile, "utf8");
+      const workspaceConfig = YAML.parse(workspaceContent);
+
+      expect(workspaceConfig.catalogs.nonexistent).toBeUndefined();
+      expect(workspaceConfig.catalogs.default.typescript).toBe("5.6.2");
+    });
+
+    it("should handle empty catalogs gracefully", async () => {
+      createMockWorkspace({});
+
+      createMockPackageJson({
+        react: "catalog:",
+        typescript: "catalog:default",
+      });
+
+      const workspaceFile = path.join(mockWorkspaceRoot, "pnpm-workspace.yaml");
+      const workspaceContent = fs.readFileSync(workspaceFile, "utf8");
+      const workspaceConfig = YAML.parse(workspaceContent);
+
+      expect(Object.keys(workspaceConfig.catalogs)).toHaveLength(0);
+    });
+  });
 });

packages/hash-slash/package.json

@@ -8,7 +8,7 @@
   "devDependencies": {
     "@types/react": "^18.3.12",
     "react": "^18.3.1",
-    "typescript": "catalog:"
+    "typescript": "5.6.2"
   },
   "peerDependencies": {
     "react": "*"

packages/jazz-auth-betterauth/CHANGELOG.md

@@ -1,5 +1,52 @@
 # jazz-auth-betterauth
 
+## 0.17.7
+
+### Patch Changes
+
+- cojson@0.17.7
+- jazz-betterauth-client-plugin@0.17.7
+- jazz-tools@0.17.7
+
+## 0.17.6
+
+### Patch Changes
+
+- Updated dependencies [82de51c]
+- Updated dependencies [694b168]
+  - jazz-tools@0.17.6
+  - jazz-betterauth-client-plugin@0.17.6
+  - cojson@0.17.6
+
+## 0.17.5
+
+### Patch Changes
+
+- Updated dependencies [71c1411]
+- Updated dependencies [2d11d44]
+- Updated dependencies [5963658]
+  - cojson@0.17.5
+  - jazz-tools@0.17.5
+  - jazz-betterauth-client-plugin@0.17.5
+
+## 0.17.4
+
+### Patch Changes
+
+- Updated dependencies [7dd3d00]
+  - jazz-tools@0.17.4
+  - jazz-betterauth-client-plugin@0.17.4
+  - cojson@0.17.4
+
+## 0.17.3
+
+### Patch Changes
+
+- Updated dependencies [f0c73d9]
+  - cojson@0.17.3
+  - jazz-tools@0.17.3
+  - jazz-betterauth-client-plugin@0.17.3
+
 ## 0.17.2
 
 ### Patch Changes

packages/jazz-auth-betterauth/package.json

@@ -1,24 +1,24 @@
 {
-	"name": "jazz-auth-betterauth",
-	"version": "0.17.2",
-	"type": "module",
-	"main": "dist/index.js",
-	"types": "src/index.ts",
-	"license": "MIT",
-	"dependencies": {
-		"cojson": "workspace:*",
-		"jazz-tools": "workspace:*",
-		"jazz-betterauth-client-plugin": "workspace:*"
-	},
-	"scripts": {
-		"format-and-lint": "biome check .",
-		"format-and-lint:fix": "biome check . --write",
-		"build": "rm -rf ./dist && tsc --sourceMap --outDir dist",
-		"prepublishOnly": "npm run build",
-		"test": "vitest --run --root ../../ --project jazz-auth-betterauth",
-		"test:watch": "vitest --watch --root ../../ --project jazz-auth-betterauth"
-	},
-	"devDependencies": {
-		"typescript": "catalog:"
-	}
+  "name": "jazz-auth-betterauth",
+  "version": "0.17.7",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "src/index.ts",
+  "license": "MIT",
+  "dependencies": {
+    "cojson": "workspace:*",
+    "jazz-tools": "workspace:*",
+    "jazz-betterauth-client-plugin": "workspace:*"
+  },
+  "scripts": {
+    "format-and-lint": "biome check .",
+    "format-and-lint:fix": "biome check . --write",
+    "build": "rm -rf ./dist && tsc --sourceMap --outDir dist",
+    "prepublishOnly": "npm run build",
+    "test": "vitest --run --root ../../ --project jazz-auth-betterauth",
+    "test:watch": "vitest --watch --root ../../ --project jazz-auth-betterauth"
+  },
+  "devDependencies": {
+    "typescript": "5.6.2"
+  }
 }

packages/jazz-betterauth-client-plugin/CHANGELOG.md

@@ -1,5 +1,35 @@
 # jazz-betterauth-client-plugin
 
+## 0.17.7
+
+### Patch Changes
+
+- jazz-betterauth-server-plugin@0.17.7
+
+## 0.17.6
+
+### Patch Changes
+
+- jazz-betterauth-server-plugin@0.17.6
+
+## 0.17.5
+
+### Patch Changes
+
+- jazz-betterauth-server-plugin@0.17.5
+
+## 0.17.4
+
+### Patch Changes
+
+- jazz-betterauth-server-plugin@0.17.4
+
+## 0.17.3
+
+### Patch Changes
+
+- jazz-betterauth-server-plugin@0.17.3
+
 ## 0.17.2
 
 ### Patch Changes

packages/jazz-betterauth-client-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jazz-betterauth-client-plugin",
-  "version": "0.17.2",
+  "version": "0.17.7",
   "type": "module",
   "main": "dist/index.js",
   "types": "src/index.ts",

packages/jazz-betterauth-server-plugin/CHANGELOG.md

@@ -1,5 +1,47 @@
 # jazz-betterauth-server-plugin
 
+## 0.17.7
+
+### Patch Changes
+
+- cojson@0.17.7
+- jazz-tools@0.17.7
+
+## 0.17.6
+
+### Patch Changes
+
+- Updated dependencies [82de51c]
+- Updated dependencies [694b168]
+  - jazz-tools@0.17.6
+  - cojson@0.17.6
+
+## 0.17.5
+
+### Patch Changes
+
+- Updated dependencies [71c1411]
+- Updated dependencies [2d11d44]
+- Updated dependencies [5963658]
+  - cojson@0.17.5
+  - jazz-tools@0.17.5
+
+## 0.17.4
+
+### Patch Changes
+
+- Updated dependencies [7dd3d00]
+  - jazz-tools@0.17.4
+  - cojson@0.17.4
+
+## 0.17.3
+
+### Patch Changes
+
+- Updated dependencies [f0c73d9]
+  - cojson@0.17.3
+  - jazz-tools@0.17.3
+
 ## 0.17.2
 
 ### Patch Changes

packages/jazz-betterauth-server-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jazz-betterauth-server-plugin",
-  "version": "0.17.2",
+  "version": "0.17.7",
   "type": "module",
   "main": "dist/index.js",
   "types": "src/index.ts",

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

@@ -1,5 +1,57 @@
 # jazz-react-auth-betterauth
 
+## 0.17.7
+
+### Patch Changes
+
+- cojson@0.17.7
+- jazz-auth-betterauth@0.17.7
+- jazz-betterauth-client-plugin@0.17.7
+- jazz-tools@0.17.7
+
+## 0.17.6
+
+### Patch Changes
+
+- Updated dependencies [82de51c]
+- Updated dependencies [694b168]
+  - jazz-tools@0.17.6
+  - jazz-auth-betterauth@0.17.6
+  - jazz-betterauth-client-plugin@0.17.6
+  - cojson@0.17.6
+
+## 0.17.5
+
+### Patch Changes
+
+- Updated dependencies [71c1411]
+- Updated dependencies [2d11d44]
+- Updated dependencies [5963658]
+  - cojson@0.17.5
+  - jazz-tools@0.17.5
+  - jazz-auth-betterauth@0.17.5
+  - jazz-betterauth-client-plugin@0.17.5
+
+## 0.17.4
+
+### Patch Changes
+
+- Updated dependencies [7dd3d00]
+  - jazz-tools@0.17.4
+  - jazz-auth-betterauth@0.17.4
+  - jazz-betterauth-client-plugin@0.17.4
+  - cojson@0.17.4
+
+## 0.17.3
+
+### Patch Changes
+
+- Updated dependencies [f0c73d9]
+  - cojson@0.17.3
+  - jazz-auth-betterauth@0.17.3
+  - jazz-tools@0.17.3
+  - jazz-betterauth-client-plugin@0.17.3
+
 ## 0.17.2
 
 ### Patch Changes

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

@@ -1,28 +1,28 @@
 {
-	"name": "jazz-react-auth-betterauth",
-	"version": "0.17.2",
-	"type": "module",
-	"main": "dist/index.js",
-	"types": "src/index.tsx",
-	"license": "MIT",
-	"dependencies": {
-		"cojson": "workspace:*",
-		"jazz-auth-betterauth": "workspace:*",
-		"jazz-betterauth-client-plugin": "workspace:*",
-		"jazz-tools": "workspace:*"
-	},
-	"peerDependencies": {
-		"react": "*"
-	},
-	"scripts": {
-		"format-and-lint": "biome check .",
-		"format-and-lint:fix": "biome check . --write",
-		"build": "rm -rf ./dist && tsc --sourceMap --outDir dist",
-		"prepublishOnly": "npm run build"
-	},
-	"devDependencies": {
-		"@testing-library/react": "^16.1.0",
-		"@types/react": "^17 || ^18 || ^19",
-		"typescript": "catalog:"
-	}
+  "name": "jazz-react-auth-betterauth",
+  "version": "0.17.7",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "src/index.tsx",
+  "license": "MIT",
+  "dependencies": {
+    "cojson": "workspace:*",
+    "jazz-auth-betterauth": "workspace:*",
+    "jazz-betterauth-client-plugin": "workspace:*",
+    "jazz-tools": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "*"
+  },
+  "scripts": {
+    "format-and-lint": "biome check .",
+    "format-and-lint:fix": "biome check . --write",
+    "build": "rm -rf ./dist && tsc --sourceMap --outDir dist",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^17 || ^18 || ^19",
+    "typescript": "5.6.2"
+  }
 }

packages/jazz-run/CHANGELOG.md

@@ -1,5 +1,58 @@
 # jazz-run
 
+## 0.17.7
+
+### Patch Changes
+
+- feaa69e: Add host option to the jazz-run sync command
+  - cojson@0.17.7
+  - cojson-storage-sqlite@0.17.7
+  - cojson-transport-ws@0.17.7
+  - jazz-tools@0.17.7
+
+## 0.17.6
+
+### Patch Changes
+
+- Updated dependencies [82de51c]
+- Updated dependencies [694b168]
+  - jazz-tools@0.17.6
+  - cojson@0.17.6
+  - cojson-storage-sqlite@0.17.6
+  - cojson-transport-ws@0.17.6
+
+## 0.17.5
+
+### Patch Changes
+
+- Updated dependencies [71c1411]
+- Updated dependencies [2d11d44]
+- Updated dependencies [5963658]
+  - cojson@0.17.5
+  - jazz-tools@0.17.5
+  - cojson-storage-sqlite@0.17.5
+  - cojson-transport-ws@0.17.5
+
+## 0.17.4
+
+### Patch Changes
+
+- Updated dependencies [7dd3d00]
+  - jazz-tools@0.17.4
+  - cojson@0.17.4
+  - cojson-storage-sqlite@0.17.4
+  - cojson-transport-ws@0.17.4
+
+## 0.17.3
+
+### Patch Changes
+
+- Updated dependencies [f0c73d9]
+  - cojson@0.17.3
+  - cojson-storage-sqlite@0.17.3
+  - cojson-transport-ws@0.17.3
+  - jazz-tools@0.17.3
+
 ## 0.17.2
 
 ### Patch Changes

packages/jazz-run/package.json

@@ -3,7 +3,7 @@
   "bin": "./dist/index.js",
   "type": "module",
   "license": "MIT",
-  "version": "0.17.2",
+  "version": "0.17.7",
   "exports": {
     "./startSyncServer": {
       "types": "./dist/startSyncServer.d.ts",
@@ -28,15 +28,15 @@
     "@effect/printer-ansi": "^0.34.5",
     "@effect/schema": "^0.71.1",
     "@effect/typeclass": "^0.25.5",
-    "cojson": "workspace:0.17.2",
-    "cojson-storage-sqlite": "workspace:0.17.2",
-    "cojson-transport-ws": "workspace:0.17.2",
+    "cojson": "workspace:0.17.7",
+    "cojson-storage-sqlite": "workspace:0.17.7",
+    "cojson-transport-ws": "workspace:0.17.7",
     "effect": "^3.6.5",
-    "jazz-tools": "workspace:0.17.2",
+    "jazz-tools": "workspace:0.17.7",
     "ws": "^8.14.2"
   },
   "devDependencies": {
     "@types/ws": "8.5.10",
-    "typescript": "catalog:"
+    "typescript": "5.6.2"
   }
 }

packages/jazz-run/src/config.ts

@@ -0,0 +1,6 @@
+export const serverDefaults = {
+  host: "127.0.0.1",
+  port: 4200,
+  inMemory: false,
+  db: "sync-db/storage.db",
+};

packages/jazz-run/src/index.ts

@@ -5,6 +5,7 @@ import { NodeContext, NodeRuntime } from "@effect/platform-node";
 import { Console, Effect } from "effect";
 import { createWorkerAccount } from "./createWorkerAccount.js";
 import { startSyncServer } from "./startSyncServer.js";
+import { serverDefaults } from "./config.js";
 
 const jazzTools = Command.make("jazz-tools");
 
@@ -39,36 +40,63 @@ const accountCommand = Command.make("account").pipe(
   Command.withSubcommands([createAccountCommand]),
 );
 
+const hostOption = Options.text("host")
+  .pipe(Options.withAlias("h"))
+  .pipe(
+    Options.withDescription(
+      `The host to listen on. Default is ${serverDefaults.host}`,
+    ),
+  )
+  .pipe(Options.withDefault(serverDefaults.host));
+
 const portOption = Options.text("port")
   .pipe(Options.withAlias("p"))
   .pipe(
     Options.withDescription(
-      "Select a different port for the WebSocket server. Default is 4200",
+      `Select a different port for the WebSocket server. Default is ${serverDefaults.port}`,
     ),
   )
-  .pipe(Options.withDefault("4200"));
+  .pipe(Options.withDefault(serverDefaults.port.toString()));
 
 const inMemoryOption = Options.boolean("in-memory").pipe(
-  Options.withDescription("Use an in-memory storage instead of file-based"),
+  Options.withDescription("Use an in-memory storage instead of file-based."),
 );
 
 const dbOption = Options.file("db")
   .pipe(
     Options.withDescription(
-      "The path to the file where to store the data. Default is 'sync-db/storage.db'",
+      `The path to the file where to store the data. Default is '${serverDefaults.db}'`,
     ),
   )
-  .pipe(Options.withDefault("sync-db/storage.db"));
+  .pipe(Options.withDefault(serverDefaults.db));
 
 const startSyncServerCommand = Command.make(
   "sync",
-  { port: portOption, inMemory: inMemoryOption, db: dbOption },
-  ({ port, inMemory, db }) => {
+  {
+    host: hostOption,
+    port: portOption,
+    inMemory: inMemoryOption,
+    db: dbOption,
+  },
+  ({ host, port, inMemory, db }) => {
     return Effect.gen(function* () {
-      yield* Effect.promise(() => startSyncServer({ port, inMemory, db }));
+      const server = yield* Effect.promise(() =>
+        startSyncServer({ host, port, inMemory, db }),
+      );
+
+      const serverAddress = server.address();
+
+      if (!serverAddress) {
+        return yield* Effect.fail(new Error("Failed to start sync server."));
+      }
+
+      const socketAddress =
+        typeof serverAddress === "object"
+          ? `${serverAddress.address}:${serverAddress.port}`
+          : serverAddress;
 
       yield* Console.log(
-        `COJSON sync server listening on ws://127.0.0.1:${port}`,
+        `COJSON sync server listening on ws://${socketAddress}`,
       );
 
       // Keep the server up

packages/jazz-run/src/startSyncServer.ts

@@ -1,4 +1,4 @@
-import { createServer } from "http";
+import { createServer } from "node:http";
 import { mkdir } from "node:fs/promises";
 import { dirname } from "node:path";
 import { LocalNode } from "cojson";
@@ -6,16 +6,19 @@ import { getBetterSqliteStorage } from "cojson-storage-sqlite";
 import { createWebSocketPeer } from "cojson-transport-ws";
 import { WasmCrypto } from "cojson/crypto/WasmCrypto";
 import { WebSocketServer } from "ws";
+import { type SyncServer } from "./types.js";
 
 export const startSyncServer = async ({
+  host,
   port,
   inMemory,
   db,
 }: {
+  host: string | undefined;
   port: string | undefined;
   inMemory: boolean;
   db: string;
-}) => {
+}): Promise<SyncServer> => {
   const crypto = await WasmCrypto.create();
 
   const server = createServer((req, res) => {
@@ -94,8 +97,6 @@ export const startSyncServer = async ({
     localNode.gracefulShutdown();
   });
 
-  server.listen(port ? parseInt(port) : undefined);
-
   const _close = server.close;
 
   server.close = () => {
@@ -104,5 +105,13 @@ export const startSyncServer = async ({
     return _close.call(server);
   };
 
-  return server;
+  Object.defineProperty(server, "localNode", { value: localNode });
+
+  server.listen(port ? parseInt(port) : undefined, host);
+
+  return new Promise((resolve) => {
+    server.once("listening", () => {
+      resolve(server as SyncServer);
+    });
+  });
 };

packages/jazz-run/src/tests/createWorkerAccount.test.ts

@@ -5,11 +5,13 @@ import { describe, expect, it, onTestFinished } from "vitest";
 import { WebSocket } from "ws";
 import { createWorkerAccount } from "../createWorkerAccount.js";
 import { startSyncServer } from "../startSyncServer.js";
+import { serverDefaults } from "../config.js";
 
 describe("createWorkerAccount - integration tests", () => {
   it("should create a worker account using the local sync server", async () => {
     // Pass port: undefined to let the server choose a random port
     const server = await startSyncServer({
+      host: serverDefaults.host,
       port: undefined,
       inMemory: true,
       db: "",

packages/jazz-run/src/tests/startSyncServer.test.ts

@@ -1,24 +1,29 @@
 import { randomUUID } from "crypto";
 import { tmpdir } from "os";
 import { join } from "path";
-import { LocalNode } from "cojson";
 import { co, z } from "jazz-tools";
 import { startWorker } from "jazz-tools/worker";
-import { describe, expect, test } from "vitest";
+import { describe, expect, test, afterAll } from "vitest";
 import { createWorkerAccount } from "../createWorkerAccount.js";
 import { startSyncServer } from "../startSyncServer.js";
+import { serverDefaults } from "../config.js";
+import { unlinkSync } from "node:fs";
 
 const TestMap = co.map({
   value: z.string(),
 });
 
+const dbPath = join(tmpdir(), `test-${randomUUID()}.db`);
+
+afterAll(() => {
+  unlinkSync(dbPath);
+});
+
 describe("startSyncServer", () => {
   test("persists values in storage and loads them after restart", async () => {
-    // Create a temporary database file
-    const dbPath = join(tmpdir(), `test-${randomUUID()}.db`);
-
     // Start first server instance
     const server1 = await startSyncServer({
+      host: serverDefaults.host,
       port: "0", // Random available port
       inMemory: false,
       db: dbPath,
@@ -48,6 +53,7 @@ describe("startSyncServer", () => {
 
     // Start second server instance with same DB
     const server2 = await startSyncServer({
+      host: serverDefaults.host,
       port: "0",
       inMemory: false,
       db: dbPath,
@@ -74,4 +80,21 @@ describe("startSyncServer", () => {
     await worker2.done();
     server2.close();
   });
+
+  test("starts a sync server with a specific host and port", async () => {
+    const server = await startSyncServer({
+      host: "0.0.0.0",
+      port: "4900",
+      inMemory: false,
+      db: dbPath,
+    });
+
+    expect(server.address()).toEqual({
+      address: "0.0.0.0",
+      port: 4900,
+      family: "IPv4",
+    });
+
+    server.close();
+  });
 });

packages/jazz-run/src/tests/startWorker.test.ts

@@ -18,6 +18,7 @@ import { afterAll, describe, expect, onTestFinished, test } from "vitest";
 import { createWorkerAccount } from "../createWorkerAccount.js";
 import { startSyncServer } from "../startSyncServer.js";
 import { waitFor } from "./utils.js";
+import { serverDefaults } from "../config.js";
 
 const dbPath = join(tmpdir(), `test-${randomUUID()}.db`);
 
@@ -30,9 +31,9 @@ async function setup<
     | (AccountClass<Account> & CoValueFromRaw<Account>)
     | AnyAccountSchema,
 >(AccountSchema?: S) {
-  const { server, port } = await setupSyncServer();
+  const { server, port, host } = await setupSyncServer();
 
-  const syncServer = `ws://localhost:${port}`;
+  const syncServer = `ws://${host}:${port}`;
 
   const { worker, done, waitForConnection, subscribeToConnectionChange } =
     await setupWorker(syncServer, AccountSchema);
@@ -43,13 +44,18 @@ async function setup<
     syncServer,
     server,
     port,
+    host,
     waitForConnection,
     subscribeToConnectionChange,
   };
 }
 
-async function setupSyncServer(defaultPort = "0") {
+async function setupSyncServer(
+  defaultHost = serverDefaults.host,
+  defaultPort = "0",
+) {
   const server = await startSyncServer({
+    host: defaultHost,
     port: defaultPort,
     inMemory: false,
     db: dbPath,
@@ -61,7 +67,7 @@ async function setupSyncServer(defaultPort = "0") {
     server.close();
   });
 
-  return { server, port };
+  return { server, port, host: defaultHost };
 }
 
 async function setupWorker<
@@ -258,6 +264,7 @@ describe("startWorker integration", () => {
 
     // Start a new sync server on the same port
     const newServer = await startSyncServer({
+      host: worker1.host,
       port: worker1.port,
       inMemory: true,
       db: "",
@@ -290,6 +297,7 @@ describe("startWorker integration", () => {
 
     // Start a new sync server on the same port
     const newServer = await startSyncServer({
+      host: worker1.host,
       port: worker1.port,
       inMemory: true,
       db: "",
@@ -326,6 +334,7 @@ describe("startWorker integration", () => {
 
     // Start a new sync server on the same port
     const newServer = await startSyncServer({
+      host: worker1.host,
       port: worker1.port,
       inMemory: true,
       db: "",

packages/jazz-run/src/types.ts

@@ -0,0 +1,4 @@
+import { type Server } from "node:http";
+import { type LocalNode } from "cojson";
+
+export type SyncServer = Server & { localNode: LocalNode };

packages/jazz-tools/CHANGELOG.md

@@ -1,5 +1,52 @@
 # jazz-tools
 
+## 0.17.7
+
+### Patch Changes
+
+- cojson@0.17.7
+- cojson-storage-indexeddb@0.17.7
+- cojson-transport-ws@0.17.7
+
+## 0.17.6
+
+### Patch Changes
+
+- 82de51c: allow creating CoValues from JSON without an active account
+- 694b168: get resized image's id without triggering shallow load in `loadImageBySize`
+  - cojson@0.17.6
+  - cojson-storage-indexeddb@0.17.6
+  - cojson-transport-ws@0.17.6
+
+## 0.17.5
+
+### Patch Changes
+
+- 5963658: Implement/expose loadUnique and upsertUnique on co.list and co.record
+- Updated dependencies [71c1411]
+- Updated dependencies [2d11d44]
+  - cojson@0.17.5
+  - cojson-storage-indexeddb@0.17.5
+  - cojson-transport-ws@0.17.5
+
+## 0.17.4
+
+### Patch Changes
+
+- 7dd3d00: Export `Ref` class from jazz-tools package
+  - cojson@0.17.4
+  - cojson-storage-indexeddb@0.17.4
+  - cojson-transport-ws@0.17.4
+
+## 0.17.3
+
+### Patch Changes
+
+- Updated dependencies [f0c73d9]
+  - cojson@0.17.3
+  - cojson-storage-indexeddb@0.17.3
+  - cojson-transport-ws@0.17.3
+
 ## 0.17.2
 
 ### Patch Changes

packages/jazz-tools/package.json

@@ -36,7 +36,7 @@
       "default": "./dist/expo/index.js"
     },
     "./expo/crypto": {
-      "@jazz-tools/source": "./src/expo/crypto/index.ts",
+      "@jazz-tools/source": "./src/expo/crypto.ts",
       "types": "./dist/expo/crypto.d.ts",
       "default": "./dist/expo/crypto.js"
     },
@@ -91,7 +91,7 @@
       "default": "./dist/react-native/index.js"
     },
     "./react-native/crypto": {
-      "@jazz-tools/source": "./src/react-native/crypto/index.ts",
+      "@jazz-tools/source": "./src/react-native/crypto.ts",
       "types": "./dist/react-native/crypto.d.ts",
       "default": "./dist/react-native/crypto.js"
     },
@@ -140,7 +140,7 @@
   },
   "type": "module",
   "license": "MIT",
-  "version": "0.17.2",
+  "version": "0.17.7",
   "dependencies": {
     "@manuscripts/prosemirror-recreate-steps": "^0.1.4",
     "@scure/base": "1.2.1",
@@ -186,8 +186,8 @@
     "playwright": "^1.50.1",
     "queueueue": "^4.1.2",
     "tsup": "8.5.0",
-    "typescript": "catalog:",
-    "vitest": "catalog:",
+    "typescript": "5.6.2",
+    "vitest": "3.2.4",
     "ws": "^8.14.2"
   },
   "peerDependencies": {
@@ -250,4 +250,4 @@
       "optional": true
     }
   }
-}
+}

packages/jazz-tools/src/expo/crypto.ts

@@ -1 +1 @@
-export * from "jazz-tools/react-native-core/crypto";
+export { RNQuickCrypto } from "jazz-tools/react-native-core/crypto";