@ai-matrx/alchemy 0.1.2 → 0.1.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 0.1.4
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/alchemy/v0.1.3..npm/alchemy/v0.1.4 -- apps/shared/alchemy`).
+No source changes intended and no consumer action required.
+
+## 0.1.3 — 2026-09-12
+
+Refreshes the distribution with the compact Alchemy format palette, its
+distinct action glyphs, native popover activation, and the design-system
+0.18.10 table and narrow-viewport Select corrections.
+
+### Consumer action
+
+Update to 0.1.3. No host configuration changes are required.
+
 ## 0.1.2
 
 Automatic changed-only republish (docs/metadata drift since the last tag — see

package/README.md

@@ -1,6 +1,6 @@
 # @ai-matrx/alchemy
 
-Alchemy is Matrx’s content-to-AI toolkit. **Alchemy Menu** is its small, reusable copy, preparation and export control. This distribution ships the canonical core, React controls, Matrx service adapter, CSS and SVG; it contains no parallel implementation.
+Alchemy is Matrx’s content-to-AI toolkit. **Alchemy Menu** is its small, reusable copy, preparation and export control. This distribution ships the shared core, React controls, Matrx service adapter, CSS and SVG; it contains no parallel implementation.
 
 ## One menu, ready to use
 
@@ -28,11 +28,23 @@ The transparent icon opens ordinary copy, Markdown, formatted HTML with plain-te
 
 Preparation supports editable drafts, detail presets, structural reductions, omissions and undo. Supplying table rows adds relevant spreadsheet formats; registered exporters and page actions retain the same captured-source boundary. An absent AI provider leaves manual preparation available without showing dead AI controls.
 
+## Extend the shared menu
+
+The Copy/Download selector uses one format palette. Additional formats use the same tiles; quick copy, preparation, alternate context, and page operations use shared groups. Supply capabilities and descriptors rather than rendering another menu.
+
+- Use `human`, `json`, and `agent` getters for different representations of the same content.
+- Use `export.sheetRows` and `export.sheetColumns` for a table; spreadsheet formats become available automatically.
+- Use `export.items[].build` for a custom file's bytes, MIME type, extension, and optional filename. It appears in Download. An `onSelect` callback takes precedence over `build` and remains a page action.
+- Use `aiVariants` for alternate sources, `aiCustom` for source settings, and `groomer` for per-section detail. They enter the same preparation workspace.
+- Use the lower-level `ContentTransferMenu` and its capability provider for format adapters and projected page actions. `sourceFormats={false}` suppresses source formats in a file/action-only control; an action's `placement: "download"` places a genuine download in the palette.
+
+Labels and hints wrap within the shared geometry. Preserve stable IDs, eligibility checks, capture boundaries, and honest outcomes. Do not add per-page Copy/Download lists, bypass the shared transport, or restyle the menu for a particular integration.
+
 ## Integrate Matrx services once
 
 `MatrxContentTransferProvider` from `@ai-matrx/alchemy/matrx/react` accepts the canonical transport, authenticated database read port, current organization getter and source application. It supplies the declared durable AI preparation job to descendant menus. The host supplies identity and its existing live-run renderer; the package owns preparation, cancellation, exact request recovery and provenance. Mount the provider at an identity boundary so changing user or organization cannot reuse another identity’s prepared run.
 
-For an exact mounted declared surface, use `createSurfaceTransferHandle` from `/core` and `ContentTransferSurfaceProvider` from `/react`. Bind its scope getter and mounted predicate to that instance. Never look up a same-named surface globally. Standard Matrx table row and toolbar adoption is being completed alongside initial publication. Custom tables can use the lower-level `ContentTransferMenu` source/table contract.
+For an exact mounted declared surface, use `createSurfaceTransferHandle` from `/core` and `ContentTransferSurfaceProvider` from `/react`. Bind its scope getter and mounted predicate to that instance. Never look up a same-named surface globally. Standard Matrx tables include shared row and toolbar controls by default; `copy={false}` opts out. Custom tables can use the lower-level `ContentTransferMenu` source/table contract.
 
 ## Framework-neutral use
 
@@ -55,4 +67,4 @@ const artifact = serialize(createDraft(snapshot), "plain");
 | `/styles.css` | Self-contained menu and workspace styling. |
 | `/alchemy.svg` | The standalone glyph asset. |
 
-Initial publication is pending. Its registry installation canary requires the sibling kit, design-system and agents releases first.
+The registry installation canary requires the sibling kit, design-system and agents releases first. Each distribution release copies the canonical design-system stylesheet and SVG at build time.

package/dist/alchemy.svg

@@ -1 +1 @@
-<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>
+<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="M9 3h6"/><path d="M10 3v6l-5.2 8.7A2 2 0 0 0 6.5 21h11a2 2 0 0 0 1.7-3.3L14 9V3"/><path d="M8 15h8"/></svg>

package/dist/styles.css

@@ -36,14 +36,67 @@
   min-width: 18rem;
   max-width: min(24rem, calc(100vw - 2rem));
 }
+.matrx-alchemy-palette {
+  width: min(18rem, calc(100vw - 2rem));
+  min-width: 0;
+  padding: 0.4375rem;
+  max-height: var(--radix-popover-content-available-height, 80dvh);
+}
+.matrx-alchemy-output {
+  display: grid;
+  gap: 0.375rem;
+  padding: 0.375rem;
+  border: 1px solid hsl(var(--border, 240 6% 90%));
+  border-radius: 0.5rem;
+}
+.matrx-alchemy-output > h3 {
+  margin: 0.125rem 0.125rem 0;
+  color: hsl(var(--muted-foreground, 240 4% 46%));
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.matrx-alchemy-mode {
+  display: flex;
+  gap: 0.1875rem;
+  margin-bottom: 0.375rem;
+  padding: 0.1875rem;
+  border-radius: 0.5rem;
+  background: hsl(var(--muted, 240 5% 96%));
+}
+.matrx-alchemy-mode button {
+  flex: 1;
+  min-height: 2rem;
+  border: 0;
+  border-radius: 0.3125rem;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 0.8125rem;
+  cursor: pointer;
+}
+.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-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-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: 0 0 0 2px hsl(var(--ring, 240 5% 65%)); }
+.matrx-alchemy-palette-status { margin: 0.25rem 0.375rem; color: hsl(var(--muted-foreground, 240 4% 46%)); font-size: 0.75rem; }
 .matrx-alchemy-notice,
 .matrx-alchemy-meta {
   font-size: 0.75rem;
   color: hsl(var(--muted-foreground, 240 4% 46%));
 }
 .matrx-alchemy-workspace {
-  max-height: min(90dvh, 56rem);
-  overflow: auto;
+  max-height: min(90dvh, 48rem);
+  overflow: hidden;
+  grid-template-rows: auto minmax(0, 1fr) auto;
 }
 .matrx-alchemy-workspace-grid {
   display: grid;
@@ -51,8 +104,15 @@
   gap: 1rem;
   min-height: 0;
 }
+.matrx-alchemy-workspace-body {
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding-right: 0.125rem;
+}
 .matrx-alchemy-main {
   display: grid;
+  align-content: start;
   gap: 0.75rem;
   min-width: 0;
 }
@@ -91,6 +151,15 @@
   border-radius: 0.375rem;
   padding: 0.625rem;
 }
+.matrx-alchemy-options > fieldset {
+  display: grid;
+  gap: 0.5rem;
+  min-width: 0;
+  margin: 0.625rem 0 0;
+  padding: 0;
+  border: 0;
+}
+.matrx-alchemy-options summary { cursor: pointer; }
 .matrx-alchemy-options legend {
   padding: 0 0.25rem;
   font-size: 0.8125rem;
@@ -237,50 +306,24 @@
 }
 .matrx-alchemy-menu {
   z-index: 10001;
-  padding: 0.25rem;
-  max-height: var(--radix-dropdown-menu-content-available-height, 80dvh);
+  padding: 0.4375rem;
+  max-height: var(--radix-popover-content-available-height, 80dvh);
   overflow: auto;
   overscroll-behavior: contain;
+  border-radius: 0.75rem;
 }
-.matrx-alchemy-menu [role="menuitem"] {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  min-height: 2rem;
-  padding: 0.375rem 0.5rem;
-  border-radius: 0.25rem;
-  font-size: 0.875rem;
-  cursor: default;
-  outline: none;
-  user-select: none;
-}
-.matrx-alchemy-menu [role="menuitem"][data-highlighted] {
-  background: hsl(var(--accent, 240 5% 96%));
-}
-.matrx-alchemy-menu [data-disabled] {
-  opacity: 0.5;
-  pointer-events: none;
-}
-.matrx-alchemy-menu [data-slot="dropdown-menu-label"] {
-  padding: 0.375rem 0.5rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-}
-.matrx-alchemy-menu [role="separator"] {
-  height: 1px;
-  margin: 0.25rem 0;
-  background: hsl(var(--border, 240 6% 90%));
+@media (pointer: coarse) {
+  .matrx-alchemy-palette :is(.matrx-alchemy-mode button, .matrx-alchemy-palette-row) { min-height: 2.75rem; }
+  .matrx-alchemy-palette-tile { min-height: 4.5rem; }
 }
 .matrx-alchemy-workspace {
   position: fixed;
   z-index: 10001;
-  top: 50%;
-  left: 50%;
-  right: auto;
-  bottom: auto;
-  margin: 0;
-  translate: -50% -50%;
-  width: min(64rem, calc(100vw - 2rem));
+  inset: 0;
+  margin: auto;
+  translate: none;
+  height: fit-content;
+  width: min(56rem, calc(100vw - 2rem));
   max-width: calc(100vw - 2rem);
   padding: 1.5rem;
   display: grid;
@@ -314,27 +357,35 @@
   gap: 0.5rem;
   align-items: center;
 }
-.matrx-alchemy-workspace button {
+.matrx-alchemy-workspace-secondary,
+.matrx-alchemy-workspace-primary {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.375rem;
   min-height: 2rem;
   padding: 0.375rem 0.75rem;
-  border: 1px solid hsl(var(--border, 240 6% 90%));
   border-radius: 0.375rem;
-  background: hsl(var(--background, 0 0% 100%));
-  color: inherit;
+  cursor: pointer;
   font: inherit;
   font-size: 0.8125rem;
-  cursor: pointer;
 }
-.matrx-alchemy-workspace button:hover {
-  background: hsl(var(--accent, 240 5% 96%));
+.matrx-alchemy-workspace-secondary {
+  border: 1px solid hsl(var(--border, 240 6% 90%));
+  background: hsl(var(--background, 0 0% 100%));
+  color: hsl(var(--foreground, 240 10% 4%));
 }
-.matrx-alchemy-workspace button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+.matrx-alchemy-workspace-primary {
+  border: 1px solid hsl(var(--primary, 262 43% 51%));
+  background: hsl(var(--primary, 262 43% 51%));
+  color: hsl(var(--primary-foreground, 0 0% 100%));
+}
+.matrx-alchemy-workspace :is(.matrx-alchemy-workspace-secondary, .matrx-alchemy-workspace-primary):disabled { opacity: 0.5; cursor: not-allowed; }
+.matrx-alchemy-workspace-secondary:hover { background: hsl(var(--accent, 240 5% 96%)); }
+.matrx-alchemy-workspace-primary:hover { filter: brightness(0.96); }
+.matrx-alchemy-configuration {
+  width: min(40rem, calc(100vw - 2rem));
+  max-height: min(90dvh, 42rem);
+  overflow: hidden;
 }
 .matrx-alchemy-workspace button:focus-visible,
 .matrx-alchemy-workspace :is(input, textarea, select):focus-visible {
@@ -366,10 +417,7 @@
 }
 @media (max-width: 767px) {
   .matrx-alchemy-workspace {
-    top: auto;
-    bottom: 0;
-    left: 0;
-    translate: none;
+    inset: auto 0 0;
     width: 100%;
     max-width: 100%;
     max-height: 92dvh;
@@ -380,3 +428,31 @@
 
 .matrx-alchemy-menu *, .matrx-alchemy-workspace * { box-sizing: border-box; }
 .matrx-alchemy-workspace-grid:not(:has(aside)) { grid-template-columns: minmax(0, 1fr); }
+
+/* Table toolbar matches the canonical tap-target 44 / 28 / 14 geometry.
+   tap-target depends on design-system, so this primitive cannot import it. */
+.matrx-alchemy-toolbar-target .matrx-alchemy-trigger {
+  position: relative;
+  flex-shrink: 0;
+  width: 2.75rem;
+  height: 2.75rem;
+  background: transparent;
+  touch-action: manipulation;
+}
+.matrx-alchemy-toolbar-target .matrx-alchemy-trigger::before {
+  content: "";
+  position: absolute;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 9999px;
+  transition: background-color 150ms ease, transform 100ms ease;
+}
+.matrx-alchemy-toolbar-target .matrx-alchemy-trigger:hover::before {
+  background: hsl(var(--accent, 240 5% 96%));
+}
+.matrx-alchemy-toolbar-target .matrx-alchemy-trigger:active::before { transform: scale(0.92); }
+.matrx-alchemy-toolbar-target .matrx-alchemy-trigger svg {
+  position: relative;
+  width: 0.875rem;
+  height: 0.875rem;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-matrx/alchemy",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Matrx Alchemy: the complete Matrx copy, prepare-for-AI, and export experience, with framework-neutral core, React menu, glyph, styles and Matrx integration.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -124,14 +124,14 @@
     "*.css"
   ],
   "dependencies": {
+    "@ai-matrx/kit": "latest",
     "@ai-matrx/design-system": "latest",
-    "@ai-matrx/agents": "latest",
-    "@ai-matrx/kit": "latest"
+    "@ai-matrx/agents": "latest"
   },
   "scripts": {
     "build": "pnpm clean && tsup && node ./scripts/copy-assets.mjs && node ./scripts/assert-distribution-artifacts.mjs",
     "clean": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\"",
-    "check:package": "pnpm build && publint && pnpm verify:tarball",
+    "check:package": "pnpm build && node ../scripts/check-exports-agreement.mjs && publint && pnpm verify:tarball",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "test": "vitest run",
     "verify:tarball": "node ./scripts/verify-tarball.mjs"