@symbiote-native/angular 0.6.2 → 0.8.0

package/src/components/image/shared.ts

@@ -1,4 +1,4 @@
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, computed, signal } from '@angular/core';
 import {
   imageStatics,
   renderImage,
@@ -150,15 +150,21 @@ function asNumber(value: unknown): number | undefined {
   return typeof value === 'number' ? value : undefined;
 }
 
-function asCrossOrigin(value: unknown): 'anonymous' | 'use-credentials' | undefined {
-  return value === 'anonymous' || value === 'use-credentials' ? value : undefined;
+function asCrossOrigin(
+  value: unknown,
+): 'anonymous' | 'use-credentials' | undefined {
+  return value === 'anonymous' || value === 'use-credentials'
+    ? value
+    : undefined;
 }
 
 function asStyle(value: unknown): IStyleProp<IViewStyle> | undefined {
   return typeof value === 'object' && value !== null ? value : undefined;
 }
 
-export function resolveImageProps(input: Record<string, unknown>): Record<string, unknown> {
+export function resolveImageProps(
+  input: Record<string, unknown>,
+): Record<string, unknown> {
   const passthrough: IImagePassthroughProps = {
     resizeMethod: input['resizeMethod'] as IImageProps['resizeMethod'],
     blurRadius: asNumber(input['blurRadius']),
@@ -170,12 +176,21 @@ export function resolveImageProps(input: Record<string, unknown>): Record<string
         : undefined,
     testID: asString(input['testID']),
     nativeID: asString(input['nativeID']),
-    accessible: typeof input['accessible'] === 'boolean' ? input['accessible'] : undefined,
+    accessible:
+      typeof input['accessible'] === 'boolean'
+        ? input['accessible']
+        : undefined,
     accessibilityLabel: asString(input['accessibilityLabel']),
     accessibilityHint: asString(input['accessibilityHint']),
-    accessibilityRole: input['accessibilityRole'] as IAccessibilityProps['accessibilityRole'],
-    accessibilityState: input['accessibilityState'] as IAccessibilityProps['accessibilityState'],
-    accessibilityValue: input['accessibilityValue'] as IAccessibilityProps['accessibilityValue'],
+    accessibilityRole: input[
+      'accessibilityRole'
+    ] as IAccessibilityProps['accessibilityRole'],
+    accessibilityState: input[
+      'accessibilityState'
+    ] as IAccessibilityProps['accessibilityState'],
+    accessibilityValue: input[
+      'accessibilityValue'
+    ] as IAccessibilityProps['accessibilityValue'],
     accessibilityActions: input[
       'accessibilityActions'
     ] as IAccessibilityProps['accessibilityActions'],
@@ -213,26 +228,48 @@ export function resolveImageProps(input: Record<string, unknown>): Record<string
       typeof input['accessibilityShowsLargeContentViewer'] === 'boolean'
         ? input['accessibilityShowsLargeContentViewer']
         : undefined,
-    accessibilityLargeContentTitle: asString(input['accessibilityLargeContentTitle']),
+    accessibilityLargeContentTitle: asString(
+      input['accessibilityLargeContentTitle'],
+    ),
     role: input['role'] as IAriaProps['role'],
     'aria-label': asString(input['ariaLabel'] ?? input['aria-label']),
-    'aria-labelledby': asString(input['ariaLabelledBy'] ?? input['aria-labelledby']),
+    'aria-labelledby': asString(
+      input['ariaLabelledBy'] ?? input['aria-labelledby'],
+    ),
     'aria-live': input['ariaLive'] as IAriaProps['aria-live'],
-    'aria-hidden': typeof input['ariaHidden'] === 'boolean' ? input['ariaHidden'] : undefined,
-    'aria-busy': typeof input['ariaBusy'] === 'boolean' ? input['ariaBusy'] : undefined,
+    'aria-hidden':
+      typeof input['ariaHidden'] === 'boolean'
+        ? input['ariaHidden']
+        : undefined,
+    'aria-busy':
+      typeof input['ariaBusy'] === 'boolean' ? input['ariaBusy'] : undefined,
     'aria-checked': input['ariaChecked'] as IAriaProps['aria-checked'],
-    'aria-disabled': typeof input['ariaDisabled'] === 'boolean' ? input['ariaDisabled'] : undefined,
-    'aria-expanded': typeof input['ariaExpanded'] === 'boolean' ? input['ariaExpanded'] : undefined,
-    'aria-selected': typeof input['ariaSelected'] === 'boolean' ? input['ariaSelected'] : undefined,
-    'aria-modal': typeof input['ariaModal'] === 'boolean' ? input['ariaModal'] : undefined,
+    'aria-disabled':
+      typeof input['ariaDisabled'] === 'boolean'
+        ? input['ariaDisabled']
+        : undefined,
+    'aria-expanded':
+      typeof input['ariaExpanded'] === 'boolean'
+        ? input['ariaExpanded']
+        : undefined,
+    'aria-selected':
+      typeof input['ariaSelected'] === 'boolean'
+        ? input['ariaSelected']
+        : undefined,
+    'aria-modal':
+      typeof input['ariaModal'] === 'boolean' ? input['ariaModal'] : undefined,
     'aria-valuemax': asNumber(input['ariaValueMax']),
     'aria-valuemin': asNumber(input['ariaValueMin']),
     'aria-valuenow': asNumber(input['ariaValueNow']),
     'aria-valuetext': asString(input['ariaValueText']),
-    onAccessibilityAction: input['onAccessibilityAction'] as IImageProps['onLoad'],
+    onAccessibilityAction: input[
+      'onAccessibilityAction'
+    ] as IImageProps['onLoad'],
     onAccessibilityTap: input['onAccessibilityTap'] as IImageProps['onLoad'],
     onMagicTap: input['onMagicTap'] as IImageProps['onLoad'],
-    onAccessibilityEscape: input['onAccessibilityEscape'] as IImageProps['onLoad'],
+    onAccessibilityEscape: input[
+      'onAccessibilityEscape'
+    ] as IImageProps['onLoad'],
     onLoadStart: input['onLoadStart'] as IImageProps['onLoadStart'],
     onLoad: input['onLoad'] as IImageProps['onLoad'],
     onLoadEnd: input['onLoadEnd'] as IImageProps['onLoadEnd'],
@@ -442,8 +479,10 @@ export abstract class ImageBase {
       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,
       ariaLabel: this.ariaLabel,
@@ -473,7 +512,39 @@ export abstract class ImageBase {
     };
   }
 
-  get imageProps(): Record<string, unknown> {
+  // Bridges the non-reactive @Input fields into the reactive graph so imageProps below can be a
+  // memoized computed(). 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. `signal()`/`computed()` are plain runtime APIs
+  // and need no compiler support, which is what makes this bridge possible at all.
+  //
+  // ImageBase is deliberately UNdecorated, so the ngOnChanges that bumps this lives on each
+  // platform @Component instead of here.
+  //
+  // Every dependency of the bag below is an @Input, which Angular always routes through
+  // ngOnChanges. State assigned OUTSIDE that path needs its OWN signal - never widen this one to
+  // "bump on everything", which silently un-memoizes the bag. The platform anchor style is exactly
+  // such a dependency and carries its own signal.
+  protected readonly inputsRevision = signal(0);
+
+  protected bumpInputsRevision(): void {
+    this.inputsRevision.update(revision => revision + 1);
+  }
+
+  // MEASURED 2026-08-16: as a getter this rebuilt the bag on every refresh of this view, so
+  // `[symbioteHostProps]`'s reference check failed every time and every key was re-pushed through
+  // Renderer2 -> routeProp - pure waste when nothing changed. computed() returns the SAME object
+  // until a tracked dependency actually changes, and the input setter then skips the whole spread.
+  //
+  // A computed FIELD cannot be overridden by a subclass accessor the way a getter can, so the
+  // platform components override buildImageProps() below and this stays the single memoization
+  // point for every platform.
+  readonly imageProps = computed<Record<string, unknown>>(() => {
+    this.inputsRevision();
+    return this.buildImageProps();
+  });
+
+  protected buildImageProps(): Record<string, unknown> {
     return resolveImageProps(this.imageInputProps);
   }
 }

package/src/components/image-background.ts

@@ -37,12 +37,19 @@ import {
   type IViewStyle,
 } from '@symbiote-native/engine';
 import { Image } from './image';
-import { anchorHostStyle, ViewHost } from '../primitives';
+import {
+  anchorHostStyle,
+  SymbioteStyleInputDirective,
+  ViewHost,
+} from '../primitives';
 
 // Mirrors React's IImageBackgroundProps minus children (Angular takes children via <ng-content>):
 // every forwarding Image prop flows onto the inner image; `style` is the WRAPPER View style and
 // `imageStyle` the inner image's.
-export interface IAngularImageBackgroundProps extends Omit<IImageProps, 'style'> {
+export interface IAngularImageBackgroundProps extends Omit<
+  IImageProps,
+  'style'
+> {
   style?: IStyleProp<IViewStyle>;
   // A bare string resolves through the shared style registry, like `class` on the wrapper.
   imageStyle?: IStyleProp<IViewStyle> | string;
@@ -68,6 +75,9 @@ export type IAngularImageBackgroundInputs = Omit<
 @Component({
   selector: 'ImageBackground',
   standalone: true,
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [Image, ViewHost],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -107,10 +117,16 @@ export type IAngularImageBackgroundInputs = Omit<
         [screenReaderFocusable]="folded.screenReaderFocusable"
         [accessibilityViewIsModal]="folded.accessibilityViewIsModal"
         [accessibilityElementsHidden]="folded.accessibilityElementsHidden"
-        [accessibilityIgnoresInvertColors]="folded.accessibilityIgnoresInvertColors"
+        [accessibilityIgnoresInvertColors]="
+          folded.accessibilityIgnoresInvertColors
+        "
         [accessibilityLanguage]="folded.accessibilityLanguage"
-        [accessibilityRespondsToUserInteraction]="folded.accessibilityRespondsToUserInteraction"
-        [accessibilityShowsLargeContentViewer]="folded.accessibilityShowsLargeContentViewer"
+        [accessibilityRespondsToUserInteraction]="
+          folded.accessibilityRespondsToUserInteraction
+        "
+        [accessibilityShowsLargeContentViewer]="
+          folded.accessibilityShowsLargeContentViewer
+        "
         [accessibilityLargeContentTitle]="folded.accessibilityLargeContentTitle"
         (loadStart)="loadStart.emit($event)"
         (load)="load.emit($event)"
@@ -169,8 +185,10 @@ export class ImageBackground implements IAngularImageBackgroundInputs {
   @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;
@@ -247,8 +265,10 @@ export class ImageBackground implements IAngularImageBackgroundInputs {
       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/input-accessory-view/index.ts

@@ -11,11 +11,15 @@ import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   Component,
+  computed,
   ElementRef,
   EventEmitter,
   inject,
   Input,
   Output,
+  signal,
+  type DoCheck,
+  type OnChanges,
 } from '@angular/core';
 import {
   renderInputAccessoryView,
@@ -34,11 +38,13 @@ import {
   anchorHostStyle,
   InputAccessoryViewHost,
   SymbioteHostPropsDirective,
+  SymbioteStyleInputDirective,
 } from '../../primitives';
 
 // Mirrors React's IInputAccessoryViewProps minus children (Angular takes children via
 // <ng-content>), declared per-adapter over the shared a11y base.
-export interface IAngularInputAccessoryViewProps extends IAccessibilityProps, IAriaProps {
+export interface IAngularInputAccessoryViewProps
+  extends IAccessibilityProps, IAriaProps {
   // The id a TextInput's inputAccessoryViewID points at to dock above its keyboard.
   nativeID?: string;
   backgroundColor?: string;
@@ -50,18 +56,24 @@ export interface IAngularInputAccessoryViewProps extends IAccessibilityProps, IA
 // mirroring Pressable's IAngularPressableInputs split.
 export type IAngularInputAccessoryViewInputs = Omit<
   IAngularInputAccessoryViewProps,
-  'onAccessibilityAction' | 'onAccessibilityTap' | 'onMagicTap' | 'onAccessibilityEscape'
+  | 'onAccessibilityAction'
+  | 'onAccessibilityTap'
+  | 'onMagicTap'
+  | 'onAccessibilityEscape'
 >;
 
 @Component({
   selector: 'InputAccessoryView',
   standalone: true,
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [InputAccessoryViewHost, SymbioteHostPropsDirective],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <symbiote-input-accessory-view
-      [symbioteHostProps]="hostProps"
+      [symbioteHostProps]="hostProps()"
       (accessibilityAction)="emit(accessibilityAction, $event)"
       (accessibilityTap)="emit(accessibilityTap, $event)"
       (magicTap)="emit(magicTap, $event)"
@@ -71,7 +83,9 @@ export type IAngularInputAccessoryViewInputs = Omit<
     </symbiote-input-accessory-view>
   `,
 })
-export class InputAccessoryView implements IAngularInputAccessoryViewInputs {
+export class InputAccessoryView
+  implements IAngularInputAccessoryViewInputs, OnChanges, DoCheck
+{
   @Input() nativeID?: string;
   @Input() backgroundColor?: string;
   @Input() style?: IStyleProp<IViewStyle>;
@@ -88,8 +102,10 @@ export class InputAccessoryView implements IAngularInputAccessoryViewInputs {
   @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;
@@ -135,16 +151,53 @@ export class InputAccessoryView implements IAngularInputAccessoryViewInputs {
     });
   }
 
+  // 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.
+  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 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 anchor's class-derived style goes FIRST, the Descriptor's resolved style 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 - and this one
+  // re-runs renderInputAccessoryView to build it.
+  readonly hostProps = computed<Record<string, unknown>>(() => {
+    this.hostPropsRevision();
     const descriptorProps = this.descriptor.props;
-    return { ...descriptorProps, style: [anchorHostStyle(this.elementRef), descriptorProps.style] };
-  }
+    return {
+      ...descriptorProps,
+      style: [anchorHostStyle(this.elementRef), descriptorProps.style],
+    };
+  });
 
   // Typed as the a11y intersection WITH the string index (the bag renderInputAccessoryView spreads
   // into the host props), so resolveAccessibilityProps's result stays assignable to passthrough.
-  private accessibilityInputs(): IAccessibilityProps & IAriaProps & Record<string, unknown> {
+  private accessibilityInputs(): IAccessibilityProps &
+    IAriaProps &
+    Record<string, unknown> {
     return {
       testID: this.testID,
       accessible: this.accessible,
@@ -162,8 +215,10 @@ export class InputAccessoryView implements IAngularInputAccessoryViewInputs {
       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/keyboard-avoiding-view/index.ts

@@ -2,7 +2,7 @@
 // keyboard's way as it shows/hides. The inset math + the behavior → style/structure decision
 // live framework-agnostic in @symbiote-native/components (render-keyboard-avoiding-view), shared verbatim
 // with React/Vue; Angular supplies only the lifecycle: a plain inset field, ngOnInit subscribes to
-// the core Keyboard module (show / changeFrame / hide) and markForCheck pulls the OnPush view (the
+// the core Keyboard module (the host's show / hide pair) and markForCheck pulls the OnPush view (the
 // Angular twin of React's setState / Vue's reactive ref), ngOnDestroy tears the subscriptions down,
 // and the wrapper's onLayout measures the frame that feeds the next event's inset. The user
 // children nest under the wrapper (or, for 'position', an inner View) via <ng-content>. No native
@@ -26,8 +26,10 @@ import {
 } from '@angular/core';
 import {
   computeInset,
+  keyboardAvoidingEventNamesFor,
   readKeyboardFrame,
   readLayoutFrame,
+  readPrefersCrossFadeTransitions,
   resolveAccessibilityProps,
   resolveKeyboardAvoidingLayout,
   DEFAULT_VERTICAL_OFFSET,
@@ -40,7 +42,7 @@ import {
 } from '@symbiote-native/components';
 import {
   Keyboard,
-  KEYBOARD_EVENT,
+  Platform,
   dlog,
   isSymbioteEvent,
   type IEventSubscription,
@@ -48,14 +50,20 @@ import {
   type ISymbioteEvent,
   type IViewStyle,
 } from '@symbiote-native/engine';
-import { anchorHostStyle, SymbioteHostPropsDirective, ViewHost } from '../../primitives';
+import {
+  anchorHostStyle,
+  SymbioteHostPropsDirective,
+  SymbioteStyleInputDirective,
+  ViewHost,
+} from '../../primitives';
 
 export type { IKeyboardAvoidingBehavior } from '@symbiote-native/components';
 
 // Mirrors React's IKeyboardAvoidingViewProps minus children (Angular takes children via
 // <ng-content>), declared per-adapter over the shared accessibility base since a framework-specific
 // children field keeps it from being fully shared across adapters.
-export interface IAngularKeyboardAvoidingViewProps extends IAccessibilityProps, IAriaProps {
+export interface IAngularKeyboardAvoidingViewProps
+  extends IAccessibilityProps, IAriaProps {
   behavior?: IKeyboardAvoidingBehavior;
   enabled?: boolean;
   keyboardVerticalOffset?: number;
@@ -79,6 +87,9 @@ export type IAngularKeyboardAvoidingViewInputs = Omit<
 @Component({
   selector: 'KeyboardAvoidingView',
   standalone: true,
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [ViewHost, SymbioteHostPropsDirective],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -104,7 +115,9 @@ export type IAngularKeyboardAvoidingViewInputs = Omit<
     </symbiote-view>
   `,
 })
-export class KeyboardAvoidingView implements IAngularKeyboardAvoidingViewInputs, OnInit, OnDestroy {
+export class KeyboardAvoidingView
+  implements IAngularKeyboardAvoidingViewInputs, OnInit, OnDestroy
+{
   @Input() behavior?: IKeyboardAvoidingBehavior;
   @Input() enabled?: boolean;
   @Input() keyboardVerticalOffset?: number;
@@ -129,8 +142,10 @@ export class KeyboardAvoidingView implements IAngularKeyboardAvoidingViewInputs,
   @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;
@@ -162,6 +177,12 @@ export class KeyboardAvoidingView implements IAngularKeyboardAvoidingViewInputs,
   // keyboard event's inset math (React's frameRef / initialHeightRef, Vue's frame / initialHeight).
   private frame?: IMeasuredFrame;
   private initialHeight?: number;
+  // The iOS "Prefer Cross-Fade Transitions" setting, read once per mount. Deliberately a plain
+  // field and NOT markForCheck'd when the promise lands: it is a device setting that cannot change
+  // mid-session, and it feeds only the NEXT keyboard event's math — never the current render — so
+  // under zoneless CD there is nothing to repaint at resolve time. The keyboard event that does use
+  // it already calls markForCheck itself.
+  private prefersCrossFadeTransitions = false;
   private subscriptions: IEventSubscription[] = [];
 
   private readonly changeDetector = inject(ChangeDetectorRef);
@@ -171,11 +192,21 @@ export class KeyboardAvoidingView implements IAngularKeyboardAvoidingViewInputs,
   private readonly elementRef = inject(ElementRef);
 
   ngOnInit(): void {
+    // TWO events, picked per host, never three: iOS takes the will* pair so the view rides up with
+    // the keyboard animation, Android the did* pair. The change-frame notification is deliberately
+    // absent — with an undocked/split/floating iOS keyboard it fires BEFORE the hide, so listening
+    // to it applies a frame captured mid-dismissal (RN KeyboardAvoidingView.js's own comment).
+    const events = keyboardAvoidingEventNamesFor(Platform.OS);
     this.subscriptions = [
-      Keyboard.addListener(KEYBOARD_EVENT.didShow, payload => this.onShow(payload)),
-      Keyboard.addListener(KEYBOARD_EVENT.didChangeFrame, payload => this.onShow(payload)),
-      Keyboard.addListener(KEYBOARD_EVENT.didHide, () => this.onHide()),
+      Keyboard.addListener(events.show, payload => this.onShow(payload)),
+      Keyboard.addListener(events.hide, () => this.onHide()),
     ];
+    // The core wrapper, not AccessibilityInfo directly: the engine's iOS getter REJECTS on a
+    // native error (RN parity), and nobody awaits this read, so an unwrapped call would surface
+    // as an unhandled rejection. The wrapper answers false on a failed read.
+    void readPrefersCrossFadeTransitions().then(enabled => {
+      this.prefersCrossFadeTransitions = enabled;
+    });
   }
 
   ngOnDestroy(): void {
@@ -186,7 +217,17 @@ export class KeyboardAvoidingView implements IAngularKeyboardAvoidingViewInputs,
   private onShow(payload: unknown): void {
     const keyboard = readKeyboardFrame(payload);
     const offset = this.keyboardVerticalOffset ?? DEFAULT_VERTICAL_OFFSET;
-    const next = computeInset(this.frame, keyboard, offset);
+    const next = computeInset(this.frame, keyboard, offset, {
+      // Read off the field at event time, not captured when the subscription was built: `behavior`
+      // is an @Input that can change under a long-lived subscription, and a stale one keeps
+      // applying the old mode's math (it gates the previous-inset correction below).
+      behavior: this.behavior,
+      // The inset CURRENTLY applied (RN's this.state.bottom), read off the field at event time so
+      // 'height' mode's fixpoint correction sees the live value: that mode SHRINKS the wrapper by
+      // the inset, so the next onLayout reports a frame shorter by exactly that much.
+      previousInset: this.inset,
+      prefersCrossFadeTransitions: this.prefersCrossFadeTransitions,
+    });
     dlog(`KeyboardAvoidingView show -> inset ${next}`);
     this.inset = next;
     this.changeDetector.markForCheck();
@@ -205,7 +246,8 @@ export class KeyboardAvoidingView implements IAngularKeyboardAvoidingViewInputs,
     const measured = readLayoutFrame(event.nativeEvent.layout);
     if (measured !== undefined) {
       this.frame = measured;
-      if (this.initialHeight === undefined) this.initialHeight = measured.height;
+      if (this.initialHeight === undefined)
+        this.initialHeight = measured.height;
     }
     this.layout.emit(event);
   }
@@ -238,7 +280,9 @@ export class KeyboardAvoidingView implements IAngularKeyboardAvoidingViewInputs,
   }
 
   get innerStyle(): IStyleProp<IViewStyle> | undefined {
-    return this.resolvedLayout.kind === 'nested' ? this.resolvedLayout.innerStyle : undefined;
+    return this.resolvedLayout.kind === 'nested'
+      ? this.resolvedLayout.innerStyle
+      : undefined;
   }
 
   // The wrapper's full prop bag (style + identity + a11y) folded for `[symbioteHostProps]`,
@@ -280,8 +324,10 @@ export class KeyboardAvoidingView implements IAngularKeyboardAvoidingViewInputs,
       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,