@symbiote-native/angular 0.6.1 → 0.7.0

package/src/components/modal/index.ts

@@ -13,11 +13,14 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  computed,
   ElementRef,
   EventEmitter,
   inject,
   Input,
   Output,
+  signal,
+  type DoCheck,
   type OnChanges,
   type OnInit,
   type SimpleChanges,
@@ -33,7 +36,6 @@ import {
   type IAriaProps,
   type IModalAnimationType,
   type IModalOrientation,
-  type IModalOrientationChangeEvent,
   type IModalPresentationStyle,
   type IModalState,
 } from '@symbiote-native/components';
@@ -44,7 +46,13 @@ import {
   type ISymbioteEvent,
   type IViewStyle,
 } from '@symbiote-native/engine';
-import { anchorHostStyle, ModalHost, SymbioteHostPropsDirective, ViewHost } from '../../primitives';
+import {
+  anchorHostStyle,
+  ModalHost,
+  SymbioteHostPropsDirective,
+  SymbioteStyleInputDirective,
+  ViewHost,
+} from '../../primitives';
 
 export type {
   IModalAnimationType,
@@ -53,17 +61,6 @@ export type {
   IModalOrientationChangeEvent,
 } from '@symbiote-native/components';
 
-const ORIENTATIONS: ReadonlyArray<IModalOrientation> = ['portrait', 'landscape'];
-
-function readOrientation(event: ISymbioteEvent): IModalOrientationChangeEvent | undefined {
-  const native = event.nativeEvent;
-  if (typeof native !== 'object' || native === null || !('orientation' in native)) return undefined;
-  const orientation = native.orientation;
-  return ORIENTATIONS.some(value => value === orientation)
-    ? { orientation: orientation === 'landscape' ? 'landscape' : 'portrait' }
-    : undefined;
-}
-
 // Mirrors React's IModalProps minus children (Angular takes children via <ng-content>).
 export interface IAngularModalProps extends IAccessibilityProps, IAriaProps {
   visible?: boolean;
@@ -79,7 +76,9 @@ export interface IAngularModalProps extends IAccessibilityProps, IAriaProps {
   onShow?: () => void;
   onDismiss?: () => void;
   onRequestClose?: () => void;
-  onOrientationChange?: (event: IModalOrientationChangeEvent) => void;
+  // The engine hands every listener the ISymbioteEvent wrapper, so the orientation is read at
+  // event.nativeEvent.orientation (IModalOrientationChangeEvent describes that payload).
+  onOrientationChange?: (event: ISymbioteEvent) => void;
   style?: IStyleProp<IViewStyle>;
 }
 
@@ -102,17 +101,18 @@ export type IAngularModalInputs = Omit<
 @Component({
   selector: 'Modal',
   standalone: true,
+  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [ModalHost, ViewHost, SymbioteHostPropsDirective],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     @if (shouldRender) {
       <symbiote-modal
-        [symbioteHostProps]="hostProps"
+        [symbioteHostProps]="hostProps()"
         (show)="show.emit()"
         (dismiss)="dismiss.emit()"
         (requestClose)="requestClose.emit()"
-        (orientationChange)="emitOrientation($event)"
+        (orientationChange)="emit(orientationChange, $event)"
         (accessibilityAction)="emit(accessibilityAction, $event)"
         (accessibilityTap)="emit(accessibilityTap, $event)"
         (magicTap)="emit(magicTap, $event)"
@@ -125,11 +125,11 @@ export type IAngularModalInputs = Omit<
     }
   `,
 })
-export class Modal implements IAngularModalInputs, OnInit, OnChanges {
+export class Modal implements IAngularModalInputs, OnInit, OnChanges, DoCheck {
   @Output() readonly show = new EventEmitter<void>();
   @Output() readonly dismiss = new EventEmitter<void>();
   @Output() readonly requestClose = new EventEmitter<void>();
-  @Output() readonly orientationChange = new EventEmitter<IModalOrientationChangeEvent>();
+  @Output() readonly orientationChange = new EventEmitter<ISymbioteEvent>();
   @Output() readonly accessibilityAction = new EventEmitter<ISymbioteEvent>();
   @Output() readonly accessibilityTap = new EventEmitter<ISymbioteEvent>();
   @Output() readonly magicTap = new EventEmitter<ISymbioteEvent>();
@@ -195,7 +195,20 @@ export class Modal implements IAngularModalInputs, OnInit, OnChanges {
     this.state = createInitialModalState(this.visible === true);
   }
 
+  // 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.
+  // The keep-alive `state` is deliberately NOT a dependency: it gates `shouldRender`, never the bag.
+  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(changes: SimpleChanges): void {
+    // Before the keep-alive early-return below: this is the single moment Angular has finished
+    // writing every changed @Input, and `hostProps` depends on far more than `visible`.
+    this.hostPropsRevision.update(revision => revision + 1);
     const visibleChange = changes.visible;
     // First change is reflected by the ngOnInit seed; only later toggles drive the keep-alive.
     if (visibleChange === undefined || visibleChange.firstChange) return;
@@ -233,13 +246,31 @@ export class Modal implements IAngularModalInputs, OnInit, OnChanges {
     });
   }
 
+  // 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);
+  }
+
   // renderModal's own MODAL_HOST_STYLE (position:'absolute') is the outer symbiote-modal node's
   // style; the anchor's class-derived style goes FIRST, that resolved style SECOND —
   // flattenStyle's later-wins collapse keeps the modal's own 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 - and this one
+  // re-runs renderModal to build it.
+  readonly hostProps = computed<Record<string, unknown>>(() => {
+    this.hostPropsRevision();
     const descriptorProps = this.descriptor.props;
     return { ...descriptorProps, style: [anchorHostStyle(this.elementRef), descriptorProps.style] };
-  }
+  });
 
   get containerStyle(): unknown {
     const container = this.descriptor.children[0];
@@ -250,12 +281,6 @@ export class Modal implements IAngularModalInputs, OnInit, OnChanges {
     if (isSymbioteEvent(event)) emitter.emit(event);
   }
 
-  emitOrientation(event: unknown): void {
-    if (!isSymbioteEvent(event)) return;
-    const change = readOrientation(event);
-    if (change !== undefined) this.orientationChange.emit(change);
-  }
-
   // Typed as the a11y intersection WITH the string index (the bag renderModal spreads into the
   // host props), so resolveAccessibilityProps's result stays assignable to passthrough.
   private accessibilityInputs(): IAccessibilityProps & IAriaProps & Record<string, unknown> {

package/src/components/pressable/index.ts

@@ -5,10 +5,14 @@ import {
   Component,
   ElementRef,
   EventEmitter,
+  computed,
   inject,
   Input,
   Output,
+  signal,
   ViewChild,
+  type DoCheck,
+  type OnChanges,
 } from '@angular/core';
 import {
   createPressHandlers,
@@ -40,7 +44,12 @@ import {
   type IStyleProp,
   type IViewStyle,
 } from '@symbiote-native/engine';
-import { anchorHostStyle, SymbioteHostPropsDirective, ViewHost } from '../../primitives';
+import {
+  anchorHostStyle,
+  SymbioteHostPropsDirective,
+  SymbioteStyleInputDirective,
+  ViewHost,
+} from '../../primitives';
 
 export type { IPressState, IPressableAndroidRippleConfig } from '@symbiote-native/components';
 
@@ -109,12 +118,13 @@ function asSymbioteEvent(event: unknown): ISymbioteEvent | undefined {
 @Component({
   selector: 'Pressable, symbiote-pressable',
   standalone: true,
+  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [ViewHost, SymbioteHostPropsDirective],
   template: `
     <symbiote-view
       #host
-      [symbioteHostProps]="hostProps"
+      [symbioteHostProps]="hostProps()"
       (accessibilityAction)="emit(accessibilityAction, $event)"
       (accessibilityTap)="emit(accessibilityTap, $event)"
       (magicTap)="emit(magicTap, $event)"
@@ -131,7 +141,7 @@ function asSymbioteEvent(event: unknown): ISymbioteEvent | undefined {
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class Pressable implements IAngularPressableInputs {
+export class Pressable implements IAngularPressableInputs, OnChanges, DoCheck {
   // The press/hover lifecycle as real Angular events: `(press)="onTap($event)"`, not
   // `[onPress]="onTap"`. createPressHandlers still wants plain IPressHandler callbacks, so
   // emitterHandler() below adapts each EventEmitter into one - only while something is actually
@@ -207,11 +217,20 @@ export class Pressable implements IAngularPressableInputs {
 
   @ViewChild('host', { read: ElementRef }) private hostElement?: ElementRef<unknown>;
 
-  pressed = false;
+  // INTERNAL mutable state, driven by the press machine rather than by an @Input, so ngOnChanges
+  // can never cover it - it carries its OWN signal, which is what lets the memoized bag below stay
+  // correct across a press. Exposed as a plain boolean getter so a use site's `#ref.pressed` keeps
+  // reading a boolean and the public surface is unchanged.
+  private readonly pressedState = signal(false);
+
+  get pressed(): boolean {
+    return this.pressedState();
+  }
+
   private readonly runtime: IPressRuntime = createPressRuntime();
   private readonly host: IPressHost = {
     setPressed: pressed => {
-      this.pressed = pressed;
+      this.pressedState.set(pressed);
       this.changeDetector.detectChanges();
     },
     getMeasureFn: () => {
@@ -231,6 +250,39 @@ export class Pressable implements IAngularPressableInputs {
   // inner `symbiote-view` one level down.
   private readonly elementRef = inject(ElementRef);
 
+  // Bridges the non-reactive @Input fields above into the reactive graph, so the computed() bag
+  // below can memoize a value derived from them. Signal inputs would make this unnecessary, 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. Mirrors ScrollView's identical bridge
+  // (components/scroll-view/shared.ts), including its constraint: ONLY safe for a bag whose every
+  // dependency is an @Input or carries its own signal, never for plain internal mutable state.
+  private readonly inputsRevision = signal(0);
+
+  // The anchor's class-derived style is the one hostProps dependency that is NOT an @Input:
+  // `class="..."`/`[class.x]`/`[ngClass]` at the use site resolves through the renderer's
+  // addClass/removeClass onto the anchor node (anchorHostStyle's doc comment), so it never appears
+  // in SimpleChanges and ngOnChanges cannot cover it. The engine's commitClassStyle allocates a
+  // fresh [classStyle, explicitStyle] array on exactly the passes where a class token actually
+  // moved, so signal.set's own Object.is check makes an unchanged poll a no-op that dirties nothing.
+  private readonly anchorStyle = signal<unknown>(undefined);
+
+  // ngDoCheck is the only hook that observes the anchor AFTER the parent wrote it. Angular flushes
+  // a node's pre-order hooks at the next `advance` PAST it (hooks.ts callHooks runs "until that
+  // node index exclusive") or in refreshView's post-template flush - both strictly after the
+  // parent's classProp on this element, and strictly before this component's own view refreshes.
+  // Angular also nulls the active consumer around lifecycle hooks (render3/hooks.ts), so this
+  // write registers no dependency on the caller's view and cannot throw NG0600.
+  ngDoCheck(): void {
+    this.anchorStyle.set(anchorHostStyle(this.elementRef));
+  }
+
+  ngOnChanges(): void {
+    // Tells the computed bag below that an @Input moved - plain class fields are not reactive on
+    // their own. Must stay in ngOnChanges: that is the single moment Angular has finished writing
+    // every changed input for this pass.
+    this.inputsRevision.update(revision => revision + 1);
+  }
+
   get resolvedStyle(): IStyleProp<IViewStyle> | undefined {
     const state: IPressState = { pressed: this.pressed };
     return isStyleFn(this.style) ? this.style(state) : this.style;
@@ -279,7 +331,14 @@ export class Pressable implements IAngularPressableInputs {
   }
 
   // Flat bag for `[symbioteHostProps]` (Renderer2.setProperty per key) - see primitives/shared.ts.
-  get hostProps(): Record<string, unknown> {
+  //
+  // MEASURED 2026-08-16: as a getter this rebuilt the bag on every refresh of this view, and a
+  // press dirties this very view (SymbioteHostPropsDirective wraps each flat-bag onX with
+  // markForCheck, and setPressed calls detectChanges outright), so `[symbioteHostProps]`'s
+  // reference check failed every time and re-pushed every key through Renderer2.setProperty ->
+  // routeProp for an identical bag. Memoized, an unchanged bag costs one reference compare.
+  readonly hostProps = computed<Record<string, unknown>>(() => {
+    this.inputsRevision();
     return {
       testID: this.testID,
       nativeID: this.nativeID,
@@ -289,14 +348,14 @@ export class Pressable implements IAngularPressableInputs {
       nextFocusLeft: this.nextFocusLeft,
       nextFocusRight: this.nextFocusRight,
       nextFocusUp: this.nextFocusUp,
-      style: [anchorHostStyle(this.elementRef), this.resolvedStyle],
+      style: [this.anchorStyle(), this.resolvedStyle],
       accessible: this.accessible,
       ...this.foldedAccessibility,
       android_disableSound: this.android_disableSound,
       nativeBackgroundAndroid: this.resolvedRippleProps?.nativeBackgroundAndroid,
       nativeForegroundAndroid: this.resolvedRippleProps?.nativeForegroundAndroid,
     };
-  }
+  });
 
   handlePressIn(event: unknown): void {
     const symbioteEvent = asSymbioteEvent(event);

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.
@@ -89,13 +97,14 @@ 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 +116,7 @@ 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;
@@ -175,6 +184,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,6 +209,9 @@ 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) {
@@ -220,11 +244,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 +283,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.

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,7 +32,12 @@ 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
@@ -53,12 +62,13 @@ 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 +79,7 @@ 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
@@ -127,6 +137,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 +173,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,
@@ -173,5 +218,5 @@ export class SafeAreaView implements IAngularSafeAreaViewInputs {
       'aria-valuenow': this.ariaValueNow,
       'aria-valuetext': this.ariaValueText,
     });
-  }
+  });
 }