@mcp-b/react-components 0.45.0 → 0.46.1

package/dist/{mcp-server-SD_S-IpB.js → mcp-server-7NR24ASj.js}

@@ -1,4 +1,4 @@
-import { getMcpServerEntry, getMcpServerIconSrc, getMcpServerRuntimeState } from "./utils/mcp-server-catalog.js";
+import { DEFAULT_MCP_SERVER_CARDS, getMcpServerEntry, getMcpServerIconSrc, getMcpServerRuntimeState } from "./utils/mcp-server-catalog.js";
 import { AppIcon } from "./components/foundations/AppIcon.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/_internal/mcp-server.tsx
@@ -25,8 +25,35 @@ function getMcpServerProjection(card, mcp, serverId) {
 		serverId: entry?.[0]
 	};
 }
+/** Match a live MCP entry or channel name to a catalog card that already has a brand mark. */
+function findCatalogMcpServerCard(query) {
+	const id = query.id?.trim().toLowerCase();
+	const name = query.name?.trim().toLowerCase();
+	let hostname;
+	if (query.url) try {
+		hostname = new URL(query.url).hostname;
+	} catch {
+		hostname = void 0;
+	}
+	return DEFAULT_MCP_SERVER_CARDS.find((candidate) => {
+		if (!candidate.url) return false;
+		if (id && candidate.id === id) return true;
+		if (name && (candidate.name.toLowerCase() === name || candidate.id === name)) return true;
+		if (!hostname) return false;
+		try {
+			return new URL(candidate.url).hostname === hostname;
+		} catch {
+			return false;
+		}
+	});
+}
 function McpServerIcon({ server, size = "lg", variant }) {
-	const src = getMcpServerIconSrc(server);
+	const resolved = server.icon == null ? findCatalogMcpServerCard({
+		id: server.id,
+		name: server.name,
+		url: server.url
+	}) ?? server : server;
+	const src = getMcpServerIconSrc(resolved);
 	return /* @__PURE__ */ jsxs(AppIcon.Root, {
 		size,
 		variant,
@@ -35,8 +62,8 @@ function McpServerIcon({ server, size = "lg", variant }) {
 			alt: "",
 			fit: "contain",
 			src
-		}, src) : null, /* @__PURE__ */ jsx(AppIcon.Fallback, { children: server.name.slice(0, 1) })]
+		}, src) : null, /* @__PURE__ */ jsx(AppIcon.Fallback, { children: resolved.name.slice(0, 1) })]
 	});
 }
 //#endregion
-export { getMcpServerProjection as n, McpServerIcon as t };
+export { findCatalogMcpServerCard as n, getMcpServerProjection as r, McpServerIcon as t };

package/dist/{mcp-server-catalog-CCj2ItkV.d.ts → mcp-server-catalog-Cbu483Zb.d.ts}

@@ -271,7 +271,7 @@ declare const DCR_MCP_SERVER_CARDS: readonly [{
   readonly url: "https://mcp.miro.com/mcp";
   readonly description: "Work with boards and diagrams";
   readonly category: "Auto";
-  readonly icon: "https://cdn.simpleicons.org/miro/FFD02F";
+  readonly icon: "https://cdn.simpleicons.org/miro/050038";
 }, {
   readonly id: "monday";
   readonly name: "monday.com";
@@ -292,14 +292,14 @@ declare const DCR_MCP_SERVER_CARDS: readonly [{
   readonly url: "https://mcp.notion.com/mcp";
   readonly description: "Work across docs, wikis, and project notes";
   readonly category: "Auto";
-  readonly icon: "https://cdn.simpleicons.org/notion/A1A1AA";
+  readonly icon: "https://cdn.simpleicons.org/notion/000000";
 }, {
   readonly id: "paypal";
   readonly name: "PayPal";
   readonly url: "https://mcp.paypal.com/mcp";
   readonly description: "Use PayPal merchant tools";
   readonly category: "Auto";
-  readonly icon: "https://cdn.simpleicons.org/paypal/003087";
+  readonly icon: "https://cdn.simpleicons.org/paypal/002991";
 }, {
   readonly id: "postman";
   readonly name: "Postman";
@@ -313,7 +313,7 @@ declare const DCR_MCP_SERVER_CARDS: readonly [{
   readonly url: "https://mcp.railway.com";
   readonly description: "Manage Railway projects and services";
   readonly category: "Auto";
-  readonly icon: "https://cdn.simpleicons.org/railway/8957E5";
+  readonly icon: "https://cdn.simpleicons.org/railway/0B0D0E";
 }, {
   readonly id: "ramp";
   readonly name: "Ramp";
@@ -327,7 +327,7 @@ declare const DCR_MCP_SERVER_CARDS: readonly [{
   readonly url: "https://mcp.sentry.dev/mcp";
   readonly description: "Debug errors and inspect projects";
   readonly category: "Auto";
-  readonly icon: "https://cdn.simpleicons.org/sentry/8957E5";
+  readonly icon: "https://cdn.simpleicons.org/sentry/362D59";
 }, {
   readonly id: "square";
   readonly name: "Square";
@@ -348,14 +348,14 @@ declare const DCR_MCP_SERVER_CARDS: readonly [{
   readonly url: "https://mcp.supabase.com/mcp";
   readonly description: "Manage Supabase projects";
   readonly category: "Auto";
-  readonly icon: "https://cdn.simpleicons.org/supabase/3ECF8E";
+  readonly icon: "https://cdn.simpleicons.org/supabase/3FCF8E";
 }, {
   readonly id: "vercel";
   readonly name: "Vercel";
   readonly url: "https://mcp.vercel.com";
   readonly description: "Manage projects and deployments";
   readonly category: "Auto";
-  readonly icon: "https://cdn.simpleicons.org/vercel/A1A1AA";
+  readonly icon: "https://cdn.simpleicons.org/vercel/000000";
 }, {
   readonly id: "webflow";
   readonly name: "Webflow";
@@ -369,7 +369,7 @@ declare const DCR_MCP_SERVER_CARDS: readonly [{
   readonly url: "https://mcp.wix.com/mcp";
   readonly description: "Work with Wix sites and apps";
   readonly category: "Auto";
-  readonly icon: "https://cdn.simpleicons.org/wix/A1A1AA";
+  readonly icon: "https://cdn.simpleicons.org/wix/0C6EFC";
 }, {
   readonly id: "zapier";
   readonly name: "Zapier";
@@ -514,7 +514,7 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   readonly url: "https://chatmcp.googleapis.com/mcp/v1";
   readonly description: "Read spaces, memberships, and messages";
   readonly category: "Manual";
-  readonly icon: "https://cdn.simpleicons.org/googlechat/00AC47";
+  readonly icon: "https://cdn.simpleicons.org/googlechat/34A853";
   readonly manualSetup: {
     readonly auth: {
       readonly type: "manual_oauth_client";

package/dist/{provider-logos-zjZycgV6.js → provider-logos-DWYY8wNz.js}

@@ -1,15 +1,17 @@
+import { t as cx } from "./class-names-BiMDVpUo.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/_internal/provider-logos.tsx
-function Svg({ children, size = 16, ...props }) {
+function Svg({ children, size = 16, fill = "currentColor", className, ...props }) {
 	return /* @__PURE__ */ jsx("svg", {
 		width: size,
 		height: size,
 		viewBox: "0 0 24 24",
-		fill: "currentColor",
+		fill,
 		xmlns: "http://www.w3.org/2000/svg",
 		"aria-hidden": "true",
 		focusable: "false",
+		className: cx("sigvelo-brand-mark", className),
 		...props,
 		children
 	});
@@ -18,15 +20,38 @@ const OpenAILogo = (props) => /* @__PURE__ */ jsx(Svg, {
 	...props,
 	children: /* @__PURE__ */ jsx("path", { d: "M22.28 9.81a5.99 5.99 0 0 0-.52-4.91 6.05 6.05 0 0 0-6.52-2.9A6.05 6.05 0 0 0 10.58 0a6.05 6.05 0 0 0-5.77 4.18 5.99 5.99 0 0 0-4 2.9 6.05 6.05 0 0 0 .74 7.09 5.99 5.99 0 0 0 .52 4.91 6.05 6.05 0 0 0 6.52 2.9A5.99 5.99 0 0 0 13.25 24a6.05 6.05 0 0 0 5.77-4.19 5.99 5.99 0 0 0 4-2.9 6.05 6.05 0 0 0-.74-7.1ZM13.25 22.44a4.48 4.48 0 0 1-2.88-1.04l.14-.08 4.79-2.76a.78.78 0 0 0 .39-.68v-6.75l2.02 1.17c.02 0 .04.03.04.05v5.58a4.5 4.5 0 0 1-4.5 4.5ZM3.57 18.3a4.5 4.5 0 0 1-.54-3.03l.14.09 4.79 2.76a.78.78 0 0 0 .78 0l5.85-3.37v2.33c0 .02 0 .04-.03.06L9.72 19.94a4.5 4.5 0 0 1-6.15-1.64ZM2.31 7.88a4.48 4.48 0 0 1 2.35-1.97v5.69a.78.78 0 0 0 .39.67l5.83 3.36-2.02 1.17a.07.07 0 0 1-.07 0l-4.83-2.8A4.5 4.5 0 0 1 2.3 7.9Zm16.64 3.87L13.1 8.37l2.02-1.17c.02 0 .05-.01.07 0l4.83 2.8a4.5 4.5 0 0 1-.67 8.11V12.4a.77.77 0 0 0-.4-.66Zm2-3.03-.14-.09-4.78-2.78a.78.78 0 0 0-.79 0L9.4 9.25V6.92c0-.02 0-.04.02-.05l4.83-2.79a4.5 4.5 0 0 1 6.68 4.66Zm-12.68 4.17-2.02-1.17a.07.07 0 0 1-.04-.06V6.1a4.5 4.5 0 0 1 7.38-3.45l-.14.08L8.66 5.5a.78.78 0 0 0-.4.68v6.74Zm1.1-2.36 2.6-1.5 2.61 1.5v3l-2.6 1.5-2.6-1.5Z" })
 });
-const AnthropicLogo = (props) => /* @__PURE__ */ jsxs(Svg, {
+const AnthropicLogo = ({ className, ...props }) => /* @__PURE__ */ jsxs(Svg, {
+	className: cx("sigvelo-brand-mark--colorful", className),
+	fill: "#D97757",
 	...props,
 	children: [/* @__PURE__ */ jsx("path", { d: "M13.83 4H17.3L24 20h-3.47l-1.37-3.52h-7L10.82 20H7.36ZM13.25 13.58h4.8l-2.4-6.15Z" }), /* @__PURE__ */ jsx("path", { d: "M0 4h3.47l6.7 16H6.7Z" })]
 });
-const GoogleLogo = (props) => /* @__PURE__ */ jsx(Svg, {
+const GoogleLogo = ({ className, ...props }) => /* @__PURE__ */ jsxs(Svg, {
+	className: cx("sigvelo-brand-mark--colorful", className),
+	fill: "none",
 	...props,
-	children: /* @__PURE__ */ jsx("path", { d: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 2a8 8 0 0 1 5.34 2.05l-2.2 2.2A5 5 0 1 0 17 12.6h-5v-2.6h7.9A8 8 0 0 1 12 20 8 8 0 0 1 12 4Z" })
+	children: [
+		/* @__PURE__ */ jsx("path", {
+			fill: "#4285F4",
+			d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			fill: "#34A853",
+			d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			fill: "#FBBC05",
+			d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			fill: "#EA4335",
+			d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+		})
+	]
 });
-const MetaLogo = (props) => /* @__PURE__ */ jsx(Svg, {
+const MetaLogo = ({ className, ...props }) => /* @__PURE__ */ jsx(Svg, {
+	className: cx("sigvelo-brand-mark--colorful", className),
+	fill: "#0668E1",
 	...props,
 	children: /* @__PURE__ */ jsx("path", { d: "M2 12.5c0-3.5 1.8-6.5 4.4-6.5 1.8 0 3.2 1.3 4.9 3.8 2.2 3.2 3.3 5 4.6 5 1 0 1.5-.8 1.5-2.3 0-2.1-1-4.3-2.7-4.3-1 0-2 .6-3.2 2l-1.3-1.7C11.5 6.8 12.9 6 14.5 6c3 0 5.5 3.3 5.5 7 0 3.3-1.6 5-3.8 5-2.3 0-3.6-1.6-6-5.3C8.9 10.4 8 9.2 6.8 9.2 5.4 9.2 4.3 10.6 4.3 13c0 1.8.5 3 1.3 3 .6 0 1.1-.3 1.8-1.1l1.3 1.7C7.6 17.6 6.3 18 5.3 18 3.3 18 2 16 2 12.5Z" })
 });

package/dist/styles/action-guide.css

@@ -81,6 +81,10 @@
   block-size: var(--sigvelo-control-icon-size-md);
 }
 
+.action-guide__action-icon :is(img, .app-icon__image) {
+  color: unset;
+}
+
 .action-guide__action-label {
   min-inline-size: 0;
   overflow-wrap: anywhere;

package/dist/styles/agent-attention.css

@@ -50,11 +50,15 @@
   background: var(--sigvelo-color-danger-bg-subtle);
 }
 
-.agent-attention__icon > :is(svg, img) {
+.agent-attention__icon > :is(svg, img, .app-icon) {
   inline-size: 1rem;
   block-size: 1rem;
 }
 
+.agent-attention__icon :is(img, .app-icon__image) {
+  color: unset;
+}
+
 .agent-attention__text {
   display: grid;
   min-inline-size: 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/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/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/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

@@ -40,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);
@@ -107,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);

package/dist/styles/manager-office.css

@@ -910,6 +910,9 @@
 .manager-office__connection-icons .app-icon {
   filter: none;
 }
+.manager-office__connection-icons .app-icon :is(img, .app-icon__image) {
+  color: unset;
+}
 .manager-office__dashboard-card-actions {
   display: flex;
   align-items: center;
@@ -1548,9 +1551,13 @@
   block-size: 100%;
 }
 
-.manager-office__channel-mark > svg {
-  inline-size: 65%;
-  block-size: 65%;
+.manager-office__channel-mark > :is(svg, img, .app-icon__image) {
+  inline-size: var(--sigvelo-control-icon-size-md);
+  block-size: var(--sigvelo-control-icon-size-md);
+}
+
+.manager-office__channel-mark :is(img, .app-icon__image) {
+  color: unset;
 }
 
 .manager-office__channel-direction {

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

@@ -225,6 +225,10 @@
   gap: var(--sigvelo-spacing-3-5);
 }
 
+.mcp-plugin-details__identity :is(img, .app-icon__image) {
+  color: unset;
+}
+
 .mcp-plugin-details__identity > .separator {
   block-size: var(--sigvelo-spacing-8);
   background-color: color-mix(in oklab, currentcolor, transparent 30%);

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

@@ -55,6 +55,8 @@
   justify-content: center;
   inline-size: var(--sigvelo-control-icon-size-lg);
   block-size: var(--sigvelo-control-icon-size-lg);
+  /* Lucide and monochrome protocol marks tint from this. Hardcoded brand
+     fills ignore it; Discord sets its own color on the mark. */
   color: var(--sigvelo-color-text-muted);
 }
 

package/dist/styles/prompt-input.css

@@ -212,14 +212,22 @@
   font-family: inherit;
   font-size: var(--sigvelo-density-compact-control-font-size);
   line-height: var(--sigvelo-leading-normal);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
   resize: none;
   overflow-block: hidden;
 }
 
-.prompt-input__textarea::placeholder {
+.prompt-input__textarea::placeholder,
+.prompt-input__textarea[data-empty]::before {
   color: var(--sigvelo-control-placeholder-color);
 }
 
+.prompt-input__textarea[data-empty]::before {
+  content: attr(data-placeholder);
+  pointer-events: none;
+}
+
 .prompt-input__textarea:focus,
 .prompt-input__textarea:focus-visible {
   border: none;
@@ -553,11 +561,15 @@
   flex: 0 0 auto;
 }
 
-.prompt-input__command-icon > svg {
+.prompt-input__command-icon > :is(svg, img, .app-icon) {
   inline-size: var(--sigvelo-density-compact-control-icon-size);
   block-size: var(--sigvelo-density-compact-control-icon-size);
 }
 
+.prompt-input__command-icon :is(img, .app-icon__image) {
+  color: unset;
+}
+
 .prompt-input__command-copy {
   display: grid;
   grid-template-columns: auto var(--sigvelo-layout-track-fill) auto;
@@ -584,51 +596,6 @@
   overflow-wrap: anywhere;
 }
 
-.prompt-input__references {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--sigvelo-spacing-1);
-}
-
-.prompt-input__reference {
-  position: relative;
-  gap: var(--sigvelo-spacing-1);
-  padding-inline: var(--sigvelo-spacing-1);
-  color: var(--sigvelo-color-primary-text);
-  font-weight: inherit;
-  font-size: var(--sigvelo-density-compact-control-font-size);
-}
-
-.prompt-input__reference-icon,
-.prompt-input__reference-remove {
-  display: inline-flex;
-  flex: 0 0 auto;
-}
-
-.prompt-input__reference-label {
-  max-inline-size: 18rem;
-}
-
-.prompt-input__reference-remove {
-  position: absolute;
-  inset-inline-end: calc(-1 * var(--sigvelo-spacing-3));
-  color: var(--sigvelo-color-text-muted);
-  opacity: 0;
-  pointer-events: none;
-}
-
-.prompt-input__reference:hover .prompt-input__reference-remove,
-.prompt-input__reference:focus-visible .prompt-input__reference-remove {
-  opacity: 1;
-}
-
-/* Local wrap. Not --sigvelo-layout-break-compact. */
-@container prompt-input (inline-size < 28rem) {
-  .prompt-input__reference-label {
-    max-inline-size: 12rem;
-  }
-}
-
 .prompt-input__command-description,
 .prompt-input__context-description {
   color: var(--sigvelo-color-text-muted);
@@ -674,7 +641,6 @@
   .prompt-input__button,
   .prompt-input__attachment-remove,
   .prompt-input__recording-button,
-  .prompt-input__reference,
   .prompt-input__submit {
     --sigvelo-recipe-button-height: var(--sigvelo-control-height-xl);
   }
@@ -690,11 +656,6 @@
     min-block-size: var(--sigvelo-control-height-xl);
   }
 
-  .prompt-input__reference-remove {
-    position: static;
-    opacity: 1;
-  }
-
   .prompt-input__attachment[data-image] .prompt-input__attachment-remove {
     position: static;
   }