@fgv/ts-sudoku-ui 5.0.1-2

package/lib/components/NumberKeypad.js

@@ -0,0 +1,181 @@
+/*
+ * 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';
+/**
+ * Reusable number keypad component for sudoku input
+ * @public
+ */
+export const NumberKeypad = ({ keypadType, inputMode, isActive, onNumberPress, onClear, disabled = false, className, compact = false }) => {
+    // Handle number button press with haptic feedback if available
+    const handleNumberPress = useCallback((number) => {
+        /* c8 ignore next 1 - not reachable in practice */
+        if (disabled)
+            return;
+        // Trigger haptic feedback on touch devices
+        if ('vibrate' in navigator) {
+            navigator.vibrate(10); // 10ms vibration
+        }
+        onNumberPress(number);
+    }, [disabled, onNumberPress]);
+    // Handle clear button press
+    const handleClear = useCallback(() => {
+        /* c8 ignore next 1 - not reachable in practice */
+        if (disabled)
+            return;
+        // Trigger haptic feedback on touch devices
+        if ('vibrate' in navigator) {
+            navigator.vibrate(15); // 15ms vibration for clear
+        }
+        onClear();
+    }, [disabled, onClear]);
+    // Calculate keypad classes
+    const keypadClasses = useMemo(() => {
+        const classes = ['bg-white border border-gray-300 rounded-lg p-3 flex flex-col gap-3'];
+        // Keypad type specific styles
+        if (keypadType === 'notes') {
+            classes.push('border-blue-500');
+        }
+        else {
+            classes.push('border-green-500');
+        }
+        // Active/inactive styles
+        if (isActive) {
+            classes.push('shadow-md');
+        }
+        else {
+            classes.push('opacity-75');
+        }
+        // Compact mode
+        if (compact) {
+            classes.push('p-2 gap-2');
+        }
+        // Disabled state
+        if (disabled) {
+            classes.push('opacity-50 pointer-events-none');
+        }
+        if (className)
+            classes.push(className);
+        return classes.join(' ');
+    }, [keypadType, isActive, disabled, className, compact]);
+    // Calculate title and button classes
+    const titleClasses = useMemo(() => {
+        const classes = ['text-center font-semibold text-gray-800'];
+        if (isActive) {
+            classes.push('text-gray-900');
+        }
+        else {
+            classes.push('text-gray-600');
+        }
+        if (compact) {
+            classes.push('text-sm');
+        }
+        else {
+            classes.push('text-base');
+        }
+        return classes.join(' ');
+    }, [isActive, compact]);
+    const buttonClasses = useMemo(() => {
+        const classes = [
+            'border-2',
+            'rounded-lg',
+            'font-bold',
+            'transition-all',
+            'duration-150',
+            'flex',
+            'items-center',
+            'justify-center',
+            'touch-manipulation'
+        ];
+        if (compact) {
+            classes.push('w-8', 'h-8', 'text-sm');
+        }
+        else {
+            classes.push('w-12', 'h-12', 'text-lg');
+        }
+        if (isActive) {
+            classes.push('bg-blue-500', 'text-white', 'border-blue-600', 'hover:bg-blue-600', 'active:bg-blue-700');
+        }
+        else {
+            classes.push('bg-gray-100', 'text-gray-700', 'border-gray-300', 'hover:bg-gray-200');
+        }
+        if (disabled) {
+            classes.push('opacity-50', 'cursor-not-allowed');
+        }
+        else {
+            classes.push('cursor-pointer');
+        }
+        return classes.join(' ');
+    }, [compact, isActive, disabled]);
+    const clearButtonClasses = useMemo(() => {
+        const classes = [
+            'border-2',
+            'rounded-lg',
+            'font-bold',
+            'transition-all',
+            'duration-150',
+            'flex',
+            'items-center',
+            'justify-center',
+            'touch-manipulation',
+            'col-span-2'
+        ];
+        if (compact) {
+            classes.push('h-8', 'text-sm');
+        }
+        else {
+            classes.push('h-12', 'text-lg');
+        }
+        if (isActive) {
+            classes.push('bg-red-500', 'text-white', 'border-red-600', 'hover:bg-red-600', 'active:bg-red-700');
+        }
+        else {
+            classes.push('bg-gray-100', 'text-gray-700', 'border-gray-300', 'hover:bg-gray-200');
+        }
+        if (disabled) {
+            classes.push('opacity-50', 'cursor-not-allowed');
+        }
+        else {
+            classes.push('cursor-pointer');
+        }
+        return classes.join(' ');
+    }, [compact, isActive, disabled]);
+    const gridClasses = useMemo(() => {
+        const classes = ['grid grid-cols-3 auto-rows-fr'];
+        if (compact) {
+            classes.push('gap-1');
+        }
+        else {
+            classes.push('gap-2');
+        }
+        return classes.join(' ');
+    }, [compact]);
+    // Keypad title
+    const title = keypadType === 'notes' ? '📝 Notes' : '✏️ Values';
+    return (React.createElement("div", { className: keypadClasses, role: "grid", "aria-label": `${keypadType} number keypad`, "data-testid": `number-keypad-${keypadType}` },
+        React.createElement("div", { className: titleClasses }, title),
+        React.createElement("div", { className: gridClasses, role: "grid" },
+            [1, 2, 3, 4, 5, 6, 7, 8, 9].map((number) => (React.createElement("button", { key: number, type: "button", onClick: () => handleNumberPress(number), disabled: disabled, className: buttonClasses, "aria-label": `Enter ${number} ${keypadType === 'notes' ? 'as note' : 'as value'}`, "data-testid": `keypad-${keypadType}-${number}`, onMouseDown: (e) => e.preventDefault() }, number))),
+            React.createElement("button", { type: "button", onClick: handleClear, disabled: disabled, className: clearButtonClasses, "aria-label": `Clear ${keypadType}`, "data-testid": `keypad-${keypadType}-clear`, onMouseDown: (e) => e.preventDefault() }, "Clear"))));
+};
+//# sourceMappingURL=NumberKeypad.js.map

package/lib/components/NumberKeypad.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberKeypad.js","sourceRoot":"","sources":["../../src/components/NumberKeypad.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 { InputMode } from '../types';\n\n/**\n * Props for the NumberKeypad component\n * @public\n */\nexport interface INumberKeypadProps {\n  /** Type of keypad - affects styling and behavior */\n  readonly keypadType: 'notes' | 'values';\n\n  /** Current input mode */\n  readonly inputMode: InputMode;\n\n  /** Whether this keypad is currently active */\n  readonly isActive: boolean;\n\n  /** Callback when a number is pressed */\n  readonly onNumberPress: (number: number) => void;\n\n  /** Callback when clear is pressed */\n  readonly onClear: () => void;\n\n  /** Whether the keypad is disabled */\n  readonly disabled?: boolean;\n\n  /** Additional CSS class name */\n  readonly className?: string;\n\n  /** Compact mode for smaller screens */\n  readonly compact?: boolean;\n}\n\n/**\n * Reusable number keypad component for sudoku input\n * @public\n */\nexport const NumberKeypad: React.FC<INumberKeypadProps> = ({\n  keypadType,\n  inputMode,\n  isActive,\n  onNumberPress,\n  onClear,\n  disabled = false,\n  className,\n  compact = false\n}) => {\n  // Handle number button press with haptic feedback if available\n  const handleNumberPress = useCallback(\n    (number: number) => {\n      /* c8 ignore next 1 - not reachable in practice */\n      if (disabled) return;\n\n      // Trigger haptic feedback on touch devices\n      if ('vibrate' in navigator) {\n        navigator.vibrate(10); // 10ms vibration\n      }\n\n      onNumberPress(number);\n    },\n    [disabled, onNumberPress]\n  );\n\n  // Handle clear button press\n  const handleClear = useCallback(() => {\n    /* c8 ignore next 1 - not reachable in practice */\n    if (disabled) return;\n\n    // Trigger haptic feedback on touch devices\n    if ('vibrate' in navigator) {\n      navigator.vibrate(15); // 15ms vibration for clear\n    }\n\n    onClear();\n  }, [disabled, onClear]);\n\n  // Calculate keypad classes\n  const keypadClasses = useMemo(() => {\n    const classes = ['bg-white border border-gray-300 rounded-lg p-3 flex flex-col gap-3'];\n\n    // Keypad type specific styles\n    if (keypadType === 'notes') {\n      classes.push('border-blue-500');\n    } else {\n      classes.push('border-green-500');\n    }\n\n    // Active/inactive styles\n    if (isActive) {\n      classes.push('shadow-md');\n    } else {\n      classes.push('opacity-75');\n    }\n\n    // Compact mode\n    if (compact) {\n      classes.push('p-2 gap-2');\n    }\n\n    // Disabled state\n    if (disabled) {\n      classes.push('opacity-50 pointer-events-none');\n    }\n\n    if (className) classes.push(className);\n\n    return classes.join(' ');\n  }, [keypadType, isActive, disabled, className, compact]);\n\n  // Calculate title and button classes\n  const titleClasses = useMemo(() => {\n    const classes = ['text-center font-semibold text-gray-800'];\n\n    if (isActive) {\n      classes.push('text-gray-900');\n    } else {\n      classes.push('text-gray-600');\n    }\n\n    if (compact) {\n      classes.push('text-sm');\n    } else {\n      classes.push('text-base');\n    }\n\n    return classes.join(' ');\n  }, [isActive, compact]);\n\n  const buttonClasses = useMemo(() => {\n    const classes = [\n      'border-2',\n      'rounded-lg',\n      'font-bold',\n      'transition-all',\n      'duration-150',\n      'flex',\n      'items-center',\n      'justify-center',\n      'touch-manipulation'\n    ];\n\n    if (compact) {\n      classes.push('w-8', 'h-8', 'text-sm');\n    } else {\n      classes.push('w-12', 'h-12', 'text-lg');\n    }\n\n    if (isActive) {\n      classes.push('bg-blue-500', 'text-white', 'border-blue-600', 'hover:bg-blue-600', 'active:bg-blue-700');\n    } else {\n      classes.push('bg-gray-100', 'text-gray-700', 'border-gray-300', 'hover:bg-gray-200');\n    }\n\n    if (disabled) {\n      classes.push('opacity-50', 'cursor-not-allowed');\n    } else {\n      classes.push('cursor-pointer');\n    }\n\n    return classes.join(' ');\n  }, [compact, isActive, disabled]);\n\n  const clearButtonClasses = useMemo(() => {\n    const classes = [\n      'border-2',\n      'rounded-lg',\n      'font-bold',\n      'transition-all',\n      'duration-150',\n      'flex',\n      'items-center',\n      'justify-center',\n      'touch-manipulation',\n      'col-span-2'\n    ];\n\n    if (compact) {\n      classes.push('h-8', 'text-sm');\n    } else {\n      classes.push('h-12', 'text-lg');\n    }\n\n    if (isActive) {\n      classes.push('bg-red-500', 'text-white', 'border-red-600', 'hover:bg-red-600', 'active:bg-red-700');\n    } else {\n      classes.push('bg-gray-100', 'text-gray-700', 'border-gray-300', 'hover:bg-gray-200');\n    }\n\n    if (disabled) {\n      classes.push('opacity-50', 'cursor-not-allowed');\n    } else {\n      classes.push('cursor-pointer');\n    }\n\n    return classes.join(' ');\n  }, [compact, isActive, disabled]);\n\n  const gridClasses = useMemo(() => {\n    const classes = ['grid grid-cols-3 auto-rows-fr'];\n\n    if (compact) {\n      classes.push('gap-1');\n    } else {\n      classes.push('gap-2');\n    }\n\n    return classes.join(' ');\n  }, [compact]);\n\n  // Keypad title\n  const title = keypadType === 'notes' ? '📝 Notes' : '✏️ Values';\n\n  return (\n    <div\n      className={keypadClasses}\n      role=\"grid\"\n      aria-label={`${keypadType} number keypad`}\n      data-testid={`number-keypad-${keypadType}`}\n    >\n      {/* Keypad title */}\n      <div className={titleClasses}>{title}</div>\n\n      {/* Number grid */}\n      <div className={gridClasses} role=\"grid\">\n        {/* Numbers 1-9 */}\n        {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((number) => (\n          <button\n            key={number}\n            type=\"button\"\n            onClick={() => handleNumberPress(number)}\n            disabled={disabled}\n            className={buttonClasses}\n            aria-label={`Enter ${number} ${keypadType === 'notes' ? 'as note' : 'as value'}`}\n            data-testid={`keypad-${keypadType}-${number}`}\n            onMouseDown={(e) => e.preventDefault()} // Prevent focus on click\n          >\n            {number}\n          </button>\n        ))}\n\n        {/* Clear button spanning 2 columns */}\n        <button\n          type=\"button\"\n          onClick={handleClear}\n          disabled={disabled}\n          className={clearButtonClasses}\n          aria-label={`Clear ${keypadType}`}\n          data-testid={`keypad-${keypadType}-clear`}\n          onMouseDown={(e) => e.preventDefault()} // Prevent focus on click\n        >\n          Clear\n        </button>\n      </div>\n    </div>\n  );\n};\n"]}

package/lib/components/SudokuCell.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ISudokuCellProps } from '../types';
+/**
+ * Individual Sudoku cell component with input handling and validation display
+ * @public
+ */
+export declare const SudokuCell: React.FC<ISudokuCellProps>;
+//# sourceMappingURL=SudokuCell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SudokuCell.d.ts","sourceRoot":"","sources":["../../src/components/SudokuCell.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAG5C;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAmTjD,CAAC"}

package/lib/components/SudokuCell.js

@@ -0,0 +1,240 @@
+/*
+ * 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, useRef } from 'react';
+import { useLongPress } from '../hooks/useLongPress';
+/**
+ * Individual Sudoku cell component with input handling and validation display
+ * @public
+ */
+export 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 = useRef(0);
+    const DOUBLE_TAP_DELAY = 300; // milliseconds
+    // Track if a long press just occurred to prevent click interference
+    const longPressOccurredRef = useRef(false);
+    // Handle keyboard input with notes-first paradigm
+    const handleKeyDown = 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 = useCallback((event) => {
+        if (onLongPressToggle && !isImmutable) {
+            longPressOccurredRef.current = true;
+            onLongPressToggle(event);
+        }
+    }, [onLongPressToggle, isImmutable]);
+    // Set up long press detection
+    const longPressProps = useLongPress({
+        onLongPress: handleLongPress,
+        delay: 500,
+        shouldPreventDefault: false
+    });
+    // Handle mouse click with double-tap detection
+    const handleClick = 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 = 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 = 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 = useCallback((event) => {
+        longPressOccurredRef.current = false;
+        longPressProps.onMouseLeave(event);
+    }, [longPressProps]);
+    // Calculate CSS classes
+    const cellClasses = 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 = 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.createElement("div", { key: noteValue, className: "flex items-center justify-center" }, hasNote && (React.createElement("span", { className: "text-[0.5rem] md:text-[0.55rem] lg:text-[0.6rem] font-normal leading-none text-gray-600" }, noteValue))));
+        });
+        return (React.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.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.createElement("span", { className: "text-inherit font-inherit" }, displayValue) : renderNotesGrid()));
+};
+//# sourceMappingURL=SudokuCell.js.map

package/lib/components/SudokuCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SudokuCell.js","sourceRoot":"","sources":["../../src/components/SudokuCell.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, 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/components/SudokuControls.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ISudokuControlsProps } from '../types';
+/**
+ * Control panel for grid-wide operations
+ * @public
+ */
+export declare const SudokuControls: React.FC<ISudokuControlsProps>;
+//# sourceMappingURL=SudokuControls.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SudokuControls.d.ts","sourceRoot":"","sources":["../../src/components/SudokuControls.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAGhD;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA0NzD,CAAC"}