@deepseek-ai/dsh-client-ui-primitives 0.1.6-alpha.1 → 0.1.7-alpha.1

package/lib/Menu.module.css

@@ -3,19 +3,19 @@
   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. */
   box-sizing: border-box;
-  padding: 4px;
+  padding: 3px;
   display: flex;
   flex-direction: column;
   gap: 0;
   border: 0;
-  border-radius: 20px;
+  border-radius: 16px;
   background: var(--dsw-specific-menu);
+  backdrop-filter: var(--dsw-menu-backdrop-filter);
   --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
@@ -27,13 +27,13 @@
   --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;
+  min-width: 144px;
   max-width: 360px;
 }
 
@@ -60,12 +60,13 @@
 }
 
 /* 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
+ * (the portal MARGIN in Menu.tsx; the top side widens to the frame's published
+ * top clearance, the macOS window strip) 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. */
 .scrollable {
-  max-height: calc(100vh - 24px);
+  max-height: calc(100vh - 12px - max(12px, var(--dsh-frame-top-clearance, 12px)));
 }
 
 .viewport {
@@ -84,8 +85,8 @@
   flex: none;
   display: flex;
   flex-direction: column;
-  margin-top: 4px;
-  padding-top: 4px;
+  margin-top: 3px;
+  padding-top: 3px;
   border-top: 0.5px solid var(--dsw-alias-border-l2);
 }
 
@@ -93,21 +94,20 @@
   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: 8px;
   background: transparent;
   cursor: pointer;
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 13px;
+  line-height: 20px;
   color: var(--dsw-alias-label-primary);
   text-align: left;
 }
@@ -116,34 +116,42 @@
   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(--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;
+  min-width: 156px;
   padding: 2px;
   border-radius: 7px;
 }
 
 .compactList .item {
-  min-height: 26px;
-  gap: 6px;
-  padding: 3px 7px;
+  min-height: 24px;
+  gap: 5px;
+  padding: 2px 6px;
   border-radius: 5px;
-  font-size: 12px;
-  line-height: 18px;
+  font-size: 11px;
+  line-height: 17px;
 }
 
 .compactList .itemIcon {
-  width: 14px;
-  height: 14px;
+  width: 12px;
+  height: 12px;
 }
 
 .compactList .separator {
@@ -151,9 +159,9 @@
 }
 
 .compactList .label {
-  padding: 4px 7px;
-  font-size: 11px;
-  line-height: 16px;
+  padding: 3px 6px;
+  font-size: 10px;
+  line-height: 15px;
 }
 
 .item:disabled {
@@ -164,13 +172,25 @@
 .itemIcon {
   display: inline-flex;
   flex: none;
-  width: 16px;
-  height: 16px;
+  width: 14px;
+  height: 14px;
   align-items: center;
   justify-content: center;
   color: var(--dsw-alias-label-tertiary);
 }
 
+.itemIcon svg,
+.check {
+  width: 14px;
+  height: 14px;
+}
+
+.compactList .itemIcon svg,
+.compactList .check {
+  width: 12px;
+  height: 12px;
+}
+
 .itemLabel {
   flex: 1;
   min-width: 0;
@@ -208,32 +228,45 @@
   background: var(--dsw-alias-interactive-bg-hover-danger);
 }
 
+.danger:focus-visible:not(:disabled) {
+  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;
+  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 cell (figma 122:9481): py 4 / px 2 around the hairline. l2, not
+ * l1, for the same reason as .footer: l1 is near-invisible on this surface. */
 .separator {
   height: 0.5px;
-  margin: 4px 2px;
-  background: var(--dsw-alias-border-l1);
+  margin: 3px 2px;
+  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).
+/* Nested card to the right of the parent row.
  * 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.
+ * .list's 3px pad, so bottom: -3px matches the list's outer bottom edge.
+ * Horizontal: list pad (3px) + 6px card gap = 9px past itemWrap.
  * ::before bridges the full gap so the pointer can cross without mouseLeave. */
 .submenu {
   position: absolute;
   top: auto;
-  bottom: -4px;
-  left: calc(100% + 10px);
+  bottom: -3px;
+  left: calc(100% + 9px);
   z-index: 101;
   min-width: 163px;
 }
@@ -243,6 +276,6 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  left: -10px;
-  width: 10px;
+  left: -9px;
+  width: 9px;
 }

package/lib/Modal.module.css

@@ -1,4 +1,8 @@
-/* Full-viewport layer (figma Mask + Dialog 451:18655): mask + centered card. */
+/* Full-viewport layer (figma Mask + Dialog 451:18655): mask + centered card.
+   24px of air on every side; the top/bottom widen to the frame's published
+   top clearance (the macOS window strip) so a tall card stays clear of it.
+   Cards size against this padding box: consumers cap growth with
+   `max-height: 100%`, never their own viewport calc. */
 .root {
   position: fixed;
   inset: 0;
@@ -6,7 +10,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 24px;
+  padding: max(24px, var(--dsh-frame-top-clearance, 24px)) 24px;
 }
 
 /* User/spec mask: rgba(0,0,0,0.24) + blur(2px) via --dsw-alias-bg-mask-1 /

package/lib/OnboardingSurface.module.css

@@ -14,8 +14,7 @@
   top: 80px;
   bottom: 0px;
   background: rgba(0, 0, 0, 0.24);
-  /* Mask-blur */
-  backdrop-filter: blur(2px);
+  backdrop-filter: var(--dsw-mask-blur);
 }
 
 .onboardingStage {

package/lib/PathLabel.module.css

@@ -0,0 +1,28 @@
+/* Auto margin keeps fitting text at the left. On overflow it becomes zero,
+   so flex-end preserves the filename suffix at the right edge. */
+.path {
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: flex-end;
+  min-width: 0;
+  overflow: hidden;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.path[data-path-clipped] {
+  mask-image: linear-gradient(to right, transparent, black 28px);
+}
+
+.text {
+  flex: none;
+  margin-right: auto;
+}
+
+.directory {
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.name {
+  color: var(--dsw-alias-label-primary);
+}

package/lib/RiskConfirmation.module.css

@@ -1,6 +1,6 @@
 .confirmation {
   width: min(440px, 100%);
-  max-height: calc(100vh - 48px);
+  max-height: 100%;
   overflow: hidden;
 }
 

package/lib/SegmentedControl.module.css

@@ -0,0 +1,76 @@
+/* The track is the same translucent fill the hover state uses, so it reads as
+ * a place rather than a second button; the one raised part is the indicator,
+ * a white pill that slides under the selected segment. Its stroke rides inside
+ * the soft elevation shadow (border: 0), the way every elevated surface draws
+ * its edge, so the elevation gate keeps it off the alias-border set.
+ *
+ * Segments are equal-width grid tracks sized to the widest label, which is
+ * what lets one indicator be placed arithmetically: the tablist carries the
+ * segment count and the selected index as custom properties, and the indicator
+ * derives its width and offset from them instead of measuring the DOM. */
+.control {
+  position: relative;
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  gap: 2px;
+  padding: 3px;
+  border-radius: 9px;
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.indicator {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: calc((100% - 6px - 2px * (var(--dsh-segment-count) - 1)) / var(--dsh-segment-count));
+  height: calc(100% - 6px);
+  border: 0;
+  border-radius: 7px;
+  background: var(--dsw-alias-bg-layer-1);
+  box-shadow: var(--dsw-elevation-soft);
+  transform: translateX(calc(var(--dsh-segment-index) * (100% + 2px)));
+  transition: transform 160ms ease;
+  pointer-events: none;
+}
+
+.tab {
+  box-sizing: border-box;
+  position: relative;
+  z-index: 1;
+  height: 28px;
+  padding: 0 16px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  font: inherit;
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color 120ms ease;
+}
+
+.tab:hover:not(:disabled),
+.tab[aria-selected='true'] {
+  color: var(--dsw-alias-label-primary);
+}
+
+.tab:disabled {
+  cursor: default;
+  opacity: 0.4;
+}
+
+.tab:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: -2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .indicator,
+  .tab {
+    transition: none;
+  }
+}

package/lib/SegmentedTabs.module.css

@@ -0,0 +1,55 @@
+.tabs {
+  position: relative;
+  display: grid;
+  padding: 4px;
+  border-radius: 12px;
+  background: var(--dsw-alias-bg-module-platform);
+}
+
+.indicator {
+  position: absolute;
+  inset: 4px auto 4px 4px;
+  box-sizing: border-box;
+  border: 0.5px solid var(--dsw-alias-border-l3);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-3);
+  transition: transform 180ms ease;
+  pointer-events: none;
+}
+
+.tab {
+  position: relative;
+  justify-content: center;
+  height: 34px;
+  padding: 0 12px;
+  border-radius: 8px;
+  font-size: 14px;
+  line-height: 20px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  transition: color 180ms ease;
+}
+
+.tab:hover,
+.tab[aria-selected='true'] {
+  background: transparent;
+  color: var(--dsw-alias-label-primary);
+}
+
+.tab[aria-selected='true'] {
+  font-weight: 600;
+}
+
+.tab:focus-visible {
+  outline: none;
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 4px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .indicator,
+  .tab {
+    transition: none;
+  }
+}

package/lib/StateDot.module.css

@@ -1,28 +1,10 @@
-/* Ongoing blue has no alias token (state-business-primary is the 500 step,
- * not this 450) — component-level var pinned to the static scale instead. */
-.dot,
-.matrix {
-  --dsh-state-ongoing: var(--dsw-static-deepseek-450);
-}
-
-/* Solid states: same-color halo via a 0.10-opacity outer layer (::before)
- * with a 6/10-scale solid core. Layer color rides currentColor set per state. */
+/* Solid states keep the 10px layout slot but paint one 6px currentColor core. */
 .dot {
   position: relative;
   display: inline-block;
   flex: none;
 }
 
-.dot::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: 50%;
-  corner-shape: round;
-  background: currentColor;
-  opacity: 0.1;
-}
-
 .dot::after {
   content: '';
   position: absolute;
@@ -44,30 +26,75 @@
   color: var(--dsw-alias-state-error-primary);
 }
 
-/* Idle is the absence of activity, not a fourth outcome: it stays on the
- * tertiary label color so it recedes beside the three outcome colors. */
+/* Idle is the absence of activity and uses the theme's neutral state step. */
 .dot[data-state='idle'] {
-  color: var(--dsw-alias-label-tertiary);
+  color: var(--dsw-alias-state-idle-primary);
 }
 
-/* Pixel chase: each outer cell holds a discrete brightness step (flat keyframe
- * holds, no tweening — the retro feel), peaking when the chase hits it and
- * decaying over the next three cells. Phase offsets come from per-rect
- * animation-delay (index * -125ms) set inline by the component. */
-.matrix {
+/* Ongoing is the sole non-dot state: a quiet full ring sits behind a centered
+ * breathing arc while the complete glyph rotates continuously. Both animations
+ * share one 1.5s period so pinning their start times aligns them together. */
+.spinner {
   flex: none;
-  color: var(--dsh-state-ongoing);
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.spinnerMotion {
+  transform-origin: center;
+  animation: dsh-state-dot-spin 1.5s linear infinite;
 }
 
-.cell {
-  fill: currentColor;
-  opacity: 0.15;
-  animation: dsh-state-dot-chase 1s infinite;
+.spinnerTrack,
+.spinnerArc {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
 }
 
-@keyframes dsh-state-dot-chase {
-  0%, 12.4% { opacity: 1; }
-  12.5%, 24.9% { opacity: 0.6; }
-  25%, 37.4% { opacity: 0.35; }
-  37.5%, 100% { opacity: 0.15; }
+.spinnerTrack {
+  opacity: 0.25;
 }
+
+.spinnerArc {
+  stroke-dasharray: 12 150;
+  animation: dsh-state-dot-dash 1.5s ease-in-out infinite;
+}
+
+@keyframes dsh-state-dot-spin {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes dsh-state-dot-dash {
+  0% {
+    stroke-dasharray: 12 150;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 24 150;
+    stroke-dashoffset: -6;
+  }
+
+  100% {
+    stroke-dasharray: 12 150;
+    stroke-dashoffset: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinnerMotion,
+  .spinnerArc {
+    animation: none;
+  }
+
+  .spinnerArc {
+    stroke-dasharray: 18 150;
+    stroke-dashoffset: -3;
+  }
+}
+
+.step { display: inline-flex; flex: none; align-items: center; justify-content: center; box-sizing: border-box; border-radius: 50%; corner-shape: round; border: 1.5px solid var(--dsw-alias-label-tertiary); color: var(--dsw-alias-label-primary-foreground); }
+.step[data-state='done'] { border-color: var(--dsw-alias-state-success-primary); background: var(--dsw-alias-state-success-primary); }
+.step[data-state='error'] { border-color: var(--dsw-alias-state-error-primary); background: var(--dsw-alias-state-error-primary); }
+.step[data-state='warning'] { border-color: var(--dsw-alias-state-warn-primary); }

package/lib/TerminalBlock.module.css

@@ -59,9 +59,9 @@
 }
 
 /* Full-width l2 hairline between the command banner and the body — the same
-   divider the IN/OUT card draws between its sections. A running card is
-   banner-only, so it draws none. */
-.block:not([data-running]) .header {
+   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(--dsw-alias-border-l2);
 }
 
@@ -110,15 +110,18 @@
   color: var(--dsw-alias-label-tertiary);
 }
 
-/* `pre`, not `nowrap`: the prompt row renders the command verbatim, and
-   `nowrap` collapses the repeated spaces, tabs, and alignment of an indented
-   continuation. Both hold the single row and the ellipsis. */
+/* Default `pre`, not `nowrap`: the prompt row renders the command verbatim,
+   and `nowrap` would collapse the repeated spaces, tabs, and alignment of an
+   indented continuation. Hosts opt into wrapping long commands by rebinding
+   the variable to `pre-wrap`; the ellipsis then simply never engages, and
+   overflow-wrap is inert while white-space stays `pre`. */
 .command {
   min-width: 0;
   color: var(--dsw-alias-label-primary);
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: pre;
+  white-space: var(--dsl-terminal-command-whitespace, pre);
+  overflow-wrap: anywhere;
 }
 
 /* Capped to the prompt's line height (Pill's own 24px height would exceed a
@@ -176,10 +179,14 @@
   margin: 6px;
 }
 
-/* No wrapping, no word-break: alignment is the payload of terminal output. */
+/* Default `pre`: alignment is the payload of terminal output. Hosts opt
+   into wrapping long lines by rebinding the variable to `pre-wrap`, which
+   also keeps the output region from ever scrolling sideways; overflow-wrap
+   is inert while white-space stays `pre`. */
 .line {
   min-height: var(--dsl-terminal-line-height);
-  white-space: pre;
+  white-space: var(--dsl-terminal-line-whitespace, pre);
+  overflow-wrap: anywhere;
 }
 
 .expand {

package/lib/TextShimmer.module.css

@@ -0,0 +1,27 @@
+.root[data-text-shimmer] {
+  background-image: linear-gradient(
+    90deg,
+    currentColor calc(50% - var(--dsh-text-shimmer-spread)),
+    color-mix(in oklab, currentColor 50%, transparent),
+    currentColor calc(50% + var(--dsh-text-shimmer-spread))
+  );
+  background-position: 100% center;
+  background-repeat: no-repeat;
+  background-size: 250% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: dsh-text-shimmer 1.5s cubic-bezier(0.33, 0, 0.67, 1) infinite;
+}
+
+@keyframes dsh-text-shimmer {
+  66.6667%, 100% { background-position: 0% center; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .root[data-text-shimmer] {
+    background-image: none;
+    -webkit-text-fill-color: currentColor;
+    animation: none;
+  }
+}