@mcp-b/react-components 0.21.0 → 0.23.0

package/dist/styles/action-guide.css

@@ -0,0 +1,128 @@
+.action-guide {
+  container: action-guide / inline-size;
+  display: grid;
+  gap: var(--sigvelo-spacing-8);
+  inline-size: 100%;
+  padding: var(--sigvelo-spacing-2) var(--sigvelo-spacing-2) var(--sigvelo-spacing-8);
+  color: var(--sigvelo-color-text);
+}
+
+.action-guide__header {
+  display: grid;
+  gap: var(--sigvelo-spacing-4);
+}
+
+.action-guide__title,
+.action-guide__description,
+.action-guide__section-title {
+  margin: 0;
+  font-size: var(--sigvelo-text-base);
+}
+
+.action-guide__title,
+.action-guide__section-title {
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-text-lg-leading);
+}
+
+.action-guide__description {
+  max-inline-size: var(--sigvelo-measure-prose);
+  line-height: var(--sigvelo-text-lg-leading);
+}
+
+.action-guide__section {
+  display: grid;
+  gap: var(--sigvelo-spacing-4);
+}
+
+.action-guide__list {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--sigvelo-spacing-3);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.action-guide__list[data-layout="compact"] {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.action-guide__list[data-layout="list"] {
+  gap: 0;
+}
+
+.action-guide__item,
+.action-guide__action {
+  min-inline-size: 0;
+}
+
+.action-guide__action {
+  inline-size: 100%;
+  justify-content: flex-start;
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-base);
+  font-weight: var(--sigvelo-font-weight-normal);
+  letter-spacing: var(--sigvelo-tracking-tight);
+  line-height: var(--sigvelo-text-base-leading);
+  white-space: normal;
+  text-align: start;
+}
+
+.action-guide__action-icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--sigvelo-color-primary-text);
+}
+
+.action-guide__action-icon svg {
+  inline-size: var(--sigvelo-control-icon-size-md);
+  block-size: var(--sigvelo-control-icon-size-md);
+}
+
+.action-guide__action-label {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+.action-guide__list[data-layout="compact"] .action-guide__action {
+  inline-size: auto;
+  max-inline-size: 100%;
+  min-block-size: var(--sigvelo-spacing-12);
+  gap: var(--sigvelo-spacing-3);
+  padding-inline: var(--sigvelo-spacing-4);
+  border-radius: var(--sigvelo-radius-lg);
+}
+
+.action-guide__list[data-layout="cards"] .action-guide__action {
+  flex-direction: column;
+  align-items: flex-start;
+  min-block-size: calc(var(--sigvelo-spacing-24) + var(--sigvelo-spacing-2));
+  gap: var(--sigvelo-spacing-4);
+  padding: var(--sigvelo-spacing-4);
+  border-radius: var(--sigvelo-radius-lg);
+}
+
+.action-guide__list[data-layout="cards"] .action-guide__action-label {
+  margin-block-start: auto;
+}
+
+.action-guide__list[data-layout="list"] .action-guide__action {
+  min-block-size: calc(var(--sigvelo-control-height-xl) + var(--sigvelo-spacing-2));
+  gap: var(--sigvelo-spacing-3);
+  padding-inline: var(--sigvelo-spacing-2-5);
+  border-radius: var(--sigvelo-radius-lg);
+}
+
+@container action-guide (width > 30rem) {
+  .action-guide__list[data-layout="cards"] {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (forced-colors: active) {
+  .action-guide__action-icon {
+    color: ButtonText;
+  }
+}

package/dist/styles/agent-activity-preview-overlay.css

@@ -3,6 +3,7 @@
  * owns placement, top-layer behavior, containment, and pointer-event policy.
  */
 @import "./activity-header.css";
+@import "./app-icon.css";
 @import "./agent-activity-preview.css";
 
 :host {
@@ -17,7 +18,7 @@
    * token the imported stylesheets read has to be restated here. A token that
    * is missing does not fall back to the page value — it resolves to nothing
    * and the declaration is dropped, which is silent. Keep this list in step
-   * with what agent-activity-preview.css and activity-header.css actually use.
+   * with what the imported component stylesheets actually use.
    *
    * These are px, not rem, and that is the point. This bundle renders in an
    * active-tab content script, and `rem` resolves against the host page's root
@@ -30,14 +31,22 @@
   --sigvelo-spacing-1-5: 6px;
   --sigvelo-spacing-2: 8px;
   --sigvelo-spacing-3: 12px;
+  --sigvelo-spacing-4: 16px;
+  --sigvelo-spacing-5: 20px;
+  --sigvelo-spacing-6: 24px;
   --sigvelo-spacing-8: 32px;
+  --sigvelo-spacing-10: 40px;
+  --sigvelo-spacing-12: 48px;
+  --sigvelo-spacing-14: 56px;
   --sigvelo-radius-md: 8px;
   --sigvelo-radius-lg: 12px;
   --sigvelo-radius-xs: 3px;
   --sigvelo-radius-full: 9999px;
   --sigvelo-border-style: solid;
+  --sigvelo-border-width-hairline: 0.5px;
   --sigvelo-border-width: 1px;
   --sigvelo-text-compact: 13px;
+  --sigvelo-text-xs: 12px;
   --sigvelo-font-weight-normal: 400;
   --sigvelo-font-weight-semibold: 500;
   --sigvelo-control-height-sm: 32px;
@@ -51,9 +60,12 @@
   --sigvelo-ease-standard: cubic-bezier(0.2, 0, 0, 1);
   --sigvelo-color-surface: Canvas;
   --sigvelo-color-surface-raised: Canvas;
+  --sigvelo-color-shadow: black;
   --sigvelo-color-text: CanvasText;
   --sigvelo-color-text-muted: GrayText;
   --sigvelo-color-primary-text: LinkText;
+  --sigvelo-color-primary-bg: CanvasText;
+  --sigvelo-color-primary-text-on-bg: Canvas;
   --sigvelo-color-warning-text: #8a4b00;
   --sigvelo-color-neutral-bg-subtle: color-mix(in oklab, CanvasText 7%, Canvas);
   --sigvelo-elevation-raised:

package/dist/styles/agent-activity-preview.css

@@ -33,17 +33,10 @@
   z-index: 1;
   inset-block-start: calc(-1 * var(--sigvelo-spacing-2));
   inset-inline-end: var(--sigvelo-spacing-1);
-  display: grid;
-  place-items: center;
-  width: var(--sigvelo-control-height-sm);
-  height: var(--sigvelo-control-height-sm);
-  padding: 0;
-  border: 0;
   border-radius: var(--sigvelo-radius-full);
   color: var(--sigvelo-color-text-muted);
   background: var(--sigvelo-color-surface-raised);
   box-shadow: var(--sigvelo-elevation-raised);
-  cursor: pointer;
   opacity: 0;
   scale: 0.92;
   transition:
@@ -59,22 +52,17 @@
   scale: 1;
 }
 
-.agent-activity-preview__dismiss:hover {
+.agent-activity-preview__dismiss:hover:not([data-disabled]) {
   color: var(--sigvelo-color-text);
+  background: var(--sigvelo-color-surface-raised);
 }
 
-.agent-activity-preview__dismiss:focus-visible,
 .agent-activity-preview__row:focus-visible,
 .agent-activity-preview__file-action:focus-visible {
   outline: none;
   box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
-.agent-activity-preview__dismiss > svg {
-  width: var(--sigvelo-control-icon-size-sm);
-  height: var(--sigvelo-control-icon-size-sm);
-}
-
 .agent-activity-preview__list {
   display: grid;
   gap: var(--sigvelo-spacing-0-5);
@@ -163,24 +151,6 @@
   min-width: 1rem;
 }
 
-.agent-activity-preview__favicons {
-  display: flex;
-  align-items: center;
-  padding-inline-start: var(--sigvelo-spacing-1);
-}
-
-.agent-activity-preview__favicons img {
-  display: block;
-  width: var(--sigvelo-control-icon-size-lg);
-  height: var(--sigvelo-control-icon-size-lg);
-  /* Overlap the run of favicons by a quarter of a step. */
-  margin-inline-start: calc(-1 * var(--sigvelo-spacing-1));
-  border: 2px solid var(--sigvelo-color-surface-raised);
-  border-radius: var(--sigvelo-radius-full);
-  background: var(--sigvelo-color-surface-raised);
-  object-fit: contain;
-}
-
 .agent-activity-preview__trailing > svg {
   width: var(--sigvelo-control-icon-size-md);
   height: var(--sigvelo-control-icon-size-md);
@@ -233,8 +203,7 @@
 
   .agent-activity-preview__badge,
   .agent-activity-preview__dismiss,
-  .agent-activity-preview__file-action,
-  .agent-activity-preview__favicons img {
+  .agent-activity-preview__file-action {
     border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 }

package/dist/styles/agent-chat.css

@@ -26,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);
 }
@@ -54,40 +54,60 @@
 
 .agent-chat-start-screen__content {
   display: grid;
-  align-content: center;
-  gap: var(--sigvelo-spacing-6);
+  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: clamp(var(--sigvelo-text-2xl), 4vw, var(--sigvelo-text-3xl));
-  font-weight: var(--sigvelo-font-weight-semibold);
-  letter-spacing: var(--sigvelo-tracking-tight);
-  line-height: var(--sigvelo-leading-tight);
+  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__content > .agent-chat__composer {
+.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: rounder, and lifted further off the page. */
-.agent-chat-start-screen__content > .agent-chat__composer > .prompt-input {
+   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%;
-  border-radius: var(--sigvelo-radius-3xl);
 }
 
 .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 {
@@ -126,6 +146,7 @@
   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);
@@ -135,8 +156,9 @@
   background: transparent;
 }
 
-/* Resting text is quiet so the heading and composer lead; the row a pointer
-   or keyboard is actually on resolves to full-strength text. */
+/* 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);
@@ -172,13 +194,13 @@
 /* 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__content > *,
+  .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__content > *:nth-child(2),
+  .agent-chat-start-screen__primary > *:nth-child(2),
   .agent-chat-starter:nth-child(2) {
     animation-delay: calc(var(--sigvelo-motion-stagger-step) * 1);
   }
@@ -204,26 +226,66 @@
   }
 }
 
-/* Floating over the transcript: solid behind the controls, fading out
-   through the top padding so content slides under instead of hitting a bar. */
+/*
+ * 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). */
@@ -241,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;
 }
 
@@ -287,40 +340,14 @@
   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) {
@@ -328,14 +355,9 @@
     opacity: 1;
   }
 
-  .agent-chat__queued-message,
-  .agent-chat__queued-action {
+  .agent-chat__queued-message {
     min-block-size: var(--sigvelo-control-height-xl);
   }
-
-  .agent-chat__queued-remove {
-    min-inline-size: var(--sigvelo-control-height-xl);
-  }
 }
 
 .agent-chat__notice[data-tone="danger"],
@@ -392,10 +414,15 @@
 /* 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. */
+   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 {
-    align-content: start;
     padding-block: var(--sigvelo-spacing-5);
   }
 
@@ -410,7 +437,15 @@
 
 @media (max-height: 40rem) {
   .agent-chat-start-screen__content {
-    align-content: start;
+    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/alert-dialog.css

@@ -1,21 +1,3 @@
-.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 {