@taskctrl/canvas-grid 0.1.1 → 0.1.3

package/dist/canvas-grid.es.js

@@ -1,7 +1,7 @@
-import { jsxs as be, jsx as _ } from "react/jsx-runtime";
-import { useRef as ce, useState as me, useCallback as le, useEffect as we, memo as wn, forwardRef as bn, useMemo as mt, useImperativeHandle as vn } from "react";
-import { createPortal as Cn } from "react-dom";
-class Zt {
+import { jsxs as ve, jsx as T } from "react/jsx-runtime";
+import { useRef as re, useState as we, useCallback as se, useEffect as be, memo as Cn, forwardRef as yn, useMemo as wt, useImperativeHandle as xn } from "react";
+import { createPortal as Rn } from "react-dom";
+class en {
   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);
   }
@@ -68,8 +68,8 @@ class Zt {
     return -1;
   }
 }
-const Kt = ["grid", "cells", "overlay"];
-class yn {
+const Nt = ["grid", "cells", "overlay"];
+class In {
   constructor(e) {
     this._dirty = { grid: !1, cells: !1, overlay: !1 }, this._rafId = null, this._drawFn = e;
   }
@@ -77,7 +77,7 @@ class yn {
     this._dirty[e] = !0, this._rafId === null && (this._rafId = requestAnimationFrame(() => this._flush()));
   }
   markAllDirty() {
-    for (const e of Kt)
+    for (const e of Nt)
       this._dirty[e] = !0;
     this._rafId === null && (this._rafId = requestAnimationFrame(() => this._flush()));
   }
@@ -86,11 +86,11 @@ class yn {
   }
   _flush() {
     this._rafId = null;
-    for (const e of Kt)
+    for (const e of Nt)
       this._dirty[e] && (this._dirty[e] = !1, this._drawFn(e));
   }
 }
-class xn {
+class Sn {
   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();
   }
@@ -145,8 +145,8 @@ class xn {
     return { startIndex: r, endIndex: c };
   }
 }
-const In = 30;
-class Pe {
+const Mn = 30;
+class Ae {
   constructor(e) {
     this._columns = e;
   }
@@ -214,10 +214,10 @@ class Pe {
     const n = this.getScrollableColumns();
     if (n.length === 0) return { startIndex: 0, endIndex: 0 };
     const r = this.getPinnedWidth(), c = o - r;
-    let a = 0, f = 0, u = n.length - 1;
-    for (let S = 0; S < n.length; S++)
-      a + n[S].width <= e && (f = S + 1), a < e + c && (u = S), a += n[S].width;
-    return f = Math.min(f, n.length - 1), u = Math.min(u, n.length - 1), { startIndex: f, endIndex: u };
+    let a = 0, h = 0, g = n.length - 1;
+    for (let R = 0; R < n.length; R++)
+      a + n[R].width <= e && (h = R + 1), a < e + c && (g = R), a += n[R].width;
+    return h = Math.min(h, n.length - 1), g = Math.min(g, n.length - 1), { startIndex: h, endIndex: g };
   }
   /** Returns the range of pinned columns (always all of them). */
   getPinnedRange() {
@@ -227,32 +227,32 @@ class Pe {
   resize(e, o) {
     const n = this._columns.map((r) => {
       if (r.id !== e) return r;
-      const c = r.minWidth ?? In;
+      const c = r.minWidth ?? Mn;
       return { ...r, width: Math.max(c, o) };
     });
-    return new Pe(n);
+    return new Ae(n);
   }
   reorder(e, o) {
-    const n = [...this._columns], r = n.findIndex((f) => f.id === e);
-    if (r === -1) return new Pe(n);
+    const n = [...this._columns], r = n.findIndex((h) => h.id === e);
+    if (r === -1) return new Ae(n);
     const [c] = n.splice(r, 1), a = Math.max(0, Math.min(o, n.length));
-    return n.splice(a, 0, c), new Pe(n);
+    return n.splice(a, 0, c), new Ae(n);
   }
   hide(e) {
     const o = this._columns.map((n) => n.id === e ? { ...n, hidden: !0 } : n);
-    return new Pe(o);
+    return new Ae(o);
   }
   show(e) {
     const o = this._columns.map(
       (n) => n.id === e ? { ...n, hidden: !1 } : n
     );
-    return new Pe(o);
+    return new Ae(o);
   }
 }
-function ze(t, e) {
+function $e(t, e) {
   return `${t}|${e}`;
 }
-function wt() {
+function bt() {
   return {
     cells: /* @__PURE__ */ new Set(),
     rows: /* @__PURE__ */ new Set(),
@@ -260,22 +260,22 @@ function wt() {
     anchor: void 0
   };
 }
-class Rn {
+class _n {
   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 = wt();
+    } : this._selection = bt();
   }
   // Single click — clear previous, select one cell, set anchor
   click(e, o, n, r) {
-    this._selection = wt(), this._selection.cells.add(ze(e, o)), this._selection.anchor = { rowId: e, colId: o };
+    this._selection = bt(), this._selection.cells.add($e(e, o)), this._selection.anchor = { rowId: e, colId: o };
   }
   // Ctrl+click — toggle cell in/out of selection
   ctrlClick(e, o) {
-    const n = ze(e, o);
+    const n = $e(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
@@ -285,30 +285,30 @@ class Rn {
       this.click(e, o, n, r);
       return;
     }
-    const a = n.indexOf(c.rowId), f = n.indexOf(e), u = r.indexOf(c.colId), S = r.indexOf(o), W = Math.min(a, f), L = Math.max(a, f), x = Math.min(u, S), H = Math.max(u, S), D = /* @__PURE__ */ new Set();
-    for (let B = W; B <= L; B++)
-      for (let E = x; E <= H; E++)
-        D.add(ze(n[B], r[E]));
-    this._selection.cells = D, this._selection.rows = /* @__PURE__ */ new Set(), this._selection.columns = /* @__PURE__ */ new Set();
+    const a = n.indexOf(c.rowId), h = n.indexOf(e), g = r.indexOf(c.colId), R = r.indexOf(o), W = Math.min(a, h), O = Math.max(a, h), H = Math.min(g, R), M = Math.max(g, R), X = /* @__PURE__ */ new Set();
+    for (let B = W; B <= O; B++)
+      for (let G = H; G <= M; G++)
+        X.add($e(n[B], r[G]));
+    this._selection.cells = X, 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(ze(e, n));
+      this._selection.cells.add($e(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(ze(n, e));
+      this._selection.cells.add($e(n, e));
     this._selection.columns.add(e), this._selection.anchor = { rowId: o[0] ?? "", colId: e };
   }
   // Clear all selection
   clear() {
-    this._selection = wt();
+    this._selection = bt();
   }
   isSelected(e, o) {
-    return this._selection.cells.has(ze(e, o));
+    return this._selection.cells.has($e(e, o));
   }
   isRowSelected(e) {
     return this._selection.rows.has(e);
@@ -329,230 +329,230 @@ class Rn {
 function rt(t, e, o, n, r) {
   const c = o.yToRow(e), a = n.flattenedRows;
   if (c < 0 || c >= a.length) return null;
-  const f = r.getPinnedColumns(), u = r.getPinnedWidth();
-  if (f.length > 0) {
-    if (t < u) {
-      let H = 0;
-      for (const D of f) {
-        if (t >= H && t < H + D.width)
-          return { rowId: a[c].id, colId: D.id };
-        H += D.width;
+  const h = r.getPinnedColumns(), g = r.getPinnedWidth();
+  if (h.length > 0) {
+    if (t < g) {
+      let M = 0;
+      for (const X of h) {
+        if (t >= M && t < M + X.width)
+          return { rowId: a[c].id, colId: X.id };
+        M += X.width;
       }
       return null;
     }
-    const W = t - u + o.scrollX, L = r.getScrollableColumns();
-    let x = 0;
-    for (const H of L) {
-      if (W >= x && W < x + H.width)
-        return { rowId: a[c].id, colId: H.id };
-      x += H.width;
+    const W = t - g + o.scrollX, O = r.getScrollableColumns();
+    let H = 0;
+    for (const M of O) {
+      if (W >= H && W < H + M.width)
+        return { rowId: a[c].id, colId: M.id };
+      H += M.width;
     }
     return null;
   }
-  const S = r.getColumnAtX(t + o.scrollX);
-  return S === null ? null : { rowId: a[c].id, colId: S };
+  const R = r.getColumnAtX(t + o.scrollX);
+  return R === null ? null : { rowId: a[c].id, colId: R };
 }
-function Sn(t, e, o) {
+function kn(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 Jt(t, e, o, n, r = {}) {
-  const { canvasWidth: c, canvasHeight: a, rowHeight: f } = e, { rowStyle: u } = r;
+function tn(t, e, o, n, r = {}) {
+  const { canvasWidth: c, canvasHeight: a, rowHeight: h } = e, { rowStyle: g } = r;
   t.clearRect(0, 0, c, a), t.fillStyle = "#f3f4f6", t.fillRect(0, 0, c, a);
-  const S = o.getVisibleRange(e.scrollY, a, f), W = o.flattenedRows, L = n.getPinnedColumns(), x = n.getScrollableColumns(), H = n.getPinnedWidth(), D = L.length > 0;
-  if (W.length === 0 || L.length === 0 && x.length === 0) return;
-  const B = n.getTotalWidth(), E = Math.min(c, B - e.scrollX + (D ? e.scrollX : 0)), Y = D ? Math.min(c, H + n.getScrollableColumns().reduce((I, w) => I + w.width, 0) - e.scrollX) : E, J = W.length * f, z = Math.min(a, J - e.scrollY);
-  for (let I = S.startIndex; I <= S.endIndex; I++) {
-    const w = W[I];
-    if (!w) continue;
-    const T = e.rowToY(I), p = o.getDepth(w.id);
-    let b = I % 2 === 0 ? "#ffffff" : "#f9fafb";
-    if (u) {
-      const M = u(w, p);
-      M != null && M.backgroundColor && (b = M.backgroundColor);
+  const R = o.getVisibleRange(e.scrollY, a, h), W = o.flattenedRows, O = n.getPinnedColumns(), H = n.getScrollableColumns(), M = n.getPinnedWidth(), X = O.length > 0;
+  if (W.length === 0 || O.length === 0 && H.length === 0) return;
+  const B = n.getTotalWidth(), G = Math.min(c, B - e.scrollX + (X ? e.scrollX : 0)), P = X ? Math.min(c, M + n.getScrollableColumns().reduce((D, u) => D + u.width, 0) - e.scrollX) : G, j = W.length * h, F = Math.min(a, j - e.scrollY);
+  for (let D = R.startIndex; D <= R.endIndex; D++) {
+    const u = W[D];
+    if (!u) continue;
+    const x = e.rowToY(D), z = o.getDepth(u.id);
+    let v = D % 2 === 0 ? "#ffffff" : "#f9fafb";
+    if (g) {
+      const m = g(u, z);
+      m != null && m.backgroundColor && (v = m.backgroundColor);
     }
-    t.fillStyle = b, t.fillRect(0, T, Math.max(Y, H), f), t.strokeStyle = "#d1d5db", t.lineWidth = 0.5, t.beginPath(), t.moveTo(0, T + f), t.lineTo(Math.max(Y, H), T + f), t.stroke();
+    t.fillStyle = v, t.fillRect(0, x, Math.max(P, M), h), t.strokeStyle = "#d1d5db", t.lineWidth = 0.5, t.beginPath(), t.moveTo(0, x + h), t.lineTo(Math.max(P, M), x + h), t.stroke();
   }
-  if (z > 0) {
-    const I = n.getVisibleRange(e.scrollX, c);
+  if (F > 0) {
+    const D = n.getVisibleRange(e.scrollX, c);
     t.strokeStyle = "#d1d5db", t.lineWidth = 0.5;
-    for (let w = I.startIndex; w <= I.endIndex; w++) {
-      const T = x[w];
-      if (!T) continue;
-      const p = e.colToX(w, !1);
-      t.beginPath(), t.moveTo(p + T.width, 0), t.lineTo(p + T.width, z), t.stroke();
+    for (let u = D.startIndex; u <= D.endIndex; u++) {
+      const x = H[u];
+      if (!x) continue;
+      const z = e.colToX(u, !1);
+      t.beginPath(), t.moveTo(z + x.width, 0), t.lineTo(z + x.width, F), t.stroke();
     }
   }
-  if (D && z > 0) {
-    t.fillStyle = "#ffffff", t.fillRect(0, 0, H, a);
-    for (let w = S.startIndex; w <= S.endIndex; w++) {
-      const T = W[w];
-      if (!T) continue;
-      const p = e.rowToY(w), b = o.getDepth(T.id);
-      let M = w % 2 === 0 ? "#ffffff" : "#f9fafb";
-      if (u) {
-        const R = u(T, b);
-        R != null && R.backgroundColor && (M = R.backgroundColor);
+  if (X && F > 0) {
+    t.fillStyle = "#ffffff", t.fillRect(0, 0, M, a);
+    for (let u = R.startIndex; u <= R.endIndex; u++) {
+      const x = W[u];
+      if (!x) continue;
+      const z = e.rowToY(u), v = o.getDepth(x.id);
+      let m = u % 2 === 0 ? "#ffffff" : "#f9fafb";
+      if (g) {
+        const _ = g(x, v);
+        _ != null && _.backgroundColor && (m = _.backgroundColor);
       }
-      t.fillStyle = M, t.fillRect(0, p, H, f), t.strokeStyle = "#d1d5db", t.lineWidth = 0.5, t.beginPath(), t.moveTo(0, p + f), t.lineTo(H, p + f), t.stroke();
+      t.fillStyle = m, t.fillRect(0, z, M, h), t.strokeStyle = "#d1d5db", t.lineWidth = 0.5, t.beginPath(), t.moveTo(0, z + h), t.lineTo(M, z + h), t.stroke();
     }
-    const I = n.getPinnedRange();
+    const D = n.getPinnedRange();
     t.strokeStyle = "#d1d5db", t.lineWidth = 0.5;
-    for (let w = I.startIndex; w <= I.endIndex; w++) {
-      const T = L[w];
-      if (!T) continue;
-      const p = e.colToX(w, !0);
-      t.beginPath(), t.moveTo(p + T.width, 0), t.lineTo(p + T.width, z), t.stroke();
+    for (let u = D.startIndex; u <= D.endIndex; u++) {
+      const x = O[u];
+      if (!x) continue;
+      const z = e.colToX(u, !0);
+      t.beginPath(), t.moveTo(z + x.width, 0), t.lineTo(z + x.width, F), t.stroke();
     }
-    t.strokeStyle = "#d1d5db", t.lineWidth = 1, t.beginPath(), t.moveTo(H, 0), t.lineTo(H, z), t.stroke();
+    t.strokeStyle = "#d1d5db", t.lineWidth = 1, t.beginPath(), t.moveTo(M, 0), t.lineTo(M, F), t.stroke();
   }
 }
-function kn(t) {
-  function e(a, f, u, S, W, L) {
-    t.fillStyle = L, t.beginPath(), t.roundRect(a, f, u, S, W), t.fill();
-  }
-  function o(a, f, u, S) {
-    t.fillText(a, f, u, S);
-  }
-  function n(a, f) {
-    if (t.measureText(a).width <= f) return a;
-    let u = a;
-    for (; u.length > 0; )
-      if (u = u.slice(0, -1), t.measureText(u + "…").width <= f)
-        return u + "…";
+function Tn(t) {
+  function e(a, h, g, R, W, O) {
+    t.fillStyle = O, t.beginPath(), t.roundRect(a, h, g, R, W), t.fill();
+  }
+  function o(a, h, g, R) {
+    t.fillText(a, h, g, R);
+  }
+  function n(a, h) {
+    if (t.measureText(a).width <= h) return a;
+    let g = a;
+    for (; g.length > 0; )
+      if (g = g.slice(0, -1), t.measureText(g + "…").width <= h)
+        return g + "…";
     return "…";
   }
-  function r(a, f, u, S, W) {
-    const D = t.measureText(u).width + 16;
-    return e(a, f, D, 20, 20 / 2, S), t.fillStyle = W, t.fillText(u, a + 8, f + 20 / 2), D;
+  function r(a, h, g, R, W) {
+    const X = t.measureText(g).width + 16;
+    return e(a, h, X, 20, 20 / 2, R), t.fillStyle = W, t.fillText(g, a + 8, h + 20 / 2), X;
   }
-  function c(a, f, u, S, W, L) {
-    e(a, f, u, S, S / 2, "#d1d5db");
-    const x = u * Math.max(0, Math.min(1, W));
-    x > 0 && e(a, f, x, S, S / 2, L);
+  function c(a, h, g, R, W, O) {
+    e(a, h, g, R, R / 2, "#d1d5db");
+    const H = g * Math.max(0, Math.min(1, W));
+    H > 0 && e(a, h, H, R, R / 2, O);
   }
   return { roundRect: e, fillText: o, truncateText: n, badge: r, progressBar: c };
 }
-function Qt(t, e, o, n, r, c) {
-  const { canvasWidth: a, canvasHeight: f, rowHeight: u } = e, { cellRenderer: S, getCellData: W, hoveredCell: L } = c;
-  c.clearBackground !== !1 && t.clearRect(0, 0, a, f);
-  const x = o.getVisibleRange(e.scrollY, f, u), H = o.flattenedRows, D = n.getPinnedColumns(), B = n.getScrollableColumns(), E = D.length > 0;
-  if (H.length === 0 || D.length === 0 && B.length === 0) return;
-  const Y = kn(t), J = (I, w, T, p) => {
-    const b = { x: T, y: p, width: w.width, height: u }, M = { rowId: I.id, colId: w.id, data: W(I.id, w.id) }, R = {
-      selected: r.isSelected(I.id, w.id),
-      hovered: L != null && L.rowId === I.id && L.colId === w.id,
-      rowSelected: r.isRowSelected(I.id),
-      colSelected: r.isColumnSelected(w.id),
+function nn(t, e, o, n, r, c) {
+  const { canvasWidth: a, canvasHeight: h, rowHeight: g } = e, { cellRenderer: R, getCellData: W, hoveredCell: O } = c;
+  c.clearBackground !== !1 && t.clearRect(0, 0, a, h);
+  const H = o.getVisibleRange(e.scrollY, h, g), M = o.flattenedRows, X = n.getPinnedColumns(), B = n.getScrollableColumns(), G = X.length > 0;
+  if (M.length === 0 || X.length === 0 && B.length === 0) return;
+  const P = Tn(t), j = (u, x, z, v) => {
+    const m = { x: z, y: v, width: x.width, height: g }, _ = { rowId: u.id, colId: x.id, data: W(u.id, x.id) }, S = {
+      selected: r.isSelected(u.id, x.id),
+      hovered: O != null && O.rowId === u.id && O.colId === x.id,
+      rowSelected: r.isRowSelected(u.id),
+      colSelected: r.isColumnSelected(x.id),
       filtered: !0,
-      depth: o.getDepth(I.id),
-      hasChildren: o.hasChildren(I.id),
-      expanded: o.isExpanded(I.id)
+      depth: o.getDepth(u.id),
+      hasChildren: o.hasChildren(u.id),
+      expanded: o.isExpanded(u.id)
     };
-    t.save(), t.beginPath(), t.rect(T, p, w.width, u), t.clip(), S(t, M, b, R, Y), t.restore();
-  }, z = n.getVisibleRange(e.scrollX, a);
-  for (let I = x.startIndex; I <= x.endIndex; I++) {
-    const w = H[I];
-    if (!w) continue;
-    const T = e.rowToY(I);
-    for (let p = z.startIndex; p <= z.endIndex; p++) {
-      const b = B[p];
-      if (!b) continue;
-      const M = e.colToX(p, E ? !1 : void 0);
-      J(w, b, M, T);
+    t.save(), t.beginPath(), t.rect(z, v, x.width, g), t.clip(), R(t, _, m, S, P), t.restore();
+  }, F = G ? n.getPinnedWidth() : 0, D = n.getVisibleRange(e.scrollX, a);
+  t.save(), G && (t.beginPath(), t.rect(F, 0, Math.max(0, a - F), h), t.clip());
+  for (let u = H.startIndex; u <= H.endIndex; u++) {
+    const x = M[u];
+    if (!x) continue;
+    const z = e.rowToY(u);
+    for (let v = D.startIndex; v <= D.endIndex; v++) {
+      const m = B[v];
+      if (!m) continue;
+      const _ = e.colToX(v, G ? !1 : void 0);
+      j(x, m, _, z);
     }
   }
-  if (E) {
-    n.getPinnedWidth();
-    const I = n.getPinnedRange();
-    for (let w = x.startIndex; w <= x.endIndex; w++) {
-      const T = H[w];
-      if (!T) continue;
-      const p = e.rowToY(w);
-      t.save(), t.fillStyle = "#ffffff", t.restore();
-      for (let b = I.startIndex; b <= I.endIndex; b++) {
-        const M = D[b];
-        if (!M) continue;
-        const R = e.colToX(b, !0);
-        J(T, M, R, p);
+  if (t.restore(), G) {
+    const u = n.getPinnedRange();
+    for (let x = H.startIndex; x <= H.endIndex; x++) {
+      const z = M[x];
+      if (!z) continue;
+      const v = e.rowToY(x);
+      for (let m = u.startIndex; m <= u.endIndex; m++) {
+        const _ = X[m];
+        if (!_) continue;
+        const S = e.colToX(m, !0);
+        j(z, _, S, v);
       }
     }
   }
 }
-function Mn(t, e, o, n, r, c = {}) {
-  const { canvasWidth: a, canvasHeight: f, rowHeight: u } = e, { hoveredCell: S, hoveredRowId: W, selectedCell: L, resizingColumn: x, loading: H } = c;
-  t.clearRect(0, 0, a, f);
-  const D = o.getVisibleRange(e.scrollY, f, u), B = o.flattenedRows, E = n.getPinnedColumns(), Y = n.getScrollableColumns(), J = E.length > 0;
-  if (n.getPinnedWidth(), B.length === 0 || E.length === 0 && Y.length === 0) return;
-  const z = n.getVisibleRange(e.scrollX, a), I = n.getPinnedRange(), w = (p) => {
-    for (let b = z.startIndex; b <= z.endIndex; b++) {
-      const M = Y[b];
-      if (!M) continue;
-      const R = J ? e.colToX(b, !1) : e.colToX(b);
-      p(M, R);
+function Hn(t, e, o, n, r, c = {}) {
+  const { canvasWidth: a, canvasHeight: h, rowHeight: g } = e, { hoveredCell: R, hoveredRowId: W, selectedCell: O, resizingColumn: H, loading: M } = c;
+  t.clearRect(0, 0, a, h);
+  const X = o.getVisibleRange(e.scrollY, h, g), B = o.flattenedRows, G = n.getPinnedColumns(), P = n.getScrollableColumns(), j = G.length > 0, F = n.getPinnedWidth();
+  if (B.length === 0 || G.length === 0 && P.length === 0) return;
+  const D = n.getVisibleRange(e.scrollX, a), u = n.getPinnedRange(), x = (v) => {
+    for (let m = D.startIndex; m <= D.endIndex; m++) {
+      const _ = P[m];
+      if (!_) continue;
+      const S = j ? e.colToX(m, !1) : e.colToX(m);
+      v(_, S);
     }
-    if (J)
-      for (let b = I.startIndex; b <= I.endIndex; b++) {
-        const M = E[b];
-        if (!M) continue;
-        const R = e.colToX(b, !0);
-        p(M, R);
+    if (j)
+      for (let m = u.startIndex; m <= u.endIndex; m++) {
+        const _ = G[m];
+        if (!_) continue;
+        const S = e.colToX(m, !0);
+        v(_, S);
       }
   };
-  if (L) {
-    for (let p = D.startIndex; p <= D.endIndex; p++) {
-      const b = B[p];
-      if (!b || b.id !== L.rowId) continue;
-      const M = e.rowToY(p);
-      w((R, N) => {
-        t.fillStyle = "rgba(59,130,246,0.06)", t.fillRect(N, M, R.width, u);
+  if (O) {
+    for (let v = X.startIndex; v <= X.endIndex; v++) {
+      const m = B[v];
+      if (!m || m.id !== O.rowId) continue;
+      const _ = e.rowToY(v);
+      x((S, l) => {
+        t.fillStyle = "rgba(59,130,246,0.06)", t.fillRect(l, _, S.width, g);
       });
       break;
     }
-    w((p, b) => {
-      if (p.id === L.colId)
-        for (let M = D.startIndex; M <= D.endIndex; M++) {
-          if (!B[M]) continue;
-          const N = e.rowToY(M);
-          t.fillStyle = "rgba(59,130,246,0.06)", t.fillRect(b, N, p.width, u);
+    x((v, m) => {
+      if (v.id === O.colId)
+        for (let _ = X.startIndex; _ <= X.endIndex; _++) {
+          if (!B[_]) continue;
+          const l = e.rowToY(_);
+          t.fillStyle = "rgba(59,130,246,0.06)", t.fillRect(m, l, v.width, g);
         }
     });
   }
-  const T = (p, b, M, R, N) => {
-    const l = p.width, ne = u, De = r.isSelected(M.id, p.id), ke = r.isRowSelected(M.id), d = r.isColumnSelected(p.id), P = W != null && W === M.id, $ = S != null && S.rowId === M.id && S.colId === p.id;
-    De ? (t.fillStyle = "rgba(59,130,246,0.12)", t.fillRect(b, R, l, ne), t.strokeStyle = "#3b82f6", t.lineWidth = 2, t.strokeRect(b + 1, R + 1, l - 2, ne - 2)) : ke || d || $ ? (t.fillStyle = "rgba(59,130,246,0.08)", t.fillRect(b, R, l, ne)) : P && (t.fillStyle = "rgba(59,130,246,0.04)", t.fillRect(b, R, l, ne));
+  const z = (v, m, _, S, l) => {
+    const q = v.width, ge = g, Pe = r.isSelected(_.id, v.id), Re = r.isRowSelected(_.id), d = r.isColumnSelected(v.id), E = W != null && W === _.id, $ = R != null && R.colId === v.id, Y = R != null && R.rowId === _.id && R.colId === v.id;
+    Pe ? (t.fillStyle = "rgba(59,130,246,0.12)", t.fillRect(m, S, q, ge), t.strokeStyle = "#3b82f6", t.lineWidth = 2, t.strokeRect(m + 1, S + 1, q - 2, ge - 2)) : Re || d || Y ? (t.fillStyle = "rgba(59,130,246,0.08)", t.fillRect(m, S, q, ge)) : (E || $) && (t.fillStyle = "rgba(59,130,246,0.04)", t.fillRect(m, S, q, ge));
   };
-  for (let p = D.startIndex; p <= D.endIndex; p++) {
-    const b = B[p];
-    if (!b) continue;
-    const M = e.rowToY(p);
-    for (let R = z.startIndex; R <= z.endIndex; R++) {
-      const N = Y[R];
-      if (!N) continue;
-      const l = J ? e.colToX(R, !1) : e.colToX(R);
-      T(N, l, b, M);
+  t.save(), j && (t.beginPath(), t.rect(F, 0, Math.max(0, a - F), h), t.clip());
+  for (let v = X.startIndex; v <= X.endIndex; v++) {
+    const m = B[v];
+    if (!m) continue;
+    const _ = e.rowToY(v);
+    for (let S = D.startIndex; S <= D.endIndex; S++) {
+      const l = P[S];
+      if (!l) continue;
+      const q = j ? e.colToX(S, !1) : e.colToX(S);
+      z(l, q, m, _);
     }
   }
-  if (J)
-    for (let p = D.startIndex; p <= D.endIndex; p++) {
-      const b = B[p];
-      if (!b) continue;
-      const M = e.rowToY(p);
-      for (let R = I.startIndex; R <= I.endIndex; R++) {
-        const N = E[R];
-        if (!N) continue;
-        const l = e.colToX(R, !0);
-        T(N, l, b, M);
+  if (t.restore(), j)
+    for (let v = X.startIndex; v <= X.endIndex; v++) {
+      const m = B[v];
+      if (!m) continue;
+      const _ = e.rowToY(v);
+      for (let S = u.startIndex; S <= u.endIndex; S++) {
+        const l = G[S];
+        if (!l) continue;
+        const q = e.colToX(S, !0);
+        z(l, q, m, _);
       }
     }
-  if (x && (t.save(), t.strokeStyle = "#3b82f6", t.lineWidth = 1, t.setLineDash([4, 4]), t.beginPath(), t.moveTo(x.x, 0), t.lineTo(x.x, f), t.stroke(), t.setLineDash([]), t.restore()), H) {
-    const b = f - 32;
-    t.fillStyle = "#f3f4f6", t.fillRect(0, b, a, 32), t.strokeStyle = "#e5e7eb", t.lineWidth = 1, t.beginPath(), t.moveTo(0, b), t.lineTo(a, b), t.stroke(), t.fillStyle = "#6b7280", t.font = "13px system-ui, sans-serif", t.textAlign = "center", t.textBaseline = "middle", t.fillText("Loading...", a / 2, b + 32 / 2);
+  if (H && (t.save(), t.strokeStyle = "#3b82f6", t.lineWidth = 1, t.setLineDash([4, 4]), t.beginPath(), t.moveTo(H.x, 0), t.lineTo(H.x, h), t.stroke(), t.setLineDash([]), t.restore()), M) {
+    const m = h - 32;
+    t.fillStyle = "#f3f4f6", t.fillRect(0, m, a, 32), t.strokeStyle = "#e5e7eb", t.lineWidth = 1, t.beginPath(), t.moveTo(0, m), t.lineTo(a, m), t.stroke(), t.fillStyle = "#6b7280", t.font = "13px system-ui, sans-serif", t.textAlign = "center", t.textBaseline = "middle", t.fillText("Loading...", a / 2, m + 32 / 2);
   }
 }
-function _n({
+function Wn({
   treeEngine: t,
   width: e,
   rowHeight: o,
@@ -560,54 +560,54 @@ function _n({
   viewportHeight: r,
   sidebarRenderer: c,
   onToggle: a,
-  onRowClick: f,
-  hoveredRowId: u,
-  onRowHover: S
+  onRowClick: h,
+  hoveredRowId: g,
+  onRowHover: R
 }) {
-  const W = t.flattenedRows, { startIndex: L, endIndex: x } = t.getVisibleRange(n, r, o), H = [];
-  for (let E = L; E <= x; E++) {
-    const Y = W[E];
-    if (!Y) continue;
-    const J = t.getDepth(Y.id), z = t.hasChildren(Y.id), I = t.isExpanded(Y.id), w = E * o;
-    let T;
+  const W = t.flattenedRows, { startIndex: O, endIndex: H } = t.getVisibleRange(n, r, o), M = [];
+  for (let G = O; G <= H; G++) {
+    const P = W[G];
+    if (!P) continue;
+    const j = t.getDepth(P.id), F = t.hasChildren(P.id), D = t.isExpanded(P.id), u = G * o;
+    let x;
     if (c)
-      T = c(Y, J, I, z);
+      x = c(P, j, D, F);
     else {
-      const b = J * 16 + 8;
-      T = /* @__PURE__ */ be(
+      const v = j * 16 + 8;
+      x = /* @__PURE__ */ ve(
         "div",
         {
           style: {
             display: "flex",
             alignItems: "center",
             height: "100%",
-            paddingLeft: b,
+            paddingLeft: v,
             overflow: "hidden",
             whiteSpace: "nowrap",
-            cursor: z ? "pointer" : "default",
+            cursor: F ? "pointer" : "default",
             userSelect: "none"
           },
-          onPointerDown: z ? (M) => {
-            M.stopPropagation(), a(Y.id);
+          onPointerDown: F ? (m) => {
+            m.stopPropagation(), a(P.id);
           } : void 0,
           children: [
-            z ? /* @__PURE__ */ _("span", { style: { marginRight: 4, flexShrink: 0, fontSize: 10, color: "#6b7280" }, children: I ? "▾" : "▸" }) : /* @__PURE__ */ _("span", { style: { width: 14, flexShrink: 0 } }),
-            /* @__PURE__ */ _("span", { style: { overflow: "hidden", textOverflow: "ellipsis", fontSize: 12 }, children: String(Y.title ?? Y.id) })
+            F ? /* @__PURE__ */ T("span", { style: { marginRight: 4, flexShrink: 0, fontSize: 10, color: "#6b7280" }, children: D ? "▾" : "▸" }) : /* @__PURE__ */ T("span", { style: { width: 14, flexShrink: 0 } }),
+            /* @__PURE__ */ T("span", { style: { overflow: "hidden", textOverflow: "ellipsis", fontSize: 12 }, children: String(P.title ?? P.id) })
           ]
         }
       );
     }
-    const p = u === Y.id;
-    H.push(
-      /* @__PURE__ */ _(
+    const z = g === P.id;
+    M.push(
+      /* @__PURE__ */ T(
         "div",
         {
           role: "rowheader",
-          "aria-level": J + 1,
-          "aria-expanded": z ? I : void 0,
+          "aria-level": j + 1,
+          "aria-expanded": F ? D : void 0,
           style: {
             position: "absolute",
-            top: w,
+            top: u,
             left: 0,
             width: "100%",
             height: o,
@@ -615,20 +615,20 @@ function _n({
             fontSize: 13,
             color: "#374151",
             borderBottom: "1px solid #e5e7eb",
-            cursor: f ? "pointer" : "default",
-            backgroundColor: p ? "rgba(59,130,246,0.04)" : void 0
+            cursor: h ? "pointer" : "default",
+            backgroundColor: z ? "rgba(59,130,246,0.04)" : void 0
           },
-          onPointerDown: f ? (b) => f(Y.id, b) : void 0,
-          onPointerEnter: () => S == null ? void 0 : S(Y.id),
-          onPointerLeave: () => S == null ? void 0 : S(null),
-          children: T
+          onPointerDown: h ? (v) => h(P.id, v) : void 0,
+          onPointerEnter: () => R == null ? void 0 : R(P.id),
+          onPointerLeave: () => R == null ? void 0 : R(null),
+          children: x
         },
-        String(Y.id)
+        String(P.id)
       )
     );
   }
-  const D = W.length * o, B = Math.min(r, D - n);
-  return /* @__PURE__ */ be(
+  const X = W.length * o, B = Math.min(r, X - n);
+  return /* @__PURE__ */ ve(
     "div",
     {
       style: {
@@ -640,7 +640,7 @@ function _n({
         backgroundColor: "#ffffff"
       },
       children: [
-        /* @__PURE__ */ _(
+        /* @__PURE__ */ T(
           "div",
           {
             style: {
@@ -654,7 +654,7 @@ function _n({
             }
           }
         ),
-        /* @__PURE__ */ _(
+        /* @__PURE__ */ T(
           "div",
           {
             style: {
@@ -662,18 +662,18 @@ function _n({
               top: 0,
               left: 0,
               width: "100%",
-              height: D,
+              height: X,
               transform: `translateY(-${n}px)`
             },
-            children: H
+            children: M
           }
         )
       ]
     }
   );
 }
-const bt = 28, vt = 28, Tn = 4;
-function Wn(t) {
+const ct = 28, vt = 28, Dn = 4, Xn = 18, Pn = "rgba(59,130,246,0.12)";
+function En(t) {
   switch (t) {
     case "vertical":
       return 120;
@@ -681,24 +681,20 @@ function Wn(t) {
       return 32;
   }
 }
-function Hn({ active: t }) {
-  return /* @__PURE__ */ _(
+function Ln({ active: t }) {
+  return /* @__PURE__ */ T(
     "svg",
     {
-      width: 13,
-      height: 13,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: t ? "#2563eb" : "#9ca3af",
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
+      width: 14,
+      height: 14,
+      viewBox: "0 -960 960 960",
+      fill: t ? "#269bf7" : "#9ca3af",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ _("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" })
+      children: /* @__PURE__ */ T("path", { d: "M429.76-228.04q-14.48 0-24.27-9.7-9.79-9.69-9.79-24.23 0-14.53 9.82-24.37 9.82-9.83 24.24-9.83h100.72q14.37 0 24.1 10.01 9.72 10.01 9.72 24.55 0 14.53-9.82 24.05-9.82 9.52-24.24 9.52H429.76ZM268.57-446.17q-14.51 0-24.17-9.7-9.66-9.69-9.66-24.25 0-14.55 9.66-24.25t24.17-9.7H691.2q14.47 0 24.27 9.88 9.79 9.87 9.79 24.42 0 14.56-9.79 24.08-9.8 9.52-24.27 9.52H268.57Zm-120.72-217.9q-14.51 0-24.17-9.83-9.66-9.83-9.66-24.37 0-14.53 9.82-24.23 9.82-9.7 24.25-9.7h664.06q14.48 0 24.27 9.88 9.8 9.87 9.8 24.4 0 14.54-9.96 24.2-9.95 9.65-24.35 9.65H147.85Z" })
     }
   );
 }
-function Dn({
+function On({
   columnEngine: t,
   columnGroups: e,
   scrollX: o,
@@ -706,131 +702,132 @@ function Dn({
   columnHeaderHeight: r,
   onColumnClick: c,
   onColumnResize: a,
-  onColumnReorder: f,
-  onColumnFilterClick: u,
-  columnHeaderRenderer: S
+  onColumnReorder: h,
+  onColumnFilterClick: g,
+  selectedColId: R,
+  columnHeaderRenderer: W
 }) {
-  const W = t.getPinnedColumns(), L = t.getScrollableColumns(), x = t.getVisibleColumns(), H = t.getPinnedWidth(), D = /* @__PURE__ */ new Map();
+  const O = t.getPinnedColumns(), H = t.getScrollableColumns(), M = t.getVisibleColumns(), X = t.getPinnedWidth(), B = /* @__PURE__ */ new Map();
   if (e)
     for (const d of e)
-      D.set(d.id, d);
-  const B = ce(null), [E, Y] = me(null), J = ce(null), z = ce(!1), I = ce(null), w = ce(null);
-  J.current = E;
-  const T = [...W, ...L], p = [];
+      B.set(d.id, d);
+  const G = re(null), [P, j] = we(null), F = re(null), D = re(!1), u = re(null), x = re(null);
+  F.current = P;
+  const z = [...O, ...H], v = [];
   if (e && e.length > 0) {
-    let d, P = 0, $ = 0, V = !1;
-    for (const G of T) {
-      const U = t.getColumnX(G.id), F = G.pinned === "left";
-      if (G.group !== d) {
+    let d, E = 0, $ = 0, Y = !1;
+    for (const V of z) {
+      const Q = t.getColumnX(V.id), K = V.pinned === "left";
+      if (V.group !== d) {
         if (d !== void 0 && $ > 0) {
-          const se = D.get(d);
-          se && p.push({ group: se, startX: P, width: $, pinned: V });
+          const le = B.get(d);
+          le && v.push({ group: le, startX: E, width: $, pinned: Y });
         }
-        d = G.group, P = U, $ = G.width, V = F;
+        d = V.group, E = Q, $ = V.width, Y = K;
       } else
-        $ += G.width;
+        $ += V.width;
     }
     if (d !== void 0 && $ > 0) {
-      const G = D.get(d);
-      G && p.push({ group: G, startX: P, width: $, pinned: V });
+      const V = B.get(d);
+      V && v.push({ group: V, startX: E, width: $, pinned: Y });
     }
   }
-  const b = p.length > 0, M = r ?? Wn(n), R = b ? bt + M : M, N = le(
-    (d, P) => {
-      P.stopPropagation(), P.preventDefault();
-      const $ = x.find((V) => V.id === d);
-      $ && (B.current = { colId: d, startX: P.clientX, startWidth: $.width });
+  const m = v.length > 0, _ = r ?? En(n), S = m ? ct + _ : _, l = se(
+    (d, E) => {
+      E.stopPropagation(), E.preventDefault();
+      const $ = M.find((Y) => Y.id === d);
+      $ && (G.current = { colId: d, startX: E.clientX, startWidth: $.width });
     },
-    [x]
+    [M]
   );
-  we(() => {
+  be(() => {
     const d = ($) => {
-      const V = B.current;
-      if (!V) return;
-      const G = $.clientX - V.startX, U = Math.max(V.startWidth + G, 30);
-      a == null || a(V.colId, U);
-    }, P = () => {
-      B.current = null;
+      const Y = G.current;
+      if (!Y) return;
+      const V = $.clientX - Y.startX, Q = Math.max(Y.startWidth + V, 30);
+      a == null || a(Y.colId, Q);
+    }, E = () => {
+      G.current = null;
     };
-    return document.addEventListener("mousemove", d), document.addEventListener("mouseup", P), () => {
-      document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", P);
+    return document.addEventListener("mousemove", d), document.addEventListener("mouseup", E), () => {
+      document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", E);
     };
   }, [a]);
-  const l = le(
+  const q = se(
     (d) => {
-      const P = w.current;
-      if (!P) return { dropIndex: 0 };
-      const $ = P.getBoundingClientRect(), V = d - $.left + o;
-      let G = 0;
-      for (let U = 0; U < x.length; U++) {
-        const F = x[U], pe = t.getColumnX(F.id) + F.width / 2;
-        V > pe && (G = U + 1);
+      const E = x.current;
+      if (!E) return { dropIndex: 0 };
+      const $ = E.getBoundingClientRect(), Y = d - $.left + o;
+      let V = 0;
+      for (let Q = 0; Q < M.length; Q++) {
+        const K = M[Q], Ce = t.getColumnX(K.id) + K.width / 2;
+        Y > Ce && (V = Q + 1);
       }
-      return { dropIndex: G };
+      return { dropIndex: V };
     },
-    [x, t, o]
-  ), ne = le(
-    (d, P) => {
-      P.target.dataset.resizeHandle || f && (P.preventDefault(), z.current = !1, I.current = { colId: d, startX: P.clientX, currentX: P.clientX });
+    [M, t, o]
+  ), ge = se(
+    (d, E) => {
+      E.target.dataset.resizeHandle || h && (E.preventDefault(), D.current = !1, u.current = { colId: d, startX: E.clientX, currentX: E.clientX });
     },
-    [f]
+    [h]
   );
-  we(() => {
-    if (!f) return;
-    const d = (V) => {
-      const G = I.current;
-      if (!G) return;
-      const U = Math.abs(V.clientX - G.startX);
-      if (!z.current && U >= Tn) {
-        z.current = !0;
-        const F = x.find((te) => te.id === G.colId), se = t.getColumnX(G.colId), { dropIndex: pe } = l(V.clientX);
-        Y({
-          colId: G.colId,
-          startX: G.startX,
-          currentX: V.clientX,
-          dropIndex: pe,
-          ghostLeft: se - o,
-          ghostWidth: (F == null ? void 0 : F.width) ?? 80,
-          ghostTitle: (F == null ? void 0 : F.title) ?? ""
+  be(() => {
+    if (!h) return;
+    const d = (Y) => {
+      const V = u.current;
+      if (!V) return;
+      const Q = Math.abs(Y.clientX - V.startX);
+      if (!D.current && Q >= Dn) {
+        D.current = !0;
+        const K = M.find((Te) => Te.id === V.colId), le = t.getColumnX(V.colId), { dropIndex: Ce } = q(Y.clientX);
+        j({
+          colId: V.colId,
+          startX: V.startX,
+          currentX: Y.clientX,
+          dropIndex: Ce,
+          ghostLeft: le - o,
+          ghostWidth: (K == null ? void 0 : K.width) ?? 80,
+          ghostTitle: (K == null ? void 0 : K.title) ?? ""
         });
         return;
       }
-      if (z.current) {
-        const { dropIndex: F } = l(V.clientX);
-        Y((se) => se && { ...se, currentX: V.clientX, dropIndex: F });
+      if (D.current) {
+        const { dropIndex: K } = q(Y.clientX);
+        j((le) => le && { ...le, currentX: Y.clientX, dropIndex: K });
       }
-    }, P = () => {
-      z.current && J.current && f(J.current.colId, J.current.dropIndex), I.current = null, z.current = !1, Y(null);
-    }, $ = (V) => {
-      V.key === "Escape" && (I.current = null, z.current = !1, Y(null));
+    }, E = () => {
+      D.current && F.current && h(F.current.colId, F.current.dropIndex), u.current = null, D.current = !1, j(null);
+    }, $ = (Y) => {
+      Y.key === "Escape" && (u.current = null, D.current = !1, j(null));
     };
-    return document.addEventListener("mousemove", d), document.addEventListener("mouseup", P), document.addEventListener("keydown", $), () => {
-      document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", P), document.removeEventListener("keydown", $);
+    return document.addEventListener("mousemove", d), document.addEventListener("mouseup", E), document.addEventListener("keydown", $), () => {
+      document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", E), document.removeEventListener("keydown", $);
     };
-  }, [f, x, t, o, l]);
-  const De = () => {
-    if (!E) return 0;
-    const { dropIndex: d } = E;
-    if (d >= x.length) {
-      const P = x[x.length - 1];
-      return t.getColumnX(P.id) + P.width - o;
+  }, [h, M, t, o, q]);
+  const Pe = () => {
+    if (!P) return 0;
+    const { dropIndex: d } = P;
+    if (d >= M.length) {
+      const E = M[M.length - 1];
+      return t.getColumnX(E.id) + E.width - o;
     }
-    return t.getColumnX(x[d].id) - o;
-  }, ke = (d, P, $) => {
-    const V = (E == null ? void 0 : E.colId) === d.id, U = d.pinned === "left" ? "horizontal" : n, F = S == null ? void 0 : S(d.id, d.title, {
+    return t.getColumnX(M[d].id) - o;
+  }, Re = (d, E, $, Y = 0) => {
+    const V = (P == null ? void 0 : P.colId) === d.id, K = d.pinned === "left" ? "horizontal" : n, le = d.filterable && !!g, Ce = le && K === "vertical" ? Xn : 0, Te = Math.max(0, $ - Y - Ce), Ee = W == null ? void 0 : W(d.id, d.title, {
       width: d.width,
-      height: $,
-      orientation: U
-    }), se = d.filterable && !!u;
-    let pe;
-    return F ? pe = F : U === "vertical" ? pe = /* @__PURE__ */ _(
+      height: Te,
+      orientation: K
+    });
+    let Ie;
+    return Ee ? Ie = Ee : K === "vertical" ? Ie = /* @__PURE__ */ T(
       "div",
       {
         style: {
           writingMode: "vertical-rl",
           textOrientation: "mixed",
           transform: "rotate(180deg)",
-          height: $ - 16,
+          height: Te - 16,
           lineHeight: `${d.width}px`,
           overflow: "hidden",
           textOverflow: "ellipsis",
@@ -838,35 +835,37 @@ function Dn({
         },
         children: d.title
       }
-    ) : pe = /* @__PURE__ */ _("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1 }, children: d.title }), /* @__PURE__ */ be(
+    ) : Ie = /* @__PURE__ */ T("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1 }, children: d.title }), /* @__PURE__ */ ve(
       "div",
       {
         role: "columnheader",
         "aria-label": d.title,
         style: {
           position: "absolute",
-          left: P,
+          left: E,
           width: d.width,
           height: $,
           boxSizing: "border-box",
           borderRight: "1px solid #d1d5db",
+          // Tint the selected column's header to match the column highlight.
+          backgroundColor: R != null && d.id === R ? Pn : void 0,
           display: "flex",
-          alignItems: U === "horizontal" ? "center" : "flex-end",
-          justifyContent: U === "horizontal" ? "flex-start" : "center",
-          paddingLeft: U === "horizontal" ? 8 : 0,
-          paddingBottom: U !== "horizontal" ? 6 : 0,
-          cursor: f ? "grab" : c ? "pointer" : "default",
+          alignItems: K === "horizontal" ? "center" : "flex-end",
+          justifyContent: K === "horizontal" ? "flex-start" : "center",
+          paddingLeft: K === "horizontal" ? 8 : 0,
+          paddingBottom: K !== "horizontal" ? 6 : 0,
+          cursor: h ? "grab" : c ? "pointer" : "default",
           userSelect: "none",
           fontSize: 13,
           fontWeight: 500,
           color: "#6C737F",
           opacity: V ? 0.4 : 1
         },
-        onMouseDown: f ? (te) => ne(d.id, te) : void 0,
-        onPointerDown: c && !f ? (te) => c(d.id, te) : void 0,
+        onMouseDown: h ? (k) => ge(d.id, k) : void 0,
+        onPointerDown: c && !h ? (k) => c(d.id, k) : void 0,
         children: [
-          pe,
-          se && /* @__PURE__ */ _(
+          Ie,
+          le && /* @__PURE__ */ T(
             "button",
             {
               type: "button",
@@ -874,7 +873,7 @@ function Dn({
               "data-cg-filter-icon": d.id,
               style: {
                 position: "absolute",
-                top: 2,
+                top: Y + 2,
                 right: 5,
                 zIndex: 2,
                 display: "flex",
@@ -887,15 +886,15 @@ function Dn({
                 cursor: "pointer",
                 lineHeight: 0
               },
-              onMouseDown: (te) => te.stopPropagation(),
-              onPointerDown: (te) => te.stopPropagation(),
-              onClick: (te) => {
-                te.stopPropagation(), u == null || u(d.id, te.currentTarget.getBoundingClientRect());
+              onMouseDown: (k) => k.stopPropagation(),
+              onPointerDown: (k) => k.stopPropagation(),
+              onClick: (k) => {
+                k.stopPropagation(), g == null || g(d.id, k.currentTarget.getBoundingClientRect());
               },
-              children: /* @__PURE__ */ _(Hn, { active: d.filterActive })
+              children: /* @__PURE__ */ T(Ln, { active: d.filterActive })
             }
           ),
-          a && /* @__PURE__ */ _(
+          a && /* @__PURE__ */ T(
             "div",
             {
               "data-resize-handle": "true",
@@ -908,7 +907,7 @@ function Dn({
                 cursor: "col-resize",
                 zIndex: 1
               },
-              onMouseDown: (te) => N(d.id, te)
+              onMouseDown: (k) => l(d.id, k)
             }
           )
         ]
@@ -916,21 +915,21 @@ function Dn({
       d.id
     );
   };
-  return /* @__PURE__ */ be(
+  return /* @__PURE__ */ ve(
     "div",
     {
-      ref: w,
+      ref: x,
       style: {
         flex: 1,
         // Exactly totalHeight so the bottom-border row isn't pushed under the
         // body (a +1 here gets clipped/covered, hiding the header border).
-        height: R,
+        height: S,
         overflow: "hidden",
         position: "relative",
         backgroundColor: "#f9fafb"
       },
       children: [
-        /* @__PURE__ */ be(
+        /* @__PURE__ */ ve(
           "div",
           {
             style: {
@@ -938,27 +937,37 @@ function Dn({
               top: 0,
               left: 0,
               transform: `translateX(-${o}px)`,
-              height: R
+              height: S
             },
             children: [
-              /* @__PURE__ */ _("div", { style: { position: "absolute", top: 0, height: R }, children: L.map((d) => {
-                const P = t.getColumnX(d.id);
-                return ke(d, P, R);
+              /* @__PURE__ */ T("div", { style: { position: "absolute", top: 0, height: S }, children: H.map((d) => {
+                const E = t.getColumnX(d.id);
+                return Re(
+                  d,
+                  E,
+                  S,
+                  m ? ct : 0
+                );
               }) }),
-              b && /* @__PURE__ */ _("div", { style: { position: "relative", height: bt, zIndex: 1 }, children: p.filter((d) => !d.pinned).map((d) => /* @__PURE__ */ _(
+              m && /* @__PURE__ */ T("div", { style: { position: "relative", height: ct, zIndex: 1 }, children: v.filter((d) => !d.pinned).map((d) => /* @__PURE__ */ T(
                 "div",
                 {
                   style: {
                     position: "absolute",
                     left: d.startX,
                     width: d.width,
-                    height: bt,
-                    borderBottom: `1px solid ${d.group.color ?? "#3b82f6"}`,
+                    height: ct,
+                    // Neutral borders matching the rest of the header grid; a right
+                    // border separates adjacent parent groups so their boundaries
+                    // are visible. An explicit group.color still tints the bottom.
+                    borderBottom: `1px solid ${d.group.color ?? "#d1d5db"}`,
+                    borderRight: "1px solid #d1d5db",
                     display: "flex",
                     alignItems: "center",
-                    paddingLeft: 8,
+                    justifyContent: "center",
+                    padding: "0 8px",
                     boxSizing: "border-box",
-                    fontSize: 11,
+                    fontSize: 14,
                     fontWeight: 600,
                     color: "#6b7280",
                     overflow: "hidden",
@@ -972,22 +981,22 @@ function Dn({
             ]
           }
         ),
-        W.length > 0 && /* @__PURE__ */ be(
+        O.length > 0 && /* @__PURE__ */ ve(
           "div",
           {
             style: {
               position: "absolute",
               top: 0,
               left: 0,
-              width: H,
-              height: R,
+              width: X,
+              height: S,
               backgroundColor: "#f9fafb",
               zIndex: 2,
               display: "flex",
               flexDirection: "column"
             },
             children: [
-              b && /* @__PURE__ */ _("div", { style: { position: "absolute", top: 0, left: 0, width: H, height: R - vt }, children: p.filter((d) => d.pinned).map((d) => /* @__PURE__ */ _(
+              m && /* @__PURE__ */ T("div", { style: { position: "absolute", top: 0, left: 0, width: X, height: S - vt }, children: v.filter((d) => d.pinned).map((d) => /* @__PURE__ */ T(
                 "div",
                 {
                   style: {
@@ -1001,7 +1010,7 @@ function Dn({
                     alignItems: "center",
                     justifyContent: "center",
                     boxSizing: "border-box",
-                    fontSize: 11,
+                    fontSize: 14,
                     fontWeight: 600,
                     color: "#6b7280",
                     overflow: "hidden",
@@ -1012,11 +1021,11 @@ function Dn({
                 },
                 d.group.id
               )) }),
-              /* @__PURE__ */ _("div", { style: { position: "absolute", bottom: 0, left: 0, width: H, height: vt, borderTop: "1px solid #d1d5db" }, children: W.map((d) => {
-                const P = t.getColumnX(d.id);
-                return ke(d, P, vt);
+              /* @__PURE__ */ T("div", { style: { position: "absolute", bottom: 0, left: 0, width: X, height: vt, borderTop: "1px solid #d1d5db" }, children: O.map((d) => {
+                const E = t.getColumnX(d.id);
+                return Re(d, E, vt);
               }) }),
-              /* @__PURE__ */ _(
+              /* @__PURE__ */ T(
                 "div",
                 {
                   style: {
@@ -1033,30 +1042,30 @@ function Dn({
             ]
           }
         ),
-        /* @__PURE__ */ _("div", { style: { position: "absolute", bottom: 0, left: 0, right: 0, height: 1, backgroundColor: "#d1d5db", zIndex: 5 } }),
-        E && /* @__PURE__ */ _("div", { style: { position: "absolute", top: 0, left: De(), width: 2, height: R, backgroundColor: "#3b82f6", pointerEvents: "none", zIndex: 10 } }),
-        E && /* @__PURE__ */ _("div", { style: { position: "fixed", top: 0, left: E.currentX - E.ghostWidth / 2, width: E.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: E.ghostTitle })
+        /* @__PURE__ */ T("div", { style: { position: "absolute", bottom: 0, left: 0, right: 0, height: 1, backgroundColor: "#d1d5db", zIndex: 5 } }),
+        P && /* @__PURE__ */ T("div", { style: { position: "absolute", top: 0, left: Pe(), width: 2, height: S, backgroundColor: "#3b82f6", pointerEvents: "none", zIndex: 10 } }),
+        P && /* @__PURE__ */ T("div", { style: { position: "fixed", top: 0, left: P.currentX - P.ghostWidth / 2, width: P.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: P.ghostTitle })
       ]
     }
   );
 }
-function Xn({
+function An({
   columnEngine: t,
   onColumnVisibilityChange: e
 }) {
-  const [o, n] = me(!1), r = ce(null), c = t.getAllColumns();
-  return we(() => {
+  const [o, n] = we(!1), r = re(null), c = t.getAllColumns();
+  return be(() => {
     if (!o) return;
-    const a = (u) => {
-      r.current && !r.current.contains(u.target) && n(!1);
-    }, f = (u) => {
-      u.key === "Escape" && n(!1);
+    const a = (g) => {
+      r.current && !r.current.contains(g.target) && n(!1);
+    }, h = (g) => {
+      g.key === "Escape" && n(!1);
     };
-    return document.addEventListener("mousedown", a), document.addEventListener("keydown", f), () => {
-      document.removeEventListener("mousedown", a), document.removeEventListener("keydown", f);
+    return document.addEventListener("mousedown", a), document.addEventListener("keydown", h), () => {
+      document.removeEventListener("mousedown", a), document.removeEventListener("keydown", h);
     };
-  }, [o]), /* @__PURE__ */ be("div", { ref: r, style: { position: "relative", display: "inline-block" }, children: [
-    /* @__PURE__ */ _(
+  }, [o]), /* @__PURE__ */ ve("div", { ref: r, style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ T(
       "button",
       {
         onClick: () => n((a) => !a),
@@ -1079,7 +1088,7 @@ function Xn({
         children: "Columns"
       }
     ),
-    o && /* @__PURE__ */ _(
+    o && /* @__PURE__ */ T(
       "div",
       {
         style: {
@@ -1096,8 +1105,8 @@ function Xn({
           padding: "4px 0"
         },
         children: c.map((a) => {
-          const f = !a.hidden;
-          return /* @__PURE__ */ be(
+          const h = !a.hidden;
+          return /* @__PURE__ */ ve(
             "label",
             {
               style: {
@@ -1110,25 +1119,25 @@ function Xn({
                 color: "#374151",
                 userSelect: "none"
               },
-              onMouseEnter: (u) => {
-                u.currentTarget.style.backgroundColor = "#f3f4f6";
+              onMouseEnter: (g) => {
+                g.currentTarget.style.backgroundColor = "#f3f4f6";
               },
-              onMouseLeave: (u) => {
-                u.currentTarget.style.backgroundColor = "";
+              onMouseLeave: (g) => {
+                g.currentTarget.style.backgroundColor = "";
               },
               children: [
-                /* @__PURE__ */ _(
+                /* @__PURE__ */ T(
                   "input",
                   {
                     type: "checkbox",
-                    checked: f,
-                    onChange: (u) => {
-                      e(a.id, u.target.checked);
+                    checked: h,
+                    onChange: (g) => {
+                      e(a.id, g.target.checked);
                     },
                     style: { cursor: "pointer", width: 14, height: 14 }
                   }
                 ),
-                /* @__PURE__ */ _("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: a.title })
+                /* @__PURE__ */ T("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: a.title })
               ]
             },
             a.id
@@ -1138,9 +1147,9 @@ function Xn({
     )
   ] });
 }
-function Pn({ content: t, position: e }) {
-  return Cn(
-    /* @__PURE__ */ _(
+function zn({ content: t, position: e }) {
+  return Rn(
+    /* @__PURE__ */ T(
       "div",
       {
         style: {
@@ -1156,8 +1165,8 @@ function Pn({ content: t, position: e }) {
     document.body
   );
 }
-function En({ message: t }) {
-  return /* @__PURE__ */ _(
+function Yn({ message: t }) {
+  return /* @__PURE__ */ T(
     "div",
     {
       role: "status",
@@ -1178,9 +1187,9 @@ function En({ message: t }) {
     }
   );
 }
-const Ze = 28, Ln = 32, On = 120;
-function An(t) {
-  var Ye, Ve;
+const et = 28, Vn = 32, Bn = 120;
+function Gn(t) {
+  var Ee, Ie;
   const {
     treeEngine: e,
     columnEngine: o,
@@ -1188,460 +1197,461 @@ function An(t) {
     rowHeight: r,
     sidebarWidth: c,
     gridLayerConfig: a,
-    cellLayerConfig: f,
-    headerOrientation: u = "horizontal",
-    scale: S = 2
-  } = t, W = n != null && n.length > 0, L = t.columnHeaderHeight ?? (u === "vertical" ? On : Ln), x = W ? Ze + L : L, H = o.getVisibleColumns(), D = e.flattenedRows, B = Math.max(0, ((Ye = t.rowRange) == null ? void 0 : Ye.start) ?? 0), E = Math.min(D.length, ((Ve = t.rowRange) == null ? void 0 : Ve.end) ?? D.length), Y = Math.max(0, E - B), J = B * r, z = o.getTotalWidth(), I = Y * r, w = c + z, T = x + I, p = 16384, M = Math.min(
-    p / w,
-    p / T,
-    Math.sqrt(256e6 / (w * T))
+    cellLayerConfig: h,
+    headerOrientation: g = "horizontal",
+    scale: R = 2
+  } = t, W = n != null && n.length > 0, O = t.columnHeaderHeight ?? (g === "vertical" ? Bn : Vn), H = W ? et + O : O, M = o.getVisibleColumns(), X = e.flattenedRows, B = Math.max(0, ((Ee = t.rowRange) == null ? void 0 : Ee.start) ?? 0), G = Math.min(X.length, ((Ie = t.rowRange) == null ? void 0 : Ie.end) ?? X.length), P = Math.max(0, G - B), j = B * r, F = o.getTotalWidth(), D = P * r, u = c + F, x = H + D, z = 16384, m = Math.min(
+    z / u,
+    z / x,
+    Math.sqrt(256e6 / (u * x))
   );
-  let R = Math.min(S, M);
-  (!Number.isFinite(R) || R <= 0) && (R = 1);
-  const N = document.createElement("canvas");
-  N.width = Math.round(w * R), N.height = Math.round(T * R), N.style.width = `${w}px`, N.style.height = `${T}px`;
-  const l = N.getContext("2d");
-  l.setTransform(R, 0, 0, R, 0, 0), l.fillStyle = "#ffffff", l.fillRect(0, 0, w, T);
-  const ne = new Zt({
+  let _ = Math.min(R, m);
+  (!Number.isFinite(_) || _ <= 0) && (_ = 1);
+  const S = document.createElement("canvas");
+  S.width = Math.round(u * _), S.height = Math.round(x * _), S.style.width = `${u}px`, S.style.height = `${x}px`;
+  const l = S.getContext("2d");
+  l.setTransform(_, 0, 0, _, 0, 0), l.fillStyle = "#ffffff", l.fillRect(0, 0, u, x);
+  const q = new en({
     scrollX: 0,
-    scrollY: J,
-    canvasWidth: z,
-    canvasHeight: I,
+    scrollY: j,
+    canvasWidth: F,
+    canvasHeight: D,
     rowHeight: r
-  }), De = [], ke = [];
-  let d = 0;
-  for (const O of H)
-    De.push(d), ke.push(O.width), d += O.width;
-  ne.setColumnOffsets(De), ne.setColumnWidths(ke);
-  const P = o.getPinnedColumns(), $ = o.getScrollableColumns(), V = [], G = [];
-  let U = 0;
-  for (const O of P)
-    V.push(U), G.push(O.width), U += O.width;
-  const F = [], se = [];
-  let pe = 0;
-  for (const O of $)
-    F.push(pe), se.push(O.width), pe += O.width;
-  if (ne.pinnedWidth = o.getPinnedWidth(), ne.setPinnedOffsets(V, G), ne.setScrollableOffsets(F, se), l.save(), l.translate(c, x), Jt(l, ne, e, o, a), Qt(l, ne, e, o, t.selectionEngine, {
-    ...f,
+  }), ge = [], Pe = [];
+  let Re = 0;
+  for (const k of M)
+    ge.push(Re), Pe.push(k.width), Re += k.width;
+  q.setColumnOffsets(ge), q.setColumnWidths(Pe);
+  const d = o.getPinnedColumns(), E = o.getScrollableColumns(), $ = [], Y = [];
+  let V = 0;
+  for (const k of d)
+    $.push(V), Y.push(k.width), V += k.width;
+  const Q = [], K = [];
+  let le = 0;
+  for (const k of E)
+    Q.push(le), K.push(k.width), le += k.width;
+  if (q.pinnedWidth = o.getPinnedWidth(), q.setPinnedOffsets($, Y), q.setScrollableOffsets(Q, K), l.save(), l.translate(c, H), tn(l, q, e, o, a), nn(l, q, e, o, t.selectionEngine, {
+    ...h,
     clearBackground: !1
   }), l.restore(), c > 0) {
-    l.save(), l.translate(0, x);
-    const O = "#ffffff";
-    l.fillStyle = O, l.fillRect(0, 0, c, I), l.strokeStyle = "#e5e7eb", l.lineWidth = 0.5, l.beginPath(), l.moveTo(c, 0), l.lineTo(c, I), l.stroke(), l.font = "13px system-ui, sans-serif", l.textBaseline = "middle", l.fillStyle = "#374151";
-    for (let oe = B; oe < E; oe++) {
-      const q = D[oe];
-      if (!q) continue;
-      const xe = e.getDepth(q.id), Q = (oe - B) * r, ie = xe * 16 + 8, Me = String(q.title ?? q.id), ve = c - ie - 8;
-      l.fillStyle = oe % 2 === 0 ? "#ffffff" : "#f9fafb", l.fillRect(0, Q, c, r), l.strokeStyle = "#e5e7eb", l.lineWidth = 0.5, l.beginPath(), l.moveTo(0, Q + r), l.lineTo(c, Q + r), l.stroke(), l.fillStyle = "#374151";
-      let he = Me;
-      if (l.measureText(he).width > ve && ve > 0) {
-        for (; he.length > 0 && l.measureText(he + "…").width > ve; )
-          he = he.slice(0, -1);
-        he = he + "…";
+    l.save(), l.translate(0, H);
+    const k = "#ffffff";
+    l.fillStyle = k, l.fillRect(0, 0, c, D), l.strokeStyle = "#e5e7eb", l.lineWidth = 0.5, l.beginPath(), l.moveTo(c, 0), l.lineTo(c, D), l.stroke(), l.font = "13px system-ui, sans-serif", l.textBaseline = "middle", l.fillStyle = "#374151";
+    for (let ne = B; ne < G; ne++) {
+      const Z = X[ne];
+      if (!Z) continue;
+      const Se = e.getDepth(Z.id), ee = (ne - B) * r, oe = Se * 16 + 8, Me = String(Z.title ?? Z.id), me = c - oe - 8;
+      l.fillStyle = ne % 2 === 0 ? "#ffffff" : "#f9fafb", l.fillRect(0, ee, c, r), l.strokeStyle = "#e5e7eb", l.lineWidth = 0.5, l.beginPath(), l.moveTo(0, ee + r), l.lineTo(c, ee + r), l.stroke(), l.fillStyle = "#374151";
+      let ae = Me;
+      if (l.measureText(ae).width > me && me > 0) {
+        for (; ae.length > 0 && l.measureText(ae + "…").width > me; )
+          ae = ae.slice(0, -1);
+        ae = ae + "…";
       }
-      l.fillText(he, ie, Q + r / 2);
+      l.fillText(ae, oe, ee + r / 2);
     }
     l.restore();
   }
-  if (l.save(), l.translate(0, 0), l.fillStyle = "#f9fafb", l.fillRect(0, 0, w, x), l.fillStyle = "#d1d5db", l.fillRect(0, 0, w, 1), l.strokeStyle = "#d1d5db", l.lineWidth = 1, l.beginPath(), l.moveTo(0, x), l.lineTo(w, x), l.stroke(), l.fillStyle = "#f9fafb", l.fillRect(0, 0, c, x), l.strokeStyle = "#d1d5db", l.lineWidth = 1, l.beginPath(), l.moveTo(c, 0), l.lineTo(c, x), l.stroke(), W && n) {
-    const O = /* @__PURE__ */ new Map();
-    for (const ie of n)
-      O.set(ie.id, ie);
-    let oe, q = 0, xe = 0;
-    const Q = (ie, Me, ve) => {
-      if (ie === void 0 || ve <= 0) return;
-      const he = O.get(ie);
-      if (!he) return;
-      const Ee = c + Me;
-      l.strokeStyle = "#d1d5db", l.lineWidth = 1, l.beginPath(), l.moveTo(Ee, Ze), l.lineTo(Ee + ve, Ze), l.stroke(), l.font = "600 11px system-ui, sans-serif", l.fillStyle = "#6b7280", l.textBaseline = "middle", l.textAlign = "left", l.fillText(he.title, Ee + 8, Ze / 2);
+  if (l.save(), l.translate(0, 0), l.fillStyle = "#f9fafb", l.fillRect(0, 0, u, H), l.fillStyle = "#d1d5db", l.fillRect(0, 0, u, 1), l.strokeStyle = "#d1d5db", l.lineWidth = 1, l.beginPath(), l.moveTo(0, H), l.lineTo(u, H), l.stroke(), l.fillStyle = "#f9fafb", l.fillRect(0, 0, c, H), l.strokeStyle = "#d1d5db", l.lineWidth = 1, l.beginPath(), l.moveTo(c, 0), l.lineTo(c, H), l.stroke(), W && n) {
+    const k = /* @__PURE__ */ new Map();
+    for (const oe of n)
+      k.set(oe.id, oe);
+    let ne, Z = 0, Se = 0;
+    const ee = (oe, Me, me) => {
+      if (oe === void 0 || me <= 0) return;
+      const ae = k.get(oe);
+      if (!ae) return;
+      const ze = c + Me;
+      l.strokeStyle = "#d1d5db", l.lineWidth = 1, l.beginPath(), l.moveTo(ze, et), l.lineTo(ze + me, et), l.stroke(), l.font = "600 11px system-ui, sans-serif", l.fillStyle = "#6b7280", l.textBaseline = "middle", l.textAlign = "left", l.fillText(ae.title, ze + 8, et / 2);
     };
-    for (const ie of H) {
-      const Me = o.getColumnX(ie.id);
-      ie.group !== oe ? (Q(oe, q, xe), oe = ie.group, q = Me, xe = ie.width) : xe += ie.width;
+    for (const oe of M) {
+      const Me = o.getColumnX(oe.id);
+      oe.group !== ne ? (ee(ne, Z, Se), ne = oe.group, Z = Me, Se = oe.width) : Se += oe.width;
     }
-    Q(oe, q, xe);
-  }
-  const te = W ? Ze : 0, Je = (O, oe) => {
-    if (oe <= 0 || l.measureText(O).width <= oe) return O;
-    let q = O;
-    for (; q.length > 0 && l.measureText(q + "…").width > oe; )
-      q = q.slice(0, -1);
-    return q + "…";
+    ee(ne, Z, Se);
+  }
+  const Ce = W ? et : 0, Te = (k, ne) => {
+    if (ne <= 0 || l.measureText(k).width <= ne) return k;
+    let Z = k;
+    for (; Z.length > 0 && l.measureText(Z + "…").width > ne; )
+      Z = Z.slice(0, -1);
+    return Z + "…";
   };
-  for (const O of H) {
-    const oe = o.getColumnX(O.id), q = c + oe, xe = u === "vertical" && O.pinned !== "left";
-    if (l.strokeStyle = "#d1d5db", l.lineWidth = 1, l.beginPath(), l.moveTo(q + O.width, te), l.lineTo(q + O.width, x), l.stroke(), !!O.title)
-      if (l.fillStyle = "#6b7280", l.textBaseline = "middle", xe) {
-        const Q = L - 12;
-        l.save(), l.translate(q + O.width / 2 + 4, x - 6), l.rotate(-Math.PI / 2), l.font = "11px system-ui, sans-serif", l.textAlign = "left", l.fillText(Je(O.title, Q), 0, 0, Q), l.restore();
+  for (const k of M) {
+    const ne = o.getColumnX(k.id), Z = c + ne, Se = g === "vertical" && k.pinned !== "left";
+    if (l.strokeStyle = "#d1d5db", l.lineWidth = 1, l.beginPath(), l.moveTo(Z + k.width, Ce), l.lineTo(Z + k.width, H), l.stroke(), !!k.title)
+      if (l.fillStyle = "#6b7280", l.textBaseline = "middle", Se) {
+        const ee = O - 12;
+        l.save(), l.translate(Z + k.width / 2 + 4, H - 6), l.rotate(-Math.PI / 2), l.font = "11px system-ui, sans-serif", l.textAlign = "left", l.fillText(Te(k.title, ee), 0, 0, ee), l.restore();
       } else {
         l.font = "600 12px system-ui, sans-serif", l.textAlign = "left";
-        const Q = O.width - 16, ie = u === "vertical" ? x - 14 : te + L / 2;
-        l.fillText(Je(O.title, Q), q + 8, ie, Q);
+        const ee = k.width - 16, oe = g === "vertical" ? H - 14 : Ce + O / 2;
+        l.fillText(Te(k.title, ee), Z + 8, oe, ee);
       }
   }
-  return l.restore(), l.fillStyle = "#d1d5db", l.fillRect(0, 0, w, 1), l.fillRect(0, T - 1, w, 1), l.fillRect(0, 0, 1, T), l.fillRect(w - 1, 0, 1, T), N;
+  return l.restore(), l.fillStyle = "#d1d5db", l.fillRect(0, 0, u, 1), l.fillRect(0, x - 1, u, 1), l.fillRect(0, 0, 1, x), l.fillRect(u - 1, 0, 1, x), S;
 }
-const Ut = 180, Nt = 32, zn = 28, jt = 200;
-function qt(t, e, o) {
+const jt = 180, Zt = 32, $n = 28, Jt = 200, Fn = 150;
+function Qt(t, e, o) {
   const n = o ?? (t === "vertical" ? 120 : 32);
-  return e ? zn + n : n;
+  return e ? $n + n : n;
 }
-const Gn = wn(
-  bn(function(e, o) {
+const Nn = Cn(
+  yn(function(e, o) {
+    var Wt, Dt;
     const {
       rows: n,
       columns: r,
       columnGroups: c,
       getCellData: a,
-      cellRenderer: f,
-      sidebarRenderer: u,
-      sidebarWidth: S = Ut,
-      rowHeight: W = Nt,
-      headerOrientation: L = "horizontal",
-      columnHeaderHeight: x,
-      maxHeight: H,
-      rowStyle: D,
+      cellRenderer: h,
+      sidebarRenderer: g,
+      sidebarWidth: R = jt,
+      rowHeight: W = Zt,
+      headerOrientation: O = "horizontal",
+      columnHeaderHeight: H,
+      maxHeight: M,
+      rowStyle: X,
       selection: B,
-      onSelectionChange: E,
-      onCellClick: Y,
-      onCellDoubleClick: J,
-      onCellContextMenu: z,
-      onCellHover: I,
-      onColumnHeaderClick: w,
-      onTreeToggle: T,
-      defaultExpandedRows: p,
-      onExpandChange: b,
-      onLoadMore: M,
-      hasMore: R,
-      loading: N,
+      onSelectionChange: G,
+      onCellClick: P,
+      onCellDoubleClick: j,
+      onCellContextMenu: F,
+      onCellHover: D,
+      onColumnHeaderClick: u,
+      onTreeToggle: x,
+      defaultExpandedRows: z,
+      onExpandChange: v,
+      onLoadMore: m,
+      hasMore: _,
+      loading: S,
       hoverContent: l,
-      hoverPosition: ne,
-      showColumnVisibilityMenu: De,
-      ariaLabel: ke = "Data grid"
-    } = e, [d, P] = me(
-      () => new Set(p ?? [])
-    ), [$, V] = me(0), [G, U] = me(0), [F, se] = me({ width: 0, height: 0 }), [pe, te] = me(!1), [Je, Ye] = me(!1), [Ve, O] = me(r), [oe, q] = me(null), [xe, Q] = me(""), [ie, Me] = me(null), ve = ce(null), he = ce(null);
-    we(() => {
-      O(r);
+      hoverPosition: q,
+      showColumnVisibilityMenu: ge,
+      ariaLabel: Pe = "Data grid"
+    } = e, [Re, d] = we(
+      () => new Set(z ?? [])
+    ), [E, $] = we(0), [Y, V] = we(0), [Q, K] = we({ width: 0, height: 0 }), [le, Ce] = we(!1), [Te, Ee] = we(!1), [Ie, k] = we(r), [ne, Z] = we(null), [Se, ee] = we(""), [oe, Me] = we(null), me = re(null), ae = re(null);
+    be(() => {
+      k(r);
     }, [r]);
-    const Ee = ce(null), _e = ce([]), fe = ce(new Zt({ rowHeight: W })), j = ce(null), A = ce(e), Ce = ce(null), Qe = ce(null), et = ce(!1);
+    const ze = re(null), He = re([]), he = re(new en({ rowHeight: W })), N = re(null), A = re(e), ye = re(null), Ye = re(null), tt = re(!1), Ct = re(0);
     A.current = e;
-    const Le = mt(
-      () => new xn(n, d),
-      [n, d]
-    ), ue = mt(() => new Pe(Ve), [Ve]), Ct = mt(() => new Rn(B), [B]);
-    Ce.current = { treeEngine: Le, columnEngine: ue, selectionEngine: Ct };
-    const ct = ue.getPinnedColumns().length > 0, Be = ct ? 0 : S, yt = le((i) => {
-      const h = Ce.current;
-      if (!h) return;
-      const { treeEngine: C, columnEngine: k, selectionEngine: v } = h, m = fe.current, s = i === "grid" ? 0 : i === "cells" ? 1 : 2, g = _e.current[s];
-      if (!g) return;
-      const y = Sn(g, m.canvasWidth, m.canvasHeight);
-      i === "grid" ? Jt(y, m, C, k, { rowStyle: A.current.rowStyle }) : i === "cells" ? Qt(y, m, C, k, v, {
+    const Ve = wt(
+      () => new Sn(n, Re),
+      [n, Re]
+    ), fe = wt(() => new Ae(Ie), [Ie]), yt = wt(() => new _n(B), [B]);
+    ye.current = { treeEngine: Ve, columnEngine: fe, selectionEngine: yt };
+    const dt = fe.getPinnedColumns().length > 0, Fe = dt ? 0 : R, xt = se((i) => {
+      const f = ye.current;
+      if (!f) return;
+      const { treeEngine: C, columnEngine: I, selectionEngine: b } = f, w = he.current, s = i === "grid" ? 0 : i === "cells" ? 1 : 2, p = He.current[s];
+      if (!p) return;
+      const y = kn(p, w.canvasWidth, w.canvasHeight);
+      i === "grid" ? tn(y, w, C, I, { rowStyle: A.current.rowStyle }) : i === "cells" ? nn(y, w, C, I, b, {
         cellRenderer: A.current.cellRenderer,
         getCellData: A.current.getCellData,
-        hoveredCell: Qe.current
-      }) : Mn(y, m, C, k, v, {
-        hoveredCell: Qe.current,
-        hoveredRowId: ve.current,
-        selectedCell: he.current,
-        resizingColumn: oe ?? void 0,
+        hoveredCell: Ye.current
+      }) : Hn(y, w, C, I, b, {
+        hoveredCell: Ye.current,
+        hoveredRowId: me.current,
+        selectedCell: ae.current,
+        resizingColumn: ne ?? void 0,
         loading: A.current.loading
       });
-    }, [oe]);
-    we(() => {
-      const i = ue.getPinnedColumns(), h = ue.getScrollableColumns(), C = ue.getPinnedWidth(), k = [], v = [];
-      let m = 0;
-      for (const de of i)
-        k.push(m), v.push(de.width), m += de.width;
-      const s = [], g = [];
+    }, [ne]);
+    be(() => {
+      const i = fe.getPinnedColumns(), f = fe.getScrollableColumns(), C = fe.getPinnedWidth(), I = [], b = [];
+      let w = 0;
+      for (const ie of i)
+        I.push(w), b.push(ie.width), w += ie.width;
+      const s = [], p = [];
       let y = 0;
-      for (const de of h)
-        s.push(y), g.push(de.width), y += de.width;
-      const X = fe.current;
-      X.pinnedWidth = C, X.setPinnedOffsets(k, v), X.setScrollableOffsets(s, g);
-      const K = ue.getVisibleColumns(), Z = [], ge = [];
-      let Ie = 0;
-      for (const de of K)
-        Z.push(Ie), ge.push(de.width), Ie += de.width;
-      X.setColumnOffsets(Z), X.setColumnWidths(ge), X.update({ rowHeight: W });
-    }, [ue, W]), we(() => {
-      const i = new yn(yt);
-      return j.current = i, i.markAllDirty(), () => {
-        i.destroy(), j.current = null;
+      for (const ie of f)
+        s.push(y), p.push(ie.width), y += ie.width;
+      const L = he.current;
+      L.pinnedWidth = C, L.setPinnedOffsets(I, b), L.setScrollableOffsets(s, p);
+      const U = fe.getVisibleColumns(), J = [], ue = [];
+      let pe = 0;
+      for (const ie of U)
+        J.push(pe), ue.push(ie.width), pe += ie.width;
+      L.setColumnOffsets(J), L.setColumnWidths(ue), L.update({ rowHeight: W });
+    }, [fe, W]), be(() => {
+      const i = new In(xt);
+      return N.current = i, i.markAllDirty(), () => {
+        i.destroy(), N.current = null;
       };
-    }, [yt]), we(() => {
-      const i = Ee.current;
+    }, [xt]), be(() => {
+      const i = ze.current;
       if (!i) return;
-      const h = new ResizeObserver((C) => {
-        var k, v;
-        for (const m of C) {
-          const { width: s, height: g } = m.contentRect, y = s - Be, X = qt(A.current.headerOrientation ?? "horizontal", (((k = A.current.columnGroups) == null ? void 0 : k.length) ?? 0) > 0, A.current.columnHeaderHeight), K = g - X;
-          fe.current.update({
+      const f = new ResizeObserver((C) => {
+        var I, b;
+        for (const w of C) {
+          const { width: s, height: p } = w.contentRect, y = s - Fe, L = Qt(A.current.headerOrientation ?? "horizontal", (((I = A.current.columnGroups) == null ? void 0 : I.length) ?? 0) > 0, A.current.columnHeaderHeight), U = p - L;
+          he.current.update({
             canvasWidth: Math.max(0, y),
-            canvasHeight: Math.max(0, K)
-          }), se({
+            canvasHeight: Math.max(0, U)
+          }), K({
             width: Math.max(0, y),
-            height: Math.max(0, K)
-          }), (v = j.current) == null || v.markAllDirty();
+            height: Math.max(0, U)
+          }), (b = N.current) == null || b.markAllDirty();
         }
       });
-      return h.observe(i), () => h.disconnect();
-    }, [Be]), we(() => {
+      return f.observe(i), () => f.disconnect();
+    }, [Fe]), be(() => {
       var i;
-      (i = j.current) == null || i.markAllDirty();
-    }, [Le, ue, Ct]), we(() => {
+      (i = N.current) == null || i.markAllDirty();
+    }, [Ve, fe, yt]), be(() => {
       var i;
-      (i = j.current) == null || i.markDirty("overlay");
-    }, [N]);
-    const dt = le((i) => {
-      var ge;
+      (i = N.current) == null || i.markDirty("overlay");
+    }, [S]);
+    const at = se((i) => {
+      var ue, pe, ie, Le;
       i.preventDefault();
-      const h = fe.current, C = Ce.current;
+      const f = he.current, C = ye.current;
       if (!C) return;
-      const k = C.treeEngine.flattenedRows.length * h.rowHeight, v = C.columnEngine.getTotalWidth(), m = Math.max(0, k - h.canvasHeight), s = v - C.columnEngine.getPinnedWidth(), g = h.canvasWidth - C.columnEngine.getPinnedWidth(), y = Math.max(0, s - g), X = Math.max(0, Math.min(m, h.scrollY + i.deltaY)), K = Math.max(0, Math.min(y, h.scrollX + i.deltaX));
-      h.update({ scrollY: X, scrollX: K }), V(X), U(K), (ge = j.current) == null || ge.markAllDirty();
-      const Z = A.current;
-      Z.hasMore && Z.onLoadMore && !Z.loading && m - X < jt ? et.current || (et.current = !0, Z.onLoadMore()) : m - X >= jt && (et.current = !1);
+      const I = C.treeEngine.flattenedRows.length * f.rowHeight, b = C.columnEngine.getTotalWidth(), w = Math.max(0, I - f.canvasHeight), s = b - C.columnEngine.getPinnedWidth(), p = f.canvasWidth - C.columnEngine.getPinnedWidth(), y = Math.max(0, s - p), L = Math.max(0, Math.min(w, f.scrollY + i.deltaY)), U = Math.max(0, Math.min(y, f.scrollX + i.deltaX));
+      f.update({ scrollY: L, scrollX: U }), $(L), V(U), (ue = N.current) == null || ue.markAllDirty(), Ct.current = i.timeStamp, Ye.current && (Ye.current = null, me.current = null, Me(null), (pe = N.current) == null || pe.markDirty("overlay"), (Le = (ie = A.current).onCellHover) == null || Le.call(ie, null, null, new PointerEvent("pointerleave")));
+      const J = A.current;
+      J.hasMore && J.onLoadMore && !J.loading && w - L < Jt ? tt.current || (tt.current = !0, J.onLoadMore()) : w - L >= Jt && (tt.current = !1);
     }, []);
-    we(() => {
-      const i = _e.current[2];
+    be(() => {
+      const i = He.current[2];
       if (i)
-        return i.addEventListener("wheel", dt, { passive: !1 }), () => i.removeEventListener("wheel", dt);
-    }, [dt]), we(() => {
-      N || (et.current = !1);
-    }, [N]);
-    const en = le((i) => {
-      var g, y, X;
-      const h = Ce.current;
-      if (!h) return;
-      const C = _e.current[2];
-      if (!C) return;
-      const k = C.getBoundingClientRect(), v = i.clientX - k.left, m = i.clientY - k.top, s = rt(v, m, fe.current, h.treeEngine, h.columnEngine);
-      Qe.current = s, ve.current = (s == null ? void 0 : s.rowId) ?? null, Me((s == null ? void 0 : s.rowId) ?? null), (g = j.current) == null || g.markDirty("overlay"), (X = (y = A.current).onCellHover) == null || X.call(y, (s == null ? void 0 : s.rowId) ?? null, (s == null ? void 0 : s.colId) ?? null, i.nativeEvent);
-    }, []), at = le((i) => {
-      P((h) => {
-        var k, v;
-        const C = new Set(h);
-        return C.has(i) ? (C.delete(i), Q(`Row ${i} collapsed`)) : (C.add(i), Q(`Row ${i} expanded`)), (v = (k = A.current).onExpandChange) == null || v.call(k, [...C]), C;
+        return i.addEventListener("wheel", at, { passive: !1 }), () => i.removeEventListener("wheel", at);
+    }, [at]), be(() => {
+      S || (tt.current = !1);
+    }, [S]);
+    const on = se((i) => {
+      var p, y, L;
+      const f = ye.current;
+      if (!f) return;
+      const C = He.current[2];
+      if (!C || i.timeStamp - Ct.current < Fn) return;
+      const I = C.getBoundingClientRect(), b = i.clientX - I.left, w = i.clientY - I.top, s = rt(b, w, he.current, f.treeEngine, f.columnEngine);
+      Ye.current = s, me.current = (s == null ? void 0 : s.rowId) ?? null, Me((s == null ? void 0 : s.rowId) ?? null), (p = N.current) == null || p.markDirty("overlay"), (L = (y = A.current).onCellHover) == null || L.call(y, (s == null ? void 0 : s.rowId) ?? null, (s == null ? void 0 : s.colId) ?? null, i.nativeEvent);
+    }, []), ht = se((i) => {
+      d((f) => {
+        var I, b;
+        const C = new Set(f);
+        return C.has(i) ? (C.delete(i), ee(`Row ${i} collapsed`)) : (C.add(i), ee(`Row ${i} expanded`)), (b = (I = A.current).onExpandChange) == null || b.call(I, [...C]), C;
       });
-    }, []), tn = le((i) => {
-      var Fe, Ke, Ue, Ne, je;
-      const h = Ce.current;
-      if (!h) return;
-      const C = _e.current[2];
+    }, []), ln = se((i) => {
+      var qe, Ne, je, Ze, Je;
+      const f = ye.current;
+      if (!f) return;
+      const C = He.current[2];
       if (!C) return;
-      const k = C.getBoundingClientRect(), v = i.clientX - k.left, m = i.clientY - k.top, s = rt(v, m, fe.current, h.treeEngine, h.columnEngine);
+      const I = C.getBoundingClientRect(), b = i.clientX - I.left, w = i.clientY - I.top, s = rt(b, w, he.current, f.treeEngine, f.columnEngine);
       if (!s) return;
-      const { treeEngine: g, columnEngine: y, selectionEngine: X } = h, K = y.getPinnedColumns();
-      if (K.length > 0) {
-        const Re = K[0].id;
-        if (g.hasChildren(s.rowId) && s.colId === Re) {
-          A.current.onTreeToggle ? A.current.onTreeToggle(s.rowId) : at(s.rowId);
+      const { treeEngine: p, columnEngine: y, selectionEngine: L } = f, U = y.getPinnedColumns();
+      if (U.length > 0) {
+        const _e = U[0].id;
+        if (p.hasChildren(s.rowId) && s.colId === _e) {
+          A.current.onTreeToggle ? A.current.onTreeToggle(s.rowId) : ht(s.rowId);
           return;
         }
       }
-      const Z = g.flattenedRows.map((Re) => Re.id), ge = y.getVisibleColumns().map((Re) => Re.id);
-      i.ctrlKey || i.metaKey ? X.ctrlClick(s.rowId, s.colId) : i.shiftKey ? X.shiftClick(s.rowId, s.colId, Z, ge) : X.click(s.rowId, s.colId, Z, ge), he.current = { rowId: s.rowId, colId: s.colId }, (Ke = (Fe = A.current).onSelectionChange) == null || Ke.call(Fe, X.getSelection()), (Ne = (Ue = A.current).onCellClick) == null || Ne.call(Ue, s.rowId, s.colId, i.nativeEvent), (je = j.current) == null || je.markDirty("overlay");
-      const Ie = String(s.rowId), de = y.getVisibleColumns().find((Re) => Re.id === s.colId), it = (de == null ? void 0 : de.title) ?? s.colId;
-      Q(`Row ${Ie}, Column ${it} selected`);
-    }, [at]), nn = le((i) => {
-      var g, y;
-      const h = Ce.current;
-      if (!h) return;
-      const C = _e.current[2];
+      const J = p.flattenedRows.map((_e) => _e.id), ue = y.getVisibleColumns().map((_e) => _e.id);
+      i.ctrlKey || i.metaKey ? L.ctrlClick(s.rowId, s.colId) : i.shiftKey ? L.shiftClick(s.rowId, s.colId, J, ue) : L.click(s.rowId, s.colId, J, ue), ae.current = { rowId: s.rowId, colId: s.colId }, (Ne = (qe = A.current).onSelectionChange) == null || Ne.call(qe, L.getSelection()), (Ze = (je = A.current).onCellClick) == null || Ze.call(je, s.rowId, s.colId, i.nativeEvent), (Je = N.current) == null || Je.markDirty("overlay");
+      const pe = String(s.rowId), ie = y.getVisibleColumns().find((_e) => _e.id === s.colId), Le = (ie == null ? void 0 : ie.title) ?? s.colId;
+      ee(`Row ${pe}, Column ${Le} selected`);
+    }, [ht]), sn = se((i) => {
+      var p, y;
+      const f = ye.current;
+      if (!f) return;
+      const C = He.current[2];
       if (!C) return;
-      const k = C.getBoundingClientRect(), v = i.clientX - k.left, m = i.clientY - k.top, s = rt(v, m, fe.current, h.treeEngine, h.columnEngine);
-      s && ((y = (g = A.current).onCellDoubleClick) == null || y.call(g, s.rowId, s.colId, i.nativeEvent));
-    }, []), on = le((i) => {
-      var g, y;
+      const I = C.getBoundingClientRect(), b = i.clientX - I.left, w = i.clientY - I.top, s = rt(b, w, he.current, f.treeEngine, f.columnEngine);
+      s && ((y = (p = A.current).onCellDoubleClick) == null || y.call(p, s.rowId, s.colId, i.nativeEvent));
+    }, []), rn = se((i) => {
+      var p, y;
       i.preventDefault();
-      const h = Ce.current;
-      if (!h) return;
-      const C = _e.current[2];
+      const f = ye.current;
+      if (!f) return;
+      const C = He.current[2];
       if (!C) return;
-      const k = C.getBoundingClientRect(), v = i.clientX - k.left, m = i.clientY - k.top, s = rt(v, m, fe.current, h.treeEngine, h.columnEngine);
-      s && ((y = (g = A.current).onCellContextMenu) == null || y.call(g, s.rowId, s.colId, i.nativeEvent));
-    }, []), ln = le(() => {
-      var i, h, C;
-      Qe.current = null, ve.current = null, Me(null), (i = j.current) == null || i.markDirty("overlay"), (C = (h = A.current).onCellHover) == null || C.call(h, null, null, new PointerEvent("pointerleave"));
-    }, []), sn = le(
-      (i, h) => {
-        var C, k;
-        (k = (C = A.current).onColumnHeaderClick) == null || k.call(C, i, h.nativeEvent);
+      const I = C.getBoundingClientRect(), b = i.clientX - I.left, w = i.clientY - I.top, s = rt(b, w, he.current, f.treeEngine, f.columnEngine);
+      s && ((y = (p = A.current).onCellContextMenu) == null || y.call(p, s.rowId, s.colId, i.nativeEvent));
+    }, []), cn = se(() => {
+      var i, f, C;
+      Ye.current = null, me.current = null, Me(null), (i = N.current) == null || i.markDirty("overlay"), (C = (f = A.current).onCellHover) == null || C.call(f, null, null, new PointerEvent("pointerleave"));
+    }, []), dn = se(
+      (i, f) => {
+        var C, I;
+        (I = (C = A.current).onColumnHeaderClick) == null || I.call(C, i, f.nativeEvent);
       },
       []
-    ), rn = le(
-      (i, h) => {
-        var k, v, m, s;
-        O((g) => g.map((X) => {
-          if (X.id !== i) return X;
-          const K = X.minWidth ?? 30;
-          return { ...X, width: Math.max(K, h) };
+    ), an = se(
+      (i, f) => {
+        var I, b, w, s;
+        k((p) => p.map((L) => {
+          if (L.id !== i) return L;
+          const U = L.minWidth ?? 30;
+          return { ...L, width: Math.max(U, f) };
         }));
-        const C = (k = Ce.current) == null ? void 0 : k.columnEngine;
+        const C = (I = ye.current) == null ? void 0 : I.columnEngine;
         if (C) {
-          const g = C.getColumnX(i), y = C.getVisibleColumns().find((X) => X.id === i);
+          const p = C.getColumnX(i), y = C.getVisibleColumns().find((L) => L.id === i);
           if (y) {
-            const K = y.pinned === "left" ? g + Math.max(y.minWidth ?? 30, h) : g + Math.max(y.minWidth ?? 30, h) - fe.current.scrollX;
-            q({ colId: i, x: K });
+            const U = y.pinned === "left" ? p + Math.max(y.minWidth ?? 30, f) : p + Math.max(y.minWidth ?? 30, f) - he.current.scrollX;
+            Z({ colId: i, x: U });
           }
         }
-        (m = (v = A.current).onColumnResize) == null || m.call(v, i, h), (s = j.current) == null || s.markAllDirty();
+        (w = (b = A.current).onColumnResize) == null || w.call(b, i, f), (s = N.current) == null || s.markAllDirty();
       },
       []
     );
-    we(() => {
+    be(() => {
       const i = () => {
-        q(null);
+        Z(null);
       };
       return document.addEventListener("mouseup", i), () => document.removeEventListener("mouseup", i);
     }, []);
-    const cn = le(
-      (i, h) => {
-        var C, k, v;
-        O((m) => {
-          const s = [...m], g = s.findIndex((K) => K.id === i);
-          if (g === -1) return m;
-          const [y] = s.splice(g, 1), X = Math.max(0, Math.min(h, s.length));
-          return s.splice(X, 0, y), s;
-        }), (k = (C = A.current).onColumnReorder) == null || k.call(C, i, h), (v = j.current) == null || v.markAllDirty();
+    const hn = se(
+      (i, f) => {
+        var C, I, b;
+        k((w) => {
+          const s = [...w], p = s.findIndex((U) => U.id === i);
+          if (p === -1) return w;
+          const [y] = s.splice(p, 1), L = Math.max(0, Math.min(f, s.length));
+          return s.splice(L, 0, y), s;
+        }), (I = (C = A.current).onColumnReorder) == null || I.call(C, i, f), (b = N.current) == null || b.markAllDirty();
       },
       []
-    ), dn = le(
-      (i, h) => {
-        var C, k, v;
-        O(
-          (m) => m.map((s) => s.id === i ? { ...s, hidden: !h } : s)
-        ), (k = (C = A.current).onColumnVisibilityChange) == null || k.call(C, i, h), (v = j.current) == null || v.markAllDirty();
+    ), fn = se(
+      (i, f) => {
+        var C, I, b;
+        k(
+          (w) => w.map((s) => s.id === i ? { ...s, hidden: !f } : s)
+        ), (I = (C = A.current).onColumnVisibilityChange) == null || I.call(C, i, f), (b = N.current) == null || b.markAllDirty();
       },
       []
-    ), xt = le(
-      (i, h, C, k) => {
-        h.preventDefault(), h.stopPropagation(), Ye(!0);
-        const v = i === "y" ? h.clientY : h.clientX, m = i === "y" ? fe.current.scrollY : fe.current.scrollX, s = (y) => {
-          var Ie;
-          const X = (i === "y" ? y.clientY : y.clientX) - v, K = C > 0 ? X / C * k : 0, Z = Math.max(0, Math.min(k, m + K)), ge = fe.current;
-          i === "y" ? (ge.update({ scrollY: Z }), V(Z)) : (ge.update({ scrollX: Z }), U(Z)), (Ie = j.current) == null || Ie.markAllDirty();
-        }, g = () => {
-          Ye(!1), document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", g);
+    ), Rt = se(
+      (i, f, C, I) => {
+        f.preventDefault(), f.stopPropagation(), Ee(!0);
+        const b = i === "y" ? f.clientY : f.clientX, w = i === "y" ? he.current.scrollY : he.current.scrollX, s = (y) => {
+          var pe;
+          const L = (i === "y" ? y.clientY : y.clientX) - b, U = C > 0 ? L / C * I : 0, J = Math.max(0, Math.min(I, w + U)), ue = he.current;
+          i === "y" ? (ue.update({ scrollY: J }), $(J)) : (ue.update({ scrollX: J }), V(J)), (pe = N.current) == null || pe.markAllDirty();
+        }, p = () => {
+          Ee(!1), document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", p);
         };
-        document.addEventListener("mousemove", s), document.addEventListener("mouseup", g);
+        document.addEventListener("mousemove", s), document.addEventListener("mouseup", p);
       },
       []
-    ), an = le((i) => {
-      var ge, Ie, de, it, Fe, Ke, Ue, Ne, je, Re, pt, Wt, Ht, Dt, Xt, Pt, Et, Lt, Ot, At, zt, Yt, Vt, Bt;
-      const h = Ce.current;
-      if (!h) return;
-      const { treeEngine: C, columnEngine: k, selectionEngine: v } = h, m = fe.current, s = C.flattenedRows.map((ee) => ee.id), g = k.getVisibleColumns().map((ee) => ee.id);
-      if (s.length === 0 || g.length === 0) return;
-      const y = v.getSelection().anchor, X = i.ctrlKey || i.metaKey, K = (ee, re) => {
-        const ae = s.length * m.rowHeight, Te = k.getTotalWidth(), We = Math.max(0, ae - m.canvasHeight), lt = Math.max(0, Te - m.canvasWidth), Xe = ee * m.rowHeight, Ae = Xe + m.rowHeight;
-        let ye = m.scrollY;
-        Xe < m.scrollY ? ye = Xe : Ae > m.scrollY + m.canvasHeight && (ye = Ae - m.canvasHeight), ye = Math.max(0, Math.min(We, ye));
-        const He = k.getVisibleColumns()[re], qe = He ? k.getColumnX(He.id) : 0, st = qe + ((He == null ? void 0 : He.width) ?? 0);
-        let Se = m.scrollX;
-        qe < m.scrollX ? Se = qe : st > m.scrollX + m.canvasWidth && (Se = st - m.canvasWidth), Se = Math.max(0, Math.min(lt, Se)), (ye !== m.scrollY || Se !== m.scrollX) && (m.update({ scrollY: ye, scrollX: Se }), V(ye), U(Se));
-      }, Z = (ee, re, ae) => {
-        var Gt, $t, Ft;
-        let Te = y ? s.indexOf(y.rowId) : -1, We = y ? g.indexOf(y.colId) : -1;
-        Te === -1 && (Te = 0), We === -1 && (We = 0);
-        const lt = Math.max(0, Math.min(s.length - 1, Te + ee)), Xe = Math.max(0, Math.min(g.length - 1, We + re)), Ae = s[lt], ye = g[Xe];
-        ae ? v.shiftClick(Ae, ye, s, g) : v.click(Ae, ye, s, g), ($t = (Gt = A.current).onSelectionChange) == null || $t.call(Gt, v.getSelection()), (Ft = j.current) == null || Ft.markDirty("overlay"), K(lt, Xe);
-        const He = k.getVisibleColumns()[Xe], qe = String(Ae), st = (He == null ? void 0 : He.title) ?? String(ye), Se = v.getSelection().cells.size;
-        Se > 1 ? Q(`${Se} cells selected`) : Q(`Row ${qe}, Column ${st} selected`);
+    ), un = se((i) => {
+      var ue, pe, ie, Le, qe, Ne, je, Ze, Je, _e, mt, Xt, Pt, Et, Lt, Ot, At, zt, Yt, Vt, Bt, Gt, $t, Ft;
+      const f = ye.current;
+      if (!f) return;
+      const { treeEngine: C, columnEngine: I, selectionEngine: b } = f, w = he.current, s = C.flattenedRows.map((te) => te.id), p = I.getVisibleColumns().map((te) => te.id);
+      if (s.length === 0 || p.length === 0) return;
+      const y = b.getSelection().anchor, L = i.ctrlKey || i.metaKey, U = (te, ce) => {
+        const de = s.length * w.rowHeight, We = I.getTotalWidth(), De = Math.max(0, de - w.canvasHeight), lt = Math.max(0, We - w.canvasWidth), Oe = te * w.rowHeight, Ge = Oe + w.rowHeight;
+        let xe = w.scrollY;
+        Oe < w.scrollY ? xe = Oe : Ge > w.scrollY + w.canvasHeight && (xe = Ge - w.canvasHeight), xe = Math.max(0, Math.min(De, xe));
+        const Xe = I.getVisibleColumns()[ce], Qe = Xe ? I.getColumnX(Xe.id) : 0, st = Qe + ((Xe == null ? void 0 : Xe.width) ?? 0);
+        let ke = w.scrollX;
+        Qe < w.scrollX ? ke = Qe : st > w.scrollX + w.canvasWidth && (ke = st - w.canvasWidth), ke = Math.max(0, Math.min(lt, ke)), (xe !== w.scrollY || ke !== w.scrollX) && (w.update({ scrollY: xe, scrollX: ke }), $(xe), V(ke));
+      }, J = (te, ce, de) => {
+        var Kt, Ut, qt;
+        let We = y ? s.indexOf(y.rowId) : -1, De = y ? p.indexOf(y.colId) : -1;
+        We === -1 && (We = 0), De === -1 && (De = 0);
+        const lt = Math.max(0, Math.min(s.length - 1, We + te)), Oe = Math.max(0, Math.min(p.length - 1, De + ce)), Ge = s[lt], xe = p[Oe];
+        de ? b.shiftClick(Ge, xe, s, p) : b.click(Ge, xe, s, p), (Ut = (Kt = A.current).onSelectionChange) == null || Ut.call(Kt, b.getSelection()), (qt = N.current) == null || qt.markDirty("overlay"), U(lt, Oe);
+        const Xe = I.getVisibleColumns()[Oe], Qe = String(Ge), st = (Xe == null ? void 0 : Xe.title) ?? String(xe), ke = b.getSelection().cells.size;
+        ke > 1 ? ee(`${ke} cells selected`) : ee(`Row ${Qe}, Column ${st} selected`);
       };
       switch (i.key) {
         case "ArrowUp":
-          i.preventDefault(), Z(-1, 0, i.shiftKey);
+          i.preventDefault(), J(-1, 0, i.shiftKey);
           break;
         case "ArrowDown":
-          i.preventDefault(), Z(1, 0, i.shiftKey);
+          i.preventDefault(), J(1, 0, i.shiftKey);
           break;
         case "ArrowLeft":
-          i.preventDefault(), Z(0, -1, i.shiftKey);
+          i.preventDefault(), J(0, -1, i.shiftKey);
           break;
         case "ArrowRight":
-          i.preventDefault(), Z(0, 1, i.shiftKey);
+          i.preventDefault(), J(0, 1, i.shiftKey);
           break;
         case "Tab": {
           if (i.preventDefault(), i.shiftKey) {
-            const ee = y ? s.indexOf(y.rowId) : 0;
-            if ((y ? g.indexOf(y.colId) : 0) > 0)
-              Z(0, -1, !1);
+            const te = y ? s.indexOf(y.rowId) : 0;
+            if ((y ? p.indexOf(y.colId) : 0) > 0)
+              J(0, -1, !1);
             else {
-              const ae = Math.max(0, (ee === -1 ? 0 : ee) - 1), Te = s[ae], We = g[g.length - 1];
-              v.click(Te, We, s, g), (Fe = (it = A.current).onSelectionChange) == null || Fe.call(it, v.getSelection()), (Ke = j.current) == null || Ke.markDirty("overlay"), K(ae, g.length - 1);
+              const de = Math.max(0, (te === -1 ? 0 : te) - 1), We = s[de], De = p[p.length - 1];
+              b.click(We, De, s, p), (qe = (Le = A.current).onSelectionChange) == null || qe.call(Le, b.getSelection()), (Ne = N.current) == null || Ne.markDirty("overlay"), U(de, p.length - 1);
             }
           } else {
-            const ee = y ? s.indexOf(y.rowId) : 0;
-            if ((y ? g.indexOf(y.colId) : -1) < g.length - 1)
-              Z(0, 1, !1);
+            const te = y ? s.indexOf(y.rowId) : 0;
+            if ((y ? p.indexOf(y.colId) : -1) < p.length - 1)
+              J(0, 1, !1);
             else {
-              const ae = Math.min(s.length - 1, (ee === -1 ? 0 : ee) + 1), Te = s[ae], We = g[0];
-              v.click(Te, We, s, g), (Ie = (ge = A.current).onSelectionChange) == null || Ie.call(ge, v.getSelection()), (de = j.current) == null || de.markDirty("overlay"), K(ae, 0);
+              const de = Math.min(s.length - 1, (te === -1 ? 0 : te) + 1), We = s[de], De = p[0];
+              b.click(We, De, s, p), (pe = (ue = A.current).onSelectionChange) == null || pe.call(ue, b.getSelection()), (ie = N.current) == null || ie.markDirty("overlay"), U(de, 0);
             }
           }
           break;
         }
         case "Escape":
-          i.preventDefault(), v.clear(), (Ne = (Ue = A.current).onSelectionChange) == null || Ne.call(Ue, v.getSelection()), (je = j.current) == null || je.markDirty("overlay"), Q("Selection cleared");
+          i.preventDefault(), b.clear(), (Ze = (je = A.current).onSelectionChange) == null || Ze.call(je, b.getSelection()), (Je = N.current) == null || Je.markDirty("overlay"), ee("Selection cleared");
           break;
         case "a":
         case "A":
-          if (X) {
+          if (L) {
             i.preventDefault();
-            for (const ee of s)
-              for (const re of g)
-                v.ctrlClick(ee, re);
-            (pt = (Re = A.current).onSelectionChange) == null || pt.call(Re, v.getSelection()), (Wt = j.current) == null || Wt.markDirty("overlay"), Q(`${s.length * g.length} cells selected`);
+            for (const te of s)
+              for (const ce of p)
+                b.ctrlClick(te, ce);
+            (mt = (_e = A.current).onSelectionChange) == null || mt.call(_e, b.getSelection()), (Xt = N.current) == null || Xt.markDirty("overlay"), ee(`${s.length * p.length} cells selected`);
           }
           break;
         case "Home": {
           i.preventDefault();
-          const ee = y ? s.indexOf(y.rowId) : 0;
-          if (X)
-            v.click(s[0], g[0], s, g), (Dt = (Ht = A.current).onSelectionChange) == null || Dt.call(Ht, v.getSelection()), (Xt = j.current) == null || Xt.markDirty("overlay"), K(0, 0);
+          const te = y ? s.indexOf(y.rowId) : 0;
+          if (L)
+            b.click(s[0], p[0], s, p), (Et = (Pt = A.current).onSelectionChange) == null || Et.call(Pt, b.getSelection()), (Lt = N.current) == null || Lt.markDirty("overlay"), U(0, 0);
           else {
-            const re = ee === -1 ? 0 : ee;
-            v.click(s[re], g[0], s, g), (Et = (Pt = A.current).onSelectionChange) == null || Et.call(Pt, v.getSelection()), (Lt = j.current) == null || Lt.markDirty("overlay"), K(re, 0);
+            const ce = te === -1 ? 0 : te;
+            b.click(s[ce], p[0], s, p), (At = (Ot = A.current).onSelectionChange) == null || At.call(Ot, b.getSelection()), (zt = N.current) == null || zt.markDirty("overlay"), U(ce, 0);
           }
           break;
         }
         case "End": {
           i.preventDefault();
-          const ee = y ? s.indexOf(y.rowId) : 0;
-          if (X) {
-            const re = s.length - 1, ae = g.length - 1;
-            v.click(s[re], g[ae], s, g), (At = (Ot = A.current).onSelectionChange) == null || At.call(Ot, v.getSelection()), (zt = j.current) == null || zt.markDirty("overlay"), K(re, ae);
+          const te = y ? s.indexOf(y.rowId) : 0;
+          if (L) {
+            const ce = s.length - 1, de = p.length - 1;
+            b.click(s[ce], p[de], s, p), (Vt = (Yt = A.current).onSelectionChange) == null || Vt.call(Yt, b.getSelection()), (Bt = N.current) == null || Bt.markDirty("overlay"), U(ce, de);
           } else {
-            const re = ee === -1 ? 0 : ee, ae = g.length - 1;
-            v.click(s[re], g[ae], s, g), (Vt = (Yt = A.current).onSelectionChange) == null || Vt.call(Yt, v.getSelection()), (Bt = j.current) == null || Bt.markDirty("overlay"), K(re, ae);
+            const ce = te === -1 ? 0 : te, de = p.length - 1;
+            b.click(s[ce], p[de], s, p), ($t = (Gt = A.current).onSelectionChange) == null || $t.call(Gt, b.getSelection()), (Ft = N.current) == null || Ft.markDirty("overlay"), U(ce, de);
           }
           break;
         }
       }
     }, []);
-    vn(o, () => ({
+    xn(o, () => ({
       captureToCanvas(i) {
-        const h = Ce.current;
-        if (!h)
+        const f = ye.current;
+        if (!f)
           throw new Error("CanvasGrid: engines not initialized");
-        const { treeEngine: C, columnEngine: k, selectionEngine: v } = h, m = A.current, s = m.rowHeight ?? Nt, g = m.sidebarWidth ?? Ut;
-        return An({
+        const { treeEngine: C, columnEngine: I, selectionEngine: b } = f, w = A.current, s = w.rowHeight ?? Zt, p = w.sidebarWidth ?? jt;
+        return Gn({
           treeEngine: C,
-          columnEngine: k,
-          selectionEngine: v,
-          columnGroups: m.columnGroups,
+          columnEngine: I,
+          selectionEngine: b,
+          columnGroups: w.columnGroups,
           rowHeight: s,
-          sidebarWidth: g,
-          headerOrientation: m.headerOrientation ?? "horizontal",
-          columnHeaderHeight: m.columnHeaderHeight,
-          gridLayerConfig: { rowStyle: m.rowStyle },
+          sidebarWidth: p,
+          headerOrientation: w.headerOrientation ?? "horizontal",
+          columnHeaderHeight: w.columnHeaderHeight,
+          gridLayerConfig: { rowStyle: w.rowStyle },
           cellLayerConfig: {
-            cellRenderer: m.cellRenderer,
-            getCellData: m.getCellData,
+            cellRenderer: w.cellRenderer,
+            getCellData: w.getCellData,
             hoveredCell: null
           },
           scale: (i == null ? void 0 : i.scale) ?? 2,
@@ -1650,40 +1660,40 @@ const Gn = wn(
       },
       getRowCount() {
         var i;
-        return ((i = Ce.current) == null ? void 0 : i.treeEngine.flattenedRows.length) ?? 0;
+        return ((i = ye.current) == null ? void 0 : i.treeEngine.flattenedRows.length) ?? 0;
       }
     }), []);
-    const hn = c != null && c.length > 0, It = qt(
-      L ?? "horizontal",
-      hn,
-      x
-    ), fn = Be + ue.getTotalWidth() + 2, un = It + Le.flattenedRows.length * W + 2, Oe = 12, Rt = 24, tt = pe || Je, St = Le.flattenedRows.length * W, gn = ue.getTotalWidth(), ht = ue.getPinnedWidth(), nt = Math.max(0, St - F.height), kt = gn - ht, ft = Math.max(0, F.width - ht), ot = Math.max(0, kt - ft), Mt = 2, _t = nt > Mt && F.height > 0, Tt = ot > Mt && F.width > 0, Ge = F.height - (Tt ? Oe : 0), ut = Math.min(
-      Ge,
-      Math.max(Rt, Ge * (F.height / St))
-    ), pn = nt > 0 ? $ / nt * (Ge - ut) : 0, $e = ft - (_t ? Oe : 0), gt = Math.min(
-      $e,
+    const gn = c != null && c.length > 0, It = Qt(
+      O ?? "horizontal",
+      gn,
+      H
+    ), pn = Fe + fe.getTotalWidth() + 2, mn = It + Ve.flattenedRows.length * W + 2, Be = 12, St = 24, nt = le || Te, Mt = Ve.flattenedRows.length * W, wn = fe.getTotalWidth(), ft = fe.getPinnedWidth(), ot = Math.max(0, Mt - Q.height), _t = wn - ft, ut = Math.max(0, Q.width - ft), it = Math.max(0, _t - ut), kt = 2, Tt = ot > kt && Q.height > 0, Ht = it > kt && Q.width > 0, Ke = Q.height - (Ht ? Be : 0), gt = Math.min(
+      Ke,
+      Math.max(St, Ke * (Q.height / Mt))
+    ), bn = ot > 0 ? E / ot * (Ke - gt) : 0, Ue = ut - (Tt ? Be : 0), pt = Math.min(
+      Ue,
       Math.max(
-        Rt,
-        $e * (ft / kt)
+        St,
+        Ue * (ut / _t)
       )
-    ), mn = ot > 0 ? G / ot * ($e - gt) : 0;
-    return /* @__PURE__ */ be(
+    ), vn = it > 0 ? Y / it * (Ue - pt) : 0;
+    return /* @__PURE__ */ ve(
       "div",
       {
-        ref: Ee,
+        ref: ze,
         tabIndex: 0,
         role: "grid",
-        "aria-label": ke,
-        "aria-rowcount": Le.flattenedRows.length,
-        "aria-colcount": ue.getVisibleColumns().length,
-        onKeyDown: an,
+        "aria-label": Pe,
+        "aria-rowcount": Ve.flattenedRows.length,
+        "aria-colcount": fe.getVisibleColumns().length,
+        onKeyDown: un,
         style: {
           display: "flex",
           flexDirection: "column",
-          width: fn,
-          height: un,
+          width: pn,
+          height: mn,
           maxWidth: "100%",
-          maxHeight: H ?? "100%",
+          maxHeight: M ?? "100%",
           overflow: "hidden",
           fontFamily: "system-ui, sans-serif",
           outline: "none",
@@ -1691,12 +1701,12 @@ const Gn = wn(
           borderRadius: 4
         },
         children: [
-          /* @__PURE__ */ be("div", { style: { display: "flex", flexDirection: "row", height: It, flexShrink: 0 }, children: [
-            !ct && /* @__PURE__ */ _(
+          /* @__PURE__ */ ve("div", { style: { display: "flex", flexDirection: "row", height: It, flexShrink: 0 }, children: [
+            !dt && /* @__PURE__ */ T(
               "div",
               {
                 style: {
-                  width: Be,
+                  width: Fe,
                   flexShrink: 0,
                   borderRight: "1px solid #e5e7eb",
                   borderBottom: "1px solid #e5e7eb",
@@ -1705,113 +1715,114 @@ const Gn = wn(
                   flexDirection: "column",
                   overflow: "hidden"
                 },
-                children: e.sidebarHeaderRenderer ? /* @__PURE__ */ _("div", { style: { width: "100%", flex: 1 }, children: e.sidebarHeaderRenderer() }) : De ? /* @__PURE__ */ _("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", flex: 1 }, children: /* @__PURE__ */ _(
-                  Xn,
+                children: e.sidebarHeaderRenderer ? /* @__PURE__ */ T("div", { style: { width: "100%", flex: 1 }, children: e.sidebarHeaderRenderer() }) : ge ? /* @__PURE__ */ T("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", flex: 1 }, children: /* @__PURE__ */ T(
+                  An,
                   {
-                    columnEngine: ue,
-                    onColumnVisibilityChange: dn
+                    columnEngine: fe,
+                    onColumnVisibilityChange: fn
                   }
                 ) }) : null
               }
             ),
-            /* @__PURE__ */ _(
-              Dn,
+            /* @__PURE__ */ T(
+              On,
               {
-                columnEngine: ue,
+                columnEngine: fe,
                 columnGroups: c,
-                scrollX: G,
-                orientation: L,
-                columnHeaderHeight: x,
-                onColumnClick: w ? sn : void 0,
-                onColumnResize: e.onColumnResize !== void 0 ? rn : void 0,
-                onColumnReorder: e.onColumnReorder !== void 0 ? cn : void 0,
+                scrollX: Y,
+                orientation: O,
+                columnHeaderHeight: H,
+                onColumnClick: u ? dn : void 0,
+                onColumnResize: e.onColumnResize !== void 0 ? an : void 0,
+                onColumnReorder: e.onColumnReorder !== void 0 ? hn : void 0,
                 onColumnFilterClick: e.onColumnFilterClick,
+                selectedColId: ((Dt = (Wt = e.selection) == null ? void 0 : Wt.anchor) == null ? void 0 : Dt.colId) ?? null,
                 columnHeaderRenderer: e.columnHeaderRenderer
               }
             )
           ] }),
-          /* @__PURE__ */ be("div", { style: { display: "flex", flexDirection: "row", flex: 1, overflow: "hidden" }, children: [
-            !ct && /* @__PURE__ */ _(
-              _n,
+          /* @__PURE__ */ ve("div", { style: { display: "flex", flexDirection: "row", flex: 1, overflow: "hidden" }, children: [
+            !dt && /* @__PURE__ */ T(
+              Wn,
               {
-                treeEngine: Le,
-                width: Be,
+                treeEngine: Ve,
+                width: Fe,
                 rowHeight: W,
-                scrollTop: $,
-                viewportHeight: fe.current.canvasHeight || 600,
-                sidebarRenderer: u,
-                onToggle: at,
-                onRowClick: e.onRowHeaderClick ? (i, h) => e.onRowHeaderClick(i, h.nativeEvent) : void 0,
-                hoveredRowId: ie,
+                scrollTop: E,
+                viewportHeight: he.current.canvasHeight || 600,
+                sidebarRenderer: g,
+                onToggle: ht,
+                onRowClick: e.onRowHeaderClick ? (i, f) => e.onRowHeaderClick(i, f.nativeEvent) : void 0,
+                hoveredRowId: oe,
                 onRowHover: (i) => {
-                  var h;
-                  ve.current = i, Me(i), (h = j.current) == null || h.markDirty("overlay");
+                  var f;
+                  me.current = i, Me(i), (f = N.current) == null || f.markDirty("overlay");
                 }
               }
             ),
-            /* @__PURE__ */ be(
+            /* @__PURE__ */ ve(
               "div",
               {
                 style: { flex: 1, position: "relative", overflow: "hidden" },
-                onMouseEnter: () => te(!0),
-                onMouseLeave: () => te(!1),
+                onMouseEnter: () => Ce(!0),
+                onMouseLeave: () => Ce(!1),
                 children: [
-                  /* @__PURE__ */ _(
+                  /* @__PURE__ */ T(
                     "canvas",
                     {
                       ref: (i) => {
-                        i && (_e.current[0] = i);
+                        i && (He.current[0] = i);
                       },
                       style: { position: "absolute", top: 0, left: 0, zIndex: 0 }
                     }
                   ),
-                  /* @__PURE__ */ _(
+                  /* @__PURE__ */ T(
                     "canvas",
                     {
                       ref: (i) => {
-                        i && (_e.current[1] = i);
+                        i && (He.current[1] = i);
                       },
                       style: { position: "absolute", top: 0, left: 0, zIndex: 1 }
                     }
                   ),
-                  /* @__PURE__ */ _(
+                  /* @__PURE__ */ T(
                     "canvas",
                     {
                       ref: (i) => {
-                        i && (_e.current[2] = i);
+                        i && (He.current[2] = i);
                       },
                       style: { position: "absolute", top: 0, left: 0, zIndex: 2 },
-                      onPointerMove: en,
-                      onPointerDown: tn,
-                      onDoubleClick: nn,
-                      onContextMenu: on,
-                      onPointerLeave: ln
+                      onPointerMove: on,
+                      onPointerDown: ln,
+                      onDoubleClick: sn,
+                      onContextMenu: rn,
+                      onPointerLeave: cn
                     }
                   ),
-                  _t && /* @__PURE__ */ _(
+                  Tt && /* @__PURE__ */ T(
                     "div",
                     {
                       style: {
                         position: "absolute",
                         top: 0,
                         right: 0,
-                        width: Oe,
-                        height: Ge,
+                        width: Be,
+                        height: Ke,
                         zIndex: 3,
-                        opacity: tt ? 1 : 0,
+                        opacity: nt ? 1 : 0,
                         transition: "opacity 150ms ease",
-                        pointerEvents: tt ? "auto" : "none"
+                        pointerEvents: nt ? "auto" : "none"
                       },
-                      children: /* @__PURE__ */ _(
+                      children: /* @__PURE__ */ T(
                         "div",
                         {
-                          onMouseDown: (i) => xt("y", i, Ge - ut, nt),
+                          onMouseDown: (i) => Rt("y", i, Ke - gt, ot),
                           style: {
                             position: "absolute",
-                            top: pn,
+                            top: bn,
                             left: 2,
-                            width: Oe - 4,
-                            height: ut,
+                            width: Be - 4,
+                            height: gt,
                             borderRadius: 8,
                             backgroundColor: "rgba(0, 0, 0, 0.3)",
                             cursor: "pointer"
@@ -1820,30 +1831,30 @@ const Gn = wn(
                       )
                     }
                   ),
-                  Tt && /* @__PURE__ */ _(
+                  Ht && /* @__PURE__ */ T(
                     "div",
                     {
                       style: {
                         position: "absolute",
                         bottom: 0,
-                        left: ht,
-                        height: Oe,
-                        width: $e,
+                        left: ft,
+                        height: Be,
+                        width: Ue,
                         zIndex: 3,
-                        opacity: tt ? 1 : 0,
+                        opacity: nt ? 1 : 0,
                         transition: "opacity 150ms ease",
-                        pointerEvents: tt ? "auto" : "none"
+                        pointerEvents: nt ? "auto" : "none"
                       },
-                      children: /* @__PURE__ */ _(
+                      children: /* @__PURE__ */ T(
                         "div",
                         {
-                          onMouseDown: (i) => xt("x", i, $e - gt, ot),
+                          onMouseDown: (i) => Rt("x", i, Ue - pt, it),
                           style: {
                             position: "absolute",
-                            left: mn,
+                            left: vn,
                             top: 2,
-                            height: Oe - 4,
-                            width: gt,
+                            height: Be - 4,
+                            width: pt,
                             borderRadius: 8,
                             backgroundColor: "rgba(0, 0, 0, 0.3)",
                             cursor: "pointer"
@@ -1856,18 +1867,18 @@ const Gn = wn(
               }
             )
           ] }),
-          l != null && ne != null && /* @__PURE__ */ _(Pn, { content: l, position: ne }),
-          /* @__PURE__ */ _(En, { message: xe })
+          l != null && q != null && /* @__PURE__ */ T(zn, { content: l, position: q }),
+          /* @__PURE__ */ T(Yn, { message: Se })
         ]
       }
     );
   })
 );
 export {
-  Gn as CanvasGrid,
-  Pe as ColumnEngine,
-  Rn as SelectionEngine,
-  xn as TreeEngine,
-  Zt as ViewState,
-  kn as createDrawHelpers
+  Nn as CanvasGrid,
+  Ae as ColumnEngine,
+  _n as SelectionEngine,
+  Sn as TreeEngine,
+  en as ViewState,
+  Tn as createDrawHelpers
 };