@ai-matrx/design-system 0.48.16 → 0.49.3

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, d as MatrxDataTableRecordControls, j as MatrxDataTableRead, k as ColumnMarker, M as MatrxColumnDef } from '../types-bIcXnlYS.cjs';
-export { A as AnyOfColumnSearch, l as CellEditType, m as CellEditsMap, f as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, n as MatrxDataTableContextMenuConfig, g as MatrxDataTableCopyConfig, o as MatrxDataTableCoverageConfig, c as MatrxDataTableDensity, p as MatrxDataTableDetailConfig, q as MatrxDataTableEditConfig, r as MatrxDataTableEmptyState, s as MatrxDataTableExpandedDetailConfig, t as MatrxDataTableFacetsConfig, u as MatrxDataTableFilterUi, v as MatrxDataTableGroupingConfig, w as MatrxDataTableHierarchyConfig, x as MatrxDataTableHierarchyMove, y as MatrxDataTableMobileCardControls, z as MatrxDataTableMultiExpandedDetailConfig, B as MatrxDataTableQueryControl, e as MatrxDataTableQueryState, D as MatrxDataTableReadStatus, E as MatrxDataTableSelectionConfig, F as MatrxDataTableSingleExpandedDetailConfig, G as MatrxDataTableSourceProcessing, H as MatrxDataTableSpreadsheetConfig, I as MatrxDataTableStyleConfig, J as MatrxDataTableToolbar, K as MatrxDataTableUrlStateConfig, N as MatrxDataTableVirtualizeConfig, O as MatrxDataTableWindowConfig, P as MatrxTablePagination, Q as NumberFilterOp, R as SavedTableViewTab, U as SortDirection, S as SortState, V as SpreadsheetSelection, W as TableRankedSearchOptions, b as TableSavedViewsProps, T as TableSearchMatchMode, X as TableSearchRole, Y as TableSearchScope, Z as TableViewQuery, _ as TableViewTab, $ as TableViewTabs, a0 as TableViewTabsProps, a1 as TableViewTabsStore, a2 as TextFilterMode, a3 as ToolbarFacet, a4 as inferTableSearchRole, a5 as rankTableSearchRows, a6 as resolveTableSearchScopes } from '../types-bIcXnlYS.cjs';
+import { h as MatrxDataTableProps, i as TableViewSnapshot, d as MatrxDataTableRecordControls, j as MatrxDataTableRead, k as ColumnMarker, M as MatrxColumnDef } from '../types-ClxgLUFi.cjs';
+export { A as AnyOfColumnSearch, l as CellEditType, m as CellEditsMap, f as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, n as MatrxDataTableContextMenuConfig, g as MatrxDataTableCopyConfig, o as MatrxDataTableCoverageConfig, c as MatrxDataTableDensity, p as MatrxDataTableDetailConfig, q as MatrxDataTableEditConfig, r as MatrxDataTableEmptyState, s as MatrxDataTableExpandedDetailConfig, t as MatrxDataTableFacetsConfig, u as MatrxDataTableFilterUi, v as MatrxDataTableGroupingConfig, w as MatrxDataTableHierarchyConfig, x as MatrxDataTableHierarchyMove, y as MatrxDataTableMobileCardControls, z as MatrxDataTableMultiExpandedDetailConfig, B as MatrxDataTableQueryControl, e as MatrxDataTableQueryState, D as MatrxDataTableReadStatus, E as MatrxDataTableSelectionConfig, F as MatrxDataTableSingleExpandedDetailConfig, G as MatrxDataTableSourceProcessing, H as MatrxDataTableSpreadsheetConfig, I as MatrxDataTableStyleConfig, J as MatrxDataTableSummaryConfig, K as MatrxDataTableSummaryContext, N as MatrxDataTableSummaryMetric, O as MatrxDataTableToolbar, P as MatrxDataTableUrlStateConfig, Q as MatrxDataTableVirtualizeConfig, R as MatrxDataTableWindowConfig, U as MatrxTablePagination, V as NumberFilterOp, W as SavedTableViewTab, X as SortDirection, S as SortState, Y as SpreadsheetSelection, Z as TableRankedSearchOptions, b as TableSavedViewsProps, T as TableSearchMatchMode, _ as TableSearchRole, $ as TableSearchScope, a0 as TableViewQuery, a1 as TableViewTab, a2 as TableViewTabs, a3 as TableViewTabsProps, a4 as TableViewTabsStore, a5 as TextFilterMode, a6 as ToolbarFacet, a7 as inferTableSearchRole, a8 as rankTableSearchRows, a9 as resolveTableSearchScopes } from '../types-ClxgLUFi.cjs';
 import { TableReadFailureProps, TableStaleNoticeProps } from './host.cjs';
 export { MatrxDataTableHost, MatrxDataTableProvider, MatrxTableRowAlchemy, TableContextMenuBoundaryProps, TableDoors, TableEntityRefProps, TableLinkProps, TableMenuIconProps, TablePeekProps, TableSidePanelProps, TableToolbarActionProps, TableWindowPanelProps, useMatrxDataTableHost, useMatrxTableRowAlchemy } from './host.cjs';
 import { CopyControlProps } from './copy-types.cjs';

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, d as MatrxDataTableRecordControls, j as MatrxDataTableRead, k as ColumnMarker, M as MatrxColumnDef } from '../types-DVTNnzU5.js';
-export { A as AnyOfColumnSearch, l as CellEditType, m as CellEditsMap, f as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, n as MatrxDataTableContextMenuConfig, g as MatrxDataTableCopyConfig, o as MatrxDataTableCoverageConfig, c as MatrxDataTableDensity, p as MatrxDataTableDetailConfig, q as MatrxDataTableEditConfig, r as MatrxDataTableEmptyState, s as MatrxDataTableExpandedDetailConfig, t as MatrxDataTableFacetsConfig, u as MatrxDataTableFilterUi, v as MatrxDataTableGroupingConfig, w as MatrxDataTableHierarchyConfig, x as MatrxDataTableHierarchyMove, y as MatrxDataTableMobileCardControls, z as MatrxDataTableMultiExpandedDetailConfig, B as MatrxDataTableQueryControl, e as MatrxDataTableQueryState, D as MatrxDataTableReadStatus, E as MatrxDataTableSelectionConfig, F as MatrxDataTableSingleExpandedDetailConfig, G as MatrxDataTableSourceProcessing, H as MatrxDataTableSpreadsheetConfig, I as MatrxDataTableStyleConfig, J as MatrxDataTableToolbar, K as MatrxDataTableUrlStateConfig, N as MatrxDataTableVirtualizeConfig, O as MatrxDataTableWindowConfig, P as MatrxTablePagination, Q as NumberFilterOp, R as SavedTableViewTab, U as SortDirection, S as SortState, V as SpreadsheetSelection, W as TableRankedSearchOptions, b as TableSavedViewsProps, T as TableSearchMatchMode, X as TableSearchRole, Y as TableSearchScope, Z as TableViewQuery, _ as TableViewTab, $ as TableViewTabs, a0 as TableViewTabsProps, a1 as TableViewTabsStore, a2 as TextFilterMode, a3 as ToolbarFacet, a4 as inferTableSearchRole, a5 as rankTableSearchRows, a6 as resolveTableSearchScopes } from '../types-DVTNnzU5.js';
+import { h as MatrxDataTableProps, i as TableViewSnapshot, d as MatrxDataTableRecordControls, j as MatrxDataTableRead, k as ColumnMarker, M as MatrxColumnDef } from '../types-DlgTSJsC.js';
+export { A as AnyOfColumnSearch, l as CellEditType, m as CellEditsMap, f as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, n as MatrxDataTableContextMenuConfig, g as MatrxDataTableCopyConfig, o as MatrxDataTableCoverageConfig, c as MatrxDataTableDensity, p as MatrxDataTableDetailConfig, q as MatrxDataTableEditConfig, r as MatrxDataTableEmptyState, s as MatrxDataTableExpandedDetailConfig, t as MatrxDataTableFacetsConfig, u as MatrxDataTableFilterUi, v as MatrxDataTableGroupingConfig, w as MatrxDataTableHierarchyConfig, x as MatrxDataTableHierarchyMove, y as MatrxDataTableMobileCardControls, z as MatrxDataTableMultiExpandedDetailConfig, B as MatrxDataTableQueryControl, e as MatrxDataTableQueryState, D as MatrxDataTableReadStatus, E as MatrxDataTableSelectionConfig, F as MatrxDataTableSingleExpandedDetailConfig, G as MatrxDataTableSourceProcessing, H as MatrxDataTableSpreadsheetConfig, I as MatrxDataTableStyleConfig, J as MatrxDataTableSummaryConfig, K as MatrxDataTableSummaryContext, N as MatrxDataTableSummaryMetric, O as MatrxDataTableToolbar, P as MatrxDataTableUrlStateConfig, Q as MatrxDataTableVirtualizeConfig, R as MatrxDataTableWindowConfig, U as MatrxTablePagination, V as NumberFilterOp, W as SavedTableViewTab, X as SortDirection, S as SortState, Y as SpreadsheetSelection, Z as TableRankedSearchOptions, b as TableSavedViewsProps, T as TableSearchMatchMode, _ as TableSearchRole, $ as TableSearchScope, a0 as TableViewQuery, a1 as TableViewTab, a2 as TableViewTabs, a3 as TableViewTabsProps, a4 as TableViewTabsStore, a5 as TextFilterMode, a6 as ToolbarFacet, a7 as inferTableSearchRole, a8 as rankTableSearchRows, a9 as resolveTableSearchScopes } from '../types-DlgTSJsC.js';
 import { TableReadFailureProps, TableStaleNoticeProps } from './host.js';
 export { MatrxDataTableHost, MatrxDataTableProvider, MatrxTableRowAlchemy, TableContextMenuBoundaryProps, TableDoors, TableEntityRefProps, TableLinkProps, TableMenuIconProps, TablePeekProps, TableSidePanelProps, TableToolbarActionProps, TableWindowPanelProps, useMatrxDataTableHost, useMatrxTableRowAlchemy } from './host.js';
 import { CopyControlProps } from './copy-types.js';

package/dist/data-table/index.js

@@ -34934,6 +34934,16 @@ var selectTriggerVariants = cva2(
     }
   }
 );
+function SelectChevron({ className, size = "default" }) {
+  return /* @__PURE__ */ jsx11(
+    RadixChevronDownIcon,
+    {
+      "aria-hidden": "true",
+      "data-select-chevron": "",
+      className: cn(size === "sm" ? "h-3.5 w-3.5" : "h-4 w-4", "shrink-0 opacity-50", className)
+    }
+  );
+}
 var SelectTrigger = React8.forwardRef(({ className, children, hideArrow = false, size, ...props }, ref) => /* @__PURE__ */ jsxs7(
   SelectPrimitive.Trigger,
   {
@@ -34942,7 +34952,7 @@ var SelectTrigger = React8.forwardRef(({ className, children, hideArrow = false,
     ...props,
     children: [
       children,
-      !hideArrow && /* @__PURE__ */ jsx11(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx11(RadixChevronDownIcon, { className: "h-4 w-4 shrink-0 opacity-50" }) })
+      !hideArrow && /* @__PURE__ */ jsx11(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx11(SelectChevron, { size: size === "sm" ? "sm" : "default" }) })
     ]
   }
 ));
@@ -36369,7 +36379,8 @@ function GenericTablePagination({
   labelFormat,
   compact = false,
   hideEntriesInfo = false,
-  progressive
+  progressive,
+  countUnavailable
 }) {
   const host = useMatrxDataTableHost();
   const positivePageSizes = pageSizeOptions.filter((size) => size > 0);
@@ -36444,7 +36455,16 @@ function GenericTablePagination({
       "div",
       {
         className: cn("flex min-w-0 justify-center", infoContainerClassName),
-        children: showPageInfo && !hideEntriesInfo && /* @__PURE__ */ jsxs15(Fragment3, { children: [
+        children: showPageInfo && !hideEntriesInfo && countUnavailable === "failed" ? /* @__PURE__ */ jsx23(
+          "span",
+          {
+            role: "img",
+            "aria-label": "Row count unavailable",
+            title: "Row count unavailable",
+            className: "truncate text-sm tabular-nums text-muted-foreground",
+            children: /* @__PURE__ */ jsx23("span", { "aria-hidden": "true", children: "\u2014" })
+          }
+        ) : showPageInfo && !hideEntriesInfo && !countUnavailable && /* @__PURE__ */ jsxs15(Fragment3, { children: [
           /* @__PURE__ */ jsx23("span", { className: "truncate text-xs tabular-nums text-muted-foreground sm:hidden", children: labelFormat ? formatLabel(startItem, endItem, totalItems) : unknownTotal ? defaultLabelFormat(startItem, endItem, totalItems) : totalItems === 0 ? "0 rows" : progressive ? `${endItem}/${totalItems} ${progressive.loadedCount !== void 0 && progressive.loadedCount !== totalItems ? "matching" : "loaded"}` : `${startItem}\u2013${endItem} of ${totalItems}` }),
           /* @__PURE__ */ jsx23(
             "span",
@@ -48097,6 +48117,7 @@ function MatrxDataTableCore(coreProps) {
     selection: selectionConfig,
     rowActions,
     footerRows = [],
+    summary,
     rowClassName,
     rowVersion,
     cellClassName,
@@ -48152,6 +48173,17 @@ function MatrxDataTableCore(coreProps) {
   const CHECKBOX_TAP_AREA = "h-4 w-4 touch-manipulation";
   const mobileCardsClass = mobileCardsBreakpoint === "lg" ? "lg:hidden" : "sm:hidden";
   const tableWithCardsClass = mobileCardsBreakpoint === "lg" ? "max-lg:hidden" : "max-sm:hidden";
+  const cardsQuery = mobileCardsBreakpoint === "lg" ? "(max-width: 1023px)" : "(max-width: 639px)";
+  const [cardsActive, setCardsActive] = useState25(null);
+  useEffect20(() => {
+    if (!mobileCards || typeof window === "undefined" || !window.matchMedia) return;
+    const mql = window.matchMedia(cardsQuery);
+    const read2 = () => setCardsActive(mql.matches);
+    read2();
+    mql.addEventListener?.("change", read2);
+    return () => mql.removeEventListener?.("change", read2);
+  }, [mobileCards, cardsQuery]);
+  const inactiveProps = (active) => cardsActive === null || active ? {} : { inert: true, "aria-hidden": true };
   const controlledQuery = query?.mode === "controlled" || query?.mode === "controlled-local" || query?.mode === "controlled-append" ? query : null;
   const remoteQuery = query?.mode === "controlled" || query?.mode === "controlled-append" ? query : null;
   const sourceProcessing = query?.mode === "controlled" || query?.mode === "controlled-local" ? query.sourceProcessing : appendQuery?.sourceProcessing;
@@ -49466,6 +49498,48 @@ function MatrxDataTableCore(coreProps) {
     return def !== void 0 && f.value !== def;
   });
   const hasActiveFilters = activeFilterCount > 0 || Boolean(searchValue.trim()) || intelligentSearchEnabled && searchScope !== "all" || Boolean(anyOfValue.trim()) || completeLayeredFilterRules(layeredFilters).length > 0 || facetActive;
+  const summaryIsFiltered = activeFilterCount > 0 || Boolean(searchValue.trim()) || Boolean(anyOfValue.trim()) || completeLayeredFilterRules(layeredFilters).length > 0 || facetActive;
+  const summaryCoverage = remoteQuery?.mode === "controlled" ? "page" : appendQuery !== null || !allRowsAreLoaded ? "loaded" : "all";
+  const summaryContext = {
+    rows: processed,
+    isFiltered: summaryIsFiltered,
+    coverage: summaryCoverage
+  };
+  const summaryCanReadRows = !readView.failure && (!isLoading || data.length > 0);
+  const summaryUsesSource = summary?.source !== void 0;
+  const summaryCaption = (() => {
+    if (summaryUsesSource) {
+      const sourceCaption = summary?.source?.isFiltered ? "Filtered source totals" : "Source totals";
+      return readView.stale ? `${sourceCaption} (stale)` : sourceCaption;
+    }
+    const base = summaryCoverage === "all" ? "rows" : summaryCoverage === "loaded" ? "loaded rows" : "current page";
+    const caption = summaryIsFiltered ? `Filtered ${base}` : base === "rows" ? "All rows" : base[0].toUpperCase() + base.slice(1);
+    return readView.stale ? `${caption} (stale)` : caption;
+  })();
+  const resolveSummaryValue = (sourceValue, callback) => {
+    if (!summaryCanReadRows) {
+      return readView.failure ? { value: "Unavailable", unavailable: true } : { value: "Loading", unavailable: false };
+    }
+    if (summaryUsesSource) {
+      return sourceValue === void 0 ? { value: "Unavailable", unavailable: true } : { value: sourceValue, unavailable: false };
+    }
+    if (!callback) return { value: "Unavailable", unavailable: true };
+    try {
+      return { value: callback(summaryContext), unavailable: false };
+    } catch {
+      return { value: "Unavailable", unavailable: true };
+    }
+  };
+  const summaryMetrics = summary?.metrics.map((metric) => ({
+    id: metric.id,
+    label: metric.label,
+    ...resolveSummaryValue(summary.source?.metrics?.[metric.id], metric.value)
+  })) ?? [];
+  const summaryTotals = Object.entries(summary?.totals ?? {}).map(([id, value]) => ({
+    id,
+    ...resolveSummaryValue(summary?.source?.totals?.[id], value)
+  }));
+  const hasSummaryTotals = summaryTotals.length > 0;
   const changeCount = useMemo11(() => {
     let n2 = 0;
     for (const fields of Object.values(edits)) {
@@ -50367,7 +50441,16 @@ function MatrxDataTableCore(coreProps) {
     controlledQuery,
     emitControlledQueryChange
   ]);
-  const footerEpoch = useRenderEpoch([...chromeGeometry, footerRows]);
+  const footerEpoch = useRenderEpoch([
+    ...chromeGeometry,
+    footerRows,
+    summaryContext.rows,
+    summaryContext.isFiltered,
+    summaryContext.coverage,
+    summaryCaption,
+    summaryUsesSource,
+    ...summaryTotals.flatMap((total) => [total.id, total.value, total.unavailable])
+  ]);
   const paginationEpoch = useRenderEpoch([
     totalItems,
     sourceTotal,
@@ -50904,6 +50987,25 @@ function MatrxDataTableCore(coreProps) {
                   notice,
                   savedViewError ? /* @__PURE__ */ jsx50(ErrorBox, { className: "shrink-0 text-xs text-destructive", message: savedViewError, operation: "Save or apply a saved view", origin: "design-system/MatrxDataTable" }) : null,
                   toolbarActionError ? /* @__PURE__ */ jsx50(ErrorBox, { className: "shrink-0 text-xs text-destructive", message: toolbarActionError, operation: "Run a table toolbar action", origin: "design-system/MatrxDataTable" }) : null,
+                  summaryMetrics.length > 0 ? /* @__PURE__ */ jsxs39(
+                    "section",
+                    {
+                      "data-matrx-table-summary": true,
+                      "data-matrx-table-summary-scope": summaryUsesSource ? "source" : summaryCoverage,
+                      "aria-label": `Table summary: ${summaryCaption}`,
+                      className: "flex shrink-0 flex-wrap items-stretch gap-2",
+                      children: [
+                        /* @__PURE__ */ jsx50("span", { className: "flex items-center px-1 text-xs font-medium text-muted-foreground", children: summaryCaption }),
+                        summaryMetrics.map((metric) => /* @__PURE__ */ jsxs39("div", { className: "min-w-24 rounded-md border border-border bg-card px-3 py-2 shadow-xs", children: [
+                          /* @__PURE__ */ jsx50("div", { className: "text-xs text-muted-foreground", children: metric.label }),
+                          /* @__PURE__ */ jsxs39("div", { className: "mt-0.5 text-sm font-semibold tabular-nums text-foreground", children: [
+                            metric.value,
+                            metric.unavailable ? /* @__PURE__ */ jsx50(ErrorBox, { as: "span", className: "sr-only", message: `${metric.label} is unavailable`, operation: "Summarize this table", origin: "design-system/MatrxDataTable" }) : null
+                          ] })
+                        ] }, metric.id))
+                      ]
+                    }
+                  ) : null,
                   /* @__PURE__ */ jsx50(MatrxTableChrome, { part: "toolbar", epoch: toolbarEpoch, render: () => placeToolbar(!hideToolbar && (viewTabs || toolbar?.title || toolbar?.titleCount || showSearch || toolbar?.customSearch || toolbar?.anyOf || toolbar?.layeredFilters || toolbar?.facets && toolbar.facets.length > 0 || toolbar?.leading || toolbar?.actions || toolbar?.refresh || toolbar?.add || tableId && SavedViews || hasActiveFilters || showToolbarCopy || columns.length > 0) && /* @__PURE__ */ jsxs39(
                     TableTitleRow,
                     {
@@ -51240,6 +51342,7 @@ function MatrxDataTableCore(coreProps) {
                         "div",
                         {
                           ref: cardsScrollRef,
+                          ...inactiveProps(cardsActive === true),
                           "data-matrx-table-cards-scroll": true,
                           "aria-busy": isLoading || isFetching,
                           ...appendQuery === null ? {} : { style: { containerType: "inline-size" } },
@@ -51348,6 +51451,7 @@ function MatrxDataTableCore(coreProps) {
                         "div",
                         {
                           ref: scrollRef,
+                          ...mobileCards ? inactiveProps(cardsActive === false) : {},
                           "data-matrx-table-scroll": true,
                           onScroll: updateScrollHint,
                           ...spreadsheetEnabled ? {
@@ -51744,50 +51848,111 @@ function MatrxDataTableCore(coreProps) {
                                       }
                                     ) }) : null
                                   ] }),
-                                  /* @__PURE__ */ jsx50(MatrxTableChrome, { part: "footer", epoch: footerEpoch, render: () => footerRows.length > 0 ? /* @__PURE__ */ jsx50("tfoot", { className: "border-t-2 border-border bg-muted/50 font-semibold", children: footerRows.map((row, index) => /* @__PURE__ */ jsxs39("tr", { children: [
-                                    selection ? /* @__PURE__ */ jsx50("td", { className: "px-2 py-2" }) : null,
-                                    columnSpacers && columnSpacers.start > 0 ? /* @__PURE__ */ jsx50(
-                                      "td",
-                                      {
-                                        "aria-hidden": "true",
-                                        "data-matrx-table-column-spacer": "start",
-                                        className: "border-0 p-0",
-                                        style: { width: `${columnSpacers.start}px`, minWidth: `${columnSpacers.start}px` }
-                                      },
-                                      "matrx-column-spacer-start"
-                                    ) : null,
-                                    renderedColumns.map((column) => /* @__PURE__ */ jsx50(
-                                      "td",
-                                      {
-                                        className: cn(
-                                          "px-2 py-2 align-middle",
-                                          (column.compact || resolveColumnMarker(column) !== void 0) && "px-1",
-                                          column.className,
-                                          column.align === "center" && "text-center",
-                                          column.align === "right" && "text-right"
-                                        ),
-                                        style: columnWidthVar(
-                                          resolveColumnMarker(column) && column.width === void 0 ? 40 : column.width,
-                                          windowedWidthFor(columnId(column), column.width),
-                                          columnId(column),
-                                          resizableColumns && column.resizable !== false
-                                        ),
-                                        children: renderCell(row, column, index)
-                                      },
-                                      columnId(column)
-                                    )),
-                                    columnSpacers && columnSpacers.end > 0 ? /* @__PURE__ */ jsx50(
-                                      "td",
-                                      {
-                                        "aria-hidden": "true",
-                                        "data-matrx-table-column-spacer": "end",
-                                        className: "border-0 p-0",
-                                        style: { width: `${columnSpacers.end}px`, minWidth: `${columnSpacers.end}px` }
-                                      },
-                                      "matrx-column-spacer-end"
-                                    ) : null,
-                                    showActionsCol ? /* @__PURE__ */ jsx50("td", {}) : null
-                                  ] }, `footer-${index}`)) }) : null })
+                                  /* @__PURE__ */ jsx50(MatrxTableChrome, { part: "footer", epoch: footerEpoch, render: () => footerRows.length > 0 || hasSummaryTotals ? /* @__PURE__ */ jsxs39("tfoot", { className: cn(
+                                    "border-t-2 border-border bg-muted/50 font-semibold",
+                                    hasSummaryTotals && "sticky bottom-0 z-10 bg-muted/95 backdrop-blur-sm"
+                                  ), children: [
+                                    hasSummaryTotals ? /* @__PURE__ */ jsxs39(Fragment12, { children: [
+                                      /* @__PURE__ */ jsx50("tr", { "data-matrx-table-summary-total-caption": true, children: /* @__PURE__ */ jsxs39("td", { colSpan: renderedColSpan, className: "px-2 pt-2 text-xs font-medium text-muted-foreground", children: [
+                                        summaryCaption,
+                                        readView.stale ? /* @__PURE__ */ jsx50("span", { className: "ml-1 text-amber-700 dark:text-amber-300", children: "Retained rows may be out of date." }) : null
+                                      ] }) }),
+                                      /* @__PURE__ */ jsxs39("tr", { "data-matrx-table-summary-totals": true, children: [
+                                        selection ? /* @__PURE__ */ jsx50("td", { className: "px-2 py-2" }) : null,
+                                        columnSpacers && columnSpacers.start > 0 ? /* @__PURE__ */ jsx50(
+                                          "td",
+                                          {
+                                            "aria-hidden": "true",
+                                            "data-matrx-table-column-spacer": "start",
+                                            className: "border-0 p-0",
+                                            style: { width: `${columnSpacers.start}px`, minWidth: `${columnSpacers.start}px` }
+                                          },
+                                          "matrx-summary-column-spacer-start"
+                                        ) : null,
+                                        renderedColumns.map((column) => {
+                                          const total = summaryTotals.find((candidate) => candidate.id === columnId(column));
+                                          return /* @__PURE__ */ jsxs39(
+                                            "td",
+                                            {
+                                              className: cn(
+                                                "px-2 py-2 align-middle",
+                                                (column.compact || resolveColumnMarker(column) !== void 0) && "px-1",
+                                                column.className,
+                                                column.align === "center" && "text-center",
+                                                column.align === "right" && "text-right"
+                                              ),
+                                              style: columnWidthVar(
+                                                resolveColumnMarker(column) && column.width === void 0 ? 40 : column.width,
+                                                windowedWidthFor(columnId(column), column.width),
+                                                columnId(column),
+                                                resizableColumns && column.resizable !== false
+                                              ),
+                                              children: [
+                                                total?.value,
+                                                total?.unavailable ? /* @__PURE__ */ jsx50(ErrorBox, { as: "span", className: "sr-only", message: `${columnId(column)} total is unavailable`, operation: "Total this column", origin: "design-system/MatrxDataTable" }) : null
+                                              ]
+                                            },
+                                            columnId(column)
+                                          );
+                                        }),
+                                        columnSpacers && columnSpacers.end > 0 ? /* @__PURE__ */ jsx50(
+                                          "td",
+                                          {
+                                            "aria-hidden": "true",
+                                            "data-matrx-table-column-spacer": "end",
+                                            className: "border-0 p-0",
+                                            style: { width: `${columnSpacers.end}px`, minWidth: `${columnSpacers.end}px` }
+                                          },
+                                          "matrx-summary-column-spacer-end"
+                                        ) : null,
+                                        showActionsCol ? /* @__PURE__ */ jsx50("td", {}) : null
+                                      ] })
+                                    ] }) : null,
+                                    footerRows.map((row, index) => /* @__PURE__ */ jsxs39("tr", { children: [
+                                      selection ? /* @__PURE__ */ jsx50("td", { className: "px-2 py-2" }) : null,
+                                      columnSpacers && columnSpacers.start > 0 ? /* @__PURE__ */ jsx50(
+                                        "td",
+                                        {
+                                          "aria-hidden": "true",
+                                          "data-matrx-table-column-spacer": "start",
+                                          className: "border-0 p-0",
+                                          style: { width: `${columnSpacers.start}px`, minWidth: `${columnSpacers.start}px` }
+                                        },
+                                        "matrx-column-spacer-start"
+                                      ) : null,
+                                      renderedColumns.map((column) => /* @__PURE__ */ jsx50(
+                                        "td",
+                                        {
+                                          className: cn(
+                                            "px-2 py-2 align-middle",
+                                            (column.compact || resolveColumnMarker(column) !== void 0) && "px-1",
+                                            column.className,
+                                            column.align === "center" && "text-center",
+                                            column.align === "right" && "text-right"
+                                          ),
+                                          style: columnWidthVar(
+                                            resolveColumnMarker(column) && column.width === void 0 ? 40 : column.width,
+                                            windowedWidthFor(columnId(column), column.width),
+                                            columnId(column),
+                                            resizableColumns && column.resizable !== false
+                                          ),
+                                          children: renderCell(row, column, index)
+                                        },
+                                        columnId(column)
+                                      )),
+                                      columnSpacers && columnSpacers.end > 0 ? /* @__PURE__ */ jsx50(
+                                        "td",
+                                        {
+                                          "aria-hidden": "true",
+                                          "data-matrx-table-column-spacer": "end",
+                                          className: "border-0 p-0",
+                                          style: { width: `${columnSpacers.end}px`, minWidth: `${columnSpacers.end}px` }
+                                        },
+                                        "matrx-column-spacer-end"
+                                      ) : null,
+                                      showActionsCol ? /* @__PURE__ */ jsx50("td", {}) : null
+                                    ] }, `footer-${index}`))
+                                  ] }) : null })
                                 ]
                               }
                             )
@@ -51953,6 +52118,7 @@ function MatrxDataTableCore(coreProps) {
                         GenericTablePagination,
                         {
                           totalItems,
+                          ...readView.failure ? { countUnavailable: "failed" } : read?.status === "loading" && data.length === 0 ? { countUnavailable: "loading" } : {},
                           ...paginationLabelFormat ? { labelFormat: paginationLabelFormat } : sourceTotal === void 0 ? {} : { labelFormat: (start, end, total) => `${formatCount(start)}\u2013${formatCount(end)} of ${formatCount(total)} matching \xB7 ${formatCount(data.length)} / ${formatCount(sourceTotal)} loaded` },
                           ...localProgressiveEnabled ? { progressive: {
                             shownCount: progressiveRows.shownCount,
@@ -52634,7 +52800,7 @@ var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 var MENU_SURFACE_CLASS = "z-[10001] min-w-[8rem] max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto overflow-x-hidden overscroll-contain rounded-md border bg-popover p-1 text-popover-foreground";
-var MENU_ITEM_CLASS = "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
+var MENU_ITEM_CLASS = "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
 var MENU_INDICATOR_ITEM_CLASS = "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
 var DropdownMenuSubTrigger = React22.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs40(
   DropdownMenuPrimitive.SubTrigger,