@fgv/ts-sudoku-ui 5.0.1-2

package/etc/ts-sudoku-ui.api.md

@@ -0,0 +1,481 @@
+## API Report File for "@fgv/ts-sudoku-ui"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { CellId } from '@fgv/ts-sudoku-lib';
+import { ICage } from '@fgv/ts-sudoku-lib';
+import { ICellContents } from '@fgv/ts-sudoku-lib';
+import { IPuzzleDefinition } from '@fgv/ts-sudoku-lib';
+import { Logging } from '@fgv/ts-utils';
+import { NavigationDirection } from '@fgv/ts-sudoku-lib';
+import { NavigationWrap } from '@fgv/ts-sudoku-lib';
+import { PuzzleSession } from '@fgv/ts-sudoku-lib';
+import { default as React_2 } from 'react';
+import { ReactNode } from 'react';
+import { Result } from '@fgv/ts-utils';
+
+// @public
+export const CageOverlay: React_2.FC<ICageOverlayProps>;
+
+// @public
+export const CageSumIndicator: React_2.FC<ICageSumIndicatorProps>;
+
+// @public
+export const CombinationCard: React_2.NamedExoticComponent<ICombinationCardProps>;
+
+// @public
+export const CombinationGrid: React_2.FC<ICombinationGridProps>;
+
+// @public
+export const CompactControlRibbon: React_2.FC<ICompactControlRibbonProps>;
+
+// @public
+export const DefaultDiagnosticLogger: Logging.LogReporter<unknown>;
+
+// @public
+export type DeviceType = 'mobile' | 'tablet' | 'desktop';
+
+// @public
+export const DiagnosticLoggerContext: React_2.Context<Logging.LogReporter<unknown>>;
+
+// @public
+export const DiagnosticLoggerProvider: React_2.FC<IDiagnosticLoggerProviderProps>;
+
+// @public
+export const DualKeypad: React_2.FC<IDualKeypadProps>;
+
+// @public
+export interface ICageDisplayInfo {
+    // (undocumented)
+    readonly cage: ICage;
+    // (undocumented)
+    readonly currentSum?: number;
+    // (undocumented)
+    readonly isComplete: boolean;
+    // (undocumented)
+    readonly isHighlighted: boolean;
+    // (undocumented)
+    readonly isValid: boolean;
+}
+
+// @public
+export interface ICageOverlayProps {
+    // (undocumented)
+    readonly cages: ICageDisplayInfo[];
+    // (undocumented)
+    readonly cellSize: number;
+    // (undocumented)
+    readonly className?: string;
+    // (undocumented)
+    readonly gridSize: {
+        width: number;
+        height: number;
+    };
+    // (undocumented)
+    readonly numColumns?: number;
+    // (undocumented)
+    readonly numRows?: number;
+}
+
+// @public
+export interface ICageSumIndicatorProps {
+    // (undocumented)
+    readonly cage: ICage;
+    // (undocumented)
+    readonly className?: string;
+    // (undocumented)
+    readonly currentSum?: number;
+    // (undocumented)
+    readonly isComplete: boolean;
+    // (undocumented)
+    readonly isValid: boolean;
+    // (undocumented)
+    readonly position: {
+        top: number;
+        left: number;
+    };
+}
+
+// @public
+export interface ICellDisplayInfo {
+    // (undocumented)
+    readonly column: number;
+    // (undocumented)
+    readonly contents: ICellContents;
+    // (undocumented)
+    readonly hasValidationError: boolean;
+    // (undocumented)
+    readonly id: CellId;
+    // (undocumented)
+    readonly isImmutable: boolean;
+    // (undocumented)
+    readonly row: number;
+}
+
+// @public
+export interface ICombinationCardProps {
+    // (undocumented)
+    readonly className?: string;
+    // (undocumented)
+    readonly combination: ICombinationDisplayInfo;
+    // (undocumented)
+    readonly onToggle: (signature: string) => void;
+}
+
+// @public
+export interface ICombinationDisplayInfo {
+    // (undocumented)
+    readonly combination: number[];
+    // (undocumented)
+    readonly isEliminated: boolean;
+    // (undocumented)
+    readonly signature: string;
+}
+
+// @public
+export interface ICombinationGridProps {
+    // (undocumented)
+    readonly className?: string;
+    // (undocumented)
+    readonly combinations: ICombinationDisplayInfo[];
+    // (undocumented)
+    readonly mode: IKillerCombinationsMode;
+    // (undocumented)
+    readonly onToggle: (signature: string) => void;
+}
+
+// @public
+export interface ICompactControlRibbonProps {
+    readonly canRedo: boolean;
+    readonly canReset: boolean;
+    readonly canShowCombinations?: boolean;
+    readonly canUndo: boolean;
+    readonly className?: string;
+    readonly isSolved: boolean;
+    readonly isValid: boolean;
+    readonly onCombinations?: () => void;
+    readonly onExport: () => void;
+    readonly onRedo: () => void;
+    readonly onReset: () => void;
+    readonly onUndo: () => void;
+    readonly showCombinations?: boolean;
+    readonly validationErrors: ReadonlyArray<{
+        readonly type: string;
+        readonly cellId: string;
+        readonly message: string;
+    }>;
+}
+
+// @public
+export interface IDiagnosticLoggerProviderProps {
+    children: ReactNode;
+    logger?: Logging.LogReporter<unknown>;
+}
+
+// @public
+export interface IDualKeypadProps {
+    readonly className?: string;
+    readonly disabled?: boolean;
+    readonly forceLayoutMode?: KeypadLayoutMode;
+    readonly hasCellSelection: boolean;
+    // Warning: (ae-forgotten-export) The symbol "InputMode" needs to be exported by the entry point index.d.ts
+    readonly inputMode: InputMode;
+    readonly onClearNotes: () => void;
+    readonly onClearValues: () => void;
+    readonly onInputModeChange: (mode: InputMode) => void;
+    readonly onNotePress: (number: number) => void;
+    readonly onValuePress: (number: number) => void;
+    readonly selectedCellCount: number;
+    readonly showOverlayToggle?: boolean;
+}
+
+// @public
+export interface IEliminationState {
+    // (undocumented)
+    readonly clearAll: () => void;
+    // (undocumented)
+    readonly eliminatedSignatures: Set<string>;
+    // (undocumented)
+    readonly toggleElimination: (signature: string) => void;
+}
+
+// @public
+export interface IKeyboardShortcutOptions {
+    // (undocumented)
+    readonly ctrl?: boolean;
+    // (undocumented)
+    readonly meta?: boolean;
+    // (undocumented)
+    readonly preventDefault?: boolean;
+    // (undocumented)
+    readonly shift?: boolean;
+}
+
+// @public
+export interface IKillerCombinationsExplorerProps {
+    // (undocumented)
+    readonly className?: string;
+    // (undocumented)
+    readonly isOpen: boolean;
+    // (undocumented)
+    readonly mobileBreakpoint?: number;
+    // (undocumented)
+    readonly onClose: () => void;
+    // (undocumented)
+    readonly puzzleId?: string;
+    // (undocumented)
+    readonly selectedCage: ICage | null;
+}
+
+// @public
+export type IKillerCombinationsMode = 'panel' | 'modal';
+
+// @public
+export interface INumberKeypadProps {
+    readonly className?: string;
+    readonly compact?: boolean;
+    readonly disabled?: boolean;
+    readonly inputMode: InputMode;
+    readonly isActive: boolean;
+    readonly keypadType: 'notes' | 'values';
+    readonly onClear: () => void;
+    readonly onNumberPress: (number: number) => void;
+}
+
+// @public
+export interface IResponsiveLayoutInfo {
+    readonly deviceType: DeviceType;
+    readonly hasSpaceForDualKeypads: boolean;
+    readonly isSmallScreen: boolean;
+    readonly isTouchDevice: boolean;
+    readonly keypadLayoutMode: KeypadLayoutMode;
+    readonly orientation: ScreenOrientation_2;
+    readonly screenHeight: number;
+    readonly screenWidth: number;
+}
+
+// @public
+export interface ISudokuCellProps {
+    // (undocumented)
+    readonly cellInfo: ICellDisplayInfo;
+    // (undocumented)
+    readonly className?: string;
+    // (undocumented)
+    readonly inputMode: InputMode;
+    // (undocumented)
+    readonly isSelected: boolean;
+    // (undocumented)
+    readonly onClearAllNotes: () => void;
+    // (undocumented)
+    readonly onDragOver?: () => void;
+    // (undocumented)
+    readonly onLongPressToggle?: (event: React.TouchEvent | React.MouseEvent) => void;
+    // (undocumented)
+    readonly onNoteToggle: (note: number) => void;
+    // (undocumented)
+    readonly onSelect: (event?: React.MouseEvent) => void;
+    // (undocumented)
+    readonly onValueChange: (value: number | undefined) => void;
+    // (undocumented)
+    readonly puzzleDimensions?: {
+        readonly numRows: number;
+        readonly numColumns: number;
+        readonly cageHeight: number;
+        readonly cageWidth: number;
+    };
+}
+
+// @public
+export interface ISudokuControlsProps {
+    // (undocumented)
+    readonly canRedo: boolean;
+    // (undocumented)
+    readonly canReset: boolean;
+    // (undocumented)
+    readonly canUndo: boolean;
+    // (undocumented)
+    readonly className?: string;
+    // (undocumented)
+    readonly isSolved: boolean;
+    // (undocumented)
+    readonly isValid: boolean;
+    // (undocumented)
+    readonly onExport: () => void;
+    // (undocumented)
+    readonly onRedo: () => void;
+    // (undocumented)
+    readonly onReset: () => void;
+    // (undocumented)
+    readonly onUndo: () => void;
+}
+
+// @public
+export interface ISudokuGridEntryProps {
+    readonly className?: string;
+    readonly forceLayoutMode?: KeypadLayoutMode;
+    readonly initialPuzzleDescription?: IPuzzleDefinition;
+    readonly onStateChange?: (isValid: boolean, isSolved: boolean) => void;
+    readonly onValidationErrors?: (errors: IValidationError[]) => void;
+}
+
+// @public
+export interface ISudokuGridProps {
+    // (undocumented)
+    readonly cages?: ICageDisplayInfo[];
+    // (undocumented)
+    readonly cells: ICellDisplayInfo[];
+    // (undocumented)
+    readonly className?: string;
+    // (undocumented)
+    readonly inputMode: InputMode;
+    // (undocumented)
+    readonly isDragging?: boolean;
+    // (undocumented)
+    readonly numColumns: number;
+    // (undocumented)
+    readonly numRows: number;
+    // (undocumented)
+    readonly onCellSelect: (cellId: CellId, event?: React.MouseEvent) => void;
+    // (undocumented)
+    readonly onCellValueChange: (cellId: CellId, value: number | undefined) => void;
+    // (undocumented)
+    readonly onClearAllNotes: (cellId: CellId) => void;
+    // (undocumented)
+    readonly onDragEnd?: () => void;
+    // (undocumented)
+    readonly onDragOver?: (cellId: CellId) => void;
+    // (undocumented)
+    readonly onLongPressToggle?: (cellId: CellId, event: React.TouchEvent | React.MouseEvent) => void;
+    // (undocumented)
+    readonly onNavigate: (direction: NavigationDirection) => void;
+    // (undocumented)
+    readonly onNoteToggle: (cellId: CellId, note: number) => void;
+    // (undocumented)
+    readonly puzzleDimensions?: {
+        readonly cageHeightInCells: number;
+        readonly cageWidthInCells: number;
+        readonly boardWidthInCages: number;
+        readonly boardHeightInCages: number;
+        readonly totalRows: number;
+        readonly totalColumns: number;
+        readonly maxValue: number;
+        readonly totalCages: number;
+        readonly basicCageTotal: number;
+    };
+    // (undocumented)
+    readonly puzzleType?: string;
+    // (undocumented)
+    readonly selectedCell: CellId | null;
+    // (undocumented)
+    readonly selectedCells: CellId[];
+}
+
+// @public
+export interface IValidationDisplayProps {
+    // (undocumented)
+    readonly className?: string;
+    // (undocumented)
+    readonly errors: IValidationError[];
+    // (undocumented)
+    readonly isSolved: boolean;
+    // (undocumented)
+    readonly isValid: boolean;
+}
+
+// @public
+export interface IValidationError {
+    // (undocumented)
+    readonly cellId: CellId;
+    // (undocumented)
+    readonly conflictingCells: CellId[];
+    // (undocumented)
+    readonly message: string;
+    // (undocumented)
+    readonly type: 'duplicate-row' | 'duplicate-column' | 'duplicate-section' | 'duplicate-diagonal' | 'invalid-value';
+}
+
+// @public
+export type KeypadLayoutMode = 'side-by-side' | 'stacked' | 'overlay' | 'hidden';
+
+// @public
+export const KillerCombinationsExplorer: React_2.FC<IKillerCombinationsExplorerProps>;
+
+// Warning: (ae-forgotten-export) The symbol "IKillerCombinationsModalProps" needs to be exported by the entry point index.d.ts
+//
+// @public
+export const KillerCombinationsModal: React_2.FC<IKillerCombinationsModalProps>;
+
+// Warning: (ae-forgotten-export) The symbol "IKillerCombinationsPanelProps" needs to be exported by the entry point index.d.ts
+//
+// @public
+export const KillerCombinationsPanel: React_2.FC<IKillerCombinationsPanelProps>;
+
+// @public
+export const NumberKeypad: React_2.FC<INumberKeypadProps>;
+
+// @public
+type ScreenOrientation_2 = 'portrait' | 'landscape';
+export { ScreenOrientation_2 as ScreenOrientation }
+
+// @public
+export const SudokuCell: React_2.FC<ISudokuCellProps>;
+
+// @public
+export const SudokuControls: React_2.FC<ISudokuControlsProps>;
+
+// @public
+export const SudokuGrid: React_2.FC<ISudokuGridProps>;
+
+// @public
+export const SudokuGridEntry: React_2.FC<ISudokuGridEntryProps>;
+
+// @public
+export function useCombinationElimination(puzzleId: string | undefined, cageId: string | undefined): IEliminationState;
+
+// @public
+export const useDiagnosticLogger: () => Logging.LogReporter<unknown>;
+
+// @public
+export function useKeyboardShortcut(key: string, callback: () => void, options?: IKeyboardShortcutOptions): void;
+
+// @public
+export function useKillerCombinations(cage: ICage | null): Result<ICombinationDisplayInfo[]>;
+
+// @public
+export function usePuzzleSession(initialPuzzleDescription?: IPuzzleDefinition): {
+    session: PuzzleSession | null;
+    selectedCell: CellId | null;
+    selectedCells: CellId[];
+    inputMode: InputMode;
+    setSelectedCell: (cell: CellId | null) => void;
+    setSelectedCells: (cells: CellId[]) => void;
+    setInputMode: (mode: InputMode) => void;
+    cellDisplayInfo: ICellDisplayInfo[];
+    cageDisplayInfo: ICageDisplayInfo[];
+    validationErrors: IValidationError[];
+    isValid: boolean;
+    isSolved: boolean;
+    canUndo: boolean;
+    canRedo: boolean;
+    error: string | null;
+    updateCellValue: (cellId: CellId, value: number | undefined) => void;
+    toggleCellNote: (cellId: CellId, note: number) => void;
+    clearCellNotes: (cellId: CellId) => void;
+    navigateToCell: (direction: NavigationDirection, wrap?: NavigationWrap) => void;
+    undo: () => void;
+    redo: () => void;
+    reset: () => void;
+    exportPuzzle: () => IPuzzleDefinition | null;
+};
+
+// @public
+export function useResponsiveLayout(forceLayoutMode?: KeypadLayoutMode): IResponsiveLayoutInfo;
+
+// @public
+export const ValidationDisplay: React_2.FC<IValidationDisplayProps>;
+
+// (No @packageDocumentation comment for this package)
+
+```

package/lib/components/CageOverlay.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ICageOverlayProps } from '../types';
+/**
+ * Component for rendering cage boundaries and sum indicators in Killer Sudoku
+ * @public
+ */
+export declare const CageOverlay: React.FC<ICageOverlayProps>;
+//# sourceMappingURL=CageOverlay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CageOverlay.d.ts","sourceRoot":"","sources":["../../src/components/CageOverlay.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAElD,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAiD7C;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAmInD,CAAC"}

package/lib/components/CageOverlay.js

@@ -0,0 +1,133 @@
+/*
+ * 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, useEffect } from 'react';
+import { parseCellId } from '@fgv/ts-sudoku-lib';
+import { CageSumIndicator } from './CageSumIndicator';
+import { CagePatternManager } from '../utils/CagePatternManager';
+import { CageLookupManager } from '../utils/CageLookupManager';
+import { useDiagnosticLogger } from '../contexts/DiagnosticLoggerContext';
+/**
+ * Helper to get cell position from CellId
+ */
+function getTopLeftPosition(cellIds, log, numRows, numColumns) {
+    if (cellIds.length === 0)
+        return { top: 0, left: 0 };
+    const positions = cellIds.map((cellId) => {
+        const parsed = parseCellId(cellId);
+        if (parsed && parsed.row >= 0 && parsed.row < numRows && parsed.col >= 0 && parsed.col < numColumns) {
+            return parsed;
+        }
+        // Fallback - should not happen with valid CellIds
+        log.warn(`Invalid CellId format: ${cellId}`);
+        return { row: 0, col: 0 };
+    });
+    // Find the top-left most cell
+    let minRow = positions[0].row;
+    let minCol = positions[0].col;
+    positions.forEach(({ row, col }) => {
+        if (row < minRow || (row === minRow && col < minCol)) {
+            minRow = row;
+            minCol = col;
+        }
+    });
+    // Convert grid coordinates to percentage-based positioning
+    const cellWidthPercent = 100 / numColumns;
+    const cellHeightPercent = 100 / numRows;
+    return {
+        top: minRow * cellHeightPercent + 0.5, // Small offset from corner
+        left: minCol * cellWidthPercent + 0.5 // Small offset from corner
+    };
+}
+/**
+ * Component for rendering cage boundaries and sum indicators in Killer Sudoku
+ * @public
+ */
+export const CageOverlay = ({ cages, gridSize, cellSize, numRows = 9, numColumns = 9, className }) => {
+    const log = useDiagnosticLogger();
+    // Initialize managers once
+    const patternManager = useMemo(() => new CagePatternManager(), []);
+    const lookupManager = useMemo(() => CageLookupManager.getInstance(), []);
+    // Debug logging
+    useEffect(() => {
+        log.info('CageOverlay rendered', {
+            cageCount: cages.length,
+            gridSize,
+            cellSize,
+            cages: cages.map((c) => ({ id: c.cage.id, cellIds: c.cage.cellIds }))
+        });
+    }, [cages, gridSize, cellSize, log]);
+    // Calculate SVG viewBox and class names
+    const viewBox = `0 0 ${gridSize.width} ${gridSize.height}`;
+    const overlayClasses = useMemo(() => {
+        const classes = ['cage-overlay'];
+        if (className)
+            classes.push(className);
+        return classes.join(' ');
+    }, [className]);
+    return (React.createElement("div", { className: `
+        ${overlayClasses}
+        absolute inset-0 w-full h-full pointer-events-none
+      `, style: { zIndex: 1000 }, "data-testid": "cage-overlay" },
+        React.createElement("svg", { width: "100%", height: "100%", viewBox: viewBox, className: "absolute inset-0", preserveAspectRatio: "none" }, cages.map((cageInfo, index) => {
+            const { cage, isHighlighted, isValid } = cageInfo;
+            // Build occupied cells set for this cage
+            const occupiedCells = patternManager.buildOccupiedCellsSet(cage.cellIds);
+            // Render each cell with connected borders
+            return cage.cellIds.map((cellId, cellIndex) => {
+                // Parse cell position using centralized function
+                const parsed = parseCellId(cellId);
+                let row = 0, col = 0;
+                if (parsed &&
+                    parsed.row >= 0 &&
+                    parsed.row < numRows &&
+                    parsed.col >= 0 &&
+                    parsed.col < numColumns) {
+                    row = parsed.row;
+                    col = parsed.col;
+                }
+                else {
+                    log.warn(`Invalid CellId format: ${cellId}`);
+                }
+                const x = col * cellSize;
+                const y = row * cellSize;
+                // Analyze neighbors and get pattern
+                const neighbors = patternManager.analyzeNeighbors(cellId, occupiedCells);
+                const neighborPattern = lookupManager.neighborsToPattern(neighbors);
+                const pathData = lookupManager.getPatternSVG(neighborPattern);
+                // Skip if no path data
+                if (!pathData) {
+                    return null;
+                }
+                // Render connected border pattern
+                return (React.createElement("g", { key: /* c8 ignore next 1 - defense in depth */ `${cage.id ?? index}-${cellIndex}`, transform: `translate(${x}, ${y}) scale(${cellSize})` },
+                    React.createElement("path", { d: pathData, stroke: isHighlighted ? '#1e40af' : isValid ? '#2563eb' : '#dc2626', strokeWidth: 0.8 / cellSize, strokeDasharray: "6 4", strokeLinecap: "round", strokeLinejoin: "round", fill: "none", opacity: "1.0", vectorEffect: "non-scaling-stroke" })));
+            });
+        })),
+        cages.map((cageInfo, index) => {
+            const { cage, currentSum, isComplete, isValid } = cageInfo;
+            const position = getTopLeftPosition(cage.cellIds, log, numRows, numColumns);
+            return (React.createElement(CageSumIndicator, { key: /* c8 ignore next 1 - defense in depth */ cage.id ?? index, cage: cage, currentSum: currentSum, isComplete: isComplete, isValid: isValid, position: position }));
+        })));
+};
+//# sourceMappingURL=CageOverlay.js.map

package/lib/components/CageOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CageOverlay.js","sourceRoot":"","sources":["../../src/components/CageOverlay.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, { useMemo, useEffect } from 'react';\nimport { CellId, parseCellId } from '@fgv/ts-sudoku-lib';\nimport { ICageOverlayProps } from '../types';\nimport { CageSumIndicator } from './CageSumIndicator';\nimport { CagePatternManager } from '../utils/CagePatternManager';\nimport { CageLookupManager } from '../utils/CageLookupManager';\nimport { useDiagnosticLogger } from '../contexts/DiagnosticLoggerContext';\nimport { Logging } from '@fgv/ts-utils';\n\n/**\n * Helper to get cell position from CellId\n */\nfunction getTopLeftPosition(\n  cellIds: CellId[],\n  log: Logging.LogReporter<unknown, unknown>,\n  numRows: number,\n  numColumns: number\n): { top: number; left: number } {\n  if (cellIds.length === 0) return { top: 0, left: 0 };\n\n  const positions = cellIds.map((cellId) => {\n    const parsed = parseCellId(cellId);\n    if (parsed && parsed.row >= 0 && parsed.row < numRows && parsed.col >= 0 && parsed.col < numColumns) {\n      return parsed;\n    }\n    // Fallback - should not happen with valid CellIds\n    log.warn(`Invalid CellId format: ${cellId}`);\n    return { row: 0, col: 0 };\n  });\n\n  // Find the top-left most cell\n  let minRow = positions[0].row;\n  let minCol = positions[0].col;\n\n  positions.forEach(({ row, col }) => {\n    if (row < minRow || (row === minRow && col < minCol)) {\n      minRow = row;\n      minCol = col;\n    }\n  });\n\n  // Convert grid coordinates to percentage-based positioning\n  const cellWidthPercent = 100 / numColumns;\n  const cellHeightPercent = 100 / numRows;\n\n  return {\n    top: minRow * cellHeightPercent + 0.5, // Small offset from corner\n    left: minCol * cellWidthPercent + 0.5 // Small offset from corner\n  };\n}\n\n/**\n * Component for rendering cage boundaries and sum indicators in Killer Sudoku\n * @public\n */\nexport const CageOverlay: React.FC<ICageOverlayProps> = ({\n  cages,\n  gridSize,\n  cellSize,\n  numRows = 9,\n  numColumns = 9,\n  className\n}) => {\n  const log = useDiagnosticLogger();\n\n  // Initialize managers once\n  const patternManager = useMemo(() => new CagePatternManager(), []);\n  const lookupManager = useMemo(() => CageLookupManager.getInstance(), []);\n\n  // Debug logging\n  useEffect(() => {\n    log.info('CageOverlay rendered', {\n      cageCount: cages.length,\n      gridSize,\n      cellSize,\n      cages: cages.map((c) => ({ id: c.cage.id, cellIds: c.cage.cellIds }))\n    });\n  }, [cages, gridSize, cellSize, log]);\n\n  // Calculate SVG viewBox and class names\n  const viewBox = `0 0 ${gridSize.width} ${gridSize.height}`;\n\n  const overlayClasses = useMemo(() => {\n    const classes = ['cage-overlay'];\n    if (className) classes.push(className);\n    return classes.join(' ');\n  }, [className]);\n\n  return (\n    <div\n      className={`\n        ${overlayClasses}\n        absolute inset-0 w-full h-full pointer-events-none\n      `}\n      style={{ zIndex: 1000 }}\n      data-testid=\"cage-overlay\"\n    >\n      {/* SVG for cage boundaries using connected border system */}\n      <svg\n        width=\"100%\"\n        height=\"100%\"\n        viewBox={viewBox}\n        className=\"absolute inset-0\"\n        preserveAspectRatio=\"none\"\n      >\n        {/* Render connected cage borders using two-stage lookup */}\n        {cages.map((cageInfo, index) => {\n          const { cage, isHighlighted, isValid } = cageInfo;\n\n          // Build occupied cells set for this cage\n          const occupiedCells = patternManager.buildOccupiedCellsSet(cage.cellIds);\n\n          // Render each cell with connected borders\n          return cage.cellIds.map((cellId, cellIndex) => {\n            // Parse cell position using centralized function\n            const parsed = parseCellId(cellId);\n            let row = 0,\n              col = 0;\n\n            if (\n              parsed &&\n              parsed.row >= 0 &&\n              parsed.row < numRows &&\n              parsed.col >= 0 &&\n              parsed.col < numColumns\n            ) {\n              row = parsed.row;\n              col = parsed.col;\n            } else {\n              log.warn(`Invalid CellId format: ${cellId}`);\n            }\n\n            const x = col * cellSize;\n            const y = row * cellSize;\n\n            // Analyze neighbors and get pattern\n            const neighbors = patternManager.analyzeNeighbors(cellId, occupiedCells);\n            const neighborPattern = lookupManager.neighborsToPattern(neighbors);\n            const pathData = lookupManager.getPatternSVG(neighborPattern);\n\n            // Skip if no path data\n            if (!pathData) {\n              return null;\n            }\n\n            // Render connected border pattern\n            return (\n              <g\n                key={/* c8 ignore next 1 - defense in depth */ `${cage.id ?? index}-${cellIndex}`}\n                transform={`translate(${x}, ${y}) scale(${cellSize})`}\n              >\n                <path\n                  d={pathData}\n                  stroke={isHighlighted ? '#1e40af' : isValid ? '#2563eb' : '#dc2626'}\n                  strokeWidth={0.8 / cellSize}\n                  strokeDasharray=\"6 4\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  fill=\"none\"\n                  opacity=\"1.0\"\n                  vectorEffect=\"non-scaling-stroke\"\n                />\n              </g>\n            );\n          });\n        })}\n      </svg>\n\n      {/* Sum indicators */}\n      {cages.map((cageInfo, index) => {\n        const { cage, currentSum, isComplete, isValid } = cageInfo;\n        const position = getTopLeftPosition(cage.cellIds, log, numRows, numColumns);\n\n        return (\n          <CageSumIndicator\n            key={/* c8 ignore next 1 - defense in depth */ cage.id ?? index}\n            cage={cage}\n            currentSum={currentSum}\n            isComplete={isComplete}\n            isValid={isValid}\n            position={position}\n          />\n        );\n      })}\n    </div>\n  );\n};\n"]}

package/lib/components/CageSumIndicator.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ICageSumIndicatorProps } from '../types';
+/**
+ * Component for displaying the target sum of a cage in Killer Sudoku
+ * @public
+ */
+export declare const CageSumIndicator: React.FC<ICageSumIndicatorProps>;
+//# sourceMappingURL=CageSumIndicator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CageSumIndicator.d.ts","sourceRoot":"","sources":["../../src/components/CageSumIndicator.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAElD;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA0D7D,CAAC"}