@ai-matrx/design-system 0.18.10 → 0.18.12

package/dist/content-transfer.css

@@ -42,6 +42,21 @@
   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;
@@ -79,8 +94,9 @@
   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;
@@ -88,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;
 }
@@ -128,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;
@@ -287,13 +319,11 @@
 .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;
@@ -327,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 {
@@ -379,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;
@@ -393,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;

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;