@cueplusplus/ui 0.3.0 → 0.5.0

package/dist/elements/confidence-marker.js

@@ -0,0 +1,64 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import "./surfaces.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/elements/confidence-marker.tsx
+const UNDERLINE = {
+	grounded: "decoration-ok/50",
+	inferred: "decoration-warn/60",
+	uncertain: "decoration-danger/50 decoration-dotted"
+};
+const LABEL = {
+	grounded: "from a source",
+	inferred: "inferred",
+	uncertain: "unverified"
+};
+/**
+* Which claims came from a source, which were inferred, and which are guesses.
+*
+* @example
+* import { ConfidenceMarker } from "@cueplusplus/ui/elements";
+*
+* <ConfidenceMarker claims={claims} hoveredId={hoveredId} onHover={setHoveredId} />
+*/
+function ConfidenceMarker({ claims, hoveredId, onHover, className, ...props }) {
+	const basisId = useId();
+	const hovered = claims.find((claim) => claim.id === hoveredId);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "confidence-marker",
+		className: cn("flex w-full max-w-sm flex-col gap-2.5", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-(length:--cue-text-body) leading-relaxed",
+			children: claims.map((claim) => /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"aria-describedby": hoveredId === claim.id ? basisId : void 0,
+				onMouseEnter: () => onHover?.(claim.id),
+				onMouseLeave: () => onHover?.(""),
+				onFocus: () => onHover?.(claim.id),
+				onBlur: () => onHover?.(""),
+				className: cn("focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent inline cursor-help rounded-(--radius-control) text-start underline decoration-2 underline-offset-[3px] transition-colors outline-none", UNDERLINE[claim.confidence], hoveredId === claim.id ? "text-fg" : "text-fg-muted"),
+				children: [claim.text, " "]
+			}, claim.id))
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex h-9 items-start",
+			children: hovered && /* @__PURE__ */ jsxs("span", {
+				id: basisId,
+				role: "status",
+				className: cn("bg-surface-2 border border-border-overlay", "font-mono text-(length:--cue-text-label) tracking-tight", "cue-elements-fade-in cue-elements-zoom-in-95 cue-elements-animate-in text-fg-muted flex items-center gap-1.5 rounded-full px-2.5 py-1.5 duration-150"),
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: cn("size-1.5 rounded-full", hovered.confidence === "grounded" && "bg-ok", hovered.confidence === "inferred" && "bg-warn", hovered.confidence === "uncertain" && "bg-danger")
+					}),
+					LABEL[hovered.confidence],
+					" · ",
+					hovered.basis
+				]
+			})
+		})]
+	});
+}
+//#endregion
+export { ConfidenceMarker };

package/dist/elements/connection-state.d.ts

@@ -0,0 +1,29 @@
+import { ComponentProps } from "react";
+//#region src/elements/connection-state.d.ts
+/**
+ * Where the stream is: `online`, `dropped`, `reconnecting`, or `resumed` — the beat
+ * after a reconnect where the tokens that arrived while the socket was down are handed
+ * over. The run itself never stopped; only the transport did.
+ */
+type ConnectionPhase = "online" | "dropped" | "reconnecting" | "resumed";
+/**
+ * The socket drops, the run keeps going on the server, and the stream is picked back
+ * up.
+ *
+ * @example
+ * import { ConnectionState } from "@cueplusplus/ui/elements";
+ *
+ * <ConnectionState phase="reconnecting" attempt={2} onRetry={reconnect} />
+ */
+declare function ConnectionState({ phase, attempt, resumedTokens, onRetry, className, ...props }: Omit<ComponentProps<"div">, "children" | "phase" | "attempt" | "resumedTokens" | "onRetry"> & {
+  /** Which banner to show. online renders nothing, so the element can stay mounted. */
+  phase: ConnectionPhase;
+  /** Retry number, shown while reconnecting. */
+  attempt?: number;
+  /** How much of the stream was recovered, shown once resumed. */
+  resumedTokens?: number;
+  /** Called from the Reconnect button while dropped. */
+  onRetry?: () => void;
+}): import("react").JSX.Element | null;
+//#endregion
+export { ConnectionPhase, ConnectionState };

package/dist/elements/connection-state.js

@@ -0,0 +1,66 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { paper } from "./surfaces.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, CloudOffIcon, Loader2Icon } from "lucide-react";
+//#region src/elements/connection-state.tsx
+/**
+* The socket drops, the run keeps going on the server, and the stream is picked back
+* up.
+*
+* @example
+* import { ConnectionState } from "@cueplusplus/ui/elements";
+*
+* <ConnectionState phase="reconnecting" attempt={2} onRetry={reconnect} />
+*/
+function ConnectionState({ phase, attempt, resumedTokens, onRetry, className, ...props }) {
+	if (phase === "online") return null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "connection-state",
+		className: cn(paper, "cue-elements-fade-in cue-elements-slide-in-from-top-1 cue-elements-animate-in flex w-full max-w-sm items-center gap-2.5 rounded-(--radius-overlay) px-3.5 py-2.5 duration-300", className),
+		...props,
+		children: [
+			phase === "dropped" && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(CloudOffIcon, { className: "size-3.5 shrink-0 text-warn" }),
+				/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 text-(length:--cue-text-body)",
+					children: "Connection lost. The run kept going on the server."
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onRetry,
+					className: "text-fg-muted hover:bg-surface-2 hover:text-fg shrink-0 rounded-full px-2.5 py-1 text-(length:--cue-text-ui) font-medium transition-[background-color,color,scale] duration-150 active:scale-[0.96]",
+					children: "Reconnect"
+				})
+			] }),
+			phase === "reconnecting" && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(Loader2Icon, { className: "text-fg-subtle size-3.5 shrink-0 animate-spin motion-reduce:animate-none" }),
+				/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 text-(length:--cue-text-body)",
+					children: "Reconnecting"
+				}),
+				attempt !== void 0 && /* @__PURE__ */ jsxs("span", {
+					className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle shrink-0 tabular-nums"),
+					children: ["attempt ", attempt]
+				})
+			] }),
+			phase === "resumed" && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5 shrink-0 text-ok" }),
+				/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 text-(length:--cue-text-body)",
+					children: "Picked the stream back up."
+				}),
+				resumedTokens !== void 0 && /* @__PURE__ */ jsxs("span", {
+					className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle shrink-0 tabular-nums"),
+					children: [
+						"+",
+						resumedTokens,
+						" tokens"
+					]
+				})
+			] })
+		]
+	});
+}
+//#endregion
+export { ConnectionState };

package/dist/elements/context-breakdown.d.ts

@@ -0,0 +1,30 @@
+import { ComponentProps } from "react";
+//#region src/elements/context-breakdown.d.ts
+/** One occupant of the context window, in the bar and in the legend under it. */
+interface ContextSegment {
+  /** What this slice of the window is, shown in the legend. */
+  label: string;
+  /** Raw token count. The element formats it. */
+  tokens: number;
+  /** Background class shared by the bar slice and the legend dot, so the two always agree. */
+  tint: string;
+}
+/**
+ * Where the window actually went: prompt, tools, files, conversation, and what's left.
+ *
+ * @example
+ * import { ContextBreakdown } from "@cueplusplus/ui/elements";
+ *
+ * <ContextBreakdown segments={segments} limit={128000} />
+ */
+declare function ContextBreakdown({ segments, limit, className, ...props }: Omit<ComponentProps<"div">, "children" | "segments" | "limit"> & {
+  /** What is occupying the window, in stacking order. Headroom is derived, not passed. */
+  segments: readonly ContextSegment[];
+  /**
+   * Window size. The header turns amber once the segments pass 85 percent of it. A
+   * zero limit is treated as zero pressure rather than dividing by it.
+   */
+  limit: number;
+}): import("react").JSX.Element;
+//#endregion
+export { ContextBreakdown, ContextSegment };

package/dist/elements/context-breakdown.js

@@ -0,0 +1,86 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mono, paper } from "./surfaces.js";
+import { pct } from "./range.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/elements/context-breakdown.tsx
+const fmt = (n) => n.toLocaleString("en-US");
+/**
+* Where the window actually went: prompt, tools, files, conversation, and what's left.
+*
+* @example
+* import { ContextBreakdown } from "@cueplusplus/ui/elements";
+*
+* <ContextBreakdown segments={segments} limit={128000} />
+*/
+function ContextBreakdown({ segments, limit, className, ...props }) {
+	const used = segments.reduce((sum, segment) => sum + segment.tokens, 0);
+	const pressure = limit === 0 ? 0 : used / limit;
+	const share = (tokens) => pct(tokens, limit);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "context-breakdown",
+		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: "text-(length:--cue-text-body) font-medium",
+					children: "Context"
+				}), /* @__PURE__ */ jsxs("span", {
+					className: cn(mono, "tabular-nums", pressure > .85 ? "text-warn" : "text-fg-subtle"),
+					children: [
+						fmt(used),
+						" / ",
+						fmt(limit)
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "bg-surface-2 flex h-2 w-full overflow-hidden rounded-full",
+				children: segments.map((segment) => /* @__PURE__ */ jsx("span", {
+					className: cn("h-full transition-[width] duration-500 ease-out motion-reduce:transition-none", segment.tint),
+					style: { width: `${share(segment.tokens)}%` }
+				}, segment.label))
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1.5",
+				children: [segments.map((segment) => /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: cn("size-2 shrink-0 rounded-full", segment.tint)
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-fg-muted min-w-0 flex-1 truncate text-(length:--cue-text-body)",
+							children: segment.label
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: cn(mono, "text-fg-subtle shrink-0 tabular-nums"),
+							children: fmt(segment.tokens)
+						})
+					]
+				}, segment.label)), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: "bg-surface-2 size-2 shrink-0 rounded-full"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-fg-subtle min-w-0 flex-1 truncate text-(length:--cue-text-body)",
+							children: "Headroom"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: cn(mono, "text-fg-subtle shrink-0 tabular-nums"),
+							children: fmt(Math.max(0, limit - used))
+						})
+					]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { ContextBreakdown };

package/dist/elements/context-usage.d.ts

@@ -0,0 +1,99 @@
+import { ContextLabels } from "./vocabulary.js";
+import * as React from "react";
+//#region src/elements/context-usage.d.ts
+/**
+ * Which hue a slice of the window takes.
+ *
+ * Cursor's `data-color`, narrowed to the tokens this family paints from. It is
+ * a closed set rather than a class name because the attribute is also stamped
+ * on the DOM: `[data-color="warn"]` is reachable from a stylesheet, so a
+ * console that wants its own palette for the bar restyles it from outside
+ * instead of passing paint in.
+ */
+type ContextTone = "stream" | "ok" | "warn" | "danger" | "accent" | "neutral";
+/** One occupant of the context window: a slice of the bar and a row under it. */
+interface ContextCategory {
+  /** What this part of the window is. `CONTEXT_CATEGORY_LABELS` is the shipped set. */
+  label: string;
+  /** Raw token count. The element formats it and works out its share. */
+  tokens: number;
+  /**
+   * Which hue it takes. Omit and it takes the next one in the family's
+   * rotation, by its position in the list.
+   */
+  tone?: ContextTone;
+}
+/** One number under the bar: a token count, a limit, a cost. */
+interface ContextStat {
+  /** What it is. `CONTEXT_STAT_LABELS` is the shipped set. */
+  label: string;
+  /**
+   * The value, already formatted. The element does no currency maths and no
+   * rounding, so a meter and a billing page cannot disagree about `$3.12`.
+   */
+  value: string;
+}
+interface ContextUsageProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+  /**
+   * What is occupying the window, in the order it stacks in the bar. Headroom
+   * is derived from the limit, never passed.
+   */
+  categories: readonly ContextCategory[];
+  /**
+   * The window's size, in tokens. A limit of zero is treated as no pressure
+   * rather than divided by.
+   */
+  limit: number;
+  /**
+   * The numbers under the bar: input, output, reasoning and cache tokens, the
+   * limit, the cost. Pre-formatted, and drawn in the order given.
+   * `CONTEXT_STAT_LABELS` carries opencode's names for them.
+   */
+  stats?: readonly ContextStat[];
+  /**
+   * The meter's own six strings, merged over `CONTEXT_LABELS`: its title, the
+   * three column headings, the headroom row and the phrase after the
+   * percentage.
+   */
+  labels?: Partial<ContextLabels>;
+}
+/**
+ * Where the window went, what share each part of it took, and what that cost.
+ *
+ * A context limit tells a reader nothing they can act on. This says which four
+ * things are holding the window open, so the answer to "why did it forget the
+ * thing I said an hour ago" can be *the venue's documents are 38k of it* rather
+ * than a number going up. The bar is the shape, the table is the argument, and
+ * the stat rows underneath are what turn it from a gauge into a bill.
+ *
+ * The breakdown is a real table with real column headers, which is Claude
+ * Code's own shape and the right one: three columns of numbers whose meaning is
+ * carried by the heading above them is exactly what a `<table>` is for, and a
+ * grid of `<div>`s says none of it to a screen reader.
+ *
+ * Pressure is stated on the element as `data-pressure` — `ok`, `high` past 85
+ * per cent, `over` past the limit — and the header figure takes the warning hue
+ * with it. Past the limit the bar simply fills: there is no headroom left to
+ * draw, and a segment hanging off the end would be a picture of a number rather
+ * than of a window.
+ *
+ * @example
+ * import { ContextUsage, CONTEXT_CATEGORY_LABELS } from "@cueplusplus/ui/elements";
+ *
+ * <ContextUsage
+ *   limit={200_000}
+ *   categories={[
+ *     { label: CONTEXT_CATEGORY_LABELS.system, tokens: 11_800 },
+ *     { label: CONTEXT_CATEGORY_LABELS.tools, tokens: 38_400 },
+ *     { label: CONTEXT_CATEGORY_LABELS.assistant, tokens: 21_100 },
+ *   ]}
+ *   stats={[{ label: "Total cost", value: "$3.12" }]}
+ * />
+ * @example
+ * // Over the limit: the bar is full, the headroom row is zero, and the header
+ * // figure says so in the danger hue.
+ * <ContextUsage limit={128_000} categories={categories} />
+ */
+declare const ContextUsage: React.ForwardRefExoticComponent<ContextUsageProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ContextCategory, ContextStat, ContextTone, ContextUsage, ContextUsageProps };

package/dist/elements/context-usage.js

@@ -0,0 +1,225 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mono, paper } from "./surfaces.js";
+import { CONTEXT_LABELS } from "./vocabulary.js";
+import { pct } from "./range.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/elements/context-usage.tsx
+/** What a `tone` paints, in the bar and in the swatch beside its row. */
+const TONE_FILL = {
+	stream: "bg-stream/70",
+	ok: "bg-ok/60",
+	warn: "bg-warn/60",
+	danger: "bg-danger/60",
+	accent: "bg-accent/60",
+	neutral: "bg-fg/25"
+};
+/**
+* The rotation a category takes when it does not name a tone.
+*
+* Five categories is opencode's whole breakdown, and a caller who has to pick
+* five colours to see a bar at all will pick five that fight. The order is the
+* family's usual reading: what is live, what is settled, what is heavy.
+*/
+const TONE_ROTATION = [
+	"stream",
+	"ok",
+	"warn",
+	"accent",
+	"neutral"
+];
+/** Counts, the way a window's own numbers are written: `24,300`. */
+const fmt = (value) => Math.max(0, Math.round(value)).toLocaleString("en-US");
+/** A share as a meter says it: whole percents, and `<1%` for the ones that round to nothing. */
+function share(tokens, limit) {
+	const value = pct(tokens, limit);
+	if (value > 0 && value < 1) return "<1%";
+	return `${Math.round(value)}%`;
+}
+/**
+* Where the window went, what share each part of it took, and what that cost.
+*
+* A context limit tells a reader nothing they can act on. This says which four
+* things are holding the window open, so the answer to "why did it forget the
+* thing I said an hour ago" can be *the venue's documents are 38k of it* rather
+* than a number going up. The bar is the shape, the table is the argument, and
+* the stat rows underneath are what turn it from a gauge into a bill.
+*
+* The breakdown is a real table with real column headers, which is Claude
+* Code's own shape and the right one: three columns of numbers whose meaning is
+* carried by the heading above them is exactly what a `<table>` is for, and a
+* grid of `<div>`s says none of it to a screen reader.
+*
+* Pressure is stated on the element as `data-pressure` — `ok`, `high` past 85
+* per cent, `over` past the limit — and the header figure takes the warning hue
+* with it. Past the limit the bar simply fills: there is no headroom left to
+* draw, and a segment hanging off the end would be a picture of a number rather
+* than of a window.
+*
+* @example
+* import { ContextUsage, CONTEXT_CATEGORY_LABELS } from "@cueplusplus/ui/elements";
+*
+* <ContextUsage
+*   limit={200_000}
+*   categories={[
+*     { label: CONTEXT_CATEGORY_LABELS.system, tokens: 11_800 },
+*     { label: CONTEXT_CATEGORY_LABELS.tools, tokens: 38_400 },
+*     { label: CONTEXT_CATEGORY_LABELS.assistant, tokens: 21_100 },
+*   ]}
+*   stats={[{ label: "Total cost", value: "$3.12" }]}
+* />
+* @example
+* // Over the limit: the bar is full, the headroom row is zero, and the header
+* // figure says so in the danger hue.
+* <ContextUsage limit={128_000} categories={categories} />
+*/
+const ContextUsage = React.forwardRef(function ContextUsage({ categories, limit, stats, labels, className, ...elementProps }, ref) {
+	const copy = {
+		...CONTEXT_LABELS,
+		...labels
+	};
+	const used = categories.reduce((sum, category) => sum + Math.max(0, category.tokens), 0);
+	const ratio = limit > 0 ? used / limit : 0;
+	const pressure = ratio > 1 ? "over" : ratio >= .85 ? "high" : "ok";
+	const headroom = Math.max(0, limit - used);
+	const rows = categories.map((category, index) => ({
+		category,
+		tone: category.tone ?? TONE_ROTATION[index % TONE_ROTATION.length]
+	}));
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "context-usage",
+		"data-pressure": pressure,
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-3 rounded-(--radius-overlay) p-4", className),
+		...elementProps,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-baseline justify-between gap-2",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "flex min-w-0 flex-col",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-(length:--cue-text-body) font-medium",
+						children: copy.title
+					}), /* @__PURE__ */ jsxs("span", {
+						className: cn(mono, "text-fg-subtle truncate tabular-nums"),
+						children: [
+							share(used, limit),
+							" ",
+							copy.used
+						]
+					})]
+				}), /* @__PURE__ */ jsxs("span", {
+					className: cn(mono, "shrink-0 tabular-nums", pressure === "over" ? "text-danger" : pressure === "high" ? "text-warn" : "text-fg-subtle"),
+					children: [
+						fmt(used),
+						" / ",
+						fmt(limit)
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: "bg-surface-2 flex h-2 w-full overflow-hidden rounded-full",
+				children: rows.map(({ category, tone }) => /* @__PURE__ */ jsx("span", {
+					"data-slot": "context-usage-segment",
+					"data-color": tone,
+					className: cn("h-full transition-[width] duration-500 ease-out motion-reduce:transition-none", TONE_FILL[tone]),
+					style: { width: `${pct(category.tokens, limit)}%` }
+				}, category.label))
+			}),
+			/* @__PURE__ */ jsxs("table", {
+				"data-slot": "context-usage-breakdown",
+				className: "w-full border-collapse",
+				children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
+					className: cn(mono, "text-fg-subtle uppercase"),
+					children: [
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							className: "pb-1 text-start font-normal tracking-[0.12em]",
+							children: copy.category
+						}),
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							className: "pb-1 text-end font-normal tracking-[0.12em]",
+							children: copy.tokens
+						}),
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							className: "pb-1 text-end font-normal tracking-[0.12em]",
+							children: copy.usage
+						})
+					]
+				}) }), /* @__PURE__ */ jsxs("tbody", {
+					className: "text-(length:--cue-text-body)",
+					children: [rows.map(({ category, tone }) => /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("th", {
+							scope: "row",
+							className: "py-0.5 text-start font-normal",
+							children: /* @__PURE__ */ jsxs("span", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ jsx("span", {
+									"aria-hidden": true,
+									className: cn("size-2 shrink-0 rounded-full", TONE_FILL[tone])
+								}), /* @__PURE__ */ jsx("span", {
+									className: "text-fg-muted min-w-0 truncate",
+									children: category.label
+								})]
+							})
+						}),
+						/* @__PURE__ */ jsx("td", {
+							className: cn(mono, "text-fg-subtle py-0.5 text-end tabular-nums"),
+							children: fmt(category.tokens)
+						}),
+						/* @__PURE__ */ jsx("td", {
+							className: cn(mono, "text-fg-subtle py-0.5 text-end tabular-nums"),
+							children: share(category.tokens, limit)
+						})
+					] }, category.label)), /* @__PURE__ */ jsxs("tr", {
+						"data-slot": "context-usage-headroom",
+						children: [
+							/* @__PURE__ */ jsx("th", {
+								scope: "row",
+								className: "py-0.5 text-start font-normal",
+								children: /* @__PURE__ */ jsxs("span", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ jsx("span", {
+										"aria-hidden": true,
+										className: "bg-surface-2 size-2 shrink-0 rounded-full"
+									}), /* @__PURE__ */ jsx("span", {
+										className: "text-fg-subtle min-w-0 truncate",
+										children: copy.headroom
+									})]
+								})
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: cn(mono, "text-fg-subtle py-0.5 text-end tabular-nums"),
+								children: fmt(headroom)
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: cn(mono, "text-fg-subtle py-0.5 text-end tabular-nums"),
+								children: share(headroom, limit)
+							})
+						]
+					})]
+				})]
+			}),
+			stats === void 0 || stats.length === 0 ? null : /* @__PURE__ */ jsx("dl", {
+				"data-slot": "context-usage-stats",
+				className: "border-border flex flex-col gap-1 border-t pt-3",
+				children: stats.map((stat) => /* @__PURE__ */ jsxs("div", {
+					className: "flex items-baseline justify-between gap-2",
+					children: [/* @__PURE__ */ jsx("dt", {
+						className: "text-fg-muted min-w-0 truncate text-(length:--cue-text-body)",
+						children: stat.label
+					}), /* @__PURE__ */ jsx("dd", {
+						className: cn(mono, "text-fg-subtle shrink-0 tabular-nums"),
+						children: stat.value
+					})]
+				}, stat.label))
+			})
+		]
+	});
+});
+//#endregion
+export { ContextUsage };

package/dist/elements/conversation-search.d.ts

@@ -0,0 +1,48 @@
+import { ComponentProps } from "react";
+//#region src/elements/conversation-search.d.ts
+interface SearchHit {
+  /** Stable identity for the rail mark. */
+  id: string;
+  /** Text preceding the match, for the preview. */
+  before: string;
+  /** The matched run, highlighted between before and after. */
+  match: string;
+  /** Text following the match. */
+  after: string;
+  /** Where the hit sits in the thread, as a percentage. Drives the scrollbar marks. */
+  position: number;
+}
+/**
+ * Find inside a long thread, with every hit marked down the scrollbar.
+ *
+ * @example
+ * import { ConversationSearch } from "@cueplusplus/ui/elements";
+ *
+ * <ConversationSearch
+ *   query={query}
+ *   hits={hits}
+ *   activeIndex={0}
+ *   onQueryChange={setQuery}
+ *   onStep={step}
+ * />
+ */
+declare function ConversationSearch({ query, hits, activeIndex, onQueryChange, onStep, className, ...props }: Omit<ComponentProps<"div">, "children" | "query" | "hits" | "activeIndex" | "onQueryChange" | "onStep"> & {
+  /** Current search text. */
+  query: string;
+  /**
+   * Matches in document order. Each carries its own surrounding text so no lookup is
+   * needed to render the preview.
+   */
+  hits: readonly SearchHit[];
+  /**
+   * Which hit is current, in both the counter and the rail. Clamped to the current hit
+   * set, so narrowing the results cannot strand it out of range.
+   */
+  activeIndex: number;
+  /** Called as the search is typed. */
+  onQueryChange?: (query: string) => void;
+  /** Called with -1 or 1 to walk the matches. Wrap the index yourself. */
+  onStep?: (delta: number) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { ConversationSearch, SearchHit };