@symbiote-native/angular 0.8.0 → 1.0.0

package/src/components/image/shared.ts

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

package/src/components/image-background.ts

@@ -42,6 +42,13 @@ import {
   SymbioteStyleInputDirective,
   ViewHost,
 } from '../primitives';
+import {
+  gateWanted,
+  injectGateDemandAbove,
+  provideGateDemand,
+  type IGateDemand,
+  type IGatedAccessibilityEvent,
+} from '../gate-demand';
 
 // Mirrors React's IImageBackgroundProps minus children (Angular takes children via <ng-content>):
 // every forwarding Image prop flows onto the inner image; `style` is the WRAPPER View style and
@@ -75,6 +82,7 @@ export type IAngularImageBackgroundInputs = Omit<
 @Component({
   selector: 'ImageBackground',
   standalone: true,
+  viewProviders: [provideGateDemand(() => ImageBackground)],
   hostDirectives: [
     { directive: SymbioteStyleInputDirective, inputs: ['style'] },
   ],
@@ -150,6 +158,16 @@ export class ImageBackground implements IAngularImageBackgroundInputs {
   @Output() readonly accessibilityTap = new EventEmitter<ISymbioteEvent>();
   @Output() readonly magicTap = new EventEmitter<ISymbioteEvent>();
   @Output() readonly accessibilityEscape = new EventEmitter<ISymbioteEvent>();
+
+  // This wrapper binds the four gated accessibility events on the component it renders, which
+  // Angular forces to be unconditional and which would light that component's gates on every
+  // instance. It answers for them instead — see `gate-demand.ts`.
+  private readonly gateDemandAbove = injectGateDemandAbove();
+
+  wantsGate(name: IGatedAccessibilityEvent): boolean {
+    return gateWanted(this.gateDemandAbove, name, this[name]);
+  }
+
   @Output() readonly loadStart = new EventEmitter<ISymbioteEvent>();
   @Output() readonly load = new EventEmitter<ISymbioteEvent>();
   @Output() readonly loadEnd = new EventEmitter<ISymbioteEvent>();

package/src/components/input-accessory-view/index.ts

@@ -72,13 +72,7 @@ export type IAngularInputAccessoryViewInputs = Omit<
   imports: [InputAccessoryViewHost, SymbioteHostPropsDirective],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <symbiote-input-accessory-view
-      [symbioteHostProps]="hostProps()"
-      (accessibilityAction)="emit(accessibilityAction, $event)"
-      (accessibilityTap)="emit(accessibilityTap, $event)"
-      (magicTap)="emit(magicTap, $event)"
-      (accessibilityEscape)="emit(accessibilityEscape, $event)"
-    >
+    <symbiote-input-accessory-view [symbioteHostProps]="hostProps()">
       <ng-content></ng-content>
     </symbiote-input-accessory-view>
   `,
@@ -136,10 +130,18 @@ export class InputAccessoryView
   private readonly elementRef = inject(ElementRef);
 
   // Forward an engine event to the matching @Output(), narrowing the template's untyped $event.
-  emit(emitter: EventEmitter<ISymbioteEvent>, event: unknown): void {
+  private emit(emitter: EventEmitter<ISymbioteEvent>, event: unknown): void {
     if (isSymbioteEvent(event)) emitter.emit(event);
   }
 
+  // The four accessibility events are boolean-GATED Fabric events
+  // (`.claude/rules/fabric-boolean-event-gates.md`). `.observed`-gated, mirroring Pressable's.
+  private eventEmitterHandler(
+    emitter: EventEmitter<ISymbioteEvent>,
+  ): ((event: unknown) => void) | undefined {
+    return emitter.observed ? event => this.emit(emitter, event) : undefined;
+  }
+
   // renderInputAccessoryView owns the host-node assembly (shared with React/Vue); the adapter reads
   // the resolved host props off the Descriptor it returns.
   private get descriptor() {
@@ -190,6 +192,10 @@ export class InputAccessoryView
     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),
     };
   });
 

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

@@ -96,13 +96,15 @@ 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)"
     >
       @if (isNested) {
@@ -296,16 +298,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

@@ -115,10 +115,6 @@ export type IAngularModalInputs = Omit<
         (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">
           <ng-content></ng-content>
@@ -279,6 +275,10 @@ 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),
     };
   });
 
@@ -287,10 +287,23 @@ export class Modal implements IAngularModalInputs, OnInit, OnChanges, DoCheck {
     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/index.ts

@@ -13,11 +13,14 @@ import {
   ViewChild,
   type DoCheck,
   type OnChanges,
+  type OnDestroy,
 } from '@angular/core';
 import {
   createPressHandlers,
   createPressRuntime,
+  disposePressRuntime,
   DEFAULT_DELAY_LONG_PRESS_MS,
+  DEFAULT_MIN_PRESS_DURATION_MS,
   isTerminationAllowed,
   resolveAccessibilityProps,
   resolveDisabledAccessibilityState,
@@ -50,6 +53,11 @@ import {
   SymbioteStyleInputDirective,
   ViewHost,
 } from '../../primitives';
+import {
+  gateWanted,
+  injectGateDemand,
+  type IGatedAccessibilityEvent,
+} from '../../gate-demand';
 
 export type {
   IPressState,
@@ -123,7 +131,18 @@ function asSymbioteEvent(event: unknown): ISymbioteEvent | undefined {
 }
 
 @Component({
-  selector: 'Pressable, symbiote-pressable',
+  // Single-name selector, matching TextInput's own ('TextInput', text-input.ts) rather than
+  // View/Text's dual one. The alternate `symbiote-pressable` spelling was vestigial — nothing in
+  // this component's own template ever renders that tag (it renders `symbiote-view`, below), and
+  // no app or example code invokes the composed component by that literal tag (verified by grep,
+  // 2026-08-31). Its only effect was to force `symbiote-pressable` into
+  // `ANCHOR_HOST_COMPONENTS` unconditionally, which collided with the tag's OTHER, load-bearing
+  // meaning — the host-behavior registry key (`PRESSABLE_TAG`,
+  // core/components/src/behaviors/pressable.ts) a lowered `<Pressable>` must carry to get the
+  // press machine. That collision is exactly why `DIAGNOSTIC_LOWERED_PRESSABLE_TAG` existed
+  // (renderer/index.ts) — dropping the vestigial spelling here removes the collision at its
+  // source, so the escape hatch is retired rather than worked around.
+  selector: 'Pressable',
   standalone: true,
   hostDirectives: [
     { directive: SymbioteStyleInputDirective, inputs: ['style'] },
@@ -134,10 +153,6 @@ function asSymbioteEvent(event: unknown): ISymbioteEvent | undefined {
     <symbiote-view
       #host
       [symbioteHostProps]="hostProps()"
-      (accessibilityAction)="emit(accessibilityAction, $event)"
-      (accessibilityTap)="emit(accessibilityTap, $event)"
-      (magicTap)="emit(magicTap, $event)"
-      (accessibilityEscape)="emit(accessibilityEscape, $event)"
       (press)="handlePress($event)"
       (pressIn)="handlePressIn($event)"
       (pressOut)="handlePressOut($event)"
@@ -150,7 +165,9 @@ function asSymbioteEvent(event: unknown): ISymbioteEvent | undefined {
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class Pressable implements IAngularPressableInputs, OnChanges, DoCheck {
+export class Pressable
+  implements IAngularPressableInputs, OnChanges, OnDestroy, DoCheck
+{
   // The press/hover lifecycle as real Angular events: `(press)="onTap($event)"`, not
   // `[onPress]="onTap"`. createPressHandlers still wants plain IPressHandler callbacks, so
   // emitterHandler() below adapts each EventEmitter into one - only while something is actually
@@ -163,9 +180,15 @@ export class Pressable implements IAngularPressableInputs, OnChanges, DoCheck {
   @Output() readonly longPress = new EventEmitter<ISymbioteEvent>();
   @Output() readonly hoverIn = new EventEmitter<ISymbioteEvent>();
   @Output() readonly hoverOut = new EventEmitter<ISymbioteEvent>();
-  // The four accessibility callbacks as real Angular events too, same tradeoff as press/hover
-  // above: `(accessibilityAction)="emit(accessibilityAction, $event)"`, not
-  // `[onAccessibilityAction]="onAccessibilityAction"`.
+  // The four accessibility callbacks as real Angular events, app-facing. UNLIKE press/hover above,
+  // these are NOT bound in the template at all — `accessibilityAction`/`accessibilityTap`/
+  // `magicTap`/`accessibilityEscape` are `onX`-gated Fabric events
+  // (`.claude/rules/fabric-boolean-event-gates.md`): the engine only emits them when the committed
+  // payload carries a FUNCTION at that key, so a `(accessibilityAction)="..."` template binding —
+  // always present once written — would light the gate on every instance regardless of whether the
+  // app ever subscribes. Routed through `hostProps()` instead (`accessibilityEmitterHandler`
+  // below), the same `.observed`-conditional shape `emitterHandler` already uses for press/hover,
+  // so the gate lights only when something is actually listening.
   @Output() readonly accessibilityAction = new EventEmitter<ISymbioteEvent>();
   @Output() readonly accessibilityTap = new EventEmitter<ISymbioteEvent>();
   @Output() readonly magicTap = new EventEmitter<ISymbioteEvent>();
@@ -176,6 +199,8 @@ export class Pressable implements IAngularPressableInputs, OnChanges, DoCheck {
   @Input() hitSlop?: IRectOffset;
   @Input() pressRetentionOffset?: IRectOffset;
   @Input() unstable_pressDelay?: number;
+  /** @internal Touchable* mirrors RN's Pressability minPressDuration: 0 override. */
+  @Input() __minPressDuration = DEFAULT_MIN_PRESS_DURATION_MS;
   @Input() android_ripple?: IPressableAndroidRippleConfig;
   @Input() android_disableSound?: boolean;
   @Input() delayHoverIn?: number;
@@ -255,9 +280,14 @@ export class Pressable implements IAngularPressableInputs, OnChanges, DoCheck {
       const id = setTimeout(callback, ms);
       return () => clearTimeout(id);
     },
+    now: Date.now,
   };
 
   private readonly changeDetector = inject(ChangeDetectorRef);
+  // Null unless an adapter wrapper renders this Pressable in its own template. See
+  // `gate-demand.ts`; an app's own `<Pressable>` — including one projected INTO a wrapper — gets
+  // null and falls back to its own `.observed`.
+  private readonly gateDemand = injectGateDemand();
   // This component's OWN host - the non-painting anchor `class="..."` at the use site resolves
   // onto (see anchorHostStyle's doc comment) - NOT `hostElement` above, which targets the real
   // inner `symbiote-view` one level down.
@@ -289,6 +319,10 @@ export class Pressable implements IAngularPressableInputs, OnChanges, DoCheck {
     this.anchorStyle.set(anchorHostStyle(this.elementRef));
   }
 
+  ngOnDestroy(): void {
+    disposePressRuntime(this.runtime);
+  }
+
   ngOnChanges(): void {
     // Tells the computed bag below that an @Input moved - plain class fields are not reactive on
     // their own. Must stay in ngOnChanges: that is the single moment Angular has finished writing
@@ -371,6 +405,14 @@ export class Pressable implements IAngularPressableInputs, OnChanges, DoCheck {
       style: [this.anchorStyle(), this.resolvedStyle],
       accessible: this.accessible,
       ...this.foldedAccessibility,
+      onAccessibilityAction: this.accessibilityEmitterHandler(
+        'accessibilityAction',
+      ),
+      onAccessibilityTap: this.accessibilityEmitterHandler('accessibilityTap'),
+      onMagicTap: this.accessibilityEmitterHandler('magicTap'),
+      onAccessibilityEscape: this.accessibilityEmitterHandler(
+        'accessibilityEscape',
+      ),
       android_disableSound: this.android_disableSound,
       nativeBackgroundAndroid:
         this.resolvedRippleProps?.nativeBackgroundAndroid,
@@ -415,7 +457,7 @@ export class Pressable implements IAngularPressableInputs, OnChanges, DoCheck {
     return isTerminationAllowed(this.cancelable);
   }
 
-  emit(emitter: EventEmitter<ISymbioteEvent>, event: unknown): void {
+  private emit(emitter: EventEmitter<ISymbioteEvent>, event: unknown): void {
     const symbioteEvent = asSymbioteEvent(event);
     if (symbioteEvent !== undefined) emitter.emit(symbioteEvent);
   }
@@ -439,6 +481,23 @@ export class Pressable implements IAngularPressableInputs, OnChanges, DoCheck {
     return emitter.observed ? event => emitter.emit(event) : undefined;
   }
 
+  // The accessibility twin of emitterHandler, feeding hostProps()'s flat bag instead of
+  // createPressHandlers' config — see the accessibilityAction @Output()'s own comment for why
+  // these four specifically cannot be plain template `(x)="..."` bindings. `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 accessibilityEmitterHandler(
+    name: IGatedAccessibilityEvent,
+  ): ((event: unknown) => void) | undefined {
+    const emitter = this[name];
+    // A WRAPPER's binding is not a subscriber, and `.observed` cannot tell the two apart. When a
+    // demand is supplied from above it decides instead — see `gate-demand.ts` for why the channel
+    // is DI rather than an `@Input`.
+    return gateWanted(this.gateDemand, name, emitter)
+      ? event => this.emit(emitter, event)
+      : undefined;
+  }
+
   private get handlers() {
     this.noteHoverNoop();
     const config: IPressMachineConfig = {
@@ -449,6 +508,7 @@ export class Pressable implements IAngularPressableInputs, OnChanges, DoCheck {
       onLongPress: this.emitterHandler(this.longPress),
       delayLongPress: this.delayLongPress ?? DEFAULT_DELAY_LONG_PRESS_MS,
       unstable_pressDelay: this.unstable_pressDelay ?? 0,
+      minPressDuration: this.__minPressDuration,
       hitSlop: this.hitSlop,
       pressRetentionOffset: this.pressRetentionOffset,
     };

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

@@ -109,10 +109,6 @@ export type IAngularRefreshControlInputs = Omit<
       #host
       [symbioteHostProps]="hostProps()"
       (refresh)="handleRefresh()"
-      (accessibilityAction)="emit(accessibilityAction, $event)"
-      (accessibilityTap)="emit(accessibilityTap, $event)"
-      (magicTap)="emit(magicTap, $event)"
-      (accessibilityEscape)="emit(accessibilityEscape, $event)"
     >
       <ng-content></ng-content>
     </symbiote-refresh-control>
@@ -252,10 +248,19 @@ export class RefreshControl
 
   // 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.
-  emit(emitter: EventEmitter<ISymbioteEvent>, event: unknown): void {
+  private emit(emitter: EventEmitter<ISymbioteEvent>, event: unknown): void {
     if (isSymbioteEvent(event)) emitter.emit(event);
   }
 
+  // The four accessibility events are boolean-GATED Fabric events
+  // (`.claude/rules/fabric-boolean-event-gates.md`): 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
@@ -294,6 +299,10 @@ export class RefreshControl
       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),
     };
   });
 

package/src/components/safe-area-view/index.ts

@@ -45,6 +45,12 @@ import {
 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;
 }
 
@@ -70,14 +76,7 @@ export type IAngularSafeAreaViewInputs = Omit<
   imports: [SafeAreaViewHost, SymbioteHostPropsDirective],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <symbiote-safe-area-view
-      [symbioteHostProps]="hostProps()"
-      (accessibilityAction)="emit(accessibilityAction, $event)"
-      (accessibilityTap)="emit(accessibilityTap, $event)"
-      (magicTap)="emit(magicTap, $event)"
-      (accessibilityEscape)="emit(accessibilityEscape, $event)"
-      (layout)="emit(layout, $event)"
-    >
+    <symbiote-safe-area-view [symbioteHostProps]="hostProps()">
       <ng-content></ng-content>
     </symbiote-safe-area-view>
   `,
@@ -89,6 +88,11 @@ export class SafeAreaView
   // 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>();
@@ -137,13 +141,20 @@ export class SafeAreaView
   // the only ElementRef in the class.
   private readonly elementRef = inject(ElementRef);
 
-  // Forward an engine event to the matching @Output(), narrowing the template's untyped
-  // $event first. layout / accessibility* arrive on the engine's structural event channel
-  // (Angular blocks [onX] property bindings; events flow through (event) only).
-  emit(emitter: EventEmitter<ISymbioteEvent>, event: unknown): void {
+  // 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
@@ -226,6 +237,11 @@ export class SafeAreaView
       '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),
     });
   });
 }

package/src/components/scroll-view/shared.ts

@@ -63,6 +63,11 @@ import {
   type IViewStyle,
 } from '@symbiote-native/engine';
 import { anchorHostStyle, SymbioteHostPropsDirective } from '../../primitives';
+import {
+  gateWanted,
+  injectGateDemand,
+  type IGatedAccessibilityEvent,
+} from '../../gate-demand';
 import { RefreshControl } from '../refresh-control';
 import { ScrollViewProjectionController } from './projection';
 
@@ -369,6 +374,10 @@ export abstract class ScrollViewBase
   @Output() readonly magicTap = new EventEmitter<ISymbioteEvent>();
   @Output() readonly accessibilityEscape = new EventEmitter<ISymbioteEvent>();
 
+  // Null unless an adapter wrapper renders this ScrollView in its own template — VirtualizedList
+  // does. An app's own `<ScrollView>` gets null and answers from its own `.observed`.
+  private readonly gateDemand = injectGateDemand();
+
   testID: string | undefined;
   nativeID: string | undefined;
   accessible: boolean | undefined;
@@ -624,10 +633,14 @@ export abstract class ScrollViewBase
       onMomentumScrollBegin: this.onMomentumScrollBegin,
       onMomentumScrollEnd: this.onMomentumScrollEnd,
       onScrollToTop: this.emitterCallback(this.scrollToTop),
-      onAccessibilityAction: this.emitterCallback(this.accessibilityAction),
-      onAccessibilityTap: this.emitterCallback(this.accessibilityTap),
-      onMagicTap: this.emitterCallback(this.magicTap),
-      onAccessibilityEscape: this.emitterCallback(this.accessibilityEscape),
+      onAccessibilityAction: this.gatedAccessibilityCallback(
+        'accessibilityAction',
+      ),
+      onAccessibilityTap: this.gatedAccessibilityCallback('accessibilityTap'),
+      onMagicTap: this.gatedAccessibilityCallback('magicTap'),
+      onAccessibilityEscape: this.gatedAccessibilityCallback(
+        'accessibilityEscape',
+      ),
     });
 
     // RN defaults nested scrolling ON (ScrollView.js `nestedScrollEnabled ?? true`); Android needs
@@ -814,6 +827,20 @@ export abstract class ScrollViewBase
   // subscribes a template's (event) listeners in its CREATION pass, before any input is written and
   // before this component's own view is first refreshed - so `observed` is already settled at the
   // first evaluation and cannot flip afterwards without destroying the whole component.
+  // The four GATED accessibility events, which `emitterCallback` cannot answer alone: VirtualizedList
+  // renders this component and binds all four, so `.observed` is true on every list in the app
+  // whether or not anything listens. A demand from above decides instead — see `gate-demand.ts`.
+  //
+  // Deliberately NOT applied to the projected RefreshControl's four, one site below: that emitter
+  // belongs to a component the APP wrote and projected in, so its `.observed` is honest.
+  private gatedAccessibilityCallback(
+    name: IGatedAccessibilityEvent,
+  ): IScrollHandler | undefined {
+    const emitter = this[name];
+    if (!gateWanted(this.gateDemand, name, emitter)) return undefined;
+    return this.emitterCallback(emitter);
+  }
+
   private emitterCallback(
     emitter: EventEmitter<ISymbioteEvent>,
   ): IScrollHandler | undefined {