@mcp-b/react-components 0.40.0 → 0.42.0

package/dist/styles/code-block.css

@@ -1,7 +1,7 @@
 .code-block {
   display: flex;
   flex-direction: column;
-  width: 100%;
+  inline-size: 100%;
   min-inline-size: 0;
   font-family: inherit;
   /* Fill-based containment: no perimeter border */
@@ -13,9 +13,9 @@
 .code-block__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: transparent;
 }
 
@@ -23,14 +23,14 @@
   display: inline-flex;
   align-items: center;
   gap: var(--sigvelo-spacing-2);
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-text-meta);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text);
 }
 
 .code-block__filename {
   font-family: var(--sigvelo-font-mono);
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-text-meta);
   color: var(--sigvelo-color-text-muted);
 }
 
@@ -55,11 +55,11 @@
 
 .code-block__content {
   margin: 0;
-  padding-block: var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-layout-gutter);
   padding-inline: var(--sigvelo-spacing-3-5);
   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);
   color: var(--sigvelo-color-text);
   overflow: visible;
 }
@@ -70,12 +70,12 @@
 
 .code-block__content--highlighted pre.shiki {
   margin: 0;
-  padding-block: var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-layout-gutter);
   padding-inline: var(--sigvelo-spacing-3-5);
   background-color: transparent !important;
   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;
 }
 
@@ -100,7 +100,8 @@
 .code-block__content--numbered pre code .line::before {
   content: counter(line);
   display: inline-block;
-  width: 2rem;
+  inline-size: 2rem;
+  /* Line-number column. Not --sigvelo-layout-gutter. */
   padding-inline-end: var(--sigvelo-spacing-3);
   margin-inline-end: var(--sigvelo-spacing-3);
   color: var(--sigvelo-color-text-muted);

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

@@ -184,6 +184,7 @@
   margin-inline-start: auto;
 }
 
+/* Local wrap. Not --sigvelo-layout-break-compact. */
 @container prompt-input (inline-size <= 36rem) {
   .codex-model-selector__trigger {
     justify-content: center;
@@ -200,6 +201,7 @@
   }
 }
 
+/* Local wrap. Not --sigvelo-layout-break-compact. */
 @container prompt-input (inline-size <= 22rem) {
   .codex-model-selector__trigger {
     inline-size: var(--sigvelo-control-height-xs);

package/dist/styles/collapsible.css

@@ -69,6 +69,7 @@
 }
 
 .collapsible__panel > * {
+  /* Disclosure content, not --sigvelo-layout-stack. */
   padding: var(--sigvelo-spacing-4);
   background-color: var(--sigvelo-color-surface);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)

package/dist/styles/commit.css

@@ -1,10 +1,10 @@
 .commit__header {
   display: flex;
   align-items: center;
-  gap: var(--sigvelo-spacing-2);
+  gap: var(--sigvelo-layout-cluster);
   inline-size: 100%;
-  padding-block: var(--sigvelo-spacing-2-5);
-  padding-inline: var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-layout-cluster);
+  padding-inline: var(--sigvelo-layout-gutter);
   background-color: transparent;
   border: none;
   color: var(--sigvelo-color-text);
@@ -113,9 +113,9 @@
 .commit__file {
   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);
   font-size: var(--sigvelo-text-compact);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
@@ -126,9 +126,32 @@
 }
 
 .commit__file-status {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   flex-shrink: 0;
   min-inline-size: var(--sigvelo-spacing-5);
-  justify-content: center;
+  font-family: var(--sigvelo-font-mono);
+  font-size: var(--sigvelo-text-xs);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-leading-compact);
+  color: var(--sigvelo-color-text-muted);
+}
+
+.commit__file-status[data-status="added"] {
+  color: var(--sigvelo-color-success-text);
+}
+
+.commit__file-status[data-status="modified"] {
+  color: var(--sigvelo-color-warning-text);
+}
+
+.commit__file-status[data-status="deleted"] {
+  color: var(--sigvelo-color-danger-text);
+}
+
+.commit__file-status[data-status="renamed"] {
+  color: var(--sigvelo-color-primary-text);
 }
 
 .commit__file-icon {

package/dist/styles/context.css

@@ -28,9 +28,9 @@
 .context__header {
   display: flex;
   align-items: center;
-  gap: var(--sigvelo-spacing-3);
-  padding-block: var(--sigvelo-spacing-3);
-  padding-inline: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-layout-gutter);
+  padding-block: var(--sigvelo-layout-gutter);
+  padding-inline: var(--sigvelo-layout-gutter);
 }
 
 .context__ring {
@@ -90,16 +90,16 @@
   display: flex;
   flex-direction: column;
   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);
   list-style: none;
   gap: var(--sigvelo-spacing-1-5);
 }
 
 .context__row {
   display: grid;
-  grid-template-columns: 1fr auto;
-  gap: var(--sigvelo-spacing-3);
+  grid-template-columns: var(--sigvelo-layout-track-fill) auto;
+  gap: var(--sigvelo-layout-gutter);
   font-size: var(--sigvelo-text-xs);
   align-items: baseline;
 }
@@ -129,8 +129,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  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-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-semibold);
 }

package/dist/styles/conversation-tab-picker.css

@@ -9,7 +9,7 @@
   font-size: var(--sigvelo-text-sm);
   gap: var(--sigvelo-spacing-2);
   overflow-wrap: anywhere;
-  padding: var(--sigvelo-spacing-2) var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-layout-cluster) var(--sigvelo-layout-gutter);
 }
 
 .conversation-tab-picker__error > svg {

package/dist/styles/conversation.css

@@ -1,7 +1,5 @@
 .conversation {
   position: relative;
-  inline-size: 100%;
-  block-size: 100%;
   font-family: inherit;
   color: var(--sigvelo-color-text);
 }
@@ -21,8 +19,8 @@
 .conversation__content {
   display: flex;
   flex-direction: column;
-  gap: var(--sigvelo-spacing-3);
-  padding: var(--sigvelo-spacing-4);
+  gap: var(--sigvelo-layout-stack);
+  padding: var(--sigvelo-layout-gutter);
   min-block-size: 100%;
 }
 
@@ -34,8 +32,8 @@
 
 .conversation__scroll-button {
   position: absolute;
-  inset-inline-end: var(--sigvelo-spacing-3);
-  inset-block-end: var(--sigvelo-spacing-3);
+  inset-inline-end: var(--sigvelo-layout-gutter);
+  inset-block-end: var(--sigvelo-layout-gutter);
   z-index: 1;
   /* Hovers over the transcript rather than sitting in it, so it takes the
      floating stack: the wide ambient layer is what separates it from whatever
@@ -46,8 +44,8 @@
 
 .conversation__download-button {
   position: absolute;
-  inset-inline-end: var(--sigvelo-spacing-3);
-  inset-block-start: var(--sigvelo-spacing-3);
+  inset-inline-end: var(--sigvelo-layout-gutter);
+  inset-block-start: var(--sigvelo-layout-gutter);
   z-index: 1;
   box-shadow: var(--sigvelo-elevation-floating);
   background-color: var(--sigvelo-color-surface-raised);

package/dist/styles/dialog.css

@@ -18,7 +18,7 @@
 }
 
 .dialog__popup {
-  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-4);
+  --sigvelo-recipe-surface-padding: var(--sigvelo-layout-stack);
 
   position: fixed;
   inset-block-start: 50%;
@@ -59,15 +59,15 @@
   font-size: var(--sigvelo-text-sm);
   line-height: var(--sigvelo-text-sm-leading);
   color: var(--sigvelo-color-text-muted);
-  margin-block-end: var(--sigvelo-spacing-3);
+  margin-block-end: var(--sigvelo-layout-gutter);
 }
 
 .dialog__header {
   display: grid;
   gap: var(--sigvelo-spacing-1);
-  margin-block-end: var(--sigvelo-spacing-3);
+  margin-block-end: var(--sigvelo-layout-gutter);
 }
 
 .dialog__footer {
-  margin-block-start: var(--sigvelo-spacing-4);
+  margin-block-start: var(--sigvelo-layout-stack);
 }

package/dist/styles/empty-state.css

@@ -5,15 +5,15 @@
  * lives in one variable and the centring lives in the parent.
  */
 .empty-state {
-  --sigvelo-recipe-empty-state-padding-block: var(--sigvelo-spacing-4);
+  --sigvelo-recipe-empty-state-padding-block: var(--sigvelo-layout-stack);
 
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: var(--sigvelo-spacing-2);
+  gap: var(--sigvelo-layout-cluster);
   padding-block: var(--sigvelo-recipe-empty-state-padding-block);
-  padding-inline: var(--sigvelo-spacing-3);
+  padding-inline: var(--sigvelo-layout-gutter);
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-compact);
   line-height: var(--sigvelo-text-compact-leading);

package/dist/styles/environment-variables.css

@@ -2,9 +2,9 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--sigvelo-spacing-3);
-  padding-block: var(--sigvelo-spacing-2-5);
-  padding-inline: var(--sigvelo-spacing-3-5);
+  gap: var(--sigvelo-layout-gutter);
+  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);
 }
@@ -42,7 +42,7 @@
 
 .environment-variables__group-label {
   padding-block: var(--sigvelo-spacing-1-5);
-  padding-inline: var(--sigvelo-spacing-3-5);
+  padding-inline: var(--sigvelo-layout-gutter);
   font-size: var(--sigvelo-text-2xs);
   font-weight: var(--sigvelo-font-weight-bold);
   text-transform: uppercase;
@@ -56,9 +56,9 @@
 .environment-variables__row {
   display: flex;
   align-items: center;
-  gap: var(--sigvelo-spacing-2-5);
-  padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-3-5);
+  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);
 }
@@ -73,12 +73,12 @@
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text);
   flex-shrink: 0;
-  min-width: 10rem;
+  min-inline-size: 10rem;
 }
 
 .environment-variables__value {
   flex: 1;
-  min-width: 0;
+  min-inline-size: 0;
   padding-block: var(--sigvelo-spacing-1-5);
   padding-inline: var(--sigvelo-spacing-2);
   font-family: var(--sigvelo-font-mono);
@@ -92,6 +92,9 @@
 
 .environment-variables__required {
   flex-shrink: 0;
+  color: var(--sigvelo-color-warning-text);
+  font-size: var(--sigvelo-text-2xs);
+  font-weight: var(--sigvelo-font-weight-semibold);
 }
 
 .environment-variables__copy {

package/dist/styles/field.css

@@ -32,7 +32,8 @@
   flex-direction: column;
 }
 
-@container (min-width: 28rem) {
+/* Local wrap. Not --sigvelo-layout-break-compact. */
+@container (inline-size >= 28rem) {
   .field--responsive {
     flex-direction: row;
     align-items: center;

package/dist/styles/fieldset.css

@@ -1,8 +1,8 @@
 .fieldset {
   display: flex;
   flex-direction: column;
-  gap: var(--sigvelo-spacing-3);
-  padding: var(--sigvelo-spacing-4);
+  gap: var(--sigvelo-layout-gutter);
+  padding: var(--sigvelo-layout-stack);
   margin: 0;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-muted);

package/dist/styles/index.css

@@ -15,11 +15,9 @@
 @import "./accordion.css" layer(components);
 @import "./activity-header.css" layer(components);
 @import "./activity.css" layer(components);
-@import "./agent-activity-preview.css" layer(components);
 @import "./agent-attention.css" layer(components);
 @import "./agent-connection.css" layer(components);
 @import "./agent-chat.css" layer(components);
-@import "./agent-tool-detail.css" layer(components);
 @import "./approval.css" layer(components);
 @import "./alert-dialog.css" layer(components);
 @import "./attachment-preview.css" layer(components);
@@ -27,7 +25,6 @@
 @import "./avatar.css" layer(components);
 @import "./app-icon.css" layer(components);
 @import "./app-frame.css" layer(components);
-@import "./badge.css" layer(components);
 @import "./button.css" layer(components);
 @import "./action-guide.css" layer(components);
 @import "./card.css" layer(components);
@@ -67,9 +64,7 @@
 @import "./search-field.css" layer(components);
 @import "./select.css" layer(components);
 @import "./separator.css" layer(components);
-@import "./shell.css" layer(components);
 @import "./slider.css" layer(components);
-@import "./status-pill.css" layer(components);
 @import "./stepper.css" layer(components);
 @import "./switch.css" layer(components);
 @import "./tabs.css" layer(components);
@@ -88,9 +83,9 @@
 @import "./streamdown.css" layer(components);
 @import "./artifact.css" layer(components);
 @import "./browser-live-view.css" layer(components);
+@import "./browser-live-screen.css" layer(components);
 @import "./browser-control-overlay.css" layer(components);
 @import "./browser-run-panel.css" layer(components);
-@import "./browser-replay.css" layer(components);
 @import "./chain-of-thought.css" layer(components);
 @import "./checkpoint.css" layer(components);
 @import "./code-block.css" layer(components);
@@ -99,12 +94,14 @@
 @import "./conversation.css" layer(components);
 @import "./conversation-tab-picker.css" layer(components);
 @import "./codex-model-selector.css" layer(components);
+@import "./model-selector.css" layer(components);
+@import "./agent-tool-detail.css" layer(components);
+@import "./browser-replay.css" layer(components);
 @import "./environment-variables.css" layer(components);
 @import "./file-tree.css" layer(components);
 @import "./goal.css" layer(components);
 @import "./inline-citation.css" layer(components);
 @import "./message.css" layer(components);
-@import "./model-selector.css" layer(components);
 @import "./chatgpt-sign-in-screen.css" layer(components);
 @import "./plan.css" layer(components);
 @import "./prompt-input.css" layer(components);
@@ -112,6 +109,10 @@
 @import "./reasoning.css" layer(components);
 @import "./resizable-side-panel.css" layer(components);
 @import "./responsive-sidebar-shell.css" layer(components);
+/* After the shell it composes: `.manager-office` and `.responsive-sidebar-shell`
+   land on the same element at equal specificity, so the shell's `min-block-size:
+   0` silently ate the office's own floor while this sat earlier in the file. */
+@import "./manager-office.css" layer(components);
 @import "./sources.css" layer(components);
 @import "./subagent-run.css" layer(components);
 @import "./task.css" layer(components);