@dreamboard-games/ui-sdk 0.0.41

package/dist/components/board/HexGrid.js

@@ -0,0 +1,340 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SVG-based hex grid for hex-based games (Catan, wargames, Hive, Twilight Imperium).
+ * Supports tiles, edges (roads), vertices (settlements), and interactive placement overlays.
+ * Pan/zoom enabled on mobile via @use-gesture.
+ */
+import { useMemo, useState } from "react";
+import { clsx } from "clsx";
+import { usePanZoom, calculateViewBox } from "../../hooks/usePanZoom.js";
+import { useIsMobile } from "../../hooks/useIsMobile.js";
+import { handleKeyboardActivation } from "./interaction-accessibility.js";
+import { interactiveTargetRenderState, isInteractiveTargetSelectable, } from "./target-layer.js";
+import { normalizeHexBoardInput, } from "../../types/tiled-board.js";
+/** Pre-built hexagon tile for use in `renderTile`. */
+export function DefaultHexTile({ size, fill, stroke = "#1e293b", strokeWidth = 1.5, isSelected = false, isHighlighted = false, label, showCoordinates = false, coordinates, orientation = "pointy-top", onClick, onPointerEnter, onPointerLeave, className, }) {
+    const effectiveFill = isSelected
+        ? "rgba(59, 130, 246, 0.5)"
+        : isHighlighted
+            ? "rgba(34, 197, 94, 0.4)"
+            : fill;
+    const effectiveStroke = isSelected
+        ? "#3b82f6"
+        : isHighlighted
+            ? "#22c55e"
+            : stroke;
+    const effectiveStrokeWidth = isSelected || isHighlighted ? 3 : strokeWidth;
+    const points = hexUtils.getHexPoints(0, 0, size * 0.95, orientation);
+    return (_jsxs("g", { onClick: onClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onKeyDown: (event) => handleKeyboardActivation(event, onClick), className: clsx("transition-all duration-150", onClick && "cursor-pointer hover:brightness-110", className), role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, "aria-label": onClick ? (label ?? "Hex tile") : undefined, children: [_jsx("polygon", { points: points, fill: effectiveFill, stroke: effectiveStroke, strokeWidth: effectiveStrokeWidth, filter: "url(#hexShadow)" }), label && (_jsx("text", { x: 0, y: showCoordinates ? -8 : 0, textAnchor: "middle", dominantBaseline: "middle", fill: "white", fontSize: size * 0.28, fontWeight: "bold", style: { textShadow: "1px 1px 2px rgba(0,0,0,0.8)" }, pointerEvents: "none", children: label })), showCoordinates && coordinates && (_jsxs("text", { x: 0, y: label ? 10 : 0, textAnchor: "middle", dominantBaseline: "middle", fill: "rgba(255,255,255,0.7)", fontSize: size * 0.2, pointerEvents: "none", children: [coordinates.q, ",", coordinates.r] }))] }));
+}
+/** Pre-built edge/road component for use in `renderEdge`. */
+export function DefaultHexEdge({ position, color, hasOwner = true, strokeWidth = 6, touchTargetSize = 20, onClick, className, }) {
+    const touchTargetLength = Math.hypot(position.x2 - position.x1, position.y2 - position.y1);
+    return (_jsxs("g", { onClick: onClick, onKeyDown: (event) => handleKeyboardActivation(event, onClick), className: clsx("transition-all duration-150", onClick && "cursor-pointer", className), role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, "aria-label": onClick ? "Hex edge" : undefined, children: [_jsx("rect", { x: position.midX - touchTargetLength / 2, y: position.midY - touchTargetSize / 2, width: touchTargetLength, height: touchTargetSize, rx: touchTargetSize / 2, fill: "rgba(255,255,255,0.001)", transform: `rotate(${position.edgeAngle} ${position.midX} ${position.midY})`, pointerEvents: "all" }), _jsx("line", { x1: position.x1, y1: position.y1, x2: position.x2, y2: position.y2, stroke: color, strokeWidth: hasOwner ? strokeWidth : strokeWidth / 2, strokeLinecap: "round", className: hasOwner ? "" : "opacity-30" })] }));
+}
+/** Pre-built vertex/settlement component for use in `renderVertex`. */
+export function DefaultHexVertex({ position, color, stroke = "#1e293b", strokeWidth = 1.5, hasOwner = true, isSelected = false, isHighlighted = false, size = 10, touchTargetSize = 22, shape = "circle", onClick, onPointerEnter, onPointerLeave, className, }) {
+    const effectiveColor = isSelected
+        ? "rgba(59, 130, 246, 0.8)"
+        : isHighlighted
+            ? "rgba(34, 197, 94, 0.8)"
+            : color;
+    const effectiveStroke = isSelected
+        ? "#3b82f6"
+        : isHighlighted
+            ? "#22c55e"
+            : stroke;
+    const effectiveStrokeWidth = isSelected || isHighlighted ? 3 : strokeWidth;
+    return (_jsxs("g", { onClick: onClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onKeyDown: (event) => handleKeyboardActivation(event, onClick), className: clsx("transition-all duration-150", onClick && "cursor-pointer hover:scale-110", className), style: { transformOrigin: `${position.x}px ${position.y}px` }, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, "aria-label": onClick ? "Hex vertex" : undefined, children: [_jsx("circle", { cx: position.x, cy: position.y, r: touchTargetSize, fill: "rgba(255,255,255,0.001)", pointerEvents: "all" }), shape === "square" ? (_jsx("rect", { x: position.x - size, y: position.y - size, width: size * 2, height: size * 2, fill: effectiveColor, stroke: effectiveStroke, strokeWidth: effectiveStrokeWidth, className: hasOwner ? "" : "opacity-30" })) : (_jsx("circle", { cx: position.x, cy: position.y, r: hasOwner ? size : size * 0.5, fill: effectiveColor, stroke: effectiveStroke, strokeWidth: effectiveStrokeWidth, className: hasOwner ? "" : "opacity-30" }))] }));
+}
+export function DefaultInteractiveVertex({ position, isHovered, size = 8, color = "rgba(255, 255, 255, 0.2)", hoverColor = "rgba(34, 197, 94, 0.8)", className, }) {
+    return (_jsx("circle", { cx: position.x, cy: position.y, r: isHovered ? size * 1.5 : size, fill: isHovered ? hoverColor : color, stroke: isHovered ? "#22c55e" : "rgba(255,255,255,0.4)", strokeWidth: isHovered ? 2 : 1, className: clsx("transition-all duration-150", className) }));
+}
+export function DefaultInteractiveEdge({ position, isHovered, strokeWidth = 4, color = "rgba(255, 255, 255, 0.15)", hoverColor = "rgba(251, 146, 60, 0.8)", className, }) {
+    return (_jsx("line", { x1: position.x1, y1: position.y1, x2: position.x2, y2: position.y2, stroke: isHovered ? hoverColor : color, strokeWidth: isHovered ? strokeWidth * 1.5 : strokeWidth, strokeLinecap: "round", className: clsx("transition-all duration-150", className) }));
+}
+// ============================================================================
+// Hex Math Utilities
+// ============================================================================
+export const hexUtils = {
+    /** Convert axial coordinates to pixel position. */
+    axialToPixel(q, r, size, orientation) {
+        if (orientation === "pointy-top") {
+            const x = size * (Math.sqrt(3) * q + (Math.sqrt(3) / 2) * r);
+            const y = size * ((3 / 2) * r);
+            return { x, y };
+        }
+        else {
+            const x = size * ((3 / 2) * q);
+            const y = size * ((Math.sqrt(3) / 2) * q + Math.sqrt(3) * r);
+            return { x, y };
+        }
+    },
+    getNeighbors(q, r) {
+        return [
+            { q: q + 1, r: r },
+            { q: q + 1, r: r - 1 },
+            { q: q, r: r - 1 },
+            { q: q - 1, r: r },
+            { q: q - 1, r: r + 1 },
+            { q: q, r: r + 1 },
+        ];
+    },
+    getDistance(q1, r1, q2, r2) {
+        return ((Math.abs(q1 - q2) + Math.abs(q1 + r1 - q2 - r2) + Math.abs(r1 - r2)) / 2);
+    },
+    getHexCorners(centerX, centerY, size, orientation) {
+        const corners = [];
+        const startAngle = orientation === "pointy-top" ? 30 : 0;
+        for (let i = 0; i < 6; i++) {
+            const angleDeg = startAngle + 60 * i;
+            const angleRad = (Math.PI / 180) * angleDeg;
+            corners.push({
+                x: centerX + size * Math.cos(angleRad),
+                y: centerY + size * Math.sin(angleRad),
+            });
+        }
+        return corners;
+    },
+    getHexPoints(centerX, centerY, size, orientation) {
+        const corners = this.getHexCorners(centerX, centerY, size, orientation);
+        return corners.map((c) => `${c.x},${c.y}`).join(" ");
+    },
+    getEdgePosition(hex1Pos, hex2Pos, size) {
+        const midX = (hex1Pos.x + hex2Pos.x) / 2;
+        const midY = (hex1Pos.y + hex2Pos.y) / 2;
+        const centerAngleRad = Math.atan2(hex2Pos.y - hex1Pos.y, hex2Pos.x - hex1Pos.x);
+        // Calculate edge endpoints perpendicular to the line between hex centers
+        const edgeAngleRad = centerAngleRad + Math.PI / 2;
+        const edgeLength = size * 0.8;
+        const centerAngle = (centerAngleRad * 180) / Math.PI;
+        const edgeAngle = (edgeAngleRad * 180) / Math.PI;
+        return {
+            x1: midX - (edgeLength / 2) * Math.cos(edgeAngleRad),
+            y1: midY - (edgeLength / 2) * Math.sin(edgeAngleRad),
+            x2: midX + (edgeLength / 2) * Math.cos(edgeAngleRad),
+            y2: midY + (edgeLength / 2) * Math.sin(edgeAngleRad),
+            midX,
+            midY,
+            centerAngle,
+            edgeAngle,
+        };
+    },
+    getVertexPosition(hex1Pos, hex2Pos, hex3Pos) {
+        return {
+            x: (hex1Pos.x + hex2Pos.x + hex3Pos.x) / 3,
+            y: (hex1Pos.y + hex2Pos.y + hex3Pos.y) / 3,
+        };
+    },
+};
+function HexGridImpl(props) {
+    const { orientation = "pointy-top", hexSize = 50, renderTile, renderEdge, renderVertex, width = 800, height = 600, enablePanZoom = true, initialZoom = 1, minZoom = 0.5, maxZoom = 3, className, interactiveSpaces, interactiveVertices, interactiveEdges, renderInteractiveSpace, renderInteractiveVertex, renderInteractiveEdge, interactiveVertexSize = 12, interactiveEdgeSize = 10, } = props;
+    const board = "board" in props
+        ? props.board
+        : ("spaces" in props
+            ? {
+                id: "__hex-grid__",
+                orientation,
+                spaces: props.spaces,
+                edges: props.edges ?? [],
+                vertices: props.vertices ?? [],
+            }
+            : {
+                id: "__hex-grid__",
+                orientation,
+                tiles: props.tiles,
+                edges: props.edges ?? [],
+                vertices: props.vertices ?? [],
+            });
+    // Pan/zoom is only enabled on mobile devices when the prop is true
+    const isMobile = useIsMobile();
+    const effectivePanZoom = enablePanZoom && isMobile;
+    const normalizedBoard = useMemo(() => normalizeHexBoardInput(board), [board]);
+    const resolvedTiles = normalizedBoard.tiles;
+    const resolvedEdges = normalizedBoard.edges;
+    const resolvedVertices = normalizedBoard.vertices;
+    const resolvedOrientation = normalizedBoard.orientation ?? orientation;
+    // Hover state for interactive elements
+    const [hoveredSpaceId, setHoveredSpaceId] = useState(null);
+    const [hoveredVertexId, setHoveredVertexId] = useState(null);
+    const [hoveredEdgeId, setHoveredEdgeId] = useState(null);
+    // Use the unified pan/zoom hook
+    const { transform, bind, isDragging } = usePanZoom({
+        enabled: effectivePanZoom,
+        initialZoom,
+        minZoom,
+        maxZoom,
+        mode: "viewbox",
+    });
+    // Pre-compute tile positions
+    const tilePositions = useMemo(() => {
+        const positions = new Map();
+        resolvedTiles.forEach((tile) => {
+            positions.set(tile.id, hexUtils.axialToPixel(tile.q, tile.r, hexSize, resolvedOrientation));
+        });
+        return positions;
+    }, [resolvedTiles, hexSize, resolvedOrientation]);
+    // Build a `HexTileGeometry` for a tile centered at `position`.
+    //
+    // The closures intentionally re-derive corners on demand so callers
+    // can pass a per-call `inset` without the grid pre-computing every
+    // possible inset. Hex math is cheap (six trig calls).
+    const buildTileGeometry = useMemo(() => (position) => {
+        const corners = (options) => {
+            const inset = options?.inset ?? 0;
+            const radius = Math.max(0, hexSize - inset);
+            return hexUtils.getHexCorners(0, 0, radius, resolvedOrientation);
+        };
+        const points = (options) => corners(options)
+            .map((corner) => `${corner.x},${corner.y}`)
+            .join(" ");
+        const outer = corners();
+        const xs = outer.map((corner) => corner.x);
+        const ys = outer.map((corner) => corner.y);
+        const minX = Math.min(...xs);
+        const maxX = Math.max(...xs);
+        const minY = Math.min(...ys);
+        const maxY = Math.max(...ys);
+        return {
+            size: hexSize,
+            orientation: resolvedOrientation,
+            center: { x: 0, y: 0 },
+            position,
+            corners,
+            points,
+            bounds: {
+                minX,
+                minY,
+                maxX,
+                maxY,
+                width: maxX - minX,
+                height: maxY - minY,
+            },
+        };
+    }, [hexSize, resolvedOrientation]);
+    const resolvedEdgePositions = useMemo(() => resolvedEdges.flatMap((edge) => {
+        const pos1 = tilePositions.get(edge.hex1);
+        const pos2 = tilePositions.get(edge.hex2);
+        if (!pos1 || !pos2) {
+            return [];
+        }
+        return [
+            {
+                edge,
+                interactiveEdge: {
+                    ...edge,
+                    spaceIds: [edge.hex1, edge.hex2],
+                    position: hexUtils.getEdgePosition(pos1, pos2, hexSize),
+                },
+            },
+        ];
+    }), [hexSize, resolvedEdges, tilePositions]);
+    const resolvedVertexPositions = useMemo(() => resolvedVertices.flatMap((vertex) => {
+        const [hex0, hex1, hex2] = vertex.hexes;
+        if (!hex0 || !hex1 || !hex2) {
+            return [];
+        }
+        const pos0 = tilePositions.get(hex0);
+        const pos1 = tilePositions.get(hex1);
+        const pos2 = tilePositions.get(hex2);
+        if (!pos0 || !pos1 || !pos2) {
+            return [];
+        }
+        return [
+            {
+                vertex,
+                interactiveVertex: {
+                    ...vertex,
+                    spaceIds: vertex.hexes,
+                    position: hexUtils.getVertexPosition(pos0, pos1, pos2),
+                },
+            },
+        ];
+    }), [resolvedVertices, tilePositions]);
+    // Calculate bounds for viewBox
+    const bounds = useMemo(() => {
+        if (resolvedTiles.length === 0) {
+            return { minX: 0, minY: 0, width: 400, height: 300 };
+        }
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        resolvedTiles.forEach((tile) => {
+            const pos = tilePositions.get(tile.id);
+            if (pos) {
+                minX = Math.min(minX, pos.x - hexSize);
+                minY = Math.min(minY, pos.y - hexSize);
+                maxX = Math.max(maxX, pos.x + hexSize);
+                maxY = Math.max(maxY, pos.y + hexSize);
+            }
+        });
+        const padding = hexSize;
+        return {
+            minX: minX - padding,
+            minY: minY - padding,
+            width: maxX - minX + padding * 2,
+            height: maxY - minY + padding * 2,
+        };
+    }, [resolvedTiles, tilePositions, hexSize]);
+    // Calculate viewBox with pan and zoom
+    const viewBox = calculateViewBox(bounds, transform);
+    // Parse viewBox for zoom indicator positioning
+    const viewBoxParts = viewBox.split(" ").map(Number);
+    const viewBoxX = viewBoxParts[0] ?? 0;
+    const viewBoxY = viewBoxParts[1] ?? 0;
+    const viewBoxHeight = viewBoxParts[3] ?? 0;
+    return (_jsxs("svg", { width: width, height: height, viewBox: viewBox, className: clsx("hex-grid", effectivePanZoom && "touch-none", isDragging && "cursor-grabbing", effectivePanZoom && !isDragging && "cursor-grab", className), ...bind(), role: "img", "aria-label": "Hex grid game board", children: [_jsxs("defs", { children: [_jsxs("linearGradient", { id: "oceanGradient", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [_jsx("stop", { offset: "0%", stopColor: "#0ea5e9" }), _jsx("stop", { offset: "100%", stopColor: "#0284c7" })] }), _jsx("filter", { id: "hexShadow", x: "-20%", y: "-20%", width: "140%", height: "140%", children: _jsx("feDropShadow", { dx: "1", dy: "1", stdDeviation: "2", floodOpacity: "0.3" }) })] }), _jsx("g", { className: "tiles", role: "list", "aria-label": "Hex tiles", children: resolvedTiles.map((tile) => {
+                    const pos = tilePositions.get(tile.id);
+                    if (!pos)
+                        return null;
+                    const geometry = buildTileGeometry(pos);
+                    return (_jsx("g", { transform: `translate(${pos.x}, ${pos.y})`, role: "listitem", "aria-label": tile.label ?? `Tile ${tile.id}`, children: renderTile(tile, geometry) }, tile.id));
+                }) }), interactiveSpaces && resolvedTiles.length > 0 && (_jsx("g", { className: "interactive-spaces", role: "list", "aria-label": "Interactive spaces", children: resolvedTiles.map((space) => {
+                    const pos = tilePositions.get(space.id);
+                    if (!pos)
+                        return null;
+                    const state = interactiveTargetRenderState(interactiveSpaces, space.id, hoveredSpaceId === space.id);
+                    const isSelectable = isInteractiveTargetSelectable(interactiveSpaces, state);
+                    return (_jsxs("g", { transform: `translate(${pos.x}, ${pos.y})`, role: isSelectable ? "button" : undefined, className: clsx(isSelectable && "cursor-pointer"), onPointerEnter: () => setHoveredSpaceId(space.id), onPointerLeave: () => setHoveredSpaceId((currentId) => currentId === space.id ? null : currentId), onClick: isSelectable
+                            ? () => {
+                                void interactiveSpaces.selectTargetId?.(space.id);
+                            }
+                            : undefined, onKeyDown: (event) => handleKeyboardActivation(event, isSelectable
+                            ? () => {
+                                void interactiveSpaces.selectTargetId?.(space.id);
+                            }
+                            : undefined), tabIndex: isSelectable ? 0 : undefined, "aria-label": isSelectable ? `Select space ${space.id}` : undefined, children: [isSelectable && (_jsx("polygon", { points: buildTileGeometry(pos).points({
+                                    inset: hexSize * 0.05,
+                                }), fill: "rgba(255,255,255,0.001)", pointerEvents: "all" })), renderInteractiveSpace
+                                ? renderInteractiveSpace(space, state)
+                                : null] }, space.id));
+                }) })), resolvedEdges.length > 0 && (_jsx("g", { className: "edges", role: "list", "aria-label": "Hex edges", children: resolvedEdgePositions.map(({ edge, interactiveEdge }) => {
+                    return (_jsx("g", { role: "listitem", children: renderEdge(edge, interactiveEdge.position) }, edge.id));
+                }) })), resolvedVertices.length > 0 && (_jsx("g", { className: "vertices", role: "list", "aria-label": "Hex vertices", children: resolvedVertexPositions.map(({ vertex, interactiveVertex }) => {
+                    return (_jsx("g", { role: "listitem", children: renderVertex(vertex, interactiveVertex.position) }, vertex.id));
+                }) })), interactiveEdges && resolvedEdgePositions.length > 0 && (_jsx("g", { className: "interactive-edges", role: "list", "aria-label": "Interactive edges for placement", children: resolvedEdgePositions.map(({ interactiveEdge: edge }) => {
+                    const state = interactiveTargetRenderState(interactiveEdges, edge.id, hoveredEdgeId === edge.id);
+                    const isSelectable = isInteractiveTargetSelectable(interactiveEdges, state);
+                    const touchTargetLength = Math.hypot(edge.position.x2 - edge.position.x1, edge.position.y2 - edge.position.y1);
+                    return (_jsxs("g", { role: isSelectable ? "button" : undefined, className: clsx(isSelectable && "cursor-pointer"), onPointerEnter: () => setHoveredEdgeId(edge.id), onPointerLeave: () => setHoveredEdgeId((currentId) => currentId === edge.id ? null : currentId), onClick: isSelectable
+                            ? () => {
+                                void interactiveEdges.selectTargetId?.(edge.id);
+                            }
+                            : undefined, onKeyDown: (event) => handleKeyboardActivation(event, isSelectable
+                            ? () => {
+                                void interactiveEdges.selectTargetId?.(edge.id);
+                            }
+                            : undefined), tabIndex: isSelectable ? 0 : undefined, "aria-label": isSelectable ? `Select edge ${edge.id}` : undefined, children: [isSelectable && (_jsx("rect", { x: edge.position.midX - touchTargetLength / 2, y: edge.position.midY - interactiveEdgeSize, width: touchTargetLength, height: interactiveEdgeSize * 2, rx: interactiveEdgeSize, fill: "rgba(255,255,255,0.001)", transform: `rotate(${edge.position.edgeAngle} ${edge.position.midX} ${edge.position.midY})`, pointerEvents: "all" })), renderInteractiveEdge ? (renderInteractiveEdge(edge, edge.position, state)) : state.isEnabled && state.isEligible ? (_jsx(DefaultInteractiveEdge, { position: edge.position, isHovered: state.isHovered, strokeWidth: interactiveEdgeSize * 0.6 })) : null] }, edge.id));
+                }) })), interactiveVertices && resolvedVertexPositions.length > 0 && (_jsx("g", { className: "interactive-vertices", role: "list", "aria-label": "Interactive vertices for placement", children: resolvedVertexPositions.map(({ interactiveVertex: vertex }) => {
+                    const state = interactiveTargetRenderState(interactiveVertices, vertex.id, hoveredVertexId === vertex.id);
+                    const isSelectable = isInteractiveTargetSelectable(interactiveVertices, state);
+                    return (_jsxs("g", { role: isSelectable ? "button" : undefined, className: clsx(isSelectable && "cursor-pointer"), onPointerEnter: () => setHoveredVertexId(vertex.id), onPointerLeave: () => setHoveredVertexId((currentId) => currentId === vertex.id ? null : currentId), onClick: isSelectable
+                            ? () => {
+                                void interactiveVertices.selectTargetId?.(vertex.id);
+                            }
+                            : undefined, onKeyDown: (event) => handleKeyboardActivation(event, isSelectable
+                            ? () => {
+                                void interactiveVertices.selectTargetId?.(vertex.id);
+                            }
+                            : undefined), tabIndex: isSelectable ? 0 : undefined, "aria-label": isSelectable ? `Select vertex ${vertex.id}` : undefined, children: [isSelectable && (_jsx("circle", { cx: vertex.position.x, cy: vertex.position.y, r: interactiveVertexSize * 1.5, fill: "rgba(255,255,255,0.001)", pointerEvents: "all" })), renderInteractiveVertex ? (renderInteractiveVertex(vertex, vertex.position, state)) : state.isEnabled && state.isEligible ? (_jsx(DefaultInteractiveVertex, { position: vertex.position, isHovered: state.isHovered, size: interactiveVertexSize * 0.6 })) : null] }, vertex.id));
+                }) })), effectivePanZoom && transform.zoom !== 1 && (_jsxs("g", { transform: `translate(${viewBoxX + 10}, ${viewBoxY + viewBoxHeight - 30})`, children: [_jsx("rect", { x: 0, y: 0, width: 60, height: 20, rx: 4, fill: "rgba(0,0,0,0.6)" }), _jsxs("text", { x: 30, y: 14, textAnchor: "middle", fill: "white", fontSize: 12, children: [Math.round(transform.zoom * 100), "%"] })] }))] }));
+}
+export const HexGrid = HexGridImpl;

package/dist/components/board/NetworkGraph.d.ts

@@ -0,0 +1,100 @@
+/**
+ * SVG-based network/graph visualization for route-building games
+ * (Ticket to Ride, Pandemic, Power Grid, Brass).
+ */
+import { type ReactNode } from "react";
+export interface NetworkNode {
+    id: string;
+    label?: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    type?: string;
+    data?: Record<string, unknown>;
+}
+export interface NetworkEdge {
+    id: string;
+    from: string;
+    to: string;
+    label?: string | number;
+    owner?: string;
+    type?: string;
+    data?: Record<string, unknown>;
+}
+export interface NetworkPiece {
+    id: string;
+    nodeId: string;
+    owner?: string;
+    type?: string;
+    data?: Record<string, unknown>;
+}
+export 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;
+}
+export 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`. */
+export declare function DefaultNetworkNode({ radius, fill, stroke, strokeWidth, isSelected, isHighlighted, label, maxLabelLength, onClick, onPointerEnter, onPointerLeave, className, }: DefaultNetworkNodeProps): import("react/jsx-runtime").JSX.Element;
+export 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`. */
+export declare function DefaultNetworkEdge({ from, to, color, strokeWidth, isSelected, isHighlighted, label, onClick, onPointerEnter, onPointerLeave, className, }: DefaultNetworkEdgeProps): import("react/jsx-runtime").JSX.Element;
+export interface DefaultNetworkPieceProps {
+    color?: string;
+    radius?: number;
+    shape?: "circle" | "square";
+    onClick?: () => void;
+    className?: string;
+}
+export declare function DefaultNetworkPiece({ color, radius, shape, onClick, className, }: DefaultNetworkPieceProps): import("react/jsx-runtime").JSX.Element;
+export declare function NetworkGraph({ nodes, edges, pieces, renderNode, renderEdge, renderPiece, width, height, nodeRadius, enablePanZoom, initialZoom, minZoom, maxZoom, padding, className, }: NetworkGraphProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NetworkGraph.d.ts.map

package/dist/components/board/NetworkGraph.d.ts.map

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

package/dist/components/board/NetworkGraph.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * SVG-based network/graph visualization for route-building games
+ * (Ticket to Ride, Pandemic, Power Grid, Brass).
+ */
+import { useMemo } from "react";
+import { clsx } from "clsx";
+import { usePanZoom, calculateViewBox } from "../../hooks/usePanZoom.js";
+import { handleKeyboardActivation } from "./interaction-accessibility.js";
+const EMPTY_NETWORK_EDGES = [];
+const EMPTY_NETWORK_PIECES = [];
+/** Pre-built network node for use in `renderNode`. */
+export function DefaultNetworkNode({ radius = 20, fill = "#1e293b", stroke = "#475569", strokeWidth = 2, isSelected = false, isHighlighted = false, label, maxLabelLength = 6, onClick, onPointerEnter, onPointerLeave, className, }) {
+    const effectiveFill = isSelected
+        ? "#3b82f6"
+        : isHighlighted
+            ? "#22c55e"
+            : fill;
+    const effectiveStroke = isSelected
+        ? "#60a5fa"
+        : isHighlighted
+            ? "#4ade80"
+            : stroke;
+    const effectiveStrokeWidth = isSelected || isHighlighted ? 3 : strokeWidth;
+    const displayLabel = label
+        ? label.length > maxLabelLength
+            ? label.slice(0, maxLabelLength - 1) + "…"
+            : label
+        : undefined;
+    return (_jsxs("g", { onClick: onClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onKeyDown: (event) => handleKeyboardActivation(event, onClick), className: clsx("transition-all duration-150", onClick && "cursor-pointer", className), role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, "aria-label": onClick ? (label ?? "Network node") : undefined, children: [_jsx("circle", { r: radius, fill: effectiveFill, stroke: effectiveStroke, strokeWidth: effectiveStrokeWidth }), displayLabel && (_jsx("text", { textAnchor: "middle", dominantBaseline: "central", fill: "white", fontSize: 10, fontWeight: "bold", children: displayLabel }))] }));
+}
+/** Pre-built network edge for use in `renderEdge`. */
+export function DefaultNetworkEdge({ from, to, color = "#64748b", strokeWidth = 3, isSelected = false, isHighlighted = false, label, onClick, onPointerEnter, onPointerLeave, className, }) {
+    const effectiveColor = isSelected
+        ? "#3b82f6"
+        : isHighlighted
+            ? "#22c55e"
+            : color;
+    const effectiveWidth = isSelected || isHighlighted ? strokeWidth + 2 : strokeWidth;
+    const midX = (from.x + to.x) / 2;
+    const midY = (from.y + to.y) / 2;
+    return (_jsxs("g", { onClick: onClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onKeyDown: (event) => handleKeyboardActivation(event, onClick), className: clsx("transition-all duration-150", onClick && "cursor-pointer", className), role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, "aria-label": onClick
+            ? label !== undefined
+                ? `Network edge ${label}`
+                : "Network edge"
+            : undefined, children: [_jsx("line", { x1: from.x, y1: from.y, x2: to.x, y2: to.y, stroke: effectiveColor, strokeWidth: effectiveWidth, strokeLinecap: "round" }), label !== undefined && (_jsxs(_Fragment, { children: [_jsx("circle", { cx: midX, cy: midY, r: 12, fill: "#1e293b", stroke: "#475569", strokeWidth: 1 }), _jsx("text", { x: midX, y: midY, textAnchor: "middle", dominantBaseline: "central", fill: "white", fontSize: 10, fontWeight: "bold", children: label })] }))] }));
+}
+export function DefaultNetworkPiece({ color = "#f59e0b", radius = 6, shape = "circle", onClick, className, }) {
+    return (_jsx("g", { onClick: onClick, onKeyDown: (event) => handleKeyboardActivation(event, onClick), className: clsx(onClick && "cursor-pointer", className), role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, "aria-label": onClick ? "Network piece" : undefined, children: shape === "square" ? (_jsx("rect", { x: -radius, y: -radius, width: radius * 2, height: radius * 2, fill: color, stroke: "white", strokeWidth: 1.5 })) : (_jsx("circle", { r: radius, fill: color, stroke: "white", strokeWidth: 1.5 })) }));
+}
+// ============================================================================
+// Component
+// ============================================================================
+export function NetworkGraph({ nodes, edges = EMPTY_NETWORK_EDGES, pieces = EMPTY_NETWORK_PIECES, renderNode, renderEdge, renderPiece, width = 800, height = 600, nodeRadius = 20, enablePanZoom = false, initialZoom = 1, minZoom = 0.5, maxZoom = 3, padding = 40, className, }) {
+    // Use the unified pan/zoom hook
+    const { transform, bind, isDragging } = usePanZoom({
+        enabled: enablePanZoom,
+        initialZoom,
+        minZoom,
+        maxZoom,
+        mode: "viewbox",
+    });
+    // Group pieces by node
+    const piecesByNode = useMemo(() => {
+        const map = {};
+        pieces.forEach((p) => {
+            const nodeId = p.nodeId;
+            const existing = map[nodeId];
+            if (existing) {
+                existing.push(p);
+            }
+            else {
+                map[nodeId] = [p];
+            }
+        });
+        return map;
+    }, [pieces]);
+    // Create node lookup map
+    const nodeMap = useMemo(() => {
+        return Object.fromEntries(nodes.map((n) => [n.id, n]));
+    }, [nodes]);
+    // Calculate bounds for viewBox
+    const bounds = useMemo(() => {
+        if (nodes.length === 0) {
+            return { minX: 0, minY: 0, width: 400, height: 300 };
+        }
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        nodes.forEach((node) => {
+            minX = Math.min(minX, node.position.x - nodeRadius);
+            minY = Math.min(minY, node.position.y - nodeRadius);
+            maxX = Math.max(maxX, node.position.x + nodeRadius);
+            maxY = Math.max(maxY, node.position.y + nodeRadius);
+        });
+        return {
+            minX: minX - padding,
+            minY: minY - padding,
+            width: maxX - minX + padding * 2,
+            height: maxY - minY + padding * 2,
+        };
+    }, [nodes, nodeRadius, padding]);
+    // Calculate viewBox with pan and zoom
+    const viewBox = calculateViewBox(bounds, transform);
+    // Parse viewBox for zoom indicator positioning
+    const viewBoxParts = viewBox.split(" ").map(Number);
+    const viewBoxX = viewBoxParts[0] ?? 0;
+    const viewBoxY = viewBoxParts[1] ?? 0;
+    const viewBoxHeight = viewBoxParts[3] ?? 0;
+    return (_jsxs("svg", { width: width, height: height, viewBox: viewBox, className: clsx("overflow-visible", enablePanZoom && "touch-none", isDragging && "cursor-grabbing", enablePanZoom && !isDragging && "cursor-grab", className), ...bind(), role: "img", "aria-label": "Network graph", children: [_jsx("g", { className: "network-edges", role: "list", "aria-label": "Network connections", children: edges.map((edge) => {
+                    const fromNode = nodeMap[edge.from];
+                    const toNode = nodeMap[edge.to];
+                    if (!fromNode || !toNode)
+                        return null;
+                    return (_jsx("g", { role: "listitem", "aria-label": `Edge from ${fromNode.label ?? fromNode.id} to ${toNode.label ?? toNode.id}`, children: renderEdge(edge, fromNode, toNode) }, edge.id));
+                }) }), _jsx("g", { className: "network-nodes", role: "list", "aria-label": "Network nodes", children: nodes.map((node) => {
+                    const nodePieces = piecesByNode[node.id] ?? [];
+                    return (_jsxs("g", { transform: `translate(${node.position.x}, ${node.position.y})`, role: "listitem", "aria-label": node.label ?? node.id, children: [renderNode(node, nodePieces), nodePieces.length > 0 && (_jsx("g", { className: "node-pieces", children: nodePieces.map((piece, i) => {
+                                    const angle = (i / nodePieces.length) * 2 * Math.PI - Math.PI / 2;
+                                    const pieceX = Math.cos(angle) * (nodeRadius + 8);
+                                    const pieceY = Math.sin(angle) * (nodeRadius + 8);
+                                    return (_jsx("g", { transform: `translate(${pieceX}, ${pieceY})`, children: renderPiece(piece, { x: pieceX, y: pieceY }) }, piece.id));
+                                }) }))] }, node.id));
+                }) }), enablePanZoom && transform.zoom !== 1 && (_jsxs("g", { transform: `translate(${viewBoxX + 10}, ${viewBoxY + viewBoxHeight - 30})`, children: [_jsx("rect", { x: 0, y: 0, width: 60, height: 20, rx: 4, fill: "rgba(0,0,0,0.6)" }), _jsxs("text", { x: 30, y: 14, textAnchor: "middle", fill: "white", fontSize: 12, children: [Math.round(transform.zoom * 100), "%"] })] }))] }));
+}

package/dist/components/board/SlotSystem.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Worker placement visualization for Euro games (Agricola, Viticulture, Lords of Waterdeep).
+ */
+import { type ReactNode } from "react";
+import type { ViewSlotOccupant } from "@dreamboard/sdk-types";
+export 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>;
+}
+export type SlotOccupant = ViewSlotOccupant;
+export 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;
+}
+export 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`. */
+export declare function DefaultSlotItem({ name, description, capacity, occupantCount, isExclusive, isAvailable, isHighlighted, isSelected, costLabel, rewardLabel, renderOccupants, onClick, onPointerEnter, onPointerLeave, className, }: DefaultSlotItemProps): import("react/jsx-runtime").JSX.Element;
+export interface DefaultSlotOccupantProps {
+    color?: string;
+    size?: number;
+    shape?: "circle" | "square";
+    label?: string;
+    onClick?: () => void;
+    className?: string;
+}
+export declare function DefaultSlotOccupant({ color, size, shape, label, onClick, className, }: DefaultSlotOccupantProps): import("react/jsx-runtime").JSX.Element;
+export interface DefaultEmptySlotProps {
+    size?: number;
+    className?: string;
+}
+export declare function DefaultEmptySlot({ size, className, }: DefaultEmptySlotProps): import("react/jsx-runtime").JSX.Element;
+export declare function SlotSystem({ slots, occupants, renderSlot, layout, width, height, minSlotWidth, className, }: SlotSystemProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SlotSystem.d.ts.map