@fgv/ts-sudoku-ui 0.1.0

package/lib-commonjs/components/KillerCombinationsExplorer.js

@@ -0,0 +1,74 @@
+"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.KillerCombinationsExplorer = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const useKillerCombinations_1 = require("../hooks/useKillerCombinations");
+const useCombinationElimination_1 = require("../hooks/useCombinationElimination");
+const useResponsiveLayout_1 = require("../hooks/useResponsiveLayout");
+const KillerCombinationsPanel_1 = require("./KillerCombinationsPanel");
+const KillerCombinationsModal_1 = require("./KillerCombinationsModal");
+/**
+ * Main killer combinations explorer container component
+ * Automatically switches between panel (desktop) and modal (mobile) based on screen size
+ * @public
+ */
+const KillerCombinationsExplorer = ({ selectedCage, puzzleId, isOpen, onClose, mobileBreakpoint = 1024, className }) => {
+    const { screenWidth } = (0, useResponsiveLayout_1.useResponsiveLayout)();
+    // Determine display mode based on screen width
+    const mode = screenWidth >= mobileBreakpoint ? 'panel' : 'modal';
+    // Get combinations for the selected cage
+    const combinationsResult = (0, useKillerCombinations_1.useKillerCombinations)(selectedCage);
+    // Get cage ID for storage
+    const cageId = selectedCage?.id;
+    // Get elimination state
+    const { eliminatedSignatures, toggleElimination } = (0, useCombinationElimination_1.useCombinationElimination)(puzzleId, cageId);
+    // Merge combinations with elimination state
+    const displayCombinations = (0, react_1.useMemo)(() => {
+        if (combinationsResult.isFailure()) {
+            return [];
+        }
+        return combinationsResult.value.map((combo) => ({
+            ...combo,
+            isEliminated: eliminatedSignatures.has(combo.signature)
+        }));
+    }, [combinationsResult, eliminatedSignatures]);
+    // Don't render if not open or no cage selected
+    if (!isOpen || !selectedCage) {
+        return null;
+    }
+    // Don't render if combinations failed to load
+    if (combinationsResult.isFailure()) {
+        return null;
+    }
+    // Render panel or modal based on mode
+    if (mode === 'panel') {
+        return (react_1.default.createElement(KillerCombinationsPanel_1.KillerCombinationsPanel, { cage: selectedCage, combinations: displayCombinations, onToggle: toggleElimination, onClose: onClose, isOpen: isOpen, className: className }));
+    }
+    return (react_1.default.createElement(KillerCombinationsModal_1.KillerCombinationsModal, { cage: selectedCage, combinations: displayCombinations, onToggle: toggleElimination, onClose: onClose, isOpen: isOpen, className: className }));
+};
+exports.KillerCombinationsExplorer = KillerCombinationsExplorer;
+//# sourceMappingURL=KillerCombinationsExplorer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KillerCombinationsExplorer.js","sourceRoot":"","sources":["../../src/components/KillerCombinationsExplorer.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;;;;AAEH,uDAAuC;AAEvC,0EAAuE;AACvE,kFAA+E;AAC/E,sEAAmE;AACnE,uEAAoE;AACpE,uEAAoE;AAEpE;;;;GAIG;AACI,MAAM,0BAA0B,GAA+C,CAAC,EACrF,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,OAAO,EACP,gBAAgB,GAAG,IAAI,EACvB,SAAS,EACV,EAAE,EAAE;IACH,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,yCAAmB,GAAE,CAAC;IAE9C,+CAA+C;IAC/C,MAAM,IAAI,GAA4B,WAAW,IAAI,gBAAgB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;IAE1F,yCAAyC;IACzC,MAAM,kBAAkB,GAAG,IAAA,6CAAqB,EAAC,YAAY,CAAC,CAAC;IAE/D,0BAA0B;IAC1B,MAAM,MAAM,GAAG,YAAY,EAAE,EAAE,CAAC;IAEhC,wBAAwB;IACxB,MAAM,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,GAAG,IAAA,qDAAyB,EAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IAEhG,4CAA4C;IAC5C,MAAM,mBAAmB,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACvC,IAAI,kBAAkB,CAAC,SAAS,EAAE,EAAE,CAAC;YACnC,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,OAAO,kBAAkB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YAC9C,GAAG,KAAK;YACR,YAAY,EAAE,oBAAoB,CAAC,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC;SACxD,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,kBAAkB,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAE/C,+CAA+C;IAC/C,IAAI,CAAC,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC;QAC7B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,8CAA8C;IAC9C,IAAI,kBAAkB,CAAC,SAAS,EAAE,EAAE,CAAC;QACnC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,sCAAsC;IACtC,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;QACrB,OAAO,CACL,8BAAC,iDAAuB,IACtB,IAAI,EAAE,YAAY,EAClB,YAAY,EAAE,mBAAmB,EACjC,QAAQ,EAAE,iBAAiB,EAC3B,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,8BAAC,iDAAuB,IACtB,IAAI,EAAE,YAAY,EAClB,YAAY,EAAE,mBAAmB,EACjC,QAAQ,EAAE,iBAAiB,EAC3B,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;AACJ,CAAC,CAAC;AApEW,QAAA,0BAA0B,8BAoErC","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, { useMemo } from 'react';\nimport { IKillerCombinationsExplorerProps, IKillerCombinationsMode } from '../types';\nimport { useKillerCombinations } from '../hooks/useKillerCombinations';\nimport { useCombinationElimination } from '../hooks/useCombinationElimination';\nimport { useResponsiveLayout } from '../hooks/useResponsiveLayout';\nimport { KillerCombinationsPanel } from './KillerCombinationsPanel';\nimport { KillerCombinationsModal } from './KillerCombinationsModal';\n\n/**\n * Main killer combinations explorer container component\n * Automatically switches between panel (desktop) and modal (mobile) based on screen size\n * @public\n */\nexport const KillerCombinationsExplorer: React.FC<IKillerCombinationsExplorerProps> = ({\n  selectedCage,\n  puzzleId,\n  isOpen,\n  onClose,\n  mobileBreakpoint = 1024,\n  className\n}) => {\n  const { screenWidth } = useResponsiveLayout();\n\n  // Determine display mode based on screen width\n  const mode: IKillerCombinationsMode = screenWidth >= mobileBreakpoint ? 'panel' : 'modal';\n\n  // Get combinations for the selected cage\n  const combinationsResult = useKillerCombinations(selectedCage);\n\n  // Get cage ID for storage\n  const cageId = selectedCage?.id;\n\n  // Get elimination state\n  const { eliminatedSignatures, toggleElimination } = useCombinationElimination(puzzleId, cageId);\n\n  // Merge combinations with elimination state\n  const displayCombinations = useMemo(() => {\n    if (combinationsResult.isFailure()) {\n      return [];\n    }\n\n    return combinationsResult.value.map((combo) => ({\n      ...combo,\n      isEliminated: eliminatedSignatures.has(combo.signature)\n    }));\n  }, [combinationsResult, eliminatedSignatures]);\n\n  // Don't render if not open or no cage selected\n  if (!isOpen || !selectedCage) {\n    return null;\n  }\n\n  // Don't render if combinations failed to load\n  if (combinationsResult.isFailure()) {\n    return null;\n  }\n\n  // Render panel or modal based on mode\n  if (mode === 'panel') {\n    return (\n      <KillerCombinationsPanel\n        cage={selectedCage}\n        combinations={displayCombinations}\n        onToggle={toggleElimination}\n        onClose={onClose}\n        isOpen={isOpen}\n        className={className}\n      />\n    );\n  }\n\n  return (\n    <KillerCombinationsModal\n      cage={selectedCage}\n      combinations={displayCombinations}\n      onToggle={toggleElimination}\n      onClose={onClose}\n      isOpen={isOpen}\n      className={className}\n    />\n  );\n};\n"]}

package/lib-commonjs/components/KillerCombinationsModal.js

@@ -0,0 +1,140 @@
+"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.KillerCombinationsModal = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const CombinationGrid_1 = require("./CombinationGrid");
+/**
+ * Mobile modal variant for killer combinations explorer
+ * @public
+ */
+const KillerCombinationsModal = ({ cage, combinations, onToggle, onClose, isOpen, className }) => {
+    const modalRef = (0, react_1.useRef)(null);
+    // 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]);
+    // Lock body scroll when modal is open
+    (0, react_1.useEffect)(() => {
+        if (isOpen) {
+            const originalOverflow = document.body.style.overflow;
+            document.body.style.overflow = 'hidden';
+            return () => {
+                document.body.style.overflow = originalOverflow;
+            };
+        }
+    }, [isOpen]);
+    // Focus trap and initial focus
+    (0, react_1.useEffect)(() => {
+        if (isOpen && modalRef.current) {
+            const focusableElements = modalRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+            const firstElement = focusableElements[0];
+            const lastElement = focusableElements[focusableElements.length - 1];
+            firstElement?.focus();
+            const handleTab = (event) => {
+                if (event.key === 'Tab') {
+                    if (event.shiftKey) {
+                        if (document.activeElement === firstElement) {
+                            event.preventDefault();
+                            lastElement?.focus();
+                        }
+                    }
+                    else {
+                        if (document.activeElement === lastElement) {
+                            event.preventDefault();
+                            firstElement?.focus();
+                        }
+                    }
+                }
+            };
+            window.addEventListener('keydown', handleTab);
+            return () => window.removeEventListener('keydown', handleTab);
+        }
+    }, [isOpen]);
+    if (!isOpen) {
+        return null;
+    }
+    const activeCount = combinations.filter((c) => !c.isEliminated).length;
+    const totalCount = combinations.length;
+    /* c8 ignore next 1 - defense in depth */
+    const opacity = isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none';
+    const overlayClasses = [
+        'fixed inset-0 z-[9999]',
+        'flex items-end sm:items-center justify-center',
+        'p-4',
+        'bg-black bg-opacity-40',
+        'transition-opacity duration-300',
+        opacity
+    ]
+        .filter(Boolean)
+        .join(' ');
+    /* c8 ignore next 1 - defense in depth */
+    const translation = isOpen ? 'translate-y-0' : 'translate-y-full';
+    const dialogClasses = [
+        'bg-white dark:bg-gray-900',
+        'rounded-t-2xl sm:rounded-2xl',
+        'w-full max-w-lg',
+        'max-h-[85vh]',
+        'overflow-hidden',
+        'flex flex-col',
+        'shadow-2xl',
+        'transform transition-transform duration-300',
+        translation,
+        className
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (react_1.default.createElement("div", { className: overlayClasses, onClick: onClose, role: "presentation" },
+        react_1.default.createElement("div", { ref: modalRef, className: dialogClasses, onClick: (e) => e.stopPropagation(), role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-title", "aria-describedby": "modal-description" },
+            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", { id: "modal-title", className: "text-lg font-semibold text-gray-900 dark:text-gray-100" }, "Combinations"),
+                    react_1.default.createElement("p", { id: "modal-description", 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 modal" },
+                    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: "modal" })))));
+};
+exports.KillerCombinationsModal = KillerCombinationsModal;
+//# sourceMappingURL=KillerCombinationsModal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KillerCombinationsModal.js","sourceRoot":"","sources":["../../src/components/KillerCombinationsModal.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, { useEffect, useRef } from 'react';\nimport { ICage } from '@fgv/ts-sudoku-lib';\nimport { ICombinationDisplayInfo } from '../types';\nimport { CombinationGrid } from './CombinationGrid';\n\n/**\n * Props for the KillerCombinationsModal component\n */\nexport interface IKillerCombinationsModalProps {\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 * Mobile modal variant for killer combinations explorer\n * @public\n */\nexport const KillerCombinationsModal: React.FC<IKillerCombinationsModalProps> = ({\n  cage,\n  combinations,\n  onToggle,\n  onClose,\n  isOpen,\n  className\n}) => {\n  const modalRef = useRef<HTMLDivElement>(null);\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  // Lock body scroll when modal is open\n  useEffect(() => {\n    if (isOpen) {\n      const originalOverflow = document.body.style.overflow;\n      document.body.style.overflow = 'hidden';\n      return () => {\n        document.body.style.overflow = originalOverflow;\n      };\n    }\n  }, [isOpen]);\n\n  // Focus trap and initial focus\n  useEffect(() => {\n    if (isOpen && modalRef.current) {\n      const focusableElements = modalRef.current.querySelectorAll<HTMLElement>(\n        'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n      );\n      const firstElement = focusableElements[0];\n      const lastElement = focusableElements[focusableElements.length - 1];\n\n      firstElement?.focus();\n\n      const handleTab = (event: KeyboardEvent): void => {\n        if (event.key === 'Tab') {\n          if (event.shiftKey) {\n            if (document.activeElement === firstElement) {\n              event.preventDefault();\n              lastElement?.focus();\n            }\n          } else {\n            if (document.activeElement === lastElement) {\n              event.preventDefault();\n              firstElement?.focus();\n            }\n          }\n        }\n      };\n\n      window.addEventListener('keydown', handleTab);\n      return () => window.removeEventListener('keydown', handleTab);\n    }\n  }, [isOpen]);\n\n  if (!isOpen) {\n    return null;\n  }\n\n  const activeCount = combinations.filter((c) => !c.isEliminated).length;\n  const totalCount = combinations.length;\n\n  /* c8 ignore next 1 - defense in depth */\n  const opacity = isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none';\n  const overlayClasses = [\n    'fixed inset-0 z-[9999]',\n    'flex items-end sm:items-center justify-center',\n    'p-4',\n    'bg-black bg-opacity-40',\n    'transition-opacity duration-300',\n    opacity\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  /* c8 ignore next 1 - defense in depth */\n  const translation = isOpen ? 'translate-y-0' : 'translate-y-full';\n  const dialogClasses = [\n    'bg-white dark:bg-gray-900',\n    'rounded-t-2xl sm:rounded-2xl',\n    'w-full max-w-lg',\n    'max-h-[85vh]',\n    'overflow-hidden',\n    'flex flex-col',\n    'shadow-2xl',\n    'transform transition-transform duration-300',\n    translation,\n    className\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={overlayClasses} onClick={onClose} role=\"presentation\">\n      <div\n        ref={modalRef}\n        className={dialogClasses}\n        onClick={(e) => e.stopPropagation()}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby=\"modal-title\"\n        aria-describedby=\"modal-description\"\n      >\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 id=\"modal-title\" className=\"text-lg font-semibold text-gray-900 dark:text-gray-100\">\n              Combinations\n            </h2>\n            <p id=\"modal-description\" 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 modal\"\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=\"modal\" />\n        </div>\n      </div>\n    </div>\n  );\n};\n"]}

package/lib-commonjs/components/KillerCombinationsPanel.js

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

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

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

@@ -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"]}