@mcp-b/react-components 0.40.0 → 0.42.0

package/dist/styles/streamdown.css

@@ -54,7 +54,8 @@ button[data-streamdown="link"] {
 
 /* ---- Block typography ---- */
 
-/* Chat-scale headings: markdown headings inside a message shouldn't shout. */
+/* One heading ladder for every markdown surface (chat and workspace). Body
+   text stays --sigvelo-text-prose; only headings step up. */
 [data-streamdown="heading-1"],
 [data-streamdown="heading-2"],
 [data-streamdown="heading-3"],
@@ -62,17 +63,26 @@ 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: var(--sigvelo-text-base);
+  font-size: var(--sigvelo-text-prose);
   font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-text-prose-leading);
+}
+
+[data-streamdown="heading-3"] {
+  font-size: var(--sigvelo-text-base);
   line-height: var(--sigvelo-text-base-leading);
 }
 
-[data-streamdown="heading-1"],
 [data-streamdown="heading-2"] {
   font-size: var(--sigvelo-text-lg);
   line-height: var(--sigvelo-text-lg-leading);
 }
 
+[data-streamdown="heading-1"] {
+  font-size: var(--sigvelo-text-xl);
+  line-height: var(--sigvelo-text-xl-leading);
+}
+
 [data-streamdown="blockquote"] {
   margin-block: var(--sigvelo-spacing-2);
   padding-inline-start: var(--sigvelo-spacing-3);
@@ -111,7 +121,7 @@ button[data-streamdown="link"] {
 
 .message__response img {
   display: inline-block;
-  max-width: 100%;
+  max-inline-size: 100%;
   margin-block: var(--sigvelo-spacing-2);
   border-radius: var(--sigvelo-radius-md);
 }
@@ -166,7 +176,7 @@ button[data-streamdown="link"] {
   display: flex;
   flex-direction: column;
   gap: var(--sigvelo-spacing-1);
-  width: 100%;
+  inline-size: 100%;
   margin-block: var(--sigvelo-spacing-2);
   padding: var(--sigvelo-spacing-1-5);
   border-radius: var(--sigvelo-radius-lg);
@@ -176,10 +186,10 @@ button[data-streamdown="link"] {
 [data-streamdown="code-block-header"] {
   display: flex;
   align-items: center;
-  min-height: 1.5rem;
+  min-block-size: 1.5rem;
   padding-inline: var(--sigvelo-spacing-2);
   font-family: var(--sigvelo-font-mono);
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-text-meta);
   text-transform: lowercase;
   color: var(--sigvelo-color-text-muted);
 }
@@ -189,12 +199,12 @@ button[data-streamdown="link"] {
 :is([data-streamdown="code-block"], [data-streamdown="mermaid-block"])
   > div:has(> [data-streamdown$="-block-actions"]) {
   position: sticky;
-  top: 0.25rem;
+  inset-block-start: 0.25rem;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  height: 1.5rem;
+  block-size: 1.5rem;
   margin-block-start: -1.75rem;
   pointer-events: none;
 }
@@ -222,8 +232,8 @@ button[data-streamdown="link"] {
   padding-inline: var(--sigvelo-spacing-2);
   background-color: transparent;
   font-family: var(--sigvelo-font-mono);
-  font-size: var(--sigvelo-text-compact);
-  line-height: var(--sigvelo-leading-normal);
+  font-size: var(--sigvelo-text-code);
+  line-height: var(--sigvelo-text-code-leading);
   overflow: visible;
 }
 
@@ -234,7 +244,7 @@ button[data-streamdown="link"] {
 }
 
 [data-streamdown="mermaid"] {
-  width: 100%;
+  inline-size: 100%;
 }
 
 /* ---- Tables ---- */
@@ -263,9 +273,9 @@ button[data-streamdown="link"] {
 }
 
 [data-streamdown="table"] {
-  width: 100%;
+  inline-size: 100%;
   border-collapse: collapse;
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-text-prose);
 }
 
 [data-streamdown="table-header-cell"],
@@ -296,7 +306,7 @@ button[data-streamdown="link"] {
 [data-streamdown="table-fullscreen"] > div {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  block-size: 100%;
 }
 
 [data-streamdown="table-fullscreen"] > div > div:first-child {
@@ -316,7 +326,7 @@ button[data-streamdown="link"] {
 
 [data-streamdown="table-fullscreen"] thead {
   position: sticky;
-  top: 0;
+  inset-block-start: 0;
   z-index: 1;
   background-color: var(--sigvelo-color-surface);
 }
@@ -342,12 +352,12 @@ button[data-streamdown="link"] {
   )
   .absolute {
   position: absolute;
-  top: 100%;
-  right: 0;
+  inset-block-start: 100%;
+  inset-inline-end: 0;
   z-index: var(--sigvelo-z-chrome);
   display: flex;
   flex-direction: column;
-  min-width: 7.5rem;
+  min-inline-size: 7.5rem;
   margin-block-start: var(--sigvelo-spacing-1);
   overflow: hidden;
   /* Draws its edge from the overlay ring at the same radius as every other
@@ -365,11 +375,11 @@ button[data-streamdown="link"] {
   .absolute
   > button {
   justify-content: flex-start;
-  width: 100%;
+  inline-size: 100%;
   padding-block: var(--sigvelo-spacing-1-5);
   padding-inline: var(--sigvelo-spacing-3);
   border-radius: 0;
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-text-prose);
   color: var(--sigvelo-color-text);
 }
 

package/dist/styles/subagent-run.css

@@ -1,14 +1,27 @@
+/* Elevation-led like the composer: the edge is the hairline ring inside
+   --sigvelo-elevation-floating, not a border. Forced colors restores a real
+   border at the end of this file. */
 .subagent-run__selector {
   max-inline-size: 14rem;
   justify-content: flex-start;
   border-radius: var(--sigvelo-radius-full);
+  background-color: var(--sigvelo-color-surface-raised);
+  box-shadow: var(--sigvelo-elevation-floating);
   text-align: start;
 }
 
+/* The ghost hover would swap the raised surface for a near-transparent tint;
+   keep the surface and tint over it instead. */
+.subagent-run__selector:hover:not([data-disabled]) {
+  background-color: color-mix(
+    in oklab,
+    var(--sigvelo-color-surface-raised),
+    var(--sigvelo-color-text) 4%
+  );
+}
+
 .subagent-run__selector[aria-current="page"] {
-  border-color: var(--sigvelo-color-neutral-border-muted);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
-  box-shadow: inset 0 0 0 var(--sigvelo-border-width) var(--sigvelo-color-neutral-border-subtle);
 }
 
 .subagent-run__list {
@@ -71,7 +84,7 @@
 }
 
 .subagent-run__indicator:is([data-status="aborted"], [data-status="interrupted"]) {
-  color: var(--sigvelo-color-warning-text);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .subagent-run__progress {
@@ -127,6 +140,10 @@
 }
 
 @media (forced-colors: active) {
+  .subagent-run__selector {
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
+  }
+
   .subagent-run__milestone::before {
     border-color: CanvasText;
   }

package/dist/styles/tabs.css

@@ -181,6 +181,7 @@
 }
 
 .tabs--bordered .tabs__panel {
+  /* Primitive panel inset, not --sigvelo-layout-stack. */
   padding: var(--sigvelo-spacing-4);
 }
 

package/dist/styles/task.css

@@ -5,7 +5,7 @@
   inline-size: 100%;
   min-block-size: var(--sigvelo-control-height-xs);
   padding-block: var(--sigvelo-spacing-0-5);
-  padding-inline: var(--sigvelo-spacing-2);
+  padding-inline: 0;
   /* Ploy-style: hairline outline on the canvas, plain content inside */
   background-color: transparent;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -13,7 +13,7 @@
   border-radius: var(--sigvelo-radius-md);
   color: var(--sigvelo-color-text-muted);
   font-family: inherit;
-  font-size: var(--sigvelo-text-compact);
+  font-size: var(--sigvelo-text-prose);
   font-weight: var(--sigvelo-font-weight-semibold);
   text-align: start;
   cursor: pointer;
@@ -55,7 +55,7 @@
   gap: var(--sigvelo-spacing-1-5);
   margin: 0;
   padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-3);
+  padding-inline: 0;
   list-style: none;
   /* Bounded so expanding never blows out the conversation scroll position */
   max-block-size: 20rem;
@@ -69,23 +69,11 @@
 }
 
 .task__item {
-  position: relative;
-  font-size: var(--sigvelo-text-compact);
+  font-size: var(--sigvelo-text-prose);
   color: var(--sigvelo-color-text);
   line-height: var(--sigvelo-leading-relaxed);
 }
 
-.task__item::before {
-  content: "";
-  position: absolute;
-  inset-inline-start: calc(-1 * var(--sigvelo-spacing-2));
-  inset-block-start: var(--sigvelo-spacing-2-5);
-  inline-size: var(--sigvelo-spacing-1);
-  block-size: var(--sigvelo-spacing-1);
-  border-radius: var(--sigvelo-radius-full);
-  background-color: var(--sigvelo-color-neutral-border-muted);
-}
-
 @media (any-pointer: coarse) {
   .task__trigger {
     min-block-size: var(--sigvelo-control-height-xl);
@@ -102,7 +90,7 @@
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border-radius: var(--sigvelo-radius-sm);
   font-family: var(--sigvelo-font-mono);
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-text-meta);
   color: var(--sigvelo-color-text);
   vertical-align: baseline;
 }

package/dist/styles/terminal.css

@@ -1,7 +1,7 @@
 .terminal {
   display: flex;
   flex-direction: column;
-  width: 100%;
+  inline-size: 100%;
   font-family: inherit;
   background-color: var(--sigvelo-color-neutral-950, var(--sigvelo-color-neutral-900));
   color: var(--sigvelo-color-neutral-100);
@@ -12,9 +12,9 @@
 .terminal__header {
   display: flex;
   align-items: center;
-  gap: var(--sigvelo-spacing-2);
-  padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-layout-cluster);
+  padding-block: var(--sigvelo-layout-cluster);
+  padding-inline: var(--sigvelo-layout-gutter);
   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)
     color-mix(in oklab, var(--sigvelo-color-neutral-700) 40%, transparent);
@@ -29,6 +29,25 @@
   color: var(--sigvelo-color-neutral-300);
 }
 
+.terminal__status {
+  font-family: var(--sigvelo-font-mono);
+  font-size: var(--sigvelo-text-2xs);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  color: var(--sigvelo-color-neutral-300);
+}
+
+.terminal__status[data-status="running"] {
+  color: var(--sigvelo-color-primary-300);
+}
+
+.terminal__status[data-status="success"] {
+  color: var(--sigvelo-color-success-300);
+}
+
+.terminal__status[data-status="error"] {
+  color: var(--sigvelo-color-danger-300);
+}
+
 .terminal__actions {
   display: inline-flex;
   align-items: center;
@@ -43,13 +62,13 @@
 
 .terminal__content {
   flex: 1;
-  max-height: 24rem;
-  min-height: 8rem;
+  max-block-size: 24rem;
+  min-block-size: 8rem;
 }
 
 .terminal__content-viewport {
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   padding-block: var(--sigvelo-spacing-2-5);
   padding-inline: var(--sigvelo-spacing-3-5);
   overflow: auto;
@@ -67,8 +86,8 @@
 
 .terminal__cursor {
   display: inline-block;
-  width: 0.5rem;
-  height: 1em;
+  inline-size: 0.5rem;
+  block-size: 1em;
   vertical-align: text-bottom;
   background-color: var(--sigvelo-color-neutral-100);
   margin-inline-start: var(--sigvelo-spacing-0-5);

package/dist/styles/test-results.css

@@ -1,9 +1,9 @@
 .test-results__header {
   display: flex;
   flex-direction: column;
-  gap: var(--sigvelo-spacing-2);
-  padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-layout-cluster);
+  padding-block: var(--sigvelo-layout-cluster);
+  padding-inline: var(--sigvelo-layout-gutter);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
 }
@@ -15,6 +15,16 @@
   flex-wrap: wrap;
 }
 
+.test-results__outcome {
+  color: var(--sigvelo-color-success-text);
+  font-size: var(--sigvelo-text-xs);
+  font-weight: var(--sigvelo-font-weight-semibold);
+}
+
+.test-results__outcome[data-status="failed"] {
+  color: var(--sigvelo-color-danger-text);
+}
+
 .test-results__stats {
   display: inline-flex;
   align-items: center;
@@ -153,7 +163,7 @@
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
   padding-block: var(--sigvelo-spacing-1-5);
-  padding-inline: var(--sigvelo-spacing-4);
+  padding-inline: var(--sigvelo-layout-gutter);
   font-size: var(--sigvelo-text-compact);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
@@ -169,7 +179,6 @@
   justify-content: center;
   inline-size: var(--sigvelo-control-icon-size-md);
   block-size: var(--sigvelo-control-icon-size-md);
-  border-radius: var(--sigvelo-radius-full);
   flex-shrink: 0;
   transition: color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
@@ -221,8 +230,8 @@
 
 .test-results__error-text {
   margin: 0;
-  padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-layout-cluster);
+  padding-inline: var(--sigvelo-layout-gutter);
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-2xs);
   line-height: var(--sigvelo-leading-normal);

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

@@ -21,9 +21,8 @@
   color: var(--sigvelo-color-danger-text);
 }
 
-.think-execution-status[data-tone="warning"] {
-  color: var(--sigvelo-color-warning-text);
-}
+/* The paused tone keeps the base muted colour: stopped is not a state that
+   earns an accent — only success, failure, and running do. */
 
 .think-execution-status[data-tone="primary"] {
   color: var(--sigvelo-color-primary-text);
@@ -38,23 +37,16 @@
   min-inline-size: 0;
   inline-size: 100%;
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-columns: auto var(--sigvelo-layout-track-fill);
   align-items: center;
-  gap: var(--sigvelo-spacing-2);
+  gap: var(--sigvelo-layout-cluster);
   text-align: start;
 }
 
 .think-execution-run-summary__copy {
   min-inline-size: 0;
   display: grid;
-  row-gap: var(--sigvelo-spacing-1);
-}
-
-.think-execution-run-summary__heading {
-  min-inline-size: 0;
-  display: flex;
-  align-items: baseline;
-  gap: var(--sigvelo-spacing-2);
+  row-gap: var(--sigvelo-spacing-0-5);
 }
 
 .think-execution-run-summary__title {
@@ -63,19 +55,11 @@
   font-weight: var(--sigvelo-font-weight-semibold);
 }
 
-.think-execution-run-summary__copy code {
+/* Kind · status · time on one muted line — the glyph carries the colour, the
+   words carry the meaning, and identifiers stay off the roster entirely. */
+.think-execution-run-summary__meta {
   min-inline-size: 0;
-  overflow: hidden;
-  color: var(--sigvelo-color-text-muted);
-  overflow-wrap: anywhere;
-  font-family: var(--sigvelo-font-mono);
-  font-size: var(--sigvelo-text-xs);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.think-execution-run-summary__progress {
-  color: var(--sigvelo-color-text-muted);
+  /* The routine roster's secondary-line colour: muted, nudged toward text. */
+  color: color-mix(in oklab, var(--sigvelo-color-text-muted), var(--sigvelo-color-text) 12%);
   font-size: var(--sigvelo-text-xs);
-  line-height: var(--sigvelo-leading-tight);
 }