@symbiote-native/navigation 2.0.3 → 2.2.0

package/build/svelte/tabs/index.svelte

@@ -0,0 +1,269 @@
+<script lang="ts" module>
+  // Tab, the Svelte 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 React/Vue/Angular entries; here Svelte supplies the lifecycle - `$state.raw` for the
+  // router (its twin of useReducer), a module counter for route-key generation, `export
+  // function`s for the jumpTo/setParams handle - plus the Descriptor bridge for the tab-bar leaf.
+  // 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.
+  //
+  // Screens are discovered through the context collector (../screen-registry.ts), not by reading
+  // `children` - see stack/index.svelte's header for why, and ../registry-host.ts for where the
+  // markers are rendered.
+  let tabInstanceCounter = 0;
+
+  const TAB_ROOT_PROPS: Record<string, unknown> = { style: { flex: 1 } };
+  const TAB_CONTENT_PROPS: Record<string, unknown> = { style: { flex: 1 } };
+</script>
+
+<script lang="ts">
+  import type { Component } from 'svelte';
+  import { onDestroy, tick } from 'svelte';
+  import { dlog } from '@symbiote-native/engine';
+  import type { ShimElement } from '@symbiote-native/svelte/native-view-bridge';
+  import {
+    NAVIGATION_EVENT_BLUR,
+    NAVIGATION_EVENT_FOCUS,
+    createInitialTabState,
+    createNavigationEmitter,
+    diffFocusedRoute,
+    isFocusedRoute,
+    reconcileTabRoutes,
+    renderTabBar,
+    tabRouterReducer,
+  } from '../../core';
+  import type {
+    IDescriptor,
+    INavigationEmitter,
+    IRoute,
+    ITabBarItemView,
+    ITabNavigatorHandle,
+    ITabOptions,
+    ITabRouterAction,
+    ITabRouterState,
+  } from '../../core';
+  import { createDescriptorSubtreeSync } from '../descriptor-subtree';
+  import { getNavigationScope } from '../navigation-context';
+  import type { INavigationScopeValue } from '../navigation-context';
+  import NavigationScope from '../navigation-scope.svelte';
+  import { SCREEN_REGISTRY_HOST_PROPS } from '../registry-host';
+  import {
+    setScreenCollector,
+    toRegistry,
+    withoutScreen,
+  } from '../screen-registry';
+  import type { IRegisteredScreen } from '../screen-registry';
+  import type { ITabScreenProps } from '../tab-screen-props';
+  import type { ITabProps } from './tab-props';
+
+  let { initialRouteName, screenOptions, children }: ITabProps = $props();
+
+  // Read BEFORE this Tab establishes its own per-screen NavigationScope - becomes the `parent`
+  // link a nested screen's useNavigation().getParent() walks. undefined at the nesting root.
+  const parentScope = getNavigationScope();
+
+  const routeIdPrefix = `tab-${(tabInstanceCounter += 1)}`;
+
+  let screens = $state.raw<IRegisteredScreen<ITabScreenProps['options']>[]>([]);
+  setScreenCollector<ITabScreenProps['options']>({
+    kind: 'tab',
+    register: screen => {
+      screens = [...screens, screen];
+    },
+    unregister: screen => {
+      screens = withoutScreen(screens, screen);
+    },
+  });
+
+  const registry = $derived(toRegistry(screens));
+
+  // A tab's route list is a PROJECTION of the registry, not navigation history the way Stack's
+  // is: a marker registering or unregistering must add or drop its tab. Unlike Stack, a route key
+  // here is derived from the route NAME rather than an incrementing sequence, so re-deriving this
+  // list on every registry change re-keys nothing.
+  const registeredRoutes = $derived.by<IRoute<unknown>[]>(() =>
+    [...registry.entries()].map(([name, entry]) => ({
+      key: `${routeIdPrefix}-${name}`,
+      name,
+      params: entry.initialParams,
+    })),
+  );
+
+  // The dispatched half is the only STATE here; the registry half is re-derived and reconciled
+  // against it on every change (reconcileTabRoutes, core - it is what preserves each surviving
+  // route's key/params and keeps the focus on the same route NAME). Nothing needs memoizing
+  // inside the derivation, so there is no state write during a derivation to avoid in the first
+  // place. Until something dispatches there is nothing to reconcile against, hence the seed.
+  let dispatchedState = $state.raw<ITabRouterState | null>(null);
+
+  const state = $derived.by<ITabRouterState>(() => {
+    if (registeredRoutes.length === 0)
+      dlog('Tab: no <Tab.Screen> children registered');
+    const dispatched = dispatchedState;
+    return dispatched === null
+      ? createInitialTabState(registeredRoutes, initialRouteName)
+      : reconcileTabRoutes(dispatched, registeredRoutes);
+  });
+
+  function dispatch(action: ITabRouterAction): void {
+    dispatchedState = tabRouterReducer(state, action);
+  }
+
+  export function jumpTo(name: string, params?: unknown): void {
+    dispatch({ type: 'jumpTo', name, params });
+  }
+  export function setParams(params: unknown, key: string): void {
+    dispatch({ type: 'setParams', key, params });
+  }
+
+  const handle: ITabNavigatorHandle = { jumpTo, setParams };
+
+  // One emitter per route.key, created lazily and cached for the navigator's whole lifetime -
+  // mirrors Stack's own `emitters` map. This decouples emitter IDENTITY (stable, looked up by
+  // key, read below when a route's NavigationScope is built) from emit TIMING (must wait until
+  // the focused screen has actually mounted and subscribed).
+  const emitters = new Map<string, INavigationEmitter>();
+  function emitterFor(routeKey: string): INavigationEmitter {
+    let emitter = emitters.get(routeKey);
+    if (emitter === undefined) {
+      emitter = createNavigationEmitter();
+      emitters.set(routeKey, emitter);
+    }
+    return emitter;
+  }
+
+  // Tab paints its own bar in pure JS - there is no native onAppear/onDisappear to hook (unlike
+  // Stack's RNSScreen), so focus/blur is synthesized here. Keyed on the route KEY (not the route
+  // object) so a setParams-only change doesn't spuriously re-fire focus/blur.
+  //
+  // The bookkeeping updates immediately, but the actual emit is deferred to `tick()` - Svelte's
+  // twin of Vue's nextTick, and needed for the same reason: the newly-focused screen's own
+  // `$effect`s (its useIsFocused/useFocusEffect subscriptions) are created during THIS flush,
+  // after this effect was, so emitting synchronously here would reach zero subscribers.
+  let previousFocusedKey: string | undefined;
+  $effect(() => {
+    const nextKey = state.routes[state.index]?.key;
+    const { blurKey, focusKey } = diffFocusedRoute(previousFocusedKey, nextKey);
+    if (blurKey === undefined && focusKey === undefined) return;
+    previousFocusedKey = nextKey;
+    void tick().then(() => {
+      if (blurKey !== undefined) {
+        dlog(`Tab: route "${blurKey}" blurred at t=${Date.now()}`);
+        emitterFor(blurKey).emit(NAVIGATION_EVENT_BLUR);
+      }
+      if (focusKey !== undefined) {
+        dlog(`Tab: route "${focusKey}" focused at t=${Date.now()}`);
+        emitterFor(focusKey).emit(NAVIGATION_EVENT_FOCUS);
+      }
+    });
+  });
+
+  onDestroy(() => {
+    if (previousFocusedKey !== undefined) {
+      emitterFor(previousFocusedKey).emit(NAVIGATION_EVENT_BLUR);
+    }
+  });
+
+  function resolveTabOptions(
+    entry: IRegisteredScreen<ITabScreenProps['options']> | undefined,
+    route: IRoute<unknown>,
+  ): ITabOptions {
+    const own =
+      entry === undefined
+        ? undefined
+        : typeof entry.options === 'function'
+          ? entry.options({ route, navigation: handle })
+          : entry.options;
+    return { ...screenOptions, ...own };
+  }
+
+  const items = $derived.by<ITabBarItemView[]>(() =>
+    state.routes.map((route, index) => {
+      const entry = registry.get(route.name);
+      const focused = isFocusedRoute(index, state.index);
+      if (entry === undefined) {
+        dlog(`Tab: no screen registered for route name "${route.name}"`);
+        return { key: route.key, focused, label: route.name, passthrough: {} };
+      }
+      const options = resolveTabOptions(entry, route);
+      return {
+        key: route.key,
+        focused,
+        label: options.tabBarLabel ?? options.title ?? route.name,
+        icon: options.tabBarIcon,
+        badge: options.tabBarBadge,
+        activeTintColor: options.tabBarActiveTintColor,
+        inactiveTintColor: options.tabBarInactiveTintColor,
+        passthrough: {
+          onPress: () => jumpTo(route.name),
+          accessibilityRole: 'tab',
+          accessibilityState: { selected: focused },
+        },
+      };
+    }),
+  );
+
+  const focusedRoute = $derived(state.routes[state.index]);
+  const focusedOptions = $derived(
+    focusedRoute === undefined
+      ? screenOptions
+      : resolveTabOptions(registry.get(focusedRoute.name), focusedRoute),
+  );
+
+  const tabBar = $derived.by<IDescriptor>(() =>
+    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 NavigationScope per focus change is sufficient - the previous screen's
+  // whole subtree (and any listeners it registered) is torn down by an ordinary unmount when
+  // focus moves on.
+  const focusedScreen = $derived.by<
+    { scope: INavigationScopeValue; component: Component } | undefined
+  >(() => {
+    if (focusedRoute === undefined) return undefined;
+    const entry = registry.get(focusedRoute.name);
+    if (entry === undefined) return undefined;
+    return {
+      component: entry.component,
+      scope: {
+        route: focusedRoute,
+        navigation: handle,
+        emitter: emitterFor(focusedRoute.key),
+        parent: parentScope?.current,
+      },
+    };
+  });
+
+  // The bar's ROOT stays a literal template tag (so `bind:this` has a statically known tag) and
+  // only its children go through the Descriptor bridge - the uniform shape every Svelte component
+  // consuming a `render-*.ts` uses (svelte-adapter-dom-shim skill §19). The item count varies with
+  // the registry, hence the shape-change-tolerant wrapper rather than the raw bridge.
+  let tabBarHost = $state.raw<ShimElement | null>(null);
+  const syncTabBarChildren = createDescriptorSubtreeSync();
+  $effect(() => {
+    const host = tabBarHost;
+    const barChildren = tabBar.children;
+    syncTabBarChildren(host, barChildren);
+  });
+</script>
+
+<symbiote-view p={TAB_ROOT_PROPS}>
+  <symbiote-text p={SCREEN_REGISTRY_HOST_PROPS}>
+    {@render children?.()}
+  </symbiote-text>
+  <symbiote-view p={TAB_CONTENT_PROPS}>
+    {#if focusedScreen !== undefined}
+      {@const FocusedComponent = focusedScreen.component}
+      <NavigationScope value={focusedScreen.scope}>
+        <FocusedComponent />
+      </NavigationScope>
+    {/if}
+  </symbiote-view>
+  <symbiote-view p={tabBar.props} bind:this={tabBarHost} />
+</symbiote-view>

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

@@ -0,0 +1,8 @@
+import type { Component } from 'svelte';
+import type { ITabProps } from './tab-props';
+declare const Index: Component<ITabProps, {
+    jumpTo: (name: string, params?: unknown) => void;
+    setParams: (params: unknown, key: string) => void;
+}, "">;
+type Index = ReturnType<typeof Index>;
+export default Index;

package/build/svelte/tabs/tab-props.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+import type { ITabOptions } from '../../core';
+export type ITabProps = {
+    initialRouteName?: string;
+    screenOptions?: ITabOptions;
+    children?: Snippet;
+};

package/build/svelte/tabs/tab-props.js

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

package/build/vue/composables/use-navigation.js

@@ -8,6 +8,10 @@ export function useNavigation() {
     const scope = requireNavigationScope('useNavigation');
     return computed(() => {
         const { navigation, emitter, parent } = scope.value;
-        return { ...navigation, addListener: emitter.addListener, getParent: () => parent?.navigation };
+        return {
+            ...navigation,
+            addListener: emitter.addListener,
+            getParent: () => parent?.navigation,
+        };
     });
 }

package/build/vue/drawer/index.js

@@ -35,7 +35,12 @@ function asBoolean(value) {
 function isStyleProp(value) {
     return isRecord(value);
 }
-const DRAWER_TYPES = ['front', 'back', 'slide', 'permanent'];
+const DRAWER_TYPES = [
+    'front',
+    'back',
+    'slide',
+    'permanent',
+];
 // .some() itself doesn't narrow `value`'s type back at the call site - the `value is IDrawerType`
 // predicate on THIS function is what lets asDrawerType's ternary return `value` typed, mirroring
 // Modal's isOrientation guard (adapters/vue/src/components/modal.ts).
@@ -47,7 +52,8 @@ function asDrawerType(value) {
 }
 const DRAWER_POSITIONS = ['left', 'right'];
 function isDrawerPosition(value) {
-    return typeof value === 'string' && DRAWER_POSITIONS.some(position => position === value);
+    return (typeof value === 'string' &&
+        DRAWER_POSITIONS.some(position => position === value));
 }
 function asDrawerPosition(value) {
     return isDrawerPosition(value) ? value : undefined;
@@ -55,7 +61,9 @@ function asDrawerPosition(value) {
 function asComponent(value) {
     if (typeof value === 'function')
         return value;
-    return isRecord(value) ? value : undefined;
+    return isRecord(value)
+        ? value
+        : undefined;
 }
 // IDrawerScreenOptions carries only `title`/`drawerLabel`, small enough for direct field guards -
 // kept as a single cast-at-the-edge helper anyway for symmetry with stack.ts/tabs.ts's
@@ -166,13 +174,14 @@ const DrawerImpl = defineComponent((_props, { attrs: rawAttrs, slots, expose })
             dispatch({ type: 'toggleDrawer' });
         },
         jumpTo: (name) => {
-            // Captured BEFORE dispatch: unlike React's isOpenRef (only refreshed at the TOP of the
-            // next render, so it still holds the pre-dispatch value here since React batches the
-            // re-render asynchronously), this ref's `.value` mutates SYNCHRONOUSLY inside dispatch -
-            // reading it after dispatch would already see the reducer's own isOpen: false.
+            // 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 ref's `.value` mutates
+            // SYNCHRONOUSLY inside dispatch (unlike React's isOpenRef, refreshed only at the top of
+            // the next render), so the second read is already the reducer's own answer.
             const wasOpen = state.value.isOpen;
             dispatch({ type: 'jumpTo', name });
-            if (wasOpen)
+            if (wasOpen && !state.value.isOpen)
                 animateProgressTo(false);
         },
     };
@@ -256,7 +265,9 @@ const DrawerImpl = defineComponent((_props, { attrs: rawAttrs, slots, expose })
     return () => {
         const registry = collectRegistry(slots.default?.() ?? []);
         const options = currentOptions();
-        const drawerStyle = isStyleProp(attrs.drawerStyle) ? attrs.drawerStyle : undefined;
+        const drawerStyle = isStyleProp(attrs.drawerStyle)
+            ? attrs.drawerStyle
+            : undefined;
         if (registry.size === 0)
             dlog('Drawer: no <Drawer.Screen> children registered');
         const animated = isDrawerAnimated(options);
@@ -283,7 +294,9 @@ const DrawerImpl = defineComponent((_props, { attrs: rawAttrs, slots, expose })
             ? progress.interpolate(overlayInterpolation.translateX)
             : undefined;
         const focusedRoute = state.value.routes[state.value.index];
-        const focusedEntry = focusedRoute ? registry.get(focusedRoute.name) : undefined;
+        const focusedEntry = focusedRoute
+            ? registry.get(focusedRoute.name)
+            : undefined;
         if (focusedRoute && !focusedEntry) {
             dlog(`Drawer: no screen registered for route name "${focusedRoute.name}"`);
         }
@@ -306,11 +319,18 @@ const DrawerImpl = defineComponent((_props, { attrs: rawAttrs, slots, expose })
             if (entry === undefined)
                 continue;
             descriptors[route.key] = {
-                options: resolveDrawerScreenOptions(entry, { route, navigation: handle }),
+                options: resolveDrawerScreenOptions(entry, {
+                    route,
+                    navigation: handle,
+                }),
                 navigation: handle,
             };
         }
-        const drawerContent = slots.drawerContent?.({ state: state.value, descriptors, navigation: handle }) ?? null;
+        const drawerContent = slots.drawerContent?.({
+            state: state.value,
+            descriptors,
+            navigation: handle,
+        }) ?? null;
         const root = renderDrawer({
             overlayColor: asString(attrs.overlayColor) ?? DRAWER_DEFAULT_OVERLAY_COLOR,
             drawerStyle,
@@ -348,7 +368,10 @@ const DrawerImpl = defineComponent((_props, { attrs: rawAttrs, slots, expose })
                 : { transform: [{ translateX: contentTranslateX }] },
             overlay: overlayOpacity === undefined
                 ? undefined
-                : { opacity: overlayOpacity, transform: [{ translateX: overlayTranslateX }] },
+                : {
+                    opacity: overlayOpacity,
+                    transform: [{ translateX: overlayTranslateX }],
+                },
             panel: panelTranslateX === undefined
                 ? undefined
                 : { transform: [{ translateX: panelTranslateX }] },

package/build/vue/index.d.ts

@@ -3,10 +3,10 @@ export { Stack } from './stack';
 export type { INavigatorHandle, IStackProps } from './stack';
 export { Screen } from './screen';
 export type { IScreenOptionsArgs, IScreenOptionsResolver, IScreenProps, IVueScreenOptions, IVueSearchBarOptions, } from './screen';
-export type { IScreenOptions, IStackAnimation, IStackPresentation } from '../core';
+export type { IScreenOptions, IStackAnimation, IStackPresentation, } from '../core';
 export { useNavigation, useStackNavigation, useTabNavigation, useDrawerNavigation, useRoute, useIsFocused, useFocusEffect, useNavigationState, } from './composables';
 export type { INavigationHandle, IStackNavigationHandle, ITabNavigationHandle, IDrawerNavigationHandle, } from './composables';
-export type { INavigationScopeValue, IAnyNavigatorHandle } from './navigation-context';
+export type { INavigationScopeValue, IAnyNavigatorHandle, } from './navigation-context';
 export { useLinkingIntegration } from './linking';
 export type { ILinkingConfig, IScreenLinkingConfig } from '../core';
 export { Tab } from './tabs';
@@ -18,4 +18,4 @@ export { Drawer } from './drawer';
 export type { IDrawerContentSlotProps, 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/vue/navigation-context.js

@@ -26,7 +26,7 @@
 // into the value it provides to its own screens, forming a linked list - this is what lets a
 // screen nested inside e.g. a Stack-screen-renders-a-Tab composition reach the enclosing Stack via
 // useNavigation().getParent().
-import { defineComponent, inject, provide, shallowRef } from '@vue/runtime-core';
+import { defineComponent, inject, provide, shallowRef, } from '@vue/runtime-core';
 const NAVIGATION_SCOPE_KEY = Symbol('navigation-scope');
 // The setter half of the pair - writes the CURRENT route's scope onto the shared key. Called only
 // from NavigationScope's own setup below (never directly by app code).

package/build/vue/stack/index.js

@@ -11,14 +11,16 @@
 // registers. See CLAUDE.md <third_party_rn_packages_are_react_only>.
 import { defineComponent, h, shallowRef, useId } from '@vue/runtime-core';
 import { descriptorToVue, normalizeVueAttrs } from '@symbiote-native/vue';
-import { Platform, debugNodeId, dlog, isSymbioteNode } 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, isRecord, navigatorReducer, resolveScreenRenderPlan, resolveStackProps, } from '../../core/index.js';
+import { Platform, debugNodeId, dlog, isSymbioteNode, } 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, isRecord, navigatorReducer, reconcileStackRoutes, resolveScreenRenderPlan, resolveStackProps, } from '../../core/index.js';
 import { NavigationScope, injectNavigationScope } 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 asString(value) {
     return typeof value === 'string' ? value : undefined;
 }
@@ -58,7 +60,9 @@ function collectRegistry(vnodes) {
     return registry;
 }
 function resolveScreenOptions(entry, screenOptionsArgs, screenOptions) {
-    const own = typeof entry.options === 'function' ? entry.options(screenOptionsArgs) : entry.options;
+    const own = typeof entry.options === 'function'
+        ? entry.options(screenOptionsArgs)
+        : entry.options;
     return { ...screenOptions, ...own };
 }
 const StackImpl = defineComponent((_props, { attrs: rawAttrs, slots, expose }) => {
@@ -106,8 +110,20 @@ const StackImpl = defineComponent((_props, { attrs: rawAttrs, slots, expose }) =
         initialState = createInitialNavigatorState(createRoute(initialRouteName, initialRegistry.get(initialRouteName)?.initialParams));
     }
     const state = shallowRef(initialState);
+    // The screen names the render pass below last saw in the slot. A PLAIN local, not a ref: it is
+    // a cache of what was just rendered, never a reactive source, so refreshing it from inside the
+    // render closure is not a state write during render (which would re-trigger the very render
+    // effect that produced it).
+    let registeredNames = [];
+    // A <Stack.Screen> marker can vanish from the slot while its route is still in the pushed
+    // history, which would leave that entry with nothing to render (reconcileStackRoutes' header).
+    // Reconciling on READ rather than writing the ref keeps the repair out of the render pass; the
+    // dispatch below then persists it, so the next push builds on the pruned history.
+    function currentState() {
+        return reconcileStackRoutes(state.value, registeredNames);
+    }
     function dispatch(action) {
-        state.value = navigatorReducer(state.value, action);
+        state.value = navigatorReducer(currentState(), action);
     }
     const handle = {
         push: (name, params) => dispatch({ type: 'push', route: createRoute(name, params) }),
@@ -117,7 +133,7 @@ const StackImpl = defineComponent((_props, { attrs: rawAttrs, slots, expose }) =
         replace: (name, params) => dispatch({ type: 'replace', route: createRoute(name, params) }),
         setParams: (params, key) => dispatch({ type: 'setParams', key, params }),
         reset: nextState => dispatch({ type: 'reset', state: nextState }),
-        canGoBack: () => state.value.routes.length > 1,
+        canGoBack: () => currentState().routes.length > 1,
     };
     expose(handle);
     // Broadcasts the router state to every still-live route's emitter (useNavigationState's
@@ -126,18 +142,20 @@ const StackImpl = defineComponent((_props, { attrs: rawAttrs, slots, expose }) =
     // useEffect, which must be deferred past render to avoid a descendant setState-during-render):
     // Vue's provide/inject + shallowRef.value writes are safe to perform directly inside the
     // render closure below, so the broadcast happens right there, once per render.
-    function broadcastState() {
-        for (const route of state.value.routes) {
-            emitterFor(route.key).emit(NAVIGATION_EVENT_STATE, state.value);
+    function broadcastState(current) {
+        for (const route of current.routes) {
+            emitterFor(route.key).emit(NAVIGATION_EVENT_STATE, current);
         }
         for (const routeKey of emitters.keys()) {
-            if (!state.value.routes.some(route => route.key === routeKey))
+            if (!current.routes.some(route => route.key === routeKey))
                 emitters.delete(routeKey);
         }
     }
     return () => {
-        broadcastState();
         const registry = collectRegistry(slots.default?.() ?? []);
+        registeredNames = [...registry.keys()];
+        const current = currentState();
+        broadcastState(current);
         const screenOptions = asScreenOptions(attrs.screenOptions);
         // Investigation instrumentation (flicker-on-focus bug): STACK_ON_FINISH_TRANSITIONING is
         // the native signal that the WHOLE push/pop animation has finished (as opposed to
@@ -149,26 +167,29 @@ const StackImpl = defineComponent((_props, { attrs: rawAttrs, slots, expose }) =
                 [STACK_ON_FINISH_TRANSITIONING]: () => dlog(`Stack: onFinishTransitioning at t=${Date.now()}`),
             },
         });
-        const children = state.value.routes.map((route, index) => {
+        const children = current.routes.map((route, index) => {
             const entry = registry.get(route.name);
             if (entry === undefined) {
                 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, screenOptions);
-            const activityState = computeActivityState(index, state.value.routes.length);
+            const activityState = computeActivityState(index, current.routes.length);
             // Investigation instrumentation (flicker-on-focus bug): fires on EVERY Stack render, not
             // just on transitions, so the log stream shows whether a route's activityState/index ever
             // changes outside of a push/pop dispatch. Kept behind DEBUG, never removed.
-            dlog(`Stack: render route "${route.name}" index=${index}/${state.value.routes.length - 1} ` +
+            dlog(`Stack: render route "${route.name}" index=${index}/${current.routes.length - 1} ` +
                 `activityState=${activityState} at t=${Date.now()}`);
             const routeEmitter = emitterFor(route.key);
             const searchBarOptions = mergedOptions.headerSearchBarOptions;
             const plan = resolveScreenRenderPlan({
                 screenId: route.key,
                 index,
-                routeCount: state.value.routes.length,
+                routeCount: current.routes.length,
                 options: mergedOptions,
                 platform: NAVIGATOR_PLATFORM,
                 isAndroid: Platform.OS === 'android',
@@ -210,7 +231,8 @@ const StackImpl = defineComponent((_props, { attrs: rawAttrs, slots, expose }) =
                             const appRef = searchBarOptions.ref;
                             if (appRef === undefined)
                                 return;
-                            appRef.value = node === null ? null : buildSearchBarHandle(() => node);
+                            appRef.value =
+                                node === null ? null : buildSearchBarHandle(() => node);
                         },
                     }
                     : undefined,
@@ -265,7 +287,10 @@ const StackImpl = defineComponent((_props, { attrs: rawAttrs, slots, expose }) =
                         // 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 }, [descriptorToVue(plan.headerConfig), content]),
+                        {
+                            style: plan.innerScreenStyle,
+                            activityState: plan.activityState,
+                        }, [descriptorToVue(plan.headerConfig), content]),
                     ]),
                 ])
                 : h(plan.screenViewName, { key: route.key, ...plan.screenProps }, [