@symbiote-native/navigation 1.0.0

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

@@ -0,0 +1,37 @@
+// Angular injection function: runs `effect` while the route is focused and runs its own returned
+// cleanup on blur - exactly a plain effect's contract, just re-armed on every focus/blur pair
+// instead of once on construction - mirrors @react-navigation's useFocusEffect. Named `effect` for
+// API parity with the React/Vue twins, NOT Angular's own `effect()` reactive primitive (this
+// callback re-runs on focus/blur events, not on a signal dependency change) - callers should keep
+// `effect` referentially stable across calls they don't intend to change (this function is called
+// once per component construction, nothing here re-subscribes automatically otherwise).
+
+import { DestroyRef, inject } from '@angular/core';
+import { NAVIGATION_EVENT_BLUR, NAVIGATION_EVENT_FOCUS } from '../../core';
+import { requireNavigationContext } from '../navigation-context.service';
+
+export type IFocusEffectCallback = () => (() => void) | void;
+
+export function injectFocusEffect(effect: IFocusEffectCallback): void {
+  const context = requireNavigationContext('injectFocusEffect');
+  const destroyRef = inject(DestroyRef);
+
+  let cleanup: ReturnType<IFocusEffectCallback>;
+
+  const runEffect = (): void => {
+    cleanup = effect();
+  };
+  const runCleanup = (): void => {
+    cleanup?.();
+    cleanup = undefined;
+  };
+
+  const unsubscribeFocus = context.emitter.addListener(NAVIGATION_EVENT_FOCUS, runEffect);
+  const unsubscribeBlur = context.emitter.addListener(NAVIGATION_EVENT_BLUR, runCleanup);
+
+  destroyRef.onDestroy(() => {
+    unsubscribeFocus();
+    unsubscribeBlur();
+    runCleanup();
+  });
+}

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

@@ -0,0 +1,28 @@
+// Angular injection function: subscribes to the route's focus/blur pair and returns a Signal of
+// whether it's currently focused - mirrors @react-navigation's useIsFocused. Starts `false` rather
+// than guessing from stack position: a route's emitter only fires 'focus' once the navigator's own
+// appear/mount signal lands (Stack: RNSScreen's native onAppear; Tab/Drawer: the synthesized
+// mount-time emit), so a screen genuinely isn't focused yet at the instant it's constructed.
+
+import { DestroyRef, inject, signal, type Signal } from '@angular/core';
+import { NAVIGATION_EVENT_BLUR, NAVIGATION_EVENT_FOCUS } from '../../core';
+import { requireNavigationContext } from '../navigation-context.service';
+
+export function injectIsFocused(): Signal<boolean> {
+  const context = requireNavigationContext('injectIsFocused');
+  const destroyRef = inject(DestroyRef);
+  const isFocused = signal(false);
+
+  const unsubscribeFocus = context.emitter.addListener(NAVIGATION_EVENT_FOCUS, () =>
+    isFocused.set(true),
+  );
+  const unsubscribeBlur = context.emitter.addListener(NAVIGATION_EVENT_BLUR, () =>
+    isFocused.set(false),
+  );
+  destroyRef.onDestroy(() => {
+    unsubscribeFocus();
+    unsubscribeBlur();
+  });
+
+  return isFocused.asReadonly();
+}

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

@@ -0,0 +1,46 @@
+// Angular injection function: subscribes to the router's `state` broadcast (stack.ts's `dispatch`
+// re-emits the full INavigatorState to every route's emitter after each change) and returns a
+// Signal of `selector(state)`, updating only when the emitted state changes - mirrors
+// @react-navigation's useNavigationState. The reducer/dispatch machinery it selects over lives in
+// core/navigator-state.ts; this function only wires the subscription.
+//
+// Seeded from a single-route snapshot ({ routes: [route] }) rather than left undefined: the real
+// broadcast lands after the FIRST dispatch, so a selector reading e.g. `state.routes.at(-1)?.name`
+// still resolves correctly before any navigation action for the common single-route case, closing
+// the same async gap injectIsFocused documents.
+
+import { DestroyRef, inject, signal, type Signal } from '@angular/core';
+import { NAVIGATION_EVENT_STATE } from '../../core';
+import type { INavigatorState } from '../../core';
+import { requireNavigationContext } from '../navigation-context.service';
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null;
+}
+
+function isNavigatorState(value: unknown): value is INavigatorState {
+  return isRecord(value) && Array.isArray(value.routes);
+}
+
+export function injectNavigationState<TResult>(
+  selector: (state: INavigatorState) => TResult,
+): Signal<TResult> {
+  const context = requireNavigationContext('injectNavigationState');
+  const destroyRef = inject(DestroyRef);
+  const route = context.route();
+  if (route === undefined) {
+    throw new Error(
+      "injectNavigationState: no route has been assigned to this screen's navigation scope yet",
+    );
+  }
+
+  const result = signal(selector({ routes: [route] }));
+
+  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

@@ -0,0 +1,26 @@
+// Angular injection function (calls `inject()`, so it must run in an injection context - a
+// component/directive constructor or field initializer, same requirement `inject()` itself has).
+// Returns the current screen's navigator handle (push/pop/replace/... for a Stack screen,
+// jumpTo/setParams for a Tab screen, openDrawer/... for a Drawer screen) plus addListener bound to
+// that route's own emitter - mirrors @react-navigation's `navigation.addListener('focus', cb)`
+// 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';
+
+export type INavigationHandle = IAnyNavigatorHandle & {
+  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;
+};
+
+export function injectNavigation(): INavigationHandle {
+  const context = requireNavigationContext('injectNavigation');
+  return {
+    ...context.navigation,
+    addListener: context.emitter.addListener,
+    getParent: () => context.parent?.navigation,
+  };
+}

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

@@ -0,0 +1,25 @@
+// Angular injection function: returns the current screen's route as a live Signal - mirrors
+// @react-navigation's useRoute, reactive rather than a one-shot read because a setParams call
+// swaps in a new route object (same key) while the screen stays mounted (see
+// navigation-context.service.ts's comment on why `route` is a signal there). Zero logic of its
+// own beyond that signal read.
+
+import { computed, type Signal } from '@angular/core';
+import type { IRoute } from '../../core';
+import { requireNavigationContext } from '../navigation-context.service';
+
+export function injectRoute(): Signal<IRoute<unknown>> {
+  const context = requireNavigationContext('injectRoute');
+  // A `computed` (not the raw context.route signal) so the return type narrows to
+  // `IRoute<unknown>` structurally - NavigationScopeDirective always assigns a route before any
+  // content (and therefore any injectRoute() caller) exists, so this only ever throws on misuse.
+  return computed(() => {
+    const current = context.route();
+    if (current === undefined) {
+      throw new Error(
+        "injectRoute: no route has been assigned to this screen's navigation scope yet",
+      );
+    }
+    return current;
+  });
+}

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

@@ -0,0 +1,24 @@
+// injectNavigation() returns a union (IAnyNavigatorHandle) since it doesn't know which navigator
+// mounted the calling component. When a component genuinely knows it only ever renders under a
+// Stack, this injector narrows that union ONCE, here, so call sites never write their own
+// 'push' in navigation check. Angular twin of react/hooks/use-stack-navigation.ts.
+
+import type { INavigatorHandle } from '../../core';
+import { isStackNavigatorHandle } from '../../core';
+import { injectNavigation } from './inject-navigation';
+import type { INavigationHandle } from './inject-navigation';
+
+export type IStackNavigationHandle = INavigatorHandle &
+  Pick<INavigationHandle, 'addListener' | 'getParent'>;
+
+export function injectStackNavigation(): IStackNavigationHandle {
+  const navigation = injectNavigation();
+  if (!isStackNavigatorHandle(navigation)) {
+    throw new Error(
+      'injectStackNavigation() was called from a component whose nearest navigator is not a ' +
+        'Stack. Use injectNavigation() instead if this component can render under more than one ' +
+        'navigator kind.',
+    );
+  }
+  return navigation;
+}

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

@@ -0,0 +1,20 @@
+// Twin of inject-stack-navigation.ts, narrowing to a Tab handle instead.
+
+import type { ITabNavigatorHandle } from '../../core';
+import { isTabNavigatorHandle } from '../../core';
+import { injectNavigation } from './inject-navigation';
+import type { INavigationHandle } from './inject-navigation';
+
+export type ITabNavigationHandle = ITabNavigatorHandle &
+  Pick<INavigationHandle, 'addListener' | 'getParent'>;
+
+export function injectTabNavigation(): ITabNavigationHandle {
+  const navigation = injectNavigation();
+  if (!isTabNavigatorHandle(navigation)) {
+    throw new Error(
+      'injectTabNavigation() was called from a component whose nearest navigator is not a Tab. ' +
+        'Use injectNavigation() instead if this component can render under more than one navigator kind.',
+    );
+  }
+  return navigation;
+}

package/src/angular/injectors/injectors.test.ts

@@ -0,0 +1,247 @@
+// Co-located Angular-driven test for the navigation injectors layer (./index). Mirrors
+// ../stack.test.ts's fixture (an injected codegen-shaped RNSScreen ViewConfig exposing
+// onAppear/onDisappear) and drives the same native events stack.ts wires to emit 'focus'/'blur' -
+// proving the injectors react to the real RNS lifecycle, not to a synthetic shortcut. Each
+// injector calls `inject()`, so it is called once per screen component's own constructor (the
+// natural Angular injection-context call site).
+
+import '@angular/compiler';
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  Input,
+  ViewChild,
+  type Signal,
+  type Type,
+} from '@angular/core';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { mount, unmount, setNativeViewConfigSource } from '@symbiote-native/angular';
+import type { INativeViewConfig } from '@symbiote-native/engine';
+import { installFabric, type IFakeNode } from '@symbiote-native/test-utils';
+import { Stack } from '../stack';
+import { ScreenDirective } from '../screen.directive';
+import type { IRoute, INavigatorState } from '../../core';
+import {
+  injectFocusEffect,
+  injectIsFocused,
+  injectNavigation,
+  injectNavigationState,
+  injectRoute,
+} from './index';
+import type { INavigationHandle } from './index';
+
+const ROOT_TAG = 5130;
+const SCREEN_VIEW = 'RNSScreen';
+const STACK_VIEW = 'RNSScreenStack';
+const HEADER_CONFIG_VIEW = 'RNSScreenStackHeaderConfig';
+
+function directEvent(registrationName: string): { registrationName: string } {
+  return { registrationName };
+}
+
+const VIEW_CONFIGS: Record<string, INativeViewConfig> = {
+  [SCREEN_VIEW]: {
+    directEventTypes: {
+      topAppear: directEvent('onAppear'),
+      topDisappear: directEvent('onDisappear'),
+    },
+    validAttributes: { screenId: true, activityState: true },
+  },
+  [STACK_VIEW]: { directEventTypes: {}, validAttributes: {} },
+  [HEADER_CONFIG_VIEW]: { directEventTypes: {}, validAttributes: {} },
+};
+
+const fabric = installFabric();
+setNativeViewConfigSource(name => VIEW_CONFIGS[name]);
+
+const tick = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
+
+beforeEach(() => fabric.reset());
+afterEach(() => unmount(ROOT_TAG));
+
+function screenNodes(): IFakeNode[] {
+  const found: IFakeNode[] = [];
+  const collect = (nodes: readonly IFakeNode[]): void => {
+    for (const node of nodes) {
+      if (node.viewName === SCREEN_VIEW) found.push(node);
+      collect(node.children);
+    }
+  };
+  collect(fabric.committed);
+  return found;
+}
+
+@Component({
+  selector: 'plain-screen',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<symbiote-text>plain</symbiote-text>`,
+})
+class PlainScreenComponent {}
+
+let capturedIsFocused: Signal<boolean> | undefined;
+
+@Component({
+  selector: 'is-focused-screen',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<symbiote-text>home</symbiote-text>`,
+})
+class IsFocusedScreenComponent {
+  constructor() {
+    capturedIsFocused = injectIsFocused();
+  }
+}
+
+const focusEffectEvents: string[] = [];
+
+@Component({
+  selector: 'focus-effect-screen',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<symbiote-text>home</symbiote-text>`,
+})
+class FocusEffectScreenComponent {
+  constructor() {
+    injectFocusEffect(() => {
+      focusEffectEvents.push('effect');
+      return () => focusEffectEvents.push('cleanup');
+    });
+  }
+}
+
+let capturedNavigation: INavigationHandle | undefined;
+let capturedRoute: Signal<IRoute<unknown>> | undefined;
+const focusListenerEvents: string[] = [];
+
+@Component({
+  selector: 'navigation-route-screen',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<symbiote-text>details</symbiote-text>`,
+})
+class NavigationRouteScreenComponent {
+  constructor() {
+    capturedNavigation = injectNavigation();
+    capturedRoute = injectRoute();
+    capturedNavigation.addListener('focus', () => focusListenerEvents.push('focus'));
+  }
+}
+
+let capturedRouteCount: Signal<number> | undefined;
+
+@Component({
+  selector: 'navigation-state-screen',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<symbiote-text>home</symbiote-text>`,
+})
+class NavigationStateScreenComponent {
+  constructor() {
+    capturedRouteCount = injectNavigationState((state: INavigatorState) => state.routes.length);
+  }
+}
+
+let capturedHost: InjectorsTestHost | undefined;
+
+@Component({
+  selector: 'injectors-test-host',
+  standalone: true,
+  imports: [Stack, ScreenDirective],
+  template: `
+    <Stack #nav initialRouteName="Home">
+      <ng-template symbioteScreen name="Home" [component]="homeComponent"></ng-template>
+      <ng-template symbioteScreen name="Details" [component]="detailsComponent"></ng-template>
+    </Stack>
+  `,
+})
+class InjectorsTestHost {
+  @ViewChild('nav') nav!: Stack;
+
+  @Input() homeComponent: Type<unknown> = PlainScreenComponent;
+  @Input() detailsComponent: Type<unknown> = PlainScreenComponent;
+
+  constructor() {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    capturedHost = this;
+  }
+}
+
+describe('Angular navigation injectors', () => {
+  it("injectIsFocused reflects the route's native appear/disappear events", async () => {
+    capturedIsFocused = undefined;
+    capturedHost = undefined;
+    mount(ROOT_TAG, InjectorsTestHost, {
+      initialProps: { homeComponent: IsFocusedScreenComponent },
+    });
+    await tick();
+    expect(capturedIsFocused?.()).toBe(false);
+
+    const home = screenNodes()[0];
+    fabric.fireEvent(home.instanceHandle, 'topAppear', {});
+    await tick();
+    expect(capturedIsFocused?.()).toBe(true);
+
+    fabric.fireEvent(home.instanceHandle, 'topDisappear', {});
+    await tick();
+    expect(capturedIsFocused?.()).toBe(false);
+  });
+
+  it('injectFocusEffect runs its effect on focus and its cleanup on blur', async () => {
+    focusEffectEvents.length = 0;
+    capturedHost = undefined;
+    mount(ROOT_TAG, InjectorsTestHost, {
+      initialProps: { homeComponent: FocusEffectScreenComponent },
+    });
+    await tick();
+    expect(focusEffectEvents).toEqual([]);
+
+    const home = screenNodes()[0];
+    fabric.fireEvent(home.instanceHandle, 'topAppear', {});
+    await tick();
+    expect(focusEffectEvents).toEqual(['effect']);
+
+    fabric.fireEvent(home.instanceHandle, 'topDisappear', {});
+    await tick();
+    expect(focusEffectEvents).toEqual(['effect', 'cleanup']);
+  });
+
+  it('injectNavigation().addListener fires on focus and injectRoute exposes name/params', async () => {
+    capturedNavigation = undefined;
+    capturedRoute = undefined;
+    focusListenerEvents.length = 0;
+    capturedHost = undefined;
+    mount(ROOT_TAG, InjectorsTestHost, {
+      initialProps: { detailsComponent: NavigationRouteScreenComponent },
+    });
+    await tick();
+
+    capturedHost!.nav.push('Details', { id: 7 });
+    await tick();
+    expect(capturedRoute?.().name).toBe('Details');
+    expect(capturedRoute?.().params).toEqual({ id: 7 });
+
+    const details = screenNodes()[1];
+    fabric.fireEvent(details.instanceHandle, 'topAppear', {});
+    await tick();
+    expect(focusListenerEvents).toEqual(['focus']);
+  });
+
+  it('injectNavigationState reflects the route stack growing/shrinking across push/pop', async () => {
+    capturedRouteCount = undefined;
+    capturedHost = undefined;
+    mount(ROOT_TAG, InjectorsTestHost, {
+      initialProps: { homeComponent: NavigationStateScreenComponent },
+    });
+    await tick();
+    expect(capturedRouteCount?.()).toBe(1);
+
+    capturedHost!.nav.push('Details');
+    await tick();
+    expect(capturedRouteCount?.()).toBe(2);
+
+    capturedHost!.nav.pop();
+    await tick();
+    expect(capturedRouteCount?.()).toBe(1);
+  });
+});

package/src/angular/injectors/use-typed-navigation.test.ts

@@ -0,0 +1,229 @@
+// Co-located Angular-driven test for injectStackNavigation/injectTabNavigation/
+// injectDrawerNavigation - the narrowed twins of injectNavigation() that hide the union guard.
+// Angular twin of react/hooks/use-typed-navigation.test.tsx.
+
+import '@angular/compiler';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { mount, unmount, setNativeViewConfigSource, Dimensions } from '@symbiote-native/angular';
+import type { INativeViewConfig } from '@symbiote-native/engine';
+import { installFabric } from '@symbiote-native/test-utils';
+import { Stack } from '../stack';
+import { ScreenDirective } from '../screen.directive';
+import { Tab } from '../tabs';
+import { TabScreenDirective } from '../tab-screen.directive';
+import { Drawer } from '../drawer';
+import { DrawerScreenDirective } from '../drawer-screen.directive';
+import { injectDrawerNavigation, injectStackNavigation, injectTabNavigation } from './index';
+
+const ROOT_TAG = 5613;
+const SCREEN_VIEW = 'RNSScreen';
+const STACK_VIEW = 'RNSScreenStack';
+
+const VIEW_CONFIGS: Record<string, INativeViewConfig> = {
+  [SCREEN_VIEW]: {
+    directEventTypes: {
+      topAppear: { registrationName: 'onAppear' },
+      topDisappear: { registrationName: 'onDisappear' },
+    },
+    validAttributes: { screenId: true, activityState: true },
+  },
+  [STACK_VIEW]: { directEventTypes: {}, validAttributes: {} },
+};
+
+// Drawer reads the screen width off WindowDimensionsService; headless has no DeviceInfo native
+// module, so seed a concrete width once - same fixture as drawer.test.ts.
+Dimensions.set({ window: { width: 375, height: 812, scale: 1, fontScale: 1 } });
+
+const fabric = installFabric();
+setNativeViewConfigSource(name => VIEW_CONFIGS[name]);
+const tick = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
+
+beforeEach(() => fabric.reset());
+afterEach(() => unmount(ROOT_TAG));
+
+@Component({
+  selector: 'plain-screen',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<symbiote-text>plain</symbiote-text>`,
+})
+class PlainScreenComponent {}
+
+let canPush = false;
+
+@Component({
+  selector: 'stack-tracked-screen',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<symbiote-text>home</symbiote-text>`,
+})
+class StackTrackedScreenComponent {
+  constructor() {
+    const navigation = injectStackNavigation();
+    canPush = typeof navigation.push === 'function';
+  }
+}
+
+@Component({
+  selector: 'stack-throwing-screen',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<symbiote-text>home</symbiote-text>`,
+})
+class StackThrowingScreenComponent {
+  constructor() {
+    injectStackNavigation();
+  }
+}
+
+let canJumpTo = false;
+
+@Component({
+  selector: 'tab-tracked-screen',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<symbiote-text>home</symbiote-text>`,
+})
+class TabTrackedScreenComponent {
+  constructor() {
+    const navigation = injectTabNavigation();
+    canJumpTo = typeof navigation.jumpTo === 'function';
+  }
+}
+
+@Component({
+  selector: 'tab-throwing-screen',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<symbiote-text>home</symbiote-text>`,
+})
+class TabThrowingScreenComponent {
+  constructor() {
+    injectTabNavigation();
+  }
+}
+
+let canOpenDrawer = false;
+
+@Component({
+  selector: 'drawer-tracked-screen',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<symbiote-text>home</symbiote-text>`,
+})
+class DrawerTrackedScreenComponent {
+  constructor() {
+    const navigation = injectDrawerNavigation();
+    canOpenDrawer = typeof navigation.openDrawer === 'function';
+  }
+}
+
+@Component({
+  selector: 'drawer-throwing-screen',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<symbiote-text>home</symbiote-text>`,
+})
+class DrawerThrowingScreenComponent {
+  constructor() {
+    injectDrawerNavigation();
+  }
+}
+
+@Component({
+  selector: 'stack-host',
+  standalone: true,
+  imports: [Stack, ScreenDirective],
+  template: `
+    <Stack initialRouteName="Home">
+      <ng-template symbioteScreen name="Home" [component]="homeComponent"></ng-template>
+      <ng-template symbioteScreen name="Details" [component]="plainComponent"></ng-template>
+    </Stack>
+  `,
+})
+class StackHost {
+  @Input() homeComponent: unknown = PlainScreenComponent;
+  readonly plainComponent = PlainScreenComponent;
+}
+
+@Component({
+  selector: 'tab-host',
+  standalone: true,
+  imports: [Tab, TabScreenDirective],
+  template: `
+    <Tab initialRouteName="Home">
+      <ng-template symbioteTabScreen name="Home" [component]="homeComponent"></ng-template>
+      <ng-template symbioteTabScreen name="Search" [component]="plainComponent"></ng-template>
+    </Tab>
+  `,
+})
+class TabHost {
+  @Input() homeComponent: unknown = PlainScreenComponent;
+  readonly plainComponent = PlainScreenComponent;
+}
+
+@Component({
+  selector: 'drawer-host',
+  standalone: true,
+  imports: [Drawer, DrawerScreenDirective],
+  template: `
+    <Drawer initialRouteName="Home">
+      <ng-template symbioteDrawerScreen name="Home" [component]="homeComponent"></ng-template>
+      <ng-template symbioteDrawerScreen name="Profile" [component]="plainComponent"></ng-template>
+    </Drawer>
+  `,
+})
+class DrawerHost {
+  @Input() homeComponent: unknown = PlainScreenComponent;
+  readonly plainComponent = PlainScreenComponent;
+}
+
+describe('injectStackNavigation', () => {
+  it('returns a concretely-typed Stack handle with push, no narrowing needed', async () => {
+    canPush = false;
+    mount(ROOT_TAG, StackHost, { initialProps: { homeComponent: StackTrackedScreenComponent } });
+    await tick();
+    expect(canPush).toBe(true);
+  });
+
+  it('throws when the nearest navigator is a Tab, not a Stack', () => {
+    expect(() =>
+      mount(ROOT_TAG, TabHost, { initialProps: { homeComponent: StackThrowingScreenComponent } }),
+    ).toThrow(/nearest navigator is not a Stack/);
+  });
+});
+
+describe('injectTabNavigation', () => {
+  it('returns a concretely-typed Tab handle with jumpTo, no narrowing needed', async () => {
+    canJumpTo = false;
+    mount(ROOT_TAG, TabHost, { initialProps: { homeComponent: TabTrackedScreenComponent } });
+    await tick();
+    expect(canJumpTo).toBe(true);
+  });
+
+  it('throws when the nearest navigator is a Stack, not a Tab', () => {
+    expect(() =>
+      mount(ROOT_TAG, StackHost, { initialProps: { homeComponent: TabThrowingScreenComponent } }),
+    ).toThrow(/nearest navigator is not a Tab/);
+  });
+});
+
+describe('injectDrawerNavigation', () => {
+  it('returns a concretely-typed Drawer handle with openDrawer, no narrowing needed', async () => {
+    canOpenDrawer = false;
+    mount(ROOT_TAG, DrawerHost, {
+      initialProps: { homeComponent: DrawerTrackedScreenComponent },
+    });
+    await tick();
+    expect(canOpenDrawer).toBe(true);
+  });
+
+  it('throws when the nearest navigator is a Stack, not a Drawer', () => {
+    expect(() =>
+      mount(ROOT_TAG, StackHost, {
+        initialProps: { homeComponent: DrawerThrowingScreenComponent },
+      }),
+    ).toThrow(/nearest navigator is not a Drawer/);
+  });
+});