chat-layout 1.2.0-6 → 1.2.0-7

package/index.mjs

@@ -3596,6 +3596,40 @@ const listStateListenerRegistry = typeof FinalizationRegistry === "function" ? n
 	if (list == null) return;
 	deleteListStateListener(list, token);
 }) : null;
+const listScrollMutations = /* @__PURE__ */ new WeakMap();
+const WRITE_LIST_SCROLL_STATE = Symbol("writeListScrollState");
+function normalizePosition(value) {
+	return typeof value === "number" && Number.isFinite(value) ? Math.trunc(value) : void 0;
+}
+function normalizeOffset$1(value) {
+	return Number.isFinite(value) ? value : 0;
+}
+function getListScrollMutationRecord(list) {
+	let record = listScrollMutations.get(list);
+	if (record == null) {
+		record = {
+			version: 0,
+			source: "internal"
+		};
+		listScrollMutations.set(list, record);
+	}
+	return record;
+}
+function markListScrollMutation(list, source) {
+	const record = getListScrollMutationRecord(list);
+	record.version += 1;
+	record.source = source;
+}
+function readListScrollMutation(list) {
+	const record = getListScrollMutationRecord(list);
+	return {
+		version: record.version,
+		source: record.source
+	};
+}
+function writeInternalListScrollState(list, state) {
+	list[WRITE_LIST_SCROLL_STATE](state, "internal");
+}
 function deleteListStateListener(list, token) {
 	const listeners = listStateListeners.get(list);
 	if (listeners == null) return;
@@ -3660,17 +3694,28 @@ function normalizeInsertAnimation(animation) {
 	const duration = normalizeInsertAnimationDuration(animation?.duration, animation != null);
 	if (duration == null) return;
 	const normalizedAnimation = { duration };
-	if (typeof animation?.distance === "number" && Number.isFinite(animation.distance)) normalizedAnimation.distance = Math.max(0, animation.distance);
 	if (animation?.autoFollow === true) normalizedAnimation.autoFollow = true;
 	return normalizedAnimation;
 }
 var ListState = class {
 	#items;
 	#pendingDeletes = /* @__PURE__ */ new Set();
+	#offset = 0;
+	#position;
 	/** Pixel offset from the anchored item edge. */
-	offset = 0;
+	get offset() {
+		return this.#offset;
+	}
+	set offset(value) {
+		this.#writeScrollState({ offset: normalizeOffset$1(value) }, "external");
+	}
 	/** Anchor item index, or `undefined` to use the renderer default. */
-	position;
+	get position() {
+		return this.#position;
+	}
+	set position(value) {
+		this.#writeScrollState({ position: normalizePosition(value) }, "external");
+	}
 	/** Items currently managed by the renderer. */
 	get items() {
 		return this.#items;
@@ -3700,7 +3745,7 @@ var ListState = class {
 		if (items.length === 0) return;
 		assertUniqueItemReferences(items, this.#items);
 		const normalizedAnimation = normalizeInsertAnimation(animation);
-		if (this.position != null) this.position += items.length;
+		if (this.position != null) this.#writeScrollState({ position: this.position + items.length }, "internal");
 		this.#items = items.concat(this.#items);
 		emitListStateChange(this, {
 			type: "unshift",
@@ -3772,12 +3817,13 @@ var ListState = class {
 		this.#pendingDeletes.delete(item);
 		if (index < 0) return;
 		this.#items.splice(index, 1);
-		if (this.#items.length === 0) {
-			this.position = void 0;
-			this.offset = 0;
-		} else if (this.position != null) {
-			if (this.position > index) this.position -= 1;
-			else if (this.position === index) this.position = Math.min(index, this.#items.length - 1);
+		if (this.#items.length === 0) this.#writeScrollState({
+			position: void 0,
+			offset: 0
+		}, "internal");
+		else if (this.position != null) {
+			if (this.position > index) this.#writeScrollState({ position: this.position - 1 }, "internal");
+			else if (this.position === index) this.#writeScrollState({ position: Math.min(index, this.#items.length - 1) }, "internal");
 		}
 		emitListStateChange(this, {
 			type: "delete-finalize",
@@ -3788,8 +3834,10 @@ var ListState = class {
 	* Sets the current anchor item and pixel offset.
 	*/
 	setAnchor(position, offset = 0) {
-		this.position = Number.isFinite(position) ? Math.trunc(position) : void 0;
-		this.offset = Number.isFinite(offset) ? offset : 0;
+		this.#writeScrollState({
+			position: normalizePosition(position),
+			offset: normalizeOffset$1(offset)
+		}, "external");
 	}
 	/**
 	* Replaces all items and clears scroll state.
@@ -3799,18 +3847,44 @@ var ListState = class {
 		assertUniqueItemReferences(nextItems);
 		this.#items = nextItems;
 		this.#pendingDeletes.clear();
-		this.offset = 0;
-		this.position = void 0;
+		this.#writeScrollState({
+			position: void 0,
+			offset: 0
+		}, "internal");
 		emitListStateChange(this, { type: "reset" });
 	}
 	/** Clears the current scroll anchor while keeping the items. */
 	resetScroll() {
-		this.offset = 0;
-		this.position = void 0;
+		this.#writeScrollState({
+			position: void 0,
+			offset: 0
+		}, "external");
 	}
 	/** Applies a relative pixel scroll delta. */
 	applyScroll(delta) {
-		this.offset += delta;
+		this.#writeScrollState({ offset: this.#offset + delta }, "external");
+	}
+	[WRITE_LIST_SCROLL_STATE](patch, source) {
+		this.#writeScrollState(patch, source);
+	}
+	#writeScrollState(patch, source) {
+		let changed = false;
+		if ("position" in patch) {
+			const nextPosition = normalizePosition(patch.position);
+			if (!Object.is(this.#position, nextPosition)) {
+				this.#position = nextPosition;
+				changed = true;
+			}
+		}
+		if ("offset" in patch) {
+			const nextOffset = normalizeOffset$1(patch.offset ?? 0);
+			if (!Object.is(this.#offset, nextOffset)) {
+				this.#offset = nextOffset;
+				changed = true;
+			}
+		}
+		if (!changed) return;
+		markListScrollMutation(this, source);
 	}
 };
 //#endregion
@@ -3875,11 +3949,15 @@ function memoRenderItemBy(keyOf, renderItem, options = {}) {
 }
 //#endregion
 //#region src/renderer/virtualized/base-animation.ts
+const CONTROLLED_STATE_OFFSET_EPSILON = 1e-9;
 function clamp$1(value, min, max) {
 	return Math.min(Math.max(value, min), max);
 }
 function sameState(state, position, offset) {
-	return Object.is(state.position, position) && Object.is(state.offset, offset);
+	if (!Object.is(state.position, position)) return false;
+	if (Object.is(state.offset, offset)) return true;
+	if (!Number.isFinite(state.offset) || !Number.isFinite(offset)) return false;
+	return Math.abs(state.offset - offset) <= CONTROLLED_STATE_OFFSET_EPSILON;
 }
 function resolveJumpSegmentIndex(anchor, direction, itemCount) {
 	if (itemCount <= 0) return;
@@ -3964,145 +4042,190 @@ function getNow() {
 //#region src/renderer/virtualized/frame-session.ts
 function prepareFrameSession(params) {
 	let solution = params.resolveVisibleWindow(params.now);
-	let viewportTranslateY = params.getViewportTranslateY(params.now);
-	params.captureVisibleItemSnapshot(solution, viewportTranslateY);
+	params.captureVisibleItemSnapshot(solution);
 	const requestSettleRedraw = params.pruneTransitionAnimations(solution.window, params.now);
 	if (requestSettleRedraw) {
 		solution = params.resolveVisibleWindow(params.now);
-		viewportTranslateY = params.getViewportTranslateY(params.now);
-		params.captureVisibleItemSnapshot(solution, viewportTranslateY);
+		params.captureVisibleItemSnapshot(solution);
 	}
 	return {
 		solution,
-		viewportTranslateY,
 		requestSettleRedraw
 	};
 }
 //#endregion
 //#region src/renderer/virtualized/jump-controller.ts
-var JumpController = class {
-	#confirmedAutoFollowTop = false;
-	#confirmedAutoFollowBottom = false;
-	#controlledState;
+var JumpController = class JumpController {
+	static TRANSITION_SETTLE_SNAP_DURATION = 120;
+	#canAutoFollowTop = false;
+	#canAutoFollowBottom = false;
+	#pendingAutoFollowRecomputeTop = true;
+	#pendingAutoFollowRecomputeBottom = true;
+	#pendingAutoFollowRecomputeReasonTop = "init";
+	#pendingAutoFollowRecomputeReasonBottom = "init";
+	#pendingTransitionSettleReconcile = false;
+	#lastArmedAutoFollowBoundary;
+	#lastObservedRenderedAutoFollowTop = false;
+	#lastObservedRenderedAutoFollowBottom = false;
+	#lastViewportWidth;
+	#lastHandledScrollMutationVersion;
 	#jumpAnimation;
-	#lastCommittedState;
-	#hasPendingListChange = false;
-	#pendingBoundaryJumpTop = false;
-	#pendingBoundaryJumpBottom = false;
+	#pendingPostJumpBoundary;
+	#pendingPostJumpBoundaryBlocked = false;
 	#options;
 	constructor(options) {
 		this.#options = options;
+		this.#lastHandledScrollMutationVersion = this.#options.readScrollMutation().version;
 	}
 	beforeFrame() {
-		const currentState = this.#options.readListState();
-		if (!this.#hasPendingListChange && this.#jumpAnimation == null && this.#lastCommittedState != null && !sameState(this.#lastCommittedState, currentState.position, currentState.offset)) this.#clearPendingBoundaryJumps();
-		this.#hasPendingListChange = false;
+		this.#handlePendingExternalScrollMutation();
+	}
+	noteViewportWidth(width) {
+		if (!Number.isFinite(width)) return;
+		if (this.#lastViewportWidth == null) {
+			this.#lastViewportWidth = width;
+			return;
+		}
+		if (Object.is(this.#lastViewportWidth, width)) return;
+		this.#lastViewportWidth = width;
+		this.#clearPendingPostJumpBoundary();
+		this.#clearPendingTransitionSettleReconcile();
+		this.#markAutoFollowRecompute(void 0, "viewport-width-change");
 	}
 	prepare(now) {
+		if (this.#handlePendingExternalScrollMutation()) return false;
 		const animation = this.#jumpAnimation;
 		if (animation == null) return false;
 		if (this.#options.getItemCount() === 0) {
 			this.#cancelJumpAnimation();
 			return false;
 		}
-		if (this.#controlledState != null && !sameState(this.#controlledState, this.#options.readListState().position, this.#options.readListState().offset)) {
-			this.#clearPendingBoundaryJumps();
-			this.#cancelJumpAnimation();
-			return false;
-		}
 		const progress = getProgress(animation.startTime, animation.duration, now);
 		const eased = progress >= 1 ? 1 : smoothstep(progress);
 		const anchor = getAnchorAtDistance(animation.path, animation.path.totalDistance * eased);
 		this.#options.applyAnchor(anchor);
 		animation.needsMoreFrames = progress < 1;
+		if (!animation.needsMoreFrames && this.#pendingPostJumpBoundary != null && !this.#pendingPostJumpBoundaryBlocked) this.#armAutoFollowBoundary(this.#pendingPostJumpBoundary, "jump-to-boundary-settle");
 		return animation.needsMoreFrames;
 	}
 	finishFrame(requestRedraw) {
 		const animation = this.#jumpAnimation;
 		if (animation == null) return requestRedraw;
-		if (animation.needsMoreFrames) {
-			this.#controlledState = this.#options.readListState();
-			return true;
-		}
+		if (animation.needsMoreFrames) return true;
+		const boundary = this.#pendingPostJumpBoundaryBlocked === true ? void 0 : this.#pendingPostJumpBoundary;
 		const onComplete = animation.onComplete;
 		this.#cancelJumpAnimation();
+		this.#clearPendingPostJumpBoundary();
+		if (boundary != null) this.#armAutoFollowBoundary(boundary, "jump-to-boundary-settle");
 		onComplete?.();
 		return requestRedraw || this.#jumpAnimation != null;
 	}
 	commit(state) {
-		this.#lastCommittedState = {
-			position: state.position,
-			offset: state.offset
-		};
+		this.#lastHandledScrollMutationVersion = this.#options.readScrollMutation().version;
 	}
 	jumpTo(index, options = {}) {
-		this.#clearPendingBoundaryJumps();
+		this.#clearPendingTransitionSettleReconcile();
+		this.#clearPendingPostJumpBoundary();
 		if (this.#options.getItemCount() === 0) {
 			this.#cancelJumpAnimation();
 			return;
 		}
-		this.#startJumpToIndex(index, options, { kind: "manual" });
+		this.#startJumpToIndex(index, options);
 	}
 	jumpToBoundary(boundary, options = {}) {
-		this.#clearPendingBoundaryJumps();
+		this.#clearPendingTransitionSettleReconcile();
+		this.#clearPendingPostJumpBoundary();
+		this.#armAutoFollowBoundary(boundary, "jump-to-boundary");
 		if (this.#options.getItemCount() === 0) {
 			this.#cancelJumpAnimation();
 			return;
 		}
-		this.#armBoundaryJump(boundary);
 		this.#startJumpToIndex(boundary === "bottom" ? this.#options.getItemCount() - 1 : 0, {
 			...options,
 			block: boundary === "bottom" ? "end" : "start"
-		}, {
-			kind: "boundary-jump",
-			boundary
 		});
 	}
-	syncAutoFollowCapabilities(capabilities) {
-		this.#confirmedAutoFollowTop = capabilities.top;
-		this.#confirmedAutoFollowBottom = capabilities.bottom;
-		this.#clearPendingBoundaryJumps();
-		return this.getEffectiveAutoFollowCapabilities();
+	recomputeAutoFollowCapabilities(capabilities) {
+		const previouslyObservedDualBoundary = this.#lastObservedRenderedAutoFollowTop && this.#lastObservedRenderedAutoFollowBottom;
+		if (capabilities.top && capabilities.bottom && !previouslyObservedDualBoundary) {
+			this.#setAutoFollowBoundary("top", true, "dual-boundary-promotion");
+			this.#setAutoFollowBoundary("bottom", true, "dual-boundary-promotion");
+		}
+		if (this.#pendingAutoFollowRecomputeTop) {
+			this.#setAutoFollowBoundary("top", capabilities.top, `strict-recompute:${this.#pendingAutoFollowRecomputeReasonTop}`);
+			this.#pendingAutoFollowRecomputeTop = false;
+		}
+		if (this.#pendingAutoFollowRecomputeBottom) {
+			this.#setAutoFollowBoundary("bottom", capabilities.bottom, `strict-recompute:${this.#pendingAutoFollowRecomputeReasonBottom}`);
+			this.#pendingAutoFollowRecomputeBottom = false;
+		}
+		this.#syncLastArmedBoundaryFromLatchedState();
+		if (this.#pendingTransitionSettleReconcile) {
+			this.#reconcileLatchedAutoFollowAfterTransitionSettle(capabilities);
+			this.#pendingTransitionSettleReconcile = false;
+		}
+		this.#lastObservedRenderedAutoFollowTop = capabilities.top;
+		this.#lastObservedRenderedAutoFollowBottom = capabilities.bottom;
+		return this.getAutoFollowCapabilities();
 	}
-	getEffectiveAutoFollowCapabilities() {
+	getAutoFollowCapabilities() {
 		return {
-			top: this.#hasEffectiveAutoFollowCapability("top"),
-			bottom: this.#hasEffectiveAutoFollowCapability("bottom")
+			top: this.#canAutoFollowTop,
+			bottom: this.#canAutoFollowBottom
 		};
 	}
+	reconcileAutoFollowAfterTransitionSettle() {
+		this.#pendingTransitionSettleReconcile = true;
+	}
 	handleListStateChange(change) {
-		this.#hasPendingListChange = true;
+		switch (change.type) {
+			case "reset":
+			case "set":
+				this.#cancelJumpAnimation();
+				this.#clearPendingPostJumpBoundary();
+				this.#clearPendingTransitionSettleReconcile();
+				this.#syncScrollMutationVersion();
+				this.#markAutoFollowRecompute(void 0, change.type);
+				return change;
+			case "push":
+			case "unshift": return this.#handleBoundaryInsert(change);
+			default: return change;
+		}
+	}
+	#handleBoundaryInsert(change) {
+		if (this.#handlePendingExternalScrollMutation()) return change;
+		this.#clearPendingTransitionSettleReconcile();
 		const followChange = this.#resolveAutoFollowChange(change);
-		const canChainAutoFollow = followChange != null ? this.#shouldChainAutoFollow(followChange.boundary) : false;
-		const canCapabilityAutoFollow = followChange != null ? this.#shouldAutoFollowFromCapability(followChange.boundary, followChange.direction, followChange.count) : false;
-		if (followChange != null && (canChainAutoFollow || canCapabilityAutoFollow)) {
-			if (canChainAutoFollow) this.#rebaseJumpAnchorForBoundaryInsert(followChange.direction, followChange.count, getNow());
-			this.#startJumpToIndex(followChange.boundary === "bottom" ? this.#options.getItemCount() - 1 : 0, {
-				block: followChange.boundary === "bottom" ? "end" : "start",
-				duration: followChange.animation?.duration
-			}, {
-				kind: "auto-follow",
-				boundary: followChange.boundary
-			});
-			return {
-				...followChange.change,
-				animation: void 0
-			};
+		const boundary = change.type === "push" ? "bottom" : "top";
+		if (this.#pendingPostJumpBoundary === boundary) this.#pendingPostJumpBoundaryBlocked = true;
+		if (followChange == null || !this.#hasAutoFollowCapability(followChange.boundary)) return change;
+		if (this.#canAutoFollowTop && this.#canAutoFollowBottom && this.#lastObservedRenderedAutoFollowTop && this.#lastObservedRenderedAutoFollowBottom) {
+			const otherBoundary = followChange.boundary === "top" ? "bottom" : "top";
+			this.#setAutoFollowBoundary(otherBoundary, false, "boundary-insert-narrow");
+			this.#lastArmedAutoFollowBoundary = followChange.boundary;
 		}
+		this.#clearPendingPostJumpBoundary();
+		this.#materializeAnimatedAnchor(getNow(), followChange.direction, followChange.count);
+		this.#startJumpToIndex(followChange.boundary === "bottom" ? this.#options.getItemCount() - 1 : 0, {
+			block: followChange.boundary === "bottom" ? "end" : "start",
+			duration: followChange.animation?.duration
+		});
 		return change;
 	}
 	#cancelJumpAnimation() {
 		this.#jumpAnimation = void 0;
-		this.#controlledState = void 0;
 	}
-	#startJumpToIndex(index, options, source) {
+	#startJumpToIndex(index, options) {
 		const targetIndex = this.#options.clampItemIndex(index);
-		const currentState = this.#options.normalizeListState(this.#options.readListState());
 		const targetBlock = options.block ?? this.#options.getDefaultJumpBlock();
+		const settleBoundary = this.#resolveBoundaryLatchTarget(targetIndex, targetBlock);
+		this.#materializeAnimatedAnchor(getNow());
+		const currentState = this.#options.normalizeListState(this.#options.readListState());
 		const targetAnchor = this.#options.getTargetAnchor(targetIndex, targetBlock);
 		if (!(options.animated ?? true)) {
 			this.#cancelJumpAnimation();
 			this.#options.applyAnchor(targetAnchor);
+			if (settleBoundary != null) this.#armAutoFollowBoundary(settleBoundary, "jump-to-boundary-instant");
 			options.onComplete?.();
 			return;
 		}
@@ -4110,6 +4233,7 @@ var JumpController = class {
 		if (!Number.isFinite(startAnchor)) {
 			this.#cancelJumpAnimation();
 			this.#options.applyAnchor(targetAnchor);
+			if (settleBoundary != null) this.#armAutoFollowBoundary(settleBoundary, "jump-to-boundary-instant");
 			options.onComplete?.();
 			return;
 		}
@@ -4118,18 +4242,27 @@ var JumpController = class {
 		if (duration <= 0 || path.totalDistance <= Number.EPSILON) {
 			this.#cancelJumpAnimation();
 			this.#options.applyAnchor(targetAnchor);
+			if (settleBoundary != null) this.#armAutoFollowBoundary(settleBoundary, "jump-to-boundary-instant");
 			options.onComplete?.();
 			return;
 		}
+		if (settleBoundary != null) {
+			this.#pendingPostJumpBoundary = settleBoundary;
+			this.#pendingPostJumpBoundaryBlocked = false;
+		}
 		this.#jumpAnimation = {
 			path,
 			startTime: getNow(),
 			duration,
 			needsMoreFrames: true,
-			onComplete: options.onComplete,
-			source
+			onComplete: options.onComplete
 		};
-		this.#controlledState = this.#options.readListState();
+	}
+	#resolveBoundaryLatchTarget(index, block) {
+		const itemCount = this.#options.getItemCount();
+		if (itemCount <= 0) return;
+		if (index === 0 && block === "start") return "top";
+		if (index === itemCount - 1 && block === "end") return "bottom";
 	}
 	#resolveAutoFollowChange(change) {
 		switch (change.type) {
@@ -4144,45 +4277,95 @@ var JumpController = class {
 			default: return;
 		}
 	}
-	#shouldAutoFollowFromCapability(boundary, direction, count) {
-		return this.#hasEffectiveAutoFollowCapability(boundary) && this.#matchesLastCommittedStateAfterBoundaryInsert(direction, count);
+	#hasAutoFollowCapability(boundary) {
+		return boundary === "top" ? this.#canAutoFollowTop : this.#canAutoFollowBottom;
 	}
-	#shouldChainAutoFollow(boundary) {
-		return this.#readJumpBoundary() === boundary;
+	#armAutoFollowBoundary(boundary, reason) {
+		this.#setAutoFollowBoundary(boundary, true, reason);
+		this.#lastArmedAutoFollowBoundary = boundary;
+		if (boundary === "top") {
+			this.#pendingAutoFollowRecomputeTop = false;
+			return;
+		}
+		this.#pendingAutoFollowRecomputeBottom = false;
 	}
-	#rebaseJumpAnchorForBoundaryInsert(direction, count, now) {
+	#markAutoFollowRecompute(boundary, reason) {
+		if (boundary == null || boundary === "top") {
+			this.#pendingAutoFollowRecomputeTop = true;
+			this.#pendingAutoFollowRecomputeReasonTop = reason;
+		}
+		if (boundary == null || boundary === "bottom") {
+			this.#pendingAutoFollowRecomputeBottom = true;
+			this.#pendingAutoFollowRecomputeReasonBottom = reason;
+		}
+	}
+	#clearPendingPostJumpBoundary() {
+		this.#pendingPostJumpBoundary = void 0;
+		this.#pendingPostJumpBoundaryBlocked = false;
+	}
+	#clearPendingTransitionSettleReconcile() {
+		this.#pendingTransitionSettleReconcile = false;
+	}
+	#materializeAnimatedAnchor(now, direction, count = 0) {
 		const animation = this.#jumpAnimation;
 		if (animation == null) return;
 		const progress = getProgress(animation.startTime, animation.duration, now);
 		const eased = progress >= 1 ? 1 : smoothstep(progress);
-		const anchorAtNow = getAnchorAtDistance(animation.path, animation.path.totalDistance * eased);
+		let anchor = getAnchorAtDistance(animation.path, animation.path.totalDistance * eased);
+		if (direction === "unshift") anchor += count;
 		this.#cancelJumpAnimation();
-		this.#options.applyAnchor(direction === "unshift" ? anchorAtNow + count : anchorAtNow);
+		this.#options.applyAnchor(anchor);
 	}
-	#matchesLastCommittedStateAfterBoundaryInsert(direction, count) {
-		const state = this.#lastCommittedState;
-		if (state == null) return false;
-		return sameState({
-			position: direction === "unshift" && state.position != null ? state.position + count : state.position,
-			offset: state.offset
-		}, this.#options.readListState().position, this.#options.readListState().offset);
+	#setAutoFollowBoundary(boundary, value, reason) {
+		if (boundary === "top") this.#canAutoFollowTop = value;
+		else this.#canAutoFollowBottom = value;
+	}
+	#syncLastArmedBoundaryFromLatchedState() {
+		if (this.#canAutoFollowTop === this.#canAutoFollowBottom) return;
+		this.#lastArmedAutoFollowBoundary = this.#canAutoFollowTop ? "top" : "bottom";
+	}
+	#reconcileLatchedAutoFollowAfterTransitionSettle(capabilities) {
+		if (!this.#canAutoFollowTop && !this.#canAutoFollowBottom) return;
+		const preferredBoundary = this.#resolvePreferredLatchedBoundary(capabilities);
+		if (preferredBoundary == null) return;
+		const otherBoundary = preferredBoundary === "top" ? "bottom" : "top";
+		if (this.#hasAutoFollowCapability(otherBoundary)) this.#setAutoFollowBoundary(otherBoundary, false, "strict-recompute:set");
+		if (!this.#readCapabilityForBoundary(capabilities, preferredBoundary)) this.#startTransitionSettleSnap(preferredBoundary);
+		this.#syncLastArmedBoundaryFromLatchedState();
+	}
+	#resolvePreferredLatchedBoundary(capabilities) {
+		if (this.#canAutoFollowTop && this.#canAutoFollowBottom) {
+			if (capabilities.top && capabilities.bottom) return;
+			if (this.#lastArmedAutoFollowBoundary != null) return this.#lastArmedAutoFollowBoundary;
+			if (capabilities.top !== capabilities.bottom) return capabilities.top ? "top" : "bottom";
+			return "bottom";
+		}
+		if (this.#canAutoFollowTop) return "top";
+		if (this.#canAutoFollowBottom) return "bottom";
 	}
-	#hasEffectiveAutoFollowCapability(boundary) {
-		const animationBoundary = this.#readJumpBoundary();
-		return boundary === "top" ? this.#confirmedAutoFollowTop || this.#pendingBoundaryJumpTop || animationBoundary === "top" : this.#confirmedAutoFollowBottom || this.#pendingBoundaryJumpBottom || animationBoundary === "bottom";
+	#readCapabilityForBoundary(capabilities, boundary) {
+		return boundary === "top" ? capabilities.top : capabilities.bottom;
 	}
-	#readJumpBoundary() {
-		const source = this.#jumpAnimation?.source;
-		if (source == null || source.kind === "manual") return;
-		return source.boundary;
+	#startTransitionSettleSnap(boundary) {
+		if (this.#options.getItemCount() <= 0) return;
+		this.#startJumpToIndex(boundary === "bottom" ? this.#options.getItemCount() - 1 : 0, {
+			block: boundary === "bottom" ? "end" : "start",
+			duration: JumpController.TRANSITION_SETTLE_SNAP_DURATION
+		});
 	}
-	#armBoundaryJump(boundary) {
-		this.#pendingBoundaryJumpTop = boundary === "top";
-		this.#pendingBoundaryJumpBottom = boundary === "bottom";
+	#syncScrollMutationVersion() {
+		this.#lastHandledScrollMutationVersion = this.#options.readScrollMutation().version;
 	}
-	#clearPendingBoundaryJumps() {
-		this.#pendingBoundaryJumpTop = false;
-		this.#pendingBoundaryJumpBottom = false;
+	#handlePendingExternalScrollMutation() {
+		const mutation = this.#options.readScrollMutation();
+		if (mutation.version === this.#lastHandledScrollMutationVersion) return false;
+		this.#lastHandledScrollMutationVersion = mutation.version;
+		if (mutation.source !== "external") return false;
+		this.#cancelJumpAnimation();
+		this.#clearPendingPostJumpBoundary();
+		this.#clearPendingTransitionSettleReconcile();
+		this.#markAutoFollowRecompute(void 0, "manual-scroll");
+		return true;
 	}
 };
 //#endregion
@@ -4196,11 +4379,8 @@ var VisibilitySnapshot = class {
 	#previousSnapshotState;
 	#emptyState;
 	#coversShortList = false;
-	#topGap = 0;
-	#bottomGap = 0;
 	#atStartBoundary = false;
 	#atEndBoundary = false;
-	#currentExtraShift = 0;
 	#minDrawnIndex = Number.POSITIVE_INFINITY;
 	#maxDrawnIndex = Number.NEGATIVE_INFINITY;
 	#topBoundaryItem;
@@ -4208,18 +4388,12 @@ var VisibilitySnapshot = class {
 	get coversShortList() {
 		return this.#hasSnapshot && this.#snapshotState != null && this.#coversShortList;
 	}
-	get topGap() {
-		return this.#topGap;
-	}
-	get bottomGap() {
-		return this.#bottomGap;
+	get hasSnapshot() {
+		return this.#hasSnapshot;
 	}
 	get previousState() {
 		return this.#previousSnapshotState;
 	}
-	get currentExtraShift() {
-		return this.#currentExtraShift;
-	}
 	readDrawnIndexRange() {
 		if (!Number.isFinite(this.#minDrawnIndex) || !Number.isFinite(this.#maxDrawnIndex)) return;
 		return {
@@ -4230,7 +4404,7 @@ var VisibilitySnapshot = class {
 	readBoundaryItem(boundary) {
 		return boundary === "top" ? this.#topBoundaryItem : this.#bottomBoundaryItem;
 	}
-	capture(window, _resolutionPath, items, viewportHeight, snapshotState, extraShift, readVisibleRange) {
+	capture(window, _resolutionPath, items, viewport, snapshotState, readVisibleRange, readOuterVisibleRange) {
 		this.#previousVisibleItems = this.#visibleItems;
 		this.#previousSnapshotState = this.#snapshotState;
 		const nextDrawnItems = /* @__PURE__ */ new Set();
@@ -4245,18 +4419,23 @@ var VisibilitySnapshot = class {
 		let nextBottomBoundaryItem;
 		let nextTopBoundaryY = Number.POSITIVE_INFINITY;
 		let nextBottomBoundaryY = Number.NEGATIVE_INFINITY;
-		const effectiveShift = window.shift + extraShift;
+		const effectiveShift = window.shift;
+		const contentOriginY = viewport.contentTop;
 		for (const { idx, offset, height } of window.drawList) {
-			minVisibleIndex = Math.min(minVisibleIndex, idx);
-			maxVisibleIndex = Math.max(maxVisibleIndex, idx);
-			nextMinDrawnIndex = Math.min(nextMinDrawnIndex, idx);
-			nextMaxDrawnIndex = Math.max(nextMaxDrawnIndex, idx);
-			const y = offset + effectiveShift;
+			const y = offset + effectiveShift + contentOriginY;
 			topMostY = Math.min(topMostY, y);
 			bottomMostY = Math.max(bottomMostY, y + height);
 			const item = items[idx];
-			if (item != null) {
+			if (item != null && readOuterVisibleRange(y, height) != null) {
 				nextDrawnItems.add(item);
+				nextMinDrawnIndex = Math.min(nextMinDrawnIndex, idx);
+				nextMaxDrawnIndex = Math.max(nextMaxDrawnIndex, idx);
+			}
+			if (item == null) continue;
+			if (readVisibleRange(y, height) != null) {
+				minVisibleIndex = Math.min(minVisibleIndex, idx);
+				maxVisibleIndex = Math.max(maxVisibleIndex, idx);
+				nextVisibleItems.add(item);
 				if (y < nextTopBoundaryY) {
 					nextTopBoundaryY = y;
 					nextTopBoundaryItem = item;
@@ -4266,25 +4445,20 @@ var VisibilitySnapshot = class {
 					nextBottomBoundaryItem = item;
 				}
 			}
-			if (item == null || readVisibleRange(y, height) == null) continue;
-			nextVisibleItems.add(item);
 		}
 		this.#drawnItems = nextDrawnItems;
 		this.#visibleItems = nextVisibleItems;
 		this.#hasSnapshot = true;
 		this.#snapshotState = snapshotState;
-		this.#currentExtraShift = extraShift;
 		this.#minDrawnIndex = nextMinDrawnIndex;
 		this.#maxDrawnIndex = nextMaxDrawnIndex;
 		this.#topBoundaryItem = nextTopBoundaryItem;
 		this.#bottomBoundaryItem = nextBottomBoundaryItem;
 		this.#emptyState = items.length === 0 && window.drawList.length === 0 ? snapshotState : void 0;
 		const contentHeight = bottomMostY - topMostY;
-		this.#coversShortList = window.drawList.length > 0 && items.length > 0 && window.drawList.length === items.length && minVisibleIndex === 0 && maxVisibleIndex === items.length - 1 && topMostY >= -Number.EPSILON && bottomMostY <= viewportHeight + Number.EPSILON && contentHeight < viewportHeight - Number.EPSILON;
-		this.#topGap = this.#coversShortList ? Math.max(0, topMostY) : 0;
-		this.#bottomGap = this.#coversShortList ? Math.max(0, viewportHeight - bottomMostY) : 0;
-		this.#atStartBoundary = window.drawList.length > 0 && items.length > 0 && minVisibleIndex === 0 && topMostY >= -Number.EPSILON;
-		this.#atEndBoundary = window.drawList.length > 0 && items.length > 0 && maxVisibleIndex === items.length - 1 && bottomMostY <= viewportHeight + Number.EPSILON;
+		this.#coversShortList = window.drawList.length > 0 && items.length > 0 && window.drawList.length === items.length && minVisibleIndex === 0 && maxVisibleIndex === items.length - 1 && topMostY >= viewport.contentTop - 1e-6 && bottomMostY <= viewport.contentBottom + 1e-6 && contentHeight < viewport.contentHeight - 1e-6;
+		this.#atStartBoundary = window.drawList.length > 0 && items.length > 0 && minVisibleIndex === 0 && topMostY >= viewport.contentTop - 1e-6;
+		this.#atEndBoundary = window.drawList.length > 0 && items.length > 0 && maxVisibleIndex === items.length - 1 && bottomMostY <= viewport.contentBottom + 1e-6;
 	}
 	matchesCurrentState(position, offset) {
 		return this.#hasSnapshot && this.#snapshotState != null && sameState(this.#snapshotState, position, offset);
@@ -4324,11 +4498,8 @@ var VisibilitySnapshot = class {
 		this.#previousSnapshotState = void 0;
 		this.#emptyState = void 0;
 		this.#coversShortList = false;
-		this.#topGap = 0;
-		this.#bottomGap = 0;
 		this.#atStartBoundary = false;
 		this.#atEndBoundary = false;
-		this.#currentExtraShift = 0;
 		this.#minDrawnIndex = Number.POSITIVE_INFINITY;
 		this.#maxDrawnIndex = Number.NEGATIVE_INFINITY;
 		this.#topBoundaryItem = void 0;
@@ -4381,7 +4552,7 @@ var TransitionStore = class {
 		}));
 	}
 	findInvisible(snapshot) {
-		return [...this.#transitions.entries()].filter(([item, transition]) => !snapshot.tracks(item, transition.retention)).map(([item, transition]) => ({
+		return [...this.#transitions.entries()].filter(([item, transition]) => !snapshot.tracks(item, transition.retention) && !(transition.kind === "insert" && !snapshot.wasVisible(item))).map(([item, transition]) => ({
 			item,
 			transition
 		}));
@@ -4395,9 +4566,6 @@ var TransitionStore = class {
 };
 //#endregion
 //#region src/renderer/virtualized/transition-planner.ts
-function isFinitePositive(value) {
-	return Number.isFinite(value) && value > 0;
-}
 function normalizeDuration(duration) {
 	return Math.max(0, typeof duration === "number" && Number.isFinite(duration) ? duration : 0);
 }
@@ -4429,13 +4597,16 @@ function isIndexVisible(index, resolveVisibleWindow, readVisibleRange) {
 }
 function resolveAnimationEligibility(params) {
 	if (params.index < 0) return false;
-	if (params.snapshot.matchesCurrentState(params.position, params.offset)) return params.snapshot.isVisible(params.item);
-	return isIndexVisible(params.index, params.resolveVisibleWindow, params.readVisibleRange);
+	if (params.snapshot.matchesCurrentState(params.position, params.offset)) return params.snapshot.tracks(params.item, "drawn");
+	return isIndexVisible(params.index, params.resolveVisibleWindow, params.readOuterVisibleRange);
 }
-function resolveBoundaryInsertStrategy(direction, underflowAlign, coversShortListSnapshot) {
-	if (!coversShortListSnapshot) return "hard-cut";
-	if (direction === "push" && underflowAlign === "bottom" || direction === "unshift" && underflowAlign === "top") return "viewport-slide";
-	return "item-enter";
+function hasVisibleBoundaryInsertItems(direction, count, ctx) {
+	if (count <= 0) return false;
+	const start = direction === "push" ? ctx.items.length - count : 0;
+	const end = direction === "push" ? ctx.items.length : Math.min(count, ctx.items.length);
+	if (start < 0 || end <= start) return false;
+	const solution = ctx.resolveVisibleWindow();
+	return solution.window.drawList.some((entry) => entry.idx >= start && entry.idx < end && ctx.readOuterVisibleRange(entry.offset + solution.window.shift, entry.height) != null);
 }
 function sampleScalarAnimation(animation, now) {
 	return interpolate(animation.from, animation.to, animation.startTime, animation.duration, now);
@@ -4468,68 +4639,31 @@ function planExistingItemTransition(params) {
 			kind: "update",
 			layers,
 			height: createScalarAnimation(params.currentVisualState.height, params.nextHeight, params.now, params.duration),
-			retention: "visible"
+			retention: "drawn"
 		};
 	}
 	return {
 		kind: "delete",
 		layers,
 		height: createScalarAnimation(params.currentVisualState.height, 0, params.now, params.duration),
-		retention: "visible"
+		retention: "drawn"
 	};
 }
-function planViewportShift(params) {
-	if (!isFinitePositive(params.travel) || params.duration <= 0) return;
-	return createScalarAnimation(params.direction === "positive" ? params.currentTranslateY + params.travel : params.currentTranslateY - params.travel, 0, params.now, params.duration);
-}
-function planBoundaryInsert(params) {
-	switch (params.strategy) {
-		case "hard-cut": return;
-		case "item-enter": return planBoundaryInsertItems(params);
-		case "viewport-slide": return planBoundaryInsertViewportShift(params);
-	}
-}
 function planBoundaryInsertItems(params) {
 	const entries = [];
-	const signedDistance = params.direction === "push" ? 1 : -1;
 	for (const { item, node, height } of params.measuredItems) {
 		if (!Number.isFinite(height) || height < 0) return;
-		const resolvedDistance = typeof params.distance === "number" && Number.isFinite(params.distance) ? Math.max(0, params.distance) : Math.min(24, height);
 		entries.push({
 			item,
 			transition: {
 				kind: "insert",
-				layers: [createLayerAnimation(node, 0, 1, params.now, params.duration, signedDistance * resolvedDistance, 0)],
-				height: createScalarAnimation(height, height, params.now, params.duration),
+				layers: [createLayerAnimation(node, 0, 1, params.now, params.duration, 0, 0)],
+				height: createScalarAnimation(params.animateHeight ? 0 : height, height, params.now, params.duration),
 				retention: "drawn"
 			}
 		});
 	}
-	return entries.length === 0 ? void 0 : {
-		kind: "item-enter",
-		entries
-	};
-}
-function planBoundaryInsertViewportShift(params) {
-	let insertedHeight = 0;
-	for (const { height } of params.measuredItems) {
-		if (!Number.isFinite(height) || height <= 0) return;
-		insertedHeight += height;
-	}
-	if (!isFinitePositive(insertedHeight)) return;
-	const gap = params.direction === "push" ? params.snapshot.topGap : params.snapshot.bottomGap;
-	const travel = Math.min(insertedHeight, gap);
-	const animation = planViewportShift({
-		currentTranslateY: params.currentTranslateY,
-		travel,
-		direction: params.direction === "push" ? "positive" : "negative",
-		now: params.now,
-		duration: params.duration
-	});
-	return animation == null ? void 0 : {
-		kind: "viewport-slide",
-		animation
-	};
+	return entries.length === 0 ? void 0 : { entries };
 }
 function measureBoundaryInsertItems(direction, count, ctx) {
 	const start = direction === "push" ? ctx.items.length - count : 0;
@@ -4557,6 +4691,11 @@ function drawSampledLayers(sampled, y, adapter) {
 		if (alpha <= .001) continue;
 		adapter.graphics.save();
 		try {
+			if (sampled.kind === "insert") {
+				adapter.graphics.beginPath();
+				adapter.graphics.rect(0, y, adapter.graphics.canvas.clientWidth, sampled.slotHeight);
+				adapter.graphics.clip();
+			}
 			if (typeof adapter.graphics.globalAlpha === "number") adapter.graphics.globalAlpha *= alpha;
 			if (adapter.drawNode(layer.node, 0, y + layer.translateY)) result = true;
 		} finally {
@@ -4580,7 +4719,7 @@ function planUpdateTransition(prevItem, nextItem, duration, now, currentVisualSt
 			snapshot,
 			hasActiveTransition: store.has(prevItem),
 			resolveVisibleWindow: ctx.resolveVisibleWindow,
-			readVisibleRange: ctx.readVisibleRange
+			readOuterVisibleRange: ctx.readOuterVisibleRange
 		}),
 		now,
 		currentVisualState,
@@ -4601,27 +4740,26 @@ function planDeleteTransition(item, duration, now, currentVisualState, ctx, snap
 			snapshot,
 			hasActiveTransition: store.has(item),
 			resolveVisibleWindow: ctx.resolveVisibleWindow,
-			readVisibleRange: ctx.readVisibleRange
+			readOuterVisibleRange: ctx.readOuterVisibleRange
 		}),
 		now,
 		currentVisualState
 	});
 }
-function planBoundaryInsertTransition(direction, count, duration, distance, now, currentTranslateY, ctx, snapshot) {
+function planBoundaryInsertTransition(direction, count, duration, now, ctx, snapshot) {
 	const normalizedDuration = normalizeDuration(duration);
 	if (count <= 0 || normalizedDuration <= 0) return;
-	const strategy = snapshot.matchesBoundaryInsertState(direction, count, ctx.position, ctx.offset) ? resolveBoundaryInsertStrategy(direction, ctx.underflowAlign, true) : snapshot.matchesEmptyBoundaryInsertState(direction, count, ctx.position, ctx.offset) ? "item-enter" : "hard-cut";
-	if (strategy === "hard-cut") return;
+	const matchesBoundaryState = snapshot.matchesBoundaryInsertState(direction, count, ctx.position, ctx.offset);
+	const matchesFollowState = snapshot.matchesFollowBoundaryInsertState(direction, count, ctx.position, ctx.offset);
+	const matchesEmptyState = snapshot.matchesEmptyBoundaryInsertState(direction, count, ctx.position, ctx.offset);
+	if (!(matchesBoundaryState || matchesFollowState || matchesEmptyState || snapshot.hasSnapshot && hasVisibleBoundaryInsertItems(direction, count, ctx))) return;
+	const animateHeight = !(direction === "unshift" && matchesFollowState && !matchesBoundaryState && !matchesEmptyState);
 	const measuredItems = measureBoundaryInsertItems(direction, count, ctx);
 	if (measuredItems == null) return;
-	return planBoundaryInsert({
-		direction,
+	return planBoundaryInsertItems({
 		duration: normalizedDuration,
-		distance,
+		animateHeight,
 		now,
-		strategy,
-		snapshot,
-		currentTranslateY,
 		measuredItems
 	});
 }
@@ -4674,7 +4812,7 @@ function readCurrentVisualState(item, now, store, adapter) {
 		translateY: 0
 	};
 }
-function handleTransitionStateChange(store, snapshot, currentViewportTranslateY, change, ctx, lifecycle) {
+function handleTransitionStateChange(store, snapshot, change, ctx, lifecycle) {
 	switch (change.type) {
 		case "update": {
 			const now = getNow();
@@ -4682,10 +4820,10 @@ function handleTransitionStateChange(store, snapshot, currentViewportTranslateY,
 			const transition = planUpdateTransition(change.prevItem, change.nextItem, change.animation?.duration, now, currentVisualState, ctx, snapshot, store);
 			if (transition == null) {
 				store.delete(change.prevItem);
-				return {};
+				return;
 			}
 			store.replace(change.prevItem, change.nextItem, transition);
-			return {};
+			return;
 		}
 		case "delete": {
 			const now = getNow();
@@ -4694,28 +4832,32 @@ function handleTransitionStateChange(store, snapshot, currentViewportTranslateY,
 			if (transition == null) {
 				store.delete(change.item);
 				lifecycle.onDeleteComplete(change.item);
-				return {};
+				return;
 			}
 			store.set(change.item, transition);
-			return {};
+			return;
 		}
 		case "delete-finalize":
 			store.delete(change.item);
-			return {};
+			return;
 		case "unshift":
 		case "push": {
 			const now = getNow();
-			const plan = planBoundaryInsertTransition(change.type, change.count, change.animation?.duration, change.animation?.distance, now, currentViewportTranslateY, ctx, snapshot);
-			if (plan == null) return {};
-			if (plan.kind === "viewport-slide") return { viewportAnimation: plan.animation };
+			const plan = planBoundaryInsertTransition(change.type, change.count, change.animation?.duration, now, ctx, snapshot);
+			if (plan == null) return;
 			for (const entry of plan.entries) store.set(entry.item, entry.transition);
-			return {};
+			if (ctx.position == null && snapshot.coversShortList && (change.type === "push" && ctx.anchorMode === "bottom" || change.type === "unshift" && ctx.anchorMode === "top")) {
+				const boundary = change.type === "push" ? "bottom" : "top";
+				const boundaryItem = snapshot.readBoundaryItem(boundary);
+				if (boundaryItem != null) lifecycle.snapItemToViewportBoundary(boundaryItem, boundary);
+			}
+			return;
 		}
 		case "reset":
 		case "set":
 			store.reset();
 			snapshot.reset();
-			return {};
+			return;
 	}
 }
 //#endregion
@@ -4736,22 +4878,15 @@ function remapAnchorAfterDeletes(anchor, deletedIndices) {
 var TransitionController = class {
 	#store = new TransitionStore();
 	#snapshot = new VisibilitySnapshot();
-	#viewportTranslateAnimation;
-	captureVisibilitySnapshot(window, resolutionPath, items, viewportHeight, snapshotState, extraShift, readVisibleRange) {
-		this.#snapshot.capture(window, resolutionPath, items, viewportHeight, snapshotState, extraShift, readVisibleRange);
+	captureVisibilitySnapshot(window, resolutionPath, items, viewport, snapshotState, readVisibleRange, readOuterVisibleRange) {
+		this.#snapshot.capture(window, resolutionPath, items, viewport, snapshotState, readVisibleRange, readOuterVisibleRange);
 	}
 	pruneInvisible(ctx, lifecycle) {
 		return this.pruneInvisibleAt(getNow(), ctx, lifecycle);
 	}
 	prepare(now, lifecycle) {
 		this.settle(now, lifecycle);
-		this.#cleanupViewportTranslateAnimation(now);
-		const keepViewportAnimating = this.#viewportTranslateAnimation != null;
-		return this.#store.prepare(now) || keepViewportAnimating;
-	}
-	getViewportTranslateY(now) {
-		this.#cleanupViewportTranslateAnimation(now);
-		return this.#viewportTranslateAnimation == null ? 0 : sampleScalarAnimation(this.#viewportTranslateAnimation, now);
+		return this.#store.prepare(now);
 	}
 	canAutoFollowBoundaryInsert(direction, count, position, offset) {
 		return this.#snapshot.matchesFollowBoundaryInsertState(direction, count, position, offset);
@@ -4765,17 +4900,10 @@ var TransitionController = class {
 	handleListStateChange(change, ctx, lifecycle) {
 		const now = getNow();
 		this.settle(now, lifecycle);
-		const result = handleTransitionStateChange(this.#store, this.#snapshot, this.getViewportTranslateY(now), change, ctx, lifecycle);
-		if (change.type === "reset" || change.type === "set") {
-			this.#viewportTranslateAnimation = void 0;
-			return;
-		}
-		if (result.viewportAnimation != null) this.#viewportTranslateAnimation = result.viewportAnimation;
+		handleTransitionStateChange(this.#store, this.#snapshot, change, ctx, lifecycle);
 	}
 	settle(now, lifecycle) {
-		const changed = this.#settleTransitions(this.#store.findCompleted(now), now, lifecycle);
-		this.#cleanupViewportTranslateAnimation(now);
-		return changed;
+		return this.#settleTransitions(this.#store.findCompleted(now), now, lifecycle);
 	}
 	pruneInvisibleAt(now, ctx, lifecycle) {
 		const removals = this.#store.findInvisible(this.#snapshot);
@@ -4784,16 +4912,11 @@ var TransitionController = class {
 	reset() {
 		this.#store.reset();
 		this.#snapshot.reset();
-		this.#viewportTranslateAnimation = void 0;
-	}
-	#cleanupViewportTranslateAnimation(now) {
-		const animation = this.#viewportTranslateAnimation;
-		if (animation == null) return;
-		if (getProgress(animation.startTime, animation.duration, now) >= 1) this.#viewportTranslateAnimation = void 0;
 	}
 	#settleTransitions(removals, now, lifecycle, boundarySnap) {
 		if (removals.length === 0) return false;
 		const anchor = lifecycle.captureVisualAnchor(now);
+		const beforeState = lifecycle.readScrollState();
 		const completedDeleteIndices = [];
 		for (const { item, transition } of removals) {
 			if (transition.kind === "delete") {
@@ -4805,6 +4928,8 @@ var TransitionController = class {
 		}
 		if (anchor != null && Number.isFinite(anchor)) lifecycle.restoreVisualAnchor(remapAnchorAfterDeletes(anchor, completedDeleteIndices));
 		if (boundarySnap != null) lifecycle.snapItemToViewportBoundary(boundarySnap.item, boundarySnap.boundary);
+		const afterState = lifecycle.readScrollState();
+		if (!sameState(beforeState, afterState.position, afterState.offset)) lifecycle.onTransitionSettleScrollAdjusted();
 		return true;
 	}
 	#resolveNaturalBoundarySnap(removals, now, ctx, lifecycle) {
@@ -4816,7 +4941,7 @@ var TransitionController = class {
 			if (transition.kind !== "update" && transition.kind !== "delete") continue;
 			const index = lifecycle.readItemIndex(item);
 			if (index < 0 || !this.#snapshot.wasVisible(item)) return;
-			if (this.#isTransitionVisibleInState(index, previousState, now, this.#snapshot.currentExtraShift, ctx)) return;
+			if (this.#isTransitionVisibleInState(index, previousState, now, ctx)) return;
 			naturalIndices.push(index);
 		}
 		if (naturalIndices.length === 0) return;
@@ -4835,16 +4960,324 @@ var TransitionController = class {
 			};
 		}
 	}
-	#isTransitionVisibleInState(index, state, now, extraShift, ctx) {
+	#isTransitionVisibleInState(index, state, now, ctx) {
 		const solution = ctx.resolveVisibleWindowForState(state, now);
 		for (const entry of solution.window.drawList) {
 			if (entry.idx !== index) continue;
-			return ctx.readVisibleRange(entry.offset + solution.window.shift + extraShift, entry.height) != null;
+			return ctx.readOuterVisibleRange(entry.offset + solution.window.shift, entry.height) != null;
 		}
 		return false;
 	}
 };
 //#endregion
+//#region src/renderer/virtualized/solver.ts
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+function normalizeOffset(offset) {
+	return Number.isFinite(offset) ? offset : 0;
+}
+function normalizeListPadding(padding) {
+	return {
+		top: typeof padding?.top === "number" && Number.isFinite(padding.top) ? Math.max(0, padding.top) : 0,
+		bottom: typeof padding?.bottom === "number" && Number.isFinite(padding.bottom) ? Math.max(0, padding.bottom) : 0
+	};
+}
+function resolveListViewport(outerHeight, padding) {
+	const height = typeof outerHeight === "number" && Number.isFinite(outerHeight) ? Math.max(0, outerHeight) : 0;
+	const resolvedPadding = normalizeListPadding(padding);
+	const contentTop = resolvedPadding.top;
+	const contentBottom = Math.max(contentTop, height - resolvedPadding.bottom);
+	return {
+		outerHeight: height,
+		contentTop,
+		contentBottom,
+		contentHeight: contentBottom - contentTop,
+		outerContentTop: -contentTop,
+		outerContentBottom: height - contentTop
+	};
+}
+function resolveListLayoutOptions(options = {}) {
+	return {
+		anchorMode: options.anchorMode ?? "top",
+		underflowAlign: options.underflowAlign ?? "top",
+		padding: normalizeListPadding(options.padding)
+	};
+}
+function normalizeVisibleState(itemCount, state, layout) {
+	if (itemCount <= 0) return {
+		position: 0,
+		offset: 0
+	};
+	const position = state.position;
+	const fallbackPosition = layout.anchorMode === "top" ? 0 : itemCount - 1;
+	if (typeof position !== "number" || !Number.isFinite(position)) return {
+		position: fallbackPosition,
+		offset: normalizeOffset(state.offset)
+	};
+	return {
+		position: clamp(Math.trunc(position), 0, itemCount - 1),
+		offset: normalizeOffset(state.offset)
+	};
+}
+function resolveVisibleWindow(items, state, viewportHeight, resolveItem, layout) {
+	const viewport = typeof viewportHeight === "number" ? resolveListViewport(viewportHeight, layout.padding) : viewportHeight;
+	const contentHeight = viewport.contentHeight;
+	const normalizedState = normalizeVisibleState(items.length, state, layout);
+	const resolutionPath = /* @__PURE__ */ new Set();
+	const readResolvedItem = (item, idx) => {
+		resolutionPath.add(idx);
+		return resolveItem(item, idx);
+	};
+	if (items.length === 0) return {
+		normalizedState,
+		resolutionPath: [],
+		window: {
+			drawList: [],
+			shift: 0
+		}
+	};
+	if (layout.anchorMode === "top") {
+		let { position, offset } = normalizedState;
+		let drawLength = 0;
+		if (offset > 0) if (position === 0) offset = 0;
+		else {
+			for (let i = position - 1; i >= 0; i -= 1) {
+				const { height } = readResolvedItem(items[i], i);
+				position = i;
+				offset -= height;
+				if (offset <= 0) break;
+			}
+			if (position === 0 && offset > 0) offset = 0;
+		}
+		let y = offset;
+		const drawList = [];
+		for (let i = position; i < items.length; i += 1) {
+			const { value, height } = readResolvedItem(items[i], i);
+			if (y + height > 0) {
+				drawList.push({
+					idx: i,
+					value,
+					offset: y,
+					height
+				});
+				drawLength += height;
+			} else {
+				offset += height;
+				position = i + 1;
+			}
+			y += height;
+			if (y >= contentHeight) break;
+		}
+		let shift = 0;
+		if (y < contentHeight) {
+			if (drawList.length > 0 && drawList.at(-1)?.idx === items.length - 1 && !(drawList.at(-1)?.height > Number.EPSILON)) return finalizeVisibleWindowResult(items.length, viewport, layout, {
+				position,
+				offset
+			}, Array.from(resolutionPath), extendVisibleWindowToOuterBounds(items, {
+				drawList,
+				shift
+			}, viewport, readResolvedItem));
+			if (position === 0 && drawLength < contentHeight) {
+				shift = -offset;
+				offset = 0;
+			} else {
+				shift = contentHeight - y;
+				y = offset += shift;
+				let lastIdx = -1;
+				for (let i = position - 1; i >= 0; i -= 1) {
+					const { value, height } = readResolvedItem(items[i], i);
+					drawLength += height;
+					y -= height;
+					drawList.push({
+						idx: i,
+						value,
+						offset: y - shift,
+						height
+					});
+					lastIdx = i;
+					if (y < 0) break;
+				}
+				if (lastIdx === 0 && drawLength < contentHeight) {
+					shift = drawList.at(-1)?.offset == null ? 0 : -drawList.at(-1).offset;
+					position = 0;
+					offset = 0;
+				}
+			}
+		}
+		return finalizeVisibleWindowResult(items.length, viewport, layout, {
+			position,
+			offset
+		}, Array.from(resolutionPath), extendVisibleWindowToOuterBounds(items, {
+			drawList,
+			shift
+		}, viewport, readResolvedItem));
+	}
+	let { position, offset } = normalizedState;
+	let drawLength = 0;
+	if (offset < 0) if (position === items.length - 1) offset = 0;
+	else for (let i = position + 1; i < items.length; i += 1) {
+		const { height } = readResolvedItem(items[i], i);
+		position = i;
+		offset += height;
+		if (offset > 0) break;
+	}
+	let y = contentHeight + offset;
+	const drawList = [];
+	for (let i = position; i >= 0; i -= 1) {
+		const { value, height } = readResolvedItem(items[i], i);
+		y -= height;
+		if (y <= contentHeight) {
+			drawList.push({
+				idx: i,
+				value,
+				offset: y,
+				height
+			});
+			drawLength += height;
+		} else {
+			offset -= height;
+			position = i - 1;
+		}
+		if (y < 0) break;
+	}
+	let shift = 0;
+	if (y > 0) {
+		shift = -y;
+		if (drawLength < contentHeight) {
+			y = drawLength;
+			for (let i = position + 1; i < items.length; i += 1) {
+				const { value, height } = readResolvedItem(items[i], i);
+				drawList.push({
+					idx: i,
+					value,
+					offset: y - shift,
+					height
+				});
+				y = drawLength += height;
+				if (height > Number.EPSILON) position = i;
+				if (y >= contentHeight) break;
+			}
+			offset = drawLength < contentHeight ? 0 : drawLength - contentHeight;
+		} else offset = drawLength - contentHeight;
+	}
+	return finalizeVisibleWindowResult(items.length, viewport, layout, {
+		position,
+		offset
+	}, Array.from(resolutionPath), extendVisibleWindowToOuterBounds(items, {
+		drawList,
+		shift
+	}, viewport, readResolvedItem));
+}
+function finalizeVisibleWindowResult(itemCount, viewport, layout, normalizedState, resolutionPath, window) {
+	const viewportHeight = viewport.contentHeight;
+	if (window.drawList.length !== itemCount || itemCount <= 0) return {
+		normalizedState,
+		resolutionPath,
+		window
+	};
+	let minIndex = Number.POSITIVE_INFINITY;
+	let maxIndex = Number.NEGATIVE_INFINITY;
+	let minOffset = Number.POSITIVE_INFINITY;
+	let maxBottom = Number.NEGATIVE_INFINITY;
+	let hasDeferredSlots = false;
+	for (const entry of window.drawList) {
+		if (!(entry.height > Number.EPSILON)) hasDeferredSlots = true;
+		else {
+			minOffset = Math.min(minOffset, entry.offset);
+			maxBottom = Math.max(maxBottom, entry.offset + entry.height);
+		}
+		minIndex = Math.min(minIndex, entry.idx);
+		maxIndex = Math.max(maxIndex, entry.idx);
+	}
+	if (!Number.isFinite(minOffset) || !Number.isFinite(maxBottom)) return {
+		normalizedState,
+		resolutionPath,
+		window
+	};
+	const contentHeight = maxBottom - minOffset;
+	if (minIndex !== 0 || maxIndex !== itemCount - 1 || !(contentHeight < viewportHeight - Number.EPSILON)) return {
+		normalizedState,
+		resolutionPath,
+		window
+	};
+	const desiredTop = layout.underflowAlign === "bottom" ? viewportHeight - contentHeight : 0;
+	return {
+		normalizedState: hasDeferredSlots ? normalizedState : layout.anchorMode === "top" ? {
+			position: 0,
+			offset: 0
+		} : {
+			position: itemCount - 1,
+			offset: 0
+		},
+		resolutionPath,
+		window: {
+			drawList: window.drawList,
+			shift: desiredTop - minOffset
+		}
+	};
+}
+function extendVisibleWindowToOuterBounds(items, window, viewport, resolveItem) {
+	if (window.drawList.length === 0 || items.length === 0) return window;
+	const drawList = [...window.drawList];
+	const existingIndices = new Set(drawList.map((entry) => entry.idx));
+	let topEntry = drawList[0];
+	let bottomEntry = drawList[0];
+	for (const entry of drawList) {
+		if (entry.offset < topEntry.offset) topEntry = entry;
+		if (entry.offset + entry.height > bottomEntry.offset + bottomEntry.height) bottomEntry = entry;
+	}
+	let topIdx = topEntry.idx;
+	let topY = topEntry.offset + window.shift;
+	while (topIdx > 0) {
+		const prevIdx = topIdx - 1;
+		if (existingIndices.has(prevIdx)) {
+			const existing = drawList.find((entry) => entry.idx === prevIdx);
+			topIdx = prevIdx;
+			if (existing != null) topY = existing.offset + window.shift;
+			continue;
+		}
+		const { value, height } = resolveItem(items[prevIdx], prevIdx);
+		const prevY = topY - height;
+		if (prevY + height <= viewport.outerContentTop) break;
+		drawList.push({
+			idx: prevIdx,
+			value,
+			offset: prevY - window.shift,
+			height
+		});
+		existingIndices.add(prevIdx);
+		topIdx = prevIdx;
+		topY = prevY;
+	}
+	let bottomIdx = bottomEntry.idx;
+	let bottomY = bottomEntry.offset + window.shift + bottomEntry.height;
+	while (bottomIdx < items.length - 1) {
+		const nextIdx = bottomIdx + 1;
+		if (existingIndices.has(nextIdx)) {
+			const existing = drawList.find((entry) => entry.idx === nextIdx);
+			bottomIdx = nextIdx;
+			if (existing != null) bottomY = Math.max(bottomY, existing.offset + window.shift + existing.height);
+			continue;
+		}
+		const { value, height } = resolveItem(items[nextIdx], nextIdx);
+		if (bottomY >= viewport.outerContentBottom) break;
+		drawList.push({
+			idx: nextIdx,
+			value,
+			offset: bottomY - window.shift,
+			height
+		});
+		existingIndices.add(nextIdx);
+		bottomIdx = nextIdx;
+		bottomY += height;
+	}
+	return {
+		drawList,
+		shift: window.shift
+	};
+}
+//#endregion
 //#region src/renderer/virtualized/base.ts
 /**
 * Shared base class for virtualized list renderers.
@@ -4863,6 +5296,7 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 			jumpDurationPerPixel: VirtualizedRenderer.JUMP_DURATION_PER_PIXEL,
 			getItemCount: () => this.items.length,
 			readListState: this._readListState.bind(this),
+			readScrollMutation: () => readListScrollMutation(this.options.list),
 			normalizeListState: this._normalizeListState.bind(this),
 			readAnchor: (state) => this._readAnchor(state, this._getItemHeight.bind(this)),
 			applyAnchor: this._applyAnchor.bind(this),
@@ -4902,6 +5336,7 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 	/** Renders the current visible window. */
 	render(feedback) {
 		this.#jumpController.beforeFrame();
+		this.#jumpController.noteViewportWidth(this.graphics.canvas.clientWidth);
 		const now = getNow();
 		const keepAnimating = this._prepareRender(now);
 		const { clientWidth: viewportWidth, clientHeight: viewportHeight } = this.graphics.canvas;
@@ -4909,12 +5344,11 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 		const frame = prepareFrameSession({
 			now,
 			resolveVisibleWindow: (frameNow) => this._resolveVisibleWindow(frameNow),
-			getViewportTranslateY: (frameNow) => this.#transitionController.getViewportTranslateY(frameNow),
-			captureVisibleItemSnapshot: (solution, extraShift) => this._captureVisibleItemSnapshot(solution, extraShift),
+			captureVisibleItemSnapshot: (solution) => this._captureVisibleItemSnapshot(solution),
 			pruneTransitionAnimations: (window, frameNow) => this._pruneTransitionAnimations(window, frameNow)
 		});
-		const autoFollowCapabilities = this.#jumpController.syncAutoFollowCapabilities(this._readAutoFollowCapabilities(frame.solution.window, frame.viewportTranslateY));
-		const requestRedraw = this._renderVisibleWindow(frame.solution.window, feedback, frame.viewportTranslateY);
+		const autoFollowCapabilities = this.#jumpController.recomputeAutoFollowCapabilities(this._readAutoFollowCapabilities(frame.solution.window));
+		const requestRedraw = this._renderVisibleWindow(frame.solution.window, feedback);
 		if (feedback != null) {
 			feedback.canAutoFollowTop = autoFollowCapabilities.top;
 			feedback.canAutoFollowBottom = autoFollowCapabilities.bottom;
@@ -4925,17 +5359,17 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 	/** Hit-tests the current visible window. */
 	hittest(test) {
 		this.#jumpController.beforeFrame();
+		this.#jumpController.noteViewportWidth(this.graphics.canvas.clientWidth);
 		const now = getNow();
 		this.#transitionController.settle(now, this.#getTransitionLifecycleAdapter());
 		const frame = prepareFrameSession({
 			now,
 			resolveVisibleWindow: (frameNow) => this._resolveVisibleWindow(frameNow),
-			getViewportTranslateY: (frameNow) => this.#transitionController.getViewportTranslateY(frameNow),
-			captureVisibleItemSnapshot: (solution, extraShift) => this._captureVisibleItemSnapshot(solution, extraShift),
+			captureVisibleItemSnapshot: (solution) => this._captureVisibleItemSnapshot(solution),
 			pruneTransitionAnimations: (window, frameNow) => this._pruneTransitionAnimations(window, frameNow)
 		});
-		this.#jumpController.syncAutoFollowCapabilities(this._readAutoFollowCapabilities(frame.solution.window, frame.viewportTranslateY));
-		return this._hittestVisibleWindow(frame.solution.window, test, frame.viewportTranslateY);
+		this.#jumpController.recomputeAutoFollowCapabilities(this._readAutoFollowCapabilities(frame.solution.window));
+		return this._hittestVisibleWindow(frame.solution.window, test);
 	}
 	_readListState() {
 		return {
@@ -4947,8 +5381,7 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 		return this._resolveVisibleWindowForState(this._readListState(), now);
 	}
 	_commitListState(state) {
-		this.position = state.position;
-		this.offset = state.offset;
+		writeInternalListScrollState(this.options.list, state);
 		this.#jumpController.commit(state);
 	}
 	/**
@@ -4990,20 +5423,20 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 	}
 	_renderDrawList(list, shift, feedback) {
 		let result = false;
-		const viewportHeight = this.graphics.canvas.clientHeight;
+		const viewport = this._getViewportMetrics();
 		for (const { idx, value: item, offset, height } of list) {
-			const y = offset + shift;
+			const y = offset + shift + viewport.contentTop;
 			if (feedback != null) this._accumulateRenderFeedback(feedback, idx, y, height);
-			if (y + height < 0 || y > viewportHeight) continue;
+			if (y + height < 0 || y > viewport.outerHeight) continue;
 			if (item.draw(y)) result = true;
 		}
 		return result;
 	}
-	_renderVisibleWindow(window, feedback, extraShift = 0) {
+	_renderVisibleWindow(window, feedback) {
 		this._resetRenderFeedback(feedback);
-		return this._renderDrawList(window.drawList, window.shift + extraShift, feedback);
+		return this._renderDrawList(window.drawList, window.shift, feedback);
 	}
-	_readAutoFollowCapabilities(window, extraShift = 0) {
+	_readAutoFollowCapabilities(window) {
 		if (window.drawList.length === 0 || this.items.length === 0) return {
 			top: false,
 			bottom: false
@@ -5012,21 +5445,31 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 		let maxIndex = Number.NEGATIVE_INFINITY;
 		let topMostY = Number.POSITIVE_INFINITY;
 		let bottomMostY = Number.NEGATIVE_INFINITY;
-		const effectiveShift = window.shift + extraShift;
+		const viewport = this._getViewportMetrics();
 		for (const { idx, offset, height } of window.drawList) {
 			minIndex = Math.min(minIndex, idx);
 			maxIndex = Math.max(maxIndex, idx);
-			const y = offset + effectiveShift;
+			const y = offset + window.shift + viewport.contentTop;
 			topMostY = Math.min(topMostY, y);
 			bottomMostY = Math.max(bottomMostY, y + height);
 		}
-		const viewportHeight = this.graphics.canvas.clientHeight;
 		return {
-			top: minIndex === 0 && topMostY >= -Number.EPSILON,
-			bottom: maxIndex === this.items.length - 1 && bottomMostY <= viewportHeight + Number.EPSILON
+			top: minIndex === 0 && topMostY >= viewport.contentTop - 1e-6,
+			bottom: maxIndex === this.items.length - 1 && bottomMostY <= viewport.contentBottom + 1e-6
 		};
 	}
 	_readVisibleRange(top, height) {
+		if (!Number.isFinite(top) || !Number.isFinite(height) || height <= 0) return;
+		const viewport = this._getViewportMetrics();
+		const visibleTop = clamp$1(viewport.contentTop - top, 0, height);
+		const visibleBottom = clamp$1(viewport.contentBottom - top, 0, height);
+		if (visibleBottom <= visibleTop) return;
+		return {
+			top: visibleTop,
+			bottom: visibleBottom
+		};
+	}
+	_readOuterVisibleRange(top, height) {
 		if (!Number.isFinite(top) || !Number.isFinite(height) || height <= 0) return;
 		const viewportHeight = this.graphics.canvas.clientHeight;
 		const visibleTop = clamp$1(-top, 0, height);
@@ -5040,17 +5483,19 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 	_pruneTransitionAnimations(_window, now) {
 		return this.#transitionController.pruneInvisibleAt(now, this.#getTransitionPlanningAdapter(), this.#getTransitionLifecycleAdapter());
 	}
-	_hittestVisibleWindow(window, test, extraShift = 0) {
+	_hittestVisibleWindow(window, test) {
+		const viewport = this._getViewportMetrics();
 		for (const { value: item, offset, height } of window.drawList) {
-			const y = offset + window.shift + extraShift;
+			const y = offset + window.shift + viewport.contentTop;
 			if (test.y < y || test.y >= y + height) continue;
 			return item.hittest(test, y);
 		}
 		return false;
 	}
-	_captureVisibleItemSnapshot(solution, extraShift = 0) {
+	_captureVisibleItemSnapshot(solution) {
 		const normalizedState = this._normalizeListState(this._readListState());
-		this.#transitionController.captureVisibilitySnapshot(solution.window, solution.resolutionPath, this.items, this.graphics.canvas.clientHeight, normalizedState, extraShift, this._readVisibleRange.bind(this));
+		const viewport = this._getViewportMetrics();
+		this.#transitionController.captureVisibilitySnapshot(solution.window, solution.resolutionPath, this.items, viewport, normalizedState, this._readVisibleRange.bind(this), this._readOuterVisibleRange.bind(this));
 	}
 	_prepareRender(now) {
 		const keepTransitioning = this.#transitionController.prepare(now, this.#getTransitionLifecycleAdapter());
@@ -5090,6 +5535,9 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 	_resolveItem(item, _index, now) {
 		return this.#transitionController.resolveItem(item, now, this.#getTransitionRenderAdapter(), this.#getTransitionLifecycleAdapter());
 	}
+	_getViewportMetrics() {
+		return resolveListViewport(this.graphics.canvas.clientHeight, this._getLayoutOptions().padding);
+	}
 	#handleDeleteComplete(item) {
 		this.options.list.finalizeDelete(item);
 	}
@@ -5098,18 +5546,23 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 			onDeleteComplete: this.#handleDeleteComplete.bind(this),
 			captureVisualAnchor: this._readAnchorAt.bind(this),
 			restoreVisualAnchor: this._restoreAnchor.bind(this),
+			readScrollState: this._readListState.bind(this),
 			readItemIndex: (item) => this.items.indexOf(item),
-			snapItemToViewportBoundary: this.#snapItemToViewportBoundary.bind(this)
+			snapItemToViewportBoundary: this.#snapItemToViewportBoundary.bind(this),
+			onTransitionSettleScrollAdjusted: () => this.#jumpController.reconcileAutoFollowAfterTransitionSettle()
 		};
 	}
 	#getVirtualizedRuntime() {
+		const viewport = this._getViewportMetrics();
 		return {
 			items: this.items,
 			position: this.position,
 			offset: this.offset,
 			renderItem: this.options.renderItem,
 			measureNode: this.measureRootNode.bind(this),
+			viewport,
 			readVisibleRange: this._readVisibleRange.bind(this),
+			readOuterVisibleRange: this._readOuterVisibleRange.bind(this),
 			resolveVisibleWindow: () => this._resolveVisibleWindow(getNow()),
 			resolveVisibleWindowForState: (state, now) => this._resolveVisibleWindowForState(state, now)
 		};
@@ -5127,7 +5580,7 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 	#getTransitionPlanningAdapter() {
 		return {
 			...this.#getVirtualizedRuntime(),
-			underflowAlign: this._getLayoutOptions().underflowAlign
+			anchorMode: this._getLayoutOptions().anchorMode
 		};
 	}
 	#handleListStateChange(change) {
@@ -5204,212 +5657,6 @@ function getTargetAnchorForItem(itemCount, index, block, anchorMode, viewportHei
 	}
 }
 //#endregion
-//#region src/renderer/virtualized/solver.ts
-function clamp(value, min, max) {
-	return Math.min(Math.max(value, min), max);
-}
-function normalizeOffset(offset) {
-	return Number.isFinite(offset) ? offset : 0;
-}
-function resolveListLayoutOptions(options = {}) {
-	return {
-		anchorMode: options.anchorMode ?? "top",
-		underflowAlign: options.underflowAlign ?? "top"
-	};
-}
-function normalizeVisibleState(itemCount, state, layout) {
-	if (itemCount <= 0) return {
-		position: 0,
-		offset: 0
-	};
-	const position = state.position;
-	const fallbackPosition = layout.anchorMode === "top" ? 0 : itemCount - 1;
-	if (typeof position !== "number" || !Number.isFinite(position)) return {
-		position: fallbackPosition,
-		offset: normalizeOffset(state.offset)
-	};
-	return {
-		position: clamp(Math.trunc(position), 0, itemCount - 1),
-		offset: normalizeOffset(state.offset)
-	};
-}
-function resolveVisibleWindow(items, state, viewportHeight, resolveItem, layout) {
-	const normalizedState = normalizeVisibleState(items.length, state, layout);
-	const resolutionPath = /* @__PURE__ */ new Set();
-	const readResolvedItem = (item, idx) => {
-		resolutionPath.add(idx);
-		return resolveItem(item, idx);
-	};
-	if (items.length === 0) return {
-		normalizedState,
-		resolutionPath: [],
-		window: {
-			drawList: [],
-			shift: 0
-		}
-	};
-	if (layout.anchorMode === "top") {
-		let { position, offset } = normalizedState;
-		let drawLength = 0;
-		if (offset > 0) if (position === 0) offset = 0;
-		else {
-			for (let i = position - 1; i >= 0; i -= 1) {
-				const { height } = readResolvedItem(items[i], i);
-				position = i;
-				offset -= height;
-				if (offset <= 0) break;
-			}
-			if (position === 0 && offset > 0) offset = 0;
-		}
-		let y = offset;
-		const drawList = [];
-		for (let i = position; i < items.length; i += 1) {
-			const { value, height } = readResolvedItem(items[i], i);
-			if (y + height > 0) {
-				drawList.push({
-					idx: i,
-					value,
-					offset: y,
-					height
-				});
-				drawLength += height;
-			} else {
-				offset += height;
-				position = i + 1;
-			}
-			y += height;
-			if (y >= viewportHeight) break;
-		}
-		let shift = 0;
-		if (y < viewportHeight) if (position === 0 && drawLength < viewportHeight) {
-			shift = -offset;
-			offset = 0;
-		} else {
-			shift = viewportHeight - y;
-			y = offset += shift;
-			let lastIdx = -1;
-			for (let i = position - 1; i >= 0; i -= 1) {
-				const { value, height } = readResolvedItem(items[i], i);
-				drawLength += height;
-				y -= height;
-				drawList.push({
-					idx: i,
-					value,
-					offset: y - shift,
-					height
-				});
-				lastIdx = i;
-				if (y < 0) break;
-			}
-			if (lastIdx === 0 && drawLength < viewportHeight) {
-				shift = drawList.at(-1)?.offset == null ? 0 : -drawList.at(-1).offset;
-				position = 0;
-				offset = 0;
-			}
-		}
-		return finalizeVisibleWindowResult(items.length, viewportHeight, layout, {
-			position,
-			offset
-		}, Array.from(resolutionPath), {
-			drawList,
-			shift
-		});
-	}
-	let { position, offset } = normalizedState;
-	let drawLength = 0;
-	if (offset < 0) if (position === items.length - 1) offset = 0;
-	else for (let i = position + 1; i < items.length; i += 1) {
-		const { height } = readResolvedItem(items[i], i);
-		position = i;
-		offset += height;
-		if (offset > 0) break;
-	}
-	let y = viewportHeight + offset;
-	const drawList = [];
-	for (let i = position; i >= 0; i -= 1) {
-		const { value, height } = readResolvedItem(items[i], i);
-		y -= height;
-		if (y <= viewportHeight) {
-			drawList.push({
-				idx: i,
-				value,
-				offset: y,
-				height
-			});
-			drawLength += height;
-		} else {
-			offset -= height;
-			position = i - 1;
-		}
-		if (y < 0) break;
-	}
-	let shift = 0;
-	if (y > 0) {
-		shift = -y;
-		if (drawLength < viewportHeight) {
-			y = drawLength;
-			for (let i = position + 1; i < items.length; i += 1) {
-				const { value, height } = readResolvedItem(items[i], i);
-				drawList.push({
-					idx: i,
-					value,
-					offset: y - shift,
-					height
-				});
-				y = drawLength += height;
-				position = i;
-				if (y >= viewportHeight) break;
-			}
-			offset = drawLength < viewportHeight ? 0 : drawLength - viewportHeight;
-		} else offset = drawLength - viewportHeight;
-	}
-	return finalizeVisibleWindowResult(items.length, viewportHeight, layout, {
-		position,
-		offset
-	}, Array.from(resolutionPath), {
-		drawList,
-		shift
-	});
-}
-function finalizeVisibleWindowResult(itemCount, viewportHeight, layout, normalizedState, resolutionPath, window) {
-	if (window.drawList.length !== itemCount || itemCount <= 0) return {
-		normalizedState,
-		resolutionPath,
-		window
-	};
-	let minIndex = Number.POSITIVE_INFINITY;
-	let maxIndex = Number.NEGATIVE_INFINITY;
-	let minOffset = Number.POSITIVE_INFINITY;
-	let maxBottom = Number.NEGATIVE_INFINITY;
-	for (const entry of window.drawList) {
-		minIndex = Math.min(minIndex, entry.idx);
-		maxIndex = Math.max(maxIndex, entry.idx);
-		minOffset = Math.min(minOffset, entry.offset);
-		maxBottom = Math.max(maxBottom, entry.offset + entry.height);
-	}
-	const contentHeight = maxBottom - minOffset;
-	if (minIndex !== 0 || maxIndex !== itemCount - 1 || !(contentHeight < viewportHeight - Number.EPSILON)) return {
-		normalizedState,
-		resolutionPath,
-		window
-	};
-	const desiredTop = layout.underflowAlign === "bottom" ? viewportHeight - contentHeight : 0;
-	return {
-		normalizedState: layout.anchorMode === "top" ? {
-			position: 0,
-			offset: 0
-		} : {
-			position: itemCount - 1,
-			offset: 0
-		},
-		resolutionPath,
-		window: {
-			drawList: window.drawList,
-			shift: desiredTop - minOffset
-		}
-	};
-}
-//#endregion
 //#region src/renderer/virtualized/list.ts
 /**
 * Virtualized list renderer with configurable anchor semantics.
@@ -5420,11 +5667,24 @@ var ListRenderer = class extends VirtualizedRenderer {
 		super(graphics, options);
 		this.#layout = resolveListLayoutOptions(options);
 	}
+	get padding() {
+		return { ...this.#layout.padding };
+	}
+	set padding(value) {
+		const nextPadding = normalizeListPadding(value);
+		if (nextPadding.top === this.#layout.padding.top && nextPadding.bottom === this.#layout.padding.bottom) return;
+		const anchor = this._readAnchorAt(performance.now());
+		this.#layout = {
+			...this.#layout,
+			padding: nextPadding
+		};
+		if (anchor != null) this._restoreAnchor(anchor);
+	}
 	_getLayoutOptions() {
 		return this.#layout;
 	}
 	_resolveVisibleWindowForState(state, now) {
-		return resolveVisibleWindow(this.items, state, this.graphics.canvas.clientHeight, (item, idx) => this._resolveItem(item, idx, now), this.#layout);
+		return resolveVisibleWindow(this.items, state, resolveListViewport(this.graphics.canvas.clientHeight, this.#layout.padding), (item, idx) => this._resolveItem(item, idx, now), this.#layout);
 	}
 	_getDefaultJumpBlock() {
 		return this.#layout.anchorMode === "top" ? "start" : "end";
@@ -5441,7 +5701,7 @@ var ListRenderer = class extends VirtualizedRenderer {
 		this._commitListState(state);
 	}
 	_getTargetAnchor(index, block) {
-		return getTargetAnchorForItem(this.items.length, index, block, this.#layout.anchorMode, this.graphics.canvas.clientHeight, this._getItemHeight.bind(this));
+		return getTargetAnchorForItem(this.items.length, index, block, this.#layout.anchorMode, resolveListViewport(this.graphics.canvas.clientHeight, this.#layout.padding).contentHeight, this._getItemHeight.bind(this));
 	}
 };
 //#endregion