@ai-matrx/design-system 0.61.21 → 0.61.23

package/dist/desktop.css

@@ -202,10 +202,10 @@
 }
 
 @layer base {
+  /* The root font size stays the browser's 16px: Tailwind's spacing scale is rem-based, and a 13px
+     root would shrink every gap to 3.25px steps (2026-10-04 defect). Body text is set on body. */
   html {
     font-family: var(--font-sans);
-    font-size: 13px;
-    line-height: 16px;
     color: var(--mx-label);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -213,6 +213,11 @@
     text-rendering: optimizeLegibility;
   }
 
+  body {
+    font-size: 13px;
+    line-height: 16px;
+  }
+
   ::selection {
     background: color-mix(in srgb, var(--mx-tint) 28%, transparent);
   }

package/dist/desktop.d.cts

@@ -304,13 +304,15 @@ interface DataTableProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, "
     defaultSort?: SortState;
     /** `data-*` attributes for a row (test hooks, state markers). */
     rowData?: (row: T) => Record<`data-${string}`, string | undefined>;
+    /** Draw only the first `limit` rows AFTER sorting (long lists: the caller offers "Show more"). */
+    limit?: number;
     className?: string;
 }
 /**
  * The macOS table: 24 px rows, caption-weight headers, hairline under the header, optional
  * alternating rows, tint selection. Arrow keys move between rows when rows are selectable.
  */
-declare function DataTable<T>({ columns, rows, rowKey, onRowSelect, selectedKey, empty, striped, detail, isDisabled, rowAction, rowMenu, defaultSort, rowData, className, "aria-label": ariaLabel, ...rest }: DataTableProps<T>): React.JSX.Element;
+declare function DataTable<T>({ columns, rows, rowKey, onRowSelect, selectedKey, empty, striped, detail, isDisabled, rowAction, rowMenu, defaultSort, rowData, limit, className, "aria-label": ariaLabel, ...rest }: DataTableProps<T>): React.JSX.Element;
 
 /**
  * The source list (Finder / Mail / Notes sidebar). Sections of 28 px rows; the open row carries a

package/dist/desktop.d.ts

@@ -304,13 +304,15 @@ interface DataTableProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, "
     defaultSort?: SortState;
     /** `data-*` attributes for a row (test hooks, state markers). */
     rowData?: (row: T) => Record<`data-${string}`, string | undefined>;
+    /** Draw only the first `limit` rows AFTER sorting (long lists: the caller offers "Show more"). */
+    limit?: number;
     className?: string;
 }
 /**
  * The macOS table: 24 px rows, caption-weight headers, hairline under the header, optional
  * alternating rows, tint selection. Arrow keys move between rows when rows are selectable.
  */
-declare function DataTable<T>({ columns, rows, rowKey, onRowSelect, selectedKey, empty, striped, detail, isDisabled, rowAction, rowMenu, defaultSort, rowData, className, "aria-label": ariaLabel, ...rest }: DataTableProps<T>): React.JSX.Element;
+declare function DataTable<T>({ columns, rows, rowKey, onRowSelect, selectedKey, empty, striped, detail, isDisabled, rowAction, rowMenu, defaultSort, rowData, limit, className, "aria-label": ariaLabel, ...rest }: DataTableProps<T>): React.JSX.Element;
 
 /**
  * The source list (Finder / Mail / Notes sidebar). Sections of 28 px rows; the open row carries a

package/dist/desktop.js

@@ -1949,6 +1949,7 @@ function DataTable({
   rowMenu,
   defaultSort,
   rowData,
+  limit,
   className,
   "aria-label": ariaLabel,
   ...rest
@@ -1964,11 +1965,12 @@ function DataTable({
   const [sort, setSort] = React18.useState(defaultSort ?? null);
   const sortColumn = sort ? columns.find((c) => c.key === sort.key && c.sort) : void 0;
   const ordered = React18.useMemo(() => {
-    if (!sort || !sortColumn?.sort) return rows;
+    const cut = (list) => limit !== void 0 && list.length > limit ? list.slice(0, limit) : list;
+    if (!sort || !sortColumn?.sort) return cut(rows);
     const by = sortColumn.sort;
     const sign = sort.direction === "ascending" ? 1 : -1;
-    return [...rows].sort((a, b) => sign * by(a, b));
-  }, [rows, sort, sortColumn]);
+    return cut([...rows].sort((a, b) => sign * by(a, b)));
+  }, [rows, sort, sortColumn, limit]);
   const toggleSort = (key) => setSort((prev) => prev?.key === key ? { key, direction: prev.direction === "ascending" ? "descending" : "ascending" } : { key, direction: "descending" });
   const hasActions = Boolean(rowAction || rowMenu);
   const span = columns.length + (detail ? 1 : 0) + (hasActions ? 1 : 0);
@@ -2021,7 +2023,7 @@ function DataTable({
           column.key
         );
       }),
-      hasActions ? /* @__PURE__ */ jsx22("th", { "aria-label": "Actions", className: "w-px" }) : null
+      hasActions ? /* @__PURE__ */ jsx22("th", { "aria-label": "Actions", className: "w-0 p-0" }) : null
     ] }) }),
     rows.length === 0 && empty ? /* @__PURE__ */ jsx22("tbody", { children: /* @__PURE__ */ jsx22("tr", { children: /* @__PURE__ */ jsx22("td", { colSpan: span, children: empty }) }) }) : /* @__PURE__ */ jsx22("tbody", { ref: bodyRef, children: ordered.map((row, index) => {
       const key = rowKey(row);
@@ -2084,16 +2086,20 @@ function DataTable({
                 },
                 column.key
               )),
-              hasActions ? /* @__PURE__ */ jsx22(
-                "td",
-                {
-                  className: cn(
-                    "w-px whitespace-nowrap px-2",
-                    // Finder: a row's buttons appear on hover, keyboard focus or selection only.
-                    !selected && "opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100 has-[[data-state=open]]:opacity-100"
-                  ),
-                  children: /* @__PURE__ */ jsx22(RowActions, { action: rowAction?.(row) ?? null, menu: rowMenu?.(row) ?? null })
-                }
+              hasActions ? (
+                // Zero width: the buttons float over the row's trailing edge instead of reserving
+                // an empty column (Finder). They appear on hover, keyboard focus or selection.
+                /* @__PURE__ */ jsx22("td", { className: "relative w-0 p-0", children: /* @__PURE__ */ jsx22(
+                  "span",
+                  {
+                    className: cn(
+                      "absolute right-2 top-1/2 flex -translate-y-1/2 items-center rounded-control bg-content pl-2",
+                      !selected && "opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100 has-[[data-state=open]]:opacity-100",
+                      selected && "bg-selection"
+                    ),
+                    children: /* @__PURE__ */ jsx22(RowActions, { action: rowAction?.(row) ?? null, menu: rowMenu?.(row) ?? null })
+                  }
+                ) })
               ) : null
             ]
           }
@@ -2188,7 +2194,7 @@ var SourceListItem = React19.forwardRef(function SourceListItem2({ icon, label,
       className: cn(
         "focus-ring group/item flex w-full items-center gap-2 rounded-control px-2 text-left text-body text-label transition-colors duration-100 hover:bg-fill disabled:opacity-40",
         hint && !soon ? "min-h-row py-1" : "h-sidebar-row",
-        soon && "text-label-tertiary",
+        soon && (current ? "text-label-secondary" : "text-label-tertiary"),
         current && "bg-selection-muted font-medium hover:bg-selection-muted [[data-window-active=false]_&]:bg-fill",
         className
       ),