@fgv/ts-sudoku-ui 0.1.0

package/lib/components/DualKeypad.js

@@ -0,0 +1,137 @@
+/*
+ * 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 { NumberKeypad } from './NumberKeypad';
+import { useResponsiveLayout } from '../hooks/useResponsiveLayout';
+/**
+ * Dual keypad component with responsive layout for mobile and desktop sudoku input
+ * @public
+ */
+export const DualKeypad = ({ inputMode, onInputModeChange, onNotePress, onValuePress, onClearNotes, onClearValues, hasCellSelection, selectedCellCount, disabled = false, className, forceLayoutMode, showOverlayToggle = true }) => {
+    const responsiveLayout = useResponsiveLayout(forceLayoutMode);
+    const [isOverlayVisible, setIsOverlayVisible] = useState(false);
+    // Determine effective layout mode
+    const effectiveLayoutMode = forceLayoutMode || responsiveLayout.keypadLayoutMode;
+    // Should show the keypad based on layout mode and overlay state
+    const shouldShowKeypad = useMemo(() => {
+        if (effectiveLayoutMode === 'hidden')
+            return false;
+        if (effectiveLayoutMode === 'overlay')
+            return isOverlayVisible;
+        return true;
+    }, [effectiveLayoutMode, isOverlayVisible]);
+    // Handle note number press
+    const handleNotePress = 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 = 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 = useCallback(() => {
+        /* c8 ignore next 1 - defense in depth: disabled buttons prevent handler calls */
+        if (disabled)
+            return;
+        onClearNotes();
+    }, [disabled, onClearNotes]);
+    // Handle clear values
+    const handleClearValues = useCallback(() => {
+        /* c8 ignore next 1 - defense in depth: disabled buttons prevent handler calls */
+        if (disabled)
+            return;
+        onClearValues();
+    }, [disabled, onClearValues]);
+    // Toggle overlay visibility
+    const toggleOverlay = useCallback(() => {
+        setIsOverlayVisible((prev) => !prev);
+    }, []);
+    // Calculate whether to use compact mode
+    const useCompactMode = responsiveLayout.isSmallScreen || effectiveLayoutMode === 'overlay';
+    // Calculate container classes
+    const containerClasses = 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.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 = 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.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 = useMemo(() => {
+        if (selectedCellCount > 1) {
+            return `${selectedCellCount} cells selected`;
+        }
+        return null;
+    }, [selectedCellCount]);
+    return (React.createElement(React.Fragment, null,
+        overlayBackdrop,
+        React.createElement("div", { className: containerClasses, style: { display: shouldShowKeypad ? 'flex' : 'none' }, "data-testid": "dual-keypad", role: "region", "aria-label": "Number input keypads" }, shouldShowKeypad && (React.createElement(React.Fragment, null,
+            statusText && (React.createElement("div", { className: `text-sm text-gray-600 text-center ${effectiveLayoutMode === 'stacked' ? 'mb-2' : 'mb-3'}` }, statusText)),
+            effectiveLayoutMode !== 'side-by-side' && effectiveLayoutMode !== 'stacked' && (React.createElement("div", { className: "flex justify-center gap-3 mb-3" },
+                React.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.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.createElement(NumberKeypad, { keypadType: "notes", inputMode: inputMode, isActive: true, onNumberPress: handleNotePress, onClear: handleClearNotes, disabled: disabled || !hasCellSelection, compact: useCompactMode, className: "flex-1" }),
+            React.createElement(NumberKeypad, { keypadType: "values", inputMode: inputMode, isActive: true, onNumberPress: handleValuePress, onClear: handleClearValues, disabled: disabled || !hasCellSelection, compact: useCompactMode, className: "flex-1" }),
+            effectiveLayoutMode === 'overlay' && (React.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));
+};
+//# sourceMappingURL=DualKeypad.js.map

package/lib/components/DualKeypad.js.map

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

package/lib/components/KillerCombinationsExplorer.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IKillerCombinationsExplorerProps } from '../types';
+/**
+ * Main killer combinations explorer container component
+ * Automatically switches between panel (desktop) and modal (mobile) based on screen size
+ * @public
+ */
+export declare const KillerCombinationsExplorer: React.FC<IKillerCombinationsExplorerProps>;
+//# sourceMappingURL=KillerCombinationsExplorer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KillerCombinationsExplorer.d.ts","sourceRoot":"","sources":["../../src/components/KillerCombinationsExplorer.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,gCAAgC,EAA2B,MAAM,UAAU,CAAC;AAOrF;;;;GAIG;AACH,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,EAAE,CAAC,gCAAgC,CAoEjF,CAAC"}

package/lib/components/KillerCombinationsExplorer.js

@@ -0,0 +1,69 @@
+/*
+ * 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';
+import { useKillerCombinations } from '../hooks/useKillerCombinations';
+import { useCombinationElimination } from '../hooks/useCombinationElimination';
+import { useResponsiveLayout } from '../hooks/useResponsiveLayout';
+import { KillerCombinationsPanel } from './KillerCombinationsPanel';
+import { KillerCombinationsModal } from './KillerCombinationsModal';
+/**
+ * Main killer combinations explorer container component
+ * Automatically switches between panel (desktop) and modal (mobile) based on screen size
+ * @public
+ */
+export const KillerCombinationsExplorer = ({ selectedCage, puzzleId, isOpen, onClose, mobileBreakpoint = 1024, className }) => {
+    const { screenWidth } = useResponsiveLayout();
+    // Determine display mode based on screen width
+    const mode = screenWidth >= mobileBreakpoint ? 'panel' : 'modal';
+    // Get combinations for the selected cage
+    const combinationsResult = useKillerCombinations(selectedCage);
+    // Get cage ID for storage
+    const cageId = selectedCage?.id;
+    // Get elimination state
+    const { eliminatedSignatures, toggleElimination } = useCombinationElimination(puzzleId, cageId);
+    // Merge combinations with elimination state
+    const displayCombinations = 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.createElement(KillerCombinationsPanel, { cage: selectedCage, combinations: displayCombinations, onToggle: toggleElimination, onClose: onClose, isOpen: isOpen, className: className }));
+    }
+    return (React.createElement(KillerCombinationsModal, { cage: selectedCage, combinations: displayCombinations, onToggle: toggleElimination, onClose: onClose, isOpen: isOpen, className: className }));
+};
+//# sourceMappingURL=KillerCombinationsExplorer.js.map

package/lib/components/KillerCombinationsExplorer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KillerCombinationsExplorer.js","sourceRoot":"","sources":["../../src/components/KillerCombinationsExplorer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAEpE;;;;GAIG;AACH,MAAM,CAAC,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,mBAAmB,EAAE,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,qBAAqB,CAAC,YAAY,CAAC,CAAC;IAE/D,0BAA0B;IAC1B,MAAM,MAAM,GAAG,YAAY,EAAE,EAAE,CAAC;IAEhC,wBAAwB;IACxB,MAAM,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,GAAG,yBAAyB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IAEhG,4CAA4C;IAC5C,MAAM,mBAAmB,GAAG,OAAO,CAAC,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,oBAAC,uBAAuB,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,oBAAC,uBAAuB,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","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/components/KillerCombinationsModal.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ICage } from '@fgv/ts-sudoku-lib';
+import { ICombinationDisplayInfo } from '../types';
+/**
+ * Props for the KillerCombinationsModal component
+ */
+export interface IKillerCombinationsModalProps {
+    readonly cage: ICage;
+    readonly combinations: ICombinationDisplayInfo[];
+    readonly onToggle: (signature: string) => void;
+    readonly onClose: () => void;
+    readonly isOpen: boolean;
+    readonly className?: string;
+}
+/**
+ * Mobile modal variant for killer combinations explorer
+ * @public
+ */
+export declare const KillerCombinationsModal: React.FC<IKillerCombinationsModalProps>;
+//# sourceMappingURL=KillerCombinationsModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KillerCombinationsModal.d.ts","sourceRoot":"","sources":["../../src/components/KillerCombinationsModal.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAGnD;;GAEG;AACH,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC;IACrB,QAAQ,CAAC,YAAY,EAAE,uBAAuB,EAAE,CAAC;IACjD,QAAQ,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAuJ3E,CAAC"}

package/lib/components/KillerCombinationsModal.js

@@ -0,0 +1,135 @@
+/*
+ * 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, { useEffect, useRef } from 'react';
+import { CombinationGrid } from './CombinationGrid';
+/**
+ * Mobile modal variant for killer combinations explorer
+ * @public
+ */
+export const KillerCombinationsModal = ({ cage, combinations, onToggle, onClose, isOpen, className }) => {
+    const modalRef = useRef(null);
+    // Handle Escape key to close
+    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
+    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
+    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.createElement("div", { className: overlayClasses, onClick: onClose, role: "presentation" },
+        React.createElement("div", { ref: modalRef, className: dialogClasses, onClick: (e) => e.stopPropagation(), role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-title", "aria-describedby": "modal-description" },
+            React.createElement("div", { className: "flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700" },
+                React.createElement("div", null,
+                    React.createElement("h2", { id: "modal-title", className: "text-lg font-semibold text-gray-900 dark:text-gray-100" }, "Combinations"),
+                    React.createElement("p", { id: "modal-description", className: "text-sm text-gray-500 dark:text-gray-400" },
+                        cage.numCells,
+                        " cells, sum ",
+                        cage.total)),
+                React.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.createElement("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
+                        React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })))),
+            React.createElement("div", { className: "px-4 py-2 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700" },
+                React.createElement("p", { className: "text-xs text-gray-600 dark:text-gray-400" },
+                    activeCount,
+                    " of ",
+                    totalCount,
+                    " combinations possible")),
+            React.createElement("div", { className: "flex-1 overflow-hidden" },
+                React.createElement(CombinationGrid, { combinations: combinations, onToggle: onToggle, mode: "modal" })))));
+};
+//# sourceMappingURL=KillerCombinationsModal.js.map

package/lib/components/KillerCombinationsModal.js.map

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

package/lib/components/KillerCombinationsPanel.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ICage } from '@fgv/ts-sudoku-lib';
+import { ICombinationDisplayInfo } from '../types';
+/**
+ * Props for the KillerCombinationsPanel component
+ */
+export interface IKillerCombinationsPanelProps {
+    readonly cage: ICage;
+    readonly combinations: ICombinationDisplayInfo[];
+    readonly onToggle: (signature: string) => void;
+    readonly onClose: () => void;
+    readonly isOpen: boolean;
+    readonly className?: string;
+}
+/**
+ * Desktop panel variant for killer combinations explorer
+ * @public
+ */
+export declare const KillerCombinationsPanel: React.FC<IKillerCombinationsPanelProps>;
+//# sourceMappingURL=KillerCombinationsPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KillerCombinationsPanel.d.ts","sourceRoot":"","sources":["../../src/components/KillerCombinationsPanel.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAGnD;;GAEG;AACH,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC;IACrB,QAAQ,CAAC,YAAY,EAAE,uBAAuB,EAAE,CAAC;IACjD,QAAQ,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CA2E3E,CAAC"}

package/lib/components/KillerCombinationsPanel.js

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

package/lib/components/KillerCombinationsPanel.js.map

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

package/lib/components/NumberKeypad.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { InputMode } from '../types';
+/**
+ * Props for the NumberKeypad component
+ * @public
+ */
+export interface INumberKeypadProps {
+    /** Type of keypad - affects styling and behavior */
+    readonly keypadType: 'notes' | 'values';
+    /** Current input mode */
+    readonly inputMode: InputMode;
+    /** Whether this keypad is currently active */
+    readonly isActive: boolean;
+    /** Callback when a number is pressed */
+    readonly onNumberPress: (number: number) => void;
+    /** Callback when clear is pressed */
+    readonly onClear: () => void;
+    /** Whether the keypad is disabled */
+    readonly disabled?: boolean;
+    /** Additional CSS class name */
+    readonly className?: string;
+    /** Compact mode for smaller screens */
+    readonly compact?: boolean;
+}
+/**
+ * Reusable number keypad component for sudoku input
+ * @public
+ */
+export declare const NumberKeypad: React.FC<INumberKeypadProps>;
+//# sourceMappingURL=NumberKeypad.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumberKeypad.d.ts","sourceRoot":"","sources":["../../src/components/NumberKeypad.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IACjC,oDAAoD;IACpD,QAAQ,CAAC,UAAU,EAAE,OAAO,GAAG,QAAQ,CAAC;IAExC,yBAAyB;IACzB,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAC;IAE9B,8CAA8C;IAC9C,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAE3B,wCAAwC;IACxC,QAAQ,CAAC,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjD,qCAAqC;IACrC,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAE7B,qCAAqC;IACrC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAE5B,gCAAgC;IAChC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAE5B,uCAAuC;IACvC,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA0NrD,CAAC"}