@cueplusplus/ui 0.3.0 → 0.6.0

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 };

package/dist/elements/canvas-split.js

@@ -0,0 +1,138 @@
+"use client";
+import { cn } from "../lib/cn.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/elements/canvas-split.tsx
+/**
+* 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>
+*/
+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-(--radius-overlay) md:h-80 md:flex-row", className),
+		...props
+	});
+}
+/**
+* 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.
+*/
+function CanvasSplitThread({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "canvas-split-thread",
+		className: cn("border-border 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
+	});
+}
+/** One turn inside the rail — a filled bubble for the person, plain text for the model. */
+function CanvasSplitMessage({ speaker, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "canvas-split-message",
+		"data-speaker": speaker,
+		className: cn("cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both text-(length:--cue-text-body) leading-relaxed duration-300", speaker === "user" ? cn(field, "text-fg-muted ms-auto rounded-(--radius-overlay) px-3 py-2") : "text-fg-muted", className),
+		...props
+	});
+}
+/** The document half of the split: the header, and the body under it. */
+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
+	});
+}
+/**
+* What the document is, which version this is, and whether it has been written down
+* yet — with copy and close beside them.
+*/
+function CanvasSplitHeader({ title, version, saved, onCopy, onClose, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "canvas-split-header",
+		className: cn("border-border flex items-center gap-2 border-b px-3.5 py-2.5", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(FileTextIcon, { className: "text-fg-subtle size-3.5 shrink-0" }),
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate text-(length:--cue-text-body) font-medium",
+				children: title
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: cn(mono, "text-fg-subtle shrink-0"),
+				children: ["v", version]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cn(mono, "shrink-0 transition-colors duration-300", saved ? "text-ok" : "text-fg-subtle"),
+				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" })
+			})
+		]
+	});
+}
+/**
+* The document's text, scrolling on its own, with a caret while it is still being
+* written.
+*/
+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-accent h-[1.05em] w-[2px] animate-pulse rounded-full motion-reduce:animate-none"
+		})]
+	});
+}
+/** One line of the document, arriving as it is written. `heading` sets it apart. */
+function CanvasSplitLine({ heading, className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "canvas-split-line",
+		className: cn("cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both text-(length:--cue-text-body) leading-relaxed duration-300", heading ? "text-fg font-medium" : "text-fg-muted", className),
+		...props
+	});
+}
+//#endregion
+export { CanvasSplit, CanvasSplitBody, CanvasSplitDocument, CanvasSplitHeader, CanvasSplitLine, CanvasSplitMessage, CanvasSplitThread };

package/dist/elements/chart.d.ts

@@ -0,0 +1,41 @@
+import { ComponentProps } from "react";
+//#region src/elements/chart.d.ts
+/**
+ * How the series is drawn: a filled `area`, a bare `line`, or `bars`. All three share
+ * one geometry and one scale — the variant only changes the marks.
+ */
+type ChartVariant = "area" | "line" | "bars";
+/**
+ * Area, line, and bars, with points landing one at a time as the series streams in.
+ *
+ * @example
+ * import { Chart } from "@cueplusplus/ui/elements";
+ *
+ * <Chart
+ *   label="Runs this week"
+ *   value="92"
+ *   delta="+34%"
+ *   points={points}
+ *   visibleCount={points.length}
+ *   variant="area"
+ * />
+ */
+declare function Chart({ label, value, delta, points, visibleCount, variant, className, ...props }: Omit<ComponentProps<"div">, "children" | "label" | "value" | "delta" | "points" | "visibleCount" | "variant"> & {
+  /** What the series measures. */
+  label: string;
+  /** The headline figure, pre-formatted. The chart never formats numbers itself. */
+  value: string;
+  /** Change against the previous window. Renders green unless it starts with a minus sign. */
+  delta?: string;
+  /**
+   * The full series. The scale is computed from all of it, so the axis does not jump
+   * while streaming.
+   */
+  points: readonly number[];
+  /** How many points have arrived. */
+  visibleCount: number;
+  /** Mark type. The last point stays emphasized in all three. */
+  variant?: ChartVariant;
+}): import("react").JSX.Element;
+//#endregion
+export { Chart, ChartVariant };

package/dist/elements/chart.js

@@ -0,0 +1,117 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mono, paper } from "./surfaces.js";
+import { clamp, take } from "./range.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/elements/chart.tsx
+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;
+};
+/**
+* Area, line, and bars, with points landing one at a time as the series streams in.
+*
+* @example
+* import { Chart } from "@cueplusplus/ui/elements";
+*
+* <Chart
+*   label="Runs this week"
+*   value="92"
+*   delta="+34%"
+*   points={points}
+*   visibleCount={points.length}
+*   variant="area"
+* />
+*/
+function Chart({ label, value, delta, points, visibleCount, variant = "area", 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 falling = delta !== void 0 && /^\s*[-−–]/.test(delta);
+	const rising = delta !== void 0 && !falling;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "chart",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-3 rounded-(--radius-overlay) p-4", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-baseline justify-between",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn(mono, "text-fg-subtle"),
+					children: label
+				}), delta !== void 0 && /* @__PURE__ */ jsx("span", {
+					className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "tabular-nums", rising ? "text-ok" : "text-danger"),
+					children: delta
+				})]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-(length:--cue-text-title) 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-fg-subtle",
+					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("cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both duration-300", i === lastIndex ? "fill-stream" : "fill-fg-subtle"),
+						style: { animationDelay: `${i * 40}ms` }
+					}, i);
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+					variant === "area" && shown.length > 1 && /* @__PURE__ */ jsx("path", {
+						d: area,
+						className: "fill-stream/15"
+					}),
+					/* @__PURE__ */ jsx("polyline", {
+						points: line,
+						fill: "none",
+						strokeWidth: "1.75",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						vectorEffect: "non-scaling-stroke",
+						className: "stroke-stream"
+					}),
+					last && /* @__PURE__ */ jsx("circle", {
+						cx: last.x,
+						cy: last.y,
+						r: "3",
+						className: "fill-stream"
+					})
+				] })]
+			})
+		]
+	});
+}
+//#endregion
+export { Chart };

package/dist/elements/chat-panel.d.ts

@@ -0,0 +1,46 @@
+import { ComponentProps } from "react";
+//#region src/elements/chat-panel.d.ts
+/**
+ * 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>
+ */
+declare function ChatPanel({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+/**
+ * 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.
+ */
+declare function ChatPanelMessages({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+/** One message from the person, drawn as a filled bubble on the trailing edge. */
+declare function ChatPanelUserMessage({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+/** One message from the model: plain text on the leading edge, no bubble. */
+declare function ChatPanelAssistantMessage({ className, ...props }: ComponentProps<"p">): import("react").JSX.Element;
+/** The three-dot rest state, for the gap between sending and the first token. */
+declare function ChatPanelTyping({ className, ...props }: Omit<ComponentProps<"div">, "children">): import("react").JSX.Element;
+/**
+ * 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.
+ */
+declare function ChatPanelComposer({ placeholder, onSend, className, ...props }: Omit<ComponentProps<"div">, "children" | "placeholder"> & {
+  /** Resting text in the input bar. */
+  placeholder: string;
+  /** Called from the send control. Omit it and the control renders disabled. */
+  onSend?: () => void;
+}): import("react").JSX.Element;
+//#endregion
+export { ChatPanel, ChatPanelAssistantMessage, ChatPanelComposer, ChatPanelMessages, ChatPanelTyping, ChatPanelUserMessage };