@ctrl-ui/react 0.8.0

package/dist/audio-recorder.js

@@ -0,0 +1,235 @@
+"use client";
+import { cn } from "./lib/cn.js";
+import { Button } from "./ui/button.js";
+import { AudioVisualizer } from "./audio-visualizer.js";
+import { useAudioRecorder } from "./hooks/use-audio-recorder.js";
+import { formatAudioRecorderDuration } from "./lib/format-audio-recorder-duration.js";
+import { createContext, use } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, MicIcon, XIcon } from "lucide-react";
+//#region src/audio-recorder.tsx
+const AudioRecorderContext = createContext(null);
+function useAudioRecorderContext() {
+	const context = use(AudioRecorderContext);
+	if (!context) throw new Error("AudioRecorder compound components must be rendered inside <AudioRecorder>.");
+	return context;
+}
+function AudioRecorder({ onRecordingComplete, onCancel, maxDurationMs, disabled, barCount, barDurationMs, deviceId, label = "Voice recorder", className, children, ...props }) {
+	const recorder = useAudioRecorder({
+		onRecordingComplete,
+		onCancel,
+		maxDurationMs,
+		disabled,
+		barCount,
+		barDurationMs,
+		deviceId
+	});
+	return /* @__PURE__ */ jsx(AudioRecorderContext.Provider, {
+		value: recorder,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-control-ui": "audio-recorder",
+			"data-control-family": "audio-recorder",
+			"data-slot": "root",
+			"data-state": recorder.state,
+			"data-disabled": recorder.isDisabled ? "true" : void 0,
+			"data-error": recorder.error ? "true" : void 0,
+			role: "group",
+			"aria-label": label,
+			"aria-disabled": recorder.isDisabled || void 0,
+			className: cn("flex w-full min-w-0 max-w-full items-center", className),
+			...props,
+			children: children ?? /* @__PURE__ */ jsx(AudioRecorderDefaultLayout, { points: barCount })
+		})
+	});
+}
+function AudioRecorderDefaultLayout({ points }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(AudioRecorderTrigger, {}),
+		/* @__PURE__ */ jsxs("div", {
+			"data-control-ui": "audio-recorder",
+			"data-control-family": "audio-recorder",
+			"data-slot": "content",
+			className: "grid min-w-0 flex-1 items-center overflow-hidden",
+			children: [/* @__PURE__ */ jsx(AudioRecorderStatus, { className: "col-start-1 row-start-1 w-full flex-none" }), /* @__PURE__ */ jsx(AudioRecorderVisualizer, {
+				points,
+				className: "col-start-1 row-start-1 w-full"
+			})]
+		}),
+		/* @__PURE__ */ jsx(AudioRecorderDuration, {}),
+		/* @__PURE__ */ jsxs("div", {
+			"data-control-ui": "audio-recorder",
+			"data-control-family": "audio-recorder",
+			"data-slot": "actions",
+			className: "flex shrink-0 items-center",
+			children: [/* @__PURE__ */ jsx(AudioRecorderCancel, {}), /* @__PURE__ */ jsx(AudioRecorderSubmit, {})]
+		})
+	] });
+}
+function AudioRecorderTrigger({ className, children, disabled, onClick, ...props }) {
+	const recorder = useAudioRecorderContext();
+	const isActive = recorder.state === "requesting" || recorder.state === "recording" || recorder.state === "recorded" || recorder.state === "submitting";
+	const isStatusOnly = !recorder.canStart && (recorder.state === "requesting" || recorder.state === "recording" || recorder.state === "recorded" || recorder.state === "submitting");
+	const triggerVariant = audioRecorderTriggerVariant(recorder, isActive);
+	const triggerTone = audioRecorderTriggerTone(recorder);
+	const ariaLabel = audioRecorderTriggerLabel(recorder);
+	async function handleClick(event) {
+		onClick?.(event);
+		if (!event.defaultPrevented && recorder.canStart) await recorder.start();
+	}
+	return /* @__PURE__ */ jsx(Button, {
+		"data-control-ui": "audio-recorder",
+		"data-slot": "trigger",
+		"data-recorder-state": recorder.state,
+		"data-status-only": isStatusOnly ? "true" : void 0,
+		type: "button",
+		variant: triggerVariant,
+		tone: triggerTone,
+		active: isActive,
+		size: "sm",
+		iconOnly: true,
+		shape: "circle",
+		"aria-label": ariaLabel,
+		title: recorder.error?.message,
+		disabled: disabled ?? (recorder.isDisabled || !recorder.canStart),
+		className: cn("data-[status-only=true]:cursor-default", className),
+		onClick: handleClick,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(MicIcon, {
+			"aria-hidden": "true",
+			className: "size-3.5"
+		})
+	});
+}
+function audioRecorderTriggerVariant(recorder, isActive) {
+	if (recorder.state === "recording") return "solid";
+	if (isActive) return "surface";
+	return "quiet";
+}
+function audioRecorderTriggerTone(recorder) {
+	if (recorder.state === "recording" || recorder.state === "error") return "danger";
+	if (recorder.state === "requesting" || recorder.state === "submitting") return "primary";
+	return "neutral";
+}
+function audioRecorderTriggerLabel(recorder) {
+	switch (recorder.state) {
+		case "requesting": return "Requesting microphone permission";
+		case "recording": return "Recording voice";
+		case "recorded": return "Voice recording ready";
+		case "submitting": return "Sending voice recording";
+		default: return recorder.error ? "Retry voice recording" : "Start voice recording";
+	}
+}
+function AudioRecorderVisualizer({ points, className, ...props }) {
+	const recorder = useAudioRecorderContext();
+	const isVisible = recorder.state === "recording" || recorder.state === "recorded";
+	return /* @__PURE__ */ jsx(AudioVisualizer, {
+		"data-control-ui": "audio-recorder",
+		"data-slot": "visualizer",
+		"data-visible": isVisible ? "true" : void 0,
+		active: recorder.state === "recording",
+		levels: recorder.levels,
+		points,
+		"aria-hidden": !isVisible,
+		className,
+		...props
+	});
+}
+function AudioRecorderStatus({ className, children, ...props }) {
+	const recorder = useAudioRecorderContext();
+	const message = children ?? audioRecorderStatusMessage(recorder);
+	const isVisible = Boolean(message);
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "audio-recorder",
+		"data-control-family": "audio-recorder",
+		"data-slot": "status",
+		"data-visible": isVisible ? "true" : void 0,
+		"data-tone": recorder.state === "error" ? "error" : "neutral",
+		"aria-hidden": !isVisible,
+		"aria-live": "polite",
+		className: cn("min-w-0 flex-1 truncate", className),
+		...props,
+		children: message
+	});
+}
+function audioRecorderStatusMessage(recorder) {
+	if (recorder.state === "requesting") return "Allow microphone access";
+	if (recorder.state === "submitting") return "Sending voice recording";
+	if (recorder.state === "error") return recorder.error?.message;
+	return null;
+}
+function AudioRecorderDuration({ className, children, ...props }) {
+	const recorder = useAudioRecorderContext();
+	const isVisible = recorder.state === "recording" || recorder.state === "recorded";
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "audio-recorder",
+		"data-control-family": "audio-recorder",
+		"data-slot": "duration",
+		"data-visible": isVisible ? "true" : void 0,
+		"aria-hidden": !isVisible,
+		className: cn("shrink-0", className),
+		...props,
+		children: children ?? formatAudioRecorderDuration(recorder.durationMs)
+	});
+}
+function AudioRecorderCancel({ className, children, disabled, onClick, tabIndex, ...props }) {
+	const recorder = useAudioRecorderContext();
+	const isVisible = recorder.canCancel;
+	function handleClick(event) {
+		onClick?.(event);
+		if (!event.defaultPrevented && recorder.canCancel) recorder.cancel();
+	}
+	return /* @__PURE__ */ jsx(Button, {
+		"data-control-ui": "audio-recorder",
+		"data-slot": "cancel",
+		"data-visible": isVisible ? "true" : void 0,
+		type: "button",
+		variant: "quiet",
+		tone: "danger",
+		size: "sm",
+		iconOnly: true,
+		shape: "circle",
+		"aria-label": "Cancel voice recording",
+		"aria-hidden": !isVisible,
+		tabIndex: isVisible ? tabIndex : -1,
+		disabled: disabled ?? (recorder.isDisabled || !isVisible),
+		className,
+		onClick: handleClick,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(XIcon, {
+			"aria-hidden": "true",
+			className: "size-3.5"
+		})
+	});
+}
+function AudioRecorderSubmit({ className, children, disabled, onClick, tabIndex, ...props }) {
+	const recorder = useAudioRecorderContext();
+	const isVisible = recorder.canSubmit;
+	async function handleClick(event) {
+		onClick?.(event);
+		if (!event.defaultPrevented && recorder.canSubmit) await recorder.submit();
+	}
+	return /* @__PURE__ */ jsx(Button, {
+		"data-control-ui": "audio-recorder",
+		"data-slot": "submit",
+		"data-visible": isVisible ? "true" : void 0,
+		type: "button",
+		variant: "solid",
+		tone: "primary",
+		size: "sm",
+		iconOnly: true,
+		shape: "circle",
+		"aria-label": "Send voice recording",
+		"aria-hidden": !isVisible,
+		tabIndex: isVisible ? tabIndex : -1,
+		disabled: disabled ?? (recorder.state === "submitting" || !isVisible),
+		className,
+		onClick: handleClick,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(CheckIcon, {
+			"aria-hidden": "true",
+			className: "size-3.5"
+		})
+	});
+}
+//#endregion
+export { AudioRecorder, AudioRecorderCancel, AudioRecorderDuration, AudioRecorderStatus, AudioRecorderSubmit, AudioRecorderTrigger, AudioRecorderVisualizer, useAudioRecorderContext };

package/dist/audio-visualizer.d.ts

@@ -0,0 +1,12 @@
+import { AudioVisualizerKnobStyle } from "./knob-contracts/audio-visualizer-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/audio-visualizer.d.ts
+type AudioVisualizerProps = Omit<ComponentProps<"div">, "children" | "style"> & {
+  levels: readonly number[];
+  active?: boolean;
+  points?: number;
+  style?: CSSProperties & AudioVisualizerKnobStyle;
+};
+declare function AudioVisualizer({ levels, points, active, className, style, ...props }: AudioVisualizerProps): import("react").JSX.Element;
+//#endregion
+export { AudioVisualizer, AudioVisualizerProps };

package/dist/audio-visualizer.js

@@ -0,0 +1,58 @@
+import { cn } from "./lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/audio-visualizer.tsx
+const DEFAULT_POINTS = 28;
+const MAX_POINTS = 128;
+const MIN_VISIBLE_LEVEL = .12;
+function resolveAudioVisualizerLevels(levels, points) {
+	const pointCount = Math.min(MAX_POINTS, Math.max(1, Number.isFinite(points) ? Math.floor(points ?? DEFAULT_POINTS) : DEFAULT_POINTS));
+	const visible = levels.slice(-pointCount).map((level) => Number.isFinite(level) ? Math.min(1, Math.max(0, level)) : 0);
+	return (visible.length === pointCount ? visible : [...new Array(pointCount - visible.length).fill(0), ...visible]).map((level, position) => ({
+		key: `bar-${position}`,
+		level
+	}));
+}
+function AudioVisualizer({ levels, points, active = true, className, style, ...props }) {
+	const visible = resolveAudioVisualizerLevels(levels, points);
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "audio-visualizer",
+		"data-control-family": "audio-visualizer",
+		"data-slot": "root",
+		"data-variant": "bars",
+		"data-active": active ? "true" : void 0,
+		"aria-hidden": "true",
+		className: cn("shrink-0 overflow-hidden", className),
+		style,
+		...props,
+		children: /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "audio-visualizer",
+			"data-control-family": "audio-visualizer",
+			"data-slot": "track",
+			"data-active": active ? "true" : void 0,
+			className: "flex size-full items-stretch justify-end mask-l-from-90%",
+			children: visible.map(({ key, level }) => {
+				const perceptualLevel = Math.sqrt(level);
+				const visibleLevel = MIN_VISIBLE_LEVEL + perceptualLevel * .88;
+				const levelStyle = {
+					"--_audio-visualizer-level-opacity": `${.48 + perceptualLevel * .52}`,
+					clipPath: `inset(${(1 - visibleLevel) * 50}% 0 round var(--radius-control))`
+				};
+				return /* @__PURE__ */ jsx("span", {
+					"data-control-ui": "audio-visualizer",
+					"data-control-family": "audio-visualizer",
+					"data-slot": "bar-track",
+					className: "flex shrink-0 items-center",
+					children: /* @__PURE__ */ jsx("span", {
+						"data-control-ui": "audio-visualizer",
+						"data-control-family": "audio-visualizer",
+						"data-slot": "bar",
+						className: "block h-full w-full",
+						style: levelStyle
+					})
+				}, key);
+			})
+		})
+	});
+}
+//#endregion
+export { AudioVisualizer };

package/dist/blocks/chat.d.ts

@@ -0,0 +1,10 @@
+import { ChatLayout } from "../chat-layout.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/blocks/chat.d.ts
+type ChatBlockProps = Omit<ComponentProps<typeof ChatLayout>, "children"> & {
+  children: ReactNode;
+  composer: ReactNode;
+};
+declare function ChatBlock({ children, composer, className, ...props }: ChatBlockProps): import("react").JSX.Element;
+//#endregion
+export { ChatBlock, ChatBlockProps };

package/dist/blocks/chat.js

@@ -0,0 +1,12 @@
+import { ChatLayout, ChatThread } from "../chat-layout.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/blocks/chat.tsx
+function ChatBlock({ children, composer, className, ...props }) {
+	return /* @__PURE__ */ jsxs(ChatLayout, {
+		className,
+		...props,
+		children: [/* @__PURE__ */ jsx(ChatThread, { children }), composer]
+	});
+}
+//#endregion
+export { ChatBlock };

package/dist/blocks/coding-agent.d.ts

@@ -0,0 +1,61 @@
+import { ChatLayout } from "../chat-layout.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/blocks/coding-agent.d.ts
+type CodingAgentNavigationItem = {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+  trailing?: ReactNode;
+};
+type CodingAgentTask = {
+  id: string;
+  title: string;
+  trailing?: ReactNode;
+};
+type CodingAgentProject = {
+  id: string;
+  name: string;
+  icon?: ReactNode;
+  tasks: readonly CodingAgentTask[];
+  open?: boolean;
+};
+type CodingAgentBlockProps = Omit<ComponentProps<"div">, "children"> & {
+  appName?: string;
+  brand?: ReactNode;
+  sidebarTop?: ReactNode;
+  navigation?: readonly CodingAgentNavigationItem[];
+  projects: readonly CodingAgentProject[];
+  activeTaskId?: string;
+  activeTaskTitle?: string;
+  onNavigationSelect?: (item: CodingAgentNavigationItem) => void;
+  onTaskSelect?: (task: CodingAgentTask, project: CodingAgentProject) => void;
+  onNewTask?: () => void;
+  onSearch?: () => void;
+  headerActions?: ReactNode;
+  sidebarFooter?: ReactNode;
+  children: ReactNode;
+  layout?: "viewport" | "contained";
+};
+declare function CodingAgentBlock({ appName, brand, sidebarTop, navigation, projects, activeTaskId, activeTaskTitle, onNavigationSelect, onTaskSelect, onNewTask, onSearch, headerActions, sidebarFooter, children, layout, className, style, ...props }: CodingAgentBlockProps): import("react").JSX.Element;
+type CodingAgentConversationProps = Omit<ComponentProps<typeof ChatLayout>, "children"> & {
+  children: ReactNode;
+  composer: ReactNode;
+};
+declare function CodingAgentConversation({ children, composer, className, ...props }: CodingAgentConversationProps): import("react").JSX.Element;
+type CodingAgentSuggestion = {
+  id: string;
+  title: string;
+  description?: string;
+  icon?: ReactNode;
+  prompt?: string;
+};
+type CodingAgentEmptyStateProps = Omit<ComponentProps<"section">, "title"> & {
+  title?: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+  suggestions?: readonly CodingAgentSuggestion[];
+  onSuggestionSelect?: (prompt: string, suggestion: CodingAgentSuggestion) => void;
+};
+declare function CodingAgentEmptyState({ title, description, icon, suggestions, onSuggestionSelect, className, ...props }: CodingAgentEmptyStateProps): import("react").JSX.Element;
+//#endregion
+export { CodingAgentBlock, CodingAgentBlockProps, CodingAgentConversation, CodingAgentConversationProps, CodingAgentEmptyState, CodingAgentEmptyStateProps, CodingAgentNavigationItem, CodingAgentProject, CodingAgentSuggestion, CodingAgentTask };

package/dist/blocks/coding-agent.js

@@ -0,0 +1,255 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Button } from "../ui/button.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
+import { ChatLayout, ChatThread } from "../chat-layout.js";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarRail, SidebarTrigger, useSidebar } from "../ui/sidebar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BotIcon, ChevronRightIcon, CircleIcon, FolderIcon, PlusIcon, SearchIcon } from "lucide-react";
+//#region src/blocks/coding-agent.tsx
+function CodingAgentBlock({ appName = "Agent", brand, sidebarTop, navigation = [], projects, activeTaskId, activeTaskTitle = "New task", onNavigationSelect, onTaskSelect, onNewTask, onSearch, headerActions, sidebarFooter, children, layout = "viewport", className, style, ...props }) {
+	const contained = layout === "contained";
+	const providerStyle = {
+		"--sidebar-width": "17.5rem",
+		...style
+	};
+	return /* @__PURE__ */ jsxs(SidebarProvider, {
+		className: cn("overflow-hidden bg-background text-foreground", contained ? "relative h-full min-h-0" : "h-svh min-h-svh", className),
+		style: providerStyle,
+		...props,
+		children: [/* @__PURE__ */ jsx(CodingAgentSidebar, {
+			appName,
+			brand,
+			sidebarTop,
+			navigation,
+			projects,
+			activeTaskId,
+			contained,
+			sidebarFooter,
+			onNavigationSelect,
+			onTaskSelect,
+			onNewTask,
+			onSearch
+		}), /* @__PURE__ */ jsxs(SidebarInset, {
+			className: "h-full min-h-0 min-w-0 overflow-hidden",
+			children: [/* @__PURE__ */ jsxs("header", {
+				className: "flex h-12 shrink-0 items-center gap-2 border-b border-border/70 px-3",
+				children: [
+					/* @__PURE__ */ jsx(SidebarTrigger, {
+						size: "xs",
+						className: "md:hidden"
+					}),
+					/* @__PURE__ */ jsx(FolderIcon, {
+						className: "size-4 shrink-0 text-muted-foreground",
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ jsx("h1", {
+						className: "min-w-0 flex-1 truncate text-label font-medium",
+						children: activeTaskTitle
+					}),
+					headerActions ? /* @__PURE__ */ jsx("div", {
+						className: "flex shrink-0 items-center gap-1",
+						children: headerActions
+					}) : null
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "min-h-0 flex-1 overflow-hidden",
+				children
+			})]
+		})]
+	});
+}
+function CodingAgentSidebar({ appName, brand, sidebarTop, navigation, projects, activeTaskId, contained, sidebarFooter, onNavigationSelect, onTaskSelect, onNewTask, onSearch }) {
+	const { setOpenMobile } = useSidebar();
+	function finishMobileNavigation() {
+		setOpenMobile(false);
+	}
+	function startTask() {
+		onNewTask?.();
+		finishMobileNavigation();
+	}
+	return /* @__PURE__ */ jsxs(Sidebar, {
+		collapsible: "offcanvas",
+		className: contained ? "absolute! inset-y-0! h-full border-r border-sidebar-border" : void 0,
+		children: [
+			/* @__PURE__ */ jsxs(SidebarHeader, {
+				className: "gap-1.5 border-b border-sidebar-border px-2 pb-2 pt-3",
+				children: [
+					sidebarTop,
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 items-center gap-2 px-1 py-1",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex min-w-0 flex-1 items-center gap-2",
+							children: [brand ?? /* @__PURE__ */ jsx("span", {
+								className: "flex size-6 shrink-0 items-center justify-center rounded-md bg-foreground text-background",
+								children: /* @__PURE__ */ jsx(BotIcon, {
+									className: "size-3.5",
+									"aria-hidden": "true"
+								})
+							}), /* @__PURE__ */ jsx("span", {
+								className: "truncate text-label font-semibold",
+								children: appName
+							})]
+						}), /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "sm",
+							iconOnly: true,
+							"aria-label": "Search tasks",
+							onClick: onSearch,
+							children: /* @__PURE__ */ jsx(SearchIcon, { className: "size-3.5" })
+						})]
+					}),
+					/* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+						size: "sm",
+						onClick: startTask,
+						children: [/* @__PURE__ */ jsx(PlusIcon, {}), /* @__PURE__ */ jsx("span", { children: "New task" })]
+					}) }) })
+				]
+			}),
+			/* @__PURE__ */ jsxs(SidebarContent, { children: [navigation.length > 0 ? /* @__PURE__ */ jsx(SidebarGroup, {
+				className: "pb-0",
+				children: /* @__PURE__ */ jsx(SidebarMenu, { children: navigation.map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+					size: "sm",
+					onClick: () => {
+						onNavigationSelect?.(item);
+						finishMobileNavigation();
+					},
+					children: [
+						item.icon,
+						/* @__PURE__ */ jsx("span", { children: item.label }),
+						item.trailing ? /* @__PURE__ */ jsx("span", {
+							className: "ml-auto shrink-0",
+							children: item.trailing
+						}) : null
+					]
+				}) }, item.id)) })
+			}) : null, /* @__PURE__ */ jsxs(SidebarGroup, {
+				className: "gap-1 pt-1",
+				children: [/* @__PURE__ */ jsx(SidebarGroupLabel, { children: "Projects" }), /* @__PURE__ */ jsx("div", {
+					className: "grid gap-1",
+					children: projects.map((project) => /* @__PURE__ */ jsxs(Collapsible, {
+						defaultOpen: project.open ?? true,
+						className: "min-w-0",
+						children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
+							className: "flex h-[var(--control-h-sm)] w-full items-center gap-2 rounded-[var(--radius-popup-item)] px-2 text-caption font-medium hover:bg-foreground/6",
+							children: [
+								/* @__PURE__ */ jsx(ChevronRightIcon, {
+									className: "size-3.5 shrink-0 text-muted-foreground",
+									"aria-hidden": "true"
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "flex shrink-0 items-center text-muted-foreground",
+									children: project.icon ?? /* @__PURE__ */ jsx(FolderIcon, {
+										className: "size-4",
+										"aria-hidden": "true"
+									})
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "truncate",
+									children: project.name
+								})
+							]
+						}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(SidebarMenu, {
+							className: "mt-1 pl-5",
+							children: project.tasks.map((task) => {
+								const isActive = task.id === activeTaskId;
+								return /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+									size: "sm",
+									isActive,
+									"aria-current": isActive ? "page" : void 0,
+									onClick: () => {
+										onTaskSelect?.(task, project);
+										finishMobileNavigation();
+									},
+									children: [
+										/* @__PURE__ */ jsx(CircleIcon, {
+											className: "size-1.5 fill-current opacity-35",
+											"aria-hidden": "true"
+										}),
+										/* @__PURE__ */ jsx("span", { children: task.title }),
+										task.trailing ? /* @__PURE__ */ jsx("span", {
+											className: "ml-auto shrink-0",
+											children: task.trailing
+										}) : null
+									]
+								}) }, task.id);
+							})
+						}) })]
+					}, project.id))
+				})]
+			})] }),
+			sidebarFooter ? /* @__PURE__ */ jsx(SidebarFooter, {
+				className: "border-t border-sidebar-border",
+				children: sidebarFooter
+			}) : null,
+			/* @__PURE__ */ jsx(SidebarRail, {})
+		]
+	});
+}
+function CodingAgentConversation({ children, composer, className, ...props }) {
+	return /* @__PURE__ */ jsxs(ChatLayout, {
+		className: cn("h-full min-h-0 max-w-none rounded-none border-0 bg-transparent shadow-none", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(ChatThread, {
+			className: "px-0 py-8 sm:px-0",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "mx-auto flex min-h-full w-full max-w-3xl flex-col gap-8 px-4 sm:px-8",
+				children
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "mx-auto w-full max-w-3xl px-2 sm:px-6",
+			children: composer
+		})]
+	});
+}
+function CodingAgentEmptyState({ title = "What should we build?", description, icon, suggestions = [], onSuggestionSelect, className, ...props }) {
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn("my-auto flex w-full flex-col items-center py-10 text-center", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "mb-5 flex size-11 items-center justify-center rounded-2xl border bg-card text-muted-foreground shadow-sm",
+				children: icon ?? /* @__PURE__ */ jsx(BotIcon, {
+					className: "size-5",
+					"aria-hidden": "true"
+				})
+			}),
+			/* @__PURE__ */ jsx("h2", {
+				className: "text-balance text-xl font-medium tracking-tight sm:text-2xl",
+				children: title
+			}),
+			description ? /* @__PURE__ */ jsx("p", {
+				className: "mt-2 max-w-xl text-sm leading-6 text-muted-foreground",
+				children: description
+			}) : null,
+			suggestions.length > 0 ? /* @__PURE__ */ jsx("div", {
+				className: "mt-8 grid w-full grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4",
+				children: suggestions.map((suggestion) => /* @__PURE__ */ jsx(Button, {
+					variant: "surface",
+					size: "lg",
+					className: "h-auto min-h-28 w-full items-start justify-start whitespace-normal rounded-[var(--radius-panel)] px-4 py-4 text-left",
+					onClick: () => onSuggestionSelect?.(suggestion.prompt ?? suggestion.title, suggestion),
+					children: /* @__PURE__ */ jsxs("span", {
+						className: "flex min-w-0 flex-col items-start gap-3",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "text-primary-text",
+								children: suggestion.icon
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-sm font-medium leading-5 text-foreground",
+								children: suggestion.title
+							}),
+							suggestion.description ? /* @__PURE__ */ jsx("span", {
+								className: "text-caption leading-5 text-muted-foreground",
+								children: suggestion.description
+							}) : null
+						]
+					})
+				}, suggestion.id))
+			}) : null
+		]
+	});
+}
+//#endregion
+export { CodingAgentBlock, CodingAgentConversation, CodingAgentEmptyState };