@ctrl-ui/react 0.8.6 → 0.8.7

package/dist/blocks/design-canvas.js

@@ -0,0 +1,346 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Button } from "../ui/button.js";
+import { ScrollArea } from "../ui/scroll-area.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip.js";
+import { InfiniteCanvas, InfiniteCanvasContent, InfiniteCanvasControls, InfiniteCanvasItem } from "../ui/infinite-canvas.js";
+import { ResizableFloatingPanel } from "../ui/resizable.js";
+import { Toolbar, ToolbarButton, ToolbarGroup } from "../ui/toolbar.js";
+import { createDesignCanvasLayer, designCanvasFillColor, drawnDesignCanvasBounds } from "./design-canvas-data.js";
+import { DesignCanvasInspector } from "./design-canvas-inspector.js";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleIcon, FrameIcon, MousePointer2Icon, SquareIcon, TypeIcon } from "lucide-react";
+//#region src/blocks/design-canvas.tsx
+const TOOLS = [
+	{
+		tool: "move",
+		label: "Move",
+		shortcut: "V",
+		icon: /* @__PURE__ */ jsx(MousePointer2Icon, {})
+	},
+	{
+		tool: "frame",
+		label: "Frame",
+		shortcut: "F",
+		icon: /* @__PURE__ */ jsx(FrameIcon, {})
+	},
+	{
+		tool: "rectangle",
+		label: "Rectangle",
+		shortcut: "R",
+		icon: /* @__PURE__ */ jsx(SquareIcon, {})
+	},
+	{
+		tool: "ellipse",
+		label: "Ellipse",
+		shortcut: "O",
+		icon: /* @__PURE__ */ jsx(CircleIcon, {})
+	},
+	{
+		tool: "text",
+		label: "Text",
+		shortcut: "T",
+		icon: /* @__PURE__ */ jsx(TypeIcon, {})
+	}
+];
+const LAYER_ICONS = {
+	frame: /* @__PURE__ */ jsx(FrameIcon, {}),
+	rectangle: /* @__PURE__ */ jsx(SquareIcon, {}),
+	ellipse: /* @__PURE__ */ jsx(CircleIcon, {}),
+	text: /* @__PURE__ */ jsx(TypeIcon, {})
+};
+const NUDGE_DIRECTIONS = {
+	ArrowLeft: {
+		x: -1,
+		y: 0
+	},
+	ArrowRight: {
+		x: 1,
+		y: 0
+	},
+	ArrowUp: {
+		x: 0,
+		y: -1
+	},
+	ArrowDown: {
+		x: 0,
+		y: 1
+	}
+};
+const DEFAULT_TRANSFORM = {
+	x: 0,
+	y: 0,
+	scale: 1
+};
+const CLICK_TOLERANCE_PX = 4;
+function newLayerId(kind) {
+	return `${kind}-${Math.random().toString(36).slice(2, 8)}`;
+}
+function toolForShortcut(key) {
+	return TOOLS.find((entry) => entry.shortcut === key.toUpperCase())?.tool;
+}
+function layerFromDraft(draft, id) {
+	return createDesignCanvasLayer(draft.kind, drawnDesignCanvasBounds(draft.kind, draft.start, draft.end, draft.clickTolerance), id);
+}
+function DesignCanvasBlock({ layers, defaultLayers = [], onLayersChange, selectedLayerId, defaultSelectedLayerId = null, onSelectedLayerIdChange, defaultTransform = DEFAULT_TRANSFORM, layout = "viewport", className, ...props }) {
+	const [internalLayers, setInternalLayers] = useState(defaultLayers);
+	const [internalSelectedLayerId, setInternalSelectedLayerId] = useState(defaultSelectedLayerId);
+	const transformRef = useRef(defaultTransform);
+	const [tool, setTool] = useState("move");
+	const [draft, setDraft] = useState(null);
+	const currentLayers = layers ?? internalLayers;
+	const currentSelectedLayerId = selectedLayerId === void 0 ? internalSelectedLayerId : selectedLayerId;
+	const selectedLayer = currentLayers.find((layer) => layer.id === currentSelectedLayerId);
+	function changeLayers(next) {
+		if (layers === void 0) setInternalLayers(next);
+		onLayersChange?.(next);
+	}
+	function selectLayer(layerId) {
+		if (selectedLayerId === void 0) setInternalSelectedLayerId(layerId);
+		onSelectedLayerIdChange?.(layerId);
+	}
+	function replaceLayer(next) {
+		changeLayers(currentLayers.map((layer) => layer.id === next.id ? next : layer));
+	}
+	function worldPointAt(event) {
+		const bounds = event.currentTarget.getBoundingClientRect();
+		const { x, y, scale } = transformRef.current;
+		return {
+			x: (event.clientX - bounds.left - x) / scale,
+			y: (event.clientY - bounds.top - y) / scale
+		};
+	}
+	function beginDrawOrDeselect(event) {
+		if (event.defaultPrevented || event.target !== event.currentTarget) return;
+		if (tool === "move") {
+			selectLayer(null);
+			return;
+		}
+		if (!event.isPrimary || event.button !== 0) return;
+		event.preventDefault();
+		event.currentTarget.setPointerCapture(event.pointerId);
+		const point = worldPointAt(event);
+		setDraft({
+			kind: tool,
+			pointerId: event.pointerId,
+			start: point,
+			end: point,
+			clickTolerance: CLICK_TOLERANCE_PX / transformRef.current.scale
+		});
+	}
+	function resizeDraft(event) {
+		if (draft?.pointerId !== event.pointerId) return;
+		setDraft({
+			...draft,
+			end: worldPointAt(event)
+		});
+	}
+	function commitDraft(event) {
+		if (draft?.pointerId !== event.pointerId) return;
+		const layer = layerFromDraft(draft, newLayerId(draft.kind));
+		setDraft(null);
+		changeLayers([...currentLayers, layer]);
+		selectLayer(layer.id);
+		setTool("move");
+	}
+	function cancelDraft(event) {
+		if (draft?.pointerId === event.pointerId) setDraft(null);
+	}
+	function editSelectedLayerWithKey(event) {
+		if (!selectedLayer) return false;
+		const nudge = NUDGE_DIRECTIONS[event.key];
+		if (event.key === "Delete" || event.key === "Backspace") {
+			changeLayers(currentLayers.filter((layer) => layer.id !== selectedLayer.id));
+			selectLayer(null);
+		} else if (nudge) {
+			const distance = event.shiftKey ? 10 : 1;
+			replaceLayer({
+				...selectedLayer,
+				x: selectedLayer.x + nudge.x * distance,
+				y: selectedLayer.y + nudge.y * distance
+			});
+		} else return false;
+		return true;
+	}
+	function handleShortcut(event) {
+		if (event.metaKey || event.ctrlKey || event.altKey) return;
+		const shortcutTool = toolForShortcut(event.key);
+		if (shortcutTool) setTool(shortcutTool);
+		else if (event.key === "Escape") {
+			setDraft(null);
+			setTool("move");
+			selectLayer(null);
+		} else if (!editSelectedLayerWithKey(event)) return;
+		event.preventDefault();
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("@container/design-canvas relative isolate overflow-hidden bg-background text-foreground", layout === "contained" ? "h-full min-h-0" : "h-svh", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs(InfiniteCanvas, {
+				"aria-label": "Design canvas",
+				defaultTransform,
+				onTransformChange: (next) => {
+					transformRef.current = next;
+				},
+				"data-tool": tool,
+				className: cn("size-full", tool !== "move" && "cursor-crosshair"),
+				style: {
+					"--cui-infinite-canvas-radius": "0px",
+					"--cui-infinite-canvas-border-color": "transparent",
+					"--cui-infinite-canvas-background": "var(--muted)"
+				},
+				onPointerDown: beginDrawOrDeselect,
+				onPointerMove: resizeDraft,
+				onPointerUp: commitDraft,
+				onPointerCancel: cancelDraft,
+				onKeyDown: handleShortcut,
+				children: [/* @__PURE__ */ jsxs(InfiniteCanvasContent, {
+					className: cn(tool !== "move" && "[&>*]:pointer-events-none"),
+					children: [currentLayers.map((layer) => /* @__PURE__ */ jsx(DesignCanvasLayerNode, {
+						layer,
+						selected: layer.id === currentSelectedLayerId,
+						onSelect: () => selectLayer(layer.id),
+						onLayerChange: replaceLayer
+					}, layer.id)), draft ? /* @__PURE__ */ jsx(DesignCanvasLayerNode, {
+						layer: layerFromDraft(draft, "draft"),
+						selected: true
+					}) : null]
+				}), /* @__PURE__ */ jsx(InfiniteCanvasControls, { className: "top-3 right-auto bottom-auto left-3 @4xl/design-canvas:left-1/2 @4xl/design-canvas:-translate-x-1/2" })]
+			}),
+			/* @__PURE__ */ jsx(ResizableFloatingPanel, {
+				side: "left",
+				defaultSize: 224,
+				minSize: 180,
+				maxSize: 360,
+				className: "hidden @4xl/design-canvas:flex",
+				children: /* @__PURE__ */ jsxs("aside", {
+					"aria-label": "Layers",
+					className: "flex min-h-0 flex-1 flex-col",
+					children: [/* @__PURE__ */ jsx("h2", {
+						className: "flex h-11 shrink-0 items-center border-b px-3 text-caption font-medium",
+						children: "Layers"
+					}), /* @__PURE__ */ jsx(ScrollArea, {
+						className: "min-h-0 flex-1",
+						children: /* @__PURE__ */ jsx("ul", {
+							className: "flex flex-col gap-0.5 p-2",
+							children: currentLayers.toReversed().map((layer) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Button, {
+								variant: "ghost",
+								size: "sm",
+								active: layer.id === currentSelectedLayerId,
+								"aria-pressed": layer.id === currentSelectedLayerId,
+								className: "w-full justify-start [&_svg]:size-3.5 [&_svg]:text-muted-foreground",
+								onClick: () => selectLayer(layer.id),
+								children: [LAYER_ICONS[layer.kind], /* @__PURE__ */ jsx("span", {
+									className: "truncate",
+									children: layer.name
+								})]
+							}) }, layer.id))
+						})
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx(ResizableFloatingPanel, {
+				defaultSize: 280,
+				minSize: 256,
+				maxSize: 440,
+				className: "hidden @xl/design-canvas:flex",
+				children: /* @__PURE__ */ jsxs("aside", {
+					"aria-label": "Properties",
+					className: "flex min-h-0 flex-1 flex-col",
+					children: [/* @__PURE__ */ jsx("h2", {
+						className: "flex h-11 shrink-0 items-center border-b px-3 text-caption font-medium",
+						children: /* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: selectedLayer?.name ?? "Design"
+						})
+					}), /* @__PURE__ */ jsx(ScrollArea, {
+						className: "min-h-0 flex-1",
+						children: /* @__PURE__ */ jsx(DesignCanvasInspector, {
+							layer: selectedLayer,
+							onLayerChange: replaceLayer
+						})
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx(DesignCanvasToolbar, {
+				tool,
+				onToolChange: setTool
+			})
+		]
+	});
+}
+function DesignCanvasLayerNode({ layer, selected, onSelect, onLayerChange }) {
+	const fillColor = designCanvasFillColor(layer.fill);
+	return /* @__PURE__ */ jsxs(InfiniteCanvasItem, {
+		x: layer.x,
+		y: layer.y,
+		"aria-label": layer.name,
+		"data-selected": selected || void 0,
+		className: "outline-primary data-selected:outline-2",
+		style: {
+			width: layer.width,
+			height: layer.height,
+			rotate: `${layer.rotation}deg`,
+			opacity: layer.opacity / 100
+		},
+		onPointerDown: onSelect,
+		onPositionChange: onLayerChange && ((position) => onLayerChange({
+			...layer,
+			x: Math.round(position.x),
+			y: Math.round(position.y)
+		})),
+		children: [
+			layer.kind === "frame" ? /* @__PURE__ */ jsx("span", {
+				className: "absolute bottom-full left-0 mb-1 whitespace-nowrap text-caption text-muted-foreground",
+				children: layer.name
+			}) : null,
+			layer.kind === "text" ? /* @__PURE__ */ jsx("p", {
+				className: "size-full overflow-hidden text-2xl leading-8 whitespace-nowrap",
+				style: { color: fillColor },
+				children: layer.text
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "size-full",
+				style: {
+					background: fillColor,
+					borderRadius: layer.kind === "ellipse" ? "50%" : layer.cornerRadius
+				}
+			}),
+			selected ? /* @__PURE__ */ jsxs("span", {
+				className: "absolute top-full left-1/2 mt-1.5 -translate-x-1/2 rounded-sm bg-primary px-1 text-[10px] leading-4 whitespace-nowrap text-primary-foreground tabular-nums",
+				children: [
+					layer.width,
+					" × ",
+					layer.height
+				]
+			}) : null
+		]
+	});
+}
+function DesignCanvasToolbar({ tool, onToolChange }) {
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(Toolbar, {
+		variant: "floating",
+		"aria-label": "Design tools",
+		className: "absolute bottom-4 left-4 w-max @4xl/design-canvas:left-1/2 @4xl/design-canvas:-translate-x-1/2",
+		children: /* @__PURE__ */ jsx(ToolbarGroup, {
+			"aria-label": "Tools",
+			children: TOOLS.map((entry) => /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+				render: /* @__PURE__ */ jsx(ToolbarButton, {
+					"aria-label": entry.label,
+					iconOnly: true,
+					"aria-pressed": tool === entry.tool,
+					"data-pressed": tool === entry.tool ? "" : void 0,
+					onClick: () => onToolChange(entry.tool)
+				}),
+				children: entry.icon
+			}), /* @__PURE__ */ jsxs(TooltipContent, { children: [
+				entry.label,
+				" · ",
+				entry.shortcut
+			] })] }, entry.tool))
+		})
+	}) });
+}
+//#endregion
+export { DesignCanvasBlock };

package/dist/blocks/file-explorer.js

@@ -3,12 +3,12 @@ import { cn } from "../lib/cn.js";
 import { Button } from "../ui/button.js";
 import { ScrollArea } from "../ui/scroll-area.js";
 import { InputGroup, InputGroupAddon, InputGroupInput } from "../ui/input-group.js";
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty.js";
 import { SidebarProvider, useSidebar } from "../ui/sidebar-provider.js";
 import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar-menu.js";
 import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarInset, SidebarRail, SidebarTrigger } from "../ui/sidebar.js";
-import { groupFileExplorerItems, resolveFileExplorer, searchFileExplorer } from "./file-explorer-data.js";
-import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty.js";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "../ui/resizable.js";
+import { groupFileExplorerItems, resolveFileExplorer, searchFileExplorer } from "./file-explorer-data.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRightIcon, FileIcon, FolderIcon, SearchIcon, XIcon } from "lucide-react";

package/dist/blocks/settings.js

@@ -3,12 +3,12 @@ import { cn } from "../lib/cn.js";
 import { Button } from "../ui/button.js";
 import { ScrollArea } from "../ui/scroll-area.js";
 import { InputGroup, InputGroupAddon, InputGroupInput } from "../ui/input-group.js";
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty.js";
+import { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet } from "../ui/field.js";
 import { SidebarProvider, useSidebar } from "../ui/sidebar-provider.js";
 import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar-menu.js";
 import { Sidebar, SidebarContent, SidebarHeader, SidebarInset, SidebarTrigger } from "../ui/sidebar.js";
-import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty.js";
 import { searchSettings } from "./settings-data.js";
-import { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet } from "../ui/field.js";
 import { useEffect, useId, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowLeftIcon, SearchIcon, XIcon } from "lucide-react";

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

@@ -13,8 +13,14 @@ export type ChatComposerAttachmentsProps = ComponentProps<"div"> & {
   style?: CSSProperties & ChatComposerAttachmentKnobStyle;
 };
 export declare function ChatComposerAttachments({ label, className, viewportClassName, children, ...props }: ChatComposerAttachmentsProps): import("react").JSX.Element;
-export type ChatComposerAttachmentProps = Omit<ComponentProps<"li">, "style"> & {
+type ChatComposerAttachmentSource = {
+  file: File;
+  name?: string;
+} | {
+  file?: undefined;
   name: string;
+};
+export type ChatComposerAttachmentProps = Omit<ComponentProps<"li">, "style"> & ChatComposerAttachmentSource & {
   type?: string;
   description?: ReactNode;
   status?: ChatComposerAttachmentStatus;
@@ -26,7 +32,7 @@ export type ChatComposerAttachmentProps = Omit<ComponentProps<"li">, "style"> &
   removeLabel?: string;
   style?: CSSProperties & ChatComposerAttachmentKnobStyle;
 };
-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 declare function ChatComposerAttachment({ file, name: nameInput, type: typeInput, description, status, progress: progressInput, previewUrl: previewUrlInput, kind, variant, onRemove, removeLabel, className, children, "aria-label": ariaLabel, ...props }: ChatComposerAttachmentProps): import("react").JSX.Element;
 export type ChatComposerAttachmentPreviewProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ChatComposerAttachmentKnobStyle;
 };
@@ -50,5 +56,5 @@ export declare function ChatComposerAttachmentRemove({ className, onClick, child
 export type ChatComposerAttachmentProgressProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ChatComposerAttachmentKnobStyle;
 };
-export declare function ChatComposerAttachmentProgress({ className, children, style, ...props }: ChatComposerAttachmentProgressProps): import("react").JSX.Element | null;
+export declare function ChatComposerAttachmentProgress({ className, children, ...props }: ChatComposerAttachmentProgressProps): import("react").JSX.Element | null;
 //#endregion

package/dist/chat-composer-attachment.js

@@ -3,7 +3,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 { 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 +67,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));
@@ -104,7 +122,6 @@ function ChatComposerAttachments({ label = "Attachments", className, viewportCla
 			"aria-label": label,
 			lockAxis: "y",
 			mask: true,
-			scrollbarVisibility: "hover",
 			className: "w-full",
 			viewportClassName,
 			children: /* @__PURE__ */ jsx("ul", {
@@ -117,11 +134,13 @@ 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, 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);
 	return /* @__PURE__ */ jsx(ChatComposerAttachmentContext.Provider, {
@@ -139,7 +158,6 @@ function ChatComposerAttachment({ name, type, description, status = "idle", prog
 			removeLabel
 		},
 		children: /* @__PURE__ */ jsx("li", {
-			role,
 			"aria-label": ariaLabel ?? name,
 			"data-control-ui": "chat-composer-attachment",
 			"data-control-family": "chat-composer-attachment",
@@ -166,7 +184,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,
@@ -239,7 +257,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 +270,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.js

@@ -13,6 +13,19 @@ 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;
+}
+/** 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 = [] }) {
 	const input = useChatComposerContext();
 	const mountRef = useRef(null);
@@ -59,10 +72,13 @@ function ChatComposerEditor({ className, placeholder, style, extensions = [] })
 			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
+				} }),
 				...extensionPlugins,
 				history(),
 				keymap(extensionKeymap),

package/dist/chat-composer.d.ts

@@ -29,7 +29,7 @@ export declare function useChatComposerContext(): {
     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 ChatComposer({ value, defaultValue, onValueChange, onSubmit, state, density, disabled, allowEmptySubmit, className, children, ...props }: ChatComposerProps): import("react").JSX.Element;
 export type ChatComposerShellProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ChatComposerKnobStyle;
 };

package/dist/chat-composer.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "./lib/cn.js";
 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 { useChatComposer } from "./hooks/use-chat-composer.js";
@@ -14,7 +14,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, className, children, ...props }) {
+function ChatComposer({ value, defaultValue, onValueChange, onSubmit, state = "idle", density = "comfortable", disabled = false, allowEmptySubmit = false, className, children, ...props }) {
 	const skin = useSkin();
 	const input = useChatComposer({
 		value,
@@ -24,6 +24,7 @@ function ChatComposer({ value, defaultValue, onValueChange, onSubmit, state = "i
 		state,
 		density,
 		disabled,
+		allowEmptySubmit,
 		trackSends: hasSkinAdornment(skin, "chat-composer", "send-layer")
 	});
 	const sendLayer = skinAdornment(skin, "chat-composer", "send-layer", { sendCount: input.sendCount });
@@ -117,7 +118,7 @@ function ChatComposerFooter({ className, ...props }) {
 		"data-control-ui": "chat-composer",
 		"data-control-family": "chat-composer",
 		"data-slot": "footer",
-		className: cn(className),
+		className,
 		...props
 	});
 }

package/dist/chat-layout.js

@@ -2,11 +2,16 @@
 import { cn } from "./lib/cn.js";
 import { SkinAdornment } from "./skin-provider.js";
 import { Button } from "./ui/button.js";
+import { ScrollArea } from "./ui/scroll-area.js";
 import { useChatThreadScroll } from "./hooks/use-chat-thread-scroll.js";
 import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowDown } from "lucide-react";
 //#region src/chat-layout.tsx
+const chromeSizing = {
+	panel: "mx-auto min-h-[640px] max-w-3xl",
+	embedded: "h-full min-h-0 flex-1"
+};
 function ChatLayout({ children, chrome = "panel", className, ...props }) {
 	return /* @__PURE__ */ jsxs("section", {
 		"data-control-ui": "chat-layout",
@@ -14,7 +19,7 @@ function ChatLayout({ children, chrome = "panel", className, ...props }) {
 		"data-slot": "root",
 		"data-chrome": chrome,
 		"data-surface": chrome === "panel" ? "panel" : void 0,
-		className: cn("relative mx-auto flex min-h-[640px] w-full max-w-3xl flex-col overflow-hidden", className),
+		className: cn("relative flex w-full flex-col overflow-hidden", chromeSizing[chrome], className),
 		...props,
 		children: [chrome === "panel" ? /* @__PURE__ */ jsx(SkinAdornment, {
 			scope: "chat-layout",
@@ -32,30 +37,38 @@ function ChatThread({ children, composer, className, ...props }) {
 			scrollToBottom
 		},
 		children: /* @__PURE__ */ jsx("div", {
-			ref: viewportRef,
 			"data-control-ui": "chat-thread",
 			"data-control-family": "chat-layout",
 			"data-chat-layout-kind": "thread",
 			"data-slot": "root",
 			"data-at-bottom": atBottom ? "" : void 0,
-			className: cn("min-h-0 min-w-0 flex-1 overflow-y-auto", className),
+			className: cn("flex min-h-0 min-w-0 flex-1 flex-col", className),
 			...props,
-			children: /* @__PURE__ */ jsxs("div", {
-				ref: contentRef,
-				className: "relative flex min-h-full min-w-0 flex-col",
-				children: [/* @__PURE__ */ jsx("div", {
-					"data-control-ui": "chat-thread",
-					"data-control-family": "chat-layout",
-					"data-slot": "thread-content",
-					className: "flex min-w-0 flex-1 flex-col",
-					children
-				}), composer ? /* @__PURE__ */ jsx("div", {
-					"data-control-ui": "chat-thread",
-					"data-control-family": "chat-layout",
-					"data-slot": "dock",
-					className: "sticky bottom-0 z-10 shrink-0",
-					children: composer
-				}) : null]
+			children: /* @__PURE__ */ jsx(ScrollArea, {
+				className: "flex min-h-0 flex-1 flex-col",
+				viewportClassName: "min-h-0 flex-1",
+				contentClassName: "flex min-h-full flex-col",
+				viewportRef,
+				lockAxis: "x",
+				mask: false,
+				blur: false,
+				children: /* @__PURE__ */ jsxs("div", {
+					ref: contentRef,
+					className: "relative flex min-w-0 flex-1 flex-col",
+					children: [/* @__PURE__ */ jsx("div", {
+						"data-control-ui": "chat-thread",
+						"data-control-family": "chat-layout",
+						"data-slot": "thread-content",
+						className: "flex min-w-0 flex-1 flex-col",
+						children
+					}), composer ? /* @__PURE__ */ jsx("div", {
+						"data-control-ui": "chat-thread",
+						"data-control-family": "chat-layout",
+						"data-slot": "dock",
+						className: "sticky bottom-0 z-10 shrink-0",
+						children: composer
+					}) : null]
+				})
 			})
 		})
 	});