@octane-xplat/ui 0.7.3 → 0.9.0

package/src/TextArea.tsrx

@@ -4,14 +4,15 @@ import { Utils } from '@nativescript/core';
 import type { TextAreaProps } from "./props";
 import { cx } from "./cx";
 import { applyEscapeProps } from "./escape-props";
-import { writeText } from './text-write';
+import { isWritingText, writeText } from './text-write';
+import { blurText } from './text-focus';
 
 /** Multiline input — <textview>. TextView measures to content natively, so
  *  `autoGrow` is its default; `rows`/`maxRows` have no NS equivalent, so the
  *  leaf converts them to min/maxHeight in dips using the widget's own line
  *  height (iOS `font.lineHeight`, Android `getLineHeight()` px→dip — measured
- *  on `loaded`, re-fit every commit for prop/style changes). The driver's
- *  text→textChange echo suppression applies here unchanged. */
+ *  on `loaded`, re-fit every commit for prop/style changes). Imperative
+ *  writes suppress their synchronous textChange echo through text-write. */
 export function TextArea(props: TextAreaProps) @{
 	const el = useRef<any>(null);
 	const submitOnReturn = props.returnKeyType === 'done' || props.returnKeyType === 'send';
@@ -46,7 +47,7 @@ export function TextArea(props: TextAreaProps) @{
 			el.current = v;
 			if (!v) return;
 			applyEscapeProps(v, props);
-			props.bind?.({ focus: () => v.focus(), blur: () => v.dismissSoftInput?.() ?? v.blur(), native: v });
+			props.bind?.({ focus: () => v.focus(), blur: () => blurText(v), native: v });
 		}}
 		className={cx('vx-textarea', props.className)}
 		style={{ ...props.style, ...(props.placeholderTextColor ? { placeholderColor: props.placeholderTextColor } : {}) }}
@@ -55,7 +56,7 @@ export function TextArea(props: TextAreaProps) @{
 		returnKeyType={props.returnKeyType}
 		editable={props.editable ?? true}
 		onLoaded={(e: any) => fit(e.object)}
-		onTextChange={(e: any) => props.onChange?.(e.value)}
+		onTextChange={(e: any) => { if (!isWritingText(e.object)) props.onChange?.(e.value); }}
 		// TextView emits returnPress for every newline. Only an explicit action
 		// key opts into the submit semantic; ordinary Return remains a newline.
 		onReturnPress={submitOnReturn ? props.onSubmit : undefined}

package/src/TextArea.web.test.tsrx

@@ -0,0 +1,39 @@
+// @vitest-environment jsdom
+import { afterEach, expect, it, vi } from 'vitest'
+import { act, createRoot } from 'octane'
+import { TextArea } from './TextArea.web.tsrx'
+const roots:any[]=[]
+function mount(props:any={}) {
+ const el=document.createElement('div');document.body.append(el);const root=createRoot(el);roots.push(root)
+ let measured=20
+ const render=(next:any={}) => act(() => root.render(<TextArea {...props} style={{fontSize:10,lineHeight:"10px",padding:0,borderWidth:0,boxSizing:'border-box'}} {...next} />));
+ const descriptor=Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype,'scrollHeight')
+ Object.defineProperty(HTMLTextAreaElement.prototype,'scrollHeight',{configurable:true,get:() => measured})
+ render();const field=el.querySelector('textarea')!
+ const input=(value:string,height:number) => {measured=height;field.value=value;act(() => field.dispatchEvent(new Event('input',{bubbles:true})))}
+ const measure=(height:number) => {measured=height}
+ return {field,render,input,measure,restore:() => {if(descriptor) Object.defineProperty(HTMLTextAreaElement.prototype,'scrollHeight',descriptor);else delete (HTMLTextAreaElement.prototype as any).scrollHeight}}
+}
+
+const restorers:(() => void)[]=[]
+afterEach(() => {for(const root of roots.splice(0)) act(() => root.unmount());for(const restore of restorers.splice(0)) restore();document.body.innerHTML='';vi.restoreAllMocks()})
+it('grows and shrinks an uncontrolled field from actual input', () => {
+ const onChange=vi.fn();const m=mount({autoGrow:true,onChange});restorers.push(m.restore)
+ m.input('one\ntwo\nthree',80);expect(m.field.style.height).toBe('80px');expect(onChange).toHaveBeenCalledWith('one\ntwo\nthree')
+ m.input('one',20);expect(m.field.style.height).toBe('20px');expect(m.field.style.overflowY).toBe('hidden')
+})
+
+it('caps uncontrolled growth at maxRows and scrolls past the cap', () => {
+ const m=mount({autoGrow:true,rows:2,maxRows:3});restorers.push(m.restore)
+ expect(m.field.rows).toBe(2);m.input('many lines',80);expect(m.field.style.height).toBe('30px');expect(m.field.style.overflowY).toBe('auto')
+ m.input('short',20);expect(m.field.style.height).toBe('20px');expect(m.field.style.overflowY).toBe('hidden')
+})
+
+it('still fits controlled value updates', () => {
+ const m=mount({autoGrow:true,value:'one'});restorers.push(m.restore);m.measure(70);m.render({value:'one\ntwo\nthree'})
+ expect(m.field.style.height).toBe('70px');expect(m.field.value).toBe('one\ntwo\nthree')
+})
+
+it('leaves fixed-row inputs at their declared rows', () => {
+ const m=mount({rows:4});restorers.push(m.restore);m.input('many lines',80);expect(m.field.rows).toBe(4);expect(m.field.style.height).toBe('')
+})

package/src/TextArea.web.tsrx

@@ -4,7 +4,7 @@ import type { TextAreaProps } from "./props";
 import { applyEscapeProps } from "./escape-props";
 
 /** Multiline input — <textarea>. `autoGrow` re-fits height to content after
- *  every commit via scrollHeight, capped by `maxRows` translated to a real
+ *  input and value updates via scrollHeight, capped by `maxRows` translated to a real
  *  max-height from the element's computed line-height; past the cap the
  *  field scrolls. `useLayoutEffect` so the measure lands pre-paint in the
  *  commit that wrote `value`. Deps are explicit — tsrx infers them from the
@@ -13,7 +13,7 @@ import { applyEscapeProps } from "./escape-props";
 export function TextArea(props: TextAreaProps) @{
 	const el = useRef<HTMLTextAreaElement | null>(null);
 
-	useLayoutEffect(() => {
+	const fit = () => {
 		const t = el.current;
 		if (!t) return;
 		const cs = getComputedStyle(t);
@@ -35,7 +35,9 @@ export function TextArea(props: TextAreaProps) @{
 			t.style.height = Math.min(need, cap) + 'px';
 			t.style.overflowY = need > cap ? 'auto' : 'hidden';
 		}
-	}, [props.value, props.rows, props.autoGrow, props.maxRows, props.className, props.style]);
+	};
+
+	useLayoutEffect(fit, [props.value, props.rows, props.autoGrow, props.maxRows, props.className, props.style]);
 
 	<textarea
 		ref={(node: any) => {
@@ -53,8 +55,8 @@ export function TextArea(props: TextAreaProps) @{
 		readOnly={props.editable === false}
 		placeholder={props.placeholder}
 		rows={props.rows ?? (props.autoGrow ? 1 : 3)}
-		onInput={(e: any) => props.onChange?.(e.target.value)}
-		onKeyDown={(e: any) => { if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) props.onSubmit?.(); }}
+		onInput={(e: any) => { fit(); props.onChange?.(e.target.value); }}
+		onKeyDown={(e: any) => { if (e.key === 'Enter' && (e.ctrlKey || e.metaKey) && !e.isComposing && e.keyCode !== 229) props.onSubmit?.(); }}
 		onFocus={props.onFocus}
 		onBlur={props.onBlur}
 	/>

package/src/TextInput.tsrx

@@ -3,11 +3,11 @@ import { useEffect, useRef } from 'octane';
 import type { TextInputProps } from "./props";
 import { cx } from "./cx";
 import { applyEscapeProps } from "./escape-props";
-import { writeText } from './text-write';
+import { isWritingText, writeText } from './text-write';
+import { blurText } from './text-focus';
 
-/** Controlled single-line input. The driver suppresses the textChange echo
- *  of its own `text` writes (upstream #5, since 0.2.1) — no leaf-side
- *  guard needed. `editable` defaults true at the leaf too: an undefined
+/** Controlled single-line input. Imperative writes suppress their synchronous
+ *  textChange echo through text-write. `editable` defaults true: an undefined
  *  write coerces ios.userInteractionEnabled to NO (dead field) — the
  *  driver's skip-undefined patch covers it, the ?? stays as documentation.
  *  `text` isn't a bound prop: the leaf writes it imperatively so the
@@ -21,7 +21,7 @@ export function TextInput(props: TextInputProps) @{
 			el.current = v;
 			if (!v) return;
 			applyEscapeProps(v, props);
-			props.bind?.({ focus: () => v.focus(), blur: () => v.dismissSoftInput?.() ?? v.blur(), native: v });
+			props.bind?.({ focus: () => v.focus(), blur: () => blurText(v), native: v });
 		}}
 		id={props.id}
 		className={cx('vx-input', props.className)}
@@ -31,7 +31,7 @@ export function TextInput(props: TextInputProps) @{
 		keyboardType={props.keyboardType === 'default' ? undefined : props.keyboardType}
 		returnKeyType={props.returnKeyType}
 		editable={props.editable ?? true}
-		onTextChange={(e: any) => props.onChange?.(e.value)}
+		onTextChange={(e: any) => { if (!isWritingText(e.object)) props.onChange?.(e.value); }}
 		onReturnPress={props.onSubmit}
 		onFocus={props.onFocus}
 		onBlur={props.onBlur}

package/src/TextInput.web.tsrx

@@ -21,7 +21,7 @@ export function TextInput(props: TextInputProps) @{
 		readOnly={props.editable === false}
 		placeholder={props.placeholder}
 		onInput={(e: any) => props.onChange?.(e.target.value)}
-		onKeyDown={(e: any) => { if (e.key === 'Enter' && !e.shiftKey) props.onSubmit?.(); }}
+		onKeyDown={(e: any) => { if (e.key === 'Enter' && !e.shiftKey && !e.isComposing && e.keyCode !== 229) props.onSubmit?.(); }}
 		onFocus={props.onFocus}
 		onBlur={props.onBlur}
 	/>

package/src/VirtualList.macos.tsrx

@@ -70,6 +70,8 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 	const indexByRowKeyRef = useRef(new Map<string, number>())
 	const scrollRef = useRef<any>(null)
 	const scrollOffsetRef = useRef(0)
+	const topSpacerRef = useRef<any>(null)
+	const topSpacerHeightRef = useRef(0)
 	const viewportHeightRef = useRef(0)
 	const viewportWidthRef = useRef(0)
 	const headerHeightRef = useRef(0)
@@ -80,6 +82,12 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 	const estimateAnchorRef = useRef<{ rowKey: string; within: number } | null>(null)
 	const estimateTimerRef = useRef<any>(null)
 	const pendingRowMeasureRef = useRef(new Map<string, number>())
+	const programmaticWriteRef = useRef<{ offset: number; until: number } | null>(null)
+	/** Convergent deep seek state (FlashList v2's scrollToIndex model): a large
+	 *  external scroll jump is tracked and anchor-restore writes are suppressed
+	 *  while measurements converge — the clip already sits at the seek target,
+	 *  and re-anchoring would rewrite it to the biased estimated prefix. */
+	const seekStateRef = useRef<{ target: number; until: number } | null>(null)
 	const hasSeparator = Boolean(props.renderSeparator)
 	const hasSeparatorRef = useRef(hasSeparator)
 	hasSeparatorRef.current = hasSeparator
@@ -146,8 +154,14 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 		return { rowKey: entry.rowKey, within: listOffset - sizeIndexRef.current.prefix(index) }
 	}
 
+	function activeSeek() {
+		const seek = seekStateRef.current
+		if (seek && Date.now() > seek.until) {seekStateRef.current = null}
+		return seekStateRef.current
+	}
+
 	function restoreAnchor(anchor: { rowKey: string; within: number } | null) {
-		if (!anchor) {return}
+		if (!anchor || activeSeek()) {return}
 		queuedAnchorRef.current = anchor
 		if (anchorRestoreScheduledRef.current) {return}
 		const scroll = scrollRef.current
@@ -158,6 +172,9 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 			if (anchorRestoreTimerRef.current !== timer) {return}
 			anchorRestoreTimerRef.current = null
 			anchorRestoreScheduledRef.current = false
+			// A restore scheduled before a deep seek must not fire its write
+			// mid-convergence — it would move the clip off the seek target.
+			if (activeSeek()) {queuedAnchorRef.current = null; return}
 			if (scrollRef.current !== scroll) {return}
 			const queued = queuedAnchorRef.current
 			queuedAnchorRef.current = null
@@ -169,7 +186,8 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 				headerHeightRef.current + sizeIndexRef.current.prefix(index) + queued.within,
 			)
 
-			if (sameSize(nextOffset, scrollViewOffset(scroll))) {return}
+			if (sameSize(nextOffset, scrollOffsetRef.current)) {return}
+			programmaticWriteRef.current = { offset: nextOffset, until: Date.now() + 250 }
 			scrollViewSetTop(scroll, nextOffset)
 		}, 0)
 
@@ -184,6 +202,14 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 		// relayout/anchor cycle count bounded while samples accumulate.
 		estimateTimerRef.current = setTimeout(() => {
 			estimateTimerRef.current = null
+			// FlashList v2's scrollToIndex model: correction passes stay
+			// paused for the whole seek — sizes keep accumulating in the
+			// cache/index and one rebuild runs once the seek expires.
+			if (activeSeek()) {
+				scheduleEstimateRebuild(null)
+				return
+			}
+
 			const scheduledAnchor = estimateAnchorRef.current
 			estimateAnchorRef.current = null
 			rebuildLayout(entriesRef.current, viewportWidthRef.current)
@@ -207,6 +233,12 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 		// re-run this whole path (and reschedule estimate rebuilds) forever.
 		if (cached && sameSize(cached.height, height) && sameSize(cached.width, width)) {return}
 
+		// Keep the seek suppression alive through the measurement storm — the
+		// seek ends ~400 ms after the last new/changed size lands (Legend's
+		// idle-settle model), not on the first quiet rebuild.
+		const seek = activeSeek()
+		if (seek) {seek.until = Date.now() + 400}
+
 		const anchor = queuedAnchorRef.current ?? captureAnchor()
 		sizeCacheRef.current.set(cacheKey, { width, height })
 
@@ -237,10 +269,58 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 	}
 
 	function onScroll(event: AppKitScrollEvent) {
-		// The event's verticalOffset is the raw clip bounds origin — bottom-up
-		// on a non-flipped document — so derive the top-down offset ourselves.
 		const scroll = scrollRef.current
-		scrollOffsetRef.current = scroll ? scrollViewOffset(scroll) : Number(event?.verticalOffset ?? 0)
+		// Prefer the spacer-landmark offset: the top spacer's bottom edge sits
+		// at content position `range.top`, so measuring the clip against it
+		// reports DOM-style scrollTop with no docH term. Estimate rebuilds
+		// resize the document constantly and would phantom-drift the
+		// docHeight-derived offset even when the clip never moved.
+		const clip = scroll?.contentView
+		const spacerBottomY = Number(topSpacerRef.current?.frame?.origin?.y ?? Number.NaN)
+		const doc = scroll?.documentView
+		const flip = typeof doc?.isFlipped === 'function' ? doc.isFlipped() : doc?.isFlipped
+		const flipped = flip === true || Number(flip) === 1
+		const originY = Number(clip?.bounds?.origin?.y ?? event?.verticalOffset ?? 0)
+		const clipH = Number(clip?.bounds?.size?.height ?? 0)
+		let nextOffset: number
+		if (Number.isFinite(spacerBottomY)) {
+			const clipTopY = flipped ? originY : originY + clipH
+			const spacerBottomContent = flipped
+				? Number(topSpacerRef.current?.frame?.size?.height ?? 0) + spacerBottomY
+				: spacerBottomY
+
+			nextOffset =
+				headerHeightRef.current +
+				topSpacerHeightRef.current +
+				(flipped ? clipTopY - spacerBottomContent : spacerBottomY - clipTopY)
+		} else {
+			nextOffset = scroll ? scrollViewOffset(scroll) : Number(event?.verticalOffset ?? 0)
+		}
+
+		if (props.id) {
+			const published = ((globalThis as any).__xplatVlistOffsets ??= {} as Record<string, number>)
+			published[props.id] = nextOffset
+		}
+
+		let ownWrite = false
+		const wrote = programmaticWriteRef.current
+		if (wrote !== null) {
+			if (sameSize(nextOffset, wrote.offset)) {
+				programmaticWriteRef.current = null
+				ownWrite = true
+			} else if (Date.now() > wrote.until) {
+				programmaticWriteRef.current = null
+			}
+		}
+
+		const jumpThreshold = Math.max(200, viewportHeightRef.current * 1.5)
+		// A jump that doesn't match a pending anchor write is an external seek —
+		// including one that lands while a stale write flag is still open.
+		if (!ownWrite && Math.abs(nextOffset - scrollOffsetRef.current) > jumpThreshold) {
+			seekStateRef.current = { target: nextOffset, until: Date.now() + 1000 }
+		}
+
+		scrollOffsetRef.current = nextOffset
 		viewportHeightRef.current = Number(event?.viewportHeight ?? viewportHeightRef.current)
 		refreshWindow()
 	}
@@ -278,6 +358,7 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 
 	const range = currentRange()
 	rangeRef.current = range
+	topSpacerHeightRef.current = range.top
 	void windowVersion
 	const visibleEntries = entries.slice(range.start, range.end)
 
@@ -311,7 +392,13 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 				}
 			} @else {
 				<flexboxlayout flexDirection="column">
-					<flexboxlayout className="vx-virtual-list-spacer" style={{ height: range.top }} />
+					<flexboxlayout
+						className="vx-virtual-list-spacer"
+						style={{ height: range.top }}
+						ref={(view: any) => {
+							topSpacerRef.current = view
+						}}
+					/>
 					@for (const entry of visibleEntries; key entry.rowKey) {
 						<flexboxlayout
 							flexDirection="column"

package/src/VirtualList.mobile.test.tsrx

@@ -0,0 +1,232 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useState } from 'octane'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { createObjectContainer, createObjectDriver, createUniversalRoot } from 'octane/universal/native'
+import { VirtualList } from './VirtualList.tsrx'
+import { VirtualListSizeIndex } from './virtual-list-layout'
+
+vi.mock('@nativescript/core', () => ({ isAndroid: true, isIOS: false }))
+
+const items = Array.from({ length: 500 }, (_, index) => ({ id: 'r' + index }))
+const keyExtractor = (item: { id: string }) => item.id
+const renderItem = (item: { id: string }) => <label id={'row-' + item.id} text={item.id} />
+function StatefulRow(props: { id: string }) @{
+	const [taps, setTaps] = useState(0)
+
+	<label id={'row-' + props.id} text={props.id + ':' + taps} onTap={() => setTaps(taps + 1)} />
+}
+
+const renderStatefulItem = (item: { id: string }) => <StatefulRow id={item.id} />
+
+const roots: { unmount: () => void }[] = []
+
+function collect(nodes: any[]): any[] {
+	return nodes.flatMap((node) => [node, ...collect(node.children ?? [])])
+}
+
+async function mount(viewportWidth = 100, itemRenderer = renderItem) {
+	vi.useFakeTimers()
+	const container = createObjectContainer('nativescript')
+	const driver = createObjectDriver('nativescript')
+	const commits: any[] = []
+	const prepare = driver.prepareBatch
+	driver.prepareBatch = (...args) => {
+		commits.push(args[1])
+		return prepare(...args)
+	}
+
+	const root = createUniversalRoot(container, driver)
+	roots.push(root)
+	root.render(VirtualList as any, { items, keyExtractor, renderItem: itemRenderer })
+	const scroll: any = container.children[0]
+	scroll.verticalOffset = 0
+	scroll.getActualSize = () => ({ width: viewportWidth, height: 200 })
+	scroll.scrollToVerticalOffset = vi.fn((offset) => { scroll.verticalOffset = offset })
+	container.dispatchEvent(scroll, 'loaded', { object: scroll })
+	const content = scroll.children[0]
+	content.getActualSize = () => ({ width: 100, height: 500 * 48 })
+	container.dispatchEvent(content, 'layoutchanged', { object: content })
+	await vi.advanceTimersByTimeAsync(32)
+	scroll.scrollToVerticalOffset.mockClear()
+	commits.length = 0
+	const move = (offset: number) => {
+		scroll.verticalOffset = offset
+		container.dispatchEvent(scroll, 'scroll', { object: scroll })
+	}
+
+	const measure = (id: string, height: number, emit = true) => {
+		const row = collect(container.children).find((node) =>
+			String(node.props.className).split(' ').includes('vx-virtual-list-row') && collect(node.children).some((child) => child.props.id === id),
+		)
+
+		if (!row) throw new Error('Missing row ' + id)
+		row.getActualSize = () => ({ width: 100, height })
+		if (emit) container.dispatchEvent(row, 'layoutchanged', { object: row })
+	}
+
+	return { container, root, scroll, commits, move, measure }
+}
+
+afterEach(() => {
+	for (const root of roots.splice(0)) root.unmount()
+	vi.useRealTimers()
+	vi.unstubAllGlobals()
+	vi.restoreAllMocks()
+})
+
+describe('native VirtualList scroll and measurement scheduling', () => {
+	it('does not restore an obsolete anchor after the user advances during measurement', async () => {
+		const { scroll, move, measure } = await mount()
+		move(480)
+		await vi.advanceTimersByTimeAsync(32)
+		scroll.scrollToVerticalOffset.mockClear()
+		measure('row-r16', 60)
+		await Promise.resolve()
+		move(492)
+		await vi.advanceTimersByTimeAsync(32)
+		expect(scroll.verticalOffset).toBe(492)
+		expect(scroll.scrollToVerticalOffset).not.toHaveBeenCalled()
+	})
+
+	it('applies an above-anchor height correction while preserving user movement', async () => {
+		const { scroll, move, measure } = await mount()
+		move(480)
+		await vi.advanceTimersByTimeAsync(32)
+		measure('row-r5', 60)
+		move(492)
+		await vi.advanceTimersByTimeAsync(32)
+		expect(scroll.verticalOffset).toBe(504)
+	})
+
+	it('coalesces a scroll burst instead of committing inside each native callback', async () => {
+		const { commits, move } = await mount()
+		move(240)
+		move(288)
+		move(336)
+		expect(commits).toHaveLength(0)
+		await vi.advanceTimersByTimeAsync(32)
+		expect(commits).toHaveLength(1)
+	})
+
+	it('does not rebuild unvisited estimates when another sample preserves the type average', async () => {
+		const reset = vi.spyOn(VirtualListSizeIndex.prototype, 'reset')
+		const { measure } = await mount()
+		for (let index = 0; index < 4; index++) measure('row-r' + index, 36 + index * 12)
+		await vi.advanceTimersByTimeAsync(180)
+		const count = reset.mock.calls.length
+		for (let index = 4; index < 8; index++) measure('row-r' + index, 36 + (index % 4) * 12)
+		await vi.advanceTimersByTimeAsync(180)
+		expect(reset).toHaveBeenCalledTimes(count)
+	})
+
+	it('retains exact row sizes when borders make content narrower than the viewport', async () => {
+		const { scroll, move, measure } = await mount(102)
+		for (let index = 0; index < 4; index++) measure('row-r' + index, 36 + index * 12)
+		await vi.advanceTimersByTimeAsync(180)
+		move(200)
+		await vi.advanceTimersByTimeAsync(32)
+		scroll.scrollToVerticalOffset.mockClear()
+		measure('row-r0', 36)
+		await vi.advanceTimersByTimeAsync(180)
+		expect(scroll.verticalOffset).toBe(200)
+		expect(scroll.scrollToVerticalOffset).not.toHaveBeenCalled()
+	})
+
+	it('rejects a queued measurement after the keyed item is replaced', async () => {
+		const { root, scroll, move, measure } = await mount()
+		move(480)
+		await vi.advanceTimersByTimeAsync(32)
+		measure('row-r5', 120)
+		const replacement = items.map((item, index) => index === 5 ? { ...item } : item)
+		root.render(VirtualList as any, { items: replacement, keyExtractor, renderItem })
+		// The replacement has its own current geometry; the queued 120-height result is obsolete.
+		measure('row-r5', 48, false)
+		await vi.advanceTimersByTimeAsync(32)
+		expect(scroll.verticalOffset).toBe(480)
+	})
+
+	it('commits a burst of row measurements together', async () => {
+		const { commits, move, measure } = await mount()
+		move(480)
+		await vi.advanceTimersByTimeAsync(32)
+		commits.length = 0
+		measure('row-r12', 60)
+		measure('row-r13', 72)
+		measure('row-r14', 84)
+		expect(commits).toHaveLength(0)
+		await vi.advanceTimersByTimeAsync(32)
+		expect(commits).toHaveLength(1)
+	})
+
+	it('coalesces through native animation frames and cancels a pending frame on disposal', async () => {
+		const { root, commits, move } = await mount()
+		vi.stubGlobal('requestAnimationFrame', (callback: (time: number) => void) => setTimeout(() => callback(Date.now()), 8))
+		const cancel = vi.fn((id: ReturnType<typeof setTimeout>) => clearTimeout(id))
+		vi.stubGlobal('cancelAnimationFrame', cancel)
+		move(240)
+		move(288)
+		expect(commits).toHaveLength(0)
+		await vi.advanceTimersByTimeAsync(32)
+		expect(commits).toHaveLength(1)
+		move(480)
+		await vi.advanceTimersByTimeAsync(8)
+		root.unmount()
+		await vi.advanceTimersByTimeAsync(0)
+		expect(cancel).toHaveBeenCalled()
+		const count = commits.length
+		await vi.advanceTimersByTimeAsync(32)
+		expect(commits).toHaveLength(count)
+	})
+
+	it('keeps physical hosts alive on reassignment and destroys them on disposal', async () => {
+		const { container, root, move } = await mount()
+		const cells = collect(container.children).filter((node) => String(node.props.className).split(' ').includes('vx-virtual-list-cell'))
+		expect(cells.length).toBeGreaterThan(0)
+		for (const cell of cells) cell.destroyNode = vi.fn()
+		move(480)
+		await vi.advanceTimersByTimeAsync(32)
+		for (const cell of cells) {
+			expect(cell.reusable).toBe(true)
+			expect(cell.destroyNode).not.toHaveBeenCalled()
+		}
+
+		root.unmount()
+		await vi.advanceTimersByTimeAsync(0)
+		for (const cell of cells) expect(cell.destroyNode).toHaveBeenCalledWith(true)
+	})
+
+	it('retains keyed state across prepend and resets it after leaving the window', async () => {
+		const { container, root, scroll, move } = await mount(100, renderStatefulItem)
+		move(480)
+		await vi.advanceTimersByTimeAsync(32)
+		const findRow = () => collect(container.children).find((node) => node.props.id === 'row-r10')
+		const row = findRow()
+		container.dispatchEvent(row, 'tap', { object: row })
+		expect(findRow().props.text).toBe('r10:1')
+		const prepended = [{ id: 'prepended' }, ...items]
+		root.render(VirtualList as any, { items: prepended, keyExtractor, renderItem: renderStatefulItem })
+		await vi.advanceTimersByTimeAsync(32)
+		expect(scroll.verticalOffset).toBe(528)
+		expect(findRow()).toBe(row)
+		expect(findRow().props.text).toBe('r10:1')
+		move(4000)
+		await vi.advanceTimersByTimeAsync(32)
+		expect(findRow()).toBeUndefined()
+		for (const visible of collect(container.children).filter((node) => /^row-r/.test(String(node.props.id)))) {
+			expect(visible.props.text).toMatch(/:0$/)
+		}
+
+		move(528)
+		await vi.advanceTimersByTimeAsync(32)
+		expect(findRow().props.text).toBe('r10:0')
+	})
+
+	it('cancels queued work when the list is disposed', async () => {
+		const { root, commits, move } = await mount()
+		move(480)
+		root.unmount()
+		const count = commits.length
+		await vi.advanceTimersByTimeAsync(100)
+		expect(commits).toHaveLength(count)
+	})
+})