@dreamboard-games/ui-sdk 0.0.43 → 0.0.46

package/src/components/__fixtures__/ResourceCounter.fixture.tsx

@@ -1,17 +1,13 @@
-/**
- * ResourceCounter component fixtures
- * Demonstrates resource display in various configurations
- */
 import React, { useState } from "react";
 import {
   Coins,
-  TreePine,
-  Gem,
-  Zap,
-  Droplet,
-  Mountain,
   Cpu,
+  Droplet,
+  Gem,
   Leaf,
+  Mountain,
+  TreePine,
+  Zap,
 } from "lucide-react";
 import {
   ResourceCounter,
@@ -20,77 +16,71 @@ import {
 
 function Container({ children }: { children: React.ReactNode }) {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-800 to-slate-900 p-8">
-      <div className="max-w-2xl mx-auto space-y-6">{children}</div>
+    <div className="min-h-screen bg-slate-950 p-8 text-white">
+      <div className="mx-auto max-w-2xl space-y-6">{children}</div>
     </div>
   );
 }
 
-// Fantasy game resources
 const fantasyResources: ResourceDisplayConfig[] = [
-  {
-    type: "gold",
-    label: "Gold",
-    icon: Coins,
-    iconColor: "text-yellow-400",
-    bgColor: "bg-yellow-900/30",
-  },
-  {
-    type: "wood",
-    label: "Wood",
-    icon: TreePine,
-    iconColor: "text-amber-600",
-    bgColor: "bg-amber-900/30",
-  },
-  {
-    type: "gems",
-    label: "Gems",
-    icon: Gem,
-    iconColor: "text-purple-400",
-    bgColor: "bg-purple-900/30",
-  },
+  { type: "gold", label: "Gold", icon: Coins },
+  { type: "wood", label: "Wood", icon: TreePine },
+  { type: "gems", label: "Gems", icon: Gem },
 ];
 
-// Sci-fi game resources (Catan-style)
 const scifiResources: ResourceDisplayConfig[] = [
-  {
-    type: "minerals",
-    label: "Minerals",
-    icon: Mountain,
-    iconColor: "text-amber-600",
-    bgColor: "bg-amber-900/30",
-  },
-  {
-    type: "energy",
-    label: "Energy",
-    icon: Zap,
-    iconColor: "text-blue-400",
-    bgColor: "bg-blue-900/30",
-  },
-  {
-    type: "water",
-    label: "Water",
-    icon: Droplet,
-    iconColor: "text-cyan-400",
-    bgColor: "bg-cyan-900/30",
-  },
-  {
-    type: "tech",
-    label: "Tech Parts",
-    icon: Cpu,
-    iconColor: "text-purple-400",
-    bgColor: "bg-purple-900/30",
-  },
-  {
-    type: "bio",
-    label: "Bio-matter",
-    icon: Leaf,
-    iconColor: "text-green-400",
-    bgColor: "bg-green-900/30",
-  },
+  { type: "minerals", label: "Minerals", icon: Mountain },
+  { type: "energy", label: "Energy", icon: Zap },
+  { type: "water", label: "Water", icon: Droplet },
+  { type: "tech", label: "Tech Parts", icon: Cpu },
+  { type: "bio", label: "Bio-matter", icon: Leaf },
 ];
 
-// Interactive demo
+const iconClassByResource: Record<string, string> = {
+  gold: "text-yellow-300",
+  wood: "text-amber-500",
+  gems: "text-fuchsia-300",
+  minerals: "text-stone-300",
+  energy: "text-sky-300",
+  water: "text-cyan-300",
+  tech: "text-violet-300",
+  bio: "text-emerald-300",
+};
+
+function DemoResourceCounter({
+  resources,
+  counts,
+  showZero = true,
+  onResourceClick,
+}: {
+  resources: ResourceDisplayConfig[];
+  counts: Record<string, number>;
+  showZero?: boolean;
+  onResourceClick?: (type: string) => void;
+}) {
+  return (
+    <ResourceCounter.Root
+      resources={resources}
+      counts={counts}
+      zero={showZero ? "show" : "hide"}
+      onResourceClick={onResourceClick}
+      className="flex flex-wrap gap-3"
+    >
+      <ResourceCounter.Item className="inline-flex items-center gap-2 rounded-md border border-slate-700 bg-slate-900 px-3 py-2 font-bold transition data-[interactive=true]:cursor-pointer data-[interactive=true]:border-slate-600 data-[interactive=true]:shadow-sm data-[interactive=true]:hover:border-slate-300 data-[resource-zero=true]:opacity-50">
+        {(resource) => (
+          <>
+            <ResourceCounter.Icon
+              className={`h-5 w-5 ${iconClassByResource[resource.type] ?? ""}`}
+            />
+            <ResourceCounter.Count className="tabular-nums" />
+            <ResourceCounter.Label className="text-xs font-medium text-slate-400" />
+          </>
+        )}
+      </ResourceCounter.Item>
+    </ResourceCounter.Root>
+  );
+}
+
 function InteractiveDemo() {
   const [counts, setCounts] = useState<Record<string, number>>({
     gold: 5,
@@ -98,27 +88,16 @@ function InteractiveDemo() {
     gems: 1,
   });
 
-  const handleClick = (type: string) => {
-    setCounts((prev) => ({
-      ...prev,
-      [type]: (prev[type] ?? 0) + 1,
-    }));
-  };
-
   return (
     <Container>
-      <h2 className="text-xl font-bold text-white mb-4">
-        Interactive (Click to Add)
-      </h2>
-      <ResourceCounter
+      <h2 className="text-xl font-bold">Interactive Author Markup</h2>
+      <DemoResourceCounter
         resources={fantasyResources}
         counts={counts}
-        onResourceClick={handleClick}
-        size="lg"
+        onResourceClick={(type) =>
+          setCounts((prev) => ({ ...prev, [type]: (prev[type] ?? 0) + 1 }))
+        }
       />
-      <p className="text-slate-400 text-sm mt-4">
-        Click any resource to add +1
-      </p>
     </Container>
   );
 }
@@ -126,81 +105,18 @@ function InteractiveDemo() {
 export default {
   default: (
     <Container>
-      <h2 className="text-xl font-bold text-white mb-4">
-        Default (Row Layout)
-      </h2>
-      <ResourceCounter
+      <h2 className="text-xl font-bold">Author Styled Resources</h2>
+      <DemoResourceCounter
         resources={fantasyResources}
         counts={{ gold: 5, wood: 3, gems: 1 }}
       />
     </Container>
   ),
 
-  gridLayout: (
+  hiddenZeros: (
     <Container>
-      <h2 className="text-xl font-bold text-white mb-4">
-        Grid Layout (5 Resources)
-      </h2>
-      <ResourceCounter
-        resources={scifiResources}
-        counts={{ minerals: 4, energy: 2, water: 3, tech: 1, bio: 5 }}
-        layout="grid"
-        columns={5}
-      />
-    </Container>
-  ),
-
-  compactLayout: (
-    <Container>
-      <h2 className="text-xl font-bold text-white mb-4">Compact Layout</h2>
-      <ResourceCounter
-        resources={fantasyResources}
-        counts={{ gold: 10, wood: 5, gems: 2 }}
-        layout="compact"
-        size="sm"
-      />
-    </Container>
-  ),
-
-  sizes: (
-    <Container>
-      <h2 className="text-xl font-bold text-white mb-4">Size Variants</h2>
-      <div className="space-y-6">
-        <div>
-          <p className="text-slate-400 text-sm mb-2">Small</p>
-          <ResourceCounter
-            resources={fantasyResources}
-            counts={{ gold: 5, wood: 3, gems: 1 }}
-            size="sm"
-          />
-        </div>
-        <div>
-          <p className="text-slate-400 text-sm mb-2">Medium (Default)</p>
-          <ResourceCounter
-            resources={fantasyResources}
-            counts={{ gold: 5, wood: 3, gems: 1 }}
-            size="md"
-          />
-        </div>
-        <div>
-          <p className="text-slate-400 text-sm mb-2">Large</p>
-          <ResourceCounter
-            resources={fantasyResources}
-            counts={{ gold: 5, wood: 3, gems: 1 }}
-            size="lg"
-          />
-        </div>
-      </div>
-    </Container>
-  ),
-
-  hideZeroValues: (
-    <Container>
-      <h2 className="text-xl font-bold text-white mb-4">Hide Zero Values</h2>
-      <p className="text-slate-400 text-sm mb-4">
-        Only showing resources with count {">"} 0
-      </p>
-      <ResourceCounter
+      <h2 className="text-xl font-bold">Filtered Resources</h2>
+      <DemoResourceCounter
         resources={scifiResources}
         counts={{ minerals: 4, energy: 0, water: 3, tech: 0, bio: 5 }}
         showZero={false}
@@ -209,19 +125,4 @@ export default {
   ),
 
   interactive: <InteractiveDemo />,
-
-  sciFiTheme: (
-    <Container>
-      <h2 className="text-xl font-bold text-white mb-4">
-        Sci-Fi Resources (Catan Style)
-      </h2>
-      <ResourceCounter
-        resources={scifiResources}
-        counts={{ minerals: 3, energy: 2, water: 1, tech: 4, bio: 2 }}
-        layout="grid"
-        columns={5}
-        size="md"
-      />
-    </Container>
-  ),
 };

package/src/components/board/HexGrid.tsx

@@ -1053,7 +1053,7 @@ function HexGridImpl(
                 onClick={
                   isSelectable
                     ? () => {
-                        void interactiveSpaces.selectTargetId?.(space.id);
+                        void state.select?.();
                       }
                     : undefined
                 }
@@ -1062,7 +1062,7 @@ function HexGridImpl(
                     event,
                     isSelectable
                       ? () => {
-                          void interactiveSpaces.selectTargetId?.(space.id);
+                          void state.select?.();
                         }
                       : undefined,
                   )
@@ -1151,7 +1151,7 @@ function HexGridImpl(
                 onClick={
                   isSelectable
                     ? () => {
-                        void interactiveEdges.selectTargetId?.(edge.id);
+                        void state.select?.();
                       }
                     : undefined
                 }
@@ -1160,7 +1160,7 @@ function HexGridImpl(
                     event,
                     isSelectable
                       ? () => {
-                          void interactiveEdges.selectTargetId?.(edge.id);
+                          void state.select?.();
                         }
                       : undefined,
                   )
@@ -1226,7 +1226,7 @@ function HexGridImpl(
                 onClick={
                   isSelectable
                     ? () => {
-                        void interactiveVertices.selectTargetId?.(vertex.id);
+                        void state.select?.();
                       }
                     : undefined
                 }
@@ -1235,7 +1235,7 @@ function HexGridImpl(
                     event,
                     isSelectable
                       ? () => {
-                          void interactiveVertices.selectTargetId?.(vertex.id);
+                          void state.select?.();
                         }
                       : undefined,
                   )

package/src/components/board/target-layer.ts

@@ -1,10 +1,28 @@
+import type { BoardTargetKind } from "../../utils/interaction-inputs.js";
+
+export interface InteractiveTargetState {
+  kind?: BoardTargetKind;
+  id: string;
+  eligible: boolean;
+  selectable: boolean;
+  hovered: boolean;
+  interactionKey?: string;
+  interactionId?: string;
+  inputKey?: string;
+  pending: boolean;
+  conflict: boolean;
+  unavailableReason?: string;
+  select?: () => unknown | Promise<unknown>;
+}
+
 export interface InteractiveTargetLayer {
   enabled?: boolean;
   eligible?: ReadonlySet<string>;
-  selectTargetId?: (targetId: string) => void | Promise<void>;
+  selectTargetId?: (targetId: string) => unknown | Promise<unknown>;
+  targetState?: (targetId: string) => Partial<InteractiveTargetState>;
 }
 
-export interface InteractiveTargetRenderState {
+export interface InteractiveTargetRenderState extends InteractiveTargetState {
   isEnabled: boolean;
   isEligible: boolean;
   isHovered: boolean;
@@ -15,9 +33,26 @@ export function interactiveTargetRenderState(
   targetId: string,
   isHovered: boolean,
 ): InteractiveTargetRenderState {
+  const enabled = layer.enabled !== false;
+  const eligible = layer.eligible?.has(targetId) ?? true;
+  const extra = layer.targetState?.(targetId) ?? {};
+  const selectable =
+    extra.selectable ?? (enabled && eligible && !!layer.selectTargetId);
   return {
-    isEnabled: layer.enabled !== false,
-    isEligible: layer.eligible?.has(targetId) ?? true,
+    id: targetId,
+    ...extra,
+    eligible: extra.eligible ?? eligible,
+    selectable,
+    hovered: isHovered,
+    pending: extra.pending ?? false,
+    conflict: extra.conflict ?? false,
+    select:
+      extra.select ??
+      (layer.selectTargetId
+        ? () => layer.selectTargetId?.(targetId)
+        : undefined),
+    isEnabled: enabled,
+    isEligible: extra.eligible ?? eligible,
     isHovered,
   };
 }
@@ -26,5 +61,9 @@ export function isInteractiveTargetSelectable(
   layer: InteractiveTargetLayer,
   state: InteractiveTargetRenderState,
 ): boolean {
-  return state.isEnabled && state.isEligible && !!layer.selectTargetId;
+  return (
+    state.isEnabled &&
+    state.selectable &&
+    !!(state.select ?? layer.selectTargetId)
+  );
 }

package/src/components/index.ts

@@ -16,9 +16,12 @@ export { PlayArea, type PlayAreaProps } from "./PlayArea.js";
 // Other UI components
 export { GameSkeleton, type GameSkeletonProps } from "./GameSkeleton.js";
 export {
+  Toast,
+  ToastActions,
   ToastProvider,
-  useToast,
-  type Toast,
+  type ToastActionsProps,
+  type ToastActionsValue,
+  type ToastNotification,
   type ToastType,
 } from "./Toast.js";
 export { ErrorBoundary, type ErrorBoundaryProps } from "./ErrorBoundary.js";
@@ -51,8 +54,20 @@ export {
 // Game UI primitives (SDK v0.1.0+)
 export {
   ResourceCounter,
+  ResourceCounterCount,
+  ResourceCounterIcon,
+  ResourceCounterItem,
+  ResourceCounterLabel,
+  ResourceCounterRoot,
+  createResourceCounter,
+  type BoundResourceCounterRootProps,
+  type ResourceCounterComponents,
+  type ResourceCounterItemState,
+  type ResourceCounterPartProps,
   type ResourceCounterProps,
+  type ResourceCounterRootProps,
   type ResourceDisplayConfig,
+  type ResourceIconProps,
 } from "./ResourceCounter.js";
 export {
   CostDisplay,
@@ -69,12 +84,8 @@ export {
 } from "./PrimaryActionButton.js";
 export {
   InteractionForm,
-  InteractionField,
   defaultFormInputs,
   hasDefaultInteractionFormFields,
-  type InteractionFieldProps,
-  type InteractionFieldRenderMap,
-  type InteractionFieldRenderProps,
   type InteractionFormProps,
 } from "./InteractionForm.js";
 export {
@@ -91,10 +102,6 @@ export {
   type GameEndDisplayProps,
   type PlayerScore,
 } from "./GameEndDisplay.js";
-export {
-  PromptDialogHost,
-  type PromptDialogHostProps,
-} from "./PromptDialogHost.js";
 
 // Board primitives (SDK v0.2.0+)
 export {

package/src/components/surfaces/InboxSurface.tsx

@@ -12,6 +12,7 @@ import type {
 } from "../../types/plugin-state.js";
 import { interactionInputKeys } from "../../utils/interaction-inputs.js";
 import { interactionLabel } from "../../utils/interaction-labels.js";
+import { submitInteractionParams } from "../../primitives/interaction-submit.js";
 import { DefaultInteractionButton } from "./internal/DefaultInteractionButton.js";
 import { ThemedButton } from "../ThemedButton.js";
 import type {
@@ -225,11 +226,12 @@ function PromptOptionsCard<
                 if (disabled || !inputKey) return;
                 setPendingOptionId(option.id);
                 try {
-                  await handle.submit({ [inputKey]: option.id } as Params);
-                } catch {
-                  // Submission errors flow through the runtime's
-                  // notification channel; we swallow here so the option
-                  // buttons re-enable on failure.
+                  await submitInteractionParams(
+                    handle,
+                    { [inputKey]: option.id } as Params,
+                    {},
+                    { unhandledError: "ignore" },
+                  );
                 } finally {
                   setPendingOptionId(null);
                 }

package/src/components/surfaces/PlayerCardsSurface.tsx

@@ -10,7 +10,7 @@ import {
   useCardZoneInteractions,
   type CardZoneInteractionContext,
 } from "./internal/useCardZoneInteractions.js";
-import { CardZoneFollowUpForm } from "./internal/CardZoneFollowUpForm.js";
+import { CardZoneRoutedForm } from "./internal/CardZoneRoutedForm.js";
 import type { InteractionParamsByKeyShape } from "./types.js";
 
 export type PlayerCardsLayout<ZoneKey extends string = string> =
@@ -511,12 +511,12 @@ function PlayerCardsFan<
           );
         }}
       />
-      {zone.followUp ? (
+      {zone.routedInteraction ? (
         <Fragment>
-          <CardZoneFollowUpForm<I, ParamsByKey>
-            key={zone.followUp.interactionKey}
-            descriptor={zone.followUp}
-            onDone={() => zone.setFollowUp(null)}
+          <CardZoneRoutedForm<I, ParamsByKey>
+            key={zone.routedInteraction.interactionKey}
+            descriptor={zone.routedInteraction}
+            onDone={() => zone.setRoutedInteraction(null)}
           />
         </Fragment>
       ) : null}

package/src/components/surfaces/internal/CardZoneRoutedForm.tsx

@@ -0,0 +1,35 @@
+import { InteractionForm } from "../../InteractionForm.js";
+import { useInteractionHandle } from "../../../hooks/useInteractionHandle.js";
+import type { InteractionDescriptor } from "../../../types/plugin-state.js";
+import type {
+  InteractionDefaultedKeysOf,
+  InteractionParamsByKeyShape,
+  InteractionParamsOf,
+} from "../types.js";
+
+export function CardZoneRoutedForm<
+  I extends string,
+  ParamsByKey extends Partial<InteractionParamsByKeyShape> = {},
+>({
+  descriptor,
+  onDone,
+}: {
+  descriptor: InteractionDescriptor<I>;
+  onDone: () => void;
+}) {
+  const handle = useInteractionHandle<
+    InteractionParamsOf<ParamsByKey, I>,
+    InteractionDefaultedKeysOf<ParamsByKey, I>
+  >(descriptor);
+  return (
+    <InteractionForm
+      descriptor={descriptor}
+      handle={handle}
+      hiddenFields={[
+        "cardId" as keyof InteractionParamsOf<ParamsByKey, I> & string,
+      ]}
+      onCancel={onDone}
+      onSubmitSuccess={onDone}
+    />
+  );
+}

package/src/components/surfaces/internal/DefaultInteractionButton.tsx

@@ -10,6 +10,10 @@ import {
   InteractionForm,
   hasDefaultInteractionFormFields,
 } from "../../InteractionForm.js";
+import {
+  submitInteractionDraft,
+  submitInteractionParams,
+} from "../../../primitives/interaction-submit.js";
 import { interactionLabel } from "../../../utils/interaction-labels.js";
 import { ThemedButton } from "../../ThemedButton.js";
 
@@ -160,15 +164,21 @@ export function DefaultInteractionButton<
         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-level availability is authoritative; submission
-          // errors flow through the runtime's error channel. We swallow
-          // here so consumers without an error boundary don't see an
-          // unhandled rejection warning.
         } finally {
           setPending(false);
         }