@toolbox-web/grid 0.0.4 → 0.0.5

package/index.js

@@ -9,19 +9,19 @@ function be(o) {
 function ae(o, e) {
   const t = o._columns, n = be(o);
   return {
-    columns: t.map((s, i) => {
+    columns: t.map((i, s) => {
       const l = {
-        field: s.field,
-        order: i,
+        field: i.field,
+        order: s,
         visible: !0
         // If it's in _columns, it's visible (hidden columns are filtered out)
-      }, r = s;
-      r.__renderedWidth !== void 0 ? l.width = r.__renderedWidth : s.width !== void 0 && (l.width = typeof s.width == "string" ? parseFloat(s.width) : s.width);
-      const a = n.get(s.field);
+      }, r = i;
+      r.__renderedWidth !== void 0 ? l.width = r.__renderedWidth : i.width !== void 0 && (l.width = typeof i.width == "string" ? parseFloat(i.width) : i.width);
+      const a = n.get(i.field);
       a && (l.sort = a);
       for (const f of e)
         if (f.getColumnState) {
-          const p = f.getColumnState(s.field);
+          const p = f.getColumnState(i.field);
           p && Object.assign(l, p);
         }
       return l;
@@ -30,16 +30,16 @@ function ae(o, e) {
 }
 function ge(o, e, t, n) {
   if (!e.columns || e.columns.length === 0) return;
-  const s = new Map(e.columns.map((r) => [r.field, r])), i = t.map((r) => {
-    const a = s.get(r.field);
+  const i = new Map(e.columns.map((r) => [r.field, r])), s = t.map((r) => {
+    const a = i.get(r.field);
     if (!a) return r;
     const f = { ...r };
     return a.width !== void 0 && (f.width = a.width, f.__renderedWidth = a.width), a.visible !== void 0 && (f.hidden = !a.visible), f;
   });
-  i.sort((r, a) => {
-    const f = s.get(r.field)?.order ?? 1 / 0, p = s.get(a.field)?.order ?? 1 / 0;
+  s.sort((r, a) => {
+    const f = i.get(r.field)?.order ?? 1 / 0, p = i.get(a.field)?.order ?? 1 / 0;
     return f - p;
-  }), o._columns = i;
+  }), o._columns = s;
   const l = e.columns.filter((r) => r.sort !== void 0).sort((r, a) => (r.sort?.priority ?? 0) - (a.sort?.priority ?? 0));
   if (l.length > 0) {
     const r = l[0];
@@ -59,12 +59,12 @@ function me(o, e, t) {
   return () => {
     n !== null && clearTimeout(n), n = setTimeout(() => {
       n = null;
-      const s = ae(o, e());
-      t(s);
+      const i = ae(o, e());
+      t(i);
     }, 100);
   };
 }
-const O = {
+const M = {
   STRETCH: "stretch",
   FIXED: "fixed"
 };
@@ -73,20 +73,20 @@ function ve(o) {
 }
 function ce(o, e) {
   if (e && e.length) {
-    const i = {};
+    const s = {};
     return e.forEach((l) => {
-      l.type && (i[l.field] = l.type);
-    }), { columns: e, typeMap: i };
-  }
-  const t = o[0] || {}, n = Object.keys(t).map((i) => {
-    const l = t[i], r = ve(l);
-    return { field: i, header: i.charAt(0).toUpperCase() + i.slice(1), type: r };
-  }), s = {};
-  return n.forEach((i) => {
-    s[i.field] = i.type || "string";
-  }), { columns: n, typeMap: s };
-}
-const Ce = /{{\s*([^}]+)\s*}}/g, R = "__DG_EMPTY__", ye = /^[\w$. '?+\-*/%:()!<>=,&|]+$/, Ee = /__(proto|defineGetter|defineSetter)|constructor|window|globalThis|global|process|Function|import|eval|Reflect|Proxy|Error|arguments|document|location|cookie|localStorage|sessionStorage|indexedDB|fetch|XMLHttpRequest|WebSocket|Worker|SharedWorker|ServiceWorker|opener|parent|top|frames|self|this\b/, Re = /* @__PURE__ */ new Set([
+      l.type && (s[l.field] = l.type);
+    }), { columns: e, typeMap: s };
+  }
+  const t = o[0] || {}, n = Object.keys(t).map((s) => {
+    const l = t[s], r = ve(l);
+    return { field: s, header: s.charAt(0).toUpperCase() + s.slice(1), type: r };
+  }), i = {};
+  return n.forEach((s) => {
+    i[s.field] = s.type || "string";
+  }), { columns: n, typeMap: i };
+}
+const Ce = /{{\s*([^}]+)\s*}}/g, A = "__DG_EMPTY__", ye = /^[\w$. '?+\-*/%:()!<>=,&|]+$/, Ee = /__(proto|defineGetter|defineSetter)|constructor|window|globalThis|global|process|Function|import|eval|Reflect|Proxy|Error|arguments|document|location|cookie|localStorage|sessionStorage|indexedDB|fetch|XMLHttpRequest|WebSocket|Worker|SharedWorker|ServiceWorker|opener|parent|top|frames|self|this\b/, Re = /* @__PURE__ */ new Set([
   "script",
   "iframe",
   "object",
@@ -112,7 +112,7 @@ const Ce = /{{\s*([^}]+)\s*}}/g, R = "__DG_EMPTY__", ye = /^[\w$. '?+\-*/%:()!<>
   "xmp",
   "listing"
 ]), U = /^on\w+$/i, _e = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "data", "srcdoc", "xlink:href", "poster", "srcset"]), Ae = /^\s*(javascript|vbscript|data|blob):/i;
-function N(o) {
+function z(o) {
   if (!o || typeof o != "string") return "";
   if (o.indexOf("<") === -1) return o;
   const e = document.createElement("template");
@@ -121,34 +121,34 @@ function N(o) {
 function Se(o) {
   const e = [], t = o.querySelectorAll("*");
   for (const n of t) {
-    const s = n.tagName.toLowerCase();
-    if (Re.has(s)) {
+    const i = n.tagName.toLowerCase();
+    if (Re.has(i)) {
       e.push(n);
       continue;
     }
-    if ((s === "svg" || n.namespaceURI === "http://www.w3.org/2000/svg") && Array.from(n.attributes).some(
+    if ((i === "svg" || n.namespaceURI === "http://www.w3.org/2000/svg") && Array.from(n.attributes).some(
       (r) => U.test(r.name) || r.name === "href" || r.name === "xlink:href"
     )) {
       e.push(n);
       continue;
     }
-    const i = [];
+    const s = [];
     for (const l of n.attributes) {
       const r = l.name.toLowerCase();
       if (U.test(r)) {
-        i.push(l.name);
+        s.push(l.name);
         continue;
       }
       if (_e.has(r) && Ae.test(l.value)) {
-        i.push(l.name);
+        s.push(l.name);
         continue;
       }
       if (r === "style" && /expression\s*\(|javascript:|behavior\s*:/i.test(l.value)) {
-        i.push(l.name);
+        s.push(l.name);
         continue;
       }
     }
-    i.forEach((l) => n.removeAttribute(l));
+    s.forEach((l) => n.removeAttribute(l));
   }
   e.forEach((n) => n.remove());
 }
@@ -157,28 +157,28 @@ function de(o, e) {
   const t = [], n = o.replace(Ce, (r, a) => {
     const f = xe(a, e);
     return t.push({ expr: a.trim(), result: f }), f;
-  }), s = Te(n), i = t.length && t.every((r) => r.result === "" || r.result === R);
-  return /Reflect\.|\bProxy\b|ownKeys\(/.test(o) || i ? "" : s;
+  }), i = Te(n), s = t.length && t.every((r) => r.result === "" || r.result === A);
+  return /Reflect\.|\bProxy\b|ownKeys\(/.test(o) || s ? "" : i;
 }
 function xe(o, e) {
-  if (o = (o || "").trim(), !o || /\b(Reflect|Proxy|ownKeys)\b/.test(o)) return R;
-  if (o === "value") return e.value == null ? R : String(e.value);
+  if (o = (o || "").trim(), !o || /\b(Reflect|Proxy|ownKeys)\b/.test(o)) return A;
+  if (o === "value") return e.value == null ? A : String(e.value);
   if (o.startsWith("row.") && !/[()?]/.test(o) && !o.includes(":")) {
-    const n = o.slice(4), s = e.row ? e.row[n] : void 0;
-    return s == null ? R : String(s);
+    const n = o.slice(4), i = e.row ? e.row[n] : void 0;
+    return i == null ? A : String(i);
   }
-  if (o.length > 80 || !ye.test(o) || Ee.test(o)) return R;
+  if (o.length > 80 || !ye.test(o) || Ee.test(o)) return A;
   const t = o.match(/\./g);
-  if (t && t.length > 1) return R;
+  if (t && t.length > 1) return A;
   try {
-    const s = new Function("value", "row", `return (${o});`)(e.value, e.row), i = s == null ? "" : String(s);
-    return /Reflect|Proxy|ownKeys/.test(i) ? R : i || R;
+    const i = new Function("value", "row", `return (${o});`)(e.value, e.row), s = i == null ? "" : String(i);
+    return /Reflect|Proxy|ownKeys/.test(s) ? A : s || A;
   } catch {
-    return R;
+    return A;
   }
 }
 function Te(o) {
-  return o && o.replace(new RegExp(R, "g"), "").replace(/Reflect\.[^<>{}\s]+/g, "").replace(/\bProxy\b/g, "").replace(/ownKeys\([^)]*\)/g, "");
+  return o && o.replace(new RegExp(A, "g"), "").replace(/Reflect\.[^<>{}\s]+/g, "").replace(/\bProxy\b/g, "").replace(/ownKeys\([^)]*\)/g, "");
 }
 function Le(o) {
   if (/Reflect|Proxy|ownKeys/.test(o.textContent || "")) {
@@ -200,15 +200,15 @@ function ke(o) {
   return Array.from(o.querySelectorAll("tbw-grid-column")).map((t) => {
     const n = t.getAttribute("field") || "";
     if (!n) return null;
-    const s = t.getAttribute("type") || void 0, l = s && (/* @__PURE__ */ new Set(["number", "string", "date", "boolean", "select", "typeahead"])).has(s) ? s : void 0, r = t.getAttribute("header") || void 0, a = t.hasAttribute("sortable"), f = t.hasAttribute("editable"), p = { field: n, type: l, header: r, sortable: a, editable: f };
+    const i = t.getAttribute("type") || void 0, l = i && (/* @__PURE__ */ new Set(["number", "string", "date", "boolean", "select", "typeahead"])).has(i) ? i : void 0, r = t.getAttribute("header") || void 0, a = t.hasAttribute("sortable"), f = t.hasAttribute("editable"), p = { field: n, type: l, header: r, sortable: a, editable: f };
     t.hasAttribute("resizable") && (p.resizable = !0), t.hasAttribute("sizable") && (p.resizable = !0);
     const w = t.getAttribute("options");
-    w && (p.options = w.split(",").map((u) => {
-      const [b, y] = u.includes(":") ? u.split(":") : [u.trim(), u.trim()];
-      return { value: b.trim(), label: y?.trim() || b.trim() };
+    w && (p.options = w.split(",").map((d) => {
+      const [g, m] = d.includes(":") ? d.split(":") : [d.trim(), d.trim()];
+      return { value: g.trim(), label: m?.trim() || g.trim() };
     }));
-    const h = t.querySelector("tbw-grid-column-view"), c = t.querySelector("tbw-grid-column-editor"), d = t.querySelector("tbw-grid-column-header");
-    return h && (p.__viewTemplate = h), c && (p.__editorTemplate = c), d && (p.__headerTemplate = d), p;
+    const u = t.querySelector("tbw-grid-column-view"), c = t.querySelector("tbw-grid-column-editor"), h = t.querySelector("tbw-grid-column-header");
+    return u && (p.__viewTemplate = u), c && (p.__editorTemplate = c), h && (p.__headerTemplate = h), p;
   }).filter((t) => !!t);
 }
 function Pe(o, e) {
@@ -216,14 +216,14 @@ function Pe(o, e) {
   if (!o || !o.length) return e || [];
   if (!e || !e.length) return o;
   const t = {};
-  e.forEach((s) => t[s.field] = s);
-  const n = o.map((s) => {
-    const i = t[s.field];
-    if (!i) return s;
-    const l = { ...s };
-    return i.header && !l.header && (l.header = i.header), i.type && !l.type && (l.type = i.type), l.sortable = s.sortable || i.sortable, (s.resizable === !0 || i.resizable === !0) && (l.resizable = !0), l.editable = s.editable || i.editable, i.__viewTemplate && (l.__viewTemplate = i.__viewTemplate), i.__editorTemplate && (l.__editorTemplate = i.__editorTemplate), i.__headerTemplate && (l.__headerTemplate = i.__headerTemplate), delete t[s.field], l;
+  e.forEach((i) => t[i.field] = i);
+  const n = o.map((i) => {
+    const s = t[i.field];
+    if (!s) return i;
+    const l = { ...i };
+    return s.header && !l.header && (l.header = s.header), s.type && !l.type && (l.type = s.type), l.sortable = i.sortable || s.sortable, (i.resizable === !0 || s.resizable === !0) && (l.resizable = !0), l.editable = i.editable || s.editable, s.__viewTemplate && (l.__viewTemplate = s.__viewTemplate), s.__editorTemplate && (l.__editorTemplate = s.__editorTemplate), s.__headerTemplate && (l.__headerTemplate = s.__headerTemplate), delete t[i.field], l;
   });
-  return Object.keys(t).forEach((s) => n.push(t[s])), n;
+  return Object.keys(t).forEach((i) => n.push(t[i])), n;
 }
 function B(o, e) {
   try {
@@ -233,39 +233,39 @@ function B(o, e) {
   const t = o.getAttribute("part");
   t ? t.split(/\s+/).includes(e) || o.setAttribute("part", t + " " + e) : o.setAttribute("part", e);
 }
-function Oe(o) {
+function Me(o) {
   o.__lightDomColumnsCache || (o.__originalColumnNodes = Array.from(
     o.querySelectorAll("tbw-grid-column")
   ), o.__lightDomColumnsCache = o.__originalColumnNodes.length ? ke(o) : []);
   const e = o.__lightDomColumnsCache, t = Pe(o._columns, e);
-  t.forEach((s) => {
-    s.__viewTemplate && !s.__compiledView && (s.__compiledView = X(s.__viewTemplate.innerHTML)), s.__editorTemplate && !s.__compiledEditor && (s.__compiledEditor = X(s.__editorTemplate.innerHTML));
+  t.forEach((i) => {
+    i.__viewTemplate && !i.__compiledView && (i.__compiledView = X(i.__viewTemplate.innerHTML)), i.__editorTemplate && !i.__compiledEditor && (i.__compiledEditor = X(i.__editorTemplate.innerHTML));
   });
   const { columns: n } = ce(o._rows, t);
   o._columns = n;
 }
-function Me(o) {
-  const e = o.effectiveConfig?.fitMode || o.fitMode || O.STRETCH;
-  if (e !== O.STRETCH && e !== O.FIXED || o.__didInitialAutoSize || !o.isConnected) return;
+function Oe(o) {
+  const e = o.effectiveConfig?.fitMode || o.fitMode || M.STRETCH;
+  if (e !== M.STRETCH && e !== M.FIXED || o.__didInitialAutoSize || !o.isConnected) return;
   const t = o.headerRowEl?.children || [];
   if (!t.length) return;
   let n = !1;
-  o.visibleColumns.forEach((s, i) => {
-    if (s.width) return;
-    const l = t[i];
+  o.visibleColumns.forEach((i, s) => {
+    if (i.width) return;
+    const l = t[s];
     let r = l ? l.scrollWidth : 0;
     for (const a of o.rowPool) {
-      const f = a.children[i];
+      const f = a.children[s];
       if (f) {
         const p = f.scrollWidth;
         p > r && (r = p);
       }
     }
-    r > 0 && (s.width = r + 2, s.__autoSized = !0, n = !0);
+    r > 0 && (i.width = r + 2, i.__autoSized = !0, n = !0);
   }), n && he(o), o.__didInitialAutoSize = !0;
 }
 function he(o) {
-  (o.effectiveConfig?.fitMode || o.fitMode || O.STRETCH) === O.STRETCH ? o.gridTemplate = o.visibleColumns.map((t) => {
+  (o.effectiveConfig?.fitMode || o.fitMode || M.STRETCH) === M.STRETCH ? o.gridTemplate = o.visibleColumns.map((t) => {
     if (t.width) return `${t.width}px`;
     const n = t.minWidth;
     return n != null ? `minmax(${n}px, 1fr)` : "1fr";
@@ -296,21 +296,21 @@ function De(o) {
     case "typeahead":
       return (e) => {
         const t = document.createElement("select");
-        e.column.multi && (t.multiple = !0), (typeof e.column.options == "function" ? e.column.options() : e.column.options || []).forEach((i) => {
+        e.column.multi && (t.multiple = !0), (typeof e.column.options == "function" ? e.column.options() : e.column.options || []).forEach((s) => {
           const l = document.createElement("option");
-          l.value = String(i.value), l.textContent = i.label, (e.column.multi && Array.isArray(e.value) && e.value.includes(i.value) || !e.column.multi && e.value === i.value) && (l.selected = !0), t.appendChild(l);
+          l.value = String(s.value), l.textContent = s.label, (e.column.multi && Array.isArray(e.value) && e.value.includes(s.value) || !e.column.multi && e.value === s.value) && (l.selected = !0), t.appendChild(l);
         });
-        const s = () => {
+        const i = () => {
           if (e.column.multi) {
-            const i = [];
+            const s = [];
             Array.from(t.selectedOptions).forEach((l) => {
-              i.push(l.value);
-            }), e.commit(i);
+              s.push(l.value);
+            }), e.commit(s);
           } else
             e.commit(t.value);
         };
-        return t.addEventListener("change", s), t.addEventListener("blur", s), t.addEventListener("keydown", (i) => {
-          i.key === "Escape" && e.cancel();
+        return t.addEventListener("change", i), t.addEventListener("blur", i), t.addEventListener("keydown", (s) => {
+          s.key === "Escape" && e.cancel();
         }), t.focus(), t;
       };
     default:
@@ -325,22 +325,22 @@ function De(o) {
 function He(o, e) {
   if (o.dispatchKeyDown?.(e))
     return;
-  const t = o._rows.length - 1, n = o.visibleColumns.length - 1, s = o.activeEditRows !== void 0 && o.activeEditRows !== -1, l = o.visibleColumns[o.focusCol]?.type, r = e.composedPath ? e.composedPath() : [], a = r && r.length ? r[0] : e.target, f = (p) => {
+  const t = o._rows.length - 1, n = o.visibleColumns.length - 1, i = o.activeEditRows !== void 0 && o.activeEditRows !== -1, l = o.visibleColumns[o.focusCol]?.type, r = e.composedPath ? e.composedPath() : [], a = r && r.length ? r[0] : e.target, f = (p) => {
     if (!p) return !1;
     const w = p.tagName;
     return !!(w === "INPUT" || w === "SELECT" || w === "TEXTAREA" || p.isContentEditable);
   };
-  if (!(f(a) && (e.key === "Home" || e.key === "End")) && !(f(a) && (e.key === "ArrowUp" || e.key === "ArrowDown") && a.tagName === "INPUT" && a.type === "number") && !(s && (l === "select" || l === "typeahead") && (e.key === "ArrowDown" || e.key === "ArrowUp"))) {
+  if (!(f(a) && (e.key === "Home" || e.key === "End")) && !(f(a) && (e.key === "ArrowUp" || e.key === "ArrowDown") && a.tagName === "INPUT" && a.type === "number") && !(i && (l === "select" || l === "typeahead") && (e.key === "ArrowDown" || e.key === "ArrowUp"))) {
     switch (e.key) {
       case "Tab": {
-        e.preventDefault(), !e.shiftKey ? o.focusCol < n ? o.focusCol += 1 : (typeof o.commitActiveRowEdit == "function" && o.commitActiveRowEdit(), o.focusRow < t && (o.focusRow += 1, o.focusCol = 0)) : o.focusCol > 0 ? o.focusCol -= 1 : o.focusRow > 0 && (typeof o.commitActiveRowEdit == "function" && o.activeEditRows === o.focusRow && o.commitActiveRowEdit(), o.focusRow -= 1, o.focusCol = n), M(o);
+        e.preventDefault(), !e.shiftKey ? o.focusCol < n ? o.focusCol += 1 : (typeof o.commitActiveRowEdit == "function" && o.commitActiveRowEdit(), o.focusRow < t && (o.focusRow += 1, o.focusCol = 0)) : o.focusCol > 0 ? o.focusCol -= 1 : o.focusRow > 0 && (typeof o.commitActiveRowEdit == "function" && o.activeEditRows === o.focusRow && o.commitActiveRowEdit(), o.focusRow -= 1, o.focusCol = n), O(o);
         return;
       }
       case "ArrowDown":
-        s && typeof o.commitActiveRowEdit == "function" && o.commitActiveRowEdit(), o.focusRow = Math.min(t, o.focusRow + 1), e.preventDefault();
+        i && typeof o.commitActiveRowEdit == "function" && o.commitActiveRowEdit(), o.focusRow = Math.min(t, o.focusRow + 1), e.preventDefault();
         break;
       case "ArrowUp":
-        s && typeof o.commitActiveRowEdit == "function" && o.commitActiveRowEdit(), o.focusRow = Math.max(0, o.focusRow - 1), e.preventDefault();
+        i && typeof o.commitActiveRowEdit == "function" && o.commitActiveRowEdit(), o.focusRow = Math.max(0, o.focusRow - 1), e.preventDefault();
         break;
       case "ArrowRight":
         o.focusCol = Math.min(n, o.focusCol + 1), e.preventDefault();
@@ -363,27 +363,27 @@ function He(o, e) {
       case "Enter":
         return typeof o.beginBulkEdit == "function" ? o.beginBulkEdit(o.focusRow) : o.dispatchEvent(
           new CustomEvent("activate-cell", { detail: { row: o.focusRow, col: o.focusCol } })
-        ), M(o);
+        ), O(o);
       default:
         return;
     }
-    M(o);
+    O(o);
   }
 }
-function M(o) {
+function O(o) {
   if (o.virtualization?.enabled) {
-    const { rowHeight: s } = o.virtualization, i = o, l = o.focusRow * s;
-    l < i.scrollTop ? i.scrollTop = l : l + s > i.scrollTop + i.clientHeight && (i.scrollTop = l - i.clientHeight + s);
+    const { rowHeight: i } = o.virtualization, s = o, l = o.focusRow * i;
+    l < s.scrollTop ? s.scrollTop = l : l + i > s.scrollTop + s.clientHeight && (s.scrollTop = l - s.clientHeight + i);
   }
-  o.refreshVirtualWindow(!1), Array.from(o.bodyEl.querySelectorAll(".cell-focus")).forEach((s) => s.classList.remove("cell-focus")), Array.from(o.bodyEl.querySelectorAll('[aria-selected="true"]')).forEach((s) => {
-    s.setAttribute("aria-selected", "false");
+  o.refreshVirtualWindow(!1), Array.from(o.bodyEl.querySelectorAll(".cell-focus")).forEach((i) => i.classList.remove("cell-focus")), Array.from(o.bodyEl.querySelectorAll('[aria-selected="true"]')).forEach((i) => {
+    i.setAttribute("aria-selected", "false");
   });
   const e = o.focusRow, t = o.virtualization.start ?? 0, n = o.virtualization.end ?? o._rows.length;
   if (e >= t && e < n) {
-    const i = o.bodyEl.querySelectorAll(".data-grid-row")[e - t]?.children[o.focusCol];
-    if (i) {
-      if (i.classList.add("cell-focus"), i.setAttribute("aria-selected", "true"), o.activeEditRows !== void 0 && o.activeEditRows !== -1 && i.classList.contains("editing")) {
-        const l = i.querySelector(
+    const s = o.bodyEl.querySelectorAll(".data-grid-row")[e - t]?.children[o.focusCol];
+    if (s) {
+      if (s.classList.add("cell-focus"), s.setAttribute("aria-selected", "true"), o.activeEditRows !== void 0 && o.activeEditRows !== -1 && s.classList.contains("editing")) {
+        const l = s.querySelector(
           'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])'
         );
         if (l && document.activeElement !== l)
@@ -391,10 +391,10 @@ function M(o) {
             l.focus();
           } catch {
           }
-      } else if (!i.contains(document.activeElement)) {
-        i.hasAttribute("tabindex") || i.setAttribute("tabindex", "-1");
+      } else if (!s.contains(document.activeElement)) {
+        s.hasAttribute("tabindex") || s.setAttribute("tabindex", "-1");
         try {
-          i.focus({ preventScroll: !0 });
+          s.focus({ preventScroll: !0 });
         } catch {
         }
       }
@@ -405,125 +405,131 @@ const ze = "__cellDisplayCache", Ne = "__cellCacheEpoch";
 function j(o) {
   o[ze] = void 0, o[Ne] = void 0, o.__hasSpecialColumns = void 0;
 }
-function qe(o, e, t, n, s) {
-  const i = Math.max(0, t - e), l = o.bodyEl, r = o.visibleColumns, a = r.length;
+function qe(o, e, t, n, i) {
+  const s = Math.max(0, t - e), l = o.bodyEl, r = o.visibleColumns, a = r.length;
   let f = o.__cachedHeaderRowCount;
-  for (f === void 0 && (f = o.shadowRoot?.querySelector(".header-group-row") ? 2 : 1, o.__cachedHeaderRowCount = f); o.rowPool.length < i; ) {
+  for (f === void 0 && (f = o.shadowRoot?.querySelector(".header-group-row") ? 2 : 1, o.__cachedHeaderRowCount = f); o.rowPool.length < s; ) {
     const w = document.createElement("div");
-    w.className = "data-grid-row", w.setAttribute("role", "row"), w.addEventListener("click", (h) => Z(o, h, w, !1)), w.addEventListener("dblclick", (h) => Z(o, h, w, !0)), o.rowPool.push(w);
+    w.className = "data-grid-row", w.setAttribute("role", "row"), w.addEventListener("click", (u) => Z(o, u, w, !1)), w.addEventListener("dblclick", (u) => Z(o, u, w, !0)), o.rowPool.push(w);
   }
-  if (o.rowPool.length > i) {
-    for (let w = i; w < o.rowPool.length; w++) {
-      const h = o.rowPool[w];
-      h.parentNode === l && h.remove();
+  if (o.rowPool.length > s) {
+    for (let w = s; w < o.rowPool.length; w++) {
+      const u = o.rowPool[w];
+      u.parentNode === l && u.remove();
     }
-    o.rowPool.length = i;
+    o.rowPool.length = s;
   }
-  const p = s && o.__hasRenderRowPlugins !== !1;
-  for (let w = 0; w < i; w++) {
-    const h = e + w, c = o._rows[h], d = o.rowPool[w];
-    if (d.setAttribute("aria-rowindex", String(h + f + 1)), p && s(c, d, h)) {
-      d.__epoch = n, d.__rowDataRef = c, d.parentNode !== l && l.appendChild(d);
+  const p = i && o.__hasRenderRowPlugins !== !1;
+  for (let w = 0; w < s; w++) {
+    const u = e + w, c = o._rows[u], h = o.rowPool[w];
+    if (h.setAttribute("aria-rowindex", String(u + f + 1)), p && i(c, h, u)) {
+      h.__epoch = n, h.__rowDataRef = c, h.parentNode !== l && l.appendChild(h);
       continue;
     }
-    const u = d.__epoch, b = d.__rowDataRef, y = d.children.length, E = u === n && y === a, _ = b !== c;
-    let x = !1;
-    if (E && _) {
-      for (let A = 0; A < a; A++)
-        if (r[A].externalView && !d.querySelector(`.cell[data-col="${A}"] [data-external-view]`)) {
-          x = !0;
+    const d = h.__epoch, g = h.__rowDataRef, m = h.children.length, R = d === n && m === a, E = g !== c;
+    let _ = !1;
+    if (R && E) {
+      for (let S = 0; S < a; S++)
+        if (r[S].externalView && !h.querySelector(`.cell[data-col="${S}"] [data-external-view]`)) {
+          _ = !0;
           break;
         }
     }
-    !E || x ? (d.__isCustomRow && (d.className = "data-grid-row", d.setAttribute("role", "row"), d.__isCustomRow = !1), F(o, d, c, h), d.__epoch = n, d.__rowDataRef = c) : _ ? (Y(o, d, c, h), d.__rowDataRef = c) : Y(o, d, c, h);
-    const g = o._changedRowIndices.has(h), m = d.classList.contains("changed");
-    g !== m && d.classList.toggle("changed", g), d.parentNode !== l && l.appendChild(d);
+    !R || _ ? (h.__isCustomRow && (h.className = "data-grid-row", h.setAttribute("role", "row"), h.__isCustomRow = !1), F(o, h, c, u), h.__epoch = n, h.__rowDataRef = c) : E ? (Y(o, h, c, u), h.__rowDataRef = c) : Y(o, h, c, u);
+    const b = o._changedRowIndices.has(u), v = h.classList.contains("changed");
+    b !== v && h.classList.toggle("changed", b), h.parentNode !== l && l.appendChild(h);
   }
 }
 function Y(o, e, t, n) {
-  const s = e.children, i = o.visibleColumns, l = i.length, r = s.length, a = l < r ? l : r, f = o.focusRow, p = o.focusCol;
+  const i = e.children, s = o.visibleColumns, l = s.length, r = i.length, a = l < r ? l : r, f = o.focusRow, p = o.focusCol;
   let w = o.__hasSpecialColumns;
   if (w === void 0) {
     w = !1;
     for (let c = 0; c < l; c++) {
-      const d = i[c];
-      if (d.__viewTemplate || d.__compiledView || d.viewRenderer || d.externalView || d.format || d.type === "date" || d.type === "boolean") {
+      const h = s[c];
+      if (h.__viewTemplate || h.__compiledView || h.viewRenderer || h.externalView || h.format || h.type === "date" || h.type === "boolean") {
         w = !0;
         break;
       }
     }
     o.__hasSpecialColumns = w;
   }
-  const h = String(n);
+  const u = String(n);
   if (!w) {
     for (let c = 0; c < a; c++) {
-      const d = s[c], u = t[i[c].field];
-      d.textContent = u == null ? "" : String(u), d.getAttribute("data-row") !== h && d.setAttribute("data-row", h);
-      const b = f === n && p === c, y = d.classList.contains("cell-focus");
-      b !== y && (d.classList.toggle("cell-focus", b), d.setAttribute("aria-selected", String(b)));
+      const h = i[c], d = t[s[c].field];
+      h.textContent = d == null ? "" : String(d), h.getAttribute("data-row") !== u && h.setAttribute("data-row", u);
+      const g = f === n && p === c, m = h.classList.contains("cell-focus");
+      g !== m && (h.classList.toggle("cell-focus", g), h.setAttribute("aria-selected", String(g)));
     }
     return;
   }
   for (let c = 0; c < a; c++)
-    if (i[c].externalView && !s[c].querySelector("[data-external-view]")) {
+    if (s[c].externalView && !i[c].querySelector("[data-external-view]")) {
       F(o, e, t, n);
       return;
     }
   for (let c = 0; c < a; c++) {
-    const d = i[c], u = s[c];
-    u.getAttribute("data-row") !== h && u.setAttribute("data-row", h);
-    const b = f === n && p === c, y = u.classList.contains("cell-focus");
-    if (b !== y && (u.classList.toggle("cell-focus", b), u.setAttribute("aria-selected", String(b))), u.classList.contains("editing") || d.__viewTemplate || d.__compiledView || d.viewRenderer || d.externalView)
+    const h = s[c], d = i[c];
+    d.getAttribute("data-row") !== u && d.setAttribute("data-row", u);
+    const g = f === n && p === c, m = d.classList.contains("cell-focus");
+    if (g !== m && (d.classList.toggle("cell-focus", g), d.setAttribute("aria-selected", String(g))), d.classList.contains("editing")) continue;
+    if (h.viewRenderer) {
+      const E = t[h.field], _ = h.viewRenderer({ row: t, value: E, field: h.field, column: h });
+      typeof _ == "string" ? d.innerHTML = z(_) : _ ? (d.innerHTML = "", d.appendChild(_)) : d.textContent = E == null ? "" : String(E);
+      continue;
+    }
+    if (h.__viewTemplate || h.__compiledView || h.externalView)
       continue;
-    const v = t[d.field];
-    let E;
-    if (d.format)
+    const C = t[h.field];
+    let R;
+    if (h.format)
       try {
-        const _ = d.format(v, t);
-        E = _ == null ? "" : String(_);
+        const E = h.format(C, t);
+        R = E == null ? "" : String(E);
       } catch {
-        E = v == null ? "" : String(v);
+        R = C == null ? "" : String(C);
       }
-    else if (d.type === "date")
-      if (v == null || v === "")
-        E = "";
-      else if (v instanceof Date)
-        E = isNaN(v.getTime()) ? "" : v.toLocaleDateString();
+    else if (h.type === "date")
+      if (C == null || C === "")
+        R = "";
+      else if (C instanceof Date)
+        R = isNaN(C.getTime()) ? "" : C.toLocaleDateString();
       else {
-        const _ = new Date(v);
-        E = isNaN(_.getTime()) ? "" : _.toLocaleDateString();
+        const E = new Date(C);
+        R = isNaN(E.getTime()) ? "" : E.toLocaleDateString();
       }
-    else d.type === "boolean" ? (E = v ? "🗹" : "☐", u.setAttribute("aria-checked", String(!!v))) : E = v == null ? "" : String(v);
-    u.textContent = E;
+    else h.type === "boolean" ? (R = C ? "🗹" : "☐", d.setAttribute("aria-checked", String(!!C))) : R = C == null ? "" : String(C);
+    d.textContent = R;
   }
 }
 function F(o, e, t, n) {
   e.innerHTML = "";
-  const s = o.visibleColumns, i = s.length, l = o.focusRow, r = o.focusCol, a = o.effectiveConfig?.editOn || o.editOn, f = o, p = document.createDocumentFragment();
-  for (let w = 0; w < i; w++) {
-    const h = s[w], c = document.createElement("div");
-    c.className = "cell", B(c, "cell"), h.type !== "boolean" && c.setAttribute("role", "gridcell"), c.setAttribute("data-col", String(w)), c.setAttribute("data-row", String(n)), c.setAttribute("aria-colindex", String(w + 1)), h.type && c.setAttribute("data-type", h.type);
-    const d = h.sticky;
-    d === "left" ? c.classList.add("sticky-left") : d === "right" && c.classList.add("sticky-right");
-    let u = t[h.field];
-    const b = h.format;
-    if (b)
+  const i = o.visibleColumns, s = i.length, l = o.focusRow, r = o.focusCol, a = o.effectiveConfig?.editOn || o.editOn, f = o, p = document.createDocumentFragment();
+  for (let w = 0; w < s; w++) {
+    const u = i[w], c = document.createElement("div");
+    c.className = "cell", B(c, "cell"), u.type !== "boolean" && c.setAttribute("role", "gridcell"), c.setAttribute("data-col", String(w)), c.setAttribute("data-row", String(n)), c.setAttribute("aria-colindex", String(w + 1)), u.type && c.setAttribute("data-type", u.type);
+    const h = u.sticky;
+    h === "left" ? c.classList.add("sticky-left") : h === "right" && c.classList.add("sticky-right");
+    let d = t[u.field];
+    const g = u.format;
+    if (g)
       try {
-        u = b(u, t);
+        d = g(d, t);
       } catch {
       }
-    const y = h.__compiledView, v = h.__viewTemplate, E = h.viewRenderer, _ = h.externalView;
-    let x = !1;
-    if (E) {
-      const g = E({ row: t, value: u, field: h.field, column: h });
-      typeof g == "string" ? (c.innerHTML = N(g), x = !0) : g ? c.appendChild(g) : c.textContent = u == null ? "" : String(u);
-    } else if (_) {
-      const g = _, m = document.createElement("div");
-      m.setAttribute("data-external-view", ""), m.setAttribute("data-field", h.field), c.appendChild(m);
-      const A = { row: t, value: u, field: h.field, column: h };
-      if (g.mount)
+    const m = u.__compiledView, C = u.__viewTemplate, R = u.viewRenderer, E = u.externalView;
+    let _ = !1;
+    if (R) {
+      const b = R({ row: t, value: d, field: u.field, column: u });
+      typeof b == "string" ? (c.innerHTML = z(b), _ = !0) : b ? c.appendChild(b) : c.textContent = d == null ? "" : String(d);
+    } else if (E) {
+      const b = E, v = document.createElement("div");
+      v.setAttribute("data-external-view", ""), v.setAttribute("data-field", u.field), c.appendChild(v);
+      const S = { row: t, value: d, field: u.field, column: u };
+      if (b.mount)
         try {
-          g.mount({ placeholder: m, context: A, spec: g });
+          b.mount({ placeholder: v, context: S, spec: b });
         } catch {
         }
       else
@@ -533,86 +539,86 @@ function F(o, e, t, n) {
               new CustomEvent("mount-external-view", {
                 bubbles: !0,
                 composed: !0,
-                detail: { placeholder: m, spec: g, context: A }
+                detail: { placeholder: v, spec: b, context: S }
               })
             );
           } catch {
           }
         });
-      m.setAttribute("data-mounted", "");
-    } else if (y) {
-      const g = y({ row: t, value: u, field: h.field, column: h }), m = y.__blocked;
-      c.innerHTML = m ? "" : N(g), x = !0, m && (c.textContent = "", c.setAttribute("data-blocked-template", ""));
-    } else if (v) {
-      const g = v.innerHTML;
-      /Reflect\.|\bProxy\b|ownKeys\(/.test(g) ? (c.textContent = "", c.setAttribute("data-blocked-template", "")) : (c.innerHTML = N(de(g, { row: t, value: u })), x = !0);
-    } else if (h.type === "date")
-      if (u == null || u === "")
+      v.setAttribute("data-mounted", "");
+    } else if (m) {
+      const b = m({ row: t, value: d, field: u.field, column: u }), v = m.__blocked;
+      c.innerHTML = v ? "" : z(b), _ = !0, v && (c.textContent = "", c.setAttribute("data-blocked-template", ""));
+    } else if (C) {
+      const b = C.innerHTML;
+      /Reflect\.|\bProxy\b|ownKeys\(/.test(b) ? (c.textContent = "", c.setAttribute("data-blocked-template", "")) : (c.innerHTML = z(de(b, { row: t, value: d })), _ = !0);
+    } else if (u.type === "date")
+      if (d == null || d === "")
         c.textContent = "";
       else {
-        let g = null;
-        if (u instanceof Date) g = u;
-        else if (typeof u == "number" || typeof u == "string") {
-          const m = new Date(u);
-          isNaN(m.getTime()) || (g = m);
+        let b = null;
+        if (d instanceof Date) b = d;
+        else if (typeof d == "number" || typeof d == "string") {
+          const v = new Date(d);
+          isNaN(v.getTime()) || (b = v);
         }
-        c.textContent = g ? g.toLocaleDateString() : "";
+        c.textContent = b ? b.toLocaleDateString() : "";
       }
-    else if (h.type === "boolean") {
-      const g = !!u;
-      c.innerHTML = g ? "&#x1F5F9;" : "&#9744;", c.setAttribute("role", "checkbox"), c.setAttribute("aria-checked", String(g)), c.setAttribute("aria-label", String(g));
+    else if (u.type === "boolean") {
+      const b = !!d;
+      c.innerHTML = b ? "&#x1F5F9;" : "&#9744;", c.setAttribute("role", "checkbox"), c.setAttribute("aria-checked", String(b)), c.setAttribute("aria-label", String(b));
     } else
-      c.textContent = u == null ? "" : String(u);
-    if (x) {
+      c.textContent = d == null ? "" : String(d);
+    if (_) {
       Le(c);
-      const g = c.textContent || "";
-      /Proxy|Reflect\.ownKeys/.test(g) && (c.textContent = g.replace(/Proxy|Reflect\.ownKeys/g, "").trim(), /Proxy|Reflect\.ownKeys/.test(c.textContent || "") && (c.textContent = ""));
-    }
-    c.hasAttribute("data-blocked-template") && (c.textContent || "").trim().length && (c.textContent = ""), h.editable ? (c.tabIndex = 0, c.addEventListener("mousedown", () => {
-      o.focusRow = n, o.focusCol = w, M(o);
-    }), a === "click" ? c.addEventListener("click", (g) => {
-      c.classList.contains("editing") || (g.stopPropagation(), o.focusRow = n, o.focusCol = w, L(o, t, n, h, c));
-    }) : c.addEventListener("dblclick", (g) => {
-      g.stopPropagation(), T(o, n, t);
-      const m = o.findRenderedRowElement?.(n);
-      if (m) {
-        const A = m.children;
-        for (let k = 0; k < A.length; k++) {
+      const b = c.textContent || "";
+      /Proxy|Reflect\.ownKeys/.test(b) && (c.textContent = b.replace(/Proxy|Reflect\.ownKeys/g, "").trim(), /Proxy|Reflect\.ownKeys/.test(c.textContent || "") && (c.textContent = ""));
+    }
+    c.hasAttribute("data-blocked-template") && (c.textContent || "").trim().length && (c.textContent = ""), u.editable ? (c.tabIndex = 0, c.addEventListener("mousedown", () => {
+      o.focusRow = n, o.focusCol = w, O(o);
+    }), a === "click" ? c.addEventListener("click", (b) => {
+      c.classList.contains("editing") || (b.stopPropagation(), o.focusRow = n, o.focusCol = w, L(o, t, n, u, c));
+    }) : c.addEventListener("dblclick", (b) => {
+      b.stopPropagation(), T(o, n, t);
+      const v = o.findRenderedRowElement?.(n);
+      if (v) {
+        const S = v.children;
+        for (let k = 0; k < S.length; k++) {
           const D = o.visibleColumns[k];
-          D && D.editable && L(o, t, n, D, A[k]);
+          D && D.editable && L(o, t, n, D, S[k]);
         }
       }
-    }), c.addEventListener("keydown", (g) => {
-      if ((h.type === "select" || h.type === "typeahead") && !c.classList.contains("editing") && g.key === "Enter") {
-        g.preventDefault(), o.activeEditRows !== n && T(o, n, t), L(o, t, n, h, c), setTimeout(() => {
-          const m = c.querySelector("select");
+    }), c.addEventListener("keydown", (b) => {
+      if ((u.type === "select" || u.type === "typeahead") && !c.classList.contains("editing") && b.key === "Enter") {
+        b.preventDefault(), o.activeEditRows !== n && T(o, n, t), L(o, t, n, u, c), setTimeout(() => {
+          const v = c.querySelector("select");
           try {
-            m?.showPicker?.();
+            v?.showPicker?.();
           } catch {
           }
-          m?.focus();
+          v?.focus();
         }, 0);
         return;
       }
-      if (h.type === "boolean" && g.key === " " && !c.classList.contains("editing")) {
-        g.preventDefault(), o.activeEditRows !== n && T(o, n, t);
-        const m = !t[h.field];
-        $(o, n, h, m, t), c.innerHTML = m ? "&#x1F5F9;" : "&#9744;", c.setAttribute("aria-label", String(!!m));
+      if (u.type === "boolean" && b.key === " " && !c.classList.contains("editing")) {
+        b.preventDefault(), o.activeEditRows !== n && T(o, n, t);
+        const v = !t[u.field];
+        $(o, n, u, v, t), c.innerHTML = v ? "&#x1F5F9;" : "&#9744;", c.setAttribute("aria-label", String(!!v));
         return;
       }
-      if (g.key === "Enter" && !c.classList.contains("editing")) {
-        g.preventDefault(), o.focusRow = n, o.focusCol = w, typeof o.beginBulkEdit == "function" ? o.beginBulkEdit(n) : L(o, t, n, h, c);
+      if (b.key === "Enter" && !c.classList.contains("editing")) {
+        b.preventDefault(), o.focusRow = n, o.focusCol = w, typeof o.beginBulkEdit == "function" ? o.beginBulkEdit(n) : L(o, t, n, u, c);
         return;
       }
-      if (g.key === "F2" && !c.classList.contains("editing")) {
-        g.preventDefault(), L(o, t, n, h, c);
+      if (b.key === "F2" && !c.classList.contains("editing")) {
+        b.preventDefault(), L(o, t, n, u, c);
         return;
       }
-    })) : h.type === "boolean" && (c.hasAttribute("tabindex") || (c.tabIndex = 0), c.addEventListener("keydown", (g) => {
-      if (g.key === " ") {
-        g.preventDefault();
-        const m = !t[h.field];
-        o.activeEditRows !== n && T(o, n, t), $(o, n, h, m, t), c.innerHTML = m ? "&#x1F5F9;" : "&#9744;", c.setAttribute("role", "checkbox"), c.setAttribute("aria-checked", String(!!m)), c.setAttribute("aria-label", String(!!m));
+    })) : u.type === "boolean" && (c.hasAttribute("tabindex") || (c.tabIndex = 0), c.addEventListener("keydown", (b) => {
+      if (b.key === " ") {
+        b.preventDefault();
+        const v = !t[u.field];
+        o.activeEditRows !== n && T(o, n, t), $(o, n, u, v, t), c.innerHTML = v ? "&#x1F5F9;" : "&#9744;", c.setAttribute("role", "checkbox"), c.setAttribute("aria-checked", String(!!v)), c.setAttribute("aria-label", String(!!v));
       }
     })), l === n && r === w ? c.setAttribute("aria-selected", "true") : c.setAttribute("aria-selected", "false"), p.appendChild(c);
   }
@@ -620,19 +626,19 @@ function F(o, e, t, n) {
 }
 function Z(o, e, t, n) {
   if (e.target?.closest(".resize-handle")) return;
-  const s = t.querySelector(".cell[data-row]");
-  if (!s) return;
-  const i = Number(s.getAttribute("data-row"));
-  if (isNaN(i)) return;
-  const l = o._rows[i];
+  const i = t.querySelector(".cell[data-row]");
+  if (!i) return;
+  const s = Number(i.getAttribute("data-row"));
+  if (isNaN(s)) return;
+  const l = o._rows[s];
   if (!l) return;
   const r = e.target?.closest(".cell[data-col]");
   if (r) {
     const f = Number(r.getAttribute("data-col"));
     if (!isNaN(f)) {
-      if (o.dispatchCellClick?.(e, i, f, r))
+      if (o.dispatchCellClick?.(e, s, f, r))
         return;
-      o.focusRow = i, o.focusCol = f, M(o);
+      o.focusRow = s, o.focusCol = f, O(o);
     }
   }
   if (t.querySelector(".cell.editing")) {
@@ -641,11 +647,11 @@ function Z(o, e, t, n) {
     f.forEach((p) => p.classList.remove("editing"));
   }
   const a = o.effectiveConfig?.editOn || o.editOn || "doubleClick";
-  if (a === "click" || a === "doubleClick" && n) T(o, i, l);
+  if (a === "click" || a === "doubleClick" && n) T(o, s, l);
   else return;
   Array.from(t.children).forEach((f, p) => {
     const w = o.visibleColumns[p];
-    w && w.editable && L(o, l, i, w, f);
+    w && w.editable && L(o, l, s, w, f);
   }), r && queueMicrotask(() => {
     const f = t.querySelector(`.cell[data-col="${o.focusCol}"]`);
     if (f?.classList.contains("editing")) {
@@ -664,16 +670,16 @@ function T(o, e, t) {
 }
 function Ie(o, e, t) {
   if (o.activeEditRows !== e) return;
-  const n = o.rowEditSnapshots.get(e), s = o._rows[e];
-  if (t && n && s)
-    Object.keys(n).forEach((l) => s[l] = n[l]), o._changedRowIndices.delete(e);
+  const n = o.rowEditSnapshots.get(e), i = o._rows[e];
+  if (t && n && i)
+    Object.keys(n).forEach((l) => i[l] = n[l]), o._changedRowIndices.delete(e);
   else if (!t) {
     const l = o._changedRowIndices.has(e);
     o.dispatchEvent(
       new CustomEvent("row-commit", {
         detail: {
           rowIndex: e,
-          row: s,
+          row: i,
           changed: l,
           changedRows: o.changedRows,
           changedRowIndices: o.changedRowIndices
@@ -682,8 +688,8 @@ function Ie(o, e, t) {
     );
   }
   o.rowEditSnapshots.delete(e), o.activeEditRows = -1;
-  const i = o.findRenderedRowElement?.(e);
-  i && (F(o, i, o._rows[e], e), o._changedRowIndices.has(e) ? i.classList.add("changed") : i.classList.remove("changed")), t && queueMicrotask(() => {
+  const s = o.findRenderedRowElement?.(e);
+  s && (F(o, s, o._rows[e], e), o._changedRowIndices.has(e) ? s.classList.add("changed") : s.classList.remove("changed")), t && queueMicrotask(() => {
     try {
       o.focus();
       const l = o.focusRow, r = o.focusCol, a = o.findRenderedRowElement?.(l);
@@ -698,18 +704,18 @@ function Ie(o, e, t) {
     }
   });
 }
-function $(o, e, t, n, s) {
-  const i = t.field;
-  if (s[i] === n) return;
-  s[i] = n;
+function $(o, e, t, n, i) {
+  const s = t.field;
+  if (i[s] === n) return;
+  i[s] = n;
   const r = !o._changedRowIndices.has(e);
   o._changedRowIndices.add(e);
   const a = o.findRenderedRowElement?.(e);
   a && a.classList.add("changed"), o.dispatchEvent(
     new CustomEvent("cell-commit", {
       detail: {
-        row: s,
-        field: i,
+        row: i,
+        field: s,
         value: n,
         rowIndex: e,
         changedRows: o.changedRows,
@@ -719,63 +725,63 @@ function $(o, e, t, n, s) {
     })
   );
 }
-function L(o, e, t, n, s) {
-  if (!n.editable || (o.activeEditRows !== t && T(o, t, e), s.classList.contains("editing"))) return;
-  const i = e[n.field];
-  s.classList.add("editing");
-  const l = (h) => {
-    $(o, t, n, h, e);
+function L(o, e, t, n, i) {
+  if (!n.editable || (o.activeEditRows !== t && T(o, t, e), i.classList.contains("editing"))) return;
+  const s = e[n.field];
+  i.classList.add("editing");
+  const l = (u) => {
+    $(o, t, n, u, e);
   }, r = () => {
-    e[n.field] = i;
-    const h = s.querySelector("input,textarea,select");
-    h && (typeof HTMLInputElement < "u" && h instanceof HTMLInputElement && h.type === "checkbox" ? h.checked = !!i : "value" in h && (h.value = i ?? ""));
+    e[n.field] = s;
+    const u = i.querySelector("input,textarea,select");
+    u && (typeof HTMLInputElement < "u" && u instanceof HTMLInputElement && u.type === "checkbox" ? u.checked = !!s : "value" in u && (u.value = s ?? ""));
   }, a = document.createElement("div");
-  a.style.display = "contents", s.innerHTML = "", s.appendChild(a);
-  const f = n.__editorTemplate, p = n.editor || (f ? "template" : De(n)), w = i;
+  a.style.display = "contents", i.innerHTML = "", i.appendChild(a);
+  const f = n.__editorTemplate, p = n.editor || (f ? "template" : De(n)), w = s;
   if (p === "template" && f) {
-    const h = f.cloneNode(!0), c = n.__compiledEditor;
-    c ? h.innerHTML = c({ row: e, value: i, field: n.field, column: n }) : h.querySelectorAll("*").forEach((u) => {
-      u.childNodes.length === 1 && u.firstChild?.nodeType === Node.TEXT_NODE && (u.textContent = u.textContent?.replace(/{{\s*value\s*}}/g, i == null ? "" : String(i)).replace(/{{\s*row\.([a-zA-Z0-9_]+)\s*}}/g, (b, y) => {
-        const v = e[y];
-        return v == null ? "" : String(v);
+    const u = f.cloneNode(!0), c = n.__compiledEditor;
+    c ? u.innerHTML = c({ row: e, value: s, field: n.field, column: n }) : u.querySelectorAll("*").forEach((d) => {
+      d.childNodes.length === 1 && d.firstChild?.nodeType === Node.TEXT_NODE && (d.textContent = d.textContent?.replace(/{{\s*value\s*}}/g, s == null ? "" : String(s)).replace(/{{\s*row\.([a-zA-Z0-9_]+)\s*}}/g, (g, m) => {
+        const C = e[m];
+        return C == null ? "" : String(C);
       }) || "");
     });
-    const d = h.querySelector("input,textarea,select");
-    if (d) {
-      const u = typeof HTMLInputElement < "u";
-      u && d instanceof HTMLInputElement && d.type === "checkbox" ? d.checked = !!i : "value" in d && (d.value = i ?? ""), d.addEventListener("blur", () => {
-        const b = u && d instanceof HTMLInputElement && d.type === "checkbox" ? d.checked : d.value;
-        l(b);
-      }), d.addEventListener("keydown", (b) => {
-        if (b.key === "Enter") {
-          const y = u && d instanceof HTMLInputElement && d.type === "checkbox" ? d.checked : d.value;
-          l(y);
+    const h = u.querySelector("input,textarea,select");
+    if (h) {
+      const d = typeof HTMLInputElement < "u";
+      d && h instanceof HTMLInputElement && h.type === "checkbox" ? h.checked = !!s : "value" in h && (h.value = s ?? ""), h.addEventListener("blur", () => {
+        const g = d && h instanceof HTMLInputElement && h.type === "checkbox" ? h.checked : h.value;
+        l(g);
+      }), h.addEventListener("keydown", (g) => {
+        if (g.key === "Enter") {
+          const m = d && h instanceof HTMLInputElement && h.type === "checkbox" ? h.checked : h.value;
+          l(m);
         }
-        b.key === "Escape" && r();
-      }), u && d instanceof HTMLInputElement && d.type === "checkbox" && d.addEventListener("change", () => {
-        const b = d.checked;
-        l(b);
-      }), setTimeout(() => d.focus(), 0);
+        g.key === "Escape" && r();
+      }), d && h instanceof HTMLInputElement && h.type === "checkbox" && h.addEventListener("change", () => {
+        const g = h.checked;
+        l(g);
+      }), setTimeout(() => h.focus(), 0);
     }
-    a.appendChild(h);
+    a.appendChild(u);
   } else if (typeof p == "string") {
-    const h = document.createElement(p);
-    h.value = w, h.addEventListener("change", () => l(h.value)), a.appendChild(h);
+    const u = document.createElement(p);
+    u.value = w, u.addEventListener("change", () => l(u.value)), a.appendChild(u);
   } else if (typeof p == "function") {
-    const h = p({ row: e, value: w, field: n.field, column: n, commit: l, cancel: r });
-    typeof h == "string" ? a.innerHTML = h : a.appendChild(h);
+    const u = p({ row: e, value: w, field: n.field, column: n, commit: l, cancel: r });
+    typeof u == "string" ? a.innerHTML = u : a.appendChild(u);
   } else if (p && typeof p == "object") {
-    const h = document.createElement("div");
-    h.setAttribute("data-external-editor", ""), h.setAttribute("data-field", n.field), a.appendChild(h);
+    const u = document.createElement("div");
+    u.setAttribute("data-external-editor", ""), u.setAttribute("data-field", n.field), a.appendChild(u);
     const c = { row: e, value: w, field: n.field, column: n, commit: l, cancel: r };
     if (p.mount)
       try {
-        p.mount({ placeholder: h, context: c, spec: p });
+        p.mount({ placeholder: u, context: c, spec: p });
       } catch {
       }
     else
       o.dispatchEvent(
-        new CustomEvent("mount-external-editor", { detail: { placeholder: h, spec: p, context: c } })
+        new CustomEvent("mount-external-editor", { detail: { placeholder: u, spec: p, context: c } })
       );
   }
 }
@@ -788,8 +794,8 @@ function J(o, e) {
 }
 function Q(o, e, t) {
   o.sortState = { field: e.field, direction: t };
-  const n = e.sortComparator || ((s, i) => s == null && i == null ? 0 : s == null ? -1 : i == null || s > i ? 1 : s < i ? -1 : 0);
-  o._rows.sort((s, i) => n(s[e.field], i[e.field], s, i) * t), o.__rowRenderEpoch++, o.rowPool.forEach((s) => s.__epoch = -1), V(o), o.refreshVirtualWindow(!0), o.dispatchEvent(
+  const n = e.sortComparator || ((i, s) => i == null && s == null ? 0 : i == null ? -1 : s == null || i > s ? 1 : i < s ? -1 : 0);
+  o._rows.sort((i, s) => n(i[e.field], s[e.field], i, s) * t), o.__rowRenderEpoch++, o.rowPool.forEach((i) => i.__epoch = -1), V(o), o.refreshVirtualWindow(!0), o.dispatchEvent(
     new CustomEvent("sort-change", { detail: { field: e.field, direction: t } })
   ), o.requestStateChange?.();
 }
@@ -797,41 +803,41 @@ function V(o) {
   o.headerRowEl = o.findHeaderRow();
   const e = o.headerRowEl;
   e.innerHTML = "", e.setAttribute("role", "row"), e.setAttribute("aria-rowindex", "1"), o.visibleColumns.forEach((t, n) => {
-    const s = document.createElement("div");
-    s.className = "cell", B(s, "header-cell"), s.setAttribute("role", "columnheader"), s.setAttribute("aria-colindex", String(n + 1)), s.setAttribute("data-field", t.field), s.setAttribute("data-col", String(n)), t.sticky === "left" ? s.classList.add("sticky-left") : t.sticky === "right" && s.classList.add("sticky-right");
-    const i = t.__headerTemplate;
-    if (i) Array.from(i.childNodes).forEach((l) => s.appendChild(l.cloneNode(!0)));
+    const i = document.createElement("div");
+    i.className = "cell", B(i, "header-cell"), i.setAttribute("role", "columnheader"), i.setAttribute("aria-colindex", String(n + 1)), i.setAttribute("data-field", t.field), i.setAttribute("data-col", String(n)), t.sticky === "left" ? i.classList.add("sticky-left") : t.sticky === "right" && i.classList.add("sticky-right");
+    const s = t.__headerTemplate;
+    if (s) Array.from(s.childNodes).forEach((l) => i.appendChild(l.cloneNode(!0)));
     else {
       const l = t.header || t.field, r = document.createElement("span");
-      r.textContent = l, s.appendChild(r);
+      r.textContent = l, i.appendChild(r);
     }
     if (t.sortable) {
-      s.classList.add("sortable"), s.tabIndex = 0;
+      i.classList.add("sortable"), i.tabIndex = 0;
       const l = document.createElement("span");
       B(l, "sort-indicator"), l.style.opacity = "0.6";
       const r = o.sortState?.field === t.field ? o.sortState.direction : 0;
-      l.textContent = r === 1 ? "▲" : r === -1 ? "▼" : "⇅", s.appendChild(l), s.setAttribute("aria-sort", r === 0 ? "none" : r === 1 ? "ascending" : "descending"), s.addEventListener("click", (a) => {
-        o.resizeController?.isResizing || o.dispatchHeaderClick?.(a, n, s) || J(o, t);
-      }), s.addEventListener("keydown", (a) => {
+      l.textContent = r === 1 ? "▲" : r === -1 ? "▼" : "⇅", i.appendChild(l), i.setAttribute("aria-sort", r === 0 ? "none" : r === 1 ? "ascending" : "descending"), i.addEventListener("click", (a) => {
+        o.resizeController?.isResizing || o.dispatchHeaderClick?.(a, n, i) || J(o, t);
+      }), i.addEventListener("keydown", (a) => {
         if (a.key === "Enter" || a.key === " ") {
-          if (a.preventDefault(), o.dispatchHeaderClick?.(a, n, s)) return;
+          if (a.preventDefault(), o.dispatchHeaderClick?.(a, n, i)) return;
           J(o, t);
         }
       });
     }
     if (t.resizable) {
-      t.sticky || (s.style.position = "relative");
+      t.sticky || (i.style.position = "relative");
       const l = document.createElement("div");
       l.className = "resize-handle", l.setAttribute("aria-hidden", "true"), l.addEventListener("mousedown", (r) => {
-        r.stopPropagation(), r.preventDefault(), o.resizeController.start(r, n, s);
-      }), s.appendChild(l);
+        r.stopPropagation(), r.preventDefault(), o.resizeController.start(r, n, i);
+      }), i.appendChild(l);
     }
-    e.appendChild(s);
+    e.appendChild(i);
   });
   try {
     const t = o.shadowRoot;
-    t && t.querySelectorAll(".header-group-row .cell").forEach((s) => {
-      s.getAttribute("data-group") && s.classList.add("grouped");
+    t && t.querySelectorAll(".header-group-row .cell").forEach((i) => {
+      i.getAttribute("data-group") && i.classList.add("grouped");
     });
   } catch {
   }
@@ -840,8 +846,8 @@ function V(o) {
   });
 }
 function Be(o) {
-  let e = null, t = null, n = null, s = null;
-  const i = (a) => {
+  let e = null, t = null, n = null, i = null;
+  const s = (a) => {
     if (!e) return;
     const f = a.clientX - e.startX, p = Math.max(40, e.startWidth + f), w = o.visibleColumns[e.colIndex];
     w.width = p, w.__userResized = !0, w.__renderedWidth = p, t == null && (t = requestAnimationFrame(() => {
@@ -855,7 +861,7 @@ function Be(o) {
     const a = e !== null;
     a && (l = !0, requestAnimationFrame(() => {
       l = !1;
-    })), window.removeEventListener("mousemove", i), window.removeEventListener("mouseup", r), n !== null && (document.documentElement.style.cursor = n, n = null), s !== null && (document.body.style.userSelect = s, s = null), e = null, a && o.requestStateChange && o.requestStateChange();
+    })), window.removeEventListener("mousemove", s), window.removeEventListener("mouseup", r), n !== null && (document.documentElement.style.cursor = n, n = null), i !== null && (document.body.style.userSelect = i, i = null), e = null, a && o.requestStateChange && o.requestStateChange();
   };
   return {
     get isResizing() {
@@ -864,7 +870,7 @@ function Be(o) {
     start(a, f, p) {
       a.preventDefault();
       const w = p.getBoundingClientRect();
-      e = { startX: a.clientX, colIndex: f, startWidth: w.width }, window.addEventListener("mousemove", i), window.addEventListener("mouseup", r), n === null && (n = document.documentElement.style.cursor), document.documentElement.style.cursor = "e-resize", s === null && (s = document.body.style.userSelect), document.body.style.userSelect = "none";
+      e = { startX: a.clientX, colIndex: f, startWidth: w.width }, window.addEventListener("mousemove", s), window.addEventListener("mouseup", r), n === null && (n = document.documentElement.style.cursor), document.documentElement.style.cursor = "e-resize", i === null && (i = document.body.style.userSelect), document.body.style.userSelect = "none";
     },
     dispose() {
       r();
@@ -888,20 +894,20 @@ function Ke(o, e) {
   return !!(o?.header?.title || o?.header?.toolbarButtons?.length || e.toolPanels.size > 0 || e.headerContents.size > 0 || e.toolbarButtons.size > 0 || e.lightDomButtons.length > 0 || e.lightDomHeaderContent.length > 0);
 }
 function We(o, e) {
-  const t = o?.header?.title ?? "", n = !!t, s = o?.header?.toolbarButtons ?? [], i = s.length > 0, l = e.toolbarButtons.size > 0, r = e.lightDomButtons.length > 0, a = e.toolPanels.size > 0, p = (i || l || r) && a, w = [...s].sort((u, b) => (u.order ?? 100) - (b.order ?? 100)), h = [...e.toolbarButtons.values()].sort((u, b) => (u.order ?? 100) - (b.order ?? 100)), c = [...e.toolPanels.values()].sort((u, b) => (u.order ?? 100) - (b.order ?? 100));
-  let d = "";
-  for (const u of w)
-    u.icon && u.action && (d += `<button class="tbw-toolbar-btn" data-btn="${u.id}" title="${u.label}" aria-label="${u.label}"${u.disabled ? " disabled" : ""}>${u.icon}</button>`);
-  for (const u of h)
-    u.icon && u.action && (d += `<button class="tbw-toolbar-btn" data-btn="${u.id}" title="${u.label}" aria-label="${u.label}"${u.disabled ? " disabled" : ""}>${u.icon}</button>`);
-  for (const u of w)
-    (u.element || u.render) && (d += `<div class="tbw-toolbar-btn-slot" data-btn-slot="${u.id}"></div>`);
-  for (const u of h)
-    (u.element || u.render) && (d += `<div class="tbw-toolbar-btn-slot" data-btn-slot="${u.id}"></div>`);
-  r && (d += '<slot name="toolbar"></slot>'), p && (d += '<div class="tbw-toolbar-separator"></div>');
-  for (const u of c) {
-    const b = e.activePanel === u.id;
-    d += `<button class="tbw-toolbar-btn${b ? " active" : ""}" data-panel="${u.id}" title="${u.tooltip ?? u.title}" aria-label="${u.tooltip ?? u.title}" aria-pressed="${b}" aria-controls="tbw-panel-${u.id}">${u.icon}</button>`;
+  const t = o?.header?.title ?? "", n = !!t, i = o?.header?.toolbarButtons ?? [], s = i.length > 0, l = e.toolbarButtons.size > 0, r = e.lightDomButtons.length > 0, a = e.toolPanels.size > 0, p = (s || l || r) && a, w = [...i].sort((d, g) => (d.order ?? 100) - (g.order ?? 100)), u = [...e.toolbarButtons.values()].sort((d, g) => (d.order ?? 100) - (g.order ?? 100)), c = [...e.toolPanels.values()].sort((d, g) => (d.order ?? 100) - (g.order ?? 100));
+  let h = "";
+  for (const d of w)
+    d.icon && d.action && (h += `<button class="tbw-toolbar-btn" data-btn="${d.id}" title="${d.label}" aria-label="${d.label}"${d.disabled ? " disabled" : ""}>${d.icon}</button>`);
+  for (const d of u)
+    d.icon && d.action && (h += `<button class="tbw-toolbar-btn" data-btn="${d.id}" title="${d.label}" aria-label="${d.label}"${d.disabled ? " disabled" : ""}>${d.icon}</button>`);
+  for (const d of w)
+    (d.element || d.render) && (h += `<div class="tbw-toolbar-btn-slot" data-btn-slot="${d.id}"></div>`);
+  for (const d of u)
+    (d.element || d.render) && (h += `<div class="tbw-toolbar-btn-slot" data-btn-slot="${d.id}"></div>`);
+  r && (h += '<slot name="toolbar"></slot>'), p && (h += '<div class="tbw-toolbar-separator"></div>');
+  for (const d of c) {
+    const g = e.activePanel === d.id;
+    h += `<button class="tbw-toolbar-btn${g ? " active" : ""}" data-panel="${d.id}" title="${d.tooltip ?? d.title}" aria-label="${d.tooltip ?? d.title}" aria-pressed="${g}" aria-controls="tbw-panel-${d.id}">${d.icon}</button>`;
   }
   return `
     <div class="tbw-shell-header" part="shell-header" role="banner">
@@ -910,14 +916,14 @@ function We(o, e) {
         <slot name="header-content"></slot>
       </div>
       <div class="tbw-shell-toolbar" part="shell-toolbar" role="toolbar" aria-label="Grid tools">
-        ${d}
+        ${h}
       </div>
     </div>
   `;
 }
 function Fe(o, e, t) {
-  const n = o?.toolPanel?.position ?? "right", s = e.toolPanels.size > 0, i = e.activePanel !== null, l = e.activePanel ? e.toolPanels.get(e.activePanel) : null, r = s ? `
-    <aside class="tbw-tool-panel${i ? " open" : ""}" part="tool-panel" data-position="${n}" role="complementary" aria-label="${l?.title ?? "Tool panel"}" id="tbw-panel-${e.activePanel ?? "closed"}">
+  const n = o?.toolPanel?.position ?? "right", i = e.toolPanels.size > 0, s = e.activePanel !== null, l = e.activePanel ? e.toolPanels.get(e.activePanel) : null, r = i ? `
+    <aside class="tbw-tool-panel${s ? " open" : ""}" part="tool-panel" data-position="${n}" role="complementary" aria-label="${l?.title ?? "Tool panel"}" id="tbw-panel-${e.activePanel ?? "closed"}">
       <div class="tbw-tool-panel-header">
         <span class="tbw-tool-panel-title">${l?.title ?? ""}</span>
         <button class="tbw-tool-panel-close" aria-label="Close panel">✕</button>
@@ -946,20 +952,20 @@ function ee(o, e) {
   if (!t) return;
   t.style.display = "none";
   const n = t.querySelectorAll("tbw-grid-header-content");
-  e.lightDomHeaderContent = Array.from(n), e.lightDomHeaderContent.forEach((i, l) => {
-    i.setAttribute("slot", "header-content");
+  e.lightDomHeaderContent = Array.from(n), e.lightDomHeaderContent.forEach((s, l) => {
+    s.setAttribute("slot", "header-content");
   });
-  const s = t.querySelectorAll("tbw-grid-tool-button");
-  e.lightDomButtons = Array.from(s), e.lightDomButtons.sort((i, l) => {
-    const r = parseInt(i.getAttribute("order") ?? "100", 10), a = parseInt(l.getAttribute("order") ?? "100", 10);
+  const i = t.querySelectorAll("tbw-grid-tool-button");
+  e.lightDomButtons = Array.from(i), e.lightDomButtons.sort((s, l) => {
+    const r = parseInt(s.getAttribute("order") ?? "100", 10), a = parseInt(l.getAttribute("order") ?? "100", 10);
     return r - a;
-  }), e.lightDomButtons.forEach((i) => {
-    i.setAttribute("slot", "toolbar");
+  }), e.lightDomButtons.forEach((s) => {
+    s.setAttribute("slot", "toolbar");
   });
 }
 function Ve(o, e, t, n) {
-  const s = o.querySelector(".tbw-shell-toolbar");
-  s && s.addEventListener("click", (l) => {
+  const i = o.querySelector(".tbw-shell-toolbar");
+  i && i.addEventListener("click", (l) => {
     const r = l.target, a = r.closest("[data-panel]");
     if (a) {
       const p = a.getAttribute("data-panel");
@@ -972,36 +978,36 @@ function Ve(o, e, t, n) {
       p && n.onToolbarButtonClick(p);
     }
   });
-  const i = o.querySelector(".tbw-tool-panel-close");
-  i && i.addEventListener("click", () => {
+  const s = o.querySelector(".tbw-tool-panel-close");
+  s && s.addEventListener("click", () => {
     n.onPanelClose();
   });
 }
 function Ge(o, e, t) {
   const n = [...e?.header?.toolbarButtons ?? [], ...t.toolbarButtons.values()];
-  for (const s of n) {
-    const i = o.querySelector(`[data-btn-slot="${s.id}"]`);
-    if (!i) continue;
-    const l = t.toolbarButtonCleanups.get(s.id);
-    if (l && (l(), t.toolbarButtonCleanups.delete(s.id)), s.element)
-      i.appendChild(s.element);
-    else if (s.render) {
-      const r = s.render(i);
-      r && t.toolbarButtonCleanups.set(s.id, r);
+  for (const i of n) {
+    const s = o.querySelector(`[data-btn-slot="${i.id}"]`);
+    if (!s) continue;
+    const l = t.toolbarButtonCleanups.get(i.id);
+    if (l && (l(), t.toolbarButtonCleanups.delete(i.id)), i.element)
+      s.appendChild(i.element);
+    else if (i.render) {
+      const r = i.render(s);
+      r && t.toolbarButtonCleanups.set(i.id, r);
     }
   }
 }
 function te(o, e) {
   const t = o.querySelector(".tbw-shell-content");
   if (!t) return;
-  const n = [...e.headerContents.values()].sort((i, l) => (i.order ?? 100) - (l.order ?? 100)), s = t.querySelector('slot[name="header-content"]');
-  for (const i of n) {
-    const l = e.headerContentCleanups.get(i.id);
-    l && (l(), e.headerContentCleanups.delete(i.id));
-    let r = t.querySelector(`[data-header-content="${i.id}"]`);
-    r || (r = document.createElement("div"), r.setAttribute("data-header-content", i.id), s ? t.insertBefore(r, s) : t.appendChild(r));
-    const a = i.render(r);
-    a && e.headerContentCleanups.set(i.id, a);
+  const n = [...e.headerContents.values()].sort((s, l) => (s.order ?? 100) - (l.order ?? 100)), i = t.querySelector('slot[name="header-content"]');
+  for (const s of n) {
+    const l = e.headerContentCleanups.get(s.id);
+    l && (l(), e.headerContentCleanups.delete(s.id));
+    let r = t.querySelector(`[data-header-content="${s.id}"]`);
+    r || (r = document.createElement("div"), r.setAttribute("data-header-content", s.id), i ? t.insertBefore(r, i) : t.appendChild(r));
+    const a = s.render(r);
+    a && e.headerContentCleanups.set(s.id, a);
   }
 }
 function Ue(o, e) {
@@ -1011,13 +1017,13 @@ function Ue(o, e) {
   const n = o.querySelector(".tbw-tool-panel-content");
   if (!n) return;
   e.activePanelCleanup && (e.activePanelCleanup(), e.activePanelCleanup = null), n.innerHTML = "";
-  const s = t.render(n);
-  s && (e.activePanelCleanup = s);
+  const i = t.render(n);
+  i && (e.activePanelCleanup = i);
 }
 function oe(o, e) {
   o.querySelectorAll("[data-panel]").forEach((n) => {
-    const i = n.getAttribute("data-panel") === e.activePanel;
-    n.classList.toggle("active", i), n.setAttribute("aria-pressed", String(i));
+    const s = n.getAttribute("data-panel") === e.activePanel;
+    n.classList.toggle("active", s), n.setAttribute("aria-pressed", String(s));
   });
 }
 function ne(o, e) {
@@ -1025,8 +1031,8 @@ function ne(o, e) {
   if (!t) return;
   const n = e.activePanel !== null;
   if (t.classList.toggle("open", n), n && e.activePanel) {
-    const s = e.toolPanels.get(e.activePanel), i = t.querySelector(".tbw-tool-panel-title");
-    i && (i.textContent = s?.title ?? ""), t.setAttribute("aria-label", `${s?.title ?? "Tool"} panel`), t.id = `tbw-panel-${e.activePanel}`;
+    const i = e.toolPanels.get(e.activePanel), s = t.querySelector(".tbw-tool-panel-title");
+    s && (s.textContent = i?.title ?? ""), t.setAttribute("aria-label", `${i?.title ?? "Tool"} panel`), t.id = `tbw-panel-${e.activePanel}`;
   }
 }
 function Xe(o, e) {
@@ -1046,11 +1052,11 @@ function Xe(o, e) {
       source: "config"
     });
   for (let n = 0; n < e.lightDomButtons.length; n++) {
-    const i = e.lightDomButtons[n].querySelector("button");
+    const s = e.lightDomButtons[n].querySelector("button");
     t.push({
       id: `light-dom-${n}`,
-      label: i?.getAttribute("title") ?? i?.getAttribute("aria-label") ?? "",
-      disabled: i?.disabled ?? !1,
+      label: s?.getAttribute("title") ?? s?.getAttribute("aria-label") ?? "",
+      disabled: s?.disabled ?? !1,
       source: "light-dom"
     });
   }
@@ -1211,8 +1217,8 @@ class Ye {
    * Returns true if any plugin handled the row.
    */
   renderRow(e, t, n) {
-    for (const s of this.plugins)
-      if (s.renderRow?.(e, t, n))
+    for (const i of this.plugins)
+      if (i.renderRow?.(e, t, n))
         return !0;
     return !1;
   }
@@ -1299,8 +1305,8 @@ class Ye {
   getContextMenuItems(e) {
     const t = [];
     for (const n of this.plugins) {
-      const s = n.getContextMenuItems?.(e);
-      s && t.push(...s);
+      const i = n.getContextMenuItems?.(e);
+      i && t.push(...i);
     }
     return t;
   }
@@ -1333,46 +1339,45 @@ class Ye {
 class q extends HTMLElement {
   // TODO: Rename to 'data-grid' when migration is complete
   static tagName = "tbw-grid";
-  #n;
+  #o;
   #i = !1;
   // ---------------- Ready Promise ----------------
+  #H;
   #z;
-  #N;
   // ================== INPUT PROPERTIES ==================
   // These backing fields store raw user input. They are merged into
   // #effectiveConfig by #mergeEffectiveConfig(). Never read directly
   // for rendering logic - always use effectiveConfig or derived state.
   #l = [];
   #r;
+  #p;
   #g;
-  #C;
-  #y;
+  #m;
   // ================== SINGLE SOURCE OF TRUTH ==================
   // All input sources converge here. This is the canonical config
   // that all rendering and logic should read from.
-  #o = {};
-  #u = !1;
-  #L = 0;
-  #E = null;
-  #R = !1;
+  #n = {};
+  #f = !1;
+  #T = 0;
+  #v = null;
+  #C = !1;
   // Cached flag for plugin scroll handlers
-  #k;
+  #L;
   // Cached hook to avoid closures
-  #f;
-  #p;
-  #_ = !1;
-  #w;
-  #b;
+  #y = !1;
+  #E = null;
+  #R = null;
+  #_ = null;
   #A = null;
-  #S = null;
+  #a;
   // ---------------- Plugin System ----------------
   #t;
   // ---------------- Column State ----------------
-  #P;
-  #d;
+  #k;
+  #h;
   // ---------------- Shell State ----------------
   #e = $e();
-  #a = !1;
+  #c = !1;
   // ================== DERIVED STATE ==================
   // _rows: result of applying plugin processRows hooks
   _rows = [];
@@ -1380,10 +1385,10 @@ class q extends HTMLElement {
   // This ensures effectiveConfig.columns is the single source of truth for columns
   // _columns always contains ALL columns (including hidden)
   get _columns() {
-    return this.#o.columns ?? [];
+    return this.#n.columns ?? [];
   }
   set _columns(e) {
-    this.#o.columns = e;
+    this.#n.columns = e;
   }
   // visibleColumns returns only visible columns for rendering
   // This is what header/row rendering should use
@@ -1433,7 +1438,7 @@ class q extends HTMLElement {
   }
   set rows(e) {
     const t = this.#l;
-    this.#l = e, t !== e && this.#Z();
+    this.#l = e, t !== e && this.#Y();
   }
   /**
    * Get the original unfiltered/unprocessed rows.
@@ -1447,41 +1452,51 @@ class q extends HTMLElement {
   }
   set columns(e) {
     const t = this.#r;
-    this.#r = e, t !== e && this.#J();
+    this.#r = e, t !== e && this.#Z();
   }
   get gridConfig() {
-    return this.#o;
+    return this.#n;
   }
   set gridConfig(e) {
-    const t = this.#g;
-    this.#g = e, t !== e && this.#Q();
+    const t = this.#p;
+    this.#p = e, t !== e && this.#J();
   }
   get fitMode() {
-    return this.#o.fitMode ?? "stretch";
+    return this.#n.fitMode ?? "stretch";
   }
   set fitMode(e) {
-    const t = this.#C;
-    this.#C = e, t !== e && this.#j();
+    const t = this.#g;
+    this.#g = e, t !== e && this.#X();
   }
   get editOn() {
-    return this.#o.editOn;
+    return this.#n.editOn;
   }
   set editOn(e) {
-    const t = this.#y;
-    this.#y = e, t !== e && this.#Y();
+    const t = this.#m;
+    this.#m = e, t !== e && this.#j();
   }
   // Effective config accessor for internal modules and plugins
   // Returns the merged config (single source of truth) before plugin processing
   // Use this when you need the raw merged config (e.g., for column definitions including hidden)
   get effectiveConfig() {
-    return this.#o;
+    return this.#n;
+  }
+  /**
+   * Get the disconnect signal for event listener cleanup.
+   * This signal is aborted when the grid disconnects from the DOM.
+   * Plugins and internal code can use this for automatic listener cleanup.
+   * @example
+   * element.addEventListener('click', handler, { signal: this.grid.disconnectSignal });
+   */
+  get disconnectSignal() {
+    return this.#a || (this.#a = new AbortController()), this.#a.signal;
   }
   constructor() {
-    super(), this.#n = this.attachShadow({ mode: "open" }), this.#V(), this.#z = new Promise((e) => this.#N = e);
+    super(), this.#o = this.attachShadow({ mode: "open" }), this.#F(), this.#H = new Promise((e) => this.#z = e);
   }
-  #V() {
+  #F() {
     const e = new CSSStyleSheet();
-    e.replaceSync(we), this.#n.adoptedStyleSheets = [e];
+    e.replaceSync(we), this.#o.adoptedStyleSheets = [e];
   }
   // ---------------- Plugin System ----------------
   /**
@@ -1504,7 +1519,7 @@ class q extends HTMLElement {
    * Note: This does NOT reset plugin state - just re-processes rows/columns and renders.
    */
   requestRender() {
-    this.#T(), this.#O(), this.#x(), this.updateTemplate(), this.refreshVirtualWindow(!0);
+    this.#x(), this.#P(), this.#S(), this.updateTemplate(), this.refreshVirtualWindow(!0);
   }
   /**
    * Request a lightweight style update without rebuilding DOM.
@@ -1512,46 +1527,46 @@ class q extends HTMLElement {
    * This runs all plugin afterRender hooks without rebuilding row/column DOM.
    */
   requestAfterRender() {
-    this.#m();
+    this.#w();
   }
   /**
    * Initialize plugin system with instances from config.
    * Plugins are class instances passed in gridConfig.plugins[].
    */
-  #q() {
+  #N() {
     this.#t = new Ye(this);
-    const e = this.#o?.plugins, t = Array.isArray(e) ? e : [];
+    const e = this.#n?.plugins, t = Array.isArray(e) ? e : [];
     this.#t.attachAll(t);
   }
   /**
    * Inject all plugin styles into the shadow DOM.
    * Must be called after #render() since innerHTML wipes existing content.
    */
-  #I() {
+  #q() {
     const e = this.#t?.getAllStyles() ?? "";
     if (e) {
       const t = document.createElement("style");
-      t.setAttribute("data-plugin", "all"), t.textContent = e, this.#n.appendChild(t);
+      t.setAttribute("data-plugin", "all"), t.textContent = e, this.#o.appendChild(t);
     }
   }
   /**
    * Update plugins when grid config changes.
    * With class-based plugins, we need to detach old and attach new.
    */
-  #B() {
-    this.#t && this.#t.detachAll(), this.#q(), this.#I(), this.#R = this.#t?.getAll().some((e) => e.onScroll) ?? !1;
+  #I() {
+    this.#t && this.#t.detachAll(), this.#N(), this.#q(), this.#C = this.#t?.getAll().some((e) => e.onScroll) ?? !1;
   }
   /**
    * Clean up plugin states when grid disconnects.
    */
-  #G() {
+  #V() {
     this.#t?.detachAll();
   }
   /**
    * Collect tool panels and header content from all plugins.
    * Called after plugins are attached but before render.
    */
-  #U() {
+  #G() {
     if (!this.#t) return;
     const e = this.#t.getToolPanels();
     for (const { panel: n } of e)
@@ -1562,75 +1577,85 @@ class q extends HTMLElement {
   }
   // ---------------- Lifecycle ----------------
   connectedCallback() {
-    this.hasAttribute("tabindex") || (this.tabIndex = 0), this._rows = Array.isArray(this.#l) ? [...this.#l] : [], this.#h(), this.#q(), this.#U(), this.#i || (this.#F(), this.#I(), this.#i = !0), this.#$();
+    this.hasAttribute("tabindex") || (this.tabIndex = 0), this._rows = Array.isArray(this.#l) ? [...this.#l] : [], this.#a?.abort(), this.#a = new AbortController(), this.#u(), this.#N(), this.#G(), this.#i || (this.#W(), this.#q(), this.#i = !0), this.#B();
   }
   disconnectedCallback() {
-    this.#G(), je(this.#e), this.#a = !1, this.#f && (document.removeEventListener("keydown", this.#f, !0), this.#f = void 0), this.#p && (document.removeEventListener("mousedown", this.#p, !1), this.#p = void 0), this.#w && (document.removeEventListener("mousemove", this.#w), this.#w = void 0), this.#b && (document.removeEventListener("mouseup", this.#b), this.#b = void 0), this.resizeController && this.resizeController.dispose(), this.#u = !1;
+    this.#V(), je(this.#e), this.#c = !1, this.#a && (this.#a.abort(), this.#a = void 0), this.resizeController && this.resizeController.dispose(), this.#f = !1;
   }
-  #$() {
-    const t = this.#n.querySelector(".tbw-grid-content") ?? this.#n.querySelector(".tbw-grid-root");
-    if (this.headerRowEl = t?.querySelector(".header-row"), this.virtualization.totalHeightEl = t?.querySelector(".faux-vscroll-spacer"), this.virtualization.viewportEl = t?.querySelector(".rows-viewport"), this.bodyEl = t?.querySelector(".rows"), this.#a) {
-      te(this.#n, this.#e), Ge(this.#n, this.#o?.shell, this.#e);
-      const i = this.#o?.shell?.toolPanel?.defaultOpen;
-      i && this.#e.toolPanels.has(i) && this.openToolPanel(i);
-    }
-    this.setAttribute("data-upgraded", ""), this.hasAttribute("role") || this.setAttribute("role", "grid"), this.#u = !0, this.#c(), this.addEventListener("keydown", (i) => He(this, i)), this.#f || (this.#f = (i) => {
-      i.key === "Escape" && this.activeEditRows !== -1 && this.#D(this.activeEditRows, !0);
-    }, document.addEventListener("keydown", this.#f, !0)), this.#p || (this.#p = (i) => {
-      if (this.activeEditRows === -1) return;
-      const l = this.findRenderedRowElement(this.activeEditRows);
-      !l || (i.composedPath && i.composedPath() || []).includes(l) || this.#D(this.activeEditRows, !1);
-    }, document.addEventListener("mousedown", this.#p, !1));
-    const n = t?.querySelector(".faux-vscroll"), s = t?.querySelector(".rows");
-    if (this.virtualization.container = n ?? this, this.#R = this.#t?.getAll().some((i) => i.onScroll) ?? !1, n && s) {
-      n.addEventListener(
+  #B() {
+    const t = this.#o.querySelector(".tbw-grid-content") ?? this.#o.querySelector(".tbw-grid-root");
+    if (this.headerRowEl = t?.querySelector(".header-row"), this.virtualization.totalHeightEl = t?.querySelector(".faux-vscroll-spacer"), this.virtualization.viewportEl = t?.querySelector(".rows-viewport"), this.bodyEl = t?.querySelector(".rows"), this.#c) {
+      te(this.#o, this.#e), Ge(this.#o, this.#n?.shell, this.#e);
+      const l = this.#n?.shell?.toolPanel?.defaultOpen;
+      l && this.#e.toolPanels.has(l) && this.openToolPanel(l);
+    }
+    this.setAttribute("data-upgraded", ""), this.hasAttribute("role") || this.setAttribute("role", "grid"), this.#f = !0;
+    const n = this.disconnectSignal;
+    this.#d(), this.addEventListener("keydown", (l) => He(this, l), { signal: n }), document.addEventListener(
+      "keydown",
+      (l) => {
+        l.key === "Escape" && this.activeEditRows !== -1 && this.#O(this.activeEditRows, !0);
+      },
+      { capture: !0, signal: n }
+    ), document.addEventListener(
+      "mousedown",
+      (l) => {
+        if (this.activeEditRows === -1) return;
+        const r = this.findRenderedRowElement(this.activeEditRows);
+        !r || (l.composedPath && l.composedPath() || []).includes(r) || this.#O(this.activeEditRows, !1);
+      },
+      { signal: n }
+    );
+    const i = t?.querySelector(".faux-vscroll"), s = t?.querySelector(".rows");
+    if (this.virtualization.container = i ?? this, this.#C = this.#t?.getAll().some((l) => l.onScroll) ?? !1, i && s) {
+      i.addEventListener(
         "scroll",
         () => {
-          if (!this.virtualization.enabled && !this.#R) return;
-          const l = n.scrollTop, r = this.virtualization.rowHeight, a = -(l % r);
-          s.style.transform = `translateY(${a}px)`, this.#E = l, this.#L || (this.#L = requestAnimationFrame(() => {
-            this.#L = 0, this.#E !== null && (this.#ne(this.#E), this.#E = null);
+          if (!this.virtualization.enabled && !this.#C) return;
+          const a = i.scrollTop, f = this.virtualization.rowHeight, p = -(a % f);
+          s.style.transform = `translateY(${p}px)`, this.#v = a, this.#T || (this.#T = requestAnimationFrame(() => {
+            this.#T = 0, this.#v !== null && (this.#oe(this.#v), this.#v = null);
           }));
         },
-        { passive: !0 }
+        { passive: !0, signal: n }
       );
-      const i = t?.querySelector(".rows-body");
-      i && (i.addEventListener(
+      const l = this.#o.querySelector(".tbw-grid-content"), r = this.#o.querySelector(".tbw-scroll-area");
+      l && (l.addEventListener(
         "wheel",
-        (l) => {
-          l.preventDefault(), n.scrollTop += l.deltaY;
+        (a) => {
+          a.preventDefault(), a.shiftKey || Math.abs(a.deltaX) > Math.abs(a.deltaY) ? r && (r.scrollLeft += a.shiftKey ? a.deltaY : a.deltaX) : i.scrollTop += a.deltaY;
         },
-        { passive: !1 }
-      ), i.addEventListener(
+        { passive: !1, signal: n }
+      ), l.addEventListener(
         "touchstart",
-        (l) => {
-          l.touches.length === 1 && (this.#A = l.touches[0].clientY, this.#S = n.scrollTop);
+        (a) => {
+          a.touches.length === 1 && (this.#E = a.touches[0].clientY, this.#R = a.touches[0].clientX, this.#_ = i.scrollTop, this.#A = r?.scrollLeft ?? 0);
         },
-        { passive: !0 }
-      ), i.addEventListener(
+        { passive: !0, signal: n }
+      ), l.addEventListener(
         "touchmove",
-        (l) => {
-          if (l.touches.length === 1 && this.#A !== null && this.#S !== null) {
-            const r = this.#A - l.touches[0].clientY;
-            n.scrollTop = this.#S + r, l.preventDefault();
+        (a) => {
+          if (a.touches.length === 1 && this.#E !== null && this.#R !== null && this.#_ !== null && this.#A !== null) {
+            const f = this.#E - a.touches[0].clientY, p = this.#R - a.touches[0].clientX;
+            i.scrollTop = this.#_ + f, r && (r.scrollLeft = this.#A + p), a.preventDefault();
           }
         },
-        { passive: !1 }
-      ), i.addEventListener(
+        { passive: !1, signal: n }
+      ), l.addEventListener(
         "touchend",
         () => {
-          this.#A = null, this.#S = null;
+          this.#E = null, this.#R = null, this.#_ = null, this.#A = null;
         },
-        { passive: !0 }
+        { passive: !0, signal: n }
       ));
     }
-    this.resizeController = Be(this), this.#n.addEventListener("mousedown", (i) => this.#ie(i)), this.#w || (this.#w = (i) => this.#se(i), document.addEventListener("mousemove", this.#w)), this.#b || (this.#b = (i) => this.#le(i), document.addEventListener("mouseup", this.#b)), this.virtualization.enabled && requestAnimationFrame(() => this.refreshVirtualWindow(!0)), requestAnimationFrame(() => {
-      const i = this.bodyEl.querySelector(".data-grid-row");
-      if (i) {
-        const l = i.getBoundingClientRect().height;
-        l && Math.abs(l - this.virtualization.rowHeight) > 0.1 && (this.virtualization.rowHeight = l, this.refreshVirtualWindow(!0));
+    this.resizeController = Be(this), this.#o.addEventListener("mousedown", (l) => this.#ne(l), { signal: n }), document.addEventListener("mousemove", (l) => this.#ie(l), { signal: n }), document.addEventListener("mouseup", (l) => this.#se(l), { signal: n }), this.virtualization.enabled && requestAnimationFrame(() => this.refreshVirtualWindow(!0)), requestAnimationFrame(() => {
+      const l = this.bodyEl.querySelector(".data-grid-row");
+      if (l) {
+        const r = l.getBoundingClientRect().height;
+        r && Math.abs(r - this.virtualization.rowHeight) > 0.1 && (this.virtualization.rowHeight = r, this.refreshVirtualWindow(!0));
       }
-    }), queueMicrotask(() => this.#X()), requestAnimationFrame(() => requestAnimationFrame(() => this.#N?.()));
+    }), queueMicrotask(() => this.#U()), requestAnimationFrame(() => requestAnimationFrame(() => this.#z?.()));
   }
   // ---------------- Event Emitters ----------------
   #s(e, t) {
@@ -1652,65 +1677,65 @@ class q extends HTMLElement {
     this.#s("activate-cell", e);
   }
   /** Update ARIA selection attributes on rendered rows/cells */
-  #X() {
+  #U() {
     this.bodyEl?.querySelectorAll(".data-grid-row")?.forEach((t, n) => {
-      const s = n === this.focusRow;
-      t.setAttribute("aria-selected", String(s)), t.querySelectorAll(".cell").forEach((i, l) => {
-        i.setAttribute("aria-selected", String(s && l === this.focusCol));
+      const i = n === this.focusRow;
+      t.setAttribute("aria-selected", String(i)), t.querySelectorAll(".cell").forEach((s, l) => {
+        s.setAttribute("aria-selected", String(i && l === this.focusCol));
       });
     });
   }
   // ---------------- Watch Handlers ----------------
-  #j() {
-    if (!this.#u) return;
-    this.#h(), this.#o.fitMode === "fixed" ? (this.__didInitialAutoSize = !1, this.#K()) : (this._columns.forEach((t) => {
+  #X() {
+    if (!this.#f) return;
+    this.#u(), this.#n.fitMode === "fixed" ? (this.__didInitialAutoSize = !1, this.#$()) : (this._columns.forEach((t) => {
       !t.__userResized && t.__autoSized && delete t.width;
     }), this.updateTemplate());
   }
+  #j() {
+    this.#f && (this.#u(), this.rowPool.length = 0, this.bodyEl && (this.bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.refreshVirtualWindow(!0));
+  }
   #Y() {
-    this.#u && (this.#h(), this.rowPool.length = 0, this.bodyEl && (this.bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.refreshVirtualWindow(!0));
+    this._rows = Array.isArray(this.#l) ? [...this.#l] : [], this.#x(), !this.#r || Array.isArray(this.#r) && this.#r.length === 0 ? this.#d() : this.refreshVirtualWindow(!0);
   }
   #Z() {
-    this._rows = Array.isArray(this.#l) ? [...this.#l] : [], this.#T(), !this.#r || Array.isArray(this.#r) && this.#r.length === 0 ? this.#c() : this.refreshVirtualWindow(!0);
+    j(this), this.#f && (this.#u(), this.#d());
   }
   #J() {
-    j(this), this.#u && (this.#h(), this.#c());
-  }
-  #Q() {
-    this.#u && (this.#h(), this.#B(), this.#T(), this.#O(), this.#x(), this.updateTemplate(), this.refreshVirtualWindow(!0));
+    this.#f && (this.#u(), this.#I(), this.#x(), this.#P(), this.#S(), this.updateTemplate(), this.refreshVirtualWindow(!0));
   }
   // ---------------- Helper Wrappers ----------------
-  #ee() {
-    Oe(this);
+  #Q() {
+    Me(this);
   }
-  #x() {
+  #S() {
     V(this);
   }
   updateTemplate() {
     he(this);
   }
-  #K() {
-    Me(this);
+  #$() {
+    Oe(this);
   }
-  #O() {
+  #P() {
     if (this.#t) {
       const e = this._columns.filter((n) => !n.hidden), t = this.#t.processColumns([...e]);
       if (t !== e) {
-        const n = new Map(t.map((i, l) => [i.field, { col: i, order: l }])), s = this._columns.map((i) => {
-          if (i.hidden) return i;
-          const l = n.get(i.field);
-          return l ? l.col : i;
+        const n = new Map(t.map((s, l) => [s.field, { col: s, order: l }])), i = this._columns.map((s) => {
+          if (s.hidden) return s;
+          const l = n.get(s.field);
+          return l ? l.col : s;
         });
-        this._columns = s;
+        this._columns = i;
       }
     }
   }
   /** Execute all plugin afterRender hooks */
-  #m() {
+  #w() {
     this.#t?.afterRender();
   }
   /** Recompute row model via plugin hooks (grouping, tree, filtering, etc.). */
-  #T() {
+  #x() {
     j(this);
     const e = Array.isArray(this.#l) ? [...this.#l] : [], t = this.#t?.processRows(e) ?? e;
     this._rows = t;
@@ -1733,75 +1758,75 @@ class q extends HTMLElement {
    * - `_columns` is NOT set here (done by #getColumnConfiguration + #processColumns)
    * - Plugins receive config via their attach() method
    */
-  #h() {
-    const e = this.#g ? { ...this.#g } : {};
+  #u() {
+    const e = this.#p ? { ...this.#p } : {};
     let t = Array.isArray(e.columns) ? [...e.columns] : [];
-    const n = (this.__lightDomColumnsCache || []).map((s) => ({
-      ...s
+    const n = (this.__lightDomColumnsCache || []).map((i) => ({
+      ...i
     }));
     if (n.length) {
-      const s = {};
-      t.forEach((i) => s[i.field] = i), n.forEach((i) => {
-        const l = s[i.field];
-        l ? (i.header && !l.header && (l.header = i.header), i.type && !l.type && (l.type = i.type), l.sortable = l.sortable || i.sortable, i.resizable && (l.resizable = !0), i.editable && (l.editable = !0)) : (t.push(i), s[i.field] = i);
+      const i = {};
+      t.forEach((s) => i[s.field] = s), n.forEach((s) => {
+        const l = i[s.field];
+        l ? (s.header && !l.header && (l.header = s.header), s.type && !l.type && (l.type = s.type), l.sortable = l.sortable || s.sortable, s.resizable && (l.resizable = !0), s.editable && (l.editable = !0)) : (t.push(s), i[s.field] = s);
       });
     }
     if (this.#r && this.#r.length && (t = [...this.#r]), (!t || t.length === 0) && this._rows.length && (t = ce(this._rows).columns), t.length) {
       t.forEach((l) => {
         l.sortable === void 0 && (l.sortable = !0), l.resizable === void 0 && (l.resizable = !0);
       });
-      const s = this.#o.columns;
-      s?.some((l) => l.__compiledView || l.__compiledEditor) ? e.columns = s : e.columns = t;
+      const i = this.#n.columns;
+      i?.some((l) => l.__compiledView || l.__compiledEditor) ? e.columns = i : e.columns = t;
     } else {
-      const s = this.#o.columns;
-      s?.some((i) => i.__compiledView || i.__compiledEditor) && (e.columns = s);
+      const i = this.#n.columns;
+      i?.some((s) => s.__compiledView || s.__compiledEditor) && (e.columns = i);
     }
-    this.#C && (e.fitMode = this.#C), e.fitMode || (e.fitMode = "stretch"), this.#y && (e.editOn = this.#y), e.columnState && !this.#d && (this.#d = e.columnState), this.#o = e, e.fitMode === "fixed" && this._columns.forEach((s) => {
-      s.width == null && (s.width = 80);
+    this.#g && (e.fitMode = this.#g), e.fitMode || (e.fitMode = "stretch"), this.#m && (e.editOn = this.#m), e.columnState && !this.#h && (this.#h = e.columnState), this.#n = e, e.fitMode === "fixed" && this._columns.forEach((i) => {
+      i.width == null && (i.width = 80);
     });
   }
   // ---------------- Delegate Wrappers ----------------
   #M(e, t, n = this.__rowRenderEpoch) {
-    this.#k || (this.#k = (s, i, l) => this.#t?.renderRow(s, i, l) ?? !1), qe(this, e, t, n, this.#k);
+    this.#L || (this.#L = (i, s, l) => this.#t?.renderRow(i, s, l) ?? !1), qe(this, e, t, n, this.#L);
   }
-  #te(e, t) {
+  #ee(e, t) {
     T(this, e, t);
   }
-  #D(e, t) {
+  #O(e, t) {
     Ie(this, e, t);
   }
   // ---------------- Core Helpers ----------------
-  #c() {
+  #d() {
     if (!this.isConnected || !this.headerRowEl || !this.bodyEl)
       return;
-    const e = this.#g?.columns || this.#r || [];
+    const e = this.#p?.columns || this.#r || [];
     if (e.length) {
-      const n = new Map(this._columns.filter((i) => i.hidden).map((i) => [i.field, !0])), s = e.map((i) => ({
-        ...i,
-        hidden: n.get(i.field) ?? i.hidden
+      const n = new Map(this._columns.filter((s) => s.hidden).map((s) => [s.field, !0])), i = e.map((s) => ({
+        ...s,
+        hidden: n.get(s.field) ?? s.hidden
       }));
-      this._columns = s;
+      this._columns = i;
     }
-    if (this.#ee(), this.#h(), this.#B(), this.#T(), this.#O(), this.#d) {
-      const n = this.#d;
-      this.#d = void 0, this.#W(n);
+    if (this.#Q(), this.#u(), this.#I(), this.#x(), this.#P(), this.#h) {
+      const n = this.#h;
+      this.#h = void 0, this.#K(n);
     }
-    this.#x(), this.updateTemplate(), this.refreshVirtualWindow(!0), this.#o.fitMode === "fixed" && !this.__didInitialAutoSize && requestAnimationFrame(() => this.#K()), this.bodyEl && (this.bodyEl.style.display = "", this.bodyEl.style.gridTemplateColumns = ""), queueMicrotask(() => this.#m());
+    this.#S(), this.updateTemplate(), this.refreshVirtualWindow(!0), this.#n.fitMode === "fixed" && !this.__didInitialAutoSize && requestAnimationFrame(() => this.#$()), this.bodyEl && (this.bodyEl.style.display = "", this.bodyEl.style.gridTemplateColumns = ""), queueMicrotask(() => this.#w());
   }
   /** Internal method to apply column state without triggering setup loop */
-  #W(e) {
-    const t = this.#o.columns ?? [], n = this.#t?.getAll() ?? [];
+  #K(e) {
+    const t = this.#n.columns ?? [], n = this.#t?.getAll() ?? [];
     ge(this, e, t, n);
-    for (const s of e.columns) {
-      const i = t.find((l) => l.field === s.field);
-      i && (i.hidden = !s.visible);
+    for (const i of e.columns) {
+      const s = t.find((l) => l.field === i.field);
+      s && (s.hidden = !i.visible);
     }
   }
-  #oe() {
+  #te() {
     return this._rows.length <= this.virtualization.bypassThreshold;
   }
-  #ne(e) {
-    if (this.refreshVirtualWindow(!1), this.#t?.onScrollRender(), this.#R) {
+  #oe(e) {
+    if (this.refreshVirtualWindow(!1), this.#t?.onScrollRender(), this.#C) {
       const t = this.virtualization.container, n = {
         scrollTop: e,
         scrollLeft: t?.scrollLeft ?? 0,
@@ -1815,7 +1840,7 @@ class q extends HTMLElement {
     }
   }
   findHeaderRow() {
-    return this.#n.querySelector(".header-row");
+    return this.#o.querySelector(".header-row");
   }
   findRenderedRowElement(e) {
     return Array.from(this.bodyEl.querySelectorAll(".data-grid-row")).find((t) => {
@@ -1827,16 +1852,16 @@ class q extends HTMLElement {
    * Dispatch a cell click event to the plugin system.
    * Returns true if any plugin handled the event.
    */
-  dispatchCellClick(e, t, n, s) {
-    const i = this._rows[t], l = this._columns[n];
-    if (!i || !l) return !1;
+  dispatchCellClick(e, t, n, i) {
+    const s = this._rows[t], l = this._columns[n];
+    if (!s || !l) return !1;
     const r = {
-      row: i,
+      row: s,
       rowIndex: t,
       colIndex: n,
       field: l.field,
-      value: i[l.field],
-      cellEl: s,
+      value: s[l.field],
+      cellEl: i,
       originalEvent: e
     };
     return this.#t?.onCellClick(r) ?? !1;
@@ -1846,16 +1871,16 @@ class q extends HTMLElement {
    * Returns true if any plugin handled the event.
    */
   dispatchHeaderClick(e, t, n) {
-    const s = this._columns[t];
-    if (!s) return !1;
-    const i = {
+    const i = this._columns[t];
+    if (!i) return !1;
+    const s = {
       colIndex: t,
-      field: s.field,
-      column: s,
+      field: i.field,
+      column: i,
       headerEl: n,
       originalEvent: e
     };
-    return this.#t?.onHeaderClick(i) ?? !1;
+    return this.#t?.onHeaderClick(s) ?? !1;
   }
   /**
    * Dispatch a keyboard event to the plugin system.
@@ -1868,25 +1893,25 @@ class q extends HTMLElement {
    * Build a CellMouseEvent from a native MouseEvent.
    * Extracts cell/row information from the event target.
    */
-  #H(e, t) {
+  #D(e, t) {
     let n = null;
-    const s = e.composedPath?.();
-    if (s && s.length > 0 ? n = s[0] : n = e.target, n && !this.#n.contains(n)) {
-      const d = this.#n.elementFromPoint(e.clientX, e.clientY);
-      d && (n = d);
-    }
-    const i = n?.closest?.("[data-col]"), l = n?.closest?.(".data-grid-row"), r = n?.closest?.(".header-row");
-    let a, f, p, w, h, c;
-    return i && (a = parseInt(i.getAttribute("data-row") ?? "-1", 10), f = parseInt(i.getAttribute("data-col") ?? "-1", 10), a >= 0 && f >= 0 && (p = this._rows[a], c = this._columns[f], w = c?.field, h = p && w ? p[w] : void 0)), {
+    const i = e.composedPath?.();
+    if (i && i.length > 0 ? n = i[0] : n = e.target, n && !this.#o.contains(n)) {
+      const h = this.#o.elementFromPoint(e.clientX, e.clientY);
+      h && (n = h);
+    }
+    const s = n?.closest?.("[data-col]"), l = n?.closest?.(".data-grid-row"), r = n?.closest?.(".header-row");
+    let a, f, p, w, u, c;
+    return s && (a = parseInt(s.getAttribute("data-row") ?? "-1", 10), f = parseInt(s.getAttribute("data-col") ?? "-1", 10), a >= 0 && f >= 0 && (p = this._rows[a], c = this._columns[f], w = c?.field, u = p && w ? p[w] : void 0)), {
       type: t,
       row: p,
       rowIndex: a !== void 0 && a >= 0 ? a : void 0,
       colIndex: f !== void 0 && f >= 0 ? f : void 0,
       field: w,
-      value: h,
+      value: u,
       column: c,
       originalEvent: e,
-      cellElement: i ?? void 0,
+      cellElement: s ?? void 0,
       rowElement: l ?? void 0,
       isHeader: !!r,
       cell: a !== void 0 && f !== void 0 && a >= 0 && f >= 0 ? { row: a, col: f } : void 0
@@ -1895,25 +1920,25 @@ class q extends HTMLElement {
   /**
    * Handle mousedown events and dispatch to plugin system.
    */
-  #ie(e) {
-    const t = this.#H(e, "mousedown");
-    (this.#t?.onCellMouseDown(t) ?? !1) && (this.#_ = !0);
+  #ne(e) {
+    const t = this.#D(e, "mousedown");
+    (this.#t?.onCellMouseDown(t) ?? !1) && (this.#y = !0);
   }
   /**
    * Handle mousemove events (only when dragging).
    */
-  #se(e) {
-    if (!this.#_) return;
-    const t = this.#H(e, "mousemove");
+  #ie(e) {
+    if (!this.#y) return;
+    const t = this.#D(e, "mousemove");
     this.#t?.onCellMouseMove(t);
   }
   /**
    * Handle mouseup events.
    */
-  #le(e) {
-    if (!this.#_) return;
-    const t = this.#H(e, "mouseup");
-    this.#t?.onCellMouseUp(t), this.#_ = !1;
+  #se(e) {
+    if (!this.#y) return;
+    const t = this.#D(e, "mouseup");
+    this.#t?.onCellMouseUp(t), this.#y = !1;
   }
   // API consumed by internal utils (rows.ts)
   get changedRows() {
@@ -1926,20 +1951,20 @@ class q extends HTMLElement {
     this._changedRowIndices.clear(), e || this.#s("changed-rows-reset", { rows: this.changedRows, indices: this.changedRowIndices }), this.rowPool.forEach((t) => t.classList.remove("changed"));
   }
   async beginBulkEdit(e) {
-    this.#te(e, this._rows[e]);
+    this.#ee(e, this._rows[e]);
   }
   async commitActiveRowEdit() {
-    this.activeEditRows !== -1 && this.#D(this.activeEditRows, !1);
+    this.activeEditRows !== -1 && this.#O(this.activeEditRows, !1);
   }
   async ready() {
-    return this.#z;
+    return this.#H;
   }
   async forceLayout() {
-    this.#c(), await new Promise((e) => requestAnimationFrame(() => requestAnimationFrame(e)));
+    this.#d(), await new Promise((e) => requestAnimationFrame(() => requestAnimationFrame(e)));
   }
   /** Public method: returns a frozen snapshot of the merged effective configuration */
   async getConfig() {
-    return Object.freeze({ ...this.#o || {} });
+    return Object.freeze({ ...this.#n || {} });
   }
   // ---------------- Column Visibility API ----------------
   /**
@@ -1949,15 +1974,15 @@ class q extends HTMLElement {
    * @returns True if visibility was changed, false if column not found or locked
    */
   setColumnVisible(e, t) {
-    const n = this.#o.columns, s = n?.find((r) => r.field === e);
-    if (!s || !t && s.lockVisible || !t && (n ?? []).filter((a) => !a.hidden && a.field !== e).length === 0)
+    const n = this.#n.columns, i = n?.find((r) => r.field === e);
+    if (!i || !t && i.lockVisible || !t && (n ?? []).filter((a) => !a.hidden && a.field !== e).length === 0)
       return !1;
-    const i = !!s.hidden, l = !t;
-    return i !== l ? (s.hidden = l, this.#s("column-visibility", {
+    const s = !!i.hidden, l = !t;
+    return s !== l ? (i.hidden = l, this.#s("column-visibility", {
       field: e,
       visible: t,
       visibleColumns: (n ?? []).filter((r) => !r.hidden).map((r) => r.field)
-    }), this.rowPool.length = 0, this.bodyEl && (this.bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.#c(), this.requestStateChange(), !0) : !1;
+    }), this.rowPool.length = 0, this.bodyEl && (this.bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.#d(), this.requestStateChange(), !0) : !1;
   }
   /**
    * Toggle the visibility of a column.
@@ -1965,8 +1990,8 @@ class q extends HTMLElement {
    * @returns True if visibility was toggled, false if column not found or locked
    */
   toggleColumnVisibility(e) {
-    const s = !!this.#o.columns?.find((i) => i.field === e)?.hidden;
-    return this.setColumnVisible(e, s);
+    const i = !!this.#n.columns?.find((s) => s.field === e)?.hidden;
+    return this.setColumnVisible(e, i);
   }
   /**
    * Check if a column is currently visible.
@@ -1974,19 +1999,19 @@ class q extends HTMLElement {
    * @returns True if visible, false if hidden or not found
    */
   isColumnVisible(e) {
-    const n = this.#o.columns?.find((s) => s.field === e);
+    const n = this.#n.columns?.find((i) => i.field === e);
     return n ? !n.hidden : !1;
   }
   /**
    * Show all columns.
    */
   showAllColumns() {
-    const e = this.#o.columns;
+    const e = this.#n.columns;
     e?.some((n) => n.hidden) && (e?.forEach((n) => {
       n.hidden = !1;
     }), this.#s("column-visibility", {
       visibleColumns: (e ?? []).map((n) => n.field)
-    }), this.rowPool.length = 0, this.bodyEl && (this.bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.#c(), this.requestStateChange());
+    }), this.rowPool.length = 0, this.bodyEl && (this.bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.#d(), this.requestStateChange());
   }
   /**
    * Get list of all column fields (including hidden).
@@ -1995,7 +2020,7 @@ class q extends HTMLElement {
    * @returns Array of all field names with their visibility status
    */
   getAllColumns() {
-    return (this.#o.columns ?? []).map((t) => ({
+    return (this.#n.columns ?? []).map((t) => ({
       field: t.field,
       header: t.header || t.field,
       visible: !t.hidden,
@@ -2009,14 +2034,14 @@ class q extends HTMLElement {
    */
   setColumnOrder(e) {
     if (!e.length) return;
-    const t = new Map(this._columns.map((s) => [s.field, s])), n = [];
-    for (const s of e) {
-      const i = t.get(s);
-      i && (n.push(i), t.delete(s));
+    const t = new Map(this._columns.map((i) => [i.field, i])), n = [];
+    for (const i of e) {
+      const s = t.get(i);
+      s && (n.push(s), t.delete(i));
     }
-    for (const s of t.values())
-      n.push(s);
-    this._columns = n, this.#x(), this.updateTemplate(), this.refreshVirtualWindow(!0);
+    for (const i of t.values())
+      n.push(i);
+    this._columns = n, this.#S(), this.updateTemplate(), this.refreshVirtualWindow(!0);
   }
   /**
    * Get the current column order as an array of field names.
@@ -2039,7 +2064,7 @@ class q extends HTMLElement {
    * Use this to restore previously saved column state.
    */
   set columnState(e) {
-    e && (this.#d = e, this.#i && this.#re(e));
+    e && (this.#h = e, this.#i && this.#le(e));
   }
   /**
    * Get the current column state.
@@ -2050,10 +2075,10 @@ class q extends HTMLElement {
   /**
    * Apply column state internally.
    */
-  #re(e) {
-    (this.#o.columns ?? []).forEach((n) => {
+  #le(e) {
+    (this.#n.columns ?? []).forEach((n) => {
       n.hidden = !1;
-    }), this.#W(e), this.#c();
+    }), this.#K(e), this.#d();
   }
   /**
    * Request a state change event to be emitted.
@@ -2062,26 +2087,26 @@ class q extends HTMLElement {
    * The event is debounced to avoid excessive events during drag operations.
    */
   requestStateChange() {
-    this.#P || (this.#P = me(
+    this.#k || (this.#k = me(
       this,
       () => this.#t?.getAll() ?? [],
       (e) => this.#s("column-state-change", e)
-    )), this.#P();
+    )), this.#k();
   }
   /**
    * Reset column state to initial configuration.
    * Clears all user modifications (order, width, visibility, sort).
    */
   resetColumnState() {
-    this.#d = void 0, (this.#o.columns ?? []).forEach((n) => {
+    this.#h = void 0, (this.#n.columns ?? []).forEach((n) => {
       n.hidden = !1;
-    }), this.sortState = null, this.__originalOrder = [], this.#h(), this.#c();
+    }), this.sortState = null, this.__originalOrder = [], this.#u(), this.#d();
     const t = this.#t?.getAll() ?? [];
     for (const n of t)
       if (n.applyColumnState)
-        for (const s of this._columns)
-          n.applyColumnState(s.field, {
-            field: s.field,
+        for (const i of this._columns)
+          n.applyColumnState(i.field, {
+            field: i.field,
             order: 0,
             visible: !0
           });
@@ -2103,7 +2128,7 @@ class q extends HTMLElement {
       console.warn(`[tbw-grid] Tool panel "${e}" not found`);
       return;
     }
-    this.#e.activePanel && this.#e.activePanel !== e && this.closeToolPanel(), this.#e.activePanel = e, oe(this.#n, this.#e), ne(this.#n, this.#e), Ue(this.#n, this.#e), this.#s("tool-panel-open", { id: e });
+    this.#e.activePanel && this.#e.activePanel !== e && this.closeToolPanel(), this.#e.activePanel = e, oe(this.#o, this.#e), ne(this.#o, this.#e), Ue(this.#o, this.#e), this.#s("tool-panel-open", { id: e });
   }
   /**
    * Close the currently open tool panel.
@@ -2111,7 +2136,7 @@ class q extends HTMLElement {
   closeToolPanel() {
     if (!this.#e.activePanel) return;
     const e = this.#e.activePanel, t = this.#e.toolPanels.get(e);
-    this.#e.activePanelCleanup && (this.#e.activePanelCleanup(), this.#e.activePanelCleanup = null), t?.onClose?.(), this.#e.activePanel = null, oe(this.#n, this.#e), ne(this.#n, this.#e), this.#s("tool-panel-close", { id: e });
+    this.#e.activePanelCleanup && (this.#e.activePanelCleanup(), this.#e.activePanelCleanup = null), t?.onClose?.(), this.#e.activePanel = null, oe(this.#o, this.#e), ne(this.#o, this.#e), this.#s("tool-panel-close", { id: e });
   }
   /**
    * Toggle a tool panel open/closed.
@@ -2133,13 +2158,13 @@ class q extends HTMLElement {
       console.warn(`[tbw-grid] Tool panel "${e.id}" already registered`);
       return;
     }
-    this.#e.toolPanels.set(e.id, e), this.#a && this.#v();
+    this.#e.toolPanels.set(e.id, e), this.#c && this.#b();
   }
   /**
    * Unregister a custom tool panel.
    */
   unregisterToolPanel(e) {
-    this.#e.activePanel === e && this.closeToolPanel(), this.#e.toolPanels.delete(e), this.#a && this.#v();
+    this.#e.activePanel === e && this.closeToolPanel(), this.#e.toolPanels.delete(e), this.#c && this.#b();
   }
   /**
    * Get registered header content definitions.
@@ -2155,20 +2180,20 @@ class q extends HTMLElement {
       console.warn(`[tbw-grid] Header content "${e.id}" already registered`);
       return;
     }
-    this.#e.headerContents.set(e.id, e), this.#a && te(this.#n, this.#e);
+    this.#e.headerContents.set(e.id, e), this.#c && te(this.#o, this.#e);
   }
   /**
    * Unregister custom header content.
    */
   unregisterHeaderContent(e) {
     const t = this.#e.headerContentCleanups.get(e);
-    t && (t(), this.#e.headerContentCleanups.delete(e)), this.#e.headerContents.get(e)?.onDestroy?.(), this.#e.headerContents.delete(e), this.#n.querySelector(`[data-header-content="${e}"]`)?.remove();
+    t && (t(), this.#e.headerContentCleanups.delete(e)), this.#e.headerContents.get(e)?.onDestroy?.(), this.#e.headerContents.delete(e), this.#o.querySelector(`[data-header-content="${e}"]`)?.remove();
   }
   /**
    * Get all registered toolbar buttons.
    */
   getToolbarButtons() {
-    return Xe(this.#o?.shell, this.#e);
+    return Xe(this.#n?.shell, this.#e);
   }
   /**
    * Register a custom toolbar button programmatically.
@@ -2178,14 +2203,14 @@ class q extends HTMLElement {
       console.warn(`[tbw-grid] Toolbar button "${e.id}" already registered`);
       return;
     }
-    this.#e.toolbarButtons.set(e.id, e), this.#a && this.#v();
+    this.#e.toolbarButtons.set(e.id, e), this.#c && this.#b();
   }
   /**
    * Unregister a custom toolbar button.
    */
   unregisterToolbarButton(e) {
     const t = this.#e.toolbarButtonCleanups.get(e);
-    t && (t(), this.#e.toolbarButtonCleanups.delete(e)), this.#e.toolbarButtons.delete(e), this.#a && this.#v();
+    t && (t(), this.#e.toolbarButtonCleanups.delete(e)), this.#e.toolbarButtons.delete(e), this.#c && this.#b();
   }
   /**
    * Enable/disable a toolbar button by ID.
@@ -2193,21 +2218,21 @@ class q extends HTMLElement {
   setToolbarButtonDisabled(e, t) {
     const n = this.#e.toolbarButtons.get(e);
     n && (n.disabled = t);
-    const s = this.#n.querySelector(`[data-btn="${e}"]`);
-    s && (s.disabled = t);
+    const i = this.#o.querySelector(`[data-btn="${e}"]`);
+    i && (i.disabled = t);
   }
   /**
    * Re-parse light DOM shell elements and refresh shell header.
    * Call this after dynamically modifying <tbw-grid-header> children.
    */
   refreshShellHeader() {
-    this.#v();
+    this.#b();
   }
   /**
    * Internal shell header refresh.
    */
-  #v() {
-    ee(this, this.#e), this.#F(), this.#$();
+  #b() {
+    ee(this, this.#e), this.#W(), this.#B();
   }
   // ---------------- Virtual Window ----------------
   /**
@@ -2218,26 +2243,26 @@ class q extends HTMLElement {
     if (!this.bodyEl) return;
     const t = this._rows.length;
     if (!this.virtualization.enabled) {
-      this.#M(0, t), this.#m();
+      this.#M(0, t), this.#w();
       return;
     }
-    if (this.#oe()) {
-      this.virtualization.start = 0, this.virtualization.end = t, this.bodyEl.style.transform = "translateY(0px)", this.#M(0, t, this.__rowRenderEpoch), this.virtualization.totalHeightEl && (this.virtualization.totalHeightEl.style.height = `${t * this.virtualization.rowHeight}px`), this.setAttribute("aria-rowcount", String(t)), this.setAttribute("aria-colcount", String(this.visibleColumns.length)), this.#m();
+    if (this.#te()) {
+      this.virtualization.start = 0, this.virtualization.end = t, this.bodyEl.style.transform = "translateY(0px)", this.#M(0, t, this.__rowRenderEpoch), this.virtualization.totalHeightEl && (this.virtualization.totalHeightEl.style.height = `${t * this.virtualization.rowHeight}px`), this.setAttribute("aria-rowcount", String(t)), this.setAttribute("aria-colcount", String(this.visibleColumns.length)), this.#w();
       return;
     }
-    const n = this.virtualization.container ?? this, i = (this.virtualization.viewportEl ?? n).clientHeight, l = this.virtualization.rowHeight, r = n.scrollTop;
+    const n = this.virtualization.container ?? this, s = (this.virtualization.viewportEl ?? n).clientHeight, l = this.virtualization.rowHeight, r = n.scrollTop;
     let a = Math.floor(r / l);
     a < 0 && (a = 0);
-    const f = Math.ceil(i / l) + 2;
+    const f = Math.ceil(s / l) + 2;
     let p = a + f;
     p > t && (p = t), this.virtualization.start = a, this.virtualization.end = p, this.virtualization.totalHeightEl && (this.virtualization.totalHeightEl.style.height = `${t * l}px`);
     const w = -(r % l);
-    this.bodyEl.style.transform = `translateY(${w}px)`, this.#M(a, p, e ? ++this.__rowRenderEpoch : this.__rowRenderEpoch), this.setAttribute("aria-rowcount", String(t)), this.setAttribute("aria-colcount", String(this.visibleColumns.length)), e && this.#m();
+    this.bodyEl.style.transform = `translateY(${w}px)`, this.#M(a, p, e ? ++this.__rowRenderEpoch : this.__rowRenderEpoch), this.setAttribute("aria-rowcount", String(t)), this.setAttribute("aria-colcount", String(this.visibleColumns.length)), e && this.#w();
   }
   // ---------------- Render ----------------
-  #F() {
+  #W() {
     ee(this, this.#e);
-    const e = this.#o?.shell, t = Ke(e, this.#e), n = `
+    const e = this.#n?.shell, t = Ke(e, this.#e), n = `
       <div class="tbw-scroll-area">
         <div class="rows-body-wrapper">
           <div class="rows-body">
@@ -2257,15 +2282,15 @@ class q extends HTMLElement {
       </div>
     `;
     if (t) {
-      const s = We(e, this.#e), i = Fe(e, this.#e, n);
-      this.#n.innerHTML = `
+      const i = We(e, this.#e), s = Fe(e, this.#e, n);
+      this.#o.innerHTML = `
         <div class="tbw-grid-root has-shell">
-          ${s}
           ${i}
+          ${s}
         </div>
-      `, this.#ae(), this.#a = !0;
+      `, this.#re(), this.#c = !0;
     } else
-      this.#n.innerHTML = `
+      this.#o.innerHTML = `
         <div class="tbw-grid-root">
           <div class="tbw-grid-content">
             ${n}
@@ -2276,24 +2301,24 @@ class q extends HTMLElement {
   /**
    * Set up shell event listeners after render.
    */
-  #ae() {
-    Ve(this.#n, this.#o?.shell, this.#e, {
+  #re() {
+    Ve(this.#o, this.#n?.shell, this.#e, {
       onPanelToggle: (e) => this.toggleToolPanel(e),
       onPanelClose: () => this.closeToolPanel(),
-      onToolbarButtonClick: (e) => this.#ce(e)
+      onToolbarButtonClick: (e) => this.#ae(e)
     });
   }
   /**
    * Handle toolbar button click (for config buttons with action).
    */
-  #ce(e) {
-    const n = (this.#o?.shell?.header?.toolbarButtons ?? []).find((i) => i.id === e);
+  #ae(e) {
+    const n = (this.#n?.shell?.header?.toolbarButtons ?? []).find((s) => s.id === e);
     if (n?.action) {
       n.action();
       return;
     }
-    const s = this.#e.toolbarButtons.get(e);
-    s?.action && s.action();
+    const i = this.#e.toolbarButtons.get(e);
+    i?.action && i.action();
   }
 }
 customElements.get(q.tagName) || customElements.define(q.tagName, q);
@@ -2396,6 +2421,26 @@ class ue {
   get shadowRoot() {
     return this.grid?.shadowRoot ?? null;
   }
+  /**
+   * Get the disconnect signal for event listener cleanup.
+   * This signal is aborted when the grid disconnects from the DOM.
+   * Use this when adding event listeners that should be cleaned up automatically.
+   *
+   * Best for:
+   * - Document/window-level listeners added in attach()
+   * - Listeners on the grid element itself
+   * - Any listener that should persist across renders
+   *
+   * Not needed for:
+   * - Listeners on elements created in afterRender() (removed with element)
+   *
+   * @example
+   * element.addEventListener('click', handler, { signal: this.disconnectSignal });
+   * document.addEventListener('keydown', handler, { signal: this.disconnectSignal });
+   */
+  get disconnectSignal() {
+    return this.grid?.disconnectSignal;
+  }
   /**
    * Log a warning message.
    */
@@ -2403,7 +2448,7 @@ class ue {
     console.warn(`[tbw-grid:${this.name}] ${e}`);
   }
 }
-function z(o) {
+function N(o) {
   return {
     startRow: Math.min(o.startRow, o.endRow),
     startCol: Math.min(o.startCol, o.endCol),
@@ -2412,7 +2457,7 @@ function z(o) {
   };
 }
 function Ze(o) {
-  const e = z(o);
+  const e = N(o);
   return {
     from: { row: e.startRow, col: e.startCol },
     to: { row: e.endRow, col: e.endCol }
@@ -2422,17 +2467,17 @@ function K(o) {
   return o.map(Ze);
 }
 function Je(o, e, t) {
-  const n = z(t);
+  const n = N(t);
   return o >= n.startRow && o <= n.endRow && e >= n.startCol && e <= n.endCol;
 }
 function ie(o, e, t) {
   return t.some((n) => Je(o, e, n));
 }
 function Qe(o) {
-  const e = [], t = z(o);
+  const e = [], t = N(o);
   for (let n = t.startRow; n <= t.endRow; n++)
-    for (let s = t.startCol; s <= t.endCol; s++)
-      e.push({ row: n, col: s });
+    for (let i = t.startCol; i <= t.endCol; i++)
+      e.push({ row: n, col: i });
   return e;
 }
 function et(o) {
@@ -2462,9 +2507,9 @@ function tt(o, e, t) {
       ]
     };
   if (o === "row" && e.selected.size > 0) {
-    const n = [...e.selected].map((s) => ({
-      from: { row: s, col: 0 },
-      to: { row: s, col: t - 1 }
+    const n = [...e.selected].map((i) => ({
+      from: { row: i, col: 0 },
+      to: { row: i, col: t - 1 }
     }));
     return { mode: o, ranges: n };
   }
@@ -2496,13 +2541,13 @@ class st extends ue {
   }
   // ===== Event Handlers =====
   onCellClick(e) {
-    const { rowIndex: t, colIndex: n, originalEvent: s } = e, { mode: i } = this.config;
-    if (i === "cell")
+    const { rowIndex: t, colIndex: n, originalEvent: i } = e, { mode: s } = this.config;
+    if (s === "cell")
       return this.selectedCell = { row: t, col: n }, this.emit("selection-change", this.#i()), this.requestAfterRender(), !1;
-    if (i === "row")
+    if (s === "row")
       return this.selected.clear(), this.selected.add(t), this.lastSelected = t, this.emit("selection-change", this.#i()), this.requestAfterRender(), !1;
-    if (i === "range") {
-      const l = s.shiftKey, r = s.ctrlKey || s.metaKey;
+    if (s === "range") {
+      const l = i.shiftKey, r = i.ctrlKey || i.metaKey;
       if (l && this.cellAnchor) {
         const a = se(this.cellAnchor, { row: t, col: n });
         r ? this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = a : this.ranges.push(a) : this.ranges = [a], this.activeRange = a;
@@ -2532,15 +2577,15 @@ class st extends ue {
     if (e.key === "Escape")
       return t === "cell" ? this.selectedCell = null : t === "row" ? (this.selected.clear(), this.anchor = null) : t === "range" && (this.ranges = [], this.activeRange = null, this.cellAnchor = null), this.emit("selection-change", this.#i()), this.requestAfterRender(), !0;
     if (t === "range" && e.key === "a" && (e.ctrlKey || e.metaKey)) {
-      const n = this.rows.length, s = this.columns.length;
-      if (n > 0 && s > 0) {
-        const i = {
+      const n = this.rows.length, i = this.columns.length;
+      if (n > 0 && i > 0) {
+        const s = {
           startRow: 0,
           startCol: 0,
           endRow: n - 1,
-          endCol: s - 1
+          endCol: i - 1
         };
-        return this.ranges = [i], this.activeRange = i, this.emit("selection-change", this.#i()), this.requestAfterRender(), !0;
+        return this.ranges = [s], this.activeRange = s, this.emit("selection-change", this.#i()), this.requestAfterRender(), !0;
       }
     }
     return !1;
@@ -2551,13 +2596,13 @@ class st extends ue {
     this.isDragging = !0;
     const t = e.rowIndex, n = e.colIndex;
     this.cellAnchor = { row: t, col: n }, e.originalEvent.ctrlKey || e.originalEvent.metaKey || (this.ranges = []);
-    const i = {
+    const s = {
       startRow: t,
       startCol: n,
       endRow: t,
       endCol: n
     };
-    return this.ranges.push(i), this.activeRange = i, this.emit("selection-change", this.#i()), this.requestAfterRender(), !0;
+    return this.ranges.push(s), this.activeRange = s, this.emit("selection-change", this.#i()), this.requestAfterRender(), !0;
   }
   onCellMouseMove(e) {
     if (this.config.mode !== "range" || !this.isDragging || !this.cellAnchor || e.rowIndex === void 0 || e.colIndex === void 0 || e.rowIndex < 0) return;
@@ -2572,40 +2617,40 @@ class st extends ue {
    * Apply selection classes to visible cells/rows.
    * Shared by afterRender and onScrollRender.
    */
-  #n() {
+  #o() {
     const e = this.shadowRoot;
     if (!e) return;
     const { mode: t } = this.config;
-    e.querySelectorAll(".cell").forEach((i) => {
-      i.classList.remove("selected", "top", "bottom", "first", "last");
+    e.querySelectorAll(".cell").forEach((s) => {
+      s.classList.remove("selected", "top", "bottom", "first", "last");
     });
-    const s = e.querySelectorAll(".data-grid-row");
-    if (s.forEach((i) => {
-      i.classList.remove("selected", "row-focus");
-    }), t === "row" && s.forEach((i) => {
-      const l = i.querySelector(".cell[data-row]"), r = parseInt(l?.getAttribute("data-row") ?? "-1", 10);
-      r >= 0 && this.selected.has(r) && (i.classList.add("selected", "row-focus"), i.querySelectorAll(".cell-focus").forEach((a) => a.classList.remove("cell-focus")));
+    const i = e.querySelectorAll(".data-grid-row");
+    if (i.forEach((s) => {
+      s.classList.remove("selected", "row-focus");
+    }), t === "row" && i.forEach((s) => {
+      const l = s.querySelector(".cell[data-row]"), r = parseInt(l?.getAttribute("data-row") ?? "-1", 10);
+      r >= 0 && this.selected.has(r) && (s.classList.add("selected", "row-focus"), s.querySelectorAll(".cell-focus").forEach((a) => a.classList.remove("cell-focus")));
     }), t === "range" && this.ranges.length > 0) {
-      const i = this.activeRange ? z(this.activeRange) : null;
+      const s = this.activeRange ? N(this.activeRange) : null;
       e.querySelectorAll(".cell[data-row][data-col]").forEach((r) => {
         const a = parseInt(r.getAttribute("data-row") ?? "-1", 10), f = parseInt(r.getAttribute("data-col") ?? "-1", 10);
-        a >= 0 && f >= 0 && ie(a, f, this.ranges) && (r.classList.add("selected"), r.classList.remove("cell-focus"), i && (a === i.startRow && r.classList.add("top"), a === i.endRow && r.classList.add("bottom"), f === i.startCol && r.classList.add("first"), f === i.endCol && r.classList.add("last")));
+        a >= 0 && f >= 0 && ie(a, f, this.ranges) && (r.classList.add("selected"), r.classList.remove("cell-focus"), s && (a === s.startRow && r.classList.add("top"), a === s.endRow && r.classList.add("bottom"), f === s.startCol && r.classList.add("first"), f === s.endCol && r.classList.add("last")));
       });
     }
-    t === "cell" && this.selectedCell && e.querySelectorAll(".cell-focus").forEach((i) => i.classList.remove("cell-focus"));
+    t === "cell" && this.selectedCell && e.querySelectorAll(".cell-focus").forEach((s) => s.classList.remove("cell-focus"));
   }
   afterRender() {
     const e = this.shadowRoot;
     if (!e) return;
     const t = e.children[0], { mode: n } = this.config;
-    this.grid.setAttribute("data-selection-mode", n), t && t.classList.toggle("selecting", this.isDragging), this.#n();
+    this.grid.setAttribute("data-selection-mode", n), t && t.classList.toggle("selecting", this.isDragging), this.#o();
   }
   /**
    * Called after scroll-triggered row rendering.
    * Reapplies selection classes to recycled DOM elements.
    */
   onScrollRender() {
-    this.#n();
+    this.#o();
   }
   // ===== Public API =====
   /**
@@ -2708,19 +2753,19 @@ class st extends ue {
 function G(o, e, t) {
   return o.id !== void 0 ? String(o.id) : t ? `${t}-${e}` : String(e);
 }
-function fe(o, e, t, n = null, s = 0) {
-  const i = e.childrenField ?? "children", l = [];
+function fe(o, e, t, n = null, i = 0) {
+  const s = e.childrenField ?? "children", l = [];
   for (let r = 0; r < o.length; r++) {
-    const a = o[r], f = G(a, r, n), p = a[i], w = Array.isArray(p) && p.length > 0, h = t.has(f);
+    const a = o[r], f = G(a, r, n), p = a[s], w = Array.isArray(p) && p.length > 0, u = t.has(f);
     if (l.push({
       key: f,
       data: a,
-      depth: s,
+      depth: i,
       hasChildren: w,
-      isExpanded: h,
+      isExpanded: u,
       parentKey: n
-    }), w && h) {
-      const c = fe(p, e, t, f, s + 1);
+    }), w && u) {
+      const c = fe(p, e, t, f, i + 1);
       l.push(...c);
     }
   }
@@ -2731,29 +2776,29 @@ function le(o, e) {
   return t.has(e) ? t.delete(e) : t.add(e), t;
 }
 function W(o, e, t = null, n = 0) {
-  const s = e.childrenField ?? "children", i = /* @__PURE__ */ new Set();
+  const i = e.childrenField ?? "children", s = /* @__PURE__ */ new Set();
   for (let l = 0; l < o.length; l++) {
-    const r = o[l], a = G(r, l, t), f = r[s];
+    const r = o[l], a = G(r, l, t), f = r[i];
     if (Array.isArray(f) && f.length > 0) {
-      i.add(a);
+      s.add(a);
       const p = W(f, e, a, n + 1);
-      for (const w of p) i.add(w);
+      for (const w of p) s.add(w);
     }
   }
-  return i;
+  return s;
 }
 function ot() {
   return /* @__PURE__ */ new Set();
 }
-function pe(o, e, t, n = null, s = 0) {
-  const i = t.childrenField ?? "children";
+function pe(o, e, t, n = null, i = 0) {
+  const s = t.childrenField ?? "children";
   for (let l = 0; l < o.length; l++) {
     const r = o[l], a = G(r, l, n);
     if (a === e)
       return [a];
-    const f = r[i];
+    const f = r[s];
     if (Array.isArray(f) && f.length > 0) {
-      const p = pe(f, e, t, a, s + 1);
+      const p = pe(f, e, t, a, i + 1);
       if (p)
         return [a, ...p];
     }
@@ -2761,12 +2806,12 @@ function pe(o, e, t, n = null, s = 0) {
   return null;
 }
 function nt(o, e, t, n) {
-  const s = pe(o, e, t);
-  if (!s) return n;
-  const i = new Set(n);
-  for (let l = 0; l < s.length - 1; l++)
-    i.add(s[l]);
-  return i;
+  const i = pe(o, e, t);
+  if (!i) return n;
+  const s = new Set(n);
+  for (let l = 0; l < i.length - 1; l++)
+    s.add(i[l]);
+  return s;
 }
 function re(o, e = "children") {
   if (!Array.isArray(o) || o.length === 0) return !1;
@@ -2840,28 +2885,31 @@ class lt extends ue {
   }
   processColumns(e) {
     if (this.flattenedRows.length === 0) return [...e];
-    const t = this.config.indentWidth ?? 20, n = this.config.showExpandIcons ?? !0, s = [...e];
-    if (s.length > 0) {
-      const i = { ...s[0] }, l = i.viewRenderer;
-      i.viewRenderer = (r) => {
-        const { value: a, row: f, column: p } = r, w = f.__treeDepth ?? 0, h = f.__treeHasChildren ?? !1, c = f.__treeExpanded ?? !1, d = document.createElement("span");
-        if (d.style.display = "flex", d.style.alignItems = "center", d.style.paddingLeft = `${w * t}px`, h && n) {
-          const b = document.createElement("span");
-          b.className = "tree-toggle", b.textContent = c ? "▼" : "▶", b.style.cursor = "pointer", b.style.marginRight = "4px", b.style.fontSize = "10px", b.setAttribute("data-tree-key", f.__treeKey), d.appendChild(b);
+    const t = this.config.indentWidth ?? 20, n = this.config.showExpandIcons ?? !0, i = [...e];
+    if (i.length > 0) {
+      const s = { ...i[0] }, l = s.viewRenderer;
+      if (l?.__treeWrapped)
+        return i;
+      const r = (a) => {
+        const { value: f, row: p, column: w } = a, u = p.__treeDepth ?? 0, c = p.__treeHasChildren ?? !1, h = p.__treeExpanded ?? !1, d = document.createElement("span");
+        if (d.style.display = "flex", d.style.alignItems = "center", d.style.paddingLeft = `${u * t}px`, c && n) {
+          const m = document.createElement("span");
+          m.className = "tree-toggle", m.textContent = h ? "▼" : "▶", m.style.cursor = "pointer", m.style.marginRight = "4px", m.style.fontSize = "10px", m.setAttribute("data-tree-key", p.__treeKey), d.appendChild(m);
         } else if (n) {
-          const b = document.createElement("span");
-          b.style.width = "14px", b.style.display = "inline-block", d.appendChild(b);
+          const m = document.createElement("span");
+          m.style.width = "14px", m.style.display = "inline-block", d.appendChild(m);
         }
-        const u = document.createElement("span");
+        const g = document.createElement("span");
         if (l) {
-          const b = l(r);
-          b instanceof Node ? u.appendChild(b) : u.textContent = String(b ?? a ?? "");
+          const m = l(a);
+          m instanceof Node ? g.appendChild(m) : g.textContent = String(m ?? f ?? "");
         } else
-          u.textContent = String(a ?? "");
-        return d.appendChild(u), d;
-      }, s[0] = i;
+          g.textContent = String(f ?? "");
+        return d.appendChild(g), d;
+      };
+      r.__treeWrapped = !0, s.viewRenderer = r, i[0] = s;
     }
-    return s;
+    return i;
   }
   // ===== Event Handlers =====
   onCellClick(e) {
@@ -2869,12 +2917,12 @@ class lt extends ue {
     if (!t?.classList.contains("tree-toggle")) return !1;
     const n = t.getAttribute("data-tree-key");
     if (!n) return !1;
-    const s = this.rowKeyMap.get(n);
-    return s ? (this.expandedKeys = le(this.expandedKeys, n), this.emit("tree-expand", {
+    const i = this.rowKeyMap.get(n);
+    return i ? (this.expandedKeys = le(this.expandedKeys, n), this.emit("tree-expand", {
       key: n,
-      row: s.data,
+      row: i.data,
       expanded: this.expandedKeys.has(n),
-      depth: s.depth
+      depth: i.depth
     }), this.requestRender(), !0) : !1;
   }
   // ===== Public API =====
@@ -2950,7 +2998,7 @@ class lt extends ue {
     }
   `;
 }
-const C = {
+const y = {
   // Root structure
   ROOT: "tbw-grid-root",
   HEADER: "header",
@@ -3003,22 +3051,22 @@ const C = {
   TREE_LEVEL: "data-tree-level",
   STICKY: "data-sticky"
 }, rt = {
-  ROOT: `.${C.ROOT}`,
-  HEADER: `.${C.HEADER}`,
-  HEADER_ROW: `.${C.HEADER_ROW}`,
-  HEADER_CELL: `.${C.HEADER_CELL}`,
-  ROWS_VIEWPORT: `.${C.ROWS_VIEWPORT}`,
-  ROWS_CONTAINER: `.${C.ROWS_CONTAINER}`,
-  DATA_ROW: `.${C.DATA_ROW}`,
-  DATA_CELL: `.${C.DATA_CELL}`,
-  GROUP_ROW: `.${C.GROUP_ROW}`,
+  ROOT: `.${y.ROOT}`,
+  HEADER: `.${y.HEADER}`,
+  HEADER_ROW: `.${y.HEADER_ROW}`,
+  HEADER_CELL: `.${y.HEADER_CELL}`,
+  ROWS_VIEWPORT: `.${y.ROWS_VIEWPORT}`,
+  ROWS_CONTAINER: `.${y.ROWS_CONTAINER}`,
+  DATA_ROW: `.${y.DATA_ROW}`,
+  DATA_CELL: `.${y.DATA_CELL}`,
+  GROUP_ROW: `.${y.GROUP_ROW}`,
   // By data attribute
-  ROW_BY_INDEX: (o) => `.${C.DATA_ROW}[${H.ROW_INDEX}="${o}"]`,
-  CELL_BY_FIELD: (o) => `.${C.DATA_CELL}[${H.FIELD}="${o}"]`,
-  CELL_AT: (o, e) => `.${C.DATA_ROW}[${H.ROW_INDEX}="${o}"] .${C.DATA_CELL}[${H.COL_INDEX}="${e}"]`,
+  ROW_BY_INDEX: (o) => `.${y.DATA_ROW}[${H.ROW_INDEX}="${o}"]`,
+  CELL_BY_FIELD: (o) => `.${y.DATA_CELL}[${H.FIELD}="${o}"]`,
+  CELL_AT: (o, e) => `.${y.DATA_ROW}[${H.ROW_INDEX}="${o}"] .${y.DATA_CELL}[${H.COL_INDEX}="${e}"]`,
   // State selectors
-  SELECTED_ROWS: `.${C.DATA_ROW}.${C.SELECTED}`,
-  EDITING_CELL: `.${C.DATA_CELL}.${C.EDITING}`
+  SELECTED_ROWS: `.${y.DATA_ROW}.${y.SELECTED}`,
+  EDITING_CELL: `.${y.DATA_CELL}.${y.EDITING}`
 }, at = {
   // Colors
   COLOR_BG: "--tbw-color-bg",
@@ -3086,7 +3134,7 @@ const C = {
 }, I = {
   sum: (o, e) => o.reduce((t, n) => t + (Number(n[e]) || 0), 0),
   avg: (o, e) => {
-    const t = o.reduce((n, s) => n + (Number(s[e]) || 0), 0);
+    const t = o.reduce((n, i) => n + (Number(i[e]) || 0), 0);
     return o.length ? t / o.length : 0;
   },
   count: (o) => o.length,
@@ -3094,7 +3142,7 @@ const C = {
   max: (o, e) => Math.max(...o.map((t) => Number(t[e]) || -1 / 0)),
   first: (o, e) => o[0]?.[e],
   last: (o, e) => o[o.length - 1]?.[e]
-}, P = /* @__PURE__ */ new Map(), S = {
+}, P = /* @__PURE__ */ new Map(), x = {
   /**
    * Register a custom aggregator function.
    */
@@ -3118,8 +3166,8 @@ const C = {
    * Run an aggregator on a set of rows.
    */
   run(o, e, t, n) {
-    const s = this.get(o);
-    return s ? s(e, t, n) : void 0;
+    const i = this.get(o);
+    return i ? i(e, t, n) : void 0;
   },
   /**
    * Check if an aggregator exists.
@@ -3133,14 +3181,14 @@ const C = {
   list() {
     return [...Object.keys(I), ...P.keys()];
   }
-}, ht = S.register.bind(S), ut = S.unregister.bind(S), ft = S.get.bind(S), pt = S.run.bind(S), wt = S.list.bind(S);
+}, ht = x.register.bind(x), ut = x.unregister.bind(x), ft = x.get.bind(x), pt = x.run.bind(x), wt = x.list.bind(x);
 export {
   ue as BaseGridPlugin,
   ct as DGEvents,
   q as DataGridElement,
-  O as FitModeEnum,
+  M as FitModeEnum,
   at as GridCSSVars,
-  C as GridClasses,
+  y as GridClasses,
   H as GridDataAttrs,
   q as GridElement,
   rt as GridSelectors,
@@ -3148,7 +3196,7 @@ export {
   Ye as PluginManager,
   st as SelectionPlugin,
   lt as TreePlugin,
-  S as aggregatorRegistry,
+  x as aggregatorRegistry,
   ft as getAggregator,
   wt as listAggregators,
   ht as registerAggregator,