@symbiote-native/angular 0.8.0 → 2.0.0

package/src/change-detection-flush.ts

@@ -0,0 +1,120 @@
+// A dependency-free LEAF so `renderer/index.ts` can ask a view to re-check itself without importing
+// the element directives, which import the renderer (same reasoning as `renderer/value-change.ts`
+// and `anchor-host-registry.ts`).
+//
+// WHY ANYTHING IS NEEDED. Zoneless change detection is scheduled on a
+// requestAnimationFrame/setTimeout RACE (`ChangeDetectionSchedulerImpl`, upstream
+// `zoneless_scheduling_impl.ts`), so an app's state update from a native event lands a whole
+// MACROTASK later. A bound template listener DOES notify Angular — that is one of the documented
+// notification sources — so nothing is missing; what is wrong is the TIMING. Three engine behaviors
+// read the app's answer back within the same MICROTASK turn:
+//
+//   behaviors/text-input.ts       `afterCommit` re-commands the native text from `props.value`
+//   behaviors/switch.ts           `queueMicrotask` snap-back reads `props.value`
+//   behaviors/refresh-control.ts  `queueMicrotask` snap-back reads `props.refreshing`
+//
+// Every other adapter's state update lands inside that turn; zoneless Angular cannot, so all three
+// read the PRE-event value and UNDO the user. Device-reported 2026-09-11: `[(value)]` on a
+// `<text-input>` commanded the stale text back after one keystroke, a `[(value)]` `<switch>` snapped
+// straight off again, and pull-to-refresh stopped itself.
+//
+// WHY `ChangeDetectorRef.detectChanges()` AND NOT `ApplicationRef.tick()`. Both re-evaluate the
+// binding; only one of them is safe to call from a native event. `tick()` emits `afterTick`
+// UNCONDITIONALLY — `dirtyFlags === 0` included — and the scheduler's `afterTick` subscriber runs
+// `switchToMicrotaskScheduler`, which sets `useMicrotaskScheduler` for the rest of the turn. Every
+// notification raised while that flag is set is counted by `trackMicrotaskNotificationForDebugging`
+// against `CONSECUTIVE_MICROTASK_NOTIFICATION_LIMIT` (100), and the ONLY reset is a notification
+// raised while it is clear. A commit can dispatch further events (`onLayout`), each of which
+// notifies, so forcing a tick per native event turns that into NG0103, "Angular could not stabilize
+// because there were endless change notifications" — device-reported the same day, on the first fix
+// for the paragraph above. `ViewRef.detectChanges()` sets `RefreshView` and calls
+// `detectChangesInternal` (upstream `render3/view_ref.ts`): no `afterTick`, no scheduler
+// notification, so it cannot open that window at all. It is also the narrower answer — the only
+// view that has to be re-checked is the one holding the binding.
+//
+// The flush is registered by the element DIRECTIVE, which is the only thing here that owns a
+// `ChangeDetectorRef` for that view. A tag written under `CUSTOM_ELEMENTS_SCHEMA` with no directive
+// matched therefore gets no flush and keeps the stale-read behaviour — the directive is the
+// supported route (`[(value)]` is NG8007 without it), and this leaf has no way to reach a view it
+// was never handed.
+//
+// When a fourth behavior starts reading an app value back, it needs a name in the renderer's
+// `READ_BACK_*` sets — the census is `queueMicrotask` / `afterCommit` in
+// `core/components/src/behaviors`.
+const viewFlushes = new WeakMap<object, () => void>();
+
+const ON_PREFIX = /^on[A-Z]/;
+
+// The one `onX` that fires per FRAME rather than per gesture — with sticky headers RN pins
+// `scrollEventThrottle` to 1, i.e. 60 times a second. `markForCheck` walks to the ROOT, so wrapping
+// it costs a full ancestor-screen template execution per frame: measured as the canary's ~37fps
+// scroll (`components/virtualized-list/scroll-cost.test.ts`). Nothing loses its refresh — the list
+// marks itself when its window moves, sticky rides the native driver, and a caller's own handler is
+// typically an Animated.event touching no Angular state. Drag and momentum begin/end stay wrapped;
+// once per gesture is not a hot path.
+const PER_FRAME_CALLBACK = 'onScroll';
+
+interface IViewMarker {
+  markForCheck(): void;
+}
+
+type ICallbackWrapper = (key: string, value: unknown) => unknown;
+
+/**
+ * Makes an app callback handed to the engine as a PROP re-enter Angular's update loop.
+ *
+ * An `(event)` binding is wrapped by Angular's own `wrapListenerIn_markDirtyAndPreventDefault` and
+ * notifies on its own. A `[onPressMove]="fn"` prop is an `@Input` forwarded to the node, and the
+ * ENGINE calls it on event dispatch — Angular is told NOTHING, so a plain field mutation inside it
+ * dirties no view and the template reading it stays stale until something unrelated ticks.
+ * Device-reported 2026-09-11: a pan readout stuck at `dx 0 · dy 0` for a whole gesture, its real
+ * numbers arriving on the next button press.
+ *
+ * `markForCheck()` is one of the two notification sources Angular sanctions for an event source
+ * outside the framework (the other is writing a signal the template reads, which an ADAPTER cannot
+ * choose on the app's behalf). It flags the INJECTING view and every ancestor with RefreshView —
+ * the reach `detectChanges()` does not have — and notifies the scheduler.
+ *
+ * `flushViewFor` is the second, narrower half: three behaviors read the app's answer back inside
+ * the SAME microtask turn, and `markForCheck` only SCHEDULES. It is a no-op on a node that
+ * registered no flush.
+ *
+ * ONE wrapper per original handler, for the caller's lifetime. A fresh closure per push would make
+ * the engine store a new listener every time and would defeat every downstream identity check.
+ */
+export function createCallbackWrapper(
+  view: IViewMarker,
+  node: unknown,
+): ICallbackWrapper {
+  const wrappers = new WeakMap<object, (...args: unknown[]) => unknown>();
+  return (key: string, value: unknown): unknown => {
+    if (!ON_PREFIX.test(key) || typeof value !== 'function') return value;
+    if (key === PER_FRAME_CALLBACK) return value;
+    const cached = wrappers.get(value);
+    if (cached !== undefined) return cached;
+    // Reflect.apply rather than a cast-to-signature local: `typeof value === 'function'` narrows to
+    // `Function`, which carries no call signature, and this repo does not use `as` to paper over it.
+    // `undefined` as the receiver preserves the previous unbound call.
+    const wrapper = (...args: unknown[]): unknown => {
+      const result: unknown = Reflect.apply(value, undefined, args);
+      view.markForCheck();
+      flushViewFor(node);
+      return result;
+    };
+    wrappers.set(value, wrapper);
+    return wrapper;
+  };
+}
+
+export function registerViewFlush(node: object, flush: () => void): void {
+  viewFlushes.set(node, flush);
+}
+
+export function unregisterViewFlush(node: object): void {
+  viewFlushes.delete(node);
+}
+
+export function flushViewFor(node: unknown): void {
+  if (typeof node !== 'object' || node === null) return;
+  viewFlushes.get(node)?.();
+}

package/src/components/activity-indicator-props.ts

@@ -0,0 +1,21 @@
+// The prop surface of `<activity-indicator>`, for Angular.
+//
+// No component left to type — the element IS the tag, matched by `ActivityIndicatorElement`
+// (`../elements.ts`). RN's ActivityIndicator is a centering `<view>` around a native spinner
+// (ActivityIndicator.js:112) and takes no children, and the engine behavior now builds both nodes
+// (`core/components/src/behaviors/activity-indicator/`). This stays exported because an app that
+// wraps the tag in its own component types the bag it forwards against something.
+//
+// The five callbacks are omitted for the reason every Angular element type omits them: they are
+// `(layout)` / `(accessibilityAction)` / … OUTPUT bindings here, not inputs. Everything else is the
+// shared agnostic surface, re-exported rather than redeclared.
+import type { IActivityIndicatorProps as ICoreActivityIndicatorProps } from '@symbiote-native/components';
+
+export type IActivityIndicatorProps = Omit<
+  ICoreActivityIndicatorProps,
+  | 'onLayout'
+  | 'onAccessibilityAction'
+  | 'onAccessibilityTap'
+  | 'onMagicTap'
+  | 'onAccessibilityEscape'
+>;

package/src/components/button-props.ts

@@ -0,0 +1,26 @@
+// The prop surface of `<button>`, for Angular.
+//
+// No component left to type — the element IS the tag, matched by `ButtonElement`
+// (`../elements.ts`). RN's Button takes no children (`title` is a string prop, Button.js:363) and
+// builds its own touchable > view > text subtree, which the engine behavior now builds instead
+// (`core/components/src/behaviors/button.ts`). This stays exported because an app that wraps the
+// tag in its own component types the bag it forwards against something.
+//
+// The five callbacks are omitted for the reason every Angular element type omits them: they are
+// `(press)` / `(accessibilityAction)` / … OUTPUT bindings here, not inputs. Everything else is the
+// shared agnostic surface, re-exported rather than redeclared.
+//
+// `ButtonElement` inherits the touchable's own inputs (`android_ripple`, `delayLongPress`,
+// `activeOpacity`, …) because it extends `TouchableOpacityElement`. That is the element class, not
+// this contract: RN's Button declares none of them, so they stay out of the type an app writes
+// against.
+import type { IButtonProps as ICoreButtonProps } from '@symbiote-native/components';
+
+export type IButtonProps = Omit<
+  ICoreButtonProps,
+  | 'onPress'
+  | 'onAccessibilityAction'
+  | 'onAccessibilityTap'
+  | 'onMagicTap'
+  | 'onAccessibilityEscape'
+>;

package/src/components/flat-list/index.ts

@@ -226,20 +226,21 @@ export type IFlatListInputs<ItemT> = Omit<
         [scrollEventThrottle]="scrollEventThrottle"
         [keyboardShouldPersistTaps]="keyboardShouldPersistTaps"
         [keyboardDismissMode]="keyboardDismissMode"
+        [testID]="testID"
         [style]="resolvedStyle"
         [contentContainerStyle]="contentContainerStyle"
       >
         <ng-template vListItem let-row let-separators="separators">
-          <symbiote-view [style]="rowStyle">
+          <view [style]="rowStyle">
             @for (cell of rowCells(row, separators); track cell.key) {
-              <symbiote-view [style]="columnCellStyle">
+              <view [style]="columnCellStyle">
                 <ng-container
                   [vListOutlet]="itemDir?.templateRef"
                   [vListOutletContext]="cell.context"
                 ></ng-container>
-              </symbiote-view>
+              </view>
             }
-          </symbiote-view>
+          </view>
         </ng-template>
         @if (headerDir !== undefined) {
           <ng-template vListHeader>
@@ -309,6 +310,7 @@ export type IFlatListInputs<ItemT> = Omit<
         [scrollEventThrottle]="scrollEventThrottle"
         [keyboardShouldPersistTaps]="keyboardShouldPersistTaps"
         [keyboardDismissMode]="keyboardDismissMode"
+        [testID]="testID"
         [style]="resolvedStyle"
         [contentContainerStyle]="contentContainerStyle"
       >
@@ -379,6 +381,12 @@ export class FlatList<ItemT = unknown>
     averageItemLength: number;
   }>();
   @Input({ required: true }) data!: readonly ItemT[];
+  // RN's FlatList spreads its props onto the VirtualizedList it renders, so `testID` lands on the
+  // scroll view. Angular has no spread, and this one was simply missing: `<FlatList testID="x">`
+  // compiled (a static attribute on a component tag is never checked), reached the non-painting
+  // anchor host, and committed nowhere — so the list was untargetable by a test or an e2e selector
+  // while looking perfectly healthy on screen. VirtualizedList has always declared it.
+  @Input() testID?: string;
   @Input() numColumns?: number;
   @Input() columnWrapperStyle?: IStyleProp<IViewStyle> | string;
   @Input() keyExtractor?: (item: ItemT, index: number) => string;

package/src/components/image-background-props.ts

@@ -0,0 +1,24 @@
+// The prop surface of `<image-background>`, for Angular.
+//
+// No component left to type — the element IS the tag; the composition lives in the engine behavior
+// (`core/components/src/behaviors/image-background.ts`). This stays exported because an app that
+// wraps the tag in its own component types the bag it forwards against something, and because
+// `elements.ts` indexes the element directive's input types off it.
+//
+// PER-ADAPTER, not shared: Angular takes children via `<ng-content>` and its class binding is the
+// framework's own (<prop_types_split_agnostic_vs_per_adapter>).
+import type { IImageProps } from '@symbiote-native/components';
+import type { IStyleProp, IViewStyle } from '@symbiote-native/engine';
+
+export interface IAngularImageBackgroundProps extends Omit<
+  IImageProps,
+  'style'
+> {
+  // The wrapper View's style; its width/height are reapplied to the inner Image so the image fills
+  // the box rather than collapsing to its source's intrinsic size. Bound through Angular's own
+  // styling engine, so `elements.ts` excludes it from the directive's inputs like every other tag.
+  style?: IStyleProp<IViewStyle>;
+  // Style merged onto the inner absolute-fill Image, after the proxied dimensions. A bare string
+  // is a class name and resolves through the shared style registry.
+  imageStyle?: IStyleProp<IViewStyle> | string;
+}

package/src/components/{image/shared.ts → image-shared.ts}

@@ -1,4 +1,14 @@
+// The input surface and prop fold `AnimatedImage` builds on. The `Image` COMPONENT that used to
+// share it is gone (2026-09-10) — the primitive is the `<image>` tag, matched by `ImageElement`,
+// and `registerImageBehavior` folds its source on that path. `Animated.Image` is not a primitive
+// and stays a component, so what it needs from here survived the deletion; the folder collapsed to
+// this one flat file with it (`symbiote-file-layout`).
 import { EventEmitter, computed, signal } from '@angular/core';
+import {
+  gateWanted,
+  injectGateDemand,
+  type IGatedAccessibilityEvent,
+} from '../gate-demand';
 import {
   imageStatics,
   renderImage,
@@ -162,6 +172,14 @@ function asStyle(value: unknown): IStyleProp<IViewStyle> | undefined {
   return typeof value === 'object' && value !== null ? value : undefined;
 }
 
+// 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> {
@@ -382,28 +400,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 {
@@ -499,10 +521,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/input-accessory-view-props.ts

@@ -0,0 +1,21 @@
+// The `<input-accessory-view>` tag's prop surface. The tag is matched by
+// `InputAccessoryViewElement` (`../elements`) and commits one `RCTInputAccessoryView`; its whole
+// wrapper was a prop FOLD with no aliasing at all (`registerInputAccessoryViewBehavior`), so it was
+// deleted 2026-09-10 and the behavior applies the same mapping on the tag's own path.
+//
+// The type stays for a component forwarding a bag, and because `IAngularInputAccessoryViewProps` is
+// public API.
+
+import type {
+  IAccessibilityProps,
+  IAriaProps,
+} from '@symbiote-native/components';
+import type { IStyleProp, IViewStyle } from '@symbiote-native/engine';
+
+export interface IAngularInputAccessoryViewProps
+  extends IAccessibilityProps, IAriaProps {
+  // The id a TextInput's inputAccessoryViewID points at to dock above its keyboard.
+  nativeID?: string;
+  backgroundColor?: string;
+  style?: IStyleProp<IViewStyle>;
+}

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

@@ -6,7 +6,7 @@
 // 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.
+// host of its own — it wraps 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.
@@ -96,23 +96,22 @@ export type IAngularKeyboardAvoidingViewInputs = Omit<
   // 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)"
-    >
+    <view [symbioteHostProps]="hostProps" (layout)="handleLayout($event)">
       @if (isNested) {
-        <symbiote-view [style]="innerStyle">
+        <view [style]="innerStyle">
           <ng-content></ng-content>
-        </symbiote-view>
+        </view>
       } @else {
         <ng-content></ng-content>
       }
-    </symbiote-view>
+    </view>
   `,
 })
 export class KeyboardAvoidingView
@@ -187,7 +186,7 @@ export class KeyboardAvoidingView
 
   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
+  // onto (see anchorHostStyle's doc comment) — NOT a ViewChild into the inner view (this
   // component has none; the wrapper IS the outer template node hostProps binds onto).
   private readonly elementRef = inject(ElementRef);
 
@@ -296,16 +295,28 @@ export class KeyboardAvoidingView
       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> {

package/src/components/modal/index.ts

@@ -109,21 +109,17 @@ export type IAngularModalInputs = Omit<
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     @if (shouldRender) {
-      <symbiote-modal
+      <modal
         [symbioteHostProps]="hostProps()"
         (show)="show.emit()"
         (dismiss)="dismiss.emit()"
         (requestClose)="requestClose.emit()"
         (orientationChange)="emit(orientationChange, $event)"
-        (accessibilityAction)="emit(accessibilityAction, $event)"
-        (accessibilityTap)="emit(accessibilityTap, $event)"
-        (magicTap)="emit(magicTap, $event)"
-        (accessibilityEscape)="emit(accessibilityEscape, $event)"
       >
-        <symbiote-view [style]="containerStyle" [collapsable]="false">
+        <view [style]="containerStyle" [symbioteHostProps]="containerProps">
           <ng-content></ng-content>
-        </symbiote-view>
-      </symbiote-modal>
+        </view>
+      </modal>
     }
   `,
 })
@@ -190,8 +186,8 @@ export class Modal implements IAngularModalInputs, OnInit, OnChanges, DoCheck {
 
   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
+  // onto (see anchorHostStyle's doc comment) — NOT the inner `view [style]="containerStyle"`
+  // that hosts the user children; the outer `modal` node (bound via `hostProps` below) is
   // the real primitive the anchor sits in front of.
   private readonly elementRef = inject(ElementRef);
 
@@ -265,7 +261,7 @@ export class Modal implements IAngularModalInputs, OnInit, OnChanges, DoCheck {
     this.hostPropsRevision.update(revision => revision + 1);
   }
 
-  // renderModal's own MODAL_HOST_STYLE (position:'absolute') is the outer symbiote-modal node's
+  // renderModal's own MODAL_HOST_STYLE (position:'absolute') is the outer 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.
   //
@@ -279,18 +275,43 @@ export class Modal implements IAngularModalInputs, OnInit, OnChanges, DoCheck {
     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),
     };
   });
 
+  // Through the props bag rather than `[collapsable]="false"`: `view` matches `ViewHost`, a real
+  // component, so a binding it does not declare is NG8002 under `ngc` — and `CUSTOM_ELEMENTS_SCHEMA`
+  // does not rescue a binding on a MATCHED component. Invisible to `tsc` and to vitest; only a real
+  // AOT build says so. Frozen and shared, so the directive's own diff sees one unchanged object.
+  readonly containerProps: Readonly<Record<string, unknown>> = Object.freeze({
+    collapsable: false,
+  });
+
   get containerStyle(): unknown {
     const container = this.descriptor.children[0];
     return typeof container === 'string' ? undefined : container.props.style;
   }
 
+  // NOT private: `(orientationChange)="emit(...)"` in the template above calls it, and a template
+  // can only reach public members. `tsc` does not typecheck Angular templates, so `private` here
+  // compiles clean and fails only under `ngc --compilationMode partial`.
   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`) — `show`/`dismiss`/`requestClose`/
+  // `orientationChange` are NOT (Modal's own MODAL_EVENTS), so those stay unconditional template
+  // bindings above. `.observed`-gated, mirroring Pressable's.
+  private eventEmitterHandler(
+    emitter: EventEmitter<ISymbioteEvent>,
+  ): ((event: unknown) => void) | undefined {
+    return emitter.observed ? event => this.emit(emitter, event) : undefined;
+  }
+
   // 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 &

package/src/components/pressable-props.ts

@@ -0,0 +1,73 @@
+// The `<pressable>` tag's prop surface. The tag is matched by `PressableElement`
+// (`../elements`) and carries the press machine as an engine behavior
+// (`registerPressableBehavior`), so the wrapper that used to run it in Angular was deleted
+// 2026-09-10.
+//
+// The type stays for a component forwarding a bag, for the four `Touchable*` prop types that share
+// this base, and because `IAngularPressableProps` is public API. Mirrors React's IPressableProps
+// minus children, which Angular takes via `<ng-content>`, and minus the render-prop `children`
+// React allows.
+
+import type {
+  IAccessibilityProps,
+  IAriaProps,
+  IPressableAndroidRippleConfig,
+  IPressHandler,
+  IPressState,
+  IRectOffset,
+} from '@symbiote-native/components';
+import type { IStyleProp, IViewStyle } from '@symbiote-native/engine';
+
+export type {
+  IPressState,
+  IPressableAndroidRippleConfig,
+} from '@symbiote-native/components';
+
+export interface IAngularPressableProps
+  extends IAccessibilityProps, IAriaProps {
+  onPress?: IPressHandler;
+  onPressIn?: IPressHandler;
+  onPressOut?: IPressHandler;
+  onPressMove?: IPressHandler;
+  onLongPress?: IPressHandler;
+  delayLongPress?: number;
+  disabled?: boolean;
+  cancelable?: boolean;
+  hitSlop?: IRectOffset;
+  pressRetentionOffset?: IRectOffset;
+  unstable_pressDelay?: number;
+  android_ripple?: IPressableAndroidRippleConfig;
+  android_disableSound?: boolean;
+  onHoverIn?: IPressHandler;
+  onHoverOut?: IPressHandler;
+  delayHoverIn?: number;
+  delayHoverOut?: number;
+  testID?: string;
+  nativeID?: string;
+  hasTVPreferredFocus?: boolean;
+  nextFocusDown?: number;
+  nextFocusForward?: number;
+  nextFocusLeft?: number;
+  nextFocusRight?: number;
+  nextFocusUp?: number;
+  style?:
+    IStyleProp<IViewStyle> | ((state: IPressState) => IStyleProp<IViewStyle>);
+}
+
+// The half an Angular template writes as plain `[prop]` bindings: everything minus the callbacks a
+// tag takes as `(event)` instead. The four `Touchable*` prop types are built over THIS rather than
+// over the whole surface, for that reason.
+export type IAngularPressableInputs = Omit<
+  IAngularPressableProps,
+  | 'onPress'
+  | 'onPressIn'
+  | 'onPressOut'
+  | 'onPressMove'
+  | 'onLongPress'
+  | 'onHoverIn'
+  | 'onHoverOut'
+  | 'onAccessibilityAction'
+  | 'onAccessibilityTap'
+  | 'onMagicTap'
+  | 'onAccessibilityEscape'
+>;