@cueplusplus/ui 0.13.0

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-(--cue-leading-ui) 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-(--cue-leading-ui) 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 };

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-(--cue-leading-ui)", 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 };