@taskctrl/canvas-grid 0.1.0

package/dist/canvas-grid.es.js

@@ -0,0 +1,1685 @@
+import { jsxs as de, jsx as H } from "react/jsx-runtime";
+import { useRef as ne, useState as ve, useCallback as te, useEffect as re, memo as $t, forwardRef as Bt, useMemo as Ne, useImperativeHandle as Kt } from "react";
+import { createPortal as Ft } from "react-dom";
+class St {
+  constructor(e) {
+    this.scrollX = 0, this.scrollY = 0, this.canvasWidth = 0, this.canvasHeight = 0, this.rowHeight = 32, this.pinnedWidth = 0, this._columnOffsets = [], this._columnWidths = [], this._pinnedOffsets = [], this._pinnedWidths = [], this._scrollableOffsets = [], this._scrollableWidths = [], e && this.update(e);
+  }
+  update(e) {
+    e.scrollX !== void 0 && (this.scrollX = e.scrollX), e.scrollY !== void 0 && (this.scrollY = e.scrollY), e.canvasWidth !== void 0 && (this.canvasWidth = e.canvasWidth), e.canvasHeight !== void 0 && (this.canvasHeight = e.canvasHeight), e.rowHeight !== void 0 && (this.rowHeight = e.rowHeight);
+  }
+  setColumnOffsets(e) {
+    this._columnOffsets = e;
+  }
+  setColumnWidths(e) {
+    this._columnWidths = e;
+  }
+  setPinnedOffsets(e, o) {
+    this._pinnedOffsets = e, this._pinnedWidths = o;
+  }
+  setScrollableOffsets(e, o) {
+    this._scrollableOffsets = e, this._scrollableWidths = o;
+  }
+  // Row index → canvas Y pixel
+  rowToY(e) {
+    return e * this.rowHeight - this.scrollY;
+  }
+  // Canvas Y pixel → row index
+  yToRow(e) {
+    return Math.floor((e + this.scrollY) / this.rowHeight);
+  }
+  /**
+   * Column index → canvas X pixel.
+   * When pinned param is provided, uses the separate pinned/scrollable arrays.
+   * - pinned columns: offset directly (no scrollX applied)
+   * - scrollable columns: offset - scrollX + pinnedWidth
+   * When pinned param is omitted, falls back to legacy behavior (single array).
+   */
+  colToX(e, o) {
+    return o === !0 ? this._pinnedOffsets[e] ?? 0 : o === !1 ? (this._scrollableOffsets[e] ?? 0) - this.scrollX + this.pinnedWidth : (this._columnOffsets[e] ?? 0) - this.scrollX;
+  }
+  /**
+   * Canvas X pixel → column index (-1 if not found).
+   * When usePinnedLayout is true, checks pinned columns first, then scrollable.
+   * Returns { index, pinned } to distinguish which array was hit.
+   */
+  xToColPinned(e) {
+    for (let n = 0; n < this._pinnedOffsets.length; n++) {
+      const r = this._pinnedOffsets[n], c = this._pinnedWidths[n] ?? 0;
+      if (e >= r && e < r + c)
+        return { index: n, pinned: !0 };
+    }
+    const o = e - this.pinnedWidth + this.scrollX;
+    for (let n = 0; n < this._scrollableOffsets.length; n++) {
+      const r = this._scrollableOffsets[n], c = this._scrollableWidths[n] ?? 0;
+      if (o >= r && o < r + c)
+        return { index: n, pinned: !1 };
+    }
+    return null;
+  }
+  // Canvas X pixel → column index (-1 if not found) — legacy
+  xToCol(e) {
+    const o = e + this.scrollX;
+    for (let n = 0; n < this._columnOffsets.length; n++) {
+      const r = this._columnOffsets[n], c = this._columnWidths[n] ?? 0;
+      if (o >= r && o < r + c)
+        return n;
+    }
+    return -1;
+  }
+}
+const Ct = ["grid", "cells", "overlay"];
+class Ut {
+  constructor(e) {
+    this._dirty = { grid: !1, cells: !1, overlay: !1 }, this._rafId = null, this._drawFn = e;
+  }
+  markDirty(e) {
+    this._dirty[e] = !0, this._rafId === null && (this._rafId = requestAnimationFrame(() => this._flush()));
+  }
+  markAllDirty() {
+    for (const e of Ct)
+      this._dirty[e] = !0;
+    this._rafId === null && (this._rafId = requestAnimationFrame(() => this._flush()));
+  }
+  destroy() {
+    this._rafId !== null && (cancelAnimationFrame(this._rafId), this._rafId = null);
+  }
+  _flush() {
+    this._rafId = null;
+    for (const e of Ct)
+      this._dirty[e] && (this._dirty[e] = !1, this._drawFn(e));
+  }
+}
+class Nt {
+  constructor(e, o) {
+    this._rows = e, this._expandedRows = o, this._depthMap = /* @__PURE__ */ new Map(), this._childrenMap = /* @__PURE__ */ new Map(), this._buildMaps(), this._flattenedRows = this._buildFlattenedRows();
+  }
+  _buildMaps() {
+    for (const n of this._rows)
+      this._childrenMap.has(n.id) || this._childrenMap.set(n.id, []), n.parentId !== void 0 && (this._childrenMap.has(n.parentId) || this._childrenMap.set(n.parentId, []), this._childrenMap.get(n.parentId).push(n));
+    const o = this._rows.filter((n) => n.parentId === void 0).map((n) => ({ row: n, depth: 0 }));
+    for (; o.length > 0; ) {
+      const { row: n, depth: r } = o.pop();
+      this._depthMap.set(n.id, r);
+      const c = this._childrenMap.get(n.id) ?? [];
+      for (const a of c)
+        o.push({ row: a, depth: r + 1 });
+    }
+  }
+  _buildFlattenedRows() {
+    const e = [], o = this._rows.filter((r) => r.parentId === void 0), n = (r) => {
+      if (e.push(r), this._expandedRows.has(r.id)) {
+        const c = this._childrenMap.get(r.id) ?? [];
+        for (const a of c)
+          n(a);
+      }
+    };
+    for (const r of o)
+      n(r);
+    return e;
+  }
+  get flattenedRows() {
+    return this._flattenedRows;
+  }
+  getDepth(e) {
+    return this._depthMap.get(e) ?? 0;
+  }
+  hasChildren(e) {
+    const o = this._childrenMap.get(e);
+    return o !== void 0 && o.length > 0;
+  }
+  isExpanded(e) {
+    return this._expandedRows.has(e);
+  }
+  toggle(e) {
+    const o = new Set(this._expandedRows);
+    return o.has(e) ? o.delete(e) : o.add(e), o;
+  }
+  getVisibleRange(e, o, n) {
+    if (n <= 0 || this._flattenedRows.length === 0)
+      return { startIndex: 0, endIndex: 0 };
+    const r = Math.max(0, Math.floor(e / n)), c = Math.min(
+      this._flattenedRows.length - 1,
+      Math.ceil((e + o) / n) - 1
+    );
+    return { startIndex: r, endIndex: c };
+  }
+}
+const jt = 30;
+class Ie {
+  constructor(e) {
+    this._columns = e;
+  }
+  getVisibleColumns() {
+    return this._columns.filter((e) => !e.hidden);
+  }
+  /** Returns visible pinned-left columns, preserving order. */
+  getPinnedColumns() {
+    return this._columns.filter((e) => !e.hidden && e.pinned === "left");
+  }
+  /** Returns visible non-pinned columns, preserving order. */
+  getScrollableColumns() {
+    return this._columns.filter((e) => !e.hidden && e.pinned !== "left");
+  }
+  /** Total width of all pinned-left columns. */
+  getPinnedWidth() {
+    return this.getPinnedColumns().reduce((e, o) => e + o.width, 0);
+  }
+  getAllColumns() {
+    return [...this._columns];
+  }
+  getTotalWidth() {
+    return this.getVisibleColumns().reduce((e, o) => e + o.width, 0);
+  }
+  /**
+   * Returns X offset of a column in the logical layout:
+   * pinned columns come first (at offsets 0..pinnedWidth),
+   * scrollable columns follow (at offsets pinnedWidth..).
+   */
+  getColumnX(e) {
+    const o = this.getPinnedColumns(), n = this.getScrollableColumns();
+    let r = 0;
+    for (const c of o) {
+      if (c.id === e) return r;
+      r += c.width;
+    }
+    for (const c of n) {
+      if (c.id === e) return r;
+      r += c.width;
+    }
+    return -1;
+  }
+  /**
+   * Given an absolute X (i.e. accounting for scroll in scrollable region),
+   * returns the column id at that position. Pinned columns are checked first
+   * since they overlay scrollable content.
+   */
+  getColumnAtX(e) {
+    let o = 0;
+    for (const n of this.getPinnedColumns()) {
+      if (e >= o && e < o + n.width) return n.id;
+      o += n.width;
+    }
+    for (const n of this.getScrollableColumns()) {
+      if (e >= o && e < o + n.width) return n.id;
+      o += n.width;
+    }
+    return null;
+  }
+  /**
+   * Returns the visible range of SCROLLABLE columns only (pinned are always visible).
+   * scrollX is applied only to the scrollable portion (offset relative to pinnedWidth).
+   */
+  getVisibleRange(e, o) {
+    const n = this.getScrollableColumns();
+    if (n.length === 0) return { startIndex: 0, endIndex: 0 };
+    const r = this.getPinnedWidth(), c = o - r;
+    let a = 0, m = 0, f = n.length - 1;
+    for (let R = 0; R < n.length; R++)
+      a + n[R].width <= e && (m = R + 1), a < e + c && (f = R), a += n[R].width;
+    return m = Math.min(m, n.length - 1), f = Math.min(f, n.length - 1), { startIndex: m, endIndex: f };
+  }
+  /** Returns the range of pinned columns (always all of them). */
+  getPinnedRange() {
+    const e = this.getPinnedColumns();
+    return e.length === 0 ? { startIndex: 0, endIndex: -1 } : { startIndex: 0, endIndex: e.length - 1 };
+  }
+  resize(e, o) {
+    const n = this._columns.map((r) => {
+      if (r.id !== e) return r;
+      const c = r.minWidth ?? jt;
+      return { ...r, width: Math.max(c, o) };
+    });
+    return new Ie(n);
+  }
+  reorder(e, o) {
+    const n = [...this._columns], r = n.findIndex((m) => m.id === e);
+    if (r === -1) return new Ie(n);
+    const [c] = n.splice(r, 1), a = Math.max(0, Math.min(o, n.length));
+    return n.splice(a, 0, c), new Ie(n);
+  }
+  hide(e) {
+    const o = this._columns.map((n) => n.id === e ? { ...n, hidden: !0 } : n);
+    return new Ie(o);
+  }
+  show(e) {
+    const o = this._columns.map(
+      (n) => n.id === e ? { ...n, hidden: !1 } : n
+    );
+    return new Ie(o);
+  }
+}
+function Se(t, e) {
+  return `${t}|${e}`;
+}
+function je() {
+  return {
+    cells: /* @__PURE__ */ new Set(),
+    rows: /* @__PURE__ */ new Set(),
+    columns: /* @__PURE__ */ new Set(),
+    anchor: void 0
+  };
+}
+class qt {
+  constructor(e) {
+    e ? this._selection = {
+      cells: new Set(e.cells),
+      rows: new Set(e.rows),
+      columns: new Set(e.columns),
+      anchor: e.anchor
+    } : this._selection = je();
+  }
+  // Single click — clear previous, select one cell, set anchor
+  click(e, o, n, r) {
+    this._selection = je(), this._selection.cells.add(Se(e, o)), this._selection.anchor = { rowId: e, colId: o };
+  }
+  // Ctrl+click — toggle cell in/out of selection
+  ctrlClick(e, o) {
+    const n = Se(e, o);
+    this._selection.cells.has(n) ? this._selection.cells.delete(n) : this._selection.cells.add(n), this._selection.anchor = { rowId: e, colId: o };
+  }
+  // Shift+click — select rectangle from anchor to target
+  shiftClick(e, o, n, r) {
+    const c = this._selection.anchor;
+    if (!c) {
+      this.click(e, o, n, r);
+      return;
+    }
+    const a = n.indexOf(c.rowId), m = n.indexOf(e), f = r.indexOf(c.colId), R = r.indexOf(o), y = Math.min(a, m), L = Math.max(a, m), O = Math.min(f, R), W = Math.max(f, R), S = /* @__PURE__ */ new Set();
+    for (let G = y; G <= L; G++)
+      for (let $ = O; $ <= W; $++)
+        S.add(Se(n[G], r[$]));
+    this._selection.cells = S, this._selection.rows = /* @__PURE__ */ new Set(), this._selection.columns = /* @__PURE__ */ new Set();
+  }
+  // Select entire row
+  selectRow(e, o) {
+    for (const n of o)
+      this._selection.cells.add(Se(e, n));
+    this._selection.rows.add(e), this._selection.anchor = { rowId: e, colId: o[0] ?? "" };
+  }
+  // Select entire column
+  selectColumn(e, o) {
+    for (const n of o)
+      this._selection.cells.add(Se(n, e));
+    this._selection.columns.add(e), this._selection.anchor = { rowId: o[0] ?? "", colId: e };
+  }
+  // Clear all selection
+  clear() {
+    this._selection = je();
+  }
+  isSelected(e, o) {
+    return this._selection.cells.has(Se(e, o));
+  }
+  isRowSelected(e) {
+    return this._selection.rows.has(e);
+  }
+  isColumnSelected(e) {
+    return this._selection.columns.has(e);
+  }
+  // Returns a shallow copy of the current selection
+  getSelection() {
+    return {
+      cells: new Set(this._selection.cells),
+      rows: new Set(this._selection.rows),
+      columns: new Set(this._selection.columns),
+      anchor: this._selection.anchor
+    };
+  }
+}
+function Ve(t, e, o, n, r) {
+  const c = o.yToRow(e), a = n.flattenedRows;
+  if (c < 0 || c >= a.length) return null;
+  const m = r.getPinnedColumns(), f = r.getPinnedWidth();
+  if (m.length > 0) {
+    if (t < f) {
+      let W = 0;
+      for (const S of m) {
+        if (t >= W && t < W + S.width)
+          return { rowId: a[c].id, colId: S.id };
+        W += S.width;
+      }
+      return null;
+    }
+    const y = t - f + o.scrollX, L = r.getScrollableColumns();
+    let O = 0;
+    for (const W of L) {
+      if (y >= O && y < O + W.width)
+        return { rowId: a[c].id, colId: W.id };
+      O += W.width;
+    }
+    return null;
+  }
+  const R = r.getColumnAtX(t + o.scrollX);
+  return R === null ? null : { rowId: a[c].id, colId: R };
+}
+function Jt(t, e, o) {
+  const n = window.devicePixelRatio || 1;
+  (t.width !== Math.round(e * n) || t.height !== Math.round(o * n)) && (t.width = Math.round(e * n), t.height = Math.round(o * n), t.style.width = `${e}px`, t.style.height = `${o}px`);
+  const c = t.getContext("2d");
+  return c.setTransform(n, 0, 0, n, 0, 0), c;
+}
+function kt(t, e, o, n, r = {}) {
+  const { canvasWidth: c, canvasHeight: a, rowHeight: m } = e, { rowStyle: f } = r;
+  t.clearRect(0, 0, c, a), t.fillStyle = "#f3f4f6", t.fillRect(0, 0, c, a);
+  const R = o.getVisibleRange(e.scrollY, a, m), y = o.flattenedRows, L = n.getPinnedColumns(), O = n.getScrollableColumns(), W = n.getPinnedWidth(), S = L.length > 0;
+  if (y.length === 0 || L.length === 0 && O.length === 0) return;
+  const G = n.getTotalWidth(), $ = Math.min(c, G - e.scrollX + (S ? e.scrollX : 0)), X = S ? Math.min(c, W + n.getScrollableColumns().reduce((T, C) => T + C.width, 0) - e.scrollX) : $, l = y.length * m, Y = Math.min(a, l - e.scrollY);
+  for (let T = R.startIndex; T <= R.endIndex; T++) {
+    const C = y[T];
+    if (!C) continue;
+    const D = e.rowToY(T), w = o.getDepth(C.id);
+    let h = T % 2 === 0 ? "#ffffff" : "#f9fafb";
+    if (f) {
+      const u = f(C, w);
+      u != null && u.backgroundColor && (h = u.backgroundColor);
+    }
+    t.fillStyle = h, t.fillRect(0, D, Math.max(X, W), m), t.strokeStyle = "#d1d5db", t.lineWidth = 0.5, t.beginPath(), t.moveTo(0, D + m), t.lineTo(Math.max(X, W), D + m), t.stroke();
+  }
+  if (Y > 0) {
+    const T = n.getVisibleRange(e.scrollX, c);
+    t.strokeStyle = "#d1d5db", t.lineWidth = 0.5;
+    for (let C = T.startIndex; C <= T.endIndex; C++) {
+      const D = O[C];
+      if (!D) continue;
+      const w = e.colToX(C, !1);
+      t.beginPath(), t.moveTo(w + D.width, 0), t.lineTo(w + D.width, Y), t.stroke();
+    }
+  }
+  if (S && Y > 0) {
+    t.fillStyle = "#ffffff", t.fillRect(0, 0, W, a);
+    for (let C = R.startIndex; C <= R.endIndex; C++) {
+      const D = y[C];
+      if (!D) continue;
+      const w = e.rowToY(C), h = o.getDepth(D.id);
+      let u = C % 2 === 0 ? "#ffffff" : "#f9fafb";
+      if (f) {
+        const x = f(D, h);
+        x != null && x.backgroundColor && (u = x.backgroundColor);
+      }
+      t.fillStyle = u, t.fillRect(0, w, W, m), t.strokeStyle = "#d1d5db", t.lineWidth = 0.5, t.beginPath(), t.moveTo(0, w + m), t.lineTo(W, w + m), t.stroke();
+    }
+    const T = n.getPinnedRange();
+    t.strokeStyle = "#d1d5db", t.lineWidth = 0.5;
+    for (let C = T.startIndex; C <= T.endIndex; C++) {
+      const D = L[C];
+      if (!D) continue;
+      const w = e.colToX(C, !0);
+      t.beginPath(), t.moveTo(w + D.width, 0), t.lineTo(w + D.width, Y), t.stroke();
+    }
+    t.strokeStyle = "#d1d5db", t.lineWidth = 1, t.beginPath(), t.moveTo(W, 0), t.lineTo(W, Y), t.stroke();
+  }
+}
+function Qt(t) {
+  function e(a, m, f, R, y, L) {
+    t.fillStyle = L, t.beginPath(), t.roundRect(a, m, f, R, y), t.fill();
+  }
+  function o(a, m, f, R) {
+    t.fillText(a, m, f, R);
+  }
+  function n(a, m) {
+    if (t.measureText(a).width <= m) return a;
+    let f = a;
+    for (; f.length > 0; )
+      if (f = f.slice(0, -1), t.measureText(f + "…").width <= m)
+        return f + "…";
+    return "…";
+  }
+  function r(a, m, f, R, y) {
+    const S = t.measureText(f).width + 16;
+    return e(a, m, S, 20, 20 / 2, R), t.fillStyle = y, t.fillText(f, a + 8, m + 20 / 2), S;
+  }
+  function c(a, m, f, R, y, L) {
+    e(a, m, f, R, R / 2, "#d1d5db");
+    const O = f * Math.max(0, Math.min(1, y));
+    O > 0 && e(a, m, O, R, R / 2, L);
+  }
+  return { roundRect: e, fillText: o, truncateText: n, badge: r, progressBar: c };
+}
+function _t(t, e, o, n, r, c) {
+  const { canvasWidth: a, canvasHeight: m, rowHeight: f } = e, { cellRenderer: R, getCellData: y, hoveredCell: L } = c;
+  t.clearRect(0, 0, a, m);
+  const O = o.getVisibleRange(e.scrollY, m, f), W = o.flattenedRows, S = n.getPinnedColumns(), G = n.getScrollableColumns(), $ = S.length > 0;
+  if (W.length === 0 || S.length === 0 && G.length === 0) return;
+  const X = Qt(t), l = (T, C, D, w) => {
+    const h = { x: D, y: w, width: C.width, height: f }, u = { rowId: T.id, colId: C.id, data: y(T.id, C.id) }, x = {
+      selected: r.isSelected(T.id, C.id),
+      hovered: L != null && L.rowId === T.id && L.colId === C.id,
+      rowSelected: r.isRowSelected(T.id),
+      colSelected: r.isColumnSelected(C.id),
+      filtered: !0,
+      depth: o.getDepth(T.id),
+      hasChildren: o.hasChildren(T.id),
+      expanded: o.isExpanded(T.id)
+    };
+    t.save(), t.beginPath(), t.rect(D, w, C.width, f), t.clip(), R(t, u, h, x, X), t.restore();
+  }, Y = n.getVisibleRange(e.scrollX, a);
+  for (let T = O.startIndex; T <= O.endIndex; T++) {
+    const C = W[T];
+    if (!C) continue;
+    const D = e.rowToY(T);
+    for (let w = Y.startIndex; w <= Y.endIndex; w++) {
+      const h = G[w];
+      if (!h) continue;
+      const u = e.colToX(w, $ ? !1 : void 0);
+      l(C, h, u, D);
+    }
+  }
+  if ($) {
+    n.getPinnedWidth();
+    const T = n.getPinnedRange();
+    for (let C = O.startIndex; C <= O.endIndex; C++) {
+      const D = W[C];
+      if (!D) continue;
+      const w = e.rowToY(C);
+      t.save(), t.fillStyle = "#ffffff", t.restore();
+      for (let h = T.startIndex; h <= T.endIndex; h++) {
+        const u = S[h];
+        if (!u) continue;
+        const x = e.colToX(h, !0);
+        l(D, u, x, w);
+      }
+    }
+  }
+}
+function Zt(t, e, o, n, r, c = {}) {
+  const { canvasWidth: a, canvasHeight: m, rowHeight: f } = e, { hoveredCell: R, hoveredRowId: y, selectedCell: L, resizingColumn: O, loading: W } = c;
+  t.clearRect(0, 0, a, m);
+  const S = o.getVisibleRange(e.scrollY, m, f), G = o.flattenedRows, $ = n.getPinnedColumns(), X = n.getScrollableColumns(), l = $.length > 0;
+  if (n.getPinnedWidth(), G.length === 0 || $.length === 0 && X.length === 0) return;
+  const Y = n.getVisibleRange(e.scrollX, a), T = n.getPinnedRange(), C = (w) => {
+    for (let h = Y.startIndex; h <= Y.endIndex; h++) {
+      const u = X[h];
+      if (!u) continue;
+      const x = l ? e.colToX(h, !1) : e.colToX(h);
+      w(u, x);
+    }
+    if (l)
+      for (let h = T.startIndex; h <= T.endIndex; h++) {
+        const u = $[h];
+        if (!u) continue;
+        const x = e.colToX(h, !0);
+        w(u, x);
+      }
+  };
+  if (L) {
+    for (let w = S.startIndex; w <= S.endIndex; w++) {
+      const h = G[w];
+      if (!h || h.id !== L.rowId) continue;
+      const u = e.rowToY(w);
+      C((x, F) => {
+        t.fillStyle = "rgba(59,130,246,0.06)", t.fillRect(F, u, x.width, f);
+      });
+      break;
+    }
+    C((w, h) => {
+      if (w.id === L.colId)
+        for (let u = S.startIndex; u <= S.endIndex; u++) {
+          if (!G[u]) continue;
+          const F = e.rowToY(u);
+          t.fillStyle = "rgba(59,130,246,0.06)", t.fillRect(h, F, w.width, f);
+        }
+    });
+  }
+  const D = (w, h, u, x, F) => {
+    const B = w.width, K = f, d = r.isSelected(u.id, w.id), M = r.isRowSelected(u.id), P = r.isColumnSelected(w.id), z = y != null && y === u.id, V = R != null && R.rowId === u.id && R.colId === w.id;
+    d ? (t.fillStyle = "rgba(59,130,246,0.12)", t.fillRect(h, x, B, K), t.strokeStyle = "#3b82f6", t.lineWidth = 2, t.strokeRect(h + 1, x + 1, B - 2, K - 2)) : M || P || V ? (t.fillStyle = "rgba(59,130,246,0.08)", t.fillRect(h, x, B, K)) : z && (t.fillStyle = "rgba(59,130,246,0.04)", t.fillRect(h, x, B, K));
+  };
+  for (let w = S.startIndex; w <= S.endIndex; w++) {
+    const h = G[w];
+    if (!h) continue;
+    const u = e.rowToY(w);
+    for (let x = Y.startIndex; x <= Y.endIndex; x++) {
+      const F = X[x];
+      if (!F) continue;
+      const B = l ? e.colToX(x, !1) : e.colToX(x);
+      D(F, B, h, u);
+    }
+  }
+  if (l)
+    for (let w = S.startIndex; w <= S.endIndex; w++) {
+      const h = G[w];
+      if (!h) continue;
+      const u = e.rowToY(w);
+      for (let x = T.startIndex; x <= T.endIndex; x++) {
+        const F = $[x];
+        if (!F) continue;
+        const B = e.colToX(x, !0);
+        D(F, B, h, u);
+      }
+    }
+  if (O && (t.save(), t.strokeStyle = "#3b82f6", t.lineWidth = 1, t.setLineDash([4, 4]), t.beginPath(), t.moveTo(O.x, 0), t.lineTo(O.x, m), t.stroke(), t.setLineDash([]), t.restore()), W) {
+    const h = m - 32;
+    t.fillStyle = "#f3f4f6", t.fillRect(0, h, a, 32), t.strokeStyle = "#e5e7eb", t.lineWidth = 1, t.beginPath(), t.moveTo(0, h), t.lineTo(a, h), t.stroke(), t.fillStyle = "#6b7280", t.font = "13px system-ui, sans-serif", t.textAlign = "center", t.textBaseline = "middle", t.fillText("Loading...", a / 2, h + 32 / 2);
+  }
+}
+function en({
+  treeEngine: t,
+  width: e,
+  rowHeight: o,
+  scrollTop: n,
+  viewportHeight: r,
+  sidebarRenderer: c,
+  onToggle: a,
+  onRowClick: m,
+  hoveredRowId: f,
+  onRowHover: R
+}) {
+  const y = t.flattenedRows, { startIndex: L, endIndex: O } = t.getVisibleRange(n, r, o), W = [];
+  for (let $ = L; $ <= O; $++) {
+    const X = y[$];
+    if (!X) continue;
+    const l = t.getDepth(X.id), Y = t.hasChildren(X.id), T = t.isExpanded(X.id), C = $ * o;
+    let D;
+    if (c)
+      D = c(X, l, T, Y);
+    else {
+      const h = l * 16 + 8;
+      D = /* @__PURE__ */ de(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            height: "100%",
+            paddingLeft: h,
+            overflow: "hidden",
+            whiteSpace: "nowrap",
+            cursor: Y ? "pointer" : "default",
+            userSelect: "none"
+          },
+          onPointerDown: Y ? (u) => {
+            u.stopPropagation(), a(X.id);
+          } : void 0,
+          children: [
+            Y ? /* @__PURE__ */ H("span", { style: { marginRight: 4, flexShrink: 0, fontSize: 10, color: "#6b7280" }, children: T ? "▾" : "▸" }) : /* @__PURE__ */ H("span", { style: { width: 14, flexShrink: 0 } }),
+            /* @__PURE__ */ H("span", { style: { overflow: "hidden", textOverflow: "ellipsis", fontSize: 12 }, children: String(X.title ?? X.id) })
+          ]
+        }
+      );
+    }
+    const w = f === X.id;
+    W.push(
+      /* @__PURE__ */ H(
+        "div",
+        {
+          role: "rowheader",
+          "aria-level": l + 1,
+          "aria-expanded": Y ? T : void 0,
+          style: {
+            position: "absolute",
+            top: C,
+            left: 0,
+            width: "100%",
+            height: o,
+            boxSizing: "border-box",
+            fontSize: 13,
+            color: "#374151",
+            borderBottom: "1px solid #e5e7eb",
+            cursor: m ? "pointer" : "default",
+            backgroundColor: w ? "rgba(59,130,246,0.04)" : void 0
+          },
+          onPointerDown: m ? (h) => m(X.id, h) : void 0,
+          onPointerEnter: () => R == null ? void 0 : R(X.id),
+          onPointerLeave: () => R == null ? void 0 : R(null),
+          children: D
+        },
+        String(X.id)
+      )
+    );
+  }
+  const S = y.length * o, G = Math.min(r, S - n);
+  return /* @__PURE__ */ de(
+    "div",
+    {
+      style: {
+        width: e,
+        height: r,
+        overflow: "hidden",
+        position: "relative",
+        flexShrink: 0,
+        backgroundColor: "#ffffff"
+      },
+      children: [
+        /* @__PURE__ */ H(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              right: 0,
+              width: 1,
+              height: Math.max(0, G),
+              backgroundColor: "#e5e7eb",
+              zIndex: 1
+            }
+          }
+        ),
+        /* @__PURE__ */ H(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: S,
+              transform: `translateY(-${n}px)`
+            },
+            children: W
+          }
+        )
+      ]
+    }
+  );
+}
+const qe = 28, Je = 28, tn = 4;
+function nn(t) {
+  switch (t) {
+    case "vertical":
+      return 120;
+    default:
+      return 32;
+  }
+}
+function on({
+  columnEngine: t,
+  columnGroups: e,
+  scrollX: o,
+  orientation: n = "horizontal",
+  onColumnClick: r,
+  onColumnResize: c,
+  onColumnReorder: a,
+  columnHeaderRenderer: m
+}) {
+  const f = t.getPinnedColumns(), R = t.getScrollableColumns(), y = t.getVisibleColumns(), L = t.getPinnedWidth(), O = /* @__PURE__ */ new Map();
+  if (e)
+    for (const d of e)
+      O.set(d.id, d);
+  const W = ne(null), [S, G] = ve(null), $ = ne(null), X = ne(!1), l = ne(null), Y = ne(null);
+  $.current = S;
+  const T = [...f, ...R], C = [];
+  if (e && e.length > 0) {
+    let d, M = 0, P = 0, z = !1;
+    for (const V of T) {
+      const q = t.getColumnX(V.id), J = V.pinned === "left";
+      if (V.group !== d) {
+        if (d !== void 0 && P > 0) {
+          const Q = O.get(d);
+          Q && C.push({ group: Q, startX: M, width: P, pinned: z });
+        }
+        d = V.group, M = q, P = V.width, z = J;
+      } else
+        P += V.width;
+    }
+    if (d !== void 0 && P > 0) {
+      const V = O.get(d);
+      V && C.push({ group: V, startX: M, width: P, pinned: z });
+    }
+  }
+  const D = C.length > 0, w = nn(n), h = D ? qe + w : w, u = te(
+    (d, M) => {
+      M.stopPropagation(), M.preventDefault();
+      const P = y.find((z) => z.id === d);
+      P && (W.current = { colId: d, startX: M.clientX, startWidth: P.width });
+    },
+    [y]
+  );
+  re(() => {
+    const d = (P) => {
+      const z = W.current;
+      if (!z) return;
+      const V = P.clientX - z.startX, q = Math.max(z.startWidth + V, 30);
+      c == null || c(z.colId, q);
+    }, M = () => {
+      W.current = null;
+    };
+    return document.addEventListener("mousemove", d), document.addEventListener("mouseup", M), () => {
+      document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", M);
+    };
+  }, [c]);
+  const x = te(
+    (d) => {
+      const M = Y.current;
+      if (!M) return { dropIndex: 0 };
+      const P = M.getBoundingClientRect(), z = d - P.left + o;
+      let V = 0;
+      for (let q = 0; q < y.length; q++) {
+        const J = y[q], le = t.getColumnX(J.id) + J.width / 2;
+        z > le && (V = q + 1);
+      }
+      return { dropIndex: V };
+    },
+    [y, t, o]
+  ), F = te(
+    (d, M) => {
+      M.target.dataset.resizeHandle || a && (M.preventDefault(), X.current = !1, l.current = { colId: d, startX: M.clientX, currentX: M.clientX });
+    },
+    [a]
+  );
+  re(() => {
+    if (!a) return;
+    const d = (z) => {
+      const V = l.current;
+      if (!V) return;
+      const q = Math.abs(z.clientX - V.startX);
+      if (!X.current && q >= tn) {
+        X.current = !0;
+        const J = y.find((Pe) => Pe.id === V.colId), Q = t.getColumnX(V.colId), { dropIndex: le } = x(z.clientX);
+        G({
+          colId: V.colId,
+          startX: V.startX,
+          currentX: z.clientX,
+          dropIndex: le,
+          ghostLeft: Q - o,
+          ghostWidth: (J == null ? void 0 : J.width) ?? 80,
+          ghostTitle: (J == null ? void 0 : J.title) ?? ""
+        });
+        return;
+      }
+      if (X.current) {
+        const { dropIndex: J } = x(z.clientX);
+        G((Q) => Q && { ...Q, currentX: z.clientX, dropIndex: J });
+      }
+    }, M = () => {
+      X.current && $.current && a($.current.colId, $.current.dropIndex), l.current = null, X.current = !1, G(null);
+    }, P = (z) => {
+      z.key === "Escape" && (l.current = null, X.current = !1, G(null));
+    };
+    return document.addEventListener("mousemove", d), document.addEventListener("mouseup", M), document.addEventListener("keydown", P), () => {
+      document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", M), document.removeEventListener("keydown", P);
+    };
+  }, [a, y, t, o, x]);
+  const B = () => {
+    if (!S) return 0;
+    const { dropIndex: d } = S;
+    if (d >= y.length) {
+      const M = y[y.length - 1];
+      return t.getColumnX(M.id) + M.width - o;
+    }
+    return t.getColumnX(y[d].id) - o;
+  }, K = (d, M, P) => {
+    const z = (S == null ? void 0 : S.colId) === d.id, q = d.pinned === "left" ? "horizontal" : n, J = m == null ? void 0 : m(d.id, d.title);
+    let Q;
+    return J ? Q = J : q === "vertical" ? Q = /* @__PURE__ */ H(
+      "div",
+      {
+        style: {
+          writingMode: "vertical-rl",
+          textOrientation: "mixed",
+          transform: "rotate(180deg)",
+          height: P - 16,
+          lineHeight: `${d.width}px`,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        },
+        children: d.title
+      }
+    ) : Q = /* @__PURE__ */ H("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1 }, children: d.title }), /* @__PURE__ */ de(
+      "div",
+      {
+        role: "columnheader",
+        title: d.title,
+        style: {
+          position: "absolute",
+          left: M,
+          width: d.width,
+          height: P,
+          boxSizing: "border-box",
+          borderRight: "1px solid #d1d5db",
+          display: "flex",
+          alignItems: q === "horizontal" ? "center" : "flex-end",
+          justifyContent: q === "horizontal" ? "flex-start" : "center",
+          paddingLeft: q === "horizontal" ? 8 : 0,
+          paddingBottom: q !== "horizontal" ? 6 : 0,
+          cursor: a ? "grab" : r ? "pointer" : "default",
+          userSelect: "none",
+          fontSize: 13,
+          fontWeight: 500,
+          color: "#6C737F",
+          opacity: z ? 0.4 : 1
+        },
+        onMouseDown: a ? (le) => F(d.id, le) : void 0,
+        onPointerDown: r && !a ? (le) => r(d.id, le) : void 0,
+        children: [
+          Q,
+          c && /* @__PURE__ */ H(
+            "div",
+            {
+              "data-resize-handle": "true",
+              style: {
+                position: "absolute",
+                right: 0,
+                top: 0,
+                width: 4,
+                height: "100%",
+                cursor: "col-resize",
+                zIndex: 1
+              },
+              onMouseDown: (le) => u(d.id, le)
+            }
+          )
+        ]
+      },
+      d.id
+    );
+  };
+  return /* @__PURE__ */ de(
+    "div",
+    {
+      ref: Y,
+      style: {
+        flex: 1,
+        height: h + 1,
+        overflow: "hidden",
+        position: "relative",
+        backgroundColor: "#f9fafb"
+      },
+      children: [
+        /* @__PURE__ */ de(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              transform: `translateX(-${o}px)`,
+              height: h
+            },
+            children: [
+              /* @__PURE__ */ H("div", { style: { position: "absolute", top: 0, height: h }, children: R.map((d) => {
+                const M = t.getColumnX(d.id);
+                return K(d, M, h);
+              }) }),
+              D && /* @__PURE__ */ H("div", { style: { position: "relative", height: qe, zIndex: 1 }, children: C.filter((d) => !d.pinned).map((d) => /* @__PURE__ */ H(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    left: d.startX,
+                    width: d.width,
+                    height: qe,
+                    borderBottom: `1px solid ${d.group.color ?? "#3b82f6"}`,
+                    display: "flex",
+                    alignItems: "center",
+                    paddingLeft: 8,
+                    boxSizing: "border-box",
+                    fontSize: 11,
+                    fontWeight: 600,
+                    color: "#6b7280",
+                    overflow: "hidden",
+                    whiteSpace: "nowrap",
+                    backgroundColor: "#f9fafb"
+                  },
+                  children: d.group.title
+                },
+                d.group.id
+              )) })
+            ]
+          }
+        ),
+        f.length > 0 && /* @__PURE__ */ de(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: L,
+              height: h,
+              backgroundColor: "#f9fafb",
+              zIndex: 2,
+              display: "flex",
+              flexDirection: "column"
+            },
+            children: [
+              D && /* @__PURE__ */ H("div", { style: { position: "absolute", top: 0, left: 0, width: L, height: h - Je }, children: C.filter((d) => d.pinned).map((d) => /* @__PURE__ */ H(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    left: d.startX,
+                    width: d.width,
+                    height: "100%",
+                    borderBottom: "1px solid #d1d5db",
+                    borderRight: "1px solid #d1d5db",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    boxSizing: "border-box",
+                    fontSize: 11,
+                    fontWeight: 600,
+                    color: "#6b7280",
+                    overflow: "hidden",
+                    whiteSpace: "nowrap",
+                    backgroundColor: "#f9fafb"
+                  },
+                  children: d.group.title
+                },
+                d.group.id
+              )) }),
+              /* @__PURE__ */ H("div", { style: { position: "absolute", bottom: 0, left: 0, width: L, height: Je, borderTop: "1px solid #d1d5db" }, children: f.map((d) => {
+                const M = t.getColumnX(d.id);
+                return K(d, M, Je);
+              }) }),
+              /* @__PURE__ */ H(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: 0,
+                    right: 0,
+                    width: 1,
+                    height: "100%",
+                    backgroundColor: "#d1d5db",
+                    zIndex: 3
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ H("div", { style: { position: "absolute", bottom: 0, left: 0, right: 0, height: 1, backgroundColor: "#d1d5db", zIndex: 5 } }),
+        S && /* @__PURE__ */ H("div", { style: { position: "absolute", top: 0, left: B(), width: 2, height: h, backgroundColor: "#3b82f6", pointerEvents: "none", zIndex: 10 } }),
+        S && /* @__PURE__ */ H("div", { style: { position: "fixed", top: 0, left: S.currentX - S.ghostWidth / 2, width: S.ghostWidth, height: 32, backgroundColor: "#dbeafe", border: "1px solid #3b82f6", borderRadius: 4, display: "flex", alignItems: "center", paddingLeft: 8, boxSizing: "border-box", fontSize: 12, fontWeight: 600, color: "#1d4ed8", opacity: 0.85, pointerEvents: "none", zIndex: 9999, whiteSpace: "nowrap", overflow: "hidden" }, children: S.ghostTitle })
+      ]
+    }
+  );
+}
+function ln({
+  columnEngine: t,
+  onColumnVisibilityChange: e
+}) {
+  const [o, n] = ve(!1), r = ne(null), c = t.getAllColumns();
+  return re(() => {
+    if (!o) return;
+    const a = (f) => {
+      r.current && !r.current.contains(f.target) && n(!1);
+    }, m = (f) => {
+      f.key === "Escape" && n(!1);
+    };
+    return document.addEventListener("mousedown", a), document.addEventListener("keydown", m), () => {
+      document.removeEventListener("mousedown", a), document.removeEventListener("keydown", m);
+    };
+  }, [o]), /* @__PURE__ */ de("div", { ref: r, style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ H(
+      "button",
+      {
+        onClick: () => n((a) => !a),
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 4,
+          padding: "0 8px",
+          height: 28,
+          fontSize: 12,
+          fontWeight: 600,
+          color: "#374151",
+          backgroundColor: o ? "#e5e7eb" : "#f9fafb",
+          border: "1px solid #d1d5db",
+          borderRadius: 4,
+          cursor: "pointer",
+          whiteSpace: "nowrap"
+        },
+        title: "Toggle column visibility",
+        children: "Columns"
+      }
+    ),
+    o && /* @__PURE__ */ H(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: "100%",
+          left: 0,
+          marginTop: 4,
+          minWidth: 160,
+          backgroundColor: "#ffffff",
+          border: "1px solid #d1d5db",
+          borderRadius: 6,
+          boxShadow: "0 4px 12px rgba(0,0,0,0.12)",
+          zIndex: 1e3,
+          padding: "4px 0"
+        },
+        children: c.map((a) => {
+          const m = !a.hidden;
+          return /* @__PURE__ */ de(
+            "label",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                padding: "6px 12px",
+                cursor: "pointer",
+                fontSize: 13,
+                color: "#374151",
+                userSelect: "none"
+              },
+              onMouseEnter: (f) => {
+                f.currentTarget.style.backgroundColor = "#f3f4f6";
+              },
+              onMouseLeave: (f) => {
+                f.currentTarget.style.backgroundColor = "";
+              },
+              children: [
+                /* @__PURE__ */ H(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: m,
+                    onChange: (f) => {
+                      e(a.id, f.target.checked);
+                    },
+                    style: { cursor: "pointer", width: 14, height: 14 }
+                  }
+                ),
+                /* @__PURE__ */ H("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: a.title })
+              ]
+            },
+            a.id
+          );
+        })
+      }
+    )
+  ] });
+}
+function sn({ content: t, position: e }) {
+  return Ft(
+    /* @__PURE__ */ H(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          left: e.left,
+          top: e.top,
+          zIndex: 9999,
+          pointerEvents: "none"
+        },
+        children: t
+      }
+    ),
+    document.body
+  );
+}
+function rn({ message: t }) {
+  return /* @__PURE__ */ H(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      style: {
+        position: "absolute",
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: "hidden",
+        clip: "rect(0,0,0,0)",
+        whiteSpace: "nowrap",
+        borderWidth: 0
+      },
+      children: t
+    }
+  );
+}
+const Ge = 24, Qe = 32;
+function dn(t) {
+  const {
+    treeEngine: e,
+    columnEngine: o,
+    columnGroups: n,
+    rowHeight: r,
+    sidebarWidth: c,
+    gridLayerConfig: a,
+    cellLayerConfig: m,
+    scale: f = 2
+  } = t, R = n != null && n.length > 0, y = R ? Ge + Qe : Qe, L = o.getVisibleColumns(), O = e.flattenedRows, W = o.getTotalWidth(), S = O.length * r, G = c + W, $ = y + S, X = document.createElement("canvas");
+  X.width = Math.round(G * f), X.height = Math.round($ * f), X.style.width = `${G}px`, X.style.height = `${$}px`;
+  const l = X.getContext("2d");
+  l.setTransform(f, 0, 0, f, 0, 0), l.fillStyle = "#ffffff", l.fillRect(0, 0, G, $);
+  const Y = new St({
+    scrollX: 0,
+    scrollY: 0,
+    canvasWidth: W,
+    canvasHeight: S,
+    rowHeight: r
+  }), T = [], C = [];
+  let D = 0;
+  for (const u of L)
+    T.push(D), C.push(u.width), D += u.width;
+  Y.setColumnOffsets(T), Y.setColumnWidths(C), l.save(), l.translate(c, y), kt(l, Y, e, o, a), _t(l, Y, e, o, t.selectionEngine, m), l.restore(), l.save(), l.translate(0, y);
+  const w = "#ffffff";
+  l.fillStyle = w, l.fillRect(0, 0, c, S), l.strokeStyle = "#e5e7eb", l.lineWidth = 0.5, l.beginPath(), l.moveTo(c, 0), l.lineTo(c, S), l.stroke(), l.font = "13px system-ui, sans-serif", l.textBaseline = "middle", l.fillStyle = "#374151";
+  for (let u = 0; u < O.length; u++) {
+    const x = O[u];
+    if (!x) continue;
+    const F = e.getDepth(x.id), B = u * r, K = F * 16 + 8, d = String(x.title ?? x.id), M = c - K - 8;
+    l.fillStyle = u % 2 === 0 ? "#ffffff" : "#f9fafb", l.fillRect(0, B, c, r), l.strokeStyle = "#e5e7eb", l.lineWidth = 0.5, l.beginPath(), l.moveTo(0, B + r), l.lineTo(c, B + r), l.stroke(), l.fillStyle = "#374151";
+    let P = d;
+    if (l.measureText(P).width > M && M > 0) {
+      for (; P.length > 0 && l.measureText(P + "…").width > M; )
+        P = P.slice(0, -1);
+      P = P + "…";
+    }
+    l.fillText(P, K, B + r / 2);
+  }
+  if (l.restore(), l.save(), l.translate(0, 0), l.fillStyle = "#f9fafb", l.fillRect(0, 0, G, y), l.strokeStyle = "#e5e7eb", l.lineWidth = 1, l.beginPath(), l.moveTo(0, y), l.lineTo(G, y), l.stroke(), l.fillStyle = "#f9fafb", l.fillRect(0, 0, c, y), l.strokeStyle = "#e5e7eb", l.lineWidth = 0.5, l.beginPath(), l.moveTo(c, 0), l.lineTo(c, y), l.stroke(), R && n) {
+    const u = /* @__PURE__ */ new Map();
+    for (const d of n)
+      u.set(d.id, d);
+    let x, F = 0, B = 0;
+    const K = (d, M, P) => {
+      if (d === void 0 || P <= 0) return;
+      const z = u.get(d);
+      if (!z) return;
+      const V = c + M;
+      l.fillStyle = z.color ?? "#3b82f6", l.fillRect(V, Ge - 2, P, 2), l.font = "600 11px system-ui, sans-serif", l.fillStyle = "#6b7280", l.textBaseline = "middle", l.textAlign = "left", l.fillText(z.title, V + 8, Ge / 2);
+    };
+    for (const d of L) {
+      const M = o.getColumnX(d.id);
+      d.group !== x ? (K(x, F, B), x = d.group, F = M, B = d.width) : B += d.width;
+    }
+    K(x, F, B);
+  }
+  const h = R ? Ge : 0;
+  l.font = "600 12px system-ui, sans-serif", l.textBaseline = "middle", l.textAlign = "left", l.fillStyle = "#374151";
+  for (const u of L) {
+    const x = o.getColumnX(u.id), F = c + x;
+    l.strokeStyle = "#e5e7eb", l.lineWidth = 0.5, l.beginPath(), l.moveTo(F + u.width, h), l.lineTo(F + u.width, y), l.stroke(), l.fillStyle = "#374151";
+    const B = u.width - 16;
+    let K = u.title;
+    if (B > 0 && l.measureText(K).width > B) {
+      for (; K.length > 0 && l.measureText(K + "…").width > B; )
+        K = K.slice(0, -1);
+      K = K + "…";
+    }
+    l.fillText(K, F + 8, h + Qe / 2);
+  }
+  return l.restore(), X;
+}
+const yt = 180, xt = 32, cn = 24, It = 200;
+function Rt(t, e) {
+  let o;
+  switch (t) {
+    case "vertical":
+      o = 120;
+      break;
+    default:
+      o = 32;
+  }
+  return e ? cn + o : o;
+}
+const un = $t(
+  Bt(function(e, o) {
+    const {
+      rows: n,
+      columns: r,
+      columnGroups: c,
+      getCellData: a,
+      cellRenderer: m,
+      sidebarRenderer: f,
+      sidebarWidth: R = yt,
+      rowHeight: y = xt,
+      headerOrientation: L = "horizontal",
+      rowStyle: O,
+      selection: W,
+      onSelectionChange: S,
+      onCellClick: G,
+      onCellDoubleClick: $,
+      onCellContextMenu: X,
+      onCellHover: l,
+      onColumnHeaderClick: Y,
+      onTreeToggle: T,
+      defaultExpandedRows: C,
+      onExpandChange: D,
+      onLoadMore: w,
+      hasMore: h,
+      loading: u,
+      hoverContent: x,
+      hoverPosition: F,
+      showColumnVisibilityMenu: B,
+      ariaLabel: K = "Data grid"
+    } = e, [d, M] = ve(
+      () => new Set(C ?? [])
+    ), [P, z] = ve(0), [V, q] = ve(0), [J, Q] = ve(r), [le, Pe] = ve(null), [Tt, Ce] = ve(""), [Mt, $e] = ve(null), Ee = ne(null), Ze = ne(null);
+    re(() => {
+      Q(r);
+    }, [r]);
+    const et = ne(null), pe = ne([]), ce = ne(new St({ rowHeight: y })), N = ne(null), A = ne(e), fe = ne(null), Le = ne(null), Oe = ne(!1);
+    A.current = e;
+    const ke = Ne(
+      () => new Nt(n, d),
+      [n, d]
+    ), se = Ne(() => new Ie(J), [J]), tt = Ne(() => new qt(W), [W]);
+    fe.current = { treeEngine: ke, columnEngine: se, selectionEngine: tt };
+    const Be = se.getPinnedColumns().length > 0, _e = Be ? 0 : R, nt = te((i) => {
+      const g = fe.current;
+      if (!g) return;
+      const { treeEngine: I, columnEngine: _, selectionEngine: v } = g, b = ce.current, s = i === "grid" ? 0 : i === "cells" ? 1 : 2, p = pe.current[s];
+      if (!p) return;
+      const k = Jt(p, b.canvasWidth, b.canvasHeight);
+      i === "grid" ? kt(k, b, I, _, { rowStyle: A.current.rowStyle }) : i === "cells" ? _t(k, b, I, _, v, {
+        cellRenderer: A.current.cellRenderer,
+        getCellData: A.current.getCellData,
+        hoveredCell: Le.current
+      }) : Zt(k, b, I, _, v, {
+        hoveredCell: Le.current,
+        hoveredRowId: Ee.current,
+        selectedCell: Ze.current,
+        resizingColumn: le ?? void 0,
+        loading: A.current.loading
+      });
+    }, [le]);
+    re(() => {
+      const i = se.getPinnedColumns(), g = se.getScrollableColumns(), I = se.getPinnedWidth(), _ = [], v = [];
+      let b = 0;
+      for (const oe of i)
+        _.push(b), v.push(oe.width), b += oe.width;
+      const s = [], p = [];
+      let k = 0;
+      for (const oe of g)
+        s.push(k), p.push(oe.width), k += oe.width;
+      const E = ce.current;
+      E.pinnedWidth = I, E.setPinnedOffsets(_, v), E.setScrollableOffsets(s, p);
+      const U = se.getVisibleColumns(), Z = [], ae = [];
+      let ye = 0;
+      for (const oe of U)
+        Z.push(ye), ae.push(oe.width), ye += oe.width;
+      E.setColumnOffsets(Z), E.setColumnWidths(ae), E.update({ rowHeight: y });
+    }, [se, y]), re(() => {
+      const i = new Ut(nt);
+      return N.current = i, i.markAllDirty(), () => {
+        i.destroy(), N.current = null;
+      };
+    }, [nt]), re(() => {
+      const i = et.current;
+      if (!i) return;
+      const g = new ResizeObserver((I) => {
+        var _, v;
+        for (const b of I) {
+          const { width: s, height: p } = b.contentRect, k = s - _e, E = Rt(A.current.headerOrientation ?? "horizontal", (((_ = A.current.columnGroups) == null ? void 0 : _.length) ?? 0) > 0), U = p - E;
+          ce.current.update({
+            canvasWidth: Math.max(0, k),
+            canvasHeight: Math.max(0, U)
+          }), (v = N.current) == null || v.markAllDirty();
+        }
+      });
+      return g.observe(i), () => g.disconnect();
+    }, [_e]), re(() => {
+      var i;
+      (i = N.current) == null || i.markAllDirty();
+    }, [ke, se, tt]), re(() => {
+      var i;
+      (i = N.current) == null || i.markDirty("overlay");
+    }, [u]);
+    const Ke = te((i) => {
+      var ae;
+      i.preventDefault();
+      const g = ce.current, I = fe.current;
+      if (!I) return;
+      const _ = I.treeEngine.flattenedRows.length * g.rowHeight, v = I.columnEngine.getTotalWidth(), b = Math.max(0, _ - g.canvasHeight), s = v - I.columnEngine.getPinnedWidth(), p = g.canvasWidth - I.columnEngine.getPinnedWidth(), k = Math.max(0, s - p), E = Math.max(0, Math.min(b, g.scrollY + i.deltaY)), U = Math.max(0, Math.min(k, g.scrollX + i.deltaX));
+      g.update({ scrollY: E, scrollX: U }), z(E), q(U), (ae = N.current) == null || ae.markAllDirty();
+      const Z = A.current;
+      Z.hasMore && Z.onLoadMore && !Z.loading && b - E < It ? Oe.current || (Oe.current = !0, Z.onLoadMore()) : b - E >= It && (Oe.current = !1);
+    }, []);
+    re(() => {
+      const i = pe.current[2];
+      if (i)
+        return i.addEventListener("wheel", Ke, { passive: !1 }), () => i.removeEventListener("wheel", Ke);
+    }, [Ke]), re(() => {
+      u || (Oe.current = !1);
+    }, [u]);
+    const Wt = te((i) => {
+      var p, k, E;
+      const g = fe.current;
+      if (!g) return;
+      const I = pe.current[2];
+      if (!I) return;
+      const _ = I.getBoundingClientRect(), v = i.clientX - _.left, b = i.clientY - _.top, s = Ve(v, b, ce.current, g.treeEngine, g.columnEngine);
+      Le.current = s, Ee.current = (s == null ? void 0 : s.rowId) ?? null, $e((s == null ? void 0 : s.rowId) ?? null), (p = N.current) == null || p.markDirty("overlay"), (E = (k = A.current).onCellHover) == null || E.call(k, (s == null ? void 0 : s.rowId) ?? null, (s == null ? void 0 : s.colId) ?? null, i.nativeEvent);
+    }, []), Fe = te((i) => {
+      M((g) => {
+        var _, v;
+        const I = new Set(g);
+        return I.has(i) ? (I.delete(i), Ce(`Row ${i} collapsed`)) : (I.add(i), Ce(`Row ${i} expanded`)), (v = (_ = A.current).onExpandChange) == null || v.call(_, [...I]), I;
+      });
+    }, []), Dt = te((i) => {
+      var Te, Me, We, De, Xe;
+      const g = fe.current;
+      if (!g) return;
+      const I = pe.current[2];
+      if (!I) return;
+      const _ = I.getBoundingClientRect(), v = i.clientX - _.left, b = i.clientY - _.top, s = Ve(v, b, ce.current, g.treeEngine, g.columnEngine);
+      if (!s) return;
+      const { treeEngine: p, columnEngine: k, selectionEngine: E } = g, U = k.getPinnedColumns();
+      if (U.length > 0) {
+        const ue = U[0].id;
+        if (p.hasChildren(s.rowId) && s.colId === ue) {
+          A.current.onTreeToggle ? A.current.onTreeToggle(s.rowId) : Fe(s.rowId);
+          return;
+        }
+      }
+      const Z = p.flattenedRows.map((ue) => ue.id), ae = k.getVisibleColumns().map((ue) => ue.id);
+      i.ctrlKey || i.metaKey ? E.ctrlClick(s.rowId, s.colId) : i.shiftKey ? E.shiftClick(s.rowId, s.colId, Z, ae) : E.click(s.rowId, s.colId, Z, ae), Ze.current = { rowId: s.rowId, colId: s.colId }, (Me = (Te = A.current).onSelectionChange) == null || Me.call(Te, E.getSelection()), (De = (We = A.current).onCellClick) == null || De.call(We, s.rowId, s.colId, i.nativeEvent), (Xe = N.current) == null || Xe.markDirty("overlay");
+      const ye = String(s.rowId), oe = k.getVisibleColumns().find((ue) => ue.id === s.colId), ze = (oe == null ? void 0 : oe.title) ?? s.colId;
+      Ce(`Row ${ye}, Column ${ze} selected`);
+    }, [Fe]), Xt = te((i) => {
+      var p, k;
+      const g = fe.current;
+      if (!g) return;
+      const I = pe.current[2];
+      if (!I) return;
+      const _ = I.getBoundingClientRect(), v = i.clientX - _.left, b = i.clientY - _.top, s = Ve(v, b, ce.current, g.treeEngine, g.columnEngine);
+      s && ((k = (p = A.current).onCellDoubleClick) == null || k.call(p, s.rowId, s.colId, i.nativeEvent));
+    }, []), Ht = te((i) => {
+      var p, k;
+      i.preventDefault();
+      const g = fe.current;
+      if (!g) return;
+      const I = pe.current[2];
+      if (!I) return;
+      const _ = I.getBoundingClientRect(), v = i.clientX - _.left, b = i.clientY - _.top, s = Ve(v, b, ce.current, g.treeEngine, g.columnEngine);
+      s && ((k = (p = A.current).onCellContextMenu) == null || k.call(p, s.rowId, s.colId, i.nativeEvent));
+    }, []), Pt = te(() => {
+      var i, g, I;
+      Le.current = null, Ee.current = null, $e(null), (i = N.current) == null || i.markDirty("overlay"), (I = (g = A.current).onCellHover) == null || I.call(g, null, null, new PointerEvent("pointerleave"));
+    }, []), Et = te(
+      (i, g) => {
+        var I, _;
+        (_ = (I = A.current).onColumnHeaderClick) == null || _.call(I, i, g.nativeEvent);
+      },
+      []
+    ), Lt = te(
+      (i, g) => {
+        var _, v, b, s;
+        Q((p) => p.map((E) => {
+          if (E.id !== i) return E;
+          const U = E.minWidth ?? 30;
+          return { ...E, width: Math.max(U, g) };
+        }));
+        const I = (_ = fe.current) == null ? void 0 : _.columnEngine;
+        if (I) {
+          const p = I.getColumnX(i), k = I.getVisibleColumns().find((E) => E.id === i);
+          if (k) {
+            const U = k.pinned === "left" ? p + Math.max(k.minWidth ?? 30, g) : p + Math.max(k.minWidth ?? 30, g) - ce.current.scrollX;
+            Pe({ colId: i, x: U });
+          }
+        }
+        (b = (v = A.current).onColumnResize) == null || b.call(v, i, g), (s = N.current) == null || s.markAllDirty();
+      },
+      []
+    );
+    re(() => {
+      const i = () => {
+        Pe(null);
+      };
+      return document.addEventListener("mouseup", i), () => document.removeEventListener("mouseup", i);
+    }, []);
+    const Ot = te(
+      (i, g) => {
+        var I, _, v;
+        Q((b) => {
+          const s = [...b], p = s.findIndex((U) => U.id === i);
+          if (p === -1) return b;
+          const [k] = s.splice(p, 1), E = Math.max(0, Math.min(g, s.length));
+          return s.splice(E, 0, k), s;
+        }), (_ = (I = A.current).onColumnReorder) == null || _.call(I, i, g), (v = N.current) == null || v.markAllDirty();
+      },
+      []
+    ), zt = te(
+      (i, g) => {
+        var I, _, v;
+        Q(
+          (b) => b.map((s) => s.id === i ? { ...s, hidden: !g } : s)
+        ), (_ = (I = A.current).onColumnVisibilityChange) == null || _.call(I, i, g), (v = N.current) == null || v.markAllDirty();
+      },
+      []
+    ), At = te((i) => {
+      var ae, ye, oe, ze, Te, Me, We, De, Xe, ue, Ue, it, lt, st, rt, dt, ct, at, ht, ft, ut, gt, pt, mt;
+      const g = fe.current;
+      if (!g) return;
+      const { treeEngine: I, columnEngine: _, selectionEngine: v } = g, b = ce.current, s = I.flattenedRows.map((j) => j.id), p = _.getVisibleColumns().map((j) => j.id);
+      if (s.length === 0 || p.length === 0) return;
+      const k = v.getSelection().anchor, E = i.ctrlKey || i.metaKey, U = (j, ee) => {
+        const ie = s.length * b.rowHeight, me = _.getTotalWidth(), we = Math.max(0, ie - b.canvasHeight), Ae = Math.max(0, me - b.canvasWidth), xe = j * b.rowHeight, Re = xe + b.rowHeight;
+        let he = b.scrollY;
+        xe < b.scrollY ? he = xe : Re > b.scrollY + b.canvasHeight && (he = Re - b.canvasHeight), he = Math.max(0, Math.min(we, he));
+        const be = _.getVisibleColumns()[ee], He = be ? _.getColumnX(be.id) : 0, Ye = He + ((be == null ? void 0 : be.width) ?? 0);
+        let ge = b.scrollX;
+        He < b.scrollX ? ge = He : Ye > b.scrollX + b.canvasWidth && (ge = Ye - b.canvasWidth), ge = Math.max(0, Math.min(Ae, ge)), (he !== b.scrollY || ge !== b.scrollX) && (b.update({ scrollY: he, scrollX: ge }), z(he), q(ge));
+      }, Z = (j, ee, ie) => {
+        var wt, bt, vt;
+        let me = k ? s.indexOf(k.rowId) : -1, we = k ? p.indexOf(k.colId) : -1;
+        me === -1 && (me = 0), we === -1 && (we = 0);
+        const Ae = Math.max(0, Math.min(s.length - 1, me + j)), xe = Math.max(0, Math.min(p.length - 1, we + ee)), Re = s[Ae], he = p[xe];
+        ie ? v.shiftClick(Re, he, s, p) : v.click(Re, he, s, p), (bt = (wt = A.current).onSelectionChange) == null || bt.call(wt, v.getSelection()), (vt = N.current) == null || vt.markDirty("overlay"), U(Ae, xe);
+        const be = _.getVisibleColumns()[xe], He = String(Re), Ye = (be == null ? void 0 : be.title) ?? String(he), ge = v.getSelection().cells.size;
+        ge > 1 ? Ce(`${ge} cells selected`) : Ce(`Row ${He}, Column ${Ye} selected`);
+      };
+      switch (i.key) {
+        case "ArrowUp":
+          i.preventDefault(), Z(-1, 0, i.shiftKey);
+          break;
+        case "ArrowDown":
+          i.preventDefault(), Z(1, 0, i.shiftKey);
+          break;
+        case "ArrowLeft":
+          i.preventDefault(), Z(0, -1, i.shiftKey);
+          break;
+        case "ArrowRight":
+          i.preventDefault(), Z(0, 1, i.shiftKey);
+          break;
+        case "Tab": {
+          if (i.preventDefault(), i.shiftKey) {
+            const j = k ? s.indexOf(k.rowId) : 0;
+            if ((k ? p.indexOf(k.colId) : 0) > 0)
+              Z(0, -1, !1);
+            else {
+              const ie = Math.max(0, (j === -1 ? 0 : j) - 1), me = s[ie], we = p[p.length - 1];
+              v.click(me, we, s, p), (Te = (ze = A.current).onSelectionChange) == null || Te.call(ze, v.getSelection()), (Me = N.current) == null || Me.markDirty("overlay"), U(ie, p.length - 1);
+            }
+          } else {
+            const j = k ? s.indexOf(k.rowId) : 0;
+            if ((k ? p.indexOf(k.colId) : -1) < p.length - 1)
+              Z(0, 1, !1);
+            else {
+              const ie = Math.min(s.length - 1, (j === -1 ? 0 : j) + 1), me = s[ie], we = p[0];
+              v.click(me, we, s, p), (ye = (ae = A.current).onSelectionChange) == null || ye.call(ae, v.getSelection()), (oe = N.current) == null || oe.markDirty("overlay"), U(ie, 0);
+            }
+          }
+          break;
+        }
+        case "Escape":
+          i.preventDefault(), v.clear(), (De = (We = A.current).onSelectionChange) == null || De.call(We, v.getSelection()), (Xe = N.current) == null || Xe.markDirty("overlay"), Ce("Selection cleared");
+          break;
+        case "a":
+        case "A":
+          if (E) {
+            i.preventDefault();
+            for (const j of s)
+              for (const ee of p)
+                v.ctrlClick(j, ee);
+            (Ue = (ue = A.current).onSelectionChange) == null || Ue.call(ue, v.getSelection()), (it = N.current) == null || it.markDirty("overlay"), Ce(`${s.length * p.length} cells selected`);
+          }
+          break;
+        case "Home": {
+          i.preventDefault();
+          const j = k ? s.indexOf(k.rowId) : 0;
+          if (E)
+            v.click(s[0], p[0], s, p), (st = (lt = A.current).onSelectionChange) == null || st.call(lt, v.getSelection()), (rt = N.current) == null || rt.markDirty("overlay"), U(0, 0);
+          else {
+            const ee = j === -1 ? 0 : j;
+            v.click(s[ee], p[0], s, p), (ct = (dt = A.current).onSelectionChange) == null || ct.call(dt, v.getSelection()), (at = N.current) == null || at.markDirty("overlay"), U(ee, 0);
+          }
+          break;
+        }
+        case "End": {
+          i.preventDefault();
+          const j = k ? s.indexOf(k.rowId) : 0;
+          if (E) {
+            const ee = s.length - 1, ie = p.length - 1;
+            v.click(s[ee], p[ie], s, p), (ft = (ht = A.current).onSelectionChange) == null || ft.call(ht, v.getSelection()), (ut = N.current) == null || ut.markDirty("overlay"), U(ee, ie);
+          } else {
+            const ee = j === -1 ? 0 : j, ie = p.length - 1;
+            v.click(s[ee], p[ie], s, p), (pt = (gt = A.current).onSelectionChange) == null || pt.call(gt, v.getSelection()), (mt = N.current) == null || mt.markDirty("overlay"), U(ee, ie);
+          }
+          break;
+        }
+      }
+    }, []);
+    Kt(o, () => ({
+      captureToCanvas(i) {
+        const g = fe.current;
+        if (!g)
+          throw new Error("CanvasGrid: engines not initialized");
+        const { treeEngine: I, columnEngine: _, selectionEngine: v } = g, b = A.current, s = b.rowHeight ?? xt, p = b.sidebarWidth ?? yt;
+        return dn({
+          treeEngine: I,
+          columnEngine: _,
+          selectionEngine: v,
+          columnGroups: b.columnGroups,
+          rowHeight: s,
+          sidebarWidth: p,
+          gridLayerConfig: { rowStyle: b.rowStyle },
+          cellLayerConfig: {
+            cellRenderer: b.cellRenderer,
+            getCellData: b.getCellData,
+            hoveredCell: null
+          },
+          scale: (i == null ? void 0 : i.scale) ?? 2
+        });
+      }
+    }), []);
+    const Yt = c != null && c.length > 0, ot = Rt(L ?? "horizontal", Yt), Vt = _e + se.getTotalWidth() + 2, Gt = ot + ke.flattenedRows.length * y + 2;
+    return /* @__PURE__ */ de(
+      "div",
+      {
+        ref: et,
+        tabIndex: 0,
+        role: "grid",
+        "aria-label": K,
+        "aria-rowcount": ke.flattenedRows.length,
+        "aria-colcount": se.getVisibleColumns().length,
+        onKeyDown: At,
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          width: Vt,
+          height: Gt,
+          maxWidth: "100%",
+          maxHeight: "100%",
+          overflow: "hidden",
+          fontFamily: "system-ui, sans-serif",
+          outline: "none",
+          border: "1px solid #d1d5db",
+          borderRadius: 4
+        },
+        children: [
+          /* @__PURE__ */ de("div", { style: { display: "flex", flexDirection: "row", height: ot, flexShrink: 0 }, children: [
+            !Be && /* @__PURE__ */ H(
+              "div",
+              {
+                style: {
+                  width: _e,
+                  flexShrink: 0,
+                  borderRight: "1px solid #e5e7eb",
+                  borderBottom: "1px solid #e5e7eb",
+                  backgroundColor: "#f9fafb",
+                  display: "flex",
+                  flexDirection: "column",
+                  overflow: "hidden"
+                },
+                children: e.sidebarHeaderRenderer ? /* @__PURE__ */ H("div", { style: { width: "100%", flex: 1 }, children: e.sidebarHeaderRenderer() }) : B ? /* @__PURE__ */ H("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", flex: 1 }, children: /* @__PURE__ */ H(
+                  ln,
+                  {
+                    columnEngine: se,
+                    onColumnVisibilityChange: zt
+                  }
+                ) }) : null
+              }
+            ),
+            /* @__PURE__ */ H(
+              on,
+              {
+                columnEngine: se,
+                columnGroups: c,
+                scrollX: V,
+                orientation: L,
+                onColumnClick: Y ? Et : void 0,
+                onColumnResize: e.onColumnResize !== void 0 ? Lt : void 0,
+                onColumnReorder: e.onColumnReorder !== void 0 ? Ot : void 0,
+                columnHeaderRenderer: e.columnHeaderRenderer
+              }
+            )
+          ] }),
+          /* @__PURE__ */ de("div", { style: { display: "flex", flexDirection: "row", flex: 1, overflow: "hidden" }, children: [
+            !Be && /* @__PURE__ */ H(
+              en,
+              {
+                treeEngine: ke,
+                width: _e,
+                rowHeight: y,
+                scrollTop: P,
+                viewportHeight: ce.current.canvasHeight || 600,
+                sidebarRenderer: f,
+                onToggle: Fe,
+                onRowClick: e.onRowHeaderClick ? (i, g) => e.onRowHeaderClick(i, g.nativeEvent) : void 0,
+                hoveredRowId: Mt,
+                onRowHover: (i) => {
+                  var g;
+                  Ee.current = i, $e(i), (g = N.current) == null || g.markDirty("overlay");
+                }
+              }
+            ),
+            /* @__PURE__ */ de("div", { style: { flex: 1, position: "relative", overflow: "hidden" }, children: [
+              /* @__PURE__ */ H(
+                "canvas",
+                {
+                  ref: (i) => {
+                    i && (pe.current[0] = i);
+                  },
+                  style: { position: "absolute", top: 0, left: 0, zIndex: 0 }
+                }
+              ),
+              /* @__PURE__ */ H(
+                "canvas",
+                {
+                  ref: (i) => {
+                    i && (pe.current[1] = i);
+                  },
+                  style: { position: "absolute", top: 0, left: 0, zIndex: 1 }
+                }
+              ),
+              /* @__PURE__ */ H(
+                "canvas",
+                {
+                  ref: (i) => {
+                    i && (pe.current[2] = i);
+                  },
+                  style: { position: "absolute", top: 0, left: 0, zIndex: 2 },
+                  onPointerMove: Wt,
+                  onPointerDown: Dt,
+                  onDoubleClick: Xt,
+                  onContextMenu: Ht,
+                  onPointerLeave: Pt
+                }
+              )
+            ] })
+          ] }),
+          x != null && F != null && /* @__PURE__ */ H(sn, { content: x, position: F }),
+          /* @__PURE__ */ H(rn, { message: Tt })
+        ]
+      }
+    );
+  })
+);
+export {
+  un as CanvasGrid,
+  Ie as ColumnEngine,
+  qt as SelectionEngine,
+  Nt as TreeEngine,
+  St as ViewState,
+  Qt as createDrawHelpers
+};