@fgv/ts-sudoku-ui 0.1.0

package/lib/components/CageSumIndicator.js

@@ -0,0 +1,66 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2023 Erik Fortune
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { useMemo } from 'react';
+/**
+ * Component for displaying the target sum of a cage in Killer Sudoku
+ * @public
+ */
+export const CageSumIndicator = ({ cage, currentSum, isComplete, isValid, position, className }) => {
+    // Calculate display classes based on state
+    const displayClasses = 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.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.createElement("div", { className: "text-gray-700" }, cage.total),
+        currentSum !== undefined && (React.createElement("div", { className: `
+            text-xs
+            ${isValid ? 'text-blue-600' : 'text-red-600'}
+          `, style: { fontSize: '8px', lineHeight: '10px' } }, currentSum))));
+};
+//# sourceMappingURL=CageSumIndicator.js.map

package/lib/components/CageSumIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CageSumIndicator.js","sourceRoot":"","sources":["../../src/components/CageSumIndicator.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGvC;;;GAGG;AACH,MAAM,CAAC,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,OAAO,CAAC,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,6BACE,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,6BAAK,SAAS,EAAC,eAAe,IAAE,IAAI,CAAC,KAAK,CAAO;QAChD,UAAU,KAAK,SAAS,IAAI,CAC3B,6BACE,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","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/components/CombinationCard.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ICombinationCardProps } from '../types';
+/**
+ * Individual combination card component with toggle functionality
+ * @public
+ */
+export declare const CombinationCard: React.NamedExoticComponent<ICombinationCardProps>;
+//# sourceMappingURL=CombinationCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CombinationCard.d.ts","sourceRoot":"","sources":["../../src/components/CombinationCard.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAEjD;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,oBAAoB,CAAC,qBAAqB,CAgE3E,CAAC"}

package/lib/components/CombinationCard.js

@@ -0,0 +1,64 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2023 Erik Fortune
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { useCallback } from 'react';
+/**
+ * Individual combination card component with toggle functionality
+ * @public
+ */
+export const CombinationCard = React.memo(({ combination, onToggle, className }) => {
+    const { combination: numbers, signature, isEliminated } = combination;
+    const handleClick = useCallback(() => {
+        onToggle(signature);
+    }, [onToggle, signature]);
+    const handleKeyDown = 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.createElement("button", { type: "button", className: cardClasses, onClick: handleClick, onKeyDown: handleKeyDown, "aria-pressed": isEliminated, "aria-label": `Combination ${ariaLabel}${isEliminated ? ' (eliminated)' : ''}`, role: "button" },
+        React.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);
+});
+CombinationCard.displayName = 'CombinationCard';
+//# sourceMappingURL=CombinationCard.js.map

package/lib/components/CombinationCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CombinationCard.js","sourceRoot":"","sources":["../../src/components/CombinationCard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAG3C;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAC1B,KAAK,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,WAAW,CAAC,GAAG,EAAE;QACnC,QAAQ,CAAC,SAAS,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC;IAE1B,MAAM,aAAa,GAAG,WAAW,CAC/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,gCACE,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,8BACE,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,eAAe,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/components/CombinationGrid.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ICombinationGridProps } from '../types';
+/**
+ * Grid layout component for displaying combination cards
+ * @public
+ */
+export declare const CombinationGrid: React.FC<ICombinationGridProps>;
+//# sourceMappingURL=CombinationGrid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CombinationGrid.d.ts","sourceRoot":"","sources":["../../src/components/CombinationGrid.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAGjD;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAqC3D,CAAC"}

package/lib/components/CombinationGrid.js

@@ -0,0 +1,51 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2023 Erik Fortune
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React from 'react';
+import { CombinationCard } from './CombinationCard';
+/**
+ * Grid layout component for displaying combination cards
+ * @public
+ */
+export 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.createElement("div", { className: "flex items-center justify-center p-8 text-gray-500 dark:text-gray-400" },
+            React.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.createElement("div", { className: gridClasses }, sortedCombinations.map((combo) => (React.createElement(CombinationCard, { key: combo.signature, combination: combo, onToggle: onToggle })))));
+};
+//# sourceMappingURL=CombinationGrid.js.map

package/lib/components/CombinationGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CombinationGrid.js","sourceRoot":"","sources":["../../src/components/CombinationGrid.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD;;;GAGG;AACH,MAAM,CAAC,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,6BAAK,SAAS,EAAC,uEAAuE;YACpF,yEAA8C,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,6BAAK,SAAS,EAAE,WAAW,IACxB,kBAAkB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACjC,oBAAC,eAAe,IAAC,GAAG,EAAE,KAAK,CAAC,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAClF,CAAC,CACE,CACP,CAAC;AACJ,CAAC,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 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/components/CompactControlRibbon.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+/**
+ * Props for the CompactControlRibbon component
+ * @public
+ */
+export interface ICompactControlRibbonProps {
+    /** Whether undo is available */
+    readonly canUndo: boolean;
+    /** Whether redo is available */
+    readonly canRedo: boolean;
+    /** Whether reset is available */
+    readonly canReset: boolean;
+    /** Whether the puzzle is valid */
+    readonly isValid: boolean;
+    /** Whether the puzzle is solved */
+    readonly isSolved: boolean;
+    /** Validation errors for error count display */
+    readonly validationErrors: ReadonlyArray<{
+        readonly type: string;
+        readonly cellId: string;
+        readonly message: string;
+    }>;
+    /** Callback for undo action */
+    readonly onUndo: () => void;
+    /** Callback for redo action */
+    readonly onRedo: () => void;
+    /** Callback for reset action */
+    readonly onReset: () => void;
+    /** Callback for export action */
+    readonly onExport: () => void;
+    /** Whether to show combinations button (for killer sudoku) */
+    readonly showCombinations?: boolean;
+    /** Whether combinations button should be enabled */
+    readonly canShowCombinations?: boolean;
+    /** Callback for combinations action */
+    readonly onCombinations?: () => void;
+    /** Additional CSS class name */
+    readonly className?: string;
+}
+/**
+ * Compact control ribbon with icon-only badges for actions and status indicator
+ * @public
+ */
+export declare const CompactControlRibbon: React.FC<ICompactControlRibbonProps>;
+//# sourceMappingURL=CompactControlRibbon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CompactControlRibbon.d.ts","sourceRoot":"","sources":["../../src/components/CompactControlRibbon.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAG9D;;;GAGG;AACH,MAAM,WAAW,0BAA0B;IACzC,gCAAgC;IAChC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAE1B,gCAAgC;IAChC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAE1B,iCAAiC;IACjC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAE3B,kCAAkC;IAClC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAE1B,mCAAmC;IACnC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAE3B,gDAAgD;IAChD,QAAQ,CAAC,gBAAgB,EAAE,aAAa,CAAC;QACvC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;QACtB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;QACxB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;KAC1B,CAAC,CAAC;IAEH,+BAA+B;IAC/B,QAAQ,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC;IAE5B,+BAA+B;IAC/B,QAAQ,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC;IAE5B,gCAAgC;IAChC,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAE7B,iCAAiC;IACjC,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC;IAE9B,8DAA8D;IAC9D,QAAQ,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAEpC,oDAAoD;IACpD,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAEvC,uCAAuC;IACvC,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAErC,gCAAgC;IAChC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CA6PrE,CAAC"}

package/lib/components/CompactControlRibbon.js

@@ -0,0 +1,141 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2023 Erik Fortune
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { useCallback, useMemo, useState } from 'react';
+import { useResponsiveLayout } from '../hooks/useResponsiveLayout';
+/**
+ * Compact control ribbon with icon-only badges for actions and status indicator
+ * @public
+ */
+export const CompactControlRibbon = ({ canUndo, canRedo, canReset, isValid, isSolved, validationErrors, onUndo, onRedo, onReset, onExport, showCombinations, canShowCombinations, onCombinations, className }) => {
+    const [showResetConfirm, setShowResetConfirm] = useState(false);
+    const responsiveLayout = useResponsiveLayout();
+    // Handle reset with confirmation
+    const handleResetClick = 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 = 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 = 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 = 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 = 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.createElement("div", { className: containerClasses, "data-testid": "compact-control-ribbon", role: "toolbar", "aria-label": "Puzzle controls" },
+        React.createElement("div", { className: statusIndicator.className, title: statusIndicator.title, "aria-label": statusIndicator.title, "data-testid": "status-indicator" }, statusIndicator.content),
+        React.createElement("div", { className: "w-px h-6 bg-gray-300" }),
+        React.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.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.createElement("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" },
+                React.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.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.createElement("div", { className: "flex items-center gap-1" },
+            React.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.createElement("button", { type: "button", onClick: handleCancelReset, className: getButtonClasses(true), title: "Cancel reset", "aria-label": "Cancel reset", "data-testid": "compact-cancel-reset-button" }, "\u2715"))),
+        React.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.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")));
+};
+//# sourceMappingURL=CompactControlRibbon.js.map

package/lib/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/components/DualKeypad.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { InputMode } from '../types';
+import { KeypadLayoutMode } from '../hooks/useResponsiveLayout';
+/**
+ * Props for the DualKeypad component
+ * @public
+ */
+export interface IDualKeypadProps {
+    /** Current input mode */
+    readonly inputMode: InputMode;
+    /** Callback when input mode changes */
+    readonly onInputModeChange: (mode: InputMode) => void;
+    /** Callback when a number is pressed for notes */
+    readonly onNotePress: (number: number) => void;
+    /** Callback when a number is pressed for values */
+    readonly onValuePress: (number: number) => void;
+    /** Callback when clear notes is pressed */
+    readonly onClearNotes: () => void;
+    /** Callback when clear values is pressed */
+    readonly onClearValues: () => void;
+    /** Whether any cells are selected */
+    readonly hasCellSelection: boolean;
+    /** Number of selected cells */
+    readonly selectedCellCount: number;
+    /** Whether the keypad is disabled */
+    readonly disabled?: boolean;
+    /** Additional CSS class name */
+    readonly className?: string;
+    /** Force a specific layout mode (overrides responsive detection) */
+    readonly forceLayoutMode?: KeypadLayoutMode;
+    /** Whether to show the overlay toggle for desktop */
+    readonly showOverlayToggle?: boolean;
+}
+/**
+ * Dual keypad component with responsive layout for mobile and desktop sudoku input
+ * @public
+ */
+export declare const DualKeypad: React.FC<IDualKeypadProps>;
+//# sourceMappingURL=DualKeypad.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DualKeypad.d.ts","sourceRoot":"","sources":["../../src/components/DualKeypad.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,OAAO,EAAuB,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAErF;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,yBAAyB;IACzB,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAC;IAE9B,uCAAuC;IACvC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IAEtD,kDAAkD;IAClD,QAAQ,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAE/C,mDAAmD;IACnD,QAAQ,CAAC,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAEhD,2CAA2C;IAC3C,QAAQ,CAAC,YAAY,EAAE,MAAM,IAAI,CAAC;IAElC,4CAA4C;IAC5C,QAAQ,CAAC,aAAa,EAAE,MAAM,IAAI,CAAC;IAEnC,qCAAqC;IACrC,QAAQ,CAAC,gBAAgB,EAAE,OAAO,CAAC;IAEnC,+BAA+B;IAC/B,QAAQ,CAAC,iBAAiB,EAAE,MAAM,CAAC;IAEnC,qCAAqC;IACrC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAE5B,gCAAgC;IAChC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAE5B,oEAAoE;IACpE,QAAQ,CAAC,eAAe,CAAC,EAAE,gBAAgB,CAAC;IAE5C,qDAAqD;IACrD,QAAQ,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CACtC;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAuOjD,CAAC"}