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

package/lib-commonjs/components/CompactControlRibbon.js

@@ -1,146 +0,0 @@
-"use strict";
-/*
- * MIT License
- *
- * Copyright (c) 2023 Erik Fortune
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.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

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

@@ -1,142 +0,0 @@
-"use strict";
-/*
- * MIT License
- *
- * Copyright (c) 2023 Erik Fortune
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.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

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

package/lib-commonjs/components/KillerCombinationsExplorer.js

@@ -1,74 +0,0 @@
-"use strict";
-/*
- * MIT License
- *
- * Copyright (c) 2023 Erik Fortune
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KillerCombinationsExplorer = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const useKillerCombinations_1 = require("../hooks/useKillerCombinations");
-const useCombinationElimination_1 = require("../hooks/useCombinationElimination");
-const useResponsiveLayout_1 = require("../hooks/useResponsiveLayout");
-const KillerCombinationsPanel_1 = require("./KillerCombinationsPanel");
-const KillerCombinationsModal_1 = require("./KillerCombinationsModal");
-/**
- * Main killer combinations explorer container component
- * Automatically switches between panel (desktop) and modal (mobile) based on screen size
- * @public
- */
-const KillerCombinationsExplorer = ({ selectedCage, puzzleId, isOpen, onClose, mobileBreakpoint = 1024, className }) => {
-    const { screenWidth } = (0, useResponsiveLayout_1.useResponsiveLayout)();
-    // Determine display mode based on screen width
-    const mode = screenWidth >= mobileBreakpoint ? 'panel' : 'modal';
-    // Get combinations for the selected cage
-    const combinationsResult = (0, useKillerCombinations_1.useKillerCombinations)(selectedCage);
-    // Get cage ID for storage
-    const cageId = selectedCage?.id;
-    // Get elimination state
-    const { eliminatedSignatures, toggleElimination } = (0, useCombinationElimination_1.useCombinationElimination)(puzzleId, cageId);
-    // Merge combinations with elimination state
-    const displayCombinations = (0, react_1.useMemo)(() => {
-        if (combinationsResult.isFailure()) {
-            return [];
-        }
-        return combinationsResult.value.map((combo) => ({
-            ...combo,
-            isEliminated: eliminatedSignatures.has(combo.signature)
-        }));
-    }, [combinationsResult, eliminatedSignatures]);
-    // Don't render if not open or no cage selected
-    if (!isOpen || !selectedCage) {
-        return null;
-    }
-    // Don't render if combinations failed to load
-    if (combinationsResult.isFailure()) {
-        return null;
-    }
-    // Render panel or modal based on mode
-    if (mode === 'panel') {
-        return (react_1.default.createElement(KillerCombinationsPanel_1.KillerCombinationsPanel, { cage: selectedCage, combinations: displayCombinations, onToggle: toggleElimination, onClose: onClose, isOpen: isOpen, className: className }));
-    }
-    return (react_1.default.createElement(KillerCombinationsModal_1.KillerCombinationsModal, { cage: selectedCage, combinations: displayCombinations, onToggle: toggleElimination, onClose: onClose, isOpen: isOpen, className: className }));
-};
-exports.KillerCombinationsExplorer = KillerCombinationsExplorer;
-//# sourceMappingURL=KillerCombinationsExplorer.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"KillerCombinationsExplorer.js","sourceRoot":"","sources":["../../src/components/KillerCombinationsExplorer.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;;;;AAEH,uDAAuC;AAEvC,0EAAuE;AACvE,kFAA+E;AAC/E,sEAAmE;AACnE,uEAAoE;AACpE,uEAAoE;AAEpE;;;;GAIG;AACI,MAAM,0BAA0B,GAA+C,CAAC,EACrF,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,OAAO,EACP,gBAAgB,GAAG,IAAI,EACvB,SAAS,EACV,EAAE,EAAE;IACH,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,yCAAmB,GAAE,CAAC;IAE9C,+CAA+C;IAC/C,MAAM,IAAI,GAA4B,WAAW,IAAI,gBAAgB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;IAE1F,yCAAyC;IACzC,MAAM,kBAAkB,GAAG,IAAA,6CAAqB,EAAC,YAAY,CAAC,CAAC;IAE/D,0BAA0B;IAC1B,MAAM,MAAM,GAAG,YAAY,EAAE,EAAE,CAAC;IAEhC,wBAAwB;IACxB,MAAM,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,GAAG,IAAA,qDAAyB,EAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IAEhG,4CAA4C;IAC5C,MAAM,mBAAmB,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACvC,IAAI,kBAAkB,CAAC,SAAS,EAAE,EAAE,CAAC;YACnC,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,OAAO,kBAAkB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YAC9C,GAAG,KAAK;YACR,YAAY,EAAE,oBAAoB,CAAC,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC;SACxD,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,kBAAkB,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAE/C,+CAA+C;IAC/C,IAAI,CAAC,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC;QAC7B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,8CAA8C;IAC9C,IAAI,kBAAkB,CAAC,SAAS,EAAE,EAAE,CAAC;QACnC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,sCAAsC;IACtC,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;QACrB,OAAO,CACL,8BAAC,iDAAuB,IACtB,IAAI,EAAE,YAAY,EAClB,YAAY,EAAE,mBAAmB,EACjC,QAAQ,EAAE,iBAAiB,EAC3B,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,8BAAC,iDAAuB,IACtB,IAAI,EAAE,YAAY,EAClB,YAAY,EAAE,mBAAmB,EACjC,QAAQ,EAAE,iBAAiB,EAC3B,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;AACJ,CAAC,CAAC;AApEW,QAAA,0BAA0B,8BAoErC","sourcesContent":["/*\n * MIT License\n *\n * Copyright (c) 2023 Erik Fortune\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport React, { useMemo } from 'react';\nimport { IKillerCombinationsExplorerProps, IKillerCombinationsMode } from '../types';\nimport { useKillerCombinations } from '../hooks/useKillerCombinations';\nimport { useCombinationElimination } from '../hooks/useCombinationElimination';\nimport { useResponsiveLayout } from '../hooks/useResponsiveLayout';\nimport { KillerCombinationsPanel } from './KillerCombinationsPanel';\nimport { KillerCombinationsModal } from './KillerCombinationsModal';\n\n/**\n * Main killer combinations explorer container component\n * Automatically switches between panel (desktop) and modal (mobile) based on screen size\n * @public\n */\nexport const KillerCombinationsExplorer: React.FC<IKillerCombinationsExplorerProps> = ({\n  selectedCage,\n  puzzleId,\n  isOpen,\n  onClose,\n  mobileBreakpoint = 1024,\n  className\n}) => {\n  const { screenWidth } = useResponsiveLayout();\n\n  // Determine display mode based on screen width\n  const mode: IKillerCombinationsMode = screenWidth >= mobileBreakpoint ? 'panel' : 'modal';\n\n  // Get combinations for the selected cage\n  const combinationsResult = useKillerCombinations(selectedCage);\n\n  // Get cage ID for storage\n  const cageId = selectedCage?.id;\n\n  // Get elimination state\n  const { eliminatedSignatures, toggleElimination } = useCombinationElimination(puzzleId, cageId);\n\n  // Merge combinations with elimination state\n  const displayCombinations = useMemo(() => {\n    if (combinationsResult.isFailure()) {\n      return [];\n    }\n\n    return combinationsResult.value.map((combo) => ({\n      ...combo,\n      isEliminated: eliminatedSignatures.has(combo.signature)\n    }));\n  }, [combinationsResult, eliminatedSignatures]);\n\n  // Don't render if not open or no cage selected\n  if (!isOpen || !selectedCage) {\n    return null;\n  }\n\n  // Don't render if combinations failed to load\n  if (combinationsResult.isFailure()) {\n    return null;\n  }\n\n  // Render panel or modal based on mode\n  if (mode === 'panel') {\n    return (\n      <KillerCombinationsPanel\n        cage={selectedCage}\n        combinations={displayCombinations}\n        onToggle={toggleElimination}\n        onClose={onClose}\n        isOpen={isOpen}\n        className={className}\n      />\n    );\n  }\n\n  return (\n    <KillerCombinationsModal\n      cage={selectedCage}\n      combinations={displayCombinations}\n      onToggle={toggleElimination}\n      onClose={onClose}\n      isOpen={isOpen}\n      className={className}\n    />\n  );\n};\n"]}

package/lib-commonjs/components/KillerCombinationsModal.js

@@ -1,140 +0,0 @@
-"use strict";
-/*
- * MIT License
- *
- * Copyright (c) 2023 Erik Fortune
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KillerCombinationsModal = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const CombinationGrid_1 = require("./CombinationGrid");
-/**
- * Mobile modal variant for killer combinations explorer
- * @public
- */
-const KillerCombinationsModal = ({ cage, combinations, onToggle, onClose, isOpen, className }) => {
-    const modalRef = (0, react_1.useRef)(null);
-    // Handle Escape key to close
-    (0, react_1.useEffect)(() => {
-        const handleEscape = (event) => {
-            if (event.key === 'Escape') {
-                onClose();
-            }
-        };
-        if (isOpen) {
-            window.addEventListener('keydown', handleEscape);
-            return () => window.removeEventListener('keydown', handleEscape);
-        }
-    }, [isOpen, onClose]);
-    // Lock body scroll when modal is open
-    (0, react_1.useEffect)(() => {
-        if (isOpen) {
-            const originalOverflow = document.body.style.overflow;
-            document.body.style.overflow = 'hidden';
-            return () => {
-                document.body.style.overflow = originalOverflow;
-            };
-        }
-    }, [isOpen]);
-    // Focus trap and initial focus
-    (0, react_1.useEffect)(() => {
-        if (isOpen && modalRef.current) {
-            const focusableElements = modalRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-            const firstElement = focusableElements[0];
-            const lastElement = focusableElements[focusableElements.length - 1];
-            firstElement?.focus();
-            const handleTab = (event) => {
-                if (event.key === 'Tab') {
-                    if (event.shiftKey) {
-                        if (document.activeElement === firstElement) {
-                            event.preventDefault();
-                            lastElement?.focus();
-                        }
-                    }
-                    else {
-                        if (document.activeElement === lastElement) {
-                            event.preventDefault();
-                            firstElement?.focus();
-                        }
-                    }
-                }
-            };
-            window.addEventListener('keydown', handleTab);
-            return () => window.removeEventListener('keydown', handleTab);
-        }
-    }, [isOpen]);
-    if (!isOpen) {
-        return null;
-    }
-    const activeCount = combinations.filter((c) => !c.isEliminated).length;
-    const totalCount = combinations.length;
-    /* c8 ignore next 1 - defense in depth */
-    const opacity = isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none';
-    const overlayClasses = [
-        'fixed inset-0 z-[9999]',
-        'flex items-end sm:items-center justify-center',
-        'p-4',
-        'bg-black bg-opacity-40',
-        'transition-opacity duration-300',
-        opacity
-    ]
-        .filter(Boolean)
-        .join(' ');
-    /* c8 ignore next 1 - defense in depth */
-    const translation = isOpen ? 'translate-y-0' : 'translate-y-full';
-    const dialogClasses = [
-        'bg-white dark:bg-gray-900',
-        'rounded-t-2xl sm:rounded-2xl',
-        'w-full max-w-lg',
-        'max-h-[85vh]',
-        'overflow-hidden',
-        'flex flex-col',
-        'shadow-2xl',
-        'transform transition-transform duration-300',
-        translation,
-        className
-    ]
-        .filter(Boolean)
-        .join(' ');
-    return (react_1.default.createElement("div", { className: overlayClasses, onClick: onClose, role: "presentation" },
-        react_1.default.createElement("div", { ref: modalRef, className: dialogClasses, onClick: (e) => e.stopPropagation(), role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-title", "aria-describedby": "modal-description" },
-            react_1.default.createElement("div", { className: "flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700" },
-                react_1.default.createElement("div", null,
-                    react_1.default.createElement("h2", { id: "modal-title", className: "text-lg font-semibold text-gray-900 dark:text-gray-100" }, "Combinations"),
-                    react_1.default.createElement("p", { id: "modal-description", className: "text-sm text-gray-500 dark:text-gray-400" },
-                        cage.numCells,
-                        " cells, sum ",
-                        cage.total)),
-                react_1.default.createElement("button", { type: "button", onClick: onClose, className: "p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors", "aria-label": "Close combinations modal" },
-                    react_1.default.createElement("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
-                        react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })))),
-            react_1.default.createElement("div", { className: "px-4 py-2 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700" },
-                react_1.default.createElement("p", { className: "text-xs text-gray-600 dark:text-gray-400" },
-                    activeCount,
-                    " of ",
-                    totalCount,
-                    " combinations possible")),
-            react_1.default.createElement("div", { className: "flex-1 overflow-hidden" },
-                react_1.default.createElement(CombinationGrid_1.CombinationGrid, { combinations: combinations, onToggle: onToggle, mode: "modal" })))));
-};
-exports.KillerCombinationsModal = KillerCombinationsModal;
-//# sourceMappingURL=KillerCombinationsModal.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"KillerCombinationsModal.js","sourceRoot":"","sources":["../../src/components/KillerCombinationsModal.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;;;;AAEH,uDAAiD;AAGjD,uDAAoD;AAcpD;;;GAGG;AACI,MAAM,uBAAuB,GAA4C,CAAC,EAC/E,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,MAAM,EACN,SAAS,EACV,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAE9C,6BAA6B;IAC7B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,CAAC,KAAoB,EAAQ,EAAE;YAClD,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC3B,OAAO,EAAE,CAAC;YACZ,CAAC;QACH,CAAC,CAAC;QAEF,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;YACjD,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;QACnE,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAEtB,sCAAsC;IACtC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;YACtD,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;YACxC,OAAO,GAAG,EAAE;gBACV,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,gBAAgB,CAAC;YAClD,CAAC,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,+BAA+B;IAC/B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,MAAM,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YAC/B,MAAM,iBAAiB,GAAG,QAAQ,CAAC,OAAO,CAAC,gBAAgB,CACzD,0EAA0E,CAC3E,CAAC;YACF,MAAM,YAAY,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC;YAC1C,MAAM,WAAW,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YAEpE,YAAY,EAAE,KAAK,EAAE,CAAC;YAEtB,MAAM,SAAS,GAAG,CAAC,KAAoB,EAAQ,EAAE;gBAC/C,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;oBACxB,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;wBACnB,IAAI,QAAQ,CAAC,aAAa,KAAK,YAAY,EAAE,CAAC;4BAC5C,KAAK,CAAC,cAAc,EAAE,CAAC;4BACvB,WAAW,EAAE,KAAK,EAAE,CAAC;wBACvB,CAAC;oBACH,CAAC;yBAAM,CAAC;wBACN,IAAI,QAAQ,CAAC,aAAa,KAAK,WAAW,EAAE,CAAC;4BAC3C,KAAK,CAAC,cAAc,EAAE,CAAC;4BACvB,YAAY,EAAE,KAAK,EAAE,CAAC;wBACxB,CAAC;oBACH,CAAC;gBACH,CAAC;YACH,CAAC,CAAC;YAEF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;YAC9C,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAChE,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,WAAW,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC;IACvE,MAAM,UAAU,GAAG,YAAY,CAAC,MAAM,CAAC;IAEvC,yCAAyC;IACzC,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,+BAA+B,CAAC;IACzE,MAAM,cAAc,GAAG;QACrB,wBAAwB;QACxB,+CAA+C;QAC/C,KAAK;QACL,wBAAwB;QACxB,iCAAiC;QACjC,OAAO;KACR;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,yCAAyC;IACzC,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,kBAAkB,CAAC;IAClE,MAAM,aAAa,GAAG;QACpB,2BAA2B;QAC3B,8BAA8B;QAC9B,iBAAiB;QACjB,cAAc;QACd,iBAAiB;QACjB,eAAe;QACf,YAAY;QACZ,6CAA6C;QAC7C,WAAW;QACX,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,uCAAK,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,cAAc;QACnE,uCACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACnC,IAAI,EAAC,QAAQ,gBACF,MAAM,qBACD,aAAa,sBACZ,mBAAmB;YAGpC,uCAAK,SAAS,EAAC,qFAAqF;gBAClG;oBACE,sCAAI,EAAE,EAAC,aAAa,EAAC,SAAS,EAAC,wDAAwD,mBAElF;oBACL,qCAAG,EAAE,EAAC,mBAAmB,EAAC,SAAS,EAAC,0CAA0C;wBAC3E,IAAI,CAAC,QAAQ;;wBAAc,IAAI,CAAC,KAAK,CACpC,CACA;gBACN,0CACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,2EAA2E,gBAC1E,0BAA0B;oBAErC,uCAAK,SAAS,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW;wBAC5E,wCAAM,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,EAAE,CAAC,EAAE,CAAC,EAAC,sBAAsB,GAAG,CAC1F,CACC,CACL;YAGN,uCAAK,SAAS,EAAC,qFAAqF;gBAClG,qCAAG,SAAS,EAAC,0CAA0C;oBACpD,WAAW;;oBAAM,UAAU;6CAC1B,CACA;YAGN,uCAAK,SAAS,EAAC,wBAAwB;gBACrC,8BAAC,iCAAe,IAAC,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAC,OAAO,GAAG,CAC5E,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAvJW,QAAA,uBAAuB,2BAuJlC","sourcesContent":["/*\n * MIT License\n *\n * Copyright (c) 2023 Erik Fortune\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport React, { useEffect, useRef } from 'react';\nimport { ICage } from '@fgv/ts-sudoku-lib';\nimport { ICombinationDisplayInfo } from '../types';\nimport { CombinationGrid } from './CombinationGrid';\n\n/**\n * Props for the KillerCombinationsModal component\n */\nexport interface IKillerCombinationsModalProps {\n  readonly cage: ICage;\n  readonly combinations: ICombinationDisplayInfo[];\n  readonly onToggle: (signature: string) => void;\n  readonly onClose: () => void;\n  readonly isOpen: boolean;\n  readonly className?: string;\n}\n\n/**\n * Mobile modal variant for killer combinations explorer\n * @public\n */\nexport const KillerCombinationsModal: React.FC<IKillerCombinationsModalProps> = ({\n  cage,\n  combinations,\n  onToggle,\n  onClose,\n  isOpen,\n  className\n}) => {\n  const modalRef = useRef<HTMLDivElement>(null);\n\n  // Handle Escape key to close\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent): void => {\n      if (event.key === 'Escape') {\n        onClose();\n      }\n    };\n\n    if (isOpen) {\n      window.addEventListener('keydown', handleEscape);\n      return () => window.removeEventListener('keydown', handleEscape);\n    }\n  }, [isOpen, onClose]);\n\n  // Lock body scroll when modal is open\n  useEffect(() => {\n    if (isOpen) {\n      const originalOverflow = document.body.style.overflow;\n      document.body.style.overflow = 'hidden';\n      return () => {\n        document.body.style.overflow = originalOverflow;\n      };\n    }\n  }, [isOpen]);\n\n  // Focus trap and initial focus\n  useEffect(() => {\n    if (isOpen && modalRef.current) {\n      const focusableElements = modalRef.current.querySelectorAll<HTMLElement>(\n        'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n      );\n      const firstElement = focusableElements[0];\n      const lastElement = focusableElements[focusableElements.length - 1];\n\n      firstElement?.focus();\n\n      const handleTab = (event: KeyboardEvent): void => {\n        if (event.key === 'Tab') {\n          if (event.shiftKey) {\n            if (document.activeElement === firstElement) {\n              event.preventDefault();\n              lastElement?.focus();\n            }\n          } else {\n            if (document.activeElement === lastElement) {\n              event.preventDefault();\n              firstElement?.focus();\n            }\n          }\n        }\n      };\n\n      window.addEventListener('keydown', handleTab);\n      return () => window.removeEventListener('keydown', handleTab);\n    }\n  }, [isOpen]);\n\n  if (!isOpen) {\n    return null;\n  }\n\n  const activeCount = combinations.filter((c) => !c.isEliminated).length;\n  const totalCount = combinations.length;\n\n  /* c8 ignore next 1 - defense in depth */\n  const opacity = isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none';\n  const overlayClasses = [\n    'fixed inset-0 z-[9999]',\n    'flex items-end sm:items-center justify-center',\n    'p-4',\n    'bg-black bg-opacity-40',\n    'transition-opacity duration-300',\n    opacity\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  /* c8 ignore next 1 - defense in depth */\n  const translation = isOpen ? 'translate-y-0' : 'translate-y-full';\n  const dialogClasses = [\n    'bg-white dark:bg-gray-900',\n    'rounded-t-2xl sm:rounded-2xl',\n    'w-full max-w-lg',\n    'max-h-[85vh]',\n    'overflow-hidden',\n    'flex flex-col',\n    'shadow-2xl',\n    'transform transition-transform duration-300',\n    translation,\n    className\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={overlayClasses} onClick={onClose} role=\"presentation\">\n      <div\n        ref={modalRef}\n        className={dialogClasses}\n        onClick={(e) => e.stopPropagation()}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby=\"modal-title\"\n        aria-describedby=\"modal-description\"\n      >\n        {/* Header */}\n        <div className=\"flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700\">\n          <div>\n            <h2 id=\"modal-title\" className=\"text-lg font-semibold text-gray-900 dark:text-gray-100\">\n              Combinations\n            </h2>\n            <p id=\"modal-description\" className=\"text-sm text-gray-500 dark:text-gray-400\">\n              {cage.numCells} cells, sum {cage.total}\n            </p>\n          </div>\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className=\"p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors\"\n            aria-label=\"Close combinations modal\"\n          >\n            <svg className=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n            </svg>\n          </button>\n        </div>\n\n        {/* Stats */}\n        <div className=\"px-4 py-2 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700\">\n          <p className=\"text-xs text-gray-600 dark:text-gray-400\">\n            {activeCount} of {totalCount} combinations possible\n          </p>\n        </div>\n\n        {/* Combinations Grid */}\n        <div className=\"flex-1 overflow-hidden\">\n          <CombinationGrid combinations={combinations} onToggle={onToggle} mode=\"modal\" />\n        </div>\n      </div>\n    </div>\n  );\n};\n"]}