@dreamboard-games/ui-sdk 0.0.41

package/dist/components/HandDock.js

@@ -0,0 +1,124 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger, } from "./Drawer.js";
+import { useChromeSuppression } from "./ChromeSuppressionContext.js";
+import { ThemedButton } from "./ThemedButton.js";
+import { useThemeCssVars } from "../theme/ThemeProvider.js";
+const DEFAULT_MAX_WIDTH = "min(28rem, calc(100vw - 24px))";
+const DEFAULT_MAX_HEIGHT = "min(65vh, calc(100vh - 96px))";
+function placementStyle(placement) {
+    const base = {
+        position: "fixed",
+        bottom: "calc(12px + env(safe-area-inset-bottom, 0px))",
+        zIndex: 900,
+    };
+    switch (placement) {
+        case "bottom-center":
+            return {
+                ...base,
+                left: "50%",
+                transform: "translateX(-50%)",
+            };
+        case "bottom-right":
+            return {
+                ...base,
+                right: "calc(12px + env(safe-area-inset-right, 0px))",
+            };
+        case "bottom-left":
+        default:
+            return {
+                ...base,
+                left: "calc(12px + env(safe-area-inset-left, 0px))",
+            };
+    }
+}
+function triggerAlignment(placement) {
+    switch (placement) {
+        case "bottom-center":
+            return "center";
+        case "bottom-right":
+            return "flex-end";
+        case "bottom-left":
+        default:
+            return "flex-start";
+    }
+}
+function renderToggleLabel(label, count, open, override) {
+    if (typeof override === "function")
+        return override({ label, count, open });
+    if (override !== undefined)
+        return override;
+    return `${label} (${count})`;
+}
+export function HandDock({ label, count, presentation, children, }) {
+    const mode = presentation?.mode ?? "inline";
+    const [open, setOpen] = useState(presentation?.defaultOpen ?? false);
+    const contentId = useId();
+    const themeCssVars = useThemeCssVars();
+    useChromeSuppression(contentId, mode === "drawer" && open);
+    if (mode === "hidden")
+        return null;
+    if (mode === "inline")
+        return _jsx(_Fragment, { children: children });
+    const placement = presentation?.placement ?? "bottom-left";
+    const toggleLabel = renderToggleLabel(label, count, open, presentation?.toggleLabel);
+    const fallbackContentStyle = {
+        maxHeight: presentation?.maxHeight ?? DEFAULT_MAX_HEIGHT,
+        overflow: "auto",
+        padding: 12,
+        pointerEvents: "auto",
+    };
+    const triggerStyle = {
+        alignSelf: triggerAlignment(placement),
+        boxShadow: "0 10px 28px rgba(15, 23, 42, 0.22)",
+        pointerEvents: "auto",
+        visibility: open ? "hidden" : "visible",
+    };
+    const canUsePortal = typeof document !== "undefined";
+    const serverOpenContent = !canUsePortal && open ? (_jsx("div", { id: contentId, role: "region", "aria-label": label, style: fallbackContentStyle, children: children })) : null;
+    return (_jsxs(Drawer, { open: open, onOpenChange: setOpen, direction: "bottom", children: [_jsxs("div", { "data-hand-dock": label, "data-state": open ? "open" : "closed", style: {
+                    ...placementStyle(placement),
+                    display: "flex",
+                    maxWidth: presentation?.maxWidth ?? DEFAULT_MAX_WIDTH,
+                    width: presentation?.maxWidth ?? DEFAULT_MAX_WIDTH,
+                    flexDirection: "column",
+                    alignItems: "stretch",
+                    gap: 8,
+                    pointerEvents: "none",
+                    ...presentation?.style,
+                }, children: [serverOpenContent, _jsx(DrawerTrigger, { asChild: true, children: _jsx(ThemedButton, { type: "button", variant: "secondary", size: "sm", "data-state": open ? "open" : "closed", "aria-expanded": open, "aria-controls": open ? contentId : undefined, className: "rounded-full", style: triggerStyle, children: toggleLabel }) })] }), canUsePortal ? (_jsxs(DrawerContent, { id: contentId, "aria-describedby": undefined, className: "border-border bg-background/95 shadow-2xl backdrop-blur supports-[backdrop-filter]:bg-background/90", style: {
+                    ...themeCssVars,
+                    position: "fixed",
+                    right: 0,
+                    bottom: 0,
+                    left: 0,
+                    zIndex: 50,
+                    display: "flex",
+                    maxHeight: "80vh",
+                    flexDirection: "column",
+                    overflow: "hidden",
+                    borderTop: "1px solid var(--border, #cbd5e1)",
+                    borderTopLeftRadius: 16,
+                    borderTopRightRadius: 16,
+                    background: "var(--background, rgba(255, 255, 255, 0.96))",
+                    color: "var(--foreground, #0f172a)",
+                    fontFamily: "var(--font-sans)",
+                    boxShadow: "0 -18px 48px rgba(15, 23, 42, 0.22)",
+                    backdropFilter: "blur(8px)",
+                }, children: [_jsxs(DrawerHeader, { className: "border-border border-b px-4 pb-3 pt-3 text-left", style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: 4,
+                            borderBottom: "1px solid var(--border, #e2e8f0)",
+                            padding: "12px 16px",
+                            textAlign: "left",
+                        }, children: [_jsx(DrawerTitle, { className: "text-base", style: { fontSize: 16, fontWeight: 600, lineHeight: 1.25 }, children: label }), _jsxs(DrawerDescription, { children: [count, " card", count === 1 ? "" : "s", " available."] })] }), _jsx("div", { role: "region", "aria-label": label, style: {
+                            maxHeight: presentation?.maxHeight ?? DEFAULT_MAX_HEIGHT,
+                            maxWidth: presentation?.maxWidth ?? DEFAULT_MAX_WIDTH,
+                            width: "100%",
+                            margin: "0 auto",
+                            overflow: "auto",
+                            padding: "12px 16px calc(16px + env(safe-area-inset-bottom, 0px))",
+                            boxSizing: "border-box",
+                        }, className: "mx-auto w-full overflow-y-auto px-4 pb-[calc(1rem+env(safe-area-inset-bottom,0px))] pt-3", children: children })] })) : null] }));
+}

package/dist/components/InteractionForm.d.ts

@@ -0,0 +1,50 @@
+import { type CSSProperties, type ReactNode } from "react";
+import type { InteractionHandle, InteractionParamsShape } from "../hooks/useInteractionHandle.js";
+import type { InteractionDescriptor, InteractionInputDescriptor } from "../types/plugin-state.js";
+export interface InteractionFieldRenderProps<Params extends InteractionParamsShape = InteractionParamsShape, Key extends keyof Params & string = keyof Params & string> {
+    descriptor: InteractionDescriptor;
+    input: InteractionInputDescriptor & {
+        key: Key;
+    };
+    handle: InteractionHandle<Params>;
+    value: Params[Key] | undefined;
+    setValue: (value: Params[Key]) => void;
+    clearValue: () => void;
+    errors: readonly string[];
+    missing: boolean;
+    disabled: boolean;
+}
+export type InteractionFieldRenderMap<Params extends InteractionParamsShape = InteractionParamsShape> = Partial<{
+    [K in keyof Params & string]: (props: InteractionFieldRenderProps<Params, K>) => ReactNode;
+}>;
+export interface InteractionFieldProps<Params extends InteractionParamsShape = InteractionParamsShape, Key extends keyof Params & string = keyof Params & string> {
+    descriptor: InteractionDescriptor;
+    inputKey: Key;
+    handle: InteractionHandle<Params>;
+    errors?: readonly string[];
+    missing?: boolean;
+    disabled?: boolean;
+    render?: InteractionFieldRenderMap<Params>[Key];
+}
+export interface InteractionFormProps<Params extends InteractionParamsShape = InteractionParamsShape, DefaultedKeys extends keyof Params & string = never> {
+    descriptor: InteractionDescriptor;
+    handle: InteractionHandle<Params, DefaultedKeys>;
+    fields?: ReadonlyArray<keyof Params & string>;
+    hiddenFields?: ReadonlyArray<keyof Params & string>;
+    renderFields?: InteractionFieldRenderMap<Params>;
+    title?: ReactNode;
+    description?: ReactNode;
+    submitLabel?: ReactNode;
+    cancelLabel?: ReactNode;
+    onCancel?: () => void;
+    onSubmitSuccess?: () => void;
+    disabled?: boolean;
+    accordion?: boolean;
+    defaultOpen?: boolean;
+    style?: CSSProperties;
+}
+export declare function InteractionForm<Params extends InteractionParamsShape = InteractionParamsShape, DefaultedKeys extends keyof Params & string = never>({ descriptor, handle, fields, hiddenFields, renderFields, title, description, submitLabel, cancelLabel, onCancel, onSubmitSuccess, disabled, accordion, defaultOpen, style, }: InteractionFormProps<Params, DefaultedKeys>): import("react/jsx-runtime").JSX.Element;
+export declare function InteractionField<Params extends InteractionParamsShape = InteractionParamsShape, Key extends keyof Params & string = keyof Params & string>({ descriptor, inputKey, handle, errors, missing, disabled, render, }: InteractionFieldProps<Params, Key>): import("react/jsx-runtime").JSX.Element | null;
+export declare function hasDefaultInteractionFormFields(descriptor: Pick<InteractionDescriptor, "inputs">): boolean;
+export declare function defaultFormInputs(descriptor: Pick<InteractionDescriptor, "inputs">): InteractionInputDescriptor[];
+//# sourceMappingURL=InteractionForm.d.ts.map

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

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

package/dist/components/InteractionForm.js

@@ -0,0 +1,402 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useState, } from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { Input } from "../internal/ui/input.js";
+import { Label } from "../internal/ui/label.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, } from "../internal/ui/select.js";
+import { surfaceStyle } from "../theme/derive.js";
+import { useTheme, useThemeCssVars } from "../theme/ThemeProvider.js";
+import { interactionLabel } from "../utils/interaction-labels.js";
+import { useChromeSuppression } from "./ChromeSuppressionContext.js";
+import { ThemedButton } from "./ThemedButton.js";
+const EMPTY_FIELD_ERRORS = [];
+export function InteractionForm({ descriptor, handle, fields, hiddenFields, renderFields, title, description, submitLabel, cancelLabel = "Cancel", onCancel, onSubmitSuccess, disabled = false, accordion = true, defaultOpen = false, style, }) {
+    const theme = useTheme();
+    const fallbackLabel = interactionLabel(descriptor);
+    const formId = useId();
+    useChromeSuppression(formId, true);
+    const [pending, setPending] = useState(false);
+    const [validation, setValidation] = useState(null);
+    const [formError, setFormError] = useState(null);
+    const [accordionOpen, setAccordionOpen] = useState(defaultOpen);
+    const hidden = useMemo(() => new Set(hiddenFields ?? []), [hiddenFields]);
+    const visibleInputs = useMemo(() => {
+        const allowed = fields ? new Set(fields) : null;
+        return defaultFormInputs(descriptor).filter((input) => {
+            const key = input.key;
+            if (allowed && !allowed.has(key))
+                return false;
+            return !hidden.has(key);
+        });
+    }, [descriptor, fields, hidden]);
+    const currentValidation = validation;
+    const fieldErrors = (currentValidation?.fieldErrors ?? {});
+    const missing = new Set(currentValidation?.missing ?? []);
+    const formErrors = [
+        ...(currentValidation?.formErrors ?? []),
+        ...(formError ? [formError] : []),
+    ];
+    const isDisabled = disabled || pending || !descriptor.available;
+    const useAccordion = accordion && visibleInputs.length > 0;
+    useEffect(() => {
+        setAccordionOpen(defaultOpen);
+    }, [defaultOpen, descriptor.interactionId]);
+    const containerStyle = {
+        ...surfaceStyle(theme, { tone: "card" }),
+        display: "flex",
+        flexDirection: "column",
+        gap: theme.space[2],
+        padding: theme.space[3],
+        minWidth: "min(100%, 280px)",
+        boxSizing: "border-box",
+        fontFamily: theme.typography.fontFamily.body,
+        ...style,
+    };
+    const submit = async (event) => {
+        event.preventDefault();
+        if (isDisabled)
+            return;
+        const nextValidation = handle.validateDraft();
+        setValidation(nextValidation);
+        setFormError(null);
+        if (!nextValidation.ok) {
+            setAccordionOpen(true);
+            return;
+        }
+        setPending(true);
+        try {
+            await handle.submitDraft();
+            onSubmitSuccess?.();
+            setAccordionOpen(defaultOpen);
+        }
+        catch (error) {
+            setAccordionOpen(true);
+            setFormError(error instanceof Error
+                ? error.message
+                : "Interaction submission failed");
+        }
+        finally {
+            setPending(false);
+        }
+    };
+    const header = (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [_jsx("strong", { style: {
+                    fontFamily: theme.typography.fontFamily.display,
+                    fontSize: theme.typography.fontSize.md,
+                    color: theme.semantic.text.primary,
+                }, children: title ?? fallbackLabel }), description ? (_jsx("span", { style: {
+                    fontSize: theme.typography.fontSize.sm,
+                    color: theme.semantic.text.muted,
+                }, children: description })) : null] }));
+    const fieldsContent = visibleInputs.length > 0 ? (_jsx("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: theme.space[3],
+        }, children: visibleInputs.map((input) => {
+            const key = input.key;
+            return (_jsx(InteractionField, { descriptor: descriptor, inputKey: key, handle: handle, errors: fieldErrors[key] ?? [], missing: missing.has(key), disabled: isDisabled, render: renderFields?.[key] }, input.key));
+        }) })) : (_jsx("span", { style: {
+            fontSize: theme.typography.fontSize.sm,
+            color: theme.semantic.text.muted,
+        }, children: "No visible fields are required. Board or card selection may complete this interaction." }));
+    const formErrorContent = formErrors.length > 0 ? (_jsx("div", { role: "alert", style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: theme.space[1],
+            color: theme.semantic.intent.danger.solid,
+            fontSize: theme.typography.fontSize.sm,
+        }, children: formErrors.map((error) => (_jsx("span", { children: error }, error))) })) : null;
+    const actions = (_jsxs("div", { style: {
+            display: "flex",
+            gap: theme.space[2],
+            justifyContent: "flex-end",
+        }, children: [onCancel ? (_jsx(ThemedButton, { type: "button", variant: "secondary", size: "sm", disabled: pending, onClick: onCancel, className: "h-9 px-3 text-sm", children: cancelLabel })) : null, _jsx(ThemedButton, { type: "submit", variant: "primary", size: "sm", disabled: isDisabled, className: "h-9 px-3 text-sm", children: pending ? "Submitting..." : (submitLabel ?? fallbackLabel) })] }));
+    const body = (_jsxs(_Fragment, { children: [fieldsContent, formErrorContent, actions] }));
+    return (_jsx("form", { "data-interaction-form": true, "data-interaction-id": descriptor.interactionId, onSubmit: (event) => void submit(event), style: containerStyle, children: useAccordion ? (_jsx(AccordionPrimitive.Root, { type: "single", collapsible: true, value: accordionOpen ? "fields" : undefined, onValueChange: (value) => setAccordionOpen(value === "fields"), children: _jsxs(AccordionPrimitive.Item, { value: "fields", children: [_jsx(AccordionPrimitive.Header, { style: { margin: 0 }, children: _jsxs(AccordionPrimitive.Trigger, { style: {
+                                alignItems: "center",
+                                appearance: "none",
+                                background: "transparent",
+                                border: 0,
+                                color: theme.semantic.text.primary,
+                                cursor: "pointer",
+                                display: "flex",
+                                fontFamily: theme.typography.fontFamily.display,
+                                fontSize: theme.typography.fontSize.md,
+                                fontWeight: theme.typography.fontWeight.bold,
+                                justifyContent: "space-between",
+                                padding: 0,
+                                textAlign: "left",
+                                width: "100%",
+                            }, children: [_jsx("span", { children: title ?? fallbackLabel }), _jsx("span", { "aria-hidden": true, children: accordionOpen ? "−" : "+" })] }) }), _jsx(AccordionPrimitive.Content, { children: _jsxs("div", { style: {
+                                display: "flex",
+                                flexDirection: "column",
+                                gap: theme.space[2],
+                                marginTop: theme.space[2],
+                            }, children: [description ? (_jsx("span", { style: {
+                                        fontSize: theme.typography.fontSize.sm,
+                                        color: theme.semantic.text.muted,
+                                    }, children: description })) : null, body] }) })] }) })) : (_jsxs(_Fragment, { children: [header, body] })) }));
+}
+export function InteractionField({ descriptor, inputKey, handle, errors = EMPTY_FIELD_ERRORS, missing = false, disabled = false, render, }) {
+    const input = descriptor.inputs.find((candidate) => candidate.key === inputKey);
+    if (!input)
+        return null;
+    const typedInput = input;
+    const value = handle.values[inputKey];
+    const props = {
+        descriptor,
+        input: typedInput,
+        handle,
+        value,
+        setValue: (next) => handle.setInput(inputKey, next),
+        clearValue: () => handle.clearInput(inputKey),
+        errors,
+        missing,
+        disabled,
+    };
+    if (render)
+        return _jsx(_Fragment, { children: render(props) });
+    return _jsx(DefaultInteractionField, { ...props });
+}
+export function hasDefaultInteractionFormFields(descriptor) {
+    return defaultFormInputs(descriptor).length > 0;
+}
+export function defaultFormInputs(descriptor) {
+    return descriptor.inputs.filter((input) => {
+        switch (input.domain.type) {
+            case "choice":
+            case "choiceList":
+            case "resourceMap":
+            case "boundedNumber":
+                return true;
+            case "target":
+                return input.domain.selection?.mode === "many";
+        }
+    });
+}
+function DefaultInteractionField(props) {
+    const { input } = props;
+    switch (input.domain.type) {
+        case "choice":
+            if (input.domain.selection?.mode === "many") {
+                return (_jsx(ChoiceListField, { ...props, domain: {
+                        type: "choiceList",
+                        choices: input.domain.choices,
+                        min: input.domain.selection.min ?? 0,
+                        max: input.domain.selection.max,
+                        selection: input.domain.selection,
+                    } }));
+            }
+            return _jsx(ChoiceField, { ...props, domain: input.domain });
+        case "choiceList":
+            return _jsx(ChoiceListField, { ...props, domain: input.domain });
+        case "resourceMap":
+            return _jsx(ResourceMapField, { ...props, domain: input.domain });
+        case "boundedNumber":
+            return _jsx(BoundedNumberField, { ...props, domain: input.domain });
+        case "target":
+            return _jsx(TargetSummaryField, { ...props, domain: input.domain });
+    }
+}
+function FieldFrame({ label, controlId, errors, missing, children, }) {
+    const theme = useTheme();
+    const messages = errors.length > 0 ? errors : missing ? ["Required"] : [];
+    return (_jsxs("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: theme.space[1],
+            fontSize: theme.typography.fontSize.sm,
+            color: theme.semantic.text.primary,
+        }, children: [_jsx(Label, { htmlFor: controlId, style: {
+                    color: theme.semantic.text.primary,
+                    fontWeight: theme.typography.fontWeight.bold,
+                }, children: label }), children, messages.length > 0 ? (_jsx("span", { role: "alert", style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 2,
+                    color: theme.semantic.intent.danger.solid,
+                    fontSize: theme.typography.fontSize.xs,
+                }, children: messages.map((message) => (_jsx("span", { children: message }, message))) })) : null] }));
+}
+function ChoiceOptionLabel({ choice }) {
+    const theme = useTheme();
+    return (_jsxs("span", { style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 6,
+            minWidth: 0,
+        }, children: [_jsxs("span", { style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: 6,
+                    minWidth: 0,
+                }, children: [choice.icon ? (_jsx("span", { "aria-hidden": true, style: { fontSize: "1.1em", lineHeight: 1 }, children: choice.icon })) : null, _jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis" }, children: choice.label })] }), choice.badge ? (_jsx("span", { style: {
+                    borderRadius: 999,
+                    background: theme.semantic.surface.inset,
+                    color: theme.semantic.text.muted,
+                    fontSize: theme.typography.fontSize.xs,
+                    fontWeight: theme.typography.fontWeight.bold,
+                    lineHeight: 1,
+                    padding: "3px 6px",
+                    whiteSpace: "nowrap",
+                }, children: choice.badge })) : null] }));
+}
+function ChoiceDescription({ choice }) {
+    const theme = useTheme();
+    const message = choice?.disabledReason ?? choice?.description;
+    if (!message)
+        return null;
+    return (_jsx("span", { style: {
+            color: choice?.disabledReason
+                ? theme.semantic.intent.danger.solid
+                : theme.semantic.text.muted,
+            fontSize: theme.typography.fontSize.xs,
+        }, children: message }));
+}
+function ChoiceField({ input, value, setValue, errors, missing, disabled, domain, }) {
+    const theme = useTheme();
+    const themeCssVars = useThemeCssVars();
+    const choices = domain.choices ?? [];
+    const controlId = useId();
+    const selectedChoice = typeof value === "string"
+        ? choices.find((choice) => choice.value === value)
+        : undefined;
+    if (choices.length > 0 && choices.length <= 3) {
+        return (_jsx(FieldFrame, { label: labelForInput(input), errors: errors, missing: missing, children: _jsx("span", { style: {
+                    display: "inline-flex",
+                    flexWrap: "wrap",
+                    gap: theme.space[1],
+                }, children: choices.map((choice) => {
+                    const selected = value === choice.value;
+                    return (_jsx(ThemedButton, { type: "button", variant: selected ? "primary" : "secondary", size: "sm", disabled: disabled || choice.disabled, "aria-pressed": selected, title: choice.disabledReason ?? choice.description, onClick: () => setValue(choice.value), className: "h-8 px-3 text-sm", children: _jsx(ChoiceOptionLabel, { choice: choice }) }, choice.value));
+                }) }) }));
+    }
+    return (_jsxs(FieldFrame, { label: labelForInput(input), controlId: controlId, errors: errors, missing: missing, children: [_jsxs(Select, { disabled: disabled, value: typeof value === "string" ? value : undefined, onValueChange: (next) => setValue(next), children: [_jsx(SelectTrigger, { id: controlId, size: "sm", className: "w-full bg-white", children: _jsx("span", { "data-slot": "select-value", children: selectedChoice ? (_jsx(ChoiceOptionLabel, { choice: selectedChoice })) : (_jsx("span", { style: { color: theme.semantic.text.muted }, children: "Choose..." })) }) }), _jsx(SelectContent, { style: {
+                            ...themeCssVars,
+                            fontFamily: theme.typography.fontFamily.body,
+                        }, children: choices.map((choice) => (_jsx(SelectItem, { value: choice.value, textValue: choice.label, disabled: choice.disabled, children: _jsx(ChoiceOptionLabel, { choice: choice }) }, choice.value))) })] }), _jsx(ChoiceDescription, { choice: selectedChoice })] }));
+}
+function ChoiceListField({ input, value, setValue, errors, missing, disabled, domain, }) {
+    const theme = useTheme();
+    const selected = new Set(Array.isArray(value) ? value : []);
+    const min = domain.selection?.mode === "many"
+        ? (domain.selection.min ?? 0)
+        : domain.min;
+    const max = (domain.selection?.mode === "many" ? domain.selection.max : domain.max) ??
+        domain.choices?.length ??
+        Number.POSITIVE_INFINITY;
+    const toggle = (choice) => {
+        const next = new Set(selected);
+        if (next.has(choice))
+            next.delete(choice);
+        else if (next.size < max)
+            next.add(choice);
+        setValue([...next]);
+    };
+    const meta = min || Number.isFinite(max)
+        ? `Pick ${min ?? 0}${Number.isFinite(max) ? `-${max}` : "+"}`
+        : undefined;
+    return (_jsx(FieldFrame, { label: _jsxs("span", { style: {
+                display: "flex",
+                justifyContent: "space-between",
+                gap: theme.space[2],
+            }, children: [_jsx("span", { children: labelForInput(input) }), meta ? (_jsx("span", { style: { color: theme.semantic.text.muted }, children: meta })) : null] }), errors: errors, missing: missing, children: _jsx("span", { style: { display: "flex", flexWrap: "wrap", gap: theme.space[1] }, children: (domain.choices ?? []).map((choice) => {
+                const checked = selected.has(choice.value);
+                return (_jsx(ThemedButton, { type: "button", variant: checked ? "primary" : "secondary", size: "sm", disabled: disabled ||
+                        choice.disabled ||
+                        (!checked && selected.size >= max), "aria-pressed": checked, title: choice.disabledReason ?? choice.description, onClick: () => toggle(choice.value), className: "h-8 px-3 text-sm", children: _jsx(ChoiceOptionLabel, { choice: choice }) }, choice.value));
+            }) }) }));
+}
+function ResourceMapField({ input, value, setValue, errors, missing, disabled, domain, }) {
+    const theme = useTheme();
+    const current = isRecord(value) ? value : {};
+    const update = (resourceId, delta, min, max) => {
+        const previous = numberOrZero(current[resourceId]);
+        const next = Math.max(min, Math.min(max, previous + delta));
+        setValue({ ...current, [resourceId]: next });
+    };
+    return (_jsx(FieldFrame, { label: labelForInput(input), errors: errors, missing: missing, children: _jsx("span", { style: {
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))",
+                gap: theme.space[2],
+            }, children: (domain.resources ?? []).map((resource) => {
+                const min = resource.min ?? 0;
+                const max = resource.max ?? 0;
+                const amount = numberOrZero(current[resource.resourceId]);
+                return (_jsxs("span", { style: {
+                        display: "grid",
+                        gridTemplateColumns: "minmax(0, 1fr) auto auto auto",
+                        alignItems: "center",
+                        gap: theme.space[1],
+                        padding: theme.space[2],
+                        borderRadius: theme.radius.md,
+                        background: theme.semantic.surface.inset,
+                    }, children: [_jsxs("span", { style: {
+                                minWidth: 0,
+                                display: "inline-flex",
+                                alignItems: "center",
+                                gap: theme.space[1],
+                            }, children: [resource.icon ? (_jsx("span", { "aria-hidden": true, style: { fontSize: "1.1em" }, children: resource.icon })) : null, resource.label ?? humanize(input.key)] }), _jsx(StepperButton, { label: `Decrease ${resource.label ?? resource.resourceId}`, disabled: disabled || amount <= min, onClick: () => update(resource.resourceId, -1, min, max), children: "-" }), _jsx("span", { style: {
+                                minWidth: "2ch",
+                                textAlign: "center",
+                                fontVariantNumeric: "tabular-nums",
+                            }, children: amount }), _jsx(StepperButton, { label: `Increase ${resource.label ?? resource.resourceId}`, disabled: disabled || amount >= max, onClick: () => update(resource.resourceId, 1, min, max), children: "+" })] }, resource.resourceId));
+            }) }) }));
+}
+function BoundedNumberField({ input, value, setValue, errors, missing, disabled, domain, }) {
+    const theme = useTheme();
+    const min = domain.min ?? 0;
+    const max = domain.max ?? Number.POSITIVE_INFINITY;
+    const step = domain.step ?? 1;
+    const current = typeof value === "number" ? value : min;
+    const controlId = useId();
+    const update = (next) => setValue(Math.max(min, Math.min(max, next)));
+    return (_jsx(FieldFrame, { label: labelForInput(input), controlId: controlId, errors: errors, missing: missing, children: _jsxs("span", { style: {
+                display: "inline-flex",
+                alignItems: "center",
+                gap: theme.space[1],
+            }, children: [_jsx(StepperButton, { label: `Decrease ${input.key}`, disabled: disabled || current <= min, onClick: () => update(current - step), children: "-" }), _jsx(Input, { id: controlId, type: "number", min: min, max: Number.isFinite(max) ? max : undefined, step: step, value: current, disabled: disabled, onChange: (event) => update(Number(event.target.value)), className: "h-9 w-[8ch] px-2 text-center text-sm md:text-sm" }), _jsx(StepperButton, { label: `Increase ${input.key}`, disabled: disabled || current >= max, onClick: () => update(current + step), children: "+" })] }) }));
+}
+function TargetSummaryField({ input, value, errors, missing, domain, }) {
+    return (_jsx(FieldFrame, { label: labelForInput(input), errors: errors, missing: missing, children: _jsx("span", { children: Array.isArray(value)
+                ? value.length > 0
+                    ? `${value.length} selected: ${value.join(", ")}`
+                    : `Select ${targetSelectionLabel(domain)}.`
+                : typeof value === "string"
+                    ? value
+                    : `Select a ${domain.targetKind ?? "target"} on the board.` }) }));
+}
+function targetSelectionLabel(domain) {
+    const target = domain.targetKind ?? "target";
+    const selection = domain.selection;
+    if (selection?.mode !== "many")
+        return `a ${target}`;
+    const min = selection.min ?? 0;
+    if (selection.max !== undefined && min === selection.max) {
+        return `${min} ${target}${min === 1 ? "" : "s"}`;
+    }
+    return `${min}${selection.max ? `-${selection.max}` : "+"} ${target}s`;
+}
+function StepperButton({ label, disabled, onClick, children, }) {
+    return (_jsx(ThemedButton, { type: "button", variant: "secondary", size: "sm", "aria-label": label, disabled: disabled, onClick: onClick, className: "h-8 w-8 text-sm", children: children }));
+}
+function labelForInput(input) {
+    if (input.domain.type === "choice") {
+        const exact = input.domain.choices?.find((choice) => choice.value === input.defaultValue);
+        if (exact?.label && input.key === exact.value)
+            return exact.label;
+    }
+    return humanize(input.key);
+}
+function humanize(key) {
+    return key
+        .replace(/Id$/, "")
+        .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+        .replace(/[-_]+/g, " ")
+        .replace(/\b\w/g, (letter) => letter.toUpperCase());
+}
+function isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function numberOrZero(value) {
+    return typeof value === "number" && Number.isFinite(value) ? value : 0;
+}

package/dist/components/MoreActions.d.ts

@@ -0,0 +1,49 @@
+/**
+ * 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 { type CSSProperties, type ReactNode } from "react";
+export interface MoreActionsProps {
+    /**
+     * Items rendered inside the disclosure when expanded. Typically
+     * `<DefaultInteractionButton>` instances for `salience: "tertiary"`
+     * descriptors, but any `ReactNode` works (custom panel cards, etc.).
+     */
+    children: ReactNode;
+    /**
+     * Toggle label. Defaults to `"More"`. The descriptor count gets
+     * appended automatically when {@link count} is supplied.
+     */
+    label?: string;
+    /**
+     * Number of hidden items, used to render the trailing "(N)" badge.
+     * Omit when the count is irrelevant or already implied (e.g. when
+     * the panel only has a fixed set of disclosed items).
+     */
+    count?: number;
+    /**
+     * Initial open state. Defaults to `false` — the disclosure is the
+     * point. Authors who want it open by default for a specific seat
+     * (e.g. tutorial mode) should pass `true`.
+     */
+    defaultOpen?: boolean;
+    /** Additional inline style merged after the default container. */
+    style?: CSSProperties;
+}
+export declare function MoreActions({ children, label, count, defaultOpen, style, }: MoreActionsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MoreActions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MoreActions.d.ts","sourceRoot":"","sources":["../../src/components/MoreActions.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAAmB,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK5E,MAAM,WAAW,gBAAgB;IAC/B;;;;OAIG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kEAAkE;IAClE,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,KAAc,EACd,KAAK,EACL,WAAmB,EACnB,KAAK,GACN,EAAE,gBAAgB,2CAmFlB"}