@symbiote-native/navigation 2.0.3 → 2.2.0

package/build/react/stack/index.js

@@ -11,19 +11,23 @@
 import { createElement, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useMemo, useReducer, useRef, } from 'react';
 import { descriptorToReact } from '@symbiote-native/react';
 import { Platform, debugNodeId, dlog } from '@symbiote-native/engine';
-import { NAVIGATION_EVENT_BLUR, NAVIGATION_EVENT_FOCUS, NAVIGATION_EVENT_STATE, RNS_SCREEN_CONTENT_WRAPPER_VIEW_NAME, RNS_SCREEN_STACK_VIEW_NAME, RNS_SCREEN_VIEW_NAME, SCREEN_ON_APPEAR, SCREEN_ON_DISAPPEAR, SCREEN_ON_DISMISSED, SCREEN_ON_HEADER_BACK_BUTTON_CLICKED, SCREEN_ON_WILL_APPEAR, SCREEN_ON_WILL_DISAPPEAR, STACK_ON_FINISH_TRANSITIONING, buildSearchBarHandle, buildSearchBarPassthrough, computeActivityState, createInitialNavigatorState, createNavigationEmitter, navigatorReducer, resolveScreenRenderPlan, resolveStackProps, } from '../../core/index.js';
+import { NAVIGATION_EVENT_BLUR, NAVIGATION_EVENT_FOCUS, NAVIGATION_EVENT_STATE, RNS_SCREEN_CONTENT_WRAPPER_VIEW_NAME, RNS_SCREEN_STACK_VIEW_NAME, RNS_SCREEN_VIEW_NAME, SCREEN_ON_APPEAR, SCREEN_ON_DISAPPEAR, SCREEN_ON_DISMISSED, SCREEN_ON_HEADER_BACK_BUTTON_CLICKED, SCREEN_ON_WILL_APPEAR, SCREEN_ON_WILL_DISAPPEAR, STACK_ON_FINISH_TRANSITIONING, buildSearchBarHandle, buildSearchBarPassthrough, computeActivityState, createInitialNavigatorState, createNavigationEmitter, navigatorReducer, reconcileStackRoutes, resolveScreenRenderPlan, resolveStackProps, } from '../../core/index.js';
 import { collectRegistry } from '../collect-registry.js';
 import { NavigationContext } from '../navigation-context.js';
 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,16 +55,35 @@ 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 [state, dispatch] = useReducer(navigatorReducer, undefined, () => {
+    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));
     });
+    // A <Stack.Screen> marker can unregister while its route is still in the pushed history, which
+    // would leave that entry with nothing to render (reconcileStackRoutes' header). Reconciling here
+    // rather than in an effect repairs the CURRENT paint - the call is pure and hands back the same
+    // reference when nothing changed, so it is safe during render; the effect below only PERSISTS
+    // the repair, so the next push builds on the pruned history instead of the phantom one.
+    const state = reconcileStackRoutes(dispatchedState, registeredNames);
+    useEffect(() => {
+        if (state !== dispatchedState)
+            dispatch({ type: 'reset', state });
+    }, [state, dispatchedState]);
     const handle = useMemo(() => ({
         push: (name, params) => dispatch({ type: 'push', route: createRoute(name, params) }),
         pop: count => dispatch({ type: 'pop', count }),
@@ -101,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
@@ -155,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,
@@ -177,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
@@ -194,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

@@ -1,15 +1,15 @@
 // Tab, the React lifecycle half. The focused-index router (tab-router-state) and the tab-bar
 // Descriptor builder (render-tabs) live in @symbiote-native/navigation core, shared verbatim
-// with the Vue/Angular adapters; here React supplies the lifecycle - useReducer for the focused
-// index, useId for route-key generation, useImperativeHandle for the jumpTo/setParams handle -
-// plus the descriptor bridge for the tab-bar leaf, exactly like Stack bridges its header config
-// (react/stack.ts). Unlike Stack, a bottom-tabs bar is a PURE-JS UI: it paints ordinary
+// with the Vue/Angular adapters; here React supplies the lifecycle - useState for the dispatched
+// router state, useId for route-key generation, useImperativeHandle for the jumpTo/setParams
+// handle - plus the descriptor bridge for the tab-bar leaf, exactly like Stack bridges its header
+// config (react/stack.ts). Unlike Stack, a bottom-tabs bar is a PURE-JS UI: it paints ordinary
 // `symbiote-view`/`symbiote-text` primitives via the shared render fn, so there is no
 // react-native-screens ViewConfig to register here - Tab needs no `../register` import.
-import { createElement, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useMemo, useReducer, } from 'react';
+import { createElement, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useMemo, useState, } from 'react';
 import { descriptorToReact } from '@symbiote-native/react';
 import { dlog } from '@symbiote-native/engine';
-import { NAVIGATION_EVENT_BLUR, NAVIGATION_EVENT_FOCUS, createInitialTabState, createNavigationEmitter, isFocusedRoute, renderTabBar, tabRouterReducer, } from '../../core/index.js';
+import { NAVIGATION_EVENT_BLUR, NAVIGATION_EVENT_FOCUS, createInitialTabState, createNavigationEmitter, isFocusedRoute, reconcileTabRoutes, renderTabBar, tabRouterReducer, } from '../../core/index.js';
 import { collectRegistry } from '../collect-registry.js';
 import { NavigationContext } from '../navigation-context.js';
 import { TabScreen } from '../tab-screen.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 };
@@ -34,11 +36,27 @@ const TabImpl = forwardRef((props, forwardedRef) => {
         name,
         params: entry.initialParams,
     })), [registry, routeIdPrefix]);
-    const [state, dispatch] = useReducer(tabRouterReducer, undefined, () => createInitialTabState(routes, props.initialRouteName));
+    // A <Tab.Screen> can appear or disappear after mount (a marker behind a conditional, a
+    // data-driven screen list), so the route list is re-derived from `children` on every render and
+    // the STORED state is reconciled against it (reconcileTabRoutes, core - it preserves each
+    // surviving route's key and accumulated params and keeps focus on the same route NAME) rather
+    // 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 resolveState = useCallback((stored) => stored === null
+        ? createInitialTabState(routes, props.initialRouteName)
+        : reconcileTabRoutes(stored, routes), [routes, props.initialRouteName]);
+    const state = resolveState(storedState);
     if (routes.length === 0)
         dlog('Tab: no <Tab.Screen> children registered');
-    const jumpTo = useCallback((name, params) => dispatch({ type: 'jumpTo', name, params }), []);
-    const setParams = useCallback((params, key) => dispatch({ type: 'setParams', key, params }), []);
+    // The updater re-resolves rather than closing over `state` so that two dispatches batched into
+    // one render still compose: the second reduces over the first's result, not a stale snapshot.
+    const dispatch = useCallback((action) => setStoredState(current => tabRouterReducer(resolveState(current), action)), [resolveState]);
+    const jumpTo = useCallback((name, params) => dispatch({ type: 'jumpTo', name, params }), [dispatch]);
+    const setParams = useCallback((params, key) => dispatch({ type: 'setParams', key, params }), [dispatch]);
     const handle = useMemo(() => ({ jumpTo, setParams }), [jumpTo, setParams]);
     useImperativeHandle(forwardedRef, () => handle, [handle]);
     const focusedRoute = state.routes[state.index];
@@ -70,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;
+};

package/build/solid/drawer/index.js

@@ -0,0 +1,394 @@
+// Drawer, the Solid lifecycle half. The open/closed + focused-route router (drawer-router-state)
+// and the pure swipe/geometry math (drawer-options) live in @symbiote-native/navigation core,
+// shared verbatim with every other adapter; here Solid supplies the lifecycle - a signal for the
+// router, a PanResponder built ONCE whose callbacks read options/window-width/isOpen LIVE (Solid
+// props are getters, so a gesture callback always sees the current value with no ref-mirroring
+// dance), an Animated.Value driving the slide/opacity transforms, and a callback `ref` for the
+// open/close/toggle/jumpTo handle. Tab is the closer sibling (both are fixed-route-list,
+// no-react-native-screens navigators); Stack's push/pop and native-screen bridging don't apply.
+//
+// FEASIBILITY NOTE (mirrored verbatim from the React/Vue twins - the gaps are architectural, not
+// adapter-specific): the REAL @react-navigation/drawer is built on react-native-gesture-handler +
+// react-native-reanimated, neither of which this codebase depends on. What's built here reaches the
+// same swipe-to-open/close + front/back/slide/permanent behavior using only PanResponder +
+// Animated (both already in @symbiote-native/engine). See the explicit gap list at the bottom.
+//
+// THE SOLID-ONLY PART: renderDrawer's Descriptor SHAPE follows `drawerType` - the slot ORDER
+// changes, and 'permanent' drops the animation entirely. descriptorToSolid builds once and updates
+// props in place, so a type/position change is a genuine rebuild boundary and is asked for by name
+// (a createMemo over those discriminators alone, build untracked -
+// .claude/rules/solid-descriptor-bridge.md §5). Everything else - width, overlay colour, the live
+// interpolations, the focused screen's params - flows through prop accessors on the existing nodes.
+//
+// `drawerContent` is a render prop taking an ACCESSOR, called once and untracked, not a plain
+// value: §4 of the same rules file. A value snapshot would freeze the drawer's own content at the
+// state it was built with, and re-invoking it from inside a tracked scope would replace the whole
+// panel subtree mid-gesture.
+import { createEffect, createMemo, createSignal, mergeProps, onCleanup, untrack, } from 'solid-js';
+import { Animated, createWindowDimensions } from '@symbiote-native/solid';
+// createComponent from solid-js, insert from the renderer - see stack/index.ts's note.
+import { createComponent } from 'solid-js';
+import { insert } from '@symbiote-native/solid/renderer';
+import { PanResponder, dlog } from '@symbiote-native/engine';
+import { DRAWER_DEFAULT_OVERLAY_COLOR, NAVIGATION_EVENT_BLUR, NAVIGATION_EVENT_FOCUS, createInitialDrawerRouterState, createNavigationEmitter, diffFocusedRoute, drawerChildOrder, drawerRouterReducer, isDrawerAnimated, renderDrawer, resolveDragProgress, resolveDrawerGeometry, resolveDrawerPosition, resolveDrawerSlotInterpolation, resolveDrawerType, resolveSwipeIntent, shouldClaimDrawerSwipe, } from '../../core/index.js';
+import { hostElement } from '../host.js';
+import { NavigationScopeProvider, useNavigationScope, } from '../navigation-context.js';
+import { ScreenCollectorProvider, createScreenSignal, toRegistry, } from '../screen-registry.js';
+import { DrawerScreen } from '../screen.js';
+const DRAWER_SNAP_DURATION = 250;
+let navigatorSequence = 0;
+function resolveDrawerScreenOptions(entry, args) {
+    if (typeof entry.options === 'function')
+        return entry.options(args);
+    return entry.options ?? {};
+}
+function sameDrawerShape(a, b) {
+    return (a.type === b.type && a.position === b.position && a.animated === b.animated);
+}
+function DrawerImpl(props) {
+    const parentScope = useNavigationScope();
+    const { screens, collector } = createScreenSignal('drawer');
+    const registry = createMemo(() => toRegistry(screens()));
+    navigatorSequence += 1;
+    const routeIdPrefix = `drawer-${navigatorSequence}`;
+    // Every field read live off `props`, so a gesture callback (built once, below) always negotiates
+    // against the CURRENT options - Solid props are getters, which is what removes React's
+    // useRef(value) mirroring here.
+    function currentOptions() {
+        return {
+            drawerType: props.drawerType,
+            drawerPosition: props.drawerPosition,
+            drawerWidth: props.drawerWidth,
+            overlayColor: props.overlayColor,
+            swipeEnabled: props.swipeEnabled,
+            swipeEdgeWidth: props.swipeEdgeWidth,
+            swipeMinDistance: props.swipeMinDistance,
+            swipeMinVelocity: props.swipeMinVelocity,
+        };
+    }
+    // Route keys are derived from the screen NAME, so the derivation is pure and re-runnable.
+    const routes = createMemo(() => [...registry().entries()].map(([name, entry]) => ({
+        key: `${routeIdPrefix}-${name}`,
+        name,
+        params: entry.initialParams,
+    })));
+    // `null` means nothing has dispatched yet - and until then the initial state is RE-DERIVED from
+    // the registry on every read rather than cached. That is not an optimisation detail, it is what
+    // makes the drawer correct: each marker registers with its OWN signal write, and Solid can
+    // recompute a downstream memo between two of them, so a one-shot seed reliably captured only the
+    // FIRST screen and every later jumpTo was a no-op against a one-route router. Once the app
+    // dispatches, the route list freezes - matching React's and Vue's, which build it once in their
+    // setup pass and never reconcile (a marker added after that is ignored on every adapter).
+    const [dispatched, setDispatched] = createSignal(null);
+    const state = createMemo(() => {
+        const current = dispatched();
+        if (current !== null)
+            return current;
+        const initial = routes();
+        if (initial.length === 0) {
+            dlog('Drawer: no <Drawer.Screen> children registered');
+        }
+        return createInitialDrawerRouterState(initial, props.initialRouteName);
+    });
+    function dispatch(action) {
+        setDispatched(drawerRouterReducer(state(), action));
+    }
+    const windowDimensions = createWindowDimensions();
+    // progress: 0 closed -> 1 open, the single Animated.Value every slide/opacity transform below
+    // interpolates from. A plain const: a Solid body runs once, so this needs no re-creation guard
+    // the way React's useRef(new Animated.Value(...)).current does.
+    const progress = new Animated.Value(state().isOpen ? 1 : 0);
+    // Where a drag STARTS from, in progress units. Always exactly 0 or 1: a gesture only begins at
+    // rest, since terminate/release always snap back before another grant can fire.
+    let dragStartProgress = 0;
+    function animateProgressTo(open) {
+        dlog(`Drawer: animateProgressTo(open=${open}) at t=${Date.now()}`);
+        Animated.timing(progress, {
+            toValue: open ? 1 : 0,
+            duration: DRAWER_SNAP_DURATION,
+            // Native-driver wiring is deferred for v1 - see the header feasibility note.
+            useNativeDriver: false,
+        }).start();
+    }
+    const handle = {
+        openDrawer: () => {
+            animateProgressTo(true);
+            dispatch({ type: 'openDrawer' });
+        },
+        closeDrawer: () => {
+            animateProgressTo(false);
+            dispatch({ type: 'closeDrawer' });
+        },
+        toggleDrawer: () => {
+            animateProgressTo(!state().isOpen);
+            dispatch({ type: 'toggleDrawer' });
+        },
+        jumpTo: (name) => {
+            // Both sides of the dispatch, because an unregistered name is a documented reducer no-op that
+            // hands the SAME state back: animating off the pre-dispatch snapshot alone would slide the
+            // panel shut while the router still says isOpen. The signal is written synchronously inside
+            // dispatch, so the second read is already the reducer's own answer.
+            const wasOpen = state().isOpen;
+            dispatch({ type: 'jumpTo', name });
+            if (wasOpen && !state().isOpen)
+                animateProgressTo(false);
+        },
+    };
+    props.ref?.(handle);
+    const panResponder = PanResponder.create({
+        onStartShouldSetPanResponder: (event, gestureState) => shouldClaimDrawerSwipe(event, gestureState, windowDimensions().width, state().isOpen, currentOptions(), 'start'),
+        onMoveShouldSetPanResponder: (event, gestureState) => shouldClaimDrawerSwipe(event, gestureState, windowDimensions().width, state().isOpen, currentOptions(), 'move'),
+        onPanResponderGrant: () => {
+            dragStartProgress = state().isOpen ? 1 : 0;
+        },
+        onPanResponderMove: (_event, gestureState) => {
+            progress.setValue(resolveDragProgress(gestureState, dragStartProgress, currentOptions()));
+        },
+        onPanResponderRelease: (_event, gestureState) => {
+            const intent = resolveSwipeIntent(gestureState, state().isOpen, currentOptions());
+            const open = intent === 'open';
+            dlog(`Drawer: gesture release -> ${open ? 'open' : 'close'}`);
+            animateProgressTo(open);
+            dispatch(open ? { type: 'openDrawer' } : { type: 'closeDrawer' });
+        },
+        onPanResponderTerminate: () => {
+            animateProgressTo(state().isOpen);
+        },
+    });
+    const emitters = new Map();
+    function emitterFor(routeKey) {
+        let emitter = emitters.get(routeKey);
+        if (emitter === undefined) {
+            emitter = createNavigationEmitter();
+            emitters.set(routeKey, emitter);
+        }
+        return emitter;
+    }
+    const focusedKey = createMemo(() => {
+        const current = state();
+        return current.routes[current.index]?.key;
+    });
+    // Deferred by a microtask for the same reason Tab's is: the newly focused screen's subtree, and
+    // the subscriptions inside it, are built by the effect flush this callback would otherwise run
+    // inside.
+    let lastFocusedKey;
+    createEffect(() => {
+        const nextKey = focusedKey();
+        const { blurKey, focusKey } = diffFocusedRoute(lastFocusedKey, nextKey);
+        if (blurKey === undefined && focusKey === undefined)
+            return;
+        lastFocusedKey = nextKey;
+        queueMicrotask(() => {
+            if (blurKey !== undefined) {
+                dlog(`Drawer: route "${blurKey}" blurred at t=${Date.now()}`);
+                emitterFor(blurKey).emit(NAVIGATION_EVENT_BLUR);
+            }
+            if (focusKey !== undefined) {
+                dlog(`Drawer: route "${focusKey}" focused at t=${Date.now()}`);
+                emitterFor(focusKey).emit(NAVIGATION_EVENT_FOCUS);
+            }
+        });
+    });
+    onCleanup(() => {
+        if (lastFocusedKey !== undefined) {
+            emitterFor(lastFocusedKey).emit(NAVIGATION_EVENT_BLUR);
+        }
+    });
+    function routeFor(routeKey) {
+        const found = state().routes.find(route => route.key === routeKey);
+        return found ?? { key: routeKey, name: '', params: undefined };
+    }
+    const focusedComponent = createMemo(() => {
+        const current = state();
+        const route = current.routes[current.index];
+        return route === undefined
+            ? undefined
+            : registry().get(route.name)?.component;
+    });
+    const content = createMemo(() => {
+        const routeKey = focusedKey();
+        const Component = focusedComponent();
+        return untrack(() => {
+            if (routeKey === undefined || Component === undefined)
+                return undefined;
+            const scope = () => ({
+                route: routeFor(routeKey),
+                navigation: handle,
+                emitter: emitterFor(routeKey),
+                parent: parentScope?.(),
+            });
+            return createComponent(NavigationScopeProvider, {
+                value: scope,
+                get children() {
+                    return createComponent(Component, {});
+                },
+            });
+        });
+    });
+    const descriptors = createMemo(() => {
+        const map = {};
+        const entries = registry();
+        for (const route of state().routes) {
+            const entry = entries.get(route.name);
+            if (entry === undefined)
+                continue;
+            map[route.key] = {
+                options: resolveDrawerScreenOptions(entry, {
+                    route,
+                    navigation: handle,
+                }),
+                navigation: handle,
+            };
+        }
+        return map;
+    });
+    // Called ONCE, untracked, with an accessor - trap §4. Calling it per change (or handing it a
+    // value) would rebuild the whole panel subtree on every drawer state change, which mid-gesture is
+    // exactly how a responder grant gets lost.
+    //
+    // LAZY, though, and inside a memo of its OWN - two separate reasons, both load-bearing.
+    // (a) Not called from this body directly: the markers have not registered yet at that point, so a
+    //     render prop reading `state`/`descriptors` at its own top level (which trap §4 documents as
+    //     a frozen read) would snapshot an EMPTY navigator.
+    // (b) Not a plain `let` cache either. Whatever computation first CALLS the render prop OWNS every
+    //     memo the returned subtree created, and disposes them when it re-runs - so a cached node
+    //     handed back to a re-running slot effect is a node whose own reactivity has been torn down,
+    //     silently frozen at its first paint. A dependency-free memo has a stable owner (this
+    //     component) and runs exactly once, which gives both properties at the same time.
+    const drawerContent = createMemo(() => untrack(() => props.drawerContent?.(() => ({
+        state: state(),
+        descriptors: descriptors(),
+        navigation: handle,
+    }))));
+    const shape = createMemo(() => {
+        const options = currentOptions();
+        return {
+            type: resolveDrawerType(options),
+            position: resolveDrawerPosition(options),
+            animated: isDrawerAnimated(options),
+        };
+    }, { type: '', position: '', animated: false }, { equals: sameDrawerShape });
+    function buildDrawer(current) {
+        const order = drawerChildOrder(currentOptions());
+        const rootDescriptor = createMemo(() => {
+            const options = currentOptions();
+            return renderDrawer({
+                overlayColor: props.overlayColor ?? DRAWER_DEFAULT_OVERLAY_COLOR,
+                drawerStyle: props.drawerStyle,
+                contentPassthrough: {},
+                overlayPassthrough: current.animated
+                    ? {
+                        pointerEvents: state().isOpen ? 'auto' : 'none',
+                        onStartShouldSetResponder: () => true,
+                        onResponderRelease: () => {
+                            animateProgressTo(false);
+                            dispatch({ type: 'closeDrawer' });
+                        },
+                    }
+                    : {},
+                panelPassthrough: {},
+            }, options);
+        });
+        function slotDescriptor(slot) {
+            const child = rootDescriptor().children[order.indexOf(slot)];
+            if (child === undefined || typeof child === 'string') {
+                throw new Error(`Drawer: renderDrawer produced no "${slot}" slot`);
+            }
+            return child;
+        }
+        // Each animated style holds an AnimatedInterpolation node, not a plain number/colour - it feeds
+        // only Animated.View's deliberately permissive `style?: unknown`, never the plain-IViewStyle
+        // branch. Recomputed reactively (geometry follows drawerWidth), which reaches the live node as
+        // an ordinary prop update rather than a rebuild.
+        function animatedStyle(slot) {
+            if (!current.animated)
+                return undefined;
+            const geometry = resolveDrawerGeometry(currentOptions());
+            // Three branches, not one call on a `slot` union: resolveDrawerSlotInterpolation is OVERLOADED
+            // per slot (only the overlay's result carries `opacity`), and a union argument matches no
+            // overload. The branch is also what makes the opacity read type-safe without a cast.
+            if (slot === 'overlay') {
+                // The overlay is a full-screen absolutely-positioned sibling BELOW content in paint order;
+                // for 'slide' the content itself translates away, so the overlay's translateX shares
+                // content's range rather than staying pinned full-screen.
+                const overlay = resolveDrawerSlotInterpolation(geometry, 'overlay');
+                return {
+                    opacity: progress.interpolate(overlay.opacity),
+                    transform: [{ translateX: progress.interpolate(overlay.translateX) }],
+                };
+            }
+            const interpolation = slot === 'content'
+                ? resolveDrawerSlotInterpolation(geometry, 'content')
+                : resolveDrawerSlotInterpolation(geometry, 'panel');
+            return {
+                transform: [
+                    { translateX: progress.interpolate(interpolation.translateX) },
+                ],
+            };
+        }
+        function slotChildren(slot) {
+            if (slot === 'content')
+                return content();
+            if (slot === 'panel')
+                return drawerContent();
+            return undefined;
+        }
+        function buildSlot(slot) {
+            const style = animatedStyle(slot);
+            if (style === undefined) {
+                const node = hostElement(slotDescriptor(slot).type, () => slotDescriptor(slot).props);
+                const children = slotChildren(slot);
+                if (children !== undefined)
+                    insert(node, children);
+                return node;
+            }
+            // ONE source, never a spread followed by an explicit prop: mergeProps takes the first
+            // NON-undefined value scanning back-to-front, so a later `undefined` silently loses to an
+            // earlier value (.claude/rules/solid-descriptor-bridge.md §6). Collapsing to a single bag
+            // removes the question. mergeProps still earns its place - it wraps the function source in a
+            // memo and hands Animated.View a reactive proxy, which is what keeps the slot's props live
+            // without rebuilding the node.
+            return createComponent(Animated.View, mergeProps(() => ({
+                ...slotDescriptor(slot).props,
+                style: [slotDescriptor(slot).props.style, animatedStyle(slot)],
+                get children() {
+                    return slotChildren(slot);
+                },
+            })));
+        }
+        const root = hostElement('symbiote-view', () => ({
+            ...rootDescriptor().props,
+            ...panResponder.panHandlers,
+        }));
+        insert(root, order.map(buildSlot));
+        return root;
+    }
+    const drawer = createMemo(() => {
+        const current = shape();
+        return untrack(() => buildDrawer(current));
+    });
+    const host = hostElement('symbiote-view', () => ({ style: { flex: 1 } }));
+    insert(host, drawer);
+    return createComponent(ScreenCollectorProvider, {
+        value: collector,
+        get children() {
+            return [props.children, host];
+        },
+    });
+}
+export const Drawer = Object.assign(DrawerImpl, { Screen: DrawerScreen });
+// --- Explicit gap list vs the real react-native-gesture-handler + react-native-reanimated
+// @react-navigation/drawer (mirrored verbatim from the React twin - the gaps are architectural,
+// not adapter-specific) ---
+// 1. `configureGestureHandler` - a raw react-native-gesture-handler `Gesture` object escape hatch.
+//    No PanResponder equivalent exists; not ported.
+// 2. Simultaneous/failure gesture RELATIONSHIPS (gesture-handler's declarative composition vs a
+//    nested ScrollView, another PanResponder, etc.) - PanResponder only offers negotiation via the
+//    should-set boolean gates used here (edge-start + dominant-axis), which is more prone to an
+//    accidental hijack of a nested horizontal ScrollView/Swiper.
+// 3. `useDrawerProgress` - a Reanimated SharedValue read on the UI thread. `progress` here is a
+//    JS-thread AnimatedValue; interpolating it works, but without native-driver wiring it does not
+//    carry the same synchronous UI-thread guarantee under JS-thread load.
+// 4. `hideStatusBarOnOpen` / `keyboardDismissMode` / `statusBarAnimation` / `overlayStyle` - not
+//    wired in this pass; straightforward additions once StatusBar/Keyboard module wiring is needed
+//    here (not a PanResponder/Animated limitation, just unscoped for v1).

package/build/solid/drawer-screen-props.d.ts

@@ -0,0 +1,13 @@
+import type { Component } from 'solid-js';
+import type { IDrawerNavigatorHandle, IDrawerScreenOptions, IRoute } from '../core';
+export type IDrawerScreenOptionsArgs = {
+    route: IRoute<unknown>;
+    navigation: IDrawerNavigatorHandle;
+};
+export type IDrawerScreenOptionsResolver = (args: IDrawerScreenOptionsArgs) => IDrawerScreenOptions;
+export type IDrawerScreenProps = {
+    name: string;
+    component: Component;
+    options?: IDrawerScreenOptions | IDrawerScreenOptionsResolver;
+    initialParams?: unknown;
+};

package/build/solid/drawer-screen-props.js

@@ -0,0 +1,2 @@
+// Drawer.Screen's public prop types. Same split rationale as screen-props.ts.
+export {};

package/build/solid/host.d.ts

@@ -0,0 +1,2 @@
+import type { ISymbioteNode } from '@symbiote-native/engine';
+export declare function hostElement(type: string, props: () => Record<string, unknown>): ISymbioteNode;