@ai-matrx/design-system 0.18.10 → 0.18.12

package/dist/data-table/index.cjs

@@ -90,9 +90,31 @@ var GripVertical = (p) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Icon, { .
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "9", cy: "18", r: "1" }),
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "15", cy: "18", r: "1" })
 ] });
-var SlidersHorizontal = (p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { ...p, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 7h16M4 17h16M9 7v0M15 17v0" }) });
+var SlidersHorizontal = (p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { ...p, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 4h-7M10 4H3M21 12h-9M8 12H3M21 20h-5M12 20H3M14 2v4M8 10v4M16 18v4" }) });
 var Trash2 = (p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { ...p, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 7h16M10 11v6M14 11v6M9 7l1-2h4l1 2M6 7l1 13h10l1-13" }) });
 var Loader2 = (p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { ...p, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20 12a8 8 0 1 1-2.3-5.7" }) });
+var RefreshCw = (p) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Icon, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 3v5h-5" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 16H3v5" })
+] });
+function RefreshControlIcon({
+  spinning = false,
+  className,
+  ...props
+}) {
+  if (spinning) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Loader2,
+      {
+        className: [className, "animate-spin"].filter(Boolean).join(" "),
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RefreshCw, { className, ...props });
+}
 var Save = (p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { ...p, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 3h12l2 2v16H5zM8 3v6h8V3M8 21v-7h8v7" }) });
 var Pencil = (p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { ...p, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m4 20 4-1 11-11-3-3L5 16l-1 4z" }) });
 var Eye = (p) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Icon, { ...p, children: [
@@ -1949,14 +1971,14 @@ var PopoverContent = React12.forwardRef(
 );
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
+// src/content-transfer/icon.ts
+var ALCHEMY_GLYPH_PATHS = ["M9 3h6", "M10 3v6l-5.2 8.7A2 2 0 0 0 6.5 21h11a2 2 0 0 0 1.7-3.3L14 9V3", "M8 15h8"];
+var ALCHEMY_GLYPH_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">${ALCHEMY_GLYPH_PATHS.map((d) => `<path d="${d}"/>`).join("")}</svg>`;
+
 // src/content-transfer/index.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function AlchemyGlyph(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M4.5 5.5h8v11h-8z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M8.5 9.5h8v9h-8z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "m18.5 3 .65 1.85L21 5.5l-1.85.65L18.5 8l-.65-1.85L16 5.5l1.85-.65z" })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", ...props, children: ALCHEMY_GLYPH_PATHS.map((d) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d }, d)) });
 }
 var CapabilityContext = React13.createContext({});
 var useContentTransferCapabilities = () => React13.useContext(CapabilityContext);
@@ -1970,7 +1992,16 @@ function MenuPresentation({ label, hint, icon: Icon3 }) {
     ] })
   ] });
 }
-function PaletteGlyph({ format, ai = false, file = false }) {
+function PaletteGlyph({ format, ai = false, file = false, kind }) {
+  if (kind === "ai-copy") return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("svg", { className: "matrx-alchemy-palette-glyph", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("rect", { x: "5", y: "5", width: "11", height: "14", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M9 3h6a2 2 0 0 1 2 2v10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "m18.5 3 .55 1.45L20.5 5l-1.45.55L18.5 7l-.55-1.45L16.5 5l1.45-.55z" })
+  ] });
+  if (kind === "sliders") return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("svg", { className: "matrx-alchemy-palette-glyph", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M4 6h16M4 12h16M4 18h16" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M8 3v6M16 9v6M10 15v6" })
+  ] });
   if (ai) return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("svg", { className: "matrx-alchemy-palette-glyph", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
     /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M12 5a3 3 0 1 0-5.997.125A4 4 0 0 0 3.5 10.9a4 4 0 0 0 .556 6.588A4 4 0 0 0 12 19" }),
     /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.503 5.775 4 4 0 0 1-.556 6.588A4 4 0 0 1 12 19" }),
@@ -2003,15 +2034,15 @@ function PaletteGlyph({ format, ai = false, file = false }) {
   ] }) : format === "html" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M15 6h6M3 6h7M3 12h18M3 18h12" }) }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M4 7V4h16v3M9 20h6M12 4v16" }) });
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("svg", { className: "matrx-alchemy-palette-glyph", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: path2 });
 }
-function PaletteRows({ title, items, onRun, extra, ai = false }) {
+function PaletteRows({ title, items, onRun, extra, ai = false, glyphKind, fallbackHint }) {
   if (!items.length && !extra) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("section", { className: "matrx-alchemy-palette-section", children: [
     /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { children: title }),
     items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("button", { type: "button", className: cn("matrx-alchemy-palette-row", ai && "matrx-alchemy-palette-row-ai"), "aria-label": item.ariaLabel, onClick: () => onRun?.(item), children: [
-      item.icon ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(item.icon, { className: "matrx-alchemy-menu-icon" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PaletteGlyph, { ai }),
+      item.icon ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(item.icon, { className: "matrx-alchemy-menu-icon" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PaletteGlyph, { ai, ...glyphKind ? { kind: glyphKind } : {} }),
       /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { children: [
         item.copyLabel ?? item.label,
-        item.hint ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("small", { className: "matrx-alchemy-menu-hint", children: item.hint }) : null
+        item.hint ?? fallbackHint ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("small", { className: "matrx-alchemy-menu-hint", children: item.hint ?? fallbackHint }) : null
       ] })
     ] }, item.id)),
     extra
@@ -2408,45 +2439,54 @@ function ContentTransferMenuSession({ source, surface, label, projection, sectio
     }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { ref: triggerRef, type: "button", className: "matrx-alchemy-trigger", disabled, "aria-label": `Copy, transform or export ${sourceLabel}`, title: "Alchemy \u2014 copy, transform, export", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AlchemyGlyph, {}) }) }),
       /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(PopoverContent, { align: "end", className: "matrx-alchemy-menu matrx-alchemy-palette", "aria-label": "Alchemy output options", onCloseAutoFocus: () => triggerRef.current?.focus(), children: [
-        copyAvailable && downloadAvailable ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "matrx-alchemy-mode", "aria-label": "Output action", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", "aria-label": "Copy mode", "aria-pressed": resolvedMode === "copy", onClick: () => setMode("copy"), children: "Copy" }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", "aria-label": "Download mode", "aria-pressed": resolvedMode === "download", onClick: () => setMode("download"), children: "Download" })
-        ] }) : null,
         menuStatus === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "matrx-alchemy-palette-status", children: "Inspecting content\u2026" }) : menuStatus !== "idle" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "matrx-alchemy-error", children: menuStatus }) : null,
-        resolvedMode === "copy" && copyAvailable ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "matrx-alchemy-palette-grid", children: [
-            visibleCopies.map((format) => tile(format, { plain: "Text", markdown: "Markdown", html: "Formatted", json: "JSON", "compact-json": "Compact", csv: "CSV", tsv: "Sheets" }[format], () => void transfer(format, false), { ariaLabel: `Copy ${LABEL[format]}` })),
-            visibleAdapters.map((adapter) => tile(adapter.id, adapter.label, () => void transfer(adapter, false), { custom: true }))
-          ] }),
-          quickVariants("copy").length ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PaletteRows, { title: "Quick copy", items: quickVariants("copy"), onRun: (variant) => {
+        copyAvailable || downloadAvailable ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("section", { className: "matrx-alchemy-output", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { children: resolvedMode === "copy" ? "Copy as" : "Download as" }),
+          copyAvailable && downloadAvailable ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "matrx-alchemy-mode", "aria-label": "Output action", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", "aria-label": "Copy mode", "aria-pressed": resolvedMode === "copy", onClick: () => setMode("copy"), children: "Copy" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", "aria-label": "Download mode", "aria-pressed": resolvedMode === "download", onClick: () => setMode("download"), children: "Download" })
+          ] }) : null,
+          resolvedMode === "copy" && copyAvailable ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "matrx-alchemy-palette-grid", children: [
+              visibleCopies.map((format) => tile(format, { plain: "Text", markdown: "Markdown", html: "Formatted", json: "JSON", "compact-json": "Compact", csv: "CSV", tsv: "Sheets" }[format], () => void transfer(format, false), { ariaLabel: `Copy ${LABEL[format]}` })),
+              visibleAdapters.map((adapter) => tile(adapter.id, adapter.label, () => void transfer(adapter, false), { custom: true }))
+            ] }),
+            quickVariants("copy").length ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PaletteRows, { title: "Quick copy", items: quickVariants("copy"), onRun: (variant) => {
+              closePalette();
+              void transfer("markdown", false, variant);
+            } }) : null
+          ] }) : null,
+          resolvedMode === "download" && downloadAvailable ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "matrx-alchemy-palette-grid", children: [
+            visibleDownloads.map((format) => tile(format, { plain: "Text", markdown: "Markdown", html: "Formatted", json: "JSON", "compact-json": "Compact", csv: "CSV", tsv: "Sheets", xlsx: "Excel" }[format], () => void transfer(format, true), { ariaLabel: `Download ${LABEL[format]}` })),
+            visibleAdapters.map((adapter) => tile(adapter.id, adapter.label, () => void transfer(adapter, true), { custom: true })),
+            downloadActions.map((action) => tile(action.id, action.label, () => void runAction(action), { custom: true, action, file: true }))
+          ] }) }) : null
+        ] }) : null,
+        prepareAvailable ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PaletteRows, { title: "Copy for AI", ai: true, glyphKind: "ai-copy", fallbackHint: "Copies immediately", items: quickVariants("ai"), onRun: (variant) => {
             closePalette();
             void transfer("markdown", false, variant);
-          } }) : null
+          } }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PaletteRows, { title: "Edit and prepare", items: [], extra: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("button", { type: "button", className: "matrx-alchemy-palette-row", "aria-label": "Prepare for AI", onClick: () => {
+            closePalette();
+            void openWorkspace();
+          }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PaletteGlyph, { kind: "sliders" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { children: [
+              "Prepare for AI",
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("small", { className: "matrx-alchemy-menu-hint", children: "Review and edit before copying" })
+            ] })
+          ] }) })
         ] }) : null,
-        resolvedMode === "download" && downloadAvailable ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "matrx-alchemy-palette-grid", children: [
-          visibleDownloads.map((format) => tile(format, { plain: "Text", markdown: "Markdown", html: "Formatted", json: "JSON", "compact-json": "Compact", csv: "CSV", tsv: "Sheets", xlsx: "Excel" }[format], () => void transfer(format, true), { ariaLabel: `Download ${LABEL[format]}` })),
-          visibleAdapters.map((adapter) => tile(adapter.id, adapter.label, () => void transfer(adapter, true), { custom: true })),
-          downloadActions.map((action) => tile(action.id, action.label, () => void runAction(action), { custom: true, action, file: true }))
-        ] }) }) : null,
-        prepareAvailable ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PaletteRows, { title: "Prepare", ai: true, items: quickVariants("ai"), onRun: (variant) => {
-          closePalette();
-          void transfer("markdown", false, variant);
-        }, extra: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("button", { type: "button", className: "matrx-alchemy-palette-row", onClick: () => {
-          closePalette();
-          void openWorkspace();
-        }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PaletteGlyph, { ai: true }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Prepare for AI\u2026" })
-        ] }) }) : null,
-        prepareAvailable && (nearestWorkspaceKey || variants.length) ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PaletteRows, { title: "Context", items: [], extra: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+        prepareAvailable && (nearestWorkspaceKey || variants.length) ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PaletteRows, { title: "Other sources", items: [], extra: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
           nearestWorkspaceKey && nearestSurface ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", className: "matrx-alchemy-palette-row", onClick: () => {
             closePalette();
             void openWorkspace(nearestWorkspaceKey, { source: nearestSurface, label: nearestSurface.surfaceName });
-          }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Prepare this surface\u2026" }) }) : null,
+          }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Prepare this surface" }) }) : null,
           variants.map((variant) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", className: "matrx-alchemy-palette-row", "aria-label": variant.ariaLabel, onClick: () => {
             closePalette();
             void openWorkspace(variantWorkspaceKeys.get(variant.id), variant);
-          }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MenuPresentation, { ...variant, label: `Prepare ${variant.label}\u2026` }) }, variant.id))
+          }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MenuPresentation, { ...variant, label: `Prepare ${variant.label}` }) }, variant.id))
         ] }) }) : null,
         ordinaryActions.length ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PaletteRows, { title: "Actions", items: [], extra: ordinaryActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", className: "matrx-alchemy-palette-row", "aria-label": action.ariaLabel, onClick: () => {
           closePalette();
@@ -2724,137 +2764,138 @@ function PreparationWorkspace({ restoreFocus, open, state, scopes, onClose, onCh
         state.snapshot.label
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DialogDescription, { children: [
-        "Captured ",
-        state.snapshot.unsavedChanges ? "from your unsaved draft" : "as an immutable snapshot",
-        ". Your source is never edited."
+        state.snapshot.unsavedChanges ? "Includes your unsaved changes. " : "",
+        "Review and edit this copy. Your original stays unchanged."
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "matrx-alchemy-workspace-grid", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("section", { className: "matrx-alchemy-main", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "matrx-alchemy-toolbar", children: [
-          scopes.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { children: [
-            "Scope",
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("select", { "aria-label": "Transfer scope", value: state.scope, disabled: busy !== null, onChange: (e) => void requestCapture(e.target.value), children: scopes.map((scope) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: scope, children: SCOPE_LABEL[scope] }, scope)) })
-          ] }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { children: [
-            "Detail",
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("select", { "aria-label": "Detail preset", value: controls.preset, onChange: (e) => changeControls({ ...controls, preset: e.target.value }), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: "full", children: "Full" }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: "compact", children: "Compact" }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: "brief", children: "Brief" }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: "custom", children: "Custom" })
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { type: "button", size: "sm", variant: "outline", disabled: !state.draft.history?.length && !controlsHistory.length || busy !== null, onClick: () => {
-            setBufferError(null);
-            if (controlsHistory.length) {
-              const next = controlsHistory[controlsHistory.length - 1];
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "matrx-alchemy-workspace-body", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "matrx-alchemy-workspace-grid", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("section", { className: "matrx-alchemy-main", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "matrx-alchemy-toolbar", children: [
+            scopes.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { children: [
+              "Scope",
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("select", { "aria-label": "Transfer scope", value: state.scope, disabled: busy !== null, onChange: (e) => void requestCapture(e.target.value), children: scopes.map((scope) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: scope, children: SCOPE_LABEL[scope] }, scope)) })
+            ] }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { children: [
+              "Detail",
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("select", { "aria-label": "Detail preset", value: controls.preset, onChange: (e) => changeControls({ ...controls, preset: e.target.value }), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: "full", children: "Full" }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: "compact", children: "Compact" }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: "brief", children: "Brief" }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: "custom", children: "Custom" })
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { type: "button", size: "sm", variant: "outline", className: "matrx-alchemy-workspace-secondary", disabled: !state.draft.history?.length && !controlsHistory.length || busy !== null, onClick: () => {
+              setBufferError(null);
+              if (controlsHistory.length) {
+                const next = controlsHistory[controlsHistory.length - 1];
+                setControls(next);
+                setControlsHistory((history) => history.slice(0, -1));
+                onChange({ ...state, draft: rebuild(state, next), error: void 0 });
+              } else onChange({ ...state, draft: (0, import_content_transfer.undoDraft)(state.draft), error: void 0 });
+            }, children: "Undo" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { type: "button", size: "sm", variant: "outline", className: "matrx-alchemy-workspace-secondary", disabled: busy !== null, onClick: () => {
+              const next = initialControls(state);
               setControls(next);
-              setControlsHistory((history) => history.slice(0, -1));
+              setControlsHistory([]);
+              setPendingControls(null);
+              setBufferError(null);
               onChange({ ...state, draft: rebuild(state, next), error: void 0 });
-            } else onChange({ ...state, draft: (0, import_content_transfer.undoDraft)(state.draft), error: void 0 });
-          }, children: "Undo" }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { type: "button", size: "sm", variant: "outline", disabled: busy !== null, onClick: () => {
-            const next = initialControls(state);
-            setControls(next);
-            setControlsHistory([]);
-            setPendingControls(null);
-            setBufferError(null);
-            onChange({ ...state, draft: rebuild(state, next), error: void 0 });
-          }, children: "Reset" }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { type: "button", size: "sm", variant: "outline", disabled: busy !== null, onClick: () => void requestCapture(state.scope), children: "Refresh source" })
-        ] }),
-        controls.preset === "custom" && (state.draft.payload.kind === "json" || state.draft.payload.kind === "registered") ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("fieldset", { className: "matrx-alchemy-options", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("legend", { children: "JSON limits" }),
-          [["maxDepth", "Maximum depth"], ["maxStringChars", "Maximum string characters"], ["maxArrayItems", "Maximum array items"]].map(([key, text]) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { children: [
-            text,
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { type: "number", min: "0", value: controls[key] ?? "", onChange: (e) => changeControls({ ...controls, [key]: Number.isNaN(e.target.valueAsNumber) ? null : e.target.valueAsNumber }) })
-          ] }, key))
-        ] }) : null,
-        rows ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RowControls, { rows, controls, change: changeControls }) : null,
-        state.snapshot.sections.length ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("fieldset", { className: "matrx-alchemy-options", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("legend", { children: "Sections" }),
-          state.snapshot.sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { type: "checkbox", checked: controls.sections.includes(section.id), onChange: (e) => changeControls({ ...controls, sections: e.target.checked ? [...controls.sections, section.id] : controls.sections.filter((id) => id !== section.id) }) }),
-            " ",
-            section.label
-          ] }, section.id))
-        ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "matrx-alchemy-coverage", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { children: [
-            state.snapshot.coverage.included.toLocaleString(),
-            " included",
-            state.snapshot.coverage.total == null ? "" : ` of ${state.snapshot.coverage.total.toLocaleString()}`,
-            " \xB7 ",
-            state.snapshot.coverage.status
+            }, children: "Reset" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { type: "button", size: "sm", variant: "outline", className: "matrx-alchemy-workspace-secondary", disabled: busy !== null, onClick: () => void requestCapture(state.scope), children: "Refresh source" })
           ] }),
-          state.snapshot.coverage.reason ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: state.snapshot.coverage.reason }) : null,
-          limitText ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { children: [
-            "Limits: ",
-            limitText
+          controls.preset === "custom" && (state.draft.payload.kind === "json" || state.draft.payload.kind === "registered") ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("fieldset", { className: "matrx-alchemy-options", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("legend", { children: "JSON limits" }),
+            [["maxDepth", "Maximum depth"], ["maxStringChars", "Maximum string characters"], ["maxArrayItems", "Maximum array items"]].map(([key, text]) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { children: [
+              text,
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { type: "number", min: "0", value: controls[key] ?? "", onChange: (e) => changeControls({ ...controls, [key]: Number.isNaN(e.target.valueAsNumber) ? null : e.target.valueAsNumber }) })
+            ] }, key))
+          ] }) : null,
+          rows ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RowControls, { rows, controls, change: changeControls }) : null,
+          state.snapshot.sections.length ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("fieldset", { className: "matrx-alchemy-options", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("legend", { children: "Sections" }),
+            state.snapshot.sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { type: "checkbox", checked: controls.sections.includes(section.id), onChange: (e) => changeControls({ ...controls, sections: e.target.checked ? [...controls.sections, section.id] : controls.sections.filter((id) => id !== section.id) }) }),
+              " ",
+              section.label
+            ] }, section.id))
           ] }) : null,
-          displayedOmissions.length ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("details", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("summary", { children: [
-              displayedOmissions.length,
-              " omissions or adjustments"
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "matrx-alchemy-coverage", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { children: [
+              state.snapshot.coverage.included.toLocaleString(),
+              " included",
+              state.snapshot.coverage.total == null ? "" : ` of ${state.snapshot.coverage.total.toLocaleString()}`,
+              " \xB7 ",
+              state.snapshot.coverage.status
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("ul", { children: displayedOmissions.map((o, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("li", { children: [
-              o.path || "/",
-              ": ",
-              o.reason,
-              o.count == null ? "" : ` (${o.count})`
-            ] }, `${o.path}-${o.reason}-${i}`)) })
-          ] }) : null
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: "matrx-alchemy-preview-label", children: [
-          "Output format",
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("select", { "aria-label": "Output format", value: format, onChange: (e) => setFormat(e.target.value), children: [
-            formats.map((f) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: f, children: LABEL[f] }, f)),
-            state.draft.payload.kind === "rows" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: "xlsx", children: "Excel workbook" }) : null,
-            workspaceAdapters.map((adapter) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: adapter.id, children: adapter.label }, adapter.id))
-          ] })
+            state.snapshot.coverage.reason ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: state.snapshot.coverage.reason }) : null,
+            limitText ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { children: [
+              "Limits: ",
+              limitText
+            ] }) : null,
+            displayedOmissions.length ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("details", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("summary", { children: [
+                displayedOmissions.length,
+                " omissions or adjustments"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("ul", { children: displayedOmissions.map((o, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("li", { children: [
+                o.path || "/",
+                ": ",
+                o.reason,
+                o.count == null ? "" : ` (${o.count})`
+              ] }, `${o.path}-${o.reason}-${i}`)) })
+            ] }) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: "matrx-alchemy-preview-label", children: [
+            "Output format",
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("select", { "aria-label": "Output format", value: format, onChange: (e) => setFormat(e.target.value), children: [
+              formats.map((f) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: f, children: LABEL[f] }, f)),
+              state.draft.payload.kind === "rows" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: "xlsx", children: "Excel workbook" }) : null,
+              workspaceAdapters.map((adapter) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: adapter.id, children: adapter.label }, adapter.id))
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("textarea", { className: "matrx-alchemy-preview", "aria-label": "Prepared output", "aria-invalid": bufferError ? true : void 0, "aria-describedby": bufferError ? "alchemy-buffer-error" : void 0, value: buffer, onChange: (e) => editBuffer(e.target.value) }),
+          bufferError ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { id: "alchemy-buffer-error", role: "alert", className: "matrx-alchemy-error", children: bufferError }) : null,
+          formatError ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { role: "alert", className: "matrx-alchemy-error", children: formatError }) : null,
+          bufferError ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { className: "matrx-alchemy-workspace-secondary", type: "button", variant: "outline", disabled: busy !== null, onClick: () => {
+            const fallback = (0, import_content_transfer.editDraft)(state.draft, { kind: "text", text: buffer });
+            setBufferError(null);
+            onChange({ ...state, draft: fallback, error: void 0 });
+            setFormat("plain");
+          }, children: "Use invalid JSON as plain text" }) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("textarea", { className: "matrx-alchemy-preview", "aria-label": "Prepared output", "aria-invalid": bufferError ? true : void 0, "aria-describedby": bufferError ? "alchemy-buffer-error" : void 0, value: buffer, onChange: (e) => editBuffer(e.target.value) }),
-        bufferError ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { id: "alchemy-buffer-error", role: "alert", className: "matrx-alchemy-error", children: bufferError }) : null,
-        formatError ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { role: "alert", className: "matrx-alchemy-error", children: formatError }) : null,
-        bufferError ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { type: "button", variant: "outline", disabled: busy !== null, onClick: () => {
-          const fallback = (0, import_content_transfer.editDraft)(state.draft, { kind: "text", text: buffer });
-          setBufferError(null);
-          onChange({ ...state, draft: fallback, error: void 0 });
-          setFormat("plain");
-        }, children: "Use invalid JSON as plain text" }) : null
+        ai || busy === "capture" || state.error ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("aside", { children: [
+          ai ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { children: [
+              "AI instruction",
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("textarea", { value: instruction, onChange: (e) => setInstruction(e.target.value), placeholder: "Tell AI how to prepare this content" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { className: "matrx-alchemy-workspace-secondary", type: "button", variant: "outline", disabled: !aiSession.current || !instruction.trim() || busy !== null || !aiSession.current.supports(state.snapshot), onClick: () => void runAi(false), children: "Generate preview" }),
+            busy === "ai" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { className: "matrx-alchemy-workspace-secondary", type: "button", variant: "outline", onClick: () => void cancelAi(), children: aiSession.current?.cancel ? "Cancel AI" : "Stop waiting" }) : null
+          ] }) : null,
+          busy === "capture" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { className: "matrx-alchemy-workspace-secondary", type: "button", variant: "outline", onClick: () => {
+            activeCapture.current?.abort();
+            activeCapture.current = null;
+            setBusy(null);
+          }, children: "Stop loading rows" }) : null,
+          ai && aiFailed && aiSession.current?.recover && busy !== "ai" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { className: "matrx-alchemy-workspace-secondary", type: "button", variant: "outline", onClick: () => void runAi(true), children: aiFailed ? "Retry or rejoin AI run" : "Rejoin AI run" }) : null,
+          ai ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "matrx-alchemy-meta", children: "AI updates the preview; copy it when you are ready. Closing this window lets the AI run continue." }) : null,
+          state.error ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { role: "alert", className: "matrx-alchemy-error", children: state.error }) : null
+        ] }) : null
       ] }),
-      ai || busy === "capture" || state.error ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("aside", { children: [
-        ai ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { children: [
-            "AI instruction",
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("textarea", { value: instruction, onChange: (e) => setInstruction(e.target.value), placeholder: "Tell AI how to prepare this content" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { type: "button", variant: "outline", disabled: !aiSession.current || !instruction.trim() || busy !== null || !aiSession.current.supports(state.snapshot), onClick: () => void runAi(false), children: "Generate preview" }),
-          busy === "ai" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { type: "button", variant: "outline", onClick: () => void cancelAi(), children: aiSession.current?.cancel ? "Cancel AI" : "Stop waiting" }) : null
-        ] }) : null,
-        busy === "capture" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { type: "button", variant: "outline", onClick: () => {
-          activeCapture.current?.abort();
-          activeCapture.current = null;
-          setBusy(null);
-        }, children: "Stop loading rows" }) : null,
-        ai && aiFailed && aiSession.current?.recover && busy !== "ai" ? /* @__PURE__ */ (0, import_jsx_runtime21.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_runtime21.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_runtime21.jsx)("p", { role: "alert", className: "matrx-alchemy-error", children: state.error }) : null
-      ] }) : null
+      pendingControls ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "matrx-alchemy-decision", role: "alert", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { children: "This control would replace your manual edit." }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { className: "matrx-alchemy-workspace-secondary", type: "button", variant: "outline", onClick: () => setPendingControls(null), children: "Keep edited draft" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { className: "matrx-alchemy-workspace-primary", type: "button", onClick: applyPendingControls, children: "Rebuild from source" })
+      ] }) : null,
+      state.sourceStale ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { role: "alert", className: "matrx-alchemy-decision", children: "The source changed since this draft. Use Refresh source to review the latest data." }) : null,
+      state.pending ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "matrx-alchemy-decision", role: "alert", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { children: "A fresh source snapshot is ready." }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { className: "matrx-alchemy-workspace-secondary", type: "button", variant: "outline", onClick: () => resolveCapture("keep"), children: "Keep current snapshot and draft" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { className: "matrx-alchemy-workspace-primary", type: "button", onClick: () => resolveCapture("regenerate"), children: "Regenerate from fresh source" })
+      ] }) : null,
+      deliveryNotice ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { role: "status", className: "matrx-alchemy-meta", children: deliveryNotice }) : null
     ] }),
-    pendingControls ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "matrx-alchemy-decision", role: "alert", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { children: "This control would replace your manual edit." }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { type: "button", variant: "outline", onClick: () => setPendingControls(null), children: "Keep edited draft" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { type: "button", onClick: applyPendingControls, children: "Rebuild from source" })
-    ] }) : null,
-    state.sourceStale ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { role: "alert", className: "matrx-alchemy-decision", children: "The source changed since this draft. Use Refresh source to review the latest data." }) : null,
-    state.pending ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "matrx-alchemy-decision", role: "alert", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { children: "A fresh source snapshot is ready." }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { type: "button", variant: "outline", onClick: () => resolveCapture("keep"), children: "Keep current snapshot and draft" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { type: "button", onClick: () => resolveCapture("regenerate"), children: "Regenerate from fresh source" })
-    ] }) : null,
-    deliveryNotice ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { role: "status", className: "matrx-alchemy-meta", children: deliveryNotice }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DialogFooter, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "matrx-alchemy-meta", children: [
         buffer.length.toLocaleString(),
@@ -2862,13 +2903,16 @@ function PreparationWorkspace({ restoreFocus, open, state, scopes, onClose, onCh
         estimateTokens(buffer).toLocaleString(),
         " tokens"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { type: "button", variant: "outline", onClick: close, children: "Close" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { type: "button", variant: "outline", disabled: busy !== null || Boolean(bufferError || formatError) || !preparedArtifact, onClick: () => void deliver(true), children: "Download prepared output" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { type: "button", disabled: busy !== null || Boolean(bufferError || formatError) || !preparedArtifact, onClick: () => void deliver(false), children: "Copy prepared output" })
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { type: "button", variant: "outline", className: "matrx-alchemy-workspace-secondary", onClick: close, children: "Close" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { type: "button", variant: "outline", className: "matrx-alchemy-workspace-secondary", "aria-label": "Download prepared output", disabled: busy !== null || Boolean(bufferError || formatError) || !preparedArtifact, onClick: () => void deliver(true), children: "Download" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { type: "button", className: "matrx-alchemy-workspace-primary", "aria-label": "Copy prepared output", disabled: busy !== null || Boolean(bufferError || formatError) || !preparedArtifact, onClick: () => void deliver(false), children: "Copy" })
     ] })
   ] }) });
 }
 function RowControls({ rows, controls, change }) {
+  const filterCount = Object.values(controls.filters).filter(Boolean).length;
+  const selectionSummary = controls.selectedOnly ? `${controls.selectedIndices.length} selected row${controls.selectedIndices.length === 1 ? "" : "s"}` : "All rows";
+  const dataSummary = [controls.search ? "search active" : "", controls.sort ? `sorted by ${rows.columns.find((column) => column.id === controls.sort)?.label ?? controls.sort}` : "", filterCount ? `${filterCount} filter${filterCount === 1 ? "" : "s"}` : ""].filter(Boolean).join(" \xB7 ");
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "matrx-alchemy-toolbar", children: [
       /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { children: [
@@ -2894,32 +2938,40 @@ function RowControls({ rows, controls, change }) {
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { type: "number", min: "0", value: controls.top ?? "", onChange: (e) => change({ ...controls, top: Number.isNaN(e.target.valueAsNumber) ? null : e.target.valueAsNumber }) })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("fieldset", { className: "matrx-alchemy-options", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("legend", { children: "Columns and filters" }),
-      rows.columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "matrx-alchemy-column", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("details", { className: "matrx-alchemy-options", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("summary", { children: [
+        "Columns and filters",
+        dataSummary ? ` \u2014 ${dataSummary}` : ""
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("fieldset", { "aria-label": "Columns and filters", children: rows.columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "matrx-alchemy-column", children: [
         /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { children: [
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { type: "checkbox", checked: controls.visibleColumns.includes(column.id), onChange: (e) => change({ ...controls, visibleColumns: e.target.checked ? [...controls.visibleColumns, column.id] : controls.visibleColumns.filter((id) => id !== column.id) }) }),
           " ",
           column.label
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { "aria-label": `Filter ${column.label}`, placeholder: "Filter", value: controls.filters[column.id] ?? "", onChange: (e) => change({ ...controls, filters: { ...controls.filters, [column.id]: e.target.value } }) })
-      ] }, column.id))
+      ] }, column.id)) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("fieldset", { className: "matrx-alchemy-options", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("legend", { children: "Rows" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { type: "checkbox", checked: controls.selectedOnly, onChange: (e) => change({ ...controls, selectedOnly: e.target.checked }) }),
-        " Only selected rows"
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("details", { className: "matrx-alchemy-options", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("summary", { children: [
+        "Rows \u2014 ",
+        selectionSummary
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "matrx-alchemy-row-list", children: rows.rows.map((row, index) => {
-        const summary = rows.columns.filter((column) => column.visible).slice(0, 2).map((column) => String((0, import_content_transfer.readTransferCell)(row, column) ?? "")).filter(Boolean).join(" \xB7 ");
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { type: "checkbox", checked: controls.selectedIndices.includes(index), onChange: (e) => change({ ...controls, selectedIndices: e.target.checked ? [...controls.selectedIndices, index] : controls.selectedIndices.filter((value) => value !== index) }) }),
-          " Row ",
-          index + 1,
-          summary ? ` \u2014 ${summary}` : ""
-        ] }, index);
-      }) })
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("fieldset", { "aria-label": "Row selection", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { type: "checkbox", checked: controls.selectedOnly, onChange: (e) => change({ ...controls, selectedOnly: e.target.checked }) }),
+          " Only selected rows"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "matrx-alchemy-row-list", children: rows.rows.map((row, index) => {
+          const summary = rows.columns.filter((column) => column.visible).slice(0, 2).map((column) => String((0, import_content_transfer.readTransferCell)(row, column) ?? "")).filter(Boolean).join(" \xB7 ");
+          return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { type: "checkbox", checked: controls.selectedIndices.includes(index), onChange: (e) => change({ ...controls, selectedIndices: e.target.checked ? [...controls.selectedIndices, index] : controls.selectedIndices.filter((value) => value !== index) }) }),
+            " Row ",
+            index + 1,
+            summary ? ` \u2014 ${summary}` : ""
+          ] }, index);
+        }) })
+      ] })
     ] })
   ] });
 }
@@ -3071,7 +3123,7 @@ function MatrxCopyMenuSession(props) {
   if (aiVisible && props.aiCustom)
     actions.push({
       id: "configure-source",
-      label: props.aiCustom.label ?? "Customize source\u2026",
+      label: props.aiCustom.label ?? "Customize source",
       ...props.aiCustom.hint ? { hint: props.aiCustom.hint } : {},
       supports: () => true,
       run: async () => {
@@ -3082,7 +3134,7 @@ function MatrxCopyMenuSession(props) {
   if (aiVisible && props.groomer)
     actions.push({
       id: "groom-source",
-      label: "Customize sections\u2026",
+      label: "Customize sections",
       supports: () => true,
       run: async () => {
         setConfiguration({ groomer: props.groomer() });
@@ -3192,7 +3244,8 @@ function MatrxCopyMenuSession(props) {
         className: cn(
           props.className,
           props.size === "xs" && "matrx-alchemy-xs",
-          props.size === "sm" && "matrx-alchemy-sm"
+          props.size === "sm" && "matrx-alchemy-sm",
+          props.size === "toolbar" && "matrx-alchemy-toolbar-target"
         ),
         ...props.stopPropagation !== void 0 ? { stopPropagation: props.stopPropagation } : {}
       }
@@ -3297,127 +3350,132 @@ function SourceConfiguration({
             event.preventDefault();
             if (!handingOff.current) restoreFocus();
           },
-          className: "matrx-alchemy-workspace",
+          className: "matrx-alchemy-workspace matrx-alchemy-configuration",
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(DialogHeader, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DialogTitle, { children: title }),
               /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DialogDescription, { children: custom?.dialogDescription ?? "Choose the source detail, then prepare, edit, summarize, copy or export it in Alchemy." })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "matrx-alchemy-main matrx-alchemy-toolbar", children: [
-              custom?.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { children: [
-                option.label,
-                "hint" in option && option.hint ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("small", { children: option.hint }) : null,
-                option.kind === "toggle" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                  "input",
-                  {
-                    type: "checkbox",
-                    checked: Boolean(values[option.key]),
-                    onChange: (event) => setValues({ ...values, [option.key]: event.target.checked })
-                  }
-                ) : option.kind === "preset" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                  "select",
-                  {
-                    value: Number(values[option.key]),
-                    onChange: (event) => setValues({
-                      ...values,
-                      [option.key]: Number(event.target.value)
-                    }),
-                    children: option.options.map((choice) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("option", { value: choice.value, children: choice.label }, choice.value))
-                  }
-                ) : option.kind === "slider" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "matrx-alchemy-workspace-body", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "matrx-alchemy-main matrx-alchemy-toolbar", children: [
+                custom?.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { children: [
+                  option.label,
+                  "hint" in option && option.hint ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("small", { children: option.hint }) : null,
+                  option.kind === "toggle" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                     "input",
                     {
-                      type: "range",
-                      min: 0,
-                      max: Math.max(0, option.stops.length - 1),
-                      step: 1,
-                      value: option.stops.indexOf(Number(values[option.key])),
-                      onChange: (event) => setValues({
-                        ...values,
-                        [option.key]: option.stops[Number(event.target.value)]
-                      })
+                      type: "checkbox",
+                      checked: Boolean(values[option.key]),
+                      onChange: (event) => setValues({ ...values, [option.key]: event.target.checked })
                     }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: option.formatValue(Number(values[option.key])) })
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                    "input",
+                  ) : option.kind === "preset" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    "select",
                     {
-                      type: "number",
-                      min: option.min,
-                      step: option.step,
                       value: Number(values[option.key]),
                       onChange: (event) => setValues({
                         ...values,
                         [option.key]: Number(event.target.value)
-                      })
+                      }),
+                      children: option.options.map((choice) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("option", { value: choice.value, children: choice.label }, choice.value))
                     }
-                  ),
-                  option.presets?.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                  ) : option.kind === "slider" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                      "input",
+                      {
+                        type: "range",
+                        min: 0,
+                        max: Math.max(0, option.stops.length - 1),
+                        step: 1,
+                        value: option.stops.indexOf(Number(values[option.key])),
+                        onChange: (event) => setValues({
+                          ...values,
+                          [option.key]: option.stops[Number(event.target.value)]
+                        })
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: option.formatValue(Number(values[option.key])) })
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                      "input",
+                      {
+                        type: "number",
+                        min: option.min,
+                        step: option.step,
+                        value: Number(values[option.key]),
+                        onChange: (event) => setValues({
+                          ...values,
+                          [option.key]: Number(event.target.value)
+                        })
+                      }
+                    ),
+                    option.presets?.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                      Button,
+                      {
+                        type: "button",
+                        variant: "ghost",
+                        className: "matrx-alchemy-workspace-secondary",
+                        onClick: () => setValues({ ...values, [option.key]: preset.value }),
+                        children: preset.label
+                      },
+                      preset.value
+                    ))
+                  ] })
+                ] }, option.key)),
+                groomer ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: ["full", "compact", "brief"].map((level) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                     Button,
                     {
                       type: "button",
                       variant: "ghost",
-                      onClick: () => setValues({ ...values, [option.key]: preset.value }),
-                      children: preset.label
+                      className: "matrx-alchemy-workspace-secondary",
+                      onClick: () => setSections(
+                        Object.fromEntries(
+                          groomer.sections.map((section) => [
+                            section.id,
+                            level === "brief" && section.cuttable ? "off" : level
+                          ])
+                        )
+                      ),
+                      children: level
                     },
-                    preset.value
-                  ))
-                ] })
-              ] }, option.key)),
-              groomer ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: ["full", "compact", "brief"].map((level) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                  Button,
-                  {
-                    type: "button",
-                    variant: "ghost",
-                    onClick: () => setSections(
-                      Object.fromEntries(
-                        groomer.sections.map((section) => [
-                          section.id,
-                          level === "brief" && section.cuttable ? "off" : level
-                        ])
-                      )
+                    level
+                  )) }),
+                  groomer.sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { children: [
+                    section.title,
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+                      "select",
+                      {
+                        value: sections[section.id],
+                        onChange: (event) => setSections({
+                          ...sections,
+                          [section.id]: event.target.value
+                        }),
+                        children: [
+                          ["full", "compact", "brief"].map((level) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("option", { value: level, children: section.levelLabels?.[level] ?? level }, level)),
+                          section.cuttable ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("option", { value: "off", children: "Exclude" }) : null
+                        ]
+                      }
                     ),
-                    children: level
-                  },
-                  level
-                )) }),
-                groomer.sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { children: [
-                  section.title,
-                  /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
-                    "select",
-                    {
-                      value: sections[section.id],
-                      onChange: (event) => setSections({
-                        ...sections,
-                        [section.id]: event.target.value
-                      }),
-                      children: [
-                        ["full", "compact", "brief"].map((level) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("option", { value: level, children: section.levelLabels?.[level] ?? level }, level)),
-                        section.cuttable ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("option", { value: "off", children: "Exclude" }) : null
-                      ]
-                    }
-                  ),
-                  section.description ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: section.description }) : null
-                ] }, section.id))
-              ] }) : null
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { children: [
-              text.length.toLocaleString(),
-              " characters \xB7 approximately",
-              " ",
-              Math.ceil(text.length / 4).toLocaleString(),
-              " tokens"
+                    section.description ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: section.description }) : null
+                  ] }, section.id))
+                ] }) : null
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { children: [
+                text.length.toLocaleString(),
+                " characters \xB7 approximately",
+                " ",
+                Math.ceil(text.length / 4).toLocaleString(),
+                " tokens"
+              ] }),
+              error || buildError ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { role: "alert", children: error ?? buildError }) : null
             ] }),
-            error || buildError ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { role: "alert", children: error ?? buildError }) : null,
             /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(DialogFooter, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                 Button,
                 {
                   type: "button",
                   variant: "ghost",
+                  className: "matrx-alchemy-workspace-secondary",
                   disabled: busy,
                   onClick: onClose,
                   children: "Cancel"
@@ -3427,6 +3485,7 @@ function SourceConfiguration({
                 Button,
                 {
                   type: "button",
+                  className: "matrx-alchemy-workspace-primary",
                   disabled: busy || !prepared || Boolean(buildError),
                   onClick: async () => {
                     if (!prepared) return;
@@ -4041,7 +4100,7 @@ function CopySubsetDialog({ source, onClose }) {
   ] }) });
 }
 function useCopySubsetVariant() {
-  return (getSource) => ({ id: "copy-subset", label: "Filter & sort before copying\u2026", section: "ai", modal: ({ open, onOpenChange }) => open ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CopySubsetDialog, { source: getSource(), onClose: () => onOpenChange(false) }) : null });
+  return (getSource) => ({ id: "copy-subset", label: "Filter & sort before copying", section: "ai", modal: ({ open, onOpenChange }) => open ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CopySubsetDialog, { source: getSource(), onClose: () => onOpenChange(false) }) : null });
 }
 
 // src/data-table/clipping.ts
@@ -6745,6 +6804,23 @@ function safeQueryPage(requestedPage, totalItems, pageSize) {
 
 // src/data-table/MatrxDataTable.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
+function TableToolbarAction({
+  HostAction,
+  ariaLabel,
+  tooltip,
+  disabled,
+  busy,
+  onClick,
+  children
+}) {
+  if (HostAction) {
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(HostAction, { ariaLabel, tooltip, disabled, busy, onClick, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Button, { type: "button", variant: "ghost", size: "icon", className: "h-8 w-8", "aria-label": ariaLabel, "aria-busy": busy || void 0, disabled, onClick, children: (0, import_react13.isValidElement)(children) ? (0, import_react13.cloneElement)(children, { className: cn("h-4 w-4", children.props.className) }) : children }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipContent, { children: tooltip ?? ariaLabel })
+  ] });
+}
 function hasSameRowReferences(previous, next) {
   return previous.length === next.length && previous.every((row, index) => row === next[index]);
 }
@@ -8182,29 +8258,21 @@ function MatrxDataTableCore({
                               ]
                             }
                           ) : null,
-                          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Tooltip, { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-                              Button,
-                              {
-                                type: "button",
-                                variant: "ghost",
-                                size: "sm",
-                                className: "h-7 gap-1 px-2 text-xs text-muted-foreground",
-                                onClick: clearAllFilters,
-                                disabled: !hasActiveFilters,
-                                "aria-label": "Clear all filters",
-                                children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Eraser, { className: "h-3.5 w-3.5" }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "max-sm:sr-only", children: "Clear all" })
-                                ]
-                              }
-                            ) }) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipContent, { children: hasActiveFilters ? "Clear search and filters; keep columns and sort" : "No search or filters to clear" })
-                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                            TableToolbarAction,
+                            {
+                              HostAction: host.ToolbarAction,
+                              ariaLabel: "Clear all filters",
+                              tooltip: hasActiveFilters ? "Clear search and filters; keep columns and sort" : "No search or filters to clear",
+                              disabled: !hasActiveFilters,
+                              onClick: clearAllFilters,
+                              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Eraser, {})
+                            }
+                          ),
                           showToolbarCopy && effectiveCopy ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                             CopyButtons,
                             {
-                              size: "icon",
+                              size: "toolbar",
                               sourceId: `${tableCopySourceNamespace}:view`,
                               label: effectiveCopy.listLabel ?? `${effectiveCopy.label} view`,
                               ...copy === void 0 ? {} : {
@@ -8241,92 +8309,66 @@ function MatrxDataTableCore({
                               }
                             }
                           ) : null,
-                          columns.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Tooltip, { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-                              Button,
-                              {
-                                type: "button",
-                                variant: "ghost",
-                                size: "icon",
-                                "aria-label": "Columns",
-                                className: "h-8 w-8",
-                                onClick: () => setColumnManagerOpen(true),
-                                children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SlidersHorizontal, { className: "h-4 w-4" }),
-                                  effectiveHiddenColumnIds.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "sr-only", children: [
-                                    effectiveHiddenColumnIds.size,
-                                    " hidden"
-                                  ] }) : null
-                                ]
-                              }
-                            ) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipContent, { children: "Show, hide, or reorder columns" })
-                          ] }) : null,
-                          toolbar?.refresh ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Tooltip, { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-                              Button,
-                              {
-                                type: "button",
-                                variant: "ghost",
-                                size: "icon",
-                                className: "h-8 w-8",
-                                "aria-label": toolbar.refresh.label ?? "Refresh",
-                                disabled: isFetching || toolbarActionPending.refresh,
-                                onClick: () => {
-                                  if (toolbarActionPendingRef.current.refresh) return;
-                                  toolbarActionPendingRef.current.refresh = true;
-                                  setToolbarActionPending((current) => ({ ...current, refresh: true }));
-                                  setToolbarActionError(null);
-                                  void Promise.resolve().then(() => toolbar.refresh?.onRefresh()).catch((cause) => {
-                                    const message = cause instanceof Error ? cause.message : String(cause);
-                                    setToolbarActionError(`Refresh failed: ${message}`);
-                                    toast.error(`Refresh failed: ${message}`);
-                                  }).finally(() => {
-                                    toolbarActionPendingRef.current.refresh = false;
-                                    setToolbarActionPending((current) => ({ ...current, refresh: false }));
-                                  });
-                                },
-                                children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-                                  Loader2,
-                                  {
-                                    className: cn(
-                                      "h-4 w-4",
-                                      (isFetching || toolbarActionPending.refresh) && "animate-spin"
-                                    )
-                                  }
-                                )
-                              }
-                            ) }) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipContent, { children: isFetching ? "Refreshing table data" : toolbar.refresh.label ?? "Refresh" })
-                          ] }) : null,
-                          toolbar?.add ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Tooltip, { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-                              Button,
-                              {
-                                type: "button",
-                                size: "icon",
-                                className: "h-8 w-8",
-                                "aria-label": "Add",
-                                disabled: toolbar.add.disabled || toolbarActionPending.add,
-                                onClick: () => {
-                                  if (toolbarActionPendingRef.current.add) return;
-                                  toolbarActionPendingRef.current.add = true;
-                                  setToolbarActionPending((current) => ({ ...current, add: true }));
-                                  setToolbarActionError(null);
-                                  void Promise.resolve().then(() => toolbar.add?.onAdd()).catch((cause) => {
-                                    const message = cause instanceof Error ? cause.message : String(cause);
-                                    setToolbarActionError(`Add failed: ${message}`);
-                                    toast.error(`Add failed: ${message}`);
-                                  }).finally(() => {
-                                    toolbarActionPendingRef.current.add = false;
-                                    setToolbarActionPending((current) => ({ ...current, add: false }));
-                                  });
-                                },
-                                children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Plus, { className: "h-4 w-4" })
-                              }
-                            ) }) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipContent, { children: toolbar.add.disabled ? toolbar.add.disabledReason ?? "Add unavailable" : "Add" })
-                          ] }) : null,
+                          columns.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                            TableToolbarAction,
+                            {
+                              HostAction: host.ToolbarAction,
+                              ariaLabel: "Columns",
+                              tooltip: "Show, hide, or reorder columns",
+                              onClick: () => setColumnManagerOpen(true),
+                              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SlidersHorizontal, {})
+                            }
+                          ) : null,
+                          toolbar?.refresh ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                            TableToolbarAction,
+                            {
+                              HostAction: host.ToolbarAction,
+                              ariaLabel: toolbar.refresh.label ?? "Refresh",
+                              tooltip: isFetching ? "Refreshing table data" : toolbar.refresh.label ?? "Refresh",
+                              disabled: isFetching || toolbarActionPending.refresh,
+                              busy: isFetching || toolbarActionPending.refresh,
+                              onClick: () => {
+                                if (toolbarActionPendingRef.current.refresh) return;
+                                toolbarActionPendingRef.current.refresh = true;
+                                setToolbarActionPending((current) => ({ ...current, refresh: true }));
+                                setToolbarActionError(null);
+                                void Promise.resolve().then(() => toolbar.refresh?.onRefresh()).catch((cause) => {
+                                  const message = cause instanceof Error ? cause.message : String(cause);
+                                  setToolbarActionError(`Refresh failed: ${message}`);
+                                  toast.error(`Refresh failed: ${message}`);
+                                }).finally(() => {
+                                  toolbarActionPendingRef.current.refresh = false;
+                                  setToolbarActionPending((current) => ({ ...current, refresh: false }));
+                                });
+                              },
+                              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RefreshControlIcon, { spinning: isFetching || toolbarActionPending.refresh })
+                            }
+                          ) : null,
+                          toolbar?.add ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                            TableToolbarAction,
+                            {
+                              HostAction: host.ToolbarAction,
+                              ariaLabel: "Add",
+                              tooltip: toolbar.add.disabled ? toolbar.add.disabledReason ?? "Add unavailable" : "Add",
+                              disabled: toolbar.add.disabled || toolbarActionPending.add,
+                              busy: toolbarActionPending.add,
+                              onClick: () => {
+                                if (toolbarActionPendingRef.current.add) return;
+                                toolbarActionPendingRef.current.add = true;
+                                setToolbarActionPending((current) => ({ ...current, add: true }));
+                                setToolbarActionError(null);
+                                void Promise.resolve().then(() => toolbar.add?.onAdd()).catch((cause) => {
+                                  const message = cause instanceof Error ? cause.message : String(cause);
+                                  setToolbarActionError(`Add failed: ${message}`);
+                                  toast.error(`Add failed: ${message}`);
+                                }).finally(() => {
+                                  toolbarActionPendingRef.current.add = false;
+                                  setToolbarActionPending((current) => ({ ...current, add: false }));
+                                });
+                              },
+                              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Plus, {})
+                            }
+                          ) : null,
                           toolbar?.actions
                         ]
                       }
@@ -8449,13 +8491,13 @@ function MatrxDataTableCore({
                             actions: showRowCopy || rowActions ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                               "div",
                               {
-                                className: "inline-flex items-center gap-1",
+                                className: "inline-flex items-center gap-0",
                                 onClick: (event) => event.stopPropagation(),
                                 children: [
                                   showRowCopy && effectiveCopy ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                                     TableRowCopyControl,
                                     {
-                                      size: "xs",
+                                      size: "toolbar",
                                       copy: effectiveCopy,
                                       row: displayRow,
                                       sourceId: `${tableCopySourceNamespace}:row:${getRowId(displayRow)}`,
@@ -8752,13 +8794,13 @@ function MatrxDataTableCore({
                                     showActionsCol && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("td", { className: "px-2 py-1.5 text-right align-middle lg:py-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                                       "div",
                                       {
-                                        className: "inline-flex items-center justify-end gap-0.5",
+                                        className: "inline-flex items-center justify-end gap-0",
                                         onClick: (e) => e.stopPropagation(),
                                         children: [
                                           showRowCopy && effectiveCopy ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                                             TableRowCopyControl,
                                             {
-                                              size: "xs",
+                                              size: "toolbar",
                                               copy: effectiveCopy,
                                               row: displayRow,
                                               sourceId: `${tableCopySourceNamespace}:row:${getRowId(displayRow)}`,
@@ -9595,6 +9637,7 @@ function SavedViewsControl({
   onUpdate,
   onReload
 }) {
+  const unsavedChangesId = (0, import_react14.useId)();
   const [saveOpen, setSaveOpen] = (0, import_react14.useState)(false);
   const [name, setName] = (0, import_react14.useState)("");
   const [saving, setSaving] = (0, import_react14.useState)(false);
@@ -9640,10 +9683,26 @@ function SavedViewsControl({
     }
   };
   const activeName = activeId ? views.find((view) => view.id === activeId)?.name : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-1", "data-matrx-table-saved-views": true, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex min-w-0 flex-wrap items-center gap-1", "data-matrx-table-saved-views": true, children: [
     /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(DropdownMenu, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Tooltip, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { type: "button", variant: "outline", size: "sm", className: "h-8 max-w-40 truncate text-xs", "aria-label": "Saved views", disabled: saving, children: loading ? "Loading views\u2026" : `${activeName ?? "Default view"}${dirty ? " \u2022" : ""}` }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            className: "h-8 min-w-0 max-w-52 gap-1 px-2 text-xs font-medium",
+            "aria-label": `Table view: ${loading ? "Loading views" : activeName ?? "Default view"}${dirty ? ", unsaved changes" : ""}`,
+            "aria-describedby": dirty ? unsavedChangesId : void 0,
+            disabled: saving,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "min-w-0 flex-1 truncate", children: loading ? "Loading views\u2026" : activeName ?? "Default view" }),
+              dirty ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": "true", className: "size-1.5 shrink-0 rounded-full bg-amber-500" }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ChevronDown, { className: "size-3.5 shrink-0" })
+            ]
+          }
+        ) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TooltipContent, { children: "Choose or save a table view" })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(DropdownMenuContent, { align: "end", children: [
@@ -9661,14 +9720,8 @@ function SavedViewsControl({
         onReload ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DropdownMenuItem, { disabled: saving || loading, onSelect: () => void reload(), children: "Reload views" }) : null
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { type: "button", variant: "ghost", size: "icon", className: "h-8 w-8", "aria-label": "Save current view", disabled: saving, onClick: () => {
-        setActionError(null);
-        setSaveOpen(true);
-      }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Save, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TooltipContent, { children: "Save current view" })
-    ] }),
-    visibleError ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { role: "alert", className: "basis-full text-xs text-destructive", children: visibleError }) : null,
+    dirty ? /* @__PURE__ */ (0, import_jsx_runtime37.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_runtime37.jsx)("p", { role: "alert", className: "basis-full break-words text-xs text-destructive", children: visibleError }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Dialog, { open: saveOpen, onOpenChange: setSaveOpen, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(DialogContent, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DialogHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DialogTitle, { children: "Save current view" }) }),
       visibleError ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { role: "alert", className: "text-sm text-destructive", children: visibleError }) : null,