@dreamboard-games/sdk 0.2.0

package/dist/components-D5ZRE2Hl.d.ts

@@ -0,0 +1,1451 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { V as ViewCard } from './cards-Sl3b40Mv.js';
+import { I as InteractionVisualState, a as CardIntent, C as CardDropTargetVisualState } from './HandView-ncJIVLhN.js';
+import * as react from 'react';
+import { ReactNode, CSSProperties, RefObject, Component, ErrorInfo, ComponentType, ButtonHTMLAttributes, ElementType, ComponentProps } from 'react';
+import { Transition } from 'framer-motion';
+import './ResourceCounter-CTREyF73.js';
+import { Drawer as Drawer$1 } from 'vaul';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { _ as Theme, I as IntentColor, V as PlayerColor, a as AnySquareBoardInput, S as NormalizedSquareEdgeOf, U as NormalizedSquareVertexOf, T as NormalizedSquarePieceOf, J as InteractiveTargetLayer, R as NormalizedSquareCellOf, K as InteractiveTargetRenderState, n as GeneratedSquareBoardInput, c as AuthoredSquareBoardInput } from './hex-board-view-D_07hO6O.js';
+import { V as ViewSlotOccupant } from './slots-1GPGihk8.js';
+import { SquarePieceState } from './ui/types/player-state.js';
+
+interface TrackSpace<SpaceIdValue extends string = string, Data = unknown> {
+    id: SpaceIdValue;
+    index: number;
+    name?: string;
+    type?: string;
+    /** Override next spaces (for branching) */
+    nextSpaces?: readonly SpaceIdValue[];
+    /** Jump to another space (snakes/ladders) */
+    jumpTo?: SpaceIdValue;
+    position: {
+        x: number;
+        y: number;
+    };
+    data?: Data;
+}
+interface TrackPiece<PieceIdValue extends string = string, SpaceIdValue extends string = string, OwnerIdValue extends string = string, Data = unknown> {
+    id: PieceIdValue;
+    spaceId: SpaceIdValue;
+    owner: OwnerIdValue;
+    type?: string;
+    data?: Data;
+}
+interface TrackBoardProps {
+    spaces: TrackSpace[];
+    pieces: TrackPiece[];
+    type?: "linear" | "circular" | "branching";
+    renderSpace: (space: TrackSpace, pieces: TrackPiece[]) => ReactNode;
+    renderConnection?: (from: {
+        x: number;
+        y: number;
+    }, to: {
+        x: number;
+        y: number;
+    }, fromSpace: TrackSpace, toSpace: TrackSpace) => ReactNode;
+    renderJump?: (from: {
+        x: number;
+        y: number;
+    }, to: {
+        x: number;
+        y: number;
+    }, fromSpace: TrackSpace, toSpace: TrackSpace, isUp: boolean) => ReactNode;
+    width?: number | string;
+    height?: number | string;
+    enablePanZoom?: boolean;
+    initialZoom?: number;
+    minZoom?: number;
+    maxZoom?: number;
+    className?: string;
+}
+interface DefaultTrackSpaceProps {
+    space: TrackSpace;
+    size?: number;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    isHighlighted?: boolean;
+    isSelected?: boolean;
+    showJumpIndicator?: boolean;
+    onClick?: () => void;
+    onHover?: (hovering: boolean) => void;
+    className?: string;
+    children?: ReactNode;
+}
+declare function DefaultTrackSpace({ space, size, fill, stroke, strokeWidth, isHighlighted, isSelected, showJumpIndicator, onClick, onHover, className, children, }: DefaultTrackSpaceProps): react_jsx_runtime.JSX.Element;
+interface DefaultTrackPieceProps {
+    piece: TrackPiece;
+    index?: number;
+    total?: number;
+    radius?: number;
+    color?: string;
+    onClick?: () => void;
+    className?: string;
+}
+declare function DefaultTrackPiece({ piece, index, total, radius, color, onClick, className, }: DefaultTrackPieceProps): react_jsx_runtime.JSX.Element;
+interface DefaultTrackConnectionProps {
+    from: {
+        x: number;
+        y: number;
+    };
+    to: {
+        x: number;
+        y: number;
+    };
+    stroke?: string;
+    strokeWidth?: number;
+    className?: string;
+}
+declare function DefaultTrackConnection({ from, to, stroke, strokeWidth, className, }: DefaultTrackConnectionProps): react_jsx_runtime.JSX.Element;
+interface DefaultTrackJumpProps {
+    from: {
+        x: number;
+        y: number;
+    };
+    to: {
+        x: number;
+        y: number;
+    };
+    /** Whether the jump goes forward or backward */
+    isUp: boolean;
+    spaceSize?: number;
+    upColor?: string;
+    downColor?: string;
+    strokeWidth?: number;
+    className?: string;
+}
+declare function DefaultTrackJump({ from, to, isUp, spaceSize, upColor, downColor, strokeWidth, className, }: DefaultTrackJumpProps): react_jsx_runtime.JSX.Element;
+declare function TrackBoard({ spaces, pieces, type, renderSpace, renderConnection, renderJump, width, height, enablePanZoom, initialZoom, minZoom, maxZoom, className, }: TrackBoardProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Helpers that derive component-specific style fragments from a
+ * resolved {@link Theme}. They live alongside the theme module (rather
+ * than in each component) so that:
+ *
+ * - There is one canonical mapping of "intent → button style", "intent →
+ *   chip style", etc.
+ * - Component visuals stay aligned automatically when an author tweaks
+ *   the theme; nobody has to remember to update a bespoke calc inside
+ *   `<CardFace>` or `<ThemedButton>`.
+ *
+ * Each helper returns a plain {@link CSSProperties} fragment so the
+ * caller can spread it into an inline style (or pass it through to
+ * Framer Motion's `style` prop).
+ */
+/** Button visual variants derived from semantic intent slots. */
+type ButtonVariant$1 = "primary" | "secondary" | "danger" | "submitted" | "success" | "warning" | "info" | "ghost";
+type ButtonSize$1 = "sm" | "md" | "lg";
+/**
+ * Compute the inline style for a button in `variant`/`size` from the
+ * theme. `disabled` and `pressed` are visual-only — they affect colour
+ * intensity and elevation but never touch interactivity (the consuming
+ * component owns `aria-disabled` and event wiring).
+ */
+declare function buttonStyle(theme: Theme, options?: {
+    variant?: ButtonVariant$1;
+    size?: ButtonSize$1;
+    disabled?: boolean;
+    pressed?: boolean;
+}): CSSProperties;
+/**
+ * Soft-intent chip ("Your turn", "Largest army", "Waiting…"). Reads
+ * `intent.<variant>.soft` for background and `.onSoft` for text.
+ */
+declare function chipStyle(theme: Theme, options?: {
+    variant?: Exclude<ButtonVariant$1, "ghost">;
+    size?: "sm" | "md";
+}): CSSProperties;
+/**
+ * Standard surface card (player card, action panel, hand drawer). The
+ * `tone` selects which `surface.*` slot to read; `interactive` adds
+ * the hover-elevation transition baseline.
+ */
+declare function surfaceStyle(theme: Theme, options?: {
+    tone?: keyof Theme["semantic"]["surface"];
+    interactive?: boolean;
+    /** Override radius to one of the theme tokens. Defaults to `lg`. */
+    radius?: keyof Theme["radius"];
+}): CSSProperties;
+/** Resolve a {@link ButtonVariant} to its underlying {@link IntentColor}. */
+declare function intentForVariant(theme: Theme, variant: ButtonVariant$1): IntentColor;
+/**
+ * Pick a {@link Theme.player} entry by 0-based seat slot, wrapping
+ * around when there are more players than palette entries (so a
+ * 7-player game cycles back to player 1's palette).
+ */
+declare function playerColor(theme: Theme, slot: number): PlayerColor;
+/**
+ * Returns `theme.motion.duration.<key>` zeroed out when the theme has
+ * `motion.reducedMotion === "true"`. Use this in any component that
+ * starts an animation so `prefers-reduced-motion` is honoured uniformly.
+ */
+declare function motionDuration(theme: Theme, key: keyof Theme["motion"]["duration"]): string;
+
+interface CardFaceProps<CardData extends ViewCard = ViewCard> extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">, InteractionVisualState {
+    card: CardData;
+    size?: "sm" | "md" | "lg";
+    faceDown?: boolean;
+    renderContent?: (card: CardData) => React.ReactNode;
+    children?: React.ReactNode;
+}
+declare function CardFace<CardData extends ViewCard = ViewCard>({ card, eligible, selected, disabled, invalid, submitted, previewing, intentProgress, size, faceDown, renderContent, children, className, style, ...props }: CardFaceProps<CardData>): react_jsx_runtime.JSX.Element;
+
+type CardSize = "sm" | "md" | "lg";
+type HandLayout = "spread" | "stack" | "overlap";
+interface CardPositionProps {
+    /** X position (left offset) */
+    x: number;
+    /** Y position (vertical offset for hover/selected) */
+    y: number;
+    /** Z-index for layering */
+    zIndex: number;
+    /** CSS transform origin */
+    transformOrigin: string;
+}
+interface UseHandLayoutOptions {
+    /** Number of cards in the hand */
+    cardCount: number;
+    /** Card size variant */
+    cardSize?: CardSize;
+    /** Layout style */
+    layout?: HandLayout;
+    /** Padding to subtract from container width */
+    containerPadding?: number;
+}
+interface UseHandLayoutReturn {
+    /** Ref to attach to the container element */
+    containerRef: RefObject<HTMLDivElement | null>;
+    /** Ref to attach to the cards container element (for mouse/touch tracking) */
+    cardsContainerRef: RefObject<HTMLDivElement | null>;
+    /** Measured container width */
+    containerWidth: number;
+    /** Calculated offset between cards */
+    cardOffset: number;
+    /** Total width of all cards */
+    totalWidth: number;
+    /** Whether drawer mode should be used */
+    useDrawerMode: boolean;
+    /** Card dimensions for the current size */
+    cardDimensions: {
+        width: number;
+        height: number;
+    };
+    /** Constants for positioning */
+    constants: {
+        hoverLift: number;
+        selectedLift: number;
+    };
+    /** Currently hovered card index */
+    hoveredIndex: number | null;
+    /** Mouse move handler for the cards container */
+    handleMouseMove: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /** Mouse leave handler for the cards container */
+    handleMouseLeave: () => void;
+    /** Touch move handler for the cards container (mirrors mouse hover lift on touch) */
+    handleTouchMove: (e: React.TouchEvent<HTMLDivElement>) => void;
+    /** Touch end handler for the cards container */
+    handleTouchEnd: () => void;
+    /** Get position props for a card at the given index */
+    getCardPosition: (index: number, isHovered: boolean, isSelected: boolean) => CardPositionProps;
+}
+/**
+ * Hook for managing hand layout calculations and interactions.
+ *
+ * Provides container measurement, overlap calculations, drawer mode detection,
+ * and hover state management for card hand displays.
+ *
+ * @example
+ * ```tsx
+ * function MyHand({ cards, selectedIds }) {
+ *   const {
+ *     containerRef,
+ *     cardsContainerRef,
+ *     totalWidth,
+ *     useDrawerMode,
+ *     cardDimensions,
+ *     hoveredIndex,
+ *     handleMouseMove,
+ *     handleMouseLeave,
+ *     getCardPosition,
+ *     constants,
+ *   } = useHandLayout({
+ *     cardCount: cards.length,
+ *     cardSize: "md",
+ *     layout: "overlap",
+ *   });
+ *
+ *   if (useDrawerMode) {
+ *     return <MyDrawerUI cards={cards} />;
+ *   }
+ *
+ *   return (
+ *     <div ref={containerRef}>
+ *       <div
+ *         ref={cardsContainerRef}
+ *         style={{ width: totalWidth, height: cardDimensions.height + constants.hoverLift }}
+ *         onMouseMove={handleMouseMove}
+ *         onMouseLeave={handleMouseLeave}
+ *       >
+ *         {cards.map((card, index) => {
+ *           const isHovered = hoveredIndex === index;
+ *           const isSelected = selectedIds.includes(card.id);
+ *           const position = getCardPosition(index, isHovered, isSelected);
+ *
+ *           return (
+ *             <div
+ *               key={card.id}
+ *               style={{
+ *                 position: "absolute",
+ *                 left: position.x,
+ *                 transform: `translateY(${position.y}px)`,
+ *                 zIndex: position.zIndex,
+ *               }}
+ *             >
+ *               <MyCard card={card} />
+ *             </div>
+ *           );
+ *         })}
+ *       </div>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useHandLayout({ cardCount, cardSize, layout, containerPadding, }: UseHandLayoutOptions): UseHandLayoutReturn;
+
+interface HandCardRenderProps<CardData extends ViewCard = ViewCard> {
+    card: CardData;
+    index: number;
+    isHovered: boolean;
+    isSelected: boolean;
+    x: number;
+    y: number;
+    zIndex: number;
+    cardDimensions: {
+        width: number;
+        height: number;
+    };
+}
+interface HandDrawerRenderProps<CardData extends ViewCard = ViewCard> {
+    cards: readonly CardData[];
+    selectedIds: readonly string[];
+    cardCount: number;
+    selectedCount: number;
+    disabled: boolean;
+    cardDimensions: {
+        width: number;
+        height: number;
+    };
+}
+interface HandEmptyRenderProps {
+    layout: HandLayout;
+}
+interface HandContainerRenderProps {
+    totalWidth: number;
+    totalHeight: number;
+    cardDimensions: {
+        width: number;
+        height: number;
+    };
+    children: ReactNode;
+    onMouseMove: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onMouseLeave: () => void;
+}
+interface HandProps<CardData extends ViewCard = ViewCard> {
+    cards: readonly CardData[];
+    selectedIds?: readonly string[];
+    disabled?: boolean;
+    cardSize?: CardSize;
+    layout?: HandLayout;
+    "aria-label"?: string;
+    /**
+     * Called when a card is clicked. Wired into the default `renderCard`;
+     * ignored when the caller supplies a custom `renderCard`.
+     */
+    onCardClick?: (cardId: string) => void;
+    /** Per-card content renderer forwarded to the default `<CardFace>`. */
+    renderCardContent?: (card: CardData) => ReactNode;
+    /** Defaults to a positioned `<CardFace>` honouring click/selection state. */
+    renderCard?: (props: HandCardRenderProps<CardData>) => ReactNode;
+    /**
+     * Custom drawer fallback for large hands (when `useHandLayout` switches
+     * to drawer mode). When omitted, `Hand` renders a `HandDock` bottom drawer
+     * automatically.
+     */
+    renderDrawer?: (props: HandDrawerRenderProps<CardData>) => ReactNode;
+    /** Defaults to a subtle "No cards in hand" placeholder. */
+    renderEmpty?: (props: HandEmptyRenderProps) => ReactNode;
+    renderContainer?: (props: HandContainerRenderProps) => ReactNode;
+    className?: string;
+}
+/**
+ * Hand component with customizable rendering via render props.
+ *
+ * `renderCard`, `renderDrawer`, and `renderEmpty` are all optional — the
+ * defaults render the built-in `<CardFace>` with the supplied `onCardClick` /
+ * `renderCardContent`, a compact drawer fallback on small screens, and a
+ * muted empty placeholder. Override any of them when you need a different
+ * visual treatment.
+ *
+ * For complete control over layout and interactions, use the
+ * `useHandLayout` hook directly.
+ *
+ * @example Zero-config
+ * ```tsx
+ * <Hand cards={cards} onCardClick={(id) => play(id)} />
+ * ```
+ *
+ * @example Custom card content
+ * ```tsx
+ * <Hand
+ *   cards={cards}
+ *   onCardClick={(id) => play(id)}
+ *   renderCardContent={(card) => <DevCardFace card={card} />}
+ * />
+ * ```
+ */
+declare function Hand<CardData extends ViewCard = ViewCard>({ cards, selectedIds, disabled, cardSize, layout, "aria-label": ariaLabel, onCardClick, renderCardContent, renderCard, renderDrawer, renderEmpty, renderContainer, className, }: HandProps<CardData>): react_jsx_runtime.JSX.Element;
+
+interface StagingZoneProps<CardData extends ViewCard = ViewCard> {
+    /** Cards currently staged, in order. */
+    cards: readonly CardData[];
+    /** Total number of slots to render (e.g. the collector's selection max). */
+    slotCount: number;
+    /** Card size; empty-slot dimensions match the SDK `CardFace` sizes. */
+    size?: "sm" | "md" | "lg";
+    /** Visual for a staged card (typically a `CardFace`). */
+    renderCard: (card: CardData) => ReactNode;
+    /** Fires when a staged card is activated — remove it from the collection. */
+    onRemove?: (cardId: string) => void;
+    /** Custom empty-slot content. Defaults to an empty dashed placeholder. */
+    renderEmptySlot?: (index: number) => ReactNode;
+    /** Optional heading rendered above the slots. */
+    label?: ReactNode;
+    /** Accessible label for the region. */
+    "aria-label"?: string;
+    className?: string;
+}
+declare function StagingZone<CardData extends ViewCard = ViewCard>({ cards, slotCount, size, renderCard, onRemove, renderEmptySlot, label, "aria-label": ariaLabel, className, }: StagingZoneProps<CardData>): react_jsx_runtime.JSX.Element;
+
+interface RegisteredDropTarget {
+    targetId: string;
+    disabled: boolean;
+    eligible: boolean;
+    element: HTMLElement;
+    /** Plain-text label used for the live a11y announcement. */
+    label: string | null;
+    /** Order hint for keyboard target traversal (lower numbers focus first). */
+    order: number;
+}
+type DragPhase = "idle" | "inspecting" | "dragging" | "settling" | "returning";
+interface CardDragSurfaceController {
+    /** Identity of the card currently in the drag-lifecycle, if any. */
+    activeCardId: string | null;
+    /** Source of the active drag, if any. */
+    activeSource: "pointer" | "keyboard" | null;
+    /** Drag-lifecycle phase. */
+    phase: DragPhase;
+    /** Currently highlighted drop target id, if any. */
+    overTargetId: string | null;
+    /** Currently keyboard-focused target id, if any. */
+    keyboardFocusedTargetId: string | null;
+    /**
+     * Begin a pointer drag session. Returns `true` if the session started.
+     */
+    startPointerDrag: (input: PointerDragInput) => boolean;
+    /** Update the pointer coordinates of an active pointer drag. */
+    updatePointer: (point: {
+        x: number;
+        y: number;
+    }) => void;
+    /**
+     * Commit the active pointer drag at the supplied release position. Emits
+     * a `drop` intent if the pointer is over an eligible target, or schedules
+     * a snap back otherwise.
+     */
+    releasePointer: (point: {
+        x: number;
+        y: number;
+    }) => void;
+    /** Cancel the active drag (pointer or keyboard) without committing. */
+    cancelDrag: () => void;
+    /**
+     * Begin a keyboard drag session. The first eligible registered target is
+     * focused automatically.
+     */
+    startKeyboardDrag: (input: KeyboardDragInput) => boolean;
+    /** Move keyboard focus across registered eligible targets. */
+    moveKeyboardFocus: (direction: "next" | "prev") => void;
+    /** Commit the active keyboard drag on the focused target. */
+    commitKeyboardDrop: () => void;
+    /**
+     * Record a tap that did not produce a lift. The surface holds the
+     * `inspecting` phase until another lift, drop, or external dismissal.
+     */
+    recordTap: (input: TapInput) => void;
+    /**
+     * Record a `previewStart` intent. Surface owns canonical intent emission
+     * so consumers subscribe in one place.
+     */
+    recordPreviewStart: (cardId: string) => void;
+    /** Record a `previewEnd` intent. */
+    recordPreviewEnd: (cardId: string) => void;
+    /**
+     * Record a desktop/keyboard `activate` intent under the `direct-activate`
+     * policy. Drag-to-target policy never calls this; it is centralized here
+     * so that the surface remains the only ingress for `CardIntent`.
+     */
+    recordActivate: (cardId: string, source: "tap" | "keyboard") => void;
+    /** Clear the `inspecting` phase. */
+    clearInspect: () => void;
+    /** Total number of currently registered eligible targets. */
+    eligibleTargetCount: number;
+}
+interface TapInput {
+    cardId: string;
+    cardEligible: boolean;
+    cardDisabled: boolean;
+    sourceFocus?: HTMLElement | null;
+}
+interface PointerDragInput {
+    cardId: string;
+    cardLabel?: string | null;
+    pointerId: number;
+    startX: number;
+    startY: number;
+    pointerX: number;
+    pointerY: number;
+    grabOffsetX: number;
+    grabOffsetY: number;
+    sourceRect: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
+    content: ReactNode;
+    sourceFocus?: HTMLElement | null;
+}
+interface KeyboardDragInput {
+    cardId: string;
+    cardLabel?: string | null;
+    cardEligible: boolean;
+    sourceRect: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
+    content: ReactNode;
+    sourceFocus?: HTMLElement | null;
+}
+interface CardDragSurfaceContextValue {
+    registerTarget: (target: RegisteredDropTarget) => () => void;
+    updateTarget: (targetId: string, patch: Partial<Omit<RegisteredDropTarget, "targetId" | "element">>) => void;
+    controller: CardDragSurfaceController;
+    /** Expose the most recent active card id for visual-state computation. */
+    activeCardId: string | null;
+    /** Expose the highlighted target id for visual-state computation. */
+    overTargetId: string | null;
+    /** Expose whether any drag is in progress. */
+    dragActive: boolean;
+    keyboardFocusedTargetId: string | null;
+}
+declare function useCardDragSurface(): CardDragSurfaceContextValue | null;
+interface CardDragSurfaceProps {
+    onCardIntent?: (intent: CardIntent) => void;
+    /**
+     * Approximate inset (px) used for the deterministic hit test. Defaults to
+     * `8`. Lowering this lets edges register more aggressively; raising it
+     * makes overlapping targets less ambiguous.
+     */
+    hitTestInsetPx?: number;
+    /** Suppress the live a11y announcement (for environments providing their own). */
+    suppressLiveAnnouncement?: boolean;
+    /** Animation transition tunable for settle/return. */
+    motionTransition?: Transition;
+    className?: string;
+    style?: CSSProperties;
+    children: ReactNode;
+}
+declare function CardDragSurface({ onCardIntent, hitTestInsetPx, suppressLiveAnnouncement, motionTransition, className, style, children, }: CardDragSurfaceProps): react_jsx_runtime.JSX.Element;
+interface CardDropTargetViewProps {
+    targetId: string;
+    state?: CardDropTargetVisualState;
+    /** Plain-text label used in live announcements ("Selected cards", etc.). */
+    label?: string;
+    renderTarget: (state: CardDropTargetVisualState) => ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    /** Tab order hint (lower numbers focus first). */
+    order?: number;
+    /** ARIA role override; defaults to `button`. */
+    role?: string;
+}
+declare function CardDropTargetView({ targetId, state, label, renderTarget, className, style, order, role, }: CardDropTargetViewProps): react_jsx_runtime.JSX.Element;
+
+type HandDockMode = "inline" | "drawer" | "hidden";
+type HandDockPlacement = "bottom-left" | "bottom-center" | "bottom-right";
+interface HandDockToggleContext {
+    label: string;
+    count: number;
+    open: boolean;
+}
+interface HandDockPresentation {
+    /**
+     * `inline` preserves the normal shell hand strip. `drawer` collapses the
+     * zone behind a viewport-safe toggle. `hidden` suppresses the zone entirely.
+     */
+    mode?: HandDockMode;
+    /** Initial drawer state. Defaults to closed. */
+    defaultOpen?: boolean;
+    /** Where the drawer toggle/tray docks in the viewport. */
+    placement?: HandDockPlacement;
+    /** Toggle label override. Receives card count and open state. */
+    toggleLabel?: ReactNode | ((context: HandDockToggleContext) => ReactNode);
+    /** Width of the opened tray. */
+    maxWidth?: CSSProperties["maxWidth"];
+    /** Height of the opened tray before it scrolls. */
+    maxHeight?: CSSProperties["maxHeight"];
+    /** Extra style escape hatch for the outer dock. */
+    style?: CSSProperties;
+}
+interface HandDockProps {
+    label: string;
+    count: number;
+    presentation?: HandDockPresentation;
+    children: ReactNode;
+}
+declare function HandDock({ label, count, presentation, children, }: HandDockProps): react_jsx_runtime.JSX.Element | null;
+
+interface PlayAreaProps<CardData extends ViewCard = ViewCard> {
+    cards: readonly CardData[];
+    filter?: (card: CardData) => boolean;
+    cardSize?: CardFaceProps["size"];
+    renderCard?: CardFaceProps<CardData>["renderContent"];
+    layout?: "grid" | "row";
+    interactive?: boolean;
+    onCardClick?: (cardId: string) => void;
+    "aria-label"?: string;
+    className?: string;
+}
+/**
+ * @example
+ * ```tsx
+ * <PlayArea cards={trickCards} layout="row" renderCard={(card) => <PlayingCard card={card} />} />
+ * ```
+ */
+declare function PlayArea<CardData extends ViewCard = ViewCard>({ cards, filter, cardSize, renderCard, layout, interactive, onCardClick, "aria-label": ariaLabel, className, }: PlayAreaProps<CardData>): react_jsx_runtime.JSX.Element;
+
+declare function ChromeSuppressionProvider({ children, onSuppressedChange, }: {
+    children: ReactNode;
+    onSuppressedChange: (suppressed: boolean) => void;
+}): react_jsx_runtime.JSX.Element;
+declare function useChromeSuppression(id: string, suppressed: boolean): void;
+
+/**
+ * GameSkeleton - Loading state component
+ *
+ * Displays animated placeholders while game content loads
+ */
+interface GameSkeletonProps {
+    variant?: "default" | "cards" | "players" | "minimal";
+    message?: string;
+    className?: string;
+}
+declare function GameSkeleton({ variant, message, className, }: GameSkeletonProps): react_jsx_runtime.JSX.Element;
+
+type ToastType = "success" | "error" | "info" | "warning";
+interface ToastNotification {
+    id: string;
+    type: ToastType;
+    message: string;
+    duration?: number;
+}
+interface ToastContextValue {
+    toasts: ToastNotification[];
+    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;
+}
+type ToastActionsValue = ToastContextValue;
+interface ToastProviderProps {
+    children: ReactNode;
+}
+declare function ToastProvider({ children }: ToastProviderProps): react_jsx_runtime.JSX.Element;
+interface ToastActionsProps {
+    children: (actions: ToastActionsValue) => ReactNode;
+}
+declare function ToastActions({ children }: ToastActionsProps): react_jsx_runtime.JSX.Element;
+declare const Toast: {
+    readonly Actions: typeof ToastActions;
+};
+
+interface ErrorBoundaryProps {
+    children: ReactNode;
+    fallback?: (error: Error, reset: () => void) => ReactNode;
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+interface ErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+}
+declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    handleReset: () => void;
+    render(): ReactNode;
+}
+
+declare function Drawer({ ...props }: react.ComponentProps<typeof Drawer$1.Root>): react_jsx_runtime.JSX.Element;
+declare function DrawerTrigger({ ...props }: react.ComponentProps<typeof Drawer$1.Trigger>): react_jsx_runtime.JSX.Element;
+declare function DrawerPortal({ ...props }: react.ComponentProps<typeof Drawer$1.Portal>): react_jsx_runtime.JSX.Element;
+declare function DrawerClose({ ...props }: react.ComponentProps<typeof Drawer$1.Close>): react_jsx_runtime.JSX.Element;
+declare function DrawerOverlay({ className, style, ...props }: react.ComponentProps<typeof Drawer$1.Overlay>): react_jsx_runtime.JSX.Element;
+interface DrawerContentProps extends react.ComponentPropsWithoutRef<typeof Drawer$1.Content> {
+    showHandle?: boolean;
+    children?: react.ReactNode;
+}
+declare function DrawerContent({ className, children, showHandle, ...props }: DrawerContentProps): react_jsx_runtime.JSX.Element;
+declare function DrawerHeader({ className, ...props }: react.ComponentPropsWithoutRef<"div">): react_jsx_runtime.JSX.Element;
+declare function DrawerFooter({ className, ...props }: react.ComponentPropsWithoutRef<"div">): react_jsx_runtime.JSX.Element;
+declare function DrawerTitle({ className, ...props }: react.ComponentProps<typeof Drawer$1.Title>): react_jsx_runtime.JSX.Element;
+declare function DrawerDescription({ className, ...props }: react.ComponentProps<typeof Drawer$1.Description>): react_jsx_runtime.JSX.Element;
+
+declare function Dialog(props: react.ComponentProps<typeof DialogPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function DialogTrigger(props: react.ComponentProps<typeof DialogPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function DialogPortal(props: react.ComponentProps<typeof DialogPrimitive.Portal>): react_jsx_runtime.JSX.Element;
+declare function DialogClose(props: react.ComponentProps<typeof DialogPrimitive.Close>): react_jsx_runtime.JSX.Element;
+declare function DialogOverlay({ className, ...props }: react.ComponentProps<typeof DialogPrimitive.Overlay>): react_jsx_runtime.JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, overlayClassName, ...props }: react.ComponentProps<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+    overlayClassName?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function DialogHeader({ className, ...props }: react.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function DialogFooter({ className, ...props }: react.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function DialogTitle({ className, ...props }: react.ComponentProps<typeof DialogPrimitive.Title>): react_jsx_runtime.JSX.Element;
+declare function DialogDescription({ className, ...props }: react.ComponentProps<typeof DialogPrimitive.Description>): react_jsx_runtime.JSX.Element;
+
+declare function Input({ className, type, ...props }: react.ComponentProps<"input">): react_jsx_runtime.JSX.Element;
+
+declare function Label({ className, ...props }: react.ComponentProps<typeof LabelPrimitive.Root>): react_jsx_runtime.JSX.Element;
+
+declare function Select(props: react.ComponentProps<typeof SelectPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function SelectTrigger({ className, size, children, ...props }: react.ComponentProps<typeof SelectPrimitive.Trigger> & {
+    size?: "sm" | "default";
+}): react_jsx_runtime.JSX.Element;
+declare function SelectContent({ className, children, position, align, ...props }: react.ComponentProps<typeof SelectPrimitive.Content>): react_jsx_runtime.JSX.Element;
+declare function SelectItem({ className, children, ...props }: react.ComponentProps<typeof SelectPrimitive.Item>): react_jsx_runtime.JSX.Element;
+
+interface ResourceDefinition {
+    type: string;
+    label: string;
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    color?: string;
+}
+interface CostDisplayProps {
+    /** Cost requirements keyed by resource type */
+    cost: Record<string, number>;
+    /** Current resources to check affordability */
+    currentResources?: Record<string, number>;
+    resourceDefs: ResourceDefinition[];
+    size?: "sm" | "md";
+    layout?: "inline" | "stacked";
+    className?: string;
+}
+declare function CostDisplay({ cost, currentResources, resourceDefs, size, layout, className, }: CostDisplayProps): react_jsx_runtime.JSX.Element | null;
+
+interface ActionButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children">, InteractionVisualState {
+    label?: ReactNode;
+    description?: ReactNode;
+    icon?: ElementType<{
+        className?: string;
+    }>;
+    cost?: Record<string, number>;
+    currentResources?: Record<string, number>;
+    resourceDefs?: ResourceDefinition[];
+    available?: boolean;
+    disabledReason?: string;
+    loading?: boolean;
+    variant?: ButtonVariant$1;
+    size?: ButtonSize$1;
+    children?: ReactNode;
+}
+declare function ActionButton({ label, description, icon, cost, currentResources, resourceDefs, available, disabledReason, loading, disabled, eligible, selected, invalid, submitted, previewing, intentProgress, title, variant, size, children, onClick, ...rest }: ActionButtonProps): react_jsx_runtime.JSX.Element;
+
+interface PrimaryButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, InteractionVisualState {
+    /** Intent slot — defaults to `primary`. */
+    variant?: ButtonVariant$1;
+    /** Sizing token — defaults to `md`. */
+    size?: ButtonSize$1;
+}
+declare function PrimaryButton({ children, disabled, style, variant, size, ...rest }: PrimaryButtonProps): react_jsx_runtime.JSX.Element;
+
+type ButtonVariant = "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+type ButtonSize = "default" | "sm" | "lg" | "icon";
+interface ButtonProps extends react.ComponentProps<"button"> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    asChild?: boolean;
+}
+declare function Button({ className, variant, size, asChild, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+type ShadcnButtonProps = ComponentProps<typeof Button>;
+interface ThemedButtonProps extends Omit<ShadcnButtonProps, "variant" | "size">, InteractionVisualState {
+    variant?: ButtonVariant$1;
+    size?: ButtonSize$1;
+    /** Renders the pressed/active visual treatment without changing variant. */
+    pressed?: boolean;
+    /** Render the in-flight loading state and disable activation. */
+    loading?: boolean;
+}
+declare function ThemedButton({ variant, size, pressed, loading, eligible, selected, disabled, invalid, submitted, previewing, intentProgress, className, style, ...props }: ThemedButtonProps): react_jsx_runtime.JSX.Element;
+
+/** Attention-pulse policy for the trailing halo. */
+type PrimaryActionAttention = "auto" | "always" | "off";
+interface SubmittedActionConfig {
+    label?: ReactNode;
+    icon?: ReactNode;
+    variant?: ButtonVariant$1;
+}
+interface PrimaryActionButtonProps extends InteractionVisualState {
+    /**
+     * Override the visual variant. Defaults to `primary` (which maps
+     * to `intent.primary` regardless of the descriptor's `emphasis`
+     * hint — the shell's primary slot is, by definition, primary).
+     */
+    variant?: ButtonVariant$1;
+    /**
+     * Sizing. Defaults to `lg` so the dock target is comfortable on
+     * touch and visually outranks panel buttons sized `md`.
+     */
+    size?: ButtonSize$1;
+    /**
+     * Override the label inferred from `descriptor.label`. Use only
+     * when the descriptor's label needs phase-specific copy that the
+     * authoring layer can't express.
+     */
+    label?: ReactNode;
+    /** Client-side draft readiness. Reducer availability remains authoritative. */
+    ready?: boolean;
+    /** Whether the action is currently available according to the caller. */
+    available?: boolean;
+    /** Optional reason rendered as the disabled tooltip. */
+    unavailableReason?: string;
+    /** External submission state. */
+    submitting?: boolean;
+    /** External submitted state. */
+    submitted?: boolean;
+    /** Copy and visual overrides once this interaction has been submitted. */
+    whenSubmitted?: SubmittedActionConfig;
+    /**
+     * Optional leading icon override. When omitted, falls back to
+     * `descriptor.icon` (an emoji glyph from the authoring spec).
+     */
+    icon?: ReactNode;
+    /** Stable identifier for diagnostics and tests. */
+    actionId?: string;
+    /** Called when the controlled action is activated. */
+    onAction?: () => void | Promise<void>;
+    /**
+     * Attention-halo policy. `auto` (default) pulses the halo for one
+     * breath when the button transitions from disabled → enabled (so
+     * the user sees the moment the action becomes available), then
+     * settles into a slow ambient breath while the action remains
+     * available. `always` keeps the breath running unconditionally.
+     * `off` suppresses the halo entirely.
+     *
+     * Ignored when `theme.motion.reducedMotion === "true"`.
+     */
+    attention?: PrimaryActionAttention;
+    /** Additional inline style merged after the resolved button style. */
+    style?: CSSProperties;
+    /** Optional className for downstream styling hooks. */
+    className?: string;
+}
+/**
+ * @see PrimaryActionButtonProps
+ */
+declare function PrimaryActionButton({ variant, size, label, ready, available: availableProp, unavailableReason, submitting: submittingProp, submitted, whenSubmitted, icon, actionId, onAction, attention, style, className, }: PrimaryActionButtonProps): react_jsx_runtime.JSX.Element;
+
+interface ActionPanelProps {
+    title?: string;
+    /** Current game state/phase for context display */
+    state?: string;
+    /** Human-readable state labels */
+    stateLabels?: Record<string, string>;
+    collapsible?: boolean;
+    defaultExpanded?: boolean;
+    children: ReactNode;
+    className?: string;
+}
+declare function ActionPanel({ title, state, stateLabels, collapsible, defaultExpanded, children, className, }: ActionPanelProps): react_jsx_runtime.JSX.Element;
+interface ActionGroupProps {
+    title: string;
+    description?: string;
+    visible?: boolean;
+    /** Highlight style for special phases. Maps directly onto theme intent slots. */
+    variant?: "default" | "warning" | "danger" | "success";
+    children: ReactNode;
+    className?: string;
+}
+declare function ActionGroup({ title, description, visible, variant, children, className, }: ActionGroupProps): react_jsx_runtime.JSX.Element | null;
+
+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;
+}
+declare function MoreActions({ children, label, count, defaultOpen, style, }: MoreActionsProps): react_jsx_runtime.JSX.Element;
+
+type DiceValue = number | null | undefined;
+
+interface DiceRollerRenderProps {
+    values: ReadonlyArray<number | undefined> | undefined;
+    /** Undefined if any die hasn't been rolled */
+    sum: number | undefined;
+    diceCount: number;
+    allRolled: boolean;
+}
+interface DiceRollerRollAction {
+    /** Controlled action callback supplied by the runtime or application. */
+    onRoll?: () => void | Promise<void>;
+    available?: boolean;
+    disabledReason?: string;
+    title?: ReactNode;
+    description?: ReactNode;
+    rollLabel?: ReactNode;
+    resultLabel?: ReactNode;
+    minSpinMs?: number;
+    revealHoldMs?: number;
+}
+interface DiceRollerProps {
+    values?: readonly DiceValue[] | null;
+    /** Used when values not provided */
+    diceCount?: number;
+    render?: (props: DiceRollerRenderProps) => ReactNode;
+    /** Optional controlled dialog flow for actions such as `rollDice`. */
+    rollAction?: DiceRollerRollAction;
+    className?: string;
+}
+declare function DiceRoller({ values, diceCount, render, rollAction, className, }: DiceRollerProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Surfaces the dominant turn-state question — "is this me?" / "who am I
+ * waiting for?" — as a single headline, with the phase label demoted to
+ * secondary copy underneath.
+ *
+ * The previous design rendered three peer chips (`Waiting`, `Roll dice`,
+ * `Player 3`) which fragmented one piece of information across three
+ * UI atoms. The redesign collapses them into a single status line:
+ *
+ *   ◐ Waiting for Player 3…
+ *      Roll dice
+ *
+ *   ● Your turn
+ *      Build, trade, or end your turn.
+ *
+ * Both states get a leading status indicator that animates so the eye
+ * picks up the "live" cue immediately. Animations are skipped when the
+ * theme reports `motion.reducedMotion === "true"`.
+ *
+ * Prop API is unchanged so existing callers (Catan, Things-in-Rings,
+ * tests) keep working without edits. The `variant` knob still toggles
+ * surface treatment (`badge` is layout-only, `bar` wraps the headline
+ * in an inset HUD strip, `minimal` collapses to a single underlined
+ * label for tight HUDs).
+ */
+interface PhaseIndicatorProps {
+    currentPhase: string;
+    phaseLabels?: Record<string, string>;
+    isMyTurn?: boolean;
+    activePlayerNames?: string[];
+    variant?: "badge" | "bar" | "minimal";
+    className?: string;
+}
+declare function PhaseIndicator({ currentPhase, phaseLabels, isMyTurn, activePlayerNames, variant, className, }: PhaseIndicatorProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * End-of-game winner display and scoreboard overlay.
+ *
+ * Visual styling derives entirely from the active {@link useTheme}
+ * (semantic + intent + elevation tokens). The win moment is the
+ * Peak-end anchor of the session, so the surface intentionally pushes
+ * the loudest theme signals (display typeface, primary intent,
+ * elevation.overlay) without inventing one-off colours.
+ */
+interface PlayerScore {
+    playerId: string;
+    name: string;
+    score: number;
+    isWinner?: boolean;
+    details?: Record<string, number>;
+}
+interface GameEndDisplayProps {
+    isGameOver: boolean;
+    /** Sorted by rank */
+    scores: PlayerScore[];
+    winnerMessage?: string;
+    showDetails?: boolean;
+    onReturnToLobby?: () => void;
+    className?: string;
+}
+declare function GameEndDisplay({ isGameOver, scores, winnerMessage, showDetails, onReturnToLobby, className, }: GameEndDisplayProps): react_jsx_runtime.JSX.Element | null;
+
+interface NetworkNode {
+    id: string;
+    label?: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    type?: string;
+    data?: Record<string, unknown>;
+}
+interface NetworkEdge {
+    id: string;
+    from: string;
+    to: string;
+    label?: string | number;
+    owner?: string;
+    type?: string;
+    data?: Record<string, unknown>;
+}
+interface NetworkPiece {
+    id: string;
+    nodeId: string;
+    owner?: string;
+    type?: string;
+    data?: Record<string, unknown>;
+}
+interface NetworkGraphProps {
+    nodes: NetworkNode[];
+    edges: NetworkEdge[];
+    pieces: NetworkPiece[];
+    /** Receives node centered at its position */
+    renderNode: (node: NetworkNode, pieces: NetworkPiece[]) => ReactNode;
+    renderEdge: (edge: NetworkEdge, fromNode: NetworkNode, toNode: NetworkNode) => ReactNode;
+    renderPiece: (piece: NetworkPiece, position: {
+        x: number;
+        y: number;
+    }) => ReactNode;
+    width?: number | string;
+    height?: number | string;
+    nodeRadius?: number;
+    enablePanZoom?: boolean;
+    initialZoom?: number;
+    minZoom?: number;
+    maxZoom?: number;
+    padding?: number;
+    className?: string;
+}
+interface DefaultNetworkNodeProps {
+    radius?: number;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    isSelected?: boolean;
+    isHighlighted?: boolean;
+    label?: string;
+    maxLabelLength?: number;
+    onClick?: () => void;
+    onPointerEnter?: () => void;
+    onPointerLeave?: () => void;
+    className?: string;
+}
+/** Pre-built network node for use in `renderNode`. */
+declare function DefaultNetworkNode({ radius, fill, stroke, strokeWidth, isSelected, isHighlighted, label, maxLabelLength, onClick, onPointerEnter, onPointerLeave, className, }: DefaultNetworkNodeProps): react_jsx_runtime.JSX.Element;
+interface DefaultNetworkEdgeProps {
+    from: {
+        x: number;
+        y: number;
+    };
+    to: {
+        x: number;
+        y: number;
+    };
+    color?: string;
+    strokeWidth?: number;
+    isSelected?: boolean;
+    isHighlighted?: boolean;
+    /** Displayed at midpoint */
+    label?: string | number;
+    onClick?: () => void;
+    onPointerEnter?: () => void;
+    onPointerLeave?: () => void;
+    className?: string;
+}
+/** Pre-built network edge for use in `renderEdge`. */
+declare function DefaultNetworkEdge({ from, to, color, strokeWidth, isSelected, isHighlighted, label, onClick, onPointerEnter, onPointerLeave, className, }: DefaultNetworkEdgeProps): react_jsx_runtime.JSX.Element;
+interface DefaultNetworkPieceProps {
+    color?: string;
+    radius?: number;
+    shape?: "circle" | "square";
+    onClick?: () => void;
+    className?: string;
+}
+declare function DefaultNetworkPiece({ color, radius, shape, onClick, className, }: DefaultNetworkPieceProps): react_jsx_runtime.JSX.Element;
+declare function NetworkGraph({ nodes, edges, pieces, renderNode, renderEdge, renderPiece, width, height, nodeRadius, enablePanZoom, initialZoom, minZoom, maxZoom, padding, className, }: NetworkGraphProps): react_jsx_runtime.JSX.Element;
+
+interface ZoneShape {
+    type: "polygon" | "path" | "circle";
+    points?: Array<{
+        x: number;
+        y: number;
+    }>;
+    /** SVG path data */
+    path?: string;
+    center?: {
+        x: number;
+        y: number;
+    };
+    radius?: number;
+}
+interface ZoneDefinition {
+    id: string;
+    name: string;
+    adjacentTo: string[];
+    shape?: ZoneShape;
+    value?: number;
+    type?: string;
+    data?: Record<string, unknown>;
+}
+interface ZonePiece {
+    id: string;
+    zoneId: string;
+    type: string;
+    owner?: string;
+    /** Count for stackable pieces (armies) */
+    count?: number;
+    data?: Record<string, unknown>;
+}
+interface ZoneMapProps {
+    zones: ZoneDefinition[];
+    pieces: ZonePiece[];
+    renderZone: (zone: ZoneDefinition, pieces: ZonePiece[]) => ReactNode;
+    backgroundImage?: string;
+    width?: number | string;
+    height?: number | string;
+    enablePanZoom?: boolean;
+    initialZoom?: number;
+    minZoom?: number;
+    maxZoom?: number;
+    className?: string;
+}
+type ZoneHighlightType = "valid" | "selected" | "attack" | "defend" | "neutral";
+interface DefaultZoneProps {
+    zone: ZoneDefinition;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    isHighlighted?: boolean;
+    highlightType?: ZoneHighlightType;
+    isSelected?: boolean;
+    showLabel?: boolean;
+    showValue?: boolean;
+    onClick?: () => void;
+    onHover?: (hovering: boolean) => void;
+    className?: string;
+    children?: ReactNode;
+}
+declare function DefaultZone({ zone, fill, stroke, strokeWidth, isHighlighted, highlightType, isSelected, showLabel, showValue, onClick, onHover, className, children, }: DefaultZoneProps): react_jsx_runtime.JSX.Element;
+interface DefaultZonePiecesProps {
+    pieces: ZonePiece[];
+    zone: ZoneDefinition;
+    playerColors?: Record<string, string>;
+    radius?: number;
+    spacing?: number;
+    yOffset?: number;
+    className?: string;
+}
+declare function DefaultZonePieces({ pieces, zone, playerColors, radius, spacing, yOffset, className, }: DefaultZonePiecesProps): react_jsx_runtime.JSX.Element | null;
+interface DefaultZonePieceProps {
+    piece: ZonePiece;
+    x?: number;
+    y?: number;
+    radius?: number;
+    color?: string;
+    onClick?: () => void;
+    className?: string;
+}
+declare function DefaultZonePiece({ piece, x, y, radius, color, onClick, className, }: DefaultZonePieceProps): react_jsx_runtime.JSX.Element;
+declare function ZoneMap({ zones, pieces, renderZone, backgroundImage, width, height, enablePanZoom, initialZoom, minZoom, maxZoom, className, }: ZoneMapProps): react_jsx_runtime.JSX.Element;
+
+interface SlotDefinition {
+    id: string;
+    name: string;
+    description?: string;
+    capacity: number;
+    /** One player per round */
+    exclusive?: boolean;
+    /** Personal action space owner */
+    owner?: string;
+    group?: string;
+    cost?: Record<string, number>;
+    reward?: Record<string, number>;
+    type?: string;
+    position?: {
+        x: number;
+        y: number;
+    };
+    data?: Record<string, unknown>;
+}
+type SlotOccupant = ViewSlotOccupant;
+interface SlotSystemProps {
+    slots: readonly SlotDefinition[];
+    occupants: readonly SlotOccupant[];
+    renderSlot: (slot: SlotDefinition, occupants: readonly SlotOccupant[]) => ReactNode;
+    layout?: "grid" | "list" | "grouped";
+    width?: number | string;
+    height?: number | string;
+    /** Minimum slot width for responsive grid */
+    minSlotWidth?: number;
+    className?: string;
+}
+interface DefaultSlotItemProps {
+    name: string;
+    description?: string;
+    capacity: number;
+    occupantCount: number;
+    isExclusive?: boolean;
+    isAvailable?: boolean;
+    isHighlighted?: boolean;
+    isSelected?: boolean;
+    costLabel?: string;
+    rewardLabel?: string;
+    renderOccupants?: () => ReactNode;
+    onClick?: () => void;
+    onPointerEnter?: () => void;
+    onPointerLeave?: () => void;
+    className?: string;
+}
+/** Pre-built slot item for use in `renderSlot`. */
+declare function DefaultSlotItem({ name, description, capacity, occupantCount, isExclusive, isAvailable, isHighlighted, isSelected, costLabel, rewardLabel, renderOccupants, onClick, onPointerEnter, onPointerLeave, className, }: DefaultSlotItemProps): react_jsx_runtime.JSX.Element;
+interface DefaultSlotOccupantProps {
+    color?: string;
+    size?: number;
+    shape?: "circle" | "square";
+    label?: string;
+    onClick?: () => void;
+    className?: string;
+}
+declare function DefaultSlotOccupant({ color, size, shape, label, onClick, className, }: DefaultSlotOccupantProps): react_jsx_runtime.JSX.Element;
+interface DefaultEmptySlotProps {
+    size?: number;
+    className?: string;
+}
+declare function DefaultEmptySlot({ size, className, }: DefaultEmptySlotProps): react_jsx_runtime.JSX.Element;
+declare function SlotSystem({ slots, occupants, renderSlot, layout, width, height, minSlotWidth, className, }: SlotSystemProps): react_jsx_runtime.JSX.Element;
+
+interface SquareEdgePosition {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    midX: number;
+    midY: number;
+    angle: number;
+}
+interface SquareVertexPosition {
+    x: number;
+    y: number;
+}
+interface InteractiveSquareEdge<TBoard extends AnySquareBoardInput = AnySquareBoardInput> extends NormalizedSquareEdgeOf<TBoard> {
+    position: SquareEdgePosition;
+}
+interface InteractiveSquareVertex<TBoard extends AnySquareBoardInput = AnySquareBoardInput> extends NormalizedSquareVertexOf<TBoard> {
+    position: SquareVertexPosition;
+}
+type InteractiveSquareSpace<TBoard extends AnySquareBoardInput = AnySquareBoardInput> = NormalizedSquareCellOf<TBoard>;
+interface SquareGeneratedGridInputProps {
+    id?: string;
+    layout?: "square";
+    spaces: Extract<AnySquareBoardInput, {
+        spaces: unknown;
+    }>["spaces"];
+    pieces?: AnySquareBoardInput["pieces"];
+    edges?: AnySquareBoardInput["edges"];
+    vertices?: AnySquareBoardInput["vertices"];
+}
+interface SquareAuthoredGridInputProps {
+    id?: string;
+    layout?: "square";
+    rows?: number;
+    cols?: number;
+    cells: Extract<AnySquareBoardInput, {
+        cells: unknown;
+    }>["cells"];
+    pieces?: readonly SquarePieceState[];
+    edges?: AnySquareBoardInput["edges"];
+    vertices?: AnySquareBoardInput["vertices"];
+}
+type SquareGridInputProps = SquareGeneratedGridInputProps | SquareAuthoredGridInputProps;
+type ResolvedSquareArrayProp<Value> = Exclude<Value, undefined> extends readonly unknown[] ? Exclude<Value, undefined> : readonly [];
+type SquareBoardLikeOfProps<TProps extends SquareGridInputProps> = TProps extends {
+    id?: infer Id;
+    layout?: infer Layout;
+    spaces: infer Spaces;
+    pieces?: infer Pieces;
+    edges?: infer Edges;
+    vertices?: infer Vertices;
+} ? {
+    id: Extract<Id, string> extends never ? string : Extract<Id, string>;
+    layout?: Extract<Layout, "square">;
+    spaces: Spaces;
+    pieces: ResolvedSquareArrayProp<Pieces>;
+    edges: ResolvedSquareArrayProp<Edges>;
+    vertices: ResolvedSquareArrayProp<Vertices>;
+} & GeneratedSquareBoardInput : TProps extends {
+    id?: infer Id;
+    layout?: infer Layout;
+    rows?: infer Rows;
+    cols?: infer Cols;
+    cells: infer Cells;
+    pieces?: infer Pieces;
+    edges?: infer Edges;
+    vertices?: infer Vertices;
+} ? {
+    id: Extract<Id, string> extends never ? string : Extract<Id, string>;
+    layout?: Extract<Layout, "square">;
+    rows: Extract<Rows, number> extends never ? number : Extract<Rows, number>;
+    cols: Extract<Cols, number> extends never ? number : Extract<Cols, number>;
+    cells: Cells;
+    pieces: ResolvedSquareArrayProp<Pieces>;
+    edges: ResolvedSquareArrayProp<Edges>;
+    vertices: ResolvedSquareArrayProp<Vertices>;
+} & AuthoredSquareBoardInput : never;
+type SquareGridProps<TProps extends SquareGridInputProps = SquareGridInputProps> = TProps & {
+    cellSize?: number;
+    /** Receives row/col with transform centered at cell position */
+    renderCell: (row: number, col: number) => ReactNode;
+    /** Receives piece with transform centered at cell center */
+    renderPiece: (piece: NormalizedSquarePieceOf<NoInfer<SquareBoardLikeOfProps<TProps>>>) => ReactNode;
+    renderEdge?: (edge: NormalizedSquareEdgeOf<NoInfer<SquareBoardLikeOfProps<TProps>>>, position: SquareEdgePosition) => ReactNode;
+    renderVertex?: (vertex: NormalizedSquareVertexOf<NoInfer<SquareBoardLikeOfProps<TProps>>>, position: SquareVertexPosition) => ReactNode;
+    showCoordinates?: boolean;
+    coordinateStyle?: "algebraic" | "numeric" | "none";
+    width?: number | string;
+    height?: number | string;
+    enablePanZoom?: boolean;
+    initialZoom?: number;
+    minZoom?: number;
+    maxZoom?: number;
+    className?: string;
+    interactiveSpaces?: InteractiveTargetLayer;
+    interactiveEdges?: InteractiveTargetLayer;
+    interactiveVertices?: InteractiveTargetLayer;
+    renderInteractiveSpace?: (space: InteractiveSquareSpace<NoInfer<SquareBoardLikeOfProps<TProps>>>, state: InteractiveTargetRenderState) => ReactNode;
+    renderInteractiveEdge?: (edge: InteractiveSquareEdge<NoInfer<SquareBoardLikeOfProps<TProps>>>, position: SquareEdgePosition, state: InteractiveTargetRenderState) => ReactNode;
+    renderInteractiveVertex?: (vertex: InteractiveSquareVertex<NoInfer<SquareBoardLikeOfProps<TProps>>>, position: SquareVertexPosition, state: InteractiveTargetRenderState) => ReactNode;
+};
+interface SquareGridBoardProps<TBoard extends AnySquareBoardInput = AnySquareBoardInput> {
+    board: TBoard;
+    cellSize?: number;
+    renderCell: (row: number, col: number) => ReactNode;
+    renderPiece: (piece: NormalizedSquarePieceOf<NoInfer<TBoard>>) => ReactNode;
+    renderEdge?: (edge: NormalizedSquareEdgeOf<NoInfer<TBoard>>, position: SquareEdgePosition) => ReactNode;
+    renderVertex?: (vertex: NormalizedSquareVertexOf<NoInfer<TBoard>>, position: SquareVertexPosition) => ReactNode;
+    showCoordinates?: boolean;
+    coordinateStyle?: "algebraic" | "numeric" | "none";
+    width?: number | string;
+    height?: number | string;
+    enablePanZoom?: boolean;
+    initialZoom?: number;
+    minZoom?: number;
+    maxZoom?: number;
+    className?: string;
+    interactiveSpaces?: InteractiveTargetLayer;
+    interactiveEdges?: InteractiveTargetLayer;
+    interactiveVertices?: InteractiveTargetLayer;
+    renderInteractiveSpace?: (space: InteractiveSquareSpace<NoInfer<TBoard>>, state: InteractiveTargetRenderState) => ReactNode;
+    renderInteractiveEdge?: (edge: InteractiveSquareEdge<NoInfer<TBoard>>, position: SquareEdgePosition, state: InteractiveTargetRenderState) => ReactNode;
+    renderInteractiveVertex?: (vertex: InteractiveSquareVertex<NoInfer<TBoard>>, position: SquareVertexPosition, state: InteractiveTargetRenderState) => ReactNode;
+}
+interface DefaultGridCellProps {
+    size: number;
+    isLight?: boolean;
+    lightColor?: string;
+    darkColor?: string;
+    isHighlighted?: boolean;
+    highlightColor?: string;
+    isSelected?: boolean;
+    selectedColor?: string;
+    isValidMove?: boolean;
+    isCapture?: boolean;
+    onClick?: () => void;
+    onPointerEnter?: () => void;
+    onPointerLeave?: () => void;
+    className?: string;
+}
+/** Pre-built grid cell component for use in `renderCell`. */
+declare function DefaultGridCell({ size, isLight, lightColor, darkColor, isHighlighted, highlightColor, isSelected, selectedColor, isValidMove, isCapture, onClick, onPointerEnter, onPointerLeave, className, }: DefaultGridCellProps): react_jsx_runtime.JSX.Element;
+interface DefaultGridPieceProps {
+    size: number;
+    color?: string;
+    strokeColor?: string;
+    label?: string;
+    isDragging?: boolean;
+    onClick?: () => void;
+    onPointerDown?: (e: React.PointerEvent) => void;
+    className?: string;
+}
+/** Pre-built grid piece component for use in `renderPiece`. */
+declare function DefaultGridPiece({ size, color, strokeColor, label, isDragging, onClick, onPointerDown, className, }: DefaultGridPieceProps): react_jsx_runtime.JSX.Element;
+interface DefaultChessPieceProps {
+    size: number;
+    type: string;
+    owner: "white" | "black";
+    onClick?: () => void;
+    onPointerDown?: (e: React.PointerEvent) => void;
+    className?: string;
+}
+/** Pre-built chess piece component using Unicode symbols. */
+declare function DefaultChessPiece({ size, type, owner, onClick, onPointerDown, className, }: DefaultChessPieceProps): react_jsx_runtime.JSX.Element;
+/**
+ * Convert row/col to algebraic notation (a1, b2, etc.)
+ */
+declare function toAlgebraic(row: number, col: number, totalRows: number): string;
+/**
+ * Convert row/col to numeric notation (1,1, 2,3, etc.)
+ */
+declare function toNumeric(row: number, col: number): string;
+interface SquareGridComponent {
+    <const TBoard extends AnySquareBoardInput>(props: SquareGridBoardProps<TBoard>): ReactNode;
+    <const TProps extends SquareGeneratedGridInputProps>(props: SquareGridProps<TProps>): ReactNode;
+    <const TProps extends SquareAuthoredGridInputProps>(props: SquareGridProps<TProps>): ReactNode;
+}
+declare const SquareGrid: SquareGridComponent;
+
+export { Dialog as $, ActionButton as A, type ButtonSize$1 as B, CardDragSurface as C, DefaultChessPiece as D, type DefaultNetworkEdgeProps as E, DefaultNetworkNode as F, type DefaultNetworkNodeProps as G, DefaultNetworkPiece as H, type DefaultNetworkPieceProps as I, DefaultSlotItem as J, type DefaultSlotItemProps as K, DefaultSlotOccupant as L, type DefaultSlotOccupantProps as M, DefaultTrackConnection as N, type DefaultTrackConnectionProps as O, DefaultTrackJump as P, type DefaultTrackJumpProps as Q, DefaultTrackPiece as R, type DefaultTrackPieceProps as S, DefaultTrackSpace as T, type DefaultTrackSpaceProps as U, DefaultZone as V, DefaultZonePiece as W, type DefaultZonePieceProps as X, DefaultZonePieces as Y, type DefaultZonePiecesProps as Z, type DefaultZoneProps as _, type ActionButtonProps as a, type SlotDefinition as a$, DialogClose as a0, DialogContent as a1, DialogDescription as a2, DialogFooter as a3, DialogHeader as a4, DialogOverlay as a5, DialogPortal as a6, DialogTitle as a7, DialogTrigger as a8, DiceRoller as a9, type HandProps as aA, Input as aB, type InteractiveSquareEdge as aC, type InteractiveSquareVertex as aD, Label as aE, MoreActions as aF, type MoreActionsProps as aG, type NetworkEdge as aH, NetworkGraph as aI, type NetworkGraphProps as aJ, type NetworkNode as aK, type NetworkPiece as aL, PhaseIndicator as aM, type PhaseIndicatorProps as aN, PlayArea as aO, type PlayAreaProps as aP, type PlayerScore as aQ, type PrimaryActionAttention as aR, PrimaryActionButton as aS, type PrimaryActionButtonProps as aT, PrimaryButton as aU, type PrimaryButtonProps as aV, type ResourceDefinition as aW, Select as aX, SelectContent as aY, SelectItem as aZ, SelectTrigger as a_, type DiceRollerProps as aa, type DragPhase as ab, Drawer as ac, DrawerClose as ad, DrawerContent as ae, DrawerDescription as af, DrawerFooter as ag, DrawerHeader as ah, DrawerOverlay as ai, DrawerPortal as aj, DrawerTitle as ak, DrawerTrigger as al, ErrorBoundary as am, type ErrorBoundaryProps as an, GameEndDisplay as ao, type GameEndDisplayProps as ap, GameSkeleton as aq, type GameSkeletonProps as ar, Hand as as, HandDock as at, type HandDockMode as au, type HandDockPlacement as av, type HandDockPresentation as aw, type HandDockProps as ax, type HandDockToggleContext as ay, type HandLayout as az, ActionGroup as b, type SlotOccupant as b0, SlotSystem as b1, type SlotSystemProps as b2, type SquareEdgePosition as b3, SquareGrid as b4, type SquareGridBoardProps as b5, type SquareGridProps as b6, type SquareVertexPosition as b7, StagingZone as b8, type StagingZoneProps as b9, surfaceStyle as bA, toAlgebraic as bB, toNumeric as bC, useCardDragSurface as bD, useChromeSuppression as bE, useHandLayout as bF, ThemedButton as ba, type ThemedButtonProps as bb, Toast as bc, ToastActions as bd, type ToastActionsProps as be, type ToastActionsValue as bf, type ToastNotification as bg, ToastProvider as bh, type ToastType as bi, TrackBoard as bj, type TrackBoardProps as bk, type TrackPiece as bl, type TrackSpace as bm, type UseHandLayoutOptions as bn, type UseHandLayoutReturn as bo, type ZoneDefinition as bp, type ZoneHighlightType as bq, ZoneMap as br, type ZoneMapProps as bs, type ZonePiece as bt, type ZoneShape as bu, buttonStyle as bv, chipStyle as bw, intentForVariant as bx, motionDuration as by, playerColor as bz, type ActionGroupProps as c, ActionPanel as d, type ActionPanelProps as e, type ButtonVariant$1 as f, type CardDragSurfaceContextValue as g, type CardDragSurfaceController as h, type CardDragSurfaceProps as i, CardDropTargetView as j, type CardDropTargetViewProps as k, CardFace as l, type CardFaceProps as m, type CardPositionProps as n, type CardSize as o, ChromeSuppressionProvider as p, CostDisplay as q, type CostDisplayProps as r, type DefaultChessPieceProps as s, DefaultEmptySlot as t, type DefaultEmptySlotProps as u, DefaultGridCell as v, type DefaultGridCellProps as w, DefaultGridPiece as x, type DefaultGridPieceProps as y, DefaultNetworkEdge as z };