@ai-matrx/design-system 0.86.338 → 0.86.340

package/dist/content-transfer.css

@@ -66,18 +66,28 @@ button[data-alchemy-trigger="icon"] > svg { width: 0.875rem; height: 0.875rem; s
 .matrx-alchemy-palette-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .matrx-alchemy-palette-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .matrx-alchemy-palette-tile { display: grid; place-items: center; align-content: center; gap: 0.1875rem; min-width: 0; min-height: 2.75rem; padding: 0.3125rem 0; border: 0; border-radius: 0.375rem; background: transparent; color: hsl(var(--foreground, 240 10% 4%)); font: inherit; font-size: 0.6875rem; line-height: 1.15; text-align: center; cursor: pointer; }
-.matrx-alchemy-palette-tile > span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* The strip's tiles are the design-system Tile (layout="stack"), whose card padding and 4.5rem height are
+   `!important` in the tap-lock layer — so the palette's compact tile is declared in that layer, one step more
+   specific, borderless (the palette is one surface, no box inside it). Unlayered, it lost: "Markdown" read
+   "Ma…" in a 58px column. */
+@layer matrx-tap-lock {
+  .matrx-tile.matrx-alchemy-palette-tile[data-layout="stack"] { align-items: center !important; justify-content: center !important; gap: 0.1875rem !important; min-height: 2.75rem !important; padding: 0.3125rem 0 !important; border-width: 0 !important; background-color: transparent !important; }
+  .matrx-tile.matrx-alchemy-palette-tile[data-layout="stack"] .matrx-tile-text { width: 100%; align-items: center; }
+  .matrx-tile.matrx-alchemy-palette-tile[data-layout="stack"] .matrx-tile-title { max-width: 100%; font-size: 0.6875rem !important; font-weight: 400 !important; line-height: 1.15 !important; text-align: center; }
+}
 .matrx-alchemy-palette-glyph { width: 1rem; height: 1rem; color: hsl(var(--muted-foreground, 240 4% 46%)); flex: 0 0 auto; }
-.matrx-alchemy-palette-tile > :is(.matrx-alchemy-palette-glyph, .matrx-alchemy-menu-icon, .matrx-alchemy-copied-check) { width: 1rem; height: 1rem; }
+.matrx-alchemy-palette-tile :is(.matrx-alchemy-palette-glyph, .matrx-alchemy-menu-icon, .matrx-alchemy-copied-check) { width: 1rem; height: 1rem; }
 .matrx-alchemy-palette-group { display: grid; gap: 0; margin-top: 0.25rem; padding-top: 0.25rem; border-top: 1px solid hsl(var(--border, 240 6% 90%)); }
 .matrx-alchemy-palette > .matrx-alchemy-palette-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
 .matrx-alchemy-palette-row,
 .matrx-alchemy-palette-fold > summary { display: flex; align-items: center; gap: 0.5rem; width: 100%; min-height: 1.75rem; padding: 0.25rem 0.5rem; border: 0; border-radius: 0.3125rem; background: transparent; color: hsl(var(--foreground, 240 10% 4%)); font: inherit; font-size: 0.8125rem; font-weight: 400; line-height: 1.2; text-align: left; cursor: pointer; }
-.matrx-alchemy-palette-row > span,
+/* A row is a Tile: only its text column grows. Every-span (`> span`) also grew Tile's icon slot to half the
+   row and pushed each label to the right edge. */
+.matrx-alchemy-palette-row > .matrx-tile-text,
 .matrx-alchemy-palette-fold > summary > span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.matrx-alchemy-palette-row > :is(.matrx-alchemy-palette-glyph, .matrx-alchemy-menu-icon),
+.matrx-alchemy-palette-row :is(.matrx-alchemy-palette-glyph, .matrx-alchemy-menu-icon),
 .matrx-alchemy-palette-fold > summary > .matrx-alchemy-palette-glyph { width: 1rem; height: 1rem; }
-.matrx-alchemy-palette-row-ai > .matrx-alchemy-palette-glyph { color: hsl(var(--primary, 262 43% 51%)); }
+.matrx-alchemy-palette-row-ai .matrx-alchemy-palette-glyph { color: hsl(var(--primary, 262 43% 51%)); }
 .matrx-alchemy-palette-fold > summary { list-style: none; }
 .matrx-alchemy-palette-fold > summary::-webkit-details-marker { display: none; }
 .matrx-alchemy-palette-fold > summary .matrx-alchemy-disclosure { width: 0.875rem; height: 0.875rem; color: hsl(var(--muted-foreground, 240 4% 46%)); transition: transform 120ms ease; }
@@ -694,7 +704,7 @@ label.matrx-alchemy-prep-node.matrx-alchemy-check > .matrx-alchemy-prep-size { g
 /* Inside a host menu (row ⋯ › Alchemy) the host's panel IS the surface: never a card inside it. */
 .matrx-alchemy-menu.matrx-alchemy-palette[data-embedded] { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
 .matrx-alchemy-palette-row[data-copied="true"] .matrx-alchemy-copied-check { color: hsl(var(--success)); }
-.matrx-alchemy-palette-row > .matrx-alchemy-copied-check { width: 1rem; height: 1rem; }
+.matrx-alchemy-palette-row .matrx-alchemy-copied-check { width: 1rem; height: 1rem; }
 /* Choose what to copy (2026-10-14): the token budget row above the data tree. */
 .matrx-alchemy-prep-budget { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; margin-bottom: 0.5rem; }
 .matrx-alchemy-prep-budget-meter { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: hsl(var(--foreground)); }