@ai-matrx/design-system 0.37.1 → 0.38.1

package/dist/data-table/index.js

@@ -9,8 +9,8 @@ import {
   useEffect as useEffect16,
   useId as useId2,
   useLayoutEffect as useLayoutEffect2,
-  useMemo as useMemo8,
-  useRef as useRef15,
+  useMemo as useMemo9,
+  useRef as useRef16,
   useState as useState22
 } from "react";
 import {
@@ -1486,12 +1486,14 @@ function useIsMobile() {
 
 // src/dialog.tsx
 import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+var DialogWindowedByDefaultContext = React10.createContext(false);
 var Dialog = ({
   children,
   ...props
 }) => {
-  const modal = props.modal ?? true;
-  return /* @__PURE__ */ jsx15(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ jsx15(DialogPrimitive.Root, { ...props, modal, children }) });
+  const isMobile = useIsMobile();
+  const modal = props.modal ?? isMobile;
+  return /* @__PURE__ */ jsx15(DialogWindowedByDefaultContext.Provider, { value: props.modal === void 0, children: /* @__PURE__ */ jsx15(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ jsx15(DialogPrimitive.Root, { ...props, modal, children }) }) });
 };
 Dialog.displayName = "Dialog";
 var DialogPortal = ({
@@ -1536,6 +1538,11 @@ DialogContentPrimitive.displayName = "DialogContentPrimitive";
 var DIALOG_DESKTOP_CLASSES = "matrx-dialog-card fixed inset-0 z-[10000] m-auto grid h-fit min-w-0 w-full max-w-lg gap-4 max-h-[85dvh] overflow-y-auto overscroll-contain [--dialog-pad:1.5rem] overflow-x-clip border bg-background p-6 shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full sm:rounded-lg";
 var DIALOG_MOBILE_SHEET_CLASSES = "matrx-mobile-sheet matrx-dialog-card fixed inset-x-0 bottom-0 left-0 right-0 top-auto z-[10000] flex min-w-0 flex-col w-full max-w-full max-h-[90dvh] gap-4 [--dialog-pad:1rem] overflow-x-clip border-t bg-background p-4 pb-safe shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full rounded-t-2xl rounded-b-none overflow-y-auto overscroll-contain";
 var DIALOG_MOBILE_SHEET_OVERRIDE = "inset-x-0 bottom-0 left-0 right-0 top-auto translate-none w-full max-w-full max-h-[90dvh] rounded-b-none rounded-t-2xl overflow-y-auto";
+var DialogWindowHandleContext = React10.createContext(null);
+var WINDOW_KEEP_VISIBLE = 80;
+function isInteractiveTarget(target) {
+  return target instanceof Element && Boolean(target.closest("button, a, input, textarea, select, [role='button'], [contenteditable='true']"));
+}
 var DialogContent = React10.forwardRef(
   ({
     className,
@@ -1544,15 +1551,51 @@ var DialogContent = React10.forwardRef(
     animated = true,
     showCloseButton = true,
     container,
+    dismissOnOutsideClick = false,
+    onInteractOutside,
+    onEscapeKeyDown,
+    style,
     ...props
   }, ref) => {
     const isMobile = useIsMobile();
     const isModal = useRadixDialogModal();
     const injectedContainer = usePortalContainer(container);
     const asSheet = mobileSheet && isMobile;
+    const windowed = !isModal && !asSheet;
+    const windowedByDefault = React10.useContext(DialogWindowedByDefaultContext);
     const [containerEl, setContainerEl] = React10.useState(
       null
     );
+    const [offset, setOffset] = React10.useState({ x: 0, y: 0 });
+    const dragRef = React10.useRef(null);
+    const handle = React10.useMemo(() => {
+      if (!windowed) return null;
+      const clamp = (value, limit) => Math.max(-limit, Math.min(limit, value));
+      return {
+        onPointerDown: (event) => {
+          if (event.button !== 0 || isInteractiveTarget(event.target)) return;
+          dragRef.current = { x: event.clientX, y: event.clientY, baseX: offset.x, baseY: offset.y };
+          event.currentTarget.setPointerCapture?.(event.pointerId);
+        },
+        onPointerMove: (event) => {
+          const start = dragRef.current;
+          if (!start) return;
+          setOffset({
+            x: clamp(start.baseX + event.clientX - start.x, window.innerWidth / 2 - WINDOW_KEEP_VISIBLE / 2),
+            y: clamp(start.baseY + event.clientY - start.y, window.innerHeight / 2 - WINDOW_KEEP_VISIBLE / 2)
+          });
+        },
+        onPointerUp: (event) => {
+          if (!dragRef.current) return;
+          dragRef.current = null;
+          event.currentTarget.releasePointerCapture?.(event.pointerId);
+        },
+        onPointerCancel: () => {
+          dragRef.current = null;
+        },
+        onDoubleClick: () => setOffset({ x: 0, y: 0 })
+      };
+    }, [windowed, offset.x, offset.y]);
     const mergedRef = React10.useCallback(
       (node) => {
         setContainerEl(node);
@@ -1580,19 +1623,33 @@ var DialogContent = React10.forwardRef(
             // can sit beside a host's floating window manager (which starts at
             // z=1000); staying below that boundary makes a newly focused window
             // usable without coupling the two systems.
-            !isModal && "z-[900]"
+            !isModal && !windowedByDefault && "z-[900]",
+            // Without an overlay the card needs its own separation from the page.
+            windowed && "shadow-2xl ring-1 ring-border/60"
           ),
+          style: windowed && (offset.x !== 0 || offset.y !== 0) ? { ...style, translate: `${offset.x}px ${offset.y}px` } : style,
+          onInteractOutside: (event) => {
+            onInteractOutside?.(event);
+            if (windowed && !dismissOnOutsideClick) event.preventDefault();
+          },
+          onEscapeKeyDown: (event) => {
+            onEscapeKeyDown?.(event);
+            const pressedIn = event.target instanceof Node && event.target !== document.body ? event.target : document.activeElement;
+            if (windowed && containerEl && !(pressedIn && containerEl.contains(pressedIn))) {
+              event.preventDefault();
+            }
+          },
           ...hasDescription ? {} : { "aria-describedby": void 0 },
           ...props,
           children: [
             hasTitle ? null : /* @__PURE__ */ jsx15(VisuallyHidden.Root, { children: /* @__PURE__ */ jsx15(DialogPrimitive.Title, { children: "Dialog" }) }),
-            /* @__PURE__ */ jsx15(DialogContainerContext.Provider, { value: containerEl, children: /* @__PURE__ */ jsx15(
+            /* @__PURE__ */ jsx15(DialogContainerContext.Provider, { value: containerEl, children: /* @__PURE__ */ jsx15(DialogWindowHandleContext.Provider, { value: handle, children: /* @__PURE__ */ jsx15(
               PortalContainerProvider,
               {
                 container: containerEl ?? injectedContainer ?? null,
                 children
               }
-            ) }),
+            ) }) }),
             showCloseButton ? /* @__PURE__ */ jsxs9(
               DialogPrimitive.Close,
               {
@@ -1615,19 +1672,28 @@ DialogContent.displayName = DialogPrimitive.Content.displayName;
 var DialogHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx15(
-  "div",
-  {
-    "data-slot": "dialog-header",
-    className: cn(
-      // DialogContent owns an absolute close control. Reserve its hit area in
-      // every header so trailing actions never render underneath it.
-      "flex flex-col space-y-1.5 pr-12 text-center sm:text-left",
-      className
-    ),
-    ...props
-  }
-);
+}) => {
+  const handle = React10.useContext(DialogWindowHandleContext);
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      ...handle ? {
+        ...handle,
+        "data-window-handle": "",
+        title: "Drag to move \xB7 double-click to recenter"
+      } : {},
+      className: cn(
+        // DialogContent owns an absolute close control. Reserve its hit area in
+        // every header so trailing actions never render underneath it.
+        "flex flex-col space-y-1.5 pr-12 text-center sm:text-left",
+        handle && "cursor-grab select-none active:cursor-grabbing",
+        className
+      ),
+      ...props
+    }
+  );
+};
 DialogHeader.displayName = "DialogHeader";
 var DialogFooter = ({
   className,
@@ -5614,7 +5680,7 @@ function useClippedContentGuard(ref, options) {
 }
 
 // src/data-table/url-state.ts
-import { useCallback as useCallback4, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef8, useState as useState12 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef9, useState as useState12 } from "react";
 import {
   commitUrlParams,
   useUrlSearchParams
@@ -5694,7 +5760,7 @@ function useTableUrlState(options) {
     [defaultPageSize, defaultSortDirection, defaultSortId, key]
   );
   const state = readState(searchParams);
-  const lastTextWriteAt = useRef8(0);
+  const lastTextWriteAt = useRef9(0);
   const [debouncedSearch, setDebouncedSearch] = useState12(state.search);
   useEffect7(() => {
     if (state.search === debouncedSearch) return;
@@ -5789,7 +5855,7 @@ function useTableUrlState(options) {
     writeState(next);
     setDebouncedSearch("");
   }, [defaultPageSize, defaultSortDirection, defaultSortId, writeState]);
-  const queryState = useMemo4(
+  const queryState = useMemo5(
     () => state.search === debouncedSearch ? state : { ...state, search: debouncedSearch, page: 1 },
     [state, debouncedSearch]
   );
@@ -5804,10 +5870,10 @@ import {
 } from "@ai-matrx/kit/url-state";
 
 // src/data-table/RowAlchemyLauncher.tsx
-import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef9, useState as useState13 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef10, useState as useState13 } from "react";
 import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
 function MatrxTableRowAlchemyProvider({ copy, placement, controls, children }) {
-  const controller = useRef9(null);
+  const controller = useRef10(null);
   const { CopyControls } = useMatrxDataTableHost();
   const [active, setActive] = useState13(false);
   const [fallback, setFallback] = useState13(false);
@@ -5849,8 +5915,8 @@ function MatrxTableRowAlchemyProvider({ copy, placement, controls, children }) {
 import {
   forwardRef as forwardRef12,
   useEffect as useEffect9,
-  useMemo as useMemo5,
-  useRef as useRef10,
+  useMemo as useMemo6,
+  useRef as useRef11,
   useState as useState14
 } from "react";
 import { useDraggable } from "@dnd-kit/core";
@@ -6192,7 +6258,7 @@ function ColumnHeaderCell({
       setPendingNegation(filterValue?.negated ?? false);
     }
   }, [filterOpen, filterValue]);
-  const notifyOpen = useRef10(onFilterOpen);
+  const notifyOpen = useRef11(onFilterOpen);
   notifyOpen.current = onFilterOpen;
   useEffect9(() => {
     if (filterOpen) notifyOpen.current?.();
@@ -6679,7 +6745,7 @@ function FacetChecklist({
   const [query, setQuery] = useState14("");
   const selected = value?.kind === "select" ? value.values ?? (value.value && value.value !== "__all__" ? [value.value] : []) : [];
   const selectedSet = new Set(selected);
-  const rows = useMemo5(() => {
+  const rows = useMemo6(() => {
     if (!facets) return [];
     const listed = facets.values.map((entry) => ({
       value: entry.value,
@@ -6849,7 +6915,7 @@ function SearchableSelectFilter({
   allowCustom = false
 }) {
   const [query, setQuery] = useState14("");
-  const filtered = useMemo5(() => {
+  const filtered = useMemo6(() => {
     const q = query.trim().toLowerCase();
     if (!q) return options;
     return options.filter(
@@ -7035,7 +7101,7 @@ function parseOptionalNumber(raw) {
 import {
   useCallback as useCallback6,
   useEffect as useEffect10,
-  useRef as useRef11,
+  useRef as useRef12,
   useState as useState15
 } from "react";
 
@@ -7079,11 +7145,11 @@ function ColumnResizeHandle({
   onResizeCancel,
   onResizeCommit
 }) {
-  const handleRef = useRef11(null);
-  const activeResizeRef = useRef11(null);
-  const previewRafRef = useRef11(null);
-  const queuedWidthRef = useRef11(null);
-  const keyboardWidthRef = useRef11(null);
+  const handleRef = useRef12(null);
+  const activeResizeRef = useRef12(null);
+  const previewRafRef = useRef12(null);
+  const queuedWidthRef = useRef12(null);
+  const keyboardWidthRef = useRef12(null);
   const [announcedWidth, setAnnouncedWidth] = useState15(null);
   const bounds = resolveColumnResizeBounds(minWidth, maxWidth);
   const cssVar = columnResizeCssVar(columnId2);
@@ -7672,7 +7738,7 @@ function scrollOffsetForIndex(input) {
 }
 
 // src/data-table/useSpreadsheetGrid.ts
-import { useCallback as useCallback7, useEffect as useEffect11, useMemo as useMemo6, useRef as useRef12, useState as useState16 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect11, useMemo as useMemo7, useRef as useRef13, useState as useState16 } from "react";
 
 // src/data-table/grid-selection.ts
 function rangeBounds(range, rowIds, fieldNames) {
@@ -8383,11 +8449,11 @@ function useSpreadsheetGrid(options) {
   const [range, setRange] = useState16(null);
   const [fillTarget, setFillTarget] = useState16(null);
   const [stack, setStack] = useState16(() => createUndoStack(options?.undoDepth ?? 100));
-  const draggingRef = useRef12(null);
-  const optionsRef = useRef12(options);
+  const draggingRef = useRef13(null);
+  const optionsRef = useRef13(options);
   optionsRef.current = options;
   const rowIds = options?.rowIds ?? [];
-  const columnIds = useMemo6(
+  const columnIds = useMemo7(
     () => options ? options.columnIds.filter((id) => id !== "") : [],
     [options]
   );
@@ -8398,16 +8464,16 @@ function useSpreadsheetGrid(options) {
     const alive = rowSet.has(range.anchor.rowId) && rowSet.has(range.focus.rowId) && colSet.has(range.anchor.fieldName) && colSet.has(range.focus.fieldName);
     if (!alive) setRange(null);
   }, [range, rowIds, columnIds]);
-  const bounds = useMemo6(
+  const bounds = useMemo7(
     () => range ? rangeBounds(range, rowIds, columnIds) : null,
     [range, rowIds, columnIds]
   );
-  const rowIndexById = useMemo6(() => {
+  const rowIndexById = useMemo7(() => {
     const map = /* @__PURE__ */ new Map();
     for (let i = 0; i < rowIds.length; i += 1) map.set(rowIds[i], i);
     return map;
   }, [rowIds]);
-  const columnIndexById = useMemo6(() => {
+  const columnIndexById = useMemo7(() => {
     const map = /* @__PURE__ */ new Map();
     for (let i = 0; i < columnIds.length; i += 1) map.set(columnIds[i], i);
     return map;
@@ -8791,9 +8857,9 @@ function useSpreadsheetGrid(options) {
     },
     []
   );
-  const fillTargetRef = useRef12(null);
+  const fillTargetRef = useRef13(null);
   fillTargetRef.current = fillTarget;
-  const boundsRef = useRef12(null);
+  const boundsRef = useRef13(null);
   boundsRef.current = bounds;
   useEffect11(() => {
     if (!options) return;
@@ -8988,7 +9054,7 @@ function rankTableSearchRows(rows, columns, query, options = {}, extraText) {
 }
 
 // src/data-table/ColumnManager.tsx
-import { useEffect as useEffect12, useMemo as useMemo7, useState as useState17 } from "react";
+import { useEffect as useEffect12, useMemo as useMemo8, useState as useState17 } from "react";
 import { useDndMonitor, useDraggable as useDraggable2, useDroppable } from "@dnd-kit/core";
 import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
 function ColumnManager({
@@ -8999,7 +9065,7 @@ function ColumnManager({
   hidden,
   onApply
 }) {
-  const byId = useMemo7(
+  const byId = useMemo8(
     () => new Map(columns.map((column) => [columnId(column), column])),
     [columns]
   );
@@ -9541,7 +9607,7 @@ function parseTableViewSnapshot(raw) {
 // src/data-table/MatrxUuidCell.tsx
 import {
   useEffect as useEffect13,
-  useRef as useRef13,
+  useRef as useRef14,
   useState as useState18
 } from "react";
 import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
@@ -9586,7 +9652,7 @@ function MatrxUuidCell({
   const [copied, setCopied] = useState18(false);
   const [opening, setOpening] = useState18(false);
   const [peekOpen, setPeekOpen] = useState18(false);
-  const timer = useRef13(null);
+  const timer = useRef14(null);
   useEffect13(
     () => () => {
       if (timer.current) clearTimeout(timer.current);
@@ -10820,7 +10886,7 @@ function DirtySavePill({
 }
 
 // src/data-table/EditableTableCell.tsx
-import { useEffect as useEffect15, useRef as useRef14, useState as useState20 } from "react";
+import { useEffect as useEffect15, useRef as useRef15, useState as useState20 } from "react";
 import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
 function CellRefusal({ reason }) {
   return /* @__PURE__ */ jsx39(
@@ -10994,8 +11060,8 @@ function InlineStringEditor({
   const [editing, setEditing] = useState20(false);
   const [draft, setDraft] = useState20(value);
   const [refusal, setRefusal] = useState20(null);
-  const handledEditRequest = useRef14(void 0);
-  const seedRef = useRef14(editSeed);
+  const handledEditRequest = useRef15(void 0);
+  const seedRef = useRef15(editSeed);
   seedRef.current = editSeed;
   useEffect15(() => {
     if (editRequest === void 0 || handledEditRequest.current === editRequest) return;
@@ -12124,7 +12190,7 @@ function MatrxDataTableCore({
 }) {
   const appendQuery = query?.mode === "controlled-append" ? query : null;
   const appendQueryKey = appendQuery?.pagination.queryKey ?? null;
-  const committedAppendQueryKey = useRef15(appendQueryKey);
+  const committedAppendQueryKey = useRef16(appendQueryKey);
   const appendSourceChanged = appendQuery !== null && committedAppendQueryKey.current !== appendQueryKey;
   const data = (appendQuery ? appendQuery.pagination.rows : suppliedData) ?? [];
   const isLoading = appendQuery ? appendQuery.pagination.loading : suppliedLoading;
@@ -12139,7 +12205,7 @@ function MatrxDataTableCore({
   const [savedViewError, setSavedViewError] = useState22(null);
   const [toolbarActionError, setToolbarActionError] = useState22(null);
   const [toolbarActionPending, setToolbarActionPending] = useState22({ refresh: false, add: false });
-  const toolbarActionPendingRef = useRef15({ refresh: false, add: false });
+  const toolbarActionPendingRef = useRef16({ 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";
@@ -12277,9 +12343,9 @@ function MatrxDataTableCore({
   const [windowRowSnapshot, setWindowRowSnapshot] = useState22(null);
   const editScopeKey = appendQueryKey === null ? "\0local" : `append:${appendQueryKey}`;
   const [editsByScope, setEditsByScope] = useState22({});
-  const editRevisionRef = useRef15({});
+  const editRevisionRef = useRef16({});
   const [savingByScope, setSavingByScope] = useState22({});
-  const savingScopesRef = useRef15(/* @__PURE__ */ new Set());
+  const savingScopesRef = useRef16(/* @__PURE__ */ new Set());
   const [editRequest, setEditRequest] = useState22(null);
   const [confirmForeignDraftDiscard, setConfirmForeignDraftDiscard] = useState22(false);
   const edits = editsByScope[editScopeKey]?.values ?? {};
@@ -12366,13 +12432,13 @@ function MatrxDataTableCore({
     onWindowRowIdChange,
     selectionConfig
   ]);
-  const scrollRef = useRef15(null);
-  const tableRef = useRef15(null);
-  const tableHeaderRef = useRef15(null);
-  const cardsScrollRef = useRef15(null);
+  const scrollRef = useRef16(null);
+  const tableRef = useRef16(null);
+  const tableHeaderRef = useRef16(null);
+  const cardsScrollRef = useRef16(null);
   const [documentStickyHeader, setDocumentStickyHeader] = useState22(false);
-  const documentStickyHeaderRef = useRef15(false);
-  const previousAppendKeyForScrollReset = useRef15(appendQueryKey);
+  const documentStickyHeaderRef = useRef16(false);
+  const previousAppendKeyForScrollReset = useRef16(appendQueryKey);
   useLayoutEffect2(() => {
     const previous = previousAppendKeyForScrollReset.current;
     previousAppendKeyForScrollReset.current = appendQueryKey;
@@ -12398,7 +12464,7 @@ function MatrxDataTableCore({
     ...appendScrollPolicy?.mode === "scroll" && appendScrollPolicy.thresholdPx !== void 0 ? { thresholdPx: appendScrollPolicy.thresholdPx } : {},
     ...appendScrollPolicy?.mode === "scroll" && appendScrollPolicy.intentTimeoutMs !== void 0 ? { intentTimeoutMs: appendScrollPolicy.intentTimeoutMs } : {}
   });
-  const rootRef = useRef15(null);
+  const rootRef = useRef16(null);
   useClippedContentGuard(rootRef, {
     label: typeof copy === "object" && copy.listLabel ? `Table: ${copy.listLabel}` : "MatrxDataTable"
   });
@@ -12500,11 +12566,11 @@ function MatrxDataTableCore({
     () => normalizeColumnWidthsForColumns(columnState?.widths, columns)
   );
   const [fixedTableGeometry, setFixedTableGeometry] = useState22(null);
-  const knownColumnIds = useRef15(new Set(columns.map(columnId)));
-  const draggedColumnId = useRef15(null);
-  const columnDragActive = useRef15(false);
-  const columnDragRaf = useRef15(null);
-  const columnDragScrollDirection = useRef15(0);
+  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 [columnDragPreview, setColumnDragPreview] = useState22(null);
   const stopColumnDragScroll = useCallback8(() => {
     if (columnDragRaf.current !== null) cancelAnimationFrame(columnDragRaf.current);
@@ -12552,14 +12618,14 @@ function MatrxDataTableCore({
   const [internalColumnManagerOpen, setInternalColumnManagerOpen] = useState22(false);
   const columnManagerOpen = controlledColumnManager?.open ?? internalColumnManagerOpen;
   const setColumnManagerOpen = controlledColumnManager?.onOpenChange ?? setInternalColumnManagerOpen;
-  const columnIds = useMemo8(() => columns.map(columnId), [columns]);
-  const effectiveColumnOrder = useMemo8(() => columnState ? [...columnState.order.filter((id, index, values) => columnIds.includes(id) && values.indexOf(id) === index), ...columnIds.filter((id) => !columnState.order.includes(id))] : columnOrder, [columnIds, columnOrder, columnState]);
-  const effectiveHiddenColumnIds = useMemo8(() => columnState ? new Set(columnState.hidden.filter((id) => columnIds.includes(id))) : hiddenColumnIds, [columnIds, columnState, hiddenColumnIds]);
-  const effectiveColumnWidths = useMemo8(
+  const columnIds = useMemo9(() => columns.map(columnId), [columns]);
+  const effectiveColumnOrder = useMemo9(() => columnState ? [...columnState.order.filter((id, index, values) => columnIds.includes(id) && values.indexOf(id) === index), ...columnIds.filter((id) => !columnState.order.includes(id))] : columnOrder, [columnIds, columnOrder, columnState]);
+  const effectiveHiddenColumnIds = useMemo9(() => columnState ? new Set(columnState.hidden.filter((id) => columnIds.includes(id))) : hiddenColumnIds, [columnIds, columnState, hiddenColumnIds]);
+  const effectiveColumnWidths = useMemo9(
     () => normalizeColumnWidthsForColumns(columnState?.widths ?? columnWidths, columns),
     [columns, columnState?.widths, columnWidths]
   );
-  const resizeGestureSnapshotRef = useRef15(null);
+  const resizeGestureSnapshotRef = useRef16(null);
   const measureVisibleColumnWidths = useCallback8(() => {
     const measured = {};
     const headers = tableRef.current ? Array.from(tableRef.current.querySelectorAll(
@@ -12661,12 +12727,12 @@ function MatrxDataTableCore({
       tableRef.current?.style.removeProperty(columnResizeCssVar(id));
     }
   });
-  const previewColumnOrder = useMemo8(
+  const previewColumnOrder = useMemo9(
     () => projectColumnDragOrder(effectiveColumnOrder, columnDragPreview),
     [columnDragPreview, effectiveColumnOrder]
   );
   useColumnReorderAnimation(tableRef, previewColumnOrder.join("\0"), columnDragPreview !== null);
-  const visibleColumns = useMemo8(() => {
+  const visibleColumns = useMemo9(() => {
     const byId = new Map(columns.map((column) => [columnId(column), column]));
     return previewColumnOrder.map((id) => byId.get(id)).filter(
       (column) => column !== void 0 && !effectiveHiddenColumnIds.has(columnId(column))
@@ -12702,7 +12768,7 @@ function MatrxDataTableCore({
     setFixedTableGeometry(geometry);
   }, [resolvedDensity, measureFixedTableGeometry, usesMeasuredFixedLayout]);
   const fixedLayoutActive = usesMeasuredFixedLayout && fixedTableGeometry !== null;
-  const frozenColumns = useMemo8(() => {
+  const frozenColumns = useMemo9(() => {
     if (!visibleColumns.some((column) => column.frozen)) return NO_FROZEN_COLUMNS;
     const ids = visibleColumns.map(columnId);
     const byId = new Map(visibleColumns.map((column) => [columnId(column), column]));
@@ -12750,7 +12816,7 @@ function MatrxDataTableCore({
     const color = cellTintColor(row, id, colId);
     return color ? CELL_TINT_CLASS[color] : void 0;
   };
-  const declaredVisibleCopyColumns = useMemo8(
+  const declaredVisibleCopyColumns = useMemo9(
     () => visibleColumns.filter((column) => column.accessorFn !== void 0 || column.accessorKey !== void 0),
     [visibleColumns]
   );
@@ -12758,7 +12824,7 @@ function MatrxDataTableCore({
   const tableContextMenuInstanceId = useId2();
   const tableDndContextId = useId2();
   const defaultCopyTitle = toolbar?.title || "Table";
-  const defaultCopy = useMemo8(() => ({
+  const defaultCopy = useMemo9(() => ({
     label: defaultCopyTitle,
     listLabel: defaultCopyTitle,
     location: defaultCopyTitle,
@@ -12793,7 +12859,7 @@ function MatrxDataTableCore({
       serializer: (shaped) => buildViewAgentInput(effectiveCopy, shaped, data, { scope: "custom" })
     }))
   ] : [];
-  const filterMeta = useMemo8(() => {
+  const filterMeta = useMemo9(() => {
     const meta = /* @__PURE__ */ new Map();
     for (const col of visibleColumns) {
       const id = columnId(col);
@@ -12801,14 +12867,14 @@ function MatrxDataTableCore({
     }
     return meta;
   }, [visibleColumns, data, remoteQuery]);
-  const intelligentSearchScopes = useMemo8(
+  const intelligentSearchScopes = useMemo9(
     () => resolveTableSearchScopes(data, columns, {
       ...toolbar?.intelligentSearch?.roles === void 0 ? {} : { roles: toolbar.intelligentSearch.roles },
       ...toolbar?.intelligentSearch?.scopes === void 0 ? {} : { scopes: toolbar.intelligentSearch.scopes }
     }),
     [columns, data, toolbar?.intelligentSearch?.roles, toolbar?.intelligentSearch?.scopes]
   );
-  const processed = useMemo8(() => {
+  const processed = useMemo9(() => {
     if (remoteQuery && !appendUsesLocalProcessing) return data;
     if (processLocalRows) {
       return processLocalRows(data, {
@@ -12871,7 +12937,7 @@ function MatrxDataTableCore({
     intelligentSearchEnabled,
     searchScope
   ]);
-  const lastNotifiedViewRows = useRef15(null);
+  const lastNotifiedViewRows = useRef16(null);
   useEffect16(() => {
     if (!onViewChange) {
       lastNotifiedViewRows.current = null;
@@ -12925,7 +12991,7 @@ function MatrxDataTableCore({
     numberedPageHasMore: !hidePagination && !isLoading && !isFetching && processed.length > 0 && safePage < pageCount && (remoteQuery?.mode === "controlled" || !remoteQuery && localPagination?.mode === "numbered"),
     onPageAdvance: setPage
   });
-  const paginated = useMemo8(() => {
+  const paginated = useMemo9(() => {
     if (remoteQuery) return processed;
     if (hidePagination) return processed;
     if (localProgressiveEnabled) return [...progressiveRows.rows];
@@ -12943,7 +13009,7 @@ function MatrxDataTableCore({
     },
     [grouping]
   );
-  const groups = useMemo8(() => {
+  const groups = useMemo9(() => {
     if (!grouping || !groupingColumnId) return null;
     const groupColumn = columns.find((col) => columnId(col) === groupingColumnId);
     if (!groupColumn) return null;
@@ -12962,7 +13028,7 @@ function MatrxDataTableCore({
       ...grouping.emptyLabel ? { emptyLabel: grouping.emptyLabel } : {}
     });
   }, [grouping, groupingColumnId, columns, paginated]);
-  const groupableColumns = useMemo8(() => {
+  const groupableColumns = useMemo9(() => {
     const allowed = grouping?.groupableColumnIds;
     return visibleColumns.filter((col) => {
       const id = columnId(col);
@@ -12970,7 +13036,7 @@ function MatrxDataTableCore({
       return col.accessorKey !== void 0 || col.accessorFn !== void 0;
     });
   }, [visibleColumns, grouping?.groupableColumnIds]);
-  const groupedRenderRows = useMemo8(
+  const groupedRenderRows = useMemo9(
     () => groups ? flattenGroups(groups, collapsedGroups) : null,
     [groups, collapsedGroups]
   );
@@ -12980,7 +13046,7 @@ function MatrxDataTableCore({
   const bodyEntryCount = groupedRenderRows ? groupedRenderRows.length : paginated.length;
   const virtualizeActive = virtualizeConfig !== null && virtualizeConfig.enabled !== false && bodyEntryCount > virtualThreshold && !hierarchy && expandedDetail === void 0;
   const columnWindowWidth = virtualizeConfig?.columnWidth ?? 160;
-  const frozenRunLength = useMemo8(() => {
+  const frozenRunLength = useMemo9(() => {
     let run = 0;
     for (const col of visibleColumns) {
       if (frozenColumns.offsets[columnId(col)] === void 0) break;
@@ -12991,7 +13057,7 @@ function MatrxDataTableCore({
   const columnVirtualizeActive = virtualizeConfig !== null && virtualizeConfig.enabled !== false && virtualizeConfig.columns === true && visibleColumns.length - frozenRunLength > 30 && !hierarchy && mobileCards === void 0;
   const [rowWindow, setRowWindow] = useState22(null);
   const [columnWindow, setColumnWindow] = useState22(null);
-  const windowInputs = useRef15({
+  const windowInputs = useRef16({
     virtualizeActive: false,
     bodyEntryCount: 0,
     virtualRowHeight: 40,
@@ -13032,7 +13098,7 @@ function MatrxDataTableCore({
     setRowWindow((prev) => sameWindow(prev, nextRow) ? prev : nextRow);
     setColumnWindow((prev) => sameWindow(prev, nextColumn) ? prev : nextColumn);
   }, []);
-  const effectiveRowWindow = useMemo8(() => {
+  const effectiveRowWindow = useMemo9(() => {
     if (!virtualizeActive) return null;
     if (rowWindow && rowWindow.end <= bodyEntryCount) return rowWindow;
     return computeWindow({
@@ -13043,7 +13109,7 @@ function MatrxDataTableCore({
       overscan: virtualizeConfig?.overscan ?? 8
     });
   }, [virtualizeActive, rowWindow, bodyEntryCount, virtualRowHeight, virtualizeConfig?.overscan]);
-  const effectiveColumnWindow = useMemo8(() => {
+  const effectiveColumnWindow = useMemo9(() => {
     if (!columnVirtualizeActive) return null;
     if (columnWindow && columnWindow.end <= visibleColumns.length) return columnWindow;
     return computeWindow({
@@ -13096,7 +13162,7 @@ function MatrxDataTableCore({
       observer?.disconnect();
     };
   }, [metricsWanted, recomputeWindows]);
-  const renderedColumns = useMemo8(
+  const renderedColumns = useMemo9(
     () => effectiveColumnWindow ? [
       ...visibleColumns.slice(0, frozenRunLength),
       ...visibleColumns.slice(effectiveColumnWindow.start, effectiveColumnWindow.end)
@@ -13113,7 +13179,7 @@ function MatrxDataTableCore({
     },
     [effectiveColumnWindow, effectiveColumnWidths, frozenColumns, columnWindowWidth]
   );
-  const coverageResult = useMemo8(() => {
+  const coverageResult = useMemo9(() => {
     if (!coverage) return null;
     return describeCoverage({
       loaded: coverage.loaded ?? data.length,
@@ -13124,7 +13190,7 @@ function MatrxDataTableCore({
       ...coverage.noun === void 0 ? {} : { noun: coverage.noun }
     });
   }, [coverage, data.length]);
-  const bodyEntries = useMemo8(() => {
+  const bodyEntries = useMemo9(() => {
     const from = effectiveRowWindow ? effectiveRowWindow.start : 0;
     const to = effectiveRowWindow ? effectiveRowWindow.end : void 0;
     const windowed = groupedRenderRows ? groupedRenderRows.slice(from, to).map(
@@ -13141,22 +13207,22 @@ function MatrxDataTableCore({
       windowed.push({ kind: "spacer", height: effectiveRowWindow.padEnd, place: "end" });
     return windowed;
   }, [groupedRenderRows, collapsedGroups, paginated, effectiveRowWindow]);
-  const getRowIdRef = useRef15(getRowId);
+  const getRowIdRef = useRef16(getRowId);
   getRowIdRef.current = getRowId;
-  const spreadsheetRowIds = useMemo8(
+  const spreadsheetRowIds = useMemo9(
     () => paginated.map((row) => getRowIdRef.current(row)),
     [paginated]
   );
-  const spreadsheetColumnIds = useMemo8(
+  const spreadsheetColumnIds = useMemo9(
     () => visibleColumns.map((col) => columnId(col)),
     [visibleColumns]
   );
-  const spreadsheetRowById = useMemo8(() => {
+  const spreadsheetRowById = useMemo9(() => {
     const map = /* @__PURE__ */ new Map();
     for (const row of paginated) map.set(getRowIdRef.current(row), row);
     return map;
   }, [paginated]);
-  const spreadsheetColumnById = useMemo8(() => {
+  const spreadsheetColumnById = useMemo9(() => {
     const map = /* @__PURE__ */ new Map();
     for (const col of visibleColumns) map.set(columnId(col), col);
     return map;
@@ -13189,9 +13255,9 @@ function MatrxDataTableCore({
       ...spreadsheet.onPastePlan ? { onPastePlan: spreadsheet.onPastePlan } : {}
     } : null
   );
-  const sheetRef = useRef15(sheet);
+  const sheetRef = useRef16(sheet);
   sheetRef.current = sheet;
-  const searchValueRef = useRef15(searchValue);
+  const searchValueRef = useRef16(searchValue);
   searchValueRef.current = searchValue;
   const facetsEnabled = Boolean(facets && facets.enabled !== false);
   const [facetState, setFacetState] = useState22({});
@@ -13203,9 +13269,9 @@ function MatrxDataTableCore({
     },
     [facets, visibleColumns]
   );
-  const facetInputsRef = useRef15({ data, facets, facetReadCell });
+  const facetInputsRef = useRef16({ data, facets, facetReadCell });
   facetInputsRef.current = { data, facets, facetReadCell };
-  const facetRequestRef = useRef15(/* @__PURE__ */ new Map());
+  const facetRequestRef = useRef16(/* @__PURE__ */ new Map());
   const requestFacets = useCallback8((colId) => {
     const { data: rows, facets: config, facetReadCell: readCell } = facetInputsRef.current;
     if (!config || config.enabled === false) return;
@@ -13274,11 +13340,11 @@ function MatrxDataTableCore({
     if (!controlledQuery || controlledQuery.state.page === safePage) return;
     emitControlledQueryChange({ page: safePage });
   }, [controlledQuery, emitControlledQueryChange, safePage]);
-  const selectedRow = useMemo8(() => {
+  const selectedRow = useMemo9(() => {
     if (!selectedId) return null;
     return data.find((r) => getRowId(r) === selectedId) ?? null;
   }, [data, selectedId, getRowId]);
-  const windowRow = useMemo8(() => {
+  const windowRow = useMemo9(() => {
     if (!windowRowId) return null;
     return data.find((r) => getRowId(r) === windowRowId) ?? (windowRowSnapshot && windowRowSnapshot.queryKey === appendQueryKey && getRowId(windowRowSnapshot.row) === windowRowId ? windowRowSnapshot.row : null);
   }, [data, windowRowId, windowRowSnapshot, getRowId, appendQueryKey]);
@@ -13313,7 +13379,7 @@ function MatrxDataTableCore({
     return def !== void 0 && f.value !== def;
   });
   const hasActiveFilters = activeFilterCount > 0 || Boolean(searchValue.trim()) || intelligentSearchEnabled && searchScope !== "all" || Boolean(anyOfValue.trim()) || completeLayeredFilterRules(layeredFilters).length > 0 || facetActive;
-  const changeCount = useMemo8(() => {
+  const changeCount = useMemo9(() => {
     let n2 = 0;
     for (const fields of Object.values(edits)) {
       n2 += Object.keys(fields).length;
@@ -13492,7 +13558,7 @@ function MatrxDataTableCore({
     }));
     return true;
   };
-  const requestCellEditRef = useRef15(requestCellEdit);
+  const requestCellEditRef = useRef16(requestCellEdit);
   requestCellEditRef.current = requestCellEdit;
   const buildRecordControls = (row) => {
     const rowId = getRowId(row);
@@ -13519,7 +13585,7 @@ function MatrxDataTableCore({
   };
   const hierarchyRows = hierarchy?.rows ?? data;
   const hierarchyGetParentId = hierarchy?.getParentId;
-  const hierarchyIndex = useMemo8(() => {
+  const hierarchyIndex = useMemo9(() => {
     if (!hierarchyGetParentId) return null;
     const byId = /* @__PURE__ */ new Map();
     const parentById = /* @__PURE__ */ new Map();
@@ -13551,7 +13617,7 @@ function MatrxDataTableCore({
     return { byId, parentById, depthById };
   }, [hierarchyGetParentId, hierarchyRows, getRowId]);
   const draggedRow = draggedRowId && hierarchyIndex ? hierarchyIndex.byId.get(draggedRowId) : void 0;
-  const hierarchyBlockedIds = useMemo8(() => {
+  const hierarchyBlockedIds = useMemo9(() => {
     if (!draggedRowId || !hierarchyIndex) return null;
     const childrenById = /* @__PURE__ */ new Map();
     for (const [id, parentId] of hierarchyIndex.parentById) {
@@ -13797,7 +13863,7 @@ function MatrxDataTableCore({
       }
     }
   };
-  const resolveMenuLevelRef = useRef15(resolveMenuLevel);
+  const resolveMenuLevelRef = useRef16(resolveMenuLevel);
   resolveMenuLevelRef.current = resolveMenuLevel;
   useEffect16(() => {
     if (!host.rowContextRegistry) return;
@@ -13807,7 +13873,7 @@ function MatrxDataTableCore({
     );
   }, [host.rowContextRegistry, tableContextMenuInstanceId]);
   const showActionsCol = windowEnabled || Boolean(rowActions) || showInlineRowCopy;
-  const selectedIdSet = useMemo8(
+  const selectedIdSet = useMemo9(
     () => new Set(selection?.selectedIds ?? []),
     [selection?.selectedIds]
   );
@@ -13819,11 +13885,11 @@ function MatrxDataTableCore({
   );
   const allOnPageSelected = selectableRows.length > 0 && selectedOnPage.length === selectableRows.length;
   const someOnPageSelected = selectedOnPage.length > 0 && !allOnPageSelected;
-  const selectedRows = useMemo8(
+  const selectedRows = useMemo9(
     () => data.filter((row) => selectedIdSet.has(getRowId(row))),
     [data, selectedIdSet, getRowId]
   );
-  const lastToggledIndex = useRef15(null);
+  const lastToggledIndex = useRef16(null);
   const setSelectedIds = (next) => selection?.onSelectedIdsChange([...next]);
   const toggleRowSelected = (index, shiftKey) => {
     if (!selection) return;
@@ -13905,7 +13971,7 @@ function MatrxDataTableCore({
     }
     return href ? /* @__PURE__ */ jsx42(Link, { href, onClick: (event) => event.stopPropagation(), className: "block w-full min-w-0 rounded outline-none focus-visible:ring-2 focus-visible:ring-ring", children: display }) : display;
   };
-  const currentViewSnapshot = useMemo8(
+  const currentViewSnapshot = useMemo9(
     () => ({
       __kind: "matrx-table-view",
       version: 1,
@@ -13940,7 +14006,7 @@ function MatrxDataTableCore({
       sort
     ]
   );
-  const declaredDefaultViewSnapshot = useMemo8(
+  const declaredDefaultViewSnapshot = useMemo9(
     () => defaultViewSnapshot ?? {
       __kind: "matrx-table-view",
       version: 1,
@@ -16315,7 +16381,7 @@ function SavedViewsControl({
       ] })
     ] }),
     dirty ? /* @__PURE__ */ jsx44("span", { id: unsavedChangesId, className: "sr-only", children: "This table view has unsaved changes. Open the view menu to save or update it." }) : null,
-    visibleError ? /* @__PURE__ */ jsx44("p", { role: "alert", className: "basis-full break-words text-xs text-destructive", children: visibleError }) : null,
+    visibleError && !saveOpen ? /* @__PURE__ */ jsx44("p", { role: "alert", className: "basis-full break-words text-xs text-destructive", children: visibleError }) : null,
     /* @__PURE__ */ jsx44(Dialog, { open: saveOpen, onOpenChange: setSaveOpen, children: /* @__PURE__ */ jsxs34(DialogContent, { children: [
       /* @__PURE__ */ jsx44(DialogHeader, { children: /* @__PURE__ */ jsx44(DialogTitle, { children: "Save current view" }) }),
       visibleError ? /* @__PURE__ */ jsx44("p", { role: "alert", className: "text-sm text-destructive", children: visibleError }) : null,