@ctrl-ui/react 0.8.18 → 0.8.20

package/README.md

@@ -73,8 +73,15 @@ Install a peer only when you import the component that needs it.
 | `ui/calendar` | `react-day-picker` |
 | `ui/code`, `ui/code-diff` | `@tanstack/react-virtual`, `diff`, `shiki` |
 | `ui/command` | `cmdk` |
+| `ui/flow` | `@xyflow/react` |
 | `ui/markdown` | `streamdown` |
 | `ui/phone-input` | `react-phone-number-input`, `libphonenumber-js`, `zod` |
 | `ui/resizable` | `react-resizable-panels` |
 | `chat-composer` | `prosemirror-*` |
 | `email/email`, `email/templates` | `react-email` |
+
+`ui/flow` also needs the React Flow structural stylesheet, loaded under the recipes:
+
+```css
+@import "@xyflow/react/dist/base.css" layer(base);
+```

package/dist/action-bar.js

@@ -92,14 +92,14 @@ function ActionBarEdit({ value, children = "Edit", disabled, onClick, ...props }
 		if (event.defaultPrevented || !onEdit) return;
 		try {
 			const nextValue = await resolveCopyValue(editValue);
-			if (!nextValue) return;
+			if (nextValue === void 0) return;
 			onEdit(nextValue);
 		} catch (error) {
 			onEditError?.(error);
 		}
 	}
 	return /* @__PURE__ */ jsx(ActionBarItem, {
-		disabled: disabled ?? (!editValue || !onEdit),
+		disabled: disabled ?? (editValue === void 0 || !onEdit),
 		onClick: handleClick,
 		...props,
 		children

package/dist/audio-device-select.js

@@ -2,6 +2,7 @@
 import { cn } from "./lib/cn.js";
 import { Button } from "./ui/button.js";
 import { Select, SelectContent, SelectItem, SelectTrigger } from "./ui/select.js";
+import { Text } from "./ui/typography.js";
 import { createContext, use, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { MicIcon } from "lucide-react";
@@ -118,8 +119,10 @@ function AudioDeviceSelectContent({ children, ...props }) {
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "min-w-0 flex-1 truncate",
 					children: deviceLabel(device, index)
-				}), device.isDefault || device.deviceId === "default" ? /* @__PURE__ */ jsx("span", {
-					className: "ms-3 text-caption text-muted-foreground",
+				}), device.isDefault || device.deviceId === "default" ? /* @__PURE__ */ jsx(Text, {
+					size: "caption",
+					tone: "muted",
+					className: "ms-3",
 					children: "Default"
 				}) : null]
 			}, device.deviceId)),

package/dist/blocks/coding-agent.js

@@ -2,6 +2,7 @@
 import { cn } from "../lib/cn.js";
 import { Button } from "../ui/button.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
+import { Heading, Text } from "../ui/typography.js";
 import { ChatLayout, ChatThread } from "../chat-layout.js";
 import { SidebarProvider, useSidebar } from "../ui/sidebar-provider.js";
 import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar-menu.js";
@@ -10,7 +11,6 @@ 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 Heading = layout === "contained" ? "h2" : "h1";
 	const providerStyle = {
 		"--sidebar-width": "17.5rem",
 		...style
@@ -46,7 +46,10 @@ function CodingAgentBlock({ appName = "Agent", brand, sidebarTop, navigation = [
 						"aria-hidden": "true"
 					}),
 					/* @__PURE__ */ jsx(Heading, {
-						className: "min-w-0 flex-1 truncate text-label font-medium",
+						level: layout === "contained" ? 2 : 1,
+						size: "label",
+						weight: "medium",
+						className: "min-w-0 flex-1 truncate",
 						title: activeTaskTitle,
 						children: activeTaskTitle
 					}),
@@ -88,8 +91,10 @@ function CodingAgentSidebar({ appName, brand, sidebarTop, navigation, projects,
 									className: "size-3.5",
 									"aria-hidden": "true"
 								})
-							}), /* @__PURE__ */ jsx("span", {
-								className: "truncate text-label font-semibold",
+							}), /* @__PURE__ */ jsx(Text, {
+								size: "label",
+								weight: "semibold",
+								className: "truncate",
 								title: appName,
 								children: appName
 							})]
@@ -214,12 +219,14 @@ function CodingAgentEmptyState({ title = "What should we build?", description, i
 					"aria-hidden": "true"
 				})
 			}),
-			/* @__PURE__ */ jsx("h2", {
-				className: "text-balance text-heading-3 sm:text-heading-2",
+			/* @__PURE__ */ jsx(Heading, {
+				level: 2,
 				children: title
 			}),
-			description ? /* @__PURE__ */ jsx("p", {
-				className: "mt-2 max-w-xl text-pretty text-body text-muted-foreground",
+			description ? /* @__PURE__ */ jsx(Text, {
+				as: "p",
+				tone: "muted",
+				className: "mt-2 max-w-xl text-pretty",
 				children: description
 			}) : null,
 			suggestions.length > 0 ? /* @__PURE__ */ jsx("div", {
@@ -236,12 +243,15 @@ function CodingAgentEmptyState({ title = "What should we build?", description, i
 								className: "text-primary-text",
 								children: suggestion.icon
 							}),
-							/* @__PURE__ */ jsx("span", {
-								className: "text-body font-medium text-foreground",
+							/* @__PURE__ */ jsx(Text, {
+								weight: "medium",
+								tone: "foreground",
 								children: suggestion.title
 							}),
-							suggestion.description ? /* @__PURE__ */ jsx("span", {
-								className: "text-caption leading-5 text-muted-foreground",
+							suggestion.description ? /* @__PURE__ */ jsx(Text, {
+								size: "caption",
+								tone: "muted",
+								className: "leading-5",
 								children: suggestion.description
 							}) : null
 						]

package/dist/blocks/design-canvas-inspector.js

@@ -1,7 +1,8 @@
 "use client";
 import { Button } from "../ui/button.js";
-import { InputGroup, InputGroupAddon } from "../ui/input-group.js";
+import { Heading } from "../ui/typography.js";
 import { resizeDesignCanvasLayer } from "./design-canvas-data.js";
+import { InputGroup, InputGroupAddon } from "../ui/input-group.js";
 import { NumberField, NumberFieldGroup, NumberFieldInput, NumberFieldScrubArea } from "../ui/number-field.js";
 import { ColorPicker, ColorPickerArea, ColorPickerContent, ColorPickerEyeDropper, ColorPickerHue, ColorPickerInput, ColorPickerTrigger } from "../ui/color-picker.js";
 import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "../ui/empty.js";
@@ -136,8 +137,10 @@ function InspectorSection({ title, action, children }) {
 		className: "flex flex-col gap-2 border-b px-3 py-3",
 		children: [/* @__PURE__ */ jsxs("header", {
 			className: "flex h-6 items-center justify-between",
-			children: [/* @__PURE__ */ jsx("h3", {
-				className: "text-caption font-medium",
+			children: [/* @__PURE__ */ jsx(Heading, {
+				level: 3,
+				size: "caption",
+				weight: "medium",
 				children: title
 			}), action]
 		}), /* @__PURE__ */ jsx("div", {

package/dist/blocks/design-canvas.js

@@ -2,10 +2,11 @@
 import { cn } from "../lib/cn.js";
 import { Button } from "../ui/button.js";
 import { ScrollArea } from "../ui/scroll-area.js";
+import { Heading, Text } from "../ui/typography.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip.js";
+import { Drawer, DrawerContent, DrawerTitle } from "../ui/drawer.js";
 import { createDesignCanvasLayer, designCanvasFillColor, drawnDesignCanvasBounds } from "./design-canvas-data.js";
 import { DesignCanvasInspector } from "./design-canvas-inspector.js";
-import { Drawer, DrawerContent, DrawerTitle } from "../ui/drawer.js";
 import { InfiniteCanvas, InfiniteCanvasContent, InfiniteCanvasControls, InfiniteCanvasItem } from "../ui/infinite-canvas.js";
 import { ResizableFloatingPanel } from "../ui/resizable.js";
 import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator } from "../ui/toolbar.js";
@@ -344,7 +345,7 @@ function DesignCanvasBlock({ layers, defaultLayers = [], onLayersChange, selecte
 	});
 }
 function DesignCanvasPanel({ label, title, inDrawer = false, children }) {
-	const titleClassName = "flex h-11 shrink-0 items-center border-b px-3 text-caption font-medium";
+	const titleClassName = "flex h-11 shrink-0 items-center border-b px-3";
 	const titleText = /* @__PURE__ */ jsx("span", {
 		className: "truncate",
 		title,
@@ -354,9 +355,12 @@ function DesignCanvasPanel({ label, title, inDrawer = false, children }) {
 		"aria-label": label,
 		className: "flex min-h-0 flex-1 flex-col",
 		children: [inDrawer ? /* @__PURE__ */ jsx(DrawerTitle, {
-			className: titleClassName,
+			className: `${titleClassName} text-caption font-medium`,
 			children: titleText
-		}) : /* @__PURE__ */ jsx("h2", {
+		}) : /* @__PURE__ */ jsx(Heading, {
+			level: 2,
+			size: "caption",
+			weight: "medium",
 			className: titleClassName,
 			children: titleText
 		}), /* @__PURE__ */ jsx(ScrollArea, {
@@ -410,12 +414,17 @@ function DesignCanvasLayerNode({ layer, selected, onSelect, onKeyDown, onLayerCh
 			y: Math.round(position.y)
 		})),
 		children: [
-			layer.kind === "frame" ? /* @__PURE__ */ jsx("span", {
-				className: "absolute start-0 bottom-full mb-1 whitespace-nowrap text-caption text-muted-foreground",
+			layer.kind === "frame" ? /* @__PURE__ */ jsx(Text, {
+				size: "caption",
+				tone: "muted",
+				className: "absolute start-0 bottom-full mb-1 whitespace-nowrap",
 				children: layer.name
 			}) : null,
-			layer.kind === "text" ? /* @__PURE__ */ jsx("p", {
-				className: "size-full overflow-hidden text-2xl leading-8 whitespace-nowrap",
+			layer.kind === "text" ? /* @__PURE__ */ jsx(Text, {
+				as: "p",
+				size: "heading-2",
+				weight: "normal",
+				className: "size-full overflow-hidden whitespace-nowrap",
 				style: { color: fillColor },
 				children: layer.text
 			}) : /* @__PURE__ */ jsx("div", {
@@ -425,8 +434,9 @@ function DesignCanvasLayerNode({ layer, selected, onSelect, onKeyDown, onLayerCh
 					borderRadius: layer.kind === "ellipse" ? "50%" : layer.cornerRadius
 				}
 			}),
-			selected ? /* @__PURE__ */ jsxs("span", {
-				className: "absolute inset-x-0 top-full mx-auto mt-1.5 w-max rounded-sm bg-primary px-1 text-micro whitespace-nowrap text-primary-foreground tabular-nums",
+			selected ? /* @__PURE__ */ jsxs(Text, {
+				size: "micro",
+				className: "absolute inset-x-0 top-full mx-auto mt-1.5 w-max rounded-sm bg-primary px-1 whitespace-nowrap text-primary-foreground tabular-nums",
 				children: [
 					layer.width,
 					" × ",

package/dist/blocks/discussion-markdown-input.d.ts

@@ -0,0 +1,14 @@
+import { MarkdownImageUploader } from "../markdown-editor/uploads.js";
+import { MarkdownEditorStatus } from "../markdown-editor.js";
+import { MarkdownEditorMention } from "../markdown-editor/suggestions.js";
+//#region src/blocks/discussion-markdown-input.d.ts
+export default function DiscussionMarkdownInput({ label, placeholder, autoFocus, onUploadImage, mentions, onStatusChange, blocked }: {
+  label: string;
+  placeholder?: string;
+  autoFocus?: boolean;
+  onUploadImage?: MarkdownImageUploader;
+  mentions?: readonly MarkdownEditorMention[];
+  onStatusChange: (status: MarkdownEditorStatus) => void;
+  blocked: boolean;
+}): import("react").JSX.Element;
+//#endregion

package/dist/blocks/discussion-markdown-input.js

@@ -0,0 +1,36 @@
+"use client";
+import { useChatComposerContext } from "../chat-composer.js";
+import { MarkdownEditor, MarkdownEditorContent } from "../markdown-editor.js";
+import { MarkdownEditorSuggestions } from "../markdown-editor/suggestions.js";
+import { MarkdownEditorToolbar, MarkdownEditorUploads } from "../markdown-editor/toolbar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/blocks/discussion-markdown-input.tsx
+function DiscussionMarkdownInput({ label, placeholder, autoFocus, onUploadImage, mentions, onStatusChange, blocked }) {
+	const composer = useChatComposerContext();
+	return /* @__PURE__ */ jsxs(MarkdownEditor, {
+		value: composer.value,
+		onValueChange: composer.setValue,
+		disabled: composer.isDisabled || composer.isLocked,
+		onUploadImage,
+		onStatusChange,
+		onKeyDownCapture: (event) => {
+			if (!(event.target instanceof HTMLElement) || !event.target.isContentEditable && event.target.tagName !== "TEXTAREA") return;
+			if (event.key !== "Enter" || !(event.metaKey || event.ctrlKey) || event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229) return;
+			event.preventDefault();
+			event.stopPropagation();
+			if (!blocked) composer.submit();
+		},
+		children: [
+			/* @__PURE__ */ jsx(MarkdownEditorToolbar, {}),
+			/* @__PURE__ */ jsx(MarkdownEditorContent, {
+				label,
+				placeholder,
+				autoFocus
+			}),
+			/* @__PURE__ */ jsx(MarkdownEditorSuggestions, { mentions }),
+			/* @__PURE__ */ jsx(MarkdownEditorUploads, {})
+		]
+	});
+}
+//#endregion
+export { DiscussionMarkdownInput as default };

package/dist/blocks/discussion.d.ts

@@ -1,3 +1,5 @@
+import { MarkdownImageUploader } from "../markdown-editor/uploads.js";
+import { MarkdownEditorMention } from "../markdown-editor/suggestions.js";
 import { ChatComposer } from "../chat-composer.js";
 import { ChatMessage } from "../chat-message.js";
 import { ComponentProps, ReactNode } from "react";
@@ -9,20 +11,24 @@ export type DiscussionComposerProps = Omit<ComponentProps<typeof ChatComposer>,
   secondaryAction?: ReactNode;
   hint?: ReactNode;
   autoFocus?: boolean;
+  format?: "plain" | "markdown";
+  onUploadImage?: MarkdownImageUploader;
+  mentions?: readonly MarkdownEditorMention[];
 };
-export declare function DiscussionComposer({ label, placeholder, submitLabel, secondaryAction, hint, autoFocus, ...props }: DiscussionComposerProps): import("react").JSX.Element;
+export declare function DiscussionComposer({ label, placeholder, submitLabel, secondaryAction, hint, autoFocus, format, onUploadImage, mentions, onSubmit, ...props }: DiscussionComposerProps): import("react").JSX.Element;
 export type DiscussionCommentProps = Omit<ComponentProps<typeof ChatMessage>, "from" | "layout" | "authorLabel" | "children"> & {
   author: string;
   avatar?: ReactNode;
   sentAt: string;
   timeLabel: ReactNode;
   edited?: boolean;
-  children: ReactNode;
+  children?: ReactNode;
+  markdown?: string;
   actions?: ReactNode;
   onReply?: () => void;
   replyLabel?: ReactNode;
   replies?: ReactNode;
   replyComposer?: ReactNode;
 };
-export declare function DiscussionComment({ author, avatar, sentAt, timeLabel, edited, children, actions, onReply, replyLabel, replies, replyComposer, ...props }: DiscussionCommentProps): import("react").JSX.Element;
+export declare function DiscussionComment({ author, avatar, sentAt, timeLabel, edited, children, markdown, actions, onReply, replyLabel, replies, replyComposer, ...props }: DiscussionCommentProps): import("react").JSX.Element;
 //#endregion

package/dist/blocks/discussion.js

@@ -1,34 +1,97 @@
 "use client";
 import { Button } from "../ui/button.js";
+import { Text } from "../ui/typography.js";
 import { ChatComposer, ChatComposerShell, ChatComposerSubmit, ChatComposerTextarea, ChatComposerToolbar } from "../chat-composer.js";
 import { ChatMessageReplies } from "../chat-message/social.js";
 import { ChatMessage, ChatMessageActions, ChatMessageAuthor, ChatMessageAvatar, ChatMessageBody, ChatMessageContent, ChatMessageFooter, ChatMessageHeader, ChatMessageRow, ChatMessageTime } from "../chat-message.js";
+import { Markdown } from "../ui/markdown.js";
 import { Kbd, KbdGroup } from "../ui/kbd.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Suspense, lazy, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { CornerDownRightIcon } from "lucide-react";
 //#region src/blocks/discussion.tsx
-function DiscussionComposer({ label, placeholder, submitLabel = "Post", secondaryAction, hint = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(KbdGroup, { children: [/* @__PURE__ */ jsx(Kbd, { children: "⌘" }), /* @__PURE__ */ jsx(Kbd, { children: "Enter" })] }), /* @__PURE__ */ jsx("span", { children: "to post" })] }), autoFocus, ...props }) {
+const DiscussionMarkdownInput = lazy(() => import("./discussion-markdown-input.js"));
+function DiscussionComposer({ label, placeholder, submitLabel = "Post", secondaryAction, hint = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(KbdGroup, { children: [/* @__PURE__ */ jsx(Kbd, { children: "⌘" }), /* @__PURE__ */ jsx(Kbd, { children: "Enter" })] }), /* @__PURE__ */ jsx("span", { children: "to post" })] }), autoFocus, format = "plain", onUploadImage, mentions, onSubmit, ...props }) {
+	const [draft, setDraft] = useState(props.defaultValue ?? "");
+	const value = props.value ?? draft;
+	const [status, setStatus] = useState({
+		isEmpty: false,
+		hasPendingUploads: false
+	});
+	const [submitting, setSubmitting] = useState(false);
+	const [error, setError] = useState(null);
+	const blocked = format === "markdown" && (status.isEmpty || status.hasPendingUploads);
 	return /* @__PURE__ */ jsx(ChatComposer, {
 		submitKey: "mod-enter",
 		...props,
-		children: /* @__PURE__ */ jsxs(ChatComposerShell, { children: [/* @__PURE__ */ jsx(ChatComposerTextarea, {
-			"aria-label": label,
-			placeholder,
-			autoFocus,
-			"aria-keyshortcuts": "Meta+Enter Control+Enter"
-		}), /* @__PURE__ */ jsxs(ChatComposerToolbar, { children: [/* @__PURE__ */ jsx("span", {
-			className: "flex min-w-0 items-center gap-1.5 text-caption text-muted-foreground",
-			children: hint
-		}), /* @__PURE__ */ jsxs("span", {
-			className: "flex items-center gap-2",
-			children: [secondaryAction, /* @__PURE__ */ jsx(ChatComposerSubmit, { children: submitLabel })]
-		})] })] })
+		value,
+		onValueChange: (next) => {
+			setDraft(next);
+			props.onValueChange?.(next);
+		},
+		state: submitting ? "submitting" : props.state,
+		onSubmit: async (payload) => {
+			if (blocked || submitting) return;
+			setSubmitting(true);
+			setError(null);
+			try {
+				await onSubmit?.({
+					...payload,
+					value: format === "markdown" ? value : payload.value
+				});
+			} catch (cause) {
+				setError(cause instanceof Error ? cause.message : "Couldn't post your comment. Please try again.");
+			} finally {
+				setSubmitting(false);
+			}
+		},
+		children: /* @__PURE__ */ jsxs(ChatComposerShell, { children: [
+			format === "markdown" ? /* @__PURE__ */ jsx(Suspense, {
+				fallback: /* @__PURE__ */ jsx(ChatComposerTextarea, {
+					"aria-label": label,
+					placeholder,
+					disabled: true
+				}),
+				children: /* @__PURE__ */ jsx(DiscussionMarkdownInput, {
+					label,
+					placeholder,
+					autoFocus,
+					onUploadImage,
+					mentions,
+					onStatusChange: setStatus,
+					blocked
+				})
+			}) : /* @__PURE__ */ jsx(ChatComposerTextarea, {
+				"aria-label": label,
+				placeholder,
+				autoFocus,
+				"aria-keyshortcuts": "Meta+Enter Control+Enter"
+			}),
+			error ? /* @__PURE__ */ jsx(Text, {
+				as: "p",
+				role: "alert",
+				className: "px-3",
+				children: error
+			}) : null,
+			/* @__PURE__ */ jsxs(ChatComposerToolbar, { children: [/* @__PURE__ */ jsx(Text, {
+				size: "caption",
+				tone: "muted",
+				className: "flex min-w-0 items-center gap-1.5",
+				children: hint
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-2",
+				children: [secondaryAction, /* @__PURE__ */ jsx(ChatComposerSubmit, {
+					disabled: blocked || submitting,
+					children: submitLabel
+				})]
+			})] })
+		] })
 	});
 }
 function initials(name) {
 	return name.split(/\s+/).slice(0, 2).map((word) => word.charAt(0).toUpperCase()).join("");
 }
-function DiscussionComment({ author, avatar, sentAt, timeLabel, edited = false, children, actions, onReply, replyLabel = "Reply", replies, replyComposer, ...props }) {
+function DiscussionComment({ author, avatar, sentAt, timeLabel, edited = false, children, markdown, actions, onReply, replyLabel = "Reply", replies, replyComposer, ...props }) {
 	const hasReplies = Boolean(replies) || Boolean(replyComposer);
 	return /* @__PURE__ */ jsx(ChatMessage, {
 		from: "participant",
@@ -49,7 +112,10 @@ function DiscussionComment({ author, avatar, sentAt, timeLabel, edited = false,
 					}),
 					edited ? /* @__PURE__ */ jsx("span", { children: "(edited)" }) : null
 				] }),
-				/* @__PURE__ */ jsx(ChatMessageContent, { children }),
+				/* @__PURE__ */ jsx(ChatMessageContent, { children: markdown !== void 0 ? /* @__PURE__ */ jsx(Markdown, {
+					content: markdown,
+					mode: "static"
+				}) : children }),
 				onReply ? /* @__PURE__ */ jsx(ChatMessageFooter, { children: /* @__PURE__ */ jsxs(Button, {
 					variant: "ghost",
 					size: "xs",

package/dist/blocks/file-explorer.js

@@ -3,13 +3,14 @@ import { cn } from "../lib/cn.js";
 import { Button } from "../ui/button.js";
 import { LiveStatus } from "../ui/live-status.js";
 import { ScrollArea } from "../ui/scroll-area.js";
-import { InputGroup, InputGroupAddon } from "../ui/input-group.js";
-import { Input } from "../ui/input.js";
+import { Heading, Text } from "../ui/typography.js";
+import { Drawer, DrawerBody, DrawerContent, DrawerTitle, DrawerTrigger } from "../ui/drawer.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 { InputGroup, InputGroupAddon } from "../ui/input-group.js";
+import { Input } from "../ui/input.js";
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty.js";
-import { Drawer, DrawerBody, DrawerContent, DrawerTitle, DrawerTrigger } from "../ui/drawer.js";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "../ui/resizable.js";
 import { groupFileExplorerItems, orderFileExplorerEntries, resolveFileExplorer, searchFileExplorer } from "./file-explorer-data.js";
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "../ui/breadcrumb.js";
@@ -81,7 +82,7 @@ function FileExplorerBlock({ locations, activeLocationId, defaultActiveLocationI
 			children: [
 				/* @__PURE__ */ jsx(FileExplorerHeader, {
 					location: activeLocation,
-					headingAs: contained ? "h2" : "h1",
+					headingLevel: contained ? 2 : 1,
 					breadcrumbs: resolution.breadcrumbs,
 					query,
 					searchPlaceholder,
@@ -110,7 +111,7 @@ function FileExplorerBlock({ locations, activeLocationId, defaultActiveLocationI
 						columns: resolution.columns,
 						selectedEntry: resolution.selectedEntry,
 						selectedPath: resolution.validPath,
-						headingAs: contained ? "h3" : "h2",
+						headingLevel: contained ? 3 : 2,
 						backLabel,
 						detailsLabel,
 						onNavigate: changePath,
@@ -164,7 +165,7 @@ function FileExplorerSidebar({ locations, activeLocationId, sidebarTop, sidebarF
 		]
 	});
 }
-function FileExplorerHeader({ location, headingAs: Heading, breadcrumbs, query, searchPlaceholder, searchLabel, clearSearchLabel, backLabel, moreActionsLabel, canGoBack, headerActions, headerMenuItems, onBack, onBreadcrumbSelect, onQueryChange }) {
+function FileExplorerHeader({ location, headingLevel, breadcrumbs, query, searchPlaceholder, searchLabel, clearSearchLabel, backLabel, moreActionsLabel, canGoBack, headerActions, headerMenuItems, onBack, onBreadcrumbSelect, onQueryChange }) {
 	return /* @__PURE__ */ jsxs("header", {
 		className: "shrink-0 border-b border-border/70 bg-card/35",
 		children: [/* @__PURE__ */ jsxs("div", {
@@ -184,7 +185,10 @@ function FileExplorerHeader({ location, headingAs: Heading, breadcrumbs, query,
 					})
 				}),
 				/* @__PURE__ */ jsx(Heading, {
-					className: "min-w-0 flex-1 truncate text-label font-semibold",
+					level: headingLevel,
+					size: "label",
+					weight: "semibold",
+					className: "min-w-0 flex-1 truncate",
 					title: location.label,
 					children: location.label
 				}),
@@ -245,7 +249,7 @@ function FileExplorerHeader({ location, headingAs: Heading, breadcrumbs, query,
 		})]
 	});
 }
-function FileExplorerColumns({ columns, selectedEntry, selectedPath, headingAs, backLabel, detailsLabel, onNavigate, onOpen }) {
+function FileExplorerColumns({ columns, selectedEntry, selectedPath, headingLevel, backLabel, detailsLabel, onNavigate, onOpen }) {
 	const rootRef = useRef(null);
 	const optionElements = useRef(/* @__PURE__ */ new Map());
 	const pendingFocus = useRef(null);
@@ -381,8 +385,10 @@ function FileExplorerColumns({ columns, selectedEntry, selectedPath, headingAs,
 						className: "truncate",
 						children: parentColumn.label
 					})]
-				}) : /* @__PURE__ */ jsx("span", {
-					className: "min-w-0 truncate px-1 text-label font-medium",
+				}) : /* @__PURE__ */ jsx(Text, {
+					size: "label",
+					weight: "medium",
+					className: "min-w-0 truncate px-1",
 					children: activeColumn?.label
 				}), /* @__PURE__ */ jsxs(Drawer, { children: [/* @__PURE__ */ jsx(DrawerTrigger, {
 					render: /* @__PURE__ */ jsx(Button, {
@@ -395,7 +401,7 @@ function FileExplorerColumns({ columns, selectedEntry, selectedPath, headingAs,
 				}), /* @__PURE__ */ jsx(DrawerContent, { children: selectedEntry ? /* @__PURE__ */ jsx(DrawerBody, { children: /* @__PURE__ */ jsx(FileExplorerPreviewContent, {
 					entry: selectedEntry,
 					title: /* @__PURE__ */ jsx(DrawerTitle, {
-						className: "mt-4 max-w-full truncate text-heading-4 font-semibold",
+						className: "mt-4 max-w-full truncate text-heading-4",
 						children: selectedEntry.name
 					})
 				}) }) : null })] })]
@@ -418,7 +424,7 @@ function FileExplorerColumns({ columns, selectedEntry, selectedPath, headingAs,
 					minSize: "20%",
 					children: /* @__PURE__ */ jsx(FileExplorerPreview, {
 						entry: selectedEntry,
-						headingAs
+						headingLevel
 					})
 				})]
 			}) : null
@@ -502,10 +508,14 @@ function FileExplorerColumnView({ column, optionRef, onSelect, onOpen, onOptionK
 					role: "group",
 					"aria-labelledby": labelId,
 					className: "grid min-w-0 gap-0.5",
-					children: [/* @__PURE__ */ jsx("div", {
+					children: [/* @__PURE__ */ jsx(Text, {
 						role: "presentation",
 						id: labelId,
-						className: "mb-1 px-2 text-caption font-semibold text-muted-foreground",
+						as: "div",
+						size: "caption",
+						weight: "semibold",
+						tone: "muted",
+						className: "mb-1 px-2",
 						children: group.label
 					}), options]
 				}, group.label) : /* @__PURE__ */ jsx("div", {
@@ -517,7 +527,7 @@ function FileExplorerColumnView({ column, optionRef, onSelect, onOpen, onOptionK
 		})
 	});
 }
-function FileExplorerPreview({ entry, headingAs: Heading }) {
+function FileExplorerPreview({ entry, headingLevel }) {
 	if (!entry) return /* @__PURE__ */ jsx(Empty, {
 		className: "h-full rounded-none bg-background/45",
 		children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
@@ -533,7 +543,9 @@ function FileExplorerPreview({ entry, headingAs: Heading }) {
 			entry,
 			className: "px-6 py-10",
 			title: /* @__PURE__ */ jsx(Heading, {
-				className: "mt-4 max-w-full truncate text-heading-4 font-semibold",
+				level: headingLevel,
+				size: "heading-4",
+				className: "mt-4 max-w-full truncate",
 				title: entry.name,
 				children: entry.name
 			})
@@ -549,8 +561,11 @@ function FileExplorerPreviewContent({ entry, title, className }) {
 				children: /* @__PURE__ */ jsx(FileExplorerEntryIcon, { entry })
 			}),
 			title,
-			entry.description ? /* @__PURE__ */ jsx("div", {
-				className: "mt-1 text-caption text-muted-foreground",
+			entry.description ? /* @__PURE__ */ jsx(Text, {
+				as: "div",
+				size: "caption",
+				tone: "muted",
+				className: "mt-1",
 				children: entry.description
 			}) : null,
 			entry.details && entry.details.length > 0 ? /* @__PURE__ */ jsx("dl", {
@@ -613,8 +628,11 @@ function FileExplorerSearchResults({ label, status, clearSearchLabel, results, o
 		lockAxis: "x",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "mx-auto grid w-full max-w-3xl gap-1 p-4",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "mb-2 px-2 text-caption text-muted-foreground tabular-nums",
+			children: [/* @__PURE__ */ jsx(Text, {
+				as: "div",
+				size: "caption",
+				tone: "muted",
+				className: "mb-2 px-2 tabular-nums",
 				children: status
 			}), /* @__PURE__ */ jsx("div", {
 				role: "listbox",
@@ -639,11 +657,15 @@ function FileExplorerSearchResults({ label, status, clearSearchLabel, results, o
 						children: /* @__PURE__ */ jsx(FileExplorerEntryIcon, { entry: result.entry })
 					}), /* @__PURE__ */ jsxs("span", {
 						className: "min-w-0 flex-1",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "block truncate text-label text-foreground",
+						children: [/* @__PURE__ */ jsx(Text, {
+							size: "label",
+							tone: "foreground",
+							className: "block truncate",
 							children: result.entry.name
-						}), /* @__PURE__ */ jsx("span", {
-							className: "block truncate text-caption text-muted-foreground",
+						}), /* @__PURE__ */ jsx(Text, {
+							size: "caption",
+							tone: "muted",
+							className: "block truncate",
 							children: result.parents.join(" / ") || "Top level"
 						})]
 					})]