@symbiote-native/angular 0.7.0 → 0.8.0

package/src/components/virtualized-section-list/index.ts

@@ -64,7 +64,10 @@ import {
   type IVListSeparatorContext,
 } from '../virtualized-list';
 import { VListOutletDirective } from '../virtualized-list/directives';
-import { stableAnchorStyle, SymbioteStyleInputDirective } from '../../primitives';
+import {
+  stableAnchorStyle,
+  SymbioteStyleInputDirective,
+} from '../../primitives';
 import {
   VSectionFooterDirective,
   VSectionHeaderDirective,
@@ -92,9 +95,20 @@ export type { IVSectionContext, IVSectionItemContext } from './directives';
 // those are the per-adapter children/render fields and become `<ng-template>` directives in Angular.
 // Everything agnostic is the SAME surface as the
 // React/Vue adapters, including the a11y/aria prop family forwarded through VirtualizedList.
-export interface IVirtualizedSectionListProps<ItemT> extends IAccessibilityProps, IAriaProps {
+export interface IVirtualizedSectionListProps<ItemT>
+  extends IAccessibilityProps, IAriaProps {
   sections: ReadonlyArray<ISection<ItemT>>;
   keyExtractor?: (item: ItemT, index: number) => string;
+  // Fixed-layout fast path, FLAT like RN's: the SECTIONS array plus a flat entry index, where every
+  // section contributes two rows beyond its items (header, footer) and the caller accounts for them.
+  // A `({ section, index })` form would be our invention, not parity - `VirtualizedSectionList.js`
+  // has no getItemLayout code at all, the prop rides through `passThroughProps`; that shape is the
+  // community react-native-section-list-get-item-layout, layered on top. Without it a fast scroll
+  // outruns measurement and leaves blank windows.
+  getItemLayout?: (
+    data: ReadonlyArray<ISection<ItemT>> | null,
+    index: number,
+  ) => { length: number; offset: number; index: number };
   // Stick each section header to the top as the next section scrolls up. Routed to the inner
   // VirtualizedList's stickyHeaderIndices. Defaults to `Platform.OS === 'ios'`; Android does not
   // stick by default. Pass true/false to override.
@@ -146,7 +160,9 @@ export type IVirtualizedSectionListInputs<ItemT> = Omit<
 @Component({
   selector: 'VirtualizedSectionList',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   imports: [
     VirtualizedList,
     VListItemDirective,
@@ -163,6 +179,7 @@ export type IVirtualizedSectionListInputs<ItemT> = Omit<
       [getItem]="getEntry"
       [getItemCount]="getEntryCount"
       [keyExtractor]="entryKeyExtractor"
+      [getItemLayout]="entryItemLayout"
       [stickyHeaderIndices]="stickyHeaderIndices"
       [extraData]="extraData"
       [inverted]="inverted"
@@ -207,8 +224,12 @@ export type IVirtualizedSectionListInputs<ItemT> = Omit<
       [accessibilityElementsHidden]="accessibilityElementsHidden"
       [accessibilityIgnoresInvertColors]="accessibilityIgnoresInvertColors"
       [accessibilityLanguage]="accessibilityLanguage"
-      [accessibilityRespondsToUserInteraction]="accessibilityRespondsToUserInteraction"
-      [accessibilityShowsLargeContentViewer]="accessibilityShowsLargeContentViewer"
+      [accessibilityRespondsToUserInteraction]="
+        accessibilityRespondsToUserInteraction
+      "
+      [accessibilityShowsLargeContentViewer]="
+        accessibilityShowsLargeContentViewer
+      "
       [accessibilityLargeContentTitle]="accessibilityLargeContentTitle"
       (accessibilityAction)="resolvedOnAccessibilityAction?.($event)"
       (accessibilityTap)="resolvedOnAccessibilityTap?.($event)"
@@ -246,7 +267,9 @@ export type IVirtualizedSectionListInputs<ItemT> = Omit<
             ></ng-container>
           }
           @case ('section-separator') {
-            <ng-container [vListOutlet]="sectionSeparatorDir?.templateRef"></ng-container>
+            <ng-container
+              [vListOutlet]="sectionSeparatorDir?.templateRef"
+            ></ng-container>
           }
           @case ('item') {
             <ng-container
@@ -260,12 +283,16 @@ export type IVirtualizedSectionListInputs<ItemT> = Omit<
       <!-- list-level slots: forward the app's VirtualizedList directives to the inner list. -->
       @if (listHeaderDir !== undefined) {
         <ng-template vListHeader>
-          <ng-container [vListOutlet]="listHeaderDir.templateRef"></ng-container>
+          <ng-container
+            [vListOutlet]="listHeaderDir.templateRef"
+          ></ng-container>
         </ng-template>
       }
       @if (listFooterDir !== undefined) {
         <ng-template vListFooter>
-          <ng-container [vListOutlet]="listFooterDir.templateRef"></ng-container>
+          <ng-container
+            [vListOutlet]="listFooterDir.templateRef"
+          ></ng-container>
         </ng-template>
       }
       @if (listEmptyDir !== undefined) {
@@ -283,7 +310,9 @@ export type IVirtualizedSectionListInputs<ItemT> = Omit<
         >
           <ng-container
             [vListOutlet]="itemSeparatorDir.templateRef"
-            [vListOutletContext]="itemSeparatorContextOf(highlighted, leadingItem, trailingItem)"
+            [vListOutletContext]="
+              itemSeparatorContextOf(highlighted, leadingItem, trailingItem)
+            "
           ></ng-container>
         </ng-template>
       }
@@ -291,15 +320,26 @@ export type IVirtualizedSectionListInputs<ItemT> = Omit<
   `,
 })
 export class VirtualizedSectionList<ItemT = unknown>
-  implements IVirtualizedSectionListInputs<ItemT>, IVirtualizedSectionListHandle, DoCheck
+  implements
+    IVirtualizedSectionListInputs<ItemT>,
+    IVirtualizedSectionListHandle,
+    DoCheck
 {
   @Input({ required: true }) sections!: ReadonlyArray<ISection<ItemT>>;
   @Input() keyExtractor?: (item: ItemT, index: number) => string;
+  @Input() getItemLayout?: (
+    data: ReadonlyArray<ISection<ItemT>> | null,
+    index: number,
+  ) => { length: number; offset: number; index: number };
   @Input() stickySectionHeadersEnabled?: boolean;
   @Input() extraData?: unknown;
-  @Output() readonly endReached = new EventEmitter<{ distanceFromEnd: number }>();
+  @Output() readonly endReached = new EventEmitter<{
+    distanceFromEnd: number;
+  }>();
   @Input() onEndReachedThreshold?: number;
-  @Output() readonly startReached = new EventEmitter<{ distanceFromStart: number }>();
+  @Output() readonly startReached = new EventEmitter<{
+    distanceFromStart: number;
+  }>();
   @Input() onStartReachedThreshold?: number;
   @Output() readonly refresh = new EventEmitter<void>();
   @Input() refreshing?: boolean | null;
@@ -360,8 +400,10 @@ export class VirtualizedSectionList<ItemT = unknown>
   @Input() accessibilityValue?: IAccessibilityProps['accessibilityValue'];
   @Input() accessibilityActions?: IAccessibilityProps['accessibilityActions'];
   @Input() accessibilityLabelledBy?: string | string[];
-  @Input() importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
-  @Input() accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
+  @Input()
+  importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
+  @Input()
+  accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
   @Input() screenReaderFocusable?: boolean;
   @Input() accessibilityViewIsModal?: boolean;
   @Input() accessibilityElementsHidden?: boolean;
@@ -393,20 +435,27 @@ export class VirtualizedSectionList<ItemT = unknown>
   // The section cell templates the app authors (the Angular twin of renderItem /
   // renderSectionHeader / renderSectionFooter / SectionSeparatorComponent), captured from projected
   // <ng-template> content and stamped by the synthesized vListItem dispatch.
-  @ContentChild(VSectionItemDirective) sectionItemDir?: VSectionItemDirective<ItemT>;
-  @ContentChild(VSectionHeaderDirective) sectionHeaderDir?: VSectionHeaderDirective<ItemT>;
-  @ContentChild(VSectionFooterDirective) sectionFooterDir?: VSectionFooterDirective<ItemT>;
-  @ContentChild(VSectionSeparatorDirective) sectionSeparatorDir?: VSectionSeparatorDirective;
+  @ContentChild(VSectionItemDirective)
+  sectionItemDir?: VSectionItemDirective<ItemT>;
+  @ContentChild(VSectionHeaderDirective)
+  sectionHeaderDir?: VSectionHeaderDirective<ItemT>;
+  @ContentChild(VSectionFooterDirective)
+  sectionFooterDir?: VSectionFooterDirective<ItemT>;
+  @ContentChild(VSectionSeparatorDirective)
+  sectionSeparatorDir?: VSectionSeparatorDirective;
 
   // list-level slots reuse VirtualizedList's own directives; VSL forwards them to the inner list.
   @ContentChild(VListHeaderDirective) listHeaderDir?: VListHeaderDirective;
   @ContentChild(VListFooterDirective) listFooterDir?: VListFooterDirective;
   @ContentChild(VListEmptyDirective) listEmptyDir?: VListEmptyDirective;
-  @ContentChild(VListSeparatorDirective) itemSeparatorDir?: VListSeparatorDirective<ItemT>;
+  @ContentChild(VListSeparatorDirective)
+  itemSeparatorDir?: VListSeparatorDirective<ItemT>;
 
   // The composed inner VirtualizedList. Its instance IS an IVirtualizedListHandle, so the section
   // handle delegates straight to it. Available from ngAfterViewInit; reads lazily, no-ops pre-commit.
-  @ViewChild(VirtualizedList) private list?: VirtualizedList<ISectionEntry<ItemT>>;
+  @ViewChild(VirtualizedList) private list?: VirtualizedList<
+    ISectionEntry<ItemT>
+  >;
 
   // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
   // onto (see anchorHostStyle's doc comment) — NOT `list` above, which targets the real inner
@@ -439,7 +488,10 @@ export class VirtualizedSectionList<ItemT = unknown>
     this.lastHasSectionSeparator = hasSectionSeparator;
 
     const sections = this.sections ?? [];
-    const { entries, headerIndices } = flattenSections(sections, hasSectionSeparator);
+    const { entries, headerIndices } = flattenSections(
+      sections,
+      hasSectionSeparator,
+    );
     this.flatEntries = entries;
     this.headerIndices = headerIndices;
 
@@ -458,42 +510,95 @@ export class VirtualizedSectionList<ItemT = unknown>
 
   // The derived flat-stream accessors handed to the inner VirtualizedList. Stable arrow fields so
   // the bindings keep a constant identity; they read the live flatEntries.
-  getEntry = (_source: unknown, index: number): ISectionEntry<ItemT> => this.flatEntries[index];
+  getEntry = (_source: unknown, index: number): ISectionEntry<ItemT> =>
+    this.flatEntries[index];
   getEntryCount = (): number => this.flatEntries.length;
   entryKeyExtractor = (entry: ISectionEntry<ItemT>, index: number): string =>
     sectionEntryKey(entry, index, this.keyExtractor);
 
+  // Hand the callback `sections`, not the entries: RN's inner VirtualizedList gets
+  // `data={this.props.sections}` (VirtualizedSectionList.js:216) while ours streams the FLATTENED
+  // entries, so the same user code would otherwise see a different argument here than on RN.
+  //
+  // UPSTREAM-DIVERGENCE(react-native): the flat INDEX matches RN's (two rows per section, header
+  // and footer) only while the vSectionSeparator template is unset. With it, flattenSections emits
+  // an extra 'section-separator' row per boundary that RN renders inside the neighbouring cell, so
+  // indices shift by one per boundary from the second section on. Deliberate - that row is how this
+  // adapter paints the separator; a caller combining the two must account for it.
+  //
+  // Cached on the input's own identity, like resolvedStyle above: the inner VirtualizedList folds
+  // getItemLayout into its ngDoCheck dedup array, so a wrapper allocated per getter read would
+  // re-run its whole recompute every CD.
+  private cachedEntryItemLayout?: (
+    data: unknown,
+    index: number,
+  ) => { length: number; offset: number; index: number };
+  private lastGetItemLayout?: IVirtualizedSectionListProps<ItemT>['getItemLayout'];
+  get entryItemLayout():
+    | ((
+        data: unknown,
+        index: number,
+      ) => { length: number; offset: number; index: number })
+    | undefined {
+    if (this.getItemLayout !== this.lastGetItemLayout) {
+      const getItemLayout = this.getItemLayout;
+      this.lastGetItemLayout = getItemLayout;
+      this.cachedEntryItemLayout =
+        getItemLayout === undefined
+          ? undefined
+          : (
+              _entries: unknown,
+              index: number,
+            ): { length: number; offset: number; index: number } =>
+              getItemLayout(this.sections, index);
+    }
+    return this.cachedEntryItemLayout;
+  }
+
   // Adapts each @Output() into the plain callback VirtualizedList's own @Input() still wants,
   // gated on `.observed` so an unlistened event forwards `undefined` — the same "nobody cares"
   // contract the old @Input() callback passthrough had (e.g. onRefresh presence gates whether a
   // RefreshControl is built downstream; see the Vue twin's `listens('onRefresh')` gate).
-  get resolvedOnEndReached(): ((info: { distanceFromEnd: number }) => void) | undefined {
-    return this.endReached.observed ? info => this.endReached.emit(info) : undefined;
+  get resolvedOnEndReached():
+    ((info: { distanceFromEnd: number }) => void) | undefined {
+    return this.endReached.observed
+      ? info => this.endReached.emit(info)
+      : undefined;
   }
 
-  get resolvedOnStartReached(): ((info: { distanceFromStart: number }) => void) | undefined {
-    return this.startReached.observed ? info => this.startReached.emit(info) : undefined;
+  get resolvedOnStartReached():
+    ((info: { distanceFromStart: number }) => void) | undefined {
+    return this.startReached.observed
+      ? info => this.startReached.emit(info)
+      : undefined;
   }
 
   get resolvedOnRefresh(): (() => void) | undefined {
     return this.refresh.observed ? () => this.refresh.emit() : undefined;
   }
 
-  get resolvedOnAccessibilityAction(): ((event: ISymbioteEvent) => void) | undefined {
+  get resolvedOnAccessibilityAction():
+    ((event: ISymbioteEvent) => void) | undefined {
     return this.accessibilityAction.observed
       ? event => this.accessibilityAction.emit(event)
       : undefined;
   }
 
-  get resolvedOnAccessibilityTap(): ((event: ISymbioteEvent) => void) | undefined {
-    return this.accessibilityTap.observed ? event => this.accessibilityTap.emit(event) : undefined;
+  get resolvedOnAccessibilityTap():
+    ((event: ISymbioteEvent) => void) | undefined {
+    return this.accessibilityTap.observed
+      ? event => this.accessibilityTap.emit(event)
+      : undefined;
   }
 
   get resolvedOnMagicTap(): ((event: ISymbioteEvent) => void) | undefined {
-    return this.magicTap.observed ? event => this.magicTap.emit(event) : undefined;
+    return this.magicTap.observed
+      ? event => this.magicTap.emit(event)
+      : undefined;
   }
 
-  get resolvedOnAccessibilityEscape(): ((event: ISymbioteEvent) => void) | undefined {
+  get resolvedOnAccessibilityEscape():
+    ((event: ISymbioteEvent) => void) | undefined {
     return this.accessibilityEscape.observed
       ? event => this.accessibilityEscape.emit(event)
       : undefined;
@@ -516,7 +621,10 @@ export class VirtualizedSectionList<ItemT = unknown>
     return { $implicit: value.section, section: value.section };
   }
 
-  itemContextOf(value: unknown, separators: ISeparators): IVSectionItemContext<ItemT> | undefined {
+  itemContextOf(
+    value: unknown,
+    separators: ISeparators,
+  ): IVSectionItemContext<ItemT> | undefined {
     if (!this.isEntry(value) || value.kind !== 'item') return undefined;
     return {
       $implicit: value.item,
@@ -539,8 +647,12 @@ export class VirtualizedSectionList<ItemT = unknown>
     return {
       $implicit: highlighted === true,
       highlighted: highlighted === true,
-      leadingItem: this.isEntry(leadingItem) ? unwrapEntryItem(leadingItem) : undefined,
-      trailingItem: this.isEntry(trailingItem) ? unwrapEntryItem(trailingItem) : undefined,
+      leadingItem: this.isEntry(leadingItem)
+        ? unwrapEntryItem(leadingItem)
+        : undefined,
+      trailingItem: this.isEntry(trailingItem)
+        ? unwrapEntryItem(trailingItem)
+        : undefined,
     };
   }
 

package/src/components.ts

@@ -112,7 +112,10 @@ export type {
   IVSectionItemContext,
 } from './components/virtualized-section-list';
 export { SectionList } from './components/section-list';
-export type { ISectionListHandle, ISectionListProps } from './components/section-list';
+export type {
+  ISectionListHandle,
+  ISectionListProps,
+} from './components/section-list';
 
 // Re-export primitive hosts so composed components can import them from the public barrel too.
 export {

package/src/create-portal/index.ts

@@ -42,7 +42,11 @@ import {
 /** Marks the destination for `*portal` — place it on whichever already-mounted host should
  *  paint the portaled content (e.g. a persistent overlay-host View near the app root), then
  *  export it to a template variable and pass that variable as `*portal`'s target. */
-@Directive({ selector: '[portalOutlet]', standalone: true, exportAs: 'portalOutlet' })
+@Directive({
+  selector: '[portalOutlet]',
+  standalone: true,
+  exportAs: 'portalOutlet',
+})
 export class PortalOutletDirective {
   readonly viewContainerRef = inject(ViewContainerRef);
 }
@@ -59,7 +63,9 @@ export class PortalDirective implements OnChanges, OnDestroy {
 
   ngOnChanges(): void {
     this.viewRef?.destroy();
-    this.viewRef = this.portal.viewContainerRef.createEmbeddedView(this.templateRef);
+    this.viewRef = this.portal.viewContainerRef.createEmbeddedView(
+      this.templateRef,
+    );
   }
 
   ngOnDestroy(): void {

package/src/create-tunnel/index.ts

@@ -109,7 +109,9 @@ export class TunnelOut implements OnInit, OnDestroy {
   private stopEffect: (() => void) | undefined;
 
   ngOnInit(): void {
-    const ref = effect(() => this.sync(this.tunnel.entries()), { injector: this.injector });
+    const ref = effect(() => this.sync(this.tunnel.entries()), {
+      injector: this.injector,
+    });
     this.stopEffect = () => ref.destroy();
   }
 

package/src/descriptor-to-angular/index.ts

@@ -15,7 +15,10 @@ import {
   type OnDestroy,
   type SimpleChanges,
 } from '@angular/core';
-import type { IDescriptor, IDescriptorChild } from '@symbiote-native/components';
+import type {
+  IDescriptor,
+  IDescriptorChild,
+} from '@symbiote-native/components';
 
 type IRenderedChild = IRenderedElement | IRenderedText;
 
@@ -43,7 +46,8 @@ export class DescriptorOutlet implements OnChanges, OnDestroy {
   @Input({ required: true }) node!: IDescriptor;
 
   private readonly renderer = inject(Renderer2);
-  private readonly hostNode = inject<ElementRef<unknown>>(ElementRef).nativeElement;
+  private readonly hostNode =
+    inject<ElementRef<unknown>>(ElementRef).nativeElement;
   private rendered: IRenderedElement | undefined;
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -57,7 +61,10 @@ export class DescriptorOutlet implements OnChanges, OnDestroy {
     this.rendered = undefined;
   }
 
-  private patchRoot(rendered: IRenderedElement | undefined, next: IDescriptor): IRenderedElement {
+  private patchRoot(
+    rendered: IRenderedElement | undefined,
+    next: IDescriptor,
+  ): IRenderedElement {
     if (rendered === undefined) {
       const created = this.createElement(next);
       this.renderer.appendChild(this.hostNode, created.node);
@@ -67,7 +74,9 @@ export class DescriptorOutlet implements OnChanges, OnDestroy {
   }
 
   private createChild(child: IDescriptorChild): IRenderedChild {
-    return typeof child === 'string' ? this.createText(child) : this.createElement(child);
+    return typeof child === 'string'
+      ? this.createText(child)
+      : this.createElement(child);
   }
 
   private createText(value: string): IRenderedText {
@@ -127,12 +136,19 @@ export class DescriptorOutlet implements OnChanges, OnDestroy {
     }
 
     this.patchProps(rendered, next.props);
-    rendered.children = this.patchChildren(rendered.node, rendered.children, next.children);
+    rendered.children = this.patchChildren(
+      rendered.node,
+      rendered.children,
+      next.children,
+    );
     rendered.descriptor = next;
     return rendered;
   }
 
-  private patchProps(rendered: IRenderedElement, nextProps: Record<string, unknown>): void {
+  private patchProps(
+    rendered: IRenderedElement,
+    nextProps: Record<string, unknown>,
+  ): void {
     const prevProps = rendered.props;
     for (const key of Object.keys(prevProps)) {
       if (!(key in nextProps)) {
@@ -173,13 +189,18 @@ export class DescriptorOutlet implements OnChanges, OnDestroy {
 
     for (let i = common; i < renderedChildren.length; i++) {
       const rendered = renderedChildren[i];
-      if (rendered !== undefined) this.renderer.removeChild(parent, rendered.node);
+      if (rendered !== undefined)
+        this.renderer.removeChild(parent, rendered.node);
     }
 
     return nextRendered;
   }
 
-  private replaceChild(parent: unknown, oldChild: unknown, newChild: unknown): void {
+  private replaceChild(
+    parent: unknown,
+    oldChild: unknown,
+    newChild: unknown,
+  ): void {
     this.renderer.insertBefore(parent, newChild, oldChild);
     this.renderer.removeChild(parent, oldChild);
   }

package/src/diagnostics.ts

@@ -0,0 +1,138 @@
+// Per-window counters for the Angular adapter, the twin of the engine's readCommitProfile().
+// The engine's number answers "what did the commit walk cost"; these answer the question one layer
+// up, which is the one Angular keeps losing: HOW MANY TIMES did anything run at all.
+//
+// Angular is the only adapter whose update model can free-run. A change-detection pass that writes
+// a fresh reference into a downstream @Input marks a view dirty, the zoneless scheduler books
+// another pass, and it never settles - the hazard `stableAnchorStyle` and VirtualizedList's
+// `lastRecompute` gate each guard one instance of. A guard that stops holding is INVISIBLE from the
+// outside: the screen paints correctly, only the frame rate collapses. `cdPasses` at rest is what
+// makes it visible, and every other counter here narrows the same window to a suspect.
+//
+// Deliberately NOT gated behind isDebug(): an integer increment is noise next to the work it
+// counts, and the numbers are only meaningful from a RELEASE build (dev-mode Angular runs its own
+// checks and drowns the signal). The per-name detail map IS gated, since it allocates.
+
+export interface IAngularProfile {
+  // Change-detection passes: RendererFactory2.end() runs once per ApplicationRef.tick().
+  cdPasses: number;
+  // Primitive host views (symbiote-view / symbiote-text / ...) Angular actually walked. Divided by
+  // cdPasses this is the SIZE OF THE TREE one tick touches - the number that separates "the list is
+  // expensive" from "every mounted screen is re-checked because a list scrolled". The primitives are
+  // CheckAlways, and a Global tick refreshes every CheckAlways view in the application.
+  viewsChecked: number;
+  // Prop/style/class/text writes that reached the engine. At rest this must be 0: a nonzero idle
+  // value means change detection is rewriting props nothing asked to change.
+  rendererWrites: number;
+  nodesCreated: number;
+  nodesInserted: number;
+  nodesRemoved: number;
+  // The `class` poll every COMPOSED component runs per check (SymbioteStyleInputDirective: Pressable,
+  // ScrollView, Image, the lists...; the raw primitives are counted by `viewsChecked` instead).
+  // `styleMarks` is how often the poll actually found a change and dirtied the view - the ratio is
+  // how much of the polling is wasted, and a nonzero idle `styleMarks` is a free-run engine.
+  styleChecks: number;
+  styleMarks: number;
+  // VirtualizedList: checks vs the ones that got past the `lastRecompute` dedup gate. Recomputes
+  // climbing with checks means the gate is not holding, which is the free-run bug itself.
+  listChecks: number;
+  listRecomputes: number;
+  listMarks: number;
+  // Scroll events the list saw. With sticky headers RN pins scrollEventThrottle to 1, so this is
+  // the frame rate of the gesture and the denominator for everything measured during a drag.
+  scrollTicks: number;
+  // Cell views. `outletUpdates` is the cheap path (context patched in place); `outletCreates` past
+  // the first window means cells are being rebuilt instead of reused, which is the cost CDK's
+  // view-recycling strategy exists to avoid.
+  outletCreates: number;
+  outletUpdates: number;
+  outletDestroys: number;
+  // Sticky projection: schedules are cheap (a Set insert), flushes walk every projected record.
+  projectionSchedules: number;
+  projectionFlushes: number;
+  // A sticky wrapper rebuilt loses its measured layout and costs a native round trip; reuse is the
+  // fixed path. Creates climbing during a plain scroll is the regression this pair pins.
+  stickyWrapperCreates: number;
+  stickyWrapperReuses: number;
+}
+
+type IAngularCounter = keyof IAngularProfile;
+
+function createCounters(): IAngularProfile {
+  return {
+    cdPasses: 0,
+    viewsChecked: 0,
+    rendererWrites: 0,
+    nodesCreated: 0,
+    nodesInserted: 0,
+    nodesRemoved: 0,
+    styleChecks: 0,
+    styleMarks: 0,
+    listChecks: 0,
+    listRecomputes: 0,
+    listMarks: 0,
+    scrollTicks: 0,
+    outletCreates: 0,
+    outletUpdates: 0,
+    outletDestroys: 0,
+    projectionSchedules: 0,
+    projectionFlushes: 0,
+    stickyWrapperCreates: 0,
+    stickyWrapperReuses: 0,
+  };
+}
+
+let counters = createCounters();
+
+export function countAngular(counter: IAngularCounter): void {
+  counters[counter] += 1;
+}
+
+// Reading zeroes the counters, so a sampler on an interval gets disjoint windows rather than a
+// growing total - same contract as readCommitProfile().
+export function readAngularProfile(): IAngularProfile {
+  const snapshot = counters;
+  counters = createCounters();
+  return snapshot;
+}
+
+// Which prop names the renderer actually rewrites, and which host tags get created. Off by default
+// because it allocates per write; the probe screen turns it on for one sample. A write nothing
+// asked for is the whole diagnosis, and the prop NAME is what points at the binding responsible.
+let isDetailEnabled = false;
+const writesByProp = new Map<string, number>();
+const createsByTag = new Map<string, number>();
+
+export function setAngularProfileDetail(enabled: boolean): void {
+  isDetailEnabled = enabled;
+  if (!enabled) {
+    writesByProp.clear();
+    createsByTag.clear();
+  }
+}
+
+export function noteAngularWrite(propName: string): void {
+  if (!isDetailEnabled) return;
+  writesByProp.set(propName, (writesByProp.get(propName) ?? 0) + 1);
+}
+
+export function noteAngularCreate(tagName: string): void {
+  if (!isDetailEnabled) return;
+  createsByTag.set(tagName, (createsByTag.get(tagName) ?? 0) + 1);
+}
+
+export interface IAngularProfileDetail {
+  writesByProp: readonly (readonly [string, number])[];
+  createsByTag: readonly (readonly [string, number])[];
+}
+
+// Sorted hottest-first and read-and-cleared, so a sample names its own top offenders.
+export function readAngularProfileDetail(): IAngularProfileDetail {
+  const detail = {
+    writesByProp: [...writesByProp.entries()].sort((a, b) => b[1] - a[1]),
+    createsByTag: [...createsByTag.entries()].sort((a, b) => b[1] - a[1]),
+  };
+  writesByProp.clear();
+  createsByTag.clear();
+  return detail;
+}

package/src/host-instance/index.ts

@@ -13,14 +13,19 @@
 // An uncommitted or unknown input surfaces as null.
 
 import { ElementRef } from '@angular/core';
-import { getNativeTag, isSymbioteNode, type ISymbioteNode } from '@symbiote-native/engine';
+import {
+  getNativeTag,
+  isSymbioteNode,
+  type ISymbioteNode,
+} from '@symbiote-native/engine';
 
 export type { IHostInstance } from '@symbiote-native/engine';
 
 function resolveHostNode(candidate: unknown): ISymbioteNode | null {
   if (candidate === null || candidate === undefined) return null;
   if (isSymbioteNode(candidate)) return candidate;
-  if (candidate instanceof ElementRef) return resolveHostNode(candidate.nativeElement);
+  if (candidate instanceof ElementRef)
+    return resolveHostNode(candidate.nativeElement);
   const maybeHost = candidate as { nativeElement?: unknown };
   if (typeof maybeHost.nativeElement !== 'undefined') {
     return resolveHostNode(maybeHost.nativeElement);
@@ -29,7 +34,8 @@ function resolveHostNode(candidate: unknown): ISymbioteNode | null {
 }
 
 export function findNodeHandle(componentOrHandle: unknown): number | null {
-  if (componentOrHandle === null || componentOrHandle === undefined) return null;
+  if (componentOrHandle === null || componentOrHandle === undefined)
+    return null;
   if (typeof componentOrHandle === 'number') return componentOrHandle;
   const node = resolveHostNode(componentOrHandle);
   return node ? (getNativeTag(node) ?? null) : null;