@ai-matrx/design-system 0.18.8 → 0.18.10

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## 0.18.10 — 2026-09-12
+
+Adds the compact Alchemy copy/download format palette and hardens the shared
+data-table toolbar, saved views, mobile editing, drag projection, async error
+handling, and duplicate view validation. Select popups now contain and wrap
+long option labels on narrow viewports instead of clipping them off-screen.
+
+### Consumer action
+
+Update to 0.18.10. No host configuration changes are required.
+
+## 0.18.9 — 2026-09-12
+
+Data tables and mobile-card scrollers now contain horizontal overscroll while
+leaving vertical wheel and touch chaining to the browser. This removes the
+manual wheel reroute that could strand nested page scrolling at a table edge.
+
+### Consumer action
+
+Update to 0.18.9. No host configuration changes are required.
+
 ## 0.18.8 — 2026-09-12
 
 Table and selected-row export menus now use one canonical typed source built

package/dist/content-transfer.cjs

@@ -181,48 +181,6 @@ function XIcon(props) {
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m6 6 12 12" })
   ] });
 }
-function radixProps(props) {
-  return {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 15 15",
-    width: 15,
-    height: 15,
-    fill: "none",
-    "aria-hidden": true,
-    ...props
-  };
-}
-function CheckIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...radixProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "path",
-    {
-      d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
-      fill: "currentColor",
-      fillRule: "evenodd",
-      clipRule: "evenodd"
-    }
-  ) });
-}
-function DotFilledIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...radixProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "path",
-    {
-      d: "M9.875 7.5C9.875 8.81168 8.81168 9.875 7.5 9.875C6.18832 9.875 5.125 8.81168 5.125 7.5C5.125 6.18832 6.18832 5.125 7.5 5.125C8.81168 5.125 9.875 6.18832 9.875 7.5Z",
-      fill: "currentColor"
-    }
-  ) });
-}
-function RadixChevronRightIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...radixProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "path",
-    {
-      d: "M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z",
-      fill: "currentColor",
-      fillRule: "evenodd",
-      clipRule: "evenodd"
-    }
-  ) });
-}
 
 // src/portal-container.tsx
 var React2 = __toESM(require("react"), 1);
@@ -486,132 +444,45 @@ var DialogDescription = React5.forwardRef(({ className, ...props }, ref) => /* @
 ));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
-// src/dropdown-menu.tsx
-var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
+// src/popover.tsx
+var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
 var React6 = __toESM(require("react"), 1);
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var DropdownMenu = DropdownMenuPrimitive.Root;
-var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-var MENU_SURFACE_CLASS = "z-[10001] min-w-[8rem] max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto overflow-x-hidden overscroll-contain rounded-md border bg-popover p-1 text-popover-foreground";
-var MENU_ITEM_CLASS = "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
-var MENU_INDICATOR_ITEM_CLASS = "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
-var DropdownMenuSubTrigger = React6.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-  DropdownMenuPrimitive.SubTrigger,
-  {
-    ref,
-    "data-slot": "dropdown-menu-sub-trigger",
-    className: cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
-      inset && "pl-8",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RadixChevronRightIcon, { className: "ml-auto h-4 w-4" })
-    ]
-  }
-));
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-  DropdownMenuPrimitive.SubContent,
-  {
-    ref,
-    "data-slot": "dropdown-menu-sub-content",
-    className: cn(MENU_SURFACE_CLASS, "shadow-lg", MOTION_POPPER, className),
-    ...props
-  }
-));
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React6.forwardRef(({ className, sideOffset = 4, container, ...props }, ref) => {
-  const portalContainer = usePortalContainer(container);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    DropdownMenuPrimitive.Content,
-    {
-      ref,
-      "data-slot": "dropdown-menu-content",
-      sideOffset,
-      className: cn(
-        MENU_SURFACE_CLASS,
-        "shadow-md",
-        MOTION_POPPER,
-        className
-      ),
-      ...props
-    }
-  ) });
-});
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React6.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-  DropdownMenuPrimitive.Item,
-  {
-    ref,
-    "data-slot": "dropdown-menu-item",
-    className: cn(MENU_ITEM_CLASS, inset && "pl-8", className),
-    ...props
-  }
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-  DropdownMenuPrimitive.CheckboxItem,
-  {
-    ref,
-    "data-slot": "dropdown-menu-checkbox-item",
-    className: cn(MENU_INDICATOR_ITEM_CLASS, className),
-    ...props,
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckIcon, { className: "h-4 w-4" }) }) }),
-      children
-    ]
-  }
-));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-  DropdownMenuPrimitive.RadioItem,
-  {
-    ref,
-    "data-slot": "dropdown-menu-radio-item",
-    className: cn(MENU_INDICATOR_ITEM_CLASS, className),
-    ...props,
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
-      children
-    ]
-  }
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React6.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-  DropdownMenuPrimitive.Label,
-  {
-    ref,
-    "data-slot": "dropdown-menu-label",
-    className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className),
-    ...props
-  }
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-  DropdownMenuPrimitive.Separator,
-  {
-    ref,
-    "data-slot": "dropdown-menu-separator",
-    className: cn("-mx-1 my-1 h-px bg-muted", className),
-    ...props
-  }
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-var DropdownMenuShortcut = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-  "span",
-  {
-    "data-slot": "dropdown-menu-shortcut",
-    className: cn("ml-auto text-xs tracking-widest opacity-60", className),
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverContent = React6.forwardRef(
+  ({
+    className,
+    align = "center",
+    sideOffset = 4,
+    container,
+    animated = true,
     ...props
+  }, ref) => {
+    const portalContainer = usePortalContainer(container);
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PopoverPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      PopoverPrimitive.Content,
+      {
+        ref,
+        align,
+        sideOffset,
+        className: cn(
+          // Cap to the viewport space Radix measured and scroll — a popover taller
+          // than the screen must never trap the user with unreachable content.
+          // z must EQUAL the dialog layer (z-[10000]), never exceed it: with equal
+          // z, DOM portal order decides, so a dialog opened FROM a popover stacks
+          // above it, and a popover opened from a dialog still stacks above the
+          // dialog. z-[10001] buried dialogs behind fullscreen popovers.
+          "z-[10000] w-72 max-h-[var(--radix-popover-content-available-height)] overflow-y-auto overscroll-contain rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+          animated && MOTION_POPPER,
+          className
+        ),
+        ...props
+      }
+    ) });
   }
 );
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 // src/content-transfer/icon.ts
 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"><path d="M4.5 5.5h8v11h-8z"/><path d="M8.5 9.5h8v9h-8z"/><path d="m18.5 3 .65 1.85L21 5.5l-1.85.65L18.5 8l-.65-1.85L16 5.5l1.85-.65z"/></svg>';
@@ -790,6 +661,7 @@ function MatrxCopyMenuSession(props) {
         label: item.label,
         supports: () => true,
         ...item.build && !item.onSelect ? {
+          placement: "download",
           source: make(
             `export:${item.id}`,
             async () => {
@@ -870,10 +742,11 @@ function MatrxCopyMenuSession(props) {
         label: props.label,
         variants,
         actions,
+        sourceFormats: Boolean(source),
         hide: [
           ...!copyVisible || !source ? ["copy"] : [],
           ...!aiVisible || !source ? ["prepare"] : [],
-          ...!exportVisible || !source ? ["download"] : []
+          ...!exportVisible ? ["download"] : []
         ],
         formatSources: {
           ...human ? { plain: human, markdown: humanMarkdown, html: humanMarkdown } : {},
@@ -1232,6 +1105,53 @@ function MenuPresentation({ label, hint, icon: Icon }) {
     ] })
   ] });
 }
+function PaletteGlyph({ format, ai = false, file = false }) {
+  if (ai) return /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.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_runtime8.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" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M12 5v14M8 9h1M15 9h1M8 15h1M15 15h1" })
+  ] });
+  if (file) return /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)("path", { d: "M6 3h8l4 4v14H6z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M14 3v5h5M9 13h6M9 17h6" })
+  ] });
+  const path = format === "json" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M9 4C7 4 7 7 5 7v3c2 0 2 1 2 2s0 2-2 2v3c2 0 2 3 4 3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M15 4c2 0 2 3 4 3v3c-2 0-2 1-2 2s0 2 2 2v3c-2 0-2 3-4 3" })
+  ] }) : format === "compact-json" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "m14 10 7-7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M20 10h-6V4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "m3 21 7-7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M4 14h6v6" })
+  ] }) : format === "csv" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { x: "4", y: "4", width: "16", height: "16", rx: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M4 10h16M10 4v16" })
+  ] }) : format === "tsv" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M14 2v6h6M8 13h2M14 13h2M8 17h2M14 17h2" })
+  ] }) : format === "xlsx" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M14 2v6h6M8 13h8M8 17h8M12 11v8" })
+  ] }) : format === "markdown" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M14 2v6h6M10 13l-2 2 2 2M14 17l2-2-2-2" })
+  ] }) : format === "html" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M15 6h6M3 6h7M3 12h18M3 18h12" }) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M4 7V4h16v3M9 20h6M12 4v16" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.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: path });
+}
+function PaletteRows({ title, items, onRun, extra, ai = false }) {
+  if (!items.length && !extra) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("section", { className: "matrx-alchemy-palette-section", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { children: title }),
+    items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)(item.icon, { className: "matrx-alchemy-menu-icon" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PaletteGlyph, { ai }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
+        item.copyLabel ?? item.label,
+        item.hint ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("small", { className: "matrx-alchemy-menu-hint", children: item.hint }) : null
+      ] })
+    ] }, item.id)),
+    extra
+  ] });
+}
 var LABEL = { plain: "Plain text", markdown: "Markdown", html: "Formatted", json: "JSON", "compact-json": "Compact JSON", csv: "CSV", tsv: "Google Sheets", xlsx: "Excel workbook" };
 var BUILT_INS = Object.freeze(Object.keys(LABEL).map((id) => ({ id })));
 var COPIES = ["plain", "markdown", "html", "json", "compact-json", "csv", "tsv"];
@@ -1320,7 +1240,7 @@ function ContentTransferMenu(props) {
   const identityKey = props.capabilities?.identityKey ?? inherited.identityKey;
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContentTransferMenuSession, { ...props }, identityKey ?? "anonymous");
 }
-function ContentTransferMenuSession({ source, surface, label, projection, sections, preferences, table, formatSources, variants = EMPTY_VARIANTS, actions = [], capabilities: local, disabled, enabled = true, className, stopPropagation = true, hide = [], controllerRef }) {
+function ContentTransferMenuSession({ source, surface, label, projection, sections, preferences, table, formatSources, sourceFormats = true, variants = EMPTY_VARIANTS, actions = [], capabilities: local, disabled, enabled = true, className, stopPropagation = true, hide = [], controllerRef }) {
   const triggerRef = React8.useRef(null);
   const inherited = React8.useContext(CapabilityContext);
   const nearestSurface = React8.useContext(SurfaceContext);
@@ -1333,6 +1253,8 @@ function ContentTransferMenuSession({ source, surface, label, projection, sectio
   const workspaceCaptures = React8.useRef(/* @__PURE__ */ new Map());
   const externalWorkspaceKeys = React8.useRef(/* @__PURE__ */ new Set());
   const [notice, setNotice] = React8.useState(null);
+  const [paletteOpen, setPaletteOpen] = React8.useState(false);
+  const [mode, setMode] = React8.useState("copy");
   const scopes = React8.useMemo(() => table?.availableScopes ?? ["target"], [table]);
   const initialScope = table?.initialScope ?? "target";
   if (!scopes.includes(initialScope)) throw new Error("Alchemy initialScope must be included in availableScopes.");
@@ -1584,48 +1506,87 @@ function ContentTransferMenuSession({ source, surface, label, projection, sectio
   }, [captureOne, capturePrimary, fence, initialScope, preferences, providerPreferences, report]);
   if (!enabled) return null;
   const payload = menuCapture?.snapshot.payload ?? (source && "kind" in source ? source : void 0);
-  const quickVariants = (section) => variants.filter((v) => v.copyLabel && (v.section ?? "ai") === section).map((v) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownMenuItem, { "aria-label": v.ariaLabel, onSelect: () => void transfer("markdown", false, v), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MenuPresentation, { ...v, label: v.copyLabel }) }, `copy:${v.id}`));
-  const visibleCopies = COPIES.filter((f) => Boolean(formatSources?.[f]) || !["csv", "tsv"].includes(f) || payload?.kind === "rows");
-  const visibleDownloads = DOWNLOADS.filter((f) => f !== "xlsx" && Boolean(formatSources?.[f]) || !["csv", "tsv", "xlsx"].includes(f) || payload?.kind === "rows");
-  const visibleAdapters = menuCapture ? adapters.filter((a) => a.supports(menuCapture.snapshot.payload)) : [];
+  const quickVariants = (section) => variants.filter((v) => v.copyLabel && (v.section ?? "ai") === section);
+  const visibleCopies = sourceFormats ? COPIES.filter((f) => Boolean(formatSources?.[f]) || !["csv", "tsv"].includes(f) || payload?.kind === "rows") : [];
+  const visibleDownloads = sourceFormats ? DOWNLOADS.filter((f) => f !== "xlsx" && Boolean(formatSources?.[f]) || !["csv", "tsv", "xlsx"].includes(f) || payload?.kind === "rows") : [];
+  const visibleAdapters = sourceFormats && menuCapture ? adapters.filter((a) => a.supports(menuCapture.snapshot.payload)) : [];
   const visibleActions = menuCapture ? registeredActions.filter((a) => a.supports(menuCapture.snapshot)) : [];
+  const downloadActions = visibleActions.filter((action) => action.placement === "download");
+  const ordinaryActions = visibleActions.filter((action) => action.placement !== "download");
+  const copyAvailable = !hide.includes("copy") && visibleCopies.length + visibleAdapters.length + quickVariants("copy").length > 0;
+  const downloadAvailable = !hide.includes("download") && visibleDownloads.length + visibleAdapters.length + downloadActions.length > 0;
+  const prepareAvailable = !hide.includes("prepare") && (quickVariants("ai").length > 0 || Boolean(primary) || Boolean(nearestWorkspaceKey) || variants.length > 0);
+  const resolvedMode = mode === "copy" && !copyAvailable ? "download" : mode === "download" && !downloadAvailable ? "copy" : mode;
+  const closePalette = () => setPaletteOpen(false);
+  const tile = (id, label2, onClick, options = {}) => {
+    const presentation = options.action;
+    const Icon = presentation?.icon;
+    const fallbackLabel = options.file && !/^download\b/i.test(label2) ? `Download ${label2}` : label2;
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { type: "button", className: "matrx-alchemy-palette-tile", "aria-label": presentation?.ariaLabel ?? (presentation ? fallbackLabel : options.ariaLabel ?? `${resolvedMode === "copy" ? "Copy" : "Download"} ${label2}`), onClick: () => {
+      closePalette();
+      onClick();
+    }, children: [
+      Icon ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { className: "matrx-alchemy-menu-icon" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PaletteGlyph, { ...!options.custom ? { format: id } : {}, ...options.ai ? { ai: true } : {}, ...options.file ? { file: true } : {} }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
+        label2,
+        presentation?.hint ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("small", { className: "matrx-alchemy-menu-hint", children: presentation.hint }) : null
+      ] })
+    ] }, id);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: cn("matrx-alchemy", className), onClick: stopPropagation ? (event) => event.stopPropagation() : void 0, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(DropdownMenu, { onOpenChange: (open) => {
-      if (open) void preflight();
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Popover, { open: paletteOpen, onOpenChange: (open) => {
+      setPaletteOpen(open);
+      if (open) {
+        setMode("copy");
+        void preflight();
+      }
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)(AlchemyGlyph, {}) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(DropdownMenuContent, { align: "end", className: "matrx-alchemy-menu", children: [
-        menuStatus === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownMenuItem, { disabled: true, children: "Inspecting content\u2026" }) : menuStatus !== "idle" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownMenuItem, { disabled: true, children: menuStatus }) : null,
-        !hide.includes("copy") ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownMenuLabel, { children: "Copy" }),
-          quickVariants("copy"),
-          visibleCopies.map((format) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownMenuItem, { onSelect: () => void transfer(format, false), children: format === "plain" ? "Copy" : `Copy ${LABEL[format]}` }, format)),
-          visibleAdapters.map((adapter) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(DropdownMenuItem, { onSelect: () => void transfer(adapter, false), children: [
-            "Copy ",
-            adapter.label
-          ] }, adapter.id))
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)(AlchemyGlyph, {}) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsxs)("div", { className: "matrx-alchemy-mode", "aria-label": "Output action", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", "aria-label": "Copy mode", "aria-pressed": resolvedMode === "copy", onClick: () => setMode("copy"), children: "Copy" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", "aria-label": "Download mode", "aria-pressed": resolvedMode === "download", onClick: () => setMode("download"), children: "Download" })
         ] }) : null,
-        !hide.includes("prepare") ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownMenuSeparator, {}),
-          quickVariants("ai"),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownMenuItem, { onSelect: () => void openWorkspace(), children: "Prepare for AI\u2026" }),
-          nearestWorkspaceKey && nearestSurface ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownMenuItem, { onSelect: () => void openWorkspace(nearestWorkspaceKey, { source: nearestSurface, label: nearestSurface.surfaceName }), children: "Prepare this surface\u2026" }) : null,
-          variants.map((variant) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownMenuItem, { onSelect: () => void openWorkspace(variantWorkspaceKeys.get(variant.id), variant), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MenuPresentation, { ...variant, label: `Prepare ${variant.label}\u2026` }) }, variant.id))
-        ] }) : null,
-        !hide.includes("download") ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownMenuSeparator, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownMenuLabel, { children: "Download" }),
-          visibleDownloads.map((format) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(DropdownMenuItem, { onSelect: () => void transfer(format, true), children: [
-            "Download ",
-            LABEL[format]
-          ] }, format)),
-          visibleAdapters.map((adapter) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(DropdownMenuItem, { onSelect: () => void transfer(adapter, true), children: [
-            "Download ",
-            adapter.label
-          ] }, `download:${adapter.id}`))
+        menuStatus === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "matrx-alchemy-palette-status", children: "Inspecting content\u2026" }) : menuStatus !== "idle" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "matrx-alchemy-error", children: menuStatus }) : null,
+        resolvedMode === "copy" && copyAvailable ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)(PaletteRows, { title: "Quick copy", items: quickVariants("copy"), onRun: (variant) => {
+            closePalette();
+            void transfer("markdown", false, variant);
+          } }) : null
         ] }) : null,
-        visibleActions.length ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownMenuSeparator, {}) : null,
-        visibleActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownMenuItem, { "aria-label": action.ariaLabel, onSelect: () => void runAction(action), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MenuPresentation, { ...action, label: action.label }) }, action.id))
+        resolvedMode === "download" && downloadAvailable ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)(PaletteRows, { title: "Prepare", ai: true, items: quickVariants("ai"), onRun: (variant) => {
+          closePalette();
+          void transfer("markdown", false, variant);
+        }, extra: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { type: "button", className: "matrx-alchemy-palette-row", onClick: () => {
+          closePalette();
+          void openWorkspace();
+        }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PaletteGlyph, { ai: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Prepare for AI\u2026" })
+        ] }) }) : null,
+        prepareAvailable && (nearestWorkspaceKey || variants.length) ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PaletteRows, { title: "Context", items: [], extra: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+          nearestWorkspaceKey && nearestSurface ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "matrx-alchemy-palette-row", onClick: () => {
+            closePalette();
+            void openWorkspace(nearestWorkspaceKey, { source: nearestSurface, label: nearestSurface.surfaceName });
+          }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Prepare this surface\u2026" }) }) : null,
+          variants.map((variant) => /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)(MenuPresentation, { ...variant, label: `Prepare ${variant.label}\u2026` }) }, variant.id))
+        ] }) }) : null,
+        ordinaryActions.length ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PaletteRows, { title: "Actions", items: [], extra: ordinaryActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "matrx-alchemy-palette-row", "aria-label": action.ariaLabel, onClick: () => {
+          closePalette();
+          void runAction(action);
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MenuPresentation, { ...action, label: action.label }) }, action.id)) }) : null
       ] })
     ] }),
     notice ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "matrx-alchemy-notice", role: "status", children: notice }) : null,