@symbiote-native/angular 0.7.0 → 1.0.0

package/src/diagnostics.ts

@@ -0,0 +1,138 @@
+// Per-window counters for the Angular adapter, the twin of the engine's readCommitProfile().
+// The engine's number answers "what did the commit walk cost"; these answer the question one layer
+// up, which is the one Angular keeps losing: HOW MANY TIMES did anything run at all.
+//
+// Angular is the only adapter whose update model can free-run. A change-detection pass that writes
+// a fresh reference into a downstream @Input marks a view dirty, the zoneless scheduler books
+// another pass, and it never settles - the hazard `stableAnchorStyle` and VirtualizedList's
+// `lastRecompute` gate each guard one instance of. A guard that stops holding is INVISIBLE from the
+// outside: the screen paints correctly, only the frame rate collapses. `cdPasses` at rest is what
+// makes it visible, and every other counter here narrows the same window to a suspect.
+//
+// Deliberately NOT gated behind isDebug(): an integer increment is noise next to the work it
+// counts, and the numbers are only meaningful from a RELEASE build (dev-mode Angular runs its own
+// checks and drowns the signal). The per-name detail map IS gated, since it allocates.
+
+export interface IAngularProfile {
+  // Change-detection passes: RendererFactory2.end() runs once per ApplicationRef.tick().
+  cdPasses: number;
+  // Primitive host views (symbiote-view / symbiote-text / ...) Angular actually walked. Divided by
+  // cdPasses this is the SIZE OF THE TREE one tick touches - the number that separates "the list is
+  // expensive" from "every mounted screen is re-checked because a list scrolled". The primitives are
+  // CheckAlways, and a Global tick refreshes every CheckAlways view in the application.
+  viewsChecked: number;
+  // Prop/style/class/text writes that reached the engine. At rest this must be 0: a nonzero idle
+  // value means change detection is rewriting props nothing asked to change.
+  rendererWrites: number;
+  nodesCreated: number;
+  nodesInserted: number;
+  nodesRemoved: number;
+  // The `class` poll every COMPOSED component runs per check (SymbioteStyleInputDirective: Pressable,
+  // ScrollView, Image, the lists...; the raw primitives are counted by `viewsChecked` instead).
+  // `styleMarks` is how often the poll actually found a change and dirtied the view - the ratio is
+  // how much of the polling is wasted, and a nonzero idle `styleMarks` is a free-run engine.
+  styleChecks: number;
+  styleMarks: number;
+  // VirtualizedList: checks vs the ones that got past the `lastRecompute` dedup gate. Recomputes
+  // climbing with checks means the gate is not holding, which is the free-run bug itself.
+  listChecks: number;
+  listRecomputes: number;
+  listMarks: number;
+  // Scroll events the list saw. With sticky headers RN pins scrollEventThrottle to 1, so this is
+  // the frame rate of the gesture and the denominator for everything measured during a drag.
+  scrollTicks: number;
+  // Cell views. `outletUpdates` is the cheap path (context patched in place); `outletCreates` past
+  // the first window means cells are being rebuilt instead of reused, which is the cost CDK's
+  // view-recycling strategy exists to avoid.
+  outletCreates: number;
+  outletUpdates: number;
+  outletDestroys: number;
+  // Sticky projection: schedules are cheap (a Set insert), flushes walk every projected record.
+  projectionSchedules: number;
+  projectionFlushes: number;
+  // A sticky wrapper rebuilt loses its measured layout and costs a native round trip; reuse is the
+  // fixed path. Creates climbing during a plain scroll is the regression this pair pins.
+  stickyWrapperCreates: number;
+  stickyWrapperReuses: number;
+}
+
+type IAngularCounter = keyof IAngularProfile;
+
+function createCounters(): IAngularProfile {
+  return {
+    cdPasses: 0,
+    viewsChecked: 0,
+    rendererWrites: 0,
+    nodesCreated: 0,
+    nodesInserted: 0,
+    nodesRemoved: 0,
+    styleChecks: 0,
+    styleMarks: 0,
+    listChecks: 0,
+    listRecomputes: 0,
+    listMarks: 0,
+    scrollTicks: 0,
+    outletCreates: 0,
+    outletUpdates: 0,
+    outletDestroys: 0,
+    projectionSchedules: 0,
+    projectionFlushes: 0,
+    stickyWrapperCreates: 0,
+    stickyWrapperReuses: 0,
+  };
+}
+
+let counters = createCounters();
+
+export function countAngular(counter: IAngularCounter): void {
+  counters[counter] += 1;
+}
+
+// Reading zeroes the counters, so a sampler on an interval gets disjoint windows rather than a
+// growing total - same contract as readCommitProfile().
+export function readAngularProfile(): IAngularProfile {
+  const snapshot = counters;
+  counters = createCounters();
+  return snapshot;
+}
+
+// Which prop names the renderer actually rewrites, and which host tags get created. Off by default
+// because it allocates per write; the probe screen turns it on for one sample. A write nothing
+// asked for is the whole diagnosis, and the prop NAME is what points at the binding responsible.
+let isDetailEnabled = false;
+const writesByProp = new Map<string, number>();
+const createsByTag = new Map<string, number>();
+
+export function setAngularProfileDetail(enabled: boolean): void {
+  isDetailEnabled = enabled;
+  if (!enabled) {
+    writesByProp.clear();
+    createsByTag.clear();
+  }
+}
+
+export function noteAngularWrite(propName: string): void {
+  if (!isDetailEnabled) return;
+  writesByProp.set(propName, (writesByProp.get(propName) ?? 0) + 1);
+}
+
+export function noteAngularCreate(tagName: string): void {
+  if (!isDetailEnabled) return;
+  createsByTag.set(tagName, (createsByTag.get(tagName) ?? 0) + 1);
+}
+
+export interface IAngularProfileDetail {
+  writesByProp: readonly (readonly [string, number])[];
+  createsByTag: readonly (readonly [string, number])[];
+}
+
+// Sorted hottest-first and read-and-cleared, so a sample names its own top offenders.
+export function readAngularProfileDetail(): IAngularProfileDetail {
+  const detail = {
+    writesByProp: [...writesByProp.entries()].sort((a, b) => b[1] - a[1]),
+    createsByTag: [...createsByTag.entries()].sort((a, b) => b[1] - a[1]),
+  };
+  writesByProp.clear();
+  createsByTag.clear();
+  return detail;
+}

package/src/gate-demand.ts

@@ -0,0 +1,109 @@
+// Whether anything downstream actually wants a gated accessibility event, passed from a wrapper
+// component to the inner component that owns the gate.
+//
+// THE PROBLEM. Six Fabric events fire only if a BOOLEAN prop reaches the payload
+// (`.claude/rules/fabric-boolean-event-gates.md`), and the flag follows the VALUE: a handler
+// present means `true`, absent means the key is deleted. Every component that owns such a gate
+// therefore writes it only while its own `@Output()` is `.observed`.
+//
+// Angular has no conditional template binding, so a wrapper rendering an inner component must write
+// `(accessibilityAction)="accessibilityAction.emit($event)"` unconditionally — which subscribes,
+// which makes the inner's `.observed` permanently true, which lights the flag on EVERY instance
+// whether or not any app listens. Fixing the inner component does nothing: the wrapper is the
+// subscriber. The chain is up to four deep here (SectionList -> VirtualizedSectionList ->
+// VirtualizedList -> ScrollView), and every middle link has the same problem for the same reason.
+//
+// WHY THIS IS DI AND NOT AN `@Input`. An input is public API. An app could write
+// `[gatedEvents]="…"` on a `Pressable` and silently switch its accessibility events OFF — a change
+// nothing in this repo could detect and nothing on screen would show. A `viewProviders` entry is
+// not part of the component's binding surface, so an app cannot reach it by accident.
+//
+// WHY `viewProviders` AND NOT `providers` — measured, both arms, 2026-09-02:
+//
+//   viewProviders   the wrapper's OWN template sees it, projected content does NOT
+//   providers       both see it
+//
+// The second half is what matters: an app writing `<TouchableOpacity><Pressable/></TouchableOpacity>`
+// projects its own Pressable INTO the wrapper, and that Pressable must behave exactly as it would
+// standing alone. Under `providers` it would inherit the wrapper's demand and the debt would just
+// move one level down.
+//
+// Verified on both rungs — JIT through `mount()`, and again by executing the artifact from a real
+// `ngc --compilationMode partial` + `babel-linker.cjs` chain, because `viewProviders` compiles into
+// the component definition (`ɵɵProvidersFeature`) and this repo has a recorded case of JIT and AOT
+// disagreeing on a compiled binding (`.claude/rules/test-harness-false-greens.md` §21/§21a). Both
+// arms reported the same four cells.
+import {
+  EventEmitter,
+  InjectionToken,
+  forwardRef,
+  inject,
+} from '@angular/core';
+import type { Provider, Type } from '@angular/core';
+import type { ISymbioteEvent } from '@symbiote-native/engine';
+
+// The four `on*`-gated accessibility events every wrapper forwards. Not the full gate list from the
+// engine: `layout` and `textLayout` are never forwarded wrapper-to-wrapper, and
+// KeyboardAvoidingView READS its own `onLayout` internally, so gating that one on a subscriber
+// would break inset-following (`.claude/rules/keyboard-avoiding-view-rn-contract.md`).
+export const GATED_ACCESSIBILITY_EVENTS = [
+  'accessibilityAction',
+  'accessibilityTap',
+  'magicTap',
+  'accessibilityEscape',
+] as const;
+
+export type IGatedAccessibilityEvent =
+  (typeof GATED_ACCESSIBILITY_EVENTS)[number];
+
+export interface IGateDemand {
+  wantsGate(name: IGatedAccessibilityEvent): boolean;
+}
+
+export const GATE_DEMAND = new InjectionToken<IGateDemand>(
+  'symbiote.gate-demand',
+);
+
+/**
+ * Declare a wrapper as the demand for everything in its own template.
+ *
+ * Takes a THUNK rather than the class: the entry sits in the decorator of the very class it names,
+ * so the reference has to be late.
+ */
+export function provideGateDemand(get: () => Type<IGateDemand>): Provider {
+  return { provide: GATE_DEMAND, useExisting: forwardRef(get) };
+}
+
+/**
+ * For a component that OWNS a gate — the innermost one, which writes the flag.
+ */
+export function injectGateDemand(): IGateDemand | null {
+  return inject(GATE_DEMAND, { optional: true });
+}
+
+/**
+ * For a component that PROVIDES demand and is itself wrapped.
+ *
+ * `skipSelf` is not optional here: a component resolves its own `viewProviders`, so without it the
+ * lookup reaches this class's own `useExisting` entry and Angular throws NG0200 at construction.
+ * Loud rather than silent, but the shape is easy to get wrong, which is why the two lookups are
+ * separate functions instead of one with a flag.
+ */
+export function injectGateDemandAbove(): IGateDemand | null {
+  return inject(GATE_DEMAND, { optional: true, skipSelf: true });
+}
+
+/**
+ * The one expression both roles evaluate.
+ *
+ * A demand from above OVERRIDES the local emitter, and that override is the whole mechanism: a
+ * middle link's own emitter is `.observed` precisely because the level above bound it, so answering
+ * from it would report "wanted" for a chain nobody subscribed to.
+ */
+export function gateWanted(
+  above: IGateDemand | null,
+  name: IGatedAccessibilityEvent,
+  own: EventEmitter<ISymbioteEvent>,
+): boolean {
+  return above !== null ? above.wantsGate(name) : own.observed;
+}

package/src/host-instance/index.ts

@@ -13,14 +13,19 @@
 // An uncommitted or unknown input surfaces as null.
 
 import { ElementRef } from '@angular/core';
-import { getNativeTag, isSymbioteNode, type ISymbioteNode } from '@symbiote-native/engine';
+import {
+  getNativeTag,
+  isSymbioteNode,
+  type ISymbioteNode,
+} from '@symbiote-native/engine';
 
 export type { IHostInstance } from '@symbiote-native/engine';
 
 function resolveHostNode(candidate: unknown): ISymbioteNode | null {
   if (candidate === null || candidate === undefined) return null;
   if (isSymbioteNode(candidate)) return candidate;
-  if (candidate instanceof ElementRef) return resolveHostNode(candidate.nativeElement);
+  if (candidate instanceof ElementRef)
+    return resolveHostNode(candidate.nativeElement);
   const maybeHost = candidate as { nativeElement?: unknown };
   if (typeof maybeHost.nativeElement !== 'undefined') {
     return resolveHostNode(maybeHost.nativeElement);
@@ -29,7 +34,8 @@ function resolveHostNode(candidate: unknown): ISymbioteNode | null {
 }
 
 export function findNodeHandle(componentOrHandle: unknown): number | null {
-  if (componentOrHandle === null || componentOrHandle === undefined) return null;
+  if (componentOrHandle === null || componentOrHandle === undefined)
+    return null;
   if (typeof componentOrHandle === 'number') return componentOrHandle;
   const node = resolveHostNode(componentOrHandle);
   return node ? (getNativeTag(node) ?? null) : null;

package/src/index.ts

@@ -5,6 +5,8 @@
 // SEAM SCAFFOLD: mount/unmount + the renderer seam + host intrinsic selectors. Full RN-like
 // composed components still flow through the shared @symbiote-native/components bridge.
 
+import './register';
+
 export {
   ActivityIndicator,
   anchorHostStyle,
@@ -61,6 +63,16 @@ export {
   AnimatedText,
   AnimatedView,
 } from './modules/animated';
+// Exported even though Angular's version maps only the four primitives (View/Text/Image/
+// ScrollView) onto the pre-authored wrappers above and THROWS on anything else — there is no JIT
+// under AOT/Metro, so it cannot synthesize a wrapper at runtime the way the other four adapters
+// do. It ships anyway because portable code (`createAnimatedComponent(View)`) then compiles and
+// runs identically on all five adapters, and the one case Angular cannot serve fails with a
+// message naming the fix (author a standalone @Component over AnimatedComponentBase) instead of
+// failing as a missing export, which names nothing. Found by the barrel audit in
+// `.claude/rules/adapter-parity-audit.md`: it was implemented and tested here all along and simply
+// never reached this file, so `@symbiote-native/angular` consumers could not reach it at all.
+export { createAnimatedComponent } from './modules/animated';
 export type {
   IActivityIndicatorProps,
   IAngularImageBackgroundProps,
@@ -135,7 +147,12 @@ export { DescriptorOutlet } from './descriptor-to-angular';
 // idiom) parameterized by an `@Input()`, rather than a factory returning fresh components per
 // call.
 export { PortalDirective, PortalOutletDirective } from './create-portal';
-export { createTunnel, TunnelInDirective, TunnelOut, type ITunnelStore } from './create-tunnel';
+export {
+  createTunnel,
+  TunnelInDirective,
+  TunnelOut,
+  type ITunnelStore,
+} from './create-tunnel';
 export { SymbioteRenderer, SymbioteRendererFactory } from './renderer';
 // registerComposedComponent lives in the dependency-free leaf ./anchor-host-registry, NOT in the
 // require-cyclic ./renderer — see the leaf header. The babel-register-composed plugin injects the
@@ -258,7 +275,11 @@ export {
   setNativeViewConfigSource,
   StyleSheet,
 } from '@symbiote-native/engine';
-export type { IRootTag, ISymbioteEvent, ISymbioteNode } from '@symbiote-native/engine';
+export type {
+  IRootTag,
+  ISymbioteEvent,
+  ISymbioteNode,
+} from '@symbiote-native/engine';
 // The agnostic style / platform / view-config types behind the values above. Angular takes its
 // component props as @Input()s and exports no per-component prop type, but an app still needs
 // these to type a style object or a Platform.select spec.
@@ -288,3 +309,13 @@ export type {
   IPressableAndroidRippleConfig,
   IImageStatics,
 } from '@symbiote-native/components';
+
+// Diagnostics: per-window Angular-side counters (change-detection passes, renderer writes, list
+// recomputes, cell views). The engine's readCommitProfile() prices the commit; these say how many
+// times anything ran at all - the number that exposes a change-detection free-run.
+export {
+  readAngularProfile,
+  readAngularProfileDetail,
+  setAngularProfileDetail,
+} from './diagnostics';
+export type { IAngularProfile, IAngularProfileDetail } from './diagnostics';

package/src/modules/animated/create-animated-component.ts

@@ -53,8 +53,10 @@ import {
   IMAGE_INPUTS,
   IMAGE_OUTPUTS,
   ImageBase,
+  isImageEventCallback,
   resolveImageProps,
 } from '../../components/image/shared';
+import type { IGatedAccessibilityEvent } from '../../gate-demand';
 import { SectionList } from '../../components/section-list';
 import { AnimatedLeafBinder } from './animated-leaf-binder';
 
@@ -69,7 +71,11 @@ const PASSTHROUGH_PROP = 'passthroughAnimatedPropExplicitValues';
 // plus static host props to forward (the React/Vue `rest`). Each concrete @Component re-lists
 // these (Angular's inputs-on-base convention, mirroring Switch/Image).
 export const ANIMATED_INPUTS = ['style', 'animatedProps', PASSTHROUGH_PROP];
-export const ANIMATED_IMAGE_INPUTS = [...IMAGE_INPUTS, 'animatedProps', PASSTHROUGH_PROP];
+export const ANIMATED_IMAGE_INPUTS = [
+  ...IMAGE_INPUTS,
+  'animatedProps',
+  PASSTHROUGH_PROP,
+];
 
 // The shared lifecycle for every animated wrapper. Concrete subclasses add ONLY a @Component
 // decorator (selector + the host-primitive template) — no behavior. Plain fields (no @Input
@@ -92,7 +98,8 @@ export abstract class AnimatedComponentBase
 
   // The directive sitting on the inner host primitive; its `node` is the committed SymbioteNode
   // the leaf binds to. Inherited by the decorated subclass (Angular collects base-class queries).
-  @ViewChild(SymbioteHostPropsDirective) private hostDirective?: SymbioteHostPropsDirective;
+  @ViewChild(SymbioteHostPropsDirective)
+  private hostDirective?: SymbioteHostPropsDirective;
 
   // The leaf-lifecycle orchestration (build/attach/swap/bind/detach an AnimatedProps leaf) is a
   // Pure Fabrication shared with AnimatedImage, which cannot extend this class (it must extend
@@ -110,10 +117,14 @@ export abstract class AnimatedComponentBase
   // array, which the commit layer flattens) so the ShadowTree carries the current transform.
   get reducedProps(): Record<string, unknown> {
     const reduced = reduceProps(this.mergedProps());
-    const passthroughStyle = readPassthroughStyle(this.passthroughAnimatedPropExplicitValues);
+    const passthroughStyle = readPassthroughStyle(
+      this.passthroughAnimatedPropExplicitValues,
+    );
     if (passthroughStyle !== undefined) {
       reduced['style'] =
-        reduced['style'] === undefined ? passthroughStyle : [reduced['style'], passthroughStyle];
+        reduced['style'] === undefined
+          ? passthroughStyle
+          : [reduced['style'], passthroughStyle];
     }
     reduced['style'] = [this.anchorStyle(), reduced['style']];
     return reduced;
@@ -162,7 +173,8 @@ export abstract class AnimatedComponentBase
     const hasPassthroughAnimatedValues =
       this.passthroughAnimatedPropExplicitValues !== null &&
       this.passthroughAnimatedPropExplicitValues !== undefined;
-    const wantsNative = hasPassthroughAnimatedValues && isNativeAnimatedAvailable();
+    const wantsNative =
+      hasPassthroughAnimatedValues && isNativeAnimatedAvailable();
     this.leafBinder.reconcile(props, wantsNative);
   }
 
@@ -171,7 +183,9 @@ export abstract class AnimatedComponentBase
   // never disagree.
   private mergedProps(): Record<string, unknown> {
     const base = this.animatedProps ?? {};
-    return this.style === undefined ? { ...base } : { ...base, style: this.style };
+    return this.style === undefined
+      ? { ...base }
+      : { ...base, style: this.style };
   }
 
   // The committed host node held by IDENTITY. resolveHostNode unwraps an imperative scroll
@@ -186,7 +200,9 @@ export abstract class AnimatedComponentBase
 @Component({
   selector: 'AnimatedView, symbiote-animated-view',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [SymbioteHostPropsDirective, ViewHost],
   inputs: ANIMATED_INPUTS,
@@ -202,7 +218,9 @@ export class AnimatedView extends AnimatedComponentBase {}
 @Component({
   selector: 'AnimatedText, symbiote-animated-text',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [SymbioteHostPropsDirective, TextHost],
   inputs: ANIMATED_INPUTS,
@@ -218,7 +236,9 @@ export class AnimatedText extends AnimatedComponentBase {}
 @Component({
   selector: 'AnimatedImage, symbiote-animated-image',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [SymbioteHostPropsDirective, ImageHost],
   inputs: ANIMATED_IMAGE_INPUTS,
@@ -226,10 +246,6 @@ export class AnimatedText extends AnimatedComponentBase {}
   template: `
     <symbiote-image
       [symbioteHostProps]="animatedImageProps"
-      (accessibilityAction)="handleAccessibilityAction($event)"
-      (accessibilityTap)="handleAccessibilityTap($event)"
-      (magicTap)="handleMagicTap($event)"
-      (accessibilityEscape)="handleAccessibilityEscape($event)"
       (loadStart)="handleLoadStart($event)"
       (load)="handleLoad($event)"
       (loadEnd)="handleLoadEnd($event)"
@@ -242,7 +258,10 @@ export class AnimatedText extends AnimatedComponentBase {}
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AnimatedImage extends ImageBase implements AfterViewInit, OnChanges, OnDestroy {
+export class AnimatedImage
+  extends ImageBase
+  implements AfterViewInit, OnChanges, OnDestroy
+{
   animatedProps: Record<string, unknown> | undefined;
   passthroughAnimatedPropExplicitValues: unknown;
 
@@ -250,7 +269,8 @@ export class AnimatedImage extends ImageBase implements AfterViewInit, OnChanges
   // comment on AnimatedComponentBase.elementRef.
   private readonly elementRef = inject(ElementRef);
 
-  @ViewChild(SymbioteHostPropsDirective) private hostDirective?: SymbioteHostPropsDirective;
+  @ViewChild(SymbioteHostPropsDirective)
+  private hostDirective?: SymbioteHostPropsDirective;
 
   // Same Pure Fabrication AnimatedComponentBase holds — see its matching comment. AnimatedImage
   // can't extend AnimatedComponentBase (it must extend ImageBase, see the file header), so it
@@ -261,15 +281,40 @@ export class AnimatedImage extends ImageBase implements AfterViewInit, OnChanges
   );
   private viewReady = false;
 
+  private gateInto(
+    props: Record<string, unknown>,
+    name: IGatedAccessibilityEvent,
+    key: string,
+  ): void {
+    const carried = props[key];
+    props[key] = this.gatedAccessibilityHandler(
+      name,
+      isImageEventCallback(carried) ? carried : undefined,
+    );
+  }
+
   get animatedImageProps(): Record<string, unknown> {
     const reduced = reduceProps(this.mergedProps());
-    const passthroughStyle = readPassthroughStyle(this.passthroughAnimatedPropExplicitValues);
+    const passthroughStyle = readPassthroughStyle(
+      this.passthroughAnimatedPropExplicitValues,
+    );
     if (passthroughStyle !== undefined) {
       reduced['style'] =
-        reduced['style'] === undefined ? passthroughStyle : [reduced['style'], passthroughStyle];
+        reduced['style'] === undefined
+          ? passthroughStyle
+          : [reduced['style'], passthroughStyle];
     }
     const resolved = resolveImageProps(reduced);
     resolved['style'] = [anchorHostStyle(this.elementRef), resolved['style']];
+    // The four gated accessibility events, which used to be template bindings on the host tag and
+    // therefore lit their Fabric flags on every AnimatedImage in the app
+    // (`.claude/rules/fabric-boolean-event-gates.md`). Routed through the base's gate instead, so
+    // both channels still reach the app — the `onX` callback carried in the animated prop bag, and
+    // the `@Output()` an app may bind on <AnimatedImage> (IMAGE_OUTPUTS declares all four).
+    this.gateInto(resolved, 'accessibilityAction', 'onAccessibilityAction');
+    this.gateInto(resolved, 'accessibilityTap', 'onAccessibilityTap');
+    this.gateInto(resolved, 'magicTap', 'onMagicTap');
+    this.gateInto(resolved, 'accessibilityEscape', 'onAccessibilityEscape');
     return resolved;
   }
 
@@ -311,7 +356,8 @@ export class AnimatedImage extends ImageBase implements AfterViewInit, OnChanges
     const hasPassthroughAnimatedValues =
       this.passthroughAnimatedPropExplicitValues !== null &&
       this.passthroughAnimatedPropExplicitValues !== undefined;
-    const wantsNative = hasPassthroughAnimatedValues && isNativeAnimatedAvailable();
+    const wantsNative =
+      hasPassthroughAnimatedValues && isNativeAnimatedAvailable();
     this.leafBinder.reconcile(props, wantsNative);
   }
 
@@ -332,7 +378,9 @@ export class AnimatedImage extends ImageBase implements AfterViewInit, OnChanges
 @Component({
   selector: 'AnimatedScrollView, symbiote-animated-scroll-view',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [SymbioteHostPropsDirective, ScrollViewHost],
   inputs: ANIMATED_INPUTS,

package/src/modules/app-registry/index.ts

@@ -23,7 +23,9 @@ export type IComponentProvider = () => Type<unknown>;
 // a pre-authored standalone @Component whose template renders `<ng-content>` — the Angular idiom
 // for "render my children" (mount() projects the root's host node into it, the twin of React's
 // createElement(Wrapper, null, rootElement)).
-export type IWrapperComponentProvider = (appParameters: IAppParameters) => Type<unknown>;
+export type IWrapperComponentProvider = (
+  appParameters: IAppParameters,
+) => Type<unknown>;
 
 function runnableFor(
   componentProvider: IComponentProvider,

package/src/modules/status-bar/index.ts

@@ -5,7 +5,12 @@
 // ngOnChanges on mount + every prop change. Imperative statics are attached to the component
 // object the same way RN does.
 
-import { Component, Input, type OnChanges, type SimpleChanges } from '@angular/core';
+import {
+  Component,
+  Input,
+  type OnChanges,
+  type SimpleChanges,
+} from '@angular/core';
 import {
   applyStatusBarProps,
   statusBarImperative,
@@ -46,12 +51,16 @@ class StatusBarComponent implements OnChanges {
   }
 }
 
-const StatusBarWithStatics = Object.assign(StatusBarComponent, statusBarImperative);
+const StatusBarWithStatics = Object.assign(
+  StatusBarComponent,
+  statusBarImperative,
+);
 
 Object.defineProperty(StatusBarWithStatics, 'currentHeight', {
   get: statusBarCurrentHeight,
   enumerable: true,
 });
 
-export const StatusBar: typeof StatusBarWithStatics & { readonly currentHeight?: number } =
-  StatusBarWithStatics;
+export const StatusBar: typeof StatusBarWithStatics & {
+  readonly currentHeight?: number;
+} = StatusBarWithStatics;