@octane-xplat/ui 0.7.3 → 0.10.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(29);
 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:45cdb248", 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:f204b54c", _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:897da36c", 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:7231788c", _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:40151e59", 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, "f17zmnzk");
 }
 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, "f17zmlc3");
 }
-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:eb57e14e", null, void 0, void 0, void 0, true);
 }
-var _rm$20 = [
+var _rm$21 = [
 	"s",
 	"p",
 	"o"
@@ -176,28 +203,36 @@ 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 estimateFrameRef = useRef(null, _hs$ + 17);
+	const resizeDeliveryRef = useRef(false, _hs$ + 18);
+	const refreshAfterResizeRef = useRef(false, _hs$ + 19);
+	const nodesBySlotRef = useRef(/* @__PURE__ */ new Map(), _hs$ + 20);
+	const metaByNodeRef = useRef(/* @__PURE__ */ new WeakMap(), _hs$ + 21);
 	const rangeRef = useRef({
 		start: -1,
 		end: -1,
 		top: -1,
 		bottom: -1
-	}, _hs$ + 15);
-	const handlersRef = useRef(() => {}, _hs$ + 16);
+	}, _hs$ + 22);
+	const geometryDirtyRef = useRef(false, _hs$ + 23);
+	const handlersRef = useRef(() => {}, _hs$ + 24);
 	const hasSeparator = Boolean(props.renderSeparator);
-	const hasSeparatorRef = useRef(hasSeparator, _hs$ + 17);
+	const hasSeparatorRef = useRef(hasSeparator, _hs$ + 25);
 	hasSeparatorRef.current = hasSeparator;
 	function rebuildLayout(nextEntries, width) {
 		entriesRef.current = nextEntries;
@@ -212,21 +247,31 @@ 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)) {
+		if (geometryDirtyRef.current || next.start !== previous.start || next.end !== previous.end || !sameSize(next.top, previous.top) || !sameSize(next.bottom, previous.bottom)) {
 			rangeRef.current = next;
+			geometryDirtyRef.current = false;
 			setWindowVersion((version) => version + 1);
 		}
 	}
 	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];
@@ -249,8 +294,10 @@ var VirtualList = /* @__PURE__ */ __s(function VirtualList(props, __s, __extra)
 	function scheduleEstimateRebuild() {
 		if (estimateScheduledRef.current) return;
 		estimateScheduledRef.current = true;
-		Promise.resolve().then(() => {
+		estimateFrameRef.current = requestAnimationFrame(() => {
+			estimateFrameRef.current = null;
 			estimateScheduledRef.current = false;
+			if (disposedRef.current) return;
 			const anchor = captureAnchor();
 			rebuildLayout(entriesRef.current, viewportWidthRef.current);
 			restoreAnchor(anchor);
@@ -258,7 +305,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;
@@ -271,6 +318,7 @@ var VirtualList = /* @__PURE__ */ __s(function VirtualList(props, __s, __extra)
 		const anchor = captureAnchor();
 		const delta = sizeIndexRef.current.set(index, height);
 		if (Math.abs(delta) >= .5) {
+			geometryDirtyRef.current = true;
 			if (anchor && index < anchor.index) restoreAnchor(anchor);
 			refreshWindow();
 		}
@@ -295,6 +343,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 +377,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 +392,49 @@ var VirtualList = /* @__PURE__ */ __s(function VirtualList(props, __s, __extra)
 			refreshWindow();
 		}
 	};
+	useEffect(() => {
+		disposedRef.current = false;
+		return () => {
+			disposedRef.current = true;
+			if (estimateFrameRef.current !== null) cancelAnimationFrame(estimateFrameRef.current);
+			estimateFrameRef.current = null;
+			estimateScheduledRef.current = false;
+			cellsRef.current.clear();
+			cellCallbacksRef.current.clear();
+			measuredAssignmentsRef.current.clear();
+			nodesBySlotRef.current.clear();
+			metaByNodeRef.current = /* @__PURE__ */ new WeakMap();
+		};
+	}, [], _hs$ + 26);
 	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$ + 27);
 	function onScroll(event) {
 		const root = event.currentTarget;
 		scrollOffsetRef.current = root.scrollTop;
@@ -347,7 +442,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$ + 28);
 	const style = {
 		...props.style,
 		minHeight: props.style?.minHeight ?? 0,
@@ -446,7 +565,7 @@ var VirtualList = /* @__PURE__ */ __s(function VirtualList(props, __s, __extra)
 				"onScroll",
 				_m13
 			]
-		], "b:5767fa6f", true);
+		], "b:b9f221c4", true);
 		const _el0 = child(_root);
 		_m16 = _el0;
 		const _el1 = sibling(_el0, 1);
@@ -473,7 +592,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 +718,23 @@ var VirtualList = /* @__PURE__ */ __s(function VirtualList(props, __s, __extra)
 				"onScroll",
 				_b.n
 			]
-		], "b:5767fa6f", true);
+		], "b:b9f221c4", 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/VisuallyHidden.web.tsrx.js

@@ -0,0 +1,58 @@
+import { refList } from "./ref-list.js";
+import { applyEscapeProps } from "./escape-props.web.js";
+import { applyWebProps } from "./platformProps.web.js";
+import { bag4, child, clone, componentSlot, drainFrag, hookSlots, markChildrenBlock, template } from "octane";
+import { compilerMemoRegion, hookMemoCreate, hookMemoEqual, hookMemoPublish4, textHoleUpdate } from "octane/internal/client";
+//#region src/VisuallyHidden.web.tsrx
+var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
+var __childrenBody = {};
+var _hs$ = /* @__PURE__ */ hookSlots(2);
+var VisuallyHidden = function VisuallyHidden(props, __s, __extra) {
+	const __block = __s.block;
+	const __memoRegion = compilerMemoRegion(__s, _hs$ + 0);
+	let __hk = __memoRegion.hooks;
+	if (__hk === void 0) __memoRegion.hooks = __hk = hookMemoCreate(6);
+	let __hkd0, __hkd1, __hkd2, __hkd3;
+	const Tag = props.as ?? "span";
+	const forwardedRef = (__hkd0 = props.ref, __hkd1 = props.ios, __hkd2 = props.android, __hkd3 = props.web, __hk[0] !== true || !hookMemoEqual(__hk[1], __hkd0) || !hookMemoEqual(__hk[2], __hkd1) || !hookMemoEqual(__hk[3], __hkd2) || !hookMemoEqual(__hk[4], __hkd3) ? hookMemoPublish4(__hk, 0, refList((e) => {
+		if (e) {
+			applyEscapeProps(e, props);
+			applyWebProps(e, props.web);
+		}
+	}, props.ref), __hkd0, __hkd1, __hkd2, __hkd3) : __hk[5]);
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	function __children$1(__props, __s, __extra) {
+		const __block = __s.block;
+		let _b = __s.slots[0];
+		if (_b === void 0) {
+			let _m0, _m1;
+			const _root = clone(_t$0);
+			_m0 = __block.parentNode;
+			_m1 = child(_root);
+			drainFrag(_root, __block.parentNode, __block.endMarker);
+			_b = bag4(__s, null, _m0, _m1, null, void 0);
+		}
+		{
+			const _v = props.children;
+			_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
+			_b.d = _v;
+		}
+	}
+	componentSlot(__s, 0, __block.parentNode, Tag, {
+		"id": props.id,
+		"ref": forwardedRef,
+		"className": "vx-visually-hidden",
+		"role": props.accessibilityRole,
+		"aria-label": props.accessibilityLabel,
+		"aria-hidden": props.accessible === false ? true : void 0,
+		"aria-description": props.accessibilityHint,
+		"aria-valuetext": props.accessibilityValue,
+		"aria-disabled": props.accessibilityState?.disabled,
+		"aria-selected": props.accessibilityState?.selected,
+		"aria-checked": props.accessibilityState?.checked,
+		"aria-live": props.accessibilityLiveRegion === "none" ? "off" : props.accessibilityLiveRegion,
+		"children": markChildrenBlock(__children$1, __childrenBody)
+	}, __block.endMarker, void 0, void 0, true, void 0, "c:290c5685");
+};
+//#endregion
+export { VisuallyHidden };

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

@@ -1,11 +1,11 @@
 import { applyEscapeProps } from "./escape-props.web.js";
 import { layoutChildProps } from "./layout-child.web.js";
-import { __s, bag16, clone, hookSlots, snapshotSpread, template, useEffect, useRef } from "octane";
+import { __s, bag16, clone, hookSlots, snapshotSpread, template, useEffect, useImperativeHandle, useRef } from "octane";
 import { bindSignalChild, bindSignalHostPropSources, compilerMemoRegion, enableSignalBindings, hookMemoCreate, hookMemoPublishInvariant } from "octane/internal/client";
 //#region src/WebView.web.tsrx
 enableSignalBindings(1, true);
 var _t$0 = /* @__PURE__ */ template("<iframe></iframe>");
-var _hs$ = /* @__PURE__ */ hookSlots(2);
+var _hs$ = /* @__PURE__ */ hookSlots(3);
 var _rm$1 = [
 	"s",
 	"n",
@@ -68,15 +68,15 @@ var WebView = /* @__PURE__ */ __s(function WebView(props, __s, __extra) {
 			observer?.disconnect();
 		};
 	}, [props.matchContents, props.onLayoutContent], _hs$ + 1);
+	useImperativeHandle(props.ref, () => handle(frame.current), [], _hs$ + 2);
 	let _b = __s.slots[0];
 	if (_b === void 0) {
 		let _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7, _m8, _m9, _m10, _m11, _m12, _m13;
 		const _root = clone(_t$0);
 		_m0 = (el) => {
-			if (!el) return;
 			frame.current = el;
+			if (!el) return;
 			applyEscapeProps(el, props);
-			props.bind?.(handle(el));
 		};
 		_m1 = props.id;
 		_m2 = ["vx-webview", props.className];
@@ -150,16 +150,15 @@ var WebView = /* @__PURE__ */ __s(function WebView(props, __s, __extra) {
 				"onError",
 				_m11
 			]
-		], "b:5cdc9608", false);
+		], "b:e35ebdad", 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 {
 		{
 			const _v = (el) => {
-				if (!el) return;
 				frame.current = el;
+				if (!el) return;
 				applyEscapeProps(el, props);
-				props.bind?.(handle(el));
 			};
 			if (_b.a !== _v) _b.a = _v;
 		}
@@ -264,9 +263,9 @@ var WebView = /* @__PURE__ */ __s(function WebView(props, __s, __extra) {
 				"onError",
 				_b.l
 			]
-		], "b:5cdc9608", false);
+		], "b:e35ebdad", 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:e35ebdad", null, void 0, void 0, void 0, true);
 });
 //#endregion
 export { WebView };