@ai-matrx/design-system 0.21.4 → 0.21.5

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.21.5
+
+Shared compact favorite and pin columns: 40px default width, semantic sort and boolean filter menus, exact accessor inference and explicit opt-out. Existing custom cells and permission-aware toggles remain intact.
+
 ## 0.21.3
 
 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-DRusLYrU.cjs';
+import { g as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../types-DsmrqJHN.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-CbGNfo7r.js';
+import { g as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../types-Dpl8OW_m.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-DRusLYrU.cjs';
+import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../types-DsmrqJHN.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-CbGNfo7r.js';
+import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../types-Dpl8OW_m.js';
 import '../content-transfer.js';
 import 'react';
 import '@ai-matrx/kit/content-transfer';

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ComponentType, ReactNode, MouseEventHandler } from 'react';
-import { b as TableSavedViewsProps, c as MatrxDataTableRecordControls, d as MatrxDataTableDensity } from '../types-DRusLYrU.cjs';
+import { b as TableSavedViewsProps, c as MatrxDataTableRecordControls, d as MatrxDataTableDensity } from '../types-DsmrqJHN.cjs';
 import { CopyControlProps } from './copy-types.cjs';
 export { AgentPayloadInput, AiCustomSource, AiVariant, CopyExportConfig } from './copy-types.cjs';
 import '../content-transfer.cjs';

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ComponentType, ReactNode, MouseEventHandler } from 'react';
-import { b as TableSavedViewsProps, c as MatrxDataTableRecordControls, d as MatrxDataTableDensity } from '../types-CbGNfo7r.js';
+import { b as TableSavedViewsProps, c as MatrxDataTableRecordControls, d as MatrxDataTableDensity } from '../types-Dpl8OW_m.js';
 import { CopyControlProps } from './copy-types.js';
 export { AgentPayloadInput, AiCustomSource, AiVariant, CopyExportConfig } from './copy-types.js';
 import '../content-transfer.js';

package/dist/data-table/index.cjs

@@ -48,6 +48,7 @@ __export(data_table_exports, {
   downloadTableAsXlsx: () => downloadTableAsXlsx,
   filterKindLabel: () => filterKindLabel,
   parseTableViewSnapshot: () => parseTableViewSnapshot,
+  resolveColumnMarker: () => resolveColumnMarker,
   resolveFilterKind: () => resolveFilterKind,
   rowsToCsvFromColumns: () => rowsToCsvFromColumns,
   rowsToMarkdownTable: () => rowsToMarkdownTable,
@@ -5774,6 +5775,34 @@ var CommandShortcut = ({
 };
 CommandShortcut.displayName = "CommandShortcut";
 
+// src/data-table/column-marker.ts
+var MARKER_ACCESSORS = {
+  favorite: "favorite",
+  is_favorite: "favorite",
+  favourite: "favorite",
+  is_favourite: "favorite",
+  pinned: "pin",
+  is_pinned: "pin"
+};
+function resolveColumnMarker(column) {
+  if (column.marker === false) return void 0;
+  if (column.marker) return column.marker;
+  return column.accessorKey ? MARKER_ACCESSORS[column.accessorKey] : void 0;
+}
+function markerCopy(marker) {
+  return marker === "favorite" ? {
+    label: "Favorites",
+    lowerLabel: "favorites",
+    onlyLabel: "Favorites only",
+    notLabel: "Not favorites"
+  } : {
+    label: "Pins",
+    lowerLabel: "pins",
+    onlyLabel: "Pins only",
+    notLabel: "Not pinned"
+  };
+}
+
 // src/data-table/ColumnHeaderCell.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var HeaderButton = (0, import_react13.forwardRef)(({ dragDescription, "aria-describedby": tooltipDescription, ...props }, ref) => {
@@ -5806,6 +5835,7 @@ function ColumnHeaderCell({
   align = "left",
   className,
   compact = false,
+  marker,
   filterApplyLabel,
   filterShowCancel = false,
   filterFooterHint,
@@ -5857,7 +5887,9 @@ function ColumnHeaderCell({
     if (deferredFilter) setDraftFilter(next);
     else onFilterChange(next);
   };
-  const menuLabel = labelText ? `Sort or filter ${labelText}` : "Sort or filter column";
+  const markerLabels = marker ? markerCopy(marker) : void 0;
+  const accessibleLabel = markerLabels?.label ?? labelText;
+  const menuLabel = accessibleLabel ? `Sort or filter ${accessibleLabel}` : "Sort or filter column";
   const menuContent = /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     PopoverContent,
     {
@@ -5886,7 +5918,7 @@ function ColumnHeaderCell({
                 onClick: onSortAsc,
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ArrowUp, { className: "h-3.5 w-3.5" }),
-                  "Sort ascending"
+                  markerLabels ? `${markerLabels.label} last` : "Sort ascending"
                 ]
               }
             ),
@@ -5899,7 +5931,7 @@ function ColumnHeaderCell({
                 onClick: onSortDesc,
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ArrowDown, { className: "h-3.5 w-3.5" }),
-                  "Sort descending"
+                  markerLabels ? `${markerLabels.label} first` : "Sort descending"
                 ]
               }
             ),
@@ -5912,7 +5944,7 @@ function ColumnHeaderCell({
                 onClick: onClearSort,
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ListX, { className: "h-3.5 w-3.5" }),
-                  "Clear sort"
+                  markerLabels ? `Clear ${markerLabels.lowerLabel} sort` : "Clear sort"
                 ]
               }
             ) : null
@@ -5931,6 +5963,13 @@ function ColumnHeaderCell({
             },
             selectOptions,
             selectSingle,
+            ...markerLabels ? {
+              booleanLabels: {
+                all: "All",
+                true: markerLabels.onlyLabel,
+                false: markerLabels.notLabel
+              }
+            } : {},
             allowNullModes
           }
         ) : null,
@@ -6146,7 +6185,8 @@ function FilterBody({
   onChange,
   selectOptions,
   selectSingle = false,
-  allowNullModes = false
+  allowNullModes = false,
+  booleanLabels
 }) {
   if (kind === "text") {
     const text = value?.kind === "text" ? value.value : "";
@@ -6233,9 +6273,9 @@ function FilterBody({
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectTrigger, { className: "h-8 text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectValue, {}) }),
             /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(SelectContent, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectItem, { value: "__all__", children: "All" }),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectItem, { value: "true", children: "Yes" }),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectItem, { value: "false", children: "No" })
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectItem, { value: "__all__", children: booleanLabels?.all ?? "All" }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectItem, { value: "true", children: booleanLabels?.true ?? "Yes" }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectItem, { value: "false", children: booleanLabels?.false ?? "No" })
             ] })
           ]
         }
@@ -8335,6 +8375,7 @@ var SELECT_CARDINALITY_CAP = 24;
 function resolveFilterKind(col, sampleRows) {
   if (col.filter === false) return null;
   if (col.filter && col.filter !== "auto") return col.filter;
+  if (resolveColumnMarker(col)) return "boolean";
   const values = sampleRows.slice(0, 200).map((row) => getCellValue(row, col)).filter((v) => v != null);
   if (values.length === 0) return "text";
   if (values.every((v) => typeof v === "boolean")) return "boolean";
@@ -8400,6 +8441,9 @@ function resolveQueryFilterMeta(column, rows, controlled) {
     };
   }
   if (column.filter === false) return { kind: null, options: [] };
+  if (resolveColumnMarker(column) && (column.filter === void 0 || column.filter === "auto")) {
+    return { kind: "boolean", options: [] };
+  }
   const declared = column.filter;
   const kind = declared && declared !== "auto" ? declared : column.filterOptions?.length ? "select" : "text";
   return {
@@ -10641,6 +10685,10 @@ function MatrxDataTableCore({
                                       const defaultSortDirection = col.defaultSortDirection ?? "asc";
                                       const isColumnDragShadow = columnDragPreview?.draggedId === id && columnDragPreview.targetId !== null;
                                       const columnResizable = resizableColumns && col.resizable !== false;
+                                      const marker = resolveColumnMarker(col);
+                                      const compact = col.compact || marker !== void 0;
+                                      const width = marker && col.width === void 0 ? 40 : col.width;
+                                      const minWidth = marker && col.minWidth === void 0 ? 40 : col.minWidth;
                                       return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
                                         "th",
                                         {
@@ -10652,7 +10700,7 @@ function MatrxDataTableCore({
                                             // ICON COLUMN (MatrxColumnDef.compact): a 40px star
                                             // column cannot honor `width: 40` while paying 16px of
                                             // padding for a 14px glyph.
-                                            col.compact ? "px-1" : "px-2",
+                                            compact ? "px-1" : "px-2",
                                             // An intentional mobile column set (see
                                             // MatrxColumnDef.mobileHidden). CSS, not a JS
                                             // breakpoint — no hydration mismatch, and the column
@@ -10663,13 +10711,13 @@ function MatrxDataTableCore({
                                             // it, a crowded table crushes a declared 190px column to a
                                             // few characters wide instead of using the canonical
                                             // horizontal-scroll surface.
-                                            (col.width !== void 0 || columnResizable) && "sm:w-[var(--matrx-col-w)] sm:min-w-[var(--matrx-col-w)]",
+                                            (width !== void 0 || columnResizable) && "sm:w-[var(--matrx-col-w)] sm:min-w-[var(--matrx-col-w)]",
                                             col.headerClassName,
                                             isColumnDragShadow && "bg-primary/10 shadow-[inset_2px_0_0_var(--primary),inset_-2px_0_0_var(--primary)]",
                                             col.align === "center" && "text-center",
                                             col.align === "right" && "text-right"
                                           ),
-                                          style: columnWidthVar(col.width, effectiveColumnWidths[id], id, columnResizable),
+                                          style: columnWidthVar(width, effectiveColumnWidths[id], id, columnResizable),
                                           children: [
                                             /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ColumnHeaderDropZone, { id, enabled: reorderableColumns, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                                               ColumnHeaderCell,
@@ -10704,7 +10752,8 @@ function MatrxDataTableCore({
                                                 allowNegation: filterUi?.allowNegation,
                                                 allowNullModes: filterUi?.allowNullModes,
                                                 align: col.align,
-                                                compact: col.compact,
+                                                compact,
+                                                marker,
                                                 reorderColumn: reorderableColumns ? { id, label: headerLabel } : void 0
                                               }
                                             ) }),
@@ -10714,12 +10763,12 @@ function MatrxDataTableCore({
                                                 columnId: id,
                                                 label: headerLabel,
                                                 tableRef,
-                                                minWidth: col.minWidth,
+                                                minWidth,
                                                 maxWidth: col.maxWidth,
                                                 onResizeStart: captureResizeGestureSnapshot,
                                                 onResizeCancel: clearResizeGestureSnapshot,
-                                                onResizeCommit: (columnId2, width) => commitColumnWidths(
-                                                  { ...effectiveColumnWidths, [columnId2]: width },
+                                                onResizeCommit: (columnId2, width2) => commitColumnWidths(
+                                                  { ...effectiveColumnWidths, [columnId2]: width2 },
                                                   true
                                                 )
                                               }
@@ -10749,7 +10798,7 @@ function MatrxDataTableCore({
                                     {
                                       className: cn(
                                         "py-2",
-                                        col.compact ? "px-1" : "px-2",
+                                        col.compact || resolveColumnMarker(col) !== void 0 ? "px-1" : "px-2",
                                         col.mobileHidden && "max-sm:hidden"
                                       ),
                                       children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Skeleton, { className: "h-5 w-full" })
@@ -10835,19 +10884,19 @@ function MatrxDataTableCore({
                                               "data-matrx-column-drag-shadow": isColumnDragShadow ? "true" : void 0,
                                               className: cn(
                                                 "py-1.5 align-middle lg:py-0.5",
-                                                col.compact ? "px-1" : "px-2",
+                                                col.compact || resolveColumnMarker(col) !== void 0 ? "px-1" : "px-2",
                                                 // nowrap (NOT truncate — truncate clips the cell and
                                                 // defeats w-max, killing the horizontal scroll).
                                                 "max-sm:whitespace-nowrap",
                                                 col.mobileHidden && "max-sm:hidden",
-                                                (col.width !== void 0 || resizableColumns && col.resizable !== false) && "sm:w-[var(--matrx-col-w)] sm:min-w-[var(--matrx-col-w)] sm:max-w-[var(--matrx-col-w)]",
+                                                ((resolveColumnMarker(col) && col.width === void 0 ? 40 : col.width) !== void 0 || resizableColumns && col.resizable !== false) && "sm:w-[var(--matrx-col-w)] sm:min-w-[var(--matrx-col-w)] sm:max-w-[var(--matrx-col-w)]",
                                                 col.className,
                                                 isColumnDragShadow && "bg-primary/10 shadow-[inset_2px_0_0_var(--primary),inset_-2px_0_0_var(--primary)]",
                                                 col.align === "center" && "text-center",
                                                 col.align === "right" && "text-right"
                                               ),
                                               style: columnWidthVar(
-                                                col.width,
+                                                resolveColumnMarker(col) && col.width === void 0 ? 40 : col.width,
                                                 effectiveColumnWidths[columnId(col)],
                                                 columnId(col),
                                                 resizableColumns && col.resizable !== false
@@ -10979,13 +11028,13 @@ function MatrxDataTableCore({
                                   {
                                     className: cn(
                                       "px-2 py-2 align-middle",
-                                      column.compact && "px-1",
+                                      (column.compact || resolveColumnMarker(column) !== void 0) && "px-1",
                                       column.className,
                                       column.align === "center" && "text-center",
                                       column.align === "right" && "text-right"
                                     ),
                                     style: columnWidthVar(
-                                      column.width,
+                                      resolveColumnMarker(column) && column.width === void 0 ? 40 : column.width,
                                       effectiveColumnWidths[columnId(column)],
                                       columnId(column),
                                       resizableColumns && column.resizable !== false
@@ -11577,7 +11626,11 @@ function normalizeColumnWidthsForColumns(widths, columns) {
   return Object.fromEntries(
     Object.entries(normalized).map(([id, width]) => {
       const column = byId.get(id);
-      const bounds = resolveColumnResizeBounds(column?.minWidth, column?.maxWidth);
+      const marker = column ? resolveColumnMarker(column) : void 0;
+      const bounds = resolveColumnResizeBounds(
+        marker && column?.minWidth === void 0 ? 40 : column?.minWidth,
+        column?.maxWidth
+      );
       return [id, clampColumnWidth(width, bounds)];
     })
   );