@toolbox-web/grid 1.17.0 → 1.18.0

package/lib/plugins/editing/index.js

@@ -1,10 +1,10 @@
-function M(o) {
+function P(o) {
   o && o.querySelectorAll(".cell-focus").forEach((e) => e.classList.remove("cell-focus"));
 }
-const v = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])', P = document.createElement("template");
-P.innerHTML = '<div class="cell" role="gridcell" part="cell"></div>';
-const D = document.createElement("template");
-D.innerHTML = '<div class="data-grid-row" role="row" part="row"></div>';
+const y = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])', D = document.createElement("template");
+D.innerHTML = '<div class="cell" role="gridcell" part="cell"></div>';
+const H = document.createElement("template");
+H.innerHTML = '<div class="data-grid-row" role="row" part="row"></div>';
 function L(o, e) {
   if (o._virtualization?.enabled) {
     const { rowHeight: n, container: l, viewportEl: c } = o._virtualization, a = l, d = c?.clientHeight ?? a?.clientHeight ?? 0;
@@ -14,7 +14,7 @@ function L(o, e) {
     }
   }
   const t = o._activeEditRows !== void 0 && o._activeEditRows !== -1;
-  t || o.refreshVirtualWindow(!1), M(o._bodyEl), Array.from(o._bodyEl.querySelectorAll('[aria-selected="true"]')).forEach((n) => {
+  t || o.refreshVirtualWindow(!1), P(o._bodyEl), Array.from(o._bodyEl.querySelectorAll('[aria-selected="true"]')).forEach((n) => {
     n.setAttribute("aria-selected", "false");
   });
   const i = o._focusRow, r = o._virtualization.start ?? 0, s = o._virtualization.end ?? o._rows.length;
@@ -36,24 +36,27 @@ function L(o, e) {
             f < p ? c.scrollLeft = f - a.left : E > m && (c.scrollLeft = E - c.clientWidth + a.right);
           }
         }
-      if (o._activeEditRows !== void 0 && o._activeEditRows !== -1 && l.classList.contains("editing")) {
-        const a = l.querySelector(v);
+      if (t && l.classList.contains("editing")) {
+        const a = l.querySelector(y);
         if (a && document.activeElement !== a)
           try {
             a.focus({ preventScroll: !0 });
           } catch {
           }
-      } else if (!l.contains(document.activeElement)) {
+      } else if (t && !l.contains(document.activeElement)) {
         l.hasAttribute("tabindex") || l.setAttribute("tabindex", "-1");
         try {
           l.focus({ preventScroll: !0 });
         } catch {
         }
+      } else if (!t) {
+        const a = o;
+        document.activeElement !== a && a.focus({ preventScroll: !0 });
       }
     }
   }
 }
-const I = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>', H = {
+const I = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>', O = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -66,7 +69,7 @@ const I = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentCo
   filterActive: I,
   print: "🖨️"
 };
-class O {
+class B {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -356,7 +359,7 @@ class O {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...H, ...e };
+    return { ...O, ...e };
   }
   // #region Animation Helpers
   /**
@@ -432,8 +435,8 @@ class O {
   }
   // #endregion
 }
-const B = "@layer tbw-plugins{tbw-grid{--tbw-editing-bg: var(--tbw-color-selection);--tbw-editing-row-bg: var(--tbw-editing-bg);--tbw-editing-border: var(--tbw-border-input, 1px solid var(--tbw-color-border-strong));--tbw-padding-editing-input: var(--tbw-cell-padding-input, 2px 6px);--tbw-font-size-editor: inherit;--tbw-editing-row-outline-color: var(--tbw-color-accent);--tbw-editing-row-outline-width: 1px;--tbw-invalid-bg: light-dark(#fef2f2, #450a0a);--tbw-invalid-border-color: light-dark(#ef4444, #f87171)}tbw-grid:not(.tbw-grid-mode) .data-grid-row:has(.editing){background:var(--tbw-editing-row-bg);outline:var(--tbw-editing-row-outline-width) solid var(--tbw-editing-row-outline-color);outline-offset:calc(-1 * var(--tbw-editing-row-outline-width))}tbw-grid .data-grid-row>.cell.editing{overflow:hidden;padding:0;display:flex;min-height:calc(var(--tbw-row-height) + 2px);align-items:center;justify-content:center}tbw-grid .data-grid-row>.cell.editing input:not([type=checkbox]),tbw-grid .data-grid-row>.cell.editing select,tbw-grid .data-grid-row>.cell.editing textarea{width:100%;height:100%;flex:1 1 auto;min-width:0;border:var(--tbw-editing-border);padding:var(--tbw-padding-editing-input);font-size:var(--tbw-font-size-editor)}tbw-grid .tbw-editor-host{display:contents}tbw-grid .data-grid-row>.cell[data-invalid=true]{background:var(--tbw-invalid-bg);outline:1px solid var(--tbw-invalid-border-color);outline-offset:-1px}}";
-function x(o) {
+const x = "@layer tbw-plugins{tbw-grid{--tbw-editing-bg: var(--tbw-color-selection);--tbw-editing-row-bg: var(--tbw-editing-bg);--tbw-editing-border: var(--tbw-border-input, 1px solid var(--tbw-color-border-strong));--tbw-padding-editing-input: var(--tbw-cell-padding-input, 2px 6px);--tbw-font-size-editor: inherit;--tbw-editing-row-outline-color: var(--tbw-color-accent);--tbw-editing-row-outline-width: 1px;--tbw-invalid-bg: light-dark(#fef2f2, #450a0a);--tbw-invalid-border-color: light-dark(#ef4444, #f87171)}tbw-grid:not(.tbw-grid-mode) .data-grid-row:has(.editing){background:var(--tbw-editing-row-bg);outline:var(--tbw-editing-row-outline-width) solid var(--tbw-editing-row-outline-color);outline-offset:calc(-1 * var(--tbw-editing-row-outline-width))}tbw-grid .data-grid-row>.cell.editing{overflow:hidden;padding:0;display:flex;min-height:calc(var(--tbw-row-height) + 2px);align-items:center;justify-content:center}tbw-grid .data-grid-row>.cell.editing input:not([type=checkbox]),tbw-grid .data-grid-row>.cell.editing select,tbw-grid .data-grid-row>.cell.editing textarea{width:100%;height:100%;flex:1 1 auto;min-width:0;border:var(--tbw-editing-border);padding:var(--tbw-padding-editing-input);font-size:var(--tbw-font-size-editor)}tbw-grid .tbw-editor-host{display:contents}tbw-grid .data-grid-row>.cell[data-invalid=true]{background:var(--tbw-invalid-bg);outline:1px solid var(--tbw-invalid-border-color);outline-offset:-1px}}";
+function G(o) {
   const e = o.options;
   return e ? typeof e == "function" ? e() : e : [];
 }
@@ -453,7 +456,7 @@ function $() {
     return e.type = "checkbox", e.checked = !!o.value, e.addEventListener("change", () => o.commit(e.checked)), e;
   };
 }
-function G(o) {
+function z(o) {
   return (e) => {
     const t = o.editorParams, i = document.createElement("input");
     i.type = "date", e.value instanceof Date ? i.valueAsDate = e.value : typeof e.value == "string" && e.value && (i.value = e.value.split("T")[0]), t?.min && (i.min = t.min), t?.max && (i.max = t.max), t?.placeholder && (i.placeholder = t.placeholder);
@@ -465,14 +468,14 @@ function G(o) {
     }), i;
   };
 }
-function z(o) {
+function F(o) {
   return (e) => {
     const t = o.editorParams, i = document.createElement("select");
     if (o.multi && (i.multiple = !0), t?.includeEmpty) {
       const n = document.createElement("option");
       n.value = "", n.textContent = t.emptyLabel ?? "", i.appendChild(n);
     }
-    x(o).forEach((n) => {
+    G(o).forEach((n) => {
       const l = document.createElement("option");
       l.value = String(n.value), l.textContent = n.label, (o.multi && Array.isArray(e.value) && e.value.includes(n.value) || !o.multi && e.value === n.value) && (l.selected = !0), i.appendChild(l);
     });
@@ -488,7 +491,7 @@ function z(o) {
     }), i;
   };
 }
-function F(o) {
+function K(o) {
   return (e) => {
     const t = o.editorParams, i = document.createElement("input");
     i.type = "text", i.value = e.value != null ? String(e.value) : "", t?.maxLength !== void 0 && (i.maxLength = t.maxLength), t?.pattern && (i.pattern = t.pattern), t?.placeholder && (i.placeholder = t.placeholder);
@@ -501,21 +504,21 @@ function F(o) {
     }), i;
   };
 }
-function K(o) {
+function j(o) {
   switch (o.type) {
     case "number":
       return N(o);
     case "boolean":
       return $();
     case "date":
-      return G(o);
-    case "select":
       return z(o);
-    default:
+    case "select":
       return F(o);
+    default:
+      return K(o);
   }
 }
-function j(o, e) {
+function W(o, e) {
   if (e.editor) return e.editor;
   if (e.__editorTemplate) return "template";
   if (!e.type) return;
@@ -532,11 +535,11 @@ function j(o, e) {
 function S(o) {
   return !(typeof o != "string" || o === "__proto__" || o === "constructor" || o === "prototype");
 }
-function W(o) {
+function U(o) {
   const e = (o.__editingCellCount ?? 0) + 1;
   o.__editingCellCount = e, o.setAttribute("data-has-editing", "");
 }
-function U(o) {
+function Q(o) {
   o.__editingCellCount = 0, o.removeAttribute("data-has-editing");
 }
 function _(o, e, t) {
@@ -544,13 +547,13 @@ function _(o, e, t) {
 }
 function T(o) {
 }
-function Q(o, e, t, i) {
+function X(o, e, t, i) {
   const r = o.querySelector("input,textarea,select");
   r && (r.addEventListener("blur", () => {
     t(_(r, e, i));
   }), r instanceof HTMLInputElement && r.type === "checkbox" ? r.addEventListener("change", () => t(r.checked)) : r instanceof HTMLSelectElement && r.addEventListener("change", () => t(_(r, e, i))));
 }
-class X extends O {
+class Z extends B {
   /**
    * Plugin manifest - declares owned properties for configuration validation.
    * @internal
@@ -590,7 +593,7 @@ class X extends O {
   /** @internal */
   name = "editing";
   /** @internal */
-  styles = B;
+  styles = x;
   /** @internal */
   get defaultConfig() {
     return {
@@ -607,10 +610,15 @@ class X extends O {
   // #region Editing State (fully owned by plugin)
   /** Currently active edit row index, or -1 if not editing */
   #e = -1;
+  /** Row ID of the currently active edit row (stable across _rows replacement) */
+  #l;
+  /** Reference to the row object at edit-open time. Used as fallback in
+   *  #exitRowEdit when no row ID is available (prevents stale-index access). */
+  #f;
   /** Currently active edit column index, or -1 if not editing */
-  #u = -1;
+  #h = -1;
   /** Snapshots of row data before editing started */
-  #l = /* @__PURE__ */ new Map();
+  #c = /* @__PURE__ */ new Map();
   /** Set of row IDs that have been modified (ID-based for stability) */
   #r = /* @__PURE__ */ new Set();
   /** Set of cells currently in edit mode: "rowIndex:colIndex" */
@@ -620,11 +628,11 @@ class X extends O {
    * Keyed by "rowIndex:field" → callback that pushes updated values to the editor.
    * Populated during #injectEditor, cleaned up when editors are removed.
    */
-  #c = /* @__PURE__ */ new Map();
+  #a = /* @__PURE__ */ new Map();
   /** Flag to restore focus after next render (used when exiting edit mode) */
-  #f = !1;
+  #g = !1;
   /** Row index pending animation after render, or -1 if none */
-  #h = -1;
+  #p = -1;
   /**
    * Invalid cell tracking: Map<rowId, Map<field, message>>
    * Used for validation feedback without canceling edits.
@@ -642,12 +650,12 @@ class X extends O {
    * This is set when Escape is pressed (navigation mode) and cleared
    * when Enter is pressed or user explicitly clicks an input.
    */
-  #a = !1;
+  #d = !1;
   /**
    * When true, only a single cell is being edited (triggered by F2 or `beginCellEdit`).
    * Tab and Arrow keys commit and close the editor instead of navigating to adjacent cells.
    */
-  #d = !1;
+  #u = !1;
   // #endregion
   // #region Lifecycle
   /** @internal */
@@ -687,7 +695,7 @@ class X extends O {
       (r) => {
         const s = r.detail;
         if (s.source === "user") return;
-        const n = `${s.rowIndex}:${s.field}`, l = this.#c.get(n);
+        const n = `${s.rowIndex}:${s.field}`, l = this.#a.get(n);
         l && l(s.newValue);
       },
       { signal: t }
@@ -695,8 +703,8 @@ class X extends O {
       "focusin",
       (r) => {
         const s = r.target;
-        if (s.matches(v)) {
-          if (this.#a) {
+        if (s.matches(y)) {
+          if (this.#d) {
             s.blur(), this.gridElement.focus();
             return;
           }
@@ -708,7 +716,7 @@ class X extends O {
       "focusout",
       (r) => {
         const s = r.relatedTarget;
-        (!s || !this.gridElement.contains(s) || !s.matches(v)) && (this.#n = !1);
+        (!s || !this.gridElement.contains(s) || !s.matches(y)) && (this.#n = !1);
       },
       { signal: t }
     ), this.gridElement.addEventListener(
@@ -718,14 +726,14 @@ class X extends O {
           if (this.config.onBeforeEditClose && this.config.onBeforeEditClose(r) === !1)
             return;
           const s = document.activeElement;
-          s && this.gridElement.contains(s) && (s.blur(), this.gridElement.focus()), this.#n = !1, this.#a = !0, r.preventDefault(), r.stopPropagation();
+          s && this.gridElement.contains(s) && (s.blur(), this.gridElement.focus()), this.#n = !1, this.#d = !0, r.preventDefault(), r.stopPropagation();
         }
       },
       { capture: !0, signal: t }
     ), this.gridElement.addEventListener(
       "mousedown",
       (r) => {
-        r.target.matches(v) && (this.#a = !1);
+        r.target.matches(y) && (this.#d = !1);
       },
       { signal: t }
     ));
@@ -733,7 +741,7 @@ class X extends O {
   /** @internal */
   detach() {
     const e = this.gridElement;
-    e._isGridEditMode = !1, this.gridElement.classList.remove("tbw-grid-mode"), this.#e = -1, this.#u = -1, this.#l.clear(), this.#r.clear(), this.#o.clear(), this.#c.clear(), this.#n = !1, this.#a = !1, this.#d = !1, super.detach();
+    e._isGridEditMode = !1, this.gridElement.classList.remove("tbw-grid-mode"), this.#e = -1, this.#l = void 0, this.#f = void 0, this.#h = -1, this.#c.clear(), this.#r.clear(), this.#o.clear(), this.#a.clear(), this.#n = !1, this.#d = !1, this.#u = !1, super.detach();
   }
   /**
    * Handle plugin queries.
@@ -787,10 +795,10 @@ class X extends O {
       return this.#s(r, !1), e.key === "ArrowDown" ? t._focusRow = Math.min(i, t._focusRow + 1) : t._focusRow = Math.max(0, t._focusRow - 1), e.preventDefault(), L(t), this.requestAfterRender(), !0;
     }
     if (e.key === "Tab" && (this.#e !== -1 || this.#t)) {
-      if (e.preventDefault(), this.#d)
+      if (e.preventDefault(), this.#u)
         return this.#s(this.#e, !1), !0;
       const i = !e.shiftKey;
-      return this.#C(i), !0;
+      return this.#_(i), !0;
     }
     if (e.key === " " || e.key === "Spacebar") {
       if (this.#e !== -1)
@@ -802,7 +810,7 @@ class X extends O {
           const l = s.field;
           if (S(l)) {
             const a = !n[l];
-            return this.#E(i, s, a, n), e.preventDefault(), this.requestRender(), !0;
+            return this.#v(i, s, a, n), e.preventDefault(), this.requestRender(), !0;
           }
         }
       }
@@ -810,7 +818,7 @@ class X extends O {
     }
     if (e.key === "Enter" && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
       if (this.#t && !this.#n)
-        return this.#y(), !0;
+        return this.#R(), !0;
       if (this.#e !== -1)
         return !!(this.config.onBeforeEditClose && this.config.onBeforeEditClose(e) === !1);
       const i = this.config.editOn ?? t.effectiveConfig?.editOn;
@@ -883,9 +891,9 @@ class X extends O {
    */
   afterRender() {
     const e = this.grid;
-    if (this.#f && (this.#f = !1, this.#v(e)), this.#h !== -1) {
-      const t = this.#h;
-      this.#h = -1, e.animateRow?.(t, "change");
+    if (this.#g && (this.#g = !1, this.#y(e)), this.#p !== -1) {
+      const t = this.#p;
+      this.#p = -1, e.animateRow?.(t, "change");
     }
     if (!this.#t && this.#o.size !== 0)
       for (const t of this.#o) {
@@ -894,7 +902,7 @@ class X extends O {
         const c = l.querySelector(`.cell[data-col="${n}"]`);
         if (!c || c.classList.contains("editing")) continue;
         const a = e._rows[s], d = e._visibleColumns[n];
-        a && d && this.#m(a, s, d, n, c, !0);
+        a && d && this.#w(a, s, d, n, c, !0);
       }
   }
   /**
@@ -905,7 +913,7 @@ class X extends O {
   afterCellRender(e) {
     if (!this.#t) return;
     const { row: t, rowIndex: i, column: r, colIndex: s, cellElement: n } = e;
-    r.editable && (n.classList.contains("editing") || this.#m(t, i, r, s, n, !0));
+    r.editable && (n.classList.contains("editing") || this.#w(t, i, r, s, n, !0));
   }
   /**
    * On scroll render, reapply editors to recycled cells.
@@ -944,7 +952,7 @@ class X extends O {
    * Get the currently active edit column index, or -1 if not editing.
    */
   get activeEditCol() {
-    return this.#u;
+    return this.#h;
   }
   /**
    * Check if a specific row is currently being edited.
@@ -1003,7 +1011,7 @@ class X extends O {
    */
   setInvalid(e, t, i = "") {
     let r = this.#i.get(e);
-    r || (r = /* @__PURE__ */ new Map(), this.#i.set(e, r)), r.set(t, i), this.#g(e, t, !0);
+    r || (r = /* @__PURE__ */ new Map(), this.#i.set(e, r)), r.set(t, i), this.#m(e, t, !0);
   }
   /**
    * Clear the invalid state for a specific cell.
@@ -1013,7 +1021,7 @@ class X extends O {
    */
   clearInvalid(e, t) {
     const i = this.#i.get(e);
-    i && (i.delete(t), i.size === 0 && this.#i.delete(e)), this.#g(e, t, !1);
+    i && (i.delete(t), i.size === 0 && this.#i.delete(e)), this.#m(e, t, !1);
   }
   /**
    * Clear all invalid cells for a specific row.
@@ -1024,7 +1032,7 @@ class X extends O {
     const t = this.#i.get(e);
     if (t) {
       const i = Array.from(t.keys());
-      this.#i.delete(e), i.forEach((r) => this.#g(e, r, !1));
+      this.#i.delete(e), i.forEach((r) => this.#m(e, r, !1));
     }
   }
   /**
@@ -1033,7 +1041,7 @@ class X extends O {
   clearAllInvalid() {
     const e = Array.from(this.#i.entries());
     this.#i.clear(), e.forEach(([t, i]) => {
-      i.forEach((r, s) => this.#g(t, s, !1));
+      i.forEach((r, s) => this.#m(t, s, !1));
     });
   }
   /**
@@ -1078,7 +1086,7 @@ class X extends O {
   /**
    * Sync the data-invalid attribute on a cell element.
    */
-  #g(e, t, i) {
+  #m(e, t, i) {
     const r = this.grid, s = r._visibleColumns?.findIndex((d) => d.field === t);
     if (s === -1 || s === void 0) return;
     const l = r._rows?.findIndex((d) => {
@@ -1106,7 +1114,7 @@ class X extends O {
    */
   resetChangedRows(e) {
     const t = this.changedRows, i = this.changedRowIds;
-    this.#r.clear(), this.#p(), e || this.emit("changed-rows-reset", { rows: t, ids: i }), this.grid._rowPool?.forEach((s) => s.classList.remove("changed"));
+    this.#r.clear(), this.#E(), e || this.emit("changed-rows-reset", { rows: t, ids: i }), this.grid._rowPool?.forEach((s) => s.classList.remove("changed"));
   }
   /**
    * Programmatically begin editing a cell.
@@ -1118,7 +1126,7 @@ class X extends O {
     const i = this.grid, r = i._visibleColumns.findIndex((c) => c.field === t);
     if (r === -1 || !i._visibleColumns[r]?.editable) return;
     const l = i.findRenderedRowElement?.(e)?.querySelector(`.cell[data-col="${r}"]`);
-    l && (this.#d = !0, this.#b(e, r, l));
+    l && (this.#u = !0, this.#C(e, r, l));
   }
   /**
    * Programmatically begin editing all editable cells in a row.
@@ -1131,18 +1139,18 @@ class X extends O {
     if ((this.config.editOn ?? t.effectiveConfig?.editOn) === !1 || !t._columns?.some((l) => l.editable)) return;
     const s = t.findRenderedRowElement?.(e);
     if (!s) return;
-    this.#d = !1;
+    this.#u = !1;
     const n = t._rows[e];
-    this.#w(e, n), Array.from(s.children).forEach((l, c) => {
+    this.#b(e, n), Array.from(s.children).forEach((l, c) => {
       const a = t._visibleColumns[c];
       if (a?.editable) {
         const d = l;
-        d.classList.contains("editing") || this.#m(n, e, a, c, d, !0);
+        d.classList.contains("editing") || this.#w(n, e, a, c, d, !0);
       }
     }), setTimeout(() => {
       let l = s.querySelector(`.cell[data-col="${t._focusCol}"]`);
       if (l?.classList.contains("editing") || (l = s.querySelector(".cell.editing")), l?.classList.contains("editing")) {
-        const c = l.querySelector(v);
+        const c = l.querySelector(y);
         try {
           c?.focus({ preventScroll: !0 });
         } catch {
@@ -1168,21 +1176,21 @@ class X extends O {
   /**
    * Begin editing a single cell.
    */
-  #b(e, t, i) {
+  #C(e, t, i) {
     const r = this.grid, s = r._rows[e], n = r._visibleColumns[t];
-    !s || !n?.editable || i.classList.contains("editing") || (this.#e !== e && this.#w(e, s), this.#u = t, this.#m(s, e, n, t, i, !1));
+    !s || !n?.editable || i.classList.contains("editing") || (this.#e !== e && this.#b(e, s), this.#h = t, this.#w(s, e, n, t, i, !1));
   }
   /**
    * Focus the editor input in the currently focused cell (grid mode only).
    * Used when pressing Enter to enter edit mode from navigation mode.
    */
-  #y() {
+  #R() {
     const e = this.grid, t = e._focusRow, i = e._focusCol;
     if (t < 0 || i < 0) return;
     const s = e.findRenderedRowElement?.(t)?.querySelector(`.cell[data-col="${i}"]`);
     if (s?.classList.contains("editing")) {
-      const n = s.querySelector(v);
-      n && (this.#a = !1, n.focus(), this.#n = !0, n instanceof HTMLInputElement && (n.type === "text" || n.type === "number") && n.select());
+      const n = s.querySelector(y);
+      n && (this.#d = !1, n.focus(), this.#n = !0, n instanceof HTMLInputElement && (n.type === "text" || n.type === "number") && n.select());
     }
   }
   /**
@@ -1190,43 +1198,44 @@ class X extends O {
    * Moves to next/previous editable cell, staying in edit mode.
    * Wraps to next/previous row when reaching row boundaries.
    */
-  #C(e) {
+  #_(e) {
     const t = this.grid, i = t._rows, r = this.#t ? t._focusRow : this.#e, s = t._visibleColumns.map((a, d) => a.editable ? d : -1).filter((a) => a >= 0);
     if (s.length === 0) return;
     const l = s.indexOf(t._focusCol) + (e ? 1 : -1);
     if (l >= 0 && l < s.length) {
       t._focusCol = s[l];
       const d = t.findRenderedRowElement?.(r)?.querySelector(`.cell[data-col="${s[l]}"]`);
-      d?.classList.contains("editing") && d.querySelector(v)?.focus({ preventScroll: !0 }), L(t, { forceHorizontalScroll: !0 });
+      d?.classList.contains("editing") && d.querySelector(y)?.focus({ preventScroll: !0 }), L(t, { forceHorizontalScroll: !0 });
       return;
     }
     const c = r + (e ? 1 : -1);
     c >= 0 && c < i.length && (this.#t ? (t._focusRow = c, t._focusCol = e ? s[0] : s[s.length - 1], L(t, { forceHorizontalScroll: !0 }), this.requestAfterRender(), setTimeout(() => {
       const d = t.findRenderedRowElement?.(c)?.querySelector(`.cell[data-col="${t._focusCol}"]`);
-      d?.classList.contains("editing") && d.querySelector(v)?.focus({ preventScroll: !0 });
+      d?.classList.contains("editing") && d.querySelector(y)?.focus({ preventScroll: !0 });
     }, 0)) : (this.#s(r, !1), t._focusRow = c, t._focusCol = e ? s[0] : s[s.length - 1], this.beginBulkEdit(c), L(t, { forceHorizontalScroll: !0 })));
   }
   /**
    * Sync the internal grid state with the plugin's editing state.
    */
-  #p() {
+  #E() {
     const e = this.grid;
-    e._activeEditRows = this.#e, e._rowEditSnapshots = this.#l;
+    e._activeEditRows = this.#e, e._rowEditSnapshots = this.#c;
   }
   /**
    * Snapshot original row data and mark as editing.
    */
-  #w(e, t) {
-    if (this.#e !== e && (this.#l.set(e, { ...t }), this.#e = e, this.#p(), !this.#t)) {
+  #b(e, t) {
+    if (this.#e !== e) {
+      this.#c.set(e, { ...t }), this.#e = e, this.#f = t;
       const i = this.grid;
-      let r = "";
       try {
-        r = i.getRowId?.(t) ?? "";
+        this.#l = i.getRowId?.(t) ?? void 0;
       } catch {
+        this.#l = void 0;
       }
-      this.emit("edit-open", {
+      this.#E(), this.#t || this.emit("edit-open", {
         rowIndex: e,
-        rowId: r,
+        rowId: this.#l ?? "",
         row: t
       });
     }
@@ -1236,54 +1245,55 @@ class X extends O {
    */
   #s(e, t) {
     if (this.#e !== e) return;
-    const i = this.grid, r = this.#l.get(e), s = i._rows[e], n = i.findRenderedRowElement?.(e);
-    let l;
-    if (s)
+    const i = this.grid, r = this.#c.get(e), s = i.findRenderedRowElement?.(e);
+    let n = this.#l;
+    const c = (n ? i._getRowEntry(n) : void 0)?.row ?? this.#f ?? i._rows[e];
+    if (!n && c)
       try {
-        l = i.getRowId?.(s);
+        n = i.getRowId?.(c);
       } catch {
       }
-    if (!t && n && s && n.querySelectorAll(".cell.editing").forEach((a) => {
-      const d = Number(a.getAttribute("data-col"));
-      if (isNaN(d)) return;
-      const g = i._visibleColumns[d];
-      if (!g || a.hasAttribute("data-editor-managed"))
+    if (!t && s && c && s.querySelectorAll(".cell.editing").forEach((d) => {
+      const g = Number(d.getAttribute("data-col"));
+      if (isNaN(g)) return;
+      const f = i._visibleColumns[g];
+      if (!f || d.hasAttribute("data-editor-managed"))
         return;
-      const f = a.querySelector("input,textarea,select");
-      if (f) {
-        const E = g.field, p = s[E], m = _(f, g, p);
-        p !== m && this.#E(e, g, m, s);
+      const E = d.querySelector("input,textarea,select");
+      if (E) {
+        const p = f.field, m = c[p], C = _(E, f, m);
+        m !== C && this.#v(e, f, C, c);
       }
-    }), t && r && s)
-      Object.keys(r).forEach((c) => {
-        s[c] = r[c];
-      }), l && (this.#r.delete(l), this.clearRowInvalid(l));
-    else if (!t && s) {
-      const c = this.#_(r, s), a = l ? this.#r.has(l) : c, d = this.emitCancelable("row-commit", {
+    }), t && r && c)
+      Object.keys(r).forEach((a) => {
+        c[a] = r[a];
+      }), n && (this.#r.delete(n), this.clearRowInvalid(n));
+    else if (!t && c) {
+      const a = this.#L(r, c), d = n ? this.#r.has(n) : a, g = this.emitCancelable("row-commit", {
         rowIndex: e,
-        rowId: l ?? "",
-        row: s,
+        rowId: n ?? "",
+        row: c,
         oldValue: r,
-        newValue: s,
-        changed: a,
+        newValue: c,
+        changed: d,
         changedRows: this.changedRows,
         changedRowIds: this.changedRowIds
       });
-      d && r ? (Object.keys(r).forEach((g) => {
-        s[g] = r[g];
-      }), l && (this.#r.delete(l), this.clearRowInvalid(l))) : !d && c && this.isAnimationEnabled && (this.#h = e);
+      g && r ? (Object.keys(r).forEach((f) => {
+        c[f] = r[f];
+      }), n && (this.#r.delete(n), this.clearRowInvalid(n))) : !g && a && this.isAnimationEnabled && (this.#p = e);
     }
-    this.#l.delete(e), this.#e = -1, this.#u = -1, this.#d = !1, this.#p();
-    for (const c of this.#o)
-      c.startsWith(`${e}:`) && this.#o.delete(c);
-    for (const c of this.#c.keys())
-      c.startsWith(`${e}:`) && this.#c.delete(c);
-    n && (n.querySelectorAll(".cell.editing").forEach((c) => {
-      c.classList.remove("editing"), U(c.parentElement);
-    }), this.requestRender()), this.#f = !0, n || (this.#v(i), this.#f = !1), !this.#t && s && this.emit("edit-close", {
+    this.#c.delete(e), this.#e = -1, this.#l = void 0, this.#f = void 0, this.#h = -1, this.#u = !1, this.#E();
+    for (const a of this.#o)
+      a.startsWith(`${e}:`) && this.#o.delete(a);
+    for (const a of this.#a.keys())
+      a.startsWith(`${e}:`) && this.#a.delete(a);
+    this.#g = !0, s ? (s.querySelectorAll(".cell.editing").forEach((a) => {
+      a.classList.remove("editing"), Q(a.parentElement);
+    }), i.refreshVirtualWindow(!0)) : (this.#y(i), this.#g = !1), !this.#t && c && this.emit("edit-close", {
       rowIndex: e,
-      rowId: l ?? "",
-      row: s,
+      rowId: n ?? "",
+      row: c,
       reverted: t
     });
   }
@@ -1291,7 +1301,7 @@ class X extends O {
    * Commit a single cell value change.
    * Uses ID-based change tracking for stability when rows are reordered.
    */
-  #E(e, t, i, r) {
+  #v(e, t, i, r) {
     const s = t.field;
     if (!S(s)) return;
     const n = r[s];
@@ -1321,7 +1331,7 @@ class X extends O {
       updateRow: d,
       setInvalid: f
     })) return;
-    c && !g && this.isCellInvalid(c, s) && this.clearInvalid(c, s), r[s] = i, c && this.#r.add(c), this.#p(), this.emitPluginEvent("cell-edit-committed", {
+    c && !g && this.isCellInvalid(c, s) && this.clearInvalid(c, s), r[s] = i, c && this.#r.add(c), this.#E(), this.emitPluginEvent("cell-edit-committed", {
       rowIndex: e,
       field: s,
       oldValue: n,
@@ -1333,7 +1343,7 @@ class X extends O {
   /**
    * Inject an editor into a cell.
    */
-  #m(e, t, i, r, s, n) {
+  #w(e, t, i, r, s, n) {
     if (!i.editable || s.classList.contains("editing")) return;
     let l;
     try {
@@ -1343,16 +1353,16 @@ class X extends O {
     const c = l ? (u) => this.grid.updateRow(l, u, "cascade") : T, a = S(i.field) ? e[i.field] : void 0;
     s.classList.add("editing"), this.#o.add(`${t}:${r}`);
     const d = s.parentElement;
-    d && W(d);
+    d && U(d);
     let g = !1;
     const f = (u) => {
       if (g || !this.#t && this.#e === -1) return;
-      const h = this.grid._rows[t] ?? e;
-      this.#E(t, i, u, h);
+      const h = this.grid, v = l ? h._getRowEntry(l) : void 0, b = v?.row ?? e, M = v?.index ?? t;
+      this.#v(M, i, u, b);
     }, E = () => {
       if (g = !0, S(i.field)) {
-        const u = this.grid._rows[t] ?? e;
-        u[i.field] = a;
+        const u = this.grid, v = (l ? u._getRowEntry(l) : void 0)?.row ?? e;
+        v[i.field] = a;
       }
     }, p = document.createElement("div");
     p.className = "tbw-editor-host", s.innerHTML = "", s.appendChild(p), p.addEventListener("keydown", (u) => {
@@ -1377,15 +1387,15 @@ class X extends O {
         u.stopPropagation(), u.preventDefault(), E(), this.#s(t, !0);
       }
     });
-    const m = i, y = m.__editorTemplate, w = j(this.grid, m) ?? K(i), k = a, q = `${t}:${i.field}`, A = [];
-    this.#c.set(q, (u) => {
+    const m = i, C = m.__editorTemplate, w = W(this.grid, m) ?? j(i), k = a, q = `${t}:${i.field}`, A = [];
+    this.#a.set(q, (u) => {
       for (const h of A) h(u);
     });
-    const C = (u) => {
+    const R = (u) => {
       A.push(u);
     };
-    if (w === "template" && y)
-      this.#R(p, m, e, a, f, E, n, t), C((u) => {
+    if (w === "template" && C)
+      this.#S(p, m, e, a, f, E, n, t), R((u) => {
         const h = p.querySelector(
           "input,textarea,select"
         );
@@ -1393,10 +1403,10 @@ class X extends O {
       });
     else if (typeof w == "string") {
       const u = document.createElement(w);
-      u.value = k, u.addEventListener("change", () => f(u.value)), C((h) => {
+      u.value = k, u.addEventListener("change", () => f(u.value)), R((h) => {
         u.value = h;
       }), p.appendChild(u), n || queueMicrotask(() => {
-        p.querySelector(v)?.focus({ preventScroll: !0 });
+        p.querySelector(y)?.focus({ preventScroll: !0 });
       });
     } else if (typeof w == "function") {
       const u = {
@@ -1408,17 +1418,17 @@ class X extends O {
         commit: f,
         cancel: E,
         updateRow: c,
-        onValueChange: C
+        onValueChange: R
       }, h = w(u);
-      typeof h == "string" ? (p.innerHTML = h, Q(p, i, f, a), C((R) => {
+      typeof h == "string" ? (p.innerHTML = h, X(p, i, f, a), R((v) => {
         const b = p.querySelector(
           "input,textarea,select"
         );
-        b && (b instanceof HTMLInputElement && b.type === "checkbox" ? b.checked = !!R : b.value = String(R ?? ""));
-      })) : h instanceof Node && (p.appendChild(h), h instanceof HTMLInputElement || h instanceof HTMLSelectElement || h instanceof HTMLTextAreaElement ? C((b) => {
+        b && (b instanceof HTMLInputElement && b.type === "checkbox" ? b.checked = !!v : b.value = String(v ?? ""));
+      })) : h instanceof Node && (p.appendChild(h), h instanceof HTMLInputElement || h instanceof HTMLSelectElement || h instanceof HTMLTextAreaElement ? R((b) => {
         h instanceof HTMLInputElement && h.type === "checkbox" ? h.checked = !!b : h.value = String(b ?? "");
       }) : s.setAttribute("data-editor-managed", "")), n || queueMicrotask(() => {
-        p.querySelector(v)?.focus({ preventScroll: !0 });
+        p.querySelector(y)?.focus({ preventScroll: !0 });
       });
     } else if (w && typeof w == "object") {
       const u = document.createElement("div");
@@ -1432,13 +1442,13 @@ class X extends O {
         commit: f,
         cancel: E,
         updateRow: c,
-        onValueChange: C
+        onValueChange: R
       };
       if (w.mount)
         try {
           w.mount({ placeholder: u, context: h, spec: w });
-        } catch (R) {
-          console.warn(`[tbw-grid] External editor mount error for column '${i.field}':`, R);
+        } catch (v) {
+          console.warn(`[tbw-grid] External editor mount error for column '${i.field}':`, v);
         }
       else
         this.grid.dispatchEvent(
@@ -1449,7 +1459,7 @@ class X extends O {
   /**
    * Render a template-based editor.
    */
-  #R(e, t, i, r, s, n, l, c) {
+  #S(e, t, i, r, s, n, l, c) {
     const a = t.__editorTemplate;
     if (!a) return;
     const d = a.cloneNode(!0), g = t.__compiledEditor;
@@ -1463,8 +1473,8 @@ class X extends O {
     }) : d.querySelectorAll("*").forEach((E) => {
       E.childNodes.length === 1 && E.firstChild?.nodeType === Node.TEXT_NODE && (E.textContent = E.textContent?.replace(/{{\s*value\s*}}/g, r == null ? "" : String(r)).replace(/{{\s*row\.([a-zA-Z0-9_]+)\s*}}/g, (p, m) => {
         if (!S(m)) return "";
-        const y = i[m];
-        return y == null ? "" : String(y);
+        const C = i[m];
+        return C == null ? "" : String(C);
       }) || "");
     });
     const f = d.querySelector(
@@ -1495,7 +1505,7 @@ class X extends O {
    * Compare snapshot vs current row to detect if any values changed during this edit session.
    * Uses shallow comparison of all properties.
    */
-  #_(e, t) {
+  #L(e, t) {
     if (!e) return !1;
     const i = e, r = t, s = /* @__PURE__ */ new Set([...Object.keys(i), ...Object.keys(r)]);
     for (const n of s)
@@ -1506,7 +1516,7 @@ class X extends O {
   /**
    * Restore focus to cell after exiting edit mode.
    */
-  #v(e) {
+  #y(e) {
     queueMicrotask(() => {
       try {
         const t = e._focusRow, i = e._focusCol, r = e.findRenderedRowElement?.(t);
@@ -1524,7 +1534,7 @@ class X extends O {
   // #endregion
 }
 export {
-  X as EditingPlugin,
-  K as defaultEditorFor
+  Z as EditingPlugin,
+  j as defaultEditorFor
 };
 //# sourceMappingURL=index.js.map