@ctrl-ui/react 0.9.4 → 0.9.6

package/dist/blocks/agent-run.js

@@ -0,0 +1,254 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { LiveStatus } from "../ui/live-status.js";
+import { Activity, ActivityContent, ActivityDetail, ActivityDetailContent, ActivityDetailLabel, ActivityIcon, ActivityRow, ActivityStatus, ActivityTitle, ActivityTrigger } from "../activity.js";
+import { Heading, Text } from "../ui/typography.js";
+import { Badge } from "../ui/badge.js";
+import { elapsedIsoDuration, formatElapsed, useRunClock } from "./agent-run-clock.js";
+import { SidebarProvider } from "../ui/sidebar-provider.js";
+import { SidebarInset, SidebarTrigger } from "../ui/sidebar.js";
+import { agentRunStatusColors, agentRunStatusLabels, agentRunStepLabels } from "./agent-run-status.js";
+import { AgentRunSidebar } from "./agent-run-sidebar.js";
+import { Card, CardAction, CardContent, CardHeader } from "../ui/card.js";
+import { Timeline, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, TimelineMeta, TimelineSeparator, TimelineTitle } from "../ui/timeline.js";
+import { createContext, useContext, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Circle, CircleAlert, CircleDashed, CirclePause, LoaderCircle } from "lucide-react";
+//#region src/blocks/agent-run.tsx
+const AgentRunLayoutContext = createContext("viewport");
+function useHeadingLevels() {
+	return useContext(AgentRunLayoutContext) === "contained" ? {
+		title: 2,
+		section: 3
+	} : {
+		title: 1,
+		section: 2
+	};
+}
+function AgentRunBlock({ appName = "Agents", brand, runs, activeRunId, onRunSelect, onNewRun, sidebarFooter, children, layout = "viewport", className, style, ...props }) {
+	const providerStyle = {
+		"--sidebar-width": "16rem",
+		...style
+	};
+	return /* @__PURE__ */ jsxs(SidebarProvider, {
+		layout,
+		className: cn("bg-background text-foreground", layout === "viewport" && "h-svh overflow-hidden", className),
+		style: providerStyle,
+		...props,
+		children: [/* @__PURE__ */ jsx(AgentRunSidebar, {
+			appName,
+			brand,
+			runs,
+			activeRunId,
+			sidebarFooter,
+			onRunSelect,
+			onNewRun
+		}), /* @__PURE__ */ jsx(SidebarInset, {
+			className: "@container/agent-run flex h-full min-h-0 min-w-0 flex-col overflow-hidden",
+			children: /* @__PURE__ */ jsx(AgentRunLayoutContext.Provider, {
+				value: layout,
+				children
+			})
+		})]
+	});
+}
+function AgentRunElapsed({ startedAt, endedAt, className, ...props }) {
+	const now = useRunClock(endedAt === void 0);
+	const end = endedAt ?? now;
+	const ms = end === null ? null : Math.max(0, end - startedAt);
+	return /* @__PURE__ */ jsx("time", {
+		dateTime: ms === null ? void 0 : elapsedIsoDuration(ms),
+		className: cn("text-label tabular-nums text-muted-foreground", className),
+		...props,
+		children: ms === null ? "" : formatElapsed(ms)
+	});
+}
+function AgentRunHeader({ title, status, startedAt, endedAt, actions, className, ...props }) {
+	const levels = useHeadingLevels();
+	return /* @__PURE__ */ jsxs("header", {
+		className: cn("flex h-12 shrink-0 items-center gap-2 border-b border-border/70 px-3", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(SidebarTrigger, {
+				size: "xs",
+				className: "lg:hidden"
+			}),
+			/* @__PURE__ */ jsx(Heading, {
+				level: levels.title,
+				size: "label",
+				weight: "medium",
+				className: "min-w-0 truncate",
+				title,
+				children: title
+			}),
+			/* @__PURE__ */ jsx(Badge, {
+				size: "sm",
+				color: agentRunStatusColors[status],
+				children: agentRunStatusLabels[status]
+			}),
+			startedAt === void 0 ? null : /* @__PURE__ */ jsx(AgentRunElapsed, {
+				startedAt,
+				endedAt,
+				className: "text-body"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "ms-auto flex shrink-0 items-center gap-1",
+				children: actions
+			}),
+			/* @__PURE__ */ jsx(LiveStatus, { message: `${title}: ${agentRunStatusLabels[status]}` })
+		]
+	});
+}
+function AgentRunBody({ aside, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("grid min-h-0 flex-1 content-start overflow-y-auto @3xl/agent-run:grid-cols-[minmax(0,1fr)_minmax(18rem,22rem)] @3xl/agent-run:content-stretch @3xl/agent-run:overflow-hidden", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "min-w-0 px-4 py-5 @lg/agent-run:px-6 @3xl/agent-run:overflow-y-auto",
+			children
+		}), aside]
+	});
+}
+function AgentRunPlan({ title = "Plan", description, className, children, ...props }) {
+	const levels = useHeadingLevels();
+	const headingId = useId();
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-labelledby": headingId,
+		className: cn("min-w-0", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(Heading, {
+				id: headingId,
+				level: levels.section,
+				size: "label",
+				weight: "medium",
+				children: title
+			}),
+			description ? /* @__PURE__ */ jsx(Text, {
+				size: "caption",
+				tone: "muted",
+				children: description
+			}) : null,
+			/* @__PURE__ */ jsx(Timeline, {
+				className: "mt-3",
+				children
+			})
+		]
+	});
+}
+const stepIcons = {
+	neutral: /* @__PURE__ */ jsx(Circle, { "aria-hidden": "true" }),
+	pending: /* @__PURE__ */ jsx(CircleDashed, { "aria-hidden": "true" }),
+	running: /* @__PURE__ */ jsx(LoaderCircle, {
+		className: "motion-safe:animate-spin",
+		"aria-hidden": "true"
+	}),
+	waiting: /* @__PURE__ */ jsx(CirclePause, { "aria-hidden": "true" }),
+	success: /* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }),
+	error: /* @__PURE__ */ jsx(CircleAlert, { "aria-hidden": "true" })
+};
+function AgentRunStep({ title, detail, startedAt, endedAt, actions, state = "pending", children, ...props }) {
+	const hasMeta = startedAt !== void 0 || actions !== void 0;
+	return /* @__PURE__ */ jsxs(TimelineItem, {
+		state,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(TimelineIndicator, {
+				"aria-label": agentRunStepLabels[state],
+				children: stepIcons[state]
+			}),
+			/* @__PURE__ */ jsx(TimelineSeparator, {}),
+			/* @__PURE__ */ jsxs(TimelineContent, { children: [
+				/* @__PURE__ */ jsx(TimelineTitle, { children: title }),
+				detail ? /* @__PURE__ */ jsx(TimelineDescription, { children: detail }) : null,
+				hasMeta ? /* @__PURE__ */ jsxs(TimelineMeta, { children: [startedAt === void 0 ? null : /* @__PURE__ */ jsx(AgentRunElapsed, {
+					startedAt,
+					endedAt
+				}), actions] }) : null,
+				children ? /* @__PURE__ */ jsx("div", {
+					className: "mt-2 grid gap-2",
+					children
+				}) : null
+			] })
+		]
+	});
+}
+function formatToolValue(value) {
+	return typeof value === "string" ? value : JSON.stringify(value, null, 2);
+}
+function AgentRunToolCall({ name, summary, icon, input, output, errorText, startedAt, endedAt, ...props }) {
+	const hasDetails = input !== void 0 || output !== void 0 || errorText !== void 0;
+	const Row = hasDetails ? ActivityTrigger : ActivityRow;
+	return /* @__PURE__ */ jsxs(Activity, {
+		kind: "tool",
+		name,
+		...props,
+		children: [/* @__PURE__ */ jsxs(Row, { children: [
+			icon ? /* @__PURE__ */ jsx(ActivityIcon, { children: icon }) : /* @__PURE__ */ jsx(ActivityIcon, {}),
+			/* @__PURE__ */ jsxs(ActivityTitle, { children: [name, summary ? /* @__PURE__ */ jsxs("span", {
+				className: "text-muted-foreground",
+				children: [" · ", summary]
+			}) : null] }),
+			startedAt === void 0 ? null : /* @__PURE__ */ jsx(AgentRunElapsed, {
+				startedAt,
+				endedAt,
+				className: "ms-2"
+			}),
+			/* @__PURE__ */ jsx(ActivityStatus, { className: "sr-only" })
+		] }), hasDetails ? /* @__PURE__ */ jsxs(ActivityContent, { children: [
+			input === void 0 ? null : /* @__PURE__ */ jsxs(ActivityDetail, { children: [/* @__PURE__ */ jsx(ActivityDetailLabel, { children: "Input" }), /* @__PURE__ */ jsx(ActivityDetailContent, {
+				format: "code",
+				children: formatToolValue(input)
+			})] }),
+			output === void 0 ? null : /* @__PURE__ */ jsxs(ActivityDetail, { children: [/* @__PURE__ */ jsx(ActivityDetailLabel, { children: "Output" }), /* @__PURE__ */ jsx(ActivityDetailContent, {
+				format: "code",
+				children: formatToolValue(output)
+			})] }),
+			errorText === void 0 ? null : /* @__PURE__ */ jsxs(ActivityDetail, { children: [/* @__PURE__ */ jsx(ActivityDetailLabel, { children: "Error" }), /* @__PURE__ */ jsx(ActivityDetailContent, {
+				className: "text-destructive-text",
+				children: errorText
+			})] })
+		] }) : null]
+	});
+}
+function AgentRunAside({ className, ...props }) {
+	return /* @__PURE__ */ jsx("aside", {
+		"aria-label": "Run output",
+		className: cn("grid content-start gap-4 border-t border-border/70 px-4 py-5 @lg/agent-run:px-6 @3xl/agent-run:overflow-y-auto @3xl/agent-run:border-t-0 @3xl/agent-run:border-s", className),
+		...props
+	});
+}
+function AgentRunSection({ title, actions, children, ...props }) {
+	const levels = useHeadingLevels();
+	return /* @__PURE__ */ jsxs(Card, {
+		...props,
+		children: [/* @__PURE__ */ jsxs(CardHeader, { children: [/* @__PURE__ */ jsx(Heading, {
+			level: levels.section,
+			size: "label",
+			weight: "medium",
+			children: title
+		}), actions ? /* @__PURE__ */ jsx(CardAction, { children: actions }) : null] }), /* @__PURE__ */ jsx(CardContent, { children })]
+	});
+}
+function AgentRunDetails({ title = "Details", items, ...props }) {
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx(AgentRunSection, {
+		title,
+		...props,
+		children: /* @__PURE__ */ jsx("dl", {
+			className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-2 text-body",
+			children: items.map((item) => /* @__PURE__ */ jsxs("div", {
+				className: "contents",
+				children: [/* @__PURE__ */ jsx("dt", {
+					className: "text-muted-foreground",
+					children: item.label
+				}), /* @__PURE__ */ jsx("dd", {
+					className: "min-w-0 break-words",
+					children: item.value
+				})]
+			}, item.label))
+		})
+	});
+}
+//#endregion
+export { AgentRunAside, AgentRunBlock, AgentRunBody, AgentRunDetails, AgentRunElapsed, AgentRunHeader, AgentRunPlan, AgentRunSection, AgentRunStep, AgentRunToolCall };

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

@@ -1,6 +1,6 @@
-import { ChatLayout } from "../chat-layout.js";
 import { SidebarProviderProps } from "../ui/sidebar-provider.js";
 import "../ui/sidebar.js";
+import { ChatLayout } from "../chat-layout.js";
 import { ComponentProps, ReactNode } from "react";
 //#region src/blocks/coding-agent.d.ts
 export type CodingAgentNavigationItem = {

package/dist/blocks/coding-agent.js

@@ -182,10 +182,7 @@ function CodingAgentSidebar({ appName, brand, sidebarTop, navigation, projects,
 					}, project.id))
 				})]
 			})] }),
-			sidebarFooter ? /* @__PURE__ */ jsx(SidebarFooter, {
-				className: "border-t border-sidebar-border",
-				children: sidebarFooter
-			}) : null,
+			sidebarFooter ? /* @__PURE__ */ jsx(SidebarFooter, { children: sidebarFooter }) : null,
 			/* @__PURE__ */ jsx(SidebarRail, {})
 		]
 	});

package/dist/blocks/design-canvas-data.d.ts

@@ -1,6 +1,6 @@
 //#region src/blocks/design-canvas-data.d.ts
 export type DesignCanvasLayerKind = "frame" | "rectangle" | "ellipse" | "text";
-export type DesignCanvasTool = "move" | DesignCanvasLayerKind;
+export type DesignCanvasTool = "move" | "hand" | DesignCanvasLayerKind;
 export type DesignCanvasFill = {
   color: string;
   opacity: number;

package/dist/blocks/design-canvas.d.ts

@@ -1,5 +1,6 @@
 import { DesignCanvasFill, DesignCanvasLayer, DesignCanvasLayerKind, DesignCanvasTool } from "./design-canvas-data.js";
-import { InfiniteCanvasTransform } from "../ui/infinite-canvas.js";
+import { InfiniteCanvasTransform } from "../lib/infinite-canvas-camera.js";
+import "../ui/infinite-canvas.js";
 import { ComponentProps } from "react";
 //#region src/blocks/design-canvas.d.ts
 export type DesignCanvasBlockProps = Omit<ComponentProps<"div">, "children" | "defaultValue" | "onChange"> & {

package/dist/blocks/design-canvas.js

@@ -7,12 +7,12 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/
 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 { Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator } from "../ui/toolbar.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";
+import { CircleIcon, FrameIcon, HandIcon, LayersIcon, MousePointer2Icon, SlidersHorizontalIcon, SquareIcon, TypeIcon } from "lucide-react";
 //#region src/blocks/design-canvas.tsx
 const TOOLS = [
 	{
@@ -21,6 +21,12 @@ const TOOLS = [
 		shortcut: "V",
 		icon: /* @__PURE__ */ jsx(MousePointer2Icon, {})
 	},
+	{
+		tool: "hand",
+		label: "Hand",
+		shortcut: "H",
+		icon: /* @__PURE__ */ jsx(HandIcon, {})
+	},
 	{
 		tool: "frame",
 		label: "Frame",
@@ -99,6 +105,7 @@ function DesignCanvasBlock({ layers, defaultLayers = [], onLayersChange, selecte
 	const currentLayers = layers ?? internalLayers;
 	const currentSelectedLayerId = selectedLayerId === void 0 ? internalSelectedLayerId : selectedLayerId;
 	const selectedLayer = currentLayers.find((layer) => layer.id === currentSelectedLayerId);
+	const drawingKind = tool === "move" || tool === "hand" ? null : tool;
 	function changeLayers(next) {
 		if (layers === void 0) setInternalLayers(next);
 		onLayersChange?.(next);
@@ -139,7 +146,7 @@ function DesignCanvasBlock({ layers, defaultLayers = [], onLayersChange, selecte
 	}
 	function beginDrawOrDeselect(event) {
 		if (event.defaultPrevented || event.target !== event.currentTarget) return;
-		if (tool === "move") {
+		if (!drawingKind) {
 			selectLayer(null);
 			return;
 		}
@@ -148,7 +155,7 @@ function DesignCanvasBlock({ layers, defaultLayers = [], onLayersChange, selecte
 		event.currentTarget.setPointerCapture(event.pointerId);
 		const point = worldPointAt(event);
 		setDraft({
-			kind: tool,
+			kind: drawingKind,
 			pointerId: event.pointerId,
 			start: point,
 			end: point,
@@ -200,7 +207,7 @@ function DesignCanvasBlock({ layers, defaultLayers = [], onLayersChange, selecte
 			setDraft(null);
 			setTool("move");
 			selectLayer(null);
-		} else if (event.key === "Enter" && tool !== "move" && event.target === event.currentTarget) addLayerAtViewportCenter(tool, event.currentTarget);
+		} else if (event.key === "Enter" && drawingKind && event.target === event.currentTarget) addLayerAtViewportCenter(drawingKind, event.currentTarget);
 		else if (!selectedLayer || !editLayerWithKey(selectedLayer, event)) return;
 		event.preventDefault();
 	}
@@ -226,7 +233,8 @@ function DesignCanvasBlock({ layers, defaultLayers = [], onLayersChange, selecte
 					transformRef.current = next;
 				},
 				"data-tool": tool,
-				className: cn("size-full", tool !== "move" && "cursor-crosshair"),
+				panOnDrag: tool === "hand" ? "anywhere" : "background",
+				className: cn("size-full", drawingKind && "cursor-crosshair"),
 				style: {
 					"--cui-infinite-canvas-radius": "0px",
 					"--cui-infinite-canvas-border-color": "transparent",
@@ -452,8 +460,7 @@ function DesignCanvasToolbarButton({ label, hint, pressed, children, ...props })
 			...props,
 			"aria-label": label,
 			iconOnly: true,
-			"aria-pressed": pressed,
-			"data-pressed": pressed ? "" : void 0
+			"aria-pressed": pressed
 		}),
 		children
 	}), /* @__PURE__ */ jsx(TooltipContent, { children: hint })] });

package/dist/blocks/file-explorer.js

@@ -147,7 +147,7 @@ function FileExplorerSidebar({ locations, activeLocationId, sidebarTop, sidebarF
 		collapsible: "offcanvas",
 		children: [
 			sidebarTop ? /* @__PURE__ */ jsx(SidebarHeader, {
-				className: "min-h-11 justify-center border-b border-sidebar-border px-3",
+				className: "min-h-11 justify-center px-3",
 				children: sidebarTop
 			}) : null,
 			/* @__PURE__ */ jsx(SidebarContent, { children: groups.map((group) => /* @__PURE__ */ jsxs(SidebarGroup, { children: [group.label ? /* @__PURE__ */ jsx(SidebarGroupLabel, { children: group.label }) : null, /* @__PURE__ */ jsx(SidebarMenu, { children: group.items.map((location) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
@@ -159,24 +159,22 @@ function FileExplorerSidebar({ locations, activeLocationId, sidebarTop, sidebarF
 				},
 				children: [location.icon ?? /* @__PURE__ */ jsx(FolderIcon, {}), /* @__PURE__ */ jsx("span", { children: location.label })]
 			}) }, location.id)) })] }, group.label || "locations")) }),
-			sidebarFooter ? /* @__PURE__ */ jsx(SidebarFooter, {
-				className: "border-t border-sidebar-border",
-				children: sidebarFooter
-			}) : null,
+			sidebarFooter ? /* @__PURE__ */ jsx(SidebarFooter, { children: sidebarFooter }) : null,
 			/* @__PURE__ */ jsx(SidebarRail, {})
 		]
 	});
 }
 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",
+		className: "shrink-0 border-b border-border/70",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex h-12 items-center gap-2 px-3",
 			children: [
-				/* @__PURE__ */ jsx(SidebarTrigger, { size: "xs" }),
+				/* @__PURE__ */ jsx(SidebarTrigger, { size: "sm" }),
 				/* @__PURE__ */ jsx(Button, {
 					variant: "ghost",
-					size: "xs",
+					size: "sm",
+					iconOnly: true,
 					className: "hidden @xl/explorer:inline-flex",
 					disabled: !canGoBack,
 					"aria-label": backLabel,
@@ -200,7 +198,7 @@ function FileExplorerHeader({ location, headingLevel, breadcrumbs, query, search
 				}) : null,
 				headerMenuItems ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
 					variant: "ghost",
-					size: "xs",
+					size: "sm",
 					iconOnly: true,
 					"aria-label": moreActionsLabel,
 					className: headerActions ? "@2xl/explorer:hidden" : void 0,
@@ -214,7 +212,7 @@ function FileExplorerHeader({ location, headingLevel, breadcrumbs, query, search
 				})] }) : null,
 				searchPlaceholder ? /* @__PURE__ */ jsxs(InputGroup, {
 					size: "sm",
-					className: "flex-[0_1_9rem] bg-background/60 @xl/explorer:flex-[0_0_12rem]",
+					className: "flex-[0_1_9rem] @xl/explorer:flex-[0_0_12rem]",
 					children: [
 						/* @__PURE__ */ jsx(InputGroupAddon, {
 							className: "ps-2",
@@ -408,7 +406,7 @@ function FileExplorerColumns({ columns, selectedEntry, selectedPath, headingLeve
 					})
 				}) }) : null })] })]
 			}), /* @__PURE__ */ jsx("div", {
-				className: "min-h-0 flex-1 bg-card",
+				className: "min-h-0 flex-1",
 				children: activeColumn ? renderColumn(activeColumn, activeIndex, "narrow") : null
 			})] }) : null
 		}), /* @__PURE__ */ jsx("div", {
@@ -416,7 +414,7 @@ function FileExplorerColumns({ columns, selectedEntry, selectedPath, headingLeve
 			className: "hidden h-full min-h-0 @xl/explorer:block",
 			children: wideDisplayed ? /* @__PURE__ */ jsxs(ResizablePanelGroup, {
 				orientation: "horizontal",
-				className: "rounded-none border-0 bg-card shadow-none",
+				variant: "nested",
 				children: [columns.map((column, columnIndex) => /* @__PURE__ */ jsx(FileExplorerPanel, {
 					defaultSize: columnSize,
 					minSize: "16%",
@@ -531,7 +529,7 @@ function FileExplorerColumnView({ column, optionRef, onSelect, onOpen, onOptionK
 }
 function FileExplorerPreview({ entry, headingLevel }) {
 	if (!entry) return /* @__PURE__ */ jsx(Empty, {
-		className: "h-full rounded-none bg-background/45",
+		className: "h-full rounded-none",
 		children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
 			/* @__PURE__ */ jsx(EmptyMedia, { children: /* @__PURE__ */ jsx(FileIcon, {}) }),
 			/* @__PURE__ */ jsx(EmptyTitle, { children: "Select an item" }),
@@ -539,7 +537,7 @@ function FileExplorerPreview({ entry, headingLevel }) {
 		] })
 	});
 	return /* @__PURE__ */ jsx(ScrollArea, {
-		className: "h-full bg-background/45",
+		className: "h-full",
 		lockAxis: "x",
 		children: /* @__PURE__ */ jsx(FileExplorerPreviewContent, {
 			entry,
@@ -681,7 +679,7 @@ function FileExplorerStatusBar({ breadcrumbs, selectedEntry }) {
 	const itemCount = selectedEntry?.children?.length ?? 0;
 	const itemLabel = itemCount === 1 ? "1 item" : `${itemCount} items`;
 	return /* @__PURE__ */ jsxs("footer", {
-		className: "flex h-8 shrink-0 items-center gap-3 border-t border-border/70 bg-card/45 px-3 text-micro text-muted-foreground",
+		className: "flex h-8 shrink-0 items-center gap-3 border-t border-border/70 px-3 text-micro text-muted-foreground",
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "min-w-0 flex-1 truncate",
 			title: path,
@@ -695,7 +693,7 @@ function FileExplorerStatusBar({ breadcrumbs, selectedEntry }) {
 function FileExplorerAddressBar({ breadcrumbs, onSelect }) {
 	return /* @__PURE__ */ jsx(Breadcrumb, {
 		"aria-label": "Current folder",
-		className: "min-w-0 overflow-hidden rounded-[var(--radius-control)] border bg-background/55 px-2 py-1 shadow-inner",
+		className: "min-w-0 overflow-hidden px-1",
 		children: /* @__PURE__ */ jsx(BreadcrumbList, {
 			className: "min-w-0 flex-nowrap overflow-hidden",
 			children: breadcrumbs.map((breadcrumb, index) => {

package/dist/chat-message.js

@@ -224,6 +224,7 @@ function ChatMessageEditable({ value, onSave, onSaveError, editorLabel = "Edit m
 		children: [
 			/* @__PURE__ */ jsxs(ChatMessageContent, {
 				"data-editable": "",
+				"data-focus-ring": "within",
 				children: [
 					/* @__PURE__ */ jsx("span", {
 						"data-control-ui": "chat-message",
@@ -268,47 +269,40 @@ function ChatMessageEditable({ value, onSave, onSaveError, editorLabel = "Edit m
 					})
 				]
 			}),
-			/* @__PURE__ */ jsxs("div", {
+			/* @__PURE__ */ jsx("div", {
 				"data-control-ui": "chat-message",
 				"data-control-family": "chat-message",
-				"data-slot": "edit-toolbars",
-				children: [/* @__PURE__ */ jsx("div", {
-					"data-control-ui": "chat-message",
-					"data-control-family": "chat-message",
-					"data-slot": "edit-toolbar",
-					"data-active": !editing ? "" : void 0,
-					inert: editing,
-					"aria-hidden": editing,
-					children: /* @__PURE__ */ jsx(ActionBar, {
-						align: message.isEndAligned ? "end" : "start",
-						copyValue: value,
-						onEdit: startEditing,
-						children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ActionBarCopy, {}), /* @__PURE__ */ jsx(ActionBarEdit, {})] })
-					})
-				}), /* @__PURE__ */ jsx("div", {
-					"data-control-ui": "chat-message",
-					"data-control-family": "chat-message",
-					"data-slot": "edit-toolbar",
-					"data-active": editing ? "" : void 0,
-					inert: !editing,
-					"aria-hidden": !editing,
-					children: /* @__PURE__ */ jsxs(ActionBar, {
-						align: message.isEndAligned ? "end" : "start",
-						label: "Edit actions",
-						"aria-busy": saving,
-						children: [/* @__PURE__ */ jsx(ActionBarItem, {
-							type: "button",
-							disabled: saving || !draft.trim(),
-							onClick: () => void save(),
-							children: saveLabel
-						}), /* @__PURE__ */ jsx(ActionBarItem, {
-							type: "button",
-							disabled: saving,
-							onClick: cancelEditing,
-							children: cancelLabel
-						})]
-					})
-				})]
+				"data-slot": "read-actions",
+				children: /* @__PURE__ */ jsx(ActionBar, {
+					align: message.isEndAligned ? "end" : "start",
+					copyValue: value,
+					onEdit: startEditing,
+					children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ActionBarCopy, {}), /* @__PURE__ */ jsx(ActionBarEdit, {})] })
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"data-control-ui": "chat-message",
+				"data-control-family": "chat-message",
+				"data-slot": "edit-actions",
+				children: /* @__PURE__ */ jsxs(ActionBar, {
+					align: message.isEndAligned ? "end" : "start",
+					label: "Edit actions",
+					"aria-busy": saving,
+					style: { "--cui-action-bar-hidden-opacity": "1" },
+					children: [/* @__PURE__ */ jsx(ActionBarItem, {
+						type: "button",
+						variant: "surface",
+						disabled: saving,
+						onClick: cancelEditing,
+						children: cancelLabel
+					}), /* @__PURE__ */ jsx(ActionBarItem, {
+						type: "button",
+						variant: "solid",
+						disabled: saving || !draft.trim(),
+						onClick: () => void save(),
+						children: saveLabel
+					})]
+				})
 			}),
 			/* @__PURE__ */ jsx(LiveStatus, { message: saving ? savingLabel : "" }),
 			/* @__PURE__ */ jsx("span", {

package/dist/knob-contracts/infinite-canvas-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/infinite-canvas-knobs.d.ts
-export declare const infiniteCanvasKnobs: readonly ["--cui-infinite-canvas-radius", "--cui-infinite-canvas-background", "--cui-infinite-canvas-grid-dot-color", "--cui-infinite-canvas-border-color", "--cui-infinite-canvas-padding", "--cui-infinite-canvas-controls-item-radius", "--cui-infinite-canvas-controls-padding", "--cui-infinite-canvas-controls-radius", "--cui-infinite-canvas-controls-background", "--cui-infinite-canvas-controls-border-color", "--cui-infinite-canvas-controls-shadow"];
+export declare const infiniteCanvasKnobs: readonly ["--cui-infinite-canvas-radius", "--cui-infinite-canvas-background", "--cui-infinite-canvas-grid-dot-color", "--cui-infinite-canvas-border-color", "--cui-infinite-canvas-padding"];
 export type InfiniteCanvasKnobStyle = Partial<Record<(typeof infiniteCanvasKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/infinite-canvas-knobs.js

@@ -4,13 +4,7 @@ const infiniteCanvasKnobs = [
 	"--cui-infinite-canvas-background",
 	"--cui-infinite-canvas-grid-dot-color",
 	"--cui-infinite-canvas-border-color",
-	"--cui-infinite-canvas-padding",
-	"--cui-infinite-canvas-controls-item-radius",
-	"--cui-infinite-canvas-controls-padding",
-	"--cui-infinite-canvas-controls-radius",
-	"--cui-infinite-canvas-controls-background",
-	"--cui-infinite-canvas-controls-border-color",
-	"--cui-infinite-canvas-controls-shadow"
+	"--cui-infinite-canvas-padding"
 ];
 //#endregion
 export { infiniteCanvasKnobs };

package/dist/knob-contracts/swap-knobs.d.ts

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/swap-knobs.d.ts
+export declare const swapKnobs: readonly ["--cui-swap-animation-duration", "--cui-swap-easing", "--cui-swap-label-inset", "--cui-swap-icon-scale"];
+export type SwapKnobStyle = Partial<Record<(typeof swapKnobs)[number], string>>;
+//#endregion

package/dist/knob-contracts/swap-knobs.js

@@ -0,0 +1,9 @@
+//#region src/knob-contracts/swap-knobs.ts
+const swapKnobs = [
+	"--cui-swap-animation-duration",
+	"--cui-swap-easing",
+	"--cui-swap-label-inset",
+	"--cui-swap-icon-scale"
+];
+//#endregion
+export { swapKnobs };

package/dist/knob-contracts/timeline-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/timeline-knobs.d.ts
-export declare const timelineKnobs: readonly ["--cui-timeline-indicator-background", "--cui-timeline-indicator-foreground", "--cui-timeline-running-foreground", "--cui-timeline-success-foreground", "--cui-timeline-error-foreground", "--cui-timeline-separator-background", "--cui-timeline-title-foreground"];
+export declare const timelineKnobs: readonly ["--cui-timeline-indicator-background", "--cui-timeline-indicator-foreground", "--cui-timeline-running-foreground", "--cui-timeline-waiting-foreground", "--cui-timeline-success-foreground", "--cui-timeline-error-foreground", "--cui-timeline-separator-background", "--cui-timeline-title-foreground"];
 export type TimelineKnobStyle = Partial<Record<(typeof timelineKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/timeline-knobs.js

@@ -3,6 +3,7 @@ const timelineKnobs = [
 	"--cui-timeline-indicator-background",
 	"--cui-timeline-indicator-foreground",
 	"--cui-timeline-running-foreground",
+	"--cui-timeline-waiting-foreground",
 	"--cui-timeline-success-foreground",
 	"--cui-timeline-error-foreground",
 	"--cui-timeline-separator-background",

package/dist/knob-contracts/tool-approval-knobs.d.ts

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/tool-approval-knobs.d.ts
+export declare const toolApprovalKnobs: readonly ["--cui-tool-approval-background", "--cui-tool-approval-foreground", "--cui-tool-approval-border-color", "--cui-tool-approval-border-width", "--cui-tool-approval-radius", "--cui-tool-approval-shadow", "--cui-tool-approval-padding", "--cui-tool-approval-body-background", "--cui-tool-approval-body-border-color", "--cui-tool-approval-body-border-width", "--cui-tool-approval-body-radius", "--cui-tool-approval-body-shadow", "--cui-tool-approval-body-padding", "--cui-tool-approval-body-gap", "--cui-tool-approval-footer-border-color", "--cui-tool-approval-footer-border-width", "--cui-tool-approval-footer-padding", "--cui-tool-approval-footer-gap", "--cui-tool-approval-preview-background", "--cui-tool-approval-preview-border-color", "--cui-tool-approval-preview-border-width", "--cui-tool-approval-preview-radius", "--cui-tool-approval-preview-padding", "--cui-tool-approval-preview-gap", "--cui-tool-approval-label-foreground", "--cui-tool-approval-description-foreground", "--cui-tool-approval-status-foreground"];
+export type ToolApprovalKnobStyle = Partial<Record<(typeof toolApprovalKnobs)[number], string>>;
+//#endregion