@dreamboard-games/ui-sdk 0.0.41

package/dist/components/PrimaryActionButton.js

@@ -0,0 +1,183 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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 { useEffect, useRef, useState, } from "react";
+import { motion } from "framer-motion";
+import { useTheme } from "../theme/ThemeProvider.js";
+import { intentForVariant, } from "../theme/derive.js";
+import { interactionLabel } from "../utils/interaction-labels.js";
+import { ThemedButton } from "./ThemedButton.js";
+/**
+ * @see PrimaryActionButtonProps
+ */
+export function PrimaryActionButton({ handle, variant = "primary", size = "lg", label, ready = true, whenSubmitted, icon, params, attention = "auto", style, className, }) {
+    const theme = useTheme();
+    const reducedMotion = theme.motion.reducedMotion === "true";
+    const [pending, setPending] = useState(false);
+    const descriptor = handle.descriptor;
+    const submitted = handle.status === "submitted";
+    const submitting = handle.status === "submitting" || pending;
+    const available = descriptor.available && ready && !submitted && !submitting;
+    const resolvedVariant = submitted
+        ? (whenSubmitted?.variant ?? "submitted")
+        : variant;
+    const disabled = !available;
+    const intent = intentForVariant(theme, resolvedVariant);
+    // Pulse the halo for one breath when availability flips on. After
+    // the breath we settle into the ambient cadence (or stop, when
+    // `attention` is `off`). Tracking the previous availability lets
+    // us catch the transition without re-mounting the component.
+    const previouslyAvailableRef = useRef(available);
+    const [pulseKey, setPulseKey] = useState(0);
+    useEffect(() => {
+        if (!previouslyAvailableRef.current && available) {
+            setPulseKey((n) => n + 1);
+        }
+        previouslyAvailableRef.current = available;
+    }, [available]);
+    const haloEnabled = !reducedMotion && available && attention !== "off" && !submitted;
+    const fallbackLabel = interactionLabel(descriptor);
+    const tooltip = available
+        ? undefined
+        : formatUnavailableReason(descriptor.unavailableReason);
+    const resolvedLabel = submitted
+        ? (whenSubmitted?.label ?? label ?? fallbackLabel)
+        : (label ?? fallbackLabel);
+    const resolvedIcon = submitted && whenSubmitted?.icon ? (_jsx("span", { "aria-hidden": true, style: { fontSize: "1.15em" }, children: whenSubmitted.icon })) : ((icon ?? null));
+    return (_jsxs("span", { "data-dreamboard-primary-action": true, "data-available": available ? "true" : "false", "data-pending": submitting ? "true" : undefined, "data-action-state": submitted
+            ? "submitted"
+            : submitting
+                ? "submitting"
+                : available
+                    ? "available"
+                    : "unavailable", style: {
+            position: "relative",
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            // The halo overflows the button bounds; the wrapper reserves
+            // a transparent buffer so it doesn't get clipped by the
+            // dock's safe-area frame.
+            padding: theme.space[1],
+        }, children: [haloEnabled ? (_jsxs(_Fragment, { children: [_jsx(motion.span, { "aria-hidden": true, style: {
+                            position: "absolute",
+                            inset: 0,
+                            borderRadius: theme.radius.md,
+                            background: intent.soft,
+                            opacity: 0.55,
+                            pointerEvents: "none",
+                        }, animate: {
+                            scale: [1, 1.06, 1],
+                            opacity: [0.45, 0.18, 0.45],
+                        }, transition: {
+                            repeat: Infinity,
+                            duration: 2.4,
+                            ease: "easeInOut",
+                        } }), _jsx(motion.span, { "aria-hidden": true, style: {
+                            position: "absolute",
+                            inset: 0,
+                            borderRadius: theme.radius.md,
+                            boxShadow: `0 0 0 0 ${intent.solid}`,
+                            pointerEvents: "none",
+                        }, initial: { opacity: 0.7 }, animate: {
+                            boxShadow: [
+                                `0 0 0 0 ${withAlpha(intent.solid, 0.55)}`,
+                                `0 0 0 14px ${withAlpha(intent.solid, 0)}`,
+                            ],
+                            opacity: [0.7, 0],
+                        }, transition: { duration: 0.9, ease: "easeOut" } }, pulseKey)] })) : null, _jsxs(ThemedButton, { type: "button", variant: resolvedVariant, size: size, pressed: submitting, className: className, "aria-label": typeof resolvedLabel === "string" ? resolvedLabel : fallbackLabel, "aria-disabled": disabled || undefined, "data-interaction-id": descriptor.interactionId, "data-emphasis": "primary", title: tooltip, disabled: disabled, style: {
+                    // Sit above the halo so clicks land on the button.
+                    position: "relative",
+                    zIndex: 1,
+                    boxShadow: disabled || submitted ? undefined : theme.elevation.lifted,
+                    ...style,
+                }, onClick: async (event) => {
+                    event.preventDefault();
+                    if (disabled)
+                        return;
+                    setPending(true);
+                    try {
+                        if (params !== undefined) {
+                            await handle.submit(params);
+                        }
+                        else {
+                            await handle.submitDraft();
+                        }
+                    }
+                    catch {
+                        // Descriptor availability is authoritative; submit errors
+                        // surface via the runtime's error channel.
+                    }
+                    finally {
+                        setPending(false);
+                    }
+                }, children: [resolvedIcon, _jsx("span", { children: resolvedLabel })] })] }));
+}
+function formatUnavailableReason(reason) {
+    if (reason === "INSUFFICIENT_RESOURCES") {
+        return "Insufficient resources";
+    }
+    return reason;
+}
+/**
+ * Add an alpha channel to a CSS colour string. Supports `#rgb`,
+ * `#rrggbb`, and any colour the browser can paint via a fallback to
+ * `color-mix` (modern Safari/Chrome/Firefox all support this; older
+ * runtimes get the original colour without alpha which is still
+ * visible — the halo is decorative).
+ */
+function withAlpha(color, alpha) {
+    const trimmed = color.trim();
+    if (trimmed.startsWith("#")) {
+        const hex = trimmed.slice(1);
+        if (hex.length === 3) {
+            // `String.prototype.slice` always returns a string (possibly
+            // empty) — never `undefined` — so duplicating each digit is
+            // safe to feed to `parseInt` without further narrowing.
+            const r = parseInt(hex.slice(0, 1).repeat(2), 16);
+            const g = parseInt(hex.slice(1, 2).repeat(2), 16);
+            const b = parseInt(hex.slice(2, 3).repeat(2), 16);
+            return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+        }
+        if (hex.length === 6) {
+            const r = parseInt(hex.slice(0, 2), 16);
+            const g = parseInt(hex.slice(2, 4), 16);
+            const b = parseInt(hex.slice(4, 6), 16);
+            return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+        }
+    }
+    // Best-effort fallback for non-hex colours (rgb/hsl/named): use
+    // `color-mix` with transparent. Safe to land in inline style — the
+    // halo is purely decorative and will gracefully degrade.
+    return `color-mix(in srgb, ${trimmed} ${Math.round(alpha * 100)}%, transparent)`;
+}

package/dist/components/PrimaryButton.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Minimally-styled primary action button.
+ *
+ * Visual styling now flows through {@link buttonStyle}: the background,
+ * border, foreground, radius, typography and elevation all derive from
+ * the active {@link useTheme}'s `intent.primary` slot. Override the
+ * variant when a non-primary call site needs a different emphasis (the
+ * underlying `<DefaultInteractionButton>` is the canonical button for
+ * interaction-bound submission).
+ */
+import type { ButtonHTMLAttributes } from "react";
+import type { ButtonSize, ButtonVariant } from "../theme/derive.js";
+export interface PrimaryButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Intent slot — defaults to `primary`. */
+    variant?: ButtonVariant;
+    /** Sizing token — defaults to `md`. */
+    size?: ButtonSize;
+}
+export declare function PrimaryButton({ children, disabled, style, variant, size, ...rest }: PrimaryButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PrimaryButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../src/components/PrimaryButton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGpE,MAAM,WAAW,kBACf,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/C,2CAA2C;IAC3C,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,uCAAuC;IACvC,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,OAAmB,EACnB,IAAW,EACX,GAAG,IAAI,EACR,EAAE,kBAAkB,2CAapB"}

package/dist/components/PrimaryButton.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThemedButton } from "./ThemedButton.js";
+export function PrimaryButton({ children, disabled, style, variant = "primary", size = "md", ...rest }) {
+    return (_jsx(ThemedButton, { type: "button", disabled: disabled, variant: variant, size: size, style: style, ...rest, children: children }));
+}

package/dist/components/PromptDialogHost.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+import type { InteractionContextOption, InteractionDescriptor } from "../types/plugin-state.js";
+export interface PromptDialogHostProps {
+    contentClassName?: string;
+    messageClassName?: string;
+    optionClassName?: string;
+    optionsClassName?: string;
+    overlayClassName?: string;
+    titleClassName?: string;
+    renderBody?: (prompt: InteractionDescriptor) => ReactNode;
+    renderOptionLabel?: (option: InteractionContextOption, prompt: InteractionDescriptor) => ReactNode;
+    onSubmitError?: (error: unknown, prompt: InteractionDescriptor, option: InteractionContextOption) => void;
+}
+export declare function PromptDialogHost(props: PromptDialogHostProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=PromptDialogHost.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PromptDialogHost.d.ts","sourceRoot":"","sources":["../../src/components/PromptDialogHost.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK5D,OAAO,KAAK,EACV,wBAAwB,EACxB,qBAAqB,EACtB,MAAM,0BAA0B,CAAC;AAElC,MAAM,WAAW,qBAAqB;IACpC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,SAAS,CAAC;IAC1D,iBAAiB,CAAC,EAAE,CAClB,MAAM,EAAE,wBAAwB,EAChC,MAAM,EAAE,qBAAqB,KAC1B,SAAS,CAAC;IACf,aAAa,CAAC,EAAE,CACd,KAAK,EAAE,OAAO,EACd,MAAM,EAAE,qBAAqB,EAC7B,MAAM,EAAE,wBAAwB,KAC7B,IAAI,CAAC;CACX;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,kDAO5D"}

package/dist/components/PromptDialogHost.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { clsx } from "clsx";
+import { Dialog, DialogContent, DialogTitle } from "../internal/ui/dialog.js";
+import { useSeatInbox } from "../hooks/useSeatInbox.js";
+import { Prompt } from "../primitives/prompt.js";
+export function PromptDialogHost(props) {
+    const { prompts } = useSeatInbox();
+    const prompt = prompts[0];
+    if (!prompt)
+        return null;
+    return (_jsx(PromptDialog, { prompt: prompt, ...props }, prompt.interactionKey));
+}
+function PromptDialog({ contentClassName, messageClassName, optionClassName, optionsClassName, overlayClassName, prompt, renderBody, renderOptionLabel, titleClassName, onSubmitError, }) {
+    const [open, setOpen] = useState(true);
+    useEffect(() => {
+        setOpen(true);
+    }, [prompt.interactionKey]);
+    return (_jsx(Dialog, { open: open, onOpenChange: setOpen, children: _jsx(DialogContent, { className: contentClassName, overlayClassName: overlayClassName, children: _jsxs(Prompt.Root, { interaction: prompt.interactionKey, children: [_jsx(DialogTitle, { className: titleClassName, children: _jsx(Prompt.Title, {}) }), _jsx(Prompt.Message, { className: messageClassName }), renderBody?.(prompt), _jsx("div", { className: clsx("flex flex-wrap gap-2", optionsClassName), children: (prompt.context?.options ?? []).map((option) => (_jsx(Prompt.Option, { className: optionClassName, value: option.id, onSubmitSuccess: () => setOpen(false), onSubmitError: (error) => onSubmitError?.(error, prompt, option), children: renderOptionLabel?.(option, prompt) ??
+                                option.label ??
+                                option.id }, option.id))) })] }) }) }));
+}

package/dist/components/ResourceCounter.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Displays resource counts with icons and animated updates.
+ *
+ * The chip frame (border, fill, shadow, padding, gap) is sourced from
+ * the active {@link useTheme}. Authors can still override per-chip
+ * colours via {@link ResourceDisplayConfig.bgColor} /
+ * {@link ResourceDisplayConfig.iconColor} / {@link ResourceDisplayConfig.textColor}
+ * (Tailwind class names) — those win over the theme defaults so existing
+ * callers that pass game-specific palettes (Catan: wheat/wood/brick…)
+ * keep their look.
+ */
+import { type ComponentType, type ReactNode } from "react";
+import type { ResourceId } from "@dreamboard/manifest-contract";
+export interface ResourceDisplayConfig {
+    type: ResourceId;
+    label: string;
+    icon: ReactNode | ComponentType<{
+        className?: string;
+        strokeWidth?: number;
+        "aria-hidden"?: string;
+    }>;
+    iconColor?: string;
+    bgColor?: string;
+    textColor?: string;
+}
+export interface ResourceCounterProps {
+    resources: ResourceDisplayConfig[];
+    counts: Record<ResourceId, number>;
+    layout?: "row" | "grid" | "compact";
+    /** Number of columns for grid layout */
+    columns?: number;
+    showZero?: boolean;
+    size?: "sm" | "md" | "lg";
+    onResourceClick?: (resourceType: ResourceId) => void;
+    className?: string;
+}
+export declare function ResourceCounter({ resources, counts, layout, columns, showZero, size, onResourceClick, className, }: ResourceCounterProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ResourceCounter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceCounter.d.ts","sourceRoot":"","sources":["../../src/components/ResourceCounter.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH,OAAO,EAAiB,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAahE,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EACA,SAAS,GACT,aAAa,CAAC;QACZ,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC,CAAC;IACP,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,qBAAqB,EAAE,CAAC;IACnC,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;IACnC,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,SAAS,CAAC;IACpC,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,UAAU,KAAK,IAAI,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,MAAM,EACN,MAAc,EACd,OAAW,EACX,QAAe,EACf,IAAW,EACX,eAAe,EACf,SAAS,GACV,EAAE,oBAAoB,2CAkNtB"}

package/dist/components/ResourceCounter.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Displays resource counts with icons and animated updates.
+ *
+ * The chip frame (border, fill, shadow, padding, gap) is sourced from
+ * the active {@link useTheme}. Authors can still override per-chip
+ * colours via {@link ResourceDisplayConfig.bgColor} /
+ * {@link ResourceDisplayConfig.iconColor} / {@link ResourceDisplayConfig.textColor}
+ * (Tailwind class names) — those win over the theme defaults so existing
+ * callers that pass game-specific palettes (Catan: wheat/wood/brick…)
+ * keep their look.
+ */
+import { motion, AnimatePresence } from "framer-motion";
+import { clsx } from "clsx";
+import { createElement } from "react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "../internal/ui/tooltip.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+export function ResourceCounter({ resources, counts, layout = "row", columns = 5, showZero = true, size = "md", onResourceClick, className, }) {
+    const theme = useTheme();
+    const reducedMotion = theme.motion.reducedMotion === "true";
+    const sizeConfig = {
+        sm: {
+            icon: "w-4 h-4",
+            fontSize: theme.typography.fontSize.sm,
+            paddingBlock: theme.space[1],
+            paddingInline: theme.space[2],
+            gap: theme.space[1],
+        },
+        md: {
+            icon: "w-5 h-5",
+            fontSize: theme.typography.fontSize.md,
+            paddingBlock: theme.space[1.5],
+            paddingInline: theme.space[3],
+            gap: theme.space[1.5],
+        },
+        lg: {
+            icon: "w-6 h-6",
+            fontSize: theme.typography.fontSize.lg,
+            paddingBlock: theme.space[2],
+            paddingInline: theme.space[4],
+            gap: theme.space[2],
+        },
+    };
+    const styles = sizeConfig[size];
+    const filteredResources = showZero
+        ? resources
+        : resources.filter((r) => (counts[r.type] ?? 0) > 0);
+    // Base chip styling pulled from the theme. Caller-supplied
+    // `bgColor`/`textColor` (Tailwind classes) override these inline
+    // defaults via the `style` cascade — when a Tailwind class sets
+    // `background-color`, it wins because we don't pass `background`
+    // when the caller provided a `bgColor` class.
+    const baseChipStyle = (bgColorClass) => ({
+        display: "inline-flex",
+        alignItems: "center",
+        gap: styles.gap,
+        paddingBlock: styles.paddingBlock,
+        paddingInline: styles.paddingInline,
+        borderRadius: theme.radius.md,
+        border: `2px solid ${theme.semantic.border.default}`,
+        background: bgColorClass ? undefined : theme.semantic.surface.card,
+        boxShadow: theme.elevation.rest,
+        fontFamily: theme.typography.fontFamily.body,
+        transition: `transform ${theme.motion.duration.fast} ${theme.motion.easing.out}, box-shadow ${theme.motion.duration.normal} ${theme.motion.easing.out}`,
+    });
+    return (_jsx("div", { className: clsx(layout === "grid" && "grid", layout === "row" && "flex flex-wrap", layout === "compact" && "flex flex-wrap", layout === "row" && "gap-3 sm:gap-4", layout === "compact" && "gap-2", layout === "grid" && "gap-3 sm:gap-4", className), style: layout === "grid"
+            ? {
+                gridTemplateColumns: `repeat(${columns}, 1fr)`,
+                fontFamily: theme.typography.fontFamily.body,
+            }
+            : { fontFamily: theme.typography.fontFamily.body }, role: "list", "aria-label": "Resource counts", children: _jsx(TooltipProvider, { delayDuration: 200, children: _jsx(AnimatePresence, { mode: "popLayout", children: filteredResources.map(({ type, label, icon, iconColor, bgColor, textColor }) => {
+                    const count = counts[type] ?? 0;
+                    const iconNode = typeof icon === "function" ? (createElement(icon, {
+                        className: clsx(styles.icon, iconColor),
+                        strokeWidth: 2.5,
+                        "aria-hidden": "true",
+                    })) : (_jsx("span", { className: clsx(styles.icon, iconColor), "aria-hidden": "true", style: {
+                            display: "inline-flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            fontSize: "1.1em",
+                        }, children: icon }));
+                    const content = (_jsxs(_Fragment, { children: [iconNode, _jsx(motion.span, { initial: reducedMotion ? { scale: 1 } : { scale: 1.5 }, animate: { scale: 1 }, className: clsx("font-bold", textColor), style: {
+                                    fontSize: styles.fontSize,
+                                    fontFamily: theme.typography.fontFamily.tabular,
+                                    fontWeight: theme.typography.fontWeight.bold,
+                                    color: textColor
+                                        ? undefined
+                                        : theme.semantic.text.primary,
+                                }, children: count }, count)] }));
+                    const sharedClassName = clsx("flex items-center focus-visible:outline-none", bgColor, onResourceClick
+                        ? "cursor-pointer focus-visible:ring-2 focus-visible:ring-offset-2"
+                        : "cursor-help");
+                    const sharedStyle = {
+                        ...baseChipStyle(bgColor),
+                        color: textColor ? undefined : theme.semantic.text.primary,
+                    };
+                    const focusVisibleStyle = onResourceClick
+                        ? {
+                            // Theming the focus ring requires a CSS variable hop
+                            // because Tailwind's focus-visible:ring-offset uses
+                            // `--tw-ring-offset-color`. We expose the theme
+                            // border.focus token here so consumers without our
+                            // Tailwind preset still get a visible ring.
+                            "--tw-ring-color": theme.semantic.border.focus,
+                            "--tw-ring-offset-color": theme.semantic.surface.app,
+                        }
+                        : {};
+                    const chip = onResourceClick ? (_jsx("button", { type: "button", onClick: () => onResourceClick(type), className: sharedClassName, style: { ...sharedStyle, ...focusVisibleStyle }, "aria-label": `${label}: ${count}`, children: content })) : (_jsx("div", { className: sharedClassName, style: sharedStyle, "aria-label": `${label}: ${count}`, children: content }));
+                    return (_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 }, whileHover: onResourceClick && !reducedMotion
+                            ? { scale: 1.05 }
+                            : undefined, whileTap: onResourceClick && !reducedMotion
+                            ? { scale: 0.95 }
+                            : undefined, role: "listitem", children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: chip }), _jsxs(TooltipContent, { side: "top", sideOffset: 6, children: [_jsx("p", { className: "font-sans text-sm font-bold", children: label }), _jsxs("p", { className: "font-sans text-xs font-normal opacity-90", children: ["Quantity: ", count] })] })] }) }, type));
+                }) }) }) }));
+}

package/dist/components/ThemedButton.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentProps } from "react";
+import { Button as ShadcnButton } from "../internal/ui/button.js";
+import { type ButtonSize, type ButtonVariant } from "../theme/derive.js";
+type ShadcnButtonProps = ComponentProps<typeof ShadcnButton>;
+export interface ThemedButtonProps extends Omit<ShadcnButtonProps, "variant" | "size"> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    pressed?: boolean;
+}
+export declare function ThemedButton({ variant, size, pressed, disabled, className, style, ...props }: ThemedButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ThemedButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemedButton.d.ts","sourceRoot":"","sources":["../../src/components/ThemedButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,aAAa,EACnB,MAAM,oBAAoB,CAAC;AAG5B,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AAE7D,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,iBAAiB,EAAE,SAAS,GAAG,MAAM,CAAC;IACnD,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAmB,EACnB,IAAW,EACX,OAAe,EACf,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAkBnB"}

package/dist/components/ThemedButton.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Button as ShadcnButton } from "../internal/ui/button.js";
+import { buttonStyle, } from "../theme/derive.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+export function ThemedButton({ variant = "primary", size = "md", pressed = false, disabled, className, style, ...props }) {
+    const theme = useTheme();
+    return (_jsx(ShadcnButton, { variant: toShadcnVariant(variant), size: toShadcnSize(size), disabled: disabled, "data-dreamboard-button": true, "data-dreamboard-button-variant": variant, "data-dreamboard-button-size": size, className: clsx("font-sans", className), style: {
+            ...buttonStyle(theme, { variant, size, disabled, pressed }),
+            ...style,
+        }, ...props }));
+}
+function toShadcnVariant(variant) {
+    switch (variant) {
+        case "danger":
+            return "destructive";
+        case "ghost":
+            return "ghost";
+        case "secondary":
+            return "secondary";
+        case "primary":
+        case "submitted":
+        case "success":
+        case "warning":
+        case "info":
+            return "default";
+    }
+}
+function toShadcnSize(size) {
+    switch (size) {
+        case "sm":
+            return "sm";
+        case "md":
+            return "default";
+        case "lg":
+            return "lg";
+    }
+}

package/dist/components/Toast.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Plugin-internal toast notification system.
+ *
+ * `<ToastProvider>` exposes a `useToast()` API that game authors call
+ * imperatively to surface their own game-specific feedback ("Resource
+ * gained", "Card discarded", "Tip: rotate the board with R", …). It
+ * is intentionally NOT wired to the host notification stream:
+ * `YOUR_TURN`, `PROMPT_OPENED` and `ACTION_REJECTED` events are owned
+ * by `@dreamboard/ui-host-runtime`'s `<HostFeedbackToaster>` and must
+ * not be mirrored from inside the plugin tree.
+ */
+import { type ReactNode } from "react";
+export type ToastType = "success" | "error" | "info" | "warning";
+export interface Toast {
+    id: string;
+    type: ToastType;
+    message: string;
+    duration?: number;
+}
+interface ToastContextValue {
+    toasts: Toast[];
+    show: (message: string, type?: ToastType, duration?: number) => void;
+    dismiss: (id: string) => void;
+    success: (message: string, duration?: number) => void;
+    error: (message: string, duration?: number) => void;
+    info: (message: string, duration?: number) => void;
+    warning: (message: string, duration?: number) => void;
+}
+export interface ToastProviderProps {
+    children: ReactNode;
+}
+export declare function ToastProvider({ children }: ToastProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useToast(): ToastContextValue;
+export {};
+//# sourceMappingURL=Toast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../src/components/Toast.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAKH,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAMf,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAEjE,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,iBAAiB;IACzB,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,SAAS,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,KAAK,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD;AAID,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CA4D7D;AAED,wBAAgB,QAAQ,sBAMvB"}

package/dist/components/Toast.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Plugin-internal toast notification system.
+ *
+ * `<ToastProvider>` exposes a `useToast()` API that game authors call
+ * imperatively to surface their own game-specific feedback ("Resource
+ * gained", "Card discarded", "Tip: rotate the board with R", …). It
+ * is intentionally NOT wired to the host notification stream:
+ * `YOUR_TURN`, `PROMPT_OPENED` and `ACTION_REJECTED` events are owned
+ * by `@dreamboard/ui-host-runtime`'s `<HostFeedbackToaster>` and must
+ * not be mirrored from inside the plugin tree.
+ */
+import { motion, AnimatePresence } from "framer-motion";
+import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from "lucide-react";
+import { Alert, AlertDescription } from "../internal/ui/alert.js";
+import { createContext, useContext, useState, useCallback, } from "react";
+import { useTheme } from "../theme/ThemeProvider.js";
+import { intentForVariant } from "../theme/derive.js";
+import { ThemedButton } from "./ThemedButton.js";
+const ToastContext = createContext(null);
+export function ToastProvider({ children }) {
+    const [toasts, setToasts] = useState([]);
+    const show = useCallback((message, type = "info", duration = 3000) => {
+        const id = `toast-${Date.now()}-${Math.random()}`;
+        const toast = { id, type, message, duration };
+        setToasts((prev) => {
+            // Dedup by `(type, message)` so a fast burst of identical
+            // toasts collapses to one visible toast instead of stacking
+            // and producing the flicker effect (toast-1 dismisses while
+            // toast-2 mounts → user sees a flash). Keep the existing
+            // entry untouched so its dismiss timer continues.
+            if (prev.some((item) => item.type === type && item.message === message)) {
+                return prev;
+            }
+            return [...prev, toast];
+        });
+        if (duration > 0) {
+            setTimeout(() => {
+                setToasts((prev) => prev.filter((t) => t.id !== id));
+            }, duration);
+        }
+    }, []);
+    const dismiss = useCallback((id) => {
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, []);
+    const success = useCallback((message, duration) => show(message, "success", duration), [show]);
+    const error = useCallback((message, duration) => show(message, "error", duration), [show]);
+    const info = useCallback((message, duration) => show(message, "info", duration), [show]);
+    const warning = useCallback((message, duration) => show(message, "warning", duration), [show]);
+    return (_jsxs(ToastContext.Provider, { value: { toasts, show, dismiss, success, error, info, warning }, children: [children, _jsx(ToastContainer, { toasts: toasts, onDismiss: dismiss })] }));
+}
+export function useToast() {
+    const context = useContext(ToastContext);
+    if (!context) {
+        throw new Error("useToast must be used within ToastProvider");
+    }
+    return context;
+}
+function ToastContainer({ toasts, onDismiss, }) {
+    return (_jsx("div", { className: "fixed bottom-4 right-4 z-50 flex flex-col gap-2 pointer-events-none", role: "region", "aria-live": "polite", "aria-label": "Notifications", children: _jsx(AnimatePresence, { children: toasts.map((toast) => (_jsx(ToastItem, { toast: toast, onDismiss: onDismiss }, toast.id))) }) }));
+}
+const TOAST_ICONS = {
+    success: CheckCircle,
+    error: AlertCircle,
+    info: Info,
+    warning: AlertTriangle,
+};
+const TOAST_VARIANT = {
+    success: "success",
+    error: "danger",
+    info: "info",
+    warning: "warning",
+};
+function toastSurfaceStyle(theme, type) {
+    const intent = intentForVariant(theme, TOAST_VARIANT[type]);
+    return {
+        minWidth: 280,
+        maxWidth: 400,
+        display: "flex",
+        alignItems: "flex-start",
+        gap: theme.space[3],
+        padding: theme.space[4],
+        background: intent.soft,
+        color: intent.onSoft,
+        border: `2px solid ${intent.border}`,
+        borderRadius: theme.radius.lg,
+        boxShadow: theme.elevation.lifted,
+        backdropFilter: "blur(4px)",
+        WebkitBackdropFilter: "blur(4px)",
+        fontFamily: theme.typography.fontFamily.body,
+    };
+}
+function ToastItem({ toast, onDismiss, }) {
+    const theme = useTheme();
+    const reducedMotion = theme.motion.reducedMotion === "true";
+    const Icon = TOAST_ICONS[toast.type];
+    const intent = intentForVariant(theme, TOAST_VARIANT[toast.type]);
+    const surfaceStyle = toastSurfaceStyle(theme, toast.type);
+    return (_jsx(motion.div, { style: { pointerEvents: "auto" }, initial: reducedMotion ? { opacity: 0 } : { opacity: 0, y: 20, scale: 0.9 }, animate: reducedMotion ? { opacity: 1 } : { opacity: 1, y: 0, scale: 1 }, exit: reducedMotion ? { opacity: 0 } : { opacity: 0, x: 100, scale: 0.9 }, transition: { type: "spring", stiffness: 300, damping: 25 }, children: _jsxs(Alert, { variant: toast.type === "error" ? "destructive" : "default", style: surfaceStyle, children: [_jsx(Icon, { size: 20, style: {
+                        marginTop: 2,
+                        flexShrink: 0,
+                        color: intent.solid,
+                    }, "aria-hidden": "true" }), _jsx(AlertDescription, { style: {
+                        flex: 1,
+                        fontSize: theme.typography.fontSize.sm,
+                        fontWeight: theme.typography.fontWeight.medium,
+                        lineHeight: theme.typography.lineHeight.relaxed,
+                        color: intent.onSoft,
+                    }, children: toast.message }), _jsx(ThemedButton, { type: "button", variant: "ghost", size: "sm", onClick: () => onDismiss(toast.id), style: {
+                        height: 28,
+                        width: 28,
+                        flexShrink: 0,
+                        borderRadius: theme.radius.pill,
+                        color: intent.onSoft,
+                    }, "aria-label": "Close notification", children: _jsx(X, { size: 16, "aria-hidden": "true" }) })] }) }));
+}