@ai-matrx/design-system 0.18.0 → 0.18.2

package/dist/data-table/index.js

@@ -427,7 +427,7 @@ import {
   PointerSensor,
   pointerWithin,
   useDndMonitor as useDndMonitor2,
-  useDraggable as useDraggable2,
+  useDraggable as useDraggable3,
   useDroppable as useDroppable2,
   useSensor,
   useSensors
@@ -2423,7 +2423,12 @@ async function buildArtifact(draft, format, label) {
   const extension = format === "plain" ? "txt" : format === "compact-json" ? "json" : format;
   return 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__ */ jsx19(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);
@@ -2716,6 +2721,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(() => {
@@ -3026,7 +3034,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__ */ jsx19(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__ */ jsx19(Button, { type: "button", variant: "outline", onClick: () => void runAi(true), children: aiFailed ? "Retry or rejoin AI run" : "Rejoin AI run" }) : null,
         ai ? /* @__PURE__ */ jsx19("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__ */ jsx19("p", { role: "alert", className: "matrx-alchemy-error", children: state.error }) : null
       ] }) : null
@@ -3153,7 +3161,17 @@ var sourceFor = (id, label, build) => ({
   }
 });
 function MatrxCopyMenu(props) {
-  return /* @__PURE__ */ jsx20(MatrxCopyMenuSession, { ...props }, props.sourceId ?? props.label);
+  const inherited = useContentTransferCapabilities();
+  return /* @__PURE__ */ jsx20(
+    MatrxCopyMenuSession,
+    {
+      ...props
+    },
+    JSON.stringify([
+      inherited.identityKey ?? null,
+      props.sourceId ?? props.label
+    ])
+  );
 }
 function MatrxCopyMenuSession(props) {
   const instance = React13.useId();
@@ -3181,7 +3199,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 = normalizeTransferJson(props.export.sheetRows());
     if (!Array.isArray(value) || value.some(
       (row) => row === null || typeof row !== "object" || Array.isArray(row)
@@ -3328,7 +3346,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__ */ jsxs14(Fragment3, { children: [
@@ -3348,7 +3366,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(
@@ -3648,8 +3666,9 @@ ${JSON.stringify(value.data, null, 2)}
 import { jsx as jsx21 } from "react/jsx-runtime";
 function CopyButtons(props) {
   const { CopyControls } = useMatrxDataTableHost();
-  if (CopyControls) return /* @__PURE__ */ jsx21(CopyControls, { ...props });
-  return /* @__PURE__ */ jsx21(MatrxCopyMenu, { ...props });
+  const copyProps = props.export?.sheetRows ? { ...props, primarySource: "table" } : props;
+  if (CopyControls) return /* @__PURE__ */ jsx21(CopyControls, { ...copyProps });
+  return /* @__PURE__ */ jsx21(MatrxCopyMenu, { ...copyProps });
 }
 function jsonExportItem(build, label) {
   return { id: "json", label, build: () => ({ content: JSON.stringify(build(), null, 2), extension: "json", mime: "application/json" }) };
@@ -4022,7 +4041,12 @@ import {
 } from "@ai-matrx/kit/url-state";
 
 // src/data-table/ColumnHeaderCell.tsx
-import { useEffect as useEffect6, useMemo as useMemo3, useState as useState9 } from "react";
+import {
+  useEffect as useEffect6,
+  useMemo as useMemo3,
+  useState as useState9
+} from "react";
+import { useDraggable } from "@dnd-kit/core";
 
 // src/popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
@@ -4232,8 +4256,29 @@ function ColumnHeaderCell({
   filterShowCancel = false,
   filterFooterHint,
   allowNegation = false,
-  allowNullModes = false
+  allowNullModes = false,
+  reorderColumn
 }) {
+  const reorderEnabled = reorderColumn !== void 0;
+  const { attributes: reorderAttributes, listeners: reorderListeners, setNodeRef } = 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] = useState9(false);
@@ -4377,7 +4422,21 @@ function ColumnHeaderCell({
   );
   if (compact) {
     if (!sortable && !filterKind) {
-      return /* @__PURE__ */ jsx25("div", { className: cn("flex items-center justify-center", className), children: label });
+      if (!reorderEnabled) {
+        return /* @__PURE__ */ jsx25("div", { className: cn("flex items-center justify-center", className), children: label });
+      }
+      return /* @__PURE__ */ jsx25("div", { className: cn("flex items-center justify-center", className), children: /* @__PURE__ */ jsx25(
+        "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__ */ jsx25(
       "div",
@@ -4394,9 +4453,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: [
@@ -4432,8 +4495,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: [
@@ -4441,6 +4506,17 @@ function ColumnHeaderCell({
               isSorted ? sortDirection === "asc" ? /* @__PURE__ */ jsx25(ArrowUp, { className: "h-3 w-3 shrink-0 text-primary" }) : /* @__PURE__ */ jsx25(ArrowDown, { className: "h-3 w-3 shrink-0 text-primary" }) : /* @__PURE__ */ jsx25(ArrowUpDown, { className: "h-3 w-3 shrink-0 opacity-40" })
             ]
           }
+        ) : reorderEnabled ? /* @__PURE__ */ jsx25(
+          "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__ */ jsx25("span", { className: "truncate text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: label }),
         filterKind ? /* @__PURE__ */ jsxs17("div", { className: "inline-flex items-center", children: [
           /* @__PURE__ */ jsxs17(Popover, { open: filterOpen, onOpenChange: setFilterOpen, children: [
@@ -4763,7 +4839,7 @@ function parseOptionalNumber(raw) {
 
 // src/data-table/ColumnManager.tsx
 import { useEffect as useEffect7, useMemo as useMemo4, useState as useState10 } from "react";
-import { useDndMonitor, useDraggable, useDroppable } from "@dnd-kit/core";
+import { useDndMonitor, useDraggable as useDraggable2, useDroppable } from "@dnd-kit/core";
 init_filter_engine();
 import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
 function ColumnManager({
@@ -4938,7 +5014,7 @@ function ColumnManagerDropTarget({
   return /* @__PURE__ */ jsx26("div", { ref: setNodeRef, "data-matrx-column-manager-drop-target": id, className, children });
 }
 function ColumnManagerDragHandle({ id, label }) {
-  const { attributes, listeners, setNodeRef } = useDraggable({
+  const { attributes, listeners, setNodeRef } = useDraggable2({
     id: `matrx-column-manager:${id}`,
     data: { matrxDragKind: "column-manager", columnId: id }
   });
@@ -6566,6 +6642,7 @@ function MatrxDataTableWithUrlState({
     }
   );
 }
+var COLUMN_REORDER_ACTIVATION_DISTANCE = 6;
 function MatrxDataTableCore({
   data: suppliedData,
   columns,
@@ -6638,7 +6715,9 @@ function MatrxDataTableCore({
   const [internalSearch, setInternalSearch] = useState15("");
   const [draggedRowId, setDraggedRowId] = useState15(null);
   const hierarchySensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 6 } })
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: COLUMN_REORDER_ACTIVATION_DISTANCE }
+    })
   );
   const toolbarSearchControlled = toolbar?.searchValue !== void 0;
   const searchValue = controlledQuery ? controlledQuery.state.search : toolbarSearchControlled ? toolbar?.searchValue ?? "" : internalSearch;
@@ -7696,6 +7775,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__ */ jsx35(Eraser, { className: "h-3.5 w-3.5" }),
@@ -8054,45 +8134,43 @@ function MatrxDataTableCore({
                                     col.align === "right" && "text-right"
                                   ),
                                   style: columnWidthVar(col.width),
-                                  children: /* @__PURE__ */ jsxs26(ColumnHeaderDropZone, { id, enabled: reorderableColumns, children: [
-                                    reorderableColumns ? /* @__PURE__ */ jsx35(ColumnReorderHandle, { id, label: headerLabel }) : null,
-                                    /* @__PURE__ */ jsx35(
-                                      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__ */ jsx35(ColumnHeaderDropZone, { id, enabled: reorderableColumns, children: /* @__PURE__ */ jsx35(
+                                    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
                               );
@@ -8683,7 +8761,7 @@ function HierarchyDragHandle({
   label,
   disabled
 }) {
-  const { attributes, listeners, setNodeRef } = useDraggable2({
+  const { attributes, listeners, setNodeRef } = useDraggable3({
     id,
     disabled
   });
@@ -8851,26 +8929,6 @@ function ColumnHeaderDropZone({
   });
   return /* @__PURE__ */ jsx35("div", { ref: setNodeRef, className: "flex min-w-0 items-center", children });
 }
-function ColumnReorderHandle({ id, label }) {
-  const { attributes, listeners, setNodeRef } = useDraggable2({
-    id: `matrx-column-header:${id}`,
-    data: { matrxDragKind: "column-header", columnId: id }
-  });
-  return /* @__PURE__ */ jsx35(
-    "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__ */ jsx35(GripVertical, { className: "h-3.5 w-3.5" })
-    }
-  );
-}
 function columnWidthVar(width) {
   if (width === void 0) return void 0;
   return {