@ai-matrx/design-system 0.32.0 → 0.35.0

package/dist/data-table/index.d.cts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
-import { h as MatrxDataTableProps, i as TableViewSnapshot, d as MatrxDataTableRecordControls, j as ColumnMarker, M as MatrxColumnDef } from '../types-CYkwg9jR.cjs';
-export { A as AnyOfColumnSearch, B as BOOLEAN_TRUE_COLOR, k as CELL_TINT_CLASS, l as COLOR_RULE_OPS, m as COLOR_RULE_OP_LABELS, n as CellEditType, o as CellEditsMap, p as ChoiceColorLookup, q as ColorBy, r as ColorRule, s as ColorRuleOp, f as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, E as EMPTY_TABLE_STYLE, t as MatrxDataTableContextMenuConfig, g as MatrxDataTableCopyConfig, u as MatrxDataTableCoverageConfig, c as MatrxDataTableDensity, v as MatrxDataTableDetailConfig, w as MatrxDataTableEditConfig, x as MatrxDataTableEmptyState, y as MatrxDataTableExpandedDetailConfig, z as MatrxDataTableFacetsConfig, D as MatrxDataTableFilterUi, F as MatrxDataTableGroupingConfig, G as MatrxDataTableHierarchyConfig, H as MatrxDataTableHierarchyMove, I as MatrxDataTableMobileCardControls, J as MatrxDataTableQueryControl, e as MatrxDataTableQueryState, K as MatrxDataTableSelectionConfig, N as MatrxDataTableSourceProcessing, O as MatrxDataTableSpreadsheetConfig, P as MatrxDataTableStyleConfig, Q as MatrxDataTableToolbar, R as MatrxDataTableUrlStateConfig, U as MatrxDataTableVirtualizeConfig, V as MatrxDataTableWindowConfig, W as MatrxTablePagination, X as OPS_WITH_VALUE, Y as ROW_TINT_CLASS, Z as STYLE_COLORS, _ as STYLE_COLOR_LABELS, $ as SWATCH_CLASS, a0 as SortDirection, S as SortState, a1 as StyleColor, a2 as StylePath, a3 as StyleTarget, a4 as TABLE_STYLE_METADATA_KEY, a5 as TABLE_STYLE_VERSION, a6 as TableRankedSearchOptions, b as TableSavedViewsProps, T as TableSearchMatchMode, a7 as TableSearchRole, a8 as TableSearchScope, a9 as TableStyle, aa as TableViewQuery, ab as TextFilterMode, ac as ToolbarFacet, ad as applyStylePath, ae as colorForChoice, af as evaluateRule, ag as inferTableSearchRole, ah as isStyleColor, ai as parseTableStyle, aj as rankTableSearchRows, ak as resolveCellColor, al as resolveRowColor, am as resolveTableSearchScopes, an as stylePath, ao as tableStyleFromMetadata, ap as tableStyleIsEmpty } from '../types-CYkwg9jR.cjs';
+import { h as MatrxDataTableProps, i as TableViewSnapshot, d as MatrxDataTableRecordControls, j as ColumnMarker, M as MatrxColumnDef } from '../types-kiV-CAuZ.cjs';
+export { A as AnyOfColumnSearch, B as BOOLEAN_TRUE_COLOR, k as CELL_TINT_CLASS, l as COLOR_RULE_OPS, m as COLOR_RULE_OP_LABELS, n as CellEditType, o as CellEditsMap, p as ChoiceColorLookup, q as ColorBy, r as ColorRule, s as ColorRuleOp, f as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, E as EMPTY_TABLE_STYLE, t as MatrxDataTableContextMenuConfig, g as MatrxDataTableCopyConfig, u as MatrxDataTableCoverageConfig, c as MatrxDataTableDensity, v as MatrxDataTableDetailConfig, w as MatrxDataTableEditConfig, x as MatrxDataTableEmptyState, y as MatrxDataTableExpandedDetailConfig, z as MatrxDataTableFacetsConfig, D as MatrxDataTableFilterUi, F as MatrxDataTableGroupingConfig, G as MatrxDataTableHierarchyConfig, H as MatrxDataTableHierarchyMove, I as MatrxDataTableMobileCardControls, J as MatrxDataTableMultiExpandedDetailConfig, K as MatrxDataTableQueryControl, e as MatrxDataTableQueryState, N as MatrxDataTableSelectionConfig, O as MatrxDataTableSingleExpandedDetailConfig, P as MatrxDataTableSourceProcessing, Q as MatrxDataTableSpreadsheetConfig, R as MatrxDataTableStyleConfig, U as MatrxDataTableToolbar, V as MatrxDataTableUrlStateConfig, W as MatrxDataTableVirtualizeConfig, X as MatrxDataTableWindowConfig, Y as MatrxTablePagination, Z as OPS_WITH_VALUE, _ as ROW_TINT_CLASS, $ as STYLE_COLORS, a0 as STYLE_COLOR_LABELS, a1 as SWATCH_CLASS, a2 as SortDirection, S as SortState, a3 as StyleColor, a4 as StylePath, a5 as StyleTarget, a6 as TABLE_STYLE_METADATA_KEY, a7 as TABLE_STYLE_VERSION, a8 as TableRankedSearchOptions, b as TableSavedViewsProps, T as TableSearchMatchMode, a9 as TableSearchRole, aa as TableSearchScope, ab as TableStyle, ac as TableViewQuery, ad as TextFilterMode, ae as ToolbarFacet, af as applyStylePath, ag as colorForChoice, ah as evaluateRule, ai as inferTableSearchRole, aj as isStyleColor, ak as parseTableStyle, al as rankTableSearchRows, am as resolveCellColor, an as resolveRowColor, ao as resolveTableSearchScopes, ap as stylePath, aq as tableStyleFromMetadata, ar as tableStyleIsEmpty } from '../types-kiV-CAuZ.cjs';
 export { MatrxDataTableHost, MatrxDataTableProvider, MatrxTableRowAlchemy, TableDoors, TableEntityRefProps, TableLinkProps, TablePeekProps, TableSidePanelProps, TableToolbarActionProps, TableWindowPanelProps, useMatrxDataTableHost, useMatrxTableRowAlchemy } from './host.cjs';
 import { CopyControlProps } from './copy-types.cjs';
 export { AgentPayloadInput } from './copy-types.cjs';

package/dist/data-table/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
-import { h as MatrxDataTableProps, i as TableViewSnapshot, d as MatrxDataTableRecordControls, j as ColumnMarker, M as MatrxColumnDef } from '../types-CFmCZXVn.js';
-export { A as AnyOfColumnSearch, B as BOOLEAN_TRUE_COLOR, k as CELL_TINT_CLASS, l as COLOR_RULE_OPS, m as COLOR_RULE_OP_LABELS, n as CellEditType, o as CellEditsMap, p as ChoiceColorLookup, q as ColorBy, r as ColorRule, s as ColorRuleOp, f as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, E as EMPTY_TABLE_STYLE, t as MatrxDataTableContextMenuConfig, g as MatrxDataTableCopyConfig, u as MatrxDataTableCoverageConfig, c as MatrxDataTableDensity, v as MatrxDataTableDetailConfig, w as MatrxDataTableEditConfig, x as MatrxDataTableEmptyState, y as MatrxDataTableExpandedDetailConfig, z as MatrxDataTableFacetsConfig, D as MatrxDataTableFilterUi, F as MatrxDataTableGroupingConfig, G as MatrxDataTableHierarchyConfig, H as MatrxDataTableHierarchyMove, I as MatrxDataTableMobileCardControls, J as MatrxDataTableQueryControl, e as MatrxDataTableQueryState, K as MatrxDataTableSelectionConfig, N as MatrxDataTableSourceProcessing, O as MatrxDataTableSpreadsheetConfig, P as MatrxDataTableStyleConfig, Q as MatrxDataTableToolbar, R as MatrxDataTableUrlStateConfig, U as MatrxDataTableVirtualizeConfig, V as MatrxDataTableWindowConfig, W as MatrxTablePagination, X as OPS_WITH_VALUE, Y as ROW_TINT_CLASS, Z as STYLE_COLORS, _ as STYLE_COLOR_LABELS, $ as SWATCH_CLASS, a0 as SortDirection, S as SortState, a1 as StyleColor, a2 as StylePath, a3 as StyleTarget, a4 as TABLE_STYLE_METADATA_KEY, a5 as TABLE_STYLE_VERSION, a6 as TableRankedSearchOptions, b as TableSavedViewsProps, T as TableSearchMatchMode, a7 as TableSearchRole, a8 as TableSearchScope, a9 as TableStyle, aa as TableViewQuery, ab as TextFilterMode, ac as ToolbarFacet, ad as applyStylePath, ae as colorForChoice, af as evaluateRule, ag as inferTableSearchRole, ah as isStyleColor, ai as parseTableStyle, aj as rankTableSearchRows, ak as resolveCellColor, al as resolveRowColor, am as resolveTableSearchScopes, an as stylePath, ao as tableStyleFromMetadata, ap as tableStyleIsEmpty } from '../types-CFmCZXVn.js';
+import { h as MatrxDataTableProps, i as TableViewSnapshot, d as MatrxDataTableRecordControls, j as ColumnMarker, M as MatrxColumnDef } from '../types-Cxm5XK0L.js';
+export { A as AnyOfColumnSearch, B as BOOLEAN_TRUE_COLOR, k as CELL_TINT_CLASS, l as COLOR_RULE_OPS, m as COLOR_RULE_OP_LABELS, n as CellEditType, o as CellEditsMap, p as ChoiceColorLookup, q as ColorBy, r as ColorRule, s as ColorRuleOp, f as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, E as EMPTY_TABLE_STYLE, t as MatrxDataTableContextMenuConfig, g as MatrxDataTableCopyConfig, u as MatrxDataTableCoverageConfig, c as MatrxDataTableDensity, v as MatrxDataTableDetailConfig, w as MatrxDataTableEditConfig, x as MatrxDataTableEmptyState, y as MatrxDataTableExpandedDetailConfig, z as MatrxDataTableFacetsConfig, D as MatrxDataTableFilterUi, F as MatrxDataTableGroupingConfig, G as MatrxDataTableHierarchyConfig, H as MatrxDataTableHierarchyMove, I as MatrxDataTableMobileCardControls, J as MatrxDataTableMultiExpandedDetailConfig, K as MatrxDataTableQueryControl, e as MatrxDataTableQueryState, N as MatrxDataTableSelectionConfig, O as MatrxDataTableSingleExpandedDetailConfig, P as MatrxDataTableSourceProcessing, Q as MatrxDataTableSpreadsheetConfig, R as MatrxDataTableStyleConfig, U as MatrxDataTableToolbar, V as MatrxDataTableUrlStateConfig, W as MatrxDataTableVirtualizeConfig, X as MatrxDataTableWindowConfig, Y as MatrxTablePagination, Z as OPS_WITH_VALUE, _ as ROW_TINT_CLASS, $ as STYLE_COLORS, a0 as STYLE_COLOR_LABELS, a1 as SWATCH_CLASS, a2 as SortDirection, S as SortState, a3 as StyleColor, a4 as StylePath, a5 as StyleTarget, a6 as TABLE_STYLE_METADATA_KEY, a7 as TABLE_STYLE_VERSION, a8 as TableRankedSearchOptions, b as TableSavedViewsProps, T as TableSearchMatchMode, a9 as TableSearchRole, aa as TableSearchScope, ab as TableStyle, ac as TableViewQuery, ad as TextFilterMode, ae as ToolbarFacet, af as applyStylePath, ag as colorForChoice, ah as evaluateRule, ai as inferTableSearchRole, aj as isStyleColor, ak as parseTableStyle, al as rankTableSearchRows, am as resolveCellColor, an as resolveRowColor, ao as resolveTableSearchScopes, ap as stylePath, aq as tableStyleFromMetadata, ar as tableStyleIsEmpty } from '../types-Cxm5XK0L.js';
 export { MatrxDataTableHost, MatrxDataTableProvider, MatrxTableRowAlchemy, TableDoors, TableEntityRefProps, TableLinkProps, TablePeekProps, TableSidePanelProps, TableToolbarActionProps, TableWindowPanelProps, useMatrxDataTableHost, useMatrxTableRowAlchemy } from './host.js';
 import { CopyControlProps } from './copy-types.js';
 export { AgentPayloadInput } from './copy-types.js';

package/dist/data-table/index.js

@@ -2494,6 +2494,7 @@ var PopoverContent = React13.forwardRef(
     sideOffset = 4,
     container,
     animated = true,
+    sizing = "fixed",
     ...props
   }, ref) => {
     const portalContainer = usePortalContainer(container);
@@ -2510,7 +2511,8 @@ var PopoverContent = React13.forwardRef(
           // z, DOM portal order decides, so a dialog opened FROM a popover stacks
           // above it, and a popover opened from a dialog still stacks above the
           // dialog. z-[10001] buried dialogs behind fullscreen popovers.
-          "z-[10000] w-72 max-h-[var(--radix-popover-content-available-height)] overflow-y-auto overscroll-contain rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+          "z-[10000] max-h-[var(--radix-popover-content-available-height)] overflow-y-auto overscroll-contain rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+          sizing === "content" ? "w-auto min-w-[min(max(var(--radix-popover-trigger-width),20rem),calc(100vw-2rem))] max-w-[min(28rem,calc(100vw-2rem))]" : "w-72",
           animated && MOTION_POPPER,
           className
         ),
@@ -6218,8 +6220,9 @@ function ColumnHeaderCell({
   const menuContent = /* @__PURE__ */ jsxs22(
     PopoverContent,
     {
+      sizing: "content",
       align: "start",
-      className: "w-64 p-2",
+      className: "p-2",
       onClick: (e) => e.stopPropagation(),
       onOpenAutoFocus: (event) => {
         const content = event.currentTarget;
@@ -10015,8 +10018,26 @@ function pixelWidth(width) {
   }
   return void 0;
 }
-var FROZEN_CELL_CLASS = "sm:sticky sm:left-[var(--matrx-frozen-left)] sm:z-20 sm:bg-inherit";
-var FROZEN_HEADER_CLASS = "sm:sticky sm:left-[var(--matrx-frozen-left)] sm:z-30";
+var FROZEN_CELL_CLASS = "sm:sticky sm:left-[var(--matrx-frozen-left)] sm:z-20 sm:bg-card";
+var FROZEN_HEADER_CLASS = "sm:sticky sm:left-[var(--matrx-frozen-left)] sm:z-30 sm:bg-muted";
+var FROZEN_ROW_TINT_CLASS = {
+  slate: "sm:bg-[color-mix(in_oklab,var(--color-slate-100)_70%,var(--color-card))] dark:sm:bg-[color-mix(in_oklab,var(--color-slate-800)_40%,var(--color-card))]",
+  green: "sm:bg-[color-mix(in_oklab,var(--color-green-50)_100%,var(--color-card))] dark:sm:bg-[color-mix(in_oklab,var(--color-green-950)_40%,var(--color-card))]",
+  amber: "sm:bg-[color-mix(in_oklab,var(--color-amber-50)_100%,var(--color-card))] dark:sm:bg-[color-mix(in_oklab,var(--color-amber-950)_40%,var(--color-card))]",
+  red: "sm:bg-[color-mix(in_oklab,var(--color-red-50)_100%,var(--color-card))] dark:sm:bg-[color-mix(in_oklab,var(--color-red-950)_40%,var(--color-card))]",
+  blue: "sm:bg-[color-mix(in_oklab,var(--color-blue-50)_100%,var(--color-card))] dark:sm:bg-[color-mix(in_oklab,var(--color-blue-950)_40%,var(--color-card))]",
+  violet: "sm:bg-[color-mix(in_oklab,var(--color-violet-50)_100%,var(--color-card))] dark:sm:bg-[color-mix(in_oklab,var(--color-violet-950)_40%,var(--color-card))]",
+  teal: "sm:bg-[color-mix(in_oklab,var(--color-teal-50)_100%,var(--color-card))] dark:sm:bg-[color-mix(in_oklab,var(--color-teal-950)_40%,var(--color-card))]"
+};
+var FROZEN_CELL_TINT_CLASS = {
+  slate: "sm:bg-[color-mix(in_oklab,var(--color-slate-200)_70%,var(--color-card))] dark:sm:bg-[color-mix(in_oklab,var(--color-slate-700)_50%,var(--color-card))]",
+  green: "sm:bg-[color-mix(in_oklab,var(--color-green-100)_100%,var(--color-card))] dark:sm:bg-[color-mix(in_oklab,var(--color-green-900)_50%,var(--color-card))]",
+  amber: "sm:bg-[color-mix(in_oklab,var(--color-amber-100)_100%,var(--color-card))] dark:sm:bg-[color-mix(in_oklab,var(--color-amber-900)_50%,var(--color-card))]",
+  red: "sm:bg-[color-mix(in_oklab,var(--color-red-100)_100%,var(--color-card))] dark:sm:bg-[color-mix(in_oklab,var(--color-red-900)_50%,var(--color-card))]",
+  blue: "sm:bg-[color-mix(in_oklab,var(--color-blue-100)_100%,var(--color-card))] dark:sm:bg-[color-mix(in_oklab,var(--color-blue-900)_50%,var(--color-card))]",
+  violet: "sm:bg-[color-mix(in_oklab,var(--color-violet-100)_100%,var(--color-card))] dark:sm:bg-[color-mix(in_oklab,var(--color-violet-900)_50%,var(--color-card))]",
+  teal: "sm:bg-[color-mix(in_oklab,var(--color-teal-100)_100%,var(--color-card))] dark:sm:bg-[color-mix(in_oklab,var(--color-teal-900)_50%,var(--color-card))]"
+};
 var FROZEN_EDGE_CLASS = "sm:shadow-[inset_-1px_0_0_var(--border)]";
 
 // src/field-formats/registry.ts
@@ -10912,8 +10933,9 @@ function EditableTableCell({
     /* @__PURE__ */ jsxs29(
       PopoverContent,
       {
+        sizing: "content",
         align: "start",
-        className: "w-56 p-2",
+        className: "p-2",
         onClick: (e) => e.stopPropagation(),
         children: [
           /* @__PURE__ */ jsx39(
@@ -12684,23 +12706,29 @@ function MatrxDataTableCore({
   const styleFieldOf = tableStyle?.fieldOf ?? ((id) => id);
   const styleDocumentOf = tableStyle?.documentOf ?? ((row) => row);
   const noChoiceColor = () => void 0;
-  const rowTintClass = (row, id) => {
-    if (!tableStyle) return void 0;
-    const color = resolveRowColor(
+  const rowTintColor = (row, id) => {
+    if (!tableStyle) return null;
+    return resolveRowColor(
       tableStyle.style,
       { id, data: styleDocumentOf(row) },
       tableStyle.choiceColorFor ?? noChoiceColor
     );
+  };
+  const rowTintClass = (row, id) => {
+    const color = rowTintColor(row, id);
     return color ? ROW_TINT_CLASS[color] : void 0;
   };
-  const cellTintClass = (row, id, colId) => {
-    if (!tableStyle) return void 0;
-    const color = resolveCellColor(
+  const cellTintColor = (row, id, colId) => {
+    if (!tableStyle) return null;
+    return resolveCellColor(
       tableStyle.style,
       { id, data: styleDocumentOf(row) },
       styleFieldOf(colId),
       tableStyle.choiceColorFor ?? noChoiceColor
     );
+  };
+  const cellTintClass = (row, id, colId) => {
+    const color = cellTintColor(row, id, colId);
     return color ? CELL_TINT_CLASS[color] : void 0;
   };
   const declaredVisibleCopyColumns = useMemo8(
@@ -13069,14 +13097,14 @@ function MatrxDataTableCore({
   const coverageResult = useMemo8(() => {
     if (!coverage) return null;
     return describeCoverage({
-      loaded: processed.length,
+      loaded: data.length,
       ...coverage.matched === void 0 ? {} : { matched: coverage.matched },
       ...coverage.total === void 0 ? {} : { total: coverage.total },
       ...coverage.cap === void 0 ? {} : { cap: coverage.cap },
       answeredBy: coverage.answeredBy ?? "client",
       ...coverage.noun === void 0 ? {} : { noun: coverage.noun }
     });
-  }, [coverage, processed.length]);
+  }, [coverage, data.length]);
   const bodyEntries = useMemo8(() => {
     const from = effectiveRowWindow ? effectiveRowWindow.start : 0;
     const to = effectiveRowWindow ? effectiveRowWindow.end : void 0;
@@ -13297,13 +13325,26 @@ function MatrxDataTableCore({
     setWindowRowSnapshot(null);
   };
   const canExpandRow = (row) => Boolean(expandedDetail && (expandedDetail.canExpand?.(row) ?? true));
-  const isRowExpanded = (row) => canExpandRow(row) && expandedDetail?.expandedId === getRowId(row);
+  const isMultiExpandedDetail = (detail2) => "expandedIds" in detail2;
+  const isRowExpanded = (row) => {
+    if (!expandedDetail || !canExpandRow(row)) return false;
+    const id = getRowId(row);
+    return isMultiExpandedDetail(expandedDetail) ? expandedDetail.expandedIds.has(id) : expandedDetail.expandedId === id;
+  };
   const toggleExpanded = (row) => {
     if (!expandedDetail || !canExpandRow(row)) return;
     const id = getRowId(row);
-    expandedDetail.onExpandedIdChange(
-      expandedDetail.expandedId === id ? null : id
-    );
+    if (isMultiExpandedDetail(expandedDetail)) {
+      const nextExpandedIds = new Set(expandedDetail.expandedIds);
+      if (nextExpandedIds.has(id)) {
+        nextExpandedIds.delete(id);
+      } else {
+        nextExpandedIds.add(id);
+      }
+      expandedDetail.onExpandedIdsChange(nextExpandedIds);
+      return;
+    }
+    expandedDetail.onExpandedIdChange(expandedDetail.expandedId === id ? null : id);
   };
   const openRow = (row) => {
     if (canExpandRow(row)) {
@@ -14341,6 +14382,19 @@ function MatrxDataTableCore({
                 }
               ),
               /* @__PURE__ */ jsxs32("div", { "data-matrx-table-body-region": true, className: "flex min-h-0 flex-1 flex-col gap-2", children: [
+                coverageResult && coverageResult.notice ? /* @__PURE__ */ jsxs32(
+                  "div",
+                  {
+                    "data-matrx-table-coverage": true,
+                    "data-matrx-table-coverage-scope": coverageResult.scope,
+                    role: "status",
+                    className: "flex shrink-0 items-start gap-2 rounded-md border border-amber-300/70 bg-amber-50 px-3 py-2 text-xs text-amber-900 dark:border-amber-500/40 dark:bg-amber-950/40 dark:text-amber-200",
+                    children: [
+                      /* @__PURE__ */ jsx42("span", { className: "font-semibold", children: coverageResult.badge }),
+                      /* @__PURE__ */ jsx42("span", { children: coverageResult.notice })
+                    ]
+                  }
+                ) : null,
                 /* @__PURE__ */ jsxs32("div", { className: "relative min-h-0 flex-1", children: [
                   mobileCards ? /* @__PURE__ */ jsxs32(
                     "div",
@@ -14447,19 +14501,6 @@ function MatrxDataTableCore({
                       ]
                     }
                   ) : null,
-                  coverageResult && coverageResult.notice ? /* @__PURE__ */ jsxs32(
-                    "div",
-                    {
-                      "data-matrx-table-coverage": true,
-                      "data-matrx-table-coverage-scope": coverageResult.scope,
-                      role: "status",
-                      className: "mb-1 flex items-start gap-2 rounded-md border border-amber-300/70 bg-amber-50 px-3 py-2 text-xs text-amber-900 dark:border-amber-500/40 dark:bg-amber-950/40 dark:text-amber-200",
-                      children: [
-                        /* @__PURE__ */ jsx42("span", { className: "font-semibold", children: coverageResult.badge }),
-                        /* @__PURE__ */ jsx42("span", { children: coverageResult.notice })
-                      ]
-                    }
-                  ) : null,
                   /* @__PURE__ */ jsxs32(
                     "div",
                     {
@@ -14546,7 +14587,10 @@ function MatrxDataTableCore({
                                       "th",
                                       {
                                         "data-matrx-table-selection-column": true,
-                                        className: "h-9 w-9 px-2 text-left align-middle",
+                                        className: cn(
+                                          "h-9 w-9 px-2 text-left align-middle",
+                                          frozenColumns.selectionOffset !== null && "sm:sticky sm:left-0 sm:z-30 sm:bg-muted"
+                                        ),
                                         style: fixedUtilityWidth(fixedTableGeometry?.selectionWidth),
                                         children: /* @__PURE__ */ jsx42(
                                           "div",
@@ -14808,6 +14852,9 @@ function MatrxDataTableCore({
                                   const displayRow = applyRowEdits(row, rowEdits);
                                   const controls = buildRecordControls(displayRow);
                                   const isChecked = selectedIdSet.has(id);
+                                  const rowTint = rowTintColor(row, id);
+                                  const canHoverFrozenCell = !rowTint && (detailEnabled || Boolean(onRowOpen) || canExpandRow(row));
+                                  const frozenRowBackgroundClass = rowTint ? FROZEN_ROW_TINT_CLASS[rowTint] : highlightedIndex === index || isSelected ? "sm:bg-muted" : isChecked ? "sm:bg-[color-mix(in_oklab,var(--color-primary)_5%,var(--color-card))]" : zebra && index % 2 === 1 ? "sm:bg-[color-mix(in_oklab,var(--color-muted)_20%,var(--color-card))]" : "sm:bg-card";
                                   const rowNode = /* @__PURE__ */ jsxs32(
                                     "tr",
                                     {
@@ -14835,7 +14882,7 @@ function MatrxDataTableCore({
                                         // Keep the mobile row opaque while the complete row scrolls
                                         // horizontally. The translucent zebra/hover tints remain
                                         // desktop-only so densely layered mobile content stays crisp.
-                                        "border-b border-border/60 bg-card transition-colors",
+                                        "group/matrx-row border-b border-border/60 bg-card transition-colors",
                                         (detailEnabled || Boolean(onRowOpen) || canExpandRow(row)) && "cursor-pointer sm:hover:bg-muted/50",
                                         isSelected && "bg-muted",
                                         isChecked && "bg-primary/5",
@@ -14859,7 +14906,11 @@ function MatrxDataTableCore({
                                               // When a data column is frozen the checkbox
                                               // column has to freeze with it, or the first
                                               // frozen column slides over the checkboxes.
-                                              frozenColumns.selectionOffset !== null && "sm:sticky sm:left-0 sm:z-20 sm:bg-inherit"
+                                              frozenColumns.selectionOffset !== null && cn(
+                                                "sm:sticky sm:left-0 sm:z-20",
+                                                frozenRowBackgroundClass,
+                                                canHoverFrozenCell && "sm:group-hover/matrx-row:bg-[color-mix(in_oklab,var(--color-muted)_50%,var(--color-card))]"
+                                              )
                                             ),
                                             style: fixedUtilityWidth(fixedTableGeometry?.selectionWidth),
                                             onClick: (e) => e.stopPropagation(),
@@ -14899,6 +14950,12 @@ function MatrxDataTableCore({
                                           const isColumnDragShadow = columnDragPreview?.draggedId === columnId(col) && columnDragPreview.targetId !== null;
                                           const sheetCell = spreadsheetEnabled ? sheet.cellProps(id, columnId(col)) : null;
                                           const carriesFillHandle = sheetCell !== null && sheet.isFillHandleCell(id, columnId(col));
+                                          const frozen = frozenColumns.offsets[columnId(col)] !== void 0;
+                                          const frozenCellTint = cellTintColor(
+                                            row,
+                                            id,
+                                            columnId(col)
+                                          );
                                           return /* @__PURE__ */ jsxs32(
                                             "td",
                                             {
@@ -14929,12 +14986,16 @@ function MatrxDataTableCore({
                                                 isColumnDragShadow && "bg-primary/10 shadow-[inset_2px_0_0_var(--primary),inset_-2px_0_0_var(--primary)]",
                                                 alignForFormat(col) === "center" && "text-center",
                                                 alignForFormat(col) === "right" && "text-right",
-                                                frozenColumns.offsets[columnId(col)] !== void 0 && FROZEN_CELL_CLASS,
+                                                frozen && FROZEN_CELL_CLASS,
+                                                frozen && frozenRowBackgroundClass,
+                                                frozen && sheetCell?.["data-matrx-cell-selected"] && "sm:bg-[color-mix(in_oklab,var(--color-primary)_10%,var(--color-card))]",
+                                                frozen && canHoverFrozenCell && "sm:group-hover/matrx-row:bg-[color-mix(in_oklab,var(--color-muted)_50%,var(--color-card))]",
                                                 frozenEdgeId === columnId(col) && FROZEN_EDGE_CLASS,
                                                 // A cell tint paints OVER the row tint beneath
                                                 // it, and the consumer's own hook comes last so
                                                 // it can always win.
                                                 cellTintClass(row, id, columnId(col)),
+                                                frozen && frozenCellTint && FROZEN_CELL_TINT_CLASS[frozenCellTint],
                                                 cellClassName?.(row, columnId(col), index)
                                               ),
                                               style: {