@dreamboard-games/ui-sdk 0.0.43 → 0.0.45

package/src/components/ErrorBoundary.tsx

@@ -4,7 +4,12 @@
  * Catches React errors and displays a fallback UI
  */
 
-import { Component, type ReactNode, type ErrorInfo } from "react";
+import {
+  Component,
+  type CSSProperties,
+  type ReactNode,
+  type ErrorInfo,
+} from "react";
 import { AlertTriangle, RefreshCw } from "lucide-react";
 
 export interface ErrorBoundaryProps {
@@ -66,35 +71,123 @@ function DefaultErrorFallback({
   error: Error;
   onReset: () => void;
 }) {
+  const styles = {
+    shell: {
+      alignItems: "center",
+      background: "#fdfbf7",
+      boxSizing: "border-box",
+      color: "#0f172a",
+      display: "flex",
+      justifyContent: "center",
+      minHeight: "100vh",
+      padding: "24px",
+    },
+    panel: {
+      background: "#fff",
+      border: "2px solid #0f172a",
+      borderRadius: "12px",
+      boxShadow: "6px 6px 0 #111827",
+      boxSizing: "border-box",
+      maxWidth: "520px",
+      padding: "28px",
+      width: "100%",
+    },
+    iconWrap: {
+      alignItems: "center",
+      background: "#fee2e2",
+      border: "2px solid #991b1b",
+      borderRadius: "999px",
+      display: "flex",
+      height: "56px",
+      justifyContent: "center",
+      marginBottom: "18px",
+      width: "56px",
+    },
+    eyebrow: {
+      color: "#991b1b",
+      fontSize: "12px",
+      fontWeight: 800,
+      letterSpacing: "0.08em",
+      margin: "0 0 8px",
+      textTransform: "uppercase",
+    },
+    title: {
+      fontSize: "28px",
+      fontWeight: 900,
+      lineHeight: 1.1,
+      margin: "0 0 12px",
+    },
+    body: {
+      color: "#475569",
+      fontSize: "15px",
+      lineHeight: 1.5,
+      margin: "0 0 20px",
+    },
+    details: {
+      marginBottom: "22px",
+    },
+    summary: {
+      color: "#334155",
+      cursor: "pointer",
+      fontSize: "14px",
+      fontWeight: 700,
+      marginBottom: "8px",
+    },
+    pre: {
+      background: "#f8fafc",
+      border: "1px solid #cbd5e1",
+      borderRadius: "8px",
+      color: "#334155",
+      fontSize: "12px",
+      lineHeight: 1.45,
+      margin: 0,
+      maxHeight: "180px",
+      overflow: "auto",
+      padding: "12px",
+      whiteSpace: "pre-wrap",
+    },
+    button: {
+      alignItems: "center",
+      background: "#0f172a",
+      border: "2px solid #0f172a",
+      borderRadius: "8px",
+      boxShadow: "3px 3px 0 #111827",
+      color: "#fff",
+      cursor: "pointer",
+      display: "inline-flex",
+      fontSize: "15px",
+      fontWeight: 800,
+      gap: "8px",
+      justifyContent: "center",
+      padding: "12px 16px",
+      width: "100%",
+    },
+  } satisfies Record<string, CSSProperties>;
+
   return (
-    <div
-      className="min-h-screen flex items-center justify-center p-4 sm:p-8 bg-gradient-to-br from-red-50 to-orange-50"
-      role="alert"
-      aria-live="assertive"
-    >
-      <div className="max-w-md w-full bg-white rounded-2xl shadow-xl p-6 sm:p-8">
-        <div className="flex items-center justify-center w-16 h-16 mx-auto mb-4 bg-red-100 rounded-full">
+    <div style={styles.shell} role="alert" aria-live="assertive">
+      <div style={styles.panel}>
+        <div style={styles.iconWrap}>
           <AlertTriangle
-            size={32}
-            className="text-red-600"
+            size={28}
+            color="#991b1b"
+            strokeWidth={2.5}
             aria-hidden="true"
           />
         </div>
 
-        <h1 className="text-xl sm:text-2xl font-bold text-center text-slate-900 mb-2">
-          Something went wrong
-        </h1>
+        <p style={styles.eyebrow}>Runtime error</p>
+
+        <h1 style={styles.title}>Game failed to start</h1>
 
-        <p className="text-sm sm:text-base text-slate-600 text-center mb-6">
+        <p style={styles.body}>
           The game encountered an error and couldn&apos;t continue. You can try
           reloading to start fresh.
         </p>
 
-        <details className="mb-6">
-          <summary className="cursor-pointer text-sm text-slate-500 hover:text-slate-700 mb-2">
-            Technical details
-          </summary>
-          <pre className="text-xs bg-slate-50 text-slate-700 p-3 rounded-lg overflow-auto max-h-40 border border-slate-200">
+        <details style={styles.details}>
+          <summary style={styles.summary}>Technical details</summary>
+          <pre style={styles.pre}>
             {error.message}
             {error.stack && (
               <>
@@ -105,11 +198,7 @@ function DefaultErrorFallback({
           </pre>
         </details>
 
-        <button
-          type="button"
-          onClick={onReset}
-          className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white font-medium rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
-        >
+        <button type="button" onClick={onReset} style={styles.button}>
           <RefreshCw size={18} aria-hidden="true" />
           Try again
         </button>

package/src/components/InteractionForm.test.tsx

@@ -66,6 +66,7 @@ function renderForm(
       <InteractionForm
         descriptor={descriptor}
         handle={createHandle(descriptor, values)}
+        accordion={false}
       />
     </ThemeProvider>,
   );
@@ -117,6 +118,29 @@ test("InteractionForm renders choice select values with icons", () => {
   expect(html).toContain("Wood");
 });
 
+test("InteractionForm renders explicit null choice defaults", () => {
+  const descriptor = createDescriptor([
+    {
+      key: "bonus",
+      kind: "form",
+      defaultValue: null,
+      domain: {
+        type: "choice",
+        choices: [
+          { value: null, label: "No bonus" },
+          { value: "coin", label: "Coin" },
+          { value: "card", label: "Card" },
+          { value: "point", label: "Point" },
+        ],
+      },
+    },
+  ]);
+
+  const html = renderForm(descriptor, { bonus: null });
+
+  expect(html).toContain("No bonus");
+});
+
 test("InteractionForm renders choice badges and selected descriptions", () => {
   const descriptor = createDescriptor([
     {

package/src/components/InteractionForm.tsx

@@ -30,6 +30,10 @@ import type {
   InputDomain,
 } from "../types/plugin-state.js";
 import { interactionLabel } from "../utils/interaction-labels.js";
+import {
+  resolveInputDomain,
+  resolveInteractionInputs,
+} from "../utils/interaction-inputs.js";
 import { useChromeSuppression } from "./ChromeSuppressionContext.js";
 import { ThemedButton } from "./ThemedButton.js";
 
@@ -125,12 +129,15 @@ export function InteractionForm<
   const hidden = useMemo(() => new Set(hiddenFields ?? []), [hiddenFields]);
   const visibleInputs = useMemo(() => {
     const allowed = fields ? new Set(fields) : null;
-    return defaultFormInputs(descriptor).filter((input) => {
+    return defaultFormInputs(
+      descriptor,
+      handle.values as Readonly<Record<string, unknown>>,
+    ).filter((input) => {
       const key = input.key as keyof Params & string;
       if (allowed && !allowed.has(key)) return false;
       return !hidden.has(key);
     });
-  }, [descriptor, fields, hidden]);
+  }, [descriptor, fields, hidden, handle.values]);
 
   const currentValidation = validation;
   const fieldErrors = (currentValidation?.fieldErrors ?? {}) as Partial<
@@ -236,17 +243,13 @@ export function InteractionForm<
           );
         })}
       </div>
-    ) : (
-      <span
-        style={{
-          fontSize: theme.typography.fontSize.sm,
-          color: theme.semantic.text.muted,
-        }}
-      >
-        No visible fields are required. Board or card selection may complete
-        this interaction.
-      </span>
+    ) : null;
+
+  if (visibleInputs.length === 0 && !handle.isReady) {
+    throw new Error(
+      `InteractionForm '${descriptor.interactionKey}' has required inputs that cannot be rendered by the default form. Provide renderFields, select on a surface, or use a default-renderable input domain.`,
     );
+  }
 
   const formErrorContent =
     formErrors.length > 0 ? (
@@ -396,7 +399,10 @@ export function InteractionField<
     (candidate) => candidate.key === inputKey,
   );
   if (!input) return null;
-  const typedInput = input as InteractionInputDescriptor & { key: Key };
+  const typedInput = resolveInputDomain(
+    input,
+    handle.values as Readonly<Record<string, unknown>>,
+  ) as InteractionInputDescriptor & { key: Key };
   const value = handle.values[inputKey] as Params[Key] | undefined;
   const props: InteractionFieldRenderProps<Params, Key> = {
     descriptor,
@@ -421,8 +427,9 @@ export function hasDefaultInteractionFormFields(
 
 export function defaultFormInputs(
   descriptor: Pick<InteractionDescriptor, "inputs">,
+  values: Readonly<Record<string, unknown>> = {},
 ): InteractionInputDescriptor[] {
-  return descriptor.inputs.filter((input) => {
+  return resolveInteractionInputs(descriptor, values).filter((input) => {
     switch (input.domain.type) {
       case "choice":
       case "choiceList":
@@ -589,6 +596,21 @@ function ChoiceDescription({ choice }: { choice?: InteractionChoiceOption }) {
   );
 }
 
+const NULL_CHOICE_SELECT_VALUE = "__dreamboard_null_choice__";
+
+function choiceRenderKey(choice: InteractionChoiceOption): string {
+  return choice.value === null ? NULL_CHOICE_SELECT_VALUE : choice.value;
+}
+
+function encodeChoiceSelectValue(value: unknown): string | undefined {
+  if (value === null) return NULL_CHOICE_SELECT_VALUE;
+  return typeof value === "string" ? value : undefined;
+}
+
+function decodeChoiceSelectValue(value: string): string | null {
+  return value === NULL_CHOICE_SELECT_VALUE ? null : value;
+}
+
 function ChoiceField<
   Params extends InteractionParamsShape,
   Key extends keyof Params & string,
@@ -608,7 +630,7 @@ function ChoiceField<
   const choices = domain.choices ?? [];
   const controlId = useId();
   const selectedChoice =
-    typeof value === "string"
+    typeof value === "string" || value === null
       ? choices.find((choice) => choice.value === value)
       : undefined;
   if (choices.length > 0 && choices.length <= 3) {
@@ -629,7 +651,7 @@ function ChoiceField<
             const selected = value === choice.value;
             return (
               <ThemedButton
-                key={choice.value}
+                key={choiceRenderKey(choice)}
                 type="button"
                 variant={selected ? "primary" : "secondary"}
                 size="sm"
@@ -656,8 +678,10 @@ function ChoiceField<
     >
       <Select
         disabled={disabled}
-        value={typeof value === "string" ? value : undefined}
-        onValueChange={(next: string) => setValue(next as Params[Key])}
+        value={encodeChoiceSelectValue(value)}
+        onValueChange={(next: string) =>
+          setValue(decodeChoiceSelectValue(next) as Params[Key])
+        }
       >
         <SelectTrigger id={controlId} size="sm" className="w-full bg-white">
           <span data-slot="select-value">
@@ -678,8 +702,8 @@ function ChoiceField<
         >
           {choices.map((choice) => (
             <SelectItem
-              key={choice.value}
-              value={choice.value}
+              key={choiceRenderKey(choice)}
+              value={choiceRenderKey(choice)}
               textValue={choice.label}
               disabled={choice.disabled}
             >
@@ -748,10 +772,11 @@ function ChoiceListField<
     >
       <span style={{ display: "flex", flexWrap: "wrap", gap: theme.space[1] }}>
         {(domain.choices ?? []).map((choice) => {
-          const checked = selected.has(choice.value);
+          const value = choice.value as string;
+          const checked = selected.has(value);
           return (
             <ThemedButton
-              key={choice.value}
+              key={value}
               type="button"
               variant={checked ? "primary" : "secondary"}
               size="sm"
@@ -762,7 +787,7 @@ function ChoiceListField<
               }
               aria-pressed={checked}
               title={choice.disabledReason ?? choice.description}
-              onClick={() => toggle(choice.value)}
+              onClick={() => toggle(value)}
               className="h-8 px-3 text-sm"
             >
               <ChoiceOptionLabel choice={choice} />

package/src/components/PrimaryActionButton.tsx

@@ -50,6 +50,10 @@ import type {
   InteractionParamsShape,
 } from "../hooks/useInteractionHandle.js";
 import { interactionLabel } from "../utils/interaction-labels.js";
+import {
+  submitInteractionDraft,
+  submitInteractionParams,
+} from "../primitives/interaction-submit.js";
 import { ThemedButton } from "./ThemedButton.js";
 import type { SubmittedActionConfig } from "./surfaces/internal/DefaultInteractionButton.js";
 
@@ -289,13 +293,23 @@ export function PrimaryActionButton<
           setPending(true);
           try {
             if (params !== undefined) {
-              await handle.submit(params as Params);
+              await submitInteractionParams(
+                handle,
+                params as Params,
+                {},
+                {
+                  unhandledError: "ignore",
+                },
+              );
             } else {
-              await handle.submitDraft();
+              await submitInteractionDraft(
+                handle,
+                {},
+                {
+                  unhandledError: "ignore",
+                },
+              );
             }
-          } catch {
-            // Descriptor availability is authoritative; submit errors
-            // surface via the runtime's error channel.
           } finally {
             setPending(false);
           }

package/src/components/ResourceCounter.test.tsx

@@ -1,6 +1,5 @@
 import { expect, test } from "bun:test";
 import { renderToString } from "react-dom/server";
-import { ThemeProvider } from "../theme/ThemeProvider.js";
 import {
   ResourceCounter,
   type ResourceDisplayConfig,
@@ -10,20 +9,21 @@ const resources: ResourceDisplayConfig[] = [
   { type: "gold", label: "Gold", icon: "🪙" },
 ];
 
-test("ResourceCounter renders tooltip triggers for each resource chip", () => {
+test("ResourceCounter provides headless resource state to author markup", () => {
   const html = renderToString(
-    <ThemeProvider>
-      <ResourceCounter
-        resources={resources}
-        counts={{ gold: 3 }}
-        layout="row"
-        size="md"
-        showZero
-      />
-    </ThemeProvider>,
+    <ResourceCounter.Root resources={resources} counts={{ gold: 3 }}>
+      <ResourceCounter.Item className="author-chip">
+        <ResourceCounter.Icon className="author-icon" />
+        <ResourceCounter.Count />
+      </ResourceCounter.Item>
+    </ResourceCounter.Root>,
   );
 
-  expect(html).toContain('data-slot="tooltip-trigger"');
+  expect(html).toContain('data-dreamboard-resource-counter=""');
+  expect(html).toContain('class="author-chip"');
+  expect(html).toContain('class="author-icon"');
+  expect(html).toContain('data-resource-id="gold"');
+  expect(html).toContain('data-resource-count="3"');
   expect(html).toContain('aria-label="Gold: 3"');
-  expect(html).not.toContain("title=");
+  expect(html).not.toContain("tooltip");
 });