@mcp-b/react-components 0.40.0 → 0.41.0

package/dist/styles/mcp-plugin-catalog.css

@@ -2,58 +2,67 @@
   container: mcp-plugin-catalog / inline-size;
   box-sizing: border-box;
   inline-size: 100%;
-  max-inline-size: var(--sigvelo-measure-wide-block);
-  padding-inline: var(--sigvelo-spacing-4);
-  margin-inline: auto;
+  min-block-size: 0;
+  display: flex;
+  flex-direction: column;
   color: var(--sigvelo-color-text);
 }
 
-.mcp-plugin-catalog__header,
-.mcp-plugin-catalog__heading-copy,
 .mcp-plugin-catalog__installed,
 .mcp-plugin-catalog__sections,
 .mcp-plugin-catalog__section {
   display: grid;
 }
 
+/* The card's chrome row at the bar rhythm: no title (the hosting tab or icon
+   carries it), no fill — separated from the scrolling directory by one
+   hairline and a breath of shadow. */
 .mcp-plugin-catalog__header {
-  gap: var(--sigvelo-spacing-4);
-  margin-block-end: var(--sigvelo-spacing-6);
+  position: relative;
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-2);
+  min-block-size: calc(var(--sigvelo-density-compact-control-height) + var(--sigvelo-spacing-2));
+  padding-block: var(--sigvelo-spacing-1);
+  padding-inline: var(--sigvelo-spacing-2);
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  box-shadow: var(--sigvelo-elevation-bar);
 }
 
-.mcp-plugin-catalog__heading-copy {
-  gap: var(--sigvelo-spacing-1);
+/* The bar's one action keeps to the far end, Ploy-style. */
+.mcp-plugin-catalog__add-custom {
+  margin-inline-start: auto;
 }
 
-.mcp-plugin-catalog__heading,
-.mcp-plugin-catalog__description,
 .mcp-plugin-catalog__section-heading,
 .mcp-plugin-catalog__empty,
 .mcp-plugin-details p {
   margin: 0;
 }
 
-.mcp-plugin-catalog__heading {
-  font-size: var(--sigvelo-text-3xl);
-  font-weight: var(--sigvelo-font-weight-normal);
-  line-height: var(--sigvelo-text-3xl-leading);
-  letter-spacing: var(--sigvelo-tracking-normal);
+.mcp-plugin-catalog__search {
+  flex: 1;
+  max-inline-size: 24rem;
 }
 
-.mcp-plugin-catalog__description {
-  max-inline-size: var(--sigvelo-measure-prose);
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-base);
-  line-height: var(--sigvelo-text-base-leading);
+.mcp-plugin-catalog__body {
+  flex: 1;
+  min-block-size: 0;
+  overflow: auto;
+  padding-inline: var(--sigvelo-spacing-4);
+  padding-block: var(--sigvelo-spacing-2) var(--sigvelo-spacing-4);
 }
 
-.mcp-plugin-catalog__search {
-  inline-size: 100%;
+.mcp-plugin-catalog__body > * {
+  max-inline-size: var(--sigvelo-measure-wide-block);
+  margin-inline: auto;
 }
 
 .mcp-plugin-catalog__installed {
   gap: var(--sigvelo-spacing-2);
-  margin-block-end: var(--sigvelo-spacing-6);
+  margin-block-end: var(--sigvelo-spacing-5);
 }
 
 .mcp-plugin-catalog__installed-list,
@@ -70,7 +79,7 @@
 }
 
 .mcp-plugin-catalog__sections {
-  gap: var(--sigvelo-spacing-6);
+  gap: var(--sigvelo-spacing-5);
 }
 
 .mcp-plugin-catalog__section {
@@ -86,7 +95,7 @@
 
 .mcp-plugin-catalog__list {
   display: grid;
-  gap: var(--sigvelo-spacing-4) var(--sigvelo-spacing-2);
+  gap: var(--sigvelo-spacing-2) var(--sigvelo-spacing-2);
   margin-inline: calc(-1 * var(--sigvelo-spacing-2));
 }
 
@@ -95,7 +104,7 @@
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   gap: var(--sigvelo-spacing-2);
-  min-block-size: var(--sigvelo-spacing-14);
+  min-block-size: var(--sigvelo-spacing-12);
   padding-inline-end: var(--sigvelo-spacing-2);
   border-radius: var(--sigvelo-radius-lg);
   transition: background-color var(--sigvelo-motion-duration-interaction)
@@ -112,10 +121,10 @@
 
 .mcp-plugin-catalog__card-main {
   display: grid;
-  grid-template-columns: var(--sigvelo-spacing-10) minmax(0, 1fr);
+  grid-template-columns: var(--sigvelo-spacing-8) minmax(0, 1fr);
   align-items: center;
   justify-content: start;
-  gap: var(--sigvelo-spacing-3-5);
+  gap: var(--sigvelo-spacing-3);
   inline-size: 100%;
   min-inline-size: 0;
   padding-inline: var(--sigvelo-spacing-2);
@@ -170,7 +179,7 @@
   background:
     radial-gradient(
       ellipse 48% 135% at 0% 38%,
-      var(--sigvelo-color-warning-400) 0%,
+      var(--sigvelo-color-primary-400) 0%,
       transparent 74%
     ),
     radial-gradient(
@@ -285,11 +294,6 @@
 }
 
 @container mcp-plugin-catalog (inline-size >= 36rem) {
-  .mcp-plugin-catalog__header {
-    grid-template-columns: minmax(0, 1fr) 16rem;
-    align-items: end;
-  }
-
   .mcp-plugin-catalog__list {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }

package/dist/styles/mcp-server-picker.css

@@ -130,7 +130,7 @@
 }
 
 .mcp-server-picker__row-shell[data-status="authenticating"] .mcp-server-picker__row-status {
-  color: var(--sigvelo-color-warning-text-on-subtle);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .mcp-server-picker__row-shell:is([data-status="failed"], [data-status="not-connected"])

package/dist/styles/message.css

@@ -20,7 +20,7 @@
 
 .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);
   padding-inline: var(--sigvelo-spacing-3);
@@ -37,14 +37,27 @@
   color: var(--sigvelo-color-text);
 }
 
+.message__content:has(> .message__response) {
+  font-size: var(--sigvelo-text-sm);
+  line-height: var(--sigvelo-text-sm-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%);
+  inline-size: min(var(--sigvelo-measure-prose), 85%);
   max-inline-size: 100%;
   background-color: transparent;
   padding-inline: 0;
 }
 
+.message[data-from="assistant"] .message__content:has(> .message__response) {
+  font-family: var(--sigvelo-font-response);
+}
+
 /* 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. */
@@ -70,6 +83,7 @@
 .message__response {
   min-inline-size: 0;
   max-inline-size: 100%;
+  line-height: calc(var(--sigvelo-text-sm-leading) * var(--sigvelo-chat-font-scale));
 }
 
 .message__attachment {
@@ -114,39 +128,48 @@
   color: var(--sigvelo-color-text-muted);
 }
 
-.message__actions {
-  display: inline-flex;
+.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);
-  padding: 0;
   color: var(--sigvelo-color-text-muted);
+  transition: opacity var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
-.message__actions--reserved {
-  min-block-size: var(--sigvelo-control-height-sm);
+.message__timestamp {
+  font-size: var(--sigvelo-text-xs);
+  font-variant-numeric: tabular-nums;
+  line-height: var(--sigvelo-leading-snug);
+  white-space: nowrap;
 }
 
-.message[data-from="user"]:has(> .message__actions--inline) {
-  flex-direction: row-reverse;
-  align-items: center;
+.message__meta .message__actions[data-unavailable] {
+  visibility: hidden;
 }
 
-.message[data-from="user"] > .message__actions--inline {
-  align-self: center;
+.message__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-0-5);
+  padding: 0;
+  color: var(--sigvelo-color-text-muted);
 }
 
-.message[data-from="user"] > .message__actions--inline[data-unavailable] {
-  visibility: hidden;
+.message__actions--reserved {
+  min-block-size: var(--sigvelo-control-height-xs);
 }
 
 @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 +196,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);

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/pricing-page.css

@@ -54,8 +54,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 */
@@ -81,17 +84,18 @@
     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-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 {
   font-family: inherit;
   font-size: var(--sigvelo-text-xl);

package/dist/styles/prompt-input.css

@@ -1,6 +1,4 @@
 .prompt-input {
-  --prompt-input-secondary-text: var(--sigvelo-color-text-muted);
-
   container: prompt-input / inline-size;
   position: relative;
   display: flex;
@@ -351,10 +349,10 @@
   background-color: color-mix(in oklab, transparent, var(--sigvelo-color-text) 5%);
 }
 
-/* Bypass is the loud one — Codex-style warning tint so it can't be missed. */
+/* Bypass is the loud one — the muted danger red so it can't be missed. */
 .prompt-input__permissions-trigger[data-mode="bypass"],
 .prompt-input__permissions-trigger[data-mode="bypass"]:hover:not([data-disabled]) {
-  color: var(--sigvelo-color-warning-text);
+  color: var(--sigvelo-color-danger-text);
 }
 
 /* Both modes stacked in one cell; the trigger is always as wide as the
@@ -523,8 +521,6 @@
 }
 
 .prompt-input__command-popup {
-  --prompt-input-secondary-text: var(--sigvelo-color-text-muted);
-
   inline-size: 100%;
   max-block-size: min(24rem, var(--available-height));
   overflow-inline: hidden;
@@ -565,7 +561,7 @@
 }
 
 .prompt-input__command-meta {
-  color: var(--prompt-input-secondary-text);
+  color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-density-compact-control-font-size);
   white-space: nowrap;
 }
@@ -622,7 +618,7 @@
 
 .prompt-input__command-description,
 .prompt-input__context-description {
-  color: var(--prompt-input-secondary-text);
+  color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-density-compact-control-font-size);
 }
 
@@ -640,12 +636,10 @@
 }
 
 .prompt-input__context-trigger[data-unavailable] {
-  color: var(--sigvelo-color-warning-text);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .prompt-input__context-menu {
-  --prompt-input-secondary-text: var(--sigvelo-color-text-muted);
-
   min-inline-size: min(22rem, calc(100dvi - var(--sigvelo-spacing-4)));
   max-inline-size: min(28rem, calc(100dvi - var(--sigvelo-spacing-4)));
 }
@@ -665,9 +659,10 @@
   }
 
   .prompt-input__button,
-  .prompt-input__footer .button,
   .prompt-input__attachment-remove,
-  .prompt-input__reference.button {
+  .prompt-input__recording-button,
+  .prompt-input__reference,
+  .prompt-input__submit {
     --sigvelo-recipe-button-height: var(--sigvelo-control-height-xl);
   }
 

package/dist/styles/recipes.css

@@ -92,8 +92,7 @@
 :where(
   [data-slot="dialog-footer"],
   [data-slot="alert-dialog-footer"],
-  [data-slot="message-edit-actions"],
-  [data-slot="subagent-run-actions"]
+  [data-slot="message-edit-actions"]
 ) {
   display: flex;
   flex-wrap: wrap;
@@ -150,13 +149,6 @@
   border-radius: var(--sigvelo-radius-md);
 }
 
-:where([data-recipe~="application-plane"]) {
-  margin: var(--sigvelo-spacing-3);
-  border-radius: var(--sigvelo-radius-lg);
-  background: var(--sigvelo-color-surface);
-  box-shadow: var(--sigvelo-elevation-floating);
-}
-
 :where([data-recipe~="disclosure-stack"]) {
   display: flex;
   flex-direction: column;
@@ -196,47 +188,6 @@
   mask-repeat: no-repeat;
 }
 
-/* The inline-axis partner, for toolbars, tab strips, and chip rows that scroll
-   sideways. Gradients take physical directions only, so start/end are swapped
-   under [dir="rtl"] rather than expressed logically. */
-:where([data-recipe~="scroll-fade-x"]) {
-  --sigvelo-scroll-fade-start: 0px;
-  --sigvelo-scroll-fade-end: 0px;
-  -webkit-mask-image: linear-gradient(
-    to right,
-    transparent 0,
-    #000 var(--sigvelo-scroll-fade-start),
-    #000 calc(100% - var(--sigvelo-scroll-fade-end)),
-    transparent 100%
-  );
-  mask-image: linear-gradient(
-    to right,
-    transparent 0,
-    #000 var(--sigvelo-scroll-fade-start),
-    #000 calc(100% - var(--sigvelo-scroll-fade-end)),
-    transparent 100%
-  );
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-}
-
-:where([dir="rtl"] [data-recipe~="scroll-fade-x"], [data-recipe~="scroll-fade-x"][dir="rtl"]) {
-  -webkit-mask-image: linear-gradient(
-    to left,
-    transparent 0,
-    #000 var(--sigvelo-scroll-fade-start),
-    #000 calc(100% - var(--sigvelo-scroll-fade-end)),
-    transparent 100%
-  );
-  mask-image: linear-gradient(
-    to left,
-    transparent 0,
-    #000 var(--sigvelo-scroll-fade-start),
-    #000 calc(100% - var(--sigvelo-scroll-fade-end)),
-    transparent 100%
-  );
-}
-
 @media (any-pointer: coarse) {
   :where(:root, [data-theme="light"], [data-theme="dark"]) {
     --sigvelo-recipe-row-min-height: var(--sigvelo-control-height-xl);
@@ -836,13 +787,6 @@
     --sigvelo-recipe-surface-border: CanvasText;
   }
 
-  :where([data-recipe~="application-plane"]) {
-    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
-    background: Canvas;
-    color: CanvasText;
-    box-shadow: none;
-  }
-
   :where(
     [data-slot="input"],
     [data-slot="select-trigger"],

package/dist/styles/responsive-sidebar-shell.css

@@ -1,15 +1,15 @@
+/* Three planes, Ploy-style: the rail is the recessed vertical, everything
+   beside it — bar, content — rests directly on the page surface, and one
+   elevated card (a host's, e.g. the workbench) floats above it. Nothing else
+   paints. */
 .responsive-sidebar-shell {
   container: responsive-sidebar-shell / inline-size;
   block-size: 100%;
   min-inline-size: 0;
   min-block-size: 0;
   display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
-  background: var(--sigvelo-color-surface-under);
-}
-
-.responsive-sidebar-shell > .app-top-bar {
-  background: var(--sigvelo-color-surface-under);
+  grid-template-rows: minmax(0, 1fr);
+  background: var(--sigvelo-color-surface);
 }
 
 .responsive-sidebar-shell__frame {
@@ -24,7 +24,6 @@
   grid-template-columns: var(--resizable-side-panel-size, 16rem) minmax(0, 1fr);
   grid-template-rows: minmax(0, 1fr);
   overflow: hidden;
-  background: var(--sigvelo-color-surface-under);
   color: var(--sigvelo-color-text);
   font-family: inherit;
   transition: grid-template-columns var(--sigvelo-motion-duration-layout)
@@ -45,19 +44,35 @@
 .responsive-sidebar-shell__sidebar {
   grid-column: 1;
   grid-row: 1;
+  /* One rail tone everywhere: the recessed step below the page. The compact
+     overlay drawer below carries its own raised material regardless. */
+  background: var(--responsive-sidebar-shell-sidebar-surface, var(--sigvelo-color-surface-under));
 }
 
 .responsive-sidebar-shell__main {
   grid-column: 2;
   grid-row: 1;
   display: grid;
-  grid-template-rows: minmax(0, 1fr);
+  /* The bar's own row, so it never overlaps the content it labels. Auto, not a
+     reserved height: a shell with no bar keeps the whole column for content. */
+  grid-template-rows: auto minmax(0, 1fr);
 }
 
 .responsive-sidebar-shell__peek {
   display: none;
 }
 
+/* Wide widths show the plain title and the icon toggle; the compact trigger
+   only exists below the drawer breakpoint, where the title itself becomes the
+   control that opens the sidebar. */
+.responsive-sidebar-shell__title-trigger {
+  display: none;
+}
+
+.responsive-sidebar-shell__compact-leading {
+  display: none;
+}
+
 @media (forced-colors: active) {
   .responsive-sidebar-shell,
   .responsive-sidebar-shell__frame {
@@ -92,18 +107,6 @@
 }
 
 @container responsive-sidebar-shell (inline-size <= 56rem) {
-  /* Narrow hosts flatten the application plane: no desktop chrome remains
-     around it, so margins and elevation would read as a card in a frame. */
-  .responsive-sidebar-shell__main {
-    margin: 0;
-    border-radius: 0;
-    box-shadow: none;
-  }
-
-  .responsive-sidebar-shell > .app-top-bar {
-    background: var(--sigvelo-color-surface);
-  }
-
   .responsive-sidebar-shell__frame {
     grid-template-columns: minmax(0, 1fr);
   }
@@ -144,6 +147,53 @@
     display: none;
   }
 
+  /* The title stands in for both its own text and the icon toggle: one
+     labelled control that opens the drawer, instead of an anonymous icon
+     beside a dead title. Shallow owner classes keep this independent of the
+     app bar's incidental DOM anatomy. */
+  .responsive-sidebar-shell__toggle--replaced-by-title,
+  .responsive-sidebar-shell__toggle--replaced-by-compact-leading,
+  .responsive-sidebar-shell__title-text--replaced-by-trigger {
+    display: none;
+  }
+
+  .responsive-sidebar-shell__compact-leading {
+    display: contents;
+  }
+
+  .responsive-sidebar-shell__title-trigger {
+    inline-size: auto;
+    max-inline-size: min(22rem, 58vw);
+    min-inline-size: 0;
+    min-block-size: var(--sigvelo-density-compact-control-height);
+    display: inline-flex;
+    gap: var(--sigvelo-density-compact-control-gap);
+    padding-inline: var(--sigvelo-density-compact-control-padding-inline);
+    border-radius: var(--sigvelo-radius-md);
+    color: var(--sigvelo-color-text);
+    font-size: var(--sigvelo-density-compact-control-font-size);
+    font-weight: var(--sigvelo-font-weight-semibold);
+  }
+
+  .responsive-sidebar-shell__title-trigger span {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .responsive-sidebar-shell__title-trigger > svg {
+    flex: 0 0 auto;
+    inline-size: var(--sigvelo-density-compact-control-icon-size);
+    block-size: var(--sigvelo-density-compact-control-icon-size);
+    color: var(--sigvelo-color-text-muted);
+    transition: rotate var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
+  }
+
+  .responsive-sidebar-shell__title-trigger[aria-expanded="true"] > svg {
+    rotate: 180deg;
+  }
+
   .responsive-sidebar-shell[data-sidebar-open="false"]
     > .responsive-sidebar-shell__frame
     > .responsive-sidebar-shell__sidebar {