@toolbox-web/grid 0.0.4 → 0.0.5

package/all.js

@@ -1,33 +1,33 @@
 import { BaseGridPlugin as y, runAggregator as X, getAggregator as xe } from "./index.js";
-import { DGEvents as Pt, DataGridElement as Dt, FitModeEnum as Bt, GridCSSVars as Ht, GridClasses as Ot, GridDataAttrs as Wt, DataGridElement as Kt, GridSelectors as Vt, PluginEvents as Gt, SelectionPlugin as zt, TreePlugin as $t } from "./index.js";
+import { DGEvents as Pt, DataGridElement as Dt, FitModeEnum as Bt, GridCSSVars as Ot, GridClasses as Ht, GridDataAttrs as Wt, DataGridElement as Kt, GridSelectors as Vt, PluginEvents as Gt, SelectionPlugin as zt, TreePlugin as $t } from "./index.js";
 function ve(i, e, t, n) {
   if (n.processCell)
     return n.processCell(i, e, t);
   if (i == null) return "";
   if (i instanceof Date) return i.toISOString();
   if (typeof i == "object") return JSON.stringify(i);
-  const r = String(i), o = n.delimiter ?? "	", s = n.newline ?? `
+  const o = String(i), r = n.delimiter ?? "	", s = n.newline ?? `
 `;
-  return n.quoteStrings || r.includes(o) || r.includes(s) || r.includes('"') ? `"${r.replace(/"/g, '""')}"` : r;
+  return n.quoteStrings || o.includes(r) || o.includes(s) || o.includes('"') ? `"${o.replace(/"/g, '""')}"` : o;
 }
 function F(i) {
-  const { rows: e, columns: t, selectedIndices: n, config: r } = i, o = r.delimiter ?? "	", s = r.newline ?? `
+  const { rows: e, columns: t, selectedIndices: n, config: o } = i, r = o.delimiter ?? "	", s = o.newline ?? `
 `, l = t.filter((u) => !u.hidden && !u.field.startsWith("__")), a = [];
-  if (r.includeHeaders) {
+  if (o.includeHeaders) {
     const u = l.map((h) => {
       const f = h.header || h.field;
-      return f.includes(o) || f.includes(s) || f.includes('"') ? `"${f.replace(/"/g, '""')}"` : f;
+      return f.includes(r) || f.includes(s) || f.includes('"') ? `"${f.replace(/"/g, '""')}"` : f;
     });
-    a.push(u.join(o));
+    a.push(u.join(r));
   }
   const d = [...n instanceof Set ? [...n] : n].sort((u, h) => u - h);
   for (const u of d) {
     const h = e[u];
     if (!h) continue;
     const f = l.map(
-      (g) => ve(h[g.field], g.field, h, r)
+      (g) => ve(h[g.field], g.field, h, o)
     );
-    a.push(f.join(o));
+    a.push(f.join(r));
   }
   return a.join(s);
 }
@@ -43,15 +43,15 @@ async function N(i) {
 }
 function J(i, e) {
   const t = e.delimiter ?? "	", n = e.newline ?? `
-`, r = i.replace(/\r\n/g, `
+`, o = i.replace(/\r\n/g, `
 `).replace(/\r/g, `
-`), o = [];
+`), r = [];
   let s = [], l = "", a = !1;
-  for (let c = 0; c < r.length; c++) {
-    const d = r[c];
-    d === '"' && !a ? a = !0 : d === '"' && a ? r[c + 1] === '"' ? (l += '"', c++) : a = !1 : d === t && !a ? (s.push(l), l = "") : d === n && !a ? (s.push(l), l = "", (s.length > 1 || s.some((u) => u.trim() !== "")) && o.push(s), s = []) : l += d;
+  for (let c = 0; c < o.length; c++) {
+    const d = o[c];
+    d === '"' && !a ? a = !0 : d === '"' && a ? o[c + 1] === '"' ? (l += '"', c++) : a = !1 : d === t && !a ? (s.push(l), l = "") : d === n && !a ? (s.push(l), l = "", (s.length > 1 || s.some((u) => u.trim() !== "")) && r.push(s), s = []) : l += d;
   }
-  return s.push(l), (s.length > 1 || s.some((c) => c.trim() !== "")) && o.push(s), o;
+  return s.push(l), (s.length > 1 || s.some((c) => c.trim() !== "")) && r.push(s), r;
 }
 async function Q() {
   try {
@@ -91,9 +91,9 @@ class vt extends y {
    * Handle copy operation
    */
   #t(e) {
-    const t = this.#e(), n = t?.getSelectedRows() ?? [], r = n.length > 0, o = t?.getRanges() ?? [], s = o.length > 0, l = t?.getSelectedCell() != null;
+    const t = this.#e(), n = t?.getSelectedRows() ?? [], o = n.length > 0, r = t?.getRanges() ?? [], s = r.length > 0, l = t?.getSelectedCell() != null;
     let a, c, d;
-    if (r && t)
+    if (o && t)
       a = F({
         rows: this.rows,
         columns: [...this.columns],
@@ -101,7 +101,7 @@ class vt extends y {
         config: this.config
       }), c = n.length, d = this.columns.filter((u) => !u.hidden && !u.field.startsWith("__")).length;
     else if (s && t) {
-      const u = o[o.length - 1], h = this.#o({
+      const u = r[r.length - 1], h = this.#r({
         startRow: u.from.row,
         startCol: u.from.col,
         endRow: u.to.row,
@@ -109,7 +109,7 @@ class vt extends y {
       });
       a = h.text, c = h.rowCount, d = h.columnCount;
     } else if (l && t) {
-      const u = t.getSelectedCell(), h = this.#r(u.row, u.col);
+      const u = t.getSelectedCell(), h = this.#o(u.row, u.col);
       if (!h) return;
       a = h.text, c = 1, d = 1;
     } else {
@@ -148,25 +148,25 @@ class vt extends y {
   /**
    * Build text for a single cell by row/col index.
    */
-  #r(e, t) {
+  #o(e, t) {
     const n = this.rows[e];
     if (!n) return null;
-    const r = this.columns[t];
-    if (!r) return null;
-    const o = n[r.field], s = r.header || r.field;
+    const o = this.columns[t];
+    if (!o) return null;
+    const r = n[o.field], s = o.header || o.field;
     let l;
     if (this.config.includeHeaders) {
-      const a = o == null ? "" : String(o);
+      const a = r == null ? "" : String(r);
       l = `${s}: ${a}`;
     } else
-      l = o == null ? "" : String(o);
+      l = r == null ? "" : String(r);
     return { text: l };
   }
   /**
    * Build text for a rectangular range of cells.
    */
-  #o(e) {
-    const { startRow: t, startCol: n, endRow: r, endCol: o } = e, s = Math.min(t, r), l = Math.max(t, r), a = Math.min(n, o), c = Math.max(n, o), d = this.config.delimiter ?? "	", u = this.config.newline ?? `
+  #r(e) {
+    const { startRow: t, startCol: n, endRow: o, endCol: r } = e, s = Math.min(t, o), l = Math.max(t, o), a = Math.min(n, r), c = Math.max(n, r), d = this.config.delimiter ?? "	", u = this.config.newline ?? `
 `, h = [], f = this.columns.slice(a, c + 1);
     if (this.config.includeHeaders) {
       const g = f.map((m) => m.header || m.field);
@@ -196,11 +196,11 @@ class vt extends y {
     if (!t) return null;
     const n = t.dataset.fieldCache;
     if (!n) return null;
-    const r = t.dataset.row;
-    if (!r) return null;
-    const o = parseInt(r, 10);
-    if (isNaN(o)) return null;
-    const s = this.rows[o];
+    const o = t.dataset.row;
+    if (!o) return null;
+    const r = parseInt(o, 10);
+    if (isNaN(r)) return null;
+    const s = this.rows[r];
     if (!s) return null;
     const l = s[n], c = this.columns.find((u) => u.field === n)?.header || n;
     let d;
@@ -277,32 +277,32 @@ function te(i) {
 function ne(i) {
   return i.reduce((e, t) => e + G(t.width), 0);
 }
-function ye(i, e, t, n, r) {
-  const o = t.length;
-  if (o === 0)
+function ye(i, e, t, n, o) {
+  const r = t.length;
+  if (r === 0)
     return { startCol: 0, endCol: 0, visibleColumns: [] };
   let s = Ce(i, t, n);
-  s = Math.max(0, s - r);
+  s = Math.max(0, s - o);
   const l = i + e;
   let a = s;
-  for (let d = s; d < o; d++) {
+  for (let d = s; d < r; d++) {
     if (t[d] >= l) {
       a = d - 1;
       break;
     }
     a = d;
   }
-  a = Math.min(o - 1, a + r);
+  a = Math.min(r - 1, a + o);
   const c = [];
   for (let d = s; d <= a; d++)
     c.push(d);
   return { startCol: s, endCol: a, visibleColumns: c };
 }
 function Ce(i, e, t) {
-  let n = 0, r = e.length - 1;
-  for (; n < r; ) {
-    const o = Math.floor((n + r) / 2);
-    e[o] + t[o] <= i ? n = o + 1 : r = o;
+  let n = 0, o = e.length - 1;
+  for (; n < o; ) {
+    const r = Math.floor((n + o) / 2);
+    e[r] + t[r] <= i ? n = r + 1 : o = r;
   }
   return n;
 }
@@ -342,25 +342,25 @@ class yt extends y {
     const t = this.config.enabled && Se(e.length, this.config.threshold ?? 30, this.config.autoEnable ?? !0);
     if (this.isVirtualized = t ?? !1, this.columnWidths = ee(e), this.columnOffsets = te(e), this.totalWidth = ne(e), !t)
       return this.startCol = 0, this.endCol = e.length - 1, [...e];
-    const n = this.grid.clientWidth || 800, r = ye(
+    const n = this.grid.clientWidth || 800, o = ye(
       this.scrollLeft,
       n,
       this.columnOffsets,
       this.columnWidths,
       this.config.overscan ?? 3
     );
-    return this.startCol = r.startCol, this.endCol = r.endCol, r.visibleColumns.map((o) => e[o]);
+    return this.startCol = o.startCol, this.endCol = o.endCol, o.visibleColumns.map((r) => e[r]);
   }
   afterRender() {
     if (!this.isVirtualized) return;
     const e = this.shadowRoot;
     if (!e) return;
-    const t = this.columnOffsets[this.startCol] ?? 0, n = e.querySelector(".header-row"), r = e.querySelectorAll(".data-grid-row");
-    n && (n.style.paddingLeft = `${t}px`), r.forEach((s) => {
+    const t = this.columnOffsets[this.startCol] ?? 0, n = e.querySelector(".header-row"), o = e.querySelectorAll(".data-grid-row");
+    n && (n.style.paddingLeft = `${t}px`), o.forEach((s) => {
       s.style.paddingLeft = `${t}px`;
     });
-    const o = e.querySelector(".rows-viewport .rows");
-    o && (o.style.width = `${this.totalWidth}px`);
+    const r = e.querySelector(".rows-viewport .rows");
+    r && (r.style.width = `${this.totalWidth}px`);
   }
   onScroll(e) {
     !this.isVirtualized || Math.abs(e.scrollLeft - this.scrollLeft) < 1 || (this.scrollLeft = e.scrollLeft, this.requestRender());
@@ -409,46 +409,46 @@ function Re(i, e) {
 function V(i, e, t) {
   const n = document.createElement("div");
   n.className = "tbw-context-menu", n.setAttribute("role", "menu");
-  for (const r of i) {
-    if (r.separator) {
+  for (const o of i) {
+    if (o.separator) {
       const a = document.createElement("div");
       a.className = "tbw-context-menu-separator", a.setAttribute("role", "separator"), n.appendChild(a);
       continue;
     }
-    const o = document.createElement("div");
-    o.className = "tbw-context-menu-item", r.cssClass && o.classList.add(r.cssClass), o.setAttribute("role", "menuitem"), o.setAttribute("data-id", r.id);
-    const s = Re(r, e);
-    if (s && (o.classList.add("disabled"), o.setAttribute("aria-disabled", "true")), r.icon) {
+    const r = document.createElement("div");
+    r.className = "tbw-context-menu-item", o.cssClass && r.classList.add(o.cssClass), r.setAttribute("role", "menuitem"), r.setAttribute("data-id", o.id);
+    const s = Re(o, e);
+    if (s && (r.classList.add("disabled"), r.setAttribute("aria-disabled", "true")), o.icon) {
       const a = document.createElement("span");
-      a.className = "tbw-context-menu-icon", a.innerHTML = r.icon, o.appendChild(a);
+      a.className = "tbw-context-menu-icon", a.innerHTML = o.icon, r.appendChild(a);
     }
     const l = document.createElement("span");
-    if (l.className = "tbw-context-menu-label", l.textContent = r.name, o.appendChild(l), r.shortcut) {
+    if (l.className = "tbw-context-menu-label", l.textContent = o.name, r.appendChild(l), o.shortcut) {
       const a = document.createElement("span");
-      a.className = "tbw-context-menu-shortcut", a.textContent = r.shortcut, o.appendChild(a);
+      a.className = "tbw-context-menu-shortcut", a.textContent = o.shortcut, r.appendChild(a);
     }
-    if (r.subMenu?.length) {
+    if (o.subMenu?.length) {
       const a = document.createElement("span");
-      a.className = "tbw-context-menu-arrow", a.textContent = "▶", o.appendChild(a), o.addEventListener("mouseenter", () => {
-        if (o.querySelector(".tbw-context-menu") || !r.subMenu) return;
-        const d = K(r.subMenu, e), u = V(d, e, t);
-        u.classList.add("tbw-context-submenu"), u.style.position = "absolute", u.style.left = "100%", u.style.top = "0", o.style.position = "relative", o.appendChild(u);
-      }), o.addEventListener("mouseleave", () => {
-        const c = o.querySelector(".tbw-context-menu");
+      a.className = "tbw-context-menu-arrow", a.textContent = "▶", r.appendChild(a), r.addEventListener("mouseenter", () => {
+        if (r.querySelector(".tbw-context-menu") || !o.subMenu) return;
+        const d = K(o.subMenu, e), u = V(d, e, t);
+        u.classList.add("tbw-context-submenu"), u.style.position = "absolute", u.style.left = "100%", u.style.top = "0", r.style.position = "relative", r.appendChild(u);
+      }), r.addEventListener("mouseleave", () => {
+        const c = r.querySelector(".tbw-context-menu");
         c && c.remove();
       });
     }
-    !s && r.action && !r.subMenu && o.addEventListener("click", (a) => {
-      a.stopPropagation(), t(r);
-    }), n.appendChild(o);
+    !s && o.action && !o.subMenu && r.addEventListener("click", (a) => {
+      a.stopPropagation(), t(o);
+    }), n.appendChild(r);
   }
   return n;
 }
-function re(i, e, t) {
+function oe(i, e, t) {
   i.style.position = "fixed", i.style.left = `${e}px`, i.style.top = `${t}px`, i.style.visibility = "hidden", i.style.zIndex = "10000";
-  const n = i.getBoundingClientRect(), r = window.innerWidth, o = window.innerHeight;
+  const n = i.getBoundingClientRect(), o = window.innerWidth, r = window.innerHeight;
   let s = e, l = t;
-  e + n.width > r && (s = e - n.width), t + n.height > o && (l = t - n.height), s = Math.max(0, s), l = Math.max(0, l), i.style.left = `${s}px`, i.style.top = `${l}px`, i.style.visibility = "visible";
+  e + n.width > o && (s = e - n.width), t + n.height > r && (l = t - n.height), s = Math.max(0, s), l = Math.max(0, l), i.style.left = `${s}px`, i.style.top = `${l}px`, i.style.visibility = "visible";
 }
 let P = null, D = null, A = null;
 const ke = `
@@ -557,9 +557,9 @@ class Ct extends y {
     const t = e.children[0];
     t && t.getAttribute("data-context-menu-bound") !== "true" && (t.setAttribute("data-context-menu-bound", "true"), t.addEventListener("contextmenu", (n) => {
       if (!this.config.enabled) return;
-      const r = n;
-      r.preventDefault();
-      const o = r.target, s = o.closest("[data-row][data-col]"), l = o.closest(".header-cell");
+      const o = n;
+      o.preventDefault();
+      const r = o.target, s = r.closest("[data-row][data-col]"), l = r.closest(".header-cell");
       let a;
       if (s) {
         const d = parseInt(s.getAttribute("data-row") ?? "-1", 10), u = parseInt(s.getAttribute("data-col") ?? "-1", 10), h = this.columns[u], f = this.rows[d];
@@ -571,7 +571,7 @@ class Ct extends y {
           field: h?.field ?? "",
           value: f?.[h?.field] ?? null,
           isHeader: !1,
-          event: r
+          event: o
         };
       } else if (l) {
         const d = parseInt(l.getAttribute("data-col") ?? "-1", 10), u = this.columns[d];
@@ -583,15 +583,15 @@ class Ct extends y {
           field: u?.field ?? "",
           value: null,
           isHeader: !0,
-          event: r
+          event: o
         };
       } else
         return;
-      this.params = a, this.position = { x: r.clientX, y: r.clientY };
+      this.params = a, this.position = { x: o.clientX, y: o.clientY };
       const c = K(this.config.items ?? B, a);
       c.length && (this.menuElement && this.menuElement.remove(), this.menuElement = V(c, a, (d) => {
         d.action && d.action(a), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
-      }), document.body.appendChild(this.menuElement), re(this.menuElement, r.clientX, r.clientY), this.isOpen = !0, this.emit("context-menu-open", { params: a, items: c }));
+      }), document.body.appendChild(this.menuElement), oe(this.menuElement, o.clientX, o.clientY), this.isOpen = !0, this.emit("context-menu-open", { params: a, items: c }));
     }));
   }
   // ===== Public API =====
@@ -602,7 +602,7 @@ class Ct extends y {
    * @param params - Partial context menu parameters
    */
   showMenu(e, t, n) {
-    const r = {
+    const o = {
       row: n.row ?? null,
       rowIndex: n.rowIndex ?? -1,
       column: n.column ?? null,
@@ -611,10 +611,10 @@ class Ct extends y {
       value: n.value ?? null,
       isHeader: n.isHeader ?? !1,
       event: n.event ?? new MouseEvent("contextmenu")
-    }, o = K(this.config.items ?? B, r);
-    this.menuElement && this.menuElement.remove(), this.menuElement = V(o, r, (s) => {
-      s.action && s.action(r), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
-    }), document.body.appendChild(this.menuElement), re(this.menuElement, e, t), this.isOpen = !0;
+    }, r = K(this.config.items ?? B, o);
+    this.menuElement && this.menuElement.remove(), this.menuElement = V(r, o, (s) => {
+      s.action && s.action(o), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
+    }), document.body.appendChild(this.menuElement), oe(this.menuElement, e, t), this.isOpen = !0;
   }
   /**
    * Hide the context menu.
@@ -631,7 +631,7 @@ class Ct extends y {
   }
   // Styles are injected globally via installGlobalHandlers() since menu renders in document.body
 }
-function oe(i, e = !0) {
+function re(i, e = !0) {
   if (i == null) return "";
   if (i instanceof Date) return i.toISOString();
   if (typeof i == "object") return JSON.stringify(i);
@@ -640,23 +640,23 @@ function oe(i, e = !0) {
 `) || t.includes("\r")) ? `"${t.replace(/"/g, '""')}"` : t;
 }
 function Ee(i, e, t, n = {}) {
-  const r = n.delimiter ?? ",", o = n.newline ?? `
+  const o = n.delimiter ?? ",", r = n.newline ?? `
 `, s = [], l = n.bom ? "\uFEFF" : "";
   if (t.includeHeaders !== !1) {
     const a = e.map((c) => {
       const d = c.header || c.field, u = t.processHeader ? t.processHeader(d, c.field) : d;
-      return oe(u);
+      return re(u);
     });
-    s.push(a.join(r));
+    s.push(a.join(o));
   }
   for (const a of i) {
     const c = e.map((d) => {
       let u = a[d.field];
-      return t.processCell && (u = t.processCell(u, d.field, a)), oe(u);
+      return t.processCell && (u = t.processCell(u, d.field, a)), re(u);
     });
-    s.push(c.join(r));
+    s.push(c.join(o));
   }
-  return l + s.join(o);
+  return l + s.join(r);
 }
 function z(i, e) {
   const t = URL.createObjectURL(i), n = document.createElement("a");
@@ -679,18 +679,18 @@ function _e(i, e, t) {
   if (t.includeHeaders !== !1) {
     n += `
 <Row>`;
-    for (const r of e) {
-      const o = r.header || r.field, s = t.processHeader ? t.processHeader(o, r.field) : o;
+    for (const o of e) {
+      const r = o.header || o.field, s = t.processHeader ? t.processHeader(r, o.field) : r;
       n += `<Cell><Data ss:Type="String">${ie(s)}</Data></Cell>`;
     }
     n += "</Row>";
   }
-  for (const r of i) {
+  for (const o of i) {
     n += `
 <Row>`;
-    for (const o of e) {
-      let s = r[o.field];
-      t.processCell && (s = t.processCell(s, o.field, r));
+    for (const r of e) {
+      let s = o[r.field];
+      t.processCell && (s = t.processCell(s, r.field, o));
       let l = "String", a = "";
       s == null ? a = "" : typeof s == "number" && !isNaN(s) ? (l = "Number", a = String(s)) : s instanceof Date ? (l = "DateTime", a = s.toISOString()) : a = ie(String(s)), n += `<Cell><Data ss:Type="${l}">${a}</Data></Cell>`;
     }
@@ -724,7 +724,7 @@ class St extends y {
   lastExportInfo = null;
   // ===== Private Methods =====
   performExport(e, t) {
-    const n = this.config, r = {
+    const n = this.config, o = {
       format: e,
       fileName: t?.fileName ?? n.fileName ?? "export",
       includeHeaders: t?.includeHeaders ?? n.includeHeaders,
@@ -733,10 +733,10 @@ class St extends y {
       columns: t?.columns,
       rowIndices: t?.rowIndices
     };
-    let o = [...this.columns];
-    if (n.onlyVisible && (o = o.filter((a) => !a.hidden && !a.field.startsWith("__"))), t?.columns) {
+    let r = [...this.columns];
+    if (n.onlyVisible && (r = r.filter((a) => !a.hidden && !a.field.startsWith("__"))), t?.columns) {
       const a = new Set(t.columns);
-      o = o.filter((c) => a.has(c.field));
+      r = r.filter((c) => a.has(c.field));
     }
     let s = [...this.rows];
     if (n.onlySelected) {
@@ -744,25 +744,25 @@ class St extends y {
       a?.selected?.size && (s = [...a.selected].sort((d, u) => d - u).map((d) => this.rows[d]).filter(Boolean));
     }
     t?.rowIndices && (s = t.rowIndices.map((a) => this.rows[a]).filter(Boolean)), this.isExportingFlag = !0;
-    let l = r.fileName;
+    let l = o.fileName;
     try {
       switch (e) {
         case "csv": {
-          const a = Ee(s, o, r, { bom: !0 });
+          const a = Ee(s, r, o, { bom: !0 });
           l = l.endsWith(".csv") ? l : `${l}.csv`, Ae(a, l);
           break;
         }
         case "excel": {
-          const a = _e(s, o, r);
+          const a = _e(s, r, o);
           l = l.endsWith(".xls") ? l : `${l}.xls`, Ie(a, l);
           break;
         }
         case "json": {
           const a = s.map((u) => {
             const h = {};
-            for (const f of o) {
+            for (const f of r) {
               let g = u[f.field];
-              r.processCell && (g = r.processCell(g, f.field, u)), h[f.field] = g;
+              o.processCell && (g = o.processCell(g, f.field, u)), h[f.field] = g;
             }
             return h;
           }), c = JSON.stringify(a, null, 2);
@@ -776,7 +776,7 @@ class St extends y {
         format: e,
         fileName: l,
         rowCount: s.length,
-        columnCount: o.length
+        columnCount: r.length
       });
     } finally {
       this.isExportingFlag = !1;
@@ -827,15 +827,15 @@ class St extends y {
   }
 }
 function Te(i) {
-  const { totalRows: e, viewportHeight: t, scrollTop: n, rowHeight: r, overscan: o } = i, s = Math.ceil(t / r);
-  let l = Math.floor(n / r) - o;
+  const { totalRows: e, viewportHeight: t, scrollTop: n, rowHeight: o, overscan: r } = i, s = Math.ceil(t / o);
+  let l = Math.floor(n / o) - r;
   l < 0 && (l = 0);
-  let a = l + s + o * 2;
-  return a > e && (a = e), a === e && l > 0 && (l = Math.max(0, a - s - o * 2)), {
+  let a = l + s + r * 2;
+  return a > e && (a = e), a === e && l > 0 && (l = Math.max(0, a - s - r * 2)), {
     start: l,
     end: a,
-    offsetY: l * r,
-    totalHeight: e * r
+    offsetY: l * o,
+    totalHeight: e * o
   };
 }
 function Le(i, e) {
@@ -848,21 +848,21 @@ function Me(i, e, t = !1) {
   if (e.operator === "notBlank")
     return n != null && n !== "";
   if (n == null) return !1;
-  const r = String(n), o = t ? r : r.toLowerCase(), s = t ? String(e.value) : String(e.value).toLowerCase();
+  const o = String(n), r = t ? o : o.toLowerCase(), s = t ? String(e.value) : String(e.value).toLowerCase();
   switch (e.operator) {
     // Text operators
     case "contains":
-      return o.includes(s);
+      return r.includes(s);
     case "notContains":
-      return !o.includes(s);
+      return !r.includes(s);
     case "equals":
-      return o === s;
+      return r === s;
     case "notEquals":
-      return o !== s;
+      return r !== s;
     case "startsWith":
-      return o.startsWith(s);
+      return r.startsWith(s);
     case "endsWith":
-      return o.endsWith(s);
+      return r.endsWith(s);
     // Number/Date operators (use raw numeric values)
     case "lessThan":
       return Number(n) < Number(e.value);
@@ -884,7 +884,7 @@ function Me(i, e, t = !1) {
   }
 }
 function qe(i, e, t = !1) {
-  return e.length ? i.filter((n) => e.every((r) => Me(n, r, t))) : i;
+  return e.length ? i.filter((n) => e.every((o) => Me(n, o, t))) : i;
 }
 function Fe(i) {
   return JSON.stringify(
@@ -899,10 +899,10 @@ function Fe(i) {
 function se(i, e) {
   const t = /* @__PURE__ */ new Set();
   for (const n of i) {
-    const r = n[e];
-    r != null && t.add(r);
+    const o = n[e];
+    o != null && t.add(o);
   }
-  return [...t].sort((n, r) => typeof n == "number" && typeof r == "number" ? n - r : String(n).localeCompare(String(r)));
+  return [...t].sort((n, o) => typeof n == "number" && typeof o == "number" ? n - o : String(n).localeCompare(String(o)));
 }
 const Ne = `
 .tbw-filter-panel {
@@ -1066,7 +1066,8 @@ class E extends y {
   panelElement = null;
   searchText = /* @__PURE__ */ new Map();
   excludedValues = /* @__PURE__ */ new Map();
-  documentClickHandler = null;
+  panelAbortController = null;
+  // For panel-scoped listeners
   globalStylesInjected = !1;
   // Virtualization constants for filter value list
   static LIST_ITEM_HEIGHT = 28;
@@ -1078,7 +1079,7 @@ class E extends y {
     super.attach(e), this.injectGlobalStyles();
   }
   detach() {
-    this.filters.clear(), this.cachedResult = null, this.cacheKey = null, this.openPanelField = null, this.panelElement && (this.panelElement.remove(), this.panelElement = null), this.searchText.clear(), this.excludedValues.clear(), this.removeDocumentClickHandler();
+    this.filters.clear(), this.cachedResult = null, this.cacheKey = null, this.openPanelField = null, this.panelElement && (this.panelElement.remove(), this.panelElement = null), this.searchText.clear(), this.excludedValues.clear(), this.panelAbortController?.abort(), this.panelAbortController = null;
   }
   // ===== Hooks =====
   processRows(e) {
@@ -1087,23 +1088,23 @@ class E extends y {
     const n = Fe(t);
     if (this.cacheKey === n && this.cachedResult)
       return this.cachedResult;
-    const r = qe([...e], t, this.config.caseSensitive);
-    return this.cachedResult = r, this.cacheKey = n, r;
+    const o = qe([...e], t, this.config.caseSensitive);
+    return this.cachedResult = o, this.cacheKey = n, o;
   }
   afterRender() {
     if (!this.config.enabled) return;
     const e = this.shadowRoot;
     if (!e) return;
     e.querySelectorAll('[part~="header-cell"]').forEach((n) => {
-      const r = n.getAttribute("data-col");
-      if (r === null) return;
-      const o = this.columns[parseInt(r, 10)];
-      if (!o || o.filterable === !1 || n.querySelector(".tbw-filter-btn")) return;
-      const s = o.field;
+      const o = n.getAttribute("data-col");
+      if (o === null) return;
+      const r = this.columns[parseInt(o, 10)];
+      if (!r || r.filterable === !1 || n.querySelector(".tbw-filter-btn")) return;
+      const s = r.field;
       if (!s) return;
       const l = document.createElement("button");
-      l.className = "tbw-filter-btn", l.setAttribute("aria-label", `Filter ${o.header ?? s}`), l.innerHTML = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>', this.filters.has(s) && (l.classList.add("active"), n.classList.add("filtered")), l.addEventListener("click", (a) => {
-        a.stopPropagation(), this.toggleFilterPanel(s, o, l);
+      l.className = "tbw-filter-btn", l.setAttribute("aria-label", `Filter ${r.header ?? s}`), l.innerHTML = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>', this.filters.has(s) && (l.classList.add("active"), n.classList.add("filtered")), l.addEventListener("click", (a) => {
+        a.stopPropagation(), this.toggleFilterPanel(s, r, l);
       }), n.appendChild(l);
     });
   }
@@ -1214,22 +1215,22 @@ class E extends y {
       return;
     }
     this.closeFilterPanel();
-    const r = document.createElement("div");
-    r.className = "tbw-filter-panel", this.panelElement = r, this.openPanelField = e;
-    const o = se(this.sourceRows, e);
+    const o = document.createElement("div");
+    o.className = "tbw-filter-panel", this.panelElement = o, this.openPanelField = e;
+    const r = se(this.sourceRows, e);
     let s = this.excludedValues.get(e);
     s || (s = /* @__PURE__ */ new Set(), this.excludedValues.set(e, s));
     const l = this.searchText.get(e) ?? "", a = {
       field: e,
       column: t,
-      uniqueValues: o,
+      uniqueValues: r,
       excludedValues: s,
       searchText: l,
-      applySetFilter: (u) => {
-        this.applySetFilter(e, u), this.closeFilterPanel();
+      applySetFilter: (d) => {
+        this.applySetFilter(e, d), this.closeFilterPanel();
       },
-      applyTextFilter: (u, h, f) => {
-        this.applyTextFilter(e, u, h, f), this.closeFilterPanel();
+      applyTextFilter: (d, u, h) => {
+        this.applyTextFilter(e, d, u, h), this.closeFilterPanel();
       },
       clearFilter: () => {
         this.clearFieldFilter(e), this.closeFilterPanel();
@@ -1237,25 +1238,21 @@ class E extends y {
       closePanel: () => this.closeFilterPanel()
     };
     let c = !1;
-    this.config.filterPanelRenderer && (this.config.filterPanelRenderer(r, a), c = r.children.length > 0), c || this.renderDefaultFilterPanel(r, a, o, s), document.body.appendChild(r), this.positionPanel(r, n);
-    const d = (u) => {
-      !r.contains(u.target) && u.target !== n && this.closeFilterPanel();
-    };
-    this.documentClickHandler = d, setTimeout(() => {
-      document.addEventListener("click", d);
+    this.config.filterPanelRenderer && (this.config.filterPanelRenderer(o, a), c = o.children.length > 0), c || this.renderDefaultFilterPanel(o, a, r, s), document.body.appendChild(o), this.positionPanel(o, n), this.panelAbortController = new AbortController(), setTimeout(() => {
+      document.addEventListener(
+        "click",
+        (d) => {
+          !o.contains(d.target) && d.target !== n && this.closeFilterPanel();
+        },
+        { signal: this.panelAbortController?.signal }
+      );
     }, 0);
   }
   /**
    * Close the filter panel
    */
   closeFilterPanel() {
-    this.panelElement && (this.panelElement.remove(), this.panelElement = null), this.openPanelField = null, this.removeDocumentClickHandler();
-  }
-  /**
-   * Remove the document click handler
-   */
-  removeDocumentClickHandler() {
-    this.documentClickHandler && (document.removeEventListener("click", this.documentClickHandler), this.documentClickHandler = null);
+    this.panelElement && (this.panelElement.remove(), this.panelElement = null), this.openPanelField = null, this.panelAbortController?.abort(), this.panelAbortController = null;
   }
   /**
    * Position the panel below the button
@@ -1263,18 +1260,18 @@ class E extends y {
   positionPanel(e, t) {
     const n = t.getBoundingClientRect();
     e.style.position = "fixed", e.style.top = `${n.bottom + 4}px`, e.style.left = `${n.left}px`, requestAnimationFrame(() => {
-      const r = e.getBoundingClientRect();
-      r.right > window.innerWidth - 8 && (e.style.left = `${window.innerWidth - r.width - 8}px`), r.bottom > window.innerHeight - 8 && (e.style.top = `${n.top - r.height - 4}px`);
+      const o = e.getBoundingClientRect();
+      o.right > window.innerWidth - 8 && (e.style.left = `${window.innerWidth - o.width - 8}px`), o.bottom > window.innerHeight - 8 && (e.style.top = `${n.top - o.height - 4}px`);
     });
   }
   /**
    * Render the default filter panel content
    */
-  renderDefaultFilterPanel(e, t, n, r) {
-    const { field: o } = t, s = document.createElement("div");
+  renderDefaultFilterPanel(e, t, n, o) {
+    const { field: r } = t, s = document.createElement("div");
     s.className = "tbw-filter-search";
     const l = document.createElement("input");
-    l.type = "text", l.placeholder = "Search...", l.className = "tbw-filter-search-input", l.value = this.searchText.get(o) ?? "", s.appendChild(l), e.appendChild(s);
+    l.type = "text", l.placeholder = "Search...", l.className = "tbw-filter-search-input", l.value = this.searchText.get(r) ?? "", s.appendChild(l), e.appendChild(s);
     const a = document.createElement("div");
     a.className = "tbw-filter-actions";
     const c = document.createElement("label");
@@ -1302,7 +1299,7 @@ class E extends y {
     const b = /* @__PURE__ */ new Map();
     n.forEach((p) => {
       const v = p == null ? "__null__" : String(p);
-      b.set(v, !r.has(p));
+      b.set(v, !o.has(p));
     }), h();
     let S = [];
     const R = (p, v) => {
@@ -1355,7 +1352,7 @@ class E extends y {
     let U;
     l.addEventListener("input", () => {
       clearTimeout(U), U = setTimeout(() => {
-        this.searchText.set(o, l.value), j(l.value);
+        this.searchText.set(r, l.value), j(l.value);
       }, this.config.debounceMs ?? 150);
     });
     const I = document.createElement("div");
@@ -1395,13 +1392,13 @@ class E extends y {
   /**
    * Apply a text filter
    */
-  applyTextFilter(e, t, n, r) {
+  applyTextFilter(e, t, n, o) {
     this.filters.set(e, {
       field: e,
       type: "text",
       operator: t,
       value: n,
-      valueTo: r
+      valueTo: o
     }), this.cachedResult = null, this.cacheKey = null, this.emit("filter-change", {
       filters: [...this.filters.values()],
       filteredRowCount: 0
@@ -1492,14 +1489,14 @@ function Pe(i) {
       implicit: !0
     });
   };
-  let r = [], o = 0;
+  let o = [], r = 0;
   return i.forEach((s, l) => {
     const a = s.group;
     if (!a) {
-      r.length === 0 && (o = l), r.push(s);
+      o.length === 0 && (r = l), o.push(s);
       return;
     }
-    r.length && (n(o, r.slice()), r = []);
+    o.length && (n(r, o.slice()), o = []);
     const c = typeof a == "string" ? a : a.id;
     let d = e.get(c);
     d || (d = {
@@ -1508,21 +1505,21 @@ function Pe(i) {
       columns: [],
       firstIndex: l
     }, e.set(c, d), t.push(d)), d.columns.push(s);
-  }), r.length && n(o, r), t.length === 1 && t[0].implicit && t[0].columns.length === i.length ? [] : t;
+  }), o.length && n(r, o), t.length === 1 && t[0].implicit && t[0].columns.length === i.length ? [] : t;
 }
 function De(i, e, t) {
   if (!e.length || !i) return;
   const n = /* @__PURE__ */ new Map();
-  for (const o of e)
-    for (const s of o.columns)
-      s?.field && n.set(s.field, o.id);
-  const r = Array.from(i.querySelectorAll(".cell[data-field]"));
-  r.forEach((o) => {
-    const s = o.getAttribute("data-field") || "", l = n.get(s);
-    l && (o.classList.add("grouped"), o.getAttribute("data-group") || o.setAttribute("data-group", l));
+  for (const r of e)
+    for (const s of r.columns)
+      s?.field && n.set(s.field, r.id);
+  const o = Array.from(i.querySelectorAll(".cell[data-field]"));
+  o.forEach((r) => {
+    const s = r.getAttribute("data-field") || "", l = n.get(s);
+    l && (r.classList.add("grouped"), r.getAttribute("data-group") || r.setAttribute("data-group", l));
   });
-  for (const o of e) {
-    const s = o.columns[o.columns.length - 1], l = r.find((a) => a.getAttribute("data-field") === s.field);
+  for (const r of e) {
+    const s = r.columns[r.columns.length - 1], l = o.find((a) => a.getAttribute("data-field") === s.field);
     l && l.classList.add("group-end");
   }
 }
@@ -1531,12 +1528,12 @@ function Be(i, e) {
   const t = document.createElement("div");
   t.className = "header-group-row", t.setAttribute("role", "row");
   for (const n of i) {
-    const r = n.firstIndex != null ? n.firstIndex : e.findIndex((a) => n.columns.includes(a)), o = String(n.id).startsWith("__implicit__"), s = o ? "" : n.label || n.id, l = document.createElement("div");
-    l.className = "cell header-group-cell", o && l.classList.add("implicit-group"), l.setAttribute("data-group", String(n.id)), l.style.gridColumn = `${r + 1} / span ${n.columns.length}`, l.textContent = s, t.appendChild(l);
+    const o = n.firstIndex != null ? n.firstIndex : e.findIndex((a) => n.columns.includes(a)), r = String(n.id).startsWith("__implicit__"), s = r ? "" : n.label || n.id, l = document.createElement("div");
+    l.className = "cell header-group-cell", r && l.classList.add("implicit-group"), l.setAttribute("data-group", String(n.id)), l.style.gridColumn = `${o + 1} / span ${n.columns.length}`, l.textContent = s, t.appendChild(l);
   }
   return t;
 }
-function He(i) {
+function Oe(i) {
   return i.some((e) => e.group != null);
 }
 class Rt extends y {
@@ -1561,7 +1558,7 @@ class Rt extends y {
    */
   static detect(e, t) {
     const n = t?.columns;
-    return Array.isArray(n) ? He(n) : !1;
+    return Array.isArray(n) ? Oe(n) : !1;
   }
   // ===== Hooks =====
   processColumns(e) {
@@ -1582,11 +1579,11 @@ class Rt extends y {
     t && t.remove();
     const n = Be(this.groups, this.columns);
     if (n) {
-      const o = e.querySelector(".header-row");
-      o ? e.insertBefore(n, o) : e.appendChild(n);
+      const r = e.querySelector(".header-row");
+      r ? e.insertBefore(n, r) : e.appendChild(n);
     }
-    const r = e.querySelector(".header-row");
-    r && De(r, this.groups, this.columns);
+    const o = e.querySelector(".header-row");
+    o && De(o, this.groups, this.columns);
   }
   // ===== Public API =====
   /**
@@ -1648,38 +1645,38 @@ class Rt extends y {
     }
   `;
 }
-function Oe({ rows: i, config: e, expanded: t }) {
+function He({ rows: i, config: e, expanded: t }) {
   const n = e.groupOn;
   if (!e.enabled || typeof n != "function")
     return [];
-  const r = { key: "__root__", value: null, depth: -1, rows: [], children: /* @__PURE__ */ new Map() };
+  const o = { key: "__root__", value: null, depth: -1, rows: [], children: /* @__PURE__ */ new Map() };
   if (i.forEach((l) => {
     let a = n(l);
     a == null || a === !1 ? a = ["__ungrouped__"] : Array.isArray(a) || (a = [a]);
-    let c = r;
+    let c = o;
     a.forEach((d, u) => {
       const h = d == null ? "∅" : String(d), f = c.key === "__root__" ? h : c.key + "||" + h;
       let g = c.children.get(h);
       g || (g = { key: f, value: d, depth: u, rows: [], children: /* @__PURE__ */ new Map(), parent: c }, c.children.set(h, g)), c = g;
     }), c.rows.push(l);
-  }), r.children.size === 1 && r.children.has("__ungrouped__") && r.children.get("__ungrouped__").rows.length === i.length)
+  }), o.children.size === 1 && o.children.has("__ungrouped__") && o.children.get("__ungrouped__").rows.length === i.length)
     return [];
-  const o = [], s = (l) => {
-    if (l === r) {
+  const r = [], s = (l) => {
+    if (l === o) {
       l.children.forEach((c) => s(c));
       return;
     }
     const a = t.has(l.key);
-    o.push({
+    r.push({
       kind: "group",
       key: l.key,
       value: l.value,
       depth: l.depth,
       rows: l.rows,
       expanded: a
-    }), a && (l.children.size ? l.children.forEach((c) => s(c)) : l.rows.forEach((c) => o.push({ kind: "data", row: c, rowIndex: i.indexOf(c) })));
+    }), a && (l.children.size ? l.children.forEach((c) => s(c)) : l.rows.forEach((c) => r.push({ kind: "data", row: c, rowIndex: i.indexOf(c) })));
   };
-  return s(r), o;
+  return s(o), r;
 }
 function We(i, e) {
   const t = new Set(i);
@@ -1729,20 +1726,20 @@ class kt extends y {
     const t = this.config;
     if (!t.enabled || typeof t.groupOn != "function")
       return this.isActive = !1, this.flattenedRows = [], [...e];
-    const n = Oe({
+    const n = He({
       rows: e,
       config: t,
       expanded: this.expandedKeys
     });
-    return n.length === 0 ? (this.isActive = !1, this.flattenedRows = [], [...e]) : (this.isActive = !0, this.flattenedRows = n, n.map((r) => r.kind === "group" ? {
+    return n.length === 0 ? (this.isActive = !1, this.flattenedRows = [], [...e]) : (this.isActive = !0, this.flattenedRows = n, n.map((o) => o.kind === "group" ? {
       __isGroupRow: !0,
-      __groupKey: r.key,
-      __groupValue: r.value,
-      __groupDepth: r.depth,
-      __groupRows: r.rows,
-      __groupExpanded: r.expanded,
-      __groupRowCount: Ge(r)
-    } : r.row));
+      __groupKey: o.key,
+      __groupValue: o.value,
+      __groupDepth: o.depth,
+      __groupRows: o.rows,
+      __groupExpanded: o.expanded,
+      __groupRowCount: Ge(o)
+    } : o.row));
   }
   onCellClick(e) {
     const t = e.row;
@@ -1755,11 +1752,11 @@ class kt extends y {
   renderRow(e, t, n) {
     if (!e?.__isGroupRow)
       return !1;
-    const r = this.config;
-    if (r.groupRowRenderer) {
+    const o = this.config;
+    if (o.groupRowRenderer) {
       const l = () => {
         this.toggle(e.__groupKey);
-      }, a = r.groupRowRenderer({
+      }, a = o.groupRowRenderer({
         key: e.__groupKey,
         value: e.__groupValue,
         depth: e.__groupDepth,
@@ -1770,32 +1767,32 @@ class kt extends y {
       if (a)
         return t.className = "group-row", t.__isCustomRow = !0, t.setAttribute("data-group-depth", String(e.__groupDepth)), typeof a == "string" ? t.innerHTML = a : (t.innerHTML = "", t.appendChild(a)), !0;
     }
-    const o = () => {
+    const r = () => {
       this.toggle(e.__groupKey);
     };
-    return t.className = "group-row", t.__isCustomRow = !0, t.setAttribute("data-group-depth", String(e.__groupDepth)), t.setAttribute("role", "row"), t.setAttribute("aria-expanded", String(e.__groupExpanded)), t.style.paddingLeft = `${(e.__groupDepth || 0) * (r.indentWidth ?? 20)}px`, t.innerHTML = "", r.fullWidth !== !1 ? this.renderFullWidthGroupRow(e, t, o) : this.renderPerColumnGroupRow(e, t, o), !0;
+    return t.className = "group-row", t.__isCustomRow = !0, t.setAttribute("data-group-depth", String(e.__groupDepth)), t.setAttribute("role", "row"), t.setAttribute("aria-expanded", String(e.__groupExpanded)), t.style.paddingLeft = `${(e.__groupDepth || 0) * (o.indentWidth ?? 20)}px`, t.innerHTML = "", o.fullWidth !== !1 ? this.renderFullWidthGroupRow(e, t, r) : this.renderPerColumnGroupRow(e, t, r), !0;
   }
   afterRender() {
   }
   // ===== Private Rendering Helpers =====
   renderFullWidthGroupRow(e, t, n) {
-    const r = this.config, o = document.createElement("div");
-    o.className = "cell group-full", o.style.gridColumn = "1 / -1", o.setAttribute("role", "gridcell");
+    const o = this.config, r = document.createElement("div");
+    r.className = "cell group-full", r.style.gridColumn = "1 / -1", r.setAttribute("role", "gridcell");
     const s = document.createElement("button");
     s.type = "button", s.className = "group-toggle", s.setAttribute("aria-label", e.__groupExpanded ? "Collapse group" : "Expand group"), s.textContent = e.__groupExpanded ? "▾" : "▸", s.addEventListener("click", (c) => {
       c.stopPropagation(), n();
-    }), o.appendChild(s);
+    }), r.appendChild(s);
     const l = document.createElement("span");
     l.className = "group-label";
-    const a = r.formatLabel ? r.formatLabel(e.__groupValue, e.__groupDepth || 0, e.__groupKey) : String(e.__groupValue);
-    if (l.textContent = a, o.appendChild(l), r.showRowCount !== !1) {
+    const a = o.formatLabel ? o.formatLabel(e.__groupValue, e.__groupDepth || 0, e.__groupKey) : String(e.__groupValue);
+    if (l.textContent = a, r.appendChild(l), o.showRowCount !== !1) {
       const c = document.createElement("span");
-      c.className = "group-count", c.textContent = `(${e.__groupRowCount ?? e.__groupRows?.length ?? 0})`, o.appendChild(c);
+      c.className = "group-count", c.textContent = `(${e.__groupRowCount ?? e.__groupRows?.length ?? 0})`, r.appendChild(c);
     }
-    t.appendChild(o);
+    t.appendChild(r);
   }
   renderPerColumnGroupRow(e, t, n) {
-    const r = this.config, o = r.aggregators ?? {}, s = this.columns, l = e.__groupRows ?? [];
+    const o = this.config, r = o.aggregators ?? {}, s = this.columns, l = e.__groupRows ?? [];
     this.grid;
     const c = this.shadowRoot?.querySelector(".body")?.style.gridTemplateColumns || "";
     c && (t.style.display = "grid", t.style.gridTemplateColumns = c), s.forEach((d, u) => {
@@ -1805,20 +1802,20 @@ class kt extends y {
         f.type = "button", f.className = "group-toggle", f.textContent = e.__groupExpanded ? "▾" : "▸", f.addEventListener("click", (b) => {
           b.stopPropagation(), n();
         }), h.appendChild(f);
-        const g = document.createElement("span"), m = o[d.field];
+        const g = document.createElement("span"), m = r[d.field];
         if (m) {
           const b = X(m, l, d.field, d);
           g.textContent = b != null ? String(b) : String(e.__groupValue);
         } else {
-          const b = r.formatLabel ? r.formatLabel(e.__groupValue, e.__groupDepth || 0, e.__groupKey) : String(e.__groupValue);
+          const b = o.formatLabel ? o.formatLabel(e.__groupValue, e.__groupDepth || 0, e.__groupKey) : String(e.__groupValue);
           g.textContent = b;
         }
-        if (h.appendChild(g), r.showRowCount !== !1) {
+        if (h.appendChild(g), o.showRowCount !== !1) {
           const b = document.createElement("span");
           b.className = "group-count", b.textContent = ` (${l.length})`, h.appendChild(b);
         }
       } else {
-        const f = o[d.field];
+        const f = r[d.field];
         if (f) {
           const g = X(f, l, d.field, d);
           h.textContent = g != null ? String(g) : "";
@@ -1976,7 +1973,7 @@ class kt extends y {
     [data-group-depth="4"] .group-label { padding-left: 80px; }
   `;
 }
-function H(i, e) {
+function O(i, e) {
   const t = new Set(i);
   return t.has(e) ? t.delete(e) : t.add(e), t;
 }
@@ -1992,12 +1989,12 @@ function je(i, e) {
   return i.has(e);
 }
 function Ue(i, e, t, n) {
-  const r = document.createElement("div");
-  r.className = "master-detail-row", r.setAttribute("data-detail-for", String(e)), r.setAttribute("role", "row");
   const o = document.createElement("div");
-  o.className = "master-detail-cell", o.setAttribute("role", "cell"), o.style.gridColumn = `1 / ${n + 1}`;
+  o.className = "master-detail-row", o.setAttribute("data-detail-for", String(e)), o.setAttribute("role", "row");
+  const r = document.createElement("div");
+  r.className = "master-detail-cell", r.setAttribute("role", "cell"), r.style.gridColumn = `1 / ${n + 1}`;
   const s = t(i, e);
-  return typeof s == "string" ? o.innerHTML = s : s instanceof HTMLElement && o.appendChild(s), r.appendChild(o), r;
+  return typeof s == "string" ? r.innerHTML = s : s instanceof HTMLElement && r.appendChild(s), o.appendChild(r), o;
 }
 class Et extends y {
   name = "masterDetail";
@@ -2024,34 +2021,37 @@ class Et extends y {
       return [...e];
     const t = [...e];
     if (t.length > 0) {
-      const n = { ...t[0] }, r = n.viewRenderer;
-      n.viewRenderer = (o) => {
-        const { value: s, row: l } = o, a = this.expandedRows.has(l), c = document.createElement("span");
-        c.className = "master-detail-cell-wrapper";
-        const d = document.createElement("span");
-        d.className = "master-detail-toggle", d.textContent = a ? "▼" : "▶", d.setAttribute("aria-expanded", String(a)), d.setAttribute("aria-label", a ? "Collapse details" : "Expand details"), d.addEventListener("click", (h) => {
-          h.stopPropagation();
-          const f = this.rows.indexOf(l);
-          this.expandedRows = H(this.expandedRows, l), this.emit("detail-expand", {
-            rowIndex: f,
-            row: l,
-            expanded: this.expandedRows.has(l)
-          }), this.requestRender();
-        }), c.appendChild(d);
+      const n = { ...t[0] }, o = n.viewRenderer;
+      if (o?.__masterDetailWrapped)
+        return t;
+      const r = (s) => {
+        const { value: l, row: a } = s, c = this.expandedRows.has(a), d = document.createElement("span");
+        d.className = "master-detail-cell-wrapper";
         const u = document.createElement("span");
-        if (r) {
-          const h = r(o);
-          h instanceof Node ? u.appendChild(h) : u.textContent = String(h ?? s ?? "");
+        u.className = "master-detail-toggle", u.textContent = c ? "▼" : "▶", u.setAttribute("aria-expanded", String(c)), u.setAttribute("aria-label", c ? "Collapse details" : "Expand details"), u.addEventListener("click", (f) => {
+          f.stopPropagation();
+          const g = this.rows.indexOf(a);
+          this.expandedRows = O(this.expandedRows, a), this.emit("detail-expand", {
+            rowIndex: g,
+            row: a,
+            expanded: this.expandedRows.has(a)
+          }), this.requestRender();
+        }), d.appendChild(u);
+        const h = document.createElement("span");
+        if (o) {
+          const f = o(s);
+          f instanceof Node ? h.appendChild(f) : h.textContent = String(f ?? l ?? "");
         } else
-          u.textContent = String(s ?? "");
-        return c.appendChild(u), c;
-      }, t[0] = n;
+          h.textContent = String(l ?? "");
+        return d.appendChild(h), d;
+      };
+      r.__masterDetailWrapped = !0, n.viewRenderer = r, t[0] = n;
     }
     return t;
   }
   onRowClick(e) {
     if (!(!this.config.expandOnRowClick || !this.config.detailRenderer))
-      return this.expandedRows = H(this.expandedRows, e.row), this.emit("detail-expand", {
+      return this.expandedRows = O(this.expandedRows, e.row), this.emit("detail-expand", {
         rowIndex: e.rowIndex,
         row: e.row,
         expanded: this.expandedRows.has(e.row)
@@ -2061,15 +2061,15 @@ class Et extends y {
     if (!this.config.detailRenderer) return;
     const e = this.shadowRoot?.querySelector(".rows");
     if (!e) return;
-    e.querySelectorAll(".master-detail-row").forEach((r) => r.remove()), this.detailElements.clear();
+    e.querySelectorAll(".master-detail-row").forEach((o) => o.remove()), this.detailElements.clear();
     const t = e.querySelectorAll(".data-grid-row"), n = this.columns.length;
-    for (const r of t) {
-      const o = r.querySelector(".cell[data-row]"), s = o ? parseInt(o.getAttribute("data-row") ?? "-1", 10) : -1;
+    for (const o of t) {
+      const r = o.querySelector(".cell[data-row]"), s = r ? parseInt(r.getAttribute("data-row") ?? "-1", 10) : -1;
       if (s < 0) continue;
       const l = this.rows[s];
       if (!l || !this.expandedRows.has(l)) continue;
       const a = Ue(l, s, this.config.detailRenderer, n);
-      typeof this.config.detailHeight == "number" && (a.style.height = `${this.config.detailHeight}px`), r.appendChild(a), this.detailElements.set(l, a);
+      typeof this.config.detailHeight == "number" && (a.style.height = `${this.config.detailHeight}px`), o.appendChild(a), this.detailElements.set(l, a);
     }
   }
   // ===== Public API =====
@@ -2095,7 +2095,7 @@ class Et extends y {
    */
   toggle(e) {
     const t = this.rows[e];
-    t && (this.expandedRows = H(this.expandedRows, t), this.requestRender());
+    t && (this.expandedRows = O(this.expandedRows, t), this.requestRender());
   }
   /**
    * Check if the detail row at the given index is expanded.
@@ -2170,11 +2170,11 @@ class Et extends y {
   `;
 }
 function Ye(i, e, t) {
-  return e.length ? [...i].sort((n, r) => {
-    for (const o of e) {
-      const l = t.find((u) => u.field === o.field)?.sortComparator ?? Xe, a = n[o.field], c = r[o.field], d = l(a, c, n, r);
+  return e.length ? [...i].sort((n, o) => {
+    for (const r of e) {
+      const l = t.find((u) => u.field === r.field)?.sortComparator ?? Xe, a = n[r.field], c = o[r.field], d = l(a, c, n, o);
       if (d !== 0)
-        return o.direction === "asc" ? d : -d;
+        return r.direction === "asc" ? d : -d;
     }
     return 0;
   }) : [...i];
@@ -2183,8 +2183,8 @@ function Xe(i, e) {
   return i == null && e == null ? 0 : i == null ? 1 : e == null ? -1 : typeof i == "number" && typeof e == "number" ? i - e : i instanceof Date && e instanceof Date ? i.getTime() - e.getTime() : typeof i == "boolean" && typeof e == "boolean" ? i === e ? 0 : i ? -1 : 1 : String(i).localeCompare(String(e));
 }
 function Je(i, e, t, n) {
-  const r = i.find((o) => o.field === e);
-  return t ? r ? r.direction === "asc" ? i.map((o) => o.field === e ? { ...o, direction: "desc" } : o) : i.filter((o) => o.field !== e) : i.length < n ? [...i, { field: e, direction: "asc" }] : i : r?.direction === "asc" ? [{ field: e, direction: "desc" }] : r?.direction === "desc" ? [] : [{ field: e, direction: "asc" }];
+  const o = i.find((r) => r.field === e);
+  return t ? o ? o.direction === "asc" ? i.map((r) => r.field === e ? { ...r, direction: "desc" } : r) : i.filter((r) => r.field !== e) : i.length < n ? [...i, { field: e, direction: "asc" }] : i : o?.direction === "asc" ? [{ field: e, direction: "desc" }] : o?.direction === "desc" ? [] : [{ field: e, direction: "asc" }];
 }
 function le(i, e) {
   const t = i.findIndex((n) => n.field === e);
@@ -2214,27 +2214,27 @@ class At extends y {
     return this.sortModel.length === 0 ? [...e] : Ye([...e], this.sortModel, [...this.columns]);
   }
   onHeaderClick(e) {
-    if (!this.columns.find((o) => o.field === e.field)?.sortable) return !1;
-    const n = e.originalEvent.shiftKey, r = this.config.maxSortColumns ?? 3;
-    return this.sortModel = Je(this.sortModel, e.field, n, r), this.emit("sort-change", { sortModel: [...this.sortModel] }), this.requestRender(), !0;
+    if (!this.columns.find((r) => r.field === e.field)?.sortable) return !1;
+    const n = e.originalEvent.shiftKey, o = this.config.maxSortColumns ?? 3;
+    return this.sortModel = Je(this.sortModel, e.field, n, o), this.emit("sort-change", { sortModel: [...this.sortModel] }), this.requestRender(), !0;
   }
   afterRender() {
     const e = this.shadowRoot;
     if (!e) return;
     const t = this.config.showSortIndex !== !1;
-    e.querySelectorAll(".header-row .cell[data-field]").forEach((r) => {
-      const o = r.getAttribute("data-field");
-      if (!o) return;
-      const s = le(this.sortModel, o), l = ae(this.sortModel, o);
-      if (r.querySelector(".sort-index")?.remove(), l) {
-        r.querySelector('[part~="sort-indicator"], .sort-indicator')?.remove(), r.setAttribute("data-sort", l);
+    e.querySelectorAll(".header-row .cell[data-field]").forEach((o) => {
+      const r = o.getAttribute("data-field");
+      if (!r) return;
+      const s = le(this.sortModel, r), l = ae(this.sortModel, r);
+      if (o.querySelector(".sort-index")?.remove(), l) {
+        o.querySelector('[part~="sort-indicator"], .sort-indicator')?.remove(), o.setAttribute("data-sort", l);
         const d = document.createElement("span");
-        if (d.className = "sort-indicator", d.style.marginLeft = "4px", d.style.opacity = "0.8", d.textContent = l === "asc" ? "▲" : "▼", r.appendChild(d), t && this.sortModel.length > 1 && s !== void 0) {
+        if (d.className = "sort-indicator", d.style.marginLeft = "4px", d.style.opacity = "0.8", d.textContent = l === "asc" ? "▲" : "▼", o.appendChild(d), t && this.sortModel.length > 1 && s !== void 0) {
           const u = document.createElement("span");
-          u.className = "sort-index", u.textContent = String(s), r.appendChild(u);
+          u.className = "sort-index", u.textContent = String(s), o.appendChild(u);
         }
       } else
-        r.removeAttribute("data-sort");
+        o.removeAttribute("data-sort");
     });
   }
   // ===== Public API =====
@@ -2279,7 +2279,7 @@ class At extends y {
    * Return sort state for a column if it's in the sort model.
    */
   getColumnState(e) {
-    const t = this.sortModel.findIndex((r) => r.field === e);
+    const t = this.sortModel.findIndex((o) => o.field === e);
     return t === -1 ? void 0 : {
       sort: {
         direction: this.sortModel[t].direction,
@@ -2293,14 +2293,14 @@ class At extends y {
    */
   applyColumnState(e, t) {
     if (!t.sort) {
-      this.sortModel = this.sortModel.filter((o) => o.field !== e);
+      this.sortModel = this.sortModel.filter((r) => r.field !== e);
       return;
     }
-    const n = this.sortModel.findIndex((o) => o.field === e), r = {
+    const n = this.sortModel.findIndex((r) => r.field === e), o = {
       field: e,
       direction: t.sort.direction
     };
-    n !== -1 ? this.sortModel[n] = r : this.sortModel.splice(t.sort.priority, 0, r);
+    n !== -1 ? this.sortModel[n] = o : this.sortModel.splice(t.sort.priority, 0, o);
   }
   // ===== Styles =====
   styles = `
@@ -2335,7 +2335,7 @@ function Qe(i) {
 function Ze(i) {
   return i.filter((e) => e.sticky === "right");
 }
-function O(i) {
+function H(i) {
   return i.some((e) => e.sticky === "left" || e.sticky === "right");
 }
 function de(i, e) {
@@ -2343,22 +2343,22 @@ function de(i, e) {
   if (!t) return;
   const n = Array.from(t.querySelectorAll(".header-row .cell"));
   if (!n.length) return;
-  const r = /* @__PURE__ */ new Map();
+  const o = /* @__PURE__ */ new Map();
   e.forEach((l, a) => {
-    l.field && r.set(l.field, a);
+    l.field && o.set(l.field, a);
   });
-  let o = 0;
+  let r = 0;
   for (const l of e)
     if (l.sticky === "left") {
-      const a = r.get(l.field), c = n.find((d) => d.getAttribute("data-field") === l.field);
-      c && (c.classList.add("sticky-left"), c.style.left = o + "px", a !== void 0 && t.querySelectorAll(`.data-grid-row .cell[data-col="${a}"]`).forEach((d) => {
-        d.classList.add("sticky-left"), d.style.left = o + "px";
-      }), o += c.offsetWidth);
+      const a = o.get(l.field), c = n.find((d) => d.getAttribute("data-field") === l.field);
+      c && (c.classList.add("sticky-left"), c.style.left = r + "px", a !== void 0 && t.querySelectorAll(`.data-grid-row .cell[data-col="${a}"]`).forEach((d) => {
+        d.classList.add("sticky-left"), d.style.left = r + "px";
+      }), r += c.offsetWidth);
     }
   let s = 0;
   for (const l of [...e].reverse())
     if (l.sticky === "right") {
-      const a = r.get(l.field), c = n.find((d) => d.getAttribute("data-field") === l.field);
+      const a = o.get(l.field), c = n.find((d) => d.getAttribute("data-field") === l.field);
       c && (c.classList.add("sticky-right"), c.style.right = s + "px", a !== void 0 && t.querySelectorAll(`.data-grid-row .cell[data-col="${a}"]`).forEach((d) => {
         d.classList.add("sticky-right"), d.style.right = s + "px";
       }), s += c.offsetWidth);
@@ -2393,17 +2393,17 @@ class _t extends y {
    */
   static detect(e, t) {
     const n = t?.columns;
-    return Array.isArray(n) ? O(n) : !1;
+    return Array.isArray(n) ? H(n) : !1;
   }
   // ===== Hooks =====
   processColumns(e) {
-    return this.config.enabled ? (this.isApplied = O([...e]), [...e]) : (this.isApplied = !1, [...e]);
+    return this.config.enabled ? (this.isApplied = H([...e]), [...e]) : (this.isApplied = !1, [...e]);
   }
   afterRender() {
     if (!this.config.enabled || !this.isApplied)
       return;
     const e = this.grid, t = [...this.columns];
-    if (!O(t)) {
+    if (!H(t)) {
       ce(e), this.isApplied = !1;
       return;
     }
@@ -2445,10 +2445,10 @@ function W(i, e) {
   t.className = "tbw-pinned-rows", t.setAttribute("role", "status"), t.setAttribute("aria-live", "polite");
   const n = document.createElement("div");
   n.className = "tbw-pinned-rows-left";
-  const r = document.createElement("div");
-  r.className = "tbw-pinned-rows-center";
   const o = document.createElement("div");
-  if (o.className = "tbw-pinned-rows-right", i.showRowCount !== !1) {
+  o.className = "tbw-pinned-rows-center";
+  const r = document.createElement("div");
+  if (r.className = "tbw-pinned-rows-right", i.showRowCount !== !1) {
     const s = document.createElement("span");
     s.className = "tbw-status-panel tbw-status-panel-row-count", s.textContent = `Total: ${e.totalRows} rows`, n.appendChild(s);
   }
@@ -2458,7 +2458,7 @@ function W(i, e) {
   }
   if (i.showSelectedCount && e.selectedRows > 0) {
     const s = document.createElement("span");
-    s.className = "tbw-status-panel tbw-status-panel-selected-count", s.textContent = `Selected: ${e.selectedRows}`, o.appendChild(s);
+    s.className = "tbw-status-panel tbw-status-panel-selected-count", s.textContent = `Selected: ${e.selectedRows}`, r.appendChild(s);
   }
   if (i.customPanels)
     for (const s of i.customPanels) {
@@ -2468,14 +2468,14 @@ function W(i, e) {
           n.appendChild(l);
           break;
         case "center":
-          r.appendChild(l);
+          o.appendChild(l);
           break;
         case "right":
-          o.appendChild(l);
+          r.appendChild(l);
           break;
       }
     }
-  return t.appendChild(n), t.appendChild(r), t.appendChild(o), t;
+  return t.appendChild(n), t.appendChild(o), t.appendChild(r), t;
 }
 function ue(i) {
   const e = document.createElement("div");
@@ -2483,27 +2483,27 @@ function ue(i) {
 }
 function he(i, e, t, n) {
   i.innerHTML = "";
-  for (const r of e) {
-    const o = document.createElement("div");
-    if (o.className = "tbw-aggregation-row", o.setAttribute("role", "row"), r.id && o.setAttribute("data-aggregation-id", r.id), r.fullWidth) {
+  for (const o of e) {
+    const r = document.createElement("div");
+    if (r.className = "tbw-aggregation-row", r.setAttribute("role", "row"), o.id && r.setAttribute("data-aggregation-id", o.id), o.fullWidth) {
       const s = document.createElement("div");
-      s.className = "tbw-aggregation-cell tbw-aggregation-cell-full", s.style.gridColumn = "1 / -1", s.textContent = r.label || "", o.appendChild(s);
+      s.className = "tbw-aggregation-cell tbw-aggregation-cell-full", s.style.gridColumn = "1 / -1", s.textContent = o.label || "", r.appendChild(s);
     } else
       for (const s of t) {
         const l = document.createElement("div");
         l.className = "tbw-aggregation-cell", l.setAttribute("data-field", s.field);
         let a;
-        const c = r.aggregators?.[s.field];
+        const c = o.aggregators?.[s.field];
         if (c) {
           const d = xe(c);
           d && (a = d(n, s.field, s));
-        } else if (r.cells && Object.prototype.hasOwnProperty.call(r.cells, s.field)) {
-          const d = r.cells[s.field];
+        } else if (o.cells && Object.prototype.hasOwnProperty.call(o.cells, s.field)) {
+          const d = o.cells[s.field];
           typeof d == "function" ? a = d(n, s.field, s) : a = d;
         }
-        l.textContent = a != null ? String(a) : "", o.appendChild(l);
+        l.textContent = a != null ? String(a) : "", r.appendChild(l);
       }
-    i.appendChild(o);
+    i.appendChild(r);
   }
 }
 function et(i, e) {
@@ -2512,10 +2512,10 @@ function et(i, e) {
   const n = i.render(e);
   return typeof n == "string" ? t.innerHTML = n : t.appendChild(n), t;
 }
-function fe(i, e, t, n, r) {
+function fe(i, e, t, n, o) {
   return {
     totalRows: i.length,
-    filteredRows: r?.cachedResult?.length ?? i.length,
+    filteredRows: o?.cachedResult?.length ?? i.length,
     selectedRows: n?.selected?.size ?? 0,
     columns: e,
     rows: i,
@@ -2553,12 +2553,12 @@ class It extends y {
     if (!e) return;
     const t = e.querySelector(".tbw-scroll-area") ?? e.querySelector(".tbw-grid-content") ?? e.children[0];
     if (!t) return;
-    const n = this.getSelectionState(), r = this.getFilterState(), o = fe(
+    const n = this.getSelectionState(), o = this.getFilterState(), r = fe(
       this.rows,
       this.columns,
       this.grid,
       n,
-      r
+      o
     ), s = this.config.aggregationRows || [], l = s.filter((h) => h.position === "top"), a = s.filter((h) => h.position !== "top");
     if (l.length > 0) {
       if (!this.topAggregationContainer) {
@@ -2573,12 +2573,12 @@ class It extends y {
         this.rows
       );
     } else this.topAggregationContainer && (this.topAggregationContainer.remove(), this.topAggregationContainer = null);
-    const c = this.config.showRowCount !== !1 || this.config.showSelectedCount && o.selectedRows > 0 || this.config.showFilteredCount && o.filteredRows !== o.totalRows || this.config.customPanels && this.config.customPanels.length > 0, d = c && this.config.position !== "top", u = a.length > 0 || d;
+    const c = this.config.showRowCount !== !1 || this.config.showSelectedCount && r.selectedRows > 0 || this.config.showFilteredCount && r.filteredRows !== r.totalRows || this.config.customPanels && this.config.customPanels.length > 0, d = c && this.config.position !== "top", u = a.length > 0 || d;
     if (c && this.config.position === "top")
       if (!this.infoBarElement)
-        this.infoBarElement = W(this.config, o), t.insertBefore(this.infoBarElement, t.firstChild);
+        this.infoBarElement = W(this.config, r), t.insertBefore(this.infoBarElement, t.firstChild);
       else {
-        const h = W(this.config, o);
+        const h = W(this.config, r);
         this.infoBarElement.replaceWith(h), this.infoBarElement = h;
       }
     else this.config.position === "top" && this.infoBarElement && (this.infoBarElement.remove(), this.infoBarElement = null);
@@ -2587,7 +2587,7 @@ class It extends y {
       a,
       this.visibleColumns,
       this.rows
-    )), d && (this.infoBarElement = W(this.config, o), this.footerWrapper.appendChild(this.infoBarElement))) : this.cleanupFooter();
+    )), d && (this.infoBarElement = W(this.config, r), this.footerWrapper.appendChild(this.infoBarElement))) : this.cleanupFooter();
   }
   // ===== Private Methods =====
   cleanup() {
@@ -2760,36 +2760,36 @@ function nt(i) {
 function $(i, e) {
   return [...i, e].join("|");
 }
-function rt(i, e) {
-  const t = e.rowGroupFields ?? [], n = e.columnGroupFields ?? [], r = e.valueFields ?? [], o = ot(i, n), s = it(i, t), l = st(s, n, o, r, 0), a = lt(l, o, r), c = Object.values(a).reduce((d, u) => d + u, 0);
+function ot(i, e) {
+  const t = e.rowGroupFields ?? [], n = e.columnGroupFields ?? [], o = e.valueFields ?? [], r = rt(i, n), s = it(i, t), l = st(s, n, r, o, 0), a = lt(l, r, o), c = Object.values(a).reduce((d, u) => d + u, 0);
   return {
     rows: l,
-    columnKeys: o,
+    columnKeys: r,
     totals: a,
     grandTotal: c
   };
 }
-function ot(i, e) {
+function rt(i, e) {
   if (e.length === 0) return ["value"];
   const t = /* @__PURE__ */ new Set();
   for (const n of i) {
-    const r = e.map((o) => String(n[o] ?? "")).join("|");
-    t.add(r);
+    const o = e.map((r) => String(n[r] ?? "")).join("|");
+    t.add(o);
   }
   return [...t].sort();
 }
 function it(i, e) {
   const t = /* @__PURE__ */ new Map();
   for (const n of i) {
-    const r = e.map((s) => String(n[s] ?? "")).join("|");
-    t.has(r) || t.set(r, []);
-    const o = t.get(r);
-    o && o.push(n);
+    const o = e.map((s) => String(n[s] ?? "")).join("|");
+    t.has(o) || t.set(o, []);
+    const r = t.get(o);
+    r && r.push(n);
   }
   return t;
 }
-function st(i, e, t, n, r) {
-  const o = [];
+function st(i, e, t, n, o) {
+  const r = [];
   for (const [s, l] of i) {
     const a = {};
     let c = 0;
@@ -2798,22 +2798,22 @@ function st(i, e, t, n, r) {
         const f = (e.length > 0 ? l.filter((S) => e.map((R) => String(S[R] ?? "")).join("|") === d) : l).map((S) => Number(S[u.field]) || 0), g = nt(u.aggFunc), m = f.length > 0 ? g(f) : null, b = $([d], u.field);
         a[b] = m, m !== null && (c += m);
       }
-    o.push({
+    r.push({
       rowKey: s,
       rowLabel: s || "(blank)",
-      depth: r,
+      depth: o,
       values: a,
       total: c,
       isGroup: !1
     });
   }
-  return o;
+  return r;
 }
 function lt(i, e, t) {
   const n = {};
-  for (const r of e)
-    for (const o of t) {
-      const s = $([r], o.field);
+  for (const o of e)
+    for (const r of t) {
+      const s = $([o], r.field);
       n[s] = i.reduce((l, a) => l + (a.values[s] ?? 0), 0);
     }
   return n;
@@ -2822,8 +2822,8 @@ function at(i) {
   const e = [];
   function t(n) {
     if (e.push(n), n.children)
-      for (const r of n.children)
-        t(r);
+      for (const o of n.children)
+        t(o);
   }
   for (const n of i)
     t(n);
@@ -2853,7 +2853,7 @@ class Tt extends y {
     if (!this.config.enabled || !this.isActive)
       return [...e];
     const t = tt(this.config);
-    return t.length > 0 ? (this.warn(`Config errors: ${t.join(", ")}`), [...e]) : (this.pivotResult = rt(e, this.config), at(this.pivotResult.rows).map((n) => ({
+    return t.length > 0 ? (this.warn(`Config errors: ${t.join(", ")}`), [...e]) : (this.pivotResult = ot(e, this.config), at(this.pivotResult.rows).map((n) => ({
       __pivotRowKey: n.rowKey,
       __pivotLabel: n.rowLabel,
       __pivotDepth: n.depth,
@@ -2872,11 +2872,11 @@ class Tt extends y {
       width: 200
     });
     for (const n of this.pivotResult.columnKeys)
-      for (const r of this.config.valueFields ?? []) {
-        const o = $([n], r.field);
+      for (const o of this.config.valueFields ?? []) {
+        const r = $([n], o.field);
         t.push({
-          field: o,
-          header: `${n} - ${r.header || r.field} (${r.aggFunc})`,
+          field: r,
+          header: `${n} - ${o.header || o.field} (${o.aggFunc})`,
           width: 120,
           type: "number"
         });
@@ -2958,8 +2958,8 @@ function dt(i) {
 }
 function ge(i, e, t) {
   if (e === t || e < 0 || e >= i.length || t < 0 || t > i.length) return i;
-  const n = [...i], [r] = n.splice(e, 1);
-  return n.splice(t, 0, r), n;
+  const n = [...i], [o] = n.splice(e, 1);
+  return n.splice(t, 0, o), n;
 }
 class Lt extends y {
   name = "reorder";
@@ -2976,19 +2976,19 @@ class Lt extends y {
   draggedField = null;
   draggedIndex = null;
   dropIndex = null;
-  boundReorderRequestHandler = null;
   // ===== Lifecycle =====
   attach(e) {
-    super.attach(e), this.boundReorderRequestHandler = (t) => {
-      const n = t.detail;
-      n?.field && typeof n.toIndex == "number" && this.moveColumn(n.field, n.toIndex);
-    }, e.addEventListener("column-reorder-request", this.boundReorderRequestHandler);
+    super.attach(e), e.addEventListener(
+      "column-reorder-request",
+      (t) => {
+        const n = t.detail;
+        n?.field && typeof n.toIndex == "number" && this.moveColumn(n.field, n.toIndex);
+      },
+      { signal: this.disconnectSignal }
+    );
   }
   detach() {
-    this.boundReorderRequestHandler && this.grid && (this.grid.removeEventListener(
-      "column-reorder-request",
-      this.boundReorderRequestHandler
-    ), this.boundReorderRequestHandler = null), this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null;
+    this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null;
   }
   // ===== Hooks =====
   // Note: No processColumns hook needed - we directly update the grid's column order
@@ -2997,27 +2997,27 @@ class Lt extends y {
     const e = this.shadowRoot;
     if (!e) return;
     e.querySelectorAll(".header-row > .cell").forEach((n) => {
-      const r = n, o = r.getAttribute("data-field");
-      if (!o) return;
-      const s = this.columns.find((l) => l.field === o);
+      const o = n, r = o.getAttribute("data-field");
+      if (!r) return;
+      const s = this.columns.find((l) => l.field === r);
       if (!s || !dt(s)) {
-        r.draggable = !1;
+        o.draggable = !1;
         return;
       }
-      r.draggable = !0, !r.getAttribute("data-dragstart-bound") && (r.setAttribute("data-dragstart-bound", "true"), r.addEventListener("dragstart", (l) => {
-        const c = this.getColumnOrder().indexOf(o);
-        this.isDragging = !0, this.draggedField = o, this.draggedIndex = c, l.dataTransfer && (l.dataTransfer.effectAllowed = "move", l.dataTransfer.setData("text/plain", o)), r.classList.add("dragging");
-      }), r.addEventListener("dragend", () => {
+      o.draggable = !0, !o.getAttribute("data-dragstart-bound") && (o.setAttribute("data-dragstart-bound", "true"), o.addEventListener("dragstart", (l) => {
+        const c = this.getColumnOrder().indexOf(r);
+        this.isDragging = !0, this.draggedField = r, this.draggedIndex = c, l.dataTransfer && (l.dataTransfer.effectAllowed = "move", l.dataTransfer.setData("text/plain", r)), o.classList.add("dragging");
+      }), o.addEventListener("dragend", () => {
         this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null, e.querySelectorAll(".header-row > .cell").forEach((l) => {
           l.classList.remove("dragging", "drop-target", "drop-before", "drop-after");
         });
-      }), r.addEventListener("dragover", (l) => {
-        if (l.preventDefault(), !this.isDragging || this.draggedField === o) return;
-        const a = r.getBoundingClientRect(), c = a.left + a.width / 2, u = this.getColumnOrder().indexOf(o);
-        this.dropIndex = l.clientX < c ? u : u + 1, r.classList.add("drop-target"), r.classList.toggle("drop-before", l.clientX < c), r.classList.toggle("drop-after", l.clientX >= c);
-      }), r.addEventListener("dragleave", () => {
-        r.classList.remove("drop-target", "drop-before", "drop-after");
-      }), r.addEventListener("drop", (l) => {
+      }), o.addEventListener("dragover", (l) => {
+        if (l.preventDefault(), !this.isDragging || this.draggedField === r) return;
+        const a = o.getBoundingClientRect(), c = a.left + a.width / 2, u = this.getColumnOrder().indexOf(r);
+        this.dropIndex = l.clientX < c ? u : u + 1, o.classList.add("drop-target"), o.classList.toggle("drop-before", l.clientX < c), o.classList.toggle("drop-after", l.clientX >= c);
+      }), o.addEventListener("dragleave", () => {
+        o.classList.remove("drop-target", "drop-before", "drop-after");
+      }), o.addEventListener("drop", (l) => {
         l.preventDefault();
         const a = this.draggedField, c = this.draggedIndex, d = this.dropIndex;
         if (!this.isDragging || a === null || c === null || d === null)
@@ -3046,14 +3046,14 @@ class Lt extends y {
    * @param toIndex - The target index
    */
   moveColumn(e, t) {
-    const n = this.getColumnOrder(), r = n.indexOf(e);
-    if (r === -1) return;
-    const o = ge(n, r, t);
-    this.grid.setColumnOrder(o), this.emit("column-move", {
+    const n = this.getColumnOrder(), o = n.indexOf(e);
+    if (o === -1) return;
+    const r = ge(n, o, t);
+    this.grid.setColumnOrder(r), this.emit("column-move", {
       field: e,
-      fromIndex: r,
+      fromIndex: o,
       toIndex: t,
-      columnOrder: o
+      columnOrder: r
     }), this.grid.requestStateChange?.();
   }
   /**
@@ -3112,25 +3112,25 @@ function ct(i, e) {
   };
 }
 function ut(i, e, t) {
-  const n = M(i, t), r = M(e - 1, t), o = [];
-  for (let s = n; s <= r; s++)
-    o.push(s);
-  return o;
+  const n = M(i, t), o = M(e - 1, t), r = [];
+  for (let s = n; s <= o; s++)
+    r.push(s);
+  return r;
 }
 async function pe(i, e, t, n) {
-  const r = ct(e, t);
+  const o = ct(e, t);
   return i.getRows({
-    startRow: r.start,
-    endRow: r.end,
+    startRow: o.start,
+    endRow: o.end,
     sortModel: n.sortModel,
     filterModel: n.filterModel
   });
 }
 function ht(i, e, t) {
-  const n = M(i, e), r = t.get(n);
-  if (!r) return;
-  const o = i % e;
-  return r[o];
+  const n = M(i, e), o = t.get(n);
+  if (!o) return;
+  const r = i % e;
+  return o[r];
 }
 const ft = 100;
 class Mt extends y {
@@ -3161,15 +3161,15 @@ class Mt extends y {
    */
   loadRequiredBlocks() {
     if (!this.dataSource) return;
-    const e = this.grid, t = this.config.cacheBlockSize ?? 100, n = { startRow: e.virtualization.start, endRow: e.virtualization.end }, r = ut(n.startRow, n.endRow, t);
-    for (const o of r)
-      if (!(this.loadedBlocks.has(o) || this.loadingBlocks.has(o))) {
+    const e = this.grid, t = this.config.cacheBlockSize ?? 100, n = { startRow: e.virtualization.start, endRow: e.virtualization.end }, o = ut(n.startRow, n.endRow, t);
+    for (const r of o)
+      if (!(this.loadedBlocks.has(r) || this.loadingBlocks.has(r))) {
         if (this.loadingBlocks.size >= (this.config.maxConcurrentRequests ?? 2))
           break;
-        this.loadingBlocks.add(o), pe(this.dataSource, o, t, {}).then((s) => {
-          this.loadedBlocks.set(o, s.rows), this.totalRowCount = s.totalRowCount, this.loadingBlocks.delete(o), this.requestRender(), this.loadRequiredBlocks();
+        this.loadingBlocks.add(r), pe(this.dataSource, r, t, {}).then((s) => {
+          this.loadedBlocks.set(r, s.rows), this.totalRowCount = s.totalRowCount, this.loadingBlocks.delete(r), this.requestRender(), this.loadRequiredBlocks();
         }).catch(() => {
-          this.loadingBlocks.delete(o);
+          this.loadingBlocks.delete(r);
         });
       }
   }
@@ -3178,8 +3178,8 @@ class Mt extends y {
     if (!this.dataSource) return [...e];
     const t = [];
     for (let n = 0; n < this.totalRowCount; n++) {
-      const r = ht(n, this.config.cacheBlockSize ?? 100, this.loadedBlocks);
-      t.push(r ?? { __loading: !0, __index: n });
+      const o = ht(n, this.config.cacheBlockSize ?? 100, this.loadedBlocks);
+      t.push(o ?? { __loading: !0, __index: n });
     }
     return t;
   }
@@ -3313,22 +3313,22 @@ class qt extends y {
     if (!this.config.enabled) return !1;
     const t = (e.ctrlKey || e.metaKey) && e.key === "z" && !e.shiftKey, n = (e.ctrlKey || e.metaKey) && (e.key === "y" || e.key === "z" && e.shiftKey);
     if (t) {
-      const r = me({ undoStack: this.undoStack, redoStack: this.redoStack });
-      if (r.action) {
-        const o = this.rows;
-        o[r.action.rowIndex] && (o[r.action.rowIndex][r.action.field] = r.action.oldValue), this.undoStack = r.newState.undoStack, this.redoStack = r.newState.redoStack, this.emit("undo", {
-          action: r.action,
+      const o = me({ undoStack: this.undoStack, redoStack: this.redoStack });
+      if (o.action) {
+        const r = this.rows;
+        r[o.action.rowIndex] && (r[o.action.rowIndex][o.action.field] = o.action.oldValue), this.undoStack = o.newState.undoStack, this.redoStack = o.newState.redoStack, this.emit("undo", {
+          action: o.action,
           type: "undo"
         }), this.requestRender();
       }
       return !0;
     }
     if (n) {
-      const r = be({ undoStack: this.undoStack, redoStack: this.redoStack });
-      if (r.action) {
-        const o = this.rows;
-        o[r.action.rowIndex] && (o[r.action.rowIndex][r.action.field] = r.action.newValue), this.undoStack = r.newState.undoStack, this.redoStack = r.newState.redoStack, this.emit("redo", {
-          action: r.action,
+      const o = be({ undoStack: this.undoStack, redoStack: this.redoStack });
+      if (o.action) {
+        const r = this.rows;
+        r[o.action.rowIndex] && (r[o.action.rowIndex][o.action.field] = o.action.newValue), this.undoStack = o.newState.undoStack, this.redoStack = o.newState.redoStack, this.emit("redo", {
+          action: o.action,
           type: "redo"
         }), this.requestRender();
       }
@@ -3346,10 +3346,10 @@ class qt extends y {
    * @param oldValue - The value before the edit
    * @param newValue - The value after the edit
    */
-  recordEdit(e, t, n, r) {
-    const o = wt(e, t, n, r), s = gt(
+  recordEdit(e, t, n, o) {
+    const r = wt(e, t, n, o), s = gt(
       { undoStack: this.undoStack, redoStack: this.redoStack },
-      o,
+      r,
       this.config.maxHistorySize ?? 100
     );
     this.undoStack = s.undoStack, this.redoStack = s.redoStack;
@@ -3559,12 +3559,12 @@ class _ extends y {
   renderPanelContent(e) {
     const t = this.grid, n = document.createElement("div");
     n.className = "tbw-visibility-content";
-    const r = document.createElement("div");
-    r.className = "tbw-visibility-list", n.appendChild(r);
-    const o = document.createElement("button");
-    return o.className = "tbw-visibility-show-all", o.textContent = "Show All", o.addEventListener("click", () => {
-      t.showAllColumns(), this.rebuildToggles(r);
-    }), n.appendChild(o), this.columnListElement = r, this.rebuildToggles(r), e.appendChild(n), () => {
+    const o = document.createElement("div");
+    o.className = "tbw-visibility-list", n.appendChild(o);
+    const r = document.createElement("button");
+    return r.className = "tbw-visibility-show-all", r.textContent = "Show All", r.addEventListener("click", () => {
+      t.showAllColumns(), this.rebuildToggles(o);
+    }), n.appendChild(r), this.columnListElement = o, this.rebuildToggles(o), e.appendChild(n), () => {
       this.columnListElement = null, n.remove();
     };
   }
@@ -3582,10 +3582,10 @@ class _ extends y {
   rebuildToggles(e) {
     const t = this.grid, n = this.hasReorderPlugin();
     e.innerHTML = "";
-    const r = t.getAllColumns();
-    for (let o = 0; o < r.length; o++) {
-      const s = r[o], l = s.header || s.field, a = document.createElement("div");
-      a.className = s.lockVisible ? "tbw-visibility-row locked" : "tbw-visibility-row", a.setAttribute("data-field", s.field), a.setAttribute("data-index", String(o)), n && we(s) && (a.draggable = !0, a.classList.add("reorderable"), this.setupDragListeners(a, s.field, o, e));
+    const o = t.getAllColumns();
+    for (let r = 0; r < o.length; r++) {
+      const s = o[r], l = s.header || s.field, a = document.createElement("div");
+      a.className = s.lockVisible ? "tbw-visibility-row locked" : "tbw-visibility-row", a.setAttribute("data-field", s.field), a.setAttribute("data-index", String(r)), n && we(s) && (a.draggable = !0, a.classList.add("reorderable"), this.setupDragListeners(a, s.field, r, e));
       const c = document.createElement("label");
       c.className = "tbw-visibility-label";
       const d = document.createElement("input");
@@ -3604,23 +3604,23 @@ class _ extends y {
    * Set up drag-and-drop event listeners for a row.
    * On drop, emits a 'column-reorder-request' event for other plugins to handle.
    */
-  setupDragListeners(e, t, n, r) {
-    e.addEventListener("dragstart", (o) => {
-      this.isDragging = !0, this.draggedField = t, this.draggedIndex = n, o.dataTransfer && (o.dataTransfer.effectAllowed = "move", o.dataTransfer.setData("text/plain", t)), e.classList.add("dragging");
+  setupDragListeners(e, t, n, o) {
+    e.addEventListener("dragstart", (r) => {
+      this.isDragging = !0, this.draggedField = t, this.draggedIndex = n, r.dataTransfer && (r.dataTransfer.effectAllowed = "move", r.dataTransfer.setData("text/plain", t)), e.classList.add("dragging");
     }), e.addEventListener("dragend", () => {
-      this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null, r.querySelectorAll(".tbw-visibility-row").forEach((o) => {
-        o.classList.remove("dragging", "drop-target", "drop-before", "drop-after");
+      this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null, o.querySelectorAll(".tbw-visibility-row").forEach((r) => {
+        r.classList.remove("dragging", "drop-target", "drop-before", "drop-after");
       });
-    }), e.addEventListener("dragover", (o) => {
-      if (o.preventDefault(), !this.isDragging || this.draggedField === t) return;
+    }), e.addEventListener("dragover", (r) => {
+      if (r.preventDefault(), !this.isDragging || this.draggedField === t) return;
       const s = e.getBoundingClientRect(), l = s.top + s.height / 2;
-      this.dropIndex = o.clientY < l ? n : n + 1, r.querySelectorAll(".tbw-visibility-row").forEach((a) => {
+      this.dropIndex = r.clientY < l ? n : n + 1, o.querySelectorAll(".tbw-visibility-row").forEach((a) => {
         a !== e && a.classList.remove("drop-target", "drop-before", "drop-after");
-      }), e.classList.add("drop-target"), e.classList.toggle("drop-before", o.clientY < l), e.classList.toggle("drop-after", o.clientY >= l);
+      }), e.classList.add("drop-target"), e.classList.toggle("drop-before", r.clientY < l), e.classList.toggle("drop-after", r.clientY >= l);
     }), e.addEventListener("dragleave", () => {
       e.classList.remove("drop-target", "drop-before", "drop-after");
-    }), e.addEventListener("drop", (o) => {
-      o.preventDefault();
+    }), e.addEventListener("drop", (r) => {
+      r.preventDefault();
       const s = this.draggedField, l = this.draggedIndex, a = this.dropIndex;
       if (!this.isDragging || s === null || l === null || a === null)
         return;
@@ -3632,7 +3632,7 @@ class _ extends y {
           toIndex: c
         };
         this.emit("column-reorder-request", d), setTimeout(() => {
-          this.rebuildToggles(r);
+          this.rebuildToggles(o);
         }, 0);
       }
     });
@@ -3742,8 +3742,8 @@ export {
   St as ExportPlugin,
   E as FilteringPlugin,
   Bt as FitModeEnum,
-  Ht as GridCSSVars,
-  Ot as GridClasses,
+  Ot as GridCSSVars,
+  Ht as GridClasses,
   Wt as GridDataAttrs,
   Kt as GridElement,
   Vt as GridSelectors,