@dreamboard-games/ui-sdk 0.0.41

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

@@ -0,0 +1,113 @@
+/**
+ * SVG-based track visualization for racing and path games
+ * (Monopoly, Game of Life, Snakes & Ladders). Supports linear, circular, and branching tracks.
+ */
+import { type ReactNode } from "react";
+export 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;
+}
+export 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;
+}
+export 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;
+}
+export 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;
+}
+export declare function DefaultTrackSpace({ space, size, fill, stroke, strokeWidth, isHighlighted, isSelected, showJumpIndicator, onClick, onHover, className, children, }: DefaultTrackSpaceProps): import("react/jsx-runtime").JSX.Element;
+export interface DefaultTrackPieceProps {
+    piece: TrackPiece;
+    index?: number;
+    total?: number;
+    radius?: number;
+    color?: string;
+    onClick?: () => void;
+    className?: string;
+}
+export declare function DefaultTrackPiece({ piece, index, total, radius, color, onClick, className, }: DefaultTrackPieceProps): import("react/jsx-runtime").JSX.Element;
+export interface DefaultTrackConnectionProps {
+    from: {
+        x: number;
+        y: number;
+    };
+    to: {
+        x: number;
+        y: number;
+    };
+    stroke?: string;
+    strokeWidth?: number;
+    className?: string;
+}
+export declare function DefaultTrackConnection({ from, to, stroke, strokeWidth, className, }: DefaultTrackConnectionProps): import("react/jsx-runtime").JSX.Element;
+export 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;
+}
+export declare function DefaultTrackJump({ from, to, isUp, spaceSize, upColor, downColor, strokeWidth, className, }: DefaultTrackJumpProps): import("react/jsx-runtime").JSX.Element;
+export declare function TrackBoard({ spaces, pieces, type, renderSpace, renderConnection, renderJump, width, height, enablePanZoom, initialZoom, minZoom, maxZoom, className, }: TrackBoardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TrackBoard.d.ts.map

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

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

package/dist/components/board/TrackBoard.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SVG-based track visualization for racing and path games
+ * (Monopoly, Game of Life, Snakes & Ladders). Supports linear, circular, and branching tracks.
+ */
+import { useMemo } from "react";
+import { clsx } from "clsx";
+import { usePanZoom } from "../../hooks/usePanZoom.js";
+import { handleKeyboardActivation } from "./interaction-accessibility.js";
+export function DefaultTrackSpace({ space, size = 50, fill = "#1e293b", stroke = "#475569", strokeWidth = 1, isHighlighted = false, isSelected = false, showJumpIndicator = true, onClick, onHover, className, children, }) {
+    const halfSize = size / 2;
+    const computedFill = isHighlighted ? "rgba(59, 130, 246, 0.3)" : fill;
+    const computedStroke = isSelected
+        ? "#3b82f6"
+        : isHighlighted
+            ? "#60a5fa"
+            : stroke;
+    const computedStrokeWidth = isHighlighted || isSelected ? 3 : strokeWidth;
+    return (_jsxs("g", { onClick: onClick, onMouseEnter: () => onHover?.(true), onMouseLeave: () => onHover?.(false), onKeyDown: (event) => handleKeyboardActivation(event, onClick), className: clsx(onClick && "cursor-pointer", className), role: onClick ? "button" : "listitem", "aria-label": space.name || `Space ${space.index}`, tabIndex: onClick ? 0 : undefined, children: [_jsx("rect", { x: -halfSize, y: -halfSize, width: size, height: size, rx: 8, fill: computedFill, stroke: computedStroke, strokeWidth: computedStrokeWidth }), space.name ? (_jsx("text", { textAnchor: "middle", dominantBaseline: "middle", fill: "white", fontSize: space.name.length > 4 ? 8 : 10, fontWeight: "bold", children: space.name.length > 8 ? space.name.slice(0, 7) + "…" : space.name })) : (_jsx("text", { textAnchor: "middle", dominantBaseline: "middle", fill: "#94a3b8", fontSize: 12, fontWeight: "bold", children: space.index })), showJumpIndicator && space.jumpTo && (_jsxs("g", { transform: `translate(${halfSize - 6}, ${-halfSize + 6})`, children: [_jsx("circle", { r: 6, fill: "#fbbf24" }), _jsx("text", { textAnchor: "middle", dominantBaseline: "central", fill: "black", fontSize: 8, fontWeight: "bold", children: "\u2197" })] })), children] }));
+}
+export function DefaultTrackPiece({ piece, index = 0, total = 1, radius = 8, color = "#f59e0b", onClick, className, }) {
+    // Arrange pieces in a circle around the space center
+    const spacing = radius * 2.2;
+    const angle = (index / total) * 2 * Math.PI - Math.PI / 2;
+    const offset = total > 1 ? spacing : 0;
+    const px = Math.cos(angle) * offset;
+    const py = Math.sin(angle) * offset;
+    return (_jsx("circle", { cx: px, cy: py, r: radius, fill: color, stroke: "white", strokeWidth: 2, onClick: (e) => {
+            e.stopPropagation();
+            onClick?.();
+        }, onKeyDown: (event) => handleKeyboardActivation(event, onClick, { stopPropagation: true }), className: clsx(onClick && "cursor-pointer", className), role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, "aria-label": `Piece ${piece.id} owned by ${piece.owner}` }));
+}
+export function DefaultTrackConnection({ from, to, stroke = "#475569", strokeWidth = 2, className, }) {
+    return (_jsx("line", { x1: from.x, y1: from.y, x2: to.x, y2: to.y, stroke: stroke, strokeWidth: strokeWidth, strokeLinecap: "round", className: className }));
+}
+export function DefaultTrackJump({ from, to, isUp, spaceSize = 50, upColor = "#22c55e", downColor = "#ef4444", strokeWidth = 3, className, }) {
+    const color = isUp ? upColor : downColor;
+    // Calculate arrow direction
+    const dx = to.x - from.x;
+    const dy = to.y - from.y;
+    const len = Math.sqrt(dx * dx + dy * dy);
+    const unitX = dx / len;
+    const unitY = dy / len;
+    // Offset start and end points
+    const startX = from.x + unitX * (spaceSize / 2 + 5);
+    const startY = from.y + unitY * (spaceSize / 2 + 5);
+    const endX = to.x - unitX * (spaceSize / 2 + 5);
+    const endY = to.y - unitY * (spaceSize / 2 + 5);
+    // Generate unique marker IDs
+    const markerId = `arrow-${isUp ? "up" : "down"}-${from.x}-${from.y}`;
+    return (_jsxs("g", { className: className, children: [_jsx("defs", { children: _jsx("marker", { id: markerId, markerWidth: "10", markerHeight: "7", refX: "9", refY: "3.5", orient: "auto", children: _jsx("polygon", { points: "0 0, 10 3.5, 0 7", fill: color }) }) }), _jsx("line", { x1: startX, y1: startY, x2: endX, y2: endY, stroke: color, strokeWidth: strokeWidth, strokeDasharray: "6,4", markerEnd: `url(#${markerId})` })] }));
+}
+// ============================================================================
+// Main Component
+// ============================================================================
+export function TrackBoard({ spaces, pieces, type = "linear", renderSpace, renderConnection, renderJump, width = 800, height = 600, enablePanZoom = false, initialZoom = 1, minZoom = 0.5, maxZoom = 3, className, }) {
+    // Use the unified pan/zoom hook
+    const { transform, bind, isDragging } = usePanZoom({
+        enabled: enablePanZoom,
+        initialZoom,
+        minZoom,
+        maxZoom,
+        mode: "viewbox",
+    });
+    // Group pieces by space
+    const piecesBySpace = useMemo(() => {
+        const map = {};
+        pieces.forEach((p) => {
+            const existing = map[p.spaceId];
+            if (existing) {
+                existing.push(p);
+            }
+            else {
+                map[p.spaceId] = [p];
+            }
+        });
+        return map;
+    }, [pieces]);
+    // Sort spaces by index for drawing connections
+    const sortedSpaces = useMemo(() => {
+        return [...spaces].sort((a, b) => a.index - b.index);
+    }, [spaces]);
+    // Create space lookup
+    const spaceMap = useMemo(() => {
+        return new Map(spaces.map((s) => [s.id, s]));
+    }, [spaces]);
+    // Render connections between spaces
+    const renderConnections = () => {
+        if (!renderConnection)
+            return null;
+        return sortedSpaces.map((space, i) => {
+            const nextSpace = sortedSpaces[i + 1];
+            const firstSpace = sortedSpaces[0];
+            const nextSpaceIds = space.nextSpaces ||
+                (i < sortedSpaces.length - 1 && nextSpace
+                    ? [nextSpace.id]
+                    : type === "circular" && firstSpace
+                        ? [firstSpace.id]
+                        : []);
+            return nextSpaceIds.map((nextId) => {
+                const targetSpace = spaceMap.get(nextId);
+                if (!targetSpace)
+                    return null;
+                return (_jsx("g", { children: renderConnection(space.position, targetSpace.position, space, targetSpace) }, `${space.id}-${nextId}`));
+            });
+        });
+    };
+    // Render jump arrows (snakes/ladders)
+    const renderJumps = () => {
+        if (!renderJump)
+            return null;
+        return spaces.flatMap((space) => {
+            if (!space.jumpTo)
+                return [];
+            const targetSpace = spaceMap.get(space.jumpTo);
+            if (!targetSpace)
+                return [];
+            const isUp = targetSpace.index > space.index;
+            return [
+                _jsx("g", { children: renderJump(space.position, targetSpace.position, space, targetSpace, isUp) }, `jump-${space.id}`),
+            ];
+        });
+    };
+    // Calculate viewBox dimensions
+    const baseWidth = typeof width === "number" ? width : 800;
+    const baseHeight = typeof height === "number" ? height : 600;
+    const viewBoxWidth = baseWidth / transform.zoom;
+    const viewBoxHeight = baseHeight / transform.zoom;
+    const viewBoxX = (baseWidth - viewBoxWidth) / 2 - transform.pan.x;
+    const viewBoxY = (baseHeight - viewBoxHeight) / 2 - transform.pan.y;
+    return (_jsxs("svg", { width: width, height: height, viewBox: `${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}`, className: clsx("overflow-visible", enablePanZoom && "touch-none", isDragging && "cursor-grabbing", enablePanZoom && !isDragging && "cursor-grab", className), ...bind(), role: "img", "aria-label": "Track board", children: [_jsx("g", { className: "track-connections", children: renderConnections() }), _jsx("g", { className: "track-jumps", children: renderJumps() }), _jsx("g", { className: "track-spaces", role: "list", "aria-label": "Track spaces", children: spaces.map((space) => {
+                    const spacePieces = piecesBySpace[space.id] || [];
+                    return (_jsx("g", { transform: `translate(${space.position.x}, ${space.position.y})`, children: renderSpace(space, spacePieces) }, space.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/ZoneMap.d.ts

@@ -0,0 +1,88 @@
+/**
+ * SVG-based area control visualization for territory games (Risk, Small World, Diplomacy).
+ */
+import { type ReactNode } from "react";
+export interface ZoneShape {
+    type: "polygon" | "path" | "circle";
+    points?: Array<{
+        x: number;
+        y: number;
+    }>;
+    /** SVG path data */
+    path?: string;
+    center?: {
+        x: number;
+        y: number;
+    };
+    radius?: number;
+}
+export interface ZoneDefinition {
+    id: string;
+    name: string;
+    adjacentTo: string[];
+    shape?: ZoneShape;
+    value?: number;
+    type?: string;
+    data?: Record<string, unknown>;
+}
+export interface ZonePiece {
+    id: string;
+    zoneId: string;
+    type: string;
+    owner?: string;
+    /** Count for stackable pieces (armies) */
+    count?: number;
+    data?: Record<string, unknown>;
+}
+export 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;
+}
+export type ZoneHighlightType = "valid" | "selected" | "attack" | "defend" | "neutral";
+export 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;
+}
+export declare function DefaultZone({ zone, fill, stroke, strokeWidth, isHighlighted, highlightType, isSelected, showLabel, showValue, onClick, onHover, className, children, }: DefaultZoneProps): import("react/jsx-runtime").JSX.Element;
+export interface DefaultZonePiecesProps {
+    pieces: ZonePiece[];
+    zone: ZoneDefinition;
+    playerColors?: Record<string, string>;
+    radius?: number;
+    spacing?: number;
+    yOffset?: number;
+    className?: string;
+}
+export declare function DefaultZonePieces({ pieces, zone, playerColors, radius, spacing, yOffset, className, }: DefaultZonePiecesProps): import("react/jsx-runtime").JSX.Element | null;
+export interface DefaultZonePieceProps {
+    piece: ZonePiece;
+    x?: number;
+    y?: number;
+    radius?: number;
+    color?: string;
+    onClick?: () => void;
+    className?: string;
+}
+export declare function DefaultZonePiece({ piece, x, y, radius, color, onClick, className, }: DefaultZonePieceProps): import("react/jsx-runtime").JSX.Element;
+export declare function ZoneMap({ zones, pieces, renderZone, backgroundImage, width, height, enablePanZoom, initialZoom, minZoom, maxZoom, className, }: ZoneMapProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ZoneMap.d.ts.map

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

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

package/dist/components/board/ZoneMap.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SVG-based area control visualization for territory games (Risk, Small World, Diplomacy).
+ */
+import { useMemo } from "react";
+import { clsx } from "clsx";
+import { usePanZoom } from "../../hooks/usePanZoom.js";
+import { handleKeyboardActivation } from "./interaction-accessibility.js";
+// Highlight colors by type
+const HIGHLIGHT_COLORS = {
+    valid: "rgba(34, 197, 94, 0.4)", // Green
+    selected: "rgba(59, 130, 246, 0.4)", // Blue
+    attack: "rgba(239, 68, 68, 0.4)", // Red
+    defend: "rgba(234, 179, 8, 0.4)", // Yellow
+    neutral: "rgba(148, 163, 184, 0.4)", // Slate
+};
+const HIGHLIGHT_STROKES = {
+    valid: "#22c55e",
+    selected: "#3b82f6",
+    attack: "#ef4444",
+    defend: "#eab308",
+    neutral: "#94a3b8",
+};
+const EMPTY_PLAYER_COLORS = {};
+export function DefaultZone({ zone, fill = "rgba(100, 116, 139, 0.2)", stroke = "#475569", strokeWidth = 1, isHighlighted = false, highlightType, isSelected = false, showLabel = true, showValue = false, onClick, onHover, className, children, }) {
+    // Calculate colors based on state
+    let computedFill = fill;
+    let computedStroke = stroke;
+    let computedStrokeWidth = strokeWidth;
+    if (isHighlighted && highlightType && HIGHLIGHT_COLORS[highlightType]) {
+        computedFill = HIGHLIGHT_COLORS[highlightType];
+        computedStroke = HIGHLIGHT_STROKES[highlightType];
+        computedStrokeWidth = 3;
+    }
+    else if (isSelected) {
+        computedFill = HIGHLIGHT_COLORS.selected;
+        computedStroke = HIGHLIGHT_STROKES.selected;
+        computedStrokeWidth = 3;
+    }
+    // Render zone shape
+    const renderShape = () => {
+        if (!zone.shape)
+            return null;
+        switch (zone.shape.type) {
+            case "polygon":
+                if (!zone.shape.points)
+                    return null;
+                return (_jsx("polygon", { points: zone.shape.points.map((p) => `${p.x},${p.y}`).join(" "), fill: computedFill, stroke: computedStroke, strokeWidth: computedStrokeWidth }));
+            case "path":
+                if (!zone.shape.path)
+                    return null;
+                return (_jsx("path", { d: zone.shape.path, fill: computedFill, stroke: computedStroke, strokeWidth: computedStrokeWidth }));
+            case "circle":
+                if (!zone.shape.center)
+                    return null;
+                return (_jsx("circle", { cx: zone.shape.center.x, cy: zone.shape.center.y, r: zone.shape.radius || 30, fill: computedFill, stroke: computedStroke, strokeWidth: computedStrokeWidth }));
+            default:
+                return null;
+        }
+    };
+    return (_jsxs("g", { onClick: onClick, onMouseEnter: () => onHover?.(true), onMouseLeave: () => onHover?.(false), onKeyDown: (event) => handleKeyboardActivation(event, onClick), className: clsx(onClick && "cursor-pointer", className), role: onClick ? "button" : "listitem", "aria-label": zone.name, tabIndex: onClick ? 0 : undefined, children: [renderShape(), showLabel && zone.shape?.center && (_jsx("text", { x: zone.shape.center.x, y: zone.shape.center.y - (showValue ? 8 : 0), textAnchor: "middle", dominantBaseline: "middle", fill: "white", fontSize: 12, fontWeight: "bold", style: { textShadow: "1px 1px 2px rgba(0,0,0,0.8)" }, children: zone.name })), showValue && zone.value !== undefined && zone.shape?.center && (_jsxs("text", { x: zone.shape.center.x, y: zone.shape.center.y + 8, textAnchor: "middle", dominantBaseline: "middle", fill: "#fbbf24", fontSize: 10, fontWeight: "bold", style: { textShadow: "1px 1px 2px rgba(0,0,0,0.8)" }, children: ["+", zone.value] })), children] }));
+}
+export function DefaultZonePieces({ pieces, zone, playerColors = EMPTY_PLAYER_COLORS, radius = 14, spacing = 25, yOffset = 20, className, }) {
+    if (pieces.length === 0 || !zone.shape?.center)
+        return null;
+    const centerX = zone.shape.center.x;
+    const centerY = zone.shape.center.y;
+    // Group pieces by owner
+    const piecesByOwner = {};
+    pieces.forEach((p) => {
+        const owner = p.owner || "neutral";
+        const existing = piecesByOwner[owner];
+        if (existing) {
+            existing.push(p);
+        }
+        else {
+            piecesByOwner[owner] = [p];
+        }
+    });
+    const owners = Object.keys(piecesByOwner);
+    const startOffset = -((owners.length - 1) * spacing) / 2;
+    return (_jsx("g", { className: clsx("zone-pieces", className), children: owners.map((owner, i) => {
+            const ownerPieces = piecesByOwner[owner] || [];
+            const totalCount = ownerPieces.reduce((sum, p) => sum + (p.count || 1), 0);
+            const offsetX = startOffset + i * spacing;
+            return (_jsxs("g", { transform: `translate(${centerX + offsetX}, ${centerY + yOffset})`, children: [_jsx("circle", { r: radius, fill: playerColors[owner] || "#64748b", stroke: "white", strokeWidth: 2 }), _jsx("text", { textAnchor: "middle", dominantBaseline: "central", fill: "white", fontSize: 10, fontWeight: "bold", children: totalCount })] }, owner));
+        }) }));
+}
+export function DefaultZonePiece({ piece, x = 0, y = 0, radius = 14, color = "#64748b", onClick, className, }) {
+    const count = piece.count || 1;
+    return (_jsxs("g", { transform: `translate(${x}, ${y})`, onClick: (e) => {
+            e.stopPropagation();
+            onClick?.();
+        }, onKeyDown: (event) => handleKeyboardActivation(event, onClick, { stopPropagation: true }), className: clsx(onClick && "cursor-pointer", className), role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, "aria-label": `Piece ${piece.id}`, children: [_jsx("circle", { r: radius, fill: color, stroke: "white", strokeWidth: 2 }), _jsx("text", { textAnchor: "middle", dominantBaseline: "central", fill: "white", fontSize: 10, fontWeight: "bold", children: count })] }));
+}
+// ============================================================================
+// Main Component
+// ============================================================================
+export function ZoneMap({ zones, pieces, renderZone, backgroundImage, width = 800, height = 600, enablePanZoom = false, initialZoom = 1, minZoom = 0.5, maxZoom = 3, className, }) {
+    // Use the unified pan/zoom hook
+    const { transform, bind, isDragging } = usePanZoom({
+        enabled: enablePanZoom,
+        initialZoom,
+        minZoom,
+        maxZoom,
+        mode: "viewbox",
+    });
+    // Group pieces by zone
+    const piecesByZone = useMemo(() => {
+        const map = {};
+        pieces.forEach((p) => {
+            const existing = map[p.zoneId];
+            if (existing) {
+                existing.push(p);
+            }
+            else {
+                map[p.zoneId] = [p];
+            }
+        });
+        return map;
+    }, [pieces]);
+    // Calculate viewBox dimensions
+    const baseWidth = typeof width === "number" ? width : 800;
+    const baseHeight = typeof height === "number" ? height : 600;
+    const viewBoxWidth = baseWidth / transform.zoom;
+    const viewBoxHeight = baseHeight / transform.zoom;
+    const viewBoxX = (baseWidth - viewBoxWidth) / 2 - transform.pan.x;
+    const viewBoxY = (baseHeight - viewBoxHeight) / 2 - transform.pan.y;
+    return (_jsxs("svg", { width: width, height: height, viewBox: `${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}`, className: clsx("overflow-visible", enablePanZoom && "touch-none", isDragging && "cursor-grabbing", enablePanZoom && !isDragging && "cursor-grab", className), ...bind(), role: "img", "aria-label": "Zone map", children: [backgroundImage && (_jsx("image", { href: backgroundImage, width: width, height: height })), _jsx("g", { className: "zones", role: "list", "aria-label": "Map zones", children: zones.map((zone) => {
+                    const zonePieces = piecesByZone[zone.id] || [];
+                    return _jsx("g", { children: renderZone(zone, zonePieces) }, zone.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/hex-board-view.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Typed adapter for joining static hex-board topology with a dynamic
+ * per-space view overlay. Use this to feed `HexGrid` a single board
+ * value whose tiles carry both static geometry (`q`, `r`, `id`) and
+ * the projected view fields the UI cares about (e.g. `terrain`,
+ * `numberToken`).
+ *
+ * The runtime is intentionally strict: every static space must have
+ * exactly one overlay, duplicates throw, and overlays for ids that
+ * are not on the board throw. There is no relaxed fallback in v1 —
+ * silent merge bugs are far more expensive than a loud throw at
+ * dev/CI time.
+ */
+import type { AnyHexBoardInput, BoardIdOf, BoardSpaceIdOf, NormalizedHexTileOf } from "../../types/tiled-board.js";
+/**
+ * Per-tile result produced by {@link createHexBoardView}. Each tile
+ * carries the static topology (`id`, `q`, `r`) plus the matched
+ * overlay row in `view`.
+ *
+ * Static board fields/properties are preserved from `TBoard`.
+ * Consumers should use `tile.properties` for authored static space
+ * fields and `tile.view` for dynamic per-space projection data.
+ */
+export type HexBoardViewTile<TBoard extends AnyHexBoardInput, TSpaceView extends {
+    id: BoardSpaceIdOf<TBoard>;
+}> = Omit<NormalizedHexTileOf<TBoard>, "view"> & {
+    view: TSpaceView;
+};
+/**
+ * Result of {@link createHexBoardView}. Shaped like an authored hex
+ * board so it can be passed straight to `<HexGrid board={...} />`
+ * without any further adapter work.
+ *
+ * The type-level board id and space id are preserved from `TBoard`,
+ * so `tile.id` stays narrow inside `renderTile`. `tile.view` is the
+ * authored overlay row, fully typed.
+ */
+export interface HexBoardView<TBoard extends AnyHexBoardInput, TSpaceView extends {
+    id: BoardSpaceIdOf<TBoard>;
+}> {
+    id: BoardIdOf<TBoard>;
+    layout?: "hex";
+    orientation?: "pointy-top" | "flat-top";
+    tiles: ReadonlyArray<HexBoardViewTile<TBoard, TSpaceView>>;
+    edges: TBoard["edges"];
+    vertices: TBoard["vertices"];
+}
+interface CreateHexBoardViewOptions<TSpaceView> {
+    spaces: readonly TSpaceView[];
+}
+/**
+ * Join a static hex board topology with a dynamic per-space overlay.
+ *
+ * The result is suitable for direct use as the `board` prop on
+ * `<HexGrid>`. Every overlay is enforced 1-to-1 against the board's
+ * spaces:
+ *
+ *  - missing overlay for a board space → throws
+ *  - duplicate overlay (same `id` twice) → throws
+ *  - overlay `id` not present on the board → throws
+ *
+ * Each tile in the result carries a `view` field with the matched
+ * overlay row.
+ */
+export declare function createHexBoardView<const TBoard extends AnyHexBoardInput, const TSpaceView extends {
+    id: BoardSpaceIdOf<TBoard>;
+}>(board: TBoard, options: CreateHexBoardViewOptions<TSpaceView>): HexBoardView<TBoard, TSpaceView>;
+export {};
+//# sourceMappingURL=hex-board-view.d.ts.map

package/dist/components/board/hex-board-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hex-board-view.d.ts","sourceRoot":"","sources":["../../../src/components/board/hex-board-view.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EACV,gBAAgB,EAChB,SAAS,EACT,cAAc,EACd,mBAAmB,EACpB,MAAM,4BAA4B,CAAC;AAGpC;;;;;;;;GAQG;AACH,MAAM,MAAM,gBAAgB,CAC1B,MAAM,SAAS,gBAAgB,EAC/B,UAAU,SAAS;IAAE,EAAE,EAAE,cAAc,CAAC,MAAM,CAAC,CAAA;CAAE,IAC/C,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,GAAG;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,CAAC;AAErE;;;;;;;;GAQG;AACH,MAAM,WAAW,YAAY,CAC3B,MAAM,SAAS,gBAAgB,EAC/B,UAAU,SAAS;IAAE,EAAE,EAAE,cAAc,CAAC,MAAM,CAAC,CAAA;CAAE;IAEjD,EAAE,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACtB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,KAAK,EAAE,aAAa,CAAC,gBAAgB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;IAC3D,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;CAC9B;AAED,UAAU,yBAAyB,CAAC,UAAU;IAC5C,MAAM,EAAE,SAAS,UAAU,EAAE,CAAC;CAC/B;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,CAAC,MAAM,SAAS,gBAAgB,EACrC,KAAK,CAAC,UAAU,SAAS;IAAE,EAAE,EAAE,cAAc,CAAC,MAAM,CAAC,CAAA;CAAE,EAEvD,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,yBAAyB,CAAC,UAAU,CAAC,GAC7C,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAyClC"}

package/dist/components/board/hex-board-view.js

@@ -0,0 +1,60 @@
+/**
+ * Typed adapter for joining static hex-board topology with a dynamic
+ * per-space view overlay. Use this to feed `HexGrid` a single board
+ * value whose tiles carry both static geometry (`q`, `r`, `id`) and
+ * the projected view fields the UI cares about (e.g. `terrain`,
+ * `numberToken`).
+ *
+ * The runtime is intentionally strict: every static space must have
+ * exactly one overlay, duplicates throw, and overlays for ids that
+ * are not on the board throw. There is no relaxed fallback in v1 —
+ * silent merge bugs are far more expensive than a loud throw at
+ * dev/CI time.
+ */
+import { normalizeHexBoardInput } from "../../types/tiled-board.js";
+/**
+ * Join a static hex board topology with a dynamic per-space overlay.
+ *
+ * The result is suitable for direct use as the `board` prop on
+ * `<HexGrid>`. Every overlay is enforced 1-to-1 against the board's
+ * spaces:
+ *
+ *  - missing overlay for a board space → throws
+ *  - duplicate overlay (same `id` twice) → throws
+ *  - overlay `id` not present on the board → throws
+ *
+ * Each tile in the result carries a `view` field with the matched
+ * overlay row.
+ */
+export function createHexBoardView(board, options) {
+    const overlayById = new Map();
+    for (const overlay of options.spaces) {
+        if (overlayById.has(overlay.id)) {
+            throw new Error(`createHexBoardView: duplicate overlay for space '${overlay.id}'.`);
+        }
+        overlayById.set(overlay.id, overlay);
+    }
+    const consumed = new Set();
+    const normalizedBoard = normalizeHexBoardInput(board);
+    const tiles = normalizedBoard.tiles.map((tile) => {
+        const overlay = overlayById.get(tile.id);
+        if (!overlay) {
+            throw new Error(`createHexBoardView: missing overlay for space '${tile.id}'.`);
+        }
+        consumed.add(tile.id);
+        return { ...tile, view: overlay };
+    });
+    for (const id of overlayById.keys()) {
+        if (!consumed.has(id)) {
+            throw new Error(`createHexBoardView: overlay '${id}' is not on the board.`);
+        }
+    }
+    return {
+        id: normalizedBoard.id,
+        layout: "hex",
+        orientation: board.orientation,
+        tiles,
+        edges: board.edges,
+        vertices: board.vertices,
+    };
+}

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

@@ -0,0 +1,23 @@
+/**
+ * Board Primitives
+ *
+ * Reusable board visualization components for different game types.
+ *
+ * Components:
+ * - NetworkGraph: For route-building games (Ticket to Ride, Pandemic)
+ * - HexGrid: For hex-based games (Catan, wargames)
+ * - SquareGrid: For grid-based games (Chess, Go, Checkers)
+ * - ZoneMap: For area control games (Risk, Small World)
+ * - TrackBoard: For track/racing games (Monopoly, Game of Life)
+ * - SlotSystem: For worker placement games (Agricola, Viticulture)
+ */
+export { NetworkGraph, DefaultNetworkNode, DefaultNetworkEdge, DefaultNetworkPiece, type NetworkGraphProps, type NetworkNode, type NetworkEdge, type NetworkPiece, type DefaultNetworkNodeProps, type DefaultNetworkEdgeProps, type DefaultNetworkPieceProps, } from "./NetworkGraph.js";
+export { HexGrid, hexUtils, DefaultHexTile, DefaultHexEdge, DefaultHexVertex, type HexGridBoardProps, type HexGridProps, type HexOrientation, type HexTileGeometry, type InteractiveHexEdge, type InteractiveHexSpace, type InteractiveHexVertex, type EdgePosition, type DefaultHexTileProps, type DefaultHexEdgeProps, type DefaultHexVertexProps, } from "./HexGrid.js";
+export type { InteractiveTargetLayer, InteractiveTargetRenderState, } from "./target-layer.js";
+export { createHexBoardView, type HexBoardView, type HexBoardViewTile, } from "./hex-board-view.js";
+export { SquareGrid, DefaultGridCell, DefaultGridPiece, DefaultChessPiece, toAlgebraic, toNumeric, type SquareGridBoardProps, type SquareGridProps, type InteractiveSquareEdge, type InteractiveSquareSpace, type InteractiveSquareVertex, type SquareEdgePosition, type SquareVertexPosition, type DefaultGridCellProps, type DefaultGridPieceProps, type DefaultChessPieceProps, } from "./SquareGrid.js";
+export { ZoneMap, DefaultZone, DefaultZonePieces, DefaultZonePiece, type ZoneMapProps, type ZoneDefinition, type ZonePiece, type ZoneShape, type ZoneHighlightType, type DefaultZoneProps, type DefaultZonePiecesProps, type DefaultZonePieceProps, } from "./ZoneMap.js";
+export { TrackBoard, DefaultTrackSpace, DefaultTrackPiece, DefaultTrackConnection, DefaultTrackJump, type TrackBoardProps, type TrackSpace, type TrackPiece, type DefaultTrackSpaceProps, type DefaultTrackPieceProps, type DefaultTrackConnectionProps, type DefaultTrackJumpProps, } from "./TrackBoard.js";
+export { SlotSystem, DefaultSlotItem, DefaultSlotOccupant, DefaultEmptySlot, type SlotSystemProps, type SlotDefinition, type SlotOccupant, type DefaultSlotItemProps, type DefaultSlotOccupantProps, type DefaultEmptySlotProps, } from "./SlotSystem.js";
+export type { HexTileState, HexEdgeState, HexVertexState, SquareCellState, SquareEdgeState, SquarePieceState, SquareVertexState, } from "../../types/player-state.js";
+//# sourceMappingURL=index.d.ts.map