@dxos/react-ui-feed 0.11.1

package/dist/lib/testing.mjs

@@ -0,0 +1,1923 @@
+import { A as ItemSelectionProvider, C as useWidgetState, I as DecorationsProvider, _ as sliceFeed, c as useFeedModel, g as searchFeed, i as useMessageList, l as useListModel, m as defaultRenderer, p as chatRenderer, r as MessageList, s as Window, t as Outline, v as MarkdownBlock, y as HtmlBlock } from "./chunk-src.mjs";
+import { Fragment, createContext, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { Column, Icon, IconBlock, IconButton, Input, Panel, Toolbar } from "@dxos/react-ui";
+import { createBasicExtensions, createMarkdownExtensions, createThemeExtensions, decorateMarkdown, getXmlTextChild } from "@dxos/ui-editor";
+import { mx } from "@dxos/ui-theme";
+import { random } from "@dxos/random";
+import { Message } from "@dxos/types";
+import { TogglePanel } from "@dxos/react-ui-components";
+//#region src/debug/Stats.tsx
+/**
+* A block of readouts, in fixed tracks.
+*
+* Every number here changes while the feed scrolls, so the value and unit columns are given widths
+* rather than sized to their contents: a column that fits itself to `4` and then to `1054` moves
+* every digit beside it, and an instrument that moves cannot be read at a glance.
+*/
+var Stats = ({ stats, values, columns = 1, classNames, title, ...props }) => /* @__PURE__ */ jsx("div", {
+	...props,
+	title,
+	className: mx("grid gap-x-1 tabular-nums whitespace-nowrap", classNames),
+	style: { gridTemplateColumns: `repeat(${columns}, 1fr 5rem 1.5rem)` },
+	children: stats.map(({ id, label, unit, classNames }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("span", {
+			className: "text-subdued",
+			children: label
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: mx("text-right", classNames?.(values[id])),
+			"data-testid": `feed.${id}`,
+			children: values[id]
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "text-subdued",
+			children: unit ?? ""
+		})
+	] }, id))
+});
+/** Anything above zero is a defect, not a reading. */
+var warnAbove = (value) => Number(value) > 0 && "text-warning-text";
+createContext(void 0);
+//#endregion
+//#region src/debug/frame-meter.ts
+/** How often the live readout is published. Per-frame state would itself be the thing dropping frames. */
+var REPORT_INTERVAL = 250;
+/**
+* A frame longer than this counts as a hitch: two intervals of a 60Hz display, the point at which a
+* pause stops reading as motion and starts reading as a stutter. Deliberately absolute rather than
+* derived from the display's rate — the question is whether a reader notices, not whether the
+* hardware's budget was met.
+*/
+var HITCH_MS = 32;
+/** Frame durations are bucketed by the millisecond; anything slower than this lands in the last bucket. */
+var MAX_BUCKET = 512;
+/** Hitches traced per pass. A pass that produces more than this has already failed. */
+var MAX_TRACE = 100;
+var EMPTY = {
+	fps: 0,
+	p50: 0,
+	p95: 0,
+	worst: 0,
+	hitches: 0,
+	frames: 0,
+	duration: 0
+};
+/**
+* Rate (fps) at the frame standing at `quantile` of a pass, counting from the fast end — so 0.95 is
+* the slow tail, the fifth of the pass a reader would call the stutter.
+*
+* `buckets` counts frames by their duration in whole milliseconds. Exported for its test: this is
+* the number the engine's verdict rests on, and an off-by-one in the walk would flatter it.
+*/
+var rateAtQuantile = (buckets, frames, quantile) => {
+	if (!frames) return 0;
+	const target = frames * quantile;
+	let seen = 0;
+	for (let ms = 0; ms < buckets.length; ++ms) {
+		seen += buckets[ms];
+		if (seen >= target) return ms > 0 ? Math.round(1e3 / ms) : 0;
+	}
+	return 0;
+};
+/**
+* Samples animation-frame intervals and records a pass on demand.
+*
+* This exists because scroll smoothness is the deciding criterion for the feed engine and no
+* automated harness can report it: an agent's browser throttles `requestAnimationFrame`, so any
+* number collected there describes the harness. Averages hide the defect — a scroll that holds
+* 60fps and stalls once for 200ms reads as smooth in a mean and as broken to a reader — so the
+* percentiles, the worst frame and the hitch count are reported together, and each hitch is traced
+* to the console as it happens so a bad number can be turned into a cause.
+*
+* Durations are bucketed by the millisecond rather than kept, so a pass costs the same however long
+* it runs; percentiles come out of the histogram.
+*/
+var useFrameMeter = ({ label } = {}) => {
+	const [stats, setStats] = useState(EMPTY);
+	const buckets = useRef(new Uint32Array(MAX_BUCKET));
+	const worst = useRef(0);
+	const hitches = useRef(0);
+	const frames = useRef(0);
+	const started = useRef(performance.now());
+	const labelRef = useRef(label);
+	labelRef.current = label;
+	const clear = useCallback(() => {
+		buckets.current.fill(0);
+		worst.current = 0;
+		hitches.current = 0;
+		frames.current = 0;
+		started.current = performance.now();
+		setStats(EMPTY);
+	}, []);
+	const rateAt = useCallback((quantile) => rateAtQuantile(buckets.current, frames.current, quantile), []);
+	/**
+	* Ends the pass: returns its one-line summary, copies it to the clipboard, logs it, and starts a
+	* fresh pass. One control, because a pass is exactly the interval between two of these — start a
+	* clean one by clicking, run the gesture, click again to record it.
+	*/
+	const record = useCallback(() => {
+		const seconds = (performance.now() - started.current) / 1e3;
+		const summary = [
+			labelRef.current ?? "pass",
+			`p50 ${rateAt(.5)}`,
+			`p95 ${rateAt(.95)}`,
+			`worst ${Math.round(worst.current)}ms`,
+			`${hitches.current} hitches`,
+			`${frames.current} frames`,
+			`${seconds.toFixed(1)}s`
+		].join(" · ");
+		console.log("[feed] pass", summary);
+		navigator.clipboard?.writeText(summary).catch(() => {});
+		clear();
+		return summary;
+	}, [rateAt, clear]);
+	useEffect(() => {
+		let handle = 0;
+		let last = performance.now();
+		let windowStart = last;
+		let windowFrames = 0;
+		let traced = 0;
+		const tick = (now) => {
+			const delta = now - last;
+			last = now;
+			frames.current++;
+			windowFrames++;
+			buckets.current[Math.min(Math.round(delta), 511)]++;
+			if (delta > worst.current) worst.current = delta;
+			if (delta > HITCH_MS) {
+				hitches.current++;
+				if (traced++ < MAX_TRACE) console.debug("[feed] hitch", {
+					ms: Math.round(delta),
+					at: Math.round(now - started.current),
+					label: labelRef.current
+				});
+			}
+			const elapsed = now - windowStart;
+			if (elapsed >= REPORT_INTERVAL) {
+				setStats({
+					fps: Math.round(windowFrames * 1e3 / elapsed),
+					p50: rateAt(.5),
+					p95: rateAt(.95),
+					worst: Math.round(worst.current),
+					hitches: hitches.current,
+					frames: frames.current,
+					duration: Math.round(now - started.current)
+				});
+				windowStart = now;
+				windowFrames = 0;
+			}
+			handle = requestAnimationFrame(tick);
+		};
+		handle = requestAnimationFrame(tick);
+		return () => cancelAnimationFrame(handle);
+	}, [rateAt]);
+	return {
+		...stats,
+		label,
+		record
+	};
+};
+//#endregion
+//#region src/testing/debug/FeedStats.tsx
+/** What the feed currently holds, as opposed to how well it is holding it. */
+var FEED_STATS = [
+	{
+		id: "range",
+		label: "range"
+	},
+	{
+		id: "index",
+		label: "index"
+	},
+	{
+		id: "rows",
+		label: "rows"
+	},
+	{
+		id: "widgets",
+		label: "widgets"
+	},
+	{
+		id: "selected",
+		label: "selected"
+	},
+	{
+		id: "hits",
+		label: "hits"
+	}
+];
+/**
+* The scroll-quality verdict: live rate, the rate at the pass's slowest fifth, the worst frame, and
+* how many frames stuttered. Only meaningful at a real keyboard — an agent's browser throttles the
+* frames this counts.
+*
+* `jumps` are rows moving against the scroll, sampled per frame; `shifts` are rows whose offset
+* changed after they were laid out; `breaks` are shifts that broke the order. All three should be
+* zero on a still feed, so each is coloured the moment it is not.
+*/
+var FRAME_STATS = [
+	{
+		id: "fps",
+		label: "render",
+		unit: "fps",
+		classNames: (value) => Number(value) > 0 && Number(value) < 50 && "text-warning-text"
+	},
+	{
+		id: "p95",
+		label: "p95",
+		unit: "ms"
+	},
+	{
+		id: "worst",
+		label: "worst",
+		unit: "ms"
+	},
+	{
+		id: "hitches",
+		label: "hitches",
+		classNames: warnAbove
+	},
+	{
+		id: "jumps",
+		label: "jumps",
+		classNames: warnAbove
+	},
+	{
+		id: "shifts",
+		label: "shifts",
+		classNames: warnAbove
+	},
+	{
+		id: "breaks",
+		label: "breaks",
+		classNames: warnAbove
+	}
+];
+/**
+* Everything measured about a feed, floating over it.
+*
+* It sits above the viewport rather than in a statusbar because a statusbar is part of the layout
+* being measured: a block of readouts that grows or wraps changes the height of the scroll
+* container, and every number in it would then describe a viewport the readouts themselves resized.
+*/
+var FeedStats = ({ classNames, meter, streaming, selected = 0, hits = 0 }) => {
+	const { range, currentIndex, count, mountedRows, mountedWidgets, jumps, shifts, breaks, resetShifts } = useMessageList("FeedStats");
+	const [recording, setRecording] = useState(false);
+	const onRecord = useCallback(() => {
+		meter.record();
+		setRecording((value) => !value);
+	}, [meter]);
+	const values = useMemo(() => ({
+		range: range ? `${range.startIndex} / ${range.endIndex}` : "—",
+		index: `${currentIndex} / ${count}`,
+		rows: mountedRows,
+		widgets: mountedWidgets,
+		selected,
+		hits,
+		fps: meter.fps,
+		p95: meter.p95,
+		worst: meter.worst,
+		hitches: meter.hitches,
+		jumps: jumps.count,
+		shifts,
+		breaks
+	}), [
+		range,
+		currentIndex,
+		count,
+		mountedRows,
+		mountedWidgets,
+		selected,
+		hits,
+		meter,
+		jumps.count,
+		shifts,
+		breaks
+	]);
+	const label = `${meter.label} — p50 ${meter.p50} · ${meter.frames} frames · ${(meter.duration / 1e3).toFixed(1)}s`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: mx("z-10 absolute bottom-3 right-3 w-[12rem] grid p-2 rounded-sm border border-separator bg-base-surface text-xs text-description", classNames),
+		"data-testid": "feed.stats",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center min-w-0",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "grow truncate",
+						"data-testid": "feed.stream.state",
+						children: streaming ? "streaming…" : "idle"
+					}),
+					/* @__PURE__ */ jsx(IconButton, {
+						icon: recording ? "ph--stop--regular" : "ph--record--regular",
+						iconOnly: true,
+						label: recording ? "End the pass" : "Start a pass",
+						variant: "ghost",
+						size: 3,
+						"data-testid": "feed.debug.record",
+						onClick: onRecord
+					}),
+					/* @__PURE__ */ jsx(IconButton, {
+						icon: "ph--arrow-counter-clockwise--regular",
+						iconOnly: true,
+						label: "Reset counters",
+						variant: "ghost",
+						size: 3,
+						"data-testid": "feed.debug.reset",
+						onClick: resetShifts
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Stats, {
+				stats: FEED_STATS,
+				values
+			}),
+			/* @__PURE__ */ jsx(Stats, {
+				stats: FRAME_STATS,
+				values,
+				classNames: "border-t border-subdued-separator pt-1",
+				title: label,
+				"data-testid": "feed.frames"
+			})
+		]
+	});
+};
+//#endregion
+//#region src/testing/debug/sweep.ts
+/**
+* Travel speed (px/s) of a measured pass: about what a hard trackpad fling reaches on a 120Hz
+* display, and the speed at which a reader still expects to see content rather than a blur.
+*
+* Not "the whole document in N seconds", which was the first attempt: 2,000 rows in six seconds is
+* 40,000 px/s — some 400 rows a second, each one a CodeMirror view to mount and measure — and it
+* collapsed the frame rate to 3fps on hardware that idles at 120. That measured the sweep, not the
+* list.
+*/
+var VELOCITY = 3e3;
+/** Time spent travelling in each direction (ms), so a pass covers the same distance in every story. */
+var LEG_DURATION = 5e3;
+/**
+* Scrolls an element down and back at a fixed speed.
+*
+* A measured pass has to be one repeatable gesture or the numbers cannot be compared between
+* stories, and a 2,000-row feed is far too long to fling by hand. Fixed speed for a fixed time —
+* rather than a fixed fraction of the document — so the two stories being compared travel the same
+* distance even though they disagree about how tall the document is until their rows have measured.
+*/
+var sweepScroll = (element, { velocity = VELOCITY, duration = LEG_DURATION, onDone } = {}) => {
+	let frame = 0;
+	let cancelled = false;
+	let start = performance.now();
+	let last = start;
+	let leg = "down";
+	const finish = () => {
+		cancelAnimationFrame(frame);
+		onDone?.();
+	};
+	const tick = (now) => {
+		if (cancelled) return;
+		const step = velocity * (now - last) / 1e3;
+		last = now;
+		const limit = element.scrollHeight - element.clientHeight;
+		element.scrollTop = Math.max(0, Math.min(element.scrollTop + (leg === "down" ? step : -step), limit));
+		if (now - start < duration) {
+			frame = requestAnimationFrame(tick);
+			return;
+		}
+		if (leg === "down") {
+			leg = "up";
+			start = now;
+			last = now;
+			frame = requestAnimationFrame(tick);
+			return;
+		}
+		finish();
+	};
+	frame = requestAnimationFrame(tick);
+	return () => {
+		cancelled = true;
+		finish();
+	};
+};
+//#endregion
+//#region src/testing/debug/use-feed-debug.ts
+/**
+* Everything the harness measures itself with, in one place.
+*
+* Kept apart from the story deliberately: instrumentation accumulates — a meter, a sweep, a toggle,
+* a label, the refs and teardown each needs — and threaded through a component it slowly becomes
+* the component. As an aspect the story stays about the feed, and what is being measured can be
+* read, changed or dropped in one file.
+*/
+var useFeedDebug = ({ scenario, count, estimateSize, streaming, enabled = false }) => {
+	const [debug, setDebug] = useState(enabled);
+	const toggleDebug = useCallback(() => setDebug((value) => !value), []);
+	const meter = useFrameMeter({ label: useMemo(() => [
+		scenario ?? "mixed",
+		`${count} msgs`,
+		estimateSize ? `est ${estimateSize}` : void 0,
+		streaming && "streaming"
+	].filter(Boolean).join(" · "), [
+		scenario,
+		count,
+		estimateSize,
+		streaming
+	]) });
+	const viewportRef = useRef(null);
+	const [sweeping, setSweeping] = useState(false);
+	const cancelSweep = useRef(null);
+	const onSweep = useCallback(() => {
+		if (sweeping) {
+			cancelSweep.current?.();
+			return;
+		}
+		const viewport = viewportRef.current;
+		if (!viewport) return;
+		meter.record();
+		setSweeping(true);
+		cancelSweep.current = sweepScroll(viewport, { onDone: () => {
+			cancelSweep.current = null;
+			setSweeping(false);
+			meter.record();
+		} });
+	}, [sweeping, meter]);
+	useEffect(() => () => cancelSweep.current?.(), []);
+	return {
+		debug,
+		toggleDebug,
+		meter,
+		viewportRef,
+		sweeping,
+		onSweep
+	};
+};
+//#endregion
+//#region src/testing/generator.ts
+var SENDERS = ["user", "assistant"];
+/**
+* Synthetic feed for measuring the engine.
+*
+* Heights are deliberately uneven — a uniform-height feed would hide exactly the measurement
+* problem the spike exists to answer.
+*/
+var createMessages = ({ count, kinds = [
+	"markdown",
+	"markdown",
+	"short",
+	"code",
+	"html"
+], seed = 999 }) => {
+	random.seed(seed);
+	const start = Date.now() - count * 6e4;
+	return Array.from({ length: count }, (_, index) => {
+		const kind = kinds[index % kinds.length];
+		const role = SENDERS[index % SENDERS.length];
+		return Message.make({
+			created: new Date(start + index * 6e4).toISOString(),
+			sender: {
+				role,
+				name: role === "user" ? "Alice" : "Assistant"
+			},
+			blocks: [blockFor(kind, index)],
+			properties: {
+				subject: `Message ${index}`,
+				kind
+			}
+		});
+	});
+};
+var blockFor = (kind, index) => {
+	switch (kind) {
+		case "short": return {
+			_tag: "text",
+			text: `**${index}.** ${random.lorem.sentence(6)}`
+		};
+		case "code": return {
+			_tag: "text",
+			text: [
+				`**${index}.** ${random.lorem.sentence(8)}`,
+				"",
+				"```ts",
+				"const feed = useQuery(db, Query.from(feed));",
+				"const hits = searchFeed(messages, renderer, query);",
+				"```",
+				"",
+				random.lorem.sentence(12)
+			].join("\n")
+		};
+		case "html": return {
+			_tag: "text",
+			mimeType: "text/html",
+			text: [
+				`<p><strong>${index}.</strong> ${random.lorem.sentence(10)}</p>`,
+				`<blockquote>${random.lorem.sentence(14)}</blockquote>`,
+				"<ul><li>attachment.pdf</li><li>invoice.csv</li></ul>"
+			].join("")
+		};
+		default: return {
+			_tag: "text",
+			text: [
+				`**${index}.** ${random.lorem.sentence(10)}`,
+				"",
+				random.lorem.paragraph(),
+				"",
+				`- ${random.lorem.sentence(5)}`,
+				`- ${random.lorem.sentence(7)}`
+			].join("\n")
+		};
+	}
+};
+//#endregion
+//#region src/testing/controls.tsx
+/** The floor: the row's text, and no editor at all. */
+var TextItem = ({ content }) => /* @__PURE__ */ jsx("p", {
+	className: "py-1 text-sm",
+	children: String(content.data ?? "")
+});
+/** An editor with nothing but wrapping: no theme, no keymap, no markdown, no decoration. */
+var BARE = [
+	EditorView.editable.of(false),
+	EditorState.readOnly.of(true),
+	EditorView.lineWrapping
+];
+/** Wrapping plus the theme — the extension the isolated profile shows to be nearly free. */
+var THEMED = [createBasicExtensions({
+	readOnly: true,
+	editable: false,
+	lineWrapping: true
+}), createThemeExtensions({ themeMode: "light" })];
+/** The theme plus the markdown language: parsing, but nothing rendered from what it parsed. */
+var MARKDOWN = [...THEMED, createMarkdownExtensions()];
+/** Everything the item has bar its highlight layer — headings, lists and links drawn as themselves. */
+var DECORATED = [...MARKDOWN, decorateMarkdown()];
+var BareEditorItem = ({ content }) => /* @__PURE__ */ jsx(ProbeEditor, {
+	text: String(content.data ?? ""),
+	extensions: BARE
+});
+var ThemedEditorItem = ({ content }) => /* @__PURE__ */ jsx(ProbeEditor, {
+	text: String(content.data ?? ""),
+	extensions: THEMED
+});
+var MarkdownEditorItem = ({ content }) => /* @__PURE__ */ jsx(ProbeEditor, {
+	text: String(content.data ?? ""),
+	extensions: MARKDOWN
+});
+var DecoratedEditorItem = ({ content }) => /* @__PURE__ */ jsx(ProbeEditor, {
+	text: String(content.data ?? ""),
+	extensions: DECORATED
+});
+/**
+* The real item, reached the same way the probes are.
+*
+* The rung that separates *what the editor is configured with* from *what the component does around
+* it*: everything outside this component is identical to `uniform-decorated`.
+*/
+var MarkdownProbeItem = ({ content }) => /* @__PURE__ */ jsx(MarkdownBlock, { text: String(content.data ?? "") });
+/**
+* A deliberate copy of `MarkdownBlock`'s construction, reduced to the part being measured.
+*
+* Copied rather than shared: the point of a control is that it does not change when the thing it is
+* a control for does.
+*/
+var ProbeEditor = ({ text, extensions }) => {
+	const rootRef = useRef(null);
+	useLayoutEffect(() => {
+		const parent = rootRef.current;
+		if (!parent) return;
+		const view = new EditorView({
+			parent,
+			state: EditorState.create({
+				doc: text,
+				extensions
+			})
+		});
+		return () => view.destroy();
+	}, [text, extensions]);
+	return /* @__PURE__ */ jsx("div", { ref: rootRef });
+};
+//#endregion
+//#region src/testing/widgets.tsx
+/**
+* Widgets for the block kinds an assistant turn contains.
+*
+* Approximations of `plugin-assistant`'s, deliberately: what the engine has to prove is that a
+* per-message document can carry block widgets at all — that they mount, measure and survive
+* streaming — not that these are the widgets the plugin will ship. The real ones move down when the
+* plugin does.
+*
+* Every widget renders from the tag alone. The plugin keeps tool state beside the document and
+* re-applies it after a remount; an item here is rebuilt from its message, so state that is not in
+* the document has nowhere to survive.
+*/
+/**
+* A collapsible block: the header is what the reader sees while scrolling past, the body is what
+* they open when they care. Reasoning and tool traces are long, incidental and frequent — rendering
+* them expanded turns a chat into a log.
+*
+* The disclosure animates, and every frame of it is measured twice — by CodeMirror, to re-place the
+* lines under the widget, and by the virtualizer, to re-place the rows under the item. That is what
+* it costs for the content below to travel with the panel instead of jumping to its new place; the
+* geometry stays consistent because `MarkdownBlock` re-measures the document as the widget resizes.
+*/
+var Panel$1 = ({ stateKey, icon, title, children, classNames }) => {
+	const [open, setOpen] = useWidgetState(stateKey, false);
+	return /* @__PURE__ */ jsx("div", {
+		"data-testid": "feed.widget",
+		"data-open": open,
+		children: /* @__PURE__ */ jsx(TogglePanel.Root, {
+			open,
+			onChangeOpen: setOpen,
+			children: /* @__PURE__ */ jsxs(TogglePanel.Content, {
+				classNames: mx("min-h-[2.125rem] rounded border border-subdued-separator", classNames),
+				children: [/* @__PURE__ */ jsxs(TogglePanel.Header, {
+					classNames: "flex items-center gap-2 px-2 py-1 text-sm",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "grow text-description truncate",
+						children: title
+					}), /* @__PURE__ */ jsx(IconBlock, { children: /* @__PURE__ */ jsx(Icon, {
+						icon,
+						size: 4
+					}) })]
+				}), /* @__PURE__ */ jsx(TogglePanel.Body, { children: /* @__PURE__ */ jsx(TogglePanel.Viewport, {
+					classNames: "px-2 pb-1 text-sm",
+					children
+				}) })]
+			})
+		})
+	});
+};
+var Reasoning = ({ children, range }) => {
+	const text = getXmlTextChild(children ?? []) ?? "";
+	return /* @__PURE__ */ jsx(Panel$1, {
+		stateKey: `reasoning:${range?.from}`,
+		icon: "ph--brain--regular",
+		title: text.slice(0, 80),
+		classNames: "opacity-70",
+		children: /* @__PURE__ */ jsx("p", { children: text })
+	});
+};
+var Status = ({ children }) => /* @__PURE__ */ jsx("p", {
+	className: "px-2 py-1 text-sm text-description animate-pulse",
+	children: getXmlTextChild(children ?? [])
+});
+var ToolCall = ({ name, pending, range }) => /* @__PURE__ */ jsx(Panel$1, {
+	stateKey: `toolCall:${range?.from}`,
+	icon: pending ? "ph--circle-notch--regular" : "ph--wrench--regular",
+	title: `Calling ${name}`,
+	children: /* @__PURE__ */ jsx("p", {
+		className: "font-mono text-xs",
+		children: name
+	})
+});
+var ToolResult = ({ children, for: tool, range }) => /* @__PURE__ */ jsx(Panel$1, {
+	stateKey: `toolResult:${range?.from}`,
+	icon: "ph--check--regular",
+	title: `${tool} returned`,
+	children: /* @__PURE__ */ jsx("p", {
+		className: "font-mono text-xs",
+		children: getXmlTextChild(children ?? [])
+	})
+});
+var Suggestion = ({ children }) => /* @__PURE__ */ jsx("button", {
+	type: "button",
+	className: "me-1 px-2 py-0.5 rounded-full border border-separator text-sm",
+	children: getXmlTextChild(children ?? [])
+});
+var Select = ({ children }) => {
+	const options = (children ?? []).map((option) => option?._tag === "option" && getXmlTextChild(option.children)).filter(Boolean);
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-1 py-1",
+		children: options.map((option) => /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "px-2 py-1 text-left rounded border border-separator text-sm",
+			children: option
+		}, option))
+	});
+};
+var Json = ({ children }) => /* @__PURE__ */ jsx("pre", {
+	className: "px-2 py-1 overflow-x-auto rounded bg-input-surface text-xs",
+	children: getXmlTextChild(children ?? [])
+});
+/**
+* Floor for a panel's collapsed height, reserved before its portaled content paints.
+*
+* `heightMode: 'min'` is what makes this a floor rather than a pin — the default pins the box and
+* clips it, so an opened panel stays shut. Without any reservation the row is measured at the height
+* of an empty box and grows a frame later, which is a row moving under a reader scrolling up.
+*/
+var COLLAPSED_HEIGHT = 42;
+var chatRegistry = {
+	prompt: { block: true },
+	reasoning: {
+		block: true,
+		streaming: true,
+		estimatedHeight: () => COLLAPSED_HEIGHT,
+		heightMode: "min",
+		Component: Reasoning
+	},
+	status: {
+		block: true,
+		streaming: true,
+		estimatedHeight: () => COLLAPSED_HEIGHT,
+		heightMode: "min",
+		Component: Status
+	},
+	toolCall: {
+		block: true,
+		estimatedHeight: () => COLLAPSED_HEIGHT,
+		heightMode: "min",
+		Component: ToolCall
+	},
+	toolResult: {
+		block: true,
+		estimatedHeight: () => COLLAPSED_HEIGHT,
+		heightMode: "min",
+		Component: ToolResult
+	},
+	suggestion: {
+		block: false,
+		Component: Suggestion
+	},
+	select: {
+		block: true,
+		Component: Select
+	},
+	json: {
+		block: true,
+		Component: Json
+	}
+};
+//#endregion
+//#region src/testing/scenarios.tsx
+var UNIFORM_CONTROLS = {
+	"uniform-text": TextItem,
+	"uniform-bare": BareEditorItem,
+	"uniform-themed": ThemedEditorItem,
+	"uniform-markdown": MarkdownEditorItem,
+	"uniform-decorated": DecoratedEditorItem,
+	"uniform-item": MarkdownProbeItem
+};
+var createScenario = ({ scenario, count, seed = 999 }) => {
+	random.seed(seed);
+	switch (scenario) {
+		case "plain": return {
+			messages: createPlainMessages(count),
+			renderer: (message) => ({
+				kind: "custom",
+				key: "plain",
+				data: message.properties?.height ?? 120
+			}),
+			Chrome: PlainChrome,
+			Custom: PlainItem,
+			stickyBottom: true,
+			estimateSize: (message) => Number(message.properties?.height ?? 120) + PLAIN_CHROME
+		};
+		case "uniform": return {
+			messages: createUniformMessages(count),
+			renderer: defaultRenderer,
+			Chrome: PlainChrome,
+			stickyBottom: true,
+			estimateSize: UNIFORM_HEIGHT
+		};
+		case "uniform-text":
+		case "uniform-bare":
+		case "uniform-themed":
+		case "uniform-markdown":
+		case "uniform-decorated":
+		case "uniform-item": return {
+			messages: createUniformMessages(count),
+			renderer: (message) => ({
+				kind: "custom",
+				key: scenario,
+				data: Message.extractText(message)
+			}),
+			Chrome: PlainChrome,
+			Custom: UNIFORM_CONTROLS[scenario],
+			stickyBottom: true,
+			estimateSize: 84
+		};
+		case "assistant": return {
+			messages: createAssistantMessages(count),
+			renderer: chatRenderer,
+			registry: chatRegistry,
+			Chrome: AssistantChrome,
+			stickyBottom: true,
+			estimateSize: estimateAssistantRow,
+			isAnchor: (message) => message.sender.role === "user"
+		};
+		case "email": return {
+			messages: createEmailMessages(count),
+			renderer: defaultRenderer,
+			Chrome: EmailChrome,
+			stickyBottom: false,
+			estimateSize: 220
+		};
+		case "thread": return {
+			messages: createThreadMessages(count),
+			renderer: defaultRenderer,
+			Chrome: ThreadChrome,
+			stickyBottom: true,
+			estimateSize: 64
+		};
+		case "comments": return {
+			messages: createCommentMessages(count),
+			renderer: defaultRenderer,
+			Chrome: CommentChrome,
+			stickyBottom: false,
+			estimateSize: 96
+		};
+		case "transcript": return {
+			messages: createTranscriptMessages(count),
+			renderer: defaultRenderer,
+			Chrome: TranscriptChrome,
+			stickyBottom: true,
+			estimateSize: 48
+		};
+	}
+};
+/** Chrome around every assistant row: the sender line, the padding and the separator. */
+var ROW_CHROME = 46;
+/** Height of a wrapped line of body text, and how many characters fit on one at the story's width. */
+var LINE_HEIGHT = 24;
+var LINE_CHARS = 90;
+/** A collapsed panel: reasoning, a tool call, a tool result. */
+var PANEL_HEIGHT = 50;
+/**
+* What a row will measure, from the message alone.
+*
+* Rough on purpose — it is an estimate, and its only job is to be close enough that measuring the row
+* does not move the rows below it. Text is counted in wrapped lines, blank lines between blocks are
+* counted, and every block that renders as a widget is counted at its collapsed height.
+*/
+var estimateAssistantRow = (message) => {
+	let height = ROW_CHROME;
+	for (const block of message.blocks) switch (block._tag) {
+		case "text": {
+			const paragraphs = block.text.split("\n\n");
+			for (const paragraph of paragraphs) height += Math.max(1, Math.ceil(paragraph.length / LINE_CHARS)) * LINE_HEIGHT;
+			break;
+		}
+		case "suggestion":
+			height += 32;
+			break;
+		case "select":
+			height += block.options.length * 34;
+			break;
+		default: height += PANEL_HEIGHT;
+	}
+	return height;
+};
+/** Fixed heights, cycling so the feed is uneven — but known in advance and never corrected. */
+var PLAIN_HEIGHTS = [
+	64,
+	120,
+	200,
+	88,
+	320,
+	56
+];
+/**
+* What the chrome adds to a plain row: the separator beneath it.
+*
+* The estimate has to include this. A control scenario whose estimate is the *content* height is off
+* by the chrome on every single row, and the list corrects each one — which looks exactly like the
+* defect the control exists to rule out.
+*/
+var PLAIN_CHROME = 1;
+var createPlainMessages = (count) => Array.from({ length: count }, (_, index) => Message.make({
+	created: at(index),
+	sender: {
+		role: index % 2 === 0 ? "user" : "assistant",
+		name: index % 2 === 0 ? "Alice" : "Assistant"
+	},
+	blocks: [{
+		_tag: "text",
+		text: random.lorem.sentence(index % 8)
+	}],
+	properties: { height: PLAIN_HEIGHTS[index % PLAIN_HEIGHTS.length] }
+}));
+/**
+* What one uniform row measures, chrome included.
+*
+* Exact on purpose, and checked against the DOM rather than guessed: this scenario's whole job is to
+* be the case where the estimate is right, and it was declared at 84 against a real 24. A viewport
+* filled from an estimate three times too large covers a third of the screen once the rows measure,
+* so the feed arrived in two visible pieces — in the one story that exists to have nothing wrong
+* with it.
+*/
+var UNIFORM_HEIGHT = 24;
+/** Every row the same document, so a single estimate is exactly right for all of them. */
+var createUniformMessages = (count) => Array.from({ length: count }, (_, index) => Message.make({
+	created: at(index),
+	sender: {
+		role: index % 2 === 0 ? "user" : "assistant",
+		name: index % 2 === 0 ? "Alice" : "Assistant"
+	},
+	blocks: [{
+		_tag: "text",
+		text: random.lorem.sentence(index % 16 === 0 ? 100 : 1)
+	}]
+}));
+var NAMES = [
+	"Alice",
+	"Bob",
+	"Charlie",
+	"Dana"
+];
+var at = (index, step = 6e4) => (/* @__PURE__ */ new Date(Date.now() - (2e3 - index) * step)).toISOString();
+/** A turn: the reader's prompt, then an answer carrying the block kinds a model actually emits. */
+var createAssistantMessages = (count) => Array.from({ length: count }, (_, index) => {
+	if (index % 2 === 0) return Message.make({
+		created: at(index),
+		sender: {
+			role: "user",
+			name: "Alice"
+		},
+		blocks: [{
+			_tag: "text",
+			text: random.lorem.paragraph()
+		}]
+	});
+	const blocks = [{
+		_tag: "reasoning",
+		reasoningText: random.lorem.paragraph()
+	}];
+	if (index % 4 === 1) {
+		const toolCallId = `tool-${index}`;
+		blocks.push({
+			_tag: "toolCall",
+			toolCallId,
+			name: "search",
+			input: "{}",
+			providerExecuted: false
+		});
+		blocks.push({
+			_tag: "toolResult",
+			toolCallId,
+			name: "search",
+			result: random.lorem.paragraphs(2),
+			providerExecuted: false
+		});
+	}
+	blocks.push({
+		_tag: "text",
+		text: answerText(index)
+	});
+	if (index % 6 === 3) {
+		blocks.push({
+			_tag: "suggestion",
+			text: "Tell me more"
+		});
+		blocks.push({
+			_tag: "suggestion",
+			text: "Show the sources"
+		});
+	}
+	if (index % 8 === 5) blocks.push({
+		_tag: "select",
+		options: [
+			"Option 1",
+			"Option 2",
+			"Option 3"
+		]
+	});
+	return Message.make({
+		created: at(index),
+		sender: {
+			role: "assistant",
+			name: "Assistant"
+		},
+		blocks
+	});
+});
+var answerText = (index) => [
+	`**${index}.** ${random.lorem.sentence(10)}`,
+	"",
+	random.lorem.paragraph(),
+	"",
+	`- ${random.lorem.sentence(5)}`,
+	`- ${random.lorem.sentence(7)}`
+].join("\n");
+/** An email conversation: HTML bodies, quoted history, and a subject that never changes. */
+var createEmailMessages = (count) => {
+	const subject = `Re: ${random.lorem.words(4)}`;
+	return Array.from({ length: count }, (_, index) => {
+		const from = NAMES[index % NAMES.length];
+		return Message.make({
+			created: at(index, 36e5),
+			sender: {
+				role: "user",
+				name: from,
+				email: `${from.toLowerCase()}@example.com`
+			},
+			blocks: [{
+				_tag: "text",
+				mimeType: "text/html",
+				text: [
+					`<p>${random.lorem.paragraph()}</p>`,
+					`<p>${random.lorem.paragraph()}</p>`,
+					"<ul><li>attachment.pdf</li><li>invoice.csv</li></ul>",
+					`<blockquote>${random.lorem.sentence(16)}</blockquote>`
+				].join("")
+			}],
+			properties: { subject }
+		});
+	});
+};
+/** Human chat: short turns, many of them, often several in a row from one speaker. */
+var createThreadMessages = (count) => Array.from({ length: count }, (_, index) => {
+	const name = NAMES[Math.floor(index / 3) % NAMES.length];
+	return Message.make({
+		created: at(index, 3e4),
+		sender: {
+			role: "user",
+			name
+		},
+		blocks: [{
+			_tag: "text",
+			text: random.lorem.sentence(random.number.int({
+				min: 4,
+				max: 20
+			}))
+		}]
+	});
+});
+/** Comments: each anchored to a range of a document, and resolvable. */
+var createCommentMessages = (count) => Array.from({ length: count }, (_, index) => Message.make({
+	created: at(index, 12e4),
+	sender: {
+		role: "user",
+		name: NAMES[index % NAMES.length]
+	},
+	blocks: [{
+		_tag: "text",
+		text: random.lorem.sentence(random.number.int({
+			min: 6,
+			max: 24
+		}))
+	}],
+	properties: {
+		anchor: random.lorem.sentence(6),
+		resolved: index % 7 === 0
+	}
+}));
+/** Transcription: one utterance per message, seconds apart, arriving while the reader watches. */
+var createTranscriptMessages = (count) => Array.from({ length: count }, (_, index) => Message.make({
+	created: at(index, 6e3),
+	sender: {
+		role: "user",
+		name: NAMES[index % 2]
+	},
+	blocks: [{
+		_tag: "text",
+		text: random.lorem.sentence(random.number.int({
+			min: 5,
+			max: 18
+		}))
+	}]
+}));
+/**
+* A row of a known height: the content is a box, not a document.
+*
+* The height is the point — it is declared, never measured — so it is stated in the row rather than
+* left to be inferred, and the text sits at the top like every other scenario's does.
+*/
+var PlainItem = ({ content, message }) => {
+	const height = Number(content.data ?? 120);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1 py-2 text-sm",
+		style: { height },
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 text-xs text-description",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "font-medium",
+				children: message.sender.name
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "tabular-nums",
+				children: [height, "px"]
+			})]
+		}), /* @__PURE__ */ jsx("p", { children: Message.extractText(message) })]
+	});
+};
+/** No hover controls and no separators: nothing here can change a row's height. */
+/**
+* The index is shown in the gutter because these are the control scenarios: when a row moves, the
+* first question is *which* row, and reading it off the screen beats hunting for it in the DOM.
+*/
+var PlainChrome = ({ index, children }) => /* @__PURE__ */ jsxs(Row, {
+	classNames: "py-0 grid grid-cols-[3rem_1fr] gap-2",
+	children: [/* @__PURE__ */ jsx("div", {
+		className: "self-start flex items-center h-[1lh] text-base leading-normal",
+		children: /* @__PURE__ */ jsx("span", {
+			className: "text-xs text-subdued tabular-nums",
+			children: index
+		})
+	}), /* @__PURE__ */ jsx("div", {
+		className: "min-w-0",
+		children
+	})]
+});
+var timeOf = (message, options) => new Date(message.created).toLocaleTimeString([], options ?? {
+	hour: "2-digit",
+	minute: "2-digit"
+});
+var Row = ({ children, classNames }) => /* @__PURE__ */ jsx("div", {
+	className: mx("group relative px-2 py-2", classNames),
+	"data-testid": "feed.message",
+	children
+});
+/**
+* Assistant: the reader's prompts and the model's answers are framed differently, because they are
+* different kinds of thing — a prompt is an instruction that can be rewound to, an answer is a
+* result that can be forked from.
+*
+* A prompt carries its rewind toolbar underneath; an answer carries its timestamp at the foot, where
+* it reads as when the answer finished rather than when the turn began. Both are always in flow — a
+* control that appears on hover changes the row's height, and a pointer travelling down a scrolling
+* list then moves every row below it.
+*/
+var AssistantChrome = ({ message, index, selected, children }) => {
+	const prompt = message.sender.role === "user";
+	return /* @__PURE__ */ jsx(Row, {
+		classNames: mx(selected && "bg-hover-surface"),
+		children: prompt ? /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "ps-2 pe-2 pt-1 pb-1 border-s-2 border-accent-bg rounded-sm bg-input-surface",
+				children
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1 pt-1 text-xs text-description opacity-0 transition-opacity group-hover:opacity-100",
+				children: [
+					/* @__PURE__ */ jsx(IconButton, {
+						icon: "ph--arrow-counter-clockwise--regular",
+						iconOnly: true,
+						label: "Rewind",
+						variant: "ghost",
+						size: 3
+					}),
+					/* @__PURE__ */ jsx(IconButton, {
+						icon: "ph--git-branch--regular",
+						iconOnly: true,
+						label: "Fork",
+						variant: "ghost",
+						size: 3
+					}),
+					/* @__PURE__ */ jsx("span", { children: timeOf(message) }),
+					/* @__PURE__ */ jsxs("span", {
+						className: "text-subdued",
+						children: ["#", index]
+					})
+				]
+			})]
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0",
+			children: [children, /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 pt-1 text-xs text-description opacity-0 transition-opacity group-hover:opacity-100",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "font-medium",
+						children: message.sender.name
+					}),
+					/* @__PURE__ */ jsx("span", { children: timeOf(message) }),
+					/* @__PURE__ */ jsxs("span", {
+						className: "text-subdued",
+						children: ["#", index]
+					}),
+					/* @__PURE__ */ jsx("span", { className: "grow" }),
+					/* @__PURE__ */ jsx(IconButton, {
+						icon: "ph--arrow-bend-up-left--regular",
+						iconOnly: true,
+						label: "Reply",
+						variant: "ghost",
+						size: 3
+					})
+				]
+			})]
+		})
+	});
+};
+/** Email: a header of its own — sender, address, date — and a card-like body. */
+var EmailChrome = ({ message, children }) => /* @__PURE__ */ jsxs(Row, {
+	classNames: "border-b border-separator",
+	children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex items-baseline gap-2",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium",
+					children: message.sender.name
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-xs text-description",
+					children: message.sender.email
+				}),
+				/* @__PURE__ */ jsx("span", { className: "grow" }),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-xs text-description",
+					children: new Date(message.created).toLocaleString()
+				})
+			]
+		}),
+		/* @__PURE__ */ jsx("p", {
+			className: "text-xs text-description",
+			children: String(message.properties?.subject ?? "")
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: "mt-1",
+			children
+		})
+	]
+});
+/** Human chat: an avatar, and consecutive turns from one speaker read as one block. */
+var ThreadChrome = ({ message, children }) => /* @__PURE__ */ jsxs(Row, {
+	classNames: "grid grid-cols-[2rem_1fr] gap-2",
+	children: [/* @__PURE__ */ jsx("div", {
+		className: "w-6 h-6 rounded-full bg-input-surface grid place-items-center text-xs",
+		children: message.sender.name?.[0]
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "min-w-0",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 text-xs text-description",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "font-medium",
+				children: message.sender.name
+			}), /* @__PURE__ */ jsx("span", { children: timeOf(message) })]
+		}), children]
+	})]
+});
+/** Comments: the quoted anchor above the comment, and a resolve control. */
+var CommentChrome = ({ message, children }) => /* @__PURE__ */ jsxs(Row, {
+	classNames: mx("border-b border-subdued-separator", message.properties?.resolved && "opacity-50"),
+	children: [
+		/* @__PURE__ */ jsx("p", {
+			className: "mb-1 ps-2 border-s-2 border-separator text-xs text-description line-clamp-1",
+			children: String(message.properties?.anchor ?? "")
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 text-xs text-description",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium",
+					children: message.sender.name
+				}),
+				/* @__PURE__ */ jsx("span", { children: timeOf(message) }),
+				/* @__PURE__ */ jsx("span", { className: "grow" }),
+				/* @__PURE__ */ jsx(IconButton, {
+					icon: message.properties?.resolved ? "ph--check-circle--regular" : "ph--circle--regular",
+					iconOnly: true,
+					label: "Resolve",
+					variant: "ghost",
+					size: 3
+				})
+			]
+		}),
+		children
+	]
+});
+/** Transcription: a timestamp and speaker in the gutter, and no separators — it reads as one text. */
+var TranscriptChrome = ({ message, children }) => /* @__PURE__ */ jsxs(Row, {
+	classNames: "grid grid-cols-[5rem_1fr] gap-2 py-0.5",
+	children: [/* @__PURE__ */ jsx("div", {
+		className: "text-xs text-description tabular-nums",
+		children: timeOf(message, {
+			hour: "2-digit",
+			minute: "2-digit",
+			second: "2-digit"
+		})
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "min-w-0",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "me-2 text-xs font-medium text-description",
+			children: message.sender.name
+		}), children]
+	})]
+});
+//#endregion
+//#region src/testing/stream.ts
+/**
+* Word-by-word stream, the shape a model emits: chunks of a few words at an uneven cadence.
+*
+* Whitespace is preserved as its own token so a chunk boundary never fuses two words, which would
+* corrupt the markdown the item is parsing mid-stream.
+*/
+async function* textStream(text, options = {}) {
+	const { chunkDelay = 120, variance = .4, wordsPerChunk = 4 } = options;
+	const chunkSize = Math.max(1, Math.floor(wordsPerChunk));
+	const tokens = text.match(/\S+|\s+/g) ?? [];
+	let index = 0;
+	while (index < tokens.length) {
+		const chunk = [];
+		let words = 0;
+		while (index < tokens.length && words < chunkSize) {
+			const token = tokens[index++];
+			chunk.push(token);
+			if (token.trim()) words++;
+		}
+		yield chunk.join("");
+		await new Promise((resolve) => setTimeout(resolve, chunkDelay * (1 + (Math.random() - .5) * variance * 2)));
+	}
+}
+/**
+* A plausible assistant answer: prose, a list, a code block and a closing paragraph — enough
+* structure that the item re-parses markdown as the text arrives, rather than growing one flat
+* paragraph.
+*/
+var createAnswer = () => [
+	random.lorem.paragraph(),
+	"",
+	`## ${random.lorem.sentence(3)}`,
+	"",
+	random.lorem.paragraph(),
+	"",
+	`- **${random.lorem.words(2)}** — ${random.lorem.sentence(8)}`,
+	`- **${random.lorem.words(2)}** — ${random.lorem.sentence(10)}`,
+	`- **${random.lorem.words(2)}** — ${random.lorem.sentence(6)}`,
+	"",
+	"```ts",
+	"const feed = useQuery(db, Query.from(feed));",
+	"const hits = searchFeed(messages, renderer, query);",
+	"```",
+	"",
+	random.lorem.paragraph()
+].join("\n");
+//#endregion
+//#region src/testing/turn.ts
+/**
+* One assistant turn as the blocks a model actually emits, arriving in order.
+*
+* The text-only stream exercises the easy half of reconciliation: a tail that only ever grows, which
+* the item appends. A real turn is harder in three ways, and each is a separate way for an item to
+* be rebuilt instead of extended —
+*
+* 1. a **status** block appears first and is removed once work begins, so the document shrinks;
+* 2. **reasoning** streams inside an unclosed tag and is closed when it completes, which rewrites
+*    the end of the document rather than appending to it;
+* 3. a **tool call** lands whole, then its **result** arrives as a second block after it.
+*
+* Yields the complete block array at each step; the caller replaces the message's blocks with it.
+*/
+async function* streamTurn({ chunkDelay = 120, wordsPerChunk = 4 } = {}) {
+	const pause = () => new Promise((resolve) => setTimeout(resolve, chunkDelay));
+	const status = {
+		_tag: "status",
+		statusText: "Thinking…",
+		pending: true
+	};
+	yield [status];
+	await pause();
+	let reasoning = "";
+	for await (const chunk of textStream(random.lorem.paragraph(), {
+		chunkDelay,
+		wordsPerChunk
+	})) {
+		reasoning += chunk;
+		yield [status, {
+			_tag: "reasoning",
+			reasoningText: reasoning,
+			pending: true
+		}];
+	}
+	const reasoned = {
+		_tag: "reasoning",
+		reasoningText: reasoning
+	};
+	yield [reasoned];
+	await pause();
+	const toolCallId = `tool-${random.number.int({
+		min: 1e3,
+		max: 9999
+	})}`;
+	const call = {
+		_tag: "toolCall",
+		toolCallId,
+		name: "search",
+		input: "{}",
+		providerExecuted: false,
+		pending: true
+	};
+	yield [reasoned, call];
+	await pause();
+	const called = {
+		...call,
+		pending: false
+	};
+	const result = {
+		_tag: "toolResult",
+		toolCallId,
+		name: "search",
+		result: random.lorem.sentence(12),
+		providerExecuted: false
+	};
+	yield [
+		reasoned,
+		called,
+		result
+	];
+	await pause();
+	let text = "";
+	for await (const chunk of textStream(createAnswer(), {
+		chunkDelay,
+		wordsPerChunk
+	})) {
+		text += chunk;
+		yield [
+			reasoned,
+			called,
+			result,
+			{
+				_tag: "text",
+				text,
+				pending: true
+			}
+		];
+	}
+	yield [
+		reasoned,
+		called,
+		result,
+		{
+			_tag: "text",
+			text
+		},
+		{
+			_tag: "suggestion",
+			text: "Tell me more"
+		},
+		{
+			_tag: "suggestion",
+			text: "Show the sources"
+		}
+	];
+}
+//#endregion
+//#region src/testing/FeedStory.tsx
+/** Pause between one answer finishing and the next question arriving. */
+var TURN_DELAY = 800;
+/** A turn that is only a growing text tail: what every scenario but the assistant chat produces. */
+async function* textTurn(options) {
+	let text = "";
+	for await (const chunk of textStream(createAnswer(), options)) {
+		text += chunk;
+		yield [{
+			_tag: "text",
+			text,
+			pending: true
+		}];
+	}
+	yield [{
+		_tag: "text",
+		text
+	}];
+}
+var makeQuestion = () => Message.make({
+	sender: {
+		role: "user",
+		name: "Alice"
+	},
+	blocks: [{
+		_tag: "text",
+		text: random.lorem.sentence(8)
+	}]
+});
+var makeAnswer = () => Message.make({
+	sender: {
+		role: "assistant",
+		name: "Assistant"
+	},
+	blocks: [{
+		_tag: "text",
+		text: ""
+	}]
+});
+/**
+* Per-message chrome, supplied by the host rather than the engine — the thing a single thread-wide
+* document cannot do without injecting widgets into its own markdown.
+*/
+var TestChrome = ({ message, index, selected, onSelect, children }) => {
+	const role = message.sender.role ?? "user";
+	const time = new Date(message.created).toLocaleTimeString([], {
+		hour: "2-digit",
+		minute: "2-digit"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: mx("group relative grid grid-cols-[2rem_1fr] gap-2 px-2 py-2", selected && "bg-hover-surface"),
+		"data-testid": "feed.message",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-col items-center gap-1",
+				children: /* @__PURE__ */ jsx(Input.Root, { children: /* @__PURE__ */ jsx(Input.Checkbox, {
+					checked: selected,
+					onCheckedChange: () => onSelect(message.id, true),
+					"data-testid": "feed.message.select"
+				}) })
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "absolute right-1 top-1 flex gap-1 opacity-0 transition-opacity group-hover:opacity-100",
+				children: [
+					/* @__PURE__ */ jsx(IconButton, {
+						icon: "ph--git-branch--regular",
+						iconOnly: true,
+						label: "Fork",
+						variant: "ghost",
+						size: 3
+					}),
+					/* @__PURE__ */ jsx(IconButton, {
+						icon: "ph--arrow-counter-clockwise--regular",
+						iconOnly: true,
+						label: "Rewind",
+						variant: "ghost",
+						size: 3
+					}),
+					/* @__PURE__ */ jsx(IconButton, {
+						icon: "ph--arrow-bend-up-left--regular",
+						iconOnly: true,
+						label: "Reply",
+						variant: "ghost",
+						size: 3
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 text-xs text-description",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "font-medium",
+							children: message.sender.name ?? role
+						}),
+						/* @__PURE__ */ jsx("span", { children: time }),
+						/* @__PURE__ */ jsxs("span", {
+							className: "text-subdued",
+							children: ["#", index]
+						})
+					]
+				}), children]
+			})
+		]
+	});
+};
+/**
+* The one renderer every `MessageList` story uses; the stories differ only by args.
+*
+* Seeded history, a search over the model, message-set selection, and a play control that streams
+* turns into the tail until stopped — one harness, so a story is a set of arguments rather than
+* another component to keep in step.
+*/
+var FeedStory = ({ scenario, scrollPastEnd, count = 0, debug: debugProp, streaming: streamingProp = false, wordsPerChunk = 4, chunkDelay = 120, estimateSize }) => {
+	const definition = useMemo(() => scenario ? createScenario({
+		scenario,
+		count
+	}) : void 0, [scenario, count]);
+	const [messages, setMessages] = useState(() => definition?.messages ?? createMessages({ count }));
+	const [streaming, setStreaming] = useState(streamingProp);
+	const [answerId, setAnswerId] = useState();
+	const [selectedIds, setSelectedIds] = useState(/* @__PURE__ */ new Set());
+	const [copied, setCopied] = useState(null);
+	const [query, setQuery] = useState("");
+	const hits = useMemo(() => searchFeed(messages, defaultRenderer, query), [messages, query]);
+	const decorations = useMemo(() => hits.map(({ messageId, offset, length }) => ({
+		id: messageId,
+		range: {
+			offset,
+			length
+		},
+		kind: "search"
+	})), [hits]);
+	const isAnchor = definition?.isAnchor;
+	const model = useFeedModel(messages, { stops: isAnchor ?? "message" });
+	const { debug, toggleDebug, meter, viewportRef, sweeping, onSweep } = useFeedDebug({
+		scenario,
+		count,
+		estimateSize,
+		streaming,
+		enabled: debugProp
+	});
+	const handleAppend = useCallback(() => setMessages((prev) => [...prev, makeQuestion()]), []);
+	const handleReset = useCallback(() => {
+		setStreaming(false);
+		setAnswerId(void 0);
+		setMessages(definition?.messages ?? createMessages({ count }));
+	}, [count, definition]);
+	const handleCopy = useCallback(() => {
+		if (messages.length < 3) return;
+		setCopied(sliceFeed(messages, defaultRenderer, {
+			from: {
+				messageId: messages[0].id,
+				offset: 0
+			},
+			to: {
+				messageId: messages[2].id,
+				offset: 20
+			}
+		}));
+	}, [messages]);
+	useEffect(() => {
+		if (!streaming) return;
+		let cancelled = false;
+		(async () => {
+			while (!cancelled) {
+				const answer = makeAnswer();
+				setMessages((prev) => [
+					...prev,
+					makeQuestion(),
+					answer
+				]);
+				setAnswerId(answer.id);
+				const turn = scenario === "assistant" ? streamTurn({
+					wordsPerChunk,
+					chunkDelay
+				}) : textTurn({
+					wordsPerChunk,
+					chunkDelay
+				});
+				for await (const blocks of turn) {
+					if (cancelled) return;
+					setMessages((prev) => prev.map((message) => message.id === answer.id ? {
+						...message,
+						blocks
+					} : message));
+				}
+				setAnswerId(void 0);
+				await new Promise((resolve) => setTimeout(resolve, TURN_DELAY));
+			}
+		})();
+		return () => {
+			cancelled = true;
+			setMessages((prev) => {
+				const last = prev.at(-1);
+				return last && last.sender.role === "assistant" && !Message.extractText(last).length ? prev.slice(0, -1) : prev;
+			});
+		};
+	}, [
+		streaming,
+		wordsPerChunk,
+		chunkDelay,
+		scenario
+	]);
+	const onSelect = useCallback((id, additive) => {
+		setSelectedIds((current) => {
+			const next = new Set(additive ? current : []);
+			if (additive && next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	}, []);
+	return /* @__PURE__ */ jsx(DecorationsProvider, {
+		decorations,
+		children: /* @__PURE__ */ jsx(ItemSelectionProvider, {
+			selectedIds,
+			onSelect,
+			children: /* @__PURE__ */ jsxs(MessageList.Root, {
+				model,
+				renderer: definition?.renderer,
+				debug,
+				Chrome: definition?.Chrome ?? TestChrome,
+				Custom: definition?.Custom,
+				registry: definition?.registry,
+				estimateSize: estimateSize ?? definition?.estimateSize,
+				stickyBottom: definition?.stickyBottom ?? true,
+				scrollPastEnd,
+				children: [/* @__PURE__ */ jsxs(Panel.Root, { children: [/* @__PURE__ */ jsx(Panel.Toolbar, {
+					asChild: true,
+					children: /* @__PURE__ */ jsxs(Toolbar.Root, { children: [
+						/* @__PURE__ */ jsx(IconButton, {
+							icon: streaming ? "ph--stop--regular" : "ph--play--regular",
+							iconOnly: true,
+							label: streaming ? "Stop" : "Start",
+							"data-testid": "feed.stream.toggle",
+							onClick: () => setStreaming((value) => !value)
+						}),
+						/* @__PURE__ */ jsx(IconButton, {
+							icon: "ph--plus--regular",
+							iconOnly: true,
+							label: "Add message",
+							"data-testid": "feed.stream.append",
+							onClick: handleAppend
+						}),
+						/* @__PURE__ */ jsx(IconButton, {
+							icon: "ph--trash--regular",
+							iconOnly: true,
+							label: "Reset",
+							onClick: handleReset
+						}),
+						/* @__PURE__ */ jsx(IconButton, {
+							icon: debug ? "ph--bounding-box--fill" : "ph--bounding-box--regular",
+							iconOnly: true,
+							label: debug ? "Hide block outlines" : "Show block outlines",
+							"data-testid": "feed.debug.toggle",
+							onClick: toggleDebug
+						}),
+						/* @__PURE__ */ jsx(Toolbar.Separator, {}),
+						/* @__PURE__ */ jsx(Input.Root, { children: /* @__PURE__ */ jsx(Input.TextInput, {
+							placeholder: "Search…",
+							value: query,
+							onChange: (event) => setQuery(event.target.value),
+							"data-testid": "feed.search"
+						}) }),
+						/* @__PURE__ */ jsx(FindButton, { hits }),
+						/* @__PURE__ */ jsx(IconButton, {
+							icon: "ph--copy--regular",
+							iconOnly: true,
+							label: "Copy range",
+							onClick: handleCopy
+						}),
+						/* @__PURE__ */ jsx(IconButton, {
+							icon: sweeping ? "ph--stop--regular" : "ph--arrows-down-up--regular",
+							iconOnly: true,
+							label: sweeping ? "Stop sweep" : "Sweep (measure a pass)",
+							"data-testid": "feed.sweep",
+							onClick: onSweep
+						}),
+						/* @__PURE__ */ jsx("div", { className: "grow" }),
+						/* @__PURE__ */ jsx(NavButtons, {})
+					] })
+				}), /* @__PURE__ */ jsxs(Panel.Content, {
+					classNames: "relative dx-container",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "z-10 absolute left-0 top-0 bottom-0 grid grid-rows-[1fr_4fr_1fr] justify-center",
+						children: /* @__PURE__ */ jsx(FeedOutline, {
+							classNames: "row-start-2",
+							messages
+						})
+					}), /* @__PURE__ */ jsx(MessageList.Viewport, {
+						classNames: "absolute inset-0",
+						padding: true,
+						ref: viewportRef
+					})]
+				})] }), /* @__PURE__ */ jsx(FeedStats, {
+					meter,
+					streaming,
+					selected: selectedIds.size,
+					hits: hits.length
+				})]
+			})
+		})
+	});
+};
+/**
+* The outline of a feed: one tick per prompt, in message-index space.
+*
+* `OutlineMarker.range` is "the document's own position space", which for a feed is the message
+* index — so a marker is `[index, index + 1)` and the visible range is the mounted window. No
+* pixel offsets are involved, which is what makes this survive rows whose heights are still
+* estimates.
+*/
+var FeedOutline = ({ classNames, messages }) => {
+	const { currentIndex, scrollToIndex } = useMessageList("FeedOutline");
+	const markers = useMemo(() => {
+		return messages.map((message, index) => ({
+			message,
+			index
+		})).filter(({ message }) => message.sender.role === "user").map(({ message, index }) => ({
+			id: message.id,
+			title: `#${index} · ${message.sender.name ?? message.sender.role}`,
+			description: Message.extractText(message).replace(/<[^>]*>/g, " ").split("\n").map((line) => line.trim()).find(Boolean)?.slice(0, 160),
+			range: {
+				from: index,
+				to: index + 1
+			}
+		}));
+	}, [messages]);
+	const current = useMemo(() => {
+		return ([...markers].reverse().find(({ range: { from } }) => from <= currentIndex) ?? markers[0])?.range;
+	}, [markers, currentIndex]);
+	const handleSelect = useCallback((marker) => scrollToIndex(marker.range.from, {
+		align: "start",
+		behavior: "smooth"
+	}), [scrollToIndex]);
+	if (!markers.length) return /* @__PURE__ */ jsx("div", {});
+	return /* @__PURE__ */ jsx(Outline, {
+		classNames: ["justify-self-center", classNames],
+		markers,
+		visibleRange: current,
+		onSelect: handleSelect
+	});
+};
+/** Scroll-to-hit lives in the toolbar, outside the viewport — the reason Root is headless. */
+var FindButton = ({ hits }) => {
+	const { scrollToIndex } = useMessageList("FindButton");
+	const handleFind = useCallback(() => {
+		const hit = hits[0];
+		if (hit) scrollToIndex(hit.index, {
+			align: "center",
+			behavior: "smooth"
+		});
+	}, [hits, scrollToIndex]);
+	return /* @__PURE__ */ jsx(IconButton, {
+		icon: "ph--magnifying-glass--regular",
+		iconOnly: true,
+		label: "Find",
+		onClick: handleFind
+	});
+};
+/** Move by one message, or to either end, from the list's cursor (what the arrow keys also move). */
+var NavButtons = () => {
+	const { currentIndex: current, count, navigation, scrollToIndex, scrollToBottom } = useMessageList("NavButtons");
+	const step = navigation.step;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(IconButton, {
+			icon: "ph--arrow-line-up--regular",
+			iconOnly: true,
+			label: "First message",
+			variant: "ghost",
+			disabled: current <= 0,
+			"data-testid": "feed.nav.top",
+			onClick: () => scrollToIndex(0, {
+				align: "start",
+				behavior: "smooth"
+			})
+		}),
+		/* @__PURE__ */ jsx(IconButton, {
+			icon: "ph--caret-up--regular",
+			iconOnly: true,
+			label: "Previous message",
+			variant: "ghost",
+			disabled: current <= 0,
+			"data-testid": "feed.nav.back",
+			onClick: () => step(-1)
+		}),
+		/* @__PURE__ */ jsx(IconButton, {
+			icon: "ph--caret-down--regular",
+			iconOnly: true,
+			label: "Next message",
+			variant: "ghost",
+			disabled: current >= count - 1,
+			"data-testid": "feed.nav.forward",
+			onClick: () => step(1)
+		}),
+		/* @__PURE__ */ jsx(IconButton, {
+			icon: "ph--arrow-line-down--regular",
+			iconOnly: true,
+			label: "Last message",
+			variant: "ghost",
+			disabled: count === 0,
+			"data-testid": "feed.nav.bottom",
+			onClick: () => scrollToBottom({ behavior: "smooth" })
+		})
+	] });
+};
+//#endregion
+//#region src/testing/MessageWindow.tsx
+var DefaultChrome = ({ children }) => /* @__PURE__ */ jsx(Fragment$1, { children });
+var MessageWindow = ({ messages, renderer = defaultRenderer, Chrome = DefaultChrome, Custom, estimateSize = 120, gutter, sticky, reserve, onChange, controllerRef }) => {
+	const [selectedIds, setSelectedIds] = useState(/* @__PURE__ */ new Set());
+	const onSelect = useCallback((id) => setSelectedIds((current) => new Set(current).add(id)), []);
+	const model = useListModel(messages, (message) => message.id);
+	const extents = useMemo(() => ({ of: (index) => {
+		const message = messages[index];
+		if (!message) return typeof estimateSize === "number" ? estimateSize : 120;
+		return typeof estimateSize === "function" ? estimateSize(message, index) : estimateSize;
+	} }), [messages, estimateSize]);
+	return /* @__PURE__ */ jsx(Window, {
+		classNames: "h-full",
+		model,
+		extents,
+		sticky,
+		reserve,
+		onChange,
+		controllerRef,
+		children: (index) => {
+			const message = messages[index];
+			if (!message) return null;
+			return /* @__PURE__ */ jsx(Column.Root, {
+				gutter,
+				children: /* @__PURE__ */ jsx(Column.Center, { children: /* @__PURE__ */ jsx(Chrome, {
+					message,
+					index,
+					selected: selectedIds.has(message.id),
+					onSelect,
+					children: /* @__PURE__ */ jsx(Item, {
+						content: renderer(message),
+						message,
+						Custom
+					})
+				}) })
+			});
+		}
+	});
+};
+/**
+* The item's content, resolved without the list.
+*
+* `MessageList.Item` reads the renderer, the registry, the hits and the widget census from
+* `MessageList.Root`'s context, so it cannot be rendered outside the very thing this exists to
+* replace. Repeated here rather than refactored: making the item take its dependencies as props is
+* the right change and belongs in the retrofit, not in a harness written to measure it.
+*/
+var Item = ({ content, message, Custom }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	content.kind === "markdown" && /* @__PURE__ */ jsx(MarkdownBlock, { text: content.text }),
+	content.kind === "html" && /* @__PURE__ */ jsx(HtmlBlock, { html: content.html }),
+	content.kind === "custom" && Custom && /* @__PURE__ */ jsx(Custom, {
+		content,
+		message
+	})
+] });
+/** Kept for the stories that drive it; the ref is the same handle `placement/*` uses. */
+var useMessageWindow = () => useRef(null);
+//#endregion
+export { BareEditorItem, DecoratedEditorItem, FeedStats, FeedStory, MarkdownEditorItem, MarkdownProbeItem, MessageWindow, TextItem, ThemedEditorItem, chatRegistry, createAnswer, createMessages, createScenario, streamTurn, sweepScroll, textStream, useFeedDebug, useMessageWindow };
+
+//# sourceMappingURL=testing.mjs.map