@mcp-b/react-components 0.45.0 → 0.46.1

package/dist/styles/think-sidepanel.css

@@ -60,6 +60,15 @@
   color: var(--sigvelo-color-text-muted);
 }
 
+.think-sidepanel .app-icon-stack .app-icon :is(img, .app-icon__image) {
+  color: unset;
+}
+
+.think-sidepanel .button .app-icon-stack .app-icon :is(svg, img) {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
 @media (forced-colors: active) {
   .think-sidepanel,
   .think-sidepanel__gate {

package/dist/utils/composer-link.d.ts

@@ -0,0 +1,59 @@
+//#region src/utils/composer-link.d.ts
+declare const COMPOSER_LINK_ORIGIN = "https://composer.invalid";
+declare const COMPOSER_LINK_KINDS: readonly ["command", "mcp", "skill", "tab", "file"];
+type ComposerLinkKind = (typeof COMPOSER_LINK_KINDS)[number];
+declare const COMPOSER_CHROME_ICONS: readonly ["box"];
+type ComposerChromeIcon = (typeof COMPOSER_CHROME_ICONS)[number];
+interface ComposerLinkParts {
+  kind: ComposerLinkKind;
+  value: string;
+  label?: string;
+  iconSrc?: string;
+  chromeIcon?: ComposerChromeIcon;
+}
+interface ParsedComposerLink extends ComposerLinkParts {
+  href: string;
+  label: string;
+}
+type ComposerDraftSegment = {
+  type: "text";
+  value: string;
+} | {
+  type: "link";
+  href: string;
+  label: string;
+  parts: ParsedComposerLink;
+};
+declare function isComposerLinkKind(value: string): value is ComposerLinkKind;
+declare function isComposerChromeIcon(value: string): value is ComposerChromeIcon;
+declare function composerLinkHref(parts: ComposerLinkParts): string;
+declare function parseComposerHref(href: string | undefined): ParsedComposerLink | undefined;
+declare function escapeComposerLinkLabel(label: string): string;
+/** Brand hex from a Simple Icons URL, skipped when it would vanish as text. */
+declare function brandHexFromIconSrc(src: string | undefined): string | undefined;
+/** Most chromatic opaque pixel, skipped when the mark is charcoal, white, or gray. */
+declare function chromaticHexFromPixels(data: Uint8ClampedArray): string | undefined;
+declare function sampleImageAccent(image: HTMLImageElement): string | undefined;
+declare function serializeComposerLink(parts: ComposerLinkParts & {
+  label: string;
+}): string;
+declare function splitComposerDraft(text: string): ComposerDraftSegment[];
+declare function parseComposerLinks(text: string): ParsedComposerLink[];
+declare function composerTriggerMatch(text: string): {
+  trigger: "/" | "@";
+  query: string;
+  triggerIndex: number;
+} | undefined;
+declare function inferComposerLinkKind(command: {
+  id?: string;
+}, trigger: "/" | "@"): ComposerLinkKind;
+declare function replaceComposerTrigger(draft: string, command: {
+  id?: string;
+  value: string;
+  label: string;
+  href?: string;
+  iconSrc?: string;
+}, trigger: "/" | "@"): string;
+declare function composerDraftToPrompt(text: string): string;
+//#endregion
+export { COMPOSER_CHROME_ICONS, COMPOSER_LINK_KINDS, COMPOSER_LINK_ORIGIN, ComposerChromeIcon, ComposerDraftSegment, ComposerLinkKind, ComposerLinkParts, ParsedComposerLink, brandHexFromIconSrc, chromaticHexFromPixels, composerDraftToPrompt, composerLinkHref, composerTriggerMatch, escapeComposerLinkLabel, inferComposerLinkKind, isComposerChromeIcon, isComposerLinkKind, parseComposerHref, parseComposerLinks, replaceComposerTrigger, sampleImageAccent, serializeComposerLink, splitComposerDraft };

package/dist/utils/composer-link.js

@@ -0,0 +1,203 @@
+//#region src/utils/composer-link.ts
+const COMPOSER_LINK_ORIGIN = "https://composer.invalid";
+const COMPOSER_LINK_KINDS = [
+	"command",
+	"mcp",
+	"skill",
+	"tab",
+	"file"
+];
+const COMPOSER_CHROME_ICONS = ["box"];
+const COMPOSER_LINK_KIND_SET = new Set(COMPOSER_LINK_KINDS);
+const COMPOSER_MARKDOWN_LINK = /\[([^\]]+)\]\((https:\/\/composer\.invalid\/(?:command|mcp|skill|tab|file)\/[^)\s]+)\)/g;
+const TRAILING_TRIGGER = /(?:^|\s)([/@])([^\n]*)$/u;
+function isComposerLinkKind(value) {
+	return COMPOSER_LINK_KIND_SET.has(value);
+}
+const COMPOSER_CHROME_ICON_SET = new Set(COMPOSER_CHROME_ICONS);
+function isComposerChromeIcon(value) {
+	return COMPOSER_CHROME_ICON_SET.has(value);
+}
+function defaultChromeIcon(kind) {
+	return kind === "command" || kind === "skill" ? "box" : void 0;
+}
+function parseIconParam(value) {
+	if (!value) return {};
+	if (isComposerChromeIcon(value)) return { chromeIcon: value };
+	return { iconSrc: value };
+}
+function composerLinkHref(parts) {
+	const url = new URL(`${COMPOSER_LINK_ORIGIN}/${parts.kind}/${encodeURIComponent(parts.value)}`);
+	if (parts.label) url.searchParams.set("label", parts.label);
+	const icon = parts.iconSrc ?? parts.chromeIcon ?? defaultChromeIcon(parts.kind);
+	if (icon) url.searchParams.set("icon", icon);
+	return url.href;
+}
+function parseComposerHref(href) {
+	if (!href) return void 0;
+	let url;
+	try {
+		url = new URL(href);
+	} catch {
+		return;
+	}
+	if (url.origin !== "https://composer.invalid") return void 0;
+	const segments = url.pathname.split("/").filter(Boolean);
+	const kind = segments[0];
+	const encodedValue = segments.slice(1).join("/");
+	if (!kind || !isComposerLinkKind(kind) || !encodedValue) return void 0;
+	const value = decodeURIComponent(encodedValue);
+	const label = url.searchParams.get("label")?.trim() || void 0;
+	const iconParam = parseIconParam(url.searchParams.get("icon")?.trim() || void 0);
+	return {
+		kind,
+		value,
+		href: url.href,
+		label: label ?? value,
+		...iconParam,
+		...!iconParam.iconSrc && !iconParam.chromeIcon && defaultChromeIcon(kind) ? { chromeIcon: defaultChromeIcon(kind) } : {}
+	};
+}
+function escapeComposerLinkLabel(label) {
+	return label.replaceAll("[", "").replaceAll("]", "").trim() || label.trim();
+}
+const SIMPLE_ICONS_HEX = /\/([0-9a-fA-F]{6})(?:[/?#]|$)/;
+function srgbChannel(value) {
+	const channel = value / 255;
+	return channel <= .03928 ? channel / 12.92 : ((channel + .055) / 1.055) ** 2.4;
+}
+function isUsableTextColor(red, green, blue) {
+	const luminance = .2126 * srgbChannel(red) + .7152 * srgbChannel(green) + .0722 * srgbChannel(blue);
+	return luminance >= .12 && luminance <= .82;
+}
+/** Brand hex from a Simple Icons URL, skipped when it would vanish as text. */
+function brandHexFromIconSrc(src) {
+	if (!src) return void 0;
+	const hex = SIMPLE_ICONS_HEX.exec(src)?.[1];
+	if (!hex) return void 0;
+	return isUsableTextColor(Number.parseInt(hex.slice(0, 2), 16), Number.parseInt(hex.slice(2, 4), 16), Number.parseInt(hex.slice(4, 6), 16)) ? `#${hex}` : void 0;
+}
+/** Most chromatic opaque pixel, skipped when the mark is charcoal, white, or gray. */
+function chromaticHexFromPixels(data) {
+	let bestChroma = 0;
+	let best;
+	for (let index = 0; index + 3 < data.length; index += 4) {
+		if ((data[index + 3] ?? 0) < 128) continue;
+		const red = data[index] ?? 0;
+		const green = data[index + 1] ?? 0;
+		const blue = data[index + 2] ?? 0;
+		const chroma = Math.max(red, green, blue) / 255 - Math.min(red, green, blue) / 255;
+		if (chroma < .18 || !isUsableTextColor(red, green, blue)) continue;
+		if (chroma > bestChroma) {
+			bestChroma = chroma;
+			best = `#${[
+				red,
+				green,
+				blue
+			].map((channel) => channel.toString(16).padStart(2, "0")).join("")}`;
+		}
+	}
+	return best;
+}
+function sampleImageAccent(image) {
+	if (!image.naturalWidth) return void 0;
+	const canvas = document.createElement("canvas");
+	canvas.width = 32;
+	canvas.height = 32;
+	const context = canvas.getContext("2d", { willReadFrequently: true });
+	if (!context) return void 0;
+	try {
+		context.drawImage(image, 0, 0, 32, 32);
+		return chromaticHexFromPixels(context.getImageData(0, 0, 32, 32).data);
+	} catch {
+		return;
+	}
+}
+function serializeComposerLink(parts) {
+	const label = escapeComposerLinkLabel(parts.label);
+	return `[${label}](${composerLinkHref({
+		...parts,
+		label
+	})})`;
+}
+function splitComposerDraft(text) {
+	const segments = [];
+	let lastIndex = 0;
+	for (const match of text.matchAll(COMPOSER_MARKDOWN_LINK)) {
+		const index = match.index ?? 0;
+		if (index > lastIndex) segments.push({
+			type: "text",
+			value: text.slice(lastIndex, index)
+		});
+		const parsed = parseComposerHref(match[2] ?? "");
+		const label = match[1] ?? parsed?.label ?? "";
+		if (!parsed) segments.push({
+			type: "text",
+			value: match[0] ?? ""
+		});
+		else segments.push({
+			type: "link",
+			href: parsed.href,
+			label,
+			parts: {
+				...parsed,
+				label
+			}
+		});
+		lastIndex = index + (match[0]?.length ?? 0);
+	}
+	if (lastIndex < text.length) segments.push({
+		type: "text",
+		value: text.slice(lastIndex)
+	});
+	return segments;
+}
+function parseComposerLinks(text) {
+	return splitComposerDraft(text).flatMap((segment) => segment.type === "link" ? [segment.parts] : []);
+}
+function composerTriggerMatch(text) {
+	const match = TRAILING_TRIGGER.exec(text);
+	if (!match) return void 0;
+	const trigger = match[1];
+	if (trigger !== "/" && trigger !== "@") return void 0;
+	const matchIndex = match.index ?? 0;
+	const triggerIndex = text[matchIndex] === "/" || text[matchIndex] === "@" ? matchIndex : matchIndex + 1;
+	return {
+		trigger,
+		query: match[2] ?? "",
+		triggerIndex
+	};
+}
+function inferComposerLinkKind(command, trigger) {
+	const id = command.id ?? "";
+	if (id.startsWith("mcp:")) return "mcp";
+	if (id.startsWith("tab:")) return "tab";
+	if (id.startsWith("skill:")) return "skill";
+	if (id.startsWith("file:")) return "file";
+	return trigger === "@" ? "mcp" : "command";
+}
+function replaceComposerTrigger(draft, command, trigger) {
+	const href = command.href ?? composerLinkHref({
+		kind: inferComposerLinkKind(command, trigger),
+		value: command.value,
+		label: command.label,
+		iconSrc: command.iconSrc
+	});
+	const markdown = `[${escapeComposerLinkLabel(command.label)}](${href})`;
+	const match = composerTriggerMatch(draft);
+	if (!match) {
+		const trimmed = draft.trimEnd();
+		return trimmed ? `${trimmed} ${markdown} ` : `${markdown} `;
+	}
+	return `${draft.slice(0, match.triggerIndex)}${markdown} `;
+}
+function composerDraftToPrompt(text) {
+	return splitComposerDraft(text).map((segment) => {
+		if (segment.type === "text") return segment.value;
+		if (segment.parts.kind === "mcp" || segment.parts.kind === "tab") return `@${segment.parts.value}`;
+		if (segment.parts.kind === "file") return segment.parts.value;
+		return `/${segment.parts.value}`;
+	}).join("").replace(/[^\S\n]+/g, " ").trim();
+}
+//#endregion
+export { COMPOSER_CHROME_ICONS, COMPOSER_LINK_KINDS, COMPOSER_LINK_ORIGIN, brandHexFromIconSrc, chromaticHexFromPixels, composerDraftToPrompt, composerLinkHref, composerTriggerMatch, escapeComposerLinkLabel, inferComposerLinkKind, isComposerChromeIcon, isComposerLinkKind, parseComposerHref, parseComposerLinks, replaceComposerTrigger, sampleImageAccent, serializeComposerLink, splitComposerDraft };

package/dist/utils/mcp-server-catalog.d.ts

@@ -1,2 +1,2 @@
-import { a as MCP_SERVER_SETUP_AUTH, c as McpServerManualSetup, d as McpServerSetupAuthFieldName, f as McpServerSetupLink, h as getMcpServerRuntimeState, i as MANUAL_MCP_SERVER_CARDS, l as McpServerSetupAuth, m as getMcpServerIconSrc, n as DCR_MCP_SERVER_CARDS, o as McpServerCard, p as getMcpServerEntry, r as DEFAULT_MCP_SERVER_CARDS, s as McpServerCardIcon, t as CUSTOM_MCP_SERVER_CARD, u as McpServerSetupAuthField } from "../mcp-server-catalog-CCj2ItkV.js";
+import { a as MCP_SERVER_SETUP_AUTH, c as McpServerManualSetup, d as McpServerSetupAuthFieldName, f as McpServerSetupLink, h as getMcpServerRuntimeState, i as MANUAL_MCP_SERVER_CARDS, l as McpServerSetupAuth, m as getMcpServerIconSrc, n as DCR_MCP_SERVER_CARDS, o as McpServerCard, p as getMcpServerEntry, r as DEFAULT_MCP_SERVER_CARDS, s as McpServerCardIcon, t as CUSTOM_MCP_SERVER_CARD, u as McpServerSetupAuthField } from "../mcp-server-catalog-Cbu483Zb.js";
 export { CUSTOM_MCP_SERVER_CARD, DCR_MCP_SERVER_CARDS, DEFAULT_MCP_SERVER_CARDS, MANUAL_MCP_SERVER_CARDS, MCP_SERVER_SETUP_AUTH, McpServerCard, McpServerCardIcon, McpServerManualSetup, McpServerSetupAuth, McpServerSetupAuthField, McpServerSetupAuthFieldName, McpServerSetupLink, getMcpServerEntry, getMcpServerIconSrc, getMcpServerRuntimeState };

package/dist/utils/mcp-server-catalog.js

@@ -274,7 +274,7 @@ const DCR_MCP_SERVER_CARDS = [
 		url: "https://mcp.miro.com/mcp",
 		description: "Work with boards and diagrams",
 		category: DCR_CATEGORY,
-		icon: "https://cdn.simpleicons.org/miro/FFD02F"
+		icon: "https://cdn.simpleicons.org/miro/050038"
 	},
 	{
 		id: "monday",
@@ -298,7 +298,7 @@ const DCR_MCP_SERVER_CARDS = [
 		url: "https://mcp.notion.com/mcp",
 		description: "Work across docs, wikis, and project notes",
 		category: DCR_CATEGORY,
-		icon: "https://cdn.simpleicons.org/notion/A1A1AA"
+		icon: "https://cdn.simpleicons.org/notion/000000"
 	},
 	{
 		id: "paypal",
@@ -306,7 +306,7 @@ const DCR_MCP_SERVER_CARDS = [
 		url: "https://mcp.paypal.com/mcp",
 		description: "Use PayPal merchant tools",
 		category: DCR_CATEGORY,
-		icon: "https://cdn.simpleicons.org/paypal/003087"
+		icon: "https://cdn.simpleicons.org/paypal/002991"
 	},
 	{
 		id: "postman",
@@ -322,7 +322,7 @@ const DCR_MCP_SERVER_CARDS = [
 		url: "https://mcp.railway.com",
 		description: "Manage Railway projects and services",
 		category: DCR_CATEGORY,
-		icon: "https://cdn.simpleicons.org/railway/8957E5"
+		icon: "https://cdn.simpleicons.org/railway/0B0D0E"
 	},
 	{
 		id: "ramp",
@@ -338,7 +338,7 @@ const DCR_MCP_SERVER_CARDS = [
 		url: "https://mcp.sentry.dev/mcp",
 		description: "Debug errors and inspect projects",
 		category: DCR_CATEGORY,
-		icon: "https://cdn.simpleicons.org/sentry/8957E5"
+		icon: "https://cdn.simpleicons.org/sentry/362D59"
 	},
 	{
 		id: "square",
@@ -362,7 +362,7 @@ const DCR_MCP_SERVER_CARDS = [
 		url: "https://mcp.supabase.com/mcp",
 		description: "Manage Supabase projects",
 		category: DCR_CATEGORY,
-		icon: "https://cdn.simpleicons.org/supabase/3ECF8E"
+		icon: "https://cdn.simpleicons.org/supabase/3FCF8E"
 	},
 	{
 		id: "vercel",
@@ -370,7 +370,7 @@ const DCR_MCP_SERVER_CARDS = [
 		url: "https://mcp.vercel.com",
 		description: "Manage projects and deployments",
 		category: DCR_CATEGORY,
-		icon: "https://cdn.simpleicons.org/vercel/A1A1AA"
+		icon: "https://cdn.simpleicons.org/vercel/000000"
 	},
 	{
 		id: "webflow",
@@ -386,7 +386,7 @@ const DCR_MCP_SERVER_CARDS = [
 		url: "https://mcp.wix.com/mcp",
 		description: "Work with Wix sites and apps",
 		category: DCR_CATEGORY,
-		icon: "https://cdn.simpleicons.org/wix/A1A1AA"
+		icon: "https://cdn.simpleicons.org/wix/0C6EFC"
 	},
 	{
 		id: "zapier",
@@ -491,7 +491,7 @@ const MANUAL_MCP_SERVER_CARDS = [
 		url: "https://chatmcp.googleapis.com/mcp/v1",
 		description: "Read spaces, memberships, and messages",
 		category: MANUAL_CATEGORY,
-		icon: "https://cdn.simpleicons.org/googlechat/00AC47",
+		icon: "https://cdn.simpleicons.org/googlechat/34A853",
 		manualSetup: {
 			auth: MCP_SERVER_SETUP_AUTH.manualOAuthClientSecret,
 			description: "Enable Chat and Chat MCP APIs, configure a Chat app, and create a web OAuth client.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.45.0",
+  "version": "0.46.1",
   "description": "MCP-B React components built on Base UI and shared design tokens, including Cloudflare Think chat primitives.",
   "homepage": "https://design-system.sigvelo.com",
   "bugs": {
@@ -53,7 +53,7 @@
     "streamdown": "^2.5.0",
     "unist-util-visit": "^5.1.0",
     "yet-another-react-lightbox": "^3.32.2",
-    "@mcp-b/design-tokens": "0.45.0"
+    "@mcp-b/design-tokens": "0.46.1"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.249",