@octane-xplat/ui 0.7.2 → 0.9.0

package/src/Sheet.tsrx

@@ -7,9 +7,10 @@ import type { SheetProps } from './props';
 import { cx } from './cx';
 import { applyThemeClasses } from './theme/theme-scheme';
 import { rootLayoutFor } from './root-layout.mobile';
+import { createOverlayLifetime } from './overlay-lifetime.mobile';
 import { attachSheetDetents } from './sheet-detents';
 import { bindBottomInsetToKeyboard } from './keyboard-inset.mobile';
-import { attachTapToBlur } from './tap-to-blur.mobile';
+import { attachTapToBlur } from './tap-to-blur';
 
 function SheetBody(props: { children?: any }) @{
 	<>{props.children}</>
@@ -23,28 +24,16 @@ export function Sheet(props: SheetProps) @{
 	const shown = useRef<{
 		host: GridLayout;
 		root: any;
-		unbindTheme?: () => void;
-		unbindKeyboard?: () => void;
-		programmatic?: boolean;
-		detach?: () => void;
+		lifetime: ReturnType<typeof createOverlayLifetime>;
 	} | null>(null);
 
+	const dismiss = useRef(props.onDismiss);
+	dismiss.current = props.onDismiss;
+
 	useEffect(() => {
 		const cur = shown.current;
 		if (!props.open) {
-			if (!cur) return;
-			shown.current = null;
-			cur.programmatic = true;
-			cur.unbindTheme?.();
-			cur.unbindKeyboard?.();
-			cur.root.unmount?.();
-			const owner = cur.host.parent as any;
-			if (owner?.hasChild?.(cur.host)) {
-				owner.close(cur.host).catch((error: unknown) => {
-					console.error('[Sheet] close failed', error);
-				});
-			}
-
+			cur?.lifetime.close();
 			return;
 		}
 
@@ -63,6 +52,12 @@ export function Sheet(props: SheetProps) @{
 		if (props.style) Object.assign(host.style, props.style);
 		Object.assign(host, isIOS ? props.ios : isAndroid ? props.android : undefined);
 		const root = createNativeScriptRoot(host);
+		const lifetime = createOverlayLifetime(rl, host, root, 'Sheet', (dismissed) => {
+			if (shown.current?.host === host) shown.current = null;
+			if (dismissed) dismiss.current?.();
+		});
+
+		lifetime.own(unbindTheme);
 		// Detents: the controller owns enter/slide-out — RootLayout's open
 		// animation always lands translateY at 0, which would fight the
 		// detent offsets, so it's skipped while detents are attached.
@@ -77,23 +72,13 @@ export function Sheet(props: SheetProps) @{
 
 		// Lift the host above the software keyboard (todo 'Add' row inside a
 		// demo sheet is bottom-anchored and was covered on iOS).
-		const unbindKeyboard = bindBottomInsetToKeyboard(host);
-		attachTapToBlur(host);
-		const opened = { host, root, unbindTheme, unbindKeyboard, programmatic: false, detach: detents?.detach };
-		shown.current = opened;
+		lifetime.own(bindBottomInsetToKeyboard(host));
+		lifetime.own(attachTapToBlur(host));
+		if (detents) lifetime.own(detents.detach);
+		shown.current = { host, root, lifetime };
 		root.render(SheetBody as unknown as UniversalComponent, { children: props.children });
-		host.on('closed', () => {
-			if (shown.current === opened) shown.current = null;
-			opened.detach?.();
-			opened.unbindKeyboard?.();
-			opened.unbindTheme?.();
-			opened.root.unmount?.();
-			// 'closed' fires for programmatic closes too — onDismiss only when
-			// the platform dismissed it (shade tap or detent drag-out).
-			if (!opened.programmatic) props.onDismiss?.();
-		});
 
-		rl.open(host, {
+		lifetime.open({
 			...(props.shadeCover ?? true)
 				? { shadeCover: { opacity: 0.4, tapToClose: true } }
 				: {},
@@ -105,17 +90,11 @@ export function Sheet(props: SheetProps) @{
 							exitTo: { translateY: 400, duration: 200 },
 						},
 					}),
-		})
-			.then(() => detents?.enter())
-			.catch((error: unknown) => {
-				if (shown.current === opened) shown.current = null;
-				opened.unbindKeyboard?.();
-				opened.unbindTheme?.();
-				opened.root.unmount?.();
-				console.error('[Sheet] open failed', error);
-			});
+		}, () => detents?.enter());
 	}, [props.open, props.children, props.className, props.style, props.shadeCover, props.ios, props.android]);
 
+	useEffect(() => () => shown.current?.lifetime.close(), []);
+
 	// Zero-size sentinel — the sheet resolves its owning RootLayout from the
 	// declaring component's ancestry, not getRootLayout() (first-mounted shell).
 	<stacklayout ref={(v: any) => { sentinel.current = v; }} style={{ width: 0, height: 0 }} />

package/src/Sheet.web.tsrx

@@ -4,6 +4,7 @@ import { cx } from './cx';
 import { useThemeScheme } from './theme/theme-scheme';
 import { normalizeDetents } from './sheet-snap';
 import { attachSheetDetents } from './sheet-detents.web';
+import { isolateModalFocus } from './modal-focus.web';
 
 /** In-window bottom sheet — portal layer with a backdrop and a bottom-
  *  anchored panel. Same vocabulary as the native RootLayout sheet.
@@ -13,8 +14,13 @@ import { attachSheetDetents } from './sheet-detents.web';
 export function Sheet(props: SheetProps) @{
 	const dark = useThemeScheme() === 'dark';
 	const panel = useRef<HTMLElement | null>(null);
+	const layer = useRef<HTMLDivElement | null>(null);
 	const dismiss = useRef(props.onDismiss);
 	dismiss.current = props.onDismiss;
+	useEffect(() => {
+		if (!props.open || props.shadeCover === false || !layer.current || !panel.current) return;
+		return isolateModalFocus(layer.current, panel.current, () => dismiss.current?.());
+	}, [props.open, props.shadeCover]);
 
 	const detents = normalizeDetents(props.detents);
 	const maxDetent = detents.length ? detents[detents.length - 1] : 0;
@@ -31,11 +37,13 @@ export function Sheet(props: SheetProps) @{
 
 	@if (props.open) {
 		<>{createPortal(
-			<div className={cx('vx-sheet-layer', dark && 'dark')}>
+			<div ref={layer} className={cx('vx-sheet-layer', dark && 'dark')}>
 				{(props.shadeCover ?? true) && <div className="vx-sheet-backdrop" onClick={props.onDismiss} />}
 				<div
 					ref={(el: any) => { panel.current = el; }}
 					className={cx('vx-sheet', detents.length && 'vx-sheet-detents', props.className)}
+					role={props.shadeCover === false ? undefined : 'dialog'}
+					aria-modal={props.shadeCover === false ? undefined : true}
 					style={{
 						...props.style,
 						...(detents.length

package/src/Slider.tsrx

@@ -22,14 +22,20 @@ export function Slider(props: SliderProps) @{
 	const ratio = Math.min(1, Math.max(0, (value - min) / (max - min)));
 	const width = measure.bounds?.width ?? 0;
 
-	// Stable ref identity — an inline ref closure re-fires ref(null)/ref(el)
-	// per render, which bounces useMeasure's setView and loops forever.
+	// Keep one ref identity so native measurement listeners stay attached to
+	// the same host across rerenders.
 	const host = useRef<any>(null);
 	const bindHost = useCallback((el: any) => {
 		host.current = el;
 		measure.bind(el);
 	}, []);
 
+	const trackHeight = 4;
+	const thumbSize = 20;
+	const trackTop = (28 - trackHeight) / 2;
+	const thumbTop = (28 - thumbSize) / 2;
+	const thumbLeft = Math.min(Math.max(ratio * width - thumbSize / 2, 0), Math.max(width - thumbSize, 0));
+
 	useEffect(() => {
 		applyNativeProps(host.current, props);
 	});
@@ -52,7 +58,7 @@ export function Slider(props: SliderProps) @{
 		}
 	});
 
-	<gridlayout
+	<absolutelayout
 		id={props.id}
 		className={cx('vx-slider', props.className)}
 		style={props.style}
@@ -60,12 +66,8 @@ export function Slider(props: SliderProps) @{
 		onPan={onPan}
 		ref={bindHost}
 	>
-		<flexboxlayout className="vx-slider-track" />
-		<flexboxlayout className="vx-slider-fill" horizontalAlignment="left" style={{ width: ratio * width }} />
-		<flexboxlayout
-			className="vx-slider-thumb"
-			horizontalAlignment="left"
-			style={{ marginLeft: Math.min(Math.max(ratio * width - 10, 0), Math.max(width - 20, 0)) }}
-		/>
-	</gridlayout>
+		<flexboxlayout className="vx-slider-track" style={{ width, translateY: trackTop }} />
+		<flexboxlayout className="vx-slider-fill" style={{ width: ratio * width, translateY: trackTop }} />
+		<flexboxlayout className="vx-slider-thumb" style={{ translateX: thumbLeft, translateY: thumbTop }} />
+	</absolutelayout>
 }

package/src/Text.tsrx

@@ -1,5 +1,6 @@
 /** @jsxImportSource @nativescript-community/octane */
 import { createContext, useContext } from 'octane';
+import { Application } from '@nativescript/core';
 import type { TextProps } from "./props";
 import { cx } from "./cx";
 import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props";
@@ -24,8 +25,43 @@ function TextScope(props: { children?: any }) {
 
 export function Text(props: TextProps) @{
 	const inText = useContext(InText);
+	const fontWeightValue = String(props.style?.fontWeight ?? '').toLowerCase();
+	const namedWeights: Record<string, number> = {
+		normal: 400,
+		bold: 700,
+		thin: 100,
+		'extra-light': 200,
+		light: 300,
+		medium: 500,
+		'semi-bold': 600,
+		'extra-bold': 800,
+		black: 900,
+	};
+
+	const fontWeight = /^\d+$/.test(fontWeightValue)
+		? Number(fontWeightValue)
+		: namedWeights[fontWeightValue];
+
+	const lineHeight = props.style?.lineHeight;
+	// UIFontDescriptor resolves variable fonts to the regular axis default on
+	// iOS. Set wght explicitly so CSS fontWeight selects the matching instance.
 	const textStyle = {
 		...props.style,
+		...((Application.ios || Application.android) &&
+		typeof lineHeight === 'number' &&
+		Number.isFinite(lineHeight) &&
+		lineHeight > 0 &&
+		props.style?.height == null &&
+		props.style?.minHeight == null
+			? { minHeight: lineHeight }
+			: {}),
+		...(Application.ios &&
+		props.style?.fontVariationSettings == null &&
+		fontWeight !== undefined &&
+		fontWeight >= 100 &&
+		fontWeight <= 900
+			? { fontVariationSettings: `'wght' ${fontWeight}` }
+			: {}),
 		// Clamped text must be allowed to shrink — the shared shrink:0 default
 		// would let the label overflow its row instead of truncating.
 		...(props.ellipsize || props.numberOfLines ? { flexShrink: 1 } : {}),

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"