@mcp-b/react-components 0.16.1 → 0.18.0

package/dist/styles/activity.css

@@ -3,33 +3,33 @@
 .activity {
   display: flex;
   flex-direction: column;
-  width: 100%;
-  min-width: 0;
+  inline-size: 100%;
+  min-inline-size: 0;
   /* Hard cap, Codex-style, on the WHOLE unit — collapsed line and expanded
      log alike — so toggling never reflows the conversation width. Plain rem,
      not min(100%, …): percentages are ignored in intrinsic-size contributions,
      so the min() let wide nowrap rows inflate content-sized ancestors. */
-  max-width: 36rem;
+  max-inline-size: 36rem;
   /* Live tool labels and panels must never contribute a wider intrinsic size
      when Activity is inserted into a narrow chat transcript. */
   contain: inline-size;
   /* Whitespace separates the work log from message prose around it */
-  margin-block: 0.5rem;
+  margin-block: var(--sigvelo-spacing-2);
   font-family: inherit;
   color: var(--sigvelo-color-text);
 }
 
 .activity__trigger {
   display: flex;
-  width: 100%;
-  min-width: 0;
+  inline-size: 100%;
+  min-inline-size: 0;
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
   padding-block: var(--sigvelo-spacing-1-5);
   /* The fill bleeds past the text edge via the negative margin, so the label
      stays flush with the rows below instead of indenting on hover */
-  padding-inline: 0.5rem;
-  margin-inline: -0.5rem;
+  padding-inline: var(--sigvelo-spacing-2);
+  margin-inline: calc(var(--sigvelo-spacing-2) * -1);
   background-color: transparent;
   border: none;
   border-radius: var(--sigvelo-radius-sm);
@@ -42,8 +42,8 @@
   text-align: start;
   cursor: pointer;
   transition:
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .activity__trigger:hover:not([data-disabled]) {
@@ -59,17 +59,17 @@
 .activity__trigger-icon {
   display: inline-flex;
   color: var(--sigvelo-color-text-muted);
-  transition: transform var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized);
+  transition: rotate var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-enter);
 }
 
 .activity__trigger[data-panel-open] .activity__trigger-icon {
-  transform: rotate(90deg);
+  rotate: 90deg;
 }
 
 .activity__content {
   /* The panel clips (overflow: hidden), so it must own the gutter the row
      hover fills bleed into — the list padding puts the text back in line */
-  margin-inline: -0.5rem;
+  margin-inline: calc(var(--sigvelo-spacing-2) * -1);
   /* Standard easing, not emphasized: the expo-out curve front-loads ~60% of
      the motion into the first frames, which makes collapsing read as content
      snapping upward instead of folding. */
@@ -81,8 +81,8 @@
   gap: var(--sigvelo-spacing-1-5);
   /* Unbounded on purpose: the expanded log flows in the conversation scroll;
      only subsection panels (group text, shell output, code) are height-capped. */
-  padding-block: var(--sigvelo-spacing-0-5) 0.5rem;
-  padding-inline: 0.5rem;
+  padding-block: var(--sigvelo-spacing-0-5) var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-spacing-2);
 }
 
 .activity__item {
@@ -108,9 +108,9 @@
   /* Negative margins cancel the padding, so the hover fill gets breathing
      room while the row text stays aligned with its plain siblings */
   padding-block: var(--sigvelo-spacing-0-5);
-  padding-inline: 0.5rem;
+  padding-inline: var(--sigvelo-spacing-2);
   margin-block: -var(--sigvelo-spacing-0-5);
-  margin-inline: -0.5rem;
+  margin-inline: calc(var(--sigvelo-spacing-2) * -1);
   background: none;
   border: none;
   border-radius: var(--sigvelo-radius-sm);
@@ -121,7 +121,8 @@
   line-height: 1.6;
   text-align: start;
   cursor: pointer;
-  transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+  transition: background-color var(--sigvelo-motion-duration-interaction)
+    var(--sigvelo-motion-ease-change);
 }
 
 .activity__group-trigger:hover:not([data-disabled]) {
@@ -135,8 +136,8 @@
   color: var(--sigvelo-color-text-muted);
   opacity: 0;
   transition:
-    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    transform var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized);
+    opacity var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    rotate var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-enter);
 }
 
 .activity__group-trigger:hover .activity__group-icon,
@@ -146,7 +147,7 @@
 }
 
 .activity__group-trigger[data-panel-open] .activity__group-icon {
-  transform: rotate(90deg);
+  rotate: 90deg;
 }
 
 .activity__group-trigger:focus-visible {
@@ -156,7 +157,7 @@
 }
 
 .activity__group-panel-inner {
-  padding-block: var(--sigvelo-spacing-1-5) 0.5rem;
+  padding-block: var(--sigvelo-spacing-1-5) var(--sigvelo-spacing-2);
 }
 
 /* Prose panels (thought traces): quiet text, bounded like everything else */
@@ -167,8 +168,6 @@
   color: var(--sigvelo-color-text-muted);
   white-space: pre-wrap;
   overflow-wrap: anywhere;
-  max-height: 12rem;
-  overflow-y: auto;
 }
 
 .activity__group-text:focus-visible,
@@ -176,7 +175,7 @@
   outline: none;
   box-shadow: var(--sigvelo-recipe-focus-shadow);
   border-radius: var(--sigvelo-radius-sm);
-  scroll-margin-block: 1rem;
+  scroll-margin-block: var(--sigvelo-spacing-4);
 }
 
 /* Codex-style shell panel: a quiet fill, not a terminal component — no
@@ -184,8 +183,8 @@
 .activity__shell {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
-  padding-block: 0.5rem;
+  gap: var(--sigvelo-spacing-1);
+  padding-block: var(--sigvelo-spacing-2);
   padding-inline: var(--sigvelo-spacing-3);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border-radius: var(--sigvelo-radius-md);
@@ -205,9 +204,6 @@
   color: var(--sigvelo-color-text);
   white-space: pre-wrap;
   overflow-wrap: anywhere;
-  /* Bounded so one long log can't swallow the activity list */
-  max-height: 12rem;
-  overflow-y: auto;
 }
 
 .activity__shell-status {
@@ -222,7 +218,7 @@
 
 .activity__call-audit {
   display: flex;
-  min-width: 0;
+  min-inline-size: 0;
   flex-direction: column;
   gap: var(--sigvelo-spacing-1);
 }
@@ -235,7 +231,7 @@
 
 .activity__call-audit-list {
   display: flex;
-  min-width: 0;
+  min-inline-size: 0;
   flex-direction: column;
   gap: var(--sigvelo-spacing-1);
   margin: 0;
@@ -244,7 +240,7 @@
 }
 
 .activity__call-audit-item {
-  min-width: 0;
+  min-inline-size: 0;
   padding-inline-start: var(--sigvelo-spacing-0-5);
   color: var(--sigvelo-color-text);
   overflow-wrap: anywhere;
@@ -269,21 +265,9 @@
   text-decoration: line-through;
 }
 
-/* Browser panels: screenshots and live views sit inside the quiet fill */
-.activity__shell .browser-live-view {
-  width: 100%;
-}
-
-/* browser_execute splits into small tabs: the web view and the code that
-   drove it. Compact underline tabs — chrome stays quiet inside the shell. */
-.activity__browser-tabs .tabs__tab {
-  padding-block: 0.25rem;
-  padding-inline: var(--sigvelo-spacing-0-5);
-  font-size: var(--sigvelo-text-xs);
-}
-
-.activity__browser-tabs .tabs__panel {
-  padding-block: 0.5rem 0;
+/* Keep nested browser content compact without restyling the Tabs primitive. */
+.activity__browser-panel {
+  padding-block: var(--sigvelo-spacing-2) 0;
 }
 
 /* Blend nested code into the quiet shell fill — no panel-in-panel */
@@ -291,10 +275,12 @@
   background-color: transparent;
 }
 
-/* Bounded and wrapping, like every other panel body */
+/* Bounded so one long detail cannot swallow the activity list. */
+.activity__group-text,
+.activity__shell-output,
 .activity__code-block {
-  max-height: 12rem;
-  overflow-y: auto;
+  max-block-size: 12rem;
+  overflow-block: auto;
 }
 
 .activity__code-block .code-block__content,
@@ -307,8 +293,8 @@
 
 .activity__browser-screenshot {
   display: block;
-  width: 100%;
-  max-height: 16rem;
+  inline-size: 100%;
+  max-block-size: 16rem;
   object-fit: contain;
   border-radius: var(--sigvelo-radius-md);
   background-color: var(--sigvelo-color-surface);
@@ -325,18 +311,24 @@
 
 .activity__favicon {
   display: block;
-  width: 1rem;
-  height: 1rem;
+  inline-size: var(--sigvelo-control-icon-size-md);
+  block-size: var(--sigvelo-control-icon-size-md);
   border-radius: var(--sigvelo-radius-xs);
   background-color: var(--sigvelo-color-surface);
   object-fit: contain;
 }
 
 .activity__item-text {
-  min-width: 0;
+  min-inline-size: 0;
   overflow-wrap: anywhere;
 }
 
+@media (hover: none) {
+  .activity__group-icon {
+    opacity: 1;
+  }
+}
+
 /* Row labels always clamp to one line, Codex-style — the expanded panel
    carries the full `$ command`, the row stays a trimmed summary. */
 .activity__group-trigger .activity__item-text {

package/dist/styles/agent-activity-preview.css

@@ -93,6 +93,10 @@
   min-width: 0;
 }
 
+.agent-activity-preview__item:first-child {
+  padding-inline-end: calc(2rem + var(--sigvelo-spacing-0-5));
+}
+
 .agent-activity-preview__row {
   display: block;
   width: 100%;
@@ -104,6 +108,7 @@
   color: inherit;
   background: transparent;
   font: inherit;
+  text-decoration: none;
   cursor: pointer;
   transition:
     background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
@@ -125,6 +130,7 @@
   border-radius: var(--sigvelo-radius-md);
   color: var(--sigvelo-color-text-muted);
   background: transparent;
+  text-decoration: none;
   cursor: pointer;
   transition:
     color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),

package/dist/styles/agent-chat.css

@@ -1,47 +1,39 @@
 .agent-chat {
   --agent-chat-content-max-inline-size: 64rem;
+
   position: relative;
-  width: 100%;
-  height: 100%;
-  min-width: 0;
-  min-height: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  min-inline-size: 0;
+  min-block-size: 0;
   background-color: var(--sigvelo-color-surface);
   color: var(--sigvelo-color-text);
   font-family: inherit;
 }
 
 .agent-chat__conversation {
-  min-width: 0;
-  height: 100%;
-  min-height: 0;
+  min-inline-size: 0;
+  block-size: 100%;
+  min-block-size: 0;
 }
 
 /* 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__transcript-content {
-  gap: 0.875rem;
+  gap: var(--sigvelo-spacing-3);
   min-inline-size: 0;
   max-inline-size: 100%;
   inline-size: min(100%, var(--agent-chat-content-max-inline-size));
   margin-inline: auto;
-  padding-block: 1rem calc(var(--agent-chat-composer-size, 5rem) + 0.5rem);
-  padding-inline: 1rem;
+  padding-block: var(--sigvelo-spacing-4)
+    calc(var(--agent-chat-composer-size, 5rem) + var(--sigvelo-spacing-2));
+  padding-inline: var(--sigvelo-spacing-4);
 }
 
 .agent-chat[data-composer-hidden] .agent-chat__transcript-content {
   padding-block-end: var(--sigvelo-spacing-4);
 }
 
-.agent-chat__empty-row {
-  display: flex;
-  flex: 1;
-  min-block-size: 0;
-}
-
-.agent-chat__empty-row > .conversation__empty {
-  flex: 1;
-}
-
 .agent-chat__scroll-button {
   --message-scroller-button-inset-block-end: calc(
     var(--agent-chat-composer-size, 5rem) + var(--sigvelo-spacing-2)
@@ -74,45 +66,12 @@
   margin-inline: auto;
 }
 
-.agent-chat__add-menu {
-  --sigvelo-recipe-surface-radius: var(--sigvelo-radius-xl);
-  --sigvelo-recipe-surface-shadow: var(--sigvelo-shadow-xl);
-  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-1);
-  --sigvelo-recipe-row-min-height: var(--sigvelo-control-height-sm);
-  --sigvelo-recipe-row-padding-block: var(--sigvelo-spacing-1);
-  --sigvelo-recipe-row-padding-inline: var(--sigvelo-spacing-2);
-  --sigvelo-recipe-row-gap: var(--sigvelo-spacing-2-5);
-  --sigvelo-recipe-row-font-size: var(--sigvelo-text-sm);
-  --sigvelo-recipe-row-radius: var(--sigvelo-radius-md);
-
-  inline-size: min(46rem, calc(100dvw - 1rem));
-  max-block-size: min(28rem, calc(100dvh - 2rem));
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  scrollbar-gutter: stable;
-}
-
-.agent-chat__add-menu-group-label {
-  padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-2);
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-sm);
-  font-weight: var(--sigvelo-font-weight-normal);
-  line-height: var(--sigvelo-leading-tight);
-}
-
-@media (any-pointer: coarse) {
-  .agent-chat__add-menu {
-    --sigvelo-recipe-row-min-height: var(--sigvelo-control-height-xl);
-  }
-}
-
 /* Transient status pill between transcript and composer (recovery, errors). */
 .agent-chat__notice {
   display: flex;
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
-  margin-block-end: 0.5rem;
+  margin-block-end: var(--sigvelo-spacing-2);
   font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
 }
@@ -174,14 +133,6 @@
   block-size: var(--sigvelo-text-sm);
 }
 
-.agent-chat__queued-text {
-  min-inline-size: 0;
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .agent-chat__queued-action {
   display: inline-flex;
   align-items: center;
@@ -255,7 +206,7 @@
 .agent-chat__turn-error-actions {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
   margin-inline-start: auto;
 }
 

package/dist/styles/agent-connection.css

@@ -62,18 +62,6 @@
   background: var(--sigvelo-color-neutral-bg-subtle);
 }
 
-.agent-connect__legend {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  white-space: nowrap;
-  border: 0;
-  clip: rect(0 0 0 0);
-}
-
 .agent-connect__target {
   display: inline-flex;
   align-items: center;

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

@@ -0,0 +1,54 @@
+.agent-tool-detail {
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  min-inline-size: 0;
+  block-size: 100%;
+  background-color: var(--sigvelo-color-surface);
+  color: var(--sigvelo-color-text);
+}
+
+.agent-tool-detail__title {
+  margin: 0;
+  font: inherit;
+}
+
+.agent-tool-detail__run-state {
+  grid-row: 2;
+  display: grid;
+  gap: var(--sigvelo-spacing-2);
+  min-inline-size: 0;
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-spacing-3);
+  border-block-end: var(--sigvelo-border-width) var(--sigvelo-border-style)
+    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: 1.5;
+}
+
+.agent-tool-detail__error {
+  color: var(--sigvelo-color-danger-text);
+}
+
+.agent-tool-detail__chat {
+  grid-row: 3;
+  min-inline-size: 0;
+  min-block-size: 0;
+}
+
+.agent-tool-detail__chat > .agent-chat {
+  block-size: 100%;
+}
+
+@media (forced-colors: active) {
+  .agent-tool-detail__run-state {
+    border-color: CanvasText;
+  }
+}

package/dist/styles/alert-dialog.css

@@ -18,14 +18,7 @@
 
 .alert-dialog__backdrop {
   background-color: var(--sigvelo-color-backdrop);
-  opacity: 1;
   z-index: 50;
-  transition: opacity var(--sigvelo-duration-medium) var(--sigvelo-ease-standard);
-}
-
-.alert-dialog__backdrop[data-starting-style],
-.alert-dialog__backdrop[data-ending-style] {
-  opacity: 0;
 }
 
 .alert-dialog__popup {
@@ -34,27 +27,32 @@
   position: fixed;
   inset-block-start: 50%;
   inset-inline-start: 50%;
-  transform: translate(-50%, -50%);
+  translate: -50% -50%;
+  scale: 1;
   z-index: 50;
-  inline-size: calc(100% - 2rem);
+  inline-size: calc(100% - var(--sigvelo-control-height-sm));
   max-inline-size: 28rem;
-  max-block-size: calc(100dvb - 2rem);
-  overflow: auto;
+  max-block-size: calc(100dvb - var(--sigvelo-control-height-sm));
+  overflow-block: auto;
   transition:
-    opacity var(--sigvelo-duration-medium) var(--sigvelo-ease-standard),
-    transform var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized);
+    opacity var(--sigvelo-motion-duration-presence) var(--sigvelo-motion-ease-change),
+    scale var(--sigvelo-motion-duration-presence) var(--sigvelo-motion-ease-enter);
 }
 
 .alert-dialog__popup[data-starting-style],
 .alert-dialog__popup[data-ending-style] {
   opacity: 0;
-  transform: translate(-50%, -50%) scale(0.95);
+  scale: var(--sigvelo-motion-presence-scale);
+}
+
+:root[data-motion="reduce"] .alert-dialog__popup:is([data-starting-style], [data-ending-style]) {
+  scale: 1;
 }
 
 @media (prefers-reduced-motion: reduce) {
   .alert-dialog__popup[data-starting-style],
   .alert-dialog__popup[data-ending-style] {
-    transform: translate(-50%, -50%);
+    scale: 1;
   }
 }
 
@@ -114,9 +112,9 @@
   border-radius: var(--sigvelo-radius-md);
   cursor: pointer;
   transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    opacity var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .alert-dialog__action:focus-visible {

package/dist/styles/app-top-bar.css

@@ -1,5 +1,7 @@
 .app-top-bar {
-  --app-top-bar-block-size: calc(var(--sigvelo-control-height-xs) + var(--sigvelo-spacing-2));
+  --app-top-bar-block-size: calc(
+    var(--sigvelo-density-compact-control-height) + var(--sigvelo-spacing-2)
+  );
 
   box-sizing: border-box;
   inline-size: 100%;
@@ -8,7 +10,7 @@
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
   align-items: center;
-  gap: var(--sigvelo-spacing-2);
+  gap: var(--sigvelo-density-compact-control-gap);
   padding-block: calc(var(--sigvelo-spacing-1) + env(safe-area-inset-top, 0px))
     var(--sigvelo-spacing-1);
   padding-inline: calc(var(--sigvelo-spacing-2) + env(safe-area-inset-left, 0px))
@@ -38,7 +40,7 @@
   justify-self: center;
   overflow: hidden;
   color: var(--sigvelo-color-text);
-  font-size: var(--sigvelo-text-compact);
+  font-size: var(--sigvelo-density-compact-control-font-size);
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: var(--sigvelo-leading-tight);
   text-overflow: ellipsis;
@@ -53,10 +55,10 @@
 .app-top-bar__button {
   box-sizing: border-box;
   flex: 0 0 auto;
-  inline-size: var(--sigvelo-control-height-xs);
-  min-inline-size: var(--sigvelo-control-height-xs);
-  block-size: var(--sigvelo-control-height-xs);
-  min-block-size: var(--sigvelo-control-height-xs);
+  inline-size: var(--sigvelo-density-compact-control-height);
+  min-inline-size: var(--sigvelo-density-compact-control-height);
+  block-size: var(--sigvelo-density-compact-control-height);
+  min-block-size: var(--sigvelo-density-compact-control-height);
   padding: var(--sigvelo-spacing-1);
   color: var(--sigvelo-color-text-muted);
   line-height: 0;
@@ -64,8 +66,8 @@
 
 .app-top-bar__button svg {
   display: block;
-  inline-size: var(--sigvelo-text-sm);
-  block-size: var(--sigvelo-text-sm);
+  inline-size: var(--sigvelo-density-compact-control-icon-size);
+  block-size: var(--sigvelo-density-compact-control-icon-size);
 }
 
 .app-top-bar__button:hover:not([data-disabled]),
@@ -74,6 +76,12 @@
   color: var(--sigvelo-color-text);
 }
 
+.app-top-bar__button:is([aria-expanded="true"], [data-popup-open], [data-pressed]):not(
+  :focus-visible
+) {
+  box-shadow: none;
+}
+
 @media (any-pointer: coarse) {
   .app-top-bar__button {
     inline-size: 2.75rem;