@dreamboard-games/ui-sdk 0.0.41

package/dist/hooks/useHandLayout.js

@@ -0,0 +1,235 @@
+import { useState, useRef, useEffect, useMemo, useCallback } from "react";
+// Card dimensions used for fan offset and total-width calculations.
+// These must match the rendered widths from `Card.tsx`'s `sizeClasses`
+// at the `sm` Tailwind breakpoint (≥640px), since that's the size
+// player decks render at on virtually all gameplay viewports. Older
+// values here were ~30% smaller than what `Card` actually paints,
+// which caused cards to overlap by 30+ pixels even when there was
+// plenty of horizontal room in the hand container.
+const CARD_DIMENSIONS = {
+    sm: { width: 80, height: 112 },
+    md: { width: 96, height: 144 },
+    lg: { width: 128, height: 192 },
+};
+const MIN_VISIBLE_PORTION = 16; // minimum visible pixels per card when overlapping
+const HOVER_LIFT = 20; // pixels to lift on hover
+const SELECTED_LIFT = 8; // pixels to lift when selected
+const DRAWER_THRESHOLD_RATIO = 0.3; // if overlap is less than 30% of card width, use drawer
+/**
+ * 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>
+ *   );
+ * }
+ * ```
+ */
+export function useHandLayout({ cardCount, cardSize = "md", layout = "overlap", containerPadding = 32, }) {
+    const containerRef = useRef(null);
+    const cardsContainerRef = useRef(null);
+    const [containerWidth, setContainerWidth] = useState(0);
+    const [hoveredIndex, setHoveredIndex] = useState(null);
+    const cardDimensions = CARD_DIMENSIONS[cardSize];
+    // Measure container width with ResizeObserver
+    useEffect(() => {
+        const updateWidth = () => {
+            if (containerRef.current) {
+                setContainerWidth(containerRef.current.clientWidth - containerPadding);
+            }
+        };
+        updateWidth();
+        const observer = new ResizeObserver(updateWidth);
+        if (containerRef.current) {
+            observer.observe(containerRef.current);
+        }
+        return () => observer.disconnect();
+    }, [containerPadding]);
+    // Calculate adaptive overlap based on container width and card count
+    const { cardOffset, totalWidth, useDrawerMode } = useMemo(() => {
+        if (layout !== "overlap") {
+            return {
+                cardOffset: cardDimensions.width,
+                totalWidth: 0,
+                useDrawerMode: false,
+            };
+        }
+        if (cardCount === 0) {
+            return { cardOffset: 0, totalWidth: 0, useDrawerMode: false };
+        }
+        if (cardCount === 1) {
+            return {
+                cardOffset: cardDimensions.width,
+                totalWidth: cardDimensions.width,
+                useDrawerMode: false,
+            };
+        }
+        // Available width for overlap distribution
+        const availableWidth = containerWidth;
+        if (availableWidth <= 0) {
+            return {
+                cardOffset: cardDimensions.width,
+                totalWidth: cardDimensions.width * cardCount,
+                useDrawerMode: false,
+            };
+        }
+        // Calculate the offset needed to fit all cards
+        // Total width = cardWidth + (cardCount - 1) * offset
+        // So offset = (availableWidth - cardWidth) / (cardCount - 1)
+        const idealOffset = (availableWidth - cardDimensions.width) / (cardCount - 1);
+        // Clamp offset between minimum visible portion and full card width
+        const clampedOffset = Math.max(MIN_VISIBLE_PORTION, Math.min(cardDimensions.width, idealOffset));
+        // Calculate total width with this offset
+        const width = cardDimensions.width + (cardCount - 1) * clampedOffset;
+        // Determine if we should use drawer mode
+        // Use drawer if cards are overlapping too much (less than threshold of card visible)
+        const visiblePortion = clampedOffset / cardDimensions.width;
+        const shouldUseDrawer = visiblePortion < DRAWER_THRESHOLD_RATIO && cardCount > 2;
+        return {
+            cardOffset: clampedOffset,
+            totalWidth: width,
+            useDrawerMode: shouldUseDrawer,
+        };
+    }, [cardCount, containerWidth, layout, cardDimensions.width]);
+    // Calculate hovered card index based on mouse X position
+    // This allows hovering on adjacent cards even when one is popped up
+    const handleMouseMove = useCallback((e) => {
+        if (!cardsContainerRef.current ||
+            cardCount === 0 ||
+            layout === "spread" ||
+            layout === "stack") {
+            return;
+        }
+        const rect = cardsContainerRef.current.getBoundingClientRect();
+        const mouseX = e.clientX - rect.left;
+        let newHoveredIndex = null;
+        // Find which card the mouse is over based on X position
+        for (let i = cardCount - 1; i >= 0; i--) {
+            const cardLeft = i * cardOffset;
+            const cardRight = i === cardCount - 1
+                ? cardLeft + cardDimensions.width
+                : (i + 1) * cardOffset;
+            if (mouseX >= cardLeft && mouseX < cardRight) {
+                newHoveredIndex = i;
+                break;
+            }
+        }
+        // Check if mouse is in the rightmost card's full area
+        if (newHoveredIndex === null && mouseX >= 0 && mouseX < totalWidth) {
+            const lastCardLeft = (cardCount - 1) * cardOffset;
+            if (mouseX >= lastCardLeft) {
+                newHoveredIndex = cardCount - 1;
+            }
+        }
+        setHoveredIndex(newHoveredIndex);
+    }, [cardCount, cardOffset, totalWidth, layout, cardDimensions.width]);
+    const handleMouseLeave = useCallback(() => {
+        setHoveredIndex(null);
+    }, []);
+    // Calculate z-index: hovered > selected > position
+    const getZIndex = useCallback((index, isHovered, isSelected) => {
+        if (isHovered)
+            return 200;
+        if (isSelected)
+            return 100 + index;
+        return index;
+    }, []);
+    // Get card position props for different layouts
+    const getCardPosition = useCallback((index, isHovered, isSelected) => {
+        const zIndex = getZIndex(index, isHovered, isSelected);
+        if (layout === "stack") {
+            return {
+                x: index * 4,
+                y: 0,
+                zIndex,
+                transformOrigin: "bottom center",
+            };
+        }
+        if (layout === "spread") {
+            return {
+                x: 0,
+                y: 0,
+                zIndex,
+                transformOrigin: "bottom center",
+            };
+        }
+        // Overlap layout (default) - simple horizontal overlap with lift on hover/select
+        const yOffset = isHovered ? -HOVER_LIFT : isSelected ? -SELECTED_LIFT : 0;
+        return {
+            x: index * cardOffset,
+            y: yOffset,
+            zIndex,
+            transformOrigin: "bottom center",
+        };
+    }, [layout, cardOffset, getZIndex]);
+    return {
+        containerRef,
+        cardsContainerRef,
+        containerWidth,
+        cardOffset,
+        totalWidth,
+        useDrawerMode,
+        cardDimensions,
+        constants: {
+            hoverLift: HOVER_LIFT,
+            selectedLift: SELECTED_LIFT,
+        },
+        hoveredIndex,
+        handleMouseMove,
+        handleMouseLeave,
+        getCardPosition,
+    };
+}

package/dist/hooks/useHexBoard.d.ts

@@ -0,0 +1,19 @@
+import type { AnyHexBoardInput, BoardSpaceIdOf, NormalizedHexBoard, NormalizedHexTileOf } from "../types/tiled-board.js";
+export declare function useHexBoard<const TBoard extends AnyHexBoardInput>(board: TBoard): {
+    board: NormalizedHexBoard<TBoard>;
+    getTile: (tileId: BoardSpaceIdOf<TBoard>) => NormalizedHexTileOf<TBoard> | undefined;
+    getTileAt: (q: number, r: number) => NormalizedHexTileOf<TBoard> | undefined;
+    getNeighbors: (tileId: BoardSpaceIdOf<TBoard>) => Array<NormalizedHexTileOf<TBoard>>;
+    getTilesInRange: (centerTileId: BoardSpaceIdOf<TBoard>, range: number) => Array<NormalizedHexTileOf<TBoard>>;
+    layout: TBoard extends AnyHexBoardInput ? "hex" : "square";
+    getSpace: (spaceId: BoardSpaceIdOf<TBoard>) => (TBoard extends AnyHexBoardInput ? NormalizedHexTileOf<TBoard> : TBoard extends import("../index.js").AnySquareBoardInput ? import("../index.js").NormalizedSquareCellOf<TBoard> : never) | undefined;
+    getEdge: (edgeId: import("../index.js").BoardEdgeIdOf<TBoard>) => (TBoard extends AnyHexBoardInput ? import("../index.js").NormalizedHexEdgeOf<TBoard> : TBoard extends import("../index.js").AnySquareBoardInput ? import("../index.js").NormalizedSquareEdgeOf<TBoard> : never) | undefined;
+    getVertex: (vertexId: import("../index.js").BoardVertexIdOf<TBoard>) => (TBoard extends AnyHexBoardInput ? import("../index.js").NormalizedHexVertexOf<TBoard> : TBoard extends import("../index.js").AnySquareBoardInput ? import("../index.js").NormalizedSquareVertexOf<TBoard> : never) | undefined;
+    getAdjacentSpaces: (spaceId: BoardSpaceIdOf<TBoard>) => (TBoard extends AnyHexBoardInput ? NormalizedHexTileOf<TBoard> : TBoard extends import("../index.js").AnySquareBoardInput ? import("../index.js").NormalizedSquareCellOf<TBoard> : never)[];
+    getDistance: (fromSpaceId: BoardSpaceIdOf<TBoard>, toSpaceId: BoardSpaceIdOf<TBoard>) => number;
+    getSpaceEdges: (spaceId: BoardSpaceIdOf<TBoard>) => (TBoard extends AnyHexBoardInput ? import("../index.js").NormalizedHexEdgeOf<TBoard> : TBoard extends import("../index.js").AnySquareBoardInput ? import("../index.js").NormalizedSquareEdgeOf<TBoard> : never)[];
+    getSpaceVertices: (spaceId: BoardSpaceIdOf<TBoard>) => (TBoard extends AnyHexBoardInput ? import("../index.js").NormalizedHexVertexOf<TBoard> : TBoard extends import("../index.js").AnySquareBoardInput ? import("../index.js").NormalizedSquareVertexOf<TBoard> : never)[];
+    getIncidentEdges: (vertexId: import("../index.js").BoardVertexIdOf<TBoard>) => (TBoard extends AnyHexBoardInput ? import("../index.js").NormalizedHexEdgeOf<TBoard> : TBoard extends import("../index.js").AnySquareBoardInput ? import("../index.js").NormalizedSquareEdgeOf<TBoard> : never)[];
+    getIncidentVertices: (edgeId: import("../index.js").BoardEdgeIdOf<TBoard>) => (TBoard extends AnyHexBoardInput ? import("../index.js").NormalizedHexVertexOf<TBoard> : TBoard extends import("../index.js").AnySquareBoardInput ? import("../index.js").NormalizedSquareVertexOf<TBoard> : never)[];
+};
+//# sourceMappingURL=useHexBoard.d.ts.map

package/dist/hooks/useHexBoard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHexBoard.d.ts","sourceRoot":"","sources":["../../src/hooks/useHexBoard.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,yBAAyB,CAAC;AAIjC,wBAAgB,WAAW,CAAC,KAAK,CAAC,MAAM,SAAS,gBAAgB,EAC/D,KAAK,EAAE,MAAM;;sBAmBF,cAAc,CAAC,MAAM,CAAC,KAEzB,mBAAmB,CAAC,MAAM,CAAC,GAC3B,SAAS;mBAMX,MAAM,KAAK,MAAM,KAEf,mBAAmB,CAAC,MAAM,CAAC,GAC3B,SAAS;2BAMN,cAAc,CAAC,MAAM,CAAC,KACgB,KAAK,CAChD,mBAAmB,CAAC,MAAM,CAAC,CAC5B;oCAMY,cAAc,CAAC,MAAM,CAAC,SAAS,MAAM,KAG7C,KAAK,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;;;;;;;;;;;EAa5C"}

package/dist/hooks/useHexBoard.js

@@ -0,0 +1,28 @@
+import { useCallback, useMemo } from "react";
+import { normalizeHexBoardInput } from "../types/tiled-board.js";
+import { useBoardTopology } from "./useBoardTopology.js";
+export function useHexBoard(board) {
+    const normalizedBoard = useMemo(() => normalizeHexBoardInput(board), [board]);
+    const topology = useBoardTopology(board);
+    const tileByCoordinate = useMemo(() => new Map(normalizedBoard.tiles.map((tile) => [`${tile.q},${tile.r}`, tile])), [normalizedBoard.tiles]);
+    const getTile = useCallback((tileId) => {
+        return topology.getSpace(tileId);
+    }, [topology]);
+    const getTileAt = useCallback((q, r) => {
+        return tileByCoordinate.get(`${q},${r}`);
+    }, [tileByCoordinate]);
+    const getNeighbors = useCallback((tileId) => {
+        return topology.getAdjacentSpaces(tileId);
+    }, [topology]);
+    const getTilesInRange = useCallback((centerTileId, range) => {
+        return normalizedBoard.tiles.filter((tile) => topology.getDistance(centerTileId, tile.id) <= range);
+    }, [normalizedBoard.tiles, topology]);
+    return {
+        ...topology,
+        board: normalizedBoard,
+        getTile,
+        getTileAt,
+        getNeighbors,
+        getTilesInRange,
+    };
+}

package/dist/hooks/useHexGrid.d.ts

@@ -0,0 +1,56 @@
+/**
+ * useHexGrid hook - Headless logic for hex grid games
+ *
+ * Provides utilities for:
+ * - Coordinate conversion and neighbor finding
+ * - Distance calculations
+ * - Tile lookups
+ *
+ * @example
+ * ```tsx
+ * const { getNeighbors, getDistance, getTile } = useHexGrid(tiles);
+ *
+ * // Find all adjacent tiles
+ * const neighbors = getNeighbors('center');
+ *
+ * // Check if two tiles are adjacent
+ * const isAdjacent = getDistance('tile1', 'tile2') === 1;
+ * ```
+ */
+export interface HexTileData {
+    /** Unique tile identifier */
+    id: string;
+    /** Axial coordinate Q */
+    q: number;
+    /** Axial coordinate R */
+    r: number;
+    /** Tile type */
+    type?: string;
+    /** Additional data */
+    data?: Record<string, unknown>;
+}
+export interface UseHexGridReturn {
+    /** Get a tile by ID */
+    getTile: (tileId: string) => HexTileData | undefined;
+    /** Get a tile by coordinates */
+    getTileAt: (q: number, r: number) => HexTileData | undefined;
+    /** Get neighboring tiles */
+    getNeighbors: (tileId: string) => HexTileData[];
+    /** Get distance between two tiles */
+    getDistance: (fromId: string, toId: string) => number;
+    /** Get all tiles within a range */
+    getHexesInRange: (centerId: string, range: number) => HexTileData[];
+    /** Convert axial to cube coordinates */
+    axialToCube: (q: number, r: number) => {
+        x: number;
+        y: number;
+        z: number;
+    };
+    /** Convert cube to axial coordinates */
+    cubeToAxial: (x: number, y: number, z: number) => {
+        q: number;
+        r: number;
+    };
+}
+export declare function useHexGrid(tiles: HexTileData[]): UseHexGridReturn;
+//# sourceMappingURL=useHexGrid.d.ts.map

package/dist/hooks/useHexGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHexGrid.d.ts","sourceRoot":"","sources":["../../src/hooks/useHexGrid.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAQH,MAAM,WAAW,WAAW;IAC1B,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,yBAAyB;IACzB,CAAC,EAAE,MAAM,CAAC;IACV,yBAAyB;IACzB,CAAC,EAAE,MAAM,CAAC;IACV,gBAAgB;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAChC;AAED,MAAM,WAAW,gBAAgB;IAC/B,uBAAuB;IACvB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,WAAW,GAAG,SAAS,CAAC;IACrD,gCAAgC;IAChC,SAAS,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,WAAW,GAAG,SAAS,CAAC;IAC7D,4BAA4B;IAC5B,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,WAAW,EAAE,CAAC;IAChD,qCAAqC;IACrC,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACtD,mCAAmC;IACnC,eAAe,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,WAAW,EAAE,CAAC;IACpE,wCAAwC;IACxC,WAAW,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3E,wCAAwC;IACxC,WAAW,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC5E;AAmBD,wBAAgB,UAAU,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,gBAAgB,CA+GjE"}

package/dist/hooks/useHexGrid.js

@@ -0,0 +1,112 @@
+/**
+ * useHexGrid hook - Headless logic for hex grid games
+ *
+ * Provides utilities for:
+ * - Coordinate conversion and neighbor finding
+ * - Distance calculations
+ * - Tile lookups
+ *
+ * @example
+ * ```tsx
+ * const { getNeighbors, getDistance, getTile } = useHexGrid(tiles);
+ *
+ * // Find all adjacent tiles
+ * const neighbors = getNeighbors('center');
+ *
+ * // Check if two tiles are adjacent
+ * const isAdjacent = getDistance('tile1', 'tile2') === 1;
+ * ```
+ */
+import { useMemo, useCallback } from "react";
+// ============================================================================
+// Axial direction vectors
+// ============================================================================
+const AXIAL_DIRECTIONS = [
+    { q: 1, r: 0 },
+    { q: 1, r: -1 },
+    { q: 0, r: -1 },
+    { q: -1, r: 0 },
+    { q: -1, r: 1 },
+    { q: 0, r: 1 },
+];
+// ============================================================================
+// Hook Implementation
+// ============================================================================
+export function useHexGrid(tiles) {
+    // Create lookup maps
+    const tileById = useMemo(() => {
+        return new Map(tiles.map((t) => [t.id, t]));
+    }, [tiles]);
+    const tileByCoord = useMemo(() => {
+        return new Map(tiles.map((t) => [`${t.q},${t.r}`, t]));
+    }, [tiles]);
+    // Get tile by ID
+    const getTile = useCallback((tileId) => {
+        return tileById.get(tileId);
+    }, [tileById]);
+    // Get tile by coordinates
+    const getTileAt = useCallback((q, r) => {
+        return tileByCoord.get(`${q},${r}`);
+    }, [tileByCoord]);
+    // Get neighboring tiles
+    const getNeighbors = useCallback((tileId) => {
+        const tile = tileById.get(tileId);
+        if (!tile)
+            return [];
+        const neighbors = [];
+        for (const dir of AXIAL_DIRECTIONS) {
+            const neighbor = tileByCoord.get(`${tile.q + dir.q},${tile.r + dir.r}`);
+            if (neighbor) {
+                neighbors.push(neighbor);
+            }
+        }
+        return neighbors;
+    }, [tileById, tileByCoord]);
+    // Calculate distance between two tiles
+    const getDistance = useCallback((fromId, toId) => {
+        const from = tileById.get(fromId);
+        const to = tileById.get(toId);
+        if (!from || !to)
+            return Infinity;
+        // Hex distance formula using axial coordinates
+        return ((Math.abs(from.q - to.q) +
+            Math.abs(from.q + from.r - to.q - to.r) +
+            Math.abs(from.r - to.r)) /
+            2);
+    }, [tileById]);
+    // Get all tiles within range
+    const getHexesInRange = useCallback((centerId, range) => {
+        const center = tileById.get(centerId);
+        if (!center)
+            return [];
+        const results = [];
+        for (let dq = -range; dq <= range; dq++) {
+            const minR = Math.max(-range, -dq - range);
+            const maxR = Math.min(range, -dq + range);
+            for (let dr = minR; dr <= maxR; dr++) {
+                const tile = tileByCoord.get(`${center.q + dq},${center.r + dr}`);
+                if (tile) {
+                    results.push(tile);
+                }
+            }
+        }
+        return results;
+    }, [tileById, tileByCoord]);
+    // Convert axial to cube coordinates
+    const axialToCube = useCallback((q, r) => {
+        return { x: q, z: r, y: -q - r };
+    }, []);
+    // Convert cube to axial coordinates
+    const cubeToAxial = useCallback((x, _y, z) => {
+        return { q: x, r: z };
+    }, []);
+    return {
+        getTile,
+        getTileAt,
+        getNeighbors,
+        getDistance,
+        getHexesInRange,
+        axialToCube,
+        cubeToAxial,
+    };
+}

package/dist/hooks/useInteractionByKey.d.ts

@@ -0,0 +1,29 @@
+import type { InteractionHandle, InteractionParamsShape } from "./useInteractionHandle.js";
+/**
+ * Look up an interaction descriptor by phase-qualified key on the controlling seat's
+ * inbox and return a bound {@link InteractionHandle}. Returns `null`
+ * when no matching descriptor is currently projected.
+ *
+ * Prefer this over manual `inbox.bySurface.panel?.find(...)` + sentinel
+ * descriptor patterns — it keeps hook-call order stable and guarantees
+ * the handle reflects the freshest descriptor.
+ *
+ * Types:
+ * - `Key` narrows the key literal. When called from the workspace-local
+ *   `useInteractionByKey` re-export generated in `ui-contract.ts`, `Key` is
+ *   constrained to the generated `InteractionKey` union so typos become
+ *   compile errors.
+ * - `Params` is the params shape (`InteractionParamsOf<Key>` in the
+ *   generated re-export). It flows through to `draft`, `submit`,
+ *   `validate`, and `setInput` for compile-time safety.
+ *
+ * ```tsx
+ * // from the generated workspace re-export
+ * const handle = useInteractionByKey("play.placeThingCard");
+ * if (!handle) return <Waiting/>;
+ * handle.setInput("cardId", card.id); // typed to ThingsDeckCardId
+ * await handle.submit();
+ * ```
+ */
+export declare function useInteractionByKey<Key extends string = string, Params extends InteractionParamsShape = InteractionParamsShape, DefaultedKeys extends keyof Params & string = never>(interactionKey: Key | null | undefined): InteractionHandle<Params, DefaultedKeys> | null;
+//# sourceMappingURL=useInteractionByKey.d.ts.map

package/dist/hooks/useInteractionByKey.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInteractionByKey.d.ts","sourceRoot":"","sources":["../../src/hooks/useInteractionByKey.ts"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAEV,iBAAiB,EAEjB,sBAAsB,EACvB,MAAM,2BAA2B,CAAC;AAEnC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,mBAAmB,CACjC,GAAG,SAAS,MAAM,GAAG,MAAM,EAC3B,MAAM,SAAS,sBAAsB,GAAG,sBAAsB,EAC9D,aAAa,SAAS,MAAM,MAAM,GAAG,MAAM,GAAG,KAAK,EAEnD,cAAc,EAAE,GAAG,GAAG,IAAI,GAAG,SAAS,GACrC,iBAAiB,CAAC,MAAM,EAAE,aAAa,CAAC,GAAG,IAAI,CA2RjD"}