@mcp-b/react-components 0.44.1 → 0.46.0

package/dist/styles/agent-chat.css

@@ -158,10 +158,12 @@
 /* The first-turn utility tray owns its buttons' treatment so every host gets
    the same quiet look without per-app classes. Hug the actions — a short
    viewport (Storybook addons, a short side panel) used to stretch this into
-   a vacant slab. Space-between only when there are three slots to fill. */
+   a vacant slab. Space-between only when there are three slots to fill.
+   Compact control tokens keep this strip on the same ramp as the composer. */
 .agent-chat-start-screen__composer-tray {
   align-self: start;
   justify-content: start;
+  min-block-size: 0;
 }
 
 .agent-chat-start-screen__composer-tray:has(> :nth-child(3):last-child) {
@@ -169,32 +171,29 @@
 }
 
 .agent-chat-start-screen__composer-tray > .button {
+  --sigvelo-recipe-button-height: var(--sigvelo-density-compact-control-height);
+  --sigvelo-recipe-button-font-size: var(--sigvelo-density-compact-control-font-size);
+  --sigvelo-recipe-button-icon-size: var(--sigvelo-density-compact-control-icon-size);
+
   min-inline-size: 0;
-  gap: var(--sigvelo-spacing-1-5);
-  padding-inline: var(--sigvelo-spacing-2);
+  gap: var(--sigvelo-density-compact-control-gap);
+  padding-inline: var(--sigvelo-density-compact-control-padding-inline);
   color: inherit;
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-density-compact-control-font-size);
   font-weight: var(--sigvelo-font-weight-normal);
 }
 
-.agent-chat-start-screen__composer-tray > .button:has(.app-icon-stack) {
-  gap: var(--sigvelo-spacing-3);
-  padding-inline-start: calc(var(--sigvelo-spacing-2) + var(--sigvelo-border-width));
-}
-
-.agent-chat-start-screen__composer-tray > .button:first-child {
-  padding-inline: var(--sigvelo-spacing-2-5);
+.agent-chat-start-screen__composer-tray > .button > svg {
+  flex: none;
 }
 
-.agent-chat-start-screen__composer-tray > .button svg {
-  flex: none;
-  inline-size: var(--sigvelo-control-icon-size-md);
-  block-size: var(--sigvelo-control-icon-size-md);
+.agent-chat-start-screen__composer-tray .app-icon {
+  --sigvelo-recipe-app-icon-size: var(--sigvelo-spacing-5);
 }
 
-.agent-chat-start-screen__composer-tray > .button:first-child svg {
-  inline-size: var(--sigvelo-control-icon-size-lg);
-  block-size: var(--sigvelo-control-icon-size-lg);
+.agent-chat-start-screen__composer-tray .app-icon :is(svg, img) {
+  inline-size: 100%;
+  block-size: 100%;
 }
 
 .agent-chat-start-screen__composer-tray > .button > span:not(.app-icon-stack) {
@@ -276,6 +275,10 @@
   color: var(--sigvelo-color-primary-text);
 }
 
+.agent-chat-starter__icon :is(img, .app-icon__image) {
+  color: unset;
+}
+
 .agent-chat-starter__label {
   flex: 1;
   min-inline-size: 0;

package/dist/styles/agent-event.css

@@ -0,0 +1,14 @@
+/* A background run's report or completion notice in the transcript: an
+   activity row named for the run, expandable to the words the model
+   received. Provenance shows in the row, never as a user bubble. */
+
+/* The Nanite stands in for an activity icon, so it takes that slot's measure
+   instead of the mark's own default. */
+.agent-event .activity__item-icon .nanite-mark {
+  inline-size: 1rem;
+  block-size: 1.2rem;
+}
+
+.agent-event[data-status="error"] .activity__header-action {
+  color: var(--sigvelo-color-danger-text);
+}

package/dist/styles/app-icon.css

@@ -39,8 +39,24 @@
   --sigvelo-recipe-app-icon-size: var(--sigvelo-spacing-12);
 }
 
+/* Inset scales with the tile so xs/sm marks stay in the 14–16px band instead of
+   collapsing into a 4px dot under a fixed 8px pad. */
 .app-icon[data-app-icon-variant="surface"],
 .app-icon[data-app-icon-variant="contrast"] {
+  padding: var(--sigvelo-spacing-1);
+}
+
+.app-icon[data-app-icon-size="xs"][data-app-icon-variant="surface"],
+.app-icon[data-app-icon-size="xs"][data-app-icon-variant="contrast"] {
+  padding: var(--sigvelo-spacing-0-5);
+}
+
+.app-icon[data-app-icon-size="md"][data-app-icon-variant="surface"],
+.app-icon[data-app-icon-size="md"][data-app-icon-variant="contrast"],
+.app-icon[data-app-icon-size="lg"][data-app-icon-variant="surface"],
+.app-icon[data-app-icon-size="lg"][data-app-icon-variant="contrast"],
+.app-icon[data-app-icon-size="xl"][data-app-icon-variant="surface"],
+.app-icon[data-app-icon-size="xl"][data-app-icon-variant="contrast"] {
   padding: var(--sigvelo-spacing-2);
 }
 
@@ -51,6 +67,11 @@
   color: var(--sigvelo-color-primary-text-on-bg);
 }
 
+/* Plugin artwork already has its own fills; do not tint it with the tile. */
+.app-icon[data-app-icon-variant="contrast"] :is(img, .app-icon__image) {
+  color: unset;
+}
+
 /* Full-bleed artwork brings its own edges; a hairline ring around a flat
    transparent mark would outline an invisible box, so no variant draws one. */
 

package/dist/styles/avatar.css

@@ -80,6 +80,7 @@
 }
 
 .avatar-group .avatar {
+  background-color: var(--sigvelo-color-neutral-bg-muted);
   margin-inline-start: -0.5rem;
   border: 2px solid var(--sigvelo-color-canvas);
 }
@@ -105,7 +106,7 @@
   flex-shrink: 0;
   margin-inline-start: -0.5rem;
   padding-inline: var(--sigvelo-spacing-1-5);
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  background-color: var(--sigvelo-color-neutral-bg-muted);
   border: 2px solid var(--sigvelo-color-canvas);
   border-radius: var(--sigvelo-radius-full);
   color: var(--sigvelo-color-text-muted);

package/dist/styles/base.css

@@ -44,7 +44,10 @@
   .empty-state__icon,
   .inline-citation__trigger,
   .media-preview-card__play,
+  .manager-office__analytics-series-copy .manager-office__analytics-average,
   .manager-office__unread-dot,
+  .manager-office__employee-link[aria-current="page"]::after,
+  .manager-office__employee-nav::-webkit-scrollbar-thumb,
   .menu__radio-indicator::before,
   .message-scroller__button,
   .plan-summary__trigger,
@@ -72,6 +75,7 @@
   .switch__thumb,
   .task__item::before,
   .test-results__test-status,
+  .think-full-app__resizer::before,
   .think-routine-library__routine-status,
   [data-slot="meter-indicator"],
   [data-slot="meter-track"],

package/dist/styles/brand-marks.css

@@ -0,0 +1,22 @@
+/*
+ * Third-party / provider marks. Official brand colors live on the artwork
+ * (or this file for single-fill Discord), not in the Sigvelo token palette.
+ * Lucide chrome stays currentColor via inherited text color.
+ */
+.sigvelo-brand-mark--colorful {
+  color: unset;
+}
+
+.sigvelo-brand-mark--discord {
+  color: #5865f2;
+}
+
+@media (forced-colors: active) {
+  .sigvelo-brand-mark--colorful {
+    forced-color-adjust: none;
+  }
+
+  .sigvelo-brand-mark--discord {
+    color: CanvasText;
+  }
+}

package/dist/styles/button.css

@@ -81,6 +81,8 @@
 }
 
 .button--normal.button--destructive {
+  --sigvelo-recipe-button-radius: var(--sigvelo-radius-full);
+
   background-color: var(--sigvelo-color-danger-bg);
   color: var(--sigvelo-color-danger-text-on-bg);
 }
@@ -148,6 +150,14 @@
   background-color: color-mix(in oklab, transparent, var(--sigvelo-color-text) 5%);
 }
 
+.button--ghost.button--destructive {
+  color: var(--sigvelo-color-danger-text);
+}
+
+.button--ghost.button--destructive:hover:not([data-disabled]) {
+  background-color: color-mix(in oklab, transparent, var(--sigvelo-color-danger-bg) 12.5%);
+}
+
 /* Link appearance */
 
 .button--link {

package/dist/styles/composer-link.css

@@ -0,0 +1,99 @@
+.composer-link {
+  --composer-link-fill: var(
+    --composer-link-color,
+    light-dark(var(--sigvelo-color-primary-600), var(--sigvelo-color-primary-400))
+  );
+
+  display: inline;
+  max-inline-size: 100%;
+  /* Official mark hexes (Linear 5E6AD2, Gmail EA4335) miss 4.5:1 on the user
+     bubble. Mix toward --sigvelo-color-text so light darkens and dark lightens
+     while the hue stays the brand. */
+  color: color-mix(in oklab, var(--composer-link-fill) 80%, var(--sigvelo-color-text));
+  text-decoration: none;
+  font: inherit;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: inherit;
+  white-space: nowrap;
+  cursor: default;
+}
+
+.composer-link:hover {
+  color: color-mix(in oklab, var(--composer-link-fill) 70%, var(--sigvelo-color-text));
+  text-decoration: none;
+}
+
+.composer-link:focus-visible {
+  outline: var(--sigvelo-focus-ring);
+  outline-offset: 2px;
+  border-radius: var(--sigvelo-radius-sm);
+}
+
+.composer-link__icon {
+  display: inline-block;
+  /* Larger than cap-height, under the 1.5 line-height so Linear tiles and
+     Lucide glyphs share one box. */
+  inline-size: 1.2em;
+  block-size: 1.2em;
+  margin-inline-end: var(--sigvelo-spacing-1);
+  vertical-align: -0.25em;
+  overflow: visible;
+  color: inherit;
+}
+
+.composer-link__icon :is(svg, img, .app-icon),
+.composer-link__icon.app-icon {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.composer-link__icon :is(img, .app-icon__image) {
+  object-fit: cover;
+}
+
+/* Nested AppIcon tiles add radius, shadow, and inset — flatten so the mark
+   fills the icon box. */
+.composer-link:not(.prompt-input__tab-item) .app-icon {
+  --sigvelo-recipe-app-icon-size: 100%;
+  padding: 0;
+  border-radius: 0;
+  overflow: visible;
+  filter: none;
+}
+
+.composer-link__label {
+  min-inline-size: 0;
+  font-weight: inherit;
+}
+
+.prompt-input__textarea .composer-link {
+  pointer-events: none;
+}
+
+.prompt-input__tab-item.composer-link,
+.prompt-input__tab-item.composer-link:hover {
+  display: flex;
+  color: inherit;
+  text-decoration: none;
+  font-weight: inherit;
+  margin-inline: 0;
+}
+
+.prompt-input__tab-item .composer-link__icon {
+  display: inline-flex;
+  margin-inline-end: 0;
+  vertical-align: unset;
+}
+
+@media (forced-colors: active) {
+  .composer-link {
+    color: LinkText;
+    forced-color-adjust: none;
+  }
+
+  .composer-link:hover,
+  .composer-link:focus-visible {
+    color: LinkText;
+  }
+}

package/dist/styles/connected-app-card.css

@@ -15,6 +15,15 @@
   align-items: center;
 }
 
+.connected-app-card__icon > :is(svg, img) {
+  inline-size: var(--sigvelo-control-icon-size-md);
+  block-size: var(--sigvelo-control-icon-size-md);
+}
+
+.connected-app-card__icon :is(img, .app-icon__image) {
+  color: unset;
+}
+
 .connected-app-card__status {
   display: inline-flex;
   align-items: center;

package/dist/styles/github-motion-mark.css

@@ -5,12 +5,13 @@
   place-items: center;
   inline-size: 1.625em;
   block-size: 1.625em;
-  color: currentColor;
+  color: inherit;
   line-height: 0;
 }
 
 .github-motion-mark svg {
   grid-area: 1 / 1;
+  fill: currentColor;
   transform-origin: 50% 50%;
   animation: github-motion-mark-breathe 2.6s ease-in-out infinite;
 }
@@ -89,3 +90,9 @@
     animation: none;
   }
 }
+
+@media (forced-colors: active) {
+  .github-motion-mark {
+    color: CanvasText;
+  }
+}

package/dist/styles/index.css

@@ -18,6 +18,7 @@
 @import "./agent-attention.css" layer(components);
 @import "./agent-connection.css" layer(components);
 @import "./agent-chat.css" layer(components);
+@import "./agent-event.css" layer(components);
 @import "./approval.css" layer(components);
 @import "./alert-dialog.css" layer(components);
 @import "./attachment-preview.css" layer(components);
@@ -39,6 +40,7 @@
 @import "./fieldset.css" layer(components);
 @import "./form.css" layer(components);
 @import "./github-motion-mark.css" layer(components);
+@import "./brand-marks.css" layer(components);
 @import "./input.css" layer(components);
 @import "./kbd.css" layer(components);
 @import "./label.css" layer(components);
@@ -106,6 +108,7 @@
 @import "./chatgpt-sign-in-screen.css" layer(components);
 @import "./plan.css" layer(components);
 @import "./prompt-input.css" layer(components);
+@import "./composer-link.css" layer(components);
 @import "./queue.css" layer(components);
 @import "./reasoning.css" layer(components);
 @import "./resizable-side-panel.css" layer(components);