@mcp-b/react-components 0.46.6 → 0.47.0

package/dist/components/agents-sdk/WorkspaceProject.js

@@ -0,0 +1,201 @@
+import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { $ as UserIcon, C as FolderIcon, S as FileIcon, j as MessageSquareIcon, u as CalendarIcon } from "../../icons-cuEtsgj9.js";
+import { Button } from "../foundations/Button.js";
+import { IconButton } from "../foundations/IconButton.js";
+import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
+import { EmptyState } from "../foundations/EmptyState.js";
+import { DescriptionList } from "../foundations/DescriptionList.js";
+import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "../foundations/Card.js";
+import { i as WorkspaceDeleteControl, n as WorkspaceComposerLink } from "../../workspace-assets-CxpEHsac.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+//#region src/components/agents-sdk/WorkspaceProject.tsx
+const ORIGIN_LABEL = {
+	user: "From you",
+	routine: "Schedule",
+	messenger: "Messenger"
+};
+const ORIGIN_ICON = {
+	user: /* @__PURE__ */ jsx(UserIcon, {}),
+	routine: /* @__PURE__ */ jsx(CalendarIcon, {}),
+	messenger: /* @__PURE__ */ jsx(MessageSquareIcon, {})
+};
+const ORIGIN_ORDER = [
+	"user",
+	"routine",
+	"messenger"
+];
+function LinkList({ items }) {
+	if (items.length === 1) {
+		const item = items[0];
+		return /* @__PURE__ */ jsx(WorkspaceComposerLink, {
+			kind: "tab",
+			value: item.key,
+			label: item.label,
+			icon: item.icon,
+			hint: item.hint,
+			onOpen: item.onOpen
+		});
+	}
+	return /* @__PURE__ */ jsx("ul", {
+		className: "sigvelo-stack-list",
+		children: items.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(WorkspaceComposerLink, {
+			kind: "tab",
+			value: item.key,
+			label: item.label,
+			icon: item.icon,
+			hint: item.hint,
+			onOpen: item.onOpen
+		}) }, item.key))
+	});
+}
+function ProjectDetails({ project }) {
+	const files = (project.files ?? []).filter((file) => !file.path.endsWith("/PROJECT.md"));
+	const threads = project.threads ?? [];
+	if (files.length === 0 && threads.length === 0) return null;
+	return /* @__PURE__ */ jsxs(DescriptionList.Root, {
+		align: "start",
+		variant: "divided",
+		children: [files.length > 0 ? /* @__PURE__ */ jsxs(DescriptionList.Item, { children: [/* @__PURE__ */ jsx(DescriptionList.Term, { children: "Contents" }), /* @__PURE__ */ jsx(DescriptionList.Details, { children: /* @__PURE__ */ jsx("div", {
+			className: "sigvelo-cluster",
+			children: files.map((file) => /* @__PURE__ */ jsx(WorkspaceComposerLink, {
+				value: file.path,
+				label: file.label,
+				hint: file.path,
+				onOpen: file.onOpen
+			}, file.path))
+		}) })] }) : null, ORIGIN_ORDER.map((origin) => {
+			const grouped = threads.filter((thread) => thread.origin === origin);
+			if (grouped.length === 0) return null;
+			return /* @__PURE__ */ jsxs(DescriptionList.Item, { children: [/* @__PURE__ */ jsx(DescriptionList.Term, { children: ORIGIN_LABEL[origin] }), /* @__PURE__ */ jsx(DescriptionList.Details, { children: /* @__PURE__ */ jsx(LinkList, { items: grouped.map((thread) => ({
+				key: thread.id,
+				label: thread.title,
+				icon: thread.icon ?? ORIGIN_ICON[origin],
+				onOpen: thread.onOpen
+			})) }) })] }, origin);
+		})]
+	});
+}
+function WorkspaceProjectCard({ className, project, ref, ...props }) {
+	const titleId = React.useId();
+	const ariaLabel = props["aria-label"];
+	const ariaLabelledBy = props["aria-labelledby"] ?? (ariaLabel ? void 0 : titleId);
+	return /* @__PURE__ */ jsxs(Card, {
+		...props,
+		ref,
+		role: props.role ?? "article",
+		"aria-labelledby": ariaLabelledBy,
+		"data-slot": "workspace-project-card",
+		size: "sm",
+		className: cx("connected-app-card", className),
+		children: [/* @__PURE__ */ jsxs(CardHeader, { children: [
+			/* @__PURE__ */ jsxs(CardTitle, {
+				id: titleId,
+				className: "connected-app-card__title",
+				render: /* @__PURE__ */ jsx("h3", {}),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "connected-app-card__icon",
+					"aria-hidden": "true",
+					children: project.icon ?? /* @__PURE__ */ jsx(FolderIcon, {})
+				}), project.name]
+			}),
+			project.description ? /* @__PURE__ */ jsx(CardDescription, { children: project.description }) : null,
+			project.onOpen || project.onDelete ? /* @__PURE__ */ jsxs(CardAction, {
+				className: "sigvelo-cluster",
+				children: [project.onOpen ? /* @__PURE__ */ jsx(IconButton, {
+					label: `Open ${project.name}`,
+					tooltip: project.path,
+					variant: "ghost",
+					color: "neutral",
+					onClick: project.onOpen,
+					children: /* @__PURE__ */ jsx(FileIcon, {})
+				}) : null, project.onDelete ? /* @__PURE__ */ jsx(WorkspaceDeleteControl, {
+					name: project.name,
+					onDelete: project.onDelete
+				}) : null]
+			}) : null
+		] }), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(ProjectDetails, { project }) })]
+	});
+}
+/**
+* Compact inline card for one queried PROJECT.md. Identity plus contents — no status.
+*/
+function WorkspaceProjectFileCard({ fallback = null, path, source, ...props }) {
+	const project = useWorkspaceProjects(source).find((candidate) => candidate.path === path);
+	return project ? /* @__PURE__ */ jsx(WorkspaceProjectCard, {
+		...props,
+		project: projectWithSource(project, source)
+	}) : fallback;
+}
+/** Design-system-owned project query shared by panels, cards, and composer context. */
+function useWorkspaceProjects(source) {
+	return useQuery(source.queryOptions).data ?? [];
+}
+/**
+* Workbench list of queried projects. Same card as the inline placement. A
+* query failure with nothing loaded renders as a quiet inline error, never as
+* an empty library.
+*/
+function WorkspaceProjectsPanel({ className, error, projects, onRetry, ref, ...props }) {
+	return /* @__PURE__ */ jsx("section", {
+		ref,
+		"data-slot": "workspace-projects-panel",
+		className: cx("workspace-concept-panel", className),
+		...props,
+		"aria-label": props["aria-label"] ?? "Projects",
+		children: projects.length > 0 ? /* @__PURE__ */ jsx("ul", {
+			className: "sigvelo-stack-list sigvelo-stack",
+			children: projects.map((project) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(WorkspaceProjectCard, { project }) }, project.path))
+		}) : error !== void 0 ? /* @__PURE__ */ jsx(EmptyState, {
+			icon: /* @__PURE__ */ jsx(FolderIcon, {}),
+			title: "Projects unavailable",
+			description: error,
+			children: onRetry ? /* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				variant: "outline",
+				color: "neutral",
+				onClick: onRetry,
+				children: "Retry"
+			}) : null
+		}) : /* @__PURE__ */ jsx(EmptyState, {
+			icon: /* @__PURE__ */ jsx(FolderIcon, {}),
+			title: "No projects"
+		})
+	});
+}
+function projectWithSource(project, source) {
+	return {
+		...project,
+		files: project.files?.map((file) => ({
+			...file,
+			onOpen: source.onOpenFile ? () => source.onOpenFile?.(file.path) : void 0
+		})),
+		threads: project.threads?.map((thread) => ({
+			...thread,
+			onOpen: source.onOpenThread ? () => source.onOpenThread?.(thread.id) : void 0
+		})),
+		onOpen: source.onOpenFile ? () => source.onOpenFile?.(project.path) : void 0,
+		onDelete: source.onDelete ? () => source.onDelete?.(project.path) : void 0
+	};
+}
+function WorkspaceProjectSourcePanel({ source }) {
+	const query = useQuery(source.queryOptions);
+	return /* @__PURE__ */ jsx(WorkspaceProjectsPanel, {
+		projects: (query.data ?? []).map((project) => projectWithSource(project, source)),
+		error: query.isError ? formatErrorMessage(query.error) : void 0,
+		onRetry: query.isError ? () => void query.refetch() : void 0,
+		"aria-busy": query.isFetching || void 0
+	});
+}
+/** Canonical workbench descriptor; hosts supply only the source adapter. */
+function workspaceProjectsPanel(source) {
+	return {
+		id: "projects",
+		label: "Projects",
+		icon: /* @__PURE__ */ jsx(FolderIcon, {}),
+		render: () => /* @__PURE__ */ jsx(WorkspaceProjectSourcePanel, { source })
+	};
+}
+//#endregion
+export { WorkspaceProjectCard, WorkspaceProjectFileCard, WorkspaceProjectsPanel, useWorkspaceProjects, workspaceProjectsPanel };

package/dist/components/agents-sdk/WorkspaceUserScript.d.ts

@@ -0,0 +1,47 @@
+import { CardProps } from "../foundations/Card.js";
+import * as React from "react";
+
+//#region src/components/agents-sdk/WorkspaceUserScript.d.ts
+interface WorkspaceUserScript {
+  /** Workspace path of the `.user.js` file. */
+  path: string;
+  name: string;
+  description?: string;
+  /** `@match` patterns from the file metadata. Displayed as hostnames. */
+  matches: readonly string[];
+  enabled: boolean;
+  /** Brand mark. Defaults to the favicon of the first `@match` origin. */
+  icon?: React.ReactNode;
+  onEnabledChange?: (enabled: boolean) => void;
+  onOpen?: () => void;
+  onDelete?: () => void | Promise<void>;
+}
+interface WorkspaceUserScriptCardProps extends Omit<CardProps, "children" | "hover" | "size" | "title"> {
+  script: WorkspaceUserScript;
+}
+interface WorkspaceUserScriptsPanelProps extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
+  /** Projected user scripts to list; an empty list renders the empty state. */
+  scripts: readonly WorkspaceUserScript[];
+}
+declare function WorkspaceUserScriptCard({
+  className,
+  script,
+  ref,
+  ...props
+}: WorkspaceUserScriptCardProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Workbench list of user-script cards, one per projected script. Renders a
+ * quiet empty state when nothing is projected.
+ */
+declare function WorkspaceUserScriptsPanel({
+  className,
+  ref,
+  scripts,
+  ...props
+}: WorkspaceUserScriptsPanelProps & {
+  ref?: React.Ref<HTMLElement>;
+}): React.JSX.Element;
+//#endregion
+export { WorkspaceUserScript, WorkspaceUserScriptCard, WorkspaceUserScriptCardProps, WorkspaceUserScriptsPanel, WorkspaceUserScriptsPanelProps };

package/dist/components/agents-sdk/WorkspaceUserScript.js

@@ -0,0 +1,146 @@
+import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { P as MonitorIcon, S as FileIcon, m as CodeIcon } from "../../icons-cuEtsgj9.js";
+import { IconButton } from "../foundations/IconButton.js";
+import { EmptyState } from "../foundations/EmptyState.js";
+import { DescriptionList } from "../foundations/DescriptionList.js";
+import { Switch } from "../foundations/Switch.js";
+import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "../foundations/Card.js";
+import { i as WorkspaceDeleteControl, n as WorkspaceComposerLink, t as FaviconMark } from "../../workspace-assets-CxpEHsac.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/agents-sdk/WorkspaceUserScript.tsx
+function matchAsUrl(match) {
+	const withoutGlobs = match.replace(/^\*:/, "https:").replaceAll("*", "");
+	const candidate = withoutGlobs.includes("://") ? withoutGlobs : `https://${withoutGlobs}`;
+	try {
+		return new URL(candidate);
+	} catch {
+		return;
+	}
+}
+function siteFromMatch(match) {
+	const trimmed = match.trim();
+	if (!trimmed) return void 0;
+	if (trimmed === "*" || trimmed === "*://*" || trimmed === "*://*/*" || trimmed === "<all_urls>") return "All sites";
+	return matchAsUrl(trimmed)?.hostname.replace(/^\./, "").replace(/^www\./, "") || void 0;
+}
+function sitesFromMatches(matches) {
+	const sites = [];
+	for (const match of matches) {
+		const site = siteFromMatch(match);
+		if (!site || sites.some((item) => item.site === site)) continue;
+		sites.push({
+			site,
+			match,
+			href: matchAsUrl(match)?.href
+		});
+	}
+	return sites;
+}
+function ScriptIcon({ script }) {
+	if (script.icon) return script.icon;
+	return /* @__PURE__ */ jsx(FaviconMark, {
+		href: script.matches.map((match) => matchAsUrl(match)?.href).find(Boolean),
+		fallback: /* @__PURE__ */ jsx(CodeIcon, {})
+	});
+}
+function ScriptSwitch({ script }) {
+	return /* @__PURE__ */ jsx(Switch.Root, {
+		size: "sm",
+		checked: script.enabled,
+		disabled: script.onEnabledChange == null,
+		"aria-label": `${script.enabled ? "Disable" : "Enable"} ${script.name}`,
+		onCheckedChange: (checked) => {
+			if (typeof checked === "boolean") script.onEnabledChange?.(checked);
+		},
+		children: /* @__PURE__ */ jsx(Switch.Thumb, {})
+	});
+}
+function SiteList({ matches }) {
+	const sites = sitesFromMatches(matches);
+	if (sites.length === 0) return null;
+	return /* @__PURE__ */ jsx(DescriptionList.Root, {
+		align: "start",
+		variant: "divided",
+		children: /* @__PURE__ */ jsxs(DescriptionList.Item, { children: [/* @__PURE__ */ jsx(DescriptionList.Term, { children: "Sites" }), /* @__PURE__ */ jsx(DescriptionList.Details, { children: /* @__PURE__ */ jsx("div", {
+			className: "sigvelo-cluster",
+			children: sites.map(({ href, match, site }) => /* @__PURE__ */ jsx(WorkspaceComposerLink, {
+				kind: "tab",
+				value: site,
+				label: site,
+				hint: match,
+				icon: /* @__PURE__ */ jsx(FaviconMark, {
+					href,
+					fallback: /* @__PURE__ */ jsx(MonitorIcon, {})
+				})
+			}, site))
+		}) })] })
+	});
+}
+function WorkspaceUserScriptCard({ className, script, ref, ...props }) {
+	const titleId = React.useId();
+	const ariaLabel = props["aria-label"];
+	const ariaLabelledBy = props["aria-labelledby"] ?? (ariaLabel ? void 0 : titleId);
+	return /* @__PURE__ */ jsxs(Card, {
+		...props,
+		ref,
+		role: props.role ?? "article",
+		"aria-labelledby": ariaLabelledBy,
+		"data-slot": "workspace-user-script-card",
+		size: "sm",
+		className: cx("connected-app-card", className),
+		children: [/* @__PURE__ */ jsxs(CardHeader, { children: [
+			/* @__PURE__ */ jsxs(CardTitle, {
+				id: titleId,
+				className: "connected-app-card__title",
+				render: /* @__PURE__ */ jsx("h3", {}),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "connected-app-card__icon",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx(ScriptIcon, { script })
+				}), script.name]
+			}),
+			script.description ? /* @__PURE__ */ jsx(CardDescription, { children: script.description }) : null,
+			/* @__PURE__ */ jsxs(CardAction, {
+				className: "sigvelo-cluster",
+				children: [
+					/* @__PURE__ */ jsx(ScriptSwitch, { script }),
+					script.onOpen ? /* @__PURE__ */ jsx(IconButton, {
+						label: `Open ${script.name}`,
+						tooltip: script.path,
+						variant: "ghost",
+						color: "neutral",
+						onClick: script.onOpen,
+						children: /* @__PURE__ */ jsx(FileIcon, {})
+					}) : null,
+					script.onDelete ? /* @__PURE__ */ jsx(WorkspaceDeleteControl, {
+						name: script.name,
+						onDelete: script.onDelete
+					}) : null
+				]
+			})
+		] }), script.matches.length > 0 ? /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(SiteList, { matches: script.matches }) }) : null]
+	});
+}
+/**
+* Workbench list of user-script cards, one per projected script. Renders a
+* quiet empty state when nothing is projected.
+*/
+function WorkspaceUserScriptsPanel({ className, ref, scripts, ...props }) {
+	return /* @__PURE__ */ jsx("section", {
+		ref,
+		"data-slot": "workspace-user-scripts-panel",
+		className: cx("workspace-concept-panel", className),
+		...props,
+		"aria-label": props["aria-label"] ?? "User scripts",
+		children: scripts.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
+			icon: /* @__PURE__ */ jsx(CodeIcon, {}),
+			title: "No scripts"
+		}) : /* @__PURE__ */ jsx("ul", {
+			className: "sigvelo-stack-list sigvelo-stack",
+			children: scripts.map((script) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(WorkspaceUserScriptCard, { script }) }, script.path))
+		})
+	});
+}
+//#endregion
+export { WorkspaceUserScriptCard, WorkspaceUserScriptsPanel };

package/dist/components/ai-sdk/Activity.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { p as ChevronRightIcon } from "../../icons-cuEtsgj9.js";
 import { Collapsible } from "../foundations/Collapsible.js";
 import { useExpansionState } from "./ExpansionState.js";
-import { p as ChevronRightIcon } from "../../icons-BNEY4gO5.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai-sdk/Activity.tsx

package/dist/components/ai-sdk/AgentChatStartScreen.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { nt as XIcon } from "../../icons-BNEY4gO5.js";
+import { nt as XIcon } from "../../icons-cuEtsgj9.js";
 import { Button } from "../foundations/Button.js";
 import { IconButton } from "../foundations/IconButton.js";
 import { PromptInputTray } from "./PromptInput.js";

package/dist/components/ai-sdk/Approval.js

@@ -1,8 +1,8 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { z as PencilIcon } from "../../icons-BNEY4gO5.js";
+import { R as PencilIcon } from "../../icons-cuEtsgj9.js";
 import { Button } from "../foundations/Button.js";
-import { Kbd } from "../foundations/Kbd.js";
 import { o as formatUnknownValue } from "../../format-COCyV98Z.js";
+import { Kbd } from "../foundations/Kbd.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai-sdk/Approval.tsx

package/dist/components/ai-sdk/Artifact.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { et as WarningIcon, nt as XIcon, q as SpinnerIcon } from "../../icons-BNEY4gO5.js";
+import { K as SpinnerIcon, et as WarningIcon, nt as XIcon } from "../../icons-cuEtsgj9.js";
 import { Button, buttonVariants } from "../foundations/Button.js";
 import { IconButton } from "../foundations/IconButton.js";
 import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";

package/dist/components/ai-sdk/ChainOfThought.d.ts

@@ -1,5 +1,5 @@
 import { Collapsible } from "../foundations/Collapsible.js";
-import { E as IconProps } from "../../icons-D0Pd2P9v.js";
+import { E as IconProps } from "../../icons-CCZGYUwU.js";
 import * as React from "react";
 
 //#region src/components/ai-sdk/ChainOfThought.d.ts

package/dist/components/ai-sdk/ChainOfThought.js

@@ -1,6 +1,6 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { K as SpinnerIcon, _ as DotIcon, d as CheckIcon, p as ChevronRightIcon } from "../../icons-cuEtsgj9.js";
 import { Collapsible } from "../foundations/Collapsible.js";
-import { _ as DotIcon, d as CheckIcon, p as ChevronRightIcon, q as SpinnerIcon } from "../../icons-BNEY4gO5.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai-sdk/ChainOfThought.tsx

package/dist/components/ai-sdk/Checkpoint.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { s as BookmarkIcon } from "../../icons-BNEY4gO5.js";
+import { s as BookmarkIcon } from "../../icons-cuEtsgj9.js";
 import { Marker, MarkerIcon } from "../foundations/Marker.js";
 import "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/ai-sdk/CodeBlock.js

@@ -1,2 +1,2 @@
-import { a as CodeBlockCopyButton, c as CodeBlockLanguageSelector, d as CodeBlockLanguageSelectorTrigger, f as CodeBlockLanguageSelectorValue, i as CodeBlockContent, l as CodeBlockLanguageSelectorContent, m as CODE_BLOCK_LANGUAGES, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock, u as CodeBlockLanguageSelectorItem } from "../../CodeBlock-BpooTofO.js";
+import { a as CodeBlockCopyButton, c as CodeBlockLanguageSelector, d as CodeBlockLanguageSelectorTrigger, f as CodeBlockLanguageSelectorValue, i as CodeBlockContent, l as CodeBlockLanguageSelectorContent, m as CODE_BLOCK_LANGUAGES, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock, u as CodeBlockLanguageSelectorItem } from "../../CodeBlock-DMHZiw86.js";
 export { CODE_BLOCK_LANGUAGES, CodeBlock, CodeBlockActions, CodeBlockContainer, CodeBlockContent, CodeBlockCopyButton, CodeBlockFilename, CodeBlockHeader, CodeBlockLanguageSelector, CodeBlockLanguageSelectorContent, CodeBlockLanguageSelectorItem, CodeBlockLanguageSelectorTrigger, CodeBlockLanguageSelectorValue, CodeBlockTitle };

package/dist/components/ai-sdk/ComposerLink.d.ts

@@ -21,7 +21,10 @@ declare function ComposerLink({
   children,
   onClick,
   style,
+  ref,
   ...props
-}: ComposerLinkProps): React.JSX.Element;
+}: ComposerLinkProps & {
+  ref?: React.Ref<HTMLAnchorElement>;
+}): React.JSX.Element;
 //#endregion
 export { ComposerLink, ComposerLinkProps, composerLinkAccent, composerLinkIconSrc, composerLinkUsesCube };

package/dist/components/ai-sdk/ComposerLink.js

@@ -1,7 +1,8 @@
 import { brandHexFromIconSrc, parseComposerHref, sampleImageAccent } from "../../utils/composer-link.js";
 import { getMcpServerIconSrc } from "../../utils/mcp-server-catalog.js";
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { c as BoxIcon } from "../../icons-BNEY4gO5.js";
+import { c as BoxIcon } from "../../icons-cuEtsgj9.js";
+import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
 import { n as findCatalogMcpServerCard } from "../../mcp-server-7NR24ASj.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -74,7 +75,7 @@ function ComposerLinkIcon({ icon, parts }) {
 * skills, tabs, and files. The href is the source of truth; the visible node
 * is text plus an optional brand mark, not a button chip.
 */
-function ComposerLink({ href, icon, className, children, onClick, style, ...props }) {
+function ComposerLink({ href, icon, className, children, onClick, style, ref, ...props }) {
 	const parts = parseComposerHref(href);
 	const kind = parts?.kind;
 	const accent = composerLinkAccent(parts);
@@ -84,7 +85,7 @@ function ComposerLink({ href, icon, className, children, onClick, style, ...prop
 		if (link) bindSampledIconColor(link, accent);
 	}, [accent, href]);
 	return /* @__PURE__ */ jsxs("a", {
-		ref: linkRef,
+		ref: mergeRefs(linkRef, ref),
 		className: cx("composer-link", className),
 		"data-composer-link": kind,
 		href,

package/dist/components/ai-sdk/ConnectedAppCards.d.ts

@@ -3,9 +3,29 @@ import * as React from "react";
 
 //#region src/components/ai-sdk/ConnectedAppCards.d.ts
 type ConnectedAppCardState = "pending" | "sent" | "denied";
+/**
+ * Lifecycle of persisting the visible draft. Absent means saved. While a save
+ * is in flight or failed the card's release action is disabled, and a failed
+ * save is shown inline with its retry affordance — a draft must never release
+ * content the backing store does not hold.
+ */
+type ConnectedAppCardSaveState = {
+  status: "saving";
+} | {
+  status: "error";
+  message: string;
+  onRetry?: () => void;
+};
 type ConnectedAppCardProps = Omit<CardProps, "children" | "hover" | "size" | "title" | "onChange"> & {
-  /** Lifecycle of the draft. Pending can be edited; sent and denied are settled. */state?: ConnectedAppCardState; /** Optional provider mark. The domain's generic icon is used by default. */
+  /** Lifecycle of the draft. Pending can be edited; sent and denied are settled. */state?: ConnectedAppCardState; /** Persistence lifecycle of the visible draft. Absent means saved. */
+  saveState?: ConnectedAppCardSaveState; /** Optional provider mark. The domain's generic icon is used by default. */
   icon?: React.ReactNode;
+  /**
+   * File-level controls rendered beside the status in the header, such as Open
+   * and Delete. The header grid owns exactly one action cell, so these share it
+   * with the status rather than competing for a second one.
+   */
+  headerActions?: React.ReactNode;
 };
 interface EmailMessageDraft {
   from?: string;
@@ -103,4 +123,4 @@ declare function CalendarEventCard({
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 //#endregion
-export { CalendarEventCard, CalendarEventCardProps, CalendarEventDraft, ConnectedAppCardState, EmailMessageCard, EmailMessageCardProps, EmailMessageDraft, SlackMessageCard, SlackMessageCardProps, SlackMessageDraft };
+export { CalendarEventCard, CalendarEventCardProps, CalendarEventDraft, ConnectedAppCardSaveState, ConnectedAppCardState, EmailMessageCard, EmailMessageCardProps, EmailMessageDraft, SlackMessageCard, SlackMessageCardProps, SlackMessageDraft };