@mcp-b/react-components 0.48.0 → 0.49.1

package/dist/styles/agent-chat.css

@@ -1,6 +1,6 @@
 .agent-chat {
   /* Hooks, not constants: hosts set --agent-chat-content-max-inline-size or
-     --agent-chat-composer-scrim-fade on any ancestor. Declaring them here
+     --agent-chat-dock-scrim-fade on any ancestor. Declaring them here
      would beat every inherited value, so the defaults live in the fallbacks
      at each use site. */
   container: agent-chat / inline-size;
@@ -22,7 +22,7 @@
 }
 
 /* Room for the last message to scroll clear of the floating composer.
-   --agent-chat-composer-size is set from a ResizeObserver in AgentChat. */
+   --agent-chat-dock-size is set from a ResizeObserver in AgentChat. */
 .agent-chat__transcript-content {
   /* Also the virtual rows' block-start offset — keep padding and rows in
      lockstep (see .message-scroller__virtual-item). Row spacing is NOT css
@@ -44,21 +44,23 @@
   /* Clearance = composer + its scrim band, so a transcript resting at the
      bottom never sits inside the fade. */
   padding-block: var(--message-scroller-virtual-block-start)
-    calc(var(--agent-chat-composer-size, 5rem) + var(--agent-chat-composer-scrim-fade, 2.5rem));
+    calc(var(--agent-chat-dock-size, 5rem) + var(--agent-chat-dock-scrim-fade, 2.5rem));
   padding-inline: var(--agent-chat-used-column-inset);
 }
 
-.agent-chat[data-composer-hidden] .agent-chat__transcript-content {
+.agent-chat:not(:has(.agent-chat__dock-content > :not(.agent-chat__notice:empty)))
+  .agent-chat__transcript-content {
   padding-block-end: var(--sigvelo-layout-gutter);
 }
 
 .agent-chat__scroll-button {
   --message-scroller-button-inset-block-end: calc(
-    var(--agent-chat-composer-size, 5rem) + var(--sigvelo-spacing-2)
+    var(--agent-chat-dock-size, 5rem) + var(--sigvelo-spacing-2)
   );
 }
 
-.agent-chat[data-composer-hidden] .agent-chat__scroll-button {
+.agent-chat:not(:has(.agent-chat__dock-content > :not(.agent-chat__notice:empty)))
+  .agent-chat__scroll-button {
   --message-scroller-button-inset-block-end: var(--sigvelo-spacing-2);
 }
 
@@ -71,10 +73,11 @@
   block-size: 100%;
   min-block-size: 0;
   place-items: center;
-  padding-block-end: var(--agent-chat-composer-size, 5rem);
+  padding-block-end: var(--agent-chat-dock-size, 5rem);
 }
 
-.agent-chat[data-composer-hidden] .agent-chat__transcript-loading {
+.agent-chat:not(:has(.agent-chat__dock-content > :not(.agent-chat__notice:empty)))
+  .agent-chat__transcript-loading {
   padding-block-end: 0;
 }
 
@@ -132,9 +135,9 @@
   min-inline-size: 0;
 }
 
-.agent-chat-start-screen__composer > .agent-chat__composer {
+.agent-chat-start-screen__composer > .agent-chat__dock {
   /* Grid item z-index, not isolation: the tray is a sibling and must paint
-     behind the card. isolation: isolate on .agent-chat__composer trapped the
+     behind the card. isolation: isolate on .agent-chat__dock trapped the
      inner z-index and left the tray as a second pill. */
   isolation: auto;
   z-index: 1;
@@ -144,13 +147,19 @@
   backdrop-filter: none;
 }
 
-.agent-chat-start-screen__composer > .agent-chat__composer::after {
+.agent-chat-start-screen__composer > .agent-chat__dock::after {
   content: none;
 }
 
+.agent-chat-start-screen__composer > .agent-chat__dock > .agent-chat__dock-content {
+  --agent-chat-dock-ink-room: 0px;
+
+  overflow: visible;
+}
+
 /* The one moment the composer is the subject of the screen rather than
    chrome pinned under a transcript: lifted further off the page. */
-.agent-chat-start-screen__composer > .agent-chat__composer > .prompt-input {
+.agent-chat-start-screen__composer > .agent-chat__dock > .agent-chat__dock-content > .prompt-input {
   z-index: 1;
   inline-size: 100%;
 }
@@ -202,8 +211,7 @@
   white-space: nowrap;
 }
 
-.agent-chat-start-screen__starters,
-.agent-chat-start-screen__lead {
+.agent-chat-start-screen__suggestions {
   grid-row: 3;
   align-self: start;
   min-inline-size: 0;
@@ -340,31 +348,25 @@
  * pull the textarea out from under the caret mid-sentence, which is the whole
  * reason this is not a transition on the container.
  *
- * `:has()` reads the composer's own text, so nothing has to be lifted into
- * React state — AgentChat never sees the input value, and this way it does not
- * need to.
+ * The shared draft provider drives this state for both textareas and rich
+ * editors. Hiding suggestions never relocates or recreates the live form.
  */
 .agent-chat-start-screen__heading,
-.agent-chat-start-screen__starters,
-.agent-chat-start-screen__lead {
+.agent-chat-start-screen__suggestions {
   transition:
     opacity var(--sigvelo-motion-duration-disclosure) var(--sigvelo-ease-snappy),
     translate var(--sigvelo-motion-duration-disclosure) var(--sigvelo-ease-snappy),
     visibility var(--sigvelo-motion-duration-disclosure);
 }
 
-.agent-chat-start-screen__content:has(textarea:not(:placeholder-shown))
-  .agent-chat-start-screen__heading {
+.agent-chat-start-screen[data-drafting] .agent-chat-start-screen__heading {
   opacity: 0;
   translate: 0 var(--sigvelo-motion-distance-md);
 }
 
 /* Starters are buttons, so fading them is not enough — invisible controls that
    still take a click or a Tab stop are worse than visible ones. */
-.agent-chat-start-screen__content:has(textarea:not(:placeholder-shown))
-  .agent-chat-start-screen__starters,
-.agent-chat-start-screen__content:has(textarea:not(:placeholder-shown))
-  .agent-chat-start-screen__lead {
+.agent-chat-start-screen[data-drafting] .agent-chat-start-screen__suggestions {
   visibility: hidden;
   opacity: 0;
 }
@@ -372,7 +374,10 @@
 /* The composer floats above the transcript, but its dock remains part of the
    transcript plane. Keep the underlay on the owning surface token so light
    and dark themes meet without a visible horizontal seam. */
-.agent-chat__composer {
+.agent-chat__dock {
+  display: flex;
+  flex-direction: column;
+  max-block-size: 100%;
   isolation: isolate;
   position: absolute;
   inset-inline: 0;
@@ -390,22 +395,22 @@
 /* Solid behind the composer itself, dissolving upward so passing transcript
    content fades into the surface instead of hitting a hard edge (Codex and
    Claude both ship an equivalent bottom fade band). */
-.agent-chat__composer::after {
+.agent-chat__dock::after {
   position: absolute;
   z-index: -1;
   inset: 0;
-  inset-block-start: calc(-1 * var(--agent-chat-composer-scrim-fade, 2.5rem));
+  inset-block-start: calc(-1 * var(--agent-chat-dock-scrim-fade, 2.5rem));
   content: "";
   pointer-events: none;
   background: linear-gradient(
     to bottom,
     transparent,
     var(--agent-chat-surface, var(--sigvelo-color-surface))
-      var(--agent-chat-composer-scrim-fade, 2.5rem)
+      var(--agent-chat-dock-scrim-fade, 2.5rem)
   );
 }
 
-.agent-chat__composer > .prompt-input {
+.agent-chat__dock-content > .prompt-input {
   z-index: 1;
   inline-size: min(
     100%,
@@ -426,14 +431,11 @@
 }
 
 .agent-chat__notice:empty {
+  display: none;
   margin-block-end: 0;
 }
 
-.agent-chat__queued.prompt-input__tray {
-  --agent-chat-queued-row-block-size: var(--sigvelo-spacing-5);
-  --agent-chat-queued-list-max-block-size: calc(
-    3 * var(--agent-chat-queued-row-block-size) + 2 * var(--sigvelo-border-width)
-  );
+.agent-chat__prompt-tray.prompt-input__tray {
   --prompt-input-tray-overlap: var(--sigvelo-spacing-2);
 
   position: relative;
@@ -449,63 +451,6 @@
   margin-inline: auto;
 }
 
-.agent-chat__queued-list {
-  flex: 1;
-  display: grid;
-  gap: var(--sigvelo-border-width);
-  max-block-size: var(--agent-chat-queued-list-max-block-size);
-  min-inline-size: 0;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  scrollbar-gutter: stable;
-}
-
-.agent-chat__queued .agent-chat__queued-message {
-  display: flex;
-  align-items: center;
-  min-inline-size: 0;
-  min-block-size: var(--agent-chat-queued-row-block-size);
-  gap: var(--sigvelo-spacing-1-5);
-  padding-block: 0;
-  padding-inline: var(--sigvelo-spacing-2);
-  color: var(--sigvelo-color-text);
-  font-size: var(--sigvelo-text-compact);
-  line-height: var(--sigvelo-text-compact-leading);
-}
-
-.agent-chat__queued .agent-chat__queued-indicator {
-  display: inline-flex;
-  flex: none;
-  color: var(--sigvelo-color-text-muted);
-}
-
-.agent-chat__queued .agent-chat__queued-indicator svg {
-  inline-size: var(--sigvelo-text-sm);
-  block-size: var(--sigvelo-text-sm);
-}
-
-.agent-chat__queued .agent-chat__queued-content {
-  font-size: inherit;
-  line-height: inherit;
-}
-
-.agent-chat__queued-message .agent-chat__queued-actions {
-  opacity: 1;
-}
-
-.agent-chat__queued .agent-chat__queued-action {
-  --sigvelo-recipe-button-height: var(--agent-chat-queued-row-block-size);
-  --sigvelo-recipe-button-padding-inline: var(--sigvelo-spacing-1-5);
-  --sigvelo-recipe-button-font-size: var(--sigvelo-text-xs);
-  --sigvelo-recipe-button-icon-size: var(--sigvelo-text-xs);
-
-  flex: none;
-  font-weight: var(--sigvelo-font-weight-normal);
-}
-
 @media (any-pointer: coarse) {
   .agent-chat-start-screen__composer-tray > .button,
   .agent-chat-starter__dismiss.button {
@@ -516,13 +461,6 @@
   .agent-chat-starter__dismiss {
     opacity: 1;
   }
-
-  .agent-chat__queued.prompt-input__tray {
-    --agent-chat-queued-row-block-size: var(--sigvelo-control-height-xl);
-    --agent-chat-queued-list-max-block-size: calc(
-      2 * var(--agent-chat-queued-row-block-size) + var(--sigvelo-border-width)
-    );
-  }
 }
 
 .agent-chat__notice[data-tone="danger"],
@@ -606,7 +544,7 @@
     padding-inline: var(--agent-chat-used-column-inset);
   }
 
-  .agent-chat__composer {
+  .agent-chat__dock {
     padding-block-end: max(var(--sigvelo-layout-stack), env(safe-area-inset-bottom, 0px));
     padding-inline: max(
         var(--agent-chat-column-inset, var(--sigvelo-spacing-2)),
@@ -623,6 +561,16 @@
     font-size: var(--sigvelo-text-lg);
   }
 
+  .agent-chat-start-screen__composer-tray:has(> :nth-child(3):last-child) {
+    display: grid;
+    grid-template-columns: repeat(3, var(--sigvelo-layout-track-fill));
+  }
+
+  .agent-chat-start-screen__composer-tray:has(> :nth-child(3):last-child) > .button {
+    inline-size: 100%;
+    justify-content: center;
+  }
+
   .agent-chat-starter__label {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -641,8 +589,33 @@
     grid-row: 1;
   }
 
-  .agent-chat-start-screen__starters,
-  .agent-chat-start-screen__lead {
+  .agent-chat-start-screen__suggestions {
     grid-row: 2;
   }
 }
+
+/* Quiet annotation under a part whose stored content was compacted. */
+.agent-chat__compacted {
+  margin-block-start: var(--sigvelo-spacing-1);
+  font-size: var(--sigvelo-text-meta);
+  font-style: italic;
+  color: var(--sigvelo-color-text-muted);
+}
+
+/* All bottom content shares one measured and bounded scroll surface. Leave
+   room for the composer's edge and focus shadows without changing its layout. */
+.agent-chat__dock-content {
+  --agent-chat-dock-ink-room: var(--sigvelo-spacing-5);
+
+  min-block-size: 0;
+  overflow: auto;
+  margin: calc(-1 * var(--agent-chat-dock-ink-room));
+  padding: var(--agent-chat-dock-ink-room);
+}
+.agent-chat__dock:not(:has(.agent-chat__dock-content > :not(.agent-chat__notice:empty))) {
+  padding: 0;
+}
+
+.agent-chat__dock:not(:has(.agent-chat__dock-content > :not(.agent-chat__notice:empty)))::after {
+  content: none;
+}

package/dist/styles/agent-tool-detail.css

@@ -14,8 +14,6 @@
 
 .agent-tool-detail__run-state {
   grid-row: 2;
-  display: grid;
-  gap: var(--sigvelo-layout-cluster);
   min-inline-size: 0;
   padding-block: var(--sigvelo-layout-cluster);
   padding-inline: var(--sigvelo-layout-gutter);
@@ -23,20 +21,6 @@
     var(--sigvelo-color-neutral-border-subtle);
 }
 
-.agent-tool-detail__error,
-.agent-tool-detail__summary {
-  min-inline-size: 0;
-  margin: 0;
-  overflow-wrap: anywhere;
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-xs);
-  line-height: var(--sigvelo-leading-normal);
-}
-
-.agent-tool-detail__error {
-  color: var(--sigvelo-color-danger-text);
-}
-
 .agent-tool-detail__chat {
   grid-row: 3;
   min-inline-size: 0;

package/dist/styles/base.css

@@ -76,7 +76,7 @@
   .task__item::before,
   .test-results__test-status,
   .think-full-app__resizer::before,
-  .think-routine-library__routine-status,
+  .think-routine__routine-status,
   [data-slot="meter-indicator"],
   [data-slot="meter-track"],
   [data-slot="progress-indicator"],
@@ -192,11 +192,3 @@ textarea {
 .tabular-nums {
   font-variant-numeric: tabular-nums;
 }
-
-@media (prefers-contrast: more) {
-  :root {
-    --sigvelo-color-neutral-border-muted: var(--sigvelo-color-neutral-600);
-    --sigvelo-color-neutral-border-subtle: var(--sigvelo-color-neutral-500);
-    --sigvelo-color-neutral-bg-subtle: var(--sigvelo-color-neutral-200);
-  }
-}

package/dist/styles/browser-run-panel.css

@@ -2,18 +2,6 @@
   min-inline-size: 0;
   min-block-size: 0;
   block-size: 100%;
-  border: 0;
-  border-radius: 0;
-}
-
-/* The tab strip and the address row are one chrome group: only the bottom
-   row draws the group's edge. */
-.browser-run-panel .web-preview__nav:has(.browser-run-panel__tabs) {
-  gap: 0;
-  padding-block: 0;
-  padding-inline: var(--sigvelo-spacing-1-5);
-  border-block-end: 0;
-  box-shadow: none;
 }
 
 .browser-run-panel__tabs {
@@ -76,10 +64,8 @@
   line-height: var(--sigvelo-leading-tight);
 }
 
-.browser-run-panel .browser-run-panel__body {
+.browser-run-panel__body {
   min-block-size: 0;
-  display: flex;
-  padding: 0;
 }
 
 /* The panel owns the space allotted to whichever direct surface it hosts. */

package/dist/styles/button.css

@@ -2,6 +2,7 @@
   --sigvelo-recipe-button-height: var(--sigvelo-control-height-md);
   --sigvelo-recipe-button-padding-inline: var(--sigvelo-spacing-3);
   --sigvelo-recipe-button-font-size: var(--sigvelo-control-text-md);
+  --sigvelo-recipe-button-line-height: var(--sigvelo-control-line-height-md);
   --sigvelo-recipe-button-icon-size: var(--sigvelo-control-icon-size-md);
   --sigvelo-recipe-button-radius: var(--sigvelo-recipe-control-radius);
 
@@ -18,7 +19,7 @@
   font-family: inherit;
   font-size: var(--sigvelo-recipe-button-font-size);
   font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: var(--sigvelo-leading-compact);
+  line-height: var(--sigvelo-recipe-button-line-height);
   text-decoration: none;
   border-radius: var(--sigvelo-recipe-button-radius);
   translate: 0;
@@ -176,6 +177,7 @@
   --sigvelo-recipe-button-height: var(--sigvelo-control-height-xs);
   --sigvelo-recipe-button-padding-inline: var(--sigvelo-control-padding-inline-xs);
   --sigvelo-recipe-button-font-size: var(--sigvelo-control-text-xs);
+  --sigvelo-recipe-button-line-height: var(--sigvelo-control-line-height-xs);
   --sigvelo-recipe-button-icon-size: var(--sigvelo-control-icon-size-xs);
 }
 
@@ -183,6 +185,7 @@
   --sigvelo-recipe-button-height: var(--sigvelo-control-height-sm);
   --sigvelo-recipe-button-padding-inline: var(--sigvelo-control-padding-inline-sm);
   --sigvelo-recipe-button-font-size: var(--sigvelo-control-text-sm);
+  --sigvelo-recipe-button-line-height: var(--sigvelo-control-line-height-sm);
   --sigvelo-recipe-button-icon-size: var(--sigvelo-control-icon-size-sm);
 }
 
@@ -190,6 +193,7 @@
   --sigvelo-recipe-button-height: var(--sigvelo-control-height-md);
   --sigvelo-recipe-button-padding-inline: var(--sigvelo-control-padding-inline-md);
   --sigvelo-recipe-button-font-size: var(--sigvelo-control-text-md);
+  --sigvelo-recipe-button-line-height: var(--sigvelo-control-line-height-md);
   --sigvelo-recipe-button-icon-size: var(--sigvelo-control-icon-size-md);
 }
 
@@ -197,6 +201,7 @@
   --sigvelo-recipe-button-height: var(--sigvelo-control-height-lg);
   --sigvelo-recipe-button-padding-inline: var(--sigvelo-control-padding-inline-lg);
   --sigvelo-recipe-button-font-size: var(--sigvelo-control-text-lg);
+  --sigvelo-recipe-button-line-height: var(--sigvelo-control-line-height-lg);
   --sigvelo-recipe-button-icon-size: var(--sigvelo-control-icon-size-lg);
 }
 
@@ -204,6 +209,7 @@
   --sigvelo-recipe-button-height: var(--sigvelo-control-height-xl);
   --sigvelo-recipe-button-padding-inline: var(--sigvelo-control-padding-inline-xl);
   --sigvelo-recipe-button-font-size: var(--sigvelo-control-text-xl);
+  --sigvelo-recipe-button-line-height: var(--sigvelo-control-line-height-xl);
   --sigvelo-recipe-button-icon-size: var(--sigvelo-control-icon-size-xl);
 }
 

package/dist/styles/code-block.css

@@ -115,3 +115,15 @@
     border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 }
+
+.code-block[data-surface="plain"] {
+  background-color: transparent;
+}
+
+.code-block[data-wrap] .code-block__content,
+.code-block[data-wrap] .code-block__content--highlighted pre.shiki,
+.code-block[data-wrap] .code-block__content--highlighted pre.shiki code {
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}

package/dist/styles/codex-model-selector.css

@@ -164,6 +164,10 @@
   line-height: var(--sigvelo-leading-compact);
 }
 
+.codex-model-selector__option[data-highlighted] .codex-model-selector__option-description {
+  color: inherit;
+}
+
 .codex-model-selector__option-indicator {
   order: 2;
   margin-inline-start: auto;