@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.0.0

package/dist/components/assistant-ui/elements/canvas-split.js

@@ -0,0 +1,106 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { field, ghostButton, mono, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon, FileTextIcon, XIcon } from "lucide-react";
+//#region src/components/assistant-ui/elements/canvas-split.tsx
+var canvas_split_exports = /* @__PURE__ */ __exportAll({
+	CanvasSplit: () => CanvasSplit,
+	CanvasSplitBody: () => CanvasSplitBody,
+	CanvasSplitDocument: () => CanvasSplitDocument,
+	CanvasSplitHeader: () => CanvasSplitHeader,
+	CanvasSplitLine: () => CanvasSplitLine,
+	CanvasSplitMessage: () => CanvasSplitMessage,
+	CanvasSplitThread: () => CanvasSplitThread
+});
+function CanvasSplit({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "canvas-split",
+		className: cn(paper, "flex w-full max-w-3xl flex-col overflow-hidden rounded-[20px] md:h-80 md:flex-row", className),
+		...props
+	});
+}
+function CanvasSplitThread({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "canvas-split-thread",
+		className: cn("border-foreground/[0.07] flex flex-col gap-3 border-b p-4 md:w-[15rem] md:shrink-0 md:overflow-y-auto md:border-r md:border-b-0", className),
+		...props
+	});
+}
+function CanvasSplitMessage({ speaker, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "canvas-split-message",
+		"data-speaker": speaker,
+		className: cn("fade-in animate-in fill-mode-both text-[13px] leading-relaxed duration-300", speaker === "user" ? cn(field, "text-foreground/80 ms-auto rounded-2xl px-3 py-2") : "text-muted-foreground", className),
+		...props
+	});
+}
+function CanvasSplitDocument({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "canvas-split-document",
+		className: cn("flex min-w-0 flex-1 flex-col", className),
+		...props
+	});
+}
+function CanvasSplitHeader({ title, version, saved, onCopy, onClose, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "canvas-split-header",
+		className: cn("border-foreground/[0.07] flex items-center gap-2 border-b px-3.5 py-2.5", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(FileTextIcon, { className: "text-muted-foreground size-3.5 shrink-0" }),
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate text-[13px] font-medium",
+				children: title
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: cn(mono, "text-muted-foreground shrink-0"),
+				children: ["v", version]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cn(mono, "shrink-0 transition-colors duration-300", saved ? "text-success dark:text-success" : "text-muted-foreground"),
+				children: saved ? /* @__PURE__ */ jsxs("span", {
+					className: "flex items-center gap-1",
+					children: [/* @__PURE__ */ jsx(CheckIcon, { className: "size-3" }), "saved"]
+				}) : "editing"
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": `Copy ${title}`,
+				onClick: onCopy,
+				disabled: !onCopy,
+				className: cn(ghostButton, "size-7 shrink-0 disabled:pointer-events-none disabled:opacity-30"),
+				children: /* @__PURE__ */ jsx(CopyIcon, { className: "size-3.5" })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Close the canvas",
+				onClick: onClose,
+				disabled: !onClose,
+				className: cn(ghostButton, "size-7 shrink-0 disabled:pointer-events-none disabled:opacity-30"),
+				children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5" })
+			})
+		]
+	});
+}
+function CanvasSplitBody({ writing, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "canvas-split-body",
+		className: cn("flex min-h-[9rem] flex-1 flex-col gap-1.5 overflow-y-auto p-4", className),
+		...props,
+		children: [children, writing && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "bg-foreground/70 h-[1.05em] w-[2px] animate-pulse rounded-full motion-reduce:animate-none"
+		})]
+	});
+}
+function CanvasSplitLine({ heading, className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "canvas-split-line",
+		className: cn("fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-[13px] leading-relaxed duration-300", heading ? "text-foreground/95 font-medium" : "text-muted-foreground", className),
+		...props
+	});
+}
+//#endregion
+export { CanvasSplit, CanvasSplitBody, CanvasSplitDocument, CanvasSplitHeader, CanvasSplitLine, CanvasSplitMessage, CanvasSplitThread, canvas_split_exports };

package/dist/components/assistant-ui/elements/chart.d.ts

@@ -0,0 +1,19 @@
+import { ComponentProps } from "react";
+declare namespace chart_d_exports {
+  export { Chart, ChartVariant };
+}
+export type ChartVariant = "area" | "line" | "bars";
+export declare function Chart({ label, value, delta, points, visibleCount, variant, trend, upIsGood, className, ...props }: Omit<ComponentProps<"div">, "children" | "label" | "value" | "delta" | "points" | "visibleCount" | "variant" | "trend" | "upIsGood"> & {
+  label: string;
+  value: string;
+  delta?: string | undefined;
+  points: readonly number[];
+  visibleCount: number;
+  variant?: ChartVariant | undefined;
+  /** The direction `delta` moved in. Without it, a leading minus sign reads as down. */
+  trend?: "up" | "down" | "flat" | undefined;
+  /** Whether a rise is good news, as for revenue, or bad news, as for latency. */
+  upIsGood?: boolean | undefined;
+}): import("react").JSX.Element;
+//#endregion
+export { chart_d_exports };

package/dist/components/assistant-ui/elements/chart.js

@@ -0,0 +1,105 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { mono, paper } from "./surfaces.js";
+import { clamp, take } from "../utils/range.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/assistant-ui/elements/chart.tsx
+var chart_exports = /* @__PURE__ */ __exportAll({ Chart: () => Chart });
+const W = 300;
+const H = 88;
+const PAD = 6;
+const scale = (points) => {
+	const max = Math.max(...points, 1);
+	const min = Math.min(...points, 0);
+	const span = max - min || 1;
+	return (value) => 82 - (value - min) / span * 76;
+};
+function Chart({ label, value, delta, points, visibleCount, variant = "area", trend, upIsGood = true, className, ...props }) {
+	const shown = take(points, clamp(visibleCount, 1, points.length));
+	const y = scale(points);
+	const step = points.length > 1 ? 288 / (points.length - 1) : 0;
+	const x = (i) => PAD + i * step;
+	const coords = shown.map((p, i) => ({
+		x: x(i),
+		y: y(p)
+	}));
+	const line = coords.map((c) => `${c.x},${c.y}`).join(" ");
+	const last = coords.at(-1);
+	const area = last ? `M ${PAD},82 ${coords.map((c) => `L ${c.x},${c.y}`).join(" ")} L ${last.x},82 Z` : "";
+	const lastIndex = shown.length - 1;
+	const direction = trend ?? (delta === void 0 ? void 0 : /\d/.test(delta) && !/[1-9]/.test(delta) ? "flat" : /^\s*[-−–]/.test(delta) ? "down" : "up");
+	const good = direction === "up" || direction === "down" ? direction === "up" === upIsGood : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "chart",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-3 rounded-2xl p-4", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-baseline justify-between",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn(mono, "text-muted-foreground"),
+					children: label
+				}), delta !== void 0 && /* @__PURE__ */ jsx("span", {
+					"data-trend": direction,
+					className: cn("font-mono text-[11px] tracking-tight", "tabular-nums", good === void 0 ? "text-muted-foreground" : good ? "text-emerald-700 dark:text-emerald-400" : "text-red-600 dark:text-red-400"),
+					children: delta
+				})]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-2xl font-medium tracking-tight tabular-nums",
+				children: value
+			}),
+			/* @__PURE__ */ jsxs("svg", {
+				viewBox: `0 0 ${W} ${H}`,
+				role: "img",
+				"aria-label": `${label}: ${value}`,
+				className: "h-[88px] w-full overflow-visible",
+				preserveAspectRatio: "none",
+				children: [/* @__PURE__ */ jsx("line", {
+					x1: "0",
+					x2: W,
+					y1: 82,
+					y2: 82,
+					className: "stroke-foreground/[0.08]",
+					strokeWidth: "1",
+					vectorEffect: "non-scaling-stroke"
+				}), variant === "bars" ? shown.map((p, i) => {
+					const top = y(p);
+					const barWidth = Math.max(2, step * .55);
+					return /* @__PURE__ */ jsx("rect", {
+						x: x(i) - barWidth / 2,
+						y: top,
+						width: barWidth,
+						height: Math.max(1, 82 - top),
+						rx: "1.5",
+						className: cn("fade-in animate-in fill-mode-both duration-300", i === lastIndex ? "fill-blue-500 dark:fill-blue-400" : "fill-foreground/25"),
+						style: { animationDelay: `${i * 40}ms` }
+					}, i);
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+					variant === "area" && shown.length > 1 && /* @__PURE__ */ jsx("path", {
+						d: area,
+						className: "fill-blue-500/12 dark:fill-blue-400/15"
+					}),
+					/* @__PURE__ */ jsx("polyline", {
+						points: line,
+						fill: "none",
+						strokeWidth: "1.75",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						vectorEffect: "non-scaling-stroke",
+						className: "stroke-blue-500 dark:stroke-blue-400"
+					}),
+					last && /* @__PURE__ */ jsx("circle", {
+						cx: last.x,
+						cy: last.y,
+						r: "3",
+						className: "fill-blue-500 dark:fill-blue-400"
+					})
+				] })]
+			})
+		]
+	});
+}
+//#endregion
+export { Chart, chart_exports };

package/dist/components/assistant-ui/elements/chat-panel.d.ts

@@ -0,0 +1,15 @@
+import { ComponentProps } from "react";
+declare namespace chat_panel_d_exports {
+  export { ChatPanel, ChatPanelAssistantMessage, ChatPanelComposer, ChatPanelMessages, ChatPanelTyping, ChatPanelUserMessage };
+}
+export declare function ChatPanel({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function ChatPanelMessages({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function ChatPanelUserMessage({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function ChatPanelAssistantMessage({ className, ...props }: ComponentProps<"p">): import("react").JSX.Element;
+export declare function ChatPanelTyping({ className, ...props }: Omit<ComponentProps<"div">, "children">): import("react").JSX.Element;
+export declare function ChatPanelComposer({ placeholder, onSend, className, ...props }: Omit<ComponentProps<"div">, "children" | "placeholder"> & {
+  placeholder: string;
+  onSend?: () => void;
+}): import("react").JSX.Element;
+//#endregion
+export { chat_panel_d_exports };

package/dist/components/assistant-ui/elements/chat-panel.js

@@ -0,0 +1,82 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { field, inkButton, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUpIcon } from "lucide-react";
+//#region src/components/assistant-ui/elements/chat-panel.tsx
+var chat_panel_exports = /* @__PURE__ */ __exportAll({
+	ChatPanel: () => ChatPanel,
+	ChatPanelAssistantMessage: () => ChatPanelAssistantMessage,
+	ChatPanelComposer: () => ChatPanelComposer,
+	ChatPanelMessages: () => ChatPanelMessages,
+	ChatPanelTyping: () => ChatPanelTyping,
+	ChatPanelUserMessage: () => ChatPanelUserMessage
+});
+function ChatPanel({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "chat-panel",
+		className: cn(paper, "flex h-[270px] w-full max-w-md flex-col overflow-hidden rounded-[24px]", className),
+		...props
+	});
+}
+function ChatPanelMessages({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "chat-panel-messages",
+		className: cn("flex flex-1 flex-col justify-end gap-2.5 overflow-y-auto p-4", className),
+		...props
+	});
+}
+function ChatPanelUserMessage({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "chat-panel-user-message",
+		className: cn(field, "fade-in slide-in-from-bottom-1 animate-in self-end rounded-2xl px-3 py-1.5 text-xs duration-300", className),
+		...props
+	});
+}
+function ChatPanelAssistantMessage({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "chat-panel-assistant-message",
+		className: cn("text-muted-foreground max-w-[85%] self-start text-xs leading-relaxed", className),
+		...props
+	});
+}
+function ChatPanelTyping({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "chat-panel-typing",
+		className: cn("fade-in animate-in flex gap-1 self-start px-1 duration-300", className),
+		...props,
+		children: [
+			"-0.32s",
+			"-0.16s",
+			"0s"
+		].map((delay) => /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "bg-foreground/40 size-1 animate-bounce rounded-full motion-reduce:animate-none",
+			style: {
+				animationDelay: delay,
+				animationDuration: "1.1s"
+			}
+		}, delay))
+	});
+}
+function ChatPanelComposer({ placeholder, onSend, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "chat-panel-composer",
+		className: cn(field, "mx-3 mb-3 flex h-10 shrink-0 items-center justify-between rounded-full py-1.5 ps-4 pe-1.5", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground text-[13px]",
+			children: placeholder
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": "Send",
+			onClick: onSend,
+			disabled: !onSend,
+			className: cn(inkButton, "flex size-7 items-center justify-center rounded-full disabled:pointer-events-none disabled:opacity-30"),
+			children: /* @__PURE__ */ jsx(ArrowUpIcon, { className: "size-3.5" })
+		})]
+	});
+}
+//#endregion
+export { ChatPanel, ChatPanelAssistantMessage, ChatPanelComposer, ChatPanelMessages, ChatPanelTyping, ChatPanelUserMessage, chat_panel_exports };

package/dist/components/assistant-ui/elements/checkpoint-history.d.ts

@@ -0,0 +1,17 @@
+import { ComponentProps } from "react";
+declare namespace checkpoint_history_d_exports {
+  export { Checkpoint, CheckpointHistory };
+}
+export interface Checkpoint {
+  id: string;
+  label: string;
+  at: string;
+  files: number;
+}
+export declare function CheckpointHistory({ checkpoints, currentId, onRestore, className, ...props }: Omit<ComponentProps<"div">, "children" | "checkpoints" | "currentId" | "onRestore"> & {
+  checkpoints: readonly Checkpoint[];
+  currentId: string;
+  onRestore?: (id: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { checkpoint_history_d_exports };

package/dist/components/assistant-ui/elements/checkpoint-history.js

@@ -0,0 +1,60 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { mono, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RotateCcwIcon } from "lucide-react";
+//#region src/components/assistant-ui/elements/checkpoint-history.tsx
+var checkpoint_history_exports = /* @__PURE__ */ __exportAll({ CheckpointHistory: () => CheckpointHistory });
+function CheckpointHistory({ checkpoints, currentId, onRestore, className, ...props }) {
+	const currentIndex = checkpoints.findIndex((checkpoint) => checkpoint.id === currentId);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "checkpoint-history",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-1 rounded-2xl p-3", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "px-1.5 pb-1 text-[13.5px] font-medium",
+			children: "Checkpoints"
+		}), checkpoints.map((checkpoint, i) => {
+			const ahead = currentIndex >= 0 && i > currentIndex;
+			const current = checkpoint.id === currentId;
+			return /* @__PURE__ */ jsxs("div", {
+				className: cn("group relative flex items-center gap-2.5 rounded-xl px-1.5 py-1.5 transition-colors", current ? "bg-foreground/[0.05]" : "hover:bg-foreground/[0.03]", ahead && "text-muted-foreground"),
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: cn("size-1.5 shrink-0 rounded-full", current ? "bg-info dark:bg-info" : ahead ? "border-foreground/25 border" : "bg-foreground/25")
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "flex min-w-0 flex-1 flex-col",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-[13px] leading-snug break-words",
+							children: checkpoint.label
+						}), /* @__PURE__ */ jsxs("span", {
+							className: cn(mono, "text-muted-foreground"),
+							children: [
+								checkpoint.at,
+								" · ",
+								checkpoint.files,
+								" ",
+								checkpoint.files === 1 ? "file" : "files"
+							]
+						})]
+					}),
+					current ? /* @__PURE__ */ jsx("span", {
+						className: cn(mono, "text-muted-foreground shrink-0"),
+						children: "current"
+					}) : onRestore ? /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						"aria-label": `Restore to ${checkpoint.label}`,
+						onClick: () => onRestore(checkpoint.id),
+						className: "text-muted-foreground hover:text-foreground/90 ring-border/60 bg-background dark:bg-popover absolute end-1.5 top-1/2 flex h-6 -translate-y-1/2 items-center gap-1 rounded-full px-2 text-[11px] font-medium opacity-0 shadow-xs ring-1 transition-[color,opacity,scale] duration-150 outline-none group-hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-[3px] focus-visible:ring-ring/50 active:scale-[0.96]",
+						children: [/* @__PURE__ */ jsx(RotateCcwIcon, { className: "size-2.5" }), "Restore"]
+					}) : null
+				]
+			}, checkpoint.id);
+		})]
+	});
+}
+//#endregion
+export { CheckpointHistory, checkpoint_history_exports };

package/dist/components/assistant-ui/elements/code-diff.d.ts

@@ -0,0 +1,18 @@
+import { ComponentProps } from "react";
+declare namespace code_diff_d_exports {
+  export { CodeDiff, DiffKind, DiffLine };
+}
+export type DiffKind = "context" | "added" | "removed";
+export interface DiffLine {
+  kind: DiffKind;
+  text: string;
+}
+export declare function CodeDiff({ filename, additions, deletions, lines, cycle, className, ...props }: Omit<ComponentProps<"div">, "children" | "filename" | "additions" | "deletions" | "lines" | "cycle"> & {
+  filename: string;
+  additions: number;
+  deletions: number;
+  lines: readonly DiffLine[];
+  cycle: number;
+}): import("react").JSX.Element;
+//#endregion
+export { code_diff_d_exports };

package/dist/components/assistant-ui/elements/code-diff.js

@@ -0,0 +1,89 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { mono, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PrismLight } from "react-syntax-highlighter";
+import json from "react-syntax-highlighter/dist/esm/languages/prism/json";
+import python from "react-syntax-highlighter/dist/esm/languages/prism/python";
+import tsx from "react-syntax-highlighter/dist/esm/languages/prism/tsx";
+import yaml from "react-syntax-highlighter/dist/esm/languages/prism/yaml";
+//#region src/components/assistant-ui/elements/code-diff.tsx
+var code_diff_exports = /* @__PURE__ */ __exportAll({ CodeDiff: () => CodeDiff });
+PrismLight.registerLanguage("yaml", yaml);
+PrismLight.registerLanguage("tsx", tsx);
+PrismLight.registerLanguage("json", json);
+PrismLight.registerLanguage("python", python);
+const LANGUAGE_BY_EXTENSION = {
+	yaml: "yaml",
+	yml: "yaml",
+	ts: "tsx",
+	tsx: "tsx",
+	js: "tsx",
+	jsx: "tsx",
+	mjs: "tsx",
+	cjs: "tsx",
+	json: "json",
+	py: "python"
+};
+const languageOf = (filename) => LANGUAGE_BY_EXTENSION[filename.split(".").pop()?.toLowerCase() ?? ""];
+const tokenColors = cn("[&_.token.comment]:text-[#3c526d] dark:[&_.token.comment]:text-[#8da1b9]", "[&_.token.key]:text-[#005a8e] [&_.token.property]:text-[#005a8e] [&_.token.class-name]:text-[#005a8e] [&_.token.parameter]:text-[#005a8e] [&_.token.variable]:text-[#005a8e]", "dark:[&_.token.key]:text-[#6cb8e6] dark:[&_.token.property]:text-[#6cb8e6] dark:[&_.token.class-name]:text-[#6cb8e6] dark:[&_.token.parameter]:text-[#6cb8e6] dark:[&_.token.variable]:text-[#6cb8e6]", "[&_.token.string]:text-[#116b00] [&_.token.attr-value]:text-[#116b00] dark:[&_.token.string]:text-[#91d076] dark:[&_.token.attr-value]:text-[#91d076]", "[&_.token.number]:text-[#755f00] [&_.token.boolean]:text-[#755f00] [&_.token.constant]:text-[#755f00] dark:[&_.token.number]:text-[#e6d37a] dark:[&_.token.boolean]:text-[#e6d37a] dark:[&_.token.constant]:text-[#e6d37a]", "[&_.token.keyword]:text-[#a04900] [&_.token.atrule]:text-[#a04900] [&_.token.operator]:text-[#a04900] dark:[&_.token.keyword]:text-[#e9ae7e] dark:[&_.token.atrule]:text-[#e9ae7e] dark:[&_.token.operator]:text-[#e9ae7e]", "[&_.token.function]:text-[#7c00aa] dark:[&_.token.function]:text-[#c699e3]");
+function LineCode({ text, language }) {
+	if (language === void 0) return text;
+	return /* @__PURE__ */ jsx(PrismLight, {
+		language,
+		useInlineStyles: false,
+		wrapLongLines: true,
+		PreTag: "span",
+		CodeTag: "span",
+		children: text
+	});
+}
+const GUTTER = {
+	context: "",
+	added: "+",
+	removed: "−"
+};
+function CodeDiff({ filename, additions, deletions, lines, cycle, className, ...props }) {
+	const language = languageOf(filename);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "code-diff",
+		className: cn(paper, "w-full max-w-md overflow-hidden rounded-2xl font-mono text-xs", tokenColors, className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between px-4 pt-3 pb-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-foreground/90",
+				children: filename
+			}), /* @__PURE__ */ jsxs("span", {
+				className: cn(mono, "tabular-nums"),
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "text-emerald-700 dark:text-emerald-400",
+						children: ["+", additions]
+					}),
+					" ",
+					/* @__PURE__ */ jsxs("span", {
+						className: "text-red-600 dark:text-red-400",
+						children: ["−", deletions]
+					})
+				]
+			})]
+		}), /* @__PURE__ */ jsx("div", { children: lines.map((line, i) => /* @__PURE__ */ jsxs("div", {
+			className: cn("fade-in animate-in fill-mode-both flex gap-1 px-4 py-0.5 leading-relaxed duration-300", line.kind === "context" && "text-muted-foreground", line.kind === "added" && "bg-emerald-500/10 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300", line.kind === "removed" && "bg-red-500/10 text-red-700 dark:text-red-300"),
+			style: { animationDelay: `${i * 60}ms` },
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "w-4 shrink-0 select-none",
+				children: GUTTER[line.kind]
+			}), /* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 break-words whitespace-pre-wrap",
+				children: /* @__PURE__ */ jsx(LineCode, {
+					text: line.text,
+					language
+				})
+			})]
+		}, `${cycle}-${i}-${line.text}`)) })]
+	});
+}
+//#endregion
+export { CodeDiff, code_diff_exports };

package/dist/components/assistant-ui/elements/code-runner.d.ts

@@ -0,0 +1,15 @@
+import { ComponentProps } from "react";
+declare namespace code_runner_d_exports {
+  export { CodeRunner, RunState };
+}
+export type RunState = "idle" | "running" | "ok" | "error";
+export declare function CodeRunner({ language, code, state, output, durationMs, onRun, className, ...props }: Omit<ComponentProps<"div">, "children" | "language" | "code" | "state" | "output" | "durationMs" | "onRun"> & {
+  language: string;
+  code: string;
+  state: RunState;
+  output: readonly string[];
+  durationMs?: number;
+  onRun?: () => void;
+}): import("react").JSX.Element;
+//#endregion
+export { code_runner_d_exports };

package/dist/components/assistant-ui/elements/code-runner.js

@@ -0,0 +1,108 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { ghostButton, mono, paper } from "./surfaces.js";
+import { SyntaxHighlighter } from "./syntax-highlighter.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Loader2Icon, PlayIcon } from "lucide-react";
+//#region src/components/assistant-ui/elements/code-runner.tsx
+var code_runner_exports = /* @__PURE__ */ __exportAll({ CodeRunner: () => CodeRunner });
+/** Display names the stories use, mapped to the registered Prism keys. */
+const PRISM_LANGUAGE = {
+	typescript: "ts",
+	javascript: "js",
+	ts: "ts",
+	js: "js",
+	tsx: "tsx",
+	jsx: "jsx",
+	python: "python",
+	py: "python"
+};
+/**
+* The code panel: Prism tokens on the card's own surface. The theme's
+* tinted background, padding and margin are swapped for the runner's tight
+* rows; the className carries the light/dark visibility, so it must survive.
+*/
+const CodePre = ({ style, className, ...props }) => /* @__PURE__ */ jsx("pre", {
+	tabIndex: 0,
+	...props,
+	style: {
+		...style,
+		background: "transparent",
+		fontFamily: void 0,
+		padding: "0.625rem 0.875rem",
+		margin: 0
+	},
+	className: cn("border-foreground/[0.07] overflow-x-auto border-t font-mono text-xs leading-relaxed", className)
+});
+function CodeRunner({ language, code, state, output, durationMs, onRun, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "code-runner",
+		className: cn(paper, "flex w-full max-w-md flex-col overflow-hidden rounded-2xl", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 px-3.5 py-2",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: cn(mono, "text-muted-foreground min-w-0 flex-1"),
+						children: language
+					}),
+					durationMs !== void 0 && state !== "running" && /* @__PURE__ */ jsxs("span", {
+						className: cn("font-mono text-[11px] tracking-tight", "text-muted-foreground shrink-0 tabular-nums"),
+						children: [durationMs, "ms"]
+					}),
+					onRun || state === "running" ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": "Run this snippet",
+						onClick: onRun,
+						disabled: state === "running",
+						className: cn(ghostButton, "size-7 shrink-0 disabled:pointer-events-none"),
+						children: state === "running" ? /* @__PURE__ */ jsx(Loader2Icon, { className: "size-3.5 animate-spin motion-reduce:animate-none" }) : /* @__PURE__ */ jsx(PlayIcon, { className: "size-3.5 translate-x-px" })
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ jsx(SyntaxHighlighter, {
+				language: PRISM_LANGUAGE[language.toLowerCase()] ?? language.toLowerCase(),
+				code,
+				components: {
+					Pre: CodePre,
+					Code: ({ style, ...props }) => /* @__PURE__ */ jsx("code", {
+						...props,
+						style: {
+							...style,
+							fontFamily: void 0
+						}
+					})
+				}
+			}),
+			state !== "idle" && /* @__PURE__ */ jsxs("div", {
+				className: "border-foreground/[0.07] fade-in animate-in flex flex-col border-t px-3.5 py-2.5 duration-300",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: cn("font-mono text-[11px] tracking-tight", "text-muted-foreground pb-1"),
+						children: "output"
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "overflow-x-auto",
+						tabIndex: 0,
+						children: /* @__PURE__ */ jsx("div", {
+							className: cn("w-max min-w-full", "flex flex-col"),
+							children: output.map((line, i) => /* @__PURE__ */ jsx("span", {
+								className: cn("fade-in animate-in fill-mode-both font-mono text-xs leading-relaxed whitespace-pre", state === "error" ? "text-red-600 dark:text-red-400" : "text-muted-foreground"),
+								style: { animationDelay: `${i * 80}ms` },
+								children: line
+							}, `${i}-${line}`))
+						})
+					}),
+					state === "running" && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "bg-foreground/40 h-[1em] w-[2px] animate-pulse rounded-full motion-reduce:animate-none"
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { CodeRunner, code_runner_exports };

package/dist/components/assistant-ui/elements/command-palette.d.ts

@@ -0,0 +1,20 @@
+import { ComponentProps } from "react";
+declare namespace command_palette_d_exports {
+  export { CommandPalette, PaletteCommand };
+}
+export interface PaletteCommand {
+  id: string;
+  label: string;
+  group: string;
+  keys: readonly string[];
+}
+export declare function CommandPalette({ commands, query, activeId, onQueryChange, onActiveChange, onRun, className, ...props }: Omit<ComponentProps<"div">, "children" | "commands" | "query" | "activeId" | "onQueryChange" | "onActiveChange" | "onRun"> & {
+  commands: readonly PaletteCommand[];
+  query: string;
+  activeId: string;
+  onQueryChange?: (query: string) => void;
+  onActiveChange?: (id: string) => void;
+  onRun?: (id: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { command_palette_d_exports };