@mcp-b/react-components 0.40.0 → 0.42.0

package/dist/styles/message-scroller.css

@@ -2,20 +2,18 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  width: 100%;
-  height: 100%;
-  min-height: 0;
   overflow: hidden;
   font-family: inherit;
   color: var(--sigvelo-color-text);
 }
 
+/* Scrollport fill. Not fill-host — that recipe is on the root. */
 .message-scroller__viewport {
   --message-scroller-fade-size: min(12%, 2.5rem);
-  width: 100%;
-  height: 100%;
-  min-width: 0;
-  min-height: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  min-inline-size: 0;
+  min-block-size: 0;
   overflow-y: auto;
   overflow-x: hidden;
   overscroll-behavior: contain;
@@ -34,12 +32,12 @@
 .message-scroller__content {
   display: flex;
   flex-direction: column;
-  gap: var(--sigvelo-spacing-4);
-  min-height: 100%;
+  gap: var(--sigvelo-layout-stack);
+  min-block-size: 100%;
 }
 
 .message-scroller__item {
-  min-width: 0;
+  min-inline-size: 0;
   flex-shrink: 0;
   /* Off-screen rows skip layout/paint entirely (Codex ships the same pair on
      turn content). `auto` keeps the last rendered size once measured; 15rem is
@@ -67,7 +65,7 @@
   position: absolute;
   inset-block-start: var(--message-scroller-virtual-block-start, 0px);
   inset-inline: 0;
-  min-width: 0;
+  min-inline-size: 0;
   padding-inline: inherit;
 }
 

package/dist/styles/message.css

@@ -1,6 +1,9 @@
 .message {
   display: flex;
   flex-direction: column;
+  /* Codex --conversation-grouped-item-gap: 4px — activity, reasoning, and the
+     closing answer are one turn, not three. The 16px turn gap is the
+     virtualizer / conversation stack, not this row. */
   gap: var(--sigvelo-spacing-1);
   inline-size: 100%;
   min-inline-size: 0;
@@ -20,13 +23,14 @@
 
 .message__content {
   display: inline-block;
-  max-inline-size: min(42rem, 85%);
+  max-inline-size: min(var(--sigvelo-measure-prose), 85%);
   min-inline-size: 0;
   padding-block: var(--sigvelo-spacing-2);
+  /* Bubble inset. Not --sigvelo-layout-gutter. */
   padding-inline: var(--sigvelo-spacing-3);
   border-radius: var(--sigvelo-radius-lg);
-  font-size: var(--sigvelo-text-sm);
-  line-height: var(--sigvelo-leading-normal);
+  font-size: var(--sigvelo-text-prose);
+  line-height: var(--sigvelo-text-prose-leading);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   color: var(--sigvelo-color-text);
   overflow-wrap: anywhere;
@@ -37,19 +41,28 @@
   color: var(--sigvelo-color-text);
 }
 
+.message__content:has(> .message__response) {
+  font-size: var(--sigvelo-text-prose);
+  line-height: var(--sigvelo-text-prose-leading);
+}
+
+.message[data-from="user"] .message__content:has(> .message__response) {
+  font-family: var(--sigvelo-font-user-message);
+}
+
 .message[data-from="assistant"] .message__content {
   display: block;
-  inline-size: min(42rem, 85%);
+  /* The transcript column owns the measure. A second 68ch / 85% cap left the
+     answer sitting in the start half of an extension-width pane. */
+  inline-size: 100%;
   max-inline-size: 100%;
   background-color: transparent;
+  padding-block: 0;
   padding-inline: 0;
 }
 
-/* Structured parts can opt into the transcript rail without teaching Message
-   which product feature they represent. The child still owns its own measure
-   and responsive layout. */
-.message[data-from="assistant"] .message__content:has(> [data-message-layout="wide"]) {
-  inline-size: 100%;
+.message[data-from="assistant"] .message__content:has(> .message__response) {
+  font-family: var(--sigvelo-font-response);
 }
 
 .message[data-from="system"] .message__content {
@@ -59,7 +72,13 @@
 }
 
 .message__content > * + * {
-  margin-block-start: var(--sigvelo-spacing-2);
+  margin-block-start: var(--sigvelo-spacing-1);
+}
+
+/* Tool activity is grouped with the closing answer, not a second turn. */
+.message .activity {
+  max-inline-size: 100%;
+  margin-block: 0;
 }
 
 .message__content :where(pre) {
@@ -70,6 +89,7 @@
 .message__response {
   min-inline-size: 0;
   max-inline-size: 100%;
+  line-height: calc(var(--sigvelo-text-prose-leading) * var(--sigvelo-chat-font-scale));
 }
 
 .message__attachment {
@@ -77,7 +97,7 @@
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
   max-inline-size: 100%;
-  font-size: var(--sigvelo-text-compact);
+  font-size: var(--sigvelo-text-meta);
   color: inherit;
   text-decoration: none;
 }
@@ -101,6 +121,7 @@
 
 .message__attachment-image {
   display: block;
+  /* Thumbnail cap. Not --sigvelo-layout-sidebar. */
   max-inline-size: 16rem;
   max-block-size: 16rem;
   border-radius: var(--sigvelo-radius-md);
@@ -109,11 +130,34 @@
 /* Quiet annotation under a part whose stored content was compacted. */
 .message__compacted {
   margin-block-start: var(--sigvelo-spacing-1);
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-text-meta);
   font-style: italic;
   color: var(--sigvelo-color-text-muted);
 }
 
+.message__meta {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-block-size: var(--sigvelo-control-height-xs);
+  align-self: flex-end;
+  gap: var(--sigvelo-spacing-0-5);
+  color: var(--sigvelo-color-text-muted);
+  transition: opacity var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
+}
+
+.message__timestamp {
+  font-size: var(--sigvelo-text-meta);
+  font-variant-numeric: tabular-nums;
+  line-height: var(--sigvelo-text-meta-leading);
+  color: var(--sigvelo-color-text-muted);
+  white-space: nowrap;
+}
+
+.message__meta .message__actions[data-unavailable] {
+  visibility: hidden;
+}
+
 .message__actions {
   display: inline-flex;
   align-items: center;
@@ -123,30 +167,32 @@
 }
 
 .message__actions--reserved {
-  min-block-size: var(--sigvelo-control-height-sm);
-}
-
-.message[data-from="user"]:has(> .message__actions--inline) {
-  flex-direction: row-reverse;
-  align-items: center;
+  min-block-size: var(--sigvelo-control-height-xs);
 }
 
-.message[data-from="user"] > .message__actions--inline {
-  align-self: center;
+/* Hover chrome must not inflate the 16px turn gap. Always overlay the user
+   meta — headless Chromium (CI) does not match `(hover: hover)`, so gating
+   the positioning there left a ~32px in-flow row in Verify. */
+.message[data-from="user"] {
+  position: relative;
 }
 
-.message[data-from="user"] > .message__actions--inline[data-unavailable] {
-  visibility: hidden;
+.message[data-from="user"] > .message__meta {
+  position: absolute;
+  inset-block-start: 100%;
+  inset-inline-end: 0;
+  z-index: 1;
+  min-block-size: 0;
 }
 
 @media (hover: hover) and (pointer: fine) {
-  .message[data-from="user"] > .message__actions--inline {
+  .message__meta {
     opacity: 0;
     pointer-events: none;
   }
 
-  .message[data-from="user"]:hover > .message__actions--inline,
-  .message[data-from="user"]:focus-within > .message__actions--inline {
+  .message:hover > .message__meta,
+  .message:focus-within > .message__meta {
     opacity: 1;
     pointer-events: auto;
   }
@@ -173,7 +219,7 @@
 .message__edit-form {
   display: grid;
   gap: var(--sigvelo-spacing-3);
-  inline-size: min(42rem, 85%);
+  inline-size: min(var(--sigvelo-measure-prose), 85%);
   padding: var(--sigvelo-spacing-3);
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-surface-raised);
@@ -190,7 +236,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--sigvelo-spacing-2);
+  gap: var(--sigvelo-layout-cluster);
   inline-size: 100%;
 }
 
@@ -223,7 +269,7 @@
 }
 
 .message__branch-page {
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-text-meta);
   font-variant-numeric: tabular-nums;
   color: var(--sigvelo-color-text-muted);
   padding-inline: var(--sigvelo-spacing-1-5);

package/dist/styles/nanite-scene.css

@@ -46,7 +46,7 @@
 .nanite-scene__nanite,
 .nanite-scene__hat,
 .nanite-scene__glass,
-.nanite-scene__badge,
+.nanite-scene__status-mark,
 .nanite-scene__sparkle,
 .nanite-scene__github-signal,
 .nanite-scene__github-node,
@@ -60,7 +60,7 @@
 }
 
 .nanite-scene__hat,
-.nanite-scene__badge,
+.nanite-scene__status-mark,
 .nanite-scene__sparkle,
 .nanite-scene__github-signal,
 .nanite-scene__github-node,
@@ -74,7 +74,7 @@
   transform: translateY(-6px);
 }
 
-.nanite-scene__badge,
+.nanite-scene__status-mark,
 .nanite-scene__sparkle {
   visibility: hidden;
   opacity: 0;
@@ -177,15 +177,15 @@
   animation-delay: 240ms;
 }
 
-.nanite-scene--celebrating .nanite-scene__badge,
-.nanite-scene--concerned .nanite-scene__badge {
+.nanite-scene--celebrating .nanite-scene__status-mark,
+.nanite-scene--concerned .nanite-scene__status-mark {
   visibility: visible;
   opacity: 1;
-  animation: nanite-badge-pop 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
+  animation: nanite-status-mark-pop 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
   animation-delay: 500ms;
 }
 
-.nanite-scene--concerned .nanite-scene__badge {
+.nanite-scene--concerned .nanite-scene__status-mark {
   animation-delay: 300ms;
 }
 
@@ -363,7 +363,7 @@
   }
 }
 
-@keyframes nanite-badge-pop {
+@keyframes nanite-status-mark-pop {
   from {
     opacity: 0;
     transform: scale(0.4);
@@ -423,7 +423,7 @@
   .nanite-scene__nanite,
   .nanite-scene__hat,
   .nanite-scene__glass,
-  .nanite-scene__badge,
+  .nanite-scene__status-mark,
   .nanite-scene__sparkle,
   .nanite-scene__github-signal,
   .nanite-scene__github-node,

package/dist/styles/navigation-menu.css

@@ -66,6 +66,7 @@
 
 .navigation-menu__content {
   display: grid;
+  /* Popup density, not --sigvelo-layout-cluster. */
   gap: var(--sigvelo-spacing-2);
   padding: var(--sigvelo-spacing-2);
 }

package/dist/styles/plan.css

@@ -2,8 +2,8 @@
   display: grid;
   gap: var(--sigvelo-spacing-0-5);
   min-inline-size: 0;
-  padding-block: var(--sigvelo-spacing-2-5);
-  padding-inline: var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-layout-cluster);
+  padding-inline: 0;
   border-block-end: var(--sigvelo-border-width) var(--sigvelo-border-style)
     var(--sigvelo-color-neutral-border-subtle);
 }
@@ -19,31 +19,31 @@
 
 .plan__title {
   color: var(--sigvelo-color-text);
-  font-size: var(--sigvelo-text-compact);
+  font-size: var(--sigvelo-text-prose);
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: var(--sigvelo-leading-tight);
 }
 
 .plan__description {
   color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-text-meta);
   line-height: var(--sigvelo-leading-normal);
 }
 
 .plan__content {
   display: flex;
   flex-direction: column;
-  gap: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-layout-gutter);
   margin: 0;
-  padding-block: var(--sigvelo-spacing-3);
-  padding-inline: var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-layout-gutter);
+  padding-inline: 0;
   list-style: none;
 }
 
 .plan__step {
   position: relative;
   display: grid;
-  grid-template-columns: var(--sigvelo-spacing-4) minmax(0, 1fr);
+  grid-template-columns: var(--sigvelo-spacing-4) var(--sigvelo-layout-track-fill);
   column-gap: var(--sigvelo-spacing-2);
   row-gap: var(--sigvelo-spacing-0-5);
   min-inline-size: 0;
@@ -104,7 +104,7 @@
 
 .plan__step-title {
   color: var(--sigvelo-color-text);
-  font-size: var(--sigvelo-text-compact);
+  font-size: var(--sigvelo-text-prose);
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: var(--sigvelo-leading-tight);
   transition: color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
@@ -116,7 +116,7 @@
 
 .plan__step-description {
   color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-text-meta);
   line-height: var(--sigvelo-leading-normal);
 }
 
@@ -132,7 +132,7 @@
   padding-block: var(--sigvelo-spacing-1);
   padding-inline: var(--sigvelo-spacing-2-5);
   color: var(--sigvelo-color-text);
-  font-size: var(--sigvelo-text-compact);
+  font-size: var(--sigvelo-text-prose);
   line-height: var(--sigvelo-leading-snug);
   background-color: var(--sigvelo-color-surface-raised);
   border: var(--sigvelo-border-width) var(--sigvelo-border-style)
@@ -158,8 +158,9 @@
 }
 
 .plan-summary__content {
+  /* Popover reading width. Not --sigvelo-layout-sidebar. */
   min-inline-size: 16rem;
-  max-inline-size: min(24rem, calc(100vw - var(--sigvelo-spacing-8)));
+  max-inline-size: min(24rem, calc(100dvi - var(--sigvelo-spacing-8)));
   padding: 0;
   font-family: inherit;
   color: var(--sigvelo-color-text);

package/dist/styles/pricing-page.css

@@ -1,10 +1,12 @@
 .pricing-page {
   box-sizing: border-box;
-  width: 100%;
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: clamp(var(--sigvelo-spacing-4), 4%, var(--sigvelo-spacing-12))
-    clamp(var(--sigvelo-spacing-3), 3%, var(--sigvelo-spacing-6));
+  inline-size: 100%;
+  /* Marketing measure: wider than --sigvelo-layout-content so three plan
+     cards sit in one row. Application dossiers keep the 50rem content column. */
+  max-inline-size: 75rem;
+  margin-inline: auto;
+  padding-block: clamp(var(--sigvelo-layout-stack), 4%, var(--sigvelo-spacing-12));
+  padding-inline: clamp(var(--sigvelo-layout-gutter), 3%, var(--sigvelo-spacing-6));
   container-type: inline-size;
 }
 
@@ -12,7 +14,7 @@
 
 .pricing-page__header {
   text-align: center;
-  margin-bottom: var(--sigvelo-spacing-12);
+  margin-block-end: var(--sigvelo-spacing-12);
 }
 
 .pricing-page__title {
@@ -54,8 +56,11 @@
   color: var(--sigvelo-color-text);
 }
 
-.pricing-page__billing-badge {
+.pricing-page__billing-savings {
   margin-inline-start: var(--sigvelo-spacing-1-5);
+  color: var(--sigvelo-color-success-text);
+  font-size: var(--sigvelo-text-xs);
+  font-weight: var(--sigvelo-font-weight-semibold);
 }
 
 /* Plans Grid */
@@ -64,7 +69,7 @@
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: var(--sigvelo-spacing-6);
-  margin-bottom: var(--sigvelo-spacing-12);
+  margin-block-end: var(--sigvelo-spacing-12);
 }
 
 .pricing-page__plan {
@@ -81,15 +86,16 @@
     0 2px 4px -2px color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 90%);
 }
 
-.pricing-page__popular-badge {
-  position: absolute;
-  top: -0.625rem;
-  left: 50%;
-  transform: translateX(-50%);
+.pricing-page__plan-header {
+  margin-block-end: var(--sigvelo-spacing-6);
 }
 
-.pricing-page__plan-header {
-  margin-bottom: var(--sigvelo-spacing-6);
+.pricing-page__popular-label {
+  display: block;
+  margin-block-end: var(--sigvelo-spacing-1);
+  color: var(--sigvelo-color-success-text);
+  font-size: var(--sigvelo-text-xs);
+  font-weight: var(--sigvelo-font-weight-semibold);
 }
 
 .pricing-page__plan-name {
@@ -108,7 +114,7 @@
 }
 
 .pricing-page__plan-price {
-  margin-bottom: var(--sigvelo-spacing-6);
+  margin-block-end: var(--sigvelo-spacing-6);
 }
 
 .pricing-page__price-amount {
@@ -131,11 +137,11 @@
   font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-success-bg);
-  margin-top: var(--sigvelo-spacing-1);
+  margin-block-start: var(--sigvelo-spacing-1);
 }
 
 .pricing-page__plan-cta {
-  width: 100%;
+  inline-size: 100%;
 }
 
 .pricing-page__features-separator {
@@ -168,8 +174,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 1.25rem;
-  height: 1.25rem;
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
   flex-shrink: 0;
   color: var(--sigvelo-color-text-muted);
 }
@@ -185,13 +191,13 @@
 .pricing-page__feature-limit {
   font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
-  margin-left: var(--sigvelo-spacing-1);
+  margin-inline-start: var(--sigvelo-spacing-1);
 }
 
 /* Calculator */
 
 .pricing-page__calculator {
-  max-width: 600px;
+  max-inline-size: var(--sigvelo-layout-content);
   margin: 0 auto var(--sigvelo-spacing-12);
   padding: var(--sigvelo-spacing-8);
 }
@@ -212,7 +218,7 @@
 }
 
 .pricing-page__calculator-slider {
-  margin-bottom: var(--sigvelo-spacing-2);
+  margin-block-end: var(--sigvelo-spacing-2);
 }
 
 .pricing-page__calculator-separator {
@@ -223,7 +229,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: var(--sigvelo-spacing-3);
+  margin-block-end: var(--sigvelo-spacing-3);
 }
 
 .pricing-page__calculator-value {
@@ -237,7 +243,7 @@
 .pricing-page__calculator-range {
   display: flex;
   justify-content: space-between;
-  margin-top: var(--sigvelo-spacing-2);
+  margin-block-start: var(--sigvelo-spacing-2);
   font-family: inherit;
   font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
@@ -247,7 +253,7 @@
   display: flex;
   justify-content: space-between;
   align-items: baseline;
-  margin-bottom: var(--sigvelo-spacing-6);
+  margin-block-end: var(--sigvelo-spacing-6);
 }
 
 .pricing-page__calculator-result-label {
@@ -306,7 +312,7 @@
 /* FAQ */
 
 .pricing-page__faq {
-  max-width: 700px;
+  max-inline-size: var(--sigvelo-layout-content);
   margin: 0 auto;
 }
 
@@ -328,7 +334,7 @@
 
 .pricing-page__confirm-summary {
   padding: var(--sigvelo-spacing-4);
-  margin-bottom: var(--sigvelo-spacing-4);
+  margin-block-end: var(--sigvelo-spacing-4);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border-radius: var(--sigvelo-radius-md);
 }
@@ -355,7 +361,8 @@
 
 /* Responsive */
 
-@container (max-width: 768px) {
+/* Local wrap. Not --sigvelo-layout-break-compact. */
+@container (inline-size <= 48rem) {
   .pricing-page__title {
     font-size: var(--sigvelo-text-3xl);
   }
@@ -365,7 +372,7 @@
   }
 
   .pricing-page__plans {
-    grid-template-columns: 1fr;
+    grid-template-columns: var(--sigvelo-layout-track-fill);
   }
 
   .pricing-page__price-amount {