@symbiote-native/angular 2.0.0 → 3.0.0

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 view host elements.
 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, buildScrollViewHandle, } from '@symbiote-native/components';
+import { DEFAULT_INITIAL_NUM_TO_RENDER, DEFAULT_MAX_TO_RENDER_PER_BATCH, 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, buildScrollViewHandle, } from '@symbiote-native/components';
 import { dlog, flattenStyle, isSymbioteNode, } from '@symbiote-native/engine';
 import { countAngular } from '../../diagnostics';
 import { anchorHostStyle, SymbioteHostPropsDirective, SymbioteStyleInputDirective, ViewHost, } from '../../primitives';
@@ -40,250 +40,208 @@ export { VListEmptyDirective, VListFooterDirective, VListHeaderDirective, VListI
 // ngc's partial evaluator needs the decorator's `template` to be one literal), so the body is
 // duplicated across the two branches — the same shape Svelte's own `{#if horizontal}` takes.
 export class VirtualizedList {
-    // The list's edge/viewability/failure events as real Angular events: `(endReached)="…"`, not
-    // `[onEndReached]="…"`. See handleRefresh/accessibility*Tick below for how the still-callback-
-    // shaped scroll-view/refresh-control bag keys are fed from these.
-    endReached = new EventEmitter();
-    startReached = new EventEmitter();
-    refresh = new EventEmitter();
-    viewableItemsChanged = new EventEmitter();
-    scrollToIndexFailed = new EventEmitter();
-    accessibilityAction = new EventEmitter();
-    accessibilityTap = new EventEmitter();
-    magicTap = new EventEmitter();
-    accessibilityEscape = new EventEmitter();
-    // This wrapper binds the four gated accessibility events on the component it renders, which
-    // Angular forces to be unconditional and which would light that component's gates on every
-    // instance. It answers for them instead — see `gate-demand.ts`.
-    gateDemandAbove = injectGateDemandAbove();
+    constructor() {
+        // The list's edge/viewability/failure events as real Angular events: `(endReached)="…"`, not
+        // `[onEndReached]="…"`. See handleRefresh/accessibility*Tick below for how the still-callback-
+        // shaped scroll-view/refresh-control bag keys are fed from these.
+        this.endReached = new EventEmitter();
+        this.startReached = new EventEmitter();
+        this.refresh = new EventEmitter();
+        this.viewableItemsChanged = new EventEmitter();
+        this.scrollToIndexFailed = new EventEmitter();
+        this.accessibilityAction = new EventEmitter();
+        this.accessibilityTap = new EventEmitter();
+        this.magicTap = new EventEmitter();
+        this.accessibilityEscape = new EventEmitter();
+        // This wrapper binds the four gated accessibility events on the component it renders, which
+        // Angular forces to be unconditional and which would light that component's gates on every
+        // instance. It answers for them instead — see `gate-demand.ts`.
+        this.gateDemandAbove = injectGateDemandAbove();
+        // `buildScrollViewHandle` reads the node lazily through the getter above and no-ops before
+        // commit — the same function every other adapter feeds from its own host-instance accessor.
+        this.scrollHandle = buildScrollViewHandle(() => this.scrollNode);
+        // --- template-bound view state, assembled in ngDoCheck (recomputeView) ---
+        this.itemCount = EMPTY_OFFSET;
+        this.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.
+        this.forcedStickyCell = null;
+        this.leadingSpacerStyle = null;
+        this.gapSpacerStyle = null;
+        this.trailingSpacerStyle = null;
+        this.cellStyle = undefined;
+        // Bound to the template's `[style]="resolvedStyle"`, which Angular compiles to the built-in
+        // ɵɵstyleMap instruction — it only understands a flat object, never an array (RN's own
+        // `style={[a, b]}` composition idiom crashes deep inside Angular's styling engine), so this
+        // is always pre-flattened via the engine's own flattenStyle, never left as an array.
+        this.resolvedStyle = undefined;
+        this.resolvedContentContainerStyle = undefined;
+        this.resolvedMaintainVisibleContentPosition = undefined;
+        // 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.
+        this.commandedOffset = undefined;
+        // 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).
+        this.listState = createInitialListState();
+        this.renderVersion = EMPTY_OFFSET;
+        this.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).
+        this.cellContexts = new Map();
+        this.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.
+        this.cellContextEpoch = undefined;
+        this.separatorOverrides = new Map();
+        // The adapter-owned debounce (minimumViewTime) and incremental-fill timers; the reducer only
+        // hands back a delay.
+        this.viewableTimer = null;
+        this.batchTimer = null;
+        // Dedupes the after-commit effects: they run only when the windowing signature changed.
+        this.lastEffectSignature = '';
+        // Dedupes ngDoCheck's own recompute. WITHOUT this, recomputeView() unconditionally rebuilds
+        // windowCells (and each cell's `separators` handle — fresh closures every call) on EVERY CD pass,
+        // including ones triggered by something else entirely in the app. A fresh context object flows
+        // into VListOutletDirective, which (correctly) sees its `context` @Input() change and calls
+        // `viewRef.markForCheck()` — which reschedules ANOTHER change-detection tick via the zoneless
+        // scheduler (adapters/angular/src/render.ts). Recomputing unconditionally therefore free-runs
+        // forever the moment a list actually has cells to stamp (a real, previously-dormant bug only
+        // exposed once flat-list.test.ts's projection fix let cells render for the first time — see that
+        // test's comment). Guarding recompute behind "did anything relevant actually change" breaks the
+        // cycle: unrelated CD passes reuse the same windowCells/context identities, so
+        // VListOutletDirective's ngOnChanges sees no change and never reschedules.
+        this.lastRecompute = undefined;
+        this.cdr = inject(ChangeDetectorRef);
+        // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
+        // onto (see anchorHostStyle's doc comment) — NOT `scrollHostRef` above, which targets the real
+        // inner `<scroll-view>`/`<horizontal-scroll-view>` tag one level down.
+        this.elementRef = inject(ElementRef);
+        // Bridges the non-reactive @Input fields into the reactive graph so `foldedAccessibility` below
+        // can memoize a bag derived from them (read its own 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.
+        this.inputsRevision = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputsRevision" }] : /* istanbul ignore next */ []));
+        // MEASURED (while ScrollView was still a wrapper): the template fed 20 separate 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. 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 — `scrollViewBag()` reuses this result rather
+        // than re-running the fold.
+        this.foldedAccessibility = computed(() => {
+            this.inputsRevision();
+            return resolveAccessibilityProps({
+                testID: this.testID,
+                nativeID: this.nativeID,
+                accessible: this.accessible,
+                accessibilityLabel: this.accessibilityLabel,
+                accessibilityHint: this.accessibilityHint,
+                accessibilityRole: this.accessibilityRole,
+                accessibilityState: this.accessibilityState,
+                accessibilityValue: this.accessibilityValue,
+                accessibilityActions: this.accessibilityActions,
+                accessibilityLabelledBy: this.accessibilityLabelledBy,
+                importantForAccessibility: this.importantForAccessibility,
+                accessibilityLiveRegion: this.accessibilityLiveRegion,
+                screenReaderFocusable: this.screenReaderFocusable,
+                accessibilityViewIsModal: this.accessibilityViewIsModal,
+                accessibilityElementsHidden: this.accessibilityElementsHidden,
+                accessibilityIgnoresInvertColors: this.accessibilityIgnoresInvertColors,
+                accessibilityLanguage: this.accessibilityLanguage,
+                accessibilityRespondsToUserInteraction: this.accessibilityRespondsToUserInteraction,
+                accessibilityShowsLargeContentViewer: this.accessibilityShowsLargeContentViewer,
+                accessibilityLargeContentTitle: this.accessibilityLargeContentTitle,
+                role: this.role,
+                'aria-label': this.ariaLabel,
+                'aria-labelledby': this.ariaLabelledBy,
+                'aria-live': this.ariaLive,
+                'aria-hidden': this.ariaHidden,
+                'aria-busy': this.ariaBusy,
+                'aria-checked': this.ariaChecked,
+                'aria-disabled': this.ariaDisabled,
+                'aria-expanded': this.ariaExpanded,
+                'aria-selected': this.ariaSelected,
+                'aria-modal': this.ariaModal,
+                'aria-valuemax': this.ariaValueMax,
+                'aria-valuemin': this.ariaValueMin,
+                'aria-valuenow': this.ariaValueNow,
+                'aria-valuetext': this.ariaValueText,
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "foldedAccessibility" }] : /* istanbul ignore next */ []));
+        // onScroll stays a plain callback bag key (an Animated.event(...) target must be able to flow
+        // through it, which an @Output() can't carry), so this is a stable arrow field read straight into
+        // scrollViewBag()'s `onScroll`. onLayout is unconditional too — this list always needs its own
+        // layout for windowing, regardless of whether an app subscribes to anything.
+        this.onScrollTick = (event) => {
+            countAngular('scrollTicks');
+            const offset = readScrollOffset(event, this.isHorizontal);
+            if (offset === undefined)
+                return;
+            dlog(`Angular VirtualizedList onScroll offset=${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.onLayoutTick = (event) => {
+            const length = readLayoutLength(event, this.isHorizontal);
+            if (length === undefined)
+                return;
+            dlog(`Angular VirtualizedList onLayout viewport=${length}`);
+            this.dispatch({ kind: 'layout', length });
+        };
+        // RefreshControl's refresh and the scroll tag's accessibility events reach here as plain
+        // listener-prop values in scrollViewBag()/refreshControlBag() — these fields just adapt
+        // VirtualizedList's own @Output() into a plain re-emit callback.
+        this.handleRefresh = () => {
+            this.refresh.emit();
+        };
+        this.accessibilityActionTick = (event) => {
+            this.accessibilityAction.emit(event);
+        };
+        this.accessibilityTapTick = (event) => {
+            this.accessibilityTap.emit(event);
+        };
+        this.magicTapTick = (event) => {
+            this.magicTap.emit(event);
+        };
+        this.accessibilityEscapeTick = (event) => {
+            this.accessibilityEscape.emit(event);
+        };
+        this.keyFor = (index) => {
+            const item = this.getItem(this.data, index);
+            return resolveItemKey(item, index, this.keyExtractor);
+        };
+    }
     wantsGate(name) {
         return gateWanted(this.gateDemandAbove, name, this[name]);
     }
-    data;
-    getItem;
-    getItemCount;
-    keyExtractor;
-    getItemLayout;
-    horizontal;
-    inverted;
-    extraData;
-    onEndReachedThreshold;
-    onStartReachedThreshold;
-    refreshing;
-    progressViewOffset;
-    // Set explicitly by a wrapper (FlatList/VirtualizedSectionList) that ALWAYS binds
-    // `(refresh)="refresh.emit()"` on this component to re-forward the event outward — that binding
-    // itself makes `this.refresh.observed` permanently true (Angular subscribes unconditionally the
-    // moment a template writes `(refresh)="…"`, regardless of what the handler does), so `.observed`
-    // can no longer tell "the app actually wants pull-to-refresh" from "a wrapper is just forwarding
-    // the event". A wrapper passes its OWN public `refresh.observed` here instead; direct usage
-    // (no wrapper) falls back to this component's own `.observed`, unchanged from before.
-    refreshRequested;
-    viewabilityConfig;
-    viewabilityConfigCallbackPairs;
-    initialNumToRender;
-    initialScrollIndex;
-    maxToRenderPerBatch;
-    updateCellsBatchingPeriod;
-    windowSize;
-    stickyHeaderIndices;
-    maintainVisibleContentPosition;
-    onScroll;
-    onScrollBeginDrag;
-    onScrollEndDrag;
-    onMomentumScrollBegin;
-    onMomentumScrollEnd;
-    scrollEventThrottle;
-    keyboardShouldPersistTaps;
-    keyboardDismissMode;
-    style;
-    contentContainerStyle;
-    testID;
-    nativeID;
-    accessible;
-    accessibilityLabel;
-    accessibilityHint;
-    accessibilityRole;
-    accessibilityState;
-    accessibilityValue;
-    accessibilityActions;
-    accessibilityLabelledBy;
-    importantForAccessibility;
-    accessibilityLiveRegion;
-    screenReaderFocusable;
-    accessibilityViewIsModal;
-    accessibilityElementsHidden;
-    accessibilityIgnoresInvertColors;
-    accessibilityLanguage;
-    accessibilityRespondsToUserInteraction;
-    accessibilityShowsLargeContentViewer;
-    accessibilityLargeContentTitle;
-    role;
-    ariaLabel;
-    ariaLabelledBy;
-    ariaLive;
-    ariaHidden;
-    ariaBusy;
-    ariaChecked;
-    ariaDisabled;
-    ariaExpanded;
-    ariaSelected;
-    ariaModal;
-    ariaValueMax;
-    ariaValueMin;
-    ariaValueNow;
-    ariaValueText;
-    // The cell + slot templates the app authors (the Angular twin of renderItem / ListHeaderComponent
-    // / ListFooterComponent / ListEmptyComponent / ItemSeparatorComponent), captured from projected
-    // <ng-template> content. Resolved by ngAfterContentInit, read each ngDoCheck (from the 2nd CD on).
-    itemDir;
-    headerDir;
-    footerDir;
-    emptyDir;
-    separatorDir;
-    // The inner scroll TAG's own engine node — a template ref on a bare intrinsic hands back the
-    // host node directly (`isSymbioteNode(elementRef.nativeElement)`, matching `anchorHostStyle`'s
-    // own reader below), so there is no wrapper component left to read a handle off. Present from
-    // whichever branch (`scroll-view` / `horizontal-scroll-view`) is currently mounted, once the
-    // template has run at least one CD pass.
-    scrollHostRef;
     get scrollNode() {
         const node = this.scrollHostRef?.nativeElement;
         return isSymbioteNode(node) ? node : null;
     }
-    // `buildScrollViewHandle` reads the node lazily through the getter above and no-ops before
-    // commit — the same function every other adapter feeds from its own host-instance accessor.
-    scrollHandle = buildScrollViewHandle(() => this.scrollNode);
-    // --- 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;
-    // Bound to the template's `[style]="resolvedStyle"`, which Angular compiles to the built-in
-    // ɵɵstyleMap instruction — it only understands a flat object, never an array (RN's own
-    // `style={[a, b]}` composition idiom crashes deep inside Angular's styling engine), so this
-    // is always pre-flattened via the engine's own flattenStyle, never left as an array.
-    resolvedStyle = undefined;
-    resolvedContentContainerStyle = undefined;
-    resolvedMaintainVisibleContentPosition = undefined;
-    // 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;
-    // 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();
-    // 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.
-    viewableTimer = null;
-    batchTimer = 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
-    // windowCells (and each cell's `separators` handle — fresh closures every call) on EVERY CD pass,
-    // including ones triggered by something else entirely in the app. A fresh context object flows
-    // into VListOutletDirective, which (correctly) sees its `context` @Input() change and calls
-    // `viewRef.markForCheck()` — which reschedules ANOTHER change-detection tick via the zoneless
-    // scheduler (adapters/angular/src/render.ts). Recomputing unconditionally therefore free-runs
-    // forever the moment a list actually has cells to stamp (a real, previously-dormant bug only
-    // exposed once flat-list.test.ts's projection fix let cells render for the first time — see that
-    // test's comment). Guarding recompute behind "did anything relevant actually change" breaks the
-    // cycle: unrelated CD passes reuse the same windowCells/context identities, so
-    // VListOutletDirective's ngOnChanges sees no change and never reschedules.
-    lastRecompute = undefined;
-    cdr = inject(ChangeDetectorRef);
-    // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
-    // onto (see anchorHostStyle's doc comment) — NOT `scrollHostRef` above, which targets the real
-    // inner `<scroll-view>`/`<horizontal-scroll-view>` tag one level down.
-    elementRef = inject(ElementRef);
-    // Bridges the non-reactive @Input fields into the reactive graph so `foldedAccessibility` below
-    // can memoize a bag derived from them (read its own 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 (while ScrollView was still a wrapper): the template fed 20 separate 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. 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 — `scrollViewBag()` reuses this result rather
-    // than re-running the fold.
-    foldedAccessibility = computed(() => {
-        this.inputsRevision();
-        return resolveAccessibilityProps({
-            testID: this.testID,
-            nativeID: this.nativeID,
-            accessible: this.accessible,
-            accessibilityLabel: this.accessibilityLabel,
-            accessibilityHint: this.accessibilityHint,
-            accessibilityRole: this.accessibilityRole,
-            accessibilityState: this.accessibilityState,
-            accessibilityValue: this.accessibilityValue,
-            accessibilityActions: this.accessibilityActions,
-            accessibilityLabelledBy: this.accessibilityLabelledBy,
-            importantForAccessibility: this.importantForAccessibility,
-            accessibilityLiveRegion: this.accessibilityLiveRegion,
-            screenReaderFocusable: this.screenReaderFocusable,
-            accessibilityViewIsModal: this.accessibilityViewIsModal,
-            accessibilityElementsHidden: this.accessibilityElementsHidden,
-            accessibilityIgnoresInvertColors: this.accessibilityIgnoresInvertColors,
-            accessibilityLanguage: this.accessibilityLanguage,
-            accessibilityRespondsToUserInteraction: this.accessibilityRespondsToUserInteraction,
-            accessibilityShowsLargeContentViewer: this.accessibilityShowsLargeContentViewer,
-            accessibilityLargeContentTitle: this.accessibilityLargeContentTitle,
-            role: this.role,
-            'aria-label': this.ariaLabel,
-            'aria-labelledby': this.ariaLabelledBy,
-            'aria-live': this.ariaLive,
-            'aria-hidden': this.ariaHidden,
-            'aria-busy': this.ariaBusy,
-            'aria-checked': this.ariaChecked,
-            'aria-disabled': this.ariaDisabled,
-            'aria-expanded': this.ariaExpanded,
-            'aria-selected': this.ariaSelected,
-            'aria-modal': this.ariaModal,
-            'aria-valuemax': this.ariaValueMax,
-            'aria-valuemin': this.ariaValueMin,
-            'aria-valuenow': this.ariaValueNow,
-            'aria-valuetext': this.ariaValueText,
-        });
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "foldedAccessibility" }] : /* istanbul ignore next */ []));
     get shouldRenderRefreshControl() {
         return this.refreshRequested ?? this.refresh.observed;
     }
@@ -308,7 +266,10 @@ export class VirtualizedList {
             keyboardShouldPersistTaps: this.keyboardShouldPersistTaps,
             keyboardDismissMode: this.keyboardDismissMode,
             contentOffset: this.commandedOffset,
-            stickyHeaderIndices: this.renderedStickyIndices,
+            // `stickyHeaderIndices` is deliberately NOT forwarded — it numbers the scroll view's PAINT
+            // children, and a windowed list paints a header, a spacer and a slice, so the positions move
+            // every time the window slides and the behavior re-wraps a different child each pass. The
+            // cells carry the `sticky-header` TAG instead, which pins by DOCUMENT order.
             maintainVisibleContentPosition: this.resolvedMaintainVisibleContentPosition,
             // The four boolean-gated Fabric events (`.claude/rules/fabric-boolean-event-gates.md`): the
             // TAG has no `.observed` of its own, so `wantsGate` (own subscriber, or the demand from
@@ -354,56 +315,11 @@ export class VirtualizedList {
         return (this.updateCellsBatchingPeriod ?? DEFAULT_UPDATE_CELLS_BATCHING_PERIOD);
     }
     get onEndReachedThresholdValue() {
-        return this.onEndReachedThreshold ?? DEFAULT_END_REACHED_THRESHOLD;
+        return this.onEndReachedThreshold;
     }
     get onStartReachedThresholdValue() {
-        return this.onStartReachedThreshold ?? DEFAULT_START_REACHED_THRESHOLD;
+        return this.onStartReachedThreshold;
     }
-    // onScroll stays a plain callback bag key (an Animated.event(...) target must be able to flow
-    // through it, which an @Output() can't carry), so this is a stable arrow field read straight into
-    // scrollViewBag()'s `onScroll`. onLayout is unconditional too — this list always needs its own
-    // layout for windowing, regardless of whether an app subscribes to anything.
-    onScrollTick = (event) => {
-        countAngular('scrollTicks');
-        const offset = readScrollOffset(event, this.isHorizontal);
-        if (offset === undefined)
-            return;
-        dlog(`Angular VirtualizedList onScroll offset=${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);
-    };
-    onLayoutTick = (event) => {
-        const length = readLayoutLength(event, this.isHorizontal);
-        if (length === undefined)
-            return;
-        dlog(`Angular VirtualizedList onLayout viewport=${length}`);
-        this.dispatch({ kind: 'layout', length });
-    };
-    // RefreshControl's refresh and the scroll tag's accessibility events reach here as plain
-    // listener-prop values in scrollViewBag()/refreshControlBag() — these fields just adapt
-    // VirtualizedList's own @Output() into a plain re-emit callback.
-    handleRefresh = () => {
-        this.refresh.emit();
-    };
-    accessibilityActionTick = (event) => {
-        this.accessibilityAction.emit(event);
-    };
-    accessibilityTapTick = (event) => {
-        this.accessibilityTap.emit(event);
-    };
-    magicTapTick = (event) => {
-        this.magicTap.emit(event);
-    };
-    accessibilityEscapeTick = (event) => {
-        this.accessibilityEscape.emit(event);
-    };
-    keyFor = (index) => {
-        const item = this.getItem(this.data, 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.
@@ -512,8 +428,12 @@ export class VirtualizedList {
                     const info = effect.info;
                     const map = effect.map;
                     const fire = () => {
-                        for (const pair of pairs)
-                            pair.onViewableItemsChanged(info);
+                        for (const pair of pairs) {
+                            pair.onViewableItemsChanged({
+                                ...info,
+                                viewabilityConfig: pair.viewabilityConfig,
+                            });
+                        }
                         this.dispatch({ kind: 'viewable-fired', map });
                     };
                     if (this.viewableTimer !== null) {
@@ -654,7 +574,6 @@ export class VirtualizedList {
             this.leadingSpacerStyle = null;
             this.gapSpacerStyle = null;
             this.trailingSpacerStyle = null;
-            this.renderedStickyIndices = undefined;
             dlog(`Angular VirtualizedList empty (viewport=${this.listState.viewportLength})`);
             return;
         }
@@ -679,17 +598,16 @@ export class VirtualizedList {
             plan.trailingExtent > EMPTY_OFFSET
                 ? this.spacerStyle(plan.trailingExtent)
                 : null;
-        this.renderedStickyIndices =
-            stickySet !== undefined && plan.stickyChildPositions.length > 0
-                ? plan.stickyChildPositions
-                : undefined;
+        // `plan.stickyChildPositions` is deliberately NOT read — it was the input to the index form.
         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)
+                ? this.buildWindowCell(plan.forcedStickyCell.index, plan.forcedStickyCell.key, false, 
+                // Sticky by construction — `forcedStickyCell` exists only for an index in `stickySet`.
+                true)
                 : null;
         const cells = [];
         for (const planned of plan.cells) {
@@ -699,7 +617,7 @@ export class VirtualizedList {
             // 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));
+            cells.push(this.buildWindowCell(planned.index, planned.key, includeSeparator, stickySet?.has(planned.index) === true));
         }
         this.windowCells = cells;
         // Swap, don't prune: a cell that left the window is simply absent from the pass that just ran,
@@ -711,7 +629,7 @@ export class VirtualizedList {
     }
     // 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) {
+    buildWindowCell(index, key, includeSeparator, isSticky) {
         const item = this.getItem(this.data, index);
         return {
             key,
@@ -721,6 +639,7 @@ export class VirtualizedList {
             separatorContext: includeSeparator
                 ? this.buildSeparatorContext(index, item)
                 : undefined,
+            isSticky,
         };
     }
     // The context for one cell, reused by identity when the cell did not move. See cellContexts.
@@ -883,8 +802,8 @@ export class VirtualizedList {
         this.commandedOffset = target;
         this.cdr.markForCheck();
     }
-    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: "scrollHostRef", first: true, predicate: ["scrollHost"], descendants: true, read: ElementRef }], usesOnChanges: true, hostDirectives: [{ directive: i1.SymbioteStyleInputDirective, inputs: ["style", "style"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: VirtualizedList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵ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: "scrollHostRef", first: true, predicate: ["scrollHost"], descendants: true, read: ElementRef }], usesOnChanges: true, hostDirectives: [{ directive: i1.SymbioteStyleInputDirective, inputs: ["style", "style"] }], ngImport: i0, template: `
     @if (isHorizontal) {
       <horizontal-scroll-view #scrollHost [symbioteHostProps]="scrollViewBag()">
         @if (shouldRenderRefreshControl) {
@@ -910,7 +829,7 @@ export class VirtualizedList {
             <view [style]="leadingSpacerStyle"></view>
           }
           @if (forcedStickyCell !== null) {
-            <view
+            <sticky-header
               (layout)="handleCellLayout(forcedStickyCell.measure, $event)"
               [style]="cellStyle"
             >
@@ -918,27 +837,45 @@ export class VirtualizedList {
                 [vListOutlet]="itemDir?.templateRef"
                 [vListOutletContext]="forcedStickyCell.context"
               ></ng-container>
-            </view>
+            </sticky-header>
           }
           @if (gapSpacerStyle !== null) {
             <view [style]="gapSpacerStyle"></view>
           }
           @for (cell of windowCells; track cell.key) {
-            <view
-              (layout)="handleCellLayout(cell.measure, $event)"
-              [style]="cellStyle"
-            >
-              <ng-container
-                [vListOutlet]="itemDir?.templateRef"
-                [vListOutletContext]="cell.context"
-              ></ng-container>
-              @if (cell.separatorContext !== undefined) {
+            @if (cell.isSticky) {
+              <sticky-header
+                (layout)="handleCellLayout(cell.measure, $event)"
+                [style]="cellStyle"
+              >
                 <ng-container
-                  [vListOutlet]="separatorDir?.templateRef"
-                  [vListOutletContext]="cell.separatorContext"
+                  [vListOutlet]="itemDir?.templateRef"
+                  [vListOutletContext]="cell.context"
                 ></ng-container>
-              }
-            </view>
+                @if (cell.separatorContext !== undefined) {
+                  <ng-container
+                    [vListOutlet]="separatorDir?.templateRef"
+                    [vListOutletContext]="cell.separatorContext"
+                  ></ng-container>
+                }
+              </sticky-header>
+            } @else {
+              <view
+                (layout)="handleCellLayout(cell.measure, $event)"
+                [style]="cellStyle"
+              >
+                <ng-container
+                  [vListOutlet]="itemDir?.templateRef"
+                  [vListOutletContext]="cell.context"
+                ></ng-container>
+                @if (cell.separatorContext !== undefined) {
+                  <ng-container
+                    [vListOutlet]="separatorDir?.templateRef"
+                    [vListOutletContext]="cell.separatorContext"
+                  ></ng-container>
+                }
+              </view>
+            }
           }
           @if (trailingSpacerStyle !== null) {
             <view [style]="trailingSpacerStyle"></view>
@@ -976,7 +913,7 @@ export class VirtualizedList {
             <view [style]="leadingSpacerStyle"></view>
           }
           @if (forcedStickyCell !== null) {
-            <view
+            <sticky-header
               (layout)="handleCellLayout(forcedStickyCell.measure, $event)"
               [style]="cellStyle"
             >
@@ -984,7 +921,7 @@ export class VirtualizedList {
                 [vListOutlet]="itemDir?.templateRef"
                 [vListOutletContext]="forcedStickyCell.context"
               ></ng-container>
-            </view>
+            </sticky-header>
           }
           @if (gapSpacerStyle !== null) {
             <view [style]="gapSpacerStyle"></view>
@@ -997,21 +934,39 @@ export class VirtualizedList {
                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) {
-            <view
-              (layout)="handleCellLayout(cell.measure, $event)"
-              [style]="cellStyle"
-            >
-              <ng-container
-                [vListOutlet]="itemDir?.templateRef"
-                [vListOutletContext]="cell.context"
-              ></ng-container>
-              @if (cell.separatorContext !== undefined) {
+            @if (cell.isSticky) {
+              <sticky-header
+                (layout)="handleCellLayout(cell.measure, $event)"
+                [style]="cellStyle"
+              >
                 <ng-container
-                  [vListOutlet]="separatorDir?.templateRef"
-                  [vListOutletContext]="cell.separatorContext"
+                  [vListOutlet]="itemDir?.templateRef"
+                  [vListOutletContext]="cell.context"
                 ></ng-container>
-              }
-            </view>
+                @if (cell.separatorContext !== undefined) {
+                  <ng-container
+                    [vListOutlet]="separatorDir?.templateRef"
+                    [vListOutletContext]="cell.separatorContext"
+                  ></ng-container>
+                }
+              </sticky-header>
+            } @else {
+              <view
+                (layout)="handleCellLayout(cell.measure, $event)"
+                [style]="cellStyle"
+              >
+                <ng-container
+                  [vListOutlet]="itemDir?.templateRef"
+                  [vListOutletContext]="cell.context"
+                ></ng-container>
+                @if (cell.separatorContext !== undefined) {
+                  <ng-container
+                    [vListOutlet]="separatorDir?.templateRef"
+                    [vListOutletContext]="cell.separatorContext"
+                  ></ng-container>
+                }
+              </view>
+            }
           }
           @if (trailingSpacerStyle !== null) {
             <view [style]="trailingSpacerStyle"></view>
@@ -1025,7 +980,7 @@ export class VirtualizedList {
         }
       </scroll-view>
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: SymbioteHostPropsDirective, selector: "[symbioteHostProps]", inputs: ["symbioteHostProps"], exportAs: ["symbioteHost"] }, { kind: "directive", type: VListOutletDirective, selector: "[vListOutlet]", inputs: ["vListOutlet", "vListOutletContext"] }, { kind: "component", type: ViewHost, selector: "view" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: SymbioteHostPropsDirective, selector: "[symbioteHostProps]", inputs: ["symbioteHostProps"], exportAs: ["symbioteHost"] }, { kind: "directive", type: VListOutletDirective, selector: "[vListOutlet]", inputs: ["vListOutlet", "vListOutletContext"] }, { kind: "component", type: ViewHost, selector: "view" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: VirtualizedList, decorators: [{
             type: Component,
@@ -1064,7 +1019,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             <view [style]="leadingSpacerStyle"></view>
           }
           @if (forcedStickyCell !== null) {
-            <view
+            <sticky-header
               (layout)="handleCellLayout(forcedStickyCell.measure, $event)"
               [style]="cellStyle"
             >
@@ -1072,27 +1027,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 [vListOutlet]="itemDir?.templateRef"
                 [vListOutletContext]="forcedStickyCell.context"
               ></ng-container>
-            </view>
+            </sticky-header>
           }
           @if (gapSpacerStyle !== null) {
             <view [style]="gapSpacerStyle"></view>
           }
           @for (cell of windowCells; track cell.key) {
-            <view
-              (layout)="handleCellLayout(cell.measure, $event)"
-              [style]="cellStyle"
-            >
-              <ng-container
-                [vListOutlet]="itemDir?.templateRef"
-                [vListOutletContext]="cell.context"
-              ></ng-container>
-              @if (cell.separatorContext !== undefined) {
+            @if (cell.isSticky) {
+              <sticky-header
+                (layout)="handleCellLayout(cell.measure, $event)"
+                [style]="cellStyle"
+              >
                 <ng-container
-                  [vListOutlet]="separatorDir?.templateRef"
-                  [vListOutletContext]="cell.separatorContext"
+                  [vListOutlet]="itemDir?.templateRef"
+                  [vListOutletContext]="cell.context"
                 ></ng-container>
-              }
-            </view>
+                @if (cell.separatorContext !== undefined) {
+                  <ng-container
+                    [vListOutlet]="separatorDir?.templateRef"
+                    [vListOutletContext]="cell.separatorContext"
+                  ></ng-container>
+                }
+              </sticky-header>
+            } @else {
+              <view
+                (layout)="handleCellLayout(cell.measure, $event)"
+                [style]="cellStyle"
+              >
+                <ng-container
+                  [vListOutlet]="itemDir?.templateRef"
+                  [vListOutletContext]="cell.context"
+                ></ng-container>
+                @if (cell.separatorContext !== undefined) {
+                  <ng-container
+                    [vListOutlet]="separatorDir?.templateRef"
+                    [vListOutletContext]="cell.separatorContext"
+                  ></ng-container>
+                }
+              </view>
+            }
           }
           @if (trailingSpacerStyle !== null) {
             <view [style]="trailingSpacerStyle"></view>
@@ -1130,7 +1103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             <view [style]="leadingSpacerStyle"></view>
           }
           @if (forcedStickyCell !== null) {
-            <view
+            <sticky-header
               (layout)="handleCellLayout(forcedStickyCell.measure, $event)"
               [style]="cellStyle"
             >
@@ -1138,7 +1111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 [vListOutlet]="itemDir?.templateRef"
                 [vListOutletContext]="forcedStickyCell.context"
               ></ng-container>
-            </view>
+            </sticky-header>
           }
           @if (gapSpacerStyle !== null) {
             <view [style]="gapSpacerStyle"></view>
@@ -1151,21 +1124,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                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) {
-            <view
-              (layout)="handleCellLayout(cell.measure, $event)"
-              [style]="cellStyle"
-            >
-              <ng-container
-                [vListOutlet]="itemDir?.templateRef"
-                [vListOutletContext]="cell.context"
-              ></ng-container>
-              @if (cell.separatorContext !== undefined) {
+            @if (cell.isSticky) {
+              <sticky-header
+                (layout)="handleCellLayout(cell.measure, $event)"
+                [style]="cellStyle"
+              >
                 <ng-container
-                  [vListOutlet]="separatorDir?.templateRef"
-                  [vListOutletContext]="cell.separatorContext"
+                  [vListOutlet]="itemDir?.templateRef"
+                  [vListOutletContext]="cell.context"
                 ></ng-container>
-              }
-            </view>
+                @if (cell.separatorContext !== undefined) {
+                  <ng-container
+                    [vListOutlet]="separatorDir?.templateRef"
+                    [vListOutletContext]="cell.separatorContext"
+                  ></ng-container>
+                }
+              </sticky-header>
+            } @else {
+              <view
+                (layout)="handleCellLayout(cell.measure, $event)"
+                [style]="cellStyle"
+              >
+                <ng-container
+                  [vListOutlet]="itemDir?.templateRef"
+                  [vListOutletContext]="cell.context"
+                ></ng-container>
+                @if (cell.separatorContext !== undefined) {
+                  <ng-container
+                    [vListOutlet]="separatorDir?.templateRef"
+                    [vListOutletContext]="cell.separatorContext"
+                  ></ng-container>
+                }
+              </view>
+            }
           }
           @if (trailingSpacerStyle !== null) {
             <view [style]="trailingSpacerStyle"></view>