@dreamboard-games/ui-sdk 0.0.42 → 0.0.45

package/src/components/surfaces/internal/useCardZoneInteractions.ts

@@ -9,14 +9,17 @@ import type {
   ZoneHandlesSnapshot,
 } from "../../../types/plugin-state.js";
 import {
-  hasInteractionFieldErrors,
   inputByTarget,
-  interactionArmScope,
   interactionInputKeys,
-  isInputValueReady,
   toggleManyValue,
-  validateInteractionInputDomains,
 } from "../../../utils/interaction-inputs.js";
+import {
+  applyInteractionDraftMutation,
+  clearInteractionRoute,
+  getInteractionDraftReadiness,
+  markInteractionPending,
+  shouldRouteInteractionPending,
+} from "../../../utils/interaction-router.js";
 import type {
   InteractionActionState,
   InteractionDisabledReason,
@@ -42,9 +45,8 @@ export function useCardZoneInteractions<I extends string = string>(
   const draftStore = useInteractionUiStore();
   const draftSnapshot = useStore(draftStore, (state) => state.drafts);
   const submittingSnapshot = useStore(draftStore, (state) => state.submitting);
-  const [followUp, setFollowUp] = useState<InteractionDescriptor<I> | null>(
-    null,
-  );
+  const [routedInteraction, setRoutedInteraction] =
+    useState<InteractionDescriptor<I> | null>(null);
   const zone = usePluginState((s) => s.gameplay.zones?.[zoneId]) as
     | ZoneHandlesSnapshot<I>
     | undefined;
@@ -79,11 +81,7 @@ export function useCardZoneInteractions<I extends string = string>(
           descriptor.interactionId,
           params,
         );
-        draftStore.clearInput(descriptor.interactionKey);
-        const armScope = interactionArmScope(descriptor);
-        if (draftStore.getArmed(armScope) === descriptor.interactionKey) {
-          draftStore.arm(armScope, null);
-        }
+        clearInteractionRoute(draftStore, descriptor);
       } finally {
         draftStore.setSubmitting(descriptor.interactionKey, false);
       }
@@ -111,37 +109,20 @@ export function useCardZoneInteractions<I extends string = string>(
               cardInput.domain.selection,
             )
           : card.id;
-      const nextDraft: Record<string, unknown> = {
-        ...currentDraft,
-        ...(params ?? {}),
-        [cardInputKey]: nextCardValue,
-      };
-      for (const [key, value] of Object.entries(params ?? {})) {
-        draftStore.setInput(descriptor.interactionKey, key, value);
-      }
-      draftStore.setInput(
-        descriptor.interactionKey,
-        cardInputKey,
-        nextCardValue,
-      );
+      const nextDraft = applyInteractionDraftMutation(draftStore, descriptor, [
+        ...Object.entries(params ?? {}).map(([key, value]) => ({ key, value })),
+        { key: cardInputKey, value: nextCardValue },
+      ]);
+      const readiness = getInteractionDraftReadiness(descriptor, nextDraft);
       if (
         cardInput.domain.type === "target" &&
         cardInput.domain.selection?.mode === "many"
       ) {
-        if (
-          descriptor.commit.mode === "autoWhenReady" &&
-          isDraftReady(descriptor, nextDraft)
-        ) {
+        if (descriptor.commit.mode === "autoWhenReady" && readiness.ready) {
           await submitInteractionDraft(descriptor, nextDraft);
         }
         return;
       }
-      const remaining = descriptor.inputs.filter((input) => {
-        const value =
-          nextDraft[input.key] ??
-          ("defaultValue" in input ? input.defaultValue : undefined);
-        return input.key !== cardInputKey && value === undefined;
-      });
       const needsBoardTarget = descriptor.inputs.some((input) => {
         const value =
           nextDraft[input.key] ??
@@ -153,26 +134,18 @@ export function useCardZoneInteractions<I extends string = string>(
         );
       });
       if (needsBoardTarget) {
-        setFollowUp(null);
-        draftStore.arm(
-          interactionArmScope(descriptor),
-          descriptor.interactionKey,
-        );
+        setRoutedInteraction(null);
+        markInteractionPending(draftStore, descriptor);
+        draftStore.setPendingInteraction(null);
         return;
       }
-      if (remaining.length > 0) {
-        setFollowUp(descriptor);
+      if (readiness.missingInputs.length > 0) {
+        setRoutedInteraction(descriptor);
         return;
       }
-      if (
-        !isDraftReady(descriptor, nextDraft) ||
-        descriptor.commit.mode !== "autoWhenReady"
-      ) {
-        setFollowUp(null);
-        draftStore.arm(
-          interactionArmScope(descriptor),
-          descriptor.interactionKey,
-        );
+      if (shouldRouteInteractionPending(descriptor, readiness)) {
+        setRoutedInteraction(null);
+        markInteractionPending(draftStore, descriptor);
         return;
       }
       await submitInteractionDraft(descriptor, nextDraft);
@@ -252,7 +225,7 @@ export function useCardZoneInteractions<I extends string = string>(
     zone,
   ]);
 
-  return { cards, contexts, followUp, setFollowUp };
+  return { cards, contexts, routedInteraction, setRoutedInteraction };
 }
 
 function isCardSelected(
@@ -283,21 +256,6 @@ function isCardInteractionSelectable(
   return selection.max === undefined || current.length < selection.max;
 }
 
-function isDraftReady(
-  descriptor: InteractionDescriptor,
-  draft: Readonly<Record<string, unknown>>,
-): boolean {
-  const fieldErrors = validateInteractionInputDomains(descriptor, draft);
-  if (hasInteractionFieldErrors(fieldErrors)) return false;
-  return interactionInputKeys(descriptor).every((key) => {
-    const input = descriptor.inputs.find((candidate) => candidate.key === key);
-    const value =
-      draft[key] ??
-      (input && "defaultValue" in input ? input.defaultValue : undefined);
-    return input ? isInputValueReady(input, value) : value !== undefined;
-  });
-}
-
 function resolveCardInput(
   descriptor: InteractionDescriptor,
   cardId: string,

package/src/context/InteractionDraftContext.tsx

@@ -11,10 +11,11 @@ interface DraftState {
   drafts: Readonly<Record<string, Draft>>;
   arms: Readonly<Record<string, string>>;
   submitting: Readonly<Record<string, true>>;
+  pendingInteractionKey: string | null;
 }
 
 /**
- * Imperative API exposed to `useInteractionHandle` and `<BoardSurface>`.
+ * Imperative API exposed to interaction primitives.
  * Intentionally small; the vanilla zustand store underneath powers
  * fine-grained subscriptions via {@link useDraft} and {@link useArmed}.
  */
@@ -31,8 +32,14 @@ export interface InteractionUiStore {
   getArmed(surface: string): string | null;
   /** Arm a specific interaction on a surface. Pass `null` to disarm. */
   arm(surface: string, interactionId: string | null): void;
+  /** Which interaction draft currently needs route-owned remaining input UI. */
+  getPendingInteraction(): string | null;
+  /** Mark the interaction draft currently waiting for remaining input. */
+  setPendingInteraction(interactionId: string | null): void;
   /** True while a local submission is in flight before the host echo arrives. */
   isSubmitting(interactionId: string): boolean;
+  /** Atomically mark a submission in flight. Returns false if already busy. */
+  claimSubmitting(interactionId: string): boolean;
   /** Mark or clear a local submission in flight. */
   setSubmitting(interactionId: string, submitting: boolean): void;
 }
@@ -45,6 +52,7 @@ export function createInteractionUiStore(): InteractionUiStoreApi {
     drafts: {},
     arms: {},
     submitting: {},
+    pendingInteractionKey: null,
   }));
 
   const api: InteractionUiStore = {
@@ -89,11 +97,17 @@ export function createInteractionUiStore(): InteractionUiStoreApi {
         if (
           Object.keys(prev.drafts).length === 0 &&
           Object.keys(prev.arms).length === 0 &&
-          Object.keys(prev.submitting).length === 0
+          Object.keys(prev.submitting).length === 0 &&
+          prev.pendingInteractionKey === null
         ) {
           return prev;
         }
-        return { drafts: {}, arms: {}, submitting: {} };
+        return {
+          drafts: {},
+          arms: {},
+          submitting: {},
+          pendingInteractionKey: null,
+        };
       });
     },
     getArmed(surface) {
@@ -110,9 +124,30 @@ export function createInteractionUiStore(): InteractionUiStoreApi {
         return { ...prev, arms: { ...prev.arms, [surface]: interactionId } };
       });
     },
+    getPendingInteraction() {
+      return store.getState().pendingInteractionKey;
+    },
+    setPendingInteraction(interactionId) {
+      store.setState((prev) => {
+        if (prev.pendingInteractionKey === interactionId) return prev;
+        return { ...prev, pendingInteractionKey: interactionId };
+      });
+    },
     isSubmitting(interactionId) {
       return store.getState().submitting[interactionId] === true;
     },
+    claimSubmitting(interactionId) {
+      let claimed = false;
+      store.setState((prev) => {
+        if (prev.submitting[interactionId] === true) return prev;
+        claimed = true;
+        return {
+          ...prev,
+          submitting: { ...prev.submitting, [interactionId]: true },
+        };
+      });
+      return claimed;
+    },
     setSubmitting(interactionId, submitting) {
       store.setState((prev) => {
         const current = prev.submitting[interactionId] === true;
@@ -143,7 +178,7 @@ const InteractionUiCtx = createContext<InteractionUiStoreApi | null>(null);
  * ```tsx
  * <InteractionUiProvider>
  *   <PanelSurface />
- *   <BoardSurface>{(ctx) => <Board ctx={ctx} />}</BoardSurface>
+ *   <Board.Root>{...}</Board.Root>
  * </InteractionUiProvider>
  * ```
  */
@@ -180,12 +215,13 @@ export function useInteractionUiStore(): InteractionUiStoreApi {
  */
 export function useInteractionDraft(interactionId: string): Draft {
   const store = useInteractionUiStore();
-  return useStore(
+  useStore(
     store,
     useShallow(
       (state: DraftState) => state.drafts[interactionId] ?? EMPTY_DRAFT,
     ),
   );
+  return store.getDraft(interactionId);
 }
 
 /** Subscribe to the armed interaction id on a given surface. */
@@ -194,6 +230,16 @@ export function useArmedInteraction(surface: string): string | null {
   return useStore(store, (state: DraftState) => state.arms[surface] ?? null);
 }
 
+/** Subscribe to the interaction draft currently waiting for pending input. */
+export function usePendingInteractionKey(): string | null {
+  const store = useInteractionUiStore();
+  const subscribed = useStore(
+    store,
+    (state: DraftState) => state.pendingInteractionKey ?? null,
+  );
+  return store.getPendingInteraction() ?? subscribed;
+}
+
 /** Subscribe to local submitting status for a single interaction key. */
 export function useInteractionSubmitting(interactionId: string): boolean {
   const store = useInteractionUiStore();

package/src/defaults/components.tsx

@@ -6,8 +6,6 @@ import type {
 } from "react";
 import {
   Interaction,
-  Prompt,
-  PromptInbox,
   Zone,
   renderPrimitive,
   useInteractionPrimitiveContext,
@@ -127,49 +125,6 @@ export const GameLayout = {
   Bottom: GameLayoutBottom,
 };
 
-export interface DefaultPromptInboxProps extends PrimitiveCommonProps {
-  empty?: ReactNode;
-  renderPrompt?: (prompt: InteractionDescriptor) => ReactNode;
-}
-
-export function DefaultPromptInbox({
-  empty = "No available prompts.",
-  renderPrompt,
-  ...props
-}: DefaultPromptInboxProps) {
-  return (
-    <PromptInbox.Root>
-      {renderPrimitive("section", {
-        ...props,
-        "data-dreamboard-default-prompt-inbox": "",
-        children: (
-          <>
-            <PromptInbox.Empty>{empty}</PromptInbox.Empty>
-            <PromptInbox.Items>
-              {(prompt) =>
-                renderPrompt ? (
-                  renderPrompt(prompt)
-                ) : (
-                  <Prompt.Root
-                    key={prompt.interactionKey}
-                    interaction={prompt.interactionKey}
-                  >
-                    <Prompt.Title />
-                    <Prompt.Message />
-                    <div data-dreamboard-default-prompt-options="">
-                      <Prompt.Options />
-                    </div>
-                  </Prompt.Root>
-                )
-              }
-            </PromptInbox.Items>
-          </>
-        ),
-      })}
-    </PromptInbox.Root>
-  );
-}
-
 export interface DefaultInteractionListProps extends PrimitiveCommonProps {
   empty?: ReactNode;
   includeUnavailable?: boolean;
@@ -298,23 +253,30 @@ function DefaultInteractionField({
 function DefaultChoiceField({ input }: { input: InteractionInputDescriptor }) {
   const { handle } = useInteractionPrimitiveContext();
   const value = handle?.draft[input.key] ?? handle?.values[input.key];
+  const encodeValue = (candidate: unknown) =>
+    candidate === null ? "__dreamboard_null_choice__" : String(candidate);
   return (
     <label data-dreamboard-default-interaction-field="">
       {input.key}
       <select
         name={input.key}
-        value={value === undefined ? "" : String(value)}
+        value={value === undefined ? "" : encodeValue(value)}
         data-dreamboard-default-choice-input=""
         disabled={!handle?.available}
         onChange={(event) =>
-          handle?.setInput(input.key, event.currentTarget.value)
+          handle?.setInput(
+            input.key,
+            event.currentTarget.value === "__dreamboard_null_choice__"
+              ? null
+              : event.currentTarget.value,
+          )
         }
       >
         <option value="" />
         {(input.domain.choices ?? []).map((choice) => (
           <option
-            key={choice.value}
-            value={choice.value}
+            key={encodeValue(choice.value)}
+            value={encodeValue(choice.value)}
             disabled={choice.disabled}
           >
             {choice.label}
@@ -399,7 +361,7 @@ function DefaultZoneList({
         return (
           <Zone.Item key={cardId} card={cardId}>
             {input ? (
-              <Interaction.CardInput input={input} card={cardId}>
+              <Interaction.CardInput input={input}>
                 {body}
               </Interaction.CardInput>
             ) : (

package/src/defaults/defaults.test.tsx

@@ -7,12 +7,7 @@ import type {
 } from "../types/plugin-state.js";
 import type { PluginSessionState, RuntimeAPI } from "../types/runtime-api.js";
 import { GameUIProvider } from "../primitives/game-ui-provider.js";
-import {
-  DefaultInteractionList,
-  DefaultPromptInbox,
-  DefaultZone,
-  GameLayout,
-} from "./index.js";
+import { DefaultInteractionList, DefaultZone, GameLayout } from "./index.js";
 
 function createSessionState(): PluginSessionState {
   return {
@@ -66,50 +61,6 @@ function renderWithRuntime(
   );
 }
 
-test("DefaultPromptInbox composes PromptInbox and Prompt primitives", () => {
-  const prompt: InteractionDescriptor = {
-    phaseName: "trading",
-    interactionKey: "trading.respond",
-    interactionId: "respond",
-    kind: "prompt",
-    inputs: [
-      {
-        key: "response",
-        kind: "choice",
-        domain: {
-          type: "choice",
-          choices: [
-            { value: "accept", label: "Accept" },
-            { value: "decline", label: "Decline" },
-          ],
-        },
-      },
-    ],
-    commit: { mode: "manual" },
-    available: true,
-    context: {
-      to: "player-1",
-      title: "Trade offer",
-      payload: { message: "Two wheat for one ore?" },
-      options: [
-        { id: "accept", label: "Accept" },
-        { id: "decline", label: "Decline" },
-      ],
-    },
-  };
-
-  const html = renderWithRuntime(
-    { availableInteractions: [prompt] },
-    <DefaultPromptInbox />,
-  );
-
-  expect(html).toContain('data-dreamboard-default-prompt-inbox=""');
-  expect(html).toContain("Trade offer");
-  expect(html).toContain("Two wheat for one ore?");
-  expect(html).toContain('data-dreamboard-prompt-option=""');
-  expect(html).toContain('data-option-value="accept"');
-});
-
 test("DefaultInteractionList renders action items without descriptor style metadata", () => {
   const ready: InteractionDescriptor = {
     phaseName: "setup",