@symbiote-native/angular 0.6.2 → 0.8.0

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

@@ -23,14 +23,16 @@
 //
 // 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, buildListPlan, buildViewabilityPairs, createInitialListState, isSeparatorGapInRange, listEffectSignature, readLayoutLength, readScrollOffset, reduceList, resolveAccessibilityProps, resolveItemKey, } from '@symbiote-native/components';
+import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, Input, Output, ViewChild, computed, inject, signal, } 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, buildListPlan, buildViewabilityPairs, computeWindow, createInitialListState, isSeparatorGapInRange, listEffectSignature, readLayoutLength, readLayoutOffset, readScrollOffset, reduceList, resolveAccessibilityProps, resolveItemKey, } from '@symbiote-native/components';
 import { dlog, flattenStyle, } from '@symbiote-native/engine';
+import { countAngular } from '../../diagnostics';
 import { ScrollView } from '../scroll-view';
 import { RefreshControl } from '../refresh-control';
-import { anchorHostStyle, ViewHost } from '../../primitives';
+import { anchorHostStyle, SymbioteStyleInputDirective, ViewHost, } from '../../primitives';
 import { VListEmptyDirective, VListFooterDirective, VListHeaderDirective, VListItemDirective, VListOutletDirective, VListSeparatorDirective, } from './directives';
 import * as i0 from "@angular/core";
+import * as i1 from "../../primitives/shared";
 export { VListEmptyDirective, VListFooterDirective, VListHeaderDirective, VListItemDirective, VListSeparatorDirective, } from './directives';
 export class VirtualizedList {
     // The list's edge/viewability/failure events as real Angular events: `(endReached)="…"`, not
@@ -134,7 +136,13 @@ export class VirtualizedList {
     // --- template-bound view state, assembled in ngDoCheck (recomputeView) ---
     itemCount = EMPTY_OFFSET;
     windowCells = [];
+    // The nearest sticky-header cell force-mounted outside [first,last] (plan.forcedStickyCell), the
+    // Angular twin of RN's _ensureClosestStickyHeader. Rendered ahead of windowCells, right after the
+    // leading spacer, with gapSpacerStyle filling the gap to the window's own first cell — see
+    // buildListPlan's doc comment for the exact child order this assumes.
+    forcedStickyCell = null;
     leadingSpacerStyle = null;
+    gapSpacerStyle = null;
     trailingSpacerStyle = null;
     cellStyle = undefined;
     renderedStickyIndices = undefined;
@@ -155,6 +163,23 @@ export class VirtualizedList {
     listState = createInitialListState();
     renderVersion = EMPTY_OFFSET;
     cellMeasures = new Map();
+    // A cell's context object is the ONLY thing its stamped view reads, and VListOutletDirective
+    // refreshes that view whenever the object's IDENTITY changes. recomputeView runs on every frame
+    // the window moves, so minting a fresh context per cell made a four-row slide cost a refresh of
+    // EVERY cell in the window. MEASURED on PATH B geometry (544 entries, 320px viewport, RN
+    // defaults), per fling frame: 233-cell window, 4 cells genuinely entering, 228 outlet updates —
+    // each one a copyContextFields plus a markForCheck that walks to the root. Solid, same geometry,
+    // same shared reducer, same engine output: 4. Handing back the SAME object for a cell whose item
+    // and index did not move keeps `[vListOutletContext]` reference-equal, so ngOnChanges never fires
+    // for it. The fast adapters get this by construction — Solid's <For> is keyed on the cell KEY
+    // strings precisely so "the plan's freshly-built cell objects" cannot rebuild every row
+    // (adapters/solid/src/components/virtualized-list/shared.tsx, the cellKeys memo).
+    cellContexts = new Map();
+    nextCellContexts = new Map();
+    // Everything a cell's CONTENT can depend on that is not its own item identity. RN's contract for
+    // "re-render the cells, the data object itself did not change" is extraData; without it here an
+    // extraData flip would reuse every context and repaint nothing.
+    cellContextEpoch = undefined;
     separatorOverrides = new Map();
     // The adapter-owned debounce (minimumViewTime) and incremental-fill timers; the reducer only
     // hands back a delay.
@@ -179,7 +204,25 @@ export class VirtualizedList {
     // onto (see anchorHostStyle's doc comment) — NOT `scrollView` above, which targets the real
     // inner `<ScrollView>` one level down (itself its own separate anchor host).
     elementRef = inject(ElementRef);
-    get foldedAccessibility() {
+    // Bridges the non-reactive @Input fields into the reactive graph so the computed below can
+    // memoize a bag derived from them (the same bridge ScrollView's shared.ts uses - read its comment
+    // for why signal inputs are not an option while this package's unit suite runs on JIT).
+    //
+    // ONLY safe for a bag whose every dependency is an @Input. This list's window machinery
+    // (listState, renderVersion, windowCells, the measured metrics) is driven from scroll/layout
+    // callbacks that never touch ngOnChanges, so nothing derived from it may ride this signal - it
+    // would memoize a window that stops re-computing mid-scroll. Make that state its own signal
+    // instead of widening this one.
+    inputsRevision = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputsRevision" }] : /* istanbul ignore next */ []));
+    // MEASURED: the template feeds 20 separate <ScrollView> inputs off this one bag, and Angular does
+    // not cache a getter across binding expressions - as a getter it rebuilt the object 20 times per
+    // refresh, and every consumer saw a fresh reference, so all 20 reported "changed" and wrote
+    // through to the ScrollView. A computed evaluates once and hands back the SAME object until an
+    // input actually changes. Every dependency below is an @Input, which is what makes
+    // inputsRevision a complete dependency set here.
+    foldedAccessibility = computed(() => {
+        this.inputsRevision();
         return resolveAccessibilityProps({
             testID: this.testID,
             nativeID: this.nativeID,
@@ -217,7 +260,8 @@ export class VirtualizedList {
             'aria-valuenow': this.ariaValueNow,
             'aria-valuetext': this.ariaValueText,
         });
-    }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "foldedAccessibility" }] : /* istanbul ignore next */ []));
     get shouldRenderRefreshControl() {
         return this.refreshRequested ?? this.refresh.observed;
     }
@@ -237,7 +281,7 @@ export class VirtualizedList {
         return this.maxToRenderPerBatch ?? DEFAULT_MAX_TO_RENDER_PER_BATCH;
     }
     get updateCellsBatchingPeriodValue() {
-        return this.updateCellsBatchingPeriod ?? DEFAULT_UPDATE_CELLS_BATCHING_PERIOD;
+        return (this.updateCellsBatchingPeriod ?? DEFAULT_UPDATE_CELLS_BATCHING_PERIOD);
     }
     get onEndReachedThresholdValue() {
         return this.onEndReachedThreshold ?? DEFAULT_END_REACHED_THRESHOLD;
@@ -249,6 +293,7 @@ export class VirtualizedList {
     // flow through it, which an @Output() can't carry), so this is a stable arrow field passed
     // straight to [onScroll]. onLayout is a real @Output() now, bound via (layout)="onLayoutTick($event)".
     onScrollTick = (event) => {
+        countAngular('scrollTicks');
         const offset = readScrollOffset(event, this.isHorizontal);
         if (offset === undefined)
             return;
@@ -320,10 +365,46 @@ export class VirtualizedList {
         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();
-        }
+        if (!result.changed)
+            return;
+        this.renderVersion += 1;
+        if (this.isWindowSettled(action))
+            return;
+        countAngular('listMarks');
+        this.cdr.markForCheck();
+    }
+    // The reducer reports `changed` for EVERY scroll offset - it has to, since the offset feeds
+    // end-reached distance, viewability and the batch-fill timer, all handled by runEffects. The
+    // TEMPLATE reads none of those; it reads the window. Marking on the offset repainted the whole
+    // ancestor chain 60 times a second on a sticky screen for a window that had not moved.
+    //
+    // So the question here is "would a render leave the window exactly where it is", and it is asked
+    // of the state as it is NOW. It must NOT be answered by comparing the last-rendered window with
+    // the one before it: that window was derived from the PREVIOUS scroll offset, so once two
+    // consecutive derives agree the comparison reads "settled" for every offset that ever follows -
+    // no mark, no CD, no ngDoCheck, no refresh-metrics, so the window can never move again and the
+    // list goes permanently deaf mid-scroll (device: examples/angular Benchmark sticky path B froze
+    // at exactly the window the first viewport asked for, blank below it).
+    //
+    // computeWindow re-run over the CACHED offset table answers it directly. Two scans, no
+    // allocation - buildOffsets, the O(count) allocating half, still runs once per render only. It is
+    // the same function the render will use, so this cannot drift away from the window it predicts.
+    isWindowSettled(action) {
+        // A measurement rewrites the very offset table the prediction reads, so it has no cached
+        // geometry to answer from.
+        if (action.kind === 'measure')
+            return false;
+        const m = this.listState.metrics;
+        // Mid-fill: the committed window is still climbing toward target one batch step per render, and
+        // only a render advances it. Skipping the mark here is what stalls the incremental fill.
+        if (m.first !== m.target.first || m.last !== m.target.last)
+            return false;
+        const next = computeWindow(m.count, m.offsets, m.lengths, this.listState.scrollOffset, this.listState.viewportLength, this.windowSizeValue, this.initialNumToRenderValue);
+        const isSettled = next.first === m.target.first && next.last === m.target.last;
+        if (!isSettled)
+            dlog(`Angular VirtualizedList window moves [${m.first}, ${m.last}] -> ` +
+                `[${next.first}, ${next.last}] at offset ${this.listState.scrollOffset}`);
+        return isSettled;
     }
     runEffects(effects, inputs) {
         for (const effect of effects) {
@@ -335,7 +416,9 @@ export class VirtualizedList {
                     this.endReached.emit({ distanceFromEnd: effect.distanceFromEnd });
                     break;
                 case 'fire-start-reached':
-                    this.startReached.emit({ distanceFromStart: effect.distanceFromStart });
+                    this.startReached.emit({
+                        distanceFromStart: effect.distanceFromStart,
+                    });
                     break;
                 case 'fire-scroll-to-index-failed':
                     this.scrollToIndexFailed.emit({
@@ -380,6 +463,13 @@ export class VirtualizedList {
             }
         }
     }
+    // foldedAccessibility reads plain @Input fields, which are NOT reactive on their own - this bump
+    // is what tells that computed an input changed. It must stay in ngOnChanges: that is the single
+    // moment Angular has finished writing every changed input for this pass, and it runs before
+    // ngDoCheck below, so the recompute already sees the current values.
+    ngOnChanges() {
+        this.inputsRevision.update(revision => revision + 1);
+    }
     // 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). The dedup guard runs refresh-metrics (which owns
@@ -387,6 +477,7 @@ export class VirtualizedList {
     // 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() {
+        countAngular('listChecks');
         const recomputeInputs = [
             this.data,
             this.extraData,
@@ -400,6 +491,10 @@ export class VirtualizedList {
             this.stickyHeaderIndices,
             this.maintainVisibleContentPosition,
             this.style,
+            // `recomputeView` folds this into the committed style, but it arrives through
+            // addClass/removeClass, never as an @Input - so without it here no entry moves on a class
+            // toggle and the gate skips the recompute forever. Reference-stable, so the dedup holds.
+            anchorHostStyle(this.elementRef),
             this.contentContainerStyle,
             // Folds scroll / layout / measure / batch-tick: dispatch bumps renderVersion on any change.
             this.renderVersion,
@@ -416,6 +511,7 @@ export class VirtualizedList {
             return;
         }
         // The single derive-per-CD: recompute the window off the current state before the view reads it.
+        countAngular('listRecomputes');
         reduceList(this.listState, { kind: 'refresh-metrics' }, this.buildInputs());
         this.recomputeView();
     }
@@ -439,7 +535,9 @@ export class VirtualizedList {
         this.itemCount = m.count;
         const hasHeader = this.headerDir !== undefined;
         const hasSeparators = this.separatorDir !== undefined;
-        const stickySet = this.stickyHeaderIndices !== undefined ? new Set(this.stickyHeaderIndices) : undefined;
+        const stickySet = this.stickyHeaderIndices !== undefined
+            ? new Set(this.stickyHeaderIndices)
+            : undefined;
         this.resolvedContentContainerStyle = this.isHorizontal
             ? [this.contentContainerStyle, { width: m.total }]
             : this.contentContainerStyle;
@@ -459,11 +557,31 @@ export class VirtualizedList {
                 ? undefined
                 : {
                     ...this.maintainVisibleContentPosition,
-                    minIndexForVisible: this.maintainVisibleContentPosition.minIndexForVisible + (hasHeader ? 1 : 0),
+                    minIndexForVisible: this.maintainVisibleContentPosition.minIndexForVisible +
+                        (hasHeader ? 1 : 0),
                 };
+        // A change in anything a cell's content reads other than its own item invalidates every cached
+        // context: identity reuse is only sound while the reused object still describes the cell.
+        const epoch = [
+            this.data,
+            this.extraData,
+            this.getItem,
+            this.keyExtractor,
+        ];
+        const previousEpoch = this.cellContextEpoch;
+        this.cellContextEpoch = epoch;
+        if (previousEpoch === undefined ||
+            previousEpoch.length !== epoch.length ||
+            !previousEpoch.every((value, index) => value === epoch[index])) {
+            this.cellContexts.clear();
+        }
         if (m.count === FIRST_INDEX) {
+            this.cellContexts.clear();
+            this.nextCellContexts.clear();
             this.windowCells = [];
+            this.forcedStickyCell = null;
             this.leadingSpacerStyle = null;
+            this.gapSpacerStyle = null;
             this.trailingSpacerStyle = null;
             this.renderedStickyIndices = undefined;
             dlog(`Angular VirtualizedList empty (viewport=${this.listState.viewportLength})`);
@@ -479,40 +597,78 @@ export class VirtualizedList {
             keyFor: this.keyFor,
             stickyIndices: stickySet,
             hasHeader,
-            hasSeparators,
         });
         this.leadingSpacerStyle =
-            plan.leadingExtent > EMPTY_OFFSET ? this.spacerStyle(plan.leadingExtent) : null;
+            plan.leadingExtent > EMPTY_OFFSET
+                ? this.spacerStyle(plan.leadingExtent)
+                : null;
+        this.gapSpacerStyle =
+            plan.gapExtent > EMPTY_OFFSET ? this.spacerStyle(plan.gapExtent) : null;
         this.trailingSpacerStyle =
-            plan.trailingExtent > EMPTY_OFFSET ? this.spacerStyle(plan.trailingExtent) : null;
+            plan.trailingExtent > EMPTY_OFFSET
+                ? this.spacerStyle(plan.trailingExtent)
+                : null;
         this.renderedStickyIndices =
             stickySet !== undefined && plan.stickyChildPositions.length > 0
                 ? plan.stickyChildPositions
                 : undefined;
+        dlog(`STICKY[list] stickySet=${stickySet === undefined ? 'undefined' : JSON.stringify([...stickySet])} ` +
+            `childPositions=${JSON.stringify(plan.stickyChildPositions)} ` +
+            `forcedStickyCell=${plan.forcedStickyCell === undefined ? 'none' : plan.forcedStickyCell.index} ` +
+            `window=[${m.first},${m.last}] hasHeader=${this.headerDir !== undefined}`);
+        this.forcedStickyCell =
+            plan.forcedStickyCell !== undefined
+                ? this.buildWindowCell(plan.forcedStickyCell.index, plan.forcedStickyCell.key, false)
+                : null;
         const cells = [];
         for (const planned of plan.cells) {
-            const item = this.getItem(this.data, planned.index);
-            const context = {
-                $implicit: item,
-                index: planned.index,
-                separators: this.makeSeparators(planned.index),
-            };
-            let separatorContext;
-            if (hasSeparators && planned.index < m.last) {
-                separatorContext = this.buildSeparatorContext(planned.index, item);
-            }
-            cells.push({
-                key: planned.key,
-                index: planned.index,
-                context,
-                measure: this.cellMeasure(planned.index),
-                separatorContext,
-            });
+            // RN gates the separator on the last index of the DATA, not of the WINDOW
+            // (VirtualizedList.js:793 `const end = getItemCount(data) - 1`), and now that the separator
+            // lives INSIDE the measuring wrapper that distinction is load-bearing: gating on the window
+            // would make a cell's own measured height change as the window slides past it. Device-measured
+            // 2026-08-19 as a run of cells all shifting by exactly the divider's 1px.
+            const includeSeparator = hasSeparators && planned.index < m.count - 1;
+            cells.push(this.buildWindowCell(planned.index, planned.key, includeSeparator));
         }
         this.windowCells = cells;
+        // Swap, don't prune: a cell that left the window is simply absent from the pass that just ran,
+        // so the old map is the garbage and the new one is exactly the live set.
+        this.cellContexts = this.nextCellContexts;
+        this.nextCellContexts = new Map();
         dlog(`Angular VirtualizedList window [${m.first}, ${m.last}] of ${m.count} ` +
             `(offset=${this.listState.scrollOffset}, viewport=${this.listState.viewportLength}, rendered=${cells.length})`);
     }
+    // Assembles one cell (window or forced-sticky) — the context, measure closure, and optional
+    // separator context — so both plan.cells and plan.forcedStickyCell build identically.
+    buildWindowCell(index, key, includeSeparator) {
+        const item = this.getItem(this.data, index);
+        return {
+            key,
+            index,
+            context: this.contextFor(key, index, item),
+            measure: this.cellMeasure(index),
+            separatorContext: includeSeparator
+                ? this.buildSeparatorContext(index, item)
+                : undefined,
+        };
+    }
+    // The context for one cell, reused by identity when the cell did not move. See cellContexts.
+    contextFor(key, index, item) {
+        const cached = this.cellContexts.get(key);
+        if (cached !== undefined &&
+            cached.$implicit === item &&
+            cached.index === index) {
+            this.nextCellContexts.set(key, cached);
+            return cached;
+        }
+        const context = {
+            $implicit: item,
+            index,
+            separators: this.makeSeparators(index),
+        };
+        this.nextCellContexts.set(key, context);
+        return context;
+    }
     buildSeparatorContext(index, item) {
         const overrides = this.separatorOverrides.get(index);
         const highlighted = overrides?.highlighted ?? false;
@@ -526,7 +682,9 @@ export class VirtualizedList {
         // arbitrary separator props); the typed fields above stay authoritative.
         if (overrides !== undefined) {
             for (const key of Object.keys(overrides)) {
-                if (key === 'highlighted' || key === 'leadingItem' || key === 'trailingItem')
+                if (key === 'highlighted' ||
+                    key === 'leadingItem' ||
+                    key === 'trailingItem')
                     continue;
                 context[key] = overrides[key];
             }
@@ -544,10 +702,11 @@ export class VirtualizedList {
             const length = readLayoutLength(event, this.isHorizontal);
             if (length === undefined)
                 return;
-            dlog(`Angular VirtualizedList cell ${index} measured length=${length}`);
+            const offset = readLayoutOffset(event, this.isHorizontal);
+            dlog(`Angular VirtualizedList cell ${index} measured length=${length} offset=${offset ?? 'none'}`);
             // 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.dispatch({ kind: 'measure', index, length, offset });
         };
         this.cellMeasures.set(index, measure);
         return measure;
@@ -559,13 +718,16 @@ export class VirtualizedList {
             measure(event);
     }
     isSymbioteEvent(value) {
-        return typeof value === 'object' && value !== null && 'nativeEvent' in value;
+        return (typeof value === 'object' && value !== null && 'nativeEvent' in value);
     }
     mergeSeparator(gapIndex, patch) {
         const count = this.listState.metrics.count;
         if (!isSeparatorGapInRange(gapIndex, count))
             return;
-        this.separatorOverrides.set(gapIndex, { ...this.separatorOverrides.get(gapIndex), ...patch });
+        this.separatorOverrides.set(gapIndex, {
+            ...this.separatorOverrides.get(gapIndex),
+            ...patch,
+        });
         this.cdr.markForCheck();
     }
     makeSeparators(index) {
@@ -613,7 +775,10 @@ export class VirtualizedList {
         });
     }
     scrollToEnd(params) {
-        this.dispatch({ kind: 'scroll-to-end', animated: params?.animated ?? true });
+        this.dispatch({
+            kind: 'scroll-to-end',
+            animated: params?.animated ?? true,
+        });
     }
     flashScrollIndicators() {
         this.scrollView?.flashScrollIndicators();
@@ -647,36 +812,46 @@ export class VirtualizedList {
         this.commandedOffset = target;
         this.cdr.markForCheck();
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: VirtualizedList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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 }], usesOnChanges: true, hostDirectives: [{ directive: i1.SymbioteStyleInputDirective, inputs: ["style", "style"] }], ngImport: i0, template: `
     <ScrollView
       [horizontal]="isHorizontal"
       [style]="resolvedStyle"
       [contentContainerStyle]="resolvedContentContainerStyle"
-      [testID]="foldedAccessibility.testID"
-      [nativeID]="foldedAccessibility.nativeID"
-      [accessible]="foldedAccessibility.accessible"
-      [accessibilityLabel]="foldedAccessibility.accessibilityLabel"
-      [accessibilityHint]="foldedAccessibility.accessibilityHint"
-      [accessibilityRole]="foldedAccessibility.accessibilityRole"
-      [accessibilityState]="foldedAccessibility.accessibilityState"
-      [accessibilityValue]="foldedAccessibility.accessibilityValue"
-      [accessibilityActions]="foldedAccessibility.accessibilityActions"
-      [accessibilityLabelledBy]="foldedAccessibility.accessibilityLabelledBy"
-      [importantForAccessibility]="foldedAccessibility.importantForAccessibility"
-      [accessibilityLiveRegion]="foldedAccessibility.accessibilityLiveRegion"
-      [screenReaderFocusable]="foldedAccessibility.screenReaderFocusable"
-      [accessibilityViewIsModal]="foldedAccessibility.accessibilityViewIsModal"
-      [accessibilityElementsHidden]="foldedAccessibility.accessibilityElementsHidden"
-      [accessibilityIgnoresInvertColors]="foldedAccessibility.accessibilityIgnoresInvertColors"
-      [accessibilityLanguage]="foldedAccessibility.accessibilityLanguage"
+      [testID]="foldedAccessibility().testID"
+      [nativeID]="foldedAccessibility().nativeID"
+      [accessible]="foldedAccessibility().accessible"
+      [accessibilityLabel]="foldedAccessibility().accessibilityLabel"
+      [accessibilityHint]="foldedAccessibility().accessibilityHint"
+      [accessibilityRole]="foldedAccessibility().accessibilityRole"
+      [accessibilityState]="foldedAccessibility().accessibilityState"
+      [accessibilityValue]="foldedAccessibility().accessibilityValue"
+      [accessibilityActions]="foldedAccessibility().accessibilityActions"
+      [accessibilityLabelledBy]="foldedAccessibility().accessibilityLabelledBy"
+      [importantForAccessibility]="
+        foldedAccessibility().importantForAccessibility
+      "
+      [accessibilityLiveRegion]="foldedAccessibility().accessibilityLiveRegion"
+      [screenReaderFocusable]="foldedAccessibility().screenReaderFocusable"
+      [accessibilityViewIsModal]="
+        foldedAccessibility().accessibilityViewIsModal
+      "
+      [accessibilityElementsHidden]="
+        foldedAccessibility().accessibilityElementsHidden
+      "
+      [accessibilityIgnoresInvertColors]="
+        foldedAccessibility().accessibilityIgnoresInvertColors
+      "
+      [accessibilityLanguage]="foldedAccessibility().accessibilityLanguage"
       [accessibilityRespondsToUserInteraction]="
-        foldedAccessibility.accessibilityRespondsToUserInteraction
+        foldedAccessibility().accessibilityRespondsToUserInteraction
       "
       [accessibilityShowsLargeContentViewer]="
-        foldedAccessibility.accessibilityShowsLargeContentViewer
+        foldedAccessibility().accessibilityShowsLargeContentViewer
+      "
+      [accessibilityLargeContentTitle]="
+        foldedAccessibility().accessibilityLargeContentTitle
       "
-      [accessibilityLargeContentTitle]="foldedAccessibility.accessibilityLargeContentTitle"
       (accessibilityAction)="accessibilityActionTick($event)"
       (accessibilityTap)="accessibilityTapTick($event)"
       (magicTap)="magicTapTick($event)"
@@ -718,21 +893,43 @@ export class VirtualizedList {
         @if (leadingSpacerStyle !== null) {
           <symbiote-view [style]="leadingSpacerStyle"></symbiote-view>
         }
+        @if (forcedStickyCell !== null) {
+          <symbiote-view
+            (layout)="handleCellLayout(forcedStickyCell.measure, $event)"
+            [style]="cellStyle"
+          >
+            <ng-container
+              [vListOutlet]="itemDir?.templateRef"
+              [vListOutletContext]="forcedStickyCell.context"
+            ></ng-container>
+          </symbiote-view>
+        }
+        @if (gapSpacerStyle !== null) {
+          <symbiote-view [style]="gapSpacerStyle"></symbiote-view>
+        }
+        <!-- The separator sits INSIDE the measuring view, as RN's own cell renderer places it
+             (VirtualizedListCellRenderer.js:218-221). As a sibling it is an extra flex child, so
+             the chrome between two cells is gap + separator + gap while a spacer collapsing that
+             region replaces it with a single gap — every cell below the leading spacer then lands
+             short by (separator + gap) and the content jumps by that much whenever the window's
+             first index moves. Measured at exactly 17px on device 2026-08-19; see
+             .claude/rules/list-geometry-feedback-loop.md. -->
         @for (cell of windowCells; track cell.key) {
-          <symbiote-view (layout)="handleCellLayout(cell.measure, $event)" [style]="cellStyle">
+          <symbiote-view
+            (layout)="handleCellLayout(cell.measure, $event)"
+            [style]="cellStyle"
+          >
             <ng-container
               [vListOutlet]="itemDir?.templateRef"
               [vListOutletContext]="cell.context"
             ></ng-container>
-          </symbiote-view>
-          @if (cell.separatorContext !== undefined) {
-            <symbiote-view>
+            @if (cell.separatorContext !== undefined) {
               <ng-container
                 [vListOutlet]="separatorDir?.templateRef"
                 [vListOutletContext]="cell.separatorContext"
               ></ng-container>
-            </symbiote-view>
-          }
+            }
+          </symbiote-view>
         }
         @if (trailingSpacerStyle !== null) {
           <symbiote-view [style]="trailingSpacerStyle"></symbiote-view>
@@ -747,11 +944,14 @@ export class VirtualizedList {
     </ScrollView>
   `, isInline: true, dependencies: [{ kind: "component", type: ScrollView, selector: "ScrollView", inputs: ["style", "contentContainerStyle", "horizontal", "scrollEnabled", "showsVerticalScrollIndicator", "showsHorizontalScrollIndicator", "pagingEnabled", "bounces", "decelerationRate", "scrollEventThrottle", "contentInset", "contentOffset", "removeClippedSubviews", "snapToInterval", "snapToOffsets", "snapToAlignment", "snapToStart", "snapToEnd", "disableIntervalMomentum", "stickyHeaderIndices", "invertStickyHeaders", "StickyHeaderComponent", "keyboardDismissMode", "keyboardShouldPersistTaps", "maintainVisibleContentPosition", "alwaysBounceHorizontal", "alwaysBounceVertical", "centerContent", "scrollIndicatorInsets", "indicatorStyle", "directionalLockEnabled", "automaticallyAdjustKeyboardInsets", "contentInsetAdjustmentBehavior", "minimumZoomScale", "maximumZoomScale", "zoomScale", "bouncesZoom", "pinchGestureEnabled", "nestedScrollEnabled", "overScrollMode", "fadingEdgeLength", "persistentScrollbar", "endFillColor", "onScroll", "onScrollBeginDrag", "onScrollEndDrag", "onMomentumScrollBegin", "onMomentumScrollEnd", "testID", "nativeID", "accessible", "accessibilityLabel", "accessibilityHint", "accessibilityRole", "accessibilityState", "accessibilityValue", "accessibilityActions", "accessibilityLabelledBy", "importantForAccessibility", "accessibilityLiveRegion", "screenReaderFocusable", "accessibilityViewIsModal", "accessibilityElementsHidden", "accessibilityIgnoresInvertColors", "accessibilityLanguage", "accessibilityRespondsToUserInteraction", "accessibilityShowsLargeContentViewer", "accessibilityLargeContentTitle", "role", "aria-label", "aria-labelledby", "aria-live", "aria-hidden", "aria-busy", "aria-checked", "aria-disabled", "aria-expanded", "aria-selected", "aria-modal", "aria-valuemax", "aria-valuemin", "aria-valuenow", "aria-valuetext"] }, { kind: "component", type: RefreshControl, selector: "RefreshControl", inputs: ["refreshing", "tintColor", "title", "titleColor", "progressViewOffset", "colors", "progressBackgroundColor", "size", "enabled", "style", "testID", "nativeID", "accessible", "accessibilityLabel", "accessibilityHint", "accessibilityRole", "accessibilityState", "accessibilityValue", "accessibilityActions", "accessibilityLabelledBy", "importantForAccessibility", "accessibilityLiveRegion", "screenReaderFocusable", "accessibilityViewIsModal", "accessibilityElementsHidden", "accessibilityIgnoresInvertColors", "accessibilityLanguage", "accessibilityRespondsToUserInteraction", "accessibilityShowsLargeContentViewer", "accessibilityLargeContentTitle", "role", "aria-label", "aria-labelledby", "aria-live", "aria-hidden", "aria-busy", "aria-checked", "aria-disabled", "aria-expanded", "aria-selected", "aria-modal", "aria-valuemax", "aria-valuemin", "aria-valuenow", "aria-valuetext"], outputs: ["refresh", "accessibilityAction", "accessibilityTap", "magicTap", "accessibilityEscape"] }, { kind: "directive", type: VListOutletDirective, selector: "[vListOutlet]", inputs: ["vListOutlet", "vListOutletContext"] }, { kind: "component", type: ViewHost, selector: "symbiote-view, View" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: VirtualizedList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: VirtualizedList, decorators: [{
             type: Component,
             args: [{
                     selector: 'VirtualizedList',
                     standalone: true,
+                    hostDirectives: [
+                        { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+                    ],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     imports: [ScrollView, RefreshControl, VListOutletDirective, ViewHost],
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -760,30 +960,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       [horizontal]="isHorizontal"
       [style]="resolvedStyle"
       [contentContainerStyle]="resolvedContentContainerStyle"
-      [testID]="foldedAccessibility.testID"
-      [nativeID]="foldedAccessibility.nativeID"
-      [accessible]="foldedAccessibility.accessible"
-      [accessibilityLabel]="foldedAccessibility.accessibilityLabel"
-      [accessibilityHint]="foldedAccessibility.accessibilityHint"
-      [accessibilityRole]="foldedAccessibility.accessibilityRole"
-      [accessibilityState]="foldedAccessibility.accessibilityState"
-      [accessibilityValue]="foldedAccessibility.accessibilityValue"
-      [accessibilityActions]="foldedAccessibility.accessibilityActions"
-      [accessibilityLabelledBy]="foldedAccessibility.accessibilityLabelledBy"
-      [importantForAccessibility]="foldedAccessibility.importantForAccessibility"
-      [accessibilityLiveRegion]="foldedAccessibility.accessibilityLiveRegion"
-      [screenReaderFocusable]="foldedAccessibility.screenReaderFocusable"
-      [accessibilityViewIsModal]="foldedAccessibility.accessibilityViewIsModal"
-      [accessibilityElementsHidden]="foldedAccessibility.accessibilityElementsHidden"
-      [accessibilityIgnoresInvertColors]="foldedAccessibility.accessibilityIgnoresInvertColors"
-      [accessibilityLanguage]="foldedAccessibility.accessibilityLanguage"
+      [testID]="foldedAccessibility().testID"
+      [nativeID]="foldedAccessibility().nativeID"
+      [accessible]="foldedAccessibility().accessible"
+      [accessibilityLabel]="foldedAccessibility().accessibilityLabel"
+      [accessibilityHint]="foldedAccessibility().accessibilityHint"
+      [accessibilityRole]="foldedAccessibility().accessibilityRole"
+      [accessibilityState]="foldedAccessibility().accessibilityState"
+      [accessibilityValue]="foldedAccessibility().accessibilityValue"
+      [accessibilityActions]="foldedAccessibility().accessibilityActions"
+      [accessibilityLabelledBy]="foldedAccessibility().accessibilityLabelledBy"
+      [importantForAccessibility]="
+        foldedAccessibility().importantForAccessibility
+      "
+      [accessibilityLiveRegion]="foldedAccessibility().accessibilityLiveRegion"
+      [screenReaderFocusable]="foldedAccessibility().screenReaderFocusable"
+      [accessibilityViewIsModal]="
+        foldedAccessibility().accessibilityViewIsModal
+      "
+      [accessibilityElementsHidden]="
+        foldedAccessibility().accessibilityElementsHidden
+      "
+      [accessibilityIgnoresInvertColors]="
+        foldedAccessibility().accessibilityIgnoresInvertColors
+      "
+      [accessibilityLanguage]="foldedAccessibility().accessibilityLanguage"
       [accessibilityRespondsToUserInteraction]="
-        foldedAccessibility.accessibilityRespondsToUserInteraction
+        foldedAccessibility().accessibilityRespondsToUserInteraction
       "
       [accessibilityShowsLargeContentViewer]="
-        foldedAccessibility.accessibilityShowsLargeContentViewer
+        foldedAccessibility().accessibilityShowsLargeContentViewer
+      "
+      [accessibilityLargeContentTitle]="
+        foldedAccessibility().accessibilityLargeContentTitle
       "
-      [accessibilityLargeContentTitle]="foldedAccessibility.accessibilityLargeContentTitle"
       (accessibilityAction)="accessibilityActionTick($event)"
       (accessibilityTap)="accessibilityTapTick($event)"
       (magicTap)="magicTapTick($event)"
@@ -825,21 +1035,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         @if (leadingSpacerStyle !== null) {
           <symbiote-view [style]="leadingSpacerStyle"></symbiote-view>
         }
+        @if (forcedStickyCell !== null) {
+          <symbiote-view
+            (layout)="handleCellLayout(forcedStickyCell.measure, $event)"
+            [style]="cellStyle"
+          >
+            <ng-container
+              [vListOutlet]="itemDir?.templateRef"
+              [vListOutletContext]="forcedStickyCell.context"
+            ></ng-container>
+          </symbiote-view>
+        }
+        @if (gapSpacerStyle !== null) {
+          <symbiote-view [style]="gapSpacerStyle"></symbiote-view>
+        }
+        <!-- The separator sits INSIDE the measuring view, as RN's own cell renderer places it
+             (VirtualizedListCellRenderer.js:218-221). As a sibling it is an extra flex child, so
+             the chrome between two cells is gap + separator + gap while a spacer collapsing that
+             region replaces it with a single gap — every cell below the leading spacer then lands
+             short by (separator + gap) and the content jumps by that much whenever the window's
+             first index moves. Measured at exactly 17px on device 2026-08-19; see
+             .claude/rules/list-geometry-feedback-loop.md. -->
         @for (cell of windowCells; track cell.key) {
-          <symbiote-view (layout)="handleCellLayout(cell.measure, $event)" [style]="cellStyle">
+          <symbiote-view
+            (layout)="handleCellLayout(cell.measure, $event)"
+            [style]="cellStyle"
+          >
             <ng-container
               [vListOutlet]="itemDir?.templateRef"
               [vListOutletContext]="cell.context"
             ></ng-container>
-          </symbiote-view>
-          @if (cell.separatorContext !== undefined) {
-            <symbiote-view>
+            @if (cell.separatorContext !== undefined) {
               <ng-container
                 [vListOutlet]="separatorDir?.templateRef"
                 [vListOutletContext]="cell.separatorContext"
               ></ng-container>
-            </symbiote-view>
-          }
+            }
+          </symbiote-view>
         }
         @if (trailingSpacerStyle !== null) {
           <symbiote-view [style]="trailingSpacerStyle"></symbiote-view>