@toolbox-web/grid 0.2.6 → 0.2.7

package/all.js

@@ -1,5 +1,5 @@
-import { BaseGridPlugin as y, DEFAULT_GRID_ICONS as Ge, runAggregator as se, PLUGIN_QUERIES as Ke, getAggregator as le, getValueAggregator as Oe } from "./index.js";
-import { DGEvents as Pn, DataGridElement as Kn, FitModeEnum as qn, GridCSSVars as Dn, GridClasses as Hn, GridDataAttrs as Gn, DataGridElement as On, GridSelectors as Bn, PluginEvents as Vn, PluginManager as zn, aggregatorRegistry as Wn, listAggregators as $n, registerAggregator as jn, runValueAggregator as Un, unregisterAggregator as Yn } from "./index.js";
+import { B as v, D as Ve, r as se, P as N, g as le, a as Oe, e as Ge } from "./index-DG2CZ_Zo.js";
+import { k as Kn, i as Nn, b as qn, F as Dn, o as Hn, G as Vn, p as On, b as Gn, q as Bn, j as zn, c as Wn, d as $n, m as jn, n as Un, l as Yn, f as Zn, h as Xn, u as Jn } from "./index-DG2CZ_Zo.js";
 function Be(s, e, t, n) {
   if (n.processCell)
     return n.processCell(s, e, t);
@@ -10,7 +10,7 @@ function Be(s, e, t, n) {
 `;
   return n.quoteStrings || o.includes(i) || o.includes(r) || o.includes('"') ? `"${o.replace(/"/g, '""')}"` : o;
 }
-function H(s) {
+function V(s) {
   const { rows: e, columns: t, selectedIndices: n, config: o } = s, i = o.delimiter ?? "	", r = o.newline ?? `
 `, l = t.filter((u) => !u.hidden && !u.field.startsWith("__")), a = [];
   if (o.includeHeaders) {
@@ -25,13 +25,13 @@ function H(s) {
     const h = e[u];
     if (!h) continue;
     const g = l.map(
-      (p) => Be(h[p.field], p.field, h, o)
+      (f) => Be(h[f.field], f.field, h, o)
     );
     a.push(g.join(i));
   }
   return a.join(r);
 }
-async function G(s) {
+async function O(s) {
   try {
     return await navigator.clipboard.writeText(s), !0;
   } catch {
@@ -60,7 +60,7 @@ async function de() {
     return "";
   }
 }
-class bn extends y {
+class bn extends v {
   name = "clipboard";
   version = "1.0.0";
   get defaultConfig() {
@@ -95,7 +95,7 @@ class bn extends y {
     const t = this.#n(), n = t?.getSelectedRows() ?? [], o = n.length > 0, i = t?.getRanges() ?? [], r = i.length > 0, l = t?.getSelectedCell() != null;
     let a, d, c;
     if (o && t)
-      a = H({
+      a = V({
         rows: this.rows,
         columns: [...this.columns],
         selectedIndices: n,
@@ -118,7 +118,7 @@ class bn extends y {
       if (!u) return;
       a = u.text, d = 1, c = 1;
     }
-    G(a).then(() => {
+    O(a).then(() => {
       this.lastCopied = { text: a, timestamp: Date.now() }, this.emit("copy", { text: a, rowCount: d, columnCount: c });
     });
   }
@@ -170,17 +170,17 @@ class bn extends y {
     const { startRow: t, startCol: n, endRow: o, endCol: i } = e, r = Math.min(t, o), l = Math.max(t, o), a = Math.min(n, i), d = Math.max(n, i), c = this.config.delimiter ?? "	", u = this.config.newline ?? `
 `, h = [], g = this.columns.slice(a, d + 1);
     if (this.config.includeHeaders) {
-      const p = g.map((m) => m.header || m.field);
-      h.push(p.join(c));
+      const f = g.map((m) => m.header || m.field);
+      h.push(f.join(c));
     }
-    for (let p = r; p <= l; p++) {
-      const m = this.rows[p];
+    for (let f = r; f <= l; f++) {
+      const m = this.rows[f];
       if (!m) continue;
-      const f = g.map((b) => {
-        const E = m[b.field];
+      const p = g.map((R) => {
+        const E = m[R.field];
         return E == null ? "" : E instanceof Date ? E.toISOString() : String(E);
       });
-      h.push(f.join(c));
+      h.push(p.join(c));
     }
     return {
       text: h.join(u),
@@ -219,13 +219,13 @@ class bn extends y {
    * @returns The copied text
    */
   async copy() {
-    const t = this.#n()?.getSelectedRows() ?? [], n = H({
+    const t = this.#n()?.getSelectedRows() ?? [], n = V({
       rows: this.rows,
       columns: [...this.columns],
       selectedIndices: t,
       config: this.config
     });
-    return await G(n), this.lastCopied = { text: n, timestamp: Date.now() }, n;
+    return await O(n), this.lastCopied = { text: n, timestamp: Date.now() }, n;
   }
   /**
    * Copy specific rows by index to clipboard.
@@ -233,13 +233,13 @@ class bn extends y {
    * @returns The copied text
    */
   async copyRows(e) {
-    const t = H({
+    const t = V({
       rows: this.rows,
       columns: [...this.columns],
       selectedIndices: e,
       config: this.config
     });
-    return await G(t), this.lastCopied = { text: t, timestamp: Date.now() }, t;
+    return await O(t), this.lastCopied = { text: t, timestamp: Date.now() }, t;
   }
   /**
    * Read and parse clipboard content.
@@ -259,7 +259,7 @@ class bn extends y {
   // #endregion
 }
 const ce = 100;
-function Q(s) {
+function ee(s) {
   if (s == null)
     return ce;
   if (typeof s == "number")
@@ -268,23 +268,23 @@ function Q(s) {
   return isNaN(e) ? ce : e;
 }
 function ue(s) {
-  return s.map((e) => Q(e.width));
+  return s.map((e) => ee(e.width));
 }
 function he(s) {
   const e = [];
   let t = 0;
   for (const n of s)
-    e.push(t), t += Q(n.width);
+    e.push(t), t += ee(n.width);
   return e;
 }
 function ge(s) {
-  return s.reduce((e, t) => e + Q(t.width), 0);
+  return s.reduce((e, t) => e + ee(t.width), 0);
 }
-function Ve(s, e, t, n, o) {
+function ze(s, e, t, n, o) {
   const i = t.length;
   if (i === 0)
     return { startCol: 0, endCol: 0, visibleColumns: [] };
-  let r = ze(s, t, n);
+  let r = We(s, t, n);
   r = Math.max(0, r - o);
   const l = s + e;
   let a = r;
@@ -301,7 +301,7 @@ function Ve(s, e, t, n, o) {
     d.push(c);
   return { startCol: r, endCol: a, visibleColumns: d };
 }
-function ze(s, e, t) {
+function We(s, e, t) {
   let n = 0, o = e.length - 1;
   for (; n < o; ) {
     const i = Math.floor((n + o) / 2);
@@ -309,10 +309,10 @@ function ze(s, e, t) {
   }
   return n;
 }
-function We(s, e, t) {
+function $e(s, e, t) {
   return t ? s > e : !1;
 }
-class vn extends y {
+class vn extends v {
   name = "columnVirtualization";
   version = "1.0.0";
   get defaultConfig() {
@@ -343,10 +343,10 @@ class vn extends y {
   // #endregion
   // #region Hooks
   processColumns(e) {
-    const t = We(e.length, this.config.threshold ?? 30, this.config.autoEnable ?? !0);
+    const t = $e(e.length, this.config.threshold ?? 30, this.config.autoEnable ?? !0);
     if (this.isVirtualized = t ?? !1, this.columnWidths = ue(e), this.columnOffsets = he(e), this.totalWidth = ge(e), !t)
       return this.startCol = 0, this.endCol = e.length - 1, [...e];
-    const n = this.grid.clientWidth || 800, o = Ve(
+    const n = this.grid.clientWidth || 800, o = ze(
       this.scrollLeft,
       n,
       this.columnOffsets,
@@ -406,14 +406,14 @@ class vn extends y {
   }
   // #endregion
 }
-const $e = ".tbw-context-menu{position:fixed;background:light-dark(#f5f5f5,#2a2a2a);color:light-dark(#222,#eee);border:1px solid light-dark(#d0d0d4,#454545);border-radius:4px;box-shadow:0 2px 10px #00000026;min-width:160px;padding:4px 0;z-index:10000;font-size:13px;font-family:system-ui,sans-serif}.tbw-context-menu-item{display:flex;align-items:center;padding:6px 12px;cursor:pointer;gap:8px}.tbw-context-menu-item:hover:not(.disabled){background:light-dark(#e8e8e8,#3a3a3a)}.tbw-context-menu-item.disabled{opacity:.5;cursor:default}.tbw-context-menu-item.danger{color:light-dark(#c00,#f66)}.tbw-context-menu-icon{width:16px;text-align:center}.tbw-context-menu-label{flex:1}.tbw-context-menu-shortcut{color:light-dark(#888,#888);font-size:11px}.tbw-context-menu-arrow{font-size:10px;color:light-dark(#888,#888)}.tbw-context-menu-separator{height:1px;background:light-dark(#d0d0d4,#454545);margin:4px 0}";
-function Y(s, e) {
+const je = ".tbw-context-menu{position:fixed;background:light-dark(#f5f5f5,#2a2a2a);color:light-dark(#222,#eee);border:1px solid light-dark(#d0d0d4,#454545);border-radius:4px;box-shadow:0 2px 10px #00000026;min-width:160px;padding:4px 0;z-index:10000;font-size:13px;font-family:system-ui,sans-serif}.tbw-context-menu-item{display:flex;align-items:center;padding:6px 12px;cursor:pointer;gap:8px}.tbw-context-menu-item:hover:not(.disabled){background:light-dark(#e8e8e8,#3a3a3a)}.tbw-context-menu-item.disabled{opacity:.5;cursor:default}.tbw-context-menu-item.danger{color:light-dark(#c00,#f66)}.tbw-context-menu-icon{width:16px;text-align:center}.tbw-context-menu-label{flex:1}.tbw-context-menu-shortcut{color:light-dark(#888,#888);font-size:11px}.tbw-context-menu-arrow{font-size:10px;color:light-dark(#888,#888)}.tbw-context-menu-separator{height:1px;background:light-dark(#d0d0d4,#454545);margin:4px 0}";
+function Z(s, e) {
   return (typeof s == "function" ? s(e) : s).filter((n) => !(n.hidden === !0 || typeof n.hidden == "function" && n.hidden(e)));
 }
-function je(s, e) {
+function Ue(s, e) {
   return s.disabled === !0 ? !0 : typeof s.disabled == "function" ? s.disabled(e) : !1;
 }
-function Z(s, e, t, n = Ge.submenuArrow) {
+function X(s, e, t, n = Ve.submenuArrow) {
   const o = document.createElement("div");
   o.className = "tbw-context-menu", o.setAttribute("role", "menu");
   for (const i of s) {
@@ -424,7 +424,7 @@ function Z(s, e, t, n = Ge.submenuArrow) {
     }
     const r = document.createElement("div");
     r.className = "tbw-context-menu-item", i.cssClass && r.classList.add(i.cssClass), r.setAttribute("role", "menuitem"), r.setAttribute("data-id", i.id);
-    const l = je(i, e);
+    const l = Ue(i, e);
     if (l && (r.classList.add("disabled"), r.setAttribute("aria-disabled", "true")), i.icon) {
       const d = document.createElement("span");
       d.className = "tbw-context-menu-icon", d.innerHTML = i.icon, r.appendChild(d);
@@ -438,7 +438,7 @@ function Z(s, e, t, n = Ge.submenuArrow) {
       const d = document.createElement("span");
       d.className = "tbw-context-menu-arrow", typeof n == "string" ? d.innerHTML = n : n instanceof HTMLElement && d.appendChild(n.cloneNode(!0)), r.appendChild(d), r.addEventListener("mouseenter", () => {
         if (r.querySelector(".tbw-context-menu") || !i.subMenu) return;
-        const u = Y(i.subMenu, e), h = Z(u, e, t, n);
+        const u = Z(i.subMenu, e), h = X(u, e, t, n);
         h.classList.add("tbw-context-submenu"), h.style.position = "absolute", h.style.left = "100%", h.style.top = "0", r.style.position = "relative", r.appendChild(h);
       }), r.addEventListener("mouseleave", () => {
         const c = r.querySelector(".tbw-context-menu");
@@ -451,13 +451,13 @@ function Z(s, e, t, n = Ge.submenuArrow) {
   }
   return o;
 }
-function pe(s, e, t) {
+function fe(s, e, t) {
   s.style.position = "fixed", s.style.left = `${e}px`, s.style.top = `${t}px`, s.style.visibility = "hidden", s.style.zIndex = "10000";
   const n = s.getBoundingClientRect(), o = window.innerWidth, i = window.innerHeight;
   let r = e, l = t;
   e + n.width > o && (r = e - n.width), t + n.height > i && (l = t - n.height), r = Math.max(0, r), l = Math.max(0, l), s.style.left = `${r}px`, s.style.top = `${l}px`, s.style.visibility = "visible";
 }
-let I = null, L = null, A = null, O = 0;
+let _ = null, I = null, k = null, G = 0;
 const B = [
   {
     id: "copy",
@@ -476,7 +476,7 @@ const B = [
     }
   }
 ];
-class xn extends y {
+class xn extends v {
   name = "contextMenu";
   version = "1.0.0";
   get defaultConfig() {
@@ -492,7 +492,7 @@ class xn extends y {
   // #endregion
   // #region Lifecycle
   attach(e) {
-    super.attach(e), this.installGlobalHandlers(), O++;
+    super.attach(e), this.installGlobalHandlers(), G++;
   }
   detach() {
     this.menuElement && (this.menuElement.remove(), this.menuElement = null), this.isOpen = !1, this.params = null, this.uninstallGlobalHandlers();
@@ -500,18 +500,18 @@ class xn extends y {
   // #endregion
   // #region Private Methods
   installGlobalHandlers() {
-    !A && typeof document < "u" && (A = document.createElement("style"), A.id = "tbw-context-menu-styles", A.textContent = $e, document.head.appendChild(A)), I || (I = () => {
+    !k && typeof document < "u" && (k = document.createElement("style"), k.id = "tbw-context-menu-styles", k.textContent = je, document.head.appendChild(k)), _ || (_ = () => {
       document.querySelectorAll(".tbw-context-menu").forEach((t) => t.remove());
-    }, document.addEventListener("click", I)), L || (L = (e) => {
+    }, document.addEventListener("click", _)), I || (I = (e) => {
       e.key === "Escape" && document.querySelectorAll(".tbw-context-menu").forEach((n) => n.remove());
-    }, document.addEventListener("keydown", L));
+    }, document.addEventListener("keydown", I));
   }
   /**
    * Clean up global handlers when the last instance detaches.
    * Uses reference counting to ensure handlers persist while any grid uses the plugin.
    */
   uninstallGlobalHandlers() {
-    O--, !(O > 0) && (I && (document.removeEventListener("click", I), I = null), L && (document.removeEventListener("keydown", L), L = null), A && (A.remove(), A = null));
+    G--, !(G > 0) && (_ && (document.removeEventListener("click", _), _ = null), I && (document.removeEventListener("keydown", I), I = null), k && (k.remove(), k = null));
   }
   // #endregion
   // #region Hooks
@@ -551,15 +551,15 @@ class xn extends y {
       } else
         return;
       this.params = a, this.position = { x: o.clientX, y: o.clientY };
-      const d = Y(this.config.items ?? B, a);
-      d.length && (this.menuElement && this.menuElement.remove(), this.menuElement = Z(
+      const d = Z(this.config.items ?? B, a);
+      d.length && (this.menuElement && this.menuElement.remove(), this.menuElement = X(
         d,
         a,
         (c) => {
           c.action && c.action(a), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
         },
         this.gridIcons.submenuArrow
-      ), document.body.appendChild(this.menuElement), pe(this.menuElement, o.clientX, o.clientY), this.isOpen = !0, this.emit("context-menu-open", { params: a, items: d }));
+      ), document.body.appendChild(this.menuElement), fe(this.menuElement, o.clientX, o.clientY), this.isOpen = !0, this.emit("context-menu-open", { params: a, items: d }));
     }));
   }
   // #endregion
@@ -580,15 +580,15 @@ class xn extends y {
       value: n.value ?? null,
       isHeader: n.isHeader ?? !1,
       event: n.event ?? new MouseEvent("contextmenu")
-    }, i = Y(this.config.items ?? B, o);
-    this.menuElement && this.menuElement.remove(), this.menuElement = Z(
+    }, i = Z(this.config.items ?? B, o);
+    this.menuElement && this.menuElement.remove(), this.menuElement = X(
       i,
       o,
       (r) => {
         r.action && r.action(o), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
       },
       this.gridIcons.submenuArrow
-    ), document.body.appendChild(this.menuElement), pe(this.menuElement, e, t), this.isOpen = !0;
+    ), document.body.appendChild(this.menuElement), fe(this.menuElement, e, t), this.isOpen = !0;
   }
   /**
    * Hide the context menu.
@@ -606,7 +606,7 @@ class xn extends y {
   // #endregion
   // Styles are injected globally via installGlobalHandlers() since menu renders in document.body
 }
-function fe(s, e = !0) {
+function pe(s, e = !0) {
   if (s == null) return "";
   if (s instanceof Date) return s.toISOString();
   if (typeof s == "object") return JSON.stringify(s);
@@ -614,37 +614,37 @@ function fe(s, e = !0) {
   return e && (t.includes(",") || t.includes('"') || t.includes(`
 `) || t.includes("\r")) ? `"${t.replace(/"/g, '""')}"` : t;
 }
-function Ue(s, e, t, n = {}) {
+function Ye(s, e, t, n = {}) {
   const o = n.delimiter ?? ",", i = n.newline ?? `
 `, r = [], l = n.bom ? "\uFEFF" : "";
   if (t.includeHeaders !== !1) {
     const a = e.map((d) => {
       const c = d.header || d.field, u = t.processHeader ? t.processHeader(c, d.field) : c;
-      return fe(u);
+      return pe(u);
     });
     r.push(a.join(o));
   }
   for (const a of s) {
     const d = e.map((c) => {
       let u = a[c.field];
-      return t.processCell && (u = t.processCell(u, c.field, a)), fe(u);
+      return t.processCell && (u = t.processCell(u, c.field, a)), pe(u);
     });
     r.push(d.join(o));
   }
   return l + r.join(i);
 }
-function ee(s, e) {
+function te(s, e) {
   const t = URL.createObjectURL(s), n = document.createElement("a");
   n.href = t, n.download = e, n.style.display = "none", document.body.appendChild(n), n.click(), document.body.removeChild(n), URL.revokeObjectURL(t);
 }
-function Ye(s, e) {
+function Ze(s, e) {
   const t = new Blob([s], { type: "text/csv;charset=utf-8;" });
-  ee(t, e);
+  te(t, e);
 }
 function me(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
 }
-function Ze(s, e, t) {
+function Xe(s, e, t) {
   let n = `<?xml version="1.0" encoding="UTF-8"?>
 <?mso-application progid="Excel.Sheet"?>
 <Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"
@@ -676,13 +676,13 @@ function Ze(s, e, t) {
 </Worksheet>
 </Workbook>`, n;
 }
-function Xe(s, e) {
+function Je(s, e) {
   const t = e.endsWith(".xls") ? e : `${e}.xls`, n = new Blob([s], {
     type: "application/vnd.ms-excel;charset=utf-8;"
   });
-  ee(n, t);
+  te(n, t);
 }
-class yn extends y {
+class yn extends v {
   name = "export";
   version = "1.0.0";
   get defaultConfig() {
@@ -723,27 +723,27 @@ class yn extends y {
     try {
       switch (e) {
         case "csv": {
-          const a = Ue(r, i, o, { bom: !0 });
-          l = l.endsWith(".csv") ? l : `${l}.csv`, Ye(a, l);
+          const a = Ye(r, i, o, { bom: !0 });
+          l = l.endsWith(".csv") ? l : `${l}.csv`, Ze(a, l);
           break;
         }
         case "excel": {
-          const a = Ze(r, i, o);
-          l = l.endsWith(".xls") ? l : `${l}.xls`, Xe(a, l);
+          const a = Xe(r, i, o);
+          l = l.endsWith(".xls") ? l : `${l}.xls`, Je(a, l);
           break;
         }
         case "json": {
           const a = r.map((u) => {
             const h = {};
             for (const g of i) {
-              let p = u[g.field];
-              o.processCell && (p = o.processCell(p, g.field, u)), h[g.field] = p;
+              let f = u[g.field];
+              o.processCell && (f = o.processCell(f, g.field, u)), h[g.field] = f;
             }
             return h;
           }), d = JSON.stringify(a, null, 2);
           l = l.endsWith(".json") ? l : `${l}.json`;
           const c = new Blob([d], { type: "application/json" });
-          ee(c, l);
+          te(c, l);
           break;
         }
       }
@@ -803,7 +803,7 @@ class yn extends y {
   }
   // #endregion
 }
-function Je(s) {
+function Qe(s) {
   const { totalRows: e, viewportHeight: t, scrollTop: n, rowHeight: o, overscan: i } = s, r = Math.ceil(t / o);
   let l = Math.floor(n / o) - i;
   l < 0 && (l = 0);
@@ -815,10 +815,10 @@ function Je(s) {
     totalHeight: e * o
   };
 }
-function Qe(s, e) {
+function et(s, e) {
   return s <= e;
 }
-function et(s, e, t = !1) {
+function tt(s, e, t = !1) {
   const n = s[e.field];
   if (e.operator === "blank")
     return n == null || n === "";
@@ -860,10 +860,10 @@ function et(s, e, t = !1) {
       return !0;
   }
 }
-function tt(s, e, t = !1) {
-  return e.length ? s.filter((n) => e.every((o) => et(n, o, t))) : s;
+function nt(s, e, t = !1) {
+  return e.length ? s.filter((n) => e.every((o) => tt(n, o, t))) : s;
 }
-function nt(s) {
+function ot(s) {
   return JSON.stringify(
     s.map((e) => ({
       field: e.field,
@@ -881,8 +881,8 @@ function we(s, e) {
   }
   return [...t].sort((n, o) => typeof n == "number" && typeof o == "number" ? n - o : String(n).localeCompare(String(o)));
 }
-const ot = '.header-cell.filtered:before{content:"";position:absolute;top:4px;right:4px;width:6px;height:6px;background:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));border-radius:50%}.tbw-filter-btn{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;padding:2px;margin-left:4px;opacity:.4;transition:opacity .15s;color:inherit;vertical-align:middle}.tbw-filter-btn:hover,.tbw-filter-btn.active{opacity:1}.tbw-filter-btn.active{color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6))}', it = ".tbw-filter-panel{position:fixed;background:var(--tbw-filter-panel-bg, var(--tbw-color-panel-bg, light-dark(#eeeeee, #222222)));color:var(--tbw-filter-panel-fg, var(--tbw-color-fg, light-dark(#222222, #eeeeee)));border:1px solid var(--tbw-filter-panel-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:var(--tbw-filter-panel-radius, var(--tbw-border-radius, 4px));box-shadow:0 4px 16px var(--tbw-filter-panel-shadow, var(--tbw-color-shadow, light-dark(rgba(0, 0, 0, .1), rgba(0, 0, 0, .3))));padding:12px;z-index:10000;min-width:200px;max-width:280px;max-height:350px;display:flex;flex-direction:column;font-family:var(--tbw-font-family, system-ui, sans-serif);font-size:var(--tbw-font-size, 13px)}.tbw-filter-search{margin-bottom:8px}.tbw-filter-search-input{width:100%;padding:6px 10px;background:var(--tbw-filter-input-bg, var(--tbw-color-bg, transparent));color:inherit;border:1px solid var(--tbw-filter-input-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:var(--tbw-filter-input-radius, 4px);font-size:inherit;box-sizing:border-box}.tbw-filter-search-input:focus{outline:none;border-color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));box-shadow:0 0 0 2px rgba(from var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6)) r g b / 15%)}.tbw-filter-actions{display:flex;padding:4px 2px;margin-bottom:8px;border-bottom:1px solid var(--tbw-filter-divider, var(--tbw-color-border, light-dark(#d0d0d4, #454545)))}.tbw-filter-action-btn{background:transparent;border:none;color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));cursor:pointer;font-size:12px;padding:2px 0}.tbw-filter-action-btn:hover{text-decoration:underline}.tbw-filter-values{flex:1;overflow-y:auto;margin-bottom:8px;max-height:180px;position:relative}.tbw-filter-values-spacer{width:1px}.tbw-filter-values-content{position:absolute;top:0;left:0;right:0}.tbw-filter-value-item{display:flex;align-items:center;gap:8px;padding:4px 2px;cursor:pointer;border-radius:3px}.tbw-filter-value-item:hover{background:var(--tbw-filter-hover, var(--tbw-color-row-hover, light-dark(#f0f6ff, #1c1c1c)))}.tbw-filter-checkbox{margin:0;cursor:pointer;accent-color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6))}.tbw-filter-no-match{color:var(--tbw-filter-muted, var(--tbw-color-fg-muted, light-dark(#555555, #aaaaaa)));padding:8px 0;text-align:center;font-style:italic}.tbw-filter-buttons{display:flex;gap:8px;padding-top:8px;border-top:1px solid var(--tbw-filter-divider, var(--tbw-color-border, light-dark(#d0d0d4, #454545)))}.tbw-filter-apply-btn{flex:1;padding:6px 12px;background:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));color:var(--tbw-filter-accent-fg, var(--tbw-color-accent-fg, light-dark(#ffffff, #000000)));border:none;border-radius:4px;cursor:pointer;font-size:13px}.tbw-filter-apply-btn:hover{filter:brightness(.9)}.tbw-filter-clear-btn{flex:1;padding:6px 12px;background:transparent;color:var(--tbw-filter-muted, var(--tbw-color-fg-muted, light-dark(#555555, #aaaaaa)));border:1px solid var(--tbw-filter-input-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:4px;cursor:pointer;font-size:13px}.tbw-filter-clear-btn:hover{background:var(--tbw-filter-hover, var(--tbw-color-row-hover, light-dark(#f0f6ff, #1c1c1c)))}";
-class _ extends y {
+const it = '.header-cell.filtered:before{content:"";position:absolute;top:4px;right:4px;width:6px;height:6px;background:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));border-radius:50%}.tbw-filter-btn{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;padding:2px;margin-left:4px;opacity:.4;transition:opacity .15s;color:inherit;vertical-align:middle}.tbw-filter-btn:hover,.tbw-filter-btn.active{opacity:1}.tbw-filter-btn.active{color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6))}', rt = ".tbw-filter-panel{position:fixed;background:var(--tbw-filter-panel-bg, var(--tbw-color-panel-bg, light-dark(#eeeeee, #222222)));color:var(--tbw-filter-panel-fg, var(--tbw-color-fg, light-dark(#222222, #eeeeee)));border:1px solid var(--tbw-filter-panel-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:var(--tbw-filter-panel-radius, var(--tbw-border-radius, 4px));box-shadow:0 4px 16px var(--tbw-filter-panel-shadow, var(--tbw-color-shadow, light-dark(rgba(0, 0, 0, .1), rgba(0, 0, 0, .3))));padding:12px;z-index:10000;min-width:200px;max-width:280px;max-height:350px;display:flex;flex-direction:column;font-family:var(--tbw-font-family, system-ui, sans-serif);font-size:var(--tbw-font-size, 13px)}.tbw-filter-search{margin-bottom:8px}.tbw-filter-search-input{width:100%;padding:6px 10px;background:var(--tbw-filter-input-bg, var(--tbw-color-bg, transparent));color:inherit;border:1px solid var(--tbw-filter-input-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:var(--tbw-filter-input-radius, 4px);font-size:inherit;box-sizing:border-box}.tbw-filter-search-input:focus{outline:none;border-color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));box-shadow:0 0 0 2px rgba(from var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6)) r g b / 15%)}.tbw-filter-actions{display:flex;padding:4px 2px;margin-bottom:8px;border-bottom:1px solid var(--tbw-filter-divider, var(--tbw-color-border, light-dark(#d0d0d4, #454545)))}.tbw-filter-action-btn{background:transparent;border:none;color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));cursor:pointer;font-size:12px;padding:2px 0}.tbw-filter-action-btn:hover{text-decoration:underline}.tbw-filter-values{flex:1;overflow-y:auto;margin-bottom:8px;max-height:180px;position:relative}.tbw-filter-values-spacer{width:1px}.tbw-filter-values-content{position:absolute;top:0;left:0;right:0}.tbw-filter-value-item{display:flex;align-items:center;gap:8px;padding:4px 2px;cursor:pointer;border-radius:3px}.tbw-filter-value-item:hover{background:var(--tbw-filter-hover, var(--tbw-color-row-hover, light-dark(#f0f6ff, #1c1c1c)))}.tbw-filter-checkbox{margin:0;cursor:pointer;accent-color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6))}.tbw-filter-no-match{color:var(--tbw-filter-muted, var(--tbw-color-fg-muted, light-dark(#555555, #aaaaaa)));padding:8px 0;text-align:center;font-style:italic}.tbw-filter-buttons{display:flex;gap:8px;padding-top:8px;border-top:1px solid var(--tbw-filter-divider, var(--tbw-color-border, light-dark(#d0d0d4, #454545)))}.tbw-filter-apply-btn{flex:1;padding:6px 12px;background:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));color:var(--tbw-filter-accent-fg, var(--tbw-color-accent-fg, light-dark(#ffffff, #000000)));border:none;border-radius:4px;cursor:pointer;font-size:13px}.tbw-filter-apply-btn:hover{filter:brightness(.9)}.tbw-filter-clear-btn{flex:1;padding:6px 12px;background:transparent;color:var(--tbw-filter-muted, var(--tbw-color-fg-muted, light-dark(#555555, #aaaaaa)));border:1px solid var(--tbw-filter-input-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:4px;cursor:pointer;font-size:13px}.tbw-filter-clear-btn:hover{background:var(--tbw-filter-hover, var(--tbw-color-row-hover, light-dark(#f0f6ff, #1c1c1c)))}";
+class A extends v {
   name = "filtering";
   version = "1.0.0";
   get defaultConfig() {
@@ -922,10 +922,12 @@ class _ extends y {
   processRows(e) {
     const t = [...this.filters.values()];
     if (!t.length) return [...e];
-    const n = nt(t);
+    if (this.config.filterHandler)
+      return this.cachedResult ? this.cachedResult : [...e];
+    const n = ot(t);
     if (this.cacheKey === n && this.cachedResult)
       return this.cachedResult;
-    const o = tt([...e], t, this.config.caseSensitive);
+    const o = nt([...e], t, this.config.caseSensitive);
     return this.cachedResult = o, this.cacheKey = n, o;
   }
   afterRender() {
@@ -934,14 +936,19 @@ class _ extends y {
     e.querySelectorAll('[part~="header-cell"]').forEach((n) => {
       const o = n.getAttribute("data-col");
       if (o === null) return;
-      const i = this.columns[parseInt(o, 10)];
-      if (!i || i.filterable === !1 || n.querySelector(".tbw-filter-btn")) return;
+      const i = this.visibleColumns[parseInt(o, 10)];
+      if (!i || i.filterable === !1) return;
       const r = i.field;
       if (!r) return;
-      const l = document.createElement("button");
-      l.className = "tbw-filter-btn", l.setAttribute("aria-label", `Filter ${i.header ?? r}`), 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(r) && (l.classList.add("active"), n.classList.add("filtered")), l.addEventListener("click", (a) => {
-        a.stopPropagation(), this.toggleFilterPanel(r, i, l);
-      }), n.appendChild(l);
+      const l = this.filters.has(r);
+      let a = n.querySelector(".tbw-filter-btn");
+      if (a) {
+        a.classList.toggle("active", l), n.classList.toggle("filtered", l);
+        return;
+      }
+      a = document.createElement("button"), a.className = "tbw-filter-btn", a.setAttribute("aria-label", `Filter ${i.header ?? r}`), a.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>', l && (a.classList.add("active"), n.classList.add("filtered")), a.addEventListener("click", (d) => {
+        d.stopPropagation(), this.toggleFilterPanel(r, i, a);
+      }), n.appendChild(a);
     });
   }
   // #endregion
@@ -951,7 +958,7 @@ class _ extends y {
    * Pass null to remove the filter.
    */
   setFilter(e, t) {
-    t === null ? this.filters.delete(e) : this.filters.set(e, { ...t, field: e }), this.cachedResult = null, this.cacheKey = null, this.emit("filter-change", {
+    t === null ? (this.filters.delete(e), this.excludedValues.delete(e)) : (this.filters.set(e, { ...t, field: e }), t.type === "set" && t.operator === "notIn" && Array.isArray(t.value) ? this.excludedValues.set(e, new Set(t.value)) : t.type === "set" && this.excludedValues.delete(e)), this.cachedResult = null, this.cacheKey = null, this.emit("filter-change", {
       filters: [...this.filters.values()],
       filteredRowCount: 0
       // Will be accurate after processRows
@@ -979,9 +986,9 @@ class _ extends y {
    * Set filters from an array (replaces all existing filters).
    */
   setFilterModel(e) {
-    this.filters.clear();
+    this.filters.clear(), this.excludedValues.clear();
     for (const t of e)
-      this.filters.set(t.field, t);
+      this.filters.set(t.field, t), t.type === "set" && t.operator === "notIn" && Array.isArray(t.value) && this.excludedValues.set(t.field, new Set(t.value));
     this.cachedResult = null, this.cacheKey = null, this.emit("filter-change", {
       filters: [...this.filters.values()],
       filteredRowCount: 0
@@ -991,19 +998,13 @@ class _ extends y {
    * Clear all filters.
    */
   clearAllFilters() {
-    this.filters.clear(), this.excludedValues.clear(), this.searchText.clear(), this.cachedResult = null, this.cacheKey = null, this.emit("filter-change", {
-      filters: [],
-      filteredRowCount: this.rows.length
-    }), this.requestRender();
+    this.filters.clear(), this.excludedValues.clear(), this.searchText.clear(), this.applyFiltersInternal();
   }
   /**
    * Clear filter for a specific field.
    */
   clearFieldFilter(e) {
-    this.filters.delete(e), this.excludedValues.delete(e), this.searchText.delete(e), this.cachedResult = null, this.cacheKey = null, this.emit("filter-change", {
-      filters: [...this.filters.values()],
-      filteredRowCount: 0
-    }), this.requestRender();
+    this.filters.delete(e), this.excludedValues.delete(e), this.searchText.delete(e), this.applyFiltersInternal();
   }
   /**
    * Check if a field has an active filter.
@@ -1042,7 +1043,7 @@ class _ extends y {
       return;
     }
     const e = document.createElement("style");
-    e.id = "tbw-filter-panel-styles", e.textContent = it, document.head.appendChild(e), this.globalStylesInjected = !0;
+    e.id = "tbw-filter-panel-styles", e.textContent = rt, document.head.appendChild(e), this.globalStylesInjected = !0;
   }
   /**
    * Toggle the filter panel for a field
@@ -1054,33 +1055,50 @@ class _ extends y {
     }
     this.closeFilterPanel();
     const o = document.createElement("div");
-    o.className = "tbw-filter-panel", this.panelElement = o, this.openPanelField = e;
+    if (o.className = "tbw-filter-panel", this.panelElement = o, this.openPanelField = e, this.config.valuesHandler) {
+      o.innerHTML = '<div class="tbw-filter-loading">Loading...</div>', document.body.appendChild(o), this.positionPanel(o, n), this.setupPanelCloseHandler(o, n), this.config.valuesHandler(e, t).then((r) => {
+        this.openPanelField !== e || !this.panelElement || (o.innerHTML = "", this.renderPanelContent(e, t, o, r));
+      });
+      return;
+    }
     const i = we(this.sourceRows, e);
-    let r = this.excludedValues.get(e);
-    r || (r = /* @__PURE__ */ new Set(), this.excludedValues.set(e, r));
-    const l = this.searchText.get(e) ?? "", a = {
+    this.renderPanelContent(e, t, o, i), document.body.appendChild(o), this.positionPanel(o, n), this.setupPanelCloseHandler(o, n);
+  }
+  /**
+   * Render filter panel content with given values
+   */
+  renderPanelContent(e, t, n, o) {
+    let i = this.excludedValues.get(e);
+    i || (i = /* @__PURE__ */ new Set(), this.excludedValues.set(e, i));
+    const r = this.searchText.get(e) ?? "", l = {
       field: e,
       column: t,
-      uniqueValues: i,
-      excludedValues: r,
-      searchText: l,
-      applySetFilter: (c) => {
-        this.applySetFilter(e, c), this.closeFilterPanel();
+      uniqueValues: o,
+      excludedValues: i,
+      searchText: r,
+      applySetFilter: (d) => {
+        this.applySetFilter(e, d), this.closeFilterPanel();
       },
-      applyTextFilter: (c, u, h) => {
-        this.applyTextFilter(e, c, u, h), this.closeFilterPanel();
+      applyTextFilter: (d, c, u) => {
+        this.applyTextFilter(e, d, c, u), this.closeFilterPanel();
       },
       clearFilter: () => {
         this.clearFieldFilter(e), this.closeFilterPanel();
       },
       closePanel: () => this.closeFilterPanel()
     };
-    let d = !1;
-    this.config.filterPanelRenderer && (this.config.filterPanelRenderer(o, a), d = o.children.length > 0), d || this.renderDefaultFilterPanel(o, a, i, r), document.body.appendChild(o), this.positionPanel(o, n), this.panelAbortController = new AbortController(), setTimeout(() => {
+    let a = !1;
+    this.config.filterPanelRenderer && (this.config.filterPanelRenderer(n, l), a = n.children.length > 0), a || this.renderDefaultFilterPanel(n, l, o, i);
+  }
+  /**
+   * Setup click-outside handler to close the panel
+   */
+  setupPanelCloseHandler(e, t) {
+    this.panelAbortController = new AbortController(), setTimeout(() => {
       document.addEventListener(
         "click",
-        (c) => {
-          !o.contains(c.target) && c.target !== n && this.closeFilterPanel();
+        (n) => {
+          !e.contains(n.target) && n.target !== t && this.closeFilterPanel();
         },
         { signal: this.panelAbortController?.signal }
       );
@@ -1119,71 +1137,71 @@ class _ extends y {
     const u = document.createElement("span");
     u.textContent = "Select All", d.appendChild(c), d.appendChild(u), a.appendChild(d);
     const h = () => {
-      const w = [...f.values()], R = w.every((C) => C), S = w.every((C) => !C);
-      c.checked = R, c.indeterminate = !R && !S;
+      const w = [...p.values()], y = w.every((x) => x), C = w.every((x) => !x);
+      c.checked = y, c.indeterminate = !y && !C;
     };
     c.addEventListener("change", () => {
       const w = c.checked;
-      for (const R of f.keys())
-        f.set(R, w);
-      h(), v();
+      for (const y of p.keys())
+        p.set(y, w);
+      h(), H();
     }), e.appendChild(a);
     const g = document.createElement("div");
     g.className = "tbw-filter-values";
-    const p = document.createElement("div");
-    p.className = "tbw-filter-values-spacer", g.appendChild(p);
+    const f = document.createElement("div");
+    f.className = "tbw-filter-values-spacer", g.appendChild(f);
     const m = document.createElement("div");
     m.className = "tbw-filter-values-content", g.appendChild(m);
-    const f = /* @__PURE__ */ new Map();
+    const p = /* @__PURE__ */ new Map();
     n.forEach((w) => {
-      const R = w == null ? "__null__" : String(w);
-      f.set(R, !o.has(w));
+      const y = w == null ? "__null__" : String(w);
+      p.set(y, !o.has(w));
     }), h();
-    let b = [];
-    const E = (w, R) => {
-      const S = w == null ? "(Blank)" : String(w), C = w == null ? "__null__" : String(w), x = document.createElement("label");
-      x.className = "tbw-filter-value-item", x.style.position = "absolute", x.style.top = `${R * _.LIST_ITEM_HEIGHT}px`, x.style.left = "0", x.style.right = "0", x.style.height = `${_.LIST_ITEM_HEIGHT}px`, x.style.boxSizing = "border-box";
-      const k = document.createElement("input");
-      k.type = "checkbox", k.className = "tbw-filter-checkbox", k.checked = f.get(C) ?? !0, k.dataset.value = C, k.addEventListener("change", () => {
-        f.set(C, k.checked), h();
+    let R = [];
+    const E = (w, y) => {
+      const C = w == null ? "(Blank)" : String(w), x = w == null ? "__null__" : String(w), b = document.createElement("label");
+      b.className = "tbw-filter-value-item", b.style.position = "absolute", b.style.top = `${y * A.LIST_ITEM_HEIGHT}px`, b.style.left = "0", b.style.right = "0", b.style.height = `${A.LIST_ITEM_HEIGHT}px`, b.style.boxSizing = "border-box";
+      const S = document.createElement("input");
+      S.type = "checkbox", S.className = "tbw-filter-checkbox", S.checked = p.get(x) ?? !0, S.dataset.value = x, S.addEventListener("change", () => {
+        p.set(x, S.checked), h();
       });
       const re = document.createElement("span");
-      return re.textContent = S, x.appendChild(k), x.appendChild(re), x;
-    }, v = () => {
-      const w = b.length, R = g.clientHeight, S = g.scrollTop;
-      if (p.style.height = `${w * _.LIST_ITEM_HEIGHT}px`, Qe(w, _.LIST_BYPASS_THRESHOLD / 3)) {
-        m.innerHTML = "", m.style.transform = "translateY(0px)", b.forEach((x, k) => {
-          m.appendChild(E(x, k));
+      return re.textContent = C, b.appendChild(S), b.appendChild(re), b;
+    }, H = () => {
+      const w = R.length, y = g.clientHeight, C = g.scrollTop;
+      if (f.style.height = `${w * A.LIST_ITEM_HEIGHT}px`, et(w, A.LIST_BYPASS_THRESHOLD / 3)) {
+        m.innerHTML = "", m.style.transform = "translateY(0px)", R.forEach((b, S) => {
+          m.appendChild(E(b, S));
         });
         return;
       }
-      const C = Je({
+      const x = Qe({
         totalRows: w,
-        viewportHeight: R,
-        scrollTop: S,
-        rowHeight: _.LIST_ITEM_HEIGHT,
-        overscan: _.LIST_OVERSCAN
+        viewportHeight: y,
+        scrollTop: C,
+        rowHeight: A.LIST_ITEM_HEIGHT,
+        overscan: A.LIST_OVERSCAN
       });
-      m.style.transform = `translateY(${C.offsetY}px)`, m.innerHTML = "";
-      for (let x = C.start; x < C.end; x++)
-        m.appendChild(E(b[x], x - C.start));
+      m.style.transform = `translateY(${x.offsetY}px)`, m.innerHTML = "";
+      for (let b = x.start; b < x.end; b++)
+        m.appendChild(E(R[b], b - x.start));
     }, oe = (w) => {
-      const R = w.toLowerCase();
-      if (b = n.filter((S) => {
-        const C = S == null ? "(Blank)" : String(S);
-        return !w || C.toLowerCase().includes(R);
-      }), b.length === 0) {
-        p.style.height = "0px", m.innerHTML = "";
-        const S = document.createElement("div");
-        S.className = "tbw-filter-no-match", S.textContent = "No matching values", m.appendChild(S);
+      const y = w.toLowerCase();
+      if (R = n.filter((C) => {
+        const x = C == null ? "(Blank)" : String(C);
+        return !w || x.toLowerCase().includes(y);
+      }), R.length === 0) {
+        f.style.height = "0px", m.innerHTML = "";
+        const C = document.createElement("div");
+        C.className = "tbw-filter-no-match", C.textContent = "No matching values", m.appendChild(C);
         return;
       }
-      v();
+      H();
     };
     g.addEventListener(
       "scroll",
       () => {
-        b.length > 0 && v();
+        R.length > 0 && H();
       },
       { passive: !0 }
     ), oe(l.value), e.appendChild(g);
@@ -1193,25 +1211,25 @@ class _ extends y {
         this.searchText.set(i, l.value), oe(l.value);
       }, this.config.debounceMs ?? 150);
     });
-    const N = document.createElement("div");
-    N.className = "tbw-filter-buttons";
-    const P = document.createElement("button");
-    P.className = "tbw-filter-apply-btn", P.textContent = "Apply", P.addEventListener("click", () => {
+    const P = document.createElement("div");
+    P.className = "tbw-filter-buttons";
+    const M = document.createElement("button");
+    M.className = "tbw-filter-apply-btn", M.textContent = "Apply", M.addEventListener("click", () => {
       const w = [];
-      for (const [R, S] of f)
-        if (!S)
-          if (R === "__null__")
+      for (const [y, C] of p)
+        if (!C)
+          if (y === "__null__")
             w.push(null);
           else {
-            const C = n.find((x) => String(x) === R);
-            w.push(C !== void 0 ? C : R);
+            const x = n.find((b) => String(b) === y);
+            w.push(x !== void 0 ? x : y);
           }
       t.applySetFilter(w);
-    }), N.appendChild(P);
+    }), P.appendChild(M);
     const K = document.createElement("button");
     K.className = "tbw-filter-clear-btn", K.textContent = "Clear Filter", K.addEventListener("click", () => {
       t.clearFilter();
-    }), N.appendChild(K), e.appendChild(N);
+    }), P.appendChild(K), e.appendChild(P);
   }
   /**
    * Apply a set filter (exclude values)
@@ -1222,10 +1240,7 @@ class _ extends y {
       type: "set",
       operator: "notIn",
       value: t
-    }), this.cachedResult = null, this.cacheKey = null, this.emit("filter-change", {
-      filters: [...this.filters.values()],
-      filteredRowCount: 0
-    }), this.requestRender();
+    }), this.applyFiltersInternal();
   }
   /**
    * Apply a text filter
@@ -1237,8 +1252,28 @@ class _ extends y {
       operator: t,
       value: n,
       valueTo: o
-    }), this.cachedResult = null, this.cacheKey = null, this.emit("filter-change", {
-      filters: [...this.filters.values()],
+    }), this.applyFiltersInternal();
+  }
+  /**
+   * Internal method to apply filters (sync or async based on config)
+   */
+  applyFiltersInternal() {
+    this.cachedResult = null, this.cacheKey = null;
+    const e = [...this.filters.values()];
+    if (this.config.filterHandler) {
+      const t = this.grid;
+      t.setAttribute("aria-busy", "true");
+      const n = this.config.filterHandler(e, this.sourceRows), o = (i) => {
+        t.removeAttribute("aria-busy"), this.cachedResult = i, this.grid.rows = i, this.emit("filter-change", {
+          filters: e,
+          filteredRowCount: i.length
+        }), this.requestRender();
+      };
+      n && typeof n.then == "function" ? n.then(o) : o(n);
+      return;
+    }
+    this.emit("filter-change", {
+      filters: e,
       filteredRowCount: 0
     }), this.requestRender();
   }
@@ -1278,10 +1313,10 @@ class _ extends y {
   }
   // #endregion
   // #region Styles
-  styles = ot;
+  styles = it;
   // #endregion
 }
-function rt(s) {
+function st(s) {
   if (!s.length) return [];
   const e = /* @__PURE__ */ new Map(), t = [], n = (r, l) => {
     if (!l.length) return;
@@ -1316,7 +1351,7 @@ function rt(s) {
     }, e.set(d, c), t.push(c)), c.columns.push(r);
   }), o.length && n(i, o), t.length === 1 && t[0].implicit && t[0].columns.length === s.length ? [] : t;
 }
-function st(s, e, t) {
+function lt(s, e, t) {
   if (!e.length || !s) return;
   const n = /* @__PURE__ */ new Map();
   for (const i of e)
@@ -1332,7 +1367,7 @@ function st(s, e, t) {
     l && l.classList.add("group-end");
   }
 }
-function lt(s, e) {
+function at(s, e) {
   if (s.length === 0) return null;
   const t = document.createElement("div");
   t.className = "header-group-row", t.setAttribute("role", "row");
@@ -1342,11 +1377,11 @@ function lt(s, e) {
   }
   return t;
 }
-function at(s) {
+function dt(s) {
   return s.some((e) => e.group != null);
 }
-const dt = ".header-group-row{display:grid;grid-auto-flow:column;background:var(--tbw-grouping-columns-header-bg, var(--tbw-color-header-bg));border-bottom:1px solid var(--tbw-grouping-columns-border, var(--tbw-color-border))}.header-group-cell{display:flex;align-items:center;justify-content:center;padding:4px 8px;font-weight:600;font-size:.9em;text-transform:uppercase;letter-spacing:.5px;border-right:1px solid var(--tbw-grouping-columns-border, var(--tbw-color-border))}.header-group-cell:last-child{border-right:none}.header-row .cell.grouped{border-top:none}.header-row .cell.group-end{border-right:2px solid var(--tbw-grouping-columns-separator, var(--tbw-color-border-strong))}.header-row .cell.group-end:last-child{border-right:none}.header-group-row.no-borders{border-bottom:none}.header-group-row.no-borders .header-group-cell{border-right:none}.header-row.no-group-borders .cell.group-end{border-right:1px solid var(--tbw-color-border)}";
-class Cn extends y {
+const ct = ".header-group-row{display:grid;grid-auto-flow:column;background:var(--tbw-grouping-columns-header-bg, var(--tbw-color-header-bg));border-bottom:1px solid var(--tbw-grouping-columns-border, var(--tbw-color-border))}.header-group-cell{display:flex;align-items:center;justify-content:center;padding:4px 8px;font-weight:600;font-size:.9em;text-transform:uppercase;letter-spacing:.5px;border-right:1px solid var(--tbw-grouping-columns-border, var(--tbw-color-border))}.header-group-cell:last-child{border-right:none}.header-row .cell.grouped{border-top:none}.header-row .cell.group-end{border-right:2px solid var(--tbw-grouping-columns-separator, var(--tbw-color-border-strong))}.header-row .cell.group-end:last-child{border-right:none}.header-group-row.no-borders{border-bottom:none}.header-group-row.no-borders .header-group-cell{border-right:none}.header-row.no-group-borders .cell.group-end{border-right:1px solid var(--tbw-color-border)}";
+class Cn extends v {
   name = "groupingColumns";
   version = "1.0.0";
   get defaultConfig() {
@@ -1369,12 +1404,12 @@ class Cn extends y {
    */
   static detect(e, t) {
     const n = t?.columns;
-    return Array.isArray(n) ? at(n) : !1;
+    return Array.isArray(n) ? dt(n) : !1;
   }
   // #endregion
   // #region Hooks
   processColumns(e) {
-    const t = rt(e);
+    const t = st(e);
     return t.length === 0 ? (this.isActive = !1, this.groups = [], [...e]) : (this.isActive = !0, this.groups = t, [...e]);
   }
   afterRender() {
@@ -1387,14 +1422,14 @@ class Cn extends y {
     if (!e) return;
     const t = e.querySelector(".header-group-row");
     t && t.remove();
-    const n = lt(this.groups, this.columns);
+    const n = at(this.groups, this.columns);
     if (n) {
       n.classList.toggle("no-borders", !this.config.showGroupBorders);
       const i = e.querySelector(".header-row");
       i ? e.insertBefore(n, i) : e.appendChild(n);
     }
     const o = e.querySelector(".header-row");
-    o && (o.classList.toggle("no-group-borders", !this.config.showGroupBorders), st(o, this.groups, this.columns));
+    o && (o.classList.toggle("no-group-borders", !this.config.showGroupBorders), lt(o, this.groups, this.columns));
   }
   // #endregion
   // #region Public API
@@ -1429,10 +1464,10 @@ class Cn extends y {
   }
   // #endregion
   // #region Styles
-  styles = dt;
+  styles = ct;
   // #endregion
 }
-function ct({ rows: s, config: e, expanded: t }) {
+function ut({ rows: s, config: e, expanded: t }) {
   const n = e.groupOn;
   if (typeof n != "function")
     return [];
@@ -1443,8 +1478,8 @@ function ct({ rows: s, config: e, expanded: t }) {
     let d = o;
     a.forEach((c, u) => {
       const h = c == null ? "∅" : String(c), g = d.key === "__root__" ? h : d.key + "||" + h;
-      let p = d.children.get(h);
-      p || (p = { key: g, value: c, depth: u, rows: [], children: /* @__PURE__ */ new Map(), parent: d }, d.children.set(h, p)), d = p;
+      let f = d.children.get(h);
+      f || (f = { key: g, value: c, depth: u, rows: [], children: /* @__PURE__ */ new Map(), parent: d }, d.children.set(h, f)), d = f;
     }), d.rows.push(l);
   }), o.children.size === 1 && o.children.has("__ungrouped__") && o.children.get("__ungrouped__").rows.length === s.length)
     return [];
@@ -1465,24 +1500,24 @@ function ct({ rows: s, config: e, expanded: t }) {
   };
   return r(o), i;
 }
-function ut(s, e) {
+function ht(s, e) {
   const t = new Set(s);
   return t.has(e) ? t.delete(e) : t.add(e), t;
 }
-function ht(s) {
+function gt(s) {
   const e = /* @__PURE__ */ new Set();
   for (const t of s)
     t.kind === "group" && e.add(t.key);
   return e;
 }
-function gt() {
+function ft() {
   return /* @__PURE__ */ new Set();
 }
 function pt(s) {
   return s.kind !== "group" ? 0 : s.rows.length;
 }
-const ft = '.group-row{background:var(--tbw-grouping-rows-bg, var(--tbw-color-panel-bg));font-weight:500}.group-row:hover{background:var(--tbw-grouping-rows-bg-hover, var(--tbw-color-row-hover))}.group-toggle{cursor:pointer;user-select:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:4px;font-size:10px}.group-toggle:hover{background:var(--tbw-grouping-rows-toggle-hover, var(--tbw-color-row-hover));border-radius:2px}.group-label{display:inline-flex;align-items:center;gap:8px}.group-count{color:var(--tbw-grouping-rows-count-color, var(--tbw-color-fg-muted));font-size:.85em;font-weight:400}[data-group-depth="0"] .group-label{padding-left:0}[data-group-depth="1"] .group-label{padding-left:20px}[data-group-depth="2"] .group-label{padding-left:40px}[data-group-depth="3"] .group-label{padding-left:60px}[data-group-depth="4"] .group-label{padding-left:80px}';
-class Rn extends y {
+const mt = '.group-row{background:var(--tbw-grouping-rows-bg, var(--tbw-color-panel-bg));font-weight:500}.group-row:hover{background:var(--tbw-grouping-rows-bg-hover, var(--tbw-color-row-hover))}.group-toggle{cursor:pointer;user-select:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:4px}.group-toggle:hover{background:var(--tbw-grouping-rows-toggle-hover, var(--tbw-color-row-hover));border-radius:2px}.group-label{display:inline-flex;align-items:center;gap:8px}.group-count{color:var(--tbw-grouping-rows-count-color, var(--tbw-color-fg-muted));font-size:.85em;font-weight:400}[data-group-depth="0"] .group-label{padding-left:0}[data-group-depth="1"] .group-label{padding-left:20px}[data-group-depth="2"] .group-label{padding-left:40px}[data-group-depth="3"] .group-label{padding-left:60px}[data-group-depth="4"] .group-label{padding-left:80px}.data-grid-row.tbw-group-slide-in{animation:tbw-group-slide-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-group-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.data-grid-row.tbw-group-fade-in{animation:tbw-group-fade-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-group-fade-in{0%{opacity:0}to{opacity:1}}';
+class Rn extends v {
   name = "groupingRows";
   version = "1.0.0";
   get defaultConfig() {
@@ -1490,17 +1525,32 @@ class Rn extends y {
       defaultExpanded: !1,
       showRowCount: !0,
       indentWidth: 20,
-      aggregators: {}
+      aggregators: {},
+      animation: "slide"
     };
   }
   // #region Internal State
   expandedKeys = /* @__PURE__ */ new Set();
   flattenedRows = [];
   isActive = !1;
+  previousVisibleKeys = /* @__PURE__ */ new Set();
+  keysToAnimate = /* @__PURE__ */ new Set();
+  // #endregion
+  // #region Animation
+  get animationStyle() {
+    const t = this.grid.effectiveConfig?.animation?.mode ?? "reduced-motion";
+    if (t === !1 || t === "off") return !1;
+    if (t !== !0 && t !== "on") {
+      const n = this.shadowRoot?.host;
+      if (n && getComputedStyle(n).getPropertyValue("--tbw-animation-enabled").trim() === "0")
+        return !1;
+    }
+    return this.config.animation ?? "slide";
+  }
   // #endregion
   // #region Lifecycle
   detach() {
-    this.expandedKeys.clear(), this.flattenedRows = [], this.isActive = !1;
+    this.expandedKeys.clear(), this.flattenedRows = [], this.isActive = !1, this.previousVisibleKeys.clear(), this.keysToAnimate.clear();
   }
   // #endregion
   // #region Hooks
@@ -1515,20 +1565,29 @@ class Rn extends y {
     const t = this.config;
     if (typeof t.groupOn != "function")
       return this.isActive = !1, this.flattenedRows = [], [...e];
-    const n = ct({
+    const n = ut({
       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((o) => o.kind === "group" ? {
+    if (n.length === 0)
+      return this.isActive = !1, this.flattenedRows = [], [...e];
+    this.isActive = !0, this.flattenedRows = n, this.keysToAnimate.clear();
+    const o = /* @__PURE__ */ new Set();
+    return n.forEach((i, r) => {
+      if (i.kind === "data") {
+        const l = `data-${r}`;
+        o.add(l), this.previousVisibleKeys.has(l) || this.keysToAnimate.add(l);
+      }
+    }), this.previousVisibleKeys = o, n.map((i) => i.kind === "group" ? {
       __isGroupRow: !0,
-      __groupKey: o.key,
-      __groupValue: o.value,
-      __groupDepth: o.depth,
-      __groupRows: o.rows,
-      __groupExpanded: o.expanded,
-      __groupRowCount: pt(o)
-    } : o.row));
+      __groupKey: i.key,
+      __groupValue: i.value,
+      __groupDepth: i.depth,
+      __groupRows: i.rows,
+      __groupExpanded: i.expanded,
+      __groupRowCount: pt(i)
+    } : i.row);
   }
   onCellClick(e) {
     const t = e.row;
@@ -1562,6 +1621,16 @@ class Rn extends y {
     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, i) : this.renderPerColumnGroupRow(e, t, i), !0;
   }
   afterRender() {
+    const e = this.animationStyle;
+    if (e === !1 || this.keysToAnimate.size === 0) return;
+    const t = this.shadowRoot?.querySelector(".rows");
+    if (!t) return;
+    const n = e === "fade" ? "tbw-group-fade-in" : "tbw-group-slide-in";
+    for (const o of t.querySelectorAll(".data-grid-row:not(.group-row)")) {
+      const i = o.querySelector(".cell[data-row]"), r = i ? parseInt(i.getAttribute("data-row") ?? "-1", 10) : -1, a = this.flattenedRows[r]?.kind === "data" ? `data-${r}` : void 0;
+      a && this.keysToAnimate.has(a) && (o.classList.add(n), o.addEventListener("animationend", () => o.classList.remove(n), { once: !0 }));
+    }
+    this.keysToAnimate.clear();
   }
   // #endregion
   // #region Private Rendering Helpers
@@ -1569,7 +1638,7 @@ class Rn extends y {
     const o = this.config, i = document.createElement("div");
     i.className = "cell group-full", i.style.gridColumn = "1 / -1", i.setAttribute("role", "gridcell");
     const r = document.createElement("button");
-    r.type = "button", r.className = "group-toggle", r.setAttribute("aria-label", e.__groupExpanded ? "Collapse group" : "Expand group"), this.setIcon(r, this.resolveIcon(e.__groupExpanded ? "collapse" : "expand")), r.addEventListener("click", (d) => {
+    r.type = "button", r.className = `group-toggle${e.__groupExpanded ? " expanded" : ""}`, r.setAttribute("aria-label", e.__groupExpanded ? "Collapse group" : "Expand group"), this.setIcon(r, this.resolveIcon(e.__groupExpanded ? "collapse" : "expand")), r.addEventListener("click", (d) => {
       d.stopPropagation(), n();
     }), i.appendChild(r);
     const l = document.createElement("span");
@@ -1587,26 +1656,26 @@ class Rn extends y {
       const h = document.createElement("div");
       if (h.className = "cell group-cell", h.setAttribute("data-col", String(u)), h.setAttribute("role", "gridcell"), u === 0) {
         const g = document.createElement("button");
-        g.type = "button", g.className = "group-toggle", g.setAttribute("aria-label", e.__groupExpanded ? "Collapse group" : "Expand group"), this.setIcon(g, this.resolveIcon(e.__groupExpanded ? "collapse" : "expand")), g.addEventListener("click", (f) => {
-          f.stopPropagation(), n();
+        g.type = "button", g.className = `group-toggle${e.__groupExpanded ? " expanded" : ""}`, g.setAttribute("aria-label", e.__groupExpanded ? "Collapse group" : "Expand group"), this.setIcon(g, this.resolveIcon(e.__groupExpanded ? "collapse" : "expand")), g.addEventListener("click", (p) => {
+          p.stopPropagation(), n();
         }), h.appendChild(g);
-        const p = document.createElement("span"), m = i[c.field];
+        const f = document.createElement("span"), m = i[c.field];
         if (m) {
-          const f = se(m, l, c.field, c);
-          p.textContent = f != null ? String(f) : String(e.__groupValue);
+          const p = se(m, l, c.field, c);
+          f.textContent = p != null ? String(p) : String(e.__groupValue);
         } else {
-          const f = o.formatLabel ? o.formatLabel(e.__groupValue, e.__groupDepth || 0, e.__groupKey) : String(e.__groupValue);
-          p.textContent = f;
+          const p = o.formatLabel ? o.formatLabel(e.__groupValue, e.__groupDepth || 0, e.__groupKey) : String(e.__groupValue);
+          f.textContent = p;
         }
-        if (h.appendChild(p), o.showRowCount !== !1) {
-          const f = document.createElement("span");
-          f.className = "group-count", f.textContent = ` (${l.length})`, h.appendChild(f);
+        if (h.appendChild(f), o.showRowCount !== !1) {
+          const p = document.createElement("span");
+          p.className = "group-count", p.textContent = ` (${l.length})`, h.appendChild(p);
         }
       } else {
         const g = i[c.field];
         if (g) {
-          const p = se(g, l, c.field, c);
-          h.textContent = p != null ? String(p) : "";
+          const f = se(g, l, c.field, c);
+          h.textContent = f != null ? String(f) : "";
         } else
           h.textContent = "";
       }
@@ -1619,20 +1688,20 @@ class Rn extends y {
    * Expand all groups.
    */
   expandAll() {
-    this.expandedKeys = ht(this.flattenedRows), this.requestRender();
+    this.expandedKeys = gt(this.flattenedRows), this.requestRender();
   }
   /**
    * Collapse all groups.
    */
   collapseAll() {
-    this.expandedKeys = gt(), this.requestRender();
+    this.expandedKeys = ft(), this.requestRender();
   }
   /**
    * Toggle expansion of a specific group.
    * @param key - The group key to toggle
    */
   toggle(e) {
-    this.expandedKeys = ut(this.expandedKeys, e);
+    this.expandedKeys = ht(this.expandedKeys, e);
     const t = this.flattenedRows.find((n) => n.kind === "group" && n.key === e);
     this.emit("group-toggle", {
       key: e,
@@ -1723,25 +1792,25 @@ class Rn extends y {
   }
   // #endregion
   // #region Styles
-  styles = ft;
+  styles = mt;
   // #endregion
 }
-function V(s, e) {
+function z(s, e) {
   const t = new Set(s);
   return t.has(e) ? t.delete(e) : t.add(e), t;
 }
-function mt(s, e) {
+function wt(s, e) {
   const t = new Set(s);
   return t.add(e), t;
 }
-function wt(s, e) {
+function bt(s, e) {
   const t = new Set(s);
   return t.delete(e), t;
 }
-function bt(s, e) {
+function vt(s, e) {
   return s.has(e);
 }
-function vt(s, e, t, n) {
+function xt(s, e, t, n) {
   const o = document.createElement("div");
   o.className = "master-detail-row", o.setAttribute("data-detail-for", String(e)), o.setAttribute("role", "row");
   const i = document.createElement("div");
@@ -1749,8 +1818,8 @@ function vt(s, e, t, n) {
   const r = t(s, e);
   return typeof r == "string" ? i.innerHTML = r : r instanceof HTMLElement && i.appendChild(r), o.appendChild(i), o;
 }
-const xt = ".master-detail-cell-wrapper{display:flex;align-items:center;gap:4px}.master-detail-toggle{cursor:pointer;font-size:10px;opacity:.7;user-select:none}.master-detail-toggle:hover{opacity:1}.master-detail-row{grid-column:1 / -1;display:grid;background:var(--tbw-master-detail-bg, var(--tbw-color-row-alt));border-bottom:1px solid var(--tbw-master-detail-border, var(--tbw-color-border))}.master-detail-cell{padding:16px;overflow:auto}";
-class Sn extends y {
+const yt = ".master-detail-cell-wrapper{display:flex;align-items:center;gap:4px}.master-detail-toggle{cursor:pointer;opacity:.7;user-select:none;display:inline-flex;align-items:center;justify-content:center}.master-detail-toggle:hover{opacity:1}.master-detail-row{grid-column:1 / -1;display:grid;background:var(--tbw-master-detail-bg, var(--tbw-color-row-alt));border-bottom:1px solid var(--tbw-master-detail-border, var(--tbw-color-border));overflow:hidden}.master-detail-cell{padding:16px;overflow:auto}.master-detail-row.tbw-expanding{animation:tbw-detail-expand var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}.master-detail-row.tbw-collapsing{animation:tbw-detail-collapse var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-detail-expand{0%{opacity:0;max-height:0;padding-top:0;padding-bottom:0}to{opacity:1;max-height:500px;padding-top:16px;padding-bottom:16px}}@keyframes tbw-detail-collapse{0%{opacity:1;max-height:500px}to{opacity:0;max-height:0}}";
+class Sn extends v {
   name = "masterDetail";
   version = "1.0.0";
   get defaultConfig() {
@@ -1758,9 +1827,67 @@ class Sn extends y {
       detailHeight: "auto",
       expandOnRowClick: !1,
       collapseOnClickOutside: !1,
-      showExpandColumn: !0
+      showExpandColumn: !0,
+      animation: "slide"
+      // Plugin's own default
     };
   }
+  // #region Animation Helpers
+  /**
+   * Check if animations are enabled at the grid level.
+   * Respects gridConfig.animation.mode and CSS variable.
+   */
+  get isAnimationEnabled() {
+    const t = this.grid.effectiveConfig?.animation?.mode ?? "reduced-motion";
+    if (t === !1 || t === "off") return !1;
+    if (t === !0 || t === "on") return !0;
+    const n = this.shadowRoot?.host;
+    return n ? getComputedStyle(n).getPropertyValue("--tbw-animation-enabled").trim() !== "0" : !0;
+  }
+  /**
+   * Get expand/collapse animation style from plugin config.
+   */
+  get animationStyle() {
+    return this.isAnimationEnabled ? this.config.animation ?? "slide" : !1;
+  }
+  /**
+   * Get animation duration from CSS variable (set by grid).
+   */
+  get animationDuration() {
+    const e = this.shadowRoot?.host;
+    if (e) {
+      const t = getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(), n = parseInt(t, 10);
+      if (!isNaN(n)) return n;
+    }
+    return 200;
+  }
+  /**
+   * Apply expand animation to a detail element.
+   */
+  animateExpand(e) {
+    !this.isAnimationEnabled || this.animationStyle === !1 || (e.classList.add("tbw-expanding"), e.addEventListener(
+      "animationend",
+      () => {
+        e.classList.remove("tbw-expanding");
+      },
+      { once: !0 }
+    ));
+  }
+  /**
+   * Apply collapse animation to a detail element and remove after animation.
+   */
+  animateCollapse(e, t) {
+    if (!this.isAnimationEnabled || this.animationStyle === !1) {
+      t();
+      return;
+    }
+    e.classList.add("tbw-collapsing");
+    const n = () => {
+      e.classList.remove("tbw-collapsing"), t();
+    };
+    e.addEventListener("animationend", n, { once: !0 }), setTimeout(n, this.animationDuration + 50);
+  }
+  // #endregion
   // #region Internal State
   expandedRows = /* @__PURE__ */ new Set();
   detailElements = /* @__PURE__ */ new Map();
@@ -1783,11 +1910,11 @@ class Sn extends y {
         const { value: l, row: a } = r, d = this.expandedRows.has(a), c = document.createElement("span");
         c.className = "master-detail-cell-wrapper";
         const u = document.createElement("span");
-        u.className = "master-detail-toggle", this.setIcon(u, this.resolveIcon(d ? "collapse" : "expand")), u.setAttribute("role", "button"), u.setAttribute("tabindex", "0"), u.setAttribute("aria-expanded", String(d)), u.setAttribute("aria-label", d ? "Collapse details" : "Expand details"), u.addEventListener("click", (g) => {
+        u.className = `master-detail-toggle${d ? " expanded" : ""}`, this.setIcon(u, this.resolveIcon(d ? "collapse" : "expand")), u.setAttribute("role", "button"), u.setAttribute("tabindex", "0"), u.setAttribute("aria-expanded", String(d)), u.setAttribute("aria-label", d ? "Collapse details" : "Expand details"), u.addEventListener("click", (g) => {
           g.stopPropagation();
-          const p = this.rows.indexOf(a);
-          this.expandedRows = V(this.expandedRows, a), this.emit("detail-expand", {
-            rowIndex: p,
+          const f = this.rows.indexOf(a);
+          this.expandedRows = z(this.expandedRows, a), this.emit("detail-expand", {
+            rowIndex: f,
             row: a,
             expanded: this.expandedRows.has(a)
           }), this.requestRender();
@@ -1806,7 +1933,7 @@ class Sn extends y {
   }
   onRowClick(e) {
     if (!(!this.config.expandOnRowClick || !this.config.detailRenderer))
-      return this.expandedRows = V(this.expandedRows, e.row), this.emit("detail-expand", {
+      return this.expandedRows = z(this.expandedRows, e.row), this.emit("detail-expand", {
         rowIndex: e.rowIndex,
         row: e.row,
         expanded: this.expandedRows.has(e.row)
@@ -1851,8 +1978,8 @@ class Sn extends y {
         d.previousElementSibling !== l && l.after(d);
         continue;
       }
-      const c = vt(a, r, this.config.detailRenderer, o);
-      typeof this.config.detailHeight == "number" && (c.style.height = `${this.config.detailHeight}px`), l.after(c), this.detailElements.set(a, c);
+      const c = xt(a, r, this.config.detailRenderer, o);
+      typeof this.config.detailHeight == "number" && (c.style.height = `${this.config.detailHeight}px`), l.after(c), this.detailElements.set(a, c), this.animateExpand(c);
     }
   }
   /**
@@ -1919,7 +2046,7 @@ class Sn extends y {
    */
   expand(e) {
     const t = this.rows[e];
-    t && (this.expandedRows = mt(this.expandedRows, t), this.requestRender());
+    t && (this.expandedRows = wt(this.expandedRows, t), this.requestRender());
   }
   /**
    * Collapse the detail row at the given index.
@@ -1927,7 +2054,7 @@ class Sn extends y {
    */
   collapse(e) {
     const t = this.rows[e];
-    t && (this.expandedRows = wt(this.expandedRows, t), this.requestRender());
+    t && (this.expandedRows = bt(this.expandedRows, t), this.requestRender());
   }
   /**
    * Toggle the detail row at the given index.
@@ -1935,7 +2062,7 @@ class Sn extends y {
    */
   toggle(e) {
     const t = this.rows[e];
-    t && (this.expandedRows = V(this.expandedRows, t), this.requestRender());
+    t && (this.expandedRows = z(this.expandedRows, t), this.requestRender());
   }
   /**
    * Check if the detail row at the given index is expanded.
@@ -1944,7 +2071,7 @@ class Sn extends y {
    */
   isExpanded(e) {
     const t = this.rows[e];
-    return t ? bt(this.expandedRows, t) : !1;
+    return t ? vt(this.expandedRows, t) : !1;
   }
   /**
    * Expand all detail rows.
@@ -1983,23 +2110,23 @@ class Sn extends y {
   }
   // #endregion
   // #region Styles
-  styles = xt;
+  styles = yt;
   // #endregion
 }
-function yt(s, e, t) {
+function Ct(s, e, t) {
   return e.length ? [...s].sort((n, o) => {
     for (const i of e) {
-      const l = t.find((u) => u.field === i.field)?.sortComparator ?? Ct, a = n[i.field], d = o[i.field], c = l(a, d, n, o);
+      const l = t.find((u) => u.field === i.field)?.sortComparator ?? Rt, a = n[i.field], d = o[i.field], c = l(a, d, n, o);
       if (c !== 0)
         return i.direction === "asc" ? c : -c;
     }
     return 0;
   }) : [...s];
 }
-function Ct(s, e) {
+function Rt(s, e) {
   return s == null && e == null ? 0 : s == null ? 1 : e == null ? -1 : typeof s == "number" && typeof e == "number" ? s - e : s instanceof Date && e instanceof Date ? s.getTime() - e.getTime() : typeof s == "boolean" && typeof e == "boolean" ? s === e ? 0 : s ? -1 : 1 : String(s).localeCompare(String(e));
 }
-function Rt(s, e, t, n) {
+function St(s, e, t, n) {
   const o = s.find((i) => i.field === e);
   return t ? o ? o.direction === "asc" ? s.map((i) => i.field === e ? { ...i, direction: "desc" } : i) : s.filter((i) => i.field !== e) : s.length < n ? [...s, { field: e, direction: "asc" }] : s : o?.direction === "asc" ? [{ field: e, direction: "desc" }] : o?.direction === "desc" ? [] : [{ field: e, direction: "asc" }];
 }
@@ -2010,8 +2137,8 @@ function be(s, e) {
 function ve(s, e) {
   return s.find((t) => t.field === e)?.direction;
 }
-const St = '.header-cell[data-sort=asc]:after{content:"↑";margin-left:4px;opacity:.8}.header-cell[data-sort=desc]:after{content:"↓";margin-left:4px;opacity:.8}.sort-index{font-size:10px;background:var(--tbw-multi-sort-badge-bg, var(--tbw-color-panel-bg));color:var(--tbw-multi-sort-badge-color, var(--tbw-color-fg));border-radius:50%;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;margin-left:2px;font-weight:600}';
-class En extends y {
+const kt = '.header-cell[data-sort=asc]:after{content:"↑";margin-left:4px;opacity:.8}.header-cell[data-sort=desc]:after{content:"↓";margin-left:4px;opacity:.8}.sort-indicator{margin-left:4px;opacity:.8}.sort-index{font-size:10px;background:var(--tbw-multi-sort-badge-bg, var(--tbw-color-panel-bg));color:var(--tbw-multi-sort-badge-color, var(--tbw-color-fg));border-radius:50%;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;margin-left:2px;font-weight:600}';
+class kn extends v {
   name = "multiSort";
   version = "1.0.0";
   get defaultConfig() {
@@ -2030,12 +2157,12 @@ class En extends y {
   // #endregion
   // #region Hooks
   processRows(e) {
-    return this.sortModel.length === 0 ? [...e] : yt([...e], this.sortModel, [...this.columns]);
+    return this.sortModel.length === 0 ? [...e] : Ct([...e], this.sortModel, [...this.columns]);
   }
   onHeaderClick(e) {
     if (!this.columns.find((i) => i.field === e.field)?.sortable) return !1;
     const n = e.originalEvent.shiftKey, o = this.config.maxSortColumns ?? 3;
-    return this.sortModel = Rt(this.sortModel, e.field, n, o), this.emit("sort-change", { sortModel: [...this.sortModel] }), this.requestRender(), !0;
+    return this.sortModel = St(this.sortModel, e.field, n, o), this.emit("sort-change", { sortModel: [...this.sortModel] }), this.requestRender(), !0;
   }
   afterRender() {
     const e = this.shadowRoot;
@@ -2048,7 +2175,7 @@ class En extends y {
       if (o.querySelector(".sort-index")?.remove(), l) {
         o.querySelector('[part~="sort-indicator"], .sort-indicator')?.remove(), o.setAttribute("data-sort", l);
         const c = document.createElement("span");
-        if (c.className = "sort-indicator", c.style.marginLeft = "4px", c.style.opacity = "0.8", this.setIcon(c, this.resolveIcon(l === "asc" ? "sortAsc" : "sortDesc")), o.appendChild(c), t && this.sortModel.length > 1 && r !== void 0) {
+        if (c.className = "sort-indicator", this.setIcon(c, this.resolveIcon(l === "asc" ? "sortAsc" : "sortDesc")), o.appendChild(c), t && this.sortModel.length > 1 && r !== void 0) {
           const u = document.createElement("span");
           u.className = "sort-index", u.textContent = String(r), o.appendChild(u);
         }
@@ -2125,16 +2252,16 @@ class En extends y {
   }
   // #endregion
   // #region Styles
-  styles = St;
+  styles = kt;
   // #endregion
 }
 function Et(s) {
   return s.filter((e) => e.sticky === "left");
 }
-function kt(s) {
+function At(s) {
   return s.filter((e) => e.sticky === "right");
 }
-function z(s) {
+function W(s) {
   return s.some((e) => e.sticky === "left" || e.sticky === "right");
 }
 function xe(s, e) {
@@ -2170,7 +2297,7 @@ function ye(s) {
     n.classList.remove("sticky-left", "sticky-right"), n.style.position = "", n.style.left = "", n.style.right = "";
   });
 }
-class kn extends y {
+class En extends v {
   name = "pinnedColumns";
   version = "1.0.0";
   get defaultConfig() {
@@ -2192,18 +2319,18 @@ class kn extends y {
    */
   static detect(e, t) {
     const n = t?.columns;
-    return Array.isArray(n) ? z(n) : !1;
+    return Array.isArray(n) ? W(n) : !1;
   }
   // #endregion
   // #region Hooks
   processColumns(e) {
-    return this.isApplied = z([...e]), [...e];
+    return this.isApplied = W([...e]), [...e];
   }
   afterRender() {
     if (!this.isApplied)
       return;
     const e = this.grid, t = [...this.columns];
-    if (!z(t)) {
+    if (!W(t)) {
       ye(e), this.isApplied = !1;
       return;
     }
@@ -2216,7 +2343,7 @@ class kn extends y {
    */
   onPluginQuery(e) {
     switch (e.type) {
-      case Ke.CAN_MOVE_COLUMN: {
+      case N.CAN_MOVE_COLUMN: {
         const t = e.context, n = t.sticky;
         if (n === "left" || n === "right")
           return !1;
@@ -2248,7 +2375,7 @@ class kn extends y {
    */
   getRightPinnedColumns() {
     const e = [...this.columns];
-    return kt(e);
+    return At(e);
   }
   /**
    * Clear all sticky positioning.
@@ -2282,10 +2409,10 @@ class kn extends y {
   }
   // #endregion
 }
-function At(s) {
+function _t(s) {
   return typeof s == "object" && s !== null && "aggFunc" in s;
 }
-function W(s, e) {
+function $(s, e) {
   const t = document.createElement("div");
   t.className = "tbw-pinned-rows", t.setAttribute("role", "presentation"), t.setAttribute("aria-live", "polite");
   const n = document.createElement("div");
@@ -2307,7 +2434,7 @@ function W(s, e) {
   }
   if (s.customPanels)
     for (const r of s.customPanels) {
-      const l = _t(r, e);
+      const l = It(r, e);
       switch (r.position) {
         case "left":
           n.appendChild(l);
@@ -2340,7 +2467,7 @@ function Re(s, e, t, n) {
         let a, d;
         const c = o.aggregators?.[r.field];
         if (c)
-          if (At(c)) {
+          if (_t(c)) {
             const u = le(c.aggFunc);
             u && (a = u(n, r.field, r)), d = c.formatter;
           } else {
@@ -2356,7 +2483,7 @@ function Re(s, e, t, n) {
     s.appendChild(i);
   }
 }
-function _t(s, e) {
+function It(s, e) {
   const t = document.createElement("div");
   t.className = "tbw-status-panel tbw-status-panel-custom", t.id = `status-panel-${s.id}`;
   const n = s.render(e);
@@ -2372,8 +2499,8 @@ function Se(s, e, t, n, o) {
     grid: t
   };
 }
-const It = ".tbw-footer{position:sticky;bottom:0;z-index:var(--tbw-z-layer-pinned-rows, 20);background:var(--tbw-color-panel-bg)}.tbw-pinned-rows{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--tbw-pinned-rows-bg, var(--tbw-color-panel-bg));border-top:1px solid var(--tbw-pinned-rows-border, var(--tbw-color-border));font-size:12px;color:var(--tbw-pinned-rows-color, var(--tbw-color-fg-muted));min-height:32px;box-sizing:border-box;min-width:fit-content}.tbw-pinned-rows-left,.tbw-pinned-rows-center,.tbw-pinned-rows-right{display:flex;align-items:center;gap:16px}.tbw-pinned-rows-left{justify-content:flex-start}.tbw-pinned-rows-center{justify-content:center;flex:1}.tbw-pinned-rows-right{justify-content:flex-end}.tbw-status-panel{white-space:nowrap}.tbw-aggregation-rows{min-width:fit-content;background:var(--tbw-aggregation-bg, var(--tbw-color-header-bg))}.tbw-aggregation-rows-top{border-bottom:1px solid var(--tbw-aggregation-border, var(--tbw-color-border))}.tbw-aggregation-rows-bottom{border-top:1px solid var(--tbw-aggregation-border, var(--tbw-color-border))}.tbw-aggregation-row{display:grid;grid-template-columns:var(--tbw-column-template);font-size:var(--tbw-aggregation-font-size, .8em);font-weight:var(--tbw-aggregation-font-weight, 600)}.tbw-aggregation-cell{padding:var(--tbw-cell-padding, 2px 8px);min-height:var(--tbw-row-height, 28px);display:flex;align-items:center;border-right:1px solid var(--tbw-color-border-cell)}.tbw-aggregation-cell:last-child{border-right:0}.tbw-aggregation-cell-full{grid-column:1 / -1;border-right:0}";
-class An extends y {
+const Lt = ".tbw-footer{position:sticky;bottom:0;z-index:var(--tbw-z-layer-pinned-rows, 20);background:var(--tbw-color-panel-bg)}.tbw-pinned-rows{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--tbw-pinned-rows-bg, var(--tbw-color-panel-bg));border-top:1px solid var(--tbw-pinned-rows-border, var(--tbw-color-border));font-size:12px;color:var(--tbw-pinned-rows-color, var(--tbw-color-fg-muted));min-height:32px;box-sizing:border-box;min-width:fit-content}.tbw-pinned-rows-left,.tbw-pinned-rows-center,.tbw-pinned-rows-right{display:flex;align-items:center;gap:16px}.tbw-pinned-rows-left{justify-content:flex-start}.tbw-pinned-rows-center{justify-content:center;flex:1}.tbw-pinned-rows-right{justify-content:flex-end}.tbw-status-panel{white-space:nowrap}.tbw-aggregation-rows{min-width:fit-content;background:var(--tbw-aggregation-bg, var(--tbw-color-header-bg))}.tbw-aggregation-rows-top{border-bottom:1px solid var(--tbw-aggregation-border, var(--tbw-color-border))}.tbw-aggregation-rows-bottom{border-top:1px solid var(--tbw-aggregation-border, var(--tbw-color-border))}.tbw-aggregation-row{display:grid;grid-template-columns:var(--tbw-column-template);font-size:var(--tbw-aggregation-font-size, .8em);font-weight:var(--tbw-aggregation-font-weight, 600)}.tbw-aggregation-cell{padding:var(--tbw-cell-padding, 2px 8px);min-height:var(--tbw-row-height, 28px);display:flex;align-items:center;border-right:1px solid var(--tbw-color-border-cell)}.tbw-aggregation-cell:last-child{border-right:0}.tbw-aggregation-cell-full{grid-column:1 / -1;border-right:0}";
+class An extends v {
   name = "pinnedRows";
   version = "1.0.0";
   get defaultConfig() {
@@ -2424,9 +2551,9 @@ class An extends y {
     const d = this.config.showRowCount !== !1 || this.config.showSelectedCount && i.selectedRows > 0 || this.config.showFilteredCount && i.filteredRows !== i.totalRows || this.config.customPanels && this.config.customPanels.length > 0, c = d && this.config.position !== "top", u = a.length > 0 || c;
     if (d && this.config.position === "top")
       if (!this.infoBarElement)
-        this.infoBarElement = W(this.config, i), t.insertBefore(this.infoBarElement, t.firstChild);
+        this.infoBarElement = $(this.config, i), t.insertBefore(this.infoBarElement, t.firstChild);
       else {
-        const h = W(this.config, i);
+        const h = $(this.config, i);
         this.infoBarElement.replaceWith(h), this.infoBarElement = h;
       }
     else this.config.position === "top" && this.infoBarElement && (this.infoBarElement.remove(), this.infoBarElement = null);
@@ -2435,7 +2562,7 @@ class An extends y {
       a,
       this.visibleColumns,
       this.rows
-    )), c && (this.infoBarElement = W(this.config, i), this.footerWrapper.appendChild(this.infoBarElement))) : this.cleanupFooter();
+    )), c && (this.infoBarElement = $(this.config, i), this.footerWrapper.appendChild(this.infoBarElement))) : this.cleanupFooter();
   }
   // #endregion
   // #region Private Methods
@@ -2511,18 +2638,18 @@ class An extends y {
   }
   // #endregion
   // #region Styles
-  styles = It;
+  styles = Lt;
   // #endregion
 }
-const Lt = Oe;
-function Tt(s) {
+const Tt = Oe;
+function Ft(s) {
   const e = [];
   return !s.rowGroupFields?.length && !s.columnGroupFields?.length && e.push("At least one row or column group field is required"), s.valueFields?.length || e.push("At least one value field is required"), e;
 }
-function te(s, e) {
+function ne(s, e) {
   return [...s, e].join("|");
 }
-function Ft(s, e) {
+function Pt(s, e) {
   const t = e.rowGroupFields ?? [], n = e.columnGroupFields ?? [], o = e.valueFields ?? [], i = Mt(s, n), r = qe(
     s,
     t,
@@ -2533,7 +2660,7 @@ function Ft(s, e) {
     // starting depth
     ""
     // parent key prefix
-  ), l = Pt(r, i, o), a = Object.values(l).reduce((d, c) => d + c, 0);
+  ), l = Nt(r, i, o), a = Object.values(l).reduce((d, c) => d + c, 0);
   return {
     rows: r,
     columnKeys: i,
@@ -2550,7 +2677,7 @@ function Mt(s, e) {
   }
   return [...t].sort();
 }
-function Nt(s, e) {
+function Kt(s, e) {
   const t = /* @__PURE__ */ new Map();
   for (const n of s) {
     const o = String(n[e] ?? ""), i = t.get(o);
@@ -2561,7 +2688,7 @@ function Nt(s, e) {
 function qe(s, e, t, n, o, i, r) {
   const l = [];
   if (e.length === 0) {
-    const h = Ee(s, t, n, o), g = ke(h);
+    const h = ke(s, t, n, o), g = Ee(h);
     return l.push({
       rowKey: r || "all",
       rowLabel: r || "All",
@@ -2572,61 +2699,61 @@ function qe(s, e, t, n, o, i, r) {
       rowCount: s.length
     }), l;
   }
-  const a = e[0], d = e.slice(1), c = d.length > 0, u = Nt(s, a);
+  const a = e[0], d = e.slice(1), c = d.length > 0, u = Kt(s, a);
   for (const [h, g] of u) {
-    const p = r ? `${r}|${h}` : h, m = Ee(g, t, n, o), f = ke(m);
-    let b;
-    c && (b = qe(
+    const f = r ? `${r}|${h}` : h, m = ke(g, t, n, o), p = Ee(m);
+    let R;
+    c && (R = qe(
       g,
       d,
       t,
       n,
       o,
       i + 1,
-      p
+      f
     )), l.push({
-      rowKey: p,
+      rowKey: f,
       rowLabel: h || "(blank)",
       depth: i,
       values: m,
-      total: f,
+      total: p,
       isGroup: c,
-      children: b,
+      children: R,
       rowCount: g.length
     });
   }
   return l;
 }
-function Ee(s, e, t, n) {
+function ke(s, e, t, n) {
   const o = {};
   for (const i of t)
     for (const r of n) {
-      const a = (e.length > 0 ? s.filter((h) => e.map((g) => String(h[g] ?? "")).join("|") === i) : s).map((h) => Number(h[r.field]) || 0), d = Lt(r.aggFunc), c = a.length > 0 ? d(a) : null, u = te([i], r.field);
+      const a = (e.length > 0 ? s.filter((h) => e.map((g) => String(h[g] ?? "")).join("|") === i) : s).map((h) => Number(h[r.field]) || 0), d = Tt(r.aggFunc), c = a.length > 0 ? d(a) : null, u = ne([i], r.field);
       o[u] = c;
     }
   return o;
 }
-function ke(s) {
+function Ee(s) {
   let e = 0;
   for (const t of Object.values(s))
     e += t ?? 0;
   return e;
 }
-function Pt(s, e, t) {
+function Nt(s, e, t) {
   const n = {};
   function o(i) {
     for (const r of i)
       if (!r.isGroup || !r.children?.length)
         for (const l of e)
           for (const a of t) {
-            const d = te([l], a.field);
+            const d = ne([l], a.field);
             n[d] = (n[d] ?? 0) + (r.values[d] ?? 0);
           }
       else r.children && o(r.children);
   }
   return o(s), n;
 }
-function Kt(s, e, t = !0) {
+function qt(s, e, t = !0) {
   const n = [];
   function o(i) {
     n.push(i);
@@ -2639,7 +2766,7 @@ function Kt(s, e, t = !0) {
     o(i);
   return n;
 }
-function $(s) {
+function j(s) {
   const e = [];
   function t(n) {
     if (n.isGroup && e.push(n.rowKey), n.children)
@@ -2650,14 +2777,14 @@ function $(s) {
     t(n);
   return e;
 }
-const qt = ["sum", "avg", "count", "min", "max", "first", "last"];
-function Dt(s, e, t, n) {
+const Dt = ["sum", "avg", "count", "min", "max", "first", "last"];
+function Ht(s, e, t, n) {
   const o = new AbortController(), i = { config: e, callbacks: n, signal: o.signal }, r = document.createElement("div");
-  return r.className = "tbw-pivot-panel", r.appendChild(T("Options", () => Vt(t, i))), r.appendChild(T("Row Groups", () => Ae("rowGroups", i))), r.appendChild(T("Column Groups", () => Ae("columnGroups", i))), r.appendChild(T("Values", () => Gt(i))), r.appendChild(T("Available Fields", () => Bt(i))), s.appendChild(r), () => {
+  return r.className = "tbw-pivot-panel", r.appendChild(L("Options", () => zt(t, i))), r.appendChild(L("Row Groups", () => Ae("rowGroups", i))), r.appendChild(L("Column Groups", () => Ae("columnGroups", i))), r.appendChild(L("Values", () => Ot(i))), r.appendChild(L("Available Fields", () => Bt(i))), s.appendChild(r), () => {
     o.abort(), r.remove();
   };
 }
-function T(s, e) {
+function L(s, e) {
   const t = document.createElement("div");
   t.className = "tbw-pivot-section";
   const n = document.createElement("div");
@@ -2674,7 +2801,7 @@ function Ae(s, e) {
     l.className = "tbw-pivot-placeholder", l.textContent = "Drag fields here or click to add", i.appendChild(l);
   } else
     for (const l of r)
-      i.appendChild(Ht(l, s, e));
+      i.appendChild(Vt(l, s, e));
   return i.addEventListener(
     "dragover",
     (l) => {
@@ -2697,7 +2824,7 @@ function Ae(s, e) {
     { signal: o }
   ), i;
 }
-function Ht(s, e, t) {
+function Vt(s, e, t) {
   const { callbacks: n, signal: o } = t, i = document.createElement("div");
   i.className = "tbw-pivot-field-chip", i.draggable = !0;
   const r = n.getAvailableFields().find((d) => d.field === s), l = document.createElement("span");
@@ -2723,7 +2850,7 @@ function Ht(s, e, t) {
     { signal: o }
   ), i;
 }
-function Gt(s) {
+function Ot(s) {
   const { config: e, callbacks: t, signal: n } = s, o = document.createElement("div");
   o.className = "tbw-pivot-drop-zone tbw-pivot-values-zone", o.setAttribute("data-zone", "values");
   const i = e.valueFields ?? [];
@@ -2732,7 +2859,7 @@ function Gt(s) {
     r.className = "tbw-pivot-placeholder", r.textContent = "Drag numeric fields here for aggregation", o.appendChild(r);
   } else
     for (const r of i)
-      o.appendChild(Ot(r, s));
+      o.appendChild(Gt(r, s));
   return o.addEventListener(
     "dragover",
     (r) => {
@@ -2755,7 +2882,7 @@ function Gt(s) {
     { signal: n }
   ), o;
 }
-function Ot(s, e) {
+function Gt(s, e) {
   const { callbacks: t, signal: n } = e, o = document.createElement("div");
   o.className = "tbw-pivot-field-chip tbw-pivot-value-chip";
   const i = t.getAvailableFields().find((c) => c.field === s.field), r = document.createElement("div");
@@ -2764,7 +2891,7 @@ function Ot(s, e) {
   l.className = "tbw-pivot-chip-label", l.textContent = i?.header ?? s.field;
   const a = document.createElement("select");
   a.className = "tbw-pivot-agg-select", a.title = "Aggregation function";
-  for (const c of qt) {
+  for (const c of Dt) {
     const u = document.createElement("option");
     u.value = c, u.textContent = c.toUpperCase(), u.selected = c === s.aggFunc, a.appendChild(u);
   }
@@ -2814,10 +2941,10 @@ function Bt(s) {
     }
   return o;
 }
-function Vt(s, e) {
+function zt(s, e) {
   const { config: t, callbacks: n, signal: o } = e, i = document.createElement("div");
   return i.className = "tbw-pivot-options", i.appendChild(
-    j(
+    U(
       "Enable Pivot View",
       s,
       (r) => {
@@ -2826,7 +2953,7 @@ function Vt(s, e) {
       o
     )
   ), i.appendChild(
-    j(
+    U(
       "Show Row Totals",
       t.showTotals ?? !0,
       (r) => {
@@ -2835,7 +2962,7 @@ function Vt(s, e) {
       o
     )
   ), i.appendChild(
-    j(
+    U(
       "Show Grand Total",
       t.showGrandTotal ?? !0,
       (r) => {
@@ -2845,7 +2972,7 @@ function Vt(s, e) {
     )
   ), i;
 }
-function j(s, e, t, n) {
+function U(s, e, t, n) {
   const o = document.createElement("label");
   o.className = "tbw-pivot-checkbox";
   const i = document.createElement("input");
@@ -2853,8 +2980,8 @@ function j(s, e, t, n) {
   const r = document.createElement("span");
   return r.textContent = s, o.appendChild(i), o.appendChild(r), o;
 }
-function zt(s, e, t) {
-  return e.className = "pivot-group-row", e.setAttribute("data-pivot-depth", String(s.__pivotDepth ?? 0)), e.setAttribute("role", "row"), e.innerHTML = "", t.columns.forEach((n, o) => {
+function Wt(s, e, t) {
+  return e.className = "pivot-group-row", e.setAttribute("data-pivot-depth", String(s.__pivotDepth ?? 0)), e.setAttribute("data-pivot-key", String(s.__pivotRowKey ?? "")), e.setAttribute("role", "row"), e.innerHTML = "", t.columns.forEach((n, o) => {
     const i = document.createElement("div");
     if (i.className = "cell", i.setAttribute("data-col", String(o)), i.setAttribute("role", "gridcell"), o === 0) {
       const r = Number(s.__pivotIndent) || 0;
@@ -2874,8 +3001,8 @@ function zt(s, e, t) {
     e.appendChild(i);
   }), !0;
 }
-function Wt(s, e, t) {
-  return e.className = "pivot-leaf-row", e.setAttribute("data-pivot-depth", String(s.__pivotDepth ?? 0)), e.innerHTML = "", t.forEach((n, o) => {
+function $t(s, e, t) {
+  return e.className = "pivot-leaf-row", e.setAttribute("data-pivot-depth", String(s.__pivotDepth ?? 0)), e.setAttribute("data-pivot-key", String(s.__pivotRowKey ?? "")), e.innerHTML = "", t.forEach((n, o) => {
     const i = document.createElement("div");
     if (i.className = "cell", i.setAttribute("data-col", String(o)), i.setAttribute("role", "gridcell"), o === 0) {
       const r = Number(s.__pivotIndent) || 0;
@@ -2889,7 +3016,7 @@ function Wt(s, e, t) {
     e.appendChild(i);
   }), !0;
 }
-function $t(s, e, t) {
+function jt(s, e, t) {
   return e.className = "pivot-grand-total-row", e.setAttribute("role", "presentation"), e.innerHTML = "", t.forEach((n, o) => {
     const i = document.createElement("div");
     if (i.className = "cell", i.setAttribute("data-col", String(o)), o === 0) {
@@ -2902,8 +3029,8 @@ function $t(s, e, t) {
     e.appendChild(i);
   }), !0;
 }
-const jt = '.pivot-group-row{display:grid;grid-template-columns:var(--tbw-column-template);font-weight:600;background:var(--tbw-pivot-group-bg, var(--tbw-color-row-alt));min-height:var(--tbw-row-height);border-bottom:var(--tbw-row-divider)}.pivot-group-row:hover{background:var(--tbw-pivot-group-hover, var(--tbw-color-row-hover))}.pivot-leaf-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-pivot-leaf-bg, var(--tbw-color-bg));min-height:var(--tbw-row-height);border-bottom:var(--tbw-row-divider)}.pivot-grand-total-row{display:grid;grid-template-columns:var(--tbw-column-template);font-weight:700;background:var(--tbw-pivot-grand-total-bg, var(--tbw-color-header-bg));min-height:var(--tbw-row-height);border-top:2px solid var(--tbw-color-border-strong)}.pivot-grand-total-row>.cell{display:flex;align-items:center;padding:var(--tbw-cell-padding);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0}.pivot-grand-total-row>.cell:last-child{border-right:0}.pivot-grand-total-footer{position:sticky;bottom:0;z-index:var(--tbw-z-layer-pinned-rows, 20);background:var(--tbw-pivot-grand-total-bg, var(--tbw-color-header-bg));min-width:fit-content}.pivot-group-row>.cell,.pivot-leaf-row>.cell{display:flex;align-items:center;padding:var(--tbw-cell-padding);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0}.pivot-group-row>.cell:last-child,.pivot-leaf-row>.cell:last-child{border-right:0}.pivot-toggle{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:6px;border:none;background:transparent;cursor:pointer;font-size:10px;color:var(--tbw-pivot-toggle-color, var(--tbw-color-fg-muted));border-radius:var(--tbw-border-radius);transition:background .15s,color .15s}.pivot-toggle:hover{background:var(--tbw-pivot-toggle-hover-bg, var(--tbw-color-row-hover));color:var(--tbw-pivot-toggle-hover-color, var(--tbw-color-fg))}.pivot-toggle:focus{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}.pivot-label{font-weight:inherit}.pivot-count{color:var(--tbw-pivot-count-color, var(--tbw-color-fg-muted));font-size:.9em;font-weight:400}.pivot-total-row{font-weight:700;border-top:2px solid var(--tbw-pivot-border, var(--tbw-color-border-strong))}[data-pivot-depth="1"]{--tbw-pivot-depth: 1}[data-pivot-depth="2"]{--tbw-pivot-depth: 2}[data-pivot-depth="3"]{--tbw-pivot-depth: 3}[data-pivot-depth="4"]{--tbw-pivot-depth: 4}.tbw-pivot-panel{display:flex;flex-direction:column;gap:12px;padding:12px;height:100%;overflow-y:auto;font-size:13px}.tbw-pivot-section{border:1px solid var(--tbw-pivot-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius);background:var(--tbw-pivot-section-bg, var(--tbw-color-bg))}.tbw-pivot-section-header{padding:8px 12px;font-weight:600;background:var(--tbw-pivot-header-bg, var(--tbw-color-header-bg));border-bottom:1px solid var(--tbw-pivot-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius) var(--tbw-border-radius) 0 0}.tbw-pivot-section-content{padding:8px}.tbw-pivot-toggle-wrapper{display:flex;align-items:center}.tbw-pivot-toggle-label{display:flex;align-items:center;gap:8px;cursor:pointer}.tbw-pivot-toggle-label input{width:16px;height:16px;cursor:pointer}.tbw-pivot-drop-zone{min-height:60px;padding:8px;border:2px dashed var(--tbw-pivot-drop-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius);background:var(--tbw-pivot-drop-bg, var(--tbw-color-row-alt));display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;transition:all .15s ease}.tbw-pivot-drop-zone.drag-over{border-color:var(--tbw-color-accent);background:var(--tbw-pivot-drop-active, var(--tbw-focus-background))}.tbw-pivot-placeholder{color:var(--tbw-color-fg-muted);font-style:italic;padding:8px;text-align:center;width:100%}.tbw-pivot-field-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;background:var(--tbw-pivot-chip-bg, var(--tbw-color-header-bg));border:1px solid var(--tbw-pivot-chip-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius);cursor:grab;font-size:12px;transition:all .15s ease}.tbw-pivot-field-chip:hover{background:var(--tbw-pivot-chip-hover, var(--tbw-color-row-hover));border-color:var(--tbw-color-accent)}.tbw-pivot-field-chip.available{background:var(--tbw-color-bg)}.tbw-pivot-field-chip.dragging{opacity:.5;cursor:grabbing}.tbw-pivot-chip-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.tbw-pivot-chip-remove{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:var(--tbw-color-fg-muted);font-size:14px;font-weight:700;cursor:pointer;border-radius:50%;transition:all .15s ease}.tbw-pivot-chip-remove:hover{background:var(--tbw-pivot-chip-remove-hover-bg, var(--tbw-color-accent));color:var(--tbw-pivot-chip-remove-hover-fg, var(--tbw-color-accent-fg))}.tbw-pivot-value-chip{padding:4px 8px}.tbw-pivot-value-label-wrapper{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.tbw-pivot-agg-select{padding:2px 4px;font-size:11px;border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);background:var(--tbw-color-bg);cursor:pointer}.tbw-pivot-available-fields{display:flex;flex-wrap:wrap;gap:6px;min-height:40px}.tbw-pivot-options{display:flex;flex-direction:column;gap:8px}.tbw-pivot-checkbox{display:flex;align-items:center;gap:8px;cursor:pointer}.tbw-pivot-checkbox input{width:14px;height:14px;cursor:pointer}';
-class F extends y {
+const Ut = '.pivot-group-row{display:grid;grid-template-columns:var(--tbw-column-template);font-weight:600;background:var(--tbw-pivot-group-bg, var(--tbw-color-row-alt));min-height:var(--tbw-row-height);border-bottom:var(--tbw-row-divider)}.pivot-group-row:hover{background:var(--tbw-pivot-group-hover, var(--tbw-color-row-hover))}.pivot-leaf-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-pivot-leaf-bg, var(--tbw-color-bg));min-height:var(--tbw-row-height);border-bottom:var(--tbw-row-divider)}.pivot-grand-total-row{display:grid;grid-template-columns:var(--tbw-column-template);font-weight:700;background:var(--tbw-pivot-grand-total-bg, var(--tbw-color-header-bg));min-height:var(--tbw-row-height);border-top:2px solid var(--tbw-color-border-strong)}.pivot-grand-total-row>.cell{display:flex;align-items:center;padding:var(--tbw-cell-padding);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0}.pivot-grand-total-row>.cell:last-child{border-right:0}.pivot-grand-total-footer{position:sticky;bottom:0;z-index:var(--tbw-z-layer-pinned-rows, 20);background:var(--tbw-pivot-grand-total-bg, var(--tbw-color-header-bg));min-width:fit-content}.pivot-group-row>.cell,.pivot-leaf-row>.cell{display:flex;align-items:center;padding:var(--tbw-cell-padding);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0}.pivot-group-row>.cell:last-child,.pivot-leaf-row>.cell:last-child{border-right:0}.pivot-toggle{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:6px;border:none;background:transparent;cursor:pointer;color:var(--tbw-pivot-toggle-color, var(--tbw-color-fg-muted));border-radius:var(--tbw-border-radius);transition:background .15s,color .15s}.pivot-toggle:hover{background:var(--tbw-pivot-toggle-hover-bg, var(--tbw-color-row-hover));color:var(--tbw-pivot-toggle-hover-color, var(--tbw-color-fg))}.pivot-toggle:focus{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}.pivot-label{font-weight:inherit}.pivot-count{color:var(--tbw-pivot-count-color, var(--tbw-color-fg-muted));font-size:.9em;font-weight:400}.pivot-total-row{font-weight:700;border-top:2px solid var(--tbw-pivot-border, var(--tbw-color-border-strong))}[data-pivot-depth="1"]{--tbw-pivot-depth: 1}[data-pivot-depth="2"]{--tbw-pivot-depth: 2}[data-pivot-depth="3"]{--tbw-pivot-depth: 3}[data-pivot-depth="4"]{--tbw-pivot-depth: 4}.tbw-pivot-panel{display:flex;flex-direction:column;gap:12px;padding:12px;height:100%;overflow-y:auto;font-size:13px}.tbw-pivot-section{border:1px solid var(--tbw-pivot-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius);background:var(--tbw-pivot-section-bg, var(--tbw-color-bg))}.tbw-pivot-section-header{padding:8px 12px;font-weight:600;background:var(--tbw-pivot-header-bg, var(--tbw-color-header-bg));border-bottom:1px solid var(--tbw-pivot-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius) var(--tbw-border-radius) 0 0}.tbw-pivot-section-content{padding:8px}.tbw-pivot-toggle-wrapper{display:flex;align-items:center}.tbw-pivot-toggle-label{display:flex;align-items:center;gap:8px;cursor:pointer}.tbw-pivot-toggle-label input{width:16px;height:16px;cursor:pointer}.tbw-pivot-drop-zone{min-height:60px;padding:8px;border:2px dashed var(--tbw-pivot-drop-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius);background:var(--tbw-pivot-drop-bg, var(--tbw-color-row-alt));display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;transition:all .15s ease}.tbw-pivot-drop-zone.drag-over{border-color:var(--tbw-color-accent);background:var(--tbw-pivot-drop-active, var(--tbw-focus-background))}.tbw-pivot-placeholder{color:var(--tbw-color-fg-muted);font-style:italic;padding:8px;text-align:center;width:100%}.tbw-pivot-field-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;background:var(--tbw-pivot-chip-bg, var(--tbw-color-header-bg));border:1px solid var(--tbw-pivot-chip-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius);cursor:grab;font-size:12px;transition:all .15s ease}.tbw-pivot-field-chip:hover{background:var(--tbw-pivot-chip-hover, var(--tbw-color-row-hover));border-color:var(--tbw-color-accent)}.tbw-pivot-field-chip.available{background:var(--tbw-color-bg)}.tbw-pivot-field-chip.dragging{opacity:.5;cursor:grabbing}.tbw-pivot-chip-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.tbw-pivot-chip-remove{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:var(--tbw-color-fg-muted);font-size:14px;font-weight:700;cursor:pointer;border-radius:50%;transition:all .15s ease}.tbw-pivot-chip-remove:hover{background:var(--tbw-pivot-chip-remove-hover-bg, var(--tbw-color-accent));color:var(--tbw-pivot-chip-remove-hover-fg, var(--tbw-color-accent-fg))}.tbw-pivot-value-chip{padding:4px 8px}.tbw-pivot-value-label-wrapper{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.tbw-pivot-agg-select{padding:2px 4px;font-size:11px;border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);background:var(--tbw-color-bg);cursor:pointer}.tbw-pivot-available-fields{display:flex;flex-wrap:wrap;gap:6px;min-height:40px}.tbw-pivot-options{display:flex;flex-direction:column;gap:8px}.tbw-pivot-checkbox{display:flex;align-items:center;gap:8px;cursor:pointer}.tbw-pivot-checkbox input{width:14px;height:14px;cursor:pointer}.pivot-group-row.tbw-pivot-slide-in,.pivot-leaf-row.tbw-pivot-slide-in{animation:tbw-pivot-slide-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-pivot-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.pivot-group-row.tbw-pivot-fade-in,.pivot-leaf-row.tbw-pivot-fade-in{animation:tbw-pivot-fade-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-pivot-fade-in{0%{opacity:0}to{opacity:1}}';
+class T extends v {
   name = "pivot";
   version = "1.0.0";
   /** Tool panel ID for shell integration */
@@ -2913,7 +3040,8 @@ class F extends y {
       active: !0,
       showTotals: !0,
       showGrandTotal: !0,
-      showToolPanel: !0
+      showToolPanel: !0,
+      animation: "slide"
     };
   }
   // #region Internal State
@@ -2926,23 +3054,38 @@ class F extends y {
   originalColumns = [];
   panelContainer = null;
   grandTotalFooter = null;
+  previousVisibleKeys = /* @__PURE__ */ new Set();
+  keysToAnimate = /* @__PURE__ */ new Set();
   /**
    * Check if the plugin has valid pivot configuration (at least value fields).
    */
   hasValidPivotConfig() {
     return (this.config.valueFields?.length ?? 0) > 0;
   }
+  /**
+   * Get animation style respecting grid-level animation mode.
+   */
+  get animationStyle() {
+    const t = this.grid.effectiveConfig?.animation?.mode ?? "reduced-motion";
+    if (t === !1 || t === "off") return !1;
+    if (t !== !0 && t !== "on") {
+      const n = this.shadowRoot?.host;
+      if (n && getComputedStyle(n).getPropertyValue("--tbw-animation-enabled").trim() === "0")
+        return !1;
+    }
+    return this.config.animation ?? "slide";
+  }
   // #endregion
   // #region Lifecycle
   detach() {
-    this.isActive = !1, this.hasInitialized = !1, this.pivotResult = null, this.fieldHeaderMap.clear(), this.originalColumns = [], this.panelContainer = null, this.cleanupGrandTotalFooter();
+    this.isActive = !1, this.hasInitialized = !1, this.pivotResult = null, this.fieldHeaderMap.clear(), this.originalColumns = [], this.panelContainer = null, this.cleanupGrandTotalFooter(), this.previousVisibleKeys.clear(), this.keysToAnimate.clear();
   }
   // #endregion
   // #region Shell Integration
   getToolPanel() {
     if ((this.config?.showToolPanel ?? this.userConfig?.showToolPanel ?? !0) !== !1)
       return {
-        id: F.PANEL_ID,
+        id: T.PANEL_ID,
         title: "Pivot",
         icon: "⊞",
         tooltip: "Configure pivot table",
@@ -2955,36 +3098,42 @@ class F extends y {
   processRows(e) {
     if (!this.hasInitialized && this.config.active !== !1 && this.hasValidPivotConfig() && (this.hasInitialized = !0, this.isActive = !0), !this.isActive)
       return [...e];
-    const t = Tt(this.config);
+    const t = Ft(this.config);
     if (t.length > 0)
       return this.warn(`Config errors: ${t.join(", ")}`), [...e];
     if (this.buildFieldHeaderMap(), this.defaultExpanded = this.config.defaultExpanded ?? !0, this.expandedKeys.size === 0 && this.defaultExpanded && this.pivotResult) {
-      const i = $(this.pivotResult.rows);
-      for (const r of i)
-        this.expandedKeys.add(r);
+      const r = j(this.pivotResult.rows);
+      for (const l of r)
+        this.expandedKeys.add(l);
     }
-    if (this.pivotResult = Ft(e, this.config), this.expandedKeys.size === 0 && this.defaultExpanded) {
-      const i = $(this.pivotResult.rows);
-      for (const r of i)
-        this.expandedKeys.add(r);
+    if (this.pivotResult = Pt(e, this.config), this.expandedKeys.size === 0 && this.defaultExpanded) {
+      const r = j(this.pivotResult.rows);
+      for (const l of r)
+        this.expandedKeys.add(l);
     }
-    const n = this.config.indentWidth ?? 20;
-    return Kt(
+    const n = this.config.indentWidth ?? 20, o = qt(
       this.pivotResult.rows,
       this.expandedKeys,
       this.defaultExpanded
-    ).map((i) => ({
-      __pivotRowKey: i.rowKey,
-      __pivotLabel: i.rowLabel,
-      __pivotDepth: i.depth,
-      __pivotIsGroup: i.isGroup,
-      __pivotHasChildren: !!i.children?.length,
-      __pivotExpanded: this.expandedKeys.has(i.rowKey),
-      __pivotRowCount: i.rowCount ?? 0,
-      __pivotIndent: i.depth * n,
-      __pivotTotal: i.total,
-      ...i.values
+    ).map((r) => ({
+      __pivotRowKey: r.rowKey,
+      __pivotLabel: r.rowLabel,
+      __pivotDepth: r.depth,
+      __pivotIsGroup: r.isGroup,
+      __pivotHasChildren: !!r.children?.length,
+      __pivotExpanded: this.expandedKeys.has(r.rowKey),
+      __pivotRowCount: r.rowCount ?? 0,
+      __pivotIndent: r.depth * n,
+      __pivotTotal: r.total,
+      ...r.values
     }));
+    this.keysToAnimate.clear();
+    const i = /* @__PURE__ */ new Set();
+    for (const r of o) {
+      const l = r.__pivotRowKey;
+      i.add(l), !this.previousVisibleKeys.has(l) && r.__pivotDepth > 0 && this.keysToAnimate.add(l);
+    }
+    return this.previousVisibleKeys = i, o;
   }
   processColumns(e) {
     if (!this.isActive || !this.pivotResult)
@@ -2997,7 +3146,7 @@ class F extends y {
     });
     for (const o of this.pivotResult.columnKeys)
       for (const i of this.config.valueFields ?? []) {
-        const r = te([o], i.field), l = i.header || this.fieldHeaderMap.get(i.field) || i.field;
+        const r = ne([o], i.field), l = i.header || this.fieldHeaderMap.get(i.field) || i.field;
         t.push({
           field: r,
           header: `${o} - ${l} (${i.aggFunc})`,
@@ -3014,12 +3163,12 @@ class F extends y {
   }
   renderRow(e, t) {
     const n = e;
-    return n.__pivotRowKey && n.__pivotHasChildren ? zt(n, t, {
+    return n.__pivotRowKey && n.__pivotHasChildren ? Wt(n, t, {
       columns: this.gridColumns,
       onToggle: (o) => this.toggle(o),
       resolveIcon: (o) => this.resolveIcon(o),
       setIcon: (o, i) => this.setIcon(o, i)
-    }) : n.__pivotRowKey !== void 0 && this.isActive ? Wt(n, t, this.gridColumns) : (this.cleanupPivotStyling(t), !1);
+    }) : n.__pivotRowKey !== void 0 && this.isActive ? $t(n, t, this.gridColumns) : (this.cleanupPivotStyling(t), !1);
   }
   /**
    * Remove pivot-specific classes, attributes, and inline styles from a row element.
@@ -3031,6 +3180,16 @@ class F extends y {
   }
   afterRender() {
     this.isActive && this.config.showGrandTotal && this.pivotResult ? this.renderGrandTotalFooter() : this.cleanupGrandTotalFooter();
+    const e = this.animationStyle;
+    if (e === !1 || this.keysToAnimate.size === 0) return;
+    const t = this.shadowRoot?.querySelector(".rows");
+    if (!t) return;
+    const n = e === "fade" ? "tbw-pivot-fade-in" : "tbw-pivot-slide-in";
+    for (const o of t.querySelectorAll(".pivot-group-row, .pivot-leaf-row")) {
+      const i = o.dataset.pivotKey;
+      i && this.keysToAnimate.has(i) && (o.classList.add(n), o.addEventListener("animationend", () => o.classList.remove(n), { once: !0 }));
+    }
+    this.keysToAnimate.clear();
   }
   /**
    * Render the grand total row as a sticky footer pinned to the bottom.
@@ -3049,7 +3208,7 @@ class F extends y {
       __pivotTotal: this.pivotResult.grandTotal,
       ...this.pivotResult.totals
     };
-    $t(n, this.grandTotalFooter, this.gridColumns);
+    jt(n, this.grandTotalFooter, this.gridColumns);
   }
   /**
    * Remove the grand total footer element.
@@ -3070,7 +3229,7 @@ class F extends y {
   }
   expandAll() {
     if (this.pivotResult) {
-      const e = $(this.pivotResult.rows);
+      const e = j(this.pivotResult.rows);
       for (const t of e)
         this.expandedKeys.add(t);
       this.requestRender();
@@ -3111,16 +3270,16 @@ class F extends y {
   // #endregion
   // #region Tool Panel API
   showPanel() {
-    this.grid.openToolPanel(F.PANEL_ID);
+    this.grid.openToolPanel(T.PANEL_ID);
   }
   hidePanel() {
     this.grid.closeToolPanel();
   }
   togglePanel() {
-    this.grid.toggleToolPanel(F.PANEL_ID);
+    this.grid.toggleToolPanel(T.PANEL_ID);
   }
   isPanelVisible() {
-    return this.grid.activeToolPanel === F.PANEL_ID;
+    return this.grid.activeToolPanel === T.PANEL_ID;
   }
   // #endregion
   // #region Private Helpers
@@ -3164,7 +3323,7 @@ class F extends y {
       },
       getAvailableFields: () => this.getAvailableFields()
     };
-    return Dt(e, this.config, this.isActive, t);
+    return Ht(e, this.config, this.isActive, t);
   }
   refreshPanel() {
     this.panelContainer && (this.panelContainer.innerHTML = "", this.renderPanel(this.panelContainer));
@@ -3198,27 +3357,59 @@ class F extends y {
   }
   // #endregion
   // #region Styles
-  styles = jt;
+  styles = Ut;
   // #endregion
 }
-function Ut(s) {
+function _e(s) {
   const e = s.meta ?? {};
   return e.lockPosition !== !0 && e.suppressMovable !== !0;
 }
-function _e(s, e, t) {
+function Ie(s, e, t) {
   if (e === t || e < 0 || e >= s.length || t < 0 || t > s.length) return s;
   const n = [...s], [o] = n.splice(e, 1);
   return n.splice(t, 0, o), n;
 }
-const Yt = '.header-row>.cell[draggable=true]{cursor:grab;position:relative}.header-row>.cell.dragging{opacity:.5;cursor:grabbing}.header-row>.cell.drop-before:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent));z-index:1}.header-row>.cell.drop-after:after{content:"";position:absolute;right:0;top:0;bottom:0;width:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent));z-index:1}';
-class _n extends y {
+const Yt = '.header-row>.cell[draggable=true]{cursor:grab;position:relative}.header-row>.cell.dragging{opacity:.5;cursor:grabbing}.header-row>.cell.drop-before:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent));z-index:1}.header-row>.cell.drop-after:after{content:"";position:absolute;right:0;top:0;bottom:0;width:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent));z-index:1}.cell.flip-animating{transition:transform var(--tbw-animation-duration, .2s) ease-out;will-change:transform;z-index:1}@keyframes reorder-fade-in{0%{opacity:0}to{opacity:1}}.cell.fade-animating{animation:reorder-fade-in var(--tbw-animation-duration, .2s) ease-out backwards}';
+class _n extends v {
   name = "reorder";
   version = "1.0.0";
   get defaultConfig() {
     return {
-      viewTransition: !0
+      animation: "flip"
+      // Plugin's own default
     };
   }
+  /**
+   * Resolve animation type from plugin config.
+   * Respects grid-level animation.mode (disabled = no animation).
+   */
+  get animationType() {
+    return this.isAnimationEnabled ? this.config.animation !== void 0 ? this.config.animation : this.config.viewTransition === !1 ? !1 : (this.config.viewTransition === !0, "flip") : !1;
+  }
+  /**
+   * Check if animations are enabled at the grid level.
+   * Respects gridConfig.animation.mode and CSS variable.
+   */
+  get isAnimationEnabled() {
+    const t = this.grid.effectiveConfig?.animation?.mode ?? "reduced-motion";
+    if (t === !1 || t === "off") return !1;
+    if (t === !0 || t === "on") return !0;
+    const n = this.shadowRoot?.host;
+    return n ? getComputedStyle(n).getPropertyValue("--tbw-animation-enabled").trim() !== "0" : !0;
+  }
+  /**
+   * Get animation duration from CSS variable (set by grid config).
+   */
+  get animationDuration() {
+    if (this.config.animationDuration !== void 0)
+      return this.config.animationDuration;
+    const e = this.shadowRoot?.host;
+    if (e) {
+      const t = getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(), n = parseInt(t, 10);
+      if (!isNaN(n)) return n;
+    }
+    return 200;
+  }
   // #region Internal State
   isDragging = !1;
   draggedField = null;
@@ -3248,10 +3439,10 @@ class _n extends y {
       const o = n, i = o.getAttribute("data-field");
       if (!i) return;
       const r = this.columns.find((c) => c.field === i), d = !this.grid.queryPlugins({
-        type: Ke.CAN_MOVE_COLUMN,
+        type: N.CAN_MOVE_COLUMN,
         context: r
       }).includes(!1);
-      if (!r || !Ut(r) || !d) {
+      if (!r || !_e(r) || !d) {
         o.draggable = !1;
         return;
       }
@@ -3264,8 +3455,8 @@ class _n extends y {
         });
       }), o.addEventListener("dragover", (c) => {
         if (c.preventDefault(), !this.isDragging || this.draggedField === i) return;
-        const u = o.getBoundingClientRect(), h = u.left + u.width / 2, p = this.getColumnOrder().indexOf(i);
-        this.dropIndex = c.clientX < h ? p : p + 1, o.classList.add("drop-target"), o.classList.toggle("drop-before", c.clientX < h), o.classList.toggle("drop-after", c.clientX >= h);
+        const u = o.getBoundingClientRect(), h = u.left + u.width / 2, f = this.getColumnOrder().indexOf(i);
+        this.dropIndex = c.clientX < h ? f : f + 1, o.classList.add("drop-target"), o.classList.toggle("drop-before", c.clientX < h), o.classList.toggle("drop-after", c.clientX >= h);
       }), o.addEventListener("dragleave", () => {
         o.classList.remove("drop-target", "drop-before", "drop-after");
       }), o.addEventListener("drop", (c) => {
@@ -3273,16 +3464,42 @@ class _n extends y {
         const u = this.draggedField, h = this.draggedIndex, g = this.dropIndex;
         if (!this.isDragging || u === null || h === null || g === null)
           return;
-        const p = g > h ? g - 1 : g, m = this.getColumnOrder(), f = _e(m, h, p), b = {
+        const f = g > h ? g - 1 : g, m = this.getColumnOrder(), p = Ie(m, h, f), R = {
           field: u,
           fromIndex: h,
-          toIndex: p,
-          columnOrder: f
+          toIndex: f,
+          columnOrder: p
         };
-        this.updateColumnOrder(f), this.emit("column-move", b);
+        this.updateColumnOrder(p), this.emit("column-move", R);
       }));
     });
   }
+  /**
+   * Handle Alt+Arrow keyboard shortcuts for column reordering.
+   */
+  onKeyDown(e) {
+    if (!e.altKey || e.key !== "ArrowLeft" && e.key !== "ArrowRight")
+      return;
+    const t = this.grid, n = t._focusCol, o = t._visibleColumns;
+    if (n < 0 || n >= o.length) return;
+    const i = o[n];
+    if (!i || !_e(i)) return;
+    const r = this.grid;
+    if (r.queryPlugins({
+      type: N.CAN_MOVE_COLUMN,
+      context: i
+    }).includes(!1)) return;
+    const a = this.getColumnOrder(), d = a.indexOf(i.field);
+    if (d === -1) return;
+    const c = e.key === "ArrowLeft" ? d - 1 : d + 1;
+    if (c < 0 || c >= a.length) return;
+    const u = o.find((h) => h.field === a[c]);
+    if (!(u && r.queryPlugins({
+      type: N.CAN_MOVE_COLUMN,
+      context: u
+    }).includes(!1)))
+      return this.moveColumn(i.field, c), t._focusCol = c, Ge(this.grid), e.preventDefault(), e.stopPropagation(), !0;
+  }
   // #endregion
   // #region Public API
   /**
@@ -3300,7 +3517,7 @@ class _n extends y {
   moveColumn(e, t) {
     const n = this.getColumnOrder(), o = n.indexOf(e);
     if (o === -1) return;
-    const i = _e(n, o, t);
+    const i = Ie(n, o, t);
     this.updateColumnOrder(i), this.emit("column-move", {
       field: e,
       fromIndex: o,
@@ -3325,23 +3542,95 @@ class _n extends y {
   // #endregion
   // #region View Transition
   /**
-   * Update column order with optional view transition animation.
-   * Falls back to instant update if View Transitions API is not supported.
-   */
-  updateColumnOrder(e) {
-    const t = this.grid, n = this.shadowRoot;
-    if (this.config.viewTransition && "startViewTransition" in document && n) {
-      const o = n.querySelectorAll(".cell[data-field]");
+   * Capture header cell positions before reorder.
+   */
+  captureHeaderPositions() {
+    const e = /* @__PURE__ */ new Map();
+    return this.shadowRoot?.querySelectorAll(".header-row > .cell[data-field]").forEach((t) => {
+      const n = t.getAttribute("data-field");
+      n && e.set(n, t.getBoundingClientRect().left);
+    }), e;
+  }
+  /**
+   * Apply FLIP animation for column reorder.
+   * Uses CSS transitions - JS sets initial transform and toggles class.
+   * @param oldPositions - Header positions captured before DOM change
+   */
+  animateFLIP(e) {
+    const t = this.shadowRoot;
+    if (!t || e.size === 0) return;
+    const n = /* @__PURE__ */ new Map();
+    if (t.querySelectorAll(".header-row > .cell[data-field]").forEach((r) => {
+      const l = r.getAttribute("data-field");
+      if (!l) return;
+      const a = e.get(l);
+      if (a === void 0) return;
+      const d = a - r.getBoundingClientRect().left;
+      Math.abs(d) > 1 && n.set(l, d);
+    }), n.size === 0) return;
+    const o = [];
+    if (t.querySelectorAll(".cell[data-field]").forEach((r) => {
+      const l = n.get(r.getAttribute("data-field") ?? "");
+      if (l !== void 0) {
+        const a = r;
+        a.style.transform = `translateX(${l}px)`, o.push(a);
+      }
+    }), o.length === 0) return;
+    t.host.offsetHeight;
+    const i = this.animationDuration;
+    requestAnimationFrame(() => {
       o.forEach((r) => {
-        const l = r.getAttribute("data-field");
-        l && (r.style.viewTransitionName = `col-${l}`);
-      }), document.startViewTransition(() => t.setColumnOrder(e)).finished.finally(() => {
+        r.classList.add("flip-animating"), r.style.transform = "";
+      }), setTimeout(() => {
         o.forEach((r) => {
-          r.style.viewTransitionName = "";
+          r.style.transform = "", r.classList.remove("flip-animating");
         });
-      });
-    } else
-      t.setColumnOrder(e);
+      }, i + 50);
+    });
+  }
+  /**
+   * Apply crossfade animation for moved columns.
+   * Uses CSS keyframes - JS just toggles classes.
+   */
+  animateFade(e) {
+    const t = this.shadowRoot;
+    if (!t) {
+      e();
+      return;
+    }
+    const n = this.captureHeaderPositions();
+    e();
+    const o = /* @__PURE__ */ new Set();
+    if (t.querySelectorAll(".header-row > .cell[data-field]").forEach((l) => {
+      const a = l.getAttribute("data-field");
+      if (!a) return;
+      const d = n.get(a);
+      if (d === void 0) return;
+      const c = l.getBoundingClientRect().left;
+      Math.abs(d - c) > 1 && o.add(a);
+    }), o.size === 0) return;
+    const i = [];
+    if (t.querySelectorAll(".cell[data-field]").forEach((l) => {
+      const a = l.getAttribute("data-field");
+      if (a && o.has(a)) {
+        const d = l;
+        d.classList.add("fade-animating"), i.push(d);
+      }
+    }), i.length === 0) return;
+    const r = this.animationDuration;
+    setTimeout(() => {
+      i.forEach((l) => l.classList.remove("fade-animating"));
+    }, r + 50);
+  }
+  /**
+   * Update column order with configured animation.
+   */
+  updateColumnOrder(e) {
+    const t = this.grid, n = this.animationType;
+    if (n === "flip" && this.shadowRoot) {
+      const o = this.captureHeaderPositions();
+      t.setColumnOrder(e), this.shadowRoot.host.offsetHeight, this.animateFLIP(o);
+    } else n === "fade" ? this.animateFade(() => t.setColumnOrder(e)) : t.setColumnOrder(e);
     t.requestStateChange?.();
   }
   // #endregion
@@ -3364,14 +3653,14 @@ function Zt(s) {
     to: { row: e.endRow, col: e.endCol }
   };
 }
-function X(s) {
+function J(s) {
   return s.map(Zt);
 }
 function Xt(s, e, t) {
   const n = D(t);
   return s >= n.startRow && s <= n.endRow && e >= n.startCol && e <= n.endCol;
 }
-function Ie(s, e, t) {
+function Le(s, e, t) {
   return t.some((n) => Xt(s, e, n));
 }
 function Jt(s) {
@@ -3388,7 +3677,7 @@ function Qt(s) {
       e.set(`${n.row},${n.col}`, n);
   return [...e.values()];
 }
-function U(s, e) {
+function Y(s, e) {
   return {
     startRow: s.row,
     startCol: s.col,
@@ -3415,9 +3704,9 @@ function tn(s, e, t) {
     }));
     return { mode: s, ranges: n };
   }
-  return s === "range" && e.ranges.length > 0 ? { mode: s, ranges: X(e.ranges) } : { mode: s, ranges: [] };
+  return s === "range" && e.ranges.length > 0 ? { mode: s, ranges: J(e.ranges) } : { mode: s, ranges: [] };
 }
-class In extends y {
+class In extends v {
   name = "selection";
   version = "1.0.0";
   get defaultConfig() {
@@ -3455,7 +3744,7 @@ class In extends y {
     if (i === "range") {
       const r = o.shiftKey, l = o.ctrlKey || o.metaKey;
       if (r && this.cellAnchor) {
-        const a = U(this.cellAnchor, { row: t, col: n });
+        const a = Y(this.cellAnchor, { row: t, col: n });
         l ? this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = a : this.ranges.push(a) : this.ranges = [a], this.activeRange = a;
       } else if (l) {
         const a = {
@@ -3522,7 +3811,7 @@ class In extends y {
   }
   onCellMouseMove(e) {
     if (this.config.mode !== "range" || !this.isDragging || !this.cellAnchor || e.rowIndex === void 0 || e.colIndex === void 0 || e.rowIndex < 0) return;
-    const t = U(this.cellAnchor, { row: e.rowIndex, col: e.colIndex });
+    const t = Y(this.cellAnchor, { row: e.rowIndex, col: e.colIndex });
     return this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = t : this.ranges.push(t), this.activeRange = t, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
   }
   onCellMouseUp(e) {
@@ -3550,7 +3839,7 @@ class In extends y {
       const i = this.activeRange ? D(this.activeRange) : null;
       e.querySelectorAll(".cell[data-row][data-col]").forEach((l) => {
         const a = parseInt(l.getAttribute("data-row") ?? "-1", 10), d = parseInt(l.getAttribute("data-col") ?? "-1", 10);
-        a >= 0 && d >= 0 && Ie(a, d, this.ranges) && (l.classList.add("selected"), l.classList.remove("cell-focus"), i && (a === i.startRow && l.classList.add("top"), a === i.endRow && l.classList.add("bottom"), d === i.startCol && l.classList.add("first"), d === i.endCol && l.classList.add("last")));
+        a >= 0 && d >= 0 && Le(a, d, this.ranges) && (l.classList.add("selected"), l.classList.remove("cell-focus"), i && (a === i.startRow && l.classList.add("top"), a === i.endRow && l.classList.add("bottom"), d === i.startCol && l.classList.add("first"), d === i.endCol && l.classList.add("last")));
       });
     }
     t === "cell" && this.selectedCell && e.querySelectorAll(".cell-focus").forEach((i) => i.classList.remove("cell-focus"));
@@ -3564,7 +3853,7 @@ class In extends y {
       this.pendingKeyboardUpdate = null;
       const i = this.grid._focusRow, r = this.grid._focusCol;
       if (o && this.cellAnchor) {
-        const l = U(this.cellAnchor, { row: i, col: r });
+        const l = Y(this.cellAnchor, { row: i, col: r });
         this.ranges = [l], this.activeRange = l;
       } else o || (this.ranges = [], this.activeRange = null, this.cellAnchor = { row: i, col: r });
       this.emit("selection-change", this.#e());
@@ -3596,7 +3885,7 @@ class In extends y {
    * Get all selected cell ranges in public format.
    */
   getRanges() {
-    return X(this.ranges);
+    return J(this.ranges);
   }
   /**
    * Get all selected cells across all ranges.
@@ -3608,7 +3897,7 @@ class In extends y {
    * Check if a specific cell is in range selection.
    */
   isCellSelected(e, t) {
-    return Ie(e, t, this.ranges);
+    return Le(e, t, this.ranges);
   }
   /**
    * Clear all selection.
@@ -3627,7 +3916,7 @@ class In extends y {
       endCol: t.to.col
     })), this.activeRange = this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] : null, this.emit("selection-change", {
       mode: this.config.mode,
-      ranges: X(this.ranges)
+      ranges: J(this.ranges)
     }), this.requestAfterRender();
   }
   // #endregion
@@ -3663,7 +3952,7 @@ function on(s, e, t) {
     i.push(r);
   return i;
 }
-async function Le(s, e, t, n) {
+async function Te(s, e, t, n) {
   const o = nn(e, t);
   return s.getRows({
     startRow: o.start,
@@ -3679,7 +3968,7 @@ function rn(s, e, t) {
   return o[i];
 }
 const sn = 100;
-class Ln extends y {
+class Ln extends v {
   name = "serverSide";
   version = "1.0.0";
   get defaultConfig() {
@@ -3713,7 +4002,7 @@ class Ln extends y {
       if (!(this.loadedBlocks.has(i) || this.loadingBlocks.has(i))) {
         if (this.loadingBlocks.size >= (this.config.maxConcurrentRequests ?? 2))
           break;
-        this.loadingBlocks.add(i), Le(this.dataSource, i, t, {}).then((r) => {
+        this.loadingBlocks.add(i), Te(this.dataSource, i, t, {}).then((r) => {
           this.loadedBlocks.set(i, r.rows), this.totalRowCount = r.totalRowCount, this.loadingBlocks.delete(i), this.requestRender(), this.loadRequiredBlocks();
         }).catch(() => {
           this.loadingBlocks.delete(i);
@@ -3745,7 +4034,7 @@ class Ln extends y {
   setDataSource(e) {
     this.dataSource = e, this.loadedBlocks.clear(), this.loadingBlocks.clear();
     const t = this.config.cacheBlockSize ?? 100;
-    Le(e, 0, t, {}).then((n) => {
+    Te(e, 0, t, {}).then((n) => {
       this.loadedBlocks.set(0, n.rows), this.totalRowCount = n.totalRowCount, this.requestRender();
     });
   }
@@ -3783,38 +4072,20 @@ class Ln extends y {
   }
   // #endregion
 }
-function ne(s, e, t) {
+function De(s, e, t) {
   return s.id !== void 0 ? String(s.id) : t ? `${t}-${e}` : String(e);
 }
-function De(s, e, t, n = null, o = 0) {
-  const i = e.childrenField ?? "children", r = [];
-  for (let l = 0; l < s.length; l++) {
-    const a = s[l], d = ne(a, l, n), c = a[i], u = Array.isArray(c) && c.length > 0, h = t.has(d);
-    if (r.push({
-      key: d,
-      data: a,
-      depth: o,
-      hasChildren: u,
-      isExpanded: h,
-      parentKey: n
-    }), u && h) {
-      const g = De(c, e, t, d, o + 1);
-      r.push(...g);
-    }
-  }
-  return r;
-}
-function Te(s, e) {
+function Fe(s, e) {
   const t = new Set(s);
   return t.has(e) ? t.delete(e) : t.add(e), t;
 }
-function J(s, e, t = null, n = 0) {
+function Q(s, e, t = null, n = 0) {
   const o = e.childrenField ?? "children", i = /* @__PURE__ */ new Set();
   for (let r = 0; r < s.length; r++) {
-    const l = s[r], a = ne(l, r, t), d = l[o];
+    const l = s[r], a = De(l, r, t), d = l[o];
     if (Array.isArray(d) && d.length > 0) {
       i.add(a);
-      const c = J(d, e, a, n + 1);
+      const c = Q(d, e, a, n + 1);
       for (const u of c) i.add(u);
     }
   }
@@ -3826,7 +4097,7 @@ function ln() {
 function He(s, e, t, n = null, o = 0) {
   const i = t.childrenField ?? "children";
   for (let r = 0; r < s.length; r++) {
-    const l = s[r], a = ne(l, r, n);
+    const l = s[r], a = De(l, r, n);
     if (a === e)
       return [a];
     const d = l[i];
@@ -3846,7 +4117,7 @@ function an(s, e, t, n) {
     i.add(o[r]);
   return i;
 }
-function Fe(s, e = "children") {
+function Pe(s, e = "children") {
   if (!Array.isArray(s) || s.length === 0) return !1;
   for (const t of s)
     if (t && Array.isArray(t[e]) && t[e].length > 0)
@@ -3864,170 +4135,199 @@ function dn(s) {
     }
   return null;
 }
-const cn = ".tree-toggle{cursor:pointer;user-select:none;transition:transform .2s}.tree-toggle:hover{color:var(--tbw-tree-accent, var(--tbw-color-accent))}";
-class Tn extends y {
+const cn = ".tree-cell{display:flex;align-items:center;padding-left:calc(var(--tree-depth, 0) * var(--tbw-tree-indent, 20px))}.tree-toggle{cursor:pointer;user-select:none;display:inline-flex;align-items:center;justify-content:center;margin-right:4px}.tree-toggle:hover{color:var(--tbw-tree-accent, var(--tbw-color-accent))}.tree-spacer{width:14px;display:inline-block}.data-grid-row.tbw-tree-slide-in{animation:tbw-tree-slide-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-tree-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.data-grid-row.tbw-tree-fade-in{animation:tbw-tree-fade-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-tree-fade-in{0%{opacity:0}to{opacity:1}}";
+class Tn extends v {
   name = "tree";
   version = "1.0.0";
+  styles = cn;
   get defaultConfig() {
     return {
       childrenField: "children",
       autoDetect: !0,
       defaultExpanded: !1,
       indentWidth: 20,
-      showExpandIcons: !0
+      showExpandIcons: !0,
+      animation: "slide"
     };
   }
-  // #region Internal State
-  /** Set of expanded row keys */
+  // #region State
   expandedKeys = /* @__PURE__ */ new Set();
-  /** Whether initial expansion (based on defaultExpanded config) has been applied */
   initialExpansionDone = !1;
-  /** Flattened tree rows for rendering */
   flattenedRows = [];
-  /** Map from key to flattened row for quick lookup */
   rowKeyMap = /* @__PURE__ */ new Map();
-  // #endregion
-  // #region Lifecycle
+  previousVisibleKeys = /* @__PURE__ */ new Set();
+  keysToAnimate = /* @__PURE__ */ new Set();
+  sortState = null;
   detach() {
-    this.expandedKeys.clear(), this.initialExpansionDone = !1, this.flattenedRows = [], this.rowKeyMap.clear();
+    this.expandedKeys.clear(), this.initialExpansionDone = !1, this.flattenedRows = [], this.rowKeyMap.clear(), this.previousVisibleKeys.clear(), this.keysToAnimate.clear(), this.sortState = null;
+  }
+  // #endregion
+  // #region Animation
+  get animationStyle() {
+    const t = this.grid.effectiveConfig?.animation?.mode ?? "reduced-motion";
+    if (t === !1 || t === "off") return !1;
+    if (t !== !0 && t !== "on") {
+      const n = this.shadowRoot?.host;
+      if (n && getComputedStyle(n).getPropertyValue("--tbw-animation-enabled").trim() === "0")
+        return !1;
+    }
+    return this.config.animation ?? "slide";
   }
   // #endregion
   // #region Auto-Detection
-  /**
-   * Detects if tree functionality should be enabled based on data structure.
-   * Called by the grid during plugin initialization.
-   */
   detect(e) {
     if (!this.config.autoDetect) return !1;
     const t = this.config.childrenField ?? dn(e) ?? "children";
-    return Fe(e, t);
+    return Pe(e, t);
   }
   // #endregion
   // #region Data Processing
   processRows(e) {
     const t = this.config.childrenField ?? "children";
-    if (!Fe(e, t))
-      return this.flattenedRows = [], this.rowKeyMap.clear(), [...e];
-    this.config.defaultExpanded && !this.initialExpansionDone && (this.expandedKeys = J(e, this.config), this.initialExpansionDone = !0), this.flattenedRows = De(e, this.config, this.expandedKeys), this.rowKeyMap.clear();
-    for (const n of this.flattenedRows)
-      this.rowKeyMap.set(n.key, n);
-    return this.flattenedRows.map((n) => ({
-      ...n.data,
-      __treeKey: n.key,
-      __treeDepth: n.depth,
-      __treeHasChildren: n.hasChildren,
-      __treeExpanded: n.isExpanded
+    if (!Pe(e, t))
+      return this.flattenedRows = [], this.rowKeyMap.clear(), this.previousVisibleKeys.clear(), [...e];
+    let n = this.withStableKeys(e);
+    this.sortState && (n = this.sortTree(n, this.sortState.field, this.sortState.direction)), this.config.defaultExpanded && !this.initialExpansionDone && (this.expandedKeys = Q(n, this.config), this.initialExpansionDone = !0), this.flattenedRows = this.flattenTree(n, this.expandedKeys), this.rowKeyMap.clear(), this.keysToAnimate.clear();
+    const o = /* @__PURE__ */ new Set();
+    for (const i of this.flattenedRows)
+      this.rowKeyMap.set(i.key, i), o.add(i.key), !this.previousVisibleKeys.has(i.key) && i.depth > 0 && this.keysToAnimate.add(i.key);
+    return this.previousVisibleKeys = o, this.flattenedRows.map((i) => ({
+      ...i.data,
+      __treeKey: i.key,
+      __treeDepth: i.depth,
+      __treeHasChildren: i.hasChildren,
+      __treeExpanded: i.isExpanded
     }));
   }
+  /** Assign stable keys to rows (preserves key across sort operations) */
+  withStableKeys(e, t = null) {
+    const n = this.config.childrenField ?? "children";
+    return e.map((o, i) => {
+      const r = o.id !== void 0 ? String(o.id) : o.__stableKey ?? (t ? `${t}-${i}` : String(i)), l = o[n], a = Array.isArray(l) && l.length > 0;
+      return {
+        ...o,
+        __stableKey: r,
+        ...a ? { [n]: this.withStableKeys(l, r) } : {}
+      };
+    });
+  }
+  /** Flatten tree using stable keys */
+  flattenTree(e, t, n = 0) {
+    const o = this.config.childrenField ?? "children", i = [];
+    for (const r of e) {
+      const l = r.__stableKey ?? r.id ?? "?", a = r[o], d = Array.isArray(a) && a.length > 0, c = t.has(l);
+      i.push({
+        key: l,
+        data: r,
+        depth: n,
+        hasChildren: d,
+        isExpanded: c,
+        parentKey: n > 0 && l.substring(0, l.lastIndexOf("-")) || null
+      }), d && c && i.push(...this.flattenTree(a, t, n + 1));
+    }
+    return i;
+  }
+  /** Sort tree recursively, keeping children with parents */
+  sortTree(e, t, n) {
+    const o = this.config.childrenField ?? "children";
+    return [...e].sort((r, l) => {
+      const a = r[t], d = l[t];
+      return a == null && d == null ? 0 : a == null ? -1 : d == null ? 1 : a > d ? n : a < d ? -n : 0;
+    }).map((r) => {
+      const l = r[o];
+      return Array.isArray(l) && l.length > 0 ? { ...r, [o]: this.sortTree(l, t, n) } : r;
+    });
+  }
   processColumns(e) {
     if (this.flattenedRows.length === 0) return [...e];
     const t = [...e];
-    if (t.length > 0) {
-      const n = { ...t[0] }, o = n.viewRenderer;
-      if (o?.__treeWrapped)
-        return t;
-      const i = () => this.config, r = (l) => {
-        const { value: a, row: d, column: c } = l, u = d.__treeDepth ?? 0, h = d.__treeHasChildren ?? !1, g = d.__treeExpanded ?? !1, p = i(), m = p.indentWidth ?? 20, f = p.showExpandIcons ?? !0, b = document.createElement("span");
-        if (b.style.display = "flex", b.style.alignItems = "center", b.style.paddingLeft = `${u * m}px`, h && f) {
-          const v = document.createElement("span");
-          v.className = "tree-toggle", this.setIcon(v, this.resolveIcon(g ? "collapse" : "expand")), v.style.cursor = "pointer", v.style.marginRight = "4px", v.style.fontSize = "10px", v.setAttribute("data-tree-key", d.__treeKey), b.appendChild(v);
-        } else if (f) {
-          const v = document.createElement("span");
-          v.style.width = "14px", v.style.display = "inline-block", b.appendChild(v);
-        }
-        const E = document.createElement("span");
-        if (o) {
-          const v = o(l);
-          v instanceof Node ? E.appendChild(v) : E.textContent = String(v ?? a ?? "");
-        } else
-          E.textContent = String(a ?? "");
-        return b.appendChild(E), b;
-      };
-      r.__treeWrapped = !0, n.viewRenderer = r, t[0] = n;
-    }
-    return t;
+    if (t.length === 0) return t;
+    const n = { ...t[0] }, o = n.viewRenderer;
+    if (o?.__treeWrapped) return t;
+    const i = () => this.config, r = this.setIcon.bind(this), l = this.resolveIcon.bind(this), a = (d) => {
+      const { value: c, row: u } = d, { indentWidth: h = 20, showExpandIcons: g = !0 } = i(), f = document.createElement("span");
+      if (f.className = "tree-cell", f.style.setProperty("--tree-depth", String(u.__treeDepth ?? 0)), f.style.setProperty("--tbw-tree-indent", `${h}px`), u.__treeHasChildren && g) {
+        const p = document.createElement("span");
+        p.className = `tree-toggle${u.__treeExpanded ? " expanded" : ""}`, r(p, l(u.__treeExpanded ? "collapse" : "expand")), p.setAttribute("data-tree-key", u.__treeKey), f.appendChild(p);
+      } else if (g) {
+        const p = document.createElement("span");
+        p.className = "tree-spacer", f.appendChild(p);
+      }
+      const m = document.createElement("span");
+      if (o) {
+        const p = o(d);
+        p instanceof Node ? m.appendChild(p) : m.textContent = String(p ?? c ?? "");
+      } else
+        m.textContent = String(c ?? "");
+      return f.appendChild(m), f;
+    };
+    return a.__treeWrapped = !0, n.viewRenderer = a, t[0] = n, t;
   }
   // #endregion
   // #region Event Handlers
   onCellClick(e) {
     const t = e.originalEvent?.target;
     if (!t?.classList.contains("tree-toggle")) return !1;
-    const n = t.getAttribute("data-tree-key");
-    if (!n) return !1;
-    const o = this.rowKeyMap.get(n);
-    return o ? (this.expandedKeys = Te(this.expandedKeys, n), this.emit("tree-expand", {
+    const n = t.getAttribute("data-tree-key"), o = n ? this.rowKeyMap.get(n) : null;
+    return o ? (this.expandedKeys = Fe(this.expandedKeys, n), this.emit("tree-expand", {
       key: n,
       row: o.data,
       expanded: this.expandedKeys.has(n),
       depth: o.depth
     }), this.requestRender(), !0) : !1;
   }
+  onHeaderClick(e) {
+    if (this.flattenedRows.length === 0 || !e.column.sortable) return !1;
+    const { field: t } = e.column;
+    !this.sortState || this.sortState.field !== t ? this.sortState = { field: t, direction: 1 } : this.sortState.direction === 1 ? this.sortState = { field: t, direction: -1 } : this.sortState = null;
+    const n = this.grid;
+    return n._sortState !== void 0 && (n._sortState = this.sortState ? { ...this.sortState } : null), this.emit("sort-change", { field: t, direction: this.sortState?.direction ?? 0 }), this.requestRender(), !0;
+  }
+  afterRender() {
+    const e = this.animationStyle;
+    if (e === !1 || this.keysToAnimate.size === 0) return;
+    const t = this.shadowRoot?.querySelector(".rows");
+    if (!t) return;
+    const n = e === "fade" ? "tbw-tree-fade-in" : "tbw-tree-slide-in";
+    for (const o of t.querySelectorAll(".data-grid-row")) {
+      const i = o.querySelector(".cell[data-row]"), r = i ? parseInt(i.getAttribute("data-row") ?? "-1", 10) : -1, l = this.flattenedRows[r]?.key;
+      l && this.keysToAnimate.has(l) && (o.classList.add(n), o.addEventListener("animationend", () => o.classList.remove(n), { once: !0 }));
+    }
+    this.keysToAnimate.clear();
+  }
   // #endregion
   // #region Public API
-  /**
-   * Expand a specific node by key.
-   */
   expand(e) {
     this.expandedKeys.add(e), this.requestRender();
   }
-  /**
-   * Collapse a specific node by key.
-   */
   collapse(e) {
     this.expandedKeys.delete(e), this.requestRender();
   }
-  /**
-   * Toggle the expansion state of a node.
-   */
   toggle(e) {
-    this.expandedKeys = Te(this.expandedKeys, e), this.requestRender();
+    this.expandedKeys = Fe(this.expandedKeys, e), this.requestRender();
   }
-  /**
-   * Expand all nodes in the tree.
-   */
   expandAll() {
-    this.expandedKeys = J(this.rows, this.config), this.requestRender();
+    this.expandedKeys = Q(this.rows, this.config), this.requestRender();
   }
-  /**
-   * Collapse all nodes in the tree.
-   */
   collapseAll() {
     this.expandedKeys = ln(), this.requestRender();
   }
-  /**
-   * Check if a node is currently expanded.
-   */
   isExpanded(e) {
     return this.expandedKeys.has(e);
   }
-  /**
-   * Get all currently expanded keys.
-   */
   getExpandedKeys() {
     return [...this.expandedKeys];
   }
-  /**
-   * Get the flattened tree rows with metadata.
-   */
   getFlattenedRows() {
     return [...this.flattenedRows];
   }
-  /**
-   * Get a row's original data by its key.
-   */
   getRowByKey(e) {
     return this.rowKeyMap.get(e)?.data;
   }
-  /**
-   * Expand all ancestors of a node to make it visible.
-   */
   expandToKey(e) {
     this.expandedKeys = an(this.rows, e, this.config, this.expandedKeys), this.requestRender();
   }
   // #endregion
-  // #region Styles
-  styles = cn;
-  // #endregion
 }
 function un(s, e, t) {
   const n = [...s.undoStack, e];
@@ -4051,7 +4351,7 @@ function Me(s) {
     action: t
   } : { newState: s, action: null };
 }
-function Ne(s) {
+function Ke(s) {
   if (s.redoStack.length === 0)
     return { newState: s, action: null };
   const e = [...s.redoStack], t = e.pop();
@@ -4069,10 +4369,10 @@ function hn(s) {
 function gn(s) {
   return s.redoStack.length > 0;
 }
-function pn() {
+function fn() {
   return { undoStack: [], redoStack: [] };
 }
-function fn(s, e, t, n) {
+function pn(s, e, t, n) {
   return {
     type: "cell-edit",
     rowIndex: s,
@@ -4082,7 +4382,7 @@ function fn(s, e, t, n) {
     timestamp: Date.now()
   };
 }
-class Fn extends y {
+class Fn extends v {
   name = "undoRedo";
   version = "1.0.0";
   get defaultConfig() {
@@ -4118,7 +4418,7 @@ class Fn extends y {
       return !0;
     }
     if (n) {
-      const o = Ne({ undoStack: this.undoStack, redoStack: this.redoStack });
+      const o = Ke({ undoStack: this.undoStack, redoStack: this.redoStack });
       if (o.action) {
         const i = this.rows;
         i[o.action.rowIndex] && (i[o.action.rowIndex][o.action.field] = o.action.newValue), this.undoStack = o.newState.undoStack, this.redoStack = o.newState.redoStack, this.emit("redo", {
@@ -4141,7 +4441,7 @@ class Fn extends y {
    * @param newValue - The value after the edit
    */
   recordEdit(e, t, n, o) {
-    const i = fn(e, t, n, o), r = un(
+    const i = pn(e, t, n, o), r = un(
       { undoStack: this.undoStack, redoStack: this.redoStack },
       i,
       this.config.maxHistorySize ?? 100
@@ -4167,7 +4467,7 @@ class Fn extends y {
    * @returns The redone action, or null if nothing to redo
    */
   redo() {
-    const e = Ne({ undoStack: this.undoStack, redoStack: this.redoStack });
+    const e = Ke({ undoStack: this.undoStack, redoStack: this.redoStack });
     if (e.action) {
       const t = this.rows;
       t[e.action.rowIndex] && (t[e.action.rowIndex][e.action.field] = e.action.newValue), this.undoStack = e.newState.undoStack, this.redoStack = e.newState.redoStack, this.requestRender();
@@ -4190,7 +4490,7 @@ class Fn extends y {
    * Clear all undo/redo history.
    */
   clearHistory() {
-    const e = pn();
+    const e = fn();
     this.undoStack = e.undoStack, this.redoStack = e.redoStack;
   }
   /**
@@ -4208,11 +4508,11 @@ class Fn extends y {
   // #endregion
 }
 const mn = '.tbw-visibility-content{display:flex;flex-direction:column;height:100%}.tbw-visibility-list{flex:1;overflow-y:auto;padding:8px}.tbw-visibility-row{display:flex;align-items:center;gap:8px;padding:6px 4px;cursor:pointer;font-size:13px;border-radius:var(--tbw-border-radius, 4px);position:relative}.tbw-visibility-row:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover, #f3f4f6))}.tbw-visibility-row input[type=checkbox]{cursor:pointer}.tbw-visibility-row.locked span{color:var(--tbw-color-fg-muted, #888)}.tbw-visibility-handle{cursor:grab;color:var(--tbw-color-fg-muted, #888);font-size:10px;letter-spacing:-2px;user-select:none;flex-shrink:0}.tbw-visibility-row.reorderable:hover .tbw-visibility-handle{color:var(--tbw-color-fg, #1f2937)}.tbw-visibility-label{display:flex;align-items:center;gap:8px;flex:1;cursor:pointer}.tbw-visibility-row.dragging{opacity:.5;cursor:grabbing}.tbw-visibility-row.drop-before:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent, #3b82f6))}.tbw-visibility-row.drop-after:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent, #3b82f6))}.tbw-visibility-show-all{margin:8px;padding:8px 12px;border:1px solid var(--tbw-visibility-border, var(--tbw-color-border, #e5e7eb));border-radius:var(--tbw-border-radius, 4px);background:var(--tbw-visibility-btn-bg, var(--tbw-color-header-bg, #f9fafb));color:var(--tbw-color-fg, #1f2937);cursor:pointer;font-size:13px}.tbw-visibility-show-all:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover, #f3f4f6))}';
-function Pe(s) {
+function Ne(s) {
   const e = s.meta ?? {};
   return e.lockPosition !== !0 && e.suppressMovable !== !0;
 }
-class M extends y {
+class F extends v {
   name = "visibility";
   version = "1.0.0";
   /** Tool panel ID for shell integration */
@@ -4241,7 +4541,7 @@ class M extends y {
    */
   getToolPanel() {
     return {
-      id: M.PANEL_ID,
+      id: F.PANEL_ID,
       title: "Columns",
       icon: "☰",
       tooltip: "Column visibility",
@@ -4256,7 +4556,7 @@ class M extends y {
    * Show the visibility sidebar panel.
    */
   show() {
-    this.grid.openToolPanel(M.PANEL_ID);
+    this.grid.openToolPanel(F.PANEL_ID);
   }
   /**
    * Hide the visibility sidebar panel.
@@ -4268,7 +4568,7 @@ class M extends y {
    * Toggle the visibility sidebar panel.
    */
   toggle() {
-    this.grid.toggleToolPanel(M.PANEL_ID);
+    this.grid.toggleToolPanel(F.PANEL_ID);
   }
   /**
    * Check if a specific column is visible.
@@ -4346,7 +4646,7 @@ class M extends y {
    * @returns True if the panel is open
    */
   isPanelVisible() {
-    return this.grid.activeToolPanel === M.PANEL_ID;
+    return this.grid.activeToolPanel === F.PANEL_ID;
   }
   // #endregion
   // #region Private Methods
@@ -4383,7 +4683,7 @@ class M extends y {
     const o = t.getAllColumns();
     for (let i = 0; i < o.length; i++) {
       const r = o[i], l = r.header || r.field, a = document.createElement("div");
-      a.className = r.lockVisible ? "tbw-visibility-row locked" : "tbw-visibility-row", a.setAttribute("data-field", r.field), a.setAttribute("data-index", String(i)), n && Pe(r) && (a.draggable = !0, a.classList.add("reorderable"), this.setupDragListeners(a, r.field, i, e));
+      a.className = r.lockVisible ? "tbw-visibility-row locked" : "tbw-visibility-row", a.setAttribute("data-field", r.field), a.setAttribute("data-index", String(i)), n && Ne(r) && (a.draggable = !0, a.classList.add("reorderable"), this.setupDragListeners(a, r.field, i, e));
       const d = document.createElement("label");
       d.className = "tbw-visibility-label";
       const c = document.createElement("input");
@@ -4391,7 +4691,7 @@ class M extends y {
         t.toggleColumnVisibility(r.field), setTimeout(() => this.rebuildToggles(e), 0);
       });
       const u = document.createElement("span");
-      if (u.textContent = l, d.appendChild(c), d.appendChild(u), n && Pe(r)) {
+      if (u.textContent = l, d.appendChild(c), d.appendChild(u), n && Ne(r)) {
         const h = document.createElement("span");
         h.className = "tbw-visibility-handle", this.setIcon(h, this.resolveIcon("dragHandle")), h.title = "Drag to reorder", a.appendChild(h);
       }
@@ -4441,44 +4741,47 @@ class M extends y {
   // #endregion
 }
 export {
-  y as BaseGridPlugin,
+  v as BaseGridPlugin,
   bn as ClipboardPlugin,
   vn as ColumnVirtualizationPlugin,
   xn as ContextMenuPlugin,
-  Ge as DEFAULT_GRID_ICONS,
-  Pn as DGEvents,
-  Kn as DataGridElement,
+  Kn as DEFAULT_ANIMATION_CONFIG,
+  Ve as DEFAULT_GRID_ICONS,
+  Nn as DGEvents,
+  qn as DataGridElement,
   yn as ExportPlugin,
-  _ as FilteringPlugin,
-  qn as FitModeEnum,
-  Dn as GridCSSVars,
-  Hn as GridClasses,
-  Gn as GridDataAttrs,
-  On as GridElement,
+  A as FilteringPlugin,
+  Dn as FitModeEnum,
+  Hn as GridCSSVars,
+  Vn as GridClasses,
+  On as GridDataAttrs,
+  Gn as GridElement,
   Bn as GridSelectors,
   Cn as GroupingColumnsPlugin,
   Rn as GroupingRowsPlugin,
   Sn as MasterDetailPlugin,
-  En as MultiSortPlugin,
-  Ke as PLUGIN_QUERIES,
-  kn as PinnedColumnsPlugin,
+  kn as MultiSortPlugin,
+  N as PLUGIN_QUERIES,
+  En as PinnedColumnsPlugin,
   An as PinnedRowsPlugin,
-  F as PivotPlugin,
-  Vn as PluginEvents,
-  zn as PluginManager,
+  T as PivotPlugin,
+  zn as PluginEvents,
+  Wn as PluginManager,
   _n as ReorderPlugin,
   In as SelectionPlugin,
   Ln as ServerSidePlugin,
   Tn as TreePlugin,
   Fn as UndoRedoPlugin,
-  M as VisibilityPlugin,
-  Wn as aggregatorRegistry,
+  F as VisibilityPlugin,
+  $n as aggregatorRegistry,
+  jn as builtInSort,
+  Un as defaultComparator,
   le as getAggregator,
   Oe as getValueAggregator,
-  $n as listAggregators,
-  jn as registerAggregator,
+  Yn as listAggregators,
+  Zn as registerAggregator,
   se as runAggregator,
-  Un as runValueAggregator,
-  Yn as unregisterAggregator
+  Xn as runValueAggregator,
+  Jn as unregisterAggregator
 };
 //# sourceMappingURL=all.js.map