@mcp-b/react-components 0.56.1 → 0.57.0

package/dist/styles/recipes.css

@@ -272,11 +272,11 @@
 }
 
 :where(
-  [data-slot="input"],
-  [data-slot="textarea"],
-  [data-slot="select-trigger"],
-  [data-slot="field-control"]
-):hover:not(:disabled, [data-disabled]) {
+    [data-slot="input"],
+    [data-slot="textarea"],
+    [data-slot="select-trigger"],
+    [data-slot="field-control"]
+  ):hover:not(:disabled, [data-disabled]) {
   border-color: var(--sigvelo-color-focus);
 }
 
@@ -319,12 +319,12 @@
 }
 
 :where(
-  [data-slot="input"],
-  [data-slot="textarea"],
-  [data-slot="select-trigger"],
-  [data-slot="combobox-input"],
-  [data-slot="field-control"]
-):is([aria-invalid="true"], [data-invalid]):focus-visible {
+    [data-slot="input"],
+    [data-slot="textarea"],
+    [data-slot="select-trigger"],
+    [data-slot="combobox-input"],
+    [data-slot="field-control"]
+  ):is([aria-invalid="true"], [data-invalid]):focus-visible {
   box-shadow: var(--sigvelo-recipe-invalid-focus-shadow);
 }
 
@@ -633,10 +633,10 @@
 }
 
 :where(
-  [data-slot="combobox-trigger"],
-  [data-slot="autocomplete-trigger"],
-  [data-slot="autocomplete-clear"]
-):hover:not([data-disabled]) {
+    [data-slot="combobox-trigger"],
+    [data-slot="autocomplete-trigger"],
+    [data-slot="autocomplete-clear"]
+  ):hover:not([data-disabled]) {
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
 }
@@ -708,10 +708,10 @@
 }
 
 :where(
-  [data-slot="chain-of-thought-trigger"],
-  [data-slot="reasoning-trigger"],
-  [data-slot="sources-trigger"]
-):hover:not([data-disabled]) {
+    [data-slot="chain-of-thought-trigger"],
+    [data-slot="reasoning-trigger"],
+    [data-slot="sources-trigger"]
+  ):hover:not([data-disabled]) {
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
 }

package/dist/utils/codex-model-catalog.d.ts

@@ -1,2 +1,2 @@
-import { a as CodexModelAvailabilityNux, c as CodexModelServiceTier, d as CodexReasoningEffortOption, f as defineCodexModels, i as CodexModel, l as CodexModelUpgradeInfo, n as CODEX_MODEL_IDS, o as CodexModelId, r as CodexInputModality, s as CodexModelListResponse, t as CHECKED_IN_CODEX_MODELS, u as CodexReasoningEffort } from "../codex-model-catalog-BBN_gWcc.js";
+import { a as CodexModelAvailabilityNux, c as CodexModelServiceTier, d as CodexReasoningEffortOption, f as defineCodexModels, i as CodexModel, l as CodexModelUpgradeInfo, n as CODEX_MODEL_IDS, o as CodexModelId, r as CodexInputModality, s as CodexModelListResponse, t as CHECKED_IN_CODEX_MODELS, u as CodexReasoningEffort } from "../codex-model-catalog-CBWDdQl7.js";
 export { CHECKED_IN_CODEX_MODELS, CODEX_MODEL_IDS, CodexInputModality, CodexModel, CodexModelAvailabilityNux, CodexModelId, CodexModelListResponse, CodexModelServiceTier, CodexModelUpgradeInfo, CodexReasoningEffort, CodexReasoningEffortOption, defineCodexModels };

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

@@ -1,21 +1,21 @@
 //#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 {
+export declare const COMPOSER_LINK_ORIGIN = "https://composer.invalid";
+export declare const COMPOSER_LINK_KINDS: readonly ["command", "mcp", "skill", "tab", "file"];
+export type ComposerLinkKind = (typeof COMPOSER_LINK_KINDS)[number];
+export declare const COMPOSER_CHROME_ICONS: readonly ["box"];
+export type ComposerChromeIcon = (typeof COMPOSER_CHROME_ICONS)[number];
+export interface ComposerLinkParts {
   kind: ComposerLinkKind;
   value: string;
   label?: string;
   iconSrc?: string;
   chromeIcon?: ComposerChromeIcon;
 }
-interface ParsedComposerLink extends ComposerLinkParts {
+export interface ParsedComposerLink extends ComposerLinkParts {
   href: string;
   label: string;
 }
-type ComposerDraftSegment = {
+export type ComposerDraftSegment = {
   type: "text";
   value: string;
 } | {
@@ -24,36 +24,35 @@ type ComposerDraftSegment = {
   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;
+export declare function isComposerLinkKind(value: string): value is ComposerLinkKind;
+export declare function isComposerChromeIcon(value: string): value is ComposerChromeIcon;
+export declare function composerLinkHref(parts: ComposerLinkParts): string;
+export declare function parseComposerHref(href: string | undefined): ParsedComposerLink | undefined;
+export 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;
+export 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 & {
+export declare function chromaticHexFromPixels(data: Uint8ClampedArray): string | undefined;
+export declare function sampleImageAccent(image: HTMLImageElement): string | undefined;
+export 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): {
+export declare function splitComposerDraft(text: string): ComposerDraftSegment[];
+export declare function parseComposerLinks(text: string): ParsedComposerLink[];
+export declare function composerTriggerMatch(text: string): {
   trigger: "/" | "@";
   query: string;
   triggerIndex: number;
 } | undefined;
-declare function inferComposerLinkKind(command: {
+export declare function inferComposerLinkKind(command: {
   id?: string;
 }, trigger: "/" | "@"): ComposerLinkKind;
-declare function replaceComposerTrigger(draft: string, command: {
+export 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 };
+export declare function composerDraftToPrompt(text: string): string;
+//#endregion

package/dist/utils/favicon.d.ts

@@ -5,11 +5,10 @@
  * This does not fetch or inspect the page. Browser hosts that can read a document's
  * `<link rel="icon">` should prefer that resolved URL because it may point elsewhere.
  */
-declare function inferFaviconUrl(url: string): string | undefined;
+export declare function inferFaviconUrl(url: string): string | undefined;
 /**
  * Browsers block public pages from fetching loopback URLs (private network
  * access). Skip those favicons when the document is not itself on loopback.
  */
-declare function canRequestFavicon(src: string, documentOrigin?: string): boolean;
-//#endregion
-export { canRequestFavicon, inferFaviconUrl };
+export declare function canRequestFavicon(src: string, documentOrigin?: string): boolean;
+//#endregion

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

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

package/dist/utils/structured-code.d.ts

@@ -1,10 +1,8 @@
-import { O as CodeBlockLanguage } from "../CodeBlock-DJ99TQWy.js";
-
+import { O as CodeBlockLanguage } from "../CodeBlock-CPotpyyM.js";
 //#region src/utils/structured-code.d.ts
-interface StructuredCodeDisplay {
+export interface StructuredCodeDisplay {
   code: string;
   language: CodeBlockLanguage;
 }
-declare function formatStructuredCodeDisplay(value: unknown): StructuredCodeDisplay;
-//#endregion
-export { StructuredCodeDisplay, formatStructuredCodeDisplay };
+export declare function formatStructuredCodeDisplay(value: unknown): StructuredCodeDisplay;
+//#endregion

package/dist/utils/theme.d.ts

@@ -1,22 +1,21 @@
 //#region src/utils/theme.d.ts
-declare const THEME_STORAGE_KEY = "mcp-b-theme";
-declare const themePreferences: readonly ["system", "light", "dark"];
-type ThemePreference = (typeof themePreferences)[number];
-type ResolvedTheme = Exclude<ThemePreference, "system">;
-declare function isThemePreference(value: unknown): value is ThemePreference;
-declare function resolveThemePreference(preference: ThemePreference, targetWindow?: Pick<Window, "matchMedia">): ResolvedTheme;
-declare function readThemePreference(storageKey?: string, targetStorage?: Storage): ThemePreference;
-declare function writeThemePreference(preference: ThemePreference, storageKey?: string, targetStorage?: Storage): void;
+export declare const THEME_STORAGE_KEY = "mcp-b-theme";
+export declare const themePreferences: readonly ["system", "light", "dark"];
+export type ThemePreference = (typeof themePreferences)[number];
+export type ResolvedTheme = Exclude<ThemePreference, "system">;
+export declare function isThemePreference(value: unknown): value is ThemePreference;
+export declare function resolveThemePreference(preference: ThemePreference, targetWindow?: Pick<Window, "matchMedia">): ResolvedTheme;
+export declare function readThemePreference(storageKey?: string, targetStorage?: Storage): ThemePreference;
+export declare function writeThemePreference(preference: ThemePreference, storageKey?: string, targetStorage?: Storage): void;
 /**
  * Applies an explicit preference without resolving System into an attribute.
  * Leaving data-theme absent lets CSS respond to operating-system changes by itself.
  */
-declare function applyThemePreference(preference: ThemePreference, targetDocument?: Document): ResolvedTheme;
+export declare function applyThemePreference(preference: ThemePreference, targetDocument?: Document): ResolvedTheme;
 /**
  * Generates a CSP-compatible inline head script body that restores a saved
  * preference before styles render. Supply the returned string as text content
  * of a nonce-bearing script immediately after the color-scheme meta element.
  */
-declare function getThemeInitializationScript(storageKey?: string): string;
-//#endregion
-export { ResolvedTheme, THEME_STORAGE_KEY, ThemePreference, applyThemePreference, getThemeInitializationScript, isThemePreference, readThemePreference, resolveThemePreference, themePreferences, writeThemePreference };
+export declare function getThemeInitializationScript(storageKey?: string): string;
+//#endregion

package/dist/{workspace-assets-Bg7XhPsk.js → workspace-assets-wW_lQLYK.js}

@@ -1,12 +1,12 @@
 import { composerLinkHref } from "./utils/composer-link.js";
 import { canRequestFavicon, inferFaviconUrl } from "./utils/favicon.js";
-import { Q as TrashIcon, S as FileIcon } from "./icons-cuEtsgj9.js";
+import { Q as TrashIcon, S as FileIcon } from "./icons-CeGfXO21.js";
 import { Button } from "./components/foundations/Button.js";
 import { Tooltip } from "./components/foundations/Tooltip.js";
 import { IconButton } from "./components/foundations/IconButton.js";
 import { ComposerLink } from "./components/ai-sdk/ComposerLink.js";
-import { AppIcon } from "./components/foundations/AppIcon.js";
 import { AlertDialog } from "./components/foundations/AlertDialog.js";
+import { AppIcon } from "./components/foundations/AppIcon.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/_internal/workspace-delete.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.56.1",
+  "version": "0.57.0",
   "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": {
@@ -39,59 +39,59 @@
   },
   "dependencies": {
     "@base-ui/react": "~1.8.0",
-    "@rrweb/replay": "^2.1.1",
-    "@shadcn/react": "^0.2.1",
+    "@rrweb/replay": "^2.1.4",
+    "@shadcn/react": "^0.3.1",
     "@streamdown/cjk": "^1.0.3",
     "@streamdown/code": "^1.1.1",
-    "@tanstack/react-virtual": "^3.14.9",
+    "@tanstack/react-virtual": "^3.14.12",
     "agent-skills-ts-sdk": "^2.4.2",
     "anser": "^2.3.5",
-    "lucide-react": "^1.31.0",
+    "lucide-react": "^1.45.0",
     "react-icons": "^5.7.0",
     "rehype-slug": "^6.0.0",
-    "shiki": "^3.23.0",
-    "simple-icons": "16.28.0",
-    "streamdown": "^2.5.0",
+    "shiki": "^4.4.3",
+    "simple-icons": "16.31.0",
+    "streamdown": "^2.6.0",
     "unist-util-visit": "^5.1.0",
     "yet-another-react-lightbox": "^3.32.2",
-    "@mcp-b/design-tokens": "0.56.1"
+    "@mcp-b/design-tokens": "0.57.0"
   },
   "devDependencies": {
-    "@ai-sdk/react": "^3.0.249",
+    "@ai-sdk/react": "^3.0.285",
     "@cloudflare/codemode": "https://github.com/WebMCP-org/do-runtime/releases/download/rook-sdk-155b267477ca/cloudflare-codemode-0.5.2.tgz",
     "@cloudflare/shell": "https://github.com/WebMCP-org/do-runtime/releases/download/rook-sdk-155b267477ca/cloudflare-shell-0.4.3.tgz",
     "@cloudflare/think": "https://github.com/WebMCP-org/do-runtime/releases/download/rook-sdk-155b267477ca/cloudflare-think-0.18.0.tgz",
-    "@cloudflare/workers-types": "^5.20260811.1",
-    "@storybook/addon-a11y": "^10.5.7",
-    "@storybook/addon-docs": "^10.5.7",
+    "@cloudflare/workers-types": "^5.20260911.1",
+    "@storybook/addon-a11y": "10.5.7",
+    "@storybook/addon-docs": "10.5.7",
     "@storybook/addon-mcp": "0.7.0",
-    "@storybook/addon-vitest": "^10.5.7",
-    "@storybook/tanstack-react": "^10.5.7",
-    "@tanstack/react-form": "^1.33.4",
-    "@tanstack/react-query": "^5.101.4",
-    "@tanstack/react-router": "^1.170.25",
-    "@tanstack/react-store": "^0.9.3",
-    "@tanstack/router-core": "^1.171.21",
+    "@storybook/addon-vitest": "10.5.7",
+    "@storybook/tanstack-react": "10.5.7",
+    "@tanstack/react-form": "^1.33.5",
+    "@tanstack/react-query": "^5.102.8",
+    "@tanstack/react-router": "1.170.25",
+    "@tanstack/react-store": "^0.11.1",
+    "@tanstack/router-core": "1.171.21",
     "@types/hast": "^3.0.5",
-    "@types/node": "^26.2.0",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.4",
-    "@vitest/browser-playwright": "^4.1.10",
-    "@vitest/coverage-v8": "^4.1.10",
-    "@vitest/mocker": "^4.1.10",
+    "@types/node": "^26.5.1",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitest/browser-playwright": "^4.1.11",
+    "@vitest/coverage-v8": "^4.1.11",
+    "@vitest/mocker": "^4.1.11",
     "agents": "https://github.com/WebMCP-org/do-runtime/releases/download/rook-sdk-155b267477ca/agents-0.23.0.tgz",
-    "ai": "^6.0.247",
-    "cloudflare": "^7.0.0",
+    "ai": "^6.0.282",
+    "cloudflare": "^7.1.0",
     "oversight-lint": "0.7.1",
-    "playwright": "~1.61.1",
-    "react": "19.3.0-canary-711c445b-20260722",
-    "react-dom": "19.3.0-canary-711c445b-20260722",
-    "storybook": "^10.5.7",
+    "playwright": "1.61.1",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
+    "storybook": "10.5.7",
     "storybook-addon-oversight": "0.7.0",
     "typescript": "^6.0.3",
-    "vite": "npm:@voidzero-dev/vite-plus-core@0.2.4",
-    "vite-plus": "0.2.4",
-    "vitest": "^4.1.10"
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.3.1",
+    "vite-plus": "0.3.1",
+    "vitest": "^4.1.11"
   },
   "peerDependencies": {
     "@ai-sdk/react": "^3.0.230",
@@ -103,8 +103,8 @@
     "agents": "^0.23.0",
     "ai": "^6.0.228",
     "cloudflare": "^7.0.0",
-    "react": "19.3.0-canary-711c445b-20260722",
-    "react-dom": "19.3.0-canary-711c445b-20260722"
+    "react": "19.3.0 || 19.3.0-canary-711c445b-20260722",
+    "react-dom": "19.3.0 || 19.3.0-canary-711c445b-20260722"
   },
   "peerDependenciesMeta": {
     "@ai-sdk/react": {

package/dist/McpConnectorForm--HB0MEGC.d.ts

@@ -1,39 +0,0 @@
-import { c as McpServerSetupAuth, u as McpServerSetupAuthFieldName } from "./mcp-server-catalog-D9p4gGeJ.js";
-import * as React from "react";
-
-//#region src/components/agents-sdk/McpConnectorForm.d.ts
-type CredentialFieldName = Exclude<McpServerSetupAuthFieldName, "redirectUrl">;
-type McpConnectorFormValues = Readonly<Partial<Record<CredentialFieldName, string>> & {
-  readonly name: string;
-  readonly url: string;
-}>;
-type McpConnectorFormProps = Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit" | "status"> & {
-  /** Authentication metadata that decides which credential fields render. */readonly auth?: McpServerSetupAuth; /** Initial connector values. Publisher client credentials remain app-owned. */
-  readonly defaults?: Partial<McpConnectorFormValues>; /** Optional pattern used to validate the MCP name field. */
-  readonly namePattern?: string; /** Keep a catalog-owned MCP name and URL visible but immutable. */
-  readonly readOnlyServer?: boolean; /** Read-only redirect URL shown for manual OAuth client setup. */
-  readonly redirectUrl?: string; /** Inline connection status announced politely to assistive tech. */
-  readonly status?: React.ReactNode; /** Label for the submit button. */
-  readonly submitLabel?: string; /** Label shown while submit is pending. */
-  readonly submittingLabel?: string; /** Called with normalized connector values after native form validation passes. */
-  readonly onSubmit: (values: McpConnectorFormValues) => void | Promise<void>;
-};
-/** Collects MCP connector settings and optional credentials with native form validation. */
-declare function McpConnectorForm({
-  auth,
-  className,
-  defaults,
-  namePattern,
-  readOnlyServer,
-  redirectUrl,
-  status,
-  submitLabel,
-  submittingLabel,
-  onSubmit,
-  ref,
-  ...props
-}: McpConnectorFormProps & {
-  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLFormElement>;
-}): React.JSX.Element;
-//#endregion
-export { McpConnectorFormProps as n, McpConnectorFormValues as r, McpConnectorForm as t };