@ai-matrx/design-system 0.36.0 → 0.38.0

package/dist/data-table/filter-engine.d.cts

@@ -1,4 +1,4 @@
-import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../types-kiV-CAuZ.cjs';
+import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../types-BuMHbFjs.cjs';
 import '../content-transfer.cjs';
 import 'react';
 import '@ai-matrx/kit/content-transfer';

package/dist/data-table/filter-engine.d.ts

@@ -1,4 +1,4 @@
-import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../types-Cxm5XK0L.js';
+import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../types-B8vwElPz.js';
 import '../content-transfer.js';
 import 'react';
 import '@ai-matrx/kit/content-transfer';

package/dist/data-table/host.d.cts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ComponentType, ReactNode, MouseEventHandler } from 'react';
 import { CopyControlProps } from './copy-types.cjs';
 export { AgentPayloadInput, AiCustomSource, AiVariant, CopyExportConfig } from './copy-types.cjs';
-import { b as TableSavedViewsProps, c as MatrxDataTableDensity, d as MatrxDataTableRecordControls } from '../types-kiV-CAuZ.cjs';
+import { b as TableSavedViewsProps, c as MatrxDataTableDensity, d as MatrxDataTableRecordControls } from '../types-BuMHbFjs.cjs';
 import { MatrxTableMenuTarget, MatrxTableMenuPayload } from './menu-targets.cjs';
 import '../content-transfer.cjs';
 import '@ai-matrx/kit/content-transfer';

package/dist/data-table/host.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ComponentType, ReactNode, MouseEventHandler } from 'react';
 import { CopyControlProps } from './copy-types.js';
 export { AgentPayloadInput, AiCustomSource, AiVariant, CopyExportConfig } from './copy-types.js';
-import { b as TableSavedViewsProps, c as MatrxDataTableDensity, d as MatrxDataTableRecordControls } from '../types-Cxm5XK0L.js';
+import { b as TableSavedViewsProps, c as MatrxDataTableDensity, d as MatrxDataTableRecordControls } from '../types-B8vwElPz.js';
 import { MatrxTableMenuTarget, MatrxTableMenuPayload } from './menu-targets.js';
 import '../content-transfer.js';
 import '@ai-matrx/kit/content-transfer';

package/dist/data-table/index.cjs

@@ -1617,7 +1617,8 @@ var Dialog = ({
   children,
   ...props
 }) => {
-  const modal = props.modal ?? true;
+  const isMobile = useIsMobile();
+  const modal = props.modal ?? isMobile;
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DialogPrimitive.Root, { ...props, modal, children }) });
 };
 Dialog.displayName = "Dialog";
@@ -1663,6 +1664,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,
@@ -1671,15 +1677,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);
@@ -1707,19 +1748,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__ */ (0, import_jsx_runtime15.jsx)(VisuallyHidden.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DialogPrimitive.Title, { children: "Dialog" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DialogContainerContext.Provider, { value: containerEl, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DialogContainerContext.Provider, { value: containerEl, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DialogWindowHandleContext.Provider, { value: handle, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               PortalContainerProvider,
               {
                 container: containerEl ?? injectedContainer ?? null,
                 children
               }
-            ) }),
+            ) }) }),
             showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
               DialogPrimitive.Close,
               {
@@ -1742,19 +1797,28 @@ DialogContent.displayName = DialogPrimitive.Content.displayName;
 var DialogHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-  "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__ */ (0, import_jsx_runtime15.jsx)(
+    "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,
@@ -12144,6 +12208,7 @@ function MatrxDataTableCore({
   toolbar,
   hideToolbar = false,
   hidePagination = false,
+  paginationLabelFormat,
   filterUi,
   detail,
   expandedDetail,
@@ -13180,7 +13245,7 @@ function MatrxDataTableCore({
   const coverageResult = (0, import_react21.useMemo)(() => {
     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 },
@@ -14183,11 +14248,12 @@ function MatrxDataTableCore({
               notice,
               savedViewError ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { role: "alert", className: "shrink-0 text-xs text-destructive", children: savedViewError }) : null,
               toolbarActionError ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("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__ */ (0, import_jsx_runtime42.jsxs)(
+              !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__ */ (0, import_jsx_runtime42.jsxs)(
                 TableTitleRow,
                 {
                   tabs: viewTabs ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(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__ */ (0, import_jsx_runtime42.jsx)("span", { "data-matrx-table-view-control": true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                     SavedViews,
                     {
@@ -14197,7 +14263,7 @@ function MatrxDataTableCore({
                       onApply: applySavedView
                     }
                   ) }) : void 0,
-                  search: showSearch ? intelligentSearchEnabled ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                  search: toolbar?.customSearch ?? (showSearch ? intelligentSearchEnabled ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                     TableSearch,
                     {
                       value: searchValue,
@@ -14268,7 +14334,7 @@ function MatrxDataTableCore({
                         ] }) : null
                       ]
                     }
-                  ) : null,
+                  ) : null),
                   children: [
                     toolbar?.layeredFilters ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                       LayeredFilterBuilder,
@@ -14922,6 +14988,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}`
@@ -15095,7 +15162,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__ */ (0, import_jsx_runtime42.jsx)(
@@ -15106,6 +15173,40 @@ function MatrxDataTableCore({
                                                           disabled: !(hierarchy.canReparent?.(row) ?? true)
                                                         }
                                                       ) : null,
+                                                      colIdx === 0 && canExpandRow(row) ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Tooltip, { children: [
+                                                        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                                                          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__ */ (0, import_jsx_runtime42.jsx)(
+                                                              ChevronRight,
+                                                              {
+                                                                className: cn(
+                                                                  "transition-transform",
+                                                                  isRowExpanded(row) && "rotate-90"
+                                                                )
+                                                              }
+                                                            )
+                                                          }
+                                                        ) }),
+                                                        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipContent, { children: isRowExpanded(row) ? "Collapse details" : "Expand details" })
+                                                      ] }) : null,
                                                       /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                                                         "div",
                                                         {
@@ -15448,7 +15549,7 @@ function MatrxDataTableCore({
                   GenericTablePagination,
                   {
                     totalItems,
-                    ...sourceTotal === void 0 ? {} : { labelFormat: (start, end, total) => `${(0, import_format5.formatCount)(start)}\u2013${(0, import_format5.formatCount)(end)} of ${(0, import_format5.formatCount)(total)} matching \xB7 ${(0, import_format5.formatCount)(data.length)} / ${(0, import_format5.formatCount)(sourceTotal)} loaded` },
+                    ...paginationLabelFormat ? { labelFormat: paginationLabelFormat } : sourceTotal === void 0 ? {} : { labelFormat: (start, end, total) => `${(0, import_format5.formatCount)(start)}\u2013${(0, import_format5.formatCount)(end)} of ${(0, import_format5.formatCount)(total)} matching \xB7 ${(0, import_format5.formatCount)(data.length)} / ${(0, import_format5.formatCount)(sourceTotal)} loaded` },
                     ...localProgressiveEnabled ? { progressive: {
                       shownCount: progressiveRows.shownCount,
                       loadedCount: data.length,
@@ -15966,6 +16067,7 @@ function TableGroupHeaderRow({
   leadingCols,
   showActionsCol,
   rowNoun,
+  renderLabel,
   onToggle
 }) {
   const count = group.rows.length;
@@ -15996,7 +16098,7 @@ function TableGroupHeaderRow({
                   children: collapsed ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ChevronRight, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ChevronDown, { className: "h-4 w-4" })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "truncate text-sm font-semibold text-foreground", children: group.label }),
+              renderLabel ? renderLabel(group) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "truncate text-sm font-semibold text-foreground", children: group.label }),
               /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "whitespace-nowrap text-xs text-muted-foreground", children: summary })
             ] }) }, id);
           }
@@ -16342,7 +16444,7 @@ function SavedViewsControl({
       ] })
     ] }),
     dirty ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("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__ */ (0, import_jsx_runtime44.jsx)("p", { role: "alert", className: "basis-full break-words text-xs text-destructive", children: visibleError }) : null,
+    visibleError && !saveOpen ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { role: "alert", className: "basis-full break-words text-xs text-destructive", children: visibleError }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Dialog, { open: saveOpen, onOpenChange: setSaveOpen, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(DialogContent, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DialogHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DialogTitle, { children: "Save current view" }) }),
       visibleError ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { role: "alert", className: "text-sm text-destructive", children: visibleError }) : null,