cellux 0.0.1 → 0.1.5

package/dist/cellux.js

@@ -0,0 +1,2703 @@
+const Z = {
+  click: "onCellClicked",
+  dblclick: "onCellDoubleClicked",
+  contextmenu: "onContextMenu",
+  mousedown: "onCellMouseDown",
+  mouseup: "onCellMouseUp",
+  mousemove: "onCellMouseMove",
+  mouseenter: "onCellMouseEnter",
+  mouseleave: "onCellMouseLeave",
+  mouseover: "onCellMouseOver",
+  mouseout: "onCellMouseOut"
+}, J = {
+  click: "onRowClicked",
+  dblclick: "onRowDoubleClicked",
+  mouseover: "onRowMouseOver",
+  mouseout: "onRowMouseOut"
+}, C = {
+  dataField: "data-field",
+  dataColIndex: "data-col-index",
+  dataResizeIndex: "data-resize-index"
+}, g = {
+  cx_grid_container: "cellux-grid-container",
+  grid_viewport: "grid-viewport",
+  left_panel: "left-panel",
+  center_panel: "center-panel",
+  header: "header",
+  header_center: "header-center",
+  header_left: "header-left",
+  header_label: "header-label",
+  header_cell: "header-cell",
+  col_resizer: "col-resizer",
+  grid_body: "grid-body",
+  grid_body_left: "grid-body-left",
+  grid_body_center: "grid-body-center",
+  rows_container: "rows-container",
+  rows_container_center: "rows-container-center",
+  rows_container_left: "rows-container-left",
+  row: "cellux-row",
+  cell: "cell",
+  cell_editing: "cell-editing",
+  visual_cell: "visual-cell",
+  select_all_checkbox: "select-all-checkbox",
+  active_row: "active-row",
+  // fn_grid_header_cell: 'header-cell',
+  header_menu_icon: "header-menu-icon",
+  // fn_grid_header_center: 'header-center',
+  header_inner: "header-inner",
+  status_bar: "status-bar",
+  // Column Menu Items
+  fn_filter_item: "fn-filter-item",
+  fn_filter_list: "fn-filter-list",
+  // State classes (no CSS rules - JS only)
+  active_cell: "active-cell",
+  panel_1: "fn-panel-1"
+};
+function Y(h) {
+  return typeof h == "function";
+}
+function O(h, t) {
+  const e = t.length;
+  if (e === 0)
+    return {
+      firstRenderedRowIndex: 0,
+      lastRenderedRowIndex: -1,
+      firstVisibleRowIndex: 0,
+      lastVisibleRowIndex: -1,
+      renderedRowCount: 0
+    };
+  const { rowHeight: r, viewportHeight: n, scrollTop: i, rowBuffer: s } = h, l = Math.max(0, s), a = Math.max(0, Math.floor(i / r)), o = Math.max(1, Math.ceil(n / r)), d = Math.min(e - 1, a + o - 1), u = Math.min(e, o + 2 * l);
+  let c = Math.max(0, a - l), f = c + u - 1;
+  return f > e - 1 && (f = e - 1, c = Math.max(0, f - u + 1)), {
+    firstRenderedRowIndex: c,
+    lastRenderedRowIndex: f,
+    firstVisibleRowIndex: a,
+    lastVisibleRowIndex: d,
+    renderedRowCount: f - c + 1
+  };
+}
+function ee(h) {
+  return h.map((t, e) => {
+    if (typeof t == "number") {
+      if (!Number.isFinite(t) || t < 0)
+        throw new Error(`convertWidthArray: invalid numeric width at index ${e}: ${t}`);
+      return `${t}px`;
+    }
+    const r = t.trim();
+    if (!r)
+      throw new Error(`convertWidthArray: empty width token at index ${e}`);
+    if (/\s/.test(r))
+      throw new Error(`convertWidthArray: width token contains whitespace at index ${e}: "${t}"`);
+    return r;
+  }).join(" ");
+}
+function te(h) {
+  const t = h?.closest(`.${g.cell}`);
+  if (!t?.parentElement) return null;
+  const e = Array.from(t.parentElement.children).indexOf(t);
+  return e === -1 ? null : e;
+}
+function V(h) {
+  if (!h) return null;
+  const t = h.closest(".cellux-row");
+  if (!t) return null;
+  const e = Number(t.dataset.arrayIndex);
+  return isNaN(e) ? null : e;
+}
+function re(h, t) {
+  const e = V(h);
+  if (e === null) throw new Error("getRowData: element is not within a grid row");
+  const r = t[e];
+  if (!r) throw new Error(`getRowData: rowData undefined at index ${e}`);
+  return r;
+}
+function ne(h, t, e, r) {
+  if (!t) throw new Error("getColumnCallbackPayload: cellEl is null");
+  const n = t.closest(".cellux-row");
+  if (!n) throw new Error("getColumnCallbackPayload: cellEl.closest('.cellux-row') returned null");
+  const i = Array.from(n.children).indexOf(t);
+  if (i < 0) throw new Error("getColumnCallbackPayload: cell not found in row children");
+  const s = e[i];
+  if (!s) throw new Error(`getColumnCallbackPayload: column undefined at index ${i}`);
+  const l = Number(n.dataset.arrayIndex), a = Number(n.dataset.gridIndex), o = r[l];
+  if (!o) throw new Error(`getColumnCallbackPayload: rowData undefined at arrayIndex ${l}`);
+  const d = o[s.field];
+  return {
+    data: o,
+    rowIndex: a,
+    arrayIndex: l,
+    colDef: s,
+    value: d,
+    cellElement: t
+  };
+}
+function z(h) {
+  return (h == null ? "" : String(h)).replace(/\u00A0/g, " ").replace(/[\u200B-\u200D\uFEFF]/g, "").replace(/[\u061C\u200E\u200F\u202A-\u202E\u2066-\u2069]/g, "").replace(/[\u0000-\u0008\u000B\u000C\u000E-\u001F\u007F]/g, "").trim();
+}
+function ie(h) {
+  return z(h).replace(/\s+/g, " ").trim();
+}
+function G() {
+  if (!document.querySelector(".cellux-grid-container")) throw new Error("getContainer came up empty");
+  return document.querySelector(".cellux-grid-container");
+}
+function j() {
+  const h = G();
+  if (!h) return null;
+  const t = h.querySelector(".header");
+  if (!t) throw new Error("getHeaderEl came up empty");
+  return t;
+}
+function L() {
+  const h = j();
+  if (!h) return null;
+  const t = h.querySelector(".header-inner");
+  if (!t) throw new Error("getHeaderInnerEl came up empty");
+  return t;
+}
+function se() {
+  const h = L();
+  Array.from(h.children).forEach((t) => {
+    const e = t.querySelector(".header-label");
+    console.log(e?.textContent);
+  });
+}
+function le(h, t) {
+  const n = (t._leftColDefs.some((i) => i.field === h) ? t._leftColDefs : t._centerColDefs).findIndex((i) => i.field === h);
+  if (n === -1) throw new Error(`autoSizeColumn: field ${h} not found`);
+  return n;
+}
+function K(h, t) {
+  const e = t._leftColDefs.some((i) => i.field === h), n = (e ? t._leftColDefs : t._centerColDefs).findIndex((i) => i.field === h);
+  if (n === -1) throw new Error(`autoSizeColumn: field ${h} not found`);
+  return { colIndex: n, isLeft: e };
+}
+function X(h) {
+  h._visibleColDefs = h._allColDefs.filter((t) => !t.hide), h._leftColDefs = h._visibleColDefs.filter((t) => t.pinned === "left"), h._centerColDefs = h._visibleColDefs.filter((t) => t.pinned !== "left");
+}
+function T(h) {
+  return h.getAttribute(C.dataField);
+}
+function H(h) {
+  const t = h.getAttribute(C.dataColIndex);
+  if (t === null) return null;
+  const e = Number(t);
+  return Number.isInteger(e) ? e : null;
+}
+function P(h, t) {
+  const e = h.getAttribute(C.dataField);
+  if (!e) throw new Error("field undefined in getColumnFromHeaderCell");
+  return t._renderer._visibleColDefs.find((n) => n.field === e) ?? null;
+}
+function I(h) {
+  return h.closest(".cellux-row");
+}
+function $(h) {
+  const t = Number(h.dataset.arrayIndex);
+  return Number.isInteger(t) ? t : null;
+}
+function x(h) {
+  const t = Number(h.dataset.rowIndex);
+  return Number.isInteger(t) ? t : null;
+}
+function S(h, t) {
+  const e = Array.from(t.children).indexOf(h);
+  return e >= 0 ? e : null;
+}
+function U(h, t) {
+  const e = I(h);
+  if (!e) return null;
+  const r = S(h, e);
+  return r === null ? null : t._renderer._centerColDefs[r] ?? null;
+}
+function W(h) {
+  const t = I(h);
+  if (!t) return null;
+  const e = x(t), r = $(t);
+  return e === null || r === null ? null : { rowEl: t, rowIndex: e, arrayIndex: r };
+}
+function Q(h, t) {
+  const e = W(h);
+  if (!e) return null;
+  const r = U(h, t);
+  return r ? { colDef: r, ...e } : null;
+}
+const N = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  computeRenderedRowCount: O,
+  convertWidthArrayToString: ee,
+  getArrayIndex: V,
+  getArrayIndexFromRow: $,
+  getCellColIndex: S,
+  getCellContext: Q,
+  getColDefFromCell: U,
+  getColIndexFromHeaderCell: H,
+  getColumnCallbackPayload: ne,
+  getColumnFromHeaderCell: P,
+  getColumnIndex: te,
+  getColumnIndexFromFieldName: K,
+  getColumnIndexOnlyFromFieldName: le,
+  getContainerEl: G,
+  getFieldFromHeaderCell: T,
+  getHeaderEl: j,
+  getHeaderInnerEl: L,
+  getRowAndArrayIndex: W,
+  getRowData: re,
+  getRowFromCell: I,
+  getRowIndexFromRow: x,
+  isFunction: Y,
+  normalizeTextHard: ie,
+  normalizeTextSoft: z,
+  printHeaderDom: se,
+  reComputeColDefs: X
+}, Symbol.toStringTag, { value: "Module" }));
+class oe {
+  constructor(t, e) {
+    this._grid = t, this._renderer = e, this.className = "grid-debug-overlay2", this._showOverlay = !0, this._showLists = !1, this._showFilters = !1, this._panel1El = null, this._panel2El = null, this._panelFilters = null;
+  }
+  //currentState: GridState, 
+  updateDebugOverlay() {
+    if (!this._grid.showDebugOverlay || !this._showOverlay) return;
+    const t = N, e = g, r = this._grid.currentState, n = this._grid.derivedIndices;
+    this._panel1El || this.createDebugOverlay();
+    const { firstVisibleRowIndex: i, lastRenderedRowIndex: s, firstRenderedRowIndex: l, lastVisibleRowIndex: a, renderedRowCount: o } = t.computeRenderedRowCount(r, n);
+    r.totalRows ?? this._grid.options.rowData?.length;
+    const d = this._grid._renderer._visibleColDefs?.length ?? 0, u = this._grid._renderer._centerBodyEl?.scrollTop ?? 0, c = this._grid._renderer._centerBodyEl.querySelector(`.${e.active_cell}`), f = this._grid.currentState.viewportHeight, _ = this._renderer.renderedRowDivs.length;
+    let p = [
+      `rowBuffer: ${this._grid.currentState.rowBuffer}`,
+      `_centerRenderedRowDivs.length: ${_}`,
+      `Visible Row Count: ${a - i + 1}`,
+      // `renderedRowDivs[0].rowId: ${rowZero}`,
+      // `renderedRowDivs[${length - 1}].rowId: ${lastRenderedRowId}`,
+      `firstRenderedRowIndex: ${l}`,
+      `lastRenderedRowIndex: ${s}`,
+      `viewPortHeight: ${f}`,
+      `rowHeight: ${this._grid.currentState.rowHeight}`,
+      `firstVisibleRowIndex: ${i}`,
+      `lastVisibleRowIndex: ${a}`,
+      `scrollTop: ${u}`,
+      `renderedRowCount: ${o}`,
+      `columnCount: ${d}`,
+      `activeCell.textContent: ${c?.textContent}`,
+      // `activeCell.outerHTML: ${activeCell? activeCell.outerHTML: null}`,
+      `activeRowIndex: ${this._grid.activeRowIndex}`
+    ].join(" | ");
+    this._panel1El.style.minHeight = "80px", this._panel1El.textContent = p, this._showLists && (this._panel2El.style.minHeight = "80px", this.buildLists()), this._showFilters && (this._panelFilters.style.minHeight = "200px", this.buildFiltersPanel());
+  }
+  buildFiltersPanel() {
+    const t = this._grid._filter._columnFiltersMap, e = [];
+    for (const [r, n] of t) {
+      const i = Array.from(n).sort(
+        (s, l) => String(s).localeCompare(String(l))
+      );
+      e.push(`${r} (${i.length}): [${i.join(", ")}]`);
+    }
+    this._panelFilters.textContent = e.join(`
+`);
+  }
+  getVisibleColumns() {
+    return this._renderer._visibleColDefs.map((e, r) => `${r}/${e.field}`);
+  }
+  getAllColDefs() {
+    return this._renderer._allColDefs.map((e, r) => `${r}/${e.field}`);
+  }
+  createDebugOverlay() {
+    if (!this._showOverlay) return;
+    const t = document.createElement("div");
+    if (t.className = this.className, t.style.pointerEvents = "none", t.textContent = "debug...", this._panel1El = t, this._grid._renderer._gridContainerEl.parentElement?.insertBefore(
+      this._panel1El,
+      this._grid._renderer._gridContainerEl
+    ), this._showLists) {
+      const e = document.createElement("div");
+      e.className = this.className, e.style.pointerEvents = "none", this._panel2El = e, this._grid._renderer._gridContainerEl.parentElement?.insertBefore(
+        this._panel2El,
+        this._grid._renderer._gridContainerEl
+      );
+    }
+    if (this._showFilters) {
+      const e = document.createElement("div");
+      e.className = this.className, e.style.pointerEvents = "none", this._panelFilters = e, this._grid._renderer._gridContainerEl.parentElement?.insertBefore(
+        this._panelFilters,
+        this._grid._renderer._gridContainerEl
+      );
+    }
+  }
+  buildLists() {
+    let t = this._panel2El;
+    if (!t) return;
+    t.style.display = "flex", t.style.gap = "20px", t.style.alignItems = "flex-start", t.textContent = null;
+    let e;
+    e = this.buildList("_leftColDefs[]", this._renderer._leftColDefs, this._renderer._leftColumnWidths), e && t.appendChild(e), e = this.buildList("_centerColDefs[]", this._renderer._centerColDefs, this._renderer._centerColumnWidths), e && t.appendChild(e), e = this.buildList("_allColDefs[]", this._renderer._allColDefs, this._renderer._centerColumnWidths), e && t.appendChild(e), e = this.buildList(
+      "options colDef array",
+      this._grid.options?.columnDefs,
+      this._grid.options?.columnDefs.map((r) => r.width)
+    ), e && t.appendChild(e);
+  }
+  buildList(t, e, r) {
+    const n = e.map((a, o) => {
+      const d = a.hide ?? !1, u = r[o] ?? a.width, c = a.pinned ? "left" : "";
+      return `${o}/${a.field}/${d}/${u} ${c}`;
+    }), i = document.createElement("div"), s = document.createElement("h4");
+    s.textContent = t + ` (${n.length})`, i.appendChild(s);
+    const l = document.createElement("ul");
+    return n.forEach((a) => {
+      const o = document.createElement("li");
+      o.textContent = a, l.appendChild(o);
+    }), l.style.listStylePosition = "inside", i.appendChild(l), i;
+  }
+}
+class de {
+  constructor(t) {
+    this._grid = t, this._quickFilterText = "";
+  }
+  clearQuickFilter() {
+    this._quickFilterText = "", this.applyQuickFilter();
+  }
+  getQuickFilter() {
+    return this._quickFilterText;
+  }
+  applyQuickFilter() {
+    if (!this._quickFilterText)
+      this._grid._filter.filteredIndices = [...Array(this._grid.getRowData().length).keys()];
+    else {
+      const t = this._quickFilterText.toLowerCase();
+      this._grid._filter.filteredIndices = Array.from(Array(this._grid.getRowData().length).keys()).filter((e) => {
+        const r = this._grid.getRowData()[e];
+        return this._grid._renderer._allColDefs.filter((n) => !n.hide).some((n) => {
+          const i = r[n.field];
+          return i == null ? !1 : String(i).toLowerCase().includes(t);
+        });
+      });
+    }
+    this._grid._sort.applySort(), this._grid.updateTotalRowsDisplay(), this._grid.refreshGrid();
+  }
+  // public applyQuickFilter(): void {
+  //     if (!this._quickFilterText) {
+  //         // No filter - use all rows
+  //         this._grid._filter.filteredIndices = [...Array(this._grid.getRowData().length).keys()];
+  //     } else {
+  //         // Filter the indices based on search text
+  //         const filterText = this._quickFilterText;
+  //         this._grid._filter.filteredIndices = Array.from(Array(this._grid.getRowData().length).keys())
+  //             .filter(arrayIndex => {
+  //                 const row = this._grid.getRowData()[arrayIndex];
+  //                 // Search across all columns
+  //                 return this._grid._renderer._visibleColDefs.some(col => {
+  //                     const value = row[col.field];
+  //                     if (value == null) return false;
+  //                     const stringValue = String(value).toLowerCase();
+  //                     return stringValue.includes(filterText);
+  //                 });
+  //             });
+  //     }
+  //     // Now apply sort to the filtered indices
+  //     this._grid._sort.applySort();
+  //     this._grid.updateTotalRowsDisplay();
+  //     this._grid.refreshGrid();
+  // }
+  get quickFilterText() {
+    return this._quickFilterText;
+  }
+  set quickFilterText(t) {
+    this._quickFilterText = t.toLowerCase().trim(), this.applyQuickFilter();
+  }
+}
+class ae {
+  constructor(t, e) {
+    this._grid = t, this.rootEl = e, this._statusBarEl = null;
+  }
+  destroy() {
+    this._statusBarEl = null;
+  }
+  updateRowsPanel() {
+    if (this._statusBarEl || (this._statusBarEl = this.rootEl.querySelector(".status-bar")), this._statusBarEl) {
+      const t = this._grid._filter.filteredIndices.length, e = this._grid.options.rowData.length;
+      t < e ? this._statusBarEl.textContent = `${t} of ${e} rows (filtered)` : this._statusBarEl.textContent = `${e} rows`;
+    }
+  }
+  get statusBarEl() {
+    return this._statusBarEl;
+  }
+}
+class ce {
+  constructor(t) {
+    this._grid = t;
+  }
+  onContextMenu(t) {
+    t.preventDefault(), t.stopPropagation();
+    const e = this._grid.getCellEventParams(t.target, t);
+    if (!e) return;
+    this.removeContextMenu();
+    const r = {
+      data: e.data,
+      rowIndex: e.rowIndex,
+      arrayIndex: e.arrayIndex,
+      colDef: e.colDef,
+      value: e.value,
+      event: t,
+      grid: this._grid
+    };
+    let n;
+    this._grid.options.getContextMenuItems ? n = this._grid.options.getContextMenuItems(r) : n = this.getDefaultContextMenuItems(), this.renderContextMenu(t.clientX, t.clientY, n, r);
+  }
+  getDefaultContextMenuItems() {
+    return ["copy", "separator", "autoSizeAll", "separator", "exportCsv"];
+  }
+  renderContextMenu(t, e, r, n) {
+    const i = document.createElement("div");
+    i.className = "fn-context-menu", r.forEach((s) => {
+      if (s === "separator") {
+        const d = document.createElement("div");
+        d.className = "fn-context-menu-separator", i.appendChild(d);
+        return;
+      }
+      if (typeof s == "string") {
+        const d = this.createBuiltInMenuItem(s, n);
+        d && i.appendChild(d);
+        return;
+      }
+      const l = document.createElement("div");
+      l.className = "fn-context-menu-item";
+      const a = typeof s.disabled == "function" ? s.disabled() : s.disabled;
+      a && l.classList.add("disabled");
+      let o = "";
+      s.icon && (o += `<span class="fn-context-menu-icon">${s.icon}</span>`), o += `<span class="fn-context-menu-label">${s.name}</span>`, l.innerHTML = o, a || l.addEventListener("click", (d) => {
+        d.stopPropagation(), s.action(), this.removeContextMenu();
+      }), i.appendChild(l);
+    }), i.style.left = `${t}px`, i.style.top = `${e}px`, requestAnimationFrame(() => {
+      const s = i.getBoundingClientRect();
+      s.right > window.innerWidth && (i.style.left = `${t - s.width}px`), s.bottom > window.innerHeight && (i.style.top = `${e - s.height}px`);
+    }), document.body.appendChild(i), this._grid.contextMenuEl = i, setTimeout(() => {
+      document.addEventListener("click", () => this.removeContextMenu(), { once: !0 }), document.addEventListener("contextmenu", () => this.removeContextMenu(), { once: !0 });
+    }, 0), this._grid._renderer._centerBodyEl?.addEventListener("scroll", () => this.removeContextMenu(), { once: !0 });
+  }
+  createBuiltInMenuItem(t, e) {
+    const r = document.createElement("div");
+    r.className = "fn-context-menu-item";
+    let n = "", i;
+    switch (t) {
+      case "copy":
+        n = "Copy", i = () => {
+          const l = String(e.value ?? "");
+          navigator.clipboard.writeText(l);
+          const o = e.event.target.closest(".cell");
+          o && (o.classList.add("fn-cell-copying"), setTimeout(() => {
+            o.classList.remove("fn-cell-copying");
+          }, 300));
+        };
+        break;
+      case "autoSizeAll":
+        n = "Auto-size All Columns", i = () => {
+          this._grid.autoSizeAllColumns(), this._grid._colStateMgr.saveColumnState();
+        };
+        break;
+      case "exportCsv":
+        n = "Export to CSV", i = () => {
+          this._grid.exportToCsv();
+        };
+        break;
+      default:
+        return null;
+    }
+    const s = document.createElement("span");
+    return s.className = "fn-context-menu-label", s.textContent = n, r.appendChild(s), r.addEventListener("click", (l) => {
+      l.stopPropagation(), i(), this.removeContextMenu();
+    }), r;
+  }
+  removeContextMenu() {
+    this._grid.contextMenuEl && document.body.contains(this._grid.contextMenuEl) && document.body.removeChild(this._grid.contextMenuEl), this._grid.contextMenuEl = null;
+  }
+}
+class he {
+  constructor(t) {
+    this._grid = t;
+  }
+  print(t, e = !1, r = "log") {
+    !this._grid.consoleLog || !e || console[r](t);
+  }
+}
+class ue {
+  constructor(t, e, r = !1, n = !1) {
+    this._grid = t, this._renderer = e, this._dev = r, this._consoleLog = n, this.skip = !1, this._dev = !0, this._consoleLog = !1;
+  }
+  // Fire only if dev
+  check(t) {
+    this._dev && t();
+  }
+  assertAll(t) {
+    const e = this._consoleLog;
+    this._consoleLog = t, this.assertDomWired(), this.assertHeaderCountMatchesColumnCount(), this.assertCssColumnsMatchColumns(), this.assertColumnWidthsLengthMatchColumnsLength(), this.assertColumnSync(), this.assertVisibleColOrder(), this.assertCenterColDefsSync(), this.assertPanelColDefsMatchVisible(), this.assertHeaderDomMatchesPanelColDefs(), this.assertNoDuplicateFields(), this.assertHiddenColsNotVisible(), this._consoleLog = e;
+  }
+  element(t, e) {
+    if (this.skip) return;
+    let r = `assert.element: required element with class name "${e}" not found.`;
+    if (r += " Did you hear what I said man?! NOT FOUND!!", !t) throw new Error(r);
+  }
+  assertDomWired() {
+    this.check(() => {
+      this.element(this._grid._renderer._gridContainerEl, "cellux-grid-container"), this.element(this._grid._renderer._centerHeaderEl, "header"), this.element(this._grid._renderer._centerHeaderInnerEl, "header-inner"), this.element(this._grid._renderer._centerBodyEl, "grid-body-center"), this.element(this._grid._renderer._centerRowsContainerEl, "rows-container-center"), this.print("assertDomWired");
+    });
+  }
+  assertColumnWidthsSync() {
+    this.check(() => {
+      const t = this._renderer._visibleColDefs.filter((e) => e.pinned !== "left").length;
+      if (this._renderer._centerColumnWidths.length !== t)
+        throw new Error(
+          `_centerColumnWidths out of sync: ${this._renderer._centerColumnWidths.length} widths, ${t} center cols`
+        );
+    });
+  }
+  assertHeaderCountMatchesColumnCount() {
+  }
+  // DEV: CSS --grid-columns token count should match column count (best-effort)
+  assertCssColumnsMatchColumns() {
+    this.check(() => {
+      const t = this._grid._renderer._gridContainerEl.style.getPropertyValue("--grid-columns").trim();
+      if (!t) return;
+      const e = t.split(/\s+/).filter(Boolean);
+      if (e.length !== this._renderer._visibleColDefs.length)
+        throw new Error(
+          `CSS columns mismatch: tokens=${e.length}, columns=${this._renderer._visibleColDefs.length}, value="${t}"`
+        );
+      this.print(`assertCssColumnsMatchColumns: tokens.length===this._grid.columns.length===${this._renderer._visibleColDefs.length}`);
+    });
+  }
+  // DEV: each rendered row must have correct cell count and valid dataset indices
+  assertRenderedRowsValid(t, e) {
+    this.check(() => {
+      const r = this._renderer._visibleColDefs.filter((n) => n.pinned !== "left");
+      for (let n = 0; n < t; n++) {
+        const i = this._renderer.renderedRowDivs[n];
+        if (!i) throw new Error(`Missing rowDiv at rendered index ${n}`);
+        if (i.children.length !== r.length)
+          throw new Error(
+            `Row cell count mismatch: rowChildren=${i.children.length}, centerCols=${r.length}`
+          );
+        const s = Number(i.dataset.rowIndex), l = Number(i.dataset.arrayIndex), a = i.dataset.rowIndex !== void 0, o = i.dataset.arrayIndex !== void 0;
+        if (a && !Number.isInteger(s))
+          throw new Error(`Invalid row.dataset.rowIndex="${i.dataset.rowIndex}"`);
+        if (o && !Number.isInteger(l))
+          throw new Error(`Invalid row.dataset.arrayIndex="${i.dataset.arrayIndex}"`);
+        if (a && s !== e + n)
+          throw new Error(
+            `rowIndex drift: expected=${e + n}, actual=${s}`
+          );
+      }
+    });
+  }
+  assertColumnWidthsLengthMatchColumnsLength() {
+    this.check(() => {
+      const t = this._renderer._visibleColDefs.filter((r) => r.pinned === "left"), e = this._renderer._visibleColDefs.filter((r) => r.pinned !== "left");
+      if (this._renderer._centerColumnWidths.length !== e.length)
+        throw new Error(
+          `_centerColumnWidths/centerCols mismatch: widths=${this._renderer._centerColumnWidths.length}, centerCols=${e.length}`
+        );
+      if (this._renderer._leftColumnWidths.length !== t.length)
+        throw new Error(
+          `_leftColumnWidths/leftCols mismatch: widths=${this._renderer._leftColumnWidths.length}, leftCols=${t.length}`
+        );
+      this.print("assertWidthsMatchColumns");
+    });
+  }
+  assertPopulateRowsPreCheck(t, e) {
+    this.check(() => {
+      if (!this._grid._renderer._centerBodyEl) throw new Error("populateRows:  _centerBodyEl is null");
+      if (!this._grid._renderer._centerRowsContainerEl) throw new Error("populateRows: _rowsContainer is null");
+      if (!this._grid._renderer._gridContainerEl) throw new Error("populateRows: _gridContainer is null");
+      if (!Number.isInteger(t) || t < 0)
+        throw new Error(`populateRows: invalid rowCount=${t}`);
+      if (!Number.isInteger(e) || e < 0)
+        throw new Error(`populateRows: invalid firstRenderedRowIndex=${e}`);
+      if (t > this._renderer.renderedRowDivs.length)
+        throw new Error(
+          `populateRows: rowCount (${t}) exceeds rendered row pool (${this._renderer.renderedRowDivs.length}). Did createEmptyRows() run with the right count?`
+        );
+      const r = this._renderer._visibleColDefs.filter((i) => i.pinned === "left"), n = this._renderer._visibleColDefs.filter((i) => i.pinned !== "left");
+      if (this._renderer._centerColumnWidths.length !== n.length)
+        throw new Error(
+          `populateRows: centerCols/widths mismatch: cols=${n.length}, widths=${this._renderer._centerColumnWidths.length}`
+        );
+      if (this._renderer._leftColumnWidths.length !== r.length)
+        throw new Error(
+          `populateRows: leftCols/widths mismatch: cols=${r.length}, widths=${this._renderer._leftColumnWidths.length}`
+        );
+      this.print(`assertPopulateRowsPreCheck: rowCount===${t}; firstRenderedRowIndex===${e}`);
+    });
+  }
+  assertWidthsMatch() {
+    this.check(() => {
+      const t = this._renderer._visibleColDefs.filter((r) => r.pinned === "left"), e = this._renderer._visibleColDefs.filter((r) => r.pinned !== "left");
+      if (this._renderer._centerColumnWidths.length !== e.length)
+        throw new Error(
+          `assertWidthsMatch: centerCols/widths mismatch: cols=${e.length}, widths=${this._renderer._centerColumnWidths.length}`
+        );
+      if (this._renderer._leftColumnWidths.length !== t.length)
+        throw new Error(
+          `assertWidthsMatch: leftCols/widths mismatch: cols=${t.length}, widths=${this._renderer._leftColumnWidths.length}`
+        );
+    });
+  }
+  assertPopulateRowsPostCheck(t, e) {
+    this.check(() => {
+      if (this._grid.activeRowIndex == null || !this._grid.activeColField) return;
+      const r = e, n = t > 0 ? e + t - 1 : e - 1, i = this._grid.activeRowIndex >= r && this._grid.activeRowIndex <= n, s = this._grid._renderer._centerBodyEl.querySelector(`.${g.active_cell}`);
+      if (!i) {
+        if (s) {
+          const u = s.closest(".cellux-row");
+          throw new Error(
+            `populateRows: found an active cell in DOM even though active row is not rendered. activeRow=${this._grid.activeRowIndex}, renderedRange=${r}-${n}, staleDomRowIndex=${u?.dataset.rowIndex}, staleArrayIndex=${u?.dataset.arrayIndex}, staleText=${s.textContent}`
+          );
+        }
+        return;
+      }
+      if (!i) {
+        if (s)
+          throw new Error(
+            `populateRows: found an active cell in DOM even though active row is not rendered. activeRow=${this._grid.activeRowIndex}, renderedRange=${r}-${n}`
+          );
+        return;
+      }
+      if (!s)
+        throw new Error(
+          `populateRows: active row is rendered but no active cell in DOM. activeRow=${this._grid.activeRowIndex}, field=${this._grid.activeColField}, renderedRange=${r}-${n}`
+        );
+      s && i && this._consoleLog && this.print(`Active Cell Content: ${s.textContent}`);
+      const l = s.closest(".cellux-row");
+      if (!l) throw new Error("populateRows: active cell exists but no row parent");
+      const a = Number(l.dataset.rowIndex), o = Array.from(l.children).indexOf(s), d = this._renderer._visibleColDefs[o]?.field ?? null;
+      if (a !== this._grid.activeRowIndex || d !== this._grid.activeColField)
+        throw new Error(
+          `populateRows: active mismatch. expected gi=${this._grid.activeRowIndex} field=${this._grid.activeColField} but DOM has gi=${a} field=${d}`
+        );
+      this.print("assertPopulateRowsPostCheck");
+    });
+  }
+  assertColumnSync() {
+  }
+  assertVisibleColOrder() {
+    this.check(() => {
+      const t = this._renderer._allColDefs.filter((r) => !r.hide), e = this._renderer._visibleColDefs;
+      if (t.length !== e.length)
+        throw new Error(
+          `assertVisibleColOrder: length mismatch — _allColDefs yields ${t.length} visible, _visibleColDefs has ${e.length}`
+        );
+      t.forEach((r, n) => {
+        if (r.field !== e[n].field)
+          throw new Error(
+            `assertVisibleColOrder: mismatch at index ${n} — _allColDefs says "${r.field}", _visibleColDefs says "${e[n].field}"`
+          );
+      }), this.print(t), this.print(e);
+    });
+  }
+  assertCenterColDefsSync() {
+    this.check(() => {
+      if (this._renderer._centerColDefs.length !== this._renderer._centerColumnWidths.length)
+        throw new Error(
+          `_centerColDefs/widths mismatch: colDefs=${this._renderer._centerColDefs.length}, widths=${this._renderer._centerColumnWidths.length}`
+        );
+      if (this._renderer._leftColDefs.length !== this._renderer._leftColumnWidths.length)
+        throw new Error(
+          `_leftColDefs/widths mismatch: colDefs=${this._renderer._leftColDefs.length}, widths=${this._renderer._leftColumnWidths.length}`
+        );
+    });
+  }
+  assertPanelColDefsMatchVisible() {
+    this.check(() => {
+      const t = this._renderer._visibleColDefs.filter((r) => r.pinned === "left"), e = this._renderer._visibleColDefs.filter((r) => r.pinned !== "left");
+      if (this._renderer._leftColDefs.length !== t.length)
+        throw new Error(
+          `_leftColDefs out of sync with _visibleColDefs: leftColDefs=${this._renderer._leftColDefs.length}, expected=${t.length}`
+        );
+      if (this._renderer._centerColDefs.length !== e.length)
+        throw new Error(
+          `_centerColDefs out of sync with _visibleColDefs: centerColDefs=${this._renderer._centerColDefs.length}, expected=${e.length}`
+        );
+      t.forEach((r, n) => {
+        if (this._renderer._leftColDefs[n]?.field !== r.field)
+          throw new Error(
+            `_leftColDefs field mismatch at ${n}: expected="${r.field}", got="${this._renderer._leftColDefs[n]?.field}"`
+          );
+      }), e.forEach((r, n) => {
+        if (this._renderer._centerColDefs[n]?.field !== r.field)
+          throw new Error(
+            `_centerColDefs field mismatch at ${n}: expected="${r.field}", got="${this._renderer._centerColDefs[n]?.field}"`
+          );
+      });
+    });
+  }
+  assertHeaderDomMatchesPanelColDefs() {
+    this.check(() => {
+      const t = this._renderer._centerHeaderInnerEl.querySelectorAll(".header-cell");
+      if (t.length !== this._renderer._centerColDefs.length)
+        throw new Error(
+          `Center header DOM/colDefs mismatch: DOM=${t.length}, _centerColDefs=${this._renderer._centerColDefs.length}`
+        );
+      const e = this._renderer._leftHeaderInnerEl.querySelectorAll(".header-cell");
+      if (e.length !== this._renderer._leftColDefs.length)
+        throw new Error(
+          `Left header DOM/colDefs mismatch: DOM=${e.length}, _leftColDefs=${this._renderer._leftColDefs.length}`
+        );
+    });
+  }
+  assertNoDuplicateFields() {
+    this.check(() => {
+      const t = this._renderer._allColDefs.map((r) => r.field);
+      if (new Set(t).size !== t.length) {
+        const r = t.filter((n, i) => t.indexOf(n) !== i);
+        throw new Error(`Duplicate fields in _allColDefs: ${r.join(", ")}`);
+      }
+    });
+  }
+  assertHiddenColsNotVisible() {
+    this.check(() => {
+      const t = this._renderer._allColDefs.filter((e) => e.hide);
+      for (const e of t)
+        if (this._renderer._visibleColDefs.find((r) => r.field === e.field))
+          throw new Error(
+            `Hidden column "${e.field}" found in _visibleColDefs`
+          );
+    });
+  }
+  assertPanelCellCountMatchesColDefs() {
+    this.check(() => {
+      const t = this._renderer._centerColDefs.length;
+      this._renderer._centerRenderedRowDivs.forEach((r, n) => {
+        const i = r.children.length;
+        if (i !== t)
+          throw new Error(
+            `Center row ${n} has ${i} cells but _centerColDefs has ${t} columns`
+          );
+      });
+      const e = this._renderer._leftColDefs.length;
+      this._renderer._leftRenderedRowDivs.forEach((r, n) => {
+        const i = r.children.length;
+        if (i !== e)
+          throw new Error(
+            `Left row ${n} has ${i} cells but _leftColDefs has ${e} columns`
+          );
+      });
+    });
+  }
+  assertHeaderCellCountMatchesColDefs() {
+    this.check(() => {
+      const t = this._renderer._centerHeaderInnerEl?.children.length ?? 0;
+      if (t !== this._renderer._centerColDefs.length)
+        throw new Error(
+          `Center header has ${t} cells but _centerColDefs has ${this._renderer._centerColDefs.length}`
+        );
+      const e = this._renderer._leftHeaderInnerEl?.children.length ?? 0;
+      if (e !== this._renderer._leftColDefs.length)
+        throw new Error(
+          `Left header has ${e} cells but _leftColDefs has ${this._renderer._leftColDefs.length}`
+        );
+    });
+  }
+  print(t) {
+    this._consoleLog && console.log(t);
+  }
+}
+class fe {
+  constructor(t) {
+    if (this._grid = t, this._centerColumnWidths = [], this._leftColumnWidths = [], this._leftRenderedRowDivs = [], this._centerRenderedRowDivs = [], this._visibleColDefs = [], this._allColDefs = [], this._leftColDefs = [], this._centerColDefs = [], this._firstDataRendered = !1, this.buildGridSkeleton = () => {
+      const e = g;
+      this._rootEl.innerHTML = `
+    <div class="${e.cx_grid_container}" data-grid tabindex="0">
+
+      <div class="${e.grid_viewport}">
+
+        <!-- Left Pinned Zone -->
+         <!-- I set --grid-columns in updateGridTemplateColumns-->
+        <div class="${e.left_panel}" >
+          <div class="${e.header} ${e.header_left}">
+            <div class="${e.header_inner}">
+              ${this._leftColDefs.map((r, n) => `
+              <div class="${e.header_cell}"
+                      ${C.dataColIndex}="${n}"
+                      ${C.dataField}="${r.field}"
+                      draggable="true">
+                  <span class="${e.header_label}" style="${r.sortable !== !1 ? "cursor:pointer" : ""}">
+                    ${r.headerName}
+                  </span>
+                  <span class="${e.header_menu_icon}" ${C.dataColIndex}="${n}" ${C.dataField}="${r.field}">☰</span>
+                  <span class="${e.col_resizer}" aria-hidden="true"></span>
+              </div>`).join("")}
+            </div>
+          </div>
+          <div class="${e.grid_body} ${e.grid_body_left} ">
+            <div class="${e.rows_container} ${e.rows_container_left} "></div>
+          </div>
+        </div>
+
+        <!-- Center Zone -->
+        <!-- I set --grid-columns in updateGridTemplateColumns-->
+        <div class="${e.center_panel}">
+          <div class="${e.header} ${e.header_center}">
+            <div class="${e.header_inner}">
+              ${this._centerColDefs.map((r, n) => `
+              <div class="${e.header_cell}"
+                      ${C.dataColIndex}="${n}"
+                      ${C.dataField}="${r.field}"
+                      draggable="true">
+                  <span class="${e.header_label}" style="${r.sortable !== !1 ? "cursor:pointer" : ""}">
+                    ${r.headerName}
+                  </span>
+                  <span class="${e.header_menu_icon}"  
+                               ${C.dataColIndex}="${n}"  
+                               ${C.dataField}="${r.field}">☰</span>
+                  <span class="${e.col_resizer}" aria-hidden="true"></span>
+              </div>`).join("")}
+            </div>
+          </div>
+          <div class="${e.grid_body} ${e.grid_body_center}">
+            <div class="${e.rows_container} ${e.rows_container_center}"></div>
+          </div>
+        </div>
+
+      </div>
+
+      <div class="${e.status_bar}">
+        <!--Nothing for now -->
+        <span></span>
+      </div>
+
+    </div>`, this.cacheDOMElements(), this._assertions.assertDomWired(), this.updateGridTemplateColumns(), this.updateLeftZoneWidth();
+    }, !this._grid.rootEl) throw new Error("rootEl undefined in Renderer ctor");
+    if (!this._grid.options) throw new Error("options undefined in Renderer ctor");
+    this._rootEl = this._grid.rootEl, this._options = this._grid.options, this._allColDefs = this._options.columnDefs.map((e) => this._grid.resolveColDef(e)), this.recomputeColDefsAndWidths(), this._assertions = new ue(this._grid, this);
+  }
+  /**
+  * Measure the visible height of the scrollable grid body and publish it to state.
+  * Used during initial setup to give the virtualizer a real viewport height so it
+  * can compute how many rows to render. Safely no-ops if the body isn’t laid out yet
+  * (clientHeight === 0). On a successful read, flips `viewportMeasured` so the initial
+  * render path can skip re-measuring; later size changes are handled by the ResizeObserver.
+  * If there are any that is.
+  */
+  measureViewportHeight() {
+    const t = this._rootEl.querySelector(`.${g.grid_body_center}`);
+    t && t.clientHeight > 0 && (this._grid.currentState.viewportHeight = t.clientHeight);
+  }
+  // public updateGridTemplateColumns(): void {
+  //     const u = util;
+  //     // Center zone
+  //     const centerEl = this._rootEl.querySelector<HTMLElement>('.center-panel');
+  //     if (centerEl) {
+  //         const centerTemplate = u.convertWidthArrayToString(this._centerColumnWidths);
+  //         centerEl.style.setProperty('--grid-columns', centerTemplate);
+  //     } else {
+  //     }
+  //     // Left zone
+  //     const leftEl = this._leftEl;
+  //     if (leftEl) {
+  //         const leftTemplate = u.convertWidthArrayToString(this._leftColumnWidths);
+  //         leftEl.style.setProperty('--grid-columns', leftTemplate);
+  //     } else {
+  //     }
+  // }
+  updateGridTemplateColumns() {
+    const t = N;
+    if (this._centerPanelEl) {
+      const e = this._centerColumnWidths.length > 0 ? t.convertWidthArrayToString(this._centerColumnWidths) : "0px";
+      this._centerPanelEl.style.setProperty("--grid-columns", e);
+    }
+    if (this._leftPanelEl) {
+      const e = this._leftColumnWidths.length > 0 ? t.convertWidthArrayToString(this._leftColumnWidths) : "0px";
+      this._leftPanelEl.style.setProperty("--grid-columns", e);
+    }
+  }
+  resetRowPool() {
+    this._centerRenderedRowDivs = [], this._leftRenderedRowDivs = [];
+  }
+  /**
+   * Initializes the recycled DOM pool with `n` empty row divs.
+   * 
+   * Creates row container divs with pre-structured cell children, one cell per column.
+   * These rows form a reusable pool for virtual scrolling - as the user scrolls, these
+   * same DOM elements are repositioned and repopulated with different data rather than
+   * creating/destroying elements continuously.
+   * 
+   * Called once during grid initialization. If the pool already has `n` or more rows,
+   * no new elements are created (idempotent).
+   * 
+   * @param n - Number of row divs to ensure exist in the pool
+   */
+  initializePool(t, e, r, n) {
+    const i = g;
+    for (; r.length < t; ) {
+      const s = document.createElement("div");
+      s.className = i.row, s.setAttribute("role", "row"), e.forEach(() => {
+        const l = document.createElement("div");
+        l.className = i.cell, l.setAttribute("role", "grid_cell"), s.appendChild(l);
+      }), n.appendChild(s), r.push(s);
+    }
+  }
+  initializeRowPool(t) {
+    this.initializePool(
+      t,
+      this._centerColDefs,
+      this._centerRenderedRowDivs,
+      this._centerRowsContainerEl
+    ), this._assertions.assertColumnWidthsLengthMatchColumnsLength(), this._assertions.assertHeaderCountMatchesColumnCount();
+  }
+  initializeLeftRowPool(t) {
+    this.initializePool(
+      t,
+      this._leftColDefs,
+      this._leftRenderedRowDivs,
+      this._leftRowsContainerEl
+    );
+  }
+  populatePanel(t, e, r, n, i) {
+    const s = g;
+    if (this._options.rowData) {
+      for (let l = 0; l < t; l++) {
+        const a = this._grid._filteredAndSortedIndices[e + l];
+        if (a === void 0) {
+          if (!i) throw new Error("populatePanel: arrayIndex is undefined.");
+          return;
+        }
+        const o = Math.round((e + l) * this._grid.currentState.rowHeight), d = n[l];
+        if (!d) throw new Error(`populatePanel: rowDiv at index ${l} is undefined.`);
+        const u = this._options.rowData[a];
+        if (!u) {
+          d.classList.remove(s.active_row), d.dataset.arrayIndex = "", d.dataset.rowIndex = "", d.dataset.yPos = "";
+          for (let c = 0; c < d.children.length; c++) {
+            const f = d.children[c];
+            f.classList.remove(s.active_cell), f.classList.remove(s.visual_cell);
+          }
+          continue;
+        }
+        d.style.transform = `translate3d(0, ${o}px, 0)`, d.dataset.arrayIndex = String(a), d.dataset.rowIndex = String(e + l), d.dataset.yPos = o.toString(), i || (a === this._grid.activeArrayIndex ? d.classList.add(s.active_row) : d.classList.remove(s.active_row)), r.forEach((c, f) => {
+          const _ = d.children[f];
+          if (!_) {
+            if (!i) throw new Error(`populatePanel: missing cell at colIndex ${f}.`);
+            return;
+          }
+          this.populateCell(_, c, u, a, e + l);
+          const p = this._grid.activeRowIndex === e + l && this._grid.activeColField === c.field;
+          _.classList.toggle(s.active_cell, p), _.classList.toggle(s.visual_cell, p);
+        });
+      }
+      for (let l = t; l < n.length; l++) {
+        const a = n[l];
+        if (a) {
+          a.classList.remove(s.active_row), a.dataset.arrayIndex = "", a.dataset.rowIndex = "", a.dataset.yPos = "", i && (a.style.display = "none");
+          for (let o = 0; o < a.children.length; o++) {
+            const d = a.children[o];
+            d.classList.remove(s.active_cell), d.classList.remove(s.visual_cell);
+          }
+        }
+      }
+    }
+  }
+  populateCenterRows(t, e) {
+    this._options.rowData && (this._assertions.assertPopulateRowsPreCheck(t, e), this.populatePanel(
+      t,
+      e,
+      this._centerColDefs,
+      this._centerRenderedRowDivs,
+      !1
+    ), !this._firstDataRendered && t > 0 && (this._firstDataRendered = !0, this._options.onFirstDataRendered?.({
+      api: this._grid,
+      rowCount: this._options.rowData.length
+    })), this._assertions.assertRenderedRowsValid(t, e), this._assertions.assertColumnSync(), this._grid.updateDebugOverlay());
+  }
+  populateLeftRows(t, e) {
+    this._options.rowData && this._leftColDefs.length !== 0 && this.populatePanel(
+      t,
+      e,
+      this._leftColDefs,
+      this._leftRenderedRowDivs,
+      !0
+    );
+  }
+  updateLeftZoneWidth() {
+    if (!this._leftPanelEl) return;
+    const t = this._leftColumnWidths.reduce((e, r) => e + r, 0);
+    this._leftPanelEl.style.width = `${t}px`;
+  }
+  cacheDOMElements() {
+    const t = g;
+    this._gridContainerEl = this._rootEl.querySelector(`.${t.cx_grid_container}`), this.cacheCheck(this._gridContainerEl, `${t.cx_grid_container}`), this._centerHeaderEl = this._rootEl.querySelector(`.${t.header_center}`), this.cacheCheck(this._centerHeaderEl, `.${t.header_center}`), this._leftHeaderEl = this._rootEl.querySelector(`.${t.header_left}`), this.cacheCheck(this._leftHeaderEl, `.${t.header_left}`), this._centerHeaderInnerEl = this._rootEl.querySelector(`.${t.header_center} .${t.header_inner}`), this.cacheCheck(this._centerHeaderInnerEl, `.${t.header_center} .${t.header_inner}`), this._centerBodyEl = this._rootEl.querySelector(`.${t.grid_body_center}`), this.cacheCheck(this._centerBodyEl, `.${t.grid_body_center}`), this._centerRowsContainerEl = this._rootEl.querySelector(`.${t.rows_container_center}`), this.cacheCheck(this._centerRowsContainerEl, `.${t.rows_container_center}`), this._centerPanelEl = this._rootEl.querySelector(`.${t.center_panel}`), this.cacheCheck(this._centerPanelEl, `.${t.center_panel}`), this._leftPanelEl = this._rootEl.querySelector(`.${t.left_panel}`), this.cacheCheck(this._leftPanelEl, `.${t.left_panel}`), this._leftHeaderInnerEl = this._rootEl.querySelector(`.${t.header_left} .${t.header_inner}`), this.cacheCheck(this._leftHeaderInnerEl, `.${t.header_left} .${t.header_inner}`), this._leftBodyEl = this._rootEl.querySelector(".grid-body-left"), this.cacheCheck(this._leftBodyEl), this._leftRowsContainerEl = this._rootEl.querySelector(`.${t.rows_container_left}`), this.cacheCheck(this._leftRowsContainerEl, `.${t.rows_container_left}`);
+  }
+  cacheCheck(t, e = "MISSING") {
+    const r = `Check Renderer::cacheDOMElements!! classList: ${e}`;
+    if (!t) throw new Error(r);
+  }
+  headerCallbacks() {
+    Array.from(L().children), this._visibleColDefs.forEach((t, e) => {
+    });
+  }
+  // On Renderer
+  syncRowVisibility(t) {
+    for (let e = 0; e < this._centerRenderedRowDivs.length; e++) {
+      const r = this._centerRenderedRowDivs[e];
+      if (!r) throw new Error(`syncRowVisibility: center rowDiv at index ${e} is undefined`);
+      r.style.display = e < t ? "" : "none";
+    }
+    for (let e = 0; e < this._leftRenderedRowDivs.length; e++) {
+      const r = this._leftRenderedRowDivs[e];
+      if (!r) throw new Error(`syncRowVisibility: left rowDiv at index ${e} is undefined`);
+      r.style.display = e < t ? "" : "none";
+    }
+  }
+  syncHorizontalHeaderScroll(t) {
+    if (!this._centerHeaderInnerEl)
+      throw new Error("_centerHeaderInnerEl undefined in syncHeaderScroll");
+    this._centerHeaderInnerEl.style.transform = `translateX(${-t}px)`;
+  }
+  destroy() {
+    this._centerRenderedRowDivs = [];
+  }
+  test() {
+    return this._centerRenderedRowDivs;
+  }
+  prepareCellForRender(t) {
+    t.className = g.cell, t.removeAttribute("style");
+  }
+  // ~mdev
+  populateCell(t, e, r, n, i) {
+    this._assertions.check(() => {
+      if (!e?.field) throw new Error("updateCell: col is missing field");
+    }), this.prepareCellForRender(t);
+    const s = {
+      data: r,
+      rowIndex: i,
+      arrayIndex: n,
+      colDef: e,
+      api: this._grid.api,
+      value: r?.[e.field],
+      cellElement: t
+    }, l = e.valueGetter ? e.valueGetter({ cellElement: t, data: r, rowIndex: i, arrayIndex: n, colDef: e, api: this._grid.api, value: r?.[e.field] }) : r?.[e.field];
+    s.value = l;
+    const a = e.valueFormatter ? e.valueFormatter(s) : l;
+    if (e.cellStyle && this.applyCellStyle(t, e.cellStyle, s), e.cellClass && this.applyCellClass(t, e.cellClass, s), e.cellRenderer) {
+      const o = e.cellRenderer(s);
+      t.innerHTML = "", typeof o == "string" ? t.innerHTML = o : t.appendChild(o);
+    } else
+      t.textContent = String(a ?? "");
+  }
+  applyCellClass(t, e, r) {
+    if (!e) return;
+    const n = typeof e == "function" ? e(r) : e;
+    Array.isArray(n) ? t.classList.add(...n) : n && t.classList.add(n);
+  }
+  applyCellStyle(t, e, r) {
+    if (!e) return;
+    const n = typeof e == "function" ? e(r) : e;
+    if (e) {
+      const i = { ...n };
+      if (i.textAlign && !i.justifyContent) {
+        const s = String(i.textAlign), l = {
+          left: "flex-start",
+          right: "flex-end",
+          center: "center",
+          justify: "space-between"
+          // bonus: makes justify work too
+        };
+        l[s] && (i.justifyContent = l[s], delete i.textAlign);
+      }
+      Object.assign(t.style, i);
+    }
+  }
+  recomputeColDefsAndWidths() {
+    this._visibleColDefs = this._allColDefs.filter((t) => !t.hide), this._leftColDefs = this._visibleColDefs.filter((t) => t.pinned === "left"), this._centerColDefs = this._visibleColDefs.filter((t) => t.pinned !== "left"), this._leftColumnWidths = this._leftColDefs.map((t) => t.width ?? 100), this._centerColumnWidths = this._centerColDefs.map((t) => t.width ?? 100);
+  }
+  recomputeRowDivs() {
+    const { firstRenderedRowIndex: t, renderedRowCount: e } = this._grid.computeRenderedRowCount();
+    this.resetRowPool(), this.initializeRowPool(e), this.initializeLeftRowPool(e);
+  }
+  buildHeaderCell(t, e) {
+    const r = document.createElement("div");
+    return r.className = g.header_cell, r.setAttribute(`${C.dataField}`, t.field), r.setAttribute(`${C.dataColIndex}`, String(e)), r.draggable = !0, r.innerHTML = `
+        <span class="${g.header_label}" style="${t.sortable !== !1 ? "cursor:pointer" : ""}">
+            ${t.headerName}
+        </span>
+        <span class="${g.header_menu_icon}" ${C.dataColIndex}="${e}" ${C.dataField}="${t.field}">☰</span>
+        <span class="${g.col_resizer}" ${C.dataResizeIndex}="${e}" aria-hidden="true"></span>
+    `, r;
+  }
+  get renderedRowDivs() {
+    return this._centerRenderedRowDivs;
+  }
+  get firstDataRendered() {
+    return this._firstDataRendered;
+  }
+  get rootEl() {
+    return this._rootEl;
+  }
+  get bodyEl() {
+    return this._centerBodyEl;
+  }
+  get headerInnerEl() {
+    return this._centerHeaderInnerEl;
+  }
+}
+class _e {
+  constructor(t) {
+    if (this._grid = t, this._columnFiltersMap = /* @__PURE__ */ new Map(), this._filteredIndices = [], !this._grid.options)
+      throw new Error("options undefined in Filter constructor");
+    this._grid.options.rowData && (this._filteredIndices = [...Array(this._grid.options.rowData.length).keys()]);
+  }
+  loadFilterState() {
+    if (!this._grid.options) return;
+    const t = this._grid.options;
+    if (!t.filterStateKey) return;
+    const e = localStorage.getItem(t.filterStateKey);
+    if (e)
+      try {
+        const r = JSON.parse(e);
+        this._columnFiltersMap.clear(), r.forEach((n) => {
+          t.columnDefs.some((s) => s.field === n.field) && n.filterValues && n.filterValues.length > 0 && this._columnFiltersMap.set(n.field, new Set(n.filterValues));
+        });
+      } catch (r) {
+        console.warn("Failed to load filter state. Not necessarily a bad thing.", r), localStorage.removeItem(t.filterStateKey);
+      }
+  }
+  saveFilterState() {
+    if (!this._grid.options || !this._grid.options.filterStateKey) return;
+    const t = [];
+    this._columnFiltersMap.forEach((e, r) => {
+      t.push({
+        field: r,
+        filterValues: Array.from(e)
+      });
+    }), localStorage.setItem(
+      this._grid.options.filterStateKey,
+      JSON.stringify(t)
+    );
+  }
+  applyColumnFilters() {
+    if (!this._grid.options)
+      return;
+    if (this._columnFiltersMap.size === 0) {
+      this._filteredIndices = [...Array(this._grid.options.rowData.length).keys()], this._grid.onFilterChanged(), this.saveFilterState();
+      return;
+    }
+    const e = [...Array(this._grid.options.rowData.length).keys()].filter((r) => {
+      const n = this._grid.options.rowData[r];
+      if (!n) throw new Error("row undefined in applyColumnFilters");
+      for (const [i, s] of this._columnFiltersMap) {
+        const l = n[i];
+        if (!s.has(l))
+          return !1;
+      }
+      return !0;
+    });
+    this._filteredIndices = [...e], this._grid.onFilterChanged(), this.saveFilterState();
+  }
+  getDistinctValuesByField(t) {
+    if (!this._grid.options) return [];
+    const e = /* @__PURE__ */ new Set();
+    return this._grid.options.rowData.forEach((r) => {
+      const n = r[t];
+      e.add(n);
+    }), Array.from(e).sort((r, n) => r == null && n == null ? 0 : r == null ? 1 : n == null ? -1 : this._grid.collator.compare(String(r), String(n)));
+  }
+  clearColumnFilter(t) {
+    this._columnFiltersMap.has(t) && (this._columnFiltersMap.delete(t), this.applyColumnFilters());
+  }
+  clearColumnFilters() {
+    this._columnFiltersMap.clear();
+    const t = this._grid.options;
+    t && (this._filteredIndices = [...Array(t.rowData.length).keys()], this._grid._sort.applySort(), this._grid.updateTotalRowsDisplay(), this._grid.refreshGrid(), this._grid._tabBuilder.updateFilterIcons(), this.saveFilterState());
+  }
+  get filteredIndices() {
+    return this._filteredIndices;
+  }
+  set filteredIndices(t) {
+    this._filteredIndices = [...t];
+  }
+}
+class pe {
+  constructor(t) {
+    if (this._grid = t, this.sortModelArray = [], this.updateSortModel = (e, r = !1) => {
+      if (!this._grid.options) return;
+      let n = Array.isArray(this.sortModelArray) ? [...this.sortModelArray] : [];
+      if (r) {
+        const i = n.find((s) => s.field === e);
+        i ? i.dir === "asc" ? i.dir = "desc" : n = n.filter((s) => s.field !== e) : n.push({ field: e, dir: "asc" });
+      } else {
+        const i = n.find((s) => s.field === e);
+        i ? i.dir === "asc" ? n = [{ field: e, dir: "desc" }] : n = [] : n = [{ field: e, dir: "asc" }];
+      }
+      this.sortModelArray = [...n], this.onSortChanged(this.sortModelArray);
+    }, this.compare = (e, r, n) => {
+      const i = e == null, s = r == null;
+      if (i || s) return i === s ? 0 : (i ? 1 : -1) * (n === "asc" ? 1 : -1);
+      if (typeof e == "number" && typeof r == "number")
+        return (e < r ? -1 : e > r ? 1 : 0) * (n === "asc" ? 1 : -1);
+      if (e instanceof Date && r instanceof Date) {
+        const a = e.getTime() - r.getTime();
+        return (a === 0 ? 0 : a < 0 ? -1 : 1) * (n === "asc" ? 1 : -1);
+      }
+      return this._grid.collator.compare(String(e), String(r)) * (n === "asc" ? 1 : -1);
+    }, !this._grid.options)
+      throw new Error("options undefined in Filter constructor");
+    this._grid.options.rowData && (this._grid._filter.filteredIndices = [...Array(this._grid.options.rowData.length).keys()]);
+  }
+  onSortChanged(t) {
+    this._grid.options && (this._grid._colStateMgr.saveColumnState(), this.applySort(), this.updateHeaderSortIndicators(), this._grid.options.onSortChanged?.(this.sortModelArray));
+  }
+  applySort() {
+    this.prepareFilteredSort();
+    const { firstRenderedRowIndex: t, renderedRowCount: e } = this._grid.computeRenderedRowCount();
+    this._grid._renderer.populateCenterRows(e, t), this._grid._renderer.populateLeftRows(e, t);
+  }
+  // Check to see if we're sorting filtered data. IF SO,
+  // spread from this._filter.filteredIndices. 
+  prepareFilteredSort() {
+    const t = [...this._grid._filter.filteredIndices];
+    this.sortModelArray.length > 0 && this.sortRows(t), this._grid._filteredAndSortedIndices = t;
+  }
+  // indices -> mutate in place. 
+  sortRows(t) {
+    const e = this._grid.options;
+    e && t.sort((r, n) => {
+      const i = e.rowData[r], s = e.rowData[n];
+      if (!i || !s)
+        throw new Error(`sortRows: rowData undefined at index ${r} or ${n}`);
+      for (const { field: l, dir: a } of this.sortModelArray) {
+        const o = this.compare(i[l], s[l], a);
+        if (o !== 0) return o;
+      }
+      return 0;
+    });
+  }
+  updateHeaderSortIndicators() {
+    const t = this._grid._renderer._centerHeaderEl.querySelectorAll(`[${C.dataField}]`), e = this._grid._renderer._leftHeaderEl.querySelectorAll(`[${C.dataField}]`);
+    this._updateHeaderSortIndicators(t), this._updateHeaderSortIndicators(e);
+  }
+  _updateHeaderSortIndicators(t) {
+    const e = g;
+    t.forEach((r) => {
+      const n = r.getAttribute(C.dataField), i = P(r, this._grid);
+      if (!i) return;
+      const s = i.headerValueGetter ? i.headerValueGetter(i) : i.headerName, l = r.querySelector(`.${e.header_label}`);
+      if (!l) return;
+      const a = this.sortModelArray.findIndex((f) => f.field === n);
+      if (a === -1) {
+        l.textContent = s;
+        return;
+      }
+      const u = this.sortModelArray[a].dir === "asc" ? " ▲" : " ▼", c = this.sortModelArray.length > 1 ? ` ${a + 1}` : "";
+      l.textContent = s + u + c;
+    });
+  }
+  getNodeList() {
+    return this._grid._renderer._centerHeaderEl.querySelectorAll(`[${C.dataField}]`);
+  }
+}
+class ge {
+  constructor(t) {
+    this._grid = t, this._activeTab = "filter", this._containerEl = document.createElement("div"), this._containerEl.className = "fn-column-menu";
+  }
+  build(t, e, r) {
+    return this._containerEl.innerHTML = `
+            <div class="fn-column-menu-tabs">
+                <div class="fn-tab fn-tab-active" data-tab="filter">Filter</div>
+                <div class="fn-tab" data-tab="columns">Columns</div>
+                <div class="fn-tab" data-tab="general">General</div>
+                <div class="fn-tab fn-tab-close" data-tab="close">&times;</div>
+            </div>
+            <div class="fn-column-menu-body"></div>
+        `, this._tabDivs = { filter: t, columns: r, general: e }, this.wireTabs(), this.showTab(this._activeTab), this._containerEl;
+  }
+  wireTabs() {
+    this._containerEl.querySelectorAll(".fn-tab").forEach((t) => {
+      const e = t;
+      e.dataset.tab === "close" ? e.addEventListener("click", () => this._containerEl.remove()) : e.addEventListener("click", () => {
+        const r = e.dataset.tab;
+        this.showTab(r);
+      });
+    });
+  }
+  showTab(t) {
+    const e = this._containerEl.querySelector(".fn-column-menu-body");
+    e.innerHTML = "", e.appendChild(this._tabDivs[t]), this._containerEl.querySelectorAll(".fn-tab").forEach((r) => {
+      r.classList.toggle("fn-tab-active", r.dataset.tab === t);
+    });
+  }
+}
+class me {
+  constructor(t) {
+    if (this._grid = t, this.collator = new Intl.Collator(void 0, { numeric: !0, sensitivity: "base" }), this._tabContainerEl = null, !this._grid.options)
+      throw new Error("options undefined in Filter constructor");
+    this._grid.options.rowData;
+  }
+  updateFilterIcons() {
+    const t = g, e = this._grid._renderer._centerHeaderEl.querySelectorAll(`.${t.header_cell}`);
+    if (!e) {
+      console.error("updateFilterIcons: headerCells div undefined");
+      return;
+    }
+    e.forEach((r) => {
+      const n = r.dataset.field;
+      if (!n) {
+        console.error("updateFilterIcons: field attribute undefined");
+        return;
+      }
+      const i = r.querySelector(`.${t.header_menu_icon}`);
+      if (!i) {
+        console.error("updateFilterIcons: icon div undefined");
+        return;
+      }
+      n && this.isColumnFiltered(n) ? (i.classList.add("filtered"), i.textContent = "⚑") : (i.classList.remove("filtered"), i.textContent = "☰");
+    });
+  }
+  isColumnFiltered(t) {
+    return this._grid._filter._columnFiltersMap.has(t);
+  }
+  buildTabContainer(t, e) {
+    if (!this._grid.options) return;
+    const r = e.dataset.field, n = document.querySelector(".fn-filter-dropdown");
+    if (n) {
+      n.remove();
+      return;
+    }
+    const i = new ge(this._grid);
+    let s = null, l = null, a = null;
+    this._grid.options.onBuildFilterTab && (s = this._grid.options.onBuildFilterTab(r, this._grid)), s || (s = this.buildFilterTab(t, e)), this._grid.options.onBuildFieldListTab && (l = this._grid.options.onBuildFieldListTab(r, this._grid)), l || (l = this.buildFieldListTab(t, e)), this._grid.options.onBuildGeneralTab && (a = this._grid.options.onBuildGeneralTab(r, this._grid)), a || (a = this.buildGeneralTab(t, e)), this._tabContainerEl = i.build(s, a, l), this._tabContainerEl.classList.add("fn-filter-dropdown");
+    const o = e.getBoundingClientRect();
+    this._tabContainerEl.style.left = `${o.left}px`, this._tabContainerEl.style.top = `${o.bottom + 4}px`, this._tabContainerEl.addEventListener("click", (c) => {
+      c.stopPropagation();
+    });
+    const d = () => {
+      console.log("closeMenu"), this._tabContainerEl.remove(), u.removeEventListener("scroll", d), window.removeEventListener("scroll", d);
+    }, u = this._grid._renderer._centerBodyEl;
+    u.addEventListener("scroll", d, { once: !0 }), window.addEventListener("scroll", d, { once: !0 }), setTimeout(() => {
+      document.addEventListener("click", d, { once: !0 });
+    }, 0), document.body.appendChild(this._tabContainerEl);
+  }
+  buildFilterTab(t, e) {
+    const r = g, n = document.createElement("div");
+    if (n.textContent = "ERROR MISSING", !this._grid.options) return n;
+    const i = e.closest(`.${r.header_cell}`);
+    if (!i)
+      return console.warn("headerEl undefined in buildFilterTab"), n;
+    const s = i.dataset.field, l = this._grid.options.columnDefs.find((m) => m.field === s);
+    if (!l) return n;
+    const a = this._grid._filter.getDistinctValuesByField(s), o = this._grid._filter._columnFiltersMap.get(s), d = o !== void 0, u = document.createElement("div");
+    u.className = "fn-filter-tab-content", u.innerHTML = `
+        <div class="fn-filter-dropdown-header">
+            Filter: ${l.headerName}
+        </div>
+        <div class="fn-filter-search-box">
+            <input type="text" placeholder="Search..." class="fn-filter-search-input" />
+        </div>
+        <div class="fn-filter-item fn-filter-select-all">
+            <label>
+                <input type="checkbox" ${d ? "" : "checked"} class="select-all-checkbox" />
+                <span>(Select All)</span>
+            </label>
+        </div>
+        <div class="fn-filter-dropdown-list">
+            ${a.map((m) => {
+      const y = !d || o.has(m);
+      return `
+                    <div class="fn-filter-item" data-filter-value="${m ?? ""}">
+                        <label>
+                            <input type="checkbox" ${y ? "checked" : ""} class="value-checkbox" data-value="${m ?? ""}" />
+                            <span>${m ?? "(blank)"}</span>
+                        </label>
+                    </div>
+                `;
+    }).join("")}
+        </div>
+    `;
+    const c = u.querySelector(".fn-filter-search-input"), f = u.querySelectorAll(".fn-filter-item:not(.fn-filter-select-all)");
+    c.addEventListener("input", () => {
+      const m = c.value.toLowerCase();
+      f.forEach((y) => {
+        const w = y.dataset.filterValue || "", v = String(w).toLowerCase();
+        y.style.display = v.includes(m) ? "" : "none";
+      });
+    }), requestAnimationFrame(() => c.focus());
+    const _ = u.querySelector(`.${g.select_all_checkbox}`), p = u.querySelectorAll(".value-checkbox"), R = Array.from(p).every((m) => m.checked), b = Array.from(p).every((m) => !m.checked);
+    return _.indeterminate = !R && !b, _.addEventListener("change", () => {
+      p.forEach((m) => m.checked = _.checked), _.indeterminate = !1, this.updateColumnFilterByField(s, p);
+    }), p.forEach((m) => {
+      m.addEventListener("change", () => {
+        const y = Array.from(p).every((v) => v.checked), w = Array.from(p).every((v) => !v.checked);
+        _.checked = y, _.indeterminate = !y && !w, this.updateColumnFilterByField(s, p);
+      });
+    }), u;
+  }
+  buildFieldListTab(t, e) {
+    const n = this._grid.api.getAllColumns().map((o) => ({ field: o.field, headerName: o.headerName, hide: o.hide ?? !1 })).sort((o, d) => o.headerName.toLowerCase().localeCompare(d.headerName.toLowerCase())), i = document.createElement("div");
+    i.className = "fn-filter-list", i.innerHTML = `<div class="fn-filter-search-box">
+            <input type="text" placeholder="Search..." class="fn-filter-search-input" />
+        </div>`, n.forEach((o) => {
+      const d = document.createElement("div");
+      d.className = "fn-filter-item", d.setAttribute("data-filter-value", o.field), d.innerHTML = `
+            <label>
+            <input type="checkbox" ${o.hide ? "" : "checked"} class="field-checkbox" data-value="${o.field}" />
+            <span>${o.headerName} (${o.field})</span>
+            </label>
+        `, i.appendChild(d);
+    });
+    const s = i.querySelector(".fn-filter-search-input"), l = i.querySelectorAll(".fn-filter-item");
+    return s.addEventListener("input", () => {
+      const o = s.value.toLowerCase();
+      l.forEach((d) => {
+        const u = d.dataset.filterValue || "", c = String(u).toLowerCase();
+        d.style.display = c.includes(o) ? "" : "none";
+      });
+    }), i.querySelectorAll(".field-checkbox").forEach((o) => {
+      o.addEventListener("change", () => {
+        const d = o.getAttribute("data-value"), u = o.checked;
+        this.showHideFields(d, u);
+      });
+    }), i;
+  }
+  buildGeneralTab(t, e) {
+    this._grid;
+    const r = g, n = document.createElement("div");
+    if (n.textContent = "ERROR in buildGeneralTab", !this._grid.options || !this._grid.options.columnDefs) return n;
+    const i = document.createElement("div"), l = e.closest(`.${r.header_cell}`).dataset.field, a = this._grid._renderer._visibleColDefs.find((p) => p.field === l), o = a?.pinned === "left";
+    let d = document.createElement("div");
+    d.innerHTML = `
+    <label>
+        <input type="checkbox" ${o ? "checked" : ""} class="pinned-checkbox" />
+        <span>Pin Column Left</span>
+    </label>`, d.className = r.fn_filter_item;
+    const u = d.querySelector(".pinned-checkbox");
+    u && u.addEventListener("change", () => {
+      this._grid.pinColumn(a, u.checked);
+    }), i.append(d);
+    let c = document.createElement("div");
+    c.textContent = "Autosize This Column", c.addEventListener("click", (p) => {
+      console.log("itemAutosizeColumnEl", p), a && l && (this._grid.autoSizeColumn(l), this._tabContainerEl.remove());
+    }, { once: !1 }), c.className = r.fn_filter_item, i.append(c);
+    const f = document.createElement("div");
+    f.textContent = "Autosize All Columns", f.className = r.fn_filter_item, f.addEventListener("click", (p) => {
+      this._grid.autoSizeAllColumns(), this._tabContainerEl.remove();
+    }, { once: !1 }), i.append(f);
+    const _ = document.createElement("div");
+    return _.textContent = "Reset Columns", _.className = r.fn_filter_item, _.addEventListener("click", (p) => {
+      a && l && (this._grid.resetAllColumns(), this._tabContainerEl.remove());
+    }, { once: !1 }), i.append(_), i.className = r.fn_filter_list, i;
+  }
+  showHideFields(t, e) {
+    this._grid.api.setColumnVisible(t, e);
+  }
+  updateColumnFilterByField(t, e) {
+    const r = /* @__PURE__ */ new Set();
+    e.forEach((i) => {
+      if (i.checked) {
+        const s = i.dataset.value;
+        let l;
+        if (s === "")
+          l = null;
+        else {
+          const a = Number(s);
+          !isNaN(a) && s.trim() !== "" ? l = a : l = s;
+        }
+        r.add(l);
+      }
+    });
+    const n = this._grid._filter.getDistinctValuesByField(t);
+    console.log("All distinct values:", n.length), r.size === n.length ? (this._grid._filter._columnFiltersMap.delete(t), console.log("Removed filter - all checked")) : (this._grid._filter._columnFiltersMap.set(t, r), console.log("Set filter with", r.size, "values")), this._grid._filter.applyColumnFilters(), this.updateFilterIcons();
+  }
+}
+class Ce {
+  constructor(t) {
+    this._grid = t, this.cn = g, this.onGridMouseEvent = (e) => {
+      const r = e.target, n = g;
+      if (!(r instanceof HTMLElement) || e.type === "mouseover" || e.type === "mouseenter" || e.type === "mousemove" || e.type === "mouseout")
+        return;
+      if (e.type === "click" && r.classList.contains(n.header_menu_icon)) {
+        e.stopPropagation(), e.preventDefault(), this._grid._tabBuilder.buildTabContainer(e, r);
+        return;
+      }
+      if (e.type === "click" && r.closest(`.${n.header_cell}`)) {
+        this._grid.onColumnSort(e);
+        return;
+      }
+      if (e.type === "click" && this._grid.updateDebugOverlay(), e.type === "dblclick" && r.closest(`.${n.cell}`) && e.preventDefault(), e.type === "mousedown" && r.classList.contains(n.col_resizer)) {
+        this._grid.onResizerMouseDown(e);
+        return;
+      }
+      if (e.type === "dblclick" && r.classList.contains(n.col_resizer)) {
+        this._grid.onAutoResizeColumn(e);
+        return;
+      }
+      const i = r.closest(`.${n.cell}`);
+      if (!i) return;
+      const s = I(i);
+      if (!s) {
+        console.error("getRowFromCell failed in onGridMouseEvent");
+        return;
+      }
+      if (s.closest(`.${this.cn.rows_container_left}`), s.closest(`.${this.cn.rows_container_center}`), e.type === "contextmenu") {
+        if (e.shiftKey || e.ctrlKey)
+          return;
+        const d = $(s);
+        if (d === null) return;
+        this._grid._activeArrayIndex = d, this._grid._activeRowElement = s, localStorage.setItem("activeRowArrayIndex", String(d)), this._grid.setActiveRow(s), this._grid.setActiveCell(i), this._grid.updateDebugOverlay(), this._grid._contextMenu.onContextMenu(e);
+        return;
+      }
+      if (e.type === "click") {
+        const d = $(s);
+        if (d === null) return;
+        this._grid._activeArrayIndex = d, this._grid._activeRowElement = s, localStorage.setItem("activeRowArrayIndex", String(d)), this._grid.setActiveRow(s), this._grid.setActiveCell(i), this._grid.updateDebugOverlay();
+      }
+      const l = this._grid.getCellEventParams(i, e);
+      if (e.type === "dblclick" && l?.colDef?.editable === !0) {
+        this._grid.startCellEditing(e, i);
+        return;
+      }
+      const a = this._grid._rowEventMap[e.type];
+      if (a && this._grid._options[a]) {
+        const d = this._grid.getRowEventParams(e);
+        if (d === null) {
+          console.error("Grid rowEvent null");
+          return;
+        }
+        this._grid._options[a](d);
+      }
+      const o = this._grid._cellEventMap[e.type];
+      if (o && l.colDef[o]) {
+        if (l === null) {
+          console.error("Grid cellEvent null");
+          return;
+        }
+        l.colDef[o](l);
+      }
+    }, this.onGridKeyDown = (e) => {
+      if (e.key === "Tab") {
+        this._grid.handleTabNavigation(e);
+        return;
+      }
+      if (!this._grid._renderer._centerBodyEl) throw new Error("_centerBodyEl undefined in onGridKeyDown");
+      const r = this._grid._renderer._centerBodyEl.querySelector(`.${this.cn.active_cell}`) ?? this._grid._renderer._leftBodyEl?.querySelector(`.${this.cn.active_cell}`);
+      if (!r) {
+        this._grid.focusCell(0, 0);
+        return;
+      }
+      if (!(r.querySelector("input") !== null) && e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {
+        e.preventDefault(), this._grid.startCellEditing(e, r, e.key);
+        return;
+      }
+      if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "PageUp", "PageDown", "Home", "End"].includes(e.key))
+        return;
+      e.preventDefault(), e.stopPropagation();
+      const i = I(r);
+      if (!i) return;
+      const s = S(r, i);
+      if (s === null) return;
+      const l = x(i);
+      if (l === null) return;
+      const a = this._grid._getPinnedCount(), u = (!!i.closest(`.${this.cn.rows_container_left}`) ? 0 : a) + s;
+      let c = l, f = u;
+      const _ = this._grid._renderer._visibleColDefs.length, p = Math.floor(this._grid.currentState.viewportHeight / this._grid.currentState.rowHeight);
+      switch (e.key) {
+        case "ArrowUp":
+          c = Math.max(0, l - 1);
+          break;
+        case "ArrowDown":
+          c = Math.min(this._grid._filteredAndSortedIndices.length - 1, l + 1);
+          break;
+        case "ArrowLeft":
+          f = Math.max(0, u - 1);
+          break;
+        case "ArrowRight":
+          f = Math.min(_ - 1, u + 1);
+          break;
+        case "PageUp":
+          c = Math.max(0, l - p);
+          break;
+        case "PageDown":
+          c = Math.min(this._grid._filteredAndSortedIndices.length - 1, l + p);
+          break;
+        case "Home":
+          e.ctrlKey && (c = 0), f = 0;
+          break;
+        case "End":
+          e.ctrlKey && (c = this._grid._filteredAndSortedIndices.length - 1), f = _ - 1;
+          break;
+      }
+      if (c === l && f === u) {
+        this._grid._console.print("no movement");
+        return;
+      }
+      this._grid.focusCell(c, f);
+    };
+  }
+}
+class we {
+  constructor(t) {
+    this._grid = t, this.loadColumnState = () => {
+      if (!this._grid._options.columnStateKey) return;
+      const e = localStorage.getItem(this._grid._options.columnStateKey);
+      if (!e) return;
+      const r = JSON.parse(e), n = new Map(r.map((o) => [o.field, o]));
+      for (const o of this._grid._renderer._allColDefs) {
+        const d = n.get(o.field);
+        d && (o.pinned = d.pinned === "left" ? "left" : void 0, o.width = d.columnWidth, o.hide = d.hide ?? !1);
+      }
+      this._grid._renderer.recomputeColDefsAndWidths();
+      const i = (o, d) => {
+        const u = new Map(d.map((_) => [_.field, _])), c = [], f = [];
+        for (const _ of o) {
+          const p = u.get(_.field);
+          p ? c.push({ col: _, state: p }) : f.push(_);
+        }
+        return [
+          ...c.sort((_, p) => _.state.columnOrder - p.state.columnOrder).map((_) => _.col),
+          ...f
+        ];
+      }, s = r.filter((o) => o.pinned === "left" && !o.hide), l = r.filter((o) => o.pinned !== "left" && !o.hide);
+      this._grid._renderer._leftColDefs = i(this._grid._renderer._leftColDefs, s), this._grid._renderer._centerColDefs = i(this._grid._renderer._centerColDefs, l), this._grid._renderer._leftColumnWidths = this._grid._renderer._leftColDefs.map((o) => n.get(o.field)?.columnWidth ?? o.width ?? 100), this._grid._renderer._centerColumnWidths = this._grid._renderer._centerColDefs.map((o) => n.get(o.field)?.columnWidth ?? o.width ?? 100), this._grid._renderer._visibleColDefs = [
+        ...this._grid._renderer._leftColDefs,
+        ...this._grid._renderer._centerColDefs
+      ];
+      const a = this._grid._renderer._allColDefs.filter((o) => o.hide);
+      this._grid._renderer._allColDefs = [...this._grid._renderer._visibleColDefs, ...a], this._grid._sort.sortModelArray = r.filter((o) => o.sortDir && o.sortDir !== "none" && o.sortPriority !== void 0).sort((o, d) => o.sortPriority - d.sortPriority).map((o) => ({ field: o.field, dir: o.sortDir }));
+    };
+  }
+  saveColumnState() {
+    if (!this._grid._options.columnStateKey) return;
+    const t = this._grid._renderer._leftColDefs.map((i, s) => {
+      const l = this._grid._sort.sortModelArray.findIndex((d) => d.field === i.field), a = l >= 0 ? this._grid._sort.sortModelArray[l] : void 0, o = this._grid._renderer._leftColumnWidths[s];
+      if (o === void 0) throw new Error(`saveColumnState: left width undefined at index ${s}`);
+      return {
+        columnOrder: s,
+        field: i.field,
+        columnWidth: o,
+        pinned: "left",
+        hide: !1,
+        sortDir: a?.dir ?? "none",
+        sortPriority: l >= 0 ? l : void 0
+      };
+    }), e = this._grid._renderer._centerColDefs.map((i, s) => {
+      const l = this._grid._sort.sortModelArray.findIndex((d) => d.field === i.field), a = l >= 0 ? this._grid._sort.sortModelArray[l] : void 0, o = this._grid._renderer._centerColumnWidths[s];
+      if (o === void 0) throw new Error(`saveColumnState: center width undefined at index ${s}`);
+      return {
+        columnOrder: s,
+        field: i.field,
+        columnWidth: o,
+        pinned: null,
+        hide: !1,
+        sortDir: a?.dir ?? "none",
+        sortPriority: l >= 0 ? l : void 0
+      };
+    }), r = this._grid._renderer._allColDefs.filter((i) => i.hide).map((i, s) => ({
+      columnOrder: t.length + e.length + s,
+      field: i.field,
+      columnWidth: i.width ?? 100,
+      pinned: null,
+      hide: !0,
+      sortDir: "none",
+      sortPriority: void 0
+    })), n = [...t, ...e, ...r];
+    localStorage.setItem(
+      this._grid._options.columnStateKey,
+      JSON.stringify(n)
+    );
+  }
+}
+class ve {
+  // #endregion decl
+  constructor(t, e) {
+    this._rootEl = t, this._options = e, this._debug = !1, this._consoleLog = !0, this._showDebugOverlay = !0, this.cn = g, this._api = null, this._quickFilterText = "", this.MIN_COLUMN_WIDTH = 50, this.MAX_COLUMN_WIDTH = 800, this.gu = N, this._scrollRafId = null, this._pendingScrollTop = 0, this._editInput = null, this._debugEnabled = !0, this._debugEl = null, this._activeArrayIndex = null, this._contextMenuEl = null, this._activeRowIndex = null, this._activeColField = null, this._filteredAndSortedIndices = [], this.collator = new Intl.Collator(void 0, { numeric: !0, sensitivity: "base" }), this._cellEventMap = Z, this._rowEventMap = J, this.currentState = {
+      /**
+       * Current vertical scroll position in pixels, measured from the top of the scrollable content.
+       * 
+       * Starts at 0 when scrolled to the top. Increases as the user scrolls down.
+       * Used to calculate which rows are currently visible in the viewport and need to be rendered.
+       * Updated continuously during scroll events.
+       * 
+       * Example: If scrollTop is 320px and rowHeight is 32px, the first visible row is at index 10.
+       */
+      scrollTop: 0,
+      /**
+       * The visible height of the scrollable grid body in pixels.
+       * 
+       * Used to calculate how many rows can fit in the visible area, which determines
+       * the size of the recycled DOM pool for virtual scrolling. Measured once during
+       * grid initialization from the actual rendered height of the body element.
+       */
+      viewportHeight: 0,
+      // Row height in pixels
+      rowHeight: 0,
+      // this is set in options and copied over.
+      /**
+      * Number of extra rows to render above/below the visible viewport.
+      * Reduces flashing during scroll by pre-rendering rows just outside view.
+      */
+      rowBuffer: 3,
+      totalRows: 0
+    }, this.onResizerMouseDown = (r) => {
+      const n = g, i = r.target.closest(`.${n.header_cell}`);
+      if (!i) return;
+      r.preventDefault(), r.stopPropagation();
+      const s = H(i);
+      if (s === null || !Number.isInteger(s)) return;
+      const l = !!i.closest(`.${n.header_left}`), a = r.clientX, o = l ? this._renderer._leftColumnWidths[s] : this.getColumnWidthInPixels(s), d = (c) => {
+        const f = c.clientX - a, _ = Math.max(50, o + f);
+        l ? (this._renderer._leftColumnWidths[s] = _, this._renderer.updateGridTemplateColumns(), this._renderer.updateLeftZoneWidth()) : this.resizeColumnWidth(s, _);
+      }, u = () => {
+        this._colStateMgr.saveColumnState(), document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", u);
+      };
+      document.addEventListener("mousemove", d), document.addEventListener("mouseup", u);
+    }, this.onScroll = () => {
+      const r = this._renderer._centerBodyEl?.scrollTop ?? 0, n = this._renderer._centerBodyEl?.scrollLeft ?? 0, i = r !== this.currentState.scrollTop;
+      this._pendingScrollTop = r, this._renderer._leftBodyEl.scrollTop = r, this._renderer.syncHorizontalHeaderScroll(n), this._scrollRafId === null && (this._scrollRafId = requestAnimationFrame(() => {
+        this._scrollRafId = null, this.currentState.scrollTop = this._pendingScrollTop;
+        const { firstRenderedRowIndex: s, renderedRowCount: l } = this.computeRenderedRowCount();
+        this._renderer.populateCenterRows(l, s), i && this._renderer.populateLeftRows(l, s);
+      }));
+    }, this.onColumnSort = (r) => {
+      const n = r.target;
+      if (n.classList.contains(g.col_resizer)) return;
+      const i = n.closest(`[${C.dataField}]`);
+      if (!i) return;
+      const s = T(i);
+      if (!s) return;
+      const l = this.getColDef(s);
+      l && l.sortable !== !1 && this._sort.updateSortModel(s, r.shiftKey);
+    }, this.commitCellEdit = () => {
+      const r = this._editingCell;
+      if (!r) return;
+      const { cell: n, colDef: i, rowData: s, arrayIndex: l, rowIndex: a, originalValue: o, customEditor: d } = r, u = i.field;
+      n.classList.remove(this.cn.cell_editing);
+      const c = this._editInput, f = d;
+      this._editingCell = null, this._editInput = null;
+      let _;
+      if (f)
+        _ = f.getValue(), f.destroy?.();
+      else if (c)
+        _ = c.value, c.isConnected && c.remove();
+      else
+        return;
+      const p = o, R = {
+        data: s,
+        rowIndex: a,
+        arrayIndex: l,
+        colDef: i,
+        cellElement: n,
+        oldValue: p,
+        newValue: _,
+        value: p,
+        api: this.api
+      };
+      if (i.valueSetter) {
+        if (!i.valueSetter(R)) {
+          this._renderer.populateCell(n, i, s, l, a), i.onCellEditingStopped && i.onCellEditingStopped({
+            data: s,
+            rowIndex: a,
+            arrayIndex: l,
+            colDef: i,
+            // value: rowData[column.field],
+            value: s[u],
+            cellElement: n
+          }), this.setActiveCell(n);
+          return;
+        }
+      } else
+        s[u] = _;
+      const b = s[u];
+      if (i.onCellValueChanged) {
+        const m = (v) => typeof v == "string" ? this.gu.normalizeTextSoft(v) : v, y = m(p);
+        if (m(b) !== y) {
+          const v = {
+            data: s,
+            rowIndex: a,
+            arrayIndex: l,
+            colDef: i,
+            cellElement: n,
+            oldValue: p,
+            value: b,
+            newValue: b,
+            // Use the actual applied value
+            api: this.api
+          };
+          i.onCellValueChanged(v);
+        }
+      }
+      i.onCellEditingStopped && i.onCellEditingStopped({
+        data: s,
+        rowIndex: a,
+        arrayIndex: l,
+        colDef: i,
+        value: b,
+        cellElement: n
+        // ~AS
+      }), this._renderer.populateCell(n, i, s, l, a), this.setActiveCell(n), this._renderer._gridContainerEl?.focus({ preventScroll: !0 });
+    }, this.cancelCellEdit = (r = !1) => {
+      const n = this._editingCell, i = this._editInput;
+      if (!n) return;
+      this._editingCell = null, this._editInput = null, i?.isConnected && i.remove();
+      const { cell: s, colDef: l, rowData: a, arrayIndex: o, rowIndex: d } = n;
+      this._renderer.populateCell(s, l, a, o, d), l.onCellEditingStopped && l.onCellEditingStopped({
+        data: a,
+        rowIndex: d,
+        arrayIndex: o,
+        colDef: l,
+        value: a[l.field],
+        cellElement: s
+        // ~AS
+      }), r || this.setActiveCell(s);
+    }, this.getColDef = (r) => ((this._renderer._allColDefs.find((i) => i.field === r) ?? null) || console.warn(`Field param ${r} not found`), this._renderer._allColDefs.find((i) => i.field === r) ?? null), this.setRowData = (r) => {
+      this._options.rowData = r, this._filteredAndSortedIndices = [...Array(r.length).keys()], this._filter.clearColumnFilters(), this._sort.prepareFilteredSort(), this._activeArrayIndex = null, this._activeRowIndex = null, this._activeColField = null, this.refreshGrid();
+    }, this._quickFilter = new de(this), this._statusBar = new ae(this, t), this._contextMenu = new ce(this), this._console = new he(this), this._renderer = new fe(this), this._filter = new _e(this), this._tabBuilder = new me(this), this._sort = new pe(this), this._gridEvents = new Ce(this), this._colStateMgr = new we(this), this.currentState.rowHeight = e.rowHeight ? e.rowHeight : 32, this._debugOverlay = new oe(this, this._renderer), this._options?.rowData && (this._filteredAndSortedIndices = [...Array(this._options.rowData.length).keys()]), this._filter.loadFilterState(), this._colStateMgr.loadColumnState();
+  }
+  resolveColDef(t) {
+    return { ...this._options.defaultColDef ?? {}, ...t };
+  }
+  //************************************************************************************* */
+  //************************************************************************************* */
+  //********************************** LIFE CYCLE *************************************** */
+  //************************************************************************************* */
+  //************************************************************************************* */
+  //#region LIFE CYCLE
+  create() {
+    const t = this._filteredAndSortedIndices.length;
+    this._renderer.buildGridSkeleton(), this.applyRowHeight(this.currentState.rowHeight), this._renderer.resetRowPool(), this._renderer.updateLeftZoneWidth(), this._renderer._centerBodyEl.getBoundingClientRect(), this._renderer.measureViewportHeight(), this._statusBar.updateRowsPanel(), this._renderer._centerRowsContainerEl.style.height = `${t * this.currentState.rowHeight}px`, this._renderer._leftRowsContainerEl.style.height = `${t * this.currentState.rowHeight}px`, this._renderer._centerBodyEl.addEventListener("scroll", this.onScroll);
+    const { firstRenderedRowIndex: e, renderedRowCount: r } = this.computeRenderedRowCount();
+    this._options && (this._sort.prepareFilteredSort(), this._renderer.initializeRowPool(r), this._renderer.initializeLeftRowPool(r), this._renderer.populateCenterRows(r, e), this._renderer.populateLeftRows(r, e), this._sort.updateHeaderSortIndicators(), this.attachEvents(), this._filter._columnFiltersMap.size > 0 && (this._filter.applyColumnFilters(), this._tabBuilder.updateFilterIcons()), this._renderer.headerCallbacks(), this._options?.onGridReady?.({ api: this }));
+  }
+  applyRowHeight(t) {
+    document.documentElement.style.setProperty("--cellux-grid-row-height", `${t}px`);
+  }
+  destroy() {
+    this._renderer._centerBodyEl?.removeEventListener("scroll", this.onScroll), this.detachEvents(), this._renderer._centerRowsContainerEl = null, this._renderer._centerBodyEl = null, this._renderer._centerHeaderEl = null, this._renderer._gridContainerEl = null, this._statusBar.destroy(), this._renderer.destroy();
+  }
+  //#endregion LIFE CYCLE
+  computeRenderedRowCount() {
+    return O(this.currentState, this._filteredAndSortedIndices);
+  }
+  // #endregion
+  //************************************************************************************* */
+  //************************************************************************************* */
+  //********************************* AUTO RESIZE *************************************** */
+  //************************************************************************************* */
+  //************************************************************************************* */
+  //#region auto-resize
+  onAutoResizeColumn(t) {
+    if (t.shiftKey) {
+      this.autoSizeAllColumns(), this._colStateMgr.saveColumnState();
+      return;
+    }
+    const e = t.target.closest(`[${C.dataColIndex}]`);
+    if (!e) {
+      console.error("onAutoResizeColumn: error getting variable handle.");
+      return;
+    }
+    const r = T(e);
+    if (!r) {
+      console.error("onAutoResizeColumn: error getting variable field.");
+      return;
+    }
+    this.autoSizeColumn(r), this._colStateMgr.saveColumnState();
+  }
+  autoSizeColumn(t) {
+    const { colIndex: e, isLeft: r } = K(t, this._renderer), n = r ? this._renderer._leftColDefs : this._renderer._centerColDefs;
+    if (e === null) return;
+    const i = n[e], s = document.createElement("div");
+    s.style.visibility = "hidden", s.style.position = "absolute", s.style.whiteSpace = "nowrap", s.classList.add(g.cell), document.body.appendChild(s);
+    let l = 0;
+    s.textContent = i.headerName, l = Math.max(l, s.offsetWidth), (r ? this._renderer._leftRenderedRowDivs : this._renderer._centerRenderedRowDivs).forEach((o) => {
+      if (o.style.display !== "none") {
+        const d = o.children[e];
+        d && (s.textContent = d.textContent || "", l = Math.max(l, s.offsetWidth));
+      }
+    }), document.body.removeChild(s), r ? this._renderer._leftColumnWidths[e] = Math.max(this.MIN_COLUMN_WIDTH, Math.min(this.MAX_COLUMN_WIDTH, l + 20)) : this._renderer._centerColumnWidths[e] = Math.max(this.MIN_COLUMN_WIDTH, Math.min(this.MAX_COLUMN_WIDTH, l + 20)), this._renderer.updateGridTemplateColumns();
+  }
+  // ~autoSizeAllColumns
+  autoSizeAllColumns() {
+    const t = document.createElement("div");
+    t.style.visibility = "hidden", t.style.position = "absolute", t.style.whiteSpace = "nowrap", t.classList.add(g.cell), document.body.appendChild(t);
+    const e = document.createElement("div");
+    e.style.visibility = "hidden", e.style.position = "absolute", e.style.whiteSpace = "nowrap", e.style.display = "flex", e.style.alignItems = "center", e.style.gap = "4px", e.classList.add(g.header_cell), document.body.appendChild(e);
+    const r = (n, i, s, l) => {
+      n.forEach((a, o) => {
+        let d = 0;
+        const u = i.children[o];
+        u && (e.innerHTML = u.innerHTML, d = Math.max(d, e.offsetWidth)), s.forEach((c) => {
+          if (c.style.display !== "none") {
+            const f = c.children[o];
+            f && (t.textContent = f.textContent || "", d = Math.max(d, t.offsetWidth));
+          }
+        }), l[o] = Math.max(this.MIN_COLUMN_WIDTH, Math.min(this.MAX_COLUMN_WIDTH, d + 20));
+      });
+    };
+    this._renderer._leftColDefs.length > 0 && r(
+      this._renderer._leftColDefs,
+      this._renderer._leftHeaderInnerEl,
+      this._renderer._leftRenderedRowDivs,
+      this._renderer._leftColumnWidths
+    ), r(
+      this._renderer._centerColDefs,
+      this._renderer._centerHeaderInnerEl,
+      this._renderer._centerRenderedRowDivs,
+      this._renderer._centerColumnWidths
+    ), document.body.removeChild(t), document.body.removeChild(e), this._renderer.updateGridTemplateColumns(), this._renderer.updateLeftZoneWidth();
+  }
+  //#endregion
+  //************************************************************************************* */
+  //************************************************************************************* */
+  //************************************** EVENTS *************************************** */
+  //************************************************************************************* */
+  //************************************************************************************* */
+  //#region Events
+  attachEvents() {
+    this.detachEvents();
+    const t = this._renderer._gridContainerEl;
+    this.eventAbortController = new AbortController(), Object.keys(this._cellEventMap).forEach((r) => {
+      t?.addEventListener(r, this._gridEvents.onGridMouseEvent, {
+        signal: this.eventAbortController.signal
+      });
+    }), this._renderer._gridContainerEl?.addEventListener("keydown", this._gridEvents.onGridKeyDown, {
+      signal: this.eventAbortController.signal
+    }), this.attachColumnReorderListeners();
+  }
+  setActiveCellCSS(t, e) {
+    e ? (t.classList.add(g.active_cell), t.classList.add(g.visual_cell)) : (t.classList.remove(g.active_cell), t.classList.remove(g.visual_cell));
+  }
+  setActiveCell(t) {
+    const e = this._renderer._centerBodyEl.querySelector(`.${this.cn.active_cell}`) ?? this._renderer._leftBodyEl?.querySelector(`.${this.cn.active_cell}`);
+    e && this.setActiveCellCSS(e, !1), this.setActiveCellCSS(t, !0);
+    const r = I(t);
+    if (r) {
+      this._activeRowIndex = x(r);
+      const n = S(t, r), s = !!r.closest(`.${this.cn.rows_container_left}`) ? this._renderer._leftColDefs : this._renderer._centerColDefs;
+      this._activeColField = n !== null ? s[n]?.field ?? null : null;
+    }
+    this._activeRowIndex !== null && this.ensureRowVisible(this._activeRowIndex), this._debugOverlay.updateDebugOverlay();
+  }
+  // public focusCell(rowIndex: number, colIndexGlobal: number): void {
+  //     this.ensureRowVisible(rowIndex);
+  //     const { firstRenderedRowIndex, renderedRowCount } = this.computeRenderedRowCount();
+  //     this._renderer.populateCenterRows(renderedRowCount, firstRenderedRowIndex);
+  //     this._renderer.populateLeftRows(renderedRowCount, firstRenderedRowIndex);
+  //     requestAnimationFrame(() => {
+  //         const pinnedCount = this._getPinnedCount();
+  //         const isLeft = colIndexGlobal < pinnedCount;
+  //         const panelColIndex = isLeft ? colIndexGlobal : colIndexGlobal - pinnedCount;
+  //         const rowDivs = isLeft
+  //             ? this._renderer._leftRenderedRowDivs
+  //             : this._renderer._centerRenderedRowDivs;
+  //         console.log('looking for rowIndex:', rowIndex);
+  //         console.log('leftRowDivs:', this._renderer._leftRenderedRowDivs.map(r => util.getRowIndexFromRow(r)));
+  //         const targetRowEl = rowDivs.find(row => util.getRowIndexFromRow(row) === rowIndex);
+  //         if (!targetRowEl) return;
+  //         // Debug
+  //         // console.log('isLeft:', isLeft, 'colIndexGlobal:', colIndexGlobal, 'pinnedCount:', pinnedCount);
+  //         // console.log('leftRowDivs:', this._renderer._leftRenderedRowDivs.map(r => util.getRowIndexFromRow(r)));
+  //         // console.log('targetRowEl:', targetRowEl);
+  //         const targetCellEl = targetRowEl.children[panelColIndex] as HTMLElement;
+  //         if (targetCellEl) {
+  //             this.setActiveCell(targetCellEl);
+  //         }
+  //     });
+  // }
+  focusCell(t, e) {
+    const r = this._getPinnedCount(), n = e < r, i = n ? e : e - r, s = n ? this._renderer._leftColDefs : this._renderer._centerColDefs;
+    this._activeRowIndex = t, this._activeColField = s[i]?.field ?? null, this.ensureRowVisible(t);
+    const { firstRenderedRowIndex: l, renderedRowCount: a } = this.computeRenderedRowCount();
+    this._renderer.populateCenterRows(a, l), this._renderer.populateLeftRows(a, l), requestAnimationFrame(() => {
+      const d = (n ? this._renderer._leftRenderedRowDivs : this._renderer._centerRenderedRowDivs).find((c) => x(c) === t);
+      if (!d) return;
+      const u = d.children[i];
+      u && this.setActiveCell(u);
+    });
+  }
+  _getPinnedCount() {
+    return this._renderer._leftColDefs?.length ?? 0;
+  }
+  handleTabNavigation(t) {
+    t.preventDefault();
+    const e = this._getPinnedCount(), r = this._renderer._leftBodyEl?.querySelector(`.${this.cn.active_cell}`), n = this._renderer._centerBodyEl?.querySelector(`.${this.cn.active_cell}`), i = r ?? n;
+    if (!i) {
+      this.focusCell(0, 0);
+      return;
+    }
+    const s = I(i);
+    if (!s) return;
+    const l = S(i, s);
+    if (l === null) return;
+    const a = x(s);
+    if (a === null) return;
+    const d = (r ? 0 : e) + l, u = this._renderer._visibleColDefs.length;
+    let c = a, f = d;
+    t.shiftKey ? (f--, f < 0 && (c--, f = u - 1)) : (f++, f >= u && (c++, f = 0)), !(c < 0 || c >= this._filteredAndSortedIndices.length) && this.focusCell(c, f);
+  }
+  ensureRowVisible(t) {
+    const e = t * this.currentState.rowHeight, r = e + this.currentState.rowHeight, n = this._renderer._centerBodyEl.scrollTop, i = n + this.currentState.viewportHeight;
+    if (this._debug) {
+      const s = `ensureRowVisible rowIndex: ${t}; viewportTop: ${n}; viewportBottom: ${i}; rowTop: ${e}; rowBottom: ${r};`;
+      this._console.print(s);
+    }
+    if (e >= n && r <= i) {
+      this._console.print("Row already visible, no scroll");
+      return;
+    }
+    if (e < n) {
+      this._console.print(`Scrolling UP to: ${e}`), this._renderer._centerBodyEl.scrollTop = e;
+      return;
+    }
+    if (r > i) {
+      const s = r - this.currentState.viewportHeight;
+      this._console.print(`Scrolling DOWN to: ${s}`), this._renderer._centerBodyEl.scrollTop = s;
+      return;
+    }
+  }
+  // private createDragElement(headerCell: HTMLElement, isLeft: boolean = false): HTMLElement {
+  //     const colIndex = Number(headerCell.dataset.colIndex);
+  //     const colDefs = isLeft ? this._renderer._leftColDefs : this._renderer._centerColDefs;
+  //     const column = colDefs[colIndex];
+  //     if (!column) throw new Error(`column undefined in createDragElement`);
+  //     const dragEl = document.createElement('div');
+  //     dragEl.innerHTML = `
+  //     <span style="margin-right: 6px; opacity: 0.8;">⋮⋮</span>
+  //     <span>${column.headerName}</span>`;
+  //     dragEl.style.cssText = `
+  //     position: fixed;
+  //     padding: 8px 16px;
+  //     background: rgba(255, 255, 255, 0.95);
+  //     border: 1px solid #d0d0d0;
+  //     border-radius: 4px;
+  //     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  //     font-size: 13px;
+  //     font-weight: 500;
+  //     color: #333;
+  //     white-space: nowrap;
+  //     pointer-events: none;
+  //     z-index: 10000;
+  //     display: flex;
+  //     align-items: center;
+  // `;
+  //     return dragEl;
+  // }
+  createDragElement(t, e = !1) {
+    const r = t.dataset.field, i = (e ? this._renderer._leftColDefs : this._renderer._centerColDefs).find((l) => l.field === r);
+    if (!i) throw new Error("column undefined in createDragElement");
+    const s = document.createElement("div");
+    return s.innerHTML = `
+    <span style="margin-right: 6px; opacity: 0.8;">⋮⋮</span>
+    <span>${i.headerName}</span>`, s.style.cssText = `
+    position: fixed;
+    padding: 8px 16px;
+    background: rgba(255, 255, 255, 0.95);
+    border: 1px solid #d0d0d0;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    font-size: 13px;
+    font-weight: 500;
+    color: #333;
+    white-space: nowrap;
+    pointer-events: none;
+    z-index: 10000;
+    display: flex;
+    align-items: center;
+`, s;
+  }
+  resizeColumnWidth(t, e) {
+    this._renderer._centerColumnWidths[t] = e, this._renderer.updateGridTemplateColumns(), this.updateDebugOverlay();
+  }
+  getColumnWidthInPixels(t) {
+    return this._renderer._centerHeaderEl?.querySelector(".header-inner")?.children[t]?.offsetWidth ?? 100;
+  }
+  detachEvents() {
+    this.eventAbortController?.abort(), this.eventAbortController = void 0;
+  }
+  setActiveRow(t) {
+    this._renderer.renderedRowDivs.forEach((e) => e.classList.remove(g.active_row)), t.classList.add(g.active_row);
+  }
+  // getCellContextParams(cellEl: HTMLElement): CellContext<T> | null {
+  //     const c = GridClassName;
+  //     // const cellEl = (e.target as HTMLElement).closest(`.${c.cell}`) as HTMLElement;
+  //     // if (!cellEl) return null;
+  //     const rowEl = cellEl.closest('.cellux-row') as HTMLElement;
+  //     if (!rowEl) return null;
+  //     // use Array's indexOf method to get the column index of cellEl
+  //     const columnIndex = Array.from(rowEl.children).indexOf(cellEl);
+  //     // index is -1? element not found so exit.
+  //     if (columnIndex < 0) {
+  //         console.warn('Cell not found in row');
+  //         return null;
+  //     }
+  //     // Get my data-* property values.
+  //     const arrayIndex = Number(rowEl.dataset.arrayIndex);
+  //     const rowIndex = Number(rowEl.dataset.rowIndex);
+  //     // Should be impossible
+  //     if (!Number.isInteger(arrayIndex) || !Number.isInteger(rowIndex)) return null;
+  //     const cols = this._renderer._centerColDefs;
+  //     if (!cols) throw new Error('getCellEventPayload: columnDefs is undefined');
+  //     const colDef: ColumnDef<T> | undefined = cols[columnIndex];
+  //     if (!colDef) throw new Error(`getCellEventPayload: column undefined at index ${columnIndex}`);
+  //     if (!colDef) return null;
+  //     const data = this._options.rowData![arrayIndex];
+  //     if (!data) return null;
+  //     // const value = data?.[colDef.field];
+  //     const value = colDef.valueGetter
+  //         ? colDef.valueGetter({ cellElement: cellEl, data: data, rowIndex, arrayIndex, colDef: colDef, api: this.api, value: data?.[colDef.field] })
+  //         : data?.[colDef.field];
+  //     const cellContext: CellContext<T> = {
+  //         value,
+  //         colDef,
+  //         data,
+  //         rowIndex: rowIndex,
+  //         arrayIndex: arrayIndex,
+  //         // grid: this,
+  //         api: this.api,
+  //         cellElement: cellEl
+  //     };
+  //     return cellContext;
+  // }
+  getCellContextParams(t) {
+    const e = Q(t, this);
+    if (!e) return null;
+    const { colDef: r, rowIndex: n, arrayIndex: i } = e, s = this._options.rowData[i];
+    return s ? { value: r.valueGetter ? r.valueGetter({ cellElement: t, data: s, rowIndex: n, arrayIndex: i, colDef: r, api: this.api, value: s?.[r.field] }) : s?.[r.field], colDef: r, data: s, rowIndex: n, arrayIndex: i, api: this.api, cellElement: t } : null;
+  }
+  getCellEventParams(t, e) {
+    const r = this.getCellContextParams(t);
+    return r ? {
+      value: r.value,
+      colDef: r.colDef,
+      data: r.data,
+      rowIndex: r.rowIndex,
+      arrayIndex: r.arrayIndex,
+      cellElement: t,
+      grid: this,
+      event: e,
+      api: this.api
+    } : null;
+  }
+  // getCellEventParams(cellEl: HTMLElement, e: Event): CellEvent<T> | null {
+  //     const c = GridClassName;
+  //     const cellContext = this.getCellContextParams(cellEl);
+  //     const cellEvent: CellEvent<T> = {
+  //         value: cellContext?.value,
+  //         colDef: cellContext?.colDef!,
+  //         data: cellContext?.data!,
+  //         rowIndex: cellContext?.rowIndex!,
+  //         arrayIndex: cellContext?.arrayIndex!,
+  //         cellElement: cellEl,
+  //         grid: this,
+  //         event: e,
+  //         api: this.api
+  //     };
+  //     return cellEvent;
+  // }
+  // getRowEventParams(e: MouseEvent): RowEvent<T> | null {
+  //     const cellEl = (e.target as HTMLElement).closest('.cell') as HTMLElement;
+  //     if (!cellEl) return null;
+  //     const rowEl = cellEl.closest('.cellux-row') as HTMLElement;
+  //     if (!rowEl) return null;
+  //     // use Array's indexOf method to get the column index of cellEl
+  //     const columnIndex = Array.from(rowEl.children).indexOf(cellEl);
+  //     // index is -1? element not found so exit.
+  //     if (columnIndex < 0) {
+  //         console.warn('Cell not found in row');
+  //         return null;
+  //     }
+  //     // Get my data-* property values.
+  //     const arrayIndex = Number(rowEl.dataset.arrayIndex);
+  //     const rowIndex = Number(rowEl.dataset.rowIndex);
+  //     // Should be impossible
+  //     if (!Number.isInteger(arrayIndex) || !Number.isInteger(rowIndex)) return null;
+  //     const cols = this._renderer._centerColDefs;
+  //     if (!cols) throw new Error('getColumnCallbackPayload: columnDefs is undefined');
+  //     const colDef: ColumnDef<T> | undefined = cols[columnIndex];
+  //     if (!colDef) throw new Error(`getColumnCallbackPayload: column undefined at index ${columnIndex}`);
+  //     if (!colDef) return null;
+  //     const data = this._options.rowData![arrayIndex];
+  //     if (!data) return null;
+  //     const rowEvent: RowEvent<T> = {
+  //         data,
+  //         rowIndex,
+  //         arrayIndex,
+  //         event: e,
+  //         grid: this,
+  //         api: this.api
+  //     };
+  //     return rowEvent;
+  // }
+  getRowEventParams(t) {
+    const e = t.target.closest(".cell");
+    if (!e) return null;
+    const r = W(e);
+    if (!r) return null;
+    const n = this._options.rowData[r.arrayIndex];
+    return n ? {
+      data: n,
+      rowIndex: r.rowIndex,
+      arrayIndex: r.arrayIndex,
+      event: t,
+      grid: this,
+      api: this.api
+    } : null;
+  }
+  getMouseEventData(t, e) {
+    const r = S(e, t);
+    if (r === null) return null;
+    const n = x(t), i = $(t);
+    return n === null || i === null ? null : { columnIndex: r, arrayIndex: i, rowIndex: n };
+  }
+  // #endregion
+  //************************************************************************************* */
+  //************************************************************************************* */
+  //****************************** DRAG AND DROP COLUMNS ******************************** */
+  //************************************************************************************* */
+  //************************************************************************************* */
+  //#region Drag and Drop
+  // ~attachColumnReorderListeners
+  attachColumnReorderListeners() {
+    this.attachReorderListenersForPanel(this._renderer._centerHeaderEl, !1), this._renderer._leftHeaderInnerEl && this._renderer._leftColDefs.length > 1 && this.attachReorderListenersForPanel(this._renderer._leftPanelEl, !0);
+  }
+  attachReorderListenersForPanel(t, e) {
+    if (!t) return;
+    this.eventAbortController || (this.eventAbortController = new AbortController());
+    let r = !1, n = null, i = 0, s = null, l = 0, a = -1, o = 0, d = !0;
+    const u = 10;
+    e ? this._renderer._leftColDefs : this._renderer._centerColDefs, e ? this._renderer._leftColumnWidths : this._renderer._centerColumnWidths;
+    const c = e ? ".header-left .header-cell" : ".header-center .header-cell";
+    t.addEventListener("mousedown", (f) => {
+      if (f.button !== 0) return;
+      const _ = f.target?.closest(c);
+      if (!_ || f.target.closest(".col-resizer")) return;
+      i = f.clientX, l = i, o = i;
+      const p = _.getBoundingClientRect();
+      let R = { x: f.clientX - p.left, y: f.clientY - p.top };
+      if (s = H(_), s === null) return;
+      const b = P(_, this);
+      if (!b || b.moveable === !1) return;
+      a = -1, f.preventDefault();
+      const m = (w) => {
+        if (s !== null) {
+          if (!r && Math.abs(w.clientX - i) > 5) {
+            r = !0, _.classList.add("dragging"), n = this.createDragElement(_, e), document.body.appendChild(n), document.body.style.cursor = "grabbing", document.body.style.userSelect = "none";
+            const v = n.getBoundingClientRect();
+            R = { x: v.width / 2, y: v.height / 2 };
+          }
+          if (r && n) {
+            const v = w.clientX > o;
+            v !== d && (a = -1, d = v), o = w.clientX, n.style.left = w.clientX - R.x + "px", n.style.top = w.clientY - R.y + "px";
+            const B = Array.from(t.querySelectorAll(c));
+            let M = -1;
+            for (let E = 0; E < B.length; E++) {
+              if (E === s) continue;
+              const D = B[E].getBoundingClientRect(), k = Math.min(8, D.width * 0.3);
+              if (w.clientX >= D.left + k && w.clientX <= D.right - k) {
+                M = E;
+                break;
+              }
+            }
+            M !== -1 && M !== a && Math.abs(w.clientX - l) > u && (this.reorderColumnInPanel(s, M, e), this._sort.updateHeaderSortIndicators(), a = s, s = M, l = w.clientX), requestAnimationFrame(() => {
+              const E = Array.from(t.querySelectorAll(c));
+              let A = -1;
+              for (let D = 0; D < E.length; D++) {
+                if (D === s) continue;
+                const F = E[D].getBoundingClientRect(), q = Math.min(8, F.width * 0.3);
+                if (w.clientX >= F.left + q && w.clientX <= F.right - q) {
+                  A = D;
+                  break;
+                }
+              }
+              A !== -1 && (E.forEach((D) => D.classList.remove("drop-target")), E[A]?.classList.add("drop-target")), s !== null && E[s]?.classList.add("dragging");
+            });
+          }
+        }
+      }, y = () => {
+        document.removeEventListener("mousemove", m), document.removeEventListener("mouseup", y), r && (r = !1, t.querySelectorAll(c).forEach((w) => {
+          w.classList.remove("dragging", "drop-target");
+        }), n && document.body.contains(n) && document.body.removeChild(n), document.body.style.cursor = "", document.body.style.userSelect = "", this._colStateMgr.saveColumnState(), this._sort.updateHeaderSortIndicators()), n = null, s = null, a = -1;
+      };
+      document.addEventListener("mousemove", m), document.addEventListener("mouseup", y);
+    }, { signal: this.eventAbortController.signal });
+  }
+  reorderColumnInPanel(t, e, r) {
+    if (t === e) return;
+    const n = r ? this._renderer._leftColDefs : this._renderer._centerColDefs, i = r ? this._renderer._leftColumnWidths : this._renderer._centerColumnWidths, s = r ? this._renderer._leftPanelEl : this._renderer._centerHeaderEl;
+    this._renderer._assertions.assertColumnWidthsSync();
+    const [l] = n.splice(t, 1);
+    if (!l) throw new Error("movedColumn undefined in reorderColumnInPanel");
+    const [a] = i.splice(t, 1);
+    if (!a) throw new Error("movedWidth undefined in reorderColumnInPanel");
+    n.splice(e, 0, l), i.splice(e, 0, a), this._renderer._visibleColDefs = [
+      ...this._renderer._leftColDefs,
+      ...this._renderer._centerColDefs
+    ];
+    const o = this._renderer._allColDefs.filter((_) => _.hide);
+    this._renderer._allColDefs = [...this._renderer._visibleColDefs, ...o];
+    const d = s.querySelector(".header-inner"), u = Array.from(d.children), c = u[t], f = u[e];
+    if (c && f && (t < e ? d.insertBefore(c, f.nextSibling) : d.insertBefore(c, f)), Array.from(d.querySelectorAll(".header-cell")).forEach((_, p) => _.dataset.colIndex = String(p)), this._renderer.updateGridTemplateColumns(), r) {
+      const { firstRenderedRowIndex: _, renderedRowCount: p } = this.computeRenderedRowCount();
+      this._renderer.populateLeftRows(p, _);
+    } else
+      this.refreshVisibleRows();
+  }
+  // PATCH: after DOM reorder, keep indices consistent for resize + drag logic
+  reindexHeaderCells() {
+    const t = `.${g.header_cell}`;
+    Array.from(
+      this._renderer._centerHeaderInnerEl.querySelectorAll(t)
+    ).forEach((n, i) => {
+      n.dataset.colIndex = String(i);
+    }), Array.from(
+      this._renderer._leftHeaderInnerEl.querySelectorAll(t)
+    ).forEach((n, i) => {
+      n.dataset.colIndex = String(i);
+    });
+  }
+  // PATCH: refresh currently-visible rows only (keeps virtualization logic centralized)
+  refreshVisibleRows() {
+    const { firstRenderedRowIndex: t, renderedRowCount: e } = this.computeRenderedRowCount();
+    this._renderer.populateCenterRows(e, t);
+  }
+  // #endregion
+  //************************************************************************************* */
+  //************************************************************************************* */
+  //************************************ EDITING **************************************** */
+  //************************************************************************************* */
+  //************************************************************************************* */
+  // #region editing
+  currentlyEditing() {
+    return !!this._editInput || !!this._editingCell;
+  }
+  startCellEditing(t, e, r) {
+    if (this.currentlyEditing())
+      return;
+    const n = this.getCellContextParams(e);
+    if (!n) {
+      console.error("getCellContextParams returned null/undefined in startCellEditing");
+      return;
+    }
+    t instanceof MouseEvent && t.type === "dblclick" && n.colDef.cellEditor && t.preventDefault();
+    const i = this._options.rowData[n.arrayIndex];
+    if (!i) throw new Error("rowData object undefined in startCellEditing");
+    if (this._editingCell = {
+      cell: e,
+      colDef: n.colDef,
+      rowData: n.data,
+      arrayIndex: n.arrayIndex,
+      rowIndex: n.rowIndex,
+      originalValue: n.value,
+      customEditor: null
+    }, typeof n.colDef?.onCellEditingStarted == "function" && n.colDef.onCellEditingStarted(n), n.colDef.cellEditor) {
+      e.classList.remove(g.visual_cell), e.innerHTML = "";
+      let u;
+      if (typeof n.colDef.cellEditor == "string")
+        throw new Error(`String editor types not yet implemented: ${n.colDef.cellEditor}`);
+      u = new n.colDef.cellEditor();
+      const c = {
+        value: n.value,
+        data: i,
+        colDef: n.colDef,
+        rowIndex: n.rowIndex,
+        arrayIndex: n.arrayIndex,
+        cellElement: e,
+        cellEditorParams: n.colDef.cellEditorParams,
+        stopEditing: () => this.commitCellEdit()
+      }, f = u.init(c);
+      e.appendChild(f), this._editingCell.customEditor = u;
+      return;
+    }
+    const s = document.createElement("input");
+    s.type = "text", s.value = r ?? String(n.value ?? "");
+    const l = window.getComputedStyle(e), a = l.justifyContent, d = {
+      "flex-start": "left",
+      "flex-end": "right",
+      center: "center",
+      "space-between": "justify"
+    }[a] || "left";
+    s.style.cssText = `
+            text-align: ${d};
+            font-family: ${l.fontFamily};
+            color: ${l.color};
+            background: ${l.background};
+        `, s.classList.add("cell-edit"), e.classList.add("cell-editing"), e.classList.remove(g.visual_cell), e.innerHTML = "", e.appendChild(s), s.focus(), this._editInput = s, r !== void 0 ? s.setSelectionRange(s.value.length, s.value.length) : setTimeout(() => s.select(), 0), s.addEventListener("blur", this.commitCellEdit, { once: !0 }), s.addEventListener("keydown", (u) => {
+      u.key === "Enter" ? (u.preventDefault(), this.commitCellEdit()) : u.key === "Escape" ? (u.preventDefault(), this.cancelCellEdit()) : u.key === "Tab" && (u.preventDefault(), this.commitCellEdit());
+    });
+  }
+  // #endregion
+  //************************************************************************************* */
+  //************************************************************************************* */
+  //********************************** EXPORT DATA ************************************** */
+  //************************************************************************************* */
+  //************************************************************************************* */
+  // #region Export 
+  // At the top with your other methods in the API section
+  exportToCsv(t) {
+    const e = t?.fileName || "export.csv", r = t?.columnKeys ? t.columnKeys.map((l) => this._renderer._visibleColDefs.find((a) => a.field === l)).filter((l) => l !== void 0) : this._renderer._visibleColDefs, n = r.map(
+      (l) => this.escapeCsvValue(l.headerName)
+    ), i = this._filteredAndSortedIndices.map((l) => {
+      const a = this._options.rowData[l];
+      if (!a) throw new Error("rowData undefined in exportToCsv");
+      return r.map((o) => {
+        const d = a[o.field], u = t?.processCellCallback ? t.processCellCallback({
+          colDef: o,
+          value: d,
+          data: a
+        }) : d;
+        return this.escapeCsvValue(u);
+      });
+    }), s = [
+      n.join(","),
+      ...i.map((l) => l.join(","))
+    ].join(`
+`);
+    this.downloadCsv(s, e);
+  }
+  // escapeCsvValue and downloadCsv stay the same
+  // NEW METHOD - add this
+  escapeCsvValue(t) {
+    if (t == null) return "";
+    const e = String(t);
+    return e.includes(",") || e.includes('"') || e.includes(`
+`) ? `"${e.replace(/"/g, '""')}"` : e;
+  }
+  // downloadCsv stays the same
+  downloadCsv(t, e) {
+    const r = new Blob([t], { type: "text/csv;charset=utf-8;" }), n = document.createElement("a"), i = URL.createObjectURL(r);
+    n.setAttribute("href", i), n.setAttribute("download", e), n.style.visibility = "hidden", document.body.appendChild(n), n.click(), document.body.removeChild(n), URL.revokeObjectURL(i);
+  }
+  // #endregion
+  // rowCount: number, firstRenderedRowIndex: number
+  updateDebugOverlay() {
+    this._debugOverlay.updateDebugOverlay();
+  }
+  // #endregion asserts/debug
+  onFilterChanged() {
+    this._sort.applySort(), this.updateTotalRowsDisplay(), this.refreshGrid(), this.options?.onFilterChanged?.();
+  }
+  //************************************************************************************* */
+  //************************************************************************************* */
+  //********************************** QUICK FILTER ************************************* */
+  //************************************************************************************* */
+  //************************************************************************************* */
+  //#region Quick Filter
+  clearQuickFilter() {
+    this._quickFilter.quickFilterText = "", this._quickFilter.applyQuickFilter();
+  }
+  getQuickFilterText() {
+    return this._quickFilter.quickFilterText;
+  }
+  updateTotalRowsDisplay() {
+    this._statusBar.updateRowsPanel();
+  }
+  refreshGrid() {
+    const t = this._filteredAndSortedIndices.length;
+    this._renderer._centerRowsContainerEl.style.height = `${t * this.currentState.rowHeight}px`, this._renderer._leftRowsContainerEl.style.height = `${t * this.currentState.rowHeight}px`, this._renderer._centerBodyEl && (this._renderer._centerBodyEl.scrollTop = 0, this.currentState.scrollTop = 0);
+    const { firstRenderedRowIndex: e, renderedRowCount: r } = this.computeRenderedRowCount();
+    this._renderer.syncRowVisibility(r), this._renderer.populateCenterRows(r, e), this._renderer.populateLeftRows(r, e);
+  }
+  invalidateArrayIndex(t) {
+    const e = this._renderer.renderedRowDivs.find(
+      (i) => $(i) === t
+    );
+    if (!e) return;
+    const r = x(e);
+    if (r === null) return;
+    const n = this._options.rowData?.[t];
+    n && this._renderer._centerColDefs.forEach((i, s) => {
+      const l = e.children[s];
+      l && this._renderer.populateCell(l, i, n, t, r);
+    });
+  }
+  invalidateRow(t) {
+    const e = this._filteredAndSortedIndices[t];
+    Number.isInteger(e) && this.invalidateArrayIndex(e);
+  }
+  getRowIndexFromArrayIndex(t) {
+    const e = this._filteredAndSortedIndices.indexOf(t);
+    return e >= 0 ? e : null;
+  }
+  updateCellValue(t, e, r) {
+    const n = this._options.rowData?.[t];
+    n && (n[e] = r, this.invalidateArrayIndex(t));
+  }
+  // This is kind of like ag-grids  rowNode.updateData where they 
+  // update the entire row.
+  updateRow(t, e) {
+    const r = this._options.rowData?.[t];
+    if (!r) return;
+    let n = !1;
+    for (const i of Object.keys(e))
+      r[i] !== e[i] && (r[i] = e[i], n = !0);
+    n && this.invalidateArrayIndex(t);
+  }
+  getDistinctValuesByField(t) {
+    return this._filter.getDistinctValuesByField(t);
+  }
+  isCellEditable(t, e) {
+    const r = t.editable ?? !0;
+    return typeof r == "function" ? r(e) : r;
+  }
+  pinColumn(t, e) {
+    const r = this._renderer._allColDefs.find((a) => a.field === t.field);
+    if (!r) return;
+    r.pinned = e ? "left" : void 0, this._renderer.recomputeColDefsAndWidths();
+    const n = this._renderer._leftHeaderInnerEl, i = this._renderer._centerHeaderInnerEl;
+    n.innerHTML = this._renderer._leftColDefs.map((a, o) => this._renderer.buildHeaderCell(a, o).outerHTML).join(""), i.innerHTML = this._renderer._centerColDefs.map((a, o) => this._renderer.buildHeaderCell(a, o).outerHTML).join(""), this._renderer._centerRowsContainerEl.innerHTML = "", this._renderer._leftRowsContainerEl.innerHTML = "", this._renderer.resetRowPool(), this._renderer.updateLeftZoneWidth(), this._renderer.updateGridTemplateColumns();
+    const { firstRenderedRowIndex: s, renderedRowCount: l } = this.computeRenderedRowCount();
+    this._renderer.initializeRowPool(l), this._renderer.initializeLeftRowPool(l), this._sort.updateHeaderSortIndicators(), this._renderer.headerCallbacks(), this.detachEvents(), this.attachEvents(), this.refreshGrid(), this._colStateMgr.saveColumnState(), this.updateDebugOverlay();
+  }
+  deleteColumnState() {
+  }
+  //************************************************************************************* */
+  //************************************************************************************* */
+  //*********************************** API ********************************************* */
+  //************************************************************************************* */
+  //************************************************************************************* */
+  // #region API
+  // Properties
+  get Grid() {
+    return this;
+  }
+  getRowData() {
+    return this._options.rowData;
+  }
+  get activeRowIndex() {
+    return this._activeRowIndex;
+  }
+  get activeArrayIndex() {
+    return this._activeArrayIndex;
+  }
+  get activeColField() {
+    return this._activeColField;
+  }
+  get quickFilterText() {
+    return this._quickFilter.quickFilterText;
+  }
+  set quickFilterText(t) {
+    this._quickFilter.quickFilterText = t;
+  }
+  get rootEl() {
+    return this._rootEl;
+  }
+  get options() {
+    return this._options;
+  }
+  get contextMenuEl() {
+    return this._contextMenuEl;
+  }
+  set contextMenuEl(t) {
+    this._contextMenuEl = t;
+  }
+  get derivedIndices() {
+    return this._filteredAndSortedIndices;
+  }
+  get debug() {
+    return this._debug;
+  }
+  get showDebugOverlay() {
+    return this._showDebugOverlay;
+  }
+  get consoleLog() {
+    return this._consoleLog;
+  }
+  get activeRowElement() {
+    return this._activeRowElement;
+  }
+  set activeRowElement(t) {
+    this._activeRowElement = t;
+  }
+  setColumnVisible(t, e) {
+    const r = this._renderer._allColDefs.findIndex((c) => c.field === t);
+    if (r === -1) {
+      console.warn(`setColumnVisible: Column with field '${t}' not found.`);
+      return;
+    }
+    const n = this._renderer._allColDefs[r];
+    if (n.hide === !0 && e === !1) {
+      console.warn(`Field ${t} is already hidden`);
+      return;
+    }
+    if (n.hide === !1 && e === !0) {
+      console.warn(`Field ${t} is already visible`);
+      return;
+    }
+    const i = n.pinned === "left", s = this._renderer._allColDefs.slice(0, r).filter((c) => !c.hide && (i ? c.pinned === "left" : c.pinned !== "left")).length;
+    n.hide = !e, X(this._renderer);
+    const l = i ? this._renderer._leftHeaderInnerEl : this._renderer._centerHeaderInnerEl, a = i ? this._renderer._leftColumnWidths : this._renderer._centerColumnWidths, o = i ? this._renderer._leftRenderedRowDivs : this._renderer._centerRenderedRowDivs;
+    if (e) {
+      a.splice(s, 0, n.width ?? 100);
+      const c = this._renderer.buildHeaderCell(n, s);
+      l.insertBefore(c, l.children[s] ?? null), o.forEach((f) => {
+        const _ = document.createElement("div");
+        _.className = g.cell, _.setAttribute("role", "grid_cell"), f.insertBefore(_, f.children[s] ?? null);
+      });
+    } else
+      a.splice(s, 1), l.children[s]?.remove(), o.forEach((c) => {
+        c.children[s]?.remove();
+      });
+    this.reindexHeaderCells(), this._renderer.updateGridTemplateColumns(), this._renderer.updateLeftZoneWidth(), this._sort.updateHeaderSortIndicators();
+    const { firstRenderedRowIndex: d, renderedRowCount: u } = this.computeRenderedRowCount();
+    i ? this._renderer.populateLeftRows(u, d) : this._renderer.populateCenterRows(u, d), this._renderer._assertions.assertCenterColDefsSync(), this._renderer._assertions.assertPanelColDefsMatchVisible(), this._renderer._assertions.assertPanelCellCountMatchesColDefs(), this._renderer._assertions.assertHeaderCellCountMatchesColDefs(), this._colStateMgr.saveColumnState();
+  }
+  getActiveCell() {
+    return this._renderer._centerBodyEl.querySelector(`.${this.cn.active_cell}`);
+  }
+  scroll(t) {
+    const e = this._renderer._centerBodyEl;
+    e && (this.debug, e.scrollTop += t);
+  }
+  scrollToAndActivateRowByArrayIndex(t) {
+    const e = this._filteredAndSortedIndices.indexOf(t);
+    if (e === -1) {
+      localStorage.removeItem("activeRowArrayIndex");
+      return;
+    }
+    this._activeArrayIndex = t, this.ensureRowVisible(e);
+    const { firstRenderedRowIndex: r, renderedRowCount: n } = this.computeRenderedRowCount();
+    this._renderer.populateCenterRows(n, r);
+  }
+  resetAllColumns() {
+    this._renderer._allColDefs = this._options.columnDefs.map((t) => this.resolveColDef(t)), this._renderer.recomputeColDefsAndWidths(), this._renderer.recomputeRowDivs(), this._renderer._leftHeaderInnerEl.innerHTML = this._renderer._leftColDefs.map((t, e) => this._renderer.buildHeaderCell(t, e).outerHTML).join(""), this._renderer._centerHeaderInnerEl.innerHTML = this._renderer._centerColDefs.map((t, e) => this._renderer.buildHeaderCell(t, e).outerHTML).join(""), this._renderer.updateGridTemplateColumns(), this._renderer.updateLeftZoneWidth(), this.detachEvents(), this.attachEvents(), this._sort.updateHeaderSortIndicators(), this.refreshGrid(), this._colStateMgr.saveColumnState();
+  }
+  debugApi() {
+    return {
+      getrenderedRowDivs: () => this._renderer.renderedRowDivs
+    };
+  }
+  _getGrid() {
+    return this;
+  }
+  // ===============================================================================
+  // ===============================================================================
+  // Public API
+  // ===============================================================================
+  // ===============================================================================
+  //    exportToCsv?: (options?: CsvExportOptions<T>) => void;
+  get api() {
+    return this._api || (this._api = {
+      version: ".01",
+      exportToCsv: (t) => this.exportToCsv(t),
+      setRowData: (t) => this.setRowData(t),
+      getColumnState: () => {
+        throw new Error("getColumnState not yet implemented");
+      },
+      clearColumnFilters: () => this._filter.clearColumnFilters(),
+      clearColumnFilter: (t) => this._filter.clearColumnFilter(t),
+      scroll: (t) => this.scroll(t),
+      getColumnWidths: () => this._renderer._centerColumnWidths,
+      destroy: () => this.destroy(),
+      getColDef: (t) => this.getColDef(t),
+      getAllColumns: () => this._renderer._allColDefs,
+      getVisibleColumns: () => this._renderer._visibleColDefs,
+      setQuickFilterText: (t) => this._quickFilter.quickFilterText = t,
+      // dump: () => this._renderer.dump(),
+      setColumnVisible: (t, e) => this.setColumnVisible(t, e),
+      /* Called like so: api.updateRow!(20, { age: 100,
+                                              city: 'Palo Alto',
+                                              county: 'Santa Clara'
+                                             });*/
+      updateRow: (t, e) => this.updateRow(t, e),
+      updateCellValue: (t, e, r) => this.updateCellValue(t, e, r),
+      /** Debug helpers. Not part of the stable public API. */
+      debug: {
+        getRenderedRowDivs: () => this._renderer.renderedRowDivs,
+        getGrid: () => this._getGrid()
+      }
+    }), this._api;
+  }
+  // #endregion API
+}
+export {
+  ve as Grid
+};