@ai-matrx/design-system 0.18.9 → 0.18.12

package/dist/content-transfer.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/dist/content-transfer.d.cts

@@ -133,7 +133,7 @@ interface MatrxCopyMenuProps {
     disabled?: boolean;
     className?: string;
     stopPropagation?: boolean;
-    size?: "xs" | "icon" | "sm";
+    size?: "xs" | "icon" | "sm" | "toolbar";
     appearance?: "bare" | "segmented";
     unified?: boolean;
     grouped?: boolean;
@@ -173,6 +173,8 @@ interface TransferMenuPresentation {
         className?: string;
     }>;
     ariaLabel?: string;
+    /** Download-only actions join the shared format palette instead of a second menu. */
+    placement?: "download";
 }
 interface TransferMenuVariant extends TransferMenuPresentation {
     id: string;
@@ -196,6 +198,8 @@ interface ContentTransferMenuProps {
     };
     /** A quick format may explicitly capture a different representation. */
     formatSources?: Partial<Record<SerializableFormat, Source | Payload>>;
+    /** Set false for action-only hosts; source formats and adapters are then omitted. */
+    sourceFormats?: boolean;
     /** Named alternate sources open this same preparation workspace. */
     variants?: readonly TransferMenuVariant[];
     actions?: (PageAction & TransferMenuPresentation)[];

package/dist/content-transfer.d.ts

@@ -133,7 +133,7 @@ interface MatrxCopyMenuProps {
     disabled?: boolean;
     className?: string;
     stopPropagation?: boolean;
-    size?: "xs" | "icon" | "sm";
+    size?: "xs" | "icon" | "sm" | "toolbar";
     appearance?: "bare" | "segmented";
     unified?: boolean;
     grouped?: boolean;
@@ -173,6 +173,8 @@ interface TransferMenuPresentation {
         className?: string;
     }>;
     ariaLabel?: string;
+    /** Download-only actions join the shared format palette instead of a second menu. */
+    placement?: "download";
 }
 interface TransferMenuVariant extends TransferMenuPresentation {
     id: string;
@@ -196,6 +198,8 @@ interface ContentTransferMenuProps {
     };
     /** A quick format may explicitly capture a different representation. */
     formatSources?: Partial<Record<SerializableFormat, Source | Payload>>;
+    /** Set false for action-only hosts; source formats and adapters are then omitted. */
+    sourceFormats?: boolean;
     /** Named alternate sources open this same preparation workspace. */
     variants?: readonly TransferMenuVariant[];
     actions?: (PageAction & TransferMenuPresentation)[];