@qilin-agent/client-ui-primitives 3.1.7 → 3.1.8

package/lib/Menu.module.css

@@ -3,8 +3,7 @@
   display: inline-flex;
 }
 
-/* Dropdown card (figma MenuDropdown 122:9481 / 419:16920): menu surface,
- * r12, elevation-prominent (hairline stroke in shadow), 4px inset padding. */
+/* Compact translucent dropdown card shared by feature menus. */
 .list,
 .submenu {
   /* min-widths below are the design's outer card widths — include the pad. */
@@ -14,27 +13,30 @@
   flex-direction: column;
   gap: 0;
   border: 0;
-  border-radius: 20px;
-  background: var(--qilin-specific-menu);
-  --qilin-elevation-stroke-color: var(--qilin-alias-border-l1);
-  box-shadow: var(--qilin-elevation-prominent);
+  --dsw-elevation-stroke-color: var(--dsw-alias-border-l1);
+  box-shadow: var(--dsw-elevation-prominent);
   /* Elevated surface: the scrollbar thumb takes the l2 elevation tokens. The
      declaration sits on the card rather than on `.scrollable .viewport`
      because the elevation is a property of this surface, and the custom
      properties inherit down to whichever descendant actually scrolls (see
      ui-theme styles/scrollbar.css for the rebinding contract). */
-  --qilin-scrollbar-thumb: var(--qilin-alias-scrollbar-bg-l2);
-  --qilin-scrollbar-thumb-hover: var(--qilin-alias-scrollbar-hover-l2);
+  --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
+  --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
 }
 
-/* Primary card is 218 wide in the design across both hosts. */
+/* Primary cards grow with their content between compact and readable bounds. */
 .list {
   position: absolute;
   top: calc(100% + 4px);
   left: 0;
   z-index: 100;
-  min-width: 218px;
-  max-width: 360px;
+  min-width: min(144px, var(--dsh-anchored-max-width, 100vw));
+  max-width: min(360px, var(--dsh-anchored-max-width, 100vw));
+}
+
+/* Legacy slots can render no rows; keep empty context popups out of layout. */
+.list[data-context-menu]:not(:has([role='menuitem'])) {
+  display: none;
 }
 
 /* Portal mode: fixed in the viewport, coordinates supplied inline from the
@@ -60,12 +62,17 @@
 }
 
 /* Viewport fit: the card stops 12px short of the viewport's top/bottom edges
- * (24 = 2 × the portal MARGIN in Menu.tsx) and taller content scrolls inside
- * .viewport, so a pinned .footer stays visible. Menus with submenu rows skip
- * this class — the overflow clip would crop the side card, so they rely on
- * staying short. */
+ * (the portal MARGIN in Menu.tsx; the top side widens to the frame's published
+ * overlay inset) and taller content scrolls inside .viewport, so a pinned
+ * .footer stays visible. The dynamic unit, not `vh`: mobile browser chrome
+ * shrinks the visible height while `vh` keeps the taller bars-hidden height, so
+ * a `vh` cap exceeds the viewport the placement clamps into and the card ends
+ * up taller than the screen showing it. Menus with submenu rows skip this
+ * class — the overflow clip would crop the side card, so they rely on staying
+ * short. */
 .scrollable {
-  max-height: calc(100vh - 24px);
+  max-height: min(calc(100vh - 12px - max(12px, var(--dsh-frame-overlay-top, 12px))), var(--dsh-anchored-max-height, 100vh));
+  max-height: min(calc(100dvh - 12px - max(12px, var(--dsh-frame-overlay-top, 12px))), var(--dsh-anchored-max-height, 100vh));
 }
 
 .viewport {
@@ -84,87 +91,94 @@
   flex: none;
   display: flex;
   flex-direction: column;
-  margin-top: 4px;
-  padding-top: 4px;
-  border-top: 0.5px solid var(--qilin-alias-border-l2);
+  margin-top: 3px;
+  padding-top: 3px;
+  border-top: 0.5px solid var(--dsw-alias-border-l2);
+}
+
+.list[data-context-menu] .footer:has(> .separator:first-child) {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: none;
 }
 
 .itemWrap {
   position: relative;
 }
 
-/* Menu cell (figma .Menu_cell): min-h 40, r10, pad 10/8, 14/22 primary,
- * gap 8 between leading icon / label / trailing check. */
+/* Menu cell: compact text, icon, and selection spacing. */
 .item {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
   width: 100%;
-  min-height: 40px;
-  padding: 8px 10px;
+  min-height: 34px;
+  padding: 6px 8px;
   border: none;
-  border-radius: 10px;
+  border-radius: var(--dsw-radius-md);
   background: transparent;
   cursor: pointer;
-  font-size: 14px;
-  line-height: 22px;
-  color: var(--qilin-alias-label-primary);
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--dsw-alias-label-primary);
   text-align: left;
 }
 
-.item:hover:not(:disabled) {
-  background: var(--qilin-alias-interactive-bg-hover);
+@media (hover: hover) {
+  .item:hover:not(:disabled):not([aria-disabled='true']) {
+    background: var(--dsw-alias-interactive-bg-hover);
+  }
 }
 
 /* Arrow navigation moves real focus, so the row the keyboard is on carries the
    same fill the pointer gets: the fill is the row's focus indication, and the
    browser's default ring would double it. */
 .item:focus-visible:not(:disabled) {
-  background: var(--qilin-alias-interactive-bg-hover);
+  background: var(--dsw-alias-interactive-bg-hover);
   outline: none;
 }
 
 .denseList .item {
-  min-height: 34px;
-  padding-block: 5px;
+  min-height: 30px;
+  padding-block: 4px;
 }
 
 .denseList .label {
-  padding-block: 4px;
+  padding-block: 3px;
 }
 
 .list.compactList,
 .submenu.compactList {
-  min-width: 164px;
-  padding: 2px;
-  border-radius: 7px;
+  min-width: min(156px, var(--dsh-anchored-max-width, 100vw));
+  padding: 4px;
 }
 
 .compactList .item {
-  min-height: 26px;
-  gap: 6px;
-  padding: 3px 7px;
-  border-radius: 5px;
-  font-size: 12px;
-  line-height: 18px;
+  min-height: 24px;
+  gap: 5px;
+  padding: 2px 6px;
+  border-radius: var(--dsw-radius-sm);
+  font-size: 11px;
+  line-height: 17px;
 }
 
 .compactList .itemIcon {
-  width: 14px;
-  height: 14px;
+  width: 12px;
+  height: 12px;
 }
 
 .compactList .separator {
-  margin: 2px;
+  margin: 2px 6px;
 }
 
 .compactList .label {
-  padding: 4px 7px;
-  font-size: 11px;
-  line-height: 16px;
+  padding: 3px 6px;
+  font-size: 10px;
+  line-height: 15px;
 }
 
-.item:disabled {
+.item:disabled,
+.item[aria-disabled='true'] {
   opacity: 0.4;
   cursor: not-allowed;
 }
@@ -172,11 +186,23 @@
 .itemIcon {
   display: inline-flex;
   flex: none;
-  width: 16px;
-  height: 16px;
+  width: 14px;
+  height: 14px;
   align-items: center;
   justify-content: center;
-  color: var(--qilin-alias-label-tertiary);
+  color: var(--dsw-alias-menu-icon);
+}
+
+.itemIcon svg,
+.check {
+  width: 14px;
+  height: 14px;
+}
+
+.compactList .itemIcon svg,
+.compactList .check {
+  width: 12px;
+  height: 12px;
 }
 
 .itemLabel {
@@ -193,16 +219,20 @@
 }
 
 .shortcut .shortcutKeys {
-  height: auto;
-  padding: 0;
-  border-radius: 0;
-  background: transparent;
-  color: var(--qilin-alias-label-tertiary);
+  color: var(--dsw-alias-label-caption);
+  font-size: 11px;
+  line-height: 16px;
+}
+
+@media (pointer: coarse) {
+  :global(html:not([data-input-modality='keyboard'])) .shortcut {
+    display: none;
+  }
 }
 
 .check {
   flex: none;
-  color: var(--qilin-alias-label-primary);
+  color: var(--dsw-alias-label-primary);
 }
 
 /* Selected cell keeps the plain fill (marker is the trailing check); the
@@ -213,48 +243,60 @@
 
 /* Fill-mode selection: the row holds the hover fill instead of a check. */
 .selectedFill {
-  background: var(--qilin-alias-interactive-bg-hover);
+  background: var(--dsw-alias-interactive-bg-hover);
 }
 
 /* Destructive row: error text/icon, danger hover fill. */
 .danger {
-  color: var(--qilin-alias-state-error-primary);
+  color: var(--dsw-alias-state-error-primary);
 }
 
 .danger .itemIcon {
-  color: var(--qilin-alias-state-error-primary);
+  color: var(--dsw-alias-state-error-primary);
 }
 
-.danger:hover:not(:disabled) {
-  background: var(--qilin-alias-interactive-bg-hover-danger);
+@media (hover: hover) {
+  .danger:hover:not(:disabled):not([aria-disabled='true']) {
+    background: var(--dsw-alias-interactive-bg-hover-danger);
+  }
 }
 
 .danger:focus-visible:not(:disabled) {
-  background: var(--qilin-alias-interactive-bg-hover-danger);
+  background: var(--dsw-alias-interactive-bg-hover-danger);
   outline: none;
 }
 
 /* Heading row: non-interactive small grey text, padding aligned with items. */
 .label {
-  padding: 8px 10px;
-  font-size: 12px;
-  line-height: 16px;
-  color: var(--qilin-alias-label-tertiary);
+  padding: 6px 8px;
+  font-size: 11px;
+  line-height: 15px;
+  color: var(--dsw-alias-label-tertiary);
 }
 
-/* Separator cell (figma 122:9481): py 4 / px 2 around the hairline. */
+/* Separator endpoints align with the row content. The l2 stroke stays visible
+ * on the menu surface. */
 .separator {
   height: 0.5px;
-  margin: 4px 2px;
-  background: var(--qilin-alias-border-l1);
+  margin: 3px 8px;
+  background: var(--dsw-alias-border-l2);
+}
+
+/* A data separator directly followed by a row that starts a group draws one
+ * line, not two; a group start on the list's first row draws none. */
+.separator + .separator,
+.separator + .itemWrap > .separator:first-child,
+.itemWrap:first-child > .separator:first-child {
+  display: none;
 }
 
-/* Nested card to the right of the parent row (figma 419:16920).
- * Bottom-aligned with the parent menu card (grows upward): itemWrap sits in
- * .list's 4px pad, so bottom: -4px matches the list's outer bottom edge.
- * Horizontal: list pad (4px) + 6px card gap = 10px past itemWrap — plain
- * `100% + 6px` collapses to ~2px between outer card edges.
- * ::before bridges the full gap so the pointer can cross without mouseLeave. */
+/* A legacy outlet following structured rows is not the beginning of the menu. */
+.list[data-context-menu] .viewport > .itemWrap ~ [data-slot] .itemWrap:first-child > .separator:first-child {
+  display: block;
+}
+
+/* The submenu aligns with the parent's bottom edge. Its hit bridge covers
+ * the menu inset and the 6px gap so pointer movement keeps it open. */
 .submenu {
   position: absolute;
   top: auto;
@@ -272,3 +314,10 @@
   left: -10px;
   width: 10px;
 }
+
+.list[data-menu-phase='dismiss'],
+.list[data-menu-phase='replace'] { pointer-events: none; }
+.list[data-context-menu].scrollable {
+  max-height: min(calc(100vh - 24px), var(--dsh-anchored-max-height, 100vh));
+  max-height: min(calc(100dvh - 24px), var(--dsh-anchored-max-height, 100vh));
+}

package/lib/MenuSurface.module.css

@@ -1,10 +1,10 @@
 .surface,
 .backing {
-  border-radius: var(--qilin-radius-lg);
+  border-radius: var(--dsw-radius-lg);
 }
 
 .compact {
-  border-radius: var(--qilin-radius-md);
+  border-radius: var(--dsw-radius-md);
 }
 
 :where(.surface) {
@@ -12,7 +12,7 @@
 }
 
 .surface {
-  anchor-name: var(--qilin-menu-anchor);
+  anchor-name: var(--dsh-menu-anchor);
   isolation: isolate;
 }
 
@@ -23,8 +23,8 @@
   inset: 0;
   z-index: -1;
   border-radius: inherit;
-  background: var(--qilin-menu-surface-fill, var(--qilin-specific-menu, var(--qilin-alias-bg-layer-2)));
-  backdrop-filter: var(--qilin-menu-backdrop-filter);
+  background: var(--dsw-menu-surface-fill);
+  backdrop-filter: var(--dsw-menu-backdrop-filter);
   pointer-events: none;
 }
 
@@ -38,12 +38,28 @@
 :global(html[data-platform='darwin']) .backing {
   display: block;
   position: fixed;
-  position-anchor: var(--qilin-menu-anchor);
+  position-anchor: var(--dsh-menu-anchor);
   top: anchor(top);
   left: anchor(left);
   width: anchor-size(width, 0px);
   height: anchor-size(height, 0px);
   z-index: -1;
-  background: var(--qilin-alias-bg-base);
+  background: var(--dsw-alias-bg-base);
   pointer-events: none;
 }
+
+/* Opacity on the container would prevent its material from blurring the page.
+ * Enter animations release their compositing layers so nested menus can blur too. */
+.surface[data-menu-phase='enter'] > *,
+.backing[data-menu-phase='enter'] { animation: dsh-context-menu-in var(--dsh-menu-enter) ease-out; }
+.surface[data-menu-phase='dismiss'] > *,
+.backing[data-menu-phase='dismiss'],
+.surface[data-menu-phase='replace'] > *,
+.backing[data-menu-phase='replace'] { animation: dsh-context-menu-out var(--dsh-menu-dismiss) ease-in both; }
+.surface[data-menu-phase='replace'] > *,
+.backing[data-menu-phase='replace'] { animation-duration: var(--dsh-menu-replace); }
+@keyframes dsh-context-menu-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes dsh-context-menu-out { from { opacity: 1; } to { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) {
+  .surface[data-menu-phase] > *, .backing[data-menu-phase] { animation-duration: 0ms; }
+}

package/lib/QuotePreview.module.css

@@ -0,0 +1,89 @@
+/* One quoted excerpt inside sent text. Inline so it flows in the consumer's
+   own line box; the excerpt keeps one line and the full text rides the hover
+   card. Colour is the business accent, matching reference chips. */
+
+.quote {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  box-sizing: border-box;
+  max-width: 100%;
+  margin: 0;
+  padding: 0 4px 0 0;
+  border-left: 2px solid var(--qilin-alias-state-business-primary);
+  border-radius: 2px;
+  vertical-align: baseline;
+  color: var(--qilin-alias-state-business-primary);
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.popoverText {
+  display: block;
+  padding: 8px 10px;
+  color: var(--qilin-alias-label-primary);
+  font-size: 14px;
+  line-height: 20px;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.source {
+  min-width: 0;
+  padding-left: 4px;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.marker {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  opacity: 0.7;
+  pointer-events: none;
+  user-select: none;
+}
+
+.quoteMark {
+  width: 16px;
+  height: 16px;
+}
+
+.action {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  opacity: 0;
+  cursor: pointer;
+  transition: opacity 120ms ease;
+}
+
+.action:focus-visible {
+  opacity: 1;
+}
+
+@media (hover: hover) {
+  .quote:hover .action {
+    opacity: 1;
+  }
+}
+
+@media (hover: none) {
+  .action {
+    opacity: 1;
+  }
+}

package/lib/RowDragPreview.module.css

@@ -0,0 +1,12 @@
+.preview {
+  position: fixed;
+  top: 0;
+  pointer-events: none;
+}
+
+.preview > :first-child {
+  box-sizing: border-box;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}

package/lib/SegmentedTabs.module.css

@@ -1,4 +1,7 @@
 .tabs {
+  /* The indicator's inline width subtracts this inset twice; it matches the
+     track's own padding so the sliding pill spans the padded content box. */
+  --segmented-tabs-inset: 4px;
   position: relative;
   display: grid;
   padding: 4px;
@@ -10,7 +13,7 @@
   position: absolute;
   inset: 4px auto 4px 4px;
   box-sizing: border-box;
-  border: 0.5px solid var(--qilin-alias-border-l3);
+  border: 1px solid var(--qilin-alias-border-l3);
   border-radius: var(--qilin-radius-md);
   background: var(--qilin-alias-bg-layer-3);
   transition: transform 180ms ease;

package/lib/Tag.module.css

@@ -14,7 +14,7 @@
 }
 
 .tag[data-tone='outline'] {
-  border: 0.5px solid var(--qilin-alias-border-l4);
+  border: 1px solid var(--qilin-alias-border-l4);
   color: var(--qilin-alias-label-tertiary);
 }
 

package/lib/TerminalBlock.module.css

@@ -62,7 +62,7 @@
    divider the IN/OUT card draws between its sections. A banner-only card (a
    running command that has printed nothing yet) draws none. */
 .block[data-body] .header {
-  border-bottom: 0.5px solid var(--qilin-alias-border-l2);
+  border-bottom: 1px solid var(--qilin-alias-border-l2);
 }
 
 /* One row per command line. The prompt column is the only element allowed to

package/lib/Toast.module.css

@@ -49,6 +49,31 @@
   min-width: 0;
 }
 
+/* The action text is the one interactive part: the banner surface stays
+   click-through, so only this text takes the pointer. deepseek-400 mixed
+   toward the toast's own label color keeps the blue legible on the contrast
+   surface, which flips with the theme. */
+.action {
+  display: inline;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: color-mix(in srgb, var(--qilin-static-deepseek-400) 78%, var(--qilin-alias-label-primary-inverted));
+  font: inherit;
+  cursor: pointer;
+  /* Breathing room where the action text meets the surrounding copy. */
+  margin-inline: 3px;
+  /* The banner surface stays click-through (pointer-events: none above); only
+     its action text takes the pointer. */
+  pointer-events: auto;
+}
+
+@media (hover: hover) {
+  .action:hover {
+    opacity: 0.8;
+  }
+}
+
 @keyframes qilin-toast-in {
   from {
     opacity: 0;
@@ -61,9 +86,12 @@
   }
 }
 
+/* The fade also hides the banner itself, so a fully faded action takes no
+   input. */
 @keyframes qilin-toast-fade {
   to {
     opacity: 0;
+    visibility: hidden;
   }
 }
 

package/lib/UserMessageBubble.module.css

@@ -0,0 +1,11 @@
+.bubble {
+  max-width: 100%;
+  background: var(--qilin-specific-bubble);
+  border-radius: 22px;
+  padding: 10px 16px;
+  font-size: var(--qilin-content-font-size, 14px);
+  line-height: calc(22px + var(--qilin-content-font-delta, 0px));
+  color: var(--qilin-alias-label-primary);
+  white-space: pre-wrap;
+  word-break: break-word;
+}