@symbiote-native/navigation 2.1.0 → 2.2.0

package/build/core/render-stack.js

@@ -11,7 +11,7 @@
 import { el } from '@symbiote-native/components';
 import { HEADER_ON_PRESS_BAR_BUTTON_ITEM, HEADER_ON_PRESS_BAR_BUTTON_MENU_ITEM, RNS_MODAL_SCREEN_VIEW_NAME, RNS_SCREEN_STACK_HEADER_CONFIG_VIEW_NAME, RNS_SCREEN_STACK_HEADER_SUBVIEW_VIEW_NAME, RNS_SCREEN_VIEW_NAME, RNS_SEARCH_BAR_VIEW_NAME, SEARCH_BAR_ON_BLUR, SEARCH_BAR_ON_CANCEL_BUTTON_PRESS, SEARCH_BAR_ON_CHANGE_TEXT, SEARCH_BAR_ON_CLOSE, SEARCH_BAR_ON_FOCUS, SEARCH_BAR_ON_OPEN, SEARCH_BAR_ON_SEARCH_BUTTON_PRESS, STACK_DEFAULT_ANIMATION, STACK_DEFAULT_PRESENTATION, } from './constants.js';
 import { computeActivityState } from './navigator-state/index.js';
-import { resolveHeaderConfigView, resolveScreenView, resolveSearchBarView } from './screen-options.js';
+import { resolveHeaderConfigView, resolveScreenView, resolveSearchBarView, } from './screen-options.js';
 // 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
 // into Fabric's shadow state on every frame of a detent drag, and a `bottom: 0`-pinned wrapper
@@ -65,7 +65,9 @@ export function resolveScreenViewName(stackPresentation, isAndroid) {
         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(stackPresentation, headerHidden, headerTranslucent, isAndroid) {
     let baseStyles;
@@ -96,13 +98,20 @@ export function resolveScreenContentWrapperStyle(stackPresentation, headerHidden
 export function isHeaderInModal(stackPresentation, headerHidden, isAndroid) {
     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() {
     return HEADER_IN_MODAL_STACK_STYLE;
 }

package/build/core/screen-options.js

@@ -7,7 +7,7 @@
 // The header bar-button payload+dispatch cluster (id-tagging, onPress lookup) lives in
 // header-bar-buttons.ts - self-contained, consumed here only as a black box by
 // resolveHeaderConfigView.
-import { buildHeaderBarButtonDispatch, prepareHeaderBarButtonItems } from './header-bar-buttons.js';
+import { buildHeaderBarButtonDispatch, prepareHeaderBarButtonItems, } from './header-bar-buttons.js';
 // 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
 // here because we drive RNSScreen directly (no react-native-screens JS component in the path).

package/build/core/search-bar-commands.js

@@ -5,7 +5,7 @@
 // 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 } from '@symbiote-native/engine';
+import { dispatchViewCommand, dlog, } from '@symbiote-native/engine';
 // dispatchViewCommand itself dlogs a "node not committed" skip; this null case (the ref never
 // attached to a live RNSSearchBar at all - e.g. the header's search bar isn't mounted, or a
 // stale handle outlived its screen) was the one unlogged gap, silently indistinguishable from

package/build/core/state-persistence/index.js

@@ -7,10 +7,14 @@ import { isRecord } from '../guards.js';
 // 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) {
-    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) {
-    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) {
     return state;

package/build/core/tab-router-state/index.js

@@ -49,7 +49,10 @@ export function tabRouterReducer(state, action) {
             }
             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 };
         }
         case 'setParams': {
@@ -58,7 +61,10 @@ export function tabRouterReducer(state, action) {
                 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 };
         }
         default:

package/build/react/drawer/index.js

@@ -15,8 +15,8 @@
 // @symbiote-native/engine), which is sufficient for a solid drawer but NOT byte-for-byte parity -
 // see the explicit gap list at the bottom of this file.
 import { createElement, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useMemo, useReducer, useRef, } from 'react';
-import { Animated, PanResponder, useWindowDimensions } from '@symbiote-native/react';
-import { dlog } from '@symbiote-native/engine';
+import { Animated, PanResponder, useWindowDimensions, } from '@symbiote-native/react';
+import { dlog, } from '@symbiote-native/engine';
 import { DRAWER_DEFAULT_OVERLAY_COLOR, NAVIGATION_EVENT_BLUR, NAVIGATION_EVENT_FOCUS, createInitialDrawerRouterState, createNavigationEmitter, drawerChildOrder, drawerRouterReducer, isDrawerAnimated, renderDrawer, resolveDragProgress, resolveDrawerGeometry, resolveDrawerSlotInterpolation, resolveSwipeIntent, shouldClaimDrawerSwipe, } from '../../core/index.js';
 import { collectRegistry } from '../collect-registry.js';
 import { NavigationContext } from '../navigation-context.js';
@@ -25,7 +25,9 @@ function isDrawerScreenElement(child) {
     return isValidElement(child) && child.type === DrawerScreen;
 }
 function resolveDrawerScreenOptions(entry, optionsArgs, screenOptions) {
-    const own = typeof entry.options === 'function' ? entry.options(optionsArgs) : entry.options;
+    const own = typeof entry.options === 'function'
+        ? entry.options(optionsArgs)
+        : entry.options;
     return { ...screenOptions, ...own };
 }
 const DRAWER_SNAP_DURATION = 250;
@@ -148,12 +150,24 @@ const DrawerImpl = forwardRef((props, forwardedRef) => {
     })).current;
     const animated = isDrawerAnimated(options);
     const geometry = useMemo(() => resolveDrawerGeometry(options), [options.drawerType, options.drawerPosition, options.drawerWidth]);
-    const panelSlot = animated ? resolveDrawerSlotInterpolation(geometry, 'panel') : undefined;
-    const contentSlot = animated ? resolveDrawerSlotInterpolation(geometry, 'content') : undefined;
-    const overlaySlot = animated ? resolveDrawerSlotInterpolation(geometry, 'overlay') : undefined;
-    const panelTranslateX = panelSlot ? progress.interpolate(panelSlot.translateX) : undefined;
-    const contentTranslateX = contentSlot ? progress.interpolate(contentSlot.translateX) : undefined;
-    const overlayOpacity = overlaySlot ? progress.interpolate(overlaySlot.opacity) : undefined;
+    const panelSlot = animated
+        ? resolveDrawerSlotInterpolation(geometry, 'panel')
+        : undefined;
+    const contentSlot = animated
+        ? resolveDrawerSlotInterpolation(geometry, 'content')
+        : undefined;
+    const overlaySlot = animated
+        ? resolveDrawerSlotInterpolation(geometry, 'overlay')
+        : undefined;
+    const panelTranslateX = panelSlot
+        ? progress.interpolate(panelSlot.translateX)
+        : undefined;
+    const contentTranslateX = contentSlot
+        ? progress.interpolate(contentSlot.translateX)
+        : undefined;
+    const overlayOpacity = overlaySlot
+        ? progress.interpolate(overlaySlot.opacity)
+        : 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 moves,
     // but for 'slide' content itself translates away by contentTranslateX, and without following it
@@ -161,9 +175,13 @@ const DrawerImpl = forwardRef((props, forwardedRef) => {
     // underneath instead of just the content sliver it's meant to dim. Tying overlay to the SAME
     // translateX as content keeps it registered exactly under content, wherever content actually is
     // (resolveDrawerSlotInterpolation's 'overlay' overload returns that same content delta).
-    const overlayTranslateX = overlaySlot ? progress.interpolate(overlaySlot.translateX) : undefined;
+    const overlayTranslateX = overlaySlot
+        ? progress.interpolate(overlaySlot.translateX)
+        : undefined;
     const focusedRoute = state.routes[state.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}"`);
     }
@@ -250,8 +268,13 @@ const DrawerImpl = forwardRef((props, forwardedRef) => {
             : { transform: [{ translateX: contentTranslateX }] },
         overlay: overlayOpacity === undefined
             ? undefined
-            : { opacity: overlayOpacity, transform: [{ translateX: overlayTranslateX }] },
-        panel: panelTranslateX === undefined ? undefined : { transform: [{ translateX: panelTranslateX }] },
+            : {
+                opacity: overlayOpacity,
+                transform: [{ translateX: overlayTranslateX }],
+            },
+        panel: panelTranslateX === undefined
+            ? undefined
+            : { transform: [{ translateX: panelTranslateX }] },
     };
     function renderSlot(slot) {
         const descriptor = slots.get(slot);

package/build/react/index.d.ts

@@ -2,14 +2,14 @@ import '../register';
 export { Stack } from './stack';
 export type { INavigatorHandle, IStackProps } from './stack';
 export { Screen } from './screen';
-export type { IScreenOptionsArgs, IScreenOptionsResolver, IScreenProps } from './screen';
-export type { IScreenOptions, IStackAnimation, IStackPresentation } from '../core';
-export { useNavigation, useRoute, useIsFocused, useFocusEffect, useNavigationState } from './hooks';
+export type { IScreenOptionsArgs, IScreenOptionsResolver, IScreenProps, } from './screen';
+export type { IScreenOptions, IStackAnimation, IStackPresentation, } from '../core';
+export { useNavigation, useRoute, useIsFocused, useFocusEffect, useNavigationState, } from './hooks';
 export type { INavigationHandle } from './hooks';
-export { useStackNavigation, useTabNavigation, useDrawerNavigation } from './hooks';
+export { useStackNavigation, useTabNavigation, useDrawerNavigation, } from './hooks';
 export type { IStackNavigationHandle, ITabNavigationHandle, IDrawerNavigationHandle, } from './hooks';
 export { NavigationContext } from './navigation-context';
-export type { INavigationContextValue, IAnyNavigatorHandle } from './navigation-context';
+export type { INavigationContextValue, IAnyNavigatorHandle, } from './navigation-context';
 export { useLinkingIntegration } from './linking';
 export type { ILinkingConfig, IScreenLinkingConfig } from '../core';
 export { Tab } from './tabs';
@@ -18,7 +18,7 @@ export { TabScreen } from './tab-screen';
 export type { ITabScreenOptionsArgs, ITabScreenOptionsResolver, ITabScreenProps, } from './tab-screen';
 export type { ITabOptions, ITabBarIcon } from '../core';
 export { Drawer } from './drawer';
-export type { IDrawerNavigatorHandle, IDrawerProps, IDrawerDescriptorMap } from './drawer';
+export type { IDrawerNavigatorHandle, IDrawerProps, IDrawerDescriptorMap, } from './drawer';
 export { DrawerScreen } from './drawer-screen';
 export type { IDrawerScreenOptionsArgs, IDrawerScreenOptionsResolver, IDrawerScreenProps, } from './drawer-screen';
-export type { IDrawerOptions, IDrawerScreenOptions, IDrawerType, IDrawerPosition } from '../core';
+export type { IDrawerOptions, IDrawerScreenOptions, IDrawerType, IDrawerPosition, } from '../core';

package/build/react/index.js

@@ -5,8 +5,8 @@
 import '../register';
 export { Stack } from './stack/index.js';
 export { Screen } from './screen.js';
-export { useNavigation, useRoute, useIsFocused, useFocusEffect, useNavigationState } from './hooks/index.js';
-export { useStackNavigation, useTabNavigation, useDrawerNavigation } from './hooks/index.js';
+export { useNavigation, useRoute, useIsFocused, useFocusEffect, useNavigationState, } from './hooks/index.js';
+export { useStackNavigation, useTabNavigation, useDrawerNavigation, } from './hooks/index.js';
 export { NavigationContext } from './navigation-context.js';
 export { useLinkingIntegration } from './linking.js';
 // Tab: the bottom-tabs navigator, a PURE-JS UI (no react-native-screens views involved, so no

package/build/react/stack/index.js

@@ -18,12 +18,16 @@ import { Screen } from '../screen.js';
 // backTitleVisible defaults to `true` on both platforms per the codegen spec's own default
 // (CT.WithDefault<boolean, 'true'>) - no ios/android divergence in v1 scope, so a single constant
 // stands in for the per-platform injection point ISliderPlatform-style adapters use elsewhere.
-const NAVIGATOR_PLATFORM = { defaultHeaderBackTitleVisible: true };
+const NAVIGATOR_PLATFORM = {
+    defaultHeaderBackTitleVisible: true,
+};
 function isScreenElement(child) {
     return isValidElement(child) && child.type === Screen;
 }
 function resolveScreenOptions(entry, optionsArgs, screenOptions) {
-    const own = typeof entry.options === 'function' ? entry.options(optionsArgs) : entry.options;
+    const own = typeof entry.options === 'function'
+        ? entry.options(optionsArgs)
+        : entry.options;
     return { ...screenOptions, ...own };
 }
 const StackImpl = forwardRef((props, forwardedRef) => {
@@ -51,14 +55,22 @@ const StackImpl = forwardRef((props, forwardedRef) => {
     }, [emitters]);
     const createRoute = useCallback((name, params) => {
         routeSequence.current += 1;
-        return { key: `${routeIdPrefix}-${name}-${routeSequence.current}`, name, params };
+        return {
+            key: `${routeIdPrefix}-${name}-${routeSequence.current}`,
+            name,
+            params,
+        };
     }, [routeIdPrefix]);
     const registeredNames = useMemo(() => [...registry.keys()], [registry]);
     const [dispatchedState, dispatch] = useReducer(navigatorReducer, undefined, () => {
         const initialRouteName = props.initialRouteName ?? registry.keys().next().value;
         if (initialRouteName === undefined) {
             dlog('Stack: no <Stack.Screen> children registered');
-            return createInitialNavigatorState({ key: routeIdPrefix, name: '', params: undefined });
+            return createInitialNavigatorState({
+                key: routeIdPrefix,
+                name: '',
+                params: undefined,
+            });
         }
         return createInitialNavigatorState(createRoute(initialRouteName, registry.get(initialRouteName)?.initialParams));
     });
@@ -112,7 +124,10 @@ const StackImpl = forwardRef((props, forwardedRef) => {
             dlog(`Stack: no screen registered for route name "${route.name}"`);
             return null;
         }
-        const screenOptionsArgs = { route, navigation: handle };
+        const screenOptionsArgs = {
+            route,
+            navigation: handle,
+        };
         const mergedOptions = resolveScreenOptions(entry, screenOptionsArgs, props.screenOptions);
         const activityState = computeActivityState(index, state.routes.length);
         // Investigation instrumentation (flicker-on-focus bug): fires on EVERY Stack render, not just
@@ -166,7 +181,8 @@ const StackImpl = forwardRef((props, forwardedRef) => {
                         const appRef = searchBarOptions.ref;
                         if (!appRef)
                             return;
-                        appRef.current = node === null ? null : buildSearchBarHandle(() => node);
+                        appRef.current =
+                            node === null ? null : buildSearchBarHandle(() => node);
                     },
                 }
                 : undefined,
@@ -188,7 +204,14 @@ const StackImpl = forwardRef((props, forwardedRef) => {
         // sizing (see RNS_SCREEN_CONTENT_WRAPPER_VIEW_NAME's comment in core/constants.ts). A
         // `push` screen doesn't need it, but a `formSheet` one is otherwise left with no content
         // ever attached natively.
-        const content = createElement(RNS_SCREEN_CONTENT_WRAPPER_VIEW_NAME, plan.contentWrapperProps, createElement(NavigationContext.Provider, { value: { route, navigation: handle, emitter: routeEmitter, parent: ambientContext } }, createElement(entry.component)));
+        const content = createElement(RNS_SCREEN_CONTENT_WRAPPER_VIEW_NAME, plan.contentWrapperProps, createElement(NavigationContext.Provider, {
+            value: {
+                route,
+                navigation: handle,
+                emitter: routeEmitter,
+                parent: ambientContext,
+            },
+        }, createElement(entry.component)));
         // react-native-screens' own Screen.tsx swaps in a DIFFERENT Fabric component
         // ('RNSModalScreen') for a modally-presented screen - its native updateLayoutMetrics: relies on
         // this exact class to know it must NOT apply Yoga's computed frame (see resolveScreenViewName's
@@ -205,7 +228,10 @@ const StackImpl = forwardRef((props, forwardedRef) => {
             // RNSScreen.mm treats an unset/inactive nested screen as not yet pushed, leaving it
             // parked at its pre-push transition position (off past the bottom edge) instead of
             // its real, presented frame.
-            { style: plan.innerScreenStyle, activityState: plan.activityState }, descriptorToReact(plan.headerConfig), content)))
+            {
+                style: plan.innerScreenStyle,
+                activityState: plan.activityState,
+            }, descriptorToReact(plan.headerConfig), content)))
             : createElement(plan.screenViewName, { key: route.key, ...plan.screenProps }, descriptorToReact(plan.headerConfig), content);
     });
     return createElement(RNS_SCREEN_STACK_VIEW_NAME, stackProps, ...children);

package/build/react/tabs/index.js

@@ -17,7 +17,9 @@ function isTabScreenElement(child) {
     return isValidElement(child) && child.type === TabScreen;
 }
 function resolveTabOptions(entry, optionsArgs, screenOptions) {
-    const own = typeof entry.options === 'function' ? entry.options(optionsArgs) : entry.options;
+    const own = typeof entry.options === 'function'
+        ? entry.options(optionsArgs)
+        : entry.options;
     return { ...screenOptions, ...own };
 }
 const TAB_CONTENT_STYLE = { flex: 1 };
@@ -41,7 +43,9 @@ const TabImpl = forwardRef((props, forwardedRef) => {
     // than staying frozen at whatever the first render saw. `null` means no marker had registered
     // yet: seeding an empty list would resolve initialRouteName against nothing and lose it, so the
     // state stays derived until either a marker arrives or something dispatches.
-    const [storedState, setStoredState] = useState(() => routes.length === 0 ? null : createInitialTabState(routes, props.initialRouteName));
+    const [storedState, setStoredState] = useState(() => routes.length === 0
+        ? null
+        : createInitialTabState(routes, props.initialRouteName));
     const resolveState = useCallback((stored) => stored === null
         ? createInitialTabState(routes, props.initialRouteName)
         : reconcileTabRoutes(stored, routes), [routes, props.initialRouteName]);
@@ -84,11 +88,17 @@ const TabImpl = forwardRef((props, forwardedRef) => {
             },
         };
     });
-    const focusedEntry = focusedRoute ? registry.get(focusedRoute.name) : undefined;
+    const focusedEntry = focusedRoute
+        ? registry.get(focusedRoute.name)
+        : undefined;
     const focusedOptions = focusedEntry && focusedRoute
         ? resolveTabOptions(focusedEntry, { route: focusedRoute, navigation: handle }, props.screenOptions)
         : props.screenOptions;
-    const tabBar = descriptorToReact(renderTabBar({ items, style: focusedOptions?.tabBarStyle, passthrough: {} }));
+    const tabBar = descriptorToReact(renderTabBar({
+        items,
+        style: focusedOptions?.tabBarStyle,
+        passthrough: {},
+    }));
     // Only the focused route's screen is ever mounted (unlike Stack, which keeps every pushed route
     // alive), so a fresh emitter per focus change is sufficient - no per-route emitter map to prune,
     // because the previous screen's whole subtree (and any listeners it registered) is torn down by

package/build/solid/drawer/index.d.ts

@@ -0,0 +1,22 @@
+import type { Accessor } from 'solid-js';
+import type { JSX } from '@symbiote-native/solid/jsx-runtime';
+import type { IStyleProp, IViewStyle } from '@symbiote-native/engine';
+import type { IDrawerDescriptorMap, IDrawerNavigatorHandle, IDrawerOptions, IDrawerRouterState } from '../../core';
+import { DrawerScreen } from '../screen';
+export type { IDrawerNavigatorHandle, IDrawerDescriptorMap } from '../../core';
+export type IDrawerContentSlotProps = {
+    state: IDrawerRouterState;
+    descriptors: IDrawerDescriptorMap;
+    navigation: IDrawerNavigatorHandle;
+};
+export type IDrawerProps = IDrawerOptions & {
+    initialRouteName?: string;
+    drawerStyle?: IStyleProp<IViewStyle>;
+    drawerContent?: (props: Accessor<IDrawerContentSlotProps>) => JSX.Element;
+    ref?: (handle: IDrawerNavigatorHandle) => void;
+    children?: JSX.Element;
+};
+declare function DrawerImpl(props: IDrawerProps): JSX.Element;
+export declare const Drawer: typeof DrawerImpl & {
+    Screen: typeof DrawerScreen;
+};