@toolbox-web/grid 1.9.1 → 1.10.0

package/lib/plugins/editing/index.js

@@ -1,33 +1,4 @@
-const R = "data-animating", A = {
-  change: "--tbw-row-change-duration",
-  insert: "--tbw-row-insert-duration",
-  remove: "--tbw-row-remove-duration"
-}, P = {
-  change: 500,
-  insert: 300,
-  remove: 200
-};
-function T(s) {
-  const e = s.trim().toLowerCase();
-  return e.endsWith("ms") ? parseFloat(e) : e.endsWith("s") ? parseFloat(e) * 1e3 : parseFloat(e);
-}
-function I(s, e) {
-  const i = A[e], t = getComputedStyle(s).getPropertyValue(i);
-  if (t) {
-    const r = T(t);
-    if (!isNaN(r) && r > 0)
-      return r;
-  }
-  return P[e];
-}
-function D(s, e, i) {
-  s.removeAttribute(R), s.offsetWidth, s.setAttribute(R, e);
-  const t = I(s, e);
-  setTimeout(() => {
-    s.removeAttribute(R);
-  }, t);
-}
-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 = {
+const S = '<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>', L = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -36,11 +7,11 @@ const L = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentCo
   submenuArrow: "▶",
   dragHandle: "⋮⋮",
   toolPanel: "☰",
-  filter: L,
-  filterActive: L,
+  filter: S,
+  filterActive: S,
   print: "🖨️"
 };
-class O {
+class I {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -167,16 +138,16 @@ class O {
   /**
    * Emit a custom event from the grid.
    */
-  emit(e, i) {
-    this.grid?.dispatchEvent?.(new CustomEvent(e, { detail: i, bubbles: !0 }));
+  emit(e, t) {
+    this.grid?.dispatchEvent?.(new CustomEvent(e, { detail: t, bubbles: !0 }));
   }
   /**
    * Emit a cancelable custom event from the grid.
    * @returns `true` if the event was cancelled (preventDefault called), `false` otherwise
    */
-  emitCancelable(e, i) {
-    const t = new CustomEvent(e, { detail: i, bubbles: !0, cancelable: !0 });
-    return this.grid?.dispatchEvent?.(t), t.defaultPrevented;
+  emitCancelable(e, t) {
+    const i = new CustomEvent(e, { detail: t, bubbles: !0, cancelable: !0 });
+    return this.grid?.dispatchEvent?.(i), i.defaultPrevented;
   }
   // =========================================================================
   // Event Bus - Plugin-to-Plugin Communication
@@ -197,8 +168,8 @@ class O {
    * });
    * ```
    */
-  on(e, i) {
-    this.grid?._pluginManager?.subscribe(this, e, i);
+  on(e, t) {
+    this.grid?._pluginManager?.subscribe(this, e, t);
   }
   /**
    * Unsubscribe from a plugin event.
@@ -232,15 +203,24 @@ class O {
    * this.emit('filter-change', { field: 'name', value: 'Alice' });
    * ```
    */
-  emitPluginEvent(e, i) {
-    this.grid?._pluginManager?.emitPluginEvent(e, i);
+  emitPluginEvent(e, t) {
+    this.grid?._pluginManager?.emitPluginEvent(e, t);
   }
   /**
    * Request a re-render of the grid.
+   * Uses ROWS phase - does NOT trigger processColumns hooks.
    */
   requestRender() {
     this.grid?.requestRender?.();
   }
+  /**
+   * Request a columns re-render of the grid.
+   * Uses COLUMNS phase - triggers processColumns hooks.
+   * Use this when your plugin needs to reprocess column configuration.
+   */
+  requestColumnsRender() {
+    this.grid?.requestColumnsRender?.();
+  }
   /**
    * Request a re-render and restore focus styling afterward.
    * Use this when a plugin action (like expand/collapse) triggers a render
@@ -321,7 +301,7 @@ class O {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...q, ...e };
+    return { ...L, ...e };
   }
   // #region Animation Helpers
   /**
@@ -344,8 +324,8 @@ class O {
     const e = this.grid?.effectiveConfig?.animation?.mode ?? "reduced-motion";
     if (e === !1 || e === "off") return !1;
     if (e === !0 || e === "on") return !0;
-    const i = this.gridElement;
-    return i ? getComputedStyle(i).getPropertyValue("--tbw-animation-enabled").trim() !== "0" : !0;
+    const t = this.gridElement;
+    return t ? getComputedStyle(t).getPropertyValue("--tbw-animation-enabled").trim() !== "0" : !0;
   }
   /**
    * Get the animation duration in milliseconds from CSS variable.
@@ -362,8 +342,8 @@ class O {
   get animationDuration() {
     const e = this.gridElement;
     if (e) {
-      const i = getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(), t = parseInt(i, 10);
-      if (!isNaN(t)) return t;
+      const t = getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(), i = parseInt(t, 10);
+      if (!isNaN(i)) return i;
     }
     return 200;
   }
@@ -376,8 +356,8 @@ class O {
    * @param pluginOverride - Optional plugin-level override
    * @returns The resolved icon value
    */
-  resolveIcon(e, i) {
-    return i !== void 0 ? i : this.gridIcons[e];
+  resolveIcon(e, t) {
+    return t !== void 0 ? t : this.gridIcons[e];
   }
   /**
    * Set an icon value on an element.
@@ -386,8 +366,8 @@ class O {
    * @param element - The element to set the icon on
    * @param icon - The icon value (string or HTMLElement)
    */
-  setIcon(e, i) {
-    typeof i == "string" ? e.innerHTML = i : i instanceof HTMLElement && (e.innerHTML = "", e.appendChild(i.cloneNode(!0)));
+  setIcon(e, t) {
+    typeof t == "string" ? e.innerHTML = t : t instanceof HTMLElement && (e.innerHTML = "", e.appendChild(t.cloneNode(!0)));
   }
   /**
    * Log a warning message.
@@ -397,88 +377,97 @@ class O {
   }
   // #endregion
 }
-const N = "@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-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}}";
-function M(s) {
+const A = "@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 P(s) {
   const e = s.options;
   return e ? typeof e == "function" ? e() : e : [];
 }
-function H(s) {
+function T(s) {
   return (e) => {
-    const i = s.editorParams, t = document.createElement("input");
-    t.type = "number", t.value = e.value != null ? String(e.value) : "", i?.min !== void 0 && (t.min = String(i.min)), i?.max !== void 0 && (t.max = String(i.max)), i?.step !== void 0 && (t.step = String(i.step)), i?.placeholder && (t.placeholder = i.placeholder);
-    const r = () => e.commit(t.value === "" ? null : Number(t.value));
-    return t.addEventListener("blur", r), t.addEventListener("keydown", (n) => {
+    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();
-    }), t;
+    }), i;
   };
 }
-function G() {
+function q() {
   return (s) => {
     const e = document.createElement("input");
     return e.type = "checkbox", e.checked = !!s.value, e.addEventListener("change", () => s.commit(e.checked)), e;
   };
 }
-function x(s) {
+function O(s) {
   return (e) => {
-    const i = s.editorParams, t = document.createElement("input");
-    return t.type = "date", e.value instanceof Date && (t.valueAsDate = e.value), i?.min && (t.min = i.min), i?.max && (t.max = i.max), i?.placeholder && (t.placeholder = i.placeholder), t.addEventListener("change", () => e.commit(t.valueAsDate)), t.addEventListener("keydown", (r) => {
-      r.key === "Escape" && e.cancel();
-    }), t;
+    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 = () => {
+      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();
+    }), i;
   };
 }
-function $(s) {
+function D(s) {
   return (e) => {
-    const i = s.editorParams, t = document.createElement("select");
-    if (s.multi && (t.multiple = !0), i?.includeEmpty) {
+    const t = s.editorParams, i = document.createElement("select");
+    if (s.multi && (i.multiple = !0), t?.includeEmpty) {
       const o = document.createElement("option");
-      o.value = "", o.textContent = i.emptyLabel ?? "", t.appendChild(o);
+      o.value = "", o.textContent = t.emptyLabel ?? "", i.appendChild(o);
     }
-    M(s).forEach((o) => {
+    P(s).forEach((o) => {
       const a = document.createElement("option");
-      a.value = String(o.value), a.textContent = o.label, (s.multi && Array.isArray(e.value) && e.value.includes(o.value) || !s.multi && e.value === o.value) && (a.selected = !0), t.appendChild(a);
+      a.value = String(o.value), a.textContent = o.label, (s.multi && Array.isArray(e.value) && e.value.includes(o.value) || !s.multi && e.value === o.value) && (a.selected = !0), i.appendChild(a);
     });
     const n = () => {
       if (s.multi) {
-        const o = Array.from(t.selectedOptions).map((a) => a.value);
+        const o = Array.from(i.selectedOptions).map((a) => a.value);
         e.commit(o);
       } else
-        e.commit(t.value);
+        e.commit(i.value);
     };
-    return t.addEventListener("change", n), t.addEventListener("blur", n), t.addEventListener("keydown", (o) => {
+    return i.addEventListener("change", n), i.addEventListener("blur", n), i.addEventListener("keydown", (o) => {
       o.key === "Escape" && e.cancel();
-    }), t;
+    }), i;
   };
 }
-function F(s) {
+function M(s) {
   return (e) => {
-    const i = s.editorParams, t = document.createElement("input");
-    return t.type = "text", t.value = e.value != null ? String(e.value) : "", i?.maxLength !== void 0 && (t.maxLength = i.maxLength), i?.pattern && (t.pattern = i.pattern), i?.placeholder && (t.placeholder = i.placeholder), t.addEventListener("blur", () => e.commit(t.value)), t.addEventListener("keydown", (r) => {
-      r.key === "Enter" && e.commit(t.value), r.key === "Escape" && e.cancel();
-    }), t;
+    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);
+    };
+    return i.addEventListener("blur", r), i.addEventListener("keydown", (n) => {
+      n.key === "Enter" && r(), n.key === "Escape" && e.cancel();
+    }), i;
   };
 }
-function z(s) {
+function N(s) {
   switch (s.type) {
     case "number":
-      return H(s);
+      return T(s);
     case "boolean":
-      return G();
+      return q();
     case "date":
-      return x(s);
+      return O(s);
     case "select":
-      return $(s);
+      return D(s);
     default:
-      return F(s);
+      return M(s);
   }
 }
-const _ = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])';
-function B(s, e) {
+const R = '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";
   if (!e.type) return;
-  const t = s.effectiveConfig?.typeDefaults;
-  if (t?.[e.type]?.editor)
-    return t[e.type].editor;
+  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);
@@ -486,28 +475,28 @@ function B(s, e) {
       return n.editor;
   }
 }
-function v(s) {
+function w(s) {
   return !(typeof s != "string" || s === "__proto__" || s === "constructor" || s === "prototype");
 }
-function U(s) {
+function H(s) {
   const e = (s.__editingCellCount ?? 0) + 1;
   s.__editingCellCount = e, s.setAttribute("data-has-editing", "");
 }
-function j(s) {
+function x(s) {
   s.__editingCellCount = 0, s.removeAttribute("data-has-editing");
 }
-function E(s, e) {
-  return s instanceof HTMLInputElement ? s.type === "checkbox" ? s.checked : s.type === "number" ? s.value === "" ? null : Number(s.value) : s.type === "date" ? s.valueAsDate : s.value : e?.type === "number" && s.value !== "" ? Number(s.value) : s.value;
+function E(s, e, t) {
+  return s instanceof HTMLInputElement ? s.type === "checkbox" ? s.checked : s.type === "number" ? s.value === "" ? null : Number(s.value) : s.type === "date" ? typeof t == "string" ? s.value : s.valueAsDate : typeof t == "number" ? s.value === "" ? null : Number(s.value) : s.value : e?.type === "number" && s.value !== "" || typeof t == "number" && s.value !== "" ? Number(s.value) : s.value;
 }
 function k(s) {
 }
-function W(s, e, i) {
-  const t = s.querySelector("input,textarea,select");
-  t && (t.addEventListener("blur", () => {
-    i(E(t, e));
-  }), t instanceof HTMLInputElement && t.type === "checkbox" ? t.addEventListener("change", () => i(t.checked)) : t instanceof HTMLSelectElement && t.addEventListener("change", () => i(E(t, e))));
+function $(s, e, t, i) {
+  const r = s.querySelector("input,textarea,select");
+  r && (r.addEventListener("blur", () => {
+    t(E(r, e, i));
+  }), r instanceof HTMLInputElement && r.type === "checkbox" ? r.addEventListener("change", () => t(r.checked)) : r instanceof HTMLSelectElement && r.addEventListener("change", () => t(E(r, e, i))));
 }
-class K extends O {
+class z extends I {
   /**
    * Plugin manifest - declares owned properties for configuration validation.
    * @internal
@@ -547,7 +536,7 @@ class K extends O {
   /** @internal */
   name = "editing";
   /** @internal */
-  styles = N;
+  styles = A;
   /** @internal */
   get defaultConfig() {
     return {
@@ -558,22 +547,29 @@ class K extends O {
   /** Currently active edit row index, or -1 if not editing */
   #e = -1;
   /** Currently active edit column index, or -1 if not editing */
-  #s = -1;
+  #o = -1;
   /** Snapshots of row data before editing started */
-  #r = /* @__PURE__ */ new Map();
+  #s = /* @__PURE__ */ new Map();
   /** Set of row IDs that have been modified (ID-based for stability) */
-  #t = /* @__PURE__ */ new Set();
+  #i = /* @__PURE__ */ new Set();
   /** Set of cells currently in edit mode: "rowIndex:colIndex" */
-  #n = /* @__PURE__ */ new Set();
+  #r = /* @__PURE__ */ new Set();
   /** Flag to restore focus after next render (used when exiting edit mode) */
-  #o = !1;
+  #a = !1;
+  /** Row index pending animation after render, or -1 if none */
+  #l = -1;
+  /**
+   * Invalid cell tracking: Map<rowId, Map<field, message>>
+   * Used for validation feedback without canceling edits.
+   */
+  #t = /* @__PURE__ */ new Map();
   // #endregion
   // #region Lifecycle
   /** @internal */
   attach(e) {
     super.attach(e);
-    const i = this.disconnectSignal, t = e;
-    t._activeEditRows = -1, t._rowEditSnapshots = /* @__PURE__ */ new Map(), Object.defineProperty(e, "changedRows", {
+    const t = this.disconnectSignal, i = e;
+    i._activeEditRows = -1, i._rowEditSnapshots = /* @__PURE__ */ new Map(), Object.defineProperty(e, "changedRows", {
       get: () => this.changedRows,
       configurable: !0
     }), Object.defineProperty(e, "changedRowIds", {
@@ -584,24 +580,24 @@ class K extends O {
     }, document.addEventListener(
       "keydown",
       (r) => {
-        r.key === "Escape" && this.#e !== -1 && this.#i(this.#e, !0);
+        r.key === "Escape" && this.#e !== -1 && this.#n(this.#e, !0);
       },
-      { capture: !0, signal: i }
+      { capture: !0, signal: t }
     ), document.addEventListener(
       "mousedown",
       (r) => {
         if (this.#e === -1) return;
-        const n = t.findRenderedRowElement?.(this.#e);
+        const n = i.findRenderedRowElement?.(this.#e);
         !n || (r.composedPath && r.composedPath() || []).includes(n) || queueMicrotask(() => {
-          this.#e !== -1 && this.#i(this.#e, !1);
+          this.#e !== -1 && this.#n(this.#e, !1);
         });
       },
-      { signal: i }
+      { signal: t }
     );
   }
   /** @internal */
   detach() {
-    this.#e = -1, this.#s = -1, this.#r.clear(), this.#t.clear(), this.#n.clear(), super.detach();
+    this.#e = -1, this.#o = -1, this.#s.clear(), this.#i.clear(), this.#r.clear(), super.detach();
   }
   /**
    * Handle plugin queries.
@@ -620,30 +616,30 @@ class K extends O {
    * @internal
    */
   onCellClick(e) {
-    const i = this.grid, t = this.config.editOn ?? i.effectiveConfig?.editOn;
-    if (t === !1 || t === "manual" || t !== "click" && t !== "dblclick") 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 (t === "click" && r || t === "dblclick" && !r) return !1;
+    if (i === "click" && r || i === "dblclick" && !r) return !1;
     const { rowIndex: n } = e;
-    return i._columns?.some((a) => a.editable) ? (e.originalEvent.stopPropagation(), this.beginBulkEdit(n), !0) : !1;
+    return t._columns?.some((a) => a.editable) ? (e.originalEvent.stopPropagation(), this.beginBulkEdit(n), !0) : !1;
   }
   /**
    * Handle keyboard events for edit lifecycle.
    * @internal
    */
   onKeyDown(e) {
-    const i = this.grid;
+    const t = this.grid;
     if (e.key === "Escape" && this.#e !== -1)
-      return this.#i(this.#e, !0), !0;
+      return this.#n(this.#e, !0), !0;
     if (e.key === " " || e.key === "Spacebar") {
-      const t = i._focusRow, r = i._focusCol;
-      if (t >= 0 && r >= 0) {
-        const n = i._visibleColumns[r], o = i._rows[t];
+      const i = t._focusRow, r = t._focusCol;
+      if (i >= 0 && r >= 0) {
+        const n = t._visibleColumns[r], o = t._rows[i];
         if (n?.editable && n.type === "boolean" && o) {
           const a = n.field;
-          if (v(a)) {
-            const c = !o[a];
-            return this.#l(t, n, c, o), e.preventDefault(), this.requestRender(), !0;
+          if (w(a)) {
+            const d = !o[a];
+            return this.#u(i, n, d, o), e.preventDefault(), this.requestRender(), !0;
           }
         }
       }
@@ -652,31 +648,31 @@ class K extends O {
     if (e.key === "Enter" && !e.shiftKey) {
       if (this.#e !== -1)
         return !1;
-      const t = this.config.editOn ?? i.effectiveConfig?.editOn;
-      if (t === !1 || t === "manual") return !1;
-      const r = i._focusRow, n = i._focusCol;
-      if (r >= 0 && i._columns?.some((a) => a.editable)) {
-        const a = i._visibleColumns[n], l = i._rows[r], c = a?.field ?? "", f = c && l ? l[c] : void 0, g = this.gridElement.querySelector(`[data-row="${r}"][data-col="${n}"]`), d = new CustomEvent("cell-activate", {
+      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((a) => a.editable)) {
+        const a = t._visibleColumns[n], l = t._rows[r], d = a?.field ?? "", c = d && l ? l[d] : void 0, p = this.gridElement.querySelector(`[data-row="${r}"][data-col="${n}"]`), u = new CustomEvent("cell-activate", {
           cancelable: !0,
           bubbles: !0,
           detail: {
             rowIndex: r,
             colIndex: n,
-            field: c,
-            value: f,
+            field: d,
+            value: c,
             row: l,
-            cellEl: g,
+            cellEl: p,
             trigger: "keyboard",
             originalEvent: e
           }
         });
-        this.gridElement.dispatchEvent(d);
-        const h = new CustomEvent("activate-cell", {
+        this.gridElement.dispatchEvent(u);
+        const m = new CustomEvent("activate-cell", {
           cancelable: !0,
           bubbles: !0,
           detail: { row: r, col: n }
         });
-        return this.gridElement.dispatchEvent(h), d.defaultPrevented || h.defaultPrevented ? (e.preventDefault(), !0) : (this.beginBulkEdit(r), !0);
+        return this.gridElement.dispatchEvent(m), u.defaultPrevented || m.defaultPrevented ? (e.preventDefault(), !0) : (this.beginBulkEdit(r), !0);
       }
       return !1;
     }
@@ -690,11 +686,11 @@ class K extends O {
    * @internal
    */
   processColumns(e) {
-    const i = this.grid, t = i.effectiveConfig?.typeDefaults, r = i.__frameworkAdapter;
-    return !t && !r?.getTypeDefault ? e : e.map((n) => {
+    const t = this.grid, i = t.effectiveConfig?.typeDefaults, r = t.__frameworkAdapter;
+    return !i && !r?.getTypeDefault ? e : e.map((n) => {
       if (!n.type) return n;
       let o;
-      if (t?.[n.type]?.editorParams && (o = t[n.type].editorParams), !o && r?.getTypeDefault) {
+      if (i?.[n.type]?.editorParams && (o = i[n.type].editorParams), !o && r?.getTypeDefault) {
         const a = r.getTypeDefault(n.type);
         a?.editorParams && (o = a.editorParams);
       }
@@ -712,14 +708,18 @@ class K extends O {
    */
   afterRender() {
     const e = this.grid;
-    if (this.#o && (this.#o = !1, this.#u(e)), this.#n.size !== 0)
-      for (const i of this.#n) {
-        const [t, r] = i.split(":"), n = parseInt(t, 10), o = parseInt(r, 10), a = e.findRenderedRowElement?.(n);
+    if (this.#a && (this.#a = !1, this.#g(e)), this.#l !== -1) {
+      const t = this.#l;
+      this.#l = -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), o = parseInt(r, 10), a = e.findRenderedRowElement?.(n);
         if (!a) continue;
         const l = a.querySelector(`.cell[data-col="${o}"]`);
         if (!l || l.classList.contains("editing")) continue;
-        const c = e._rows[n], f = e._visibleColumns[o];
-        c && f && this.#d(c, n, f, o, l, !0);
+        const d = e._rows[n], c = e._visibleColumns[o];
+        d && c && this.#f(d, n, c, o, l, !0);
       }
   }
   /**
@@ -737,9 +737,9 @@ class K extends O {
    */
   get changedRows() {
     const e = [];
-    for (const i of this.#t) {
-      const t = this.grid.getRow(i);
-      t && e.push(t);
+    for (const t of this.#i) {
+      const i = this.grid.getRow(t);
+      i && e.push(i);
     }
     return e;
   }
@@ -747,7 +747,7 @@ class K extends O {
    * Get IDs of all modified rows.
    */
   get changedRowIds() {
-    return Array.from(this.#t);
+    return Array.from(this.#i);
   }
   /**
    * Get the currently active edit row index, or -1 if not editing.
@@ -759,7 +759,7 @@ class K extends O {
    * Get the currently active edit column index, or -1 if not editing.
    */
   get activeEditCol() {
-    return this.#s;
+    return this.#o;
   }
   /**
    * Check if a specific row is currently being edited.
@@ -770,19 +770,19 @@ class K extends O {
   /**
    * Check if a specific cell is currently being edited.
    */
-  isCellEditing(e, i) {
-    return this.#n.has(`${e}:${i}`);
+  isCellEditing(e, t) {
+    return this.#r.has(`${e}:${t}`);
   }
   /**
    * Check if a specific row has been modified.
    * @param rowIndex - Row index to check (will be converted to ID internally)
    */
   isRowChanged(e) {
-    const i = this.grid, t = i._rows[e];
-    if (!t) return !1;
+    const t = this.grid, i = t._rows[e];
+    if (!i) return !1;
     try {
-      const r = i.getRowId?.(t);
-      return r ? this.#t.has(r) : !1;
+      const r = t.getRowId?.(i);
+      return r ? this.#i.has(r) : !1;
     } catch {
       return !1;
     }
@@ -792,16 +792,136 @@ class K extends O {
    * @param rowId - Row ID to check
    */
   isRowChangedById(e) {
-    return this.#t.has(e);
+    return this.#i.has(e);
+  }
+  // #region Cell Validation
+  /**
+   * Mark a cell as invalid with an optional validation message.
+   * Invalid cells are marked with a `data-invalid` attribute for styling.
+   *
+   * @param rowId - The row ID (from getRowId)
+   * @param field - The field name
+   * @param message - Optional validation message (for tooltips or display)
+   *
+   * @example
+   * ```typescript
+   * // In cell-commit handler:
+   * grid.addEventListener('cell-commit', (e) => {
+   *   if (e.detail.field === 'email' && !isValidEmail(e.detail.value)) {
+   *     e.detail.setInvalid('Invalid email format');
+   *   }
+   * });
+   *
+   * // Or programmatically:
+   * editingPlugin.setInvalid('row-123', 'email', 'Invalid email format');
+   * ```
+   */
+  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.#d(e, t, !0);
+  }
+  /**
+   * Clear the invalid state for a specific cell.
+   *
+   * @param rowId - The row ID (from getRowId)
+   * @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.#d(e, t, !1);
+  }
+  /**
+   * Clear all invalid cells for a specific row.
+   *
+   * @param rowId - The row ID (from getRowId)
+   */
+  clearRowInvalid(e) {
+    const t = this.#t.get(e);
+    if (t) {
+      const i = Array.from(t.keys());
+      this.#t.delete(e), i.forEach((r) => this.#d(e, r, !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.#d(t, n, !1));
+    });
+  }
+  /**
+   * Check if a specific cell is marked as invalid.
+   *
+   * @param rowId - The row ID (from getRowId)
+   * @param field - The field name
+   * @returns True if the cell is marked as invalid
+   */
+  isCellInvalid(e, t) {
+    return this.#t.get(e)?.has(t) ?? !1;
+  }
+  /**
+   * Get the validation message for an invalid cell.
+   *
+   * @param rowId - The row ID (from getRowId)
+   * @param field - The field name
+   * @returns The validation message, or undefined if cell is valid
+   */
+  getInvalidMessage(e, t) {
+    return this.#t.get(e)?.get(t);
+  }
+  /**
+   * Check if a row has any invalid cells.
+   *
+   * @param rowId - The row ID (from getRowId)
+   * @returns True if the row has at least one invalid cell
+   */
+  hasInvalidCells(e) {
+    const t = this.#t.get(e);
+    return t ? t.size > 0 : !1;
+  }
+  /**
+   * Get all invalid fields for a row.
+   *
+   * @param rowId - The row ID (from getRowId)
+   * @returns Map of field names to validation messages
+   */
+  getInvalidFields(e) {
+    return new Map(this.#t.get(e) ?? []);
   }
+  /**
+   * Sync the data-invalid attribute on a cell element.
+   */
+  #d(e, t, i) {
+    const r = this.grid, n = r._visibleColumns?.findIndex((c) => c.field === t);
+    if (n === -1 || n === void 0) return;
+    const a = r._rows?.findIndex((c) => {
+      try {
+        return r.getRowId?.(c) === e;
+      } catch {
+        return !1;
+      }
+    });
+    if (a === -1 || a === void 0) return;
+    const d = r.findRenderedRowElement?.(a)?.querySelector(`.cell[data-col="${n}"]`);
+    if (d)
+      if (i) {
+        d.setAttribute("data-invalid", "true");
+        const c = this.#t.get(e)?.get(t);
+        c && d.setAttribute("title", c);
+      } else
+        d.removeAttribute("data-invalid"), d.removeAttribute("title");
+  }
+  // #endregion
   /**
    * Reset all change tracking.
    * @param silent - If true, suppresses the `changed-rows-reset` event
    * @fires changed-rows-reset - Emitted when tracking is reset (unless silent)
    */
   resetChangedRows(e) {
-    const i = this.changedRows, t = this.changedRowIds;
-    this.#t.clear(), this.#a(), e || this.emit("changed-rows-reset", { rows: i, ids: t }), this.grid._rowPool?.forEach((n) => n.classList.remove("changed"));
+    const t = this.changedRows, i = this.changedRowIds;
+    this.#i.clear(), this.#c(), e || this.emit("changed-rows-reset", { rows: t, ids: i }), this.grid._rowPool?.forEach((n) => n.classList.remove("changed"));
   }
   /**
    * Programmatically begin editing a cell.
@@ -809,11 +929,11 @@ class K extends O {
    * @param field - Field name of the column to edit
    * @fires cell-commit - Emitted when the cell value is committed (on blur or Enter)
    */
-  beginCellEdit(e, i) {
-    const t = this.grid, r = t._visibleColumns.findIndex((l) => l.field === i);
-    if (r === -1 || !t._visibleColumns[r]?.editable) return;
-    const a = t.findRenderedRowElement?.(e)?.querySelector(`.cell[data-col="${r}"]`);
-    a && this.#f(e, r, a);
+  beginCellEdit(e, t) {
+    const i = this.grid, r = i._visibleColumns.findIndex((l) => l.field === t);
+    if (r === -1 || !i._visibleColumns[r]?.editable) return;
+    const a = i.findRenderedRowElement?.(e)?.querySelector(`.cell[data-col="${r}"]`);
+    a && this.#p(e, r, a);
   }
   /**
    * Programmatically begin editing all editable cells in a row.
@@ -822,21 +942,21 @@ class K extends O {
    * @fires row-commit - Emitted when focus leaves the row
    */
   beginBulkEdit(e) {
-    const i = this.grid;
-    if ((this.config.editOn ?? i.effectiveConfig?.editOn) === !1 || !i._columns?.some((a) => a.editable)) return;
-    const n = i.findRenderedRowElement?.(e);
+    const t = this.grid;
+    if ((this.config.editOn ?? t.effectiveConfig?.editOn) === !1 || !t._columns?.some((a) => a.editable)) return;
+    const n = t.findRenderedRowElement?.(e);
     if (!n) return;
-    const o = i._rows[e];
-    this.#c(e, o), Array.from(n.children).forEach((a, l) => {
-      const c = i._visibleColumns[l];
-      if (c?.editable) {
-        const f = a;
-        f.classList.contains("editing") || this.#d(o, e, c, l, f, !0);
+    const o = t._rows[e];
+    this.#h(e, o), Array.from(n.children).forEach((a, l) => {
+      const d = t._visibleColumns[l];
+      if (d?.editable) {
+        const c = a;
+        c.classList.contains("editing") || this.#f(o, e, d, l, c, !0);
       }
     }), setTimeout(() => {
-      let a = n.querySelector(`.cell[data-col="${i._focusCol}"]`);
+      let a = n.querySelector(`.cell[data-col="${t._focusCol}"]`);
       if (a?.classList.contains("editing") || (a = n.querySelector(".cell.editing")), a?.classList.contains("editing")) {
-        const l = a.querySelector(_);
+        const l = a.querySelector(R);
         try {
           l?.focus({ preventScroll: !0 });
         } catch {
@@ -849,235 +969,257 @@ class K extends O {
    * @fires row-commit - Emitted after the row edit is committed
    */
   commitActiveRowEdit() {
-    this.#e !== -1 && this.#i(this.#e, !1);
+    this.#e !== -1 && this.#n(this.#e, !1);
   }
   /**
    * Cancel the currently active row edit.
    */
   cancelActiveRowEdit() {
-    this.#e !== -1 && this.#i(this.#e, !0);
+    this.#e !== -1 && this.#n(this.#e, !0);
   }
   // #endregion
   // #region Internal Methods
   /**
    * Begin editing a single cell.
    */
-  #f(e, i, t) {
-    const r = this.grid, n = r._rows[e], o = r._visibleColumns[i];
-    !n || !o?.editable || t.classList.contains("editing") || (this.#e !== e && this.#c(e, n), this.#s = i, this.#d(n, e, o, i, t, !1));
+  #p(e, t, i) {
+    const r = this.grid, n = r._rows[e], o = r._visibleColumns[t];
+    !n || !o?.editable || i.classList.contains("editing") || (this.#e !== e && this.#h(e, n), this.#o = t, this.#f(n, e, o, t, i, !1));
   }
   /**
    * Sync the internal grid state with the plugin's editing state.
    */
-  #a() {
+  #c() {
     const e = this.grid;
-    e._activeEditRows = this.#e, e._rowEditSnapshots = this.#r;
+    e._activeEditRows = this.#e, e._rowEditSnapshots = this.#s;
   }
   /**
    * Snapshot original row data and mark as editing.
    */
-  #c(e, i) {
-    this.#e !== e && (this.#r.set(e, { ...i }), this.#e = e, this.#a());
+  #h(e, t) {
+    this.#e !== e && (this.#s.set(e, { ...t }), this.#e = e, this.#c());
   }
   /**
    * Exit editing for a row.
    */
-  #i(e, i) {
+  #n(e, t) {
     if (this.#e !== e) return;
-    const t = this.grid, r = this.#r.get(e), n = t._rows[e], o = t.findRenderedRowElement?.(e);
+    const i = this.grid, r = this.#s.get(e), n = i._rows[e], o = i.findRenderedRowElement?.(e);
     let a;
     if (n)
       try {
-        a = t.getRowId?.(n);
+        a = i.getRowId?.(n);
       } catch {
       }
-    if (!i && o && n && o.querySelectorAll(".cell.editing").forEach((c) => {
-      const f = Number(c.getAttribute("data-col"));
-      if (isNaN(f)) return;
-      const g = t._visibleColumns[f];
-      if (!g) return;
-      const d = c.querySelector("input,textarea,select");
-      if (d) {
-        const h = E(d, g);
-        n[g.field] !== h && this.#l(e, g, h, n);
+    if (!t && o && n && o.querySelectorAll(".cell.editing").forEach((d) => {
+      const c = Number(d.getAttribute("data-col"));
+      if (isNaN(c)) return;
+      const p = i._visibleColumns[c];
+      if (!p) return;
+      const u = d.querySelector("input,textarea,select");
+      if (u) {
+        const m = p.field, h = n[m], g = E(u, p, h);
+        h !== g && this.#u(e, p, g, n);
       }
-    }), i && r && n)
+    }), t && r && n)
       Object.keys(r).forEach((l) => {
         n[l] = r[l];
-      }), a && this.#t.delete(a);
-    else if (!i && n) {
-      const l = a ? this.#t.has(a) : !1;
-      this.emit("row-commit", {
+      }), a && (this.#i.delete(a), this.clearRowInvalid(a));
+    else if (!t && n) {
+      const l = this.#v(r, n), d = a ? this.#i.has(a) : l, c = this.emitCancelable("row-commit", {
         rowIndex: e,
         rowId: a ?? "",
         row: n,
-        changed: l,
+        oldValue: r,
+        newValue: n,
+        changed: d,
         changedRows: this.changedRows,
         changedRowIds: this.changedRowIds
-      }), l && this.isAnimationEnabled && t.animateRow?.(e, "change");
+      });
+      c && r ? (Object.keys(r).forEach((p) => {
+        n[p] = r[p];
+      }), a && (this.#i.delete(a), this.clearRowInvalid(a))) : !c && l && this.isAnimationEnabled && (this.#l = e);
     }
-    this.#r.delete(e), this.#e = -1, this.#s = -1, this.#a();
-    for (const l of this.#n)
-      l.startsWith(`${e}:`) && this.#n.delete(l);
+    this.#s.delete(e), this.#e = -1, this.#o = -1, this.#c();
+    for (const l of this.#r)
+      l.startsWith(`${e}:`) && this.#r.delete(l);
     o && (o.querySelectorAll(".cell.editing").forEach((l) => {
-      l.classList.remove("editing"), j(l.parentElement);
-    }), this.requestRender()), this.#o = !0, o || (this.#u(t), this.#o = !1);
+      l.classList.remove("editing"), x(l.parentElement);
+    }), this.requestRender()), this.#a = !0, o || (this.#g(i), this.#a = !1);
   }
   /**
    * Commit a single cell value change.
    * Uses ID-based change tracking for stability when rows are reordered.
    */
-  #l(e, i, t, r) {
-    const n = i.field;
-    if (!v(n)) return;
+  #u(e, t, i, r) {
+    const n = t.field;
+    if (!w(n)) return;
     const o = r[n];
-    if (o === t) return;
+    if (o === i) return;
     const a = this.grid;
     let l;
     try {
       l = this.grid.getRowId(r);
     } catch {
     }
-    const c = l ? !this.#t.has(l) : !0, f = l ? (h) => this.grid.updateRow(l, h, "cascade") : k;
+    const d = l ? !this.#i.has(l) : !0, c = l ? (g) => this.grid.updateRow(l, g, "cascade") : k;
+    let p = !1;
+    const u = l ? (g) => {
+      p = !0, this.setInvalid(l, n, g ?? "");
+    } : () => {
+    };
     if (this.emitCancelable("cell-commit", {
       row: r,
       rowId: l ?? "",
       field: n,
       oldValue: o,
-      value: t,
+      value: i,
       rowIndex: e,
       changedRows: this.changedRows,
       changedRowIds: this.changedRowIds,
-      firstTimeForRow: c,
-      updateRow: f
+      firstTimeForRow: d,
+      updateRow: c,
+      setInvalid: u
     })) return;
-    r[n] = t, l && this.#t.add(l), this.#a(), this.emitPluginEvent("cell-edit-committed", {
+    l && !p && this.isCellInvalid(l, n) && this.clearInvalid(l, n), r[n] = i, l && this.#i.add(l), this.#c(), this.emitPluginEvent("cell-edit-committed", {
       rowIndex: e,
       field: n,
       oldValue: o,
-      newValue: t
+      newValue: i
     });
-    const d = a.findRenderedRowElement?.(e);
-    d && (d.classList.add("changed"), D(d, "change"));
+    const h = a.findRenderedRowElement?.(e);
+    h && h.classList.add("changed");
   }
   /**
    * Inject an editor into a cell.
    */
-  #d(e, i, t, r, n, o) {
-    if (!t.editable || n.classList.contains("editing")) return;
+  #f(e, t, i, r, n, o) {
+    if (!i.editable || n.classList.contains("editing")) return;
     let a;
     try {
       a = this.grid.getRowId(e);
     } catch {
     }
-    const l = a ? (u) => this.grid.updateRow(a, u, "cascade") : k, c = v(t.field) ? e[t.field] : void 0;
-    n.classList.add("editing"), this.#n.add(`${i}:${r}`);
-    const f = n.parentElement;
-    f && U(f);
-    let g = !1;
-    const d = (u) => {
-      g || this.#e === -1 || this.#l(i, t, u, e);
-    }, h = () => {
-      g = !0, v(t.field) && (e[t.field] = c);
-    }, p = document.createElement("div");
-    p.className = "tbw-editor-host", n.innerHTML = "", n.appendChild(p), p.addEventListener("keydown", (u) => {
-      u.key === "Enter" && (u.stopPropagation(), u.preventDefault(), g = !0, this.#i(i, !1)), u.key === "Escape" && (u.stopPropagation(), u.preventDefault(), h(), this.#i(i, !0));
+    const l = a ? (f) => this.grid.updateRow(a, f, "cascade") : k, d = w(i.field) ? e[i.field] : void 0;
+    n.classList.add("editing"), this.#r.add(`${t}:${r}`);
+    const c = n.parentElement;
+    c && H(c);
+    let p = !1;
+    const u = (f) => {
+      p || this.#e === -1 || this.#u(t, i, f, e);
+    }, m = () => {
+      p = !0, w(i.field) && (e[i.field] = d);
+    }, h = document.createElement("div");
+    h.className = "tbw-editor-host", n.innerHTML = "", n.appendChild(h), h.addEventListener("keydown", (f) => {
+      f.key === "Enter" && (f.stopPropagation(), f.preventDefault(), p = !0, this.#n(t, !1)), f.key === "Escape" && (f.stopPropagation(), f.preventDefault(), m(), this.#n(t, !0));
     });
-    const m = t, y = m.__editorTemplate, b = B(this.grid, m) ?? z(t), C = c;
-    if (b === "template" && y)
-      this.#h(p, m, e, c, d, h, o, i);
-    else if (typeof b == "string") {
-      const u = document.createElement(b);
-      u.value = C, u.addEventListener("change", () => d(u.value)), p.appendChild(u), o || queueMicrotask(() => {
-        p.querySelector(_)?.focus({ preventScroll: !0 });
+    const g = i, y = g.__editorTemplate, v = G(this.grid, g) ?? N(i), C = d;
+    if (v === "template" && y)
+      this.#m(h, g, e, d, u, m, o, t);
+    else if (typeof v == "string") {
+      const f = document.createElement(v);
+      f.value = C, f.addEventListener("change", () => u(f.value)), h.appendChild(f), o || queueMicrotask(() => {
+        h.querySelector(R)?.focus({ preventScroll: !0 });
       });
-    } else if (typeof b == "function") {
-      const u = {
+    } else if (typeof v == "function") {
+      const f = {
         row: e,
         rowId: a ?? "",
         value: C,
-        field: t.field,
-        column: t,
-        commit: d,
-        cancel: h,
+        field: i.field,
+        column: i,
+        commit: u,
+        cancel: m,
         updateRow: l
-      }, w = b(u);
-      typeof w == "string" ? (p.innerHTML = w, W(p, t, d)) : w instanceof Node && p.appendChild(w), o || queueMicrotask(() => {
-        p.querySelector(_)?.focus({ preventScroll: !0 });
+      }, b = v(f);
+      typeof b == "string" ? (h.innerHTML = b, $(h, i, u, d)) : b instanceof Node && h.appendChild(b), o || queueMicrotask(() => {
+        h.querySelector(R)?.focus({ preventScroll: !0 });
       });
-    } else if (b && typeof b == "object") {
-      const u = document.createElement("div");
-      u.setAttribute("data-external-editor", ""), u.setAttribute("data-field", t.field), p.appendChild(u);
-      const w = {
+    } else if (v && typeof v == "object") {
+      const f = document.createElement("div");
+      f.setAttribute("data-external-editor", ""), f.setAttribute("data-field", i.field), h.appendChild(f);
+      const b = {
         row: e,
         rowId: a ?? "",
         value: C,
-        field: t.field,
-        column: t,
-        commit: d,
-        cancel: h,
+        field: i.field,
+        column: i,
+        commit: u,
+        cancel: m,
         updateRow: l
       };
-      if (b.mount)
+      if (v.mount)
         try {
-          b.mount({ placeholder: u, context: w, spec: b });
-        } catch (S) {
-          console.warn(`[tbw-grid] External editor mount error for column '${t.field}':`, S);
+          v.mount({ placeholder: f, context: b, spec: v });
+        } catch (_) {
+          console.warn(`[tbw-grid] External editor mount error for column '${i.field}':`, _);
         }
       else
         this.grid.dispatchEvent(
-          new CustomEvent("mount-external-editor", { detail: { placeholder: u, spec: b, context: w } })
+          new CustomEvent("mount-external-editor", { detail: { placeholder: f, spec: v, context: b } })
         );
     }
   }
   /**
    * Render a template-based editor.
    */
-  #h(e, i, t, r, n, o, a, l) {
-    const c = i.__editorTemplate;
-    if (!c) return;
-    const f = c.cloneNode(!0), g = i.__compiledEditor;
-    g ? f.innerHTML = g({
-      row: t,
+  #m(e, t, i, r, n, o, a, l) {
+    const d = t.__editorTemplate;
+    if (!d) return;
+    const c = d.cloneNode(!0), p = t.__compiledEditor;
+    p ? c.innerHTML = p({
+      row: i,
       value: r,
-      field: i.field,
-      column: i,
+      field: t.field,
+      column: t,
       commit: n,
       cancel: o
-    }) : f.querySelectorAll("*").forEach((h) => {
-      h.childNodes.length === 1 && h.firstChild?.nodeType === Node.TEXT_NODE && (h.textContent = h.textContent?.replace(/{{\s*value\s*}}/g, r == null ? "" : String(r)).replace(/{{\s*row\.([a-zA-Z0-9_]+)\s*}}/g, (p, m) => {
-        if (!v(m)) return "";
-        const y = t[m];
+    }) : c.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, (h, g) => {
+        if (!w(g)) return "";
+        const y = i[g];
         return y == null ? "" : String(y);
       }) || "");
     });
-    const d = f.querySelector(
+    const u = c.querySelector(
       "input,textarea,select"
     );
-    if (d) {
-      d instanceof HTMLInputElement && d.type === "checkbox" ? d.checked = !!r : d.value = String(r ?? "");
-      let h = !1;
-      d.addEventListener("blur", () => {
-        h || n(E(d, i));
-      }), d.addEventListener("keydown", (p) => {
-        const m = p;
-        m.key === "Enter" && (m.stopPropagation(), m.preventDefault(), h = !0, n(E(d, i)), this.#i(l, !1)), m.key === "Escape" && (m.stopPropagation(), m.preventDefault(), o(), this.#i(l, !0));
-      }), d instanceof HTMLInputElement && d.type === "checkbox" && d.addEventListener("change", () => n(d.checked)), a || setTimeout(() => d.focus({ preventScroll: !0 }), 0);
+    if (u) {
+      u instanceof HTMLInputElement && u.type === "checkbox" ? u.checked = !!r : u.value = String(r ?? "");
+      let m = !1;
+      u.addEventListener("blur", () => {
+        m || n(E(u, t, r));
+      }), u.addEventListener("keydown", (h) => {
+        const g = h;
+        g.key === "Enter" && (g.stopPropagation(), g.preventDefault(), m = !0, n(E(u, t, r)), this.#n(l, !1)), g.key === "Escape" && (g.stopPropagation(), g.preventDefault(), o(), this.#n(l, !0));
+      }), u instanceof HTMLInputElement && u.type === "checkbox" && u.addEventListener("change", () => n(u.checked)), a || setTimeout(() => u.focus({ preventScroll: !0 }), 0);
     }
-    e.appendChild(f);
+    e.appendChild(c);
+  }
+  /**
+   * Compare snapshot vs current row to detect if any values changed during this edit session.
+   * Uses shallow comparison of all properties.
+   */
+  #v(e, t) {
+    if (!e) return !1;
+    const i = e, r = t, n = /* @__PURE__ */ new Set([...Object.keys(i), ...Object.keys(r)]);
+    for (const o of n)
+      if (i[o] !== r[o])
+        return !0;
+    return !1;
   }
   /**
    * Restore focus to cell after exiting edit mode.
    */
-  #u(e) {
+  #g(e) {
     queueMicrotask(() => {
       try {
-        const i = e._focusRow, t = e._focusCol, r = e.findRenderedRowElement?.(i);
+        const t = e._focusRow, i = e._focusCol, r = e.findRenderedRowElement?.(t);
         if (r) {
           Array.from(e._bodyEl.querySelectorAll(".cell-focus")).forEach(
             (o) => o.classList.remove("cell-focus")
           );
-          const n = r.querySelector(`.cell[data-row="${i}"][data-col="${t}"]`);
+          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 }));
         }
       } catch {
@@ -1087,7 +1229,7 @@ class K extends O {
   // #endregion
 }
 export {
-  K as EditingPlugin,
-  z as defaultEditorFor
+  z as EditingPlugin,
+  N as defaultEditorFor
 };
 //# sourceMappingURL=index.js.map