@octane-xplat/ui 0.7.2 → 0.9.0

package/dist/web/VirtualList.web.tsrx.js

@@ -1,18 +1,19 @@
 import { applyEscapeProps } from "./escape-props.web.js";
 import { layoutChildProps } from "./layout-child.web.js";
 import { VirtualListSizeIndex, createVirtualListEntries, estimateVirtualListSizes, virtualListMeasurementKey, virtualListRange } from "./virtual-list-layout.js";
-import { __s, bag3, bag4, bag6, bagOf, child, clone, createScopedElement, drainFrag, forBlock, hookSlots, ifBlock, queueRefAttach, queueRefDetach, setStyleProperty, sibling, snapshotSpread, template, useEffect, useRef, useState } from "octane";
-import { bindSignalChild, bindSignalHostPropSources, compilerMemoRegion, enableSignalBindings, hookMemoCreate, hookMemoEqual, hookMemoPublish3, replaceRef } from "octane/internal/client";
+import { VirtualListCellPool } from "./virtual-list-cell-pool.js";
+import { __s, bag10, bag3, bag4, bag7, bagOf, child, clone, createScopedElement, drainFrag, forBlock, hookSlots, ifBlock, isHydratingStyle, queueRefAttach, queueRefDetach, setStringData, setStyleProperties, setStyleProperty, sibling, snapshotSpread, template, useEffect, useRef, useState } from "octane";
+import { bindSignalAttribute, bindSignalChild, bindSignalHostPropSources, compilerMemoRegion, enableSignalBindings, hookMemoCreate, hookMemoEqual, hookMemoPublish3, replaceRef, setBooleanAttributeIfChanged, setClassNameIfChanged } from "octane/internal/client";
 //#region src/VirtualList.web.tsrx
 enableSignalBindings(1, true);
 var _t$0 = /* @__PURE__ */ template("<div class=\"vx-virtual-list-header\"></div>");
 var _t$1 = /* @__PURE__ */ template("<!>", 0, 1);
-var _t$2 = /* @__PURE__ */ template("<div class=\"vx-virtual-list-separator\"></div>");
-var _t$3 = /* @__PURE__ */ template("<div class=\"vx-virtual-list-row\" data-vx-row=\"true\"><div class=\"vx-virtual-list-item\"></div><!></div>");
-var _t$4 = /* @__PURE__ */ template("<div class=\"vx-virtual-list-spacer\" aria-hidden=\"true\"></div><!><div class=\"vx-virtual-list-spacer\" aria-hidden=\"true\"></div>", 0, 1);
+var _t$2 = /* @__PURE__ */ template("<div class=\"vx-virtual-list-item\"></div><!>", 0, 1);
+var _t$3 = /* @__PURE__ */ template("<div style=\"position: absolute;\"><!></div>");
+var _t$4 = /* @__PURE__ */ template("<div class=\"vx-virtual-list-body\" style=\"position: relative;\"><!></div>");
 var _t$5 = /* @__PURE__ */ template("<div class=\"vx-virtual-list-footer\"></div>");
 var _t$6 = /* @__PURE__ */ template("<div><!><!><!></div>");
-var _hs$ = /* @__PURE__ */ hookSlots(19);
+var _hs$ = /* @__PURE__ */ hookSlots(27);
 var _rm$2 = [
 	"r",
 	"b",
@@ -33,11 +34,11 @@ function __then$0(__props, __s, __extra) {
 		const _r = (node) => bindObservedNode("header", node, { kind: "header" });
 		if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
 	}
-	_b.e = bindSignalChild(__s, _b.e, 1, _b.a, props.renderHeader(), "b:94822c57", null, void 0, void 0, void 0, true);
+	_b.e = bindSignalChild(__s, _b.e, 1, _b.a, props.renderHeader(), "b:a325a140", null, void 0, void 0, void 0, true);
 }
 function __then$4(__props, __s, __extra) {
 	const __block = __s.block;
-	const props = __extra[3];
+	const props = __extra[5];
 	let _b = __s.slots[0];
 	if (_b === void 0) {
 		let _m0, _m1;
@@ -47,103 +48,129 @@ function __then$4(__props, __s, __extra) {
 		drainFrag(_root, __block.parentNode, __block.endMarker);
 		_b = bag4(__s, null, _m0, _m1, null, void 0);
 	}
-	_b.e = bindSignalChild(__s, _b.e, 1, _b.a, props.renderEmpty ? createScopedElement("div", { className: "vx-virtual-list-empty" }, () => props.renderEmpty()) : null, "b:e8241bf2", _b.b, true, void 0, true, void 0);
+	_b.e = bindSignalChild(__s, _b.e, 1, _b.a, props.renderEmpty ? createScopedElement("div", { className: "vx-virtual-list-empty" }, () => props.renderEmpty()) : null, "b:690ef645", _b.b, true, void 0, true, void 0);
 }
-var _key$7 = (entry) => entry.rowKey;
-function __then$10(__props, __s, __extra) {
-	const props = __extra[0];
+var _key$7 = (cell) => cell.id;
+var _key$9 = (entry) => entry.rowKey;
+function __item$10(entry, __s, __extra) {
+	const __block = __s.block;
+	const entries = __extra[0];
+	const hasSeparator = __extra[1];
+	const props = __extra[2];
 	let _b = __s.slots[0];
 	if (_b === void 0) {
-		let _m0;
+		let _m0, _m3, _m4;
 		const _root = clone(_t$2);
-		_m0 = _root;
-		_b = bag3(__s, _root, _m0, null, void 0);
+		const _el0 = child(_root);
+		_m0 = _el0;
+		_m3 = __block.parentNode;
+		_m4 = sibling(_el0, 1);
+		drainFrag(_root, __block.parentNode, __block.endMarker);
+		_b = bag7(__s, null, _m0, null, void 0, _m3, _m4, null, void 0);
 	}
-	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, props.renderSeparator?.(), "b:d89a1727", null, void 0, void 0, void 0, true);
+	_b.h = bindSignalChild(__s, _b.h, 1, _b.a, props.renderItem(entry.item, entry.index), "b:4a2b9e6a", null, void 0, void 0, void 0, true);
+	_b.i = bindSignalChild(__s, _b.i, 2, _b.d, hasSeparator && entry.index < entries.length - 1 ? createScopedElement("div", { className: "vx-virtual-list-separator" }, () => props.renderSeparator?.()) : null, "b:ab215d41", _b.e, true, void 0, void 0, void 0);
 }
-var _rm$13 = [
+var _rm$14 = [
 	"r",
-	"b",
-	"a"
+	"i",
+	"b"
 ];
-function __item$8(entry, __s, __extra) {
-	const bindObservedNode = __extra[0];
+function __item$8(cell, __s, __extra) {
+	const cellCallback = __extra[0];
 	const entries = __extra[1];
 	const hasSeparator = __extra[2];
 	const props = __extra[3];
 	let _b = __s.slots[0];
 	if (_b === void 0) {
-		let _m0, _m1, _m2, _m3;
-		const _root = clone(_t$3);
-		queueRefAttach(__s, _m1 = (node) => bindObservedNode("row:" + virtualListMeasurementKey(entry.rowKey, hasSeparator && entry.index < entries.length - 1), node, {
-			kind: "row",
-			rowKey: entry.rowKey
-		}), _m0 = _root);
-		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
-		_m2 = sibling(child(_root), 1);
-		_m3 = child(_root);
-		_b = bag6(__s, _root, _m0, _m1, _m2, _m3, null, void 0);
-		__s.refFields = _rm$13;
+		let _m1, _m8, _m9;
+		const _root = clone(_t$3, void 0, "||");
+		_m1 = _root;
+		queueRefAttach(__s, _m8 = cellCallback(cell.id), _m1);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.i, _b.b));
+		_m9 = child(_root);
+		_b = bag10(__s, _root, void 0, _m1, void 0, void 0, __s, void 0, void 0, void 0, _m8, _m9);
+		__s.refFields = _rm$14;
 	} else {
-		const _r = (node) => bindObservedNode("row:" + virtualListMeasurementKey(entry.rowKey, hasSeparator && entry.index < entries.length - 1), node, {
-			kind: "row",
-			rowKey: entry.rowKey
-		});
-		if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+		const _r = cellCallback(cell.id);
+		if (_r !== _b.i) _b.i = replaceRef(__s, _b.i, _r, _b.b);
 	}
-	_b.g = bindSignalChild(__s, _b.g, 1, _b.d, props.renderItem(entry.item, entry.index), "b:a1d755a0", null, void 0, void 0, void 0, true);
+	_b.a = setClassNameIfChanged(cell.entry ? "vx-virtual-list-cell vx-virtual-list-row" : "vx-virtual-list-cell", _b.a, _b.b);
+	_b.c = bindSignalAttribute(__s, _b.c, _b.b, "data-vx-row", cell.entry ? "true" : void 0, "b:f58d7551", setStringData);
+	_b.d = setBooleanAttributeIfChanged(!cell.entry, _b.d, _b.b, "hidden");
 	{
-		const __ifCondition = hasSeparator && entry.index < entries.length - 1;
-		ifBlock(__s, 2, _b.a, __ifCondition, __then$10, null, _b.c, __ifCondition ? [props] : void 0);
+		const _v0 = cell.top;
+		const _v1 = 0;
+		const _v2 = "100%";
+		if (_b.e === __s || isHydratingStyle()) {
+			setStyleProperties(_b.b, [
+				"top",
+				_v0,
+				"left",
+				_v1,
+				"width",
+				_v2
+			], "position: absolute;");
+			_b.e = null;
+			_b.f = _v0;
+			_b.g = _v1;
+			_b.h = _v2;
+		} else {
+			if (_b.f !== _v0) {
+				setStyleProperty(_b.b, "top", _v0, "", _b.f);
+				_b.f = _v0;
+			}
+			if (_b.g !== _v1) {
+				setStyleProperty(_b.b, "left", _v1, "", _b.g);
+				_b.g = _v1;
+			}
+			if (_b.h !== _v2) {
+				setStyleProperty(_b.b, "width", _v2, "", _b.h);
+				_b.h = _v2;
+			}
+		}
 	}
+	forBlock(__s, 1, _b.b, cell.rows, _key$9, __item$10, 40, [
+		entries,
+		hasSeparator,
+		props
+	], null, _b.j, true, "f17zmjlo");
 }
 function __else$6(__props, __s, __extra) {
-	const __block = __s.block;
-	const bindObservedNode = __extra[0];
-	const entries = __extra[1];
-	const hasSeparator = __extra[2];
-	const props = __extra[3];
-	const range = __extra[4];
-	const visibleEntries = __extra[5];
+	const cellCallback = __extra[0];
+	const cells = __extra[1];
+	const contentHeight = __extra[2];
+	const entries = __extra[3];
+	const hasSeparator = __extra[4];
+	const props = __extra[5];
 	let _b = __s.slots[0];
 	if (_b === void 0) {
-		let _m1, _m3, _m4, _m5;
-		const _root = clone(_t$4);
-		const _el0 = child(_root);
-		_m1 = _el0;
-		_m3 = sibling(_el0, 2);
-		_m4 = __block.parentNode;
-		_m5 = sibling(_el0, 1);
-		drainFrag(_root, __block.parentNode, __block.endMarker);
-		_b = bag6(__s, null, __s, _m1, __s, _m3, _m4, _m5);
+		let _m1, _m2;
+		const _root = clone(_t$4, void 0, "||");
+		_m1 = _root;
+		_m2 = child(_root);
+		_b = bag3(__s, _root, __s, _m1, _m2);
 	}
 	{
-		const _v = range.top;
+		const _v = contentHeight;
 		if (_b.a !== _v) {
-			setStyleProperty(_b.b, "height", _v, "", _b.a);
+			setStyleProperty(_b.b, "height", _v, "position: relative;", _b.a);
 			_b.a = _v;
 		}
 	}
-	{
-		const _v = range.bottom;
-		if (_b.c !== _v) {
-			setStyleProperty(_b.d, "height", _v, "", _b.c);
-			_b.c = _v;
-		}
-	}
-	forBlock(__s, 1, _b.e, visibleEntries, _key$7, __item$8, 58, [
-		bindObservedNode,
+	forBlock(__s, 1, _b.b, cells, _key$7, __item$8, 58, [
+		cellCallback,
 		entries,
 		hasSeparator,
 		props
-	], null, _b.f, true, "f3hnb6e");
+	], null, _b.c, true, "f17zlx0q");
 }
-var _rm$18 = [
+var _rm$19 = [
 	"r",
 	"b",
 	"a"
 ];
-function __then$16(__props, __s, __extra) {
+function __then$17(__props, __s, __extra) {
 	const bindObservedNode = __extra[0];
 	const props = __extra[1];
 	let _b = __s.slots[0];
@@ -153,14 +180,14 @@ function __then$16(__props, __s, __extra) {
 		queueRefAttach(__s, _m1 = (node) => bindObservedNode("footer", node, { kind: "footer" }), _m0 = _root);
 		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
 		_b = bag4(__s, _root, _m0, _m1, null, void 0);
-		__s.refFields = _rm$18;
+		__s.refFields = _rm$19;
 	} else {
 		const _r = (node) => bindObservedNode("footer", node, { kind: "footer" });
 		if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
 	}
-	_b.e = bindSignalChild(__s, _b.e, 1, _b.a, props.renderFooter(), "b:d63031d4", null, void 0, void 0, void 0, true);
+	_b.e = bindSignalChild(__s, _b.e, 1, _b.a, props.renderFooter(), "b:c2fff523", null, void 0, void 0, void 0, true);
 }
-var _rm$20 = [
+var _rm$21 = [
 	"s",
 	"p",
 	"o"
@@ -176,28 +203,34 @@ var VirtualList = /* @__PURE__ */ __s(function VirtualList(props, __s, __extra)
 	const entries = (__hkd0 = props.items, __hkd1 = props.keyExtractor, __hkd2 = props.getItemType, __hk[0] !== true || !hookMemoEqual(__hk[1], __hkd0) || !hookMemoEqual(__hk[2], __hkd1) || !hookMemoEqual(__hk[3], __hkd2) ? hookMemoPublish3(__hk, 0, createVirtualListEntries(props.items, props.keyExtractor, props.getItemType), __hkd0, __hkd1, __hkd2) : __hk[4]);
 	const [windowVersion, setWindowVersion] = useState(0, _hs$ + 0);
 	const sizeIndexRef = useRef(new VirtualListSizeIndex(), _hs$ + 1);
-	const sizeCacheRef = useRef(/* @__PURE__ */ new Map(), _hs$ + 2);
-	const entriesRef = useRef([], _hs$ + 3);
-	const indexByRowKeyRef = useRef(/* @__PURE__ */ new Map(), _hs$ + 4);
-	const scrollRef = useRef(null, _hs$ + 5);
-	const scrollOffsetRef = useRef(0, _hs$ + 6);
-	const viewportHeightRef = useRef(0, _hs$ + 7);
-	const viewportWidthRef = useRef(0, _hs$ + 8);
-	const headerHeightRef = useRef(0, _hs$ + 9);
-	const footerHeightRef = useRef(0, _hs$ + 10);
-	const observerRef = useRef(null, _hs$ + 11);
-	const estimateScheduledRef = useRef(false, _hs$ + 12);
-	const nodesBySlotRef = useRef(/* @__PURE__ */ new Map(), _hs$ + 13);
-	const metaByNodeRef = useRef(/* @__PURE__ */ new WeakMap(), _hs$ + 14);
+	const cellsRef = useRef(new VirtualListCellPool(), _hs$ + 2);
+	const cellCallbacksRef = useRef(/* @__PURE__ */ new Map(), _hs$ + 3);
+	const measuredAssignmentsRef = useRef(/* @__PURE__ */ new Map(), _hs$ + 4);
+	const disposedRef = useRef(false, _hs$ + 5);
+	const sizeCacheRef = useRef(/* @__PURE__ */ new Map(), _hs$ + 6);
+	const entriesRef = useRef([], _hs$ + 7);
+	const indexByRowKeyRef = useRef(/* @__PURE__ */ new Map(), _hs$ + 8);
+	const scrollRef = useRef(null, _hs$ + 9);
+	const scrollOffsetRef = useRef(0, _hs$ + 10);
+	const viewportHeightRef = useRef(0, _hs$ + 11);
+	const viewportWidthRef = useRef(0, _hs$ + 12);
+	const headerHeightRef = useRef(0, _hs$ + 13);
+	const footerHeightRef = useRef(0, _hs$ + 14);
+	const observerRef = useRef(null, _hs$ + 15);
+	const estimateScheduledRef = useRef(false, _hs$ + 16);
+	const resizeDeliveryRef = useRef(false, _hs$ + 17);
+	const refreshAfterResizeRef = useRef(false, _hs$ + 18);
+	const nodesBySlotRef = useRef(/* @__PURE__ */ new Map(), _hs$ + 19);
+	const metaByNodeRef = useRef(/* @__PURE__ */ new WeakMap(), _hs$ + 20);
 	const rangeRef = useRef({
 		start: -1,
 		end: -1,
 		top: -1,
 		bottom: -1
-	}, _hs$ + 15);
-	const handlersRef = useRef(() => {}, _hs$ + 16);
+	}, _hs$ + 21);
+	const handlersRef = useRef(() => {}, _hs$ + 22);
 	const hasSeparator = Boolean(props.renderSeparator);
-	const hasSeparatorRef = useRef(hasSeparator, _hs$ + 17);
+	const hasSeparatorRef = useRef(hasSeparator, _hs$ + 23);
 	hasSeparatorRef.current = hasSeparator;
 	function rebuildLayout(nextEntries, width) {
 		entriesRef.current = nextEntries;
@@ -212,12 +245,21 @@ var VirtualList = /* @__PURE__ */ __s(function VirtualList(props, __s, __extra)
 		indexByRowKeyRef.current = indexByKey;
 		sizeIndexRef.current.reset(estimateVirtualListSizes(nextEntries, hasSeparatorRef.current, width, sizeCacheRef.current));
 	}
-	if (entries !== entriesRef.current) rebuildLayout(entries, viewportWidthRef.current);
+	if (entries !== entriesRef.current) {
+		const anchor = captureAnchor();
+		rebuildLayout(entries, viewportWidthRef.current);
+		restoreAnchor(anchor);
+	}
 	function currentRange() {
 		const listOffset = Math.max(0, scrollOffsetRef.current - headerHeightRef.current);
 		return virtualListRange(sizeIndexRef.current, listOffset, viewportHeightRef.current, viewportHeightRef.current);
 	}
 	function refreshWindow() {
+		if (disposedRef.current) return;
+		if (resizeDeliveryRef.current) {
+			refreshAfterResizeRef.current = true;
+			return;
+		}
 		const next = currentRange();
 		const previous = rangeRef.current;
 		if (next.start !== previous.start || next.end !== previous.end || !sameSize(next.top, previous.top) || !sameSize(next.bottom, previous.bottom)) {
@@ -226,7 +268,7 @@ var VirtualList = /* @__PURE__ */ __s(function VirtualList(props, __s, __extra)
 		}
 	}
 	function captureAnchor() {
-		const listOffset = scrollOffsetRef.current - headerHeightRef.current;
+		const listOffset = (scrollRef.current?.scrollTop ?? scrollOffsetRef.current) - headerHeightRef.current;
 		if (listOffset < 0 || entriesRef.current.length === 0) return null;
 		const index = sizeIndexRef.current.indexAt(listOffset);
 		const entry = entriesRef.current[index];
@@ -251,6 +293,7 @@ var VirtualList = /* @__PURE__ */ __s(function VirtualList(props, __s, __extra)
 		estimateScheduledRef.current = true;
 		Promise.resolve().then(() => {
 			estimateScheduledRef.current = false;
+			if (disposedRef.current) return;
 			const anchor = captureAnchor();
 			rebuildLayout(entriesRef.current, viewportWidthRef.current);
 			restoreAnchor(anchor);
@@ -258,7 +301,7 @@ var VirtualList = /* @__PURE__ */ __s(function VirtualList(props, __s, __extra)
 		});
 	}
 	function recordRowSize(rowKey, width, height) {
-		if (!Number.isFinite(height) || height < 0) return;
+		if (disposedRef.current || !Number.isFinite(height) || height < 0) return;
 		const index = indexByRowKeyRef.current.get(rowKey);
 		if (index === void 0) return;
 		if (!entriesRef.current[index]) return;
@@ -295,6 +338,23 @@ var VirtualList = /* @__PURE__ */ __s(function VirtualList(props, __s, __extra)
 		metaByNodeRef.current.set(node, meta);
 		observerRef.current?.observe(node);
 	}
+	function cellCallback(id) {
+		let callback = cellCallbacksRef.current.get(id);
+		if (!callback) {
+			callback = (node) => {
+				const cell = cellsRef.current.get(id);
+				bindObservedNode("cell:" + id, node, {
+					kind: "row",
+					rowKey: cell?.entry?.rowKey ?? "",
+					cellId: id,
+					generation: cell?.generation ?? 0
+				});
+				if (!node) cellCallbacksRef.current.delete(id);
+			};
+			cellCallbacksRef.current.set(id, callback);
+		}
+		return callback;
+	}
 	handlersRef.current = (meta, entry) => {
 		if (meta.kind === "viewport") {
 			const width = scrollRef.current?.clientWidth ?? entry.contentRect.width;
@@ -312,7 +372,9 @@ var VirtualList = /* @__PURE__ */ __s(function VirtualList(props, __s, __extra)
 		}
 		const height = entry.contentRect.height;
 		if (meta.kind === "row") {
-			recordRowSize(meta.rowKey, entry.contentRect.width, height);
+			if (!cellsRef.current.isCurrent(meta.cellId, meta.rowKey, meta.generation)) return;
+			const bounds = entry.target.getBoundingClientRect();
+			recordRowSize(meta.rowKey, bounds.width, bounds.height);
 			return;
 		}
 		if (meta.kind === "header" && !sameSize(height, headerHeightRef.current)) {
@@ -325,21 +387,46 @@ var VirtualList = /* @__PURE__ */ __s(function VirtualList(props, __s, __extra)
 			refreshWindow();
 		}
 	};
+	useEffect(() => {
+		disposedRef.current = false;
+		return () => {
+			disposedRef.current = true;
+			cellsRef.current.clear();
+			cellCallbacksRef.current.clear();
+			measuredAssignmentsRef.current.clear();
+			nodesBySlotRef.current.clear();
+			metaByNodeRef.current = /* @__PURE__ */ new WeakMap();
+		};
+	}, [], _hs$ + 24);
 	useEffect(() => {
 		if (typeof ResizeObserver === "undefined") return;
+		let frame = null;
 		const observer = new ResizeObserver((records) => {
-			for (const record of records) {
-				const meta = metaByNodeRef.current.get(record.target);
-				if (meta) handlersRef.current(meta, record);
+			resizeDeliveryRef.current = true;
+			try {
+				for (const record of records) {
+					const meta = metaByNodeRef.current.get(record.target);
+					if (meta) handlersRef.current(meta, record);
+				}
+			} finally {
+				resizeDeliveryRef.current = false;
 			}
+			if (!refreshAfterResizeRef.current || frame !== null) return;
+			refreshAfterResizeRef.current = false;
+			frame = requestAnimationFrame(() => {
+				frame = null;
+				refreshWindow();
+			});
 		});
 		observerRef.current = observer;
 		for (const node of nodesBySlotRef.current.values()) observer.observe(node);
 		return () => {
 			observer.disconnect();
+			if (frame !== null) cancelAnimationFrame(frame);
+			refreshAfterResizeRef.current = false;
 			observerRef.current = null;
 		};
-	}, [], _hs$ + 18);
+	}, [], _hs$ + 25);
 	function onScroll(event) {
 		const root = event.currentTarget;
 		scrollOffsetRef.current = root.scrollTop;
@@ -347,7 +434,31 @@ var VirtualList = /* @__PURE__ */ __s(function VirtualList(props, __s, __extra)
 	}
 	const range = currentRange();
 	rangeRef.current = range;
-	const visibleEntries = entries.slice(range.start, range.end);
+	const cells = cellsRef.current.update(entries.slice(range.start, range.end)).map((cell) => ({
+		...cell,
+		top: cell.entry ? sizeIndexRef.current.prefix(cell.entry.index) : 0
+	}));
+	const contentHeight = sizeIndexRef.current.total;
+	for (const cell of cells) {
+		const node = nodesBySlotRef.current.get("cell:" + cell.id);
+		if (node) metaByNodeRef.current.set(node, {
+			kind: "row",
+			rowKey: cell.entry?.rowKey ?? "",
+			cellId: cell.id,
+			generation: cell.generation
+		});
+	}
+	useEffect(() => {
+		for (const cell of cells) {
+			if (!cell.entry || measuredAssignmentsRef.current.get(cell.id) === cell.generation) continue;
+			const node = nodesBySlotRef.current.get("cell:" + cell.id);
+			if (!node || !cellsRef.current.isCurrent(cell.id, cell.entry.rowKey, cell.generation)) continue;
+			const bounds = node.getBoundingClientRect();
+			measuredAssignmentsRef.current.set(cell.id, cell.generation);
+			recordRowSize(cell.entry.rowKey, bounds.width, bounds.height);
+		}
+		for (const id of measuredAssignmentsRef.current.keys()) if (!nodesBySlotRef.current.has("cell:" + id)) measuredAssignmentsRef.current.delete(id);
+	}, [cells], _hs$ + 26);
 	const style = {
 		...props.style,
 		minHeight: props.style?.minHeight ?? 0,
@@ -446,7 +557,7 @@ var VirtualList = /* @__PURE__ */ __s(function VirtualList(props, __s, __extra)
 				"onScroll",
 				_m13
 			]
-		], "b:5767fa6f", true);
+		], "b:9fa3c3d5", true);
 		const _el0 = child(_root);
 		_m16 = _el0;
 		const _el1 = sibling(_el0, 1);
@@ -473,7 +584,7 @@ var VirtualList = /* @__PURE__ */ __s(function VirtualList(props, __s, __extra)
 			r: _m17,
 			s: _m18
 		});
-		__s.refFields = _rm$20;
+		__s.refFields = _rm$21;
 	} else {
 		{
 			const _v = (node) => {
@@ -599,23 +710,23 @@ var VirtualList = /* @__PURE__ */ __s(function VirtualList(props, __s, __extra)
 				"onScroll",
 				_b.n
 			]
-		], "b:5767fa6f", true);
+		], "b:9fa3c3d5", true);
 	}
 	{
-		const __ifCondition$ = props.renderHeader;
-		ifBlock(__s, 1, _b.o, __ifCondition$, __then$0, null, _b.q, __ifCondition$ ? [bindObservedNode, props] : void 0);
+		const __ifCondition = props.renderHeader;
+		ifBlock(__s, 1, _b.o, __ifCondition, __then$0, null, _b.q, __ifCondition ? [bindObservedNode, props] : void 0);
 	}
 	ifBlock(__s, 2, _b.o, entries.length === 0, __then$4, __else$6, _b.r, [
-		bindObservedNode,
+		cellCallback,
+		cells,
+		contentHeight,
 		entries,
 		hasSeparator,
-		props,
-		range,
-		visibleEntries
+		props
 	]);
 	{
-		const __ifCondition$2 = props.renderFooter;
-		ifBlock(__s, 3, _b.o, __ifCondition$2, __then$16, null, _b.s, __ifCondition$2 ? [bindObservedNode, props] : void 0);
+		const __ifCondition$ = props.renderFooter;
+		ifBlock(__s, 3, _b.o, __ifCondition$, __then$17, null, _b.s, __ifCondition$ ? [bindObservedNode, props] : void 0);
 	}
 });
 //#endregion

package/dist/web/WebView.web.tsrx.js

@@ -150,7 +150,7 @@ var WebView = /* @__PURE__ */ __s(function WebView(props, __s, __extra) {
 				"onError",
 				_m11
 			]
-		], "b:5cdc9608", false);
+		], "b:471137a7", false);
 		_b = bag16(__s, _root, _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7, _m8, _m9, _m10, _m11, _m12, _m13, null, void 0);
 		__s.refFields = _rm$1;
 	} else {
@@ -264,9 +264,9 @@ var WebView = /* @__PURE__ */ __s(function WebView(props, __s, __extra) {
 				"onError",
 				_b.l
 			]
-		], "b:5cdc9608", false);
+		], "b:471137a7", false);
 	}
-	_b.q = bindSignalChild(__s, _b.q, 1, _b.m, Object.prototype.propertyIsEnumerable.call(_b.n.resolved, "children") ? _b.n.resolved.children : void 0, "b:5cdc9608", null, void 0, void 0, void 0, true);
+	_b.q = bindSignalChild(__s, _b.q, 1, _b.m, Object.prototype.propertyIsEnumerable.call(_b.n.resolved, "children") ? _b.n.resolved.children : void 0, "b:471137a7", null, void 0, void 0, void 0, true);
 });
 //#endregion
 export { WebView };

package/dist/web/{index.shared.js → index.shared.web.js}

@@ -6,9 +6,12 @@ import { Absolute } from "./Absolute.web.tsrx.js";
 import { setTranslate } from "./translate.web.js";
 import { Spacer } from "./Spacer.web.tsrx.js";
 import { Text } from "./Text.web.tsrx.js";
+import { Screen } from "./Screen.web.tsrx.js";
+import { ActivityIndicator } from "./ActivityIndicator.web.tsrx.js";
+import { ScrollView } from "./ScrollView.web.tsrx.js";
+import { Markdown, MarkdownScreen } from "./Markdown.tsrx.js";
 import { RichText, RichTextSpan } from "./RichText.web.tsrx.js";
 import { Pressable } from "./Pressable.web.tsrx.js";
-import { ActivityIndicator } from "./ActivityIndicator.web.tsrx.js";
 import { Button } from "./Button.web.tsrx.js";
 import { Collapsible } from "./Collapsible.web.tsrx.js";
 import { Accordion } from "./Accordion.web.tsrx.js";
@@ -56,13 +59,12 @@ import { User } from "./User.web.tsrx.js";
 import { Meter } from "./Meter.web.tsrx.js";
 import { ProgressGroup } from "./ProgressGroup.web.tsrx.js";
 import { Link } from "./Link.web.tsrx.js";
-import { defineRoutes, deriveRouteManifest, mergeRouteManifests } from "./route-table.js";
+import { defineRoutes, deriveRouteManifest, manifestToJson, mergeRouteManifests } from "./route-table.js";
 import { addBackInterceptor, addRoutes, canGoBack, currentModalRoute, currentRoute, hrefFor, layoutsFor, popRoute, pushDeepLink, pushRoute, redirect, registerRoutes, registerScreens, routeFor, routeStacks, screenFor, useCanGoBack, useModalRoute, useRoute } from "./route.web.js";
 import { NavLink } from "./NavLink.web.tsrx.js";
 import { TextArea } from "./TextArea.web.tsrx.js";
 import { SearchInput } from "./SearchInput.web.tsrx.js";
 import { SegmentedControl } from "./SegmentedControl.web.tsrx.js";
-import { ScrollView } from "./ScrollView.web.tsrx.js";
 import { ScrollBox } from "./ScrollBox.web.tsrx.js";
 import { VirtualList } from "./VirtualList.web.tsrx.js";
 import { Image } from "./Image.web.tsrx.js";
@@ -73,11 +75,11 @@ import { showToast } from "./toast-anchor.web.tsrx.js";
 import { useAnimation } from "./anim.web.tsrx.js";
 import { styled } from "./styled.web.tsrx.js";
 import { openWindow } from "./windows.web.js";
-import { Screen } from "./Screen.web.tsrx.js";
 import { Tabs } from "./Tabs.web.tsrx.js";
 import { Switch } from "./Switch.web.tsrx.js";
 import { useSafeAreaInsets } from "./safeAreaInsets.web.tsrx.js";
 import { SafeArea } from "./SafeArea.web.tsrx.js";
+import { KeyboardAvoiding } from "./KeyboardAvoiding.web.tsrx.js";
 import { Drawer } from "./Drawer.web.tsrx.js";
 import { useMeasure } from "./useMeasure.web.tsrx.js";
 import { Slider } from "./Slider.web.tsrx.js";
@@ -89,4 +91,4 @@ import { createStore } from "./store.js";
 import { useStore } from "./use-store.web.tsrx.js";
 import { Sheet } from "./Sheet.web.tsrx.js";
 import { closeSheet, openSheet } from "./sheet-service.web.js";
-export { Absolute, Accordion, ActivityIndicator, Alert, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, Button, Card, Checkbox, CheckboxGroup, Chip, Collapsible, View as Column, Combobox, CommandPalette, ContextMenu, Drawer, DropdownMenu, Empty, FieldGroup, FormField, Grid, Heading, Hoverable, Icon, Image, InputMenu, InputNumber, InputRating, InputTags, Kbd, Link, ListItem, Meter, NavLink, NavigationMenu, Overlay, Pagination, PinInput, Popover, Pressable, ProgressGroup, RadioGroup, RichText, RichTextSpan, Row, SafeArea, Screen, ScrollBox, ScrollView, SearchInput, SegmentedControl, Select, SelectMenu, Separator, Sheet, Skeleton, Slider, Spacer, Stack, Stepper, Switch, Table, Tabs, Text, TextArea, TextInput, Timeline, Tooltip, Tree, User, View, VirtualList, WebView, addBackInterceptor, addRoutes, applyThemeClasses, canGoBack, closeSheet, createStore, currentModalRoute, currentRoute, defineRoutes, deriveRouteManifest, getColorScheme, getStack, getThemePreference, getThemeScheme, hrefFor, isNative, layoutsFor as layoutsForRoute, mergeRouteManifests, onThemeSchemeChange, openSheet, openWindow, popRoute, pushDeepLink, pushRoute, redirect, registerIcon, registerIcons, registerRoutes, registerScreens, registerStack, routeFor, routeStacks, screenFor, setThemePreference, setTranslate, showToast, stackEntries, styled, themeSchemeClasses, useAnimation, useBackInterceptor, useCanGoBack, useColorScheme, useMeasure, useModalRoute, useRoute, useSafeAreaInsets, useStore, useThemeScheme };
+export { Absolute, Accordion, ActivityIndicator, Alert, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, Button, Card, Checkbox, CheckboxGroup, Chip, Collapsible, View as Column, Combobox, CommandPalette, ContextMenu, Drawer, DropdownMenu, Empty, FieldGroup, FormField, Grid, Heading, Hoverable, Icon, Image, InputMenu, InputNumber, InputRating, InputTags, Kbd, KeyboardAvoiding, Link, ListItem, Markdown, MarkdownScreen, Meter, NavLink, NavigationMenu, Overlay, Pagination, PinInput, Popover, Pressable, ProgressGroup, RadioGroup, RichText, RichTextSpan, Row, SafeArea, Screen, ScrollBox, ScrollView, SearchInput, SegmentedControl, Select, SelectMenu, Separator, Sheet, Skeleton, Slider, Spacer, Stack, Stepper, Switch, Table, Tabs, Text, TextArea, TextInput, Timeline, Tooltip, Tree, User, View, VirtualList, WebView, addBackInterceptor, addRoutes, applyThemeClasses, canGoBack, closeSheet, createStore, currentModalRoute, currentRoute, defineRoutes, deriveRouteManifest, getColorScheme, getStack, getThemePreference, getThemeScheme, hrefFor, isNative, layoutsFor as layoutsForRoute, manifestToJson, mergeRouteManifests, onThemeSchemeChange, openSheet, openWindow, popRoute, pushDeepLink, pushRoute, redirect, registerIcon, registerIcons, registerRoutes, registerScreens, registerStack, routeFor, routeStacks, screenFor, setThemePreference, setTranslate, showToast, stackEntries, styled, themeSchemeClasses, useAnimation, useBackInterceptor, useCanGoBack, useColorScheme, useMeasure, useModalRoute, useRoute, useSafeAreaInsets, useStore, useThemeScheme };