@octane-xplat/ui 0.7.3 → 0.10.0

package/dist/native/VirtualList.tsrx.js

@@ -2,9 +2,10 @@ import { cx } from "./cx.js";
 import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props.js";
 import { layoutChildProps } from "./layout-child.js";
 import { VirtualListSizeIndex, createVirtualListEntries, estimateVirtualListSizes, virtualListMeasurementKey, virtualListRange } from "./virtual-list-layout.js";
-import { defineUniversalComponent, hookSlots, universalFor, universalPlan, universalProps, universalValue, useMemo, useRef, useState } from "@nativescript-community/octane";
+import { VirtualListCellPool } from "./virtual-list-cell-pool.js";
+import { defineUniversalComponent, hookSlots, universalFor, universalPlan, universalProps, universalValue, useEffect, useMemo, useRef, useState } from "@nativescript-community/octane";
 //#region src/VirtualList.tsrx
-var _hs$ = /* @__PURE__ */ hookSlots(20);
+var _hs$ = /* @__PURE__ */ hookSlots(35);
 var _h$0 = /* @__PURE__ */ Symbol(_hs$);
 var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
 var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
@@ -25,6 +26,21 @@ var _h$16 = /* @__PURE__ */ Symbol(_hs$ + 16);
 var _h$17 = /* @__PURE__ */ Symbol(_hs$ + 17);
 var _h$18 = /* @__PURE__ */ Symbol(_hs$ + 18);
 var _h$19 = /* @__PURE__ */ Symbol(_hs$ + 19);
+var _h$20 = /* @__PURE__ */ Symbol(_hs$ + 20);
+var _h$21 = /* @__PURE__ */ Symbol(_hs$ + 21);
+var _h$22 = /* @__PURE__ */ Symbol(_hs$ + 22);
+var _h$23 = /* @__PURE__ */ Symbol(_hs$ + 23);
+var _h$24 = /* @__PURE__ */ Symbol(_hs$ + 24);
+var _h$25 = /* @__PURE__ */ Symbol(_hs$ + 25);
+var _h$26 = /* @__PURE__ */ Symbol(_hs$ + 26);
+var _h$27 = /* @__PURE__ */ Symbol(_hs$ + 27);
+var _h$28 = /* @__PURE__ */ Symbol(_hs$ + 28);
+var _h$29 = /* @__PURE__ */ Symbol(_hs$ + 29);
+var _h$30 = /* @__PURE__ */ Symbol(_hs$ + 30);
+var _h$31 = /* @__PURE__ */ Symbol(_hs$ + 31);
+var _h$32 = /* @__PURE__ */ Symbol(_hs$ + 32);
+var _h$33 = /* @__PURE__ */ Symbol(_hs$ + 33);
+var _h$34 = /* @__PURE__ */ Symbol(_hs$ + 34);
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
 	"type": "flexboxlayout",
@@ -33,7 +49,7 @@ var __octaneUniversalPlan0 = universalPlan("nativescript", {
 		"className": "vx-virtual-list-header",
 		"flexShrink": 0
 	},
-	"bindings": [["onLayoutChanged", 0]],
+	"bindings": [["ref", 0]],
 	"children": [{
 		"kind": "slot",
 		"slot": 1
@@ -64,13 +80,7 @@ var __octaneUniversalPlan2 = universalPlan("nativescript", {
 	}]
 });
 var __octaneUniversalPlan3 = universalPlan("nativescript", {
-	"kind": "host",
-	"type": "flexboxlayout",
-	"props": {
-		"flexDirection": "column",
-		"className": "vx-virtual-list-row"
-	},
-	"bindings": [["style", 0], ["onLayoutChanged", 1]],
+	"kind": "range",
 	"children": [{
 		"kind": "host",
 		"type": "flexboxlayout",
@@ -80,35 +90,43 @@ var __octaneUniversalPlan3 = universalPlan("nativescript", {
 		},
 		"children": [{
 			"kind": "slot",
-			"slot": 2
+			"slot": 0
 		}]
 	}, {
 		"kind": "slot",
-		"slot": 3
+		"slot": 1
 	}]
 });
 var __octaneUniversalPlan4 = universalPlan("nativescript", {
-	"kind": "range",
-	"children": [
-		{
-			"kind": "host",
-			"type": "flexboxlayout",
-			"props": { "className": "vx-virtual-list-spacer" },
-			"bindings": [["style", 0]]
-		},
-		{
-			"kind": "slot",
-			"slot": 1
-		},
-		{
-			"kind": "host",
-			"type": "flexboxlayout",
-			"props": { "className": "vx-virtual-list-spacer" },
-			"bindings": [["style", 2]]
-		}
-	]
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"flexDirection": "column",
+		"left": 0
+	},
+	"bindings": [
+		["ref", 0],
+		["className", 1],
+		["visibility", 2],
+		["top", 3],
+		["width", 4]
+	],
+	"children": [{
+		"kind": "slot",
+		"slot": 5
+	}]
 });
 var __octaneUniversalPlan5 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "absolutelayout",
+	"props": { "className": "vx-virtual-list-body" },
+	"bindings": [["style", 0]],
+	"children": [{
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var __octaneUniversalPlan6 = universalPlan("nativescript", {
 	"kind": "host",
 	"type": "flexboxlayout",
 	"props": {
@@ -121,7 +139,7 @@ var __octaneUniversalPlan5 = universalPlan("nativescript", {
 		"slot": 0
 	}]
 });
-var __octaneUniversalPlan6 = universalPlan("nativescript", {
+var __octaneUniversalPlan7 = universalPlan("nativescript", {
 	"kind": "host",
 	"type": "scrollview",
 	"propsSlot": 0,
@@ -129,19 +147,19 @@ var __octaneUniversalPlan6 = universalPlan("nativescript", {
 		"kind": "host",
 		"type": "flexboxlayout",
 		"props": { "flexDirection": "column" },
-		"bindings": [["className", 1]],
+		"bindings": [["className", 1], ["ref", 2]],
 		"children": [
 			{
 				"kind": "slot",
-				"slot": 2
+				"slot": 3
 			},
 			{
 				"kind": "slot",
-				"slot": 3
+				"slot": 4
 			},
 			{
 				"kind": "slot",
-				"slot": 4
+				"slot": 5
 			}
 		]
 	}]
@@ -149,6 +167,30 @@ var __octaneUniversalPlan6 = universalPlan("nativescript", {
 function sameSize(a, b) {
 	return Math.abs(a - b) < .5;
 }
+function scheduleListFrame(callback) {
+	const requestFrame = globalThis.requestAnimationFrame;
+	const cancelFrame = globalThis.cancelAnimationFrame;
+	if (typeof requestFrame !== "function" || typeof cancelFrame !== "function") {
+		const timer = setTimeout(callback, 16);
+		return () => clearTimeout(timer);
+	}
+	let cancelled = false;
+	let current = null;
+	let next = null;
+	current = requestFrame(() => {
+		current = null;
+		if (cancelled) return;
+		next = requestFrame(() => {
+			next = null;
+			if (!cancelled) callback();
+		});
+	});
+	return () => {
+		cancelled = true;
+		if (current != null) cancelFrame(current);
+		if (next != null) cancelFrame(next);
+	};
+}
 var VirtualList = defineUniversalComponent("nativescript", function VirtualList(props) {
 	const entries = useMemo(() => createVirtualListEntries(props.items, props.keyExtractor, props.getItemType), [
 		props.items,
@@ -157,29 +199,43 @@ var VirtualList = defineUniversalComponent("nativescript", function VirtualList(
 	], _h$0);
 	const [windowVersion, setWindowVersion] = useState(0, _h$1);
 	const sizeIndexRef = useRef(new VirtualListSizeIndex(), _h$2);
-	const sizeCacheRef = useRef(/* @__PURE__ */ new Map(), _h$3);
-	const entriesRef = useRef([], _h$4);
-	const indexByRowKeyRef = useRef(/* @__PURE__ */ new Map(), _h$5);
-	const scrollRef = useRef(null, _h$6);
-	const scrollOffsetRef = useRef(0, _h$7);
-	const viewportHeightRef = useRef(0, _h$8);
-	const viewportWidthRef = useRef(0, _h$9);
-	const headerHeightRef = useRef(0, _h$10);
-	const estimateScheduledRef = useRef(false, _h$11);
-	const estimateAnchorRef = useRef(null, _h$12);
+	const cellsRef = useRef(new VirtualListCellPool(), _h$3);
+	const cellNodesRef = useRef(/* @__PURE__ */ new Map(), _h$4);
+	const layoutListenersRef = useRef(/* @__PURE__ */ new Map(), _h$5);
+	const cellCallbacksRef = useRef(/* @__PURE__ */ new Map(), _h$6);
+	const measuredAssignmentsRef = useRef(/* @__PURE__ */ new Map(), _h$7);
+	const sizeCacheRef = useRef(/* @__PURE__ */ new Map(), _h$8);
+	const typeSamplesRef = useRef(/* @__PURE__ */ new Map(), _h$9);
+	const appliedEstimatesRef = useRef(/* @__PURE__ */ new Map(), _h$10);
+	const estimateDirtyTypesRef = useRef(/* @__PURE__ */ new Set(), _h$11);
+	const entriesRef = useRef([], _h$12);
+	const indexByRowKeyRef = useRef(/* @__PURE__ */ new Map(), _h$13);
+	const scrollRef = useRef(null, _h$14);
+	const scrollOffsetRef = useRef(0, _h$15);
+	const viewportHeightRef = useRef(0, _h$16);
+	const viewportWidthRef = useRef(0, _h$17);
+	const contentWidthRef = useRef(0, _h$18);
+	const headerHeightRef = useRef(0, _h$19);
+	const estimateTimerRef = useRef(null, _h$20);
+	const frameCancelRef = useRef(null, _h$21);
+	const viewportFrameCancelRef = useRef(null, _h$22);
+	const disposedRef = useRef(false, _h$23);
+	const pendingOffsetDeltaRef = useRef(0, _h$24);
+	const measurementsRef = useRef(/* @__PURE__ */ new Map(), _h$25);
 	const rangeRef = useRef({
 		start: -1,
 		end: -1,
 		top: -1,
 		bottom: -1
-	}, _h$13);
-	const pendingAnchorRef = useRef(null, _h$14);
-	const pendingAnchorRowsRef = useRef(/* @__PURE__ */ new Set(), _h$15);
-	const queuedAnchorRestoreRef = useRef(null, _h$16);
-	const anchorRestoreScheduledRef = useRef(false, _h$17);
-	const anchorRestoreTimerRef = useRef(null, _h$18);
+	}, _h$26);
+	const geometryDirtyRef = useRef(false, _h$27);
+	const pendingAnchorRef = useRef(null, _h$28);
+	const pendingAnchorRowsRef = useRef(/* @__PURE__ */ new Set(), _h$29);
+	const anchorRestoreScheduledRef = useRef(false, _h$30);
+	const anchorRestoreTimerRef = useRef(null, _h$31);
 	const hasSeparator = Boolean(props.renderSeparator);
-	const hasSeparatorRef = useRef(hasSeparator, _h$19);
+	const hasSeparatorRef = useRef(hasSeparator, _h$32);
+	const separatorChanged = hasSeparatorRef.current !== hasSeparator;
 	hasSeparatorRef.current = hasSeparator;
 	function rebuildLayout(nextEntries, width) {
 		entriesRef.current = nextEntries;
@@ -191,10 +247,25 @@ var VirtualList = defineUniversalComponent("nativescript", function VirtualList(
 			activeMeasurements.add(cacheKey);
 		}
 		for (const cacheKey of sizeCacheRef.current.keys()) if (!activeMeasurements.has(cacheKey)) sizeCacheRef.current.delete(cacheKey);
+		const samples = /* @__PURE__ */ new Map();
+		for (const entry of nextEntries) {
+			const cached = sizeCacheRef.current.get(virtualListMeasurementKey(entry.rowKey, hasSeparatorRef.current && entry.index < nextEntries.length - 1));
+			if (!cached) continue;
+			const sample = samples.get(entry.typeKey) ?? {
+				sum: 0,
+				count: 0
+			};
+			sample.sum += cached.height;
+			sample.count++;
+			samples.set(entry.typeKey, sample);
+		}
+		typeSamplesRef.current = samples;
+		estimateDirtyTypesRef.current.clear();
+		appliedEstimatesRef.current = new Map([...samples].map(([type, sample]) => [type, sample.count >= 4 ? sample.sum / sample.count : 48]));
 		indexByRowKeyRef.current = indexByKey;
-		sizeIndexRef.current.reset(estimateVirtualListSizes(nextEntries, hasSeparatorRef.current, width, sizeCacheRef.current));
+		sizeIndexRef.current.reset(estimateVirtualListSizes(nextEntries, hasSeparatorRef.current, contentWidthRef.current || width, sizeCacheRef.current));
 	}
-	if (entries !== entriesRef.current) {
+	if (entries !== entriesRef.current || separatorChanged) {
 		const anchor = captureCurrentAnchor();
 		const previousByKey = new Map(entriesRef.current.map((entry) => [entry.rowKey, entry]));
 		const changedRows = entries.filter((entry) => previousByKey.get(entry.rowKey)?.item !== entry.item);
@@ -210,14 +281,38 @@ var VirtualList = defineUniversalComponent("nativescript", function VirtualList(
 		const listOffset = Math.max(0, scrollOffsetRef.current - headerHeightRef.current);
 		return virtualListRange(sizeIndexRef.current, listOffset, viewportHeightRef.current, viewportHeightRef.current);
 	}
-	function refreshWindow() {
+	function commitWindow() {
 		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 refreshWindow() {
+		if (disposedRef.current || frameCancelRef.current != null) return;
+		frameCancelRef.current = scheduleListFrame(() => {
+			frameCancelRef.current = null;
+			if (disposedRef.current) return;
+			const measurements = [...measurementsRef.current.values()];
+			measurementsRef.current.clear();
+			for (const measurement of measurements) {
+				if (!cellsRef.current.isCurrent(measurement.cellId, measurement.entry.rowKey, measurement.generation)) continue;
+				const index = indexByRowKeyRef.current.get(measurement.entry.rowKey);
+				if (index === void 0 || entriesRef.current[index]?.item !== measurement.entry.item || entriesRef.current[index]?.index !== measurement.entry.index) continue;
+				if (measurement.view?.isLoaded === false) continue;
+				if (measurement.view?.isLayoutValid === false) {
+					measurementsRef.current.set(measurement.entry.rowKey, measurement);
+					refreshWindow();
+					continue;
+				}
+				const size = measurement.view?.getActualSize?.() ?? measurement;
+				if (size.width > 0 && size.height >= 0) recordRowSize(measurement.entry.rowKey, size.width, size.height);
+			}
+			commitWindow();
+		});
+	}
 	function captureAnchor() {
 		const listOffset = scrollOffsetRef.current - headerHeightRef.current;
 		if (listOffset < 0 || entriesRef.current.length === 0) return null;
@@ -232,39 +327,38 @@ var VirtualList = defineUniversalComponent("nativescript", function VirtualList(
 	}
 	function captureCurrentAnchor() {
 		const nativeOffset = Number(scrollRef.current?.verticalOffset);
-		if (Number.isFinite(nativeOffset)) scrollOffsetRef.current = nativeOffset;
+		if (Number.isFinite(nativeOffset)) scrollOffsetRef.current = nativeOffset + pendingOffsetDeltaRef.current;
 		return captureAnchor();
 	}
 	function restoreAnchor(anchor) {
-		if (!anchor) return;
-		queuedAnchorRestoreRef.current = anchor;
-		if (anchorRestoreScheduledRef.current) return;
+		if (!anchor || disposedRef.current) return;
+		const index = indexByRowKeyRef.current.get(anchor.rowKey);
 		const view = scrollRef.current;
-		if (!view) return;
+		if (index === void 0 || !view) return;
+		const nextOffset = Math.max(0, headerHeightRef.current + sizeIndexRef.current.prefix(index) + anchor.within);
+		const delta = nextOffset - scrollOffsetRef.current;
+		if (sameSize(delta, 0)) return;
+		pendingOffsetDeltaRef.current += delta;
+		scrollOffsetRef.current = nextOffset;
+		if (anchorRestoreScheduledRef.current) return;
 		anchorRestoreScheduledRef.current = true;
 		const timer = setTimeout(() => {
 			if (anchorRestoreTimerRef.current !== timer) return;
 			anchorRestoreTimerRef.current = null;
 			anchorRestoreScheduledRef.current = false;
-			if (scrollRef.current !== view) return;
-			const queuedAnchor = queuedAnchorRestoreRef.current;
-			queuedAnchorRestoreRef.current = null;
-			if (!queuedAnchor) return;
-			const index = indexByRowKeyRef.current.get(queuedAnchor.rowKey);
-			if (index === void 0) return;
-			const nextOffset = Math.max(0, headerHeightRef.current + sizeIndexRef.current.prefix(index) + queuedAnchor.within);
+			if (disposedRef.current || scrollRef.current !== view) return;
+			const correction = pendingOffsetDeltaRef.current;
+			pendingOffsetDeltaRef.current = 0;
 			const nativeOffset = Number(view.verticalOffset);
-			if (sameSize(nextOffset, nativeOffset)) {
-				scrollOffsetRef.current = nativeOffset;
-				return;
-			}
-			scrollOffsetRef.current = nextOffset;
+			const target = Math.max(0, nativeOffset + correction);
+			scrollOffsetRef.current = target;
+			if (sameSize(target, nativeOffset)) return;
 			const nativeView = view.nativeViewProtected;
 			const makePoint = globalThis.CGPointMake;
 			if (typeof nativeView?.setContentOffsetAnimated === "function" && typeof makePoint === "function") {
 				const current = nativeView.contentOffset;
-				nativeView.setContentOffsetAnimated(makePoint(current.x, nextOffset), false);
-			} else if (typeof view.scrollToVerticalOffset === "function") view.scrollToVerticalOffset(nextOffset, false);
+				nativeView.setContentOffsetAnimated(makePoint(current.x, target), false);
+			} else if (typeof view.scrollToVerticalOffset === "function") view.scrollToVerticalOffset(target, false);
 		}, 0);
 		anchorRestoreTimerRef.current = timer;
 	}
@@ -272,40 +366,63 @@ var VirtualList = defineUniversalComponent("nativescript", function VirtualList(
 		if (anchorRestoreTimerRef.current != null) clearTimeout(anchorRestoreTimerRef.current);
 		anchorRestoreTimerRef.current = null;
 		anchorRestoreScheduledRef.current = false;
-		queuedAnchorRestoreRef.current = null;
+		pendingOffsetDeltaRef.current = 0;
 	}
-	function scheduleEstimateRebuild(anchor) {
-		if (estimateScheduledRef.current) return;
-		estimateScheduledRef.current = true;
-		estimateAnchorRef.current = anchor;
-		Promise.resolve().then(() => {
-			estimateScheduledRef.current = false;
-			const scheduledAnchor = estimateAnchorRef.current;
-			estimateAnchorRef.current = null;
+	function scheduleEstimateRebuild() {
+		if (estimateTimerRef.current != null) clearTimeout(estimateTimerRef.current);
+		estimateTimerRef.current = setTimeout(() => {
+			estimateTimerRef.current = null;
+			if (disposedRef.current || estimateDirtyTypesRef.current.size === 0) return;
+			const anchor = captureCurrentAnchor();
 			rebuildLayout(entriesRef.current, viewportWidthRef.current);
-			restoreAnchor(scheduledAnchor);
+			restoreAnchor(anchor);
 			refreshWindow();
-		});
+		}, 120);
 	}
 	function recordRowSize(rowKey, width, height) {
 		if (!Number.isFinite(height) || height < 0) return;
 		const index = indexByRowKeyRef.current.get(rowKey);
 		if (index === void 0) return;
-		if (!entriesRef.current[index]) return;
+		const entry = entriesRef.current[index];
+		if (!entry) return;
 		const hasRowSeparator = hasSeparatorRef.current && index < entriesRef.current.length - 1;
 		const cacheKey = virtualListMeasurementKey(rowKey, hasRowSeparator);
 		const pendingAnchor = pendingAnchorRowsRef.current.has(rowKey) ? pendingAnchorRef.current : null;
-		const anchor = pendingAnchor ?? queuedAnchorRestoreRef.current ?? captureCurrentAnchor();
+		const previous = sizeCacheRef.current.get(cacheKey);
+		if (previous && sameSize(previous.width, width) && sameSize(previous.height, height) && sameSize(sizeIndexRef.current.get(index), height)) {
+			pendingAnchorRowsRef.current.delete(rowKey);
+			if (pendingAnchorRowsRef.current.size === 0) pendingAnchorRef.current = null;
+			return;
+		}
+		const anchor = pendingAnchor ?? captureCurrentAnchor();
 		sizeCacheRef.current.set(cacheKey, {
 			width,
 			height
 		});
+		const sample = typeSamplesRef.current.get(entry.typeKey) ?? {
+			sum: 0,
+			count: 0
+		};
+		sample.sum += height - (previous?.height ?? 0);
+		if (!previous) sample.count++;
+		typeSamplesRef.current.set(entry.typeKey, sample);
+		const applied = appliedEstimatesRef.current.get(entry.typeKey) ?? 48;
+		const estimateChanged = sample.count >= 4 && Math.abs(sample.sum / sample.count - applied) > Math.max(1, applied * .02);
 		const delta = sizeIndexRef.current.set(index, height);
 		if (Math.abs(delta) >= .5) {
+			geometryDirtyRef.current = true;
 			const anchorIndex = anchor ? indexByRowKeyRef.current.get(anchor.rowKey) : void 0;
 			if (anchor && anchorIndex !== void 0 && index < anchorIndex) restoreAnchor(anchor);
-			refreshWindow();
-			scheduleEstimateRebuild(anchor);
+		}
+		if (estimateChanged) {
+			estimateDirtyTypesRef.current.add(entry.typeKey);
+			scheduleEstimateRebuild();
+		} else {
+			estimateDirtyTypesRef.current.delete(entry.typeKey);
+			if (estimateDirtyTypesRef.current.size === 0 && estimateTimerRef.current != null) {
+				clearTimeout(estimateTimerRef.current);
+				estimateTimerRef.current = null;
+			}
 		}
 		if (pendingAnchor) {
 			pendingAnchorRowsRef.current.delete(rowKey);
@@ -313,57 +430,158 @@ var VirtualList = defineUniversalComponent("nativescript", function VirtualList(
 		}
 	}
 	function syncViewport(view = scrollRef.current) {
-		if (!view) return;
+		if (!view || view.isLoaded === false || view.isLayoutValid === false) return;
 		const size = view.getActualSize?.();
 		if (!size) return;
+		const initialViewport = viewportHeightRef.current <= 0;
 		const widthChanged = !sameSize(size.width, viewportWidthRef.current);
 		viewportHeightRef.current = size.height;
 		if (widthChanged) {
-			const anchor = captureAnchor();
+			const anchor = initialViewport ? null : captureCurrentAnchor();
 			viewportWidthRef.current = size.width;
 			rebuildLayout(entriesRef.current, size.width);
 			restoreAnchor(anchor);
 		}
-		refreshWindow();
+		if (initialViewport) commitWindow();
+		else refreshWindow();
+	}
+	function scheduleViewport() {
+		if (disposedRef.current || viewportFrameCancelRef.current) return;
+		viewportFrameCancelRef.current = scheduleListFrame(() => {
+			viewportFrameCancelRef.current = null;
+			if (!disposedRef.current) syncViewport();
+		});
 	}
 	function onScroll(event) {
 		const view = event.object ?? scrollRef.current;
 		const nextOffset = Number(view?.verticalOffset ?? 0);
-		const queuedAnchor = queuedAnchorRestoreRef.current;
-		if (queuedAnchor && Math.abs(nextOffset - scrollOffsetRef.current) > viewportHeightRef.current) {
-			const anchorIndex = indexByRowKeyRef.current.get(queuedAnchor.rowKey);
-			const nextIndex = sizeIndexRef.current.indexAt(Math.max(0, nextOffset - headerHeightRef.current));
-			if (anchorIndex !== void 0 && Math.abs(nextIndex - anchorIndex) > 1) cancelAnchorRestore();
+		if (Math.abs(nextOffset + pendingOffsetDeltaRef.current - scrollOffsetRef.current) > viewportHeightRef.current) cancelAnchorRestore();
+		if (!sameSize(nextOffset + pendingOffsetDeltaRef.current, scrollOffsetRef.current)) {
+			pendingAnchorRef.current = null;
+			pendingAnchorRowsRef.current.clear();
 		}
-		scrollOffsetRef.current = nextOffset;
+		scrollOffsetRef.current = nextOffset + pendingOffsetDeltaRef.current;
+		if (estimateTimerRef.current != null) scheduleEstimateRebuild();
+		refreshWindow();
+	}
+	function onContentLayout(event) {
+		const width = Number(event.object?.getActualSize?.().width ?? 0);
+		if (width <= 0 || sameSize(width, contentWidthRef.current)) return;
+		const anchor = scrollOffsetRef.current > 0 ? captureCurrentAnchor() : null;
+		contentWidthRef.current = width;
+		rebuildLayout(entriesRef.current, viewportWidthRef.current);
+		restoreAnchor(anchor);
 		refreshWindow();
 	}
 	function onHeaderLayout(event) {
 		const height = Number(event.object?.getActualSize?.().height ?? 0);
 		if (sameSize(height, headerHeightRef.current)) return;
-		const anchor = captureAnchor();
+		const anchor = scrollOffsetRef.current > 0 ? captureCurrentAnchor() : null;
 		headerHeightRef.current = height;
 		restoreAnchor(anchor);
 		refreshWindow();
 	}
-	function onRowLayout(entry, event) {
+	function observeLayout(slot, view, listener) {
+		layoutListenersRef.current.get(slot)?.();
+		layoutListenersRef.current.delete(slot);
+		if (!view) return;
+		view.on?.("layoutChanged", listener);
+		layoutListenersRef.current.set(slot, () => view.off?.("layoutChanged", listener));
+	}
+	function cellCallback(id) {
+		let callback = cellCallbacksRef.current.get(id);
+		if (!callback) {
+			callback = (view) => {
+				if (view) {
+					observeLayout("cell:" + id, view, (event) => {
+						const cell = cellsRef.current.get(id);
+						if (cell) onRowLayout(cell, event);
+					});
+					view.reusable = true;
+					cellNodesRef.current.set(id, view);
+				} else {
+					observeLayout("cell:" + id, null, () => {});
+					cellNodesRef.current.get(id)?.destroyNode?.(true);
+					cellNodesRef.current.delete(id);
+					cellCallbacksRef.current.delete(id);
+				}
+			};
+			cellCallbacksRef.current.set(id, callback);
+		}
+		return callback;
+	}
+	function onRowLayout(cell, event) {
+		const entry = cell.entry;
 		const size = event.object?.getActualSize?.();
-		if (size) recordRowSize(entry.rowKey, size.width, size.height);
+		if (!entry || !size || disposedRef.current) return;
+		measurementsRef.current.set(entry.rowKey, {
+			entry,
+			width: size.width,
+			height: size.height,
+			cellId: cell.id,
+			generation: cell.generation,
+			view: event.object
+		});
+		refreshWindow();
 	}
+	useEffect(() => {
+		disposedRef.current = false;
+		return () => {
+			disposedRef.current = true;
+			frameCancelRef.current?.();
+			viewportFrameCancelRef.current?.();
+			viewportFrameCancelRef.current = null;
+			if (estimateTimerRef.current != null) clearTimeout(estimateTimerRef.current);
+			frameCancelRef.current = null;
+			estimateTimerRef.current = null;
+			measurementsRef.current.clear();
+			for (const detach of layoutListenersRef.current.values()) detach();
+			layoutListenersRef.current.clear();
+			cellsRef.current.clear();
+			cellNodesRef.current.clear();
+			cellCallbacksRef.current.clear();
+			measuredAssignmentsRef.current.clear();
+			cancelAnchorRestore();
+		};
+	}, [], _h$33);
 	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;
+	useEffect(() => {
+		for (const cell of cells) {
+			if (!cell.entry || measuredAssignmentsRef.current.get(cell.id) === cell.generation) continue;
+			const view = cellNodesRef.current.get(cell.id);
+			if (!view) continue;
+			measuredAssignmentsRef.current.set(cell.id, cell.generation);
+			measurementsRef.current.set(cell.entry.rowKey, {
+				entry: cell.entry,
+				width: 0,
+				height: 0,
+				view,
+				cellId: cell.id,
+				generation: cell.generation
+			});
+			refreshWindow();
+		}
+		for (const id of measuredAssignmentsRef.current.keys()) if (!cellNodesRef.current.has(id)) measuredAssignmentsRef.current.delete(id);
+	}, [cells], _h$34);
 	const style = {
 		...props.style,
 		minHeight: props.style?.minHeight ?? 0
 	};
-	return universalValue(__octaneUniversalPlan6, [
+	return universalValue(__octaneUniversalPlan7, [
 		universalProps([
 			[
 				"set",
 				"ref",
 				(view) => {
 					scrollRef.current = view;
+					observeLayout("viewport", view, scheduleViewport);
+					if (view) scheduleViewport();
 					if (view) applyEscapeProps(view, props);
 				}
 			],
@@ -426,12 +644,7 @@ var VirtualList = defineUniversalComponent("nativescript", function VirtualList(
 			[
 				"set",
 				"onLoaded",
-				(event) => syncViewport(event.object)
-			],
-			[
-				"set",
-				"onLayoutChanged",
-				(event) => syncViewport(event.object)
+				scheduleViewport
 			],
 			[
 				"set",
@@ -440,26 +653,24 @@ var VirtualList = defineUniversalComponent("nativescript", function VirtualList(
 			]
 		]),
 		cx("vx-virtual-list-content"),
-		props.renderHeader ? universalValue(__octaneUniversalPlan0, [onHeaderLayout, props.renderHeader()]) : null,
-		entries.length === 0 ? props.renderEmpty ? universalValue(__octaneUniversalPlan1, [props.renderEmpty()]) : null : universalValue(__octaneUniversalPlan4, [
-			{
-				height: range.top,
-				flexShrink: 0
-			},
-			universalFor(visibleEntries, (entry, __octaneUniversalIndex) => entry.rowKey, (entry, __octaneUniversalIndex) => {
-				return universalValue(__octaneUniversalPlan3, [
-					{ flexShrink: 0 },
-					(event) => onRowLayout(entry, event),
-					props.renderItem(entry.item, entry.index),
-					hasSeparator && entry.index < entries.length - 1 ? universalValue(__octaneUniversalPlan2, [props.renderSeparator?.()]) : null
-				]);
-			}),
-			{
-				height: range.bottom,
-				flexShrink: 0
-			}
-		]),
-		props.renderFooter ? universalValue(__octaneUniversalPlan5, [props.renderFooter()]) : null
+		(view) => observeLayout("content", view, onContentLayout),
+		props.renderHeader ? universalValue(__octaneUniversalPlan0, [(view) => observeLayout("header", view, onHeaderLayout), props.renderHeader()]) : null,
+		entries.length === 0 ? props.renderEmpty ? universalValue(__octaneUniversalPlan1, [props.renderEmpty()]) : null : universalValue(__octaneUniversalPlan5, [{
+			height: contentHeight,
+			flexShrink: 0
+		}, universalFor(cells, (cell, __octaneUniversalIndex) => cell.id, (cell, __octaneUniversalIndex) => {
+			return universalValue(__octaneUniversalPlan4, [
+				cellCallback(cell.id),
+				cell.entry ? "vx-virtual-list-cell vx-virtual-list-row" : "vx-virtual-list-cell",
+				cell.entry ? "visible" : "collapse",
+				cell.top,
+				contentWidthRef.current || viewportWidthRef.current || "100%",
+				universalFor(cell.rows, (entry, __octaneUniversalIndex$) => entry.rowKey, (entry, __octaneUniversalIndex$) => {
+					return universalValue(__octaneUniversalPlan3, [props.renderItem(entry.item, entry.index), hasSeparator && entry.index < entries.length - 1 ? universalValue(__octaneUniversalPlan2, [props.renderSeparator?.()]) : null]);
+				})
+			]);
+		})]),
+		props.renderFooter ? universalValue(__octaneUniversalPlan6, [props.renderFooter()]) : null
 	]);
 }, { "module": "@nativescript-community/octane" });
 //#endregion