@fgv/ts-sudoku-ui 5.1.0-2 → 5.1.0-21

package/lib-commonjs/components/KillerCombinationsPanel.js

@@ -1,84 +0,0 @@
-"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.KillerCombinationsPanel = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const CombinationGrid_1 = require("./CombinationGrid");
-/**
- * Desktop panel variant for killer combinations explorer
- * @public
- */
-const KillerCombinationsPanel = ({ cage, combinations, onToggle, onClose, isOpen, className }) => {
-    // Handle Escape key to close
-    (0, react_1.useEffect)(() => {
-        const handleEscape = (event) => {
-            if (event.key === 'Escape') {
-                onClose();
-            }
-        };
-        if (isOpen) {
-            window.addEventListener('keydown', handleEscape);
-            return () => window.removeEventListener('keydown', handleEscape);
-        }
-    }, [isOpen, onClose]);
-    const panelClasses = [
-        'fixed right-0 top-0 bottom-0',
-        'w-96 max-w-md',
-        'bg-white dark:bg-gray-900',
-        'border-l border-gray-200 dark:border-gray-700',
-        'shadow-2xl',
-        'transform transition-transform duration-300 ease-in-out',
-        isOpen ? 'translate-x-0' : 'translate-x-full',
-        'z-[9999]',
-        'flex flex-col',
-        className
-    ]
-        .filter(Boolean)
-        .join(' ');
-    const activeCount = combinations.filter((c) => !c.isEliminated).length;
-    const totalCount = combinations.length;
-    return (react_1.default.createElement("aside", { className: panelClasses, role: "complementary", "aria-label": "Killer Sudoku Combinations Explorer" },
-        react_1.default.createElement("div", { className: "flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700" },
-            react_1.default.createElement("div", null,
-                react_1.default.createElement("h2", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100" }, "Combinations"),
-                react_1.default.createElement("p", { className: "text-sm text-gray-500 dark:text-gray-400" },
-                    cage.numCells,
-                    " cells, sum ",
-                    cage.total)),
-            react_1.default.createElement("button", { type: "button", onClick: onClose, className: "p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors", "aria-label": "Close combinations panel" },
-                react_1.default.createElement("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
-                    react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })))),
-        react_1.default.createElement("div", { className: "px-4 py-2 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700" },
-            react_1.default.createElement("p", { className: "text-xs text-gray-600 dark:text-gray-400" },
-                activeCount,
-                " of ",
-                totalCount,
-                " combinations possible")),
-        react_1.default.createElement("div", { className: "flex-1 overflow-hidden" },
-            react_1.default.createElement(CombinationGrid_1.CombinationGrid, { combinations: combinations, onToggle: onToggle, mode: "panel" }))));
-};
-exports.KillerCombinationsPanel = KillerCombinationsPanel;
-//# sourceMappingURL=KillerCombinationsPanel.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"KillerCombinationsPanel.js","sourceRoot":"","sources":["../../src/components/KillerCombinationsPanel.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;;;;AAEH,uDAAyC;AAGzC,uDAAoD;AAcpD;;;GAGG;AACI,MAAM,uBAAuB,GAA4C,CAAC,EAC/E,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,MAAM,EACN,SAAS,EACV,EAAE,EAAE;IACH,6BAA6B;IAC7B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,CAAC,KAAoB,EAAQ,EAAE;YAClD,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC3B,OAAO,EAAE,CAAC;YACZ,CAAC;QACH,CAAC,CAAC;QAEF,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;YACjD,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;QACnE,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAEtB,MAAM,YAAY,GAAG;QACnB,8BAA8B;QAC9B,eAAe;QACf,2BAA2B;QAC3B,+CAA+C;QAC/C,YAAY;QACZ,yDAAyD;QACzD,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,kBAAkB;QAC7C,UAAU;QACV,eAAe;QACf,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,MAAM,WAAW,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC;IACvE,MAAM,UAAU,GAAG,YAAY,CAAC,MAAM,CAAC;IAEvC,OAAO,CACL,yCAAO,SAAS,EAAE,YAAY,EAAE,IAAI,EAAC,eAAe,gBAAY,qCAAqC;QAEnG,uCAAK,SAAS,EAAC,qFAAqF;YAClG;gBACE,sCAAI,SAAS,EAAC,wDAAwD,mBAAkB;gBACxF,qCAAG,SAAS,EAAC,0CAA0C;oBACpD,IAAI,CAAC,QAAQ;;oBAAc,IAAI,CAAC,KAAK,CACpC,CACA;YACN,0CACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,2EAA2E,gBAC1E,0BAA0B;gBAErC,uCAAK,SAAS,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW;oBAC5E,wCAAM,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,EAAE,CAAC,EAAE,CAAC,EAAC,sBAAsB,GAAG,CAC1F,CACC,CACL;QAGN,uCAAK,SAAS,EAAC,qFAAqF;YAClG,qCAAG,SAAS,EAAC,0CAA0C;gBACpD,WAAW;;gBAAM,UAAU;yCAC1B,CACA;QAGN,uCAAK,SAAS,EAAC,wBAAwB;YACrC,8BAAC,iCAAe,IAAC,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAC,OAAO,GAAG,CAC5E,CACA,CACT,CAAC;AACJ,CAAC,CAAC;AA3EW,QAAA,uBAAuB,2BA2ElC","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, { useEffect } from 'react';\nimport { ICage } from '@fgv/ts-sudoku-lib';\nimport { ICombinationDisplayInfo } from '../types';\nimport { CombinationGrid } from './CombinationGrid';\n\n/**\n * Props for the KillerCombinationsPanel component\n */\nexport interface IKillerCombinationsPanelProps {\n  readonly cage: ICage;\n  readonly combinations: ICombinationDisplayInfo[];\n  readonly onToggle: (signature: string) => void;\n  readonly onClose: () => void;\n  readonly isOpen: boolean;\n  readonly className?: string;\n}\n\n/**\n * Desktop panel variant for killer combinations explorer\n * @public\n */\nexport const KillerCombinationsPanel: React.FC<IKillerCombinationsPanelProps> = ({\n  cage,\n  combinations,\n  onToggle,\n  onClose,\n  isOpen,\n  className\n}) => {\n  // Handle Escape key to close\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent): void => {\n      if (event.key === 'Escape') {\n        onClose();\n      }\n    };\n\n    if (isOpen) {\n      window.addEventListener('keydown', handleEscape);\n      return () => window.removeEventListener('keydown', handleEscape);\n    }\n  }, [isOpen, onClose]);\n\n  const panelClasses = [\n    'fixed right-0 top-0 bottom-0',\n    'w-96 max-w-md',\n    'bg-white dark:bg-gray-900',\n    'border-l border-gray-200 dark:border-gray-700',\n    'shadow-2xl',\n    'transform transition-transform duration-300 ease-in-out',\n    isOpen ? 'translate-x-0' : 'translate-x-full',\n    'z-[9999]',\n    'flex flex-col',\n    className\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const activeCount = combinations.filter((c) => !c.isEliminated).length;\n  const totalCount = combinations.length;\n\n  return (\n    <aside className={panelClasses} role=\"complementary\" aria-label=\"Killer Sudoku Combinations Explorer\">\n      {/* Header */}\n      <div className=\"flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700\">\n        <div>\n          <h2 className=\"text-lg font-semibold text-gray-900 dark:text-gray-100\">Combinations</h2>\n          <p className=\"text-sm text-gray-500 dark:text-gray-400\">\n            {cage.numCells} cells, sum {cage.total}\n          </p>\n        </div>\n        <button\n          type=\"button\"\n          onClick={onClose}\n          className=\"p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors\"\n          aria-label=\"Close combinations panel\"\n        >\n          <svg className=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n          </svg>\n        </button>\n      </div>\n\n      {/* Stats */}\n      <div className=\"px-4 py-2 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700\">\n        <p className=\"text-xs text-gray-600 dark:text-gray-400\">\n          {activeCount} of {totalCount} combinations possible\n        </p>\n      </div>\n\n      {/* Combinations Grid */}\n      <div className=\"flex-1 overflow-hidden\">\n        <CombinationGrid combinations={combinations} onToggle={onToggle} mode=\"panel\" />\n      </div>\n    </aside>\n  );\n};\n"]}

package/lib-commonjs/components/NumberKeypad.js

@@ -1,186 +0,0 @@
-"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.NumberKeypad = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-/**
- * Reusable number keypad component for sudoku input
- * @public
- */
-const NumberKeypad = ({ keypadType, inputMode, isActive, onNumberPress, onClear, disabled = false, className, compact = false }) => {
-    // Handle number button press with haptic feedback if available
-    const handleNumberPress = (0, react_1.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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.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_1.default.createElement("div", { className: keypadClasses, role: "grid", "aria-label": `${keypadType} number keypad`, "data-testid": `number-keypad-${keypadType}` },
-        react_1.default.createElement("div", { className: titleClasses }, title),
-        react_1.default.createElement("div", { className: gridClasses, role: "grid" },
-            [1, 2, 3, 4, 5, 6, 7, 8, 9].map((number) => (react_1.default.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_1.default.createElement("button", { type: "button", onClick: handleClear, disabled: disabled, className: clearButtonClasses, "aria-label": `Clear ${keypadType}`, "data-testid": `keypad-${keypadType}-clear`, onMouseDown: (e) => e.preventDefault() }, "Clear"))));
-};
-exports.NumberKeypad = NumberKeypad;
-//# sourceMappingURL=NumberKeypad.js.map

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

@@ -1 +0,0 @@
-{"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-commonjs/components/SudokuCell.js

@@ -1,245 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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"]}