@ai-matrx/design-system 0.20.2 → 0.20.6

package/dist/content-transfer.css

@@ -79,11 +79,13 @@
 .matrx-alchemy-mode button[aria-pressed="true"] { background: hsl(var(--background, 0 0% 100%)); box-shadow: 0 1px 2px hsl(var(--foreground, 240 10% 4%) / 0.12); }
 .matrx-alchemy-palette-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.1875rem; }
 .matrx-alchemy-palette-tile { display: grid; place-items: center; gap: 0.375rem; min-width: 0; min-height: 4.25rem; padding: 0.5rem 0.25rem; border: 0; border-radius: 0.375rem; background: transparent; color: inherit; font: inherit; font-size: 0.75rem; line-height: 1.2; text-align: center; overflow-wrap: anywhere; cursor: pointer; }
+.matrx-alchemy-palette-tile > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: normal; }
 .matrx-alchemy-palette-glyph { width: 1.125rem; height: 1.125rem; color: hsl(var(--muted-foreground, 240 4% 46%)); flex: 0 0 auto; }
 .matrx-alchemy-palette-section { display: grid; gap: 0.125rem; margin-top: 0.375rem; padding-top: 0.375rem; border-top: 1px solid hsl(var(--border, 240 6% 90%)); }
 .matrx-alchemy-palette-section h3 { margin: 0.125rem 0.375rem; color: hsl(var(--muted-foreground, 240 4% 46%)); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
 .matrx-alchemy-palette-row { display: flex; align-items: center; gap: 0.5rem; width: 100%; min-height: 2rem; padding: 0.375rem 0.5rem; border: 0; border-radius: 0.3125rem; background: transparent; color: inherit; font: inherit; font-size: 0.8125rem; line-height: 1.25; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
-.matrx-alchemy-palette-row > span { min-width: 0; }
+.matrx-alchemy-palette-row > span { min-width: 0; flex: 1; }
+.matrx-alchemy-palette-row > :is(.matrx-alchemy-palette-glyph, .matrx-alchemy-menu-icon) { width: 1rem; height: 1rem; align-self: flex-start; margin-top: .125rem; }
 .matrx-alchemy-palette-row-ai { color: hsl(var(--primary, 262 43% 51%)); }
 .matrx-alchemy-palette :is(button:hover, button:focus-visible) { background: hsl(var(--accent, 240 5% 96%)); outline: none; }
 .matrx-alchemy-palette :is(button:focus-visible) { box-shadow: inset 0 0 0 2px hsl(var(--ring, 240 5% 65%)); }
@@ -274,6 +276,8 @@
   display: block;
   color: hsl(var(--muted-foreground, 240 4% 46%));
   font-size: 0.75rem;
+  line-height: 1.35;
+  margin-top: .125rem;
 }
 
 /* Primitive chrome is scoped here so a plain React consumer needs no Tailwind build. */
@@ -455,7 +459,7 @@ body:has(.matrx-alchemy-workspace[data-state="open"]) > .matrx-alchemy-feedback
 .matrx-alchemy-palette-destinations > summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px hsl(var(--ring)); }
 
 .matrx-alchemy-scope { display: grid; gap: .375rem; padding: .5rem; font-size: .75rem; }
-.matrx-alchemy-scope select { width: 100%; min-width: 0; padding: .375rem; border: 1px solid hsl(var(--border)); border-radius: .375rem; color: inherit; background: hsl(var(--background)); }
+.matrx-alchemy-scope select { font: inherit; font-size: .8125rem; line-height: 1.25; width: 100%; min-width: 0; padding: .375rem; border: 1px solid hsl(var(--border)); border-radius: .375rem; color: inherit; background: hsl(var(--background)); }
 
 /* Email review shares the preparation chrome, including hosts without Tailwind. */
 .matrx-alchemy-email-review { max-height: 85dvh; overflow: auto; }
@@ -463,3 +467,7 @@ body:has(.matrx-alchemy-workspace[data-state="open"]) > .matrx-alchemy-feedback
 .matrx-alchemy-email-adjustments { font-size: .8125rem; overflow-wrap: anywhere; }
 .matrx-alchemy-email-adjustments ul { margin: .5rem 0 0; padding-left: 1.25rem; }
 @media (min-width: 768px) { .matrx-alchemy-email-review { width: min(32rem, calc(100vw - 2rem)); } }
+
+.matrx-alchemy-disclosure { width: 1rem; height: 1rem; flex: 0 0 auto; color: hsl(var(--muted-foreground)); }
+.matrx-alchemy-disclosure-meta { display: inline-flex; align-items: center; gap: .375rem; }
+.matrx-alchemy-palette-destinations[open] > summary .matrx-alchemy-disclosure { transform: rotate(90deg); }

package/dist/content-transfer.js

@@ -1115,7 +1115,7 @@ var exportableColumns = (payload) => payload.columns.filter(
 );
 var tableSchemaFormat = {
   id: "table-schema",
-  label: "Schema + rows",
+  label: "Schema",
   supports: (payload) => payload.kind === "rows",
   async build(draft, signal) {
     if (signal.aborted) throw new DOMException("Cancelled", "AbortError");
@@ -1168,7 +1168,7 @@ function displayLabels(payload) {
 }
 var tableDataFormat = {
   id: "table-data",
-  label: "JSON (display labels)",
+  label: "Table JSON",
   supports: (payload) => payload.kind === "rows",
   async build(draft, signal) {
     if (signal.aborted) throw new DOMException("Cancelled", "AbortError");
@@ -1845,7 +1845,7 @@ function ContentTransferSurfaceProvider({ handle, children }) {
 var useContentTransferSurface = () => React10.useContext(SurfaceContext);
 function MenuPresentation({ label, hint, icon: Icon }) {
   return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    Icon ? /* @__PURE__ */ jsx11(Icon, { className: "matrx-alchemy-menu-icon" }) : null,
+    Icon ? /* @__PURE__ */ jsx11(Icon, { className: "matrx-alchemy-menu-icon" }) : /* @__PURE__ */ jsx11(PaletteGlyph, { file: true }),
     /* @__PURE__ */ jsxs6("span", { children: [
       label,
       hint ? /* @__PURE__ */ jsx11("small", { className: "matrx-alchemy-menu-hint", children: hint }) : null
@@ -1867,8 +1867,11 @@ function DestinationPresentation({ action }) {
   };
   const path = paths[action.id.replace(/^matrx:/, "")];
   return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    !action.icon ? path ? /* @__PURE__ */ jsx11("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__ */ jsx11("path", { d: path }) }) : /* @__PURE__ */ jsx11(PaletteGlyph, { file: true }) : null,
-    /* @__PURE__ */ jsx11(MenuPresentation, { ...action })
+    action.icon ? /* @__PURE__ */ jsx11(action.icon, { className: "matrx-alchemy-menu-icon" }) : path ? /* @__PURE__ */ jsx11("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__ */ jsx11("path", { d: path }) }) : /* @__PURE__ */ jsx11(PaletteGlyph, { file: true }),
+    /* @__PURE__ */ jsxs6("span", { children: [
+      action.label,
+      action.hint ? /* @__PURE__ */ jsx11("small", { className: "matrx-alchemy-menu-hint", children: action.hint }) : null
+    ] })
   ] });
 }
 function ReceiptLink({ target }) {
@@ -1878,6 +1881,11 @@ function ReceiptLink({ target }) {
   ] }) : null;
 }
 function PaletteGlyph({ format, ai = false, file = false, kind }) {
+  if (kind === "link") return /* @__PURE__ */ jsx11("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__ */ jsx11("path", { d: "M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-2 2M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l2-2" }) });
+  if (kind === "surface") return /* @__PURE__ */ jsxs6("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__ */ jsx11("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ jsx11("path", { d: "M3 9h18M9 9v12" })
+  ] });
   if (kind === "ai-copy") return /* @__PURE__ */ jsxs6("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__ */ jsx11("rect", { x: "5", y: "5", width: "11", height: "14", rx: "2" }),
     /* @__PURE__ */ jsx11("path", { d: "M9 3h6a2 2 0 0 1 2 2v10" }),
@@ -2358,7 +2366,7 @@ function ContentTransferMenuSession({ references = [], referenceActions = [], so
     const presentation = options.action;
     const Icon = presentation?.icon;
     const fallbackLabel = options.file && !/^download\b/i.test(label2) ? `Download ${label2}` : label2;
-    return /* @__PURE__ */ jsxs6("button", { type: "button", className: "matrx-alchemy-palette-tile", "aria-label": presentation?.ariaLabel ?? (presentation ? fallbackLabel : options.ariaLabel ?? `${resolvedMode === "copy" ? "Copy" : "Download"} ${label2}`), onClick: () => {
+    return /* @__PURE__ */ jsxs6("button", { type: "button", className: "matrx-alchemy-palette-tile", title: id === "table-data" ? "JSON using column display names" : id === "table-schema" ? "Table schema and rows" : label2, "aria-label": presentation?.ariaLabel ?? (presentation ? fallbackLabel : options.ariaLabel ?? `${resolvedMode === "copy" ? "Copy" : "Download"} ${label2}`), onClick: () => {
       closePalette();
       onClick();
     }, children: [
@@ -2420,7 +2428,7 @@ function ContentTransferMenuSession({ references = [], referenceActions = [], so
             /* @__PURE__ */ jsx11(PaletteGlyph, { kind: "ai-copy" }),
             /* @__PURE__ */ jsxs6("span", { children: [
               "Copy with AI context",
-              /* @__PURE__ */ jsx11("small", { className: "matrx-alchemy-menu-hint", children: "Content, source and capture details" })
+              /* @__PURE__ */ jsx11("small", { className: "matrx-alchemy-menu-hint", children: "Include source context" })
             ] })
           ] }) : null, items: quickVariants("ai"), onRun: (variant) => {
             closePalette();
@@ -2433,32 +2441,44 @@ function ContentTransferMenuSession({ references = [], referenceActions = [], so
             /* @__PURE__ */ jsx11(PaletteGlyph, { kind: "sliders" }),
             /* @__PURE__ */ jsxs6("span", { children: [
               "Prepare for AI",
-              /* @__PURE__ */ jsx11("small", { className: "matrx-alchemy-menu-hint", children: "Review and edit before copying" })
+              /* @__PURE__ */ jsx11("small", { className: "matrx-alchemy-menu-hint", children: "Trim, edit or summarize" })
             ] })
           ] }) })
         ] }) : null,
         prepareAvailable && (nearestWorkspaceKey || variants.length) ? /* @__PURE__ */ jsx11(PaletteRows, { title: "Other sources", items: [], extra: /* @__PURE__ */ jsxs6(Fragment2, { children: [
-          nearestWorkspaceKey && nearestSurface ? /* @__PURE__ */ jsx11("button", { type: "button", className: "matrx-alchemy-palette-row", onClick: () => {
+          nearestWorkspaceKey && nearestSurface ? /* @__PURE__ */ jsxs6("button", { type: "button", className: "matrx-alchemy-palette-row", onClick: () => {
             closePalette();
             void openWorkspace(nearestWorkspaceKey, { source: nearestSurface, label: nearestSurface.surfaceName });
-          }, children: /* @__PURE__ */ jsx11("span", { children: "Prepare this surface" }) }) : null,
+          }, children: [
+            /* @__PURE__ */ jsx11(PaletteGlyph, { kind: "surface" }),
+            /* @__PURE__ */ jsx11("span", { children: "Prepare this page" })
+          ] }) : null,
           variants.map((variant) => /* @__PURE__ */ jsx11("button", { type: "button", className: "matrx-alchemy-palette-row", "aria-label": variant.ariaLabel, onClick: () => {
             closePalette();
             void openWorkspace(variantWorkspaceKeys.get(variant.id), variant);
           }, children: /* @__PURE__ */ jsx11(MenuPresentation, { ...variant, label: `Prepare ${variant.label}` }) }, variant.id))
         ] }) }) : null,
         references.length || referenceActions.length ? /* @__PURE__ */ jsxs6("section", { className: "matrx-alchemy-palette-section", children: [
-          /* @__PURE__ */ jsx11("h3", { children: "Live references" }),
-          /* @__PURE__ */ jsx11("p", { className: "matrx-alchemy-menu-hint", children: "Pointers to saved data, independent of filters and edits." }),
-          references.map((reference) => /* @__PURE__ */ jsx11("button", { type: "button", className: "matrx-alchemy-palette-row", onClick: () => void copyReference(reference), children: /* @__PURE__ */ jsx11("span", { children: reference.label }) }, reference.id)),
-          referenceActions.map((action) => /* @__PURE__ */ jsx11("button", { type: "button", className: "matrx-alchemy-palette-row", onClick: () => void openReference(action), children: /* @__PURE__ */ jsx11("span", { children: action.label }) }, action.id))
+          /* @__PURE__ */ jsx11("h3", { children: "References" }),
+          referenceActions.map((action) => /* @__PURE__ */ jsxs6("button", { type: "button", className: "matrx-alchemy-palette-row", onClick: () => void openReference(action), children: [
+            /* @__PURE__ */ jsx11(PaletteGlyph, { kind: "link" }),
+            /* @__PURE__ */ jsx11("span", { children: action.label }),
+            /* @__PURE__ */ jsx11("svg", { className: "matrx-alchemy-disclosure", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: /* @__PURE__ */ jsx11("path", { d: "m6 4 4 4-4 4" }) })
+          ] }, action.id)),
+          references.map((reference) => /* @__PURE__ */ jsxs6("button", { type: "button", className: "matrx-alchemy-palette-row", title: "Copies a reference to saved data", onClick: () => void copyReference(reference), children: [
+            /* @__PURE__ */ jsx11(PaletteGlyph, { kind: "link" }),
+            /* @__PURE__ */ jsx11("span", { children: reference.label })
+          ] }, reference.id))
         ] }) : null,
         ["save", "chat", "email", "other"].map((group) => {
           const entries = ordinaryActions.filter((action) => (action.group ?? "other") === group);
           return entries.length ? /* @__PURE__ */ jsxs6("details", { className: "matrx-alchemy-palette-destinations", children: [
             /* @__PURE__ */ jsxs6("summary", { children: [
               group === "save" ? "Save to Matrx" : group === "chat" ? "Continue with AI" : group === "email" ? "Email to me" : "Actions",
-              /* @__PURE__ */ jsx11("span", { children: entries.length })
+              /* @__PURE__ */ jsxs6("span", { className: "matrx-alchemy-disclosure-meta", children: [
+                /* @__PURE__ */ jsx11("span", { children: entries.length }),
+                /* @__PURE__ */ jsx11("svg", { className: "matrx-alchemy-disclosure", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: /* @__PURE__ */ jsx11("path", { d: "m6 4 4 4-4 4" }) })
+              ] })
             ] }),
             /* @__PURE__ */ jsx11("div", { children: entries.map((action) => /* @__PURE__ */ jsx11("button", { type: "button", className: "matrx-alchemy-palette-row", "aria-label": action.ariaLabel, onClick: () => {
               closePalette();