@symbiote-native/navigation 2.0.3 → 2.1.0

package/build/angular/drawer/index.js

@@ -243,12 +243,14 @@ let Drawer = (() => {
             this.dispatch({ type: 'toggleDrawer' });
         };
         jumpTo = (name) => {
-            // Captured BEFORE dispatch, mirroring vue/drawer/index.ts's jumpTo: a signal (like Vue's ref)
-            // mutates synchronously inside dispatch, so reading isOpen after it would already see the
-            // reducer's own isOpen: false and never animate the panel closed.
+            // Both sides of the dispatch, mirroring vue/drawer/index.ts's jumpTo: an unregistered name is
+            // a documented reducer no-op that hands the SAME state back, so animating off the pre-dispatch
+            // snapshot alone would slide the panel shut while the router still says isOpen. The signal is
+            // set synchronously inside dispatch, so the second read is already the reducer's own answer.
             const wasOpen = this.stateSignal()?.isOpen ?? false;
             this.dispatch({ type: 'jumpTo', name });
-            if (wasOpen)
+            const isOpenNow = this.stateSignal()?.isOpen ?? false;
+            if (wasOpen && !isOpenNow)
                 this.animateProgressTo(false);
         };
         panResponder = PanResponder.create({

package/build/angular/stack/index.d.ts

@@ -32,9 +32,11 @@ export declare class Stack implements AfterContentInit, OnDestroy, INavigatorHan
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
     private rebuildRegistry;
+    private reconcileWithRegistry;
     private initializeState;
     private createRoute;
     private dispatch;
+    private commitState;
     emitterFor(routeKey: string): INavigationEmitter;
     private mergedOptionsFor;
     componentFor(route: IRoute<unknown>): Type<unknown> | null;

package/build/angular/stack/index.js

@@ -35,7 +35,7 @@
 // self-registers instead: `adapters/angular/babel-register-composed.cjs` (a Metro babel preset
 // applied bundle-wide, not scoped to adapters/angular) scans this package's own AOT-compiled
 // (`ngc`) `ɵɵngDeclareComponent({selector: 'Stack', ...})` output and auto-calls
-// `registerComposedComponent('Stack')` at bundle time - same mechanism `.examples/angular`
+// `registerComposedComponent('Stack')` at bundle time - same mechanism `examples/angular`
 // navigation-demo screens and `@symbiote-native/slider`'s `Slider` rely on for their own composed
 // components mounted statically or via `NgComponentOutlet`. Unregistered, `createElement('Stack')`
 // falls through to a real `createNode` call and RN paints its own "Unimplemented component"
@@ -81,7 +81,7 @@ import { ChangeDetectionStrategy, Component, ContentChildren, Input, NO_ERRORS_S
 import { NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
 import { SymbioteHostPropsDirective } from '@symbiote-native/angular';
 import { Platform, dlog } from '@symbiote-native/engine';
-import { NAVIGATION_EVENT_BLUR, NAVIGATION_EVENT_FOCUS, NAVIGATION_EVENT_STATE, RNS_MODAL_SCREEN_VIEW_NAME, SCREEN_ON_APPEAR, SCREEN_ON_DISAPPEAR, SCREEN_ON_DISMISSED, SCREEN_ON_HEADER_BACK_BUTTON_CLICKED, STACK_ON_FINISH_TRANSITIONING, buildSearchBarPassthrough, createInitialNavigatorState, createNavigationEmitter, navigatorReducer, resolveHeaderInModalStackStyle, resolveScreenRenderPlan, resolveStackProps, } from '../../core/index.js';
+import { NAVIGATION_EVENT_BLUR, NAVIGATION_EVENT_FOCUS, NAVIGATION_EVENT_STATE, RNS_MODAL_SCREEN_VIEW_NAME, SCREEN_ON_APPEAR, SCREEN_ON_DISAPPEAR, SCREEN_ON_DISMISSED, SCREEN_ON_HEADER_BACK_BUTTON_CLICKED, STACK_ON_FINISH_TRANSITIONING, buildSearchBarPassthrough, createInitialNavigatorState, createNavigationEmitter, navigatorReducer, reconcileStackRoutes, resolveHeaderInModalStackStyle, resolveScreenRenderPlan, resolveStackProps, } from '../../core/index.js';
 import { NavigationScopeDirective } from '../navigation-scope.directive.js';
 import { SearchBarRefDirective } from '../search-bar-ref.directive.js';
 import { ScreenDirective } from '../screen.directive.js';
@@ -246,6 +246,21 @@ let Stack = (() => {
             for (const screen of this.screenChildren) {
                 this.registry.set(screen.name, screen);
             }
+            this.reconcileWithRegistry();
+        }
+        // A `<ng-template symbioteScreen>` marker can leave the @ContentChildren query (a marker behind
+        // an `@if`, a data-driven screen list) while its route is still in the pushed history, which
+        // would leave that entry with nothing for componentFor() to mount (reconcileStackRoutes' header).
+        // The signal write lives HERE, in the query-change callback, and never in a computed/template
+        // accessor - reconciliation is a reaction to the registry changing, not a derivation of it.
+        reconcileWithRegistry() {
+            const current = this.stateSignal();
+            if (current === undefined)
+                return;
+            const next = reconcileStackRoutes(current, [...this.registry.keys()]);
+            if (next === current)
+                return;
+            this.commitState(next);
         }
         initializeState() {
             if (this.stateSignal() !== undefined)
@@ -266,7 +281,12 @@ let Stack = (() => {
             const current = this.stateSignal();
             if (current === undefined)
                 return;
-            const next = navigatorReducer(current, action);
+            this.commitState(navigatorReducer(current, action));
+        }
+        // The one write path into stateSignal, shared by a dispatched action and a registry-driven
+        // reconciliation: both invalidate the plan cache, broadcast to every still-live route, and prune
+        // the emitters of routes that are gone.
+        commitState(next) {
             this.planCache.clear();
             this.stateSignal.set(next);
             const liveRouteKeys = new Set(next.routes.map(route => route.key));

package/build/angular/tabs/index.d.ts

@@ -32,7 +32,7 @@ export declare class Tab implements AfterContentInit, OnDestroy, ITabNavigatorHa
     ngOnDestroy(): void;
     private rebuildRegistry;
     private routesFromRegistry;
-    private initializeState;
+    private syncRegistry;
     private dispatch;
     private resolveTabOptions;
     focusedRoute(): IRoute<unknown> | undefined;

package/build/angular/tabs/index.js

@@ -53,7 +53,7 @@ import { ChangeDetectionStrategy, Component, ContentChildren, Input, QueryList,
 import { NgComponentOutlet } from '@angular/common';
 import { dlog } from '@symbiote-native/engine';
 import { DescriptorOutlet, View } from '@symbiote-native/angular';
-import { NAVIGATION_EVENT_BLUR, NAVIGATION_EVENT_FOCUS, createInitialTabState, createNavigationEmitter, diffFocusedRoute, isFocusedRoute, renderTabBar, tabRouterReducer, } from '../../core/index.js';
+import { NAVIGATION_EVENT_BLUR, NAVIGATION_EVENT_FOCUS, createInitialTabState, createNavigationEmitter, diffFocusedRoute, isFocusedRoute, reconcileTabRoutes, renderTabBar, tabRouterReducer, } from '../../core/index.js';
 import { NavigationScopeDirective } from '../navigation-scope.directive.js';
 import { TabScreenDirective } from '../tab-screen.directive.js';
 const TAB_ROOT_STYLE = { flex: 1 };
@@ -128,10 +128,9 @@ let Tab = (() => {
         jumpTo = (name, params) => this.dispatch({ type: 'jumpTo', name, params });
         setParams = (params, key) => this.dispatch({ type: 'setParams', key, params });
         ngAfterContentInit() {
-            this.rebuildRegistry();
-            this.initializeState();
+            this.syncRegistry();
             this.tabScreenChildrenSubscription = this.tabScreenChildren.changes.subscribe(() => {
-                this.rebuildRegistry();
+                this.syncRegistry();
             });
         }
         ngOnDestroy() {
@@ -152,12 +151,26 @@ let Tab = (() => {
                 params: entry.initialParams,
             }));
         }
-        initializeState() {
-            if (this.stateSignal() !== undefined)
-                return;
+        // A <ng-template symbioteTabScreen> can appear or disappear after mount (a marker behind an
+        // @if, a data-driven screen list), so the route list follows the LIVE query instead of staying
+        // frozen at whatever ngAfterContentInit first saw: reconcileTabRoutes (core) keeps each
+        // surviving route's key and accumulated params and moves focus only when the focused route is
+        // the one that left. Runs from the query's own `changes` subscription - an ordinary imperative
+        // callback, deliberately not a computed, since this writes the state signal.
+        syncRegistry() {
+            this.rebuildRegistry();
             const routes = this.routesFromRegistry();
             if (routes.length === 0)
                 dlog('Tab: no <ng-template symbioteTabScreen> children registered');
+            const current = this.stateSignal();
+            if (current !== undefined) {
+                this.stateSignal.set(reconcileTabRoutes(current, routes));
+                return;
+            }
+            // Seeding an empty list would resolve initialRouteName against nothing and lose it once the
+            // markers do arrive, so the state stays unseeded until at least one has registered.
+            if (routes.length === 0)
+                return;
             this.stateSignal.set(createInitialTabState(routes, this.initialRouteName));
         }
         dispatch(action) {

package/build/core/index.d.ts

@@ -1,6 +1,7 @@
 export * from './constants';
 export { createInitialNavigatorState, navigatorReducer, computeActivityState, isTopRoute, } from './navigator-state';
 export type { IRoute, INavigatorState, INavigatorAction } from './navigator-state';
+export { reconcileStackRoutes } from './stack-router-state';
 export type { IStackAnimation, IStackPresentation, IHeaderBackButtonDisplayMode, IHeaderUserInterfaceStyle, IOptionalBooleanNativeProp, ISheetAllowedDetents, ISheetLargestUndimmedDetent, ISheetInitialDetent, IHeaderBarButtonIcon, IHeaderBarButtonItemBadge, IHeaderBarButtonItemAction, IHeaderBarButtonMenuAction, IHeaderBarButtonSubmenu, IHeaderBarButtonItemMenu, IHeaderBarButtonItemSpacing, IHeaderBarButtonItem, ISearchBarAutoCapitalize, ISearchBarPlacement, ISearchBarOptions, IScreenOrientation, IScreenOptions, INavigatorPlatform, IScreenViewProps, IHeaderConfigViewProps, IStackViewProps, ISearchBarViewProps, } from './navigator-props';
 export { resolveHeaderConfigView, resolveScreenView, resolveSearchBarView } from './screen-options';
 export { buildSearchBarHandle } from './search-bar-commands';
@@ -11,7 +12,7 @@ export { serializeNavigatorState, deserializeNavigatorState } from './state-pers
 export { createNavigationEmitter, diffFocusedRoute, NAVIGATION_EVENT_FOCUS, NAVIGATION_EVENT_BLUR, NAVIGATION_EVENT_STATE, NAVIGATION_EVENT_BEFORE_REMOVE, } from './navigation-events';
 export type { INavigationEmitter, INavigationEventListener, INavigationEventName, IFocusTransition, } from './navigation-events';
 export { isRecord } from './guards';
-export { createInitialTabState, tabRouterReducer, isFocusedRoute } from './tab-router-state';
+export { createInitialTabState, tabRouterReducer, reconcileTabRoutes, isFocusedRoute, } from './tab-router-state';
 export type { ITabRouterState, ITabRouterAction } from './tab-router-state';
 export type { ITabBarIcon, ITabOptions } from './tab-options';
 export { renderTabBarItem, renderTabBar } from './render-tabs';

package/build/core/index.js

@@ -7,6 +7,10 @@
 // the descriptor bridge.
 export * from './constants.js';
 export { createInitialNavigatorState, navigatorReducer, computeActivityState, isTopRoute, } from './navigator-state/index.js';
+// Drops history entries whose `<Stack.Screen>` marker has unregistered - see
+// stack-router-state.ts's header for why the Stack's history needs this and the Tab's projection
+// does not.
+export { reconcileStackRoutes } from './stack-router-state/index.js';
 export { resolveHeaderConfigView, resolveScreenView, resolveSearchBarView } from './screen-options.js';
 export { buildSearchBarHandle } from './search-bar-commands.js';
 export { resolveScreenProps, resolveStackProps, renderHeaderConfig, resolveSearchBarProps, resolveScreenContentWrapperStyle, resolveScreenViewName, isHeaderInModal, resolveHeaderInModalStackStyle, resolveHeaderInModalScreenStyle, buildSearchBarPassthrough, resolveScreenRenderPlan, } from './render-stack.js';
@@ -18,7 +22,7 @@ export { createNavigationEmitter, diffFocusedRoute, NAVIGATION_EVENT_FOCUS, NAVI
 export { isRecord } from './guards.js';
 // Bottom-tabs navigator: a FOCUSED-INDEX router (not a stack - see tab-router-state.ts) driving
 // a pure-JS tab bar render, framework-agnostic and shared verbatim by every adapter.
-export { createInitialTabState, tabRouterReducer, isFocusedRoute } from './tab-router-state/index.js';
+export { createInitialTabState, tabRouterReducer, reconcileTabRoutes, isFocusedRoute, } from './tab-router-state/index.js';
 export { renderTabBarItem, renderTabBar } from './render-tabs.js';
 // Linking config: resolves a URL to a route (and back), the piece @react-navigation's
 // NavigationContainer `linking` prop provides on top of the framework-agnostic Linking module.

package/build/core/stack-router-state/index.d.ts

@@ -0,0 +1,2 @@
+import type { INavigatorState } from '../navigator-state';
+export declare function reconcileStackRoutes(state: INavigatorState, registeredNames: readonly string[]): INavigatorState;

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

@@ -0,0 +1,44 @@
+// StackRouter: the registry-reconciliation half (framework-agnostic, zero render). A Stack's route
+// list is navigation HISTORY, not a projection of the registered `<Stack.Screen>` markers the way a
+// Tab's is (tab-router-state) - it seeds exactly one route and grows only through push/replace. So
+// a marker that unregisters while its route still sits in the history (a marker behind an `{#if}`,
+// a data-driven screen list) leaves behind an entry nothing can render: the route stays, the
+// adapter's componentFor() finds no screen, and the user is parked on a blank RNSScreen with no
+// way to tell what happened. Mirrors @react-navigation/routers' StackRouter.getStateForRouteNames-
+// Change, which filters those routes out of the history and pulls the focused index back into
+// range.
+//
+// Deliberately NOT a navigatorReducer action: this is not something a caller dispatches, it is a
+// reaction to the registry changing underneath an unchanged history, and each adapter observes
+// that change through its own lifecycle. Keeping it a separate pure function lets every adapter
+// wire it its own way without teaching the reducer about a registry it has never seen.
+// The contract, and the two places it deliberately parts from upstream:
+//
+// - SURVIVORS KEEP THEIR IDENTITY. A stack route's key is COUNTER-derived (every adapter's
+//   createRoute increments a per-navigator sequence), not name-derived like a tab route's, so
+//   re-deriving the list from the registry would hand every survivor a brand-new key and remount
+//   live screens. Only the phantom entries go; every other route object passes through by
+//   reference, params included.
+//
+// - THE FOCUSED ROUTE IS THE TOP ONE. This state carries no `index` field: the focused route is
+//   always the last one (see computeActivityState's comment for why no route can outrank it), so
+//   upstream's `index: Math.min(state.index, routes.length - 1)` degenerates here to "the last
+//   survivor". Dropping the FOCUSED route therefore lands the user on the nearest still-registered
+//   route beneath it - where a pop() would have left them - rather than on nothing.
+//
+// - THE ROUTE LIST IS NEVER EMPTIED. `routes.length - 1` IS the focused index, so an empty list
+//   means no focused route at all - the blank screen this function exists to prevent. When nothing
+//   in the history survives (every marker gone, or the whole screen set swapped for new names) the
+//   state is returned UNCHANGED. Upstream instead pushes a freshly nanoid()-keyed route for
+//   initialRouteName; we cannot, because minting a route key belongs to the caller here
+//   (navigator-state.ts's header) and a derivation that mints one would allocate a new key on every
+//   re-run. Unchanged is also the right answer for the usual cause of a momentarily empty registry
+//   - markers unregistering and re-registering across a re-render - since the next run reconciles
+//   for real.
+export function reconcileStackRoutes(state, registeredNames) {
+    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;
+    return { routes };
+}

package/build/core/tab-router-state/index.d.ts

@@ -15,5 +15,6 @@ export type ITabRouterAction = {
     params: unknown;
 };
 export declare function createInitialTabState(routes: readonly IRouteEntry[], initialRouteName?: string): ITabRouterState;
+export declare function reconcileTabRoutes(state: ITabRouterState, nextRoutes: readonly IRouteEntry[]): ITabRouterState;
 export declare function tabRouterReducer(state: ITabRouterState, action: ITabRouterAction): ITabRouterState;
 export declare function isFocusedRoute(index: number, focusedIndex: number): boolean;

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

@@ -14,6 +14,25 @@ export function createInitialTabState(routes, initialRouteName) {
     const index = routes.findIndex(route => route.name === initialRouteName);
     return { routes, index: index === -1 ? INITIAL_FOCUSED_INDEX : index };
 }
+// A screen marker can appear or disappear after mount (a marker behind an `{#if}`, a data-driven
+// screen list), so a navigator's route list has to follow its registry instead of staying frozen
+// at whatever createInitialTabState saw first. Mirrors TabRouter.getStateForRouteNamesChange:
+// membership and order come from `nextRoutes`, but a route that survives keeps its IDENTITY (its
+// key) and everything jumpTo/setParams accumulated onto its params - only genuinely new names
+// take their entry from `nextRoutes`. Focus follows the previously focused route's NAME, so an
+// unrelated screen disappearing never moves the user; when the focused route is the one that
+// disappeared, focus falls back to the first route, the same landing spot every unresolvable
+// focus gets here (createInitialTabState's own fallback).
+export function reconcileTabRoutes(state, nextRoutes) {
+    const routes = nextRoutes.map(next => state.routes.find(route => route.name === next.name) ?? next);
+    const isUnchanged = routes.length === state.routes.length &&
+        routes.every((route, at) => route === state.routes[at]);
+    if (isUnchanged)
+        return state;
+    const focusedName = state.routes[state.index]?.name;
+    const index = routes.findIndex(route => route.name === focusedName);
+    return { routes, index: index === -1 ? INITIAL_FOCUSED_INDEX : index };
+}
 // jumpTo moves the focused index to an existing route by name and optionally merges params
 // (navigation.jumpTo(name, params) - the tab-actions doc's own signature); it never adds,
 // removes, or reorders routes (mirrors TabRouter: JUMP_TO is a no-op when the target name isn't

package/build/react/drawer/index.js

@@ -71,8 +71,10 @@ const DrawerImpl = forwardRef((props, forwardedRef) => {
     optionsRef.current = options;
     const screenWidthRef = useRef(screenWidth);
     screenWidthRef.current = screenWidth;
-    const isOpenRef = useRef(state.isOpen);
-    isOpenRef.current = state.isOpen;
+    // The whole router state, not just its isOpen bit: jumpTo below has to re-run the reducer to
+    // learn what the dispatch actually produced, and that needs the routes too.
+    const stateRef = useRef(state);
+    stateRef.current = state;
     const animateProgressTo = useCallback((open) => {
         // Investigation instrumentation (Drawer openDrawer-no-op / toggleDrawer-no-animation bug):
         // every imperative caller (openDrawer/closeDrawer/toggleDrawer/jumpTo) funnels through here,
@@ -92,40 +94,48 @@ const DrawerImpl = forwardRef((props, forwardedRef) => {
     }, [progress]);
     const handle = useMemo(() => ({
         openDrawer: () => {
-            dlog(`Drawer: openDrawer() called, isOpen=${isOpenRef.current} at t=${Date.now()}`);
+            dlog(`Drawer: openDrawer() called, isOpen=${stateRef.current.isOpen} at t=${Date.now()}`);
             animateProgressTo(true);
             dispatch({ type: 'openDrawer' });
         },
         closeDrawer: () => {
-            dlog(`Drawer: closeDrawer() called, isOpen=${isOpenRef.current} at t=${Date.now()}`);
+            dlog(`Drawer: closeDrawer() called, isOpen=${stateRef.current.isOpen} at t=${Date.now()}`);
             animateProgressTo(false);
             dispatch({ type: 'closeDrawer' });
         },
         toggleDrawer: () => {
-            dlog(`Drawer: toggleDrawer() called, isOpen=${isOpenRef.current} at t=${Date.now()}`);
-            animateProgressTo(!isOpenRef.current);
+            dlog(`Drawer: toggleDrawer() called, isOpen=${stateRef.current.isOpen} at t=${Date.now()}`);
+            animateProgressTo(!stateRef.current.isOpen);
             dispatch({ type: 'toggleDrawer' });
         },
         jumpTo: (name) => {
-            dispatch({ type: 'jumpTo', name });
-            if (isOpenRef.current)
+            // An unregistered name is a documented reducer no-op that hands the SAME state back, so
+            // animating off `isOpen` alone would slide the panel shut while the router still says
+            // open. useReducer's dispatch is async - stateRef only catches up on the next render - so
+            // the reducer (a pure function) is re-run here to learn what the dispatch produces, and
+            // the animation runs only on a genuine open -> closed transition.
+            const action = { type: 'jumpTo', name };
+            const current = stateRef.current;
+            const next = drawerRouterReducer(current, action);
+            dispatch(action);
+            if (current.isOpen && !next.isOpen)
                 animateProgressTo(false);
         },
     }), [animateProgressTo]);
     useImperativeHandle(forwardedRef, () => handle, [handle]);
     const panResponder = useRef(PanResponder.create({
-        onStartShouldSetPanResponder: (event, gestureState) => shouldClaimDrawerSwipe(event, gestureState, screenWidthRef.current, isOpenRef.current, optionsRef.current, 'start'),
-        onMoveShouldSetPanResponder: (event, gestureState) => shouldClaimDrawerSwipe(event, gestureState, screenWidthRef.current, isOpenRef.current, optionsRef.current, 'move'),
+        onStartShouldSetPanResponder: (event, gestureState) => shouldClaimDrawerSwipe(event, gestureState, screenWidthRef.current, stateRef.current.isOpen, optionsRef.current, 'start'),
+        onMoveShouldSetPanResponder: (event, gestureState) => shouldClaimDrawerSwipe(event, gestureState, screenWidthRef.current, stateRef.current.isOpen, optionsRef.current, 'move'),
         onPanResponderGrant: () => {
             dlog('Drawer: gesture grant');
-            dragStartProgress.current = isOpenRef.current ? 1 : 0;
+            dragStartProgress.current = stateRef.current.isOpen ? 1 : 0;
         },
         onPanResponderMove: (_event, gestureState) => {
             const nextProgress = resolveDragProgress(gestureState, dragStartProgress.current, optionsRef.current);
             progress.setValue(nextProgress);
         },
         onPanResponderRelease: (_event, gestureState) => {
-            const intent = resolveSwipeIntent(gestureState, isOpenRef.current, optionsRef.current);
+            const intent = resolveSwipeIntent(gestureState, stateRef.current.isOpen, optionsRef.current);
             const open = intent === 'open';
             dlog(`Drawer: gesture release -> ${open ? 'open' : 'close'}`);
             animateProgressTo(open);
@@ -133,7 +143,7 @@ const DrawerImpl = forwardRef((props, forwardedRef) => {
         },
         onPanResponderTerminate: () => {
             dlog('Drawer: gesture terminated, snapping back');
-            animateProgressTo(isOpenRef.current);
+            animateProgressTo(stateRef.current.isOpen);
         },
     })).current;
     const animated = isDrawerAnimated(options);

package/build/react/stack/index.js

@@ -11,7 +11,7 @@
 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';
@@ -53,7 +53,8 @@ const StackImpl = forwardRef((props, forwardedRef) => {
         routeSequence.current += 1;
         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');
@@ -61,6 +62,16 @@ const StackImpl = forwardRef((props, forwardedRef) => {
         }
         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 }),

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';
@@ -34,11 +34,25 @@ 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];

package/build/svelte/attachments.d.ts

@@ -0,0 +1,5 @@
+import type { ISearchBarCommands } from '../core';
+export declare function hostProps(props: Record<string, unknown>): (node: unknown) => void;
+export declare function searchBarRef(ref: {
+    current: ISearchBarCommands | null;
+} | undefined): (node: unknown) => (() => void) | void;

package/build/svelte/attachments.js

@@ -0,0 +1,61 @@
+// Svelte attachments (`{@attach ...}`) for the react-native-screens native leaves.
+//
+// WHY THESE EXIST AT ALL: every react-native-screens Fabric view name is capitalized and
+// un-hyphenated (RNSScreen, RNSScreenStack, RNSScreenStackHeaderConfig, RNSSearchBar, ...), so a
+// literal `<RNSScreen>` in a Svelte template parses as a COMPONENT reference, not an element -
+// the same wall @symbiote-native/slider's 'RNCSlider' leaf hit. Slider sidestepped it by mounting
+// the whole leaf through the Descriptor bridge, which works because that leaf carries no live
+// framework children. A stack screen DOES (the app's own screen component lives inside
+// RNSScreenContentWrapper), so the bridge is not an option here.
+//
+// The way through is `<svelte:element this={'RNSScreen'}>`: it creates the element via
+// `document.createElement(tag)` with a plain runtime string the compiler never inspects, and it
+// accepts ordinary framework children. Its one catch is documented in svelte-adapter-dom-shim
+// skill §15 - a dynamic tag compiles through Svelte's generic setAttribute/property-diffing
+// codegen, NOT the custom-element `p=` property-SET path, so writing `p={bag}` as an ATTRIBUTE on
+// it silently fails. An attachment bypasses that entirely: it is handed the raw element and
+// assigns the property from plain JS, then re-runs whenever the props it read change. Verified
+// against the real compiler + the real shim before this was built on.
+import { dlog, isSymbioteNode } from '@symbiote-native/engine';
+import { buildSearchBarHandle } from '../core/index.js';
+// `unknown` rather than `Element`: the value Svelte hands an attachment is one of the DOM shim's
+// own element classes, not a real DOM Element, and a function accepting `unknown` is still
+// assignable everywhere Svelte expects `(element: Element) => ...`.
+function isShimElement(value) {
+    return typeof value === 'object' && value !== null && 'engineNode' in value;
+}
+// The object-bag prop set, the same entry point every adapter's props go through (routeProp).
+// Re-runs on every change of `props`, and the shim's own `p` setter diffs per key from there.
+export function hostProps(props) {
+    return node => {
+        if (!isShimElement(node)) {
+            dlog('navigation: hostProps attached to a non-shim element, ignored');
+            return;
+        }
+        node.p = props;
+    };
+}
+// The Svelte twin of Angular's SearchBarRefDirective / React's and Vue's callback `ref` on the
+// RNSSearchBar element: fills the app-supplied cell once the native node exists and clears it on
+// teardown. buildSearchBarHandle's own getter is LAZY, so handing it the node here is safe even
+// before the first commit.
+export function searchBarRef(ref) {
+    return node => {
+        if (ref === undefined)
+            return;
+        if (!isShimElement(node)) {
+            ref.current = null;
+            return;
+        }
+        const engineNode = node.engineNode;
+        if (!isSymbioteNode(engineNode)) {
+            dlog('navigation: search bar attachment ran before the shim went live');
+            ref.current = null;
+            return;
+        }
+        ref.current = buildSearchBarHandle(() => engineNode);
+        return () => {
+            ref.current = null;
+        };
+    };
+}

package/build/svelte/descriptor-subtree.d.ts

@@ -0,0 +1,3 @@
+import type { ShimElement } from '@symbiote-native/svelte/native-view-bridge';
+import type { IDescriptorChild } from '@symbiote-native/components';
+export declare function createDescriptorSubtreeSync(): (host: ShimElement | null, children: IDescriptorChild[]) => void;

package/build/svelte/descriptor-subtree.js

@@ -0,0 +1,37 @@
+// A shape-CHANGE-tolerant wrapper over @symbiote-native/svelte's Descriptor bridge.
+//
+// `mountDescriptorChildren` (svelte-adapter-dom-shim skill §19) is deliberately shape-stable: it
+// builds each shim node once and only re-sets props thereafter, throwing if the tree shape ever
+// changes, because every `core/components` render-*.ts produces a constant shape. The navigation
+// package's tab bar is the exception - `renderTabBar` emits one child per registered route, and
+// that count genuinely varies (it is 0 until the `<Tab.Screen>` markers have registered, and
+// changes again if a screen is added or removed). Same situation @symbiote-native/slider's own
+// steps-indicator overlay is in, and the same resolution: keep the fast path for the common
+// "same shape, new prop values" case and rebuild only when the shape actually changed.
+//
+// The shape signature covers types and nesting, not just the top-level count, because a tab bar
+// item's own children vary too (an item gains an icon wrapper only when it has an icon or badge).
+import { mountDescriptorChildren } from '@symbiote-native/svelte/native-view-bridge';
+const TEXT_CHILD_MARK = '#';
+function shapeOf(children) {
+    return children
+        .map(child => typeof child === 'string' ? TEXT_CHILD_MARK : `${child.type}(${shapeOf(child.children)})`)
+        .join(',');
+}
+export function createDescriptorSubtreeSync() {
+    let mounted;
+    let shape;
+    return (host, children) => {
+        if (host === null)
+            return;
+        const nextShape = shapeOf(children);
+        if (mounted === undefined || nextShape !== shape) {
+            for (const child of host.children.slice())
+                host.removeChild(child);
+            mounted = mountDescriptorChildren(host, children);
+            shape = nextShape;
+            return;
+        }
+        mounted.update(children);
+    };
+}

package/build/svelte/drawer/drawer-props.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { IStyleProp, IViewStyle } from '@symbiote-native/engine';
+import type { IDrawerDescriptorMap, IDrawerNavigatorHandle, IDrawerOptions, IDrawerRouterState } from '../../core';
+export type IDrawerContentSlotProps = {
+    state: IDrawerRouterState;
+    descriptors: IDrawerDescriptorMap;
+    navigation: IDrawerNavigatorHandle;
+};
+export type IDrawerProps = IDrawerOptions & {
+    initialRouteName?: string;
+    drawerStyle?: IStyleProp<IViewStyle>;
+    children?: Snippet;
+    drawerContent?: Snippet<[IDrawerContentSlotProps]>;
+};

package/build/svelte/drawer/drawer-props.js

@@ -0,0 +1,3 @@
+// Drawer's own public prop surface. Plain `.ts` for the tsc-cannot-see-a-`.svelte`-named-export
+// reason ../screen-props.ts documents.
+export {};

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

@@ -0,0 +1,10 @@
+export declare const Drawer: import("svelte").Component<import("./drawer-props").IDrawerProps, {
+    openDrawer: () => void;
+    closeDrawer: () => void;
+    toggleDrawer: () => void;
+    jumpTo: (name: string) => void;
+}, ""> & {
+    Screen: import("svelte").Component<import("..").IDrawerScreenProps, {}, "">;
+};
+export type { IDrawerNavigatorHandle, IDrawerDescriptorMap } from '../../core';
+export type { IDrawerContentSlotProps, IDrawerProps } from './drawer-props';

package/build/svelte/drawer/index.js

@@ -0,0 +1,6 @@
+// `Drawer.Screen` alongside the standalone `DrawerScreen` export, matching React's and Vue's
+// barrels - see ../stack/index.ts for why Object.assign is the right mechanism on a compiled
+// Svelte component.
+import DrawerImpl from './index.svelte';
+import DrawerScreen from '../drawer-screen.svelte';
+export const Drawer = Object.assign(DrawerImpl, { Screen: DrawerScreen });