@symbiote-native/angular 1.0.0 → 2.0.1

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

@@ -1,349 +0,0 @@
-// 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>. 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
-// `refresh` listener (Angular blocks [onX] property bindings; events flow through (event) only).
-
-import {
-  CUSTOM_ELEMENTS_SCHEMA,
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  ElementRef,
-  EventEmitter,
-  inject,
-  Input,
-  Output,
-  signal,
-  ViewChild,
-  type AfterViewInit,
-  type DoCheck,
-  type OnChanges,
-  type OnInit,
-  type SimpleChanges,
-} from '@angular/core';
-import {
-  resolveAccessibilityProps,
-  type IAccessibilityProps,
-  type IAccessibilityStateValue,
-  type IAriaProps,
-} from '@symbiote-native/components';
-import {
-  dispatchViewCommand,
-  dlog,
-  isSymbioteEvent,
-  isSymbioteNode,
-  type IStyleProp,
-  type ISymbioteEvent,
-  type IViewStyle,
-} from '@symbiote-native/engine';
-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.
-type IHostProps = Record<string, unknown>;
-
-// Mirrors React's IRefreshControlProps minus children (Angular takes the Android-wrapped scroll view
-// via <ng-content>), declared per-adapter over the shared accessibility base since the framework-specific
-// children slot keeps it from being fully shared across adapters. Read the React reference for the
-// native prop names.
-export interface IAngularRefreshControlProps
-  extends IAccessibilityProps, IAriaProps {
-  refreshing: boolean;
-  // RN's onRefresh is `() => void | Promise<void>`, the handler may be async; the promise is
-  // fire-and-forget (native already starts refreshing on the gesture).
-  onRefresh?: () => void | Promise<void>;
-  tintColor?: string;
-  title?: string;
-  titleColor?: string;
-  progressViewOffset?: number;
-  // Android-only spinner styling (RN RefreshControlPropsAndroid): `colors` are the indicator's
-  // animated stroke colors, `progressBackgroundColor` the disc behind it, `size` the diameter preset.
-  // AndroidSwipeRefreshLayout reads them; PullToRefreshView on iOS ignores unknown props.
-  colors?: readonly string[];
-  progressBackgroundColor?: string;
-  size?: 'default' | 'large';
-  // Android-only native prop forwarded to AndroidSwipeRefreshLayout; iOS native never reads it.
-  enabled?: boolean;
-  // The Android scroll-view wrap injects the layout half of the style onto this host; iOS leaves it
-  // unset (the RefreshControl is a childless sibling). Harmless to forward on both.
-  style?: IStyleProp<IViewStyle>;
-}
-
-// What the RefreshControl component itself takes as plain @Input()s: the full surface minus the
-// refresh/accessibility events, which it exposes as real @Output() EventEmitters instead (mirrors
-// Pressable's IAngularPressableInputs in pressable/index.ts).
-export type IAngularRefreshControlInputs = Omit<
-  IAngularRefreshControlProps,
-  | 'onRefresh'
-  | 'onAccessibilityAction'
-  | 'onAccessibilityTap'
-  | 'onMagicTap'
-  | 'onAccessibilityEscape'
->;
-
-@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()"
-      (refresh)="handleRefresh()"
-    >
-      <ng-content></ng-content>
-    </symbiote-refresh-control>
-  `,
-})
-export class RefreshControl
-  implements
-    IAngularRefreshControlInputs,
-    OnInit,
-    OnChanges,
-    DoCheck,
-    AfterViewInit
-{
-  // Controlled prop the parent owns; required to match the React reference surface.
-  @Input({ required: true }) refreshing!: boolean;
-  // RN's onRefresh is `() => void | Promise<void>`, so the callback shape allows an async handler;
-  // the @Output() itself only signals the gesture (fire-and-forget, native already starts refreshing).
-  @Output() readonly refresh = new EventEmitter<void>();
-  @Input() tintColor?: string;
-  @Input() title?: string;
-  @Input() titleColor?: string;
-  @Input() progressViewOffset?: number;
-  @Input() colors?: readonly string[];
-  @Input() progressBackgroundColor?: string;
-  @Input() size?: 'default' | 'large';
-  @Input() enabled?: boolean;
-  @Input() style?: IStyleProp<IViewStyle>;
-  @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;
-  @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() 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 inner symbiote-refresh-control primitive — NOT this component's own anchor host. Used for
-  // the imperative dispatchViewCommand calls below.
-  @ViewChild('host') private host?: RefreshControlHost;
-
-  // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
-  // onto (see anchorHostStyle's doc comment) — distinct from `host` above, which targets the real
-  // inner `symbiote-refresh-control` primitive one level down.
-  private readonly elementRef = inject(ElementRef);
-
-  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)}`);
-    if (this.enabled !== undefined)
-      dlog(`RefreshControl enabled=${String(this.enabled)} (Android-only)`);
-    if (this.refresh.observed) dlog('RefreshControl refresh listener wired');
-  }
-
-  ngAfterViewInit(): void {
-    this.lastNativeRefreshing = this.refreshing;
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    // Before the `refreshing`-only early-return below: this is the single moment Angular has
-    // finished writing every changed @Input, and `hostProps` depends on the whole input surface.
-    this.hostPropsRevision.update(revision => revision + 1);
-    const refreshing = changes.refreshing;
-    if (refreshing === undefined) return;
-    if (refreshing.firstChange) {
-      this.lastNativeRefreshing = this.refreshing;
-      return;
-    }
-    this.syncNativeRefreshing(
-      this.refreshNativeNode ?? this.host?.nativeElement,
-    );
-  }
-
-  // Native starts the spinner before JS runs. Mirror RN's RefreshControl controlled-component
-  // handshake: remember that native is refreshing, call the user's callback, then after Angular has
-  // had a chance to propagate `[refreshing]`, force native back to the JS value if it stayed false.
-  handleRefresh(nativeNode: unknown = this.host?.nativeElement): void {
-    this.refreshNativeNode = nativeNode;
-    this.lastNativeRefreshing = true;
-    this.refresh.emit();
-    queueMicrotask(() => this.syncNativeRefreshing(nativeNode));
-  }
-
-  private syncNativeRefreshing(nativeNode: unknown): void {
-    if (this.refreshing === this.lastNativeRefreshing) return;
-    if (!isSymbioteNode(nativeNode)) return;
-    dispatchViewCommand(nativeNode, 'setNativeRefreshing', [this.refreshing]);
-    this.lastNativeRefreshing = this.refreshing;
-  }
-
-  // Forward an engine event to the matching @Output(), narrowing the template's untyped $event
-  // first. The accessibility* events arrive on the engine's structural event channel.
-  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`): a template binding here lit the gate on every
-  // instance whether or not an app ever subscribed. `.observed`-gated, mirroring Pressable's.
-  private eventEmitterHandler(
-    emitter: EventEmitter<ISymbioteEvent>,
-  ): ((event: unknown) => void) | undefined {
-    return emitter.observed ? event => this.emit(emitter, event) : undefined;
-  }
-
-  // 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.
-  //
-  // 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,
-      title: this.title,
-      titleColor: this.titleColor,
-      progressViewOffset: this.progressViewOffset,
-      colors: this.colors,
-      progressBackgroundColor: this.progressBackgroundColor,
-      size: this.size,
-      enabled: this.enabled,
-      style: [anchorHostStyle(this.elementRef), this.style],
-      testID: this.testID,
-      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),
-    };
-  });
-
-  // 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<IAngularRefreshControlProps> {
-    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/safe-area-view/index.ts

@@ -1,247 +0,0 @@
-// SafeAreaView, the Angular lifecycle half. A plain view whose native side insets its
-// children to the safe area (notch, rounded corners, system bars). There is no JS-side
-// translation — RN renders the native RCTSafeAreaView and lets the host do the inset math —
-// so this folds aria/role through the shared resolveAccessibilityProps and maps style +
-// a11y + onLayout straight onto the symbiote-safe-area-view host, children via <ng-content>.
-// The Angular twin of the React/Vue SafeAreaView. No platform branch (one Fabric name both
-// platforms), so this stays a flat single file.
-
-import {
-  CUSTOM_ELEMENTS_SCHEMA,
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  ElementRef,
-  EventEmitter,
-  inject,
-  Input,
-  Output,
-  signal,
-  type DoCheck,
-  type OnChanges,
-} from '@angular/core';
-import {
-  resolveAccessibilityProps,
-  type IAccessibilityProps,
-  type IAccessibilityStateValue,
-  type IAriaProps,
-} from '@symbiote-native/components';
-import {
-  isSymbioteEvent,
-  type IStyleProp,
-  type ISymbioteEvent,
-  type IViewStyle,
-} from '@symbiote-native/engine';
-import {
-  anchorHostStyle,
-  SafeAreaViewHost,
-  SymbioteHostPropsDirective,
-  SymbioteStyleInputDirective,
-} from '../../primitives';
-
-// Mirrors React's ISafeAreaViewProps minus children (Angular takes children via <ng-content>),
-// declared per-adapter over the shared accessibility base since the framework-specific children
-// slot keeps it from being fully shared across adapters.
-export interface IAngularSafeAreaViewProps
-  extends IAccessibilityProps, IAriaProps {
-  style?: IStyleProp<IViewStyle>;
-  // `id` — accepted here and folded to `nativeID` by the shared plan, matching upstream, whose
-  // SafeAreaView takes the full ViewProps surface. Added 2026-09-01 with `ID_ALIAS` on the spec
-  // entry, deliberately as ONE change: the alias without this prop would make lowering fold a key
-  // no spelling of the component accepts, and this prop without the alias would send a raw `id` to
-  // Fabric, which declares no such key on any of these views.
-  id?: string;
-  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 IAngularSafeAreaViewInputs = Omit<
-  IAngularSafeAreaViewProps,
-  | 'onLayout'
-  | 'onAccessibilityAction'
-  | 'onAccessibilityTap'
-  | 'onMagicTap'
-  | 'onAccessibilityEscape'
->;
-
-@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()">
-      <ng-content></ng-content>
-    </symbiote-safe-area-view>
-  `,
-})
-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
-  // ANCHOR_HOST_COMPONENTS as transparent to listener lookup, so there is no double-fire.
-  // `layout` plus the four accessibility events are all 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, so a template binding here lit the gate on every
-  // instance whether or not an app ever subscribed. Moved into `hostProps()`'s flat bag below,
-  // `.observed`-gated — the shape `Pressable`'s `accessibilityEmitterHandler` already uses.
-  @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;
-
-  // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
-  // onto (see anchorHostStyle's doc comment). SafeAreaView has no inner ViewChild, so this is
-  // the only ElementRef in the class.
-  private readonly elementRef = inject(ElementRef);
-
-  // Forward an engine event to the matching @Output(), narrowing the untyped event first.
-  private emit(emitter: EventEmitter<ISymbioteEvent>, event: unknown): void {
-    if (isSymbioteEvent(event)) emitter.emit(event);
-  }
-
-  // `.observed`-gated, mirroring Pressable's `accessibilityEmitterHandler`: `undefined` here
-  // means `setEventListener` never sees a function, so the gated prop's flag never lights
-  // (`fabric-boolean-event-gates.md`, "The flag follows the VALUE, not the key").
-  private eventEmitterHandler(
-    emitter: EventEmitter<ISymbioteEvent>,
-  ): ((event: unknown) => void) | undefined {
-    return emitter.observed ? event => this.emit(emitter, event) : undefined;
-  }
-
-  // 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
-  // the host node never sees an aria-* key (native ignores them), same transform React's
-  // 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.
-  //
-  // 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,
-      nativeID: this.nativeID,
-      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,
-      onLayout: this.eventEmitterHandler(this.layout),
-      onAccessibilityAction: this.eventEmitterHandler(this.accessibilityAction),
-      onAccessibilityTap: this.eventEmitterHandler(this.accessibilityTap),
-      onMagicTap: this.eventEmitterHandler(this.magicTap),
-      onAccessibilityEscape: this.eventEmitterHandler(this.accessibilityEscape),
-    });
-  });
-}