chat-layout 1.2.0-4 → 1.2.0-5

package/index.mjs

@@ -3649,6 +3649,21 @@ function normalizeUpdateAnimation(animation) {
 function normalizeDeleteAnimation(animation) {
 	return normalizeAnimationDuration(animation?.duration);
 }
+const DEFAULT_INSERT_ALL_ANIMATION_DURATION = 220;
+function normalizeInsertAnimationDuration(duration, hasAnimationOptions) {
+	if (!hasAnimationOptions) return;
+	const resolvedDuration = duration == null ? DEFAULT_INSERT_ALL_ANIMATION_DURATION : duration;
+	if (!Number.isFinite(resolvedDuration) || resolvedDuration <= 0) return;
+	return resolvedDuration;
+}
+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?.followIfAtBoundary === true) normalizedAnimation.followIfAtBoundary = true;
+	return normalizedAnimation;
+}
 var ListState = class {
 	#items;
 	#pendingDeletes = /* @__PURE__ */ new Set();
@@ -3681,14 +3696,16 @@ var ListState = class {
 		this.unshiftAll(items);
 	}
 	/** Prepends an array of items. */
-	unshiftAll(items) {
+	unshiftAll(items, animation) {
 		if (items.length === 0) return;
 		assertUniqueItemReferences(items, this.#items);
+		const normalizedAnimation = normalizeInsertAnimation(animation);
 		if (this.position != null) this.position += items.length;
 		this.#items = items.concat(this.#items);
 		emitListStateChange(this, {
 			type: "unshift",
-			count: items.length
+			count: items.length,
+			animation: normalizedAnimation
 		});
 	}
 	/** Appends one or more items. */
@@ -3696,13 +3713,15 @@ var ListState = class {
 		this.pushAll(items);
 	}
 	/** Appends an array of items. */
-	pushAll(items) {
+	pushAll(items, animation) {
 		if (items.length === 0) return;
 		assertUniqueItemReferences(items, this.#items);
+		const normalizedAnimation = normalizeInsertAnimation(animation);
 		this.#items.push(...items);
 		emitListStateChange(this, {
 			type: "push",
-			count: items.length
+			count: items.length,
+			animation: normalizedAnimation
 		});
 	}
 	/**
@@ -3856,287 +3875,826 @@ function memoRenderItemBy(keyOf, renderItem, options = {}) {
 }
 //#endregion
 //#region src/renderer/virtualized/base-animation.ts
-function clamp$3(value, min, max) {
+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);
 }
+function resolveJumpSegmentIndex(anchor, direction, itemCount) {
+	if (itemCount <= 0) return;
+	if (direction > 0) {
+		if (anchor >= itemCount) return;
+		return clamp$1(Math.floor(anchor), 0, itemCount - 1);
+	}
+	if (anchor <= 0) return;
+	return clamp$1(Math.ceil(anchor) - 1, 0, itemCount - 1);
+}
+function buildJumpPath(itemCount, readItemHeight, startAnchor, targetAnchor) {
+	const clampedStartAnchor = clamp$1(startAnchor, 0, itemCount);
+	const clampedTargetAnchor = clamp$1(targetAnchor, 0, itemCount);
+	if (itemCount <= 0 || !Number.isFinite(clampedStartAnchor) || !Number.isFinite(clampedTargetAnchor) || Math.abs(clampedTargetAnchor - clampedStartAnchor) <= Number.EPSILON) return {
+		startAnchor: clampedStartAnchor,
+		targetAnchor: clampedTargetAnchor,
+		totalDistance: 0,
+		segments: []
+	};
+	const direction = clampedTargetAnchor > clampedStartAnchor ? 1 : -1;
+	const segments = [];
+	let cursor = clampedStartAnchor;
+	let totalDistance = 0;
+	while (direction > 0 ? cursor < clampedTargetAnchor : cursor > clampedTargetAnchor) {
+		const index = resolveJumpSegmentIndex(cursor, direction, itemCount);
+		if (index == null) break;
+		const nextCursor = direction > 0 ? Math.min(clampedTargetAnchor, index + 1) : Math.max(clampedTargetAnchor, index);
+		if (Math.abs(nextCursor - cursor) <= Number.EPSILON) {
+			cursor = nextCursor;
+			continue;
+		}
+		const height = readItemHeight(index);
+		const distance = height > 0 ? Math.abs(nextCursor - cursor) * height : 0;
+		if (distance > 0) {
+			segments.push({
+				anchorStart: cursor,
+				anchorEnd: nextCursor,
+				distanceStart: totalDistance,
+				distanceEnd: totalDistance + distance
+			});
+			totalDistance += distance;
+		}
+		cursor = nextCursor;
+	}
+	return {
+		startAnchor: clampedStartAnchor,
+		targetAnchor: clampedTargetAnchor,
+		totalDistance,
+		segments
+	};
+}
 function smoothstep(value) {
 	return value * value * (3 - 2 * value);
 }
 function getProgress(startTime, duration, now) {
 	if (!(duration > 0)) return 1;
-	return clamp$3((now - startTime) / duration, 0, 1);
+	return clamp$1((now - startTime) / duration, 0, 1);
 }
 function interpolate(from, to, startTime, duration, now) {
 	const progress = getProgress(startTime, duration, now);
 	const eased = progress >= 1 ? 1 : smoothstep(progress);
 	return from + (to - from) * eased;
 }
+function getAnchorAtDistance(path, distance) {
+	if (!(path.totalDistance > 0) || path.segments.length === 0) return path.targetAnchor;
+	const clampedDistance = clamp$1(distance, 0, path.totalDistance);
+	if (clampedDistance <= 0) return path.startAnchor;
+	if (clampedDistance >= path.totalDistance) return path.targetAnchor;
+	for (const segment of path.segments) {
+		if (clampedDistance >= segment.distanceEnd) continue;
+		const span = segment.distanceEnd - segment.distanceStart;
+		if (!(span > 0)) continue;
+		const ratio = (clampedDistance - segment.distanceStart) / span;
+		return segment.anchorStart + (segment.anchorEnd - segment.anchorStart) * ratio;
+	}
+	return path.targetAnchor;
+}
 function getNow() {
 	return globalThis.performance?.now() ?? Date.now();
 }
 //#endregion
-//#region src/renderer/virtualized/base-types.ts
-/** Alpha values below this threshold are treated as fully transparent. */
-const ALPHA_EPSILON = .001;
+//#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);
+	const requestSettleRedraw = params.pruneTransitionAnimations(solution.window, params.now);
+	if (requestSettleRedraw) {
+		solution = params.resolveVisibleWindow(params.now);
+		viewportTranslateY = params.getViewportTranslateY(params.now);
+		params.captureVisibleItemSnapshot(solution, viewportTranslateY);
+	}
+	return {
+		solution,
+		viewportTranslateY,
+		requestSettleRedraw
+	};
+}
 //#endregion
-//#region src/renderer/virtualized/base-replacement.ts
-/**
-* Self-contained subsystem that manages item replacement (cross-fade + height)
-* animations for a VirtualizedRenderer.
-*/
-var ReplacementController = class {
-	#replacementAnimations = /* @__PURE__ */ new WeakMap();
-	#activeReplacementItems = /* @__PURE__ */ new Set();
-	#visibleItems = /* @__PURE__ */ new Set();
-	#hasVisibleItemSnapshot = false;
-	#visibleSnapshotState;
-	captureVisibleItemSnapshot(window, items, readVisibleRange, readListState) {
-		const nextVisibleItems = /* @__PURE__ */ new Set();
-		for (const { idx, offset, height } of window.drawList) {
-			if (readVisibleRange(offset + window.shift, height) == null) continue;
-			const item = items[idx];
-			if (item != null) nextVisibleItems.add(item);
+//#region src/renderer/virtualized/jump-controller.ts
+var JumpController = class {
+	#autoFollowLatch;
+	#controlledState;
+	#jumpAnimation;
+	#lastCommittedState;
+	#hasPendingListChange = false;
+	#options;
+	constructor(options) {
+		this.#options = options;
+	}
+	beforeFrame() {
+		const currentState = this.#options.readListState();
+		if (!this.#hasPendingListChange && this.#jumpAnimation == null && this.#lastCommittedState != null && !sameState(this.#lastCommittedState, currentState.position, currentState.offset)) this.#clearAutoFollowLatch();
+		this.#hasPendingListChange = false;
+	}
+	prepare(now) {
+		const animation = this.#jumpAnimation;
+		if (animation == null) return false;
+		if (this.#options.getItemCount() === 0) {
+			this.#cancelJumpAnimation();
+			return false;
 		}
-		this.#visibleItems = nextVisibleItems;
-		this.#hasVisibleItemSnapshot = true;
-		this.#visibleSnapshotState = readListState();
+		if (this.#controlledState != null && !sameState(this.#controlledState, this.#options.readListState().position, this.#options.readListState().offset)) {
+			this.#clearAutoFollowLatch();
+			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;
+		return animation.needsMoreFrames;
 	}
-	/**
-	* Removes animations for items that are no longer visible.
-	* Returns true if any animation was canceled or finalized.
-	*/
-	pruneInvisible(adapter) {
-		let changed = false;
-		for (const item of [...this.#activeReplacementItems]) {
-			if (this.#visibleItems.has(item)) continue;
-			const animation = this.#replacementAnimations.get(item);
-			this.#replacementAnimations.delete(item);
-			this.#activeReplacementItems.delete(item);
-			if (animation?.kind === "delete") adapter.onDeleteComplete(item);
-			changed = true;
+	finishFrame(requestRedraw) {
+		const animation = this.#jumpAnimation;
+		if (animation == null) return requestRedraw;
+		if (animation.needsMoreFrames) {
+			this.#controlledState = this.#options.readListState();
+			return true;
 		}
-		return changed;
+		const onComplete = animation.onComplete;
+		this.#cancelJumpAnimation();
+		onComplete?.();
+		return requestRedraw || this.#jumpAnimation != null;
 	}
-	/** Advance all active animations and return true if any are still running. */
-	prepare(now, adapter) {
-		let keepAnimating = false;
-		for (const item of [...this.#activeReplacementItems]) if (this.readAnimation(item, now, adapter) != null) keepAnimating = true;
-		return keepAnimating;
+	commit(state) {
+		this.#lastCommittedState = {
+			position: state.position,
+			offset: state.offset
+		};
 	}
-	/**
-	* Returns the active animation for an item, or undefined if none / already
-	* completed (and cleans up completed animations as a side effect).
-	*/
-	readAnimation(item, now, adapter) {
-		const animation = this.#replacementAnimations.get(item);
-		if (animation == null) return;
-		if (getProgress(animation.startTime, animation.duration, now) >= 1) {
-			this.#replacementAnimations.delete(item);
-			this.#activeReplacementItems.delete(item);
-			if (animation.kind === "delete") adapter?.onDeleteComplete(item);
+	jumpTo(index, options = {}) {
+		this.#clearAutoFollowLatch();
+		if (this.#options.getItemCount() === 0) {
+			this.#cancelJumpAnimation();
 			return;
 		}
-		return animation;
-	}
-	/** Returns the effective rendered height for an item, accounting for animations. */
-	getItemHeight(item, now, adapter) {
-		const replacement = this.readAnimation(item, now);
-		if (replacement != null) return this.#sampleReplacementHeight(replacement, now);
-		const node = adapter.renderItem(item);
-		return adapter.measureNode(node).height;
-	}
-	/** Resolves an item to its draw/hittest callbacks for the current frame. */
-	resolveItem(item, now, adapter) {
-		const replacement = this.readAnimation(item, now, adapter);
-		if (replacement == null) {
-			const node = adapter.renderItem(item);
+		this.#startJumpToIndex(index, options, { kind: "manual" });
+	}
+	handleListStateChange(change) {
+		this.#hasPendingListChange = true;
+		const followChange = this.#resolveAutoFollowChange(change);
+		const canChainAutoFollow = followChange != null ? this.#shouldChainAutoFollow(followChange.direction, followChange.animation) : false;
+		const canLatchAutoFollow = followChange != null ? this.#shouldLatchAutoFollow(followChange.direction, followChange.count, followChange.animation) : false;
+		const canSnapshotAutoFollow = followChange != null ? this.#shouldAutoFollowFromSnapshot(followChange.direction, followChange.count, followChange.animation) : false;
+		if (followChange != null && (canSnapshotAutoFollow || canChainAutoFollow || canLatchAutoFollow)) {
+			if (canChainAutoFollow) this.#rebaseJumpAnchorForBoundaryInsert(followChange.direction, followChange.count, getNow());
+			this.#autoFollowLatch = followChange.direction;
+			this.#startJumpToIndex(followChange.direction === "push" ? this.#options.getItemCount() - 1 : 0, {
+				block: followChange.direction === "push" ? "end" : "start",
+				duration: followChange.animation?.duration
+			}, {
+				kind: "auto-follow",
+				direction: followChange.direction
+			});
 			return {
-				value: {
-					draw: (y) => adapter.drawNode(node, 0, y),
-					hittest: (test, y) => node.hittest(adapter.getRootContext(), {
-						...test,
-						y: test.y - y
-					})
-				},
-				height: adapter.measureNode(node).height
+				...followChange.change,
+				animation: void 0
 			};
 		}
-		const slotHeight = this.#sampleReplacementHeight(replacement, now);
-		const layers = this.#readReplacementLayers(replacement, now, adapter.measureNode);
-		return {
-			value: {
-				draw: (y) => this.#drawReplacementLayers(layers, slotHeight, y, adapter),
-				hittest: () => false
-			},
-			height: slotHeight
-		};
+		return change;
 	}
-	handleListStateChange(change, ctx) {
-		switch (change.type) {
-			case "update":
-				this.handleUpdate(change.prevItem, change.nextItem, change.animation?.duration, ctx);
-				break;
-			case "delete":
-				this.handleDelete(change.item, change.animation?.duration, ctx);
-				break;
-			case "delete-finalize":
-				this.#replacementAnimations.delete(change.item);
-				this.#activeReplacementItems.delete(change.item);
-				break;
-			case "unshift":
-			case "push": break;
-			case "reset":
-			case "set":
-				this.reset();
-				break;
-		}
+	#cancelJumpAnimation() {
+		this.#jumpAnimation = void 0;
+		this.#controlledState = void 0;
 	}
-	handleUpdate(prevItem, nextItem, duration, ctx) {
-		const normalizedDuration = Math.max(0, typeof duration === "number" && Number.isFinite(duration) ? duration : 0);
-		const nextIndex = ctx.items.indexOf(nextItem);
-		if (normalizedDuration <= 0 || nextIndex < 0 || !this.#canAnimateUpdate(nextIndex, prevItem, ctx)) {
-			this.#replacementAnimations.delete(prevItem);
-			this.#activeReplacementItems.delete(prevItem);
+	#startJumpToIndex(index, options, source) {
+		const targetIndex = this.#options.clampItemIndex(index);
+		const currentState = this.#options.normalizeListState(this.#options.readListState());
+		const targetBlock = options.block ?? this.#options.getDefaultJumpBlock();
+		const targetAnchor = this.#options.getTargetAnchor(targetIndex, targetBlock);
+		if (!(options.animated ?? true)) {
+			this.#cancelJumpAnimation();
+			this.#options.applyAnchor(targetAnchor);
+			options.onComplete?.();
 			return;
 		}
-		const now = getNow();
-		const nextNode = ctx.renderItem(nextItem);
-		const nextHeight = ctx.measureNode(nextNode).height;
-		const animation = this.readAnimation(prevItem, now, ctx);
-		let currentNode;
-		let currentAlpha = 1;
-		let fromHeight;
-		if (animation == null || animation.incoming == null) {
-			currentNode = ctx.renderItem(prevItem);
-			fromHeight = ctx.measureNode(currentNode).height;
-		} else {
-			currentNode = animation.incoming.node;
-			currentAlpha = this.#sampleLayerAlpha(animation.incoming, now);
-			fromHeight = this.#sampleReplacementHeight(animation, now);
+		const startAnchor = this.#options.readAnchor(currentState);
+		if (!Number.isFinite(startAnchor)) {
+			this.#cancelJumpAnimation();
+			this.#options.applyAnchor(targetAnchor);
+			options.onComplete?.();
+			return;
 		}
-		const outgoing = currentAlpha > .001 ? this.#createLayer(currentNode, currentAlpha, 0, now, normalizedDuration) : void 0;
-		const incoming = this.#createLayer(nextNode, 0, 1, now, normalizedDuration);
-		this.#replacementAnimations.delete(prevItem);
-		this.#replacementAnimations.set(nextItem, {
-			kind: "update",
-			outgoing,
-			incoming,
-			fromHeight,
-			toHeight: nextHeight,
-			startTime: now,
-			duration: normalizedDuration
-		});
-		this.#activeReplacementItems.delete(prevItem);
-		this.#activeReplacementItems.add(nextItem);
-	}
-	handleDelete(item, duration, ctx) {
-		const normalizedDuration = Math.max(0, typeof duration === "number" && Number.isFinite(duration) ? duration : 0);
-		const index = ctx.items.indexOf(item);
-		if (normalizedDuration <= 0 || index < 0 || !this.#canAnimateUpdate(index, item, ctx)) {
-			this.#replacementAnimations.delete(item);
-			this.#activeReplacementItems.delete(item);
-			ctx.onDeleteComplete(item);
+		const path = buildJumpPath(this.#options.getItemCount(), this.#options.getItemHeight, startAnchor, targetAnchor);
+		const duration = clamp$1(options.duration ?? this.#options.minJumpDuration + path.totalDistance * this.#options.jumpDurationPerPixel, 0, this.#options.maxJumpDuration);
+		if (duration <= 0 || path.totalDistance <= Number.EPSILON) {
+			this.#cancelJumpAnimation();
+			this.#options.applyAnchor(targetAnchor);
+			options.onComplete?.();
 			return;
 		}
-		const now = getNow();
-		const animation = this.readAnimation(item, now, ctx);
-		let currentNode;
-		let currentAlpha = 1;
-		let fromHeight;
-		if (animation == null) {
-			currentNode = ctx.renderItem(item);
-			fromHeight = ctx.measureNode(currentNode).height;
-		} else if (animation.incoming != null) {
-			currentNode = animation.incoming.node;
-			currentAlpha = this.#sampleLayerAlpha(animation.incoming, now);
-			fromHeight = this.#sampleReplacementHeight(animation, now);
-		} else if (animation.outgoing != null) {
-			currentNode = animation.outgoing.node;
-			currentAlpha = this.#sampleLayerAlpha(animation.outgoing, now);
-			fromHeight = this.#sampleReplacementHeight(animation, now);
-		} else {
-			currentNode = ctx.renderItem(item);
-			fromHeight = ctx.measureNode(currentNode).height;
+		this.#jumpAnimation = {
+			path,
+			startTime: getNow(),
+			duration,
+			needsMoreFrames: true,
+			onComplete: options.onComplete,
+			source
+		};
+		this.#controlledState = this.#options.readListState();
+	}
+	#resolveAutoFollowChange(change) {
+		switch (change.type) {
+			case "push":
+			case "unshift": return change.animation?.followIfAtBoundary === true ? {
+				change,
+				direction: change.type,
+				count: change.count,
+				animation: change.animation
+			} : void 0;
+			default: return;
 		}
-		const outgoing = currentAlpha > .001 ? this.#createLayer(currentNode, currentAlpha, 0, now, normalizedDuration) : void 0;
-		this.#replacementAnimations.set(item, {
-			kind: "delete",
-			outgoing,
-			incoming: void 0,
-			fromHeight,
-			toHeight: 0,
-			startTime: now,
-			duration: normalizedDuration
-		});
-		this.#activeReplacementItems.add(item);
 	}
-	/** Clears all animation state (e.g., on list reset). */
+	#shouldAutoFollowFromSnapshot(direction, count, animation) {
+		if (animation?.followIfAtBoundary !== true) return false;
+		return this.#options.canAutoFollowBoundaryInsert(direction, count, this.#options.readListState().position, this.#options.readListState().offset);
+	}
+	#shouldLatchAutoFollow(direction, count, animation) {
+		if (animation?.followIfAtBoundary !== true) return false;
+		if (!this.#matchesLastCommittedStateAfterBoundaryInsert(direction, count)) {
+			this.#clearAutoFollowLatch();
+			return false;
+		}
+		return this.#autoFollowLatch === direction;
+	}
+	#shouldChainAutoFollow(direction, animation) {
+		if (animation?.followIfAtBoundary !== true) return false;
+		return this.#jumpAnimation?.source.kind === "auto-follow" ? this.#jumpAnimation.source.direction === direction : false;
+	}
+	#rebaseJumpAnchorForBoundaryInsert(direction, count, now) {
+		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);
+		this.#cancelJumpAnimation();
+		this.#options.applyAnchor(direction === "unshift" ? anchorAtNow + count : anchorAtNow);
+	}
+	#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);
+	}
+	#clearAutoFollowLatch() {
+		this.#autoFollowLatch = void 0;
+	}
+};
+//#endregion
+//#region src/renderer/virtualized/transition-snapshot.ts
+var VisibilitySnapshot = class {
+	#drawnItems = /* @__PURE__ */ new Set();
+	#visibleItems = /* @__PURE__ */ new Set();
+	#hasSnapshot = false;
+	#snapshotState;
+	#emptyState;
+	#coversShortList = false;
+	#topGap = 0;
+	#bottomGap = 0;
+	#atStartBoundary = false;
+	#atEndBoundary = false;
+	get coversShortList() {
+		return this.#hasSnapshot && this.#snapshotState != null && this.#coversShortList;
+	}
+	get topGap() {
+		return this.#topGap;
+	}
+	get bottomGap() {
+		return this.#bottomGap;
+	}
+	capture(window, _resolutionPath, items, viewportHeight, snapshotState, extraShift, readVisibleRange) {
+		const nextDrawnItems = /* @__PURE__ */ new Set();
+		const nextVisibleItems = /* @__PURE__ */ new Set();
+		let minVisibleIndex = Number.POSITIVE_INFINITY;
+		let maxVisibleIndex = Number.NEGATIVE_INFINITY;
+		let topMostY = Number.POSITIVE_INFINITY;
+		let bottomMostY = Number.NEGATIVE_INFINITY;
+		const effectiveShift = window.shift + extraShift;
+		for (const { idx, offset, height } of window.drawList) {
+			minVisibleIndex = Math.min(minVisibleIndex, idx);
+			maxVisibleIndex = Math.max(maxVisibleIndex, idx);
+			const y = offset + effectiveShift;
+			topMostY = Math.min(topMostY, y);
+			bottomMostY = Math.max(bottomMostY, y + height);
+			const item = items[idx];
+			if (item != null) nextDrawnItems.add(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.#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;
+	}
+	matchesCurrentState(position, offset) {
+		return this.#hasSnapshot && this.#snapshotState != null && sameState(this.#snapshotState, position, offset);
+	}
+	matchesBoundaryInsertState(direction, count, position, offset) {
+		if (!this.coversShortList || this.#snapshotState == null) return false;
+		return this.#matchesStateAfterBoundaryInsert(direction, count, position, offset);
+	}
+	matchesFollowBoundaryInsertState(direction, count, position, offset) {
+		if (!this.#hasSnapshot || this.#snapshotState == null) return false;
+		if (direction === "push" ? !this.#atEndBoundary : !this.#atStartBoundary) return false;
+		return this.#matchesStateAfterBoundaryInsert(direction, count, position, offset);
+	}
+	matchesEmptyBoundaryInsertState(direction, count, position, offset) {
+		const emptyState = this.#emptyState;
+		if (!this.#hasSnapshot || emptyState == null) return false;
+		return sameState({
+			position: direction === "unshift" && emptyState.position != null ? emptyState.position + count : emptyState.position,
+			offset: emptyState.offset
+		}, position, offset);
+	}
+	isVisible(item) {
+		return this.#visibleItems.has(item);
+	}
+	tracks(item, retention) {
+		return retention === "drawn" ? this.#drawnItems.has(item) : this.#visibleItems.has(item);
+	}
 	reset() {
-		this.#replacementAnimations = /* @__PURE__ */ new WeakMap();
-		this.#activeReplacementItems.clear();
+		this.#drawnItems.clear();
 		this.#visibleItems.clear();
-		this.#hasVisibleItemSnapshot = false;
-		this.#visibleSnapshotState = void 0;
+		this.#hasSnapshot = false;
+		this.#snapshotState = void 0;
+		this.#emptyState = void 0;
+		this.#coversShortList = false;
+		this.#topGap = 0;
+		this.#bottomGap = 0;
+		this.#atStartBoundary = false;
+		this.#atEndBoundary = false;
+	}
+	#matchesStateAfterBoundaryInsert(direction, count, position, offset) {
+		const snapshotState = this.#snapshotState;
+		if (snapshotState == null) return false;
+		return sameState({
+			position: direction === "unshift" && snapshotState.position != null ? snapshotState.position + count : snapshotState.position,
+			offset: snapshotState.offset
+		}, position, offset);
+	}
+};
+//#endregion
+//#region src/renderer/virtualized/transition-store.ts
+var TransitionStore = class {
+	#transitions = /* @__PURE__ */ new Map();
+	get size() {
+		return this.#transitions.size;
+	}
+	has(item) {
+		return this.#transitions.has(item);
+	}
+	set(item, transition) {
+		this.#transitions.set(item, transition);
+	}
+	replace(prevItem, nextItem, transition) {
+		this.#transitions.delete(prevItem);
+		this.#transitions.set(nextItem, transition);
+	}
+	delete(item) {
+		const transition = this.#transitions.get(item);
+		if (transition != null) this.#transitions.delete(item);
+		return transition;
+	}
+	readActive(item, now) {
+		const transition = this.#transitions.get(item);
+		if (transition == null) return;
+		return this.#isComplete(transition, now) ? void 0 : transition;
+	}
+	prepare(now) {
+		for (const transition of this.#transitions.values()) if (!this.#isComplete(transition, now)) return true;
+		return false;
+	}
+	findCompleted(now) {
+		return [...this.#transitions.entries()].filter(([, transition]) => this.#isComplete(transition, now)).map(([item, transition]) => ({
+			item,
+			transition
+		}));
+	}
+	findInvisible(snapshot) {
+		return [...this.#transitions.entries()].filter(([item, transition]) => !snapshot.tracks(item, transition.retention)).map(([item, transition]) => ({
+			item,
+			transition
+		}));
+	}
+	reset() {
+		this.#transitions.clear();
+	}
+	#isComplete(transition, now) {
+		return getProgress(transition.height.startTime, transition.height.duration, now) >= 1;
+	}
+};
+//#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);
+}
+function createScalarAnimation(from, to, startTime, duration) {
+	return {
+		from,
+		to,
+		startTime,
+		duration
+	};
+}
+function createLayerAnimation(node, fromAlpha, toAlpha, startTime, duration, fromTranslateY, toTranslateY) {
+	return {
+		node,
+		alpha: createScalarAnimation(fromAlpha, toAlpha, startTime, duration),
+		translateY: createScalarAnimation(fromTranslateY, toTranslateY, startTime, duration)
+	};
+}
+function findVisibleEntry(index, resolveVisibleWindow, readVisibleRange) {
+	if (index < 0) return;
+	const solution = resolveVisibleWindow();
+	for (const entry of solution.window.drawList) {
+		if (entry.idx !== index) continue;
+		if (readVisibleRange(entry.offset + solution.window.shift, entry.height) != null) return entry;
 	}
-	#createLayer(node, fromAlpha, toAlpha, startTime, duration) {
+}
+function isIndexVisible(index, resolveVisibleWindow, readVisibleRange) {
+	return findVisibleEntry(index, resolveVisibleWindow, readVisibleRange) != null;
+}
+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);
+}
+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 sampleScalarAnimation(animation, now) {
+	return interpolate(animation.from, animation.to, animation.startTime, animation.duration, now);
+}
+function sampleLayerAnimation(layer, now) {
+	const alpha = sampleScalarAnimation(layer.alpha, now);
+	if (alpha <= .001) return;
+	return {
+		alpha,
+		node: layer.node,
+		translateY: sampleScalarAnimation(layer.translateY, now)
+	};
+}
+function sampleTransition(transition, now) {
+	return {
+		kind: transition.kind,
+		slotHeight: sampleScalarAnimation(transition.height, now),
+		layers: transition.layers.map((layer) => sampleLayerAnimation(layer, now)).filter((layer) => layer != null),
+		retention: transition.retention
+	};
+}
+function planExistingItemTransition(params) {
+	if (!params.canAnimate || params.duration <= 0) return;
+	if (params.kind === "update" && !Number.isFinite(params.nextHeight)) return;
+	const layers = [];
+	if (params.currentVisualState.alpha > .001) layers.push(createLayerAnimation(params.currentVisualState.node, params.currentVisualState.alpha, 0, params.now, params.duration, params.currentVisualState.translateY, 0));
+	if (params.kind === "update") {
+		layers.push(createLayerAnimation(params.nextNode, 0, 1, params.now, params.duration, params.currentVisualState.translateY, 0));
 		return {
-			node,
-			fromAlpha,
-			toAlpha,
-			startTime,
-			duration
+			kind: "update",
+			layers,
+			height: createScalarAnimation(params.currentVisualState.height, params.nextHeight, params.now, params.duration),
+			retention: "visible"
 		};
 	}
-	#sampleLayerAlpha(layer, now) {
-		return interpolate(layer.fromAlpha, layer.toAlpha, layer.startTime, layer.duration, now);
+	return {
+		kind: "delete",
+		layers,
+		height: createScalarAnimation(params.currentVisualState.height, 0, params.now, params.duration),
+		retention: "visible"
+	};
+}
+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);
 	}
-	#sampleReplacementHeight(animation, now) {
-		return interpolate(animation.fromHeight, animation.toHeight, animation.startTime, animation.duration, now);
+}
+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),
+				retention: "drawn"
+			}
+		});
 	}
-	#readReplacementLayers(animation, now, measureNode) {
-		return [animation.outgoing, animation.incoming].filter((layer) => layer != null).map((layer) => ({
-			alpha: this.#sampleLayerAlpha(layer, now),
-			node: layer.node,
-			nodeHeight: measureNode(layer.node).height
-		})).filter((layer) => layer.alpha > ALPHA_EPSILON);
+	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
+	};
+}
+function measureBoundaryInsertItems(direction, count, ctx) {
+	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;
+	const measured = [];
+	for (let index = start; index < end; index += 1) {
+		const item = ctx.items[index];
+		if (item == null) continue;
+		const node = ctx.renderItem(item);
+		const height = ctx.measureNode(node).height;
+		measured.push({
+			item,
+			node,
+			height
+		});
 	}
-	#drawReplacementLayers(layers, slotHeight, y, adapter) {
-		if (slotHeight <= 0) return false;
-		let result = false;
-		const width = adapter.graphics.canvas.clientWidth;
-		for (const layer of layers) {
-			const alpha = clamp$3(layer.alpha, 0, 1);
-			if (alpha <= .001) continue;
-			adapter.graphics.save();
-			try {
-				adapter.graphics.beginPath?.();
-				adapter.graphics.rect?.(0, y, width, slotHeight);
-				adapter.graphics.clip?.();
-				if (typeof adapter.graphics.globalAlpha === "number") adapter.graphics.globalAlpha *= alpha;
-				const layerY = y + adapter.getAnimatedLayerOffset(slotHeight, layer.nodeHeight);
-				if (adapter.drawNode(layer.node, 0, layerY)) result = true;
-			} finally {
-				adapter.graphics.restore();
+	return measured;
+}
+function drawSampledLayers(sampled, y, adapter) {
+	if (sampled.slotHeight <= 0) return false;
+	let result = false;
+	for (const layer of sampled.layers) {
+		const alpha = clamp$1(layer.alpha, 0, 1);
+		if (alpha <= .001) continue;
+		adapter.graphics.save();
+		try {
+			if (typeof adapter.graphics.globalAlpha === "number") adapter.graphics.globalAlpha *= alpha;
+			if (adapter.drawNode(layer.node, 0, y + layer.translateY)) result = true;
+		} finally {
+			adapter.graphics.restore();
+		}
+	}
+	return result;
+}
+function planUpdateTransition(prevItem, nextItem, duration, now, currentVisualState, ctx, snapshot, store) {
+	const nextIndex = ctx.items.indexOf(nextItem);
+	const nextNode = ctx.renderItem(nextItem);
+	const nextHeight = ctx.measureNode(nextNode).height;
+	return planExistingItemTransition({
+		kind: "update",
+		duration: normalizeDuration(duration),
+		canAnimate: resolveAnimationEligibility({
+			index: nextIndex,
+			item: prevItem,
+			position: ctx.position,
+			offset: ctx.offset,
+			snapshot,
+			hasActiveTransition: store.has(prevItem),
+			resolveVisibleWindow: ctx.resolveVisibleWindow,
+			readVisibleRange: ctx.readVisibleRange
+		}),
+		now,
+		currentVisualState,
+		nextNode,
+		nextHeight
+	});
+}
+function planDeleteTransition(item, duration, now, currentVisualState, ctx, snapshot, store) {
+	const index = ctx.items.indexOf(item);
+	return planExistingItemTransition({
+		kind: "delete",
+		duration: normalizeDuration(duration),
+		canAnimate: resolveAnimationEligibility({
+			index,
+			item,
+			position: ctx.position,
+			offset: ctx.offset,
+			snapshot,
+			hasActiveTransition: store.has(item),
+			resolveVisibleWindow: ctx.resolveVisibleWindow,
+			readVisibleRange: ctx.readVisibleRange
+		}),
+		now,
+		currentVisualState
+	});
+}
+function planBoundaryInsertTransition(direction, count, duration, distance, now, currentTranslateY, 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 measuredItems = measureBoundaryInsertItems(direction, count, ctx);
+	if (measuredItems == null) return;
+	return planBoundaryInsert({
+		direction,
+		duration: normalizedDuration,
+		distance,
+		now,
+		strategy,
+		snapshot,
+		currentTranslateY,
+		measuredItems
+	});
+}
+function getTransitionedItemHeight(item, now, store, adapter) {
+	const transition = store.readActive(item, now);
+	if (transition != null) return sampleTransition(transition, now).slotHeight;
+	const node = adapter.renderItem(item);
+	return adapter.measureNode(node).height;
+}
+function resolveTransitionedItem(item, now, store, adapter, lifecycle) {
+	const transition = store.readActive(item, now);
+	if (transition == null) {
+		const node = adapter.renderItem(item);
+		return {
+			value: {
+				draw: (y) => adapter.drawNode(node, 0, y),
+				hittest: (test, y) => node.hittest(adapter.getRootContext(), {
+					...test,
+					y: test.y - y
+				})
+			},
+			height: adapter.measureNode(node).height
+		};
+	}
+	const sampled = sampleTransition(transition, now);
+	return {
+		value: {
+			draw: (y) => drawSampledLayers(sampled, y, adapter),
+			hittest: () => false
+		},
+		height: sampled.slotHeight
+	};
+}
+function readCurrentVisualState(item, now, store, adapter) {
+	const transition = store.readActive(item, now);
+	if (transition != null && transition.layers.length > 0) {
+		const primaryLayer = transition.layers[transition.layers.length - 1];
+		return {
+			node: primaryLayer.node,
+			alpha: sampleScalarAnimation(primaryLayer.alpha, now),
+			height: sampleScalarAnimation(transition.height, now),
+			translateY: sampleScalarAnimation(primaryLayer.translateY, now)
+		};
+	}
+	const node = adapter.renderItem(item);
+	return {
+		node,
+		alpha: 1,
+		height: adapter.measureNode(node).height,
+		translateY: 0
+	};
+}
+function handleTransitionStateChange(store, snapshot, currentViewportTranslateY, change, ctx, lifecycle) {
+	switch (change.type) {
+		case "update": {
+			const now = getNow();
+			const currentVisualState = readCurrentVisualState(change.prevItem, now, store, ctx);
+			const transition = planUpdateTransition(change.prevItem, change.nextItem, change.animation?.duration, now, currentVisualState, ctx, snapshot, store);
+			if (transition == null) {
+				store.delete(change.prevItem);
+				return {};
 			}
+			store.replace(change.prevItem, change.nextItem, transition);
+			return {};
 		}
-		return result;
+		case "delete": {
+			const now = getNow();
+			const currentVisualState = readCurrentVisualState(change.item, now, store, ctx);
+			const transition = planDeleteTransition(change.item, change.animation?.duration, now, currentVisualState, ctx, snapshot, store);
+			if (transition == null) {
+				store.delete(change.item);
+				lifecycle.onDeleteComplete(change.item);
+				return {};
+			}
+			store.set(change.item, transition);
+			return {};
+		}
+		case "delete-finalize":
+			store.delete(change.item);
+			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 };
+			for (const entry of plan.entries) store.set(entry.item, entry.transition);
+			return {};
+		}
+		case "reset":
+		case "set":
+			store.reset();
+			snapshot.reset();
+			return {};
+	}
+}
+//#endregion
+//#region src/renderer/virtualized/base-transition.ts
+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);
+	}
+	pruneInvisible(lifecycle) {
+		return this.pruneInvisibleAt(getNow(), 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);
+	}
+	canAutoFollowBoundaryInsert(direction, count, position, offset) {
+		return this.#snapshot.matchesFollowBoundaryInsertState(direction, count, position, offset);
 	}
-	#isIndexVisible(index, resolveVisibleWindow, readVisibleRange) {
-		if (index < 0) return false;
-		const solution = resolveVisibleWindow();
-		for (const entry of solution.window.drawList) {
-			if (entry.idx !== index) continue;
-			if (readVisibleRange(entry.offset + solution.window.shift, entry.height) != null) return true;
+	getItemHeight(item, now, adapter) {
+		return getTransitionedItemHeight(item, now, this.#store, adapter);
+	}
+	resolveItem(item, now, adapter, lifecycle) {
+		return resolveTransitionedItem(item, now, this.#store, adapter, lifecycle);
+	}
+	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;
 		}
-		return false;
+		if (result.viewportAnimation != null) this.#viewportTranslateAnimation = result.viewportAnimation;
 	}
-	#canAnimateUpdate(nextIndex, prevItem, ctx) {
-		if (nextIndex < 0) return false;
-		if (this.#hasVisibleItemSnapshot && this.#visibleSnapshotState != null && sameState(this.#visibleSnapshotState, ctx.position, ctx.offset)) return this.#visibleItems.has(prevItem) || this.#activeReplacementItems.has(prevItem);
-		return this.#isIndexVisible(nextIndex, ctx.resolveVisibleWindow, ctx.readVisibleRange);
+	settle(now, lifecycle) {
+		const changed = this.#settleTransitions(this.#store.findCompleted(now), now, lifecycle);
+		this.#cleanupViewportTranslateAnimation(now);
+		return changed;
+	}
+	pruneInvisibleAt(now, lifecycle) {
+		return this.#settleTransitions(this.#store.findInvisible(this.#snapshot), now, lifecycle);
+	}
+	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) {
+		if (removals.length === 0) return false;
+		const anchor = lifecycle.captureVisualAnchor(now);
+		for (const { item, transition } of removals) {
+			this.#store.delete(item);
+			if (transition.kind === "delete") lifecycle.onDeleteComplete(item);
+		}
+		if (anchor != null && Number.isFinite(anchor)) lifecycle.restoreVisualAnchor(anchor);
+		return true;
 	}
 };
 //#endregion
@@ -4147,12 +4705,26 @@ var ReplacementController = class {
 var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 	static MIN_JUMP_DURATION = 160;
 	static MAX_JUMP_DURATION = 420;
-	static JUMP_DURATION_PER_ITEM = 28;
-	#controlledState;
-	#jumpAnimation;
-	#replacementController = new ReplacementController();
+	static JUMP_DURATION_PER_PIXEL = .7;
+	#jumpController;
+	#transitionController = new TransitionController();
 	constructor(graphics, options) {
 		super(graphics, options);
+		this.#jumpController = new JumpController({
+			minJumpDuration: VirtualizedRenderer.MIN_JUMP_DURATION,
+			maxJumpDuration: VirtualizedRenderer.MAX_JUMP_DURATION,
+			jumpDurationPerPixel: VirtualizedRenderer.JUMP_DURATION_PER_PIXEL,
+			getItemCount: () => this.items.length,
+			readListState: this._readListState.bind(this),
+			normalizeListState: this._normalizeListState.bind(this),
+			readAnchor: (state) => this._readAnchor(state, this._getItemHeight.bind(this)),
+			applyAnchor: this._applyAnchor.bind(this),
+			getDefaultJumpBlock: this._getDefaultJumpBlock.bind(this),
+			getTargetAnchor: this._getTargetAnchor.bind(this),
+			clampItemIndex: this._clampItemIndex.bind(this),
+			getItemHeight: this._getItemHeight.bind(this),
+			canAutoFollowBoundaryInsert: (direction, count, position, offset) => this.#transitionController.canAutoFollowBoundaryInsert(direction, count, position, offset)
+		});
 		subscribeListState(options.list, this, (owner, change) => {
 			owner.#handleListStateChange(change);
 		});
@@ -4183,30 +4755,35 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 	}
 	/** Renders the current visible window. */
 	render(feedback) {
+		this.#jumpController.beforeFrame();
 		const now = getNow();
 		const keepAnimating = this._prepareRender(now);
 		const { clientWidth: viewportWidth, clientHeight: viewportHeight } = this.graphics.canvas;
 		this.graphics.clearRect(0, 0, viewportWidth, viewportHeight);
-		let solution = this._resolveVisibleWindow(now);
-		this._captureVisibleItemSnapshot(solution.window);
-		const requestSettleRedraw = this._pruneReplacementAnimations(solution.window);
-		if (requestSettleRedraw) {
-			solution = this._resolveVisibleWindow(now);
-			this._captureVisibleItemSnapshot(solution.window);
-		}
-		const requestRedraw = this._renderVisibleWindow(solution.window, feedback);
-		this._commitListState(solution.normalizedState);
-		return this._finishRender(keepAnimating || requestRedraw || requestSettleRedraw);
+		const frame = prepareFrameSession({
+			now,
+			resolveVisibleWindow: (frameNow) => this._resolveVisibleWindow(frameNow),
+			getViewportTranslateY: (frameNow) => this.#transitionController.getViewportTranslateY(frameNow),
+			captureVisibleItemSnapshot: (solution, extraShift) => this._captureVisibleItemSnapshot(solution, extraShift),
+			pruneTransitionAnimations: (window, frameNow) => this._pruneTransitionAnimations(window, frameNow)
+		});
+		const requestRedraw = this._renderVisibleWindow(frame.solution.window, feedback, frame.viewportTranslateY);
+		this._commitListState(frame.solution.normalizedState);
+		return this._finishRender(keepAnimating || requestRedraw || frame.requestSettleRedraw);
 	}
 	/** Hit-tests the current visible window. */
 	hittest(test) {
-		let solution = this._resolveVisibleWindow(getNow());
-		this._captureVisibleItemSnapshot(solution.window);
-		if (this._pruneReplacementAnimations(solution.window)) {
-			solution = this._resolveVisibleWindow(getNow());
-			this._captureVisibleItemSnapshot(solution.window);
-		}
-		return this._hittestVisibleWindow(solution.window, test);
+		this.#jumpController.beforeFrame();
+		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),
+			pruneTransitionAnimations: (window, frameNow) => this._pruneTransitionAnimations(window, frameNow)
+		});
+		return this._hittestVisibleWindow(frame.solution.window, test, frame.viewportTranslateY);
 	}
 	_readListState() {
 		return {
@@ -4214,51 +4791,19 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 			offset: this.offset
 		};
 	}
+	_resolveVisibleWindow(now) {
+		return this._resolveVisibleWindowForState(this._readListState(), now);
+	}
 	_commitListState(state) {
 		this.position = state.position;
 		this.offset = state.offset;
+		this.#jumpController.commit(state);
 	}
 	/**
 	* Scrolls the viewport to the requested item index.
 	*/
 	jumpTo(index, options = {}) {
-		if (this.items.length === 0) {
-			this.#cancelJumpAnimation();
-			return;
-		}
-		const targetIndex = this._clampItemIndex(index);
-		const currentState = this._normalizeListState(this._readListState());
-		const targetBlock = options.block ?? this._getDefaultJumpBlock();
-		const targetAnchor = this._getTargetAnchor(targetIndex, targetBlock);
-		if (!(options.animated ?? true)) {
-			this.#cancelJumpAnimation();
-			this._applyAnchor(targetAnchor);
-			options.onComplete?.();
-			return;
-		}
-		const startAnchor = this._readAnchor(currentState);
-		if (!Number.isFinite(startAnchor)) {
-			this.#cancelJumpAnimation();
-			this._applyAnchor(targetAnchor);
-			options.onComplete?.();
-			return;
-		}
-		const duration = clamp$3(options.duration ?? VirtualizedRenderer.MIN_JUMP_DURATION + Math.abs(targetAnchor - startAnchor) * VirtualizedRenderer.JUMP_DURATION_PER_ITEM, 0, VirtualizedRenderer.MAX_JUMP_DURATION);
-		if (duration <= 0 || Math.abs(targetAnchor - startAnchor) <= Number.EPSILON) {
-			this.#cancelJumpAnimation();
-			this._applyAnchor(targetAnchor);
-			options.onComplete?.();
-			return;
-		}
-		this.#jumpAnimation = {
-			startAnchor,
-			targetAnchor,
-			startTime: getNow(),
-			duration,
-			needsMoreFrames: true,
-			onComplete: options.onComplete
-		};
-		this.#controlledState = this._readListState();
+		this.#jumpController.jumpTo(index, options);
 	}
 	_resetRenderFeedback(feedback) {
 		if (feedback == null) return;
@@ -4288,178 +4833,231 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 		}
 		return result;
 	}
-	_renderVisibleWindow(window, feedback) {
+	_renderVisibleWindow(window, feedback, extraShift = 0) {
 		this._resetRenderFeedback(feedback);
-		return this._renderDrawList(window.drawList, window.shift, feedback);
+		return this._renderDrawList(window.drawList, window.shift + extraShift, feedback);
 	}
 	_readVisibleRange(top, height) {
 		if (!Number.isFinite(top) || !Number.isFinite(height) || height <= 0) return;
 		const viewportHeight = this.graphics.canvas.clientHeight;
-		const visibleTop = clamp$3(-top, 0, height);
-		const visibleBottom = clamp$3(viewportHeight - top, 0, height);
+		const visibleTop = clamp$1(-top, 0, height);
+		const visibleBottom = clamp$1(viewportHeight - top, 0, height);
 		if (visibleBottom <= visibleTop) return;
 		return {
 			top: visibleTop,
 			bottom: visibleBottom
 		};
 	}
-	_pruneReplacementAnimations(_window) {
-		return this.#replacementController.pruneInvisible({ onDeleteComplete: this.#handleDeleteComplete.bind(this) });
+	_pruneTransitionAnimations(_window, now) {
+		return this.#transitionController.pruneInvisibleAt(now, this.#getTransitionLifecycleAdapter());
 	}
-	_hittestVisibleWindow(window, test) {
+	_hittestVisibleWindow(window, test, extraShift = 0) {
 		for (const { value: item, offset, height } of window.drawList) {
-			const y = offset + window.shift;
+			const y = offset + window.shift + extraShift;
 			if (test.y < y || test.y >= y + height) continue;
 			return item.hittest(test, y);
 		}
 		return false;
 	}
-	_captureVisibleItemSnapshot(window) {
-		this.#replacementController.captureVisibleItemSnapshot(window, this.items, this._readVisibleRange.bind(this), this._readListState.bind(this));
+	_captureVisibleItemSnapshot(solution, extraShift = 0) {
+		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));
 	}
 	_prepareRender(now) {
-		const keepReplacing = this.#replacementController.prepare(now, { onDeleteComplete: this.#handleDeleteComplete.bind(this) });
-		const animation = this.#jumpAnimation;
-		if (animation == null) return keepReplacing;
-		if (this.items.length === 0) {
-			this.#cancelJumpAnimation();
-			return keepReplacing;
-		}
-		if (this.#controlledState != null && !sameState(this.#controlledState, this.position, this.offset)) {
-			this.#cancelJumpAnimation();
-			return keepReplacing;
-		}
-		const anchor = interpolate(animation.startAnchor, animation.targetAnchor, animation.startTime, animation.duration, now);
-		const progress = getProgress(animation.startTime, animation.duration, now);
-		this._applyAnchor(anchor);
-		animation.needsMoreFrames = progress < 1;
-		return keepReplacing || animation.needsMoreFrames;
+		const keepTransitioning = this.#transitionController.prepare(now, this.#getTransitionLifecycleAdapter());
+		const keepJumping = this.#jumpController.prepare(now);
+		return keepTransitioning || keepJumping;
 	}
 	_finishRender(requestRedraw) {
-		const animation = this.#jumpAnimation;
-		if (animation == null) return requestRedraw;
-		if (animation.needsMoreFrames) {
-			this.#controlledState = this._readListState();
-			return true;
-		}
-		const onComplete = animation.onComplete;
-		this.#cancelJumpAnimation();
-		onComplete?.();
-		return requestRedraw || this.#jumpAnimation != null;
+		return this.#jumpController.finishFrame(requestRedraw);
 	}
 	_clampItemIndex(index) {
-		return clamp$3(Number.isFinite(index) ? Math.trunc(index) : 0, 0, this.items.length - 1);
+		return clamp$1(Number.isFinite(index) ? Math.trunc(index) : 0, 0, this.items.length - 1);
 	}
 	_getItemHeight(index) {
+		return this._getItemHeightAt(index, getNow());
+	}
+	_getItemHeightAt(index, now) {
 		const item = this.items[index];
-		return this.#replacementController.getItemHeight(item, getNow(), {
+		return this.#transitionController.getItemHeight(item, now, {
 			renderItem: this.options.renderItem,
 			measureNode: this.measureRootNode.bind(this)
 		});
 	}
-	_resolveItem(item, _index, now) {
-		return this.#replacementController.resolveItem(item, now, this.#getReplacementRendererAdapter());
+	_readAnchorAt(now) {
+		if (this.items.length <= 0) return;
+		const state = this._normalizeListState(this._readListState());
+		return this._readAnchor(state, (index) => this._getItemHeightAt(index, now));
 	}
-	_getAnchorAtOffset(index, offset) {
-		if (this.items.length === 0) return 0;
-		let currentIndex = this._clampItemIndex(index);
-		let remaining = Number.isFinite(offset) ? offset : 0;
-		while (true) {
-			if (remaining < 0) {
-				if (currentIndex === 0) return 0;
-				currentIndex -= 1;
-				const height = this._getItemHeight(currentIndex);
-				if (height > 0) remaining += height;
-				continue;
-			}
-			const height = this._getItemHeight(currentIndex);
-			if (height > 0) {
-				if (remaining <= height) return currentIndex + remaining / height;
-				remaining -= height;
-			} else if (remaining === 0) return currentIndex;
-			if (currentIndex === this.items.length - 1) return this.items.length;
-			currentIndex += 1;
-		}
+	_restoreAnchor(anchor) {
+		if (!Number.isFinite(anchor) || this.items.length <= 0) return;
+		this._applyAnchor(anchor);
 	}
-	#cancelJumpAnimation() {
-		this.#jumpAnimation = void 0;
-		this.#controlledState = void 0;
+	_resolveItem(item, _index, now) {
+		return this.#transitionController.resolveItem(item, now, this.#getTransitionRenderAdapter(), this.#getTransitionLifecycleAdapter());
 	}
 	#handleDeleteComplete(item) {
 		this.options.list.finalizeDelete(item);
 	}
-	#getReplacementRendererAdapter() {
+	#getTransitionLifecycleAdapter() {
 		return {
-			renderItem: this.options.renderItem,
-			measureNode: this.measureRootNode.bind(this),
-			drawNode: this.drawRootNode.bind(this),
-			getRootContext: this.getRootContext.bind(this),
-			graphics: this.graphics,
-			getAnimatedLayerOffset: this._getAnimatedLayerOffset.bind(this),
-			onDeleteComplete: this.#handleDeleteComplete.bind(this)
+			onDeleteComplete: this.#handleDeleteComplete.bind(this),
+			captureVisualAnchor: this._readAnchorAt.bind(this),
+			restoreVisualAnchor: this._restoreAnchor.bind(this)
 		};
 	}
-	#getReplacementUpdateContext() {
+	#getVirtualizedRuntime() {
 		return {
-			...this.#getReplacementRendererAdapter(),
 			items: this.items,
 			position: this.position,
 			offset: this.offset,
-			readListState: this._readListState.bind(this),
+			renderItem: this.options.renderItem,
+			measureNode: this.measureRootNode.bind(this),
 			readVisibleRange: this._readVisibleRange.bind(this),
 			resolveVisibleWindow: () => this._resolveVisibleWindow(getNow())
 		};
 	}
+	#getTransitionRenderAdapter() {
+		const runtime = this.#getVirtualizedRuntime();
+		return {
+			renderItem: runtime.renderItem,
+			measureNode: runtime.measureNode,
+			drawNode: this.drawRootNode.bind(this),
+			getRootContext: this.getRootContext.bind(this),
+			graphics: this.graphics
+		};
+	}
+	#getTransitionPlanningAdapter() {
+		return {
+			...this.#getVirtualizedRuntime(),
+			underflowAlign: this._getLayoutOptions().underflowAlign
+		};
+	}
 	#handleListStateChange(change) {
-		this.#replacementController.handleListStateChange(change, this.#getReplacementUpdateContext());
+		const nextChange = this.#jumpController.handleListStateChange(change);
+		this.#transitionController.handleListStateChange(nextChange, this.#getTransitionPlanningAdapter(), this.#getTransitionLifecycleAdapter());
 	}
 };
 //#endregion
+//#region src/renderer/virtualized/anchor-model.ts
+function clampItemIndex(index, itemCount) {
+	if (itemCount <= 0) return 0;
+	return clamp$1(Number.isFinite(index) ? Math.trunc(index) : 0, 0, itemCount - 1);
+}
+function readAnchorFromState(itemCount, state, anchorMode, readItemHeight) {
+	if (itemCount <= 0) return 0;
+	const height = readItemHeight(state.position);
+	if (anchorMode === "top") return height > 0 ? state.position - state.offset / height : state.position;
+	return height > 0 ? state.position + 1 - state.offset / height : state.position + 1;
+}
+function applyAnchorToState(itemCount, anchor, anchorMode, readItemHeight) {
+	if (itemCount <= 0) return;
+	const clampedAnchor = clamp$1(anchor, 0, itemCount);
+	if (anchorMode === "top") {
+		const position = clamp$1(Math.floor(clampedAnchor), 0, itemCount - 1);
+		const height = readItemHeight(position);
+		const offset = height > 0 ? -(clampedAnchor - position) * height : 0;
+		return {
+			position,
+			offset: Object.is(offset, -0) ? 0 : offset
+		};
+	}
+	const position = clamp$1(Math.ceil(clampedAnchor) - 1, 0, itemCount - 1);
+	const height = readItemHeight(position);
+	const offset = height > 0 ? (position + 1 - clampedAnchor) * height : 0;
+	return {
+		position,
+		offset: Object.is(offset, -0) ? 0 : offset
+	};
+}
+function getAnchorAtOffset(itemCount, index, offset, readItemHeight) {
+	if (itemCount <= 0) return 0;
+	let currentIndex = clampItemIndex(index, itemCount);
+	let remaining = Number.isFinite(offset) ? offset : 0;
+	while (true) {
+		if (remaining < 0) {
+			if (currentIndex === 0) return 0;
+			currentIndex -= 1;
+			const height = readItemHeight(currentIndex);
+			if (height > 0) remaining += height;
+			continue;
+		}
+		const height = readItemHeight(currentIndex);
+		if (height > 0) {
+			if (remaining <= height) return currentIndex + remaining / height;
+			remaining -= height;
+		} else if (remaining === 0) return currentIndex;
+		if (currentIndex === itemCount - 1) return itemCount;
+		currentIndex += 1;
+	}
+}
+function getTargetAnchorForItem(itemCount, index, block, anchorMode, viewportHeight, readItemHeight) {
+	if (itemCount <= 0) return 0;
+	const targetIndex = clampItemIndex(index, itemCount);
+	const height = readItemHeight(targetIndex);
+	if (anchorMode === "top") switch (block) {
+		case "start": return getAnchorAtOffset(itemCount, targetIndex, 0, readItemHeight);
+		case "center": return getAnchorAtOffset(itemCount, targetIndex, height / 2 - viewportHeight / 2, readItemHeight);
+		case "end": return getAnchorAtOffset(itemCount, targetIndex, height - viewportHeight, readItemHeight);
+	}
+	switch (block) {
+		case "start": return getAnchorAtOffset(itemCount, targetIndex, viewportHeight, readItemHeight);
+		case "center": return getAnchorAtOffset(itemCount, targetIndex, height / 2 + viewportHeight / 2, readItemHeight);
+		case "end": return getAnchorAtOffset(itemCount, targetIndex, height, readItemHeight);
+	}
+}
+//#endregion
 //#region src/renderer/virtualized/solver.ts
-function clamp$2(value, min, max) {
+function clamp(value, min, max) {
 	return Math.min(Math.max(value, min), max);
 }
 function normalizeOffset(offset) {
 	return Number.isFinite(offset) ? offset : 0;
 }
-function normalizeVisibleState(itemCount, state, direction) {
+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 = direction === "forward" ? 0 : itemCount - 1;
+	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$2(Math.trunc(position), 0, itemCount - 1),
+		position: clamp(Math.trunc(position), 0, itemCount - 1),
 		offset: normalizeOffset(state.offset)
 	};
 }
-function normalizeTimelineState(itemCount, state) {
-	return normalizeVisibleState(itemCount, state, "forward");
-}
-function normalizeChatState(itemCount, state) {
-	return normalizeVisibleState(itemCount, state, "backward");
-}
-function resolveVisibleWindow(items, state, viewportHeight, resolveItem, direction) {
-	const normalizedState = normalizeVisibleState(items.length, state, direction);
+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 (direction === "forward") {
+	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 } = resolveItem(items[i], i);
+				const { height } = readResolvedItem(items[i], i);
 				position = i;
 				offset -= height;
 				if (offset <= 0) break;
@@ -4469,7 +5067,7 @@ function resolveVisibleWindow(items, state, viewportHeight, resolveItem, directi
 		let y = offset;
 		const drawList = [];
 		for (let i = position; i < items.length; i += 1) {
-			const { value, height } = resolveItem(items[i], i);
+			const { value, height } = readResolvedItem(items[i], i);
 			if (y + height > 0) {
 				drawList.push({
 					idx: i,
@@ -4494,7 +5092,7 @@ function resolveVisibleWindow(items, state, viewportHeight, resolveItem, directi
 			y = offset += shift;
 			let lastIdx = -1;
 			for (let i = position - 1; i >= 0; i -= 1) {
-				const { value, height } = resolveItem(items[i], i);
+				const { value, height } = readResolvedItem(items[i], i);
 				drawLength += height;
 				y -= height;
 				drawList.push({
@@ -4512,22 +5110,19 @@ function resolveVisibleWindow(items, state, viewportHeight, resolveItem, directi
 				offset = 0;
 			}
 		}
-		return {
-			normalizedState: {
-				position,
-				offset
-			},
-			window: {
-				drawList,
-				shift
-			}
-		};
+		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 } = resolveItem(items[i], i);
+		const { height } = readResolvedItem(items[i], i);
 		position = i;
 		offset += height;
 		if (offset > 0) break;
@@ -4535,7 +5130,7 @@ function resolveVisibleWindow(items, state, viewportHeight, resolveItem, directi
 	let y = viewportHeight + offset;
 	const drawList = [];
 	for (let i = position; i >= 0; i -= 1) {
-		const { value, height } = resolveItem(items[i], i);
+		const { value, height } = readResolvedItem(items[i], i);
 		y -= height;
 		if (y <= viewportHeight) {
 			drawList.push({
@@ -4557,7 +5152,7 @@ function resolveVisibleWindow(items, state, viewportHeight, resolveItem, directi
 		if (drawLength < viewportHeight) {
 			y = drawLength;
 			for (let i = position + 1; i < items.length; i += 1) {
-				const { value, height } = resolveItem(items[i], i);
+				const { value, height } = readResolvedItem(items[i], i);
 				drawList.push({
 					idx: i,
 					value,
@@ -4571,122 +5166,88 @@ function resolveVisibleWindow(items, state, viewportHeight, resolveItem, directi
 			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: {
-			position,
-			offset
+		normalizedState: layout.anchorMode === "top" ? {
+			position: 0,
+			offset: 0
+		} : {
+			position: itemCount - 1,
+			offset: 0
 		},
+		resolutionPath,
 		window: {
-			drawList,
-			shift
+			drawList: window.drawList,
+			shift: desiredTop - minOffset
 		}
 	};
 }
-function resolveTimelineVisibleWindow(items, state, viewportHeight, resolveItem) {
-	return resolveVisibleWindow(items, state, viewportHeight, resolveItem, "forward");
-}
-function resolveChatVisibleWindow(items, state, viewportHeight, resolveItem) {
-	return resolveVisibleWindow(items, state, viewportHeight, resolveItem, "backward");
-}
 //#endregion
-//#region src/renderer/virtualized/chat.ts
-function clamp$1(value, min, max) {
-	return Math.min(Math.max(value, min), max);
-}
+//#region src/renderer/virtualized/list.ts
 /**
-* Virtualized renderer anchored to the bottom, suitable for chat-style UIs.
+* Virtualized list renderer with configurable anchor semantics.
 */
-var ChatRenderer = class extends VirtualizedRenderer {
-	_resolveVisibleWindow(now) {
-		return resolveChatVisibleWindow(this.items, this._readListState(), this.graphics.canvas.clientHeight, (item, idx) => {
-			return this._resolveItem(item, idx, now);
-		});
-	}
-	_getDefaultJumpBlock() {
-		return "end";
-	}
-	_normalizeListState(state) {
-		return normalizeChatState(this.items.length, state);
-	}
-	_readAnchor(state) {
-		if (this.items.length === 0) return 0;
-		const height = this._getItemHeight(state.position);
-		return height > 0 ? state.position + 1 - state.offset / height : state.position + 1;
-	}
-	_applyAnchor(anchor) {
-		if (this.items.length === 0) return;
-		const clampedAnchor = clamp$1(anchor, 0, this.items.length);
-		const position = clamp$1(Math.ceil(clampedAnchor) - 1, 0, this.items.length - 1);
-		const height = this._getItemHeight(position);
-		const offset = height > 0 ? (position + 1 - clampedAnchor) * height : 0;
-		this._commitListState({
-			position,
-			offset: Object.is(offset, -0) ? 0 : offset
-		});
+var ListRenderer = class extends VirtualizedRenderer {
+	#layout;
+	constructor(graphics, options) {
+		super(graphics, options);
+		this.#layout = resolveListLayoutOptions(options);
 	}
-	_getTargetAnchor(index, block) {
-		const height = this._getItemHeight(index);
-		const viewportHeight = this.graphics.canvas.clientHeight;
-		switch (block) {
-			case "start": return this._getAnchorAtOffset(index, viewportHeight);
-			case "center": return this._getAnchorAtOffset(index, height / 2 + viewportHeight / 2);
-			case "end": return this._getAnchorAtOffset(index, height);
-		}
+	_getLayoutOptions() {
+		return this.#layout;
 	}
-	_getAnimatedLayerOffset(slotHeight, nodeHeight) {
-		return slotHeight - nodeHeight;
-	}
-};
-//#endregion
-//#region src/renderer/virtualized/timeline.ts
-function clamp(value, min, max) {
-	return Math.min(Math.max(value, min), max);
-}
-/**
-* Virtualized renderer anchored to the top, suitable for timeline-style UIs.
-*/
-var TimelineRenderer = class extends VirtualizedRenderer {
-	_resolveVisibleWindow(now) {
-		return resolveTimelineVisibleWindow(this.items, this._readListState(), this.graphics.canvas.clientHeight, (item, idx) => {
-			return this._resolveItem(item, idx, now);
-		});
+	_resolveVisibleWindowForState(state, now) {
+		return resolveVisibleWindow(this.items, state, this.graphics.canvas.clientHeight, (item, idx) => this._resolveItem(item, idx, now), this.#layout);
 	}
 	_getDefaultJumpBlock() {
-		return "start";
+		return this.#layout.anchorMode === "top" ? "start" : "end";
 	}
 	_normalizeListState(state) {
-		return normalizeTimelineState(this.items.length, state);
+		return normalizeVisibleState(this.items.length, state, this.#layout);
 	}
-	_readAnchor(state) {
-		if (this.items.length === 0) return 0;
-		const height = this._getItemHeight(state.position);
-		return height > 0 ? state.position - state.offset / height : state.position;
+	_readAnchor(state, readItemHeight) {
+		return readAnchorFromState(this.items.length, state, this.#layout.anchorMode, readItemHeight);
 	}
 	_applyAnchor(anchor) {
-		if (this.items.length === 0) return;
-		const clampedAnchor = clamp(anchor, 0, this.items.length);
-		const position = clamp(Math.floor(clampedAnchor), 0, this.items.length - 1);
-		const height = this._getItemHeight(position);
-		const offset = height > 0 ? -(clampedAnchor - position) * height : 0;
-		this._commitListState({
-			position,
-			offset: Object.is(offset, -0) ? 0 : offset
-		});
+		const state = applyAnchorToState(this.items.length, anchor, this.#layout.anchorMode, this._getItemHeight.bind(this));
+		if (state == null) return;
+		this._commitListState(state);
 	}
 	_getTargetAnchor(index, block) {
-		const height = this._getItemHeight(index);
-		const viewportHeight = this.graphics.canvas.clientHeight;
-		switch (block) {
-			case "start": return this._getAnchorAtOffset(index, 0);
-			case "center": return this._getAnchorAtOffset(index, height / 2 - viewportHeight / 2);
-			case "end": return this._getAnchorAtOffset(index, height - viewportHeight);
-		}
-	}
-	_getAnimatedLayerOffset(_slotHeight, _nodeHeight) {
-		return 0;
+		return getTargetAnchorForItem(this.items.length, index, block, this.#layout.anchorMode, this.graphics.canvas.clientHeight, this._getItemHeight.bind(this));
 	}
 };
 //#endregion
-export { BaseRenderer, ChatRenderer, DebugRenderer, Fixed, Flex, FlexItem, Group, ListState, MultilineText, PaddingBox, Place, ShrinkWrap, Text, TimelineRenderer, VirtualizedRenderer, Wrapper, memoRenderItem, memoRenderItemBy };
+export { BaseRenderer, DebugRenderer, Fixed, Flex, FlexItem, Group, ListRenderer, ListState, MultilineText, PaddingBox, Place, ShrinkWrap, Text, VirtualizedRenderer, Wrapper, memoRenderItem, memoRenderItemBy };
 
 //# sourceMappingURL=index.mjs.map