@ai-matrx/design-system 0.21.4 → 0.21.5

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, c as MatrxDataTableRecordControls } from '../types-DRusLYrU.cjs';
-export { A as AnyOfColumnSearch, j as CellEditType, k as CellEditsMap, f as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, M as MatrxColumnDef, l as MatrxDataTableContextMenuConfig, g as MatrxDataTableCopyConfig, d as MatrxDataTableDensity, m as MatrxDataTableDetailConfig, n as MatrxDataTableEditConfig, o as MatrxDataTableEmptyState, p as MatrxDataTableFilterUi, q as MatrxDataTableHierarchyConfig, r as MatrxDataTableHierarchyMove, s as MatrxDataTableMobileCardControls, t as MatrxDataTableQueryControl, e as MatrxDataTableQueryState, u as MatrxDataTableSelectionConfig, v as MatrxDataTableSourceProcessing, w as MatrxDataTableToolbar, x as MatrxDataTableUrlStateConfig, y as MatrxDataTableWindowConfig, z as MatrxTablePagination, B as SortDirection, S as SortState, b as TableSavedViewsProps, T as TableSearchMatchMode, D as TableViewQuery, E as TextFilterMode, F as ToolbarFacet } from '../types-DRusLYrU.cjs';
+import { h as MatrxDataTableProps, i as TableViewSnapshot, c as MatrxDataTableRecordControls, j as ColumnMarker, M as MatrxColumnDef } from '../types-DsmrqJHN.cjs';
+export { A as AnyOfColumnSearch, k as CellEditType, l as CellEditsMap, f as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, m as MatrxDataTableContextMenuConfig, g as MatrxDataTableCopyConfig, d as MatrxDataTableDensity, n as MatrxDataTableDetailConfig, o as MatrxDataTableEditConfig, p as MatrxDataTableEmptyState, q as MatrxDataTableFilterUi, r as MatrxDataTableHierarchyConfig, s as MatrxDataTableHierarchyMove, t as MatrxDataTableMobileCardControls, u as MatrxDataTableQueryControl, e as MatrxDataTableQueryState, v as MatrxDataTableSelectionConfig, w as MatrxDataTableSourceProcessing, x as MatrxDataTableToolbar, y as MatrxDataTableUrlStateConfig, z as MatrxDataTableWindowConfig, B as MatrxTablePagination, D as SortDirection, S as SortState, b as TableSavedViewsProps, T as TableSearchMatchMode, E as TableViewQuery, F as TextFilterMode, G as ToolbarFacet } from '../types-DsmrqJHN.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';
@@ -78,6 +78,13 @@ declare function MatrxTableRowAlchemyProvider({ copy, placement, controls, child
     children: ReactNode;
 }): React.JSX.Element;
 
+type ResolvedColumnMarker = Exclude<ColumnMarker, false>;
+/**
+ * Resolve the semantic without guessing from partial names. A field such as
+ * `favorite_count` is not a marker; consumers can always opt in explicitly.
+ */
+declare function resolveColumnMarker<T>(column: MatrxColumnDef<T>): ResolvedColumnMarker | undefined;
+
 interface TableViewTab {
     id: string;
     label: string;
@@ -96,4 +103,4 @@ interface TableViewTabsProps {
 /** One shared tab strip; hosts may own URL state without copying its UI. */
 declare function TableViewTabs({ tabs, activeId, onSelect, onAdd, onClose, onRename, related }: TableViewTabsProps): React.JSX.Element;
 
-export { MatrxDataTable, MatrxDataTableProps, MatrxDataTableRecordControls, MatrxTableRowAlchemyProvider, SavedViewsControl, type SavedViewsControlProps, TableTitleRow, type TableTitleRowProps, TableViewSnapshot, type TableViewTab, TableViewTabs, type TableViewTabsProps, parseTableViewSnapshot };
+export { ColumnMarker, MatrxColumnDef, MatrxDataTable, MatrxDataTableProps, MatrxDataTableRecordControls, MatrxTableRowAlchemyProvider, type ResolvedColumnMarker, SavedViewsControl, type SavedViewsControlProps, TableTitleRow, type TableTitleRowProps, TableViewSnapshot, type TableViewTab, TableViewTabs, type TableViewTabsProps, parseTableViewSnapshot, resolveColumnMarker };

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, c as MatrxDataTableRecordControls } from '../types-CbGNfo7r.js';
-export { A as AnyOfColumnSearch, j as CellEditType, k as CellEditsMap, f as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, M as MatrxColumnDef, l as MatrxDataTableContextMenuConfig, g as MatrxDataTableCopyConfig, d as MatrxDataTableDensity, m as MatrxDataTableDetailConfig, n as MatrxDataTableEditConfig, o as MatrxDataTableEmptyState, p as MatrxDataTableFilterUi, q as MatrxDataTableHierarchyConfig, r as MatrxDataTableHierarchyMove, s as MatrxDataTableMobileCardControls, t as MatrxDataTableQueryControl, e as MatrxDataTableQueryState, u as MatrxDataTableSelectionConfig, v as MatrxDataTableSourceProcessing, w as MatrxDataTableToolbar, x as MatrxDataTableUrlStateConfig, y as MatrxDataTableWindowConfig, z as MatrxTablePagination, B as SortDirection, S as SortState, b as TableSavedViewsProps, T as TableSearchMatchMode, D as TableViewQuery, E as TextFilterMode, F as ToolbarFacet } from '../types-CbGNfo7r.js';
+import { h as MatrxDataTableProps, i as TableViewSnapshot, c as MatrxDataTableRecordControls, j as ColumnMarker, M as MatrxColumnDef } from '../types-Dpl8OW_m.js';
+export { A as AnyOfColumnSearch, k as CellEditType, l as CellEditsMap, f as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, m as MatrxDataTableContextMenuConfig, g as MatrxDataTableCopyConfig, d as MatrxDataTableDensity, n as MatrxDataTableDetailConfig, o as MatrxDataTableEditConfig, p as MatrxDataTableEmptyState, q as MatrxDataTableFilterUi, r as MatrxDataTableHierarchyConfig, s as MatrxDataTableHierarchyMove, t as MatrxDataTableMobileCardControls, u as MatrxDataTableQueryControl, e as MatrxDataTableQueryState, v as MatrxDataTableSelectionConfig, w as MatrxDataTableSourceProcessing, x as MatrxDataTableToolbar, y as MatrxDataTableUrlStateConfig, z as MatrxDataTableWindowConfig, B as MatrxTablePagination, D as SortDirection, S as SortState, b as TableSavedViewsProps, T as TableSearchMatchMode, E as TableViewQuery, F as TextFilterMode, G as ToolbarFacet } from '../types-Dpl8OW_m.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';
@@ -78,6 +78,13 @@ declare function MatrxTableRowAlchemyProvider({ copy, placement, controls, child
     children: ReactNode;
 }): React.JSX.Element;
 
+type ResolvedColumnMarker = Exclude<ColumnMarker, false>;
+/**
+ * Resolve the semantic without guessing from partial names. A field such as
+ * `favorite_count` is not a marker; consumers can always opt in explicitly.
+ */
+declare function resolveColumnMarker<T>(column: MatrxColumnDef<T>): ResolvedColumnMarker | undefined;
+
 interface TableViewTab {
     id: string;
     label: string;
@@ -96,4 +103,4 @@ interface TableViewTabsProps {
 /** One shared tab strip; hosts may own URL state without copying its UI. */
 declare function TableViewTabs({ tabs, activeId, onSelect, onAdd, onClose, onRename, related }: TableViewTabsProps): React.JSX.Element;
 
-export { MatrxDataTable, MatrxDataTableProps, MatrxDataTableRecordControls, MatrxTableRowAlchemyProvider, SavedViewsControl, type SavedViewsControlProps, TableTitleRow, type TableTitleRowProps, TableViewSnapshot, type TableViewTab, TableViewTabs, type TableViewTabsProps, parseTableViewSnapshot };
+export { ColumnMarker, MatrxColumnDef, MatrxDataTable, MatrxDataTableProps, MatrxDataTableRecordControls, MatrxTableRowAlchemyProvider, type ResolvedColumnMarker, SavedViewsControl, type SavedViewsControlProps, TableTitleRow, type TableTitleRowProps, TableViewSnapshot, type TableViewTab, TableViewTabs, type TableViewTabsProps, parseTableViewSnapshot, resolveColumnMarker };

package/dist/data-table/index.js

@@ -5783,6 +5783,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
 import { Fragment as Fragment4, jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
 var HeaderButton = forwardRef12(({ dragDescription, "aria-describedby": tooltipDescription, ...props }, ref) => {
@@ -5815,6 +5843,7 @@ function ColumnHeaderCell({
   align = "left",
   className,
   compact = false,
+  marker,
   filterApplyLabel,
   filterShowCancel = false,
   filterFooterHint,
@@ -5866,7 +5895,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__ */ jsxs22(
     PopoverContent,
     {
@@ -5895,7 +5926,7 @@ function ColumnHeaderCell({
                 onClick: onSortAsc,
                 children: [
                   /* @__PURE__ */ jsx31(ArrowUp, { className: "h-3.5 w-3.5" }),
-                  "Sort ascending"
+                  markerLabels ? `${markerLabels.label} last` : "Sort ascending"
                 ]
               }
             ),
@@ -5908,7 +5939,7 @@ function ColumnHeaderCell({
                 onClick: onSortDesc,
                 children: [
                   /* @__PURE__ */ jsx31(ArrowDown, { className: "h-3.5 w-3.5" }),
-                  "Sort descending"
+                  markerLabels ? `${markerLabels.label} first` : "Sort descending"
                 ]
               }
             ),
@@ -5921,7 +5952,7 @@ function ColumnHeaderCell({
                 onClick: onClearSort,
                 children: [
                   /* @__PURE__ */ jsx31(ListX, { className: "h-3.5 w-3.5" }),
-                  "Clear sort"
+                  markerLabels ? `Clear ${markerLabels.lowerLabel} sort` : "Clear sort"
                 ]
               }
             ) : null
@@ -5940,6 +5971,13 @@ function ColumnHeaderCell({
             },
             selectOptions,
             selectSingle,
+            ...markerLabels ? {
+              booleanLabels: {
+                all: "All",
+                true: markerLabels.onlyLabel,
+                false: markerLabels.notLabel
+              }
+            } : {},
             allowNullModes
           }
         ) : null,
@@ -6155,7 +6193,8 @@ function FilterBody({
   onChange,
   selectOptions,
   selectSingle = false,
-  allowNullModes = false
+  allowNullModes = false,
+  booleanLabels
 }) {
   if (kind === "text") {
     const text = value?.kind === "text" ? value.value : "";
@@ -6242,9 +6281,9 @@ function FilterBody({
           children: [
             /* @__PURE__ */ jsx31(SelectTrigger, { className: "h-8 text-xs", children: /* @__PURE__ */ jsx31(SelectValue, {}) }),
             /* @__PURE__ */ jsxs22(SelectContent, { children: [
-              /* @__PURE__ */ jsx31(SelectItem, { value: "__all__", children: "All" }),
-              /* @__PURE__ */ jsx31(SelectItem, { value: "true", children: "Yes" }),
-              /* @__PURE__ */ jsx31(SelectItem, { value: "false", children: "No" })
+              /* @__PURE__ */ jsx31(SelectItem, { value: "__all__", children: booleanLabels?.all ?? "All" }),
+              /* @__PURE__ */ jsx31(SelectItem, { value: "true", children: booleanLabels?.true ?? "Yes" }),
+              /* @__PURE__ */ jsx31(SelectItem, { value: "false", children: booleanLabels?.false ?? "No" })
             ] })
           ]
         }
@@ -8353,6 +8392,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";
@@ -8418,6 +8458,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 {
@@ -10659,6 +10702,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__ */ jsxs31(
                                         "th",
                                         {
@@ -10670,7 +10717,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
@@ -10681,13 +10728,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__ */ jsx41(ColumnHeaderDropZone, { id, enabled: reorderableColumns, children: /* @__PURE__ */ jsx41(
                                               ColumnHeaderCell,
@@ -10722,7 +10769,8 @@ function MatrxDataTableCore({
                                                 allowNegation: filterUi?.allowNegation,
                                                 allowNullModes: filterUi?.allowNullModes,
                                                 align: col.align,
-                                                compact: col.compact,
+                                                compact,
+                                                marker,
                                                 reorderColumn: reorderableColumns ? { id, label: headerLabel } : void 0
                                               }
                                             ) }),
@@ -10732,12 +10780,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
                                                 )
                                               }
@@ -10767,7 +10815,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__ */ jsx41(Skeleton, { className: "h-5 w-full" })
@@ -10853,19 +10901,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
@@ -10997,13 +11045,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
@@ -11595,7 +11643,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)];
     })
   );
@@ -11959,6 +12011,7 @@ export {
   downloadTableAsXlsx,
   filterKindLabel,
   parseTableViewSnapshot,
+  resolveColumnMarker,
   resolveFilterKind,
   rowsToCsvFromColumns,
   rowsToMarkdownTable,