@dreamboard-games/ui-sdk 0.0.43 → 0.0.45

package/src/primitives/prompt.test.tsx

@@ -132,7 +132,72 @@ test("Prompt options stay actionable when a prompt descriptor is unavailable", (
   expect(html).toContain('data-option-value="decline"');
 });
 
-test("PromptInbox defaults render prompt descriptors and empty state", () => {
+test("Prompt options honor reducer-projected disabled choices", () => {
+  const runtime = createRuntime(
+    createSnapshot([
+      {
+        ...tradePrompt,
+        inputs: [
+          {
+            ...tradePrompt.inputs[0],
+            domain: {
+              type: "choice",
+              choices: [
+                {
+                  value: "accept",
+                  label: "Accept",
+                  disabled: true,
+                  disabledReason: "You cannot afford this trade.",
+                },
+                { value: "decline", label: "Decline" },
+              ],
+            },
+          },
+        ],
+      },
+    ]),
+  );
+
+  const html = renderToString(
+    <GameUIProvider runtime={runtime}>
+      <Prompt.Root interaction="trade.respond">
+        <Prompt.Option value="accept" />
+        <Prompt.Option value="decline" />
+      </Prompt.Root>
+    </GameUIProvider>,
+  );
+
+  expect(html).toContain('data-option-value="accept"');
+  expect(html).toContain('disabled=""');
+  expect(html).toContain(
+    'data-disabled-reason="You cannot afford this trade."',
+  );
+  expect(html).not.toContain('data-option-value="decline" disabled=""');
+});
+
+test("Prompt.Dialog exposes headless lifecycle state without chrome", () => {
+  const html = renderToString(
+    <Prompt.Dialog prompt="trade.respond" defaultOpen={false}>
+      {({ prompt, open, minimized, dismissed, state }) => (
+        <span
+          data-prompt={prompt}
+          data-open={open}
+          data-minimized={minimized}
+          data-dismissed={dismissed}
+          data-state={state}
+        />
+      )}
+    </Prompt.Dialog>,
+  );
+
+  expect(html).toContain('data-prompt="trade.respond"');
+  expect(html).toContain('data-open="false"');
+  expect(html).toContain('data-minimized="true"');
+  expect(html).toContain('data-dismissed="false"');
+  expect(html).toContain('data-state="minimized"');
+});
+
+test("PromptInbox renders prompt descriptors through author-owned composition", () => {
   const populatedRuntime = createRuntime(createSnapshot([tradePrompt]));
   const emptyRuntime = createRuntime(createSnapshot([]));
 
@@ -140,7 +205,24 @@ test("PromptInbox defaults render prompt descriptors and empty state", () => {
     <GameUIProvider runtime={populatedRuntime}>
       <PromptInbox.Root>
         <PromptInbox.Empty>No 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>
     </GameUIProvider>,
   );
@@ -148,7 +230,16 @@ test("PromptInbox defaults render prompt descriptors and empty state", () => {
     <GameUIProvider runtime={emptyRuntime}>
       <PromptInbox.Root>
         <PromptInbox.Empty>No prompts</PromptInbox.Empty>
-        <PromptInbox.Items />
+        <PromptInbox.Items>
+          {(prompt) => (
+            <Prompt.Root
+              key={prompt.interactionKey}
+              interaction={prompt.interactionKey}
+            >
+              <Prompt.Title />
+            </Prompt.Root>
+          )}
+        </PromptInbox.Items>
       </PromptInbox.Root>
     </GameUIProvider>,
   );

package/src/primitives/prompt.tsx

@@ -1,6 +1,8 @@
 import {
+  Fragment,
   createContext,
   useContext,
+  useMemo,
   type ButtonHTMLAttributes,
   type ReactNode,
 } from "react";
@@ -22,6 +24,15 @@ import {
   renderPrimitive,
   type PrimitiveCommonProps,
 } from "./primitive-props.js";
+import {
+  submitInteractionParams,
+  type InteractionSubmitCallbacks,
+} from "./interaction-submit.js";
+import {
+  useDialogLifecycle,
+  type DialogLifecycleState,
+} from "./dialog-lifecycle.js";
+import { useGameActionError } from "./game.js";
 
 export type PromptRootProps<Prompt extends string = PromptKey> =
   InteractionRootProps<Prompt>;
@@ -59,8 +70,8 @@ export type PromptOptionProps<Option extends string = PromptOptionKey> =
     ButtonHTMLAttributes<HTMLButtonElement> & {
       value: Option;
       disableWhenUnavailable?: boolean;
-      onSubmitError?: (error: unknown) => void;
-      onSubmitSuccess?: () => void;
+      onSubmitError?: InteractionSubmitCallbacks["onSubmitError"];
+      onSubmitSuccess?: InteractionSubmitCallbacks["onSubmitSuccess"];
     };
 
 export function PromptOption<Option extends string = PromptOptionKey>({
@@ -74,16 +85,20 @@ export function PromptOption<Option extends string = PromptOptionKey>({
   ...props
 }: PromptOptionProps<Option>) {
   const { descriptor, handle } = useInteractionPrimitiveContext();
+  const gameActionError = useGameActionError();
   const option = descriptor?.context?.options?.find(
     (candidate) => candidate.id === value,
   );
   const inputKey = descriptor ? interactionInputKeys(descriptor)[0] : undefined;
+  const choice = descriptor?.inputs
+    .find((input) => input.key === inputKey)
+    ?.domain.choices?.find((candidate) => candidate.value === value);
   const isDisabled =
     disabled ??
     (!handle ||
       !inputKey ||
       handle.status !== "open" ||
-      option?.data === false ||
+      choice?.disabled === true ||
       (disableWhenUnavailable && !descriptor?.available));
   return renderPrimitive("button", {
     type: "button",
@@ -94,43 +109,83 @@ export function PromptOption<Option extends string = PromptOptionKey>({
     "data-option-value": value,
     "data-disabled": isDisabled || undefined,
     "data-available": descriptor?.available ?? false,
+    "data-disabled-reason": choice?.disabledReason,
+    title: props.title ?? choice?.disabledReason,
     onClick: composeEventHandlers(onClick, () => {
       if (!handle || !inputKey || isDisabled) return;
-      void handle
-        .submit({ [inputKey]: value })
-        .then(() => onSubmitSuccess?.())
-        .catch((error: unknown) => {
-          if (onSubmitError) {
-            onSubmitError(error);
-            return;
-          }
-          console.error(error);
-        });
+      void submitInteractionParams(
+        handle,
+        { [inputKey]: value },
+        {
+          onSubmitSuccess,
+          onSubmitError: onSubmitError ?? gameActionError ?? undefined,
+        },
+        { unhandledError: "log" },
+      );
     }),
     children: children ?? option?.label ?? value,
   });
 }
 
-export function PromptOptions({
-  children,
-}: {
-  children?: (option: { id: string; label?: string }) => ReactNode;
-}) {
+export interface PromptOptionRenderItem {
+  id: string;
+  label?: string;
+}
+
+export interface PromptOptionsProps {
+  children: (option: PromptOptionRenderItem) => ReactNode;
+}
+
+export function PromptOptions({ children }: PromptOptionsProps) {
   const { descriptor } = useInteractionPrimitiveContext();
   const options = descriptor?.context?.options ?? [];
   return (
     <>
-      {options.map((option) =>
-        children ? (
-          children(option)
-        ) : (
-          <PromptOption key={option.id} value={option.id} />
-        ),
-      )}
+      {options.map((option) => (
+        <Fragment key={option.id}>{children(option)}</Fragment>
+      ))}
     </>
   );
 }
 
+export type PromptDialogState = DialogLifecycleState;
+
+export interface PromptDialogRenderState<Prompt extends string = PromptKey> {
+  prompt: Prompt;
+  state: PromptDialogState;
+  open: boolean;
+  minimized: boolean;
+  dismissed: boolean;
+  setOpen: (open: boolean) => void;
+  restore: () => void;
+  minimize: () => void;
+  dismiss: () => void;
+}
+
+export interface PromptDialogProps<Prompt extends string = PromptKey> {
+  prompt: Prompt;
+  defaultOpen?: boolean;
+  onStateChange?: (state: PromptDialogState) => void;
+  children: (state: PromptDialogRenderState<Prompt>) => ReactNode;
+}
+
+export function PromptDialog<Prompt extends string = PromptKey>({
+  prompt,
+  defaultOpen = true,
+  onStateChange,
+  children,
+}: PromptDialogProps<Prompt>) {
+  const lifecycle = useDialogLifecycle({ defaultOpen, onStateChange });
+  const renderState = useMemo<PromptDialogRenderState<Prompt>>(
+    () => ({
+      prompt,
+      ...lifecycle,
+    }),
+    [lifecycle, prompt],
+  );
+  return <>{children(renderState)}</>;
+}
+
 interface PromptInboxContextValue {
   prompts: readonly InteractionDescriptor[];
 }
@@ -162,30 +217,13 @@ export function PromptInboxEmpty({ children }: { children?: ReactNode }) {
   return <>{children}</>;
 }
 
-export function PromptInboxItems({
-  children,
-}: {
-  children?: (prompt: InteractionDescriptor) => ReactNode;
-}) {
+export interface PromptInboxItemsProps {
+  children: (prompt: InteractionDescriptor) => ReactNode;
+}
+
+export function PromptInboxItems({ children }: PromptInboxItemsProps) {
   const { prompts } = usePromptInboxContext();
-  return (
-    <>
-      {prompts.map((prompt) =>
-        children ? (
-          children(prompt)
-        ) : (
-          <PromptRoot
-            key={prompt.interactionKey}
-            interaction={prompt.interactionKey}
-          >
-            <PromptTitle />
-            <PromptMessage />
-            <PromptOptions />
-          </PromptRoot>
-        ),
-      )}
-    </>
-  );
+  return <>{prompts.map((prompt) => children(prompt))}</>;
 }
 
 export const Prompt = {
@@ -194,6 +232,7 @@ export const Prompt = {
   Message: PromptMessage,
   Option: PromptOption,
   Options: PromptOptions,
+  Dialog: PromptDialog,
 };
 
 export const PromptInbox = {

package/src/primitives/ui.test.tsx

@@ -0,0 +1,131 @@
+import { expect, mock, test } from "bun:test";
+import { renderToString } from "react-dom/server";
+import { createInteractionUiStore } from "../context/InteractionDraftContext.js";
+import {
+  useInteractionHandle,
+  type InteractionHandle,
+} from "../hooks/useInteractionHandle.js";
+import type { PluginStateSnapshot } from "../types/plugin-state.js";
+import type { PluginSessionState, RuntimeAPI } from "../types/runtime-api.js";
+import { GameUIProvider } from "./game-ui-provider.js";
+import { UI } from "./ui.js";
+
+function createSessionState(): PluginSessionState {
+  return {
+    status: "ready",
+    sessionId: "session-1",
+    controllablePlayerIds: ["player-1"],
+    controllingPlayerId: "player-1",
+    userId: "user-1",
+  };
+}
+
+function createSnapshot(): PluginStateSnapshot {
+  return {
+    view: {},
+    gameplay: {
+      currentPhase: "playing",
+      currentStage: null,
+      activePlayers: ["player-1"],
+      zones: {},
+      availableInteractions: [
+        {
+          phaseName: "playing",
+          interactionKey: "playing.moveRaider",
+          interactionId: "moveRaider",
+          kind: "action",
+          inputs: [
+            {
+              key: "spaceId",
+              kind: "board-space",
+              domain: {
+                type: "target",
+                targetKind: "space",
+                eligibleTargets: ["space-1"],
+              },
+            },
+            {
+              key: "stealFromPlayerId",
+              kind: "form",
+              domain: {
+                type: "choice",
+                choices: [{ value: "player-2", label: "Player 2" }],
+                dependsOn: ["spaceId"],
+              },
+            },
+          ],
+          commit: { mode: "autoWhenReady" },
+          available: true,
+        },
+      ],
+    },
+    lobby: null,
+    notifications: [],
+    session: createSessionState(),
+    history: null,
+    syncId: 1,
+  };
+}
+
+function createRuntime(snapshot: PluginStateSnapshot): RuntimeAPI {
+  return {
+    validateInteraction: async () => ({ valid: true }),
+    submitInteraction: mock(async () => undefined),
+    getSessionState: () => snapshot.session,
+    disconnect: () => undefined,
+    getSnapshot: () => snapshot,
+    subscribeToState: () => () => undefined,
+  } as RuntimeAPI;
+}
+
+test("UI.Root renders children without owning interaction routing", () => {
+  const runtime = createRuntime(createSnapshot());
+  const interactionStore = createInteractionUiStore();
+  interactionStore.setInput("playing.moveRaider", "spaceId", "space-1");
+  interactionStore.setPendingInteraction("playing.moveRaider");
+
+  const html = renderToString(
+    <GameUIProvider runtime={runtime} interactionStore={interactionStore}>
+      <UI.Root>
+        <main>Board</main>
+      </UI.Root>
+    </GameUIProvider>,
+  ).replace(/<!-- -->/g, "");
+
+  expect(html).toContain("<main>Board</main>");
+  expect(html).not.toContain("stealFromPlayerId");
+});
+
+test("pending interaction is cleared when the draft submits through the interaction handle", async () => {
+  const runtime = createRuntime(createSnapshot());
+  const interactionStore = createInteractionUiStore();
+  interactionStore.setInput("playing.moveRaider", "spaceId", "space-1");
+  interactionStore.setInput(
+    "playing.moveRaider",
+    "stealFromPlayerId",
+    "player-2",
+  );
+  interactionStore.setPendingInteraction("playing.moveRaider");
+  let handle: InteractionHandle | null = null;
+
+  function Probe() {
+    const descriptor = runtime
+      .getSnapshot()
+      .gameplay.availableInteractions.find(
+        (candidate) => candidate.interactionKey === "playing.moveRaider",
+      );
+    if (!descriptor) throw new Error("missing descriptor");
+    handle = useInteractionHandle(descriptor);
+    return null;
+  }
+
+  renderToString(
+    <GameUIProvider runtime={runtime} interactionStore={interactionStore}>
+      <Probe />
+    </GameUIProvider>,
+  );
+
+  await handle?.submitDraft();
+
+  expect(interactionStore.getPendingInteraction()).toBeNull();
+});

package/src/primitives/ui.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+
+export interface UIRootProps {
+  children: ReactNode;
+}
+
+export function UIRoot({ children }: UIRootProps) {
+  return <>{children}</>;
+}
+
+export const UI = {
+  Root: UIRoot,
+};