@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/chat-composer-attachment.js

@@ -1,9 +1,10 @@
 "use client";
 import { cn } from "./lib/cn.js";
 import { Button } from "./ui/button.js";
+import { LiveStatus } from "./ui/live-status.js";
 import { ScrollArea } from "./ui/scroll-area.js";
 import { Spinner } from "./ui/spinner.js";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useLayoutEffect, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "lucide-react";
 //#region src/chat-composer-attachment.tsx
@@ -67,6 +68,24 @@ function kindFromAttachment(type, name) {
 	].includes(extension)) return "document";
 	return "file";
 }
+function resolveVariant(variant, kind, status, previewUrl) {
+	if (variant !== "auto") return variant;
+	if (status === "error") return "file";
+	return previewUrl || kind === "image" ? "preview" : "file";
+}
+function useObjectUrl(blob) {
+	const [objectUrl, setObjectUrl] = useState();
+	useLayoutEffect(() => {
+		if (!blob) return;
+		const url = URL.createObjectURL(blob);
+		setObjectUrl({
+			blob,
+			url
+		});
+		return () => URL.revokeObjectURL(url);
+	}, [blob]);
+	return blob && objectUrl?.blob === blob ? objectUrl.url : void 0;
+}
 function progressValue(progress) {
 	if (typeof progress !== "number" || Number.isNaN(progress)) return void 0;
 	return Math.min(100, Math.max(0, progress));
@@ -88,9 +107,27 @@ function defaultDescription(context) {
 	const { progress } = context;
 	if (context.description) return context.description;
 	if (context.status === "uploading") return progress === void 0 ? "Uploading…" : `Uploading ${Math.round(progress)}%`;
-	if (context.status === "error") return "Upload failed";
+	if (context.status === "error") return context.errorLabel;
 	return fallbackLabel(context.kind, context.extension);
 }
+function defaultUploadedLabel(name) {
+	return `${name} uploaded`;
+}
+function defaultUploadFailedLabel(name) {
+	return `${name} couldn't upload`;
+}
+function useUploadAnnouncement(status, name, uploadedLabel, uploadFailedLabel) {
+	const [previousStatus, setPreviousStatus] = useState(status);
+	const [announcement, setAnnouncement] = useState("");
+	if (status !== previousStatus) {
+		setPreviousStatus(status);
+		setAnnouncement({
+			uploaded: uploadedLabel,
+			error: uploadFailedLabel
+		}[status]?.(name) ?? "");
+	}
+	return announcement;
+}
 function ChatComposerAttachments({ label = "Attachments", className, viewportClassName, children, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "chat-composer-attachments",
@@ -101,13 +138,12 @@ function ChatComposerAttachments({ label = "Attachments", className, viewportCla
 		children: /* @__PURE__ */ jsx(ScrollArea, {
 			"data-control-ui": "chat-composer-attachments",
 			"data-slot": "scroll",
-			"aria-label": label,
 			lockAxis: "y",
 			mask: true,
-			scrollbarVisibility: "hover",
 			className: "w-full",
 			viewportClassName,
 			children: /* @__PURE__ */ jsx("ul", {
+				"aria-label": label,
 				"data-control-ui": "chat-composer-attachments",
 				"data-control-family": "chat-composer-attachment",
 				"data-slot": "list",
@@ -117,13 +153,16 @@ function ChatComposerAttachments({ label = "Attachments", className, viewportCla
 		})
 	});
 }
-function ChatComposerAttachment({ name, type, description, status = "idle", progress: progressInput, previewUrl, kind, variant = "auto", onRemove, removeLabel, className, children, role, "aria-label": ariaLabel, ...props }) {
+function ChatComposerAttachment({ file, name: nameInput, type: typeInput, description, status = "idle", progress: progressInput, previewUrl: previewUrlInput, kind, variant = "auto", onRemove, removeLabel, errorLabel = "Couldn't upload. Remove and try again.", uploadedLabel = defaultUploadedLabel, uploadFailedLabel = defaultUploadFailedLabel, className, children, "aria-label": ariaLabel, ...props }) {
+	const name = nameInput ?? file?.name ?? "";
+	const type = typeInput ?? file?.type;
 	const resolvedKind = kind ?? kindFromAttachment(type, name);
-	let resolvedVariant;
-	if (variant === "auto") resolvedVariant = previewUrl || resolvedKind === "image" ? "preview" : "file";
-	else resolvedVariant = variant;
+	const resolvedVariant = resolveVariant(variant, resolvedKind, status, previewUrlInput);
+	const filePreviewUrl = useObjectUrl(resolvedVariant === "preview" && !previewUrlInput ? file : void 0);
+	const previewUrl = previewUrlInput ?? filePreviewUrl;
 	const extension = extensionFromName(name);
 	const progress = progressValue(progressInput);
+	const announcement = useUploadAnnouncement(status, name, uploadedLabel, uploadFailedLabel);
 	return /* @__PURE__ */ jsx(ChatComposerAttachmentContext.Provider, {
 		value: {
 			name,
@@ -136,10 +175,10 @@ function ChatComposerAttachment({ name, type, description, status = "idle", prog
 			variant: resolvedVariant,
 			extension,
 			onRemove,
-			removeLabel
+			removeLabel,
+			errorLabel
 		},
-		children: /* @__PURE__ */ jsx("li", {
-			role,
+		children: /* @__PURE__ */ jsxs("li", {
 			"aria-label": ariaLabel ?? name,
 			"data-control-ui": "chat-composer-attachment",
 			"data-control-family": "chat-composer-attachment",
@@ -150,12 +189,12 @@ function ChatComposerAttachment({ name, type, description, status = "idle", prog
 			"data-variant": resolvedVariant,
 			className: cn("relative isolate flex shrink-0 items-center overflow-hidden", className),
 			...props,
-			children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			children: [children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx(ChatComposerAttachmentPreview, {}),
 				resolvedVariant === "file" && /* @__PURE__ */ jsxs(ChatComposerAttachmentContent, { children: [/* @__PURE__ */ jsx(ChatComposerAttachmentTitle, {}), /* @__PURE__ */ jsx(ChatComposerAttachmentDescription, {})] }),
 				/* @__PURE__ */ jsx(ChatComposerAttachmentRemove, {}),
 				/* @__PURE__ */ jsx(ChatComposerAttachmentProgress, {})
-			] })
+			] }), /* @__PURE__ */ jsx(LiveStatus, { message: announcement })]
 		})
 	});
 }
@@ -166,7 +205,7 @@ function ChatComposerAttachmentPreview({ className, children, ...props }) {
 		"data-control-ui": "chat-composer-attachment",
 		"data-control-family": "chat-composer-attachment",
 		"data-slot": "preview",
-		className: cn("relative grid shrink-0 place-items-center overflow-hidden", className),
+		className: cn("relative flex shrink-0 items-center justify-center overflow-hidden", className),
 		...props,
 		children: children ?? (context.previewUrl ? /* @__PURE__ */ jsx("img", {
 			src: context.previewUrl,
@@ -194,25 +233,29 @@ function ChatComposerAttachmentContent({ className, ...props }) {
 }
 function ChatComposerAttachmentTitle({ className, children, ...props }) {
 	const { name } = useChatComposerAttachmentContext();
+	const content = children ?? name;
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "chat-composer-attachment",
 		"data-control-family": "chat-composer-attachment",
 		"data-slot": "title",
+		title: typeof content === "string" ? content : void 0,
 		className: cn("truncate", className),
 		...props,
-		children: children ?? name
+		children: content
 	});
 }
 function ChatComposerAttachmentDescription({ className, children, ...props }) {
 	const context = useChatComposerAttachmentContext();
+	const content = children ?? defaultDescription(context);
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "chat-composer-attachment",
 		"data-control-family": "chat-composer-attachment",
 		"data-slot": "description",
+		title: typeof content === "string" ? content : void 0,
 		className: cn("truncate", className),
 		"data-state": context.status,
 		...props,
-		children: children ?? defaultDescription(context)
+		children: content
 	});
 }
 function ChatComposerAttachmentRemove({ className, onClick, children, "aria-label": ariaLabel, ...props }) {
@@ -230,7 +273,7 @@ function ChatComposerAttachmentRemove({ className, onClick, children, "aria-labe
 		"aria-label": ariaLabel ?? removeLabel ?? `Remove ${name}`,
 		size: "xs",
 		variant: "solid",
-		className: cn("absolute right-1 top-1 z-10", className),
+		className: cn("absolute end-1 top-1 z-10", className),
 		onClick: handleClick,
 		...props,
 		children: children ?? /* @__PURE__ */ jsx(XIcon, {
@@ -239,7 +282,7 @@ function ChatComposerAttachmentRemove({ className, onClick, children, "aria-labe
 		})
 	});
 }
-function ChatComposerAttachmentProgress({ className, children, style, ...props }) {
+function ChatComposerAttachmentProgress({ className, children, ...props }) {
 	const { name, status, progress } = useChatComposerAttachmentContext();
 	if (status !== "uploading") return null;
 	return /* @__PURE__ */ jsx("div", {
@@ -252,7 +295,6 @@ function ChatComposerAttachmentProgress({ className, children, style, ...props }
 		"data-control-family": "chat-composer-attachment",
 		"data-slot": "progress",
 		className: cn("pointer-events-none absolute inset-0 z-1 grid place-items-center", className),
-		style,
 		...props,
 		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 			"data-control-ui": "chat-composer-attachment",

package/dist/chat-composer-editor/extensions/mention.d.ts

@@ -8,6 +8,10 @@ export type MentionExtensionConfig<Item extends TriggerMenuItemData = TriggerMen
   triggers: readonly TriggerConfig<Item>[];
   side?: "top" | "bottom";
   align?: "start" | "center" | "end";
+  /** Shown and announced when a trigger's query matches nothing. */
+  emptyLabel?: string;
+  /** Announced while the menu is open, so opening it and narrowing it are heard from the editor. */
+  resultsLabel?: (count: number) => string;
 };
-export declare function mentionExtension<Item extends TriggerMenuItemData = TriggerMenuItemData>({ triggers, side, align }: MentionExtensionConfig<Item>): ChatComposerEditorExtension;
+export declare function mentionExtension<Item extends TriggerMenuItemData = TriggerMenuItemData>({ triggers, side, align, emptyLabel, resultsLabel }: MentionExtensionConfig<Item>): ChatComposerEditorExtension;
 //#endregion

package/dist/chat-composer-editor/extensions/mention.js

@@ -1,10 +1,11 @@
 "use client";
+import { LiveStatus } from "../../ui/live-status.js";
+import { isComposingKey, useTriggerMenu } from "../../hooks/use-trigger-menu.js";
 import { spawnExitGhost } from "../ghost.js";
 import { detectTrigger } from "../../lib/trigger-detect.js";
-import { useTriggerMenu } from "../../hooks/use-trigger-menu.js";
 import { TriggerMenu, TriggerMenuEmpty, TriggerMenuIcon, TriggerMenuItem, TriggerMenuList } from "../../ui/trigger-menu.js";
 import { useEffect } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat-composer-editor/extensions/mention.tsx
 function attrString(value, fallback) {
 	return typeof value === "string" ? value : fallback;
@@ -181,7 +182,7 @@ function collectMentions(doc) {
 	});
 	return mentions;
 }
-function MentionOverlay({ editor, triggers, side, align }) {
+function MentionOverlay({ editor, triggers, side, align, emptyLabel, resultsLabel }) {
 	const chars = triggers.map((trigger) => trigger.char);
 	const controller = useTriggerMenu({
 		triggers,
@@ -220,8 +221,23 @@ function MentionOverlay({ editor, triggers, side, align }) {
 		controller,
 		chars
 	]);
+	const { "aria-controls": controls, "aria-activedescendant": activeDescendant } = controller.inputAria;
+	useEffect(() => {
+		editor.setHostAria({
+			"aria-autocomplete": "list",
+			"aria-haspopup": "listbox",
+			...controls ? { "aria-controls": controls } : {},
+			...activeDescendant ? { "aria-activedescendant": activeDescendant } : {}
+		});
+	}, [
+		editor,
+		controls,
+		activeDescendant
+	]);
+	useEffect(() => () => editor.setHostAria({}), [editor]);
 	useEffect(() => {
 		return editor.registerKeyHandler((event) => {
+			if (isComposingKey(event)) return false;
 			const view = editor.getView();
 			if (!view) return false;
 			if (!readEditorTrigger(view, chars).active) return false;
@@ -233,35 +249,48 @@ function MentionOverlay({ editor, triggers, side, align }) {
 		chars
 	]);
 	if (triggers.length === 0) return null;
-	return /* @__PURE__ */ jsx(TriggerMenu, {
+	const isEmpty = controller.open && controller.items.length === 0;
+	let status = "";
+	if (isEmpty) status = emptyLabel;
+	else if (controller.open) status = resultsLabel(controller.items.length);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(LiveStatus, { message: status }), /* @__PURE__ */ jsxs(TriggerMenu, {
 		open: controller.open,
 		onOpenChange: controller.setOpen,
 		anchorRect: controller.anchorRect,
 		side,
 		align,
-		children: /* @__PURE__ */ jsx(TriggerMenuList, { children: controller.items.length === 0 ? /* @__PURE__ */ jsx(TriggerMenuEmpty, { children: "No results" }) : controller.items.map((item, index) => /* @__PURE__ */ jsxs(TriggerMenuItem, {
-			active: index === controller.activeIndex,
-			disabled: item.disabled,
-			onPointerMove: () => controller.setActiveIndex(index),
-			onClick: () => controller.select(item),
-			children: [
-				item.icon ? /* @__PURE__ */ jsx(TriggerMenuIcon, { children: item.icon }) : null,
-				/* @__PURE__ */ jsx("span", {
-					className: "flex-1 truncate",
-					children: item.label
-				}),
-				item.description ? /* @__PURE__ */ jsx("span", {
-					"data-control-ui": "chat-composer",
-					"data-control-family": "chat-composer",
-					"data-slot": "mention-description",
-					className: "truncate",
-					children: item.description
-				}) : null
-			]
-		}, item.id)) })
-	});
+		children: [isEmpty ? /* @__PURE__ */ jsx(TriggerMenuEmpty, {
+			"aria-hidden": "true",
+			children: emptyLabel
+		}) : null, /* @__PURE__ */ jsx(TriggerMenuList, {
+			id: controller.listId,
+			children: controller.items.map((item, index) => /* @__PURE__ */ jsxs(TriggerMenuItem, {
+				id: controller.optionId(index),
+				active: index === controller.activeIndex,
+				disabled: item.disabled,
+				onPointerMove: () => controller.setActiveIndex(index),
+				onClick: () => controller.select(item),
+				children: [
+					item.icon ? /* @__PURE__ */ jsx(TriggerMenuIcon, { children: item.icon }) : null,
+					/* @__PURE__ */ jsx("span", {
+						className: "flex-1 truncate",
+						title: item.label,
+						children: item.label
+					}),
+					item.description ? /* @__PURE__ */ jsx("span", {
+						"data-control-ui": "chat-composer",
+						"data-control-family": "chat-composer",
+						"data-slot": "mention-description",
+						className: "truncate",
+						title: item.description,
+						children: item.description
+					}) : null
+				]
+			}, item.id))
+		})]
+	})] });
 }
-function mentionExtension({ triggers, side = "top", align = "start" }) {
+function mentionExtension({ triggers, side = "top", align = "start", emptyLabel = "No matches", resultsLabel = (count) => count === 1 ? "1 suggestion" : `${count} suggestions` }) {
 	return {
 		name: "mention",
 		nodes: { mention: mentionNode },
@@ -274,7 +303,9 @@ function mentionExtension({ triggers, side = "top", align = "start" }) {
 			editor,
 			triggers,
 			side,
-			align
+			align,
+			emptyLabel,
+			resultsLabel
 		})
 	};
 }

package/dist/chat-composer-editor/ghost.js

@@ -1,4 +1,5 @@
 "use client";
+import { prefersReducedMotion } from "../lib/motion.js";
 //#region src/chat-composer-editor/ghost.ts
 const MESSAGE_INHERIT = [
 	"font-family",
@@ -14,12 +15,9 @@ const MESSAGE_INHERIT = [
 	"word-break",
 	"text-align"
 ];
-function prefersReducedMotion() {
-	return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : false;
-}
 function spawnExitGhost(source, inherit = []) {
 	if (typeof document === "undefined") return;
-	if (prefersReducedMotion()) return;
+	if (prefersReducedMotion(source)) return;
 	const rect = source.getBoundingClientRect();
 	if (rect.width === 0 && rect.height === 0) return;
 	const ghost = document.createElement(source.tagName.toLowerCase());

package/dist/chat-composer-editor/types.d.ts

@@ -8,6 +8,8 @@ export type ChatComposerEditorApi = {
   getView: () => EditorView | null;
   subscribe: (listener: () => void) => () => void;
   registerKeyHandler: (handler: (event: KeyboardEvent) => boolean) => () => void;
+  /** Merges extra ARIA onto the editable host (e.g. combobox state while a trigger menu is open). */
+  setHostAria: (attributes: Readonly<Record<string, string>>) => void;
 };
 export type ChatComposerEditorOverlayProps = {
   editor: ChatComposerEditorApi;
@@ -24,5 +26,8 @@ export type ChatComposerEditorProps = {
   className?: string;
   placeholder?: string;
   extensions?: readonly ChatComposerEditorExtension[];
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+  "aria-describedby"?: string;
 };
 //#endregion

package/dist/chat-composer-editor.d.ts

@@ -2,7 +2,7 @@ import { ChatComposerKnobStyle } from "./knob-contracts/chat-composer-knobs.js";
 import { ChatComposerEditorProps } from "./chat-composer-editor/types.js";
 import { CSSProperties } from "react";
 //#region src/chat-composer-editor.d.ts
-export declare function ChatComposerEditor({ className, placeholder, style, extensions }: ChatComposerEditorProps & {
+export declare function ChatComposerEditor({ className, placeholder, style, extensions, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby }: ChatComposerEditorProps & {
   style?: CSSProperties & ChatComposerKnobStyle;
 }): import("react").JSX.Element;
 //#endregion

package/dist/chat-composer-editor.js

@@ -4,7 +4,7 @@ import { useChatComposerContext } from "./chat-composer.js";
 import { MESSAGE_GHOST_INHERIT, spawnExitGhost } from "./chat-composer-editor/ghost.js";
 import { createEditorSchema } from "./chat-composer-editor/schema.js";
 import { docFromText, serializeDoc } from "./chat-composer-editor/serialize.js";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { baseKeymap, splitBlock } from "prosemirror-commands";
 import { history, redo, undo } from "prosemirror-history";
@@ -12,8 +12,20 @@ import { keymap } from "prosemirror-keymap";
 import { EditorState, Plugin } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 //#region src/chat-composer-editor.tsx
-const SUBMIT_KEY = "Enter";
-function ChatComposerEditor({ className, placeholder, style, extensions = [] }) {
+function releaseFileDrag(_view, event) {
+	return event.dataTransfer ? Array.from(event.dataTransfer.types).includes("Files") : false;
+}
+/** ProseMirror claims every drag and paste over the editor. A transfer it cannot insert is not editor input, so it has to reach the surrounding drop zone with its default intact. */
+const fileTransferPassthrough = {
+	dragenter: releaseFileDrag,
+	dragover: releaseFileDrag,
+	drop: releaseFileDrag,
+	paste: (_view, event) => {
+		const types = event.clipboardData ? Array.from(event.clipboardData.types) : [];
+		return types.includes("Files") && !types.includes("text/plain");
+	}
+};
+function ChatComposerEditor({ className, placeholder, style, extensions = [], "aria-label": ariaLabel = "Message", "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby }) {
 	const input = useChatComposerContext();
 	const mountRef = useRef(null);
 	const viewRef = useRef(null);
@@ -23,6 +35,30 @@ function ChatComposerEditor({ className, placeholder, style, extensions = [] })
 	}, [input]);
 	const lastSerialized = useRef(input.value);
 	const [mounted, setMounted] = useState(false);
+	const [hostAria, setHostAria] = useState({});
+	const { isDisabled, isLocked } = input;
+	const hostAttributes = useMemo(() => ({
+		role: "textbox",
+		"aria-multiline": "true",
+		...ariaLabelledby ? { "aria-labelledby": ariaLabelledby } : { "aria-label": ariaLabel },
+		...ariaDescribedby ? { "aria-describedby": ariaDescribedby } : {},
+		...placeholder ? { "aria-placeholder": placeholder } : {},
+		...isDisabled ? { "aria-disabled": "true" } : {},
+		...isLocked ? {
+			"aria-readonly": "true",
+			"aria-busy": "true"
+		} : {},
+		...hostAria
+	}), [
+		ariaLabel,
+		ariaLabelledby,
+		ariaDescribedby,
+		placeholder,
+		isDisabled,
+		isLocked,
+		hostAria
+	]);
+	const hostAttributesRef = useRef(hostAttributes);
 	const listenersRef = useRef(/* @__PURE__ */ new Set());
 	const keyHandlersRef = useRef(/* @__PURE__ */ new Set());
 	const [api] = useState(() => ({
@@ -38,7 +74,8 @@ function ChatComposerEditor({ className, placeholder, style, extensions = [] })
 			return () => {
 				keyHandlersRef.current.delete(handler);
 			};
-		}
+		},
+		setHostAria
 	}));
 	const [initialExtensions] = useState(extensions);
 	useEffect(() => {
@@ -55,14 +92,21 @@ function ChatComposerEditor({ className, placeholder, style, extensions = [] })
 			inputRef.current.submit(extra);
 			return true;
 		};
+		const submitOnEnter = (editorState) => inputRef.current.submitKey === "enter" && submitMessage(editorState);
 		const state = EditorState.create({
 			schema,
 			doc: docFromText(schema, inputRef.current.value),
 			plugins: [
-				new Plugin({ props: { handleKeyDown: (_view, event) => {
-					for (const handler of keyHandlersRef.current) if (handler(event)) return true;
-					return false;
-				} } }),
+				new Plugin({
+					props: {
+						handleKeyDown: (_view, event) => {
+							for (const handler of keyHandlersRef.current) if (handler(event)) return true;
+							return false;
+						},
+						handleDOMEvents: fileTransferPassthrough
+					},
+					filterTransaction: (transaction) => !transaction.docChanged || !inputRef.current.isLocked
+				}),
 				...extensionPlugins,
 				history(),
 				keymap(extensionKeymap),
@@ -71,7 +115,8 @@ function ChatComposerEditor({ className, placeholder, style, extensions = [] })
 					"Mod-y": redo,
 					"Shift-Mod-z": redo,
 					"Shift-Enter": splitBlock,
-					[SUBMIT_KEY]: submitMessage
+					Enter: submitOnEnter,
+					"Mod-Enter": submitMessage
 				}),
 				keymap(baseKeymap)
 			]
@@ -79,11 +124,7 @@ function ChatComposerEditor({ className, placeholder, style, extensions = [] })
 		const view = new EditorView(mount, {
 			state,
 			editable: () => !inputRef.current.isDisabled,
-			attributes: {
-				"aria-label": "Message",
-				"aria-multiline": "true",
-				role: "textbox"
-			},
+			attributes: () => hostAttributesRef.current,
 			dispatchTransaction(transaction) {
 				const next = view.state.apply(transaction);
 				view.updateState(next);
@@ -102,6 +143,13 @@ function ChatComposerEditor({ className, placeholder, style, extensions = [] })
 			viewRef.current = null;
 		};
 	}, [api, initialExtensions]);
+	const { registerInsertionTarget } = input;
+	useEffect(() => registerInsertionTarget((text) => {
+		const view = viewRef.current;
+		if (!view) return;
+		view.dispatch(view.state.tr.insertText(text));
+		view.focus();
+	}), [registerInsertionTarget]);
 	useEffect(() => {
 		const view = viewRef.current;
 		if (!view) return;
@@ -116,16 +164,9 @@ function ChatComposerEditor({ className, placeholder, style, extensions = [] })
 		}));
 	}, [input.value]);
 	useEffect(() => {
-		viewRef.current?.setProps({
-			editable: () => !input.isDisabled,
-			attributes: {
-				"aria-label": "Message",
-				"aria-multiline": "true",
-				"aria-disabled": String(input.isDisabled),
-				role: "textbox"
-			}
-		});
-	}, [input.isDisabled]);
+		hostAttributesRef.current = hostAttributes;
+		viewRef.current?.setProps({});
+	}, [hostAttributes]);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-control-ui": "chat-composer-editor",
 		"data-control-family": "chat-composer",
@@ -138,7 +179,7 @@ function ChatComposerEditor({ className, placeholder, style, extensions = [] })
 				"data-control-ui": "chat-composer-editor",
 				"data-control-family": "chat-composer",
 				"data-slot": "placeholder",
-				className: "pointer-events-none absolute left-[var(--padding-x)] top-[var(--padding-y)]",
+				className: "pointer-events-none absolute start-[var(--padding-x)] top-[var(--padding-y)]",
 				children: placeholder
 			}) : null,
 			/* @__PURE__ */ jsx("div", {
@@ -146,19 +187,21 @@ function ChatComposerEditor({ className, placeholder, style, extensions = [] })
 				"data-control-ui": "chat-composer-editor",
 				"data-control-family": "chat-composer",
 				"data-slot": "editor",
-				className: cn("[&_.ProseMirror]:max-h-[40dvh] [&_.ProseMirror]:min-h-16 [&_.ProseMirror]:w-full [&_.ProseMirror]:overflow-y-auto [&_.ProseMirror]:outline-none [&_.ProseMirror]:whitespace-pre-wrap [&_.ProseMirror]:break-words [&_.ProseMirror]:px-[var(--padding-x)] [&_.ProseMirror]:py-[var(--padding-y)]", mounted ? "" : "hidden")
+				className: cn("[&_.ProseMirror]:max-h-[40dvh] [&_.ProseMirror]:min-h-16 [&_.ProseMirror]:w-full [&_.ProseMirror]:overflow-y-auto [&_.ProseMirror]:whitespace-pre-wrap [&_.ProseMirror]:break-words [&_.ProseMirror]:px-[var(--padding-x)] [&_.ProseMirror]:py-[var(--padding-y)]", mounted ? "" : "hidden")
 			}),
 			mounted ? null : /* @__PURE__ */ jsx("textarea", {
 				"data-control-ui": "chat-composer-editor",
 				"data-control-family": "chat-composer",
 				"data-slot": "fallback",
-				"aria-label": "Message",
+				"aria-label": ariaLabelledby ? void 0 : ariaLabel,
+				"aria-labelledby": ariaLabelledby,
+				"aria-describedby": ariaDescribedby,
 				defaultValue: input.value,
 				readOnly: true,
 				disabled: input.isDisabled,
 				rows: 2,
 				placeholder,
-				className: "min-h-16 w-full resize-none outline-none px-[var(--padding-x)] py-[var(--padding-y)]"
+				className: "min-h-16 w-full resize-none px-[var(--padding-x)] py-[var(--padding-y)]"
 			}),
 			mounted ? initialExtensions.map((extension) => extension.Overlay ? /* @__PURE__ */ jsx(extension.Overlay, { editor: api }, extension.name) : null) : null
 		]

package/dist/chat-composer.d.ts

@@ -1,35 +1,10 @@
-import { FormSubmitEvent } from "./control-props.js";
 import { Button } from "./ui/button.js";
 import { ChatComposerKnobStyle } from "./knob-contracts/chat-composer-knobs.js";
-import { ChatDensity } from "./hooks/use-chat-message.js";
-import { ChatComposerProps, ChatComposerSubmitPayload } from "./hooks/use-chat-composer.js";
-import { CSSProperties, ComponentProps } from "react";
+import { ChatComposerController, ChatComposerProps } from "./hooks/use-chat-composer.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/chat-composer.d.ts
-export declare function useChatComposerContext(): {
-  value: string;
-  setValue: (nextValue: string) => void;
-  normalizedValue: string;
-  state: "disabled" | "idle" | "submitting";
-  density: ChatDensity;
-  isCompact: boolean;
-  isDisabled: boolean;
-  canSubmit: boolean;
-  rows: number;
-  sendCount: number;
-  clear: () => void;
-  submit: (extra?: Partial<ChatComposerSubmitPayload>) => void;
-  handleSubmit: (event: FormSubmitEvent) => void;
-  handleKeyDown: (event: {
-    key: string;
-    shiftKey: boolean;
-    defaultPrevented: boolean;
-    nativeEvent: {
-      isComposing: boolean;
-    };
-    preventDefault: () => void;
-  }) => void;
-};
-export declare function ChatComposer({ value, defaultValue, onValueChange, onSubmit, state, density, disabled, className, children, ...props }: ChatComposerProps): import("react").JSX.Element;
+export declare function useChatComposerContext(): ChatComposerController;
+export declare function ChatComposer({ value, defaultValue, onValueChange, onSubmit, state, density, disabled, allowEmptySubmit, submitKey, className, children, ...props }: ChatComposerProps): import("react").JSX.Element;
 export type ChatComposerShellProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ChatComposerKnobStyle;
 };
@@ -41,7 +16,7 @@ export declare function ChatComposerAccent({ className, ...props }: ChatComposer
 export type ChatComposerTextareaProps = Omit<ComponentProps<"textarea">, "style"> & {
   style?: CSSProperties & ChatComposerKnobStyle;
 };
-export declare function ChatComposerTextarea({ className, rows, disabled, onChange, onKeyDown, ...props }: ChatComposerTextareaProps): import("react").JSX.Element;
+export declare function ChatComposerTextarea({ className, rows, disabled, readOnly, onChange, onKeyDown, ref, ...props }: ChatComposerTextareaProps): import("react").JSX.Element;
 export type ChatComposerToolbarProps = ComponentProps<"div"> & {
   style?: CSSProperties & ChatComposerKnobStyle;
 };
@@ -54,6 +29,12 @@ export type ChatComposerFooterProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ChatComposerKnobStyle;
 };
 export declare function ChatComposerFooter({ className, ...props }: ChatComposerFooterProps): import("react").JSX.Element;
-export type ChatComposerSubmitProps = ComponentProps<typeof Button>;
-export declare function ChatComposerSubmit({ className, disabled, children, ...props }: ChatComposerSubmitProps): import("react").JSX.Element;
+export type ChatComposerSubmitProps = ComponentProps<typeof Button> & {
+  /** While the composer is submitting, turns this same button into Stop so focus stays put. */
+  onStop?: () => void;
+  stopLabel?: string;
+  /** Content of an `iconOnly` button in its Stop state; `stopLabel` becomes its name. */
+  stopIcon?: ReactNode;
+};
+export declare function ChatComposerSubmit({ className, disabled, iconOnly, children, onStop, stopLabel, stopIcon, onClick, "aria-label": ariaLabel, ...props }: ChatComposerSubmitProps): import("react").JSX.Element;
 //#endregion