@mcp-b/react-components 0.44.1 → 0.46.0

package/dist/components/general-purpose/ResponsiveSidebarShell.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { G as SidebarIcon, et as WarningIcon, f as ChevronDownIcon, r as ArrowLeftIcon } from "../../icons-Dw-im7lg.js";
+import { G as SidebarIcon, et as WarningIcon, f as ChevronDownIcon, r as ArrowLeftIcon } from "../../icons-BNEY4gO5.js";
 import { Button } from "../foundations/Button.js";
-import { t as capitalize } from "../../format-DB2mX9DA.js";
+import { t as capitalize } from "../../format-COCyV98Z.js";
 import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
 import { AppTopBar } from "./AppTopBar.js";
 import { ResizableSidePanel } from "./ResizableSidePanel.js";
@@ -15,6 +15,17 @@ const sidebarMaxWidth = 384;
 const sidebarKeyboardStep = 24;
 /** Matches --sigvelo-layout-break-compact. */
 const compactSidebarWidthRem = 56;
+function useControllableSidebar({ sidebarOpen, defaultSidebarOpen, onSidebarOpenChange }) {
+	const [innerOpen, setInnerOpen] = React.useState(defaultSidebarOpen ?? true);
+	return [
+		sidebarOpen ?? innerOpen,
+		React.useCallback((next) => {
+			if (sidebarOpen === void 0) setInnerOpen(next);
+			onSidebarOpenChange?.(next);
+		}, [sidebarOpen, onSidebarOpenChange]),
+		setInnerOpen
+	];
+}
 function isCompactSidebar(root) {
 	const rootFontSize = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
 	return root.offsetWidth <= compactSidebarWidthRem * rootFontSize;
@@ -27,14 +38,19 @@ function isCompactSidebar(root) {
 * hook, and its container name `responsive-sidebar-shell` is public contract:
 * surfaces that compose the shell size themselves against it.
 */
-function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", defaultSidebarWidth = sidebarDefaultWidth, bar, error, showMainLabel = "Show main content", className, children, ref, style, ...props }) {
+function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", sidebarOpen, sidebarTogglePlacement = "main", defaultSidebarOpen, defaultSidebarWidth = sidebarDefaultWidth, onSidebarOpenChange, bar, error, showMainLabel = "Show main content", className, children, ref, style, ...props }) {
 	const sidebarId = React.useId();
 	const rootRef = React.useRef(null);
 	const mainRef = React.useRef(null);
 	const openerRef = React.useRef(null);
 	const compactRef = React.useRef(null);
 	const restoreSidebarOnWideRef = React.useRef(true);
-	const [isSidebarOpen, setSidebarOpen] = React.useState(true);
+	const [isSidebarOpen, setSidebarOpen, primeSidebarOpen] = useControllableSidebar({
+		sidebarOpen,
+		defaultSidebarOpen,
+		onSidebarOpenChange
+	});
+	const wantsBuiltInDefault = sidebarOpen === void 0 && defaultSidebarOpen === void 0;
 	React.useLayoutEffect(() => {
 		const root = rootRef.current;
 		if (!root) return;
@@ -44,7 +60,7 @@ function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", defaultSide
 			const wasCompact = compactRef.current;
 			compactRef.current = compact;
 			if (wasCompact === null) {
-				if (compact) setSidebarOpen(false);
+				if (wantsBuiltInDefault && compact) primeSidebarOpen(false);
 				return;
 			}
 			if (!wasCompact && compact) {
@@ -57,7 +73,12 @@ function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", defaultSide
 		const observer = new ResizeObserver(syncLayout);
 		observer.observe(root);
 		return () => observer.disconnect();
-	}, [isSidebarOpen]);
+	}, [
+		isSidebarOpen,
+		primeSidebarOpen,
+		setSidebarOpen,
+		wantsBuiltInDefault
+	]);
 	const hasSidebar = sidebar != null;
 	const toggleLabel = capitalize(sidebarLabel);
 	const toggleTooltip = `${isSidebarOpen ? "Hide" : "Show"} ${sidebarLabel}`;
@@ -67,23 +88,54 @@ function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", defaultSide
 	}, []);
 	const closeSidebar = React.useCallback(() => {
 		updateSidebar(() => setSidebarOpen(false), () => mainRef.current?.focus({ preventScroll: true }));
-	}, [updateSidebar]);
+	}, [setSidebarOpen, updateSidebar]);
 	const closeSidebarOnCompact = React.useCallback(() => {
 		if (rootRef.current && isCompactSidebar(rootRef.current)) closeSidebar();
 	}, [closeSidebar]);
 	const toggleSidebar = React.useCallback((trigger) => {
 		if (trigger) openerRef.current = trigger;
 		updateSidebar(() => setSidebarOpen(!isSidebarOpen));
-	}, [isSidebarOpen, updateSidebar]);
+	}, [
+		isSidebarOpen,
+		setSidebarOpen,
+		updateSidebar
+	]);
 	const dismissSidebar = React.useCallback(() => {
 		updateSidebar(() => setSidebarOpen(false), () => openerRef.current?.focus({ preventScroll: true }));
-	}, [updateSidebar]);
+	}, [setSidebarOpen, updateSidebar]);
 	const sidebarContent = typeof sidebar === "function" ? sidebar({
 		closeSidebar,
 		closeSidebarOnCompact
 	}) : sidebar;
-	const hasAppLeading = bar?.back != null || bar?.leading != null;
+	const hasCustomLeading = bar?.leading != null;
+	const hasAppLeading = bar?.back != null || hasCustomLeading;
 	const hasTitleTrigger = hasSidebar && bar?.compactTitleTrigger != null && bar?.compactLeading == null;
+	const renderSidebarToggle = (className) => hasSidebar ? /* @__PURE__ */ jsx(AppTopBar.Button, {
+		className: cx("responsive-sidebar-shell__toggle", className),
+		label: toggleLabel,
+		tooltip: toggleTooltip,
+		type: "button",
+		"aria-controls": sidebarId,
+		"aria-expanded": isSidebarOpen,
+		onClick: (event) => toggleSidebar(event.currentTarget),
+		children: /* @__PURE__ */ jsx(SidebarIcon, {})
+	}) : null;
+	const renderSidebarToggleInSidebar = () => hasSidebar ? /* @__PURE__ */ jsx(Button, {
+		className: "responsive-sidebar-shell__toggle responsive-sidebar-shell__toggle--sidebar",
+		type: "button",
+		variant: "ghost",
+		color: "neutral",
+		size: "sm",
+		iconOnly: true,
+		"aria-label": toggleLabel,
+		title: toggleTooltip,
+		"aria-controls": sidebarId,
+		"aria-expanded": isSidebarOpen,
+		onClick: (event) => toggleSidebar(event.currentTarget),
+		children: /* @__PURE__ */ jsx(SidebarIcon, {})
+	}) : null;
+	const sidebarToggle = sidebarTogglePlacement === "sidebar" && isSidebarOpen ? renderSidebarToggleInSidebar() : null;
+	const mainSidebarToggle = sidebarTogglePlacement === "sidebar" || sidebarTogglePlacement === "main" && !hasCustomLeading ? renderSidebarToggle(sidebarTogglePlacement === "sidebar" ? "responsive-sidebar-shell__toggle--sidebar-fallback" : hasTitleTrigger ? "responsive-sidebar-shell__toggle--replaced-by-title" : bar?.compactLeading != null ? "responsive-sidebar-shell__toggle--replaced-by-compact-leading" : void 0) : null;
 	const hasTopBar = !bar?.hidden && (hasSidebar || bar?.back != null || bar?.leading != null || bar?.compactLeading != null || bar?.title != null || bar?.actions != null || bar?.primary != null);
 	const compactLeadingMode = hasTitleTrigger ? "trigger" : !hasAppLeading && bar?.compactLeading != null ? "custom" : void 0;
 	return /* @__PURE__ */ jsx("div", {
@@ -93,6 +145,7 @@ function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", defaultSide
 		style,
 		...props,
 		"data-sidebar-open": hasSidebar && isSidebarOpen ? "true" : "false",
+		"data-sidebar-toggle-placement": sidebarTogglePlacement,
 		onKeyDown: (event) => {
 			props.onKeyDown?.(event);
 			if (!event.defaultPrevented && event.key === "Escape" && hasSidebar && isSidebarOpen && rootRef.current && isCompactSidebar(rootRef.current)) {
@@ -111,12 +164,18 @@ function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", defaultSide
 			keyboardStep: sidebarKeyboardStep,
 			children: [
 				hasSidebar && isSidebarOpen ? /* @__PURE__ */ jsx(ResizableSidePanel.Handle, { className: "responsive-sidebar-shell__resizer" }) : null,
-				hasSidebar ? /* @__PURE__ */ jsx("div", {
+				hasSidebar ? /* @__PURE__ */ jsxs("div", {
 					id: sidebarId,
 					className: "responsive-sidebar-shell__sidebar",
 					"aria-hidden": isSidebarOpen ? void 0 : true,
 					inert: isSidebarOpen ? void 0 : true,
-					children: sidebarContent
+					children: [sidebarToggle ? /* @__PURE__ */ jsx("div", {
+						className: "responsive-sidebar-shell__sidebar-leading",
+						children: sidebarToggle
+					}) : null, /* @__PURE__ */ jsx("div", {
+						className: "responsive-sidebar-shell__sidebar-content",
+						children: sidebarContent
+					})]
 				}) : null,
 				/* @__PURE__ */ jsxs("div", {
 					ref: mainRef,
@@ -135,16 +194,7 @@ function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", defaultSide
 										children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
 									}) : null,
 									bar?.leading,
-									!hasAppLeading && hasSidebar ? /* @__PURE__ */ jsx(AppTopBar.Button, {
-										className: "responsive-sidebar-shell__toggle",
-										label: toggleLabel,
-										tooltip: toggleTooltip,
-										type: "button",
-										"aria-controls": sidebarId,
-										"aria-expanded": isSidebarOpen,
-										onClick: (event) => toggleSidebar(event.currentTarget),
-										children: /* @__PURE__ */ jsx(SidebarIcon, {})
-									}) : null,
+									!hasCustomLeading ? mainSidebarToggle : null,
 									compactLeadingMode === "custom" ? /* @__PURE__ */ jsx("span", {
 										className: "responsive-sidebar-shell__compact-leading",
 										children: bar?.compactLeading

package/dist/components/general-purpose/SettingsFormDialog.js

@@ -1,8 +1,8 @@
 import { Button } from "../foundations/Button.js";
-import { Dialog } from "../foundations/Dialog.js";
-import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
 import { Field } from "../foundations/Field.js";
 import { Form } from "../foundations/Form.js";
+import { Dialog } from "../foundations/Dialog.js";
+import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
 import { Checkbox } from "../foundations/Checkbox.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/general-purpose/SetupChecklist.js

@@ -1,2 +1,2 @@
-import { n as SetupChecklistGroup, t as SetupChecklistAction } from "../../SetupChecklist-DOp-zqjh.js";
+import { n as SetupChecklistGroup, t as SetupChecklistAction } from "../../SetupChecklist-DyPZWzK2.js";
 export { SetupChecklistAction, SetupChecklistGroup };

package/dist/components/general-purpose/Terminal.js

@@ -1,8 +1,8 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { Q as TerminalIcon, nt as XIcon } from "../../icons-Dw-im7lg.js";
+import { Q as TerminalIcon, nt as XIcon } from "../../icons-BNEY4gO5.js";
 import { IconButton } from "../foundations/IconButton.js";
+import { t as CopyButton } from "../../copy-button-D7ySsRRo.js";
 import { ScrollArea } from "../foundations/ScrollArea.js";
-import { t as CopyButton } from "../../copy-button-DHhf-J1d.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import Anser from "anser";

package/dist/components/general-purpose/TestResults.js

@@ -1,6 +1,6 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { d as CheckIcon, nt as XIcon, p as ChevronRightIcon, q as SpinnerIcon } from "../../icons-Dw-im7lg.js";
 import { Collapsible } from "../foundations/Collapsible.js";
+import { d as CheckIcon, nt as XIcon, p as ChevronRightIcon, q as SpinnerIcon } from "../../icons-BNEY4gO5.js";
 import { Progress } from "../foundations/Progress.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/general-purpose/ThemeModeControl.js

@@ -1,6 +1,6 @@
-import { F as MoonIcon, P as MonitorIcon, X as SunIcon } from "../../icons-Dw-im7lg.js";
-import { useTheme } from "../foundations/ThemeProvider.js";
+import { F as MoonIcon, P as MonitorIcon, X as SunIcon } from "../../icons-BNEY4gO5.js";
 import { Radio, RadioGroup } from "../foundations/RadioGroup.js";
+import { useTheme } from "../foundations/ThemeProvider.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/general-purpose/ThemeModeControl.tsx
 const modes = [

package/dist/components/general-purpose/WebPreview.js

@@ -1,9 +1,9 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { U as RefreshIcon, f as ChevronDownIcon, i as ArrowRightIcon, r as ArrowLeftIcon } from "../../icons-Dw-im7lg.js";
-import { IconButton } from "../foundations/IconButton.js";
 import { Collapsible } from "../foundations/Collapsible.js";
-import { ScrollArea } from "../foundations/ScrollArea.js";
+import { U as RefreshIcon, f as ChevronDownIcon, i as ArrowRightIcon, r as ArrowLeftIcon } from "../../icons-BNEY4gO5.js";
+import { IconButton } from "../foundations/IconButton.js";
 import { Input } from "../foundations/Input.js";
+import { ScrollArea } from "../foundations/ScrollArea.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/general-purpose/WebPreview.tsx

package/dist/components/nanites/AgentConnection.js

@@ -1,8 +1,8 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { D as LinkIcon } from "../../icons-Dw-im7lg.js";
+import { D as LinkIcon } from "../../icons-BNEY4gO5.js";
 import { Button } from "../foundations/Button.js";
+import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../../CodeBlock-BpooTofO.js";
 import { Popover } from "../foundations/Popover.js";
-import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../../CodeBlock-Dl7a3Wqo.js";
 import { ToggleGroup } from "../foundations/ToggleGroup.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/nanites/AgentToolDetail.js

@@ -1,11 +1,11 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { r as ArrowLeftIcon } from "../../icons-Dw-im7lg.js";
+import { r as ArrowLeftIcon } from "../../icons-BNEY4gO5.js";
 import { TransitionSurface } from "../foundations/TransitionSurface.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
-import { SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "../agents-sdk/SubagentRunDetails.js";
-import { SubagentRunIndicator, getSubagentRunName } from "../agents-sdk/SubagentRunIndicator.js";
 import { NaniteMark } from "./NaniteScene.js";
-import { t as ThinkChat } from "../../ThinkChat-BES_3Mb-.js";
+import { SubagentRunIndicator, getSubagentRunName } from "../agents-sdk/SubagentRunIndicator.js";
+import { SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "../agents-sdk/SubagentRunDetails.js";
+import { t as ThinkChat } from "../../ThinkChat-qztQ6Clo.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useAgentChat } from "@cloudflare/think/react";

package/dist/{copy-button-DHhf-J1d.js → copy-button-D7ySsRRo.js}

@@ -1,4 +1,4 @@
-import { d as CheckIcon, h as CopyIcon } from "./icons-Dw-im7lg.js";
+import { d as CheckIcon, h as CopyIcon } from "./icons-BNEY4gO5.js";
 import { IconButton } from "./components/foundations/IconButton.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/{format-DB2mX9DA.js → format-COCyV98Z.js}

@@ -38,6 +38,28 @@ function formatErrorMessage(error) {
 	return error instanceof Error ? error.message : String(error);
 }
 /**
+* How much of one line a collapsed row carries before it is cut. One bound for
+* every such row — a run's status line, an activity row's detail — because
+* they stack in the same transcript and two limits would read as drift.
+*/
+const LINE_LIMIT = 160;
+/**
+* The trimmed, non-empty lines of `value`. Callers that want the newest line
+* of a stream take the last one; `firstLine` covers the common case.
+*/
+function textLines(value) {
+	return value.split("\n").map((entry) => entry.trim()).filter((entry) => entry.length > 0);
+}
+/**
+* `value` reduced to the one line a collapsed row shows: its first non-empty
+* line, cut with an ellipsis. Empty when `value` has no line to show, so a
+* caller can fall back to its own wording.
+*/
+function firstLine(value) {
+	const line = textLines(value).at(0) ?? "";
+	return line.length > LINE_LIMIT ? `${line.slice(0, LINE_LIMIT - 1)}…` : line;
+}
+/**
 * Renders an unknown upstream value as display text. Tool arguments, results,
 * and audit records arrive in shapes this package never declared, so a bigint,
 * a cycle, or a value `JSON.stringify` has no answer for is an ordinary input
@@ -53,4 +75,4 @@ function formatUnknownValue(value, space) {
 	}
 }
 //#endregion
-export { formatUnknownValue as a, formatErrorMessage as i, clamp as n, titleCase as o, formatClock as r, capitalize as t };
+export { formatErrorMessage as a, titleCase as c, formatClock as i, clamp as n, formatUnknownValue as o, firstLine as r, textLines as s, capitalize as t };

package/dist/{icons-Dw-im7lg.js → icons-BNEY4gO5.js}

@@ -1,8 +1,7 @@
 import { t as cx } from "./class-names-BiMDVpUo.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ArrowUpRight, Bookmark, Box, Brain, CalendarDays, Check, ChevronDown, ChevronRight, CircleStop, CodeXml, Copy, CornerDownRight, Dot, Download, Ellipsis, Eye, EyeOff, File, Folder, FolderOpen, Info, Keyboard, Link2, ListRestart, LoaderCircle, Mail, Maximize2, MessageSquare, Mic, Minus, Monitor, Moon, PanelLeft, Paperclip, Pause, Pencil, Play, Plus, RefreshCw, Search, Square, Sun, Target, Terminal, Trash2, TriangleAlert, Wrench, X } from "lucide-react";
-import { FaSlack } from "react-icons/fa6";
 import { SiDiscord, SiModelcontextprotocol } from "react-icons/si";
-import { jsx } from "react/jsx-runtime";
 //#region src/components/_internal/icons.tsx
 function icon(Component) {
 	return function DesignSystemIcon({ size = 16, strokeWidth = 1.75, ...props }) {
@@ -84,8 +83,49 @@ const MonitorIcon = icon(Monitor);
 const MessageSquareIcon = icon(MessageSquare);
 const MailIcon = icon(Mail);
 const McpIcon = brandIcon(SiModelcontextprotocol);
-const DiscordIcon = brandIcon(SiDiscord);
-const SlackIcon = brandIcon(FaSlack);
+/** Discord Blurple. Callers override with `color` or a `className` that sets color. */
+function DiscordIcon({ size = 16, color = "#5865F2", className, ...props }) {
+	return /* @__PURE__ */ jsx(SiDiscord, {
+		size,
+		color,
+		"aria-hidden": "true",
+		focusable: "false",
+		className: cx("sigvelo-brand-mark", "sigvelo-brand-mark--discord", className),
+		...props
+	});
+}
+/** Four-color Slack hash. Official fills live on the paths, not currentColor. */
+function SlackIcon({ size = 16, className, ...props }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: size,
+		height: size,
+		viewBox: "0 0 200 200",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		"aria-hidden": "true",
+		focusable: "false",
+		className: cx("sigvelo-brand-mark", "sigvelo-brand-mark--colorful", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M53.0056 121.477C53.0056 130.921 45.3784 138.555 35.9413 138.555C26.5042 138.555 18.877 130.921 18.877 121.477C18.877 112.032 26.5042 104.398 35.9413 104.398H53.0056V121.477ZM61.5378 121.477C61.5378 112.032 69.165 104.398 78.6021 104.398C88.0392 104.398 95.6664 112.032 95.6664 121.477V164.172C95.6664 173.617 88.0392 181.25 78.6021 181.25C69.165 181.25 61.5378 173.617 61.5378 164.172V121.477Z",
+				fill: "#E01E5A"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M78.6044 52.9062C69.1673 52.9062 61.5401 45.2728 61.5401 35.8281C61.5401 26.3834 69.1673 18.75 78.6044 18.75C88.0415 18.75 95.6688 26.3834 95.6688 35.8281V52.9062H78.6044ZM78.6044 61.5747C88.0415 61.5747 95.6688 69.2081 95.6688 78.6528C95.6688 88.0975 88.0415 95.7309 78.6044 95.7309H35.8143C26.3772 95.7309 18.75 88.0975 18.75 78.6528C18.75 69.2081 26.3772 61.5747 35.8143 61.5747H78.6044Z",
+				fill: "#36C5F0"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M146.991 78.6528C146.991 69.2081 154.618 61.5747 164.055 61.5747C173.492 61.5747 181.12 69.2081 181.12 78.6528C181.12 88.0975 173.492 95.7309 164.055 95.7309H146.991V78.6528ZM138.459 78.6528C138.459 88.0975 130.831 95.7309 121.394 95.7309C111.957 95.7309 104.33 88.0975 104.33 78.6528V35.8281C104.33 26.3834 111.957 18.75 121.394 18.75C130.831 18.75 138.459 26.3834 138.459 35.8281V78.6528Z",
+				fill: "#2EB67D"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M121.394 147.094C130.831 147.094 138.459 154.727 138.459 164.172C138.459 173.617 130.831 181.25 121.394 181.25C111.957 181.25 104.33 173.617 104.33 164.172V147.094H121.394ZM121.394 138.555C111.957 138.555 104.33 130.921 104.33 121.477C104.33 112.032 111.957 104.398 121.394 104.398H164.184C173.622 104.398 181.249 112.032 181.249 121.477C181.249 130.921 173.622 138.555 164.184 138.555H121.394Z",
+				fill: "#ECB22E"
+			})
+		]
+	});
+}
 const MoonIcon = icon(Moon);
 const SunIcon = icon(Sun);
 const TargetIcon = icon(Target);

package/dist/{icons-6ZnyZJiR.d.ts → icons-D0Pd2P9v.d.ts}

@@ -262,14 +262,19 @@ declare const McpIcon: ({
   size,
   ...props
 }: BrandIconProps) => import("react").JSX.Element;
-declare const DiscordIcon: ({
+/** Discord Blurple. Callers override with `color` or a `className` that sets color. */
+declare function DiscordIcon({
   size,
+  color,
+  className,
   ...props
-}: BrandIconProps) => import("react").JSX.Element;
-declare const SlackIcon: ({
+}: BrandIconProps): import("react").JSX.Element;
+/** Four-color Slack hash. Official fills live on the paths, not currentColor. */
+declare function SlackIcon({
   size,
+  className,
   ...props
-}: BrandIconProps) => import("react").JSX.Element;
+}: BrandIconProps): import("react").JSX.Element;
 declare const MoonIcon: ({
   size,
   strokeWidth,

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/{progress-ring-BEocM1e3.js → progress-ring-Cgii90dC.js}

@@ -1,4 +1,4 @@
-import { n as clamp } from "./format-DB2mX9DA.js";
+import { n as clamp } from "./format-COCyV98Z.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/_internal/progress-ring.tsx
 /**

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;