@dreamboard-games/workspace-codegen 0.1.2 → 0.1.4

package/src/seeds.ts

@@ -14,9 +14,9 @@ import {
   createClientParamSchemasByPhase,
 } from "@dreamboard/app-sdk/reducer";
 import type {
-  ClientParamsOfInteractionOfDefinition,
-  DefaultedClientParamKeysOfInteractionOfDefinition,
-  InteractionIdOfDefinition,
+	  ClientParamsOfInteractionOfDefinition,
+	  DefaultedClientParamKeysOfInteractionOfDefinition,
+	  InteractionIdOfDefinition,
   InteractionIdOfDefinitionPhase,
   PhaseNamesOfDefinition,
   StageNamesOfDefinitionPhase,
@@ -24,35 +24,38 @@ import type {
   ViewOfDefinition,
 } from "@dreamboard/app-sdk/reducer";
 import {
-  createDreamboardUI,
-  createHexBoardView,
-  InteractionField as InteractionFieldGeneric,
-  InteractionForm as InteractionFormGeneric,
-  useActivePlayers as useActivePlayersGeneric,
-  useBoardInteractions as useBoardInteractionsGeneric,
-  useGameView as useGameViewGeneric,
-  useInteractionByKey as useInteractionByKeyGeneric,
-  usePlayerTurnOrder as usePlayerTurnOrderGeneric,
-  type BoardInteractionsContext,
-  type BoardInteractionsOptions,
-  type BoardSpaceIdOf,
-  type ClientParamSchemaMap,
-  type HexBoardView,
-  type InteractionDescriptor,
-  type InteractionFieldProps as InteractionFieldPropsGeneric,
-  type InteractionFieldRenderMap,
-  type InteractionFormProps as InteractionFormPropsGeneric,
-  type InteractionHandle,
-  type DreamboardUI,
-  type UIContract,
-} from "@dreamboard/ui-sdk";
-import { createElement, useMemo, type ReactElement } from "react";
-import {
-  literals,
-  staticBoards,
-  type CardId,
-  type EdgeId,
+	  createDreamboardUI,
+	  createResourceCounter,
+	  type BoardHexGridProps as BoardHexGridPropsGeneric,
+	  type BoardHexViewProps as BoardHexViewPropsGeneric,
+	  type BoardSpaceIdOf,
+	  type ClientParamSchemaMap,
+	  type InteractionDescriptor,
+	  type InteractionHandle,
+	  type InteractionRouteMap as InteractionRouteMapGeneric,
+	  type InteractionSwitchProps as InteractionSwitchPropsGeneric,
+	  type InteractionSwitchRenderState,
+	  type DreamboardUI,
+	  type ResourceCounterComponents,
+	  type ResourceDisplayConfig,
+	  type TypedGame,
+	  type UIContract,
+	  type UIRootProps,
+	  type ZoneCardAtProps,
+	  type ZoneCardRenderItem,
+	  type ZoneListProps,
+	  type ZonePileCardsProps,
+	} from "@dreamboard/ui-sdk";
+	import { createElement, type ReactElement, type ReactNode } from "react";
+	import {
+	  literals,
+	  staticBoards,
+	  type CardId,
+	  type CardProperties,
+	  type CardType,
+	  type EdgeId,
   type PlayerId,
+  type ResourceId,
   type SpaceId,
   type VertexId,
   type ZoneId as ManifestZoneId,
@@ -151,8 +154,7 @@ export type InteractionDescriptorFor<Key extends InteractionKey> =
 
 /**
  * Params shape for a phase-qualified interaction key. Drives strong typing
- * for \`useInteractionByKey\`'s draft,
- * \`submit\`, and \`setInput\`.
+ * for component-first interaction state, forms, and submits.
  */
 export type InteractionParamsOf<Key extends InteractionKey> =
   InteractionParams<PhaseOfInteractionKey<Key>, IdOfInteractionKey<Key>>;
@@ -175,6 +177,50 @@ type InteractionHandleDefaultedKeys<Key extends InteractionKey> = Extract<
   keyof InteractionParamsShape<Key> & string
 >;
 
+type RequiredInteractionInputKeysOf<Key extends InteractionKey> = Exclude<
+  InteractionInputKeysOf<Key>,
+  InteractionHandleDefaultedKeys<Key>
+>;
+
+export type RequiredInteractionInputKey<Key extends InteractionKey> =
+  RequiredInteractionInputKeysOf<Key>;
+
+export type ZeroInputInteractionKey = {
+  [K in InteractionKey]: InteractionInputKeysOf<K> extends never
+    ? K
+    : never;
+}[InteractionKey];
+
+export type InputInteractionKey = Exclude<
+  InteractionKey,
+  ZeroInputInteractionKey
+>;
+
+export type InteractionRouteRenderState<Key extends InteractionKey> =
+  Omit<InteractionSwitchRenderState<Key>, "descriptor"> & {
+    descriptor: InteractionDescriptorFor<Key>;
+  };
+
+export type InteractionRouteMap = {
+  [K in InteractionKey]: (state: InteractionRouteRenderState<K>) => ReactNode;
+};
+
+type ExactInteractionRoutes<Routes extends InteractionRouteMap> = Routes &
+  Record<Exclude<keyof Routes, keyof InteractionRouteMap>, never>;
+
+export function defineInteractionRoutes<const Routes extends InteractionRouteMap>(
+  routes: ExactInteractionRoutes<Routes>,
+): InteractionRouteMap {
+  return routes;
+}
+
+type InteractionSwitchProps = Omit<
+  InteractionSwitchPropsGeneric<InteractionKey>,
+  "routes"
+> & {
+  routes: InteractionRouteMap;
+};
+
 type InteractionInputKeyOf<Key extends InteractionKey> =
   Key extends InteractionKey ? InteractionInputKeysOf<Key> : never;
 
@@ -206,6 +252,10 @@ type UIPromptOptionRegistry = {
   [K in PromptOptionValue]: { value: K };
 };
 
+type UIPlayerRegistry = {
+  [K in PlayerId & string]: { player: K };
+};
+
 type UIZoneRegistry = {
   [K in ZoneId & string]: { zone: K };
 };
@@ -227,6 +277,7 @@ export const uiContract = {
   inputs: {} as UIInputRegistry,
   prompts: {} as UIPromptRegistry,
   promptOptions: {} as UIPromptOptionRegistry,
+  players: {} as UIPlayerRegistry,
   zones: {} as UIZoneRegistry,
   cards: {} as UICardRegistry,
   phases: {} as UIPhaseRegistry,
@@ -240,142 +291,6 @@ declare module "@dreamboard/ui-sdk" {
   }
 }
 
-type WorkspaceUI = DreamboardUI<typeof uiContract>;
-
-export const UI: WorkspaceUI = createDreamboardUI(uiContract);
-export const Interaction = UI.Interaction;
-export const Prompt = UI.Prompt;
-export const PromptInbox = UI.PromptInbox;
-export const PromptDialogHost = UI.PromptDialogHost;
-export const PlayerRoster: WorkspaceUI["PlayerRoster"] = UI.PlayerRoster;
-export const Phase = UI.Phase;
-export const Zone = UI.Zone;
-export const Board = UI.Board;
-
-export type InteractionFieldRenderers<Key extends InteractionKey> =
-  InteractionFieldRenderMap<InteractionParamsShape<Key>>;
-
-export type InteractionFormProps<Key extends InteractionKey> = Omit<
-  InteractionFormPropsGeneric<
-    InteractionParamsShape<Key>,
-    InteractionHandleDefaultedKeys<Key>
-  >,
-  "descriptor" | "handle"
-> & {
-  descriptor: InteractionDescriptorFor<Key>;
-  handle: InteractionHandle<
-    InteractionParamsShape<Key>,
-    InteractionHandleDefaultedKeys<Key>
-  >;
-  renderFields?: InteractionFieldRenderers<Key>;
-};
-
-export type InteractionFieldProps<
-  Key extends InteractionKey,
-  InputKey extends keyof InteractionParamsShape<Key> & string,
-> = Omit<
-  InteractionFieldPropsGeneric<InteractionParamsShape<Key>, InputKey>,
-  "descriptor" | "handle"
-> & {
-  descriptor: InteractionDescriptorFor<Key>;
-  handle: InteractionHandle<
-    InteractionParamsShape<Key>,
-    InteractionHandleDefaultedKeys<Key>
-  >;
-};
-
-export const clientParamSchemasByPhase = createClientParamSchemasByPhase(
-  game,
-) as ClientParamSchemaMap;
-
-/**
- * Workspace-typed wrapper over \`@dreamboard/ui-sdk\`'s generic
- * \`useInteractionByKey\`. The \`key\` argument is constrained to the
- * generated {@link InteractionKey} union (typos are compile errors), and
- * the returned {@link InteractionHandle} is parameterised on
- * {@link InteractionParamsOf} so \`handle.draft\`, \`handle.submit\`, and
- * \`handle.setInput\` are statically typed against the interaction's
- * declared inputs.
- *
- * \`\`\`ts
- * const handle = useInteractionByKey("play.placeThingCard");
- * if (!handle) return null;
- * handle.setInput("cardId", card.id); // inferred as ThingsDeckCardId
- * await handle.submit(); // params typed from the reducer contract
- * \`\`\`
- */
-export function useInteractionByKey<Key extends InteractionKey>(
-  key: Key | null | undefined,
-): InteractionHandle<
-  InteractionParamsShape<Key>,
-  InteractionHandleDefaultedKeys<Key>
-> | null {
-  return useInteractionByKeyGeneric<
-    Key,
-    InteractionParamsShape<Key>,
-    InteractionHandleDefaultedKeys<Key>
-  >(key);
-}
-
-export function InteractionForm<Key extends InteractionKey>(
-  props: InteractionFormProps<Key>,
-): ReactElement {
-  return createElement(
-    InteractionFormGeneric<
-      InteractionParamsShape<Key>,
-      InteractionHandleDefaultedKeys<Key>
-    >,
-    props,
-  );
-}
-
-export function InteractionField<
-  Key extends InteractionKey,
-  InputKey extends keyof InteractionParamsShape<Key> & string,
->(props: InteractionFieldProps<Key, InputKey>): ReactElement | null {
-  return createElement(
-    InteractionFieldGeneric<InteractionParamsShape<Key>, InputKey>,
-    props,
-  );
-}
-
-/**
- * Workspace-typed wrapper over \`@dreamboard/ui-sdk\`'s
- * \`useBoardInteractions\`. Returns a {@link BoardInteractionsContext}
- * narrowed to this workspace's board-interaction union for exhaustive
- * downstream logic.
- *
- * \`\`\`tsx
- * const board = useBoardInteractions();
- * <HexGrid interactiveVertices={board.targetLayers.vertex()} />
- * \`\`\`
- *
- * Reach for this whenever a screen keeps more than one board target
- * interaction live simultaneously and dispatch is target-driven instead of
- * armed-then-clicked. Ambiguous unarmed overlaps should be resolved in the UI
- * by arming an explicit interaction/input route.
- */
-export function useBoardInteractions(
-  options?: BoardInteractionsOptions,
-): BoardInteractionsContext<BoardInteractions> {
-  return useBoardInteractionsGeneric<BoardInteractions>(options);
-}
-
-/** Workspace-typed active-player hook. */
-export function useActivePlayers(): readonly PlayerId[] {
-  return useActivePlayersGeneric() as readonly PlayerId[];
-}
-
-/** Workspace-typed reducer-native player view hook. */
-export function useGameView(): GameView {
-  return useGameViewGeneric() as GameView;
-}
-
-/** Workspace-typed player turn order hook. */
-export function usePlayerTurnOrder(): readonly PlayerId[] {
-  return usePlayerTurnOrderGeneric() as readonly PlayerId[];
-}
-
 // -------------------------------------------------------------------------
 // Typed hex-board view adapter
 // -------------------------------------------------------------------------
@@ -394,50 +309,177 @@ export type HexBoardSpaceId<Id extends HexBoardId> = BoardSpaceIdOf<
   HexBoardTopology<Id>
 >;
 
-/**
- * Workspace-typed wrapper over \`@dreamboard/ui-sdk\`'s
- * \`createHexBoardView\`. Joins the static topology of the named hex
- * board with a per-space view overlay and returns a value ready for
- * \`<HexGrid board={...} />\`. Each rendered tile carries a \`view\`
- * field typed as the matched overlay row.
- *
- * Strict by construction: every static space must have exactly one
- * overlay; missing, duplicate, or unknown overlay ids throw.
- *
- * \`\`\`tsx
- * const island = useHexBoardView("island", { spaces: view.spaces });
- *
- * <HexGrid
- *   board={island}
- *   renderTile={(tile) => {
- *     const terrain = tile.view.terrain;
- *     // ...
- *   }}
- * />
- * \`\`\`
- */
-export function useHexBoardView<
-  const Id extends HexBoardId,
-  const TSpaceView extends { id: HexBoardSpaceId<Id> },
->(
-  boardId: Id,
-  options: { spaces: ReadonlyArray<TSpaceView> },
-): HexBoardView<HexBoardTopology<Id>, TSpaceView> {
-  const board = hexStaticBoards[boardId];
-  const { spaces } = options;
-  return useMemo(
-    () => createHexBoardView<HexBoardTopology<Id>, TSpaceView>(board, { spaces }),
-    [board, spaces],
-  );
-}
+export type HexBoardViewProps<
+  Id extends HexBoardId,
+  TSpaceView extends { id: HexBoardSpaceId<Id> },
+> = Omit<BoardHexViewPropsGeneric<HexBoardTopology<Id>, TSpaceView>, "board"> & {
+  board: Id;
+};
+
+export type HexBoardGridProps<
+  Id extends HexBoardId,
+  TSpaceView extends { id: HexBoardSpaceId<Id> },
+> = Omit<
+  BoardHexGridPropsGeneric<HexBoardTopology<Id>, TSpaceView>,
+  "board" | "interactions"
+> & {
+  board: Id;
+  interactions?:
+    | "auto"
+    | false
+    | {
+        edge?: readonly InteractionKey[];
+        vertex?: readonly InteractionKey[];
+        space?: readonly InteractionKey[];
+      };
+};
+
+type WorkspaceBoard = Omit<DreamboardUI<typeof uiContract>["Board"], "HexView" | "HexGrid"> & {
+  HexView<
+    const Id extends HexBoardId,
+    const TSpaceView extends { id: HexBoardSpaceId<Id> },
+  >(props: HexBoardViewProps<Id, TSpaceView>): ReactElement;
+  HexGrid<
+    const Id extends HexBoardId,
+    const TSpaceView extends { id: HexBoardSpaceId<Id> },
+  >(props: HexBoardGridProps<Id, TSpaceView>): ReactElement;
+};
+
+type WorkspaceCardProperties = CardProperties extends Record<string, unknown>
+  ? CardProperties
+  : Record<string, unknown>;
+type WorkspaceZoneId = [ZoneId] extends [never] ? string : ZoneId;
+type WorkspaceCardId = [CardId] extends [never] ? string : CardId;
+type WorkspaceCardType = [CardType] extends [never] ? string : CardType;
+
+// ZoneCardRenderItem is a discriminated union (hidden: true | false).
+// A bare Omit<..., "zone"> would collapse the union to its common keys and
+// strip cardType / properties from the hydrated branch, defeating the
+// discriminated-union narrowing the SDK contract promises. Distribute Omit
+// across the union so each branch keeps its own shape.
+type WorkspaceZoneCard = ZoneCardRenderItem<
+  WorkspaceCardId & string,
+  WorkspaceCardType & string,
+  WorkspaceCardProperties
+> extends infer Item
+  ? Item extends { zone: string }
+    ? Omit<Item, "zone"> & { zone: WorkspaceZoneId }
+    : never
+  : never;
+
+type WorkspaceZone = Omit<
+  DreamboardUI<typeof uiContract>["Zone"],
+  "CardAt" | "TopCard" | "List" | "PileCards"
+> & {
+  CardAt(
+    props: Omit<ZoneCardAtProps<WorkspaceZoneId>, "zone" | "children"> & {
+      zone?: WorkspaceZoneId;
+      children?: ReactNode | ((card: WorkspaceZoneCard) => ReactNode);
+    },
+  ): ReactElement | null;
+  TopCard(
+    props: Omit<
+      ZoneCardAtProps<WorkspaceZoneId>,
+      "zone" | "index" | "children"
+    > & {
+      zone?: WorkspaceZoneId;
+      children?: ReactNode | ((card: WorkspaceZoneCard) => ReactNode);
+    },
+  ): ReactElement | null;
+  List(
+    props: Omit<ZoneListProps, "children"> & {
+      children?: ReactNode | ((card: WorkspaceZoneCard) => ReactNode);
+    },
+  ): ReactElement;
+  PileCards(
+    props: Omit<ZonePileCardsProps, "renderCard"> & {
+      renderCard: (card: WorkspaceZoneCard) => ReactNode;
+    },
+  ): ReactElement | null;
+};
+
+type WorkspaceUI = Omit<
+  DreamboardUI<typeof uiContract>,
+  "Root" | "Game" | "Interaction" | "Board" | "Zone"
+> & {
+  Root(props: UIRootProps): ReactElement;
+  readonly Game: TypedGame<typeof uiContract, GameView, PlayerId, PhaseName>;
+  readonly Interaction: Omit<
+    DreamboardUI<typeof uiContract>["Interaction"],
+    "Switch"
+  > & {
+    Switch(props: InteractionSwitchProps): ReactElement;
+  };
+  readonly Board: WorkspaceBoard;
+  readonly Zone: WorkspaceZone;
+  readonly ResourceCounter: ResourceCounterComponents<ResourceId>;
+};
+
+const baseUI = createDreamboardUI(uiContract);
+
+const resourcePresentationById = literals.resourcePresentationById as Partial<
+  Record<string, { label?: string; icon?: string }>
+>;
+
+const resourceDisplayConfig = literals.resourceIds.map((resource) => {
+  const resourceId = resource as ResourceId;
+  const presentation = resourcePresentationById[resource as string];
+  return {
+    type: resourceId,
+    label: presentation?.label ?? resource,
+    icon: presentation?.icon ?? resource,
+  };
+}) satisfies readonly ResourceDisplayConfig<ResourceId>[];
+
+const resourceCounter = createResourceCounter<ResourceId>(resourceDisplayConfig);
+
+export const Board: WorkspaceUI["Board"] = {
+  ...baseUI.Board,
+	  HexView<
+	    const Id extends HexBoardId,
+	    const TSpaceView extends { id: HexBoardSpaceId<Id> },
+	  >({ board: boardId, ...props }: HexBoardViewProps<Id, TSpaceView>) {
+	    return createElement(baseUI.Board.HexView<HexBoardTopology<Id>, TSpaceView>, {
+	      ...props,
+	      board: hexStaticBoards[boardId],
+	    });
+	  },
+	  HexGrid<
+	    const Id extends HexBoardId,
+	    const TSpaceView extends { id: HexBoardSpaceId<Id> },
+	  >({ board: boardId, ...props }: HexBoardGridProps<Id, TSpaceView>) {
+	    return createElement(baseUI.Board.HexGrid<HexBoardTopology<Id>, TSpaceView>, {
+	      ...props,
+	      board: hexStaticBoards[boardId],
+	    });
+	  },
+	} as WorkspaceUI["Board"];
+
+export const UI: WorkspaceUI = {
+  ...baseUI,
+  Board,
+  ResourceCounter: resourceCounter,
+};
+export const Game: WorkspaceUI["Game"] = UI.Game;
+export const Interaction = UI.Interaction;
+export const Prompt = UI.Prompt;
+export const PromptInbox = UI.PromptInbox;
+export const PlayerRoster: WorkspaceUI["PlayerRoster"] = UI.PlayerRoster;
+export const Dice: WorkspaceUI["Dice"] = UI.Dice;
+export const Phase = UI.Phase;
+export const Zone = UI.Zone;
+export const ResourceCounter: WorkspaceUI["ResourceCounter"] = UI.ResourceCounter;
+
+export const clientParamSchemasByPhase = createClientParamSchemasByPhase(
+  game,
+) as ClientParamSchemaMap;
 `;
 }
 
 function generateReducerSupportSeed(): string {
   return `import {
-  createReducerOps,
+  createReducerEdit,
   createStateQueries,
-  pipe,
 } from "@dreamboard/app-sdk/reducer";
 import type { GameState } from "./game-contract";
 
@@ -456,16 +498,12 @@ import type { GameState } from "./game-contract";
  *
  * Recommended authoring pattern inside a phase reducer:
  *
- *   const next = pipe(
- *     state,
- *     ops.setActivePlayers([q.players.order()[0]]),
- *   );
- *   return accept(next);
+ *   const tx = edit(state);
+ *   tx.setActivePlayers([q.players.order()[0]]);
+ *   return accept(tx.state);
  */
 
-export const ops = createReducerOps<GameState>();
-
-export { pipe };
+export const edit = createReducerEdit<GameState>();
 
 export function stateQueries(state: GameState) {
   return createStateQueries(state);
@@ -549,7 +587,7 @@ function generateReducerGameContractSeed(): string {
 import { ids, manifestContract } from "../shared/manifest-contract";
 import { defineGameContract, type GameStateOf } from "@dreamboard/app-sdk/reducer";
 
-// Contract files should stay focused on schemas, phase names, and exported
+// Contract files should stay focused on schemas, phases, and exported
 // state types. Put reducers in app/phases/* and pure computations in
 // app/derived.ts or app/rules/*.
 const publicStateSchema = z.object({
@@ -561,15 +599,14 @@ const hiddenStateSchema = z.object({});
 
 export const gameContract = defineGameContract({
   manifest: manifestContract,
-  // Keep this list in sync with the keys of the \`phases\` record in ./phases.
-  // Declaring phase names here narrows \`fx.transition(...)\`, \`phase.dispatch\`,
-  // and the flow state's \`currentPhase\` to a literal union.
-  phaseNames: ["setup"] as const,
   state: {
     public: publicStateSchema,
     private: privateStateSchema,
     hidden: hiddenStateSchema,
   },
+  phases: {
+    setup: z.object({}),
+  },
 });
 
 export type GameContract = typeof gameContract;
@@ -683,8 +720,10 @@ function generateAppFrameworkTsConfig(): string {
         moduleResolution: "bundler",
         strict: true,
         esModuleInterop: true,
-        skipLibCheck: true,
+        skipLibCheck: false,
+        types: [],
         declaration: false,
+        rootDir: "..",
         outDir: "./dist",
         paths: {
           "@dreamboard/manifest-contract": ["../shared/manifest-contract.ts"],
@@ -706,49 +745,57 @@ function generateAppFrameworkTsConfig(): string {
 }
 
 function generateUiFrameworkTsConfig(): string {
-  return `{
-  "compilerOptions": {
-    "target": "ES2020",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "jsx": "react-jsx",
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "paths": {
-      "@dreamboard/manifest-contract": [
-        "../shared/manifest-contract.ts"
-      ],
-      "@dreamboard/ui-contract": [
-        "../shared/generated/ui-contract.ts"
-      ],
-      "@shared/*": [
-        "../shared/*"
-      ]
-    }
-  },
-  "include": [
-    "./**/*.ts",
-    "./**/*.tsx",
-    "../shared/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist"
-  ]
-}
-`;
+  return `${JSON.stringify(
+    {
+      compilerOptions: {
+        target: "ES2020",
+        module: "ESNext",
+        moduleResolution: "bundler",
+        jsx: "react-jsx",
+        strict: true,
+        esModuleInterop: true,
+        skipLibCheck: false,
+        types: [],
+        paths: {
+          "@dreamboard/manifest-contract": ["../shared/manifest-contract.ts"],
+          "@dreamboard/ui-contract": ["../shared/generated/ui-contract.ts"],
+          "@shared/*": ["../shared/*"],
+        },
+      },
+      include: ["./**/*.ts", "./**/*.tsx", "../shared/**/*.ts"],
+      exclude: ["node_modules", "dist"],
+    },
+    null,
+    2,
+  )}\n`;
 }
 
 function generateReducerUiAppContent(): string {
-  return `import { Phase, PromptInbox } from "@dreamboard/ui-contract";
+  return `import { Game, Phase, Prompt, PromptInbox } from "@dreamboard/ui-contract";
 
 function SetupPhase() {
   return (
     <main>
       <PromptInbox.Root>
         <PromptInbox.Empty>No available prompts.</PromptInbox.Empty>
-        <PromptInbox.Items />
+        <PromptInbox.Items>
+          {(prompt) => (
+            <Prompt.Root
+              key={prompt.interactionKey}
+              interaction={prompt.interactionKey}
+            >
+              <Prompt.Title />
+              <Prompt.Message />
+              <Prompt.Options>
+                {(option) => (
+                  <Prompt.Option value={option.id}>
+                    {option.label ?? option.id}
+                  </Prompt.Option>
+                )}
+              </Prompt.Options>
+            </Prompt.Root>
+          )}
+        </PromptInbox.Items>
       </PromptInbox.Root>
     </main>
   );
@@ -756,11 +803,15 @@ function SetupPhase() {
 
 export default function App() {
   return (
-    <Phase.Switch
-      routes={{
-        setup: () => <SetupPhase />,
-      }}
-    />
+    <Game.Root>
+      {() => (
+        <Phase.Switch
+          routes={{
+            setup: () => <SetupPhase />,
+          }}
+        />
+      )}
+    </Game.Root>
   );
 }
 `;