@dreamboard-games/ui-sdk 0.0.41

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

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

package/dist/components/board/SlotSystem.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Worker placement visualization for Euro games (Agricola, Viticulture, Lords of Waterdeep).
+ */
+import { useMemo } from "react";
+import { clsx } from "clsx";
+import { Users, Lock, Gift, Coins } from "lucide-react";
+import { handleKeyboardActivation } from "./interaction-accessibility.js";
+const EMPTY_SLOT_OCCUPANTS = [];
+/** Pre-built slot item for use in `renderSlot`. */
+export function DefaultSlotItem({ name, description, capacity, occupantCount, isExclusive = false, isAvailable = true, isHighlighted = false, isSelected = false, costLabel, rewardLabel, renderOccupants, onClick, onPointerEnter, onPointerLeave, className, }) {
+    const isFull = occupantCount >= capacity;
+    return (_jsxs("div", { onClick: isAvailable ? onClick : undefined, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onKeyDown: (event) => handleKeyboardActivation(event, isAvailable ? onClick : undefined), className: clsx("p-4 rounded-lg border-2 transition-all", 
+        // Availability styling
+        isAvailable && onClick && "cursor-pointer hover:bg-blue-500/10", isAvailable ? "border-blue-500" : "border-slate-600", 
+        // State styling
+        isFull && "border-red-500/50 bg-slate-800/50", isHighlighted && "ring-2 ring-yellow-500", isSelected && "ring-2 ring-blue-500 bg-blue-500/10", className), role: isAvailable && onClick ? "button" : "listitem", "aria-label": name, "aria-disabled": !isAvailable, tabIndex: isAvailable && onClick ? 0 : undefined, children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { children: [_jsx("h3", { className: "font-bold text-white", children: name }), description && (_jsx("p", { className: "text-xs text-slate-400 mt-0.5", children: description }))] }), _jsxs("div", { className: "flex items-center gap-1", children: [isExclusive && (_jsx(Lock, { className: "w-4 h-4 text-amber-500", "aria-label": "Exclusive slot" })), capacity > 1 && (_jsxs("div", { className: "flex items-center gap-0.5 text-xs text-slate-400", title: `Capacity: ${capacity}`, children: [_jsx(Users, { className: "w-3 h-3" }), _jsx("span", { children: capacity })] }))] })] }), (costLabel || rewardLabel) && (_jsxs("div", { className: "mt-2 flex flex-wrap gap-2 text-xs", children: [costLabel && (_jsxs("div", { className: "flex items-center gap-1 text-red-400", children: [_jsx(Coins, { className: "w-3 h-3", "aria-hidden": "true" }), _jsx("span", { children: costLabel })] })), rewardLabel && (_jsxs("div", { className: "flex items-center gap-1 text-green-400", children: [_jsx(Gift, { className: "w-3 h-3", "aria-hidden": "true" }), _jsx("span", { children: rewardLabel })] }))] })), renderOccupants && _jsx("div", { className: "mt-2", children: renderOccupants() }), !isAvailable && !isFull && (_jsx("div", { className: "mt-2 text-xs text-slate-500", children: "Not available" }))] }));
+}
+export function DefaultSlotOccupant({ color = "#3b82f6", size = 24, shape = "circle", label, onClick, className, }) {
+    return (_jsx("div", { onClick: onClick, onKeyDown: (event) => handleKeyboardActivation(event, onClick), className: clsx("transition-all", shape === "circle" ? "rounded-full" : "rounded", onClick && "cursor-pointer hover:scale-110", className), style: {
+            width: size,
+            height: size,
+            backgroundColor: color,
+        }, title: label, role: onClick ? "button" : "img", "aria-label": label ?? "Occupant", tabIndex: onClick ? 0 : undefined }));
+}
+export function DefaultEmptySlot({ size = 24, className, }) {
+    return (_jsx("div", { className: clsx("rounded-full border-2 border-dashed border-slate-600", className), style: { width: size, height: size }, title: "Empty slot", role: "img", "aria-label": "Empty slot" }));
+}
+// ============================================================================
+// Component
+// ============================================================================
+export function SlotSystem({ slots, occupants = EMPTY_SLOT_OCCUPANTS, renderSlot, layout = "grid", width, height, minSlotWidth = 280, className, }) {
+    // Group occupants by slot
+    const occupantsBySlot = useMemo(() => {
+        const map = {};
+        occupants.forEach((o) => {
+            const slotId = o.slotId;
+            const existing = map[slotId];
+            if (existing) {
+                existing.push(o);
+            }
+            else {
+                map[slotId] = [o];
+            }
+        });
+        return map;
+    }, [occupants]);
+    // Group slots by group property for grouped layout
+    const slotGroups = useMemo(() => {
+        if (layout !== "grouped")
+            return null;
+        const groups = {};
+        slots.forEach((slot) => {
+            const group = slot.group ?? "Other";
+            const existing = groups[group];
+            if (existing) {
+                existing.push(slot);
+            }
+            else {
+                groups[group] = [slot];
+            }
+        });
+        return groups;
+    }, [slots, layout]);
+    // Render a single slot
+    const renderSlotItem = (slot) => {
+        const slotOccupants = occupantsBySlot[slot.id] ?? [];
+        return (_jsx("div", { role: "listitem", "aria-label": slot.name, children: renderSlot(slot, slotOccupants) }, slot.id));
+    };
+    // Responsive grid style - uses auto-fit to stack items when they don't fit
+    const responsiveGridStyle = {
+        display: "grid",
+        gridTemplateColumns: `repeat(auto-fit, minmax(${minSlotWidth}px, 1fr))`,
+        gap: "1rem",
+    };
+    // Container wrapper
+    const wrapContent = (content) => (_jsx("div", { style: { width, height }, className: clsx("slot-system", className), children: content }));
+    // Render based on layout
+    if (layout === "grouped" && slotGroups) {
+        return wrapContent(_jsx("div", { className: "space-y-6", role: "list", children: Object.entries(slotGroups).map(([groupName, groupSlots]) => (_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold text-slate-300 mb-3", children: groupName }), _jsx("div", { style: responsiveGridStyle, children: groupSlots.map(renderSlotItem) })] }, groupName))) }));
+    }
+    if (layout === "list") {
+        return wrapContent(_jsx("div", { className: "flex flex-col gap-2", role: "list", children: slots.map(renderSlotItem) }));
+    }
+    // Default grid layout - responsive by default
+    return wrapContent(_jsx("div", { style: responsiveGridStyle, role: "list", children: slots.map(renderSlotItem) }));
+}

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

@@ -0,0 +1,188 @@
+/**
+ * SVG-based square grid for grid-based games (Chess, Checkers, Go, Scrabble, Battleship).
+ * All rendering controlled by parent via required render functions.
+ */
+import { type ReactNode } from "react";
+import { type InteractiveTargetLayer, type InteractiveTargetRenderState } from "./target-layer.js";
+import type { SquarePieceState } from "../../types/player-state.js";
+import { type AuthoredSquareBoardInput, type AnySquareBoardInput, type GeneratedSquareBoardInput, type NormalizedSquareCellOf, type NormalizedSquareEdgeOf, type NormalizedSquarePieceOf, type NormalizedSquareVertexOf } from "../../types/tiled-board.js";
+export type { InteractiveTargetLayer, InteractiveTargetRenderState, } from "./target-layer.js";
+export interface SquareEdgePosition {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    midX: number;
+    midY: number;
+    angle: number;
+}
+export interface SquareVertexPosition {
+    x: number;
+    y: number;
+}
+export interface InteractiveSquareEdge<TBoard extends AnySquareBoardInput = AnySquareBoardInput> extends NormalizedSquareEdgeOf<TBoard> {
+    position: SquareEdgePosition;
+}
+export interface InteractiveSquareVertex<TBoard extends AnySquareBoardInput = AnySquareBoardInput> extends NormalizedSquareVertexOf<TBoard> {
+    position: SquareVertexPosition;
+}
+export type InteractiveSquareSpace<TBoard extends AnySquareBoardInput = AnySquareBoardInput> = NormalizedSquareCellOf<TBoard>;
+interface SquareGeneratedGridInputProps {
+    id?: string;
+    layout?: "square";
+    spaces: Extract<AnySquareBoardInput, {
+        spaces: unknown;
+    }>["spaces"];
+    pieces?: AnySquareBoardInput["pieces"];
+    edges?: AnySquareBoardInput["edges"];
+    vertices?: AnySquareBoardInput["vertices"];
+}
+interface SquareAuthoredGridInputProps {
+    id?: string;
+    layout?: "square";
+    rows?: number;
+    cols?: number;
+    cells: Extract<AnySquareBoardInput, {
+        cells: unknown;
+    }>["cells"];
+    pieces?: readonly SquarePieceState[];
+    edges?: AnySquareBoardInput["edges"];
+    vertices?: AnySquareBoardInput["vertices"];
+}
+type SquareGridInputProps = SquareGeneratedGridInputProps | SquareAuthoredGridInputProps;
+type ResolvedSquareArrayProp<Value> = Exclude<Value, undefined> extends readonly unknown[] ? Exclude<Value, undefined> : readonly [];
+type SquareBoardLikeOfProps<TProps extends SquareGridInputProps> = TProps extends {
+    id?: infer Id;
+    layout?: infer Layout;
+    spaces: infer Spaces;
+    pieces?: infer Pieces;
+    edges?: infer Edges;
+    vertices?: infer Vertices;
+} ? {
+    id: Extract<Id, string> extends never ? string : Extract<Id, string>;
+    layout?: Extract<Layout, "square">;
+    spaces: Spaces;
+    pieces: ResolvedSquareArrayProp<Pieces>;
+    edges: ResolvedSquareArrayProp<Edges>;
+    vertices: ResolvedSquareArrayProp<Vertices>;
+} & GeneratedSquareBoardInput : TProps extends {
+    id?: infer Id;
+    layout?: infer Layout;
+    rows?: infer Rows;
+    cols?: infer Cols;
+    cells: infer Cells;
+    pieces?: infer Pieces;
+    edges?: infer Edges;
+    vertices?: infer Vertices;
+} ? {
+    id: Extract<Id, string> extends never ? string : Extract<Id, string>;
+    layout?: Extract<Layout, "square">;
+    rows: Extract<Rows, number> extends never ? number : Extract<Rows, number>;
+    cols: Extract<Cols, number> extends never ? number : Extract<Cols, number>;
+    cells: Cells;
+    pieces: ResolvedSquareArrayProp<Pieces>;
+    edges: ResolvedSquareArrayProp<Edges>;
+    vertices: ResolvedSquareArrayProp<Vertices>;
+} & AuthoredSquareBoardInput : never;
+export type SquareGridProps<TProps extends SquareGridInputProps = SquareGridInputProps> = TProps & {
+    cellSize?: number;
+    /** Receives row/col with transform centered at cell position */
+    renderCell: (row: number, col: number) => ReactNode;
+    /** Receives piece with transform centered at cell center */
+    renderPiece: (piece: NormalizedSquarePieceOf<NoInfer<SquareBoardLikeOfProps<TProps>>>) => ReactNode;
+    renderEdge?: (edge: NormalizedSquareEdgeOf<NoInfer<SquareBoardLikeOfProps<TProps>>>, position: SquareEdgePosition) => ReactNode;
+    renderVertex?: (vertex: NormalizedSquareVertexOf<NoInfer<SquareBoardLikeOfProps<TProps>>>, position: SquareVertexPosition) => ReactNode;
+    showCoordinates?: boolean;
+    coordinateStyle?: "algebraic" | "numeric" | "none";
+    width?: number | string;
+    height?: number | string;
+    enablePanZoom?: boolean;
+    initialZoom?: number;
+    minZoom?: number;
+    maxZoom?: number;
+    className?: string;
+    interactiveSpaces?: InteractiveTargetLayer;
+    interactiveEdges?: InteractiveTargetLayer;
+    interactiveVertices?: InteractiveTargetLayer;
+    renderInteractiveSpace?: (space: InteractiveSquareSpace<NoInfer<SquareBoardLikeOfProps<TProps>>>, state: InteractiveTargetRenderState) => ReactNode;
+    renderInteractiveEdge?: (edge: InteractiveSquareEdge<NoInfer<SquareBoardLikeOfProps<TProps>>>, position: SquareEdgePosition, state: InteractiveTargetRenderState) => ReactNode;
+    renderInteractiveVertex?: (vertex: InteractiveSquareVertex<NoInfer<SquareBoardLikeOfProps<TProps>>>, position: SquareVertexPosition, state: InteractiveTargetRenderState) => ReactNode;
+};
+export interface SquareGridBoardProps<TBoard extends AnySquareBoardInput = AnySquareBoardInput> {
+    board: TBoard;
+    cellSize?: number;
+    renderCell: (row: number, col: number) => ReactNode;
+    renderPiece: (piece: NormalizedSquarePieceOf<NoInfer<TBoard>>) => ReactNode;
+    renderEdge?: (edge: NormalizedSquareEdgeOf<NoInfer<TBoard>>, position: SquareEdgePosition) => ReactNode;
+    renderVertex?: (vertex: NormalizedSquareVertexOf<NoInfer<TBoard>>, position: SquareVertexPosition) => ReactNode;
+    showCoordinates?: boolean;
+    coordinateStyle?: "algebraic" | "numeric" | "none";
+    width?: number | string;
+    height?: number | string;
+    enablePanZoom?: boolean;
+    initialZoom?: number;
+    minZoom?: number;
+    maxZoom?: number;
+    className?: string;
+    interactiveSpaces?: InteractiveTargetLayer;
+    interactiveEdges?: InteractiveTargetLayer;
+    interactiveVertices?: InteractiveTargetLayer;
+    renderInteractiveSpace?: (space: InteractiveSquareSpace<NoInfer<TBoard>>, state: InteractiveTargetRenderState) => ReactNode;
+    renderInteractiveEdge?: (edge: InteractiveSquareEdge<NoInfer<TBoard>>, position: SquareEdgePosition, state: InteractiveTargetRenderState) => ReactNode;
+    renderInteractiveVertex?: (vertex: InteractiveSquareVertex<NoInfer<TBoard>>, position: SquareVertexPosition, state: InteractiveTargetRenderState) => ReactNode;
+}
+export interface DefaultGridCellProps {
+    size: number;
+    isLight?: boolean;
+    lightColor?: string;
+    darkColor?: string;
+    isHighlighted?: boolean;
+    highlightColor?: string;
+    isSelected?: boolean;
+    selectedColor?: string;
+    isValidMove?: boolean;
+    isCapture?: boolean;
+    onClick?: () => void;
+    onPointerEnter?: () => void;
+    onPointerLeave?: () => void;
+    className?: string;
+}
+/** Pre-built grid cell component for use in `renderCell`. */
+export declare function DefaultGridCell({ size, isLight, lightColor, darkColor, isHighlighted, highlightColor, isSelected, selectedColor, isValidMove, isCapture, onClick, onPointerEnter, onPointerLeave, className, }: DefaultGridCellProps): import("react/jsx-runtime").JSX.Element;
+export interface DefaultGridPieceProps {
+    size: number;
+    color?: string;
+    strokeColor?: string;
+    label?: string;
+    isDragging?: boolean;
+    onClick?: () => void;
+    onPointerDown?: (e: React.PointerEvent) => void;
+    className?: string;
+}
+/** Pre-built grid piece component for use in `renderPiece`. */
+export declare function DefaultGridPiece({ size, color, strokeColor, label, isDragging, onClick, onPointerDown, className, }: DefaultGridPieceProps): import("react/jsx-runtime").JSX.Element;
+export interface DefaultChessPieceProps {
+    size: number;
+    type: string;
+    owner: "white" | "black";
+    onClick?: () => void;
+    onPointerDown?: (e: React.PointerEvent) => void;
+    className?: string;
+}
+/** Pre-built chess piece component using Unicode symbols. */
+export declare function DefaultChessPiece({ size, type, owner, onClick, onPointerDown, className, }: DefaultChessPieceProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Convert row/col to algebraic notation (a1, b2, etc.)
+ */
+export declare function toAlgebraic(row: number, col: number, totalRows: number): string;
+/**
+ * Convert row/col to numeric notation (1,1, 2,3, etc.)
+ */
+export declare function toNumeric(row: number, col: number): string;
+export interface SquareGridComponent {
+    <const TBoard extends AnySquareBoardInput>(props: SquareGridBoardProps<TBoard>): ReactNode;
+    <const TProps extends SquareGeneratedGridInputProps>(props: SquareGridProps<TProps>): ReactNode;
+    <const TProps extends SquareAuthoredGridInputProps>(props: SquareGridProps<TProps>): ReactNode;
+}
+export declare const SquareGrid: SquareGridComponent;
+//# sourceMappingURL=SquareGrid.d.ts.map

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

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

package/dist/components/board/SquareGrid.js

@@ -0,0 +1,328 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SVG-based square grid for grid-based games (Chess, Checkers, Go, Scrabble, Battleship).
+ * All rendering controlled by parent via required render functions.
+ */
+import { useMemo, useState } from "react";
+import { clsx } from "clsx";
+import { usePanZoom } from "../../hooks/usePanZoom.js";
+import { handleKeyboardActivation } from "./interaction-accessibility.js";
+import { interactiveTargetRenderState, isInteractiveTargetSelectable, } from "./target-layer.js";
+import { normalizeSquareBoardInput, } from "../../types/tiled-board.js";
+/** Pre-built grid cell component for use in `renderCell`. */
+export function DefaultGridCell({ size, isLight = true, lightColor = "#f0d9b5", darkColor = "#b58863", isHighlighted = false, highlightColor = "rgba(250, 204, 21, 0.4)", isSelected = false, selectedColor = "rgba(59, 130, 246, 0.5)", isValidMove = false, isCapture = false, onClick, onPointerEnter, onPointerLeave, className, }) {
+    const baseColor = isLight ? lightColor : darkColor;
+    return (_jsxs("g", { onClick: onClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onKeyDown: (event) => handleKeyboardActivation(event, onClick), className: clsx("transition-colors duration-100", onClick && "cursor-pointer", className), role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, "aria-label": onClick ? "Grid cell" : undefined, children: [_jsx("rect", { width: size, height: size, fill: baseColor }), isSelected && (_jsx("rect", { width: size, height: size, fill: selectedColor, pointerEvents: "none" })), isHighlighted && !isSelected && (_jsx("rect", { width: size, height: size, fill: highlightColor, pointerEvents: "none" })), isValidMove && !isCapture && (_jsx("circle", { cx: size / 2, cy: size / 2, r: size * 0.15, fill: "rgba(34, 197, 94, 0.6)", pointerEvents: "none" })), isCapture && (_jsx("circle", { cx: size / 2, cy: size / 2, r: size * 0.42, fill: "none", stroke: "rgba(239, 68, 68, 0.8)", strokeWidth: size * 0.08, pointerEvents: "none" }))] }));
+}
+/** Pre-built grid piece component for use in `renderPiece`. */
+export function DefaultGridPiece({ size, color = "#94a3b8", strokeColor, label, isDragging = false, onClick, onPointerDown, className, }) {
+    const radius = size * 0.38;
+    const effectiveStroke = strokeColor ??
+        (color === "#f8fafc" || color === "#ffffff" ? "#1e293b" : "#f8fafc");
+    return (_jsxs("g", { onClick: onClick, onPointerDown: onPointerDown, onKeyDown: (event) => handleKeyboardActivation(event, onClick), className: clsx("transition-transform duration-150", (onClick || onPointerDown) && "cursor-pointer hover:scale-105", className), opacity: isDragging ? 0.8 : 1, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, "aria-label": onClick ? (label ?? "Grid piece") : undefined, children: [_jsx("circle", { r: isDragging ? radius * 1.1 : radius, fill: color, stroke: effectiveStroke, strokeWidth: 2, style: { filter: "drop-shadow(1px 2px 2px rgba(0,0,0,0.4))" } }), label && (_jsx("text", { y: 4, textAnchor: "middle", fill: effectiveStroke, fontSize: size * 0.35, fontWeight: "bold", pointerEvents: "none", children: label }))] }));
+}
+const CHESS_SYMBOLS = {
+    white: {
+        king: "♔",
+        queen: "♕",
+        rook: "♖",
+        bishop: "♗",
+        knight: "♘",
+        pawn: "♙",
+    },
+    black: {
+        king: "♚",
+        queen: "♛",
+        rook: "♜",
+        bishop: "♝",
+        knight: "♞",
+        pawn: "♟",
+    },
+};
+/** Pre-built chess piece component using Unicode symbols. */
+export function DefaultChessPiece({ size, type, owner, onClick, onPointerDown, className, }) {
+    const symbol = CHESS_SYMBOLS[owner]?.[type] ?? "?";
+    const textColor = owner === "white" ? "#f8fafc" : "#1e293b";
+    const shadowFilter = owner === "white"
+        ? "drop-shadow(1px 1px 1px rgba(0,0,0,0.5))"
+        : "drop-shadow(1px 1px 1px rgba(255,255,255,0.3))";
+    return (_jsx("g", { onClick: onClick, onPointerDown: onPointerDown, onKeyDown: (event) => handleKeyboardActivation(event, onClick), className: clsx((onClick || onPointerDown) && "cursor-pointer", className), role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, "aria-label": onClick ? `${owner} ${type}` : undefined, children: _jsx("text", { textAnchor: "middle", dominantBaseline: "middle", fontSize: size * 0.7, fill: textColor, style: { filter: shadowFilter }, children: symbol }) }));
+}
+// ============================================================================
+// Utilities
+// ============================================================================
+/**
+ * Convert row/col to algebraic notation (a1, b2, etc.)
+ */
+export function toAlgebraic(row, col, totalRows) {
+    const file = String.fromCharCode(97 + col); // a, b, c, ...
+    const rank = totalRows - row; // 8, 7, 6, ... (bottom to top)
+    return `${file}${rank}`;
+}
+/**
+ * Convert row/col to numeric notation (1,1, 2,3, etc.)
+ */
+export function toNumeric(row, col) {
+    return `${row + 1},${col + 1}`;
+}
+function getCellId(cell) {
+    return cell.id;
+}
+function edgePositionForCells(firstCell, secondCell, cellSize, labelMargin) {
+    if (Math.abs(firstCell.row - secondCell.row) +
+        Math.abs(firstCell.col - secondCell.col) !==
+        1) {
+        return null;
+    }
+    const minRow = Math.min(firstCell.row, secondCell.row);
+    const minCol = Math.min(firstCell.col, secondCell.col);
+    if (firstCell.row === secondCell.row) {
+        const x = labelMargin + (minCol + 1) * cellSize;
+        const y1 = minRow * cellSize;
+        const y2 = y1 + cellSize;
+        return {
+            x1: x,
+            y1,
+            x2: x,
+            y2,
+            midX: x,
+            midY: (y1 + y2) / 2,
+            angle: 90,
+        };
+    }
+    const y = (minRow + 1) * cellSize;
+    const x1 = labelMargin + minCol * cellSize;
+    const x2 = x1 + cellSize;
+    return {
+        x1,
+        y1: y,
+        x2,
+        y2: y,
+        midX: (x1 + x2) / 2,
+        midY: y,
+        angle: 0,
+    };
+}
+function cornerKeysForCell(cell) {
+    return {
+        [`${cell.col},${cell.row}`]: { x: cell.col, y: cell.row },
+        [`${cell.col + 1},${cell.row}`]: { x: cell.col + 1, y: cell.row },
+        [`${cell.col + 1},${cell.row + 1}`]: {
+            x: cell.col + 1,
+            y: cell.row + 1,
+        },
+        [`${cell.col},${cell.row + 1}`]: { x: cell.col, y: cell.row + 1 },
+    };
+}
+function vertexPositionForCells(cells, cellSize, labelMargin) {
+    if (cells.length === 0) {
+        return null;
+    }
+    const candidateKeys = cells.map((cell) => new Set(Object.keys(cornerKeysForCell(cell))));
+    const firstKeySet = candidateKeys[0];
+    if (firstKeySet === undefined) {
+        return null;
+    }
+    const sharedKeys = [...firstKeySet].filter((key) => candidateKeys.every((keySet) => keySet.has(key)));
+    if (sharedKeys.length !== 1) {
+        return null;
+    }
+    const sharedKey = sharedKeys[0];
+    if (!sharedKey) {
+        return null;
+    }
+    const [colToken, rowToken] = sharedKey.split(",");
+    if (colToken === undefined || rowToken === undefined) {
+        return null;
+    }
+    const col = Number(colToken);
+    const row = Number(rowToken);
+    if (!Number.isFinite(col) || !Number.isFinite(row)) {
+        return null;
+    }
+    return {
+        x: labelMargin + col * cellSize,
+        y: row * cellSize,
+    };
+}
+function SquareGridImpl(props) {
+    const { cellSize = 60, renderCell, renderPiece, renderEdge, renderVertex, showCoordinates = true, coordinateStyle = "algebraic", width, height, enablePanZoom = false, initialZoom = 1, minZoom = 0.5, maxZoom = 3, className, interactiveSpaces, interactiveEdges, interactiveVertices, renderInteractiveSpace, renderInteractiveEdge, renderInteractiveVertex, } = props;
+    const board = "board" in props
+        ? props.board
+        : ("spaces" in props
+            ? {
+                id: "__square-grid__",
+                spaces: props.spaces,
+                pieces: props.pieces ?? [],
+                edges: props.edges ?? [],
+                vertices: props.vertices ?? [],
+            }
+            : {
+                id: "__square-grid__",
+                rows: props.rows ?? 0,
+                cols: props.cols ?? 0,
+                cells: props.cells,
+                pieces: props.pieces ?? [],
+                edges: props.edges ?? [],
+                vertices: props.vertices ?? [],
+            });
+    const [hoveredInteractiveSpaceId, setHoveredInteractiveSpaceId] = useState(null);
+    const [hoveredInteractiveEdgeId, setHoveredInteractiveEdgeId] = useState(null);
+    const [hoveredInteractiveVertexId, setHoveredInteractiveVertexId] = useState(null);
+    // Use the unified pan/zoom hook
+    const { transform, bind, isDragging: isPanning, } = usePanZoom({
+        enabled: enablePanZoom,
+        initialZoom,
+        minZoom,
+        maxZoom,
+        mode: "viewbox",
+    });
+    // Coordinate label margin
+    const labelMargin = showCoordinates && coordinateStyle !== "none" ? 24 : 0;
+    const normalizedBoard = useMemo(() => normalizeSquareBoardInput(board), [board]);
+    const rows = normalizedBoard.rows;
+    const cols = normalizedBoard.cols;
+    const resolvedEdges = normalizedBoard.edges;
+    const resolvedVertices = normalizedBoard.vertices;
+    const resolvedPieces = normalizedBoard.pieces;
+    // Calculate grid dimensions
+    const gridWidth = cols * cellSize;
+    const gridHeight = rows * cellSize;
+    const totalWidth = gridWidth + labelMargin;
+    const totalHeight = gridHeight + labelMargin;
+    const renderableCells = useMemo(() => {
+        const result = [];
+        for (let row = 0; row < rows; row++) {
+            for (let col = 0; col < cols; col++) {
+                result.push({ row, col });
+            }
+        }
+        return result;
+    }, [rows, cols]);
+    const resolvedCells = useMemo(() => {
+        if (normalizedBoard.cells.length > 0) {
+            return normalizedBoard.cells.map((cell) => ({
+                ...cell,
+                id: getCellId(cell),
+            }));
+        }
+        return renderableCells.map(({ row, col }) => ({
+            id: `${row},${col}`,
+            row,
+            col,
+        }));
+    }, [normalizedBoard.cells, renderableCells]);
+    const cellsById = useMemo(() => new Map(resolvedCells.map((cell) => [cell.id, cell])), [resolvedCells]);
+    const resolvedEdgePositions = useMemo(() => resolvedEdges.flatMap((edge) => {
+        if (edge.spaceIds.length < 2) {
+            return [];
+        }
+        const firstCell = cellsById.get(edge.spaceIds[0] ?? "");
+        const secondCell = cellsById.get(edge.spaceIds[1] ?? "");
+        if (!firstCell || !secondCell) {
+            return [];
+        }
+        const position = edgePositionForCells(firstCell, secondCell, cellSize, labelMargin);
+        return position
+            ? [
+                {
+                    edge,
+                    interactiveEdge: {
+                        ...edge,
+                        position,
+                    },
+                },
+            ]
+            : [];
+    }), [cellSize, cellsById, resolvedEdges, labelMargin]);
+    const resolvedVertexPositions = useMemo(() => resolvedVertices.flatMap((vertex) => {
+        const vertexCells = vertex.spaceIds.flatMap((spaceId) => {
+            const cell = cellsById.get(spaceId);
+            return cell ? [cell] : [];
+        });
+        const position = vertexPositionForCells(vertexCells, cellSize, labelMargin);
+        return position
+            ? [
+                {
+                    vertex,
+                    interactiveVertex: {
+                        ...vertex,
+                        position,
+                    },
+                },
+            ]
+            : [];
+    }), [cellSize, cellsById, labelMargin, resolvedVertices]);
+    // Calculate viewBox for pan/zoom
+    const viewBoxWidth = totalWidth / transform.zoom;
+    const viewBoxHeight = totalHeight / transform.zoom;
+    const viewBoxX = (totalWidth - viewBoxWidth) / 2 - transform.pan.x;
+    const viewBoxY = (totalHeight - viewBoxHeight) / 2 - transform.pan.y;
+    // Determine SVG dimensions
+    const svgWidth = width ?? totalWidth;
+    const svgHeight = height ?? totalHeight;
+    return (_jsxs("svg", { width: svgWidth, height: svgHeight, viewBox: enablePanZoom
+            ? `${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}`
+            : `0 0 ${totalWidth} ${totalHeight}`, className: clsx("square-grid", enablePanZoom && "touch-none", isPanning && "cursor-grabbing", enablePanZoom && !isPanning && "cursor-grab", className), ...bind(), role: "img", "aria-label": `${rows}x${cols} game grid`, children: [_jsx("defs", { children: _jsx("filter", { id: "pieceShadow", x: "-20%", y: "-20%", width: "140%", height: "140%", children: _jsx("feDropShadow", { dx: "1", dy: "2", stdDeviation: "2", floodOpacity: "0.4" }) }) }), _jsx("g", { className: "cells", role: "list", "aria-label": "Grid cells", children: renderableCells.map(({ row, col }) => {
+                    const x = labelMargin + col * cellSize;
+                    const y = row * cellSize;
+                    return (_jsx("g", { transform: `translate(${x}, ${y})`, role: "listitem", "aria-label": coordinateStyle === "algebraic"
+                            ? toAlgebraic(row, col, rows)
+                            : toNumeric(row, col), children: renderCell(row, col) }, `${row}-${col}`));
+                }) }), interactiveSpaces && (_jsx("g", { className: "interactive-spaces", "aria-label": "Interactive spaces", children: resolvedCells.map((space) => {
+                    const state = interactiveTargetRenderState(interactiveSpaces, space.id, hoveredInteractiveSpaceId === space.id);
+                    const isSelectable = isInteractiveTargetSelectable(interactiveSpaces, state);
+                    const x = labelMargin + space.col * cellSize;
+                    const y = space.row * cellSize;
+                    return (_jsxs("g", { transform: `translate(${x}, ${y})`, onClick: isSelectable
+                            ? () => {
+                                void interactiveSpaces.selectTargetId?.(space.id);
+                            }
+                            : undefined, onKeyDown: (event) => handleKeyboardActivation(event, isSelectable
+                            ? () => {
+                                void interactiveSpaces.selectTargetId?.(space.id);
+                            }
+                            : undefined), onPointerEnter: () => setHoveredInteractiveSpaceId(space.id), onPointerLeave: () => setHoveredInteractiveSpaceId((currentId) => currentId === space.id ? null : currentId), className: clsx(isSelectable && "cursor-pointer"), role: isSelectable ? "button" : undefined, tabIndex: isSelectable ? 0 : undefined, "aria-label": isSelectable ? `Select space ${space.id}` : undefined, children: [isSelectable && (_jsx("rect", { x: 0, y: 0, width: cellSize, height: cellSize, fill: "rgba(255,255,255,0.001)", pointerEvents: "all" })), renderInteractiveSpace
+                                ? renderInteractiveSpace(space, state)
+                                : null] }, space.id));
+                }) })), renderEdge && resolvedEdgePositions.length > 0 && (_jsx("g", { className: "edges", "aria-label": "Board edges", children: resolvedEdgePositions.map(({ edge, interactiveEdge }) => (_jsx("g", { children: renderEdge(edge, interactiveEdge.position) }, edge.id))) })), interactiveEdges && (_jsx("g", { className: "interactive-edges", "aria-label": "Interactive edges", children: resolvedEdgePositions.map(({ interactiveEdge: edge }) => {
+                    const state = interactiveTargetRenderState(interactiveEdges, edge.id, hoveredInteractiveEdgeId === edge.id);
+                    const isSelectable = isInteractiveTargetSelectable(interactiveEdges, state);
+                    return (_jsx("g", { onClick: isSelectable
+                            ? () => {
+                                void interactiveEdges.selectTargetId?.(edge.id);
+                            }
+                            : undefined, onKeyDown: (event) => handleKeyboardActivation(event, isSelectable
+                            ? () => {
+                                void interactiveEdges.selectTargetId?.(edge.id);
+                            }
+                            : undefined), onPointerEnter: () => setHoveredInteractiveEdgeId(edge.id), onPointerLeave: () => setHoveredInteractiveEdgeId((currentId) => currentId === edge.id ? null : currentId), className: clsx(isSelectable && "cursor-pointer"), role: isSelectable ? "button" : undefined, tabIndex: isSelectable ? 0 : undefined, "aria-label": isSelectable ? `Select edge ${edge.id}` : undefined, children: renderInteractiveEdge ? (renderInteractiveEdge(edge, edge.position, state)) : state.isEnabled && state.isEligible ? (_jsx("line", { x1: edge.position.x1, y1: edge.position.y1, x2: edge.position.x2, y2: edge.position.y2, stroke: "rgba(255,255,255,0.001)", strokeWidth: Math.max(12, cellSize * 0.18), pointerEvents: "stroke" })) : null }, edge.id));
+                }) })), renderVertex && resolvedVertexPositions.length > 0 && (_jsx("g", { className: "vertices", "aria-label": "Board vertices", children: resolvedVertexPositions.map(({ vertex, interactiveVertex }) => (_jsx("g", { children: renderVertex(vertex, interactiveVertex.position) }, vertex.id))) })), interactiveVertices && (_jsx("g", { className: "interactive-vertices", "aria-label": "Interactive vertices", children: resolvedVertexPositions.map(({ interactiveVertex: vertex }) => {
+                    const state = interactiveTargetRenderState(interactiveVertices, vertex.id, hoveredInteractiveVertexId === vertex.id);
+                    const isSelectable = isInteractiveTargetSelectable(interactiveVertices, state);
+                    return (_jsx("g", { onClick: isSelectable
+                            ? () => {
+                                void interactiveVertices.selectTargetId?.(vertex.id);
+                            }
+                            : undefined, onKeyDown: (event) => handleKeyboardActivation(event, isSelectable
+                            ? () => {
+                                void interactiveVertices.selectTargetId?.(vertex.id);
+                            }
+                            : undefined), onPointerEnter: () => setHoveredInteractiveVertexId(vertex.id), onPointerLeave: () => setHoveredInteractiveVertexId((currentId) => currentId === vertex.id ? null : currentId), className: clsx(isSelectable && "cursor-pointer"), role: isSelectable ? "button" : undefined, tabIndex: isSelectable ? 0 : undefined, "aria-label": isSelectable ? `Select vertex ${vertex.id}` : undefined, children: renderInteractiveVertex ? (renderInteractiveVertex(vertex, vertex.position, state)) : state.isEnabled && state.isEligible ? (_jsx("circle", { cx: vertex.position.x, cy: vertex.position.y, r: Math.max(8, cellSize * 0.12), fill: "rgba(255,255,255,0.001)", pointerEvents: "all" })) : null }, vertex.id));
+                }) })), showCoordinates && coordinateStyle !== "none" && (_jsxs("g", { className: "coordinates", "aria-hidden": "true", children: [Array.from({ length: cols }).map((_, col) => {
+                        const label = coordinateStyle === "algebraic"
+                            ? String.fromCharCode(97 + col)
+                            : String(col + 1);
+                        return (_jsx("text", { x: labelMargin + col * cellSize + cellSize / 2, y: gridHeight + 16, textAnchor: "middle", fill: "#64748b", fontSize: 12, fontWeight: "500", children: label }, `file-${col}`));
+                    }), Array.from({ length: rows }).map((_, row) => {
+                        const label = coordinateStyle === "algebraic"
+                            ? String(rows - row)
+                            : String(row + 1);
+                        return (_jsx("text", { x: 10, y: row * cellSize + cellSize / 2 + 4, textAnchor: "middle", fill: "#64748b", fontSize: 12, fontWeight: "500", children: label }, `rank-${row}`));
+                    })] })), _jsx("g", { className: "pieces", role: "list", "aria-label": "Game pieces", children: resolvedPieces.map((piece) => {
+                    const x = labelMargin + piece.col * cellSize + cellSize / 2;
+                    const y = piece.row * cellSize + cellSize / 2;
+                    return (_jsx("g", { transform: `translate(${x}, ${y})`, role: "listitem", "aria-label": `${piece.owner ?? ""} ${piece.typeId}`, children: renderPiece(piece) }, piece.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), "%"] })] }))] }));
+}
+export const SquareGrid = SquareGridImpl;