@dreamboard-games/ui-sdk 0.0.41

package/dist/components/surfaces/ExhaustivenessAudit.d.ts

@@ -0,0 +1,32 @@
+import type { SurfaceRenderMap } from "./types.js";
+/**
+ * Per-surface renderer maps the shell is currently using. `undefined`
+ * values are treated as "use the surface's default renderer".
+ */
+export interface ExhaustivenessAuditProps {
+    panel?: SurfaceRenderMap<string>;
+    handledInteractionKeys?: readonly string[];
+    inbox?: SurfaceRenderMap<string>;
+    chrome?: SurfaceRenderMap<string>;
+    blocker?: SurfaceRenderMap<string>;
+    board?: SurfaceRenderMap<string>;
+}
+/**
+ * Development-only runtime audit that logs a single grouped warning per
+ * mount describing which interaction ids are currently projected onto the
+ * seat's inbox but do not have an explicit renderer override in the
+ * supplied render maps. Useful for catching "oops, I wired a new
+ * interaction but forgot to render it" regressions before CI notices.
+ *
+ * In production builds (`process.env.NODE_ENV === "production"`) this
+ * component is a no-op.
+ *
+ * ```tsx
+ * <ExhaustivenessAudit
+ *   panel={panelRenderers}
+ *   inbox={inboxRenderers}
+ * />
+ * ```
+ */
+export declare function ExhaustivenessAudit(props: ExhaustivenessAuditProps): null;
+//# sourceMappingURL=ExhaustivenessAudit.d.ts.map

package/dist/components/surfaces/ExhaustivenessAudit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExhaustivenessAudit.d.ts","sourceRoot":"","sources":["../../../src/components/surfaces/ExhaustivenessAudit.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEnD;;;GAGG;AACH,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACjC,sBAAsB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3C,KAAK,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAClC,OAAO,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;CAClC;AAQD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,QAkDlE"}

package/dist/components/surfaces/ExhaustivenessAudit.js

@@ -0,0 +1,65 @@
+import { useEffect } from "react";
+import { useSeatInbox } from "../../hooks/useSeatInbox.js";
+const AUDITED_BUCKETS = ["panel", "inbox", "chrome", "blocker", "board"];
+/**
+ * Development-only runtime audit that logs a single grouped warning per
+ * mount describing which interaction ids are currently projected onto the
+ * seat's inbox but do not have an explicit renderer override in the
+ * supplied render maps. Useful for catching "oops, I wired a new
+ * interaction but forgot to render it" regressions before CI notices.
+ *
+ * In production builds (`process.env.NODE_ENV === "production"`) this
+ * component is a no-op.
+ *
+ * ```tsx
+ * <ExhaustivenessAudit
+ *   panel={panelRenderers}
+ *   inbox={inboxRenderers}
+ * />
+ * ```
+ */
+export function ExhaustivenessAudit(props) {
+    const inbox = useSeatInbox();
+    useEffect(() => {
+        const proc = globalThis
+            .process;
+        if (!proc)
+            return;
+        if (proc.env?.NODE_ENV === "production")
+            return;
+        const unhandled = [];
+        const handledInteractionKeys = new Set(props.handledInteractionKeys ?? []);
+        for (const bucket of AUDITED_BUCKETS) {
+            const bySurface = bucket === "board"
+                ? [
+                    ...(inbox.bySurface["board-vertex"] ?? []),
+                    ...(inbox.bySurface["board-edge"] ?? []),
+                    ...(inbox.bySurface["board-tile"] ?? []),
+                    ...(inbox.bySurface["board-space"] ?? []),
+                ]
+                : (inbox.bySurface[bucket] ?? []);
+            const map = props[bucket];
+            for (const descriptor of bySurface) {
+                if (handledInteractionKeys.has(descriptor.interactionKey))
+                    continue;
+                if (!map || !(descriptor.interactionKey in map)) {
+                    unhandled.push({
+                        surface: bucket,
+                        interactionId: descriptor.interactionId,
+                    });
+                }
+            }
+        }
+        if (unhandled.length === 0)
+            return;
+        // eslint-disable-next-line no-console -- dev-only audit
+        console.groupCollapsed(`[dreamboard/ui-sdk] ExhaustivenessAudit: ${unhandled.length} interaction(s) fell through to the default renderer`);
+        for (const entry of unhandled) {
+            // eslint-disable-next-line no-console -- dev-only audit
+            console.warn(`${entry.surface} · ${entry.interactionId}`);
+        }
+        // eslint-disable-next-line no-console -- dev-only audit
+        console.groupEnd();
+    }, [inbox, props]);
+    return null;
+}

package/dist/components/surfaces/InboxSurface.d.ts

@@ -0,0 +1,40 @@
+import { type ReactNode } from "react";
+import { type InteractionHandle } from "../../hooks/useInteractionHandle.js";
+import type { InteractionDescriptor } from "../../types/plugin-state.js";
+import type { InteractionDefaultedKeysOf, InteractionParamsByKeyShape, InteractionParamsOf, SurfaceRenderMap } from "./types.js";
+export interface InboxSurfaceProps<I extends string = never, ParamsByKey extends Partial<InteractionParamsByKeyShape> = {}> {
+    /**
+     * Optional per-interaction overrides. Most prompt-kind interactions do not
+     * need this: if the authored spec declares `options`, the default renderer
+     * draws one button per option and auto-submits on click. Provide a
+     * renderer here to fully replace the default UI for a specific prompt id.
+     */
+    render?: SurfaceRenderMap<I, ParamsByKey>;
+    /**
+     * Fallback renderer for inbox items without an entry in `render`. Called
+     * whenever the default option-button layout doesn't fit — e.g., when a
+     * prompt has no `context.options`. Defaults to the standard
+     * `DefaultInteractionButton` which surfaces `label`, `icon`, `emphasis`,
+     * and `unavailableReason`.
+     */
+    renderItem?: (descriptor: InteractionDescriptor<I>, handle: InteractionHandle<InteractionParamsOf<ParamsByKey, I>, InteractionDefaultedKeysOf<ParamsByKey, I>>) => ReactNode;
+    /** Shown when no inbox items are addressed to the controlling seat. */
+    empty?: ReactNode;
+    /** Interaction keys intentionally rendered elsewhere, such as dialog groups. */
+    excludeInteractionKeys?: readonly string[];
+}
+/**
+ * Default renderer for `surface: "inbox"` interactions and prompt-kind
+ * interactions addressed to the controlling seat.
+ *
+ * Prompt-kind interactions with an authored `options` list are rendered
+ * as a titled group of buttons; clicking a button submits the
+ * interaction with `{ [firstInputKey]: option.id }`. Action-kind inbox
+ * items fall back to the default button. Provide `render` to override
+ * rendering for a specific interaction id.
+ *
+ * Visual styling is sourced entirely from the active {@link useTheme}
+ * — there is no per-call style override.
+ */
+export declare function InboxSurface<I extends string = never, ParamsByKey extends Partial<InteractionParamsByKeyShape> = {}>({ render, renderItem, empty, excludeInteractionKeys, }: InboxSurfaceProps<I, ParamsByKey>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InboxSurface.d.ts.map

package/dist/components/surfaces/InboxSurface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InboxSurface.d.ts","sourceRoot":"","sources":["../../../src/components/surfaces/InboxSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,qCAAqC,CAAC;AAG7C,OAAO,KAAK,EAEV,qBAAqB,EACtB,MAAM,6BAA6B,CAAC;AAKrC,OAAO,KAAK,EACV,0BAA0B,EAC1B,2BAA2B,EAC3B,mBAAmB,EACnB,gBAAgB,EACjB,MAAM,YAAY,CAAC;AAEpB,MAAM,WAAW,iBAAiB,CAChC,CAAC,SAAS,MAAM,GAAG,KAAK,EACxB,WAAW,SAAS,OAAO,CAAC,2BAA2B,CAAC,GAAG,EAAE;IAE7D;;;;;OAKG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC;IAC1C;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,CACX,UAAU,EAAE,qBAAqB,CAAC,CAAC,CAAC,EACpC,MAAM,EAAE,iBAAiB,CACvB,mBAAmB,CAAC,WAAW,EAAE,CAAC,CAAC,EACnC,0BAA0B,CAAC,WAAW,EAAE,CAAC,CAAC,CAC3C,KACE,SAAS,CAAC;IACf,uEAAuE;IACvE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gFAAgF;IAChF,sBAAsB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CAC5C;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,YAAY,CAC1B,CAAC,SAAS,MAAM,GAAG,KAAK,EACxB,WAAW,SAAS,OAAO,CAAC,2BAA2B,CAAC,GAAG,EAAE,EAC7D,EACA,MAAM,EACN,UAAU,EACV,KAAY,EACZ,sBAAsB,GACvB,EAAE,iBAAiB,CAAC,CAAC,EAAE,WAAW,CAAC,2CA4BnC"}

package/dist/components/surfaces/InboxSurface.js

@@ -0,0 +1,99 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useSeatInbox } from "../../hooks/useSeatInbox.js";
+import { useInteractionHandle, } from "../../hooks/useInteractionHandle.js";
+import { surfaceStyle } from "../../theme/derive.js";
+import { useTheme } from "../../theme/ThemeProvider.js";
+import { interactionInputKeys } from "../../utils/interaction-inputs.js";
+import { interactionLabel } from "../../utils/interaction-labels.js";
+import { DefaultInteractionButton } from "./internal/DefaultInteractionButton.js";
+import { ThemedButton } from "../ThemedButton.js";
+/**
+ * Default renderer for `surface: "inbox"` interactions and prompt-kind
+ * interactions addressed to the controlling seat.
+ *
+ * Prompt-kind interactions with an authored `options` list are rendered
+ * as a titled group of buttons; clicking a button submits the
+ * interaction with `{ [firstInputKey]: option.id }`. Action-kind inbox
+ * items fall back to the default button. Provide `render` to override
+ * rendering for a specific interaction id.
+ *
+ * Visual styling is sourced entirely from the active {@link useTheme}
+ * — there is no per-call style override.
+ */
+export function InboxSurface({ render, renderItem, empty = null, excludeInteractionKeys, }) {
+    const inbox = useSeatInbox();
+    const excluded = new Set(excludeInteractionKeys ?? []);
+    // Prompt-kind descriptors always carry `surface: "inbox"` (enforced by
+    // the trusted bundle), so `bySurface.inbox` is the unified list of
+    // inbox interactions regardless of origin. Rendering off this single
+    // bucket keeps action-kind and prompt-kind inbox items on equal
+    // footing — the old "prompts first, action-kind fallback" branch
+    // silently dropped action-kind items whenever any prompt was active.
+    const items = (inbox.bySurface.inbox ?? []);
+    const visibleItems = items.filter((descriptor) => !excluded.has(descriptor.interactionKey));
+    if (visibleItems.length === 0)
+        return _jsx(_Fragment, { children: empty });
+    return (_jsx(_Fragment, { children: visibleItems.map((descriptor) => (_jsx(InboxItem, { descriptor: descriptor, render: render, renderItem: renderItem }, descriptor.interactionKey))) }));
+}
+function InboxItem({ descriptor, render, renderItem, }) {
+    const handle = useInteractionHandle(descriptor);
+    const override = render?.[descriptor.interactionKey];
+    if (override)
+        return _jsx(_Fragment, { children: override(descriptor, handle) });
+    const options = descriptor.context?.options;
+    if (descriptor.kind === "prompt" && options && options.length > 0) {
+        return (_jsx(PromptOptionsCard, { descriptor: descriptor, handle: handle, options: options }));
+    }
+    if (renderItem)
+        return _jsx(_Fragment, { children: renderItem(descriptor, handle) });
+    return _jsx(DefaultInteractionButton, { descriptor: descriptor, handle: handle });
+}
+function PromptOptionsCard({ descriptor, handle, options, }) {
+    const theme = useTheme();
+    const [pendingOptionId, setPendingOptionId] = useState(null);
+    // Option submission flows into the interaction's single declared input key
+    // by convention. Authors who need multi-input prompts should provide a
+    // custom renderer via `render` rather than relying on this default layout.
+    const inputKey = interactionInputKeys(descriptor)[0];
+    const title = descriptor.context?.title ?? interactionLabel(descriptor);
+    const containerStyle = {
+        ...surfaceStyle(theme, { tone: "card" }),
+        display: "flex",
+        flexDirection: "column",
+        gap: theme.space[3],
+        padding: theme.space[4],
+    };
+    return (_jsxs("div", { role: "group", "aria-label": title, "data-interaction-id": descriptor.interactionId, "data-surface": "inbox", style: containerStyle, children: [_jsx("div", { style: {
+                    fontFamily: theme.typography.fontFamily.display,
+                    fontSize: theme.typography.fontSize.lg,
+                    fontWeight: theme.typography.fontWeight.bold,
+                    color: theme.semantic.text.primary,
+                    lineHeight: theme.typography.lineHeight.tight,
+                }, children: title }), _jsx("div", { style: {
+                    display: "flex",
+                    flexDirection: "row",
+                    flexWrap: "wrap",
+                    gap: theme.space[2],
+                }, children: options.map((option) => {
+                    const isPending = pendingOptionId === option.id;
+                    const disabled = isPending || !descriptor.available || inputKey === undefined;
+                    return (_jsx(ThemedButton, { type: "button", variant: "secondary", size: "md", pressed: isPending, "data-option-id": option.id, disabled: disabled, "aria-label": option.label ?? option.id, onClick: async (event) => {
+                            event.preventDefault();
+                            if (disabled || !inputKey)
+                                return;
+                            setPendingOptionId(option.id);
+                            try {
+                                await handle.submit({ [inputKey]: option.id });
+                            }
+                            catch {
+                                // Submission errors flow through the runtime's
+                                // notification channel; we swallow here so the option
+                                // buttons re-enable on failure.
+                            }
+                            finally {
+                                setPendingOptionId(null);
+                            }
+                        }, children: option.label ?? option.id }, option.id));
+                }) })] }));
+}

package/dist/components/surfaces/MarketSurface.d.ts

@@ -0,0 +1,62 @@
+import { type ReactNode } from "react";
+import type { InteractionDescriptor } from "../../types/plugin-state.js";
+import type { InteractionActionState, InteractionDisabledReason } from "../../utils/interaction-status.js";
+import type { ViewCard } from "@dreamboard/sdk-types";
+import { type CardZoneInteractionContext } from "./internal/useCardZoneInteractions.js";
+export interface MarketPile<I extends string = string> {
+    zoneId: string;
+    cards: readonly ViewCard[];
+    topCard: ViewCard | null;
+    count: number;
+    interactions: ReadonlyArray<InteractionDescriptor<I>>;
+    primaryInteraction: InteractionDescriptor<I> | null;
+    disabled: boolean;
+    disabledReason?: InteractionDisabledReason;
+    actionState: InteractionActionState;
+    play: (() => Promise<void>) | null;
+}
+export interface MarketGroup<I extends string = string> {
+    id: string;
+    label: string;
+    showLabel: boolean;
+    chrome: MarketGroupChrome;
+    tone: MarketGroupTone;
+    piles: ReadonlyArray<MarketPile<I>>;
+}
+export interface MarketSurfaceContext<I extends string = string> {
+    groups: ReadonlyArray<MarketGroup<I>>;
+}
+export type MarketGroupChrome = "auto" | "panel" | "plain";
+export type MarketGroupTone = "default" | "subtle" | "accent";
+export type MarketGroupPriority = "primary" | "supporting";
+export interface MarketGroupRenderContext<I extends string = string> {
+    market: MarketSurfaceContext<I>;
+    priority: MarketGroupPriority;
+    renderPile: (pile: MarketPile<I>) => ReactNode;
+    renderPiles: () => ReactNode;
+}
+export interface MarketGroupConfig<ZoneId extends string = string, GroupId extends string = string> {
+    id: GroupId;
+    label?: string | false;
+    zones: readonly ZoneId[];
+    chrome?: MarketGroupChrome;
+    tone?: MarketGroupTone;
+}
+export interface MarketLayoutConfig<GroupId extends string = string> {
+    primary?: readonly GroupId[];
+    supporting?: readonly GroupId[];
+}
+export interface MarketSurfaceConfig<I extends string, ZoneId extends string = string, GroupId extends string = string> {
+    groups?: ReadonlyArray<MarketGroupConfig<ZoneId, GroupId>>;
+    layout?: MarketLayoutConfig<GroupId>;
+    renderCardContent?: (card: ViewCard, ctx: CardZoneInteractionContext<I>) => ReactNode;
+    renderPile?: (pile: MarketPile<I>, ctx: MarketSurfaceContext<I>) => ReactNode;
+    renderGroup?: (group: MarketGroup<I>, ctx: MarketGroupRenderContext<I>) => ReactNode;
+    render?: (market: MarketSurfaceContext<I>) => ReactNode;
+}
+export interface MarketSurfaceProps<I extends string = never, ZoneId extends string = string, GroupId extends string = string> extends MarketSurfaceConfig<I, ZoneId, GroupId> {
+    empty?: ReactNode;
+}
+export declare function defineMarketSurface<const Config extends MarketSurfaceConfig<string, string, string>>(config: Config): Config;
+export declare function MarketSurface<I extends string = never, ZoneId extends string = string, GroupId extends string = string>({ groups, layout, renderCardContent, renderPile, renderGroup, render, empty, }: MarketSurfaceProps<I, ZoneId, GroupId>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MarketSurface.d.ts.map

package/dist/components/surfaces/MarketSurface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarketSurface.d.ts","sourceRoot":"","sources":["../../../src/components/surfaces/MarketSurface.tsx"],"names":[],"mappings":"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"}

package/dist/components/surfaces/MarketSurface.js

@@ -0,0 +1,242 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useMemo } from "react";
+import { usePluginState } from "../../context/PluginStateContext.js";
+import { surfaceStyle } from "../../theme/derive.js";
+import { useTheme } from "../../theme/ThemeProvider.js";
+import { Card } from "../Card.js";
+import { useCardZoneInteractions, } from "./internal/useCardZoneInteractions.js";
+export function defineMarketSurface(config) {
+    return config;
+}
+export function MarketSurface({ groups, layout, renderCardContent, renderPile, renderGroup, render, empty = null, }) {
+    const gameplayZones = usePluginState((s) => s.gameplay.zones);
+    const discoveredZoneIds = useMemo(() => discoverMarketZoneIds(gameplayZones), [gameplayZones]);
+    const authoredZoneIds = new Set(groups?.flatMap((group) => [...group.zones].map(String)) ?? []);
+    const omittedZoneIds = discoveredZoneIds.filter((zoneId) => !authoredZoneIds.has(zoneId));
+    const resolvedGroups = groups?.length
+        ? [
+            ...groups.map((group) => ({
+                id: String(group.id),
+                ...resolveGroupLabel(String(group.id), group.label),
+                chrome: group.chrome ?? "auto",
+                tone: group.tone ?? "default",
+                zoneIds: group.zones.map(String),
+            })),
+            ...(omittedZoneIds.length
+                ? [
+                    {
+                        id: "other",
+                        label: "Other",
+                        showLabel: true,
+                        chrome: "auto",
+                        tone: "subtle",
+                        zoneIds: omittedZoneIds,
+                    },
+                ]
+                : []),
+        ]
+        : discoveredZoneIds.length
+            ? [
+                {
+                    id: "market",
+                    label: "Market",
+                    showLabel: true,
+                    chrome: "auto",
+                    tone: "default",
+                    zoneIds: discoveredZoneIds,
+                },
+            ]
+            : [];
+    if (resolvedGroups.length === 0)
+        return _jsx(_Fragment, { children: empty });
+    return (_jsx(MarketSurfaceBody, { groupSpecs: resolvedGroups, layout: layout, renderCardContent: renderCardContent, renderPile: renderPile, renderGroup: renderGroup, render: render, omittedZoneIds: omittedZoneIds }));
+}
+function MarketSurfaceBody({ groupSpecs, layout, renderCardContent, renderPile, renderGroup, render, omittedZoneIds, }) {
+    const pileData = groupSpecs
+        .map((group) => ({
+        id: group.id,
+        label: group.label,
+        showLabel: group.showLabel,
+        chrome: group.chrome,
+        tone: group.tone,
+        piles: group.zoneIds
+            .map((zoneId) => useMarketPile(zoneId))
+            .filter((pile) => pile.count > 0 || pile.interactions.length > 0),
+    }))
+        .filter((group) => group.piles.length > 0);
+    const market = { groups: pileData };
+    const nodeEnv = globalThis
+        .process?.env?.NODE_ENV;
+    if (omittedZoneIds.length && nodeEnv !== "production") {
+        console.warn(`MarketSurface: appended omitted market zones to Other: ${omittedZoneIds.join(", ")}`);
+    }
+    if (render)
+        return _jsx(_Fragment, { children: render(market) });
+    const orderedGroups = orderGroups(pileData, layout);
+    const groupCount = orderedGroups.length;
+    const renderPileNode = (pile) => (_jsx("div", { "data-market-pile": pile.zoneId, "data-disabled": pile.disabled ? "true" : undefined, children: renderPile ? (renderPile(pile, market)) : (_jsx(DefaultMarketPile, { pile: pile, renderCardContent: renderCardContent })) }, pile.zoneId));
+    return (_jsx("div", { "data-market-surface": true, style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 12,
+            width: "100%",
+        }, children: orderedGroups.map(({ group, priority }) => {
+            const renderPiles = () => group.piles.map(renderPileNode);
+            if (renderGroup) {
+                return (_jsx(Fragment, { children: renderGroup(group, {
+                        market,
+                        priority,
+                        renderPile: renderPileNode,
+                        renderPiles,
+                    }) }, group.id));
+            }
+            return (_jsx(DefaultMarketGroup, { group: group, groupCount: groupCount, priority: priority, children: renderPiles() }, group.id));
+        }) }));
+}
+function DefaultMarketGroup({ group, groupCount, priority, children, }) {
+    const theme = useTheme();
+    const resolvedChrome = resolveGroupChrome(group.chrome, groupCount);
+    const density = priority === "supporting" ? "compact" : "comfortable";
+    const sectionStyle = groupSectionStyle(theme, resolvedChrome, group.tone, density);
+    return (_jsxs("section", { "data-market-group": group.id, "data-market-layout": priority, "data-market-chrome": resolvedChrome, "data-market-tone": group.tone, "data-market-density": density, "aria-label": group.label, style: sectionStyle, children: [group.showLabel ? (_jsx("h3", { "data-market-group-title": group.id, style: {
+                    margin: `0 0 ${theme.space[2]}`,
+                    color: group.tone === "accent"
+                        ? theme.semantic.intent.info.onSoft
+                        : theme.semantic.text.muted,
+                    fontFamily: theme.typography.fontFamily.display,
+                    fontSize: theme.typography.fontSize.sm,
+                    fontWeight: theme.typography.fontWeight.bold,
+                    letterSpacing: theme.typography.letterSpacing.caps,
+                    lineHeight: theme.typography.lineHeight.tight,
+                    textTransform: "uppercase",
+                }, children: group.label })) : null, _jsx("div", { style: {
+                    display: "flex",
+                    flexWrap: "wrap",
+                    gap: density === "compact" ? theme.space[2] : theme.space[3],
+                }, children: children })] }));
+}
+function resolveGroupLabel(id, label) {
+    const fallback = humanizeGroupId(id);
+    return label === false
+        ? { label: fallback, showLabel: false }
+        : { label: label ?? fallback, showLabel: true };
+}
+function humanizeGroupId(id) {
+    return id
+        .replace(/[-_]+/g, " ")
+        .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+        .replace(/\s+/g, " ")
+        .trim()
+        .replace(/\b\w/g, (char) => char.toUpperCase());
+}
+function resolveGroupChrome(chrome, groupCount) {
+    if (chrome !== "auto")
+        return chrome;
+    return groupCount > 1 ? "panel" : "plain";
+}
+function groupSectionStyle(theme, chrome, tone, density) {
+    if (chrome === "plain") {
+        return {
+            minWidth: 0,
+        };
+    }
+    const padding = density === "compact"
+        ? `${theme.space[2]} ${theme.space[3]}`
+        : `${theme.space[3]} ${theme.space[4]}`;
+    const style = surfaceStyle(theme, {
+        tone: tone === "subtle" ? "inset" : "card",
+        radius: "hud",
+    });
+    if (tone === "accent") {
+        return {
+            ...style,
+            padding,
+            background: theme.semantic.intent.info.soft,
+            border: `1px solid ${theme.semantic.intent.info.border}`,
+            boxShadow: theme.elevation.rest,
+        };
+    }
+    return {
+        ...style,
+        padding,
+        boxShadow: tone === "subtle" ? theme.elevation.inset : theme.elevation.rest,
+    };
+}
+function useMarketPile(zoneId) {
+    const { cards, contexts } = useCardZoneInteractions(zoneId, {
+        surface: "market",
+    });
+    const topCard = cards[0] ?? null;
+    const ctx = topCard
+        ? contexts.find((item) => item.card.id === topCard.id)
+        : undefined;
+    const available = (ctx?.interactions ?? []).filter((descriptor) => descriptor.available !== false);
+    return {
+        zoneId,
+        cards,
+        topCard,
+        count: cards.length,
+        interactions: ctx?.interactions ?? [],
+        primaryInteraction: available.length === 1 ? (available[0] ?? null) : null,
+        disabled: ctx?.disabled ?? true,
+        disabledReason: ctx?.disabledReason,
+        actionState: ctx?.actionState ?? "unavailable",
+        play: ctx?.play ? async () => ctx.play?.() : null,
+    };
+}
+function DefaultMarketPile({ pile, renderCardContent, }) {
+    if (!pile.topCard)
+        return null;
+    return (_jsxs("div", { style: { position: "relative" }, children: [_jsx(Card, { card: pile.topCard, disabled: pile.disabled, size: "sm", onCardClick: pile.disabled || !pile.play ? undefined : () => void pile.play?.(), renderContent: renderCardContent
+                    ? (card) => renderCardContent(card, {
+                        card,
+                        interactions: pile.interactions,
+                        play: pile.play,
+                        disabled: pile.disabled,
+                        disabledReason: pile.disabledReason,
+                        actionState: pile.actionState,
+                        selected: false,
+                    })
+                    : undefined }), _jsx("span", { "data-market-pile-count": true, style: {
+                    position: "absolute",
+                    right: -6,
+                    bottom: -6,
+                    borderRadius: 999,
+                    padding: "2px 6px",
+                    background: "#111",
+                    color: "#fff",
+                    fontSize: 12,
+                }, children: pile.count })] }));
+}
+function discoverMarketZoneIds(gameplayZones) {
+    const ids = [];
+    for (const [zoneId, zone] of Object.entries(gameplayZones)) {
+        if (zone.cardIds.some((cardId) => (zone.playableByCardId[cardId] ?? []).length > 0))
+            ids.push(zoneId);
+    }
+    return ids;
+}
+function orderGroups(groups, layout) {
+    const byId = new Map(groups.map((group) => [group.id, group]));
+    const seen = new Set();
+    const supportingIds = new Set(layout?.supporting ?? []);
+    const take = (ids, priority) => (ids ?? []).flatMap((id) => {
+        const group = byId.get(id);
+        if (!group || seen.has(id))
+            return [];
+        seen.add(id);
+        return [{ group, priority }];
+    });
+    return [
+        ...take(layout?.primary, "primary"),
+        ...groups
+            .filter((group) => !seen.has(group.id) &&
+            group.id !== "other" &&
+            !supportingIds.has(group.id))
+            .map((group) => ({ group, priority: "primary" })),
+        ...take(layout?.supporting, "supporting"),
+        ...groups
+            .filter((group) => group.id === "other" && !seen.has(group.id))
+            .map((group) => ({ group, priority: "supporting" })),
+    ];
+}