@ai-matrx/design-system 0.60.8 → 0.60.9

package/dist/data-table/index.js

@@ -34013,7 +34013,7 @@ function ScopeFilter({ filter, id }) {
         value: filter.value,
         disabled: filter.disabled,
         onChange: (event) => filter.onChange?.(event.target.value),
-        className: "h-[var(--matrx-table-control-size,2rem)] min-w-0 max-w-full rounded-md border border-input bg-background px-2 text-xs text-foreground disabled:opacity-50",
+        className: "h-[var(--matrx-table-control-size,2rem)] min-w-0 max-w-full rounded-md border border-input bg-background px-2 text-sm text-foreground disabled:opacity-50",
         children: filter.options?.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
       }
     )
@@ -34029,7 +34029,7 @@ function TableScopeBar({ lanes, value, onChange, dimension, organization }) {
           "aria-label": "Record scope",
           value,
           onChange: (event) => onChange(event.target.value),
-          className: "h-[var(--matrx-table-control-size,2rem)] w-full rounded-md border border-input bg-background px-2 text-xs sm:hidden",
+          className: "h-[var(--matrx-table-control-size,2rem)] w-full rounded-md border border-input bg-background px-2 text-sm sm:hidden",
           children: lanes.map((lane) => /* @__PURE__ */ jsxs("option", { value: lane.value, disabled: lane.disabled, children: [
             lane.label,
             lane.count == null ? "" : ` (${lane.count.toLocaleString()})`
@@ -34045,10 +34045,10 @@ function TableScopeBar({ lanes, value, onChange, dimension, organization }) {
           "aria-label": lane.count == null ? lane.label : `${lane.label}, ${lane.count.toLocaleString()} records`,
           disabled: lane.disabled,
           onClick: () => onChange(lane.value),
-          className: `h-[var(--matrx-table-control-size,2rem)] shrink-0 whitespace-nowrap border-b-2 px-2 text-xs disabled:opacity-50 ${value === lane.value ? "border-primary font-semibold text-foreground" : "border-transparent text-muted-foreground"}`,
+          className: `h-[var(--matrx-table-control-size,2rem)] shrink-0 whitespace-nowrap border-b-2 px-2 text-sm font-medium disabled:opacity-50 ${value === lane.value ? "border-primary font-semibold text-foreground" : "border-transparent text-muted-foreground"}`,
           children: [
             lane.label,
-            lane.count == null ? null : /* @__PURE__ */ jsx("span", { className: "ml-1 text-[10px] tabular-nums", children: lane.count.toLocaleString() })
+            lane.count == null ? null : /* @__PURE__ */ jsx("span", { className: "ml-1 text-xs tabular-nums", children: lane.count.toLocaleString() })
           ]
         },
         lane.value
@@ -52805,6 +52805,8 @@ function MatrxDataTableCore(coreProps) {
     stickyHeader = true,
     className,
     tableClassName,
+    frameHeight = "fill",
+    emptyHeader = "show",
     mobileCards,
     mobileCardsBreakpoint = "sm",
     getRowHref,
@@ -53745,6 +53747,10 @@ function MatrxDataTableCore(coreProps) {
   ]);
   const totalItems = appendQuery ? appendQuery.pagination.totalItems ?? processed.length : remoteQuery?.mode === "controlled" ? Math.max(0, remoteQuery.totalItems) : processed.length;
   const sourceTotal = sourceProcessing?.sourceTotal;
+  const sortSourceTotal = appendQuery ? appendQuery.pagination.sourceRecords ? appendQuery.pagination.sourceRecords.total : appendQuery.pagination.totalItems : remoteQuery?.mode === "controlled" ? remoteQuery.totalItems : sourceTotal;
+  const sortSourceLoaded = appendQuery?.pagination.sourceRecords?.loaded ?? data.length;
+  const sortSourceIsPartial = sortSourceTotal === void 0 ? Boolean(appendQuery?.pagination.hasNextPage || appendQuery?.pagination.error) : sortSourceLoaded < sortSourceTotal;
+  const localSortNotice = sort !== null && !sourceOwnsSort && (appendQuery !== null || remoteQuery?.mode === "controlled") && sortSourceIsPartial ? appendQuery ? "Sorted within loaded rows; unloaded rows have not been included." : "Sorted within this source page; other pages keep the server order." : null;
   const allRowsAreLoaded = !remoteQuery && (sourceTotal === void 0 || sourceTotal <= data.length);
   const effectivePageSize = remoteQuery ? Math.max(pageSize, 1) : pageSize === 0 ? Math.max(totalItems, 1) : Math.max(pageSize, 1);
   const pageCount = Math.max(1, Math.ceil(totalItems / effectivePageSize));
@@ -55446,6 +55452,9 @@ function MatrxDataTableCore(coreProps) {
           // horizontally. The translucent zebra/hover tints remain
           // desktop-only so densely layered mobile content stays crisp.
           "group/matrx-row border-b border-border/60 bg-card transition-colors",
+          // A row a host's keyboard cursor focuses (tabIndex -1, e.g. the list shell's row
+          // keys) shows where it is — owned here, never by a host's `[&_[data-row-id]]` reach.
+          "focus-visible:bg-accent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary",
           (detailEnabled || Boolean(onRowOpen) || canExpandRow(row)) && "cursor-pointer",
           rowClassName?.(row, index),
           draggedRowId === id && "opacity-40",
@@ -55877,7 +55886,6 @@ function MatrxDataTableCore(coreProps) {
                   notice,
                   savedViewError ? /* @__PURE__ */ jsx60(ErrorBox, { className: "shrink-0 text-xs text-destructive", message: savedViewError, operation: "Save or apply a saved view", origin: "design-system/MatrxDataTable" }) : null,
                   toolbarActionError ? /* @__PURE__ */ jsx60(ErrorBox, { className: "shrink-0 text-xs text-destructive", message: toolbarActionError, operation: "Run a table toolbar action", origin: "design-system/MatrxDataTable" }) : null,
-                  scopeBar ? /* @__PURE__ */ jsx60(TableScopeBar, { ...scopeBar }) : null,
                   summaryMetrics.length > 0 ? /* @__PURE__ */ jsx60(
                     "section",
                     {
@@ -55886,7 +55894,7 @@ function MatrxDataTableCore(coreProps) {
                       "aria-label": `Table summary: ${summaryCaption}`,
                       className: "flex w-full min-w-0 shrink-0 flex-nowrap items-stretch gap-2 overflow-x-auto overscroll-x-contain",
                       children: summaryMetrics.map((metric) => /* @__PURE__ */ jsxs49("div", { className: "min-w-24 shrink-0 whitespace-nowrap rounded-md border border-border bg-card px-3 py-2 shadow-xs", children: [
-                        /* @__PURE__ */ jsx60("div", { className: "text-xs text-muted-foreground", children: metric.label }),
+                        /* @__PURE__ */ jsx60("div", { className: "text-sm font-medium text-muted-foreground", children: metric.label }),
                         /* @__PURE__ */ jsxs49("div", { className: "mt-0.5 text-sm font-semibold tabular-nums text-foreground", children: [
                           metric.value,
                           metric.unavailable ? /* @__PURE__ */ jsx60(ErrorBox, { as: "span", className: "sr-only", message: `${metric.label} is unavailable`, operation: "Summarize this table", origin: "design-system/MatrxDataTable" }) : null
@@ -55894,359 +55902,372 @@ function MatrxDataTableCore(coreProps) {
                       ] }, metric.id))
                     }
                   ) : null,
-                  /* @__PURE__ */ jsx60(MatrxTableChrome, { part: "toolbar", epoch: toolbarEpoch, render: () => placeToolbar(!hideToolbar && (showViewTabs || 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 || savedViewsId && SavedViews || hasActiveFilters || showToolbarCopy || columns.length > 0) && /* @__PURE__ */ jsxs49(
-                    TableTitleRow,
-                    {
-                      ...toolbar?.singleRow ? { singleRow: true } : {},
-                      tabs: viewTabs && viewTabsStore ? /* @__PURE__ */ jsx60(TableViewWorkspace, { snapshot: currentViewSnapshot, onApply: applyLatestSavedView, related: relatedTableActions, ...viewTabsStore ? { store: viewTabsStore } : {} }, savedViewsId ?? "table") : viewTabs && savedViewsId && SavedViews ? /* @__PURE__ */ jsx60(SavedViews, { tableId: savedViewsId, snapshot: currentViewSnapshot, defaultSnapshot: declaredDefaultViewSnapshot, onApply: applyLatestSavedView, presentation: "tabs", related: relatedTableActions }) : void 0,
-                      ...toolbar?.title === void 0 ? {} : { title: toolbar.title },
-                      ...toolbar?.titleCount === void 0 ? {} : { count: toolbar.titleCount },
-                      context: savedViewsId && SavedViews && !viewTabs ? /* @__PURE__ */ jsx60("span", { "data-matrx-table-view-control": true, children: /* @__PURE__ */ jsx60(
-                        SavedViews,
-                        {
-                          tableId: savedViewsId,
-                          snapshot: currentViewSnapshot,
-                          defaultSnapshot: declaredDefaultViewSnapshot,
-                          onApply: applyLatestSavedView
-                        }
-                      ) }) : void 0,
-                      search: (toolbarSearch.node = toolbar?.customSearch ?? (showSearch ? intelligentSearchEnabled ? /* @__PURE__ */ jsx60(
-                        TableSearch,
-                        {
-                          value: searchValue,
-                          onChange: setSearchValue,
-                          scope: searchScope,
-                          onScopeChange: setSearchScope,
-                          scopes: intelligentSearchScopes,
-                          ...toolbar?.searchPlaceholder === void 0 ? {} : { placeholder: toolbar.searchPlaceholder }
-                        }
-                      ) : /* @__PURE__ */ jsxs49(
-                        "div",
+                  scopeBar ? /* @__PURE__ */ jsx60(TableScopeBar, { ...scopeBar }) : null,
+                  /* @__PURE__ */ jsx60(MatrxTableChrome, { part: "toolbar", epoch: toolbarEpoch, render: () => {
+                    const tabsNode = viewTabs && viewTabsStore ? /* @__PURE__ */ jsx60(TableViewWorkspace, { snapshot: currentViewSnapshot, onApply: applyLatestSavedView, related: relatedTableActions, ...viewTabsStore ? { store: viewTabsStore } : {} }, savedViewsId ?? "table") : viewTabs && savedViewsId && SavedViews ? /* @__PURE__ */ jsx60(SavedViews, { tableId: savedViewsId, snapshot: currentViewSnapshot, defaultSnapshot: declaredDefaultViewSnapshot, onApply: applyLatestSavedView, presentation: "tabs", related: relatedTableActions }) : void 0;
+                    const tabsPlaced = Boolean(toolbar && "tabsPortalInto" in toolbar);
+                    const tabsTarget = toolbar && "tabsPortalInto" in toolbar ? toolbar.tabsPortalInto : null;
+                    return /* @__PURE__ */ jsxs49(Fragment20, { children: [
+                      tabsPlaced && tabsTarget && tabsNode && !hideToolbar ? createPortal4(
+                        /* @__PURE__ */ jsx60("div", { "data-matrx-table-toolbar-tabs": "", "data-matrx-table-tabs-placed": "", className: "flex min-w-0 max-w-full [&_[data-matrx-table-tabs]]:border-b-0", children: tabsNode }),
+                        tabsTarget
+                      ) : null,
+                      placeToolbar(!hideToolbar && (showViewTabs || 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 || savedViewsId && SavedViews || hasActiveFilters || showToolbarCopy || columns.length > 0) && /* @__PURE__ */ jsxs49(
+                        TableTitleRow,
                         {
-                          "data-matrx-table-search": true,
-                          className: cn(
-                            "flex min-w-0 flex-1 sm:w-full sm:flex-none",
-                            toolbar?.searchMatch ? "sm:max-w-md" : "sm:max-w-xs"
-                          ),
+                          ...toolbar?.singleRow ? { singleRow: true } : {},
+                          tabs: tabsPlaced ? void 0 : tabsNode,
+                          ...toolbar?.title === void 0 ? {} : { title: toolbar.title },
+                          ...toolbar?.titleCount === void 0 ? {} : { count: toolbar.titleCount },
+                          context: savedViewsId && SavedViews && !viewTabs ? /* @__PURE__ */ jsx60("span", { "data-matrx-table-view-control": true, children: /* @__PURE__ */ jsx60(
+                            SavedViews,
+                            {
+                              tableId: savedViewsId,
+                              snapshot: currentViewSnapshot,
+                              defaultSnapshot: declaredDefaultViewSnapshot,
+                              onApply: applyLatestSavedView
+                            }
+                          ) }) : void 0,
+                          search: (toolbarSearch.node = toolbar?.customSearch ?? (showSearch ? intelligentSearchEnabled ? /* @__PURE__ */ jsx60(
+                            TableSearch,
+                            {
+                              value: searchValue,
+                              onChange: setSearchValue,
+                              scope: searchScope,
+                              onScopeChange: setSearchScope,
+                              scopes: intelligentSearchScopes,
+                              ...toolbar?.searchPlaceholder === void 0 ? {} : { placeholder: toolbar.searchPlaceholder }
+                            }
+                          ) : /* @__PURE__ */ jsxs49(
+                            "div",
+                            {
+                              "data-matrx-table-search": true,
+                              className: cn(
+                                "flex min-w-0 flex-1 sm:w-full sm:flex-none",
+                                toolbar?.searchMatch ? "sm:max-w-md" : "sm:max-w-xs"
+                              ),
+                              children: [
+                                /* @__PURE__ */ jsxs49("div", { className: "relative min-w-0 flex-1", children: [
+                                  /* @__PURE__ */ jsx60(Search, { className: "absolute left-2 top-1/2 h-5 w-5 -translate-y-1/2 text-muted-foreground" }),
+                                  /* @__PURE__ */ jsx60(
+                                    Input,
+                                    {
+                                      value: searchValue,
+                                      onChange: (e) => setSearchValue(e.target.value),
+                                      placeholder: toolbar?.searchPlaceholder ?? "Search\u2026",
+                                      className: cn(
+                                        "h-8 pl-7 pr-7 text-sm",
+                                        toolbar?.searchMatch && "rounded-r-none"
+                                      ),
+                                      style: { fontSize: "16px" }
+                                    }
+                                  ),
+                                  searchValue ? /* @__PURE__ */ jsxs49(Tooltip, { children: [
+                                    /* @__PURE__ */ jsx60(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx60(
+                                      "button",
+                                      {
+                                        type: "button",
+                                        "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__ */ jsx60(X, { className: "h-5 w-5" })
+                                      }
+                                    ) }),
+                                    /* @__PURE__ */ jsx60(TooltipContent, { children: "Clear search" })
+                                  ] }) : null
+                                ] }),
+                                toolbar?.searchMatch ? /* @__PURE__ */ jsxs49(Tooltip, { children: [
+                                  /* @__PURE__ */ jsx60(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs49(
+                                    Button,
+                                    {
+                                      type: "button",
+                                      variant: searchMatchMode === "whole_words" ? "secondary" : "outline",
+                                      size: "sm",
+                                      className: "h-8 shrink-0 gap-1 rounded-l-none border-l-0 px-2 text-xs",
+                                      "aria-pressed": searchMatchMode === "whole_words",
+                                      "aria-label": `Search match: ${searchMatchMode === "whole_words" ? "whole words" : "contains text"}`,
+                                      onClick: () => setSearchMatchMode(
+                                        searchMatchMode === "whole_words" ? "contains" : "whole_words"
+                                      ),
+                                      children: [
+                                        /* @__PURE__ */ jsx60(WholeWord, { className: "h-5 w-5" }),
+                                        searchMatchMode === "whole_words" ? "Whole words" : "Contains"
+                                      ]
+                                    }
+                                  ) }),
+                                  /* @__PURE__ */ jsx60(TooltipContent, { children: searchMatchMode === "whole_words" ? "Whole words \u2014 click to match text anywhere" : "Contains text \u2014 click to require whole words" })
+                                ] }) : null
+                              ]
+                            }
+                          ) : null), pinnedFolded && pinnedRowActive ? void 0 : toolbarSearch.node),
                           children: [
-                            /* @__PURE__ */ jsxs49("div", { className: "relative min-w-0 flex-1", children: [
+                            toolbar?.layeredFilters ? /* @__PURE__ */ jsx60(
+                              LayeredFilterBuilder,
+                              {
+                                fields: toolbar.layeredFilters.fields,
+                                rules: layeredFilters,
+                                onChange: setLayeredFilters,
+                                maxRules: toolbar.layeredFilters.maxRules,
+                                label: toolbar.layeredFilters.label
+                              }
+                            ) : null,
+                            toolbar?.anyOf ? /* @__PURE__ */ jsxs49("div", { className: "relative w-full max-w-xs", children: [
                               /* @__PURE__ */ jsx60(Search, { className: "absolute left-2 top-1/2 h-5 w-5 -translate-y-1/2 text-muted-foreground" }),
                               /* @__PURE__ */ jsx60(
                                 Input,
                                 {
-                                  value: searchValue,
-                                  onChange: (e) => setSearchValue(e.target.value),
-                                  placeholder: toolbar?.searchPlaceholder ?? "Search\u2026",
-                                  className: cn(
-                                    "h-8 pl-7 pr-7 text-sm",
-                                    toolbar?.searchMatch && "rounded-r-none"
-                                  ),
+                                  value: anyOfValue,
+                                  onChange: (e) => setAnyOfValue(e.target.value),
+                                  placeholder: toolbar.anyOf.placeholder ?? "Match any of\u2026",
+                                  className: "h-8 pl-7 pr-7 text-sm",
                                   style: { fontSize: "16px" }
                                 }
                               ),
-                              searchValue ? /* @__PURE__ */ jsxs49(Tooltip, { children: [
+                              anyOfValue ? /* @__PURE__ */ jsxs49(Tooltip, { children: [
                                 /* @__PURE__ */ jsx60(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx60(
                                   "button",
                                   {
                                     type: "button",
-                                    "aria-label": "Clear search",
+                                    "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: () => setSearchValue(""),
+                                    onClick: () => setAnyOfValue(""),
                                     children: /* @__PURE__ */ jsx60(X, { className: "h-5 w-5" })
                                   }
                                 ) }),
-                                /* @__PURE__ */ jsx60(TooltipContent, { children: "Clear search" })
+                                /* @__PURE__ */ jsx60(TooltipContent, { children: "Clear match-any search" })
                               ] }) : null
-                            ] }),
-                            toolbar?.searchMatch ? /* @__PURE__ */ jsxs49(Tooltip, { children: [
-                              /* @__PURE__ */ jsx60(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs49(
-                                Button,
-                                {
-                                  type: "button",
-                                  variant: searchMatchMode === "whole_words" ? "secondary" : "outline",
-                                  size: "sm",
-                                  className: "h-8 shrink-0 gap-1 rounded-l-none border-l-0 px-2 text-xs",
-                                  "aria-pressed": searchMatchMode === "whole_words",
-                                  "aria-label": `Search match: ${searchMatchMode === "whole_words" ? "whole words" : "contains text"}`,
-                                  onClick: () => setSearchMatchMode(
-                                    searchMatchMode === "whole_words" ? "contains" : "whole_words"
-                                  ),
-                                  children: [
-                                    /* @__PURE__ */ jsx60(WholeWord, { className: "h-5 w-5" }),
-                                    searchMatchMode === "whole_words" ? "Whole words" : "Contains"
-                                  ]
-                                }
-                              ) }),
-                              /* @__PURE__ */ jsx60(TooltipContent, { children: searchMatchMode === "whole_words" ? "Whole words \u2014 click to match text anywhere" : "Contains text \u2014 click to require whole words" })
-                            ] }) : null
-                          ]
-                        }
-                      ) : null), pinnedFolded && pinnedRowActive ? void 0 : toolbarSearch.node),
-                      children: [
-                        toolbar?.layeredFilters ? /* @__PURE__ */ jsx60(
-                          LayeredFilterBuilder,
-                          {
-                            fields: toolbar.layeredFilters.fields,
-                            rules: layeredFilters,
-                            onChange: setLayeredFilters,
-                            maxRules: toolbar.layeredFilters.maxRules,
-                            label: toolbar.layeredFilters.label
-                          }
-                        ) : null,
-                        toolbar?.anyOf ? /* @__PURE__ */ jsxs49("div", { className: "relative w-full max-w-xs", children: [
-                          /* @__PURE__ */ jsx60(Search, { className: "absolute left-2 top-1/2 h-5 w-5 -translate-y-1/2 text-muted-foreground" }),
-                          /* @__PURE__ */ jsx60(
-                            Input,
-                            {
-                              value: anyOfValue,
-                              onChange: (e) => setAnyOfValue(e.target.value),
-                              placeholder: toolbar.anyOf.placeholder ?? "Match any of\u2026",
-                              className: "h-8 pl-7 pr-7 text-sm",
-                              style: { fontSize: "16px" }
-                            }
-                          ),
-                          anyOfValue ? /* @__PURE__ */ jsxs49(Tooltip, { children: [
-                            /* @__PURE__ */ jsx60(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx60(
-                              "button",
+                            ] }) : null,
+                            renderedFacets ? /* @__PURE__ */ jsx60(ToolbarFacets, { facets: renderedFacets }) : null,
+                            toolbar?.leading ? /* @__PURE__ */ jsx60(
+                              "div",
                               {
-                                type: "button",
-                                "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__ */ jsx60(X, { className: "h-5 w-5" })
+                                "data-matrx-table-toolbar-extras": true,
+                                className: "order-last flex w-full min-w-0 flex-wrap items-center gap-2",
+                                children: toolbar.leading
                               }
-                            ) }),
-                            /* @__PURE__ */ jsx60(TooltipContent, { children: "Clear match-any search" })
-                          ] }) : null
-                        ] }) : null,
-                        renderedFacets ? /* @__PURE__ */ jsx60(ToolbarFacets, { facets: renderedFacets }) : null,
-                        toolbar?.leading ? /* @__PURE__ */ jsx60(
-                          "div",
-                          {
-                            "data-matrx-table-toolbar-extras": true,
-                            className: "order-last flex w-full min-w-0 flex-wrap items-center gap-2",
-                            children: toolbar.leading
-                          }
-                        ) : null,
-                        drill && drill.question.where.length > 0 ? /* @__PURE__ */ jsx60(
-                          MatrxDrillTrail,
-                          {
-                            dimensions: drill.dimensions,
-                            question: drill.question,
-                            onQuestionChange: drill.onQuestionChange,
-                            rootLabel: drill.rootLabel ?? "All records",
-                            emptyLabel: drill.emptyLabel,
-                            className: "max-w-full"
-                          }
-                        ) : null,
-                        /* @__PURE__ */ jsxs49(
-                          "div",
-                          {
-                            "data-matrx-table-actions": true,
-                            className: cn(
-                              "ml-auto flex min-w-0 items-center gap-0",
-                              toolbar?.singleRow ? "shrink-0 flex-nowrap" : "flex-wrap"
-                            ),
-                            children: [
-                              toolbar?.singleRow && coverageResult && coverageResult.notice ? /* @__PURE__ */ jsxs49(Tooltip, { children: [
-                                /* @__PURE__ */ jsx60(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs49(
-                                  "span",
-                                  {
-                                    "data-matrx-table-coverage": true,
-                                    "data-matrx-table-coverage-scope": coverageResult.scope,
-                                    role: "status",
-                                    tabIndex: 0,
-                                    className: "mr-1 inline-flex shrink-0 items-center whitespace-nowrap rounded-md border border-amber-300/70 bg-amber-50 px-2 py-0.5 text-[11px] font-semibold text-amber-900 dark:border-amber-500/40 dark:bg-amber-950/40 dark:text-amber-200",
-                                    children: [
-                                      coverageResult.badge,
-                                      /* @__PURE__ */ jsxs49("span", { className: "sr-only", children: [
-                                        ": ",
-                                        coverageResult.notice
-                                      ] })
-                                    ]
-                                  }
-                                ) }),
-                                /* @__PURE__ */ jsx60(TooltipContent, { className: "max-w-xs", children: coverageResult.notice })
-                              ] }) : null,
-                              renderToolbarControls(/* @__PURE__ */ jsxs49(Fragment20, { children: [
-                                hasActiveFilters ? /* @__PURE__ */ jsx60(
-                                  TableToolbarAction,
-                                  {
-                                    HostAction: host.ToolbarAction,
-                                    ariaLabel: "Clear all filters",
-                                    tooltip: "Clear search and filters; keep columns and sort",
-                                    onClick: clearAllFilters,
-                                    children: /* @__PURE__ */ jsx60(Eraser, {})
-                                  }
-                                ) : null,
-                                drill ? /* @__PURE__ */ jsxs49(Fragment20, { children: [
-                                  drill.windowDimension ? /* @__PURE__ */ jsx60(
-                                    MatrxDrillWindowMenu,
-                                    {
-                                      question: drill.question,
-                                      onQuestionChange: drill.onQuestionChange,
-                                      dimensionLabel: drill.dimensions.find((d) => d.key === drill.windowDimension)?.label ?? drill.windowDimension
-                                    }
-                                  ) : null,
-                                  drillGrouped ? /* @__PURE__ */ jsx60(
-                                    MatrxDrillMeasurePicker,
-                                    {
-                                      measures: drill.measures,
-                                      question: drill.question,
-                                      onQuestionChange: drill.onQuestionChange
-                                    }
-                                  ) : null,
-                                  /* @__PURE__ */ jsx60(
-                                    MatrxDrillGroupByMenu,
-                                    {
-                                      dimensions: drill.dimensions,
-                                      question: drill.question,
-                                      onQuestionChange: drill.onQuestionChange
-                                    }
-                                  )
-                                ] }) : grouping?.onColumnIdChange ? /* @__PURE__ */ jsxs49(
-                                  Select,
-                                  {
-                                    value: groupingColumnId ?? NO_GROUPING_VALUE,
-                                    onValueChange: (value) => grouping.onColumnIdChange?.(value === NO_GROUPING_VALUE ? null : value),
-                                    children: [
+                            ) : null,
+                            drill && drill.question.where.length > 0 ? /* @__PURE__ */ jsx60(
+                              MatrxDrillTrail,
+                              {
+                                dimensions: drill.dimensions,
+                                question: drill.question,
+                                onQuestionChange: drill.onQuestionChange,
+                                rootLabel: drill.rootLabel ?? "All records",
+                                emptyLabel: drill.emptyLabel,
+                                className: "max-w-full"
+                              }
+                            ) : null,
+                            /* @__PURE__ */ jsxs49(
+                              "div",
+                              {
+                                "data-matrx-table-actions": true,
+                                className: cn(
+                                  "ml-auto flex min-w-0 items-center gap-0",
+                                  toolbar?.singleRow ? "shrink-0 flex-nowrap" : "flex-wrap"
+                                ),
+                                children: [
+                                  toolbar?.singleRow && coverageResult && coverageResult.notice ? /* @__PURE__ */ jsxs49(Tooltip, { children: [
+                                    /* @__PURE__ */ jsx60(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs49(
+                                      "span",
+                                      {
+                                        "data-matrx-table-coverage": true,
+                                        "data-matrx-table-coverage-scope": coverageResult.scope,
+                                        role: "status",
+                                        tabIndex: 0,
+                                        className: "mr-1 inline-flex shrink-0 items-center whitespace-nowrap rounded-md border border-amber-300/70 bg-amber-50 px-2 py-0.5 text-[11px] font-semibold text-amber-900 dark:border-amber-500/40 dark:bg-amber-950/40 dark:text-amber-200",
+                                        children: [
+                                          coverageResult.badge,
+                                          /* @__PURE__ */ jsxs49("span", { className: "sr-only", children: [
+                                            ": ",
+                                            coverageResult.notice
+                                          ] })
+                                        ]
+                                      }
+                                    ) }),
+                                    /* @__PURE__ */ jsx60(TooltipContent, { className: "max-w-xs", children: coverageResult.notice })
+                                  ] }) : null,
+                                  renderToolbarControls(/* @__PURE__ */ jsxs49(Fragment20, { children: [
+                                    hasActiveFilters ? /* @__PURE__ */ jsx60(
+                                      TableToolbarAction,
+                                      {
+                                        HostAction: host.ToolbarAction,
+                                        ariaLabel: "Clear all filters",
+                                        tooltip: "Clear search and filters; keep columns and sort",
+                                        onClick: clearAllFilters,
+                                        children: /* @__PURE__ */ jsx60(Eraser, {})
+                                      }
+                                    ) : null,
+                                    drill ? /* @__PURE__ */ jsxs49(Fragment20, { children: [
+                                      drill.windowDimension ? /* @__PURE__ */ jsx60(
+                                        MatrxDrillWindowMenu,
+                                        {
+                                          question: drill.question,
+                                          onQuestionChange: drill.onQuestionChange,
+                                          dimensionLabel: drill.dimensions.find((d) => d.key === drill.windowDimension)?.label ?? drill.windowDimension
+                                        }
+                                      ) : null,
+                                      drillGrouped ? /* @__PURE__ */ jsx60(
+                                        MatrxDrillMeasurePicker,
+                                        {
+                                          measures: drill.measures,
+                                          question: drill.question,
+                                          onQuestionChange: drill.onQuestionChange
+                                        }
+                                      ) : null,
                                       /* @__PURE__ */ jsx60(
-                                        SelectTrigger,
+                                        MatrxDrillGroupByMenu,
                                         {
-                                          "data-matrx-table-group-by": true,
-                                          "aria-label": "Group rows by a column",
-                                          className: "h-8 w-auto min-w-[9rem] gap-1 text-xs",
-                                          children: /* @__PURE__ */ jsx60(SelectValue, { placeholder: "No groups" })
+                                          dimensions: drill.dimensions,
+                                          question: drill.question,
+                                          onQuestionChange: drill.onQuestionChange
                                         }
-                                      ),
-                                      /* @__PURE__ */ jsxs49(SelectContent, { children: [
-                                        /* @__PURE__ */ jsx60(SelectItem, { value: NO_GROUPING_VALUE, children: "No groups" }),
-                                        groupableColumns.map((col) => /* @__PURE__ */ jsx60(SelectItem, { value: columnId(col), children: `Group by ${col.label ?? (typeof col.header === "string" ? col.header : columnId(col))}` }, columnId(col)))
-                                      ] })
-                                    ]
-                                  }
-                                ) : null,
-                                columns.length > 0 && toolbar?.columns !== false ? /* @__PURE__ */ jsx60(
-                                  TableToolbarAction,
-                                  {
-                                    HostAction: host.ToolbarAction,
-                                    ariaLabel: "Columns",
-                                    tooltip: "Show, hide, or reorder columns",
-                                    onClick: () => setColumnManagerOpen(true),
-                                    children: /* @__PURE__ */ jsx60(SlidersHorizontal, {})
-                                  }
-                                ) : null,
-                                toolbar?.refresh ? /* @__PURE__ */ jsx60(
-                                  TableToolbarAction,
-                                  {
-                                    HostAction: host.ToolbarAction,
-                                    ariaLabel: toolbar.refresh.label ?? "Refresh",
-                                    tooltip: isFetching ? "Refreshing table data" : toolbar.refresh.label ?? "Refresh",
-                                    disabled: isFetching || toolbarActionPending.refresh,
-                                    busy: isFetching || toolbarActionPending.refresh,
-                                    onClick: () => {
-                                      if (toolbarActionPendingRef.current.refresh) return;
-                                      toolbarActionPendingRef.current.refresh = true;
-                                      setToolbarActionPending((current) => ({ ...current, refresh: true }));
-                                      setToolbarActionError(null);
-                                      void Promise.resolve().then(() => toolbar.refresh?.onRefresh()).catch((cause) => {
-                                        const message = cause instanceof Error ? cause.message : String(cause);
-                                        setToolbarActionError(`Refresh failed: ${message}`);
-                                        toast.error(`Refresh failed: ${message}`);
-                                      }).finally(() => {
-                                        toolbarActionPendingRef.current.refresh = false;
-                                        setToolbarActionPending((current) => ({ ...current, refresh: false }));
-                                      });
-                                    },
-                                    children: /* @__PURE__ */ jsx60(RefreshControlIcon, { spinning: isFetching || toolbarActionPending.refresh })
-                                  }
-                                ) : null,
-                                toolbar?.add ? /* @__PURE__ */ jsx60(
-                                  TableToolbarAction,
-                                  {
-                                    HostAction: host.ToolbarAction,
-                                    ariaLabel: "Add",
-                                    tooltip: toolbar.add.disabled ? toolbar.add.disabledReason ?? "Add unavailable" : "Add",
-                                    disabled: toolbar.add.disabled || toolbarActionPending.add,
-                                    busy: toolbarActionPending.add,
-                                    onClick: () => {
-                                      if (toolbarActionPendingRef.current.add) return;
-                                      toolbarActionPendingRef.current.add = true;
-                                      setToolbarActionPending((current) => ({ ...current, add: true }));
-                                      setToolbarActionError(null);
-                                      void Promise.resolve().then(() => toolbar.add?.onAdd()).catch((cause) => {
-                                        const message = cause instanceof Error ? cause.message : String(cause);
-                                        setToolbarActionError(`Add failed: ${message}`);
-                                        toast.error(`Add failed: ${message}`);
-                                      }).finally(() => {
-                                        toolbarActionPendingRef.current.add = false;
-                                        setToolbarActionPending((current) => ({ ...current, add: false }));
-                                      });
-                                    },
-                                    children: /* @__PURE__ */ jsx60(Plus, {})
-                                  }
-                                ) : null,
-                                toolbar?.actions
-                              ] }), showToolbarCopy && effectiveCopy ? /* @__PURE__ */ jsx60(ToolbarListedLabel, { label: "Copy or export", children: /* @__PURE__ */ jsx60(
-                                CopyButtons,
-                                {
-                                  size: "toolbar",
-                                  sourceId: `${tableCopySourceNamespace}:view`,
-                                  label: effectiveCopy.listLabel ?? `${effectiveCopy.label} view`,
-                                  ...effectiveCopy.references ? { references: effectiveCopy.references(processed, data) } : {},
-                                  ...effectiveCopy.triggerVariant ? { triggerVariant: effectiveCopy.triggerVariant } : {},
-                                  ...copy === void 0 ? {} : {
-                                    human: () => {
-                                      const { processed: processed2, data: data2 } = chromeLatest.current;
-                                      return effectiveCopy.listHuman?.(processed2, data2) ?? buildViewHuman(effectiveCopy, processed2, effectiveCopyColumns);
-                                    },
-                                    json: () => {
-                                      const { processed: processed2, data: data2 } = chromeLatest.current;
-                                      return effectiveCopy.listJson?.(processed2, data2) ?? processed2.map((r) => effectiveCopy.agentRow ? effectiveCopy.agentRow(r) : r);
+                                      )
+                                    ] }) : grouping?.onColumnIdChange ? /* @__PURE__ */ jsxs49(
+                                      Select,
+                                      {
+                                        value: groupingColumnId ?? NO_GROUPING_VALUE,
+                                        onValueChange: (value) => grouping.onColumnIdChange?.(value === NO_GROUPING_VALUE ? null : value),
+                                        children: [
+                                          /* @__PURE__ */ jsx60(
+                                            SelectTrigger,
+                                            {
+                                              "data-matrx-table-group-by": true,
+                                              "aria-label": "Group rows by a column",
+                                              className: "h-8 w-auto min-w-[9rem] gap-1 text-xs",
+                                              children: /* @__PURE__ */ jsx60(SelectValue, { placeholder: "No groups" })
+                                            }
+                                          ),
+                                          /* @__PURE__ */ jsxs49(SelectContent, { children: [
+                                            /* @__PURE__ */ jsx60(SelectItem, { value: NO_GROUPING_VALUE, children: "No groups" }),
+                                            groupableColumns.map((col) => /* @__PURE__ */ jsx60(SelectItem, { value: columnId(col), children: `Group by ${col.label ?? (typeof col.header === "string" ? col.header : columnId(col))}` }, columnId(col)))
+                                          ] })
+                                        ]
+                                      }
+                                    ) : null,
+                                    columns.length > 0 && toolbar?.columns !== false ? /* @__PURE__ */ jsx60(
+                                      TableToolbarAction,
+                                      {
+                                        HostAction: host.ToolbarAction,
+                                        ariaLabel: "Columns",
+                                        tooltip: "Show, hide, or reorder columns",
+                                        onClick: () => setColumnManagerOpen(true),
+                                        children: /* @__PURE__ */ jsx60(SlidersHorizontal, {})
+                                      }
+                                    ) : null,
+                                    toolbar?.refresh ? /* @__PURE__ */ jsx60(
+                                      TableToolbarAction,
+                                      {
+                                        HostAction: host.ToolbarAction,
+                                        ariaLabel: toolbar.refresh.label ?? "Refresh",
+                                        tooltip: isFetching ? "Refreshing table data" : toolbar.refresh.label ?? "Refresh",
+                                        disabled: isFetching || toolbarActionPending.refresh,
+                                        busy: isFetching || toolbarActionPending.refresh,
+                                        onClick: () => {
+                                          if (toolbarActionPendingRef.current.refresh) return;
+                                          toolbarActionPendingRef.current.refresh = true;
+                                          setToolbarActionPending((current) => ({ ...current, refresh: true }));
+                                          setToolbarActionError(null);
+                                          void Promise.resolve().then(() => toolbar.refresh?.onRefresh()).catch((cause) => {
+                                            const message = cause instanceof Error ? cause.message : String(cause);
+                                            setToolbarActionError(`Refresh failed: ${message}`);
+                                            toast.error(`Refresh failed: ${message}`);
+                                          }).finally(() => {
+                                            toolbarActionPendingRef.current.refresh = false;
+                                            setToolbarActionPending((current) => ({ ...current, refresh: false }));
+                                          });
+                                        },
+                                        children: /* @__PURE__ */ jsx60(RefreshControlIcon, { spinning: isFetching || toolbarActionPending.refresh })
+                                      }
+                                    ) : null,
+                                    toolbar?.add ? /* @__PURE__ */ jsx60(
+                                      TableToolbarAction,
+                                      {
+                                        HostAction: host.ToolbarAction,
+                                        ariaLabel: "Add",
+                                        tooltip: toolbar.add.disabled ? toolbar.add.disabledReason ?? "Add unavailable" : "Add",
+                                        disabled: toolbar.add.disabled || toolbarActionPending.add,
+                                        busy: toolbarActionPending.add,
+                                        onClick: () => {
+                                          if (toolbarActionPendingRef.current.add) return;
+                                          toolbarActionPendingRef.current.add = true;
+                                          setToolbarActionPending((current) => ({ ...current, add: true }));
+                                          setToolbarActionError(null);
+                                          void Promise.resolve().then(() => toolbar.add?.onAdd()).catch((cause) => {
+                                            const message = cause instanceof Error ? cause.message : String(cause);
+                                            setToolbarActionError(`Add failed: ${message}`);
+                                            toast.error(`Add failed: ${message}`);
+                                          }).finally(() => {
+                                            toolbarActionPendingRef.current.add = false;
+                                            setToolbarActionPending((current) => ({ ...current, add: false }));
+                                          });
+                                        },
+                                        children: /* @__PURE__ */ jsx60(Plus, {})
+                                      }
+                                    ) : null,
+                                    toolbar?.actions
+                                  ] }), showToolbarCopy && effectiveCopy ? /* @__PURE__ */ jsx60(ToolbarListedLabel, { label: "Copy or export", children: /* @__PURE__ */ jsx60(
+                                    CopyButtons,
+                                    {
+                                      size: "toolbar",
+                                      sourceId: `${tableCopySourceNamespace}:view`,
+                                      label: effectiveCopy.listLabel ?? `${effectiveCopy.label} view`,
+                                      ...effectiveCopy.references ? { references: effectiveCopy.references(processed, data) } : {},
+                                      ...effectiveCopy.triggerVariant ? { triggerVariant: effectiveCopy.triggerVariant } : {},
+                                      ...copy === void 0 ? {} : {
+                                        human: () => {
+                                          const { processed: processed2, data: data2 } = chromeLatest.current;
+                                          return effectiveCopy.listHuman?.(processed2, data2) ?? buildViewHuman(effectiveCopy, processed2, effectiveCopyColumns);
+                                        },
+                                        json: () => {
+                                          const { processed: processed2, data: data2 } = chromeLatest.current;
+                                          return effectiveCopy.listJson?.(processed2, data2) ?? processed2.map((r) => effectiveCopy.agentRow ? effectiveCopy.agentRow(r) : r);
+                                        }
+                                      },
+                                      agent: () => {
+                                        const { processed: processed2, data: data2 } = chromeLatest.current;
+                                        return copy !== void 0 && effectiveCopy.listAgent ? effectiveCopy.listAgent(processed2, data2) : copy === void 0 ? buildDefaultTableViewAgentInput(effectiveCopy, processed2, data2, declaredVisibleCopyColumns, {
+                                          search: searchValue,
+                                          searchMatchMode,
+                                          anyOf: anyOfValue,
+                                          filterCount: activeFilterCount + completeLayeredFilterRules(layeredFilters).length,
+                                          sort: sort ? `${sort.id}:${sort.direction}` : null
+                                        }) : buildViewAgentInput(effectiveCopy, processed2, data2, {
+                                          search: searchValue,
+                                          searchMatchMode,
+                                          anyOf: anyOfValue,
+                                          filterCount: activeFilterCount + completeLayeredFilterRules(layeredFilters).length,
+                                          sort: sort ? `${sort.id}:${sort.direction}` : null
+                                        });
+                                      },
+                                      aiVariants: [
+                                        ...effectiveCopy.aiVariants?.(processed, data) ?? [],
+                                        ...copySubsetVariantFor(() => chromeLatest.current.processed, "view")
+                                      ],
+                                      ...effectiveCopy.aiCustom ? { aiCustom: effectiveCopy.aiCustom(processed, data) } : {},
+                                      export: {
+                                        items: [],
+                                        sheetRows: () => chromeLatest.current.processed.map(
+                                          (row) => projectDefaultTableCopyRow(row, declaredVisibleCopyColumns)
+                                        ),
+                                        sheetColumns: () => declaredVisibleCopyColumns.map((column) => ({
+                                          id: columnId(column),
+                                          label: column.label ?? (typeof column.header === "string" ? column.header : columnId(column))
+                                        })),
+                                        ...effectiveCopy.export?.(processed, data)
+                                      }
                                     }
-                                  },
-                                  agent: () => {
-                                    const { processed: processed2, data: data2 } = chromeLatest.current;
-                                    return copy !== void 0 && effectiveCopy.listAgent ? effectiveCopy.listAgent(processed2, data2) : copy === void 0 ? buildDefaultTableViewAgentInput(effectiveCopy, processed2, data2, declaredVisibleCopyColumns, {
-                                      search: searchValue,
-                                      searchMatchMode,
-                                      anyOf: anyOfValue,
-                                      filterCount: activeFilterCount + completeLayeredFilterRules(layeredFilters).length,
-                                      sort: sort ? `${sort.id}:${sort.direction}` : null
-                                    }) : buildViewAgentInput(effectiveCopy, processed2, data2, {
-                                      search: searchValue,
-                                      searchMatchMode,
-                                      anyOf: anyOfValue,
-                                      filterCount: activeFilterCount + completeLayeredFilterRules(layeredFilters).length,
-                                      sort: sort ? `${sort.id}:${sort.direction}` : null
-                                    });
-                                  },
-                                  aiVariants: [
-                                    ...effectiveCopy.aiVariants?.(processed, data) ?? [],
-                                    ...copySubsetVariantFor(() => chromeLatest.current.processed, "view")
-                                  ],
-                                  ...effectiveCopy.aiCustom ? { aiCustom: effectiveCopy.aiCustom(processed, data) } : {},
-                                  export: {
-                                    items: [],
-                                    sheetRows: () => chromeLatest.current.processed.map(
-                                      (row) => projectDefaultTableCopyRow(row, declaredVisibleCopyColumns)
-                                    ),
-                                    sheetColumns: () => declaredVisibleCopyColumns.map((column) => ({
-                                      id: columnId(column),
-                                      label: column.label ?? (typeof column.header === "string" ? column.header : columnId(column))
-                                    })),
-                                    ...effectiveCopy.export?.(processed, data)
-                                  }
-                                }
-                              ) }) : null)
-                            ]
-                          }
-                        ),
-                        toolbarEnd.node
-                      ]
-                    }
-                  )) }),
+                                  ) }) : null)
+                                ]
+                              }
+                            ),
+                            toolbarEnd.node
+                          ]
+                        }
+                      ))
+                    ] });
+                  } }),
                   /* @__PURE__ */ jsxs49("div", { "data-matrx-table-body-region": true, className: "flex min-h-0 flex-1 flex-col gap-2", children: [
+                    localSortNotice && !isLoading && !readView.failure ? /* @__PURE__ */ jsx60("p", { "data-matrx-table-local-sort-scope": true, role: "status", className: "shrink-0 text-xs text-muted-foreground", children: localSortNotice }) : null,
                     coverageResult && coverageResult.notice && !toolbar?.singleRow ? /* @__PURE__ */ jsxs49(
                       "div",
                       {
@@ -56406,6 +56427,7 @@ function MatrxDataTableCore(coreProps) {
                             "relative h-full w-full overflow-auto rounded-md border border-border bg-card",
                             // Embedded: the host (the card) is the frame; the rows sit on its surface.
                             embedded && "h-auto rounded-none border-0 bg-transparent",
+                            frameHeight === "content" && "h-auto max-h-full",
                             mobileCards && tableWithCardsClass,
                             tableClassName
                           ),
@@ -56474,6 +56496,7 @@ function MatrxDataTableCore(coreProps) {
                                     {
                                       ref: tableHeaderRef,
                                       "data-matrx-table-sticky-header": stickyHeader ? "true" : void 0,
+                                      hidden: emptyHeader === "hide" && !isLoading && data.length === 0 && activeFilterCount === 0,
                                       className: cn(
                                         // 🚨 ABOVE THE FROZEN COLUMN, NOT UNDER IT. A frozen body
                                         // cell is `sm:z-20` so it can slide under the columns to