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

Version Packages

.github/workflows/playwright.yml

@@ -55,6 +55,7 @@ jobs:
             "examples/inspector"
             "examples/music-player"
             "examples/organization"
+            "examples/server-worker-http"
             "starters/react-passkey-auth"
             "starters/svelte-passkey-auth"
             "tests/jazz-svelte"

biome.json

@@ -14,7 +14,7 @@
       "tests/jazz-svelte/src/**",
       "examples/*svelte*/**",
       "starters/*svelte*/**",
-      "examples/jazz-paper-scissors/src/routeTree.gen.ts",
+      "examples/server-worker-inbox/src/routeTree.gen.ts",
       "homepage/homepage/**",
       "**/package.json"
     ]

examples/chat-svelte/CHANGELOG.md

@@ -1,5 +1,102 @@
 # passkey-svelte
 
+## 0.0.111
+
+### Patch Changes
+
+- Updated dependencies [3cd1586]
+- Updated dependencies [33ebbf0]
+  - jazz-tools@0.16.5
+
+## 0.0.110
+
+### Patch Changes
+
+- Updated dependencies [16764f6]
+  - jazz-tools@0.16.4
+
+## 0.0.109
+
+### Patch Changes
+
+- Updated dependencies [43d3511]
+  - jazz-tools@0.16.3
+
+## 0.0.108
+
+### Patch Changes
+
+- jazz-tools@0.16.2
+
+## 0.0.107
+
+### Patch Changes
+
+- Updated dependencies [c62abef]
+  - jazz-tools@0.16.1
+
+## 0.0.106
+
+### Patch Changes
+
+- 2bbb07b: Introduce a cleaner separation between Zod and CoValue schemas:
+  - Zod schemas and CoValue schemas are fully separated. Zod schemas can only be composed with other Zod schemas. CoValue schemas can be composed with either Zod or other CoValue schemas.
+  - `z.optional()` and `z.discriminatedUnion()` no longer work with CoValue schemas. Use `co.optional()` and `co.discriminatedUnion()` instead.
+  - Internal schema access is now simpler. You no longer need to use Zod’s `.def` to access internals. Use properties like `CoMapSchema.shape`, `CoListSchema.element`, and `CoOptionalSchema.innerType` directly.
+  - CoValue schema types are now namespaced under `co.`. Non-namespaced exports have been removed
+  - CoMap schemas no longer incorrectly inherit from Zod. Previously, methods like `.extend()` and `.partial()` appeared available but could cause unexpected behavior. These methods are now disabled. In their place, `.optional()` has been added, and more Zod-like methods will be introduced in future releases.
+  - Upgraded Zod from `3.25.28` to `3.25.76`.
+  - Removed deprecated `withHelpers` method from CoValue schemas
+  - Removed deprecated `createCoValueObservable` function
+- Updated dependencies [c09dcdf]
+- Updated dependencies [2bbb07b]
+  - jazz-tools@0.16.0
+
+## 0.0.105
+
+### Patch Changes
+
+- Updated dependencies [9633d01]
+- Updated dependencies [4beafb7]
+  - jazz-tools@0.15.16
+
+## 0.0.104
+
+### Patch Changes
+
+- Updated dependencies [3fe53a3]
+  - jazz-tools@0.15.15
+
+## 0.0.103
+
+### Patch Changes
+
+- Updated dependencies [a584590]
+- Updated dependencies [9acccb5]
+  - jazz-tools@0.15.14
+
+## 0.0.102
+
+### Patch Changes
+
+- Updated dependencies [6c76ff8]
+  - jazz-tools@0.15.13
+
+## 0.0.101
+
+### Patch Changes
+
+- Updated dependencies [d1c1b0c]
+- Updated dependencies [cf4ad72]
+  - jazz-tools@0.15.12
+
+## 0.0.100
+
+### Patch Changes
+
+- Updated dependencies [bdc9aee]
+  - jazz-tools@0.15.11
+
 ## 0.0.99
 
 ### Patch Changes

examples/chat-svelte/package.json

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

examples/chat-svelte/src/lib/schema.ts

@@ -1,8 +1,8 @@
-import { co, z } from 'jazz-tools';
+import { co } from 'jazz-tools';
 
 export const Message = co.map({
   text: co.plainText(),
-  image: z.optional(co.image())
+  image: co.optional(co.image())
 });
 
 export const Chat = co.list(Message);

examples/chat/package.json

@@ -18,7 +18,7 @@
     "lucide-react": "^0.274.0",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "zod": "3.25.28"
+    "zod": "3.25.76"
   },
   "devDependencies": {
     "@playwright/test": "^1.50.1",

examples/chat/src/schema.ts

@@ -1,8 +1,8 @@
-import { co, z } from "jazz-tools";
+import { co } from "jazz-tools";
 
 export const Message = co.map({
   text: co.plainText(),
-  image: z.optional(co.image()),
+  image: co.optional(co.image()),
 });
 export type Message = co.loaded<typeof Message>;
 

examples/filestream/src/schema.ts

@@ -1,7 +1,7 @@
-import { co, z } from "jazz-tools";
+import { co } from "jazz-tools";
 
 export const JazzProfile = co.profile({
-  file: z.optional(co.fileStream()),
+  file: co.optional(co.fileStream()),
 });
 
 export const JazzAccount = co.account({

examples/form/src/CreateOrder.tsx

@@ -1,5 +1,4 @@
 import { useIframeHashRouter } from "hash-slash";
-import { Loaded } from "jazz-tools";
 import { useAccount, useCoState } from "jazz-tools/react";
 import { useState } from "react";
 import { Errors } from "./Errors.tsx";
@@ -9,7 +8,7 @@ import {
   BubbleTeaOrder,
   DraftBubbleTeaOrder,
   JazzAccount,
-  ListOfBubbleTeaAddOns,
+  validateDraftOrder,
 } from "./schema.ts";
 
 export function CreateOrder() {
@@ -21,20 +20,19 @@ export function CreateOrder() {
 
   if (!me?.root) return;
 
-  const onSave = (draft: Loaded<typeof DraftBubbleTeaOrder>) => {
-    // validate if the draft is a valid order
-    const validation = DraftBubbleTeaOrder.validate(draft);
+  const onSave = (draft: DraftBubbleTeaOrder) => {
+    const validation = validateDraftOrder(draft);
     setErrors(validation.errors);
     if (validation.errors.length > 0) {
       return;
     }
 
     // turn the draft into a real order
-    me.root.orders.push(draft as Loaded<typeof BubbleTeaOrder>);
+    me.root.orders.push(draft as BubbleTeaOrder);
 
     // reset the draft
     me.root.draft = DraftBubbleTeaOrder.create({
-      addOns: ListOfBubbleTeaAddOns.create([]),
+      addOns: [],
     });
 
     router.navigate("/");
@@ -60,7 +58,7 @@ function CreateOrderForm({
   onSave,
 }: {
   id: string;
-  onSave: (draft: Loaded<typeof DraftBubbleTeaOrder>) => void;
+  onSave: (draft: DraftBubbleTeaOrder) => void;
 }) {
   const draft = useCoState(DraftBubbleTeaOrder, id, {
     resolve: { addOns: true, instructions: true },

examples/form/src/DraftIndicator.tsx

@@ -1,11 +1,11 @@
 import { useAccount } from "jazz-tools/react";
-import { DraftBubbleTeaOrder, JazzAccount } from "./schema";
+import { JazzAccount, hasChanges } from "./schema";
 export function DraftIndicator() {
   const { me } = useAccount(JazzAccount, {
     resolve: { root: { draft: true } },
   });
 
-  if (DraftBubbleTeaOrder.hasChanges(me?.root.draft)) {
+  if (hasChanges(me?.root.draft)) {
     return (
       <div className="absolute -top-1 -right-1 bg-blue-500 border-2 border-white w-3 h-3 rounded-full dark:border-stone-925">
         <span className="sr-only">You have a draft</span>

examples/form/src/OrderForm.tsx

@@ -1,4 +1,4 @@
-import { CoPlainText, Loaded } from "jazz-tools";
+import { CoPlainText } from "jazz-tools";
 import {
   BubbleTeaAddOnTypes,
   BubbleTeaBaseTeaTypes,
@@ -10,7 +10,7 @@ export function OrderForm({
   order,
   onSave,
 }: {
-  order: Loaded<typeof BubbleTeaOrder> | Loaded<typeof DraftBubbleTeaOrder>;
+  order: BubbleTeaOrder | DraftBubbleTeaOrder;
   onSave?: (e: React.FormEvent<HTMLFormElement>) => void;
 }) {
   // Handles updates to the instructions field of the order.

examples/form/src/OrderThumbnail.tsx

@@ -1,10 +1,9 @@
-import { Loaded } from "jazz-tools";
 import { BubbleTeaOrder } from "./schema.ts";
 
 export function OrderThumbnail({
   order,
 }: {
-  order: Loaded<typeof BubbleTeaOrder>;
+  order: BubbleTeaOrder;
 }) {
   const { id, baseTea, addOns, instructions, deliveryDate, withMilk } = order;
   const date = deliveryDate.toLocaleDateString();

examples/form/src/schema.ts

@@ -1,4 +1,4 @@
-import { Loaded, co, z } from "jazz-tools";
+import { co, z } from "jazz-tools";
 
 export const BubbleTeaAddOnTypes = [
   "Pearl",
@@ -15,52 +15,46 @@ export const BubbleTeaBaseTeaTypes = [
   "Thai",
 ] as const;
 
-export const ListOfBubbleTeaAddOns = co
-  .list(z.literal([...BubbleTeaAddOnTypes]))
-  .withHelpers((Self) => ({
-    hasChanges(list?: Loaded<typeof Self> | null) {
-      return list && Object.entries(list._raw.insertions).length > 0;
-    },
-  }));
+export const ListOfBubbleTeaAddOns = co.list(
+  z.literal([...BubbleTeaAddOnTypes]),
+);
+export type ListOfBubbleTeaAddOns = co.loaded<typeof ListOfBubbleTeaAddOns>;
+
+function hasAddOnsChanges(list?: ListOfBubbleTeaAddOns | null) {
+  return list && Object.entries(list._raw.insertions).length > 0;
+}
 
 export const BubbleTeaOrder = co.map({
   baseTea: z.literal([...BubbleTeaBaseTeaTypes]),
   addOns: ListOfBubbleTeaAddOns,
   deliveryDate: z.date(),
   withMilk: z.boolean(),
-  instructions: z.optional(co.plainText()),
+  instructions: co.optional(co.plainText()),
 });
+export type BubbleTeaOrder = co.loaded<typeof BubbleTeaOrder>;
 
-export const DraftBubbleTeaOrder = co
-  .map({
-    baseTea: z.optional(z.literal([...BubbleTeaBaseTeaTypes])),
-    addOns: z.optional(ListOfBubbleTeaAddOns),
-    deliveryDate: z.optional(z.date()),
-    withMilk: z.optional(z.boolean()),
-    instructions: z.optional(co.plainText()),
-  })
-  .withHelpers((Self) => ({
-    hasChanges(order: Loaded<typeof Self> | undefined) {
-      return (
-        !!order &&
-        (Object.keys(order._edits).length > 1 ||
-          ListOfBubbleTeaAddOns.hasChanges(order.addOns))
-      );
-    },
+export const DraftBubbleTeaOrder = BubbleTeaOrder.partial();
+export type DraftBubbleTeaOrder = co.loaded<typeof DraftBubbleTeaOrder>;
 
-    validate(order: Loaded<typeof Self>) {
-      const errors: string[] = [];
+export function validateDraftOrder(order: DraftBubbleTeaOrder) {
+  const errors: string[] = [];
 
-      if (!order.baseTea) {
-        errors.push("Please select your preferred base tea.");
-      }
-      if (!order.deliveryDate) {
-        errors.push("Plese select a delivery date.");
-      }
+  if (!order.baseTea) {
+    errors.push("Please select your preferred base tea.");
+  }
+  if (!order.deliveryDate) {
+    errors.push("Plese select a delivery date.");
+  }
 
-      return { errors };
-    },
-  }));
+  return { errors };
+}
+
+export function hasChanges(order?: DraftBubbleTeaOrder | null) {
+  return (
+    !!order &&
+    (Object.keys(order._edits).length > 1 || hasAddOnsChanges(order.addOns))
+  );
+}
 
 /** The root is an app-specific per-user private `CoMap`
  *  where you can store top-level objects for that user */
@@ -76,15 +70,9 @@ export const JazzAccount = co
   })
   .withMigration((account) => {
     if (!account.root) {
-      const orders = co.list(BubbleTeaOrder).create([], account);
-      const draft = DraftBubbleTeaOrder.create(
-        {
-          addOns: ListOfBubbleTeaAddOns.create([], account),
-          instructions: co.plainText().create("", account),
-        },
+      account.root = AccountRoot.create(
+        { draft: { addOns: [], instructions: "" }, orders: [] },
         account,
       );
-
-      account.root = AccountRoot.create({ draft, orders }, account);
     }
   });

examples/image-upload/src/schema.ts

@@ -1,7 +1,7 @@
-import { co, z } from "jazz-tools";
+import { co } from "jazz-tools";
 
 export const JazzProfile = co.profile({
-  image: z.optional(co.image()),
+  image: co.optional(co.image()),
 });
 
 export const JazzAccount = co.account({

examples/inspector/tests/lib/schema.ts

@@ -11,9 +11,9 @@ export const Issue = co.map({
   status: z.enum(["open", "closed"]),
   labels: co.list(z.string()),
   reactions: ReactionsList,
-  file: z.optional(co.fileStream()),
-  image: z.optional(co.image()),
-  lead: z.optional(co.account()),
+  file: co.optional(co.fileStream()),
+  image: co.optional(co.image()),
+  lead: co.optional(co.account()),
 });
 
 export const Project = co.map({

examples/jazz-nextjs/src/apiKey.ts

@@ -0,0 +1 @@
+export const apiKey = "jazz-nextjs@garden.co";

examples/jazz-nextjs/src/jazz.tsx

@@ -1,12 +1,13 @@
 import { JazzInspector } from "jazz-tools/inspector";
 import { JazzReactProvider } from "jazz-tools/react";
+import { apiKey } from "./apiKey";
 
 export function Jazz({ children }: { children: React.ReactNode }) {
   return (
     <JazzReactProvider
       enableSSR
       sync={{
-        peer: `wss://cloud.jazz.tools/`,
+        peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
       }}
     >
       {children}

examples/multi-cursors/package.json

@@ -15,7 +15,7 @@
     "jazz-tools": "workspace:*",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "zod": "3.25.28"
+    "zod": "3.25.76"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
@@ -31,4 +31,4 @@
     "vite": "^6.3.5",
     "vitest": "3.1.1"
   }
-}
+}

examples/music-player/package.json

@@ -38,6 +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

@@ -66,7 +66,7 @@ export const MusicaAccountRoot = co.map({
   // track and playlist
   // You can also add the position in time if you want make it possible
   // to resume the song
-  activeTrack: z.optional(MusicTrack),
+  activeTrack: co.optional(MusicTrack),
   activePlaylist: Playlist,
 
   exampleDataLoaded: z.optional(z.boolean()),
@@ -84,15 +84,14 @@ export const MusicaAccount = co
      *  You can use it to set up the account root and any other initial CoValues you need.
      */
     if (account.root === undefined) {
-      const tracks = co.list(MusicTrack).create([]);
       const rootPlaylist = Playlist.create({
-        tracks,
+        tracks: [],
         title: "",
       });
 
       account.root = MusicaAccountRoot.create({
         rootPlaylist,
-        playlists: co.list(Playlist).create([]),
+        playlists: [],
         activeTrack: undefined,
         activePlaylist: rootPlaylist,
         exampleDataLoaded: false,

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

@@ -11,6 +11,7 @@ import { uploadMusicTracks } from "./4_actions";
 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 { SidePanel } from "./components/SidePanel";
 import { Button } from "./components/ui/button";
@@ -42,7 +43,11 @@ export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
   const playlistId = params.playlistId ?? me?.root._refs.rootPlaylist.id;
 
   const playlist = useCoState(Playlist, playlistId, {
-    resolve: { tracks: true },
+    resolve: {
+      tracks: {
+        $each: true,
+      },
+    },
   });
 
   const isRootPlaylist = !params.playlistId;
@@ -66,8 +71,8 @@ export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
   return (
     <SidebarInset className="flex flex-col h-screen text-gray-800 bg-blue-50">
       <div className="flex flex-1 overflow-hidden">
-        <SidePanel mediaPlayer={mediaPlayer} />
-        <main className="flex-1 p-6 overflow-y-auto overflow-x-hidden">
+        <SidePanel />
+        <main className="flex-1 p-6 overflow-y-auto overflow-x-hidden relative">
           <SidebarTrigger />
           <div className="flex items-center justify-between mb-6">
             {isRootPlaylist ? (
@@ -106,12 +111,12 @@ export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
                     onClick={() => {
                       mediaPlayer.setActiveTrack(track, playlist);
                     }}
-                    showAddToPlaylist={isRootPlaylist}
                   />
                 ),
             )}
           </ul>
         </main>
+        <PlayerControls mediaPlayer={mediaPlayer} />
       </div>
     </SidebarInset>
   );

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

@@ -1,11 +1,6 @@
 import { getAudioFileData } from "@/lib/audio/getAudioFileData";
-import { FileStream, Group, co } from "jazz-tools";
-import {
-  MusicTrack,
-  MusicTrackWaveform,
-  MusicaAccount,
-  Playlist,
-} from "./1_schema";
+import { FileStream, Group } from "jazz-tools";
+import { MusicTrack, MusicaAccount, Playlist } from "./1_schema";
 
 /**
  * Walkthrough: Actions
@@ -51,7 +46,7 @@ export async function uploadMusicTracks(
       {
         file: fileStream,
         duration: data.duration,
-        waveform: MusicTrackWaveform.create({ data: data.waveform }, group),
+        waveform: { data: data.waveform },
         title: file.name,
         isExampleTrack,
       },
@@ -73,18 +68,10 @@ export async function createNewPlaylist() {
     },
   });
 
-  // Since playlists are meant to be shared we associate them
-  // to a group which will contain the keys required to get
-  // access to the "owned" values
-  const playlistGroup = Group.create();
-
-  const playlist = Playlist.create(
-    {
-      title: "New Playlist",
-      tracks: co.list(MusicTrack).create([], playlistGroup),
-    },
-    playlistGroup,
-  );
+  const playlist = Playlist.create({
+    title: "New Playlist",
+    tracks: [],
+  });
 
   // Again, we associate the new playlist to the
   // user by pushing it into the playlists CoList
@@ -129,7 +116,7 @@ export async function removeTrackFromPlaylist(
 
   if (track._owner._type === "Group" && playlist._owner._type === "Group") {
     const trackGroup = track._owner;
-    await trackGroup.removeMember(playlist._owner);
+    trackGroup.removeMember(playlist._owner);
 
     const index =
       playlist.tracks?.findIndex(

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

@@ -0,0 +1,59 @@
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+interface ConfirmDialogProps {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description: string;
+  confirmText?: string;
+  cancelText?: string;
+  onConfirm: () => void;
+  variant?: "default" | "destructive";
+}
+
+export function ConfirmDialog({
+  isOpen,
+  onOpenChange,
+  title,
+  description,
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  onConfirm,
+  variant = "destructive",
+}: ConfirmDialogProps) {
+  function handleConfirm() {
+    onConfirm();
+    onOpenChange(false);
+  }
+
+  function handleCancel() {
+    onOpenChange(false);
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" onClick={handleCancel}>
+            {cancelText}
+          </Button>
+          <Button variant={variant} onClick={handleConfirm}>
+            {confirmText}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -10,27 +10,34 @@ import { cn } from "@/lib/utils";
 import { Loaded } from "jazz-tools";
 import { useAccount, useCoState } from "jazz-tools/react";
 import { MoreHorizontal } from "lucide-react";
-import { Fragment } from "react/jsx-runtime";
-import { MusicTrackTitleInput } from "./MusicTrackTitleInput";
+import { Fragment, useCallback, useState } from "react";
+import { EditTrackDialog } from "./RenameTrackDialog";
 import { Button } from "./ui/button";
 
+function isPartOfThePlaylist(
+  trackId: string,
+  playlist: Loaded<typeof Playlist, { tracks: true }>,
+) {
+  return Array.from(playlist.tracks._refs).some((t) => t.id === trackId);
+}
+
 export function MusicTrackRow({
   trackId,
   isLoading,
   isPlaying,
   onClick,
-  showAddToPlaylist,
 }: {
   trackId: string;
   isLoading: boolean;
   isPlaying: boolean;
   onClick: (track: Loaded<typeof MusicTrack>) => void;
-  showAddToPlaylist: boolean;
 }) {
   const track = useCoState(MusicTrack, trackId);
+  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
   const { me } = useAccount(MusicaAccount, {
-    resolve: { root: { playlists: { $each: true } } },
+    resolve: { root: { playlists: { $each: { tracks: true } } } },
   });
 
   const playlists = me?.root.playlists ?? [];
@@ -60,10 +67,18 @@ export function MusicTrackRow({
     }
   }
 
+  function handleEdit() {
+    setIsEditDialogOpen(true);
+  }
+
+  const handleContextMenu = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    setIsDropdownOpen(true);
+  }, []);
+
   return (
     <li
       className={"flex gap-1 hover:bg-slate-200 group py-2 px-2 cursor-pointer"}
-      onClick={handleTrackClick}
     >
       <button
         className={cn(
@@ -81,50 +96,57 @@ export function MusicTrackRow({
           "▶️"
         )}
       </button>
-      <MusicTrackTitleInput trackId={trackId} />
+      <button
+        onContextMenu={handleContextMenu}
+        onClick={handleTrackClick}
+        className="w-full flex items-center overflow-hidden text-ellipsis whitespace-nowrap"
+      >
+        {track?.title}
+      </button>
       <div onClick={(evt) => evt.stopPropagation()}>
-        {showAddToPlaylist && (
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                variant="ghost"
-                className="h-8 w-8 p-0"
-                aria-label={`Open ${track?.title} menu`}
-              >
-                <span className="sr-only">Open menu</span>
-                <MoreHorizontal className="h-4 w-4" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem
-                key={`delete`}
-                onSelect={async () => {
-                  if (!track) return;
-                  deleteTrack();
-                }}
-              >
-                Delete
-              </DropdownMenuItem>
-              {playlists.map((playlist, index) => (
-                <Fragment key={index}>
-                  <DropdownMenuItem
-                    key={`add-${index}`}
-                    onSelect={() => handleAddToPlaylist(playlist)}
-                  >
-                    Add to {playlist.title}
-                  </DropdownMenuItem>
+        <DropdownMenu open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              className="h-8 w-8 p-0"
+              aria-label={`Open ${track?.title} menu`}
+            >
+              <span className="sr-only">Open menu</span>
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onSelect={handleEdit}>Edit</DropdownMenuItem>
+            {playlists.map((playlist, index) => (
+              <Fragment key={index}>
+                {isPartOfThePlaylist(trackId, playlist) ? (
                   <DropdownMenuItem
                     key={`remove-${index}`}
                     onSelect={() => handleRemoveFromPlaylist(playlist)}
                   >
                     Remove from {playlist.title}
                   </DropdownMenuItem>
-                </Fragment>
-              ))}
-            </DropdownMenuContent>
-          </DropdownMenu>
-        )}
+                ) : (
+                  <DropdownMenuItem
+                    key={`add-${index}`}
+                    onSelect={() => handleAddToPlaylist(playlist)}
+                  >
+                    Add to {playlist.title}
+                  </DropdownMenuItem>
+                )}
+              </Fragment>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
       </div>
+      {track && isEditDialogOpen && (
+        <EditTrackDialog
+          track={track}
+          isOpen={isEditDialogOpen}
+          onOpenChange={setIsEditDialogOpen}
+          onDelete={deleteTrack}
+        />
+      )}
     </li>
   );
 }

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

@@ -24,25 +24,25 @@ export function PlayerControls({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
   const activeTrackTitle = activeTrack.title;
 
   return (
-    <footer className="flex items-center justify-between p-4 gap-4 bg-white border-t border-gray-200 fixed bottom-0 left-0 right-0 w-full">
-      <div className="flex justify-center items-center space-x-2">
-        <div className="flex items-center space-x-4">
+    <footer className="flex items-center justify-between p-2 sm:p-4 gap-2 sm:gap-4 bg-white border-t border-gray-200 absolute bottom-0 left-0 right-0 w-full z-50">
+      <div className="flex justify-center items-center space-x-1 sm:space-x-2 flex-shrink-0">
+        <div className="flex items-center space-x-2 sm:space-x-4">
           <button
             onClick={mediaPlayer.playPrevTrack}
             className="text-blue-600 hover:text-blue-800"
             aria-label="Previous track"
           >
-            <SkipBack size={20} />
+            <SkipBack size={16} className="sm:w-5 sm:h-5" />
           </button>
           <button
             onClick={playState.toggle}
-            className="w-[42px] h-[42px] flex items-center justify-center bg-blue-600 rounded-full text-white hover:bg-blue-700"
+            className="w-8 h-8 sm:w-[42px] sm:h-[42px] flex items-center justify-center bg-blue-600 rounded-full text-white hover:bg-blue-700"
             aria-label={isPlaying ? "Pause active track" : "Play active track"}
           >
             {isPlaying ? (
-              <Pause size={24} fill="currentColor" />
+              <Pause size={16} className="sm:w-6 sm:h-6" fill="currentColor" />
             ) : (
-              <Play size={24} fill="currentColor" />
+              <Play size={16} className="sm:w-6 sm:h-6" fill="currentColor" />
             )}
           </button>
           <button
@@ -50,16 +50,22 @@ export function PlayerControls({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
             className="text-blue-600 hover:text-blue-800"
             aria-label="Next track"
           >
-            <SkipForward size={20} />
+            <SkipForward size={16} className="sm:w-5 sm:h-5" />
           </button>
         </div>
       </div>
-      <div className=" sm:hidden md:flex flex-col flex-shrink-1 items-center w-[75%]">
-        <Waveform track={activeTrack} height={30} />
+      <div className="md:hidden sm:hidden  lg:flex flex-1 justify-center items-center min-w-0 px-2">
+        <Waveform
+          track={activeTrack}
+          height={30}
+          className="h-5 sm:h-6 md:h-8 lg:h-10"
+        />
       </div>
-      <div className="flex flex-col items-end  gap-1 text-right min-w-fit w-[25%]">
-        <h4 className="font-medium text-blue-800">{activeTrackTitle}</h4>
-        <p className="text-sm text-gray-600">
+      <div className="flex flex-col items-end gap-1 text-right min-w-fit flex-shrink-0">
+        <h4 className="font-medium text-blue-800 text-sm sm:text-base truncate max-w-32 sm:max-w-80">
+          {activeTrackTitle}
+        </h4>
+        <p className="text-xs sm:text-sm text-gray-600 truncate max-w-32 sm:max-w-80">
           {activePlaylist?.title || "All tracks"}
         </p>
       </div>

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

@@ -0,0 +1,108 @@
+import { MusicTrack } from "@/1_schema";
+import { updateMusicTrackTitle } from "@/4_actions";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Loaded } from "jazz-tools";
+import { useState } from "react";
+import { ConfirmDialog } from "./ConfirmDialog";
+
+interface EditTrackDialogProps {
+  track: Loaded<typeof MusicTrack>;
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  onDelete: () => void;
+}
+
+export function EditTrackDialog({
+  track,
+  isOpen,
+  onOpenChange,
+  onDelete,
+}: EditTrackDialogProps) {
+  const [newTitle, setNewTitle] = useState(track.title);
+  const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] = useState(false);
+
+  function handleSave() {
+    if (track && newTitle.trim()) {
+      updateMusicTrackTitle(track, newTitle.trim());
+      onOpenChange(false);
+    }
+  }
+
+  function handleCancel() {
+    setNewTitle(track?.title || "");
+    onOpenChange(false);
+  }
+
+  function handleDeleteClick() {
+    setIsDeleteConfirmOpen(true);
+  }
+
+  function handleDeleteConfirm() {
+    onDelete();
+    onOpenChange(false);
+  }
+
+  function handleKeyDown(event: React.KeyboardEvent) {
+    if (event.key === "Enter") {
+      handleSave();
+    } else if (event.key === "Escape") {
+      handleCancel();
+    }
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit Track</DialogTitle>
+          <DialogDescription>Edit "{track?.title}".</DialogDescription>
+        </DialogHeader>
+        <form className="py-4" onSubmit={handleSave}>
+          <Input
+            value={newTitle}
+            onChange={(e) => setNewTitle(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Enter track name..."
+            autoFocus
+          />
+        </form>
+        <DialogFooter className="flex justify-between">
+          <Button
+            variant="destructive"
+            onClick={handleDeleteClick}
+            className="mr-auto"
+          >
+            Delete Track
+          </Button>
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={handleCancel}>
+              Cancel
+            </Button>
+            <Button onClick={handleSave} disabled={!newTitle.trim()}>
+              Save
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+      <ConfirmDialog
+        isOpen={isDeleteConfirmOpen}
+        onOpenChange={setIsDeleteConfirmOpen}
+        title="Delete Track"
+        description={`Are you sure you want to delete "${track.title}"? This action cannot be undone.`}
+        confirmText="Delete"
+        cancelText="Cancel"
+        onConfirm={handleDeleteConfirm}
+        variant="destructive"
+      />
+    </Dialog>
+  );
+}

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

@@ -1,10 +1,8 @@
-import { MusicTrack, MusicaAccount } from "@/1_schema";
+import { MusicaAccount } from "@/1_schema";
 import { createNewPlaylist, deletePlaylist } from "@/4_actions";
-import { MediaPlayer } from "@/5_useMediaPlayer";
 import {
   Sidebar,
   SidebarContent,
-  SidebarFooter,
   SidebarGroup,
   SidebarGroupContent,
   SidebarGroupLabel,
@@ -14,22 +12,18 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
 } from "@/components/ui/sidebar";
-import { usePlayState } from "@/lib/audio/usePlayState";
-import { useAccount, useCoState } from "jazz-tools/react";
-import { Home, Music, Pause, Play, Plus, Trash2 } from "lucide-react";
+import { useAccount } from "jazz-tools/react";
+import { Home, Music, Plus, Trash2 } from "lucide-react";
 import { useNavigate, useParams } from "react-router";
 import { AuthButton } from "./AuthButton";
 
-export function SidePanel({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
+export function SidePanel() {
   const { playlistId } = useParams();
   const navigate = useNavigate();
   const { me } = useAccount(MusicaAccount, {
     resolve: { root: { playlists: { $each: true } } },
   });
 
-  const playState = usePlayState();
-  const isPlaying = playState.value === "play";
-
   function handleAllTracksClick() {
     navigate(`/`);
   }
@@ -50,12 +44,6 @@ export function SidePanel({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
     navigate(`/playlist/${playlist.id}`);
   }
 
-  const activeTrack = useCoState(MusicTrack, mediaPlayer.activeTrackId, {
-    resolve: { waveform: true },
-  });
-
-  const activeTrackTitle = activeTrack?.title;
-
   return (
     <Sidebar>
       <SidebarHeader>
@@ -137,29 +125,6 @@ export function SidePanel({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
           </SidebarGroupContent>
         </SidebarGroup>
       </SidebarContent>
-      {activeTrack && (
-        <SidebarFooter>
-          <SidebarMenu>
-            <SidebarMenuItem className="flex justify-end">
-              <SidebarMenuButton
-                onClick={playState.toggle}
-                aria-label={
-                  isPlaying ? "Pause active track" : "Play active track"
-                }
-              >
-                <div className="w-[28px] h-[28px] flex items-center justify-center bg-blue-600 rounded-full text-white hover:bg-blue-700">
-                  {isPlaying ? (
-                    <Pause size={16} fill="currentColor" />
-                  ) : (
-                    <Play size={16} fill="currentColor" />
-                  )}
-                </div>
-                <span>{activeTrackTitle}</span>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          </SidebarMenu>
-        </SidebarFooter>
-      )}
     </Sidebar>
   );
 }

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

@@ -7,6 +7,7 @@ import { useCoState } from "jazz-tools/react";
 export function Waveform(props: {
   track: Loaded<typeof MusicTrack>;
   height: number;
+  className?: string;
 }) {
   const { track, height } = props;
   const waveformData = useCoState(
@@ -36,7 +37,7 @@ export function Waveform(props: {
 
   return (
     <div
-      className="flex justify-center items-end w-full"
+      className={cn("flex justify-center items-end w-full", props.className)}
       style={{
         height,
         gap: 1,

examples/music-player/src/index.css

@@ -2,6 +2,12 @@
 
 @custom-variant dark (&:is(.dark *));
 
+html {
+  overflow: hidden;
+  max-width: 1200px;
+  position: relative;
+}
+
 :root {
   --background: hsl(0 0% 100%);
   --foreground: hsl(20 14.3% 4.1%);

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

@@ -55,10 +55,20 @@ export class HomePage {
 
   async editTrackTitle(trackTitle: string, newTitle: string) {
     await this.page
-      .getByRole("textbox", {
-        name: `Edit track title: ${trackTitle}`,
+      .getByRole("button", {
+        name: `Open ${trackTitle} menu`,
       })
-      .fill(newTitle);
+      .click();
+
+    await this.page
+      .getByRole("menuitem", {
+        name: `Edit`,
+      })
+      .click();
+
+    await this.page.getByPlaceholder("Enter track name...").fill(newTitle);
+
+    await this.page.getByRole("button", { name: "Save" }).click();
   }
 
   async createPlaylist() {

examples/music-player/vite.config.ts

@@ -1,10 +1,21 @@
 import path from "path";
 import react from "@vitejs/plugin-react-swc";
 import { defineConfig } from "vite";
+import { VitePWA } from "vite-plugin-pwa";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: "autoUpdate",
+      strategies: "generateSW",
+      workbox: {
+        globPatterns: ["**/*.{js,css,html,ico,png,svg}"],
+        maximumFileSizeToCacheInBytes: 1024 * 1024 * 5,
+      },
+    }),
+  ],
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),

examples/organization/src/components/CreateOrganization.tsx

@@ -7,6 +7,7 @@ import {
   JazzAccount,
   Organization,
   Project,
+  validateDraftOrganization,
 } from "../schema.ts";
 import { Errors } from "./Errors.tsx";
 import { OrganizationForm } from "./OrganizationForm.tsx";
@@ -21,8 +22,7 @@ export function CreateOrganization() {
   if (!me?.root?.organizations) return;
 
   const onSave = (draft: Loaded<typeof DraftOrganization>) => {
-    // validate if the draft is a valid organization
-    const validation = DraftOrganization.validate(draft);
+    const validation = validateDraftOrganization(draft);
     setErrors(validation.errors);
     if (validation.errors.length > 0) {
       return;

examples/organization/src/schema.ts

@@ -10,24 +10,24 @@ export const Organization = co.map({
   projects: co.list(Project),
 });
 
-export const DraftOrganization = co
-  .map({
-    name: z.optional(z.string()),
-    projects: co.list(Project),
-  })
-  .withHelpers((Self) => ({
-    validate(org: Loaded<typeof Self>) {
-      const errors: string[] = [];
+export const DraftOrganization = co.map({
+  name: z.optional(z.string()),
+  projects: co.list(Project),
+});
 
-      if (!org.name) {
-        errors.push("Please enter a name.");
-      }
+export function validateDraftOrganization(
+  org: Loaded<typeof DraftOrganization>,
+) {
+  const errors: string[] = [];
 
-      return {
-        errors,
-      };
-    },
-  }));
+  if (!org.name) {
+    errors.push("Please enter a name.");
+  }
+
+  return {
+    errors,
+  };
+}
 
 export const JazzAccountRoot = co.map({
   organizations: co.list(Organization),

examples/server-worker-http/.gitignore

@@ -0,0 +1,47 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# env files
+.env
+.env.*
+!.env.example
+!.env.test

examples/server-worker-http/README.md

@@ -0,0 +1,105 @@
+# Rock Paper Scissors with Jazz HTTP API
+
+This example demonstrates how to use the **Jazz HTTP API** with **Next.js** to implement updates in a trusted environment. The application implements a multiplayer Rock Paper Scissors game where the server validates game actions and reveals player intentions only after both players have made their moves.
+
+## 🎯 Key Concepts Demonstrated
+
+### Trusted Environment Updates
+- **Server-side validation**: All game actions are validated by the server before being applied
+- **Secure reveal mechanism**: Player choices are hidden until both players have acted, built with Jazz group permissions
+
+## 🚀 Getting Started
+
+### Prerequisites
+- Node.js 20+ 
+- pnpm (recommended) or npm
+
+### Installation
+
+1. **Install dependencies**:
+   ```bash
+   pnpm install
+   ```
+
+2. **Generate environment variables**:
+   ```bash
+   pnpm generate-env
+   ```
+
+3. **Start the development server**:
+   ```bash
+   pnpm dev
+   ```
+
+4. **Open your browser** to [http://localhost:3000](http://localhost:3000)
+
+### Environment Setup
+
+The `generate-env.ts` script creates the necessary environment variables for Jazz:
+- `NEXT_PUBLIC_JAZZ_WORKER_ACCOUNT`: Server worker account ID
+- `JAZZ_WORKER_SECRET`: Server worker secret key
+
+## 🔧 Key Implementation Details
+
+### Server API Definition
+```typescript
+const playRequest = experimental_defineRequest({
+  url: "/api/play",
+  workerId,
+  request: {
+    schema: {
+      game: Game,
+      selection: z.literal(["rock", "paper", "scissors"]),
+    },
+    resolve: {
+      game: {
+        player1: { account: true, playSelection: { group: true } },
+        player2: { account: true, playSelection: { group: true } },
+      },
+    },
+  },
+  response: {
+    schema: { game: Game },
+    resolve: { game: true },
+  },
+});
+```
+
+### Secure Move Handling
+```typescript
+// Create restricted group for the move
+const group = Group.create({ owner: jazzServerAccount.worker });
+group.addMember(madeBy, "reader");
+
+// Store move with restricted access
+const playSelection = PlaySelection.create(
+  { value: selection, group },
+  group,
+);
+
+// Reveal moves only after both players have acted
+if (player1PlaySelection && player2PlaySelection) {
+  player1PlaySelection.group.addMember(game.player2.account, "reader");
+  player2PlaySelection.group.addMember(game.player1.account, "reader");
+}
+```
+
+## 🎯 Use Cases
+
+This pattern is ideal for applications requiring:
+
+- **Fair play guarantees**: Preventing cheating in games
+- **Simultaneous reveals**: Auctions, voting, or sealed-bid systems
+- **Trusted computation**: Server-side validation of complex business logic
+- **Real-time collaboration**: Multi-user applications with strict rules
+
+## 📚 Learn More
+
+- [Jazz Documentation](https://jazz.tools/docs)
+- [Next.js App Router](https://nextjs.org/docs/app)
+- [Groups & Permissions](https://jazz.tools/docs/react/groups/intro)
+- [HTTP API with experimental_defineRequest](https://jazz.tools/docs/react/server-side/http-requests)
+
+## 🤝 Contributing
+
+This example is part of the Jazz framework. Feel free to submit issues and enhancement requests!

examples/server-worker-http/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

examples/server-worker-http/generate-env.ts

@@ -0,0 +1,26 @@
+import * as fs from "fs";
+import { createWorkerAccount } from "jazz-run/createWorkerAccount";
+
+if (fs.existsSync(".env")) {
+  process.exit(0);
+}
+
+async function main() {
+  const account = await createWorkerAccount({
+    name: "jazz-paper-scissors-worker",
+    peer: "wss://cloud.jazz.tools/?key=jazz-paper-scissors@garden.co",
+  });
+
+  fs.writeFileSync(
+    ".env",
+    `
+JAZZ_WORKER_ACCOUNT=${account.accountID}
+NEXT_PUBLIC_JAZZ_WORKER_ACCOUNT=${account.accountID}
+JAZZ_WORKER_SECRET=${account.agentSecret}
+`,
+  );
+
+  process.exit(0);
+}
+
+main();

examples/server-worker-http/next.config.ts

@@ -0,0 +1,5 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {};
+
+export default nextConfig;

examples/server-worker-http/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "server-worker-http",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "generate-env": "tsx generate-env.ts",
+    "build": "pnpm generate-env && next build",
+    "start": "next start",
+    "lint": "next lint",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.2.3",
+    "@tailwindcss/postcss": "^4.1.11",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "jazz-tools": "workspace:*",
+    "lucide-react": "^0.525.0",
+    "next": "15.3.2",
+    "next-themes": "^0.4.6",
+    "postcss": "^8.5.6",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "sonner": "^2.0.3",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4.1.11"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.50.1",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "jazz-run": "workspace:*",
+    "tsx": "^4.19.3",
+    "tw-animate-css": "^1.2.5",
+    "typescript": "^5"
+  }
+}

examples/server-worker-http/playwright.config.ts

@@ -0,0 +1,55 @@
+import { defineConfig, devices } from "@playwright/test";
+import isCI from "is-ci";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./tests",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: isCI,
+  /* Retry on CI only */
+  retries: isCI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: isCI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+
+  timeout: 20_000,
+
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: "http://localhost:3000/",
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+    permissions: ["clipboard-read", "clipboard-write"],
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: [
+    {
+      command: "pnpm start",
+      url: "http://localhost:3000/",
+      reuseExistingServer: !isCI,
+    },
+  ],
+});

examples/server-worker-http/postcss.config.mjs

@@ -0,0 +1,2 @@
+const config = { plugins: { "@tailwindcss/postcss": {} } };
+export default config;

examples/server-worker-http/src/apiKey.ts

@@ -0,0 +1 @@
+export const apiKey = "server-side-validation@garden.co";

examples/server-worker-http/src/app/api/create-game/route.ts

@@ -0,0 +1,23 @@
+import { jazzServerAccount } from "@/jazzServerAccount";
+import { WaitingRoom } from "@/schema";
+import { serverApi } from "@/serverApi";
+import { Group } from "jazz-tools";
+
+export async function POST(request: Request) {
+  const response = await serverApi.createGame.handle(
+    request,
+    jazzServerAccount.worker,
+    async (_, madeBy) => {
+      const waitingRoom = WaitingRoom.create(
+        { creator: madeBy },
+        Group.create(jazzServerAccount.worker).makePublic(),
+      );
+
+      return {
+        waitingRoom,
+      };
+    },
+  );
+
+  return response;
+}

examples/server-worker-http/src/app/api/join-game/route.ts

@@ -0,0 +1,49 @@
+import { jazzServerAccount } from "@/jazzServerAccount";
+import { Game, createGameState } from "@/schema";
+import { serverApi } from "@/serverApi";
+import { Account, Group, JazzRequestError } from "jazz-tools";
+
+export async function POST(request: Request) {
+  return serverApi.joinGame.handle(
+    request,
+    jazzServerAccount.worker,
+    async ({ waitingRoom }, madeBy) => {
+      if (madeBy.id === waitingRoom.creator.id) {
+        throw new JazzRequestError("You can't join your own waiting room", 400);
+      }
+
+      waitingRoom.game = createGame({
+        account1: waitingRoom.creator,
+        account2: madeBy,
+        worker: jazzServerAccount.worker,
+      });
+
+      return {
+        waitingRoom,
+      };
+    },
+  );
+}
+
+interface CreateGameParams {
+  account1: Account;
+  account2: Account;
+  worker: Account;
+}
+
+function createGame({ account1, account2, worker }: CreateGameParams) {
+  const gameGroup = Group.create({ owner: worker });
+  gameGroup.addMember(account1, "reader");
+  gameGroup.addMember(account2, "reader");
+
+  const game = Game.create(
+    {
+      ...createGameState({ account1, account2, worker }),
+      player1Score: 0,
+      player2Score: 0,
+    },
+    gameGroup,
+  );
+
+  return game;
+}

examples/server-worker-http/src/app/api/new-game/route.ts

@@ -0,0 +1,35 @@
+import { jazzServerAccount } from "@/jazzServerAccount";
+import { createGameState } from "@/schema";
+import { serverApi } from "@/serverApi";
+import { JazzRequestError } from "jazz-tools";
+
+export async function POST(request: Request) {
+  const response = await serverApi.newGame.handle(
+    request,
+    jazzServerAccount.worker,
+    async ({ game }, madeBy) => {
+      const isPlayer1 = game.player1.account.id === madeBy.id;
+      const isPlayer2 = game.player2.account.id === madeBy.id;
+
+      if (!isPlayer1 && !isPlayer2) {
+        throw new JazzRequestError("You are not a player in this game", 400);
+      }
+
+      if (game.outcome) {
+        game.applyDiff(
+          createGameState({
+            account1: game.player1.account,
+            account2: game.player2.account,
+            worker: jazzServerAccount.worker,
+          }),
+        );
+      }
+
+      return {
+        game,
+      };
+    },
+  );
+
+  return response;
+}

examples/server-worker-http/src/app/api/play/route.ts

@@ -0,0 +1,89 @@
+import { jazzServerAccount } from "@/jazzServerAccount";
+import { PlaySelection } from "@/schema";
+import { serverApi } from "@/serverApi";
+import { Group, JazzRequestError } from "jazz-tools";
+
+export async function POST(request: Request) {
+  const response = await serverApi.play.handle(
+    request,
+    jazzServerAccount.worker,
+    async ({ game, selection }, madeBy) => {
+      const isPlayer1 = game.player1.account.id === madeBy.id;
+      const isPlayer2 = game.player2.account.id === madeBy.id;
+
+      if (!isPlayer1 && !isPlayer2) {
+        throw new JazzRequestError("You are not a player in this game", 400);
+      }
+
+      const group = Group.create({ owner: jazzServerAccount.worker });
+      group.addMember(madeBy, "reader");
+
+      if (isPlayer1 && game.player1.playSelection) {
+        throw new JazzRequestError("You have already played", 400);
+      } else if (isPlayer2 && game.player2.playSelection) {
+        throw new JazzRequestError("You have already played", 400);
+      }
+
+      const playSelection = PlaySelection.create(
+        { value: selection, group },
+        group,
+      );
+
+      if (isPlayer1) {
+        game.player1.playSelection = playSelection;
+      } else {
+        game.player2.playSelection = playSelection;
+      }
+
+      if (game.player1.playSelection && game.player2.playSelection) {
+        game.outcome = determineOutcome(
+          game.player1.playSelection.value,
+          game.player2.playSelection.value,
+        );
+
+        // Reveal the play selections to the other player
+        game.player1.playSelection.group.addMember(
+          game.player2.account,
+          "reader",
+        );
+        game.player2.playSelection.group.addMember(
+          game.player1.account,
+          "reader",
+        );
+
+        if (game.outcome === "player1") {
+          game.player1Score++;
+        } else if (game.outcome === "player2") {
+          game.player2Score++;
+        }
+      }
+
+      return {
+        game,
+        result: "success",
+      };
+    },
+  );
+
+  return response;
+}
+
+/**
+ * Given a player selections, returns the winner of the current game.
+ */
+function determineOutcome(
+  player1Choice: "rock" | "paper" | "scissors",
+  player2Choice: "rock" | "paper" | "scissors",
+) {
+  if (player1Choice === player2Choice) {
+    return "draw";
+  } else if (
+    (player1Choice === "rock" && player2Choice === "scissors") ||
+    (player1Choice === "paper" && player2Choice === "rock") ||
+    (player1Choice === "scissors" && player2Choice === "paper")
+  ) {
+    return "player1";
+  } else {
+    return "player2";
+  }
+}

examples/server-worker-http/src/app/game/[id]/page.tsx

@@ -0,0 +1,388 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Game, PlaySelection, PlayerState } from "@/schema";
+import { serverApi } from "@/serverApi";
+import { Group, isJazzRequestError } from "jazz-tools";
+import { useAccount, useCoState } from "jazz-tools/react";
+import {
+  CheckCircle,
+  Clock,
+  Gamepad2,
+  Minus,
+  Sparkles,
+  Trophy,
+  Users,
+  XCircle,
+} from "lucide-react";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import { toast } from "sonner";
+
+const playIcon = (
+  selection: "rock" | "paper" | "scissors" | undefined,
+  size: "sm" | "lg" = "sm",
+) => {
+  const emojiSize = size === "lg" ? "text-4xl" : "text-2xl";
+
+  switch (selection) {
+    case "rock":
+      return (
+        <div className="flex items-center gap-2">
+          <span className={`${emojiSize} `} style={{ animationDelay: "0ms" }}>
+            🪨
+          </span>
+          <span className="font-semibold">Rock</span>
+        </div>
+      );
+    case "paper":
+      return (
+        <div className="flex items-center gap-2">
+          <span className={`${emojiSize} `} style={{ animationDelay: "150ms" }}>
+            📄
+          </span>
+          <span className="font-semibold">Paper</span>
+        </div>
+      );
+    case "scissors":
+      return (
+        <div className="flex items-center gap-2">
+          <span className={`${emojiSize} `} style={{ animationDelay: "300ms" }}>
+            ✂️
+          </span>
+          <span className="font-semibold">Scissors</span>
+        </div>
+      );
+    default:
+      return (
+        <div className="flex items-center gap-2 text-muted-foreground">
+          <Clock className={size === "lg" ? "w-8 h-8" : "w-6 h-6"} />
+          <span>Waiting for selection</span>
+        </div>
+      );
+  }
+};
+
+const getOutcomeIcon = (outcome: string | undefined, player: string) => {
+  if (outcome === player) {
+    return <Trophy className="w-6 h-6 text-yellow-500" />;
+  } else if (outcome === "draw") {
+    return <Minus className="w-6 h-6 text-blue-500" />;
+  } else {
+    return <XCircle className="w-6 h-6 text-red-500" />;
+  }
+};
+
+export default function RouteComponent() {
+  const params = useParams<{ id: string }>();
+  const game = useCoState(Game, params.id, {
+    resolve: {
+      player1State: {
+        $onError: null,
+      },
+      player2State: {
+        $onError: null,
+      },
+      player1: {
+        account: true,
+        playSelection: {
+          $onError: null,
+        },
+      },
+      player2: {
+        account: true,
+        playSelection: {
+          $onError: null,
+        },
+      },
+    },
+  });
+
+  const isPlayer1 = game?.player1?.account?.isMe;
+  const player = isPlayer1 ? "player1" : "player2";
+
+  if (!game) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 flex items-center justify-center">
+        <div className="animate-pulse">
+          <Gamepad2 className="w-12 h-12 text-muted-foreground" />
+        </div>
+      </div>
+    );
+  }
+
+  const gameComplete = game.outcome !== undefined;
+
+  const opponent = isPlayer1 ? "player2" : "player1";
+
+  const currentPlayer = game[player];
+  const opponentPlayer = game[opponent];
+
+  const currentPlayerState = game[isPlayer1 ? "player1State" : "player2State"];
+
+  const opponentSelection = opponentPlayer?.playSelection;
+  const opponentHasSelected = Boolean(opponentPlayer._refs.playSelection);
+
+  const handleSelection = (selection: "rock" | "paper" | "scissors") => {
+    if (!currentPlayerState) return;
+    if (currentPlayerState.submitted) return;
+
+    currentPlayerState.currentSelection = selection;
+  };
+
+  const handleSubmit = async (
+    playSelection: "rock" | "paper" | "scissors" | undefined,
+  ) => {
+    if (!playSelection) return;
+    if (!currentPlayerState) return;
+
+    currentPlayerState.submitted = true;
+
+    try {
+      await serverApi.play.send({
+        game,
+        selection: playSelection,
+      });
+    } catch (error) {
+      currentPlayerState.submitted = false;
+      if (isJazzRequestError(error)) {
+        toast.error(error.message);
+      } else {
+        console.error(error);
+        toast.error("An unexpected error occurred");
+      }
+    }
+  };
+
+  const handleNewGame = async () => {
+    if (!currentPlayerState) return;
+
+    currentPlayerState.resetRequested = true;
+
+    try {
+      await serverApi.newGame.send({
+        game,
+      });
+    } catch (error) {
+      currentPlayerState.resetRequested = false;
+
+      if (isJazzRequestError(error)) {
+        toast.error(error.message);
+      } else {
+        console.error(error);
+        toast.error("An unexpected error occurred");
+      }
+    }
+  };
+
+  const playSelection = currentPlayerState?.currentSelection;
+
+  const submitDisabled =
+    !currentPlayerState?.currentSelection || currentPlayerState?.submitted;
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 py-8 px-4">
+      <div className="max-w-4xl mx-auto">
+        {/* Header */}
+        <div className="text-center mb-8">
+          <div className="flex items-center justify-center gap-2 mb-4">
+            <Gamepad2 className="w-8 h-8 text-primary" />
+            <h1 className="text-4xl font-bold bg-gradient-to-r from-primary to-purple-600 bg-clip-text text-transparent">
+              Rock, Paper, Scissors
+            </h1>
+            <Sparkles className="w-6 h-6 text-yellow-500" />
+          </div>
+
+          {/* Player Info */}
+          <div className="flex items-center justify-center gap-4 mb-6">
+            <Badge variant="secondary" className="px-4 py-2">
+              <Users className="w-4 h-4 mr-2" />
+              {isPlayer1 ? "Player 1" : "Player 2"}
+            </Badge>
+          </div>
+
+          {/* Score Board */}
+          <Card className="inline-block bg-white/80 backdrop-blur-sm border-0 shadow-lg">
+            <CardContent className="p-4">
+              <div className="flex items-center gap-6 text-2xl font-bold">
+                <div className="flex items-center gap-2">
+                  <span className="text-blue-600">Player 1</span>
+                  <span className="text-3xl">{game?.player1Score ?? 0}</span>
+                </div>
+                <div className="text-muted-foreground">-</div>
+                <div className="flex items-center gap-2">
+                  <span className="text-3xl">{game?.player2Score ?? 0}</span>
+                  <span className="text-purple-600">Player 2</span>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Game Outcome */}
+        {gameComplete && (
+          <Card className="mb-8 bg-gradient-to-r from-yellow-50 to-orange-50 border-yellow-200">
+            <CardContent className="p-6 text-center">
+              <div className="flex items-center justify-center gap-3 mb-4">
+                {getOutcomeIcon(game.outcome, player)}
+                <h2 className="text-2xl font-bold">
+                  {game?.outcome === player
+                    ? "🎉 You Win! 🎉"
+                    : game?.outcome === "draw"
+                      ? "🤝 It's a Draw! 🤝"
+                      : "😔 You Lose! 😔"}
+                </h2>
+              </div>
+              <Button
+                disabled={currentPlayerState?.resetRequested}
+                onClick={handleNewGame}
+                className="bg-gradient-to-r from-primary to-purple-600 hover:from-primary/90 hover:to-purple-600/90 text-white"
+                size="lg"
+              >
+                <Gamepad2 className="w-5 h-5 mr-2" />
+                Start New Game
+              </Button>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Game Board */}
+        <div className="grid md:grid-cols-2 gap-8">
+          {/* Your Selection */}
+          <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
+            <CardHeader className="text-center pb-4">
+              <CardTitle className="text-xl font-semibold text-blue-600">
+                Your Selection
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="text-center">
+              <div className="mb-6">{playIcon(playSelection, "lg")}</div>
+
+              {!gameComplete && (
+                <>
+                  {/* Choice Buttons */}
+                  <div className="grid grid-cols-3 gap-4 mb-6">
+                    <Button
+                      variant={playSelection === "rock" ? "default" : "outline"}
+                      size="lg"
+                      className={`h-20 transition-all duration-200 ${
+                        playSelection === "rock"
+                          ? "bg-gradient-to-br from-gray-400 to-gray-600 text-white shadow-lg scale-105"
+                          : "hover:scale-105"
+                      } text-3xl`}
+                      onClick={() => handleSelection("rock")}
+                      aria-label="Select Rock"
+                      aria-selected={playSelection === "rock"}
+                    >
+                      🪨
+                    </Button>
+                    <Button
+                      variant={
+                        playSelection === "paper" ? "default" : "outline"
+                      }
+                      size="lg"
+                      className={`h-20 transition-all duration-200 ${
+                        playSelection === "paper"
+                          ? "bg-gradient-to-br from-blue-400 to-blue-600 text-white shadow-lg scale-105"
+                          : "hover:scale-105"
+                      } text-3xl`}
+                      onClick={() => handleSelection("paper")}
+                      aria-label="Select Paper"
+                      aria-selected={playSelection === "paper"}
+                    >
+                      📄
+                    </Button>
+                    <Button
+                      variant={
+                        playSelection === "scissors" ? "default" : "outline"
+                      }
+                      size="lg"
+                      className={`h-20 transition-all duration-200 ${
+                        playSelection === "scissors"
+                          ? "bg-gradient-to-br from-red-400 to-red-600 text-white shadow-lg scale-105"
+                          : "hover:scale-105"
+                      } text-3xl`}
+                      onClick={() => handleSelection("scissors")}
+                      aria-label="Select Scissors"
+                      aria-selected={playSelection === "scissors"}
+                    >
+                      ✂️
+                    </Button>
+                  </div>
+
+                  {/* Submit Button */}
+                  <Button
+                    disabled={submitDisabled}
+                    onClick={() => handleSubmit(playSelection)}
+                    className="w-full bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white font-semibold py-3 text-lg"
+                    size="lg"
+                  >
+                    {currentPlayerState?.submitted ? (
+                      <>
+                        <CheckCircle className="w-5 h-5 mr-2" />
+                        Selection Made!
+                      </>
+                    ) : (
+                      <>
+                        <Gamepad2 className="w-5 h-5 mr-2" />
+                        Make Your Move!
+                      </>
+                    )}
+                  </Button>
+                </>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Opponent Selection */}
+          <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
+            <CardHeader className="text-center pb-4">
+              <CardTitle className="text-xl font-semibold text-purple-600">
+                Opponent's Selection
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="text-center">
+              {opponentSelection && (
+                <div className="mb-6">
+                  {playIcon(opponentSelection?.value, "lg")}
+                </div>
+              )}
+
+              {!opponentSelection && !gameComplete ? (
+                opponentHasSelected ? (
+                  <div className="text-muted-foreground">
+                    <Clock className="w-8 h-8 mx-auto mb-2 animate-pulse" />
+                    <p>The opponent has made their move</p>
+                  </div>
+                ) : (
+                  <div className="text-muted-foreground">
+                    <Clock className="w-8 h-8 mx-auto mb-2 animate-pulse" />
+                    <p>Waiting for opponent...</p>
+                  </div>
+                )
+              ) : null}
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Game Status */}
+        {!gameComplete && (
+          <Card className="mt-8 bg-white/60 backdrop-blur-sm border-0">
+            <CardContent className="p-4 text-center">
+              <div className="flex items-center justify-center gap-2 text-muted-foreground">
+                <Clock className="w-4 h-4" />
+                <span className="text-sm">
+                  {currentPlayer?.playSelection && !opponentSelection
+                    ? "Waiting for opponent to make their move..."
+                    : "Make your selection to start the game"}
+                </span>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </div>
+  );
+}

examples/server-worker-http/src/app/globals.css

@@ -0,0 +1,120 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --radius: 0.625rem;
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

examples/server-worker-http/src/app/layout.tsx

@@ -0,0 +1,37 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { Toaster } from "@/components/ui/sonner";
+import { Jazz } from "../jazz";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Jazz Server Side Validation",
+  description: "An example of server side validation with Jazz",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <Jazz>{children}</Jazz>
+        <Toaster />
+      </body>
+    </html>
+  );
+}

examples/server-worker-http/src/app/page.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { serverApi } from "@/serverApi";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function HomeComponent() {
+  const [isLoading, setIsLoading] = useState(false);
+  const router = useRouter();
+
+  const onNewGameClick = async () => {
+    setIsLoading(true);
+
+    const { waitingRoom } = await serverApi.createGame.send({});
+
+    router.push(`/waiting-room/${waitingRoom.id}`);
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-900 flex flex-col items-center justify-center p-4 relative overflow-hidden">
+      {/* Background decoration */}
+      <div className="absolute inset-0 overflow-hidden">
+        <div className="absolute -top-40 -right-40 w-80 h-80 bg-white/5 rounded-full blur-3xl"></div>
+        <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-white/5 rounded-full blur-3xl"></div>
+      </div>
+
+      {/* Main content */}
+      <div className="relative z-10 text-center space-y-8 max-w-2xl mx-auto">
+        {/* Game title and emojis */}
+        <div className="space-y-4">
+          <div className="flex justify-center items-center space-x-4 text-6xl mb-6">
+            <span className="animate-bounce" style={{ animationDelay: "0ms" }}>
+              🪨
+            </span>
+            <span
+              className="animate-bounce"
+              style={{ animationDelay: "150ms" }}
+            >
+              📄
+            </span>
+            <span
+              className="animate-bounce"
+              style={{ animationDelay: "300ms" }}
+            >
+              ✂️
+            </span>
+          </div>
+          <h1 className="text-5xl font-bold text-white mb-2">
+            Rock, Paper, Scissors
+          </h1>
+          <p className="text-xl text-gray-300 max-w-md mx-auto">
+            Challenge your friends in this classic multiplayer game powered by
+            Jazz
+          </p>
+        </div>
+
+        {/* Game card */}
+        <Card className="w-full max-w-md mx-auto bg-white/10 backdrop-blur-lg border-white/20 shadow-2xl">
+          <CardHeader className="text-center pb-4">
+            <CardTitle className="text-2xl font-bold text-white">
+              Ready to Play?
+            </CardTitle>
+            <p className="text-gray-300 text-sm mt-2">
+              Create a new game and invite your friends
+            </p>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <Button
+              onClick={onNewGameClick}
+              disabled={isLoading}
+              className="w-full h-12 text-lg font-semibold bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 border-0 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105"
+            >
+              {isLoading ? (
+                <div className="flex items-center space-x-2">
+                  <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
+                  <span>Creating game...</span>
+                </div>
+              ) : (
+                <div className="flex items-center space-x-2">
+                  <span>🎮</span>
+                  <span>Start New Game</span>
+                </div>
+              )}
+            </Button>
+          </CardContent>
+        </Card>
+
+        {/* Footer */}
+        <div className="text-center text-gray-400 text-sm mt-12">
+          <p>Built with Jazz Framework</p>
+        </div>
+      </div>
+    </div>
+  );
+}

examples/server-worker-http/src/app/waiting-room/[id]/page.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { WaitingRoom } from "@/schema";
+import { serverApi } from "@/serverApi";
+import { Account, JazzRequestError, co } from "jazz-tools";
+import { useCoState } from "jazz-tools/react-core";
+import { ClipboardCopyIcon, Loader2Icon } from "lucide-react";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+
+function useWindowLocation() {
+  const [location, setLocation] = useState<string>("");
+
+  useEffect(() => {
+    setLocation(window.location.href);
+  }, []);
+
+  return location;
+}
+
+async function askToJoinGame(
+  waitingRoom: co.loaded<typeof WaitingRoom, { creator: true }>,
+) {
+  if (waitingRoom.creator.isMe) {
+    return null;
+  }
+
+  try {
+    await serverApi.joinGame.send({
+      waitingRoom,
+    });
+  } catch (error) {
+    if (error instanceof JazzRequestError) {
+      toast.error(error.message);
+    } else {
+      toast.error("An unexpected error occurred");
+    }
+  }
+}
+
+export default function RouteComponent() {
+  const params = useParams<{ id: string }>();
+  const searchParams = useSearchParams();
+  const waitingRoom = useCoState(WaitingRoom, params.id, {
+    resolve: {
+      creator: true,
+      game: true,
+    },
+  });
+  const [copied, setCopied] = useState(false);
+  const router = useRouter();
+  const location = useWindowLocation();
+  const joinLocation = location + "?join=true";
+
+  const isJoining = !waitingRoom
+    ? searchParams.get("join") === "true"
+    : Account.getMe().id !== waitingRoom.creator.id;
+
+  useEffect(() => {
+    if (!waitingRoom) {
+      return;
+    }
+
+    askToJoinGame(waitingRoom);
+  }, [waitingRoom?.id]);
+
+  useEffect(() => {
+    if (!waitingRoom?.game?.id) {
+      return;
+    }
+
+    router.push(`/game/${waitingRoom.game.id}`);
+  }, [waitingRoom?.game?.id]);
+
+  const onCopyClick = () => {
+    navigator.clipboard.writeText(joinLocation);
+    setCopied(true);
+    toast.success("Link copied to clipboard!");
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-900 flex flex-col items-center justify-center p-4 relative overflow-hidden">
+      {/* Background decoration */}
+      <div className="absolute inset-0 overflow-hidden">
+        <div className="absolute -top-40 -right-40 w-80 h-80 bg-white/5 rounded-full blur-3xl"></div>
+        <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-white/5 rounded-full blur-3xl"></div>
+      </div>
+
+      {/* Main content */}
+      <div className="relative z-10 text-center space-y-8 max-w-2xl mx-auto">
+        {/* Game title and emojis */}
+        <div className="space-y-4">
+          <div className="flex justify-center items-center space-x-4 text-6xl mb-6">
+            <span className="animate-bounce" style={{ animationDelay: "0ms" }}>
+              🪨
+            </span>
+            <span
+              className="animate-bounce"
+              style={{ animationDelay: "150ms" }}
+            >
+              📄
+            </span>
+            <span
+              className="animate-bounce"
+              style={{ animationDelay: "300ms" }}
+            >
+              ✂️
+            </span>
+          </div>
+          <h1 className="text-5xl font-bold text-white mb-2">Waiting Room</h1>
+          {!isJoining && (
+            <p className="text-xl text-gray-300 max-w-md mx-auto">
+              Share this link with your friend to join the game
+            </p>
+          )}
+        </div>
+
+        {/* Waiting room card */}
+        <Card className="w-full max-w-md mx-auto bg-white/10 backdrop-blur-lg border-white/20 shadow-2xl">
+          <CardHeader className="text-center pb-4">
+            <CardTitle className="text-2xl font-bold text-white flex items-center justify-center">
+              <Loader2Icon className="animate-spin inline h-8 w-8 mr-3" />
+              {isJoining ? "Joining the game" : "Waiting for opponent"}
+            </CardTitle>
+            <CardDescription className="text-gray-300 text-sm mt-2">
+              The game will automatically start once{" "}
+              {isJoining ? "ready" : "they join"}
+            </CardDescription>
+          </CardHeader>
+          {!isJoining && (
+            <CardContent className="space-y-4">
+              <div className="flex">
+                <Input
+                  className="w-full border-white/20 bg-white/5 text-white placeholder:text-gray-400 rounded-e-none focus:border-white/40 focus:ring-white/20"
+                  readOnly
+                  value={joinLocation}
+                />
+                <Button
+                  onClick={onCopyClick}
+                  className="rounded-s-none w-25 bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 border-0 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105"
+                >
+                  {copied ? (
+                    "Copied!"
+                  ) : (
+                    <>
+                      <ClipboardCopyIcon className="w-5 h-5" />
+                      Copy
+                    </>
+                  )}
+                </Button>
+              </div>
+            </CardContent>
+          )}
+        </Card>
+
+        {/* Footer */}
+        <div className="text-center text-gray-400 text-sm mt-12">
+          <p>Built with Jazz Framework</p>
+        </div>
+      </div>
+    </div>
+  );
+}

examples/server-worker-http/src/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription };

examples/server-worker-http/src/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import { Slot } from "@radix-ui/react-slot";
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span";
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };

examples/server-worker-http/src/components/ui/button.tsx

@@ -0,0 +1,59 @@
+import { Slot } from "@radix-ui/react-slot";
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

examples/server-worker-http/src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+};

examples/server-worker-http/src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import * as LabelPrimitive from "@radix-ui/react-label";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };

examples/server-worker-http/src/components/ui/separator.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };

examples/server-worker-http/src/components/ui/sonner.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, ToasterProps } from "sonner";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  );
+};
+
+export { Toaster };

examples/server-worker-http/src/jazz.tsx

@@ -0,0 +1,15 @@
+import { JazzReactProvider } from "jazz-tools/react";
+import { apiKey } from "./apiKey";
+
+export function Jazz({ children }: { children: React.ReactNode }) {
+  return (
+    <JazzReactProvider
+      enableSSR
+      sync={{
+        peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
+      }}
+    >
+      {children}
+    </JazzReactProvider>
+  );
+}

examples/server-worker-http/src/jazzServerAccount.ts

@@ -0,0 +1,5 @@
+import { startWorker } from "jazz-tools/worker";
+
+export const jazzServerAccount = await startWorker({
+  syncServer: "wss://cloud.jazz.tools/?key=jazz-paper-scissors@garden.co ",
+});

examples/server-worker-http/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

examples/server-worker-http/src/schema.ts

@@ -0,0 +1,94 @@
+import { Account, Group, co, z } from "jazz-tools";
+
+export const PlayerState = co.map({
+  currentSelection: z.literal(["rock", "paper", "scissors"]).optional(),
+  submitted: z.boolean(),
+  resetRequested: z.boolean(),
+});
+export type PlayerState = co.loaded<typeof PlayerState>;
+
+export const PlaySelection = co.map({
+  value: z.literal(["rock", "paper", "scissors"]),
+  group: Group,
+});
+export type PlaySelection = co.loaded<typeof PlaySelection>;
+
+export const Player = co.map({
+  account: co.account(),
+  playSelection: PlaySelection.optional(),
+});
+export type Player = co.loaded<typeof Player>;
+
+export const Game = co.map({
+  player1: Player,
+  player2: Player,
+  player1State: PlayerState,
+  player2State: PlayerState,
+  outcome: z.literal(["player1", "player2", "draw"]).optional(),
+  player1Score: z.number(),
+  player2Score: z.number(),
+});
+export type Game = co.loaded<typeof Game>;
+
+export const WaitingRoom = co.map({
+  creator: co.account(),
+  game: co.optional(Game),
+});
+export type WaitingRoom = co.loaded<typeof WaitingRoom>;
+
+export function createGameState(params: {
+  account1: Account;
+  account2: Account;
+  worker: Account;
+}) {
+  const { account1, account2, worker } = params;
+  const gameGroup = Group.create({ owner: worker });
+  gameGroup.addMember(account1, "reader");
+  gameGroup.addMember(account2, "reader");
+
+  const player1 = Player.create(
+    {
+      account: account1,
+    },
+    gameGroup,
+  );
+
+  const player2 = Player.create(
+    {
+      account: account2,
+    },
+    gameGroup,
+  );
+
+  const player1StateGroup = Group.create(worker);
+  player1StateGroup.addMember(account1, "writer");
+
+  const player1State = PlayerState.create(
+    {
+      currentSelection: undefined,
+      submitted: false,
+      resetRequested: false,
+    },
+    player1StateGroup,
+  );
+
+  const player2StateGroup = Group.create(worker);
+  player2StateGroup.addMember(account2, "writer");
+
+  const player2State = PlayerState.create(
+    {
+      currentSelection: undefined,
+      submitted: false,
+      resetRequested: false,
+    },
+    player2StateGroup,
+  );
+
+  return {
+    player1,
+    player2,
+    player1State,
+    player2State,
+    outcome: undefined,
+  };
+}

examples/server-worker-http/src/serverApi.ts

@@ -0,0 +1,125 @@
+import { experimental_defineRequest, z } from "jazz-tools";
+import { Game, WaitingRoom } from "./schema";
+
+const workerId = process.env.NEXT_PUBLIC_JAZZ_WORKER_ACCOUNT!;
+
+const createGameRequest = experimental_defineRequest({
+  url: "/api/create-game",
+  workerId,
+  request: {},
+  response: {
+    schema: { waitingRoom: WaitingRoom },
+    resolve: { waitingRoom: { creator: true } },
+  },
+});
+
+const joinGameRequest = experimental_defineRequest({
+  url: "/api/join-game",
+  workerId,
+  request: {
+    schema: {
+      waitingRoom: WaitingRoom,
+    },
+    resolve: {
+      waitingRoom: {
+        creator: true,
+      },
+    },
+  },
+  response: {
+    schema: {
+      waitingRoom: WaitingRoom,
+    },
+    resolve: {
+      waitingRoom: {
+        game: {
+          player1: {
+            account: true,
+          },
+          player2: {
+            account: true,
+          },
+        },
+      },
+    },
+  },
+});
+
+const newGameRequest = experimental_defineRequest({
+  url: "/api/new-game",
+  workerId,
+  request: {
+    schema: {
+      game: Game,
+    },
+    resolve: {
+      game: {
+        player1: {
+          account: true,
+        },
+        player2: {
+          account: true,
+        },
+      },
+    },
+  },
+  response: {
+    schema: {
+      game: Game,
+    },
+    resolve: {
+      game: {
+        player1State: {
+          $onError: null,
+        },
+        player2State: {
+          $onError: null,
+        },
+        player1: true,
+        player2: true,
+      },
+    },
+  },
+});
+
+const playRequest = experimental_defineRequest({
+  url: "/api/play",
+  workerId,
+  request: {
+    schema: {
+      game: Game,
+      selection: z.literal(["rock", "paper", "scissors"]),
+    },
+    resolve: {
+      game: {
+        player1: {
+          account: true,
+          playSelection: {
+            group: true,
+          },
+        },
+        player2: {
+          account: true,
+          playSelection: {
+            group: true,
+          },
+        },
+      },
+    },
+  },
+  response: {
+    schema: {
+      game: Game,
+    },
+    resolve: {
+      game: true,
+    },
+  },
+});
+
+export const serverApi = {
+  createGame: createGameRequest,
+  joinGame: joinGameRequest,
+  newGame: newGameRequest,
+  play: playRequest,
+};

examples/server-worker-http/tests/play.spec.ts

@@ -0,0 +1,37 @@
+import { expect, test } from "@playwright/test";
+
+test("start a new game and play", async ({ page: marioPage, browser }) => {
+  await marioPage.goto("/");
+
+  await marioPage.getByRole("button", { name: /Start New Game/ }).click();
+
+  await expect(marioPage.getByText("Waiting for opponent")).toBeVisible();
+
+  const url = await marioPage.url();
+
+  const luigiContext = await browser.newContext();
+  const luigiPage = await luigiContext.newPage();
+  await luigiPage.goto(url);
+
+  await expect(marioPage.getByText("Waiting for selection")).toBeVisible();
+  await expect(luigiPage.getByText("Waiting for selection")).toBeVisible();
+  await expect(luigiPage.getByText("Waiting for opponent")).toBeVisible();
+
+  await marioPage.getByLabel("Select Rock").click();
+  await marioPage.getByRole("button", { name: /Make your move!/i }).click();
+
+  await expect(
+    luigiPage.getByText("The opponent has made their move"),
+  ).toBeVisible();
+
+  await luigiPage.getByLabel("Select Paper").click();
+  await luigiPage.getByRole("button", { name: /Make your move!/i }).click();
+
+  await expect(luigiPage.getByText(/🎉 You Win! 🎉/)).toBeVisible();
+  await expect(marioPage.getByText(/😔 You Lose! 😔/)).toBeVisible();
+
+  await marioPage.getByRole("button", { name: /Start New Game/ }).click();
+
+  await expect(marioPage.getByText("Waiting for opponent")).toBeVisible();
+  await expect(luigiPage.getByText("Waiting for opponent")).toBeVisible();
+});

examples/server-worker-http/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

examples/server-worker-inbox/src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };

examples/server-worker-inbox/src/schema.ts

@@ -8,7 +8,7 @@ export type Player = co.loaded<typeof Player>;
 
 export const Game = co.map({
   player1: Player,
-  player2: z.optional(Player),
+  player2: co.optional(Player),
   outcome: z.optional(z.literal(["player1", "player2", "draw"])),
   player1Score: z.number(),
   player2Score: z.number(),
@@ -17,8 +17,8 @@ export type Game = co.loaded<typeof Game>;
 
 export const WaitingRoom = co.map({
   account1: co.account(),
-  account2: z.optional(co.account()),
-  game: z.optional(Game),
+  account2: co.optional(co.account()),
+  game: co.optional(Game),
 });
 export type WaitingRoom = co.loaded<typeof WaitingRoom>;
 
@@ -47,7 +47,7 @@ export const JoinGameRequest = co.map({
 });
 export type JoinGameRequest = co.loaded<typeof JoinGameRequest>;
 
-export const InboxMessage = z.discriminatedUnion("type", [
+export const InboxMessage = co.discriminatedUnion("type", [
   PlayIntent,
   NewGameIntent,
   CreateGameRequest,

examples/server-worker-inbox/vercel.json

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