@ctrl-ui/react 0.8.2 → 0.8.4

package/dist/blocks/theme-toggle.js

@@ -63,26 +63,36 @@ function ThemeSegmentedSwitch({ value, onValueChange, options = defaultThemeOpti
 	const currentValue = effectiveThemeValue(value, choices);
 	const activeIndex = Math.max(0, choices.findIndex((option) => option.value === currentValue));
 	const indicatorStyle = {
-		width: `calc((100% - 0.25rem) / ${choices.length})`,
+		width: `calc((100% - var(--_theme-switch-padding) * 2) / ${choices.length})`,
 		transform: `translateX(${activeIndex * 100}%)`
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		role: "radiogroup",
 		"aria-label": ariaLabel,
-		className: classes("relative isolate inline-flex h-7 w-fit shrink-0 rounded-full border border-border bg-foreground/8 p-0.5 text-muted-foreground shadow-inner", className),
+		"data-control-ui": "theme-toggle",
+		"data-control-family": "theme-toggle",
+		"data-slot": "root",
+		className: classes("relative isolate inline-grid w-fit shrink-0 auto-cols-fr grid-flow-col [--_theme-switch-padding:calc(var(--spacing)*0.5)] [--_theme-switch-radius:min(var(--radius-control),calc(var(--control-h-xs)/2))] rounded-[calc(var(--_theme-switch-radius)+clamp(0px,var(--_theme-switch-radius)*1000,var(--_theme-switch-padding)))] border-(length:--control-rim-width) border-(--control-rim) bg-(--hover-fill) p-(--_theme-switch-padding) text-muted-foreground shadow-(--shadow-inset)", className),
 		style,
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			"aria-hidden": true,
-			className: "pointer-events-none absolute inset-y-0.5 left-0.5 rounded-full bg-background shadow-sm transition-transform duration-[var(--duration-base)] ease-[var(--ease-emphasized)]",
+			"data-control-ui": "theme-toggle",
+			"data-control-family": "theme-toggle",
+			"data-slot": "indicator",
+			className: "pointer-events-none absolute inset-y-(--_theme-switch-padding) left-(--_theme-switch-padding) rounded-(--_theme-switch-radius) bg-background shadow-(--shadow-sm) transition-transform duration-(--duration-base) ease-(--ease-standard)",
 			style: indicatorStyle
 		}), choices.map((option) => {
 			const selected = option.value === currentValue;
 			const Icon = option.icon;
 			return /* @__PURE__ */ jsxs("label", {
+				"data-control-ui": "theme-toggle",
+				"data-control-family": "theme-toggle",
+				"data-slot": "option",
+				"data-control": "true",
 				"data-selected": selected ? "true" : void 0,
 				"data-disabled": option.disabled ? "true" : void 0,
-				className: classes("relative z-[1] inline-flex h-6 cursor-pointer items-center justify-center gap-1.5 rounded-full px-1.5 text-xs font-medium outline-none transition-[color,scale] duration-[var(--duration-fast)] ease-[var(--ease-standard)] hover:text-foreground has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-foreground/25 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-45 data-[selected=true]:text-foreground active:scale-95", showLabels ? "min-w-20" : "w-7"),
+				className: classes("relative z-[1] inline-flex h-(--control-h-xs) cursor-pointer items-center justify-center gap-1.5 rounded-(--_theme-switch-radius) px-1.5 text-label font-medium transition-colors duration-(--duration-fast) ease-(--ease-standard) hover:text-foreground data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-45 data-[selected=true]:text-foreground", showLabels ? "min-w-20" : "w-(--control-h-xs)"),
 				children: [
 					/* @__PURE__ */ jsx("input", {
 						type: "radio",

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

@@ -3,17 +3,17 @@ import { Button } from "./ui/button.js";
 import { ChatComposerAttachmentKnobStyle } from "./knob-contracts/chat-composer-attachment-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/chat-composer-attachment.d.ts
-type ChatComposerAttachmentKind = "image" | "pdf" | "spreadsheet" | "document" | "archive" | "audio" | "video" | "file";
-type ChatComposerAttachmentStatus = "idle" | "uploading" | "uploaded" | "error";
-type ChatComposerAttachmentVariant = "auto" | "preview" | "file";
-type ChatComposerAttachmentsProps = ComponentProps<"div"> & {
+export type ChatComposerAttachmentKind = "image" | "pdf" | "spreadsheet" | "document" | "archive" | "audio" | "video" | "file";
+export type ChatComposerAttachmentStatus = "idle" | "uploading" | "uploaded" | "error";
+export type ChatComposerAttachmentVariant = "auto" | "preview" | "file";
+export type ChatComposerAttachmentsProps = ComponentProps<"div"> & {
   label?: string;
   viewportClassName?: string;
 } & {
   style?: CSSProperties & ChatComposerAttachmentKnobStyle;
 };
-declare function ChatComposerAttachments({ label, className, viewportClassName, children, ...props }: ChatComposerAttachmentsProps): import("react").JSX.Element;
-type ChatComposerAttachmentProps = Omit<ComponentProps<"li">, "style"> & {
+export declare function ChatComposerAttachments({ label, className, viewportClassName, children, ...props }: ChatComposerAttachmentsProps): import("react").JSX.Element;
+export type ChatComposerAttachmentProps = Omit<ComponentProps<"li">, "style"> & {
   name: string;
   type?: string;
   description?: ReactNode;
@@ -26,30 +26,29 @@ type ChatComposerAttachmentProps = Omit<ComponentProps<"li">, "style"> & {
   removeLabel?: string;
   style?: CSSProperties & ChatComposerAttachmentKnobStyle;
 };
-declare function ChatComposerAttachment({ name, type, description, status, progress: progressInput, previewUrl, kind, variant, onRemove, removeLabel, className, children, role, "aria-label": ariaLabel, ...props }: ChatComposerAttachmentProps): import("react").JSX.Element;
-type ChatComposerAttachmentPreviewProps = Omit<ComponentProps<"div">, "style"> & {
+export declare function ChatComposerAttachment({ name, type, description, status, progress: progressInput, previewUrl, kind, variant, onRemove, removeLabel, className, children, role, "aria-label": ariaLabel, ...props }: ChatComposerAttachmentProps): import("react").JSX.Element;
+export type ChatComposerAttachmentPreviewProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ChatComposerAttachmentKnobStyle;
 };
-declare function ChatComposerAttachmentPreview({ className, children, ...props }: ChatComposerAttachmentPreviewProps): import("react").JSX.Element;
-type ChatComposerAttachmentContentProps = ComponentProps<"div"> & {
+export declare function ChatComposerAttachmentPreview({ className, children, ...props }: ChatComposerAttachmentPreviewProps): import("react").JSX.Element;
+export type ChatComposerAttachmentContentProps = ComponentProps<"div"> & {
   style?: CSSProperties & ChatComposerAttachmentKnobStyle;
 };
-declare function ChatComposerAttachmentContent({ className, ...props }: ChatComposerAttachmentContentProps): import("react").JSX.Element;
-type ChatComposerAttachmentTitleProps = Omit<ComponentProps<"div">, "style"> & {
+export declare function ChatComposerAttachmentContent({ className, ...props }: ChatComposerAttachmentContentProps): import("react").JSX.Element;
+export type ChatComposerAttachmentTitleProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ChatComposerAttachmentKnobStyle;
 };
-declare function ChatComposerAttachmentTitle({ className, children, ...props }: ChatComposerAttachmentTitleProps): import("react").JSX.Element;
-type ChatComposerAttachmentDescriptionProps = Omit<ComponentProps<"div">, "style"> & {
+export declare function ChatComposerAttachmentTitle({ className, children, ...props }: ChatComposerAttachmentTitleProps): import("react").JSX.Element;
+export type ChatComposerAttachmentDescriptionProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ChatComposerAttachmentKnobStyle;
 };
-declare function ChatComposerAttachmentDescription({ className, children, ...props }: ChatComposerAttachmentDescriptionProps): import("react").JSX.Element;
-type ChatComposerAttachmentRemoveProps = Omit<ComponentProps<typeof Button>, "style"> & {
+export declare function ChatComposerAttachmentDescription({ className, children, ...props }: ChatComposerAttachmentDescriptionProps): import("react").JSX.Element;
+export type ChatComposerAttachmentRemoveProps = Omit<ComponentProps<typeof Button>, "style"> & {
   style?: CSSProperties & ButtonKnobStyle & ChatComposerAttachmentKnobStyle;
 };
-declare function ChatComposerAttachmentRemove({ className, onClick, children, "aria-label": ariaLabel, ...props }: ChatComposerAttachmentRemoveProps): import("react").JSX.Element | null;
-type ChatComposerAttachmentProgressProps = Omit<ComponentProps<"div">, "style"> & {
+export declare function ChatComposerAttachmentRemove({ className, onClick, children, "aria-label": ariaLabel, ...props }: ChatComposerAttachmentRemoveProps): import("react").JSX.Element | null;
+export type ChatComposerAttachmentProgressProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ChatComposerAttachmentKnobStyle;
 };
-declare function ChatComposerAttachmentProgress({ className, children, style, ...props }: ChatComposerAttachmentProgressProps): import("react").JSX.Element | null;
-//#endregion
-export { ChatComposerAttachment, ChatComposerAttachmentContent, ChatComposerAttachmentContentProps, ChatComposerAttachmentDescription, ChatComposerAttachmentDescriptionProps, ChatComposerAttachmentKind, ChatComposerAttachmentPreview, ChatComposerAttachmentPreviewProps, ChatComposerAttachmentProgress, ChatComposerAttachmentProgressProps, ChatComposerAttachmentProps, ChatComposerAttachmentRemove, ChatComposerAttachmentRemoveProps, ChatComposerAttachmentStatus, ChatComposerAttachmentTitle, ChatComposerAttachmentTitleProps, ChatComposerAttachmentVariant, ChatComposerAttachments, ChatComposerAttachmentsProps };
+export declare function ChatComposerAttachmentProgress({ className, children, style, ...props }: ChatComposerAttachmentProgressProps): import("react").JSX.Element | null;
+//#endregion

package/dist/chat-composer-attachment.js

@@ -2,6 +2,7 @@
 import { cn } from "./lib/cn.js";
 import { Button } from "./ui/button.js";
 import { ScrollArea } from "./ui/scroll-area.js";
+import { Spinner } from "./ui/spinner.js";
 import { createContext, useContext } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "lucide-react";
@@ -84,9 +85,9 @@ function fallbackLabel(kind, extension) {
 	}[kind];
 }
 function defaultDescription(context) {
-	const progress = progressValue(context.progress);
+	const { progress } = context;
 	if (context.description) return context.description;
-	if (context.status === "uploading") return `Uploading ${Math.round(progress ?? 0)}%`;
+	if (context.status === "uploading") return progress === void 0 ? "Uploading…" : `Uploading ${Math.round(progress)}%`;
 	if (context.status === "error") return "Upload failed";
 	return fallbackLabel(context.kind, context.extension);
 }
@@ -147,7 +148,7 @@ function ChatComposerAttachment({ name, type, description, status = "idle", prog
 			"data-kind": resolvedKind,
 			"data-state": status,
 			"data-variant": resolvedVariant,
-			className: cn("relative shrink-0 overflow-hidden", "flex items-center", className),
+			className: cn("relative isolate flex shrink-0 items-center overflow-hidden", className),
 			...props,
 			children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx(ChatComposerAttachmentPreview, {}),
@@ -161,13 +162,13 @@ function ChatComposerAttachment({ name, type, description, status = "idle", prog
 function ChatComposerAttachmentPreview({ className, children, ...props }) {
 	const context = useChatComposerAttachmentContext();
 	const label = fallbackLabel(context.kind, context.extension);
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsx("div", {
 		"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),
 		...props,
-		children: [children ?? (context.previewUrl ? /* @__PURE__ */ jsx("img", {
+		children: children ?? (context.previewUrl ? /* @__PURE__ */ jsx("img", {
 			src: context.previewUrl,
 			alt: context.name,
 			loading: "lazy",
@@ -179,13 +180,7 @@ function ChatComposerAttachmentPreview({ className, children, ...props }) {
 			"data-slot": "preview-label",
 			className: "uppercase",
 			children: label
-		})), context.status === "uploading" && /* @__PURE__ */ jsx("span", {
-			"aria-hidden": "true",
-			"data-control-ui": "chat-composer-attachment",
-			"data-control-family": "chat-composer-attachment",
-			"data-slot": "status",
-			className: "absolute right-1 top-1"
-		})]
+		}))
 	});
 }
 function ChatComposerAttachmentContent({ className, ...props }) {
@@ -230,6 +225,7 @@ function ChatComposerAttachmentRemove({ className, onClick, children, "aria-labe
 	return /* @__PURE__ */ jsx(Button, {
 		"data-control-ui": "chat-composer-attachment",
 		"data-chat-composer-attachment-remove": "true",
+		iconOnly: true,
 		"data-slot": "remove",
 		"aria-label": ariaLabel ?? removeLabel ?? `Remove ${name}`,
 		size: "xs",
@@ -244,23 +240,31 @@ function ChatComposerAttachmentRemove({ className, onClick, children, "aria-labe
 	});
 }
 function ChatComposerAttachmentProgress({ className, children, style, ...props }) {
-	const { status, progress } = useChatComposerAttachmentContext();
-	if (status !== "uploading" && progress == null) return null;
+	const { name, status, progress } = useChatComposerAttachmentContext();
+	if (status !== "uploading") return null;
 	return /* @__PURE__ */ jsx("div", {
-		"aria-hidden": "true",
+		role: "progressbar",
+		"aria-label": `Uploading ${name}`,
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuenow": progress,
 		"data-control-ui": "chat-composer-attachment",
 		"data-control-family": "chat-composer-attachment",
 		"data-slot": "progress",
-		className: cn("absolute inset-x-0 bottom-0", className),
+		className: cn("pointer-events-none absolute inset-0 z-1 grid place-items-center", className),
 		style,
 		...props,
-		children: children ?? /* @__PURE__ */ jsx("div", {
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 			"data-control-ui": "chat-composer-attachment",
 			"data-control-family": "chat-composer-attachment",
 			"data-slot": "progress-indicator",
-			className: "h-full",
-			style: { width: `${progress ?? 0}%` }
-		})
+			className: "absolute inset-y-0 end-0",
+			style: { inlineSize: `${100 - (progress ?? 0)}%` }
+		}), progress === void 0 && /* @__PURE__ */ jsx(Spinner, {
+			"aria-hidden": "true",
+			className: "relative",
+			size: "xs"
+		})] })
 	});
 }
 //#endregion

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

@@ -2,13 +2,12 @@ import { ChatComposerEditorExtension } from "../types.js";
 import { TriggerConfig, TriggerMenuItemData } from "../../hooks/use-trigger-menu.js";
 import { Command } from "prosemirror-state";
 //#region src/chat-composer-editor/extensions/mention.d.ts
-declare const deleteMentionBackward: Command;
-declare const deleteMentionForward: Command;
-type MentionExtensionConfig<Item extends TriggerMenuItemData = TriggerMenuItemData> = {
+export declare const deleteMentionBackward: Command;
+export declare const deleteMentionForward: Command;
+export type MentionExtensionConfig<Item extends TriggerMenuItemData = TriggerMenuItemData> = {
   triggers: readonly TriggerConfig<Item>[];
   side?: "top" | "bottom";
   align?: "start" | "center" | "end";
 };
-declare function mentionExtension<Item extends TriggerMenuItemData = TriggerMenuItemData>({ triggers, side, align }: MentionExtensionConfig<Item>): ChatComposerEditorExtension;
-//#endregion
-export { MentionExtensionConfig, deleteMentionBackward, deleteMentionForward, mentionExtension };
+export declare function mentionExtension<Item extends TriggerMenuItemData = TriggerMenuItemData>({ triggers, side, align }: MentionExtensionConfig<Item>): ChatComposerEditorExtension;
+//#endregion

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

@@ -1,5 +1,4 @@
 //#region src/chat-composer-editor/ghost.d.ts
-declare function spawnExitGhost(source: HTMLElement, inherit?: readonly string[]): void;
-declare const MESSAGE_GHOST_INHERIT: readonly ["font-family", "font-size", "font-weight", "font-style", "line-height", "letter-spacing", "color", "padding", "white-space", "overflow-wrap", "word-break", "text-align"];
-//#endregion
-export { MESSAGE_GHOST_INHERIT, spawnExitGhost };
+export declare function spawnExitGhost(source: HTMLElement, inherit?: readonly string[]): void;
+export declare const MESSAGE_GHOST_INHERIT: readonly ["font-family", "font-size", "font-weight", "font-style", "line-height", "letter-spacing", "color", "padding", "white-space", "overflow-wrap", "word-break", "text-align"];
+//#endregion

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

@@ -1,6 +1,5 @@
 import { ChatComposerEditorExtension } from "./types.js";
 import { Schema } from "prosemirror-model";
 //#region src/chat-composer-editor/schema.d.ts
-declare function createEditorSchema(extensions: readonly ChatComposerEditorExtension[]): Schema;
-//#endregion
-export { createEditorSchema };
+export declare function createEditorSchema(extensions: readonly ChatComposerEditorExtension[]): Schema;
+//#endregion

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

@@ -1,6 +1,5 @@
 import { Node, Schema } from "prosemirror-model";
 //#region src/chat-composer-editor/serialize.d.ts
-declare function serializeDoc(doc: Node): string;
-declare function docFromText(schema: Schema, text: string): Node;
-//#endregion
-export { docFromText, serializeDoc };
+export declare function serializeDoc(doc: Node): string;
+export declare function docFromText(schema: Schema, text: string): Node;
+//#endregion

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

@@ -4,15 +4,15 @@ import { Command, Plugin } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 import { Node, NodeSpec, Schema } from "prosemirror-model";
 //#region src/chat-composer-editor/types.d.ts
-type ChatComposerEditorApi = {
+export type ChatComposerEditorApi = {
   getView: () => EditorView | null;
   subscribe: (listener: () => void) => () => void;
   registerKeyHandler: (handler: (event: KeyboardEvent) => boolean) => () => void;
 };
-type ChatComposerEditorOverlayProps = {
+export type ChatComposerEditorOverlayProps = {
   editor: ChatComposerEditorApi;
 };
-type ChatComposerEditorExtension = {
+export type ChatComposerEditorExtension = {
   name: string;
   nodes?: Record<string, NodeSpec>;
   plugins?: (schema: Schema, editor: ChatComposerEditorApi) => Plugin[];
@@ -20,10 +20,9 @@ type ChatComposerEditorExtension = {
   submitPayload?: (doc: Node) => Partial<ChatComposerSubmitPayload>;
   Overlay?: (props: ChatComposerEditorOverlayProps) => ReactNode;
 };
-type ChatComposerEditorProps = {
+export type ChatComposerEditorProps = {
   className?: string;
   placeholder?: string;
   extensions?: readonly ChatComposerEditorExtension[];
 };
-//#endregion
-export { ChatComposerEditorApi, ChatComposerEditorExtension, ChatComposerEditorOverlayProps, ChatComposerEditorProps };
+//#endregion

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

@@ -2,8 +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
-declare function ChatComposerEditor({ className, placeholder, extensions }: ChatComposerEditorProps & {
+export declare function ChatComposerEditor({ className, placeholder, style, extensions }: ChatComposerEditorProps & {
   style?: CSSProperties & ChatComposerKnobStyle;
 }): import("react").JSX.Element;
-//#endregion
-export { ChatComposerEditor };
+//#endregion

package/dist/chat-composer-editor.js

@@ -13,7 +13,7 @@ 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, extensions = [] }) {
+function ChatComposerEditor({ className, placeholder, style, extensions = [] }) {
 	const input = useChatComposerContext();
 	const mountRef = useRef(null);
 	const viewRef = useRef(null);
@@ -78,6 +78,7 @@ function ChatComposerEditor({ className, placeholder, extensions = [] }) {
 		});
 		const view = new EditorView(mount, {
 			state,
+			editable: () => !inputRef.current.isDisabled,
 			attributes: {
 				"aria-label": "Message",
 				"aria-multiline": "true",
@@ -114,10 +115,22 @@ function ChatComposerEditor({ className, placeholder, extensions = [] }) {
 			plugins: view.state.plugins
 		}));
 	}, [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]);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-control-ui": "chat-composer-editor",
 		"data-control-family": "chat-composer",
-		"data-slot": "root",
+		"data-slot": "editor-root",
+		style,
 		className: cn("relative", className),
 		children: [
 			input.value === "" && placeholder ? /* @__PURE__ */ jsx("div", {
@@ -133,7 +146,7 @@ function ChatComposerEditor({ className, placeholder, 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]: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]:outline-none [&_.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",
@@ -142,9 +155,10 @@ function ChatComposerEditor({ className, placeholder, extensions = [] }) {
 				"aria-label": "Message",
 				defaultValue: input.value,
 				readOnly: true,
+				disabled: input.isDisabled,
 				rows: 2,
 				placeholder,
-				className: "min-h-16 w-full resize-none px-[var(--padding-x)] py-[var(--padding-y)]"
+				className: "min-h-16 w-full resize-none outline-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

@@ -5,7 +5,7 @@ import { ChatDensity } from "./hooks/use-chat-message.js";
 import { ChatComposerProps, ChatComposerSubmitPayload } from "./hooks/use-chat-composer.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/chat-composer.d.ts
-declare function useChatComposerContext(): {
+export declare function useChatComposerContext(): {
   value: string;
   setValue: (nextValue: string) => void;
   normalizedValue: string;
@@ -29,32 +29,31 @@ declare function useChatComposerContext(): {
     preventDefault: () => void;
   }) => void;
 };
-declare function ChatComposer({ value, defaultValue, onValueChange, onSubmit, state, density, disabled, className, children, ...props }: ChatComposerProps): import("react").JSX.Element;
-type ChatComposerShellProps = Omit<ComponentProps<"div">, "style"> & {
+export declare function ChatComposer({ value, defaultValue, onValueChange, onSubmit, state, density, disabled, className, children, ...props }: ChatComposerProps): import("react").JSX.Element;
+export type ChatComposerShellProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ChatComposerKnobStyle;
 };
-declare function ChatComposerShell({ className, ...props }: ChatComposerShellProps): import("react").JSX.Element;
-type ChatComposerAccentProps = Omit<ComponentProps<"div">, "style"> & {
+export declare function ChatComposerShell({ className, ...props }: ChatComposerShellProps): import("react").JSX.Element;
+export type ChatComposerAccentProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ChatComposerKnobStyle;
 };
-declare function ChatComposerAccent({ className, ...props }: ChatComposerAccentProps): import("react").JSX.Element;
-type ChatComposerTextareaProps = Omit<ComponentProps<"textarea">, "style"> & {
+export declare function ChatComposerAccent({ className, ...props }: ChatComposerAccentProps): import("react").JSX.Element;
+export type ChatComposerTextareaProps = Omit<ComponentProps<"textarea">, "style"> & {
   style?: CSSProperties & ChatComposerKnobStyle;
 };
-declare function ChatComposerTextarea({ className, rows, disabled, onChange, onKeyDown, ...props }: ChatComposerTextareaProps): import("react").JSX.Element;
-type ChatComposerToolbarProps = ComponentProps<"div"> & {
+export declare function ChatComposerTextarea({ className, rows, disabled, onChange, onKeyDown, ...props }: ChatComposerTextareaProps): import("react").JSX.Element;
+export type ChatComposerToolbarProps = ComponentProps<"div"> & {
   style?: CSSProperties & ChatComposerKnobStyle;
 };
-declare function ChatComposerToolbar({ className, ...props }: ChatComposerToolbarProps): import("react").JSX.Element;
-type ChatComposerToolsProps = Omit<ComponentProps<"div">, "style"> & {
+export declare function ChatComposerToolbar({ className, ...props }: ChatComposerToolbarProps): import("react").JSX.Element;
+export type ChatComposerToolsProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ChatComposerKnobStyle;
 };
-declare function ChatComposerTools({ className, ...props }: ChatComposerToolsProps): import("react").JSX.Element;
-type ChatComposerFooterProps = Omit<ComponentProps<"div">, "style"> & {
+export declare function ChatComposerTools({ className, ...props }: ChatComposerToolsProps): import("react").JSX.Element;
+export type ChatComposerFooterProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ChatComposerKnobStyle;
 };
-declare function ChatComposerFooter({ className, ...props }: ChatComposerFooterProps): import("react").JSX.Element;
-type ChatComposerSubmitProps = ComponentProps<typeof Button>;
-declare function ChatComposerSubmit({ className, disabled, children, ...props }: ChatComposerSubmitProps): import("react").JSX.Element;
-//#endregion
-export { ChatComposer, ChatComposerAccent, ChatComposerAccentProps, ChatComposerFooter, ChatComposerFooterProps, ChatComposerShell, ChatComposerShellProps, ChatComposerSubmit, ChatComposerSubmitProps, ChatComposerTextarea, ChatComposerTextareaProps, ChatComposerToolbar, ChatComposerToolbarProps, ChatComposerTools, ChatComposerToolsProps, useChatComposerContext };
+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;
+//#endregion

package/dist/chat-composer.js

@@ -1,8 +1,10 @@
 "use client";
 import { cn } from "./lib/cn.js";
 import { hasSkinAdornment, skinAdornment } from "./skin.js";
+import { useSkin } from "./skin-provider.js";
 import { Button } from "./ui/button.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";
 //#region src/chat-composer.tsx
@@ -13,6 +15,7 @@ function useChatComposerContext() {
 	return context;
 }
 function ChatComposer({ value, defaultValue, onValueChange, onSubmit, state = "idle", density = "comfortable", disabled = false, className, children, ...props }) {
+	const skin = useSkin();
 	const input = useChatComposer({
 		value,
 		defaultValue,
@@ -21,9 +24,9 @@ function ChatComposer({ value, defaultValue, onValueChange, onSubmit, state = "i
 		state,
 		density,
 		disabled,
-		trackSends: hasSkinAdornment("chat-composer", "send-layer")
+		trackSends: hasSkinAdornment(skin, "chat-composer", "send-layer")
 	});
-	const sendLayer = skinAdornment("chat-composer", "send-layer", { sendCount: input.sendCount });
+	const sendLayer = skinAdornment(skin, "chat-composer", "send-layer", { sendCount: input.sendCount });
 	return /* @__PURE__ */ jsx(ChatComposerContext.Provider, {
 		value: input,
 		children: /* @__PURE__ */ jsxs("form", {
@@ -33,7 +36,7 @@ function ChatComposer({ value, defaultValue, onValueChange, onSubmit, state = "i
 			"data-state": state,
 			"data-density": density,
 			onSubmit: input.handleSubmit,
-			className: cn("sticky bottom-0 w-full", className),
+			className: cn("relative min-w-0 w-full", className),
 			...props,
 			children: [sendLayer !== void 0 && sendLayer !== null ? /* @__PURE__ */ jsx("div", {
 				"aria-hidden": "true",
@@ -45,11 +48,14 @@ 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",
 		"data-state": input.state,
+		"data-surface": "panel",
 		className: cn("relative overflow-hidden", className),
 		...props
 	});
@@ -75,17 +81,17 @@ function ChatComposerTextarea({ className, rows, disabled, onChange, onKeyDown,
 		input.handleKeyDown(event);
 	}
 	return /* @__PURE__ */ jsx("textarea", {
-		...props,
 		"data-control-ui": "chat-composer",
 		"data-control-family": "chat-composer",
 		"data-slot": "textarea",
 		"aria-label": "Message",
+		...props,
 		value: input.value,
 		onChange: handleChange,
 		onKeyDown: handleKeyDown,
-		disabled: disabled ?? input.isDisabled,
+		disabled: disabled || input.isDisabled,
 		rows: rows ?? input.rows,
-		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)
+		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)
 	});
 }
 function ChatComposerToolbar({ className, ...props }) {
@@ -102,7 +108,7 @@ function ChatComposerTools({ className, ...props }) {
 		"data-control-ui": "chat-composer",
 		"data-control-family": "chat-composer",
 		"data-slot": "tools",
-		className: cn("flex min-w-0 items-center", className),
+		className: cn("flex min-w-0 flex-wrap items-center", className),
 		...props
 	});
 }
@@ -124,7 +130,7 @@ function ChatComposerSubmit({ className, disabled, children = "Send", ...props }
 		variant: "solid",
 		tone: "primary",
 		size: "xs",
-		disabled: disabled ?? !input.canSubmit,
+		disabled: disabled || !input.canSubmit,
 		className,
 		...props,
 		children

package/dist/chat-layout.d.ts

@@ -1,27 +1,18 @@
 import { ChatLayoutKnobStyle } from "./knob-contracts/chat-layout-knobs.js";
-import { CSSProperties, ComponentProps, ElementType, ReactNode } from "react";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/chat-layout.d.ts
-type ChatThoughtCollapsible = {
-  Root: ElementType;
-  Trigger: ElementType;
-  Content: ElementType;
-};
-type ChatLayoutProps = Omit<ComponentProps<"section">, "style"> & {
+export type ChatLayoutChrome = "panel" | "embedded";
+export type ChatLayoutProps = Omit<ComponentProps<"section">, "style"> & {
+  chrome?: ChatLayoutChrome;
   style?: CSSProperties & ChatLayoutKnobStyle;
 };
-declare function ChatLayout({ children, className, ...props }: ChatLayoutProps): import("react").JSX.Element;
-type ChatThreadProps = ComponentProps<"div">;
-declare function ChatThread({ children, className, ...props }: ChatThreadProps): import("react").JSX.Element;
-type ChatTurnProps = ComponentProps<"section"> & {
-  from: "user" | "assistant";
+export declare function ChatLayout({ children, chrome, className, ...props }: ChatLayoutProps): import("react").JSX.Element;
+export type ChatThreadProps = ComponentProps<"div"> & {
+  composer?: ReactNode;
 };
-declare function ChatTurn({ from, children, className, ...props }: ChatTurnProps): import("react").JSX.Element;
-type ChatThoughtProps = Omit<ComponentProps<"div">, "style"> & {
-  details?: ReactNode;
-  defaultOpen?: boolean;
-  collapsible?: ChatThoughtCollapsible;
-  style?: CSSProperties & ChatLayoutKnobStyle;
+export declare function ChatThread({ children, composer, className, ...props }: ChatThreadProps): import("react").JSX.Element;
+export type ChatTurnProps = ComponentProps<"section"> & {
+  from: "user" | "assistant";
 };
-declare function ChatThought({ children, details, defaultOpen, collapsible, className, style, ...props }: ChatThoughtProps): import("react").JSX.Element;
-//#endregion
-export { ChatLayout, ChatLayoutProps, ChatThought, ChatThoughtProps, ChatThread, ChatThreadProps, ChatTurn, ChatTurnProps };
+export declare function ChatTurn({ from, children, className, ...props }: ChatTurnProps): import("react").JSX.Element;
+//#endregion