@cueplusplus/ui 0.13.0

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

package/dist/elements/command-palette.d.ts

@@ -0,0 +1,48 @@
+import { ComponentProps } from "react";
+//#region src/elements/command-palette.d.ts
+interface PaletteCommand {
+  /** Stable identity, compared against activeId and reported by onRun. */
+  id: string;
+  /** Command text, and the field the query filters on. */
+  label: string;
+  /** Heading the command sits under. */
+  group: string;
+  /** Shortcut, one chip per key. */
+  keys: readonly string[];
+}
+/**
+ * Everything the app can do, one keystroke away and grouped by where it acts.
+ *
+ * @example
+ * import { CommandPalette } from "@cueplusplus/ui/elements";
+ *
+ * <CommandPalette
+ *   commands={commands}
+ *   query={query}
+ *   activeId={activeId}
+ *   onQueryChange={setQuery}
+ *   onRun={run}
+ * />
+ */
+declare function ElementsCommandPalette({ commands, query, activeId, onQueryChange, onActiveChange, onRun, className, ...props }: Omit<ComponentProps<"div">, "children" | "commands" | "query" | "activeId" | "onQueryChange" | "onActiveChange" | "onRun"> & {
+  /** Everything runnable. Groups are derived from the entries and keep first-seen order. */
+  commands: readonly PaletteCommand[];
+  /** Current filter text. */
+  query: string;
+  /**
+   * Which row is highlighted. Arrow keys move it and Enter runs it, both handled by
+   * the element; it reports the move through onActiveChange.
+   */
+  activeId: string;
+  /** Called as the filter is typed. */
+  onQueryChange?: (query: string) => void;
+  /**
+   * Called as the arrow keys walk the list. The element owns the key handling and
+   * reports where it landed, so activeId stays yours to hold.
+   */
+  onActiveChange?: (id: string) => void;
+  /** Called when a command is chosen. */
+  onRun?: (id: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { ElementsCommandPalette, PaletteCommand };

package/dist/elements/command-palette.js

@@ -0,0 +1,129 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { field, floating, mono } from "./surfaces.js";
+import { useEffect, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SearchIcon } from "lucide-react";
+//#region src/elements/command-palette.tsx
+/**
+* Everything the app can do, one keystroke away and grouped by where it acts.
+*
+* @example
+* import { CommandPalette } from "@cueplusplus/ui/elements";
+*
+* <CommandPalette
+*   commands={commands}
+*   query={query}
+*   activeId={activeId}
+*   onQueryChange={setQuery}
+*   onRun={run}
+* />
+*/
+function ElementsCommandPalette({ commands, query, activeId, onQueryChange, onActiveChange, onRun, className, ...props }) {
+	const listId = useId();
+	const optionId = (id) => `${listId}-${id}`;
+	const matches = commands.filter((command) => command.label.toLowerCase().includes(query.toLowerCase()));
+	const groups = [...new Set(matches.map((command) => command.group))];
+	const ordered = groups.flatMap((group) => matches.filter((command) => command.group === group));
+	const move = (delta) => {
+		if (ordered.length === 0) return;
+		const at = ordered.findIndex((command) => command.id === activeId);
+		const next = ordered[((at === -1 ? delta > 0 ? -1 : 0 : at) + delta + ordered.length) % ordered.length];
+		if (next) onActiveChange?.(next.id);
+	};
+	useEffect(() => {
+		document.getElementById(`${listId}-${activeId}`)?.scrollIntoView({ block: "nearest" });
+	}, [activeId, listId]);
+	const onKeyDown = (event) => {
+		if (event.nativeEvent.isComposing) return;
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			move(1);
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault();
+			move(-1);
+		} else if (event.key === "Enter") {
+			event.preventDefault();
+			const active = ordered.find((command) => command.id === activeId);
+			if (active) onRun?.(active.id);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "command-palette",
+		className: cn(floating, "flex w-full max-w-sm flex-col overflow-hidden rounded-(--radius-overlay)", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2.5 px-3.5 py-3",
+				children: [
+					/* @__PURE__ */ jsx(SearchIcon, { className: "text-fg-subtle size-3.5 shrink-0" }),
+					/* @__PURE__ */ jsx("input", {
+						value: query,
+						onChange: (event) => onQueryChange?.(event.target.value),
+						onKeyDown,
+						placeholder: "Type a command",
+						"aria-label": "Type a command",
+						role: "combobox",
+						"aria-expanded": ordered.length > 0,
+						"aria-controls": listId,
+						"aria-autocomplete": "list",
+						"aria-activedescendant": ordered.some((command) => command.id === activeId) ? optionId(activeId) : void 0,
+						className: "text-fg-muted placeholder:text-fg-subtle min-w-0 flex-1 bg-transparent text-(length:--cue-text-body) outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: cn(field, mono, "text-fg-subtle rounded-(--radius-control) px-1.5 py-0.5"),
+						children: "esc"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				id: listId,
+				role: "listbox",
+				"aria-label": "Commands",
+				className: "border-border flex max-h-72 flex-col overflow-y-auto border-t p-1.5",
+				children: groups.map((group) => /* @__PURE__ */ jsxs("div", {
+					role: "group",
+					"aria-label": group,
+					className: "flex flex-col",
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: cn(mono, "text-fg-subtle px-2 pt-2 pb-1"),
+						children: group
+					}), matches.filter((command) => command.group === group).map((command) => /* @__PURE__ */ jsxs("button", {
+						id: optionId(command.id),
+						type: "button",
+						role: "option",
+						tabIndex: -1,
+						"aria-selected": command.id === activeId,
+						onMouseDown: (event) => event.preventDefault(),
+						onClick: () => onRun?.(command.id),
+						className: cn("flex items-center gap-2 rounded-(--radius-surface) px-2 py-1.5 text-start transition-colors", command.id === activeId ? "bg-surface-2" : "hover:bg-surface-1"),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "min-w-0 flex-1 truncate text-(length:--cue-text-body)",
+							children: command.label
+						}), /* @__PURE__ */ jsx("span", {
+							className: "flex shrink-0 gap-1",
+							children: command.keys.map((key) => /* @__PURE__ */ jsx("span", {
+								className: cn(field, mono, "text-fg-subtle rounded-(--radius-control) px-1.5 py-0.5"),
+								children: key
+							}, key))
+						})]
+					}, command.id))]
+				}, group))
+			}),
+			matches.length === 0 && /* @__PURE__ */ jsx("div", {
+				className: "border-border border-t p-1.5",
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "text-fg-subtle block px-2 py-4 text-center text-(length:--cue-text-ui) break-words",
+					children: [
+						"No command matches “",
+						query,
+						"”"
+					]
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { ElementsCommandPalette };

package/dist/elements/compaction-row.d.ts

@@ -0,0 +1,63 @@
+import { CompactionState } from "./vocabulary.js";
+import * as React from "react";
+//#region src/elements/compaction-row.d.ts
+interface CompactionRowProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+  /** Where the compaction got to. See `COMPACTION_STATES`. */
+  state: CompactionState;
+  /** Tokens in the window before it ran. */
+  tokensBefore?: number;
+  /** Tokens after. Omit while it is running, or when it did not finish. */
+  tokensAfter?: number;
+  /** Messages in the window before it ran. */
+  messagesBefore?: number;
+  /** Messages after. Omit while it is running, or when it did not finish. */
+  messagesAfter?: number;
+  /**
+   * What the rule says, replacing the one `COMPACTION_LABELS` supplies for this
+   * state.
+   */
+  label?: string;
+  /**
+   * Why, for the two states that owe an answer: `context window still under
+   * 60%`, `the summariser refused`. Roo's rule — a compaction that did not
+   * happen, or that lost something, should say so in words rather than leave a
+   * reader to infer it from a number that did not move.
+   */
+  reason?: string;
+}
+/**
+ * The rule that says the conversation was compacted, and by how much.
+ *
+ * A `role="separator"` like {@link TimeBoundary}, because that is what it is:
+ * the transcript above it is not the transcript below it any more. What makes
+ * it worth a component rather than a line of prose is the pair of numbers —
+ * before and after, on both axes — since "compacted" alone tells a reader
+ * nothing they can act on, while `128k → 24k tokens · 214 → 31 messages` tells
+ * them why the model stopped remembering the thing they mentioned an hour ago.
+ *
+ * Five states, which is two more than most implementations have and exactly the
+ * two that matter: a compaction that **failed** leaves the window full, and one
+ * that was **skipped** leaves it full on purpose. Both are the states a reader
+ * meets when something is about to go wrong, and both are the states a UI that
+ * only draws the happy path renders as nothing at all.
+ *
+ * The numbers render as far as they are known. While `started`, pass the before
+ * figures and no after ones and the row reads `128k tokens · 214 messages`; the
+ * arrows arrive with the answer.
+ *
+ * @example
+ * import { CompactionRow } from "@cueplusplus/ui/elements";
+ *
+ * <CompactionRow
+ *   state="completed"
+ *   tokensBefore={128_000}
+ *   tokensAfter={24_000}
+ *   messagesBefore={214}
+ *   messagesAfter={31}
+ * />
+ * @example
+ * <CompactionRow state="skipped" reason="context window still under 60%" />
+ */
+declare const CompactionRow: React.ForwardRefExoticComponent<CompactionRowProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CompactionRow, CompactionRowProps };