@symbiote-native/angular 0.5.0 → 0.6.1

package/build/angular/components/virtualized-list/index.d.ts

@@ -181,22 +181,12 @@ export declare class VirtualizedList<ItemT = unknown> implements IVirtualizedLis
         x: number;
         y: number;
     } | undefined;
-    private scrollOffset;
-    private viewportLength;
-    private measureVersion;
-    private metricsCore;
-    private readonly measured;
+    private readonly listState;
+    private renderVersion;
     private readonly cellMeasures;
     private readonly separatorOverrides;
-    private committedWindow;
-    private sentEndForContentLength;
-    private sentStartForContentLength;
-    private lastViewable;
     private viewableTimer;
     private batchTimer;
-    private hasInteracted;
-    private appliedInitialScroll;
-    private firstVisibleKey;
     private lastEffectSignature;
     private lastRecompute;
     private readonly cdr;
@@ -219,10 +209,12 @@ export declare class VirtualizedList<ItemT = unknown> implements IVirtualizedLis
     magicTapTick: (event: ISymbioteEvent) => void;
     accessibilityEscapeTick: (event: ISymbioteEvent) => void;
     private keyFor;
+    private buildInputs;
+    private dispatch;
+    private runEffects;
     ngDoCheck(): void;
     ngAfterViewChecked(): void;
     ngOnDestroy(): void;
-    private recomputeMetrics;
     private recomputeView;
     private buildSeparatorContext;
     private spacerStyle;
@@ -256,13 +248,6 @@ export declare class VirtualizedList<ItemT = unknown> implements IVirtualizedLis
     getScrollNode(): ISymbioteNode | null;
     recordInteraction(): void;
     private scrollToPixel;
-    private offsetForIndexLocal;
-    private effectBatchFill;
-    private effectEndReached;
-    private effectStartReached;
-    private effectViewability;
-    private effectInitialScroll;
-    private effectMaintainVisibleContentPosition;
     static ɵfac: i0.ɵɵFactoryDeclaration<VirtualizedList<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<VirtualizedList<any>, "VirtualizedList", never, { "data": { "alias": "data"; "required": true; }; "getItem": { "alias": "getItem"; "required": true; }; "getItemCount": { "alias": "getItemCount"; "required": true; }; "keyExtractor": { "alias": "keyExtractor"; "required": false; }; "getItemLayout": { "alias": "getItemLayout"; "required": false; }; "horizontal": { "alias": "horizontal"; "required": false; }; "inverted": { "alias": "inverted"; "required": false; }; "extraData": { "alias": "extraData"; "required": false; }; "onEndReachedThreshold": { "alias": "onEndReachedThreshold"; "required": false; }; "onStartReachedThreshold": { "alias": "onStartReachedThreshold"; "required": false; }; "refreshing": { "alias": "refreshing"; "required": false; }; "progressViewOffset": { "alias": "progressViewOffset"; "required": false; }; "refreshRequested": { "alias": "refreshRequested"; "required": false; }; "viewabilityConfig": { "alias": "viewabilityConfig"; "required": false; }; "viewabilityConfigCallbackPairs": { "alias": "viewabilityConfigCallbackPairs"; "required": false; }; "initialNumToRender": { "alias": "initialNumToRender"; "required": false; }; "initialScrollIndex": { "alias": "initialScrollIndex"; "required": false; }; "maxToRenderPerBatch": { "alias": "maxToRenderPerBatch"; "required": false; }; "updateCellsBatchingPeriod": { "alias": "updateCellsBatchingPeriod"; "required": false; }; "windowSize": { "alias": "windowSize"; "required": false; }; "stickyHeaderIndices": { "alias": "stickyHeaderIndices"; "required": false; }; "maintainVisibleContentPosition": { "alias": "maintainVisibleContentPosition"; "required": false; }; "onScroll": { "alias": "onScroll"; "required": false; }; "onScrollBeginDrag": { "alias": "onScrollBeginDrag"; "required": false; }; "onScrollEndDrag": { "alias": "onScrollEndDrag"; "required": false; }; "onMomentumScrollBegin": { "alias": "onMomentumScrollBegin"; "required": false; }; "onMomentumScrollEnd": { "alias": "onMomentumScrollEnd"; "required": false; }; "scrollEventThrottle": { "alias": "scrollEventThrottle"; "required": false; }; "keyboardShouldPersistTaps": { "alias": "keyboardShouldPersistTaps"; "required": false; }; "keyboardDismissMode": { "alias": "keyboardDismissMode"; "required": false; }; "style": { "alias": "style"; "required": false; }; "contentContainerStyle": { "alias": "contentContainerStyle"; "required": false; }; "testID": { "alias": "testID"; "required": false; }; "nativeID": { "alias": "nativeID"; "required": false; }; "accessible": { "alias": "accessible"; "required": false; }; "accessibilityLabel": { "alias": "accessibilityLabel"; "required": false; }; "accessibilityHint": { "alias": "accessibilityHint"; "required": false; }; "accessibilityRole": { "alias": "accessibilityRole"; "required": false; }; "accessibilityState": { "alias": "accessibilityState"; "required": false; }; "accessibilityValue": { "alias": "accessibilityValue"; "required": false; }; "accessibilityActions": { "alias": "accessibilityActions"; "required": false; }; "accessibilityLabelledBy": { "alias": "accessibilityLabelledBy"; "required": false; }; "importantForAccessibility": { "alias": "importantForAccessibility"; "required": false; }; "accessibilityLiveRegion": { "alias": "accessibilityLiveRegion"; "required": false; }; "screenReaderFocusable": { "alias": "screenReaderFocusable"; "required": false; }; "accessibilityViewIsModal": { "alias": "accessibilityViewIsModal"; "required": false; }; "accessibilityElementsHidden": { "alias": "accessibilityElementsHidden"; "required": false; }; "accessibilityIgnoresInvertColors": { "alias": "accessibilityIgnoresInvertColors"; "required": false; }; "accessibilityLanguage": { "alias": "accessibilityLanguage"; "required": false; }; "accessibilityRespondsToUserInteraction": { "alias": "accessibilityRespondsToUserInteraction"; "required": false; }; "accessibilityShowsLargeContentViewer": { "alias": "accessibilityShowsLargeContentViewer"; "required": false; }; "accessibilityLargeContentTitle": { "alias": "accessibilityLargeContentTitle"; "required": false; }; "role": { "alias": "role"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "ariaLive": { "alias": "ariaLive"; "required": false; }; "ariaHidden": { "alias": "ariaHidden"; "required": false; }; "ariaBusy": { "alias": "ariaBusy"; "required": false; }; "ariaChecked": { "alias": "ariaChecked"; "required": false; }; "ariaDisabled": { "alias": "ariaDisabled"; "required": false; }; "ariaExpanded": { "alias": "ariaExpanded"; "required": false; }; "ariaSelected": { "alias": "ariaSelected"; "required": false; }; "ariaModal": { "alias": "ariaModal"; "required": false; }; "ariaValueMax": { "alias": "ariaValueMax"; "required": false; }; "ariaValueMin": { "alias": "ariaValueMin"; "required": false; }; "ariaValueNow": { "alias": "ariaValueNow"; "required": false; }; "ariaValueText": { "alias": "ariaValueText"; "required": false; }; }, { "endReached": "endReached"; "startReached": "startReached"; "refresh": "refresh"; "viewableItemsChanged": "viewableItemsChanged"; "scrollToIndexFailed": "scrollToIndexFailed"; "accessibilityAction": "accessibilityAction"; "accessibilityTap": "accessibilityTap"; "magicTap": "magicTap"; "accessibilityEscape": "accessibilityEscape"; }, ["itemDir", "headerDir", "footerDir", "emptyDir", "separatorDir"], never, true, never>;
 }

package/build/angular/components/virtualized-list/index.js

@@ -24,7 +24,7 @@
 // Lists have no Descriptor render fn — the cell content is the framework's own children.
 // Cells/spacers are plain symbiote-view host elements.
 import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, Input, Output, ViewChild, inject, } from '@angular/core';
-import { DEFAULT_END_REACHED_THRESHOLD, DEFAULT_INITIAL_NUM_TO_RENDER, DEFAULT_MAX_TO_RENDER_PER_BATCH, DEFAULT_START_REACHED_THRESHOLD, DEFAULT_UPDATE_CELLS_BATCHING_PERIOD, DEFAULT_WINDOW_SIZE, EMPTY_OFFSET, FIRST_INDEX, INVERTED_X_STYLE, INVERTED_Y_STYLE, NO_CONTENT_LENGTH_SENT, averageMeasuredLength, buildListPlan, buildOffsets, buildViewabilityPairs, computeEndReached, computeStartReached, computeViewableSet, computeWindow, diffViewable, highestMeasuredIndex, maxMinimumViewTime, offsetForIndex, readLayoutLength, readScrollOffset, resolveAccessibilityProps, throttleWindow, } from '@symbiote-native/components';
+import { DEFAULT_END_REACHED_THRESHOLD, DEFAULT_INITIAL_NUM_TO_RENDER, DEFAULT_MAX_TO_RENDER_PER_BATCH, DEFAULT_START_REACHED_THRESHOLD, DEFAULT_UPDATE_CELLS_BATCHING_PERIOD, DEFAULT_WINDOW_SIZE, EMPTY_OFFSET, FIRST_INDEX, INVERTED_X_STYLE, INVERTED_Y_STYLE, buildListPlan, buildViewabilityPairs, createInitialListState, isSeparatorGapInRange, listEffectSignature, readLayoutLength, readScrollOffset, reduceList, resolveAccessibilityProps, resolveItemKey, } from '@symbiote-native/components';
 import { dlog, flattenStyle, } from '@symbiote-native/engine';
 import { ScrollView } from '../scroll-view';
 import { RefreshControl } from '../refresh-control';
@@ -148,34 +148,18 @@ export class VirtualizedList {
     // The offset we are imperatively driving native to before the scroll handle attaches (rides down
     // as contentOffset). A fresh object identity each push so the commit re-applies a repeated value.
     commandedOffset = undefined;
-    // --- reactive scalars (mutated by the native callbacks; markForCheck re-runs the CD) ---
-    scrollOffset = EMPTY_OFFSET;
-    viewportLength = EMPTY_OFFSET;
-    measureVersion = EMPTY_OFFSET;
-    // --- non-render state (the Angular twin of refs that never trigger a render) ---
-    metricsCore = {
-        count: EMPTY_OFFSET,
-        offsets: [],
-        lengths: [],
-        total: EMPTY_OFFSET,
-        first: FIRST_INDEX,
-        last: -1,
-        target: { first: FIRST_INDEX, last: -1 },
-        averageLength: EMPTY_OFFSET,
-    };
-    measured = new Map();
+    // The one folded state cell (the Angular twin of React's stateRef): scroll offset, viewport,
+    // measured lengths, committed window, edge/viewability dedup, MVCP anchor — all in IListState,
+    // driven by the shared reduceList. `renderVersion` bumps whenever a transition changes render
+    // state, so ngDoCheck's recompute-dedup can detect it (listState is a plain object, not tracked).
+    listState = createInitialListState();
+    renderVersion = EMPTY_OFFSET;
     cellMeasures = new Map();
     separatorOverrides = new Map();
-    // The previously committed window, grown by at most maxToRenderPerBatch per tick (no snap).
-    committedWindow = { first: FIRST_INDEX, last: -1 };
-    sentEndForContentLength = NO_CONTENT_LENGTH_SENT;
-    sentStartForContentLength = NO_CONTENT_LENGTH_SENT;
-    lastViewable = new Map();
+    // The adapter-owned debounce (minimumViewTime) and incremental-fill timers; the reducer only
+    // hands back a delay.
     viewableTimer = null;
     batchTimer = null;
-    hasInteracted = false;
-    appliedInitialScroll = false;
-    firstVisibleKey = null;
     // Dedupes the after-commit effects: they run only when the windowing signature changed.
     lastEffectSignature = '';
     // Dedupes ngDoCheck's own recompute. WITHOUT this, recomputeView() unconditionally rebuilds
@@ -269,22 +253,18 @@ export class VirtualizedList {
         if (offset === undefined)
             return;
         dlog(`Angular VirtualizedList onScroll offset=${offset}`);
-        // First scroll is the interaction that ungates waitForInteraction configs.
-        this.hasInteracted = true;
-        this.scrollOffset = offset;
         // A real native scroll supersedes any pending commanded offset.
         this.commandedOffset = undefined;
+        this.dispatch({ kind: 'scroll', offset });
         // Compose, don't clobber: internal windowing ran first, now the user's onScroll.
         this.onScroll?.(event);
-        this.cdr.markForCheck();
     };
     onLayoutTick = (event) => {
         const length = readLayoutLength(event, this.isHorizontal);
         if (length === undefined)
             return;
         dlog(`Angular VirtualizedList onLayout viewport=${length}`);
-        this.viewportLength = length;
-        this.cdr.markForCheck();
+        this.dispatch({ kind: 'layout', length });
     };
     // RefreshControl's refresh and ScrollView's accessibility events are real @Output()s now, bound
     // via (refresh)="handleRefresh()" / (accessibilityAction)="accessibilityActionTick($event)" etc.
@@ -306,13 +286,105 @@ export class VirtualizedList {
     };
     keyFor = (index) => {
         const item = this.getItem(this.data, index);
-        return this.keyExtractor ? this.keyExtractor(item, index) : String(index);
+        return resolveItemKey(item, index, this.keyExtractor);
     };
+    // The reducer inputs, folded off the @Input()s each call. The edge/viewability listeners map to
+    // `.observed` (Angular's "is anyone bound to this @Output()"), so the reducer emits only when the
+    // consumer listens — the same on-demand gating the prop-callback era had.
+    buildInputs() {
+        return {
+            data: this.data,
+            getItem: this.getItem,
+            getItemCount: this.getItemCount,
+            keyExtractor: this.keyExtractor,
+            getItemLayout: this.getItemLayout,
+            horizontal: this.isHorizontal,
+            windowSize: this.windowSizeValue,
+            initialNumToRender: this.initialNumToRenderValue,
+            maxToRenderPerBatch: this.maxToRenderPerBatchValue,
+            updateCellsBatchingPeriod: this.updateCellsBatchingPeriodValue,
+            onEndReachedThreshold: this.onEndReachedThresholdValue,
+            onStartReachedThreshold: this.onStartReachedThresholdValue,
+            onEndReachedActive: this.endReached.observed,
+            onStartReachedActive: this.startReached.observed,
+            viewabilityPairs: buildViewabilityPairs(this.viewableItemsChanged.observed
+                ? (info) => this.viewableItemsChanged.emit(info)
+                : undefined, this.viewabilityConfig, this.viewabilityConfigCallbackPairs),
+            maintainVisibleContentPosition: this.maintainVisibleContentPosition,
+            initialScrollIndex: this.initialScrollIndex,
+        };
+    }
+    // Map a native event / imperative call to an action, run the returned effects, and mark the view
+    // dirty when render state changed (the native callbacks fire outside Angular's own bindings).
+    dispatch(action) {
+        const inputs = this.buildInputs();
+        const result = reduceList(this.listState, action, inputs);
+        this.runEffects(result.effects, inputs);
+        if (result.changed) {
+            this.renderVersion += 1;
+            this.cdr.markForCheck();
+        }
+    }
+    runEffects(effects, inputs) {
+        for (const effect of effects) {
+            switch (effect.kind) {
+                case 'scroll-to':
+                    this.scrollToPixel(effect.offset, effect.animated);
+                    break;
+                case 'fire-end-reached':
+                    this.endReached.emit({ distanceFromEnd: effect.distanceFromEnd });
+                    break;
+                case 'fire-start-reached':
+                    this.startReached.emit({ distanceFromStart: effect.distanceFromStart });
+                    break;
+                case 'fire-scroll-to-index-failed':
+                    this.scrollToIndexFailed.emit({
+                        index: effect.index,
+                        highestMeasuredFrameIndex: effect.highestMeasuredFrameIndex,
+                        averageItemLength: effect.averageItemLength,
+                    });
+                    break;
+                case 'schedule-refill': {
+                    if (this.batchTimer !== null)
+                        clearTimeout(this.batchTimer);
+                    this.batchTimer = setTimeout(() => {
+                        this.batchTimer = null;
+                        this.dispatch({ kind: 'batch-tick' });
+                    }, effect.delay);
+                    break;
+                }
+                case 'fire-viewable': {
+                    const pairs = inputs.viewabilityPairs;
+                    const info = effect.info;
+                    const map = effect.map;
+                    const fire = () => {
+                        for (const pair of pairs)
+                            pair.onViewableItemsChanged(info);
+                        this.dispatch({ kind: 'viewable-fired', map });
+                    };
+                    if (this.viewableTimer !== null) {
+                        clearTimeout(this.viewableTimer);
+                        this.viewableTimer = null;
+                    }
+                    if (effect.delay > EMPTY_OFFSET) {
+                        this.viewableTimer = setTimeout(() => {
+                            this.viewableTimer = null;
+                            fire();
+                        }, effect.delay);
+                    }
+                    else {
+                        fire();
+                    }
+                    break;
+                }
+            }
+        }
+    }
     // Once-per-CD recompute, BEFORE the template bindings are read (so the freshly computed
     // template-bound fields render this pass — computing them in ngAfterContentChecked instead would
-    // trip ExpressionChangedAfterItHasBeenChecked). recomputeMetrics owns the controlled committedWindow
-    // throttle (the side effect React runs during render); ngDoCheck is its single evaluation point, so
-    // the window grows exactly one step per CD. The projected templates (ContentChild) are resolved
+    // trip ExpressionChangedAfterItHasBeenChecked). The dedup guard runs refresh-metrics (which owns
+    // the controlled committedWindow throttle) only when something relevant changed, so the window
+    // grows exactly one step per meaningful CD. The projected templates (ContentChild) are resolved
     // from the second CD on; the first paint (count/viewport still 0) corrects on the layout-driven CD.
     ngDoCheck() {
         const recomputeInputs = [
@@ -329,9 +401,8 @@ export class VirtualizedList {
             this.maintainVisibleContentPosition,
             this.style,
             this.contentContainerStyle,
-            this.scrollOffset,
-            this.viewportLength,
-            this.measureVersion,
+            // Folds scroll / layout / measure / batch-tick: dispatch bumps renderVersion on any change.
+            this.renderVersion,
             this.headerDir !== undefined,
             this.footerDir !== undefined,
             this.emptyDir !== undefined,
@@ -344,21 +415,18 @@ export class VirtualizedList {
             previous.every((value, index) => value === recomputeInputs[index])) {
             return;
         }
-        this.recomputeMetrics();
+        // The single derive-per-CD: recompute the window off the current state before the view reads it.
+        reduceList(this.listState, { kind: 'refresh-metrics' }, this.buildInputs());
         this.recomputeView();
     }
     ngAfterViewChecked() {
-        const m = this.metricsCore;
-        const signature = `${this.scrollOffset}|${this.viewportLength}|${m.first}|${m.last}|${m.count}|${m.total}|${this.measureVersion}`;
+        const signature = listEffectSignature(this.listState);
         if (signature === this.lastEffectSignature)
             return;
         this.lastEffectSignature = signature;
-        this.effectBatchFill();
-        this.effectEndReached();
-        this.effectStartReached();
-        this.effectViewability();
-        this.effectInitialScroll();
-        this.effectMaintainVisibleContentPosition();
+        const inputs = this.buildInputs();
+        const result = reduceList(this.listState, { kind: 'commit' }, inputs);
+        this.runEffects(result.effects, inputs);
     }
     ngOnDestroy() {
         if (this.viewableTimer !== null)
@@ -366,38 +434,8 @@ export class VirtualizedList {
         if (this.batchTimer !== null)
             clearTimeout(this.batchTimer);
     }
-    recomputeMetrics() {
-        const count = this.getItemCount(this.data);
-        const gil = this.getItemLayout;
-        const data = this.data;
-        const fixedLayout = gil !== undefined
-            ? (index) => {
-                const layout = gil(data, index);
-                return { length: layout.length, offset: layout.offset };
-            }
-            : undefined;
-        const averageLength = fixedLayout !== undefined
-            ? count > FIRST_INDEX
-                ? fixedLayout(FIRST_INDEX).length
-                : EMPTY_OFFSET
-            : averageMeasuredLength(this.measured);
-        const { offsets, lengths, total } = buildOffsets(count, this.measured, fixedLayout, averageLength);
-        const target = computeWindow(count, offsets, lengths, this.scrollOffset, this.viewportLength, this.windowSizeValue, this.initialNumToRenderValue);
-        const throttled = throttleWindow(target, this.committedWindow, this.maxToRenderPerBatchValue);
-        this.committedWindow = throttled;
-        this.metricsCore = {
-            count,
-            offsets,
-            lengths,
-            total,
-            first: throttled.first,
-            last: throttled.last,
-            target,
-            averageLength,
-        };
-    }
     recomputeView() {
-        const m = this.metricsCore;
+        const m = this.listState.metrics;
         this.itemCount = m.count;
         const hasHeader = this.headerDir !== undefined;
         const hasSeparators = this.separatorDir !== undefined;
@@ -428,7 +466,7 @@ export class VirtualizedList {
             this.leadingSpacerStyle = null;
             this.trailingSpacerStyle = null;
             this.renderedStickyIndices = undefined;
-            dlog(`Angular VirtualizedList empty (viewport=${this.viewportLength})`);
+            dlog(`Angular VirtualizedList empty (viewport=${this.listState.viewportLength})`);
             return;
         }
         const plan = buildListPlan({
@@ -473,7 +511,7 @@ export class VirtualizedList {
         }
         this.windowCells = cells;
         dlog(`Angular VirtualizedList window [${m.first}, ${m.last}] of ${m.count} ` +
-            `(offset=${this.scrollOffset}, viewport=${this.viewportLength}, rendered=${cells.length})`);
+            `(offset=${this.listState.scrollOffset}, viewport=${this.listState.viewportLength}, rendered=${cells.length})`);
     }
     buildSeparatorContext(index, item) {
         const overrides = this.separatorOverrides.get(index);
@@ -503,17 +541,13 @@ export class VirtualizedList {
         if (existing !== undefined)
             return existing;
         const measure = (event) => {
-            if (this.getItemLayout !== undefined)
-                return;
             const length = readLayoutLength(event, this.isHorizontal);
             if (length === undefined)
                 return;
-            if (this.measured.get(index) === length)
-                return;
-            this.measured.set(index, length);
             dlog(`Angular VirtualizedList cell ${index} measured length=${length}`);
-            this.measureVersion += 1;
-            this.cdr.markForCheck();
+            // The reducer guards a fixed getItemLayout and a repeated length; a no-op leaves state and the
+            // view untouched (dispatch marks for check only when something changed).
+            this.dispatch({ kind: 'measure', index, length });
         };
         this.cellMeasures.set(index, measure);
         return measure;
@@ -528,8 +562,8 @@ export class VirtualizedList {
         return typeof value === 'object' && value !== null && 'nativeEvent' in value;
     }
     mergeSeparator(gapIndex, patch) {
-        const count = this.metricsCore.count;
-        if (gapIndex < FIRST_INDEX || gapIndex > count - 2)
+        const count = this.listState.metrics.count;
+        if (!isSeparatorGapInRange(gapIndex, count))
             return;
         this.separatorOverrides.set(gapIndex, { ...this.separatorOverrides.get(gapIndex), ...patch });
         this.cdr.markForCheck();
@@ -552,37 +586,34 @@ export class VirtualizedList {
         };
     }
     // ---- imperative handle (the shared IVirtualizedListHandle surface) ----
+    // Each scroll resolves to an offset (or a scroll-to-index failure) inside the reducer, then rides
+    // the scroll-to effect through scrollToPixel.
     scrollToOffset(params) {
-        this.scrollToPixel(params.offset, params.animated ?? true);
+        this.dispatch({
+            kind: 'scroll-to-offset',
+            offset: params.offset,
+            animated: params.animated ?? true,
+        });
     }
     scrollToIndex(params) {
-        const m = this.metricsCore;
-        // No getItemLayout AND the target is past the last measured cell: report the failure instead of
-        // scrolling to a fabricated estimate (RN VirtualizedList.js).
-        if (this.getItemLayout === undefined && params.index > highestMeasuredIndex(this.measured)) {
-            dlog(`Angular VirtualizedList onScrollToIndexFailed index=${params.index} ` +
-                `highestMeasured=${highestMeasuredIndex(this.measured)} (no getItemLayout)`);
-            this.scrollToIndexFailed.emit({
-                index: params.index,
-                highestMeasuredFrameIndex: highestMeasuredIndex(this.measured),
-                averageItemLength: m.averageLength,
-            });
-            return;
-        }
-        this.scrollToPixel(this.offsetForIndexLocal(params.index, params.viewPosition ?? FIRST_INDEX, params.viewOffset ?? EMPTY_OFFSET), params.animated ?? true);
+        this.dispatch({
+            kind: 'scroll-to-index',
+            index: params.index,
+            animated: params.animated ?? true,
+            viewPosition: params.viewPosition ?? FIRST_INDEX,
+            viewOffset: params.viewOffset ?? EMPTY_OFFSET,
+        });
     }
     scrollToItem(params) {
-        const count = this.metricsCore.count;
-        for (let index = FIRST_INDEX; index < count; index += 1) {
-            if (this.getItem(this.data, index) === params.item) {
-                this.scrollToPixel(this.offsetForIndexLocal(index, params.viewPosition ?? FIRST_INDEX, EMPTY_OFFSET), params.animated ?? true);
-                return;
-            }
-        }
-        dlog('Angular VirtualizedList scrollToItem: item not found');
+        this.dispatch({
+            kind: 'scroll-to-item',
+            item: params.item,
+            animated: params.animated ?? true,
+            viewPosition: params.viewPosition ?? FIRST_INDEX,
+        });
     }
     scrollToEnd(params) {
-        this.scrollToPixel(Math.max(EMPTY_OFFSET, this.metricsCore.total - this.viewportLength), params?.animated ?? true);
+        this.dispatch({ kind: 'scroll-to-end', animated: params?.animated ?? true });
     }
     flashScrollIndicators() {
         this.scrollView?.flashScrollIndicators();
@@ -600,7 +631,7 @@ export class VirtualizedList {
         return this.scrollView?.getScrollNode() ?? null;
     }
     recordInteraction() {
-        this.hasInteracted = true;
+        this.dispatch({ kind: 'record-interaction' });
     }
     scrollToPixel(offset, animated) {
         const clamped = Math.max(EMPTY_OFFSET, offset);
@@ -616,167 +647,6 @@ export class VirtualizedList {
         this.commandedOffset = target;
         this.cdr.markForCheck();
     }
-    offsetForIndexLocal(index, viewPosition, viewOffset) {
-        const m = this.metricsCore;
-        return offsetForIndex(index, viewPosition, viewOffset, m.count, m.offsets, m.lengths, this.viewportLength);
-    }
-    // ---- after-commit effects (run in ngAfterViewChecked, the post-render seam) ----
-    // Batch fill: when the throttled window has not reached the target, schedule a re-render so the
-    // window keeps filling toward target over successive ticks (RN's incremental fill).
-    effectBatchFill() {
-        const m = this.metricsCore;
-        if (this.batchTimer !== null) {
-            clearTimeout(this.batchTimer);
-            this.batchTimer = null;
-        }
-        if (m.first <= m.target.first && m.last >= m.target.last)
-            return;
-        this.batchTimer = setTimeout(() => {
-            this.batchTimer = null;
-            this.measureVersion += 1;
-            this.cdr.markForCheck();
-        }, this.updateCellsBatchingPeriodValue);
-    }
-    // onEndReached: fire only when the actual last cell is rendered AND within threshold; dedup by
-    // content length; re-arm on scroll away from the end (RN _maybeCallOnEdgeReached).
-    effectEndReached() {
-        if (!this.endReached.observed || this.viewportLength <= EMPTY_OFFSET)
-            return;
-        const m = this.metricsCore;
-        const { distanceFromEnd, withinThreshold } = computeEndReached(m.total, this.scrollOffset, this.viewportLength, this.onEndReachedThresholdValue);
-        const lastCellRendered = m.last === m.count - 1;
-        if (withinThreshold && lastCellRendered && this.sentEndForContentLength !== m.total) {
-            this.sentEndForContentLength = m.total;
-            dlog(`Angular VirtualizedList endReached distanceFromEnd=${distanceFromEnd} ` +
-                `(last=${m.last} of ${m.count}, contentLength=${m.total})`);
-            this.endReached.emit({ distanceFromEnd });
-        }
-        if (!withinThreshold)
-            this.sentEndForContentLength = NO_CONTENT_LENGTH_SENT;
-    }
-    // startReached: the top-edge twin of endReached.
-    effectStartReached() {
-        if (!this.startReached.observed || this.viewportLength <= EMPTY_OFFSET)
-            return;
-        const m = this.metricsCore;
-        const { distanceFromStart, withinThreshold } = computeStartReached(this.scrollOffset, this.viewportLength, this.onStartReachedThresholdValue);
-        const firstCellRendered = m.first === FIRST_INDEX;
-        if (withinThreshold && firstCellRendered && this.sentStartForContentLength !== m.total) {
-            this.sentStartForContentLength = m.total;
-            dlog(`Angular VirtualizedList startReached distanceFromStart=${distanceFromStart} ` +
-                `(first=${m.first}, contentLength=${m.total})`);
-            this.startReached.emit({ distanceFromStart });
-        }
-        if (!withinThreshold)
-            this.sentStartForContentLength = NO_CONTENT_LENGTH_SENT;
-    }
-    // Viewability: recompute which rendered cells clear the threshold and, if the viewable set
-    // changed, fire viewableItemsChanged + every config/callback pair, honoring minimumViewTime.
-    effectViewability() {
-        const m = this.metricsCore;
-        const pairs = buildViewabilityPairs(this.viewableItemsChanged.observed
-            ? (info) => this.viewableItemsChanged.emit(info)
-            : undefined, this.viewabilityConfig, this.viewabilityConfigCallbackPairs);
-        if (pairs.length === EMPTY_OFFSET || this.viewportLength <= EMPTY_OFFSET)
-            return;
-        if (m.count === FIRST_INDEX)
-            return;
-        const { tokens, map } = computeViewableSet({
-            first: m.first,
-            last: m.last,
-            count: m.count,
-            offsets: m.offsets,
-            lengths: m.lengths,
-            scrollOffset: this.scrollOffset,
-            viewportLength: this.viewportLength,
-            data: this.data,
-            getItem: this.getItem,
-            keyExtractor: this.keyExtractor,
-            pairs,
-            hasInteracted: this.hasInteracted,
-        });
-        const diff = diffViewable(this.lastViewable, map, tokens);
-        if (!diff.hasChanged)
-            return;
-        const commitAndFire = () => {
-            this.lastViewable = map;
-            dlog(`Angular VirtualizedList viewable=${tokens.length} changed=${diff.changed.length} ` +
-                `(window [${m.first}, ${m.last}])`);
-            const info = {
-                viewableItems: tokens,
-                changed: diff.changed,
-            };
-            for (const pair of pairs)
-                pair.onViewableItemsChanged(info);
-        };
-        const minimumViewTime = maxMinimumViewTime(pairs);
-        if (this.viewableTimer !== null) {
-            clearTimeout(this.viewableTimer);
-            this.viewableTimer = null;
-        }
-        if (minimumViewTime > EMPTY_OFFSET) {
-            dlog(`Angular VirtualizedList viewability debounce ${minimumViewTime}ms (window [${m.first}, ${m.last}])`);
-            this.viewableTimer = setTimeout(() => {
-                this.viewableTimer = null;
-                commitAndFire();
-            }, minimumViewTime);
-            return;
-        }
-        commitAndFire();
-    }
-    // initialScrollIndex: once the first viewport is known, jump to that index a single time.
-    effectInitialScroll() {
-        if (this.initialScrollIndex === undefined || this.appliedInitialScroll)
-            return;
-        if (this.viewportLength <= EMPTY_OFFSET || this.metricsCore.count === FIRST_INDEX)
-            return;
-        this.appliedInitialScroll = true;
-        // The initial jump is instant (RN does not animate initialScrollIndex).
-        this.scrollToPixel(this.offsetForIndexLocal(this.initialScrollIndex, FIRST_INDEX, EMPTY_OFFSET), false);
-    }
-    // maintainVisibleContentPosition JS anchor adjustment: track the key of the item at
-    // minIndexForVisible; when a prepend moves it down, add the inserted extent in the leading SPACER
-    // (the off-window items native MVCP cannot see) to scrollOffset so the anchored item does not jump
-    // (RN getDerivedStateFromProps).
-    effectMaintainVisibleContentPosition() {
-        const m = this.metricsCore;
-        if (this.maintainVisibleContentPosition === undefined || m.count === FIRST_INDEX) {
-            this.firstVisibleKey = null;
-            return;
-        }
-        const minIndexForVisible = this.maintainVisibleContentPosition.minIndexForVisible;
-        const newFirstVisibleKey = m.count > minIndexForVisible ? this.keyFor(minIndexForVisible) : null;
-        const prevKey = this.firstVisibleKey;
-        if (prevKey !== null && newFirstVisibleKey !== null && prevKey !== newFirstVisibleKey) {
-            let anchorIndex = -1;
-            for (let index = minIndexForVisible; index < m.count; index += 1) {
-                if (this.keyFor(index) === prevKey) {
-                    anchorIndex = index;
-                    break;
-                }
-            }
-            if (anchorIndex > minIndexForVisible) {
-                const spacerEnd = Math.min(anchorIndex, this.committedWindow.first);
-                const insertedExtent = spacerEnd > minIndexForVisible
-                    ? m.offsets[spacerEnd] - m.offsets[minIndexForVisible]
-                    : EMPTY_OFFSET;
-                if (insertedExtent > EMPTY_OFFSET) {
-                    const autoThreshold = this.maintainVisibleContentPosition.autoscrollToTopThreshold;
-                    const anchoredNearTop = autoThreshold !== undefined && this.scrollOffset <= autoThreshold;
-                    if (anchoredNearTop) {
-                        dlog(`Angular VirtualizedList MVCP autoscroll-to-top (offset=${this.scrollOffset} <= ${autoThreshold})`);
-                        this.scrollToPixel(EMPTY_OFFSET, true);
-                    }
-                    else {
-                        dlog(`Angular VirtualizedList MVCP adjust +${insertedExtent}px ` +
-                            `(anchor "${prevKey}" moved ${minIndexForVisible}->${anchorIndex})`);
-                        this.scrollToPixel(this.scrollOffset + insertedExtent, false);
-                    }
-                }
-            }
-        }
-        this.firstVisibleKey = newFirstVisibleKey;
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: VirtualizedList, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: VirtualizedList, isStandalone: true, selector: "VirtualizedList", inputs: { data: "data", getItem: "getItem", getItemCount: "getItemCount", keyExtractor: "keyExtractor", getItemLayout: "getItemLayout", horizontal: "horizontal", inverted: "inverted", extraData: "extraData", onEndReachedThreshold: "onEndReachedThreshold", onStartReachedThreshold: "onStartReachedThreshold", refreshing: "refreshing", progressViewOffset: "progressViewOffset", refreshRequested: "refreshRequested", viewabilityConfig: "viewabilityConfig", viewabilityConfigCallbackPairs: "viewabilityConfigCallbackPairs", initialNumToRender: "initialNumToRender", initialScrollIndex: "initialScrollIndex", maxToRenderPerBatch: "maxToRenderPerBatch", updateCellsBatchingPeriod: "updateCellsBatchingPeriod", windowSize: "windowSize", stickyHeaderIndices: "stickyHeaderIndices", maintainVisibleContentPosition: "maintainVisibleContentPosition", onScroll: "onScroll", onScrollBeginDrag: "onScrollBeginDrag", onScrollEndDrag: "onScrollEndDrag", onMomentumScrollBegin: "onMomentumScrollBegin", onMomentumScrollEnd: "onMomentumScrollEnd", scrollEventThrottle: "scrollEventThrottle", keyboardShouldPersistTaps: "keyboardShouldPersistTaps", keyboardDismissMode: "keyboardDismissMode", style: "style", contentContainerStyle: "contentContainerStyle", testID: "testID", nativeID: "nativeID", accessible: "accessible", accessibilityLabel: "accessibilityLabel", accessibilityHint: "accessibilityHint", accessibilityRole: "accessibilityRole", accessibilityState: "accessibilityState", accessibilityValue: "accessibilityValue", accessibilityActions: "accessibilityActions", accessibilityLabelledBy: "accessibilityLabelledBy", importantForAccessibility: "importantForAccessibility", accessibilityLiveRegion: "accessibilityLiveRegion", screenReaderFocusable: "screenReaderFocusable", accessibilityViewIsModal: "accessibilityViewIsModal", accessibilityElementsHidden: "accessibilityElementsHidden", accessibilityIgnoresInvertColors: "accessibilityIgnoresInvertColors", accessibilityLanguage: "accessibilityLanguage", accessibilityRespondsToUserInteraction: "accessibilityRespondsToUserInteraction", accessibilityShowsLargeContentViewer: "accessibilityShowsLargeContentViewer", accessibilityLargeContentTitle: "accessibilityLargeContentTitle", role: "role", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaLive: "ariaLive", ariaHidden: "ariaHidden", ariaBusy: "ariaBusy", ariaChecked: "ariaChecked", ariaDisabled: "ariaDisabled", ariaExpanded: "ariaExpanded", ariaSelected: "ariaSelected", ariaModal: "ariaModal", ariaValueMax: "ariaValueMax", ariaValueMin: "ariaValueMin", ariaValueNow: "ariaValueNow", ariaValueText: "ariaValueText" }, outputs: { endReached: "endReached", startReached: "startReached", refresh: "refresh", viewableItemsChanged: "viewableItemsChanged", scrollToIndexFailed: "scrollToIndexFailed", accessibilityAction: "accessibilityAction", accessibilityTap: "accessibilityTap", magicTap: "magicTap", accessibilityEscape: "accessibilityEscape" }, queries: [{ propertyName: "itemDir", first: true, predicate: VListItemDirective, descendants: true }, { propertyName: "headerDir", first: true, predicate: VListHeaderDirective, descendants: true }, { propertyName: "footerDir", first: true, predicate: VListFooterDirective, descendants: true }, { propertyName: "emptyDir", first: true, predicate: VListEmptyDirective, descendants: true }, { propertyName: "separatorDir", first: true, predicate: VListSeparatorDirective, descendants: true }], viewQueries: [{ propertyName: "scrollView", first: true, predicate: ScrollView, descendants: true }], ngImport: i0, template: `
     <ScrollView