@toolbox-web/grid 1.11.0 → 1.12.1

package/lib/plugins/editing/index.js

@@ -1,25 +1,25 @@
 function k(s) {
   s && s.querySelectorAll(".cell-focus").forEach((e) => e.classList.remove("cell-focus"));
 }
-const I = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])', T = document.createElement("template");
-T.innerHTML = '<div class="cell" role="gridcell" part="cell"></div>';
-const q = document.createElement("template");
-q.innerHTML = '<div class="data-grid-row" role="row" part="row"></div>';
-function S(s, e) {
+const v = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])', I = document.createElement("template");
+I.innerHTML = '<div class="cell" role="gridcell" part="cell"></div>';
+const T = document.createElement("template");
+T.innerHTML = '<div class="data-grid-row" role="row" part="row"></div>';
+function R(s, e) {
   if (s._virtualization?.enabled) {
     const { rowHeight: l, container: o, viewportEl: a } = s._virtualization, c = o, d = a?.clientHeight ?? c?.clientHeight ?? 0;
     if (c && d > 0) {
-      const f = s._focusRow * l;
-      f < c.scrollTop ? c.scrollTop = f : f + l > c.scrollTop + d && (c.scrollTop = f - d + l);
+      const h = s._focusRow * l;
+      h < c.scrollTop ? c.scrollTop = h : h + l > c.scrollTop + d && (c.scrollTop = h - d + l);
     }
   }
   const t = s._activeEditRows !== void 0 && s._activeEditRows !== -1;
   t || s.refreshVirtualWindow(!1), k(s._bodyEl), Array.from(s._bodyEl.querySelectorAll('[aria-selected="true"]')).forEach((l) => {
     l.setAttribute("aria-selected", "false");
   });
-  const i = s._focusRow, r = s._virtualization.start ?? 0, n = s._virtualization.end ?? s._rows.length;
-  if (i >= r && i < n) {
-    const l = s._bodyEl.querySelectorAll(".data-grid-row")[i - r];
+  const i = s._focusRow, n = s._virtualization.start ?? 0, r = s._virtualization.end ?? s._rows.length;
+  if (i >= n && i < r) {
+    const l = s._bodyEl.querySelectorAll(".data-grid-row")[i - n];
     let o = l?.children[s._focusCol];
     if ((!o || !o.classList?.contains("cell")) && (o = l?.querySelector(`.cell[data-col="${s._focusCol}"]`) ?? l?.querySelector(".cell[data-col]")), o) {
       o.classList.add("cell-focus"), o.setAttribute("aria-selected", "true");
@@ -32,12 +32,12 @@ function S(s, e) {
         else {
           const c = s._getHorizontalScrollOffsets?.(l ?? void 0, o) ?? { left: 0, right: 0 };
           if (!c.skipScroll) {
-            const d = o.getBoundingClientRect(), f = a.getBoundingClientRect(), u = d.left - f.left + a.scrollLeft, m = u + d.width, p = a.scrollLeft + c.left, g = a.scrollLeft + a.clientWidth - c.right;
+            const d = o.getBoundingClientRect(), h = a.getBoundingClientRect(), u = d.left - h.left + a.scrollLeft, m = u + d.width, p = a.scrollLeft + c.left, g = a.scrollLeft + a.clientWidth - c.right;
             u < p ? a.scrollLeft = u - c.left : m > g && (a.scrollLeft = m - a.clientWidth + c.right);
           }
         }
       if (s._activeEditRows !== void 0 && s._activeEditRows !== -1 && o.classList.contains("editing")) {
-        const c = o.querySelector(I);
+        const c = o.querySelector(v);
         if (c && document.activeElement !== c)
           try {
             c.focus({ preventScroll: !0 });
@@ -53,7 +53,7 @@ function S(s, e) {
     }
   }
 }
-const L = '<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>', P = {
+const L = '<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>', q = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -66,7 +66,7 @@ const L = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentCo
   filterActive: L,
   print: "🖨️"
 };
-class O {
+class P {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -129,7 +129,7 @@ class O {
    * Created fresh in attach(), aborted in detach().
    * This ensures event listeners are properly cleaned up when plugins are re-attached.
    */
-  #e;
+  #t;
   /**
    * Default configuration - subclasses should override this getter.
    * Note: This must be a getter (not property initializer) for proper inheritance
@@ -157,7 +157,7 @@ class O {
    * ```
    */
   attach(e) {
-    this.#e?.abort(), this.#e = new AbortController(), this.grid = e, this.config = { ...this.defaultConfig, ...this.userConfig };
+    this.#t?.abort(), this.#t = new AbortController(), this.grid = e, this.config = { ...this.defaultConfig, ...this.userConfig };
   }
   /**
    * Called when the plugin is detached from a grid.
@@ -173,7 +173,7 @@ class O {
    * ```
    */
   detach() {
-    this.#e?.abort(), this.#e = void 0;
+    this.#t?.abort(), this.#t = void 0;
   }
   /**
    * Get another plugin instance from the same grid.
@@ -348,7 +348,7 @@ class O {
    * document.addEventListener('keydown', handler, { signal: this.disconnectSignal });
    */
   get disconnectSignal() {
-    return this.#e?.signal ?? this.grid?.disconnectSignal;
+    return this.#t?.signal ?? this.grid?.disconnectSignal;
   }
   /**
    * Get the grid-level icons configuration.
@@ -356,7 +356,7 @@ class O {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...P, ...e };
+    return { ...q, ...e };
   }
   // #region Animation Helpers
   /**
@@ -432,8 +432,8 @@ class O {
   }
   // #endregion
 }
-const D = "@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 .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 M(s) {
+const M = "@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 D(s) {
   const e = s.options;
   return e ? typeof e == "function" ? e() : e : [];
 }
@@ -441,81 +441,80 @@ function x(s) {
   return (e) => {
     const t = s.editorParams, i = document.createElement("input");
     i.type = "number", i.value = e.value != null ? String(e.value) : "", t?.min !== void 0 && (i.min = String(t.min)), t?.max !== void 0 && (i.max = String(t.max)), t?.step !== void 0 && (i.step = String(t.step)), t?.placeholder && (i.placeholder = t.placeholder);
-    const r = () => e.commit(i.value === "" ? null : Number(i.value));
-    return i.addEventListener("blur", r), i.addEventListener("keydown", (n) => {
-      n.key === "Enter" && r(), n.key === "Escape" && e.cancel();
+    const n = () => e.commit(i.value === "" ? null : Number(i.value));
+    return i.addEventListener("blur", n), i.addEventListener("keydown", (r) => {
+      r.key === "Enter" && n(), r.key === "Escape" && e.cancel();
     }), i;
   };
 }
-function B() {
+function H() {
   return (s) => {
     const e = document.createElement("input");
     return e.type = "checkbox", e.checked = !!s.value, e.addEventListener("change", () => s.commit(e.checked)), e;
   };
 }
-function H(s) {
+function O(s) {
   return (e) => {
     const t = s.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);
-    const r = () => {
+    const n = () => {
       typeof e.value == "string" ? e.commit(i.value) : e.commit(i.valueAsDate);
     };
-    return i.addEventListener("change", r), i.addEventListener("keydown", (n) => {
-      n.key === "Escape" && e.cancel();
+    return i.addEventListener("change", n), i.addEventListener("keydown", (r) => {
+      r.key === "Escape" && e.cancel();
     }), i;
   };
 }
-function N(s) {
+function B(s) {
   return (e) => {
     const t = s.editorParams, i = document.createElement("select");
     if (s.multi && (i.multiple = !0), t?.includeEmpty) {
       const l = document.createElement("option");
       l.value = "", l.textContent = t.emptyLabel ?? "", i.appendChild(l);
     }
-    M(s).forEach((l) => {
+    D(s).forEach((l) => {
       const o = document.createElement("option");
       o.value = String(l.value), o.textContent = l.label, (s.multi && Array.isArray(e.value) && e.value.includes(l.value) || !s.multi && e.value === l.value) && (o.selected = !0), i.appendChild(o);
     });
-    const n = () => {
+    const r = () => {
       if (s.multi) {
         const l = Array.from(i.selectedOptions).map((o) => o.value);
         e.commit(l);
       } else
         e.commit(i.value);
     };
-    return i.addEventListener("change", n), i.addEventListener("blur", n), i.addEventListener("keydown", (l) => {
+    return i.addEventListener("change", r), i.addEventListener("blur", r), i.addEventListener("keydown", (l) => {
       l.key === "Escape" && e.cancel();
     }), i;
   };
 }
-function z(s) {
+function N(s) {
   return (e) => {
     const t = s.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);
-    const r = () => {
-      const n = i.value;
-      typeof e.value == "number" && n !== "" ? e.commit(Number(n)) : e.commit(n);
+    const n = () => {
+      const r = i.value;
+      typeof e.value == "number" && r !== "" ? e.commit(Number(r)) : e.commit(r);
     };
-    return i.addEventListener("blur", r), i.addEventListener("keydown", (n) => {
-      n.key === "Enter" && r(), n.key === "Escape" && e.cancel();
+    return i.addEventListener("blur", n), i.addEventListener("keydown", (r) => {
+      r.key === "Enter" && n(), r.key === "Escape" && e.cancel();
     }), i;
   };
 }
-function $(s) {
+function z(s) {
   switch (s.type) {
     case "number":
       return x(s);
     case "boolean":
-      return B();
+      return H();
     case "date":
-      return H(s);
+      return O(s);
     case "select":
-      return N(s);
+      return B(s);
     default:
-      return z(s);
+      return N(s);
   }
 }
-const C = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])';
 function G(s, e) {
   if (e.editor) return e.editor;
   if (e.__editorTemplate) return "template";
@@ -523,21 +522,21 @@ function G(s, e) {
   const i = s.effectiveConfig?.typeDefaults;
   if (i?.[e.type]?.editor)
     return i[e.type].editor;
-  const r = s.__frameworkAdapter;
-  if (r?.getTypeDefault) {
-    const n = r.getTypeDefault(e.type);
-    if (n?.editor)
-      return n.editor;
+  const n = s.__frameworkAdapter;
+  if (n?.getTypeDefault) {
+    const r = n.getTypeDefault(e.type);
+    if (r?.editor)
+      return r.editor;
   }
 }
-function E(s) {
+function C(s) {
   return !(typeof s != "string" || s === "__proto__" || s === "constructor" || s === "prototype");
 }
-function F(s) {
+function $(s) {
   const e = (s.__editingCellCount ?? 0) + 1;
   s.__editingCellCount = e, s.setAttribute("data-has-editing", "");
 }
-function j(s) {
+function F(s) {
   s.__editingCellCount = 0, s.removeAttribute("data-has-editing");
 }
 function y(s, e, t) {
@@ -545,13 +544,13 @@ function y(s, e, t) {
 }
 function A(s) {
 }
-function W(s, e, t, i) {
-  const r = s.querySelector("input,textarea,select");
-  r && (r.addEventListener("blur", () => {
-    t(y(r, e, i));
-  }), r instanceof HTMLInputElement && r.type === "checkbox" ? r.addEventListener("change", () => t(r.checked)) : r instanceof HTMLSelectElement && r.addEventListener("change", () => t(y(r, e, i))));
+function j(s, e, t, i) {
+  const n = s.querySelector("input,textarea,select");
+  n && (n.addEventListener("blur", () => {
+    t(y(n, e, i));
+  }), n instanceof HTMLInputElement && n.type === "checkbox" ? n.addEventListener("change", () => t(n.checked)) : n instanceof HTMLSelectElement && n.addEventListener("change", () => t(y(n, e, i))));
 }
-class K extends O {
+class W extends P {
   /**
    * Plugin manifest - declares owned properties for configuration validation.
    * @internal
@@ -591,33 +590,53 @@ class K extends O {
   /** @internal */
   name = "editing";
   /** @internal */
-  styles = D;
+  styles = M;
   /** @internal */
   get defaultConfig() {
     return {
+      mode: "row",
       editOn: "click"
     };
   }
+  /**
+   * Whether the grid is in 'grid' mode (all cells always editable).
+   */
+  get #t() {
+    return this.config.mode === "grid";
+  }
   // #region Editing State (fully owned by plugin)
   /** Currently active edit row index, or -1 if not editing */
   #e = -1;
   /** Currently active edit column index, or -1 if not editing */
-  #o = -1;
+  #c = -1;
   /** Snapshots of row data before editing started */
-  #s = /* @__PURE__ */ new Map();
+  #l = /* @__PURE__ */ new Map();
   /** Set of row IDs that have been modified (ID-based for stability) */
-  #i = /* @__PURE__ */ new Set();
-  /** Set of cells currently in edit mode: "rowIndex:colIndex" */
   #r = /* @__PURE__ */ new Set();
+  /** Set of cells currently in edit mode: "rowIndex:colIndex" */
+  #o = /* @__PURE__ */ new Set();
   /** Flag to restore focus after next render (used when exiting edit mode) */
-  #l = !1;
+  #d = !1;
   /** Row index pending animation after render, or -1 if none */
-  #a = -1;
+  #u = -1;
   /**
    * Invalid cell tracking: Map<rowId, Map<field, message>>
    * Used for validation feedback without canceling edits.
    */
-  #t = /* @__PURE__ */ new Map();
+  #i = /* @__PURE__ */ new Map();
+  /**
+   * In grid mode, tracks whether an input field is currently focused.
+   * When true: arrow keys work within input (edit mode).
+   * When false: arrow keys navigate between cells (navigation mode).
+   * Escape switches to navigation mode, Enter switches to edit mode.
+   */
+  #s = !1;
+  /**
+   * In grid mode, when true, prevents inputs from auto-focusing.
+   * This is set when Escape is pressed (navigation mode) and cleared
+   * when Enter is pressed or user explicitly clicks an input.
+   */
+  #a = !1;
   // #endregion
   // #region Lifecycle
   /** @internal */
@@ -630,13 +649,13 @@ class K extends O {
     }), Object.defineProperty(e, "changedRowIds", {
       get: () => this.changedRowIds,
       configurable: !0
-    }), e.resetChangedRows = (r) => this.resetChangedRows(r), e.beginBulkEdit = (r, n) => {
-      n && this.beginCellEdit(r, n);
+    }), e.resetChangedRows = (n) => this.resetChangedRows(n), e.beginBulkEdit = (n, r) => {
+      r && this.beginCellEdit(n, r);
     }, document.addEventListener(
       "keydown",
-      (r) => {
-        if (r.key === "Escape" && this.#e !== -1) {
-          if (this.config.onBeforeEditClose && this.config.onBeforeEditClose(r) === !1)
+      (n) => {
+        if (!this.#t && n.key === "Escape" && this.#e !== -1) {
+          if (this.config.onBeforeEditClose && this.config.onBeforeEditClose(n) === !1)
             return;
           this.#n(this.#e, !0);
         }
@@ -644,19 +663,54 @@ class K extends O {
       { capture: !0, signal: t }
     ), document.addEventListener(
       "mousedown",
-      (r) => {
-        if (this.#e === -1) return;
-        const n = i.findRenderedRowElement?.(this.#e);
-        !n || (r.composedPath && r.composedPath() || []).includes(n) || this.config.onBeforeEditClose && this.config.onBeforeEditClose(r) === !1 || queueMicrotask(() => {
+      (n) => {
+        if (this.#t || this.#e === -1) return;
+        const r = i.findRenderedRowElement?.(this.#e);
+        !r || (n.composedPath && n.composedPath() || []).includes(r) || this.config.onBeforeEditClose && this.config.onBeforeEditClose(n) === !1 || queueMicrotask(() => {
           this.#e !== -1 && this.#n(this.#e, !1);
         });
       },
       { signal: t }
-    );
+    ), this.#t && (this.gridElement.classList.add("tbw-grid-mode"), this.requestRender(), this.gridElement.addEventListener(
+      "focusin",
+      (n) => {
+        const r = n.target;
+        if (r.matches(v)) {
+          if (this.#a) {
+            r.blur(), this.gridElement.focus();
+            return;
+          }
+          this.#s = !0;
+        }
+      },
+      { signal: t }
+    ), this.gridElement.addEventListener(
+      "focusout",
+      (n) => {
+        const r = n.relatedTarget;
+        (!r || !this.gridElement.contains(r) || !r.matches(v)) && (this.#s = !1);
+      },
+      { signal: t }
+    ), this.gridElement.addEventListener(
+      "keydown",
+      (n) => {
+        if (n.key === "Escape" && this.#s) {
+          const r = document.activeElement;
+          r && this.gridElement.contains(r) && (r.blur(), this.gridElement.focus()), this.#s = !1, this.#a = !0, n.preventDefault(), n.stopPropagation();
+        }
+      },
+      { capture: !0, signal: t }
+    ), this.gridElement.addEventListener(
+      "mousedown",
+      (n) => {
+        n.target.matches(v) && (this.#a = !1);
+      },
+      { signal: t }
+    ));
   }
   /** @internal */
   detach() {
-    this.#e = -1, this.#o = -1, this.#s.clear(), this.#i.clear(), this.#r.clear(), super.detach();
+    this.gridElement.classList.remove("tbw-grid-mode"), this.#e = -1, this.#c = -1, this.#l.clear(), this.#r.clear(), this.#o.clear(), this.#s = !1, this.#a = !1, super.detach();
   }
   /**
    * Handle plugin queries.
@@ -664,7 +718,7 @@ class K extends O {
    */
   handleQuery(e) {
     if (e.type === "isEditing")
-      return this.#e !== -1;
+      return this.#t || this.#e !== -1;
   }
   // #endregion
   // #region Event Handlers (event distribution)
@@ -675,12 +729,13 @@ class K extends O {
    * @internal
    */
   onCellClick(e) {
+    if (this.#t) return !1;
     const t = this.grid, i = this.config.editOn ?? t.effectiveConfig?.editOn;
     if (i === !1 || i === "manual" || i !== "click" && i !== "dblclick") return !1;
-    const r = e.originalEvent.type === "dblclick";
-    if (i === "click" && r || i === "dblclick" && !r) return !1;
-    const { rowIndex: n } = e;
-    return t._columns?.some((o) => o.editable) ? (e.originalEvent.stopPropagation(), this.beginBulkEdit(n), !0) : !1;
+    const n = e.originalEvent.type === "dblclick";
+    if (i === "click" && n || i === "dblclick" && !n) return !1;
+    const { rowIndex: r } = e;
+    return t._columns?.some((o) => o.editable) ? (e.originalEvent.stopPropagation(), this.beginBulkEdit(r), !0) : !1;
   }
   /**
    * Handle keyboard events for edit lifecycle.
@@ -688,52 +743,62 @@ class K extends O {
    */
   onKeyDown(e) {
     const t = this.grid;
-    if (e.key === "Escape" && this.#e !== -1)
-      return this.config.onBeforeEditClose && this.config.onBeforeEditClose(e) === !1 || this.#n(this.#e, !0), !0;
-    if ((e.key === "ArrowUp" || e.key === "ArrowDown") && this.#e !== -1) {
+    if (e.key === "Escape") {
+      if (this.#t && this.#s) {
+        const i = document.activeElement;
+        return i && this.gridElement.contains(i) && i.blur(), this.#s = !1, this.requestAfterRender(), !0;
+      }
+      if (this.#e !== -1 && !this.#t)
+        return this.config.onBeforeEditClose && this.config.onBeforeEditClose(e) === !1 || this.#n(this.#e, !0), !0;
+    }
+    if (this.#t && !this.#s && (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight"))
+      return !1;
+    if ((e.key === "ArrowUp" || e.key === "ArrowDown") && this.#e !== -1 && !this.#t) {
       if (this.config.onBeforeEditClose && this.config.onBeforeEditClose(e) === !1)
         return !0;
-      const i = t._rows.length - 1, r = this.#e;
-      return this.#n(r, !1), e.key === "ArrowDown" ? t._focusRow = Math.min(i, t._focusRow + 1) : t._focusRow = Math.max(0, t._focusRow - 1), e.preventDefault(), S(t), this.requestAfterRender(), !0;
+      const i = t._rows.length - 1, n = this.#e;
+      return this.#n(n, !1), e.key === "ArrowDown" ? t._focusRow = Math.min(i, t._focusRow + 1) : t._focusRow = Math.max(0, t._focusRow - 1), e.preventDefault(), R(t), this.requestAfterRender(), !0;
     }
-    if (e.key === "Tab" && this.#e !== -1) {
+    if (e.key === "Tab" && (this.#e !== -1 || this.#t)) {
       e.preventDefault();
       const i = !e.shiftKey;
-      return this.#m(i), !0;
+      return this.#b(i), !0;
     }
     if (e.key === " " || e.key === "Spacebar") {
       if (this.#e !== -1)
         return !1;
-      const i = t._focusRow, r = t._focusCol;
-      if (i >= 0 && r >= 0) {
-        const n = t._visibleColumns[r], l = t._rows[i];
-        if (n?.editable && n.type === "boolean" && l) {
-          const o = n.field;
-          if (E(o)) {
+      const i = t._focusRow, n = t._focusCol;
+      if (i >= 0 && n >= 0) {
+        const r = t._visibleColumns[n], l = t._rows[i];
+        if (r?.editable && r.type === "boolean" && l) {
+          const o = r.field;
+          if (C(o)) {
             const c = !l[o];
-            return this.#u(i, n, c, l), e.preventDefault(), this.requestRender(), !0;
+            return this.#p(i, r, c, l), e.preventDefault(), this.requestRender(), !0;
           }
         }
       }
       return !1;
     }
     if (e.key === "Enter" && !e.shiftKey) {
+      if (this.#t && !this.#s)
+        return this.#v(), !0;
       if (this.#e !== -1)
         return !!(this.config.onBeforeEditClose && this.config.onBeforeEditClose(e) === !1);
       const i = this.config.editOn ?? t.effectiveConfig?.editOn;
       if (i === !1 || i === "manual") return !1;
-      const r = t._focusRow, n = t._focusCol;
-      if (r >= 0 && t._columns?.some((o) => o.editable)) {
-        const o = t._visibleColumns[n], a = t._rows[r], c = o?.field ?? "", d = c && a ? a[c] : void 0, f = this.gridElement.querySelector(`[data-row="${r}"][data-col="${n}"]`), u = new CustomEvent("cell-activate", {
+      const n = t._focusRow, r = t._focusCol;
+      if (n >= 0 && t._columns?.some((o) => o.editable)) {
+        const o = t._visibleColumns[r], a = t._rows[n], c = o?.field ?? "", d = c && a ? a[c] : void 0, h = this.gridElement.querySelector(`[data-row="${n}"][data-col="${r}"]`), u = new CustomEvent("cell-activate", {
           cancelable: !0,
           bubbles: !0,
           detail: {
-            rowIndex: r,
-            colIndex: n,
+            rowIndex: n,
+            colIndex: r,
             field: c,
             value: d,
             row: a,
-            cellEl: f,
+            cellEl: h,
             trigger: "keyboard",
             originalEvent: e
           }
@@ -742,9 +807,9 @@ class K extends O {
         const m = new CustomEvent("activate-cell", {
           cancelable: !0,
           bubbles: !0,
-          detail: { row: r, col: n }
+          detail: { row: n, col: r }
         });
-        return this.gridElement.dispatchEvent(m), u.defaultPrevented || m.defaultPrevented ? (e.preventDefault(), !0) : (this.beginBulkEdit(r), !0);
+        return this.gridElement.dispatchEvent(m), u.defaultPrevented || m.defaultPrevented ? (e.preventDefault(), !0) : (this.beginBulkEdit(n), !0);
       }
       return !1;
     }
@@ -758,18 +823,18 @@ class K extends O {
    * @internal
    */
   processColumns(e) {
-    const t = this.grid, i = t.effectiveConfig?.typeDefaults, r = t.__frameworkAdapter;
-    return !i && !r?.getTypeDefault ? e : e.map((n) => {
-      if (!n.type) return n;
+    const t = this.grid, i = t.effectiveConfig?.typeDefaults, n = t.__frameworkAdapter;
+    return !i && !n?.getTypeDefault ? e : e.map((r) => {
+      if (!r.type) return r;
       let l;
-      if (i?.[n.type]?.editorParams && (l = i[n.type].editorParams), !l && r?.getTypeDefault) {
-        const o = r.getTypeDefault(n.type);
+      if (i?.[r.type]?.editorParams && (l = i[r.type].editorParams), !l && n?.getTypeDefault) {
+        const o = n.getTypeDefault(r.type);
         o?.editorParams && (l = o.editorParams);
       }
       return l ? {
-        ...n,
-        editorParams: { ...l, ...n.editorParams }
-      } : n;
+        ...r,
+        editorParams: { ...l, ...r.editorParams }
+      } : r;
     });
   }
   /**
@@ -780,20 +845,30 @@ class K extends O {
    */
   afterRender() {
     const e = this.grid;
-    if (this.#l && (this.#l = !1, this.#g(e)), this.#a !== -1) {
-      const t = this.#a;
-      this.#a = -1, e.animateRow?.(t, "change");
+    if (this.#d && (this.#d = !1, this.#E(e)), this.#u !== -1) {
+      const t = this.#u;
+      this.#u = -1, e.animateRow?.(t, "change");
     }
-    if (this.#r.size !== 0)
-      for (const t of this.#r) {
-        const [i, r] = t.split(":"), n = parseInt(i, 10), l = parseInt(r, 10), o = e.findRenderedRowElement?.(n);
+    if (!this.#t && this.#o.size !== 0)
+      for (const t of this.#o) {
+        const [i, n] = t.split(":"), r = parseInt(i, 10), l = parseInt(n, 10), o = e.findRenderedRowElement?.(r);
         if (!o) continue;
         const a = o.querySelector(`.cell[data-col="${l}"]`);
         if (!a || a.classList.contains("editing")) continue;
-        const c = e._rows[n], d = e._visibleColumns[l];
-        c && d && this.#f(c, n, d, l, a, !0);
+        const c = e._rows[r], d = e._visibleColumns[l];
+        c && d && this.#g(c, r, d, l, a, !0);
       }
   }
+  /**
+   * Hook called after each cell is rendered.
+   * In grid mode, injects editors into editable cells during render (no DOM queries needed).
+   * @internal
+   */
+  afterCellRender(e) {
+    if (!this.#t) return;
+    const { row: t, rowIndex: i, column: n, colIndex: r, cellElement: l } = e;
+    n.editable && (l.classList.contains("editing") || this.#g(t, i, n, r, l, !0));
+  }
   /**
    * On scroll render, reapply editors to recycled cells.
    * @internal
@@ -809,7 +884,7 @@ class K extends O {
    */
   get changedRows() {
     const e = [];
-    for (const t of this.#i) {
+    for (const t of this.#r) {
       const i = this.grid.getRow(t);
       i && e.push(i);
     }
@@ -819,7 +894,7 @@ class K extends O {
    * Get IDs of all modified rows.
    */
   get changedRowIds() {
-    return Array.from(this.#i);
+    return Array.from(this.#r);
   }
   /**
    * Get the currently active edit row index, or -1 if not editing.
@@ -831,7 +906,7 @@ class K extends O {
    * Get the currently active edit column index, or -1 if not editing.
    */
   get activeEditCol() {
-    return this.#o;
+    return this.#c;
   }
   /**
    * Check if a specific row is currently being edited.
@@ -843,7 +918,7 @@ class K extends O {
    * Check if a specific cell is currently being edited.
    */
   isCellEditing(e, t) {
-    return this.#r.has(`${e}:${t}`);
+    return this.#o.has(`${e}:${t}`);
   }
   /**
    * Check if a specific row has been modified.
@@ -853,8 +928,8 @@ class K extends O {
     const t = this.grid, i = t._rows[e];
     if (!i) return !1;
     try {
-      const r = t.getRowId?.(i);
-      return r ? this.#i.has(r) : !1;
+      const n = t.getRowId?.(i);
+      return n ? this.#r.has(n) : !1;
     } catch {
       return !1;
     }
@@ -864,7 +939,7 @@ class K extends O {
    * @param rowId - Row ID to check
    */
   isRowChangedById(e) {
-    return this.#i.has(e);
+    return this.#r.has(e);
   }
   // #region Cell Validation
   /**
@@ -889,8 +964,8 @@ class K extends O {
    * ```
    */
   setInvalid(e, t, i = "") {
-    let r = this.#t.get(e);
-    r || (r = /* @__PURE__ */ new Map(), this.#t.set(e, r)), r.set(t, i), this.#c(e, t, !0);
+    let n = this.#i.get(e);
+    n || (n = /* @__PURE__ */ new Map(), this.#i.set(e, n)), n.set(t, i), this.#f(e, t, !0);
   }
   /**
    * Clear the invalid state for a specific cell.
@@ -899,8 +974,8 @@ class K extends O {
    * @param field - The field name
    */
   clearInvalid(e, t) {
-    const i = this.#t.get(e);
-    i && (i.delete(t), i.size === 0 && this.#t.delete(e)), this.#c(e, t, !1);
+    const i = this.#i.get(e);
+    i && (i.delete(t), i.size === 0 && this.#i.delete(e)), this.#f(e, t, !1);
   }
   /**
    * Clear all invalid cells for a specific row.
@@ -908,19 +983,19 @@ class K extends O {
    * @param rowId - The row ID (from getRowId)
    */
   clearRowInvalid(e) {
-    const t = this.#t.get(e);
+    const t = this.#i.get(e);
     if (t) {
       const i = Array.from(t.keys());
-      this.#t.delete(e), i.forEach((r) => this.#c(e, r, !1));
+      this.#i.delete(e), i.forEach((n) => this.#f(e, n, !1));
     }
   }
   /**
    * Clear all invalid cell states across all rows.
    */
   clearAllInvalid() {
-    const e = Array.from(this.#t.entries());
-    this.#t.clear(), e.forEach(([t, i]) => {
-      i.forEach((r, n) => this.#c(t, n, !1));
+    const e = Array.from(this.#i.entries());
+    this.#i.clear(), e.forEach(([t, i]) => {
+      i.forEach((n, r) => this.#f(t, r, !1));
     });
   }
   /**
@@ -931,7 +1006,7 @@ class K extends O {
    * @returns True if the cell is marked as invalid
    */
   isCellInvalid(e, t) {
-    return this.#t.get(e)?.has(t) ?? !1;
+    return this.#i.get(e)?.has(t) ?? !1;
   }
   /**
    * Get the validation message for an invalid cell.
@@ -941,7 +1016,7 @@ class K extends O {
    * @returns The validation message, or undefined if cell is valid
    */
   getInvalidMessage(e, t) {
-    return this.#t.get(e)?.get(t);
+    return this.#i.get(e)?.get(t);
   }
   /**
    * Check if a row has any invalid cells.
@@ -950,7 +1025,7 @@ class K extends O {
    * @returns True if the row has at least one invalid cell
    */
   hasInvalidCells(e) {
-    const t = this.#t.get(e);
+    const t = this.#i.get(e);
     return t ? t.size > 0 : !1;
   }
   /**
@@ -960,27 +1035,27 @@ class K extends O {
    * @returns Map of field names to validation messages
    */
   getInvalidFields(e) {
-    return new Map(this.#t.get(e) ?? []);
+    return new Map(this.#i.get(e) ?? []);
   }
   /**
    * Sync the data-invalid attribute on a cell element.
    */
-  #c(e, t, i) {
-    const r = this.grid, n = r._visibleColumns?.findIndex((d) => d.field === t);
-    if (n === -1 || n === void 0) return;
-    const o = r._rows?.findIndex((d) => {
+  #f(e, t, i) {
+    const n = this.grid, r = n._visibleColumns?.findIndex((d) => d.field === t);
+    if (r === -1 || r === void 0) return;
+    const o = n._rows?.findIndex((d) => {
       try {
-        return r.getRowId?.(d) === e;
+        return n.getRowId?.(d) === e;
       } catch {
         return !1;
       }
     });
     if (o === -1 || o === void 0) return;
-    const c = r.findRenderedRowElement?.(o)?.querySelector(`.cell[data-col="${n}"]`);
+    const c = n.findRenderedRowElement?.(o)?.querySelector(`.cell[data-col="${r}"]`);
     if (c)
       if (i) {
         c.setAttribute("data-invalid", "true");
-        const d = this.#t.get(e)?.get(t);
+        const d = this.#i.get(e)?.get(t);
         d && c.setAttribute("title", d);
       } else
         c.removeAttribute("data-invalid"), c.removeAttribute("title");
@@ -993,7 +1068,7 @@ class K extends O {
    */
   resetChangedRows(e) {
     const t = this.changedRows, i = this.changedRowIds;
-    this.#i.clear(), this.#d(), e || this.emit("changed-rows-reset", { rows: t, ids: i }), this.grid._rowPool?.forEach((n) => n.classList.remove("changed"));
+    this.#r.clear(), this.#h(), e || this.emit("changed-rows-reset", { rows: t, ids: i }), this.grid._rowPool?.forEach((r) => r.classList.remove("changed"));
   }
   /**
    * Programmatically begin editing a cell.
@@ -1002,10 +1077,10 @@ class K extends O {
    * @fires cell-commit - Emitted when the cell value is committed (on blur or Enter)
    */
   beginCellEdit(e, t) {
-    const i = this.grid, r = i._visibleColumns.findIndex((a) => a.field === t);
-    if (r === -1 || !i._visibleColumns[r]?.editable) return;
-    const o = i.findRenderedRowElement?.(e)?.querySelector(`.cell[data-col="${r}"]`);
-    o && this.#p(e, r, o);
+    const i = this.grid, n = i._visibleColumns.findIndex((a) => a.field === t);
+    if (n === -1 || !i._visibleColumns[n]?.editable) return;
+    const o = i.findRenderedRowElement?.(e)?.querySelector(`.cell[data-col="${n}"]`);
+    o && this.#w(e, n, o);
   }
   /**
    * Programmatically begin editing all editable cells in a row.
@@ -1016,19 +1091,19 @@ class K extends O {
   beginBulkEdit(e) {
     const t = this.grid;
     if ((this.config.editOn ?? t.effectiveConfig?.editOn) === !1 || !t._columns?.some((o) => o.editable)) return;
-    const n = t.findRenderedRowElement?.(e);
-    if (!n) return;
+    const r = t.findRenderedRowElement?.(e);
+    if (!r) return;
     const l = t._rows[e];
-    this.#h(e, l), Array.from(n.children).forEach((o, a) => {
+    this.#m(e, l), Array.from(r.children).forEach((o, a) => {
       const c = t._visibleColumns[a];
       if (c?.editable) {
         const d = o;
-        d.classList.contains("editing") || this.#f(l, e, c, a, d, !0);
+        d.classList.contains("editing") || this.#g(l, e, c, a, d, !0);
       }
     }), setTimeout(() => {
-      let o = n.querySelector(`.cell[data-col="${t._focusCol}"]`);
-      if (o?.classList.contains("editing") || (o = n.querySelector(".cell.editing")), o?.classList.contains("editing")) {
-        const a = o.querySelector(C);
+      let o = r.querySelector(`.cell[data-col="${t._focusCol}"]`);
+      if (o?.classList.contains("editing") || (o = r.querySelector(".cell.editing")), o?.classList.contains("editing")) {
+        const a = o.querySelector(v);
         try {
           a?.focus({ preventScroll: !0 });
         } catch {
@@ -1054,115 +1129,131 @@ class K extends O {
   /**
    * Begin editing a single cell.
    */
-  #p(e, t, i) {
-    const r = this.grid, n = r._rows[e], l = r._visibleColumns[t];
-    !n || !l?.editable || i.classList.contains("editing") || (this.#e !== e && this.#h(e, n), this.#o = t, this.#f(n, e, l, t, i, !1));
+  #w(e, t, i) {
+    const n = this.grid, r = n._rows[e], l = n._visibleColumns[t];
+    !r || !l?.editable || i.classList.contains("editing") || (this.#e !== e && this.#m(e, r), this.#c = t, this.#g(r, e, l, 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.
+   */
+  #v() {
+    const e = this.grid, t = e._focusRow, i = e._focusCol;
+    if (t < 0 || i < 0) return;
+    const r = e.findRenderedRowElement?.(t)?.querySelector(`.cell[data-col="${i}"]`);
+    if (r?.classList.contains("editing")) {
+      const l = r.querySelector(v);
+      l && (this.#a = !1, l.focus(), this.#s = !0, l instanceof HTMLInputElement && (l.type === "text" || l.type === "number") && l.select());
+    }
   }
   /**
    * Handle Tab/Shift+Tab navigation while editing.
    * Moves to next/previous editable cell, staying in edit mode.
    * Wraps to next/previous row when reaching row boundaries.
    */
-  #m(e) {
-    const t = this.grid, i = t._rows, r = this.#e, n = t._visibleColumns.map((c, d) => c.editable ? d : -1).filter((c) => c >= 0);
-    if (n.length === 0) return;
-    const o = n.indexOf(t._focusCol) + (e ? 1 : -1);
-    if (o >= 0 && o < n.length) {
-      t._focusCol = n[o];
-      const d = t.findRenderedRowElement?.(r)?.querySelector(`.cell[data-col="${n[o]}"]`);
-      d?.classList.contains("editing") && d.querySelector(C)?.focus({ preventScroll: !0 }), S(t, { forceHorizontalScroll: !0 });
+  #b(e) {
+    const t = this.grid, i = t._rows, n = this.#t ? t._focusRow : this.#e, r = t._visibleColumns.map((c, d) => c.editable ? d : -1).filter((c) => c >= 0);
+    if (r.length === 0) return;
+    const o = r.indexOf(t._focusCol) + (e ? 1 : -1);
+    if (o >= 0 && o < r.length) {
+      t._focusCol = r[o];
+      const d = t.findRenderedRowElement?.(n)?.querySelector(`.cell[data-col="${r[o]}"]`);
+      d?.classList.contains("editing") && d.querySelector(v)?.focus({ preventScroll: !0 }), R(t, { forceHorizontalScroll: !0 });
       return;
     }
-    const a = r + (e ? 1 : -1);
-    a >= 0 && a < i.length && (this.#n(r, !1), t._focusRow = a, t._focusCol = e ? n[0] : n[n.length - 1], this.beginBulkEdit(a), S(t, { forceHorizontalScroll: !0 }));
+    const a = n + (e ? 1 : -1);
+    a >= 0 && a < i.length && (this.#t ? (t._focusRow = a, t._focusCol = e ? r[0] : r[r.length - 1], R(t, { forceHorizontalScroll: !0 }), this.requestAfterRender(), setTimeout(() => {
+      const d = t.findRenderedRowElement?.(a)?.querySelector(`.cell[data-col="${t._focusCol}"]`);
+      d?.classList.contains("editing") && d.querySelector(v)?.focus({ preventScroll: !0 });
+    }, 0)) : (this.#n(n, !1), t._focusRow = a, t._focusCol = e ? r[0] : r[r.length - 1], this.beginBulkEdit(a), R(t, { forceHorizontalScroll: !0 })));
   }
   /**
    * Sync the internal grid state with the plugin's editing state.
    */
-  #d() {
+  #h() {
     const e = this.grid;
-    e._activeEditRows = this.#e, e._rowEditSnapshots = this.#s;
+    e._activeEditRows = this.#e, e._rowEditSnapshots = this.#l;
   }
   /**
    * Snapshot original row data and mark as editing.
    */
-  #h(e, t) {
-    this.#e !== e && (this.#s.set(e, { ...t }), this.#e = e, this.#d());
+  #m(e, t) {
+    this.#e !== e && (this.#l.set(e, { ...t }), this.#e = e, this.#h());
   }
   /**
    * Exit editing for a row.
    */
   #n(e, t) {
     if (this.#e !== e) return;
-    const i = this.grid, r = this.#s.get(e), n = i._rows[e], l = i.findRenderedRowElement?.(e);
+    const i = this.grid, n = this.#l.get(e), r = i._rows[e], l = i.findRenderedRowElement?.(e);
     let o;
-    if (n)
+    if (r)
       try {
-        o = i.getRowId?.(n);
+        o = i.getRowId?.(r);
       } catch {
       }
-    if (!t && l && n && l.querySelectorAll(".cell.editing").forEach((c) => {
+    if (!t && l && r && l.querySelectorAll(".cell.editing").forEach((c) => {
       const d = Number(c.getAttribute("data-col"));
       if (isNaN(d)) return;
-      const f = i._visibleColumns[d];
-      if (!f || c.hasAttribute("data-editor-managed"))
+      const h = i._visibleColumns[d];
+      if (!h || c.hasAttribute("data-editor-managed"))
         return;
       const u = c.querySelector("input,textarea,select");
       if (u) {
-        const m = f.field, p = n[m], g = y(u, f, p);
-        p !== g && this.#u(e, f, g, n);
+        const m = h.field, p = r[m], g = y(u, h, p);
+        p !== g && this.#p(e, h, g, r);
       }
-    }), t && r && n)
-      Object.keys(r).forEach((a) => {
-        n[a] = r[a];
-      }), o && (this.#i.delete(o), this.clearRowInvalid(o));
-    else if (!t && n) {
-      const a = this.#b(r, n), c = o ? this.#i.has(o) : a, d = this.emitCancelable("row-commit", {
+    }), t && n && r)
+      Object.keys(n).forEach((a) => {
+        r[a] = n[a];
+      }), o && (this.#r.delete(o), this.clearRowInvalid(o));
+    else if (!t && r) {
+      const a = this.#C(n, r), c = o ? this.#r.has(o) : a, d = this.emitCancelable("row-commit", {
         rowIndex: e,
         rowId: o ?? "",
-        row: n,
-        oldValue: r,
-        newValue: n,
+        row: r,
+        oldValue: n,
+        newValue: r,
         changed: c,
         changedRows: this.changedRows,
         changedRowIds: this.changedRowIds
       });
-      d && r ? (Object.keys(r).forEach((f) => {
-        n[f] = r[f];
-      }), o && (this.#i.delete(o), this.clearRowInvalid(o))) : !d && a && this.isAnimationEnabled && (this.#a = e);
+      d && n ? (Object.keys(n).forEach((h) => {
+        r[h] = n[h];
+      }), o && (this.#r.delete(o), this.clearRowInvalid(o))) : !d && a && this.isAnimationEnabled && (this.#u = e);
     }
-    this.#s.delete(e), this.#e = -1, this.#o = -1, this.#d();
-    for (const a of this.#r)
-      a.startsWith(`${e}:`) && this.#r.delete(a);
+    this.#l.delete(e), this.#e = -1, this.#c = -1, this.#h();
+    for (const a of this.#o)
+      a.startsWith(`${e}:`) && this.#o.delete(a);
     l && (l.querySelectorAll(".cell.editing").forEach((a) => {
-      a.classList.remove("editing"), j(a.parentElement);
-    }), this.requestRender()), this.#l = !0, l || (this.#g(i), this.#l = !1);
+      a.classList.remove("editing"), F(a.parentElement);
+    }), this.requestRender()), this.#d = !0, l || (this.#E(i), this.#d = !1);
   }
   /**
    * Commit a single cell value change.
    * Uses ID-based change tracking for stability when rows are reordered.
    */
-  #u(e, t, i, r) {
-    const n = t.field;
-    if (!E(n)) return;
-    const l = r[n];
+  #p(e, t, i, n) {
+    const r = t.field;
+    if (!C(r)) return;
+    const l = n[r];
     if (l === i) return;
     const o = this.grid;
     let a;
     try {
-      a = this.grid.getRowId(r);
+      a = this.grid.getRowId(n);
     } catch {
     }
-    const c = a ? !this.#i.has(a) : !0, d = a ? (g) => this.grid.updateRow(a, g, "cascade") : A;
-    let f = !1;
+    const c = a ? !this.#r.has(a) : !0, d = a ? (g) => this.grid.updateRow(a, g, "cascade") : A;
+    let h = !1;
     const u = a ? (g) => {
-      f = !0, this.setInvalid(a, n, g ?? "");
+      h = !0, this.setInvalid(a, r, g ?? "");
     } : () => {
     };
     if (this.emitCancelable("cell-commit", {
-      row: r,
+      row: n,
       rowId: a ?? "",
-      field: n,
+      field: r,
       oldValue: l,
       value: i,
       rowIndex: e,
@@ -1172,9 +1263,9 @@ class K extends O {
       updateRow: d,
       setInvalid: u
     })) return;
-    a && !f && this.isCellInvalid(a, n) && this.clearInvalid(a, n), r[n] = i, a && this.#i.add(a), this.#d(), this.emitPluginEvent("cell-edit-committed", {
+    a && !h && this.isCellInvalid(a, r) && this.clearInvalid(a, r), n[r] = i, a && this.#r.add(a), this.#h(), this.emitPluginEvent("cell-edit-committed", {
       rowIndex: e,
-      field: n,
+      field: r,
       oldValue: l,
       newValue: i
     });
@@ -1184,124 +1275,134 @@ class K extends O {
   /**
    * Inject an editor into a cell.
    */
-  #f(e, t, i, r, n, l) {
-    if (!i.editable || n.classList.contains("editing")) return;
+  #g(e, t, i, n, r, l) {
+    if (!i.editable || r.classList.contains("editing")) return;
     let o;
     try {
       o = this.grid.getRowId(e);
     } catch {
     }
-    const a = o ? (h) => this.grid.updateRow(o, h, "cascade") : A, c = E(i.field) ? e[i.field] : void 0;
-    n.classList.add("editing"), this.#r.add(`${t}:${r}`);
-    const d = n.parentElement;
-    d && F(d);
-    let f = !1;
-    const u = (h) => {
-      f || this.#e === -1 || this.#u(t, i, h, e);
+    const a = o ? (f) => this.grid.updateRow(o, f, "cascade") : A, c = C(i.field) ? e[i.field] : void 0;
+    r.classList.add("editing"), this.#o.add(`${t}:${n}`);
+    const d = r.parentElement;
+    d && $(d);
+    let h = !1;
+    const u = (f) => {
+      h || !this.#t && this.#e === -1 || this.#p(t, i, f, e);
     }, m = () => {
-      f = !0, E(i.field) && (e[i.field] = c);
+      h = !0, C(i.field) && (e[i.field] = c);
     }, p = document.createElement("div");
-    p.className = "tbw-editor-host", n.innerHTML = "", n.appendChild(p), p.addEventListener("keydown", (h) => {
-      if (h.key === "Enter") {
-        if (this.config.onBeforeEditClose && this.config.onBeforeEditClose(h) === !1)
+    p.className = "tbw-editor-host", r.innerHTML = "", r.appendChild(p), p.addEventListener("keydown", (f) => {
+      if (f.key === "Enter") {
+        if (this.#t) {
+          f.stopPropagation(), f.preventDefault();
+          const E = p.querySelector("input,textarea,select");
+          E && u(y(E, i, c));
+          return;
+        }
+        if (this.config.onBeforeEditClose && this.config.onBeforeEditClose(f) === !1)
           return;
-        h.stopPropagation(), h.preventDefault(), f = !0, this.#n(t, !1);
+        f.stopPropagation(), f.preventDefault(), h = !0, this.#n(t, !1);
       }
-      if (h.key === "Escape") {
-        if (this.config.onBeforeEditClose && this.config.onBeforeEditClose(h) === !1)
+      if (f.key === "Escape") {
+        if (this.#t) {
+          f.stopPropagation(), f.preventDefault();
+          return;
+        }
+        if (this.config.onBeforeEditClose && this.config.onBeforeEditClose(f) === !1)
           return;
-        h.stopPropagation(), h.preventDefault(), m(), this.#n(t, !0);
+        f.stopPropagation(), f.preventDefault(), m(), this.#n(t, !0);
       }
     });
-    const g = i, w = g.__editorTemplate, b = G(this.grid, g) ?? $(i), R = c;
-    if (b === "template" && w)
-      this.#v(p, g, e, c, u, m, l, t);
-    else if (typeof b == "string") {
-      const h = document.createElement(b);
-      h.value = R, h.addEventListener("change", () => u(h.value)), p.appendChild(h), l || queueMicrotask(() => {
-        p.querySelector(C)?.focus({ preventScroll: !0 });
+    const g = i, b = g.__editorTemplate, w = G(this.grid, g) ?? z(i), _ = c;
+    if (w === "template" && b)
+      this.#y(p, g, e, c, u, m, l, t);
+    else if (typeof w == "string") {
+      const f = document.createElement(w);
+      f.value = _, f.addEventListener("change", () => u(f.value)), p.appendChild(f), l || queueMicrotask(() => {
+        p.querySelector(v)?.focus({ preventScroll: !0 });
       });
-    } else if (typeof b == "function") {
-      const h = {
+    } else if (typeof w == "function") {
+      const f = {
         row: e,
         rowId: o ?? "",
-        value: R,
+        value: _,
         field: i.field,
         column: i,
         commit: u,
         cancel: m,
         updateRow: a
-      }, v = b(h);
-      typeof v == "string" ? (p.innerHTML = v, W(p, i, u, c)) : v instanceof Node && (p.appendChild(v), v instanceof HTMLInputElement || v instanceof HTMLSelectElement || v instanceof HTMLTextAreaElement || n.setAttribute("data-editor-managed", "")), l || queueMicrotask(() => {
-        p.querySelector(C)?.focus({ preventScroll: !0 });
+      }, E = w(f);
+      typeof E == "string" ? (p.innerHTML = E, j(p, i, u, c)) : E instanceof Node && (p.appendChild(E), E instanceof HTMLInputElement || E instanceof HTMLSelectElement || E instanceof HTMLTextAreaElement || r.setAttribute("data-editor-managed", "")), l || queueMicrotask(() => {
+        p.querySelector(v)?.focus({ preventScroll: !0 });
       });
-    } else if (b && typeof b == "object") {
-      const h = document.createElement("div");
-      h.setAttribute("data-external-editor", ""), h.setAttribute("data-field", i.field), p.appendChild(h), n.setAttribute("data-editor-managed", "");
-      const v = {
+    } else if (w && typeof w == "object") {
+      const f = document.createElement("div");
+      f.setAttribute("data-external-editor", ""), f.setAttribute("data-field", i.field), p.appendChild(f), r.setAttribute("data-editor-managed", "");
+      const E = {
         row: e,
         rowId: o ?? "",
-        value: R,
+        value: _,
         field: i.field,
         column: i,
         commit: u,
         cancel: m,
         updateRow: a
       };
-      if (b.mount)
+      if (w.mount)
         try {
-          b.mount({ placeholder: h, context: v, spec: b });
-        } catch (_) {
-          console.warn(`[tbw-grid] External editor mount error for column '${i.field}':`, _);
+          w.mount({ placeholder: f, context: E, spec: w });
+        } catch (S) {
+          console.warn(`[tbw-grid] External editor mount error for column '${i.field}':`, S);
         }
       else
         this.grid.dispatchEvent(
-          new CustomEvent("mount-external-editor", { detail: { placeholder: h, spec: b, context: v } })
+          new CustomEvent("mount-external-editor", { detail: { placeholder: f, spec: w, context: E } })
         );
     }
   }
   /**
    * Render a template-based editor.
    */
-  #v(e, t, i, r, n, l, o, a) {
+  #y(e, t, i, n, r, l, o, a) {
     const c = t.__editorTemplate;
     if (!c) return;
-    const d = c.cloneNode(!0), f = t.__compiledEditor;
-    f ? d.innerHTML = f({
+    const d = c.cloneNode(!0), h = t.__compiledEditor;
+    h ? d.innerHTML = h({
       row: i,
-      value: r,
+      value: n,
       field: t.field,
       column: t,
-      commit: n,
+      commit: r,
       cancel: l
     }) : d.querySelectorAll("*").forEach((m) => {
-      m.childNodes.length === 1 && m.firstChild?.nodeType === Node.TEXT_NODE && (m.textContent = m.textContent?.replace(/{{\s*value\s*}}/g, r == null ? "" : String(r)).replace(/{{\s*row\.([a-zA-Z0-9_]+)\s*}}/g, (p, g) => {
-        if (!E(g)) return "";
-        const w = i[g];
-        return w == null ? "" : String(w);
+      m.childNodes.length === 1 && m.firstChild?.nodeType === Node.TEXT_NODE && (m.textContent = m.textContent?.replace(/{{\s*value\s*}}/g, n == null ? "" : String(n)).replace(/{{\s*row\.([a-zA-Z0-9_]+)\s*}}/g, (p, g) => {
+        if (!C(g)) return "";
+        const b = i[g];
+        return b == null ? "" : String(b);
       }) || "");
     });
     const u = d.querySelector(
       "input,textarea,select"
     );
     if (u) {
-      u instanceof HTMLInputElement && u.type === "checkbox" ? u.checked = !!r : u.value = String(r ?? "");
+      u instanceof HTMLInputElement && u.type === "checkbox" ? u.checked = !!n : u.value = String(n ?? "");
       let m = !1;
       u.addEventListener("blur", () => {
-        m || n(y(u, t, r));
+        m || r(y(u, t, n));
       }), u.addEventListener("keydown", (p) => {
         const g = p;
         if (g.key === "Enter") {
           if (this.config.onBeforeEditClose && this.config.onBeforeEditClose(g) === !1)
             return;
-          g.stopPropagation(), g.preventDefault(), m = !0, n(y(u, t, r)), this.#n(a, !1);
+          g.stopPropagation(), g.preventDefault(), m = !0, r(y(u, t, n)), this.#n(a, !1);
         }
         if (g.key === "Escape") {
           if (this.config.onBeforeEditClose && this.config.onBeforeEditClose(g) === !1)
             return;
           g.stopPropagation(), g.preventDefault(), l(), this.#n(a, !0);
         }
-      }), u instanceof HTMLInputElement && u.type === "checkbox" && u.addEventListener("change", () => n(u.checked)), o || setTimeout(() => u.focus({ preventScroll: !0 }), 0);
+      }), u instanceof HTMLInputElement && u.type === "checkbox" && u.addEventListener("change", () => r(u.checked)), o || setTimeout(() => u.focus({ preventScroll: !0 }), 0);
     }
     e.appendChild(d);
   }
@@ -1309,27 +1410,27 @@ class K extends O {
    * Compare snapshot vs current row to detect if any values changed during this edit session.
    * Uses shallow comparison of all properties.
    */
-  #b(e, t) {
+  #C(e, t) {
     if (!e) return !1;
-    const i = e, r = t, n = /* @__PURE__ */ new Set([...Object.keys(i), ...Object.keys(r)]);
-    for (const l of n)
-      if (i[l] !== r[l])
+    const i = e, n = t, r = /* @__PURE__ */ new Set([...Object.keys(i), ...Object.keys(n)]);
+    for (const l of r)
+      if (i[l] !== n[l])
         return !0;
     return !1;
   }
   /**
    * Restore focus to cell after exiting edit mode.
    */
-  #g(e) {
+  #E(e) {
     queueMicrotask(() => {
       try {
-        const t = e._focusRow, i = e._focusCol, r = e.findRenderedRowElement?.(t);
-        if (r) {
+        const t = e._focusRow, i = e._focusCol, n = e.findRenderedRowElement?.(t);
+        if (n) {
           Array.from(e._bodyEl.querySelectorAll(".cell-focus")).forEach(
             (l) => l.classList.remove("cell-focus")
           );
-          const n = r.querySelector(`.cell[data-row="${t}"][data-col="${i}"]`);
-          n && (n.classList.add("cell-focus"), n.setAttribute("aria-selected", "true"), n.hasAttribute("tabindex") || n.setAttribute("tabindex", "-1"), n.focus({ preventScroll: !0 }));
+          const r = n.querySelector(`.cell[data-row="${t}"][data-col="${i}"]`);
+          r && (r.classList.add("cell-focus"), r.setAttribute("aria-selected", "true"), r.hasAttribute("tabindex") || r.setAttribute("tabindex", "-1"), r.focus({ preventScroll: !0 }));
         }
       } catch {
       }
@@ -1338,7 +1439,7 @@ class K extends O {
   // #endregion
 }
 export {
-  K as EditingPlugin,
-  $ as defaultEditorFor
+  W as EditingPlugin,
+  z as defaultEditorFor
 };
 //# sourceMappingURL=index.js.map