@symbiote-native/navigation 2.1.0 → 3.0.0

package/src/vue/composables/use-navigation-state.ts

@@ -26,10 +26,13 @@ export function useNavigationState<TResult>(
   let unsubscribe: (() => void) | undefined;
 
   onMounted(() => {
-    unsubscribe = scope.value.emitter.addListener(NAVIGATION_EVENT_STATE, (state: unknown) => {
-      if (!isNavigatorState(state)) return;
-      result.value = selector(state);
-    });
+    unsubscribe = scope.value.emitter.addListener(
+      NAVIGATION_EVENT_STATE,
+      (state: unknown) => {
+        if (!isNavigatorState(state)) return;
+        result.value = selector(state);
+      },
+    );
   });
 
   onUnmounted(() => unsubscribe?.());

package/src/vue/composables/use-navigation.ts

@@ -5,12 +5,18 @@
 
 import { computed } from '@vue/runtime-core';
 import type { ComputedRef } from '@vue/runtime-core';
-import type { INavigationEventListener, INavigationEventName } from '../../core';
+import type {
+  INavigationEventListener,
+  INavigationEventName,
+} from '../../core';
 import { requireNavigationScope } from '../navigation-context';
 import type { IAnyNavigatorHandle } from '../navigation-context';
 
 export type INavigationHandle = IAnyNavigatorHandle & {
-  addListener: (event: INavigationEventName, listener: INavigationEventListener) => () => void;
+  addListener: (
+    event: INavigationEventName,
+    listener: INavigationEventListener,
+  ) => () => void;
   // Walks exactly ONE hop up the scope's `parent` chain to the enclosing navigator's handle -
   // e.g. a Tab screen nested inside a Stack screen calling getParent() to push a new Stack route.
   // Callers narrow the union themselves ('push' in parent, etc.). Deliberately NOT
@@ -25,6 +31,10 @@ export function useNavigation(): ComputedRef<INavigationHandle> {
   const scope = requireNavigationScope('useNavigation');
   return computed(() => {
     const { navigation, emitter, parent } = scope.value;
-    return { ...navigation, addListener: emitter.addListener, getParent: () => parent?.navigation };
+    return {
+      ...navigation,
+      addListener: emitter.addListener,
+      getParent: () => parent?.navigation,
+    };
   });
 }

package/src/vue/drawer/index.ts

@@ -35,7 +35,10 @@ import {
   normalizeVueAttrs,
   useWindowDimensions,
 } from '@symbiote-native/vue';
-import type { IPanResponderGestureState, ISymbioteEvent } from '@symbiote-native/vue';
+import type {
+  IPanResponderGestureState,
+  ISymbioteEvent,
+} from '@symbiote-native/vue';
 import type { IDescriptor } from '@symbiote-native/components';
 import { dlog } from '@symbiote-native/engine';
 import type { IStyleProp, IViewStyle } from '@symbiote-native/engine';
@@ -71,7 +74,10 @@ import type {
 } from '../../core';
 import { NavigationScope, injectNavigationScope } from '../navigation-context';
 import { DrawerScreen } from '../drawer-screen';
-import type { IDrawerScreenOptionsArgs, IDrawerScreenProps } from '../drawer-screen';
+import type {
+  IDrawerScreenOptionsArgs,
+  IDrawerScreenProps,
+} from '../drawer-screen';
 
 export type { IDrawerNavigatorHandle, IDrawerDescriptorMap } from '../../core';
 
@@ -113,7 +119,12 @@ function isStyleProp(value: unknown): value is IStyleProp<IViewStyle> {
   return isRecord(value);
 }
 
-const DRAWER_TYPES: ReadonlyArray<IDrawerType> = ['front', 'back', 'slide', 'permanent'];
+const DRAWER_TYPES: ReadonlyArray<IDrawerType> = [
+  'front',
+  'back',
+  'slide',
+  'permanent',
+];
 // .some() itself doesn't narrow `value`'s type back at the call site - the `value is IDrawerType`
 // predicate on THIS function is what lets asDrawerType's ternary return `value` typed, mirroring
 // Modal's isOrientation guard (adapters/vue/src/components/modal.ts).
@@ -126,30 +137,45 @@ function asDrawerType(value: unknown): IDrawerType | undefined {
 
 const DRAWER_POSITIONS: ReadonlyArray<IDrawerPosition> = ['left', 'right'];
 function isDrawerPosition(value: unknown): value is IDrawerPosition {
-  return typeof value === 'string' && DRAWER_POSITIONS.some(position => position === value);
+  return (
+    typeof value === 'string' &&
+    DRAWER_POSITIONS.some(position => position === value)
+  );
 }
 function asDrawerPosition(value: unknown): IDrawerPosition | undefined {
   return isDrawerPosition(value) ? value : undefined;
 }
 
-function asComponent(value: unknown): IDrawerScreenProps['component'] | undefined {
-  if (typeof value === 'function') return value as IDrawerScreenProps['component'];
-  return isRecord(value) ? (value as IDrawerScreenProps['component']) : undefined;
+function asComponent(
+  value: unknown,
+): IDrawerScreenProps['component'] | undefined {
+  if (typeof value === 'function')
+    return value as IDrawerScreenProps['component'];
+  return isRecord(value)
+    ? (value as IDrawerScreenProps['component'])
+    : undefined;
 }
 
 // IDrawerScreenOptions carries only `title`/`drawerLabel`, small enough for direct field guards -
 // kept as a single cast-at-the-edge helper anyway for symmetry with stack.ts/tabs.ts's
 // asScreenOptions/asTabOptions (same CLAUDE.md-sanctioned I/O-edge narrowing).
-function asDrawerScreenOptions(value: unknown): IDrawerScreenOptions | undefined {
+function asDrawerScreenOptions(
+  value: unknown,
+): IDrawerScreenOptions | undefined {
   return isRecord(value) ? (value as IDrawerScreenOptions) : undefined;
 }
 
-function asDrawerScreenOptionsOrResolver(value: unknown): IDrawerScreenProps['options'] {
-  if (typeof value === 'function') return value as IDrawerScreenProps['options'];
+function asDrawerScreenOptionsOrResolver(
+  value: unknown,
+): IDrawerScreenProps['options'] {
+  if (typeof value === 'function')
+    return value as IDrawerScreenProps['options'];
   return asDrawerScreenOptions(value);
 }
 
-function collectRegistry(vnodes: readonly VNode[]): Map<string, IDrawerRegistryEntry> {
+function collectRegistry(
+  vnodes: readonly VNode[],
+): Map<string, IDrawerRegistryEntry> {
   const registry = new Map<string, IDrawerRegistryEntry>();
   for (const vnode of vnodes) {
     if (vnode.type !== DrawerScreen || !isRecord(vnode.props)) continue;
@@ -169,7 +195,8 @@ function resolveDrawerScreenOptions(
   entry: IDrawerRegistryEntry,
   screenComponentProps: IDrawerScreenOptionsArgs,
 ): IDrawerScreenOptions {
-  if (typeof entry.options === 'function') return entry.options(screenComponentProps);
+  if (typeof entry.options === 'function')
+    return entry.options(screenComponentProps);
   return entry.options ?? {};
 }
 
@@ -200,7 +227,9 @@ const DrawerImpl = defineComponent<IDrawerProps>(
     let routeSequence = 0;
     const routeIdPrefix = useId();
 
-    function buildRoutes(registry: Map<string, IDrawerRegistryEntry>): IRoute<unknown>[] {
+    function buildRoutes(
+      registry: Map<string, IDrawerRegistryEntry>,
+    ): IRoute<unknown>[] {
       return Array.from(registry.entries()).map(([name, entry]) => {
         routeSequence += 1;
         return {
@@ -213,10 +242,14 @@ const DrawerImpl = defineComponent<IDrawerProps>(
 
     const initialRegistry = collectRegistry(slots.default?.() ?? []);
     const initialRoutes = buildRoutes(initialRegistry);
-    if (initialRoutes.length === 0) dlog('Drawer: no <Drawer.Screen> children registered');
+    if (initialRoutes.length === 0)
+      dlog('Drawer: no <Drawer.Screen> children registered');
 
     const state = shallowRef(
-      createInitialDrawerRouterState(initialRoutes, asString(attrs.initialRouteName)),
+      createInitialDrawerRouterState(
+        initialRoutes,
+        asString(attrs.initialRouteName),
+      ),
     );
 
     function dispatch(action: Parameters<typeof drawerRouterReducer>[1]): void {
@@ -235,7 +268,9 @@ const DrawerImpl = defineComponent<IDrawerProps>(
     let dragStartProgress = 0;
 
     function animateProgressTo(open: boolean): void {
-      dlog(`Drawer: animateProgressTo(open=${open}) starting at t=${Date.now()}`);
+      dlog(
+        `Drawer: animateProgressTo(open=${open}) starting at t=${Date.now()}`,
+      );
       Animated.timing(progress, {
         toValue: open ? 1 : 0,
         duration: DRAWER_SNAP_DURATION,
@@ -248,17 +283,23 @@ const DrawerImpl = defineComponent<IDrawerProps>(
 
     const handle: IDrawerNavigatorHandle = {
       openDrawer: () => {
-        dlog(`Drawer: openDrawer() called, isOpen=${state.value.isOpen} at t=${Date.now()}`);
+        dlog(
+          `Drawer: openDrawer() called, isOpen=${state.value.isOpen} at t=${Date.now()}`,
+        );
         animateProgressTo(true);
         dispatch({ type: 'openDrawer' });
       },
       closeDrawer: () => {
-        dlog(`Drawer: closeDrawer() called, isOpen=${state.value.isOpen} at t=${Date.now()}`);
+        dlog(
+          `Drawer: closeDrawer() called, isOpen=${state.value.isOpen} at t=${Date.now()}`,
+        );
         animateProgressTo(false);
         dispatch({ type: 'closeDrawer' });
       },
       toggleDrawer: () => {
-        dlog(`Drawer: toggleDrawer() called, isOpen=${state.value.isOpen} at t=${Date.now()}`);
+        dlog(
+          `Drawer: toggleDrawer() called, isOpen=${state.value.isOpen} at t=${Date.now()}`,
+        );
         animateProgressTo(!state.value.isOpen);
         dispatch({ type: 'toggleDrawer' });
       },
@@ -308,13 +349,23 @@ const DrawerImpl = defineComponent<IDrawerProps>(
         _event: ISymbioteEvent,
         gestureState: IPanResponderGestureState,
       ): void => {
-        progress.setValue(resolveDragProgress(gestureState, dragStartProgress, currentOptions()));
+        progress.setValue(
+          resolveDragProgress(
+            gestureState,
+            dragStartProgress,
+            currentOptions(),
+          ),
+        );
       },
       onPanResponderRelease: (
         _event: ISymbioteEvent,
         gestureState: IPanResponderGestureState,
       ): void => {
-        const intent = resolveSwipeIntent(gestureState, state.value.isOpen, currentOptions());
+        const intent = resolveSwipeIntent(
+          gestureState,
+          state.value.isOpen,
+          currentOptions(),
+        );
         const open = intent === 'open';
         dlog(`Drawer: gesture release -> ${open ? 'open' : 'close'}`);
         animateProgressTo(open);
@@ -367,7 +418,10 @@ const DrawerImpl = defineComponent<IDrawerProps>(
     watch(
       () => focusedKeyOf(state.value),
       nextKey => {
-        const { blurKey, focusKey } = diffFocusedRoute(focusedRouteKey, nextKey);
+        const { blurKey, focusKey } = diffFocusedRoute(
+          focusedRouteKey,
+          nextKey,
+        );
         if (blurKey === undefined && focusKey === undefined) return;
         focusedRouteKey = nextKey;
         nextTick(() => {
@@ -383,24 +437,32 @@ const DrawerImpl = defineComponent<IDrawerProps>(
       },
     );
     onUnmounted(() => {
-      if (focusedRouteKey !== undefined) emitterFor(focusedRouteKey).emit(NAVIGATION_EVENT_BLUR);
+      if (focusedRouteKey !== undefined)
+        emitterFor(focusedRouteKey).emit(NAVIGATION_EVENT_BLUR);
     });
 
     return () => {
       const registry = collectRegistry(slots.default?.() ?? []);
       const options = currentOptions();
-      const drawerStyle = isStyleProp(attrs.drawerStyle) ? attrs.drawerStyle : undefined;
+      const drawerStyle = isStyleProp(attrs.drawerStyle)
+        ? attrs.drawerStyle
+        : undefined;
 
-      if (registry.size === 0) dlog('Drawer: no <Drawer.Screen> children registered');
+      if (registry.size === 0)
+        dlog('Drawer: no <Drawer.Screen> children registered');
 
       const animated = isDrawerAnimated(options);
       const geometry = resolveDrawerGeometry(options);
 
       const panelTranslateX = animated
-        ? progress.interpolate(resolveDrawerSlotInterpolation(geometry, 'panel').translateX)
+        ? progress.interpolate(
+            resolveDrawerSlotInterpolation(geometry, 'panel').translateX,
+          )
         : undefined;
       const contentTranslateX = animated
-        ? progress.interpolate(resolveDrawerSlotInterpolation(geometry, 'content').translateX)
+        ? progress.interpolate(
+            resolveDrawerSlotInterpolation(geometry, 'content').translateX,
+          )
         : undefined;
       // The overlay is a full-screen absolutely-positioned sibling BELOW content in paint order
       // (see render-drawer.ts's drawerChildOrder) - for 'front' that's fine since content never
@@ -419,9 +481,13 @@ const DrawerImpl = defineComponent<IDrawerProps>(
         : undefined;
 
       const focusedRoute = state.value.routes[state.value.index];
-      const focusedEntry = focusedRoute ? registry.get(focusedRoute.name) : undefined;
+      const focusedEntry = focusedRoute
+        ? registry.get(focusedRoute.name)
+        : undefined;
       if (focusedRoute && !focusedEntry) {
-        dlog(`Drawer: no screen registered for route name "${focusedRoute.name}"`);
+        dlog(
+          `Drawer: no screen registered for route name "${focusedRoute.name}"`,
+        );
       }
 
       const content =
@@ -447,17 +513,25 @@ const DrawerImpl = defineComponent<IDrawerProps>(
         const entry = registry.get(route.name);
         if (entry === undefined) continue;
         descriptors[route.key] = {
-          options: resolveDrawerScreenOptions(entry, { route, navigation: handle }),
+          options: resolveDrawerScreenOptions(entry, {
+            route,
+            navigation: handle,
+          }),
           navigation: handle,
         };
       }
 
       const drawerContent =
-        slots.drawerContent?.({ state: state.value, descriptors, navigation: handle }) ?? null;
+        slots.drawerContent?.({
+          state: state.value,
+          descriptors,
+          navigation: handle,
+        }) ?? null;
 
       const root = renderDrawer(
         {
-          overlayColor: asString(attrs.overlayColor) ?? DRAWER_DEFAULT_OVERLAY_COLOR,
+          overlayColor:
+            asString(attrs.overlayColor) ?? DRAWER_DEFAULT_OVERLAY_COLOR,
           drawerStyle,
           contentPassthrough: {},
           overlayPassthrough: animated
@@ -479,7 +553,8 @@ const DrawerImpl = defineComponent<IDrawerProps>(
       const slotDescriptors = new Map<IDrawerSlot, IDescriptor>();
       order.forEach((slot, index) => {
         const descriptor = root.children[index];
-        if (typeof descriptor !== 'string') slotDescriptors.set(slot, descriptor);
+        if (typeof descriptor !== 'string')
+          slotDescriptors.set(slot, descriptor);
       });
 
       const slotChildren: Record<IDrawerSlot, VNode[] | null> = {
@@ -498,7 +573,10 @@ const DrawerImpl = defineComponent<IDrawerProps>(
         overlay:
           overlayOpacity === undefined
             ? undefined
-            : { opacity: overlayOpacity, transform: [{ translateX: overlayTranslateX }] },
+            : {
+                opacity: overlayOpacity,
+                transform: [{ translateX: overlayTranslateX }],
+              },
         panel:
           panelTranslateX === undefined
             ? undefined
@@ -511,10 +589,18 @@ const DrawerImpl = defineComponent<IDrawerProps>(
         const children = slotChildren[slot] ?? [];
         const animatedStyle = slotAnimatedStyle[slot];
         if (animatedStyle === undefined) {
-          return h(descriptor.type, { key: descriptor.key, ...descriptor.props }, children);
+          return h(
+            descriptor.type,
+            { key: descriptor.key, ...descriptor.props },
+            children,
+          );
         }
         const style = [descriptor.props.style, animatedStyle];
-        return h(Animated.View, { key: descriptor.key, ...descriptor.props, style }, children);
+        return h(
+          Animated.View,
+          { key: descriptor.key, ...descriptor.props, style },
+          children,
+        );
       }
 
       const drawerChildren = order

package/src/vue/drawer-screen.ts

@@ -8,7 +8,11 @@
 
 import { defineComponent } from '@vue/runtime-core';
 import type { Component } from '@vue/runtime-core';
-import type { IDrawerScreenOptions, IRoute, IDrawerNavigatorHandle } from '../core';
+import type {
+  IDrawerScreenOptions,
+  IRoute,
+  IDrawerNavigatorHandle,
+} from '../core';
 
 export type IDrawerScreenOptionsArgs = {
   route: IRoute<unknown>;
@@ -26,7 +30,10 @@ export type IDrawerScreenProps = {
   initialParams?: unknown;
 };
 
-export const DrawerScreen = defineComponent<IDrawerScreenProps>(() => () => null, {
-  name: 'DrawerScreen',
-  inheritAttrs: false,
-});
+export const DrawerScreen = defineComponent<IDrawerScreenProps>(
+  () => () => null,
+  {
+    name: 'DrawerScreen',
+    inheritAttrs: false,
+  },
+);

package/src/vue/index.ts

@@ -15,7 +15,11 @@ export type {
   IVueScreenOptions,
   IVueSearchBarOptions,
 } from './screen';
-export type { IScreenOptions, IStackAnimation, IStackPresentation } from '../core';
+export type {
+  IScreenOptions,
+  IStackAnimation,
+  IStackPresentation,
+} from '../core';
 
 export {
   useNavigation,
@@ -33,7 +37,10 @@ export type {
   ITabNavigationHandle,
   IDrawerNavigationHandle,
 } from './composables';
-export type { INavigationScopeValue, IAnyNavigatorHandle } from './navigation-context';
+export type {
+  INavigationScopeValue,
+  IAnyNavigatorHandle,
+} from './navigation-context';
 
 export { useLinkingIntegration } from './linking';
 export type { ILinkingConfig, IScreenLinkingConfig } from '../core';
@@ -67,4 +74,9 @@ export type {
   IDrawerScreenOptionsResolver,
   IDrawerScreenProps,
 } from './drawer-screen';
-export type { IDrawerOptions, IDrawerScreenOptions, IDrawerType, IDrawerPosition } from '../core';
+export type {
+  IDrawerOptions,
+  IDrawerScreenOptions,
+  IDrawerType,
+  IDrawerPosition,
+} from '../core';

package/src/vue/linking.ts

@@ -30,7 +30,10 @@ export function useLinkingIntegration(
   let cancelled = false;
   let subscription: IEventSubscription | undefined;
 
-  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(`useLinkingIntegration: no route resolved for "${url}"`);
@@ -42,7 +45,9 @@ export function useLinkingIntegration(
   onMounted(() => {
     const handle = navigatorHandle.value;
     if (handle === null) {
-      dlog('useLinkingIntegration: navigatorHandle is not yet available at mount time');
+      dlog(
+        'useLinkingIntegration: navigatorHandle is not yet available at mount time',
+      );
       return;
     }
 

package/src/vue/navigation-context.ts

@@ -27,7 +27,12 @@
 // screen nested inside e.g. a Stack-screen-renders-a-Tab composition reach the enclosing Stack via
 // useNavigation().getParent().
 
-import { defineComponent, inject, provide, shallowRef } from '@vue/runtime-core';
+import {
+  defineComponent,
+  inject,
+  provide,
+  shallowRef,
+} from '@vue/runtime-core';
 import type { InjectionKey, ShallowRef } from '@vue/runtime-core';
 import type { INavigationEmitter, IRoute, IAnyNavigatorHandle } from '../core';
 export type { IAnyNavigatorHandle };
@@ -44,7 +49,9 @@ const NAVIGATION_SCOPE_KEY: InjectionKey<ShallowRef<INavigationScopeValue>> =
 
 // The setter half of the pair - writes the CURRENT route's scope onto the shared key. Called only
 // from NavigationScope's own setup below (never directly by app code).
-function provideNavigationScope(value: ShallowRef<INavigationScopeValue>): void {
+function provideNavigationScope(
+  value: ShallowRef<INavigationScopeValue>,
+): void {
   provide(NAVIGATION_SCOPE_KEY, value);
 }
 
@@ -52,7 +59,8 @@ function provideNavigationScope(value: ShallowRef<INavigationScopeValue>): void
 // (stack.ts/tabs.ts/drawer.ts, reading the AMBIENT/parent scope on their own mount) calls this
 // directly; undefined simply means "no ancestor NavigationScope", which is a legitimate state (the
 // nesting root) rather than an error - callers that require one throw their own message.
-export function injectNavigationScope(): ShallowRef<INavigationScopeValue> | undefined {
+export function injectNavigationScope():
+  ShallowRef<INavigationScopeValue> | undefined {
   return inject(NAVIGATION_SCOPE_KEY, undefined);
 }
 
@@ -60,7 +68,9 @@ export function injectNavigationScope(): ShallowRef<INavigationScopeValue> | und
 // useIsFocused, useFocusEffect, useNavigationState) - they all called injectNavigationScope() and
 // threw the same shaped error, differing only in which hook name the message names. Centralized
 // here so a wording change lands once instead of five times.
-export function requireNavigationScope(hookName: string): ShallowRef<INavigationScopeValue> {
+export function requireNavigationScope(
+  hookName: string,
+): ShallowRef<INavigationScopeValue> {
   const scope = injectNavigationScope();
   if (scope === undefined) {
     throw new Error(
@@ -74,7 +84,9 @@ export function requireNavigationScope(hookName: string): ShallowRef<INavigation
 // declaration here, not stylistic - without it Vue would route the incoming `value` into `attrs`
 // instead of a tracked reactive `props` field, and the render closure's refresh below would
 // silently keep re-reading a stale initial snapshot.
-export const NavigationScope = defineComponent<{ value: INavigationScopeValue }>(
+export const NavigationScope = defineComponent<{
+  value: INavigationScopeValue;
+}>(
   (props, { slots }) => {
     const current = shallowRef(props.value);
     provideNavigationScope(current);

package/src/vue/screen.ts

@@ -25,7 +25,10 @@ export type IVueSearchBarOptions = ISearchBarOptions & {
   ref?: Ref<ISearchBarCommands | null>;
 };
 
-export type IVueScreenOptions = Omit<IScreenOptions, 'headerSearchBarOptions'> & {
+export type IVueScreenOptions = Omit<
+  IScreenOptions,
+  'headerSearchBarOptions'
+> & {
   headerSearchBarOptions?: IVueSearchBarOptions;
 };
 
@@ -37,7 +40,9 @@ export type IScreenOptionsArgs = {
   navigation: INavigatorHandle;
 };
 
-export type IScreenOptionsResolver = (args: IScreenOptionsArgs) => IVueScreenOptions;
+export type IScreenOptionsResolver = (
+  args: IScreenOptionsArgs,
+) => IVueScreenOptions;
 
 export type IScreenProps = {
   name: string;