@toolbox-web/grid 0.4.1 → 0.5.0

package/lib/plugins/pivot/index.js

@@ -1,4 +1,4 @@
-const E = {
+const L = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -25,8 +25,11 @@ class P {
    * ```
    */
   static dependencies;
-  /** Plugin version - override in subclass if needed */
-  version = "1.0.0";
+  /**
+   * Plugin version - defaults to grid version for built-in plugins.
+   * Third-party plugins can override with their own semver.
+   */
+  version = typeof __GRID_VERSION__ < "u" ? __GRID_VERSION__ : "dev";
   /** CSS styles to inject into the grid's shadow DOM */
   styles;
   /** Custom cell renderers keyed by type name */
@@ -113,12 +116,28 @@ class P {
   emit(e, t) {
     this.grid?.dispatchEvent?.(new CustomEvent(e, { detail: t, bubbles: !0 }));
   }
+  /**
+   * Emit a cancelable custom event from the grid.
+   * @returns `true` if the event was cancelled (preventDefault called), `false` otherwise
+   */
+  emitCancelable(e, t) {
+    const o = new CustomEvent(e, { detail: t, bubbles: !0, cancelable: !0 });
+    return this.grid?.dispatchEvent?.(o), o.defaultPrevented;
+  }
   /**
    * Request a re-render of the grid.
    */
   requestRender() {
     this.grid?.requestRender?.();
   }
+  /**
+   * Request a re-render and restore focus styling afterward.
+   * Use this when a plugin action (like expand/collapse) triggers a render
+   * but needs to maintain keyboard navigation focus.
+   */
+  requestRenderWithFocus() {
+    this.grid?.requestRenderWithFocus?.();
+  }
   /**
    * Request a lightweight style update without rebuilding DOM.
    * Use this instead of requestRender() when only CSS classes need updating.
@@ -153,10 +172,34 @@ class P {
     return this.grid?._visibleColumns ?? [];
   }
   /**
-   * Get the shadow root of the grid.
+   * Get the grid as an HTMLElement for direct DOM operations.
+   * Use sparingly - prefer the typed GridElementRef API when possible.
+   *
+   * @example
+   * ```ts
+   * const width = this.gridElement.clientWidth;
+   * this.gridElement.classList.add('my-plugin-active');
+   * ```
+   */
+  get gridElement() {
+    return this.grid;
+  }
+  /**
+   * Get the render root of the grid for DOM queries.
+   * @deprecated Use `gridElement` instead. This getter exists only for backward compatibility.
+   *
+   * With Shadow DOM removed, the grid element itself is the render root.
+   * All new code should use `this.gridElement` for DOM queries.
+   *
+   * @example
+   * // OLD (deprecated)
+   * const rows = this.shadowRoot?.querySelector('.rows');
+   *
+   * // NEW (preferred)
+   * const rows = this.gridElement.querySelector('.rows');
    */
   get shadowRoot() {
-    return this.grid?.shadowRoot ?? null;
+    return this.gridElement;
   }
   /**
    * Get the disconnect signal for event listener cleanup.
@@ -184,8 +227,53 @@ class P {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...E, ...e };
+    return { ...L, ...e };
+  }
+  // #region Animation Helpers
+  /**
+   * Check if animations are enabled at the grid level.
+   * Respects gridConfig.animation.mode and the CSS variable set by the grid.
+   *
+   * Plugins should use this to skip animations when:
+   * - Animation mode is 'off' or `false`
+   * - User prefers reduced motion and mode is 'reduced-motion' (default)
+   *
+   * @example
+   * ```ts
+   * private get animationStyle(): 'slide' | 'fade' | false {
+   *   if (!this.isAnimationEnabled) return false;
+   *   return this.config.animation ?? 'slide';
+   * }
+   * ```
+   */
+  get isAnimationEnabled() {
+    const e = this.grid?.effectiveConfig?.animation?.mode ?? "reduced-motion";
+    if (e === !1 || e === "off") return !1;
+    if (e === !0 || e === "on") return !0;
+    const t = this.gridElement;
+    return t ? getComputedStyle(t).getPropertyValue("--tbw-animation-enabled").trim() !== "0" : !0;
   }
+  /**
+   * Get the animation duration in milliseconds from CSS variable.
+   * Falls back to 200ms if not set.
+   *
+   * Plugins can use this for their animation timing to stay consistent
+   * with the grid-level animation.duration setting.
+   *
+   * @example
+   * ```ts
+   * element.animate(keyframes, { duration: this.animationDuration });
+   * ```
+   */
+  get animationDuration() {
+    const e = this.gridElement;
+    if (e) {
+      const t = getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(), o = parseInt(t, 10);
+      if (!isNaN(o)) return o;
+    }
+    return 200;
+  }
+  // #endregion
   /**
    * Resolve an icon value to string or HTMLElement.
    * Checks plugin config first, then grid-level icons, then defaults.
@@ -218,7 +306,7 @@ class P {
 const m = {
   sum: (i, e) => i.reduce((t, o) => t + (Number(o[e]) || 0), 0),
   avg: (i, e) => {
-    const t = i.reduce((o, n) => o + (Number(n[e]) || 0), 0);
+    const t = i.reduce((o, r) => o + (Number(r[e]) || 0), 0);
     return i.length ? t / i.length : 0;
   },
   count: (i) => i.length,
@@ -226,46 +314,46 @@ const m = {
   max: (i, e) => Math.max(...i.map((t) => Number(t[e]) || -1 / 0)),
   first: (i, e) => i[0]?.[e],
   last: (i, e) => i[i.length - 1]?.[e]
-}, v = /* @__PURE__ */ new Map(), h = {
+}, f = /* @__PURE__ */ new Map(), g = {
   /**
    * Register a custom aggregator function.
    */
   register(i, e) {
-    v.set(i, e);
+    f.set(i, e);
   },
   /**
    * Unregister a custom aggregator function.
    */
   unregister(i) {
-    v.delete(i);
+    f.delete(i);
   },
   /**
    * Get an aggregator function by reference.
    */
   get(i) {
     if (i !== void 0)
-      return typeof i == "function" ? i : v.get(i) ?? m[i];
+      return typeof i == "function" ? i : f.get(i) ?? m[i];
   },
   /**
    * Run an aggregator on a set of rows.
    */
   run(i, e, t, o) {
-    const n = this.get(i);
-    return n ? n(e, t, o) : void 0;
+    const r = this.get(i);
+    return r ? r(e, t, o) : void 0;
   },
   /**
    * Check if an aggregator exists.
    */
   has(i) {
-    return v.has(i) || i in m;
+    return f.has(i) || i in m;
   },
   /**
    * List all available aggregator names.
    */
   list() {
-    return [...Object.keys(m), ...v.keys()];
+    return [...Object.keys(m), ...f.keys()];
   }
-}, R = {
+}, A = {
   sum: (i) => i.reduce((e, t) => e + t, 0),
   avg: (i) => i.length ? i.reduce((e, t) => e + t, 0) / i.length : 0,
   count: (i) => i.length,
@@ -274,15 +362,15 @@ const m = {
   first: (i) => i[0] ?? 0,
   last: (i) => i[i.length - 1] ?? 0
 };
-function N(i) {
-  return R[i] ?? R.sum;
+function k(i) {
+  return A[i] ?? A.sum;
 }
-h.register.bind(h);
-h.unregister.bind(h);
-h.get.bind(h);
-h.run.bind(h);
-h.list.bind(h);
-const K = N;
+g.register.bind(g);
+g.unregister.bind(g);
+g.get.bind(g);
+g.run.bind(g);
+g.list.bind(g);
+const N = k;
 function S(i) {
   const e = [];
   return !i.rowGroupFields?.length && !i.columnGroupFields?.length && e.push("At least one row or column group field is required"), i.valueFields?.length || e.push("At least one value field is required"), e;
@@ -290,249 +378,249 @@ function S(i) {
 function C(i, e) {
   return [...i, e].join("|");
 }
-function I(i, e) {
-  const t = e.rowGroupFields ?? [], o = e.columnGroupFields ?? [], n = e.valueFields ?? [], r = V(i, o), s = L(
+function K(i, e) {
+  const t = e.rowGroupFields ?? [], o = e.columnGroupFields ?? [], r = e.valueFields ?? [], n = I(i, o), a = E(
     i,
     t,
     o,
-    r,
     n,
+    r,
     0,
     // starting depth
     ""
     // parent key prefix
-  ), a = D(s, r, n), l = Object.values(a).reduce((d, c) => d + c, 0);
+  ), s = z(a, n, r), l = Object.values(s).reduce((d, c) => d + c, 0);
   return {
-    rows: s,
-    columnKeys: r,
-    totals: a,
+    rows: a,
+    columnKeys: n,
+    totals: s,
     grandTotal: l
   };
 }
-function V(i, e) {
+function I(i, e) {
   if (e.length === 0) return ["value"];
   const t = /* @__PURE__ */ new Set();
   for (const o of i) {
-    const n = e.map((r) => String(o[r] ?? "")).join("|");
-    t.add(n);
+    const r = e.map((n) => String(o[n] ?? "")).join("|");
+    t.add(r);
   }
   return [...t].sort();
 }
-function M(i, e) {
+function V(i, e) {
   const t = /* @__PURE__ */ new Map();
   for (const o of i) {
-    const n = String(o[e] ?? ""), r = t.get(n);
-    r ? r.push(o) : t.set(n, [o]);
+    const r = String(o[e] ?? ""), n = t.get(r);
+    n ? n.push(o) : t.set(r, [o]);
   }
   return t;
 }
-function L(i, e, t, o, n, r, s) {
-  const a = [];
+function E(i, e, t, o, r, n, a) {
+  const s = [];
   if (e.length === 0) {
-    const u = T(i, t, o, n), g = _(u);
-    return a.push({
-      rowKey: s || "all",
-      rowLabel: s || "All",
-      depth: r,
+    const u = _(i, t, o, r), h = R(u);
+    return s.push({
+      rowKey: a || "all",
+      rowLabel: a || "All",
+      depth: n,
       values: u,
-      total: g,
+      total: h,
       isGroup: !1,
       rowCount: i.length
-    }), a;
-  }
-  const l = e[0], d = e.slice(1), c = d.length > 0, p = M(i, l);
-  for (const [u, g] of p) {
-    const y = s ? `${s}|${u}` : u, F = T(g, t, o, n), k = _(F);
-    let A;
-    c && (A = L(
-      g,
+    }), s;
+  }
+  const l = e[0], d = e.slice(1), c = d.length > 0, p = V(i, l);
+  for (const [u, h] of p) {
+    const y = a ? `${a}|${u}` : u, x = _(h, t, o, r), G = R(x);
+    let F;
+    c && (F = E(
+      h,
       d,
       t,
       o,
-      n,
-      r + 1,
+      r,
+      n + 1,
       y
-    )), a.push({
+    )), s.push({
       rowKey: y,
       rowLabel: u || "(blank)",
-      depth: r,
-      values: F,
-      total: k,
+      depth: n,
+      values: x,
+      total: G,
       isGroup: c,
-      children: A,
-      rowCount: g.length
+      children: F,
+      rowCount: h.length
     });
   }
-  return a;
+  return s;
 }
-function T(i, e, t, o) {
-  const n = {};
-  for (const r of t)
-    for (const s of o) {
-      const l = (e.length > 0 ? i.filter((u) => e.map((g) => String(u[g] ?? "")).join("|") === r) : i).map((u) => Number(u[s.field]) || 0), d = K(s.aggFunc), c = l.length > 0 ? d(l) : null, p = C([r], s.field);
-      n[p] = c;
+function _(i, e, t, o) {
+  const r = {};
+  for (const n of t)
+    for (const a of o) {
+      const l = (e.length > 0 ? i.filter((u) => e.map((h) => String(u[h] ?? "")).join("|") === n) : i).map((u) => Number(u[a.field]) || 0), d = N(a.aggFunc), c = l.length > 0 ? d(l) : null, p = C([n], a.field);
+      r[p] = c;
     }
-  return n;
+  return r;
 }
-function _(i) {
+function R(i) {
   let e = 0;
   for (const t of Object.values(i))
     e += t ?? 0;
   return e;
 }
-function D(i, e, t) {
+function z(i, e, t) {
   const o = {};
-  function n(r) {
-    for (const s of r)
-      if (!s.isGroup || !s.children?.length)
-        for (const a of e)
+  function r(n) {
+    for (const a of n)
+      if (!a.isGroup || !a.children?.length)
+        for (const s of e)
           for (const l of t) {
-            const d = C([a], l.field);
-            o[d] = (o[d] ?? 0) + (s.values[d] ?? 0);
+            const d = C([s], l.field);
+            o[d] = (o[d] ?? 0) + (a.values[d] ?? 0);
           }
-      else s.children && n(s.children);
+      else a.children && r(a.children);
   }
-  return n(i), o;
+  return r(i), o;
 }
-function H(i, e, t = !0) {
+function D(i, e, t = !0) {
   const o = [];
-  function n(r) {
-    o.push(r);
-    const s = e ? e.has(r.rowKey) : t;
-    if (r.children && s)
-      for (const a of r.children)
-        n(a);
-  }
-  for (const r of i)
-    n(r);
+  function r(n) {
+    o.push(n);
+    const a = e ? e.has(n.rowKey) : t;
+    if (n.children && a)
+      for (const s of n.children)
+        r(s);
+  }
+  for (const n of i)
+    r(n);
   return o;
 }
-function w(i) {
+function q(i) {
   const e = [];
   function t(o) {
     if (o.isGroup && e.push(o.rowKey), o.children)
-      for (const n of o.children)
-        t(n);
+      for (const r of o.children)
+        t(r);
   }
   for (const o of i)
     t(o);
   return e;
 }
-const q = ["sum", "avg", "count", "min", "max", "first", "last"];
-function z(i, e, t, o) {
-  const n = new AbortController(), r = { config: e, callbacks: o, signal: n.signal }, s = document.createElement("div");
-  return s.className = "tbw-pivot-panel", s.appendChild(f("Options", () => U(t, r))), s.appendChild(f("Row Groups", () => G("rowGroups", r))), s.appendChild(f("Column Groups", () => G("columnGroups", r))), s.appendChild(f("Values", () => Z(r))), s.appendChild(f("Available Fields", () => j(r))), i.appendChild(s), () => {
-    n.abort(), s.remove();
+const H = ["sum", "avg", "count", "min", "max", "first", "last"];
+function M(i, e, t, o) {
+  const r = new AbortController(), n = { config: e, callbacks: o, signal: r.signal }, a = document.createElement("div");
+  return a.className = "tbw-pivot-panel", a.appendChild(b("Options", () => W(t, n))), a.appendChild(b("Row Groups", () => T("rowGroups", n))), a.appendChild(b("Column Groups", () => T("columnGroups", n))), a.appendChild(b("Values", () => Z(n))), a.appendChild(b("Available Fields", () => j(n))), i.appendChild(a), () => {
+    r.abort(), a.remove();
   };
 }
-function f(i, e) {
+function b(i, e) {
   const t = document.createElement("div");
   t.className = "tbw-pivot-section";
   const o = document.createElement("div");
   o.className = "tbw-pivot-section-header", o.textContent = i;
-  const n = document.createElement("div");
-  return n.className = "tbw-pivot-section-content", n.appendChild(e()), t.appendChild(o), t.appendChild(n), t;
+  const r = document.createElement("div");
+  return r.className = "tbw-pivot-section-content", r.appendChild(e()), t.appendChild(o), t.appendChild(r), t;
 }
-function G(i, e) {
-  const { config: t, callbacks: o, signal: n } = e, r = document.createElement("div");
-  r.className = "tbw-pivot-drop-zone", r.setAttribute("data-zone", i);
-  const s = i === "rowGroups" ? t.rowGroupFields ?? [] : t.columnGroupFields ?? [];
-  if (s.length === 0) {
-    const a = document.createElement("div");
-    a.className = "tbw-pivot-placeholder", a.textContent = "Drag fields here or click to add", r.appendChild(a);
+function T(i, e) {
+  const { config: t, callbacks: o, signal: r } = e, n = document.createElement("div");
+  n.className = "tbw-pivot-drop-zone", n.setAttribute("data-zone", i);
+  const a = i === "rowGroups" ? t.rowGroupFields ?? [] : t.columnGroupFields ?? [];
+  if (a.length === 0) {
+    const s = document.createElement("div");
+    s.className = "tbw-pivot-placeholder", s.textContent = "Drag fields here or click to add", n.appendChild(s);
   } else
-    for (const a of s)
-      r.appendChild(O(a, i, e));
-  return r.addEventListener(
+    for (const s of a)
+      n.appendChild(O(s, i, e));
+  return n.addEventListener(
     "dragover",
-    (a) => {
-      a.preventDefault(), r.classList.add("drag-over");
+    (s) => {
+      s.preventDefault(), n.classList.add("drag-over");
     },
-    { signal: n }
-  ), r.addEventListener(
+    { signal: r }
+  ), n.addEventListener(
     "dragleave",
     () => {
-      r.classList.remove("drag-over");
+      n.classList.remove("drag-over");
     },
-    { signal: n }
-  ), r.addEventListener(
+    { signal: r }
+  ), n.addEventListener(
     "drop",
-    (a) => {
-      a.preventDefault(), r.classList.remove("drag-over");
-      const l = a.dataTransfer?.getData("text/plain");
+    (s) => {
+      s.preventDefault(), n.classList.remove("drag-over");
+      const l = s.dataTransfer?.getData("text/plain");
       l && o.onAddFieldToZone(l, i);
     },
-    { signal: n }
-  ), r;
+    { signal: r }
+  ), n;
 }
 function O(i, e, t) {
-  const { callbacks: o, signal: n } = t, r = document.createElement("div");
-  r.className = "tbw-pivot-field-chip", r.draggable = !0;
-  const s = o.getAvailableFields().find((d) => d.field === i), a = document.createElement("span");
-  a.className = "tbw-pivot-chip-label", a.textContent = s?.header ?? i;
+  const { callbacks: o, signal: r } = t, n = document.createElement("div");
+  n.className = "tbw-pivot-field-chip", n.draggable = !0;
+  const a = o.getAvailableFields().find((d) => d.field === i), s = document.createElement("span");
+  s.className = "tbw-pivot-chip-label", s.textContent = a?.header ?? i;
   const l = document.createElement("button");
   return l.className = "tbw-pivot-chip-remove", l.innerHTML = "×", l.title = "Remove field", l.addEventListener(
     "click",
     (d) => {
       d.stopPropagation(), o.onRemoveFieldFromZone(i, e);
     },
-    { signal: n }
-  ), r.appendChild(a), r.appendChild(l), r.addEventListener(
+    { signal: r }
+  ), n.appendChild(s), n.appendChild(l), n.addEventListener(
     "dragstart",
     (d) => {
-      d.dataTransfer?.setData("text/plain", i), d.dataTransfer?.setData("source-zone", e), r.classList.add("dragging");
+      d.dataTransfer?.setData("text/plain", i), d.dataTransfer?.setData("source-zone", e), n.classList.add("dragging");
     },
-    { signal: n }
-  ), r.addEventListener(
+    { signal: r }
+  ), n.addEventListener(
     "dragend",
     () => {
-      r.classList.remove("dragging");
+      n.classList.remove("dragging");
     },
-    { signal: n }
-  ), r;
+    { signal: r }
+  ), n;
 }
 function Z(i) {
-  const { config: e, callbacks: t, signal: o } = i, n = document.createElement("div");
-  n.className = "tbw-pivot-drop-zone tbw-pivot-values-zone", n.setAttribute("data-zone", "values");
-  const r = e.valueFields ?? [];
-  if (r.length === 0) {
-    const s = document.createElement("div");
-    s.className = "tbw-pivot-placeholder", s.textContent = "Drag numeric fields here for aggregation", n.appendChild(s);
+  const { config: e, callbacks: t, signal: o } = i, r = document.createElement("div");
+  r.className = "tbw-pivot-drop-zone tbw-pivot-values-zone", r.setAttribute("data-zone", "values");
+  const n = e.valueFields ?? [];
+  if (n.length === 0) {
+    const a = document.createElement("div");
+    a.className = "tbw-pivot-placeholder", a.textContent = "Drag numeric fields here for aggregation", r.appendChild(a);
   } else
-    for (const s of r)
-      n.appendChild($(s, i));
-  return n.addEventListener(
+    for (const a of n)
+      r.appendChild($(a, i));
+  return r.addEventListener(
     "dragover",
-    (s) => {
-      s.preventDefault(), n.classList.add("drag-over");
+    (a) => {
+      a.preventDefault(), r.classList.add("drag-over");
     },
     { signal: o }
-  ), n.addEventListener(
+  ), r.addEventListener(
     "dragleave",
     () => {
-      n.classList.remove("drag-over");
+      r.classList.remove("drag-over");
     },
     { signal: o }
-  ), n.addEventListener(
+  ), r.addEventListener(
     "drop",
-    (s) => {
-      s.preventDefault(), n.classList.remove("drag-over");
-      const a = s.dataTransfer?.getData("text/plain");
-      a && t.onAddValueField(a, "sum");
+    (a) => {
+      a.preventDefault(), r.classList.remove("drag-over");
+      const s = a.dataTransfer?.getData("text/plain");
+      s && t.onAddValueField(s, "sum");
     },
     { signal: o }
-  ), n;
+  ), r;
 }
 function $(i, e) {
-  const { callbacks: t, signal: o } = e, n = document.createElement("div");
-  n.className = "tbw-pivot-field-chip tbw-pivot-value-chip";
-  const r = t.getAvailableFields().find((c) => c.field === i.field), s = document.createElement("div");
-  s.className = "tbw-pivot-value-label-wrapper";
-  const a = document.createElement("span");
-  a.className = "tbw-pivot-chip-label", a.textContent = r?.header ?? i.field;
+  const { callbacks: t, signal: o } = e, r = document.createElement("div");
+  r.className = "tbw-pivot-field-chip tbw-pivot-value-chip";
+  const n = t.getAvailableFields().find((c) => c.field === i.field), a = document.createElement("div");
+  a.className = "tbw-pivot-value-label-wrapper";
+  const s = document.createElement("span");
+  s.className = "tbw-pivot-chip-label", s.textContent = n?.header ?? i.field;
   const l = document.createElement("select");
   l.className = "tbw-pivot-agg-select", l.title = "Aggregation function";
-  for (const c of q) {
+  for (const c of H) {
     const p = document.createElement("option");
     p.value = c, p.textContent = c.toUpperCase(), p.selected = c === i.aggFunc, l.appendChild(p);
   }
@@ -550,21 +638,21 @@ function $(i, e) {
       c.stopPropagation(), t.onRemoveValueField(i.field);
     },
     { signal: o }
-  ), s.appendChild(a), s.appendChild(l), n.appendChild(s), n.appendChild(d), n;
+  ), a.appendChild(s), a.appendChild(l), r.appendChild(a), r.appendChild(d), r;
 }
 function j(i) {
-  const { config: e, callbacks: t, signal: o } = i, n = document.createElement("div");
-  n.className = "tbw-pivot-available-fields";
-  const r = t.getAvailableFields(), s = /* @__PURE__ */ new Set([
+  const { config: e, callbacks: t, signal: o } = i, r = document.createElement("div");
+  r.className = "tbw-pivot-available-fields";
+  const n = t.getAvailableFields(), a = /* @__PURE__ */ new Set([
     ...e.rowGroupFields ?? [],
     ...e.columnGroupFields ?? [],
     ...e.valueFields?.map((l) => l.field) ?? []
-  ]), a = r.filter((l) => !s.has(l.field));
-  if (a.length === 0) {
+  ]), s = n.filter((l) => !a.has(l.field));
+  if (s.length === 0) {
     const l = document.createElement("div");
-    l.className = "tbw-pivot-placeholder", l.textContent = "All fields are in use", n.appendChild(l);
+    l.className = "tbw-pivot-placeholder", l.textContent = "All fields are in use", r.appendChild(l);
   } else
-    for (const l of a) {
+    for (const l of s) {
       const d = document.createElement("div");
       d.className = "tbw-pivot-field-chip available", d.textContent = l.header, d.draggable = !0, d.title = `Drag to add "${l.field}" to a zone`, d.addEventListener(
         "dragstart",
@@ -578,102 +666,102 @@ function j(i) {
           d.classList.remove("dragging");
         },
         { signal: o }
-      ), n.appendChild(d);
+      ), r.appendChild(d);
     }
-  return n;
+  return r;
 }
-function U(i, e) {
-  const { config: t, callbacks: o, signal: n } = e, r = document.createElement("div");
-  return r.className = "tbw-pivot-options", r.appendChild(
-    x(
+function W(i, e) {
+  const { config: t, callbacks: o, signal: r } = e, n = document.createElement("div");
+  return n.className = "tbw-pivot-options", n.appendChild(
+    w(
       "Enable Pivot View",
       i,
-      (s) => {
-        o.onTogglePivot(s);
+      (a) => {
+        o.onTogglePivot(a);
       },
-      n
+      r
     )
-  ), r.appendChild(
-    x(
+  ), n.appendChild(
+    w(
       "Show Row Totals",
       t.showTotals ?? !0,
-      (s) => {
-        o.onOptionChange("showTotals", s);
+      (a) => {
+        o.onOptionChange("showTotals", a);
       },
-      n
+      r
     )
-  ), r.appendChild(
-    x(
+  ), n.appendChild(
+    w(
       "Show Grand Total",
       t.showGrandTotal ?? !0,
-      (s) => {
-        o.onOptionChange("showGrandTotal", s);
+      (a) => {
+        o.onOptionChange("showGrandTotal", a);
       },
-      n
+      r
     )
-  ), r;
+  ), n;
 }
-function x(i, e, t, o) {
-  const n = document.createElement("label");
-  n.className = "tbw-pivot-checkbox";
-  const r = document.createElement("input");
-  r.type = "checkbox", r.checked = e, r.addEventListener("change", () => t(r.checked), { signal: o });
-  const s = document.createElement("span");
-  return s.textContent = i, n.appendChild(r), n.appendChild(s), n;
+function w(i, e, t, o) {
+  const r = document.createElement("label");
+  r.className = "tbw-pivot-checkbox";
+  const n = document.createElement("input");
+  n.type = "checkbox", n.checked = e, n.addEventListener("change", () => t(n.checked), { signal: o });
+  const a = document.createElement("span");
+  return a.textContent = i, r.appendChild(n), r.appendChild(a), r;
 }
-function B(i, e, t) {
-  return e.className = "pivot-group-row", e.setAttribute("data-pivot-depth", String(i.__pivotDepth ?? 0)), e.setAttribute("data-pivot-key", String(i.__pivotRowKey ?? "")), e.setAttribute("role", "row"), e.innerHTML = "", t.columns.forEach((o, n) => {
-    const r = document.createElement("div");
-    if (r.className = "cell", r.setAttribute("data-col", String(n)), r.setAttribute("role", "gridcell"), n === 0) {
-      const s = Number(i.__pivotIndent) || 0;
-      r.style.paddingLeft = `${s}px`;
-      const a = String(i.__pivotRowKey), l = document.createElement("button");
+function U(i, e, t) {
+  return e.className = "data-grid-row pivot-group-row", e.setAttribute("data-pivot-depth", String(i.__pivotDepth ?? 0)), e.setAttribute("data-pivot-key", String(i.__pivotRowKey ?? "")), e.setAttribute("role", "row"), e.innerHTML = "", t.columns.forEach((o, r) => {
+    const n = document.createElement("div");
+    if (n.className = "cell", n.setAttribute("data-col", String(r)), n.setAttribute("data-row", String(t.rowIndex)), n.setAttribute("role", "gridcell"), r === 0) {
+      const a = Number(i.__pivotIndent) || 0;
+      n.style.paddingLeft = `${a}px`;
+      const s = String(i.__pivotRowKey), l = document.createElement("button");
       l.type = "button", l.className = "pivot-toggle", l.setAttribute("aria-label", i.__pivotExpanded ? "Collapse group" : "Expand group"), t.setIcon(l, t.resolveIcon(i.__pivotExpanded ? "collapse" : "expand")), l.addEventListener("click", (p) => {
-        p.stopPropagation(), t.onToggle(a);
-      }), r.appendChild(l);
+        p.stopPropagation(), t.onToggle(s);
+      }), n.appendChild(l);
       const d = document.createElement("span");
-      d.className = "pivot-label", d.textContent = String(i.__pivotLabel ?? ""), r.appendChild(d);
+      d.className = "pivot-label", d.textContent = String(i.__pivotLabel ?? ""), n.appendChild(d);
       const c = document.createElement("span");
-      c.className = "pivot-count", c.textContent = ` (${Number(i.__pivotRowCount) || 0})`, r.appendChild(c);
+      c.className = "pivot-count", c.textContent = ` (${Number(i.__pivotRowCount) || 0})`, n.appendChild(c);
     } else {
-      const s = i[o.field];
-      r.textContent = s != null ? String(s) : "";
+      const a = i[o.field];
+      n.textContent = a != null ? String(a) : "";
     }
-    e.appendChild(r);
+    e.appendChild(n);
   }), !0;
 }
-function W(i, e, t) {
-  return e.className = "pivot-leaf-row", e.setAttribute("data-pivot-depth", String(i.__pivotDepth ?? 0)), e.setAttribute("data-pivot-key", String(i.__pivotRowKey ?? "")), e.innerHTML = "", t.forEach((o, n) => {
-    const r = document.createElement("div");
-    if (r.className = "cell", r.setAttribute("data-col", String(n)), r.setAttribute("role", "gridcell"), n === 0) {
+function B(i, e, t, o) {
+  return e.className = "data-grid-row pivot-leaf-row", e.setAttribute("data-pivot-depth", String(i.__pivotDepth ?? 0)), e.setAttribute("data-pivot-key", String(i.__pivotRowKey ?? "")), e.innerHTML = "", t.forEach((r, n) => {
+    const a = document.createElement("div");
+    if (a.className = "cell", a.setAttribute("data-col", String(n)), a.setAttribute("data-row", String(o)), a.setAttribute("role", "gridcell"), n === 0) {
       const s = Number(i.__pivotIndent) || 0;
-      r.style.paddingLeft = `${s + 20}px`;
-      const a = document.createElement("span");
-      a.className = "pivot-label", a.textContent = String(i.__pivotLabel ?? ""), r.appendChild(a);
+      a.style.paddingLeft = `${s + 20}px`;
+      const l = document.createElement("span");
+      l.className = "pivot-label", l.textContent = String(i.__pivotLabel ?? ""), a.appendChild(l);
     } else {
-      const s = i[o.field];
-      r.textContent = s != null ? String(s) : "";
+      const s = i[r.field];
+      a.textContent = s != null ? String(s) : "";
     }
-    e.appendChild(r);
+    e.appendChild(a);
   }), !0;
 }
 function J(i, e, t) {
-  return e.className = "pivot-grand-total-row", e.setAttribute("role", "presentation"), e.innerHTML = "", t.forEach((o, n) => {
-    const r = document.createElement("div");
-    if (r.className = "cell", r.setAttribute("data-col", String(n)), n === 0) {
-      const s = document.createElement("span");
-      s.className = "pivot-label", s.textContent = "Grand Total", r.appendChild(s);
+  return e.className = "pivot-grand-total-row", e.setAttribute("role", "presentation"), e.innerHTML = "", t.forEach((o, r) => {
+    const n = document.createElement("div");
+    if (n.className = "cell", n.setAttribute("data-col", String(r)), r === 0) {
+      const a = document.createElement("span");
+      a.className = "pivot-label", a.textContent = "Grand Total", n.appendChild(a);
     } else {
-      const s = i[o.field];
-      r.textContent = s != null ? String(s) : "";
+      const a = i[o.field];
+      n.textContent = a != null ? String(a) : "";
     }
-    e.appendChild(r);
+    e.appendChild(n);
   }), !0;
 }
-const Q = '.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 b extends P {
+const Q = '@layer tbw-plugins{.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:var(--tbw-panel-padding, var(--tbw-spacing-lg, .75rem));padding:var(--tbw-panel-padding, var(--tbw-spacing-lg, .75rem));height:100%;overflow-y:auto;font-size:var(--tbw-font-size-sm, .8125rem)}.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:var(--tbw-button-padding, var(--tbw-spacing-md, .5rem) var(--tbw-spacing-lg, .75rem));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:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem))}.tbw-pivot-toggle-wrapper{display:flex;align-items:center}.tbw-pivot-toggle-label{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));cursor:pointer}.tbw-pivot-toggle-label input{width:var(--tbw-icon-size, 1rem);height:var(--tbw-icon-size, 1rem);cursor:pointer}.tbw-pivot-drop-zone{min-height:60px;padding:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));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:var(--tbw-spacing-sm, .375rem);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:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));text-align:center;width:100%}.tbw-pivot-field-chip{display:inline-flex;align-items:center;gap:var(--tbw-spacing-sm, .375rem);padding:var(--tbw-button-padding-sm, var(--tbw-spacing-xs, .25rem) var(--tbw-spacing-md, .5rem));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:var(--tbw-font-size-xs, .75rem);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:var(--tbw-icon-size, 1rem);height:var(--tbw-icon-size, 1rem);padding:0;border:none;background:transparent;color:var(--tbw-color-fg-muted);font-size:var(--tbw-font-size-sm, .875rem);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:var(--tbw-button-padding-sm, var(--tbw-spacing-xs, .25rem) var(--tbw-spacing-md, .5rem))}.tbw-pivot-value-label-wrapper{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));flex:1;min-width:0}.tbw-pivot-agg-select{padding:var(--tbw-spacing-xs, .125rem) var(--tbw-spacing-xs, .25rem);font-size:var(--tbw-font-size-xs, .6875rem);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:var(--tbw-spacing-sm, .375rem);min-height:40px}.tbw-pivot-options{display:flex;flex-direction:column;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem))}.tbw-pivot-checkbox{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));cursor:pointer}.tbw-pivot-checkbox input{width:var(--tbw-icon-size-sm, .875rem);height:var(--tbw-icon-size-sm, .875rem);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 v extends P {
   name = "pivot";
-  version = "1.0.0";
+  styles = Q;
   /** Tool panel ID for shell integration */
   static PANEL_ID = "pivot";
   get defaultConfig() {
@@ -704,17 +792,11 @@ class b extends P {
     return (this.config.valueFields?.length ?? 0) > 0;
   }
   /**
-   * Get animation style respecting grid-level animation mode.
+   * Get expand/collapse animation style from plugin config.
+   * Uses base class isAnimationEnabled to respect grid-level settings.
    */
   get animationStyle() {
-    const t = this.grid.effectiveConfig?.animation?.mode ?? "reduced-motion";
-    if (t === !1 || t === "off") return !1;
-    if (t !== !0 && t !== "on") {
-      const o = this.shadowRoot?.host;
-      if (o && getComputedStyle(o).getPropertyValue("--tbw-animation-enabled").trim() === "0")
-        return !1;
-    }
-    return this.config.animation ?? "slide";
+    return this.isAnimationEnabled ? this.config.animation ?? "slide" : !1;
   }
   // #endregion
   // #region Lifecycle
@@ -726,7 +808,7 @@ class b extends P {
   getToolPanel() {
     if ((this.config?.showToolPanel ?? this.userConfig?.showToolPanel ?? !0) !== !1)
       return {
-        id: b.PANEL_ID,
+        id: v.PANEL_ID,
         title: "Pivot",
         icon: "⊞",
         tooltip: "Configure pivot table",
@@ -742,55 +824,46 @@ class b extends P {
     const t = S(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 s = w(this.pivotResult.rows);
-      for (const a of s)
-        this.expandedKeys.add(a);
-    }
-    if (this.pivotResult = I(e, this.config), this.expandedKeys.size === 0 && this.defaultExpanded) {
-      const s = w(this.pivotResult.rows);
-      for (const a of s)
-        this.expandedKeys.add(a);
-    }
-    const o = this.config.indentWidth ?? 20, n = H(
+    this.buildFieldHeaderMap(), this.defaultExpanded = this.config.defaultExpanded ?? !0, this.expandedKeys.size === 0 && this.defaultExpanded && this.pivotResult && this.expandAllKeys(), this.pivotResult = K(e, this.config), this.expandedKeys.size === 0 && this.defaultExpanded && this.expandAllKeys();
+    const o = this.config.indentWidth ?? 20, r = D(
       this.pivotResult.rows,
       this.expandedKeys,
       this.defaultExpanded
-    ).map((s) => ({
-      __pivotRowKey: s.rowKey,
-      __pivotLabel: s.rowLabel,
-      __pivotDepth: s.depth,
-      __pivotIsGroup: s.isGroup,
-      __pivotHasChildren: !!s.children?.length,
-      __pivotExpanded: this.expandedKeys.has(s.rowKey),
-      __pivotRowCount: s.rowCount ?? 0,
-      __pivotIndent: s.depth * o,
-      __pivotTotal: s.total,
-      ...s.values
+    ).map((a) => ({
+      __pivotRowKey: a.rowKey,
+      __pivotLabel: a.rowLabel,
+      __pivotDepth: a.depth,
+      __pivotIsGroup: a.isGroup,
+      __pivotHasChildren: !!a.children?.length,
+      __pivotExpanded: this.expandedKeys.has(a.rowKey),
+      __pivotRowCount: a.rowCount ?? 0,
+      __pivotIndent: a.depth * o,
+      __pivotTotal: a.total,
+      ...a.values
     }));
     this.keysToAnimate.clear();
-    const r = /* @__PURE__ */ new Set();
-    for (const s of n) {
-      const a = s.__pivotRowKey;
-      r.add(a), !this.previousVisibleKeys.has(a) && s.__pivotDepth > 0 && this.keysToAnimate.add(a);
+    const n = /* @__PURE__ */ new Set();
+    for (const a of r) {
+      const s = a.__pivotRowKey;
+      n.add(s), !this.previousVisibleKeys.has(s) && a.__pivotDepth > 0 && this.keysToAnimate.add(s);
     }
-    return this.previousVisibleKeys = r, n;
+    return this.previousVisibleKeys = n, r;
   }
   processColumns(e) {
     if (!this.isActive || !this.pivotResult)
       return [...e];
-    const t = [], o = (this.config.rowGroupFields ?? []).map((n) => this.fieldHeaderMap.get(n) ?? n).join(" / ");
+    const t = [], o = (this.config.rowGroupFields ?? []).map((r) => this.fieldHeaderMap.get(r) ?? r).join(" / ");
     t.push({
       field: "__pivotLabel",
       header: o || "Group",
       width: 200
     });
-    for (const n of this.pivotResult.columnKeys)
-      for (const r of this.config.valueFields ?? []) {
-        const s = C([n], r.field), a = r.header || this.fieldHeaderMap.get(r.field) || r.field;
+    for (const r of this.pivotResult.columnKeys)
+      for (const n of this.config.valueFields ?? []) {
+        const a = C([r], n.field), s = n.header || this.fieldHeaderMap.get(n.field) || n.field;
         t.push({
-          field: s,
-          header: `${n} - ${a} (${r.aggFunc})`,
+          field: a,
+          header: `${r} - ${s} (${n.aggFunc})`,
           width: 120,
           type: "number"
         });
@@ -802,14 +875,15 @@ class b extends P {
       type: "number"
     }), t;
   }
-  renderRow(e, t) {
-    const o = e;
-    return o.__pivotRowKey && o.__pivotHasChildren ? B(o, t, {
+  renderRow(e, t, o) {
+    const r = e;
+    return r.__pivotRowKey && r.__pivotHasChildren ? U(r, t, {
       columns: this.gridColumns,
+      rowIndex: o,
       onToggle: (n) => this.toggle(n),
       resolveIcon: (n) => this.resolveIcon(n),
-      setIcon: (n, r) => this.setIcon(n, r)
-    }) : o.__pivotRowKey !== void 0 && this.isActive ? W(o, t, this.gridColumns) : (this.cleanupPivotStyling(t), !1);
+      setIcon: (n, a) => this.setIcon(n, a)
+    }) : r.__pivotRowKey !== void 0 && this.isActive ? B(r, t, this.gridColumns, o) : (this.cleanupPivotStyling(t), !1);
   }
   /**
    * Remove pivot-specific classes, attributes, and inline styles from a row element.
@@ -819,16 +893,22 @@ class b extends P {
   cleanupPivotStyling(e) {
     (e.classList.contains("pivot-group-row") || e.classList.contains("pivot-leaf-row") || e.classList.contains("pivot-grand-total-row")) && (e.classList.remove("pivot-group-row", "pivot-leaf-row", "pivot-grand-total-row"), e.classList.add("data-grid-row"), e.removeAttribute("data-pivot-depth"), e.innerHTML = "");
   }
+  onKeyDown(e) {
+    if (e.key !== " " || !this.isActive) return;
+    const t = this.grid._focusRow, o = this.rows[t];
+    if (!(!o?.__pivotIsGroup || !o.__pivotHasChildren))
+      return e.preventDefault(), this.toggle(o.__pivotRowKey), this.requestRenderWithFocus(), !0;
+  }
   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");
+    const t = this.gridElement?.querySelector(".rows");
     if (!t) return;
     const o = e === "fade" ? "tbw-pivot-fade-in" : "tbw-pivot-slide-in";
-    for (const n of t.querySelectorAll(".pivot-group-row, .pivot-leaf-row")) {
-      const r = n.dataset.pivotKey;
-      r && this.keysToAnimate.has(r) && (n.classList.add(o), n.addEventListener("animationend", () => n.classList.remove(o), { once: !0 }));
+    for (const r of t.querySelectorAll(".pivot-group-row, .pivot-leaf-row")) {
+      const n = r.dataset.pivotKey;
+      n && this.keysToAnimate.has(n) && (r.classList.add(o), r.addEventListener("animationend", () => r.classList.remove(o), { once: !0 }));
     }
     this.keysToAnimate.clear();
   }
@@ -837,7 +917,7 @@ class b extends P {
    */
   renderGrandTotalFooter() {
     if (!this.pivotResult) return;
-    const e = this.shadowRoot;
+    const e = this.gridElement;
     if (!e) return;
     const t = e.querySelector(".tbw-scroll-area") ?? e.querySelector(".tbw-grid-content") ?? e.children[0];
     if (!t) return;
@@ -869,16 +949,20 @@ class b extends P {
     this.expandedKeys.delete(e), this.requestRender();
   }
   expandAll() {
-    if (this.pivotResult) {
-      const e = w(this.pivotResult.rows);
-      for (const t of e)
-        this.expandedKeys.add(t);
-      this.requestRender();
-    }
+    this.expandAllKeys(), this.requestRender();
   }
   collapseAll() {
     this.expandedKeys.clear(), this.requestRender();
   }
+  /**
+   * Add all group keys from the current pivot result to expandedKeys.
+   */
+  expandAllKeys() {
+    if (!this.pivotResult) return;
+    const e = q(this.pivotResult.rows);
+    for (const t of e)
+      this.expandedKeys.add(t);
+  }
   isExpanded(e) {
     return this.expandedKeys.has(e);
   }
@@ -910,23 +994,42 @@ class b extends P {
   }
   // #endregion
   // #region Tool Panel API
+  /**
+   * Show the pivot tool panel.
+   * Opens the tool panel and ensures this section is expanded.
+   */
   showPanel() {
-    this.grid.openToolPanel(b.PANEL_ID);
+    this.grid.openToolPanel(), this.grid.expandedToolPanelSections.includes(v.PANEL_ID) || this.grid.toggleToolPanelSection(v.PANEL_ID);
   }
+  /**
+   * Hide the tool panel.
+   */
   hidePanel() {
     this.grid.closeToolPanel();
   }
+  /**
+   * Toggle the pivot tool panel section.
+   */
   togglePanel() {
-    this.grid.toggleToolPanel(b.PANEL_ID);
+    this.grid.isToolPanelOpen || this.grid.openToolPanel(), this.grid.toggleToolPanelSection(v.PANEL_ID);
   }
+  /**
+   * Check if the pivot panel section is currently expanded.
+   */
   isPanelVisible() {
-    return this.grid.activeToolPanel === b.PANEL_ID;
+    return this.grid.isToolPanelOpen && this.grid.expandedToolPanelSections.includes(v.PANEL_ID);
   }
   // #endregion
   // #region Private Helpers
   get gridColumns() {
     return this.grid.columns ?? [];
   }
+  /**
+   * Refresh pivot and update tool panel if active.
+   */
+  refreshIfActive() {
+    this.isActive && this.refresh(), this.refreshPanel();
+  }
   buildFieldHeaderMap() {
     const e = this.getAvailableFields();
     this.fieldHeaderMap.clear();
@@ -937,12 +1040,11 @@ class b extends P {
     return this.originalColumns.length > 0 ? this.originalColumns : this.captureOriginalColumns();
   }
   captureOriginalColumns() {
-    const e = this.grid;
     try {
-      const t = e.getAllColumns?.() ?? e.columns ?? [];
-      return this.originalColumns = t.filter((o) => !o.field.startsWith("__pivot")).map((o) => ({
-        field: o.field,
-        header: o.header ?? o.field
+      const e = this.grid.getAllColumns?.() ?? this.grid.columns ?? [];
+      return this.originalColumns = e.filter((t) => !t.field.startsWith("__pivot")).map((t) => ({
+        field: t.field,
+        header: t.header ?? t.field
       })), this.originalColumns;
     } catch {
       return [];
@@ -954,17 +1056,17 @@ class b extends P {
       onTogglePivot: (o) => {
         o ? this.enablePivot() : this.disablePivot(), this.refreshPanel();
       },
-      onAddFieldToZone: (o, n) => this.addFieldToZone(o, n),
-      onRemoveFieldFromZone: (o, n) => this.removeFieldFromZone(o, n),
-      onAddValueField: (o, n) => this.addValueField(o, n),
+      onAddFieldToZone: (o, r) => this.addFieldToZone(o, r),
+      onRemoveFieldFromZone: (o, r) => this.removeFieldFromZone(o, r),
+      onAddValueField: (o, r) => this.addValueField(o, r),
       onRemoveValueField: (o) => this.removeValueField(o),
-      onUpdateValueAggFunc: (o, n) => this.updateValueAggFunc(o, n),
-      onOptionChange: (o, n) => {
-        this.config[o] = n, this.isActive && this.refresh();
+      onUpdateValueAggFunc: (o, r) => this.updateValueAggFunc(o, r),
+      onOptionChange: (o, r) => {
+        this.config[o] = r, this.isActive && this.refresh();
       },
       getAvailableFields: () => this.getAvailableFields()
     };
-    return z(e, this.config, this.isActive, t);
+    return M(e, this.config, this.isActive, t);
   }
   refreshPanel() {
     this.panelContainer && (this.panelContainer.innerHTML = "", this.renderPanel(this.panelContainer));
@@ -977,31 +1079,28 @@ class b extends P {
       const o = this.config.columnGroupFields ?? [];
       o.includes(e) || (this.config.columnGroupFields = [...o, e]);
     }
-    this.removeFromOtherZones(e, t), this.isActive && this.refresh(), this.refreshPanel();
+    this.removeFromOtherZones(e, t), this.refreshIfActive();
   }
   removeFieldFromZone(e, t) {
-    t === "rowGroups" ? this.config.rowGroupFields = (this.config.rowGroupFields ?? []).filter((o) => o !== e) : this.config.columnGroupFields = (this.config.columnGroupFields ?? []).filter((o) => o !== e), this.isActive && this.refresh(), this.refreshPanel();
+    t === "rowGroups" ? this.config.rowGroupFields = (this.config.rowGroupFields ?? []).filter((o) => o !== e) : this.config.columnGroupFields = (this.config.columnGroupFields ?? []).filter((o) => o !== e), this.refreshIfActive();
   }
   removeFromOtherZones(e, t) {
     t !== "rowGroups" && (this.config.rowGroupFields = (this.config.rowGroupFields ?? []).filter((o) => o !== e)), t !== "columnGroups" && (this.config.columnGroupFields = (this.config.columnGroupFields ?? []).filter((o) => o !== e)), t !== "values" && (this.config.valueFields = (this.config.valueFields ?? []).filter((o) => o.field !== e));
   }
   addValueField(e, t) {
     const o = this.config.valueFields ?? [];
-    o.some((n) => n.field === e) || (this.config.valueFields = [...o, { field: e, aggFunc: t }]), this.removeFromOtherZones(e, "values"), this.isActive && this.refresh(), this.refreshPanel();
+    o.some((r) => r.field === e) || (this.config.valueFields = [...o, { field: e, aggFunc: t }]), this.removeFromOtherZones(e, "values"), this.refreshIfActive();
   }
   removeValueField(e) {
-    this.config.valueFields = (this.config.valueFields ?? []).filter((t) => t.field !== e), this.isActive && this.refresh(), this.refreshPanel();
+    this.config.valueFields = (this.config.valueFields ?? []).filter((t) => t.field !== e), this.refreshIfActive();
   }
   updateValueAggFunc(e, t) {
-    const o = this.config.valueFields ?? [], n = o.findIndex((r) => r.field === e);
-    n >= 0 && (o[n] = { ...o[n], aggFunc: t }, this.config.valueFields = [...o]), this.isActive && this.refresh();
+    const o = this.config.valueFields ?? [], r = o.findIndex((n) => n.field === e);
+    r >= 0 && (o[r] = { ...o[r], aggFunc: t }, this.config.valueFields = [...o]), this.isActive && this.refresh();
   }
   // #endregion
-  // #region Styles
-  styles = Q;
-  // #endregion
 }
 export {
-  b as PivotPlugin
+  v as PivotPlugin
 };
 //# sourceMappingURL=index.js.map