@fgv/ts-sudoku-ui 5.0.1-2

package/lib/components/SudokuControls.js

@@ -0,0 +1,140 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2023 Erik Fortune
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { useCallback, useMemo, useState } from 'react';
+import { useResponsiveLayout } from '../hooks/useResponsiveLayout';
+/**
+ * Control panel for grid-wide operations
+ * @public
+ */
+export const SudokuControls = ({ canUndo, canRedo, canReset, isValid, isSolved, onUndo, onRedo, onReset, onExport, className }) => {
+    const [showResetConfirm, setShowResetConfirm] = useState(false);
+    const responsiveLayout = useResponsiveLayout();
+    // Handle reset with confirmation
+    const handleResetClick = useCallback(() => {
+        if (showResetConfirm) {
+            onReset();
+            setShowResetConfirm(false);
+        }
+        else {
+            setShowResetConfirm(true);
+            // Auto-hide confirmation after 3 seconds
+            setTimeout(() => setShowResetConfirm(false), 3000);
+        }
+    }, [showResetConfirm, onReset]);
+    // Cancel reset confirmation
+    const handleCancelReset = useCallback(() => {
+        setShowResetConfirm(false);
+    }, []);
+    // Calculate control classes
+    const controlClasses = useMemo(() => {
+        const classes = ['sudoku-controls'];
+        if (className)
+            classes.push(className);
+        return classes.join(' ');
+    }, [className]);
+    // Button base styles
+    const buttonStyle = {
+        padding: '8px 16px',
+        margin: '4px',
+        border: '1px solid #ddd',
+        borderRadius: '4px',
+        backgroundColor: '#fff',
+        cursor: 'pointer',
+        fontSize: '14px',
+        fontWeight: 'bold'
+    };
+    const disabledButtonStyle = {
+        ...buttonStyle,
+        backgroundColor: '#f5f5f5',
+        color: '#999',
+        cursor: 'not-allowed'
+    };
+    // Removed unused primaryButtonStyle variable
+    const dangerButtonStyle = {
+        ...buttonStyle,
+        backgroundColor: '#f44336',
+        color: '#fff',
+        border: '1px solid #d32f2f'
+    };
+    const successButtonStyle = {
+        ...buttonStyle,
+        backgroundColor: '#4caf50',
+        color: '#fff',
+        border: '1px solid #388e3c'
+    };
+    // Calculate if we should use compact layout
+    const isCompactMode = responsiveLayout.deviceType === 'mobile' &&
+        (responsiveLayout.keypadLayoutMode === 'side-by-side' || responsiveLayout.keypadLayoutMode === 'stacked');
+    return (React.createElement("div", { className: controlClasses, "data-testid": "sudoku-controls" },
+        React.createElement("div", { style: {
+                display: 'flex',
+                flexDirection: isCompactMode ? 'row' : 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: isCompactMode ? '8px' : '16px',
+                padding: isCompactMode ? '8px' : '16px',
+                border: '1px solid #ddd',
+                borderRadius: '8px',
+                backgroundColor: '#fafafa',
+                flexWrap: isCompactMode ? 'wrap' : 'nowrap'
+            } },
+            React.createElement("div", { style: { display: 'flex', gap: '8px' } },
+                React.createElement("button", { type: "button", onClick: onUndo, disabled: !canUndo, style: canUndo ? buttonStyle : disabledButtonStyle, "data-testid": "undo-button", title: "Undo last move" }, "\u21B6 Undo"),
+                React.createElement("button", { type: "button", onClick: onRedo, disabled: !canRedo, style: canRedo ? buttonStyle : disabledButtonStyle, "data-testid": "redo-button", title: "Redo last undone move" }, "\u21B7 Redo")),
+            !showResetConfirm ? (React.createElement("button", { type: "button", onClick: handleResetClick, disabled: !canReset, style: canReset ? dangerButtonStyle : disabledButtonStyle, "data-testid": "reset-button", title: "Clear all entries" }, "\uD83D\uDDD1\uFE0F Reset Puzzle")) : (React.createElement("div", { style: {
+                    display: 'flex',
+                    flexDirection: isCompactMode ? 'row' : 'column',
+                    alignItems: 'center',
+                    gap: '8px'
+                } },
+                !isCompactMode && (React.createElement("div", { style: { fontSize: '12px', color: '#666', textAlign: 'center' } }, "Are you sure? This will clear all entries.")),
+                React.createElement("div", { style: { display: 'flex', gap: '8px' } },
+                    React.createElement("button", { type: "button", onClick: handleResetClick, style: dangerButtonStyle, "data-testid": "confirm-reset-button", title: isCompactMode ? 'Are you sure? This will clear all entries.' : undefined }, "Yes, Reset"),
+                    React.createElement("button", { type: "button", onClick: handleCancelReset, style: buttonStyle, "data-testid": "cancel-reset-button" }, "Cancel")))),
+            React.createElement("button", { type: "button", onClick: onExport, style: successButtonStyle, "data-testid": "export-button", title: "Export puzzle in compatible format" }, "\uD83D\uDCE4 Export Puzzle"),
+            !(responsiveLayout.deviceType === 'mobile' &&
+                (responsiveLayout.keypadLayoutMode === 'side-by-side' ||
+                    responsiveLayout.keypadLayoutMode === 'stacked')) && (React.createElement("div", { style: {
+                    fontSize: '12px',
+                    color: '#666',
+                    textAlign: 'center',
+                    maxWidth: '300px',
+                    lineHeight: '1.4'
+                } },
+                React.createElement("div", { style: { fontWeight: 'bold', marginBottom: '4px' } }, "Instructions:"),
+                React.createElement("div", null, "\u2022 Click a cell to select it"),
+                React.createElement("div", null, "\u2022 Type 1-9 to enter numbers"),
+                React.createElement("div", null, "\u2022 Press Delete/Backspace to clear"),
+                React.createElement("div", null, "\u2022 Use arrow keys to navigate"))),
+            React.createElement("div", { style: {
+                    padding: '8px 12px',
+                    borderRadius: '4px',
+                    fontSize: '12px',
+                    fontWeight: 'bold',
+                    backgroundColor: isSolved ? '#e8f5e8' : isValid ? '#e3f2fd' : '#ffebee',
+                    color: isSolved ? '#2e7d32' : isValid ? '#1565c0' : '#c62828',
+                    border: `1px solid ${isSolved ? '#4caf50' : isValid ? '#2196f3' : '#f44336'}`
+                } }, isSolved ? '✅ Solved!' : isValid ? '✓ Valid' : '⚠ Has Errors'))));
+};
+//# sourceMappingURL=SudokuControls.js.map

package/lib/components/SudokuControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SudokuControls.js","sourceRoot":"","sources":["../../src/components/SudokuControls.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * MIT License\n *\n * Copyright (c) 2023 Erik Fortune\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { ISudokuControlsProps } from '../types';\nimport { useResponsiveLayout } from '../hooks/useResponsiveLayout';\n\n/**\n * Control panel for grid-wide operations\n * @public\n */\nexport const SudokuControls: React.FC<ISudokuControlsProps> = ({\n  canUndo,\n  canRedo,\n  canReset,\n  isValid,\n  isSolved,\n  onUndo,\n  onRedo,\n  onReset,\n  onExport,\n  className\n}) => {\n  const [showResetConfirm, setShowResetConfirm] = useState(false);\n  const responsiveLayout = useResponsiveLayout();\n\n  // Handle reset with confirmation\n  const handleResetClick = useCallback(() => {\n    if (showResetConfirm) {\n      onReset();\n      setShowResetConfirm(false);\n    } else {\n      setShowResetConfirm(true);\n      // Auto-hide confirmation after 3 seconds\n      setTimeout(() => setShowResetConfirm(false), 3000);\n    }\n  }, [showResetConfirm, onReset]);\n\n  // Cancel reset confirmation\n  const handleCancelReset = useCallback(() => {\n    setShowResetConfirm(false);\n  }, []);\n\n  // Calculate control classes\n  const controlClasses = useMemo(() => {\n    const classes = ['sudoku-controls'];\n    if (className) classes.push(className);\n    return classes.join(' ');\n  }, [className]);\n\n  // Button base styles\n  const buttonStyle = {\n    padding: '8px 16px',\n    margin: '4px',\n    border: '1px solid #ddd',\n    borderRadius: '4px',\n    backgroundColor: '#fff',\n    cursor: 'pointer',\n    fontSize: '14px',\n    fontWeight: 'bold'\n  };\n\n  const disabledButtonStyle = {\n    ...buttonStyle,\n    backgroundColor: '#f5f5f5',\n    color: '#999',\n    cursor: 'not-allowed'\n  };\n\n  // Removed unused primaryButtonStyle variable\n\n  const dangerButtonStyle = {\n    ...buttonStyle,\n    backgroundColor: '#f44336',\n    color: '#fff',\n    border: '1px solid #d32f2f'\n  };\n\n  const successButtonStyle = {\n    ...buttonStyle,\n    backgroundColor: '#4caf50',\n    color: '#fff',\n    border: '1px solid #388e3c'\n  };\n\n  // Calculate if we should use compact layout\n  const isCompactMode =\n    responsiveLayout.deviceType === 'mobile' &&\n    (responsiveLayout.keypadLayoutMode === 'side-by-side' || responsiveLayout.keypadLayoutMode === 'stacked');\n\n  return (\n    <div className={controlClasses} data-testid=\"sudoku-controls\">\n      <div\n        style={{\n          display: 'flex',\n          flexDirection: isCompactMode ? 'row' : 'column',\n          alignItems: 'center',\n          justifyContent: 'center',\n          gap: isCompactMode ? '8px' : '16px',\n          padding: isCompactMode ? '8px' : '16px',\n          border: '1px solid #ddd',\n          borderRadius: '8px',\n          backgroundColor: '#fafafa',\n          flexWrap: isCompactMode ? 'wrap' : 'nowrap'\n        }}\n      >\n        {/* Undo/Redo controls */}\n        <div style={{ display: 'flex', gap: '8px' }}>\n          <button\n            type=\"button\"\n            onClick={onUndo}\n            disabled={!canUndo}\n            style={canUndo ? buttonStyle : disabledButtonStyle}\n            data-testid=\"undo-button\"\n            title=\"Undo last move\"\n          >\n            ↶ Undo\n          </button>\n          <button\n            type=\"button\"\n            onClick={onRedo}\n            disabled={!canRedo}\n            style={canRedo ? buttonStyle : disabledButtonStyle}\n            data-testid=\"redo-button\"\n            title=\"Redo last undone move\"\n          >\n            ↷ Redo\n          </button>\n        </div>\n\n        {/* Reset control with confirmation */}\n        {!showResetConfirm ? (\n          <button\n            type=\"button\"\n            onClick={handleResetClick}\n            disabled={!canReset}\n            style={canReset ? dangerButtonStyle : disabledButtonStyle}\n            data-testid=\"reset-button\"\n            title=\"Clear all entries\"\n          >\n            🗑️ Reset Puzzle\n          </button>\n        ) : (\n          <div\n            style={{\n              display: 'flex',\n              flexDirection: isCompactMode ? 'row' : 'column',\n              alignItems: 'center',\n              gap: '8px'\n            }}\n          >\n            {!isCompactMode && (\n              <div style={{ fontSize: '12px', color: '#666', textAlign: 'center' }}>\n                Are you sure? This will clear all entries.\n              </div>\n            )}\n            <div style={{ display: 'flex', gap: '8px' }}>\n              <button\n                type=\"button\"\n                onClick={handleResetClick}\n                style={dangerButtonStyle}\n                data-testid=\"confirm-reset-button\"\n                title={isCompactMode ? 'Are you sure? This will clear all entries.' : undefined}\n              >\n                Yes, Reset\n              </button>\n              <button\n                type=\"button\"\n                onClick={handleCancelReset}\n                style={buttonStyle}\n                data-testid=\"cancel-reset-button\"\n              >\n                Cancel\n              </button>\n            </div>\n          </div>\n        )}\n\n        {/* Export control */}\n        <button\n          type=\"button\"\n          onClick={onExport}\n          style={successButtonStyle}\n          data-testid=\"export-button\"\n          title=\"Export puzzle in compatible format\"\n        >\n          📤 Export Puzzle\n        </button>\n\n        {/* Instructions - hide on mobile with visible keypads */}\n        {!(\n          responsiveLayout.deviceType === 'mobile' &&\n          (responsiveLayout.keypadLayoutMode === 'side-by-side' ||\n            responsiveLayout.keypadLayoutMode === 'stacked')\n        ) && (\n          <div\n            style={{\n              fontSize: '12px',\n              color: '#666',\n              textAlign: 'center',\n              maxWidth: '300px',\n              lineHeight: '1.4'\n            }}\n          >\n            <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>Instructions:</div>\n            <div>• Click a cell to select it</div>\n            <div>• Type 1-9 to enter numbers</div>\n            <div>• Press Delete/Backspace to clear</div>\n            <div>• Use arrow keys to navigate</div>\n          </div>\n        )}\n\n        {/* Status indicator */}\n        <div\n          style={{\n            padding: '8px 12px',\n            borderRadius: '4px',\n            fontSize: '12px',\n            fontWeight: 'bold',\n            backgroundColor: isSolved ? '#e8f5e8' : isValid ? '#e3f2fd' : '#ffebee',\n            color: isSolved ? '#2e7d32' : isValid ? '#1565c0' : '#c62828',\n            border: `1px solid ${isSolved ? '#4caf50' : isValid ? '#2196f3' : '#f44336'}`\n          }}\n        >\n          {isSolved ? '✅ Solved!' : isValid ? '✓ Valid' : '⚠ Has Errors'}\n        </div>\n      </div>\n    </div>\n  );\n};\n"]}

package/lib/components/SudokuGrid.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ISudokuGridProps } from '../types';
+/**
+ * Grid component that renders the 9x9 Sudoku grid with proper visual structure
+ * @public
+ */
+export declare const SudokuGrid: React.FC<ISudokuGridProps>;
+//# sourceMappingURL=SudokuGrid.d.ts.map

package/lib/components/SudokuGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SudokuGrid.d.ts","sourceRoot":"","sources":["../../src/components/SudokuGrid.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAI5C;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsPjD,CAAC"}

package/lib/components/SudokuGrid.js

@@ -0,0 +1,177 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2023 Erik Fortune
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { useCallback, useMemo } from 'react';
+import { SudokuCell } from './SudokuCell';
+import { CageOverlay } from './CageOverlay';
+/**
+ * Grid component that renders the 9x9 Sudoku grid with proper visual structure
+ * @public
+ */
+export const SudokuGrid = ({ numRows, numColumns, cells, cages, selectedCell, selectedCells, inputMode, puzzleType, puzzleDimensions, onCellSelect, onLongPressToggle, onCellValueChange, onNoteToggle, onClearAllNotes, onNavigate, onDragOver, onDragEnd, isDragging, className }) => {
+    // Handle keyboard navigation
+    const handleKeyDown = useCallback((event) => {
+        if (!selectedCell)
+            return;
+        const { key } = event;
+        let direction = null;
+        switch (key) {
+            case 'ArrowUp':
+                direction = 'up';
+                break;
+            case 'ArrowDown':
+                direction = 'down';
+                break;
+            case 'ArrowLeft':
+                direction = 'left';
+                break;
+            case 'ArrowRight':
+                direction = 'right';
+                break;
+            default:
+                return; // Let the cell handle number/delete keys
+        }
+        if (direction) {
+            onNavigate(direction);
+            event.preventDefault();
+        }
+    }, [selectedCell, onNavigate]);
+    // Create cell select handler
+    const createCellSelectHandler = useCallback((cellId) => {
+        return (event) => onCellSelect(cellId, event);
+    }, [onCellSelect]);
+    // Create cell value change handler
+    const createCellValueChangeHandler = useCallback((cellId) => {
+        return (value) => onCellValueChange(cellId, value);
+    }, [onCellValueChange]);
+    // Create note toggle handler
+    const createNoteToggleHandler = useCallback((cellId) => {
+        return (note) => onNoteToggle(cellId, note);
+    }, [onNoteToggle]);
+    // Create clear all notes handler
+    const createClearAllNotesHandler = useCallback((cellId) => {
+        return () => onClearAllNotes(cellId);
+    }, [onClearAllNotes]);
+    // Create long press toggle handler
+    const createLongPressToggleHandler = useCallback((cellId) => {
+        return onLongPressToggle
+            ? (event) => onLongPressToggle(cellId, event)
+            : undefined;
+    }, [onLongPressToggle]);
+    // Create drag over handler
+    const createDragOverHandler = useCallback((cellId) => {
+        return onDragOver ? () => onDragOver(cellId) : undefined;
+    }, [onDragOver]);
+    // Calculate grid classes
+    const gridClasses = useMemo(() => {
+        const classes = ['sudoku-grid'];
+        if (className)
+            classes.push(className);
+        return classes.join(' ');
+    }, [className]);
+    // Calculate grid template styles for dynamic grid sizes
+    const gridStyles = useMemo(() => {
+        // Base cell size in pixels (for 9x9 grid, this would be 50px, 60px, 70px at different breakpoints)
+        const baseCellSizePx = 50; // Base size for small screens
+        // Calculate width based on number of columns
+        // We use the max of rows/columns to ensure square cells
+        const maxDimension = Math.max(numRows, numColumns);
+        const width = maxDimension * baseCellSizePx;
+        return {
+            gridTemplateColumns: `repeat(${numColumns}, 1fr)`,
+            gridTemplateRows: `repeat(${numRows}, 1fr)`,
+            width: `min(${width}px, 100%)`,
+            maxWidth: `${width}px`
+        };
+    }, [numRows, numColumns]);
+    // Calculate border classes based on puzzle type
+    const borderClasses = useMemo(() => {
+        //if (puzzleType === 'killer') {
+        // Minimal borders for Killer Sudoku to let cage borders stand out
+        //return 'gap-px border  border-2 border-gray-300 bg-gray-300';
+        //}
+        // Standard thick borders for other puzzle types
+        return 'border-2 border-black bg-black';
+    }, [puzzleType]);
+    // Sort cells by row and column for proper display order
+    const sortedCells = useMemo(() => {
+        return [...cells].sort((a, b) => {
+            if (a.row !== b.row)
+                return a.row - b.row;
+            return a.column - b.column;
+        });
+    }, [cells]);
+    // Calculate grid dimensions for overlays
+    const gridDimensions = useMemo(() => {
+        // Base cell size in grid units - we'll scale this with CSS
+        const baseCellSize = 1;
+        return {
+            cellSize: baseCellSize,
+            gridSize: {
+                width: numColumns * baseCellSize,
+                height: numRows * baseCellSize
+            }
+        };
+    }, [numRows, numColumns]);
+    // Render diagonal lines for Sudoku X puzzles
+    const renderDiagonalLines = () => {
+        if (puzzleType !== 'sudoku-x')
+            return null;
+        return (React.createElement("div", { className: "absolute inset-0 w-full h-full pointer-events-none", style: {
+                background: `
+            linear-gradient(45deg, transparent 49%, rgba(156, 163, 175, 0.15) 49.5%, rgba(156, 163, 175, 0.15) 50.5%, transparent 51%),
+            linear-gradient(-45deg, transparent 49%, rgba(156, 163, 175, 0.15) 49.5%, rgba(156, 163, 175, 0.15) 50.5%, transparent 51%)
+          `,
+                zIndex: 1
+            } }));
+    };
+    // Render cage overlay for Killer Sudoku
+    const renderCageOverlay = () => {
+        if (puzzleType !== 'killer-sudoku' || !cages || cages.length === 0)
+            return null;
+        return (React.createElement(CageOverlay, { cages: cages, gridSize: gridDimensions.gridSize, cellSize: gridDimensions.cellSize, numRows: numRows, numColumns: numColumns }));
+    };
+    return (React.createElement("div", { className: `
+        ${gridClasses}
+        relative
+        grid ${puzzleType === 'killer-sudoku' ? 'gap-0' : 'gap-0'}
+        ${borderClasses}
+        mx-auto outline-none
+        aspect-square
+      `, style: gridStyles, onKeyDown: handleKeyDown, onMouseUp: onDragEnd, onTouchEnd: onDragEnd, role: "grid", "aria-label": "Sudoku puzzle entry grid", tabIndex: 0, "data-testid": "sudoku-grid" },
+        renderDiagonalLines(),
+        renderCageOverlay(),
+        sortedCells.map((cellInfo) => {
+            const isPrimarySelected = selectedCell === cellInfo.id;
+            const isInMultiSelection = selectedCells.includes(cellInfo.id);
+            return (React.createElement(SudokuCell, { key: cellInfo.id, cellInfo: cellInfo, isSelected: isPrimarySelected || isInMultiSelection, inputMode: inputMode, puzzleDimensions: puzzleDimensions
+                    ? {
+                        numRows,
+                        numColumns,
+                        cageHeight: puzzleDimensions.cageHeightInCells,
+                        cageWidth: puzzleDimensions.cageWidthInCells
+                    }
+                    : undefined, onSelect: createCellSelectHandler(cellInfo.id), onLongPressToggle: createLongPressToggleHandler(cellInfo.id), onValueChange: createCellValueChangeHandler(cellInfo.id), onNoteToggle: createNoteToggleHandler(cellInfo.id), onClearAllNotes: createClearAllNotesHandler(cellInfo.id), onDragOver: createDragOverHandler(cellInfo.id), className: isInMultiSelection && !isPrimarySelected ? 'sudoku-cell--multi-selected' : undefined }));
+        })));
+};
+//# sourceMappingURL=SudokuGrid.js.map

package/lib/components/SudokuGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SudokuGrid.js","sourceRoot":"","sources":["../../src/components/SudokuGrid.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * MIT License\n *\n * Copyright (c) 2023 Erik Fortune\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport React, { useCallback, useMemo } from 'react';\nimport { CellId, NavigationDirection } from '@fgv/ts-sudoku-lib';\nimport { ISudokuGridProps } from '../types';\nimport { SudokuCell } from './SudokuCell';\nimport { CageOverlay } from './CageOverlay';\n\n/**\n * Grid component that renders the 9x9 Sudoku grid with proper visual structure\n * @public\n */\nexport const SudokuGrid: React.FC<ISudokuGridProps> = ({\n  numRows,\n  numColumns,\n  cells,\n  cages,\n  selectedCell,\n  selectedCells,\n  inputMode,\n  puzzleType,\n  puzzleDimensions,\n  onCellSelect,\n  onLongPressToggle,\n  onCellValueChange,\n  onNoteToggle,\n  onClearAllNotes,\n  onNavigate,\n  onDragOver,\n  onDragEnd,\n  isDragging,\n  className\n}) => {\n  // Handle keyboard navigation\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (!selectedCell) return;\n\n      const { key } = event;\n      let direction: NavigationDirection | null = null;\n\n      switch (key) {\n        case 'ArrowUp':\n          direction = 'up';\n          break;\n        case 'ArrowDown':\n          direction = 'down';\n          break;\n        case 'ArrowLeft':\n          direction = 'left';\n          break;\n        case 'ArrowRight':\n          direction = 'right';\n          break;\n        default:\n          return; // Let the cell handle number/delete keys\n      }\n\n      if (direction) {\n        onNavigate(direction);\n        event.preventDefault();\n      }\n    },\n    [selectedCell, onNavigate]\n  );\n\n  // Create cell select handler\n  const createCellSelectHandler = useCallback(\n    (cellId: CellId) => {\n      return (event?: React.MouseEvent) => onCellSelect(cellId, event);\n    },\n    [onCellSelect]\n  );\n\n  // Create cell value change handler\n  const createCellValueChangeHandler = useCallback(\n    (cellId: CellId) => {\n      return (value: number | undefined) => onCellValueChange(cellId, value);\n    },\n    [onCellValueChange]\n  );\n\n  // Create note toggle handler\n  const createNoteToggleHandler = useCallback(\n    (cellId: CellId) => {\n      return (note: number) => onNoteToggle(cellId, note);\n    },\n    [onNoteToggle]\n  );\n\n  // Create clear all notes handler\n  const createClearAllNotesHandler = useCallback(\n    (cellId: CellId) => {\n      return () => onClearAllNotes(cellId);\n    },\n    [onClearAllNotes]\n  );\n\n  // Create long press toggle handler\n  const createLongPressToggleHandler = useCallback(\n    (cellId: CellId) => {\n      return onLongPressToggle\n        ? (event: React.TouchEvent | React.MouseEvent) => onLongPressToggle(cellId, event)\n        : undefined;\n    },\n    [onLongPressToggle]\n  );\n\n  // Create drag over handler\n  const createDragOverHandler = useCallback(\n    (cellId: CellId) => {\n      return onDragOver ? () => onDragOver(cellId) : undefined;\n    },\n    [onDragOver]\n  );\n\n  // Calculate grid classes\n  const gridClasses = useMemo(() => {\n    const classes = ['sudoku-grid'];\n    if (className) classes.push(className);\n    return classes.join(' ');\n  }, [className]);\n\n  // Calculate grid template styles for dynamic grid sizes\n  const gridStyles = useMemo(() => {\n    // Base cell size in pixels (for 9x9 grid, this would be 50px, 60px, 70px at different breakpoints)\n    const baseCellSizePx = 50; // Base size for small screens\n\n    // Calculate width based on number of columns\n    // We use the max of rows/columns to ensure square cells\n    const maxDimension = Math.max(numRows, numColumns);\n    const width = maxDimension * baseCellSizePx;\n\n    return {\n      gridTemplateColumns: `repeat(${numColumns}, 1fr)`,\n      gridTemplateRows: `repeat(${numRows}, 1fr)`,\n      width: `min(${width}px, 100%)`,\n      maxWidth: `${width}px`\n    };\n  }, [numRows, numColumns]);\n\n  // Calculate border classes based on puzzle type\n  const borderClasses = useMemo(() => {\n    //if (puzzleType === 'killer') {\n    // Minimal borders for Killer Sudoku to let cage borders stand out\n    //return 'gap-px border  border-2 border-gray-300 bg-gray-300';\n    //}\n    // Standard thick borders for other puzzle types\n    return 'border-2 border-black bg-black';\n  }, [puzzleType]);\n\n  // Sort cells by row and column for proper display order\n  const sortedCells = useMemo(() => {\n    return [...cells].sort((a, b) => {\n      if (a.row !== b.row) return a.row - b.row;\n      return a.column - b.column;\n    });\n  }, [cells]);\n\n  // Calculate grid dimensions for overlays\n  const gridDimensions = useMemo(() => {\n    // Base cell size in grid units - we'll scale this with CSS\n    const baseCellSize = 1;\n    return {\n      cellSize: baseCellSize,\n      gridSize: {\n        width: numColumns * baseCellSize,\n        height: numRows * baseCellSize\n      }\n    };\n  }, [numRows, numColumns]);\n\n  // Render diagonal lines for Sudoku X puzzles\n  const renderDiagonalLines = (): React.ReactNode => {\n    if (puzzleType !== 'sudoku-x') return null;\n\n    return (\n      <div\n        className=\"absolute inset-0 w-full h-full pointer-events-none\"\n        style={{\n          background: `\n            linear-gradient(45deg, transparent 49%, rgba(156, 163, 175, 0.15) 49.5%, rgba(156, 163, 175, 0.15) 50.5%, transparent 51%),\n            linear-gradient(-45deg, transparent 49%, rgba(156, 163, 175, 0.15) 49.5%, rgba(156, 163, 175, 0.15) 50.5%, transparent 51%)\n          `,\n          zIndex: 1\n        }}\n      />\n    );\n  };\n\n  // Render cage overlay for Killer Sudoku\n  const renderCageOverlay = (): React.ReactNode => {\n    if (puzzleType !== 'killer-sudoku' || !cages || cages.length === 0) return null;\n\n    return (\n      <CageOverlay\n        cages={cages}\n        gridSize={gridDimensions.gridSize}\n        cellSize={gridDimensions.cellSize}\n        numRows={numRows}\n        numColumns={numColumns}\n      />\n    );\n  };\n\n  return (\n    <div\n      className={`\n        ${gridClasses}\n        relative\n        grid ${puzzleType === 'killer-sudoku' ? 'gap-0' : 'gap-0'}\n        ${borderClasses}\n        mx-auto outline-none\n        aspect-square\n      `}\n      style={gridStyles}\n      onKeyDown={handleKeyDown}\n      onMouseUp={onDragEnd}\n      onTouchEnd={onDragEnd}\n      role=\"grid\"\n      aria-label=\"Sudoku puzzle entry grid\"\n      tabIndex={0}\n      data-testid=\"sudoku-grid\"\n    >\n      {renderDiagonalLines()}\n      {renderCageOverlay()}\n      {sortedCells.map((cellInfo) => {\n        const isPrimarySelected = selectedCell === cellInfo.id;\n        const isInMultiSelection = selectedCells.includes(cellInfo.id);\n\n        return (\n          <SudokuCell\n            key={cellInfo.id}\n            cellInfo={cellInfo}\n            isSelected={isPrimarySelected || isInMultiSelection}\n            inputMode={inputMode}\n            puzzleDimensions={\n              puzzleDimensions\n                ? {\n                    numRows,\n                    numColumns,\n                    cageHeight: puzzleDimensions.cageHeightInCells,\n                    cageWidth: puzzleDimensions.cageWidthInCells\n                  }\n                : undefined\n            }\n            onSelect={createCellSelectHandler(cellInfo.id)}\n            onLongPressToggle={createLongPressToggleHandler(cellInfo.id)}\n            onValueChange={createCellValueChangeHandler(cellInfo.id)}\n            onNoteToggle={createNoteToggleHandler(cellInfo.id)}\n            onClearAllNotes={createClearAllNotesHandler(cellInfo.id)}\n            onDragOver={createDragOverHandler(cellInfo.id)}\n            className={isInMultiSelection && !isPrimarySelected ? 'sudoku-cell--multi-selected' : undefined}\n          />\n        );\n      })}\n    </div>\n  );\n};\n"]}

package/lib/components/SudokuGridEntry.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ISudokuGridEntryProps } from '../types';
+/**
+ * Main container component that orchestrates puzzle entry
+ * @public
+ */
+export declare const SudokuGridEntry: React.FC<ISudokuGridEntryProps>;
+//# sourceMappingURL=SudokuGridEntry.d.ts.map

package/lib/components/SudokuGridEntry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SudokuGridEntry.d.ts","sourceRoot":"","sources":["../../src/components/SudokuGridEntry.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAEjF,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AASjD;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAkkB3D,CAAC"}