@ai-matrx/design-system 0.39.2 → 0.39.4

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## 0.39.4
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/design-system/v0.39.3..npm/design-system/v0.39.4 -- apps/shared/design-system`).
+No source changes intended and no consumer action required.
+
+## 0.39.3
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/design-system/v0.39.2..npm/design-system/v0.39.3 -- apps/shared/design-system`).
+No source changes intended and no consumer action required.
+
+## Unreleased
+
+### Lane UI-FIX-19 (2026-09-24)
+
+* **A row's colour wins at every width.** `MatrxDataTable` decides a row's background once, in
+  `row-background.ts` (`rowBackground`), for the row and its frozen cells alike: colour tint, then
+  keyboard highlight / open row / ticked row, then the zebra stripe, then the card. The stripe was
+  `sm:bg-muted/20` and the tint a bare `bg-*`; tailwind-merge keeps both, and at ≥640px the stripe
+  won the cascade, so every other coloured row went plain on a desktop (VERIFIER-19 #5). Under a
+  tint no stripe, selection wash or hover wash is emitted; the keyboard's ring stays. Suite
+  `MatrxDataTable.tint-beats-zebra.test.tsx`: RED on the prior bytes ("row 2 (Quoting) stripe:
+  sm:bg-muted/20"), GREEN 3/3. No consumer action.
+
 ## 0.39.2
 
 Automatic changed-only republish (docs/metadata drift since the last tag — see

package/dist/data-table/copy-helpers.d.cts

@@ -1,5 +1,5 @@
 import { AgentPayloadInput } from './copy-types.cjs';
-import { g as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../types-Bq-K6JWF.cjs';
+import { g as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../types-D7O3uOIs.cjs';
 import '../content-transfer.cjs';
 import 'react';
 import '@ai-matrx/kit/content-transfer';

package/dist/data-table/copy-helpers.d.ts

@@ -1,5 +1,5 @@
 import { AgentPayloadInput } from './copy-types.js';
-import { g as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../types-CM9oqzia.js';
+import { g as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../types-p13OrDj-.js';
 import '../content-transfer.js';
 import 'react';
 import '@ai-matrx/kit/content-transfer';

package/dist/data-table/filter-engine.d.cts

@@ -1,4 +1,4 @@
-import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../types-Bq-K6JWF.cjs';
+import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../types-D7O3uOIs.cjs';
 import '../content-transfer.cjs';
 import 'react';
 import '@ai-matrx/kit/content-transfer';

package/dist/data-table/filter-engine.d.ts

@@ -1,4 +1,4 @@
-import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../types-CM9oqzia.js';
+import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../types-p13OrDj-.js';
 import '../content-transfer.js';
 import 'react';
 import '@ai-matrx/kit/content-transfer';

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ComponentType, ReactNode, MouseEventHandler } from 'react';
 import { CopyControlProps } from './copy-types.cjs';
 export { AgentPayloadInput, AiCustomSource, AiVariant, CopyExportConfig } from './copy-types.cjs';
-import { b as TableSavedViewsProps, c as MatrxDataTableDensity, d as MatrxDataTableRecordControls } from '../types-Bq-K6JWF.cjs';
+import { b as TableSavedViewsProps, c as MatrxDataTableDensity, d as MatrxDataTableRecordControls } from '../types-D7O3uOIs.cjs';
 import { MatrxTableMenuTarget, MatrxTableMenuPayload } from './menu-targets.cjs';
 import '../content-transfer.cjs';
 import '@ai-matrx/kit/content-transfer';

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ComponentType, ReactNode, MouseEventHandler } from 'react';
 import { CopyControlProps } from './copy-types.js';
 export { AgentPayloadInput, AiCustomSource, AiVariant, CopyExportConfig } from './copy-types.js';
-import { b as TableSavedViewsProps, c as MatrxDataTableDensity, d as MatrxDataTableRecordControls } from '../types-CM9oqzia.js';
+import { b as TableSavedViewsProps, c as MatrxDataTableDensity, d as MatrxDataTableRecordControls } from '../types-p13OrDj-.js';
 import { MatrxTableMenuTarget, MatrxTableMenuPayload } from './menu-targets.js';
 import '../content-transfer.js';
 import '@ai-matrx/kit/content-transfer';

package/dist/data-table/index.cjs

@@ -10194,6 +10194,40 @@ var FROZEN_CELL_TINT_CLASS = {
 };
 var FROZEN_EDGE_CLASS = "sm:shadow-[inset_-1px_0_0_var(--border)]";
 
+// src/data-table/row-background.ts
+function rowBackground(state) {
+  const ring = state.highlighted ? " ring-1 ring-inset ring-primary/60" : "";
+  if (state.tint) {
+    return {
+      row: ROW_TINT_CLASS[state.tint] + ring,
+      frozen: FROZEN_ROW_TINT_CLASS[state.tint],
+      frozenHover: false
+    };
+  }
+  const hover = state.hoverable ? "sm:hover:bg-muted/50" : "";
+  if (state.highlighted) {
+    return { row: `bg-muted${ring} ${hover}`.trim(), frozen: "sm:bg-muted", frozenHover: state.hoverable };
+  }
+  if (state.selected) {
+    return { row: `bg-muted ${hover}`.trim(), frozen: "sm:bg-muted", frozenHover: state.hoverable };
+  }
+  if (state.checked) {
+    return {
+      row: `bg-primary/5 ${hover}`.trim(),
+      frozen: "sm:bg-[color-mix(in_oklab,var(--color-primary)_5%,var(--color-card))]",
+      frozenHover: state.hoverable
+    };
+  }
+  if (state.zebraOdd) {
+    return {
+      row: `sm:bg-muted/20 ${hover}`.trim(),
+      frozen: "sm:bg-[color-mix(in_oklab,var(--color-muted)_20%,var(--color-card))]",
+      frozenHover: state.hoverable
+    };
+  }
+  return { row: hover, frozen: "sm:bg-card", frozenHover: state.hoverable };
+}
+
 // src/field-formats/registry.ts
 var import_format3 = require("@ai-matrx/kit/format");
 function formatSignedDuration(totalSeconds) {
@@ -12306,7 +12340,9 @@ function MatrxDataTableCore({
   const remoteQuery = query?.mode === "controlled" || query?.mode === "controlled-append" ? query : null;
   const sourceProcessing = query?.mode === "controlled" || query?.mode === "controlled-local" ? query.sourceProcessing : appendQuery?.sourceProcessing;
   const appendUsesLocalProcessing = appendQuery !== null && sourceProcessing !== void 0;
-  const sourceOwnsColumnFilters = appendQuery !== null && sourceProcessing === void 0 ? true : sourceProcessing?.columnFilters === "source";
+  const appendDefaultsToSourceProcessing = appendQuery !== null && sourceProcessing === void 0;
+  const sourceColumnFilterOwnership = sourceProcessing?.columnFilters;
+  const sourceOwnsColumnFilters = appendDefaultsToSourceProcessing ? true : sourceColumnFilterOwnership === "source" || typeof sourceColumnFilterOwnership === "object" && sourceColumnFilterOwnership.source.length > 0;
   const sourceOwnsSort = appendQuery !== null && sourceProcessing === void 0 ? true : sourceProcessing?.sort === "source";
   const sourceOwnsIntelligentSearch = sourceProcessing?.intelligentSearch === "source";
   const sourceOwnsSearch = remoteQuery?.mode === "controlled" || appendQuery !== null && sourceProcessing === void 0 || sourceProcessing?.search === "source" || sourceOwnsIntelligentSearch;
@@ -12379,6 +12415,17 @@ function MatrxDataTableCore({
   };
   const [internalColumnFilters, setInternalColumnFilters] = (0, import_react21.useState)({});
   const columnFilters = controlledQuery ? controlledQuery.state.columnFilters : internalColumnFilters;
+  const localColumnFilters = (0, import_react21.useMemo)(() => {
+    if (appendDefaultsToSourceProcessing) return {};
+    if (sourceColumnFilterOwnership === "source") return {};
+    if (sourceColumnFilterOwnership === void 0 || sourceColumnFilterOwnership === "local") {
+      return columnFilters;
+    }
+    const sourceColumnIds = new Set(sourceColumnFilterOwnership.source);
+    return Object.fromEntries(
+      Object.entries(columnFilters).filter(([columnId2]) => !sourceColumnIds.has(columnId2))
+    );
+  }, [appendDefaultsToSourceProcessing, columnFilters, sourceColumnFilterOwnership]);
   const setColumnFilter = (id, next) => {
     const nextFilters = { ...columnFilters, [id]: next };
     if (controlledQuery) {
@@ -12892,10 +12939,6 @@ function MatrxDataTableCore({
       tableStyle.choiceColorFor ?? noChoiceColor
     );
   };
-  const rowTintClass = (row, id) => {
-    const color = rowTintColor(row, id);
-    return color ? ROW_TINT_CLASS[color] : void 0;
-  };
   const cellTintColor = (row, id, colId) => {
     if (!tableStyle) return null;
     return resolveCellColor(
@@ -12978,14 +13021,14 @@ function MatrxDataTableCore({
         ...intelligentSearchEnabled ? { searchScope } : {},
         anyOf: anyOfValue,
         layeredFilters,
-        columnFilters,
+        columnFilters: localColumnFilters,
         sort
       });
     }
     const locallyFiltered = filterAndSortRows(
       data,
       intelligentSearchEnabled ? columns : visibleColumns,
-      sourceOwnsColumnFilters ? {} : columnFilters,
+      localColumnFilters,
       sourceOwnsSort ? null : sort,
       "",
       // Global matching and identity ranking run once across all loaded fields below.
@@ -13010,7 +13053,7 @@ function MatrxDataTableCore({
   }, [
     data,
     visibleColumns,
-    columnFilters,
+    localColumnFilters,
     sort,
     searchValue,
     toolbar,
@@ -13966,6 +14009,7 @@ function MatrxDataTableCore({
     );
   }, [host.rowContextRegistry, tableContextMenuInstanceId]);
   const showActionsCol = windowEnabled || Boolean(rowActions) || showInlineRowCopy;
+  const getSelectionId = selection?.getSelectionId ?? getRowId;
   const selectedIdSet = (0, import_react21.useMemo)(
     () => new Set(selection?.selectedIds ?? []),
     [selection?.selectedIds]
@@ -13974,14 +14018,19 @@ function MatrxDataTableCore({
     (row) => selection?.isRowSelectable?.(row) ?? true
   );
   const selectedOnPage = selectableRows.filter(
-    (row) => selectedIdSet.has(getRowId(row))
+    (row) => selectedIdSet.has(getSelectionId(row))
   );
   const allOnPageSelected = selectableRows.length > 0 && selectedOnPage.length === selectableRows.length;
   const someOnPageSelected = selectedOnPage.length > 0 && !allOnPageSelected;
-  const selectedRows = (0, import_react21.useMemo)(
-    () => data.filter((row) => selectedIdSet.has(getRowId(row))),
-    [data, selectedIdSet, getRowId]
-  );
+  const selectedRows = (0, import_react21.useMemo)(() => {
+    const resolved = /* @__PURE__ */ new Set();
+    return data.filter((row) => {
+      const id = getSelectionId(row);
+      if (!selectedIdSet.has(id) || resolved.has(id)) return false;
+      resolved.add(id);
+      return true;
+    });
+  }, [data, getSelectionId, selectedIdSet]);
   const lastToggledIndex = (0, import_react21.useRef)(null);
   const setSelectedIds = (next) => selection?.onSelectedIdsChange([...next]);
   const toggleRowSelected = (index, shiftKey) => {
@@ -13989,7 +14038,7 @@ function MatrxDataTableCore({
     if (!paginated[index]) return;
     const { next, anchor } = toggleSelection({
       order: paginated,
-      idOf: getRowId,
+      idOf: getSelectionId,
       selected: selectedIdSet,
       index,
       anchor: lastToggledIndex.current,
@@ -14003,7 +14052,7 @@ function MatrxDataTableCore({
     if (!selection) return;
     const next = new Set(selectedIdSet);
     for (const row of selectableRows) {
-      const id = getRowId(row);
+      const id = getSelectionId(row);
       if (allOnPageSelected) next.delete(id);
       else next.add(id);
     }
@@ -14011,7 +14060,7 @@ function MatrxDataTableCore({
     setSelectedIds(next);
   };
   const selectionNoun = selection?.noun ?? "row";
-  const selectionCount = selection?.selectedIds.length ?? 0;
+  const selectionCount = selectedIdSet.size;
   const leadingCols = selection ? 1 : 0;
   const renderedColSpan = renderedColumns.length + leadingCols + (showActionsCol ? 1 : 0) + (columnSpacers ? (columnSpacers.start > 0 ? 1 : 0) + (columnSpacers.end > 0 ? 1 : 0) : 0);
   const renderedFacets = controlledQuery ? toolbar?.facets?.map(
@@ -14613,15 +14662,16 @@ function MatrxDataTableCore({
                               const column = columns.find((candidate) => columnId(candidate) === columnKey);
                               return column ? renderRecordCell(row, column, index) : null;
                             },
-                            selected: selectedIdSet.has(id),
+                            selected: selectedIdSet.has(getSelectionId(row)),
                             selectable,
                             onSelectedChange: (nextSelected) => {
-                              if (!selection || !selectable || nextSelected === selectedIdSet.has(id)) {
+                              if (!selection || !selectable || nextSelected === selectedIdSet.has(getSelectionId(row))) {
                                 return;
                               }
                               const next = new Set(selectedIdSet);
-                              if (nextSelected) next.add(id);
-                              else next.delete(id);
+                              const selectionId = getSelectionId(row);
+                              if (nextSelected) next.add(selectionId);
+                              else next.delete(selectionId);
                               setSelectedIds(next);
                             },
                             actions: showInlineRowCopy || rowActions ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
@@ -15025,10 +15075,17 @@ function MatrxDataTableCore({
                                   const rowEdits = edits[id];
                                   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 isChecked = selectedIdSet.has(getSelectionId(row));
+                                  const background = rowBackground({
+                                    tint: rowTintColor(row, id),
+                                    highlighted: highlightedIndex === index,
+                                    selected: isSelected,
+                                    checked: isChecked,
+                                    zebraOdd: zebra && index % 2 === 1,
+                                    hoverable: detailEnabled || Boolean(onRowOpen) || canExpandRow(row)
+                                  });
+                                  const canHoverFrozenCell = background.frozenHover;
+                                  const frozenRowBackgroundClass = background.frozen;
                                   const rowNode = /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                                     "tr",
                                     {
@@ -15057,19 +15114,13 @@ function MatrxDataTableCore({
                                         // horizontally. The translucent zebra/hover tints remain
                                         // desktop-only so densely layered mobile content stays crisp.
                                         "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",
-                                        highlightedIndex === index && "bg-muted ring-1 ring-inset ring-primary/60",
+                                        (detailEnabled || Boolean(onRowOpen) || canExpandRow(row)) && "cursor-pointer",
                                         rowClassName?.(row, index),
                                         draggedRowId === id && "opacity-40",
-                                        zebra && index % 2 === 1 && !isSelected && !isChecked && "sm:bg-muted/20",
-                                        // LAST so a colored row STAYS colored while selected
-                                        // and on an odd zebra stripe — `cn` is tailwind-merge
-                                        // and keeps the last background of a group. The
-                                        // checkbox already says the row is selected; the tint
-                                        // is the only thing saying WHY the row matters.
-                                        rowTintClass(row, id)
+                                        // LAST, and decided once: tint, then highlight / open / ticked, then
+                                        // the zebra stripe (./row-background.ts). Under a tint no stripe is
+                                        // emitted at all, so no `sm:` class can win the cascade over it.
+                                        background.row
                                       ),
                                       children: [
                                         selection ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
@@ -15494,7 +15545,7 @@ function MatrxDataTableCore({
                                     new Date(appendQuery.pagination.sourceUntil).toLocaleString(),
                                     "."
                                   ] }) : null,
-                                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { children: !isLoading && !isFetching && !appendQuery.pagination.loadAll?.isLoading && !scrollPagination.error && !appendQuery.pagination.hasNextPage && appendQuery.pagination.totalItems !== void 0 && data.length === appendQuery.pagination.totalItems ? "All source rows are loaded." : appendUsesLocalProcessing ? "Local search and filters cover loaded rows." : "Source paging is active." })
+                                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { children: !isLoading && !isFetching && !appendQuery.pagination.loadAll?.isLoading && !scrollPagination.error && !appendQuery.pagination.hasNextPage && appendQuery.pagination.totalItems !== void 0 && data.length === appendQuery.pagination.totalItems ? "All source rows are loaded." : appendUsesLocalProcessing ? sourceOwnsColumnFilters ? "Local processing covers loaded rows; source-owned column filters are applied by the source." : "Local search and filters cover loaded rows." : "Source paging is active." })
                                 ] })
                               ] }) : null,
                               scrollPagination.error ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { role: "alert", className: "text-destructive", children: scrollPagination.error.message }) : null,
@@ -15656,7 +15707,7 @@ function MatrxDataTableCore({
                             }
                           }
                         ) : null,
-                        selection.actions?.(selectedRows, selection.selectedIds)
+                        selection.actions?.(selectedRows, [...selectedIdSet])
                       ] })
                     ]
                   }