@symbiote-native/angular 0.6.2 → 0.8.0

package/src/components/refresh-control/index.ts

@@ -1,12 +1,12 @@
 // RefreshControl, the Angular lifecycle half. On iOS this is the PullToRefreshView Fabric node that
 // lives INSIDE a ScrollView (a childless sibling before the content container); on Android it is
-// AndroidSwipeRefreshLayout and WRAPS the scroll view, receiving it through <ng-content>.
-// The Angular twin of the React/Vue RefreshControl. There is no JS-side platform renaming and no
-// shared render fn — every prop forwards straight to the native node, which reads the ones it
-// understands and ignores the rest, so the Android-only and iOS-only families ride down harmlessly
-// on both. So this folds aria/role through the shared resolveAccessibilityProps and maps the native
-// props + a11y + onRefresh straight onto the symbiote-refresh-control host, children via <ng-content>.
-// No platform branch (one composed component both platforms), so this stays a flat single file.
+// AndroidSwipeRefreshLayout and WRAPS the scroll view, receiving it through <ng-content>. There is
+// no JS-side platform renaming and no shared render fn — every prop forwards straight to the
+// native node, which reads what it understands and ignores the rest, so Android-only and iOS-only
+// prop families ride down harmlessly on both. This folds aria/role through the shared
+// resolveAccessibilityProps and maps the native props + a11y + onRefresh onto the
+// symbiote-refresh-control host, children via <ng-content>. One composed component covers both
+// platforms, so this stays a flat single file.
 //
 // `refreshing` is a controlled prop: the parent owns it and pushes it down each commit; native
 // reports the gesture via the direct `topRefresh` event, which the engine routes to the host's
@@ -16,13 +16,16 @@ import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   Component,
+  computed,
   ElementRef,
   EventEmitter,
   inject,
   Input,
   Output,
+  signal,
   ViewChild,
   type AfterViewInit,
+  type DoCheck,
   type OnChanges,
   type OnInit,
   type SimpleChanges,
@@ -42,7 +45,12 @@ import {
   type ISymbioteEvent,
   type IViewStyle,
 } from '@symbiote-native/engine';
-import { anchorHostStyle, RefreshControlHost, SymbioteHostPropsDirective } from '../../primitives';
+import {
+  anchorHostStyle,
+  RefreshControlHost,
+  SymbioteHostPropsDirective,
+  SymbioteStyleInputDirective,
+} from '../../primitives';
 
 // Record<string, unknown> already tolerates `style` holding the [anchorHostStyle, this.style]
 // array anchorHostStyle's merge produces (see hostProps below) — no widening needed.
@@ -52,7 +60,8 @@ type IHostProps = Record<string, unknown>;
 // via <ng-content>), declared per-adapter over the shared accessibility base since the framework-specific
 // children slot keeps it from being fully shared across adapters. Read the React reference for the
 // native prop names.
-export interface IAngularRefreshControlProps extends IAccessibilityProps, IAriaProps {
+export interface IAngularRefreshControlProps
+  extends IAccessibilityProps, IAriaProps {
   refreshing: boolean;
   // RN's onRefresh is `() => void | Promise<void>`, the handler may be async; the promise is
   // fire-and-forget (native already starts refreshing on the gesture).
@@ -89,13 +98,16 @@ export type IAngularRefreshControlInputs = Omit<
 @Component({
   selector: 'RefreshControl',
   standalone: true,
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [RefreshControlHost, SymbioteHostPropsDirective],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <symbiote-refresh-control
       #host
-      [symbioteHostProps]="hostProps"
+      [symbioteHostProps]="hostProps()"
       (refresh)="handleRefresh()"
       (accessibilityAction)="emit(accessibilityAction, $event)"
       (accessibilityTap)="emit(accessibilityTap, $event)"
@@ -107,7 +119,12 @@ export type IAngularRefreshControlInputs = Omit<
   `,
 })
 export class RefreshControl
-  implements IAngularRefreshControlInputs, OnInit, OnChanges, AfterViewInit
+  implements
+    IAngularRefreshControlInputs,
+    OnInit,
+    OnChanges,
+    DoCheck,
+    AfterViewInit
 {
   // Controlled prop the parent owns; required to match the React reference surface.
   @Input({ required: true }) refreshing!: boolean;
@@ -133,8 +150,10 @@ export class RefreshControl
   @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;
@@ -175,6 +194,18 @@ export class RefreshControl
   private lastNativeRefreshing = false;
   private refreshNativeNode: unknown;
 
+  // Bridges the non-reactive @Input fields `hostProps` reads into the reactive graph, so it can
+  // memoize. Plain fields read inside a computed() are UNTRACKED - something must signal "a
+  // dependency changed" or the bag goes stale. Signal inputs would do this natively, but `input()`
+  // is visible only to the AOT compiler and this package's unit suite runs on JIT (see the
+  // `angular-adapter-change-detection` skill, §6); `signal()`/`computed()` are plain runtime APIs.
+  // Safe here because `refreshing` is a CONTROLLED @Input - the parent owns it, nothing in this
+  // class assigns it. The internal `lastNativeRefreshing` / `refreshNativeNode` fields drive the
+  // native handshake only; neither is read by the bag, so neither may bump this.
+  private readonly hostPropsRevision = signal(0);
+  // What the anchor's class-derived style was when the bag was last built (identity, not value).
+  private lastAnchorStyle: unknown;
+
   ngOnInit(): void {
     dlog('RefreshControl -> PullToRefreshView');
     dlog(`RefreshControl refreshing=${String(this.refreshing)}`);
@@ -188,13 +219,18 @@ export class RefreshControl
   }
 
   ngOnChanges(changes: SimpleChanges): void {
+    // Before the `refreshing`-only early-return below: this is the single moment Angular has
+    // finished writing every changed @Input, and `hostProps` depends on the whole input surface.
+    this.hostPropsRevision.update(revision => revision + 1);
     const refreshing = changes.refreshing;
     if (refreshing === undefined) return;
     if (refreshing.firstChange) {
       this.lastNativeRefreshing = this.refreshing;
       return;
     }
-    this.syncNativeRefreshing(this.refreshNativeNode ?? this.host?.nativeElement);
+    this.syncNativeRefreshing(
+      this.refreshNativeNode ?? this.host?.nativeElement,
+    );
   }
 
   // Native starts the spinner before JS runs. Mirror RN's RefreshControl controlled-component
@@ -220,11 +256,29 @@ export class RefreshControl
     if (isSymbioteEvent(event)) emitter.emit(event);
   }
 
+  // The anchor's class-derived style is NOT an @Input: `class="..."`/`[ngClass]` at the use site
+  // resolves through the renderer's addClass onto this component's anchor host (see
+  // anchorHostStyle's doc comment), so it never shows up in SimpleChanges and ngOnChanges alone
+  // would leave a later class toggle stranded. ngDoCheck runs at exactly the cadence the old
+  // getter was re-read, and bumps only on a real identity change.
+  ngDoCheck(): void {
+    const anchorStyle = anchorHostStyle(this.elementRef);
+    if (anchorStyle === this.lastAnchorStyle) return;
+    this.lastAnchorStyle = anchorStyle;
+    this.hostPropsRevision.update(revision => revision + 1);
+  }
+
   // The full native + a11y prop bag applied onto the host in one shot via
   // [symbioteHostProps], instead of enumerating each key as its own template binding. The
   // anchor's class-derived style goes FIRST, this component's own explicit `style` @Input SECOND
   // — flattenStyle's later-wins collapse keeps an explicit [style] winning over its ambient class.
-  get hostProps(): IHostProps {
+  //
+  // A computed(), not a getter: Angular re-reads a template getter on every refresh of this view
+  // and `[symbioteHostProps]` compares by REFERENCE, so a freshly rebuilt (but identical) bag
+  // re-pushes every key through renderer.setProperty -> the engine's prop routing. A pull gesture
+  // dirties this view through its own `(refresh)` binding, which is exactly when that waste hit.
+  readonly hostProps = computed<IHostProps>(() => {
+    this.hostPropsRevision();
     return {
       refreshing: this.refreshing,
       tintColor: this.tintColor,
@@ -241,7 +295,7 @@ export class RefreshControl
       accessible: this.accessible,
       ...this.folded,
     };
-  }
+  });
 
   // Fold the web aria-*/role aliases into the canonical accessibility* props once per render, so the
   // host node never sees an aria-* key (native ignores them) — the shared transform every adapter runs.
@@ -261,8 +315,10 @@ export class RefreshControl
       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.ariaLabel,

package/src/components/safe-area-view/index.ts

@@ -10,11 +10,15 @@ import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   Component,
+  computed,
   ElementRef,
   EventEmitter,
   inject,
   Input,
   Output,
+  signal,
+  type DoCheck,
+  type OnChanges,
 } from '@angular/core';
 import {
   resolveAccessibilityProps,
@@ -28,12 +32,18 @@ import {
   type ISymbioteEvent,
   type IViewStyle,
 } from '@symbiote-native/engine';
-import { anchorHostStyle, SafeAreaViewHost, SymbioteHostPropsDirective } from '../../primitives';
+import {
+  anchorHostStyle,
+  SafeAreaViewHost,
+  SymbioteHostPropsDirective,
+  SymbioteStyleInputDirective,
+} from '../../primitives';
 
 // Mirrors React's ISafeAreaViewProps minus children (Angular takes children via <ng-content>),
 // declared per-adapter over the shared accessibility base since the framework-specific children
 // slot keeps it from being fully shared across adapters.
-export interface IAngularSafeAreaViewProps extends IAccessibilityProps, IAriaProps {
+export interface IAngularSafeAreaViewProps
+  extends IAccessibilityProps, IAriaProps {
   style?: IStyleProp<IViewStyle>;
   onLayout?: (event: ISymbioteEvent) => void;
 }
@@ -53,12 +63,15 @@ export type IAngularSafeAreaViewInputs = Omit<
 @Component({
   selector: 'SafeAreaView',
   standalone: true,
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [SafeAreaViewHost, SymbioteHostPropsDirective],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <symbiote-safe-area-view
-      [symbioteHostProps]="hostProps"
+      [symbioteHostProps]="hostProps()"
       (accessibilityAction)="emit(accessibilityAction, $event)"
       (accessibilityTap)="emit(accessibilityTap, $event)"
       (magicTap)="emit(magicTap, $event)"
@@ -69,7 +82,9 @@ export type IAngularSafeAreaViewInputs = Omit<
     </symbiote-safe-area-view>
   `,
 })
-export class SafeAreaView implements IAngularSafeAreaViewInputs {
+export class SafeAreaView
+  implements IAngularSafeAreaViewInputs, OnChanges, DoCheck
+{
   @Input() style?: IStyleProp<IViewStyle>;
   // Real @Output()s, not `[onX]="…"` callbacks. Safe to name `layout` the same as the native
   // `layout` event fired inside this component's own template — the engine's bubble() treats
@@ -89,8 +104,10 @@ export class SafeAreaView implements IAngularSafeAreaViewInputs {
   @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;
@@ -127,6 +144,35 @@ export class SafeAreaView implements IAngularSafeAreaViewInputs {
     if (isSymbioteEvent(event)) emitter.emit(event);
   }
 
+  // Bridges the non-reactive fields `hostProps` reads into the reactive graph, so it can memoize.
+  // Plain fields read inside a computed() are UNTRACKED - something must signal "a dependency
+  // changed" or the bag goes stale. Signal inputs would do this natively, but `input()` is visible
+  // only to the AOT compiler and this package's unit suite runs on JIT (see the
+  // `angular-adapter-change-detection` skill, §6); `signal()`/`computed()` are plain runtime APIs.
+  // TWO bump sites, both required - see ngOnChanges and ngDoCheck below.
+  private readonly hostPropsRevision = signal(0);
+  // What the anchor's class-derived style was when the bag was last built (identity, not value).
+  private lastAnchorStyle: unknown;
+
+  ngOnChanges(): void {
+    // The single moment Angular has finished writing every changed @Input for this pass.
+    this.hostPropsRevision.update(revision => revision + 1);
+  }
+
+  // The anchor's class-derived style is NOT an @Input: `class="..."`/`[ngClass]` at the use site
+  // resolves through the renderer's addClass onto this component's anchor host (see
+  // anchorHostStyle's doc comment), so it never shows up in SimpleChanges - ngOnChanges alone
+  // would strand a class toggled after mount (regression-covered by safe-area-view.test.ts's
+  // class-toggle case, which fails the moment this hook stops bumping). ngDoCheck runs at exactly
+  // the cadence the old getter was re-read, and bumps only on a real identity change, so an
+  // unchanged anchor still costs nothing.
+  ngDoCheck(): void {
+    const anchorStyle = anchorHostStyle(this.elementRef);
+    if (anchorStyle === this.lastAnchorStyle) return;
+    this.lastAnchorStyle = anchorStyle;
+    this.hostPropsRevision.update(revision => revision + 1);
+  }
+
   // Folds style/testID/nativeID/accessible alongside the accessibility*/aria-*/role surface into
   // one bag for [symbioteHostProps] — resolveAccessibilityProps takes the whole props object (not
   // just the accessibility slice) and returns it with aria-*/role folded into accessibility*, so
@@ -134,7 +180,13 @@ export class SafeAreaView implements IAngularSafeAreaViewInputs {
   // SafeAreaView runs over its whole `rawProps`. The anchor's class-derived style goes FIRST, this
   // component's own explicit `style` @Input SECOND — flattenStyle's later-wins collapse keeps an
   // explicit [style] winning over its ambient class.
-  get hostProps(): Record<string, unknown> {
+  //
+  // A computed(), not a getter: Angular re-reads a template getter on every refresh of this view
+  // and `[symbioteHostProps]` compares by REFERENCE, so a freshly rebuilt (but identical) bag
+  // re-pushes every key through renderer.setProperty -> the engine's prop routing. Memoized, an
+  // a11y/layout event that only dirties this view costs nothing.
+  readonly hostProps = computed<Record<string, unknown>>(() => {
+    this.hostPropsRevision();
     return resolveAccessibilityProps({
       style: [anchorHostStyle(this.elementRef), this.style],
       testID: this.testID,
@@ -154,8 +206,10 @@ export class SafeAreaView implements IAngularSafeAreaViewInputs {
       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.ariaLabel,
@@ -173,5 +227,5 @@ export class SafeAreaView implements IAngularSafeAreaViewInputs {
       'aria-valuenow': this.ariaValueNow,
       'aria-valuetext': this.ariaValueText,
     });
-  }
+  });
 }

package/src/components/scroll-view/index.android.ts

@@ -1,23 +1,22 @@
-// ScrollView on Android. An Android ScrollView accepts only ONE child, so a
-// RefreshControl can't be a sibling of the content the way iOS allows ("addViewAt: failed to insert
-// view ... at index 1"). RN solves this by having the RefreshControl (AndroidSwipeRefreshLayout)
-// WRAP the scroll view (cloneElement(refreshControl, {style}, scrollView)). Angular mirrors that
-// shape by querying a projected <RefreshControl>, re-rendering its native prop surface as the outer
-// wrapper, and projecting every non-RefreshControl child into the inner scroll content.
+// ScrollView on Android. An Android ScrollView accepts only ONE child, so a RefreshControl can't
+// be a sibling of the content the way iOS allows ("addViewAt: failed to insert view ... at index
+// 1"). RN solves this by having the RefreshControl (AndroidSwipeRefreshLayout) WRAP the scroll
+// view (cloneElement(refreshControl, {style}, scrollView)). Angular mirrors that shape by querying
+// a projected <RefreshControl>, re-rendering its native prop surface as the outer wrapper, and
+// projecting every non-RefreshControl child into the inner scroll content.
 //
-// Android genuinely needs a different Fabric view per
-// axis for BOTH the outer scroll container (RCTScrollView is vertical-only; AndroidHorizontalScrollView
-// is a dedicated ViewManager) AND the inner content view (vertical content is a plain Android View,
-// horizontal content is AndroidHorizontalScrollContentView, which carries its own ShadowNode::
-// layout() override). So the content tag differs by axis — but Angular only reliably projects into a
-// component's LAST-declared <ng-content> when 2+ DISTINCT declarations exist (angular/angular#22972),
-// which an earlier 4-call-site template (one <ng-content> per axis x refresh-control branch) tripped.
-// Fix: exactly ONE `<ng-content>` textually, inside a single top-level `<ng-template>`, re-instantiated
-// into whichever branch is active via a local template-outlet directive (SymbioteTemplateOutletDirective
-// below, `@angular/common`-free per this adapter's dependency policy — see package.json). Only one
-// branch is ever live at a time, and the `<ng-content>` DECLARATION COUNT stays at one, so the "last
-// one wins" limitation never triggers. Covered by `android-scroll-view-axis-projection.test.ts` (all
-// four axis x refresh combos, plus a runtime axis switch) and `flat-list-scroll-containment.test.ts`.
+// Android needs a different Fabric view per axis for both the outer scroll container
+// (RCTScrollView is vertical-only; AndroidHorizontalScrollView is a dedicated ViewManager) and the
+// inner content view (horizontal content is AndroidHorizontalScrollContentView, with its own
+// ShadowNode::layout() override) — but Angular only reliably projects into a component's
+// LAST-declared <ng-content> when 2+ DISTINCT declarations exist (angular/angular#22972), which an
+// earlier 4-call-site template (one <ng-content> per axis x refresh-control branch) tripped. Fix:
+// exactly ONE `<ng-content>` textually, inside a single top-level `<ng-template>`, re-instantiated
+// into whichever branch is active via a local template-outlet directive
+// (SymbioteTemplateOutletDirective below, `@angular/common`-free per this adapter's dependency
+// policy — see package.json). Only one branch is ever live, so the declaration count stays at one
+// and the "last one wins" limitation never triggers. Covered by
+// `android-scroll-view-axis-projection.test.ts` and `flat-list-scroll-containment.test.ts`.
 //
 // Metro picks this on an Android host; no Platform.OS read.
 
@@ -26,7 +25,6 @@ import {
   ChangeDetectionStrategy,
   Component,
   Directive,
-  ElementRef,
   Input,
   TemplateRef,
   ViewContainerRef,
@@ -37,15 +35,19 @@ import {
 } from '@angular/core';
 import type { IStyleProp, IViewStyle } from '@symbiote-native/engine';
 import {
-  anchorHostStyle,
-  HorizontalScrollView,
   HorizontalScrollContentView,
+  HorizontalScrollView,
   RefreshControlHost,
   ScrollContentView,
   ScrollViewHost,
   SymbioteHostPropsDirective,
+  SymbioteStyleInputDirective,
 } from '../../primitives';
-import { ScrollViewBase, ScrollViewProjectionDirective, SCROLL_VIEW_INPUTS } from './shared';
+import {
+  ScrollViewBase,
+  ScrollViewProjectionDirective,
+  SCROLL_VIEW_INPUTS,
+} from './shared';
 export type { IAngularScrollViewProps, IScrollViewHandle } from './shared';
 
 // Minimal local twin of `@angular/common`'s NgTemplateOutlet (this adapter deliberately has no
@@ -68,7 +70,9 @@ export class SymbioteTemplateOutletDirective implements OnChanges, OnDestroy {
       this.viewRef = undefined;
     }
     if (this.symbioteTemplateOutlet !== null) {
-      this.viewRef = this.viewContainerRef.createEmbeddedView(this.symbioteTemplateOutlet);
+      this.viewRef = this.viewContainerRef.createEmbeddedView(
+        this.symbioteTemplateOutlet,
+      );
     }
   }
 
@@ -89,6 +93,9 @@ function asStyle(value: unknown): IStyleProp<IViewStyle> | undefined {
 @Component({
   selector: 'ScrollView',
   standalone: true,
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [
     ScrollViewHost,
@@ -115,23 +122,30 @@ function asStyle(value: unknown): IStyleProp<IViewStyle> | undefined {
         >
           <symbiote-horizontal-scroll-view
             #host="symbioteHost"
-            [symbioteHostProps]="androidWrappedScrollProps"
+            [symbioteHostProps]="androidWrappedScrollProps()"
           >
             <symbiote-horizontal-scroll-content
-              [symbioteHostProps]="contentProps"
+              [symbioteHostProps]="contentProps()"
               [symbioteScrollViewProjection]="projectionController"
             >
-              <ng-container [symbioteTemplateOutlet]="sharedContent"></ng-container>
+              <ng-container
+                [symbioteTemplateOutlet]="sharedContent"
+              ></ng-container>
             </symbiote-horizontal-scroll-content>
           </symbiote-horizontal-scroll-view>
         </symbiote-refresh-control>
       } @else {
-        <symbiote-horizontal-scroll-view #host="symbioteHost" [symbioteHostProps]="scrollProps">
+        <symbiote-horizontal-scroll-view
+          #host="symbioteHost"
+          [symbioteHostProps]="scrollProps()"
+        >
           <symbiote-horizontal-scroll-content
-            [symbioteHostProps]="contentProps"
+            [symbioteHostProps]="contentProps()"
             [symbioteScrollViewProjection]="projectionController"
           >
-            <ng-container [symbioteTemplateOutlet]="sharedContent"></ng-container>
+            <ng-container
+              [symbioteTemplateOutlet]="sharedContent"
+            ></ng-container>
           </symbiote-horizontal-scroll-content>
         </symbiote-horizontal-scroll-view>
       }
@@ -144,23 +158,30 @@ function asStyle(value: unknown): IStyleProp<IViewStyle> | undefined {
         >
           <symbiote-scroll-view
             #host="symbioteHost"
-            [symbioteHostProps]="androidWrappedScrollProps"
+            [symbioteHostProps]="androidWrappedScrollProps()"
           >
             <symbiote-scroll-content
-              [symbioteHostProps]="contentProps"
+              [symbioteHostProps]="contentProps()"
               [symbioteScrollViewProjection]="projectionController"
             >
-              <ng-container [symbioteTemplateOutlet]="sharedContent"></ng-container>
+              <ng-container
+                [symbioteTemplateOutlet]="sharedContent"
+              ></ng-container>
             </symbiote-scroll-content>
           </symbiote-scroll-view>
         </symbiote-refresh-control>
       } @else {
-        <symbiote-scroll-view #host="symbioteHost" [symbioteHostProps]="scrollProps">
+        <symbiote-scroll-view
+          #host="symbioteHost"
+          [symbioteHostProps]="scrollProps()"
+        >
           <symbiote-scroll-content
-            [symbioteHostProps]="contentProps"
+            [symbioteHostProps]="contentProps()"
             [symbioteScrollViewProjection]="projectionController"
           >
-            <ng-container [symbioteTemplateOutlet]="sharedContent"></ng-container>
+            <ng-container
+              [symbioteTemplateOutlet]="sharedContent"
+            ></ng-container>
           </symbiote-scroll-content>
         </symbiote-scroll-view>
       }
@@ -168,23 +189,17 @@ function asStyle(value: unknown): IStyleProp<IViewStyle> | undefined {
   `,
 })
 export class ScrollView extends ScrollViewBase {
-  // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
-  // onto (see anchorHostStyle's doc comment) — NOT `#host` in the template above, which targets
-  // the real inner `symbiote-scroll-view`/`symbiote-horizontal-scroll-view` one level down.
-  private readonly elementRef = inject(ElementRef);
-
-  override get scrollProps(): Record<string, unknown> {
-    const props = super.scrollProps;
-    return { ...props, style: [anchorHostStyle(this.elementRef), props.style] };
-  }
-
   // Feeds the anchor's class-derived style INTO the base class's own `splitLayoutProps` call
   // (shared.ts's `androidWrappedScrollProps`/`androidRefreshControlProps`), not tacked on after —
   // a class-only layout style (flex/height/gap/…) must be visible to the split itself, or the
   // Android outer refresh-control wrapper never receives its share and collapses to zero size
   // (a real device bug: the whole ScrollView renders nothing). See layoutSplitStyle's doc comment
   // in shared.ts and the identical fix already shipped in the Vue adapter's scroll-view.
+  //
+  // Reads the base's `anchorStyle` SIGNAL rather than calling anchorHostStyle() directly: this
+  // getter is evaluated inside the `androidWrappedScrollProps` computed, where a plain read would
+  // be untracked and leave the memoized bag holding a stale class.
   protected override get layoutSplitStyle(): IStyleProp<IViewStyle> {
-    return [asStyle(anchorHostStyle(this.elementRef)), this.style];
+    return [asStyle(this.anchorStyle()), this.style];
   }
 }

package/src/components/scroll-view/index.ios.ts

@@ -20,17 +20,19 @@ import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   Component,
-  ElementRef,
-  inject,
 } from '@angular/core';
 import {
-  anchorHostStyle,
   RefreshControlHost,
   ScrollContentView,
   ScrollViewHost,
   SymbioteHostPropsDirective,
+  SymbioteStyleInputDirective,
 } from '../../primitives';
-import { ScrollViewBase, ScrollViewProjectionDirective, SCROLL_VIEW_INPUTS } from './shared';
+import {
+  ScrollViewBase,
+  ScrollViewProjectionDirective,
+  SCROLL_VIEW_INPUTS,
+} from './shared';
 export type { IAngularScrollViewProps, IScrollViewHandle } from './shared';
 
 // The symbiote-* host elements are imported as standalone components; the props directive is
@@ -38,6 +40,9 @@ export type { IAngularScrollViewProps, IScrollViewHandle } from './shared';
 @Component({
   selector: 'ScrollView',
   standalone: true,
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [
     ScrollViewHost,
@@ -49,7 +54,10 @@ export type { IAngularScrollViewProps, IScrollViewHandle } from './shared';
   changeDetection: ChangeDetectionStrategy.OnPush,
   inputs: SCROLL_VIEW_INPUTS,
   template: `
-    <symbiote-scroll-view #host="symbioteHost" [symbioteHostProps]="scrollProps">
+    <symbiote-scroll-view
+      #host="symbioteHost"
+      [symbioteHostProps]="scrollProps()"
+    >
       @if (hasProjectedRefreshControl) {
         <symbiote-refresh-control
           #refreshHost="symbioteHost"
@@ -58,7 +66,7 @@ export type { IAngularScrollViewProps, IScrollViewHandle } from './shared';
         ></symbiote-refresh-control>
       }
       <symbiote-scroll-content
-        [symbioteHostProps]="contentProps"
+        [symbioteHostProps]="contentProps()"
         [symbioteScrollViewProjection]="projectionController"
       >
         <ng-content></ng-content>
@@ -66,14 +74,8 @@ export type { IAngularScrollViewProps, IScrollViewHandle } from './shared';
     </symbiote-scroll-view>
   `,
 })
-export class ScrollView extends ScrollViewBase {
-  // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
-  // onto (see anchorHostStyle's doc comment) — NOT `#host` in the template above, which targets
-  // the real inner `symbiote-scroll-view` one level down.
-  private readonly elementRef = inject(ElementRef);
-
-  override get scrollProps(): Record<string, unknown> {
-    const props = super.scrollProps;
-    return { ...props, style: [anchorHostStyle(this.elementRef), props.style] };
-  }
-}
+// Behavior lives entirely in ScrollViewBase; this class exists for the decorator + iOS template.
+// The anchor-style merge that used to be a `scrollProps` override here moved into the base's
+// `scrollProps` computed - a subclass getter cannot override a field, and both platforms merged it
+// identically anyway (see that computed's comment).
+export class ScrollView extends ScrollViewBase {}