@affino/datagrid-vue-app 0.1.32 → 0.1.34

package/dist/chunks/{useDataGridAppRowModel-HgHd3xEp.js → useDataGridAppRowModel-JUDjg-Fq.js}

@@ -105,7 +105,7 @@ const Tl = gn({
       surfaceId: "column-layout",
       rootElementRef: c,
       floating: b
-    }), M = w(() => f.getTriggerProps({ role: "dialog" })), A = w(() => f.getContentProps({ role: "dialog", tabIndex: -1 })), $ = w(() => f.state.value.open), p = w(() => b.teleportTarget.value), v = ee(null), I = ee(null), F = ee(null);
+    }), M = w(() => f.getTriggerProps({ role: "dialog" })), A = w(() => f.getContentProps({ role: "dialog", tabIndex: -1 })), N = w(() => f.state.value.open), p = w(() => b.teleportTarget.value), v = ee(null), I = ee(null), O = ee(null);
     Y(
       () => a.isOpen,
       async (z) => {
@@ -135,14 +135,14 @@ const Tl = gn({
       return !E || E.height <= 0 ? "after" : z.clientY < E.top + E.height / 2 ? "before" : "after";
     }
     function q(z, P) {
-      v.value = P, I.value = null, F.value = null, z.dataTransfer && (z.dataTransfer.effectAllowed = "move", z.dataTransfer.setData("text/plain", P));
+      v.value = P, I.value = null, O.value = null, z.dataTransfer && (z.dataTransfer.effectAllowed = "move", z.dataTransfer.setData("text/plain", P));
     }
     function me(z, P) {
       if (!v.value || v.value === P) {
-        I.value = null, F.value = null;
+        I.value = null, O.value = null;
         return;
       }
-      z.preventDefault(), z.dataTransfer && (z.dataTransfer.dropEffect = "move"), I.value = P, F.value = H(z);
+      z.preventDefault(), z.dataTransfer && (z.dataTransfer.dropEffect = "move"), I.value = P, O.value = H(z);
     }
     function Ie(z, P) {
       if (!v.value || v.value === P) {
@@ -156,7 +156,7 @@ const Tl = gn({
       }), Ee();
     }
     function Ee() {
-      v.value = null, I.value = null, F.value = null;
+      v.value = null, I.value = null, O.value = null;
     }
     return (z, P) => (Ct(), dn(Fl, null, [
       Q("button", Ol({
@@ -167,7 +167,7 @@ const Tl = gn({
         style: s.value
       }, M.value), kl(z.buttonLabel), 17),
       (Ct(), co(mo, { to: p.value }, [
-        $.value ? (Ct(), dn("section", Ol({
+        N.value ? (Ct(), dn("section", Ol({
           key: 0,
           ref: m(b).contentRef,
           class: "datagrid-column-layout",
@@ -194,13 +194,13 @@ const Tl = gn({
               key: E.key,
               class: wo(["datagrid-column-layout__row", {
                 "datagrid-column-layout__row--drag-source": v.value === E.key,
-                "datagrid-column-layout__row--drop-before": I.value === E.key && F.value === "before",
-                "datagrid-column-layout__row--drop-after": I.value === E.key && F.value === "after"
+                "datagrid-column-layout__row--drop-before": I.value === E.key && O.value === "before",
+                "datagrid-column-layout__row--drop-after": I.value === E.key && O.value === "after"
               }]),
               draggable: !0,
-              onDragstart: (re) => q(re, E.key),
-              onDragover: (re) => me(re, E.key),
-              onDrop: (re) => Ie(re, E.key),
+              onDragstart: (ae) => q(ae, E.key),
+              onDragover: (ae) => me(ae, E.key),
+              onDrop: (ae) => Ie(ae, E.key),
               onDragend: Ee
             }, [
               Q("label", or, [
@@ -209,7 +209,7 @@ const Tl = gn({
                   name: `datagrid-column-layout-visible-${E.key}`,
                   type: "checkbox",
                   checked: E.visible,
-                  onChange: (re) => x(E.key, re.target.checked)
+                  onChange: (ae) => x(E.key, ae.target.checked)
                 }, null, 40, ar),
                 Q("span", ir, kl(E.label), 1)
               ]),
@@ -218,13 +218,13 @@ const Tl = gn({
                   type: "button",
                   class: "datagrid-column-layout__icon-button",
                   disabled: !E.canMoveUp,
-                  onClick: (re) => l("move-up", E.key)
+                  onClick: (ae) => l("move-up", E.key)
                 }, " ↑ ", 8, ur),
                 Q("button", {
                   type: "button",
                   class: "datagrid-column-layout__icon-button",
                   disabled: !E.canMoveDown,
-                  onClick: (re) => l("move-down", E.key)
+                  onClick: (ae) => l("move-down", E.key)
                 }, " ↓ ", 8, cr)
               ])
             ], 42, lr))), 128))
@@ -367,7 +367,7 @@ function vr(e) {
   });
   return Object.fromEntries(o);
 }
-function za(e) {
+function _a(e) {
   return typeof e == "boolean" ? {
     enabled: e,
     trigger: il,
@@ -546,7 +546,7 @@ function pr(e) {
   });
   return Object.freeze(Object.fromEntries(o));
 }
-function _a(e) {
+function Ha(e) {
   return typeof e == "boolean" ? {
     enabled: e,
     items: [...ue],
@@ -614,7 +614,7 @@ function Fr(e, o) {
     a.set(l.key, l);
   return Object.freeze(Array.from(a.values()));
 }
-function Ha(e) {
+function Pa(e) {
   return typeof e == "boolean" ? {
     enabled: e,
     items: [...lt],
@@ -777,7 +777,7 @@ function Tr(e) {
     isCellEditable: m(e.isCellEditable),
     readCell: m(e.readCell),
     readDisplayCell: m(e.readDisplayCell)
-  })), $ = w(() => ({
+  })), N = w(() => ({
     handleCellMouseDown: m(e.handleCellMouseDown),
     handleCellClick: m(e.handleCellClick),
     handleCellKeydown: m(e.handleCellKeydown)
@@ -793,7 +793,7 @@ function Tr(e) {
     selection: R.value,
     editing: M.value,
     cells: A.value,
-    interaction: $.value
+    interaction: N.value
   })), v = Lo({
     mode: w(() => m(e.mode)),
     rowHeightMode: w(() => m(e.rowHeightMode)),
@@ -805,7 +805,7 @@ function Tr(e) {
     selection: R,
     editing: M,
     cells: A,
-    interaction: $
+    interaction: N
   });
   return {
     tableStageProps: p,
@@ -842,7 +842,7 @@ function zr(e) {
       }
       if (A !== "toggle" || c.kind === "group" || c.rowId == null)
         return;
-      const $ = e.captureHistorySnapshot(), p = e.ensureEditableRowAtIndex?.(R) ?? c;
+      const N = e.captureHistorySnapshot(), p = e.ensureEditableRowAtIndex?.(R) ?? c;
       p.kind === "group" || p.rowId == null || (e.runtime.api.rows.applyEdits([
         {
           rowId: p.rowId,
@@ -862,7 +862,7 @@ function zr(e) {
           startColumn: b,
           endColumn: b
         }
-      }, $), e.syncViewport());
+      }, N), e.syncViewport());
     }
   };
 }
@@ -915,8 +915,8 @@ function _r(e) {
       }
     }
   } : null), l = (v) => v === ll, c = (v) => l(v.key), s = w(() => {
-    const v = a.value, I = e.visibleColumns.value.filter((x) => x.pin === "left"), F = e.visibleColumns.value.filter((x) => x.pin !== "left" && x.pin !== "right"), C = e.visibleColumns.value.filter((x) => x.pin === "right");
-    return v ? [v, ...I, ...F, ...C] : [...I, ...F, ...C];
+    const v = a.value, I = e.visibleColumns.value.filter((x) => x.pin === "left"), O = e.visibleColumns.value.filter((x) => x.pin !== "left" && x.pin !== "right"), C = e.visibleColumns.value.filter((x) => x.pin === "right");
+    return v ? [v, ...I, ...O, ...C] : [...I, ...O, ...C];
   }), f = w(() => s.value.filter((v) => v.pin !== "left" && v.pin !== "right")), b = (v) => v.width ?? Hl, R = (v) => {
     const I = s.value.find((x) => x.key === v), C = `${I ? b(I) : Hl}px`;
     return {
@@ -924,16 +924,16 @@ function _r(e) {
       minWidth: C,
       maxWidth: C
     };
-  }, M = (v) => v.column.capabilities?.editable !== !1, A = (v, I, F) => c(F) ? v.kind !== "group" && v.rowId != null : v.kind === "group" || v.rowId == null || !M(F) ? !1 : e.isCellEditable ? e.isCellEditable({
+  }, M = (v) => v.column.capabilities?.editable !== !1, A = (v, I, O) => c(O) ? v.kind !== "group" && v.rowId != null : v.kind === "group" || v.rowId == null || !M(O) ? !1 : e.isCellEditable ? e.isCellEditable({
     row: v.data,
     rowId: v.rowId,
     rowIndex: I,
-    column: F.column,
-    columnKey: F.key
-  }) : !0, $ = (v, I) => {
-    const F = s.value[I];
-    if (F?.key === v)
-      return { column: F, columnIndex: I };
+    column: O.column,
+    columnKey: O.key
+  }) : !0, N = (v, I) => {
+    const O = s.value[I];
+    if (O?.key === v)
+      return { column: O, columnIndex: I };
     const C = s.value.findIndex((x) => x.key === v);
     return C < 0 ? null : {
       column: s.value[C],
@@ -948,8 +948,8 @@ function _r(e) {
     isRowSelectionColumnKey: l,
     isRowSelectionColumn: c,
     isCellEditable: A,
-    isCellEditableByKey: (v, I, F, C) => {
-      const x = $(F, C);
+    isCellEditableByKey: (v, I, O, C) => {
+      const x = N(O, C);
       return x ? A(v, I, x.column) : !1;
     },
     rowSelectionColumn: a
@@ -1019,7 +1019,7 @@ function Vr(e) {
   }), A = w(() => {
     const C = M.value;
     return C.length > 0 && C.every((x) => l.value.has(x));
-  }), $ = w(() => M.value.some((x) => l.value.has(x))), p = (C) => {
+  }), N = w(() => M.value.some((x) => l.value.has(x))), p = (C) => {
     o(C) || C.rowId == null || !e.runtime.api.rowSelection.hasSupport() || e.runtime.api.rowSelection.setFocusedRow(C.rowId);
   };
   return {
@@ -1029,7 +1029,7 @@ function Vr(e) {
     readRowSelectionCell: b,
     readRowSelectionDisplayCell: R,
     areAllVisibleRowsSelected: A,
-    areSomeVisibleRowsSelected: $,
+    areSomeVisibleRowsSelected: N,
     focusRow: p,
     toggleRowCheckboxSelected: (C) => {
       o(C) || C.kind === "group" || C.rowId == null || !e.runtime.api.rowSelection.hasSupport() || a((x) => {
@@ -1140,8 +1140,8 @@ function Gr(e) {
       columnIndex: p.startColumn
     } : e.selectionAnchorCell.value;
   }, c = () => o.value, s = () => a.value, f = () => e.mode.value === "base" && e.isFillDragging.value && !!e.fillPreviewRange.value, b = (p, v, I) => {
-    const F = e.viewportRowStart.value + v;
-    return F >= p.startRow && F <= p.endRow && I >= p.startColumn && I <= p.endColumn;
+    const O = e.viewportRowStart.value + v;
+    return O >= p.startRow && O <= p.endRow && I >= p.startColumn && I <= p.endColumn;
   }, R = (p, v) => {
     const I = l();
     return I ? I.rowIndex === e.viewportRowStart.value + p && I.columnIndex === v : e.isCommittedSelectionAnchorCell(p, v);
@@ -1152,7 +1152,7 @@ function Gr(e) {
     isSelectionAnchorCell: R,
     isCellSelected: (p, v) => {
       if (!f())
-        return s().some((F) => b(F, p, v));
+        return s().some((O) => b(O, p, v));
       const I = c();
       return I ? b(I, p, v) : !1;
     },
@@ -1181,19 +1181,19 @@ function Gr(e) {
               return v === x.startColumn;
           }
         });
-      const F = c();
-      if (!F || !b(F, p, v))
+      const O = c();
+      if (!O || !b(O, p, v))
         return !1;
       const C = e.viewportRowStart.value + p;
       switch (I) {
         case "top":
-          return C === F.startRow;
+          return C === O.startRow;
         case "right":
-          return v === F.endColumn;
+          return v === O.endColumn;
         case "bottom":
-          return C === F.endRow;
+          return C === O.endRow;
         case "left":
-          return v === F.startColumn;
+          return v === O.startColumn;
       }
     }
   };
@@ -1215,11 +1215,11 @@ function Wr(e) {
     isCellEditable: e.isCellEditable
   }), {
     orderedVisibleColumns: A,
-    centerColumns: $,
+    centerColumns: N,
     resolveColumnWidth: p,
     isRowSelectionColumnKey: v,
     isRowSelectionColumn: I,
-    isCellEditable: F,
+    isCellEditable: O,
     isCellEditableByKey: C,
     rowSelectionColumn: x
   } = M, H = Ao({
@@ -1231,11 +1231,11 @@ function Wr(e) {
     resolveRowHeightOverridesSnapshot: () => e.runtime.api.view.getRowHeightOverridesSnapshot?.() ?? null,
     resolveLastRowHeightMutation: () => e.runtime.api.view.getLastRowHeightMutation?.() ?? null
   }), q = (h) => {
-    const O = Math.max(0, Math.trunc(h));
-    if (O <= 0)
+    const F = Math.max(0, Math.trunc(h));
+    if (F <= 0)
       return 0;
     const k = H.resolveTotalHeight();
-    return O <= s.value ? H.resolveRowOffset(O) : k + (O - s.value) * e.normalizedBaseRowHeight.value;
+    return F <= s.value ? H.resolveRowOffset(F) : k + (F - s.value) * e.normalizedBaseRowHeight.value;
   }, me = w(() => {
     if (e.layoutMode.value !== "auto-height")
       return null;
@@ -1256,12 +1256,12 @@ function Wr(e) {
   const {
     headerViewportRef: P,
     bodyViewportRef: E,
-    displayRows: re,
+    displayRows: ae,
     pinnedBottomRows: bn,
     renderedColumns: yn,
-    viewportRowStart: ae,
+    viewportRowStart: ne,
     viewportColumnStart: Cn,
-    topSpacerHeight: ne,
+    topSpacerHeight: le,
     bottomSpacerHeight: St,
     leftColumnSpacerWidth: Rn,
     rightColumnSpacerWidth: Sn,
@@ -1280,7 +1280,7 @@ function Wr(e) {
     rowVirtualizationEnabled: w(() => e.virtualization.value.rows),
     columnVirtualizationEnabled: w(() => e.virtualization.value.columns),
     totalRows: b,
-    visibleColumns: $,
+    visibleColumns: N,
     sizingColumns: A,
     normalizedBaseRowHeight: e.normalizedBaseRowHeight,
     resolveColumnWidth: p,
@@ -1294,7 +1294,7 @@ function Wr(e) {
     resolveRowOffset: H.resolveRowOffset,
     resolveRowIndexAtOffset: H.resolveRowIndexAtOffset,
     resolveTotalRowHeight: H.resolveTotalHeight
-  }), Fn = (h) => xn(h), le = f.visualRuntime, L = le.resolveBodyRowIndexById, {
+  }), Fn = (h) => xn(h), oe = f.visualRuntime, $ = oe.resolveBodyRowIndexById, {
     rowStyle: Ge,
     isRowAutosizeProbe: Ke,
     measureVisibleRowHeights: it,
@@ -1305,20 +1305,20 @@ function Wr(e) {
     mode: e.mode,
     rowHeightMode: e.rowHeightMode,
     normalizedBaseRowHeight: e.normalizedBaseRowHeight,
-    viewportRowStart: ae,
+    viewportRowStart: ne,
     bodyViewportRef: E,
     runtime: e.runtime,
     minRowHeight: $r,
     syncViewport: () => ie()
   }), Te = ko({
     mode: e.mode,
-    runtime: le,
+    runtime: oe,
     totalRows: b,
     visibleColumns: A,
-    viewportRowStart: ae,
+    viewportRowStart: ne,
     selectionSnapshot: e.selectionSnapshot,
     selectionAnchor: e.selectionAnchor,
-    isEditingCell: (h, O) => z(h, O)
+    isEditingCell: (h, F) => z(h, F)
   }), {
     normalizeRowId: kn,
     normalizeCellCoord: xt,
@@ -1330,11 +1330,11 @@ function Wr(e) {
     setCellSelection: ct,
     clearCellSelection: dt,
     isCellSelected: ce
-  } = Te, At = Te.isSelectionAnchorCell ?? (() => !1), Ft = Te.shouldHighlightSelectedCell ?? ((h, O) => ce(h, O)), Ot = Te.isCellOnSelectionEdge ?? (() => !1), ze = w(() => {
+  } = Te, At = Te.isSelectionAnchorCell ?? (() => !1), Ft = Te.shouldHighlightSelectedCell ?? ((h, F) => ce(h, F)), Ot = Te.isCellOnSelectionEdge ?? (() => !1), ze = w(() => {
     const h = e.selectionSnapshot.value;
     if (!h || h.ranges.length === 0)
       return null;
-    const O = h.activeRangeIndex ?? 0, k = h.ranges[O]?.anchor ?? h.ranges[0]?.anchor ?? null;
+    const F = h.activeRangeIndex ?? 0, k = h.ranges[F]?.anchor ?? h.ranges[0]?.anchor ?? null;
     return !k || typeof k.rowIndex != "number" || typeof k.colIndex != "number" || !Number.isFinite(k.rowIndex) || !Number.isFinite(k.colIndex) ? null : {
       rowIndex: Math.trunc(k.rowIndex),
       columnIndex: Math.trunc(k.colIndex)
@@ -1344,12 +1344,12 @@ function Wr(e) {
     isPlaceholderRow: f.isPlaceholderRow,
     rowSelectionColumn: x,
     orderedVisibleColumns: A,
-    displayRows: re,
+    displayRows: ae,
     rowSelectionSnapshot: l,
     applyRowSelectionMutation: (h) => {
       e.runtime.api.rowSelection.hasSupport() && (h(e.runtime.api.rowSelection), o(), a());
     },
-    viewportRowStart: ae,
+    viewportRowStart: ne,
     selectionAnchorCell: ze,
     applySelectionRange: xe
   }), {
@@ -1387,11 +1387,11 @@ function Wr(e) {
   } = Do({
     mode: e.mode,
     runtime: e.runtime,
-    viewportRowStart: ae,
+    viewportRowStart: ne,
     firstColumnKey: e.firstColumnKey
   }), mt = zr({
     runtime: e.runtime,
-    viewportRowStart: ae,
+    viewportRowStart: ne,
     ensureEditableRowAtIndex: (h) => f.ensureMaterializedRowAt(h, "toggle"),
     isRowSelectionColumnKey: v,
     isRowSelectionColumn: I,
@@ -1407,16 +1407,16 @@ function Wr(e) {
     syncViewport: () => ie()
   }), {
     readStageCell: Ne
-  } = mt, We = (h, O, k) => f.isPlaceholderRow(h) ? f.isPlaceholderCellEditable(O) : k(), de = (h, O, k, N) => We(
+  } = mt, We = (h, F, k) => f.isPlaceholderRow(h) ? f.isPlaceholderCellEditable(F) : k(), de = (h, F, k, G) => We(
     h,
-    A.value[N],
-    () => C(h, O, k, N)
+    A.value[G],
+    () => C(h, F, k, G)
   ), te = Eo({
     mode: e.mode,
-    runtime: le,
+    runtime: oe,
     totalRows: b,
     visibleColumns: A,
-    viewportRowStart: ae,
+    viewportRowStart: ne,
     resolveSelectionRange: $e,
     resolveSelectionRanges: st,
     resolveCurrentCellCoord: Mt,
@@ -1430,8 +1430,8 @@ function Wr(e) {
         label: "Cell edit"
       }, h);
     },
-    readCell: (h, O) => Ne(h, O),
-    readClipboardCell: e.readClipboardCell ? (h, O) => e.readClipboardCell?.(h, O) ?? "" : void 0,
+    readCell: (h, F) => Ne(h, F),
+    readClipboardCell: e.readClipboardCell ? (h, F) => e.readClipboardCell?.(h, F) ?? "" : void 0,
     isCellEditable: de,
     syncViewport: () => ie(),
     applyClipboardEdits: e.applyClipboardEdits,
@@ -1479,14 +1479,14 @@ function Wr(e) {
     bodyViewportRef: E,
     visibleColumns: A,
     totalRows: b,
-    runtime: le,
-    readCell: (h, O) => Ne(h, O),
-    resolveRowIndexById: L,
+    runtime: oe,
+    readCell: (h, F) => Ne(h, F),
+    resolveRowIndexById: $,
     applyCellSelection: (h) => {
       ut(h, !1);
     },
-    ensureActiveCellVisible: (h, O) => {
-      Gt(h, O);
+    ensureActiveCellVisible: (h, F) => {
+      Gt(h, F);
     },
     isCellEditable: de,
     captureRowsSnapshot: Me,
@@ -1500,19 +1500,19 @@ function Wr(e) {
     ensureEditableRowAtIndex: (h) => f.ensureMaterializedRowAt(h, "edit")
   });
   z = Ye;
-  const Fe = w(() => Bn.value), Je = (h, O) => {
-    const k = Ue(h), N = Ue(O);
-    if (!k || !N || qe(k, N))
+  const Fe = w(() => Bn.value), Je = (h, F) => {
+    const k = Ue(h), G = Ue(F);
+    if (!k || !G || qe(k, G))
       return !1;
-    const X = wt(k), ye = k.endRow - k.startRow + 1, G = k.endColumn - k.startColumn + 1, oe = /* @__PURE__ */ new Map();
+    const X = wt(k), ye = k.endRow - k.startRow + 1, K = k.endColumn - k.startColumn + 1, re = /* @__PURE__ */ new Map();
     for (let j = 0; j < ye; j += 1) {
       let B = !1;
-      for (let J = 0; J < G; J += 1)
+      for (let J = 0; J < K; J += 1)
         if ((X[j]?.[J] ?? "").length > 0) {
           B = !0;
           break;
         }
-      oe.set(N.startRow + j, B);
+      re.set(G.startRow + j, B);
     }
     const on = Me(), nt = /* @__PURE__ */ new Map();
     let we = 0, De = 0;
@@ -1524,21 +1524,21 @@ function Wr(e) {
       return nt.set(j, J), J;
     };
     for (let j = k.startRow; j <= k.endRow; j += 1) {
-      const B = le.getBodyRowAtIndex(j);
+      const B = oe.getBodyRowAtIndex(j);
       if (!(!B || B.kind === "group" || B.rowId == null || f.isPlaceholderRow(B)))
         for (let J = k.startColumn; J <= k.endColumn; J += 1) {
           const Z = A.value[J]?.key;
           !Z || v(Z) || (rn(B.rowId)[Z] = "");
         }
     }
-    for (let j = N.startRow; j <= N.endRow; j += 1) {
-      let B = le.getBodyRowAtIndex(j);
-      f.isPlaceholderRow(B) && oe.get(j) === !0 && (B = f.ensureMaterializedRowAt(j, "paste"));
-      for (let J = N.startColumn; J <= N.endColumn; J += 1) {
+    for (let j = G.startRow; j <= G.endRow; j += 1) {
+      let B = oe.getBodyRowAtIndex(j);
+      f.isPlaceholderRow(B) && re.get(j) === !0 && (B = f.ensureMaterializedRowAt(j, "paste"));
+      for (let J = G.startColumn; J <= G.endColumn; J += 1) {
         const Z = A.value[J]?.key;
         if (!Z || v(Z))
           continue;
-        const an = j - N.startRow, el = J - N.startColumn, Ve = X[an]?.[el] ?? "";
+        const an = j - G.startRow, el = J - G.startColumn, Ve = X[an]?.[el] ?? "";
         if (!B || B.kind === "group" || B.rowId == null || f.isPlaceholderRow(B)) {
           we += 1;
           continue;
@@ -1549,19 +1549,19 @@ function Wr(e) {
     return De <= 0 || nt.size === 0 ? !1 : (e.runtime.api.rows.applyEdits(Array.from(nt.entries()).map(([j, B]) => ({
       rowId: j,
       data: B
-    }))), xe(N), Ce({
+    }))), xe(G), Ce({
       intent: "move",
       label: we > 0 ? `Move ${De} cells (blocked ${we})` : `Move ${De} cells`,
-      affectedRange: N
+      affectedRange: G
     }, on), ie(), !0);
   }, fe = {
     mode: e.mode,
     enableFillHandle: e.enableFillHandle,
     enableRangeMove: e.enableRangeMove,
-    runtime: le,
+    runtime: oe,
     totalRows: b,
     visibleColumns: A,
-    viewportRowStart: ae,
+    viewportRowStart: ne,
     selectionSnapshot: e.selectionSnapshot,
     bodyViewportRef: E,
     indexColumnWidth: R.value,
@@ -1575,15 +1575,15 @@ function Wr(e) {
     applyCellSelectionByCoord: ut,
     setCellSelection: ct,
     clearCellSelection: dt,
-    readCell: (h, O) => Ne(h, O),
+    readCell: (h, F) => Ne(h, F),
     isCellEditable: de,
     cloneRowData: e.cloneRowData,
-    resolveRowIndexById: L,
+    resolveRowIndexById: $,
     ensureEditableRowAtIndex: (h) => f.ensureMaterializedRowAt(h, "toggle"),
     captureRowsSnapshot: Me,
     captureRowsSnapshotForRowIds: _e,
-    recordIntentTransaction: (h, O) => {
-      Ce(h, O);
+    recordIntentTransaction: (h, F) => {
+      Ce(h, F);
     },
     clearPendingClipboardOperation: Vt,
     clearExternalPendingClipboardOperation: e.clearExternalPendingClipboardOperation,
@@ -1632,11 +1632,11 @@ function Wr(e) {
     clearSelectedCells: qn,
     dispose: Jt
   } = Oe, Zt = w(() => Ze.value ? qt.value : null), Qt = jr({
-    runtime: le,
+    runtime: oe,
     selectionSnapshot: e.selectionSnapshot,
     totalRows: b,
     orderedVisibleColumns: A,
-    viewportRowStart: ae,
+    viewportRowStart: ne,
     applySelectionRange: xe,
     handleCellKeydown: ht
   }), {
@@ -1649,8 +1649,8 @@ function Wr(e) {
   } = Ho({
     visibleColumns: A,
     rows: e.rows,
-    persistColumnWidth: (h, O) => {
-      e.runtime.api.columns.setWidth(h, O);
+    persistColumnWidth: (h, F) => {
+      e.runtime.api.columns.setWidth(h, F);
     },
     defaultColumnWidth: ol,
     minColumnWidth: Lr,
@@ -1666,13 +1666,13 @@ function Wr(e) {
     stopDragSelection: () => {
       Yt();
     },
-    readCellText: (h, O) => {
-      const k = h[O];
+    readCellText: (h, F) => {
+      const k = h[F];
       return k == null ? "" : String(k);
     }
   }), Re = Gr({
     mode: e.mode,
-    viewportRowStart: ae,
+    viewportRowStart: ne,
     selectionAnchorCell: ze,
     fillPreviewRange: Nt,
     isFillDragging: Qe,
@@ -1713,7 +1713,7 @@ function Wr(e) {
     chromeSignature: e.chromeSignature,
     visibleColumns: A,
     renderedColumns: yn,
-    displayRows: re,
+    displayRows: ae,
     pinnedBottomRows: bn,
     sourceRows: e.sourceRows ?? e.rows,
     showRowIndex: c,
@@ -1725,9 +1725,9 @@ function Wr(e) {
     indexColumnStyle: zn,
     stageStyle: Ie,
     bodyShellStyle: Ee,
-    topSpacerHeight: ne,
+    topSpacerHeight: le,
     bottomSpacerHeight: St,
-    viewportRowStart: ae,
+    viewportRowStart: ne,
     columnWindowStart: Cn,
     leftColumnSpacerWidth: Rn,
     rightColumnSpacerWidth: Sn,
@@ -1805,10 +1805,10 @@ function Wr(e) {
     isCellInPendingClipboardRange: He,
     isCellOnPendingClipboardEdge: Pn,
     isEditingCell: Ye,
-    isCellEditable: (h, O, k, N) => We(
+    isCellEditable: (h, F, k, G) => We(
       h,
       k,
-      () => F(h, ae.value + O, k)
+      () => O(h, ne.value + F, k)
     ),
     handleCellMouseDown: Xt,
     handleCellClick: T.cellIo.handleCellClick,
@@ -1826,11 +1826,17 @@ function Wr(e) {
     cancelInlineEdit: gt,
     readCell: T.cellIo.readStageCell,
     readDisplayCell: T.cellIo.readStageDisplayCell,
-    cellClass: e.cellClass ? (h, O, k, N) => e.cellClass?.(
+    cellClass: e.cellClass ? (h, F, k, G) => e.cellClass?.(
       h,
-      ae.value + O,
+      ne.value + F,
       k,
-      N
+      G
+    ) : void 0,
+    cellStyle: e.cellStyle ? (h, F, k, G) => e.cellStyle?.(
+      h,
+      ne.value + F,
+      k,
+      G
     ) : void 0
   });
   return Po({
@@ -1980,7 +1986,30 @@ function Zr(e) {
     component: vo(ho(e.component))
   };
 }
-function Qr(e) {
+function Qr(e, o) {
+  if (!e)
+    return o ?? null;
+  if (!o)
+    return e;
+  const a = {}, l = (c) => {
+    if (typeof c == "string") {
+      for (const s of c.split(/\s+/).filter(Boolean))
+        a[s] = !0;
+      return;
+    }
+    if (Array.isArray(c)) {
+      for (const s of c)
+        if (typeof s == "string")
+          for (const f of s.split(/\s+/).filter(Boolean))
+            a[f] = !0;
+      return;
+    }
+    for (const [s, f] of Object.entries(c))
+      a[s] = f === !0 || a[s] === !0;
+  };
+  return l(e), l(o), Object.keys(a).length > 0 ? a : null;
+}
+function ea(e) {
   return Number.isFinite(e) ? Math.max(24, Math.trunc(e)) : 31;
 }
 function Bl(e) {
@@ -2005,7 +2034,7 @@ function ot(e) {
 function dl(e) {
   return e.startsWith("string:") ? `string:${e.slice(7).toLowerCase()}` : e;
 }
-function ea(e) {
+function ta(e) {
   const o = {};
   for (const [c, s] of Object.entries(e.columnFilters ?? {})) {
     if (s.kind === "valueSet") {
@@ -2035,7 +2064,7 @@ function ea(e) {
     advancedExpression: l
   };
 }
-function ta(e) {
+function na(e) {
   const o = {}, a = e?.columnFilters ?? {};
   for (const [l, c] of Object.entries(a))
     c?.kind === "predicate" && typeof c.value == "string" && (o[l] = c.value);
@@ -2080,7 +2109,7 @@ function Ql(e) {
   const o = Object.getPrototypeOf(e);
   return o === Object.prototype || o === null;
 }
-function na(e) {
+function la(e) {
   const o = /* @__PURE__ */ new WeakSet();
   try {
     return JSON.stringify(e, (a, l) => {
@@ -2101,7 +2130,7 @@ function Rt(e) {
     basis: e.basis === "source" ? "source" : "filtered"
   } : null;
 }
-function la(e) {
+function oa(e) {
   return e ? {
     fields: [...e.fields],
     expandedByDefault: e.expandedByDefault
@@ -2151,7 +2180,7 @@ function Be(e) {
       return e;
   }
 }
-function oa(e) {
+function ra(e) {
   const o = String(e ?? "");
   if (o === "null")
     return "(Blanks)";
@@ -2161,10 +2190,10 @@ function oa(e) {
   const l = o.slice(0, a), c = o.slice(a + 1);
   return l === "string" || l === "number" || l === "boolean" || l === "bigint" || l === "date" || l === "repr" || l === "json" ? c : o;
 }
-function ra(e, o) {
-  return o.kind === "valueSet" ? o.tokens.length === 1 ? `${e}: ${oa(o.tokens[0] ?? "")}` : `${e}: ${o.tokens.length} values` : o.operator === "between" ? `${e} between ${pe(o.value)} and ${pe(o.value2)}` : o.operator === "isEmpty" || o.operator === "notEmpty" || o.operator === "isNull" || o.operator === "notNull" ? `${e} ${Be(o.operator)}` : `${e} ${Be(o.operator)} ${pe(o.value)}`;
-}
 function aa(e, o) {
+  return o.kind === "valueSet" ? o.tokens.length === 1 ? `${e}: ${ra(o.tokens[0] ?? "")}` : `${e}: ${o.tokens.length} values` : o.operator === "between" ? `${e} between ${pe(o.value)} and ${pe(o.value2)}` : o.operator === "isEmpty" || o.operator === "notEmpty" || o.operator === "isNull" || o.operator === "notNull" ? `${e} ${Be(o.operator)}` : `${e} ${Be(o.operator)} ${pe(o.value)}`;
+}
+function ia(e, o) {
   const a = o.clauses.map((l, c) => {
     const s = c === 0 ? "" : `${String(l.join ?? "and").toUpperCase()} `;
     return l.operator === "between" ? `${s}${Be(l.operator)} ${pe(l.value)} and ${pe(l.value2)}` : l.operator === "isEmpty" || l.operator === "notEmpty" || l.operator === "isNull" || l.operator === "notNull" ? `${s}${Be(l.operator)}` : `${s}${Be(l.operator)} ${pe(l.value)}`;
@@ -2178,7 +2207,7 @@ function fl(e, o) {
   }
   return e.kind === "not" ? `NOT (${fl(e.child, o)})` : e.children.map((a) => fl(a, o)).filter((a) => a.length > 0).join(` ${e.operator.toUpperCase()} `);
 }
-const ia = [
+const sa = [
   "sum",
   "avg",
   "min",
@@ -2187,27 +2216,27 @@ const ia = [
   "countNonNull",
   "first",
   "last"
-], sa = [
+], ua = [
   "min",
   "max",
   "count",
   "countNonNull",
   "first",
   "last"
-], ua = [
+], ca = [
   "count",
   "countNonNull",
   "first",
   "last"
 ];
-function ca(e) {
-  return e === "number" || e === "currency" || e === "percent" ? ia : e === "date" || e === "datetime" ? sa : ua;
+function da(e) {
+  return e === "number" || e === "currency" || e === "percent" ? sa : e === "date" || e === "datetime" ? ua : ca;
 }
-const da = {
+const ma = {
   clipboard: ["cut", "copy", "paste"],
   pasteSpecial: ["paste-values"],
   edit: ["clear"]
-}, ma = {
+}, fa = {
   insert: ["insert-row-above", "insert-row-below"],
   clipboard: ["cut-row", "copy-row", "paste-row"],
   selection: ["delete-selected-rows"]
@@ -2228,12 +2257,12 @@ const da = {
   "sort-clear": "Clear sort",
   filter: "Filter column",
   "auto-size": "Auto size column"
-}, fa = {
+}, wa = {
   "insert-row-above": "Insert / Ctrl/Cmd+I",
   "copy-row": "Ctrl/Cmd+C",
   "paste-row": "Ctrl/Cmd+V",
   "cut-row": "Ctrl/Cmd+X"
-}, Pa = gn({
+}, Va = gn({
   name: "DataGridDefaultRenderer",
   props: {
     mode: {
@@ -2382,6 +2411,14 @@ const da = {
       type: Function,
       default: void 0
     },
+    cellClass: {
+      type: Function,
+      default: void 0
+    },
+    cellStyle: {
+      type: Function,
+      default: void 0
+    },
     showRowIndex: {
       type: Boolean,
       default: !0
@@ -2410,6 +2447,10 @@ const da = {
       type: Array,
       default: () => []
     },
+    customOverlays: {
+      type: Array,
+      default: void 0
+    },
     history: {
       type: Object,
       required: !0
@@ -2462,7 +2503,7 @@ const da = {
       e.gridLines.body,
       e.gridLines.header,
       e.gridLines.pinnedSeparators ? "sep:1" : "sep:0"
-    ].join("|")), l = ee(0), c = ee(jl(e.sortModel)), s = ee(ot(e.filterModel)), f = w(() => ta(s.value));
+    ].join("|")), l = ee(0), c = ee(jl(e.sortModel)), s = ee(ot(e.filterModel)), f = w(() => na(s.value));
     let b = "";
     const R = () => {
       const t = e.runtimeRowModel.getSnapshot();
@@ -2494,7 +2535,7 @@ const da = {
       },
       { deep: !0 }
     );
-    const A = w(() => e.mode), $ = w(() => e.rows), p = w(() => (l.value, e.runtime.api.rows.getSnapshot().rowCount)), v = w(() => e.runtime.columnSnapshot.value.visibleColumns), I = w(() => e.runtime.columnSnapshot.value.columns ?? []), F = w(() => v.value.filter((t) => t.visible !== !1).map((t) => ({
+    const A = w(() => e.mode), N = w(() => e.rows), p = w(() => (l.value, e.runtime.api.rows.getSnapshot().rowCount)), v = w(() => e.runtime.columnSnapshot.value.visibleColumns), I = w(() => e.runtime.columnSnapshot.value.columns ?? []), O = w(() => v.value.filter((t) => t.visible !== !1).map((t) => ({
       key: t.key,
       label: t.column.label ?? t.key
     }))), C = w(() => I.value.map((t) => ({
@@ -2504,8 +2545,8 @@ const da = {
     }))), x = w(() => I.value.filter((t) => t.column.capabilities?.aggregatable === !0).map((t) => ({
       key: t.key,
       label: t.column.label ?? t.key,
-      allowedOps: ca(t.column.dataType)
-    }))), H = ee(e.rowHeightMode), q = w(() => Qr(e.baseRowHeight)), me = w(() => v.value[0]?.key ?? "name"), Ie = w(() => {
+      allowedOps: da(t.column.dataType)
+    }))), H = ee(e.rowHeightMode), q = w(() => ea(e.baseRowHeight)), me = w(() => v.value[0]?.key ?? "name"), Ie = w(() => {
       const t = /* @__PURE__ */ new Map();
       for (const n of I.value)
         t.set(n.key, n.column.label ?? n.key);
@@ -2515,10 +2556,10 @@ const da = {
       columnLayoutPanelItems: z,
       openColumnLayoutPanel: P,
       cancelColumnLayoutPanel: E,
-      applyColumnLayoutPanel: re,
+      applyColumnLayoutPanel: ae,
       moveColumnUp: bn,
       moveColumnDown: yn,
-      moveColumnToPosition: ae,
+      moveColumnToPosition: ne,
       updateColumnVisibility: Cn
     } = Bo({
       resolveColumns: () => C.value,
@@ -2527,47 +2568,47 @@ const da = {
         for (const [n, r] of Object.entries(t.visibilityByKey))
           e.runtime.api.columns.setVisibility(n, r);
       }
-    }), ne = al(null), St = w(() => ne.value?.isAdvancedFilterPanelOpen.value ?? !1), Rn = w(() => ne.value?.advancedFilterDraftClauses.value ?? []), Sn = w(() => ne.value?.appliedAdvancedFilterExpression.value ?? null), je = async () => {
-      if (ne.value)
-        return ne.value;
+    }), le = al(null), St = w(() => le.value?.isAdvancedFilterPanelOpen.value ?? !1), Rn = w(() => le.value?.advancedFilterDraftClauses.value ?? []), Sn = w(() => le.value?.appliedAdvancedFilterExpression.value ?? null), je = async () => {
+      if (le.value)
+        return le.value;
       const { useDataGridAppAdvancedFilterBuilder: t } = await import("@affino/datagrid-vue/app"), n = t({
-        resolveColumns: () => F.value
+        resolveColumns: () => O.value
       });
-      return n.hydrateAdvancedFilterClauses(Pl(s.value)), ne.value = n, n;
+      return n.hydrateAdvancedFilterClauses(Pl(s.value)), le.value = n, n;
     }, pn = (t) => {
-      ne.value?.hydrateAdvancedFilterClauses(t);
+      le.value?.hydrateAdvancedFilterClauses(t);
     }, In = async () => {
       (await je()).openAdvancedFilterPanel();
     }, xn = async () => {
-      const t = ne.value;
+      const t = le.value;
       if (t) {
         t.addAdvancedFilterClause();
         return;
       }
       (await je()).addAdvancedFilterClause();
     }, pt = async (t) => {
-      const n = ne.value;
+      const n = le.value;
       if (n) {
         n.removeAdvancedFilterClause(t);
         return;
       }
       (await je()).removeAdvancedFilterClause(t);
     }, ie = async (t) => {
-      const n = ne.value;
+      const n = le.value;
       if (n) {
         n.updateAdvancedFilterClause(t);
         return;
       }
       (await je()).updateAdvancedFilterClause(t);
     }, Mn = () => {
-      ne.value?.cancelAdvancedFilterPanel();
+      le.value?.cancelAdvancedFilterPanel();
     }, An = () => {
-      ne.value?.applyAdvancedFilterPanel();
+      le.value?.applyAdvancedFilterPanel();
     }, Fn = () => {
-      ne.value?.clearAdvancedFilterPanel();
-    }, le = ee(!1), L = ee(null), Ge = w(() => !!e.groupBy?.fields?.length), Ke = w(() => (l.value, Rt(e.runtime.api.rows.getAggregationModel()))), it = w(() => (l.value, la(e.runtime.api.rows.getSnapshot().groupBy))), On = w(() => {
+      le.value?.clearAdvancedFilterPanel();
+    }, oe = ee(!1), $ = ee(null), Ge = w(() => !!e.groupBy?.fields?.length), Ke = w(() => (l.value, Rt(e.runtime.api.rows.getAggregationModel()))), it = w(() => (l.value, oa(e.runtime.api.rows.getSnapshot().groupBy))), On = w(() => {
       const t = new Map(
-        (L.value?.columns ?? []).map((n) => [n.key, n.op])
+        ($.value?.columns ?? []).map((n) => [n.key, n.op])
       );
       return x.value.map((n) => {
         const r = n.allowedOps[0] ?? "count", i = t.get(n.key), u = i && n.allowedOps.includes(i) ? i : r;
@@ -2579,11 +2620,11 @@ const da = {
           allowedOps: n.allowedOps
         };
       });
-    }), Le = w(() => L.value?.basis === "source" ? "source" : "filtered");
+    }), Le = w(() => $.value?.basis === "source" ? "source" : "filtered");
     Y(
       Ke,
       (t) => {
-        le.value || (L.value = Rt(t));
+        oe.value || ($.value = Rt(t));
       },
       { immediate: !0, deep: !0 }
     ), Y(
@@ -2618,16 +2659,16 @@ const da = {
       };
       e.runtime.api.rows.setSortAndFilterModel({
         sortModel: t,
-        filterModel: ea(r)
+        filterModel: ta(r)
       });
     }, At = () => {
       pn(Pl(s.value));
     }, Ft = w(() => s.value.advancedExpression ?? null), Ot = w(() => {
       const t = (r) => Ie.value.get(r) ?? r, n = [];
       for (const [r, i] of Object.entries(s.value.columnFilters ?? {}))
-        i && n.push(ra(t(r), i));
+        i && n.push(aa(t(r), i));
       for (const [r, i] of Object.entries(s.value.advancedFilters ?? {}))
-        i && n.push(`Advanced: ${aa(t(r), i)}`);
+        i && n.push(`Advanced: ${ia(t(r), i)}`);
       return Ft.value && n.push(`Advanced: ${fl(Ft.value, t)}`), Object.freeze(n);
     }), ze = w(() => Ot.value.length > 0), kt = () => {
       s.value = cl(), Fn(), ce();
@@ -2681,9 +2722,9 @@ const da = {
     }, Me = () => {
       e.runtime.api.view.setRowHeightMode(H.value), e.runtime.api.view.setBaseRowHeight(q.value);
     }, _e = () => {
-      L.value = Rt(Ke.value), le.value = !0;
+      $.value = Rt(Ke.value), oe.value = !0;
     }, Ce = () => {
-      L.value = Rt(Ke.value), le.value = !1;
+      $.value = Rt(Ke.value), oe.value = !1;
     };
     Y(
       Ge,
@@ -2693,27 +2734,27 @@ const da = {
       { immediate: !0 }
     );
     const Et = () => {
-      L.value = null;
+      $.value = null;
     }, Tt = (t) => {
-      L.value = {
+      $.value = {
         basis: t,
-        columns: L.value?.columns ?? []
+        columns: $.value?.columns ?? []
       };
     }, zt = (t, n) => {
       const r = x.value.find((d) => d.key === t);
       if (!r)
         return;
-      const i = L.value?.columns ?? [];
+      const i = $.value?.columns ?? [];
       if (!n) {
         const d = i.filter((y) => y.key !== t);
-        L.value = d.length > 0 ? { basis: Le.value, columns: d } : null;
+        $.value = d.length > 0 ? { basis: Le.value, columns: d } : null;
         return;
       }
       const g = i.find((d) => d.key === t) ?? {
         key: t,
         op: r.allowedOps[0] ?? "count"
       };
-      L.value = {
+      $.value = {
         basis: Le.value,
         columns: [
           ...i.filter((d) => d.key !== t),
@@ -2724,17 +2765,17 @@ const da = {
       const r = x.value.find((u) => u.key === t);
       if (!r || !r.allowedOps.includes(n))
         return;
-      const i = (L.value?.columns ?? []).map((u) => u.key !== t ? u : {
+      const i = ($.value?.columns ?? []).map((u) => u.key !== t ? u : {
         ...u,
         op: n
       });
-      L.value = {
+      $.value = {
         basis: Le.value,
         columns: i
       };
     }, Hn = () => {
-      const t = L.value && L.value.columns.length > 0 ? L.value : null;
-      e.runtime.api.rows.setAggregationModel(t), L.value = Rt(t), le.value = !1;
+      const t = $.value && $.value.columns.length > 0 ? $.value : null;
+      e.runtime.api.rows.setAggregationModel(t), $.value = Rt(t), oe.value = !1;
     }, _t = (t) => c.value.find((n) => n.key === t)?.direction ?? null, Ht = (t, n) => {
       const r = v.value.find((i) => i.key === t);
       !r || r.column.capabilities?.sortable === !1 || (c.value = n === null ? c.value.filter((i) => i.key !== t) : [{ key: t, direction: n }], ce());
@@ -3038,7 +3079,7 @@ const da = {
         operation: n,
         sourceRowIds: r.map((g) => String(g))
       };
-      const u = na(i);
+      const u = la(i);
       return u && await Kn(u), !0;
     }, he = () => e.runtime.api.rows.hasInsertSupport(), Fe = () => e.runtime.api.rows.hasDataMutationSupport(), Je = (t) => !t || typeof t != "object" ? !1 : "data" in t || "row" in t || "kind" in t || "state" in t || "sourceIndex" in t || "originalIndex" in t || "displayIndex" in t, fe = (t) => {
       const n = t;
@@ -3153,16 +3194,16 @@ const da = {
       if (u && g >= 0) {
         const d = Math.min(u.startColumn, u.endColumn), y = Math.max(u.startColumn, u.endColumn), S = Math.min(u.startRow, u.endRow), _ = Math.max(u.startRow, u.endRow), D = t.length > 0 ? e.runtime.resolveBodyRowIndexById(t) : -1;
         if (d === 0 && y === g && (D < 0 || D >= S && D <= _)) {
-          const K = [];
+          const L = [];
           for (let W = S; W <= _; W += 1) {
             const se = e.runtime.getBodyRowAtIndex(W);
             if (!se || se.kind === "group" || se.rowId == null)
               continue;
             const ge = String(se.rowId);
-            n(ge) && K.push(ge);
+            n(ge) && L.push(ge);
           }
-          if (K.length > 0)
-            return K;
+          if (L.length > 0)
+            return L;
         }
       }
       return t.length > 0 && n(t) ? [t] : [];
@@ -3232,10 +3273,10 @@ const da = {
       const i = ke(Pe(n)), u = i.includes(n) ? i : ke([n]);
       if (u.length === 0 || u.includes(r))
         return !1;
-      const g = be(), d = new Set(u), S = g.filter((K) => {
-        const W = fe(K);
+      const g = be(), d = new Set(u), S = g.filter((L) => {
+        const W = fe(L);
         return W == null || !d.has(W);
-      }).findIndex((K) => fe(K) === r);
+      }).findIndex((L) => fe(L) === r);
       if (S < 0)
         return !1;
       const _ = T(), D = bt(
@@ -3260,8 +3301,8 @@ const da = {
       const D = d.indexOf(r);
       if (D < 0)
         return !1;
-      const K = t.placement === "after" ? D + 1 : D;
-      d.splice(K, 0, _);
+      const L = t.placement === "after" ? D + 1 : D;
+      d.splice(L, 0, _);
       const W = Pn(), se = g.pin ?? "none";
       return (u.pin ?? "none") !== se && e.runtime.api.columns.setPin(n, se), e.runtime.api.columns.setOrder(d), Vn(W), !0;
     }, Un = () => te.value ? (te.value = null, !0) : !1, qn = (t) => {
@@ -3278,7 +3319,7 @@ const da = {
     const Yn = (t, n) => {
       if (n)
         return n;
-      const r = Gl[t], i = fa[t];
+      const r = Gl[t], i = wa[t];
       return i ? `${r} (${i})` : r;
     }, {
       tableStageProps: et,
@@ -3300,8 +3341,8 @@ const da = {
       placeholderRows: w(() => e.placeholderRows),
       enableFillHandle: w(() => e.fillHandle),
       enableRangeMove: w(() => e.rangeMove),
-      rows: $,
-      sourceRows: $,
+      rows: N,
+      sourceRows: N,
       runtime: e.runtime,
       rowVersion: l,
       totalRuntimeRows: p,
@@ -3364,14 +3405,18 @@ const da = {
       runRowIndexKeyboardAction: (t, n) => yt(t, n),
       reorderColumnsByHeader: e.columnReorder.enabled ? Wn : void 0,
       reorderRowsByIndex: e.rowReorder.enabled ? Nn : void 0,
-      cellClass: (t, n, r) => {
-        const i = tn.value;
-        return !i || t.kind === "group" || t.rowId == null || t.rowId !== i.rowId || r.key !== i.columnKey ? null : {
+      cellClass: (t, n, r, i) => {
+        const u = tn.value, g = !u || t.kind === "group" || t.rowId == null || t.rowId !== u.rowId || r.key !== u.columnKey ? null : {
           "grid-cell--find-match-active": !0,
-          "grid-cell--find-match-flash-a": i.flashPhase === 0,
-          "grid-cell--find-match-flash-b": i.flashPhase === 1
+          "grid-cell--find-match-flash-a": u.flashPhase === 0,
+          "grid-cell--find-match-flash-b": u.flashPhase === 1
         };
-      }
+        return Qr(
+          g,
+          e.cellClass?.(t, n, r, i)
+        );
+      },
+      cellStyle: e.cellStyle
     });
     Y(
       () => e.registerHistoryController,
@@ -3404,9 +3449,9 @@ const da = {
     ), Dl(() => {
       e.registerHistoryController?.(null), e.registerStructuralRowActionRunner?.(null);
     });
-    const O = w(() => et.value.columns.visibleColumns), k = (t) => {
+    const F = w(() => et.value.columns.visibleColumns), k = (t) => {
       e.runtime.api.selection.setSnapshot(jt(t)), e.syncSelectionSnapshotFromRuntime();
-    }, N = (t, n, r, i) => t.kind === "group" || t.rowId == null || r.column.capabilities?.editable === !1 ? !1 : e.isCellEditable ? e.isCellEditable({
+    }, G = (t, n, r, i) => t.kind === "group" || t.rowId == null || r.column.capabilities?.editable === !1 ? !1 : e.isCellEditable ? e.isCellEditable({
       row: t.data,
       rowId: t.rowId,
       rowIndex: n,
@@ -3418,17 +3463,17 @@ const da = {
       const { useDataGridAppFindReplace: t } = await import("./useDataGridAppFindReplace-DTSLds4f.js"), n = t({
         runtime: e.runtime,
         visibleColumns: v,
-        stageVisibleColumns: O,
+        stageVisibleColumns: F,
         resolveCurrentCellCoord: qe,
         applyActiveCell: k,
         revealCellInComfortZone: h,
         captureRowsSnapshot: T,
         captureRowsSnapshotForRowIds: Qn,
         recordHistoryIntentTransaction: ln,
-        isCellEditable: N
+        isCellEditable: G
       });
       return X.value = n, n;
-    }, G = {
+    }, K = {
       isPanelOpen: w(() => X.value?.isPanelOpen.value ?? !1),
       findText: w(() => X.value?.findText.value ?? ""),
       replaceText: w(() => X.value?.replaceText.value ?? ""),
@@ -3460,21 +3505,21 @@ const da = {
       replaceAll: async () => (await ye()).replaceAll()
     };
     Y(
-      () => G.highlightedCell.value,
+      () => K.highlightedCell.value,
       (t) => {
         tn.value = t;
       },
       { immediate: !0 }
     );
     const {
-      contextMenu: oe,
+      contextMenu: re,
       contextMenuRef: on,
       contextMenuStyle: nt,
       closeContextMenu: we,
       openContextMenu: De,
       onContextMenuKeyDown: rn
     } = Io();
-    Zt = () => oe.value.visible, Qt = we;
+    Zt = () => re.value.visible, Qt = we;
     const j = jo({
       isInteractionBlocked: () => !1,
       isRangeMoveModifierActive: () => !1,
@@ -3610,14 +3655,14 @@ const da = {
             return !1;
           const _ = Math.max(0, i + 1), D = Oe(
             y[0] ?? r
-          ) ?? Oe(r), K = y.length > 0 ? bt(y, _) : e.runtime.api.rows.insertDataAt(
+          ) ?? Oe(r), L = y.length > 0 ? bt(y, _) : e.runtime.api.rows.insertDataAt(
             _,
             g.map((W) => Ut(W, D))
           );
-          return K && te.value?.operation === "cut" && (te.value = null), K && Z(
+          return L && te.value?.operation === "cut" && (te.value = null), L && Z(
             d,
             y.length > 0 ? y.length > 1 ? `Move ${y.length} rows` : "Move row" : g.length > 1 ? `Paste ${g.length} rows` : "Paste row"
-          ), K;
+          ), L;
         }
         return !1;
       }
@@ -3661,9 +3706,9 @@ const da = {
     };
     const el = Ko({
       resolveContextMenuState: () => ({
-        zone: oe.value.zone,
-        columnKey: oe.value.columnKey,
-        rowId: oe.value.rowId
+        zone: re.value.zone,
+        columnKey: re.value.columnKey,
+        rowId: re.value.rowId
       }),
       runHeaderContextAction: () => !1,
       runRowIndexContextAction: yt,
@@ -3742,22 +3787,22 @@ const da = {
         g.push(...i.get(`before:${d.itemKey}`) ?? []), g.push([...d.entries]), g.push(...i.get(`after:${d.itemKey}`) ?? []);
       return g.push(...i.get("end") ?? []), g.filter((d) => d.length > 0);
     }, Sl = w(() => {
-      if (!oe.value.visible)
+      if (!re.value.visible)
         return [];
-      const t = oe.value.zone;
+      const t = re.value.zone;
       if (t === "cell" || t === "range") {
-        const n = oe.value.columnKey ?? "";
+        const n = re.value.columnKey ?? "";
         if (!e.cellMenu.enabled || !n)
           return [];
         const r = fn(e.cellMenu, n), i = new Set(Ir(e.cellMenu, n)), u = Mr(e.cellMenu, n), g = xr(e.cellMenu, n), d = Ar(e.cellMenu, n), y = Fr(e.cellMenu, n), S = [];
         for (const _ of r) {
-          const K = (da[_] ?? []).flatMap((W) => {
+          const L = (ma[_] ?? []).flatMap((W) => {
             const se = no(_, W, i, u, d);
             return se ? [se] : [];
           });
-          if (K.length !== 0) {
+          if (L.length !== 0) {
             if (_ === "pasteSpecial") {
-              const W = i.has(_) || K.every((se) => se.disabled);
+              const W = i.has(_) || L.every((se) => se.disabled);
               S.push({
                 itemKey: _,
                 entries: [{
@@ -3765,36 +3810,36 @@ const da = {
                   id: "paste-special-submenu",
                   label: g.pasteSpecial ?? "Paste special",
                   disabled: W,
-                  title: u[_] ?? (K.length === 1 ? K[0]?.title : void 0),
-                  entries: K
+                  title: u[_] ?? (L.length === 1 ? L[0]?.title : void 0),
+                  entries: L
                 }]
               });
               continue;
             }
             S.push({
               itemKey: _,
-              entries: K
+              entries: L
             });
           }
         }
         return lo(S, y, {
           zone: t,
           columnKey: n,
-          rowId: oe.value.rowId
+          rowId: re.value.rowId
         });
       }
       if (t === "row-index") {
         if (!e.rowIndexMenu.enabled)
           return [];
-        const n = Xe(oe.value.rowId ?? ""), r = Or(e.rowIndexMenu), i = new Set(kr(e.rowIndexMenu)), u = Dr(e.rowIndexMenu), g = Er(e.rowIndexMenu), d = [];
+        const n = Xe(re.value.rowId ?? ""), r = Or(e.rowIndexMenu), i = new Set(kr(e.rowIndexMenu)), u = Dr(e.rowIndexMenu), g = Er(e.rowIndexMenu), d = [];
         for (const y of r) {
-          const _ = (ma[y] ?? []).flatMap((D) => {
+          const _ = (fa[y] ?? []).flatMap((D) => {
             const W = g[D === "insert-row-above" ? "insertAbove" : D === "insert-row-below" ? "insertBelow" : D === "copy-row" ? "copy" : D === "paste-row" ? "paste" : D === "delete-selected-rows" ? "deleteSelected" : "cut"];
             if (W?.hidden)
               return [];
             let ge = i.has(y) || W?.disabled === !0, U = W?.disabledReason ?? u[y];
             return n != null && D !== "delete-selected-rows" && D !== "insert-row-above" && D !== "insert-row-below" && D !== "paste-row" && (ge = !0, U = U ?? "Placeholder rows must be materialized before this action is available"), (D === "insert-row-above" || D === "insert-row-below") && !he() && !Jt() && (ge = !0, U = U ?? "Row insertion is not supported by the current row model"), D === "paste-row" && !he() && (ge = !0, U = U ?? "Row insertion is not supported by the current row model"), D === "cut-row" && !Fe() && (ge = !0, U = U ?? "Row deletion is not supported by the current row model"), D === "delete-selected-rows" && !Fe() && !Jt() && (ge = !0, U = U ?? "Row deletion is not supported by the current row model"), D === "delete-selected-rows" && ke(
-              Pe(oe.value.rowId ?? "")
+              Pe(re.value.rowId ?? "")
             ).length === 0 && (ge = !0, U = U ?? "No deletable rows are selected"), [{
               kind: "action",
               id: D,
@@ -3883,7 +3928,7 @@ const da = {
           ao(i);
         }
       }, i.label)];
-    }), xl = () => !oe.value.visible || Sl.value.length === 0 ? null : V("div", {
+    }), xl = () => !re.value.visible || Sl.value.length === 0 ? null : V("div", {
       ref: on,
       class: "datagrid-context-menu",
       style: nt.value,
@@ -3904,7 +3949,7 @@ const da = {
       })), r.push(...Il(t)), r;
     }));
     Y(
-      () => oe.value.visible,
+      () => re.value.visible,
       (t, n, r) => {
         if (t || (Ve.value = []), !t || typeof window > "u")
           return;
@@ -3921,6 +3966,7 @@ const da = {
     );
     const Ml = w(() => ({
       ...et.value,
+      customOverlays: e.customOverlays,
       columns: {
         ...et.value.columns,
         columnMenuEnabled: e.columnMenu.enabled,
@@ -3982,9 +4028,9 @@ const da = {
           onMoveUp: bn,
           onMoveDown: yn,
           onMoveToPosition: (n) => {
-            ae(n.key, n.targetKey, n.placement);
+            ne(n.key, n.targetKey, n.placement);
           },
-          onApply: re,
+          onApply: ae,
           onCancel: E
         }
       }), e.advancedFilter.enabled && t.push({
@@ -3993,7 +4039,7 @@ const da = {
         props: {
           isOpen: St.value,
           clauses: Rn.value,
-          columns: F.value,
+          columns: O.value,
           appliedFilterSummaryItems: Ot.value,
           hasAnyFilters: ze.value,
           buttonLabel: e.advancedFilter.buttonLabel,
@@ -4011,35 +4057,35 @@ const da = {
         key: "find-replace",
         component: Jr,
         props: {
-          isOpen: G.isPanelOpen.value,
-          findText: G.findText.value,
-          replaceText: G.replaceText.value,
-          matchCase: G.matchCase.value,
-          statusText: G.statusText.value,
+          isOpen: K.isPanelOpen.value,
+          findText: K.findText.value,
+          replaceText: K.replaceText.value,
+          matchCase: K.matchCase.value,
+          statusText: K.statusText.value,
           buttonLabel: e.findReplace.buttonLabel,
-          active: G.active.value,
-          canFind: G.canFind.value,
-          canReplaceCurrent: G.canReplaceCurrent.value,
-          canReplaceAll: G.canReplaceAll.value,
-          onOpen: G.openPanel,
-          onCancel: G.closePanel,
-          onUpdateFindText: G.updateFindText,
-          onUpdateReplaceText: G.updateReplaceText,
-          onUpdateMatchCase: G.updateMatchCase,
-          onFindNext: G.findNext,
-          onFindPrevious: G.findPrevious,
-          onReplaceCurrent: G.replaceCurrent,
-          onReplaceAll: G.replaceAll
+          active: K.active.value,
+          canFind: K.canFind.value,
+          canReplaceCurrent: K.canReplaceCurrent.value,
+          canReplaceAll: K.canReplaceAll.value,
+          onOpen: K.openPanel,
+          onCancel: K.closePanel,
+          onUpdateFindText: K.updateFindText,
+          onUpdateReplaceText: K.updateReplaceText,
+          onUpdateMatchCase: K.updateMatchCase,
+          onFindNext: K.findNext,
+          onFindPrevious: K.findPrevious,
+          onReplaceCurrent: K.replaceCurrent,
+          onReplaceAll: K.replaceAll
         }
       }), e.aggregations.enabled && e.mode !== "pivot" && t.push({
         key: "aggregations",
         component: Xr,
         props: {
-          isOpen: le.value,
+          isOpen: oe.value,
           basis: Le.value,
           items: On.value,
           buttonLabel: e.aggregations.buttonLabel,
-          active: Ge.value && (le.value || !!Ke.value?.columns.length),
+          active: Ge.value && (oe.value || !!Ke.value?.columns.length),
           disabled: !Ge.value,
           disabledReason: Ge.value ? "" : "Aggregations require an active group-by model.",
           onOpen: _e,
@@ -4142,11 +4188,11 @@ const da = {
     ]);
   }
 });
-function Va() {
+function Ba() {
   return (e) => e;
 }
 const rl = /* @__PURE__ */ new WeakMap(), Kl = /* @__PURE__ */ new WeakMap();
-function wa(e) {
+function ga(e) {
   if (!e)
     return;
   const o = rl.get(e);
@@ -4163,16 +4209,16 @@ function wa(e) {
     expandedByDefault: a
   }), rl.set(e, l), l;
 }
-function ga(e) {
-  return !e || e.length === 0 ? [] : e.map((o) => ({ ...o }));
-}
 function va(e) {
   return !e || e.length === 0 ? [] : e.map((o) => ({ ...o }));
 }
 function ha(e) {
-  return !e || e.length === 0 ? [] : e.map(({ formula: o, ...a }) => ({ ...a }));
+  return !e || e.length === 0 ? [] : e.map((o) => ({ ...o }));
 }
 function ba(e) {
+  return !e || e.length === 0 ? [] : e.map(({ formula: o, ...a }) => ({ ...a }));
+}
+function ya(e) {
   return !e || e.length === 0 ? [] : e.flatMap((o) => {
     const a = typeof o.formula == "string" ? o.formula.trim() : "";
     return a ? [{
@@ -4181,24 +4227,24 @@ function ba(e) {
     }] : [];
   });
 }
-function ya(e, o) {
+function Ca(e, o) {
   const a = /* @__PURE__ */ new Map();
   for (const l of e)
     a.set(l.name, { ...l });
-  for (const l of ga(o))
+  for (const l of va(o))
     a.set(l.name, l);
   return Array.from(a.values());
 }
-function Ba(e) {
-  return ha(e);
-}
 function ja(e) {
-  const o = wa(e.clientRowModelOptions), a = e.enterpriseClientRowModelOptions, l = ba(e.columns), c = e.formulas !== void 0, s = e.computedFields !== void 0, f = e.formulaFunctions !== void 0, b = l.length > 0, R = c || b ? ya(l, e.formulas) : void 0, M = s ? va(e.computedFields) : void 0, A = f ? e.formulaFunctions ?? {} : void 0, $ = !!(b || c || s || f);
-  if (!o && !$)
+  return ba(e);
+}
+function Ga(e) {
+  const o = ga(e.clientRowModelOptions), a = e.enterpriseClientRowModelOptions, l = ya(e.columns), c = e.formulas !== void 0, s = e.computedFields !== void 0, f = e.formulaFunctions !== void 0, b = l.length > 0, R = c || b ? Ca(l, e.formulas) : void 0, M = s ? ha(e.computedFields) : void 0, A = f ? e.formulaFunctions ?? {} : void 0, N = !!(b || c || s || f);
+  if (!o && !N)
     return a ? {
       ...a
     } : void 0;
-  if (!$) {
+  if (!N) {
     if (o && !a)
       return o;
     if (!o && a)
@@ -4229,7 +4275,7 @@ function ja(e) {
     ...a?.formulaColumnCacheMaxColumns !== void 0 ? { formulaColumnCacheMaxColumns: a.formulaColumnCacheMaxColumns } : {}
   };
 }
-const Ca = "comfortable", Ra = {
+const Ra = "comfortable", Sa = {
   comfortable: {
     toolbarGap: 10,
     workspaceGap: 12
@@ -4239,25 +4285,25 @@ const Ca = "comfortable", Ra = {
     workspaceGap: 8
   }
 };
-function Sa(e) {
-  return e === "compact" ? "compact" : Ca;
-}
 function pa(e) {
+  return e === "compact" ? "compact" : Ra;
+}
+function Ia(e) {
   return e === "integrated" || e === "hidden" || e === "stacked" ? e : "stacked";
 }
 function Ll(e, o) {
   return Number.isFinite(e) ? Math.max(0, e) : o;
 }
-function Ga(e) {
-  const o = typeof e == "object" && e !== null ? e : null, a = Sa(typeof e == "string" ? e : o?.density), l = Ra[a];
+function Ka(e) {
+  const o = typeof e == "object" && e !== null ? e : null, a = pa(typeof e == "string" ? e : o?.density), l = Sa[a];
   return {
     density: a,
-    toolbarPlacement: pa(o?.toolbarPlacement),
+    toolbarPlacement: Ia(o?.toolbarPlacement),
     toolbarGap: Ll(o?.toolbarGap, l.toolbarGap),
     workspaceGap: Ll(o?.workspaceGap, l.workspaceGap)
   };
 }
-function Ka(e) {
+function La(e) {
   return typeof e == "boolean" ? {
     enabled: e
   } : e ? {
@@ -4266,7 +4312,7 @@ function Ka(e) {
     enabled: !1
   };
 }
-function La(e) {
+function $a(e) {
   return typeof e == "boolean" ? {
     enabled: e
   } : e ? {
@@ -4279,7 +4325,7 @@ function $l() {
   const e = globalThis.performance;
   return e && typeof e.now == "function" ? e.now() : Date.now();
 }
-const Ia = (e, o) => {
+const xa = (e, o) => {
   const a = $l();
   return {
     result: o(),
@@ -4288,11 +4334,11 @@ const Ia = (e, o) => {
 };
 function Nl(e) {
   return {
-    projectionStageTimer: Ia,
+    projectionStageTimer: xa,
     ...e ?? {}
   };
 }
-function $a(e) {
+function Na(e) {
   const o = ee(0), a = tl(), l = al(
     e.rowModel.value ? null : tl({
       rows: e.rows.value,
@@ -4344,18 +4390,18 @@ function $a(e) {
   };
 }
 export {
-  Pa as D,
+  Va as D,
   Tl as a,
-  Ka as b,
-  ja as c,
-  La as d,
+  La as b,
+  Ga as c,
+  $a as d,
   Tr as e,
   Wr as f,
-  za as g,
-  _a as h,
-  Ha as i,
-  Ba as j,
-  Va as k,
-  Ga as r,
-  $a as u
+  _a as g,
+  Ha as h,
+  Pa as i,
+  ja as j,
+  Ba as k,
+  Ka as r,
+  Na as u
 };