@symbiote-native/angular 0.7.0 → 0.8.0

package/src/components/scroll-view/shared.ts

@@ -164,7 +164,8 @@ export const SCROLL_VIEW_INPUTS = [
 // (ReactNode children, ReactElement refreshControl) — Angular takes children via <ng-content> and
 // composes RefreshControl through projection instead. Declared per-adapter over the shared
 // accessibility base since a framework element/ref field can't live in a shared agnostic type.
-export interface IAngularScrollViewProps extends IAccessibilityProps, IAriaProps {
+export interface IAngularScrollViewProps
+  extends IAccessibilityProps, IAriaProps {
   style?: IStyleProp<IViewStyle>;
   // A bare string resolves through the shared style registry, like `class` on the host node.
   contentContainerStyle?: IStyleProp<IViewStyle> | string;
@@ -176,7 +177,12 @@ export interface IAngularScrollViewProps extends IAccessibilityProps, IAriaProps
   bounces?: boolean;
   decelerationRate?: 'normal' | 'fast' | number;
   scrollEventThrottle?: number;
-  contentInset?: { top?: number; left?: number; bottom?: number; right?: number };
+  contentInset?: {
+    top?: number;
+    left?: number;
+    bottom?: number;
+    right?: number;
+  };
   contentOffset?: { x: number; y: number };
   removeClippedSubviews?: boolean;
   snapToInterval?: number;
@@ -204,11 +210,17 @@ export interface IAngularScrollViewProps extends IAccessibilityProps, IAriaProps
   alwaysBounceHorizontal?: boolean;
   alwaysBounceVertical?: boolean;
   centerContent?: boolean;
-  scrollIndicatorInsets?: { top?: number; left?: number; bottom?: number; right?: number };
+  scrollIndicatorInsets?: {
+    top?: number;
+    left?: number;
+    bottom?: number;
+    right?: number;
+  };
   indicatorStyle?: 'default' | 'black' | 'white';
   directionalLockEnabled?: boolean;
   automaticallyAdjustKeyboardInsets?: boolean;
-  contentInsetAdjustmentBehavior?: 'automatic' | 'scrollableAxes' | 'never' | 'always';
+  contentInsetAdjustmentBehavior?:
+    'automatic' | 'scrollableAxes' | 'never' | 'always';
   minimumZoomScale?: number;
   maximumZoomScale?: number;
   zoomScale?: number;
@@ -399,7 +411,8 @@ export abstract class ScrollViewBase
   @ViewChild('host', { read: SymbioteHostPropsDirective })
   private hostDirective?: SymbioteHostPropsDirective;
 
-  @ContentChild(RefreshControl) protected projectedRefreshControl?: RefreshControl;
+  @ContentChild(RefreshControl)
+  protected projectedRefreshControl?: RefreshControl;
 
   // This component's OWN anchor host — where a `class="..."` at the use site resolves (see
   // anchorHostStyle's doc comment) — NOT `#host` in the platform templates, which targets the real
@@ -459,7 +472,9 @@ export abstract class ScrollViewBase
   // (commit.ts) falls back to Object.is on a function leaf, so even a structurally-identical bag
   // reads as "props changed" and forces a real Fabric re-clone that cascades up every ancestor
   // (see AnimatedComponentBase.reconcile()'s identical warning).
-  private readonly handleInvertedStickyLayout = (event: ISymbioteEvent): void => {
+  private readonly handleInvertedStickyLayout = (
+    event: ISymbioteEvent,
+  ): void => {
     const height = readLayoutDimension(event, 'height');
     // The projection controller is pushed from here rather than picked up on the next prop-bag
     // read: viewportHeight is internal mutable state, so once `scrollProps` became a memoized
@@ -502,7 +517,8 @@ export abstract class ScrollViewBase
   // new listener wrapper (and a new AnimatedEvent walking `collectMappedValues`) on every unrelated
   // change-detection pass while sticky headers are active.
   private cachedStickyOnScrollSource: IScrollHandler | undefined;
-  private cachedStickyOnScrollHandler: ((...args: readonly unknown[]) => void) | undefined;
+  private cachedStickyOnScrollHandler:
+    ((...args: readonly unknown[]) => void) | undefined;
 
   get isHorizontal(): boolean {
     const value = this.horizontal === true;
@@ -516,20 +532,26 @@ export abstract class ScrollViewBase
   }
 
   private get hasStickyHeaders(): boolean {
-    return this.stickyHeaderIndices !== undefined && this.stickyHeaderIndices.length > 0;
+    return (
+      this.stickyHeaderIndices !== undefined &&
+      this.stickyHeaderIndices.length > 0
+    );
   }
 
   // A class-name string resolves through the shared registry before it reaches
   // selectScrollIntrinsics, which only understands style objects/arrays.
-  private get resolvedContentContainerStyle(): IStyleProp<IViewStyle> | undefined {
+  private get resolvedContentContainerStyle():
+    IStyleProp<IViewStyle> | undefined {
     return typeof this.contentContainerStyle === 'string'
       ? resolveClassName(this.contentContainerStyle)
       : this.contentContainerStyle;
   }
 
   private get scrollViewBaseStyle(): IViewStyle {
-    return selectScrollIntrinsics(this.isHorizontal, this.resolvedContentContainerStyle)
-      .scrollViewBaseStyle;
+    return selectScrollIntrinsics(
+      this.isHorizontal,
+      this.resolvedContentContainerStyle,
+    ).scrollViewBaseStyle;
   }
 
   // Bridges non-reactive @Input fields into the reactive graph, so a computed() can memoize a
@@ -623,7 +645,8 @@ export abstract class ScrollViewBase
     // value each frame (JS jitter). The DECISIONS (which path, throttle defaults, whether to
     // capture viewport height) are folded out to the shared resolveScrollForwarding; Angular only
     // EXECUTES them, keeping stable-reference handlers so a fresh closure never forces a re-clone.
-    const nativeStickyAvailable = this.hasStickyHeaders && isNativeAnimatedAvailable();
+    const nativeStickyAvailable =
+      this.hasStickyHeaders && isNativeAnimatedAvailable();
     const forwarding = resolveScrollForwarding({
       hasStickyHeaders: this.hasStickyHeaders,
       nativeStickyAvailable,
@@ -725,7 +748,9 @@ export abstract class ScrollViewBase
     this.projectedRefreshControl?.handleRefresh(nativeNode);
   }
 
-  private refreshControlProps(style?: IStyleProp<IViewStyle>): Record<string, unknown> {
+  private refreshControlProps(
+    style?: IStyleProp<IViewStyle>,
+  ): Record<string, unknown> {
     const refresh = this.projectedRefreshControl;
     if (refresh === undefined) return {};
     return compact({
@@ -765,8 +790,14 @@ export abstract class ScrollViewBase
       this.isHorizontal,
       this.resolvedContentContainerStyle,
     );
-    const bag: Record<string, unknown> = { style: contentStyle, collapsable: false };
-    if (this.maintainVisibleContentPosition !== undefined || this.snapToAlignment !== undefined) {
+    const bag: Record<string, unknown> = {
+      style: contentStyle,
+      collapsable: false,
+    };
+    if (
+      this.maintainVisibleContentPosition !== undefined ||
+      this.snapToAlignment !== undefined
+    ) {
       bag.collapsableChildren = false;
     }
     bag.onLayout = this.handleContentLayout;
@@ -783,7 +814,9 @@ export abstract class ScrollViewBase
   // subscribes a template's (event) listeners in its CREATION pass, before any input is written and
   // before this component's own view is first refreshed - so `observed` is already settled at the
   // first evaluation and cannot flip afterwards without destroying the whole component.
-  private emitterCallback(emitter: EventEmitter<ISymbioteEvent>): IScrollHandler | undefined {
+  private emitterCallback(
+    emitter: EventEmitter<ISymbioteEvent>,
+  ): IScrollHandler | undefined {
     if (!emitter.observed) return undefined;
     let cached = this.emitterCallbackCache.get(emitter);
     if (cached === undefined) {
@@ -807,7 +840,10 @@ export abstract class ScrollViewBase
         [{ nativeEvent: { contentOffset: { y: this.scrollAnimatedValue } } }],
         userOnScroll === undefined
           ? undefined
-          : { listener: (...args: readonly unknown[]) => forwardScrollEvent(userOnScroll, args) },
+          : {
+              listener: (...args: readonly unknown[]) =>
+                forwardScrollEvent(userOnScroll, args),
+            },
       );
     }
     return this.cachedStickyOnScrollHandler;
@@ -823,7 +859,9 @@ export abstract class ScrollViewBase
   // The imperative API a parent reaches via @ViewChild(ScrollView). buildScrollViewHandle is the
   // shared, proven handle (React/Vue use it verbatim); it reads the node through the LAZY getter on
   // every call, so a command before commit no-ops rather than freezing a null node.
-  private readonly handle: IScrollViewHandle = buildScrollViewHandle(() => this.hostNode);
+  private readonly handle: IScrollViewHandle = buildScrollViewHandle(
+    () => this.hostNode,
+  );
 
   scrollTo(options?: { x?: number; y?: number; animated?: boolean }): void {
     this.handle.scrollTo(options);
@@ -861,6 +899,20 @@ export abstract class ScrollViewBase
   // actually moved, so `signal.set`'s own Object.is check makes an unchanged poll dirty nothing.
   ngDoCheck(): void {
     this.anchorStyle.set(anchorHostStyle(this.elementRef));
+    // The attach can want a node that does not exist yet, and nothing else would ask again.
+    // ngOnChanges covers "indices arrived late"; it does NOT cover "indices arrived late AND the host
+    // node had not committed yet", which is exactly what a VirtualizedList does - it derives
+    // stickyHeaderIndices from the measured window, so they land after this component's
+    // ngAfterViewInit and before its host node resolves. Device-diagnosed 2026-08-18 on
+    // examples/angular BenchmarkScreen STICKY PATH B, whose log ends on `attachSticky NOT attaching
+    // (wantsAttach=true hasNode=false)` - sticky never turned on, while PATH A (literal indices in
+    // the template) worked because ngAfterViewInit already saw a node. Retried ONLY from that stuck
+    // state, so a settled ScrollView pays nothing per check. Device-verified the same day.
+    // Not covered headless: sticky-native-attach.test.ts's late-indices case has its node resolved by
+    // the time the indices land, and the deferred-creation ordering under `@if` never rendered the
+    // ScrollView at all.
+    if (this.stickyAttachedEnabled && this.stickyAttachedNode === null)
+      this.attachSticky();
   }
 
   // The projected RefreshControl is a @ContentChild, not an @Input, so ngOnChanges never fires when
@@ -869,7 +921,8 @@ export abstract class ScrollViewBase
   // hook. Guarded on the flag itself so a check that changed nothing skips the reconcile walk,
   // which the old getter-driven update could not do.
   ngAfterContentChecked(): void {
-    if (this.hasProjectedRefreshControl === this.lastHasProjectedRefreshControl) return;
+    if (this.hasProjectedRefreshControl === this.lastHasProjectedRefreshControl)
+      return;
     this.lastHasProjectedRefreshControl = this.hasProjectedRefreshControl;
     this.updateProjectionController();
   }
@@ -910,8 +963,13 @@ export abstract class ScrollViewBase
     // Nothing that decides the attach has changed - return rather than detach and rebind the
     // native scroll event, which every unrelated @Input change would otherwise churn now that
     // ngOnChanges drives this too.
-    if (wantsAttach === this.stickyAttachedEnabled && node === this.stickyAttachedNode) {
-      dlog('STICKY[sv] attachSticky skipped (nothing about the attach changed)');
+    if (
+      wantsAttach === this.stickyAttachedEnabled &&
+      node === this.stickyAttachedNode
+    ) {
+      dlog(
+        'STICKY[sv] attachSticky skipped (nothing about the attach changed)',
+      );
       return;
     }
 
@@ -931,10 +989,15 @@ export abstract class ScrollViewBase
       );
       return;
     }
-    dlog('STICKY[sv] attachSticky waiting for commit to bind the native scroll event');
+    dlog(
+      'STICKY[sv] attachSticky waiting for commit to bind the native scroll event',
+    );
     this.cancelStickyBind = whenCommitted(node, () => {
       dlog('STICKY[sv] attachSticky node committed -> attachStickyScroll');
-      this.detachStickyScroll = attachStickyScroll(node, this.scrollAnimatedValue);
+      this.detachStickyScroll = attachStickyScroll(
+        node,
+        this.scrollAnimatedValue,
+      );
     });
   }
 
@@ -957,7 +1020,9 @@ export abstract class ScrollViewBase
 
   // Typed as the a11y intersection WITH the string index so resolveAccessibilityProps's result
   // stays assignable into the forwarded bag (a genuine narrowing, built at that type — no cast).
-  private accessibilityInputs(): IAccessibilityProps & IAriaProps & Record<string, unknown> {
+  private accessibilityInputs(): IAccessibilityProps &
+    IAriaProps &
+    Record<string, unknown> {
     return {
       testID: this.testID,
       nativeID: this.nativeID,
@@ -976,8 +1041,10 @@ export abstract class ScrollViewBase
       accessibilityElementsHidden: this.accessibilityElementsHidden,
       accessibilityIgnoresInvertColors: this.accessibilityIgnoresInvertColors,
       accessibilityLanguage: this.accessibilityLanguage,
-      accessibilityRespondsToUserInteraction: this.accessibilityRespondsToUserInteraction,
-      accessibilityShowsLargeContentViewer: this.accessibilityShowsLargeContentViewer,
+      accessibilityRespondsToUserInteraction:
+        this.accessibilityRespondsToUserInteraction,
+      accessibilityShowsLargeContentViewer:
+        this.accessibilityShowsLargeContentViewer,
       accessibilityLargeContentTitle: this.accessibilityLargeContentTitle,
       role: this.role,
       'aria-label': this['aria-label'],

package/src/components/scroll-view/sticky-header.ts

@@ -96,7 +96,9 @@ export class ScrollViewStickyHeader
   // The animated node driving the transform (RN's animatedTranslateY), replaced by the
   // rebuild-interpolation effect. When the scroll value is native, this interpolation runs on the UI
   // thread: the smooth pin.
-  private animatedTranslateY: AnimatedInterpolation = new AnimatedValue(0).interpolate({
+  private animatedTranslateY: AnimatedInterpolation = new AnimatedValue(
+    0,
+  ).interpolate({
     inputRange: [-1, 0],
     outputRange: [0, 0],
   });
@@ -135,13 +137,17 @@ export class ScrollViewStickyHeader
     // anchor style first so the fixed transform/zIndex below still wins on conflict.
     return [
       anchorHostStyle(this.elementRef),
-      { transform: [{ translateY: this.animatedTranslateY }], zIndex: STICKY_HEADER_Z_INDEX },
+      {
+        transform: [{ translateY: this.animatedTranslateY }],
+        zIndex: STICKY_HEADER_Z_INDEX,
+      },
     ];
   }
 
   // Stable reference (bound once) so AnimatedView's directive does not re-wire the layout listener
   // every change-detection pass.
-  private readonly onHostLayout = (event: ISymbioteEvent): void => this.handleLayout(event);
+  private readonly onHostLayout = (event: ISymbioteEvent): void =>
+    this.handleLayout(event);
 
   // Also a stable reference, not a getter: jsonEqual (commit.ts) can't structurally compare the
   // embedded onLayout function, so a fresh object here would read as "props changed" on every
@@ -156,7 +162,9 @@ export class ScrollViewStickyHeader
 
   // The EXPLICIT debounced translateY overrides the committed transform for hit-testing while
   // animatedTranslateY does the smooth (native-driven) pin (RN ScrollViewStickyHeader.js).
-  get passthrough(): { style: { transform: Array<{ translateY: number }> } } | null {
+  get passthrough(): {
+    style: { transform: Array<{ translateY: number }> };
+  } | null {
     return this.state.translateY !== null
       ? { style: { transform: [{ translateY: this.state.translateY }] } }
       : null;
@@ -181,7 +189,10 @@ export class ScrollViewStickyHeader
         case 'rebuild-interpolation': {
           // Detach the old listener, build a fresh interpolation onto the shared scroll value, and
           // wire the settled-value listener (symbiote is always Fabric; RN attaches it only there).
-          if (this.interpolation !== undefined && this.listenerId !== undefined) {
+          if (
+            this.interpolation !== undefined &&
+            this.listenerId !== undefined
+          ) {
             this.interpolation.removeListener(this.listenerId);
             this.listenerId = undefined;
           }
@@ -200,7 +211,8 @@ export class ScrollViewStickyHeader
         case 'schedule-debounce':
           // The animated value updates several times per frame; debounce the settled value into the
           // committed transform so hit detection stays current (a Fabric issue, worse on Android).
-          if (this.debounceTimer !== undefined) clearTimeout(this.debounceTimer);
+          if (this.debounceTimer !== undefined)
+            clearTimeout(this.debounceTimer);
           this.debounceTimer = setTimeout(() => {
             this.debounceTimer = undefined;
             this.dispatch({ kind: 'debounce-fired', value: effect.value });
@@ -233,8 +245,13 @@ export class ScrollViewStickyHeader
     this.changeDetector.markForCheck();
   }
 
-  private readonly animatedValueListener = ({ value }: { value: number | string }): void => {
-    if (typeof value === 'number') this.dispatch({ kind: 'animated-tick', value });
+  private readonly animatedValueListener = ({
+    value,
+  }: {
+    value: number | string;
+  }): void => {
+    if (typeof value === 'number')
+      this.dispatch({ kind: 'animated-tick', value });
   };
 
   private teardown(): void {

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

@@ -56,7 +56,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,
@@ -120,7 +123,9 @@ export type ISectionListInputs<ItemT> = Omit<
 @Component({
   selector: 'SectionList',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   imports: [
     VirtualizedSectionList,
     VSectionItemDirective,
@@ -138,6 +143,7 @@ export type ISectionListInputs<ItemT> = Omit<
     <VirtualizedSectionList
       [sections]="sections"
       [keyExtractor]="keyExtractor"
+      [getItemLayout]="getItemLayout"
       [stickySectionHeadersEnabled]="stickySectionHeadersEnabled"
       [extraData]="extraData"
       (endReached)="endReached.emit($event)"
@@ -182,8 +188,12 @@ export type ISectionListInputs<ItemT> = Omit<
       [accessibilityElementsHidden]="accessibilityElementsHidden"
       [accessibilityIgnoresInvertColors]="accessibilityIgnoresInvertColors"
       [accessibilityLanguage]="accessibilityLanguage"
-      [accessibilityRespondsToUserInteraction]="accessibilityRespondsToUserInteraction"
-      [accessibilityShowsLargeContentViewer]="accessibilityShowsLargeContentViewer"
+      [accessibilityRespondsToUserInteraction]="
+        accessibilityRespondsToUserInteraction
+      "
+      [accessibilityShowsLargeContentViewer]="
+        accessibilityShowsLargeContentViewer
+      "
       [accessibilityLargeContentTitle]="accessibilityLargeContentTitle"
       (accessibilityAction)="accessibilityAction.emit($event)"
       (accessibilityTap)="accessibilityTap.emit($event)"
@@ -214,7 +224,13 @@ export type ISectionListInputs<ItemT> = Omit<
       >
         <ng-container
           [vListOutlet]="sectionItemDir?.templateRef"
-          [vListOutletContext]="{ $implicit: item, item, index, section, separators }"
+          [vListOutletContext]="{
+            $implicit: item,
+            item,
+            index,
+            section,
+            separators,
+          }"
         ></ng-container>
       </ng-template>
       @if (sectionHeaderDir !== undefined) {
@@ -235,17 +251,23 @@ export type ISectionListInputs<ItemT> = Omit<
       }
       @if (sectionSeparatorDir !== undefined) {
         <ng-template vSectionSeparator>
-          <ng-container [vListOutlet]="sectionSeparatorDir.templateRef"></ng-container>
+          <ng-container
+            [vListOutlet]="sectionSeparatorDir.templateRef"
+          ></ng-container>
         </ng-template>
       }
       @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) {
@@ -262,7 +284,9 @@ export type ISectionListInputs<ItemT> = Omit<
         >
           <ng-container
             [vListOutlet]="itemSeparatorDir.templateRef"
-            [vListOutletContext]="itemSeparatorContext(highlighted, leadingItem, trailingItem)"
+            [vListOutletContext]="
+              itemSeparatorContext(highlighted, leadingItem, trailingItem)
+            "
           ></ng-container>
         </ng-template>
       }
@@ -274,11 +298,21 @@ export class SectionList<ItemT = unknown>
 {
   @Input({ required: true }) sections!: ReadonlyArray<ISection<ItemT>>;
   @Input() keyExtractor?: (item: ItemT, index: number) => string;
+  // Passed through FLAT (sections array + flat entry index); VirtualizedSectionList owns the
+  // sections-vs-entries wrapper - see its entryItemLayout getter.
+  @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;
@@ -331,8 +365,10 @@ export class SectionList<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;
@@ -363,18 +399,24 @@ export class SectionList<ItemT = unknown>
 
   // The app's section/list authoring templates, captured from the app's DIRECT projected content
   // (single hop — always resolves) and re-stamped onto the inner VirtualizedSectionList above.
-  @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;
   @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 VirtualizedSectionList. Its instance IS an IVirtualizedSectionListHandle, so
   // SectionList's handle delegates straight to it. Available from ngAfterViewInit; reads lazily.
-  @ViewChild(VirtualizedSectionList) private list?: VirtualizedSectionList<ItemT>;
+  @ViewChild(VirtualizedSectionList)
+  private list?: VirtualizedSectionList<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

package/src/components/switch/index.android.ts

@@ -20,10 +20,18 @@ export type { ISwitchProps, ISwitchTrackColor } from './shared';
 @Component({
   selector: 'Switch',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [SwitchHost, SymbioteHostPropsDirective],
-  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Switch), multi: true }],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => Switch),
+      multi: true,
+    },
+  ],
   inputs: [
     'value',
     'disabled',
@@ -60,7 +68,10 @@ export class Switch extends SwitchBase implements DoCheck {
 
   protected readonly platform = {
     snapBackCommand: 'setNativeValue',
-    trackColorProps: (value: boolean, trackColor?: { false?: string; true?: string }) => ({
+    trackColorProps: (
+      value: boolean,
+      trackColor?: { false?: string; true?: string },
+    ) => ({
       trackColorForFalse: trackColor?.false,
       trackColorForTrue: trackColor?.true,
       trackTintColor: value ? trackColor?.true : trackColor?.false,

package/src/components/switch/index.ios.ts

@@ -20,10 +20,18 @@ export type { ISwitchProps, ISwitchTrackColor } from './shared';
 @Component({
   selector: 'Switch',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [SwitchHost, SymbioteHostPropsDirective],
-  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Switch), multi: true }],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => Switch),
+      multi: true,
+    },
+  ],
   inputs: [
     'value',
     'disabled',
@@ -60,7 +68,10 @@ export class Switch extends SwitchBase implements DoCheck {
 
   protected readonly platform = {
     snapBackCommand: 'setValue',
-    trackColorProps: (_value: boolean, trackColor?: { false?: string; true?: string }) => ({
+    trackColorProps: (
+      _value: boolean,
+      trackColor?: { false?: string; true?: string },
+    ) => ({
       onTintColor: trackColor?.true,
       tintColor: trackColor?.false,
     }),

package/src/components/switch/shared.ts

@@ -9,7 +9,10 @@ import {
   type OnChanges,
 } from '@angular/core';
 import type { ControlValueAccessor } from '@angular/forms';
-import { renderSwitch, resolveAccessibilityProps } from '@symbiote-native/components';
+import {
+  renderSwitch,
+  resolveAccessibilityProps,
+} from '@symbiote-native/components';
 import type {
   ISwitchPlatform,
   ISwitchProps,
@@ -33,7 +36,10 @@ import {
   type IViewStyle,
 } from '@symbiote-native/engine';
 
-export type { ISwitchProps, ISwitchTrackColor } from '@symbiote-native/components';
+export type {
+  ISwitchProps,
+  ISwitchTrackColor,
+} from '@symbiote-native/components';
 
 export type ISwitchInputs = Pick<
   ISwitchProps,
@@ -88,7 +94,9 @@ function isSwitchEvent(event: unknown): event is ISymbioteEvent {
 // concrete subclasses are real @Components — ngc's AOT build (NG2007) requires it the moment the
 // base itself carries decorated members (@Output() here), mirroring ScrollViewBase.
 @Directive()
-export abstract class SwitchBase implements ISwitchInputs, ControlValueAccessor, OnChanges {
+export abstract class SwitchBase
+  implements ISwitchInputs, ControlValueAccessor, OnChanges
+{
   // The value/change lifecycle as real Angular events: `(valueChange)="onToggle($event)"`, not
   // `[onValueChange]="onToggle"` — mirrors Pressable's press/hover @Output() conversion. Unlike
   // Pressable's createPressHandlers, handleChange() below calls `.emit()` unconditionally: it needs
@@ -191,7 +199,10 @@ export abstract class SwitchBase implements ISwitchInputs, ControlValueAccessor,
     if (next === undefined) return;
 
     this.valueChange.emit(next);
-    this.switchState = switchReducer(this.switchState, { type: 'native-reported', value: next });
+    this.switchState = switchReducer(this.switchState, {
+      type: 'native-reported',
+      value: next,
+    });
 
     const hostNode = readSwitchNode(node);
     if (hostNode === null) return;