@ai-matrx/design-system 0.18.0 → 0.18.2

package/dist/data-table/index.cjs

@@ -460,7 +460,7 @@ module.exports = __toCommonJS(data_table_exports);
 
 // src/data-table/MatrxDataTable.tsx
 var import_react13 = require("react");
-var import_core2 = require("@dnd-kit/core");
+var import_core3 = require("@dnd-kit/core");
 
 // src/data-table/icons.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -2426,7 +2426,12 @@ async function buildArtifact(draft, format, label) {
   const extension = format === "plain" ? "txt" : format === "compact-json" ? "json" : format;
   return (0, import_content_transfer.serialize)(draft, format, { spreadsheetSafe: format === "csv" || format === "tsv", filename: `${filenameFor(label)}.${extension}` });
 }
-function ContentTransferMenu({ source, surface, label, projection, sections, preferences, table, formatSources, variants = EMPTY_VARIANTS, actions = [], capabilities: local, disabled, enabled = true, className, stopPropagation = true, hide = [], controllerRef }) {
+function ContentTransferMenu(props) {
+  const inherited = React12.useContext(CapabilityContext);
+  const identityKey = props.capabilities?.identityKey ?? inherited.identityKey;
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ContentTransferMenuSession, { ...props }, identityKey ?? "anonymous");
+}
+function ContentTransferMenuSession({ source, surface, label, projection, sections, preferences, table, formatSources, variants = EMPTY_VARIANTS, actions = [], capabilities: local, disabled, enabled = true, className, stopPropagation = true, hide = [], controllerRef }) {
   const triggerRef = React12.useRef(null);
   const inherited = React12.useContext(CapabilityContext);
   const nearestSurface = React12.useContext(SurfaceContext);
@@ -2719,6 +2724,9 @@ function PreparationWorkspace({ restoreFocus, open, state, scopes, onClose, onCh
   const [instruction, setInstruction] = React12.useState("");
   const [busy, setBusy] = React12.useState(null);
   const [aiFailed, setAiFailed] = React12.useState(false);
+  React12.useEffect(() => {
+    setAiFailed(false);
+  }, [state.snapshot.id, state.draft.revision]);
   const activeAi = React12.useRef(null);
   const activeCapture = React12.useRef(null);
   React12.useEffect(() => {
@@ -3029,7 +3037,7 @@ function PreparationWorkspace({ restoreFocus, open, state, scopes, onClose, onCh
           activeCapture.current = null;
           setBusy(null);
         }, children: "Stop loading rows" }) : null,
-        ai && aiSession.current?.recover && busy !== "ai" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { type: "button", variant: "outline", onClick: () => void runAi(true), children: aiFailed ? "Retry or rejoin AI run" : "Rejoin AI run" }) : null,
+        ai && aiFailed && aiSession.current?.recover && busy !== "ai" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { type: "button", variant: "outline", onClick: () => void runAi(true), children: aiFailed ? "Retry or rejoin AI run" : "Rejoin AI run" }) : null,
         ai ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "matrx-alchemy-meta", children: "AI creates a preview. It never copies automatically. Closing detaches this view without cancelling server work." }) : null,
         state.error ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { role: "alert", className: "matrx-alchemy-error", children: state.error }) : null
       ] }) : null
@@ -3156,7 +3164,17 @@ var sourceFor = (id, label, build) => ({
   }
 });
 function MatrxCopyMenu(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MatrxCopyMenuSession, { ...props }, props.sourceId ?? props.label);
+  const inherited = useContentTransferCapabilities();
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    MatrxCopyMenuSession,
+    {
+      ...props
+    },
+    JSON.stringify([
+      inherited.identityKey ?? null,
+      props.sourceId ?? props.label
+    ])
+  );
 }
 function MatrxCopyMenuSession(props) {
   const instance = React13.useId();
@@ -3184,7 +3202,7 @@ function MatrxCopyMenuSession(props) {
   })) : void 0;
   const agent = aiVisible && props.agent !== void 0 ? make("agent", () => asPayload(resolve(props.agent))) : void 0;
   const structuredAgent = aiVisible && props.agent !== void 0 ? make("structured-agent", () => structuredPayload(resolve(props.agent))) : void 0;
-  const table = exportVisible && props.export?.sheetRows ? make("rows", () => {
+  const table = (exportVisible || props.primarySource === "table") && props.export?.sheetRows ? make("rows", () => {
     const value = (0, import_content_transfer2.normalizeTransferJson)(props.export.sheetRows());
     if (!Array.isArray(value) || value.some(
       (row) => row === null || typeof row !== "object" || Array.isArray(row)
@@ -3331,7 +3349,7 @@ function MatrxCopyMenuSession(props) {
         return props.sendToSheet(draft.payload.rows, props.label);
       }
     });
-  const source = json ?? table ?? structuredAgent ?? human ?? builderVariants[0]?.source;
+  const source = (props.primarySource === "table" ? table : void 0) ?? json ?? table ?? structuredAgent ?? human ?? builderVariants[0]?.source;
   if (!source && !actions.length) return null;
   const target = source ?? make("actions", () => ({ kind: "text", text: props.label }));
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
@@ -3351,7 +3369,7 @@ function MatrxCopyMenuSession(props) {
         formatSources: {
           ...human ? { plain: human, markdown: humanMarkdown, html: humanMarkdown } : {},
           ...json ? { json, "compact-json": json } : {},
-          ...table ? { csv: table, tsv: table } : {}
+          ...table && exportVisible ? { csv: table, tsv: table } : {}
         },
         ...props.disabled !== void 0 ? { disabled: props.disabled } : {},
         className: cn(
@@ -3651,8 +3669,9 @@ ${JSON.stringify(value.data, null, 2)}
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function CopyButtons(props) {
   const { CopyControls } = useMatrxDataTableHost();
-  if (CopyControls) return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CopyControls, { ...props });
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MatrxCopyMenu, { ...props });
+  const copyProps = props.export?.sheetRows ? { ...props, primarySource: "table" } : props;
+  if (CopyControls) return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CopyControls, { ...copyProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MatrxCopyMenu, { ...copyProps });
 }
 function jsonExportItem(build, label) {
   return { id: "json", label, build: () => ({ content: JSON.stringify(build(), null, 2), extension: "json", mime: "application/json" }) };
@@ -4019,6 +4038,7 @@ var import_url_state3 = require("@ai-matrx/kit/url-state");
 
 // src/data-table/ColumnHeaderCell.tsx
 var import_react7 = require("react");
+var import_core = require("@dnd-kit/core");
 
 // src/popover.tsx
 var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
@@ -4228,8 +4248,29 @@ function ColumnHeaderCell({
   filterShowCancel = false,
   filterFooterHint,
   allowNegation = false,
-  allowNullModes = false
+  allowNullModes = false,
+  reorderColumn
 }) {
+  const reorderEnabled = reorderColumn !== void 0;
+  const { attributes: reorderAttributes, listeners: reorderListeners, setNodeRef } = (0, import_core.useDraggable)(
+    reorderColumn ? {
+      id: `matrx-column-header:${reorderColumn.id}`,
+      data: { matrxDragKind: "column-header", columnId: reorderColumn.id },
+      disabled: false
+    } : {
+      id: `matrx-column-header:inactive:${labelText ?? "column"}`,
+      disabled: true
+    }
+  );
+  const reorderLabel = reorderColumn?.label ?? labelText ?? "column";
+  const reorderActivator = reorderEnabled ? {
+    ...reorderAttributes,
+    ...reorderListeners,
+    ref: setNodeRef,
+    title: `Drag to reorder ${reorderLabel}.`,
+    "aria-description": "Drag this column label to reorder it."
+  } : void 0;
+  const reorderClass = reorderEnabled ? "touch-none cursor-grab active:cursor-grabbing" : void 0;
   const filterActive = isColumnFilterActive(filterValue);
   const deferredFilter = filterApplyLabel !== void 0 || filterShowCancel || filterFooterHint !== void 0;
   const [filterOpen, setFilterOpen] = (0, import_react7.useState)(false);
@@ -4373,7 +4414,21 @@ function ColumnHeaderCell({
   );
   if (compact) {
     if (!sortable && !filterKind) {
-      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn("flex items-center justify-center", className), children: label });
+      if (!reorderEnabled) {
+        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn("flex items-center justify-center", className), children: label });
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn("flex items-center justify-center", className), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        "button",
+        {
+          type: "button",
+          ...reorderActivator,
+          className: cn(
+            "inline-flex items-center justify-center rounded p-0.5 text-muted-foreground transition-colors hover:text-foreground",
+            reorderClass
+          ),
+          children: label
+        }
+      ) });
     }
     return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "div",
@@ -4390,9 +4445,13 @@ function ColumnHeaderCell({
               type: "button",
               "aria-label": menuLabel,
               title: menuLabel,
-              onClick: (e) => e.stopPropagation(),
+              onClick: (event) => {
+                event.stopPropagation();
+              },
+              ...reorderActivator,
               className: cn(
                 "relative inline-flex items-center justify-center rounded p-0.5 transition-colors",
+                reorderClass,
                 isSorted || filterActive ? "text-foreground" : "text-muted-foreground hover:text-foreground"
               ),
               children: [
@@ -4428,8 +4487,10 @@ function ColumnHeaderCell({
           {
             type: "button",
             onClick: onHeaderSortClick,
+            ...reorderActivator,
             className: cn(
               "inline-flex min-w-0 items-center gap-1 rounded px-0.5 py-0.5 text-left text-xs font-semibold uppercase tracking-wide transition-colors",
+              reorderClass,
               isSorted ? "text-foreground" : "text-muted-foreground hover:text-foreground"
             ),
             children: [
@@ -4437,6 +4498,17 @@ function ColumnHeaderCell({
               isSorted ? sortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ArrowUp, { className: "h-3 w-3 shrink-0 text-primary" }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ArrowDown, { className: "h-3 w-3 shrink-0 text-primary" }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ArrowUpDown, { className: "h-3 w-3 shrink-0 opacity-40" })
             ]
           }
+        ) : reorderEnabled ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          "button",
+          {
+            type: "button",
+            ...reorderActivator,
+            className: cn(
+              "min-w-0 truncate rounded px-0.5 py-0.5 text-left text-xs font-semibold uppercase tracking-wide text-muted-foreground hover:text-foreground",
+              reorderClass
+            ),
+            children: label
+          }
         ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "truncate text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: label }),
         filterKind ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "inline-flex items-center", children: [
           /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Popover, { open: filterOpen, onOpenChange: setFilterOpen, children: [
@@ -4759,7 +4831,7 @@ function parseOptionalNumber(raw) {
 
 // src/data-table/ColumnManager.tsx
 var import_react8 = require("react");
-var import_core = require("@dnd-kit/core");
+var import_core2 = require("@dnd-kit/core");
 init_filter_engine();
 var import_jsx_runtime26 = require("react/jsx-runtime");
 function ColumnManager({
@@ -4809,7 +4881,7 @@ function ColumnManager({
       return next;
     });
   };
-  (0, import_core.useDndMonitor)({
+  (0, import_core2.useDndMonitor)({
     onDragStart(event) {
       if (event.active.data.current?.matrxDragKind !== "column-manager") return;
       setDraggedColumnId(String(event.active.data.current.columnId));
@@ -4927,14 +4999,14 @@ function ColumnManagerDropTarget({
   className,
   children
 }) {
-  const { setNodeRef } = (0, import_core.useDroppable)({
+  const { setNodeRef } = (0, import_core2.useDroppable)({
     id: `matrx-column-manager:${id}`,
     data: { matrxDragKind: "column-manager", columnId: id }
   });
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ref: setNodeRef, "data-matrx-column-manager-drop-target": id, className, children });
 }
 function ColumnManagerDragHandle({ id, label }) {
-  const { attributes, listeners, setNodeRef } = (0, import_core.useDraggable)({
+  const { attributes, listeners, setNodeRef } = (0, import_core2.useDraggable)({
     id: `matrx-column-manager:${id}`,
     data: { matrxDragKind: "column-manager", columnId: id }
   });
@@ -6558,6 +6630,7 @@ function MatrxDataTableWithUrlState({
     }
   );
 }
+var COLUMN_REORDER_ACTIVATION_DISTANCE = 6;
 function MatrxDataTableCore({
   data: suppliedData,
   columns,
@@ -6629,8 +6702,10 @@ function MatrxDataTableCore({
   );
   const [internalSearch, setInternalSearch] = (0, import_react13.useState)("");
   const [draggedRowId, setDraggedRowId] = (0, import_react13.useState)(null);
-  const hierarchySensors = (0, import_core2.useSensors)(
-    (0, import_core2.useSensor)(import_core2.PointerSensor, { activationConstraint: { distance: 6 } })
+  const hierarchySensors = (0, import_core3.useSensors)(
+    (0, import_core3.useSensor)(import_core3.PointerSensor, {
+      activationConstraint: { distance: COLUMN_REORDER_ACTIVATION_DISTANCE }
+    })
   );
   const toolbarSearchControlled = toolbar?.searchValue !== void 0;
   const searchValue = controlledQuery ? controlledQuery.state.search : toolbarSearchControlled ? toolbar?.searchValue ?? "" : internalSearch;
@@ -7471,11 +7546,11 @@ function MatrxDataTableCore({
     } : facet
   ) : toolbar?.facets;
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-    import_core2.DndContext,
+    import_core3.DndContext,
     {
       sensors: hierarchySensors,
-      collisionDetection: import_core2.pointerWithin,
-      measuring: { droppable: { strategy: import_core2.MeasuringStrategy.Always } },
+      collisionDetection: import_core3.pointerWithin,
+      measuring: { droppable: { strategy: import_core3.MeasuringStrategy.Always } },
       onDragStart: (event) => {
         const kind = event.active.data.current?.matrxDragKind;
         if (kind === "column-header") {
@@ -7688,6 +7763,7 @@ function MatrxDataTableCore({
                               size: "sm",
                               className: "h-7 gap-1 px-2 text-xs text-muted-foreground",
                               onClick: clearAllFilters,
+                              "aria-label": "Clear all filters",
                               title: "Clear all filters",
                               children: [
                                 /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Eraser, { className: "h-3.5 w-3.5" }),
@@ -8046,45 +8122,43 @@ function MatrxDataTableCore({
                                     col.align === "right" && "text-right"
                                   ),
                                   style: columnWidthVar(col.width),
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(ColumnHeaderDropZone, { id, enabled: reorderableColumns, children: [
-                                    reorderableColumns ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ColumnReorderHandle, { id, label: headerLabel }) : null,
-                                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-                                      ColumnHeaderCell,
-                                      {
-                                        label: col.header,
-                                        labelText: headerLabel,
-                                        sortable: col.sortable !== false,
-                                        isSorted: Boolean(isSorted),
-                                        sortDirection: sort?.direction ?? defaultSortDirection,
-                                        onSortAsc: () => setSort({ id, direction: "asc" }),
-                                        onSortDesc: () => setSort({ id, direction: "desc" }),
-                                        onClearSort: () => setSort(null),
-                                        onHeaderSortClick: () => {
-                                          if (!isSorted) {
-                                            setSort({ id, direction: defaultSortDirection });
-                                            return;
-                                          }
-                                          if (sort?.direction === "asc") {
-                                            setSort({ id, direction: "desc" });
-                                            return;
-                                          }
-                                          setSort(null);
-                                        },
-                                        filterKind: meta?.kind ?? null,
-                                        filterValue: columnFilters[id],
-                                        onFilterChange: (next) => setColumnFilter(id, next),
-                                        selectOptions: meta?.options,
-                                        selectSingle: col.filterSingle,
-                                        filterApplyLabel: filterUi?.applyLabel,
-                                        filterShowCancel: filterUi?.showCancel,
-                                        filterFooterHint: filterUi?.footerHint,
-                                        allowNegation: filterUi?.allowNegation,
-                                        allowNullModes: filterUi?.allowNullModes,
-                                        align: col.align,
-                                        compact: col.compact
-                                      }
-                                    )
-                                  ] })
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ColumnHeaderDropZone, { id, enabled: reorderableColumns, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                                    ColumnHeaderCell,
+                                    {
+                                      label: col.header,
+                                      labelText: headerLabel,
+                                      sortable: col.sortable !== false,
+                                      isSorted: Boolean(isSorted),
+                                      sortDirection: sort?.direction ?? defaultSortDirection,
+                                      onSortAsc: () => setSort({ id, direction: "asc" }),
+                                      onSortDesc: () => setSort({ id, direction: "desc" }),
+                                      onClearSort: () => setSort(null),
+                                      onHeaderSortClick: () => {
+                                        if (!isSorted) {
+                                          setSort({ id, direction: defaultSortDirection });
+                                          return;
+                                        }
+                                        if (sort?.direction === "asc") {
+                                          setSort({ id, direction: "desc" });
+                                          return;
+                                        }
+                                        setSort(null);
+                                      },
+                                      filterKind: meta?.kind ?? null,
+                                      filterValue: columnFilters[id],
+                                      onFilterChange: (next) => setColumnFilter(id, next),
+                                      selectOptions: meta?.options,
+                                      selectSingle: col.filterSingle,
+                                      filterApplyLabel: filterUi?.applyLabel,
+                                      filterShowCancel: filterUi?.showCancel,
+                                      filterFooterHint: filterUi?.footerHint,
+                                      allowNegation: filterUi?.allowNegation,
+                                      allowNullModes: filterUi?.allowNullModes,
+                                      align: col.align,
+                                      compact: col.compact,
+                                      reorderColumn: reorderableColumns ? { id, label: headerLabel } : void 0
+                                    }
+                                  ) })
                                 },
                                 id
                               );
@@ -8660,7 +8734,7 @@ function MatrxDataTableCore({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core2.DragOverlay, { children: draggedRow ? (
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core3.DragOverlay, { children: draggedRow ? (
           // w-max: the overlay inherits the ACTIVE node's size, and the active
           // node is the 16px grip handle — without it the label wraps to one
           // character per line.
@@ -8675,7 +8749,7 @@ function HierarchyDragHandle({
   label,
   disabled
 }) {
-  const { attributes, listeners, setNodeRef } = (0, import_core2.useDraggable)({
+  const { attributes, listeners, setNodeRef } = (0, import_core3.useDraggable)({
     id,
     disabled
   });
@@ -8699,7 +8773,7 @@ function HierarchyRootDropTarget({
   label,
   draggedLabel
 }) {
-  const { isOver, setNodeRef } = (0, import_core2.useDroppable)({ id: "__root__" });
+  const { isOver, setNodeRef } = (0, import_core3.useDroppable)({ id: "__root__" });
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "div",
     {
@@ -8723,7 +8797,7 @@ function HierarchyDragIndicatorLayer({
   const [indicator, setIndicator] = (0, import_react13.useState)(
     null
   );
-  (0, import_core2.useDndMonitor)({
+  (0, import_core3.useDndMonitor)({
     onDragMove(event) {
       const container = scrollRef.current;
       const overId = event.over ? String(event.over.id) : null;
@@ -8823,7 +8897,7 @@ function HierarchyDroppableRow({
   disabled,
   children
 }) {
-  const { setNodeRef } = (0, import_core2.useDroppable)({ id, disabled });
+  const { setNodeRef } = (0, import_core3.useDroppable)({ id, disabled });
   if (!(0, import_react13.isValidElement)(children) || children.type !== "tr") return children;
   const row = children;
   return (0, import_react13.cloneElement)(row, {
@@ -8836,33 +8910,13 @@ function ColumnHeaderDropZone({
   enabled,
   children
 }) {
-  const { setNodeRef } = (0, import_core2.useDroppable)({
+  const { setNodeRef } = (0, import_core3.useDroppable)({
     id: `matrx-column-header:${id}`,
     disabled: !enabled,
     data: { matrxDragKind: "column-header", columnId: id }
   });
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { ref: setNodeRef, className: "flex min-w-0 items-center", children });
 }
-function ColumnReorderHandle({ id, label }) {
-  const { attributes, listeners, setNodeRef } = (0, import_core2.useDraggable)({
-    id: `matrx-column-header:${id}`,
-    data: { matrxDragKind: "column-header", columnId: id }
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-    "button",
-    {
-      ref: setNodeRef,
-      type: "button",
-      className: "mr-1 flex h-7 w-5 shrink-0 touch-none cursor-grab items-center justify-center text-muted-foreground hover:text-foreground active:cursor-grabbing",
-      "aria-label": `Reorder ${label}`,
-      title: `Drag to reorder ${label}`,
-      onClick: (event) => event.stopPropagation(),
-      ...attributes,
-      ...listeners,
-      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(GripVertical, { className: "h-3.5 w-3.5" })
-    }
-  );
-}
 function columnWidthVar(width) {
   if (width === void 0) return void 0;
   return {