@mcp-b/react-components 0.20.5 → 0.22.0

package/dist/styles/agent-chat.css

@@ -1,6 +1,7 @@
 .agent-chat {
   --agent-chat-content-max-inline-size: 64rem;
 
+  container: agent-chat / inline-size;
   position: relative;
   inline-size: 100%;
   block-size: 100%;
@@ -25,7 +26,7 @@
   max-inline-size: 100%;
   inline-size: min(100%, var(--agent-chat-content-max-inline-size));
   margin-inline: auto;
-  padding-block: var(--sigvelo-spacing-4)
+  padding-block: var(--sigvelo-spacing-8)
     calc(var(--agent-chat-composer-size, 5rem) + var(--sigvelo-spacing-2));
   padding-inline: var(--sigvelo-spacing-4);
 }
@@ -44,26 +45,247 @@
   --message-scroller-button-inset-block-end: var(--sigvelo-spacing-2);
 }
 
-/* Floating over the transcript: solid behind the controls, fading out
-   through the top padding so content slides under instead of hitting a bar. */
+.agent-chat-start-screen {
+  block-size: 100%;
+  min-block-size: 0;
+  overflow: auto;
+  scrollbar-gutter: stable;
+}
+
+.agent-chat-start-screen__content {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
+  inline-size: min(100%, var(--agent-chat-content-max-inline-size));
+  min-block-size: 100%;
+  margin-inline: auto;
+  padding: clamp(var(--sigvelo-spacing-5), 8vb, var(--sigvelo-spacing-12)) var(--sigvelo-spacing-4);
+}
+
+.agent-chat-start-screen__primary {
+  grid-row: 2;
+  display: grid;
+  gap: var(--sigvelo-spacing-6);
+  min-inline-size: 0;
+}
+
+.agent-chat-start-screen__heading {
+  margin: 0;
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-2xl);
+  font-weight: var(--sigvelo-font-weight-normal);
+  letter-spacing: var(--sigvelo-tracking-normal);
+  line-height: var(--sigvelo-text-lg-leading);
+  text-align: center;
+  text-wrap: balance;
+}
+
+.agent-chat-start-screen__composer {
+  display: grid;
+  min-inline-size: 0;
+}
+
+.agent-chat-start-screen__composer > .agent-chat__composer {
+  position: static;
+  padding: 0;
+  background: none;
+  backdrop-filter: none;
+}
+
+.agent-chat-start-screen__composer > .agent-chat__composer::after {
+  content: none;
+}
+
+/* The one moment the composer is the subject of the screen rather than
+   chrome pinned under a transcript: lifted further off the page. */
+.agent-chat-start-screen__composer > .agent-chat__composer > .prompt-input {
+  z-index: 1;
+  inline-size: 100%;
+}
+
+.agent-chat-start-screen__starters {
+  grid-row: 3;
+  align-self: start;
+  min-inline-size: 0;
+  min-block-size: 0;
+  padding-block-start: var(--sigvelo-spacing-6);
+}
+
+.agent-chat-starter-list {
+  display: grid;
+  gap: var(--sigvelo-spacing-0-5);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.agent-chat-starter {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  border-radius: var(--sigvelo-radius-xl);
+  transition: background-color var(--sigvelo-motion-duration-interaction)
+    var(--sigvelo-motion-ease-change);
+}
+
+/* A suggestion is not a card. It fills on approach and stays flat — the only
+   raised surface on this screen is the composer. */
+.agent-chat-starter:hover,
+.agent-chat-starter:focus-within {
+  background-color: var(--sigvelo-color-surface-sunken);
+}
+
+.agent-chat-starter .agent-chat-starter__action {
+  justify-content: flex-start;
+  inline-size: 100%;
+  min-block-size: var(--sigvelo-control-height-xl);
+  min-inline-size: 0;
+  gap: var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-spacing-3);
+  background: transparent;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-base);
+  font-weight: var(--sigvelo-font-weight-normal);
+  line-height: var(--sigvelo-leading-relaxed);
+  text-align: start;
+  white-space: normal;
+  transition: color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
+}
+
+.agent-chat-starter .agent-chat-starter__action:hover:not([data-disabled]) {
+  background: transparent;
+}
+
+/* Resting text is quiet so the heading and composer lead. Muted suggestions
+   take the next accessible rung down; the row a pointer or keyboard is
+   actually on resolves to full-strength text. */
+.agent-chat-starter:hover .agent-chat-starter__action,
+.agent-chat-starter:focus-within .agent-chat-starter__action {
+  color: var(--sigvelo-color-text);
+}
+
+.agent-chat-starter__action[data-muted] {
+  color: var(--sigvelo-color-text-subtle);
+}
+
+.agent-chat-starter__icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--sigvelo-color-primary-text);
+}
+
+.agent-chat-starter__label {
+  flex: 1;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+.agent-chat-starter__dismiss {
+  margin-inline-end: var(--sigvelo-spacing-1);
+  color: var(--sigvelo-color-text-faint);
+  opacity: 0;
+}
+
+.agent-chat-starter:hover .agent-chat-starter__dismiss,
+.agent-chat-starter:focus-within .agent-chat-starter__dismiss {
+  opacity: 1;
+}
+
+/* First paint only. The start screen is replaced by the transcript after the
+   first message, so this never re-runs mid-conversation. */
+@media (prefers-reduced-motion: no-preference) {
+  .agent-chat-start-screen__primary > *,
+  .agent-chat-starter {
+    animation: agent-chat-start-screen-enter var(--sigvelo-motion-duration-disclosure)
+      var(--sigvelo-ease-snappy) backwards;
+  }
+
+  .agent-chat-start-screen__primary > *:nth-child(2),
+  .agent-chat-starter:nth-child(2) {
+    animation-delay: calc(var(--sigvelo-motion-stagger-step) * 1);
+  }
+
+  .agent-chat-start-screen__content > *:nth-child(3),
+  .agent-chat-starter:nth-child(3) {
+    animation-delay: calc(var(--sigvelo-motion-stagger-step) * 2);
+  }
+
+  .agent-chat-starter:nth-child(4) {
+    animation-delay: calc(var(--sigvelo-motion-stagger-step) * 3);
+  }
+
+  .agent-chat-starter:nth-child(n + 5) {
+    animation-delay: calc(var(--sigvelo-motion-stagger-step) * 4);
+  }
+}
+
+@keyframes agent-chat-start-screen-enter {
+  from {
+    opacity: 0;
+    translate: 0 var(--sigvelo-motion-distance-md);
+  }
+}
+
+/*
+ * Once there is something in the composer, the screen quiets around it instead
+ * of moving it: the heading slides down behind the composer and the starters
+ * fade, while the composer itself holds the position the caret is already in.
+ *
+ * Both keep their grid tracks. Collapsing either would re-centre the block and
+ * pull the textarea out from under the caret mid-sentence, which is the whole
+ * reason this is not a transition on the container.
+ *
+ * `:has()` reads the composer's own text, so nothing has to be lifted into
+ * React state — AgentChat never sees the input value, and this way it does not
+ * need to.
+ */
+.agent-chat-start-screen__heading,
+.agent-chat-start-screen__starters {
+  transition:
+    opacity var(--sigvelo-motion-duration-disclosure) var(--sigvelo-ease-snappy),
+    translate var(--sigvelo-motion-duration-disclosure) var(--sigvelo-ease-snappy),
+    visibility var(--sigvelo-motion-duration-disclosure);
+}
+
+.agent-chat-start-screen__content:has(textarea:not(:placeholder-shown))
+  .agent-chat-start-screen__heading {
+  opacity: 0;
+  translate: 0 var(--sigvelo-motion-distance-md);
+}
+
+/* Starters are buttons, so fading them is not enough — invisible controls that
+   still take a click or a Tab stop are worse than visible ones. */
+.agent-chat-start-screen__content:has(textarea:not(:placeholder-shown))
+  .agent-chat-start-screen__starters {
+  visibility: hidden;
+  opacity: 0;
+}
+
+/* The composer floats above the transcript, but its dock remains part of the
+   transcript plane. Keep the underlay on the owning surface token so light
+   and dark themes meet without a visible horizontal seam. */
 .agent-chat__composer {
   isolation: isolate;
   position: absolute;
   inset-inline: 0;
   inset-block-end: 0;
-  padding: var(--sigvelo-spacing-2);
-  padding-block-start: var(--sigvelo-spacing-4);
-  background: linear-gradient(
-    to top,
-    var(--sigvelo-color-surface) calc(100% - var(--sigvelo-spacing-4)),
-    transparent
-  );
+  padding: 0 var(--sigvelo-spacing-6) var(--sigvelo-spacing-6);
+}
+
+.agent-chat__composer::after {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  content: "";
+  pointer-events: none;
+  background-color: var(--sigvelo-color-surface);
 }
 
 .agent-chat__composer > .prompt-input {
   z-index: 1;
   inline-size: min(100%, var(--agent-chat-content-max-inline-size));
   margin-inline: auto;
+  padding-block: var(--sigvelo-spacing-3);
 }
 
 /* Transient status pill between transcript and composer (recovery, errors). */
@@ -81,30 +303,21 @@
 }
 
 .agent-chat__queued {
-  --agent-chat-queued-underlap: var(--sigvelo-spacing-3);
-
   position: relative;
   z-index: 0;
   inline-size: calc(
-    min(100%, var(--agent-chat-content-max-inline-size)) - var(--sigvelo-spacing-8) -
-      var(--sigvelo-spacing-2)
+    min(100%, var(--agent-chat-content-max-inline-size)) - var(--sigvelo-spacing-10)
   );
   margin-inline: auto;
-  margin-block-end: calc(-1 * var(--agent-chat-queued-underlap));
-  overflow: hidden;
-  border: var(--sigvelo-border-width) var(--sigvelo-border-style)
-    var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-xl);
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
 }
 
 .agent-chat__queued-list {
+  flex: 1;
   display: grid;
   gap: var(--sigvelo-border-width);
+  min-inline-size: 0;
   margin: 0;
-  padding-block-start: calc(var(--sigvelo-spacing-0-5) + var(--sigvelo-border-width));
-  padding-block-end: calc(var(--sigvelo-spacing-0-5) + var(--agent-chat-queued-underlap));
-  padding-inline: 0;
+  padding: 0;
   list-style: none;
 }
 
@@ -127,50 +340,23 @@
   color: var(--sigvelo-color-text-muted);
 }
 
-.agent-chat__queued-indicator svg,
-.agent-chat__queued-action svg {
+.agent-chat__queued-indicator svg {
   inline-size: var(--sigvelo-text-sm);
   block-size: var(--sigvelo-text-sm);
 }
 
 .agent-chat__queued-action {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--sigvelo-spacing-1-5);
-  min-block-size: var(--sigvelo-spacing-6);
-  padding-inline: var(--sigvelo-spacing-2);
-  border: 0;
-  border-radius: var(--sigvelo-radius-md);
-  background: transparent;
-  color: color-mix(in oklab, var(--sigvelo-color-text-muted), var(--sigvelo-color-text) 12%);
-  font: inherit;
-  cursor: pointer;
-}
-
-.agent-chat__queued-action:hover {
-  color: var(--sigvelo-color-text);
-  background-color: color-mix(in oklab, transparent, var(--sigvelo-color-text) 5%);
-}
-
-.agent-chat__queued-action:focus-visible {
-  outline: none;
-  box-shadow: var(--sigvelo-recipe-focus-shadow-subtle);
-}
-
-.agent-chat__queued-remove {
-  min-inline-size: var(--sigvelo-spacing-6);
-  padding-inline: 0;
+  flex: none;
+  font-weight: var(--sigvelo-font-weight-normal);
 }
 
 @media (any-pointer: coarse) {
-  .agent-chat__queued-message,
-  .agent-chat__queued-action {
-    min-block-size: var(--sigvelo-control-height-xl);
+  .agent-chat-starter__dismiss {
+    opacity: 1;
   }
 
-  .agent-chat__queued-remove {
-    min-inline-size: var(--sigvelo-control-height-xl);
+  .agent-chat__queued-message {
+    min-block-size: var(--sigvelo-control-height-xl);
   }
 }
 
@@ -211,7 +397,55 @@
 }
 
 @media (forced-colors: active) {
+  .agent-chat-starter:hover,
+  .agent-chat-starter:focus-within {
+    outline: var(--sigvelo-border-width) solid CanvasText;
+  }
+
+  .agent-chat-starter__dismiss {
+    opacity: 1;
+  }
+
   .agent-chat__turn-error {
     border: var(--sigvelo-focus-width) solid CanvasText;
   }
 }
+
+/* Sized against the chat's own box, not the viewport: this component is as
+   likely to be a 320px browser side panel as a full window, and the viewport
+   says nothing about which. Height still comes from the viewport — a container
+   cannot query its own block size without inline-size collapsing with it.
+
+   Narrowness is not a reason to abandon centring. A browser side panel is the
+   narrowest surface this renders in and one of the tallest, so keying
+   alignment off width top-aligned the start screen in a pane with hundreds of
+   spare pixels under it. Only the height query below drops the centring, and
+   only where there is genuinely no room for it. */
+@container agent-chat (width <= 36rem) {
+  .agent-chat-start-screen__content {
+    padding-block: var(--sigvelo-spacing-5);
+  }
+
+  .agent-chat-start-screen__heading {
+    font-size: var(--sigvelo-text-2xl);
+  }
+
+  .agent-chat-starter__action {
+    font-size: var(--sigvelo-text-sm);
+  }
+}
+
+@media (max-height: 40rem) {
+  .agent-chat-start-screen__content {
+    grid-template-rows: auto auto;
+    padding-block: var(--sigvelo-spacing-5);
+  }
+
+  .agent-chat-start-screen__primary {
+    grid-row: 1;
+  }
+
+  .agent-chat-start-screen__starters {
+    grid-row: 2;
+  }
+}

package/dist/styles/agent-connection.css

@@ -27,7 +27,7 @@
 
 .agent-connect__title-group {
   display: grid;
-  gap: 0.2rem;
+  gap: var(--sigvelo-spacing-1);
   min-inline-size: 0;
 }
 
@@ -45,7 +45,7 @@
   margin: 0;
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-compact);
-  line-height: 1.35;
+  line-height: var(--sigvelo-leading-snug);
   text-wrap: pretty;
 }
 
@@ -66,9 +66,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-block-size: 1.75rem;
+  min-block-size: var(--sigvelo-spacing-7);
   min-inline-size: 0;
-  padding: 0 0.45rem;
+  padding: 0 var(--sigvelo-spacing-2);
   border: 0;
   border-radius: var(--sigvelo-radius-sm);
   background: transparent;
@@ -77,7 +77,7 @@
   font: inherit;
   font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: 1.15;
+  line-height: var(--sigvelo-leading-tight);
   overflow-wrap: anywhere;
   text-align: center;
 }
@@ -93,7 +93,7 @@
 
 @media (pointer: coarse) {
   .agent-connect__target {
-    min-block-size: 2.5rem;
+    min-block-size: var(--sigvelo-spacing-10);
     padding-inline: var(--sigvelo-spacing-3);
   }
 }
@@ -113,8 +113,8 @@
   background: var(--sigvelo-color-surface);
   color: var(--sigvelo-color-text);
   box-shadow:
-    var(--sigvelo-shadow-xs),
-    inset 0 0 0 1px var(--sigvelo-color-primary-border-subtle);
+    var(--sigvelo-elevation-raised),
+    inset 0 0 0 var(--sigvelo-border-width) var(--sigvelo-color-primary-border-subtle);
 }
 
 .agent-connect .code-block__container {

package/dist/styles/alert-dialog.css

@@ -1,24 +1,9 @@
-.alert-dialog__trigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  padding: 0;
-  margin: 0;
-  cursor: pointer;
-  font: inherit;
-  color: inherit;
-}
-
-.alert-dialog__trigger:focus-visible {
-  outline: none;
-  box-shadow: var(--sigvelo-recipe-focus-shadow);
-}
-
+/* Matches .dialog__backdrop, including why one 8px radius is the affordable
+   version of this effect. */
 .alert-dialog__backdrop {
   background-color: var(--sigvelo-color-backdrop);
-  z-index: 50;
+  backdrop-filter: var(--sigvelo-glass-filter);
+  z-index: var(--sigvelo-z-overlay);
 }
 
 .alert-dialog__popup {
@@ -28,7 +13,7 @@
   inset-block-start: 50%;
   inset-inline-start: 50%;
   translate: -50% -50%;
-  z-index: 50;
+  z-index: var(--sigvelo-z-overlay);
   inline-size: calc(100% - var(--sigvelo-control-height-sm));
   max-inline-size: 28rem;
   max-block-size: calc(100dvb - var(--sigvelo-control-height-sm));

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);
 }
@@ -81,10 +80,10 @@
 
 @media (any-pointer: coarse) {
   .app-top-bar__button {
-    inline-size: 2.75rem;
-    min-inline-size: 2.75rem;
-    block-size: 2.75rem;
-    min-block-size: 2.75rem;
+    inline-size: var(--sigvelo-spacing-11);
+    min-inline-size: var(--sigvelo-spacing-11);
+    block-size: var(--sigvelo-spacing-11);
+    min-block-size: var(--sigvelo-spacing-11);
   }
 }
 

package/dist/styles/approval.css

@@ -12,7 +12,7 @@
   display: flex;
   align-items: baseline;
   gap: var(--sigvelo-spacing-2);
-  line-height: 1.4;
+  line-height: var(--sigvelo-leading-snug);
 }
 
 .approval__question {
@@ -159,12 +159,6 @@
   gap: var(--sigvelo-spacing-1-5);
 }
 
-.approval__kbd {
-  font-family: inherit;
-  font-size: 0.75em;
-  opacity: 0.75;
-}
-
 .approval__status:not(.sigvelo-visually-hidden) {
   color: var(--sigvelo-color-danger-text);
   font-size: var(--sigvelo-text-xs);

package/dist/styles/artifact.css

@@ -5,9 +5,9 @@
   font-family: inherit;
   color: var(--sigvelo-color-text);
   /* Shadow-led elevation: no perimeter border */
-  background-color: var(--sigvelo-color-surface);
-  border-radius: var(--sigvelo-radius-lg, var(--sigvelo-radius-md));
-  box-shadow: var(--sigvelo-shadow-sm);
+  background-color: var(--sigvelo-color-surface-raised);
+  border-radius: var(--sigvelo-radius-lg);
+  box-shadow: var(--sigvelo-elevation-raised);
   overflow: hidden;
 }
 
@@ -41,7 +41,7 @@
   margin-block-start: var(--sigvelo-spacing-0-5);
   font-size: var(--sigvelo-text-compact);
   color: var(--sigvelo-color-text-muted);
-  line-height: 1.4;
+  line-height: var(--sigvelo-leading-snug);
   overflow-wrap: anywhere;
   text-wrap: pretty;
 }