@symbiote-native/navigation 2.1.0 → 3.0.0

package/src/angular/drawer/index.ts

@@ -65,7 +65,10 @@ import {
   View,
   WindowDimensionsService,
 } from '@symbiote-native/angular';
-import type { IDescriptor, IDescriptorChild } from '@symbiote-native/components';
+import type {
+  IDescriptor,
+  IDescriptorChild,
+} from '@symbiote-native/components';
 import {
   DRAWER_DEFAULT_OVERLAY_COLOR,
   NAVIGATION_EVENT_BLUR,
@@ -132,7 +135,10 @@ let drawerInstanceCounter = 0;
         @for (slot of slotOrder(); track slot) {
           @switch (slot) {
             @case ('content') {
-              <AnimatedView [style]="contentStyle()" [animatedProps]="slotAnimatedProps('content')">
+              <AnimatedView
+                [style]="contentStyle()"
+                [animatedProps]="slotAnimatedProps('content')"
+              >
                 @if (focusedRoute(); as route) {
                   @if (componentForRoute(route); as component) {
                     <ng-container
@@ -153,7 +159,10 @@ let drawerInstanceCounter = 0;
               />
             }
             @case ('panel') {
-              <AnimatedView [style]="panelStyle()" [animatedProps]="slotAnimatedProps('panel')">
+              <AnimatedView
+                [style]="panelStyle()"
+                [animatedProps]="slotAnimatedProps('panel')"
+              >
                 @if (drawerContentTemplate) {
                   <ng-container
                     *ngTemplateOutlet="
@@ -170,7 +179,9 @@ let drawerInstanceCounter = 0;
     }
   `,
 })
-export class Drawer implements AfterContentInit, OnChanges, OnDestroy, IDrawerNavigatorHandle {
+export class Drawer
+  implements AfterContentInit, OnChanges, OnDestroy, IDrawerNavigatorHandle
+{
   @ContentChildren(DrawerScreenDirective)
   private readonly drawerScreenChildren!: QueryList<DrawerScreenDirective>;
   @ContentChild('drawerContent', { read: TemplateRef })
@@ -187,15 +198,19 @@ export class Drawer implements AfterContentInit, OnChanges, OnDestroy, IDrawerNa
   @Input() swipeMinDistance?: number;
   @Input() swipeMinVelocity?: number;
 
-  private readonly windowDimensions = inject(WindowDimensionsService).dimensions;
+  private readonly windowDimensions = inject(WindowDimensionsService)
+    .dimensions;
 
   private readonly routeIdPrefix = `drawer-${(drawerInstanceCounter += 1)}`;
   // Keyed by name -> the LIVE DrawerScreenDirective instance - see stack.ts's matching comment
   // for why a snapshot copy would go stale on an in-place `[options]`/`[component]` change.
   private readonly registry = new Map<string, DrawerScreenDirective>();
-  private drawerScreenChildrenSubscription: { unsubscribe: () => void } | undefined;
+  private drawerScreenChildrenSubscription:
+    { unsubscribe: () => void } | undefined;
 
-  private readonly stateSignal = signal<IDrawerRouterState | undefined>(undefined);
+  private readonly stateSignal = signal<IDrawerRouterState | undefined>(
+    undefined,
+  );
   readonly state = this.stateSignal.asReadonly();
 
   private currentEmitterKey: string | undefined;
@@ -260,9 +275,16 @@ export class Drawer implements AfterContentInit, OnChanges, OnDestroy, IDrawerNa
       dlog('Drawer: gesture grant');
       this.dragStartProgress = (this.stateSignal()?.isOpen ?? false) ? 1 : 0;
     },
-    onPanResponderMove: (_event: ISymbioteEvent, gestureState: IPanResponderGestureState): void => {
+    onPanResponderMove: (
+      _event: ISymbioteEvent,
+      gestureState: IPanResponderGestureState,
+    ): void => {
       this.progress.setValue(
-        resolveDragProgress(gestureState, this.dragStartProgress, this.optionsSnapshot()),
+        resolveDragProgress(
+          gestureState,
+          this.dragStartProgress,
+          this.optionsSnapshot(),
+        ),
       );
     },
     onPanResponderRelease: (
@@ -288,9 +310,10 @@ export class Drawer implements AfterContentInit, OnChanges, OnDestroy, IDrawerNa
   ngAfterContentInit(): void {
     this.rebuildRegistry();
     this.initializeState();
-    this.drawerScreenChildrenSubscription = this.drawerScreenChildren.changes.subscribe(() => {
-      this.rebuildRegistry();
-    });
+    this.drawerScreenChildrenSubscription =
+      this.drawerScreenChildren.changes.subscribe(() => {
+        this.rebuildRegistry();
+      });
   }
 
   ngOnDestroy(): void {
@@ -318,7 +341,9 @@ export class Drawer implements AfterContentInit, OnChanges, OnDestroy, IDrawerNa
     const routes = this.routesFromRegistry();
     if (routes.length === 0)
       dlog('Drawer: no <ng-template symbioteDrawerScreen> children registered');
-    this.stateSignal.set(createInitialDrawerRouterState(routes, this.initialRouteName));
+    this.stateSignal.set(
+      createInitialDrawerRouterState(routes, this.initialRouteName),
+    );
   }
 
   private dispatch(action: IDrawerRouterAction): void {
@@ -343,10 +368,12 @@ export class Drawer implements AfterContentInit, OnChanges, OnDestroy, IDrawerNa
   // ngOnChanges (below) pushes every input change in here instead, which drawerRoot/slotsMap CAN
   // track correctly since reading a signal (unlike a plain field) IS visible to computed()'s
   // dependency collection.
-  private readonly optionsSnapshot = signal<IDrawerOptions>(this.buildOptionsSnapshot());
-  private readonly drawerStyleSnapshot = signal<IStyleProp<IViewStyle> | undefined>(
-    this.drawerStyle,
+  private readonly optionsSnapshot = signal<IDrawerOptions>(
+    this.buildOptionsSnapshot(),
   );
+  private readonly drawerStyleSnapshot = signal<
+    IStyleProp<IViewStyle> | undefined
+  >(this.drawerStyle);
 
   ngOnChanges(): void {
     this.optionsSnapshot.set(this.buildOptionsSnapshot());
@@ -384,10 +411,13 @@ export class Drawer implements AfterContentInit, OnChanges, OnDestroy, IDrawerNa
   private readonly drawerRoot = computed<IDescriptor>(() =>
     renderDrawer(
       {
-        overlayColor: this.optionsSnapshot().overlayColor ?? DRAWER_DEFAULT_OVERLAY_COLOR,
+        overlayColor:
+          this.optionsSnapshot().overlayColor ?? DRAWER_DEFAULT_OVERLAY_COLOR,
         drawerStyle: this.drawerStyleSnapshot(),
         contentPassthrough: {},
-        overlayPassthrough: this.isAnimated() ? this.overlayResponderPassthrough() : {},
+        overlayPassthrough: this.isAnimated()
+          ? this.overlayResponderPassthrough()
+          : {},
         panelPassthrough: {},
       },
       this.optionsSnapshot(),
@@ -400,7 +430,8 @@ export class Drawer implements AfterContentInit, OnChanges, OnDestroy, IDrawerNa
     const map = new Map<IDrawerSlot, IDescriptor>();
     order.forEach((slot, index) => {
       const child: IDescriptorChild | undefined = root.children[index];
-      if (child !== undefined && typeof child !== 'string') map.set(slot, child);
+      if (child !== undefined && typeof child !== 'string')
+        map.set(slot, child);
     });
     return map;
   });
@@ -433,7 +464,9 @@ export class Drawer implements AfterContentInit, OnChanges, OnDestroy, IDrawerNa
     animatedStyle: () => Record<string, unknown>,
   ): Record<string, unknown> {
     const base = this.slotsMap().get(slot)?.props.style;
-    return this.isAnimated() ? flattenStyle([base, animatedStyle()]) : flattenStyle(base);
+    return this.isAnimated()
+      ? flattenStyle([base, animatedStyle()])
+      : flattenStyle(base);
   }
 
   contentStyle(): Record<string, unknown> {
@@ -452,7 +485,10 @@ export class Drawer implements AfterContentInit, OnChanges, OnDestroy, IDrawerNa
   overlayStyle(): Record<string, unknown> {
     return this.slotStyle('overlay', () => {
       const g = resolveDrawerGeometry(this.optionsSnapshot());
-      const { opacity, translateX } = resolveDrawerSlotInterpolation(g, 'overlay');
+      const { opacity, translateX } = resolveDrawerSlotInterpolation(
+        g,
+        'overlay',
+      );
       return {
         opacity: this.progress.interpolate(opacity),
         transform: [{ translateX: this.progress.interpolate(translateX) }],
@@ -513,8 +549,12 @@ export class Drawer implements AfterContentInit, OnChanges, OnDestroy, IDrawerNa
   focusedRouteEmitter(): INavigationEmitter {
     const key = this.focusedRoute()?.key;
     return untracked(() => {
-      if (key === this.currentEmitterKey && this.currentEmitter) return this.currentEmitter;
-      const { blurKey, focusKey } = diffFocusedRoute(this.currentEmitterKey, key);
+      if (key === this.currentEmitterKey && this.currentEmitter)
+        return this.currentEmitter;
+      const { blurKey, focusKey } = diffFocusedRoute(
+        this.currentEmitterKey,
+        key,
+      );
       if (blurKey !== undefined && this.currentEmitter) {
         dlog('Drawer: previous route blurred');
         this.currentEmitter.emit(NAVIGATION_EVENT_BLUR);
@@ -533,7 +573,9 @@ export class Drawer implements AfterContentInit, OnChanges, OnDestroy, IDrawerNa
     });
   }
 
-  drawerContentContext(currentState: IDrawerRouterState): IDrawerContentContext {
+  drawerContentContext(
+    currentState: IDrawerRouterState,
+  ): IDrawerContentContext {
     const descriptors: IDrawerDescriptorMap = {};
     for (const route of currentState.routes) {
       const entry = this.registry.get(route.name);
@@ -543,6 +585,8 @@ export class Drawer implements AfterContentInit, OnChanges, OnDestroy, IDrawerNa
         navigation: this,
       };
     }
-    return { $implicit: { state: currentState, descriptors, navigation: this } };
+    return {
+      $implicit: { state: currentState, descriptors, navigation: this },
+    };
   }
 }

package/src/angular/index.ts

@@ -15,7 +15,11 @@ export type {
   IScreenOptionsArgs,
   IScreenOptionsResolver,
 } from './screen.directive';
-export type { IScreenOptions, IStackAnimation, IStackPresentation } from '../core';
+export type {
+  IScreenOptions,
+  IStackAnimation,
+  IStackPresentation,
+} from '../core';
 
 export {
   injectNavigation,
@@ -46,7 +50,10 @@ export type { ILinkingConfig, IScreenLinkingConfig } from '../core';
 export { Tab } from './tabs';
 export type { ITabNavigatorHandle } from './tabs';
 export { TabScreenDirective } from './tab-screen.directive';
-export type { ITabScreenOptionsArgs, ITabScreenOptionsResolver } from './tab-screen.directive';
+export type {
+  ITabScreenOptionsArgs,
+  ITabScreenOptionsResolver,
+} from './tab-screen.directive';
 export type { ITabOptions, ITabBarIcon } from '../core';
 
 // Drawer: the swipeable drawer navigator, a PURE-JS UI (PanResponder + Animated, no
@@ -54,10 +61,19 @@ export type { ITabOptions, ITabBarIcon } from '../core';
 // ../register import above). See drawer.ts's header for the feasibility note re:
 // react-native-gesture-handler / react-native-reanimated parity gaps.
 export { Drawer } from './drawer';
-export type { IDrawerNavigatorHandle, IDrawerDescriptorMap, IDrawerContentContext } from './drawer';
+export type {
+  IDrawerNavigatorHandle,
+  IDrawerDescriptorMap,
+  IDrawerContentContext,
+} from './drawer';
 export { DrawerScreenDirective } from './drawer-screen.directive';
 export type {
   IDrawerScreenOptionsArgs,
   IDrawerScreenOptionsResolver,
 } from './drawer-screen.directive';
-export type { IDrawerOptions, IDrawerScreenOptions, IDrawerType, IDrawerPosition } from '../core';
+export type {
+  IDrawerOptions,
+  IDrawerScreenOptions,
+  IDrawerType,
+  IDrawerPosition,
+} from '../core';

package/src/angular/injectors/inject-focus-effect.ts

@@ -26,8 +26,14 @@ export function injectFocusEffect(effect: IFocusEffectCallback): void {
     cleanup = undefined;
   };
 
-  const unsubscribeFocus = context.emitter.addListener(NAVIGATION_EVENT_FOCUS, runEffect);
-  const unsubscribeBlur = context.emitter.addListener(NAVIGATION_EVENT_BLUR, runCleanup);
+  const unsubscribeFocus = context.emitter.addListener(
+    NAVIGATION_EVENT_FOCUS,
+    runEffect,
+  );
+  const unsubscribeBlur = context.emitter.addListener(
+    NAVIGATION_EVENT_BLUR,
+    runCleanup,
+  );
 
   destroyRef.onDestroy(() => {
     unsubscribeFocus();

package/src/angular/injectors/inject-is-focused.ts

@@ -13,11 +13,13 @@ export function injectIsFocused(): Signal<boolean> {
   const destroyRef = inject(DestroyRef);
   const isFocused = signal(false);
 
-  const unsubscribeFocus = context.emitter.addListener(NAVIGATION_EVENT_FOCUS, () =>
-    isFocused.set(true),
+  const unsubscribeFocus = context.emitter.addListener(
+    NAVIGATION_EVENT_FOCUS,
+    () => isFocused.set(true),
   );
-  const unsubscribeBlur = context.emitter.addListener(NAVIGATION_EVENT_BLUR, () =>
-    isFocused.set(false),
+  const unsubscribeBlur = context.emitter.addListener(
+    NAVIGATION_EVENT_BLUR,
+    () => isFocused.set(false),
   );
   destroyRef.onDestroy(() => {
     unsubscribeFocus();

package/src/angular/injectors/inject-navigation-state.ts

@@ -36,10 +36,13 @@ export function injectNavigationState<TResult>(
 
   const result = signal(selector({ routes: [route] }));
 
-  const unsubscribe = context.emitter.addListener(NAVIGATION_EVENT_STATE, (state: unknown) => {
-    if (!isNavigatorState(state)) return;
-    result.set(selector(state));
-  });
+  const unsubscribe = context.emitter.addListener(
+    NAVIGATION_EVENT_STATE,
+    (state: unknown) => {
+      if (!isNavigatorState(state)) return;
+      result.set(selector(state));
+    },
+  );
   destroyRef.onDestroy(unsubscribe);
 
   return result.asReadonly();

package/src/angular/injectors/inject-navigation.ts

@@ -6,11 +6,20 @@
 // surface. All pub/sub logic lives in ../../core/navigation-events; this function only reads
 // NavigationContextService and binds identity.
 
-import type { INavigationEventListener, INavigationEventName } from '../../core';
-import { requireNavigationContext, type IAnyNavigatorHandle } from '../navigation-context.service';
+import type {
+  INavigationEventListener,
+  INavigationEventName,
+} from '../../core';
+import {
+  requireNavigationContext,
+  type IAnyNavigatorHandle,
+} from '../navigation-context.service';
 
 export type INavigationHandle = IAnyNavigatorHandle & {
-  addListener: (event: INavigationEventName, listener: INavigationEventListener) => () => void;
+  addListener: (
+    event: INavigationEventName,
+    listener: INavigationEventListener,
+  ) => () => void;
   // Walks exactly ONE hop up NavigationContextService's `parent` chain to the enclosing
   // navigator's handle (plain immediate-parent walking, no named/targeted ancestor lookup).
   getParent: () => IAnyNavigatorHandle | undefined;

package/src/angular/linking.ts

@@ -22,7 +22,10 @@ export function injectLinkingIntegration(
 ): void {
   const destroyRef = inject(DestroyRef);
 
-  function applyRoute(url: string, dispatch: (name: string, params?: unknown) => void): void {
+  function applyRoute(
+    url: string,
+    dispatch: (name: string, params?: unknown) => void,
+  ): void {
     const route = resolveRouteFromUrl(config, url);
     if (route === null) {
       dlog(`injectLinkingIntegration: no route resolved for "${url}"`);

package/src/angular/navigation-context.service.ts

@@ -38,7 +38,8 @@ export class NavigationContextService {
   // package's zoneless/signals-first convention. `navigation`/`emitter` are stable for a screen's
   // whole lifetime, so they stay plain fields - no reactivity needed there.
   private readonly routeSignal = signal<IRoute<unknown> | undefined>(undefined);
-  readonly route: Signal<IRoute<unknown> | undefined> = this.routeSignal.asReadonly();
+  readonly route: Signal<IRoute<unknown> | undefined> =
+    this.routeSignal.asReadonly();
 
   navigation!: IAnyNavigatorHandle;
   emitter!: INavigationEmitter;
@@ -57,7 +58,9 @@ export class NavigationContextService {
 // identical everywhere instead of six independently-typed copies. Must be called from an
 // injection context, same requirement `inject()` itself has - every call site is the first line
 // of an injectX function, which callers already only invoke from their own injection context.
-export function requireNavigationContext(injectorName: string): NavigationContextService {
+export function requireNavigationContext(
+  injectorName: string,
+): NavigationContextService {
   const context = inject(NavigationContextService, { optional: true });
   if (!context) {
     throw new Error(

package/src/angular/navigation-scope.directive.ts

@@ -9,7 +9,10 @@
 
 import { Directive, Input, inject, type OnChanges } from '@angular/core';
 import type { INavigationEmitter, IRoute } from '../core';
-import { NavigationContextService, type IAnyNavigatorHandle } from './navigation-context.service';
+import {
+  NavigationContextService,
+  type IAnyNavigatorHandle,
+} from './navigation-context.service';
 
 @Directive({
   selector: '[symbioteNavigationScope]',
@@ -17,7 +20,8 @@ import { NavigationContextService, type IAnyNavigatorHandle } from './navigation
   providers: [NavigationContextService],
 })
 export class NavigationScopeDirective implements OnChanges {
-  @Input({ required: true, alias: 'symbioteNavigationScope' }) route!: IRoute<unknown>;
+  @Input({ required: true, alias: 'symbioteNavigationScope' })
+  route!: IRoute<unknown>;
   @Input({ required: true }) navigation!: IAnyNavigatorHandle;
   @Input({ required: true }) emitter!: INavigationEmitter;
 

package/src/angular/screen.directive.ts

@@ -7,7 +7,12 @@
 // independent of whether the template is ever instantiated).
 
 import { Directive, Input, type Type } from '@angular/core';
-import type { ISearchBarCommands, ISearchBarOptions, IScreenOptions, IRoute } from '../core';
+import type {
+  ISearchBarCommands,
+  ISearchBarOptions,
+  IScreenOptions,
+  IRoute,
+} from '../core';
 import type { INavigatorHandle } from '../core';
 
 // The imperative ref (focus/blur/clearText/setText/cancelSearch/toggleCancelButton) carries a
@@ -21,7 +26,10 @@ export type IAngularSearchBarOptions = ISearchBarOptions & {
   ref?: { current: ISearchBarCommands | null };
 };
 
-export type IAngularScreenOptions = Omit<IScreenOptions, 'headerSearchBarOptions'> & {
+export type IAngularScreenOptions = Omit<
+  IScreenOptions,
+  'headerSearchBarOptions'
+> & {
   headerSearchBarOptions?: IAngularSearchBarOptions;
 };
 
@@ -34,7 +42,9 @@ export type IScreenOptionsArgs = {
   navigation: INavigatorHandle;
 };
 
-export type IScreenOptionsResolver = (args: IScreenOptionsArgs) => IAngularScreenOptions;
+export type IScreenOptionsResolver = (
+  args: IScreenOptionsArgs,
+) => IAngularScreenOptions;
 
 @Directive({
   selector: 'ng-template[symbioteScreen]',

package/src/angular/search-bar-ref.directive.ts

@@ -7,7 +7,14 @@
 // needed here: buildSearchBarHandle's own methods are already a LAZY getter over the node,
 // tolerant of the node existing-but-not-yet-committed, same contract every adapter shares).
 
-import { Directive, Input, inject, type OnDestroy, type OnInit, ElementRef } from '@angular/core';
+import {
+  Directive,
+  Input,
+  inject,
+  type OnDestroy,
+  type OnInit,
+  ElementRef,
+} from '@angular/core';
 import { isSymbioteNode, dlog, debugNodeId } from '@symbiote-native/engine';
 import { buildSearchBarHandle } from '../core';
 import type { ISearchBarCommands } from '../core';
@@ -17,7 +24,8 @@ import type { ISearchBarCommands } from '../core';
   standalone: true,
 })
 export class SearchBarRefDirective implements OnInit, OnDestroy {
-  @Input('symbioteSearchBarRef') ref: { current: ISearchBarCommands | null } | undefined;
+  @Input('symbioteSearchBarRef') ref:
+    { current: ISearchBarCommands | null } | undefined;
 
   private readonly elementRef = inject<ElementRef<unknown>>(ElementRef);
 

package/src/angular/stack/index.ts

@@ -91,13 +91,18 @@ import type {
 import { NavigationScopeDirective } from '../navigation-scope.directive';
 import { SearchBarRefDirective } from '../search-bar-ref.directive';
 import { ScreenDirective } from '../screen.directive';
-import type { IAngularScreenOptions, IScreenOptionsArgs } from '../screen.directive';
+import type {
+  IAngularScreenOptions,
+  IScreenOptionsArgs,
+} from '../screen.directive';
 
 export type { INavigatorHandle } from '../../core';
 
 // backTitleVisible defaults to `true` on both platforms per the codegen spec's own default - no
 // ios/android divergence in v1 scope (mirrors react/stack.ts's own constant exactly).
-const NAVIGATOR_PLATFORM: INavigatorPlatform = { defaultHeaderBackTitleVisible: true };
+const NAVIGATOR_PLATFORM: INavigatorPlatform = {
+  defaultHeaderBackTitleVisible: true,
+};
 
 let stackInstanceCounter = 0;
 
@@ -162,7 +167,9 @@ let stackInstanceCounter = 0;
     </ng-template>
 
     <ng-template #headerAndContentTpl let-route let-index="index">
-      <RNSScreenStackHeaderConfig [symbioteHostProps]="headerConfigProps(route, index)">
+      <RNSScreenStackHeaderConfig
+        [symbioteHostProps]="headerConfigProps(route, index)"
+      >
         @if (hasSearchBar(route)) {
           <RNSScreenStackHeaderSubview [symbioteHostProps]="headerSubviewProps">
             <RNSSearchBar
@@ -172,7 +179,9 @@ let stackInstanceCounter = 0;
           </RNSScreenStackHeaderSubview>
         }
       </RNSScreenStackHeaderConfig>
-      <RNSScreenContentWrapper [symbioteHostProps]="contentWrapperProps(route, index)">
+      <RNSScreenContentWrapper
+        [symbioteHostProps]="contentWrapperProps(route, index)"
+      >
         <ng-container
           [symbioteNavigationScope]="route"
           [navigation]="this"
@@ -185,7 +194,8 @@ let stackInstanceCounter = 0;
   `,
 })
 export class Stack implements AfterContentInit, OnDestroy, INavigatorHandle {
-  @ContentChildren(ScreenDirective) private readonly screenChildren!: QueryList<ScreenDirective>;
+  @ContentChildren(ScreenDirective)
+  private readonly screenChildren!: QueryList<ScreenDirective>;
 
   @Input() initialRouteName?: string;
   @Input() screenOptions?: IAngularScreenOptions;
@@ -215,7 +225,8 @@ export class Stack implements AfterContentInit, OnDestroy, INavigatorHandle {
 
   readonly push = (name: string, params?: unknown): void =>
     this.dispatch({ type: 'push', route: this.createRoute(name, params) });
-  readonly pop = (count?: number): void => this.dispatch({ type: 'pop', count });
+  readonly pop = (count?: number): void =>
+    this.dispatch({ type: 'pop', count });
   readonly popToTop = (): void => this.dispatch({ type: 'popToTop' });
   readonly popTo = (key: string): void => this.dispatch({ type: 'popTo', key });
   readonly replace = (name: string, params?: unknown): void =>
@@ -224,14 +235,17 @@ export class Stack implements AfterContentInit, OnDestroy, INavigatorHandle {
     this.dispatch({ type: 'setParams', key, params });
   readonly reset = (nextState: INavigatorState): void =>
     this.dispatch({ type: 'reset', state: nextState });
-  readonly canGoBack = (): boolean => (this.stateSignal()?.routes.length ?? 0) > 1;
+  readonly canGoBack = (): boolean =>
+    (this.stateSignal()?.routes.length ?? 0) > 1;
 
   ngAfterContentInit(): void {
     this.rebuildRegistry();
     this.initializeState();
-    this.screenChildrenSubscription = this.screenChildren.changes.subscribe(() => {
-      this.rebuildRegistry();
-    });
+    this.screenChildrenSubscription = this.screenChildren.changes.subscribe(
+      () => {
+        this.rebuildRegistry();
+      },
+    );
   }
 
   ngOnDestroy(): void {
@@ -261,24 +275,36 @@ export class Stack implements AfterContentInit, OnDestroy, INavigatorHandle {
 
   private initializeState(): void {
     if (this.stateSignal() !== undefined) return;
-    const initialRouteName = this.initialRouteName ?? this.registry.keys().next().value;
+    const initialRouteName =
+      this.initialRouteName ?? this.registry.keys().next().value;
     if (initialRouteName === undefined) {
       dlog('Stack: no <ng-template symbioteScreen> children registered');
       this.stateSignal.set(
-        createInitialNavigatorState({ key: this.routeIdPrefix, name: '', params: undefined }),
+        createInitialNavigatorState({
+          key: this.routeIdPrefix,
+          name: '',
+          params: undefined,
+        }),
       );
       return;
     }
     this.stateSignal.set(
       createInitialNavigatorState(
-        this.createRoute(initialRouteName, this.registry.get(initialRouteName)?.initialParams),
+        this.createRoute(
+          initialRouteName,
+          this.registry.get(initialRouteName)?.initialParams,
+        ),
       ),
     );
   }
 
   private createRoute(name: string, params: unknown): IRoute<unknown> {
     this.routeSequence += 1;
-    return { key: `${this.routeIdPrefix}-${name}-${this.routeSequence}`, name, params };
+    return {
+      key: `${this.routeIdPrefix}-${name}-${this.routeSequence}`,
+      name,
+      params,
+    };
   }
 
   private dispatch(action: INavigatorAction): void {
@@ -361,7 +387,8 @@ export class Stack implements AfterContentInit, OnDestroy, INavigatorHandle {
       isAndroid: Platform.OS === 'android',
       screenPassthrough: {
         [SCREEN_ON_DISMISSED]: () => this.dispatch({ type: 'pop', count: 1 }),
-        [SCREEN_ON_HEADER_BACK_BUTTON_CLICKED]: () => this.dispatch({ type: 'pop', count: 1 }),
+        [SCREEN_ON_HEADER_BACK_BUTTON_CLICKED]: () =>
+          this.dispatch({ type: 'pop', count: 1 }),
         [SCREEN_ON_APPEAR]: () => {
           dlog(`Stack: route "${route.name}" appeared (focus)`);
           this.emitterFor(route.key).emit(NAVIGATION_EVENT_FOCUS);
@@ -380,14 +407,19 @@ export class Stack implements AfterContentInit, OnDestroy, INavigatorHandle {
   }
 
   outerScreenIsModal(route: IRoute<unknown>, index: number): boolean {
-    return this.planFor(route, index).screenViewName === RNS_MODAL_SCREEN_VIEW_NAME;
+    return (
+      this.planFor(route, index).screenViewName === RNS_MODAL_SCREEN_VIEW_NAME
+    );
   }
 
   isInModal(route: IRoute<unknown>, index: number): boolean {
     return this.planFor(route, index).inModal;
   }
 
-  screenHostProps(route: IRoute<unknown>, index: number): Record<string, unknown> {
+  screenHostProps(
+    route: IRoute<unknown>,
+    index: number,
+  ): Record<string, unknown> {
     return this.planFor(route, index).screenProps;
   }
 
@@ -395,16 +427,25 @@ export class Stack implements AfterContentInit, OnDestroy, INavigatorHandle {
     return { style: resolveHeaderInModalStackStyle() };
   }
 
-  innerScreenProps(route: IRoute<unknown>, index: number): Record<string, unknown> {
+  innerScreenProps(
+    route: IRoute<unknown>,
+    index: number,
+  ): Record<string, unknown> {
     const plan = this.planFor(route, index);
     return { style: plan.innerScreenStyle, activityState: plan.activityState };
   }
 
-  contentWrapperProps(route: IRoute<unknown>, index: number): Record<string, unknown> {
+  contentWrapperProps(
+    route: IRoute<unknown>,
+    index: number,
+  ): Record<string, unknown> {
     return this.planFor(route, index).contentWrapperProps;
   }
 
-  headerConfigProps(route: IRoute<unknown>, index: number): Record<string, unknown> {
+  headerConfigProps(
+    route: IRoute<unknown>,
+    index: number,
+  ): Record<string, unknown> {
     return this.planFor(route, index).headerConfig.props;
   }
 
@@ -412,11 +453,16 @@ export class Stack implements AfterContentInit, OnDestroy, INavigatorHandle {
     return this.mergedOptionsFor(route).headerSearchBarOptions !== undefined;
   }
 
-  searchBarRef(route: IRoute<unknown>): { current: ISearchBarCommands | null } | undefined {
+  searchBarRef(
+    route: IRoute<unknown>,
+  ): { current: ISearchBarCommands | null } | undefined {
     return this.mergedOptionsFor(route).headerSearchBarOptions?.ref;
   }
 
-  searchBarProps(route: IRoute<unknown>, index: number): Record<string, unknown> {
+  searchBarProps(
+    route: IRoute<unknown>,
+    index: number,
+  ): Record<string, unknown> {
     return this.planFor(route, index).searchBarProps ?? {};
   }
 }

package/src/angular/tab-screen.directive.ts

@@ -12,7 +12,9 @@ export type ITabScreenOptionsArgs = {
   navigation: ITabNavigatorHandle;
 };
 
-export type ITabScreenOptionsResolver = (props: ITabScreenOptionsArgs) => ITabOptions;
+export type ITabScreenOptionsResolver = (
+  props: ITabScreenOptionsArgs,
+) => ITabOptions;
 
 @Directive({
   selector: 'ng-template[symbioteTabScreen]',