@mcp-b/react-components 0.17.0 → 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

@@ -108,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),
@@ -129,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)
@@ -79,7 +71,7 @@
   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);
 }
@@ -214,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/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;

package/dist/styles/approval.css

@@ -16,7 +16,7 @@
 }
 
 .approval__question {
-  min-width: 0;
+  min-inline-size: 0;
   overflow-wrap: anywhere;
 }
 
@@ -91,13 +91,17 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  inline-size: 1.125rem;
-  block-size: 1.125rem;
+  inline-size: var(--sigvelo-control-icon-size-lg);
+  block-size: var(--sigvelo-control-icon-size-lg);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
   border-radius: var(--sigvelo-radius-full);
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-2xs);
+  transition:
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    border-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .approval__option[data-selected] .approval__key {
@@ -110,11 +114,12 @@
   margin-inline-start: auto;
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-xs);
-  visibility: hidden;
+  opacity: 0;
+  transition: opacity var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .approval__option[data-selected] .approval__arrows {
-  visibility: visible;
+  opacity: 1;
 }
 
 .approval__deny {
@@ -131,7 +136,7 @@
 
 .approval__reason {
   flex: 1;
-  min-width: 0;
+  min-inline-size: 0;
   padding: 0;
   border: none;
   outline: none;

package/dist/styles/artifact.css

@@ -17,7 +17,7 @@
   justify-content: space-between;
   gap: var(--sigvelo-spacing-3);
   padding-block: var(--sigvelo-spacing-3);
-  padding-inline: 1rem;
+  padding-inline: var(--sigvelo-spacing-4);
   background-color: var(--sigvelo-color-surface);
 }
 
@@ -28,10 +28,10 @@
 .artifact__title {
   margin: 0;
   font-family: inherit;
-  font-size: 0.9375rem;
+  font-size: var(--sigvelo-text-base);
   font-weight: var(--sigvelo-font-weight-bold);
   color: var(--sigvelo-color-text);
-  line-height: 1.3;
+  line-height: var(--sigvelo-leading-tight);
   overflow-wrap: anywhere;
   text-wrap: balance;
 }
@@ -49,7 +49,7 @@
 .artifact__actions {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
   flex-shrink: 0;
 }
 
@@ -59,8 +59,8 @@
 }
 
 .artifact__content {
-  padding-block: 1rem;
-  padding-inline: 1rem;
+  padding-block: var(--sigvelo-spacing-4);
+  padding-inline: var(--sigvelo-spacing-4);
   font-size: var(--sigvelo-text-sm);
   line-height: 1.5;
   overflow-wrap: anywhere;

package/dist/styles/autocomplete.css

@@ -4,9 +4,10 @@
 
 .autocomplete__popup {
   --sigvelo-recipe-surface-padding: 0;
+  --sigvelo-recipe-popup-min-inline-size: 12.5rem;
 
   inline-size: var(--anchor-width);
-  min-inline-size: 12.5rem;
+  min-inline-size: var(--sigvelo-recipe-popup-min-inline-size);
 }
 
 .autocomplete__status {