@ai-matrx/design-system 0.36.0 → 0.38.0

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 {
@@ -1490,7 +1490,8 @@ var Dialog = ({
   children,
   ...props
 }) => {
-  const modal = props.modal ?? true;
+  const isMobile = useIsMobile();
+  const modal = props.modal ?? isMobile;
   return /* @__PURE__ */ jsx15(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ jsx15(DialogPrimitive.Root, { ...props, modal, children }) });
 };
 Dialog.displayName = "Dialog";
@@ -1536,6 +1537,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 +1550,50 @@ 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 [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 +1621,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 && "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 +1670,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 +5678,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 +5758,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 +5853,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 +5868,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 +5913,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 +6256,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 +6743,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 +6913,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 +7099,7 @@ function parseOptionalNumber(raw) {
 import {
   useCallback as useCallback6,
   useEffect as useEffect10,
-  useRef as useRef11,
+  useRef as useRef12,
   useState as useState15
 } from "react";
 
@@ -7079,11 +7143,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 +7736,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 +8447,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 +8462,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 +8855,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 +9052,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 +9063,7 @@ function ColumnManager({
   hidden,
   onApply
 }) {
-  const byId = useMemo7(
+  const byId = useMemo8(
     () => new Map(columns.map((column) => [columnId(column), column])),
     [columns]
   );
@@ -9541,7 +9605,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 +9650,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 +10884,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 +11058,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;
@@ -12079,6 +12143,7 @@ function MatrxDataTableCore({
   toolbar,
   hideToolbar = false,
   hidePagination = false,
+  paginationLabelFormat,
   filterUi,
   detail,
   expandedDetail,
@@ -12123,7 +12188,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;
@@ -12138,7 +12203,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";
@@ -12276,9 +12341,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 ?? {};
@@ -12365,13 +12430,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;
@@ -12397,7 +12462,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"
   });
@@ -12499,11 +12564,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);
@@ -12551,14 +12616,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(
@@ -12660,12 +12725,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))
@@ -12701,7 +12766,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]));
@@ -12749,7 +12814,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]
   );
@@ -12757,7 +12822,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,
@@ -12792,7 +12857,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);
@@ -12800,14 +12865,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, {
@@ -12870,7 +12935,7 @@ function MatrxDataTableCore({
     intelligentSearchEnabled,
     searchScope
   ]);
-  const lastNotifiedViewRows = useRef15(null);
+  const lastNotifiedViewRows = useRef16(null);
   useEffect16(() => {
     if (!onViewChange) {
       lastNotifiedViewRows.current = null;
@@ -12924,7 +12989,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];
@@ -12942,7 +13007,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;
@@ -12961,7 +13026,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);
@@ -12969,7 +13034,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]
   );
@@ -12979,7 +13044,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;
@@ -12990,7 +13055,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,
@@ -13031,7 +13096,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({
@@ -13042,7 +13107,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({
@@ -13095,7 +13160,7 @@ function MatrxDataTableCore({
       observer?.disconnect();
     };
   }, [metricsWanted, recomputeWindows]);
-  const renderedColumns = useMemo8(
+  const renderedColumns = useMemo9(
     () => effectiveColumnWindow ? [
       ...visibleColumns.slice(0, frozenRunLength),
       ...visibleColumns.slice(effectiveColumnWindow.start, effectiveColumnWindow.end)
@@ -13112,10 +13177,10 @@ function MatrxDataTableCore({
     },
     [effectiveColumnWindow, effectiveColumnWidths, frozenColumns, columnWindowWidth]
   );
-  const coverageResult = useMemo8(() => {
+  const coverageResult = useMemo9(() => {
     if (!coverage) return null;
     return describeCoverage({
-      loaded: data.length,
+      loaded: coverage.loaded ?? data.length,
       ...coverage.matched === void 0 ? {} : { matched: coverage.matched },
       ...coverage.total === void 0 ? {} : { total: coverage.total },
       ...coverage.cap === void 0 ? {} : { cap: coverage.cap },
@@ -13123,7 +13188,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(
@@ -13140,22 +13205,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;
@@ -13188,9 +13253,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({});
@@ -13202,9 +13267,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;
@@ -13273,11 +13338,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]);
@@ -13312,7 +13377,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;
@@ -13491,7 +13556,7 @@ function MatrxDataTableCore({
     }));
     return true;
   };
-  const requestCellEditRef = useRef15(requestCellEdit);
+  const requestCellEditRef = useRef16(requestCellEdit);
   requestCellEditRef.current = requestCellEdit;
   const buildRecordControls = (row) => {
     const rowId = getRowId(row);
@@ -13518,7 +13583,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();
@@ -13550,7 +13615,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) {
@@ -13796,7 +13861,7 @@ function MatrxDataTableCore({
       }
     }
   };
-  const resolveMenuLevelRef = useRef15(resolveMenuLevel);
+  const resolveMenuLevelRef = useRef16(resolveMenuLevel);
   resolveMenuLevelRef.current = resolveMenuLevel;
   useEffect16(() => {
     if (!host.rowContextRegistry) return;
@@ -13806,7 +13871,7 @@ function MatrxDataTableCore({
     );
   }, [host.rowContextRegistry, tableContextMenuInstanceId]);
   const showActionsCol = windowEnabled || Boolean(rowActions) || showInlineRowCopy;
-  const selectedIdSet = useMemo8(
+  const selectedIdSet = useMemo9(
     () => new Set(selection?.selectedIds ?? []),
     [selection?.selectedIds]
   );
@@ -13818,11 +13883,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;
@@ -13904,7 +13969,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,
@@ -13939,7 +14004,7 @@ function MatrxDataTableCore({
       sort
     ]
   );
-  const declaredDefaultViewSnapshot = useMemo8(
+  const declaredDefaultViewSnapshot = useMemo9(
     () => defaultViewSnapshot ?? {
       __kind: "matrx-table-view",
       version: 1,
@@ -14118,11 +14183,12 @@ function MatrxDataTableCore({
               notice,
               savedViewError ? /* @__PURE__ */ jsx42("p", { role: "alert", className: "shrink-0 text-xs text-destructive", children: savedViewError }) : null,
               toolbarActionError ? /* @__PURE__ */ jsx42("p", { role: "alert", className: "shrink-0 text-xs text-destructive", children: toolbarActionError }) : null,
-              !hideToolbar && (viewTabs || toolbar?.title || showSearch || 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__ */ jsxs32(
+              !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__ */ jsxs32(
                 TableTitleRow,
                 {
                   tabs: viewTabs ? /* @__PURE__ */ jsx42(TableViewWorkspace, { snapshot: currentViewSnapshot, onApply: applySavedView, related: relatedTableActions }, tableId ?? "table") : void 0,
                   ...toolbar?.title === void 0 ? {} : { title: toolbar.title },
+                  ...toolbar?.titleCount === void 0 ? {} : { count: toolbar.titleCount },
                   context: tableId && SavedViews ? /* @__PURE__ */ jsx42("span", { "data-matrx-table-view-control": true, children: /* @__PURE__ */ jsx42(
                     SavedViews,
                     {
@@ -14132,7 +14198,7 @@ function MatrxDataTableCore({
                       onApply: applySavedView
                     }
                   ) }) : void 0,
-                  search: showSearch ? intelligentSearchEnabled ? /* @__PURE__ */ jsx42(
+                  search: toolbar?.customSearch ?? (showSearch ? intelligentSearchEnabled ? /* @__PURE__ */ jsx42(
                     TableSearch,
                     {
                       value: searchValue,
@@ -14203,7 +14269,7 @@ function MatrxDataTableCore({
                         ] }) : null
                       ]
                     }
-                  ) : null,
+                  ) : null),
                   children: [
                     toolbar?.layeredFilters ? /* @__PURE__ */ jsx42(
                       LayeredFilterBuilder,
@@ -14857,6 +14923,7 @@ function MatrxDataTableCore({
                                         leadingCols,
                                         showActionsCol,
                                         rowNoun: grouping?.rowNoun ?? "row",
+                                        ...grouping?.renderLabel ? { renderLabel: grouping.renderLabel } : {},
                                         onToggle: () => setCollapsedGroups(toggleGroupCollapsed(collapsedGroups, entry.group.key))
                                       },
                                       `matrx-group-${entry.group.key}`
@@ -15030,7 +15097,7 @@ function MatrxDataTableCore({
                                                   "div",
                                                   {
                                                     className: cn(
-                                                      colIdx === 0 && hierarchy && "flex min-w-0 items-center"
+                                                      colIdx === 0 && (hierarchy || canExpandRow(row)) && "flex min-w-0 items-center"
                                                     ),
                                                     children: [
                                                       colIdx === 0 && hierarchy ? /* @__PURE__ */ jsx42(
@@ -15041,6 +15108,40 @@ function MatrxDataTableCore({
                                                           disabled: !(hierarchy.canReparent?.(row) ?? true)
                                                         }
                                                       ) : null,
+                                                      colIdx === 0 && canExpandRow(row) ? /* @__PURE__ */ jsxs32(Tooltip, { children: [
+                                                        /* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx42(
+                                                          Button,
+                                                          {
+                                                            type: "button",
+                                                            variant: "ghost",
+                                                            size: "icon",
+                                                            "data-matrx-table-expand-toggle": true,
+                                                            className: "mr-1 h-7 w-7 shrink-0 text-muted-foreground hover:text-foreground [&_svg]:size-4",
+                                                            "aria-label": isRowExpanded(row) ? "Collapse row details" : "Expand row details",
+                                                            "aria-expanded": isRowExpanded(row),
+                                                            onClick: (event) => {
+                                                              event.stopPropagation();
+                                                              toggleExpanded(row);
+                                                            },
+                                                            onKeyDown: (event) => {
+                                                              if (event.key !== "Enter" && event.key !== " ") return;
+                                                              event.preventDefault();
+                                                              event.stopPropagation();
+                                                              toggleExpanded(row);
+                                                            },
+                                                            children: /* @__PURE__ */ jsx42(
+                                                              ChevronRight,
+                                                              {
+                                                                className: cn(
+                                                                  "transition-transform",
+                                                                  isRowExpanded(row) && "rotate-90"
+                                                                )
+                                                              }
+                                                            )
+                                                          }
+                                                        ) }),
+                                                        /* @__PURE__ */ jsx42(TooltipContent, { children: isRowExpanded(row) ? "Collapse details" : "Expand details" })
+                                                      ] }) : null,
                                                       /* @__PURE__ */ jsx42(
                                                         "div",
                                                         {
@@ -15383,7 +15484,7 @@ function MatrxDataTableCore({
                   GenericTablePagination,
                   {
                     totalItems,
-                    ...sourceTotal === void 0 ? {} : { labelFormat: (start, end, total) => `${formatCount3(start)}\u2013${formatCount3(end)} of ${formatCount3(total)} matching \xB7 ${formatCount3(data.length)} / ${formatCount3(sourceTotal)} loaded` },
+                    ...paginationLabelFormat ? { labelFormat: paginationLabelFormat } : sourceTotal === void 0 ? {} : { labelFormat: (start, end, total) => `${formatCount3(start)}\u2013${formatCount3(end)} of ${formatCount3(total)} matching \xB7 ${formatCount3(data.length)} / ${formatCount3(sourceTotal)} loaded` },
                     ...localProgressiveEnabled ? { progressive: {
                       shownCount: progressiveRows.shownCount,
                       loadedCount: data.length,
@@ -15901,6 +16002,7 @@ function TableGroupHeaderRow({
   leadingCols,
   showActionsCol,
   rowNoun,
+  renderLabel,
   onToggle
 }) {
   const count = group.rows.length;
@@ -15931,7 +16033,7 @@ function TableGroupHeaderRow({
                   children: collapsed ? /* @__PURE__ */ jsx42(ChevronRight, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx42(ChevronDown, { className: "h-4 w-4" })
                 }
               ),
-              /* @__PURE__ */ jsx42("span", { className: "truncate text-sm font-semibold text-foreground", children: group.label }),
+              renderLabel ? renderLabel(group) : /* @__PURE__ */ jsx42("span", { className: "truncate text-sm font-semibold text-foreground", children: group.label }),
               /* @__PURE__ */ jsx42("span", { className: "whitespace-nowrap text-xs text-muted-foreground", children: summary })
             ] }) }, id);
           }
@@ -16277,7 +16379,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,