@ai-matrx/alchemy 0.1.8 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.2.0
+
+Ships Portal as the default mark, Copy + Transform as an optional SVG/React variant, exact glass/transparent Tap Target controls, native AI-context copy and preparation recipes, and the Matrx destination workflow through /matrx.
+
+### Consumer action
+
+Bind createMatrxTransferPorts to existing Matrx service/opening ports once at the authenticated application provider, then register createMatrxTransferActions with the shared capabilities. Pages supply only their source or mounted surface. Pass the capture identity when opening an assistant with initial text resources; never put captured source into the human composer or auto-run it.
+
 ## 0.1.8
 
 Automatic changed-only republish (docs/metadata drift since the last tag — see

package/README.md

@@ -28,6 +28,21 @@ 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.
 
+## Portal and Tap Target
+
+Portal is the default mark in every Matrx host. The trigger is the actual Tap Target primitive: 44px hit area, 28px visual pill and 14px glyph. Use `triggerVariant="glass"` in headers and `triggerVariant="transparent"` for content actions. `icon="copy-transform"` is an optional package variant; both marks ship as SVG assets. Future host marks extend this typed icon set rather than replacing the trigger or adding page CSS.
+
+```tsx
+import { ContentTransferMenu } from "@ai-matrx/alchemy/react";
+
+<ContentTransferMenu source={{ kind: "markdown", text: content }} />
+<ContentTransferMenu source={{ kind: "text", text: title }} triggerVariant="glass" />
+// Inside a mounted ContentTransferSurfaceProvider, no source prop is needed:
+<ContentTransferMenu />
+```
+
+Even a plain source has format copy/download, a source-labelled AI context envelope, manual editing, detail/character limits, and undo. The authenticated host adds six AI preparation recipes and the available Matrx destinations. Table sources add selection, filtering, sorting, column choice, row limits, CSV/TSV and Excel. A manually edited draft is the content sent to destinations; actions incompatible with its new shape disappear.
+
 ## 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.
@@ -44,6 +59,10 @@ Labels and hints wrap within the shared geometry. Preserve stable IDs, eligibili
 
 `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.
 
+The `/matrx` entry also ships `createMatrxTransferPorts(bindings)` and `createMatrxTransferActions(ports)`. Bind existing Notes, Documents, Workbooks, task, attachment, Code and chat openers once. Register the returned actions through the provider's `capabilities.actions`. Menus inherit Save to Matrx and Continue with AI groups; no page callback or styling is necessary. `createMatrxTransferActions` also accepts a partial port set for hosts that expose fewer destinations. The package owns serialization, capture identity checks, saved-item receipts and retry deduplication.
+
+Openers report that an editor was opened, not that the item was saved. Save-and-attach preserves the created note if the destination picker fails. New-chat/window handoffs attach captured content as a text resource, leave the human composer empty and never auto-run. Connected tools are selected through the existing assistant Chat Options picker; this is not an automatic MCP invocation.
+
 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
@@ -62,9 +81,9 @@ const artifact = serialize(createDraft(snapshot), "plain");
 |---|---|
 | `/core` (also package root) | Capture, projection, preparation, serializers, artifacts and transport. |
 | `/react` | `AlchemyMenu`, lower-level `ContentTransferMenu`, surface/provider bindings and React glyph. |
-| `/matrx` | Durable Matrx AI preparation adapter. |
+| `/matrx` | Durable AI preparation and the standard Matrx destination catalog/workflow. |
 | `/matrx/react` | React bindings for that adapter. |
 | `/styles.css` | Self-contained menu and workspace styling. |
-| `/alchemy.svg` | The standalone glyph asset. |
+| `/alchemy.svg`, `/portal.svg`, `/copy-transform.svg` | Packaged icon assets; Portal is default. |
 
-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.
+The registry installation canary requires the sibling kit, design-system and agents releases first. Stylesheets import the canonical design-system styling; SVG assets are copied from their one source 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="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>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h4M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4M8 12h8m-3-3 3 3-3 3"/></svg>

package/dist/copy-transform.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M8 7V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v8M13 21H5a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v3m-5 4h11m-3-3 3 3-3 3"/></svg>

package/dist/portal.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h4M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4M8 12h8m-3-3 3 3-3 3"/></svg>

package/dist/styles.css

@@ -1,485 +1 @@
-/* Structural Alchemy rules. Hosts own token values; Tailwind is never required. */
-.matrx-alchemy {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.375rem;
-}
-.matrx-alchemy-trigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  padding: 0.375rem;
-  border: 0;
-  border-radius: 0.375rem;
-  background: transparent;
-  color: hsl(var(--foreground, 240 10% 4%));
-  cursor: pointer;
-}
-.matrx-alchemy-trigger svg {
-  width: 1.125rem;
-  height: 1.125rem;
-}
-.matrx-alchemy-trigger:hover {
-  background: hsl(var(--accent, 240 5% 96%));
-}
-.matrx-alchemy-trigger:focus-visible {
-  outline: 2px solid hsl(var(--ring, 240 5% 65%));
-  outline-offset: 2px;
-}
-.matrx-alchemy-trigger:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.matrx-alchemy-menu {
-  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: inset 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, 48rem);
-  overflow: hidden;
-  grid-template-rows: auto minmax(0, 1fr) auto;
-}
-.matrx-alchemy-workspace-grid {
-  display: grid;
-  grid-template-columns: minmax(0, 2fr) minmax(12rem, 1fr);
-  gap: 1rem;
-  min-height: 0;
-}
-.matrx-alchemy-workspace-body {
-  min-height: 0;
-  overflow: auto;
-  overscroll-behavior: contain;
-  padding: 0.25rem;
-}
-.matrx-alchemy-main {
-  display: grid;
-  align-content: start;
-  gap: 0.75rem;
-  min-width: 0;
-}
-.matrx-alchemy-toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  align-items: end;
-}
-.matrx-alchemy-toolbar label,
-.matrx-alchemy-preview-label,
-.matrx-alchemy-workspace aside label,
-.matrx-alchemy-options label {
-  display: grid;
-  gap: 0.25rem;
-  font-size: 0.8125rem;
-}
-.matrx-alchemy-toolbar input,
-.matrx-alchemy-toolbar select,
-.matrx-alchemy-preview-label select,
-.matrx-alchemy-workspace aside textarea,
-.matrx-alchemy-options input {
-  min-height: 2.25rem;
-  border: 1px solid hsl(var(--border, 240 6% 90%));
-  border-radius: 0.25rem;
-  background: hsl(var(--background, 0 0% 100%));
-  color: inherit;
-  padding: 0.35rem 0.5rem;
-}
-.matrx-alchemy-options {
-  display: grid;
-  gap: 0.5rem;
-  max-height: 13rem;
-  overflow: auto;
-  border: 1px solid hsl(var(--border, 240 6% 90%));
-  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;
-  font-weight: 600;
-}
-.matrx-alchemy-column {
-  display: grid;
-  grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 1fr);
-  gap: 0.5rem;
-  align-items: end;
-}
-.matrx-alchemy-row-list {
-  display: grid;
-  gap: 0.375rem;
-  max-height: 9rem;
-  overflow: auto;
-  padding: 0.25rem;
-}
-.matrx-alchemy-row-list label {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.matrx-alchemy-coverage {
-  display: grid;
-  gap: 0.25rem;
-  font-size: 0.75rem;
-  color: hsl(var(--muted-foreground, 240 4% 46%));
-}
-.matrx-alchemy-coverage details {
-  max-height: 8rem;
-  overflow: auto;
-}
-.matrx-alchemy-coverage ul {
-  margin: 0.35rem 0 0;
-  padding-left: 1.25rem;
-}
-.matrx-alchemy-preview {
-  display: block;
-  width: 100%;
-  min-height: 16rem;
-  padding: 0.75rem;
-  border: 1px solid hsl(var(--border, 240 6% 90%));
-  border-radius: 0.375rem;
-  background: hsl(var(--muted, 240 5% 96%));
-  color: inherit;
-  font:
-    12px/1.45 ui-monospace,
-    SFMono-Regular,
-    Menlo,
-    monospace;
-  resize: vertical;
-}
-.matrx-alchemy-preview[aria-invalid="true"] {
-  border-color: hsl(var(--destructive, 0 84% 60%));
-}
-.matrx-alchemy-workspace aside {
-  display: grid;
-  align-content: start;
-  gap: 0.75rem;
-}
-.matrx-alchemy-workspace aside textarea {
-  min-height: 8rem;
-  resize: vertical;
-}
-.matrx-alchemy-decision {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem;
-  border: 1px solid hsl(var(--border, 240 6% 90%));
-  border-radius: 0.375rem;
-  background: hsl(var(--muted, 240 5% 96%));
-}
-.matrx-alchemy-decision p {
-  flex: 1 1 16rem;
-  margin: 0;
-}
-.matrx-alchemy-error {
-  font-size: 0.8125rem;
-  color: hsl(var(--destructive, 0 84% 60%));
-}
-@media (max-width: 640px) {
-  .matrx-alchemy-workspace-grid {
-    grid-template-columns: 1fr;
-  }
-  .matrx-alchemy-preview {
-    min-height: 14rem;
-  }
-  .matrx-alchemy-column {
-    grid-template-columns: 1fr;
-  }
-}
-
-.matrx-alchemy-xs .matrx-alchemy-trigger {
-  width: 1.75rem;
-  height: 1.75rem;
-  padding: 0.375rem;
-}
-.matrx-alchemy-xs .matrx-alchemy-trigger svg {
-  width: 1rem;
-  height: 1rem;
-}
-.matrx-alchemy-sm .matrx-alchemy-trigger {
-  width: 2.25rem;
-  height: 2.25rem;
-}
-@media (pointer: coarse) {
-  .matrx-alchemy .matrx-alchemy-trigger {
-    width: 2.75rem;
-    height: 2.75rem;
-    padding: 0.625rem;
-  }
-  .matrx-alchemy-workspace input,
-  .matrx-alchemy-workspace select,
-  .matrx-alchemy-workspace textarea {
-    font-size: max(1rem, 1em);
-  }
-}
-
-.matrx-alchemy-menu-icon {
-  width: 1rem;
-  height: 1rem;
-  flex-shrink: 0;
-}
-.matrx-alchemy-menu-hint {
-  display: block;
-  color: hsl(var(--muted-foreground, 240 4% 46%));
-  font-size: 0.75rem;
-}
-
-/* Primitive chrome is scoped here so a plain React consumer needs no Tailwind build. */
-.matrx-alchemy-menu,
-.matrx-alchemy-workspace {
-  box-sizing: border-box;
-  font-family: inherit;
-  color: hsl(var(--foreground, 240 10% 4%));
-  background: hsl(var(--background, 0 0% 100%));
-  border: 1px solid hsl(var(--border, 240 6% 90%));
-  border-radius: 0.5rem;
-  box-shadow: 0 8px 28px hsl(var(--foreground, 240 10% 4%) / 0.12);
-}
-.matrx-alchemy-menu {
-  z-index: 10001;
-  padding: 0.4375rem;
-  max-height: var(--radix-popover-content-available-height, 80dvh);
-  overflow: auto;
-  overscroll-behavior: contain;
-  border-radius: 0.75rem;
-}
-@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;
-  inset: 0;
-  margin: auto;
-  translate: none;
-  height: fit-content;
-  width: min(48rem, calc(100vw - 2rem));
-  max-width: calc(100vw - 2rem);
-  padding: 1rem;
-  display: grid;
-  gap: 0.75rem;
-}
-[data-slot="dialog-overlay"]:has(+ .matrx-alchemy-workspace) {
-  position: fixed;
-  inset: 0;
-  z-index: 10000;
-  background: hsl(var(--foreground, 240 10% 4%) / 0.18);
-}
-.matrx-alchemy-workspace [data-slot="dialog-header"] {
-  display: grid;
-  gap: 0.375rem;
-  padding-right: 2.25rem;
-}
-.matrx-alchemy-workspace [data-slot="dialog-title"] {
-  margin: 0;
-  font-size: 1.125rem;
-  font-weight: 600;
-}
-.matrx-alchemy-workspace [data-slot="dialog-description"] {
-  margin: 0;
-  font-size: 0.875rem;
-  color: hsl(var(--muted-foreground, 240 4% 46%));
-}
-.matrx-alchemy-workspace [data-slot="dialog-footer"] {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 0.5rem;
-  align-items: center;
-}
-.matrx-alchemy-workspace-secondary,
-.matrx-alchemy-workspace-primary {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 2rem;
-  padding: 0.375rem 0.75rem;
-  border-radius: 0.375rem;
-  cursor: pointer;
-  font: inherit;
-  font-size: 0.8125rem;
-}
-.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-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 {
-  outline: 2px solid hsl(var(--ring, 240 5% 65%));
-  outline-offset: 2px;
-}
-.matrx-alchemy-workspace [data-slot="dialog-close"] {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  width: 2.5rem;
-  height: 2.5rem;
-  padding: 0.5rem;
-  border: 0;
-  background: transparent;
-}
-.matrx-alchemy-workspace [data-slot="dialog-close"] svg {
-  width: 1rem;
-  height: 1rem;
-}
-.matrx-alchemy-workspace [data-slot="dialog-close"] .sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-}
-@media (max-width: 767px) {
-  .matrx-alchemy-workspace [data-slot="dialog-footer"] > .matrx-alchemy-meta {
-    flex-basis: 100%;
-    text-align: right;
-  }
-  .matrx-alchemy-workspace {
-    inset: auto 0 0;
-    width: 100%;
-    max-width: 100%;
-    max-height: 92dvh;
-    padding: 1rem 1rem max(1rem, env(safe-area-inset-bottom));
-    border-radius: 0.75rem 0.75rem 0 0;
-  }
-}
-
-.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;
-}
-
-.matrx-alchemy-data-controls { max-height: none; }
-.matrx-alchemy-data-controls-body { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
-.matrx-alchemy-preview-label { display: flex; align-items: center; gap: 0.5rem; }
-.matrx-alchemy-preview-label select { width: auto; min-width: 10rem; max-width: 100%; }
-
-/* Subset shaping uses the same dialog chrome without recursive transfer controls. */
-.matrx-alchemy-subset { width: min(48rem, calc(100vw - 2rem)); height: min(80dvh, 42rem); }
-.matrx-alchemy-subset-body { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 0.75rem; }
-.matrx-alchemy-subset-columns { max-height: 8rem; overflow: auto; margin: 0; padding: 0.25rem; border: 0; font-size: 0.8125rem; }
-.matrx-alchemy-subset-columns legend { font-weight: 500; }
-.matrx-alchemy-subset-table { min-height: 18rem; overflow: hidden; }
-.matrx-alchemy-subset-format { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; }
-.matrx-alchemy-subset-format select { min-height: 2rem; border: 1px solid hsl(var(--border)); border-radius: 0.375rem; background: hsl(var(--background)); color: inherit; padding: 0.25rem 0.5rem; }
-@media (max-width: 767px) { .matrx-alchemy-subset { width: 100%; } }
-
-.matrx-alchemy-feedback { position: fixed; z-index: 10002; bottom: max(1rem, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.75rem; width: max-content; max-width: calc(100vw - 2rem); padding: 0.5rem 0.75rem; border: 1px solid hsl(var(--border)); border-radius: 0.5rem; background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: 0 4px 16px hsl(var(--foreground) / 0.12); font-size: 0.8125rem; }
-.matrx-alchemy-feedback button { flex-shrink: 0; width: 1.75rem; height: 1.75rem; border: 0; border-radius: 0.25rem; background: transparent; color: inherit; cursor: pointer; }
-.matrx-alchemy-feedback button:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; }
-
-/* Dialogs show their own result; an earlier page notice must not cover their actions. */
-body:has(.matrx-alchemy-workspace[data-state="open"]) > .matrx-alchemy-feedback { display: none; }
+@import "@ai-matrx/design-system/styles.css";

package/dist/tap-target.css

@@ -0,0 +1 @@
+@import "@ai-matrx/design-system/tap-target.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-matrx/alchemy",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "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",
@@ -33,8 +33,9 @@
     "CHANGELOG.md"
   ],
   "matrxPublishInputs": [
-    "../design-system/src/content-transfer.css",
-    "../design-system/src/content-transfer/alchemy.svg"
+    "../design-system/src/content-transfer/alchemy.svg",
+    "../design-system/src/content-transfer/portal.svg",
+    "../design-system/src/content-transfer/copy-transform.svg"
   ],
   "exports": {
     ".": {
@@ -88,7 +89,10 @@
       }
     },
     "./styles.css": "./dist/styles.css",
+    "./tap-target.css": "./dist/tap-target.css",
     "./alchemy.svg": "./dist/alchemy.svg",
+    "./portal.svg": "./dist/portal.svg",
+    "./copy-transform.svg": "./dist/copy-transform.svg",
     "./package.json": "./package.json"
   },
   "peerDependencies": {