@fgv/ts-sudoku-ui 0.1.0

package/lib-commonjs/components/CageSumIndicator.js

@@ -0,0 +1,71 @@
+"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.CageSumIndicator = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+/**
+ * Component for displaying the target sum of a cage in Killer Sudoku
+ * @public
+ */
+const CageSumIndicator = ({ cage, currentSum, isComplete, isValid, position, className }) => {
+    // Calculate display classes based on state
+    const displayClasses = (0, react_1.useMemo)(() => {
+        const classes = ['cage-sum-indicator'];
+        /* c8 ignore next 1 - defense in depth */
+        if (className)
+            classes.push(className);
+        if (!isValid) {
+            classes.push('cage-sum-indicator--invalid');
+        }
+        else if (isComplete) {
+            classes.push('cage-sum-indicator--complete');
+        }
+        else if (currentSum !== undefined) {
+            classes.push('cage-sum-indicator--partial');
+        }
+        return classes.join(' ');
+    }, [className, isValid, isComplete, currentSum]);
+    return (react_1.default.createElement("div", { className: `
+        ${displayClasses}
+        absolute z-20 pointer-events-none
+        text-xs font-bold
+        bg-white border border-gray-400 rounded px-1
+        min-w-[20px] text-center
+        shadow-sm
+      `, style: {
+            top: `${position.top}%`,
+            left: `${position.left}%`,
+            fontSize: '10px',
+            lineHeight: '16px'
+        }, "data-testid": `cage-sum-${cage.id}` },
+        react_1.default.createElement("div", { className: "text-gray-700" }, cage.total),
+        currentSum !== undefined && (react_1.default.createElement("div", { className: `
+            text-xs
+            ${isValid ? 'text-blue-600' : 'text-red-600'}
+          `, style: { fontSize: '8px', lineHeight: '10px' } }, currentSum))));
+};
+exports.CageSumIndicator = CageSumIndicator;
+//# sourceMappingURL=CageSumIndicator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CageSumIndicator.js","sourceRoot":"","sources":["../../src/components/CageSumIndicator.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;;;;AAEH,uDAAuC;AAGvC;;;GAGG;AACI,MAAM,gBAAgB,GAAqC,CAAC,EACjE,IAAI,EACJ,UAAU,EACV,UAAU,EACV,OAAO,EACP,QAAQ,EACR,SAAS,EACV,EAAE,EAAE;IACH,2CAA2C;IAC3C,MAAM,cAAc,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAClC,MAAM,OAAO,GAAG,CAAC,oBAAoB,CAAC,CAAC;QAEvC,yCAAyC;QACzC,IAAI,SAAS;YAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAEvC,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC;QAC9C,CAAC;aAAM,IAAI,UAAU,EAAE,CAAC;YACtB,OAAO,CAAC,IAAI,CAAC,8BAA8B,CAAC,CAAC;QAC/C,CAAC;aAAM,IAAI,UAAU,KAAK,SAAS,EAAE,CAAC;YACpC,OAAO,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC;QAC9C,CAAC;QAED,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC;IAEjD,OAAO,CACL,uCACE,SAAS,EAAE;UACP,cAAc;;;;;;OAMjB,EACD,KAAK,EAAE;YACL,GAAG,EAAE,GAAG,QAAQ,CAAC,GAAG,GAAG;YACvB,IAAI,EAAE,GAAG,QAAQ,CAAC,IAAI,GAAG;YACzB,QAAQ,EAAE,MAAM;YAChB,UAAU,EAAE,MAAM;SACnB,iBACY,YAAY,IAAI,CAAC,EAAE,EAAE;QAElC,uCAAK,SAAS,EAAC,eAAe,IAAE,IAAI,CAAC,KAAK,CAAO;QAChD,UAAU,KAAK,SAAS,IAAI,CAC3B,uCACE,SAAS,EAAE;;cAEP,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc;WAC7C,EACD,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,IAE7C,UAAU,CACP,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AA1DW,QAAA,gBAAgB,oBA0D3B","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 { ICageSumIndicatorProps } from '../types';\n\n/**\n * Component for displaying the target sum of a cage in Killer Sudoku\n * @public\n */\nexport const CageSumIndicator: React.FC<ICageSumIndicatorProps> = ({\n  cage,\n  currentSum,\n  isComplete,\n  isValid,\n  position,\n  className\n}) => {\n  // Calculate display classes based on state\n  const displayClasses = useMemo(() => {\n    const classes = ['cage-sum-indicator'];\n\n    /* c8 ignore next 1 - defense in depth */\n    if (className) classes.push(className);\n\n    if (!isValid) {\n      classes.push('cage-sum-indicator--invalid');\n    } else if (isComplete) {\n      classes.push('cage-sum-indicator--complete');\n    } else if (currentSum !== undefined) {\n      classes.push('cage-sum-indicator--partial');\n    }\n\n    return classes.join(' ');\n  }, [className, isValid, isComplete, currentSum]);\n\n  return (\n    <div\n      className={`\n        ${displayClasses}\n        absolute z-20 pointer-events-none\n        text-xs font-bold\n        bg-white border border-gray-400 rounded px-1\n        min-w-[20px] text-center\n        shadow-sm\n      `}\n      style={{\n        top: `${position.top}%`,\n        left: `${position.left}%`,\n        fontSize: '10px',\n        lineHeight: '16px'\n      }}\n      data-testid={`cage-sum-${cage.id}`}\n    >\n      <div className=\"text-gray-700\">{cage.total}</div>\n      {currentSum !== undefined && (\n        <div\n          className={`\n            text-xs\n            ${isValid ? 'text-blue-600' : 'text-red-600'}\n          `}\n          style={{ fontSize: '8px', lineHeight: '10px' }}\n        >\n          {currentSum}\n        </div>\n      )}\n    </div>\n  );\n};\n"]}

package/lib-commonjs/components/CombinationCard.js

@@ -0,0 +1,68 @@
+"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.CombinationCard = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+/**
+ * Individual combination card component with toggle functionality
+ * @public
+ */
+exports.CombinationCard = react_1.default.memo(({ combination, onToggle, className }) => {
+    const { combination: numbers, signature, isEliminated } = combination;
+    const handleClick = (0, react_1.useCallback)(() => {
+        onToggle(signature);
+    }, [onToggle, signature]);
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            onToggle(signature);
+        }
+    }, [onToggle, signature]);
+    const cardClasses = [
+        'px-3 py-1',
+        'rounded border',
+        'transition-all duration-200',
+        'cursor-pointer select-none',
+        'hover:shadow-sm',
+        'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1',
+        'inline-flex items-center justify-center',
+        isEliminated
+            ? 'border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 opacity-60'
+            : 'border-blue-500 dark:border-blue-400 bg-white dark:bg-gray-800 hover:bg-blue-50 dark:hover:bg-gray-700',
+        className
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const numberDisplay = numbers.join('');
+    const ariaLabel = numbers.join(', ');
+    return (react_1.default.createElement("button", { type: "button", className: cardClasses, onClick: handleClick, onKeyDown: handleKeyDown, "aria-pressed": isEliminated, "aria-label": `Combination ${ariaLabel}${isEliminated ? ' (eliminated)' : ''}`, role: "button" },
+        react_1.default.createElement("span", { className: `text-sm font-mono font-bold ${isEliminated ? 'text-gray-500 dark:text-gray-400 line-through' : 'text-gray-900 dark:text-white'}` }, numberDisplay)));
+}, (prev, next) => {
+    return (prev.combination.signature === next.combination.signature &&
+        prev.combination.isEliminated === next.combination.isEliminated);
+});
+exports.CombinationCard.displayName = 'CombinationCard';
+//# sourceMappingURL=CombinationCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CombinationCard.js","sourceRoot":"","sources":["../../src/components/CombinationCard.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;;;;AAEH,uDAA2C;AAG3C;;;GAGG;AACU,QAAA,eAAe,GAC1B,eAAK,CAAC,IAAI,CACR,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;IACvC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,WAAW,CAAC;IAEtE,MAAM,WAAW,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACnC,QAAQ,CAAC,SAAS,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC;IAE1B,MAAM,aAAa,GAAG,IAAA,mBAAW,EAC/B,CAAC,KAA0B,EAAE,EAAE;QAC7B,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,QAAQ,CAAC,SAAS,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,SAAS,CAAC,CACtB,CAAC;IAEF,MAAM,WAAW,GAAW;QAC1B,WAAW;QACX,gBAAgB;QAChB,6BAA6B;QAC7B,4BAA4B;QAC5B,iBAAiB;QACjB,yEAAyE;QACzE,yCAAyC;QACzC,YAAY;YACV,CAAC,CAAC,6EAA6E;YAC/E,CAAC,CAAC,wGAAwG;QAC5G,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAErC,OAAO,CACL,0CACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,kBACV,YAAY,gBACd,eAAe,SAAS,GAAG,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,EAAE,EAC5E,IAAI,EAAC,QAAQ;QAEb,wCACE,SAAS,EAAE,+BACT,YAAY,CAAC,CAAC,CAAC,+CAA+C,CAAC,CAAC,CAAC,+BACnE,EAAE,IAED,aAAa,CACT,CACA,CACV,CAAC;AACJ,CAAC,EACD,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;IACb,OAAO,CACL,IAAI,CAAC,WAAW,CAAC,SAAS,KAAK,IAAI,CAAC,WAAW,CAAC,SAAS;QACzD,IAAI,CAAC,WAAW,CAAC,YAAY,KAAK,IAAI,CAAC,WAAW,CAAC,YAAY,CAChE,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,uBAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","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 } from 'react';\nimport { ICombinationCardProps } from '../types';\n\n/**\n * Individual combination card component with toggle functionality\n * @public\n */\nexport const CombinationCard: React.NamedExoticComponent<ICombinationCardProps> =\n  React.memo<ICombinationCardProps>(\n    ({ combination, onToggle, className }) => {\n      const { combination: numbers, signature, isEliminated } = combination;\n\n      const handleClick = useCallback(() => {\n        onToggle(signature);\n      }, [onToggle, signature]);\n\n      const handleKeyDown = useCallback(\n        (event: React.KeyboardEvent) => {\n          if (event.key === ' ' || event.key === 'Enter') {\n            event.preventDefault();\n            onToggle(signature);\n          }\n        },\n        [onToggle, signature]\n      );\n\n      const cardClasses: string = [\n        'px-3 py-1',\n        'rounded border',\n        'transition-all duration-200',\n        'cursor-pointer select-none',\n        'hover:shadow-sm',\n        'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1',\n        'inline-flex items-center justify-center',\n        isEliminated\n          ? 'border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 opacity-60'\n          : 'border-blue-500 dark:border-blue-400 bg-white dark:bg-gray-800 hover:bg-blue-50 dark:hover:bg-gray-700',\n        className\n      ]\n        .filter(Boolean)\n        .join(' ');\n\n      const numberDisplay = numbers.join('');\n      const ariaLabel = numbers.join(', ');\n\n      return (\n        <button\n          type=\"button\"\n          className={cardClasses}\n          onClick={handleClick}\n          onKeyDown={handleKeyDown}\n          aria-pressed={isEliminated}\n          aria-label={`Combination ${ariaLabel}${isEliminated ? ' (eliminated)' : ''}`}\n          role=\"button\"\n        >\n          <span\n            className={`text-sm font-mono font-bold ${\n              isEliminated ? 'text-gray-500 dark:text-gray-400 line-through' : 'text-gray-900 dark:text-white'\n            }`}\n          >\n            {numberDisplay}\n          </span>\n        </button>\n      );\n    },\n    (prev, next) => {\n      return (\n        prev.combination.signature === next.combination.signature &&\n        prev.combination.isEliminated === next.combination.isEliminated\n      );\n    }\n  );\n\nCombinationCard.displayName = 'CombinationCard';\n"]}

package/lib-commonjs/components/CombinationGrid.js

@@ -0,0 +1,56 @@
+"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.CombinationGrid = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const CombinationCard_1 = require("./CombinationCard");
+/**
+ * Grid layout component for displaying combination cards
+ * @public
+ */
+const CombinationGrid = ({ combinations, onToggle, mode, className }) => {
+    const gridClasses = ['flex flex-wrap gap-2 p-4', 'overflow-y-auto', 'justify-start', className]
+        .filter(Boolean)
+        .join(' ');
+    if (combinations.length === 0) {
+        return (react_1.default.createElement("div", { className: "flex items-center justify-center p-8 text-gray-500 dark:text-gray-400" },
+            react_1.default.createElement("p", null, "No combinations available for this cage")));
+    }
+    // Sort combinations: valid ones first, then by numeric value
+    const sortedCombinations = [...combinations].sort((a, b) => {
+        // First sort by elimination status (valid ones first)
+        if (a.isEliminated !== b.isEliminated) {
+            return a.isEliminated ? 1 : -1;
+        }
+        // Then sort by the numeric value of the combination
+        const aValue = parseInt(a.combination.join(''), 10);
+        const bValue = parseInt(b.combination.join(''), 10);
+        return aValue - bValue;
+    });
+    return (react_1.default.createElement("div", { className: gridClasses }, sortedCombinations.map((combo) => (react_1.default.createElement(CombinationCard_1.CombinationCard, { key: combo.signature, combination: combo, onToggle: onToggle })))));
+};
+exports.CombinationGrid = CombinationGrid;
+//# sourceMappingURL=CombinationGrid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CombinationGrid.js","sourceRoot":"","sources":["../../src/components/CombinationGrid.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;;;;AAEH,0DAA0B;AAE1B,uDAAoD;AAEpD;;;GAGG;AACI,MAAM,eAAe,GAAoC,CAAC,EAC/D,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,SAAS,EACV,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,CAAC,0BAA0B,EAAE,iBAAiB,EAAE,eAAe,EAAE,SAAS,CAAC;SAC5F,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC9B,OAAO,CACL,uCAAK,SAAS,EAAC,uEAAuE;YACpF,mFAA8C,CAC1C,CACP,CAAC;IACJ,CAAC;IAED,6DAA6D;IAC7D,MAAM,kBAAkB,GAAG,CAAC,GAAG,YAAY,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACzD,sDAAsD;QACtD,IAAI,CAAC,CAAC,YAAY,KAAK,CAAC,CAAC,YAAY,EAAE,CAAC;YACtC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACjC,CAAC;QACD,oDAAoD;QACpD,MAAM,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;QACpD,MAAM,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;QACpD,OAAO,MAAM,GAAG,MAAM,CAAC;IACzB,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,uCAAK,SAAS,EAAE,WAAW,IACxB,kBAAkB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACjC,8BAAC,iCAAe,IAAC,GAAG,EAAE,KAAK,CAAC,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAClF,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AArCW,QAAA,eAAe,mBAqC1B","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 from 'react';\nimport { ICombinationGridProps } from '../types';\nimport { CombinationCard } from './CombinationCard';\n\n/**\n * Grid layout component for displaying combination cards\n * @public\n */\nexport const CombinationGrid: React.FC<ICombinationGridProps> = ({\n  combinations,\n  onToggle,\n  mode,\n  className\n}) => {\n  const gridClasses = ['flex flex-wrap gap-2 p-4', 'overflow-y-auto', 'justify-start', className]\n    .filter(Boolean)\n    .join(' ');\n\n  if (combinations.length === 0) {\n    return (\n      <div className=\"flex items-center justify-center p-8 text-gray-500 dark:text-gray-400\">\n        <p>No combinations available for this cage</p>\n      </div>\n    );\n  }\n\n  // Sort combinations: valid ones first, then by numeric value\n  const sortedCombinations = [...combinations].sort((a, b) => {\n    // First sort by elimination status (valid ones first)\n    if (a.isEliminated !== b.isEliminated) {\n      return a.isEliminated ? 1 : -1;\n    }\n    // Then sort by the numeric value of the combination\n    const aValue = parseInt(a.combination.join(''), 10);\n    const bValue = parseInt(b.combination.join(''), 10);\n    return aValue - bValue;\n  });\n\n  return (\n    <div className={gridClasses}>\n      {sortedCombinations.map((combo) => (\n        <CombinationCard key={combo.signature} combination={combo} onToggle={onToggle} />\n      ))}\n    </div>\n  );\n};\n"]}

package/lib-commonjs/components/CompactControlRibbon.js

@@ -0,0 +1,146 @@
+"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.CompactControlRibbon = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const useResponsiveLayout_1 = require("../hooks/useResponsiveLayout");
+/**
+ * Compact control ribbon with icon-only badges for actions and status indicator
+ * @public
+ */
+const CompactControlRibbon = ({ canUndo, canRedo, canReset, isValid, isSolved, validationErrors, onUndo, onRedo, onReset, onExport, showCombinations, canShowCombinations, onCombinations, className }) => {
+    const [showResetConfirm, setShowResetConfirm] = (0, react_1.useState)(false);
+    const responsiveLayout = (0, useResponsiveLayout_1.useResponsiveLayout)();
+    // Handle reset with confirmation
+    const handleResetClick = (0, react_1.useCallback)(() => {
+        if (showResetConfirm) {
+            onReset();
+            setShowResetConfirm(false);
+        }
+        else {
+            setShowResetConfirm(true);
+            // Auto-hide confirmation after 3 seconds
+            setTimeout(() => setShowResetConfirm(false), 3000);
+        }
+    }, [showResetConfirm, onReset]);
+    // Cancel reset confirmation
+    const handleCancelReset = (0, react_1.useCallback)(() => {
+        setShowResetConfirm(false);
+    }, []);
+    // Calculate if we should use mobile layout
+    const isMobileLayout = responsiveLayout.deviceType === 'mobile' &&
+        (responsiveLayout.keypadLayoutMode === 'side-by-side' || responsiveLayout.keypadLayoutMode === 'stacked');
+    // Calculate container classes
+    const containerClasses = (0, react_1.useMemo)(() => {
+        const classes = [
+            'flex items-center justify-center gap-3 p-2 bg-gray-50 border border-gray-200 rounded-lg shadow-sm'
+        ];
+        if (isMobileLayout) {
+            classes.push('gap-2 p-1.5');
+        }
+        if (className)
+            classes.push(className);
+        return classes.join(' ');
+    }, [isMobileLayout, className]);
+    // Calculate button classes
+    const getButtonClasses = (0, react_1.useCallback)((isEnabled, variant = 'default') => {
+        const classes = [
+            'flex items-center justify-center rounded-full transition-all duration-150 font-medium text-sm border-2'
+        ];
+        // Size based on layout
+        if (isMobileLayout) {
+            classes.push('w-8 h-8 text-xs');
+        }
+        else {
+            classes.push('w-10 h-10 text-sm');
+        }
+        // Variant and state styling
+        if (!isEnabled) {
+            classes.push('border-gray-300 text-gray-400 bg-gray-100 cursor-not-allowed');
+        }
+        else {
+            switch (variant) {
+                case 'danger':
+                    classes.push('border-red-500 text-red-600 bg-red-50 hover:bg-red-100 active:bg-red-200 cursor-pointer');
+                    break;
+                case 'success':
+                    classes.push('border-green-500 text-green-600 bg-green-50 hover:bg-green-100 active:bg-green-200 cursor-pointer');
+                    break;
+                default:
+                    classes.push('border-blue-500 text-blue-600 bg-blue-50 hover:bg-blue-100 active:bg-blue-200 cursor-pointer');
+                    break;
+            }
+        }
+        return classes.join(' ');
+    }, [isMobileLayout]);
+    // Calculate status indicator classes and content
+    const statusIndicator = (0, react_1.useMemo)(() => {
+        const classes = ['flex items-center justify-center rounded-full border-2 font-bold'];
+        // Size based on layout
+        if (isMobileLayout) {
+            classes.push('w-8 h-8 text-xs');
+        }
+        else {
+            classes.push('w-10 h-10 text-sm');
+        }
+        let content;
+        let title;
+        if (isSolved) {
+            classes.push('border-green-500 text-green-700 bg-green-100');
+            content = '✓';
+            title = 'Puzzle solved!';
+        }
+        else if (isValid) {
+            classes.push('border-green-500 text-green-700 bg-green-100');
+            content = '✓';
+            title = 'Puzzle is valid';
+        }
+        else {
+            classes.push('border-red-500 text-red-700 bg-red-100');
+            content = validationErrors.length.toString();
+            title = `${validationErrors.length} validation error${validationErrors.length === 1 ? '' : 's'}`;
+        }
+        return {
+            className: classes.join(' '),
+            content,
+            title
+        };
+    }, [isSolved, isValid, validationErrors.length, isMobileLayout]);
+    return (react_1.default.createElement("div", { className: containerClasses, "data-testid": "compact-control-ribbon", role: "toolbar", "aria-label": "Puzzle controls" },
+        react_1.default.createElement("div", { className: statusIndicator.className, title: statusIndicator.title, "aria-label": statusIndicator.title, "data-testid": "status-indicator" }, statusIndicator.content),
+        react_1.default.createElement("div", { className: "w-px h-6 bg-gray-300" }),
+        react_1.default.createElement("button", { type: "button", onClick: onExport, className: getButtonClasses(true, 'success'), title: "Export puzzle", "aria-label": "Export puzzle in compatible format", "data-testid": "compact-export-button" }, "\uD83D\uDCE4"),
+        showCombinations && onCombinations && (react_1.default.createElement("button", { type: "button", onClick: onCombinations, disabled: !canShowCombinations, className: getButtonClasses(canShowCombinations ?? false), title: canShowCombinations ? 'Show cage combinations (Ctrl/Cmd+K)' : 'Select cells from a single cage', "aria-label": canShowCombinations ? 'Show combinations for selected cage' : 'No cage selected', "data-testid": "compact-combinations-button" },
+            react_1.default.createElement("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" },
+                react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" })))),
+        !showResetConfirm ? (react_1.default.createElement("button", { type: "button", onClick: handleResetClick, disabled: !canReset, className: getButtonClasses(canReset, 'danger'), title: "Reset puzzle", "aria-label": "Clear all entries", "data-testid": "compact-reset-button" }, "\uD83D\uDDD1\uFE0F")) : (react_1.default.createElement("div", { className: "flex items-center gap-1" },
+            react_1.default.createElement("button", { type: "button", onClick: handleResetClick, className: getButtonClasses(true, 'danger'), title: "Confirm reset - this will clear all entries", "aria-label": "Confirm reset", "data-testid": "compact-confirm-reset-button" }, "\u2713"),
+            react_1.default.createElement("button", { type: "button", onClick: handleCancelReset, className: getButtonClasses(true), title: "Cancel reset", "aria-label": "Cancel reset", "data-testid": "compact-cancel-reset-button" }, "\u2715"))),
+        react_1.default.createElement("button", { type: "button", onClick: onUndo, disabled: !canUndo, className: getButtonClasses(canUndo), title: "Undo last action", "aria-label": "Undo last action", "data-testid": "compact-undo-button" }, "\u21B6"),
+        react_1.default.createElement("button", { type: "button", onClick: onRedo, disabled: !canRedo, className: getButtonClasses(canRedo), title: "Redo last undone action", "aria-label": "Redo last undone action", "data-testid": "compact-redo-button" }, "\u21B7")));
+};
+exports.CompactControlRibbon = CompactControlRibbon;
+//# sourceMappingURL=CompactControlRibbon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CompactControlRibbon.js","sourceRoot":"","sources":["../../src/components/CompactControlRibbon.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * MIT License\n *\n * Copyright (c) 2023 Erik Fortune\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { useResponsiveLayout } from '../hooks/useResponsiveLayout';\n\n/**\n * Props for the CompactControlRibbon component\n * @public\n */\nexport interface ICompactControlRibbonProps {\n  /** Whether undo is available */\n  readonly canUndo: boolean;\n\n  /** Whether redo is available */\n  readonly canRedo: boolean;\n\n  /** Whether reset is available */\n  readonly canReset: boolean;\n\n  /** Whether the puzzle is valid */\n  readonly isValid: boolean;\n\n  /** Whether the puzzle is solved */\n  readonly isSolved: boolean;\n\n  /** Validation errors for error count display */\n  readonly validationErrors: ReadonlyArray<{\n    readonly type: string;\n    readonly cellId: string;\n    readonly message: string;\n  }>;\n\n  /** Callback for undo action */\n  readonly onUndo: () => void;\n\n  /** Callback for redo action */\n  readonly onRedo: () => void;\n\n  /** Callback for reset action */\n  readonly onReset: () => void;\n\n  /** Callback for export action */\n  readonly onExport: () => void;\n\n  /** Whether to show combinations button (for killer sudoku) */\n  readonly showCombinations?: boolean;\n\n  /** Whether combinations button should be enabled */\n  readonly canShowCombinations?: boolean;\n\n  /** Callback for combinations action */\n  readonly onCombinations?: () => void;\n\n  /** Additional CSS class name */\n  readonly className?: string;\n}\n\n/**\n * Compact control ribbon with icon-only badges for actions and status indicator\n * @public\n */\nexport const CompactControlRibbon: React.FC<ICompactControlRibbonProps> = ({\n  canUndo,\n  canRedo,\n  canReset,\n  isValid,\n  isSolved,\n  validationErrors,\n  onUndo,\n  onRedo,\n  onReset,\n  onExport,\n  showCombinations,\n  canShowCombinations,\n  onCombinations,\n  className\n}) => {\n  const [showResetConfirm, setShowResetConfirm] = useState(false);\n  const responsiveLayout = useResponsiveLayout();\n\n  // Handle reset with confirmation\n  const handleResetClick = useCallback(() => {\n    if (showResetConfirm) {\n      onReset();\n      setShowResetConfirm(false);\n    } else {\n      setShowResetConfirm(true);\n      // Auto-hide confirmation after 3 seconds\n      setTimeout(() => setShowResetConfirm(false), 3000);\n    }\n  }, [showResetConfirm, onReset]);\n\n  // Cancel reset confirmation\n  const handleCancelReset = useCallback(() => {\n    setShowResetConfirm(false);\n  }, []);\n\n  // Calculate if we should use mobile layout\n  const isMobileLayout =\n    responsiveLayout.deviceType === 'mobile' &&\n    (responsiveLayout.keypadLayoutMode === 'side-by-side' || responsiveLayout.keypadLayoutMode === 'stacked');\n\n  // Calculate container classes\n  const containerClasses = useMemo(() => {\n    const classes = [\n      'flex items-center justify-center gap-3 p-2 bg-gray-50 border border-gray-200 rounded-lg shadow-sm'\n    ];\n\n    if (isMobileLayout) {\n      classes.push('gap-2 p-1.5');\n    }\n\n    if (className) classes.push(className);\n    return classes.join(' ');\n  }, [isMobileLayout, className]);\n\n  // Calculate button classes\n  const getButtonClasses = useCallback(\n    (isEnabled: boolean, variant: 'default' | 'danger' | 'success' = 'default') => {\n      const classes = [\n        'flex items-center justify-center rounded-full transition-all duration-150 font-medium text-sm border-2'\n      ];\n\n      // Size based on layout\n      if (isMobileLayout) {\n        classes.push('w-8 h-8 text-xs');\n      } else {\n        classes.push('w-10 h-10 text-sm');\n      }\n\n      // Variant and state styling\n      if (!isEnabled) {\n        classes.push('border-gray-300 text-gray-400 bg-gray-100 cursor-not-allowed');\n      } else {\n        switch (variant) {\n          case 'danger':\n            classes.push(\n              'border-red-500 text-red-600 bg-red-50 hover:bg-red-100 active:bg-red-200 cursor-pointer'\n            );\n            break;\n          case 'success':\n            classes.push(\n              'border-green-500 text-green-600 bg-green-50 hover:bg-green-100 active:bg-green-200 cursor-pointer'\n            );\n            break;\n          default:\n            classes.push(\n              'border-blue-500 text-blue-600 bg-blue-50 hover:bg-blue-100 active:bg-blue-200 cursor-pointer'\n            );\n            break;\n        }\n      }\n\n      return classes.join(' ');\n    },\n    [isMobileLayout]\n  );\n\n  // Calculate status indicator classes and content\n  const statusIndicator = useMemo(() => {\n    const classes = ['flex items-center justify-center rounded-full border-2 font-bold'];\n\n    // Size based on layout\n    if (isMobileLayout) {\n      classes.push('w-8 h-8 text-xs');\n    } else {\n      classes.push('w-10 h-10 text-sm');\n    }\n\n    let content: string;\n    let title: string;\n\n    if (isSolved) {\n      classes.push('border-green-500 text-green-700 bg-green-100');\n      content = '✓';\n      title = 'Puzzle solved!';\n    } else if (isValid) {\n      classes.push('border-green-500 text-green-700 bg-green-100');\n      content = '✓';\n      title = 'Puzzle is valid';\n    } else {\n      classes.push('border-red-500 text-red-700 bg-red-100');\n      content = validationErrors.length.toString();\n      title = `${validationErrors.length} validation error${validationErrors.length === 1 ? '' : 's'}`;\n    }\n\n    return {\n      className: classes.join(' '),\n      content,\n      title\n    };\n  }, [isSolved, isValid, validationErrors.length, isMobileLayout]);\n\n  return (\n    <div\n      className={containerClasses}\n      data-testid=\"compact-control-ribbon\"\n      role=\"toolbar\"\n      aria-label=\"Puzzle controls\"\n    >\n      {/* Status Indicator */}\n      <div\n        className={statusIndicator.className}\n        title={statusIndicator.title}\n        aria-label={statusIndicator.title}\n        data-testid=\"status-indicator\"\n      >\n        {statusIndicator.content}\n      </div>\n\n      {/* Separator */}\n      <div className=\"w-px h-6 bg-gray-300\" />\n\n      {/* Export Button */}\n      <button\n        type=\"button\"\n        onClick={onExport}\n        className={getButtonClasses(true, 'success')}\n        title=\"Export puzzle\"\n        aria-label=\"Export puzzle in compatible format\"\n        data-testid=\"compact-export-button\"\n      >\n        📤\n      </button>\n\n      {/* Combinations Button (for killer sudoku) */}\n      {showCombinations && onCombinations && (\n        <button\n          type=\"button\"\n          onClick={onCombinations}\n          disabled={!canShowCombinations}\n          className={getButtonClasses(canShowCombinations ?? false)}\n          title={\n            canShowCombinations ? 'Show cage combinations (Ctrl/Cmd+K)' : 'Select cells from a single cage'\n          }\n          aria-label={canShowCombinations ? 'Show combinations for selected cage' : 'No cage selected'}\n          data-testid=\"compact-combinations-button\"\n        >\n          <svg className=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z\"\n            />\n          </svg>\n        </button>\n      )}\n\n      {/* Reset Button */}\n      {!showResetConfirm ? (\n        <button\n          type=\"button\"\n          onClick={handleResetClick}\n          disabled={!canReset}\n          className={getButtonClasses(canReset, 'danger')}\n          title=\"Reset puzzle\"\n          aria-label=\"Clear all entries\"\n          data-testid=\"compact-reset-button\"\n        >\n          🗑️\n        </button>\n      ) : (\n        <div className=\"flex items-center gap-1\">\n          <button\n            type=\"button\"\n            onClick={handleResetClick}\n            className={getButtonClasses(true, 'danger')}\n            title=\"Confirm reset - this will clear all entries\"\n            aria-label=\"Confirm reset\"\n            data-testid=\"compact-confirm-reset-button\"\n          >\n            ✓\n          </button>\n          <button\n            type=\"button\"\n            onClick={handleCancelReset}\n            className={getButtonClasses(true)}\n            title=\"Cancel reset\"\n            aria-label=\"Cancel reset\"\n            data-testid=\"compact-cancel-reset-button\"\n          >\n            ✕\n          </button>\n        </div>\n      )}\n\n      {/* Undo Button */}\n      <button\n        type=\"button\"\n        onClick={onUndo}\n        disabled={!canUndo}\n        className={getButtonClasses(canUndo)}\n        title=\"Undo last action\"\n        aria-label=\"Undo last action\"\n        data-testid=\"compact-undo-button\"\n      >\n        ↶\n      </button>\n\n      {/* Redo Button */}\n      <button\n        type=\"button\"\n        onClick={onRedo}\n        disabled={!canRedo}\n        className={getButtonClasses(canRedo)}\n        title=\"Redo last undone action\"\n        aria-label=\"Redo last undone action\"\n        data-testid=\"compact-redo-button\"\n      >\n        ↷\n      </button>\n    </div>\n  );\n};\n"]}

package/lib-commonjs/components/DualKeypad.js

@@ -0,0 +1,142 @@
+"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.DualKeypad = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const NumberKeypad_1 = require("./NumberKeypad");
+const useResponsiveLayout_1 = require("../hooks/useResponsiveLayout");
+/**
+ * Dual keypad component with responsive layout for mobile and desktop sudoku input
+ * @public
+ */
+const DualKeypad = ({ inputMode, onInputModeChange, onNotePress, onValuePress, onClearNotes, onClearValues, hasCellSelection, selectedCellCount, disabled = false, className, forceLayoutMode, showOverlayToggle = true }) => {
+    const responsiveLayout = (0, useResponsiveLayout_1.useResponsiveLayout)(forceLayoutMode);
+    const [isOverlayVisible, setIsOverlayVisible] = (0, react_1.useState)(false);
+    // Determine effective layout mode
+    const effectiveLayoutMode = forceLayoutMode || responsiveLayout.keypadLayoutMode;
+    // Should show the keypad based on layout mode and overlay state
+    const shouldShowKeypad = (0, react_1.useMemo)(() => {
+        if (effectiveLayoutMode === 'hidden')
+            return false;
+        if (effectiveLayoutMode === 'overlay')
+            return isOverlayVisible;
+        return true;
+    }, [effectiveLayoutMode, isOverlayVisible]);
+    // Handle note number press
+    const handleNotePress = (0, react_1.useCallback)((number) => {
+        /* c8 ignore next 1 - defense in depth: disabled buttons prevent handler calls */
+        if (disabled)
+            return;
+        onNotePress(number);
+    }, [disabled, onNotePress]);
+    // Handle value number press
+    const handleValuePress = (0, react_1.useCallback)((number) => {
+        /* c8 ignore next 1 - defense in depth: disabled buttons prevent handler calls */
+        if (disabled)
+            return;
+        onValuePress(number);
+    }, [disabled, onValuePress]);
+    // Handle clear notes
+    const handleClearNotes = (0, react_1.useCallback)(() => {
+        /* c8 ignore next 1 - defense in depth: disabled buttons prevent handler calls */
+        if (disabled)
+            return;
+        onClearNotes();
+    }, [disabled, onClearNotes]);
+    // Handle clear values
+    const handleClearValues = (0, react_1.useCallback)(() => {
+        /* c8 ignore next 1 - defense in depth: disabled buttons prevent handler calls */
+        if (disabled)
+            return;
+        onClearValues();
+    }, [disabled, onClearValues]);
+    // Toggle overlay visibility
+    const toggleOverlay = (0, react_1.useCallback)(() => {
+        setIsOverlayVisible((prev) => !prev);
+    }, []);
+    // Calculate whether to use compact mode
+    const useCompactMode = responsiveLayout.isSmallScreen || effectiveLayoutMode === 'overlay';
+    // Calculate container classes
+    const containerClasses = (0, react_1.useMemo)(() => {
+        const classes = ['flex gap-3 p-3'];
+        // Layout mode specific styles - FIXED: side-by-side should be flex-row
+        if (effectiveLayoutMode === 'side-by-side') {
+            classes.push('flex-row justify-center');
+        }
+        else if (effectiveLayoutMode === 'stacked') {
+            classes.push('flex-col');
+        }
+        else if (effectiveLayoutMode === 'overlay') {
+            classes.push('fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50 bg-white rounded-lg shadow-lg border border-gray-200');
+        }
+        if (disabled)
+            classes.push('opacity-50 pointer-events-none');
+        if (useCompactMode)
+            classes.push('gap-2 p-2');
+        if (className)
+            classes.push(className);
+        return classes.join(' ');
+    }, [effectiveLayoutMode, disabled, useCompactMode, className]);
+    // Overlay backdrop
+    const overlayBackdrop = effectiveLayoutMode === 'overlay' && isOverlayVisible && (react_1.default.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-30 z-40", onClick: toggleOverlay, "data-testid": "dual-keypad-overlay-backdrop" }));
+    // Show overlay toggle button for desktop/overlay mode
+    const overlayToggleButtonClasses = (0, react_1.useMemo)(() => {
+        const classes = [
+            'fixed bottom-4 right-4 z-50 w-12 h-12 rounded-full bg-blue-500 text-white flex items-center justify-center shadow-lg hover:bg-blue-600 transition-colors'
+        ];
+        if (isOverlayVisible)
+            classes.push('bg-red-500 hover:bg-red-600');
+        if (disabled)
+            classes.push('opacity-50 cursor-not-allowed');
+        return classes.join(' ');
+    }, [isOverlayVisible, disabled]);
+    const overlayToggleButton = (effectiveLayoutMode === 'overlay' || effectiveLayoutMode === 'hidden') &&
+        showOverlayToggle && (react_1.default.createElement("button", { type: "button", onClick: toggleOverlay, disabled: disabled, className: overlayToggleButtonClasses, "aria-label": isOverlayVisible ? 'Hide number keypad' : 'Show number keypad', "data-testid": "dual-keypad-overlay-toggle" }, isOverlayVisible ? '✕' : '🔢'));
+    // Status text for multi-selection only (not single selection)
+    const statusText = (0, react_1.useMemo)(() => {
+        if (selectedCellCount > 1) {
+            return `${selectedCellCount} cells selected`;
+        }
+        return null;
+    }, [selectedCellCount]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        overlayBackdrop,
+        react_1.default.createElement("div", { className: containerClasses, style: { display: shouldShowKeypad ? 'flex' : 'none' }, "data-testid": "dual-keypad", role: "region", "aria-label": "Number input keypads" }, shouldShowKeypad && (react_1.default.createElement(react_1.default.Fragment, null,
+            statusText && (react_1.default.createElement("div", { className: `text-sm text-gray-600 text-center ${effectiveLayoutMode === 'stacked' ? 'mb-2' : 'mb-3'}` }, statusText)),
+            effectiveLayoutMode !== 'side-by-side' && effectiveLayoutMode !== 'stacked' && (react_1.default.createElement("div", { className: "flex justify-center gap-3 mb-3" },
+                react_1.default.createElement("button", { type: "button", onClick: () => onInputModeChange('notes'), disabled: disabled, className: `px-4 py-2 rounded-lg border-2 flex items-center gap-2 text-sm font-medium transition-colors ${inputMode === 'notes'
+                        ? 'bg-blue-500 text-white border-blue-600'
+                        : 'bg-gray-100 border-gray-300 hover:bg-gray-200'} ${disabled ? 'opacity-50 cursor-not-allowed' : ''}` }, "\uD83D\uDCDD Notes"),
+                react_1.default.createElement("button", { type: "button", onClick: () => onInputModeChange('value'), disabled: disabled, className: `px-4 py-2 rounded-lg border-2 flex items-center gap-2 text-sm font-medium transition-colors ${inputMode === 'value'
+                        ? 'bg-blue-500 text-white border-blue-600'
+                        : 'bg-gray-100 border-gray-300 hover:bg-gray-200'} ${disabled ? 'opacity-50 cursor-not-allowed' : ''}` }, "\u270F\uFE0F Values"))),
+            react_1.default.createElement(NumberKeypad_1.NumberKeypad, { keypadType: "notes", inputMode: inputMode, isActive: true, onNumberPress: handleNotePress, onClear: handleClearNotes, disabled: disabled || !hasCellSelection, compact: useCompactMode, className: "flex-1" }),
+            react_1.default.createElement(NumberKeypad_1.NumberKeypad, { keypadType: "values", inputMode: inputMode, isActive: true, onNumberPress: handleValuePress, onClear: handleClearValues, disabled: disabled || !hasCellSelection, compact: useCompactMode, className: "flex-1" }),
+            effectiveLayoutMode === 'overlay' && (react_1.default.createElement("button", { type: "button", onClick: toggleOverlay, className: "absolute top-2 right-2 w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center text-gray-600 transition-colors", "aria-label": "Close keypad overlay", "data-testid": "dual-keypad-close" }, "\u2715"))))),
+        overlayToggleButton));
+};
+exports.DualKeypad = DualKeypad;
+//# sourceMappingURL=DualKeypad.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DualKeypad.js","sourceRoot":"","sources":["../../src/components/DualKeypad.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * MIT License\n *\n * Copyright (c) 2023 Erik Fortune\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { InputMode } from '../types';\nimport { NumberKeypad } from './NumberKeypad';\nimport { useResponsiveLayout, KeypadLayoutMode } from '../hooks/useResponsiveLayout';\n\n/**\n * Props for the DualKeypad component\n * @public\n */\nexport interface IDualKeypadProps {\n  /** Current input mode */\n  readonly inputMode: InputMode;\n\n  /** Callback when input mode changes */\n  readonly onInputModeChange: (mode: InputMode) => void;\n\n  /** Callback when a number is pressed for notes */\n  readonly onNotePress: (number: number) => void;\n\n  /** Callback when a number is pressed for values */\n  readonly onValuePress: (number: number) => void;\n\n  /** Callback when clear notes is pressed */\n  readonly onClearNotes: () => void;\n\n  /** Callback when clear values is pressed */\n  readonly onClearValues: () => void;\n\n  /** Whether any cells are selected */\n  readonly hasCellSelection: boolean;\n\n  /** Number of selected cells */\n  readonly selectedCellCount: number;\n\n  /** Whether the keypad is disabled */\n  readonly disabled?: boolean;\n\n  /** Additional CSS class name */\n  readonly className?: string;\n\n  /** Force a specific layout mode (overrides responsive detection) */\n  readonly forceLayoutMode?: KeypadLayoutMode;\n\n  /** Whether to show the overlay toggle for desktop */\n  readonly showOverlayToggle?: boolean;\n}\n\n/**\n * Dual keypad component with responsive layout for mobile and desktop sudoku input\n * @public\n */\nexport const DualKeypad: React.FC<IDualKeypadProps> = ({\n  inputMode,\n  onInputModeChange,\n  onNotePress,\n  onValuePress,\n  onClearNotes,\n  onClearValues,\n  hasCellSelection,\n  selectedCellCount,\n  disabled = false,\n  className,\n  forceLayoutMode,\n  showOverlayToggle = true\n}) => {\n  const responsiveLayout = useResponsiveLayout(forceLayoutMode);\n  const [isOverlayVisible, setIsOverlayVisible] = useState(false);\n\n  // Determine effective layout mode\n  const effectiveLayoutMode = forceLayoutMode || responsiveLayout.keypadLayoutMode;\n\n  // Should show the keypad based on layout mode and overlay state\n  const shouldShowKeypad = useMemo(() => {\n    if (effectiveLayoutMode === 'hidden') return false;\n    if (effectiveLayoutMode === 'overlay') return isOverlayVisible;\n    return true;\n  }, [effectiveLayoutMode, isOverlayVisible]);\n\n  // Handle note number press\n  const handleNotePress = useCallback(\n    (number: number) => {\n      /* c8 ignore next 1 - defense in depth: disabled buttons prevent handler calls */\n      if (disabled) return;\n      onNotePress(number);\n    },\n    [disabled, onNotePress]\n  );\n\n  // Handle value number press\n  const handleValuePress = useCallback(\n    (number: number) => {\n      /* c8 ignore next 1 - defense in depth: disabled buttons prevent handler calls */\n      if (disabled) return;\n      onValuePress(number);\n    },\n    [disabled, onValuePress]\n  );\n\n  // Handle clear notes\n  const handleClearNotes = useCallback(() => {\n    /* c8 ignore next 1 - defense in depth: disabled buttons prevent handler calls */\n    if (disabled) return;\n    onClearNotes();\n  }, [disabled, onClearNotes]);\n\n  // Handle clear values\n  const handleClearValues = useCallback(() => {\n    /* c8 ignore next 1 - defense in depth: disabled buttons prevent handler calls */\n    if (disabled) return;\n    onClearValues();\n  }, [disabled, onClearValues]);\n\n  // Toggle overlay visibility\n  const toggleOverlay = useCallback(() => {\n    setIsOverlayVisible((prev) => !prev);\n  }, []);\n\n  // Calculate whether to use compact mode\n  const useCompactMode = responsiveLayout.isSmallScreen || effectiveLayoutMode === 'overlay';\n\n  // Calculate container classes\n  const containerClasses = useMemo(() => {\n    const classes = ['flex gap-3 p-3'];\n\n    // Layout mode specific styles - FIXED: side-by-side should be flex-row\n    if (effectiveLayoutMode === 'side-by-side') {\n      classes.push('flex-row justify-center');\n    } else if (effectiveLayoutMode === 'stacked') {\n      classes.push('flex-col');\n    } else if (effectiveLayoutMode === 'overlay') {\n      classes.push(\n        'fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50 bg-white rounded-lg shadow-lg border border-gray-200'\n      );\n    }\n\n    if (disabled) classes.push('opacity-50 pointer-events-none');\n    if (useCompactMode) classes.push('gap-2 p-2');\n    if (className) classes.push(className);\n\n    return classes.join(' ');\n  }, [effectiveLayoutMode, disabled, useCompactMode, className]);\n\n  // Overlay backdrop\n  const overlayBackdrop = effectiveLayoutMode === 'overlay' && isOverlayVisible && (\n    <div\n      className=\"fixed inset-0 bg-black bg-opacity-30 z-40\"\n      onClick={toggleOverlay}\n      data-testid=\"dual-keypad-overlay-backdrop\"\n    />\n  );\n\n  // Show overlay toggle button for desktop/overlay mode\n  const overlayToggleButtonClasses = useMemo(() => {\n    const classes = [\n      'fixed bottom-4 right-4 z-50 w-12 h-12 rounded-full bg-blue-500 text-white flex items-center justify-center shadow-lg hover:bg-blue-600 transition-colors'\n    ];\n    if (isOverlayVisible) classes.push('bg-red-500 hover:bg-red-600');\n    if (disabled) classes.push('opacity-50 cursor-not-allowed');\n    return classes.join(' ');\n  }, [isOverlayVisible, disabled]);\n\n  const overlayToggleButton = (effectiveLayoutMode === 'overlay' || effectiveLayoutMode === 'hidden') &&\n    showOverlayToggle && (\n      <button\n        type=\"button\"\n        onClick={toggleOverlay}\n        disabled={disabled}\n        className={overlayToggleButtonClasses}\n        aria-label={isOverlayVisible ? 'Hide number keypad' : 'Show number keypad'}\n        data-testid=\"dual-keypad-overlay-toggle\"\n      >\n        {isOverlayVisible ? '✕' : '🔢'}\n      </button>\n    );\n\n  // Status text for multi-selection only (not single selection)\n  const statusText = useMemo(() => {\n    if (selectedCellCount > 1) {\n      return `${selectedCellCount} cells selected`;\n    }\n    return null;\n  }, [selectedCellCount]);\n\n  return (\n    <>\n      {overlayBackdrop}\n\n      <div\n        className={containerClasses}\n        style={{ display: shouldShowKeypad ? 'flex' : 'none' }}\n        data-testid=\"dual-keypad\"\n        role=\"region\"\n        aria-label=\"Number input keypads\"\n      >\n        {shouldShowKeypad && (\n          <>\n            {/* Status text */}\n            {statusText && (\n              <div\n                className={`text-sm text-gray-600 text-center ${\n                  effectiveLayoutMode === 'stacked' ? 'mb-2' : 'mb-3'\n                }`}\n              >\n                {statusText}\n              </div>\n            )}\n\n            {/* Mode Toggle - only show for overlay/hidden modes (no toggle needed for side-by-side) */}\n            {effectiveLayoutMode !== 'side-by-side' && effectiveLayoutMode !== 'stacked' && (\n              <div className=\"flex justify-center gap-3 mb-3\">\n                {/* c8 ignore next 9 - functional code tested but coverage intermittently missed */}\n                <button\n                  type=\"button\"\n                  onClick={() => onInputModeChange('notes')}\n                  disabled={disabled}\n                  className={`px-4 py-2 rounded-lg border-2 flex items-center gap-2 text-sm font-medium transition-colors ${\n                    inputMode === 'notes'\n                      ? 'bg-blue-500 text-white border-blue-600'\n                      : 'bg-gray-100 border-gray-300 hover:bg-gray-200'\n                  } ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}\n                >\n                  📝 Notes\n                </button>\n                {/* c8 ignore next 9 - functional code tested but coverage intermittently missed */}\n                <button\n                  type=\"button\"\n                  onClick={() => onInputModeChange('value')}\n                  disabled={disabled}\n                  className={`px-4 py-2 rounded-lg border-2 flex items-center gap-2 text-sm font-medium transition-colors ${\n                    inputMode === 'value'\n                      ? 'bg-blue-500 text-white border-blue-600'\n                      : 'bg-gray-100 border-gray-300 hover:bg-gray-200'\n                  } ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}\n                >\n                  ✏️ Values\n                </button>\n              </div>\n            )}\n\n            {/* Notes Keypad */}\n            <NumberKeypad\n              keypadType=\"notes\"\n              inputMode={inputMode}\n              isActive={true}\n              onNumberPress={handleNotePress}\n              onClear={handleClearNotes}\n              disabled={disabled || !hasCellSelection}\n              compact={useCompactMode}\n              className=\"flex-1\"\n            />\n\n            {/* Values Keypad */}\n            <NumberKeypad\n              keypadType=\"values\"\n              inputMode={inputMode}\n              isActive={true}\n              onNumberPress={handleValuePress}\n              onClear={handleClearValues}\n              disabled={disabled || !hasCellSelection}\n              compact={useCompactMode}\n              className=\"flex-1\"\n            />\n\n            {/* Close button for overlay */}\n            {effectiveLayoutMode === 'overlay' && (\n              <button\n                type=\"button\"\n                onClick={toggleOverlay}\n                className=\"absolute top-2 right-2 w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center text-gray-600 transition-colors\"\n                aria-label=\"Close keypad overlay\"\n                data-testid=\"dual-keypad-close\"\n              >\n                ✕\n              </button>\n            )}\n          </>\n        )}\n      </div>\n\n      {overlayToggleButton}\n    </>\n  );\n};\n"]}