@toolbox-web/grid 0.0.7 → 0.1.0

package/lib/plugins/pivot/index.js

@@ -1,13 +1,14 @@
-const b = {
+const P = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
   sortDesc: "▼",
   sortNone: "⇅",
   submenuArrow: "▶",
-  dragHandle: "⋮⋮"
+  dragHandle: "⋮⋮",
+  toolPanel: "☰"
 };
-class m {
+class N {
   /** Plugin version - override in subclass if needed */
   version = "1.0.0";
   /** CSS styles to inject into the grid's shadow DOM */
@@ -58,8 +59,8 @@ class m {
   /**
    * Emit a custom event from the grid.
    */
-  emit(e, t) {
-    this.grid?.dispatchEvent?.(new CustomEvent(e, { detail: t, bubbles: !0 }));
+  emit(e, i) {
+    this.grid?.dispatchEvent?.(new CustomEvent(e, { detail: i, bubbles: !0 }));
   }
   /**
    * Request a re-render of the grid.
@@ -132,7 +133,7 @@ class m {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...b, ...e };
+    return { ...P, ...e };
   }
   /**
    * Resolve an icon value to string or HTMLElement.
@@ -142,8 +143,8 @@ class m {
    * @param pluginOverride - Optional plugin-level override
    * @returns The resolved icon value
    */
-  resolveIcon(e, t) {
-    return t !== void 0 ? t : this.gridIcons[e];
+  resolveIcon(e, i) {
+    return i !== void 0 ? i : this.gridIcons[e];
   }
   /**
    * Set an icon value on an element.
@@ -152,8 +153,8 @@ class m {
    * @param element - The element to set the icon on
    * @param icon - The icon value (string or HTMLElement)
    */
-  setIcon(e, t) {
-    typeof t == "string" ? e.innerHTML = t : t instanceof HTMLElement && (e.innerHTML = "", e.appendChild(t.cloneNode(!0)));
+  setIcon(e, i) {
+    typeof i == "string" ? e.innerHTML = i : i instanceof HTMLElement && (e.innerHTML = "", e.appendChild(i.cloneNode(!0)));
   }
   /**
    * Log a warning message.
@@ -162,223 +163,750 @@ class m {
     console.warn(`[tbw-grid:${this.name}] ${e}`);
   }
 }
-function y(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;
+const m = {
+  sum: (t, e) => t.reduce((i, o) => i + (Number(o[e]) || 0), 0),
+  avg: (t, e) => {
+    const i = t.reduce((o, n) => o + (Number(n[e]) || 0), 0);
+    return t.length ? i / t.length : 0;
+  },
+  count: (t) => t.length,
+  min: (t, e) => Math.min(...t.map((i) => Number(i[e]) || 1 / 0)),
+  max: (t, e) => Math.max(...t.map((i) => Number(i[e]) || -1 / 0)),
+  first: (t, e) => t[0]?.[e],
+  last: (t, e) => t[t.length - 1]?.[e]
+}, v = /* @__PURE__ */ new Map(), h = {
+  /**
+   * Register a custom aggregator function.
+   */
+  register(t, e) {
+    v.set(t, e);
+  },
+  /**
+   * Unregister a custom aggregator function.
+   */
+  unregister(t) {
+    v.delete(t);
+  },
+  /**
+   * Get an aggregator function by reference.
+   */
+  get(t) {
+    if (t !== void 0)
+      return typeof t == "function" ? t : v.get(t) ?? m[t];
+  },
+  /**
+   * Run an aggregator on a set of rows.
+   */
+  run(t, e, i, o) {
+    const n = this.get(t);
+    return n ? n(e, i, o) : void 0;
+  },
+  /**
+   * Check if an aggregator exists.
+   */
+  has(t) {
+    return v.has(t) || t in m;
+  },
+  /**
+   * List all available aggregator names.
+   */
+  list() {
+    return [...Object.keys(m), ...v.keys()];
+  }
+}, A = {
+  sum: (t) => t.reduce((e, i) => e + i, 0),
+  avg: (t) => t.length ? t.reduce((e, i) => e + i, 0) / t.length : 0,
+  count: (t) => t.length,
+  min: (t) => t.length ? Math.min(...t) : 0,
+  max: (t) => t.length ? Math.max(...t) : 0,
+  first: (t) => t[0] ?? 0,
+  last: (t) => t[t.length - 1] ?? 0
+};
+function k(t) {
+  return A[t] ?? A.sum;
 }
-function F(s) {
-  switch (s) {
-    case "sum":
-      return (e) => e.reduce((t, o) => t + o, 0);
-    case "avg":
-      return (e) => e.length ? e.reduce((t, o) => t + o, 0) / e.length : 0;
-    case "count":
-      return (e) => e.length;
-    case "min":
-      return (e) => e.length ? Math.min(...e) : 0;
-    case "max":
-      return (e) => e.length ? Math.max(...e) : 0;
-    case "first":
-      return (e) => e[0] ?? 0;
-    case "last":
-      return (e) => e[e.length - 1] ?? 0;
-    default:
-      return (e) => e.reduce((t, o) => t + o, 0);
-  }
+h.register.bind(h);
+h.unregister.bind(h);
+h.get.bind(h);
+h.run.bind(h);
+h.list.bind(h);
+const K = k;
+function I(t) {
+  const e = [];
+  return !t.rowGroupFields?.length && !t.columnGroupFields?.length && e.push("At least one row or column group field is required"), t.valueFields?.length || e.push("At least one value field is required"), e;
 }
-function f(s, e) {
-  return [...s, e].join("|");
+function C(t, e) {
+  return [...t, e].join("|");
 }
-function C(s, e) {
-  const t = e.rowGroupFields ?? [], o = e.columnGroupFields ?? [], r = e.valueFields ?? [], i = G(s, o), n = A(s, t), u = _(n, o, i, r, 0), l = P(u, i, r), a = Object.values(l).reduce((d, c) => d + c, 0);
+function S(t, e) {
+  const i = e.rowGroupFields ?? [], o = e.columnGroupFields ?? [], n = e.valueFields ?? [], r = V(t, o), a = L(
+    t,
+    i,
+    o,
+    r,
+    n,
+    0,
+    // starting depth
+    ""
+    // parent key prefix
+  ), s = H(a, r, n), l = Object.values(s).reduce((d, c) => d + c, 0);
   return {
-    rows: u,
-    columnKeys: i,
-    totals: l,
-    grandTotal: a
+    rows: a,
+    columnKeys: r,
+    totals: s,
+    grandTotal: l
   };
 }
-function G(s, e) {
+function V(t, e) {
   if (e.length === 0) return ["value"];
-  const t = /* @__PURE__ */ new Set();
-  for (const o of s) {
-    const r = e.map((i) => String(o[i] ?? "")).join("|");
-    t.add(r);
+  const i = /* @__PURE__ */ new Set();
+  for (const o of t) {
+    const n = e.map((r) => String(o[r] ?? "")).join("|");
+    i.add(n);
   }
-  return [...t].sort();
+  return [...i].sort();
 }
-function A(s, e) {
-  const t = /* @__PURE__ */ new Map();
-  for (const o of s) {
-    const r = e.map((n) => String(o[n] ?? "")).join("|");
-    t.has(r) || t.set(r, []);
-    const i = t.get(r);
-    i && i.push(o);
-  }
-  return t;
+function M(t, e) {
+  const i = /* @__PURE__ */ new Map();
+  for (const o of t) {
+    const n = String(o[e] ?? ""), r = i.get(n);
+    r ? r.push(o) : i.set(n, [o]);
+  }
+  return i;
 }
-function _(s, e, t, o, r) {
-  const i = [];
-  for (const [n, u] of s) {
-    const l = {};
-    let a = 0;
-    for (const d of t)
-      for (const c of o) {
-        const p = (e.length > 0 ? u.filter((g) => e.map((R) => String(g[R] ?? "")).join("|") === d) : u).map((g) => Number(g[c.field]) || 0), v = F(c.aggFunc), h = p.length > 0 ? v(p) : null, w = f([d], c.field);
-        l[w] = h, h !== null && (a += h);
-      }
-    i.push({
-      rowKey: n,
-      rowLabel: n || "(blank)",
+function L(t, e, i, o, n, r, a) {
+  const s = [];
+  if (e.length === 0) {
+    const u = _(t, i, o, n), g = G(u);
+    return s.push({
+      rowKey: a || "all",
+      rowLabel: a || "All",
+      depth: r,
+      values: u,
+      total: g,
+      isGroup: !1,
+      rowCount: t.length
+    }), s;
+  }
+  const l = e[0], d = e.slice(1), c = d.length > 0, p = M(t, l);
+  for (const [u, g] of p) {
+    const F = a ? `${a}|${u}` : u, y = _(g, i, o, n), E = G(y);
+    let R;
+    c && (R = L(
+      g,
+      d,
+      i,
+      o,
+      n,
+      r + 1,
+      F
+    )), s.push({
+      rowKey: F,
+      rowLabel: u || "(blank)",
       depth: r,
-      values: l,
-      total: a,
-      isGroup: !1
+      values: y,
+      total: E,
+      isGroup: c,
+      children: R,
+      rowCount: g.length
     });
   }
-  return i;
+  return s;
 }
-function P(s, e, t) {
-  const o = {};
-  for (const r of e)
-    for (const i of t) {
-      const n = f([r], i.field);
-      o[n] = s.reduce((u, l) => u + (l.values[n] ?? 0), 0);
+function _(t, e, i, o) {
+  const n = {};
+  for (const r of i)
+    for (const a of o) {
+      const l = (e.length > 0 ? t.filter((u) => e.map((g) => String(u[g] ?? "")).join("|") === r) : t).map((u) => Number(u[a.field]) || 0), d = K(a.aggFunc), c = l.length > 0 ? d(l) : null, p = C([r], a.field);
+      n[p] = c;
     }
+  return n;
+}
+function G(t) {
+  let e = 0;
+  for (const i of Object.values(t))
+    e += i ?? 0;
+  return e;
+}
+function H(t, e, i) {
+  const o = {};
+  function n(r) {
+    for (const a of r)
+      if (!a.isGroup || !a.children?.length)
+        for (const s of e)
+          for (const l of i) {
+            const d = C([s], l.field);
+            o[d] = (o[d] ?? 0) + (a.values[d] ?? 0);
+          }
+      else a.children && n(a.children);
+  }
+  return n(t), o;
+}
+function D(t, e, i = !0) {
+  const o = [];
+  function n(r) {
+    o.push(r);
+    const a = e ? e.has(r.rowKey) : i;
+    if (r.children && a)
+      for (const s of r.children)
+        n(s);
+  }
+  for (const r of t)
+    n(r);
   return o;
 }
-function q(s) {
+function w(t) {
   const e = [];
-  function t(o) {
-    if (e.push(o), o.children)
-      for (const r of o.children)
-        t(r);
+  function i(o) {
+    if (o.isGroup && e.push(o.rowKey), o.children)
+      for (const n of o.children)
+        i(n);
   }
-  for (const o of s)
-    t(o);
+  for (const o of t)
+    i(o);
   return e;
 }
-class T extends m {
+const z = ["sum", "avg", "count", "min", "max", "first", "last"];
+function q(t, e, i, o) {
+  const n = new AbortController(), r = { config: e, callbacks: o, signal: n.signal }, a = document.createElement("div");
+  return a.className = "tbw-pivot-panel", a.appendChild(f("Options", () => U(i, r))), a.appendChild(f("Row Groups", () => T("rowGroups", r))), a.appendChild(f("Column Groups", () => T("columnGroups", r))), a.appendChild(f("Values", () => Z(r))), a.appendChild(f("Available Fields", () => j(r))), t.appendChild(a), () => {
+    n.abort(), a.remove();
+  };
+}
+function f(t, e) {
+  const i = document.createElement("div");
+  i.className = "tbw-pivot-section";
+  const o = document.createElement("div");
+  o.className = "tbw-pivot-section-header", o.textContent = t;
+  const n = document.createElement("div");
+  return n.className = "tbw-pivot-section-content", n.appendChild(e()), i.appendChild(o), i.appendChild(n), i;
+}
+function T(t, e) {
+  const { config: i, callbacks: o, signal: n } = e, r = document.createElement("div");
+  r.className = "tbw-pivot-drop-zone", r.setAttribute("data-zone", t);
+  const a = t === "rowGroups" ? i.rowGroupFields ?? [] : i.columnGroupFields ?? [];
+  if (a.length === 0) {
+    const s = document.createElement("div");
+    s.className = "tbw-pivot-placeholder", s.textContent = "Drag fields here or click to add", r.appendChild(s);
+  } else
+    for (const s of a)
+      r.appendChild(O(s, t, e));
+  return r.addEventListener(
+    "dragover",
+    (s) => {
+      s.preventDefault(), r.classList.add("drag-over");
+    },
+    { signal: n }
+  ), r.addEventListener(
+    "dragleave",
+    () => {
+      r.classList.remove("drag-over");
+    },
+    { signal: n }
+  ), r.addEventListener(
+    "drop",
+    (s) => {
+      s.preventDefault(), r.classList.remove("drag-over");
+      const l = s.dataTransfer?.getData("text/plain");
+      l && o.onAddFieldToZone(l, t);
+    },
+    { signal: n }
+  ), r;
+}
+function O(t, e, i) {
+  const { callbacks: o, signal: n } = i, r = document.createElement("div");
+  r.className = "tbw-pivot-field-chip", r.draggable = !0;
+  const a = o.getAvailableFields().find((d) => d.field === t), s = document.createElement("span");
+  s.className = "tbw-pivot-chip-label", s.textContent = a?.header ?? t;
+  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(t, e);
+    },
+    { signal: n }
+  ), r.appendChild(s), r.appendChild(l), r.addEventListener(
+    "dragstart",
+    (d) => {
+      d.dataTransfer?.setData("text/plain", t), d.dataTransfer?.setData("source-zone", e), r.classList.add("dragging");
+    },
+    { signal: n }
+  ), r.addEventListener(
+    "dragend",
+    () => {
+      r.classList.remove("dragging");
+    },
+    { signal: n }
+  ), r;
+}
+function Z(t) {
+  const { config: e, callbacks: i, signal: o } = t, 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 a = document.createElement("div");
+    a.className = "tbw-pivot-placeholder", a.textContent = "Drag numeric fields here for aggregation", n.appendChild(a);
+  } else
+    for (const a of r)
+      n.appendChild($(a, t));
+  return n.addEventListener(
+    "dragover",
+    (a) => {
+      a.preventDefault(), n.classList.add("drag-over");
+    },
+    { signal: o }
+  ), n.addEventListener(
+    "dragleave",
+    () => {
+      n.classList.remove("drag-over");
+    },
+    { signal: o }
+  ), n.addEventListener(
+    "drop",
+    (a) => {
+      a.preventDefault(), n.classList.remove("drag-over");
+      const s = a.dataTransfer?.getData("text/plain");
+      s && i.onAddValueField(s, "sum");
+    },
+    { signal: o }
+  ), n;
+}
+function $(t, e) {
+  const { callbacks: i, signal: o } = e, n = document.createElement("div");
+  n.className = "tbw-pivot-field-chip tbw-pivot-value-chip";
+  const r = i.getAvailableFields().find((c) => c.field === t.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 = r?.header ?? t.field;
+  const l = document.createElement("select");
+  l.className = "tbw-pivot-agg-select", l.title = "Aggregation function";
+  for (const c of z) {
+    const p = document.createElement("option");
+    p.value = c, p.textContent = c.toUpperCase(), p.selected = c === t.aggFunc, l.appendChild(p);
+  }
+  l.addEventListener(
+    "change",
+    () => {
+      i.onUpdateValueAggFunc(t.field, l.value);
+    },
+    { signal: o }
+  );
+  const d = document.createElement("button");
+  return d.className = "tbw-pivot-chip-remove", d.innerHTML = "×", d.title = "Remove value field", d.addEventListener(
+    "click",
+    (c) => {
+      c.stopPropagation(), i.onRemoveValueField(t.field);
+    },
+    { signal: o }
+  ), a.appendChild(s), a.appendChild(l), n.appendChild(a), n.appendChild(d), n;
+}
+function j(t) {
+  const { config: e, callbacks: i, signal: o } = t, n = document.createElement("div");
+  n.className = "tbw-pivot-available-fields";
+  const r = i.getAvailableFields(), a = /* @__PURE__ */ new Set([
+    ...e.rowGroupFields ?? [],
+    ...e.columnGroupFields ?? [],
+    ...e.valueFields?.map((l) => l.field) ?? []
+  ]), s = r.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);
+  } else
+    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",
+        (c) => {
+          c.dataTransfer?.setData("text/plain", l.field), d.classList.add("dragging");
+        },
+        { signal: o }
+      ), d.addEventListener(
+        "dragend",
+        () => {
+          d.classList.remove("dragging");
+        },
+        { signal: o }
+      ), n.appendChild(d);
+    }
+  return n;
+}
+function U(t, e) {
+  const { config: i, callbacks: o, signal: n } = e, r = document.createElement("div");
+  return r.className = "tbw-pivot-options", r.appendChild(
+    x(
+      "Enable Pivot View",
+      t,
+      (a) => {
+        o.onTogglePivot(a);
+      },
+      n
+    )
+  ), r.appendChild(
+    x(
+      "Show Row Totals",
+      i.showTotals ?? !0,
+      (a) => {
+        o.onOptionChange("showTotals", a);
+      },
+      n
+    )
+  ), r.appendChild(
+    x(
+      "Show Grand Total",
+      i.showGrandTotal ?? !0,
+      (a) => {
+        o.onOptionChange("showGrandTotal", a);
+      },
+      n
+    )
+  ), r;
+}
+function x(t, e, i, 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", () => i(r.checked), { signal: o });
+  const a = document.createElement("span");
+  return a.textContent = t, n.appendChild(r), n.appendChild(a), n;
+}
+function B(t, e, i) {
+  return e.className = "pivot-group-row", e.setAttribute("data-pivot-depth", String(t.__pivotDepth ?? 0)), e.setAttribute("role", "row"), e.setAttribute("aria-expanded", String(t.__pivotExpanded)), e.innerHTML = "", i.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 a = Number(t.__pivotIndent) || 0;
+      r.style.paddingLeft = `${a}px`;
+      const s = String(t.__pivotRowKey), l = document.createElement("button");
+      l.type = "button", l.className = "pivot-toggle", l.setAttribute("aria-label", t.__pivotExpanded ? "Collapse group" : "Expand group"), i.setIcon(l, i.resolveIcon(t.__pivotExpanded ? "collapse" : "expand")), l.addEventListener("click", (p) => {
+        p.stopPropagation(), i.onToggle(s);
+      }), r.appendChild(l);
+      const d = document.createElement("span");
+      d.className = "pivot-label", d.textContent = String(t.__pivotLabel ?? ""), r.appendChild(d);
+      const c = document.createElement("span");
+      c.className = "pivot-count", c.textContent = ` (${Number(t.__pivotRowCount) || 0})`, r.appendChild(c);
+    } else {
+      const a = t[o.field];
+      r.textContent = a != null ? String(a) : "";
+    }
+    e.appendChild(r);
+  }), !0;
+}
+function W(t, e, i) {
+  return e.className = "pivot-leaf-row", e.setAttribute("data-pivot-depth", String(t.__pivotDepth ?? 0)), e.innerHTML = "", i.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 a = Number(t.__pivotIndent) || 0;
+      r.style.paddingLeft = `${a + 20}px`;
+      const s = document.createElement("span");
+      s.className = "pivot-label", s.textContent = String(t.__pivotLabel ?? ""), r.appendChild(s);
+    } else {
+      const a = t[o.field];
+      r.textContent = a != null ? String(a) : "";
+    }
+    e.appendChild(r);
+  }), !0;
+}
+function J(t, e, i) {
+  return e.className = "pivot-grand-total-row", e.setAttribute("role", "row"), e.innerHTML = "", i.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 a = document.createElement("span");
+      a.className = "pivot-label", a.textContent = "Grand Total", r.appendChild(a);
+    } else {
+      const a = t[o.field];
+      r.textContent = a != null ? String(a) : "";
+    }
+    e.appendChild(r);
+  }), !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;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 b extends N {
   name = "pivot";
   version = "1.0.0";
+  /** Tool panel ID for shell integration */
+  static PANEL_ID = "pivot";
   get defaultConfig() {
     return {
-      enabled: !0,
+      active: !0,
       showTotals: !0,
       showGrandTotal: !0
     };
   }
   // ===== Internal State =====
   isActive = !1;
+  hasInitialized = !1;
   pivotResult = null;
-  columnHeaders = [];
-  rowHeaders = [];
+  fieldHeaderMap = /* @__PURE__ */ new Map();
+  expandedKeys = /* @__PURE__ */ new Set();
+  defaultExpanded = !0;
+  originalColumns = [];
+  panelContainer = null;
+  grandTotalFooter = null;
+  /**
+   * Check if the plugin has valid pivot configuration (at least value fields).
+   */
+  hasValidPivotConfig() {
+    return (this.config.valueFields?.length ?? 0) > 0;
+  }
   // ===== Lifecycle =====
   detach() {
-    this.isActive = !1, this.pivotResult = null, this.columnHeaders = [], this.rowHeaders = [];
+    this.isActive = !1, this.hasInitialized = !1, this.pivotResult = null, this.fieldHeaderMap.clear(), this.originalColumns = [], this.panelContainer = null, this.cleanupGrandTotalFooter();
+  }
+  // ===== Shell Integration =====
+  getToolPanel() {
+    return {
+      id: b.PANEL_ID,
+      title: "Pivot",
+      icon: "⊞",
+      tooltip: "Configure pivot table",
+      order: 90,
+      render: (e) => this.renderPanel(e)
+    };
   }
   // ===== Hooks =====
   processRows(e) {
-    if (!this.config.enabled || !this.isActive)
+    if (!this.hasInitialized && this.config.active !== !1 && this.hasValidPivotConfig() && (this.hasInitialized = !0, this.isActive = !0), !this.isActive)
       return [...e];
-    const t = y(this.config);
-    return t.length > 0 ? (this.warn(`Config errors: ${t.join(", ")}`), [...e]) : (this.pivotResult = C(e, this.config), q(this.pivotResult.rows).map((o) => ({
-      __pivotRowKey: o.rowKey,
-      __pivotLabel: o.rowLabel,
-      __pivotDepth: o.depth,
-      __pivotIsGroup: o.isGroup,
-      __pivotTotal: o.total,
-      ...o.values
-    })));
+    const i = I(this.config);
+    if (i.length > 0)
+      return this.warn(`Config errors: ${i.join(", ")}`), [...e];
+    if (this.buildFieldHeaderMap(), this.defaultExpanded = this.config.defaultExpanded ?? !0, this.expandedKeys.size === 0 && this.defaultExpanded && this.pivotResult) {
+      const r = w(this.pivotResult.rows);
+      for (const a of r)
+        this.expandedKeys.add(a);
+    }
+    if (this.pivotResult = S(e, this.config), this.expandedKeys.size === 0 && this.defaultExpanded) {
+      const r = w(this.pivotResult.rows);
+      for (const a of r)
+        this.expandedKeys.add(a);
+    }
+    const o = this.config.indentWidth ?? 20;
+    return D(
+      this.pivotResult.rows,
+      this.expandedKeys,
+      this.defaultExpanded
+    ).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 * o,
+      __pivotTotal: r.total,
+      ...r.values
+    }));
   }
   processColumns(e) {
-    if (!this.config.enabled || !this.isActive || !this.pivotResult)
+    if (!this.isActive || !this.pivotResult)
       return [...e];
-    const t = [];
-    t.push({
+    const i = [], o = (this.config.rowGroupFields ?? []).map((n) => this.fieldHeaderMap.get(n) ?? n).join(" / ");
+    i.push({
       field: "__pivotLabel",
-      header: this.config.rowGroupFields?.join(" / ") ?? "Group",
+      header: o || "Group",
       width: 200
     });
-    for (const o of this.pivotResult.columnKeys)
+    for (const n of this.pivotResult.columnKeys)
       for (const r of this.config.valueFields ?? []) {
-        const i = f([o], r.field);
-        t.push({
-          field: i,
-          header: `${o} - ${r.header || r.field} (${r.aggFunc})`,
+        const a = C([n], r.field), s = r.header || this.fieldHeaderMap.get(r.field) || r.field;
+        i.push({
+          field: a,
+          header: `${n} - ${s} (${r.aggFunc})`,
           width: 120,
           type: "number"
         });
       }
-    return this.config.showTotals && t.push({
+    return this.config.showTotals && i.push({
       field: "__pivotTotal",
       header: "Total",
       width: 100,
       type: "number"
-    }), t;
+    }), i;
+  }
+  renderRow(e, i) {
+    const o = e;
+    return o.__pivotRowKey && o.__pivotHasChildren ? B(o, i, {
+      columns: this.gridColumns,
+      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, i, this.gridColumns) : (this.cleanupPivotStyling(i), !1);
   }
-  // ===== Public API =====
   /**
-   * Enable pivot mode.
+   * Remove pivot-specific classes, attributes, and inline styles from a row element.
+   * Called when pivot mode is disabled to clean up reused DOM elements.
+   * Clears innerHTML so the grid's default renderer can rebuild the row.
    */
-  enablePivot() {
-    this.isActive = !0, this.requestRender();
+  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 = "");
+  }
+  afterRender() {
+    this.isActive && this.config.showGrandTotal && this.pivotResult ? this.renderGrandTotalFooter() : this.cleanupGrandTotalFooter();
   }
   /**
-   * Disable pivot mode and return to normal grid view.
+   * Render the grand total row as a sticky footer pinned to the bottom.
    */
-  disablePivot() {
-    this.isActive = !1, this.pivotResult = null, this.requestRender();
+  renderGrandTotalFooter() {
+    if (!this.pivotResult) return;
+    const e = this.shadowRoot;
+    if (!e) return;
+    const i = e.querySelector(".tbw-scroll-area") ?? e.querySelector(".tbw-grid-content") ?? e.children[0];
+    if (!i) return;
+    this.grandTotalFooter || (this.grandTotalFooter = document.createElement("div"), this.grandTotalFooter.className = "pivot-grand-total-footer", i.appendChild(this.grandTotalFooter));
+    const o = {
+      __pivotRowKey: "__grandTotal",
+      __pivotLabel: "Grand Total",
+      __pivotIsGrandTotal: !0,
+      __pivotTotal: this.pivotResult.grandTotal,
+      ...this.pivotResult.totals
+    };
+    J(o, this.grandTotalFooter, this.gridColumns);
   }
   /**
-   * Check if pivot mode is currently active.
+   * Remove the grand total footer element.
    */
+  cleanupGrandTotalFooter() {
+    this.grandTotalFooter && (this.grandTotalFooter.remove(), this.grandTotalFooter = null);
+  }
+  // ===== Expand/Collapse API =====
+  toggle(e) {
+    this.expandedKeys.has(e) ? this.expandedKeys.delete(e) : this.expandedKeys.add(e), this.requestRender();
+  }
+  expand(e) {
+    this.expandedKeys.add(e), this.requestRender();
+  }
+  collapse(e) {
+    this.expandedKeys.delete(e), this.requestRender();
+  }
+  expandAll() {
+    if (this.pivotResult) {
+      const e = w(this.pivotResult.rows);
+      for (const i of e)
+        this.expandedKeys.add(i);
+      this.requestRender();
+    }
+  }
+  collapseAll() {
+    this.expandedKeys.clear(), this.requestRender();
+  }
+  isExpanded(e) {
+    return this.expandedKeys.has(e);
+  }
+  // ===== Public API =====
+  enablePivot() {
+    this.originalColumns.length === 0 && this.captureOriginalColumns(), this.isActive = !0, this.requestRender();
+  }
+  disablePivot() {
+    this.isActive = !1, this.pivotResult = null, this.requestRender();
+  }
   isPivotActive() {
     return this.isActive;
   }
-  /**
-   * Get the current pivot result.
-   */
   getPivotResult() {
     return this.pivotResult;
   }
-  /**
-   * Set the row group fields for pivoting.
-   * @param fields - Array of field names to group rows by
-   */
   setRowGroupFields(e) {
     this.config.rowGroupFields = e, this.requestRender();
   }
-  /**
-   * Set the column group fields for pivoting.
-   * @param fields - Array of field names to create columns from
-   */
   setColumnGroupFields(e) {
     this.config.columnGroupFields = e, this.requestRender();
   }
-  /**
-   * Set the value fields with aggregation functions.
-   * @param fields - Array of value field configurations
-   */
   setValueFields(e) {
     this.config.valueFields = e, this.requestRender();
   }
-  /**
-   * Refresh the pivot by clearing cached results.
-   */
   refresh() {
     this.pivotResult = null, this.requestRender();
   }
+  // ===== Tool Panel API =====
+  showPanel() {
+    this.grid.openToolPanel(b.PANEL_ID);
+  }
+  hidePanel() {
+    this.grid.closeToolPanel();
+  }
+  togglePanel() {
+    this.grid.toggleToolPanel(b.PANEL_ID);
+  }
+  isPanelVisible() {
+    return this.grid.activeToolPanel === b.PANEL_ID;
+  }
+  // ===== Private Helpers =====
+  get gridColumns() {
+    return this.grid.columns ?? [];
+  }
+  buildFieldHeaderMap() {
+    const e = this.getAvailableFields();
+    this.fieldHeaderMap.clear();
+    for (const i of e)
+      this.fieldHeaderMap.set(i.field, i.header);
+  }
+  getAvailableFields() {
+    return this.originalColumns.length > 0 ? this.originalColumns : this.captureOriginalColumns();
+  }
+  captureOriginalColumns() {
+    const e = this.grid;
+    try {
+      const i = e.getAllColumns?.() ?? e.columns ?? [];
+      return this.originalColumns = i.filter((o) => !o.field.startsWith("__pivot")).map((o) => ({
+        field: o.field,
+        header: o.header ?? o.field
+      })), this.originalColumns;
+    } catch {
+      return [];
+    }
+  }
+  renderPanel(e) {
+    this.panelContainer = e, this.originalColumns.length === 0 && this.captureOriginalColumns();
+    const i = {
+      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),
+      onRemoveValueField: (o) => this.removeValueField(o),
+      onUpdateValueAggFunc: (o, n) => this.updateValueAggFunc(o, n),
+      onOptionChange: (o, n) => {
+        this.config[o] = n, this.isActive && this.refresh();
+      },
+      getAvailableFields: () => this.getAvailableFields()
+    };
+    return q(e, this.config, this.isActive, i);
+  }
+  refreshPanel() {
+    this.panelContainer && (this.panelContainer.innerHTML = "", this.renderPanel(this.panelContainer));
+  }
+  addFieldToZone(e, i) {
+    if (i === "rowGroups") {
+      const o = this.config.rowGroupFields ?? [];
+      o.includes(e) || (this.config.rowGroupFields = [...o, e]);
+    } else {
+      const o = this.config.columnGroupFields ?? [];
+      o.includes(e) || (this.config.columnGroupFields = [...o, e]);
+    }
+    this.removeFromOtherZones(e, i), this.isActive && this.refresh(), this.refreshPanel();
+  }
+  removeFieldFromZone(e, i) {
+    i === "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();
+  }
+  removeFromOtherZones(e, i) {
+    i !== "rowGroups" && (this.config.rowGroupFields = (this.config.rowGroupFields ?? []).filter((o) => o !== e)), i !== "columnGroups" && (this.config.columnGroupFields = (this.config.columnGroupFields ?? []).filter((o) => o !== e)), i !== "values" && (this.config.valueFields = (this.config.valueFields ?? []).filter((o) => o.field !== e));
+  }
+  addValueField(e, i) {
+    const o = this.config.valueFields ?? [];
+    o.some((n) => n.field === e) || (this.config.valueFields = [...o, { field: e, aggFunc: i }]), this.removeFromOtherZones(e, "values"), this.isActive && this.refresh(), this.refreshPanel();
+  }
+  removeValueField(e) {
+    this.config.valueFields = (this.config.valueFields ?? []).filter((i) => i.field !== e), this.isActive && this.refresh(), this.refreshPanel();
+  }
+  updateValueAggFunc(e, i) {
+    const o = this.config.valueFields ?? [], n = o.findIndex((r) => r.field === e);
+    n >= 0 && (o[n] = { ...o[n], aggFunc: i }, this.config.valueFields = [...o]), this.isActive && this.refresh();
+  }
   // ===== Styles =====
-  styles = `
-    [data-pivot-depth="1"] { padding-left: 20px; }
-    [data-pivot-depth="2"] { padding-left: 40px; }
-    [data-pivot-depth="3"] { padding-left: 60px; }
-    .pivot-group-row { font-weight: bold; background: var(--tbw-pivot-group-bg, var(--tbw-color-panel-bg)); }
-    .pivot-total-row { font-weight: bold; border-top: 2px solid var(--tbw-pivot-border, var(--tbw-color-border-strong)); }
-  `;
+  styles = Q;
 }
 export {
-  T as PivotPlugin
+  b as PivotPlugin
 };
 //# sourceMappingURL=index.js.map