@mcp-b/react-components 0.45.0 → 0.46.1

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

@@ -0,0 +1,111 @@
+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 { n as findCatalogMcpServerCard } from "../../mcp-server-7NR24ASj.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ai-sdk/ComposerLink.tsx
+function composerLinkIconSrc(parts) {
+	if (!parts) return void 0;
+	if (parts.iconSrc) return parts.iconSrc;
+	if (parts.kind !== "mcp") return void 0;
+	const card = findCatalogMcpServerCard({
+		id: parts.value,
+		name: parts.value
+	});
+	return card ? getMcpServerIconSrc(card) : void 0;
+}
+function composerLinkUsesCube(parts) {
+	if (!parts) return false;
+	if (parts.chromeIcon === "box") return true;
+	return !composerLinkIconSrc(parts) && (parts.kind === "command" || parts.kind === "skill");
+}
+function composerLinkAccent(parts) {
+	const fromHref = brandHexFromIconSrc(parts?.iconSrc);
+	if (fromHref) return fromHref;
+	const fromSrc = brandHexFromIconSrc(composerLinkIconSrc(parts));
+	if (fromSrc) return fromSrc;
+	if (parts?.kind !== "mcp") return void 0;
+	const card = findCatalogMcpServerCard({
+		id: parts.value,
+		name: parts.value
+	});
+	return card ? brandHexFromIconSrc(getMcpServerIconSrc(card)) : void 0;
+}
+function applyComposerLinkColor(element, color) {
+	if (color) element.style.setProperty("--composer-link-color", color);
+}
+function bindSampledIconColor(link, known) {
+	if (known) {
+		applyComposerLinkColor(link, known);
+		return;
+	}
+	const image = link.querySelector("img");
+	if (!(image instanceof HTMLImageElement)) return;
+	const apply = () => {
+		const sampled = sampleImageAccent(image);
+		if (sampled) applyComposerLinkColor(link, sampled);
+	};
+	if (image.complete) apply();
+	else image.addEventListener("load", apply, { once: true });
+}
+function ComposerLinkIcon({ icon, parts }) {
+	if (icon) return /* @__PURE__ */ jsx("span", {
+		className: "composer-link__icon",
+		"aria-hidden": "true",
+		children: icon
+	});
+	const src = composerLinkIconSrc(parts);
+	if (src) return /* @__PURE__ */ jsx("img", {
+		alt: "",
+		"aria-hidden": "true",
+		className: "composer-link__icon",
+		decoding: "async",
+		draggable: false,
+		referrerPolicy: "no-referrer",
+		src
+	});
+	if (composerLinkUsesCube(parts)) return /* @__PURE__ */ jsx(BoxIcon, { className: "composer-link__icon" });
+	return null;
+}
+/**
+* Inline identity link for composer entities: slash commands, MCP mentions,
+* 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 }) {
+	const parts = parseComposerHref(href);
+	const kind = parts?.kind;
+	const accent = composerLinkAccent(parts);
+	const linkRef = React.useRef(null);
+	React.useLayoutEffect(() => {
+		const link = linkRef.current;
+		if (link) bindSampledIconColor(link, accent);
+	}, [accent, href]);
+	return /* @__PURE__ */ jsxs("a", {
+		ref: linkRef,
+		className: cx("composer-link", className),
+		"data-composer-link": kind,
+		href,
+		rel: "nofollow",
+		style: accent ? {
+			"--composer-link-color": accent,
+			...style
+		} : style,
+		onClick: (event) => {
+			event.preventDefault();
+			onClick?.(event);
+		},
+		...props,
+		children: [/* @__PURE__ */ jsx(ComposerLinkIcon, {
+			icon,
+			parts
+		}), /* @__PURE__ */ jsx("span", {
+			className: "composer-link__label",
+			children
+		})]
+	});
+}
+//#endregion
+export { ComposerLink, composerLinkAccent, composerLinkIconSrc, composerLinkUsesCube };

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

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { K as SlackIcon, O as MailIcon, _ as DotIcon, d as CheckIcon, nt as XIcon, u as CalendarIcon } from "../../icons-DbrksZyY.js";
+import { K as SlackIcon, O as MailIcon, _ as DotIcon, d as CheckIcon, nt as XIcon, u as CalendarIcon } from "../../icons-BNEY4gO5.js";
 import { Button } from "../foundations/Button.js";
 import { Field } from "../foundations/Field.js";
 import { Textarea } from "../foundations/Textarea.js";

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

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { n as ArrowDownIcon, v as DownloadIcon } from "../../icons-DbrksZyY.js";
+import { n as ArrowDownIcon, v as DownloadIcon } from "../../icons-BNEY4gO5.js";
 import { IconButton } from "../foundations/IconButton.js";
 import { t as assignRef } from "../../merge-refs-DF_7w2x_.js";
 import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport } from "./MessageScroller.js";

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

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { $ as TrashIcon, B as PlayIcon, R as PauseIcon, Z as TargetIcon } from "../../icons-DbrksZyY.js";
+import { $ as TrashIcon, B as PlayIcon, R as PauseIcon, Z as TargetIcon } from "../../icons-BNEY4gO5.js";
 import { IconButton } from "../foundations/IconButton.js";
 import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
 import * as React from "react";

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

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { B as PlayIcon } from "../../icons-DbrksZyY.js";
+import { B as PlayIcon } from "../../icons-BNEY4gO5.js";
 import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
 import { Card } from "../foundations/Card.js";
 import * as React from "react";

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

@@ -1,9 +1,11 @@
+import { parseComposerHref } from "../../utils/composer-link.js";
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { S as FileIcon, i as ArrowRightIcon, r as ArrowLeftIcon } from "../../icons-DbrksZyY.js";
+import { S as FileIcon, i as ArrowRightIcon, r as ArrowLeftIcon } from "../../icons-BNEY4gO5.js";
 import { Button } from "../foundations/Button.js";
 import { IconButton } from "../foundations/IconButton.js";
 import { t as AttachmentPreview } from "../../attachment-preview-1CXJvrmb.js";
 import { n as clamp } from "../../format-COCyV98Z.js";
+import { ComposerLink } from "./ComposerLink.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cjk } from "@streamdown/cjk";
@@ -78,7 +80,21 @@ const streamdownPlugins = {
 	cjk,
 	code
 };
-const messageResponseComponents = { img: "img" };
+function MessageResponseLink({ href, children, ...props }) {
+	return href && parseComposerHref(href) ? /* @__PURE__ */ jsx(ComposerLink, {
+		href,
+		children
+	}) : /* @__PURE__ */ jsx("a", {
+		href,
+		"data-streamdown": "link",
+		...props,
+		children
+	});
+}
+const messageResponseComponents = {
+	img: "img",
+	a: MessageResponseLink
+};
 const MessageResponse = React.memo(function MessageResponse({ className, components, ...props }) {
 	return /* @__PURE__ */ jsx(Streamdown, {
 		className: cx("message__response", "sigvelo-reader-text", className),

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

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { n as ArrowDownIcon } from "../../icons-DbrksZyY.js";
+import { n as ArrowDownIcon } from "../../icons-BNEY4gO5.js";
 import { Button } from "../foundations/Button.js";
 import { t as messageScrollerContract } from "../../message-scroller-C8cplcQO.js";
 import "react";

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

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { n as ArrowDownIcon } from "../../icons-DbrksZyY.js";
+import { n as ArrowDownIcon } from "../../icons-BNEY4gO5.js";
 import { Button } from "../foundations/Button.js";
 import { t as messageScrollerContract } from "../../message-scroller-C8cplcQO.js";
 import * as React from "react";

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

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { _ as DotIcon, d as CheckIcon, i as ArrowRightIcon } from "../../icons-DbrksZyY.js";
+import { _ as DotIcon, d as CheckIcon, i as ArrowRightIcon } from "../../icons-BNEY4gO5.js";
 import { Popover } from "../foundations/Popover.js";
 import { t as ProgressRing } from "../../progress-ring-Cgii90dC.js";
 import * as React from "react";

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

@@ -1,2 +1,2 @@
-import { $ as PromptInputReferences, A as PromptInputContextItem, B as PromptInputHoverCard, C as PromptInputButtonProps, Ct as usePromptInputAttachments, D as PromptInputCommandDefinition, E as PromptInputCommandComposerProps, F as PromptInputDictationProps, G as PromptInputHoverCardTriggerProps, H as PromptInputHoverCardContentProps, I as PromptInputFooter, J as PromptInputPermissionSelectorProps, K as PromptInputMessage, L as PromptInputFooterProps, M as PromptInputContextSelectorProps, N as PromptInputControllerProps, O as PromptInputCommandTrigger, P as PromptInputDictation, Q as PromptInputReference, R as PromptInputHeader, S as PromptInputButton, St as TooltipSide, T as PromptInputCommandComposer, Tt as useProviderAttachments, U as PromptInputHoverCardProps, V as PromptInputHoverCardContent, W as PromptInputHoverCardTrigger, X as PromptInputProvider, Y as PromptInputProps, Z as PromptInputProviderProps, _ as PromptInputAttachmentProps, _t as PromptInputTooltipConfig, a as PromptInputActionAddAttachmentsProps, at as PromptInputTabBodyProps, b as PromptInputBody, bt as PromptInputVoiceInput, c as PromptInputActionMenu, ct as PromptInputTabLabel, d as PromptInputActionMenuItem, dt as PromptInputTabsList, et as PromptInputReferencesProps, f as PromptInputActionMenuItemProps, ft as PromptInputTabsListProps, g as PromptInputAttachment, gt as PromptInputToolsProps, h as PromptInputActionMenuTriggerProps, ht as PromptInputTools, i as PromptInputActionAddAttachments, it as PromptInputTabBody, j as PromptInputContextSelector, k as PromptInputContextAction, l as PromptInputActionMenuContent, lt as PromptInputTabLabelProps, m as PromptInputActionMenuTrigger, mt as PromptInputTextareaProps, n as PermissionMode, nt as PromptInputSubmitProps, o as PromptInputActionAddScreenshot, ot as PromptInputTabItem, p as PromptInputActionMenuProps, pt as PromptInputTextarea, q as PromptInputPermissionSelector, r as PromptInput, rt as PromptInputTab, s as PromptInputActionAddScreenshotProps, st as PromptInputTabItemProps, t as AttachmentsContext, tt as PromptInputSubmit, u as PromptInputActionMenuContentProps, ut as PromptInputTabProps, v as PromptInputAttachments, vt as PromptInputTray, w as PromptInputButtonTooltip, wt as usePromptInputController, x as PromptInputBodyProps, xt as TextInputContext, y as PromptInputAttachmentsProps, yt as PromptInputTrayProps, z as PromptInputHeaderProps } from "../../PromptInput-BRX7FhjH.js";
-export { AttachmentsContext, PermissionMode, PromptInput, PromptInputActionAddAttachments, PromptInputActionAddAttachmentsProps, PromptInputActionAddScreenshot, PromptInputActionAddScreenshotProps, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuContentProps, PromptInputActionMenuItem, PromptInputActionMenuItemProps, PromptInputActionMenuProps, PromptInputActionMenuTrigger, PromptInputActionMenuTriggerProps, PromptInputAttachment, PromptInputAttachmentProps, PromptInputAttachments, PromptInputAttachmentsProps, PromptInputBody, PromptInputBodyProps, PromptInputButton, PromptInputButtonProps, PromptInputButtonTooltip, PromptInputCommandComposer, PromptInputCommandComposerProps, PromptInputCommandDefinition, PromptInputCommandTrigger, PromptInputContextAction, PromptInputContextItem, PromptInputContextSelector, PromptInputContextSelectorProps, PromptInputControllerProps, PromptInputDictation, PromptInputDictationProps, PromptInputFooter, PromptInputFooterProps, PromptInputHeader, PromptInputHeaderProps, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardContentProps, PromptInputHoverCardProps, PromptInputHoverCardTrigger, PromptInputHoverCardTriggerProps, PromptInputMessage, PromptInputPermissionSelector, PromptInputPermissionSelectorProps, PromptInputProps, PromptInputProvider, PromptInputProviderProps, PromptInputReference, PromptInputReferences, PromptInputReferencesProps, PromptInputSubmit, PromptInputSubmitProps, PromptInputTab, PromptInputTabBody, PromptInputTabBodyProps, PromptInputTabItem, PromptInputTabItemProps, PromptInputTabLabel, PromptInputTabLabelProps, PromptInputTabProps, PromptInputTabsList, PromptInputTabsListProps, PromptInputTextarea, PromptInputTextareaProps, PromptInputTools, PromptInputToolsProps, PromptInputTooltipConfig, PromptInputTray, PromptInputTrayProps, PromptInputVoiceInput, TextInputContext, TooltipSide, usePromptInputAttachments, usePromptInputController, useProviderAttachments };
+import { $ as PromptInputSubmit, A as PromptInputContextItem, B as PromptInputHoverCard, C as PromptInputButtonProps, Ct as usePromptInputController, D as PromptInputCommandDefinition, E as PromptInputCommandComposerProps, F as PromptInputDictationProps, G as PromptInputHoverCardTriggerProps, H as PromptInputHoverCardContentProps, I as PromptInputFooter, J as PromptInputPermissionSelectorProps, K as PromptInputMessage, L as PromptInputFooterProps, M as PromptInputContextSelectorProps, N as PromptInputControllerProps, O as PromptInputCommandTrigger, P as PromptInputDictation, Q as PromptInputReference, R as PromptInputHeader, S as PromptInputButton, St as usePromptInputAttachments, T as PromptInputCommandComposer, U as PromptInputHoverCardProps, V as PromptInputHoverCardContent, W as PromptInputHoverCardTrigger, X as PromptInputProvider, Y as PromptInputProps, Z as PromptInputProviderProps, _ as PromptInputAttachmentProps, _t as PromptInputTrayProps, a as PromptInputActionAddAttachmentsProps, at as PromptInputTabItemProps, b as PromptInputBody, bt as TooltipSide, c as PromptInputActionMenu, ct as PromptInputTabProps, d as PromptInputActionMenuItem, dt as PromptInputTextarea, et as PromptInputSubmitProps, f as PromptInputActionMenuItemProps, ft as PromptInputTextareaProps, g as PromptInputAttachment, gt as PromptInputTray, h as PromptInputActionMenuTriggerProps, ht as PromptInputTooltipConfig, i as PromptInputActionAddAttachments, it as PromptInputTabItem, j as PromptInputContextSelector, k as PromptInputContextAction, l as PromptInputActionMenuContent, lt as PromptInputTabsList, m as PromptInputActionMenuTrigger, mt as PromptInputToolsProps, n as PermissionMode, nt as PromptInputTabBody, o as PromptInputActionAddScreenshot, ot as PromptInputTabLabel, p as PromptInputActionMenuProps, pt as PromptInputTools, q as PromptInputPermissionSelector, r as PromptInput, rt as PromptInputTabBodyProps, s as PromptInputActionAddScreenshotProps, st as PromptInputTabLabelProps, t as AttachmentsContext, tt as PromptInputTab, u as PromptInputActionMenuContentProps, ut as PromptInputTabsListProps, v as PromptInputAttachments, vt as PromptInputVoiceInput, w as PromptInputButtonTooltip, wt as useProviderAttachments, x as PromptInputBodyProps, xt as composerLinksToReferences, y as PromptInputAttachmentsProps, yt as TextInputContext, z as PromptInputHeaderProps } from "../../PromptInput-DtJHyp0S.js";
+export { AttachmentsContext, PermissionMode, PromptInput, PromptInputActionAddAttachments, PromptInputActionAddAttachmentsProps, PromptInputActionAddScreenshot, PromptInputActionAddScreenshotProps, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuContentProps, PromptInputActionMenuItem, PromptInputActionMenuItemProps, PromptInputActionMenuProps, PromptInputActionMenuTrigger, PromptInputActionMenuTriggerProps, PromptInputAttachment, PromptInputAttachmentProps, PromptInputAttachments, PromptInputAttachmentsProps, PromptInputBody, PromptInputBodyProps, PromptInputButton, PromptInputButtonProps, PromptInputButtonTooltip, PromptInputCommandComposer, PromptInputCommandComposerProps, PromptInputCommandDefinition, PromptInputCommandTrigger, PromptInputContextAction, PromptInputContextItem, PromptInputContextSelector, PromptInputContextSelectorProps, PromptInputControllerProps, PromptInputDictation, PromptInputDictationProps, PromptInputFooter, PromptInputFooterProps, PromptInputHeader, PromptInputHeaderProps, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardContentProps, PromptInputHoverCardProps, PromptInputHoverCardTrigger, PromptInputHoverCardTriggerProps, PromptInputMessage, PromptInputPermissionSelector, PromptInputPermissionSelectorProps, PromptInputProps, PromptInputProvider, PromptInputProviderProps, PromptInputReference, PromptInputSubmit, PromptInputSubmitProps, PromptInputTab, PromptInputTabBody, PromptInputTabBodyProps, PromptInputTabItem, PromptInputTabItemProps, PromptInputTabLabel, PromptInputTabLabelProps, PromptInputTabProps, PromptInputTabsList, PromptInputTabsListProps, PromptInputTextarea, PromptInputTextareaProps, PromptInputTools, PromptInputToolsProps, PromptInputTooltipConfig, PromptInputTray, PromptInputTrayProps, PromptInputVoiceInput, TextInputContext, TooltipSide, composerLinksToReferences, usePromptInputAttachments, usePromptInputController, useProviderAttachments };

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

@@ -1,5 +1,6 @@
+import { composerTriggerMatch, parseComposerLinks, replaceComposerTrigger } from "../../utils/composer-link.js";
 import { n as mergeBaseClassName, t as cx } from "../../class-names-BiMDVpUo.js";
-import { C as FolderIcon, J as SquareIcon, L as PaperclipIcon, M as MicrophoneIcon, P as MonitorIcon, S as FileIcon, V as PlusIcon, Y as StopIcon, a as ArrowUpIcon, d as CheckIcon, et as WarningIcon, f as ChevronDownIcon, nt as XIcon, q as SpinnerIcon, tt as WrenchIcon } from "../../icons-DbrksZyY.js";
+import { C as FolderIcon, J as SquareIcon, L as PaperclipIcon, M as MicrophoneIcon, P as MonitorIcon, S as FileIcon, V as PlusIcon, Y as StopIcon, a as ArrowUpIcon, d as CheckIcon, et as WarningIcon, f as ChevronDownIcon, nt as XIcon, q as SpinnerIcon, tt as WrenchIcon } from "../../icons-BNEY4gO5.js";
 import { Button } from "../foundations/Button.js";
 import { Tooltip } from "../foundations/Tooltip.js";
 import { IconButton } from "../foundations/IconButton.js";
@@ -11,6 +12,8 @@ import { Tabs } from "../foundations/Tabs.js";
 import { t as AttachmentPreview } from "../../attachment-preview-1CXJvrmb.js";
 import { a as formatErrorMessage, i as formatClock, n as clamp } from "../../format-COCyV98Z.js";
 import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
+import { ComposerLink } from "./ComposerLink.js";
+import { PromptInputComposerEditor, readComposerDom, writeComposerDom } from "./PromptInputComposerEditor.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai-sdk/PromptInput.tsx
@@ -235,17 +238,21 @@ function PromptInput({ className, accept, multiple, globalDrop, syncHiddenInput,
 	]);
 	const handleSubmit = React.useCallback(async (event) => {
 		event.preventDefault();
-		const textarea = event.currentTarget.querySelector("textarea[data-prompt-input-textarea=\"true\"]");
-		const text = controller?.textInput.value ?? textarea?.value.trim() ?? "";
+		const field = event.currentTarget.querySelector("[data-prompt-input-textarea=\"true\"]");
+		const fieldText = field instanceof HTMLTextAreaElement ? field.value : field?.isContentEditable ? readComposerDom(field) : "";
+		const text = (controller?.textInput.value ?? fieldText).trim();
 		const submittedFiles = await Promise.all(files.map(resolveSubmittedFile));
 		try {
 			const submission = onSubmit?.({
 				text,
 				files: submittedFiles
 			}, event);
-			if (!controller && textarea) {
-				textarea.value = "";
-				textarea.dispatchEvent(new Event("input", { bubbles: true }));
+			if (!controller && field instanceof HTMLTextAreaElement) {
+				field.value = "";
+				field.dispatchEvent(new Event("input", { bubbles: true }));
+			} else if (!controller && field?.isContentEditable) {
+				field.replaceChildren();
+				field.dispatchEvent(new Event("input", { bubbles: true }));
 			}
 			controller?.textInput.clear();
 			clearAttachments();
@@ -525,10 +532,11 @@ function PromptInputDictation({ voice, beforeStart, className, disabled, ref, ..
 			voice.clear();
 			return;
 		}
-		const textarea = buttonRef.current?.form?.querySelector("textarea[data-prompt-input-textarea=\"true\"]");
-		if (!textarea) return;
-		Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, "value")?.set?.call(textarea, appendDictationTranscript(textarea.value, addition));
-		textarea.dispatchEvent(new Event("input", { bubbles: true }));
+		const field = buttonRef.current?.form?.querySelector("[data-prompt-input-textarea=\"true\"]");
+		if (!field) return;
+		if (field instanceof HTMLTextAreaElement) Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, "value")?.set?.call(field, appendDictationTranscript(field.value, addition));
+		else if (field.isContentEditable) writeComposerDom(field, appendDictationTranscript(readComposerDom(field), addition));
+		field.dispatchEvent(new Event("input", { bubbles: true }));
 		voice.clear();
 	}, [
 		controller,
@@ -988,25 +996,43 @@ function PromptInputTabLabel({ className, ref, ...props }) {
 		...props
 	});
 }
-function PromptInputTabItem({ className, ref, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
+function PromptInputTabItem({ className, href, icon, children, ref, ...props }) {
+	if (href) return /* @__PURE__ */ jsx(ComposerLink, {
+		href,
+		icon,
+		className: cx("prompt-input__tab-item", className),
+		children
+	});
+	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: cx("prompt-input__tab-item", className),
-		...props
+		...props,
+		children: [icon, children]
 	});
 }
+function composerLinksToReferences(text) {
+	return parseComposerLinks(text).map((link) => ({
+		id: `${link.kind}:${link.value}`,
+		value: link.value,
+		label: link.label,
+		href: link.href,
+		iconSrc: link.iconSrc,
+		trigger: link.kind === "mcp" || link.kind === "tab" ? "@" : "/"
+	}));
+}
 /**
-* Controlled PromptInput textarea with slash-command discovery. The host owns
-* both the command catalog and the draft policy applied after selection.
+* Controlled composer field with slash-command and mention discovery.
+* Selection inserts a special href into the draft — not a chip button.
 */
-function PromptInputCommandComposer({ commands, mentionCommands, value, onValueChange, onCommandSelect, emptyMessage = "No commands found.", mentionEmptyMessage = "No MCP servers found.", onKeyDown, ref, ...textareaProps }) {
+function PromptInputCommandComposer({ commands, mentionCommands, value, onValueChange, onCommandSelect, emptyMessage = "No commands found.", mentionEmptyMessage = "No MCP servers found.", onKeyDown, ref, placeholder, disabled, className, minHeight, maxHeight, "aria-label": ariaLabel }) {
 	const inputRef = React.useRef(null);
+	const highlightedCommandRef = React.useRef(void 0);
 	const [dismissedValue, setDismissedValue] = React.useState(null);
 	React.useImperativeHandle(ref, () => inputRef.current, []);
-	const match = /^\s*([/@])([^\n]*)$/u.exec(value);
-	const trigger = match?.[1] === "/" || match?.[1] === "@" ? match[1] : void 0;
+	const match = composerTriggerMatch(value);
+	const trigger = match?.trigger;
 	const sourceCommands = trigger === "@" ? mentionCommands ?? [] : commands;
-	const normalizedQuery = (match?.[2]?.trim() ?? "").toLocaleLowerCase();
+	const normalizedQuery = (match?.query.trim() ?? "").toLocaleLowerCase();
 	const filtered = sourceCommands.filter((command) => {
 		if (!normalizedQuery) return true;
 		return [
@@ -1022,6 +1048,12 @@ function PromptInputCommandComposer({ commands, mentionCommands, value, onValueC
 		label,
 		items: filtered.filter((command) => (command.group ?? "") === label)
 	}));
+	const selectCommand = (command) => {
+		const nextTrigger = trigger ?? "/";
+		onValueChange(replaceComposerTrigger(value, command, nextTrigger));
+		setDismissedValue(null);
+		onCommandSelect(command, nextTrigger);
+	};
 	return /* @__PURE__ */ jsxs(Autocomplete.Root, {
 		items: groups,
 		filteredItems: groups,
@@ -1030,6 +1062,9 @@ function PromptInputCommandComposer({ commands, mentionCommands, value, onValueC
 		open,
 		autoHighlight: true,
 		itemToStringValue: (command) => command.value,
+		onItemHighlighted: (command) => {
+			highlightedCommandRef.current = command;
+		},
 		onValueChange: (next, { reason }) => {
 			if (reason !== "input-change") return;
 			setDismissedValue(null);
@@ -1038,11 +1073,29 @@ function PromptInputCommandComposer({ commands, mentionCommands, value, onValueC
 		onOpenChange: (nextOpen) => {
 			if (!nextOpen) setDismissedValue(value);
 		},
-		children: [/* @__PURE__ */ jsx(Autocomplete.Input, { render: /* @__PURE__ */ jsx(PromptInputTextarea, {
-			...textareaProps,
+		children: [/* @__PURE__ */ jsx(Autocomplete.Input, { render: /* @__PURE__ */ jsx(PromptInputComposerEditor, {
 			ref: inputRef,
-			value,
-			onKeyDown
+			draft: value,
+			onDraftChange: (next) => {
+				setDismissedValue(null);
+				onValueChange(next);
+			},
+			onKeyDown: (event) => {
+				onKeyDown?.(event);
+				if (event.defaultPrevented || event.key !== "Enter" || !open) return;
+				const highlightedCommand = highlightedCommandRef.current;
+				if (highlightedCommand && !highlightedCommand.disabled && filtered.includes(highlightedCommand)) return;
+				const command = filtered.find((candidate) => !candidate.disabled);
+				if (!command) return;
+				event.preventDefault();
+				selectCommand(command);
+			},
+			placeholder,
+			disabled,
+			className,
+			minHeight,
+			maxHeight,
+			"aria-label": ariaLabel
 		}) }), /* @__PURE__ */ jsx(Autocomplete.Portal, { children: /* @__PURE__ */ jsx(Autocomplete.Positioner, {
 			anchor: () => inputRef.current?.closest(".prompt-input__body") ?? null,
 			side: "top",
@@ -1061,7 +1114,7 @@ function PromptInputCommandComposer({ commands, mentionCommands, value, onValueC
 							value: command,
 							disabled: command.disabled,
 							className: "prompt-input__command-item",
-							onClick: () => onCommandSelect(command, trigger ?? "/"),
+							onClick: () => selectCommand(command),
 							children: [command.icon ? /* @__PURE__ */ jsx("span", {
 								className: "prompt-input__command-icon",
 								children: command.icon
@@ -1089,40 +1142,6 @@ function PromptInputCommandComposer({ commands, mentionCommands, value, onValueC
 		}) })]
 	});
 }
-/** Removable inline context selected from slash-command or mention pickers. */
-function PromptInputReferences({ references, onRemove, className, ref, ...props }) {
-	if (!references.length) return null;
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		className: cx("prompt-input__references", className),
-		role: "group",
-		"aria-label": "Selected context",
-		...props,
-		children: references.map((reference) => /* @__PURE__ */ jsxs(Button, {
-			type: "button",
-			variant: "ghost",
-			color: "primary",
-			size: "xs",
-			className: "prompt-input__reference",
-			"aria-label": `Remove ${reference.label}`,
-			onClick: () => onRemove(reference),
-			children: [
-				reference.icon ? /* @__PURE__ */ jsx("span", {
-					className: "prompt-input__reference-icon",
-					children: reference.icon
-				}) : null,
-				/* @__PURE__ */ jsx("span", {
-					className: "prompt-input__reference-label sigvelo-truncate",
-					children: reference.label
-				}),
-				/* @__PURE__ */ jsx(XIcon, {
-					className: "prompt-input__reference-remove",
-					size: 14
-				})
-			]
-		}, `${reference.trigger ?? "reference"}:${reference.id}`))
-	});
-}
 /** Controlled composer-footer picker for a host-owned folder or working context. */
 function PromptInputContextSelector({ items, value, onValueChange, categoryLabel = "Folder", unavailableLabel = "Folder unavailable", action }) {
 	const selected = items.find((item) => item.value === value);
@@ -1290,4 +1309,4 @@ function createId() {
 	return globalThis.crypto?.randomUUID?.() ?? `prompt-input-${Date.now()}-${Math.random()}`;
 }
 //#endregion
-export { PromptInput, PromptInputActionAddAttachments, PromptInputActionAddScreenshot, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, PromptInputAttachment, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputCommandComposer, PromptInputContextSelector, PromptInputDictation, PromptInputFooter, PromptInputHeader, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardTrigger, PromptInputPermissionSelector, PromptInputProvider, PromptInputReferences, PromptInputSubmit, PromptInputTab, PromptInputTabBody, PromptInputTabItem, PromptInputTabLabel, PromptInputTabsList, PromptInputTextarea, PromptInputTools, PromptInputTray, usePromptInputAttachments, usePromptInputController, useProviderAttachments };
+export { PromptInput, PromptInputActionAddAttachments, PromptInputActionAddScreenshot, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, PromptInputAttachment, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputCommandComposer, PromptInputContextSelector, PromptInputDictation, PromptInputFooter, PromptInputHeader, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardTrigger, PromptInputPermissionSelector, PromptInputProvider, PromptInputSubmit, PromptInputTab, PromptInputTabBody, PromptInputTabItem, PromptInputTabLabel, PromptInputTabsList, PromptInputTextarea, PromptInputTools, PromptInputTray, composerLinksToReferences, usePromptInputAttachments, usePromptInputController, useProviderAttachments };

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

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+//#region src/components/ai-sdk/PromptInputComposerEditor.d.ts
+declare function writeComposerDom(element: HTMLElement, markdown: string): void;
+declare function readComposerDom(element: HTMLElement): string;
+interface PromptInputComposerEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "value"> {
+  /** Markdown draft. Named apart from Autocomplete's `value` so the two cannot collide. */
+  draft: string;
+  onDraftChange: (value: string) => void;
+  placeholder?: string;
+  minHeight?: number;
+  maxHeight?: number;
+  disabled?: boolean;
+}
+declare function PromptInputComposerEditor({
+  className,
+  placeholder,
+  minHeight,
+  maxHeight,
+  draft,
+  onDraftChange,
+  onKeyDown,
+  onPaste,
+  disabled,
+  ref,
+  ...props
+}: PromptInputComposerEditorProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { PromptInputComposerEditor, PromptInputComposerEditorProps, readComposerDom, writeComposerDom };