@ai-matrx/design-system 0.19.3 → 0.19.5

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.19.5 — 2026-09-13
+
+Data-table append receipts remain visible after terminal loads and across remote response or error states. Footer containment now keeps the 44px action controls and 20px action glyphs visible without mobile clipping.
+
+### Consumer action
+
+Update `@ai-matrx/design-system`; no host API change is required.
+
+## 0.19.4
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/design-system/v0.19.3..npm/design-system/v0.19.4 -- apps/shared/design-system`).
+No source changes intended and no consumer action required.
+
 ## 0.19.3 — 2026-09-13
 
 Tap-target buttons built from inline paths now render rounded stroke caps and joins, matching the shared table icons and passed Lucide glyphs. Explicit stroke settings on a caller-supplied SVG are preserved.

package/dist/data-table/index.cjs

@@ -1855,7 +1855,7 @@ function PageNavigationControl({
       ...props,
       disabled,
       "aria-label": label,
-      className: cn(visibilityClassName, className, "[&_svg]:size-3.5")
+      className: cn(visibilityClassName, className, "[&_svg]:size-5")
     }
   );
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Tooltip, { children: [
@@ -1909,8 +1909,8 @@ function PaginationAction({
     }
   );
 }
-var PAGINATION_ACTION_CLASS = "relative isolate h-11 w-11 min-h-11 min-w-11 border-0 bg-transparent p-0 text-xs shadow-none before:absolute before:inset-1.5 before:z-0 before:rounded-md before:border before:border-border before:bg-card before:content-[''] hover:bg-transparent hover:before:bg-accent disabled:bg-transparent disabled:before:opacity-40 [&>*]:relative [&>*]:z-10";
-var PAGINATION_ACTIVE_CLASS = "text-primary-foreground before:border-primary before:bg-primary hover:before:bg-primary/90";
+var PAGINATION_ACTION_CLASS = "h-11 w-11 min-h-11 min-w-11 rounded-md border border-border bg-card p-0 text-sm shadow-none hover:bg-accent disabled:opacity-40 [&_svg]:size-5";
+var PAGINATION_ACTIVE_CLASS = "border-primary bg-primary text-primary-foreground hover:bg-primary/90";
 function GenericTablePagination({
   totalItems,
   itemsPerPage,
@@ -1964,8 +1964,8 @@ function GenericTablePagination({
   const containerClass = cn(
     "w-full items-center",
     !compact && "border-t border-border",
-    layoutType === "grid" ? "grid grid-cols-[auto_minmax(0,1fr)_auto]" : "flex flex-nowrap justify-between",
-    compact ? "box-border h-11 gap-0 px-0 py-0" : "gap-1 px-2 py-1 sm:gap-4 sm:px-3",
+    layoutType === "grid" ? progressive ? "grid grid-cols-[auto_minmax(0,1fr)_auto]" : "grid grid-cols-[auto_minmax(0,1fr)] sm:grid-cols-[auto_minmax(0,1fr)_auto]" : "flex flex-nowrap justify-between",
+    compact ? "box-border min-h-11 gap-0 px-0 py-0" : "gap-1 px-2 py-1 sm:gap-4 sm:px-3",
     className,
     containerClassName
   );
@@ -1990,7 +1990,7 @@ function GenericTablePagination({
                   "aria-label": "Rows per page",
                   className: cn(
                     "focus:ring-0",
-                    compact ? "relative isolate h-11 w-16 border-0 bg-transparent px-1 text-xs before:absolute before:inset-1.5 before:z-0 before:rounded-md before:border before:border-border before:bg-card before:content-[''] hover:before:bg-accent [&>*]:relative [&>*]:z-10 [&_svg]:h-3.5 [&_svg]:w-3.5" : "h-8 w-[3.75rem] text-xs sm:w-36 sm:text-sm"
+                    compact ? "h-11 min-w-20 rounded-md border border-border bg-card px-3 text-sm hover:bg-accent [&_svg]:size-5" : "h-8 w-[3.75rem] text-xs sm:w-36 sm:text-sm"
                   ),
                   children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SelectValue, { placeholder: itemsPerPage.toString() })
                 }
@@ -2009,7 +2009,7 @@ function GenericTablePagination({
       {
         className: cn("flex min-w-0 justify-center", infoContainerClassName),
         children: showPageInfo && !hideEntriesInfo && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "truncate text-[10px] tabular-nums text-muted-foreground sm:hidden", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "truncate text-xs tabular-nums text-muted-foreground sm:hidden", children: [
             startItem,
             "-",
             endItem,
@@ -2019,7 +2019,7 @@ function GenericTablePagination({
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             "span",
             {
-              className: `hidden whitespace-nowrap ${compact ? "text-xs" : "text-sm"} text-muted-foreground sm:inline`,
+              className: `hidden whitespace-nowrap ${compact ? "text-sm" : "text-sm"} min-w-0 truncate text-muted-foreground sm:inline`,
               children: formatLabel(startItem, endItem, totalItems)
             }
           )
@@ -2034,13 +2034,13 @@ function GenericTablePagination({
         disabledHint: "All rows shown",
         disabled: !progressive.hasMore,
         onClick: progressive.onShowMore,
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronRight, { className: "h-3.5 w-3.5 rotate-90" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronRight, { className: "h-5 w-5 rotate-90" })
       }
     ) : showPageControls && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "div",
       {
         className: cn(
-          "flex min-w-0 items-center justify-end",
+          "col-span-2 flex min-w-0 items-center justify-end sm:col-span-1",
           compact ? "gap-0" : "gap-0.5 sm:gap-1",
           controlsContainerClassName
         ),
@@ -2055,7 +2055,7 @@ function GenericTablePagination({
               fallbackClassName: navButtonClassName,
               onClick: () => onPageChange(1),
               disabled: isFirstPageDisabled,
-              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronsLeft, { className: "h-3.5 w-3.5" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronsLeft, { className: "h-5 w-5" })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -2067,7 +2067,7 @@ function GenericTablePagination({
               fallbackClassName: navButtonClassName,
               onClick: () => onPageChange(currentPage - 1),
               disabled: isFirstPageDisabled,
-              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronLeft, { className: "h-3.5 w-3.5" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronLeft, { className: "h-5 w-5" })
             }
           ),
           getPageNumbers(3).map((page) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -2110,7 +2110,7 @@ function GenericTablePagination({
               fallbackClassName: navButtonClassName,
               onClick: () => onPageChange(currentPage + 1),
               disabled: isLastPageDisabled,
-              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronRight, { className: "h-3.5 w-3.5" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronRight, { className: "h-5 w-5" })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -2123,7 +2123,7 @@ function GenericTablePagination({
               fallbackClassName: navButtonClassName,
               onClick: () => onPageChange(totalPages),
               disabled: isLastPageDisabled,
-              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronsRight, { className: "h-3.5 w-3.5" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronsRight, { className: "h-5 w-5" })
             }
           )
         ]
@@ -7898,7 +7898,7 @@ function TableToolbarAction({
     return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(HostAction, { ariaLabel, tooltip, disabled, busy, onClick, children });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Button, { type: "button", variant: "ghost", size: "icon", className: "h-11 w-11 [&_svg]:size-3.5", "aria-label": ariaLabel, "aria-busy": busy || void 0, disabled, onClick, children: (0, import_react17.isValidElement)(children) ? (0, import_react17.cloneElement)(children, { className: cn("h-3.5 w-3.5", children.props.className) }) : children }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Button, { type: "button", variant: "ghost", size: "icon", className: "h-11 w-11 [&_svg]:size-5", "aria-label": ariaLabel, "aria-busy": busy || void 0, disabled, onClick, children: (0, import_react17.isValidElement)(children) ? (0, import_react17.cloneElement)(children, { className: cn("h-5 w-5", children.props.className) }) : children }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipContent, { children: tooltip ?? ariaLabel })
   ] });
 }
@@ -9440,7 +9440,7 @@ function MatrxDataTableCore({
                       ),
                       children: [
                         /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "relative min-w-0 flex-1", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Search, { className: "absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Search, { className: "absolute left-2 top-1/2 h-5 w-5 -translate-y-1/2 text-muted-foreground" }),
                           /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                             Input,
                             {
@@ -9462,7 +9462,7 @@ function MatrxDataTableCore({
                                 "aria-label": "Clear search",
                                 className: "absolute right-1.5 top-1/2 -translate-y-1/2 rounded p-0.5 text-muted-foreground hover:text-foreground",
                                 onClick: () => setSearchValue(""),
-                                children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(X, { className: "h-3.5 w-3.5" })
+                                children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(X, { className: "h-5 w-5" })
                               }
                             ) }),
                             /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipContent, { children: "Clear search" })
@@ -9482,7 +9482,7 @@ function MatrxDataTableCore({
                                 searchMatchMode === "whole_words" ? "contains" : "whole_words"
                               ),
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(WholeWord, { className: "h-3.5 w-3.5" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(WholeWord, { className: "h-5 w-5" }),
                                 searchMatchMode === "whole_words" ? "Whole words" : "Contains"
                               ]
                             }
@@ -9504,7 +9504,7 @@ function MatrxDataTableCore({
                       }
                     ) : null,
                     toolbar?.anyOf ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "relative w-full max-w-xs", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Search, { className: "absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Search, { className: "absolute left-2 top-1/2 h-5 w-5 -translate-y-1/2 text-muted-foreground" }),
                       /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                         Input,
                         {
@@ -9523,7 +9523,7 @@ function MatrxDataTableCore({
                             "aria-label": "Clear match-any search",
                             className: "absolute right-1.5 top-1/2 -translate-y-1/2 rounded p-0.5 text-muted-foreground hover:text-foreground",
                             onClick: () => setAnyOfValue(""),
-                            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(X, { className: "h-3.5 w-3.5" })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(X, { className: "h-5 w-5" })
                           }
                         ) }),
                         /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipContent, { children: "Clear match-any search" })
@@ -10185,7 +10185,7 @@ function MatrxDataTableCore({
                                                         type: "button",
                                                         variant: "ghost",
                                                         size: "icon",
-                                                        className: "h-11 w-11 text-muted-foreground hover:text-foreground [&_svg]:size-3.5",
+                                                        className: "h-11 w-11 text-muted-foreground hover:text-foreground [&_svg]:size-5",
                                                         "aria-label": opensWindowOnRowClick ? "Open in side panel" : "Open in window",
                                                         onClick: (e) => {
                                                           e.stopPropagation();
@@ -10195,7 +10195,7 @@ function MatrxDataTableCore({
                                                             openWindow(row);
                                                           }
                                                         },
-                                                        children: opensWindowOnRowClick ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PanelRightOpen, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PanelRight, { className: "h-3.5 w-3.5" })
+                                                        children: opensWindowOnRowClick ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PanelRightOpen, { className: "h-5 w-5" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PanelRight, { className: "h-5 w-5" })
                                                       }
                                                     ) }),
                                                     /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipContent, { children: opensWindowOnRowClick ? "Open in side panel" : "Open in window" })
@@ -10313,14 +10313,14 @@ function MatrxDataTableCore({
                   "div",
                   {
                     "data-matrx-table-footer": true,
-                    className: "flex min-h-16 shrink-0 flex-wrap items-center justify-between gap-3 border-t border-border",
+                    className: "flex min-h-11 shrink-0 flex-wrap items-center gap-0 border-t border-border",
                     "aria-busy": isLoading || isFetching,
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
                         "div",
                         {
                           ...isFetching && !isLoading ? {} : { role: "status", "aria-live": "polite" },
-                          className: "flex w-full min-w-0 flex-none items-center gap-2 text-xs text-muted-foreground sm:w-auto sm:flex-1",
+                          className: "flex w-full min-w-0 items-center gap-2 text-xs text-muted-foreground sm:w-auto sm:flex-1 sm:text-sm",
                           children: [
                             isLoading ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                               Loader2,
@@ -10330,8 +10330,8 @@ function MatrxDataTableCore({
                                 className: "h-5 w-5 shrink-0 animate-spin text-primary motion-reduce:animate-none"
                               }
                             ) : null,
-                            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "min-w-0", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "break-words font-medium text-foreground", children: isLoading ? "Loading rows\u2026" : `${data.length.toLocaleString()} loaded${appendQuery.pagination.totalItems === void 0 ? "" : ` of ${appendQuery.pagination.totalItems.toLocaleString()}`}` }),
+                            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "min-w-0 flex-1", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "font-medium text-foreground", children: isLoading ? "Loading rows\u2026" : `${data.length.toLocaleString()} loaded${appendQuery.pagination.totalItems === void 0 ? "" : ` of ${appendQuery.pagination.totalItems.toLocaleString()}`}` }),
                               appendQuery.pagination.sourceUntil ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("p", { children: [
                                 "Source fixed through",
                                 " ",
@@ -10339,8 +10339,8 @@ function MatrxDataTableCore({
                                 "."
                               ] }) : null,
                               !isLoading && !isFetching && !appendQuery.pagination.loadAll?.isLoading && !scrollPagination.error && !appendQuery.pagination.hasNextPage && appendQuery.pagination.totalItems !== void 0 && data.length === appendQuery.pagination.totalItems ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { children: "All source rows are loaded." }) : appendUsesLocalProcessing ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { children: "Local search and filters cover loaded rows." }) : null,
-                              scrollPagination.error ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { role: "alert", className: "break-words text-destructive", children: scrollPagination.error.message }) : null,
-                              appendScrollPolicy?.mode === "suspended" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("p", { role: "status", className: "break-words", children: [
+                              scrollPagination.error ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { role: "alert", className: "text-destructive", children: scrollPagination.error.message }) : null,
+                              appendScrollPolicy?.mode === "suspended" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("p", { role: "status", children: [
                                 appendScrollPolicy.reason,
                                 " Load more remains available."
                               ] }) : null
@@ -10358,7 +10358,7 @@ function MatrxDataTableCore({
                               SelectTrigger,
                               {
                                 "aria-label": "Rows per load",
-                                className: "h-8 w-20 shrink-0 text-xs sm:w-24",
+                                className: "h-11 min-w-20 shrink-0 rounded-md border border-border bg-card px-3 text-sm [&_svg]:size-5",
                                 disabled: isLoading || isFetching || appendQuery.pagination.loadAll?.isLoading,
                                 children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SelectValue, {})
                               }
@@ -10372,6 +10372,7 @@ function MatrxDataTableCore({
                         {
                           type: "button",
                           variant: "outline",
+                          className: "h-11 shrink-0 px-3 text-sm",
                           onClick: appendQuery.pagination.loadAll.stop,
                           children: "Stop loading"
                         }
@@ -10380,16 +10381,17 @@ function MatrxDataTableCore({
                         {
                           type: "button",
                           variant: "outline",
+                          className: "h-11 shrink-0 px-3 text-sm",
                           onClick: appendQuery.pagination.retrySource ?? (appendQuery.pagination.hasNextPage ? appendQuery.pagination.loadNextPage : appendQuery.pagination.refresh),
                           children: appendQuery.pagination.retrySource ? "Retry source" : appendQuery.pagination.hasNextPage ? "Retry" : "Reload rows"
                         }
-                      ) : appendQuery.pagination.hasNextPage || scrollPagination.error ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
+                      ) : appendQuery.pagination.hasNextPage || scrollPagination.error ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex shrink-0 gap-0", children: [
                         /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                           Button,
                           {
                             type: "button",
-                            size: "sm",
                             variant: "outline",
+                            className: "h-11 px-3 text-sm",
                             disabled: isLoading || isFetching,
                             onClick: () => void scrollPagination.requestNextPage(),
                             children: "Load more"
@@ -10399,14 +10401,14 @@ function MatrxDataTableCore({
                           Button,
                           {
                             type: "button",
-                            size: "sm",
                             variant: "ghost",
+                            className: "h-11 px-3 text-sm",
                             disabled: isLoading || isFetching,
                             onClick: appendQuery.pagination.loadAll.request,
                             children: "Load all"
                           }
                         ) : null
-                      ] }) : !isLoading && appendQuery.pagination.totalItems !== void 0 && data.length === appendQuery.pagination.totalItems ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-xs text-muted-foreground", children: "All rows loaded" }) : null
+                      ] }) : !isLoading && appendQuery.pagination.totalItems !== void 0 && data.length === appendQuery.pagination.totalItems ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "min-w-0 max-w-full break-words whitespace-normal px-3 text-xs text-muted-foreground sm:text-sm", children: "All rows loaded" }) : null
                     ]
                   }
                 ) : !hidePagination && totalItems > 0 ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
@@ -10478,7 +10480,7 @@ function MatrxDataTableCore({
                           className: "h-7 w-7",
                           "aria-label": "Open in window",
                           onClick: () => openWindow(selectedRow),
-                          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PanelRight, { className: "h-3.5 w-3.5" })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PanelRight, { className: "h-5 w-5" })
                         }
                       ) }),
                       /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipContent, { children: "Open in window" })
@@ -10537,7 +10539,7 @@ function MatrxDataTableCore({
                             closeWindow();
                             openDetail(windowRow);
                           },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PanelRightOpen, { className: "h-3.5 w-3.5" })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PanelRightOpen, { className: "h-5 w-5" })
                         }
                       ) }),
                       /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipContent, { children: "Open in side panel" })