@mcp-b/react-components 0.20.5 → 0.22.0

package/dist/styles/streamdown.css

@@ -39,7 +39,7 @@ button[data-streamdown="link"] {
 }
 
 [data-streamdown="inline-code"] {
-  padding-block: 0.0625rem;
+  padding-block: 1px;
   padding-inline: var(--sigvelo-spacing-1);
   border-radius: var(--sigvelo-radius-xs);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
@@ -62,14 +62,15 @@ 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"] {
@@ -222,7 +223,7 @@ button[data-streamdown="link"] {
   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;
 }
 
@@ -288,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);
 }
 
@@ -343,17 +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: var(--sigvelo-spacing-1);
   overflow: hidden;
-  border-radius: var(--sigvelo-radius-md);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    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 {

package/dist/styles/terminal.css

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

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)

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;

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 {

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

@@ -15,7 +15,7 @@
   min-inline-size: 0;
   display: grid;
   grid-template-rows: minmax(0, 1fr);
-  background: var(--sigvelo-color-canvas);
+  background: var(--sigvelo-color-surface-under);
   color: var(--sigvelo-color-text);
   font-family: inherit;
 }
@@ -32,10 +32,28 @@
   display: grid;
   grid-template-columns: minmax(0, 1fr) var(--resizable-side-panel-size, 21.25rem);
   grid-template-rows: minmax(0, 1fr);
+  overflow: hidden;
   transition: grid-template-columns var(--sigvelo-motion-duration-layout)
     var(--sigvelo-motion-ease-change);
 }
 
+.think-full-app[data-has-workbench-topbar="false"] > .think-full-app__view-scope {
+  margin-block-start: var(--sigvelo-spacing-2);
+}
+
+/* ResponsiveSidebarShell owns the outer material when a thread sidebar is
+   present. Flatten the nested app so the hierarchy still has exactly one
+   raised primary plane. */
+.think-full-app[data-has-thread-sidebar="true"] {
+  background: var(--sigvelo-color-surface);
+}
+
+.think-full-app[data-has-thread-sidebar="true"] > .think-full-app__view-scope {
+  margin: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
 .think-full-app[data-has-workbench-topbar="true"] > .think-full-app__view-scope {
   grid-row: 2;
 }
@@ -61,7 +79,8 @@
 .think-full-app > .think-full-app__app-bar {
   grid-column: 1 / -1;
   grid-row: 1;
-  z-index: 20;
+  z-index: var(--sigvelo-z-chrome);
+  background: var(--sigvelo-color-surface-under);
 }
 
 .think-full-app__chat-surface {
@@ -245,7 +264,7 @@ body.is-resizing-side-panel .think-full-app__view-scope {
 
   .think-full-app .think-full-app__chat .agent-chat__transcript-content {
     gap: var(--sigvelo-spacing-2-5);
-    padding-block-start: calc(var(--sigvelo-spacing-3) + env(safe-area-inset-top, 0px));
+    padding-block-start: calc(var(--sigvelo-spacing-5) + env(safe-area-inset-top, 0px));
     padding-inline: var(--sigvelo-spacing-3);
   }
 
@@ -267,7 +286,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 {
@@ -300,6 +319,7 @@ body.is-resizing-side-panel .think-full-app__view-scope {
 }
 
 @media (forced-colors: active) {
+  .think-full-app,
   .think-full-app__chat-surface,
   .think-full-app__aside,
   .think-full-app__workbench,

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;
@@ -243,7 +243,7 @@
 .think-routine-library__detail-header h1,
 .think-routine-library__create-header h1 {
   font-size: clamp(var(--sigvelo-text-lg), 2.5vw, var(--sigvelo-text-2xl));
-  line-height: 1.12;
+  line-height: var(--sigvelo-leading-tight);
 }
 
 .think-routine-library__detail-heading > p:last-child,
@@ -262,7 +262,7 @@
 }
 
 .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;
 }
 
@@ -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);
 }
@@ -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

@@ -6,7 +6,7 @@
   grid-template-rows: auto auto minmax(0, 1fr) auto;
   overflow: hidden;
   border-inline-end: 0;
-  background: var(--sigvelo-color-surface);
+  background: var(--sigvelo-color-surface-under);
   color: var(--sigvelo-color-text);
 }
 
@@ -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);
 }
@@ -112,7 +108,7 @@
 
 .think-thread-picker__list {
   display: grid;
-  gap: 0.0625rem;
+  gap: 1px;
   margin: 0;
   padding: 0;
   list-style: none;
@@ -252,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);
 }
 
@@ -271,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);
@@ -298,9 +284,6 @@
 
 .think-thread-picker__empty {
   margin: var(--sigvelo-spacing-2);
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-compact);
-  line-height: var(--sigvelo-leading-snug);
 }
 
 .think-thread-picker__footer {

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%;
@@ -77,37 +77,16 @@
   position: absolute;
   inset-block-start: var(--sigvelo-spacing-2);
   inset-inline-end: var(--sigvelo-spacing-2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: var(--sigvelo-control-height-xs);
-  block-size: var(--sigvelo-control-height-xs);
-  padding: 0;
-  font-size: var(--sigvelo-text-base);
   color: var(--sigvelo-color-text-muted);
-  background-color: transparent;
-  border: none;
-  border-radius: var(--sigvelo-radius-sm);
-  cursor: pointer;
   opacity: 0;
-  transition:
-    opacity var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
-    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .toast:is(:hover, :focus-within) .toast__close {
   opacity: 1;
 }
 
-.toast__close:hover {
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-  color: var(--sigvelo-color-neutral-text-on-subtle);
-}
-
 .toast__close:focus-visible {
   opacity: 1;
-  outline: none;
-  box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
 @media (hover: none) {

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);