@tangle-network/sandbox-ui 3.0.1 → 3.0.3

package/dist/AgentTree-D4d06rfH.js

@@ -0,0 +1,293 @@
+import { t as VirtualList } from "./VirtualList-DcSGbEtA.js";
+import { C as ms, D as toolKey, E as textOf, T as roleOf, a as isLifecycle, c as anchorsOf, d as collapseIdleTurns, f as collapsePolls, g as eventMatches, h as callsOf, l as answeredBy, m as thinkingMarkers, n as ConversationRowView, o as rowItems, p as quietThinking, t as useFollowTail, u as collapseHollowTurns } from "./use-follow-tail-DZFn7QDO.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { AgentTimelineColumn, agentTimelineStepKind } from "@tangle-network/ui/chat/agent-timeline";
+import { RunStatusIcon, runStatus, statusMeta } from "@tangle-network/ui/run/status-meta";
+// src/run/record/Conversation.tsx
+function Conversation({ index, actor, cutoff, query, category, selected, openSource, flags, onFlag, lifecycle = false, live = false, follow = live, opening }) {
+	const [opened, setOpened] = useState(() => {
+		const at = anchorsOf(index.events);
+		return new Set(index.events.filter((event) => event.detail.promptKind === "initial").map((event) => `prompt:${at.get(event.id) ?? event.id}`));
+	});
+	const scroll = useRef(null);
+	const anchors = useMemo(() => anchorsOf(index.events), [index]);
+	const anchor = useCallback((event) => anchors.get(event.id) ?? event.id, [anchors]);
+	const opener = (event) => openSource ? (sha256) => openSource(sha256, event) : void 0;
+	const setOpen = (key, open) => setOpened((current) => {
+		if (current.has(key) === open) return current;
+		const next = new Set(current);
+		if (open) next.add(key);
+		else next.delete(key);
+		return next;
+	});
+	const paired = (event, call) => {
+		const key = toolKey(event.node, call.id);
+		return index.calls.get(key)?.length === 1 ? index.results.get(key) ?? [] : [];
+	};
+	const target = useMemo(() => {
+		if (!selected) return void 0;
+		const event = index.byEvent.get(selected);
+		if (event?.detail.toolCallId !== void 0) {
+			const calls = index.calls.get(toolKey(event.node, event.detail.toolCallId));
+			if (calls?.length === 1) return calls[0].event.id;
+		}
+		return selected;
+	}, [selected, index]);
+	const items = useMemo(() => (index.byActor.get(actor) ?? []).filter((event) => {
+		if (ms(event.at) > cutoff) return false;
+		if (event.id === target) return true;
+		if (isLifecycle(event)) return lifecycle && eventMatches(event, index, query, category);
+		if (event.detail.toolCallId !== void 0) {
+			const matching = index.calls.get(toolKey(event.node, event.detail.toolCallId));
+			if (matching?.length === 1 && ms(matching[0].event.at) <= cutoff) return false;
+		}
+		const calls = callsOf(event);
+		if (!(event.detail.role || textOf(event) || event.detail.reasoning || event.detail.responseStatus === "error" || calls.length)) return false;
+		if (event.detail.role === "assistant" && !textOf(event) && !event.detail.reasoning && !calls.length && event.detail.responseStatus !== "error" && !event.detail.contentOmitted && (!thinkingMarkers(event.detail).length || quietThinking(event.detail))) return false;
+		if (eventMatches(event, index, query, category)) return true;
+		return calls.some((call) => {
+			const key = toolKey(event.node, call.id);
+			return index.calls.get(key)?.length === 1 && (index.results.get(key) ?? []).some((result) => ms(result.at) <= cutoff && eventMatches(result, index, query, category));
+		});
+	}), [
+		index,
+		actor,
+		cutoff,
+		query,
+		category,
+		lifecycle,
+		target
+	]);
+	const shown = useMemo(() => {
+		if (!opening?.text || query || category !== "all" || items.some((event) => event.detail.role === "user" && event.detail.promptKind !== "steering")) return items;
+		const first = items[0]?.at ?? opening.at;
+		return [{
+			id: `${actor}:opening`,
+			node: actor,
+			at: first < opening.at ? first : opening.at,
+			kind: "message",
+			category: "other",
+			label: "prompt",
+			detail: {
+				role: "user",
+				publicText: opening.text,
+				promptKind: "initial"
+			}
+		}, ...items];
+	}, [
+		items,
+		opening,
+		actor,
+		query,
+		category
+	]);
+	const rows = useMemo(() => collapseIdleTurns(collapseHollowTurns(collapsePolls(shown, {
+		callsOf,
+		answered: (event, id) => answeredBy(index.results.get(toolKey(event.node, id))),
+		keyOf: anchor
+	}), {
+		callsOf,
+		captured: (event, id) => (index.results.get(toolKey(event.node, id)) ?? []).some((result) => textOf(result)),
+		keyOf: anchor
+	}), callsOf), [
+		shown,
+		index,
+		anchor
+	]);
+	const thinkingSpan = useMemo(() => {
+		const spans = /* @__PURE__ */ new Map();
+		let previous = null;
+		for (const event of index.byActor.get(actor) ?? []) {
+			const at = ms(event.at);
+			if (previous !== null && Number.isFinite(at) && thinkingMarkers(event.detail).length) spans.set(event.id, Math.max(0, at - previous));
+			if (Number.isFinite(at)) previous = at;
+		}
+		return spans;
+	}, [index, actor]);
+	const rowOf = useMemo(() => new Map(rows.flatMap((row) => (row.kind === "event" ? [row.event] : row.events).map((event) => [event.id, row.key]))), [rows]);
+	const retained = (index.byActor.get(actor) ?? []).some((item) => !isLifecycle(item) && (item.detail.role || textOf(item) || callsOf(item).length));
+	const tail = rows.at(-1), event = tail?.kind === "event" ? tail.event : tail?.events.at(-1);
+	const { following } = useFollowTail(scroll, {
+		identity: actor,
+		content: rows,
+		follow,
+		target
+	});
+	useEffect(() => {
+		if (!selected) return;
+		const event = index.byEvent.get(selected);
+		if (!event) return;
+		const keys = [`prompt:${anchor(event)}`, `reasoning:${anchor(event)}`];
+		if (event.detail.toolCallId !== void 0) for (const match of index.calls.get(toolKey(event.node, event.detail.toolCallId)) ?? []) keys.push(`tool:${anchor(match.event)}:${match.call.id}`, rowOf.get(match.event.id) ?? "");
+		for (const call of callsOf(event)) keys.push(`tool:${anchor(event)}:${call.id}`);
+		const row = rowOf.get(selected);
+		if (row?.startsWith("polls:")) keys.push(row);
+		setOpened((current) => /* @__PURE__ */ new Set([...current, ...keys.filter(Boolean)]));
+	}, [selected, index]);
+	const flagMarks = (event) => {
+		const marks = flags?.get(event.id);
+		if (!marks?.length) return null;
+		return /* @__PURE__ */ jsx("span", {
+			className: "event-flags",
+			children: marks.map((flag) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: `event-flag polarity-${flag.polarity}`,
+				title: flag.title,
+				"data-flag": flag.dimension,
+				onClick: () => onFlag?.(flag, event),
+				children: flag.dimension
+			}, `${flag.dimension}:${flag.label}`))
+		});
+	};
+	const keyOf = useCallback((row) => row.key, []);
+	const estimate = useCallback((row) => {
+		if (row.kind !== "event") return 36;
+		if (isLifecycle(row.event)) return 26;
+		return !textOf(row.event) && callsOf(row.event).length ? 16 + 36 * callsOf(row.event).length : 96;
+	}, []);
+	const context = {
+		index,
+		cutoff,
+		selected,
+		opened,
+		anchor,
+		opener,
+		setOpen,
+		flagMarks,
+		paired,
+		thinkingSpan,
+		flags,
+		live
+	};
+	const itemsOf = useMemo(() => rows.map((row) => rowItems(row, context)), [
+		rows,
+		opened,
+		cutoff,
+		selected,
+		live,
+		index,
+		thinkingSpan
+	]);
+	const turns = useMemo(() => {
+		let previous;
+		return rows.map((row) => {
+			const event = row.kind === "event" ? row.event : row.events[0];
+			const turn = event.detail.role === "assistant" && !isLifecycle(event) && (!previous || previous.detail.role === "user" || (event.detail.attempt !== void 0 ? event.detail.attempt !== previous.detail.attempt : ms(event.at) - ms(previous.at) > 12e4));
+			previous = row.kind === "event" ? event : row.events.at(-1);
+			return turn;
+		});
+	}, [rows]);
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", {
+		className: "record-conversation conversation-scroll",
+		"data-chat": true,
+		ref: scroll,
+		tabIndex: 0,
+		"aria-label": "Scrollable retained conversation",
+		children: [!rows.length && /* @__PURE__ */ jsx("p", {
+			className: "chat-empty",
+			children: query || category !== "all" ? "No messages match this filter." : retained ? "No messages at the selected time." : "Conversation not retained. Its absence does not mean the agent did no work."
+		}), /* @__PURE__ */ jsx(AgentTimelineColumn, {
+			className: "ar-chat",
+			children: /* @__PURE__ */ jsx(VirtualList, {
+				items: rows,
+				keyOf,
+				render: (row, i) => /* @__PURE__ */ jsx(ConversationRowView, {
+					row,
+					items: itemsOf[i] ?? [],
+					previous: i && itemsOf[i - 1]?.length ? agentTimelineStepKind(itemsOf[i - 1].at(-1)) : void 0,
+					turn: turns[i],
+					context
+				}),
+				scroller: scroll,
+				target: target ? rowOf.get(target) : void 0,
+				estimate,
+				arrival: live ? {
+					identity: actor,
+					id: event?.id,
+					key: tail?.key,
+					following
+				} : void 0
+			})
+		})]
+	}) });
+}
+// src/run/record/AgentTree.tsx
+/** Retained identity and recorded time define the hierarchy; labels never join sessions or invent parents. */
+function AgentTree({ index, actor, cutoff, select }) {
+	const roots = useMemo(() => {
+		const nodes = index.actors.filter((node) => node.kind !== "finding");
+		const byId = new Map(nodes.map((node) => [node.id, node]));
+		const children = /* @__PURE__ */ new Map();
+		for (const node of nodes) {
+			if (!node.parent) continue;
+			const parent = index.canonical(node.parent), siblings = children.get(parent) ?? [];
+			siblings.push(node);
+			children.set(parent, siblings);
+		}
+		const visited = /* @__PURE__ */ new Set();
+		const visit = (node) => {
+			if (visited.has(node.id)) return [];
+			visited.add(node.id);
+			return [{
+				node,
+				children: (children.get(node.id) ?? []).flatMap(visit)
+			}];
+		};
+		const roots = nodes.filter((node) => !node.parent || !byId.has(index.canonical(node.parent))).flatMap(visit);
+		for (const node of nodes) roots.push(...visit(node));
+		return roots;
+	}, [index]);
+	const renderNodes = (entries, nested = false) => /* @__PURE__ */ jsx("ul", {
+		className: nested ? "m-0 ml-3 list-none border-l border-border pl-2" : "m-0 grid list-none gap-1 p-0",
+		children: entries.map(({ node, children }) => {
+			const firstEvent = index.byActor.get(node.id)?.[0];
+			const begin = node.start ? ms(node.start) : firstEvent ? ms(firstEvent.at) : void 0;
+			const future = begin !== void 0 && begin > cutoff, pending = typeof node.end === "string" && ms(node.end) > cutoff;
+			const status = runStatus(future || pending ? "unknown" : node.status ?? "unknown");
+			const state = future ? "Not yet started" : pending ? "Not yet settled" : statusMeta(status).label;
+			return /* @__PURE__ */ jsxs("li", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "flex w-full min-w-0 items-start gap-2 rounded border border-transparent px-2 py-1.5 text-left text-sm text-foreground hover:border-border focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring aria-pressed:border-border aria-pressed:bg-muted data-[future]:opacity-55",
+					"aria-label": "Read " + roleOf(node) + " " + node.label + " conversation. " + state + ".",
+					"aria-pressed": actor === node.id,
+					"data-node": node.id,
+					"data-future": future ? "" : void 0,
+					title: node.label + (node.assignment ? " · " + node.assignment : "") + " · " + state,
+					onClick: () => select(node.id),
+					children: [/* @__PURE__ */ jsx(RunStatusIcon, {
+						status,
+						className: "mt-0.5 size-3.5 shrink-0",
+						"aria-hidden": true
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "grid min-w-0 gap-0.5 break-words",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "font-semibold",
+							children: node.label
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "text-muted-foreground",
+							children: [
+								roleOf(node),
+								" · ",
+								state
+							]
+						})]
+					})]
+				}), children.length > 0 && renderNodes(children, true)]
+			}, node.id);
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "record-agent-tree max-h-80 overflow-auto px-2 py-2",
+		"data-graph": true,
+		role: "group",
+		"aria-label": "Recorded agent hierarchy. Select an agent to read its conversation.",
+		children: roots.length ? renderNodes(roots) : /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-muted-foreground",
+			children: "No agent topology was retained."
+		})
+	});
+}
+export { Conversation as n, AgentTree as t };

package/dist/{ResearchReport-CSNpZ-pj.js → ResearchReport-D1TFmldm.js}

@@ -1,4 +1,5 @@
-import { a as fmt, c as modelIdentity, d as recordFlowTrace, f as roleOf, h as utcTime, i as eventSource, m as toolKey, n as Conversation, o as indexRecord, p as textOf, r as eventMatches, s as interval, t as AgentTree, u as ms } from "./AgentTree-CJRVpgPq.js";
+import { C as ms, D as toolKey, E as textOf, O as utcTime, T as roleOf, _ as eventSource, b as interval, g as eventMatches, v as fmt, w as recordFlowTrace, x as modelIdentity, y as indexRecord } from "./use-follow-tail-DZFn7QDO.js";
+import { n as Conversation, t as AgentTree } from "./AgentTree-D4d06rfH.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@tangle-network/ui/primitives";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, memo, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";

package/dist/{VirtualList-DLh2JE0F.js → VirtualList-DcSGbEtA.js}

@@ -1,23 +1,13 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 // src/run/record/VirtualList.tsx
-/**
-* Renders only the rows near the viewport of `scroller`. Row heights are measured as they render; unmeasured
-* rows use `estimate`. Spacers keep the scroll height, so the browser's scroll anchoring holds the reading place.
-*/
-function VirtualList({ items, keyOf, render, scroller, estimate = 96, overscan = 900, target, origin, targetAlign = "start", virtualize = true, keepMounted }) {
+/** Row heights measured as rows render through `bind`; `version` changes when a measured height changes. */
+function useMeasuredHeights() {
 	const heights = useRef(/* @__PURE__ */ new Map());
-	const [version, setVersion] = useState(0);
-	const [viewport, setViewport] = useState({
-		top: 0,
-		height: 900
-	});
+	const rows = useRef(/* @__PURE__ */ new Map());
 	const observer = useRef(null);
 	const frame = useRef(0);
-	const originTop = () => {
-		const element = scroller.current, node = origin?.current;
-		return element && node ? node.getBoundingClientRect().top - (element === document.scrollingElement ? 0 : element.getBoundingClientRect().top + element.clientTop) + element.scrollTop : 0;
-	};
+	const [version, setVersion] = useState(0);
 	const observe = (element) => {
 		if (!observer.current && typeof ResizeObserver !== "undefined") observer.current = new ResizeObserver((entries) => {
 			let changed = false;
@@ -45,6 +35,31 @@ function VirtualList({ items, keyOf, render, scroller, estimate = 96, overscan =
 			observer.current?.disconnect();
 		};
 	}, []);
+	const bind = (key) => (element) => {
+		const previous = rows.current.get(key);
+		if (previous) observer.current?.unobserve(previous);
+		if (element) {
+			rows.current.set(key, element);
+			observe(element);
+		} else rows.current.delete(key);
+	};
+	return {
+		heights,
+		rows,
+		version,
+		bind
+	};
+}
+/** The scroller's visible window, measured from `origin` when the rows start below other content. */
+function useViewport(scroller, origin) {
+	const [viewport, setViewport] = useState({
+		top: 0,
+		height: 900
+	});
+	const originTop = () => {
+		const element = scroller.current, node = origin?.current;
+		return element && node ? node.getBoundingClientRect().top - (element === document.scrollingElement ? 0 : element.getBoundingClientRect().top + element.clientTop) + element.scrollTop : 0;
+	};
 	useEffect(() => {
 		const element = scroller.current;
 		if (!element) return;
@@ -73,59 +88,42 @@ function VirtualList({ items, keyOf, render, scroller, estimate = 96, overscan =
 			resize.disconnect();
 		};
 	}, [scroller, origin]);
-	const offsets = useMemo(() => {
-		const result = new Float64Array(items.length + 1);
-		const guess = typeof estimate === "function" ? estimate : () => estimate;
-		for (let i = 0; i < items.length; i++) result[i + 1] = result[i] + (heights.current.get(keyOf(items[i])) ?? guess(items[i]));
-		return result;
-	}, [
-		items,
-		keyOf,
-		estimate,
-		version
-	]);
-	const find = (y) => {
-		let low = 0, high = items.length;
-		while (low < high) {
-			const mid = low + high >> 1;
-			if (offsets[mid + 1] <= y) low = mid + 1;
-			else high = mid;
-		}
-		return low;
-	};
-	const start = virtualize ? Math.max(0, find(viewport.top - overscan)) : 0;
-	const end = virtualize ? Math.min(items.length, find(viewport.top + viewport.height + overscan) + 1) : items.length;
-	const scrollTo = (key, align) => {
-		const element = scroller.current;
-		const index = items.findIndex((item) => keyOf(item) === key);
-		if (!element || index < 0) return false;
-		const origin = originTop(), top = origin + offsets[index];
-		const bottom = origin + offsets[index + 1];
-		if (align || top < element.scrollTop) element.scrollTop = Math.max(0, top - 8);
-		else if (bottom > element.scrollTop + element.clientHeight) element.scrollTop = Math.max(0, bottom - element.clientHeight);
-		return true;
+	return {
+		viewport,
+		originTop
 	};
+}
+/**
+* A target is settled, not jumped to once: rows above it are measured only after the first jump renders them, which
+* moves it. Each measurement, viewport move and change of the rows (a record that arrived late) re-aligns it until the
+* reader scrolls, or after two seconds. Home and End settle the first and last row the same way.
+*/
+function useSettleTarget(scroller, { target, align, items, keyOf, offsets, originTop, rows, version, viewport }) {
 	const pending = useRef(null);
-	const rows = useRef(/* @__PURE__ */ new Map());
+	const goal = (key) => ({
+		key,
+		until: performance.now() + 2e3
+	});
 	const settle = () => {
-		const goal = pending.current;
-		if (!goal) return;
-		if (performance.now() > goal.until) {
+		const current = pending.current;
+		if (!current) return;
+		if (performance.now() > current.until) {
 			pending.current = null;
 			return;
 		}
-		if (!scrollTo(goal.key, targetAlign === "start")) return;
-		const row = rows.current.get(goal.key);
-		if (targetAlign === "start" && row?.isConnected) {
+		const element = scroller.current, index = items.findIndex((item) => keyOf(item) === current.key);
+		if (!element || index < 0) return;
+		const origin = originTop(), top = origin + offsets[index], bottom = origin + offsets[index + 1];
+		if (align === "start" || top < element.scrollTop) element.scrollTop = Math.max(0, top - 8);
+		else if (bottom > element.scrollTop + element.clientHeight) element.scrollTop = Math.max(0, bottom - element.clientHeight);
+		const row = rows.current.get(current.key);
+		if (align === "start" && row?.isConnected) {
 			const box = row.getBoundingClientRect();
 			if (box.top < 72 || box.top > window.innerHeight - 96) window.scrollBy({ top: box.top - 120 });
 		}
 	};
 	useLayoutEffect(() => {
-		pending.current = target ? {
-			key: target,
-			until: performance.now() + 2e3
-		} : null;
+		pending.current = target ? goal(target) : null;
 		settle();
 	}, [target]);
 	useLayoutEffect(settle, [
@@ -138,10 +136,7 @@ function VirtualList({ items, keyOf, render, scroller, estimate = 96, overscan =
 		if (!element) return;
 		const release = (event) => {
 			const key = event instanceof KeyboardEvent && event.target === element && !event.defaultPrevented ? event.key : "";
-			pending.current = items.length && (key === "Home" || key === "End") ? {
-				key: keyOf(items[key === "Home" ? 0 : items.length - 1]),
-				until: performance.now() + 2e3
-			} : null;
+			pending.current = items.length && (key === "Home" || key === "End") ? goal(keyOf(items[key === "Home" ? 0 : items.length - 1])) : null;
 			if (pending.current) {
 				event.preventDefault();
 				settle();
@@ -163,14 +158,74 @@ function VirtualList({ items, keyOf, render, scroller, estimate = 96, overscan =
 		keyOf,
 		offsets
 	]);
-	const bind = (key) => (element) => {
-		const previous = rows.current.get(key);
-		if (previous) observer.current?.unobserve(previous);
-		if (element) {
-			rows.current.set(key, element);
-			observe(element);
-		} else rows.current.delete(key);
+}
+/** Animate a new followed row once; measurements and reader-state updates keep the same arrival identity. */
+function useArrival(scroller, rows, arrival) {
+	const identity = arrival?.identity;
+	const prior = useRef({
+		identity,
+		id: arrival?.id
+	});
+	useLayoutEffect(() => {
+		const animate = prior.current.identity === identity && !!prior.current.id && prior.current.id !== arrival?.id;
+		prior.current = {
+			identity,
+			id: arrival?.id
+		};
+		if (!animate || !arrival?.key || !arrival.following.current) return;
+		const frame = requestAnimationFrame(() => {
+			const element = scroller.current, row = rows.current.get(arrival.key)?.firstElementChild;
+			if (!element || !row || !arrival.following.current) return;
+			const style = getComputedStyle(element), value = style.getPropertyValue("--duration-stream").trim(), duration = parseFloat(value) * (value.endsWith("ms") ? 1 : 1e3);
+			if (duration > 0 && !matchMedia("(prefers-reduced-motion: reduce)").matches) row.animate([{ opacity: 0 }, { opacity: 1 }], {
+				duration,
+				easing: style.getPropertyValue("--ease-expo").trim() || "linear"
+			});
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [identity, arrival?.id]);
+}
+/**
+* Renders only the rows near the viewport of `scroller`. Row heights are measured as they render; unmeasured
+* rows use `estimate`. Spacers keep the scroll height, so the browser's scroll anchoring holds the reading place.
+*/
+function VirtualList({ items, keyOf, render, scroller, estimate = 96, overscan = 900, target, origin, targetAlign = "start", virtualize = true, keepMounted, arrival }) {
+	const { heights, rows, version, bind } = useMeasuredHeights();
+	const { viewport, originTop } = useViewport(scroller, origin);
+	useArrival(scroller, rows, arrival);
+	const offsets = useMemo(() => {
+		const result = new Float64Array(items.length + 1);
+		const guess = typeof estimate === "function" ? estimate : () => estimate;
+		for (let i = 0; i < items.length; i++) result[i + 1] = result[i] + (heights.current.get(keyOf(items[i])) ?? guess(items[i]));
+		return result;
+	}, [
+		items,
+		keyOf,
+		estimate,
+		version
+	]);
+	useSettleTarget(scroller, {
+		target,
+		align: targetAlign,
+		items,
+		keyOf,
+		offsets,
+		originTop,
+		rows,
+		version,
+		viewport
+	});
+	const find = (y) => {
+		let low = 0, high = items.length;
+		while (low < high) {
+			const mid = low + high >> 1;
+			if (offsets[mid + 1] <= y) low = mid + 1;
+			else high = mid;
+		}
+		return low;
 	};
+	const start = virtualize ? Math.max(0, find(viewport.top - overscan)) : 0;
+	const end = virtualize ? Math.min(items.length, find(viewport.top + viewport.height + overscan) + 1) : items.length;
 	const indices = Array.from({ length: end - start }, (_, i) => start + i);
 	const kept = keepMounted ? items.findIndex((item) => keyOf(item) === keepMounted) : -1;
 	if (kept >= 0 && kept < start) indices.unshift(kept);