@mcp-b/react-components 0.20.4 → 0.21.0

package/dist/styles/think-routine-library.css

@@ -153,7 +153,7 @@
 
 .think-routine-browser__routine {
   inline-size: 100%;
-  min-block-size: 3.5rem;
+  min-block-size: var(--sigvelo-spacing-14);
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   align-items: center;
@@ -217,7 +217,7 @@
 .think-routine-library__detail {
   inline-size: min(100%, 64rem);
   margin-inline: auto;
-  padding: clamp(1rem, 3vw, 2rem);
+  padding: clamp(var(--sigvelo-spacing-4), 3vw, var(--sigvelo-spacing-8));
 }
 
 .think-routine-library__detail-header,
@@ -229,7 +229,7 @@
 
 .think-routine-library__detail-header {
   justify-content: space-between;
-  padding-block-end: clamp(1rem, 3vw, 2rem);
+  padding-block-end: clamp(var(--sigvelo-spacing-4), 3vw, var(--sigvelo-spacing-8));
 }
 
 .think-routine-library__detail-heading {
@@ -242,8 +242,8 @@
 
 .think-routine-library__detail-header h1,
 .think-routine-library__create-header h1 {
-  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
-  line-height: 1.12;
+  font-size: clamp(var(--sigvelo-text-lg), 2.5vw, var(--sigvelo-text-2xl));
+  line-height: var(--sigvelo-leading-tight);
 }
 
 .think-routine-library__detail-heading > p:last-child,
@@ -257,12 +257,12 @@
 .think-routine-library__detail-grid {
   display: grid;
   grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 0.65fr);
-  gap: clamp(1rem, 3vw, 2rem);
-  padding-block-end: clamp(1rem, 3vw, 2rem);
+  gap: clamp(var(--sigvelo-spacing-4), 3vw, var(--sigvelo-spacing-8));
+  padding-block-end: clamp(var(--sigvelo-spacing-4), 3vw, var(--sigvelo-spacing-8));
 }
 
 .think-routine-library__section-heading {
-  min-block-size: 2rem;
+  min-block-size: var(--sigvelo-spacing-8);
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
@@ -280,7 +280,7 @@
   margin: 0;
   color: var(--sigvelo-color-text);
   font-size: var(--sigvelo-text-sm);
-  line-height: 1.7;
+  line-height: var(--sigvelo-leading-relaxed);
   white-space: pre-wrap;
 }
 
@@ -326,7 +326,7 @@
 }
 
 .think-routine-library__runs {
-  padding-block-end: clamp(1rem, 3vw, 2rem);
+  padding-block-end: clamp(var(--sigvelo-spacing-4), 3vw, var(--sigvelo-spacing-8));
 }
 
 .think-routine-library__run-list {
@@ -348,15 +348,15 @@
 }
 
 .think-routine-library__run-marker {
-  inline-size: 1rem;
-  block-size: 1rem;
+  inline-size: var(--sigvelo-control-icon-size-md);
+  block-size: var(--sigvelo-control-icon-size-md);
   flex: 0 0 auto;
 }
 
 .think-routine-library__run-marker svg {
   display: block;
-  inline-size: 1rem;
-  block-size: 1rem;
+  inline-size: var(--sigvelo-control-icon-size-md);
+  block-size: var(--sigvelo-control-icon-size-md);
 }
 
 .think-routine-library__run > span {
@@ -370,18 +370,14 @@
   text-overflow: ellipsis;
 }
 
-.think-routine-library__empty-runs {
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-xs);
-}
-
 .think-routine-library__run-kind {
   text-transform: capitalize;
 }
 
+/* One rule, not two — this selector was declared twice in this file. */
 .think-routine-library__empty-runs {
-  margin: 0;
-  padding-block: var(--sigvelo-spacing-4);
+  --sigvelo-recipe-empty-state-padding-block: var(--sigvelo-spacing-4);
+
   border-block: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
 }
@@ -423,7 +419,7 @@
 .think-routine-library__create {
   min-block-size: 0;
   overflow: auto;
-  padding: clamp(1rem, 3vw, 2rem);
+  padding: clamp(var(--sigvelo-spacing-4), 3vw, var(--sigvelo-spacing-8));
 }
 
 .think-routine-library__create-header,
@@ -433,7 +429,7 @@
 }
 
 .think-routine-library__create-header {
-  margin-block-end: clamp(1rem, 3vw, 2rem);
+  margin-block-end: clamp(var(--sigvelo-spacing-4), 3vw, var(--sigvelo-spacing-8));
 }
 
 .think-routine-library__create-header > div {
@@ -486,8 +482,10 @@
 @container responsive-sidebar-shell (inline-size <= 56rem) {
   .think-routine-library__browser {
     inline-size: 100%;
+    /* Narrow enough that the browser stops being a column beside the detail
+       and starts covering it, so it takes the overlay stack. */
     border-inline-end: 0;
-    box-shadow: var(--sigvelo-shadow-lg);
+    box-shadow: var(--sigvelo-elevation-overlay);
   }
 }
 

package/dist/styles/think-thread-picker.css

@@ -56,7 +56,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--sigvelo-spacing-0-5);
-  min-inline-size: 1rem;
+  min-inline-size: var(--sigvelo-spacing-4);
 }
 
 .think-thread-status-indicators__item svg {
@@ -68,10 +68,6 @@
   color: var(--sigvelo-color-primary-text);
 }
 
-.think-thread-status-indicators__item[data-status="running"] svg {
-  animation: sigvelo-icon-spin 900ms linear infinite;
-}
-
 .think-thread-status-indicators__item[data-status="attention"] {
   color: var(--sigvelo-color-warning-text);
 }
@@ -96,33 +92,23 @@
 
 .think-thread-picker__viewport {
   --think-thread-picker-fade-size: min(12%, 2.5rem);
+  --sigvelo-scroll-fade-start: min(
+    var(--think-thread-picker-fade-size),
+    var(--scroll-area-overflow-y-start, 0px)
+  );
+  --sigvelo-scroll-fade-end: min(
+    var(--think-thread-picker-fade-size),
+    var(--scroll-area-overflow-y-end, 0px)
+  );
 
-  padding: var(--sigvelo-spacing-1-5) 0.5rem var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-spacing-1-5) var(--sigvelo-spacing-2) var(--sigvelo-spacing-3);
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
-  -webkit-mask-image: linear-gradient(
-    to bottom,
-    transparent 0,
-    #000 min(var(--think-thread-picker-fade-size), var(--scroll-area-overflow-y-start, 0px)),
-    #000
-      calc(100% - min(var(--think-thread-picker-fade-size), var(--scroll-area-overflow-y-end, 0px))),
-    transparent 100%
-  );
-  mask-image: linear-gradient(
-    to bottom,
-    transparent 0,
-    #000 min(var(--think-thread-picker-fade-size), var(--scroll-area-overflow-y-start, 0px)),
-    #000
-      calc(100% - min(var(--think-thread-picker-fade-size), var(--scroll-area-overflow-y-end, 0px))),
-    transparent 100%
-  );
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
 }
 
 .think-thread-picker__list {
   display: grid;
-  gap: 0.0625rem;
+  gap: 1px;
   margin: 0;
   padding: 0;
   list-style: none;
@@ -249,7 +235,7 @@
 
 .think-thread-picker__delete-error svg {
   flex: 0 0 auto;
-  margin-block-start: 0.125rem;
+  margin-block-start: var(--sigvelo-spacing-0-5);
 }
 
 .think-thread-picker__thread-time {
@@ -262,8 +248,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  inline-size: 1rem;
-  block-size: 1rem;
+  inline-size: var(--sigvelo-control-icon-size-md);
+  block-size: var(--sigvelo-control-icon-size-md);
   color: var(--sigvelo-color-text-muted);
 }
 
@@ -281,20 +267,10 @@
   color: var(--sigvelo-color-primary-text);
 }
 
-.think-thread-picker__thread[data-thread-status="pending"] .think-thread-picker__thread-status svg,
-.think-thread-picker__thread[data-thread-status="running"] .think-thread-picker__thread-status svg,
-.think-thread-picker__thread[data-thread-status="starting"] .think-thread-picker__thread-status svg,
-.think-thread-picker__thread[data-thread-status="streaming"]
-  .think-thread-picker__thread-status
-  svg,
-.think-thread-picker__thread[data-thread-status="submitted"]
-  .think-thread-picker__thread-status
-  svg,
-.think-thread-picker__thread[data-thread-status="recovering"]
-  .think-thread-picker__thread-status
-  svg {
-  animation: sigvelo-icon-spin 900ms linear infinite;
-}
+/* The six statuses this rule used to list were `isThreadBusy` written out a
+   second time, and those are exactly the ones that render SpinnerIcon, which
+   spins itself. A DotIcon never needed the rule and would have started turning
+   the moment the two lists disagreed. */
 
 .think-thread-picker__thread[data-thread-status="error"] .think-thread-picker__thread-status {
   color: var(--sigvelo-color-danger-text);
@@ -307,10 +283,7 @@
 }
 
 .think-thread-picker__empty {
-  margin: 0.5rem;
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-compact);
-  line-height: var(--sigvelo-leading-snug);
+  margin: var(--sigvelo-spacing-2);
 }
 
 .think-thread-picker__footer {
@@ -397,7 +370,7 @@
 
 @media (forced-colors: active) {
   .think-thread-picker {
-    border-inline-end: 1px solid canvastext;
+    border-inline-end: var(--sigvelo-border-style) var(--sigvelo-border-width) canvastext;
     background: canvas;
     color: canvastext;
     box-shadow: none;

package/dist/styles/toast.css

@@ -2,7 +2,7 @@
   position: fixed;
   inset-block-end: var(--sigvelo-spacing-4);
   inset-inline-end: var(--sigvelo-spacing-4);
-  z-index: 100;
+  z-index: var(--sigvelo-z-toast);
   inline-size: min(24rem, calc(100dvi - var(--sigvelo-spacing-8)));
   max-inline-size: 100%;
   pointer-events: none;
@@ -15,7 +15,7 @@
   position: absolute;
   inset-inline: 0;
   inset-block-end: 0;
-  z-index: calc(100 - var(--toast-index));
+  z-index: calc(var(--sigvelo-z-toast) - var(--toast-index));
   display: flex;
   flex-direction: column;
   inline-size: 100%;

package/dist/styles/toggle-group.css

@@ -33,9 +33,7 @@
 .toggle-group__item[data-pressed] {
   background-color: var(--sigvelo-color-canvas);
   color: var(--sigvelo-color-text);
-  box-shadow:
-    0 1px 3px 0 color-mix(in oklab, var(--sigvelo-color-text), transparent 90%),
-    0 1px 2px -1px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%);
+  box-shadow: var(--sigvelo-elevation-raised);
 }
 
 @media (forced-colors: active) {
@@ -44,3 +42,78 @@
     outline-offset: -2px;
   }
 }
+
+/*
+ * Segmented: one thumb that travels, rather than each item lighting up its own
+ * background. Same anatomy, same track — a segmented control is how this group
+ * presents itself when the choice is a mode rather than a set of switches, so
+ * it is a modifier here instead of a second component with a second track.
+ *
+ * The position comes from JavaScript because nothing in CSS can produce it: see
+ * `useSegmentedThumb`.
+ */
+.toggle-group--segmented {
+  position: relative;
+}
+
+.toggle-group__thumb {
+  position: absolute;
+  /* Physical `left`, deliberately: it is fed `offsetLeft`, which is physical.
+     `translate` rather than moving `left` itself keeps the travel on the
+     compositor. */
+  left: 0;
+  inset-block: var(--sigvelo-spacing-1);
+  inline-size: var(--toggle-group-thumb-size, 0);
+  translate: var(--toggle-group-thumb-start, 0) 0;
+  border-radius: calc(var(--sigvelo-radius-md) - 2px);
+  background-color: var(--sigvelo-color-canvas);
+  box-shadow: var(--sigvelo-elevation-raised);
+  transition:
+    translate var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    inline-size var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
+}
+
+.toggle-group--sm .toggle-group__thumb {
+  inset-block: var(--sigvelo-spacing-0-5);
+}
+
+.toggle-group--lg .toggle-group__thumb {
+  inset-block: var(--sigvelo-spacing-1-5);
+}
+
+/* Before the first measurement, and whenever the group allows an empty
+   selection, there is no segment for the thumb to sit on. */
+.toggle-group--segmented:not(:has(.toggle-group__item[data-pressed])) .toggle-group__thumb {
+  opacity: 0;
+}
+
+/* The thumb draws the pressed state now; leaving the item's own copy underneath
+   would double the elevation and show a second edge as the thumb slides off. */
+.toggle-group--segmented .toggle-group__item[data-pressed] {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.toggle-group--segmented .toggle-group__item {
+  position: relative;
+  z-index: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toggle-group__thumb {
+    transition: none;
+  }
+}
+
+:root[data-motion="reduce"] .toggle-group__thumb {
+  transition: none;
+}
+
+/* Backgrounds are dropped in forced colors, so the travelling thumb would
+   vanish and take the selected state with it. */
+@media (forced-colors: active) {
+  .toggle-group__thumb {
+    outline: var(--sigvelo-focus-ring-forced);
+    outline-offset: -2px;
+  }
+}

package/dist/styles/tooltip.css

@@ -1,9 +1,8 @@
 .tooltip__popup {
   --sigvelo-recipe-popup-arrow-size: var(--sigvelo-spacing-2);
   --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-1) var(--sigvelo-spacing-2);
-  --sigvelo-recipe-surface-shadow: var(--sigvelo-shadow-sm);
 
-  z-index: 50;
+  z-index: var(--sigvelo-z-overlay);
   max-inline-size: min(20rem, var(--available-width));
   overflow-block: auto;
   font-size: var(--sigvelo-text-xs);

package/dist/styles/utilities.css

@@ -33,3 +33,76 @@
   min-inline-size: 0;
   flex: 1;
 }
+
+/*
+ * Truncation by fade rather than by ellipsis. An ellipsis is a character the
+ * reader has to parse — in a value slot ("gpt-5.1-codex-m…") it reads as part
+ * of the value. A mask just stops. Use it where the text is data; keep
+ * .sigvelo-truncate where the text is a sentence and the ellipsis is a
+ * legitimate signal that words were dropped.
+ */
+.sigvelo-truncate-fade {
+  --sigvelo-truncate-fade-distance: 1rem;
+  overflow: hidden;
+  white-space: nowrap;
+  mask-image: linear-gradient(
+    to right,
+    #000 calc(100% - var(--sigvelo-truncate-fade-distance)),
+    transparent 100%
+  );
+}
+
+/* Clamp to N lines. -1 keeps the mechanism while removing the limit, so a
+   component can drop the cap from script without swapping classes. */
+.sigvelo-line-clamp {
+  --sigvelo-line-clamp: 2;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--sigvelo-line-clamp);
+  overflow: hidden;
+}
+
+/*
+ * Scrollbars that appear on hover or keyboard focus and stay out of the way
+ * otherwise. scrollbar-gutter reserves the track either way, so revealing the
+ * bar never reflows the content beside it. Coarse pointers have no hover to
+ * key off and overlay their scrollbars anyway, so they are left alone.
+ */
+@media (any-pointer: fine) {
+  .sigvelo-scrollbar-on-hover {
+    scrollbar-gutter: stable;
+    scrollbar-color: transparent transparent;
+    transition: scrollbar-color var(--sigvelo-motion-duration-interaction)
+      var(--sigvelo-motion-ease-change);
+  }
+
+  .sigvelo-scrollbar-on-hover:hover,
+  .sigvelo-scrollbar-on-hover:focus-within {
+    scrollbar-color: var(--sigvelo-color-neutral-border) transparent;
+  }
+}
+
+/*
+ * Comfortable reading measure for long-form agent output. Applied to the prose
+ * container, not the panel: the panel still fills the pane, the paragraphs stop
+ * at a readable line length inside it.
+ */
+.sigvelo-measure {
+  max-inline-size: var(--sigvelo-measure-prose);
+}
+
+/* Code, tables, and diagrams read worse wrapped than wide, so they opt out of
+   the prose measure without leaving the same container. */
+.sigvelo-measure-wide {
+  max-inline-size: var(--sigvelo-measure-wide-block);
+}
+
+/*
+ * Reader-controlled text size for prose. Scales the message body only —
+ * toolbars, labels, and controls keep resolving through the rem type ramp,
+ * because a reader asking for larger message text is not asking for a taller
+ * composer. Descendants that should scale with it must size in em.
+ */
+.sigvelo-reader-text {
+  font-size: calc(1em * var(--sigvelo-chat-font-scale));
+}

package/dist/styles/web-preview.css

@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
-  padding-block: 0.5rem;
+  padding-block: var(--sigvelo-spacing-2);
   padding-inline: var(--sigvelo-spacing-2-5);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -40,7 +40,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 2rem;
+  padding: var(--sigvelo-spacing-8);
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-compact);
   text-align: center;
@@ -105,7 +105,7 @@
 .web-preview__console-item {
   display: grid;
   grid-template-columns: auto 1fr auto;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
   align-items: baseline;
   padding-block: var(--sigvelo-spacing-1-5);
   padding-inline: var(--sigvelo-spacing-3);
@@ -140,6 +140,6 @@
 
 @media (forced-colors: active) {
   .web-preview {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 }

package/dist/styles/workspace-explorer.css

@@ -10,11 +10,9 @@
   overflow: hidden;
   font-family: inherit;
   color: var(--sigvelo-color-text);
-  background-color: var(--sigvelo-color-surface);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
+  background-color: var(--sigvelo-color-surface-raised);
   border-radius: var(--sigvelo-radius-xl);
-  box-shadow: var(--sigvelo-shadow-xs);
+  box-shadow: var(--sigvelo-elevation-raised);
   container-type: inline-size;
 }
 
@@ -132,8 +130,8 @@
   z-index: 2;
   inset-block-start: calc(var(--sigvelo-density-compact-control-height) + var(--sigvelo-spacing-2));
   inset-inline-end: var(--sigvelo-spacing-2);
-  background-color: var(--sigvelo-color-surface);
-  box-shadow: var(--sigvelo-shadow-xs);
+  background-color: var(--sigvelo-color-surface-raised);
+  box-shadow: var(--sigvelo-elevation-floating);
 }
 
 .workspace-explorer__filter {
@@ -408,8 +406,8 @@
 }
 
 .workspace-explorer__image-trigger:focus-visible {
-  outline: var(--sigvelo-focus-ring);
-  outline-offset: var(--sigvelo-focus-offset);
+  outline: none;
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
 .workspace-explorer__image-trigger[aria-disabled="true"] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.20.4",
+  "version": "0.21.0",
   "description": "MCP-B React components built on Base UI and shared design tokens, including Cloudflare Think chat primitives.",
   "homepage": "https://design-system.sigvelo.com",
   "bugs": {
@@ -57,7 +57,7 @@
     "streamdown": "^2.5.0",
     "unist-util-visit": "^5.1.0",
     "yet-another-react-lightbox": "^3.32.1",
-    "@mcp-b/design-tokens": "0.20.4"
+    "@mcp-b/design-tokens": "0.21.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.222",