@ai-matrx/design-system 0.32.0 → 0.34.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # Changelog
 
+## 0.34.0 — 2026-09-21
+
+**The release gate was red on main, and the red was a stale expectation.**
+
+0.33.0's tag could not publish: `default-copy-regressions.test.tsx` required a
+JSON-`null` cell to copy as the literal word `null` in HTML and CSV, and
+`@ai-matrx/kit` 0.16.1 had just stopped doing that on purpose — a host
+normalises a missing cell to `null` so the row keeps its shape, and a row
+copied out of this very table arrived in Sheets carrying `null` as TEXT in its
+empty columns (observed live 2026-09-15). The same test's workbook leg had
+always expected an empty cell, so it was asserting two answers for one value.
+Both clauses now expect empty, with a clause that no copied cell may contain
+the word again. No product code changed in this release beyond 0.33.0's
+contents.
+
+## 0.33.0 — 2026-09-21
+
+**The organization picker stops negating the matches one click below it, and a
+frozen column stops showing the rows sliding under it.**
+
+- `OrganizationPicker` — when every match for a search is a test organization,
+  the picker used to say *"Nothing matches “X” outside the test organizations
+  below."* `isTestFixture` rows are query-filtered, so those rows below **are**
+  matches for X: the sentence opened by denying the thing sitting one click
+  away, and a person who reads "nothing matches" retypes their search instead
+  of clicking. It now says what is true and carries the click that reveals
+  them — *"1 match for “vis” is in your test organizations — show them"* — and
+  reads "listed below" once open. Two clauses in
+  `src/organization-picker.test.tsx` hold the wording.
+- `MatrxDataTable` frozen columns are painted **opaque**, with the paint taken
+  from the semantic surface tokens rather than a literal colour, so a frozen
+  column matches its theme instead of being a hardcoded swatch and the
+  scrolled rows no longer show through it.
+
+Additive: no API changed.
+
 ## 0.32.0 — 2026-09-21
 
 **The organization picker stopped being a filing cabinet.**

package/dist/data-table/index.cjs

@@ -10084,8 +10084,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
@@ -12749,23 +12767,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 = (0, import_react21.useMemo)(
@@ -14611,7 +14635,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__ */ (0, import_jsx_runtime42.jsx)(
                                           "div",
@@ -14873,6 +14900,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__ */ (0, import_jsx_runtime42.jsxs)(
                                     "tr",
                                     {
@@ -14900,7 +14930,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",
@@ -14924,7 +14954,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(),
@@ -14964,6 +14998,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__ */ (0, import_jsx_runtime42.jsxs)(
                                             "td",
                                             {
@@ -14994,12 +15034,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: {