@symbiote-native/navigation 2.1.0 → 3.0.0

package/src/core/navigator-state/index.ts

@@ -4,7 +4,10 @@
 // (`key`) is generated by the CALLER (the adapter, via React's useId or an equivalent) - the
 // reducer never invents identity itself, so it stays a pure (state, action) => state function.
 
-import { SCREEN_ACTIVITY_STATE_FOCUSED, SCREEN_ACTIVITY_STATE_INACTIVE } from '../constants';
+import {
+  SCREEN_ACTIVITY_STATE_FOCUSED,
+  SCREEN_ACTIVITY_STATE_INACTIVE,
+} from '../constants';
 import { mergeParams } from '../guards';
 
 export type IRoute<TParams = undefined> = Readonly<{
@@ -28,7 +31,9 @@ export type INavigatorAction =
   | { type: 'setParams'; key?: string; params: unknown }
   | { type: 'reset'; state: INavigatorState };
 
-export function createInitialNavigatorState(initialRoute: IRouteEntry): INavigatorState {
+export function createInitialNavigatorState(
+  initialRoute: IRouteEntry,
+): INavigatorState {
   return { routes: [initialRoute] };
 }
 
@@ -50,7 +55,9 @@ export function navigatorReducer(
     }
 
     case 'popToTop':
-      return state.routes.length <= 1 ? state : { routes: state.routes.slice(0, 1) };
+      return state.routes.length <= 1
+        ? state
+        : { routes: state.routes.slice(0, 1) };
 
     case 'popTo': {
       const index = state.routes.findIndex(route => route.key === action.key);
@@ -68,7 +75,8 @@ export function navigatorReducer(
     // `source`-defaults-to-focused-route behavior, minus the cross-navigator target routing this
     // single-navigator reducer has no need for.
     case 'setParams': {
-      const targetKey = action.key ?? state.routes[state.routes.length - 1]?.key;
+      const targetKey =
+        action.key ?? state.routes[state.routes.length - 1]?.key;
       if (targetKey === undefined) return state;
       const index = state.routes.findIndex(route => route.key === targetKey);
       if (index === -1) return state;
@@ -78,7 +86,11 @@ export function navigatorReducer(
         params: mergeParams(target.params, action.params),
       };
       return {
-        routes: [...state.routes.slice(0, index), nextRoute, ...state.routes.slice(index + 1)],
+        routes: [
+          ...state.routes.slice(0, index),
+          nextRoute,
+          ...state.routes.slice(index + 1),
+        ],
       };
     }
 
@@ -102,9 +114,14 @@ export function navigatorReducer(
 // an already-mounted NativeStack screen's activityState can never decrease via a plain prop
 // update ("activityState can only progress in NativeStack") - since no mounted route's index ever
 // exceeds routesLength - 1, this formula never produces a decrease across a push or pop.
-export function computeActivityState(index: number, routesLength: number): number {
+export function computeActivityState(
+  index: number,
+  routesLength: number,
+): number {
   const focusedIndex = routesLength - 1;
-  return index > focusedIndex ? SCREEN_ACTIVITY_STATE_INACTIVE : SCREEN_ACTIVITY_STATE_FOCUSED;
+  return index > focusedIndex
+    ? SCREEN_ACTIVITY_STATE_INACTIVE
+    : SCREEN_ACTIVITY_STATE_FOCUSED;
 }
 
 export function isTopRoute(index: number, routesLength: number): boolean {

package/src/core/render-drawer.ts

@@ -32,7 +32,9 @@ export type IDrawerSlot = 'content' | 'overlay' | 'panel';
 // slide: panel, overlay, content (both panel and content animate; content stays visually on top).
 // permanent: NOT absolutely positioned (an ordinary flexDirection:'row' sidebar), so sibling
 // order IS the left-to-right screen position - it must follow drawerPosition.
-export function drawerChildOrder(options: IDrawerOptions): readonly IDrawerSlot[] {
+export function drawerChildOrder(
+  options: IDrawerOptions,
+): readonly IDrawerSlot[] {
   const type = resolveDrawerType(options);
   switch (type) {
     case 'back':
@@ -89,12 +91,22 @@ function panelBaseStyle(options: IDrawerOptions): IViewStyle {
   };
 }
 
-export function renderDrawer(view: IDrawerViewProps, options: IDrawerOptions): IDescriptor {
+export function renderDrawer(
+  view: IDrawerViewProps,
+  options: IDrawerOptions,
+): IDescriptor {
   const type = resolveDrawerType(options);
-  const content = el('symbiote-view', { ...view.contentPassthrough, style: CONTENT_STYLE }, []);
+  const content = el(
+    'symbiote-view',
+    { ...view.contentPassthrough, style: CONTENT_STYLE },
+    [],
+  );
   const panel = el(
     'symbiote-view',
-    { ...view.panelPassthrough, style: [panelBaseStyle(options), view.drawerStyle] },
+    {
+      ...view.panelPassthrough,
+      style: [panelBaseStyle(options), view.drawerStyle],
+    },
     [],
   );
 
@@ -110,11 +122,14 @@ export function renderDrawer(view: IDrawerViewProps, options: IDrawerOptions): I
     );
   }
 
-  const children = drawerChildOrder(options).reduce<IDescriptor[]>((acc, slot) => {
-    const descriptor = slots[slot];
-    if (descriptor !== undefined) acc.push(descriptor);
-    return acc;
-  }, []);
+  const children = drawerChildOrder(options).reduce<IDescriptor[]>(
+    (acc, slot) => {
+      const descriptor = slots[slot];
+      if (descriptor !== undefined) acc.push(descriptor);
+      return acc;
+    },
+    [],
+  );
 
   const rootStyle: IViewStyle =
     type === 'permanent' ? { ...ROOT_STYLE, flexDirection: 'row' } : ROOT_STYLE;

package/src/core/render-stack.ts

@@ -41,7 +41,11 @@ import type {
   IStackPresentation,
   IStackViewProps,
 } from './navigator-props';
-import { resolveHeaderConfigView, resolveScreenView, resolveSearchBarView } from './screen-options';
+import {
+  resolveHeaderConfigView,
+  resolveScreenView,
+  resolveSearchBarView,
+} from './screen-options';
 
 // Mirrors react-native-screens' ScreenStackItem.tsx (getPositioningStyle): a formSheet's content
 // wrapper does not get `flex: 1`. RNSScreen.mm's updateBounds pushes the sheet's live native size
@@ -101,7 +105,9 @@ export function resolveScreenViewName(
     stackPresentation === 'push' ||
     stackPresentation === 'containedModal' ||
     stackPresentation === 'containedTransparentModal';
-  return isPlainPresentation ? RNS_SCREEN_VIEW_NAME : RNS_MODAL_SCREEN_VIEW_NAME;
+  return isPlainPresentation
+    ? RNS_SCREEN_VIEW_NAME
+    : RNS_MODAL_SCREEN_VIEW_NAME;
 }
 
 export function resolveScreenContentWrapperStyle(
@@ -141,14 +147,23 @@ export function isHeaderInModal(
   isAndroid: boolean,
 ): boolean {
   if (isAndroid) return false;
-  return (stackPresentation ?? STACK_DEFAULT_PRESENTATION) !== 'push' && !headerHidden;
+  return (
+    (stackPresentation ?? STACK_DEFAULT_PRESENTATION) !== 'push' &&
+    !headerHidden
+  );
 }
 
 // Inner-modal wrapper styles for isHeaderInModal: the inner RNSScreenStack fills its outer
 // RNSScreen, and the inner RNSScreen fills the stack absolutely on all four edges. This mirrors
 // react-native-screens' own `styles.container` / `StyleSheet.absoluteFill` for this exact pair.
 const HEADER_IN_MODAL_STACK_STYLE = { flex: 1 };
-const HEADER_IN_MODAL_SCREEN_STYLE = { position: 'absolute', top: 0, start: 0, end: 0, bottom: 0 };
+const HEADER_IN_MODAL_SCREEN_STYLE = {
+  position: 'absolute',
+  top: 0,
+  start: 0,
+  end: 0,
+  bottom: 0,
+};
 
 export function resolveHeaderInModalStackStyle(): Record<string, unknown> {
   return HEADER_IN_MODAL_STACK_STYLE;
@@ -160,7 +175,9 @@ export function resolveHeaderInModalScreenStyle(): Record<string, unknown> {
 
 // The RNSScreen leaf's own props; the adapter spreads this record directly onto the element it
 // builds and appends the header config child and real screen content itself, not here.
-export function resolveScreenProps(view: IScreenViewProps): Record<string, unknown> {
+export function resolveScreenProps(
+  view: IScreenViewProps,
+): Record<string, unknown> {
   return {
     ...view.passthrough,
     screenId: view.screenId,
@@ -175,7 +192,8 @@ export function resolveScreenProps(view: IScreenViewProps): Record<string, unkno
     // coerceChildScrollViewComponentSizeToSize) is driven by that same state, so an async push
     // likely lags one step behind a fast drag. Scoped to formSheet: push/plain-modal screens have
     // no comparable live-resize need.
-    synchronousShadowStateUpdatesEnabled: view.stackPresentation === 'formSheet',
+    synchronousShadowStateUpdatesEnabled:
+      view.stackPresentation === 'formSheet',
     transitionDuration: view.transitionDuration,
     sheetAllowedDetents: view.sheetAllowedDetents,
     // Native RNSScreen's real prop names carry an "Index" suffix (react-native-screens' own
@@ -199,7 +217,9 @@ export function resolveScreenProps(view: IScreenViewProps): Record<string, unkno
 // `style: {flex: 1}` is ours, not react-native-screens': RNSScreenStackView sizes its nav
 // controller to `self.bounds`, which Yoga would otherwise collapse to zero, and (unlike RN's
 // own ScreenStack.tsx) we drive the native view directly (<third_party_rn_packages_are_react_only>).
-export function resolveStackProps(view: IStackViewProps): Record<string, unknown> {
+export function resolveStackProps(
+  view: IStackViewProps,
+): Record<string, unknown> {
   return { style: { flex: 1 }, ...view.passthrough };
 }
 
@@ -257,7 +277,9 @@ export function renderHeaderConfig(
 // The RNSSearchBar leaf's static config props; event handlers ride in `passthrough`.
 // renderHeaderConfig wraps this into the RNSSearchBar Descriptor and nests it as the header
 // config's child.
-export function resolveSearchBarProps(view: ISearchBarViewProps): Record<string, unknown> {
+export function resolveSearchBarProps(
+  view: ISearchBarViewProps,
+): Record<string, unknown> {
   return {
     ...view.passthrough,
     placeholder: view.placeholder,
@@ -368,19 +390,29 @@ export type IScreenRenderPlan = {
   innerScreenStyle: Record<string, unknown>;
 };
 
-export function resolveScreenRenderPlan(input: IScreenRenderPlanInput): IScreenRenderPlan {
+export function resolveScreenRenderPlan(
+  input: IScreenRenderPlanInput,
+): IScreenRenderPlan {
   const { options, isAndroid } = input;
   const headerHidden = options?.headerShown === false;
   const activityState = computeActivityState(input.index, input.routeCount);
 
   const screenProps = resolveScreenProps(
-    resolveScreenView(input.screenId, activityState, options, input.screenPassthrough),
+    resolveScreenView(
+      input.screenId,
+      activityState,
+      options,
+      input.screenPassthrough,
+    ),
   );
 
   const searchBarOptions = options?.headerSearchBarOptions;
   const searchBarProps = searchBarOptions
     ? resolveSearchBarProps(
-        resolveSearchBarView(searchBarOptions, input.searchBarPassthrough ?? {}),
+        resolveSearchBarView(
+          searchBarOptions,
+          input.searchBarPassthrough ?? {},
+        ),
       )
     : undefined;
 
@@ -394,7 +426,10 @@ export function resolveScreenRenderPlan(input: IScreenRenderPlanInput): IScreenR
 
   return {
     activityState,
-    screenViewName: resolveScreenViewName(options?.stackPresentation, isAndroid),
+    screenViewName: resolveScreenViewName(
+      options?.stackPresentation,
+      isAndroid,
+    ),
     screenProps,
     headerConfig,
     searchBarProps,
@@ -407,7 +442,11 @@ export function resolveScreenRenderPlan(input: IScreenRenderPlanInput): IScreenR
       ),
       collapsable: false,
     },
-    inModal: isHeaderInModal(options?.stackPresentation, headerHidden, isAndroid),
+    inModal: isHeaderInModal(
+      options?.stackPresentation,
+      headerHidden,
+      isAndroid,
+    ),
     innerStackStyle: resolveHeaderInModalStackStyle(),
     innerScreenStyle: resolveHeaderInModalScreenStyle(),
   };

package/src/core/render-tabs.ts

@@ -9,7 +9,12 @@
 
 import { el, txt } from '@symbiote-native/components';
 import type { IDescriptor } from '@symbiote-native/components';
-import type { IColorValue, IViewStyle, ITextStyle, IStyleProp } from '@symbiote-native/engine';
+import type {
+  IColorValue,
+  IViewStyle,
+  ITextStyle,
+  IStyleProp,
+} from '@symbiote-native/engine';
 import type { ITabBarIcon } from './tab-options';
 
 // react-navigation's own bottom-tabs default to the surrounding theme's primary/text colors;
@@ -96,14 +101,19 @@ function resolveTintColor(item: ITabBarItemView): IColorValue {
 // for a vector-icon-font label); an IDescriptor icon (an <Image>/vector-icon element the adapter
 // already resolved) is spliced in verbatim, exactly like renderHeaderConfig treats a pre-built
 // Descriptor child.
-function renderIcon(icon: ITabBarIcon | undefined, color: IColorValue): IDescriptor | undefined {
+function renderIcon(
+  icon: ITabBarIcon | undefined,
+  color: IColorValue,
+): IDescriptor | undefined {
   if (icon === undefined) return undefined;
   if (typeof icon === 'string')
     return txt({ style: { color, fontSize: TAB_ICON_FONT_SIZE } }, [icon]);
   return icon;
 }
 
-function renderBadge(badge: string | number | undefined): IDescriptor | undefined {
+function renderBadge(
+  badge: string | number | undefined,
+): IDescriptor | undefined {
   if (badge === undefined) return undefined;
   return el('symbiote-view', { style: BADGE_STYLE }, [
     txt({ style: BADGE_TEXT_STYLE }, [String(badge)]),
@@ -121,8 +131,12 @@ export function renderTabBarItem(item: ITabBarItemView): IDescriptor {
 
   const children: IDescriptor[] = [];
   if (iconChildren.length > 0)
-    children.push(el('symbiote-view', { style: ICON_WRAPPER_STYLE }, iconChildren));
-  children.push(txt({ style: { color, fontSize: TAB_LABEL_FONT_SIZE } }, [item.label]));
+    children.push(
+      el('symbiote-view', { style: ICON_WRAPPER_STYLE }, iconChildren),
+    );
+  children.push(
+    txt({ style: { color, fontSize: TAB_LABEL_FONT_SIZE } }, [item.label]),
+  );
 
   return el(
     'symbiote-view',
@@ -134,5 +148,9 @@ export function renderTabBarItem(item: ITabBarItemView): IDescriptor {
 
 export function renderTabBar(view: ITabBarViewProps): IDescriptor {
   const items = view.items.map(renderTabBarItem);
-  return el('symbiote-view', { ...view.passthrough, style: [TAB_BAR_STYLE, view.style] }, items);
+  return el(
+    'symbiote-view',
+    { ...view.passthrough, style: [TAB_BAR_STYLE, view.style] },
+    items,
+  );
 }

package/src/core/screen-options.ts

@@ -20,7 +20,10 @@ import type {
   ISheetInitialDetent,
   ISheetLargestUndimmedDetent,
 } from './navigator-props';
-import { buildHeaderBarButtonDispatch, prepareHeaderBarButtonItems } from './header-bar-buttons';
+import {
+  buildHeaderBarButtonDispatch,
+  prepareHeaderBarButtonItems,
+} from './header-bar-buttons';
 
 // These sentinels must be kept in sync with react-native-screens' native side - they are RNS's
 // own compat values for the 'fitToContents'/'large'/'medium'/'all' legacy presets, replicated
@@ -31,7 +34,9 @@ const SHEET_COMPAT_MEDIUM: number[] = [0.5];
 const SHEET_COMPAT_ALL: number[] = [0.5, 1.0];
 const SHEET_DIMMED_ALWAYS = -1;
 
-function resolveSheetAllowedDetents(compat: ISheetAllowedDetents | undefined): number[] {
+function resolveSheetAllowedDetents(
+  compat: ISheetAllowedDetents | undefined,
+): number[] {
   if (compat === undefined) return SHEET_COMPAT_LARGE;
   if (Array.isArray(compat)) return compat;
   switch (compat) {
@@ -74,7 +79,9 @@ function resolveSheetInitialDetent(
   return compat;
 }
 
-function toOptionalBooleanNativeProp(value: boolean | undefined): IOptionalBooleanNativeProp {
+function toOptionalBooleanNativeProp(
+  value: boolean | undefined,
+): IOptionalBooleanNativeProp {
   if (value === undefined) return 'undefined';
   return value ? 'true' : 'false';
 }
@@ -119,7 +126,9 @@ export function resolveScreenView(
   options: IScreenOptions | undefined,
   passthrough: Record<string, unknown> = {},
 ): IScreenViewProps {
-  const sheetAllowedDetents = resolveSheetAllowedDetents(options?.sheetAllowedDetents);
+  const sheetAllowedDetents = resolveSheetAllowedDetents(
+    options?.sheetAllowedDetents,
+  );
   const lastDetentIndex = sheetAllowedDetents.length - 1;
   return {
     screenId,
@@ -142,7 +151,8 @@ export function resolveScreenView(
     sheetExpandsWhenScrolledToEdge: options?.sheetExpandsWhenScrolledToEdge,
     sheetElevation: options?.sheetElevation,
     sheetShouldOverflowTopInset: options?.sheetShouldOverflowTopInset,
-    sheetDefaultResizeAnimationEnabled: options?.sheetDefaultResizeAnimationEnabled,
+    sheetDefaultResizeAnimationEnabled:
+      options?.sheetDefaultResizeAnimationEnabled,
     statusBarStyle: options?.statusBarStyle,
     statusBarHidden: options?.statusBarHidden,
     statusBarAnimation: options?.statusBarAnimation,

package/src/core/search-bar-commands.ts

@@ -5,7 +5,11 @@
 // buildScrollViewHandle exactly (same lazy-getter shape); the adapter supplies the node getter
 // and its own framework-specific ref field (see react/screen.ts's IReactSearchBarOptions - the
 // ref itself is per-adapter, same split as IPressableProps).
-import { dispatchViewCommand, dlog, type ISymbioteNode } from '@symbiote-native/engine';
+import {
+  dispatchViewCommand,
+  dlog,
+  type ISymbioteNode,
+} from '@symbiote-native/engine';
 
 export interface ISearchBarCommands {
   focus(): void;
@@ -21,7 +25,10 @@ export interface ISearchBarCommands {
 // stale handle outlived its screen) was the one unlogged gap, silently indistinguishable from
 // "the command fired but did nothing". Investigation instrumentation (HeaderOptionsScreen
 // unresponsive-buttons bug); kept behind DEBUG per <keep_logs_gate_behind_DEBUG>, never removed.
-function warnIfDetached(command: string, node: ISymbioteNode | null): node is ISymbioteNode {
+function warnIfDetached(
+  command: string,
+  node: ISymbioteNode | null,
+): node is ISymbioteNode {
   if (node !== null) return true;
   dlog(
     `SearchBarCommands.${command}: skipped, node is null (ref never attached) at t=${Date.now()}`,
@@ -45,7 +52,9 @@ function makeCommand(
 
 // `getNode` is a LAZY getter, read on every call - see buildScrollViewHandle's comment for why
 // an eager capture would freeze `null`.
-export function buildSearchBarHandle(getNode: () => ISymbioteNode | null): ISearchBarCommands {
+export function buildSearchBarHandle(
+  getNode: () => ISymbioteNode | null,
+): ISearchBarCommands {
   return {
     focus: makeCommand(getNode, 'focus'),
     blur: makeCommand(getNode, 'blur'),

package/src/core/stack-router-state/index.ts

@@ -42,8 +42,11 @@ export function reconcileStackRoutes(
   state: INavigatorState,
   registeredNames: readonly string[],
 ): INavigatorState {
-  const routes = state.routes.filter(route => registeredNames.includes(route.name));
+  const routes = state.routes.filter(route =>
+    registeredNames.includes(route.name),
+  );
   // filter preserves order, so an unchanged length means nothing was dropped.
-  if (routes.length === state.routes.length || routes.length === 0) return state;
+  if (routes.length === state.routes.length || routes.length === 0)
+    return state;
   return { routes };
 }

package/src/core/state-persistence/index.ts

@@ -11,11 +11,19 @@ import { isRecord } from '../guards';
 // params: undefined}`, and JSON.stringify drops undefined-valued keys - a JSON round trip of a
 // perfectly valid route legitimately arrives here without a `params` key at all.
 function isRoute(value: unknown): value is IRoute<unknown> {
-  return isRecord(value) && typeof value.key === 'string' && typeof value.name === 'string';
+  return (
+    isRecord(value) &&
+    typeof value.key === 'string' &&
+    typeof value.name === 'string'
+  );
 }
 
 function isNavigatorState(value: unknown): value is INavigatorState {
-  return isRecord(value) && Array.isArray(value.routes) && value.routes.every(isRoute);
+  return (
+    isRecord(value) &&
+    Array.isArray(value.routes) &&
+    value.routes.every(isRoute)
+  );
 }
 
 export function serializeNavigatorState(state: INavigatorState): unknown {
@@ -24,7 +32,9 @@ export function serializeNavigatorState(state: INavigatorState): unknown {
 
 export function deserializeNavigatorState(raw: unknown): INavigatorState {
   if (!isNavigatorState(raw)) {
-    throw new Error('deserializeNavigatorState: persisted value is not a valid navigator state');
+    throw new Error(
+      'deserializeNavigatorState: persisted value is not a valid navigator state',
+    );
   }
   return raw;
 }

package/src/core/tab-router-state/index.ts

@@ -29,7 +29,8 @@ export function createInitialTabState(
   routes: readonly IRouteEntry[],
   initialRouteName?: string,
 ): ITabRouterState {
-  if (initialRouteName === undefined) return { routes, index: INITIAL_FOCUSED_INDEX };
+  if (initialRouteName === undefined)
+    return { routes, index: INITIAL_FOCUSED_INDEX };
   const index = routes.findIndex(route => route.name === initialRouteName);
   return { routes, index: index === -1 ? INITIAL_FOCUSED_INDEX : index };
 }
@@ -77,7 +78,10 @@ export function tabRouterReducer(
       }
       const target = state.routes[index];
       const routes = state.routes.slice();
-      routes[index] = { ...target, params: mergeParams(target.params, action.params) };
+      routes[index] = {
+        ...target,
+        params: mergeParams(target.params, action.params),
+      };
       return { ...state, index, routes };
     }
 
@@ -86,7 +90,10 @@ export function tabRouterReducer(
       if (index === -1) return state;
       const target = state.routes[index];
       const routes = state.routes.slice();
-      routes[index] = { ...target, params: mergeParams(target.params, action.params) };
+      routes[index] = {
+        ...target,
+        params: mergeParams(target.params, action.params),
+      };
       return { ...state, routes };
     }