@symbiote-native/angular 0.7.0 → 1.0.0

package/src/components/image/shared.ts

@@ -1,4 +1,9 @@
 import { EventEmitter, computed, signal } from '@angular/core';
+import {
+  gateWanted,
+  injectGateDemand,
+  type IGatedAccessibilityEvent,
+} from '../../gate-demand';
 import {
   imageStatics,
   renderImage,
@@ -150,15 +155,29 @@ 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> {
+// Narrows a value out of the untyped animated prop bag. A runtime guard rather than a cast: the
+// bag is built at runtime from merged animated values, so nothing upstream has proven the shape.
+export function isImageEventCallback(
+  value: unknown,
+): value is (event: ISymbioteEvent) => void {
+  return typeof value === 'function';
+}
+
+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 +189,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 +241,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'],
@@ -345,28 +395,32 @@ export abstract class ImageBase {
   readonly progress = new EventEmitter<ISymbioteEvent>();
   readonly partialLoad = new EventEmitter<ISymbioteEvent>();
 
-  handleAccessibilityAction(event: Event): void {
-    if (!isSymbioteEvent(event)) return;
-    this.onAccessibilityAction?.(event);
-    this.accessibilityAction.emit(event);
-  }
-
-  handleAccessibilityTap(event: Event): void {
-    if (!isSymbioteEvent(event)) return;
-    this.onAccessibilityTap?.(event);
-    this.accessibilityTap.emit(event);
-  }
-
-  handleMagicTap(event: Event): void {
-    if (!isSymbioteEvent(event)) return;
-    this.onMagicTap?.(event);
-    this.magicTap.emit(event);
-  }
-
-  handleAccessibilityEscape(event: Event): void {
-    if (!isSymbioteEvent(event)) return;
-    this.onAccessibilityEscape?.(event);
-    this.accessibilityEscape.emit(event);
+  // Null unless an adapter wrapper renders this Image in its own template — ImageBackground does.
+  // An app's own `<Image>` gets null and answers from its own `.observed`.
+  private readonly gateDemand = injectGateDemand();
+
+  // The four accessibility events are boolean-GATED Fabric events
+  // (`.claude/rules/fabric-boolean-event-gates.md`): native fires them only when the committed
+  // payload carries a FUNCTION at that key. A template `(accessibilityAction)="..."` binding on the
+  // intrinsic host lights the gate unconditionally; this reaches the app two ways — a plain
+  // `[onAccessibilityAction]` @Input callback, or the `accessibilityAction` @Output — and the gate
+  // must light only when at least one of the two is actually wired. Returned `undefined` means
+  // `setEventListener` never sees a function, so the gate stays dark.
+  protected gatedAccessibilityHandler(
+    name: IGatedAccessibilityEvent,
+    callback: ((event: ISymbioteEvent) => void) | undefined,
+  ): ((event: Event) => void) | undefined {
+    const emitter = this[name];
+    // A WRAPPER's binding is not a subscriber, and `.observed` cannot tell the two apart.
+    // ImageBackground renders this component and binds all four, so without the demand every
+    // Image inside one lit its gates. See `gate-demand.ts`.
+    if (!gateWanted(this.gateDemand, name, emitter) && callback === undefined)
+      return undefined;
+    return event => {
+      if (!isSymbioteEvent(event)) return;
+      callback?.(event);
+      emitter.emit(event);
+    };
   }
 
   handleLoadStart(event: Event): void {
@@ -442,8 +496,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,
@@ -460,10 +516,19 @@ export abstract class ImageBase {
       ariaValueMin: this.ariaValueMin,
       ariaValueNow: this.ariaValueNow,
       ariaValueText: this.ariaValueText,
-      onAccessibilityAction: this.onAccessibilityAction,
-      onAccessibilityTap: this.onAccessibilityTap,
-      onMagicTap: this.onMagicTap,
-      onAccessibilityEscape: this.onAccessibilityEscape,
+      onAccessibilityAction: this.gatedAccessibilityHandler(
+        'accessibilityAction',
+        this.onAccessibilityAction,
+      ),
+      onAccessibilityTap: this.gatedAccessibilityHandler(
+        'accessibilityTap',
+        this.onAccessibilityTap,
+      ),
+      onMagicTap: this.gatedAccessibilityHandler('magicTap', this.onMagicTap),
+      onAccessibilityEscape: this.gatedAccessibilityHandler(
+        'accessibilityEscape',
+        this.onAccessibilityEscape,
+      ),
       onLoadStart: this.onLoadStart,
       onLoad: this.onLoad,
       onLoadEnd: this.onLoadEnd,

package/src/components/image-background.ts

@@ -37,12 +37,26 @@ import {
   type IViewStyle,
 } from '@symbiote-native/engine';
 import { Image } from './image';
-import { anchorHostStyle, SymbioteStyleInputDirective, ViewHost } from '../primitives';
+import {
+  anchorHostStyle,
+  SymbioteStyleInputDirective,
+  ViewHost,
+} from '../primitives';
+import {
+  gateWanted,
+  injectGateDemandAbove,
+  provideGateDemand,
+  type IGateDemand,
+  type IGatedAccessibilityEvent,
+} from '../gate-demand';
 
 // 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,7 +82,10 @@ export type IAngularImageBackgroundInputs = Omit<
 @Component({
   selector: 'ImageBackground',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  viewProviders: [provideGateDemand(() => ImageBackground)],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [Image, ViewHost],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -108,10 +125,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)"
@@ -135,6 +158,16 @@ export class ImageBackground implements IAngularImageBackgroundInputs {
   @Output() readonly accessibilityTap = new EventEmitter<ISymbioteEvent>();
   @Output() readonly magicTap = new EventEmitter<ISymbioteEvent>();
   @Output() readonly accessibilityEscape = new EventEmitter<ISymbioteEvent>();
+
+  // This wrapper binds the four gated accessibility events on the component it renders, which
+  // Angular forces to be unconditional and which would light that component's gates on every
+  // instance. It answers for them instead — see `gate-demand.ts`.
+  private readonly gateDemandAbove = injectGateDemandAbove();
+
+  wantsGate(name: IGatedAccessibilityEvent): boolean {
+    return gateWanted(this.gateDemandAbove, name, this[name]);
+  }
+
   @Output() readonly loadStart = new EventEmitter<ISymbioteEvent>();
   @Output() readonly load = new EventEmitter<ISymbioteEvent>();
   @Output() readonly loadEnd = new EventEmitter<ISymbioteEvent>();
@@ -170,8 +203,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;
@@ -248,8 +283,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

@@ -43,7 +43,8 @@ import {
 
 // 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;
@@ -55,29 +56,30 @@ 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'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [InputAccessoryViewHost, SymbioteHostPropsDirective],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <symbiote-input-accessory-view
-      [symbioteHostProps]="hostProps()"
-      (accessibilityAction)="emit(accessibilityAction, $event)"
-      (accessibilityTap)="emit(accessibilityTap, $event)"
-      (magicTap)="emit(magicTap, $event)"
-      (accessibilityEscape)="emit(accessibilityEscape, $event)"
-    >
+    <symbiote-input-accessory-view [symbioteHostProps]="hostProps()">
       <ng-content></ng-content>
     </symbiote-input-accessory-view>
   `,
 })
-export class InputAccessoryView implements IAngularInputAccessoryViewInputs, OnChanges, DoCheck {
+export class InputAccessoryView
+  implements IAngularInputAccessoryViewInputs, OnChanges, DoCheck
+{
   @Input() nativeID?: string;
   @Input() backgroundColor?: string;
   @Input() style?: IStyleProp<IViewStyle>;
@@ -94,8 +96,10 @@ export class InputAccessoryView implements IAngularInputAccessoryViewInputs, OnC
   @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;
@@ -126,10 +130,18 @@ export class InputAccessoryView implements IAngularInputAccessoryViewInputs, OnC
   private readonly elementRef = inject(ElementRef);
 
   // Forward an engine event to the matching @Output(), narrowing the template's untyped $event.
-  emit(emitter: EventEmitter<ISymbioteEvent>, event: unknown): void {
+  private emit(emitter: EventEmitter<ISymbioteEvent>, event: unknown): void {
     if (isSymbioteEvent(event)) emitter.emit(event);
   }
 
+  // The four accessibility events are boolean-GATED Fabric events
+  // (`.claude/rules/fabric-boolean-event-gates.md`). `.observed`-gated, mirroring Pressable's.
+  private eventEmitterHandler(
+    emitter: EventEmitter<ISymbioteEvent>,
+  ): ((event: unknown) => void) | undefined {
+    return emitter.observed ? event => this.emit(emitter, event) : undefined;
+  }
+
   // renderInputAccessoryView owns the host-node assembly (shared with React/Vue); the adapter reads
   // the resolved host props off the Descriptor it returns.
   private get descriptor() {
@@ -177,12 +189,21 @@ export class InputAccessoryView implements IAngularInputAccessoryViewInputs, OnC
   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],
+      onAccessibilityAction: this.eventEmitterHandler(this.accessibilityAction),
+      onAccessibilityTap: this.eventEmitterHandler(this.accessibilityTap),
+      onMagicTap: this.eventEmitterHandler(this.magicTap),
+      onAccessibilityEscape: this.eventEmitterHandler(this.accessibilityEscape),
+    };
   });
 
   // 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,
@@ -200,8 +221,10 @@ export class InputAccessoryView implements IAngularInputAccessoryViewInputs, OnC
       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,
@@ -60,7 +62,8 @@ 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;
@@ -84,20 +87,24 @@ export type IAngularKeyboardAvoidingViewInputs = Omit<
 @Component({
   selector: 'KeyboardAvoidingView',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [ViewHost, SymbioteHostPropsDirective],
   changeDetection: ChangeDetectionStrategy.OnPush,
   // The wrapper carries a11y + onLayout; 'position' ('nested') pushes the children in an inner
   // View by `bottom: inset`, the wrapper modes adjust the single wrapper directly. Only one @if
   // branch is instantiated, so each branch's <ng-content> projects the children unambiguously.
+  // `layout` stays a plain, unconditional template binding: unlike the four accessibility events
+  // below, this component READS its own onLayout internally (handleLayout measures the frame that
+  // feeds the next keyboard event's inset math — see keyboard-avoiding-view-rn-contract.md), so the
+  // gate must stay lit regardless of whether the app subscribes to the `layout` @Output(). Gating it
+  // on `.observed` would silently break the inset fixpoint correction the moment an app didn't
+  // listen to `layout`.
   template: `
     <symbiote-view
       [symbioteHostProps]="hostProps"
-      (accessibilityAction)="emit(accessibilityAction, $event)"
-      (accessibilityTap)="emit(accessibilityTap, $event)"
-      (magicTap)="emit(magicTap, $event)"
-      (accessibilityEscape)="emit(accessibilityEscape, $event)"
       (layout)="handleLayout($event)"
     >
       @if (isNested) {
@@ -110,7 +117,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;
@@ -135,8 +144,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;
@@ -168,6 +179,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);
@@ -177,11 +194,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 {
@@ -192,7 +219,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();
@@ -211,7 +248,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);
   }
@@ -244,7 +282,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]`,
@@ -258,16 +298,28 @@ export class KeyboardAvoidingView implements IAngularKeyboardAvoidingViewInputs,
       nativeID: this.nativeID,
       accessible: this.accessible,
       ...this.folded,
+      onAccessibilityAction: this.eventEmitterHandler(this.accessibilityAction),
+      onAccessibilityTap: this.eventEmitterHandler(this.accessibilityTap),
+      onMagicTap: this.eventEmitterHandler(this.magicTap),
+      onAccessibilityEscape: this.eventEmitterHandler(this.accessibilityEscape),
     };
   }
 
   // Forward an engine event to the matching @Output(), narrowing the template's untyped $event
-  // first. The accessibility* Outputs ride the engine's structural event channel (Angular blocks
-  // [onX] property bindings; events flow through (event) only).
-  emit(emitter: EventEmitter<ISymbioteEvent>, event: unknown): void {
+  // first.
+  private emit(emitter: EventEmitter<ISymbioteEvent>, event: unknown): void {
     if (isSymbioteEvent(event)) emitter.emit(event);
   }
 
+  // The four accessibility events are boolean-GATED Fabric events
+  // (`.claude/rules/fabric-boolean-event-gates.md`). `.observed`-gated, unlike `layout` above which
+  // this component needs unconditionally for its own internal frame measurement.
+  private eventEmitterHandler(
+    emitter: EventEmitter<ISymbioteEvent>,
+  ): ((event: unknown) => void) | undefined {
+    return emitter.observed ? event => this.emit(emitter, event) : undefined;
+  }
+
   // 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.
   get folded(): Partial<IAngularKeyboardAvoidingViewProps> {
@@ -286,8 +338,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,