@dxos/react-ui-feed 0.11.1

package/dist/lib/chunk-src.mjs

@@ -0,0 +1,2228 @@
+import { createContext, memo, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { EditorState, StateEffect, StateField } from "@codemirror/state";
+import { Decoration, EditorView } from "@codemirror/view";
+import DOMPurify from "dompurify";
+import { createPortal } from "react-dom";
+import { Column, Popover, ScrollArea, composable, composableProps, setRef, useThemeContext } from "@dxos/react-ui";
+import { createBasicExtensions, createMarkdownExtensions, createThemeExtensions, decorateMarkdown, extendedMarkdown, xmlBlockDecoration, xmlFormatting, xmlTags } from "@dxos/ui-editor";
+import { createContext as createContext$1 } from "@radix-ui/react-context";
+import * as Atom from "effect/unstable/reactivity/Atom";
+import * as Registry from "effect/unstable/reactivity/AtomRegistry";
+import { mx } from "@dxos/ui-theme";
+//#region src/hooks/follow.ts
+var DEFAULT_MAX_SPEED = 2;
+var DEFAULT_ACCELERATION = 12;
+var DEFAULT_DECELERATION = 6;
+/**
+* Gentler than the ramp up, and deliberately so.
+*
+* Braking distance is `v²/2d`, so matching the two rates sheds full speed in three rows — a travel
+* of any length then cruises to within a few rows of the target and stops, which reads as an abrupt
+* halt however correct the curve is. At a third of the acceleration the landing occupies nine rows
+* and a second and a half, which is long enough to see.
+*/
+var DEFAULT_ROW_HEIGHT = 120;
+/** Within this distance the follow has arrived; below it the animation would only jitter. */
+var ARRIVED = .5;
+/**
+* Speed for the next frame of a follow.
+*
+* Ramps up to `maxSpeed` and back down so the travel starts and ends gently rather than jumping.
+* The cap is whichever is lower: the ceiling, or the speed from which the remaining distance can
+* still be shed at `acceleration` (`v = sqrt(2·a·d)`) — that second term is what turns the arrival
+* into a deceleration instead of a stop, and what keeps a growing target at cruise speed.
+*
+* Acceleration is rate-limited so a start is gradual; **deceleration is not**, because the braking
+* curve is already a smooth ramp to zero and easing onto it instead leaves the speed above the
+* curve for the whole approach — the follow then runs out of distance while still moving and the
+* arrival reads as a stop rather than a landing.
+*/
+var stepVelocity = ({ velocity, distance, dt, maxSpeed, acceleration, deceleration = acceleration }) => {
+	const braking = Math.sqrt(2 * deceleration * Math.max(distance, 0));
+	const desired = Math.min(maxSpeed, braking);
+	return velocity < desired ? Math.min(desired, velocity + acceleration * dt) : desired;
+};
+/**
+* **Not wired into `MessageList` at present.** The placement engine follows the tail by holding an
+* intent and correcting the offset, which arrives instantly; this class is the animated travel the
+* old engine used, kept with its tests because the glide is worth having back and nothing about it
+* was wrong. Wiring it is a decision about feel, not a repair.
+*/
+/**
+* Keeps an element scrolled to its bottom while its content grows.
+*
+* Native `scrollTo({ behavior: 'smooth' })` restarts its easing on every call, so a target that
+* moves every chunk never leaves the start of the curve — the motion reads as a stutter. This
+* carries velocity across frames instead: it accelerates as a stream begins, cruises while content
+* keeps arriving, and decelerates onto the tail when it stops.
+*
+* `@dxos/ui-editor`'s `createCrawler` follows a streaming CodeMirror document the same way, with a
+* critically-damped spring. The two are deliberately separate: that one is bound to `view.scrollDOM`
+* and driven by editor effects, where a feed owns its own scroll container. The models differ in
+* feel — a spring's speed falls off with distance, where this holds a ceiling and brakes onto the
+* target, which keeps a fast stream at a constant rate rather than an ever-widening lag.
+*/
+var ScrollFollower = class {
+	_element;
+	#maxSpeed;
+	#acceleration;
+	#deceleration;
+	#rowHeight;
+	#trailing;
+	#frame;
+	#velocity = 0;
+	#timestamp = 0;
+	#braking = false;
+	constructor(_element, { maxSpeed = DEFAULT_MAX_SPEED, acceleration = DEFAULT_ACCELERATION, deceleration = DEFAULT_DECELERATION, rowHeight = () => DEFAULT_ROW_HEIGHT, trailing = () => 0 } = {}) {
+		this._element = _element;
+		this.#maxSpeed = maxSpeed;
+		this.#acceleration = acceleration;
+		this.#deceleration = deceleration;
+		this.#rowHeight = rowHeight;
+		this.#trailing = trailing;
+	}
+	/**
+	* The bottom of the last row, which is not the bottom of the document.
+	*
+	* A feed may reserve empty space below its last row so that row can be brought to the top of the
+	* viewport. That space is somewhere the reader may go and nowhere the follow should: chasing the
+	* element's own maximum walks the feed off the end of the conversation and keeps going.
+	*/
+	get #bottom() {
+		return this._element.scrollHeight - this.#trailing() - this._element.clientHeight;
+	}
+	get running() {
+		return this.#frame !== void 0;
+	}
+	/** Current speed, rows/s. Exposed so a harness can show the ramp. */
+	get velocity() {
+		return this.#velocity / Math.max(this.#rowHeight(), 1);
+	}
+	/** Starts (or continues) travelling towards the bottom. Safe to call on every content change. */
+	start() {
+		this.#braking = false;
+		if (this.#frame !== void 0) return;
+		this.#timestamp = performance.now();
+		this.#frame = requestAnimationFrame(this.#tick);
+	}
+	/**
+	* Coasts to a halt, shedding speed at `deceleration` — what a stream ending or a stop control
+	* means. Cutting the animation instead would halt mid-glide, which is the one motion the reader
+	* cannot have caused and so reads as a fault.
+	*/
+	stop() {
+		if (this.#frame === void 0) {
+			this.#velocity = 0;
+			return;
+		}
+		this.#braking = true;
+	}
+	/**
+	* Halts immediately, discarding the velocity — the reader has taken over, or the list is going
+	* away. Coasting here would fight a hand already on the scrollbar.
+	*/
+	cancel() {
+		if (this.#frame !== void 0) {
+			cancelAnimationFrame(this.#frame);
+			this.#frame = void 0;
+		}
+		this.#braking = false;
+		this.#velocity = 0;
+	}
+	/** Jumps to the bottom with no animation. */
+	jump() {
+		this.cancel();
+		this._element.scrollTop = Math.max(0, this.#bottom);
+	}
+	#tick = (timestamp) => {
+		const dt = Math.min((timestamp - this.#timestamp) / 1e3, .05);
+		this.#timestamp = timestamp;
+		const target = Math.max(0, this.#bottom);
+		const distance = target - this._element.scrollTop;
+		if (this.#braking) {
+			const rowHeight = Math.max(this.#rowHeight(), 1);
+			this.#velocity = Math.max(0, this.#velocity - this.#deceleration * rowHeight * dt);
+			if (this.#velocity <= 0 || distance <= ARRIVED) {
+				this.#frame = void 0;
+				this.#velocity = 0;
+				this.#braking = false;
+				return;
+			}
+			this._element.scrollTop = Math.min(target, this._element.scrollTop + this.#velocity * dt);
+			this.#frame = requestAnimationFrame(this.#tick);
+			return;
+		}
+		if (distance <= ARRIVED) {
+			this._element.scrollTop = target;
+			this.#frame = void 0;
+			this.#velocity = 0;
+			return;
+		}
+		const rowHeight = Math.max(this.#rowHeight(), 1);
+		this.#velocity = stepVelocity({
+			velocity: this.#velocity,
+			distance,
+			dt,
+			maxSpeed: this.#maxSpeed * rowHeight,
+			acceleration: this.#acceleration * rowHeight,
+			deceleration: this.#deceleration * rowHeight
+		});
+		this._element.scrollTop = Math.min(target, this._element.scrollTop + this.#velocity * dt);
+		this.#frame = requestAnimationFrame(this.#tick);
+	};
+};
+//#endregion
+//#region src/hooks/useDecorations.tsx
+var DecorationsContext = createContext(/* @__PURE__ */ new Map());
+/**
+* THE PATTERN for cross-cutting per-item data (SPEC §Aspects), not a feed feature: a provider at
+* the host carries what producers made, and an item asks for its own by id. The list neither knows
+* nor routes — `hits` left its API entirely. Grouped once per change rather than filtered per item,
+* so a long feed stays O(decorations).
+*/
+var DecorationsProvider = ({ decorations, children }) => {
+	const byId = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const decoration of decorations ?? []) {
+			const list = map.get(decoration.id) ?? [];
+			list.push(decoration);
+			map.set(decoration.id, list);
+		}
+		return map;
+	}, [decorations]);
+	return /* @__PURE__ */ jsx(DecorationsContext.Provider, {
+		value: byId,
+		children
+	});
+};
+var NONE = [];
+/** An item's own decorations. Items work without a provider — they are simply undecorated. */
+var useDecorations = (id) => {
+	return useContext(DecorationsContext).get(id) ?? NONE;
+};
+//#endregion
+//#region src/hooks/useFeedNavigation.ts
+/**
+* The one navigation seam (SPEC: useFeedNavigation): toolbar buttons, arrow keys, the outline rail
+* and the minimap all call this, so they cannot disagree about what a step is.
+*
+* Stepping is from the row containing the scroll offset. The stop above it begins strictly higher
+* and the stop below strictly lower, so every press moves the viewport — an index compared against
+* a position cannot promise that while positions are still being measured. Steps glide (corrections
+* move the window, not the scroll, so nothing cancels the animation); far jumps are instant, since
+* a glide across unmounted rows is a journey over a blank screen.
+*
+* Distinct from react-ui-list's `useListNavigation`, which is focus traversal over fully-mounted
+* rows — a different problem in the same naming family.
+*/
+var useFeedNavigation = ({ controller, stops, current, count, scrollPastEnd, onNavigate }) => {
+	const jumpTo = useCallback((index, behavior = "auto") => {
+		onNavigate?.(index);
+		const align = !scrollPastEnd && index >= count() - 1 ? "end" : "start";
+		controller.current?.scrollToIndex(index, align, behavior);
+	}, [
+		controller,
+		count,
+		scrollPastEnd,
+		onNavigate
+	]);
+	return {
+		step: useCallback((delta) => {
+			const all = stops();
+			if (!all.length) return;
+			const at = current();
+			const next = delta > 0 ? all.find(({ index }) => index > at) ?? all[all.length - 1] : [...all].reverse().find(({ index }) => index < at) ?? all[0];
+			jumpTo(next.index, "smooth");
+		}, [
+			stops,
+			current,
+			jumpTo
+		]),
+		jumpTo,
+		first: useCallback(() => jumpTo(0), [jumpTo]),
+		last: useCallback(() => jumpTo(count() - 1), [jumpTo, count])
+	};
+};
+//#endregion
+//#region src/hooks/useFollow.ts
+/** Distance from the end within which the reader counts as being at it. */
+var STICKY_THRESHOLD = 32;
+/** How long after a gesture a scroll is still attributable to the reader. */
+var GESTURE_WINDOW = 300;
+/**
+* The sticky tail as an intent (SPEC: useFollow) — a policy over the window, not part of it.
+*
+* Withdrawn by one thing only: a scroll that moves *backwards*. That is the reader; a correction
+* never moves the offset back, it moves the end away. Re-deriving the intent from proximity on
+* every commit cannot survive its own corrections — measuring the tail grows the document under a
+* reader who has not moved, the gap opens past any threshold worth having, and the follow reads
+* that as the reader leaving and disengages for good (`bridge/Tail`, the second defect).
+*
+* Reusable for any streaming container — transcripts, logs — because nothing here knows about
+* messages: it needs a scroller, a placement, and the two numbers that say the content grew.
+*/
+var useFollow = ({ scrollerRef, placement, extent, count, axis = "block", reserve = 0, enabled, glide = true }) => {
+	const following = useRef(!!enabled);
+	const wasEnabled = useRef(enabled);
+	if (wasEnabled.current !== enabled) {
+		wasEnabled.current = enabled;
+		following.current = !!enabled;
+	}
+	/**
+	* Where the reader has to be for the last row's rendered edge to rest on the viewport's.
+	*
+	* From the row's own rectangle when it is mounted, and from the arithmetic only when it is not:
+	* measured extents are rounded to integers and rendered rows are fractional, so over a mounted
+	* window the sum drifts from the layout by tens of pixels — an "arrived" that the reader can see
+	* is short. The rect already includes the window's transform, so the delta is exact.
+	*/
+	const endTarget = useCallback(() => {
+		const scroller = scrollerRef.current;
+		if (!scroller) return 0;
+		const last = scroller.querySelector(`[data-index="${count - 1}"]`);
+		if (last) {
+			const current = axis === "block" ? scroller.scrollTop : scroller.scrollLeft;
+			const delta = axis === "block" ? last.getBoundingClientRect().bottom - scroller.getBoundingClientRect().bottom : last.getBoundingClientRect().right - scroller.getBoundingClientRect().right;
+			return Math.max(0, Math.round(current + delta));
+		}
+		return placement.endOffset();
+	}, [
+		count,
+		axis,
+		placement,
+		scrollerRef.current
+	]);
+	const follower = useMemo(() => {
+		const scroller = scrollerRef.current;
+		if (!scroller || axis !== "block") return;
+		return new ScrollFollower(scroller, {
+			maxSpeed: 8,
+			acceleration: 32,
+			deceleration: 10,
+			trailing: () => scroller.scrollHeight - scroller.clientHeight - endTarget(),
+			rowHeight: () => {
+				const { first, last } = placement.layout();
+				const sizes = [];
+				for (let index = first; index <= last; index++) sizes.push(placement.extentOf(index));
+				sizes.sort((a, b) => a - b);
+				const median = sizes.length ? sizes[Math.floor(sizes.length / 2)] : 100;
+				return Math.min(median, scroller.clientHeight || median);
+			}
+		});
+	}, [
+		scrollerRef.current,
+		axis,
+		placement,
+		endTarget
+	]);
+	useLayoutEffect(() => () => follower?.cancel(), [follower]);
+	const lastOffset = useRef(0);
+	const gestureAt = useRef(0);
+	useLayoutEffect(() => {
+		const scroller = scrollerRef.current;
+		if (!scroller || !enabled) return;
+		const onGesture = () => {
+			gestureAt.current = performance.now();
+		};
+		const onScroll = () => {
+			const current = axis === "block" ? scroller.scrollTop : scroller.scrollLeft;
+			const viewport = axis === "block" ? scroller.clientHeight : scroller.clientWidth;
+			const total = axis === "block" ? scroller.scrollHeight : scroller.scrollWidth;
+			const back = current < lastOffset.current - 1;
+			lastOffset.current = current;
+			if (total - reserve - current - viewport <= STICKY_THRESHOLD) following.current = true;
+			else if (back && performance.now() - gestureAt.current < GESTURE_WINDOW) {
+				following.current = false;
+				follower?.cancel();
+			}
+		};
+		scroller.addEventListener("scroll", onScroll, { passive: true });
+		for (const event of [
+			"wheel",
+			"touchmove",
+			"keydown",
+			"pointerdown"
+		]) scroller.addEventListener(event, onGesture, { passive: true });
+		return () => {
+			scroller.removeEventListener("scroll", onScroll);
+			for (const event of [
+				"wheel",
+				"touchmove",
+				"keydown",
+				"pointerdown"
+			]) scroller.removeEventListener(event, onGesture);
+		};
+	}, [
+		scrollerRef.current,
+		enabled,
+		axis,
+		reserve,
+		follower
+	]);
+	const positioned = useRef(false);
+	useLayoutEffect(() => {
+		const scroller = scrollerRef.current;
+		if (!enabled || !following.current || !count || !scroller) return;
+		const target = endTarget();
+		const gap = target - (axis === "block" ? scroller.scrollTop : scroller.scrollLeft);
+		if (Math.abs(gap) <= 1) {
+			positioned.current = true;
+			return;
+		}
+		const viewport = axis === "block" ? scroller.clientHeight : scroller.clientWidth;
+		if (positioned.current && glide && follower && gap > 0 && gap <= viewport) {
+			follower.start();
+			return;
+		}
+		follower?.cancel();
+		placement.scrollTo(target);
+		lastOffset.current = target;
+		if (axis === "block") scroller.scrollTop = target;
+		else scroller.scrollLeft = target;
+	}, [
+		enabled,
+		count,
+		extent,
+		placement,
+		axis,
+		glide,
+		follower,
+		endTarget,
+		scrollerRef.current
+	]);
+	return { onNavigate: useCallback((index) => {
+		const wants = index >= count - 1;
+		following.current = !!enabled && wants;
+		if (!wants) follower?.cancel();
+	}, [
+		enabled,
+		count,
+		follower
+	]) };
+};
+//#endregion
+//#region src/hooks/useItemSelection.tsx
+var ItemSelectionContext = createContext({});
+/**
+* The item-side hook of the decoration pattern applied to selection (SPEC: useItemSelection): an
+* item asks for its own `{ selected, toggle }` by id instead of the list threading `selectedIds`
+* through props. Selection is model-space ids, so virtualization is untouched: an unmounted item is
+* still selected, and mounts knowing it.
+*
+* The provider is deliberately the thinnest thing that works — a set and a callback. Mode policies
+* (single | multi | range) belong to `react-ui-list`'s `useListSelection`, which a host composes
+* *above* this provider; teaching this package about modes would be rebuilding that hook.
+*/
+var ItemSelectionProvider = ({ selectedIds, onSelect, children }) => /* @__PURE__ */ jsx(ItemSelectionContext.Provider, {
+	value: {
+		selectedIds,
+		onSelect
+	},
+	children
+});
+/**
+* The whole selection value, for a component that renders many items in one pass.
+*
+* A row loop cannot call `useItemSelection` per row — hooks do not run in loops — so the viewport
+* reads the value once and derives per-row state; item-shaped components use the per-id hook.
+*/
+var useItemSelectionValue = () => useContext(ItemSelectionContext);
+var useItemSelection = (id) => {
+	const { selectedIds, onSelect } = useContext(ItemSelectionContext);
+	const toggle = useCallback((additive = true) => onSelect?.(id, additive), [id, onSelect]);
+	return {
+		selected: selectedIds?.has(id) ?? false,
+		toggle
+	};
+};
+/** Reads the additive intent off a gesture, so callers do not each invent the modifier rule. */
+var isAdditive = (event) => event.metaKey || event.ctrlKey || event.shiftKey;
+//#endregion
+//#region src/components/Block/selection-group.ts
+/** Creates a group; one per feed, provided to its items by `MessageList.Root`. */
+var createSelectionGroup = () => {
+	const views = /* @__PURE__ */ new Set();
+	return {
+		register: (view) => {
+			views.add(view);
+			return () => views.delete(view);
+		},
+		claim: (view) => {
+			for (const other of views) {
+				if (other === view || other.state.selection.main.empty) continue;
+				other.dispatch({ selection: { anchor: 0 } });
+			}
+		}
+	};
+};
+var SelectionGroupContext = createContext(void 0);
+/** The enclosing feed's selection group, or a private one when an item is used standalone. */
+var useSelectionGroup = () => {
+	const provided = useContext(SelectionGroupContext);
+	const fallback = useMemo(createSelectionGroup, []);
+	return provided ?? fallback;
+};
+//#endregion
+//#region src/components/Block/highlight.ts
+var setHighlights = StateEffect.define();
+var mark = Decoration.mark({ class: "dx-feed-hit" });
+var clamp = (offset, length) => Math.max(0, Math.min(offset, length));
+/**
+* Highlights pushed in from the model.
+*
+* Search runs over the feed's projection rather than per-view (most messages are never mounted), so
+* the item receives ranges instead of owning search state.
+*/
+var highlights = StateField.define({
+	create: () => Decoration.none,
+	update: (value, tr) => {
+		for (const effect of tr.effects) if (effect.is(setHighlights)) {
+			const length = tr.state.doc.length;
+			return Decoration.set(effect.value.map(([from, to]) => [clamp(from, length), clamp(to, length)]).filter(([from, to]) => from < to).map(([from, to]) => mark.range(from, to)), true);
+		}
+		return tr.docChanged ? value.map(tr.changes) : value;
+	},
+	provide: (field) => EditorView.decorations.from(field)
+});
+var highlightTheme = EditorView.baseTheme({ ".dx-feed-hit": {
+	backgroundColor: "var(--dx-accentFill)",
+	color: "var(--dx-accentFillText)",
+	borderRadius: "2px"
+} });
+//#endregion
+//#region src/components/Block/widget-state.tsx
+var WidgetStateContext = createContext(void 0);
+/** Scopes a widget's key to its message, so two messages' widgets cannot collide. */
+var WidgetScopeContext = createContext("");
+var WidgetStateProvider = ({ store, children }) => /* @__PURE__ */ jsx(WidgetStateContext.Provider, {
+	value: store,
+	children
+});
+var WidgetScopeProvider = ({ scope, children }) => /* @__PURE__ */ jsx(WidgetScopeContext.Provider, {
+	value: scope,
+	children
+});
+/** Creates the store a feed's widgets share. One per `MessageList.Root`. */
+var createWidgetStateStore = () => {
+	const values = /* @__PURE__ */ new Map();
+	return {
+		read: (key) => values.get(key),
+		write: (key, value) => {
+			values.set(key, value);
+		}
+	};
+};
+/**
+* `useState` for a widget, keyed so it survives the row being destroyed and rebuilt.
+*
+* The key must identify the widget within its message — its tag and position in the document, say —
+* and is scoped to the message automatically. Outside a feed this degrades to plain `useState`, so a
+* widget can still be rendered on its own.
+*/
+var useWidgetState = (key, initial) => {
+	const store = useContext(WidgetStateContext);
+	const scope = useContext(WidgetScopeContext);
+	const scoped = useMemo(() => `${scope}:${key}`, [scope, key]);
+	const [value, setValue] = useState(() => {
+		const stored = store?.read(scoped);
+		return stored === void 0 ? initial : stored;
+	});
+	return [value, useCallback((next) => {
+		store?.write(scoped, next);
+		setValue(next);
+	}, [store, scoped])];
+};
+//#endregion
+//#region src/components/Block/HtmlBlock.tsx
+/**
+* A message rendered as sanitized HTML — the email case, which is not markdown and cannot be a
+* CodeMirror document.
+*
+* Its presence is the reason the item renderer is generalized rather than markdown-only: the
+* engine owns virtualization, chrome and selection anchors, not what a message looks like inside.
+* As plain (non-contenteditable) DOM it is also the control case for cross-item selection.
+*/
+var HtmlBlock = memo(({ html }) => {
+	const sanitized = useMemo(() => DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }), [html]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "dx-feed-html",
+		dangerouslySetInnerHTML: { __html: sanitized }
+	});
+});
+HtmlBlock.displayName = "HtmlBlock";
+//#endregion
+//#region src/components/Block/extensions.ts
+/**
+* The extension set one item's document is built from.
+*
+* Everything that does not depend on the item is **built once and shared**, and that is the point of
+* this module rather than a tidiness. `EditorView.theme()` mints a new `StyleModule` and a new
+* generated class on every call, so a set built per item injects one stylesheet per row and
+* invalidates the whole document's style each time it does. Measured at ~14ms per row against ~2ms
+* for the identical set shared (`baseline/mount`) — six times the cost of the first fill, for
+* stylesheets that are all the same.
+*
+* Extensions are descriptors, not instances: a `StateField` or `ViewPlugin` in a shared array is
+* still instantiated per view, so sharing changes nothing but the identity CodeMirror dedupes on.
+*/
+var createBlockExtensions = ({ registry, editable = false, themeMode = "light", setWidgets } = {}) => [...sharedExtensions(registry, editable, themeMode), ...registry ? [xmlTags({
+	registry,
+	setWidgets: setWidgets ?? (() => {}),
+	bookmarks: ["prompt"]
+})] : []];
+/** Registries are compared by identity, so a feed's single registry is a single cache scope. */
+var NO_REGISTRY = {};
+var cache = /* @__PURE__ */ new WeakMap();
+var sharedExtensions = (registry, editable, themeMode) => {
+	const scope = registry ?? NO_REGISTRY;
+	let byVariant = cache.get(scope);
+	if (!byVariant) {
+		byVariant = /* @__PURE__ */ new Map();
+		cache.set(scope, byVariant);
+	}
+	const key = `${editable}:${themeMode}`;
+	let extensions = byVariant.get(key);
+	if (!extensions) {
+		extensions = build(registry, editable, themeMode);
+		byVariant.set(key, extensions);
+	}
+	return extensions;
+};
+var build = (registry, editable, themeMode) => [
+	createBasicExtensions({
+		readOnly: !editable,
+		editable,
+		lineWrapping: true
+	}),
+	createThemeExtensions({ themeMode }),
+	registry ? extendedMarkdown({ registry }) : createMarkdownExtensions(),
+	registry && xmlFormatting({ skip: ["prompt"] }),
+	decorateMarkdown(),
+	registry?.prompt && xmlBlockDecoration({
+		tag: "prompt",
+		hideTags: true
+	}),
+	highlights,
+	highlightTheme
+].filter(Boolean);
+//#endregion
+//#region src/components/Block/MarkdownBlock.tsx
+/**
+* One message as its own markdown document.
+*
+* Each item owns a document, so streaming appends and per-message editing stay local — where a
+* single thread-wide document needs a cursor and a range table to know which message it is touching.
+*/
+var MarkdownBlock = memo(({ text, editable = false, registry, hits, onWidgetsChange }) => {
+	const { themeMode } = useThemeContext();
+	const [view, setView] = useState(null);
+	const [widgets, setWidgets] = useState([]);
+	const rootRef = useRef(null);
+	const selectionGroup = useSelectionGroup();
+	const selectionGroupRef = useRef(selectionGroup);
+	selectionGroupRef.current = selectionGroup;
+	const extensions = useMemo(() => [...createBlockExtensions({
+		registry,
+		editable,
+		themeMode,
+		setWidgets
+	}), EditorView.updateListener.of((update) => {
+		if (update.selectionSet && !update.state.selection.main.empty) selectionGroupRef.current.claim(update.view);
+	})], [
+		editable,
+		themeMode,
+		registry
+	]);
+	const initialTextRef = useRef(text);
+	useLayoutEffect(() => {
+		const parent = rootRef.current;
+		if (!parent) return;
+		const instance = new EditorView({
+			parent,
+			state: EditorState.create({
+				doc: initialTextRef.current,
+				extensions
+			})
+		});
+		const unregister = selectionGroupRef.current.register(instance);
+		setView(instance);
+		return () => {
+			unregister();
+			instance.destroy();
+			setView(null);
+		};
+	}, [extensions]);
+	const currentRef = useRef(text);
+	useEffect(() => {
+		if (!view || currentRef.current === text) return;
+		const previous = currentRef.current;
+		currentRef.current = text;
+		initialTextRef.current = text;
+		view.dispatch(text.startsWith(previous) ? { changes: {
+			from: previous.length,
+			insert: text.slice(previous.length)
+		} } : { changes: {
+			from: 0,
+			to: view.state.doc.length,
+			insert: text
+		} });
+	}, [view, text]);
+	const highlighted = useRef(false);
+	useEffect(() => {
+		if (!view || !hits?.length && !highlighted.current) return;
+		highlighted.current = Boolean(hits?.length);
+		view.dispatch({ effects: setHighlights.of(hits ?? []) });
+	}, [view, hits]);
+	useEffect(() => {
+		onWidgetsChange?.(widgets.length);
+		return () => onWidgetsChange?.(0);
+	}, [widgets.length, onWidgetsChange]);
+	useEffect(() => {
+		if (!view || !widgets.length) return;
+		const observer = new ResizeObserver(() => view.requestMeasure());
+		for (const { root } of widgets) observer.observe(root);
+		return () => observer.disconnect();
+	}, [view, widgets]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", { ref: rootRef }), widgets.map(({ Component, root, id, props }) => /* @__PURE__ */ jsx("div", { children: createPortal(/* @__PURE__ */ jsx(Component, {
+		view: view ?? void 0,
+		...props
+	}), root) }, id))] });
+});
+MarkdownBlock.displayName = "MarkdownBlock";
+//#endregion
+//#region src/model/feed-model.ts
+/**
+* Default renderer: an `text/html` block wins (email), otherwise every block is flattened to
+* markdown. Block kinds the engine does not know become fenced JSON so nothing renders as blank.
+*/
+var defaultRenderer = (message) => createContent(message, false);
+/**
+* Assistant chat: as {@link defaultRenderer}, plus the reader's own turns marked with `<prompt>`.
+*
+* Separate because the tag is only meaningful where a widget registry knows it — a feed rendered
+* without one would show the reader their own angle brackets, which is what a human chat, a
+* transcript and a comment list all are.
+*/
+var chatRenderer = (message) => createContent(message, true);
+var createContent = (message, prompts) => {
+	const html = message.blocks.filter((block) => block._tag === "text").find((block) => block.mimeType === "text/html");
+	if (html) return {
+		kind: "html",
+		html: html.text
+	};
+	return {
+		kind: "markdown",
+		text: message.blocks.map((block) => blockToMarkdown(message, block, prompts)).filter(Boolean).join("\n\n")
+	};
+};
+/**
+* One block as markdown, with anything that is not prose emitted as an XML tag for a widget to
+* render. A message is the concatenation of these, which is what makes an item a document rather
+* than a component tree: the blocks are content, and the chrome around them belongs to the host.
+*/
+var blockToMarkdown = (message, block, prompts) => {
+	switch (block._tag) {
+		case "text": return prompts && message.sender.role === "user" ? tag("prompt", block.text, block) : block.text.trim();
+		case "reasoning": return tag("reasoning", block.reasoningText ?? block.redactedText ?? "", block);
+		case "status": return tag("status", block.statusText, block);
+		case "summary": return tag("summary", block.content, block);
+		case "suggestion": return tag("suggestion", block.text, block);
+		case "select": return block.options.length ? `<select>${block.options.map((option) => `<option>${escapeXml(option)}</option>`).join("")}</select>` : "";
+		case "toolCall": return `<toolCall id="${escapeXml(block.toolCallId)}" name="${escapeXml(block.name)}"${block.pending ? " pending=\"true\"" : ""} />`;
+		case "toolResult": return tag("toolResult", String(block.result ?? block.error ?? ""), block, `for="${escapeXml(block.name)}"`);
+		default: return tag("json", JSON.stringify(block), block);
+	}
+};
+/**
+* An XML tag holding block content.
+*
+* A pending block is emitted **unclosed**, which is the streaming contract: the item reconciles by
+* appending, so a closing tag written before the content is complete would have to be rewritten on
+* every chunk — and rewriting the document is what discards decorations and scroll position.
+*
+* Paragraph breaks inside the content are collapsed, since a blank line would end the enclosing
+* markdown block and leave the rest of the tag parsing as prose.
+*/
+var tag = (name, content, block, attributes) => {
+	const text = escapeXml(content.replace(/\n\n+/g, " ").trim());
+	if (!text.length && !block.pending) return "";
+	const open = `<${name}${attributes ? ` ${attributes}` : ""}>`;
+	return block.pending ? `${open}${text}` : `${open}${text}</${name}>`;
+};
+var escapeXml = (raw) => raw.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+/** Plain text of a message, used by search and copy so both read the same projection. */
+var messageText = (message, renderer) => {
+	const content = renderer(message);
+	switch (content.kind) {
+		case "markdown": return content.text;
+		case "html": return stripHtml(content.html);
+		case "custom": return "";
+	}
+};
+/** Crude tag strip — the engine only needs searchable/copyable text, not a parse tree. */
+var stripHtml = (html) => html.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();
+/**
+* Search the model rather than the DOM.
+*
+* Virtualization means most messages are not mounted, and a `viewType` filter can hide blocks that
+* are still in the model — neither is reachable by a per-view CodeMirror search, so thread-wide find
+* has to run over the projection.
+*/
+var searchFeed = (messages, renderer, query) => {
+	const hits = [];
+	if (!query.length) return hits;
+	const needle = query.toLowerCase();
+	messages.forEach((message, index) => {
+		const text = messageText(message, renderer).toLowerCase();
+		let offset = text.indexOf(needle);
+		while (offset !== -1) {
+			hits.push({
+				messageId: message.id,
+				index,
+				offset,
+				length: query.length
+			});
+			offset = text.indexOf(needle, offset + needle.length);
+		}
+	});
+	return hits;
+};
+/**
+* Text between two anchors, spanning message boundaries.
+*
+* Native selection cannot span separate editor instances, and unmounted messages are not in the DOM
+* at all, so cross-message copy is reconstructed from the model.
+*/
+var sliceFeed = (messages, renderer, range) => {
+	const fromIndex = messages.findIndex((message) => message.id === range.from.messageId);
+	const toIndex = messages.findIndex((message) => message.id === range.to.messageId);
+	if (fromIndex === -1 || toIndex === -1) return "";
+	const [start, end] = fromIndex < toIndex || fromIndex === toIndex && range.from.offset <= range.to.offset ? [range.from, range.to] : [range.to, range.from];
+	const [startIndex, endIndex] = fromIndex < toIndex ? [fromIndex, toIndex] : [toIndex, fromIndex];
+	const parts = [];
+	for (let index = startIndex; index <= endIndex; index++) {
+		const text = messageText(messages[index], renderer);
+		const from = index === startIndex ? start.offset : 0;
+		const to = index === endIndex ? end.offset : text.length;
+		parts.push(text.slice(from, to));
+	}
+	return parts.join("\n\n");
+};
+//#endregion
+//#region src/model/list-model.ts
+/**
+* The low-level reactive collection the virtualizer binds to (SPEC: ListModel).
+*
+* Two faces on one state, deliberately: a plain synchronous face (`count`, `at`, `subscribe`) that
+* the virtualizer consumes without dragging an atom registry into every story and test, and an
+* atom face (`rowsAtom`) for hosts that live in atom-land — derivations (stops, decorations,
+* readouts) hang off the atom rather than becoming parallel props. Both are the same array; the
+* subscribe face is not a fallback but the binding's contract.
+*/
+var ListModel = class {
+	#items;
+	#getId;
+	#listeners = /* @__PURE__ */ new Set();
+	/** The rows as an atom, for derivations. Registry-managed by whoever consumes it. */
+	rowsAtom;
+	#registry;
+	constructor({ items = [], getId }) {
+		this.#items = [...items];
+		this.#getId = getId;
+		this.rowsAtom = Atom.make(this.#items);
+		this.#registry = Registry.make();
+	}
+	get count() {
+		return this.#items.length;
+	}
+	get items() {
+		return this.#items;
+	}
+	getId = (index) => {
+		const item = this.#items[index];
+		return item === void 0 ? `missing-${index}` : this.#getId(item);
+	};
+	at = (index) => this.#items[index];
+	indexOf(id) {
+		return this.#items.findIndex((item) => this.#getId(item) === id);
+	}
+	subscribe(listener) {
+		this.#listeners.add(listener);
+		return () => this.#listeners.delete(listener);
+	}
+	append(items) {
+		if (!items.length) return;
+		this.#items = [...this.#items, ...items];
+		this.#publish({ appended: items.length });
+	}
+	prepend(items) {
+		if (!items.length) return;
+		this.#items = [...items, ...this.#items];
+		this.#publish({ prepended: items.length });
+	}
+	/** An item changed in place — same identity, new content. */
+	update(id) {
+		this.#publish({ updated: [id] });
+	}
+	/**
+	* Replace one item with a successor of the same identity — the streaming case for *frozen*
+	* items. An ECHO object mutates and `update` announces it; a schema-made message is frozen, so
+	* the chunk arrives as a fresh value under the old id. Same event either way: `updated`.
+	*/
+	patch(id, next) {
+		const index = this.#items.findIndex((item) => this.#getId(item) === id);
+		if (index < 0 || this.#getId(next) !== id) return;
+		this.#items = [
+			...this.#items.slice(0, index),
+			next,
+			...this.#items.slice(index + 1)
+		];
+		this.#publish({ updated: [id] });
+	}
+	/**
+	* The adapter for hosts that hand over a whole new array (a React prop, a query result).
+	*
+	* The one place the prepend inference survives, because this is the one caller that genuinely
+	* does not know what changed: the old first item is found in the new array, and everything before
+	* it was prepended. The virtualizer itself is always told (SPEC F-7.1).
+	*/
+	replace(items) {
+		const previous = this.#items;
+		const previousFirst = previous.length ? this.#getId(previous[0]) : void 0;
+		this.#items = [...items];
+		let prepended = 0;
+		if (previousFirst !== void 0 && items.length > previous.length) {
+			const grew = items.length - previous.length;
+			for (let index = 1; index <= grew; index++) if (items[index] !== void 0 && this.#getId(items[index]) === previousFirst) {
+				prepended = index;
+				break;
+			}
+		}
+		const appended = prepended ? 0 : Math.max(0, items.length - previous.length);
+		this.#publish({
+			prepended: prepended || void 0,
+			appended: appended || void 0
+		});
+	}
+	#publish(change) {
+		this.#registry.set(this.rowsAtom, this.#items);
+		for (const listener of this.#listeners) listener(change);
+	}
+};
+//#endregion
+//#region src/model/feed.ts
+/**
+* The native case, not an add-on (SPEC: FeedModel): a ListModel of messages carrying the feed's
+* own semantics — the stops policy, the streaming tail, and iteration. The list consumes this and
+* nothing else; `hits`, `isAnchor` and `streamingId` all left the props API and live here or in
+* the decoration provider.
+*
+* ECHO/queue bindings adapt to this outside the package; `fromMessages` adapts the plain case.
+*/
+var FeedModel = class extends ListModel {
+	#stops;
+	#streamingId;
+	#loading = false;
+	#loadBefore;
+	#loadAfter;
+	constructor({ messages = [], stops = "message", loadBefore, loadAfter } = {}) {
+		super({
+			items: messages,
+			getId: (message) => message.id
+		});
+		this.#stops = stops;
+		this.#loadBefore = loadBefore;
+		this.#loadAfter = loadAfter;
+	}
+	get messages() {
+		return this.items;
+	}
+	/** The tail message reconciling by delta; its item must not remount per chunk. */
+	get streamingId() {
+		return this.#streamingId;
+	}
+	setStreaming(id) {
+		const previous = this.#streamingId;
+		this.#streamingId = id;
+		for (const changed of [previous, id]) if (changed) this.update(changed);
+	}
+	/** A chunk arrived for the streaming tail: same identity, longer content. */
+	stream(id) {
+		this.update(id);
+	}
+	setStops(stops) {
+		this.#stops = stops;
+	}
+	/**
+	* The positions navigation can land on, under the current policy.
+	*
+	* Recomputed on demand rather than cached: a policy is a predicate over the model, and the model
+	* knows when it changed — callers that want reactivity derive from `rowsAtom`.
+	*/
+	stops() {
+		const predicate = this.#stops === "message" ? () => true : this.#stops === "prompt" ? (message) => message.sender.role === "user" : this.#stops;
+		const stops = [];
+		this.messages.forEach((message, index) => {
+			if (predicate(message, index)) stops.push({
+				index,
+				id: message.id
+			});
+		});
+		return stops;
+	}
+	/**
+	* The window reached the start: ask the source for history.
+	*
+	* The model owns iteration (SPEC F-7.2) — the pages arrive as a prepend, which the virtualizer
+	* is told about, so nothing on screen moves (F-1.1). Serialized, because edges are reached once
+	* per frame while the reader sits on them.
+	*/
+	async more(edge) {
+		const load = edge === "start" ? this.#loadBefore : this.#loadAfter;
+		if (!load || this.#loading) return false;
+		this.#loading = true;
+		try {
+			const page = await load();
+			if (!page.length) return false;
+			if (edge === "start") this.prepend(page);
+			else this.append(page);
+			return true;
+		} finally {
+			this.#loading = false;
+		}
+	}
+	/** Model-level search, since virtualization hides most items from any DOM search. */
+	search(query, renderer = defaultRenderer) {
+		return searchFeed(this.messages, renderer, query);
+	}
+	/** The rendered text of one message, for previews and rails. */
+	textOf(id, renderer = defaultRenderer) {
+		const index = this.indexOf(id);
+		const message = this.at(index);
+		return message && messageText(message, renderer);
+	}
+};
+/** The plain case: a feed over an array the host already has. */
+var fromMessages = (messages, options = {}) => new FeedModel({
+	messages,
+	...options
+});
+//#endregion
+//#region src/model/useListModel.ts
+/**
+* A model over an array the host re-creates per render — the React-prop case.
+*
+* The model is stable; the array is folded into it with `replace`, which is where the prepend
+* inference lives (and the only place — SPEC F-7.1). In an effect rather than during render: the
+* model publishes synchronously to its subscribers, and a subscriber invalidating itself while the
+* host is still rendering is a cross-component update React rejects. The window it opens is one
+* frame, and the window's own subscription closes it.
+*/
+var useListModel = (items, getId) => {
+	const model = useMemo(() => new ListModel({
+		items,
+		getId
+	}), []);
+	useEffect(() => {
+		if (model.items !== items) model.replace(items);
+	}, [model, items]);
+	return model;
+};
+/**
+* The feed-shaped twin, for a host that re-creates its message array per render.
+*
+* Streaming through this adapter is a `replace` whose length does not change; the model still
+* publishes, so the window still re-renders, and the streaming item reconciles by document delta
+* exactly as it would under a told update.
+*/
+var useFeedModel = (messages, options = {}) => {
+	const model = useMemo(() => new FeedModel({
+		messages,
+		...options
+	}), []);
+	useEffect(() => {
+		if (model.messages !== messages) model.replace(messages);
+	}, [model, messages]);
+	return model;
+};
+//#endregion
+//#region src/virtualizer/placement.ts
+var DEFAULT_OVERSCAN = 8;
+/**
+*
+*/
+var Placement = class {
+	#count;
+	#getId;
+	#extents;
+	#viewport;
+	#overscan;
+	#reserve;
+	/** Measured extents by message id, so that reordering the model cannot invalidate them. */
+	#measured = /* @__PURE__ */ new Map();
+	/** The one authoritative position: this row starts exactly here. */
+	#anchor;
+	#scroll = 0;
+	constructor({ count, getId, extents, viewport, overscan = DEFAULT_OVERSCAN, reserve = 0 }) {
+		this.#count = count;
+		this.#getId = getId;
+		this.#extents = extents;
+		this.#viewport = viewport;
+		this.#overscan = overscan;
+		this.#reserve = reserve;
+		this.#anchor = {
+			id: count ? getId(0) : "",
+			index: 0,
+			start: 0
+		};
+	}
+	get scroll() {
+		return this.#scroll;
+	}
+	get count() {
+		return this.#count;
+	}
+	/** The viewport is the binding's to know: it is the one thing here that comes from the DOM. */
+	setViewport(viewport) {
+		this.#viewport = viewport;
+	}
+	/**
+	* The host's answer about extents can change — a row is edited, a panel opens, a story flips a
+	* fixture — and it is a *function*, so keeping the one handed over at construction quietly pins
+	* the layout to whatever was true then. Measured extents survive: they are keyed by id and this
+	* only replaces what the host would say about a row nobody has measured.
+	*/
+	setExtents(extents) {
+		this.#extents = extents;
+	}
+	setReserve(reserve) {
+		this.#reserve = reserve;
+	}
+	/**
+	* The host's identity function, which is a closure over the host's own list.
+	*
+	* Appending a message gives a *new* `getId`, and a placement holding the one it was constructed
+	* with resolves the new row's index to an id nobody will ever measure. The binding then stores
+	* that row's measurement under the id the DOM carries and reads it back under the stale one, so
+	* the row is measured, found to disagree, measured again — every commit, for ever. It presents as
+	* a render loop rather than as a wrong size, which is what made `bridge/Tail` look like a tail
+	* defect (§8: measurement is only a correction if it can be read back).
+	*/
+	setGetId(getId) {
+		this.#getId = getId;
+	}
+	get anchor() {
+		return this.#anchor;
+	}
+	/** Extent of one row: what was measured, or what the host says. */
+	extentOf(index) {
+		return this.#measured.get(this.#getId(index)) ?? this.#extents.of(index);
+	}
+	/**
+	* Absolute position of a row, derived from the anchor rather than summed from the start.
+	*
+	* Rows between here and the anchor are the only ones whose extents matter (§5): everything before
+	* the window is described by the anchor's position, not by adding up guesses about it.
+	*/
+	positionOf(index) {
+		let position = this.#anchor.start;
+		if (index >= this.#anchor.index) for (let row = this.#anchor.index; row < index; row++) position += this.extentOf(row);
+		else for (let row = index; row < this.#anchor.index; row++) position -= this.extentOf(row);
+		return position;
+	}
+	/** The reader moved. Nothing is corrected here — only the mounted range changes. */
+	scrollTo(offset) {
+		this.#scroll = offset;
+		this.#reanchor();
+	}
+	/**
+	* A row turned out to be a different size than assumed.
+	*
+	* Rows at or after the anchor push the ones after them and leave the anchor alone. A row *before*
+	* the anchor moves the rows between it and the anchor, which is correct and unavoidable: the
+	* anchor is the thing being held still, and it is still being held.
+	*/
+	measure(id, extent) {
+		if (this.#extents.exact) return;
+		this.#measured.set(id, extent);
+	}
+	/** The model changed length. `prepended` rows arrived before the anchor and shift its index. */
+	setCount(count, { prepended = 0 } = {}) {
+		this.#count = count;
+		if (prepended) this.#anchor = {
+			...this.#anchor,
+			index: this.#anchor.index + prepended
+		};
+	}
+	/**
+	* Move to a row that may be nowhere near the window.
+	*
+	* The only operation that positions from estimates rather than from measurement, because there is
+	* no measured path to somewhere the reader has never been. A jump is a discontinuity the reader
+	* asked for, so being approximately right is what it can be.
+	*/
+	jumpTo(index, align = "start") {
+		const clamped = Math.max(0, Math.min(index, this.#count - 1));
+		let start = 0;
+		for (let row = 0; row < clamped; row++) start += this.extentOf(row);
+		this.#anchor = {
+			id: this.#getId(clamped),
+			index: clamped,
+			start
+		};
+		const end = clamped === this.#count - 1 ? this.layout().sizerExtent - this.#reserve : start + this.extentOf(clamped);
+		this.#scroll = align === "end" ? end - this.#viewport : start;
+		this.#scroll = Math.max(0, this.#scroll);
+		this.#reanchor();
+	}
+	/**
+	* Where the reader has to be for `index` to sit at the start (or end) of the viewport.
+	*
+	* Reports; does not move. `jumpTo` re-anchors as well, which is right for a discontinuity and
+	* wrong for a glide: the anchor would arrive at the destination while the element was still
+	* travelling, so the reader would watch the rows they were scrolling *through* unmount and the
+	* journey happen over nothing.
+	*/
+	offsetOf(index, align = "start") {
+		const clamped = Math.max(0, Math.min(index, this.#count - 1));
+		const start = this.positionOf(clamped);
+		return Math.max(0, align === "end" ? start + this.extentOf(clamped) - this.#viewport : start);
+	}
+	/**
+	* Where the reader has to be for the last row to rest against the end of the viewport.
+	*
+	* Derived from the anchor, like every other position, and deliberately **not** from a sum over the
+	* model: a follow asks this again on every commit, and each answer mounts rows whose measurement
+	* replaces the estimates that sum is over — so a sum-based end moves every time it is consulted,
+	* and consulting it is what moves it. That is not slow convergence, it is a feedback loop, and in
+	* React it terminates by exceeding the update limit rather than by settling (`bridge/Tail`).
+	*
+	* Anchor-relative, the answer only changes as the rows *between the anchor and the last row* are
+	* measured — each of them once — so a follow settles in a couple of commits and rows the reader
+	* has already passed cannot disturb it.
+	*/
+	endOffset() {
+		if (!this.#count) return 0;
+		const last = this.#count - 1;
+		return Math.max(0, this.positionOf(last) + this.extentOf(last) - this.#viewport);
+	}
+	/** The mounted range, the parent's offset, and the extent the thumb is computed from. */
+	layout() {
+		if (!this.#count) return {
+			first: 0,
+			last: -1,
+			visible: {
+				first: 0,
+				last: -1
+			},
+			offset: 0,
+			sizerExtent: 0
+		};
+		const { first, last, visible } = this.#range();
+		const offset = this.positionOf(first);
+		let windowExtent = 0;
+		for (let row = first; row <= last; row++) windowExtent += this.extentOf(row);
+		let after = 0;
+		for (let row = last + 1; row < this.#count; row++) after += this.extentOf(row);
+		return {
+			first,
+			last,
+			visible,
+			offset,
+			sizerExtent: offset + windowExtent + after + this.#reserve
+		};
+	}
+	/**
+	* Repay the start edge's drift: shift every position so row 0 starts at exactly zero, and move
+	* the scroll by the same amount so nothing the reader sees moves.
+	*
+	* The first row starting at zero is the one absolute fact of content space, and estimates being
+	* replaced above the anchor break it: a feed opened at its tail whose rows measure taller than
+	* assumed pushes row 0 *negative*, where no scroll can reach it — the reader arrives at the top
+	* and the first messages simply are not there. This is the single correction that must touch the
+	* scroll (§7's rule is about corrections and readers sharing a channel; here both the content and
+	* the offset move by the same delta in the same commit, so the reader sees nothing at all).
+	* Returns the shift for the binding to apply to the element.
+	*/
+	rebaseStart() {
+		if (!this.#count) return 0;
+		const shift = -this.positionOf(0);
+		if (shift === 0) return 0;
+		this.#anchor = {
+			...this.#anchor,
+			start: this.#anchor.start + shift
+		};
+		this.#scroll = Math.max(0, this.#scroll + shift);
+		return shift;
+	}
+	/**
+	* What an edge revealed, if the window has reached one.
+	*
+	* The edges are where estimate meets ground truth: the first row starts at zero and the last one
+	* ends at the content's end, by definition, so a computed position that says otherwise is the
+	* measure of how wrong the estimates were. Reported rather than silently applied — absorbing it
+	* into the anchor would move what the reader is looking at, and at an edge they are looking at
+	* exactly the thing that would move.
+	*/
+	drift() {
+		if (!this.#count) return;
+		const { first, last } = this.#range();
+		if (first === 0 && this.positionOf(0) !== 0) return {
+			edge: "start",
+			delta: this.positionOf(0)
+		};
+		if (last === this.#count - 1) {
+			const end = this.positionOf(last) + this.extentOf(last);
+			const { sizerExtent } = this.layout();
+			const content = sizerExtent - this.#reserve;
+			if (end !== content) return {
+				edge: "end",
+				delta: content - end
+			};
+		}
+	}
+	/** Visible rows, plus overscan, clamped to the model. */
+	#range() {
+		let first = this.#anchor.index;
+		while (first > 0 && this.positionOf(first) > this.#scroll) first--;
+		while (first < this.#count - 1 && this.positionOf(first) + this.extentOf(first) <= this.#scroll) first++;
+		let last = first;
+		let filled = this.positionOf(first) + this.extentOf(first);
+		while (last < this.#count - 1 && filled < this.#scroll + this.#viewport) {
+			last++;
+			filled += this.extentOf(last);
+		}
+		return {
+			first: Math.max(0, first - this.#overscan),
+			last: Math.min(this.#count - 1, last + this.#overscan),
+			visible: {
+				first,
+				last
+			}
+		};
+	}
+	/**
+	* The anchor is the first row the reader can see — always, not merely when the old one leaves
+	* the window.
+	*
+	* The anchor is the row held still while others are measured, so it must be the reader's
+	* reference point. Clamping the old anchor into the mounted range let it drift to the window's
+	* *far* edge after an upward scroll — below everything on screen — and a widget toggled open
+	* above it then pushed the whole viewport up by its own growth: the engine held a row the reader
+	* could not see still, at the expense of every row they could. Re-anchoring preserves the new
+	* anchor's computed position exactly, so the move itself shifts nothing.
+	*/
+	#reanchor() {
+		if (!this.#count) return;
+		const { visible } = this.#range();
+		if (this.#anchor.index === visible.first) return;
+		const index = visible.first;
+		this.#anchor = {
+			id: this.#getId(index),
+			index,
+			start: this.positionOf(index)
+		};
+	}
+};
+//#endregion
+//#region src/virtualizer/Window.tsx
+/** Extent of the mounted rows, which is the parent's own size in content space. */
+var windowExtentOf = (placement, first, last) => {
+	let extent = 0;
+	for (let index = first; index <= last; index++) extent += placement.extentOf(index);
+	return extent;
+};
+var useWindow = ({ scrollerRef, model, extents, axis = "block", overscan, reserve = 0, onEdge, onMismatch, onChange, controllerRef }) => {
+	const windowRef = useRef(null);
+	const [, render] = useState(0);
+	const invalidate = useCallback(() => render((value) => value + 1), []);
+	const count = model.count;
+	const getId = model.getId;
+	const placement = useMemo(() => new Placement({
+		count,
+		getId,
+		extents,
+		viewport: 0,
+		overscan
+	}), []);
+	const reported = useRef(/* @__PURE__ */ new Set());
+	placement.setGetId(getId);
+	useEffect(() => {
+		const unsubscribe = model.subscribe((change) => {
+			placement.setCount(model.count, { prepended: change.prepended ?? 0 });
+			invalidate();
+		});
+		placement.setCount(model.count, {});
+		invalidate();
+		return unsubscribe;
+	}, [
+		model,
+		placement,
+		invalidate
+	]);
+	if (placement.count !== model.count) placement.setCount(model.count, {});
+	useImperativeHandle(controllerRef, () => ({ scrollToIndex: (index, align, behavior = "auto") => {
+		const scroller = scrollerRef.current;
+		const { first, last } = placement.layout();
+		if (behavior === "smooth" && scroller && index >= first && index <= last) {
+			const target = placement.offsetOf(index, align);
+			scroller.scrollTo(axis === "block" ? {
+				top: target,
+				behavior
+			} : {
+				left: target,
+				behavior
+			});
+			return;
+		}
+		placement.jumpTo(index, align);
+		if (scroller) {
+			if (axis === "block") scroller.scrollTop = placement.scroll;
+			else scroller.scrollLeft = placement.scroll;
+		}
+		invalidate();
+	} }), [
+		placement,
+		axis,
+		invalidate
+	]);
+	placement.setExtents(extents);
+	placement.setReserve(reserve);
+	const { first, last, visible, offset, sizerExtent } = placement.layout();
+	useLayoutEffect(() => {
+		const scroller = scrollerRef.current;
+		if (!scroller) return;
+		const read = () => axis === "block" ? scroller.clientHeight : scroller.clientWidth;
+		placement.setViewport(read());
+		const observer = new ResizeObserver(() => {
+			placement.setViewport(read());
+			invalidate();
+		});
+		observer.observe(scroller);
+		const onScroll = () => {
+			placement.scrollTo(axis === "block" ? scroller.scrollTop : scroller.scrollLeft);
+			invalidate();
+		};
+		scroller.addEventListener("scroll", onScroll, { passive: true });
+		invalidate();
+		return () => {
+			observer.disconnect();
+			scroller.removeEventListener("scroll", onScroll);
+		};
+	}, [
+		placement,
+		axis,
+		invalidate
+	]);
+	useLayoutEffect(() => {
+		const parent = windowRef.current;
+		if (!parent) return;
+		let changed = false;
+		for (const element of parent.children) {
+			const row = element;
+			const index = Number(row.dataset.index);
+			const id = row.dataset.objectId;
+			const actual = Math.round(axis === "block" ? row.offsetHeight : row.offsetWidth);
+			const declared = placement.extentOf(index);
+			if (extents.exact) {
+				const key = `${id}:${declared}:${actual}`;
+				if (actual !== declared && !reported.current.has(key)) {
+					reported.current.add(key);
+					onMismatch?.({
+						index,
+						id,
+						declared,
+						actual
+					});
+				}
+				continue;
+			}
+			if (actual && actual !== declared) {
+				placement.measure(id, actual);
+				changed = true;
+			}
+		}
+		if (placement.rebaseStart() !== 0) {
+			const scroller = scrollerRef.current;
+			if (scroller) {
+				if (axis === "block") scroller.scrollTop = placement.scroll;
+				else scroller.scrollLeft = placement.scroll;
+			}
+			changed = true;
+		}
+		const drift = placement.drift();
+		const key = drift && `${drift.edge}:${drift.delta}`;
+		if (drift && key && !reported.current.has(key)) {
+			reported.current.add(key);
+			onEdge?.(drift);
+		}
+		if (changed) invalidate();
+	});
+	const announced = useRef("");
+	const state = `${visible.first}:${visible.last}:${first}:${last}:${count}`;
+	if (onChange && announced.current !== state) {
+		announced.current = state;
+		const scroller = scrollerRef.current;
+		const viewport = (axis === "block" ? scroller?.clientHeight : scroller?.clientWidth) ?? 0;
+		const extent = windowExtentOf(placement, first, last);
+		queueMicrotask(() => onChange({
+			index: visible.first,
+			visible,
+			mounted: {
+				first,
+				last
+			},
+			count,
+			geometry: {
+				scroll: placement.scroll,
+				viewport,
+				total: sizerExtent,
+				window: {
+					start: offset,
+					extent
+				}
+			}
+		}));
+	}
+	return {
+		placement,
+		layout: {
+			first,
+			last,
+			visible,
+			offset,
+			sizerExtent
+		},
+		windowRef,
+		sizerExtent,
+		offset,
+		first,
+		last
+	};
+};
+/**
+* The DOM shape, and nothing else.
+*
+* Three elements: a **sizer** that holds no rows and exists only to give the thumb something to
+* measure, a **window** holding the mounted rows in normal flow, and the scroller around them.
+*/
+var Window = ({ classNames, children, controllerRef, ...options }) => {
+	const scrollerRef = useRef(null);
+	const inner = useRef(null);
+	const { placement, windowRef, offset, sizerExtent, first, last } = useWindow({
+		...options,
+		scrollerRef,
+		controllerRef: inner
+	});
+	const axis = options.axis ?? "block";
+	const main = axis === "block" ? "height" : "width";
+	const { getId } = options.model;
+	const follow = useFollow({
+		scrollerRef,
+		placement,
+		extent: sizerExtent,
+		count: options.model.count,
+		axis,
+		reserve: options.reserve,
+		enabled: options.sticky
+	});
+	useImperativeHandle(controllerRef, () => ({ scrollToIndex: (index, align, behavior) => {
+		follow.onNavigate(index);
+		inner.current?.scrollToIndex(index, align, behavior);
+	} }), [follow]);
+	const rows = [];
+	for (let index = first; index <= last; index++) rows.push(/* @__PURE__ */ jsx("div", {
+		"data-index": index,
+		"data-object-id": getId(index),
+		children: children(index, getId(index))
+	}, getId(index)));
+	return /* @__PURE__ */ jsxs("div", {
+		ref: scrollerRef,
+		className: mx("relative", axis === "block" ? "overflow-y-auto" : "overflow-x-auto", classNames),
+		style: { overflowAnchor: "none" },
+		"data-testid": "window.scroller",
+		children: [/* @__PURE__ */ jsx("div", {
+			style: { [main]: sizerExtent },
+			"data-testid": "window.sizer"
+		}), /* @__PURE__ */ jsx("div", {
+			ref: windowRef,
+			className: mx("absolute top-0 left-0 flex", axis === "block" ? "flex-col w-full" : "flex-row h-full"),
+			style: { transform: axis === "block" ? `translateY(${offset}px)` : `translateX(${offset}px)` },
+			"data-testid": "window.window",
+			children: rows
+		})]
+	});
+};
+//#endregion
+//#region src/components/MessageList/position-log.ts
+/** Movement below this is sub-pixel rounding, not a row changing place. */
+var EPSILON = 1;
+/** Recent shifts kept for inspection — enough to see whether one row type moves or all of them. */
+var TRACE_LIMIT = 40;
+var EMPTY = {
+	shifts: 0,
+	breaks: 0
+};
+/**
+* Records where each row was placed, and reports when a row moves.
+*
+* A virtualized list is only still if a row's offset, once laid out, does not change: rows above the
+* reader are measured as they mount, and any correction there pushes everything below it. Scrolling
+* **up** is where this shows, because that is the direction in which unmeasured rows enter — going
+* down, the rows above have already been measured.
+*
+* Positions are recorded **relative to the viewport** (`start - scrollOffset`), not as absolute
+* document offsets, because those two answer different questions. Measuring a row for the first time
+* re-lays every row below it, and the virtualizer compensates by moving `scrollTop` the same
+* distance — the offsets all change and the reader sees nothing. What a reader sees is a row landing
+* somewhere else on screen, which is what this counts.
+*
+* Two invariants:
+*
+* 1. a row keyed by message id holds its place on screen for as long as it stays mounted;
+* 2. positions within the mounted window increase strictly with index.
+*
+* The count is what a reader means by "flicker". Deliberately kept as a count rather than a log:
+* a scroll produces thousands of samples, and the number is the signal.
+*/
+/**
+* Watches for jumps in what was actually painted, once per animation frame.
+*
+* The counting above is done per React render, which cannot separate a row moving from the sampling
+* happening at a different moment than the layout. This reads the scroll and every row's box in the
+* **same** frame and compares each row's travel against the scroll's: a row that keeps its place in
+* the document travels exactly as far as the scroll did, so anything else is the reader seeing a
+* jump. It is the in-page form of measuring a screen recording frame by frame, and it is what a
+* developer should have running while working on the list.
+*/
+var useJumpDetector = (viewport, enabled = true) => {
+	const [jumps, setJumps] = useState({
+		count: 0,
+		worst: 0
+	});
+	useEffect(() => {
+		if (!viewport || !enabled) return;
+		let handle = 0;
+		let previous = /* @__PURE__ */ new Map();
+		let previousScroll = viewport.scrollTop;
+		let count = 0;
+		let worst = 0;
+		const tick = () => {
+			const scroll = viewport.scrollTop;
+			const travelled = previousScroll - scroll;
+			const current = /* @__PURE__ */ new Map();
+			for (const row of viewport.querySelectorAll("[data-index]")) {
+				const top = row.getBoundingClientRect().top;
+				const index = row.dataset.index;
+				current.set(index, top);
+				const before = previous.get(index);
+				if (before !== void 0) {
+					const residual = Math.abs(top - (before + travelled));
+					if (residual > EPSILON) {
+						count++;
+						worst = Math.max(worst, Math.round(residual));
+					}
+				}
+			}
+			previous = current;
+			previousScroll = scroll;
+			handle = requestAnimationFrame(tick);
+		};
+		handle = requestAnimationFrame(tick);
+		const timer = setInterval(() => setJumps({
+			count,
+			worst
+		}), 250);
+		return () => {
+			cancelAnimationFrame(handle);
+			clearInterval(timer);
+		};
+	}, [viewport, enabled]);
+	return jumps;
+};
+var usePositionLog = () => {
+	const positions = useRef(/* @__PURE__ */ new Map());
+	const trace = useRef([]);
+	const [stats, setStats] = useState(EMPTY);
+	const pending = useRef(EMPTY);
+	const reset = useCallback(() => {
+		positions.current.clear();
+		trace.current = [];
+		pending.current = EMPTY;
+		setStats(EMPTY);
+	}, []);
+	const record = useCallback((entries, { scrollOffset }) => {
+		let { shifts, breaks, last } = pending.current;
+		let previousStart = -Infinity;
+		for (const { key, index, start: absolute } of entries) {
+			const start = absolute - scrollOffset;
+			const recorded = positions.current.get(key);
+			if (recorded !== void 0 && Math.abs(recorded - start) > EPSILON) {
+				shifts++;
+				last = {
+					index,
+					from: Math.round(recorded),
+					to: Math.round(start),
+					delta: Math.round(start - recorded)
+				};
+				trace.current.push(last);
+				if (trace.current.length > TRACE_LIMIT) trace.current.shift();
+			}
+			positions.current.set(key, start);
+			if (start < previousStart) breaks++;
+			previousStart = start;
+		}
+		const mounted = new Set(entries.map(({ key }) => key));
+		for (const key of positions.current.keys()) if (!mounted.has(key)) positions.current.delete(key);
+		const next = {
+			shifts,
+			breaks,
+			last
+		};
+		pending.current = next;
+		setStats((previous) => previous.shifts === next.shifts && previous.breaks === next.breaks ? previous : { ...next });
+	}, []);
+	return {
+		...stats,
+		trace,
+		record,
+		reset
+	};
+};
+//#endregion
+//#region src/components/MessageList/MessageList.tsx
+var [MessageListProvider, useMessageListContext] = createContext$1("MessageList");
+/**
+* The list's state and scroll controls, for parts that live outside the viewport — a toolbar's
+* find-next, a statusbar's range readout.
+*/
+var useMessageList = (consumerName = "useMessageList") => {
+	const { range, currentIndex, navigation, mountedRows, mountedWidgets, jumps, shifts, breaks, resetShifts, model, scrollToIndex, scrollToBottom } = useMessageListContext(consumerName);
+	return {
+		range,
+		currentIndex,
+		navigation,
+		mountedRows,
+		mountedWidgets,
+		jumps,
+		shifts,
+		breaks,
+		resetShifts,
+		model,
+		count: model.count,
+		scrollToIndex,
+		scrollToBottom
+	};
+};
+var DefaultChrome = ({ children }) => /* @__PURE__ */ jsx(Fragment$1, { children });
+/** Row height assumed before anything has been measured. */
+var DEFAULT_ESTIMATE = 120;
+/**
+* Headless root of a feed: owns the placement, the selection group and the model-to-item mapping.
+* Renders no DOM of its own, so a toolbar or statusbar that reads its state can sit outside the
+* scroll container — the scrolling part is `MessageList.Viewport`.
+*/
+var MessageListRoot = ({ children, model, renderer = defaultRenderer, registry, Chrome = DefaultChrome, Custom, debug, estimateSize = DEFAULT_ESTIMATE, stickyBottom = false, scrollPastEnd = false, overscan = 8, onRangeChange }) => {
+	const widgetStore = useMemo(createWidgetStateStore, []);
+	const [viewport, setViewportState] = useState(null);
+	const scrollerRef = useRef(null);
+	const setViewport = useCallback((element) => {
+		scrollerRef.current = element;
+		setViewportState(element);
+	}, []);
+	const [range, setRange] = useState(void 0);
+	const [mounted, setMounted] = useState(0);
+	const nominalSize = typeof estimateSize === "number" ? estimateSize : DEFAULT_ESTIMATE;
+	const [currentIndex, setCurrentIndex] = useState(0);
+	const currentIndexRef = useRef(0);
+	const setCurrent = useCallback((index) => {
+		currentIndexRef.current = index;
+		setCurrentIndex(index);
+	}, []);
+	const widgetCounts = useRef(/* @__PURE__ */ new Map());
+	const [mountedWidgets, setMountedWidgets] = useState(0);
+	const reportWidgets = useCallback((id, count) => {
+		if (count) widgetCounts.current.set(id, count);
+		else widgetCounts.current.delete(id);
+		setMountedWidgets([...widgetCounts.current.values()].reduce((total, value) => total + value, 0));
+	}, []);
+	const extents = useMemo(() => ({ of: (index) => {
+		const message = model.at(index);
+		return typeof estimateSize === "function" && message ? estimateSize(message, index) : nominalSize;
+	} }), [
+		model,
+		estimateSize,
+		nominalSize
+	]);
+	const reserve = useMemo(() => scrollPastEnd && viewport && model.count ? Math.max(0, viewport.clientHeight - nominalSize) : 0, [
+		scrollPastEnd,
+		viewport,
+		model.count,
+		nominalSize
+	]);
+	const controller = useRef(null);
+	const { placement, windowRef, offset, sizerExtent, first, last } = useWindow({
+		scrollerRef,
+		model,
+		extents,
+		overscan,
+		reserve,
+		onChange: useCallback((state) => {
+			const next = state.count ? {
+				startIndex: state.visible.first,
+				endIndex: state.visible.last
+			} : void 0;
+			setRange(next);
+			setMounted(state.mounted.last - state.mounted.first + 1);
+			if (next) {
+				onRangeChange?.(next);
+				setCurrent(next.startIndex);
+				if (next.startIndex === 0) model.more("start");
+				if (next.endIndex >= model.count - 1) model.more("end");
+			}
+		}, [
+			onRangeChange,
+			setCurrent,
+			model
+		]),
+		controllerRef: controller
+	});
+	const follow = useFollow({
+		scrollerRef,
+		placement,
+		extent: sizerExtent,
+		count: model.count,
+		reserve,
+		enabled: stickyBottom
+	});
+	const jumps = useJumpDetector(viewport, debug);
+	const { shifts, breaks, trace: shiftTrace, record: recordPositions, reset: resetShifts } = usePositionLog();
+	useEffect(() => {
+		const rows = [];
+		for (let index = first; index <= last; index++) rows.push({
+			key: model.getId(index),
+			index,
+			start: placement.positionOf(index)
+		});
+		recordPositions(rows, { scrollOffset: placement.scroll });
+	}, [
+		first,
+		last,
+		offset,
+		sizerExtent,
+		model,
+		placement,
+		recordPositions
+	]);
+	const scrollToIndex = useCallback((index, { align = "start", behavior = "auto" } = {}) => {
+		follow.onNavigate(index);
+		controller.current?.scrollToIndex(index, align === "center" ? "start" : align, behavior);
+	}, [follow]);
+	const scrollToBottom = useCallback((options) => {
+		if (model.count) scrollToIndex(model.count - 1, {
+			align: "end",
+			...options
+		});
+	}, [scrollToIndex, model]);
+	useEffect(() => {
+		if (viewport) viewport.__feed = {
+			placement,
+			get layout() {
+				return placement.layout();
+			},
+			get shifted() {
+				return {
+					shifts,
+					breaks,
+					recent: shiftTrace.current
+				};
+			}
+		};
+	}, [
+		viewport,
+		placement,
+		shifts,
+		breaks,
+		shiftTrace
+	]);
+	const navigation = useFeedNavigation({
+		controller,
+		stops: () => model.stops(),
+		current: () => currentIndexRef.current,
+		count: () => model.count,
+		scrollPastEnd,
+		onNavigate: follow.onNavigate
+	});
+	useEffect(() => {
+		if (!viewport) return;
+		viewport.tabIndex = 0;
+		const onKeyDown = (event) => {
+			if (event.altKey || event.shiftKey) return;
+			const delta = event.key === "ArrowDown" ? 1 : event.key === "ArrowUp" ? -1 : 0;
+			if (!delta) return;
+			event.preventDefault();
+			if (event.metaKey || event.ctrlKey) {
+				if (delta > 0) navigation.last();
+				else navigation.first();
+				return;
+			}
+			navigation.step(delta);
+		};
+		viewport.addEventListener("keydown", onKeyDown);
+		return () => viewport.removeEventListener("keydown", onKeyDown);
+	}, [viewport, navigation]);
+	const selectionGroup = useMemo(createSelectionGroup, []);
+	return /* @__PURE__ */ jsx(SelectionGroupContext.Provider, {
+		value: selectionGroup,
+		children: /* @__PURE__ */ jsx(WidgetStateProvider, {
+			store: widgetStore,
+			children: /* @__PURE__ */ jsx(MessageListProvider, {
+				model,
+				renderer,
+				registry,
+				Chrome,
+				Custom,
+				debug,
+				range,
+				currentIndex,
+				navigation,
+				mountedRows: mounted,
+				mountedWidgets,
+				reportWidgets,
+				jumps,
+				shifts,
+				breaks,
+				resetShifts,
+				windowRef,
+				offset,
+				sizerExtent,
+				first,
+				last,
+				setViewport,
+				scrollToIndex,
+				scrollToBottom,
+				children
+			})
+		})
+	});
+};
+MessageListRoot.displayName = "MessageList.Root";
+var MESSAGE_LIST_VIEWPORT_NAME = "MessageList.Viewport";
+/**
+* The scroll container and the mounted window of rows.
+*
+* Scrolling belongs to `ScrollArea`, which owns the overlay thumbs and the padding tokens; the
+* placement needs only the element being scrolled, which `ScrollArea.Viewport` publishes.
+*/
+var MessageListViewport = composable(({ autoHide, centered, native, padding, scrollbars, thin, gutter, ...props }, forwardedRef) => {
+	const { model, Chrome, windowRef, offset, sizerExtent, first, last, setViewport } = useMessageListContext(MESSAGE_LIST_VIEWPORT_NAME);
+	const { selectedIds, onSelect } = useItemSelectionValue();
+	const handleViewportRef = useCallback((element) => {
+		setViewport(element);
+		setRef(forwardedRef, element);
+	}, [setViewport, forwardedRef]);
+	const rows = [];
+	for (let index = first; index <= last; index++) {
+		const message = model.at(index);
+		if (!message) continue;
+		rows.push(/* @__PURE__ */ jsx("div", {
+			"data-index": index,
+			"data-object-id": message.id,
+			children: /* @__PURE__ */ jsx(Column.Root, {
+				gutter,
+				children: /* @__PURE__ */ jsx(Column.Center, { children: /* @__PURE__ */ jsx(Chrome, {
+					message,
+					index,
+					selected: selectedIds?.has(message.id) ?? false,
+					onSelect: (id, additive) => onSelect?.(id, additive),
+					children: /* @__PURE__ */ jsx(MessageListItem, { message })
+				}) })
+			})
+		}, message.id));
+	}
+	return /* @__PURE__ */ jsx(ScrollArea.Root, {
+		...composableProps(props),
+		orientation: "vertical",
+		autoHide,
+		centered,
+		native,
+		padding,
+		scrollbars,
+		thin,
+		children: /* @__PURE__ */ jsxs(ScrollArea.Viewport, {
+			"data-testid": "feed.viewport",
+			style: {
+				position: "relative",
+				overflowAnchor: "none"
+			},
+			ref: handleViewportRef,
+			children: [/* @__PURE__ */ jsx("div", {
+				style: { height: sizerExtent },
+				"data-testid": "feed.sizer"
+			}), /* @__PURE__ */ jsx("div", {
+				ref: windowRef,
+				className: "absolute top-0 left-0 flex flex-col w-full",
+				style: { transform: `translateY(${offset}px)` },
+				"data-testid": "feed.window",
+				children: rows
+			})]
+		})
+	});
+});
+MessageListViewport.displayName = MESSAGE_LIST_VIEWPORT_NAME;
+var MESSAGE_LIST_ITEM_NAME = "MessageList.Item";
+/**
+* One message, rendered by the kind its renderer resolves. Exposed so a host can render a message
+* outside the scrolling window — a pinned message, a preview — through the same path.
+*/
+var MessageListItem = composable(({ message, ...props }, forwardedRef) => {
+	const { renderer, registry, Custom, debug, reportWidgets } = useMessageListContext(MESSAGE_LIST_ITEM_NAME);
+	const content = renderer(message);
+	const decorations = useDecorations(message.id);
+	const hits = useMemo(() => decorations.length ? decorations.map(({ range }) => [range.offset, range.offset + range.length]) : void 0, [decorations]);
+	const handleWidgetsChange = useCallback((count) => reportWidgets(message.id, count), [reportWidgets, message.id]);
+	return /* @__PURE__ */ jsxs("div", {
+		...composableProps(props, { classNames: debug ? "outline outline-1 outline-dashed outline-primary-500/50 [&_.cm-content>*]:outline [&_.cm-content>*]:outline-1 [&_.cm-content>*]:outline-dashed [&_.cm-content>*]:outline-neutral-500/40" : void 0 }),
+		ref: forwardedRef,
+		children: [
+			content.kind === "markdown" && /* @__PURE__ */ jsx(WidgetScopeProvider, {
+				scope: message.id,
+				children: /* @__PURE__ */ jsx(MarkdownBlock, {
+					text: content.text,
+					registry,
+					hits,
+					onWidgetsChange: handleWidgetsChange
+				})
+			}),
+			content.kind === "html" && /* @__PURE__ */ jsx(HtmlBlock, { html: content.html }),
+			content.kind === "custom" && Custom && /* @__PURE__ */ jsx(Custom, {
+				content,
+				message
+			})
+		]
+	});
+});
+MessageListItem.displayName = MESSAGE_LIST_ITEM_NAME;
+var MessageList = {
+	Root: MessageListRoot,
+	Viewport: MessageListViewport,
+	Item: MessageListItem
+};
+//#endregion
+//#region src/components/Minimap/Minimap.tsx
+/** 2rem, matching the outline rail it usually sits opposite. */
+var DEFAULT_WIDTH$1 = 32;
+var Minimap = ({ classNames, state, width = DEFAULT_WIDTH$1, onSelect }) => {
+	const total = state?.geometry.total ?? 0;
+	const scale = (value) => total > 0 ? `${Math.max(0, Math.min(100, value / total * 100))}%` : "0%";
+	return /* @__PURE__ */ jsx("div", {
+		className: mx("relative h-full bg-input-surface overflow-hidden", onSelect && "cursor-pointer", classNames),
+		style: { width },
+		title: total ? `${Math.round(total)}px over ${state?.count} rows` : "empty",
+		"data-testid": "minimap",
+		onClick: onSelect && ((event) => {
+			const box = event.currentTarget.getBoundingClientRect();
+			onSelect(Math.max(0, Math.min(1, (event.clientY - box.top) / box.height)));
+		}),
+		children: state && total > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "absolute inset-x-0 bg-accent-fill/30",
+				style: {
+					top: scale(state.geometry.window.start),
+					height: scale(state.geometry.window.extent)
+				},
+				"data-testid": "minimap.mounted"
+			}),
+			Array.from({ length: 9 }, (_, step) => /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-x-0 border-t border-separator/40",
+				style: { top: `${(step + 1) / 10 * 100}%` }
+			}, step)),
+			/* @__PURE__ */ jsx("div", {
+				className: "absolute inset-x-0 border-y border-accent-bg bg-accent-fill/70",
+				style: {
+					top: scale(state.geometry.scroll),
+					height: scale(state.geometry.viewport)
+				},
+				"data-testid": "minimap.viewport"
+			})
+		] })
+	});
+};
+//#endregion
+//#region src/components/Outline/Outline.tsx
+var REST_WIDTH = 8;
+/** 2rem, matching the debug minimap it usually sits opposite. */
+var DEFAULT_WIDTH = 32;
+/** Height of one tick, and so the pitch the rail thins its markers to. */
+var TICK_SIZE = 8;
+var intersects = (range, visible) => range.from < visible.to && range.to > visible.from;
+/**
+* Evenly spreads `markers` over at most `capacity` rows, keeping the first and last.
+*
+* Each rendered tick then stands for the span up to the next one, so a thinned rail still covers
+* the whole document — a position between two ticks belongs to the one above it, rather than to
+* nothing.
+*/
+var thin = (markers, capacity) => {
+	const step = capacity > 1 ? (markers.length - 1) / (capacity - 1) : 0;
+	const indexes = markers.length <= capacity ? markers.map((_, index) => index) : Array.from({ length: capacity }, (_, row) => Math.round(row * step));
+	return indexes.map((index, row) => ({
+		marker: markers[index],
+		index,
+		span: {
+			from: markers[index].range.from,
+			to: markers[indexes[row + 1]]?.range.from ?? markers[index].range.to
+		}
+	}));
+};
+var Outline = ({ classNames, markers, visibleRange, tickSize = TICK_SIZE, width = DEFAULT_WIDTH, onSelect, onNavigate }) => {
+	const containerRef = useRef(null);
+	const rowsRef = useRef([]);
+	const [pointer, setPointer] = useState(null);
+	const [navigated, setNavigated] = useState(null);
+	const [available, setAvailable] = useState(0);
+	useEffect(() => {
+		const parent = containerRef.current?.parentElement;
+		if (!parent) return;
+		const observer = new ResizeObserver(([entry]) => setAvailable(entry.contentRect.height));
+		observer.observe(parent);
+		setAvailable(parent.getBoundingClientRect().height);
+		return () => observer.disconnect();
+	}, []);
+	const natural = markers.length * tickSize;
+	const bounded = available >= tickSize * 2;
+	const rows = useMemo(() => thin(markers, bounded ? Math.min(markers.length, Math.floor(available / tickSize)) : markers.length), [
+		markers,
+		bounded,
+		available,
+		tickSize
+	]);
+	const isActive = useCallback((row) => visibleRange ? intersects(row.span, visibleRange) : true, [visibleRange]);
+	const [keyboard, setKeyboard] = useState(false);
+	const shown = keyboard ? navigated ?? pointer : pointer ?? navigated;
+	useEffect(() => {
+		if (pointer == null) return;
+		const rail = containerRef.current;
+		const owner = rail?.ownerDocument;
+		if (!rail || !owner) return;
+		const onOver = (event) => {
+			if (!rail.contains(event.target)) setPointer(null);
+		};
+		owner.addEventListener("pointerover", onOver);
+		return () => owner.removeEventListener("pointerover", onOver);
+	}, [pointer]);
+	const [anchorOffset, setAnchorOffset] = useState(0);
+	useLayoutEffect(() => {
+		const row = shown == null ? null : rowsRef.current[shown];
+		if (row) setAnchorOffset(row.offsetTop + row.offsetHeight / 2);
+	}, [shown]);
+	const widthFor = useCallback((index) => {
+		if (shown == null) return REST_WIDTH;
+		const distance = index - shown;
+		const falloff = Math.exp(-(distance * distance) / 8);
+		return REST_WIDTH + (width - REST_WIDTH) * falloff;
+	}, [shown, width]);
+	const handleKeyDown = useCallback((event) => {
+		const delta = event.key === "ArrowDown" ? 1 : event.key === "ArrowUp" ? -1 : 0;
+		if (!delta) return;
+		if (onNavigate) {
+			event.preventDefault();
+			setKeyboard(true);
+			onNavigate(delta);
+			return;
+		}
+		const current = rowsRef.current.findIndex((element) => element === event.target);
+		if (current < 0) return;
+		const next = Math.min(Math.max(current + delta, 0), rows.length - 1);
+		event.preventDefault();
+		rowsRef.current[next]?.focus();
+	}, [rows.length, onNavigate]);
+	const visibleFrom = visibleRange?.from;
+	useEffect(() => {
+		if (!keyboard || visibleFrom == null) {
+			setNavigated(null);
+			return;
+		}
+		const index = rows.findIndex((row) => visibleFrom < row.span.to);
+		setNavigated(index < 0 ? rows.length - 1 : index);
+	}, [
+		keyboard,
+		visibleFrom,
+		rows
+	]);
+	const hoveredMarker = shown == null ? void 0 : rows[shown]?.marker;
+	return /* @__PURE__ */ jsxs(Popover.Root, {
+		open: hoveredMarker != null,
+		children: [/* @__PURE__ */ jsxs("div", {
+			role: "navigation",
+			className: mx("relative flex flex-col justify-center overflow-hidden", classNames),
+			style: {
+				width: `${width}px`,
+				height: bounded ? "100%" : `${natural}px`
+			},
+			"data-pointer": pointer ?? "",
+			"data-navigated": navigated ?? "",
+			"data-shown": shown ?? "",
+			onPointerDown: () => setKeyboard(false),
+			onBlurCapture: (event) => {
+				if (!event.currentTarget.contains(event.relatedTarget)) setKeyboard(false);
+			},
+			onKeyDown: handleKeyDown,
+			ref: containerRef,
+			children: [rows.map((row, index) => {
+				const marker = row.marker;
+				const active = isActive(row);
+				return /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": marker.title,
+					className: "flex items-center w-full shrink-0 cursor-pointer outline-none",
+					style: { height: tickSize },
+					ref: (element) => {
+						rowsRef.current[index] = element;
+					},
+					onPointerEnter: () => {
+						setPointer(index);
+						setKeyboard(false);
+					},
+					onPointerLeave: () => setPointer((current) => current === index ? null : current),
+					onFocus: () => keyboard && setNavigated(index),
+					onClick: () => onSelect?.(marker, row.index),
+					children: /* @__PURE__ */ jsx("div", {
+						className: mx("h-[3px] rounded-full transition-all duration-200 ease-out", shown === index ? "bg-neutral-800 dark:bg-neutral-200" : "bg-neutral-400 dark:bg-neutral-600", active ? "opacity-100" : "opacity-30"),
+						style: { width: widthFor(index) }
+					})
+				}, marker.id);
+			}), /* @__PURE__ */ jsx(Popover.Anchor, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "absolute left-0",
+					style: {
+						top: anchorOffset,
+						width,
+						height: 0
+					}
+				})
+			})]
+		}), hoveredMarker && /* @__PURE__ */ jsxs(Popover.Content, {
+			side: "right",
+			align: "center",
+			avoidCollisions: false,
+			onOpenAutoFocus: (event) => event.preventDefault(),
+			children: [/* @__PURE__ */ jsx(Popover.Viewport, { children: /* @__PURE__ */ jsxs("div", {
+				className: "px-2 py-1 max-w-[24rem] w-[24rem]",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "truncate font-medium",
+					children: hoveredMarker.title
+				}), hoveredMarker.description && /* @__PURE__ */ jsx("p", {
+					className: "mt-1 text-sm text-description line-clamp-3",
+					children: hoveredMarker.description
+				})]
+			}) }), /* @__PURE__ */ jsx(Popover.Arrow, {})]
+		}, hoveredMarker.id)]
+	});
+};
+//#endregion
+export { ItemSelectionProvider as A, useWidgetState as C, SelectionGroupContext as D, setHighlights as E, useFeedNavigation as F, DecorationsProvider as I, useDecorations as L, useItemSelection as M, useItemSelectionValue as N, createSelectionGroup as O, useFollow as P, ScrollFollower as R, createWidgetStateStore as S, highlights as T, sliceFeed as _, useJumpDetector as a, WidgetScopeProvider as b, useFeedModel as c, fromMessages as d, ListModel as f, searchFeed as g, messageText as h, useMessageList as i, isAdditive as j, useSelectionGroup as k, useListModel as l, defaultRenderer as m, Minimap as n, usePositionLog as o, chatRenderer as p, MessageList as r, Window as s, Outline as t, FeedModel as u, MarkdownBlock as v, highlightTheme as w, WidgetStateProvider as x, HtmlBlock as y, stepVelocity as z };
+
+//# sourceMappingURL=chunk-src.mjs.map