@dreamboard-games/ui-sdk 0.0.41

package/dist/components/MoreActions.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Disclosure that hides a list of low-salience actions behind a single
+ * "More" toggle. Sized and styled by the active theme so it looks
+ * consistent with neighbouring `<DefaultInteractionButton>` rows.
+ *
+ * Why not a popover or dropdown? Two reasons:
+ *
+ * 1. **Layout safety.** The default panel surface lives directly above
+ *    the hand strip; a floating popover would be obscured by the
+ *    hand's `overflow-x: auto` clipping. An inline expansion stays
+ *    inside the panel container and pushes neighbouring rows down.
+ * 2. **Discoverability.** Players miss menus that hide behind triple
+ *    dots / chevrons. An expanded inline list still looks like a row
+ *    of buttons (Jakob — same affordance as the always-visible row).
+ *
+ * The toggle reports its open state via `aria-expanded` and labels
+ * the disclosed region via `aria-controls` so screen readers announce
+ * "Expanded — More actions, region containing 3 buttons" naturally.
+ */
+import { useId, useState } from "react";
+import { ChevronDown, MoreHorizontal } from "lucide-react";
+import { useTheme } from "../theme/ThemeProvider.js";
+import { ThemedButton } from "./ThemedButton.js";
+export function MoreActions({ children, label = "More", count, defaultOpen = false, style, }) {
+    const theme = useTheme();
+    const [open, setOpen] = useState(defaultOpen);
+    // `useId` keeps the aria pairing stable across re-renders even when
+    // many `<MoreActions>` exist on screen (rare, but easy to break).
+    const regionId = `more-actions-${useId().replace(/:/g, "")}`;
+    const showCount = typeof count === "number" && count > 0;
+    return (_jsxs("div", { "data-shell-slot": "more-actions", "data-more-actions-open": open ? "true" : "false", style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: theme.space[2],
+            alignItems: "stretch",
+            // The disclosure is its own block so wrap behaviour upstream
+            // doesn't interleave the toggle and the disclosed items.
+            flex: "1 1 100%",
+            minWidth: 0,
+        }, children: [_jsxs(ThemedButton, { type: "button", variant: "secondary", size: "md", "aria-expanded": open, "aria-controls": regionId, onClick: () => setOpen((value) => !value), style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: theme.space[1],
+                    ...style,
+                }, children: [_jsx(MoreHorizontal, { size: 16, "aria-hidden": true }), _jsx("span", { children: label }), showCount ? (_jsxs("span", { "aria-hidden": true, style: {
+                            fontVariantNumeric: "tabular-nums",
+                            opacity: 0.78,
+                        }, children: ["(", count, ")"] })) : null, _jsx(ChevronDown, { size: 14, "aria-hidden": true, style: {
+                            transform: open ? "rotate(180deg)" : "rotate(0deg)",
+                            transition: `transform ${theme.motion.duration.fast} ${theme.motion.easing.out}`,
+                        } })] }), open ? (_jsx("div", { id: regionId, role: "region", "aria-label": label, style: {
+                    display: "flex",
+                    flexDirection: "row",
+                    flexWrap: "wrap",
+                    gap: theme.space[2],
+                    // Inset visually so the disclosed cluster reads as a
+                    // sub-region rather than a continuation of the main panel.
+                    paddingInline: theme.space[3],
+                    paddingBlock: theme.space[2],
+                    background: theme.semantic.surface.inset,
+                    borderRadius: theme.radius.lg,
+                }, children: children })) : null] }));
+}

package/dist/components/PhaseIndicator.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Surfaces the dominant turn-state question — "is this me?" / "who am I
+ * waiting for?" — as a single headline, with the phase label demoted to
+ * secondary copy underneath.
+ *
+ * The previous design rendered three peer chips (`Waiting`, `Roll dice`,
+ * `Player 3`) which fragmented one piece of information across three
+ * UI atoms. The redesign collapses them into a single status line:
+ *
+ *   ◐ Waiting for Player 3…
+ *      Roll dice
+ *
+ *   ● Your turn
+ *      Build, trade, or end your turn.
+ *
+ * Both states get a leading status indicator that animates so the eye
+ * picks up the "live" cue immediately. Animations are skipped when the
+ * theme reports `motion.reducedMotion === "true"`.
+ *
+ * Prop API is unchanged so existing callers (Catan, Things-in-Rings,
+ * tests) keep working without edits. The `variant` knob still toggles
+ * surface treatment (`badge` is layout-only, `bar` wraps the headline
+ * in an inset HUD strip, `minimal` collapses to a single underlined
+ * label for tight HUDs).
+ */
+export interface PhaseIndicatorProps {
+    currentPhase: string;
+    phaseLabels?: Record<string, string>;
+    isMyTurn?: boolean;
+    activePlayerNames?: string[];
+    variant?: "badge" | "bar" | "minimal";
+    className?: string;
+}
+export declare function PhaseIndicator({ currentPhase, phaseLabels, isMyTurn, activePlayerNames, variant, className, }: PhaseIndicatorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PhaseIndicator.d.ts.map

package/dist/components/PhaseIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhaseIndicator.d.ts","sourceRoot":"","sources":["../../src/components/PhaseIndicator.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAQH,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAC7B,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,iBAAiB,EACjB,OAAiB,EACjB,SAAS,GACV,EAAE,mBAAmB,2CAyErB"}

package/dist/components/PhaseIndicator.js

@@ -0,0 +1,212 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Surfaces the dominant turn-state question — "is this me?" / "who am I
+ * waiting for?" — as a single headline, with the phase label demoted to
+ * secondary copy underneath.
+ *
+ * The previous design rendered three peer chips (`Waiting`, `Roll dice`,
+ * `Player 3`) which fragmented one piece of information across three
+ * UI atoms. The redesign collapses them into a single status line:
+ *
+ *   ◐ Waiting for Player 3…
+ *      Roll dice
+ *
+ *   ● Your turn
+ *      Build, trade, or end your turn.
+ *
+ * Both states get a leading status indicator that animates so the eye
+ * picks up the "live" cue immediately. Animations are skipped when the
+ * theme reports `motion.reducedMotion === "true"`.
+ *
+ * Prop API is unchanged so existing callers (Catan, Things-in-Rings,
+ * tests) keep working without edits. The `variant` knob still toggles
+ * surface treatment (`badge` is layout-only, `bar` wraps the headline
+ * in an inset HUD strip, `minimal` collapses to a single underlined
+ * label for tight HUDs).
+ */
+import { motion } from "framer-motion";
+import { clsx } from "clsx";
+import { useTheme } from "../theme/ThemeProvider.js";
+import { surfaceStyle } from "../theme/derive.js";
+export function PhaseIndicator({ currentPhase, phaseLabels, isMyTurn, activePlayerNames, variant = "badge", className, }) {
+    const theme = useTheme();
+    const reducedMotion = theme.motion.reducedMotion === "true";
+    const label = phaseLabels?.[currentPhase] ?? formatPhase(currentPhase);
+    if (variant === "minimal") {
+        return (_jsx("span", { className: className, style: {
+                fontFamily: theme.typography.fontFamily.body,
+                fontSize: theme.typography.fontSize.sm,
+                fontWeight: theme.typography.fontWeight.bold,
+                color: theme.semantic.text.muted,
+                textDecoration: "underline",
+                textDecorationStyle: "wavy",
+                textDecorationColor: theme.semantic.border.subtle,
+                textUnderlineOffset: "4px",
+            }, role: "status", "aria-label": `Current phase: ${label}`, children: label }));
+    }
+    // Decide which state we're in. Only one is active at a time so the
+    // headline is unambiguous.
+    const state = isMyTurn === true
+        ? "your-turn"
+        : isMyTurn === false && activePlayerNames && activePlayerNames.length > 0
+            ? "waiting"
+            : "phase-only";
+    const containerStyle = variant === "bar"
+        ? {
+            ...surfaceStyle(theme, { tone: "inset", radius: "hud" }),
+            padding: theme.space[3],
+            boxShadow: theme.elevation.inset,
+            fontFamily: theme.typography.fontFamily.body,
+        }
+        : { fontFamily: theme.typography.fontFamily.body };
+    const headline = renderHeadline({
+        state,
+        activePlayerNames,
+        label,
+        theme,
+        reducedMotion,
+    });
+    const ariaLabel = state === "your-turn"
+        ? `Your turn — ${label}`
+        : state === "waiting"
+            ? `Waiting for ${formatPlayerList(activePlayerNames ?? [])} — ${label}`
+            : label;
+    return (_jsx("div", { className: clsx("flex items-center gap-3 flex-wrap", className), style: containerStyle, role: "status", "aria-live": "polite", "aria-atomic": "true", "aria-label": ariaLabel, children: headline }));
+}
+function formatPhase(phase) {
+    const formatted = phase
+        .replace(/([A-Z])/g, " $1")
+        .replace(/_/g, " ")
+        .trim()
+        .replace(/^\w/, (c) => c.toUpperCase());
+    return formatted === "Player Turn" ? "Turn" : formatted;
+}
+function formatPlayerList(names) {
+    if (names.length === 0)
+        return "";
+    if (names.length === 1)
+        return names[0];
+    if (names.length === 2)
+        return `${names[0]} and ${names[1]}`;
+    return `${names.slice(0, -1).join(", ")}, and ${names[names.length - 1]}`;
+}
+function renderHeadline({ state, activePlayerNames, label, theme, reducedMotion, }) {
+    if (state === "phase-only") {
+        return (_jsx("div", { style: textBlockStyle(theme), children: _jsx("span", { style: titleTextStyle(theme), children: label }) }));
+    }
+    const isYourTurn = state === "your-turn";
+    const intent = isYourTurn
+        ? theme.semantic.intent.success
+        : theme.semantic.intent.info;
+    const titleText = isYourTurn
+        ? "Your turn"
+        : `Waiting for ${formatPlayerList(activePlayerNames ?? [])}…`;
+    return (_jsxs(motion.div, { initial: reducedMotion ? { opacity: 0 } : { opacity: 0, y: -4 }, animate: reducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }, style: {
+            display: "flex",
+            alignItems: "center",
+            gap: theme.space[3],
+        }, children: [_jsx(StatusIndicator, { intent: intent, kind: isYourTurn ? "pulse" : "spinner", reducedMotion: reducedMotion }), _jsxs("div", { style: textBlockStyle(theme), children: [_jsx("span", { style: titleTextStyle(theme), children: titleText }), _jsx("span", { style: subtitleTextStyle(theme), children: label })] })] }));
+}
+function textBlockStyle(theme) {
+    return {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        gap: theme.space[0.5],
+        minWidth: 0,
+    };
+}
+function titleTextStyle(theme) {
+    return {
+        fontFamily: theme.typography.fontFamily.body,
+        fontSize: theme.typography.fontSize.lg,
+        fontWeight: theme.typography.fontWeight.bold,
+        letterSpacing: theme.typography.letterSpacing.tight,
+        lineHeight: theme.typography.lineHeight.tight,
+        color: theme.semantic.text.primary,
+    };
+}
+function subtitleTextStyle(theme) {
+    return {
+        fontFamily: theme.typography.fontFamily.body,
+        fontSize: theme.typography.fontSize.xs,
+        fontWeight: theme.typography.fontWeight.medium,
+        letterSpacing: theme.typography.letterSpacing.caps,
+        textTransform: "uppercase",
+        color: theme.semantic.text.muted,
+    };
+}
+/**
+ * Animated status indicator sized to sit next to a body-font headline.
+ *
+ * Kept intentionally chip-less so it shares the chrome strip's
+ * understated treatment (the rest of the chrome uses bare typography
+ * and lets intent colour live in chips, dots, and borders — not in
+ * full-saturation surfaces). The colour comes from one
+ * {@link Theme}-supplied intent ramp so swapping themes keeps the
+ * indicator consistent with chips, toasts, and buttons that use the
+ * same intent.
+ *
+ * - `pulse` — soft halo radiating outward from a solid centre dot.
+ *   Used for the player's own active turn.
+ * - `spinner` — thin partial ring rotating around a soft-filled
+ *   centre. Reads as the standard "in flight / live" affordance.
+ */
+function StatusIndicator({ intent, kind, reducedMotion, }) {
+    const size = 16;
+    if (kind === "pulse") {
+        return (_jsxs("span", { "aria-hidden": "true", style: {
+                position: "relative",
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: size,
+                height: size,
+                flexShrink: 0,
+            }, children: [_jsx(motion.span, { style: {
+                        position: "absolute",
+                        inset: 2,
+                        borderRadius: "9999px",
+                        background: intent.soft,
+                    }, animate: reducedMotion
+                        ? undefined
+                        : { scale: [1, 1.6, 1], opacity: [0.7, 0, 0.7] }, transition: {
+                        repeat: reducedMotion ? 0 : Infinity,
+                        duration: 1.6,
+                        ease: "easeOut",
+                    } }), _jsx("span", { style: {
+                        position: "relative",
+                        display: "inline-block",
+                        width: 8,
+                        height: 8,
+                        borderRadius: "9999px",
+                        background: intent.solid,
+                    } })] }));
+    }
+    // "spinner" — partial ring rotating around an inset soft fill.
+    return (_jsxs("span", { "aria-hidden": "true", style: {
+            position: "relative",
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: size,
+            height: size,
+            flexShrink: 0,
+        }, children: [_jsx("span", { style: {
+                    position: "absolute",
+                    inset: 4,
+                    borderRadius: "9999px",
+                    background: intent.soft,
+                } }), _jsx(motion.span, { style: {
+                    position: "absolute",
+                    inset: 0,
+                    borderRadius: "9999px",
+                    border: "2px solid transparent",
+                    borderTopColor: intent.solid,
+                    borderRightColor: intent.solid,
+                }, animate: reducedMotion ? undefined : { rotate: 360 }, transition: {
+                    repeat: reducedMotion ? 0 : Infinity,
+                    duration: 1.2,
+                    ease: "linear",
+                } })] }));
+}

package/dist/components/PlayArea.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Central game board area for active game components (tricks, played
+ * cards, zones, etc.).
+ *
+ * Visual chrome (frame, empty placeholder, card entrance/exit) is
+ * sourced from the active {@link useTheme} so the play area re-skins
+ * with the rest of the shell.
+ */
+import { type CardProps, type ViewCard } from "./Card.js";
+export interface PlayAreaProps<CardData extends ViewCard = ViewCard> {
+    cards: readonly CardData[];
+    filter?: (card: CardData) => boolean;
+    cardSize?: CardProps["size"];
+    renderCard?: CardProps<CardData>["renderContent"];
+    layout?: "grid" | "row";
+    interactive?: boolean;
+    onCardClick?: (cardId: string) => void;
+    "aria-label"?: string;
+    className?: string;
+}
+/**
+ * @example
+ * ```tsx
+ * <PlayArea cards={trickCards} layout="row" renderCard={(card) => <PlayingCard card={card} />} />
+ * ```
+ */
+export declare function PlayArea<CardData extends ViewCard = ViewCard>({ cards, filter, cardSize, renderCard, layout, interactive, onCardClick, "aria-label": ariaLabel, className, }: PlayAreaProps<CardData>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PlayArea.d.ts.map

package/dist/components/PlayArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayArea.d.ts","sourceRoot":"","sources":["../../src/components/PlayArea.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAC;AAIhE,MAAM,WAAW,aAAa,CAAC,QAAQ,SAAS,QAAQ,GAAG,QAAQ;IACjE,KAAK,EAAE,SAAS,QAAQ,EAAE,CAAC;IAC3B,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAC;IACrC,QAAQ,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC7B,UAAU,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC,eAAe,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EAAE,EAC7D,KAAK,EACL,MAAM,EACN,QAAe,EACf,UAAU,EACV,MAAc,EACd,WAAmB,EACnB,WAAW,EACX,YAAY,EAAE,SAAuB,EACrC,SAAS,GACV,EAAE,aAAa,CAAC,QAAQ,CAAC,2CAiFzB"}

package/dist/components/PlayArea.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Central game board area for active game components (tricks, played
+ * cards, zones, etc.).
+ *
+ * Visual chrome (frame, empty placeholder, card entrance/exit) is
+ * sourced from the active {@link useTheme} so the play area re-skins
+ * with the rest of the shell.
+ */
+import { motion, AnimatePresence } from "framer-motion";
+import { clsx } from "clsx";
+import { Card } from "./Card.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+import { chipStyle } from "../theme/derive.js";
+/**
+ * @example
+ * ```tsx
+ * <PlayArea cards={trickCards} layout="row" renderCard={(card) => <PlayingCard card={card} />} />
+ * ```
+ */
+export function PlayArea({ cards, filter, cardSize = "md", renderCard, layout = "row", interactive = false, onCardClick, "aria-label": ariaLabel = "Play area", className, }) {
+    const theme = useTheme();
+    const reducedMotion = theme.motion.reducedMotion === "true";
+    const visibleCards = filter ? cards.filter(filter) : cards;
+    const layoutClasses = {
+        grid: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 sm:gap-6",
+        row: "flex flex-wrap items-center justify-center gap-3 sm:gap-6",
+    };
+    return (_jsx("div", { className: clsx("relative w-full min-h-[200px] sm:min-h-[300px] p-6 sm:p-8", className), style: {
+            background: theme.semantic.surface.inset,
+            border: `2px dashed ${theme.semantic.border.default}`,
+            borderRadius: theme.radius.hud,
+            fontFamily: theme.typography.fontFamily.body,
+            color: theme.semantic.text.primary,
+        }, role: "region", "aria-label": `${ariaLabel} - ${visibleCards.length} item${visibleCards.length !== 1 ? "s" : ""}`, children: _jsx(AnimatePresence, { mode: "popLayout", children: visibleCards.length === 0 ? (_jsx(motion.div, { className: "flex items-center justify-center h-full absolute inset-0 pointer-events-none", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, role: "status", "aria-live": "polite", children: _jsx("div", { style: {
+                        ...chipStyle(theme, { variant: "warning", size: "md" }),
+                        fontSize: theme.typography.fontSize.md,
+                        paddingBlock: theme.space[2],
+                        paddingInline: theme.space[4],
+                    }, children: "No cards in play" }) })) : (_jsx("div", { className: layoutClasses[layout], children: visibleCards.map((card, index) => (_jsx(motion.div, { layout: !reducedMotion, initial: reducedMotion
+                        ? { opacity: 0, scale: 1 }
+                        : { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, transition: {
+                        type: "spring",
+                        stiffness: 260,
+                        damping: 20,
+                        delay: reducedMotion ? 0 : index * 0.05,
+                    }, children: _jsx(Card, { card: card, size: cardSize, renderContent: renderCard, disabled: !interactive, onCardClick: interactive ? onCardClick : undefined }) }, card.id))) })) }) }));
+}

package/dist/components/PluginRuntime.d.ts

@@ -0,0 +1,37 @@
+import React from "react";
+export interface PluginRuntimeProps {
+    /** Child components to render after state sync has started */
+    children: React.ReactNode;
+    /**
+     * Timeout in milliseconds to wait for the first state-sync snapshot.
+     * @default 10000 (10 seconds)
+     */
+    timeout?: number;
+    /** Custom loading component to show while waiting for state sync */
+    loadingComponent?: React.ReactNode;
+    /** Custom error component to show when initialization fails */
+    errorComponent?: (error: string) => React.ReactNode;
+}
+/**
+ * PluginRuntime provides the RuntimeContext for plugin components.
+ *
+ * This component:
+ * - Creates a RuntimeAPI instance using the SDK-provided implementation
+ * - Waits for the first reducer-native state-sync snapshot before rendering children
+ * - Provides RuntimeAPI and session state to all child components
+ *
+ * @example
+ * ```tsx
+ * // In your plugin's index.tsx
+ * import { PluginRuntime } from "./components/dreamboard";
+ * import App from './App';
+ *
+ * ReactDOM.createRoot(document.getElementById('root')!).render(
+ *   <PluginRuntime>
+ *     <App />
+ *   </PluginRuntime>
+ * );
+ * ```
+ */
+export declare function PluginRuntime({ children, timeout, loadingComponent, errorComponent, }: PluginRuntimeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PluginRuntime.d.ts.map

package/dist/components/PluginRuntime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PluginRuntime.d.ts","sourceRoot":"","sources":["../../src/components/PluginRuntime.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,WAAW,kBAAkB;IACjC,8DAA8D;IAC9D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oEAAoE;IACpE,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,+DAA+D;IAC/D,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CACrD;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,OAAe,EACf,gBAAgB,EAChB,cAAc,GACf,EAAE,kBAAkB,2CA+BpB"}

package/dist/components/PluginRuntime.js

@@ -0,0 +1,47 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InteractionUiProvider } from "../context/InteractionDraftContext.js";
+import { RuntimeProvider } from "../context/RuntimeContext.js";
+import { usePluginSession } from "../context/PluginSessionContext.js";
+import { usePluginRuntime } from "../hooks/usePluginRuntime.js";
+import { GameSkeleton } from "./GameSkeleton.js";
+/**
+ * PluginRuntime provides the RuntimeContext for plugin components.
+ *
+ * This component:
+ * - Creates a RuntimeAPI instance using the SDK-provided implementation
+ * - Waits for the first reducer-native state-sync snapshot before rendering children
+ * - Provides RuntimeAPI and session state to all child components
+ *
+ * @example
+ * ```tsx
+ * // In your plugin's index.tsx
+ * import { PluginRuntime } from "./components/dreamboard";
+ * import App from './App';
+ *
+ * ReactDOM.createRoot(document.getElementById('root')!).render(
+ *   <PluginRuntime>
+ *     <App />
+ *   </PluginRuntime>
+ * );
+ * ```
+ */
+export function PluginRuntime({ children, timeout = 10000, loadingComponent, errorComponent, }) {
+    const { runtime, isReady, error } = usePluginRuntime({ timeout });
+    if (error) {
+        if (errorComponent) {
+            return _jsx(_Fragment, { children: errorComponent(error) });
+        }
+        return (_jsx("div", { className: "flex h-full w-full items-center justify-center bg-gray-50", children: _jsxs("div", { className: "text-center p-6", children: [_jsx("p", { className: "text-red-600 font-medium mb-2", children: "Failed to load game" }), _jsx("p", { className: "text-gray-600 text-sm", children: error })] }) }));
+    }
+    if (!isReady) {
+        if (loadingComponent) {
+            return _jsx(_Fragment, { children: loadingComponent });
+        }
+        return _jsx(GameSkeleton, { message: "Waiting for game state..." });
+    }
+    return (_jsx(RuntimeProvider, { runtime: runtime, children: _jsx(SessionScopedInteractionUiProvider, { children: children }) }));
+}
+function SessionScopedInteractionUiProvider({ children, }) {
+    const { controllingPlayerId } = usePluginSession();
+    return (_jsx(InteractionUiProvider, { children: children }, controllingPlayerId ?? "__no_player__"));
+}

package/dist/components/PrimaryActionButton.d.ts

@@ -0,0 +1,98 @@
+/**
+ * Theme-aware primary CTA button — the dominant call-to-action on
+ * the screen at any given moment ("Roll dice", "End turn", "Confirm
+ * trade", "Place settlement").
+ *
+ * The shell's `chrome.primaryAction` slot accepts either a
+ * pre-rendered React node *or* an {@link InteractionHandle}. When a
+ * handle is supplied, the shell wraps it in this component so the
+ * call site collapses from ~10 lines to one. Authors who need a
+ * fully bespoke CTA can still pass any node.
+ *
+ * Visual contract (Laws of UX cross-references):
+ *
+ * - **Fitts** — defaults to `lg` size (min 56px tall, generous
+ *   horizontal padding) so the dock target is easy to land on.
+ *   Authors can opt down to `md`.
+ * - **Von Restorff (isolation)** — uses `intent.primary.solid` with
+ *   `elevation.lifted` and an animated halo when `attention="auto"`
+ *   and the descriptor is available, so the button outranks every
+ *   other element in its peripheral neighbourhood.
+ * - **Peak-end** — when the action becomes available (handle flips
+ *   from disabled → enabled), the halo pulses for one breath cycle
+ *   so the eye finds the change without re-scanning the screen.
+ * - **Doherty / responsiveness** — clicks set an internal `pending`
+ *   flag the moment submit fires so the button visibly absorbs the
+ *   tap, even on slow networks. Throwing submitters are swallowed
+ *   here for the same reason `<DefaultInteractionButton>` does:
+ *   descriptor availability is authoritative.
+ * - **Accessibility** — minimum 56×56 hit area satisfies WCAG 2.5.5.
+ *   `prefers-reduced-motion` zeroes out the halo and press
+ *   transitions through the theme's `motion.reducedMotion` token.
+ */
+import { type CSSProperties, type ReactNode } from "react";
+import { type ButtonSize, type ButtonVariant } from "../theme/derive.js";
+import type { InteractionHandle, InteractionParamsShape } from "../hooks/useInteractionHandle.js";
+import type { SubmittedActionConfig } from "./surfaces/internal/DefaultInteractionButton.js";
+/** Attention-pulse policy for the trailing halo. */
+export type PrimaryActionAttention = "auto" | "always" | "off";
+export interface PrimaryActionButtonProps<Params extends InteractionParamsShape = InteractionParamsShape> {
+    /**
+     * Bound interaction handle (typically from `useInteractionByKey`).
+     * The button mirrors `descriptor.label`, disables itself when the
+     * descriptor is unavailable, surfaces `unavailableReason` as a
+     * tooltip, and submits explicit `params` or the current draft on click.
+     */
+    handle: InteractionHandle<Params>;
+    /**
+     * Override the visual variant. Defaults to `primary` (which maps
+     * to `intent.primary` regardless of the descriptor's `emphasis`
+     * hint — the shell's primary slot is, by definition, primary).
+     */
+    variant?: ButtonVariant;
+    /**
+     * Sizing. Defaults to `lg` so the dock target is comfortable on
+     * touch and visually outranks panel buttons sized `md`.
+     */
+    size?: ButtonSize;
+    /**
+     * Override the label inferred from `descriptor.label`. Use only
+     * when the descriptor's label needs phase-specific copy that the
+     * authoring layer can't express.
+     */
+    label?: ReactNode;
+    /** Client-side draft readiness. Reducer availability remains authoritative. */
+    ready?: boolean;
+    /** Copy and visual overrides once this interaction has been submitted. */
+    whenSubmitted?: SubmittedActionConfig;
+    /**
+     * Optional leading icon override. When omitted, falls back to
+     * `descriptor.icon` (an emoji glyph from the authoring spec).
+     */
+    icon?: ReactNode;
+    /**
+     * Submit params forwarded to `handle.submit`. When omitted, the button
+     * submits the handle's current draft via `handle.submitDraft()`.
+     */
+    params?: Record<string, unknown>;
+    /**
+     * Attention-halo policy. `auto` (default) pulses the halo for one
+     * breath when the button transitions from disabled → enabled (so
+     * the user sees the moment the action becomes available), then
+     * settles into a slow ambient breath while the action remains
+     * available. `always` keeps the breath running unconditionally.
+     * `off` suppresses the halo entirely.
+     *
+     * Ignored when `theme.motion.reducedMotion === "true"`.
+     */
+    attention?: PrimaryActionAttention;
+    /** Additional inline style merged after the resolved button style. */
+    style?: CSSProperties;
+    /** Optional className for downstream styling hooks. */
+    className?: string;
+}
+/**
+ * @see PrimaryActionButtonProps
+ */
+export declare function PrimaryActionButton<Params extends InteractionParamsShape = InteractionParamsShape>({ handle, variant, size, label, ready, whenSubmitted, icon, params, attention, style, className, }: PrimaryActionButtonProps<Params>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PrimaryActionButton.d.ts.map

package/dist/components/PrimaryActionButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrimaryActionButton.d.ts","sourceRoot":"","sources":["../../src/components/PrimaryActionButton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,aAAa,EACnB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EACV,iBAAiB,EACjB,sBAAsB,EACvB,MAAM,kCAAkC,CAAC;AAG1C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iDAAiD,CAAC;AAE7F,oDAAoD;AACpD,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE/D,MAAM,WAAW,wBAAwB,CACvC,MAAM,SAAS,sBAAsB,GAAG,sBAAsB;IAE9D;;;;;OAKG;IACH,MAAM,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAClC;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0EAA0E;IAC1E,aAAa,CAAC,EAAE,qBAAqB,CAAC;IACtC;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,sBAAsB,CAAC;IACnC,sEAAsE;IACtE,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,SAAS,sBAAsB,GAAG,sBAAsB,EAC9D,EACA,MAAM,EACN,OAAmB,EACnB,IAAW,EACX,KAAK,EACL,KAAY,EACZ,aAAa,EACb,IAAI,EACJ,MAAM,EACN,SAAkB,EAClB,KAAK,EACL,SAAS,GACV,EAAE,wBAAwB,CAAC,MAAM,CAAC,2CA+KlC"}