@fgv/ts-sudoku-ui 5.0.1-2

package/lib-commonjs/components/SudokuCell.js

@@ -0,0 +1,245 @@
+"use strict";
+/*
+ * 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SudokuCell = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const useLongPress_1 = require("../hooks/useLongPress");
+/**
+ * Individual Sudoku cell component with input handling and validation display
+ * @public
+ */
+const SudokuCell = ({ cellInfo, isSelected, inputMode, puzzleDimensions, onSelect, onLongPressToggle, onValueChange, onNoteToggle, onClearAllNotes, onDragOver, className }) => {
+    const { id, row, column, contents, isImmutable, hasValidationError } = cellInfo;
+    // Double-tap detection for clearing all notes
+    const lastClickTimeRef = (0, react_1.useRef)(0);
+    const DOUBLE_TAP_DELAY = 300; // milliseconds
+    // Track if a long press just occurred to prevent click interference
+    const longPressOccurredRef = (0, react_1.useRef)(false);
+    // Handle keyboard input with notes-first paradigm
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        if (isImmutable)
+            return;
+        const key = event.key;
+        if (key >= '1' && key <= '9') {
+            const value = parseInt(key, 10);
+            // Check if modifier keys are pressed to override current input mode
+            const hasModifierKey = event.shiftKey || event.ctrlKey || event.metaKey;
+            if (hasModifierKey) {
+                // Modifier key held - always place value (override current mode)
+                onValueChange(value);
+            }
+            else if (inputMode === 'value') {
+                // Value mode - place value
+                onValueChange(value);
+            }
+            else {
+                // Notes mode (default) - toggle note
+                onNoteToggle(value);
+            }
+            event.preventDefault();
+        }
+        else if (key === 'Delete' || key === 'Backspace') {
+            if (contents.value) {
+                // Clear cell value
+                onValueChange(undefined);
+            }
+            else if (contents.notes.length > 0) {
+                // Clear all notes
+                onClearAllNotes();
+            }
+            event.preventDefault();
+        }
+        else if (key === '0') {
+            // Clear everything
+            if (contents.value) {
+                onValueChange(undefined);
+            }
+            if (contents.notes.length > 0) {
+                onClearAllNotes();
+            }
+            event.preventDefault();
+        }
+        // Arrow key navigation is handled by the parent component
+    }, [
+        isImmutable,
+        inputMode,
+        onValueChange,
+        onNoteToggle,
+        onClearAllNotes,
+        contents.value,
+        contents.notes.length
+    ]);
+    // Handle long press for multiselect toggle
+    const handleLongPress = (0, react_1.useCallback)((event) => {
+        if (onLongPressToggle && !isImmutable) {
+            longPressOccurredRef.current = true;
+            onLongPressToggle(event);
+        }
+    }, [onLongPressToggle, isImmutable]);
+    // Set up long press detection
+    const longPressProps = (0, useLongPress_1.useLongPress)({
+        onLongPress: handleLongPress,
+        delay: 500,
+        shouldPreventDefault: false
+    });
+    // Handle mouse click with double-tap detection
+    const handleClick = (0, react_1.useCallback)((event) => {
+        // If a long press just occurred, ignore this click event
+        if (longPressOccurredRef.current) {
+            longPressOccurredRef.current = false; // Reset for next interaction
+            event.preventDefault();
+            return;
+        }
+        // Prevent default context menu on Ctrl+click
+        if (event.ctrlKey || event.metaKey) {
+            event.preventDefault();
+        }
+        const currentTime = Date.now();
+        const timeSinceLastClick = currentTime - lastClickTimeRef.current;
+        if (timeSinceLastClick < DOUBLE_TAP_DELAY && !isImmutable && contents.notes.length > 0) {
+            // Double-tap detected - clear all notes
+            onClearAllNotes();
+        }
+        else {
+            // Single click - select cell (pass event for multi-select)
+            onSelect(event);
+        }
+        lastClickTimeRef.current = currentTime;
+    }, [onSelect, onClearAllNotes, isImmutable, contents.notes.length]);
+    // Handle mouse up - need to check if long press just occurred
+    const handleMouseUp = (0, react_1.useCallback)((event) => {
+        longPressProps.onMouseUp(event);
+        // Don't reset the flag here - let the click handler handle it
+        // The flag will be reset in handleClick or handleMouseLeave
+    }, [longPressProps]);
+    // Handle touch end - need to check if long press just occurred
+    const handleTouchEnd = (0, react_1.useCallback)((event) => {
+        longPressProps.onTouchEnd(event);
+        // Don't reset the flag here - let the click handler handle it
+        // The flag will be reset in handleClick or handleMouseLeave
+    }, [longPressProps]);
+    // Handle mouse leave - reset long press flag
+    const handleMouseLeave = (0, react_1.useCallback)((event) => {
+        longPressOccurredRef.current = false;
+        longPressProps.onMouseLeave(event);
+    }, [longPressProps]);
+    // Calculate CSS classes
+    const cellClasses = (0, react_1.useMemo)(() => {
+        const classes = [
+            // Base cell styles - fill grid cell completely
+            'w-full',
+            'h-full',
+            'border',
+            'border-gray-300',
+            'bg-white',
+            'text-blue-800',
+            'text-base',
+            'md:text-lg',
+            'lg:text-xl',
+            'font-bold',
+            'flex',
+            'items-center',
+            'justify-center',
+            'cursor-pointer',
+            'outline-none',
+            'relative',
+            'select-none',
+            'touch-manipulation',
+            'transition-all',
+            'duration-150',
+            'overflow-hidden',
+            'p-0'
+        ];
+        // Hover effects - apply before selection so selection can override
+        if (!isImmutable && !isSelected) {
+            classes.push('hover:bg-gray-50', 'hover:border-blue-500');
+        }
+        if (hasValidationError && !isSelected) {
+            classes.push('hover:bg-red-50', 'hover:border-red-600');
+        }
+        // State-based styles - Applied after hover so they take precedence
+        if (isSelected) {
+            if (className?.includes('multi-selected')) {
+                // Multi-Selected: More distinct blue background with darker border
+                classes.push('bg-blue-200', 'border-blue-500', '!bg-blue-200');
+            }
+            else {
+                // Single Selected: Darker blue background for clear distinction
+                classes.push('bg-blue-300', 'border-blue-600', '!bg-blue-300');
+            }
+        }
+        if (hasValidationError) {
+            classes.push('bg-red-50', 'text-red-800', 'border-red-500');
+        }
+        if (isImmutable) {
+            classes.push('bg-gray-100', 'cursor-default', 'text-gray-900');
+        }
+        if (contents.value) {
+            classes.push('font-black');
+        }
+        // Enhanced section boundaries - dynamic based on cage dimensions
+        const cageWidth = puzzleDimensions?.cageWidth ?? 3;
+        const cageHeight = puzzleDimensions?.cageHeight ?? 3;
+        const numRows = puzzleDimensions?.numRows ?? 9;
+        const numColumns = puzzleDimensions?.numColumns ?? 9;
+        if ((column + 1) % cageWidth === 0 && column < numColumns - 1) {
+            classes.push('border-r-2', 'border-r-black');
+        }
+        if ((row + 1) % cageHeight === 0 && row < numRows - 1) {
+            classes.push('border-b-2', 'border-b-black');
+        }
+        // Focus styles
+        classes.push('focus-visible:ring-2', 'focus-visible:ring-blue-500', 'focus-visible:ring-offset-1');
+        if (className)
+            classes.push(className);
+        return classes.join(' ');
+    }, [isSelected, hasValidationError, isImmutable, contents.value, row, column, className, puzzleDimensions]);
+    // Format display value
+    const displayValue = contents.value?.toString() || '';
+    // Render notes in fixed 3x3 grid layout - each number has fixed position
+    const renderNotesGrid = (0, react_1.useCallback)(() => {
+        /* c8 ignore next 1 - functional code tested but coverage intermittently missed */
+        if (contents.value)
+            return null; // Only show notes when no value is present
+        // Create a 3x3 grid for notes (positions 1-9) with fixed layout
+        // Only render notes that are actually selected (completely invisible otherwise)
+        const notesGrid = Array(9)
+            .fill(null)
+            .map((__value, index) => {
+            const noteValue = index + 1;
+            const hasNote = contents.notes.includes(noteValue);
+            return (react_1.default.createElement("div", { key: noteValue, className: "flex items-center justify-center" }, hasNote && (react_1.default.createElement("span", { className: "text-[0.5rem] md:text-[0.55rem] lg:text-[0.6rem] font-normal leading-none text-gray-600" }, noteValue))));
+        });
+        return (react_1.default.createElement("div", { className: "absolute inset-[12.5%] grid grid-cols-3 grid-rows-3 gap-0 pointer-events-none", style: { gridTemplateColumns: 'repeat(3, 1fr)', gridTemplateRows: 'repeat(3, 1fr)' }, "aria-hidden": "true" }, notesGrid));
+    }, [contents.value, contents.notes]);
+    return (react_1.default.createElement("button", { type: "button", className: cellClasses, onClick: handleClick, onContextMenu: (e) => e.preventDefault(), onKeyDown: handleKeyDown, onMouseDown: longPressProps.onMouseDown, onMouseUp: handleMouseUp, onMouseMove: onDragOver, onMouseLeave: handleMouseLeave, onTouchStart: longPressProps.onTouchStart, onTouchMove: onDragOver, onTouchEnd: handleTouchEnd, tabIndex: isSelected ? 0 : -1, "data-testid": `sudoku-cell-${id}`, "data-row": row, "data-column": column, "data-selected": isSelected, "data-error": hasValidationError, "data-immutable": isImmutable, "data-filled": !!contents.value, "aria-label": `Row ${row + 1}, Column ${column + 1}, ${contents.value
+            ? contents.value.toString()
+            : contents.notes.length > 0
+                ? `notes: ${contents.notes.join(', ')}`
+                : 'empty'}`, "aria-selected": isSelected }, contents.value ? react_1.default.createElement("span", { className: "text-inherit font-inherit" }, displayValue) : renderNotesGrid()));
+};
+exports.SudokuCell = SudokuCell;
+//# sourceMappingURL=SudokuCell.js.map

package/lib-commonjs/components/SudokuCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SudokuCell.js","sourceRoot":"","sources":["../../src/components/SudokuCell.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;;;;AAEH,uDAA4D;AAE5D,wDAAqD;AAErD;;;GAGG;AACI,MAAM,UAAU,GAA+B,CAAC,EACrD,QAAQ,EACR,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,eAAe,EACf,UAAU,EACV,SAAS,EACV,EAAE,EAAE;IACH,MAAM,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,kBAAkB,EAAE,GAAG,QAAQ,CAAC;IAEhF,8CAA8C;IAC9C,MAAM,gBAAgB,GAAG,IAAA,cAAM,EAAS,CAAC,CAAC,CAAC;IAC3C,MAAM,gBAAgB,GAAG,GAAG,CAAC,CAAC,eAAe;IAE7C,oEAAoE;IACpE,MAAM,oBAAoB,GAAG,IAAA,cAAM,EAAU,KAAK,CAAC,CAAC;IAEpD,kDAAkD;IAClD,MAAM,aAAa,GAAG,IAAA,mBAAW,EAC/B,CAAC,KAA0B,EAAE,EAAE;QAC7B,IAAI,WAAW;YAAE,OAAO;QAExB,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC;QAEtB,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,EAAE,CAAC;YAC7B,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;YAEhC,oEAAoE;YACpE,MAAM,cAAc,GAAG,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC;YAExE,IAAI,cAAc,EAAE,CAAC;gBACnB,iEAAiE;gBACjE,aAAa,CAAC,KAAK,CAAC,CAAC;YACvB,CAAC;iBAAM,IAAI,SAAS,KAAK,OAAO,EAAE,CAAC;gBACjC,2BAA2B;gBAC3B,aAAa,CAAC,KAAK,CAAC,CAAC;YACvB,CAAC;iBAAM,CAAC;gBACN,qCAAqC;gBACrC,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC;YACD,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC;aAAM,IAAI,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,WAAW,EAAE,CAAC;YACnD,IAAI,QAAQ,CAAC,KAAK,EAAE,CAAC;gBACnB,mBAAmB;gBACnB,aAAa,CAAC,SAAS,CAAC,CAAC;YAC3B,CAAC;iBAAM,IAAI,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACrC,kBAAkB;gBAClB,eAAe,EAAE,CAAC;YACpB,CAAC;YACD,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC;aAAM,IAAI,GAAG,KAAK,GAAG,EAAE,CAAC;YACvB,mBAAmB;YACnB,IAAI,QAAQ,CAAC,KAAK,EAAE,CAAC;gBACnB,aAAa,CAAC,SAAS,CAAC,CAAC;YAC3B,CAAC;YACD,IAAI,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC9B,eAAe,EAAE,CAAC;YACpB,CAAC;YACD,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC;QACD,0DAA0D;IAC5D,CAAC,EACD;QACE,WAAW;QACX,SAAS;QACT,aAAa;QACb,YAAY;QACZ,eAAe;QACf,QAAQ,CAAC,KAAK;QACd,QAAQ,CAAC,KAAK,CAAC,MAAM;KACtB,CACF,CAAC;IAEF,2CAA2C;IAC3C,MAAM,eAAe,GAAG,IAAA,mBAAW,EACjC,CAAC,KAA0C,EAAE,EAAE;QAC7C,IAAI,iBAAiB,IAAI,CAAC,WAAW,EAAE,CAAC;YACtC,oBAAoB,CAAC,OAAO,GAAG,IAAI,CAAC;YACpC,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC;IACH,CAAC,EACD,CAAC,iBAAiB,EAAE,WAAW,CAAC,CACjC,CAAC;IAEF,8BAA8B;IAC9B,MAAM,cAAc,GAAG,IAAA,2BAAY,EAAC;QAClC,WAAW,EAAE,eAAe;QAC5B,KAAK,EAAE,GAAG;QACV,oBAAoB,EAAE,KAAK;KAC5B,CAAC,CAAC;IAEH,+CAA+C;IAC/C,MAAM,WAAW,GAAG,IAAA,mBAAW,EAC7B,CAAC,KAAuB,EAAE,EAAE;QAC1B,yDAAyD;QACzD,IAAI,oBAAoB,CAAC,OAAO,EAAE,CAAC;YACjC,oBAAoB,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC,6BAA6B;YACnE,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,OAAO;QACT,CAAC;QAED,6CAA6C;QAC7C,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;YACnC,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC;QAED,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QAC/B,MAAM,kBAAkB,GAAG,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC;QAElE,IAAI,kBAAkB,GAAG,gBAAgB,IAAI,CAAC,WAAW,IAAI,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACvF,wCAAwC;YACxC,eAAe,EAAE,CAAC;QACpB,CAAC;aAAM,CAAC;YACN,2DAA2D;YAC3D,QAAQ,CAAC,KAAK,CAAC,CAAC;QAClB,CAAC;QAED,gBAAgB,CAAC,OAAO,GAAG,WAAW,CAAC;IACzC,CAAC,EACD,CAAC,QAAQ,EAAE,eAAe,EAAE,WAAW,EAAE,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAChE,CAAC;IAEF,8DAA8D;IAC9D,MAAM,aAAa,GAAG,IAAA,mBAAW,EAC/B,CAAC,KAAuB,EAAE,EAAE;QAC1B,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QAEhC,8DAA8D;QAC9D,4DAA4D;IAC9D,CAAC,EACD,CAAC,cAAc,CAAC,CACjB,CAAC;IAEF,+DAA+D;IAC/D,MAAM,cAAc,GAAG,IAAA,mBAAW,EAChC,CAAC,KAAuB,EAAE,EAAE;QAC1B,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QAEjC,8DAA8D;QAC9D,4DAA4D;IAC9D,CAAC,EACD,CAAC,cAAc,CAAC,CACjB,CAAC;IAEF,6CAA6C;IAC7C,MAAM,gBAAgB,GAAG,IAAA,mBAAW,EAClC,CAAC,KAAuB,EAAE,EAAE;QAC1B,oBAAoB,CAAC,OAAO,GAAG,KAAK,CAAC;QACrC,cAAc,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,EACD,CAAC,cAAc,CAAC,CACjB,CAAC;IAEF,wBAAwB;IACxB,MAAM,WAAW,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC/B,MAAM,OAAO,GAAG;YACd,+CAA+C;YAC/C,QAAQ;YACR,QAAQ;YACR,QAAQ;YACR,iBAAiB;YACjB,UAAU;YACV,eAAe;YACf,WAAW;YACX,YAAY;YACZ,YAAY;YACZ,WAAW;YACX,MAAM;YACN,cAAc;YACd,gBAAgB;YAChB,gBAAgB;YAChB,cAAc;YACd,UAAU;YACV,aAAa;YACb,oBAAoB;YACpB,gBAAgB;YAChB,cAAc;YACd,iBAAiB;YACjB,KAAK;SACN,CAAC;QAEF,mEAAmE;QACnE,IAAI,CAAC,WAAW,IAAI,CAAC,UAAU,EAAE,CAAC;YAChC,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,uBAAuB,CAAC,CAAC;QAC5D,CAAC;QACD,IAAI,kBAAkB,IAAI,CAAC,UAAU,EAAE,CAAC;YACtC,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,sBAAsB,CAAC,CAAC;QAC1D,CAAC;QAED,mEAAmE;QACnE,IAAI,UAAU,EAAE,CAAC;YACf,IAAI,SAAS,EAAE,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC;gBAC1C,mEAAmE;gBACnE,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,iBAAiB,EAAE,cAAc,CAAC,CAAC;YACjE,CAAC;iBAAM,CAAC;gBACN,gEAAgE;gBAChE,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,iBAAiB,EAAE,cAAc,CAAC,CAAC;YACjE,CAAC;QACH,CAAC;QACD,IAAI,kBAAkB,EAAE,CAAC;YACvB,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,cAAc,EAAE,gBAAgB,CAAC,CAAC;QAC9D,CAAC;QACD,IAAI,WAAW,EAAE,CAAC;YAChB,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,gBAAgB,EAAE,eAAe,CAAC,CAAC;QACjE,CAAC;QACD,IAAI,QAAQ,CAAC,KAAK,EAAE,CAAC;YACnB,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC7B,CAAC;QAED,iEAAiE;QACjE,MAAM,SAAS,GAAG,gBAAgB,EAAE,SAAS,IAAI,CAAC,CAAC;QACnD,MAAM,UAAU,GAAG,gBAAgB,EAAE,UAAU,IAAI,CAAC,CAAC;QACrD,MAAM,OAAO,GAAG,gBAAgB,EAAE,OAAO,IAAI,CAAC,CAAC;QAC/C,MAAM,UAAU,GAAG,gBAAgB,EAAE,UAAU,IAAI,CAAC,CAAC;QAErD,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,SAAS,KAAK,CAAC,IAAI,MAAM,GAAG,UAAU,GAAG,CAAC,EAAE,CAAC;YAC9D,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,gBAAgB,CAAC,CAAC;QAC/C,CAAC;QACD,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,UAAU,KAAK,CAAC,IAAI,GAAG,GAAG,OAAO,GAAG,CAAC,EAAE,CAAC;YACtD,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,gBAAgB,CAAC,CAAC;QAC/C,CAAC;QAED,eAAe;QACf,OAAO,CAAC,IAAI,CAAC,sBAAsB,EAAE,6BAA6B,EAAE,6BAA6B,CAAC,CAAC;QAEnG,IAAI,SAAS;YAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAEvC,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,UAAU,EAAE,kBAAkB,EAAE,WAAW,EAAE,QAAQ,CAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE5G,uBAAuB;IACvB,MAAM,YAAY,GAAG,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IAEtD,yEAAyE;IACzE,MAAM,eAAe,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACvC,kFAAkF;QAClF,IAAI,QAAQ,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC,CAAC,2CAA2C;QAE5E,gEAAgE;QAChE,gFAAgF;QAChF,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC;aACvB,IAAI,CAAC,IAAI,CAAC;aACV,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;YACtB,MAAM,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;YAC5B,MAAM,OAAO,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;YAEnD,OAAO,CACL,uCAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAC,kCAAkC,IAC9D,OAAO,IAAI,CACV,wCAAM,SAAS,EAAC,yFAAyF,IACtG,SAAS,CACL,CACR,CACG,CACP,CAAC;QACJ,CAAC,CAAC,CAAC;QAEL,OAAO,CACL,uCACE,SAAS,EAAC,+EAA+E,EACzF,KAAK,EAAE,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,iBACxE,MAAM,IAEjB,SAAS,CACN,CACP,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IAErC,OAAO,CACL,0CACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,WAAW,EACpB,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EACxC,SAAS,EAAE,aAAa,EACxB,WAAW,EAAE,cAAc,CAAC,WAAW,EACvC,SAAS,EAAE,aAAa,EACxB,WAAW,EAAE,UAAU,EACvB,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,cAAc,CAAC,YAAY,EACzC,WAAW,EAAE,UAAU,EACvB,UAAU,EAAE,cAAc,EAC1B,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,iBAChB,eAAe,EAAE,EAAE,cACtB,GAAG,iBACA,MAAM,mBACJ,UAAU,gBACb,kBAAkB,oBACd,WAAW,iBACd,CAAC,CAAC,QAAQ,CAAC,KAAK,gBACjB,OAAO,GAAG,GAAG,CAAC,YAAY,MAAM,GAAG,CAAC,KAC9C,QAAQ,CAAC,KAAK;YACZ,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,EAAE;YAC3B,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;gBAC3B,CAAC,CAAC,UAAU,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;gBACvC,CAAC,CAAC,OACN,EAAE,mBACa,UAAU,IAExB,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,wCAAM,SAAS,EAAC,2BAA2B,IAAE,YAAY,CAAQ,CAAC,CAAC,CAAC,eAAe,EAAE,CAChG,CACV,CAAC;AACJ,CAAC,CAAC;AAnTW,QAAA,UAAU,cAmTrB","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, useRef } from 'react';\nimport { ISudokuCellProps } from '../types';\nimport { useLongPress } from '../hooks/useLongPress';\n\n/**\n * Individual Sudoku cell component with input handling and validation display\n * @public\n */\nexport const SudokuCell: React.FC<ISudokuCellProps> = ({\n  cellInfo,\n  isSelected,\n  inputMode,\n  puzzleDimensions,\n  onSelect,\n  onLongPressToggle,\n  onValueChange,\n  onNoteToggle,\n  onClearAllNotes,\n  onDragOver,\n  className\n}) => {\n  const { id, row, column, contents, isImmutable, hasValidationError } = cellInfo;\n\n  // Double-tap detection for clearing all notes\n  const lastClickTimeRef = useRef<number>(0);\n  const DOUBLE_TAP_DELAY = 300; // milliseconds\n\n  // Track if a long press just occurred to prevent click interference\n  const longPressOccurredRef = useRef<boolean>(false);\n\n  // Handle keyboard input with notes-first paradigm\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (isImmutable) return;\n\n      const key = event.key;\n\n      if (key >= '1' && key <= '9') {\n        const value = parseInt(key, 10);\n\n        // Check if modifier keys are pressed to override current input mode\n        const hasModifierKey = event.shiftKey || event.ctrlKey || event.metaKey;\n\n        if (hasModifierKey) {\n          // Modifier key held - always place value (override current mode)\n          onValueChange(value);\n        } else if (inputMode === 'value') {\n          // Value mode - place value\n          onValueChange(value);\n        } else {\n          // Notes mode (default) - toggle note\n          onNoteToggle(value);\n        }\n        event.preventDefault();\n      } else if (key === 'Delete' || key === 'Backspace') {\n        if (contents.value) {\n          // Clear cell value\n          onValueChange(undefined);\n        } else if (contents.notes.length > 0) {\n          // Clear all notes\n          onClearAllNotes();\n        }\n        event.preventDefault();\n      } else if (key === '0') {\n        // Clear everything\n        if (contents.value) {\n          onValueChange(undefined);\n        }\n        if (contents.notes.length > 0) {\n          onClearAllNotes();\n        }\n        event.preventDefault();\n      }\n      // Arrow key navigation is handled by the parent component\n    },\n    [\n      isImmutable,\n      inputMode,\n      onValueChange,\n      onNoteToggle,\n      onClearAllNotes,\n      contents.value,\n      contents.notes.length\n    ]\n  );\n\n  // Handle long press for multiselect toggle\n  const handleLongPress = useCallback(\n    (event: React.TouchEvent | React.MouseEvent) => {\n      if (onLongPressToggle && !isImmutable) {\n        longPressOccurredRef.current = true;\n        onLongPressToggle(event);\n      }\n    },\n    [onLongPressToggle, isImmutable]\n  );\n\n  // Set up long press detection\n  const longPressProps = useLongPress({\n    onLongPress: handleLongPress,\n    delay: 500,\n    shouldPreventDefault: false\n  });\n\n  // Handle mouse click with double-tap detection\n  const handleClick = useCallback(\n    (event: React.MouseEvent) => {\n      // If a long press just occurred, ignore this click event\n      if (longPressOccurredRef.current) {\n        longPressOccurredRef.current = false; // Reset for next interaction\n        event.preventDefault();\n        return;\n      }\n\n      // Prevent default context menu on Ctrl+click\n      if (event.ctrlKey || event.metaKey) {\n        event.preventDefault();\n      }\n\n      const currentTime = Date.now();\n      const timeSinceLastClick = currentTime - lastClickTimeRef.current;\n\n      if (timeSinceLastClick < DOUBLE_TAP_DELAY && !isImmutable && contents.notes.length > 0) {\n        // Double-tap detected - clear all notes\n        onClearAllNotes();\n      } else {\n        // Single click - select cell (pass event for multi-select)\n        onSelect(event);\n      }\n\n      lastClickTimeRef.current = currentTime;\n    },\n    [onSelect, onClearAllNotes, isImmutable, contents.notes.length]\n  );\n\n  // Handle mouse up - need to check if long press just occurred\n  const handleMouseUp = useCallback(\n    (event: React.MouseEvent) => {\n      longPressProps.onMouseUp(event);\n\n      // Don't reset the flag here - let the click handler handle it\n      // The flag will be reset in handleClick or handleMouseLeave\n    },\n    [longPressProps]\n  );\n\n  // Handle touch end - need to check if long press just occurred\n  const handleTouchEnd = useCallback(\n    (event: React.TouchEvent) => {\n      longPressProps.onTouchEnd(event);\n\n      // Don't reset the flag here - let the click handler handle it\n      // The flag will be reset in handleClick or handleMouseLeave\n    },\n    [longPressProps]\n  );\n\n  // Handle mouse leave - reset long press flag\n  const handleMouseLeave = useCallback(\n    (event: React.MouseEvent) => {\n      longPressOccurredRef.current = false;\n      longPressProps.onMouseLeave(event);\n    },\n    [longPressProps]\n  );\n\n  // Calculate CSS classes\n  const cellClasses = useMemo(() => {\n    const classes = [\n      // Base cell styles - fill grid cell completely\n      'w-full',\n      'h-full',\n      'border',\n      'border-gray-300',\n      'bg-white',\n      'text-blue-800',\n      'text-base',\n      'md:text-lg',\n      'lg:text-xl',\n      'font-bold',\n      'flex',\n      'items-center',\n      'justify-center',\n      'cursor-pointer',\n      'outline-none',\n      'relative',\n      'select-none',\n      'touch-manipulation',\n      'transition-all',\n      'duration-150',\n      'overflow-hidden',\n      'p-0'\n    ];\n\n    // Hover effects - apply before selection so selection can override\n    if (!isImmutable && !isSelected) {\n      classes.push('hover:bg-gray-50', 'hover:border-blue-500');\n    }\n    if (hasValidationError && !isSelected) {\n      classes.push('hover:bg-red-50', 'hover:border-red-600');\n    }\n\n    // State-based styles - Applied after hover so they take precedence\n    if (isSelected) {\n      if (className?.includes('multi-selected')) {\n        // Multi-Selected: More distinct blue background with darker border\n        classes.push('bg-blue-200', 'border-blue-500', '!bg-blue-200');\n      } else {\n        // Single Selected: Darker blue background for clear distinction\n        classes.push('bg-blue-300', 'border-blue-600', '!bg-blue-300');\n      }\n    }\n    if (hasValidationError) {\n      classes.push('bg-red-50', 'text-red-800', 'border-red-500');\n    }\n    if (isImmutable) {\n      classes.push('bg-gray-100', 'cursor-default', 'text-gray-900');\n    }\n    if (contents.value) {\n      classes.push('font-black');\n    }\n\n    // Enhanced section boundaries - dynamic based on cage dimensions\n    const cageWidth = puzzleDimensions?.cageWidth ?? 3;\n    const cageHeight = puzzleDimensions?.cageHeight ?? 3;\n    const numRows = puzzleDimensions?.numRows ?? 9;\n    const numColumns = puzzleDimensions?.numColumns ?? 9;\n\n    if ((column + 1) % cageWidth === 0 && column < numColumns - 1) {\n      classes.push('border-r-2', 'border-r-black');\n    }\n    if ((row + 1) % cageHeight === 0 && row < numRows - 1) {\n      classes.push('border-b-2', 'border-b-black');\n    }\n\n    // Focus styles\n    classes.push('focus-visible:ring-2', 'focus-visible:ring-blue-500', 'focus-visible:ring-offset-1');\n\n    if (className) classes.push(className);\n\n    return classes.join(' ');\n  }, [isSelected, hasValidationError, isImmutable, contents.value, row, column, className, puzzleDimensions]);\n\n  // Format display value\n  const displayValue = contents.value?.toString() || '';\n\n  // Render notes in fixed 3x3 grid layout - each number has fixed position\n  const renderNotesGrid = useCallback(() => {\n    /* c8 ignore next 1 - functional code tested but coverage intermittently missed */\n    if (contents.value) return null; // Only show notes when no value is present\n\n    // Create a 3x3 grid for notes (positions 1-9) with fixed layout\n    // Only render notes that are actually selected (completely invisible otherwise)\n    const notesGrid = Array(9)\n      .fill(null)\n      .map((__value, index) => {\n        const noteValue = index + 1;\n        const hasNote = contents.notes.includes(noteValue);\n\n        return (\n          <div key={noteValue} className=\"flex items-center justify-center\">\n            {hasNote && (\n              <span className=\"text-[0.5rem] md:text-[0.55rem] lg:text-[0.6rem] font-normal leading-none text-gray-600\">\n                {noteValue}\n              </span>\n            )}\n          </div>\n        );\n      });\n\n    return (\n      <div\n        className=\"absolute inset-[12.5%] grid grid-cols-3 grid-rows-3 gap-0 pointer-events-none\"\n        style={{ gridTemplateColumns: 'repeat(3, 1fr)', gridTemplateRows: 'repeat(3, 1fr)' }}\n        aria-hidden=\"true\"\n      >\n        {notesGrid}\n      </div>\n    );\n  }, [contents.value, contents.notes]);\n\n  return (\n    <button\n      type=\"button\"\n      className={cellClasses}\n      onClick={handleClick}\n      onContextMenu={(e) => e.preventDefault()}\n      onKeyDown={handleKeyDown}\n      onMouseDown={longPressProps.onMouseDown}\n      onMouseUp={handleMouseUp}\n      onMouseMove={onDragOver}\n      onMouseLeave={handleMouseLeave}\n      onTouchStart={longPressProps.onTouchStart}\n      onTouchMove={onDragOver}\n      onTouchEnd={handleTouchEnd}\n      tabIndex={isSelected ? 0 : -1}\n      data-testid={`sudoku-cell-${id}`}\n      data-row={row}\n      data-column={column}\n      data-selected={isSelected}\n      data-error={hasValidationError}\n      data-immutable={isImmutable}\n      data-filled={!!contents.value}\n      aria-label={`Row ${row + 1}, Column ${column + 1}, ${\n        contents.value\n          ? contents.value.toString()\n          : contents.notes.length > 0\n          ? `notes: ${contents.notes.join(', ')}`\n          : 'empty'\n      }`}\n      aria-selected={isSelected}\n    >\n      {contents.value ? <span className=\"text-inherit font-inherit\">{displayValue}</span> : renderNotesGrid()}\n    </button>\n  );\n};\n"]}

package/lib-commonjs/components/SudokuControls.js

@@ -0,0 +1,145 @@
+"use strict";
+/*
+ * 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SudokuControls = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const useResponsiveLayout_1 = require("../hooks/useResponsiveLayout");
+/**
+ * Control panel for grid-wide operations
+ * @public
+ */
+const SudokuControls = ({ canUndo, canRedo, canReset, isValid, isSolved, onUndo, onRedo, onReset, onExport, className }) => {
+    const [showResetConfirm, setShowResetConfirm] = (0, react_1.useState)(false);
+    const responsiveLayout = (0, useResponsiveLayout_1.useResponsiveLayout)();
+    // Handle reset with confirmation
+    const handleResetClick = (0, react_1.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 = (0, react_1.useCallback)(() => {
+        setShowResetConfirm(false);
+    }, []);
+    // Calculate control classes
+    const controlClasses = (0, react_1.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_1.default.createElement("div", { className: controlClasses, "data-testid": "sudoku-controls" },
+        react_1.default.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_1.default.createElement("div", { style: { display: 'flex', gap: '8px' } },
+                react_1.default.createElement("button", { type: "button", onClick: onUndo, disabled: !canUndo, style: canUndo ? buttonStyle : disabledButtonStyle, "data-testid": "undo-button", title: "Undo last move" }, "\u21B6 Undo"),
+                react_1.default.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_1.default.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_1.default.createElement("div", { style: {
+                    display: 'flex',
+                    flexDirection: isCompactMode ? 'row' : 'column',
+                    alignItems: 'center',
+                    gap: '8px'
+                } },
+                !isCompactMode && (react_1.default.createElement("div", { style: { fontSize: '12px', color: '#666', textAlign: 'center' } }, "Are you sure? This will clear all entries.")),
+                react_1.default.createElement("div", { style: { display: 'flex', gap: '8px' } },
+                    react_1.default.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_1.default.createElement("button", { type: "button", onClick: handleCancelReset, style: buttonStyle, "data-testid": "cancel-reset-button" }, "Cancel")))),
+            react_1.default.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_1.default.createElement("div", { style: {
+                    fontSize: '12px',
+                    color: '#666',
+                    textAlign: 'center',
+                    maxWidth: '300px',
+                    lineHeight: '1.4'
+                } },
+                react_1.default.createElement("div", { style: { fontWeight: 'bold', marginBottom: '4px' } }, "Instructions:"),
+                react_1.default.createElement("div", null, "\u2022 Click a cell to select it"),
+                react_1.default.createElement("div", null, "\u2022 Type 1-9 to enter numbers"),
+                react_1.default.createElement("div", null, "\u2022 Press Delete/Backspace to clear"),
+                react_1.default.createElement("div", null, "\u2022 Use arrow keys to navigate"))),
+            react_1.default.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'))));
+};
+exports.SudokuControls = SudokuControls;
+//# sourceMappingURL=SudokuControls.js.map

package/lib-commonjs/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-commonjs/components/SudokuGrid.js

@@ -0,0 +1,182 @@
+"use strict";
+/*
+ * 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SudokuGrid = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const SudokuCell_1 = require("./SudokuCell");
+const CageOverlay_1 = require("./CageOverlay");
+/**
+ * Grid component that renders the 9x9 Sudoku grid with proper visual structure
+ * @public
+ */
+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 = (0, react_1.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 = (0, react_1.useCallback)((cellId) => {
+        return (event) => onCellSelect(cellId, event);
+    }, [onCellSelect]);
+    // Create cell value change handler
+    const createCellValueChangeHandler = (0, react_1.useCallback)((cellId) => {
+        return (value) => onCellValueChange(cellId, value);
+    }, [onCellValueChange]);
+    // Create note toggle handler
+    const createNoteToggleHandler = (0, react_1.useCallback)((cellId) => {
+        return (note) => onNoteToggle(cellId, note);
+    }, [onNoteToggle]);
+    // Create clear all notes handler
+    const createClearAllNotesHandler = (0, react_1.useCallback)((cellId) => {
+        return () => onClearAllNotes(cellId);
+    }, [onClearAllNotes]);
+    // Create long press toggle handler
+    const createLongPressToggleHandler = (0, react_1.useCallback)((cellId) => {
+        return onLongPressToggle
+            ? (event) => onLongPressToggle(cellId, event)
+            : undefined;
+    }, [onLongPressToggle]);
+    // Create drag over handler
+    const createDragOverHandler = (0, react_1.useCallback)((cellId) => {
+        return onDragOver ? () => onDragOver(cellId) : undefined;
+    }, [onDragOver]);
+    // Calculate grid classes
+    const gridClasses = (0, react_1.useMemo)(() => {
+        const classes = ['sudoku-grid'];
+        if (className)
+            classes.push(className);
+        return classes.join(' ');
+    }, [className]);
+    // Calculate grid template styles for dynamic grid sizes
+    const gridStyles = (0, react_1.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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.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_1.default.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_1.default.createElement(CageOverlay_1.CageOverlay, { cages: cages, gridSize: gridDimensions.gridSize, cellSize: gridDimensions.cellSize, numRows: numRows, numColumns: numColumns }));
+    };
+    return (react_1.default.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_1.default.createElement(SudokuCell_1.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 }));
+        })));
+};
+exports.SudokuGrid = SudokuGrid;
+//# sourceMappingURL=SudokuGrid.js.map