@mcp-b/react-components 0.41.0 → 0.42.0

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

@@ -8,20 +8,16 @@
      once; the bar adds the safe-area inset itself, so the hook stays a plain
      content height. */
   min-block-size: calc(
-    var(
-        --app-top-bar-block-size,
-        calc(var(--sigvelo-density-compact-control-height) + var(--sigvelo-spacing-2))
-      ) +
-      env(safe-area-inset-top, 0px)
+    var(--app-top-bar-block-size, var(--sigvelo-layout-chrome)) + env(safe-area-inset-top, 0px)
   );
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  grid-template-columns: var(--sigvelo-layout-track-fill) auto var(--sigvelo-layout-track-fill);
   align-items: center;
   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))
-    calc(var(--sigvelo-spacing-2) + env(safe-area-inset-right, 0px));
+  padding-inline: calc(var(--sigvelo-layout-gutter) + env(safe-area-inset-left, 0px))
+    calc(var(--sigvelo-layout-gutter) + env(safe-area-inset-right, 0px));
   border: 0;
   border-radius: 0;
   /* No surface of its own: the bar occupies a layout row, so whatever plane
@@ -64,7 +60,7 @@
    way — one hairline and a breath of shadow, still no fill. */
 .app-top-bar[data-title-align="start"] {
   position: relative;
-  grid-template-columns: auto auto minmax(0, 1fr);
+  grid-template-columns: auto auto var(--sigvelo-layout-track-fill);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
   box-shadow: var(--sigvelo-elevation-bar);

package/dist/styles/approval.css

@@ -11,6 +11,7 @@
 .approval__header {
   display: flex;
   align-items: baseline;
+  /* Widget density, not --sigvelo-layout-cluster. */
   gap: var(--sigvelo-spacing-2);
   line-height: var(--sigvelo-leading-snug);
 }

package/dist/styles/artifact.css

@@ -15,9 +15,9 @@
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: var(--sigvelo-spacing-3);
-  padding-block: var(--sigvelo-spacing-3);
-  padding-inline: var(--sigvelo-spacing-4);
+  gap: var(--sigvelo-layout-gutter);
+  padding-block: var(--sigvelo-layout-cluster);
+  padding-inline: var(--sigvelo-layout-gutter);
   background-color: var(--sigvelo-color-surface);
 }
 
@@ -54,8 +54,8 @@
 }
 
 .artifact__content {
-  padding-block: var(--sigvelo-spacing-4);
-  padding-inline: var(--sigvelo-spacing-4);
+  padding-block: var(--sigvelo-layout-stack);
+  padding-inline: var(--sigvelo-layout-gutter);
   font-size: var(--sigvelo-text-sm);
   line-height: var(--sigvelo-leading-normal);
   overflow-wrap: anywhere;
@@ -104,7 +104,7 @@
   justify-content: center;
   flex-wrap: wrap;
   gap: var(--sigvelo-spacing-2);
-  padding: var(--sigvelo-spacing-4);
+  padding: var(--sigvelo-layout-stack);
   color: var(--sigvelo-color-text-muted);
   text-align: center;
 }

package/dist/styles/attachment-preview.css

@@ -2,14 +2,15 @@
    Scoped as .dialog__popup.attachment-preview so it beats the base dialog
    sizing regardless of import order. */
 .dialog__popup.attachment-preview {
-  width: fit-content;
-  max-width: min(90vw, 56rem);
+  inline-size: fit-content;
+  /* Lightbox measure. Not --sigvelo-layout-break-compact. */
+  max-inline-size: min(90dvi, 56rem);
 }
 
 .attachment-preview__image {
   display: block;
-  max-width: 100%;
-  max-height: 70vh;
+  max-inline-size: 100%;
+  max-block-size: 70dvb;
   border-radius: var(--sigvelo-radius-md);
 }
 

package/dist/styles/browser-replay.css

@@ -4,7 +4,7 @@
 .browser-replay {
   display: flex;
   flex-direction: column;
-  width: 100%;
+  inline-size: 100%;
   font-family: inherit;
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-surface);
@@ -16,7 +16,7 @@
 
 .browser-replay__stage-wrap {
   position: relative;
-  width: 100%;
+  inline-size: 100%;
   aspect-ratio: 16 / 10;
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   overflow: hidden;
@@ -44,9 +44,9 @@
 .browser-replay__controls {
   display: flex;
   align-items: center;
-  gap: var(--sigvelo-spacing-2-5);
-  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);
   border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
   background-color: var(--sigvelo-color-surface);
@@ -60,7 +60,7 @@
 
 .browser-replay__scrubber {
   flex: 1;
-  min-width: 0;
+  min-inline-size: 0;
 }
 
 .browser-replay__time {

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

@@ -85,6 +85,7 @@
 /* The panel owns the space allotted to whichever direct surface it hosts. */
 .browser-run-panel__body > * {
   flex: 1;
+  /* Hosted preview floor. Not --sigvelo-layout-sidebar. */
   min-block-size: 16rem;
 }
 

package/dist/styles/button.css

@@ -38,10 +38,7 @@
   flex: none;
 }
 
-/* ponytail: one brightness rule covers press feedback for every variant;
-   upgrade to per-variant color-mix rules if filter side effects ever bite */
 .button:active:not([data-disabled]) {
-  filter: brightness(0.94);
   translate: 0 var(--sigvelo-motion-distance-xs);
 }
 
@@ -65,7 +62,11 @@
 }
 
 .button--normal.button--primary:hover:not([data-disabled]) {
-  background-color: color-mix(in oklab, var(--sigvelo-color-primary-bg), black 5%);
+  background-color: var(--sigvelo-color-primary-bg-hover);
+}
+
+.button--normal.button--primary:active:not([data-disabled]) {
+  background-color: var(--sigvelo-color-primary-bg-press);
 }
 
 .button--normal.button--neutral {
@@ -74,7 +75,11 @@
 }
 
 .button--normal.button--neutral:hover:not([data-disabled]) {
-  background-color: color-mix(in oklab, var(--sigvelo-color-neutral-bg-subtle), black 5%);
+  background-color: var(--sigvelo-color-neutral-bg-hover);
+}
+
+.button--normal.button--neutral:active:not([data-disabled]) {
+  background-color: var(--sigvelo-color-neutral-bg-press);
 }
 
 .button--normal.button--destructive {
@@ -83,7 +88,11 @@
 }
 
 .button--normal.button--destructive:hover:not([data-disabled]) {
-  background-color: color-mix(in oklab, var(--sigvelo-color-danger-bg), black 5%);
+  background-color: var(--sigvelo-color-danger-bg-hover);
+}
+
+.button--normal.button--destructive:active:not([data-disabled]) {
+  background-color: var(--sigvelo-color-danger-bg-press);
 }
 
 /* Outline appearance */

package/dist/styles/card.css

@@ -3,14 +3,14 @@
   color: var(--sigvelo-color-text);
   /* Shadow-led elevation: the hairline ring in the stack is the perimeter. */
   border-radius: var(--sigvelo-radius-lg);
-  padding: var(--sigvelo-spacing-4);
+  padding: var(--sigvelo-layout-stack);
   box-shadow: var(--sigvelo-elevation-raised);
   transition: box-shadow var(--sigvelo-motion-duration-interaction)
     var(--sigvelo-motion-ease-change);
 }
 
 .card[data-size="sm"] {
-  padding: var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-layout-gutter);
   border-radius: var(--sigvelo-radius-md);
 }
 
@@ -39,13 +39,13 @@
 .card__header {
   display: grid;
   grid-template-rows: auto auto;
-  grid-template-columns: minmax(0, 1fr);
+  grid-template-columns: var(--sigvelo-layout-track-fill);
   align-items: start;
-  margin-block-end: var(--sigvelo-spacing-3);
+  margin-block-end: var(--sigvelo-layout-gutter);
 }
 
 .card__header:has(.card__action) {
-  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-columns: var(--sigvelo-layout-track-fill) auto;
 }
 
 .card__action {

package/dist/styles/chatgpt-sign-in-screen.css

@@ -67,7 +67,7 @@
   z-index: 1;
   display: flex;
   justify-content: center;
-  margin-block-start: var(--sigvelo-spacing-4);
+  margin-block-start: var(--sigvelo-layout-stack);
 }
 
 .chatgpt-sign-in__error {

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);

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);

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

@@ -18,7 +18,6 @@
 @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);
@@ -87,7 +86,6 @@
 @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);
@@ -96,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);