snice 4.9.0 → 4.11.0

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

@@ -0,0 +1,1171 @@
+/*!
+ * snice v4.10.0
+ * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
+ * (c) 2024
+ * Released under the MIT License.
+ */
+if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.min.js must be loaded before snice-spreadsheet.min.js");}
+var SniceSpreadsheet = (function (exports, snice) {
+  'use strict';
+
+  /******************************************************************************
+  Copyright (c) Microsoft Corporation.
+
+  Permission to use, copy, modify, and/or distribute this software for any
+  purpose with or without fee is hereby granted.
+
+  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+  PERFORMANCE OF THIS SOFTWARE.
+  ***************************************************************************** */
+  /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+  function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+  }
+  function __runInitializers(thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+  }
+  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+  };
+
+  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 = [snice.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 = [snice.property({ type: Array })];
+              _columns_decorators = [snice.property({ type: Array })];
+              _readonly_decorators = [snice.property({ type: Boolean })];
+              _cellRefEl_decorators = [snice.query('.spreadsheet-cell-ref')];
+              _formulaInputEl_decorators = [snice.query('.spreadsheet-formula-input')];
+              _wrapperEl_decorators = [snice.query('.spreadsheet')];
+              _statusBarEl_decorators = [snice.query('.spreadsheet-status-bar')];
+              _contextMenuEl_decorators = [snice.query('.spreadsheet-context-menu')];
+              _componentStyles_decorators = [snice.styles()];
+              _init_decorators = [snice.ready()];
+              _onDataChange_decorators = [snice.watch('data', 'columns')];
+              _handleKeydown_decorators = [snice.on('keydown')];
+              _handleCopy_decorators = [snice.on('copy')];
+              _handlePaste_decorators = [snice.on('paste')];
+              _emitCellChange_decorators = [snice.dispatch('cell-change', { bubbles: true, composed: true })];
+              _emitCellSelect_decorators = [snice.dispatch('cell-select', { bubbles: true, composed: true })];
+              _emitRowSelect_decorators = [snice.dispatch('row-select', { bubbles: true, composed: true })];
+              _emitColumnSort_decorators = [snice.dispatch('column-sort', { bubbles: true, composed: true })];
+              _renderSheet_decorators = [snice.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 snice.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 snice.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;
+  })();
+
+  exports.SniceSpreadsheet = SniceSpreadsheet;
+
+  return exports;
+
+})({}, Snice);
+//# sourceMappingURL=snice-spreadsheet.js.map