@ai-matrx/design-system 0.48.1 → 0.48.5

package/dist/data-table/index.js

@@ -34006,11 +34006,11 @@ import {
   isValidElement as isValidElement2,
   memo,
   useCallback as useCallback8,
-  useEffect as useEffect17,
+  useEffect as useEffect18,
   useId as useId2,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo10,
-  useRef as useRef16,
+  useRef as useRef17,
   useState as useState24
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
@@ -34807,17 +34807,22 @@ function ConfirmDialog({
 
 // src/input.tsx
 import * as React7 from "react";
+
+// src/field-surface.ts
+var FIELD_SURFACE_CLASS = "border border-border bg-card";
+
+// src/input.tsx
 import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var getVariantStyles = (variant = "default") => {
-  const baseStyles = `flex h-10 w-full border border-border bg-background text-foreground shadow-input rounded-md px-3 py-2 text-sm file:border-0 file:bg-transparent
+  const baseStyles = `flex h-10 w-full ${FIELD_SURFACE_CLASS} text-foreground shadow-input rounded-md px-3 py-2 text-sm file:border-0 file:bg-transparent
     file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground
     focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-ring
     disabled:cursor-not-allowed disabled:opacity-50
     dark:shadow-none
     transition duration-400
-    [&:-webkit-autofill]:bg-background [&:-webkit-autofill]:shadow-[0_0_0_1000px_hsl(var(--background))_inset] [&:-webkit-autofill]:[caret-color:currentColor]
-    dark:[&:-webkit-autofill]:shadow-[0_0_0_1000px_hsl(var(--background))_inset] dark:[&:-webkit-autofill]:[-webkit-text-fill-color:hsl(var(--foreground))]
-    [&:-webkit-autofill:hover]:shadow-[0_0_0_1000px_hsl(var(--background))_inset] [&:-webkit-autofill:focus]:shadow-[0_0_0_1000px_hsl(var(--background))_inset]`;
+    [&:-webkit-autofill]:bg-card [&:-webkit-autofill]:shadow-[0_0_0_1000px_hsl(var(--card))_inset] [&:-webkit-autofill]:[caret-color:currentColor]
+    dark:[&:-webkit-autofill]:shadow-[0_0_0_1000px_hsl(var(--card))_inset] dark:[&:-webkit-autofill]:[-webkit-text-fill-color:hsl(var(--foreground))]
+    [&:-webkit-autofill:hover]:shadow-[0_0_0_1000px_hsl(var(--card))_inset] [&:-webkit-autofill:focus]:shadow-[0_0_0_1000px_hsl(var(--card))_inset]`;
   switch (variant) {
     case "destructive":
       return `${baseStyles} bg-destructive text-destructive-foreground`;
@@ -34882,7 +34887,7 @@ var BasicInput = React7.forwardRef(
       {
         type,
         className: cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          `flex h-9 w-full rounded-md ${FIELD_SURFACE_CLASS} px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50`,
           className
         ),
         ref,
@@ -34915,7 +34920,7 @@ import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var Select = SelectPrimitive.Root;
 var SelectValue = SelectPrimitive.Value;
 var selectTriggerVariants = cva2(
-  "flex w-full items-center justify-between gap-2 whitespace-nowrap rounded-md border border-border bg-card text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground transition-colors hover:bg-accent hover:border-accent-foreground/20 focus:outline-none focus:ring-1 focus:ring-primary/30 focus:border-primary/40 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:min-w-0 [&>span]:line-clamp-1",
+  `flex w-full items-center justify-between gap-2 whitespace-nowrap rounded-md ${FIELD_SURFACE_CLASS} text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground transition-colors hover:bg-accent hover:border-accent-foreground/20 focus:outline-none focus:ring-1 focus:ring-primary/30 focus:border-primary/40 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:min-w-0 [&>span]:line-clamp-1`,
   {
     variants: {
       size: {
@@ -36569,14 +36574,30 @@ function GenericTablePagination({
 }
 
 // src/data-table/TableViewTabs.tsx
-import { useState as useState8 } from "react";
+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 }) {
+function TableViewTabs({ tabs, activeId, onSelect, onAdd, onClose, onRename, related, editingId, onEditCancel, onEditDone }) {
   const [renaming, setRenaming] = useState8(null);
   const [draft, setDraft] = useState8("");
+  const opened = useRef6(null);
+  useEffect5(() => {
+    if (!editingId || opened.current === editingId) return;
+    const tab = tabs.find((t) => t.id === editingId);
+    if (!tab) return;
+    opened.current = editingId;
+    setDraft(tab.label);
+    setRenaming(editingId);
+  }, [editingId, tabs]);
   const commit = () => {
     if (renaming && draft.trim()) onRename(renaming, draft.trim());
     setRenaming(null);
+    onEditDone?.();
+  };
+  const cancel = () => {
+    const id = renaming;
+    setRenaming(null);
+    if (id) onEditCancel?.(id);
+    onEditDone?.();
   };
   return /* @__PURE__ */ jsxs16("div", { className: "flex min-w-0 shrink-0 items-center border-b", "data-matrx-table-tabs": true, children: [
     /* @__PURE__ */ jsxs16("div", { role: "tablist", "aria-label": "Table views", className: "flex min-w-0 flex-1 items-center overflow-x-auto", children: [
@@ -36589,9 +36610,11 @@ function TableViewTabs({ tabs, activeId, onSelect, onAdd, onClose, onRename, rel
             value: draft,
             onChange: (e) => setDraft(e.target.value),
             onBlur: commit,
+            onFocus: (e) => e.currentTarget.select(),
+            placeholder: "Name this view",
             onKeyDown: (e) => {
               if (e.key === "Enter") commit();
-              if (e.key === "Escape") setRenaming(null);
+              if (e.key === "Escape") cancel();
             },
             className: "h-8 w-32 bg-transparent px-2 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
           }
@@ -36623,7 +36646,7 @@ function TableViewTabs({ tabs, activeId, onSelect, onAdd, onClose, onRename, rel
             ]
           }
         ),
-        tabs.length > 1 && /* @__PURE__ */ jsxs16(Tooltip, { children: [
+        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 ",
@@ -36633,21 +36656,33 @@ 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 tab from current view \xB7 double-click a tab to rename" })
+        /* @__PURE__ */ jsx24(TooltipContent, { children: "New view from the current one \xB7 double-click a tab to rename" })
       ] })
     ] }),
     related && /* @__PURE__ */ jsx24("div", { className: "flex shrink-0 items-center gap-1 border-l px-2", children: related })
   ] });
 }
-function TableViewWorkspace({ snapshot, onApply, related }) {
-  const [tabs, setTabs] = useState8([{ id: "default", label: "Default view", snapshot }]);
+var same = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+function TableViewWorkspace({ snapshot, onApply, related, store }) {
+  const [localViews, setLocalViews] = useState8([]);
+  const [defaultSnapshot, setDefaultSnapshot] = useState8(snapshot);
   const [activeId, setActiveId] = useState8("default");
+  const [namingId, setNamingId] = useState8(null);
+  const saved = store ? store.views : localViews;
+  const write = (next) => store ? store.onChange(next) : setLocalViews(next);
+  const tabs = [{ id: "default", label: "Default view", snapshot: defaultSnapshot }, ...saved];
+  const stashed = () => saved.map((tab) => tab.id === activeId && !same(tab.snapshot, snapshot) ? { ...tab, snapshot } : tab);
+  const activeSaved = saved.find((tab) => tab.id === activeId);
+  useEffect5(() => {
+    if (store && activeSaved && !same(activeSaved.snapshot, snapshot)) write(stashed());
+  }, [snapshot]);
   const select = (id) => {
     if (id === activeId) return;
     const target = tabs.find((tab) => tab.id === id);
     if (!target) return;
-    if (JSON.stringify(target.snapshot) !== JSON.stringify(snapshot)) onApply(target.snapshot);
-    setTabs((current) => current.map((tab) => tab.id === activeId ? { ...tab, snapshot } : tab));
+    if (!same(target.snapshot, snapshot)) onApply(target.snapshot);
+    if (activeId === "default") setDefaultSnapshot(snapshot);
+    else write(stashed());
     setActiveId(id);
   };
   return /* @__PURE__ */ jsx24(
@@ -36657,17 +36692,31 @@ function TableViewWorkspace({ snapshot, onApply, related }) {
       activeId,
       onSelect: select,
       related,
+      editingId: namingId,
+      onEditDone: () => setNamingId(null),
+      onEditCancel: (id) => {
+        if (id !== namingId) return;
+        write(saved.filter((tab) => tab.id !== id));
+        if (activeId === id) setActiveId("default");
+      },
       onAdd: () => {
         const id = crypto.randomUUID();
-        setTabs((current) => [...current.map((tab) => tab.id === activeId ? { ...tab, snapshot } : tab), { id, label: `View ${current.length + 1}`, snapshot }]);
+        if (activeId === "default") setDefaultSnapshot(snapshot);
+        write([...stashed(), { id, label: `View ${saved.length + 2}`, snapshot }]);
         setActiveId(id);
+        setNamingId(id);
       },
       onClose: (id) => {
         if (tabs.length < 2) return;
-        if (id === activeId) select(tabs.find((tab) => tab.id !== id).id);
-        setTabs((current) => current.filter((tab) => tab.id !== id));
+        const rest = saved.filter((tab) => tab.id !== id);
+        if (id === activeId) {
+          const next = tabs.find((tab) => tab.id !== id);
+          if (!same(next.snapshot, snapshot)) onApply(next.snapshot);
+          setActiveId(next.id);
+        }
+        write(rest);
       },
-      onRename: (id, label) => setTabs((current) => current.map((tab) => tab.id === id ? { ...tab, label } : tab))
+      onRename: (id, label) => write(saved.map((tab) => tab.id === id ? { ...tab, label } : tab))
     }
   );
 }
@@ -39960,9 +40009,9 @@ function useCopySubsetVariant() {
 }
 
 // src/data-table/clipping.ts
-import { useEffect as useEffect7 } from "react";
+import { useEffect as useEffect8 } from "react";
 function useClippedContentGuard(ref, options) {
-  useEffect7(() => {
+  useEffect8(() => {
     if (!options.enabled || !ref.current) return;
     const node = ref.current;
     const check = () => {
@@ -39976,7 +40025,7 @@ function useClippedContentGuard(ref, options) {
 }
 
 // src/data-table/url-state.ts
-import { useCallback as useCallback4, useEffect as useEffect8, useMemo as useMemo6, useRef as useRef9, useState as useState13 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect9, useMemo as useMemo6, useRef as useRef10, useState as useState13 } from "react";
 import {
   commitUrlParams,
   useUrlSearchParams
@@ -40056,9 +40105,9 @@ function useTableUrlState(options) {
     [defaultPageSize, defaultSortDirection, defaultSortId, key]
   );
   const state = readState(searchParams);
-  const lastTextWriteAt = useRef9(0);
+  const lastTextWriteAt = useRef10(0);
   const [debouncedSearch, setDebouncedSearch] = useState13(state.search);
-  useEffect8(() => {
+  useEffect9(() => {
     if (state.search === debouncedSearch) return;
     const timer = window.setTimeout(
       () => setDebouncedSearch(state.search),
@@ -40166,14 +40215,14 @@ import {
 } from "@ai-matrx/kit/url-state";
 
 // src/data-table/RowAlchemyLauncher.tsx
-import { useCallback as useCallback5, useEffect as useEffect9, useRef as useRef10, useState as useState14 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect10, useRef as useRef11, useState as useState14 } from "react";
 import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
 function MatrxTableRowAlchemyProvider({ copy, placement, controls, children }) {
-  const controller = useRef10(null);
+  const controller = useRef11(null);
   const { CopyControls } = useMatrxDataTableHost();
   const [active, setActive] = useState14(false);
   const [fallback, setFallback] = useState14(false);
-  useEffect9(() => {
+  useEffect10(() => {
     if (placement !== "menu" || active) return;
     const timer = window.setTimeout(() => {
       if (!active) {
@@ -40210,9 +40259,9 @@ function MatrxTableRowAlchemyProvider({ copy, placement, controls, children }) {
 // src/data-table/ColumnHeaderCell.tsx
 import {
   forwardRef as forwardRef14,
-  useEffect as useEffect10,
+  useEffect as useEffect11,
   useMemo as useMemo7,
-  useRef as useRef11,
+  useRef as useRef12,
   useState as useState15
 } from "react";
 import { useDraggable } from "@dnd-kit/core";
@@ -40599,15 +40648,15 @@ function ColumnHeaderCell({
   const [filterOpen, setFilterOpen] = useState15(false);
   const [pendingNegation, setPendingNegation] = useState15(false);
   const [draftFilter, setDraftFilter] = useState15(filterValue);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!filterOpen) {
       setDraftFilter(filterValue);
       setPendingNegation(filterValue?.negated ?? false);
     }
   }, [filterOpen, filterValue]);
-  const notifyOpen = useRef11(onFilterOpen);
+  const notifyOpen = useRef12(onFilterOpen);
   notifyOpen.current = onFilterOpen;
-  useEffect10(() => {
+  useEffect11(() => {
     if (filterOpen) notifyOpen.current?.();
   }, [filterOpen]);
   const applyFilter = () => {
@@ -41525,8 +41574,8 @@ function parseOptionalNumber(raw) {
 // src/data-table/ColumnResizeHandle.tsx
 import {
   useCallback as useCallback6,
-  useEffect as useEffect11,
-  useRef as useRef12,
+  useEffect as useEffect12,
+  useRef as useRef13,
   useState as useState16
 } from "react";
 
@@ -41570,11 +41619,11 @@ function ColumnResizeHandle({
   onResizeCancel,
   onResizeCommit
 }) {
-  const handleRef = useRef12(null);
-  const activeResizeRef = useRef12(null);
-  const previewRafRef = useRef12(null);
-  const queuedWidthRef = useRef12(null);
-  const keyboardWidthRef = useRef12(null);
+  const handleRef = useRef13(null);
+  const activeResizeRef = useRef13(null);
+  const previewRafRef = useRef13(null);
+  const queuedWidthRef = useRef13(null);
+  const keyboardWidthRef = useRef13(null);
   const [announcedWidth, setAnnouncedWidth] = useState16(null);
   const bounds = resolveColumnResizeBounds(minWidth, maxWidth);
   const cssVar = columnResizeCssVar(columnId2);
@@ -41622,7 +41671,7 @@ function ColumnResizeHandle({
       handleRef.current.releasePointerCapture(active.pointerId);
     }
   }, [clearQueuedPreview, columnId2, cssVar, onResizeCancel, onResizeCommit, tableRef, writePreview]);
-  useEffect11(() => () => clearQueuedPreview(), [clearQueuedPreview]);
+  useEffect12(() => () => clearQueuedPreview(), [clearQueuedPreview]);
   const onPointerDown = (event) => {
     if (disabled || event.button !== 0 || !event.isPrimary) return;
     event.preventDefault();
@@ -42163,7 +42212,7 @@ function scrollOffsetForIndex(input) {
 }
 
 // src/data-table/useSpreadsheetGrid.ts
-import { useCallback as useCallback7, useEffect as useEffect12, useMemo as useMemo8, useRef as useRef13, useState as useState17 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect13, useMemo as useMemo8, useRef as useRef14, useState as useState17 } from "react";
 
 // src/data-table/grid-selection.ts
 function rangeBounds(range, rowIds, fieldNames) {
@@ -42890,17 +42939,17 @@ function useSpreadsheetGrid(options) {
   const [range, setRange] = useState17(null);
   const [fillTarget, setFillTarget] = useState17(null);
   const [stack, setStack] = useState17(() => createUndoStack(options?.undoDepth ?? 100));
-  const draggingRef = useRef13(null);
-  const catcherRef = useRef13(null);
-  const composingRef = useRef13(false);
-  const optionsRef = useRef13(options);
+  const draggingRef = useRef14(null);
+  const catcherRef = useRef14(null);
+  const composingRef = useRef14(false);
+  const optionsRef = useRef14(options);
   optionsRef.current = options;
   const rowIds = options?.rowIds ?? [];
   const columnIds = useMemo8(
     () => options ? options.columnIds.filter((id) => id !== "") : [],
     [options]
   );
-  useEffect12(() => {
+  useEffect13(() => {
     if (!range) return;
     const rowSet = new Set(rowIds);
     const colSet = new Set(columnIds);
@@ -43066,11 +43115,11 @@ function useSpreadsheetGrid(options) {
     },
     [rowIds, columnIds]
   );
-  const rowIdsRef = useRef13(rowIds);
+  const rowIdsRef = useRef14(rowIds);
   rowIdsRef.current = rowIds;
-  const columnIdsRef = useRef13(columnIds);
+  const columnIdsRef = useRef14(columnIds);
   columnIdsRef.current = columnIds;
-  const rangeRef = useRef13(range);
+  const rangeRef = useRef14(range);
   rangeRef.current = range;
   const focusGrid = useCallback7(() => {
     const catcher = catcherRef.current;
@@ -43423,11 +43472,11 @@ function useSpreadsheetGrid(options) {
     },
     []
   );
-  const fillTargetRef = useRef13(null);
+  const fillTargetRef = useRef14(null);
   fillTargetRef.current = fillTarget;
-  const boundsRef = useRef13(null);
+  const boundsRef = useRef14(null);
   boundsRef.current = bounds;
-  useEffect12(() => {
+  useEffect13(() => {
     if (!options) return;
     const commit = () => {
       const wasDragging = draggingRef.current;
@@ -43986,7 +44035,7 @@ function rankTableSearchRows(rows, columns, query, options = {}, extraText) {
 }
 
 // src/data-table/ColumnManager.tsx
-import { useEffect as useEffect13, useMemo as useMemo9, useState as useState19 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo9, useState as useState19 } from "react";
 import { useDndMonitor, useDraggable as useDraggable2, useDroppable } from "@dnd-kit/core";
 import { jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
 function ColumnManager({
@@ -44005,7 +44054,7 @@ function ColumnManager({
   const [draftHidden, setDraftHidden] = useState19(() => new Set(hidden));
   const [draggedColumnId, setDraggedColumnId] = useState19(null);
   const [dropTarget, setDropTarget] = useState19(null);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!open) return;
     setDraftOrder(order);
     setDraftHidden(new Set(hidden));
@@ -44548,8 +44597,8 @@ function parseTableViewSnapshot(raw) {
 
 // src/data-table/MatrxUuidCell.tsx
 import {
-  useEffect as useEffect14,
-  useRef as useRef14,
+  useEffect as useEffect15,
+  useRef as useRef15,
   useState as useState20
 } from "react";
 import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
@@ -44594,8 +44643,8 @@ function MatrxUuidCell({
   const [copied, setCopied] = useState20(false);
   const [opening, setOpening] = useState20(false);
   const [peekOpen, setPeekOpen] = useState20(false);
-  const timer = useRef14(null);
-  useEffect14(
+  const timer = useRef15(null);
+  useEffect15(
     () => () => {
       if (timer.current) clearTimeout(timer.current);
     },
@@ -44890,7 +44939,7 @@ function DataRowInspector({
 }
 
 // src/data-table/DataRowWindow.tsx
-import { useEffect as useEffect15, useState as useState21 } from "react";
+import { useEffect as useEffect16, useState as useState21 } from "react";
 import { jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
 function DataRowWindow({
   isOpen,
@@ -44912,7 +44961,7 @@ function DataRowWindow({
   const hasTabs = hasEdit && children == null;
   const initialTab = defaultTab ?? (hasEdit ? "edit" : "view");
   const [tab, setTab] = useState21(initialTab);
-  useEffect15(() => {
+  useEffect16(() => {
     if (!isOpen) return;
     setTab(defaultTab ?? (hasEdit ? "edit" : "view"));
   }, [isOpen, windowId, hasEdit, defaultTab]);
@@ -46126,7 +46175,7 @@ function DirtySavePill({
 }
 
 // src/data-table/EditableTableCell.tsx
-import { useEffect as useEffect16, useRef as useRef15, useState as useState22 } from "react";
+import { useEffect as useEffect17, useRef as useRef16, useState as useState22 } from "react";
 import { jsx as jsx45, jsxs as jsxs34 } from "react/jsx-runtime";
 function CellRefusal({ reason }) {
   return /* @__PURE__ */ jsx45(
@@ -46190,10 +46239,10 @@ function EditableTableCell({
 }) {
   const [open, setOpen] = useState22(false);
   const [refusal, setRefusal] = useState22(null);
-  useEffect16(() => {
+  useEffect17(() => {
     if (editRequest !== void 0) setOpen(true);
   }, [editRequest]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!open) setRefusal(null);
   }, [open]);
   const usePencil = Boolean(href) || editTrigger === "pencil";
@@ -46300,10 +46349,10 @@ function InlineStringEditor({
   const [editing, setEditing] = useState22(false);
   const [draft, setDraft] = useState22(value);
   const [refusal, setRefusal] = useState22(null);
-  const handledEditRequest = useRef15(void 0);
-  const seedRef = useRef15(editSeed);
+  const handledEditRequest = useRef16(void 0);
+  const seedRef = useRef16(editSeed);
   seedRef.current = editSeed;
-  useEffect16(() => {
+  useEffect17(() => {
     if (editRequest === void 0 || handledEditRequest.current === editRequest) return;
     handledEditRequest.current = editRequest;
     setDraft(seedRef.current ?? value);
@@ -46464,7 +46513,7 @@ function DateEditor({
   onCancel
 }) {
   const [draft, setDraft] = useState22(value);
-  const done = useRef15(false);
+  const done = useRef16(false);
   const finish = () => {
     if (done.current) return;
     done.current = true;
@@ -47339,7 +47388,7 @@ function MatrxDataTableWithUrlState({
     ...urlState.history === void 0 ? {} : { history: urlState.history },
     ...urlState.textHistory === void 0 ? {} : { textHistory: urlState.textHistory }
   });
-  useEffect17(() => {
+  useEffect18(() => {
     if (activeUrlTableIds.has(urlState.id)) {
       throw new Error(
         `Duplicate MatrxDataTable urlState.id "${urlState.id}" on one page. Give every table a unique stable id.`
@@ -47448,7 +47497,7 @@ var DND_MEASURING = { droppable: { strategy: MeasuringStrategy.Always } };
 var NO_LAYERED_FILTERS = [];
 var NO_GROUPING_VALUE = "__matrx_no_grouping__";
 function useRenderEpoch(values) {
-  const held = useRef16(null);
+  const held = useRef17(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;
@@ -47524,6 +47573,7 @@ function MatrxDataTableCore(coreProps) {
     tableId,
     defaultViewSnapshot,
     viewTabs = true,
+    viewTabsStore,
     relatedTableActions,
     columnState,
     reorderableColumns = true,
@@ -47587,7 +47637,7 @@ function MatrxDataTableCore(coreProps) {
   } = coreProps;
   const appendQuery = query?.mode === "controlled-append" ? query : null;
   const appendQueryKey = appendQuery?.pagination.queryKey ?? null;
-  const committedAppendQueryKey = useRef16(appendQueryKey);
+  const committedAppendQueryKey = useRef17(appendQueryKey);
   const appendSourceChanged = appendQuery !== null && committedAppendQueryKey.current !== appendQueryKey;
   const data = (appendQuery ? appendQuery.pagination.rows : suppliedData) ?? [];
   const readView = tableReadView(read, data.length, appendQuery ? appendQuery.pagination.loading : suppliedLoading);
@@ -47606,7 +47656,7 @@ function MatrxDataTableCore(coreProps) {
   const [savedViewError, setSavedViewError] = useState24(null);
   const [toolbarActionError, setToolbarActionError] = useState24(null);
   const [toolbarActionPending, setToolbarActionPending] = useState24({ refresh: false, add: false });
-  const toolbarActionPendingRef = useRef16({ refresh: false, add: false });
+  const toolbarActionPendingRef = useRef17({ 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";
@@ -47754,9 +47804,9 @@ function MatrxDataTableCore(coreProps) {
   const [windowRowSnapshot, setWindowRowSnapshot] = useState24(null);
   const editScopeKey = appendQueryKey === null ? "\0local" : `append:${appendQueryKey}`;
   const [editsByScope, setEditsByScope] = useState24({});
-  const editRevisionRef = useRef16({});
+  const editRevisionRef = useRef17({});
   const [savingByScope, setSavingByScope] = useState24({});
-  const savingScopesRef = useRef16(/* @__PURE__ */ new Set());
+  const savingScopesRef = useRef17(/* @__PURE__ */ new Set());
   const [editRequest, setEditRequest] = useState24(null);
   const [confirmForeignDraftDiscard, setConfirmForeignDraftDiscard] = useState24(false);
   const edits = editsByScope[editScopeKey]?.values ?? {};
@@ -47825,7 +47875,7 @@ function MatrxDataTableCore(coreProps) {
     rows: Object.entries(draft.values).map(([rowId, columns2]) => ({ rowId, columns: columns2 }))
   }));
   const selection = appendSourceChanged && selectionConfig ? { ...selectionConfig, selectedIds: [] } : selectionConfig;
-  useEffect17(() => {
+  useEffect18(() => {
     const previous = committedAppendQueryKey.current;
     committedAppendQueryKey.current = appendQueryKey;
     if (previous === null || appendQueryKey === null || previous === appendQueryKey) {
@@ -47843,13 +47893,13 @@ function MatrxDataTableCore(coreProps) {
     onWindowRowIdChange,
     selectionConfig
   ]);
-  const scrollRef = useRef16(null);
-  const tableRef = useRef16(null);
-  const tableHeaderRef = useRef16(null);
-  const cardsScrollRef = useRef16(null);
+  const scrollRef = useRef17(null);
+  const tableRef = useRef17(null);
+  const tableHeaderRef = useRef17(null);
+  const cardsScrollRef = useRef17(null);
   const [documentStickyHeader, setDocumentStickyHeader] = useState24(false);
-  const documentStickyHeaderRef = useRef16(false);
-  const previousAppendKeyForScrollReset = useRef16(appendQueryKey);
+  const documentStickyHeaderRef = useRef17(false);
+  const previousAppendKeyForScrollReset = useRef17(appendQueryKey);
   useLayoutEffect3(() => {
     const previous = previousAppendKeyForScrollReset.current;
     previousAppendKeyForScrollReset.current = appendQueryKey;
@@ -47875,7 +47925,7 @@ 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 = useRef16(null);
+  const rootRef = useRef17(null);
   useClippedContentGuard(rootRef, {
     label: typeof copy === "object" && copy.listLabel ? `Table: ${copy.listLabel}` : "MatrxDataTable"
   });
@@ -47895,7 +47945,7 @@ function MatrxDataTableCore(coreProps) {
       behavior: "smooth"
     });
   };
-  useEffect17(() => {
+  useEffect18(() => {
     updateScrollHint();
     window.addEventListener("resize", updateScrollHint);
     const el = scrollRef.current;
@@ -47977,18 +48027,18 @@ function MatrxDataTableCore(coreProps) {
     () => normalizeColumnWidthsForColumns(columnState?.widths, columns)
   );
   const [fixedTableGeometry, setFixedTableGeometry] = useState24(null);
-  const knownColumnIds = useRef16(new Set(columns.map(columnId)));
-  const draggedColumnId = useRef16(null);
-  const columnDragActive = useRef16(false);
-  const columnDragRaf = useRef16(null);
-  const columnDragScrollDirection = useRef16(0);
+  const knownColumnIds = useRef17(new Set(columns.map(columnId)));
+  const draggedColumnId = useRef17(null);
+  const columnDragActive = useRef17(false);
+  const columnDragRaf = useRef17(null);
+  const columnDragScrollDirection = useRef17(0);
   const [columnDragPreview, setColumnDragPreview] = useState24(null);
   const stopColumnDragScroll = useCallback8(() => {
     if (columnDragRaf.current !== null) cancelAnimationFrame(columnDragRaf.current);
     columnDragRaf.current = null;
     columnDragScrollDirection.current = 0;
   }, []);
-  useEffect17(() => () => {
+  useEffect18(() => () => {
     columnDragActive.current = false;
     stopColumnDragScroll();
   }, [stopColumnDragScroll]);
@@ -48036,7 +48086,7 @@ function MatrxDataTableCore(coreProps) {
     () => normalizeColumnWidthsForColumns(columnState?.widths ?? columnWidths, columns),
     [columns, columnState?.widths, columnWidths]
   );
-  const resizeGestureSnapshotRef = useRef16(null);
+  const resizeGestureSnapshotRef = useRef17(null);
   const measureVisibleColumnWidths = useCallback8(() => {
     const measured = {};
     const headers = tableRef.current ? Array.from(tableRef.current.querySelectorAll(
@@ -48114,7 +48164,7 @@ function MatrxDataTableCore(coreProps) {
     }
     setColumnWidths(normalized);
   }, [columnIds, columnState, columns, measureFixedTableGeometry, measureVisibleColumnWidths]);
-  useEffect17(() => {
+  useEffect18(() => {
     const ids = columns.map(columnId);
     if (columnState) return;
     const previousIds = knownColumnIds.current;
@@ -48248,7 +48298,7 @@ function MatrxDataTableCore(coreProps) {
   const effectiveCopy = copy === false ? void 0 : copy ?? defaultCopy;
   const effectiveCopyColumns = copy === void 0 ? declaredVisibleCopyColumns : visibleColumns;
   const copySubsetVariant2 = useCopySubsetVariant();
-  const chromeLatest = useRef16({
+  const chromeLatest = useRef17({
     processed: [],
     data: [],
     toggleAllOnPage: () => void 0,
@@ -48353,8 +48403,8 @@ function MatrxDataTableCore(coreProps) {
     intelligentSearchEnabled,
     searchScope
   ]);
-  const lastNotifiedViewRows = useRef16(null);
-  useEffect17(() => {
+  const lastNotifiedViewRows = useRef17(null);
+  useEffect18(() => {
     if (!onViewChange) {
       lastNotifiedViewRows.current = null;
       return;
@@ -48363,7 +48413,7 @@ function MatrxDataTableCore(coreProps) {
     lastNotifiedViewRows.current = processed;
     if (changed) onViewChange(processed);
   }, [processed, onViewChange]);
-  useEffect17(() => {
+  useEffect18(() => {
     if (controlledQuery) return;
     setInternalPage(1);
   }, [
@@ -48473,7 +48523,7 @@ function MatrxDataTableCore(coreProps) {
   const columnVirtualizeActive = virtualizeConfig !== null && virtualizeConfig.enabled !== false && virtualizeConfig.columns === true && visibleColumns.length - frozenRunLength > 30 && !hierarchy && mobileCards === void 0;
   const [rowWindow, setRowWindow] = useState24(null);
   const [columnWindow, setColumnWindow] = useState24(null);
-  const windowInputs = useRef16({
+  const windowInputs = useRef17({
     virtualizeActive: false,
     bodyEntryCount: 0,
     virtualRowHeight: 40,
@@ -48545,7 +48595,7 @@ function MatrxDataTableCore(coreProps) {
     frozenRunLength
   ]);
   const metricsWanted = virtualizeActive || columnVirtualizeActive;
-  useEffect17(() => {
+  useEffect18(() => {
     recomputeWindows();
   }, [
     recomputeWindows,
@@ -48557,7 +48607,7 @@ function MatrxDataTableCore(coreProps) {
     columnWindowWidth,
     frozenRunLength
   ]);
-  useEffect17(() => {
+  useEffect18(() => {
     if (!metricsWanted) return;
     const el = scrollRef.current;
     if (!el) return;
@@ -48623,7 +48673,7 @@ function MatrxDataTableCore(coreProps) {
       windowed.push({ kind: "spacer", height: effectiveRowWindow.padEnd, place: "end" });
     return windowed;
   }, [groupedRenderRows, collapsedGroups, paginated, effectiveRowWindow]);
-  const getRowIdRef = useRef16(getRowId);
+  const getRowIdRef = useRef17(getRowId);
   getRowIdRef.current = getRowId;
   const spreadsheetRowIds = useMemo10(
     () => paginated.map((row) => getRowIdRef.current(row)),
@@ -48644,7 +48694,7 @@ function MatrxDataTableCore(coreProps) {
     return map;
   }, [visibleColumns]);
   const spreadsheetEnabled = Boolean(spreadsheet && spreadsheet.enabled !== false);
-  const openRowRef = useRef16(() => void 0);
+  const openRowRef = useRef17(() => void 0);
   const sheet = useSpreadsheetGrid(
     spreadsheetEnabled && spreadsheet ? {
       rowIds: spreadsheetRowIds,
@@ -48685,12 +48735,12 @@ function MatrxDataTableCore(coreProps) {
     } : null
   );
   if (spreadsheet?.controllerRef) spreadsheet.controllerRef.current = spreadsheetEnabled ? sheet.controller : null;
-  const sheetRef = useRef16(sheet);
+  const sheetRef = useRef17(sheet);
   sheetRef.current = sheet;
-  const onSheetSelectionRef = useRef16(spreadsheet?.onSelectionChange);
+  const onSheetSelectionRef = useRef17(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}` : ""}` : "";
-  useEffect17(() => {
+  useEffect18(() => {
     const tell = onSheetSelectionRef.current;
     if (!tell) return;
     const current = sheetRef.current;
@@ -48707,7 +48757,7 @@ function MatrxDataTableCore(coreProps) {
       tsv: current.selectionTsv()
     });
   }, [sheetSelectionKey]);
-  const searchValueRef = useRef16(searchValue);
+  const searchValueRef = useRef17(searchValue);
   searchValueRef.current = searchValue;
   const facetsEnabled = Boolean(facets && facets.enabled !== false);
   const [facetState, setFacetState] = useState24({});
@@ -48719,9 +48769,9 @@ function MatrxDataTableCore(coreProps) {
     },
     [facets, visibleColumns]
   );
-  const facetInputsRef = useRef16({ data, facets, facetReadCell });
+  const facetInputsRef = useRef17({ data, facets, facetReadCell });
   facetInputsRef.current = { data, facets, facetReadCell };
-  const facetRequestRef = useRef16(/* @__PURE__ */ new Map());
+  const facetRequestRef = useRef17(/* @__PURE__ */ new Map());
   const requestFacets = useCallback8((colId) => {
     const { data: rows, facets: config, facetReadCell: readCell } = facetInputsRef.current;
     if (!config || config.enabled === false) return;
@@ -48781,12 +48831,12 @@ function MatrxDataTableCore(coreProps) {
       }));
     });
   }, []);
-  useEffect17(() => {
+  useEffect18(() => {
     if (!facetsEnabled) return;
     setFacetState({});
     facetRequestRef.current = /* @__PURE__ */ new Map();
   }, [facetsEnabled, data, searchValue]);
-  useEffect17(() => {
+  useEffect18(() => {
     if (!controlledQuery || controlledQuery.state.page === safePage) return;
     emitControlledQueryChange({ page: safePage });
   }, [controlledQuery, emitControlledQueryChange, safePage]);
@@ -49042,7 +49092,7 @@ function MatrxDataTableCore(coreProps) {
     }));
     return true;
   };
-  const requestCellEditRef = useRef16(requestCellEdit);
+  const requestCellEditRef = useRef17(requestCellEdit);
   requestCellEditRef.current = requestCellEdit;
   const buildRecordControls = (row) => {
     const rowId = getRowId(row);
@@ -49388,16 +49438,16 @@ function MatrxDataTableCore(coreProps) {
       return [];
     }
   };
-  const menuSectionsForRef = useRef16(menuSectionsFor);
+  const menuSectionsForRef = useRef17(menuSectionsFor);
   menuSectionsForRef.current = menuSectionsFor;
   const hasMenuSections = Boolean(contextMenu?.sections);
   const boundarySections = useCallback8(
     (target) => menuSectionsForRef.current(target),
     []
   );
-  const resolveMenuLevelRef = useRef16(resolveMenuLevel);
+  const resolveMenuLevelRef = useRef17(resolveMenuLevel);
   resolveMenuLevelRef.current = resolveMenuLevel;
-  useEffect17(() => {
+  useEffect18(() => {
     if (!host.rowContextRegistry) return;
     return host.rowContextRegistry.register(
       tableContextMenuInstanceId,
@@ -49427,7 +49477,7 @@ function MatrxDataTableCore(coreProps) {
       return true;
     });
   }, [data, getSelectionId, selectedIdSet]);
-  const lastToggledIndex = useRef16(null);
+  const lastToggledIndex = useRef17(null);
   const setSelectedIds = (next) => selection?.onSelectedIdsChange([...next]);
   const toggleRowSelected = (index, shiftKey) => {
     if (!selection) return;
@@ -49468,7 +49518,7 @@ function MatrxDataTableCore(coreProps) {
       }
     } : facet
   ) : toolbar?.facets;
-  const rowLatest = useRef16(null);
+  const rowLatest = useRef17(null);
   const renderRecordCell = (row, col, index) => {
     const id = getRowId(row);
     const field = col.accessorKey ? String(col.accessorKey) : columnId(col);
@@ -50074,7 +50124,16 @@ function MatrxDataTableCore(coreProps) {
             "td",
             {
               "data-matrx-table-row-action-cell": true,
-              className: "text-right align-middle",
+              className: cn(
+                "text-right align-middle",
+                // PINNED RIGHT from sm: up (page-pass 2026-09-27): a table wider than its
+                // container scrolled the row's own actions off the right edge at 1280px.
+                // The row's opaque frozen background keeps scrolled cells from showing
+                // through; the hairline says the column floats.
+                "sm:sticky sm:right-0 sm:z-20 sm:shadow-[inset_1px_0_0_var(--color-border)]",
+                frozenRowBackgroundClass,
+                canHoverFrozenCell && "sm:group-hover/matrx-row:bg-[color-mix(in_oklab,var(--color-muted)_50%,var(--color-card))]"
+              ),
               style: fixedUtilityWidth(fixedTableGeometry?.actionsWidth),
               children: /* @__PURE__ */ jsxs37(
                 "div",
@@ -50270,7 +50329,7 @@ function MatrxDataTableCore(coreProps) {
                     TableTitleRow,
                     {
                       ...toolbar?.singleRow ? { singleRow: true } : {},
-                      tabs: viewTabs ? /* @__PURE__ */ jsx48(TableViewWorkspace, { snapshot: currentViewSnapshot, onApply: applyLatestSavedView, related: relatedTableActions }, tableId ?? "table") : void 0,
+                      tabs: viewTabs ? /* @__PURE__ */ jsx48(TableViewWorkspace, { snapshot: currentViewSnapshot, onApply: applyLatestSavedView, related: relatedTableActions, ...viewTabsStore ? { store: viewTabsStore } : {} }, tableId ?? "table") : void 0,
                       ...toolbar?.title === void 0 ? {} : { title: toolbar.title },
                       ...toolbar?.titleCount === void 0 ? {} : { count: toolbar.titleCount },
                       context: tableId && SavedViews ? /* @__PURE__ */ jsx48("span", { "data-matrx-table-view-control": true, children: /* @__PURE__ */ jsx48(
@@ -50430,17 +50489,16 @@ function MatrxDataTableCore(coreProps) {
                                 /* @__PURE__ */ jsx48(TooltipContent, { className: "max-w-xs", children: coverageResult.notice })
                               ] }) : null,
                               renderToolbarControls(/* @__PURE__ */ jsxs37(Fragment10, { children: [
-                                /* @__PURE__ */ jsx48(
+                                hasActiveFilters ? /* @__PURE__ */ jsx48(
                                   TableToolbarAction,
                                   {
                                     HostAction: host.ToolbarAction,
                                     ariaLabel: "Clear all filters",
-                                    tooltip: hasActiveFilters ? "Clear search and filters; keep columns and sort" : "No search or filters to clear",
-                                    disabled: !hasActiveFilters,
+                                    tooltip: "Clear search and filters; keep columns and sort",
                                     onClick: clearAllFilters,
                                     children: /* @__PURE__ */ jsx48(Eraser, {})
                                   }
-                                ),
+                                ) : null,
                                 showToolbarCopy && effectiveCopy ? /* @__PURE__ */ jsx48(ToolbarListedLabel, { label: "Copy or export", children: /* @__PURE__ */ jsx48(
                                   CopyButtons,
                                   {
@@ -50515,7 +50573,7 @@ function MatrxDataTableCore(coreProps) {
                                     ]
                                   }
                                 ) : null,
-                                columns.length > 0 ? /* @__PURE__ */ jsx48(
+                                columns.length > 0 && toolbar?.columns !== false ? /* @__PURE__ */ jsx48(
                                   TableToolbarAction,
                                   {
                                     HostAction: host.ToolbarAction,
@@ -50607,7 +50665,9 @@ function MatrxDataTableCore(coreProps) {
                           "aria-busy": isLoading || isFetching,
                           ...appendQuery === null ? {} : { style: { containerType: "inline-size" } },
                           className: cn(
-                            "relative flex h-full min-h-0 flex-col gap-2 overflow-y-auto rounded-md border border-border bg-card p-2",
+                            // No frame around the cards: each card carries its own border, and a bordered
+                            // panel of bordered cards is box-in-box (page-pass 2026-09-27).
+                            "relative flex h-full min-h-0 flex-col gap-2 overflow-y-auto",
                             mobileCardsClass
                           ),
                           children: [
@@ -50962,7 +51022,7 @@ function MatrxDataTableCore(coreProps) {
                                           "th",
                                           {
                                             "data-matrx-table-actions-column": true,
-                                            className: "h-9 w-px whitespace-nowrap px-2 text-right align-middle text-xs font-semibold uppercase tracking-wide text-muted-foreground",
+                                            className: "h-9 w-px whitespace-nowrap px-2 text-right align-middle text-xs font-semibold uppercase tracking-wide text-muted-foreground sm:sticky sm:right-0 sm:z-30 sm:bg-muted sm:shadow-[inset_1px_0_0_var(--color-border)]",
                                             style: fixedUtilityWidth(fixedTableGeometry?.actionsWidth),
                                             children: /* @__PURE__ */ jsx48("span", { "data-matrx-table-actions-label": true, className: "inline-block whitespace-nowrap", children: "Actions" })
                                           }