@toolbox-web/grid 0.0.1

package/all.js

@@ -0,0 +1,3762 @@
+import { BaseGridPlugin as C, runAggregator as X, getAggregator as xe } from "./index.js";
+import { DGEvents as Pt, DataGridElement as Dt, FitModeEnum as Bt, GridCSSVars as Ht, GridClasses as Ot, GridDataAttrs as Wt, DataGridElement as Kt, GridSelectors as Vt, PluginEvents as Gt, SelectionPlugin as zt, TreePlugin as $t } from "./index.js";
+function ve(i, e, t, n) {
+  if (n.processCell)
+    return n.processCell(i, e, t);
+  if (i == null) return "";
+  if (i instanceof Date) return i.toISOString();
+  if (typeof i == "object") return JSON.stringify(i);
+  const o = String(i), r = n.delimiter ?? "	", s = n.newline ?? `
+`;
+  return n.quoteStrings || o.includes(r) || o.includes(s) || o.includes('"') ? `"${o.replace(/"/g, '""')}"` : o;
+}
+function F(i) {
+  const { rows: e, columns: t, selectedIndices: n, config: o } = i, r = o.delimiter ?? "	", s = o.newline ?? `
+`, l = t.filter((u) => !u.hidden && !u.field.startsWith("__")), a = [];
+  if (o.includeHeaders) {
+    const u = l.map((h) => {
+      const f = h.header || h.field;
+      return f.includes(r) || f.includes(s) || f.includes('"') ? `"${f.replace(/"/g, '""')}"` : f;
+    });
+    a.push(u.join(r));
+  }
+  const d = [...n instanceof Set ? [...n] : n].sort((u, h) => u - h);
+  for (const u of d) {
+    const h = e[u];
+    if (!h) continue;
+    const f = l.map(
+      (g) => ve(h[g.field], g.field, h, o)
+    );
+    a.push(f.join(r));
+  }
+  return a.join(s);
+}
+async function N(i) {
+  try {
+    return await navigator.clipboard.writeText(i), !0;
+  } catch {
+    const e = document.createElement("textarea");
+    e.value = i, e.style.position = "fixed", e.style.opacity = "0", e.style.pointerEvents = "none", document.body.appendChild(e), e.select();
+    const t = document.execCommand("copy");
+    return document.body.removeChild(e), t;
+  }
+}
+function J(i, e) {
+  const t = e.delimiter ?? "	", n = e.newline ?? `
+`, o = i.replace(/\r\n/g, `
+`).replace(/\r/g, `
+`), r = [];
+  let s = [], l = "", a = !1;
+  for (let c = 0; c < o.length; c++) {
+    const d = o[c];
+    d === '"' && !a ? a = !0 : d === '"' && a ? o[c + 1] === '"' ? (l += '"', c++) : a = !1 : d === t && !a ? (s.push(l), l = "") : d === n && !a ? (s.push(l), l = "", (s.length > 1 || s.some((u) => u.trim() !== "")) && r.push(s), s = []) : l += d;
+  }
+  return s.push(l), (s.length > 1 || s.some((c) => c.trim() !== "")) && r.push(s), r;
+}
+async function Q() {
+  try {
+    return await navigator.clipboard.readText();
+  } catch {
+    return "";
+  }
+}
+class vt extends C {
+  name = "clipboard";
+  version = "1.0.0";
+  get defaultConfig() {
+    return {
+      enabled: !0,
+      includeHeaders: !1,
+      delimiter: "	",
+      newline: `
+`,
+      quoteStrings: !1
+    };
+  }
+  // ===== Internal State =====
+  /** The last copied text (for reference/debugging) */
+  lastCopied = null;
+  // ===== Lifecycle =====
+  detach() {
+    this.lastCopied = null;
+  }
+  // ===== Event Handlers =====
+  onKeyDown(e) {
+    if (this.config.enabled === !1) return !1;
+    const t = (e.ctrlKey || e.metaKey) && e.key === "c", n = (e.ctrlKey || e.metaKey) && e.key === "v";
+    return t ? (this.#t(e.target), !0) : n ? (this.#n(), !0) : !1;
+  }
+  // ===== Private Methods =====
+  /**
+   * Handle copy operation
+   */
+  #t(e) {
+    const t = this.#e(), n = t?.getSelectedRows() ?? [], o = n.length > 0, r = t?.getRanges() ?? [], s = r.length > 0, l = t?.getSelectedCell() != null;
+    let a, c, d;
+    if (o && t)
+      a = F({
+        rows: this.rows,
+        columns: [...this.columns],
+        selectedIndices: n,
+        config: this.config
+      }), c = n.length, d = this.columns.filter((u) => !u.hidden && !u.field.startsWith("__")).length;
+    else if (s && t) {
+      const u = r[r.length - 1], h = this.#r({
+        startRow: u.from.row,
+        startCol: u.from.col,
+        endRow: u.to.row,
+        endCol: u.to.col
+      });
+      a = h.text, c = h.rowCount, d = h.columnCount;
+    } else if (l && t) {
+      const u = t.getSelectedCell(), h = this.#o(u.row, u.col);
+      if (!h) return;
+      a = h.text, c = 1, d = 1;
+    } else {
+      const u = this.#i(e);
+      if (!u) return;
+      a = u.text, c = 1, d = 1;
+    }
+    N(a).then(() => {
+      this.lastCopied = { text: a, timestamp: Date.now() }, this.emit("copy", { text: a, rowCount: c, columnCount: d });
+    });
+  }
+  /**
+   * Handle paste operation
+   */
+  #n() {
+    Q().then((e) => {
+      if (!e) return;
+      const t = J(e, this.config);
+      this.emit("paste", { rows: t, text: e });
+    });
+  }
+  /**
+   * Get the selection plugin instance if available.
+   */
+  #e() {
+    try {
+      const e = this.grid;
+      if (e?._plugins) {
+        for (const t of e._plugins)
+          if (t.name === "selection")
+            return t;
+      }
+    } catch {
+    }
+  }
+  /**
+   * Build text for a single cell by row/col index.
+   */
+  #o(e, t) {
+    const n = this.rows[e];
+    if (!n) return null;
+    const o = this.columns[t];
+    if (!o) return null;
+    const r = n[o.field], s = o.header || o.field;
+    let l;
+    if (this.config.includeHeaders) {
+      const a = r == null ? "" : String(r);
+      l = `${s}: ${a}`;
+    } else
+      l = r == null ? "" : String(r);
+    return { text: l };
+  }
+  /**
+   * Build text for a rectangular range of cells.
+   */
+  #r(e) {
+    const { startRow: t, startCol: n, endRow: o, endCol: r } = e, s = Math.min(t, o), l = Math.max(t, o), a = Math.min(n, r), c = Math.max(n, r), d = this.config.delimiter ?? "	", u = this.config.newline ?? `
+`, h = [], f = this.columns.slice(a, c + 1);
+    if (this.config.includeHeaders) {
+      const g = f.map((m) => m.header || m.field);
+      h.push(g.join(d));
+    }
+    for (let g = s; g <= l; g++) {
+      const m = this.rows[g];
+      if (!m) continue;
+      const b = f.map((S) => {
+        const R = m[S.field];
+        return R == null ? "" : R instanceof Date ? R.toISOString() : String(R);
+      });
+      h.push(b.join(d));
+    }
+    return {
+      text: h.join(u),
+      rowCount: l - s + 1,
+      columnCount: c - a + 1
+    };
+  }
+  /**
+   * Build text for a single focused cell from DOM.
+   * Used when selection plugin is not available or no rows are selected.
+   */
+  #i(e) {
+    const t = e.closest("[data-field-cache]");
+    if (!t) return null;
+    const n = t.dataset.fieldCache;
+    if (!n) return null;
+    const o = t.dataset.row;
+    if (!o) return null;
+    const r = parseInt(o, 10);
+    if (isNaN(r)) return null;
+    const s = this.rows[r];
+    if (!s) return null;
+    const l = s[n], c = this.columns.find((u) => u.field === n)?.header || n;
+    let d;
+    if (this.config.includeHeaders) {
+      const u = l == null ? "" : String(l);
+      d = `${c}: ${u}`;
+    } else
+      d = l == null ? "" : String(l);
+    return { text: d, field: n, value: l };
+  }
+  // ===== Public API =====
+  /**
+   * Copy currently selected rows to clipboard.
+   * @returns The copied text
+   */
+  async copy() {
+    const t = this.#e()?.getSelectedRows() ?? [], n = F({
+      rows: this.rows,
+      columns: [...this.columns],
+      selectedIndices: t,
+      config: this.config
+    });
+    return await N(n), this.lastCopied = { text: n, timestamp: Date.now() }, n;
+  }
+  /**
+   * Copy specific rows by index to clipboard.
+   * @param indices - Array of row indices to copy
+   * @returns The copied text
+   */
+  async copyRows(e) {
+    const t = F({
+      rows: this.rows,
+      columns: [...this.columns],
+      selectedIndices: e,
+      config: this.config
+    });
+    return await N(t), this.lastCopied = { text: t, timestamp: Date.now() }, t;
+  }
+  /**
+   * Read and parse clipboard content.
+   * @returns Parsed 2D array of cell values, or null if clipboard is empty
+   */
+  async paste() {
+    const e = await Q();
+    return e ? J(e, this.config) : null;
+  }
+  /**
+   * Get the last copied text and timestamp.
+   * @returns The last copied info or null
+   */
+  getLastCopied() {
+    return this.lastCopied;
+  }
+}
+const Z = 100;
+function G(i) {
+  if (i == null)
+    return Z;
+  if (typeof i == "number")
+    return i;
+  const e = parseFloat(i);
+  return isNaN(e) ? Z : e;
+}
+function ee(i) {
+  return i.map((e) => G(e.width));
+}
+function te(i) {
+  const e = [];
+  let t = 0;
+  for (const n of i)
+    e.push(t), t += G(n.width);
+  return e;
+}
+function ne(i) {
+  return i.reduce((e, t) => e + G(t.width), 0);
+}
+function Ce(i, e, t, n, o) {
+  const r = t.length;
+  if (r === 0)
+    return { startCol: 0, endCol: 0, visibleColumns: [] };
+  let s = ye(i, t, n);
+  s = Math.max(0, s - o);
+  const l = i + e;
+  let a = s;
+  for (let d = s; d < r; d++) {
+    if (t[d] >= l) {
+      a = d - 1;
+      break;
+    }
+    a = d;
+  }
+  a = Math.min(r - 1, a + o);
+  const c = [];
+  for (let d = s; d <= a; d++)
+    c.push(d);
+  return { startCol: s, endCol: a, visibleColumns: c };
+}
+function ye(i, e, t) {
+  let n = 0, o = e.length - 1;
+  for (; n < o; ) {
+    const r = Math.floor((n + o) / 2);
+    e[r] + t[r] <= i ? n = r + 1 : o = r;
+  }
+  return n;
+}
+function Se(i, e, t) {
+  return t ? i > e : !1;
+}
+class Ct extends C {
+  name = "columnVirtualization";
+  version = "1.0.0";
+  get defaultConfig() {
+    return {
+      enabled: !0,
+      autoEnable: !0,
+      threshold: 30,
+      overscan: 3
+    };
+  }
+  // ===== Internal State =====
+  isVirtualized = !1;
+  startCol = 0;
+  endCol = 0;
+  scrollLeft = 0;
+  totalWidth = 0;
+  columnWidths = [];
+  columnOffsets = [];
+  // ===== Lifecycle =====
+  attach(e) {
+    super.attach(e);
+    const t = this.columns;
+    this.columnWidths = ee(t), this.columnOffsets = te(t), this.totalWidth = ne(t), this.endCol = t.length - 1;
+  }
+  detach() {
+    this.columnWidths = [], this.columnOffsets = [], this.isVirtualized = !1, this.startCol = 0, this.endCol = 0, this.scrollLeft = 0, this.totalWidth = 0;
+  }
+  // ===== Hooks =====
+  processColumns(e) {
+    const t = this.config.enabled && Se(e.length, this.config.threshold ?? 30, this.config.autoEnable ?? !0);
+    if (this.isVirtualized = t ?? !1, this.columnWidths = ee(e), this.columnOffsets = te(e), this.totalWidth = ne(e), !t)
+      return this.startCol = 0, this.endCol = e.length - 1, [...e];
+    const n = this.grid.clientWidth || 800, o = Ce(
+      this.scrollLeft,
+      n,
+      this.columnOffsets,
+      this.columnWidths,
+      this.config.overscan ?? 3
+    );
+    return this.startCol = o.startCol, this.endCol = o.endCol, o.visibleColumns.map((r) => e[r]);
+  }
+  afterRender() {
+    if (!this.isVirtualized) return;
+    const e = this.shadowRoot;
+    if (!e) return;
+    const t = this.columnOffsets[this.startCol] ?? 0, n = e.querySelector(".header-row"), o = e.querySelectorAll(".data-grid-row");
+    n && (n.style.paddingLeft = `${t}px`), o.forEach((s) => {
+      s.style.paddingLeft = `${t}px`;
+    });
+    const r = e.querySelector(".rows-viewport .rows");
+    r && (r.style.width = `${this.totalWidth}px`);
+  }
+  onScroll(e) {
+    !this.isVirtualized || Math.abs(e.scrollLeft - this.scrollLeft) < 1 || (this.scrollLeft = e.scrollLeft, this.requestRender());
+  }
+  // ===== Public API =====
+  /**
+   * Check if column virtualization is currently active.
+   */
+  getIsVirtualized() {
+    return this.isVirtualized;
+  }
+  /**
+   * Get the current visible column range.
+   */
+  getVisibleColumnRange() {
+    return { start: this.startCol, end: this.endCol };
+  }
+  /**
+   * Scroll the grid to bring a specific column into view.
+   * @param columnIndex - Index of the column to scroll to
+   */
+  scrollToColumn(e) {
+    const t = this.columnOffsets[e] ?? 0, n = this.grid;
+    n.scrollLeft = t;
+  }
+  /**
+   * Get the left offset for a specific column.
+   * @param columnIndex - Index of the column
+   */
+  getColumnOffset(e) {
+    return this.columnOffsets[e] ?? 0;
+  }
+  /**
+   * Get the total width of all columns.
+   */
+  getTotalWidth() {
+    return this.totalWidth;
+  }
+}
+function K(i, e) {
+  return (typeof i == "function" ? i(e) : i).filter((n) => !(n.hidden === !0 || typeof n.hidden == "function" && n.hidden(e)));
+}
+function Re(i, e) {
+  return i.disabled === !0 ? !0 : typeof i.disabled == "function" ? i.disabled(e) : !1;
+}
+function V(i, e, t) {
+  const n = document.createElement("div");
+  n.className = "tbw-context-menu", n.setAttribute("role", "menu");
+  for (const o of i) {
+    if (o.separator) {
+      const a = document.createElement("div");
+      a.className = "tbw-context-menu-separator", a.setAttribute("role", "separator"), n.appendChild(a);
+      continue;
+    }
+    const r = document.createElement("div");
+    r.className = "tbw-context-menu-item", o.cssClass && r.classList.add(o.cssClass), r.setAttribute("role", "menuitem"), r.setAttribute("data-id", o.id);
+    const s = Re(o, e);
+    if (s && (r.classList.add("disabled"), r.setAttribute("aria-disabled", "true")), o.icon) {
+      const a = document.createElement("span");
+      a.className = "tbw-context-menu-icon", a.innerHTML = o.icon, r.appendChild(a);
+    }
+    const l = document.createElement("span");
+    if (l.className = "tbw-context-menu-label", l.textContent = o.name, r.appendChild(l), o.shortcut) {
+      const a = document.createElement("span");
+      a.className = "tbw-context-menu-shortcut", a.textContent = o.shortcut, r.appendChild(a);
+    }
+    if (o.subMenu?.length) {
+      const a = document.createElement("span");
+      a.className = "tbw-context-menu-arrow", a.textContent = "▶", r.appendChild(a), r.addEventListener("mouseenter", () => {
+        if (r.querySelector(".tbw-context-menu") || !o.subMenu) return;
+        const d = K(o.subMenu, e), u = V(d, e, t);
+        u.classList.add("tbw-context-submenu"), u.style.position = "absolute", u.style.left = "100%", u.style.top = "0", r.style.position = "relative", r.appendChild(u);
+      }), r.addEventListener("mouseleave", () => {
+        const c = r.querySelector(".tbw-context-menu");
+        c && c.remove();
+      });
+    }
+    !s && o.action && !o.subMenu && r.addEventListener("click", (a) => {
+      a.stopPropagation(), t(o);
+    }), n.appendChild(r);
+  }
+  return n;
+}
+function oe(i, e, t) {
+  i.style.position = "fixed", i.style.left = `${e}px`, i.style.top = `${t}px`, i.style.visibility = "hidden", i.style.zIndex = "10000";
+  const n = i.getBoundingClientRect(), o = window.innerWidth, r = window.innerHeight;
+  let s = e, l = t;
+  e + n.width > o && (s = e - n.width), t + n.height > r && (l = t - n.height), s = Math.max(0, s), l = Math.max(0, l), i.style.left = `${s}px`, i.style.top = `${l}px`, i.style.visibility = "visible";
+}
+let P = null, D = null, A = null;
+const ke = `
+  .tbw-context-menu {
+    position: fixed;
+    background: light-dark(#f5f5f5, #2a2a2a);
+    color: light-dark(#222, #eee);
+    border: 1px solid light-dark(#d0d0d4, #454545);
+    border-radius: 4px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
+    min-width: 160px;
+    padding: 4px 0;
+    z-index: 10000;
+    font-size: 13px;
+    font-family: system-ui, sans-serif;
+  }
+  .tbw-context-menu-item {
+    display: flex;
+    align-items: center;
+    padding: 6px 12px;
+    cursor: pointer;
+    gap: 8px;
+  }
+  .tbw-context-menu-item:hover:not(.disabled) {
+    background: light-dark(#e8e8e8, #3a3a3a);
+  }
+  .tbw-context-menu-item.disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+  .tbw-context-menu-item.danger {
+    color: light-dark(#c00, #f66);
+  }
+  .tbw-context-menu-icon {
+    width: 16px;
+    text-align: center;
+  }
+  .tbw-context-menu-label {
+    flex: 1;
+  }
+  .tbw-context-menu-shortcut {
+    color: light-dark(#888, #888);
+    font-size: 11px;
+  }
+  .tbw-context-menu-arrow {
+    font-size: 10px;
+    color: light-dark(#888, #888);
+  }
+  .tbw-context-menu-separator {
+    height: 1px;
+    background: light-dark(#d0d0d4, #454545);
+    margin: 4px 0;
+  }
+`, B = [
+  {
+    id: "copy",
+    name: "Copy",
+    shortcut: "Ctrl+C",
+    action: (i) => {
+      i.grid?.plugins?.clipboard?.copy?.();
+    }
+  },
+  { separator: !0, id: "sep1", name: "" },
+  {
+    id: "export-csv",
+    name: "Export CSV",
+    action: (i) => {
+      i.grid?.plugins?.export?.exportCsv?.();
+    }
+  }
+];
+class yt extends C {
+  name = "contextMenu";
+  version = "1.0.0";
+  get defaultConfig() {
+    return {
+      enabled: !0,
+      items: B
+    };
+  }
+  // ===== Internal State =====
+  isOpen = !1;
+  position = { x: 0, y: 0 };
+  params = null;
+  menuElement = null;
+  // ===== Lifecycle =====
+  attach(e) {
+    super.attach(e), this.installGlobalHandlers();
+  }
+  detach() {
+    this.menuElement && (this.menuElement.remove(), this.menuElement = null), this.isOpen = !1, this.params = null;
+  }
+  // ===== Private Methods =====
+  installGlobalHandlers() {
+    !A && typeof document < "u" && (A = document.createElement("style"), A.id = "tbw-context-menu-styles", A.textContent = ke, document.head.appendChild(A)), P || (P = () => {
+      document.querySelectorAll(".tbw-context-menu").forEach((t) => t.remove());
+    }, document.addEventListener("click", P)), D || (D = (e) => {
+      e.key === "Escape" && document.querySelectorAll(".tbw-context-menu").forEach((n) => n.remove());
+    }, document.addEventListener("keydown", D));
+  }
+  // ===== Hooks =====
+  afterRender() {
+    if (!this.config.enabled) return;
+    const e = this.shadowRoot;
+    if (!e) return;
+    const t = e.children[0];
+    t && t.getAttribute("data-context-menu-bound") !== "true" && (t.setAttribute("data-context-menu-bound", "true"), t.addEventListener("contextmenu", (n) => {
+      if (!this.config.enabled) return;
+      const o = n;
+      o.preventDefault();
+      const r = o.target, s = r.closest("[data-row][data-col]"), l = r.closest(".header-cell");
+      let a;
+      if (s) {
+        const d = parseInt(s.getAttribute("data-row") ?? "-1", 10), u = parseInt(s.getAttribute("data-col") ?? "-1", 10), h = this.columns[u], f = this.rows[d];
+        a = {
+          row: f,
+          rowIndex: d,
+          column: h,
+          columnIndex: u,
+          field: h?.field ?? "",
+          value: f?.[h?.field] ?? null,
+          isHeader: !1,
+          event: o
+        };
+      } else if (l) {
+        const d = parseInt(l.getAttribute("data-col") ?? "-1", 10), u = this.columns[d];
+        a = {
+          row: null,
+          rowIndex: -1,
+          column: u,
+          columnIndex: d,
+          field: u?.field ?? "",
+          value: null,
+          isHeader: !0,
+          event: o
+        };
+      } else
+        return;
+      this.params = a, this.position = { x: o.clientX, y: o.clientY };
+      const c = K(this.config.items ?? B, a);
+      c.length && (this.menuElement && this.menuElement.remove(), this.menuElement = V(c, a, (d) => {
+        d.action && d.action(a), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
+      }), document.body.appendChild(this.menuElement), oe(this.menuElement, o.clientX, o.clientY), this.isOpen = !0, this.emit("context-menu-open", { params: a, items: c }));
+    }));
+  }
+  // ===== Public API =====
+  /**
+   * Programmatically show the context menu at the specified position.
+   * @param x - X coordinate
+   * @param y - Y coordinate
+   * @param params - Partial context menu parameters
+   */
+  showMenu(e, t, n) {
+    const o = {
+      row: n.row ?? null,
+      rowIndex: n.rowIndex ?? -1,
+      column: n.column ?? null,
+      columnIndex: n.columnIndex ?? -1,
+      field: n.field ?? "",
+      value: n.value ?? null,
+      isHeader: n.isHeader ?? !1,
+      event: n.event ?? new MouseEvent("contextmenu")
+    }, r = K(this.config.items ?? B, o);
+    this.menuElement && this.menuElement.remove(), this.menuElement = V(r, o, (s) => {
+      s.action && s.action(o), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
+    }), document.body.appendChild(this.menuElement), oe(this.menuElement, e, t), this.isOpen = !0;
+  }
+  /**
+   * Hide the context menu.
+   */
+  hideMenu() {
+    this.menuElement && (this.menuElement.remove(), this.menuElement = null, this.isOpen = !1);
+  }
+  /**
+   * Check if the context menu is currently open.
+   * @returns Whether the menu is open
+   */
+  isMenuOpen() {
+    return this.isOpen;
+  }
+  // Styles are injected globally via installGlobalHandlers() since menu renders in document.body
+}
+function re(i, e = !0) {
+  if (i == null) return "";
+  if (i instanceof Date) return i.toISOString();
+  if (typeof i == "object") return JSON.stringify(i);
+  const t = String(i);
+  return e && (t.includes(",") || t.includes('"') || t.includes(`
+`) || t.includes("\r")) ? `"${t.replace(/"/g, '""')}"` : t;
+}
+function Ee(i, e, t, n = {}) {
+  const o = n.delimiter ?? ",", r = n.newline ?? `
+`, s = [], l = n.bom ? "\uFEFF" : "";
+  if (t.includeHeaders !== !1) {
+    const a = e.map((c) => {
+      const d = c.header || c.field, u = t.processHeader ? t.processHeader(d, c.field) : d;
+      return re(u);
+    });
+    s.push(a.join(o));
+  }
+  for (const a of i) {
+    const c = e.map((d) => {
+      let u = a[d.field];
+      return t.processCell && (u = t.processCell(u, d.field, a)), re(u);
+    });
+    s.push(c.join(o));
+  }
+  return l + s.join(r);
+}
+function z(i, e) {
+  const t = URL.createObjectURL(i), n = document.createElement("a");
+  n.href = t, n.download = e, n.style.display = "none", document.body.appendChild(n), n.click(), document.body.removeChild(n), URL.revokeObjectURL(t);
+}
+function Ae(i, e) {
+  const t = new Blob([i], { type: "text/csv;charset=utf-8;" });
+  z(t, e);
+}
+function ie(i) {
+  return i.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+}
+function _e(i, e, t) {
+  let n = `<?xml version="1.0" encoding="UTF-8"?>
+<?mso-application progid="Excel.Sheet"?>
+<Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"
+  xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">
+<Worksheet ss:Name="Sheet1">
+<Table>`;
+  if (t.includeHeaders !== !1) {
+    n += `
+<Row>`;
+    for (const o of e) {
+      const r = o.header || o.field, s = t.processHeader ? t.processHeader(r, o.field) : r;
+      n += `<Cell><Data ss:Type="String">${ie(s)}</Data></Cell>`;
+    }
+    n += "</Row>";
+  }
+  for (const o of i) {
+    n += `
+<Row>`;
+    for (const r of e) {
+      let s = o[r.field];
+      t.processCell && (s = t.processCell(s, r.field, o));
+      let l = "String", a = "";
+      s == null ? a = "" : typeof s == "number" && !isNaN(s) ? (l = "Number", a = String(s)) : s instanceof Date ? (l = "DateTime", a = s.toISOString()) : a = ie(String(s)), n += `<Cell><Data ss:Type="${l}">${a}</Data></Cell>`;
+    }
+    n += "</Row>";
+  }
+  return n += `
+</Table>
+</Worksheet>
+</Workbook>`, n;
+}
+function Ie(i, e) {
+  const t = e.endsWith(".xls") ? e : `${e}.xls`, n = new Blob([i], {
+    type: "application/vnd.ms-excel;charset=utf-8;"
+  });
+  z(n, t);
+}
+class St extends C {
+  name = "export";
+  version = "1.0.0";
+  get defaultConfig() {
+    return {
+      enabled: !0,
+      fileName: "export",
+      includeHeaders: !0,
+      onlyVisible: !0,
+      onlySelected: !1
+    };
+  }
+  // ===== Internal State =====
+  isExportingFlag = !1;
+  lastExportInfo = null;
+  // ===== Private Methods =====
+  performExport(e, t) {
+    const n = this.config, o = {
+      format: e,
+      fileName: t?.fileName ?? n.fileName ?? "export",
+      includeHeaders: t?.includeHeaders ?? n.includeHeaders,
+      processCell: t?.processCell,
+      processHeader: t?.processHeader,
+      columns: t?.columns,
+      rowIndices: t?.rowIndices
+    };
+    let r = [...this.columns];
+    if (n.onlyVisible && (r = r.filter((a) => !a.hidden && !a.field.startsWith("__"))), t?.columns) {
+      const a = new Set(t.columns);
+      r = r.filter((c) => a.has(c.field));
+    }
+    let s = [...this.rows];
+    if (n.onlySelected) {
+      const a = this.getSelectionState();
+      a?.selected?.size && (s = [...a.selected].sort((d, u) => d - u).map((d) => this.rows[d]).filter(Boolean));
+    }
+    t?.rowIndices && (s = t.rowIndices.map((a) => this.rows[a]).filter(Boolean)), this.isExportingFlag = !0;
+    let l = o.fileName;
+    try {
+      switch (e) {
+        case "csv": {
+          const a = Ee(s, r, o, { bom: !0 });
+          l = l.endsWith(".csv") ? l : `${l}.csv`, Ae(a, l);
+          break;
+        }
+        case "excel": {
+          const a = _e(s, r, o);
+          l = l.endsWith(".xls") ? l : `${l}.xls`, Ie(a, l);
+          break;
+        }
+        case "json": {
+          const a = s.map((u) => {
+            const h = {};
+            for (const f of r) {
+              let g = u[f.field];
+              o.processCell && (g = o.processCell(g, f.field, u)), h[f.field] = g;
+            }
+            return h;
+          }), c = JSON.stringify(a, null, 2);
+          l = l.endsWith(".json") ? l : `${l}.json`;
+          const d = new Blob([c], { type: "application/json" });
+          z(d, l);
+          break;
+        }
+      }
+      this.lastExportInfo = { format: e, timestamp: /* @__PURE__ */ new Date() }, this.emit("export-complete", {
+        format: e,
+        fileName: l,
+        rowCount: s.length,
+        columnCount: r.length
+      });
+    } finally {
+      this.isExportingFlag = !1;
+    }
+  }
+  getSelectionState() {
+    try {
+      return this.grid?.getPluginState?.("selection") ?? null;
+    } catch {
+      return null;
+    }
+  }
+  // ===== Public API =====
+  /**
+   * Export data to CSV format.
+   * @param params - Optional export parameters
+   */
+  exportCsv(e) {
+    this.performExport("csv", e);
+  }
+  /**
+   * Export data to Excel format (XML Spreadsheet).
+   * @param params - Optional export parameters
+   */
+  exportExcel(e) {
+    this.performExport("excel", e);
+  }
+  /**
+   * Export data to JSON format.
+   * @param params - Optional export parameters
+   */
+  exportJson(e) {
+    this.performExport("json", e);
+  }
+  /**
+   * Check if an export is currently in progress.
+   * @returns Whether export is in progress
+   */
+  isExporting() {
+    return this.isExportingFlag;
+  }
+  /**
+   * Get information about the last export.
+   * @returns Export info or null if no export has occurred
+   */
+  getLastExport() {
+    return this.lastExportInfo;
+  }
+}
+function Te(i) {
+  const { totalRows: e, viewportHeight: t, scrollTop: n, rowHeight: o, overscan: r } = i, s = Math.ceil(t / o);
+  let l = Math.floor(n / o) - r;
+  l < 0 && (l = 0);
+  let a = l + s + r * 2;
+  return a > e && (a = e), a === e && l > 0 && (l = Math.max(0, a - s - r * 2)), {
+    start: l,
+    end: a,
+    offsetY: l * o,
+    totalHeight: e * o
+  };
+}
+function Le(i, e) {
+  return i <= e;
+}
+function Me(i, e, t = !1) {
+  const n = i[e.field];
+  if (e.operator === "blank")
+    return n == null || n === "";
+  if (e.operator === "notBlank")
+    return n != null && n !== "";
+  if (n == null) return !1;
+  const o = String(n), r = t ? o : o.toLowerCase(), s = t ? String(e.value) : String(e.value).toLowerCase();
+  switch (e.operator) {
+    // Text operators
+    case "contains":
+      return r.includes(s);
+    case "notContains":
+      return !r.includes(s);
+    case "equals":
+      return r === s;
+    case "notEquals":
+      return r !== s;
+    case "startsWith":
+      return r.startsWith(s);
+    case "endsWith":
+      return r.endsWith(s);
+    // Number/Date operators (use raw numeric values)
+    case "lessThan":
+      return Number(n) < Number(e.value);
+    case "lessThanOrEqual":
+      return Number(n) <= Number(e.value);
+    case "greaterThan":
+      return Number(n) > Number(e.value);
+    case "greaterThanOrEqual":
+      return Number(n) >= Number(e.value);
+    case "between":
+      return Number(n) >= Number(e.value) && Number(n) <= Number(e.valueTo);
+    // Set operators
+    case "in":
+      return Array.isArray(e.value) && e.value.includes(n);
+    case "notIn":
+      return Array.isArray(e.value) && !e.value.includes(n);
+    default:
+      return !0;
+  }
+}
+function qe(i, e, t = !1) {
+  return e.length ? i.filter((n) => e.every((o) => Me(n, o, t))) : i;
+}
+function Fe(i) {
+  return JSON.stringify(
+    i.map((e) => ({
+      field: e.field,
+      operator: e.operator,
+      value: e.value,
+      valueTo: e.valueTo
+    }))
+  );
+}
+function se(i, e) {
+  const t = /* @__PURE__ */ new Set();
+  for (const n of i) {
+    const o = n[e];
+    o != null && t.add(o);
+  }
+  return [...t].sort((n, o) => typeof n == "number" && typeof o == "number" ? n - o : String(n).localeCompare(String(o)));
+}
+const Ne = `
+.tbw-filter-panel {
+  position: fixed;
+  background: var(--tbw-filter-panel-bg, var(--tbw-color-panel-bg, light-dark(#eeeeee, #222222)));
+  color: var(--tbw-filter-panel-fg, var(--tbw-color-fg, light-dark(#222222, #eeeeee)));
+  border: 1px solid var(--tbw-filter-panel-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));
+  border-radius: var(--tbw-filter-panel-radius, var(--tbw-border-radius, 4px));
+  box-shadow: 0 4px 16px var(--tbw-filter-panel-shadow, var(--tbw-color-shadow, light-dark(rgba(0,0,0,0.1), rgba(0,0,0,0.3))));
+  padding: 12px;
+  z-index: 10000;
+  min-width: 200px;
+  max-width: 280px;
+  max-height: 350px;
+  display: flex;
+  flex-direction: column;
+  font-family: var(--tbw-font-family, system-ui, sans-serif);
+  font-size: var(--tbw-font-size, 13px);
+}
+
+.tbw-filter-search {
+  margin-bottom: 8px;
+}
+
+.tbw-filter-search-input {
+  width: 100%;
+  padding: 6px 10px;
+  background: var(--tbw-filter-input-bg, var(--tbw-color-bg, transparent));
+  color: inherit;
+  border: 1px solid var(--tbw-filter-input-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));
+  border-radius: var(--tbw-filter-input-radius, 4px);
+  font-size: inherit;
+  box-sizing: border-box;
+}
+
+.tbw-filter-search-input:focus {
+  outline: none;
+  border-color: var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));
+  box-shadow: 0 0 0 2px rgba(from var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6)) r g b / 15%);
+}
+
+.tbw-filter-actions {
+  display: flex;
+  padding: 4px 2px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid var(--tbw-filter-divider, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));
+}
+
+.tbw-filter-action-btn {
+  background: transparent;
+  border: none;
+  color: var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));
+  cursor: pointer;
+  font-size: 12px;
+  padding: 2px 0;
+}
+
+.tbw-filter-action-btn:hover {
+  text-decoration: underline;
+}
+
+.tbw-filter-values {
+  flex: 1;
+  overflow-y: auto;
+  margin-bottom: 8px;
+  max-height: 180px;
+  position: relative;
+}
+
+.tbw-filter-values-spacer {
+  width: 1px;
+}
+
+.tbw-filter-values-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.tbw-filter-value-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 2px;
+  cursor: pointer;
+  border-radius: 3px;
+}
+
+.tbw-filter-value-item:hover {
+  background: var(--tbw-filter-hover, var(--tbw-color-row-hover, light-dark(#f0f6ff, #1c1c1c)));
+}
+
+.tbw-filter-checkbox {
+  margin: 0;
+  cursor: pointer;
+  accent-color: var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));
+}
+
+.tbw-filter-no-match {
+  color: var(--tbw-filter-muted, var(--tbw-color-fg-muted, light-dark(#555555, #aaaaaa)));
+  padding: 8px 0;
+  text-align: center;
+  font-style: italic;
+}
+
+.tbw-filter-buttons {
+  display: flex;
+  gap: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--tbw-filter-divider, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));
+}
+
+.tbw-filter-apply-btn {
+  flex: 1;
+  padding: 6px 12px;
+  background: var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));
+  color: var(--tbw-filter-accent-fg, var(--tbw-color-accent-fg, light-dark(#ffffff, #000000)));
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.tbw-filter-apply-btn:hover {
+  filter: brightness(0.9);
+}
+
+.tbw-filter-clear-btn {
+  flex: 1;
+  padding: 6px 12px;
+  background: transparent;
+  color: var(--tbw-filter-muted, var(--tbw-color-fg-muted, light-dark(#555555, #aaaaaa)));
+  border: 1px solid var(--tbw-filter-input-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.tbw-filter-clear-btn:hover {
+  background: var(--tbw-filter-hover, var(--tbw-color-row-hover, light-dark(#f0f6ff, #1c1c1c)));
+}
+`;
+class E extends C {
+  name = "filtering";
+  version = "1.0.0";
+  get defaultConfig() {
+    return {
+      enabled: !0,
+      debounceMs: 300,
+      caseSensitive: !1,
+      trimInput: !0,
+      useWorker: !0
+    };
+  }
+  // ===== Internal State =====
+  filters = /* @__PURE__ */ new Map();
+  cachedResult = null;
+  cacheKey = null;
+  openPanelField = null;
+  panelElement = null;
+  searchText = /* @__PURE__ */ new Map();
+  excludedValues = /* @__PURE__ */ new Map();
+  documentClickHandler = null;
+  globalStylesInjected = !1;
+  // Virtualization constants for filter value list
+  static LIST_ITEM_HEIGHT = 28;
+  static LIST_OVERSCAN = 3;
+  static LIST_BYPASS_THRESHOLD = 50;
+  // Don't virtualize if < 50 items
+  // ===== Lifecycle =====
+  attach(e) {
+    super.attach(e), this.injectGlobalStyles();
+  }
+  detach() {
+    this.filters.clear(), this.cachedResult = null, this.cacheKey = null, this.openPanelField = null, this.panelElement && (this.panelElement.remove(), this.panelElement = null), this.searchText.clear(), this.excludedValues.clear(), this.removeDocumentClickHandler();
+  }
+  // ===== Hooks =====
+  processRows(e) {
+    const t = [...this.filters.values()];
+    if (!t.length) return [...e];
+    const n = Fe(t);
+    if (this.cacheKey === n && this.cachedResult)
+      return this.cachedResult;
+    const o = qe([...e], t, this.config.caseSensitive);
+    return this.cachedResult = o, this.cacheKey = n, o;
+  }
+  afterRender() {
+    if (!this.config.enabled) return;
+    const e = this.shadowRoot;
+    if (!e) return;
+    e.querySelectorAll('[part~="header-cell"]').forEach((n) => {
+      const o = n.getAttribute("data-col");
+      if (o === null) return;
+      const r = this.columns[parseInt(o, 10)];
+      if (!r || r.filterable === !1 || n.querySelector(".tbw-filter-btn")) return;
+      const s = r.field;
+      if (!s) return;
+      const l = document.createElement("button");
+      l.className = "tbw-filter-btn", l.setAttribute("aria-label", `Filter ${r.header ?? s}`), l.innerHTML = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>', this.filters.has(s) && (l.classList.add("active"), n.classList.add("filtered")), l.addEventListener("click", (a) => {
+        a.stopPropagation(), this.toggleFilterPanel(s, r, l);
+      }), n.appendChild(l);
+    });
+  }
+  // ===== Public API =====
+  /**
+   * Set a filter on a specific field.
+   * Pass null to remove the filter.
+   */
+  setFilter(e, t) {
+    t === null ? this.filters.delete(e) : this.filters.set(e, { ...t, field: e }), this.cachedResult = null, this.cacheKey = null, this.emit("filter-change", {
+      filters: [...this.filters.values()],
+      filteredRowCount: 0
+      // Will be accurate after processRows
+    }), this.requestRender();
+  }
+  /**
+   * Get the current filter for a field.
+   */
+  getFilter(e) {
+    return this.filters.get(e);
+  }
+  /**
+   * Get all active filters.
+   */
+  getFilters() {
+    return [...this.filters.values()];
+  }
+  /**
+   * Alias for getFilters() to match functional API naming.
+   */
+  getFilterModel() {
+    return this.getFilters();
+  }
+  /**
+   * Set filters from an array (replaces all existing filters).
+   */
+  setFilterModel(e) {
+    this.filters.clear();
+    for (const t of e)
+      this.filters.set(t.field, t);
+    this.cachedResult = null, this.cacheKey = null, this.emit("filter-change", {
+      filters: [...this.filters.values()],
+      filteredRowCount: 0
+    }), this.requestRender();
+  }
+  /**
+   * Clear all filters.
+   */
+  clearAllFilters() {
+    this.filters.clear(), this.excludedValues.clear(), this.searchText.clear(), this.cachedResult = null, this.cacheKey = null, this.emit("filter-change", {
+      filters: [],
+      filteredRowCount: this.rows.length
+    }), this.requestRender();
+  }
+  /**
+   * Clear filter for a specific field.
+   */
+  clearFieldFilter(e) {
+    this.filters.delete(e), this.excludedValues.delete(e), this.searchText.delete(e), this.cachedResult = null, this.cacheKey = null, this.emit("filter-change", {
+      filters: [...this.filters.values()],
+      filteredRowCount: 0
+    }), this.requestRender();
+  }
+  /**
+   * Check if a field has an active filter.
+   */
+  isFieldFiltered(e) {
+    return this.filters.has(e);
+  }
+  /**
+   * Get the count of filtered rows (from cache).
+   */
+  getFilteredRowCount() {
+    return this.cachedResult?.length ?? this.rows.length;
+  }
+  /**
+   * Get all active filters (alias for getFilters).
+   */
+  getActiveFilters() {
+    return this.getFilters();
+  }
+  /**
+   * Get unique values for a field (for set filter dropdowns).
+   * Uses sourceRows to include all values regardless of current filter.
+   */
+  getUniqueValues(e) {
+    return se(this.sourceRows, e);
+  }
+  // ===== Private Methods =====
+  /**
+   * Inject global styles for filter panel (rendered in document.body)
+   */
+  injectGlobalStyles() {
+    if (this.globalStylesInjected) return;
+    if (document.getElementById("tbw-filter-panel-styles")) {
+      this.globalStylesInjected = !0;
+      return;
+    }
+    const e = document.createElement("style");
+    e.id = "tbw-filter-panel-styles", e.textContent = Ne, document.head.appendChild(e), this.globalStylesInjected = !0;
+  }
+  /**
+   * Toggle the filter panel for a field
+   */
+  toggleFilterPanel(e, t, n) {
+    if (this.openPanelField === e) {
+      this.closeFilterPanel();
+      return;
+    }
+    this.closeFilterPanel();
+    const o = document.createElement("div");
+    o.className = "tbw-filter-panel", this.panelElement = o, this.openPanelField = e;
+    const r = se(this.sourceRows, e);
+    let s = this.excludedValues.get(e);
+    s || (s = /* @__PURE__ */ new Set(), this.excludedValues.set(e, s));
+    const l = this.searchText.get(e) ?? "", a = {
+      field: e,
+      column: t,
+      uniqueValues: r,
+      excludedValues: s,
+      searchText: l,
+      applySetFilter: (u) => {
+        this.applySetFilter(e, u), this.closeFilterPanel();
+      },
+      applyTextFilter: (u, h, f) => {
+        this.applyTextFilter(e, u, h, f), this.closeFilterPanel();
+      },
+      clearFilter: () => {
+        this.clearFieldFilter(e), this.closeFilterPanel();
+      },
+      closePanel: () => this.closeFilterPanel()
+    };
+    let c = !1;
+    this.config.filterPanelRenderer && (this.config.filterPanelRenderer(o, a), c = o.children.length > 0), c || this.renderDefaultFilterPanel(o, a, r, s), document.body.appendChild(o), this.positionPanel(o, n);
+    const d = (u) => {
+      !o.contains(u.target) && u.target !== n && this.closeFilterPanel();
+    };
+    this.documentClickHandler = d, setTimeout(() => {
+      document.addEventListener("click", d);
+    }, 0);
+  }
+  /**
+   * Close the filter panel
+   */
+  closeFilterPanel() {
+    this.panelElement && (this.panelElement.remove(), this.panelElement = null), this.openPanelField = null, this.removeDocumentClickHandler();
+  }
+  /**
+   * Remove the document click handler
+   */
+  removeDocumentClickHandler() {
+    this.documentClickHandler && (document.removeEventListener("click", this.documentClickHandler), this.documentClickHandler = null);
+  }
+  /**
+   * Position the panel below the button
+   */
+  positionPanel(e, t) {
+    const n = t.getBoundingClientRect();
+    e.style.position = "fixed", e.style.top = `${n.bottom + 4}px`, e.style.left = `${n.left}px`, requestAnimationFrame(() => {
+      const o = e.getBoundingClientRect();
+      o.right > window.innerWidth - 8 && (e.style.left = `${window.innerWidth - o.width - 8}px`), o.bottom > window.innerHeight - 8 && (e.style.top = `${n.top - o.height - 4}px`);
+    });
+  }
+  /**
+   * Render the default filter panel content
+   */
+  renderDefaultFilterPanel(e, t, n, o) {
+    const { field: r } = t, s = document.createElement("div");
+    s.className = "tbw-filter-search";
+    const l = document.createElement("input");
+    l.type = "text", l.placeholder = "Search...", l.className = "tbw-filter-search-input", l.value = this.searchText.get(r) ?? "", s.appendChild(l), e.appendChild(s);
+    const a = document.createElement("div");
+    a.className = "tbw-filter-actions";
+    const c = document.createElement("label");
+    c.className = "tbw-filter-value-item", c.style.padding = "0", c.style.margin = "0";
+    const d = document.createElement("input");
+    d.type = "checkbox", d.className = "tbw-filter-checkbox";
+    const u = document.createElement("span");
+    u.textContent = "Select All", c.appendChild(d), c.appendChild(u), a.appendChild(c);
+    const h = () => {
+      const p = [...b.values()], v = p.every((x) => x), y = p.every((x) => !x);
+      d.checked = v, d.indeterminate = !v && !y;
+    };
+    d.addEventListener("change", () => {
+      const p = d.checked;
+      for (const v of b.keys())
+        b.set(v, p);
+      h(), q();
+    }), e.appendChild(a);
+    const f = document.createElement("div");
+    f.className = "tbw-filter-values";
+    const g = document.createElement("div");
+    g.className = "tbw-filter-values-spacer", f.appendChild(g);
+    const m = document.createElement("div");
+    m.className = "tbw-filter-values-content", f.appendChild(m);
+    const b = /* @__PURE__ */ new Map();
+    n.forEach((p) => {
+      const v = p == null ? "__null__" : String(p);
+      b.set(v, !o.has(p));
+    }), h();
+    let S = [];
+    const R = (p, v) => {
+      const y = p == null ? "(Blank)" : String(p), x = p == null ? "__null__" : String(p), w = document.createElement("label");
+      w.className = "tbw-filter-value-item", w.style.position = "absolute", w.style.top = `${v * E.LIST_ITEM_HEIGHT}px`, w.style.left = "0", w.style.right = "0", w.style.height = `${E.LIST_ITEM_HEIGHT}px`, w.style.boxSizing = "border-box";
+      const k = document.createElement("input");
+      k.type = "checkbox", k.className = "tbw-filter-checkbox", k.checked = b.get(x) ?? !0, k.dataset.value = x, k.addEventListener("change", () => {
+        b.set(x, k.checked), h();
+      });
+      const Y = document.createElement("span");
+      return Y.textContent = y, w.appendChild(k), w.appendChild(Y), w;
+    }, q = () => {
+      const p = S.length, v = f.clientHeight, y = f.scrollTop;
+      if (g.style.height = `${p * E.LIST_ITEM_HEIGHT}px`, Le(p, E.LIST_BYPASS_THRESHOLD / 3)) {
+        m.innerHTML = "", m.style.transform = "translateY(0px)", S.forEach((w, k) => {
+          m.appendChild(R(w, k));
+        });
+        return;
+      }
+      const x = Te({
+        totalRows: p,
+        viewportHeight: v,
+        scrollTop: y,
+        rowHeight: E.LIST_ITEM_HEIGHT,
+        overscan: E.LIST_OVERSCAN
+      });
+      m.style.transform = `translateY(${x.offsetY}px)`, m.innerHTML = "";
+      for (let w = x.start; w < x.end; w++)
+        m.appendChild(R(S[w], w - x.start));
+    }, j = (p) => {
+      const v = p.toLowerCase();
+      if (S = n.filter((y) => {
+        const x = y == null ? "(Blank)" : String(y);
+        return !p || x.toLowerCase().includes(v);
+      }), S.length === 0) {
+        g.style.height = "0px", m.innerHTML = "";
+        const y = document.createElement("div");
+        y.className = "tbw-filter-no-match", y.textContent = "No matching values", m.appendChild(y);
+        return;
+      }
+      q();
+    };
+    f.addEventListener(
+      "scroll",
+      () => {
+        S.length > 0 && q();
+      },
+      { passive: !0 }
+    ), j(l.value), e.appendChild(f);
+    let U;
+    l.addEventListener("input", () => {
+      clearTimeout(U), U = setTimeout(() => {
+        this.searchText.set(r, l.value), j(l.value);
+      }, this.config.debounceMs ?? 150);
+    });
+    const I = document.createElement("div");
+    I.className = "tbw-filter-buttons";
+    const T = document.createElement("button");
+    T.className = "tbw-filter-apply-btn", T.textContent = "Apply", T.addEventListener("click", () => {
+      const p = [];
+      for (const [v, y] of b)
+        if (!y)
+          if (v === "__null__")
+            p.push(null);
+          else {
+            const x = n.find((w) => String(w) === v);
+            p.push(x !== void 0 ? x : v);
+          }
+      t.applySetFilter(p);
+    }), I.appendChild(T);
+    const L = document.createElement("button");
+    L.className = "tbw-filter-clear-btn", L.textContent = "Clear Filter", L.addEventListener("click", () => {
+      t.clearFilter();
+    }), I.appendChild(L), e.appendChild(I);
+  }
+  /**
+   * Apply a set filter (exclude values)
+   */
+  applySetFilter(e, t) {
+    this.excludedValues.set(e, new Set(t)), t.length === 0 ? this.filters.delete(e) : this.filters.set(e, {
+      field: e,
+      type: "set",
+      operator: "notIn",
+      value: t
+    }), this.cachedResult = null, this.cacheKey = null, this.emit("filter-change", {
+      filters: [...this.filters.values()],
+      filteredRowCount: 0
+    }), this.requestRender();
+  }
+  /**
+   * Apply a text filter
+   */
+  applyTextFilter(e, t, n, o) {
+    this.filters.set(e, {
+      field: e,
+      type: "text",
+      operator: t,
+      value: n,
+      valueTo: o
+    }), this.cachedResult = null, this.cacheKey = null, this.emit("filter-change", {
+      filters: [...this.filters.values()],
+      filteredRowCount: 0
+    }), this.requestRender();
+  }
+  // ===== Column State Hooks =====
+  /**
+   * Return filter state for a column if it has an active filter.
+   */
+  getColumnState(e) {
+    const t = this.filters.get(e);
+    if (t)
+      return {
+        filter: {
+          type: t.type,
+          operator: t.operator,
+          value: t.value,
+          valueTo: t.valueTo
+        }
+      };
+  }
+  /**
+   * Apply filter state from column state.
+   */
+  applyColumnState(e, t) {
+    if (!t.filter) {
+      this.filters.delete(e);
+      return;
+    }
+    const n = {
+      field: e,
+      type: t.filter.type,
+      operator: t.filter.operator,
+      value: t.filter.value,
+      valueTo: t.filter.valueTo
+    };
+    this.filters.set(e, n), this.cachedResult = null, this.cacheKey = null;
+  }
+  // ===== Styles =====
+  styles = `
+    .header-cell.filtered::before {
+      content: '';
+      position: absolute;
+      top: 4px;
+      right: 4px;
+      width: 6px;
+      height: 6px;
+      background: var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));
+      border-radius: 50%;
+    }
+    .tbw-filter-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      padding: 2px;
+      margin-left: 4px;
+      opacity: 0.4;
+      transition: opacity 0.15s;
+      color: inherit;
+      vertical-align: middle;
+    }
+    .tbw-filter-btn:hover,
+    .tbw-filter-btn.active {
+      opacity: 1;
+    }
+    .tbw-filter-btn.active {
+      color: var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));
+    }
+  `;
+}
+function Pe(i) {
+  if (!i.length) return [];
+  const e = /* @__PURE__ */ new Map(), t = [], n = (s, l) => {
+    if (!l.length) return;
+    const a = t[t.length - 1];
+    if (a && a.implicit && a.firstIndex + a.columns.length === s) {
+      a.columns.push(...l);
+      return;
+    }
+    t.push({
+      id: "__implicit__" + s,
+      label: void 0,
+      columns: l,
+      firstIndex: s,
+      implicit: !0
+    });
+  };
+  let o = [], r = 0;
+  return i.forEach((s, l) => {
+    const a = s.group;
+    if (!a) {
+      o.length === 0 && (r = l), o.push(s);
+      return;
+    }
+    o.length && (n(r, o.slice()), o = []);
+    const c = typeof a == "string" ? a : a.id;
+    let d = e.get(c);
+    d || (d = {
+      id: c,
+      label: typeof a == "string" ? void 0 : a.label,
+      columns: [],
+      firstIndex: l
+    }, e.set(c, d), t.push(d)), d.columns.push(s);
+  }), o.length && n(r, o), t.length === 1 && t[0].implicit && t[0].columns.length === i.length ? [] : t;
+}
+function De(i, e, t) {
+  if (!e.length || !i) return;
+  const n = /* @__PURE__ */ new Map();
+  for (const r of e)
+    for (const s of r.columns)
+      s?.field && n.set(s.field, r.id);
+  const o = Array.from(i.querySelectorAll(".cell[data-field]"));
+  o.forEach((r) => {
+    const s = r.getAttribute("data-field") || "", l = n.get(s);
+    l && (r.classList.add("grouped"), r.getAttribute("data-group") || r.setAttribute("data-group", l));
+  });
+  for (const r of e) {
+    const s = r.columns[r.columns.length - 1], l = o.find((a) => a.getAttribute("data-field") === s.field);
+    l && l.classList.add("group-end");
+  }
+}
+function Be(i, e) {
+  if (i.length === 0) return null;
+  const t = document.createElement("div");
+  t.className = "header-group-row", t.setAttribute("role", "row");
+  for (const n of i) {
+    const o = n.firstIndex != null ? n.firstIndex : e.findIndex((a) => n.columns.includes(a)), r = String(n.id).startsWith("__implicit__"), s = r ? "" : n.label || n.id, l = document.createElement("div");
+    l.className = "cell header-group-cell", r && l.classList.add("implicit-group"), l.setAttribute("data-group", String(n.id)), l.style.gridColumn = `${o + 1} / span ${n.columns.length}`, l.textContent = s, t.appendChild(l);
+  }
+  return t;
+}
+function He(i) {
+  return i.some((e) => e.group != null);
+}
+class Rt extends C {
+  name = "groupingColumns";
+  version = "1.0.0";
+  get defaultConfig() {
+    return {
+      enabled: !0,
+      showGroupBorders: !0
+    };
+  }
+  // ===== Internal State =====
+  groups = [];
+  isActive = !1;
+  // ===== Lifecycle =====
+  detach() {
+    this.groups = [], this.isActive = !1;
+  }
+  // ===== Static Detection =====
+  /**
+   * Auto-detect column groups from column configuration.
+   */
+  static detect(e, t) {
+    const n = t?.columns;
+    return Array.isArray(n) ? He(n) : !1;
+  }
+  // ===== Hooks =====
+  processColumns(e) {
+    if (!this.config.enabled)
+      return this.isActive = !1, this.groups = [], [...e];
+    const t = Pe(e);
+    return t.length === 0 ? (this.isActive = !1, this.groups = [], [...e]) : (this.isActive = !0, this.groups = t, [...e]);
+  }
+  afterRender() {
+    if (!this.isActive || this.groups.length === 0) {
+      const s = this.shadowRoot?.querySelector(".header")?.querySelector(".header-group-row");
+      s && s.remove();
+      return;
+    }
+    const e = this.shadowRoot?.querySelector(".header");
+    if (!e) return;
+    const t = e.querySelector(".header-group-row");
+    t && t.remove();
+    const n = Be(this.groups, this.columns);
+    if (n) {
+      const r = e.querySelector(".header-row");
+      r ? e.insertBefore(n, r) : e.appendChild(n);
+    }
+    const o = e.querySelector(".header-row");
+    o && De(o, this.groups, this.columns);
+  }
+  // ===== Public API =====
+  /**
+   * Check if column groups are active.
+   * @returns Whether grouping is active
+   */
+  isGroupingActive() {
+    return this.isActive;
+  }
+  /**
+   * Get the computed column groups.
+   * @returns Array of column groups
+   */
+  getGroups() {
+    return this.groups;
+  }
+  /**
+   * Get columns in a specific group.
+   * @param groupId - The group ID to find
+   * @returns Array of columns in the group
+   */
+  getGroupColumns(e) {
+    const t = this.groups.find((n) => n.id === e);
+    return t ? t.columns : [];
+  }
+  /**
+   * Refresh column groups (recompute from current columns).
+   */
+  refresh() {
+    this.requestRender();
+  }
+  // ===== Styles =====
+  styles = `
+    .header-group-row {
+      display: grid;
+      grid-auto-flow: column;
+      background: var(--tbw-grouping-columns-header-bg, var(--tbw-color-header-bg));
+      border-bottom: 1px solid var(--tbw-grouping-columns-border, var(--tbw-color-border));
+    }
+    .header-group-cell {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 4px 8px;
+      font-weight: 600;
+      font-size: 0.9em;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      border-right: 1px solid var(--tbw-grouping-columns-border, var(--tbw-color-border));
+    }
+    .header-group-cell:last-child {
+      border-right: none;
+    }
+    .header-row .cell.grouped {
+      border-top: none;
+    }
+    .header-row .cell.group-end {
+      border-right: 2px solid var(--tbw-grouping-columns-separator, var(--tbw-color-border-strong));
+    }
+  `;
+}
+function Oe({ rows: i, config: e, expanded: t }) {
+  const n = e.groupOn;
+  if (!e.enabled || typeof n != "function")
+    return [];
+  const o = { key: "__root__", value: null, depth: -1, rows: [], children: /* @__PURE__ */ new Map() };
+  if (i.forEach((l) => {
+    let a = n(l);
+    a == null || a === !1 ? a = ["__ungrouped__"] : Array.isArray(a) || (a = [a]);
+    let c = o;
+    a.forEach((d, u) => {
+      const h = d == null ? "∅" : String(d), f = c.key === "__root__" ? h : c.key + "||" + h;
+      let g = c.children.get(h);
+      g || (g = { key: f, value: d, depth: u, rows: [], children: /* @__PURE__ */ new Map(), parent: c }, c.children.set(h, g)), c = g;
+    }), c.rows.push(l);
+  }), o.children.size === 1 && o.children.has("__ungrouped__") && o.children.get("__ungrouped__").rows.length === i.length)
+    return [];
+  const r = [], s = (l) => {
+    if (l === o) {
+      l.children.forEach((c) => s(c));
+      return;
+    }
+    const a = t.has(l.key);
+    r.push({
+      kind: "group",
+      key: l.key,
+      value: l.value,
+      depth: l.depth,
+      rows: l.rows,
+      expanded: a
+    }), a && (l.children.size ? l.children.forEach((c) => s(c)) : l.rows.forEach((c) => r.push({ kind: "data", row: c, rowIndex: i.indexOf(c) })));
+  };
+  return s(o), r;
+}
+function We(i, e) {
+  const t = new Set(i);
+  return t.has(e) ? t.delete(e) : t.add(e), t;
+}
+function Ke(i) {
+  const e = /* @__PURE__ */ new Set();
+  for (const t of i)
+    t.kind === "group" && e.add(t.key);
+  return e;
+}
+function Ve() {
+  return /* @__PURE__ */ new Set();
+}
+function Ge(i) {
+  return i.kind !== "group" ? 0 : i.rows.length;
+}
+class kt extends C {
+  name = "groupingRows";
+  version = "1.0.0";
+  get defaultConfig() {
+    return {
+      enabled: !0,
+      defaultExpanded: !1,
+      showRowCount: !0,
+      indentWidth: 20,
+      aggregators: {}
+    };
+  }
+  // ===== Internal State =====
+  expandedKeys = /* @__PURE__ */ new Set();
+  flattenedRows = [];
+  isActive = !1;
+  // ===== Lifecycle =====
+  detach() {
+    this.expandedKeys.clear(), this.flattenedRows = [], this.isActive = !1;
+  }
+  // ===== Hooks =====
+  /**
+   * Auto-detect grouping configuration from grid config.
+   * Called by plugin system to determine if plugin should activate.
+   */
+  static detect(e, t) {
+    return typeof t?.groupOn == "function" || typeof t?.enableRowGrouping == "boolean";
+  }
+  processRows(e) {
+    const t = this.config;
+    if (!t.enabled || typeof t.groupOn != "function")
+      return this.isActive = !1, this.flattenedRows = [], [...e];
+    const n = Oe({
+      rows: e,
+      config: t,
+      expanded: this.expandedKeys
+    });
+    return n.length === 0 ? (this.isActive = !1, this.flattenedRows = [], [...e]) : (this.isActive = !0, this.flattenedRows = n, n.map((o) => o.kind === "group" ? {
+      __isGroupRow: !0,
+      __groupKey: o.key,
+      __groupValue: o.value,
+      __groupDepth: o.depth,
+      __groupRows: o.rows,
+      __groupExpanded: o.expanded,
+      __groupRowCount: Ge(o)
+    } : o.row));
+  }
+  onCellClick(e) {
+    const t = e.row;
+    if (t?.__isGroupRow && e.originalEvent.target?.closest(".group-toggle"))
+      return this.toggle(t.__groupKey), !0;
+  }
+  /**
+   * Render a row. Returns true if we handled the row (group row), false otherwise.
+   */
+  renderRow(e, t, n) {
+    if (!e?.__isGroupRow)
+      return !1;
+    const o = this.config;
+    if (o.groupRowRenderer) {
+      const l = () => {
+        this.toggle(e.__groupKey);
+      }, a = o.groupRowRenderer({
+        key: e.__groupKey,
+        value: e.__groupValue,
+        depth: e.__groupDepth,
+        rows: e.__groupRows,
+        expanded: e.__groupExpanded,
+        toggleExpand: l
+      });
+      if (a)
+        return t.className = "group-row", t.__isCustomRow = !0, t.setAttribute("data-group-depth", String(e.__groupDepth)), typeof a == "string" ? t.innerHTML = a : (t.innerHTML = "", t.appendChild(a)), !0;
+    }
+    const r = () => {
+      this.toggle(e.__groupKey);
+    };
+    return t.className = "group-row", t.__isCustomRow = !0, t.setAttribute("data-group-depth", String(e.__groupDepth)), t.setAttribute("role", "row"), t.setAttribute("aria-expanded", String(e.__groupExpanded)), t.style.paddingLeft = `${(e.__groupDepth || 0) * (o.indentWidth ?? 20)}px`, t.innerHTML = "", o.fullWidth !== !1 ? this.renderFullWidthGroupRow(e, t, r) : this.renderPerColumnGroupRow(e, t, r), !0;
+  }
+  afterRender() {
+  }
+  // ===== Private Rendering Helpers =====
+  renderFullWidthGroupRow(e, t, n) {
+    const o = this.config, r = document.createElement("div");
+    r.className = "cell group-full", r.style.gridColumn = "1 / -1", r.setAttribute("role", "gridcell");
+    const s = document.createElement("button");
+    s.type = "button", s.className = "group-toggle", s.setAttribute("aria-label", e.__groupExpanded ? "Collapse group" : "Expand group"), s.textContent = e.__groupExpanded ? "▾" : "▸", s.addEventListener("click", (c) => {
+      c.stopPropagation(), n();
+    }), r.appendChild(s);
+    const l = document.createElement("span");
+    l.className = "group-label";
+    const a = o.formatLabel ? o.formatLabel(e.__groupValue, e.__groupDepth || 0, e.__groupKey) : String(e.__groupValue);
+    if (l.textContent = a, r.appendChild(l), o.showRowCount !== !1) {
+      const c = document.createElement("span");
+      c.className = "group-count", c.textContent = `(${e.__groupRowCount ?? e.__groupRows?.length ?? 0})`, r.appendChild(c);
+    }
+    t.appendChild(r);
+  }
+  renderPerColumnGroupRow(e, t, n) {
+    const o = this.config, r = o.aggregators ?? {}, s = this.columns, l = e.__groupRows ?? [];
+    this.grid;
+    const c = this.shadowRoot?.querySelector(".body")?.style.gridTemplateColumns || "";
+    c && (t.style.display = "grid", t.style.gridTemplateColumns = c), s.forEach((d, u) => {
+      const h = document.createElement("div");
+      if (h.className = "cell group-cell", h.setAttribute("data-col", String(u)), h.setAttribute("role", "gridcell"), u === 0) {
+        const f = document.createElement("button");
+        f.type = "button", f.className = "group-toggle", f.textContent = e.__groupExpanded ? "▾" : "▸", f.addEventListener("click", (b) => {
+          b.stopPropagation(), n();
+        }), h.appendChild(f);
+        const g = document.createElement("span"), m = r[d.field];
+        if (m) {
+          const b = X(m, l, d.field, d);
+          g.textContent = b != null ? String(b) : String(e.__groupValue);
+        } else {
+          const b = o.formatLabel ? o.formatLabel(e.__groupValue, e.__groupDepth || 0, e.__groupKey) : String(e.__groupValue);
+          g.textContent = b;
+        }
+        if (h.appendChild(g), o.showRowCount !== !1) {
+          const b = document.createElement("span");
+          b.className = "group-count", b.textContent = ` (${l.length})`, h.appendChild(b);
+        }
+      } else {
+        const f = r[d.field];
+        if (f) {
+          const g = X(f, l, d.field, d);
+          h.textContent = g != null ? String(g) : "";
+        } else
+          h.textContent = "";
+      }
+      t.appendChild(h);
+    });
+  }
+  // ===== Public API =====
+  /**
+   * Expand all groups.
+   */
+  expandAll() {
+    this.expandedKeys = Ke(this.flattenedRows), this.requestRender();
+  }
+  /**
+   * Collapse all groups.
+   */
+  collapseAll() {
+    this.expandedKeys = Ve(), this.requestRender();
+  }
+  /**
+   * Toggle expansion of a specific group.
+   * @param key - The group key to toggle
+   */
+  toggle(e) {
+    this.expandedKeys = We(this.expandedKeys, e);
+    const t = this.flattenedRows.find((n) => n.kind === "group" && n.key === e);
+    this.emit("group-toggle", {
+      key: e,
+      expanded: this.expandedKeys.has(e),
+      value: t?.value,
+      depth: t?.depth ?? 0
+    }), this.requestRender();
+  }
+  /**
+   * Check if a specific group is expanded.
+   * @param key - The group key to check
+   * @returns Whether the group is expanded
+   */
+  isExpanded(e) {
+    return this.expandedKeys.has(e);
+  }
+  /**
+   * Expand a specific group.
+   * @param key - The group key to expand
+   */
+  expand(e) {
+    this.expandedKeys.has(e) || (this.expandedKeys = /* @__PURE__ */ new Set([...this.expandedKeys, e]), this.requestRender());
+  }
+  /**
+   * Collapse a specific group.
+   * @param key - The group key to collapse
+   */
+  collapse(e) {
+    if (this.expandedKeys.has(e)) {
+      const t = new Set(this.expandedKeys);
+      t.delete(e), this.expandedKeys = t, this.requestRender();
+    }
+  }
+  /**
+   * Get the current group state.
+   * @returns Group state information
+   */
+  getGroupState() {
+    const e = this.flattenedRows.filter((t) => t.kind === "group");
+    return {
+      isActive: this.isActive,
+      expandedCount: this.expandedKeys.size,
+      totalGroups: e.length,
+      expandedKeys: [...this.expandedKeys]
+    };
+  }
+  /**
+   * Get the total count of visible rows (including group headers).
+   * @returns Number of visible rows
+   */
+  getRowCount() {
+    return this.flattenedRows.length;
+  }
+  /**
+   * Refresh the grouped row model.
+   * Call this after modifying groupOn or other config options.
+   */
+  refreshGroups() {
+    this.requestRender();
+  }
+  /**
+   * Get current expanded group keys.
+   * @returns Array of expanded group keys
+   */
+  getExpandedGroups() {
+    return [...this.expandedKeys];
+  }
+  /**
+   * Get the flattened row model.
+   * @returns Array of render rows (groups + data rows)
+   */
+  getFlattenedRows() {
+    return this.flattenedRows;
+  }
+  /**
+   * Check if grouping is currently active.
+   * @returns Whether grouping is active
+   */
+  isGroupingActive() {
+    return this.isActive;
+  }
+  /**
+   * Set the groupOn function dynamically.
+   * @param fn - The groupOn function or undefined to disable
+   */
+  setGroupOn(e) {
+    this.config.groupOn = e, this.requestRender();
+  }
+  // ===== Styles =====
+  styles = `
+    .group-row {
+      background: var(--tbw-grouping-rows-bg, var(--tbw-color-panel-bg));
+      font-weight: 500;
+    }
+    .group-row:hover {
+      background: var(--tbw-grouping-rows-bg-hover, var(--tbw-color-row-hover));
+    }
+    .group-toggle {
+      cursor: pointer;
+      user-select: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      margin-right: 4px;
+      font-size: 10px;
+    }
+    .group-toggle:hover {
+      background: var(--tbw-grouping-rows-toggle-hover, var(--tbw-color-row-hover));
+      border-radius: 2px;
+    }
+    .group-label {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .group-count {
+      color: var(--tbw-grouping-rows-count-color, var(--tbw-color-fg-muted));
+      font-size: 0.85em;
+      font-weight: normal;
+    }
+    [data-group-depth="0"] .group-label { padding-left: 0; }
+    [data-group-depth="1"] .group-label { padding-left: 20px; }
+    [data-group-depth="2"] .group-label { padding-left: 40px; }
+    [data-group-depth="3"] .group-label { padding-left: 60px; }
+    [data-group-depth="4"] .group-label { padding-left: 80px; }
+  `;
+}
+function H(i, e) {
+  const t = new Set(i);
+  return t.has(e) ? t.delete(e) : t.add(e), t;
+}
+function ze(i, e) {
+  const t = new Set(i);
+  return t.add(e), t;
+}
+function $e(i, e) {
+  const t = new Set(i);
+  return t.delete(e), t;
+}
+function je(i, e) {
+  return i.has(e);
+}
+function Ue(i, e, t, n) {
+  const o = document.createElement("div");
+  o.className = "master-detail-row", o.setAttribute("data-detail-for", String(e)), o.setAttribute("role", "row");
+  const r = document.createElement("div");
+  r.className = "master-detail-cell", r.setAttribute("role", "cell"), r.style.gridColumn = `1 / ${n + 1}`;
+  const s = t(i, e);
+  return typeof s == "string" ? r.innerHTML = s : s instanceof HTMLElement && r.appendChild(s), o.appendChild(r), o;
+}
+class Et extends C {
+  name = "masterDetail";
+  version = "1.0.0";
+  get defaultConfig() {
+    return {
+      enabled: !0,
+      detailHeight: "auto",
+      expandOnRowClick: !1,
+      collapseOnClickOutside: !1,
+      showExpandColumn: !0
+    };
+  }
+  // ===== Internal State =====
+  expandedRows = /* @__PURE__ */ new Set();
+  detailElements = /* @__PURE__ */ new Map();
+  // ===== Lifecycle =====
+  detach() {
+    this.expandedRows.clear(), this.detailElements.clear();
+  }
+  // ===== Hooks =====
+  processColumns(e) {
+    if (!this.config.detailRenderer)
+      return [...e];
+    const t = [...e];
+    if (t.length > 0) {
+      const n = { ...t[0] }, o = n.viewRenderer;
+      n.viewRenderer = (r) => {
+        const { value: s, row: l } = r, a = this.expandedRows.has(l), c = document.createElement("span");
+        c.className = "master-detail-cell-wrapper";
+        const d = document.createElement("span");
+        d.className = "master-detail-toggle", d.textContent = a ? "▼" : "▶", d.setAttribute("aria-expanded", String(a)), d.setAttribute("aria-label", a ? "Collapse details" : "Expand details"), d.addEventListener("click", (h) => {
+          h.stopPropagation();
+          const f = this.rows.indexOf(l);
+          this.expandedRows = H(this.expandedRows, l), this.emit("detail-expand", {
+            rowIndex: f,
+            row: l,
+            expanded: this.expandedRows.has(l)
+          }), this.requestRender();
+        }), c.appendChild(d);
+        const u = document.createElement("span");
+        if (o) {
+          const h = o(r);
+          h instanceof Node ? u.appendChild(h) : u.textContent = String(h ?? s ?? "");
+        } else
+          u.textContent = String(s ?? "");
+        return c.appendChild(u), c;
+      }, t[0] = n;
+    }
+    return t;
+  }
+  onRowClick(e) {
+    if (!(!this.config.expandOnRowClick || !this.config.detailRenderer))
+      return this.expandedRows = H(this.expandedRows, e.row), this.emit("detail-expand", {
+        rowIndex: e.rowIndex,
+        row: e.row,
+        expanded: this.expandedRows.has(e.row)
+      }), this.requestRender(), !1;
+  }
+  afterRender() {
+    if (!this.config.detailRenderer) return;
+    const e = this.shadowRoot?.querySelector(".rows");
+    if (!e) return;
+    e.querySelectorAll(".master-detail-row").forEach((o) => o.remove()), this.detailElements.clear();
+    const t = e.querySelectorAll(".data-grid-row"), n = this.columns.length;
+    for (const o of t) {
+      const r = o.querySelector(".cell[data-row]"), s = r ? parseInt(r.getAttribute("data-row") ?? "-1", 10) : -1;
+      if (s < 0) continue;
+      const l = this.rows[s];
+      if (!l || !this.expandedRows.has(l)) continue;
+      const a = Ue(l, s, this.config.detailRenderer, n);
+      typeof this.config.detailHeight == "number" && (a.style.height = `${this.config.detailHeight}px`), o.appendChild(a), this.detailElements.set(l, a);
+    }
+  }
+  // ===== Public API =====
+  /**
+   * Expand the detail row at the given index.
+   * @param rowIndex - Index of the row to expand
+   */
+  expand(e) {
+    const t = this.rows[e];
+    t && (this.expandedRows = ze(this.expandedRows, t), this.requestRender());
+  }
+  /**
+   * Collapse the detail row at the given index.
+   * @param rowIndex - Index of the row to collapse
+   */
+  collapse(e) {
+    const t = this.rows[e];
+    t && (this.expandedRows = $e(this.expandedRows, t), this.requestRender());
+  }
+  /**
+   * Toggle the detail row at the given index.
+   * @param rowIndex - Index of the row to toggle
+   */
+  toggle(e) {
+    const t = this.rows[e];
+    t && (this.expandedRows = H(this.expandedRows, t), this.requestRender());
+  }
+  /**
+   * Check if the detail row at the given index is expanded.
+   * @param rowIndex - Index of the row to check
+   * @returns Whether the detail row is expanded
+   */
+  isExpanded(e) {
+    const t = this.rows[e];
+    return t ? je(this.expandedRows, t) : !1;
+  }
+  /**
+   * Expand all detail rows.
+   */
+  expandAll() {
+    for (const e of this.rows)
+      this.expandedRows.add(e);
+    this.requestRender();
+  }
+  /**
+   * Collapse all detail rows.
+   */
+  collapseAll() {
+    this.expandedRows.clear(), this.requestRender();
+  }
+  /**
+   * Get the indices of all expanded rows.
+   * @returns Array of row indices that are expanded
+   */
+  getExpandedRows() {
+    const e = [];
+    for (const t of this.expandedRows) {
+      const n = this.rows.indexOf(t);
+      n >= 0 && e.push(n);
+    }
+    return e;
+  }
+  /**
+   * Get the detail element for a specific row.
+   * @param rowIndex - Index of the row
+   * @returns The detail HTMLElement or undefined
+   */
+  getDetailElement(e) {
+    const t = this.rows[e];
+    return t ? this.detailElements.get(t) : void 0;
+  }
+  // ===== Styles =====
+  styles = `
+    .master-detail-cell-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+    .master-detail-toggle {
+      cursor: pointer;
+      font-size: 10px;
+      opacity: 0.7;
+      user-select: none;
+    }
+    .master-detail-toggle:hover {
+      opacity: 1;
+    }
+    .master-detail-row {
+      grid-column: 1 / -1;
+      display: grid;
+      background: var(--tbw-master-detail-bg, var(--tbw-color-row-alt));
+      border-bottom: 1px solid var(--tbw-master-detail-border, var(--tbw-color-border));
+    }
+    .master-detail-cell {
+      padding: 16px;
+      overflow: auto;
+    }
+  `;
+}
+function Ye(i, e, t) {
+  return e.length ? [...i].sort((n, o) => {
+    for (const r of e) {
+      const l = t.find((u) => u.field === r.field)?.sortComparator ?? Xe, a = n[r.field], c = o[r.field], d = l(a, c, n, o);
+      if (d !== 0)
+        return r.direction === "asc" ? d : -d;
+    }
+    return 0;
+  }) : [...i];
+}
+function Xe(i, e) {
+  return i == null && e == null ? 0 : i == null ? 1 : e == null ? -1 : typeof i == "number" && typeof e == "number" ? i - e : i instanceof Date && e instanceof Date ? i.getTime() - e.getTime() : typeof i == "boolean" && typeof e == "boolean" ? i === e ? 0 : i ? -1 : 1 : String(i).localeCompare(String(e));
+}
+function Je(i, e, t, n) {
+  const o = i.find((r) => r.field === e);
+  return t ? o ? o.direction === "asc" ? i.map((r) => r.field === e ? { ...r, direction: "desc" } : r) : i.filter((r) => r.field !== e) : i.length < n ? [...i, { field: e, direction: "asc" }] : i : o?.direction === "asc" ? [{ field: e, direction: "desc" }] : o?.direction === "desc" ? [] : [{ field: e, direction: "asc" }];
+}
+function le(i, e) {
+  const t = i.findIndex((n) => n.field === e);
+  return t >= 0 ? t + 1 : void 0;
+}
+function ae(i, e) {
+  return i.find((t) => t.field === e)?.direction;
+}
+class At extends C {
+  name = "multiSort";
+  version = "1.0.0";
+  get defaultConfig() {
+    return {
+      enabled: !0,
+      maxSortColumns: 3,
+      showSortIndex: !0
+    };
+  }
+  // ===== Internal State =====
+  sortModel = [];
+  // ===== Lifecycle =====
+  detach() {
+    this.sortModel = [];
+  }
+  // ===== Hooks =====
+  processRows(e) {
+    return this.sortModel.length === 0 ? [...e] : Ye([...e], this.sortModel, [...this.columns]);
+  }
+  onHeaderClick(e) {
+    if (!this.columns.find((r) => r.field === e.field)?.sortable) return !1;
+    const n = e.originalEvent.shiftKey, o = this.config.maxSortColumns ?? 3;
+    return this.sortModel = Je(this.sortModel, e.field, n, o), this.emit("sort-change", { sortModel: [...this.sortModel] }), this.requestRender(), !0;
+  }
+  afterRender() {
+    const e = this.shadowRoot;
+    if (!e) return;
+    const t = this.config.showSortIndex !== !1;
+    e.querySelectorAll(".header-row .cell[data-field]").forEach((o) => {
+      const r = o.getAttribute("data-field");
+      if (!r) return;
+      const s = le(this.sortModel, r), l = ae(this.sortModel, r);
+      if (o.querySelector(".sort-index")?.remove(), l) {
+        o.querySelector('[part~="sort-indicator"], .sort-indicator')?.remove(), o.setAttribute("data-sort", l);
+        const d = document.createElement("span");
+        if (d.className = "sort-indicator", d.style.marginLeft = "4px", d.style.opacity = "0.8", d.textContent = l === "asc" ? "▲" : "▼", o.appendChild(d), t && this.sortModel.length > 1 && s !== void 0) {
+          const u = document.createElement("span");
+          u.className = "sort-index", u.textContent = String(s), o.appendChild(u);
+        }
+      } else
+        o.removeAttribute("data-sort");
+    });
+  }
+  // ===== Public API =====
+  /**
+   * Get the current sort model.
+   * @returns Copy of the current sort model
+   */
+  getSortModel() {
+    return [...this.sortModel];
+  }
+  /**
+   * Set the sort model programmatically.
+   * @param model - New sort model to apply
+   */
+  setSortModel(e) {
+    this.sortModel = [...e], this.emit("sort-change", { sortModel: [...e] }), this.requestRender();
+  }
+  /**
+   * Clear all sorting.
+   */
+  clearSort() {
+    this.sortModel = [], this.emit("sort-change", { sortModel: [] }), this.requestRender();
+  }
+  /**
+   * Get the sort index (1-based) for a specific field.
+   * @param field - Field to check
+   * @returns 1-based index or undefined if not sorted
+   */
+  getSortIndex(e) {
+    return le(this.sortModel, e);
+  }
+  /**
+   * Get the sort direction for a specific field.
+   * @param field - Field to check
+   * @returns Sort direction or undefined if not sorted
+   */
+  getSortDirection(e) {
+    return ae(this.sortModel, e);
+  }
+  // ===== Column State Hooks =====
+  /**
+   * Return sort state for a column if it's in the sort model.
+   */
+  getColumnState(e) {
+    const t = this.sortModel.findIndex((o) => o.field === e);
+    return t === -1 ? void 0 : {
+      sort: {
+        direction: this.sortModel[t].direction,
+        priority: t
+      }
+    };
+  }
+  /**
+   * Apply sort state from column state.
+   * Rebuilds the sort model from all column states.
+   */
+  applyColumnState(e, t) {
+    if (!t.sort) {
+      this.sortModel = this.sortModel.filter((r) => r.field !== e);
+      return;
+    }
+    const n = this.sortModel.findIndex((r) => r.field === e), o = {
+      field: e,
+      direction: t.sort.direction
+    };
+    n !== -1 ? this.sortModel[n] = o : this.sortModel.splice(t.sort.priority, 0, o);
+  }
+  // ===== Styles =====
+  styles = `
+    .header-cell[data-sort="asc"]::after {
+      content: '↑';
+      margin-left: 4px;
+      opacity: 0.8;
+    }
+    .header-cell[data-sort="desc"]::after {
+      content: '↓';
+      margin-left: 4px;
+      opacity: 0.8;
+    }
+    .sort-index {
+      font-size: 10px;
+      background: var(--tbw-multi-sort-badge-bg, var(--tbw-color-panel-bg));
+      color: var(--tbw-multi-sort-badge-color, var(--tbw-color-fg));
+      border-radius: 50%;
+      width: 14px;
+      height: 14px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      margin-left: 2px;
+      font-weight: 600;
+    }
+  `;
+}
+function Qe(i) {
+  return i.filter((e) => e.sticky === "left");
+}
+function Ze(i) {
+  return i.filter((e) => e.sticky === "right");
+}
+function O(i) {
+  return i.some((e) => e.sticky === "left" || e.sticky === "right");
+}
+function de(i, e) {
+  const t = i.shadowRoot;
+  if (!t) return;
+  const n = Array.from(t.querySelectorAll(".header-row .cell"));
+  if (!n.length) return;
+  const o = /* @__PURE__ */ new Map();
+  e.forEach((l, a) => {
+    l.field && o.set(l.field, a);
+  });
+  let r = 0;
+  for (const l of e)
+    if (l.sticky === "left") {
+      const a = o.get(l.field), c = n.find((d) => d.getAttribute("data-field") === l.field);
+      c && (c.classList.add("sticky-left"), c.style.left = r + "px", a !== void 0 && t.querySelectorAll(`.data-grid-row .cell[data-col="${a}"]`).forEach((d) => {
+        d.classList.add("sticky-left"), d.style.left = r + "px";
+      }), r += c.offsetWidth);
+    }
+  let s = 0;
+  for (const l of [...e].reverse())
+    if (l.sticky === "right") {
+      const a = o.get(l.field), c = n.find((d) => d.getAttribute("data-field") === l.field);
+      c && (c.classList.add("sticky-right"), c.style.right = s + "px", a !== void 0 && t.querySelectorAll(`.data-grid-row .cell[data-col="${a}"]`).forEach((d) => {
+        d.classList.add("sticky-right"), d.style.right = s + "px";
+      }), s += c.offsetWidth);
+    }
+}
+function ce(i) {
+  const e = i.shadowRoot;
+  if (!e) return;
+  e.querySelectorAll(".sticky-left, .sticky-right").forEach((n) => {
+    n.classList.remove("sticky-left", "sticky-right"), n.style.left = "", n.style.right = "";
+  });
+}
+class _t extends C {
+  name = "pinnedColumns";
+  version = "1.0.0";
+  get defaultConfig() {
+    return {
+      enabled: !0
+    };
+  }
+  // ===== Internal State =====
+  isApplied = !1;
+  leftOffsets = /* @__PURE__ */ new Map();
+  rightOffsets = /* @__PURE__ */ new Map();
+  // ===== Lifecycle =====
+  detach() {
+    this.leftOffsets.clear(), this.rightOffsets.clear(), this.isApplied = !1;
+  }
+  // ===== Detection =====
+  /**
+   * Auto-detect sticky columns from column configuration.
+   */
+  static detect(e, t) {
+    const n = t?.columns;
+    return Array.isArray(n) ? O(n) : !1;
+  }
+  // ===== Hooks =====
+  processColumns(e) {
+    return this.config.enabled ? (this.isApplied = O([...e]), [...e]) : (this.isApplied = !1, [...e]);
+  }
+  afterRender() {
+    if (!this.config.enabled || !this.isApplied)
+      return;
+    const e = this.grid, t = [...this.columns];
+    if (!O(t)) {
+      ce(e), this.isApplied = !1;
+      return;
+    }
+    queueMicrotask(() => {
+      de(e, t);
+    });
+  }
+  // ===== Public API =====
+  /**
+   * Re-apply sticky offsets (e.g., after column resize).
+   */
+  refreshStickyOffsets() {
+    const e = [...this.columns];
+    de(this.grid, e);
+  }
+  /**
+   * Get columns pinned to the left.
+   */
+  getLeftPinnedColumns() {
+    const e = [...this.columns];
+    return Qe(e);
+  }
+  /**
+   * Get columns pinned to the right.
+   */
+  getRightPinnedColumns() {
+    const e = [...this.columns];
+    return Ze(e);
+  }
+  /**
+   * Clear all sticky positioning.
+   */
+  clearStickyPositions() {
+    ce(this.grid);
+  }
+}
+function W(i, e) {
+  const t = document.createElement("div");
+  t.className = "tbw-pinned-rows", t.setAttribute("role", "status"), t.setAttribute("aria-live", "polite");
+  const n = document.createElement("div");
+  n.className = "tbw-pinned-rows-left";
+  const o = document.createElement("div");
+  o.className = "tbw-pinned-rows-center";
+  const r = document.createElement("div");
+  if (r.className = "tbw-pinned-rows-right", i.showRowCount !== !1) {
+    const s = document.createElement("span");
+    s.className = "tbw-status-panel tbw-status-panel-row-count", s.textContent = `Total: ${e.totalRows} rows`, n.appendChild(s);
+  }
+  if (i.showFilteredCount && e.filteredRows !== e.totalRows) {
+    const s = document.createElement("span");
+    s.className = "tbw-status-panel tbw-status-panel-filtered-count", s.textContent = `Filtered: ${e.filteredRows}`, n.appendChild(s);
+  }
+  if (i.showSelectedCount && e.selectedRows > 0) {
+    const s = document.createElement("span");
+    s.className = "tbw-status-panel tbw-status-panel-selected-count", s.textContent = `Selected: ${e.selectedRows}`, r.appendChild(s);
+  }
+  if (i.customPanels)
+    for (const s of i.customPanels) {
+      const l = et(s, e);
+      switch (s.position) {
+        case "left":
+          n.appendChild(l);
+          break;
+        case "center":
+          o.appendChild(l);
+          break;
+        case "right":
+          r.appendChild(l);
+          break;
+      }
+    }
+  return t.appendChild(n), t.appendChild(o), t.appendChild(r), t;
+}
+function ue(i) {
+  const e = document.createElement("div");
+  return e.className = `tbw-aggregation-rows tbw-aggregation-rows-${i}`, e.setAttribute("role", "rowgroup"), e;
+}
+function he(i, e, t, n) {
+  i.innerHTML = "";
+  for (const o of e) {
+    const r = document.createElement("div");
+    if (r.className = "tbw-aggregation-row", r.setAttribute("role", "row"), o.id && r.setAttribute("data-aggregation-id", o.id), o.fullWidth) {
+      const s = document.createElement("div");
+      s.className = "tbw-aggregation-cell tbw-aggregation-cell-full", s.style.gridColumn = "1 / -1", s.textContent = o.label || "", r.appendChild(s);
+    } else
+      for (const s of t) {
+        const l = document.createElement("div");
+        l.className = "tbw-aggregation-cell", l.setAttribute("data-field", s.field);
+        let a;
+        const c = o.aggregators?.[s.field];
+        if (c) {
+          const d = xe(c);
+          d && (a = d(n, s.field, s));
+        } else if (o.cells && Object.prototype.hasOwnProperty.call(o.cells, s.field)) {
+          const d = o.cells[s.field];
+          typeof d == "function" ? a = d(n, s.field, s) : a = d;
+        }
+        l.textContent = a != null ? String(a) : "", r.appendChild(l);
+      }
+    i.appendChild(r);
+  }
+}
+function et(i, e) {
+  const t = document.createElement("div");
+  t.className = "tbw-status-panel tbw-status-panel-custom", t.id = `status-panel-${i.id}`;
+  const n = i.render(e);
+  return typeof n == "string" ? t.innerHTML = n : t.appendChild(n), t;
+}
+function fe(i, e, t, n, o) {
+  return {
+    totalRows: i.length,
+    filteredRows: o?.cachedResult?.length ?? i.length,
+    selectedRows: n?.selected?.size ?? 0,
+    columns: e,
+    rows: i,
+    grid: t
+  };
+}
+class It extends C {
+  name = "pinnedRows";
+  version = "1.0.0";
+  get defaultConfig() {
+    return {
+      enabled: !0,
+      position: "bottom",
+      showRowCount: !0,
+      showSelectedCount: !0,
+      showFilteredCount: !0
+    };
+  }
+  // ===== Internal State =====
+  infoBarElement = null;
+  topAggregationContainer = null;
+  bottomAggregationContainer = null;
+  footerWrapper = null;
+  // ===== Lifecycle =====
+  detach() {
+    this.infoBarElement && (this.infoBarElement.remove(), this.infoBarElement = null), this.topAggregationContainer && (this.topAggregationContainer.remove(), this.topAggregationContainer = null), this.bottomAggregationContainer && (this.bottomAggregationContainer.remove(), this.bottomAggregationContainer = null), this.footerWrapper && (this.footerWrapper.remove(), this.footerWrapper = null);
+  }
+  // ===== Hooks =====
+  afterRender() {
+    if (!this.config.enabled) {
+      this.cleanup();
+      return;
+    }
+    const e = this.shadowRoot;
+    if (!e) return;
+    const t = e.querySelector(".tbw-scroll-area") ?? e.querySelector(".tbw-grid-content") ?? e.children[0];
+    if (!t) return;
+    const n = this.getSelectionState(), o = this.getFilterState(), r = fe(
+      this.rows,
+      this.columns,
+      this.grid,
+      n,
+      o
+    ), s = this.config.aggregationRows || [], l = s.filter((h) => h.position === "top"), a = s.filter((h) => h.position !== "top");
+    if (l.length > 0) {
+      if (!this.topAggregationContainer) {
+        this.topAggregationContainer = ue("top");
+        const h = e.querySelector(".header");
+        h && h.nextSibling ? t.insertBefore(this.topAggregationContainer, h.nextSibling) : t.appendChild(this.topAggregationContainer);
+      }
+      he(
+        this.topAggregationContainer,
+        l,
+        this.visibleColumns,
+        this.rows
+      );
+    } else this.topAggregationContainer && (this.topAggregationContainer.remove(), this.topAggregationContainer = null);
+    const c = this.config.showRowCount !== !1 || this.config.showSelectedCount && r.selectedRows > 0 || this.config.showFilteredCount && r.filteredRows !== r.totalRows || this.config.customPanels && this.config.customPanels.length > 0, d = c && this.config.position !== "top", u = a.length > 0 || d;
+    if (c && this.config.position === "top")
+      if (!this.infoBarElement)
+        this.infoBarElement = W(this.config, r), t.insertBefore(this.infoBarElement, t.firstChild);
+      else {
+        const h = W(this.config, r);
+        this.infoBarElement.replaceWith(h), this.infoBarElement = h;
+      }
+    else this.config.position === "top" && this.infoBarElement && (this.infoBarElement.remove(), this.infoBarElement = null);
+    u ? (this.footerWrapper || (this.footerWrapper = document.createElement("div"), this.footerWrapper.className = "tbw-footer", t.appendChild(this.footerWrapper)), this.footerWrapper.innerHTML = "", a.length > 0 && (this.bottomAggregationContainer || (this.bottomAggregationContainer = ue("bottom")), this.footerWrapper.appendChild(this.bottomAggregationContainer), he(
+      this.bottomAggregationContainer,
+      a,
+      this.visibleColumns,
+      this.rows
+    )), d && (this.infoBarElement = W(this.config, r), this.footerWrapper.appendChild(this.infoBarElement))) : this.cleanupFooter();
+  }
+  // ===== Private Methods =====
+  cleanup() {
+    this.infoBarElement && (this.infoBarElement.remove(), this.infoBarElement = null), this.topAggregationContainer && (this.topAggregationContainer.remove(), this.topAggregationContainer = null), this.bottomAggregationContainer && (this.bottomAggregationContainer.remove(), this.bottomAggregationContainer = null), this.footerWrapper && (this.footerWrapper.remove(), this.footerWrapper = null);
+  }
+  cleanupFooter() {
+    this.footerWrapper && (this.footerWrapper.remove(), this.footerWrapper = null), this.bottomAggregationContainer && (this.bottomAggregationContainer.remove(), this.bottomAggregationContainer = null), this.infoBarElement && this.config.position !== "top" && (this.infoBarElement.remove(), this.infoBarElement = null);
+  }
+  getSelectionState() {
+    try {
+      return this.grid?.getPluginState?.("selection") ?? null;
+    } catch {
+      return null;
+    }
+  }
+  getFilterState() {
+    try {
+      return this.grid?.getPluginState?.("filtering") ?? null;
+    } catch {
+      return null;
+    }
+  }
+  // ===== Public API =====
+  /**
+   * Refresh the status bar to reflect current grid state.
+   */
+  refresh() {
+    this.requestRender();
+  }
+  /**
+   * Get the current status bar context.
+   * @returns The context with row counts and other info
+   */
+  getContext() {
+    const e = this.getSelectionState(), t = this.getFilterState();
+    return fe(
+      this.rows,
+      this.columns,
+      this.grid,
+      e,
+      t
+    );
+  }
+  /**
+   * Add a custom panel to the info bar.
+   * @param panel - The panel configuration to add
+   */
+  addPanel(e) {
+    this.config.customPanels || (this.config.customPanels = []), this.config.customPanels.push(e), this.requestRender();
+  }
+  /**
+   * Remove a custom panel by ID.
+   * @param id - The panel ID to remove
+   */
+  removePanel(e) {
+    this.config.customPanels && (this.config.customPanels = this.config.customPanels.filter((t) => t.id !== e), this.requestRender());
+  }
+  /**
+   * Add an aggregation row.
+   * @param row - The aggregation row configuration
+   */
+  addAggregationRow(e) {
+    this.config.aggregationRows || (this.config.aggregationRows = []), this.config.aggregationRows.push(e), this.requestRender();
+  }
+  /**
+   * Remove an aggregation row by ID.
+   * @param id - The aggregation row ID to remove
+   */
+  removeAggregationRow(e) {
+    this.config.aggregationRows && (this.config.aggregationRows = this.config.aggregationRows.filter((t) => t.id !== e), this.requestRender());
+  }
+  // ===== Styles =====
+  styles = `
+    .tbw-footer {
+      position: sticky;
+      bottom: 0;
+      z-index: var(--tbw-z-layer-pinned-rows, 20);
+      background: var(--tbw-color-panel-bg);
+    }
+
+    .tbw-pinned-rows {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8px 12px;
+      background: var(--tbw-pinned-rows-bg, var(--tbw-color-panel-bg));
+      border-top: 1px solid var(--tbw-pinned-rows-border, var(--tbw-color-border));
+      font-size: 12px;
+      color: var(--tbw-pinned-rows-color, var(--tbw-color-fg-muted));
+      min-height: 32px;
+      box-sizing: border-box;
+      min-width: fit-content;
+    }
+    .tbw-pinned-rows-left,
+    .tbw-pinned-rows-center,
+    .tbw-pinned-rows-right {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+    .tbw-pinned-rows-left {
+      justify-content: flex-start;
+    }
+    .tbw-pinned-rows-center {
+      justify-content: center;
+      flex: 1;
+    }
+    .tbw-pinned-rows-right {
+      justify-content: flex-end;
+    }
+    .tbw-status-panel {
+      white-space: nowrap;
+    }
+
+    .tbw-aggregation-rows {
+      min-width: fit-content;
+      background: var(--tbw-aggregation-bg, var(--tbw-color-header-bg));
+    }
+    .tbw-aggregation-rows-top {
+      border-bottom: 1px solid var(--tbw-aggregation-border, var(--tbw-color-border));
+    }
+    .tbw-aggregation-rows-bottom {
+      border-top: 1px solid var(--tbw-aggregation-border, var(--tbw-color-border));
+    }
+    .tbw-aggregation-row {
+      display: grid;
+      grid-template-columns: var(--tbw-column-template);
+      font-weight: var(--tbw-aggregation-font-weight, 600);
+    }
+    .tbw-aggregation-cell {
+      padding: var(--tbw-cell-padding, 2px 8px);
+      min-height: var(--tbw-row-height, 28px);
+      display: flex;
+      align-items: center;
+      border-right: 1px solid var(--tbw-color-border-cell);
+    }
+    .tbw-aggregation-cell:last-child {
+      border-right: 0;
+    }
+    .tbw-aggregation-cell-full {
+      grid-column: 1 / -1;
+      border-right: 0;
+    }
+  `;
+}
+function tt(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;
+}
+function nt(i) {
+  switch (i) {
+    case "sum":
+      return (e) => e.reduce((t, n) => t + n, 0);
+    case "avg":
+      return (e) => e.length ? e.reduce((t, n) => t + n, 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, n) => t + n, 0);
+  }
+}
+function $(i, e) {
+  return [...i, e].join("|");
+}
+function ot(i, e) {
+  const t = e.rowGroupFields ?? [], n = e.columnGroupFields ?? [], o = e.valueFields ?? [], r = rt(i, n), s = it(i, t), l = st(s, n, r, o, 0), a = lt(l, r, o), c = Object.values(a).reduce((d, u) => d + u, 0);
+  return {
+    rows: l,
+    columnKeys: r,
+    totals: a,
+    grandTotal: c
+  };
+}
+function rt(i, e) {
+  if (e.length === 0) return ["value"];
+  const t = /* @__PURE__ */ new Set();
+  for (const n of i) {
+    const o = e.map((r) => String(n[r] ?? "")).join("|");
+    t.add(o);
+  }
+  return [...t].sort();
+}
+function it(i, e) {
+  const t = /* @__PURE__ */ new Map();
+  for (const n of i) {
+    const o = e.map((s) => String(n[s] ?? "")).join("|");
+    t.has(o) || t.set(o, []);
+    const r = t.get(o);
+    r && r.push(n);
+  }
+  return t;
+}
+function st(i, e, t, n, o) {
+  const r = [];
+  for (const [s, l] of i) {
+    const a = {};
+    let c = 0;
+    for (const d of t)
+      for (const u of n) {
+        const f = (e.length > 0 ? l.filter((S) => e.map((R) => String(S[R] ?? "")).join("|") === d) : l).map((S) => Number(S[u.field]) || 0), g = nt(u.aggFunc), m = f.length > 0 ? g(f) : null, b = $([d], u.field);
+        a[b] = m, m !== null && (c += m);
+      }
+    r.push({
+      rowKey: s,
+      rowLabel: s || "(blank)",
+      depth: o,
+      values: a,
+      total: c,
+      isGroup: !1
+    });
+  }
+  return r;
+}
+function lt(i, e, t) {
+  const n = {};
+  for (const o of e)
+    for (const r of t) {
+      const s = $([o], r.field);
+      n[s] = i.reduce((l, a) => l + (a.values[s] ?? 0), 0);
+    }
+  return n;
+}
+function at(i) {
+  const e = [];
+  function t(n) {
+    if (e.push(n), n.children)
+      for (const o of n.children)
+        t(o);
+  }
+  for (const n of i)
+    t(n);
+  return e;
+}
+class Tt extends C {
+  name = "pivot";
+  version = "1.0.0";
+  get defaultConfig() {
+    return {
+      enabled: !0,
+      showTotals: !0,
+      showGrandTotal: !0
+    };
+  }
+  // ===== Internal State =====
+  isActive = !1;
+  pivotResult = null;
+  columnHeaders = [];
+  rowHeaders = [];
+  // ===== Lifecycle =====
+  detach() {
+    this.isActive = !1, this.pivotResult = null, this.columnHeaders = [], this.rowHeaders = [];
+  }
+  // ===== Hooks =====
+  processRows(e) {
+    if (!this.config.enabled || !this.isActive)
+      return [...e];
+    const t = tt(this.config);
+    return t.length > 0 ? (this.warn(`Config errors: ${t.join(", ")}`), [...e]) : (this.pivotResult = ot(e, this.config), at(this.pivotResult.rows).map((n) => ({
+      __pivotRowKey: n.rowKey,
+      __pivotLabel: n.rowLabel,
+      __pivotDepth: n.depth,
+      __pivotIsGroup: n.isGroup,
+      __pivotTotal: n.total,
+      ...n.values
+    })));
+  }
+  processColumns(e) {
+    if (!this.config.enabled || !this.isActive || !this.pivotResult)
+      return [...e];
+    const t = [];
+    t.push({
+      field: "__pivotLabel",
+      header: this.config.rowGroupFields?.join(" / ") ?? "Group",
+      width: 200
+    });
+    for (const n of this.pivotResult.columnKeys)
+      for (const o of this.config.valueFields ?? []) {
+        const r = $([n], o.field);
+        t.push({
+          field: r,
+          header: `${n} - ${o.header || o.field} (${o.aggFunc})`,
+          width: 120,
+          type: "number"
+        });
+      }
+    return this.config.showTotals && t.push({
+      field: "__pivotTotal",
+      header: "Total",
+      width: 100,
+      type: "number"
+    }), t;
+  }
+  // ===== Public API =====
+  /**
+   * Enable pivot mode.
+   */
+  enablePivot() {
+    this.isActive = !0, this.requestRender();
+  }
+  /**
+   * Disable pivot mode and return to normal grid view.
+   */
+  disablePivot() {
+    this.isActive = !1, this.pivotResult = null, this.requestRender();
+  }
+  /**
+   * Check if pivot mode is currently active.
+   */
+  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();
+  }
+  // ===== 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)); }
+  `;
+}
+function dt(i) {
+  const e = i.meta ?? {}, t = e.sticky;
+  return t === "left" || t === "right" ? !1 : e.lockPosition !== !0 && e.suppressMovable !== !0;
+}
+function ge(i, e, t) {
+  if (e === t || e < 0 || e >= i.length || t < 0 || t > i.length) return i;
+  const n = [...i], [o] = n.splice(e, 1);
+  return n.splice(t, 0, o), n;
+}
+class Lt extends C {
+  name = "reorder";
+  version = "1.0.0";
+  get defaultConfig() {
+    return {
+      enabled: !0,
+      animation: !0,
+      animationDuration: 200
+    };
+  }
+  // ===== Internal State =====
+  isDragging = !1;
+  draggedField = null;
+  draggedIndex = null;
+  dropIndex = null;
+  boundReorderRequestHandler = null;
+  // ===== Lifecycle =====
+  attach(e) {
+    super.attach(e), this.boundReorderRequestHandler = (t) => {
+      const n = t.detail;
+      n?.field && typeof n.toIndex == "number" && this.moveColumn(n.field, n.toIndex);
+    }, e.addEventListener("column-reorder-request", this.boundReorderRequestHandler);
+  }
+  detach() {
+    this.boundReorderRequestHandler && this.grid && (this.grid.removeEventListener(
+      "column-reorder-request",
+      this.boundReorderRequestHandler
+    ), this.boundReorderRequestHandler = null), this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null;
+  }
+  // ===== Hooks =====
+  // Note: No processColumns hook needed - we directly update the grid's column order
+  afterRender() {
+    if (!this.config.enabled) return;
+    const e = this.shadowRoot;
+    if (!e) return;
+    e.querySelectorAll(".header-row > .cell").forEach((n) => {
+      const o = n, r = o.getAttribute("data-field");
+      if (!r) return;
+      const s = this.columns.find((l) => l.field === r);
+      if (!s || !dt(s)) {
+        o.draggable = !1;
+        return;
+      }
+      o.draggable = !0, !o.getAttribute("data-dragstart-bound") && (o.setAttribute("data-dragstart-bound", "true"), o.addEventListener("dragstart", (l) => {
+        const c = this.getColumnOrder().indexOf(r);
+        this.isDragging = !0, this.draggedField = r, this.draggedIndex = c, l.dataTransfer && (l.dataTransfer.effectAllowed = "move", l.dataTransfer.setData("text/plain", r)), o.classList.add("dragging");
+      }), o.addEventListener("dragend", () => {
+        this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null, e.querySelectorAll(".header-row > .cell").forEach((l) => {
+          l.classList.remove("dragging", "drop-target", "drop-before", "drop-after");
+        });
+      }), o.addEventListener("dragover", (l) => {
+        if (l.preventDefault(), !this.isDragging || this.draggedField === r) return;
+        const a = o.getBoundingClientRect(), c = a.left + a.width / 2, u = this.getColumnOrder().indexOf(r);
+        this.dropIndex = l.clientX < c ? u : u + 1, o.classList.add("drop-target"), o.classList.toggle("drop-before", l.clientX < c), o.classList.toggle("drop-after", l.clientX >= c);
+      }), o.addEventListener("dragleave", () => {
+        o.classList.remove("drop-target", "drop-before", "drop-after");
+      }), o.addEventListener("drop", (l) => {
+        l.preventDefault();
+        const a = this.draggedField, c = this.draggedIndex, d = this.dropIndex;
+        if (!this.isDragging || a === null || c === null || d === null)
+          return;
+        const u = d > c ? d - 1 : d, h = this.getColumnOrder(), f = ge(h, c, u), g = {
+          field: a,
+          fromIndex: c,
+          toIndex: u,
+          columnOrder: f
+        };
+        this.grid.setColumnOrder(f), this.emit("column-move", g), this.grid.requestStateChange?.();
+      }));
+    });
+  }
+  // ===== Public API =====
+  /**
+   * Get the current column order from the grid.
+   * @returns Array of field names in display order
+   */
+  getColumnOrder() {
+    return this.grid.getColumnOrder();
+  }
+  /**
+   * Move a column to a new position.
+   * @param field - The field name of the column to move
+   * @param toIndex - The target index
+   */
+  moveColumn(e, t) {
+    const n = this.getColumnOrder(), o = n.indexOf(e);
+    if (o === -1) return;
+    const r = ge(n, o, t);
+    this.grid.setColumnOrder(r), this.emit("column-move", {
+      field: e,
+      fromIndex: o,
+      toIndex: t,
+      columnOrder: r
+    }), this.grid.requestStateChange?.();
+  }
+  /**
+   * Set a specific column order.
+   * @param order - Array of field names in desired order
+   */
+  setColumnOrder(e) {
+    this.grid.setColumnOrder(e), this.grid.requestStateChange?.();
+  }
+  /**
+   * Reset column order to the original configuration order.
+   */
+  resetColumnOrder() {
+    const e = this.columns.map((t) => t.field);
+    this.grid.setColumnOrder(e), this.grid.requestStateChange?.();
+  }
+  // ===== Styles =====
+  styles = `
+    .header-row > .cell[draggable="true"] {
+      cursor: grab;
+      position: relative;
+    }
+    .header-row > .cell.dragging {
+      opacity: 0.5;
+      cursor: grabbing;
+    }
+    .header-row > .cell.drop-before::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 2px;
+      background: var(--tbw-reorder-indicator, var(--tbw-color-accent));
+      z-index: 1;
+    }
+    .header-row > .cell.drop-after::after {
+      content: '';
+      position: absolute;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      width: 2px;
+      background: var(--tbw-reorder-indicator, var(--tbw-color-accent));
+      z-index: 1;
+    }
+  `;
+}
+function M(i, e) {
+  return Math.floor(i / e);
+}
+function ct(i, e) {
+  return {
+    start: i * e,
+    end: (i + 1) * e
+  };
+}
+function ut(i, e, t) {
+  const n = M(i, t), o = M(e - 1, t), r = [];
+  for (let s = n; s <= o; s++)
+    r.push(s);
+  return r;
+}
+async function pe(i, e, t, n) {
+  const o = ct(e, t);
+  return i.getRows({
+    startRow: o.start,
+    endRow: o.end,
+    sortModel: n.sortModel,
+    filterModel: n.filterModel
+  });
+}
+function ht(i, e, t) {
+  const n = M(i, e), o = t.get(n);
+  if (!o) return;
+  const r = i % e;
+  return o[r];
+}
+const ft = 100;
+class Mt extends C {
+  name = "serverSide";
+  version = "1.0.0";
+  get defaultConfig() {
+    return {
+      enabled: !0,
+      pageSize: 100,
+      cacheBlockSize: 100,
+      maxConcurrentRequests: 2
+    };
+  }
+  // ===== Internal State =====
+  dataSource = null;
+  totalRowCount = 0;
+  loadedBlocks = /* @__PURE__ */ new Map();
+  loadingBlocks = /* @__PURE__ */ new Set();
+  lastRequestId = 0;
+  scrollDebounceTimer;
+  // ===== Lifecycle =====
+  detach() {
+    this.dataSource = null, this.totalRowCount = 0, this.loadedBlocks.clear(), this.loadingBlocks.clear(), this.lastRequestId = 0, this.scrollDebounceTimer && (clearTimeout(this.scrollDebounceTimer), this.scrollDebounceTimer = void 0);
+  }
+  // ===== Private Methods =====
+  /**
+   * Check current viewport and load any missing blocks.
+   */
+  loadRequiredBlocks() {
+    if (!this.dataSource) return;
+    const e = this.grid, t = this.config.cacheBlockSize ?? 100, n = { startRow: e.virtualization.start, endRow: e.virtualization.end }, o = ut(n.startRow, n.endRow, t);
+    for (const r of o)
+      if (!(this.loadedBlocks.has(r) || this.loadingBlocks.has(r))) {
+        if (this.loadingBlocks.size >= (this.config.maxConcurrentRequests ?? 2))
+          break;
+        this.loadingBlocks.add(r), pe(this.dataSource, r, t, {}).then((s) => {
+          this.loadedBlocks.set(r, s.rows), this.totalRowCount = s.totalRowCount, this.loadingBlocks.delete(r), this.requestRender(), this.loadRequiredBlocks();
+        }).catch(() => {
+          this.loadingBlocks.delete(r);
+        });
+      }
+  }
+  // ===== Hooks =====
+  processRows(e) {
+    if (!this.dataSource) return [...e];
+    const t = [];
+    for (let n = 0; n < this.totalRowCount; n++) {
+      const o = ht(n, this.config.cacheBlockSize ?? 100, this.loadedBlocks);
+      t.push(o ?? { __loading: !0, __index: n });
+    }
+    return t;
+  }
+  onScroll(e) {
+    this.dataSource && (this.loadRequiredBlocks(), this.scrollDebounceTimer && clearTimeout(this.scrollDebounceTimer), this.scrollDebounceTimer = setTimeout(() => {
+      this.loadRequiredBlocks();
+    }, ft));
+  }
+  // ===== Public API =====
+  /**
+   * Set the data source for server-side loading.
+   * @param dataSource - Data source implementing the getRows method
+   */
+  setDataSource(e) {
+    this.dataSource = e, this.loadedBlocks.clear(), this.loadingBlocks.clear();
+    const t = this.config.cacheBlockSize ?? 100;
+    pe(e, 0, t, {}).then((n) => {
+      this.loadedBlocks.set(0, n.rows), this.totalRowCount = n.totalRowCount, this.requestRender();
+    });
+  }
+  /**
+   * Refresh all data from the server.
+   */
+  refresh() {
+    this.dataSource && (this.loadedBlocks.clear(), this.loadingBlocks.clear(), this.requestRender());
+  }
+  /**
+   * Clear all cached data without refreshing.
+   */
+  purgeCache() {
+    this.loadedBlocks.clear();
+  }
+  /**
+   * Get the total row count from the server.
+   */
+  getTotalRowCount() {
+    return this.totalRowCount;
+  }
+  /**
+   * Check if a specific row is loaded in the cache.
+   * @param rowIndex - Row index to check
+   */
+  isRowLoaded(e) {
+    const t = this.config.cacheBlockSize ?? 100, n = M(e, t);
+    return this.loadedBlocks.has(n);
+  }
+  /**
+   * Get the number of loaded cache blocks.
+   */
+  getLoadedBlockCount() {
+    return this.loadedBlocks.size;
+  }
+}
+function gt(i, e, t) {
+  const n = [...i.undoStack, e];
+  for (; n.length > t; )
+    n.shift();
+  return {
+    undoStack: n,
+    redoStack: []
+    // Clear redo on new action
+  };
+}
+function me(i) {
+  if (i.undoStack.length === 0)
+    return { newState: i, action: null };
+  const e = [...i.undoStack], t = e.pop();
+  return t ? {
+    newState: {
+      undoStack: e,
+      redoStack: [...i.redoStack, t]
+    },
+    action: t
+  } : { newState: i, action: null };
+}
+function be(i) {
+  if (i.redoStack.length === 0)
+    return { newState: i, action: null };
+  const e = [...i.redoStack], t = e.pop();
+  return t ? {
+    newState: {
+      undoStack: [...i.undoStack, t],
+      redoStack: e
+    },
+    action: t
+  } : { newState: i, action: null };
+}
+function pt(i) {
+  return i.undoStack.length > 0;
+}
+function mt(i) {
+  return i.redoStack.length > 0;
+}
+function bt() {
+  return { undoStack: [], redoStack: [] };
+}
+function wt(i, e, t, n) {
+  return {
+    type: "cell-edit",
+    rowIndex: i,
+    field: e,
+    oldValue: t,
+    newValue: n,
+    timestamp: Date.now()
+  };
+}
+class qt extends C {
+  name = "undoRedo";
+  version = "1.0.0";
+  get defaultConfig() {
+    return {
+      enabled: !0,
+      maxHistorySize: 100
+    };
+  }
+  // State as class properties
+  undoStack = [];
+  redoStack = [];
+  /**
+   * Clean up state when plugin is detached.
+   */
+  detach() {
+    this.undoStack = [], this.redoStack = [];
+  }
+  /**
+   * Handle keyboard shortcuts for undo/redo.
+   * - Ctrl+Z / Cmd+Z: Undo
+   * - Ctrl+Y / Cmd+Y / Ctrl+Shift+Z / Cmd+Shift+Z: Redo
+   */
+  onKeyDown(e) {
+    if (!this.config.enabled) return !1;
+    const t = (e.ctrlKey || e.metaKey) && e.key === "z" && !e.shiftKey, n = (e.ctrlKey || e.metaKey) && (e.key === "y" || e.key === "z" && e.shiftKey);
+    if (t) {
+      const o = me({ undoStack: this.undoStack, redoStack: this.redoStack });
+      if (o.action) {
+        const r = this.rows;
+        r[o.action.rowIndex] && (r[o.action.rowIndex][o.action.field] = o.action.oldValue), this.undoStack = o.newState.undoStack, this.redoStack = o.newState.redoStack, this.emit("undo", {
+          action: o.action,
+          type: "undo"
+        }), this.requestRender();
+      }
+      return !0;
+    }
+    if (n) {
+      const o = be({ undoStack: this.undoStack, redoStack: this.redoStack });
+      if (o.action) {
+        const r = this.rows;
+        r[o.action.rowIndex] && (r[o.action.rowIndex][o.action.field] = o.action.newValue), this.undoStack = o.newState.undoStack, this.redoStack = o.newState.redoStack, this.emit("redo", {
+          action: o.action,
+          type: "redo"
+        }), this.requestRender();
+      }
+      return !0;
+    }
+    return !1;
+  }
+  // ===== Public API Methods =====
+  /**
+   * Record a cell edit for undo/redo tracking.
+   * Call this when a cell value changes.
+   *
+   * @param rowIndex - The row index where the edit occurred
+   * @param field - The field (column key) that was edited
+   * @param oldValue - The value before the edit
+   * @param newValue - The value after the edit
+   */
+  recordEdit(e, t, n, o) {
+    const r = wt(e, t, n, o), s = gt(
+      { undoStack: this.undoStack, redoStack: this.redoStack },
+      r,
+      this.config.maxHistorySize ?? 100
+    );
+    this.undoStack = s.undoStack, this.redoStack = s.redoStack;
+  }
+  /**
+   * Programmatically undo the last action.
+   *
+   * @returns The undone action, or null if nothing to undo
+   */
+  undo() {
+    const e = me({ undoStack: this.undoStack, redoStack: this.redoStack });
+    if (e.action) {
+      const t = this.rows;
+      t[e.action.rowIndex] && (t[e.action.rowIndex][e.action.field] = e.action.oldValue), this.undoStack = e.newState.undoStack, this.redoStack = e.newState.redoStack, this.requestRender();
+    }
+    return e.action;
+  }
+  /**
+   * Programmatically redo the last undone action.
+   *
+   * @returns The redone action, or null if nothing to redo
+   */
+  redo() {
+    const e = be({ undoStack: this.undoStack, redoStack: this.redoStack });
+    if (e.action) {
+      const t = this.rows;
+      t[e.action.rowIndex] && (t[e.action.rowIndex][e.action.field] = e.action.newValue), this.undoStack = e.newState.undoStack, this.redoStack = e.newState.redoStack, this.requestRender();
+    }
+    return e.action;
+  }
+  /**
+   * Check if there are any actions that can be undone.
+   */
+  canUndo() {
+    return pt({ undoStack: this.undoStack, redoStack: this.redoStack });
+  }
+  /**
+   * Check if there are any actions that can be redone.
+   */
+  canRedo() {
+    return mt({ undoStack: this.undoStack, redoStack: this.redoStack });
+  }
+  /**
+   * Clear all undo/redo history.
+   */
+  clearHistory() {
+    const e = bt();
+    this.undoStack = e.undoStack, this.redoStack = e.redoStack;
+  }
+  /**
+   * Get a copy of the current undo stack.
+   */
+  getUndoStack() {
+    return [...this.undoStack];
+  }
+  /**
+   * Get a copy of the current redo stack.
+   */
+  getRedoStack() {
+    return [...this.redoStack];
+  }
+}
+function we(i) {
+  const e = i.meta ?? {};
+  return e.lockPosition !== !0 && e.suppressMovable !== !0;
+}
+class _ extends C {
+  name = "visibility";
+  version = "1.0.0";
+  /** Tool panel ID for shell integration */
+  static PANEL_ID = "columns";
+  get defaultConfig() {
+    return {
+      enabled: !0,
+      allowHideAll: !1
+    };
+  }
+  // ===== Internal State =====
+  columnListElement = null;
+  // Drag state for reorder integration
+  isDragging = !1;
+  draggedField = null;
+  draggedIndex = null;
+  dropIndex = null;
+  // ===== Lifecycle =====
+  detach() {
+    this.columnListElement = null, this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null;
+  }
+  // ===== Shell Integration =====
+  /**
+   * Register the column visibility tool panel with the shell.
+   */
+  getToolPanel() {
+    if (this.config.enabled)
+      return {
+        id: _.PANEL_ID,
+        title: "Columns",
+        icon: "☰",
+        tooltip: "Column visibility",
+        order: 100,
+        // High order so it appears last
+        render: (e) => this.renderPanelContent(e)
+      };
+  }
+  // ===== Public API =====
+  /**
+   * Show the visibility sidebar panel.
+   */
+  show() {
+    this.grid.openToolPanel(_.PANEL_ID);
+  }
+  /**
+   * Hide the visibility sidebar panel.
+   */
+  hide() {
+    this.grid.closeToolPanel();
+  }
+  /**
+   * Toggle the visibility sidebar panel.
+   */
+  toggle() {
+    this.grid.toggleToolPanel(_.PANEL_ID);
+  }
+  /**
+   * Check if a specific column is visible.
+   * Delegates to grid.isColumnVisible().
+   * @param field - The field name to check
+   * @returns True if the column is visible
+   */
+  isColumnVisible(e) {
+    return this.grid.isColumnVisible(e);
+  }
+  /**
+   * Set visibility for a specific column.
+   * Delegates to grid.setColumnVisible().
+   * @param field - The field name of the column
+   * @param visible - Whether the column should be visible
+   */
+  setColumnVisible(e, t) {
+    this.grid.setColumnVisible(e, t);
+  }
+  /**
+   * Get list of all visible column fields.
+   * @returns Array of visible field names
+   */
+  getVisibleColumns() {
+    return this.grid.getAllColumns().filter((t) => t.visible).map((t) => t.field);
+  }
+  /**
+   * Get list of all hidden column fields.
+   * @returns Array of hidden field names
+   */
+  getHiddenColumns() {
+    return this.grid.getAllColumns().filter((t) => !t.visible).map((t) => t.field);
+  }
+  /**
+   * Show all columns.
+   * Delegates to grid.showAllColumns().
+   */
+  showAll() {
+    this.grid.showAllColumns();
+  }
+  /**
+   * Toggle visibility for a specific column.
+   * Delegates to grid.toggleColumnVisibility().
+   * @param field - The field name of the column
+   */
+  toggleColumn(e) {
+    this.grid.toggleColumnVisibility(e);
+  }
+  /**
+   * Show a specific column.
+   * Delegates to grid.setColumnVisible().
+   * @param field - The field name of the column to show
+   */
+  showColumn(e) {
+    this.grid.setColumnVisible(e, !0);
+  }
+  /**
+   * Hide a specific column.
+   * Delegates to grid.setColumnVisible().
+   * @param field - The field name of the column to hide
+   */
+  hideColumn(e) {
+    this.grid.setColumnVisible(e, !1);
+  }
+  /**
+   * Get all columns with their visibility status.
+   * Useful for building visibility UI.
+   * @returns Array of column info with visibility status
+   */
+  getAllColumns() {
+    return this.grid.getAllColumns();
+  }
+  /**
+   * Check if the sidebar panel is currently open.
+   * @returns True if the panel is open
+   */
+  isPanelVisible() {
+    return this.grid.activeToolPanel === _.PANEL_ID;
+  }
+  // ===== Private Methods =====
+  /**
+   * Render the panel content into the shell's tool panel container.
+   * Returns a cleanup function.
+   */
+  renderPanelContent(e) {
+    const t = this.grid, n = document.createElement("div");
+    n.className = "tbw-visibility-content";
+    const o = document.createElement("div");
+    o.className = "tbw-visibility-list", n.appendChild(o);
+    const r = document.createElement("button");
+    return r.className = "tbw-visibility-show-all", r.textContent = "Show All", r.addEventListener("click", () => {
+      t.showAllColumns(), this.rebuildToggles(o);
+    }), n.appendChild(r), this.columnListElement = o, this.rebuildToggles(o), e.appendChild(n), () => {
+      this.columnListElement = null, n.remove();
+    };
+  }
+  /**
+   * Check if a reorder plugin is present (by name to avoid static import).
+   */
+  hasReorderPlugin() {
+    const e = this.grid?.getPluginByName?.("reorder");
+    return !!(e && typeof e.moveColumn == "function");
+  }
+  /**
+   * Build the column toggle checkboxes.
+   * When a reorder plugin is present, adds drag handles for reordering.
+   */
+  rebuildToggles(e) {
+    const t = this.grid, n = this.hasReorderPlugin();
+    e.innerHTML = "";
+    const o = t.getAllColumns();
+    for (let r = 0; r < o.length; r++) {
+      const s = o[r], l = s.header || s.field, a = document.createElement("div");
+      a.className = s.lockVisible ? "tbw-visibility-row locked" : "tbw-visibility-row", a.setAttribute("data-field", s.field), a.setAttribute("data-index", String(r)), n && we(s) && (a.draggable = !0, a.classList.add("reorderable"), this.setupDragListeners(a, s.field, r, e));
+      const c = document.createElement("label");
+      c.className = "tbw-visibility-label";
+      const d = document.createElement("input");
+      d.type = "checkbox", d.checked = s.visible, d.disabled = s.lockVisible ?? !1, d.addEventListener("change", () => {
+        t.toggleColumnVisibility(s.field), setTimeout(() => this.rebuildToggles(e), 0);
+      });
+      const u = document.createElement("span");
+      if (u.textContent = l, c.appendChild(d), c.appendChild(u), n && we(s)) {
+        const h = document.createElement("span");
+        h.className = "tbw-visibility-handle", h.textContent = "⋮⋮", h.title = "Drag to reorder", a.appendChild(h);
+      }
+      a.appendChild(c), e.appendChild(a);
+    }
+  }
+  /**
+   * Set up drag-and-drop event listeners for a row.
+   * On drop, emits a 'column-reorder-request' event for other plugins to handle.
+   */
+  setupDragListeners(e, t, n, o) {
+    e.addEventListener("dragstart", (r) => {
+      this.isDragging = !0, this.draggedField = t, this.draggedIndex = n, r.dataTransfer && (r.dataTransfer.effectAllowed = "move", r.dataTransfer.setData("text/plain", t)), e.classList.add("dragging");
+    }), e.addEventListener("dragend", () => {
+      this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null, o.querySelectorAll(".tbw-visibility-row").forEach((r) => {
+        r.classList.remove("dragging", "drop-target", "drop-before", "drop-after");
+      });
+    }), e.addEventListener("dragover", (r) => {
+      if (r.preventDefault(), !this.isDragging || this.draggedField === t) return;
+      const s = e.getBoundingClientRect(), l = s.top + s.height / 2;
+      this.dropIndex = r.clientY < l ? n : n + 1, o.querySelectorAll(".tbw-visibility-row").forEach((a) => {
+        a !== e && a.classList.remove("drop-target", "drop-before", "drop-after");
+      }), e.classList.add("drop-target"), e.classList.toggle("drop-before", r.clientY < l), e.classList.toggle("drop-after", r.clientY >= l);
+    }), e.addEventListener("dragleave", () => {
+      e.classList.remove("drop-target", "drop-before", "drop-after");
+    }), e.addEventListener("drop", (r) => {
+      r.preventDefault();
+      const s = this.draggedField, l = this.draggedIndex, a = this.dropIndex;
+      if (!this.isDragging || s === null || l === null || a === null)
+        return;
+      const c = a > l ? a - 1 : a;
+      if (c !== l) {
+        const d = {
+          field: s,
+          fromIndex: l,
+          toIndex: c
+        };
+        this.emit("column-reorder-request", d), setTimeout(() => {
+          this.rebuildToggles(o);
+        }, 0);
+      }
+    });
+  }
+  // ===== Styles =====
+  styles = `
+    .tbw-visibility-content {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+
+    .tbw-visibility-list {
+      flex: 1;
+      overflow-y: auto;
+      padding: 8px;
+    }
+
+    .tbw-visibility-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 4px;
+      cursor: pointer;
+      font-size: 13px;
+      border-radius: var(--tbw-border-radius, 4px);
+      position: relative;
+    }
+    .tbw-visibility-row:hover {
+      background: var(--tbw-visibility-hover, var(--tbw-color-row-hover, #f3f4f6));
+    }
+    .tbw-visibility-row input[type="checkbox"] {
+      cursor: pointer;
+    }
+    .tbw-visibility-row.locked span {
+      color: var(--tbw-color-fg-muted, #888);
+    }
+
+    /* Drag handle */
+    .tbw-visibility-handle {
+      cursor: grab;
+      color: var(--tbw-color-fg-muted, #888);
+      font-size: 10px;
+      letter-spacing: -2px;
+      user-select: none;
+      flex-shrink: 0;
+    }
+    .tbw-visibility-row.reorderable:hover .tbw-visibility-handle {
+      color: var(--tbw-color-fg, #1f2937);
+    }
+
+    /* Label wrapper for checkbox and text */
+    .tbw-visibility-label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex: 1;
+      cursor: pointer;
+    }
+
+    /* Drag states */
+    .tbw-visibility-row.dragging {
+      opacity: 0.5;
+      cursor: grabbing;
+    }
+    .tbw-visibility-row.drop-before::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      height: 2px;
+      background: var(--tbw-reorder-indicator, var(--tbw-color-accent, #3b82f6));
+    }
+    .tbw-visibility-row.drop-after::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 2px;
+      background: var(--tbw-reorder-indicator, var(--tbw-color-accent, #3b82f6));
+    }
+
+    .tbw-visibility-show-all {
+      margin: 8px;
+      padding: 8px 12px;
+      border: 1px solid var(--tbw-visibility-border, var(--tbw-color-border, #e5e7eb));
+      border-radius: var(--tbw-border-radius, 4px);
+      background: var(--tbw-visibility-btn-bg, var(--tbw-color-header-bg, #f9fafb));
+      color: var(--tbw-color-fg, #1f2937);
+      cursor: pointer;
+      font-size: 13px;
+    }
+    .tbw-visibility-show-all:hover {
+      background: var(--tbw-visibility-hover, var(--tbw-color-row-hover, #f3f4f6));
+    }
+  `;
+}
+export {
+  C as BaseGridPlugin,
+  vt as ClipboardPlugin,
+  Ct as ColumnVirtualizationPlugin,
+  yt as ContextMenuPlugin,
+  Pt as DGEvents,
+  Dt as DataGridElement,
+  St as ExportPlugin,
+  E as FilteringPlugin,
+  Bt as FitModeEnum,
+  Ht as GridCSSVars,
+  Ot as GridClasses,
+  Wt as GridDataAttrs,
+  Kt as GridElement,
+  Vt as GridSelectors,
+  Rt as GroupingColumnsPlugin,
+  kt as GroupingRowsPlugin,
+  Et as MasterDetailPlugin,
+  At as MultiSortPlugin,
+  _t as PinnedColumnsPlugin,
+  It as PinnedRowsPlugin,
+  Tt as PivotPlugin,
+  Gt as PluginEvents,
+  Lt as ReorderPlugin,
+  zt as SelectionPlugin,
+  Mt as ServerSidePlugin,
+  $t as TreePlugin,
+  qt as UndoRedoPlugin,
+  _ as VisibilityPlugin
+};
+//# sourceMappingURL=all.js.map