@mcp-b/react-components 0.21.0 → 0.23.0

package/dist/styles/app-icon.css

@@ -0,0 +1,122 @@
+.avatar.app-icon {
+  --sigvelo-recipe-app-icon-size: var(--sigvelo-spacing-8);
+  --sigvelo-recipe-app-icon-radius: 30%;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--sigvelo-recipe-app-icon-size);
+  block-size: var(--sigvelo-recipe-app-icon-size);
+  flex: none;
+  overflow: hidden;
+  border-radius: var(--sigvelo-recipe-app-icon-radius);
+  background: var(--sigvelo-color-surface-raised);
+  box-shadow: 0 var(--sigvelo-spacing-1) var(--sigvelo-spacing-4)
+    color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 5%);
+  corner-shape: round;
+  user-select: none;
+}
+
+.app-icon[data-app-icon-size="xs"] {
+  --sigvelo-recipe-app-icon-size: var(--sigvelo-spacing-5);
+}
+
+.app-icon[data-app-icon-size="sm"] {
+  --sigvelo-recipe-app-icon-size: var(--sigvelo-spacing-6);
+  --sigvelo-recipe-app-icon-radius: 37.5%;
+}
+
+.app-icon[data-app-icon-size="lg"] {
+  --sigvelo-recipe-app-icon-size: var(--sigvelo-spacing-10);
+}
+
+.app-icon[data-app-icon-size="xl"] {
+  --sigvelo-recipe-app-icon-size: var(--sigvelo-spacing-12);
+}
+
+.app-icon[data-app-icon-variant="surface"],
+.app-icon[data-app-icon-variant="contrast"] {
+  padding: var(--sigvelo-spacing-2);
+}
+
+.app-icon[data-app-icon-variant="surface"] {
+  background: var(--sigvelo-color-surface-raised);
+}
+
+.app-icon[data-app-icon-variant="contrast"] {
+  background: var(--sigvelo-color-primary-bg);
+  color: var(--sigvelo-color-primary-text-on-bg);
+}
+
+.app-icon::after {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 var(--sigvelo-border-width-hairline)
+    color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 10%);
+  content: "";
+  pointer-events: none;
+}
+
+.app-icon__image,
+.app-icon__fallback,
+.app-icon > :where(svg, img) {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.app-icon__image {
+  display: block;
+  object-fit: cover;
+}
+
+.app-icon__image[data-fit="contain"] {
+  object-fit: contain;
+}
+
+.app-icon__fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: inherit;
+  background: var(--sigvelo-color-surface-raised);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  font-weight: var(--sigvelo-font-weight-semibold);
+}
+
+.app-icon[data-app-icon-variant="contrast"] .app-icon__fallback {
+  background: inherit;
+  color: inherit;
+}
+
+.app-icon-stack {
+  display: inline-flex;
+  align-items: center;
+  block-size: 0;
+  isolation: isolate;
+}
+
+.app-icon-stack > .app-icon {
+  position: relative;
+  z-index: 1;
+}
+
+.app-icon-stack > .app-icon:not(:first-child) {
+  margin-inline-start: calc(-1 * var(--sigvelo-spacing-2));
+}
+
+.app-icon-stack > .app-icon:first-child {
+  z-index: 3;
+}
+
+.app-icon-stack > .app-icon:nth-child(2) {
+  z-index: 2;
+}
+
+@media (forced-colors: active) {
+  .app-icon {
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
+  }
+}

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

@@ -16,7 +16,6 @@
   padding-inline: calc(var(--sigvelo-spacing-2) + env(safe-area-inset-left, 0px))
     calc(var(--sigvelo-spacing-2) + env(safe-area-inset-right, 0px));
   border: 0;
-  border-block-end: 0;
   border-radius: 0;
   background: var(--sigvelo-color-surface);
 }

package/dist/styles/avatar.css

@@ -26,6 +26,15 @@
   --sigvelo-recipe-avatar-badge-size: var(--sigvelo-spacing-3);
 }
 
+.avatar[data-size="xl"] {
+  --sigvelo-recipe-avatar-size: var(--sigvelo-spacing-14);
+  --sigvelo-recipe-avatar-badge-size: var(--sigvelo-spacing-4);
+}
+
+.avatar[data-shape="rounded"] {
+  border-radius: var(--sigvelo-radius-md);
+}
+
 .avatar__image {
   inline-size: 100%;
   block-size: 100%;
@@ -38,6 +47,10 @@
     scale var(--sigvelo-motion-duration-presence) var(--sigvelo-motion-ease-enter);
 }
 
+.avatar__image[data-fit="contain"] {
+  object-fit: contain;
+}
+
 .avatar__image[data-starting-style],
 .avatar__image[data-ending-style] {
   opacity: 0;

package/dist/styles/base.css

@@ -35,7 +35,6 @@
 :where(
   .agent-activity-preview__badge,
   .agent-activity-preview__dismiss,
-  .agent-activity-preview__favicons img,
   .agent-activity-preview__unviewed-dot,
   .approval__key,
   .avatar,

package/dist/styles/button.css

@@ -58,6 +58,8 @@
 /* Normal appearance */
 
 .button--normal.button--primary {
+  --sigvelo-recipe-button-radius: var(--sigvelo-radius-full);
+
   background-color: var(--sigvelo-color-primary-bg);
   color: var(--sigvelo-color-primary-text-on-bg);
 }
@@ -116,6 +118,18 @@
   background-color: color-mix(in oklab, transparent, var(--sigvelo-color-danger-bg) 7.5%);
 }
 
+/* Raised surface appearance */
+
+.button--surface {
+  background-color: var(--sigvelo-color-surface-raised);
+  color: var(--sigvelo-color-text);
+  box-shadow: var(--sigvelo-elevation-raised);
+}
+
+.button--surface:hover:not([data-disabled], :active) {
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+}
+
 /* Ghost appearance */
 
 .button--ghost {

package/dist/styles/description-list.css

@@ -2,6 +2,8 @@
   display: grid;
   gap: var(--sigvelo-spacing-2);
   margin: 0;
+  font-size: var(--sigvelo-text-sm);
+  line-height: var(--sigvelo-text-sm-leading);
 }
 
 .description-list__item {
@@ -17,8 +19,6 @@
 .description-list__details {
   margin: 0;
   overflow-wrap: anywhere;
-  font-family: var(--sigvelo-font-mono);
-  font-size: var(--sigvelo-text-xs);
   text-align: end;
 }
 

package/dist/styles/dialog.css

@@ -4,7 +4,7 @@
 
    The blur does run on every frame of the open fade — the scrim covers the
    viewport, so each frame re-filters all of it. What makes that affordable is
-   the filter itself: one 8px radius, no second pass. An earlier
+   the filter itself: one 1px radius, no second pass. An earlier
    blur(24px) saturate(180%) cost about a third of the Storybook suite in
    timing failures, in stories that had nothing to do with dialogs.
 
@@ -50,16 +50,16 @@
 }
 
 .dialog__title {
-  font-size: var(--sigvelo-text-base);
-  font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: var(--sigvelo-leading-compact);
+  font-size: var(--sigvelo-text-lg);
+  font-weight: var(--sigvelo-font-weight-normal);
+  line-height: var(--sigvelo-text-lg-leading);
   color: var(--sigvelo-color-text);
   margin-block-end: var(--sigvelo-spacing-1);
 }
 
 .dialog__description {
-  font-size: var(--sigvelo-text-compact);
-  line-height: var(--sigvelo-leading-normal);
+  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);
 }

package/dist/styles/index.css

@@ -25,8 +25,10 @@
 @import "./attachment-preview.css" layer(components);
 @import "./autocomplete.css" layer(components);
 @import "./avatar.css" layer(components);
+@import "./app-icon.css" layer(components);
 @import "./badge.css" layer(components);
 @import "./button.css" layer(components);
+@import "./action-guide.css" layer(components);
 @import "./card.css" layer(components);
 @import "./checkbox.css" layer(components);
 @import "./checkbox-group.css" layer(components);
@@ -52,6 +54,7 @@
 @import "./nanite-scene.css" layer(components);
 @import "./number-field.css" layer(components);
 @import "./popover.css" layer(components);
+@import "./mcp-plugin-catalog.css" layer(components);
 @import "./mcp-server-picker.css" layer(components);
 @import "./mcp-connection-request.css" layer(components);
 @import "./preview-card.css" layer(components);

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

@@ -0,0 +1,296 @@
+.mcp-plugin-catalog {
+  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;
+  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;
+}
+
+.mcp-plugin-catalog__header {
+  gap: var(--sigvelo-spacing-4);
+  margin-block-end: var(--sigvelo-spacing-6);
+}
+
+.mcp-plugin-catalog__heading-copy {
+  gap: var(--sigvelo-spacing-1);
+}
+
+.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__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__search {
+  inline-size: 100%;
+}
+
+.mcp-plugin-catalog__installed {
+  gap: var(--sigvelo-spacing-2);
+  margin-block-end: var(--sigvelo-spacing-6);
+}
+
+.mcp-plugin-catalog__installed-list,
+.mcp-plugin-catalog__list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.mcp-plugin-catalog__installed-list {
+  display: flex;
+  gap: var(--sigvelo-spacing-2);
+  overflow-x: auto;
+}
+
+.mcp-plugin-catalog__sections {
+  gap: var(--sigvelo-spacing-6);
+}
+
+.mcp-plugin-catalog__section {
+  gap: var(--sigvelo-spacing-2);
+}
+
+.mcp-plugin-catalog__section-heading {
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-sm);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-text-sm-leading);
+}
+
+.mcp-plugin-catalog__list {
+  display: grid;
+  gap: var(--sigvelo-spacing-4) var(--sigvelo-spacing-2);
+  margin-inline: calc(-1 * var(--sigvelo-spacing-2));
+}
+
+.mcp-plugin-catalog__card {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--sigvelo-spacing-2);
+  min-block-size: var(--sigvelo-spacing-14);
+  padding-inline-end: var(--sigvelo-spacing-2);
+  border-radius: var(--sigvelo-radius-lg);
+  transition: background-color var(--sigvelo-motion-duration-interaction)
+    var(--sigvelo-motion-ease-change);
+}
+
+.mcp-plugin-catalog__card:hover {
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+}
+
+.mcp-plugin-catalog__card .button:hover:not([data-disabled]) {
+  background-color: transparent;
+}
+
+.mcp-plugin-catalog__card-main {
+  display: grid;
+  grid-template-columns: var(--sigvelo-spacing-10) minmax(0, 1fr);
+  align-items: center;
+  justify-content: start;
+  gap: var(--sigvelo-spacing-3-5);
+  inline-size: 100%;
+  min-inline-size: 0;
+  padding-inline: var(--sigvelo-spacing-2);
+  text-align: start;
+  white-space: normal;
+}
+
+.mcp-plugin-catalog__card-copy {
+  display: grid;
+  min-inline-size: 0;
+}
+
+.mcp-plugin-catalog__card-name {
+  font-size: var(--sigvelo-text-sm);
+  font-weight: var(--sigvelo-font-weight-normal);
+  line-height: var(--sigvelo-text-compact-leading);
+}
+
+.mcp-plugin-catalog__card-description {
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-compact);
+  line-height: var(--sigvelo-text-compact-leading);
+}
+
+.mcp-plugin-catalog__empty {
+  padding-block: var(--sigvelo-spacing-8);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-sm);
+  text-align: center;
+}
+
+.dialog__popup.mcp-plugin-details {
+  --sigvelo-recipe-surface-padding: 0;
+
+  display: block;
+  max-inline-size: 36.25rem;
+  overflow-block: auto;
+  overflow-inline: hidden;
+  overscroll-behavior: contain;
+}
+
+.mcp-plugin-details__hero {
+  position: relative;
+  isolation: isolate;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sigvelo-spacing-4);
+  min-block-size: 22.75rem;
+  padding-block-start: calc(var(--sigvelo-spacing-12) + var(--sigvelo-spacing-1));
+  overflow: hidden;
+  background:
+    radial-gradient(
+      ellipse 48% 135% at 0% 38%,
+      var(--sigvelo-color-warning-400) 0%,
+      transparent 74%
+    ),
+    radial-gradient(
+      ellipse 50% 85% at 48% -8%,
+      var(--sigvelo-color-primary-300) 0%,
+      transparent 78%
+    ),
+    radial-gradient(
+      ellipse 68% 78% at 42% 112%,
+      var(--sigvelo-color-primary-700) 0%,
+      transparent 72%
+    ),
+    linear-gradient(
+      108deg,
+      var(--sigvelo-color-primary-600),
+      var(--sigvelo-color-primary-400) 70%,
+      var(--sigvelo-color-primary-500)
+    );
+  color: var(--sigvelo-color-primary-text-on-bg);
+}
+
+.mcp-plugin-details__hero > .dialog__close {
+  position: absolute;
+  inset-block-start: var(--sigvelo-spacing-2);
+  inset-inline-end: var(--sigvelo-spacing-2);
+  color: inherit;
+}
+
+.mcp-plugin-details__hero > .dialog__close:hover:not([data-disabled]) {
+  background-color: color-mix(in oklab, transparent, white 12%);
+}
+
+.mcp-plugin-details__title-copy {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.mcp-plugin-details__identity {
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-3-5);
+}
+
+.mcp-plugin-details__identity > .separator {
+  block-size: var(--sigvelo-spacing-8);
+  background-color: color-mix(in oklab, currentcolor, transparent 30%);
+}
+
+.mcp-plugin-details__title-copy {
+  gap: var(--sigvelo-spacing-2);
+  inline-size: 100%;
+  padding-inline: var(--sigvelo-spacing-5);
+}
+
+.mcp-plugin-details__title {
+  margin: 0;
+  color: inherit;
+  font-size: var(--sigvelo-text-2xl);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-text-2xl-leading);
+}
+
+.mcp-plugin-details__state {
+  color: inherit;
+  font-size: var(--sigvelo-text-xs);
+  line-height: var(--sigvelo-text-xs-leading);
+  opacity: 0.8;
+}
+
+.mcp-plugin-details__description {
+  display: -webkit-box;
+  max-inline-size: 33.75rem;
+  max-block-size: calc(5 * var(--sigvelo-text-sm-leading));
+  margin: 0;
+  overflow: hidden;
+  color: inherit;
+  font-size: var(--sigvelo-text-sm);
+  line-height: var(--sigvelo-text-sm-leading);
+  text-align: center;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5;
+}
+
+.mcp-plugin-details__footer {
+  display: flex;
+  justify-content: center;
+  margin-block-start: auto;
+  padding-block: var(--sigvelo-spacing-4) var(--sigvelo-spacing-8);
+}
+
+.mcp-plugin-details__disclosure {
+  display: grid;
+  gap: var(--sigvelo-spacing-2-5);
+  padding: var(--sigvelo-spacing-4) var(--sigvelo-spacing-5);
+  color: var(--sigvelo-color-text-subtle);
+  font-size: var(--sigvelo-text-xs);
+  line-height: var(--sigvelo-leading-snug);
+}
+
+.mcp-plugin-details__disclosure strong {
+  color: var(--sigvelo-color-text);
+  font-weight: var(--sigvelo-font-weight-semibold);
+}
+
+@media (forced-colors: active) {
+  .mcp-plugin-details__hero {
+    background: Canvas;
+    color: CanvasText;
+  }
+}
+
+@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

@@ -74,28 +74,6 @@
   object-fit: contain;
 }
 
-.mcp-server-picker__avatar {
-  inline-size: var(--sigvelo-control-icon-size-lg);
-  block-size: var(--sigvelo-control-icon-size-lg);
-  background-color: transparent;
-  border-radius: var(--sigvelo-radius-sm);
-}
-
-.mcp-server-picker__avatar-image,
-.mcp-server-picker__avatar-fallback {
-  border-radius: var(--sigvelo-radius-sm);
-}
-
-.mcp-server-picker__avatar-image {
-  object-fit: contain;
-}
-
-.mcp-server-picker__avatar-fallback {
-  font-size: var(--sigvelo-text-xs);
-  font-weight: var(--sigvelo-font-weight-bold);
-  line-height: var(--sigvelo-leading-none);
-}
-
 .mcp-server-picker__copy {
   display: flex;
   align-items: baseline;
@@ -195,10 +173,6 @@
 }
 
 @media (forced-colors: active) {
-  .mcp-server-picker__avatar-fallback {
-    border: var(--sigvelo-border-style) var(--sigvelo-border-width) ButtonText;
-  }
-
   .mcp-server-picker__row-shell:has(.mcp-server-picker__row[data-highlighted]) {
     outline: 1px solid Highlight;
   }

package/dist/styles/message-scroller.css

@@ -24,7 +24,11 @@
 }
 
 .message-scroller__viewport[data-scrollable~="end"] {
-  --sigvelo-scroll-fade-end: var(--message-scroller-fade-b-size, var(--message-scroller-fade-size));
+  --sigvelo-scroll-fade-end: var(--message-scroller-fade-size);
+}
+
+.message-scroller__viewport[data-scrollable~="start"] {
+  --sigvelo-scroll-fade-start: var(--message-scroller-fade-size);
 }
 
 .message-scroller__content {

package/dist/styles/message.css

@@ -45,6 +45,13 @@
   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="system"] .message__content {
   background-color: transparent;
   color: var(--sigvelo-color-text-muted);

package/dist/styles/prompt-input.css

@@ -93,6 +93,30 @@
   min-block-size: var(--sigvelo-spacing-6);
 }
 
+/* A supporting tray shares one material and overlap contract whether it sits
+   above the composer for queued work or below it for first-turn utilities. */
+:where(.prompt-input__tray) {
+  display: flex;
+  align-items: center;
+  min-block-size: var(--sigvelo-control-height-xl);
+  min-inline-size: 0;
+  gap: var(--sigvelo-spacing-2);
+  margin-inline: var(--sigvelo-spacing-5);
+  padding: var(--sigvelo-spacing-1);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  color: var(--sigvelo-color-text-muted);
+}
+
+.prompt-input__tray[data-side="top"] {
+  margin-block-end: calc(-1 * var(--sigvelo-border-width));
+  border-radius: var(--sigvelo-radius-2xl) var(--sigvelo-radius-2xl) 0 0;
+}
+
+.prompt-input__tray[data-side="bottom"] {
+  margin-block-start: calc(-1 * var(--sigvelo-border-width));
+  border-radius: 0 0 var(--sigvelo-radius-2xl) var(--sigvelo-radius-2xl);
+}
+
 .prompt-input__attachments {
   display: flex;
   flex-wrap: wrap;
@@ -122,8 +146,8 @@
 
 .prompt-input__attachment-zoom {
   display: block;
+  min-block-size: 0;
   padding: 0;
-  border: none;
   background: none;
   cursor: zoom-in;
 }
@@ -140,18 +164,6 @@
   color: var(--sigvelo-color-text-muted);
 }
 
-.prompt-input__attachment-remove {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--sigvelo-spacing-0-5);
-  border: none;
-  border-radius: var(--sigvelo-radius-sm);
-  background: none;
-  color: var(--sigvelo-color-text-muted);
-  cursor: pointer;
-}
-
 .prompt-input__attachment[data-image] .prompt-input__attachment-remove {
   position: absolute;
   inset-block-start: var(--sigvelo-spacing-0-5);
@@ -159,7 +171,7 @@
   background-color: color-mix(in oklab, var(--sigvelo-color-surface), transparent 20%);
 }
 
-.prompt-input__attachment-remove:hover {
+.prompt-input__attachment-remove:hover:not([data-disabled]) {
   color: var(--sigvelo-color-text);
   background-color: color-mix(in oklab, transparent, var(--sigvelo-color-text) 8%);
 }