@ai-matrx/design-system 0.86.338 → 0.86.339

package/CHANGELOG.md

@@ -1,9 +1,30 @@
 # Changelog
 
+## 0.86.339
+
+- **Hover text has a touch twin** (2026-10-23): where nothing can hover (a phone, a mouse-less tablet) a menu row's hover text is its muted second line — the menu look's `labelTitle` (every `ItemMenu` dropdown / right-click row) and a `SelectItem`'s `description` draw a `[data-touch-hint]` line shown only under `(hover: none)` (menu-look.css), and the phone `ItemMenuDrawer` draws an entry's `description` under its label again. Desktop keeps one line per row. Proof: `src/item/hover-text-has-a-touch-twin.test.tsx`, `src/select.test.tsx`. Consumer action: none.
+
 ## 0.86.338
 
-UNVERIFIED: this release has no Unreleased entry and the source comparison could not be made (the caller supplied no source comparison). Whether source changed is unknown; consumer action is unknown.
-Check the package's gitHead on npm against this version's gitHead: `git diff <previous gitHead> <this gitHead> -- apps/shared/design-system/src`.
+SOURCE CHANGED WITH NO RELEASE NOTE. This release shipped source changes that nobody described in an Unreleased entry,
+so they may include breaking API changes. Consumer action is UNKNOWN: read the diff before upgrading.
+Diff: `git diff 903759de6e 82d533cb27 -- apps/shared/design-system/src`
+
+Changed shipped source files (5):
+- `apps/shared/design-system/src/item/ItemMenuDrawer.tsx`
+- `apps/shared/design-system/src/item/types.ts`
+- `apps/shared/design-system/src/menu-look.css`
+- `apps/shared/design-system/src/menu-look.tsx`
+- `apps/shared/design-system/src/select.tsx`
+
+## 0.86.337
+
+SOURCE CHANGED WITH NO RELEASE NOTE. This release shipped source changes that nobody described in an Unreleased entry,
+so they may include breaking API changes. Consumer action is UNKNOWN: read the diff before upgrading.
+Diff: `git diff 1273dc6962 903759de6e -- apps/shared/design-system/src`
+
+Changed shipped source files (1):
+- `apps/shared/design-system/src/organization-picker.tsx`
 
 ## 0.86.336
 

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)); }

package/dist/index.cjs

@@ -13315,7 +13315,7 @@ function MenuDoor({ action, menu, disabled }) {
         variant: "quiet",
         "aria-label": action.label,
         title: action.label,
-        icon: action.busy ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Loader2Icon, { className: "animate-spin" }) : glyph,
+        icon: action.busy ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Loader2Icon, { className: "matrx-spin" }) : glyph,
         className: "shrink-0",
         disabled: disabled || action.busy,
         onClick: (event) => event.stopPropagation()
@@ -13544,7 +13544,7 @@ function PeekCardFooter({ primary, primaryAt, onSettings, doors = [], copy, open
       style: fills ? { minWidth: PEEK_PRIMARY_MIN_PX[sheet ? "sheet" : "card"] } : void 0,
       disabled: loading || primary.disabled || primary.busy,
       title: primary.title,
-      icon: primary.busy ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Loader2Icon, { className: "animate-spin" }) : void 0,
+      icon: primary.busy ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Loader2Icon, { className: "matrx-spin" }) : void 0,
       onClick: primary.onClick,
       children: primary.label
     }