@mcp-b/react-components 0.20.4 → 0.21.0

package/dist/styles/scrollbars.css

@@ -1,12 +1,41 @@
-:where(.message__content pre, .observability-table-wrap) {
+/*
+ * Thin scrollbars on every scroll container the system owns.
+ *
+ * A default platform scrollbar inside a 15px-radius popup is the single
+ * loudest thing on the screen, so menus, lists, panels, and code blocks all
+ * take the same quiet treatment: thin, colored from the neutral ramp, and
+ * gutter-stable where a scrollbar appearing would otherwise shift text.
+ *
+ * Only containers that actually scroll are listed. Adding one means adding it
+ * here, not restating scrollbar-color in the component file.
+ */
+:where(
+  .message__content pre,
+  .observability-table-wrap,
+  [data-recipe~="wide-scroll-picker"],
+  [data-slot="autocomplete-list"],
+  [data-slot="combobox-list"],
+  [data-slot="context-menu-content"],
+  [data-slot="dialog-content"],
+  [data-slot="dropdown-menu-content"],
+  [data-slot="menubar-content"],
+  [data-slot="popover-content"],
+  [data-slot="select-content"]
+) {
   --scrollbar-thumb: var(--app-scrollbar-thumb, var(--sigvelo-color-neutral-border-muted));
-  --scrollbar-track: var(--app-scrollbar-track, var(--sigvelo-color-neutral-bg-subtle));
+  --scrollbar-track: var(--app-scrollbar-track, transparent);
 
   scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
-  scrollbar-gutter: stable;
   scrollbar-width: thin;
 }
 
+/* Reserving the gutter only matters where text would otherwise reflow. */
+:where(.message__content pre, .observability-table-wrap) {
+  --scrollbar-track: var(--app-scrollbar-track, var(--sigvelo-color-neutral-bg-subtle));
+
+  scrollbar-gutter: stable;
+}
+
 :where(.message__content pre) {
   overflow-x: auto;
   overflow-y: clip;

package/dist/styles/sources.css

@@ -67,7 +67,7 @@
 .sources__link-description {
   font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
-  line-height: 1.4;
+  line-height: var(--sigvelo-leading-snug);
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
@@ -83,7 +83,7 @@
 
 @media (forced-colors: active) {
   .sources__link {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 
   .sources__link:focus-visible {

package/dist/styles/status-pill.css

@@ -0,0 +1,39 @@
+/*
+ * The chip itself is `.badge`. Only the indicator lives here.
+ */
+.status-pill__dot {
+  inline-size: var(--sigvelo-spacing-1-5);
+  block-size: var(--sigvelo-spacing-1-5);
+  flex-shrink: 0;
+  border-radius: var(--sigvelo-radius-circle);
+  /* currentColor, so the dot follows whichever badge color it was given rather
+     than needing a matching set of its own. */
+  background-color: currentColor;
+}
+
+.status-pill[data-busy] .status-pill__dot {
+  animation: sigvelo-status-pulse var(--sigvelo-motion-duration-pulse) ease-in-out infinite;
+}
+
+@keyframes sigvelo-status-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.4;
+  }
+}
+
+/* The dot stays; only its breathing stops. A still dot still reads as a state
+   indicator, which is the part carrying meaning. */
+@media (prefers-reduced-motion: reduce) {
+  .status-pill[data-busy] .status-pill__dot {
+    animation: none;
+  }
+}
+
+:root[data-motion="reduce"] .status-pill[data-busy] .status-pill__dot {
+  animation: none;
+}

package/dist/styles/stepper.css

@@ -119,7 +119,7 @@
 }
 
 .stepper__indicator[data-loading] .stepper__indicator-content {
-  animation: sigvelo-icon-spin 800ms linear infinite;
+  animation: sigvelo-icon-spin var(--sigvelo-motion-duration-spin) linear infinite;
 }
 
 .stepper__separator {
@@ -170,7 +170,7 @@
   margin-block-start: calc(var(--sigvelo-spacing-1) - var(--sigvelo-border-width));
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-compact);
-  line-height: 1.35;
+  line-height: var(--sigvelo-leading-snug);
 }
 
 .stepper__panel {

package/dist/styles/streamdown.css

@@ -39,8 +39,8 @@ button[data-streamdown="link"] {
 }
 
 [data-streamdown="inline-code"] {
-  padding-block: 0.0625rem;
-  padding-inline: 0.25rem;
+  padding-block: 1px;
+  padding-inline: var(--sigvelo-spacing-1);
   border-radius: var(--sigvelo-radius-xs);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   font-family: var(--sigvelo-font-mono);
@@ -62,18 +62,19 @@ button[data-streamdown="link"] {
 [data-streamdown="heading-5"],
 [data-streamdown="heading-6"] {
   margin-block: var(--sigvelo-spacing-3) var(--sigvelo-spacing-1-5);
-  font-size: 1.125em;
+  font-size: var(--sigvelo-text-base);
   font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: var(--sigvelo-leading-compact);
+  line-height: var(--sigvelo-text-base-leading);
 }
 
 [data-streamdown="heading-1"],
 [data-streamdown="heading-2"] {
-  font-size: 1.25em;
+  font-size: var(--sigvelo-text-lg);
+  line-height: var(--sigvelo-text-lg-leading);
 }
 
 [data-streamdown="blockquote"] {
-  margin-block: 0.5rem;
+  margin-block: var(--sigvelo-spacing-2);
   padding-inline-start: var(--sigvelo-spacing-3);
   border-inline-start: 2px solid var(--sigvelo-color-neutral-border-subtle);
   color: var(--sigvelo-color-text-muted);
@@ -81,8 +82,8 @@ button[data-streamdown="link"] {
 
 [data-streamdown="ordered-list"],
 [data-streamdown="unordered-list"] {
-  margin-block: 0.25rem;
-  padding-inline-start: 1.25rem;
+  margin-block: var(--sigvelo-spacing-1);
+  padding-inline-start: var(--sigvelo-spacing-5);
 }
 
 [data-streamdown="ordered-list"] {
@@ -102,15 +103,16 @@ button[data-streamdown="link"] {
 }
 
 [data-streamdown="horizontal-rule"] {
-  margin-block: 1rem;
+  margin-block: var(--sigvelo-spacing-4);
   border: 0;
-  border-block-start: 1px solid var(--sigvelo-color-neutral-border-subtle);
+  border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
 }
 
 .message__response img {
   display: inline-block;
   max-width: 100%;
-  margin-block: 0.5rem;
+  margin-block: var(--sigvelo-spacing-2);
   border-radius: var(--sigvelo-radius-md);
 }
 
@@ -127,7 +129,7 @@ button[data-streamdown="link"] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0.25rem;
+  padding: var(--sigvelo-spacing-1);
   border: 0;
   border-radius: var(--sigvelo-radius-sm);
   background: transparent;
@@ -163,9 +165,9 @@ button[data-streamdown="link"] {
 [data-streamdown="mermaid-block"] {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
   width: 100%;
-  margin-block: 0.5rem;
+  margin-block: var(--sigvelo-spacing-2);
   padding: var(--sigvelo-spacing-1-5);
   border-radius: var(--sigvelo-radius-lg);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
@@ -175,7 +177,7 @@ button[data-streamdown="link"] {
   display: flex;
   align-items: center;
   min-height: 1.5rem;
-  padding-inline: 0.5rem;
+  padding-inline: var(--sigvelo-spacing-2);
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-xs);
   text-transform: lowercase;
@@ -202,7 +204,7 @@ button[data-streamdown="link"] {
   display: flex;
   flex-shrink: 0;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
   pointer-events: auto;
   border-radius: var(--sigvelo-radius-md);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
@@ -216,12 +218,12 @@ button[data-streamdown="link"] {
 
 [data-streamdown="code-block-body"] pre {
   margin: 0;
-  padding-block: 0.5rem;
-  padding-inline: 0.5rem;
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-spacing-2);
   background-color: transparent;
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-compact);
-  line-height: 1.55;
+  line-height: var(--sigvelo-leading-normal);
   overflow: visible;
 }
 
@@ -240,8 +242,8 @@ button[data-streamdown="link"] {
 [data-streamdown="table-wrapper"] {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
-  margin-block: 0.5rem;
+  gap: var(--sigvelo-spacing-1);
+  margin-block: var(--sigvelo-spacing-2);
   min-inline-size: 0;
   max-inline-size: 100%;
 }
@@ -251,7 +253,7 @@ button[data-streamdown="link"] {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
 }
 
 /* Anonymous scroll container around the table. */
@@ -268,9 +270,10 @@ button[data-streamdown="link"] {
 
 [data-streamdown="table-header-cell"],
 [data-streamdown="table-cell"] {
-  padding-block: 0.25rem;
-  padding-inline: 0.5rem;
-  border-block-end: 1px solid var(--sigvelo-color-neutral-border-subtle);
+  padding-block: var(--sigvelo-spacing-1);
+  padding-inline: var(--sigvelo-spacing-2);
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
   text-align: start;
   vertical-align: top;
   overflow-wrap: anywhere;
@@ -286,7 +289,7 @@ button[data-streamdown="link"] {
 [data-streamdown="table-fullscreen"] {
   position: fixed;
   inset: 0;
-  z-index: 50;
+  z-index: var(--sigvelo-z-overlay);
   background-color: var(--sigvelo-color-surface);
 }
 
@@ -300,15 +303,15 @@ button[data-streamdown="link"] {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
   padding: var(--sigvelo-spacing-3);
 }
 
 [data-streamdown="table-fullscreen"] > div > div:last-child {
   flex: 1;
   overflow: auto;
-  padding-block: 0 1rem;
-  padding-inline: 1rem;
+  padding-block: 0 var(--sigvelo-spacing-4);
+  padding-inline: var(--sigvelo-spacing-4);
 }
 
 [data-streamdown="table-fullscreen"] thead {
@@ -341,16 +344,17 @@ button[data-streamdown="link"] {
   position: absolute;
   top: 100%;
   right: 0;
-  z-index: 20;
+  z-index: var(--sigvelo-z-chrome);
   display: flex;
   flex-direction: column;
   min-width: 7.5rem;
-  margin-block-start: 0.25rem;
+  margin-block-start: var(--sigvelo-spacing-1);
   overflow: hidden;
-  border-radius: var(--sigvelo-radius-md);
-  border: 1px solid var(--sigvelo-color-neutral-border-subtle);
-  background-color: var(--sigvelo-color-surface);
-  box-shadow: var(--sigvelo-shadow-md);
+  /* Draws its edge from the overlay ring at the same radius as every other
+     popup in the system, rather than from a 1px border of its own. */
+  border-radius: var(--sigvelo-radius-lg);
+  background-color: var(--sigvelo-color-surface-raised);
+  box-shadow: var(--sigvelo-elevation-overlay);
 }
 
 :is(

package/dist/styles/subagent-run.css

@@ -38,7 +38,7 @@
 .subagent-run__tray-label {
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-xs);
-  line-height: 1.4;
+  line-height: var(--sigvelo-leading-snug);
 }
 
 .subagent-run__title {
@@ -57,8 +57,8 @@
   flex: 0 0 auto;
   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);
 }
 

package/dist/styles/switch.css

@@ -80,9 +80,7 @@
   block-size: var(--sigvelo-recipe-switch-thumb-size);
   background-color: var(--sigvelo-color-canvas);
   border-radius: var(--sigvelo-radius-full);
-  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);
   translate: 0;
   transition: translate var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }

package/dist/styles/tabs.css

@@ -186,7 +186,7 @@
 
 .tabs__panel:focus-visible {
   outline: none;
-  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--sigvelo-color-focus), transparent 80%);
+  box-shadow: var(--sigvelo-recipe-focus-shadow-inset);
   border-radius: var(--sigvelo-radius-md);
 }
 

package/dist/styles/task.css

@@ -72,7 +72,7 @@
   position: relative;
   font-size: var(--sigvelo-text-compact);
   color: var(--sigvelo-color-text);
-  line-height: var(--sigvelo-leading-body);
+  line-height: var(--sigvelo-leading-relaxed);
 }
 
 .task__item::before {
@@ -119,7 +119,7 @@
 @media (forced-colors: active) {
   .task__trigger,
   .task__list {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 
   .task__trigger:focus-visible {

package/dist/styles/terminal.css

@@ -12,8 +12,8 @@
 .terminal__header {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding-block: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
+  padding-block: var(--sigvelo-spacing-2);
   padding-inline: var(--sigvelo-spacing-3);
   background-color: color-mix(in oklab, var(--sigvelo-color-neutral-950) 80%, white 20%);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -32,7 +32,7 @@
 .terminal__actions {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
   margin-inline-start: auto;
 }
 
@@ -51,7 +51,7 @@
   width: 100%;
   height: 100%;
   padding-block: var(--sigvelo-spacing-2-5);
-  padding-inline: 0.875rem;
+  padding-inline: var(--sigvelo-spacing-3-5);
   overflow: auto;
 }
 
@@ -59,7 +59,7 @@
   margin: 0;
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-xs);
-  line-height: var(--sigvelo-leading-body);
+  line-height: var(--sigvelo-leading-relaxed);
   color: var(--sigvelo-color-neutral-100);
   white-space: pre-wrap;
   word-break: break-word;
@@ -89,6 +89,6 @@
 
 @media (forced-colors: active) {
   .terminal {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 }

package/dist/styles/test-results.css

@@ -188,7 +188,6 @@
 
 .test-results__test-status--running {
   color: var(--sigvelo-color-primary-text);
-  animation: sigvelo-icon-spin 1.4s linear infinite;
 }
 
 .test-results__test-name {
@@ -226,7 +225,7 @@
   padding-inline: var(--sigvelo-spacing-3);
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-2xs);
-  line-height: 1.55;
+  line-height: var(--sigvelo-leading-normal);
   color: var(--sigvelo-color-danger-text);
   background-color: var(--sigvelo-color-danger-bg-subtle);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -266,7 +265,7 @@
   .test-results,
   .test-results__test,
   .test-results__suite {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 
   .test-results__suite-trigger:focus-visible {

package/dist/styles/textarea.css

@@ -1,7 +1,7 @@
 .textarea {
   inline-size: 100%;
   block-size: auto;
-  min-block-size: 5rem;
+  min-block-size: var(--sigvelo-spacing-20);
   padding-block: var(--sigvelo-spacing-2);
   line-height: var(--sigvelo-leading-relaxed);
 }

package/dist/styles/theme-mode-control.css

@@ -12,7 +12,7 @@
 .theme-mode-control__item.radio {
   display: inline-flex;
   inline-size: auto;
-  min-inline-size: 2.75rem;
+  min-inline-size: var(--sigvelo-spacing-11);
   block-size: 2.75rem;
   align-items: center;
   justify-content: center;
@@ -45,9 +45,8 @@
 
 .theme-mode-control__item.radio:focus-visible {
   z-index: 1;
-  outline: var(--sigvelo-focus-ring);
-  outline-offset: var(--sigvelo-focus-offset);
-  box-shadow: none;
+  outline: none;
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
 .theme-mode-control__item.radio[data-disabled] {

package/dist/styles/think-execution-status.css

@@ -18,26 +18,7 @@
   color: var(--sigvelo-color-primary-text);
 }
 
-.think-execution-status:is(
-    [data-status="running"],
-    [data-status="pending"],
-    [data-status="queued"],
-    [data-status="waitingForPause"],
-    [data-status="rollingBack"]
-  )
-  svg {
-  animation: sigvelo-icon-spin 0.8s linear infinite;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .think-execution-status:is(
-      [data-status="running"],
-      [data-status="pending"],
-      [data-status="queued"],
-      [data-status="waitingForPause"],
-      [data-status="rollingBack"]
-    )
-    svg {
-    animation: none;
-  }
-}
+/* Nothing spins the icon here. Exactly the statuses this file used to list are
+   the ones that resolve to the primary tone, and the primary tone renders
+   SpinnerIcon, which already spins itself and already stops under reduced
+   motion. The list was a copy of that mapping that could drift away from it. */

package/dist/styles/think-execution-workbench.css

@@ -80,10 +80,9 @@
 }
 
 .think-execution-workbench__empty {
+  --sigvelo-recipe-empty-state-padding-block: var(--sigvelo-spacing-2-5);
+
   margin: var(--sigvelo-spacing-3);
-  padding: var(--sigvelo-spacing-2-5) 0;
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-compact);
 }
 
 .think-execution-workbench__list {
@@ -265,7 +264,7 @@
 
 @media (forced-colors: active) {
   .think-execution-workbench {
-    border: 1px solid canvastext;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) canvastext;
     background: canvas;
     color: canvastext;
     box-shadow: none;

package/dist/styles/think-full-app.css

@@ -61,7 +61,7 @@
 .think-full-app > .think-full-app__app-bar {
   grid-column: 1 / -1;
   grid-row: 1;
-  z-index: 20;
+  z-index: var(--sigvelo-z-chrome);
 }
 
 .think-full-app__chat-surface {
@@ -267,7 +267,7 @@ body.is-resizing-side-panel .think-full-app__view-scope {
   }
 
   .think-full-app .message__content {
-    line-height: 1.45;
+    line-height: var(--sigvelo-leading-normal);
   }
 
   .think-full-app .message[data-from="user"] .message__content {
@@ -305,7 +305,7 @@ body.is-resizing-side-panel .think-full-app__view-scope {
   .think-full-app__workbench,
   .think-full-app__app-bar,
   .think-full-app__workbench-view-switch {
-    border: 1px solid canvastext;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) canvastext;
     background: canvas;
     color: canvastext;
     box-shadow: none;