@cueplusplus/ui 0.3.0 → 0.6.0

package/dist/elements/chat-panel.js

@@ -0,0 +1,104 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { field, inkButton, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUpIcon } from "lucide-react";
+//#region src/elements/chat-panel.tsx
+/**
+* The whole family working together: a message, a pause, a streamed reply.
+*
+* @example
+* import {
+*   ChatPanel,
+*   ChatPanelComposer,
+*   ChatPanelMessages,
+*   ChatPanelTyping,
+*   ChatPanelUserMessage,
+* } from "@cueplusplus/ui/elements";
+*
+* <ChatPanel>
+*   <ChatPanelMessages>
+*     <ChatPanelUserMessage>Why did my draft disappear?</ChatPanelUserMessage>
+*     <ChatPanelTyping />
+*   </ChatPanelMessages>
+*   <ChatPanelComposer placeholder="Message" onSend={send} />
+* </ChatPanel>
+*/
+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-(--radius-overlay)", className),
+		...props
+	});
+}
+/**
+* The scrolling transcript inside a `ChatPanel`. Bottom-aligned, so a short
+* conversation sits on the composer rather than floating at the top of the panel.
+*/
+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
+	});
+}
+/** One message from the person, drawn as a filled bubble on the trailing edge. */
+function ChatPanelUserMessage({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "chat-panel-user-message",
+		className: cn(field, "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in self-end rounded-(--radius-overlay) px-3 py-1.5 text-(length:--cue-text-ui) duration-300", className),
+		...props
+	});
+}
+/** One message from the model: plain text on the leading edge, no bubble. */
+function ChatPanelAssistantMessage({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "chat-panel-assistant-message",
+		className: cn("text-fg-muted max-w-[85%] self-start text-(length:--cue-text-ui) leading-relaxed", className),
+		...props
+	});
+}
+/** The three-dot rest state, for the gap between sending and the first token. */
+function ChatPanelTyping({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "chat-panel-typing",
+		className: cn("cue-elements-fade-in cue-elements-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-surface-3 size-1 animate-bounce rounded-full motion-reduce:animate-none",
+			style: {
+				animationDelay: delay,
+				animationDuration: "1.1s"
+			}
+		}, delay))
+	});
+}
+/**
+* The panel's composer row. It is a display of a composer rather than a working one —
+* the placeholder is a string and the send button takes a handler.
+*/
+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-fg-subtle text-(length:--cue-text-body)",
+			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 };

package/dist/elements/checkpoint-history.d.ts

@@ -0,0 +1,31 @@
+import { ComponentProps } from "react";
+//#region src/elements/checkpoint-history.d.ts
+/** One point the conversation can fall back to, and how much a fallback would undo. */
+interface Checkpoint {
+  /** Stable identity, compared against currentId and reported by onRestore. */
+  id: string;
+  /** What the checkpoint captured. */
+  label: string;
+  /** Pre-formatted time. */
+  at: string;
+  /** How many files that checkpoint touched. */
+  files: number;
+}
+/**
+ * Points you can fall back to, with what each one would give back.
+ *
+ * @example
+ * import { CheckpointHistory } from "@cueplusplus/ui/elements";
+ *
+ * <CheckpointHistory checkpoints={checkpoints} currentId="3" onRestore={restore} />
+ */
+declare function CheckpointHistory({ checkpoints, currentId, onRestore, className, ...props }: Omit<ComponentProps<"div">, "children" | "checkpoints" | "currentId" | "onRestore"> & {
+  /** Points in the run you can fall back to, oldest first. */
+  checkpoints: readonly Checkpoint[];
+  /** Where the run stands. Everything after it dims, since restoring would discard it. */
+  currentId: string;
+  /** Called with the checkpoint to return to. */
+  onRestore?: (id: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { Checkpoint, CheckpointHistory };

package/dist/elements/checkpoint-history.js

@@ -0,0 +1,65 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mono, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RotateCcwIcon } from "lucide-react";
+//#region src/elements/checkpoint-history.tsx
+/**
+* Points you can fall back to, with what each one would give back.
+*
+* @example
+* import { CheckpointHistory } from "@cueplusplus/ui/elements";
+*
+* <CheckpointHistory checkpoints={checkpoints} currentId="3" onRestore={restore} />
+*/
+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-(--radius-overlay) p-3", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "px-1.5 pb-1 text-(length:--cue-text-body) 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 flex items-center gap-2.5 rounded-(--radius-surface) px-1.5 py-1.5 transition-colors", current ? "bg-surface-1" : "hover:bg-surface-1", ahead && "opacity-40"),
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: cn("size-1.5 shrink-0 rounded-full", current ? "bg-stream" : ahead ? "border-border-strong border" : "bg-surface-3")
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "flex min-w-0 flex-1 flex-col",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate text-(length:--cue-text-body)",
+							children: checkpoint.label
+						}), /* @__PURE__ */ jsxs("span", {
+							className: cn(mono, "text-fg-subtle"),
+							children: [
+								checkpoint.at,
+								" · ",
+								checkpoint.files,
+								" files"
+							]
+						})]
+					}),
+					current ? /* @__PURE__ */ jsx("span", {
+						className: cn(mono, "text-fg-subtle shrink-0"),
+						children: "current"
+					}) : /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						"aria-label": `Restore to ${checkpoint.label}`,
+						onClick: () => onRestore?.(checkpoint.id),
+						className: "text-fg-muted hover:bg-surface-2 hover:text-fg flex h-6 shrink-0 items-center gap-1 rounded-full px-2 text-(length:--cue-text-label) font-medium opacity-0 transition-[background-color,color,opacity,scale] duration-150 group-hover:opacity-100 focus-visible:opacity-100 active:scale-[0.96]",
+						children: [/* @__PURE__ */ jsx(RotateCcwIcon, { className: "size-2.5" }), "Restore"]
+					})
+				]
+			}, checkpoint.id);
+		})]
+	});
+}
+//#endregion
+export { CheckpointHistory };

package/dist/elements/clamp.d.ts

@@ -0,0 +1,90 @@
+import { ClampLabels } from "./vocabulary.js";
+import * as React from "react";
+//#region src/elements/clamp.d.ts
+interface ClampProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onToggle"> {
+  /**
+   * How tall the content may be before it is cut, as a number of pixels or any
+   * CSS length. Defaults to `250` — the reference's own default, with `60` the
+   * value it uses for a quoted user message.
+   *
+   * Published as `--cue-elements-clamp-height` on the root, so a console can
+   * retune one clamp from a stylesheet without a prop.
+   */
+  height?: number | string;
+  /**
+   * How deep the dissolve at the cut is, in pixels. Defaults to `50`, the
+   * reference's most-used depth.
+   *
+   * Fixed pixels rather than a fraction, deliberately: a percentage fade is a
+   * different effect on a short row than on a long one. Published as
+   * `--cue-elements-clamp-fade`.
+   */
+  fade?: number;
+  /** Whether the content is showing in full. */
+  open: boolean;
+  /**
+   * Called when the reveal is used. Omit it and the clamp is a hard cut with a
+   * fade and no promise of more — which is the reference's own tool-result row,
+   * where the full text opens somewhere else entirely.
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Whether the content is taller than `height`, when the caller already knows.
+   * Left out, the clamp measures itself and re-measures as the content and the
+   * box change.
+   *
+   * The measurement is the right default and the override is for the cases it
+   * cannot serve: a virtualised row that knows its own text, a replay frame
+   * that must paint the same way on every mount, a server render.
+   */
+  overflows?: boolean;
+  /**
+   * The two words on the reveal. Defaults to {@link CLAMP_LABELS} — `Show more`
+   * and `Show less`, which is the reference's copy verbatim.
+   */
+  labels?: Partial<ClampLabels>;
+  /** The content being clamped. */
+  children?: React.ReactNode;
+}
+/**
+ * Long content, cut to a height, dissolving at the cut, with a way back.
+ *
+ * The truncation trio as one element. Everything a transcript truncates —
+ * command output, a pasted file, a reasoning trace, a quoted message — wants
+ * exactly these three things, and a family that leaves them to each component
+ * gets five slightly different cuts and one of them hard-coded to a colour that
+ * breaks in light mode.
+ *
+ * The fade is a **mask**, not an overlay: it fades the content rather than
+ * painting a gradient of the surface colour over it, so it needs no idea of
+ * what is behind it and cannot drift when the theme changes. The height and the
+ * depth are published as custom properties on the root, so a console can retune
+ * a clamp from CSS — and because the mask is expressed in terms of them, a
+ * height overridden in a stylesheet moves the fade with it.
+ *
+ * The reveal is the part this element does not copy exactly. The reference
+ * shows its `Show more` chip on hover only, which is unreachable for anyone
+ * who is not holding a mouse; here the control is always in the DOM and always
+ * focusable, and hover and focus only decide how loudly it is drawn. Once the
+ * content is open, `Show less` is drawn at full strength — a long expansion you
+ * cannot close without hunting for the control is a real defect.
+ *
+ * Open state is a prop, like everything else in this family: a scripted replay
+ * of this component is a caller changing `open`.
+ *
+ * @example
+ * import { Clamp } from "@cueplusplus/ui/elements";
+ *
+ * <Clamp open={open} onOpenChange={setOpen}>
+ *   <pre>{output}</pre>
+ * </Clamp>
+ * @example
+ * // The reference's tool-result row: 60px of output, a 10px dissolve, and no
+ * // reveal at all — the full text opens in an editor tab instead.
+ * <Clamp height={60} fade={10} open={false} overflows onClick={openInEditor}>
+ *   {result}
+ * </Clamp>
+ */
+declare const Clamp: React.ForwardRefExoticComponent<ClampProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Clamp, ClampProps };

package/dist/elements/clamp.js

@@ -0,0 +1,109 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effect.js";
+import { CLAMP_LABELS } from "./vocabulary.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/elements/clamp.tsx
+/** A height as CSS: a bare number is pixels, a string is whatever it says. */
+const asLength = (value) => typeof value === "number" ? `${value}px` : value;
+/**
+* Long content, cut to a height, dissolving at the cut, with a way back.
+*
+* The truncation trio as one element. Everything a transcript truncates —
+* command output, a pasted file, a reasoning trace, a quoted message — wants
+* exactly these three things, and a family that leaves them to each component
+* gets five slightly different cuts and one of them hard-coded to a colour that
+* breaks in light mode.
+*
+* The fade is a **mask**, not an overlay: it fades the content rather than
+* painting a gradient of the surface colour over it, so it needs no idea of
+* what is behind it and cannot drift when the theme changes. The height and the
+* depth are published as custom properties on the root, so a console can retune
+* a clamp from CSS — and because the mask is expressed in terms of them, a
+* height overridden in a stylesheet moves the fade with it.
+*
+* The reveal is the part this element does not copy exactly. The reference
+* shows its `Show more` chip on hover only, which is unreachable for anyone
+* who is not holding a mouse; here the control is always in the DOM and always
+* focusable, and hover and focus only decide how loudly it is drawn. Once the
+* content is open, `Show less` is drawn at full strength — a long expansion you
+* cannot close without hunting for the control is a real defect.
+*
+* Open state is a prop, like everything else in this family: a scripted replay
+* of this component is a caller changing `open`.
+*
+* @example
+* import { Clamp } from "@cueplusplus/ui/elements";
+*
+* <Clamp open={open} onOpenChange={setOpen}>
+*   <pre>{output}</pre>
+* </Clamp>
+* @example
+* // The reference's tool-result row: 60px of output, a 10px dissolve, and no
+* // reveal at all — the full text opens in an editor tab instead.
+* <Clamp height={60} fade={10} open={false} overflows onClick={openInEditor}>
+*   {result}
+* </Clamp>
+*/
+const Clamp = React.forwardRef(function Clamp({ height = 250, fade = 50, open, onOpenChange, overflows, labels, children, className, style, ...elementProps }, ref) {
+	const [measured, setMeasured] = React.useState(false);
+	const box = React.useRef(null);
+	const inner = React.useRef(null);
+	const said = {
+		...CLAMP_LABELS,
+		...labels
+	};
+	useIsomorphicLayoutEffect(() => {
+		if (overflows !== void 0 || open) return;
+		const element = box.current;
+		const content = inner.current;
+		if (element === null || content === null) return;
+		const read = () => setMeasured(element.scrollHeight > element.clientHeight + 1);
+		read();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(read);
+		observer.observe(content);
+		return () => observer.disconnect();
+	}, [
+		height,
+		open,
+		overflows
+	]);
+	const over = overflows ?? measured;
+	const clamped = !open && over;
+	const revealable = onOpenChange !== void 0 && (open || over);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "clamp",
+		"data-open": String(open),
+		"data-clamped": String(clamped),
+		className: cn("group/clamp relative flex w-full min-w-0 flex-col", className),
+		style: {
+			"--cue-elements-clamp-height": asLength(height),
+			"--cue-elements-clamp-fade": `${fade}px`,
+			"--cue-elements-clamp-mask": "linear-gradient(to bottom, black calc(var(--cue-elements-clamp-height) - var(--cue-elements-clamp-fade)), transparent var(--cue-elements-clamp-height))",
+			...style
+		},
+		...elementProps,
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: box,
+			"data-slot": "clamp-content",
+			className: cn("min-w-0", !open && "overflow-hidden [max-height:var(--cue-elements-clamp-height)]", clamped && "[mask-image:var(--cue-elements-clamp-mask)] [-webkit-mask-image:var(--cue-elements-clamp-mask)]"),
+			children: /* @__PURE__ */ jsx("div", {
+				ref: inner,
+				className: "min-w-0",
+				children
+			})
+		}), revealable ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"data-slot": "clamp-reveal",
+			"aria-expanded": open,
+			onClick: () => onOpenChange?.(!open),
+			className: cn("text-fg-muted hover:text-fg self-start rounded-(--radius-control) py-0.5 text-(length:--cue-text-ui) transition-opacity focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent motion-reduce:transition-none", !open && "opacity-60 group-hover/clamp:opacity-100 focus-visible:opacity-100"),
+			children: open ? said.less : said.more
+		}) : null]
+	});
+});
+//#endregion
+export { Clamp };

package/dist/elements/code-diff.d.ts

@@ -0,0 +1,42 @@
+import { ComponentProps } from "react";
+//#region src/elements/code-diff.d.ts
+/** What a diff row is — unchanged context, an addition, or a deletion. */
+type DiffKind = "context" | "added" | "removed";
+/** One row of a diff: its kind, which decides its gutter mark and its ink, and its text. */
+interface DiffLine {
+  /** Whether the row is context, an addition or a deletion. */
+  kind: DiffKind;
+  /** The line itself, rendered with its own whitespace kept. */
+  text: string;
+}
+/**
+ * A unified diff with tinted additions and removals, sized for chat.
+ *
+ * @example
+ * import { CodeDiff } from "@cueplusplus/ui/elements";
+ *
+ * <CodeDiff
+ *   filename="thread.tsx"
+ *   additions={2}
+ *   deletions={1}
+ *   lines={[
+ *     { kind: "removed", text: "const x = 1" },
+ *     { kind: "added", text: "const x = 2" },
+ *   ]}
+ *   cycle={0}
+ * />
+ */
+declare function CodeDiff({ filename, additions, deletions, lines, cycle, className, ...props }: Omit<ComponentProps<"div">, "children" | "filename" | "additions" | "deletions" | "lines" | "cycle"> & {
+  /** File path shown in the diff header. */
+  filename: string;
+  /** Addition count rendered in green next to the filename. */
+  additions: number;
+  /** Deletion count rendered in red next to the filename. */
+  deletions: number;
+  /** Unified diff lines with context, added, or removed kind. */
+  lines: readonly DiffLine[];
+  /** Identity key that remounts the body so entrance animation can replay. */
+  cycle: number;
+}): import("react").JSX.Element;
+//#endregion
+export { CodeDiff, DiffKind, DiffLine };

package/dist/elements/code-diff.js

@@ -0,0 +1,69 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { codeScroll, codeSurface, mono, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/elements/code-diff.tsx
+const GUTTER = {
+	context: "",
+	added: "+",
+	removed: "−"
+};
+/**
+* A unified diff with tinted additions and removals, sized for chat.
+*
+* @example
+* import { CodeDiff } from "@cueplusplus/ui/elements";
+*
+* <CodeDiff
+*   filename="thread.tsx"
+*   additions={2}
+*   deletions={1}
+*   lines={[
+*     { kind: "removed", text: "const x = 1" },
+*     { kind: "added", text: "const x = 2" },
+*   ]}
+*   cycle={0}
+* />
+*/
+function CodeDiff({ filename, additions, deletions, lines, cycle, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "code-diff",
+		className: cn(paper, "w-full max-w-md overflow-hidden rounded-(--radius-overlay) font-mono text-(length:--cue-text-ui)", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between px-4 pt-3 pb-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-fg",
+				children: filename
+			}), /* @__PURE__ */ jsxs("span", {
+				className: cn(mono, "tabular-nums"),
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "text-ok",
+						children: ["+", additions]
+					}),
+					" ",
+					/* @__PURE__ */ jsxs("span", {
+						className: "text-danger",
+						children: ["−", deletions]
+					})
+				]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: codeScroll,
+			children: /* @__PURE__ */ jsx("div", {
+				className: codeSurface,
+				children: lines.map((line, i) => /* @__PURE__ */ jsxs("div", {
+					className: cn("cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both flex px-4 py-0.5 leading-relaxed whitespace-pre duration-300", line.kind === "context" && "text-fg-muted", line.kind === "added" && "bg-ok/10 text-ok", line.kind === "removed" && "bg-danger/10 text-danger"),
+					style: { animationDelay: `${i * 60}ms` },
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "w-4 shrink-0 select-none",
+						children: GUTTER[line.kind]
+					}), /* @__PURE__ */ jsx("span", { children: line.text })]
+				}, `${cycle}-${i}-${line.text}`))
+			})
+		})]
+	});
+}
+//#endregion
+export { CodeDiff };

package/dist/elements/code-runner.d.ts

@@ -0,0 +1,38 @@
+import { ComponentProps } from "react";
+//#region src/elements/code-runner.d.ts
+/**
+ * Where the snippet is: `idle` before anybody asks, `running`, then `ok` or `error`.
+ * The last two both show output — a failure is a result, not an absence.
+ */
+type RunState = "idle" | "running" | "ok" | "error";
+/**
+ * A snippet with a run button, and the output it produced attached below it.
+ *
+ * @example
+ * import { CodeRunner } from "@cueplusplus/ui/elements";
+ *
+ * <CodeRunner
+ *   language="typescript"
+ *   code={code}
+ *   state="ok"
+ *   output={["1"]}
+ *   durationMs={38}
+ *   onRun={run}
+ * />
+ */
+declare function CodeRunner({ language, code, state, output, durationMs, onRun, className, ...props }: Omit<ComponentProps<"div">, "children" | "language" | "code" | "state" | "output" | "durationMs" | "onRun"> & {
+  /** Language label above the snippet. */
+  language: string;
+  /** The snippet. Rendered as plain mono; wrap it yourself for highlighting. */
+  code: string;
+  /** idle hides the output pane entirely; error tints the output red. */
+  state: RunState;
+  /** Output lines, revealed in sequence. */
+  output: readonly string[];
+  /** How long the run took, printed once it settles. */
+  durationMs?: number;
+  /** Called when the run control is pressed. */
+  onRun?: () => void;
+}): import("react").JSX.Element;
+//#endregion
+export { CodeRunner, RunState };

package/dist/elements/code-runner.js

@@ -0,0 +1,84 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ghostButton, mono, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Loader2Icon, PlayIcon } from "lucide-react";
+//#region src/elements/code-runner.tsx
+/**
+* A snippet with a run button, and the output it produced attached below it.
+*
+* @example
+* import { CodeRunner } from "@cueplusplus/ui/elements";
+*
+* <CodeRunner
+*   language="typescript"
+*   code={code}
+*   state="ok"
+*   output={["1"]}
+*   durationMs={38}
+*   onRun={run}
+* />
+*/
+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-(--radius-overlay)", 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-fg-subtle min-w-0 flex-1"),
+						children: language
+					}),
+					durationMs !== void 0 && state !== "running" && /* @__PURE__ */ jsxs("span", {
+						className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle shrink-0 tabular-nums"),
+						children: [durationMs, "ms"]
+					}),
+					/* @__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" })
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("pre", {
+				className: "border-border overflow-x-auto border-t px-3.5 py-2.5 font-mono text-(length:--cue-text-ui) leading-relaxed",
+				children: /* @__PURE__ */ jsx("code", {
+					className: "text-fg-muted",
+					children: code
+				})
+			}),
+			state !== "idle" && /* @__PURE__ */ jsxs("div", {
+				className: "border-border cue-elements-fade-in cue-elements-animate-in flex flex-col border-t px-3.5 py-2.5 duration-300",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle pb-1"),
+						children: "output"
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "overflow-x-auto",
+						children: /* @__PURE__ */ jsx("div", {
+							className: cn("w-max min-w-full", "flex flex-col"),
+							children: output.map((line, i) => /* @__PURE__ */ jsx("span", {
+								className: cn("cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both font-mono text-(length:--cue-text-ui) leading-relaxed whitespace-pre", state === "error" ? "text-danger" : "text-fg-muted"),
+								style: { animationDelay: `${i * 80}ms` },
+								children: line
+							}, `${i}-${line}`))
+						})
+					}),
+					state === "running" && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "bg-surface-3 h-[1em] w-[2px] animate-pulse rounded-full motion-reduce:animate-none"
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { CodeRunner };