@ai-matrx/design-system 0.49.12 → 0.49.18

package/dist/data-table/index.js

@@ -34006,12 +34006,12 @@ import {
   isValidElement as isValidElement2,
   memo,
   useCallback as useCallback10,
-  useEffect as useEffect21,
+  useEffect as useEffect22,
   useId as useId3,
   useLayoutEffect as useLayoutEffect5,
   useMemo as useMemo11,
-  useRef as useRef20,
-  useState as useState25
+  useRef as useRef21,
+  useState as useState26
 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import {
@@ -35104,7 +35104,11 @@ function TableTitleRow({
       "data-matrx-table-toolbar": true,
       className: cn(
         "relative flex min-w-0 shrink-0 items-center gap-2",
-        singleRow ? "flex-nowrap overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" : "flex-wrap",
+        // `max-w-full`: drawn into a page's row slot (`portalInto`), the row is held to the slot's
+        // width, so IT is the scroller its pinned controls stick to — never a row as wide as its
+        // content inside a narrower slot, where "sticky" had nothing to stick to and "New record"
+        // sat past the slot's edge, cut to "N" (merged-grid leftovers, 2026-09-28).
+        singleRow ? "max-w-full flex-nowrap overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" : "flex-wrap",
         // ONE CONTROL HEIGHT ON A TOOLBAR ROW (lane C, review 2026-09-26: 28/32/44 mixed): a host's
         // tap-target toolbar actions draw at 32px like every other control; a finger (coarse
         // pointer) keeps the 44px floor.
@@ -36597,7 +36601,7 @@ function GenericTablePagination({
 // src/data-table/TableViewTabs.tsx
 import { useEffect as useEffect5, useRef as useRef6, useState as useState8 } from "react";
 import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
-function TableViewTabs({ tabs, activeId, onSelect, onAdd, onClose, onRename, related, editingId, onEditCancel, onEditDone }) {
+function TableViewTabs({ tabs, activeId, onSelect, onAdd, onClose, onRename, related, editingId, onEditCancel, onEditDone, closable = true, addHint = "New view from the current one \xB7 double-click a tab to rename", renameable = true }) {
   const [renaming, setRenaming] = useState8(null);
   const [draft, setDraft] = useState8("");
   const opened = useRef6(null);
@@ -36648,8 +36652,10 @@ function TableViewTabs({ tabs, activeId, onSelect, onAdd, onClose, onRename, rel
             tabIndex: tab.id === activeId ? 0 : -1,
             onClick: () => onSelect(tab.id),
             onDoubleClick: () => {
-              setDraft(tab.label);
-              setRenaming(tab.id);
+              if (renameable && tab.id !== "default") {
+                setDraft(tab.label);
+                setRenaming(tab.id);
+              }
             },
             onKeyDown: (e) => {
               const next = e.key === "ArrowRight" ? (index + 1) % tabs.length : e.key === "ArrowLeft" ? (index + tabs.length - 1) % tabs.length : e.key === "Home" ? 0 : e.key === "End" ? tabs.length - 1 : -1;
@@ -36667,7 +36673,7 @@ function TableViewTabs({ tabs, activeId, onSelect, onAdd, onClose, onRename, rel
             ]
           }
         ),
-        tabs.length > 1 && tab.id !== "default" && /* @__PURE__ */ jsxs16(Tooltip, { children: [
+        closable && tabs.length > 1 && tab.id !== "default" && /* @__PURE__ */ jsxs16(Tooltip, { children: [
           /* @__PURE__ */ jsx24(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx24("button", { type: "button", "aria-label": `Close ${tab.label}`, onClick: () => onClose(tab.id), className: "flex size-7 items-center justify-center rounded hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring", children: /* @__PURE__ */ jsx24(X, { className: "size-4" }) }) }),
           /* @__PURE__ */ jsxs16(TooltipContent, { children: [
             "Close ",
@@ -36677,7 +36683,7 @@ function TableViewTabs({ tabs, activeId, onSelect, onAdd, onClose, onRename, rel
       ] }, tab.id)),
       /* @__PURE__ */ jsxs16(Tooltip, { children: [
         /* @__PURE__ */ jsx24(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx24("button", { type: "button", "aria-label": "New table tab", onClick: onAdd, className: "flex size-8 shrink-0 items-center justify-center rounded hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring", children: /* @__PURE__ */ jsx24(Plus, { className: "size-4" }) }) }),
-        /* @__PURE__ */ jsx24(TooltipContent, { children: "New view from the current one \xB7 double-click a tab to rename" })
+        /* @__PURE__ */ jsx24(TooltipContent, { children: addHint })
       ] })
     ] }),
     related && /* @__PURE__ */ jsx24("div", { className: "flex shrink-0 items-center gap-1 border-l px-2", children: related })
@@ -42117,6 +42123,7 @@ CommandShortcut.displayName = "CommandShortcut";
 var MAX_LISTABLE_FACET_LENGTH = 300;
 var DEFAULT_FACET_LIMIT = 200;
 var MAX_FACET_LIMIT = 500;
+var CORE_SUGGESTION_DISTINCT_EXCLUSIVE_LIMIT = 15;
 function facetText(raw) {
   if (raw === null || raw === void 0) return "";
   if (typeof raw === "object") {
@@ -42243,6 +42250,7 @@ function HeaderMenuItems({
     const disabled = Boolean(item.disabledReason);
     const hasSubmenu = Boolean(item.submenu && item.submenu.length > 0);
     return /* @__PURE__ */ jsxs28("div", { className: "flex flex-col", children: [
+      item.separatorBefore ? /* @__PURE__ */ jsx38("div", { role: "separator", className: "-mx-1 my-1 h-px bg-border" }) : null,
       /* @__PURE__ */ jsxs28(
         Button,
         {
@@ -42312,7 +42320,7 @@ function ColumnHeaderCell({
   compact = false,
   marker,
   filterApplyLabel,
-  filterShowCancel = false,
+  filterShowCancel,
   filterFooterHint,
   allowNegation = false,
   allowNullModes = false,
@@ -42350,7 +42358,8 @@ function ColumnHeaderCell({
   } : void 0;
   const reorderClass = reorderEnabled ? "touch-none cursor-grab active:cursor-grabbing" : void 0;
   const filterActive = isColumnFilterActive(filterValue);
-  const deferredFilter = filterApplyLabel !== void 0 || filterShowCancel || filterFooterHint !== void 0;
+  const deferredFilter = filterKind === "text" || filterApplyLabel !== void 0 || Boolean(filterShowCancel) || filterFooterHint !== void 0;
+  const showFilterCancel = filterShowCancel ?? filterKind === "text";
   const [filterOpen, setFilterOpen] = useState17(false);
   const [pendingNegation, setPendingNegation] = useState17(false);
   const [draftFilter, setDraftFilter] = useState17(filterValue);
@@ -42511,7 +42520,7 @@ function ColumnHeaderCell({
         filterKind && deferredFilter ? /* @__PURE__ */ jsxs28("div", { className: "mt-2 border-t border-border pt-2", children: [
           filterFooterHint ? /* @__PURE__ */ jsx38("div", { className: "mb-2 text-xs text-muted-foreground", children: filterFooterHint }) : null,
           /* @__PURE__ */ jsxs28("div", { className: "flex justify-end gap-2", children: [
-            filterShowCancel ? /* @__PURE__ */ jsx38(Button, { type: "button", variant: "ghost", size: "sm", onClick: cancelFilter, children: "Cancel" }) : null,
+            showFilterCancel ? /* @__PURE__ */ jsx38(Button, { type: "button", variant: "ghost", size: "sm", onClick: cancelFilter, children: "Cancel" }) : null,
             /* @__PURE__ */ jsx38(Button, { type: "button", size: "sm", onClick: applyFilter, children: filterApplyLabel ?? "Apply" })
           ] })
         ] }) : null,
@@ -42858,7 +42867,7 @@ function FacetChecklist({
   onChange
 }) {
   const [query, setQuery] = useState17("");
-  const selected = value?.kind === "select" ? value.values ?? (value.value && value.value !== "__all__" ? [value.value] : []) : [];
+  const selected = value?.kind === "select" ? (value.values ?? (value.value && value.value !== "__all__" ? [value.value] : [])).map((candidate) => candidate === SELECT_EMPTY_VALUE ? "" : candidate) : [];
   const selectedSet = new Set(selected);
   const rows = useMemo8(() => {
     if (!facets) return [];
@@ -42876,7 +42885,7 @@ function FacetChecklist({
     const next = new Set(selectedSet);
     if (next.has(candidate)) next.delete(candidate);
     else next.add(candidate);
-    const values = [...next];
+    const values = [...next].map((value2) => value2 === "" ? SELECT_EMPTY_VALUE : value2);
     onChange(
       values.length === 0 ? void 0 : { kind: "select", value: values[0] ?? "", values }
     );
@@ -45442,6 +45451,62 @@ function ToolbarListedLabel({ label, children }) {
   ] });
 }
 
+// src/data-table/pinned-fold.ts
+import { useEffect as useEffect17, useRef as useRef18, useState as useState21 } from "react";
+function pinnedMustFold(room, full) {
+  if (room <= 0 || full === null) return false;
+  return full > room + 0.5;
+}
+function usePinnedFold(el, active) {
+  const [folded, setFolded] = useState21(false);
+  const full = useRef18(null);
+  const current = useRef18(false);
+  useEffect17(() => {
+    if (!active || !el) {
+      if (current.current) {
+        current.current = false;
+        setFolded(false);
+      }
+      return;
+    }
+    const row = el.closest("[data-matrx-table-toolbar]") ?? el.parentElement;
+    if (!row) return;
+    let pending = 0;
+    let stopped = false;
+    const measure = () => {
+      pending = 0;
+      if (stopped) return;
+      if (!current.current) {
+        const width = Math.max(el.getBoundingClientRect().width || 0, el.scrollWidth || 0);
+        if (width > 0) full.current = width;
+      }
+      const next = pinnedMustFold(row.clientWidth, full.current);
+      if (next !== current.current) {
+        current.current = next;
+        setFolded(next);
+      }
+    };
+    const schedule = () => {
+      if (pending) return;
+      pending = typeof requestAnimationFrame === "function" && typeof document !== "undefined" && document.visibilityState !== "hidden" ? requestAnimationFrame(measure) : setTimeout(measure, 0);
+    };
+    const sizes = typeof ResizeObserver === "function" ? new ResizeObserver(schedule) : null;
+    sizes?.observe(row);
+    sizes?.observe(el);
+    const content = typeof MutationObserver === "function" ? new MutationObserver(schedule) : null;
+    content?.observe(el, { childList: true, subtree: true, characterData: true });
+    if (typeof window !== "undefined") window.addEventListener("resize", schedule);
+    measure();
+    return () => {
+      stopped = true;
+      sizes?.disconnect();
+      content?.disconnect();
+      if (typeof window !== "undefined") window.removeEventListener("resize", schedule);
+    };
+  }, [el, active]);
+  return folded;
+}
+
 // src/data-table/coverage.ts
 var PARTIAL_BADGE = "Partial";
 var UNKNOWN_TOTAL_BADGE = "Unknown total";
@@ -45590,7 +45655,7 @@ function rankTableSearchRows(rows, columns, query, options = {}, extraText) {
 }
 
 // src/data-table/ColumnManager.tsx
-import { useEffect as useEffect17, useMemo as useMemo10, useState as useState21 } from "react";
+import { useEffect as useEffect18, useMemo as useMemo10, useState as useState22 } from "react";
 import { useDndMonitor, useDraggable as useDraggable2, useDroppable } from "@dnd-kit/core";
 import { jsx as jsx43, jsxs as jsxs32 } from "react/jsx-runtime";
 function ColumnManager({
@@ -45605,11 +45670,11 @@ function ColumnManager({
     () => new Map(columns.map((column) => [columnId(column), column])),
     [columns]
   );
-  const [draftOrder, setDraftOrder] = useState21(order);
-  const [draftHidden, setDraftHidden] = useState21(() => new Set(hidden));
-  const [draggedColumnId, setDraggedColumnId] = useState21(null);
-  const [dropTarget, setDropTarget] = useState21(null);
-  useEffect17(() => {
+  const [draftOrder, setDraftOrder] = useState22(order);
+  const [draftHidden, setDraftHidden] = useState22(() => new Set(hidden));
+  const [draggedColumnId, setDraggedColumnId] = useState22(null);
+  const [dropTarget, setDropTarget] = useState22(null);
+  useEffect18(() => {
     if (!open) return;
     setDraftOrder(order);
     setDraftHidden(new Set(hidden));
@@ -46096,7 +46161,7 @@ var layeredRuleSchema = z2.object({ id: z2.string().min(1), field: z2.string().m
 var snapshotSchema = z2.object({
   __kind: z2.literal("matrx-table-view"),
   version: z2.literal(1),
-  query: z2.object({ pageSize: z2.number().int().positive(), search: z2.string(), searchMatchMode: z2.enum(["contains", "whole_words"]).optional(), searchScope: z2.string().min(1).optional(), anyOf: z2.string(), layeredFilters: z2.array(layeredRuleSchema).optional(), columnFilters: z2.record(z2.string(), filterSchema.optional()), sort: z2.object({ id: z2.string().min(1), direction: z2.enum(["asc", "desc"]) }).nullable() }),
+  query: z2.object({ pageSize: z2.number().int().nonnegative(), search: z2.string(), searchMatchMode: z2.enum(["contains", "whole_words"]).optional(), searchScope: z2.string().min(1).optional(), anyOf: z2.string(), layeredFilters: z2.array(layeredRuleSchema).optional(), columnFilters: z2.record(z2.string(), filterSchema.optional()), sort: z2.object({ id: z2.string().min(1), direction: z2.enum(["asc", "desc"]) }).nullable() }),
   columns: z2.object({
     order: z2.array(z2.string().min(1)).refine((order) => new Set(order).size === order.length, {
       message: "Column order must not contain duplicate IDs"
@@ -46152,9 +46217,9 @@ function parseTableViewSnapshot(raw) {
 
 // src/data-table/MatrxUuidCell.tsx
 import {
-  useEffect as useEffect18,
-  useRef as useRef18,
-  useState as useState22
+  useEffect as useEffect19,
+  useRef as useRef19,
+  useState as useState23
 } from "react";
 import { jsx as jsx44, jsxs as jsxs33 } from "react/jsx-runtime";
 var SHORT_LEN = 8;
@@ -46195,11 +46260,11 @@ function MatrxUuidCell({
 }) {
   const { resolveEntityDoors, ResourcePeek } = useMatrxDataTableHost();
   const { notify, notice } = useTableNotice();
-  const [copied, setCopied] = useState22(false);
-  const [opening, setOpening] = useState22(false);
-  const [peekOpen, setPeekOpen] = useState22(false);
-  const timer = useRef18(null);
-  useEffect18(
+  const [copied, setCopied] = useState23(false);
+  const [opening, setOpening] = useState23(false);
+  const [peekOpen, setPeekOpen] = useState23(false);
+  const timer = useRef19(null);
+  useEffect19(
     () => () => {
       if (timer.current) clearTimeout(timer.current);
     },
@@ -46494,7 +46559,7 @@ function DataRowInspector({
 }
 
 // src/data-table/DataRowWindow.tsx
-import { useEffect as useEffect19, useState as useState23 } from "react";
+import { useEffect as useEffect20, useState as useState24 } from "react";
 import { jsx as jsx46, jsxs as jsxs35 } from "react/jsx-runtime";
 function DataRowWindow({
   isOpen,
@@ -46515,8 +46580,8 @@ function DataRowWindow({
   const hasEdit = editContent != null;
   const hasTabs = hasEdit && children == null;
   const initialTab = defaultTab ?? (hasEdit ? "edit" : "view");
-  const [tab, setTab] = useState23(initialTab);
-  useEffect19(() => {
+  const [tab, setTab] = useState24(initialTab);
+  useEffect20(() => {
     if (!isOpen) return;
     setTab(defaultTab ?? (hasEdit ? "edit" : "view"));
   }, [isOpen, windowId, hasEdit, defaultTab]);
@@ -47761,7 +47826,7 @@ function DirtySavePill({
 }
 
 // src/data-table/EditableTableCell.tsx
-import { useEffect as useEffect20, useRef as useRef19, useState as useState24 } from "react";
+import { useEffect as useEffect21, useRef as useRef20, useState as useState25 } from "react";
 import { jsx as jsx49, jsxs as jsxs38 } from "react/jsx-runtime";
 function CellRefusal({ reason }) {
   return /* @__PURE__ */ jsx49(
@@ -47823,12 +47888,12 @@ function EditableTableCell({
   editRequest,
   editSeed
 }) {
-  const [open, setOpen] = useState24(false);
-  const [refusal, setRefusal] = useState24(null);
-  useEffect20(() => {
+  const [open, setOpen] = useState25(false);
+  const [refusal, setRefusal] = useState25(null);
+  useEffect21(() => {
     if (editRequest !== void 0) setOpen(true);
   }, [editRequest]);
-  useEffect20(() => {
+  useEffect21(() => {
     if (!open) setRefusal(null);
   }, [open]);
   const usePencil = Boolean(href) || editTrigger === "pencil";
@@ -47932,13 +47997,13 @@ function InlineStringEditor({
   editRequest,
   editSeed
 }) {
-  const [editing, setEditing] = useState24(false);
-  const [draft, setDraft] = useState24(value);
-  const [refusal, setRefusal] = useState24(null);
-  const handledEditRequest = useRef19(void 0);
-  const seedRef = useRef19(editSeed);
+  const [editing, setEditing] = useState25(false);
+  const [draft, setDraft] = useState25(value);
+  const [refusal, setRefusal] = useState25(null);
+  const handledEditRequest = useRef20(void 0);
+  const seedRef = useRef20(editSeed);
   seedRef.current = editSeed;
-  useEffect20(() => {
+  useEffect21(() => {
     if (editRequest === void 0 || handledEditRequest.current === editRequest) return;
     handledEditRequest.current = editRequest;
     setDraft(seedRef.current ?? value);
@@ -48098,8 +48163,8 @@ function DateEditor({
   onCommit,
   onCancel
 }) {
-  const [draft, setDraft] = useState24(value);
-  const done = useRef19(false);
+  const [draft, setDraft] = useState25(value);
+  const done = useRef20(false);
   const finish = () => {
     if (done.current) return;
     done.current = true;
@@ -48134,8 +48199,8 @@ function TagsEditor({
   onCommit,
   onCancel
 }) {
-  const [tags, setTags] = useState24(value);
-  const [draft, setDraft] = useState24("");
+  const [tags, setTags] = useState25(value);
+  const [draft, setDraft] = useState25("");
   const add = (raw) => {
     const next = raw.trim();
     if (!next || tags.includes(next)) return;
@@ -48232,7 +48297,7 @@ function NumberEditor({
   onCommit,
   onCancel
 }) {
-  const [draft, setDraft] = useState24(String(value));
+  const [draft, setDraft] = useState25(String(value));
   return /* @__PURE__ */ jsxs38("div", { className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ jsx49(
       Input,
@@ -48636,6 +48701,7 @@ function safeQueryPage(requestedPage, totalItems, pageSize) {
 
 // src/data-table/MatrxDataTable.tsx
 import { Fragment as Fragment12, jsx as jsx51, jsxs as jsxs40 } from "react/jsx-runtime";
+var EMPTY_TABLE_ROWS = [];
 function TableToolbarAction({
   HostAction,
   ariaLabel,
@@ -48745,7 +48811,7 @@ function MatrxDataTableWithUrlState({
     ...urlState.history === void 0 ? {} : { history: urlState.history },
     ...urlState.textHistory === void 0 ? {} : { textHistory: urlState.textHistory }
   });
-  useEffect21(() => {
+  useEffect22(() => {
     if (activeUrlTableIds.has(urlState.id)) {
       throw new Error(
         `Duplicate MatrxDataTable urlState.id "${urlState.id}" on one page. Give every table a unique stable id.`
@@ -48854,7 +48920,7 @@ var DND_MEASURING = { droppable: { strategy: MeasuringStrategy.Always } };
 var NO_LAYERED_FILTERS = [];
 var NO_GROUPING_VALUE = "__matrx_no_grouping__";
 function useRenderEpoch(values) {
-  const held = useRef20(null);
+  const held = useRef21(null);
   const previous = held.current;
   if (previous !== null && previous.values.length === values.length && previous.values.every((value, i) => Object.is(value, values[i]))) {
     return previous.epoch;
@@ -48998,9 +49064,9 @@ function MatrxDataTableCore(coreProps) {
   } = coreProps;
   const appendQuery = query?.mode === "controlled-append" ? query : null;
   const appendQueryKey = appendQuery?.pagination.queryKey ?? null;
-  const committedAppendQueryKey = useRef20(appendQueryKey);
+  const committedAppendQueryKey = useRef21(appendQueryKey);
   const appendSourceChanged = appendQuery !== null && committedAppendQueryKey.current !== appendQueryKey;
-  const data = (appendQuery ? appendQuery.pagination.rows : suppliedData) ?? [];
+  const data = (appendQuery ? appendQuery.pagination.rows : suppliedData) ?? EMPTY_TABLE_ROWS;
   const readView = tableReadView(read, data.length, appendQuery ? appendQuery.pagination.loading : suppliedLoading);
   const isLoading = readView.loading;
   const isFetching = appendQuery ? appendQuery.pagination.isFetchingNextPage : suppliedFetching;
@@ -49011,19 +49077,21 @@ function MatrxDataTableCore(coreProps) {
   const ContextMenuBoundary = host.ContextMenuBoundary ?? TableContextPassthrough;
   const resolvedDensity = density ?? host.defaultDensity ?? "normal";
   const SavedViews = host.SavedViews;
+  const savedViewsId = tableId ?? urlState?.id;
+  const showViewTabs = viewTabs && Boolean(viewTabsStore || savedViewsId && SavedViews);
   const Link = host.Link ?? DefaultTableLink;
   const SidePanelSurface = host.SidePanelSurface ?? DefaultTableSidePanel;
   const { notify: toast, notice } = useTableNotice();
-  const [savedViewError, setSavedViewError] = useState25(null);
-  const [toolbarActionError, setToolbarActionError] = useState25(null);
-  const [toolbarActionPending, setToolbarActionPending] = useState25({ refresh: false, add: false });
-  const toolbarActionPendingRef = useRef20({ refresh: false, add: false });
+  const [savedViewError, setSavedViewError] = useState26(null);
+  const [toolbarActionError, setToolbarActionError] = useState26(null);
+  const [toolbarActionPending, setToolbarActionPending] = useState26({ refresh: false, add: false });
+  const toolbarActionPendingRef = useRef21({ refresh: false, add: false });
   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);
-  useEffect21(() => {
+  const [cardsActive, setCardsActive] = useState26(null);
+  useEffect22(() => {
     if (!mobileCards || typeof window === "undefined" || !window.matchMedia) return;
     const mql = window.matchMedia(cardsQuery);
     const read2 = () => setCardsActive(mql.matches);
@@ -49039,10 +49107,10 @@ function MatrxDataTableCore(coreProps) {
   const appendDefaultsToSourceProcessing = appendQuery !== null && sourceProcessing === void 0;
   const sourceColumnFilterOwnership = sourceProcessing?.columnFilters;
   const sourceOwnsColumnFilters = appendDefaultsToSourceProcessing ? true : sourceColumnFilterOwnership === "source" || typeof sourceColumnFilterOwnership === "object" && sourceColumnFilterOwnership.source.length > 0;
-  const remoteQueryUsesLocalColumnFilters = remoteQuery !== null && sourceColumnFilterOwnership === "local";
+  const remoteQueryUsesLocalProcessing = remoteQuery !== null && (sourceColumnFilterOwnership === "local" || remoteQuery.mode === "controlled" && (sourceProcessing?.search === "local" || sourceProcessing?.sort === "local"));
   const sourceOwnsSort = appendQuery !== null && sourceProcessing === void 0 ? true : sourceProcessing?.sort === "source";
   const sourceOwnsIntelligentSearch = sourceProcessing?.intelligentSearch === "source";
-  const sourceOwnsSearch = remoteQuery?.mode === "controlled" || appendQuery !== null && sourceProcessing === void 0 || sourceProcessing?.search === "source" || sourceOwnsIntelligentSearch;
+  const sourceOwnsSearch = remoteQuery?.mode === "controlled" && sourceProcessing?.search !== "local" || appendQuery !== null && sourceProcessing === void 0 || sourceProcessing?.search === "source" || sourceOwnsIntelligentSearch;
   const intelligentSearchEnabled = toolbar?.intelligentSearch !== void 0 && (sourceOwnsIntelligentSearch || remoteQuery === null && !sourceOwnsSearch);
   const emitControlledQueryChange = useCallback10(
     (patch, options) => {
@@ -49053,8 +49121,8 @@ function MatrxDataTableCore(coreProps) {
     },
     [controlledQuery]
   );
-  const [internalSearch, setInternalSearch] = useState25("");
-  const [draggedRowId, setDraggedRowId] = useState25(null);
+  const [internalSearch, setInternalSearch] = useState26("");
+  const [draggedRowId, setDraggedRowId] = useState26(null);
   const hierarchySensors = useSensors(useSensor(PointerSensor, POINTER_SENSOR_OPTIONS));
   const toolbarSearchControlled = toolbar?.searchValue !== void 0;
   const searchValue = controlledQuery ? controlledQuery.state.search : toolbarSearchControlled ? toolbar?.searchValue ?? "" : internalSearch;
@@ -49066,7 +49134,7 @@ function MatrxDataTableCore(coreProps) {
     }
     toolbar?.onSearchChange?.(v);
   };
-  const [internalSearchMatchMode, setInternalSearchMatchMode] = useState25(
+  const [internalSearchMatchMode, setInternalSearchMatchMode] = useState26(
     toolbar?.searchMatch?.defaultMode ?? "contains"
   );
   const searchMatchMode = controlledQuery ? controlledQuery.state.searchMatchMode ?? toolbar?.searchMatch?.defaultMode ?? "contains" : internalSearchMatchMode;
@@ -49077,7 +49145,7 @@ function MatrxDataTableCore(coreProps) {
     }
     setInternalSearchMatchMode(mode);
   };
-  const [internalSearchScope, setInternalSearchScope] = useState25("all");
+  const [internalSearchScope, setInternalSearchScope] = useState26("all");
   const searchScope = controlledQuery ? controlledQuery.state.searchScope ?? "all" : internalSearchScope;
   const setSearchScope = (scope) => {
     if (controlledQuery) {
@@ -49086,7 +49154,7 @@ function MatrxDataTableCore(coreProps) {
     }
     setInternalSearchScope(scope);
   };
-  const [internalAnyOf, setInternalAnyOf] = useState25("");
+  const [internalAnyOf, setInternalAnyOf] = useState26("");
   const toolbarAnyOfControlled = toolbar?.anyOf?.value !== void 0;
   const anyOfValue = controlledQuery ? controlledQuery.state.anyOf : toolbarAnyOfControlled ? toolbar?.anyOf?.value ?? "" : internalAnyOf;
   const setAnyOfValue = (v) => {
@@ -49097,7 +49165,7 @@ function MatrxDataTableCore(coreProps) {
     }
     toolbar?.anyOf?.onChange?.(v);
   };
-  const [internalLayeredFilters, setInternalLayeredFilters] = useState25([]);
+  const [internalLayeredFilters, setInternalLayeredFilters] = useState26([]);
   const layeredFilters = controlledQuery ? controlledQuery.state.layeredFilters ?? NO_LAYERED_FILTERS : internalLayeredFilters;
   const setLayeredFilters = (next) => {
     if (controlledQuery) {
@@ -49106,7 +49174,7 @@ function MatrxDataTableCore(coreProps) {
     }
     setInternalLayeredFilters(next);
   };
-  const [internalColumnFilters, setInternalColumnFilters] = useState25({});
+  const [internalColumnFilters, setInternalColumnFilters] = useState26({});
   const columnFilters = controlledQuery ? controlledQuery.state.columnFilters : internalColumnFilters;
   const localColumnFilters = useMemo11(() => {
     if (appendDefaultsToSourceProcessing) return {};
@@ -49130,7 +49198,7 @@ function MatrxDataTableCore(coreProps) {
     }
     setInternalColumnFilters(nextFilters);
   };
-  const [internalSort, setInternalSort] = useState25(defaultSort);
+  const [internalSort, setInternalSort] = useState26(defaultSort);
   const sort = controlledQuery ? controlledQuery.state.sort : internalSort;
   const setSort = (next) => {
     if (controlledQuery) {
@@ -49139,7 +49207,7 @@ function MatrxDataTableCore(coreProps) {
     }
     setInternalSort(next);
   };
-  const [internalPage, setInternalPage] = useState25(1);
+  const [internalPage, setInternalPage] = useState26(1);
   const page = controlledQuery ? controlledQuery.state.page : internalPage;
   const setPage = (next) => {
     if (controlledQuery) {
@@ -49148,7 +49216,7 @@ function MatrxDataTableCore(coreProps) {
     }
     setInternalPage(next);
   };
-  const [internalPageSize, setInternalPageSize] = useState25(
+  const [internalPageSize, setInternalPageSize] = useState26(
     defaultPageSize
   );
   const pageSize = controlledQuery ? controlledQuery.state.pageSize : internalPageSize;
@@ -49159,28 +49227,28 @@ function MatrxDataTableCore(coreProps) {
     }
     setInternalPageSize(next);
   };
-  const [uncontrolledSelectedId, setUncontrolledSelectedId] = useState25(null);
+  const [uncontrolledSelectedId, setUncontrolledSelectedId] = useState26(null);
   const rawSelectedId = controlledSelectedId !== void 0 ? controlledSelectedId : uncontrolledSelectedId;
   const selectedId = appendSourceChanged ? null : rawSelectedId;
   const setSelectedId = (id) => {
     if (controlledSelectedId === void 0) setUncontrolledSelectedId(id);
     onSelectedIdChange?.(id);
   };
-  const [uncontrolledWindowRowId, setUncontrolledWindowRowId] = useState25(null);
+  const [uncontrolledWindowRowId, setUncontrolledWindowRowId] = useState26(null);
   const rawWindowRowId = controlledWindowRowId !== void 0 ? controlledWindowRowId : uncontrolledWindowRowId;
   const windowRowId = appendSourceChanged ? null : rawWindowRowId;
   const setWindowRowId = (id) => {
     if (controlledWindowRowId === void 0) setUncontrolledWindowRowId(id);
     onWindowRowIdChange?.(id);
   };
-  const [windowRowSnapshot, setWindowRowSnapshot] = useState25(null);
+  const [windowRowSnapshot, setWindowRowSnapshot] = useState26(null);
   const editScopeKey = appendQueryKey === null ? "\0local" : `append:${appendQueryKey}`;
-  const [editsByScope, setEditsByScope] = useState25({});
-  const editRevisionRef = useRef20({});
-  const [savingByScope, setSavingByScope] = useState25({});
-  const savingScopesRef = useRef20(/* @__PURE__ */ new Set());
-  const [editRequest, setEditRequest] = useState25(null);
-  const [confirmForeignDraftDiscard, setConfirmForeignDraftDiscard] = useState25(false);
+  const [editsByScope, setEditsByScope] = useState26({});
+  const editRevisionRef = useRef21({});
+  const [savingByScope, setSavingByScope] = useState26({});
+  const savingScopesRef = useRef21(/* @__PURE__ */ new Set());
+  const [editRequest, setEditRequest] = useState26(null);
+  const [confirmForeignDraftDiscard, setConfirmForeignDraftDiscard] = useState26(false);
   const edits = editsByScope[editScopeKey]?.values ?? {};
   const saving = (savingByScope[editScopeKey] ?? 0) > 0;
   const setEdits = (next) => {
@@ -49247,7 +49315,7 @@ function MatrxDataTableCore(coreProps) {
     rows: Object.entries(draft.values).map(([rowId, columns2]) => ({ rowId, columns: columns2 }))
   }));
   const selection = appendSourceChanged && selectionConfig ? { ...selectionConfig, selectedIds: [] } : selectionConfig;
-  useEffect21(() => {
+  useEffect22(() => {
     const previous = committedAppendQueryKey.current;
     committedAppendQueryKey.current = appendQueryKey;
     if (previous === null || appendQueryKey === null || previous === appendQueryKey) {
@@ -49265,13 +49333,13 @@ function MatrxDataTableCore(coreProps) {
     onWindowRowIdChange,
     selectionConfig
   ]);
-  const scrollRef = useRef20(null);
-  const tableRef = useRef20(null);
-  const tableHeaderRef = useRef20(null);
-  const cardsScrollRef = useRef20(null);
-  const [documentStickyHeader, setDocumentStickyHeader] = useState25(false);
-  const documentStickyHeaderRef = useRef20(false);
-  const previousAppendKeyForScrollReset = useRef20(appendQueryKey);
+  const scrollRef = useRef21(null);
+  const tableRef = useRef21(null);
+  const tableHeaderRef = useRef21(null);
+  const cardsScrollRef = useRef21(null);
+  const [documentStickyHeader, setDocumentStickyHeader] = useState26(false);
+  const documentStickyHeaderRef = useRef21(false);
+  const previousAppendKeyForScrollReset = useRef21(appendQueryKey);
   useLayoutEffect5(() => {
     const previous = previousAppendKeyForScrollReset.current;
     previousAppendKeyForScrollReset.current = appendQueryKey;
@@ -49297,13 +49365,13 @@ function MatrxDataTableCore(coreProps) {
     ...appendScrollPolicy?.mode === "scroll" && appendScrollPolicy.thresholdPx !== void 0 ? { thresholdPx: appendScrollPolicy.thresholdPx } : {},
     ...appendScrollPolicy?.mode === "scroll" && appendScrollPolicy.intentTimeoutMs !== void 0 ? { intentTimeoutMs: appendScrollPolicy.intentTimeoutMs } : {}
   });
-  const rootRef = useRef20(null);
+  const rootRef = useRef21(null);
   useClippedContentGuard(rootRef, {
     label: typeof copy === "object" && copy.listLabel ? `Table: ${copy.listLabel}` : "MatrxDataTable"
   });
-  const [scrollHintRight, setScrollHintRight] = useState25(false);
-  const [scrollHintLeft, setScrollHintLeft] = useState25(false);
-  const [scrollHintRightInset, setScrollHintRightInset] = useState25(6);
+  const [scrollHintRight, setScrollHintRight] = useState26(false);
+  const [scrollHintLeft, setScrollHintLeft] = useState26(false);
+  const [scrollHintRightInset, setScrollHintRightInset] = useState26(6);
   const updateScrollHint = useCallback10(() => {
     const el = scrollRef.current;
     if (!el) return;
@@ -49321,7 +49389,7 @@ function MatrxDataTableCore(coreProps) {
       behavior: "smooth"
     });
   };
-  useEffect21(() => {
+  useEffect22(() => {
     updateScrollHint();
     window.addEventListener("resize", updateScrollHint);
     const el = scrollRef.current;
@@ -49395,26 +49463,26 @@ function MatrxDataTableCore(coreProps) {
       window.removeEventListener("resize", requestUpdate);
     };
   }, [stickyHeader, data, columns]);
-  const [columnOrder, setColumnOrder] = useState25(() => columnState?.order ?? columns.map(columnId));
-  const [hiddenColumnIds, setHiddenColumnIds] = useState25(
+  const [columnOrder, setColumnOrder] = useState26(() => columnState?.order ?? columns.map(columnId));
+  const [hiddenColumnIds, setHiddenColumnIds] = useState26(
     () => new Set(columnState?.hidden ?? columns.filter((column) => column.hidden).map(columnId))
   );
-  const [columnWidths, setColumnWidths] = useState25(
+  const [columnWidths, setColumnWidths] = useState26(
     () => normalizeColumnWidthsForColumns(columnState?.widths, columns)
   );
-  const [fixedTableGeometry, setFixedTableGeometry] = useState25(null);
-  const knownColumnIds = useRef20(new Set(columns.map(columnId)));
-  const draggedColumnId = useRef20(null);
-  const columnDragActive = useRef20(false);
-  const columnDragRaf = useRef20(null);
-  const columnDragScrollDirection = useRef20(0);
-  const [columnDragPreview, setColumnDragPreview] = useState25(null);
+  const [fixedTableGeometry, setFixedTableGeometry] = useState26(null);
+  const knownColumnIds = useRef21(new Set(columns.map(columnId)));
+  const draggedColumnId = useRef21(null);
+  const columnDragActive = useRef21(false);
+  const columnDragRaf = useRef21(null);
+  const columnDragScrollDirection = useRef21(0);
+  const [columnDragPreview, setColumnDragPreview] = useState26(null);
   const stopColumnDragScroll = useCallback10(() => {
     if (columnDragRaf.current !== null) cancelAnimationFrame(columnDragRaf.current);
     columnDragRaf.current = null;
     columnDragScrollDirection.current = 0;
   }, []);
-  useEffect21(() => () => {
+  useEffect22(() => () => {
     columnDragActive.current = false;
     stopColumnDragScroll();
   }, [stopColumnDragScroll]);
@@ -49452,7 +49520,7 @@ function MatrxDataTableCore(coreProps) {
       setHiddenColumnIds(hidden);
     }
   }, [columnState]);
-  const [internalColumnManagerOpen, setInternalColumnManagerOpen] = useState25(false);
+  const [internalColumnManagerOpen, setInternalColumnManagerOpen] = useState26(false);
   const columnManagerOpen = controlledColumnManager?.open ?? internalColumnManagerOpen;
   const setColumnManagerOpen = controlledColumnManager?.onOpenChange ?? setInternalColumnManagerOpen;
   const columnIds = useMemo11(() => columns.map(columnId), [columns]);
@@ -49462,7 +49530,7 @@ function MatrxDataTableCore(coreProps) {
     () => normalizeColumnWidthsForColumns(columnState?.widths ?? columnWidths, columns),
     [columns, columnState?.widths, columnWidths]
   );
-  const resizeGestureSnapshotRef = useRef20(null);
+  const resizeGestureSnapshotRef = useRef21(null);
   const measureVisibleColumnWidths = useCallback10(() => {
     const measured = {};
     const headers = tableRef.current ? Array.from(tableRef.current.querySelectorAll(
@@ -49540,7 +49608,7 @@ function MatrxDataTableCore(coreProps) {
     }
     setColumnWidths(normalized);
   }, [columnIds, columnState, columns, measureFixedTableGeometry, measureVisibleColumnWidths]);
-  useEffect21(() => {
+  useEffect22(() => {
     const ids = columns.map(columnId);
     if (columnState) return;
     const previousIds = knownColumnIds.current;
@@ -49607,7 +49675,7 @@ function MatrxDataTableCore(coreProps) {
   const fixedLayoutActive = usesMeasuredFixedLayout && fixedTableGeometry !== null;
   const freezeWanted = visibleColumns.some((column) => column.frozen);
   const selectionColumnWidth = fixedTableGeometry?.selectionWidth ?? (selection && (freezeWanted || fitToWidth) ? SELECTION_COLUMN_PX : void 0);
-  const [fitSpace, setFitSpace] = useState25(null);
+  const [fitSpace, setFitSpace] = useState26(null);
   useLayoutEffect5(() => {
     if (!fitToWidth) {
       setFitSpace(null);
@@ -49623,19 +49691,28 @@ function MatrxDataTableCore(coreProps) {
         ...strips.map((strip) => Math.ceil(strip.scrollWidth) + 16),
         actionsHeader ? Math.ceil(actionsHeader.scrollWidth) : 0
       );
-      const next = { width: el.clientWidth, actions };
-      setFitSpace((now) => now && now.width === next.width && now.actions === next.actions ? now : next);
+      const table2 = el.querySelector(":scope > table");
+      const spill = table2 && table2.hasAttribute("data-matrx-table-fit") ? Math.max(0, el.scrollWidth - el.clientWidth) : 0;
+      setFitSpace((now) => {
+        const sameWidth = now !== null && now.width === el.clientWidth;
+        const slack = sameWidth ? now.slack + spill : spill;
+        const next = { width: el.clientWidth, actions, slack };
+        return now && now.width === next.width && now.actions === next.actions && now.slack === next.slack ? now : next;
+      });
     };
     read2();
     if (typeof ResizeObserver === "undefined") return;
     const observer = new ResizeObserver(read2);
     observer.observe(el);
+    const table = el.querySelector(":scope > table");
+    if (table) observer.observe(table);
     return () => observer.disconnect();
   }, [fitToWidth, data.length]);
   const fittedWidths = useMemo11(() => {
     if (!fitToWidth || !fitSpace) return null;
-    const scaling = visibleColumns.filter((col) => resolveColumnMarker(col) === void 0);
-    const fixed = visibleColumns.filter((col) => resolveColumnMarker(col) !== void 0).reduce((sum, col) => sum + (pixelWidth(col.width) ?? 40), 0);
+    const keepsItsWidth = (col) => resolveColumnMarker(col) !== void 0 || col.resizable === false && pixelWidth(col.width) !== void 0;
+    const scaling = visibleColumns.filter((col) => !keepsItsWidth(col));
+    const fixed = visibleColumns.filter(keepsItsWidth).reduce((sum, col) => sum + (pixelWidth(col.width) ?? 40), 0);
     const utilities = (selection ? selectionColumnWidth ?? SELECTION_COLUMN_PX : 0) + fitSpace.actions;
     return fitColumnWidths(
       scaling.map(columnId),
@@ -49643,7 +49720,7 @@ function MatrxDataTableCore(coreProps) {
         const col = scaling.find((c) => columnId(c) === id);
         return effectiveColumnWidths[id] ?? pixelWidth(col?.width) ?? FIT_DEFAULT_COLUMN_PX;
       },
-      fitSpace.width - utilities - fixed
+      fitSpace.width - utilities - fixed - fitSpace.slack
     );
   }, [fitToWidth, fitSpace, visibleColumns, selection, selectionColumnWidth, effectiveColumnWidths]);
   const fitActive = fittedWidths !== null;
@@ -49721,7 +49798,7 @@ function MatrxDataTableCore(coreProps) {
   const effectiveCopy = copy === false ? void 0 : copy ?? defaultCopy;
   const effectiveCopyColumns = copy === void 0 ? declaredVisibleCopyColumns : visibleColumns;
   const copySubsetVariant2 = useCopySubsetVariant();
-  const chromeLatest = useRef20({
+  const chromeLatest = useRef21({
     processed: [],
     data: [],
     toggleAllOnPage: () => void 0,
@@ -49765,7 +49842,7 @@ function MatrxDataTableCore(coreProps) {
     [columns, data, toolbar?.intelligentSearch?.roles, toolbar?.intelligentSearch?.scopes]
   );
   const processed = useMemo11(() => {
-    if (remoteQuery && !appendUsesLocalProcessing && !remoteQueryUsesLocalColumnFilters) return data;
+    if (remoteQuery && !appendUsesLocalProcessing && !remoteQueryUsesLocalProcessing) return data;
     if (processLocalRows) {
       return processLocalRows(data, {
         page,
@@ -49821,15 +49898,15 @@ function MatrxDataTableCore(coreProps) {
     pageSize,
     remoteQuery,
     appendUsesLocalProcessing,
-    remoteQueryUsesLocalColumnFilters,
+    remoteQueryUsesLocalProcessing,
     sourceOwnsColumnFilters,
     sourceOwnsSort,
     sourceOwnsSearch,
     intelligentSearchEnabled,
     searchScope
   ]);
-  const lastNotifiedViewRows = useRef20(null);
-  useEffect21(() => {
+  const lastNotifiedViewRows = useRef21(null);
+  useEffect22(() => {
     if (!onViewChange) {
       lastNotifiedViewRows.current = null;
       return;
@@ -49838,7 +49915,7 @@ function MatrxDataTableCore(coreProps) {
     lastNotifiedViewRows.current = processed;
     if (changed) onViewChange(processed);
   }, [processed, onViewChange]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (controlledQuery) return;
     setInternalPage(1);
   }, [
@@ -49891,7 +49968,7 @@ function MatrxDataTableCore(coreProps) {
     return processed.slice(start, start + effectivePageSize);
   }, [processed, safePage, effectivePageSize, pageSize, remoteQuery, hidePagination, localProgressiveEnabled, progressiveRows.rows]);
   const groupingColumnId = grouping?.columnId ?? null;
-  const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState25([]);
+  const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState26([]);
   const collapsedGroups = grouping?.collapsed ?? uncontrolledCollapsed;
   const setCollapsedGroups = useCallback10(
     (next) => {
@@ -49948,9 +50025,9 @@ function MatrxDataTableCore(coreProps) {
     return run;
   }, [visibleColumns, frozenColumns]);
   const columnVirtualizeActive = virtualizeConfig !== null && virtualizeConfig.enabled !== false && virtualizeConfig.columns === true && visibleColumns.length - frozenRunLength > 30 && !hierarchy && mobileCards === void 0;
-  const [rowWindow, setRowWindow] = useState25(null);
-  const [columnWindow, setColumnWindow] = useState25(null);
-  const windowInputs = useRef20({
+  const [rowWindow, setRowWindow] = useState26(null);
+  const [columnWindow, setColumnWindow] = useState26(null);
+  const windowInputs = useRef21({
     virtualizeActive: false,
     bodyEntryCount: 0,
     virtualRowHeight: 40,
@@ -50022,7 +50099,7 @@ function MatrxDataTableCore(coreProps) {
     frozenRunLength
   ]);
   const metricsWanted = virtualizeActive || columnVirtualizeActive;
-  useEffect21(() => {
+  useEffect22(() => {
     recomputeWindows();
   }, [
     recomputeWindows,
@@ -50034,7 +50111,7 @@ function MatrxDataTableCore(coreProps) {
     columnWindowWidth,
     frozenRunLength
   ]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (!metricsWanted) return;
     const el = scrollRef.current;
     if (!el) return;
@@ -50103,7 +50180,7 @@ function MatrxDataTableCore(coreProps) {
       windowed.push({ kind: "spacer", height: effectiveRowWindow.padEnd, place: "end" });
     return windowed;
   }, [groupedRenderRows, collapsedGroups, paginated, effectiveRowWindow]);
-  const getRowIdRef = useRef20(getRowId);
+  const getRowIdRef = useRef21(getRowId);
   getRowIdRef.current = getRowId;
   const spreadsheetRowIds = useMemo11(
     () => paginated.map((row) => getRowIdRef.current(row)),
@@ -50124,7 +50201,7 @@ function MatrxDataTableCore(coreProps) {
     return map;
   }, [visibleColumns]);
   const spreadsheetEnabled = Boolean(spreadsheet && spreadsheet.enabled !== false);
-  const openRowRef = useRef20(() => void 0);
+  const openRowRef = useRef21(() => void 0);
   const sheet = useSpreadsheetGrid(
     spreadsheetEnabled && spreadsheet ? {
       rowIds: spreadsheetRowIds,
@@ -50166,12 +50243,12 @@ function MatrxDataTableCore(coreProps) {
     } : null
   );
   if (spreadsheet?.controllerRef) spreadsheet.controllerRef.current = spreadsheetEnabled ? sheet.controller : null;
-  const sheetRef = useRef20(sheet);
+  const sheetRef = useRef21(sheet);
   sheetRef.current = sheet;
-  const onSheetSelectionRef = useRef20(spreadsheet?.onSelectionChange);
+  const onSheetSelectionRef = useRef21(spreadsheet?.onSelectionChange);
   onSheetSelectionRef.current = spreadsheet?.onSelectionChange;
   const sheetSelectionKey = sheet.range ? `${sheet.range.anchor.rowId}\0${sheet.range.anchor.fieldName}\0${sheet.range.focus.rowId}\0${sheet.range.focus.fieldName}\0${sheet.bounds ? `${sheet.bounds.r0}:${sheet.bounds.r1}:${sheet.bounds.c0}:${sheet.bounds.c1}` : ""}` : "";
-  useEffect21(() => {
+  useEffect22(() => {
     const tell = onSheetSelectionRef.current;
     if (!tell) return;
     const current = sheetRef.current;
@@ -50188,10 +50265,11 @@ function MatrxDataTableCore(coreProps) {
       tsv: current.selectionTsv()
     });
   }, [sheetSelectionKey]);
-  const searchValueRef = useRef20(searchValue);
+  const searchValueRef = useRef21(searchValue);
   searchValueRef.current = searchValue;
   const facetsEnabled = Boolean(facets && facets.enabled !== false);
-  const [facetState, setFacetState] = useState25({});
+  const coreSuggestionsEnabled = facets?.enabled !== false;
+  const [facetState, setFacetState] = useState26({});
   const facetReadCell = useCallback10(
     (row, colId) => {
       if (facets?.readCell) return facets.readCell(row, colId);
@@ -50200,12 +50278,37 @@ function MatrxDataTableCore(coreProps) {
     },
     [facets, visibleColumns]
   );
-  const facetInputsRef = useRef20({ data, facets, facetReadCell });
-  facetInputsRef.current = { data, facets, facetReadCell };
-  const facetRequestRef = useRef20(/* @__PURE__ */ new Map());
+  const coreFacetTotal = remoteQuery?.mode === "controlled" ? remoteQuery.totalItems : appendQuery?.pagination.sourceRecords?.total ?? coverage?.matched ?? coverage?.total;
+  const coreFacetLoaded = appendQuery?.pagination.sourceRecords?.loaded;
+  const facetInputsRef = useRef21({ data, facets, facetReadCell, coreFacetTotal, coreFacetLoaded });
+  facetInputsRef.current = { data, facets, facetReadCell, coreFacetTotal, coreFacetLoaded };
+  const facetRequestRef = useRef21(/* @__PURE__ */ new Map());
   const requestFacets = useCallback10((colId) => {
-    const { data: rows, facets: config, facetReadCell: readCell } = facetInputsRef.current;
-    if (!config || config.enabled === false) return;
+    const { data: rows, facets: config, facetReadCell: readCell, coreFacetTotal: total, coreFacetLoaded: loaded } = facetInputsRef.current;
+    if (!config || config.enabled === false) {
+      const complete2 = localFacetsAreComplete(loaded ?? rows.length, total ?? rows.length);
+      const hasArrayValue = rows.some((row) => {
+        try {
+          return Array.isArray(readCell(row, colId));
+        } catch {
+          return false;
+        }
+      });
+      const suggestions = computeColumnFacets({
+        columnId: colId,
+        rows,
+        readValue: readCell,
+        complete: complete2
+      });
+      setFacetState((current) => ({
+        ...current,
+        [colId]: {
+          loading: false,
+          data: !hasArrayValue && suggestions.distinctCount + (suggestions.blank > 0 ? 1 : 0) < CORE_SUGGESTION_DISTINCT_EXCLUSIVE_LIMIT ? suggestions : null
+        }
+      }));
+      return;
+    }
     const complete = localFacetsAreComplete(rows.length, config.totalRows);
     const limit = config.limit;
     if (complete || !config.source) {
@@ -50262,13 +50365,12 @@ function MatrxDataTableCore(coreProps) {
       }));
     });
   }, []);
-  useEffect21(() => {
-    if (!facetsEnabled) return;
+  useEffect22(() => {
     setFacetState({});
     facetRequestRef.current = /* @__PURE__ */ new Map();
-  }, [facetsEnabled, data, searchValue]);
+  }, [facetsEnabled, data, searchValue, coreFacetTotal, coreFacetLoaded]);
   const totalIsKnown = !isLoading && !readView.failure;
-  useEffect21(() => {
+  useEffect22(() => {
     if (!controlledQuery || !totalIsKnown || controlledQuery.state.page === safePage) return;
     emitControlledQueryChange({ page: safePage });
   }, [controlledQuery, emitControlledQueryChange, safePage, totalIsKnown]);
@@ -50295,39 +50397,60 @@ function MatrxDataTableCore(coreProps) {
     const target = toolbar.portalInto;
     return target ? createPortal3(node, target) : null;
   };
+  const [pinnedEl, setPinnedEl] = useState26(null);
+  const pinnedRowActive = Boolean(
+    toolbar?.singleRow && toolbar.overflow && toolbar.overflow.mode !== "sheet" && (toolbar.overflow.pinned || toolbar.overflow.mode === "menu")
+  );
+  const pinnedFolded = usePinnedFold(pinnedEl, pinnedRowActive);
+  const toolbarEnd = { node: null };
   const renderToolbarControls = (controls) => {
+    toolbarEnd.node = null;
     const overflow = toolbar?.overflow;
     const mode = overflow?.mode ?? "inline";
-    const stick = (node) => toolbar?.singleRow ? /* @__PURE__ */ jsx51(
-      "span",
-      {
-        "data-matrx-table-toolbar-pinned": "",
-        className: "sticky right-0 z-[1] flex shrink-0 items-center gap-1 bg-background pl-1 before:pointer-events-none before:absolute before:inset-y-0 before:-left-6 before:w-6 before:bg-gradient-to-l before:from-background before:to-transparent",
-        children: node
-      }
-    ) : node;
-    if (mode === "menu") {
-      return stick(
-        /* @__PURE__ */ jsxs40(Fragment12, { children: [
+    if (mode === "sheet") {
+      return /* @__PURE__ */ jsxs40(ToolbarOverflowSheet, { ...overflow?.label ? { label: overflow.label } : {}, top: overflow?.sheetTop, children: [
+        controls,
+        overflow?.pinned,
+        overflow?.sheetExtras
+      ] });
+    }
+    if (!pinnedRowActive) {
+      if (mode === "menu") {
+        return /* @__PURE__ */ jsxs40(Fragment12, { children: [
           overflow?.pinned,
           /* @__PURE__ */ jsxs40(ToolbarOverflowMenu, { children: [
             controls,
             overflow?.sheetExtras
           ] })
-        ] })
-      );
-    }
-    if (mode === "sheet") {
-      return /* @__PURE__ */ jsxs40(ToolbarOverflowSheet, { ...overflow?.label ? { label: overflow.label } : {}, top: overflow?.sheetTop, children: [
+        ] });
+      }
+      return /* @__PURE__ */ jsxs40(Fragment12, { children: [
         controls,
-        overflow?.pinned,
-        overflow?.sheetExtras
+        overflow?.pinned
       ] });
     }
-    return /* @__PURE__ */ jsxs40(Fragment12, { children: [
-      controls,
-      overflow?.pinned ? stick(overflow.pinned) : null
-    ] });
+    const folded = pinnedFolded;
+    toolbarEnd.node = /* @__PURE__ */ jsx51(
+      "span",
+      {
+        ref: setPinnedEl,
+        "data-matrx-table-toolbar-pinned": "",
+        ...folded ? { "data-matrx-table-toolbar-pinned-folded": "" } : {},
+        className: "sticky right-0 z-[1] -ml-1 flex shrink-0 items-center gap-1 bg-background pl-1 before:pointer-events-none before:absolute before:inset-y-0 before:-left-6 before:w-6 before:bg-gradient-to-l before:from-background before:to-transparent",
+        children: folded ? /* @__PURE__ */ jsxs40(ToolbarOverflowMenu, { children: [
+          controls,
+          overflow?.pinned,
+          overflow?.sheetExtras
+        ] }) : mode === "menu" ? /* @__PURE__ */ jsxs40(Fragment12, { children: [
+          overflow?.pinned,
+          /* @__PURE__ */ jsxs40(ToolbarOverflowMenu, { children: [
+            controls,
+            overflow?.sheetExtras
+          ] })
+        ] }) : overflow?.pinned
+      }
+    );
+    return folded || mode === "menu" ? null : controls;
   };
   const renderRowActions = (row, controls) => {
     const actions = rowActions?.(row, controls);
@@ -50483,7 +50606,7 @@ function MatrxDataTableCore(coreProps) {
     }
     resetToolbarFacets(toolbar?.facets);
   };
-  const renderedEmptyState = (remoteQuery === null || remoteQueryUsesLocalColumnFilters) && data.length > 0 && hasActiveFilters ? {
+  const renderedEmptyState = (remoteQuery === null || remoteQueryUsesLocalProcessing) && data.length > 0 && hasActiveFilters ? {
     title: "No matching rows",
     description: "No rows match the current search or filters.",
     action: /* @__PURE__ */ jsx51(Button, { type: "button", variant: "outline", size: "sm", onClick: clearAllFilters, children: "Clear filters" }),
@@ -50576,7 +50699,7 @@ function MatrxDataTableCore(coreProps) {
     }));
     return true;
   };
-  const requestCellEditRef = useRef20(requestCellEdit);
+  const requestCellEditRef = useRef21(requestCellEdit);
   requestCellEditRef.current = requestCellEdit;
   const buildRecordControls = (row) => {
     const rowId = getRowId(row);
@@ -50922,16 +51045,16 @@ function MatrxDataTableCore(coreProps) {
       return [];
     }
   };
-  const menuSectionsForRef = useRef20(menuSectionsFor);
+  const menuSectionsForRef = useRef21(menuSectionsFor);
   menuSectionsForRef.current = menuSectionsFor;
   const hasMenuSections = Boolean(contextMenu?.sections);
   const boundarySections = useCallback10(
     (target) => menuSectionsForRef.current(target),
     []
   );
-  const resolveMenuLevelRef = useRef20(resolveMenuLevel);
+  const resolveMenuLevelRef = useRef21(resolveMenuLevel);
   resolveMenuLevelRef.current = resolveMenuLevel;
-  useEffect21(() => {
+  useEffect22(() => {
     if (!host.rowContextRegistry) return;
     return host.rowContextRegistry.register(
       tableContextMenuInstanceId,
@@ -50961,7 +51084,7 @@ function MatrxDataTableCore(coreProps) {
       return true;
     });
   }, [data, getSelectionId, selectedIdSet]);
-  const lastToggledIndex = useRef20(null);
+  const lastToggledIndex = useRef21(null);
   const setSelectedIds = (next) => selection?.onSelectedIdsChange([...next]);
   const toggleRowSelected = (index, shiftKey) => {
     if (!selection) return;
@@ -51002,7 +51125,7 @@ function MatrxDataTableCore(coreProps) {
       }
     } : facet
   ) : toolbar?.facets;
-  const rowLatest = useRef20(null);
+  const rowLatest = useRef21(null);
   const renderRecordCell = (row, col, index) => {
     const id = getRowId(row);
     const field = col.accessorKey ? String(col.accessorKey) : columnId(col);
@@ -51081,7 +51204,6 @@ function MatrxDataTableCore(coreProps) {
         pageSize: defaultPageSize,
         search: "",
         anyOf: "",
-        layeredFilters: [],
         columnFilters: {},
         sort: defaultSort
       },
@@ -51317,6 +51439,7 @@ function MatrxDataTableCore(coreProps) {
     allRowsAreLoaded,
     effectivePageSize,
     safePage,
+    isFetching,
     controlledQuery,
     emitControlledQueryChange,
     ...pageSizeOptions
@@ -51324,6 +51447,8 @@ function MatrxDataTableCore(coreProps) {
   const toolbarReadsRows = showToolbarCopy && copyDrawsFromRows(effectiveCopy);
   const toolbarEpoch = useRenderEpoch([
     hideToolbar,
+    pinnedFolded,
+    pinnedRowActive,
     viewTabs,
     toolbar,
     showSearch,
@@ -51835,43 +51960,40 @@ function MatrxDataTableCore(coreProps) {
                 "data-matrx-table-density": resolvedDensity,
                 "data-url-state-table": urlState?.id,
                 className: cn(
-                  "flex h-full min-h-0 flex-col gap-2 px-0 py-2",
+                  "flex h-full min-h-0 flex-col gap-2 px-0 pt-2 pb-0",
                   className
                 ),
                 children: [
                   notice,
                   savedViewError ? /* @__PURE__ */ jsx51(ErrorBox, { className: "shrink-0 text-xs text-destructive", message: savedViewError, operation: "Save or apply a saved view", origin: "design-system/MatrxDataTable" }) : null,
                   toolbarActionError ? /* @__PURE__ */ jsx51(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__ */ jsxs40(
+                  summaryMetrics.length > 0 ? /* @__PURE__ */ jsx51(
                     "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__ */ jsx51("span", { className: "flex items-center px-1 text-xs font-medium text-muted-foreground", children: summaryCaption }),
-                        summaryMetrics.map((metric) => /* @__PURE__ */ jsxs40("div", { className: "min-w-24 rounded-md border border-border bg-card px-3 py-2 shadow-xs", children: [
-                          /* @__PURE__ */ jsx51("div", { className: "text-xs text-muted-foreground", children: metric.label }),
-                          /* @__PURE__ */ jsxs40("div", { className: "mt-0.5 text-sm font-semibold tabular-nums text-foreground", children: [
-                            metric.value,
-                            metric.unavailable ? /* @__PURE__ */ jsx51(ErrorBox, { as: "span", className: "sr-only", message: `${metric.label} is unavailable`, operation: "Summarize this table", origin: "design-system/MatrxDataTable" }) : null
-                          ] })
-                        ] }, metric.id))
-                      ]
+                      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__ */ jsxs40("div", { className: "min-w-24 shrink-0 whitespace-nowrap rounded-md border border-border bg-card px-3 py-2 shadow-xs", children: [
+                        /* @__PURE__ */ jsx51("div", { className: "text-xs text-muted-foreground", children: metric.label }),
+                        /* @__PURE__ */ jsxs40("div", { className: "mt-0.5 text-sm font-semibold tabular-nums text-foreground", children: [
+                          metric.value,
+                          metric.unavailable ? /* @__PURE__ */ jsx51(ErrorBox, { as: "span", className: "sr-only", message: `${metric.label} is unavailable`, operation: "Summarize this table", origin: "design-system/MatrxDataTable" }) : null
+                        ] })
+                      ] }, metric.id))
                     }
                   ) : null,
-                  /* @__PURE__ */ jsx51(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__ */ jsxs40(
+                  /* @__PURE__ */ jsx51(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__ */ jsxs40(
                     TableTitleRow,
                     {
                       ...toolbar?.singleRow ? { singleRow: true } : {},
-                      tabs: viewTabs ? /* @__PURE__ */ jsx51(TableViewWorkspace, { snapshot: currentViewSnapshot, onApply: applyLatestSavedView, related: relatedTableActions, ...viewTabsStore ? { store: viewTabsStore } : {} }, tableId ?? "table") : void 0,
+                      tabs: viewTabs && viewTabsStore ? /* @__PURE__ */ jsx51(TableViewWorkspace, { snapshot: currentViewSnapshot, onApply: applyLatestSavedView, related: relatedTableActions, ...viewTabsStore ? { store: viewTabsStore } : {} }, savedViewsId ?? "table") : viewTabs && savedViewsId && SavedViews ? /* @__PURE__ */ jsx51(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: tableId && SavedViews ? /* @__PURE__ */ jsx51("span", { "data-matrx-table-view-control": true, children: /* @__PURE__ */ jsx51(
+                      context: savedViewsId && SavedViews && !viewTabs ? /* @__PURE__ */ jsx51("span", { "data-matrx-table-view-control": true, children: /* @__PURE__ */ jsx51(
                         SavedViews,
                         {
-                          tableId,
+                          tableId: savedViewsId,
                           snapshot: currentViewSnapshot,
                           defaultSnapshot: declaredDefaultViewSnapshot,
                           onApply: applyLatestSavedView
@@ -52173,7 +52295,8 @@ function MatrxDataTableCore(coreProps) {
                               ] }))
                             ]
                           }
-                        )
+                        ),
+                        toolbarEnd.node
                       ]
                     }
                   )) }),
@@ -52487,7 +52610,7 @@ function MatrxDataTableCore(coreProps) {
                                                   {
                                                     label: col.header,
                                                     labelText: headerLabel,
-                                                    ...facetsEnabled ? {
+                                                    ...facetsEnabled || meta?.kind !== void 0 && meta.kind !== null && coreSuggestionsEnabled ? {
                                                       facets: facetState[id]?.data ?? null,
                                                       facetsLoading: facetState[id]?.loading ?? false,
                                                       ...facetState[id]?.error === void 0 ? {} : { facetsError: facetState[id]?.error },
@@ -52612,12 +52735,12 @@ function MatrxDataTableCore(coreProps) {
                                         },
                                         "matrx-column-spacer-end"
                                       ) : null
-                                    ] }, `sk-${i}`)) : readFailure ? /* @__PURE__ */ jsx51("tr", { children: /* @__PURE__ */ jsx51("td", { colSpan: renderedColSpan, "data-matrx-table-message-cell": true, className: "px-0 py-12 text-center", children: /* @__PURE__ */ jsx51("div", { className: "sticky left-0 flex flex-col items-center gap-2 whitespace-normal px-4", style: { width: "100cqw", maxWidth: "100%" }, children: readFailure }) }) }) : paginated.length === 0 ? /* @__PURE__ */ jsx51("tr", { children: /* @__PURE__ */ jsx51(
+                                    ] }, `sk-${i}`)) : readFailure ? /* @__PURE__ */ jsx51("tr", { children: /* @__PURE__ */ jsx51("td", { colSpan: renderedColSpan, "data-matrx-table-message-cell": true, className: "overflow-visible! px-0 py-12 text-center", children: /* @__PURE__ */ jsx51("div", { className: "sticky left-0 flex flex-col items-center gap-2 whitespace-normal px-4", style: { width: "100cqw", maxWidth: "100%" }, children: readFailure }) }) }) : paginated.length === 0 ? /* @__PURE__ */ jsx51("tr", { children: /* @__PURE__ */ jsx51(
                                       "td",
                                       {
                                         colSpan: renderedColSpan,
                                         "data-matrx-table-message-cell": true,
-                                        className: "px-0 py-12 text-center",
+                                        className: "overflow-visible! px-0 py-12 text-center",
                                         children: /* @__PURE__ */ jsxs40("div", { "data-matrx-table-empty-state": true, className: "sticky left-0 flex flex-col items-center gap-2 whitespace-normal px-4", style: { width: "100cqw", maxWidth: "100%" }, children: [
                                           renderedEmptyState?.icon,
                                           /* @__PURE__ */ jsx51("p", { className: "text-sm font-medium text-foreground", children: renderedEmptyState?.title ?? "No rows" }),
@@ -52707,62 +52830,61 @@ function MatrxDataTableCore(coreProps) {
                                     "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__ */ jsxs40(Fragment12, { children: [
-                                      /* @__PURE__ */ jsx51("tr", { "data-matrx-table-summary-total-caption": true, children: /* @__PURE__ */ jsxs40("td", { colSpan: renderedColSpan, className: "px-2 pt-2 text-xs font-medium text-muted-foreground", children: [
-                                        summaryCaption,
-                                        readView.stale ? /* @__PURE__ */ jsx51("span", { className: "ml-1 text-amber-700 dark:text-amber-300", children: "Retained rows may be out of date." }) : null
-                                      ] }) }),
-                                      /* @__PURE__ */ jsxs40("tr", { "data-matrx-table-summary-totals": true, children: [
-                                        selection ? /* @__PURE__ */ jsx51("td", { className: "px-2 py-2" }) : null,
-                                        columnSpacers && columnSpacers.start > 0 ? /* @__PURE__ */ jsx51(
-                                          "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__ */ jsxs40(
-                                            "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__ */ jsx51(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__ */ jsx51(
+                                    hasSummaryTotals ? /* @__PURE__ */ jsx51(Fragment12, { children: /* @__PURE__ */ jsxs40("tr", { "data-matrx-table-summary-totals": true, children: [
+                                      selection ? /* @__PURE__ */ jsx51("td", { className: "px-2 py-2" }) : null,
+                                      columnSpacers && columnSpacers.start > 0 ? /* @__PURE__ */ jsx51(
+                                        "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, columnIndex) => {
+                                        const total = summaryTotals.find((candidate) => candidate.id === columnId(column));
+                                        return /* @__PURE__ */ jsxs40(
                                           "td",
                                           {
-                                            "aria-hidden": "true",
-                                            "data-matrx-table-column-spacer": "end",
-                                            className: "border-0 p-0",
-                                            style: { width: `${columnSpacers.end}px`, minWidth: `${columnSpacers.end}px` }
+                                            className: cn(
+                                              "px-2 py-2 align-middle font-semibold",
+                                              (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: [
+                                              columnIndex === 0 ? /* @__PURE__ */ jsxs40("span", { "data-matrx-table-summary-total-label": true, className: "text-sm font-semibold text-foreground", children: [
+                                                summaryCaption,
+                                                readView.stale ? /* @__PURE__ */ jsx51("span", { className: "ml-1 text-xs text-amber-700 dark:text-amber-300", children: "Retained rows may be out of date." }) : null
+                                              ] }) : null,
+                                              columnIndex === 0 && total?.value != null ? /* @__PURE__ */ jsx51("span", { className: "ml-2", children: total.value }) : null,
+                                              columnIndex !== 0 ? total?.value : null,
+                                              total?.unavailable ? /* @__PURE__ */ jsx51(ErrorBox, { as: "span", className: "sr-only", message: `${columnId(column)} total is unavailable`, operation: "Total this column", origin: "design-system/MatrxDataTable" }) : null
+                                            ]
                                           },
-                                          "matrx-summary-column-spacer-end"
-                                        ) : null,
-                                        showActionsCol ? /* @__PURE__ */ jsx51("td", {}) : null
-                                      ] })
-                                    ] }) : null,
+                                          columnId(column)
+                                        );
+                                      }),
+                                      columnSpacers && columnSpacers.end > 0 ? /* @__PURE__ */ jsx51(
+                                        "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__ */ jsx51("td", {}) : null
+                                    ] }) }) : null,
                                     footerRows.map((row, index) => /* @__PURE__ */ jsxs40("tr", { children: [
                                       selection ? /* @__PURE__ */ jsx51("td", { className: "px-2 py-2" }) : null,
                                       columnSpacers && columnSpacers.start > 0 ? /* @__PURE__ */ jsx51(
@@ -52992,6 +53114,7 @@ function MatrxDataTableCore(coreProps) {
                           showAllOption: allRowsAreLoaded,
                           allValue: 0,
                           allOptionLabel: "All loaded",
+                          isFetching,
                           compact: true,
                           hideEntriesInfo: false
                         }
@@ -53346,7 +53469,7 @@ function HierarchyDragIndicatorLayer({
   scrollRef,
   resolve: resolve2
 }) {
-  const [indicator, setIndicator] = useState25(
+  const [indicator, setIndicator] = useState26(
     null
   );
   useDndMonitor2({
@@ -53562,7 +53685,7 @@ function columnWidthVar(width, resizedWidth, id, resizable) {
   };
 }
 function DefaultJsonCell({ value }) {
-  const [open, setOpen] = useState25(false);
+  const [open, setOpen] = useState26(false);
   const host = useMatrxDataTableHost();
   const Viewer = host.JsonViewer;
   const text = JSON.stringify(value, null, 2);
@@ -53645,7 +53768,7 @@ function resolveStringTitle(title, fallback) {
 }
 
 // src/data-table/SavedViewsControl.tsx
-import { useId as useId4, useState as useState26 } from "react";
+import { useId as useId4, useState as useState27 } from "react";
 
 // src/dropdown-menu.tsx
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
@@ -53782,7 +53905,7 @@ var DropdownMenuShortcut = ({
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 // src/data-table/SavedViewsControl.tsx
-import { jsx as jsx53, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx53, jsxs as jsxs42 } from "react/jsx-runtime";
 function SavedViewsControl({
   views,
   activeId = null,
@@ -53792,14 +53915,26 @@ function SavedViewsControl({
   onSelect,
   onSaveNew,
   onUpdate,
-  onReload
+  onReload,
+  presentation = "menu",
+  onRename,
+  related
 }) {
   const unsavedChangesId = useId4();
-  const [saveOpen, setSaveOpen] = useState26(false);
-  const [name, setName] = useState26("");
-  const [saving, setSaving] = useState26(false);
-  const [actionError, setActionError] = useState26(null);
+  const [saveOpen, setSaveOpen] = useState27(false);
+  const [name, setName] = useState27("");
+  const [saving, setSaving] = useState27(false);
+  const [actionError, setActionError] = useState27(null);
+  const [pendingSelect, setPendingSelect] = useState27(void 0);
   const visibleError = actionError ?? error;
+  const select = (id) => {
+    if (id === activeId) return;
+    if (dirty) {
+      setPendingSelect(id);
+      return;
+    }
+    onSelect(id);
+  };
   const save = async () => {
     const next = name.trim();
     if (!next) return;
@@ -53841,7 +53976,31 @@ function SavedViewsControl({
   };
   const activeName = activeId ? views.find((view) => view.id === activeId)?.name : void 0;
   return /* @__PURE__ */ jsxs42("div", { className: "flex min-w-0 flex-wrap items-center gap-1", "data-matrx-table-saved-views": true, children: [
-    /* @__PURE__ */ jsxs42(DropdownMenu, { children: [
+    presentation === "tabs" ? /* @__PURE__ */ jsxs42(Fragment13, { children: [
+      /* @__PURE__ */ jsx53(
+        TableViewTabs,
+        {
+          tabs: [{ id: "default", label: "Default view" }, ...views.map((view) => ({ id: view.id, label: view.name }))],
+          activeId: activeId ?? "default",
+          onSelect: (id) => select(id === "default" ? null : id),
+          onAdd: () => {
+            setActionError(null);
+            setSaveOpen(true);
+          },
+          onClose: () => {
+          },
+          onRename: (id, label) => {
+            if (onRename) void Promise.resolve(onRename(id, label)).catch((cause) => setActionError(cause instanceof Error ? cause.message : String(cause)));
+          },
+          closable: false,
+          renameable: Boolean(onRename),
+          addHint: "Save a named view to your account",
+          related
+        }
+      ),
+      dirty ? onUpdate ? /* @__PURE__ */ jsx53(Button, { type: "button", variant: "ghost", size: "sm", disabled: saving, onClick: () => void update(), className: "h-8 shrink-0 text-xs", children: "Save changes" }) : /* @__PURE__ */ jsx53(Button, { type: "button", variant: "ghost", size: "sm", disabled: saving, onClick: () => setSaveOpen(true), className: "h-8 shrink-0 text-xs", children: "Save as view" }) : null,
+      loading ? /* @__PURE__ */ jsx53("span", { role: "status", className: "text-xs text-muted-foreground", children: "Loading views\u2026" }) : null
+    ] }) : /* @__PURE__ */ jsxs42(DropdownMenu, { children: [
       /* @__PURE__ */ jsxs42(Tooltip, { children: [
         /* @__PURE__ */ jsx53(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx53(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs42(
           Button,
@@ -53864,7 +54023,7 @@ function SavedViewsControl({
       ] }),
       /* @__PURE__ */ jsxs42(DropdownMenuContent, { align: "end", children: [
         /* @__PURE__ */ jsx53(DropdownMenuLabel, { children: "Views" }),
-        /* @__PURE__ */ jsxs42(DropdownMenuRadioGroup, { value: activeId ?? "__default__", onValueChange: (value) => onSelect(value === "__default__" ? null : value), children: [
+        /* @__PURE__ */ jsxs42(DropdownMenuRadioGroup, { value: activeId ?? "__default__", onValueChange: (value) => select(value === "__default__" ? null : value), children: [
           /* @__PURE__ */ jsx53(DropdownMenuRadioItem, { value: "__default__", children: "Default view" }),
           views.map((view) => /* @__PURE__ */ jsx53(DropdownMenuRadioItem, { value: view.id, children: view.name }, view.id))
         ] }),
@@ -53877,7 +54036,10 @@ function SavedViewsControl({
         onReload ? /* @__PURE__ */ jsx53(DropdownMenuItem, { disabled: saving || loading, onSelect: () => void reload(), children: "Reload views" }) : null
       ] })
     ] }),
-    dirty ? /* @__PURE__ */ jsx53("span", { id: unsavedChangesId, className: "sr-only", children: "This table view has unsaved changes. Open the view menu to save or update it." }) : null,
+    dirty ? /* @__PURE__ */ jsxs42("span", { id: presentation === "menu" ? unsavedChangesId : void 0, role: presentation === "tabs" ? "status" : void 0, className: "sr-only", children: [
+      "This table view has unsaved changes. ",
+      presentation === "tabs" ? onUpdate ? "Use Save changes to update it." : "Use Save as view to keep it." : "Open the view menu to save or update it."
+    ] }) : null,
     visibleError && !saveOpen ? /* @__PURE__ */ jsx53(ErrorBox, { className: "basis-full break-words text-xs text-destructive", message: visibleError, operation: "Load or save a saved view", origin: "design-system/SavedViewsControl" }) : null,
     /* @__PURE__ */ jsx53(Dialog, { open: saveOpen, onOpenChange: setSaveOpen, children: /* @__PURE__ */ jsxs42(DialogContent, { children: [
       /* @__PURE__ */ jsx53(DialogHeader, { children: /* @__PURE__ */ jsx53(DialogTitle, { children: "Save current view" }) }),
@@ -53887,6 +54049,20 @@ function SavedViewsControl({
         /* @__PURE__ */ jsx53(Button, { type: "button", variant: "outline", onClick: () => setSaveOpen(false), children: "Cancel" }),
         /* @__PURE__ */ jsx53(Button, { type: "button", disabled: !name.trim() || saving, onClick: () => void save(), children: saving ? "Saving\u2026" : "Save view" })
       ] })
+    ] }) }),
+    /* @__PURE__ */ jsx53(Dialog, { open: pendingSelect !== void 0, onOpenChange: (open) => {
+      if (!open) setPendingSelect(void 0);
+    }, children: /* @__PURE__ */ jsxs42(DialogContent, { children: [
+      /* @__PURE__ */ jsx53(DialogHeader, { children: /* @__PURE__ */ jsx53(DialogTitle, { children: "Unsaved view changes" }) }),
+      /* @__PURE__ */ jsx53("p", { className: "text-sm text-muted-foreground", children: "Switching views will discard the changes you have not saved." }),
+      /* @__PURE__ */ jsxs42(DialogFooter, { children: [
+        /* @__PURE__ */ jsx53(Button, { type: "button", variant: "outline", onClick: () => setPendingSelect(void 0), children: "Stay on this view" }),
+        /* @__PURE__ */ jsx53(Button, { type: "button", onClick: () => {
+          const next = pendingSelect;
+          setPendingSelect(void 0);
+          if (next !== void 0) onSelect(next);
+        }, children: "Discard changes and switch" })
+      ] })
     ] }) })
   ] });
 }