chat-layout 1.2.0-8 → 1.2.0

package/README.md

@@ -194,6 +194,24 @@ Type-check:
 bun run typecheck
 ```
 
+Run tests:
+
+```bash
+bun run test
+```
+
+Run tests with coverage:
+
+```bash
+bun run test:coverage
+```
+
+Run the local verification bundle:
+
+```bash
+bun run check
+```
+
 Build distributable files:
 
 ```bash

package/example/chat.ts

@@ -10,13 +10,13 @@ import {
   ShrinkWrap,
   Text,
   Wrapper,
+  initRenderFeedback,
   memoRenderItem,
   type Context,
   type DynValue,
   type HitTest,
   type InlineSpan,
   type Node,
-  type RenderFeedback,
 } from "chat-layout";
 
 const sampleWords = [
@@ -507,16 +507,9 @@ const renderer = new ListRenderer(ctx, {
 });
 renderer.padding = { top: 32, bottom: 32 };
 let nextMessageId = list.items.length + 1;
+const feedback = initRenderFeedback();
 
 function drawFrame(): void {
-  const feedback: RenderFeedback = {
-    minIdx: Number.NaN,
-    maxIdx: Number.NaN,
-    min: Number.NaN,
-    max: Number.NaN,
-    canAutoFollowTop: false,
-    canAutoFollowBottom: false,
-  };
   renderer.render(feedback);
 
   ctx.save();

package/index.d.mts

@@ -24,6 +24,10 @@ interface RenderFeedback {
   /** Whether the current viewport may auto-follow inserts at the visual bottom edge. */
   canAutoFollowBottom: boolean;
 }
+/**
+ * Creates or resets a render feedback object to its default empty state.
+ */
+declare function initRenderFeedback(feedback?: Partial<RenderFeedback>): RenderFeedback;
 /**
  * The main axis direction used by flex containers.
  */
@@ -779,5 +783,5 @@ declare class ListRenderer<C extends CanvasRenderingContext2D, T extends {}> ext
   protected _getTargetAnchor(index: number, block: NonNullable<JumpToOptions["block"]>): number;
 }
 //#endregion
-export { Axis, BaseRenderer, Box, ChildLayoutResult, Context, CrossAxisAlignment, DebugRenderer, DeleteListItemAnimationOptions, DynValue, Fixed, Flex, FlexContainerOptions, FlexItem, FlexItemOptions, FlexLayoutResult, Group, HitTest, InlineSpan, InsertListItemsAnimationOptions, JumpToOptions, LayoutConstraints, LayoutRect, ListAnchorMode, ListLayoutOptions, ListPadding, ListRenderer, ListRendererOptions, ListState, ListUnderflowAlign, MainAxisAlignment, MainAxisSize, MultilineText, MultilineTextOptions, Node, PaddingBox, PhysicalTextAlign, Place, PushListItemsAnimationOptions, RenderFeedback, RendererOptions, ShrinkWrap, Text, TextAlign, TextEllipsisPosition, TextJustifyMode, TextJustifyOptions, TextOptions, TextOverflowMode, TextOverflowWrapMode, TextStyleOptions, TextWhiteSpaceMode, TextWordBreakMode, UnshiftListItemsAnimationOptions, UpdateListItemAnimationOptions, VirtualizedRenderer, Wrapper, memoRenderItem, memoRenderItemBy };
+export { Axis, BaseRenderer, Box, ChildLayoutResult, Context, CrossAxisAlignment, DebugRenderer, DeleteListItemAnimationOptions, DynValue, Fixed, Flex, FlexContainerOptions, FlexItem, FlexItemOptions, FlexLayoutResult, Group, HitTest, InlineSpan, InsertListItemsAnimationOptions, JumpToOptions, LayoutConstraints, LayoutRect, ListAnchorMode, ListLayoutOptions, ListPadding, ListRenderer, ListRendererOptions, ListState, ListUnderflowAlign, MainAxisAlignment, MainAxisSize, MultilineText, MultilineTextOptions, Node, PaddingBox, PhysicalTextAlign, Place, PushListItemsAnimationOptions, RenderFeedback, RendererOptions, ShrinkWrap, Text, TextAlign, TextEllipsisPosition, TextJustifyMode, TextJustifyOptions, TextOptions, TextOverflowMode, TextOverflowWrapMode, TextStyleOptions, TextWhiteSpaceMode, TextWordBreakMode, UnshiftListItemsAnimationOptions, UpdateListItemAnimationOptions, VirtualizedRenderer, Wrapper, initRenderFeedback, memoRenderItem, memoRenderItemBy };
 //# sourceMappingURL=index.d.mts.map

package/index.mjs

@@ -3574,31 +3574,13 @@ var DebugRenderer = class extends BaseRenderer {
 	}
 };
 //#endregion
-//#region src/renderer/weak-listeners.ts
-function pruneWeakListenerMap(listeners) {
-	for (const [token, listener] of listeners) if (listener.ownerRef.deref() == null) listeners.delete(token);
-}
-function emitWeakListeners(listeners, event) {
-	for (const [token, listener] of [...listeners]) {
-		const owner = listener.ownerRef.deref();
-		if (owner == null) {
-			listeners.delete(token);
-			continue;
-		}
-		listener.notify(owner, event);
-	}
-}
-//#endregion
 //#region src/renderer/list-state.ts
-const listStateListeners = /* @__PURE__ */ new WeakMap();
-const listStateListenerRegistry = typeof FinalizationRegistry === "function" ? new FinalizationRegistry(({ listRef, token }) => {
-	const list = listRef.deref();
-	if (list == null) return;
-	deleteListStateListener(list, token);
-}) : null;
+const listStateChangeQueues = /* @__PURE__ */ new WeakMap();
 const listScrollMutations = /* @__PURE__ */ new WeakMap();
 const WRITE_LIST_SCROLL_STATE = Symbol("writeListScrollState");
 const FINALIZE_LIST_DELETE = Symbol("finalizeListDelete");
+const LIST_STATE_CHANGE_TIME = Symbol("listStateChangeTime");
+const LIST_STATE_CHANGE_SNAPSHOT = Symbol("listStateChangeSnapshot");
 function normalizePosition(value) {
 	return typeof value === "number" && Number.isFinite(value) ? Math.trunc(value) : void 0;
 }
@@ -3634,34 +3616,40 @@ function writeInternalListScrollState(list, state) {
 function finalizeInternalListDelete(list, item) {
 	list[FINALIZE_LIST_DELETE](item);
 }
-function deleteListStateListener(list, token) {
-	const listeners = listStateListeners.get(list);
-	if (listeners == null) return;
-	listeners.delete(token);
-	if (listeners.size === 0) listStateListeners.delete(list);
-}
-function emitListStateChange(list, change) {
-	const listeners = listStateListeners.get(list);
-	if (listeners == null) return;
-	emitWeakListeners(listeners, change);
-	if (listeners.size === 0) listStateListeners.delete(list);
-}
-function subscribeListState(list, owner, listener) {
+function enqueueListStateChange(list, change) {
 	const key = list;
-	let listeners = listStateListeners.get(key);
-	if (listeners == null) {
-		listeners = /* @__PURE__ */ new Map();
-		listStateListeners.set(key, listeners);
-	} else pruneWeakListenerMap(listeners);
-	const token = Symbol();
-	listeners.set(token, {
-		ownerRef: new WeakRef(owner),
-		notify: listener
+	let queue = listStateChangeQueues.get(key);
+	if (queue == null) {
+		queue = [];
+		listStateChangeQueues.set(key, queue);
+	}
+	const timestampedChange = change;
+	Object.defineProperty(timestampedChange, LIST_STATE_CHANGE_TIME, {
+		value: performance.now(),
+		configurable: true
 	});
-	listStateListenerRegistry?.register(owner, {
-		listRef: new WeakRef(key),
-		token
+	Object.defineProperty(timestampedChange, LIST_STATE_CHANGE_SNAPSHOT, {
+		value: {
+			items: [...list.items],
+			position: list.position,
+			offset: list.offset
+		},
+		configurable: true
 	});
+	queue.push(timestampedChange);
+}
+function drainInternalListStateChanges(list) {
+	const key = list;
+	const queue = listStateChangeQueues.get(key);
+	if (queue == null || queue.length === 0) return [];
+	listStateChangeQueues.delete(key);
+	return queue;
+}
+function readInternalListStateChangeTime(change) {
+	return change[LIST_STATE_CHANGE_TIME];
+}
+function readInternalListStateChangeSnapshot(change) {
+	return change[LIST_STATE_CHANGE_SNAPSHOT];
 }
 function isObjectIdentityCandidate(value) {
 	return typeof value === "object" && value !== null || typeof value === "function";
@@ -3724,7 +3712,7 @@ var ListState = class {
 		assertUniqueItemReferences(nextItems);
 		this.#items = nextItems;
 		this.#pendingDeletes.clear();
-		emitListStateChange(this, { type: "set" });
+		enqueueListStateChange(this, { type: "set" });
 	}
 	/**
 	* @param items Initial list items.
@@ -3745,7 +3733,7 @@ var ListState = class {
 		const normalizedAnimation = normalizeInsertAnimation(animation);
 		if (this.position != null) this.#writeScrollState({ position: this.position + items.length }, "internal");
 		this.#items = items.concat(this.#items);
-		emitListStateChange(this, {
+		enqueueListStateChange(this, {
 			type: "unshift",
 			count: items.length,
 			animation: normalizedAnimation
@@ -3761,7 +3749,7 @@ var ListState = class {
 		assertUniqueItemReferences(items, this.#items);
 		const normalizedAnimation = normalizeInsertAnimation(animation);
 		this.#items.push(...items);
-		emitListStateChange(this, {
+		enqueueListStateChange(this, {
 			type: "push",
 			count: items.length,
 			animation: normalizedAnimation
@@ -3779,7 +3767,7 @@ var ListState = class {
 		if (this.#items.includes(nextItem)) throw new Error("update() nextItem is already present in the list.");
 		const prevItem = this.#items[index];
 		this.#items[index] = nextItem;
-		emitListStateChange(this, {
+		enqueueListStateChange(this, {
 			type: "update",
 			prevItem,
 			nextItem,
@@ -3800,7 +3788,7 @@ var ListState = class {
 			return;
 		}
 		this.#pendingDeletes.add(item);
-		emitListStateChange(this, {
+		enqueueListStateChange(this, {
 			type: "delete",
 			item,
 			animation: normalizedAnimation
@@ -3823,7 +3811,7 @@ var ListState = class {
 			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, {
+		enqueueListStateChange(this, {
 			type: "delete-finalize",
 			item
 		});
@@ -3840,7 +3828,7 @@ var ListState = class {
 			position: void 0,
 			offset: 0
 		}, "internal");
-		emitListStateChange(this, { type: "reset" });
+		enqueueListStateChange(this, { type: "reset" });
 	}
 	/** Applies a relative pixel scroll delta. */
 	applyScroll(delta) {
@@ -3930,6 +3918,21 @@ function memoRenderItemBy(keyOf, renderItem, options = {}) {
 	});
 }
 //#endregion
+//#region src/types.ts
+/**
+* Creates or resets a render feedback object to its default empty state.
+*/
+function initRenderFeedback(feedback = {}) {
+	const target = feedback;
+	target.minIdx = NaN;
+	target.maxIdx = NaN;
+	target.min = NaN;
+	target.max = NaN;
+	target.canAutoFollowTop = false;
+	target.canAutoFollowBottom = false;
+	return target;
+}
+//#endregion
 //#region src/renderer/virtualized/frame-session.ts
 function prepareFrameSession(params) {
 	let solution = params.resolveVisibleWindow(params.now);
@@ -4046,6 +4049,10 @@ var JumpController = class JumpController {
 	#pendingAutoFollowRecomputeReasonTop = "init";
 	#pendingAutoFollowRecomputeReasonBottom = "init";
 	#pendingTransitionSettleReconcile = false;
+	#autoFollowObservationCountTop = 0;
+	#autoFollowObservationCountBottom = 0;
+	#pendingAutoFollowInvalidationTop = false;
+	#pendingAutoFollowInvalidationBottom = false;
 	#lastArmedAutoFollowBoundary;
 	#lastObservedRenderedAutoFollowTop = false;
 	#lastObservedRenderedAutoFollowBottom = false;
@@ -4127,12 +4134,32 @@ var JumpController = class JumpController {
 			block: boundary === "bottom" ? "end" : "start"
 		});
 	}
+	beginAutoFollowBoundaryObservation(boundary) {
+		if (boundary === "top") {
+			this.#autoFollowObservationCountTop += 1;
+			return;
+		}
+		this.#autoFollowObservationCountBottom += 1;
+	}
+	endAutoFollowBoundaryObservation(boundary) {
+		if (boundary === "top") {
+			this.#autoFollowObservationCountTop = Math.max(0, this.#autoFollowObservationCountTop - 1);
+			return;
+		}
+		this.#autoFollowObservationCountBottom = Math.max(0, this.#autoFollowObservationCountBottom - 1);
+	}
+	invalidateAutoFollowBoundary(boundary) {
+		if (boundary == null || boundary === "top") this.#pendingAutoFollowInvalidationTop = true;
+		if (boundary == null || boundary === "bottom") this.#pendingAutoFollowInvalidationBottom = true;
+	}
 	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");
 		}
+		this.#syncObservedOrInvalidatedBoundary("top", capabilities);
+		this.#syncObservedOrInvalidatedBoundary("bottom", capabilities);
 		if (this.#pendingAutoFollowRecomputeTop) {
 			this.#setAutoFollowBoundary("top", capabilities.top, `strict-recompute:${this.#pendingAutoFollowRecomputeReasonTop}`);
 			this.#pendingAutoFollowRecomputeTop = false;
@@ -4159,22 +4186,23 @@ var JumpController = class JumpController {
 	reconcileAutoFollowAfterTransitionSettle() {
 		this.#pendingTransitionSettleReconcile = true;
 	}
-	handleListStateChange(change) {
+	handleListStateChange(change, now = getNow()) {
 		switch (change.type) {
 			case "reset":
 			case "set":
 				this.#cancelJumpAnimation();
 				this.#clearPendingPostJumpBoundary();
 				this.#clearPendingTransitionSettleReconcile();
+				this.#clearAutoFollowObservationState();
 				this.#syncScrollMutationVersion();
 				this.#markAutoFollowRecompute(void 0, change.type);
 				return change;
 			case "push":
-			case "unshift": return this.#handleBoundaryInsert(change);
+			case "unshift": return this.#handleBoundaryInsert(change, now);
 			default: return change;
 		}
 	}
-	#handleBoundaryInsert(change) {
+	#handleBoundaryInsert(change, now) {
 		if (this.#handlePendingExternalScrollMutation()) return change;
 		this.#clearPendingTransitionSettleReconcile();
 		const followChange = this.#resolveAutoFollowChange(change);
@@ -4187,21 +4215,21 @@ var JumpController = class JumpController {
 			this.#lastArmedAutoFollowBoundary = followChange.boundary;
 		}
 		this.#clearPendingPostJumpBoundary();
-		this.#materializeAnimatedAnchor(getNow(), followChange.direction, followChange.count);
+		this.#materializeAnimatedAnchor(now, followChange.direction, followChange.count);
 		this.#startJumpToIndex(followChange.boundary === "bottom" ? this.#options.getItemCount() - 1 : 0, {
 			block: followChange.boundary === "bottom" ? "end" : "start",
 			duration: followChange.animation?.duration
-		});
+		}, now);
 		return change;
 	}
 	#cancelJumpAnimation() {
 		this.#jumpAnimation = void 0;
 	}
-	#startJumpToIndex(index, options) {
+	#startJumpToIndex(index, options, now = getNow()) {
 		const targetIndex = this.#options.clampItemIndex(index);
 		const targetBlock = options.block ?? this.#options.getDefaultJumpBlock();
 		const settleBoundary = this.#resolveBoundaryLatchTarget(targetIndex, targetBlock);
-		this.#materializeAnimatedAnchor(getNow());
+		this.#materializeAnimatedAnchor(now);
 		const currentState = this.#options.normalizeListState(this.#options.readListState());
 		const targetAnchor = this.#options.getTargetAnchor(targetIndex, targetBlock);
 		if (!(options.animated ?? true)) {
@@ -4234,7 +4262,7 @@ var JumpController = class JumpController {
 		}
 		this.#jumpAnimation = {
 			path,
-			startTime: getNow(),
+			startTime: now,
 			duration,
 			needsMoreFrames: true,
 			onComplete: options.onComplete
@@ -4288,6 +4316,12 @@ var JumpController = class JumpController {
 	#clearPendingTransitionSettleReconcile() {
 		this.#pendingTransitionSettleReconcile = false;
 	}
+	#clearAutoFollowObservationState() {
+		this.#autoFollowObservationCountTop = 0;
+		this.#autoFollowObservationCountBottom = 0;
+		this.#pendingAutoFollowInvalidationTop = false;
+		this.#pendingAutoFollowInvalidationBottom = false;
+	}
 	#materializeAnimatedAnchor(now, direction, count = 0) {
 		const animation = this.#jumpAnimation;
 		if (animation == null) return;
@@ -4302,6 +4336,20 @@ var JumpController = class JumpController {
 		if (boundary === "top") this.#canAutoFollowTop = value;
 		else this.#canAutoFollowBottom = value;
 	}
+	#syncObservedOrInvalidatedBoundary(boundary, capabilities) {
+		const isObserved = this.#readAutoFollowObservationCount(boundary) > 0;
+		const isInvalidated = boundary === "top" ? this.#pendingAutoFollowInvalidationTop : this.#pendingAutoFollowInvalidationBottom;
+		if (!isObserved && !isInvalidated) return;
+		this.#setAutoFollowBoundary(boundary, this.#readCapabilityForBoundary(capabilities, boundary), "transition-observation");
+		if (boundary === "top") {
+			this.#pendingAutoFollowInvalidationTop = false;
+			return;
+		}
+		this.#pendingAutoFollowInvalidationBottom = false;
+	}
+	#readAutoFollowObservationCount(boundary) {
+		return boundary === "top" ? this.#autoFollowObservationCountTop : this.#autoFollowObservationCountBottom;
+	}
 	#syncLastArmedBoundaryFromLatchedState() {
 		if (this.#canAutoFollowTop === this.#canAutoFollowBottom) return;
 		this.#lastArmedAutoFollowBoundary = this.#canAutoFollowTop ? "top" : "bottom";
@@ -4815,11 +4863,15 @@ var TransitionStore = class {
 		return this.#transitions.has(item);
 	}
 	set(item, transition) {
+		const previous = this.#transitions.get(item);
 		this.#transitions.set(item, transition);
+		return previous;
 	}
 	replace(prevItem, nextItem, transition) {
+		const previous = this.#transitions.get(prevItem);
 		this.#transitions.delete(prevItem);
 		this.#transitions.set(nextItem, transition);
+		return previous;
 	}
 	delete(item) {
 		const transition = this.#transitions.get(item);
@@ -4847,6 +4899,12 @@ var TransitionStore = class {
 			transition
 		}));
 	}
+	entries() {
+		return [...this.#transitions.entries()].map(([item, transition]) => ({
+			item,
+			transition
+		}));
+	}
 	reset() {
 		this.#transitions.clear();
 	}
@@ -4939,6 +4997,30 @@ function planExistingItemTransition(params) {
 		retention: "drawn"
 	};
 }
+function resolveAutoFollowBoundaryRisk(index, ctx, snapshot) {
+	const drawnRange = snapshot.readDrawnIndexRange();
+	if (index < 0 || !snapshot.hasSnapshot || drawnRange == null || !Number.isFinite(drawnRange.minIndex) || !Number.isFinite(drawnRange.maxIndex)) return;
+	if (ctx.anchorMode === "bottom") return index <= drawnRange.minIndex ? "top" : void 0;
+	return index >= drawnRange.maxIndex ? "bottom" : void 0;
+}
+function canClassifyAutoFollowBoundaryRisk(index, snapshot) {
+	return index >= 0 && snapshot.hasSnapshot && snapshot.readDrawnIndexRange() != null;
+}
+function beginTransitionAutoFollowObservation(transition, lifecycle) {
+	if (transition.observedAutoFollowBoundary == null) return;
+	lifecycle.beginAutoFollowBoundaryObservation(transition.observedAutoFollowBoundary);
+}
+function endTransitionAutoFollowObservation(transition, lifecycle) {
+	if (transition?.observedAutoFollowBoundary == null) return;
+	lifecycle.endAutoFollowBoundaryObservation(transition.observedAutoFollowBoundary);
+}
+function invalidateAutoFollowBoundaryRisk(boundary, canClassify, lifecycle) {
+	if (boundary != null) {
+		lifecycle.invalidateAutoFollowBoundary(boundary);
+		return;
+	}
+	if (!canClassify) lifecycle.invalidateAutoFollowBoundary(void 0);
+}
 function planBoundaryInsertItems(params) {
 	const entries = [];
 	for (const { item, node, height } of params.measuredItems) {
@@ -5102,40 +5184,50 @@ function readCurrentVisualState(item, now, store, adapter) {
 		translateY: 0
 	};
 }
-function handleTransitionStateChange(store, snapshot, change, ctx, lifecycle) {
+function handleTransitionStateChange(store, snapshot, change, ctx, lifecycle, now = getNow()) {
 	switch (change.type) {
 		case "update": {
-			const now = getNow();
+			const nextIndex = ctx.items.indexOf(change.nextItem);
+			const canClassifyRisk = canClassifyAutoFollowBoundaryRisk(nextIndex, snapshot);
+			const observedBoundary = resolveAutoFollowBoundaryRisk(nextIndex, ctx, snapshot);
 			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);
+				endTransitionAutoFollowObservation(store.delete(change.prevItem), lifecycle);
+				invalidateAutoFollowBoundaryRisk(observedBoundary, canClassifyRisk, lifecycle);
 				return;
 			}
-			store.replace(change.prevItem, change.nextItem, transition);
+			transition.observedAutoFollowBoundary = observedBoundary;
+			endTransitionAutoFollowObservation(store.replace(change.prevItem, change.nextItem, transition), lifecycle);
+			beginTransitionAutoFollowObservation(transition, lifecycle);
 			return;
 		}
 		case "delete": {
-			const now = getNow();
+			const index = ctx.items.indexOf(change.item);
+			const canClassifyRisk = canClassifyAutoFollowBoundaryRisk(index, snapshot);
+			const observedBoundary = resolveAutoFollowBoundaryRisk(index, ctx, snapshot);
 			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);
+				endTransitionAutoFollowObservation(store.delete(change.item), lifecycle);
+				invalidateAutoFollowBoundaryRisk(observedBoundary, canClassifyRisk, lifecycle);
 				lifecycle.onDeleteComplete(change.item);
 				return;
 			}
-			store.set(change.item, transition);
+			transition.observedAutoFollowBoundary = observedBoundary;
+			endTransitionAutoFollowObservation(store.set(change.item, transition), lifecycle);
+			beginTransitionAutoFollowObservation(transition, lifecycle);
 			return;
 		}
 		case "delete-finalize":
-			store.delete(change.item);
+			endTransitionAutoFollowObservation(store.delete(change.item), lifecycle);
+			lifecycle.invalidateAutoFollowBoundary(void 0);
 			return;
 		case "unshift":
 		case "push": {
-			const now = getNow();
 			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);
+			for (const entry of plan.entries) endTransitionAutoFollowObservation(store.set(entry.item, entry.transition), lifecycle);
 			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);
@@ -5145,6 +5237,7 @@ function handleTransitionStateChange(store, snapshot, change, ctx, lifecycle) {
 		}
 		case "reset":
 		case "set":
+			for (const entry of store.entries()) endTransitionAutoFollowObservation(entry.transition, lifecycle);
 			store.reset();
 			snapshot.reset();
 			return;
@@ -5187,10 +5280,9 @@ var TransitionController = class {
 	resolveItem(item, now, adapter, lifecycle) {
 		return resolveTransitionedItem(item, now, this.#store, adapter, lifecycle);
 	}
-	handleListStateChange(change, ctx, lifecycle) {
-		const now = getNow();
+	handleListStateChange(change, ctx, lifecycle, now = getNow()) {
 		this.settle(now, lifecycle);
-		handleTransitionStateChange(this.#store, this.#snapshot, change, ctx, lifecycle);
+		handleTransitionStateChange(this.#store, this.#snapshot, change, ctx, lifecycle, now);
 	}
 	settle(now, lifecycle) {
 		return this.#settleTransitions(this.#store.findCompleted(now), now, lifecycle);
@@ -5213,7 +5305,11 @@ var TransitionController = class {
 				const index = lifecycle.readItemIndex(item);
 				if (index >= 0) completedDeleteIndices.push(index);
 			}
-			this.#store.delete(item);
+			const removedTransition = this.#store.delete(item);
+			if (removedTransition?.observedAutoFollowBoundary != null) {
+				lifecycle.endAutoFollowBoundaryObservation(removedTransition.observedAutoFollowBoundary);
+				lifecycle.invalidateAutoFollowBoundary(removedTransition.observedAutoFollowBoundary);
+			}
 			if (transition.kind === "delete") lifecycle.onDeleteComplete(item);
 		}
 		if (anchor != null && Number.isFinite(anchor)) lifecycle.restoreVisualAnchor(remapAnchorAfterDeletes(anchor, completedDeleteIndices));
@@ -5270,6 +5366,7 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 	static JUMP_DURATION_PER_PIXEL = .7;
 	#jumpController;
 	#transitionController = new TransitionController();
+	#listStateOverride;
 	constructor(graphics, options) {
 		super(graphics, options);
 		this.#jumpController = new JumpController({
@@ -5287,21 +5384,18 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 			clampItemIndex: this._clampItemIndex.bind(this),
 			getItemHeight: this._getItemHeight.bind(this)
 		});
-		subscribeListState(options.list, this, (owner, change) => {
-			owner.#handleListStateChange(change);
-		});
 	}
 	/** Current anchor item index. */
 	get position() {
-		return this.options.list.position;
+		return this.#listStateOverride?.position ?? this.options.list.position;
 	}
 	/** Pixel offset from the anchored item edge. */
 	get offset() {
-		return this.options.list.offset;
+		return this.#listStateOverride?.offset ?? this.options.list.offset;
 	}
 	/** Items currently available to the renderer. */
 	get items() {
-		return this.options.list.items;
+		return this.#listStateOverride?.items ?? this.options.list.items;
 	}
 	/** Replaces the current item collection. */
 	set items(value) {
@@ -5309,6 +5403,7 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 	}
 	/** Renders the current visible window. */
 	render(feedback) {
+		this.#drainPendingListStateChanges();
 		this.#jumpController.beforeFrame();
 		this.#jumpController.noteViewportWidth(this.graphics.canvas.clientWidth);
 		const now = getNow();
@@ -5332,6 +5427,7 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 	}
 	/** Hit-tests the current visible window. */
 	hittest(test) {
+		this.#drainPendingListStateChanges();
 		this.#jumpController.beforeFrame();
 		this.#jumpController.noteViewportWidth(this.graphics.canvas.clientWidth);
 		const now = getNow();
@@ -5378,12 +5474,7 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 	}
 	_resetRenderFeedback(feedback) {
 		if (feedback == null) return;
-		feedback.minIdx = NaN;
-		feedback.maxIdx = NaN;
-		feedback.min = NaN;
-		feedback.max = NaN;
-		feedback.canAutoFollowTop = false;
-		feedback.canAutoFollowBottom = false;
+		initRenderFeedback(feedback);
 	}
 	_accumulateRenderFeedback(feedback, idx, top, height) {
 		const visibleRange = this._readVisibleRange(top, height);
@@ -5514,6 +5605,7 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 	}
 	#handleDeleteComplete(item) {
 		finalizeInternalListDelete(this.options.list, item);
+		this.#drainPendingListStateChanges();
 	}
 	#getTransitionLifecycleAdapter() {
 		return {
@@ -5523,7 +5615,10 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 			readScrollState: this._readListState.bind(this),
 			readItemIndex: (item) => this.items.indexOf(item),
 			snapItemToViewportBoundary: this.#snapItemToViewportBoundary.bind(this),
-			onTransitionSettleScrollAdjusted: () => this.#jumpController.reconcileAutoFollowAfterTransitionSettle()
+			onTransitionSettleScrollAdjusted: () => this.#jumpController.reconcileAutoFollowAfterTransitionSettle(),
+			beginAutoFollowBoundaryObservation: (boundary) => this.#jumpController.beginAutoFollowBoundaryObservation(boundary),
+			endAutoFollowBoundaryObservation: (boundary) => this.#jumpController.endAutoFollowBoundaryObservation(boundary),
+			invalidateAutoFollowBoundary: (boundary) => this.#jumpController.invalidateAutoFollowBoundary(boundary)
 		};
 	}
 	#getVirtualizedRuntime() {
@@ -5557,9 +5652,25 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 			anchorMode: this._getLayoutOptions().anchorMode
 		};
 	}
-	#handleListStateChange(change) {
-		const nextChange = this.#jumpController.handleListStateChange(change);
-		this.#transitionController.handleListStateChange(nextChange, this.#getTransitionPlanningAdapter(), this.#getTransitionLifecycleAdapter());
+	#handleListStateChange(change, now = getNow(), snapshot) {
+		this.#listStateOverride = snapshot == null ? void 0 : {
+			items: [...snapshot.items],
+			position: snapshot.position,
+			offset: snapshot.offset
+		};
+		try {
+			const nextChange = this.#jumpController.handleListStateChange(change, now);
+			this.#transitionController.handleListStateChange(nextChange, this.#getTransitionPlanningAdapter(), this.#getTransitionLifecycleAdapter(), now);
+		} finally {
+			this.#listStateOverride = void 0;
+		}
+	}
+	#drainPendingListStateChanges() {
+		while (true) {
+			const changes = drainInternalListStateChanges(this.options.list);
+			if (changes.length === 0) return;
+			for (const change of changes) this.#handleListStateChange(change, readInternalListStateChangeTime(change), readInternalListStateChangeSnapshot(change));
+		}
 	}
 };
 //#endregion
@@ -5679,6 +5790,6 @@ var ListRenderer = class extends VirtualizedRenderer {
 	}
 };
 //#endregion
-export { BaseRenderer, DebugRenderer, Fixed, Flex, FlexItem, Group, ListRenderer, ListState, MultilineText, PaddingBox, Place, ShrinkWrap, Text, VirtualizedRenderer, Wrapper, memoRenderItem, memoRenderItemBy };
+export { BaseRenderer, DebugRenderer, Fixed, Flex, FlexItem, Group, ListRenderer, ListState, MultilineText, PaddingBox, Place, ShrinkWrap, Text, VirtualizedRenderer, Wrapper, initRenderFeedback, memoRenderItem, memoRenderItemBy };
 
 //# sourceMappingURL=index.mjs.map