@symbiote-native/angular 0.7.0 → 1.0.0

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

@@ -42,8 +42,15 @@ import {
 // 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 {
+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;
 }
 
@@ -62,28 +69,30 @@ export type IAngularSafeAreaViewInputs = Omit<
 @Component({
   selector: 'SafeAreaView',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   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>
   `,
 })
-export class SafeAreaView implements IAngularSafeAreaViewInputs, OnChanges, DoCheck {
+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>();
@@ -99,8 +108,10 @@ export class SafeAreaView implements IAngularSafeAreaViewInputs, OnChanges, DoCh
   @Input() accessibilityValue?: IAccessibilityProps['accessibilityValue'];
   @Input() accessibilityActions?: IAccessibilityProps['accessibilityActions'];
   @Input() accessibilityLabelledBy?: string | string[];
-  @Input() importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
-  @Input() accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
+  @Input()
+  importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
+  @Input()
+  accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
   @Input() screenReaderFocusable?: boolean;
   @Input() accessibilityViewIsModal?: boolean;
   @Input() accessibilityElementsHidden?: boolean;
@@ -130,13 +141,20 @@ export class SafeAreaView implements IAngularSafeAreaViewInputs, OnChanges, DoCh
   // 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
@@ -199,8 +217,10 @@ export class SafeAreaView implements IAngularSafeAreaViewInputs, OnChanges, DoCh
       accessibilityElementsHidden: this.accessibilityElementsHidden,
       accessibilityIgnoresInvertColors: this.accessibilityIgnoresInvertColors,
       accessibilityLanguage: this.accessibilityLanguage,
-      accessibilityRespondsToUserInteraction: this.accessibilityRespondsToUserInteraction,
-      accessibilityShowsLargeContentViewer: this.accessibilityShowsLargeContentViewer,
+      accessibilityRespondsToUserInteraction:
+        this.accessibilityRespondsToUserInteraction,
+      accessibilityShowsLargeContentViewer:
+        this.accessibilityShowsLargeContentViewer,
       accessibilityLargeContentTitle: this.accessibilityLargeContentTitle,
       role: this.role,
       'aria-label': this.ariaLabel,
@@ -217,6 +237,11 @@ export class SafeAreaView implements IAngularSafeAreaViewInputs, OnChanges, DoCh
       '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/index.android.ts

@@ -43,7 +43,11 @@ import {
   SymbioteHostPropsDirective,
   SymbioteStyleInputDirective,
 } from '../../primitives';
-import { ScrollViewBase, ScrollViewProjectionDirective, SCROLL_VIEW_INPUTS } from './shared';
+import {
+  ScrollViewBase,
+  ScrollViewProjectionDirective,
+  SCROLL_VIEW_INPUTS,
+} from './shared';
 export type { IAngularScrollViewProps, IScrollViewHandle } from './shared';
 
 // Minimal local twin of `@angular/common`'s NgTemplateOutlet (this adapter deliberately has no
@@ -66,7 +70,9 @@ export class SymbioteTemplateOutletDirective implements OnChanges, OnDestroy {
       this.viewRef = undefined;
     }
     if (this.symbioteTemplateOutlet !== null) {
-      this.viewRef = this.viewContainerRef.createEmbeddedView(this.symbioteTemplateOutlet);
+      this.viewRef = this.viewContainerRef.createEmbeddedView(
+        this.symbioteTemplateOutlet,
+      );
     }
   }
 
@@ -87,7 +93,9 @@ function asStyle(value: unknown): IStyleProp<IViewStyle> | undefined {
 @Component({
   selector: 'ScrollView',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [
     ScrollViewHost,
@@ -120,17 +128,24 @@ function asStyle(value: unknown): IStyleProp<IViewStyle> | undefined {
               [symbioteHostProps]="contentProps()"
               [symbioteScrollViewProjection]="projectionController"
             >
-              <ng-container [symbioteTemplateOutlet]="sharedContent"></ng-container>
+              <ng-container
+                [symbioteTemplateOutlet]="sharedContent"
+              ></ng-container>
             </symbiote-horizontal-scroll-content>
           </symbiote-horizontal-scroll-view>
         </symbiote-refresh-control>
       } @else {
-        <symbiote-horizontal-scroll-view #host="symbioteHost" [symbioteHostProps]="scrollProps()">
+        <symbiote-horizontal-scroll-view
+          #host="symbioteHost"
+          [symbioteHostProps]="scrollProps()"
+        >
           <symbiote-horizontal-scroll-content
             [symbioteHostProps]="contentProps()"
             [symbioteScrollViewProjection]="projectionController"
           >
-            <ng-container [symbioteTemplateOutlet]="sharedContent"></ng-container>
+            <ng-container
+              [symbioteTemplateOutlet]="sharedContent"
+            ></ng-container>
           </symbiote-horizontal-scroll-content>
         </symbiote-horizontal-scroll-view>
       }
@@ -149,17 +164,24 @@ function asStyle(value: unknown): IStyleProp<IViewStyle> | undefined {
               [symbioteHostProps]="contentProps()"
               [symbioteScrollViewProjection]="projectionController"
             >
-              <ng-container [symbioteTemplateOutlet]="sharedContent"></ng-container>
+              <ng-container
+                [symbioteTemplateOutlet]="sharedContent"
+              ></ng-container>
             </symbiote-scroll-content>
           </symbiote-scroll-view>
         </symbiote-refresh-control>
       } @else {
-        <symbiote-scroll-view #host="symbioteHost" [symbioteHostProps]="scrollProps()">
+        <symbiote-scroll-view
+          #host="symbioteHost"
+          [symbioteHostProps]="scrollProps()"
+        >
           <symbiote-scroll-content
             [symbioteHostProps]="contentProps()"
             [symbioteScrollViewProjection]="projectionController"
           >
-            <ng-container [symbioteTemplateOutlet]="sharedContent"></ng-container>
+            <ng-container
+              [symbioteTemplateOutlet]="sharedContent"
+            ></ng-container>
           </symbiote-scroll-content>
         </symbiote-scroll-view>
       }

package/src/components/scroll-view/index.ios.ts

@@ -16,7 +16,11 @@
 // a horizontal FlatList's cells landed outside the ScrollView entirely. Fix: single unconditional
 // `<ng-content>` call site.
 
-import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
 import {
   RefreshControlHost,
   ScrollContentView,
@@ -24,7 +28,11 @@ import {
   SymbioteHostPropsDirective,
   SymbioteStyleInputDirective,
 } from '../../primitives';
-import { ScrollViewBase, ScrollViewProjectionDirective, SCROLL_VIEW_INPUTS } from './shared';
+import {
+  ScrollViewBase,
+  ScrollViewProjectionDirective,
+  SCROLL_VIEW_INPUTS,
+} from './shared';
 export type { IAngularScrollViewProps, IScrollViewHandle } from './shared';
 
 // The symbiote-* host elements are imported as standalone components; the props directive is
@@ -32,7 +40,9 @@ export type { IAngularScrollViewProps, IScrollViewHandle } from './shared';
 @Component({
   selector: 'ScrollView',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [
     ScrollViewHost,
@@ -44,7 +54,10 @@ export type { IAngularScrollViewProps, IScrollViewHandle } from './shared';
   changeDetection: ChangeDetectionStrategy.OnPush,
   inputs: SCROLL_VIEW_INPUTS,
   template: `
-    <symbiote-scroll-view #host="symbioteHost" [symbioteHostProps]="scrollProps()">
+    <symbiote-scroll-view
+      #host="symbioteHost"
+      [symbioteHostProps]="scrollProps()"
+    >
       @if (hasProjectedRefreshControl) {
         <symbiote-refresh-control
           #refreshHost="symbioteHost"