@cueplusplus/ui 0.13.0

package/dist/elements/animated-number.d.ts

@@ -0,0 +1,86 @@
+import * as React from "react";
+//#region src/elements/animated-number.d.ts
+/**
+ * A count in the shape a status line writes it: `842`, `1.2k`, `3.4M`.
+ *
+ * The reference's own rule — `value < 1000 ? value : (value / 1000).toFixed(1)
+ * + "k"` — with two extensions it needs to survive real data: a million rung,
+ * because a context window is now measured in them, and a sign, because a
+ * delta is a number too. One decimal at every rung above the first, so the
+ * width of the string stops changing once it is short.
+ *
+ * Anything that is not a finite number is `0`: this formats a caller's
+ * arithmetic, and a division that has not happened yet is a real state.
+ *
+ * @param value The number to write.
+ * @returns The compact form, without a unit — `tokens` is the caller's word.
+ * @example
+ * formatCompactNumber(842);      // "842"
+ * formatCompactNumber(1240);     // "1.2k"
+ * formatCompactNumber(3_400_000); // "3.4M"
+ */
+declare function formatCompactNumber(value: number): string;
+interface AnimatedNumberProps extends Omit<React.ComponentPropsWithoutRef<"span">, "children"> {
+  /**
+   * The number to show. Every change eases from whatever is on screen to this,
+   * including a change that arrives mid-tween — which is the case a live
+   * counter is actually made of.
+   *
+   * A non-finite value paints `0` rather than the word `NaN`: these arrive from
+   * a caller's arithmetic over a stream that may not have started.
+   */
+  value: number;
+  /**
+   * How long one tween lasts, in milliseconds. Defaults to `400` — long enough
+   * to read as counting, short enough that a counter updated every second is
+   * never behind the run it is describing. `0` steps.
+   */
+  duration?: number;
+  /**
+   * How to write the number. Defaults to grouped digits in `en-US`
+   * (`1,240`), which is deterministic across a server render and a client one;
+   * {@link formatCompactNumber} is the other one this family uses (`1.2k`).
+   *
+   * Called on every frame, so keep it cheap.
+   */
+  format?: (value: number) => string;
+}
+/**
+ * A number that counts to its new value instead of jumping to it.
+ *
+ * The smallest element in the canon and the one that touches the most rows: a
+ * token count, a cost, a duration, a file tally. Two rules, both from the same
+ * teardown. Tween, because a value that steps reads as a new fact while a value
+ * that counts reads as the same fact moving — and a transcript's numbers are
+ * almost always the second thing. And `tabular-nums`, because a proportional
+ * `1` is narrower than a `0`, so a stepping counter nudges everything to its
+ * right on every update.
+ *
+ * It holds the only state in the canon, and it is a tween rather than a fact:
+ * `value` is still a prop, every tween ends exactly on it, and a replay that
+ * sets the prop paints the same number at every frame it rests on.
+ *
+ * **Reduced motion is answered by arriving, not by stopping.** A reader who has
+ * asked for stillness gets the value immediately and no frames are ever
+ * scheduled — the number is information, and the animation was only ever how it
+ * got there.
+ *
+ * While a tween is in flight the digits on screen are `aria-hidden` and the
+ * settled value is carried beside them for a screen reader, so an assistive
+ * technology reads the number the run actually reported rather than whichever
+ * frame it happened to land on. Once the tween ends there is one node again and
+ * nothing is duplicated.
+ *
+ * @example
+ * import { AnimatedNumber } from "@cueplusplus/ui/elements";
+ *
+ * <AnimatedNumber value={tokens} />
+ * @example
+ * // The reference's own readout: compact, inline, in the status line.
+ * <span className="text-fg-muted">
+ *   · <AnimatedNumber value={tokens} format={formatCompactNumber} /> tokens
+ * </span>
+ */
+declare const AnimatedNumber: React.ForwardRefExoticComponent<AnimatedNumberProps & React.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { AnimatedNumber, AnimatedNumberProps, formatCompactNumber };

package/dist/elements/animated-number.js

@@ -0,0 +1,118 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { usePrefersReducedMotion } from "../instruments/_motion.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/elements/animated-number.tsx
+/**
+* A count in the shape a status line writes it: `842`, `1.2k`, `3.4M`.
+*
+* The reference's own rule — `value < 1000 ? value : (value / 1000).toFixed(1)
+* + "k"` — with two extensions it needs to survive real data: a million rung,
+* because a context window is now measured in them, and a sign, because a
+* delta is a number too. One decimal at every rung above the first, so the
+* width of the string stops changing once it is short.
+*
+* Anything that is not a finite number is `0`: this formats a caller's
+* arithmetic, and a division that has not happened yet is a real state.
+*
+* @param value The number to write.
+* @returns The compact form, without a unit — `tokens` is the caller's word.
+* @example
+* formatCompactNumber(842);      // "842"
+* formatCompactNumber(1240);     // "1.2k"
+* formatCompactNumber(3_400_000); // "3.4M"
+*/
+function formatCompactNumber(value) {
+	if (!Number.isFinite(value)) return "0";
+	const sign = value < 0 ? "-" : "";
+	const size = Math.abs(value);
+	if (size < 1e3) return `${sign}${Math.round(size)}`;
+	if (size < 1e6) return `${sign}${(size / 1e3).toFixed(1)}k`;
+	return `${sign}${(size / 1e6).toFixed(1)}M`;
+}
+/** Grouped digits, in a fixed locale so a server and a client agree. */
+const GROUPED = (value) => value.toLocaleString("en-US");
+/**
+* A number that counts to its new value instead of jumping to it.
+*
+* The smallest element in the canon and the one that touches the most rows: a
+* token count, a cost, a duration, a file tally. Two rules, both from the same
+* teardown. Tween, because a value that steps reads as a new fact while a value
+* that counts reads as the same fact moving — and a transcript's numbers are
+* almost always the second thing. And `tabular-nums`, because a proportional
+* `1` is narrower than a `0`, so a stepping counter nudges everything to its
+* right on every update.
+*
+* It holds the only state in the canon, and it is a tween rather than a fact:
+* `value` is still a prop, every tween ends exactly on it, and a replay that
+* sets the prop paints the same number at every frame it rests on.
+*
+* **Reduced motion is answered by arriving, not by stopping.** A reader who has
+* asked for stillness gets the value immediately and no frames are ever
+* scheduled — the number is information, and the animation was only ever how it
+* got there.
+*
+* While a tween is in flight the digits on screen are `aria-hidden` and the
+* settled value is carried beside them for a screen reader, so an assistive
+* technology reads the number the run actually reported rather than whichever
+* frame it happened to land on. Once the tween ends there is one node again and
+* nothing is duplicated.
+*
+* @example
+* import { AnimatedNumber } from "@cueplusplus/ui/elements";
+*
+* <AnimatedNumber value={tokens} />
+* @example
+* // The reference's own readout: compact, inline, in the status line.
+* <span className="text-fg-muted">
+*   · <AnimatedNumber value={tokens} format={formatCompactNumber} /> tokens
+* </span>
+*/
+const AnimatedNumber = React.forwardRef(function AnimatedNumber({ value, duration = 400, format = GROUPED, className, ...elementProps }, ref) {
+	const target = Number.isFinite(value) ? value : 0;
+	const reduced = usePrefersReducedMotion();
+	const [shown, setShown] = React.useState(target);
+	const painted = React.useRef(target);
+	React.useEffect(() => {
+		const from = painted.current;
+		if (from === target) return;
+		if (reduced || duration <= 0 || typeof requestAnimationFrame !== "function") {
+			painted.current = target;
+			setShown(target);
+			return;
+		}
+		let origin = -1;
+		let frameId = requestAnimationFrame(function tick(at) {
+			if (origin < 0) origin = at;
+			const through = Math.min(1, (at - origin) / duration);
+			const next = through >= 1 ? target : Math.floor(from + (target - from) * through);
+			painted.current = next;
+			setShown(next);
+			if (through >= 1) return;
+			frameId = requestAnimationFrame(tick);
+		});
+		return () => cancelAnimationFrame(frameId);
+	}, [
+		duration,
+		reduced,
+		target
+	]);
+	const tweening = shown !== target;
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		"data-slot": "animated-number",
+		"data-tweening": String(tweening),
+		className: cn("tabular-nums", className),
+		...elementProps,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": tweening || void 0,
+			children: format(shown)
+		}), tweening ? /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: format(target)
+		}) : null]
+	});
+});
+//#endregion
+export { AnimatedNumber, formatCompactNumber };

package/dist/elements/approval-card.d.ts

@@ -0,0 +1,40 @@
+import { ComponentProps } from "react";
+//#region src/elements/approval-card.d.ts
+/**
+ * Where an approval has got to: `request` while it waits on the user, then `running`,
+ * `done` or `denied`.
+ */
+type ApprovalState = "request" | "running" | "done" | "denied";
+/**
+ * Human in the loop: the agent asks before it runs anything with side effects.
+ *
+ * @example
+ * import { ApprovalCard } from "@cueplusplus/ui/elements";
+ *
+ * <ApprovalCard
+ *   state="request"
+ *   command="pnpm db:migrate"
+ *   title="Run migration"
+ *   subtitle="Needs your approval"
+ *   onAllowOnce={() => approve()}
+ *   onDeny={() => deny()}
+ * />
+ */
+declare function ApprovalCard({ state, command, title, subtitle, onAllowOnce, onAlwaysAllow, onDeny, className, ...props }: Omit<ComponentProps<"div">, "children" | "state" | "command" | "title" | "subtitle" | "onAllowOnce" | "onAlwaysAllow" | "onDeny"> & {
+  /** Lifecycle of the card: request with actions, running spinner, done check, or denied. */
+  state: ApprovalState;
+  /** Command shown in the mono field the agent wants to run. */
+  command: string;
+  /** Headline naming the action that needs approval. */
+  title: string;
+  /** Supporting line under the title explaining the request. */
+  subtitle: string;
+  /** Called when the user clicks Allow once. */
+  onAllowOnce?: () => void;
+  /** Called when the user clicks Always allow. */
+  onAlwaysAllow?: () => void;
+  /** Called when the user clicks Deny. */
+  onDeny?: () => void;
+}): import("react").JSX.Element;
+//#endregion
+export { ApprovalCard, ApprovalState };

package/dist/elements/approval-card.js

@@ -0,0 +1,78 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { field, inkButton, paper } from "./surfaces.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, Loader2Icon, TerminalIcon, XIcon } from "lucide-react";
+//#region src/elements/approval-card.tsx
+/**
+* Human in the loop: the agent asks before it runs anything with side effects.
+*
+* @example
+* import { ApprovalCard } from "@cueplusplus/ui/elements";
+*
+* <ApprovalCard
+*   state="request"
+*   command="pnpm db:migrate"
+*   title="Run migration"
+*   subtitle="Needs your approval"
+*   onAllowOnce={() => approve()}
+*   onDeny={() => deny()}
+* />
+*/
+function ApprovalCard({ state, command, title, subtitle, onAllowOnce, onAlwaysAllow, onDeny, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "approval-card",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-3.5 rounded-(--radius-overlay) p-4", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "bg-surface-1 text-fg-muted flex size-9 shrink-0 items-center justify-center rounded-(--radius-surface)",
+					children: /* @__PURE__ */ jsx(TerminalIcon, { className: "size-4" })
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-(length:--cue-text-body) font-medium",
+						children: title
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-fg-muted text-(length:--cue-text-ui)",
+						children: subtitle
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cn(field, "text-fg-muted rounded-(--radius-surface) px-3.5 py-2.5 font-mono text-(length:--cue-text-ui)"),
+				children: command
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex h-8 items-center justify-end gap-2",
+				children: state === "request" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onDeny,
+						className: "text-fg-muted hover:bg-surface-2 hover:text-fg h-8 rounded-full px-3.5 text-(length:--cue-text-ui) font-medium transition-[background-color,color,scale] duration-150 active:scale-[0.96]",
+						children: "Deny"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onAlwaysAllow,
+						className: "text-fg-muted hover:bg-surface-2 hover:text-fg h-8 rounded-full px-3.5 text-(length:--cue-text-ui) font-medium transition-[background-color,color,scale] duration-150 active:scale-[0.96]",
+						children: "Always allow"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onAllowOnce,
+						className: cn(inkButton, "flex h-8 items-center rounded-full px-3.5 text-(length:--cue-text-ui) font-medium"),
+						children: "Allow once"
+					})
+				] }) : /* @__PURE__ */ jsx("div", {
+					className: "cue-elements-fade-in cue-elements-animate-in text-fg-muted flex items-center gap-2 text-(length:--cue-text-ui) duration-300",
+					children: state === "running" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Loader2Icon, { className: "text-fg-muted size-3.5 animate-spin" }), "Approved, running"] }) : state === "denied" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XIcon, { className: "text-fg-muted size-3.5" }), "Denied"] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5 text-ok" }), "Finished with exit 0"] })
+				}, state)
+			})
+		]
+	});
+}
+//#endregion
+export { ApprovalCard };

package/dist/elements/artifact-card.d.ts

@@ -0,0 +1,30 @@
+import { ComponentProps } from "react";
+//#region src/elements/artifact-card.d.ts
+/**
+ * A generated document as a tangible object, written live and versioned.
+ *
+ * @example
+ * import { ArtifactCard } from "@cueplusplus/ui/elements";
+ *
+ * <ArtifactCard
+ *   title="Draft persistence RFC"
+ *   meta="Document · v3 · just now"
+ *   generating={isWriting}
+ *   words={wordCount}
+ * />
+ */
+declare function ArtifactCard({ title, meta, generating, words, className, ...props }: Omit<ComponentProps<"div">, "children" | "title" | "meta" | "generating" | "words"> & {
+  /** Name of the generated artifact. */
+  title: string;
+  /**
+   * Resting meta line shown once generation finishes, for example kind, version, and
+   * recency.
+   */
+  meta: string;
+  /** While true the icon pulses and the meta line shows a live word count with a shimmer. */
+  generating?: boolean;
+  /** Live word count shown while generating. */
+  words?: number;
+}): import("react").JSX.Element;
+//#endregion
+export { ArtifactCard };

package/dist/elements/artifact-card.js

@@ -0,0 +1,58 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ShimmerLabel, mono, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUpRightIcon, FileTextIcon } from "lucide-react";
+//#region src/elements/artifact-card.tsx
+/**
+* A generated document as a tangible object, written live and versioned.
+*
+* @example
+* import { ArtifactCard } from "@cueplusplus/ui/elements";
+*
+* <ArtifactCard
+*   title="Draft persistence RFC"
+*   meta="Document · v3 · just now"
+*   generating={isWriting}
+*   words={wordCount}
+* />
+*/
+function ArtifactCard({ title, meta, generating = false, words = 0, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "artifact-card",
+		className: cn(paper, "group flex w-full max-w-xs cursor-pointer items-center gap-3 rounded-(--radius-overlay) p-3.5 transition-transform duration-150 hover:-translate-y-px active:scale-[0.98]", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "bg-surface-1 text-fg-muted flex size-9 shrink-0 items-center justify-center rounded-(--radius-surface)",
+				children: /* @__PURE__ */ jsx(FileTextIcon, { className: cn("size-4", generating && "animate-pulse motion-reduce:animate-none") })
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "truncate text-(length:--cue-text-body) font-medium",
+					children: title
+				}), generating ? /* @__PURE__ */ jsxs("p", {
+					className: cn(mono, "text-fg-subtle flex items-center gap-1"),
+					children: [
+						/* @__PURE__ */ jsx(ShimmerLabel, {
+							className: "relative inline-block leading-none",
+							children: "Writing"
+						}),
+						/* @__PURE__ */ jsx("span", { children: "·" }),
+						/* @__PURE__ */ jsxs("span", {
+							className: "tabular-nums",
+							children: [words, " words"]
+						})
+					]
+				}) : /* @__PURE__ */ jsx("p", {
+					className: cn(mono, "cue-elements-fade-in cue-elements-blur-in-2 cue-elements-animate-in text-fg-subtle duration-300 motion-reduce:animate-none"),
+					children: meta
+				})]
+			}),
+			/* @__PURE__ */ jsx(ArrowUpRightIcon, { className: "text-fg-subtle size-3.5 opacity-0 transition-opacity group-hover:opacity-100" })
+		]
+	});
+}
+//#endregion
+export { ArtifactCard };

package/dist/elements/background-inbox.d.ts

@@ -0,0 +1,39 @@
+import { ComponentProps } from "react";
+//#region src/elements/background-inbox.d.ts
+/**
+ * Where a run that left the conversation got to: still `running`, `ready` to be
+ * collected, or `failed`. Only a ready run is clickable.
+ */
+type BackgroundState = "running" | "ready" | "failed";
+/** One piece of work going on somewhere else, and what is waiting to come back from it. */
+interface BackgroundRun {
+  /** Stable identity, reported back by onCollect. */
+  id: string;
+  /** What the detached run is doing. */
+  title: string;
+  /** Only ready and failed rows can be collected. */
+  state: BackgroundState;
+  /** Pre-formatted run time. */
+  elapsed: string;
+  /** One-line result, shown once there is one. */
+  summary?: string;
+}
+/**
+ * Work still going somewhere else, and the results waiting to be collected.
+ *
+ * @example
+ * import { BackgroundInbox } from "@cueplusplus/ui/elements";
+ *
+ * <BackgroundInbox runs={runs} onCollect={collect} />
+ */
+declare function BackgroundInbox({ runs, onCollect, className, ...props }: Omit<ComponentProps<"div">, "children" | "runs" | "onCollect"> & {
+  /**
+   * Detached runs. The header counts what is ready rather than what is in flight,
+   * because ready is the thing that needs you.
+   */
+  runs: readonly BackgroundRun[];
+  /** Called to pull a finished run back into the thread. Running rows are not clickable. */
+  onCollect?: (id: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { BackgroundInbox, BackgroundRun, BackgroundState };

package/dist/elements/background-inbox.js

@@ -0,0 +1,60 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mono, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, Loader2Icon, XIcon } from "lucide-react";
+//#region src/elements/background-inbox.tsx
+/**
+* Work still going somewhere else, and the results waiting to be collected.
+*
+* @example
+* import { BackgroundInbox } from "@cueplusplus/ui/elements";
+*
+* <BackgroundInbox runs={runs} onCollect={collect} />
+*/
+function BackgroundInbox({ runs, onCollect, className, ...props }) {
+	const ready = runs.filter((run) => run.state === "ready").length;
+	const running = runs.filter((run) => run.state === "running").length;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "background-inbox",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-1 rounded-(--radius-overlay) p-3", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-baseline justify-between px-1 pb-1",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-(length:--cue-text-body) font-medium",
+				children: "Running elsewhere"
+			}), /* @__PURE__ */ jsx("span", {
+				className: cn(mono, "tabular-nums", ready > 0 ? "text-stream" : "text-fg-subtle"),
+				children: ready > 0 ? `${ready} ready` : `${running} in flight`
+			})]
+		}), runs.map((run) => /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			disabled: run.state === "running",
+			onClick: () => onCollect?.(run.id),
+			className: cn("flex items-center gap-2.5 rounded-(--radius-surface) px-1.5 py-2 text-start transition-colors", run.state === "running" ? "cursor-default" : "hover:bg-surface-1"),
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "flex size-3.5 shrink-0 items-center justify-center",
+					children: run.state === "running" ? /* @__PURE__ */ jsx(Loader2Icon, { className: "text-fg-subtle size-3 animate-spin motion-reduce:animate-none" }) : run.state === "failed" ? /* @__PURE__ */ jsx(XIcon, { className: "size-3 text-danger" }) : /* @__PURE__ */ jsx(CheckIcon, { className: "size-3 text-ok" })
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "flex min-w-0 flex-1 flex-col gap-0.5",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cn("truncate text-(length:--cue-text-body)", run.state === "running" ? "text-fg-muted" : "text-fg"),
+						children: run.title
+					}), run.summary && /* @__PURE__ */ jsx("span", {
+						className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle truncate"),
+						children: run.summary
+					})]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: cn(mono, "text-fg-subtle shrink-0 tabular-nums"),
+					children: run.elapsed
+				})
+			]
+		}, run.id))]
+	});
+}
+//#endregion
+export { BackgroundInbox };

package/dist/elements/canvas-split.d.ts

@@ -0,0 +1,77 @@
+import { ComponentProps } from "react";
+//#region src/elements/canvas-split.d.ts
+/**
+ * The thread steps aside and the document takes the room, still being written as you
+ * read.
+ *
+ * @example
+ * import {
+ *   CanvasSplit,
+ *   CanvasSplitBody,
+ *   CanvasSplitDocument,
+ *   CanvasSplitHeader,
+ *   CanvasSplitLine,
+ *   CanvasSplitMessage,
+ *   CanvasSplitThread,
+ * } from "@cueplusplus/ui/elements";
+ *
+ * <CanvasSplit>
+ *   <CanvasSplitThread>
+ *     <CanvasSplitMessage speaker="user">Draft the note</CanvasSplitMessage>
+ *   </CanvasSplitThread>
+ *   <CanvasSplitDocument>
+ *     <CanvasSplitHeader title="note.md" version={3} saved onCopy={copy} />
+ *     <CanvasSplitBody writing>
+ *       <CanvasSplitLine heading>Migrating to 0.14</CanvasSplitLine>
+ *     </CanvasSplitBody>
+ *   </CanvasSplitDocument>
+ * </CanvasSplit>
+ */
+declare function CanvasSplit({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+/**
+ * The conversation, narrowed to a rail beside the document. It keeps scrolling while
+ * the document is written, so the turn that asked for the artifact stays in view.
+ */
+declare function CanvasSplitThread({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+/** One turn inside the rail — a filled bubble for the person, plain text for the model. */
+declare function CanvasSplitMessage({ speaker, className, ...props }: ComponentProps<"div"> & {
+  /**
+   * User turns sit right in a bubble, assistant turns run flush left. Emitted as
+   * data-speaker for styling from outside; it is deliberately not called role, so the
+   * ARIA attribute stays yours to set.
+   */
+  speaker: "user" | "assistant";
+}): import("react").JSX.Element;
+/** The document half of the split: the header, and the body under it. */
+declare function CanvasSplitDocument({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+/**
+ * What the document is, which version this is, and whether it has been written down
+ * yet — with copy and close beside them.
+ */
+declare function CanvasSplitHeader({ title, version, saved, onCopy, onClose, className, ...props }: Omit<ComponentProps<"div">, "children" | "title"> & {
+  /** Document name. */
+  title: string;
+  /** Which revision is on screen. */
+  version: number;
+  /** Swaps the status between editing and saved. */
+  saved: boolean;
+  /** Called from the copy action. Omit it and the control renders disabled. */
+  onCopy?: () => void;
+  /** Called when the canvas is dismissed. */
+  onClose?: () => void;
+}): import("react").JSX.Element;
+/**
+ * The document's text, scrolling on its own, with a caret while it is still being
+ * written.
+ */
+declare function CanvasSplitBody({ writing, className, children, ...props }: ComponentProps<"div"> & {
+  /** Trails a caret after the last line while the document is still being written. */
+  writing?: boolean;
+}): import("react").JSX.Element;
+/** One line of the document, arriving as it is written. `heading` sets it apart. */
+declare function CanvasSplitLine({ heading, className, ...props }: ComponentProps<"p"> & {
+  /** Renders the line as a heading rather than body text. */
+  heading?: boolean;
+}): import("react").JSX.Element;
+//#endregion
+export { CanvasSplit, CanvasSplitBody, CanvasSplitDocument, CanvasSplitHeader, CanvasSplitLine, CanvasSplitMessage, CanvasSplitThread };