@cueplusplus/ui 0.2.0 → 0.5.0

package/dist/elements/replay.js

@@ -0,0 +1,498 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Chip } from "../primitives/chip.js";
+import { IconButton } from "../primitives/icon-button.js";
+import { Slider } from "../forms/slider.js";
+import { usePrefersReducedMotion } from "../instruments/_motion.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/elements/replay.tsx
+/** Every state, in the order a run normally passes through them. */
+const REPLAY_STATES = [
+	"queued",
+	"thinking",
+	"tool-call",
+	"awaiting-approval",
+	"streaming",
+	"cancelled",
+	"done"
+];
+/**
+* The slowest and fastest the transport will run.
+*
+* A rate of zero is a paused player that still burns a frame callback, and a
+* negative one is a question nobody asked; both are clamped rather than
+* rejected, because a rate arrives from a control, not from a contract.
+*/
+const MIN_RATE = .1;
+const MAX_RATE = 8;
+/** The rates the player's rate control cycles through when it is not given a list. */
+const DEFAULT_RATES = [
+	1,
+	2,
+	4,
+	.5
+];
+/**
+* One reading of the monotonic clock.
+*
+* `performance.now()` rather than `Date.now()`: it is monotonic by
+* specification, it does not jump when the system clock is corrected, and it is
+* what a media transport is measured against everywhere else. `Date.now()` is
+* the fallback for a runtime without it, which in practice means an old
+* non-browser environment — a server render never reaches this code at all.
+*/
+function now() {
+	return typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
+}
+/** Where each frame starts on the script's own clock, in milliseconds. */
+function startsOf(frames) {
+	const starts = [];
+	let at = 0;
+	for (const frame of frames) {
+		starts.push(at);
+		at += Math.max(0, frame.hold);
+	}
+	return starts;
+}
+/**
+* The last frame whose start has passed — binary search over the offsets.
+*
+* "Last" rather than "the one whose span contains it" is what makes a
+* zero-hold frame legal: playback steps straight over it while a scrub and a
+* step can still land on it.
+*/
+function frameAt(starts, elapsed) {
+	let low = 0;
+	let high = starts.length - 1;
+	while (low < high) {
+		const middle = low + high + 1 >> 1;
+		if (starts[middle] <= elapsed) low = middle;
+		else high = middle - 1;
+	}
+	return Math.max(0, low);
+}
+/** Clamp an index into a script that may be empty. */
+function clamp(value, last) {
+	if (!Number.isFinite(value)) return 0;
+	return Math.min(Math.max(Math.round(value), 0), Math.max(0, last));
+}
+/**
+* A filmstrip, a clock and a set of controls — without the controls.
+*
+* This is {@link ReplayPlayer} with its chrome removed, for a page that wants
+* to draw its own transport (a state timeline, a keyboard shortcut, a play
+* button somewhere else on the page) or to render the scene itself rather than
+* from `frame.scene`.
+*
+* **One clock, not a chain of timeouts.** Every existing player in this
+* repository schedules the next frame with `setTimeout(step, hold)`, which
+* makes pause impossible: the time already spent inside the in-flight timeout
+* is unrecoverable, so a resume can only start the hold again. Here the
+* playhead is a number of *script* milliseconds and wall time reaches it
+* through one origin — `base + (now() - origin) * rate` — so pausing is
+* "write down the playhead", resuming is "take a new origin", and the unspent
+* 380 ms of a 400 ms hold is still 380 ms on the other side of the pause. The
+* same identity is what makes the rate multiplier exact rather than
+* approximate, and what makes a seek and a play land on the same frame.
+*
+* **Reduced motion is a mode, not a fallback.** Under
+* `prefers-reduced-motion: reduce` no frame is ever scheduled — not scheduled
+* and hidden, not scheduled at speed, not scheduled at all — and the transport
+* opens on the resting frame instead. Every control except play and rate keeps
+* working, so a reader who has asked for stillness can still step through the
+* run one frame at a time and read every state it passes through. That is
+* strictly more than the two older players in this library offer, which show
+* the end and stop.
+*
+* @example
+* const { frame, index, playing, toggle, seek } = useReplay(SCRIPT);
+* return <Thread messages={MESSAGES[index]!} onClick={toggle} />;
+* @example
+* // Deep-linked at a frame, paused, and half speed.
+* const replay = useReplay(SCRIPT, { startAt: 17, autoPlay: false, rate: 0.5 });
+*/
+function useReplay(script, options = {}) {
+	const { autoPlay = true, startAt, rate: initialRate = 1 } = options;
+	const { frames } = script;
+	const count = frames.length;
+	const last = count - 1;
+	const starts = React.useMemo(() => startsOf(frames), [frames]);
+	const duration = starts[Math.max(0, last)] ?? 0;
+	const reduced = usePrefersReducedMotion();
+	const seat = clamp(startAt ?? 0, last);
+	const playable = count > 1 && duration > 0;
+	const [index, setIndex] = React.useState(() => seat);
+	const [playing, setPlaying] = React.useState(() => autoPlay && playable);
+	const [rate, setRateState] = React.useState(() => Math.min(MAX_RATE, Math.max(MIN_RATE, initialRate)));
+	const clock = React.useRef({
+		base: starts[seat] ?? 0,
+		origin: 0,
+		rate,
+		running: autoPlay && playable
+	});
+	/** The playhead right now, whether or not the clock is running. */
+	const elapsed = React.useCallback(() => {
+		const state = clock.current;
+		if (!state.running) return state.base;
+		return Math.min(duration, state.base + (now() - state.origin) * state.rate);
+	}, [duration]);
+	const seek = React.useCallback((to) => {
+		const next = clamp(to, last);
+		clock.current.base = starts[next] ?? 0;
+		clock.current.origin = now();
+		setIndex(next);
+	}, [last, starts]);
+	const pause = React.useCallback(() => {
+		const state = clock.current;
+		if (!state.running) return;
+		state.base = elapsed();
+		state.running = false;
+		setPlaying(false);
+	}, [elapsed]);
+	const play = React.useCallback(() => {
+		const state = clock.current;
+		if (state.running || !playable) return;
+		if (state.base >= duration) {
+			state.base = 0;
+			setIndex(0);
+		}
+		state.origin = now();
+		state.running = true;
+		setPlaying(true);
+	}, [duration, playable]);
+	const step = React.useCallback((delta = 1) => {
+		pause();
+		seek(index + delta);
+	}, [
+		index,
+		pause,
+		seek
+	]);
+	const restart = React.useCallback(() => {
+		seek(0);
+		if (!reduced && playable) {
+			clock.current.origin = now();
+			clock.current.running = true;
+			setPlaying(true);
+		}
+	}, [
+		playable,
+		reduced,
+		seek
+	]);
+	const setRate = React.useCallback((next) => {
+		const state = clock.current;
+		const clamped = Math.min(MAX_RATE, Math.max(MIN_RATE, next));
+		state.base = elapsed();
+		state.origin = now();
+		state.rate = clamped;
+		setRateState(clamped);
+	}, [elapsed]);
+	const toggle = React.useCallback(() => {
+		if (clock.current.running) pause();
+		else play();
+	}, [pause, play]);
+	const prior = React.useRef({
+		script,
+		seat
+	});
+	React.useEffect(() => {
+		if (prior.current.script === script && prior.current.seat === seat) return;
+		const fresh = prior.current.script !== script;
+		prior.current = {
+			script,
+			seat
+		};
+		const next = fresh && reduced && startAt === void 0 ? Math.max(0, last) : clamp(seat, last);
+		clock.current.base = (fresh && reduced && startAt === void 0 ? duration : starts[next]) ?? 0;
+		clock.current.origin = now();
+		setIndex(next);
+		if (fresh) {
+			const running = autoPlay && playable && !reduced;
+			clock.current.running = running;
+			setPlaying(running);
+		}
+	}, [
+		autoPlay,
+		duration,
+		last,
+		playable,
+		reduced,
+		script,
+		seat,
+		starts,
+		startAt
+	]);
+	React.useEffect(() => {
+		if (!reduced) return;
+		clock.current.running = false;
+		setPlaying(false);
+		if (startAt === void 0 && count > 0) {
+			clock.current.base = duration;
+			setIndex(count - 1);
+		}
+	}, [
+		count,
+		duration,
+		reduced,
+		startAt
+	]);
+	React.useEffect(() => {
+		if (!playing || reduced || duration <= 0) return;
+		if (typeof requestAnimationFrame !== "function") return;
+		clock.current.origin = now();
+		let frameId = requestAnimationFrame(function tick() {
+			const at = clock.current.base + (now() - clock.current.origin) * clock.current.rate;
+			if (at >= duration) {
+				clock.current.base = duration;
+				clock.current.running = false;
+				setIndex(Math.max(0, last));
+				setPlaying(false);
+				return;
+			}
+			setIndex(frameAt(starts, at));
+			frameId = requestAnimationFrame(tick);
+		});
+		return () => cancelAnimationFrame(frameId);
+	}, [
+		duration,
+		last,
+		playing,
+		reduced,
+		starts
+	]);
+	const frame = frames[index];
+	return {
+		frame,
+		index,
+		count,
+		duration,
+		state: frame?.label ?? "queued",
+		playing,
+		reduced,
+		rate,
+		play,
+		pause,
+		toggle,
+		step,
+		seek,
+		restart,
+		setRate
+	};
+}
+/**
+* The five transport glyphs, drawn here.
+*
+* `lucide-react` is an optional peer of `./elements` and this subpath has none
+* at all: a player is chrome, and chrome that drags an icon set in behind it is
+* a dependency nobody chose. Five paths at 16px cost less than the import line.
+*/
+function Glyph({ children, ...props }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.4",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children
+	});
+}
+const PlayGlyph = (props) => /* @__PURE__ */ jsx(Glyph, {
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M5 3.2 12.6 8 5 12.8Z",
+		fill: "currentColor",
+		stroke: "none"
+	})
+});
+const PauseGlyph = (props) => /* @__PURE__ */ jsx(Glyph, {
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M5.5 3.5v9M10.5 3.5v9" })
+});
+const StepBackGlyph = (props) => /* @__PURE__ */ jsxs(Glyph, {
+	...props,
+	children: [/* @__PURE__ */ jsx("path", { d: "M4 3.5v9" }), /* @__PURE__ */ jsx("path", {
+		d: "M12 3.7 5.8 8 12 12.3Z",
+		fill: "currentColor",
+		stroke: "none"
+	})]
+});
+const StepForwardGlyph = (props) => /* @__PURE__ */ jsxs(Glyph, {
+	...props,
+	children: [/* @__PURE__ */ jsx("path", { d: "M12 3.5v9" }), /* @__PURE__ */ jsx("path", {
+		d: "M4 3.7 10.2 8 4 12.3Z",
+		fill: "currentColor",
+		stroke: "none"
+	})]
+});
+const RestartGlyph = (props) => /* @__PURE__ */ jsxs(Glyph, {
+	...props,
+	children: [/* @__PURE__ */ jsx("path", { d: "M13 8a5 5 0 1 1-1.6-3.7" }), /* @__PURE__ */ jsx("path", { d: "M13 2.6V5.4h-2.8" })]
+});
+/**
+* The tone each state speaks in.
+*
+* Six of the seven take a tone from the shared status vocabulary, so a replay
+* chip, a `StatusDot` and a `Meter` agree about what "warn" looks like.
+* `streaming` is the seventh and takes `--cue-stream` instead — the hue this
+* family added to the token contract for exactly one meaning, "text is arriving
+* right now" — because none of the seven tones means that.
+*/
+const STATE_TONES = {
+	queued: "neutral",
+	thinking: "busy",
+	"tool-call": "accent",
+	"awaiting-approval": "warn",
+	streaming: "neutral",
+	cancelled: "danger",
+	done: "ok"
+};
+/** How the state chip is painted when its tone is not enough — the streaming hue. */
+const STREAM_CLASS = "border-stream/35 text-stream";
+/**
+* A scripted run, with a transport: play, pause, step, scrub, restart, rate.
+*
+* The player is a controller over a filmstrip rather than an animation of its
+* own. Every frame of a {@link ReplayScript} carries the whole scene, so the
+* component's entire rendering rule is `frames[index].scene` — which is what
+* makes the position controls honest: frame 12 reached by scrubbing is the same
+* DOM as frame 12 reached by watching, because there is no accumulated state
+* for the two paths to disagree about.
+*
+* The transport is assembled from shipped cue components — `IconButton`s, a
+* `Slider` for the scrubber, a `Chip` for the state — and painted with cue's
+* own metrics even when the scene inside it is an `AgentSurface` island at
+* upstream fidelity. That is deliberate: the chrome belongs to the console
+* showing the run, not to the run.
+*
+* The playback state is legible from outside, the way `TerminalFrame` publishes
+* `data-simulating`: `data-replay-state` carries the current frame's authored
+* label, `data-replay-playing` says whether the clock is running, and
+* `data-replay-frame` is the index — enough for a stylesheet, a screenshot
+* harness or a test to say "show me the awaiting-approval frame" without
+* reaching into React.
+*
+* Under `prefers-reduced-motion: reduce` the player opens on the resting frame
+* and schedules nothing, but the step and scrub controls keep working: play and
+* rate are the only two affordances that go away, because they are the only two
+* that mean "move on their own".
+*
+* @example
+* const SCRIPT: ReplayScript = {
+*   title: "Patching universe 3",
+*   frames: [
+*     { scene: <ToolCall label="Reading the plot" running />, hold: 600, label: "tool-call" },
+*     { scene: <StreamingText segments={ANSWER} />, hold: 400, label: "streaming" },
+*     { scene: <StreamingText segments={ANSWER} settled />, hold: 0, label: "done" },
+*   ],
+* };
+* <ReplayPlayer script={SCRIPT} />
+* @example
+* // Opened at a frame from the URL, paused, at half speed.
+* <ReplayPlayer script={SCRIPT} startAt={17} autoPlay={false} rate={0.5} />
+*/
+const ReplayPlayer = React.forwardRef(function ReplayPlayer({ className, script, autoPlay = true, startAt, rate: initialRate = 1, rates = DEFAULT_RATES, label, ...elementProps }, ref) {
+	const replay = useReplay(script, {
+		autoPlay,
+		startAt,
+		rate: initialRate
+	});
+	const { count, duration, frame, index, playing, rate, reduced, state } = replay;
+	const last = Math.max(0, count - 1);
+	const name = label ?? script.title ?? "Replay";
+	const cycleRate = () => {
+		const ladder = rates.length > 0 ? rates : DEFAULT_RATES;
+		const at = ladder.indexOf(rate);
+		replay.setRate(ladder[(at + 1) % ladder.length] ?? 1);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "replay-player",
+		"data-replay-state": count === 0 ? void 0 : state,
+		"data-replay-playing": String(playing),
+		"data-replay-frame": String(index),
+		className: cn("flex min-w-0 flex-col gap-(--cue-space-4)", className),
+		...elementProps,
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-slot": "replay-stage",
+			className: "min-w-0",
+			children: frame?.scene
+		}), /* @__PURE__ */ jsxs("div", {
+			"data-slot": "replay-transport",
+			role: "group",
+			"aria-label": name,
+			className: "flex flex-wrap items-center gap-(--cue-space-3) border-t border-border pt-(--cue-space-3)",
+			children: [
+				/* @__PURE__ */ jsx(IconButton, {
+					"aria-label": "Restart",
+					icon: RestartGlyph,
+					size: "sm",
+					onClick: replay.restart,
+					disabled: count === 0
+				}),
+				/* @__PURE__ */ jsx(IconButton, {
+					"aria-label": "Previous frame",
+					icon: StepBackGlyph,
+					size: "sm",
+					onClick: () => replay.step(-1),
+					disabled: index === 0
+				}),
+				reduced ? null : /* @__PURE__ */ jsx(IconButton, {
+					"aria-label": playing ? "Pause" : "Play",
+					icon: playing ? PauseGlyph : PlayGlyph,
+					size: "sm",
+					variant: "outline",
+					onClick: replay.toggle,
+					disabled: count < 2 || duration <= 0
+				}),
+				/* @__PURE__ */ jsx(IconButton, {
+					"aria-label": "Next frame",
+					icon: StepForwardGlyph,
+					size: "sm",
+					onClick: () => replay.step(1),
+					disabled: index >= last
+				}),
+				/* @__PURE__ */ jsx(Slider, {
+					"aria-label": "Frame",
+					className: "min-w-[8rem] flex-1",
+					min: 0,
+					max: last,
+					step: 1,
+					value: index,
+					disabled: count < 2,
+					onValueChange: (next) => replay.seek(typeof next === "number" ? next : next[0] ?? 0)
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"data-slot": "replay-position",
+					className: "font-mono text-(length:--cue-text-label) tabular-nums text-fg-muted",
+					children: count === 0 ? "0 / 0" : `${index + 1} / ${count}`
+				}),
+				/* @__PURE__ */ jsx(Chip, {
+					"data-slot": "replay-state",
+					variant: "tag",
+					tone: STATE_TONES[state],
+					className: state === "streaming" ? STREAM_CLASS : void 0,
+					children: state
+				}),
+				reduced ? null : /* @__PURE__ */ jsxs(Chip, {
+					"data-slot": "replay-rate",
+					variant: "tag",
+					interactive: true,
+					"aria-label": `Playback rate, ${rate}×`,
+					onClick: cycleRate,
+					children: [rate, "×"]
+				}),
+				frame?.caption === void 0 ? null : /* @__PURE__ */ jsx("span", {
+					"data-slot": "replay-caption",
+					className: "min-w-0 basis-full truncate font-mono text-(length:--cue-text-label) text-fg-muted",
+					children: frame.caption
+				})
+			]
+		})]
+	});
+});
+//#endregion
+export { REPLAY_STATES, ReplayPlayer, useReplay };

package/dist/elements/research-report.d.ts

@@ -0,0 +1,38 @@
+import { ComponentProps } from "react";
+//#region src/elements/research-report.d.ts
+/** Where one section of the report stands: `pending`, `writing`, or `done`. */
+type SectionState = "pending" | "writing" | "done";
+/** One heading of the outline, with its state and the sources behind it. */
+interface ReportSection {
+  /** Stable identity for the row key. */
+  id: string;
+  /** Section title, shown before any prose exists. */
+  heading: string;
+  /** Only one section is usually writing; pending sections stay visible but dim. */
+  state: SectionState;
+  /** How many sources back this section. Hidden at zero. */
+  sources: number;
+  /** First lines of the written section, shown once there is something to show. */
+  preview?: string;
+}
+/**
+ * An outline that fills in section by section, each carrying the sources behind it.
+ *
+ * @example
+ * import { ResearchReport } from "@cueplusplus/ui/elements";
+ *
+ * <ResearchReport title="Draft ownership in 0.14" sections={sections} sourcesRead={12} />
+ */
+declare function ResearchReport({ title, sections, sourcesRead, className, ...props }: Omit<ComponentProps<"div">, "children" | "title" | "sections" | "sourcesRead"> & {
+  /** What the report is about. */
+  title: string;
+  /**
+   * The outline. It exists from the start and fills in, so the shape is legible before
+   * the prose lands.
+   */
+  sections: readonly ReportSection[];
+  /** Running count of sources consumed. */
+  sourcesRead: number;
+}): import("react").JSX.Element;
+//#endregion
+export { ReportSection, ResearchReport, SectionState };

package/dist/elements/research-report.js

@@ -0,0 +1,69 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mono, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, Loader2Icon } from "lucide-react";
+//#region src/elements/research-report.tsx
+/**
+* An outline that fills in section by section, each carrying the sources behind it.
+*
+* @example
+* import { ResearchReport } from "@cueplusplus/ui/elements";
+*
+* <ResearchReport title="Draft ownership in 0.14" sections={sections} sourcesRead={12} />
+*/
+function ResearchReport({ title, sections, sourcesRead, className, ...props }) {
+	const done = sections.filter((section) => section.state === "done").length;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "research-report",
+		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 flex-col gap-1",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-(length:--cue-text-body) font-medium",
+				children: title
+			}), /* @__PURE__ */ jsxs("span", {
+				className: cn(mono, "text-fg-subtle tabular-nums"),
+				children: [
+					done,
+					"/",
+					sections.length,
+					" sections · ",
+					sourcesRead,
+					" sources read"
+				]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col",
+			children: sections.map((section) => /* @__PURE__ */ jsxs("div", {
+				className: "border-border flex flex-col gap-1 border-t py-2 first:border-t-0 first:pt-0",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "flex size-3.5 shrink-0 items-center justify-center",
+							children: section.state === "done" ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-fg-subtle size-3" }) : section.state === "writing" ? /* @__PURE__ */ jsx(Loader2Icon, { className: "size-3 animate-spin text-stream motion-reduce:animate-none" }) : /* @__PURE__ */ jsx("span", {
+								"aria-hidden": true,
+								className: "bg-surface-3 size-1.5 rounded-full"
+							})
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: cn("min-w-0 flex-1 truncate text-(length:--cue-text-body)", section.state === "pending" ? "text-fg-subtle" : "text-fg-muted"),
+							children: section.heading
+						}),
+						section.sources > 0 && /* @__PURE__ */ jsxs("span", {
+							className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle shrink-0"),
+							children: [section.sources, " src"]
+						})
+					]
+				}), section.preview && /* @__PURE__ */ jsx("p", {
+					className: "text-fg-muted cue-elements-fade-in cue-elements-animate-in ps-5.5 text-(length:--cue-text-ui) leading-relaxed duration-300",
+					children: section.preview
+				})]
+			}, section.id))
+		})]
+	});
+}
+//#endregion
+export { ResearchReport };

package/dist/elements/retrieval-chunks.d.ts

@@ -0,0 +1,43 @@
+import { ComponentProps } from "react";
+//#region src/elements/retrieval-chunks.d.ts
+/** One retrieved passage: where it came from, what it says, and how well it scored. */
+interface RetrievalChunk {
+  /** Stable identity for the list key. */
+  id: string;
+  /** Where the passage came from: a file, a document, a record. */
+  source: string;
+  /** Where inside the source the passage sits: a section, a line range, a page. */
+  locator: string;
+  /**
+   * Similarity from 0 to 1. Drives both the printed value and the bar, and turns green
+   * at 0.8.
+   */
+  score: number;
+  /** The passage itself, clamped to two lines. */
+  text: string;
+}
+/**
+ * The passages a retrieval answer stands on, scored, before the answer itself arrives.
+ *
+ * @example
+ * import { RetrievalChunks } from "@cueplusplus/ui/elements";
+ *
+ * <RetrievalChunks
+ *   query="how does draft restore work"
+ *   chunks={chunks}
+ *   visibleCount={3}
+ *   searching={false}
+ * />
+ */
+declare function RetrievalChunks({ query, chunks, visibleCount, searching, className, ...props }: Omit<ComponentProps<"div">, "children" | "query" | "chunks" | "visibleCount" | "searching"> & {
+  /** The text that was embedded and searched. */
+  query: string;
+  /** Passages returned above the threshold, already sorted by score. */
+  chunks: readonly RetrievalChunk[];
+  /** How many passages have landed so far. */
+  visibleCount: number;
+  /** Shimmers the status line while the index is still being queried. */
+  searching: boolean;
+}): import("react").JSX.Element;
+//#endregion
+export { RetrievalChunk, RetrievalChunks };