@symbiote-native/angular 0.7.0 → 1.0.0

package/src/components/touchable-native-feedback/index.ts

@@ -44,8 +44,16 @@ import {
   type IPressableAndroidRippleConfig,
   type IRectOffset,
 } from '@symbiote-native/components';
-import { dlog, isSymbioteEvent, type ISymbioteEvent } from '@symbiote-native/engine';
-import { anchorHostStyle, SymbioteHostPropsDirective, ViewHost } from '../../primitives';
+import {
+  dlog,
+  isSymbioteEvent,
+  type ISymbioteEvent,
+} from '@symbiote-native/engine';
+import {
+  anchorHostStyle,
+  SymbioteHostPropsDirective,
+  ViewHost,
+} from '../../primitives';
 import { Pressable, type IAngularPressableInputs } from '../pressable';
 
 export type {
@@ -58,7 +66,10 @@ export type {
 // feedback config) minus children (Angular takes children via <ng-content>) and minus the press/
 // hover events (declared as this component's OWN @Output()s below). Declared per-adapter over the
 // shared Pressable INPUT surface.
-export type IAngularTouchableNativeFeedbackProps = Omit<IAngularPressableInputs, 'style'> & {
+export type IAngularTouchableNativeFeedbackProps = Omit<
+  IAngularPressableInputs,
+  'style'
+> & {
   background?: INativeFeedbackBackground;
   useForeground?: boolean;
 };
@@ -71,6 +82,7 @@ export type IAngularTouchableNativeFeedbackProps = Omit<IAngularPressableInputs,
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <Pressable
+      [__minPressDuration]="0"
       (press)="press.emit($event)"
       (pressIn)="pressIn.emit($event)"
       (pressOut)="pressOut.emit($event)"
@@ -89,13 +101,7 @@ export type IAngularTouchableNativeFeedbackProps = Omit<IAngularPressableInputs,
       [android_ripple]="android_ripple"
       [android_disableSound]="android_disableSound"
     >
-      <symbiote-view
-        [symbioteHostProps]="hostProps()"
-        (accessibilityAction)="emit(accessibilityAction, $event)"
-        (accessibilityTap)="emit(accessibilityTap, $event)"
-        (magicTap)="emit(magicTap, $event)"
-        (accessibilityEscape)="emit(accessibilityEscape, $event)"
-      >
+      <symbiote-view [symbioteHostProps]="hostProps()">
         <ng-content></ng-content>
       </symbiote-view>
     </Pressable>
@@ -107,7 +113,8 @@ export class TouchableNativeFeedback
   // The static helpers are pure config-dict producers; they live as members on the component class
   // so callers reach them as `TouchableNativeFeedback.Ripple(...)`, exactly like RN.
   static readonly SelectableBackground = selectableBackground;
-  static readonly SelectableBackgroundBorderless = selectableBackgroundBorderless;
+  static readonly SelectableBackgroundBorderless =
+    selectableBackgroundBorderless;
   static readonly Ripple = rippleBackground;
   static readonly canUseNativeForeground = canUseNativeForeground;
 
@@ -144,8 +151,10 @@ export class TouchableNativeFeedback
   @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;
@@ -222,7 +231,10 @@ export class TouchableNativeFeedback
   // backgroundProps picks the foreground slot only where the platform supports it, else the
   // background slot (canUseNativeForeground) — shared with React/Vue. One side is always undefined.
   get feedback(): Record<string, INativeFeedbackBackground> {
-    return backgroundProps(this.resolvedBackground, this.useForeground === true);
+    return backgroundProps(
+      this.resolvedBackground,
+      this.useForeground === true,
+    );
   }
 
   // Assembles the SAME resolved values the template used to bind one-by-one into a single
@@ -245,14 +257,29 @@ export class TouchableNativeFeedback
       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.
-  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`): 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. `.observed`-gated, mirroring Pressable's
+  // `accessibilityEmitterHandler`.
+  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 never sees an aria-* key (native ignores them), and merge `disabled` into the a11y state
   // (resolveDisabledAccessibilityState) the same way Pressable does for its own host.
@@ -261,7 +288,10 @@ export class TouchableNativeFeedback
       accessibilityLabel: this.accessibilityLabel,
       accessibilityHint: this.accessibilityHint,
       accessibilityRole: this.accessibilityRole,
-      accessibilityState: resolveDisabledAccessibilityState(this.accessibilityState, this.disabled),
+      accessibilityState: resolveDisabledAccessibilityState(
+        this.accessibilityState,
+        this.disabled,
+      ),
       accessibilityValue: this.accessibilityValue,
       accessibilityActions: this.accessibilityActions,
       accessibilityLabelledBy: this.accessibilityLabelledBy,
@@ -272,8 +302,10 @@ export class TouchableNativeFeedback
       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,

package/src/components/virtualized-list/directives.ts

@@ -36,6 +36,7 @@ import {
   type SimpleChanges,
 } from '@angular/core';
 import { dlog } from '@symbiote-native/engine';
+import { countAngular } from '../../diagnostics';
 import type { ISeparators } from '@symbiote-native/components';
 
 let vListOutletInstanceCounter = 0;
@@ -68,7 +69,8 @@ function isRecord(value: unknown): value is Record<string, unknown> {
 // typed at the call site (let-item: ItemT, let-index: number, let-separators: ISeparators).
 @Directive({ selector: '[vListItem]', standalone: true })
 export class VListItemDirective<ItemT = unknown> {
-  readonly templateRef = inject<TemplateRef<IVListItemContext<ItemT>>>(TemplateRef);
+  readonly templateRef =
+    inject<TemplateRef<IVListItemContext<ItemT>>>(TemplateRef);
 
   static ngTemplateContextGuard<T>(
     _dir: VListItemDirective<T>,
@@ -101,7 +103,8 @@ export class VListEmptyDirective {
 // types the `let-` bindings against the separator props.
 @Directive({ selector: '[vListSeparator]', standalone: true })
 export class VListSeparatorDirective<ItemT = unknown> {
-  readonly templateRef = inject<TemplateRef<IVListSeparatorContext<ItemT>>>(TemplateRef);
+  readonly templateRef =
+    inject<TemplateRef<IVListSeparatorContext<ItemT>>>(TemplateRef);
 
   static ngTemplateContextGuard<T>(
     _dir: VListSeparatorDirective<T>,
@@ -130,20 +133,28 @@ export class VListOutletDirective<C = unknown> implements OnChanges, OnDestroy {
         `Angular VListOutlet#${this.instanceId} templateRef CHANGED (was=${changes['templateRef'].previousValue !== undefined} now=${this.templateRef !== undefined}) -> clear + recreate`,
       );
       this.viewContainer.clear();
+      countAngular('outletCreates');
       this.viewRef =
         this.templateRef === undefined
           ? null
-          : this.viewContainer.createEmbeddedView(this.templateRef, this.context);
+          : this.viewContainer.createEmbeddedView(
+              this.templateRef,
+              this.context,
+            );
       return;
     }
     if (this.viewRef !== null && this.context !== undefined) {
-      dlog(`Angular VListOutlet#${this.instanceId} context updated, markForCheck`);
+      countAngular('outletUpdates');
+      dlog(
+        `Angular VListOutlet#${this.instanceId} context updated, markForCheck`,
+      );
       this.updateContext(this.viewRef.context, this.context);
       this.viewRef.markForCheck();
     }
   }
 
   ngOnDestroy(): void {
+    countAngular('outletDestroys');
     dlog(`Angular VListOutlet#${this.instanceId} destroyed`);
     this.viewContainer.clear();
   }
@@ -158,7 +169,10 @@ export class VListOutletDirective<C = unknown> implements OnChanges, OnDestroy {
   }
 }
 
-function copyContextFields(target: Record<string, unknown>, source: Record<string, unknown>): void {
+function copyContextFields(
+  target: Record<string, unknown>,
+  source: Record<string, unknown>,
+): void {
   for (const key of Object.keys(target)) {
     if (!(key in source)) delete target[key];
   }