@symbiote-native/angular 0.7.0 → 0.8.0

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

@@ -2,7 +2,7 @@
 // keyboard's way as it shows/hides. The inset math + the behavior → style/structure decision
 // live framework-agnostic in @symbiote-native/components (render-keyboard-avoiding-view), shared verbatim
 // with React/Vue; Angular supplies only the lifecycle: a plain inset field, ngOnInit subscribes to
-// the core Keyboard module (show / changeFrame / hide) and markForCheck pulls the OnPush view (the
+// the core Keyboard module (the host's show / hide pair) and markForCheck pulls the OnPush view (the
 // 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
@@ -26,8 +26,10 @@ import {
 } from '@angular/core';
 import {
   computeInset,
+  keyboardAvoidingEventNamesFor,
   readKeyboardFrame,
   readLayoutFrame,
+  readPrefersCrossFadeTransitions,
   resolveAccessibilityProps,
   resolveKeyboardAvoidingLayout,
   DEFAULT_VERTICAL_OFFSET,
@@ -40,7 +42,7 @@ import {
 } from '@symbiote-native/components';
 import {
   Keyboard,
-  KEYBOARD_EVENT,
+  Platform,
   dlog,
   isSymbioteEvent,
   type IEventSubscription,
@@ -60,7 +62,8 @@ export type { IKeyboardAvoidingBehavior } from '@symbiote-native/components';
 // Mirrors React's IKeyboardAvoidingViewProps minus children (Angular takes children via
 // <ng-content>), declared per-adapter over the shared accessibility base since a framework-specific
 // children field keeps it from being fully shared across adapters.
-export interface IAngularKeyboardAvoidingViewProps extends IAccessibilityProps, IAriaProps {
+export interface IAngularKeyboardAvoidingViewProps
+  extends IAccessibilityProps, IAriaProps {
   behavior?: IKeyboardAvoidingBehavior;
   enabled?: boolean;
   keyboardVerticalOffset?: number;
@@ -84,7 +87,9 @@ export type IAngularKeyboardAvoidingViewInputs = Omit<
 @Component({
   selector: 'KeyboardAvoidingView',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [ViewHost, SymbioteHostPropsDirective],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -110,7 +115,9 @@ export type IAngularKeyboardAvoidingViewInputs = Omit<
     </symbiote-view>
   `,
 })
-export class KeyboardAvoidingView implements IAngularKeyboardAvoidingViewInputs, OnInit, OnDestroy {
+export class KeyboardAvoidingView
+  implements IAngularKeyboardAvoidingViewInputs, OnInit, OnDestroy
+{
   @Input() behavior?: IKeyboardAvoidingBehavior;
   @Input() enabled?: boolean;
   @Input() keyboardVerticalOffset?: number;
@@ -135,8 +142,10 @@ export class KeyboardAvoidingView implements IAngularKeyboardAvoidingViewInputs,
   @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;
@@ -168,6 +177,12 @@ export class KeyboardAvoidingView implements IAngularKeyboardAvoidingViewInputs,
   // keyboard event's inset math (React's frameRef / initialHeightRef, Vue's frame / initialHeight).
   private frame?: IMeasuredFrame;
   private initialHeight?: number;
+  // The iOS "Prefer Cross-Fade Transitions" setting, read once per mount. Deliberately a plain
+  // field and NOT markForCheck'd when the promise lands: it is a device setting that cannot change
+  // mid-session, and it feeds only the NEXT keyboard event's math — never the current render — so
+  // under zoneless CD there is nothing to repaint at resolve time. The keyboard event that does use
+  // it already calls markForCheck itself.
+  private prefersCrossFadeTransitions = false;
   private subscriptions: IEventSubscription[] = [];
 
   private readonly changeDetector = inject(ChangeDetectorRef);
@@ -177,11 +192,21 @@ export class KeyboardAvoidingView implements IAngularKeyboardAvoidingViewInputs,
   private readonly elementRef = inject(ElementRef);
 
   ngOnInit(): void {
+    // TWO events, picked per host, never three: iOS takes the will* pair so the view rides up with
+    // the keyboard animation, Android the did* pair. The change-frame notification is deliberately
+    // absent — with an undocked/split/floating iOS keyboard it fires BEFORE the hide, so listening
+    // to it applies a frame captured mid-dismissal (RN KeyboardAvoidingView.js's own comment).
+    const events = keyboardAvoidingEventNamesFor(Platform.OS);
     this.subscriptions = [
-      Keyboard.addListener(KEYBOARD_EVENT.didShow, payload => this.onShow(payload)),
-      Keyboard.addListener(KEYBOARD_EVENT.didChangeFrame, payload => this.onShow(payload)),
-      Keyboard.addListener(KEYBOARD_EVENT.didHide, () => this.onHide()),
+      Keyboard.addListener(events.show, payload => this.onShow(payload)),
+      Keyboard.addListener(events.hide, () => this.onHide()),
     ];
+    // The core wrapper, not AccessibilityInfo directly: the engine's iOS getter REJECTS on a
+    // native error (RN parity), and nobody awaits this read, so an unwrapped call would surface
+    // as an unhandled rejection. The wrapper answers false on a failed read.
+    void readPrefersCrossFadeTransitions().then(enabled => {
+      this.prefersCrossFadeTransitions = enabled;
+    });
   }
 
   ngOnDestroy(): void {
@@ -192,7 +217,17 @@ export class KeyboardAvoidingView implements IAngularKeyboardAvoidingViewInputs,
   private onShow(payload: unknown): void {
     const keyboard = readKeyboardFrame(payload);
     const offset = this.keyboardVerticalOffset ?? DEFAULT_VERTICAL_OFFSET;
-    const next = computeInset(this.frame, keyboard, offset);
+    const next = computeInset(this.frame, keyboard, offset, {
+      // Read off the field at event time, not captured when the subscription was built: `behavior`
+      // is an @Input that can change under a long-lived subscription, and a stale one keeps
+      // applying the old mode's math (it gates the previous-inset correction below).
+      behavior: this.behavior,
+      // The inset CURRENTLY applied (RN's this.state.bottom), read off the field at event time so
+      // 'height' mode's fixpoint correction sees the live value: that mode SHRINKS the wrapper by
+      // the inset, so the next onLayout reports a frame shorter by exactly that much.
+      previousInset: this.inset,
+      prefersCrossFadeTransitions: this.prefersCrossFadeTransitions,
+    });
     dlog(`KeyboardAvoidingView show -> inset ${next}`);
     this.inset = next;
     this.changeDetector.markForCheck();
@@ -211,7 +246,8 @@ export class KeyboardAvoidingView implements IAngularKeyboardAvoidingViewInputs,
     const measured = readLayoutFrame(event.nativeEvent.layout);
     if (measured !== undefined) {
       this.frame = measured;
-      if (this.initialHeight === undefined) this.initialHeight = measured.height;
+      if (this.initialHeight === undefined)
+        this.initialHeight = measured.height;
     }
     this.layout.emit(event);
   }
@@ -244,7 +280,9 @@ export class KeyboardAvoidingView implements IAngularKeyboardAvoidingViewInputs,
   }
 
   get innerStyle(): IStyleProp<IViewStyle> | undefined {
-    return this.resolvedLayout.kind === 'nested' ? this.resolvedLayout.innerStyle : undefined;
+    return this.resolvedLayout.kind === 'nested'
+      ? this.resolvedLayout.innerStyle
+      : undefined;
   }
 
   // The wrapper's full prop bag (style + identity + a11y) folded for `[symbioteHostProps]`,
@@ -286,8 +324,10 @@ export class KeyboardAvoidingView implements IAngularKeyboardAvoidingViewInputs,
       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/modal/index.ts

@@ -101,7 +101,9 @@ export type IAngularModalInputs = Omit<
 @Component({
   selector: 'Modal',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [ModalHost, ViewHost, SymbioteHostPropsDirective],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -154,8 +156,10 @@ export class Modal implements IAngularModalInputs, OnInit, OnChanges, DoCheck {
   @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;
@@ -216,7 +220,10 @@ export class Modal implements IAngularModalInputs, OnInit, OnChanges, DoCheck {
     // Queue on a microtask so the reducer runs AFTER this CD pass renders with the OLD state —
     // the keep-alive frame. A synchronous dispatch here would unmount in the same pass.
     queueMicrotask(() => {
-      this.state = modalReducer(this.state, isVisible ? { type: 'show' } : { type: 'hide' });
+      this.state = modalReducer(
+        this.state,
+        isVisible ? { type: 'show' } : { type: 'hide' },
+      );
       this.changeDetector.markForCheck();
     });
   }
@@ -269,7 +276,10 @@ export class Modal implements IAngularModalInputs, OnInit, OnChanges, DoCheck {
   readonly hostProps = computed<Record<string, unknown>>(() => {
     this.hostPropsRevision();
     const descriptorProps = this.descriptor.props;
-    return { ...descriptorProps, style: [anchorHostStyle(this.elementRef), descriptorProps.style] };
+    return {
+      ...descriptorProps,
+      style: [anchorHostStyle(this.elementRef), descriptorProps.style],
+    };
   });
 
   get containerStyle(): unknown {
@@ -283,7 +293,9 @@ export class Modal implements IAngularModalInputs, OnInit, OnChanges, DoCheck {
 
   // 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 & IAriaProps & Record<string, unknown> {
+  private accessibilityInputs(): IAccessibilityProps &
+    IAriaProps &
+    Record<string, unknown> {
     return {
       testID: this.testID,
       accessible: this.accessible,
@@ -301,8 +313,10 @@ export class Modal implements IAngularModalInputs, OnInit, OnChanges, DoCheck {
       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/pressable/index.ts

@@ -51,13 +51,17 @@ import {
   ViewHost,
 } from '../../primitives';
 
-export type { IPressState, IPressableAndroidRippleConfig } from '@symbiote-native/components';
+export type {
+  IPressState,
+  IPressableAndroidRippleConfig,
+} from '@symbiote-native/components';
 
 // The full logical Pressable surface, callback-shaped press/hover events included. Touchable* and
 // TouchableNativeFeedback still take their OWN onPress/onPressIn/... as @Input() callbacks (that is
 // a separate, not-yet-converted decision) and derive their public prop types from this - so it keeps
 // the callback fields even though the Pressable component below no longer implements them directly.
-export interface IAngularPressableProps extends IAccessibilityProps, IAriaProps {
+export interface IAngularPressableProps
+  extends IAccessibilityProps, IAriaProps {
   onPress?: IPressHandler;
   onPressIn?: IPressHandler;
   onPressOut?: IPressHandler;
@@ -83,7 +87,8 @@ export interface IAngularPressableProps extends IAccessibilityProps, IAriaProps
   nextFocusLeft?: number;
   nextFocusRight?: number;
   nextFocusUp?: number;
-  style?: IStyleProp<IViewStyle> | ((state: IPressState) => IStyleProp<IViewStyle>);
+  style?:
+    IStyleProp<IViewStyle> | ((state: IPressState) => IStyleProp<IViewStyle>);
 }
 
 // What the Pressable component itself takes as plain @Input()s: the full surface minus the press/
@@ -105,7 +110,9 @@ export type IAngularPressableInputs = Omit<
   | 'onAccessibilityEscape'
 >;
 
-function isStyleFn(value: unknown): value is (state: IPressState) => IStyleProp<IViewStyle> {
+function isStyleFn(
+  value: unknown,
+): value is (state: IPressState) => IStyleProp<IViewStyle> {
   return typeof value === 'function';
 }
 
@@ -118,7 +125,9 @@ function asSymbioteEvent(event: unknown): ISymbioteEvent | undefined {
 @Component({
   selector: 'Pressable, symbiote-pressable',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [ViewHost, SymbioteHostPropsDirective],
   template: `
@@ -186,10 +195,13 @@ export class Pressable implements IAngularPressableInputs, OnChanges, DoCheck {
   @Input() accessibilityRole?: IAngularPressableProps['accessibilityRole'];
   @Input() accessibilityState?: IAccessibilityStateValue;
   @Input() accessibilityValue?: IAngularPressableProps['accessibilityValue'];
-  @Input() accessibilityActions?: IAngularPressableProps['accessibilityActions'];
+  @Input()
+  accessibilityActions?: IAngularPressableProps['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;
@@ -215,7 +227,8 @@ export class Pressable implements IAngularPressableInputs, OnChanges, DoCheck {
   @Input() id?: string;
   @Input() role?: IAngularPressableProps['role'];
 
-  @ViewChild('host', { read: ElementRef }) private hostElement?: ElementRef<unknown>;
+  @ViewChild('host', { read: ElementRef })
+  private hostElement?: ElementRef<unknown>;
 
   // INTERNAL mutable state, driven by the press machine rather than by an @Input, so ngOnChanges
   // can never cover it - it carries its OWN signal, which is what lets the memoized bag below stay
@@ -293,7 +306,10 @@ export class Pressable implements IAngularPressableInputs, OnChanges, DoCheck {
       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,
@@ -304,8 +320,10 @@ export class Pressable implements IAngularPressableInputs, OnChanges, DoCheck {
       accessibilityElementsHidden: this.accessibilityElementsHidden,
       accessibilityIgnoresInvertColors: this.accessibilityIgnoresInvertColors,
       accessibilityLanguage: this.accessibilityLanguage,
-      accessibilityRespondsToUserInteraction: this.accessibilityRespondsToUserInteraction,
-      accessibilityShowsLargeContentViewer: this.accessibilityShowsLargeContentViewer,
+      accessibilityRespondsToUserInteraction:
+        this.accessibilityRespondsToUserInteraction,
+      accessibilityShowsLargeContentViewer:
+        this.accessibilityShowsLargeContentViewer,
       accessibilityLargeContentTitle: this.accessibilityLargeContentTitle,
       'aria-label': this.ariaLabel,
       'aria-busy': this.ariaBusy,
@@ -327,7 +345,9 @@ export class Pressable implements IAngularPressableInputs, OnChanges, DoCheck {
   }
 
   get resolvedRippleProps(): Record<string, unknown> | undefined {
-    return this.android_ripple === undefined ? undefined : rippleProps(this.android_ripple);
+    return this.android_ripple === undefined
+      ? undefined
+      : rippleProps(this.android_ripple);
   }
 
   // Flat bag for `[symbioteHostProps]` (Renderer2.setProperty per key) - see primitives/shared.ts.
@@ -352,32 +372,38 @@ export class Pressable implements IAngularPressableInputs, OnChanges, DoCheck {
       accessible: this.accessible,
       ...this.foldedAccessibility,
       android_disableSound: this.android_disableSound,
-      nativeBackgroundAndroid: this.resolvedRippleProps?.nativeBackgroundAndroid,
-      nativeForegroundAndroid: this.resolvedRippleProps?.nativeForegroundAndroid,
+      nativeBackgroundAndroid:
+        this.resolvedRippleProps?.nativeBackgroundAndroid,
+      nativeForegroundAndroid:
+        this.resolvedRippleProps?.nativeForegroundAndroid,
     };
   });
 
   handlePressIn(event: unknown): void {
     const symbioteEvent = asSymbioteEvent(event);
-    if (shouldSuppressPress(this.disabled) || symbioteEvent === undefined) return;
+    if (shouldSuppressPress(this.disabled) || symbioteEvent === undefined)
+      return;
     this.handlers.handlePressIn(symbioteEvent);
   }
 
   handlePressOut(event: unknown): void {
     const symbioteEvent = asSymbioteEvent(event);
-    if (shouldSuppressPress(this.disabled) || symbioteEvent === undefined) return;
+    if (shouldSuppressPress(this.disabled) || symbioteEvent === undefined)
+      return;
     this.handlers.handlePressOut(symbioteEvent);
   }
 
   handlePress(event: unknown): void {
     const symbioteEvent = asSymbioteEvent(event);
-    if (shouldSuppressPress(this.disabled) || symbioteEvent === undefined) return;
+    if (shouldSuppressPress(this.disabled) || symbioteEvent === undefined)
+      return;
     this.handlers.handlePress(symbioteEvent);
   }
 
   handleResponderMove(event: unknown): void {
     const symbioteEvent = asSymbioteEvent(event);
-    if (shouldSuppressPress(this.disabled) || symbioteEvent === undefined) return;
+    if (shouldSuppressPress(this.disabled) || symbioteEvent === undefined)
+      return;
     this.handlers.handleResponderMove(symbioteEvent);
   }
 
@@ -398,14 +424,18 @@ export class Pressable implements IAngularPressableInputs, OnChanges, DoCheck {
   // is listening anyway, mirroring core's noteHoverNoop but off `.observed` instead of an @Input.
   private noteHoverNoop(): void {
     if (this.hoverIn.observed || this.hoverOut.observed) {
-      dlog('Pressable hover is a no-op on this host (no pointer-enter/leave event)');
+      dlog(
+        'Pressable hover is a no-op on this host (no pointer-enter/leave event)',
+      );
     }
   }
 
   // Wraps an @Output() as an IPressHandler only while it has a subscriber, so an unbound
   // (longPress) still skips arming the timer, matching createPressHandlers' "undefined means
   // nobody cares" contract.
-  private emitterHandler(emitter: EventEmitter<ISymbioteEvent>): IPressHandler | undefined {
+  private emitterHandler(
+    emitter: EventEmitter<ISymbioteEvent>,
+  ): IPressHandler | undefined {
     return emitter.observed ? event => emitter.emit(event) : undefined;
   }
 

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

@@ -60,7 +60,8 @@ type IHostProps = Record<string, unknown>;
 // 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. Read the React reference for the
 // native prop names.
-export interface IAngularRefreshControlProps extends IAccessibilityProps, IAriaProps {
+export interface IAngularRefreshControlProps
+  extends IAccessibilityProps, IAriaProps {
   refreshing: boolean;
   // RN's onRefresh is `() => void | Promise<void>`, the handler may be async; the promise is
   // fire-and-forget (native already starts refreshing on the gesture).
@@ -97,7 +98,9 @@ export type IAngularRefreshControlInputs = Omit<
 @Component({
   selector: 'RefreshControl',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [RefreshControlHost, SymbioteHostPropsDirective],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -116,7 +119,12 @@ export type IAngularRefreshControlInputs = Omit<
   `,
 })
 export class RefreshControl
-  implements IAngularRefreshControlInputs, OnInit, OnChanges, DoCheck, AfterViewInit
+  implements
+    IAngularRefreshControlInputs,
+    OnInit,
+    OnChanges,
+    DoCheck,
+    AfterViewInit
 {
   // Controlled prop the parent owns; required to match the React reference surface.
   @Input({ required: true }) refreshing!: boolean;
@@ -142,8 +150,10 @@ export class RefreshControl
   @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;
@@ -218,7 +228,9 @@ export class RefreshControl
       this.lastNativeRefreshing = this.refreshing;
       return;
     }
-    this.syncNativeRefreshing(this.refreshNativeNode ?? this.host?.nativeElement);
+    this.syncNativeRefreshing(
+      this.refreshNativeNode ?? this.host?.nativeElement,
+    );
   }
 
   // Native starts the spinner before JS runs. Mirror RN's RefreshControl controlled-component
@@ -303,8 +315,10 @@ export class RefreshControl
       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/safe-area-view/index.ts

@@ -42,7 +42,8 @@ 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>;
   onLayout?: (event: ISymbioteEvent) => void;
 }
@@ -62,7 +63,9 @@ 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,
@@ -79,7 +82,9 @@ export type IAngularSafeAreaViewInputs = Omit<
     </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
@@ -99,8 +104,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;
@@ -199,8 +206,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,

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>
       }