@ctrl-ui/react 0.8.7 → 0.8.9

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 { detectTrigger } from "../../lib/trigger-detect.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,7 +12,6 @@ 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 releaseFileDrag(_view, event) {
 	return event.dataTransfer ? Array.from(event.dataTransfer.types).includes("Files") : false;
 }
@@ -26,7 +25,7 @@ const fileTransferPassthrough = {
 		return types.includes("Files") && !types.includes("text/plain");
 	}
 };
-function ChatComposerEditor({ className, placeholder, style, extensions = [] }) {
+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);
@@ -36,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(() => ({
@@ -51,7 +74,8 @@ function ChatComposerEditor({ className, placeholder, style, extensions = [] })
 			return () => {
 				keyHandlersRef.current.delete(handler);
 			};
-		}
+		},
+		setHostAria
 	}));
 	const [initialExtensions] = useState(extensions);
 	useEffect(() => {
@@ -68,17 +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
 					},
-					handleDOMEvents: fileTransferPassthrough
-				} }),
+					filterTransaction: (transaction) => !transaction.docChanged || !inputRef.current.isLocked
+				}),
 				...extensionPlugins,
 				history(),
 				keymap(extensionKeymap),
@@ -87,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)
 			]
@@ -95,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);
@@ -118,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;
@@ -132,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",
@@ -154,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", {
@@ -162,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, allowEmptySubmit, 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

package/dist/chat-composer.js

@@ -3,10 +3,11 @@ import { hasSkinAdornment, skinAdornment } from "./skin.js";
 import { cn } from "./lib/cn.js";
 import { useSkin } from "./skin-provider.js";
 import { Button } from "./ui/button.js";
+import { Spinner } from "./ui/spinner.js";
 import { useChatComposer } from "./hooks/use-chat-composer.js";
-import { useKeyboardNavigation } from "./hooks/use-keyboard-navigation.js";
-import { createContext, useContext } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Square } from "lucide-react";
 //#region src/chat-composer.tsx
 const ChatComposerContext = createContext(null);
 function useChatComposerContext() {
@@ -14,7 +15,7 @@ function useChatComposerContext() {
 	if (!context) throw new Error("ChatComposer compound components must be rendered inside <ChatComposer>.");
 	return context;
 }
-function ChatComposer({ value, defaultValue, onValueChange, onSubmit, state = "idle", density = "comfortable", disabled = false, allowEmptySubmit = false, className, children, ...props }) {
+function ChatComposer({ value, defaultValue, onValueChange, onSubmit, state = "idle", density = "comfortable", disabled = false, allowEmptySubmit = false, submitKey = "enter", className, children, ...props }) {
 	const skin = useSkin();
 	const input = useChatComposer({
 		value,
@@ -25,6 +26,7 @@ function ChatComposer({ value, defaultValue, onValueChange, onSubmit, state = "i
 		density,
 		disabled,
 		allowEmptySubmit,
+		submitKey,
 		trackSends: hasSkinAdornment(skin, "chat-composer", "send-layer")
 	});
 	const sendLayer = skinAdornment(skin, "chat-composer", "send-layer", { sendCount: input.sendCount });
@@ -49,9 +51,7 @@ function ChatComposer({ value, defaultValue, onValueChange, onSubmit, state = "i
 }
 function ChatComposerShell({ className, ...props }) {
 	const input = useChatComposerContext();
-	const keyboardNavigation = useKeyboardNavigation();
 	return /* @__PURE__ */ jsx("div", {
-		"data-keyboard-navigation": keyboardNavigation ? "" : void 0,
 		"data-control-ui": "chat-composer",
 		"data-control-family": "chat-composer",
 		"data-slot": "shell",
@@ -71,8 +71,17 @@ function ChatComposerAccent({ className, ...props }) {
 		...props
 	});
 }
-function ChatComposerTextarea({ className, rows, disabled, onChange, onKeyDown, ...props }) {
+function ChatComposerTextarea({ className, rows, disabled, readOnly, onChange, onKeyDown, ref, ...props }) {
 	const input = useChatComposerContext();
+	const textareaRef = useRef(null);
+	const { registerInsertionTarget } = input;
+	useEffect(() => registerInsertionTarget((text) => {
+		const textarea = textareaRef.current;
+		if (!textarea) return;
+		textarea.focus();
+		textarea.setRangeText(text, textarea.selectionStart, textarea.selectionEnd, "end");
+		textarea.dispatchEvent(new Event("input", { bubbles: true }));
+	}), [registerInsertionTarget]);
 	function handleChange(event) {
 		onChange?.(event);
 		if (!event.defaultPrevented) input.setValue(event.currentTarget.value);
@@ -81,7 +90,12 @@ function ChatComposerTextarea({ className, rows, disabled, onChange, onKeyDown,
 		onKeyDown?.(event);
 		input.handleKeyDown(event);
 	}
+	function attachTextarea(node) {
+		textareaRef.current = node;
+		assignRef(ref, node);
+	}
 	return /* @__PURE__ */ jsx("textarea", {
+		ref: attachTextarea,
 		"data-control-ui": "chat-composer",
 		"data-control-family": "chat-composer",
 		"data-slot": "textarea",
@@ -91,8 +105,10 @@ function ChatComposerTextarea({ className, rows, disabled, onChange, onKeyDown,
 		onChange: handleChange,
 		onKeyDown: handleKeyDown,
 		disabled: disabled || input.isDisabled,
+		readOnly: readOnly || input.isLocked,
+		"aria-busy": input.isLocked || void 0,
 		rows: rows ?? input.rows,
-		className: cn("field-sizing-content min-h-16 max-h-[40dvh] w-full resize-none outline-none px-[var(--padding-x)] py-[var(--padding-y)] disabled:cursor-not-allowed", className)
+		className: cn("field-sizing-content min-h-16 max-h-[40dvh] w-full resize-none px-[var(--padding-x)] py-[var(--padding-y)] disabled:cursor-not-allowed", className)
 	});
 }
 function ChatComposerToolbar({ className, ...props }) {
@@ -122,20 +138,44 @@ function ChatComposerFooter({ className, ...props }) {
 		...props
 	});
 }
-function ChatComposerSubmit({ className, disabled, children = "Send", ...props }) {
+function ChatComposerSubmit({ className, disabled, iconOnly = false, children = "Send", onStop, stopLabel = "Stop response", stopIcon = /* @__PURE__ */ jsx(Square, {
+	"aria-hidden": "true",
+	className: "fill-current"
+}), onClick, "aria-label": ariaLabel, ...props }) {
 	const input = useChatComposerContext();
+	const isStop = input.isLocked && onStop !== void 0;
+	const isBusy = input.isLocked && !isStop;
+	function handleClick(event) {
+		onClick?.(event);
+		if (isStop && !event.defaultPrevented) onStop();
+	}
+	function content() {
+		if (isStop) return iconOnly ? stopIcon : stopLabel;
+		if (!isBusy) return children;
+		if (iconOnly) return /* @__PURE__ */ jsx(Spinner, { "aria-hidden": "true" });
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Spinner, { "aria-hidden": "true" }), children] });
+	}
 	return /* @__PURE__ */ jsx(Button, {
 		"data-control-ui": "chat-composer",
 		"data-slot": "submit",
-		type: "submit",
+		"data-stop": isStop ? "true" : void 0,
+		type: isStop ? "button" : "submit",
 		variant: "solid",
 		tone: "primary",
 		size: "xs",
-		disabled: disabled || !input.canSubmit,
+		iconOnly,
+		disabled: isStop ? disabled : disabled || !input.canSubmit,
+		"aria-busy": isBusy || void 0,
+		"aria-label": isStop && iconOnly ? stopLabel : ariaLabel,
+		onClick: handleClick,
 		className,
 		...props,
-		children
+		children: content()
 	});
 }
+function assignRef(ref, node) {
+	if (typeof ref === "function") ref(node);
+	else if (ref) ref.current = node;
+}
 //#endregion
 export { ChatComposer, ChatComposerAccent, ChatComposerFooter, ChatComposerShell, ChatComposerSubmit, ChatComposerTextarea, ChatComposerToolbar, ChatComposerTools, useChatComposerContext };

package/dist/chat-layout.d.ts

@@ -1,3 +1,4 @@
+import { RenderProp } from "./control-props.js";
 import { Button } from "./ui/button.js";
 import { ChatLayoutKnobStyle } from "./knob-contracts/chat-layout-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
@@ -8,6 +9,24 @@ export type ChatLayoutProps = Omit<ComponentProps<"section">, "style"> & {
   style?: CSSProperties & ChatLayoutKnobStyle;
 };
 export declare function ChatLayout({ children, chrome, className, ...props }: ChatLayoutProps): import("react").JSX.Element;
+export type ChatLayoutHeaderProps = Omit<ComponentProps<"header">, "style"> & {
+  style?: CSSProperties & ChatLayoutKnobStyle;
+};
+export declare function ChatLayoutHeader({ className, ...props }: ChatLayoutHeaderProps): import("react").JSX.Element;
+export type ChatLayoutTitleProps = Omit<ComponentProps<"div">, "style"> & {
+  render?: RenderProp<ComponentProps<"div">>;
+  style?: CSSProperties & ChatLayoutKnobStyle;
+};
+/** Renders a `div`; pass `render={(props) => <h2 {...props} />}` for the heading level the page needs. */
+export declare function ChatLayoutTitle({ render, className, ...props }: ChatLayoutTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ChatLayoutDescriptionProps = Omit<ComponentProps<"p">, "style"> & {
+  style?: CSSProperties & ChatLayoutKnobStyle;
+};
+export declare function ChatLayoutDescription({ className, ...props }: ChatLayoutDescriptionProps): import("react").JSX.Element;
+export type ChatLayoutActionsProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & ChatLayoutKnobStyle;
+};
+export declare function ChatLayoutActions({ className, ...props }: ChatLayoutActionsProps): import("react").JSX.Element;
 export type ChatThreadProps = ComponentProps<"div"> & {
   composer?: ReactNode;
 };