@symbiote-native/angular 0.0.0-canary-20260724081123

package/src/components/keyboard-avoiding-view/index.ts

@@ -0,0 +1,303 @@
+// KeyboardAvoidingView: the Angular lifecycle half. A plain View that shifts out of the
+// 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
+// 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
+// host of its own — it wraps symbiote-view — so this stays a flat single file.
+//
+// Full parity: behavior 'height'|'position'|'padding', enabled, keyboardVerticalOffset,
+// contentContainerStyle, onLayout, plus the full a11y/aria surface every View carries.
+
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+  type OnDestroy,
+  type OnInit,
+} from '@angular/core';
+import {
+  computeInset,
+  readKeyboardFrame,
+  readLayoutFrame,
+  resolveAccessibilityProps,
+  resolveKeyboardAvoidingLayout,
+  DEFAULT_VERTICAL_OFFSET,
+  type IAccessibilityProps,
+  type IAccessibilityStateValue,
+  type IAriaProps,
+  type IKeyboardAvoidingBehavior,
+  type IKeyboardAvoidingLayout,
+  type IMeasuredFrame,
+} from '@symbiote-native/components';
+import {
+  Keyboard,
+  KEYBOARD_EVENT,
+  dlog,
+  isSymbioteEvent,
+  type IEventSubscription,
+  type IStyleProp,
+  type ISymbioteEvent,
+  type IViewStyle,
+} from '@symbiote-native/engine';
+import { anchorHostStyle, SymbioteHostPropsDirective, 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 {
+  behavior?: IKeyboardAvoidingBehavior;
+  enabled?: boolean;
+  keyboardVerticalOffset?: number;
+  contentContainerStyle?: IStyleProp<IViewStyle>;
+  style?: IStyleProp<IViewStyle>;
+  onLayout?: (event: ISymbioteEvent) => void;
+}
+
+// What the component itself takes as plain @Input()s: the full surface minus onLayout and the
+// accessibility callbacks, which it exposes as real @Output() EventEmitters instead (see the
+// class below), mirroring Pressable's IAngularPressableInputs split.
+export type IAngularKeyboardAvoidingViewInputs = Omit<
+  IAngularKeyboardAvoidingViewProps,
+  | 'onLayout'
+  | 'onAccessibilityAction'
+  | 'onAccessibilityTap'
+  | 'onMagicTap'
+  | 'onAccessibilityEscape'
+>;
+
+@Component({
+  selector: 'KeyboardAvoidingView',
+  standalone: true,
+  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.
+  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) {
+        <symbiote-view [style]="innerStyle">
+          <ng-content></ng-content>
+        </symbiote-view>
+      } @else {
+        <ng-content></ng-content>
+      }
+    </symbiote-view>
+  `,
+})
+export class KeyboardAvoidingView implements IAngularKeyboardAvoidingViewInputs, OnInit, OnDestroy {
+  @Input() behavior?: IKeyboardAvoidingBehavior;
+  @Input() enabled?: boolean;
+  @Input() keyboardVerticalOffset?: number;
+  @Input() contentContainerStyle?: IStyleProp<IViewStyle>;
+  @Input() style?: IStyleProp<IViewStyle>;
+  // The wrapper's onLayout is a real @Output(): `(layout)="…"`, not `[onLayout]="…"`. Safe to
+  // name it the same as the native `layout` event fired inside this component's own template
+  // (see the class's `handleLayout`) — the engine's bubble() treats ANCHOR_HOST_COMPONENTS as
+  // transparent to listener lookup, so there is no double-fire.
+  @Output() readonly layout = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly accessibilityAction = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly accessibilityTap = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly magicTap = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly accessibilityEscape = new EventEmitter<ISymbioteEvent>();
+  @Input() testID?: string;
+  @Input() nativeID?: string;
+  @Input() accessible?: boolean;
+  @Input() accessibilityLabel?: string;
+  @Input() accessibilityHint?: string;
+  @Input() accessibilityRole?: IAccessibilityProps['accessibilityRole'];
+  @Input() accessibilityState?: IAccessibilityStateValue;
+  @Input() accessibilityValue?: IAccessibilityProps['accessibilityValue'];
+  @Input() accessibilityActions?: IAccessibilityProps['accessibilityActions'];
+  @Input() accessibilityLabelledBy?: string | string[];
+  @Input() importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
+  @Input() accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
+  @Input() screenReaderFocusable?: boolean;
+  @Input() accessibilityViewIsModal?: boolean;
+  @Input() accessibilityElementsHidden?: boolean;
+  @Input() accessibilityIgnoresInvertColors?: boolean;
+  @Input() accessibilityLanguage?: string;
+  @Input() accessibilityRespondsToUserInteraction?: boolean;
+  @Input() accessibilityShowsLargeContentViewer?: boolean;
+  @Input() accessibilityLargeContentTitle?: string;
+  @Input() role?: IAriaProps['role'];
+  @Input('aria-label') ariaLabel?: string;
+  @Input('aria-labelledby') ariaLabelledBy?: string;
+  @Input('aria-live') ariaLive?: IAriaProps['aria-live'];
+  @Input('aria-hidden') ariaHidden?: boolean;
+  @Input('aria-busy') ariaBusy?: boolean;
+  @Input('aria-checked') ariaChecked?: boolean | 'mixed';
+  @Input('aria-disabled') ariaDisabled?: boolean;
+  @Input('aria-expanded') ariaExpanded?: boolean;
+  @Input('aria-selected') ariaSelected?: boolean;
+  @Input('aria-modal') ariaModal?: boolean;
+  @Input('aria-valuemax') ariaValueMax?: number;
+  @Input('aria-valuemin') ariaValueMin?: number;
+  @Input('aria-valuenow') ariaValueNow?: number;
+  @Input('aria-valuetext') ariaValueText?: string;
+
+  // How far the view must move so it no longer overlaps the keyboard. A plain field, not reactive:
+  // OnPush + zoneless means a keyboard event mutates it and pulls the view via markForCheck.
+  private inset = 0;
+  // Mutable, not state: changing the measured frame alone shouldn't re-render; it feeds the next
+  // keyboard event's inset math (React's frameRef / initialHeightRef, Vue's frame / initialHeight).
+  private frame?: IMeasuredFrame;
+  private initialHeight?: number;
+  private subscriptions: IEventSubscription[] = [];
+
+  private readonly changeDetector = inject(ChangeDetectorRef);
+  // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
+  // onto (see anchorHostStyle's doc comment) — NOT a ViewChild into the inner symbiote-view (this
+  // component has none; the wrapper IS the outer template node hostProps binds onto).
+  private readonly elementRef = inject(ElementRef);
+
+  ngOnInit(): void {
+    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()),
+    ];
+  }
+
+  ngOnDestroy(): void {
+    for (const subscription of this.subscriptions) subscription.remove();
+    this.subscriptions = [];
+  }
+
+  private onShow(payload: unknown): void {
+    const keyboard = readKeyboardFrame(payload);
+    const offset = this.keyboardVerticalOffset ?? DEFAULT_VERTICAL_OFFSET;
+    const next = computeInset(this.frame, keyboard, offset);
+    dlog(`KeyboardAvoidingView show -> inset ${next}`);
+    this.inset = next;
+    this.changeDetector.markForCheck();
+  }
+
+  private onHide(): void {
+    dlog('KeyboardAvoidingView hide -> inset 0');
+    this.inset = 0;
+    this.changeDetector.markForCheck();
+  }
+
+  // The wrapper's onLayout measures the frame BEFORE forwarding to the caller's onLayout, so the
+  // next keyboard event's inset math has the view's real position (React/Vue's handleLayout).
+  handleLayout(event: unknown): void {
+    if (!isSymbioteEvent(event)) return;
+    const measured = readLayoutFrame(event.nativeEvent.layout);
+    if (measured !== undefined) {
+      this.frame = measured;
+      if (this.initialHeight === undefined) this.initialHeight = measured.height;
+    }
+    this.layout.emit(event);
+  }
+
+  // RN gates every inset on `enabled ?? true`; only an explicit `false` disables, forcing the inset
+  // to 0 so every behavior mode renders the view untouched.
+  private get effectiveInset(): number {
+    return this.enabled === false ? 0 : this.inset;
+  }
+
+  // The behavior + effective inset → wrapper/inner styles and the nesting decision (the shared core
+  // of RN's render). Recomputed per CD pass, the Angular twin of React/Vue's per-render call.
+  // Named `resolvedLayout`, not `layout` — that name is now the onLayout @Output() EventEmitter.
+  private get resolvedLayout(): IKeyboardAvoidingLayout {
+    return resolveKeyboardAvoidingLayout({
+      behavior: this.behavior,
+      effectiveInset: this.effectiveInset,
+      initialHeight: this.initialHeight,
+      style: this.style,
+      contentContainerStyle: this.contentContainerStyle,
+    });
+  }
+
+  get isNested(): boolean {
+    return this.resolvedLayout.kind === 'nested';
+  }
+
+  get wrapperStyle(): IStyleProp<IViewStyle> | undefined {
+    return this.resolvedLayout.wrapperStyle;
+  }
+
+  get innerStyle(): IStyleProp<IViewStyle> | undefined {
+    return this.resolvedLayout.kind === 'nested' ? this.resolvedLayout.innerStyle : undefined;
+  }
+
+  // The wrapper's full prop bag (style + identity + a11y) folded for `[symbioteHostProps]`,
+  // the same pattern Modal's `hostProps` uses over its renderModal descriptor. The anchor's
+  // class-derived style goes FIRST, the resolved wrapper style SECOND — flattenStyle's later-wins
+  // collapse keeps an explicit [style] winning over its ambient class.
+  get hostProps(): Record<string, unknown> {
+    return {
+      style: [anchorHostStyle(this.elementRef), this.wrapperStyle],
+      testID: this.testID,
+      nativeID: this.nativeID,
+      accessible: this.accessible,
+      ...this.folded,
+    };
+  }
+
+  // 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 {
+    if (isSymbioteEvent(event)) emitter.emit(event);
+  }
+
+  // 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> {
+    return resolveAccessibilityProps({
+      accessibilityLabel: this.accessibilityLabel,
+      accessibilityHint: this.accessibilityHint,
+      accessibilityRole: this.accessibilityRole,
+      accessibilityState: this.accessibilityState,
+      accessibilityValue: this.accessibilityValue,
+      accessibilityActions: this.accessibilityActions,
+      accessibilityLabelledBy: this.accessibilityLabelledBy,
+      importantForAccessibility: this.importantForAccessibility,
+      accessibilityLiveRegion: this.accessibilityLiveRegion,
+      screenReaderFocusable: this.screenReaderFocusable,
+      accessibilityViewIsModal: this.accessibilityViewIsModal,
+      accessibilityElementsHidden: this.accessibilityElementsHidden,
+      accessibilityIgnoresInvertColors: this.accessibilityIgnoresInvertColors,
+      accessibilityLanguage: this.accessibilityLanguage,
+      accessibilityRespondsToUserInteraction: this.accessibilityRespondsToUserInteraction,
+      accessibilityShowsLargeContentViewer: this.accessibilityShowsLargeContentViewer,
+      accessibilityLargeContentTitle: this.accessibilityLargeContentTitle,
+      role: this.role,
+      'aria-label': this.ariaLabel,
+      'aria-labelledby': this.ariaLabelledBy,
+      'aria-live': this.ariaLive,
+      'aria-hidden': this.ariaHidden,
+      'aria-busy': this.ariaBusy,
+      'aria-checked': this.ariaChecked,
+      'aria-disabled': this.ariaDisabled,
+      'aria-expanded': this.ariaExpanded,
+      'aria-selected': this.ariaSelected,
+      'aria-modal': this.ariaModal,
+      'aria-valuemax': this.ariaValueMax,
+      'aria-valuemin': this.ariaValueMin,
+      'aria-valuenow': this.ariaValueNow,
+      'aria-valuetext': this.ariaValueText,
+    });
+  }
+}

package/src/components/keyboard-avoiding-view/keyboard-avoiding-view.test.ts

@@ -0,0 +1,54 @@
+import '@angular/compiler';
+import { Component } from '@angular/core';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { clearGlobalStyles, registerStyles } from '@symbiote-native/engine';
+import { installFabric } from '@symbiote-native/test-utils';
+
+import { mount, unmount } from '../../render';
+import { KeyboardAvoidingView } from './index';
+
+const ROOT_TAG = 911;
+const fabric = installFabric();
+
+// KeyboardAvoidingView's ngOnInit subscribes to the Keyboard module, which installs the
+// bridgeless device-event hub on first use — needs a fake RN$registerCallableModule so
+// installDeviceEventHub() doesn't throw (core/engine/src/native-events.ts). No native event is
+// actually emitted in this test, only the subscribe/unsubscribe lifecycle runs.
+Object.assign(globalThis, {
+  RN$registerCallableModule: (
+    _name: string,
+    _factory: () => { emit: (eventType: string, ...args: unknown[]) => void },
+  ): void => {},
+});
+
+@Component({
+  selector: 'symbiote-kav-host',
+  standalone: true,
+  imports: [KeyboardAvoidingView],
+  template: `
+    <KeyboardAvoidingView [testID]="'kav'" class="panel">
+      <symbiote-text>Hello</symbiote-text>
+    </KeyboardAvoidingView>
+  `,
+})
+class KeyboardAvoidingViewHostFixture {}
+
+beforeEach(() => {
+  fabric.reset();
+});
+afterEach(() => {
+  unmount(ROOT_TAG);
+  clearGlobalStyles();
+});
+
+describe('KeyboardAvoidingView', () => {
+  it('resolves a class= on the KeyboardAvoidingView use site onto the real committed view, not the anchor', async () => {
+    registerStyles({ panel: { backgroundColor: 'teal' } });
+
+    mount(ROOT_TAG, KeyboardAvoidingViewHostFixture);
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+
+    const node = fabric.find(n => n.props.testID === 'kav');
+    expect(node?.props.backgroundColor).toBe('teal');
+  });
+});

package/src/components/modal/index.ts

@@ -0,0 +1,299 @@
+// Modal: the Angular lifecycle half. RCTModalHostView is an ordinary Fabric host node committing
+// through the same childSet as the rest of the tree (no second JS surface). The style math (the
+// backdrop override, the container/host styles, the presentationStyle default), the visible gate,
+// and the iOS keep-alive reducer all live framework-agnostic in @symbiote-native/components and are shared
+// verbatim with React/Vue; here Angular supplies only the lifecycle: the keep-alive state + a
+// POST-render transition (ngOnChanges queues the reducer on a microtask so it runs AFTER the render
+// that used the OLD state, the Angular twin of React's useEffect / Vue's post-flush watch — one
+// keep-alive frame survives the visible→hidden transition), reusing renderModal's resolved props.
+// The user children nest UNDER the container View via <ng-content>.
+
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+  type OnChanges,
+  type OnInit,
+  type SimpleChanges,
+} from '@angular/core';
+import {
+  createInitialModalState,
+  modalReducer,
+  renderModal,
+  resolveAccessibilityProps,
+  shouldRenderModal,
+  type IAccessibilityProps,
+  type IAccessibilityStateValue,
+  type IAriaProps,
+  type IModalAnimationType,
+  type IModalOrientation,
+  type IModalOrientationChangeEvent,
+  type IModalPresentationStyle,
+  type IModalState,
+} from '@symbiote-native/components';
+import {
+  dlog,
+  isSymbioteEvent,
+  type IStyleProp,
+  type ISymbioteEvent,
+  type IViewStyle,
+} from '@symbiote-native/engine';
+import { anchorHostStyle, ModalHost, SymbioteHostPropsDirective, ViewHost } from '../../primitives';
+
+export type {
+  IModalAnimationType,
+  IModalPresentationStyle,
+  IModalOrientation,
+  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;
+  transparent?: boolean;
+  backdropColor?: string;
+  animationType?: IModalAnimationType;
+  presentationStyle?: IModalPresentationStyle;
+  supportedOrientations?: ReadonlyArray<IModalOrientation>;
+  hardwareAccelerated?: boolean;
+  statusBarTranslucent?: boolean;
+  navigationBarTranslucent?: boolean;
+  allowSwipeDismissal?: boolean;
+  onShow?: () => void;
+  onDismiss?: () => void;
+  onRequestClose?: () => void;
+  onOrientationChange?: (event: IModalOrientationChangeEvent) => void;
+  style?: IStyleProp<IViewStyle>;
+}
+
+// What the Modal component itself takes as plain @Input()s: the full surface minus the
+// show/dismiss/close/orientation and accessibility events, which it exposes as real @Output()
+// EventEmitters instead (see the class below), mirroring the Pressable family's onPress -> press
+// conversion (adapters/angular/src/components/pressable/index.ts).
+export type IAngularModalInputs = Omit<
+  IAngularModalProps,
+  | 'onShow'
+  | 'onDismiss'
+  | 'onRequestClose'
+  | 'onOrientationChange'
+  | 'onAccessibilityAction'
+  | 'onAccessibilityTap'
+  | 'onMagicTap'
+  | 'onAccessibilityEscape'
+>;
+
+@Component({
+  selector: 'Modal',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [ModalHost, ViewHost, SymbioteHostPropsDirective],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    @if (shouldRender) {
+      <symbiote-modal
+        [symbioteHostProps]="hostProps"
+        (show)="show.emit()"
+        (dismiss)="dismiss.emit()"
+        (requestClose)="requestClose.emit()"
+        (orientationChange)="emitOrientation($event)"
+        (accessibilityAction)="emit(accessibilityAction, $event)"
+        (accessibilityTap)="emit(accessibilityTap, $event)"
+        (magicTap)="emit(magicTap, $event)"
+        (accessibilityEscape)="emit(accessibilityEscape, $event)"
+      >
+        <symbiote-view [style]="containerStyle" [collapsable]="false">
+          <ng-content></ng-content>
+        </symbiote-view>
+      </symbiote-modal>
+    }
+  `,
+})
+export class Modal implements IAngularModalInputs, OnInit, OnChanges {
+  @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 accessibilityAction = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly accessibilityTap = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly magicTap = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly accessibilityEscape = new EventEmitter<ISymbioteEvent>();
+  @Input() visible?: boolean;
+  @Input() transparent?: boolean;
+  @Input() backdropColor?: string;
+  @Input() animationType?: IModalAnimationType;
+  @Input() presentationStyle?: IModalPresentationStyle;
+  @Input() supportedOrientations?: ReadonlyArray<IModalOrientation>;
+  @Input() hardwareAccelerated?: boolean;
+  @Input() statusBarTranslucent?: boolean;
+  @Input() navigationBarTranslucent?: boolean;
+  @Input() allowSwipeDismissal?: boolean;
+  @Input() style?: IStyleProp<IViewStyle>;
+  @Input() testID?: string;
+  @Input() accessible?: boolean;
+  @Input() accessibilityLabel?: string;
+  @Input() accessibilityHint?: string;
+  @Input() accessibilityRole?: IAccessibilityProps['accessibilityRole'];
+  @Input() accessibilityState?: IAccessibilityStateValue;
+  @Input() accessibilityValue?: IAccessibilityProps['accessibilityValue'];
+  @Input() accessibilityActions?: IAccessibilityProps['accessibilityActions'];
+  @Input() accessibilityLabelledBy?: string | string[];
+  @Input() importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
+  @Input() accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
+  @Input() screenReaderFocusable?: boolean;
+  @Input() accessibilityViewIsModal?: boolean;
+  @Input() accessibilityElementsHidden?: boolean;
+  @Input() accessibilityIgnoresInvertColors?: boolean;
+  @Input() accessibilityLanguage?: string;
+  @Input() accessibilityRespondsToUserInteraction?: boolean;
+  @Input() accessibilityShowsLargeContentViewer?: boolean;
+  @Input() accessibilityLargeContentTitle?: string;
+  @Input() role?: IAriaProps['role'];
+  @Input('aria-label') ariaLabel?: string;
+  @Input('aria-labelledby') ariaLabelledBy?: string;
+  @Input('aria-live') ariaLive?: IAriaProps['aria-live'];
+  @Input('aria-hidden') ariaHidden?: boolean;
+  @Input('aria-busy') ariaBusy?: boolean;
+  @Input('aria-checked') ariaChecked?: boolean | 'mixed';
+  @Input('aria-disabled') ariaDisabled?: boolean;
+  @Input('aria-expanded') ariaExpanded?: boolean;
+  @Input('aria-selected') ariaSelected?: boolean;
+  @Input('aria-modal') ariaModal?: boolean;
+  @Input('aria-valuemax') ariaValueMax?: number;
+  @Input('aria-valuemin') ariaValueMin?: number;
+  @Input('aria-valuenow') ariaValueNow?: number;
+  @Input('aria-valuetext') ariaValueText?: string;
+
+  // The iOS keep-alive (state/modal.ts): on visible→hidden the node renders one more frame
+  // (isRendered still true) before unmounting, so the native onDismiss can arrive.
+  private state: IModalState = createInitialModalState(false);
+
+  private readonly changeDetector = inject(ChangeDetectorRef);
+  // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
+  // onto (see anchorHostStyle's doc comment) — NOT the inner `symbiote-view [style]="containerStyle"`
+  // that hosts the user children; the outer `symbiote-modal` node (bound via `hostProps` below) is
+  // the real primitive the anchor sits in front of.
+  private readonly elementRef = inject(ElementRef);
+
+  ngOnInit(): void {
+    this.state = createInitialModalState(this.visible === true);
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    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;
+    const isVisible = this.visible === true;
+    // Queue on a microtask so the reducer runs AFTER this CD pass renders with the OLD state —
+    // the keep-alive frame. A synchronous dispatch here would unmount in the same pass.
+    queueMicrotask(() => {
+      this.state = modalReducer(this.state, isVisible ? { type: 'show' } : { type: 'hide' });
+      this.changeDetector.markForCheck();
+    });
+  }
+
+  get shouldRender(): boolean {
+    const render = shouldRenderModal(this.visible === true, this.state);
+    if (!render) dlog('Modal hidden -> no node committed');
+    return render;
+  }
+
+  // renderModal owns the backdrop/presentationStyle/style math (shared with React/Vue); the
+  // adapter reads the resolved host + container props off the Descriptor it returns.
+  private get descriptor() {
+    return renderModal({
+      visible: this.visible,
+      transparent: this.transparent,
+      backdropColor: this.backdropColor,
+      animationType: this.animationType,
+      presentationStyle: this.presentationStyle,
+      supportedOrientations: this.supportedOrientations,
+      hardwareAccelerated: this.hardwareAccelerated,
+      statusBarTranslucent: this.statusBarTranslucent,
+      navigationBarTranslucent: this.navigationBarTranslucent,
+      allowSwipeDismissal: this.allowSwipeDismissal,
+      style: this.style,
+      passthrough: resolveAccessibilityProps(this.accessibilityInputs()),
+    });
+  }
+
+  // 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> {
+    const descriptorProps = this.descriptor.props;
+    return { ...descriptorProps, style: [anchorHostStyle(this.elementRef), descriptorProps.style] };
+  }
+
+  get containerStyle(): unknown {
+    const container = this.descriptor.children[0];
+    return typeof container === 'string' ? undefined : container.props.style;
+  }
+
+  emit(emitter: EventEmitter<ISymbioteEvent>, event: unknown): void {
+    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> {
+    return {
+      testID: this.testID,
+      accessible: this.accessible,
+      accessibilityLabel: this.accessibilityLabel,
+      accessibilityHint: this.accessibilityHint,
+      accessibilityRole: this.accessibilityRole,
+      accessibilityState: this.accessibilityState,
+      accessibilityValue: this.accessibilityValue,
+      accessibilityActions: this.accessibilityActions,
+      accessibilityLabelledBy: this.accessibilityLabelledBy,
+      importantForAccessibility: this.importantForAccessibility,
+      accessibilityLiveRegion: this.accessibilityLiveRegion,
+      screenReaderFocusable: this.screenReaderFocusable,
+      accessibilityViewIsModal: this.accessibilityViewIsModal,
+      accessibilityElementsHidden: this.accessibilityElementsHidden,
+      accessibilityIgnoresInvertColors: this.accessibilityIgnoresInvertColors,
+      accessibilityLanguage: this.accessibilityLanguage,
+      accessibilityRespondsToUserInteraction: this.accessibilityRespondsToUserInteraction,
+      accessibilityShowsLargeContentViewer: this.accessibilityShowsLargeContentViewer,
+      accessibilityLargeContentTitle: this.accessibilityLargeContentTitle,
+      role: this.role,
+      'aria-label': this.ariaLabel,
+      'aria-labelledby': this.ariaLabelledBy,
+      'aria-live': this.ariaLive,
+      'aria-hidden': this.ariaHidden,
+      'aria-busy': this.ariaBusy,
+      'aria-checked': this.ariaChecked,
+      'aria-disabled': this.ariaDisabled,
+      'aria-expanded': this.ariaExpanded,
+      'aria-selected': this.ariaSelected,
+      'aria-modal': this.ariaModal,
+      'aria-valuemax': this.ariaValueMax,
+      'aria-valuemin': this.ariaValueMin,
+      'aria-valuenow': this.ariaValueNow,
+      'aria-valuetext': this.ariaValueText,
+    };
+  }
+}