@ctrl-ui/react 0.8.19 → 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-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,12 +1,13 @@
 "use client";
 import { Button } from "../ui/button.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";
 import { Separator } from "../ui/separator.js";
 import { Toggle } from "../ui/toggle.js";
-import { resizeDesignCanvasLayer } from "./design-canvas-data.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { BlendIcon, EyeIcon, EyeOffIcon, Link2Icon, MinusIcon, PlusIcon, RotateCwIcon, SquareRoundCornerIcon, Unlink2Icon } from "lucide-react";
@@ -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,14 +2,14 @@
 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 { Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator } from "../ui/toolbar.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 { Text } from "../ui/typography.js";
 import { createDesignCanvasLayer, designCanvasFillColor, drawnDesignCanvasBounds } from "./design-canvas-data.js";
 import { DesignCanvasInspector } from "./design-canvas-inspector.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";
 import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CircleIcon, FrameIcon, LayersIcon, MousePointer2Icon, SlidersHorizontalIcon, SquareIcon, TypeIcon } from "lucide-react";
@@ -345,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,
@@ -355,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, {
@@ -411,8 +414,10 @@ 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(Text, {
@@ -429,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

@@ -1,11 +1,13 @@
 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, onStatusChange, blocked }: {
+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;

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

@@ -1,10 +1,11 @@
 "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, onStatusChange, blocked }) {
+function DiscussionMarkdownInput({ label, placeholder, autoFocus, onUploadImage, mentions, onStatusChange, blocked }) {
 	const composer = useChatComposerContext();
 	return /* @__PURE__ */ jsxs(MarkdownEditor, {
 		value: composer.value,
@@ -26,6 +27,7 @@ function DiscussionMarkdownInput({ label, placeholder, autoFocus, onUploadImage,
 				placeholder,
 				autoFocus
 			}),
+			/* @__PURE__ */ jsx(MarkdownEditorSuggestions, { mentions }),
 			/* @__PURE__ */ jsx(MarkdownEditorUploads, {})
 		]
 	});

package/dist/blocks/discussion.d.ts

@@ -1,4 +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";
@@ -12,8 +13,9 @@ export type DiscussionComposerProps = Omit<ComponentProps<typeof ChatComposer>,
   autoFocus?: boolean;
   format?: "plain" | "markdown";
   onUploadImage?: MarkdownImageUploader;
+  mentions?: readonly MarkdownEditorMention[];
 };
-export declare function DiscussionComposer({ label, placeholder, submitLabel, secondaryAction, hint, autoFocus, format, onUploadImage, onSubmit, ...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;

package/dist/blocks/discussion.js

@@ -1,5 +1,6 @@
 "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";
@@ -10,7 +11,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { CornerDownRightIcon } from "lucide-react";
 //#region src/blocks/discussion.tsx
 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, onSubmit, ...props }) {
+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({
@@ -56,6 +57,7 @@ function DiscussionComposer({ label, placeholder, submitLabel = "Post", secondar
 					placeholder,
 					autoFocus,
 					onUploadImage,
+					mentions,
 					onStatusChange: setStatus,
 					blocked
 				})
@@ -65,13 +67,16 @@ function DiscussionComposer({ label, placeholder, submitLabel = "Post", secondar
 				autoFocus,
 				"aria-keyshortcuts": "Meta+Enter Control+Enter"
 			}),
-			error ? /* @__PURE__ */ jsx("p", {
+			error ? /* @__PURE__ */ jsx(Text, {
+				as: "p",
 				role: "alert",
 				className: "px-3",
 				children: error
 			}) : null,
-			/* @__PURE__ */ jsxs(ChatComposerToolbar, { children: [/* @__PURE__ */ jsx("span", {
-				className: "flex min-w-0 items-center gap-1.5 text-caption text-muted-foreground",
+			/* @__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",

package/dist/blocks/file-explorer.js

@@ -3,17 +3,18 @@ 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 { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "../ui/breadcrumb.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 { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "../ui/dropdown-menu.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";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
 import { Fragment, useEffect, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeftIcon, ChevronRightIcon, FileIcon, FolderIcon, MoreHorizontalIcon, SearchIcon, XIcon } from "lucide-react";
@@ -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, {
@@ -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",
+				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"
 						})]
 					})]

package/dist/blocks/settings.js

@@ -3,16 +3,16 @@ 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 { Heading, Text } from "../ui/typography.js";
 import { prefersReducedMotion } from "../lib/motion.js";
-import { InputGroup, InputGroupAddon } from "../ui/input-group.js";
-import { Input } from "../ui/input.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 { 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 { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet } from "../ui/field.js";
-import { Heading } from "../ui/typography.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";
@@ -119,8 +119,10 @@ function SettingsShell({ pages, currentPage, query, results, backAction, searchP
 			className: "h-full min-h-0 min-w-0",
 			children: [/* @__PURE__ */ jsxs("header", {
 				className: "flex h-12 shrink-0 items-center gap-2 border-b px-3 lg:hidden",
-				children: [/* @__PURE__ */ jsx(SidebarTrigger, {}), /* @__PURE__ */ jsx("span", {
-					className: "truncate text-label font-medium",
+				children: [/* @__PURE__ */ jsx(SidebarTrigger, {}), /* @__PURE__ */ jsx(Text, {
+					size: "label",
+					weight: "medium",
+					className: "truncate",
 					title: currentPage?.title,
 					children: currentPage?.title ?? "Settings"
 				})]

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

@@ -1,5 +1,5 @@
-import { ChatComposerEditorExtension } from "../types.js";
 import { TriggerConfig, TriggerMenuItemData } from "../../hooks/use-trigger-menu.js";
+import { ChatComposerEditorExtension } from "../types.js";
 import { Command } from "prosemirror-state";
 //#region src/chat-composer-editor/extensions/mention.d.ts
 export declare const deleteMentionBackward: Command;

package/dist/chat-message.d.ts

@@ -23,6 +23,19 @@ export type ChatMessageTimeProps = ChatMessagePartProps<"time"> & {
 export declare function ChatMessageTime({ className, ...props }: ChatMessageTimeProps): JSX.Element;
 export type ChatMessageContentProps = ChatMessagePartProps<"div">;
 export declare function ChatMessageContent({ className, ...props }: ChatMessageContentProps): JSX.Element;
+export type ChatMessageEditableProps = Omit<ChatMessagePartProps<"div">, "onError"> & {
+  value: string;
+  /** Persist the text in the host. Reject to keep the draft open for retry. */
+  onSave: (value: string) => void | Promise<void>;
+  onSaveError?: (error: unknown) => void;
+  editorLabel?: string;
+  saveLabel?: string;
+  cancelLabel?: string;
+  savingLabel?: string;
+  saveErrorLabel?: string;
+};
+/** Plain-text editing in the message surface. Children replace the default Copy/Edit actions. */
+export declare function ChatMessageEditable({ value, onSave, onSaveError, editorLabel, saveLabel, cancelLabel, savingLabel, saveErrorLabel, children, className, ...props }: ChatMessageEditableProps): JSX.Element;
 export type ChatMessagePendingProps = Omit<ChatMessagePartProps<"div">, "children">;
 /** Visual only: the pending transition is announced by `ChatMessage` through the thread's status region. */
 export declare function ChatMessagePending({ className, ...props }: ChatMessagePendingProps): JSX.Element | null;