@ai-matrx/design-system 0.17.4 → 0.18.1

package/dist/content-transfer.css

@@ -0,0 +1,382 @@
+/* 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-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;
+}
+.matrx-alchemy-workspace-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr);
+  gap: 1rem;
+  min-height: 0;
+}
+.matrx-alchemy-main {
+  display: grid;
+  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 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: 20rem;
+  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.25rem;
+  max-height: var(--radix-dropdown-menu-content-available-height, 80dvh);
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+.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%));
+}
+.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));
+  max-width: calc(100vw - 2rem);
+  padding: 1.5rem;
+  display: grid;
+  gap: 1rem;
+}
+[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-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  align-items: center;
+}
+.matrx-alchemy-workspace button {
+  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;
+  font: inherit;
+  font-size: 0.8125rem;
+  cursor: pointer;
+}
+.matrx-alchemy-workspace button:hover {
+  background: hsl(var(--accent, 240 5% 96%));
+}
+.matrx-alchemy-workspace button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.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 {
+    top: auto;
+    bottom: 0;
+    left: 0;
+    translate: none;
+    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); }

package/dist/content-transfer.d.cts

@@ -0,0 +1,208 @@
+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';
+
+type AlchemyOptionValues = Record<string, boolean | number>;
+type AlchemySourceOption = {
+    kind: "toggle";
+    key: string;
+    label: string;
+    hint?: string;
+    default: boolean;
+} | {
+    kind: "preset";
+    key: string;
+    label: string;
+    options: {
+        label: string;
+        value: number;
+    }[];
+    default: number;
+} | {
+    kind: "slider";
+    key: string;
+    label: string;
+    hint?: string;
+    stops: number[];
+    default: number;
+    formatValue: (value: number) => string;
+} | {
+    kind: "number";
+    key: string;
+    label: string;
+    hint?: string;
+    min?: number;
+    step?: number;
+    presets?: {
+        label: string;
+        value: number;
+    }[];
+    default: number;
+};
+interface AlchemyCustomSource {
+    label?: string;
+    hint?: string;
+    options: AlchemySourceOption[];
+    build(values: AlchemyOptionValues): {
+        text: string;
+        meta?: Record<string, string | number | boolean | undefined>;
+    };
+    wrap(text: string, values: AlchemyOptionValues, meta?: Record<string, string | number | boolean | undefined>): AgentPayloadInput;
+    dialogTitle?: string;
+    dialogDescription?: string;
+}
+type AlchemyDetail = "full" | "compact" | "brief";
+interface AlchemyGroomerSection {
+    id: string;
+    title: string;
+    description?: string;
+    cuttable?: boolean;
+    levelLabels?: Partial<Record<AlchemyDetail, string>>;
+    build(level: AlchemyDetail): unknown;
+    defaultSelection?: AlchemyDetail | "off";
+}
+interface AlchemyGroomerConfig {
+    label: string;
+    kind: string;
+    location: string;
+    description: string;
+    attributes?: AgentPayloadInput["attributes"];
+    context?: AgentPayloadInput["context"];
+    summary?: string;
+    sections: AlchemyGroomerSection[];
+}
+interface AlchemyCopyVariant {
+    id: string;
+    label: string;
+    hint?: string;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    section?: "copy" | "ai";
+    ariaLabel?: string;
+    successMessage?: string;
+    build?: () => AgentPayloadInput | string | Promise<AgentPayloadInput | string>;
+    onSelect?: () => void | Promise<void>;
+    modal?: (props: {
+        open: boolean;
+        onOpenChange: (open: boolean) => void;
+    }) => React.ReactNode;
+}
+interface AlchemyExportItem {
+    id: string;
+    label: string;
+    build?: () => {
+        content: BlobPart;
+        extension: string;
+        mime: string;
+    };
+    onSelect?: () => void | Promise<void>;
+}
+type Resolvable<T> = T | (() => T);
+interface MatrxCopyMenuProps {
+    label: string;
+    /** Stable record identity when this mounted control can switch between records. */
+    sourceId?: string;
+    human?: Resolvable<string>;
+    json?: Resolvable<unknown>;
+    agent?: Resolvable<AgentPayloadInput | string>;
+    aiVariants?: AlchemyCopyVariant[];
+    aiCustom?: AlchemyCustomSource;
+    groomer?: () => AlchemyGroomerConfig;
+    agentVariant?: {
+        id?: string;
+        label?: string;
+        hint?: string;
+        position?: "first" | "last";
+    };
+    export?: {
+        items: AlchemyExportItem[];
+        sheetRows?: () => Array<Record<string, unknown>>;
+    };
+    /** Host-owned authenticated destination, not a second export serializer. */
+    sendToSheet?: (rows: Array<Record<string, unknown>>, label: string) => Promise<TransferOutcome>;
+    hide?: Array<"copy" | "ai" | "export">;
+    disabled?: boolean;
+    className?: string;
+    stopPropagation?: boolean;
+    size?: "xs" | "icon" | "sm";
+    appearance?: "bare" | "segmented";
+    unified?: boolean;
+    grouped?: boolean;
+}
+/** Opinionated bridge for Matrx's existing content builders, with one transfer UI. */
+declare function MatrxCopyMenu(props: MatrxCopyMenuProps): React.JSX.Element;
+type AlchemyGroomerPreset = "everything" | "balanced" | "minimal";
+declare const GROOMER_LEVELS: AlchemyDetail[];
+declare function applyGroomerPreset(preset: AlchemyGroomerPreset, sections: AlchemyGroomerSection[]): Record<string, AlchemyDetail | "off">;
+declare function defaultGroomerSelections(sections: AlchemyGroomerSection[]): Record<string, AlchemyDetail | "off">;
+declare function buildGroomerPresetPayload(config: AlchemyGroomerConfig, preset: AlchemyGroomerPreset): AgentPayloadInput;
+declare function groomerPresetVariants(getConfig: () => AlchemyGroomerConfig): AlchemyCopyVariant[];
+
+declare function AlchemyGlyph(props: React.SVGAttributes<SVGSVGElement>): React.JSX.Element;
+type ContentTransferCapabilities = TransferCapabilities & {
+    transport?: Transport;
+    actions?: PageAction[];
+    preferences?: TransferPreferenceOverrides;
+    onOutcome?: (outcome: TransferOutcome) => void;
+};
+declare function ContentTransferCapabilitiesProvider({ value, children }: {
+    value: ContentTransferCapabilities;
+    children: React.ReactNode;
+}): React.JSX.Element;
+declare const useContentTransferCapabilities: () => ContentTransferCapabilities;
+declare function ContentTransferSurfaceProvider({ handle, children }: {
+    handle: SurfaceHandle;
+    children: React.ReactNode;
+}): React.JSX.Element;
+declare const useContentTransferSurface: () => SurfaceHandle | null;
+type SerializableFormat = "plain" | "markdown" | "html" | "json" | "compact-json" | "csv" | "tsv";
+interface TransferMenuPresentation {
+    hint?: string;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    ariaLabel?: string;
+}
+interface TransferMenuVariant extends TransferMenuPresentation {
+    id: string;
+    label: string;
+    source: Source | Payload;
+    copyLabel?: string;
+    section?: "copy" | "ai";
+    successMessage?: string;
+}
+interface ContentTransferMenuProps {
+    source?: Payload | Source;
+    projection?: ExportProjection;
+    sections?: Section[];
+    preferences?: TransferPreferenceOverrides;
+    enabled?: boolean;
+    surface?: SurfaceHandle;
+    label?: string;
+    table?: {
+        availableScopes: TransferScope[];
+        initialScope: TransferScope;
+    };
+    /** A quick format may explicitly capture a different representation. */
+    formatSources?: Partial<Record<SerializableFormat, Source | Payload>>;
+    /** Named alternate sources open this same preparation workspace. */
+    variants?: readonly TransferMenuVariant[];
+    actions?: (PageAction & TransferMenuPresentation)[];
+    capabilities?: ContentTransferCapabilities;
+    disabled?: boolean;
+    className?: string;
+    stopPropagation?: boolean;
+    hide?: readonly ("copy" | "prepare" | "download")[];
+    controllerRef?: React.Ref<ContentTransferController>;
+}
+interface ContentTransferController {
+    focusTrigger(): void;
+    prepare(source: Source | Payload, options?: {
+        id?: string;
+        label?: string;
+    }): Promise<void>;
+}
+declare function ContentTransferMenu({ source, surface, label, projection, sections, preferences, table, formatSources, variants, actions, capabilities: local, disabled, enabled, className, stopPropagation, hide, controllerRef }: ContentTransferMenuProps): React.JSX.Element | null;
+
+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 };