@mcp-b/react-components 0.40.0 → 0.42.0

package/dist/styles/prompt-input.css

@@ -1,6 +1,4 @@
 .prompt-input {
-  --prompt-input-secondary-text: var(--sigvelo-color-text-muted);
-
   container: prompt-input / inline-size;
   position: relative;
   display: flex;
@@ -16,7 +14,9 @@
      not a border: a 0.5px ring stays crisp at any zoom and does not add a pixel
      of layout. Forced colors restores a real border at the end of this file. */
   border: 0;
-  border-radius: calc(var(--sigvelo-radius-xl) + var(--sigvelo-spacing-2));
+  --prompt-input-radius: calc(var(--sigvelo-radius-xl) + var(--sigvelo-spacing-2));
+
+  border-radius: var(--prompt-input-radius);
   box-shadow: var(--sigvelo-elevation-floating);
   font-family: inherit;
   color: var(--sigvelo-color-text);
@@ -97,8 +97,12 @@
 }
 
 /* A supporting tray shares one material and overlap contract whether it sits
-   above the composer for queued work or below it for first-turn utilities. */
+   above the composer for queued work or below it for first-turn utilities.
+   Overlap the card radius, not the hairline: the composer edge is a shadow,
+   so a 1px tuck leaves the tray reading as a second pill. */
 :where(.prompt-input__tray) {
+  --prompt-input-tray-overlap: calc(var(--sigvelo-radius-xl) + var(--sigvelo-spacing-2));
+
   display: flex;
   align-items: center;
   min-block-size: var(--sigvelo-control-height-xl);
@@ -111,12 +115,16 @@
 }
 
 .prompt-input__tray[data-side="top"] {
-  margin-block-end: calc(-1 * var(--sigvelo-border-width));
+  z-index: 0;
+  margin-block-end: calc(-1 * var(--prompt-input-tray-overlap));
+  padding-block-end: calc(var(--prompt-input-tray-overlap) + var(--sigvelo-spacing-1));
   border-radius: var(--sigvelo-radius-2xl) var(--sigvelo-radius-2xl) 0 0;
 }
 
 .prompt-input__tray[data-side="bottom"] {
-  margin-block-start: calc(-1 * var(--sigvelo-border-width));
+  z-index: 0;
+  margin-block-start: calc(-1 * var(--prompt-input-tray-overlap));
+  padding-block-start: calc(var(--prompt-input-tray-overlap) + var(--sigvelo-spacing-1));
   border-radius: 0 0 var(--sigvelo-radius-2xl) var(--sigvelo-radius-2xl);
 }
 
@@ -351,10 +359,10 @@
   background-color: color-mix(in oklab, transparent, var(--sigvelo-color-text) 5%);
 }
 
-/* Bypass is the loud one — Codex-style warning tint so it can't be missed. */
+/* Bypass is the loud one — the muted danger red so it can't be missed. */
 .prompt-input__permissions-trigger[data-mode="bypass"],
 .prompt-input__permissions-trigger[data-mode="bypass"]:hover:not([data-disabled]) {
-  color: var(--sigvelo-color-warning-text);
+  color: var(--sigvelo-color-danger-text);
 }
 
 /* Both modes stacked in one cell; the trigger is always as wide as the
@@ -372,6 +380,7 @@
   white-space: nowrap;
 }
 
+/* Local wrap. Not --sigvelo-layout-break-compact. */
 @container prompt-input (inline-size <= 36rem) {
   .prompt-input__footer {
     gap: var(--sigvelo-spacing-1);
@@ -418,6 +427,7 @@
   }
 }
 
+/* Local wrap. Not --sigvelo-layout-break-compact. */
 @container prompt-input (inline-size <= 22rem) {
   .prompt-input__context-trigger {
     inline-size: var(--sigvelo-control-height-xs);
@@ -523,8 +533,6 @@
 }
 
 .prompt-input__command-popup {
-  --prompt-input-secondary-text: var(--sigvelo-color-text-muted);
-
   inline-size: 100%;
   max-block-size: min(24rem, var(--available-height));
   overflow-inline: hidden;
@@ -552,7 +560,7 @@
 
 .prompt-input__command-copy {
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-columns: auto var(--sigvelo-layout-track-fill) auto;
   align-items: baseline;
   column-gap: var(--sigvelo-spacing-2);
   min-inline-size: 0;
@@ -565,7 +573,7 @@
 }
 
 .prompt-input__command-meta {
-  color: var(--prompt-input-secondary-text);
+  color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-density-compact-control-font-size);
   white-space: nowrap;
 }
@@ -614,6 +622,7 @@
   opacity: 1;
 }
 
+/* Local wrap. Not --sigvelo-layout-break-compact. */
 @container prompt-input (inline-size < 28rem) {
   .prompt-input__reference-label {
     max-inline-size: 12rem;
@@ -622,7 +631,7 @@
 
 .prompt-input__command-description,
 .prompt-input__context-description {
-  color: var(--prompt-input-secondary-text);
+  color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-density-compact-control-font-size);
 }
 
@@ -640,12 +649,10 @@
 }
 
 .prompt-input__context-trigger[data-unavailable] {
-  color: var(--sigvelo-color-warning-text);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .prompt-input__context-menu {
-  --prompt-input-secondary-text: var(--sigvelo-color-text-muted);
-
   min-inline-size: min(22rem, calc(100dvi - var(--sigvelo-spacing-4)));
   max-inline-size: min(28rem, calc(100dvi - var(--sigvelo-spacing-4)));
 }
@@ -665,9 +672,10 @@
   }
 
   .prompt-input__button,
-  .prompt-input__footer .button,
   .prompt-input__attachment-remove,
-  .prompt-input__reference.button {
+  .prompt-input__recording-button,
+  .prompt-input__reference,
+  .prompt-input__submit {
     --sigvelo-recipe-button-height: var(--sigvelo-control-height-xl);
   }
 

package/dist/styles/queue.css

@@ -69,6 +69,7 @@
 }
 
 .queue__list-scroll {
+  /* Scrollbar inset, not --sigvelo-layout-stack. */
   padding-inline-end: var(--sigvelo-spacing-4);
 }
 

package/dist/styles/reasoning.css

@@ -5,13 +5,5 @@
 }
 
 .reasoning__text {
-  padding-inline-start: var(--sigvelo-spacing-3);
-  border-inline-start: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) * 2)
-    var(--sigvelo-color-neutral-border-subtle);
-}
-
-@media (forced-colors: active) {
-  .reasoning__text {
-    border-inline-start: 2px solid CanvasText;
-  }
+  padding-inline-start: 0;
 }

package/dist/styles/recipes.css

@@ -48,6 +48,10 @@
   --sigvelo-recipe-group-label-font-size: var(--sigvelo-text-xs);
   --sigvelo-recipe-group-label-font-weight: var(--sigvelo-font-weight-semibold);
   --sigvelo-recipe-group-label-line-height: inherit;
+  --sigvelo-recipe-layout-gutter: var(--sigvelo-layout-gutter);
+  --sigvelo-recipe-layout-gap: var(--sigvelo-layout-gap);
+  --sigvelo-recipe-layout-stack: var(--sigvelo-layout-stack);
+  --sigvelo-recipe-layout-cluster: var(--sigvelo-layout-cluster);
 }
 
 :where([data-slot="select-trigger"][data-size="sm"], .toggle--sm) {
@@ -92,8 +96,7 @@
 :where(
   [data-slot="dialog-footer"],
   [data-slot="alert-dialog-footer"],
-  [data-slot="message-edit-actions"],
-  [data-slot="subagent-run-actions"]
+  [data-slot="message-edit-actions"]
 ) {
   display: flex;
   flex-wrap: wrap;
@@ -137,9 +140,32 @@
   scrollbar-gutter: stable;
 }
 
+/* Host-filling application surfaces. Display mode stays with the component;
+   this only stops a shell from inventing its own 100% / min-size contract. */
+:where([data-recipe~="fill-host"]) {
+  min-inline-size: 0;
+  min-block-size: 0;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+/* Capped page column. Padding and measure come from the layout tokens so a
+   dossier, a run list, and a start screen sit on the same edges. */
+:where([data-recipe~="page"]) {
+  box-sizing: border-box;
+  min-inline-size: 0;
+  inline-size: 100%;
+  max-inline-size: var(--sigvelo-layout-content);
+  margin-inline: auto;
+  padding-block: var(--sigvelo-recipe-layout-stack);
+  padding-inline: var(--sigvelo-recipe-layout-gutter);
+}
+
 :where([data-recipe~="framed-panel"]) {
   display: flex;
   flex-direction: column;
+  min-inline-size: 0;
+  min-block-size: 0;
   inline-size: 100%;
   overflow: hidden;
   font-family: inherit;
@@ -150,13 +176,6 @@
   border-radius: var(--sigvelo-radius-md);
 }
 
-:where([data-recipe~="application-plane"]) {
-  margin: var(--sigvelo-spacing-3);
-  border-radius: var(--sigvelo-radius-lg);
-  background: var(--sigvelo-color-surface);
-  box-shadow: var(--sigvelo-elevation-floating);
-}
-
 :where([data-recipe~="disclosure-stack"]) {
   display: flex;
   flex-direction: column;
@@ -196,47 +215,6 @@
   mask-repeat: no-repeat;
 }
 
-/* The inline-axis partner, for toolbars, tab strips, and chip rows that scroll
-   sideways. Gradients take physical directions only, so start/end are swapped
-   under [dir="rtl"] rather than expressed logically. */
-:where([data-recipe~="scroll-fade-x"]) {
-  --sigvelo-scroll-fade-start: 0px;
-  --sigvelo-scroll-fade-end: 0px;
-  -webkit-mask-image: linear-gradient(
-    to right,
-    transparent 0,
-    #000 var(--sigvelo-scroll-fade-start),
-    #000 calc(100% - var(--sigvelo-scroll-fade-end)),
-    transparent 100%
-  );
-  mask-image: linear-gradient(
-    to right,
-    transparent 0,
-    #000 var(--sigvelo-scroll-fade-start),
-    #000 calc(100% - var(--sigvelo-scroll-fade-end)),
-    transparent 100%
-  );
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-}
-
-:where([dir="rtl"] [data-recipe~="scroll-fade-x"], [data-recipe~="scroll-fade-x"][dir="rtl"]) {
-  -webkit-mask-image: linear-gradient(
-    to left,
-    transparent 0,
-    #000 var(--sigvelo-scroll-fade-start),
-    #000 calc(100% - var(--sigvelo-scroll-fade-end)),
-    transparent 100%
-  );
-  mask-image: linear-gradient(
-    to left,
-    transparent 0,
-    #000 var(--sigvelo-scroll-fade-start),
-    #000 calc(100% - var(--sigvelo-scroll-fade-end)),
-    transparent 100%
-  );
-}
-
 @media (any-pointer: coarse) {
   :where(:root, [data-theme="light"], [data-theme="dark"]) {
     --sigvelo-recipe-row-min-height: var(--sigvelo-control-height-xl);
@@ -452,7 +430,7 @@
   [data-slot="autocomplete-item"]
 )[data-highlighted] {
   color: var(--sigvelo-color-neutral-text-on-subtle);
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  background-color: var(--sigvelo-color-neutral-bg-selected);
 }
 
 :where(
@@ -836,13 +814,6 @@
     --sigvelo-recipe-surface-border: CanvasText;
   }
 
-  :where([data-recipe~="application-plane"]) {
-    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
-    background: Canvas;
-    color: CanvasText;
-    box-shadow: none;
-  }
-
   :where(
     [data-slot="input"],
     [data-slot="select-trigger"],

package/dist/styles/responsive-sidebar-shell.css

@@ -1,15 +1,12 @@
+/* Three planes, Ploy-style: the rail is the recessed vertical, everything
+   beside it — bar, content — rests directly on the page surface, and one
+   elevated card (a host's, e.g. the workbench) floats above it. Nothing else
+   paints. */
 .responsive-sidebar-shell {
   container: responsive-sidebar-shell / inline-size;
-  block-size: 100%;
-  min-inline-size: 0;
-  min-block-size: 0;
   display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
-  background: var(--sigvelo-color-surface-under);
-}
-
-.responsive-sidebar-shell > .app-top-bar {
-  background: var(--sigvelo-color-surface-under);
+  grid-template-rows: var(--sigvelo-layout-track-fill);
+  background: var(--sigvelo-color-surface);
 }
 
 .responsive-sidebar-shell__frame {
@@ -21,10 +18,11 @@
   min-inline-size: 0;
   min-block-size: 0;
   display: grid;
-  grid-template-columns: var(--resizable-side-panel-size, 16rem) minmax(0, 1fr);
-  grid-template-rows: minmax(0, 1fr);
+  grid-template-columns:
+    var(--responsive-sidebar-shell-sidebar-size, var(--sigvelo-layout-sidebar))
+    var(--sigvelo-layout-track-fill);
+  grid-template-rows: var(--sigvelo-layout-track-fill);
   overflow: hidden;
-  background: var(--sigvelo-color-surface-under);
   color: var(--sigvelo-color-text);
   font-family: inherit;
   transition: grid-template-columns var(--sigvelo-motion-duration-layout)
@@ -45,19 +43,64 @@
 .responsive-sidebar-shell__sidebar {
   grid-column: 1;
   grid-row: 1;
+  /* One rail tone everywhere: the recessed step below the page. The compact
+     overlay drawer below carries its own raised material regardless. */
+  background: var(--responsive-sidebar-shell-sidebar-surface, var(--sigvelo-color-surface-under));
 }
 
 .responsive-sidebar-shell__main {
   grid-column: 2;
   grid-row: 1;
   display: grid;
-  grid-template-rows: minmax(0, 1fr);
+  /* The bar's own row, so it never overlaps the content it labels. Auto, not a
+     reserved height: a shell with no bar keeps the whole column for content. */
+  grid-template-rows: auto var(--sigvelo-layout-track-fill);
 }
 
 .responsive-sidebar-shell__peek {
   display: none;
 }
 
+/* Floats over the main column so an error never reflows the content it
+   annotates; the column stays the positioning context. */
+.responsive-sidebar-shell__main {
+  position: relative;
+}
+
+.responsive-sidebar-shell__error {
+  position: absolute;
+  z-index: 2;
+  inset-block-start: var(--sigvelo-layout-gutter);
+  inset-inline: 50% auto;
+  max-inline-size: min(32rem, calc(100% - var(--sigvelo-layout-gutter) * 2));
+  padding: var(--sigvelo-layout-cluster) var(--sigvelo-layout-gutter);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-danger-border-subtle);
+  border-radius: var(--sigvelo-radius-sm);
+  translate: -50% 0;
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-2);
+  color: var(--sigvelo-color-danger-text);
+  background: var(--sigvelo-color-danger-bg-subtle);
+  font-size: var(--sigvelo-text-compact);
+}
+
+.responsive-sidebar-shell__error > svg {
+  flex: 0 0 auto;
+}
+
+/* Wide widths show the plain title and the icon toggle; the compact trigger
+   only exists below the drawer breakpoint, where the title itself becomes the
+   control that opens the sidebar. */
+.responsive-sidebar-shell__title-trigger {
+  display: none;
+}
+
+.responsive-sidebar-shell__compact-leading {
+  display: none;
+}
+
 @media (forced-colors: active) {
   .responsive-sidebar-shell,
   .responsive-sidebar-shell__frame {
@@ -71,7 +114,7 @@
 }
 
 .responsive-sidebar-shell[data-sidebar-open="false"] > .responsive-sidebar-shell__frame {
-  grid-template-columns: minmax(0, 1fr);
+  grid-template-columns: var(--sigvelo-layout-track-fill);
 }
 
 .responsive-sidebar-shell[data-sidebar-open="false"]
@@ -91,21 +134,10 @@
   grid-column: 1;
 }
 
+/* 56rem matches --sigvelo-layout-break-compact. Container queries cannot read var(). */
 @container responsive-sidebar-shell (inline-size <= 56rem) {
-  /* Narrow hosts flatten the application plane: no desktop chrome remains
-     around it, so margins and elevation would read as a card in a frame. */
-  .responsive-sidebar-shell__main {
-    margin: 0;
-    border-radius: 0;
-    box-shadow: none;
-  }
-
-  .responsive-sidebar-shell > .app-top-bar {
-    background: var(--sigvelo-color-surface);
-  }
-
   .responsive-sidebar-shell__frame {
-    grid-template-columns: minmax(0, 1fr);
+    grid-template-columns: var(--sigvelo-layout-track-fill);
   }
 
   .responsive-sidebar-shell__sidebar,
@@ -118,10 +150,10 @@
     position: relative;
     z-index: calc(var(--sigvelo-z-chrome) + 3);
     inset-inline-start: 50%;
-    inline-size: min(calc(100cqi - var(--sigvelo-spacing-3)), 34rem);
+    inline-size: min(calc(100cqi - var(--sigvelo-layout-gutter)), 34rem);
     max-inline-size: none;
     block-size: auto;
-    max-block-size: min(32rem, calc(100% - var(--sigvelo-spacing-3)));
+    max-block-size: min(32rem, calc(100% - var(--sigvelo-layout-gutter)));
     align-self: start;
     margin-block-start: var(--sigvelo-spacing-1);
     overflow: hidden;
@@ -144,6 +176,52 @@
     display: none;
   }
 
+  /* The title stands in for both its own text and the icon toggle: one
+     labelled control that opens the drawer, instead of an anonymous icon
+     beside a dead title. The bar names its compact takeover once
+     (`data-compact-leading`) instead of tagging each hidden control. */
+  [data-compact-leading] .responsive-sidebar-shell__toggle,
+  [data-compact-leading="trigger"] .responsive-sidebar-shell__title-text {
+    display: none;
+  }
+
+  .responsive-sidebar-shell__compact-leading {
+    display: contents;
+  }
+
+  .responsive-sidebar-shell__title-trigger {
+    inline-size: auto;
+    max-inline-size: min(22rem, 58vw);
+    min-inline-size: 0;
+    min-block-size: var(--sigvelo-density-compact-control-height);
+    display: inline-flex;
+    gap: var(--sigvelo-density-compact-control-gap);
+    padding-inline: var(--sigvelo-density-compact-control-padding-inline);
+    border-radius: var(--sigvelo-radius-md);
+    color: var(--sigvelo-color-text);
+    font-size: var(--sigvelo-density-compact-control-font-size);
+    font-weight: var(--sigvelo-font-weight-semibold);
+  }
+
+  .responsive-sidebar-shell__title-trigger span {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .responsive-sidebar-shell__title-trigger > svg {
+    flex: 0 0 auto;
+    inline-size: var(--sigvelo-density-compact-control-icon-size);
+    block-size: var(--sigvelo-density-compact-control-icon-size);
+    color: var(--sigvelo-color-text-muted);
+    transition: rotate var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
+  }
+
+  .responsive-sidebar-shell__title-trigger[aria-expanded="true"] > svg {
+    rotate: 180deg;
+  }
+
   .responsive-sidebar-shell[data-sidebar-open="false"]
     > .responsive-sidebar-shell__frame
     > .responsive-sidebar-shell__sidebar {

package/dist/styles/separator.css

@@ -4,12 +4,12 @@
 }
 
 .separator--horizontal {
-  width: 100%;
-  height: 1px;
+  inline-size: 100%;
+  block-size: 1px;
 }
 
 .separator--vertical {
-  width: 1px;
-  height: 100%;
-  min-height: 1rem;
+  inline-size: 1px;
+  block-size: 100%;
+  min-block-size: 1rem;
 }

package/dist/styles/sources.css

@@ -30,7 +30,7 @@
   align-items: flex-start;
   gap: var(--sigvelo-spacing-1-5);
   padding-block: var(--sigvelo-spacing-1-5);
-  padding-inline: var(--sigvelo-spacing-2);
+  padding-inline: 0;
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-surface);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -67,13 +67,13 @@
 }
 
 .sources__link-title {
-  font-size: var(--sigvelo-text-compact);
+  font-size: var(--sigvelo-text-prose);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text);
 }
 
 .sources__link-description {
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-text-meta);
   color: var(--sigvelo-color-text-muted);
   line-height: var(--sigvelo-leading-snug);
   overflow: hidden;
@@ -84,7 +84,7 @@
 }
 
 .sources__link-host {
-  font-size: var(--sigvelo-text-2xs);
+  font-size: var(--sigvelo-text-meta);
   color: var(--sigvelo-color-text-muted);
   font-variant-numeric: tabular-nums;
 }

package/dist/styles/stepper.css

@@ -189,6 +189,7 @@
 }
 
 .stepper__content[data-spacing="compact"] {
+  /* Explicit density variant, not --sigvelo-layout-stack. */
   gap: var(--sigvelo-spacing-4);
 }