@ai-matrx/design-system 0.18.21 → 0.19.0

package/dist/content-transfer.css

@@ -1,37 +1,10 @@
 /* Structural Alchemy rules. Hosts own token values; Tailwind is never required. */
+@import "./tap-target.css";
 .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));
@@ -134,6 +107,7 @@
 .matrx-alchemy-toolbar select,
 .matrx-alchemy-preview-label select,
 .matrx-alchemy-workspace aside textarea,
+.matrx-alchemy-workspace aside select,
 .matrx-alchemy-options input {
   min-height: 2.25rem;
   border: 1px solid hsl(var(--border, 240 6% 90%));
@@ -256,25 +230,7 @@
   }
 }
 
-.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 {
@@ -434,34 +390,6 @@
 .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; }
@@ -483,3 +411,18 @@
 
 /* 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; }
+
+.matrx-alchemy-destination-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.25rem; margin-top: 0.5rem; padding: 0.25rem; }
+.matrx-alchemy-destination-grid button:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.matrx-alchemy-receipt-link { flex-shrink: 0; color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 2px; }
+
+.matrx-alchemy-workspace aside { min-width: 0; }
+.matrx-alchemy-workspace aside select { width: 100%; min-width: 0; }
+.matrx-alchemy-palette { overflow-y: auto; overscroll-behavior: contain; }
+.matrx-alchemy-palette-destinations { margin-top: 0.375rem; padding-top: 0.375rem; border-top: 1px solid hsl(var(--border)); }
+.matrx-alchemy-palette-destinations > summary { display: flex; align-items: center; justify-content: space-between; min-height: 2.25rem; padding: 0.375rem 0.5rem; border-radius: 0.3125rem; font-size: 0.8125rem; font-weight: 500; cursor: pointer; list-style: none; }
+.matrx-alchemy-palette-destinations > summary::-webkit-details-marker { display: none; }
+.matrx-alchemy-palette-destinations > summary > span { font-size: 0.6875rem; color: hsl(var(--muted-foreground)); }
+.matrx-alchemy-palette-destinations > summary:hover { background: hsl(var(--accent)); }
+.matrx-alchemy-palette-destinations > summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px hsl(var(--ring)); }

package/dist/content-transfer.d.cts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { AgentPayloadInput, TransferOutcome, TransferCapabilities, Transport, PageAction, TransferPreferenceOverrides, Source, Payload, ExportProjection, Section, SurfaceHandle, TransferScope } from '@ai-matrx/kit/content-transfer';
-export { ALCHEMY_GLYPH_SVG } from './content-transfer/icon.cjs';
+import { AlchemyIcon } from './content-transfer/icon.cjs';
+export { ALCHEMY_COPY_TRANSFORM_SVG, ALCHEMY_GLYPH_SVG } from './content-transfer/icon.cjs';
 
 type AlchemyOptionValues = Record<string, boolean | number>;
 type AlchemySourceOption = {
@@ -137,6 +138,8 @@ interface MatrxCopyMenuProps {
     appearance?: "bare" | "segmented";
     unified?: boolean;
     grouped?: boolean;
+    icon?: AlchemyIcon;
+    triggerVariant?: "transparent" | "glass";
 }
 /** Opinionated bridge for Matrx's existing content builders, with one transfer UI. */
 declare function MatrxCopyMenu(props: MatrxCopyMenuProps): React.JSX.Element;
@@ -147,7 +150,9 @@ declare function defaultGroomerSelections(sections: AlchemyGroomerSection[]): Re
 declare function buildGroomerPresetPayload(config: AlchemyGroomerConfig, preset: AlchemyGroomerPreset): AgentPayloadInput;
 declare function groomerPresetVariants(getConfig: () => AlchemyGroomerConfig): AlchemyCopyVariant[];
 
-declare function AlchemyGlyph(props: React.SVGAttributes<SVGSVGElement>): React.JSX.Element;
+declare function AlchemyGlyph({ icon, ...props }: React.SVGAttributes<SVGSVGElement> & {
+    icon?: AlchemyIcon;
+}): React.JSX.Element;
 type ContentTransferCapabilities = TransferCapabilities & {
     /** Opaque host session boundary. It is used only to reset local menu state. */
     identityKey?: string;
@@ -168,6 +173,8 @@ declare function ContentTransferSurfaceProvider({ handle, children }: {
 declare const useContentTransferSurface: () => SurfaceHandle | null;
 type SerializableFormat = "plain" | "markdown" | "html" | "json" | "compact-json" | "csv" | "tsv";
 interface TransferMenuPresentation {
+    group?: "save" | "chat";
+    prepared?: boolean;
     hint?: string;
     icon?: React.ComponentType<{
         className?: string;
@@ -205,6 +212,10 @@ interface ContentTransferMenuProps {
     actions?: (PageAction & TransferMenuPresentation)[];
     capabilities?: ContentTransferCapabilities;
     disabled?: boolean;
+    /** Portal is the default Alchemy mark; copy-transform remains opt-in. */
+    icon?: AlchemyIcon;
+    /** Uses the canonical TapTargetButton presentation. */
+    triggerVariant?: "transparent" | "glass";
     className?: string;
     stopPropagation?: boolean;
     hide?: readonly ("copy" | "prepare" | "download")[];
@@ -219,4 +230,4 @@ interface ContentTransferController {
 }
 declare function ContentTransferMenu(props: ContentTransferMenuProps): React.JSX.Element;
 
-export { type AlchemyCopyVariant, type AlchemyCustomSource, type AlchemyDetail, type AlchemyExportItem, AlchemyGlyph, type AlchemyGroomerConfig, type AlchemyGroomerPreset, type AlchemyGroomerSection, type AlchemyOptionValues, type AlchemySourceOption, type ContentTransferCapabilities, ContentTransferCapabilitiesProvider, type ContentTransferController, ContentTransferMenu, type ContentTransferMenuProps, ContentTransferSurfaceProvider, GROOMER_LEVELS, MatrxCopyMenu, type MatrxCopyMenuProps, type SerializableFormat, type TransferMenuPresentation, type TransferMenuVariant, applyGroomerPreset, buildGroomerPresetPayload, defaultGroomerSelections, groomerPresetVariants, useContentTransferCapabilities, useContentTransferSurface };
+export { type AlchemyCopyVariant, type AlchemyCustomSource, type AlchemyDetail, type AlchemyExportItem, AlchemyGlyph, type AlchemyGroomerConfig, type AlchemyGroomerPreset, type AlchemyGroomerSection, AlchemyIcon, type AlchemyOptionValues, type AlchemySourceOption, type ContentTransferCapabilities, ContentTransferCapabilitiesProvider, type ContentTransferController, ContentTransferMenu, type ContentTransferMenuProps, ContentTransferSurfaceProvider, GROOMER_LEVELS, MatrxCopyMenu, type MatrxCopyMenuProps, type SerializableFormat, type TransferMenuPresentation, type TransferMenuVariant, applyGroomerPreset, buildGroomerPresetPayload, defaultGroomerSelections, groomerPresetVariants, useContentTransferCapabilities, useContentTransferSurface };

package/dist/content-transfer.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { AgentPayloadInput, TransferOutcome, TransferCapabilities, Transport, PageAction, TransferPreferenceOverrides, Source, Payload, ExportProjection, Section, SurfaceHandle, TransferScope } from '@ai-matrx/kit/content-transfer';
-export { ALCHEMY_GLYPH_SVG } from './content-transfer/icon.js';
+import { AlchemyIcon } from './content-transfer/icon.js';
+export { ALCHEMY_COPY_TRANSFORM_SVG, ALCHEMY_GLYPH_SVG } from './content-transfer/icon.js';
 
 type AlchemyOptionValues = Record<string, boolean | number>;
 type AlchemySourceOption = {
@@ -137,6 +138,8 @@ interface MatrxCopyMenuProps {
     appearance?: "bare" | "segmented";
     unified?: boolean;
     grouped?: boolean;
+    icon?: AlchemyIcon;
+    triggerVariant?: "transparent" | "glass";
 }
 /** Opinionated bridge for Matrx's existing content builders, with one transfer UI. */
 declare function MatrxCopyMenu(props: MatrxCopyMenuProps): React.JSX.Element;
@@ -147,7 +150,9 @@ declare function defaultGroomerSelections(sections: AlchemyGroomerSection[]): Re
 declare function buildGroomerPresetPayload(config: AlchemyGroomerConfig, preset: AlchemyGroomerPreset): AgentPayloadInput;
 declare function groomerPresetVariants(getConfig: () => AlchemyGroomerConfig): AlchemyCopyVariant[];
 
-declare function AlchemyGlyph(props: React.SVGAttributes<SVGSVGElement>): React.JSX.Element;
+declare function AlchemyGlyph({ icon, ...props }: React.SVGAttributes<SVGSVGElement> & {
+    icon?: AlchemyIcon;
+}): React.JSX.Element;
 type ContentTransferCapabilities = TransferCapabilities & {
     /** Opaque host session boundary. It is used only to reset local menu state. */
     identityKey?: string;
@@ -168,6 +173,8 @@ declare function ContentTransferSurfaceProvider({ handle, children }: {
 declare const useContentTransferSurface: () => SurfaceHandle | null;
 type SerializableFormat = "plain" | "markdown" | "html" | "json" | "compact-json" | "csv" | "tsv";
 interface TransferMenuPresentation {
+    group?: "save" | "chat";
+    prepared?: boolean;
     hint?: string;
     icon?: React.ComponentType<{
         className?: string;
@@ -205,6 +212,10 @@ interface ContentTransferMenuProps {
     actions?: (PageAction & TransferMenuPresentation)[];
     capabilities?: ContentTransferCapabilities;
     disabled?: boolean;
+    /** Portal is the default Alchemy mark; copy-transform remains opt-in. */
+    icon?: AlchemyIcon;
+    /** Uses the canonical TapTargetButton presentation. */
+    triggerVariant?: "transparent" | "glass";
     className?: string;
     stopPropagation?: boolean;
     hide?: readonly ("copy" | "prepare" | "download")[];
@@ -219,4 +230,4 @@ interface ContentTransferController {
 }
 declare function ContentTransferMenu(props: ContentTransferMenuProps): React.JSX.Element;
 
-export { type AlchemyCopyVariant, type AlchemyCustomSource, type AlchemyDetail, type AlchemyExportItem, AlchemyGlyph, type AlchemyGroomerConfig, type AlchemyGroomerPreset, type AlchemyGroomerSection, type AlchemyOptionValues, type AlchemySourceOption, type ContentTransferCapabilities, ContentTransferCapabilitiesProvider, type ContentTransferController, ContentTransferMenu, type ContentTransferMenuProps, ContentTransferSurfaceProvider, GROOMER_LEVELS, MatrxCopyMenu, type MatrxCopyMenuProps, type SerializableFormat, type TransferMenuPresentation, type TransferMenuVariant, applyGroomerPreset, buildGroomerPresetPayload, defaultGroomerSelections, groomerPresetVariants, useContentTransferCapabilities, useContentTransferSurface };
+export { type AlchemyCopyVariant, type AlchemyCustomSource, type AlchemyDetail, type AlchemyExportItem, AlchemyGlyph, type AlchemyGroomerConfig, type AlchemyGroomerPreset, type AlchemyGroomerSection, AlchemyIcon, type AlchemyOptionValues, type AlchemySourceOption, type ContentTransferCapabilities, ContentTransferCapabilitiesProvider, type ContentTransferController, ContentTransferMenu, type ContentTransferMenuProps, ContentTransferSurfaceProvider, GROOMER_LEVELS, MatrxCopyMenu, type MatrxCopyMenuProps, type SerializableFormat, type TransferMenuPresentation, type TransferMenuVariant, applyGroomerPreset, buildGroomerPresetPayload, defaultGroomerSelections, groomerPresetVariants, useContentTransferCapabilities, useContentTransferSurface };