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

package/lib/TerminalBlock.module.css

@@ -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;
+  }
+}

package/lib/Toast.module.css

@@ -23,8 +23,11 @@
   max-width: min(640px, calc(100vw - 48px));
   padding: 12px 16px;
   border-radius: 14px;
-  background: var(--dsw-alias-button-contrast-fill);
-  color: var(--dsw-alias-label-primary-inverted);
+  /* The design platform's toast surface is dark in BOTH themes (bluish-800
+     light / bluish-750 dark), so the label and the action text below stay
+     fixed instead of flipping with the theme. */
+  background: var(--dsw-alias-toast-bg);
+  color: var(--dsw-static-neutral-bluish-00);
   font-size: 14px;
   line-height: 22px;
   box-shadow: var(--dsw-shadow-lv3);
@@ -41,10 +44,35 @@
   color: var(--dsw-alias-state-warn-label);
 }
 
+.icon.success {
+  color: var(--dsw-alias-state-success-primary);
+}
+
 .text {
   min-width: 0;
 }
 
+.action {
+  display: inline;
+  padding: 0;
+  border: 0;
+  background: none;
+  /* deepseek-400, brightened at the designer's request, reads as the action
+     against the always-dark toast surface without an underline. */
+  color: var(--dsw-static-deepseek-400);
+  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;
+}
+
+.action:hover {
+  opacity: 0.8;
+}
+
 @keyframes dsh-toast-in {
   from {
     opacity: 0;
@@ -60,6 +88,7 @@
 @keyframes dsh-toast-fade {
   to {
     opacity: 0;
+    visibility: hidden;
   }
 }
 

package/lib/Tooltip.module.css

@@ -19,6 +19,8 @@
   animation: tooltip-in 150ms var(--ds-ease-in-out);
 }
 
+.bubble[data-portal] { z-index: 1100; }
+
 .bubble[data-side='right'] {
   transform: translateY(-50%);
 }
@@ -31,6 +33,16 @@
   transform: translate(-50%, -100%);
 }
 
+/* End alignment: `left` carries the anchor's right edge, so the bubble sits
+   fully left of it instead of centering. */
+.bubble[data-side='bottom'][data-align='end'] {
+  transform: translateX(-100%);
+}
+
+.bubble[data-side='top'][data-align='end'] {
+  transform: translate(-100%, -100%);
+}
+
 @keyframes tooltip-in {
   from { opacity: 0; }
 }