snice 4.9.0 → 4.10.0

package/dist/components/spreadsheet/snice-spreadsheet.js

@@ -0,0 +1,1104 @@
+import { __esDecorate, __runInitializers } from 'tslib';
+import { element, property, query, styles, ready, watch, on, dispatch, render, css, html } from 'snice';
+
+var sheetStyles = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);contain:layout style paint;width:100%;--spreadsheet-border:var(--snice-color-border, rgb(226 226 226));--spreadsheet-bg:var(--snice-color-background, rgb(255 255 255));--spreadsheet-bg-element:var(--snice-color-background-element, rgb(252 251 249));--spreadsheet-text:var(--snice-color-text, rgb(23 23 23));--spreadsheet-text-secondary:var(--snice-color-text-secondary, rgb(82 82 82));--spreadsheet-text-tertiary:var(--snice-color-text-tertiary, rgb(115 115 115));--spreadsheet-primary:var(--snice-color-primary, rgb(37 99 235));--spreadsheet-primary-subtle:var(--snice-color-primary-subtle, rgb(239 246 255));--spreadsheet-hover:var(--snice-color-background-hover, rgb(241 241 241));--spreadsheet-grid:rgba(200, 200, 200, 0.5)}.spreadsheet-formula-bar{display:flex;align-items:center;gap:var(--snice-spacing-xs,.5rem);padding:var(--snice-spacing-2xs,.25rem) var(--snice-spacing-xs,.5rem);border:1px solid var(--spreadsheet-border);border-bottom:none;border-radius:var(--snice-border-radius-lg,.5rem) var(--snice-border-radius-lg,.5rem) 0 0;background:var(--spreadsheet-bg-element);font-size:var(--snice-font-size-sm, .875rem)}.spreadsheet-cell-ref{display:inline-flex;align-items:center;justify-content:center;font-weight:var(--snice-font-weight-semibold,600);color:var(--spreadsheet-text-secondary);min-width:3.5rem;text-align:center;font-variant-numeric:tabular-nums;font-size:var(--snice-font-size-xs, .75rem);padding:var(--snice-spacing-3xs,.125rem) var(--snice-spacing-xs,.5rem);border:1px solid var(--spreadsheet-border);border-radius:var(--snice-border-radius-md,.25rem);background:var(--spreadsheet-bg);height:1.5rem}.spreadsheet-formula-input{flex:1;border:none;outline:0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:inherit;padding:var(--snice-spacing-2xs,.25rem) var(--snice-spacing-xs,.5rem);background:0 0;color:var(--spreadsheet-text)}.spreadsheet{border:1px solid var(--spreadsheet-border);border-radius:0 0 var(--snice-border-radius-lg,.5rem) var(--snice-border-radius-lg,.5rem);overflow:auto;background:var(--spreadsheet-bg);position:relative;outline:0}.spreadsheet-table{border-collapse:collapse;width:max-content;min-width:100%;font-size:var(--snice-font-size-sm, .875rem);table-layout:fixed}.spreadsheet-th{background:var(--spreadsheet-bg-element);border-right:1px solid var(--spreadsheet-grid);border-bottom:2px solid var(--spreadsheet-border);padding:var(--snice-spacing-2xs,.25rem) var(--snice-spacing-sm,.75rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--spreadsheet-text);text-align:left;white-space:nowrap;cursor:pointer;user-select:none;position:sticky;top:0;z-index:2;font-size:var(--snice-font-size-xs, .75rem);height:1.75rem;min-width:5rem}.spreadsheet-th:hover{background:var(--spreadsheet-hover)}.spreadsheet-th.col-selected{background:var(--spreadsheet-primary-subtle);color:var(--spreadsheet-primary)}.spreadsheet-th-sort{display:inline-flex;align-items:center;gap:var(--snice-spacing-2xs,.25rem)}.spreadsheet-th-sort-icon{opacity:.4;font-size:.5rem}.spreadsheet-th-sort-icon.active{opacity:1;color:var(--spreadsheet-primary)}.spreadsheet-resize-handle{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;z-index:3}.spreadsheet-resize-handle.resizing,.spreadsheet-resize-handle:hover{background:var(--spreadsheet-primary)}.spreadsheet-row-num{background:var(--spreadsheet-bg-element);border-right:1px solid var(--spreadsheet-grid);border-bottom:1px solid var(--spreadsheet-grid);padding:0 var(--snice-spacing-xs,.5rem);font-size:var(--snice-font-size-xs, .75rem);font-variant-numeric:tabular-nums;color:var(--spreadsheet-text-tertiary);text-align:center;width:2.75rem;min-width:2.75rem;cursor:pointer;user-select:none;position:sticky;left:0;z-index:1}.spreadsheet-row-num:hover{background:var(--spreadsheet-hover)}.spreadsheet-row-num.row-selected{background:var(--spreadsheet-primary-subtle);color:var(--spreadsheet-primary);font-weight:var(--snice-font-weight-semibold,600)}th.spreadsheet-row-num{position:sticky;top:0;left:0;z-index:4;border-bottom:2px solid var(--spreadsheet-border)}.spreadsheet-td{border-right:1px solid var(--spreadsheet-grid);border-bottom:1px solid var(--spreadsheet-grid);padding:0;position:relative;min-width:5rem;height:1.75rem}.spreadsheet-td.selected{outline:2px solid var(--spreadsheet-primary);outline-offset:-2px;z-index:1}.spreadsheet-td.in-range{background:var(--spreadsheet-primary-subtle)}.spreadsheet-cell{display:block;width:100%;padding:var(--snice-spacing-3xs,.125rem) var(--snice-spacing-xs,.5rem);color:var(--spreadsheet-text);cursor:cell;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.75rem;line-height:1.75rem;box-sizing:border-box}.spreadsheet-table tbody tr:hover .spreadsheet-td:not(.selected):not(.in-range){background:rgba(0,0,0,.015)}.spreadsheet-table tbody tr:hover .spreadsheet-row-num:not(.row-selected){background:var(--spreadsheet-hover)}.spreadsheet-input{display:block;width:100%;padding:var(--snice-spacing-3xs,.125rem) var(--snice-spacing-xs,.5rem);border:none;outline:0;font-family:inherit;font-size:inherit;color:var(--spreadsheet-text);background:rgb(255 255 240);box-sizing:border-box;min-height:1.75rem;line-height:1.75rem}.spreadsheet-select{display:block;width:100%;padding:var(--snice-spacing-3xs,.125rem) var(--snice-spacing-2xs,.25rem);border:none;outline:0;font-family:inherit;font-size:inherit;color:var(--spreadsheet-text);background:var(--spreadsheet-bg);cursor:pointer}.spreadsheet-checkbox{display:flex;align-items:center;justify-content:center;height:1.75rem}.spreadsheet-cell-number{text-align:right;font-variant-numeric:tabular-nums}.spreadsheet-cell-boolean{text-align:center}.spreadsheet-status-bar{display:flex;align-items:center;justify-content:flex-end;gap:var(--snice-spacing-md,1rem);padding:var(--snice-spacing-3xs,.125rem) var(--snice-spacing-sm,.75rem);border:1px solid var(--spreadsheet-border);border-top:none;border-radius:0 0 var(--snice-border-radius-lg,.5rem) var(--snice-border-radius-lg,.5rem);background:var(--spreadsheet-bg-element);font-size:var(--snice-font-size-xs, .75rem);color:var(--spreadsheet-text-secondary);min-height:1.375rem}.spreadsheet-status-item{display:inline-flex;gap:var(--snice-spacing-2xs,.25rem)}.spreadsheet-status-label{color:var(--spreadsheet-text-tertiary)}.spreadsheet-status-value{font-weight:var(--snice-font-weight-medium,500);font-variant-numeric:tabular-nums}.spreadsheet-context-menu{position:fixed;min-width:12.5rem;background:var(--spreadsheet-bg);border:1px solid var(--spreadsheet-border);border-radius:var(--snice-border-radius-md,.25rem);box-shadow:var(--snice-shadow-lg,0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1));padding:var(--snice-spacing-2xs,.25rem) 0;z-index:100;font-size:var(--snice-font-size-sm, .875rem)}.spreadsheet-context-item{display:flex;align-items:center;gap:var(--snice-spacing-sm,.75rem);padding:var(--snice-spacing-2xs,.25rem) var(--snice-spacing-sm,.75rem);cursor:pointer;color:var(--spreadsheet-text);white-space:nowrap}.spreadsheet-context-item:hover{background:var(--spreadsheet-primary-subtle)}.spreadsheet-context-item-shortcut{margin-left:auto;color:var(--spreadsheet-text-tertiary);font-size:var(--snice-font-size-xs, .75rem)}.spreadsheet-context-separator{height:1px;background:var(--spreadsheet-border);margin:var(--snice-spacing-2xs,.25rem) 0}.spreadsheet-add-row{display:flex;align-items:center;height:1.5rem;cursor:pointer;color:var(--spreadsheet-text-tertiary);font-size:var(--snice-font-size-xs, .75rem);user-select:none}.spreadsheet-add-row:hover{background:var(--spreadsheet-hover);color:var(--spreadsheet-primary)}.spreadsheet-add-row td{padding:0 var(--snice-spacing-xs,.5rem);border-right:1px solid var(--spreadsheet-grid);border-bottom:1px solid var(--spreadsheet-grid);height:1.5rem;line-height:1.5rem}.spreadsheet-add-col-header{background:var(--spreadsheet-bg-element);border-right:1px solid var(--spreadsheet-grid);border-bottom:2px solid var(--spreadsheet-border);width:2rem;min-width:2rem;text-align:center;cursor:pointer;color:var(--spreadsheet-text-tertiary);font-size:var(--snice-font-size-xs, .75rem);position:sticky;top:0;z-index:2;user-select:none}.spreadsheet-add-col-header:hover{background:var(--spreadsheet-hover);color:var(--spreadsheet-primary)}.spreadsheet-add-col-cell{border-right:1px solid var(--spreadsheet-grid);border-bottom:1px solid var(--spreadsheet-grid);width:2rem;min-width:2rem}.spreadsheet-empty{display:flex;align-items:center;justify-content:center;min-height:8rem;color:var(--spreadsheet-text-tertiary);font-size:var(--snice-font-size-sm, .875rem);cursor:default;user-select:none;padding:var(--snice-spacing-lg,1.5rem);text-align:center}";
+
+let SniceSpreadsheet = (() => {
+    let _classDecorators = [element('snice-spreadsheet')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _data_decorators;
+    let _data_initializers = [];
+    let _data_extraInitializers = [];
+    let _columns_decorators;
+    let _columns_initializers = [];
+    let _columns_extraInitializers = [];
+    let _readonly_decorators;
+    let _readonly_initializers = [];
+    let _readonly_extraInitializers = [];
+    let _cellRefEl_decorators;
+    let _cellRefEl_initializers = [];
+    let _cellRefEl_extraInitializers = [];
+    let _formulaInputEl_decorators;
+    let _formulaInputEl_initializers = [];
+    let _formulaInputEl_extraInitializers = [];
+    let _wrapperEl_decorators;
+    let _wrapperEl_initializers = [];
+    let _wrapperEl_extraInitializers = [];
+    let _statusBarEl_decorators;
+    let _statusBarEl_initializers = [];
+    let _statusBarEl_extraInitializers = [];
+    let _contextMenuEl_decorators;
+    let _contextMenuEl_initializers = [];
+    let _contextMenuEl_extraInitializers = [];
+    let _componentStyles_decorators;
+    let _init_decorators;
+    let _onDataChange_decorators;
+    let _handleKeydown_decorators;
+    let _handleCopy_decorators;
+    let _handlePaste_decorators;
+    let _emitCellChange_decorators;
+    let _emitCellSelect_decorators;
+    let _emitRowSelect_decorators;
+    let _emitColumnSort_decorators;
+    let _renderSheet_decorators;
+    var SniceSpreadsheet = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _data_decorators = [property({ type: Array })];
+            _columns_decorators = [property({ type: Array })];
+            _readonly_decorators = [property({ type: Boolean })];
+            _cellRefEl_decorators = [query('.spreadsheet-cell-ref')];
+            _formulaInputEl_decorators = [query('.spreadsheet-formula-input')];
+            _wrapperEl_decorators = [query('.spreadsheet')];
+            _statusBarEl_decorators = [query('.spreadsheet-status-bar')];
+            _contextMenuEl_decorators = [query('.spreadsheet-context-menu')];
+            _componentStyles_decorators = [styles()];
+            _init_decorators = [ready()];
+            _onDataChange_decorators = [watch('data', 'columns')];
+            _handleKeydown_decorators = [on('keydown')];
+            _handleCopy_decorators = [on('copy')];
+            _handlePaste_decorators = [on('paste')];
+            _emitCellChange_decorators = [dispatch('cell-change', { bubbles: true, composed: true })];
+            _emitCellSelect_decorators = [dispatch('cell-select', { bubbles: true, composed: true })];
+            _emitRowSelect_decorators = [dispatch('row-select', { bubbles: true, composed: true })];
+            _emitColumnSort_decorators = [dispatch('column-sort', { bubbles: true, composed: true })];
+            _renderSheet_decorators = [render({ once: true })];
+            __esDecorate(this, null, _componentStyles_decorators, { kind: "method", name: "componentStyles", static: false, private: false, access: { has: obj => "componentStyles" in obj, get: obj => obj.componentStyles }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _init_decorators, { kind: "method", name: "init", static: false, private: false, access: { has: obj => "init" in obj, get: obj => obj.init }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onDataChange_decorators, { kind: "method", name: "onDataChange", static: false, private: false, access: { has: obj => "onDataChange" in obj, get: obj => obj.onDataChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleKeydown_decorators, { kind: "method", name: "handleKeydown", static: false, private: false, access: { has: obj => "handleKeydown" in obj, get: obj => obj.handleKeydown }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleCopy_decorators, { kind: "method", name: "handleCopy", static: false, private: false, access: { has: obj => "handleCopy" in obj, get: obj => obj.handleCopy }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handlePaste_decorators, { kind: "method", name: "handlePaste", static: false, private: false, access: { has: obj => "handlePaste" in obj, get: obj => obj.handlePaste }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitCellChange_decorators, { kind: "method", name: "emitCellChange", static: false, private: false, access: { has: obj => "emitCellChange" in obj, get: obj => obj.emitCellChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitCellSelect_decorators, { kind: "method", name: "emitCellSelect", static: false, private: false, access: { has: obj => "emitCellSelect" in obj, get: obj => obj.emitCellSelect }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitRowSelect_decorators, { kind: "method", name: "emitRowSelect", static: false, private: false, access: { has: obj => "emitRowSelect" in obj, get: obj => obj.emitRowSelect }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitColumnSort_decorators, { kind: "method", name: "emitColumnSort", static: false, private: false, access: { has: obj => "emitColumnSort" in obj, get: obj => obj.emitColumnSort }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _renderSheet_decorators, { kind: "method", name: "renderSheet", static: false, private: false, access: { has: obj => "renderSheet" in obj, get: obj => obj.renderSheet }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _data_decorators, { kind: "field", name: "data", static: false, private: false, access: { has: obj => "data" in obj, get: obj => obj.data, set: (obj, value) => { obj.data = value; } }, metadata: _metadata }, _data_initializers, _data_extraInitializers);
+            __esDecorate(null, null, _columns_decorators, { kind: "field", name: "columns", static: false, private: false, access: { has: obj => "columns" in obj, get: obj => obj.columns, set: (obj, value) => { obj.columns = value; } }, metadata: _metadata }, _columns_initializers, _columns_extraInitializers);
+            __esDecorate(null, null, _readonly_decorators, { kind: "field", name: "readonly", static: false, private: false, access: { has: obj => "readonly" in obj, get: obj => obj.readonly, set: (obj, value) => { obj.readonly = value; } }, metadata: _metadata }, _readonly_initializers, _readonly_extraInitializers);
+            __esDecorate(null, null, _cellRefEl_decorators, { kind: "field", name: "cellRefEl", static: false, private: false, access: { has: obj => "cellRefEl" in obj, get: obj => obj.cellRefEl, set: (obj, value) => { obj.cellRefEl = value; } }, metadata: _metadata }, _cellRefEl_initializers, _cellRefEl_extraInitializers);
+            __esDecorate(null, null, _formulaInputEl_decorators, { kind: "field", name: "formulaInputEl", static: false, private: false, access: { has: obj => "formulaInputEl" in obj, get: obj => obj.formulaInputEl, set: (obj, value) => { obj.formulaInputEl = value; } }, metadata: _metadata }, _formulaInputEl_initializers, _formulaInputEl_extraInitializers);
+            __esDecorate(null, null, _wrapperEl_decorators, { kind: "field", name: "wrapperEl", static: false, private: false, access: { has: obj => "wrapperEl" in obj, get: obj => obj.wrapperEl, set: (obj, value) => { obj.wrapperEl = value; } }, metadata: _metadata }, _wrapperEl_initializers, _wrapperEl_extraInitializers);
+            __esDecorate(null, null, _statusBarEl_decorators, { kind: "field", name: "statusBarEl", static: false, private: false, access: { has: obj => "statusBarEl" in obj, get: obj => obj.statusBarEl, set: (obj, value) => { obj.statusBarEl = value; } }, metadata: _metadata }, _statusBarEl_initializers, _statusBarEl_extraInitializers);
+            __esDecorate(null, null, _contextMenuEl_decorators, { kind: "field", name: "contextMenuEl", static: false, private: false, access: { has: obj => "contextMenuEl" in obj, get: obj => obj.contextMenuEl, set: (obj, value) => { obj.contextMenuEl = value; } }, metadata: _metadata }, _contextMenuEl_initializers, _contextMenuEl_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            SniceSpreadsheet = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static { this.UNDO_LIMIT = 100; }
+        componentStyles() {
+            return css `${sheetStyles}`;
+        }
+        init() {
+            this.rebuild();
+        }
+        onDataChange() {
+            this.rebuild();
+        }
+        // ── Public API ──
+        getCell(row, col) {
+            if (row >= 0 && row < this.data.length && col >= 0 && col < (this.data[row]?.length || 0)) {
+                return this.resolveValue(this.data[row][col]);
+            }
+            return undefined;
+        }
+        setCell(row, col, value, trackUndo = true) {
+            if (row < 0 || col < 0)
+                return;
+            while (this.data.length <= row)
+                this.data.push([]);
+            while (this.data[row].length <= col)
+                this.data[row].push('');
+            const oldValue = this.data[row][col];
+            this.data[row][col] = value;
+            if (trackUndo && oldValue !== value) {
+                this.pushUndo({ row, col, oldValue, newValue: value });
+            }
+            this.data = [...this.data];
+            this.emitCellChange(row, col, value, oldValue);
+        }
+        getData() {
+            return this.data.map(row => [...row]);
+        }
+        setData(data) {
+            this.data = data.map(row => [...row]);
+        }
+        // ── Undo/Redo ──
+        pushUndo(entry) {
+            this.undoStack.push(entry);
+            if (this.undoStack.length > SniceSpreadsheet.UNDO_LIMIT)
+                this.undoStack.shift();
+            this.redoStack = [];
+        }
+        undo() {
+            const entry = this.undoStack.pop();
+            if (!entry)
+                return;
+            this.redoStack.push(entry);
+            this.data[entry.row][entry.col] = entry.oldValue;
+            this.selectedCell = { row: entry.row, col: entry.col };
+            this.selectionStart = { ...this.selectedCell };
+            this.selectionEnd = { ...this.selectedCell };
+            this.data = [...this.data];
+        }
+        redo() {
+            const entry = this.redoStack.pop();
+            if (!entry)
+                return;
+            this.undoStack.push(entry);
+            this.data[entry.row][entry.col] = entry.newValue;
+            this.selectedCell = { row: entry.row, col: entry.col };
+            this.selectionStart = { ...this.selectedCell };
+            this.selectionEnd = { ...this.selectedCell };
+            this.data = [...this.data];
+        }
+        // ── Selection Helpers ──
+        getSelectionRange() {
+            if (!this.selectionStart || !this.selectionEnd)
+                return null;
+            return {
+                start: {
+                    row: Math.min(this.selectionStart.row, this.selectionEnd.row),
+                    col: Math.min(this.selectionStart.col, this.selectionEnd.col),
+                },
+                end: {
+                    row: Math.max(this.selectionStart.row, this.selectionEnd.row),
+                    col: Math.max(this.selectionStart.col, this.selectionEnd.col),
+                },
+            };
+        }
+        isInRange(row, col) {
+            const range = this.getSelectionRange();
+            if (!range)
+                return false;
+            return row >= range.start.row && row <= range.end.row &&
+                col >= range.start.col && col <= range.end.col;
+        }
+        hasMultiSelection() {
+            if (!this.selectionStart || !this.selectionEnd)
+                return false;
+            return this.selectionStart.row !== this.selectionEnd.row ||
+                this.selectionStart.col !== this.selectionEnd.col;
+        }
+        getSelectionStats() {
+            const range = this.getSelectionRange();
+            if (!range || !this.hasMultiSelection())
+                return null;
+            const nums = [];
+            for (let r = range.start.row; r <= range.end.row; r++) {
+                for (let c = range.start.col; c <= range.end.col; c++) {
+                    const val = this.getCell(r, c);
+                    const num = typeof val === 'number' ? val : parseFloat(val);
+                    if (!isNaN(num))
+                        nums.push(num);
+                }
+            }
+            if (nums.length === 0)
+                return null;
+            const sum = nums.reduce((a, b) => a + b, 0);
+            return { count: nums.length, sum, avg: sum / nums.length };
+        }
+        // ── Formula Support ──
+        resolveValue(value) {
+            if (typeof value !== 'string' || !value.startsWith('='))
+                return value;
+            try {
+                return this.evaluateFormula(value.substring(1).toUpperCase().trim());
+            }
+            catch {
+                return '#ERROR';
+            }
+        }
+        evaluateFormula(formula) {
+            const fnMatch = formula.match(/^(SUM|AVG|AVERAGE|COUNT|MIN|MAX)\(([^)]+)\)$/);
+            if (!fnMatch)
+                return '#ERROR';
+            const fn = fnMatch[1];
+            const nums = this.resolveRange(fnMatch[2]).filter(v => typeof v === 'number' && !isNaN(v));
+            switch (fn) {
+                case 'SUM': return nums.reduce((a, b) => a + b, 0);
+                case 'AVG':
+                case 'AVERAGE': return nums.length > 0 ? nums.reduce((a, b) => a + b, 0) / nums.length : 0;
+                case 'COUNT': return nums.length;
+                case 'MIN': return nums.length > 0 ? Math.min(...nums) : 0;
+                case 'MAX': return nums.length > 0 ? Math.max(...nums) : 0;
+                default: return '#ERROR';
+            }
+        }
+        resolveRange(rangeStr) {
+            const parts = rangeStr.split(':');
+            if (parts.length === 2) {
+                const start = this.parseCellRef(parts[0].trim());
+                const end = this.parseCellRef(parts[1].trim());
+                if (!start || !end)
+                    return [];
+                const values = [];
+                for (let r = start.row; r <= end.row; r++) {
+                    for (let c = start.col; c <= end.col; c++) {
+                        if (r < this.data.length && c < (this.data[r]?.length || 0)) {
+                            const raw = this.data[r][c];
+                            const val = typeof raw === 'string' && raw.startsWith('=') ? this.resolveValue(raw) : raw;
+                            const num = typeof val === 'number' ? val : parseFloat(val);
+                            if (!isNaN(num))
+                                values.push(num);
+                        }
+                    }
+                }
+                return values;
+            }
+            const ref = this.parseCellRef(rangeStr.trim());
+            if (ref && ref.row < this.data.length && ref.col < (this.data[ref.row]?.length || 0)) {
+                const val = this.resolveValue(this.data[ref.row][ref.col]);
+                return [typeof val === 'number' ? val : parseFloat(val)].filter(v => !isNaN(v));
+            }
+            return [];
+        }
+        parseCellRef(ref) {
+            const match = ref.match(/^([A-Z]+)(\d+)$/);
+            if (!match)
+                return null;
+            let col = 0;
+            for (const ch of match[1])
+                col = col * 26 + (ch.charCodeAt(0) - 64);
+            return { row: parseInt(match[2], 10) - 1, col: col - 1 };
+        }
+        colToLetter(col) {
+            let result = '';
+            let c = col;
+            while (c >= 0) {
+                result = String.fromCharCode(65 + (c % 26)) + result;
+                c = Math.floor(c / 26) - 1;
+            }
+            return result;
+        }
+        getCellRef() {
+            if (!this.selectedCell)
+                return '';
+            return `${this.colToLetter(this.selectedCell.col)}${this.selectedCell.row + 1}`;
+        }
+        getColumnCount() {
+            return Math.max(this.columns.length, ...this.data.map(row => row?.length || 0), 1);
+        }
+        getDefaultColWidth(col) {
+            return this.columns[col]?.width || 100;
+        }
+        getColWidth(col) {
+            return this.columnWidths.get(col) || this.getDefaultColWidth(col);
+        }
+        // ── Cell Interaction ──
+        handleCellMouseDown(row, col, e) {
+            if (this.editingCell)
+                this.commitEdit();
+            if (e.shiftKey && this.selectedCell) {
+                this.selectionEnd = { row, col };
+            }
+            else {
+                this.selectedCell = { row, col };
+                this.selectionStart = { row, col };
+                this.selectionEnd = { row, col };
+                this.isDragging = true;
+                this.boundDragMove = (ev) => this.handleDragMove(ev);
+                this.boundDragUp = () => this.handleDragEnd();
+                document.addEventListener('mousemove', this.boundDragMove);
+                document.addEventListener('mouseup', this.boundDragUp);
+            }
+            this.editingCell = null;
+            this.emitCellSelect(row, col);
+            this.updateSelection();
+        }
+        handleDragMove(e) {
+            if (!this.isDragging || !this.wrapperEl)
+                return;
+            const cells = this.wrapperEl.querySelectorAll('.spreadsheet-td');
+            let closestRow = -1, closestCol = -1, minDist = Infinity;
+            cells.forEach(cell => {
+                const r = parseInt(cell.getAttribute('data-row') || '-1');
+                const c = parseInt(cell.getAttribute('data-col') || '-1');
+                if (r < 0 || c < 0)
+                    return;
+                const rect = cell.getBoundingClientRect();
+                const dist = Math.hypot(e.clientX - (rect.left + rect.width / 2), e.clientY - (rect.top + rect.height / 2));
+                if (dist < minDist) {
+                    minDist = dist;
+                    closestRow = r;
+                    closestCol = c;
+                }
+            });
+            if (closestRow >= 0 && (closestRow !== this.selectionEnd?.row || closestCol !== this.selectionEnd?.col)) {
+                this.selectionEnd = { row: closestRow, col: closestCol };
+                this.updateSelection();
+            }
+        }
+        handleDragEnd() {
+            this.isDragging = false;
+            if (this.boundDragMove) {
+                document.removeEventListener('mousemove', this.boundDragMove);
+                this.boundDragMove = null;
+            }
+            if (this.boundDragUp) {
+                document.removeEventListener('mouseup', this.boundDragUp);
+                this.boundDragUp = null;
+            }
+        }
+        handleCellDblClick(row, col) {
+            if (this.readonly)
+                return;
+            this.startEditing(row, col);
+        }
+        startEditing(row, col, initialValue) {
+            if (this.readonly)
+                return;
+            this.editingCell = { row, col };
+            const raw = this.data[row]?.[col];
+            this.editValue = initialValue !== undefined ? initialValue : (raw != null ? String(raw) : '');
+            this.selectedCell = { row, col };
+            this.selectionStart = { row, col };
+            this.selectionEnd = { row, col };
+            const td = this.wrapperEl?.querySelector(`td[data-row="${row}"][data-col="${col}"]`);
+            if (!td)
+                return;
+            td.classList.add('selected');
+            const colDef = this.columns[col];
+            const cellType = colDef?.type || 'text';
+            if (cellType === 'boolean') {
+                td.innerHTML = `<div class="spreadsheet-checkbox"><input type="checkbox" ${raw ? 'checked' : ''} /></div>`;
+                const cb = td.querySelector('input');
+                cb?.addEventListener('change', (e) => { this.editingCell = null; this.setCell(row, col, e.target.checked); });
+                cb?.focus();
+            }
+            else if (cellType === 'select' && colDef?.options) {
+                const opts = colDef.options.map(opt => `<option value="${this.escAttr(opt)}" ${raw === opt ? 'selected' : ''}>${this.esc(opt)}</option>`).join('');
+                td.innerHTML = `<select class="spreadsheet-select">${opts}</select>`;
+                const sel = td.querySelector('select');
+                sel?.addEventListener('change', (e) => { this.editingCell = null; this.setCell(row, col, e.target.value); });
+                sel?.focus();
+            }
+            else {
+                const inputType = cellType === 'number' ? 'number' : cellType === 'date' ? 'date' : 'text';
+                td.innerHTML = `<input class="spreadsheet-input" type="${inputType}" value="${this.escAttr(this.editValue)}" />`;
+                const input = td.querySelector('input');
+                if (input) {
+                    input.addEventListener('input', (e) => { this.editValue = e.target.value; });
+                    input.addEventListener('keydown', (e) => this.handleEditKeydown(e));
+                    input.addEventListener('blur', () => this.commitEdit());
+                    input.focus();
+                    if (initialValue !== undefined) {
+                        input.setSelectionRange(input.value.length, input.value.length);
+                    }
+                    else {
+                        input.select();
+                    }
+                }
+            }
+            this.updateFormulaBar();
+        }
+        handleEditKeydown(e) {
+            const row = this.editingCell?.row;
+            const col = this.editingCell?.col;
+            if (row === undefined || col === undefined)
+                return;
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                this.commitEdit();
+                const nextRow = row + 1;
+                if (nextRow >= this.data.length)
+                    this.addRow();
+                this.selectedCell = { row: nextRow, col };
+                this.selectionStart = { ...this.selectedCell };
+                this.selectionEnd = { ...this.selectedCell };
+                this.updateSelection();
+            }
+            else if (e.key === 'Escape') {
+                e.preventDefault();
+                this.editingCell = null;
+                this.restoreCell(row, col);
+                this.updateSelection();
+            }
+            else if (e.key === 'Tab') {
+                e.preventDefault();
+                this.commitEdit();
+                const nextCol = e.shiftKey ? col - 1 : col + 1;
+                if (nextCol >= 0) {
+                    if (nextCol >= this.getColumnCount())
+                        this.addColumn();
+                    this.selectedCell = { row, col: nextCol };
+                    this.selectionStart = { ...this.selectedCell };
+                    this.selectionEnd = { ...this.selectedCell };
+                    this.updateSelection();
+                }
+            }
+        }
+        commitEdit() {
+            if (!this.editingCell)
+                return;
+            const { row, col } = this.editingCell;
+            let value = this.editValue;
+            const colDef = this.columns[col];
+            const type = colDef?.type || 'text';
+            if (type === 'number' && !value.startsWith('=')) {
+                const num = parseFloat(value);
+                if (!isNaN(num))
+                    value = num;
+            }
+            else if (type === 'boolean') {
+                value = value === 'true' || value === '1';
+            }
+            this.editingCell = null;
+            this.setCell(row, col, value);
+        }
+        restoreCell(row, col) {
+            const td = this.wrapperEl?.querySelector(`td[data-row="${row}"][data-col="${col}"]`);
+            if (!td)
+                return;
+            const rawValue = this.data[row]?.[col];
+            const displayValue = this.resolveValue(rawValue);
+            const colDef = this.columns[col];
+            const cellType = colDef?.type || 'text';
+            const display = cellType === 'boolean'
+                ? (displayValue ? '\u2713' : '\u2717')
+                : (displayValue != null ? this.esc(String(displayValue)) : '');
+            const contentClass = cellType === 'number' ? 'spreadsheet-cell spreadsheet-cell-number'
+                : cellType === 'boolean' ? 'spreadsheet-cell spreadsheet-cell-boolean'
+                    : 'spreadsheet-cell';
+            td.innerHTML = `<span class="${contentClass}">${display}</span>`;
+        }
+        handleRowClick(row) {
+            this.selectedCell = { row, col: 0 };
+            this.selectionStart = { row, col: 0 };
+            this.selectionEnd = { row, col: this.getColumnCount() - 1 };
+            this.emitRowSelect(row);
+            this.updateSelection();
+        }
+        handleHeaderClick(col) {
+            if (this.sortCol === col) {
+                this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc';
+            }
+            else {
+                this.sortCol = col;
+                this.sortDir = 'asc';
+            }
+            this.data = [...this.data].sort((a, b) => {
+                const aVal = a[col], bVal = b[col];
+                if (aVal === bVal)
+                    return 0;
+                if (aVal == null)
+                    return 1;
+                if (bVal == null)
+                    return -1;
+                const cmp = typeof aVal === 'number' && typeof bVal === 'number'
+                    ? aVal - bVal : String(aVal).localeCompare(String(bVal));
+                return this.sortDir === 'asc' ? cmp : -cmp;
+            });
+            this.emitColumnSort(col, this.sortDir);
+        }
+        // ── Column Resize ──
+        handleResizeStart(col, e) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.resizingCol = col;
+            this.resizeStartX = e.clientX;
+            this.resizeStartWidth = this.getColWidth(col);
+            this.boundResizeMove = (ev) => this.handleResizeMove(ev);
+            this.boundResizeUp = () => this.handleResizeEnd();
+            document.addEventListener('mousemove', this.boundResizeMove);
+            document.addEventListener('mouseup', this.boundResizeUp);
+        }
+        handleResizeMove(e) {
+            if (this.resizingCol < 0 || !this.wrapperEl)
+                return;
+            const newWidth = Math.max(40, this.resizeStartWidth + (e.clientX - this.resizeStartX));
+            this.columnWidths.set(this.resizingCol, newWidth);
+            this.wrapperEl.querySelectorAll(`th[data-col="${this.resizingCol}"], td[data-col="${this.resizingCol}"]`).forEach(el => {
+                el.style.width = `${newWidth}px`;
+            });
+        }
+        handleResizeEnd() {
+            this.resizingCol = -1;
+            if (this.boundResizeMove) {
+                document.removeEventListener('mousemove', this.boundResizeMove);
+                this.boundResizeMove = null;
+            }
+            if (this.boundResizeUp) {
+                document.removeEventListener('mouseup', this.boundResizeUp);
+                this.boundResizeUp = null;
+            }
+        }
+        // ── Context Menu ──
+        handleContextMenu(row, col, e) {
+            e.preventDefault();
+            this.selectedCell = { row, col };
+            this.contextMenuCell = { row, col };
+            this.showContextMenu(e.clientX, e.clientY);
+            this.updateSelection();
+            setTimeout(() => {
+                this.boundCloseContext = (ev) => {
+                    if (this.contextMenuEl && !this.contextMenuEl.contains(ev.target))
+                        this.hideContextMenu();
+                };
+                this.boundCloseContextKey = (ev) => {
+                    if (ev.key === 'Escape')
+                        this.hideContextMenu();
+                };
+                document.addEventListener('mousedown', this.boundCloseContext);
+                document.addEventListener('keydown', this.boundCloseContextKey);
+            }, 0);
+        }
+        showContextMenu(x, y) {
+            if (!this.contextMenuEl)
+                return;
+            this.contextMenuEl.style.left = `${x}px`;
+            this.contextMenuEl.style.top = `${y}px`;
+            this.contextMenuEl.hidden = false;
+        }
+        hideContextMenu() {
+            if (this.contextMenuEl)
+                this.contextMenuEl.hidden = true;
+            this.contextMenuCell = null;
+            if (this.boundCloseContext) {
+                document.removeEventListener('mousedown', this.boundCloseContext);
+                this.boundCloseContext = null;
+            }
+            if (this.boundCloseContextKey) {
+                document.removeEventListener('keydown', this.boundCloseContextKey);
+                this.boundCloseContextKey = null;
+            }
+        }
+        contextAction(action) {
+            const cell = this.contextMenuCell;
+            if (!cell) {
+                this.hideContextMenu();
+                return;
+            }
+            const { row, col } = cell;
+            switch (action) {
+                case 'cut':
+                    this.handleCopyCells();
+                    this.clearSelectedCells();
+                    break;
+                case 'copy':
+                    this.handleCopyCells();
+                    break;
+                case 'insert-row-above':
+                    this.insertRow(row);
+                    break;
+                case 'insert-row-below':
+                    this.insertRow(row + 1);
+                    break;
+                case 'delete-row':
+                    this.deleteRow(row);
+                    break;
+                case 'insert-col-left':
+                    this.insertColumn(col);
+                    break;
+                case 'insert-col-right':
+                    this.insertColumn(col + 1);
+                    break;
+                case 'delete-col':
+                    this.deleteColumn(col);
+                    break;
+                case 'clear':
+                    this.clearSelectedCells();
+                    break;
+            }
+            this.hideContextMenu();
+        }
+        // ── Clipboard ──
+        handleCopyCells() {
+            const range = this.getSelectionRange();
+            if (!range) {
+                if (this.selectedCell) {
+                    navigator.clipboard.writeText(String(this.getCell(this.selectedCell.row, this.selectedCell.col) ?? '')).catch(() => { });
+                }
+                return;
+            }
+            const lines = [];
+            for (let r = range.start.row; r <= range.end.row; r++) {
+                const cells = [];
+                for (let c = range.start.col; c <= range.end.col; c++) {
+                    cells.push(String(this.getCell(r, c) ?? ''));
+                }
+                lines.push(cells.join('\t'));
+            }
+            navigator.clipboard.writeText(lines.join('\n')).catch(() => { });
+        }
+        clearSelectedCells() {
+            const range = this.getSelectionRange();
+            if (range && this.hasMultiSelection()) {
+                for (let r = range.start.row; r <= range.end.row; r++) {
+                    for (let c = range.start.col; c <= range.end.col; c++) {
+                        this.setCell(r, c, '');
+                    }
+                }
+            }
+            else if (this.selectedCell) {
+                this.setCell(this.selectedCell.row, this.selectedCell.col, '');
+            }
+        }
+        // ── Row/Column Operations ──
+        insertRow(atIndex) {
+            this.data.splice(atIndex, 0, new Array(this.getColumnCount()).fill(''));
+            this.data = [...this.data];
+        }
+        deleteRow(index) {
+            if (this.data.length <= 1)
+                return;
+            this.data.splice(index, 1);
+            this.data = [...this.data];
+        }
+        insertColumn(atIndex) {
+            for (const row of this.data)
+                row.splice(atIndex, 0, '');
+            if (this.columns.length > 0) {
+                this.columns.splice(atIndex, 0, { header: this.colToLetter(atIndex) });
+                this.columns = [...this.columns];
+            }
+            this.data = [...this.data];
+        }
+        deleteColumn(index) {
+            if (this.getColumnCount() <= 1)
+                return;
+            for (const row of this.data) {
+                if (index < row.length)
+                    row.splice(index, 1);
+            }
+            if (this.columns.length > index) {
+                this.columns.splice(index, 1);
+                this.columns = [...this.columns];
+            }
+            this.data = [...this.data];
+        }
+        addRow() {
+            this.data.push(new Array(this.getColumnCount()).fill(''));
+            this.data = [...this.data];
+        }
+        addColumn() {
+            for (const row of this.data)
+                row.push('');
+            if (this.columns.length > 0) {
+                this.columns.push({ header: this.colToLetter(this.columns.length) });
+                this.columns = [...this.columns];
+            }
+            this.data = [...this.data];
+        }
+        // ── Keyboard ──
+        handleKeydown(e) {
+            if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
+                e.preventDefault();
+                this.undo();
+                return;
+            }
+            if ((e.ctrlKey || e.metaKey) && (e.key === 'y' || (e.key === 'z' && e.shiftKey))) {
+                e.preventDefault();
+                this.redo();
+                return;
+            }
+            if (this.editingCell)
+                return;
+            if (!this.selectedCell)
+                return;
+            const { row, col } = this.selectedCell;
+            if (!e.ctrlKey && !e.metaKey && !e.altKey && e.key.length === 1 && !this.readonly) {
+                e.preventDefault();
+                this.startEditing(row, col, e.key);
+                return;
+            }
+            switch (e.key) {
+                case 'ArrowUp':
+                    e.preventDefault();
+                    if (row > 0) {
+                        const nr = row - 1;
+                        this.selectedCell = { row: nr, col };
+                        if (e.shiftKey) {
+                            this.selectionEnd = { row: nr, col: this.selectionEnd?.col ?? col };
+                        }
+                        else {
+                            this.selectionStart = { row: nr, col };
+                            this.selectionEnd = { row: nr, col };
+                        }
+                    }
+                    break;
+                case 'ArrowDown':
+                    e.preventDefault();
+                    if (row < this.data.length - 1) {
+                        const nr = row + 1;
+                        this.selectedCell = { row: nr, col };
+                        if (e.shiftKey) {
+                            this.selectionEnd = { row: nr, col: this.selectionEnd?.col ?? col };
+                        }
+                        else {
+                            this.selectionStart = { row: nr, col };
+                            this.selectionEnd = { row: nr, col };
+                        }
+                    }
+                    break;
+                case 'ArrowLeft':
+                    e.preventDefault();
+                    if (col > 0) {
+                        const nc = col - 1;
+                        this.selectedCell = { row, col: nc };
+                        if (e.shiftKey) {
+                            this.selectionEnd = { row: this.selectionEnd?.row ?? row, col: nc };
+                        }
+                        else {
+                            this.selectionStart = { row, col: nc };
+                            this.selectionEnd = { row, col: nc };
+                        }
+                    }
+                    break;
+                case 'ArrowRight':
+                    e.preventDefault();
+                    {
+                        const nc = col + 1;
+                        this.selectedCell = { row, col: nc };
+                        if (e.shiftKey) {
+                            this.selectionEnd = { row: this.selectionEnd?.row ?? row, col: nc };
+                        }
+                        else {
+                            this.selectionStart = { row, col: nc };
+                            this.selectionEnd = { row, col: nc };
+                        }
+                    }
+                    break;
+                case 'Enter':
+                case 'F2':
+                    e.preventDefault();
+                    if (!this.readonly)
+                        this.startEditing(row, col);
+                    return;
+                case 'Delete':
+                case 'Backspace':
+                    e.preventDefault();
+                    if (!this.readonly)
+                        this.clearSelectedCells();
+                    return;
+                default:
+                    return;
+            }
+            this.updateSelection();
+        }
+        handleCopy(e) {
+            const range = this.getSelectionRange();
+            if (range && this.hasMultiSelection()) {
+                const lines = [];
+                for (let r = range.start.row; r <= range.end.row; r++) {
+                    const cells = [];
+                    for (let c = range.start.col; c <= range.end.col; c++) {
+                        cells.push(String(this.getCell(r, c) ?? ''));
+                    }
+                    lines.push(cells.join('\t'));
+                }
+                e.clipboardData?.setData('text/plain', lines.join('\n'));
+            }
+            else if (this.selectedCell) {
+                e.clipboardData?.setData('text/plain', String(this.getCell(this.selectedCell.row, this.selectedCell.col) ?? ''));
+            }
+            e.preventDefault();
+        }
+        handlePaste(e) {
+            if (this.readonly || !this.selectedCell)
+                return;
+            const text = e.clipboardData?.getData('text/plain') || '';
+            e.preventDefault();
+            const rows = text.split('\n').filter(r => r.length > 0);
+            const startRow = this.selectedCell.row;
+            const startCol = this.selectedCell.col;
+            for (let r = 0; r < rows.length; r++) {
+                const cells = rows[r].split('\t');
+                for (let c = 0; c < cells.length; c++) {
+                    this.setCell(startRow + r, startCol + c, cells[c]);
+                }
+            }
+        }
+        // ── DOM: Rebuild ──
+        rebuild() {
+            const wrapper = this.wrapperEl;
+            if (!wrapper) {
+                requestAnimationFrame(() => this.rebuild());
+                return;
+            }
+            if (!this.listenersAttached) {
+                this.attachListeners();
+                this.listenersAttached = true;
+            }
+            if (this.data.length === 0) {
+                wrapper.innerHTML = '<div class="spreadsheet-empty">Double-click or start typing to add data</div>';
+                this.updateFormulaBar();
+                this.updateStatusBar();
+                return;
+            }
+            const colCount = this.getColumnCount();
+            let h = '<table class="spreadsheet-table"><thead><tr>';
+            h += '<th class="spreadsheet-row-num">&nbsp;</th>';
+            for (let c = 0; c < colCount; c++) {
+                const header = this.columns[c]?.header || this.colToLetter(c);
+                const width = this.getColWidth(c);
+                h += `<th class="spreadsheet-th" data-col="${c}" style="width:${width}px;position:relative">`;
+                h += `<span class="spreadsheet-th-sort">${this.esc(header)}`;
+                if (this.sortCol === c) {
+                    h += `<span class="spreadsheet-th-sort-icon active">${this.sortDir === 'asc' ? '\u25B2' : '\u25BC'}</span>`;
+                }
+                h += '</span>';
+                h += `<div class="spreadsheet-resize-handle" data-resize-col="${c}"></div>`;
+                h += '</th>';
+            }
+            h += '<th class="spreadsheet-add-col-header" data-action="add-col">+</th>';
+            h += '</tr></thead><tbody>';
+            for (let r = 0; r < this.data.length; r++) {
+                h += '<tr>';
+                h += `<td class="spreadsheet-row-num" data-row="${r}">${r + 1}</td>`;
+                for (let c = 0; c < colCount; c++) {
+                    const rawValue = this.data[r]?.[c];
+                    const displayValue = this.resolveValue(rawValue);
+                    const colDef = this.columns[c];
+                    const cellType = colDef?.type || 'text';
+                    const width = this.getColWidth(c);
+                    const display = cellType === 'boolean'
+                        ? (displayValue ? '\u2713' : '\u2717')
+                        : (displayValue != null ? this.esc(String(displayValue)) : '');
+                    const contentClass = cellType === 'number' ? 'spreadsheet-cell spreadsheet-cell-number'
+                        : cellType === 'boolean' ? 'spreadsheet-cell spreadsheet-cell-boolean'
+                            : 'spreadsheet-cell';
+                    h += `<td class="spreadsheet-td" data-row="${r}" data-col="${c}" style="width:${width}px">`;
+                    h += `<span class="${contentClass}">${display}</span>`;
+                    h += '</td>';
+                }
+                h += '<td class="spreadsheet-add-col-cell"></td>';
+                h += '</tr>';
+            }
+            h += '<tr class="spreadsheet-add-row" data-action="add-row">';
+            h += '<td class="spreadsheet-row-num" style="position:sticky;left:0">+</td>';
+            for (let c = 0; c <= colCount; c++)
+                h += '<td></td>';
+            h += '</tr></tbody></table>';
+            wrapper.innerHTML = h;
+            this.updateSelection();
+        }
+        // ── DOM: Event Delegation ──
+        attachListeners() {
+            const wrapper = this.wrapperEl;
+            if (!wrapper)
+                return;
+            wrapper.addEventListener('mousedown', (e) => {
+                const target = e.target;
+                const resizeHandle = target.closest('.spreadsheet-resize-handle');
+                if (resizeHandle) {
+                    this.handleResizeStart(parseInt(resizeHandle.dataset.resizeCol), e);
+                    return;
+                }
+                const td = target.closest('td[data-row][data-col]');
+                if (td && e.button === 0) {
+                    this.handleCellMouseDown(parseInt(td.dataset.row), parseInt(td.dataset.col), e);
+                }
+            });
+            wrapper.addEventListener('click', (e) => {
+                const target = e.target;
+                const th = target.closest('th.spreadsheet-th[data-col]');
+                if (th) {
+                    this.handleHeaderClick(parseInt(th.dataset.col));
+                    return;
+                }
+                const rowNum = target.closest('td.spreadsheet-row-num[data-row]');
+                if (rowNum) {
+                    this.handleRowClick(parseInt(rowNum.dataset.row));
+                    return;
+                }
+                if (target.closest('[data-action="add-row"]')) {
+                    this.addRow();
+                    return;
+                }
+                if (target.closest('[data-action="add-col"]')) {
+                    this.addColumn();
+                    return;
+                }
+            });
+            wrapper.addEventListener('dblclick', (e) => {
+                const target = e.target;
+                const td = target.closest('td[data-row][data-col]');
+                if (td) {
+                    this.handleCellDblClick(parseInt(td.dataset.row), parseInt(td.dataset.col));
+                    return;
+                }
+                if (target.closest('.spreadsheet-empty')) {
+                    this.data = [['']];
+                    requestAnimationFrame(() => this.startEditing(0, 0));
+                }
+            });
+            wrapper.addEventListener('contextmenu', (e) => {
+                const target = e.target;
+                const td = target.closest('td[data-row][data-col]');
+                if (td)
+                    this.handleContextMenu(parseInt(td.dataset.row), parseInt(td.dataset.col), e);
+            });
+            if (this.formulaInputEl) {
+                this.formulaInputEl.addEventListener('input', (e) => {
+                    if (this.selectedCell) {
+                        this.setCell(this.selectedCell.row, this.selectedCell.col, e.target.value);
+                    }
+                });
+            }
+            if (this.contextMenuEl) {
+                this.contextMenuEl.addEventListener('click', (e) => {
+                    const item = e.target.closest('[data-ctx]');
+                    if (item)
+                        this.contextAction(item.dataset.ctx);
+                });
+            }
+        }
+        // ── DOM: Targeted Updates ──
+        updateSelection() {
+            const wrapper = this.wrapperEl;
+            if (!wrapper)
+                return;
+            wrapper.querySelectorAll('.selected').forEach(el => el.classList.remove('selected'));
+            wrapper.querySelectorAll('.in-range').forEach(el => el.classList.remove('in-range'));
+            wrapper.querySelectorAll('.col-selected').forEach(el => el.classList.remove('col-selected'));
+            wrapper.querySelectorAll('.row-selected').forEach(el => el.classList.remove('row-selected'));
+            if (this.selectedCell) {
+                const { row, col } = this.selectedCell;
+                const cell = wrapper.querySelector(`td[data-row="${row}"][data-col="${col}"]`);
+                if (cell)
+                    cell.classList.add('selected');
+                const colHeader = wrapper.querySelector(`th[data-col="${col}"]`);
+                if (colHeader)
+                    colHeader.classList.add('col-selected');
+                const rowNum = wrapper.querySelector(`td.spreadsheet-row-num[data-row="${row}"]`);
+                if (rowNum)
+                    rowNum.classList.add('row-selected');
+            }
+            const range = this.getSelectionRange();
+            if (range && this.hasMultiSelection()) {
+                for (let r = range.start.row; r <= range.end.row; r++) {
+                    for (let c = range.start.col; c <= range.end.col; c++) {
+                        if (this.selectedCell && r === this.selectedCell.row && c === this.selectedCell.col)
+                            continue;
+                        const cell = wrapper.querySelector(`td[data-row="${r}"][data-col="${c}"]`);
+                        if (cell)
+                            cell.classList.add('in-range');
+                    }
+                }
+            }
+            this.updateFormulaBar();
+            this.updateStatusBar();
+        }
+        updateFormulaBar() {
+            if (this.cellRefEl)
+                this.cellRefEl.textContent = this.getCellRef();
+            if (this.formulaInputEl) {
+                const rawVal = this.selectedCell
+                    ? String(this.data[this.selectedCell.row]?.[this.selectedCell.col] ?? '')
+                    : '';
+                if (this.formulaInputEl.value !== rawVal) {
+                    this.formulaInputEl.value = rawVal;
+                }
+                this.formulaInputEl.readOnly = this.readonly;
+            }
+        }
+        updateStatusBar() {
+            if (!this.statusBarEl)
+                return;
+            const stats = this.getSelectionStats();
+            if (stats) {
+                this.statusBarEl.innerHTML =
+                    `<span class="spreadsheet-status-item"><span class="spreadsheet-status-label">Count:</span><span class="spreadsheet-status-value">${stats.count}</span></span>` +
+                        `<span class="spreadsheet-status-item"><span class="spreadsheet-status-label">Sum:</span><span class="spreadsheet-status-value">${stats.sum.toFixed(2)}</span></span>` +
+                        `<span class="spreadsheet-status-item"><span class="spreadsheet-status-label">Avg:</span><span class="spreadsheet-status-value">${stats.avg.toFixed(2)}</span></span>`;
+            }
+            else {
+                this.statusBarEl.innerHTML = '';
+            }
+        }
+        // ── HTML Helpers ──
+        esc(str) {
+            return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        }
+        escAttr(str) {
+            return this.esc(str).replace(/"/g, '&quot;');
+        }
+        // ── Events ──
+        emitCellChange(row, col, value, oldValue) {
+            return { row, col, value, oldValue };
+        }
+        emitCellSelect(row, col) {
+            return { row, col };
+        }
+        emitRowSelect(row) {
+            return { row };
+        }
+        emitColumnSort(col, direction) {
+            return { col, direction };
+        }
+        // ── Shell Render ──
+        renderSheet() {
+            return html `
+      <div class="spreadsheet-formula-bar">
+        <span class="spreadsheet-cell-ref"></span>
+        <input class="spreadsheet-formula-input" />
+      </div>
+      <div class="spreadsheet" tabindex="0"></div>
+      <div class="spreadsheet-status-bar"></div>
+      <div class="spreadsheet-context-menu" hidden>
+        <div class="spreadsheet-context-item" data-ctx="cut"><span>Cut</span><span class="spreadsheet-context-item-shortcut">Ctrl+X</span></div>
+        <div class="spreadsheet-context-item" data-ctx="copy"><span>Copy</span><span class="spreadsheet-context-item-shortcut">Ctrl+C</span></div>
+        <div class="spreadsheet-context-item" data-ctx="paste"><span>Paste</span><span class="spreadsheet-context-item-shortcut">Ctrl+V</span></div>
+        <div class="spreadsheet-context-separator"></div>
+        <div class="spreadsheet-context-item" data-ctx="insert-row-above"><span>Insert Row Above</span></div>
+        <div class="spreadsheet-context-item" data-ctx="insert-row-below"><span>Insert Row Below</span></div>
+        <div class="spreadsheet-context-item" data-ctx="delete-row"><span>Delete Row</span></div>
+        <div class="spreadsheet-context-separator"></div>
+        <div class="spreadsheet-context-item" data-ctx="insert-col-left"><span>Insert Column Left</span></div>
+        <div class="spreadsheet-context-item" data-ctx="insert-col-right"><span>Insert Column Right</span></div>
+        <div class="spreadsheet-context-item" data-ctx="delete-col"><span>Delete Column</span></div>
+        <div class="spreadsheet-context-separator"></div>
+        <div class="spreadsheet-context-item" data-ctx="clear"><span>Clear Cell(s)</span><span class="spreadsheet-context-item-shortcut">Del</span></div>
+      </div>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            this.data = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _data_initializers, []));
+            this.columns = (__runInitializers(this, _data_extraInitializers), __runInitializers(this, _columns_initializers, []));
+            this.readonly = (__runInitializers(this, _columns_extraInitializers), __runInitializers(this, _readonly_initializers, false));
+            this.selectedCell = (__runInitializers(this, _readonly_extraInitializers), null);
+            this.editingCell = null;
+            this.editValue = '';
+            this.sortCol = -1;
+            this.sortDir = 'asc';
+            this.selectionStart = null;
+            this.selectionEnd = null;
+            this.isDragging = false;
+            this.undoStack = [];
+            this.redoStack = [];
+            this.columnWidths = new Map();
+            this.resizingCol = -1;
+            this.resizeStartX = 0;
+            this.resizeStartWidth = 0;
+            this.contextMenuCell = null;
+            this.boundDragMove = null;
+            this.boundDragUp = null;
+            this.boundResizeMove = null;
+            this.boundResizeUp = null;
+            this.boundCloseContext = null;
+            this.boundCloseContextKey = null;
+            this.listenersAttached = false;
+            this.cellRefEl = __runInitializers(this, _cellRefEl_initializers, void 0);
+            this.formulaInputEl = (__runInitializers(this, _cellRefEl_extraInitializers), __runInitializers(this, _formulaInputEl_initializers, void 0));
+            this.wrapperEl = (__runInitializers(this, _formulaInputEl_extraInitializers), __runInitializers(this, _wrapperEl_initializers, void 0));
+            this.statusBarEl = (__runInitializers(this, _wrapperEl_extraInitializers), __runInitializers(this, _statusBarEl_initializers, void 0));
+            this.contextMenuEl = (__runInitializers(this, _statusBarEl_extraInitializers), __runInitializers(this, _contextMenuEl_initializers, void 0));
+            __runInitializers(this, _contextMenuEl_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return SniceSpreadsheet = _classThis;
+})();
+
+export { SniceSpreadsheet };
+//# sourceMappingURL=snice-spreadsheet.js.map