@ctrl-ui/react 0.9.5 → 0.9.8

package/dist/blocks/agent-run.js

@@ -0,0 +1,262 @@
+"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,
+		surface: "background",
+		className: cn(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, size = "label", 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(Text, {
+		size,
+		tone: "muted",
+		numeric: true,
+		className,
+		children: /* @__PURE__ */ jsx("time", {
+			dateTime: ms === null ? void 0 : elapsedIsoDuration(ms),
+			...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,
+				size: "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, {
+				tone: "destructive",
+				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",
+			children: items.map((item) => /* @__PURE__ */ jsxs("div", {
+				className: "contents",
+				children: [/* @__PURE__ */ jsx(Text, {
+					as: "dt",
+					tone: "muted",
+					children: item.label
+				}), /* @__PURE__ */ jsx(Text, {
+					as: "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

@@ -5,8 +5,9 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/colla
 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";
+import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub } from "../ui/sidebar-menu.js";
 import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarInset, SidebarRail, SidebarTrigger } from "../ui/sidebar.js";
+import { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "../ui/item.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { BotIcon, ChevronRightIcon, CircleIcon, FolderIcon, PlusIcon, SearchIcon } from "lucide-react";
 //#region src/blocks/coding-agent.tsx
@@ -17,7 +18,8 @@ function CodingAgentBlock({ appName = "Agent", brand, sidebarTop, navigation = [
 	};
 	return /* @__PURE__ */ jsxs(SidebarProvider, {
 		layout,
-		className: cn("bg-background text-foreground", layout === "viewport" && "h-svh overflow-hidden", className),
+		surface: "background",
+		className: cn(layout === "viewport" && "h-svh overflow-hidden", className),
 		style: providerStyle,
 		...props,
 		children: [/* @__PURE__ */ jsx(CodingAgentSidebar, {
@@ -78,7 +80,8 @@ function CodingAgentSidebar({ appName, brand, sidebarTop, navigation, projects,
 		collapsible: "offcanvas",
 		children: [
 			/* @__PURE__ */ jsxs(SidebarHeader, {
-				className: "gap-1.5 border-b border-sidebar-border px-2 pb-2 pt-3",
+				divider: true,
+				className: "gap-1.5",
 				children: [
 					sidebarTop,
 					/* @__PURE__ */ jsxs("div", {
@@ -117,25 +120,22 @@ function CodingAgentSidebar({ appName, brand, sidebarTop, navigation, projects,
 					}) }) })
 				]
 			}),
-			/* @__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: "ms-auto shrink-0",
-							children: item.trailing
-						}) : null
-					]
-				}) }, item.id)) })
-			}) : null, /* @__PURE__ */ jsxs(SidebarGroup, {
-				className: "gap-1 pt-1",
+			/* @__PURE__ */ jsxs(SidebarContent, { children: [navigation.length > 0 ? /* @__PURE__ */ jsx(SidebarGroup, { 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: "ms-auto shrink-0",
+						children: item.trailing
+					}) : null
+				]
+			}) }, item.id)) }) }) : null, /* @__PURE__ */ jsxs(SidebarGroup, {
+				className: "gap-1",
 				children: [/* @__PURE__ */ jsx(SidebarGroupLabel, { children: "Projects" }), /* @__PURE__ */ jsx("div", {
 					className: "grid gap-1",
 					children: projects.map((project) => /* @__PURE__ */ jsxs(Collapsible, {
@@ -157,28 +157,25 @@ function CodingAgentSidebar({ appName, brand, sidebarTop, navigation, projects,
 								className: "truncate",
 								children: project.name
 							})
-						] }), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(SidebarMenu, {
-							className: "mt-1 ps-5",
-							children: project.tasks.map((task) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
-								size: "sm",
-								isActive: task.id === activeTaskId,
-								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: "ms-auto shrink-0",
-										children: task.trailing
-									}) : null
-								]
-							}) }, task.id))
-						}) })]
+						] }), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(SidebarMenuSub, { children: project.tasks.map((task) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+							size: "sm",
+							isActive: task.id === activeTaskId,
+							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: "ms-auto shrink-0",
+									children: task.trailing
+								}) : null
+							]
+						}) }, task.id)) }) })]
 					}, project.id))
 				})]
 			})] }),
@@ -228,31 +225,15 @@ function CodingAgentEmptyState({ title = "What should we build?", description, i
 			}) : 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-start",
-					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(Text, {
-								weight: "medium",
-								tone: "foreground",
-								children: suggestion.title
-							}),
-							suggestion.description ? /* @__PURE__ */ jsx(Text, {
-								size: "caption",
-								tone: "muted",
-								className: "leading-5",
-								children: suggestion.description
-							}) : null
-						]
-					})
+				children: suggestions.map((suggestion) => /* @__PURE__ */ jsxs(Item, {
+					variant: "outline",
+					render: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => onSuggestionSelect?.(suggestion.prompt ?? suggestion.title, suggestion)
+					}),
+					className: "min-h-28 w-full flex-col items-start text-start",
+					style: { "--cui-item-media-foreground": "var(--primary-text)" },
+					children: [/* @__PURE__ */ jsx(ItemMedia, { children: suggestion.icon }), /* @__PURE__ */ jsxs(ItemContent, { children: [/* @__PURE__ */ jsx(ItemTitle, { children: suggestion.title }), suggestion.description ? /* @__PURE__ */ jsx(ItemDescription, { children: suggestion.description }) : null] })]
 				}, suggestion.id))
 			}) : null
 		]

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-inspector.js

@@ -1,6 +1,7 @@
 "use client";
 import { Button } from "../ui/button.js";
 import { Heading } from "../ui/typography.js";
+import { Separator } from "../ui/separator.js";
 import { resizeDesignCanvasLayer } from "./design-canvas-data.js";
 import { ColorPickerArea } from "../ui/color-picker-area.js";
 import { ColorPickerHue } from "../ui/color-picker-sliders.js";
@@ -9,7 +10,6 @@ import { NumberField, NumberFieldGroup, NumberFieldInput, NumberFieldScrubArea }
 import { ColorPickerEyeDropper, ColorPickerInput } from "../ui/color-picker-values.js";
 import { ColorPicker, ColorPickerContent, 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 { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

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"> & {