@symbiote-native/navigation 2.0.3 → 2.1.0

package/src/svelte/tabs/index.svelte

@@ -0,0 +1,247 @@
+<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></symbiote-view>

package/src/svelte/tabs/index.ts

@@ -0,0 +1,10 @@
+// `Tab.Screen` alongside the standalone `TabScreen` 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 TabImpl from './index.svelte';
+import TabScreen from '../tab-screen.svelte';
+
+export const Tab = Object.assign(TabImpl, { Screen: TabScreen });
+
+export type { ITabNavigatorHandle } from '../../core';
+export type { ITabProps } from './tab-props';

package/src/svelte/tabs/tab-props.ts

@@ -0,0 +1,13 @@
+// Tab's own public prop surface. Plain `.ts` for the tsc-cannot-see-a-`.svelte`-named-export
+// reason ../screen-props.ts documents.
+
+import type { Snippet } from 'svelte';
+import type { ITabOptions } from '../../core';
+
+// React's `children?: ReactNode` / Vue's default slot become a Svelte Snippet holding the
+// `<Tab.Screen>` markers.
+export type ITabProps = {
+  initialRouteName?: string;
+  screenOptions?: ITabOptions;
+  children?: Snippet;
+};

package/src/vue/drawer/index.ts

@@ -263,13 +263,14 @@ const DrawerImpl = defineComponent<IDrawerProps>(
         dispatch({ type: 'toggleDrawer' });
       },
       jumpTo: (name: string) => {
-        // 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) animateProgressTo(false);
+        if (wasOpen && !state.value.isOpen) animateProgressTo(false);
       },
     };
     expose(handle);

package/src/vue/stack/index.ts

@@ -35,6 +35,7 @@ import {
   createNavigationEmitter,
   isRecord,
   navigatorReducer,
+  reconcileStackRoutes,
   resolveScreenRenderPlan,
   resolveStackProps,
 } from '../../core';
@@ -173,8 +174,22 @@ const StackImpl = defineComponent<IStackProps>(
 
     const state = shallowRef<INavigatorState>(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: readonly string[] = [];
+
+    // 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(): INavigatorState {
+      return reconcileStackRoutes(state.value, registeredNames);
+    }
+
     function dispatch(action: Parameters<typeof navigatorReducer>[1]): void {
-      state.value = navigatorReducer(state.value, action);
+      state.value = navigatorReducer(currentState(), action);
     }
 
     const handle: INavigatorHandle = {
@@ -185,7 +200,7 @@ const StackImpl = defineComponent<IStackProps>(
       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);
 
@@ -195,18 +210,20 @@ const StackImpl = defineComponent<IStackProps>(
     // 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(): void {
-      for (const route of state.value.routes) {
-        emitterFor(route.key).emit(NAVIGATION_EVENT_STATE, state.value);
+    function broadcastState(current: INavigatorState): void {
+      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)) emitters.delete(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
@@ -221,7 +238,7 @@ const StackImpl = defineComponent<IStackProps>(
         },
       });
 
-      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}"`);
@@ -230,12 +247,12 @@ const StackImpl = defineComponent<IStackProps>(
 
         const screenOptionsArgs: IScreenOptionsArgs = { 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} ` +
+          `Stack: render route "${route.name}" index=${index}/${current.routes.length - 1} ` +
             `activityState=${activityState} at t=${Date.now()}`,
         );
 
@@ -245,7 +262,7 @@ const StackImpl = defineComponent<IStackProps>(
         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',

package/src/vue/tabs/index.ts

@@ -1,22 +1,13 @@
 // Tab, the Vue 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/Angular adapters; here Vue supplies the lifecycle - a plain ref for the focused index
-// (Vue's twin of useReducer), useId for route-key generation, expose() for the jumpTo/setParams
-// handle - plus the descriptor bridge for the tab-bar leaf, exactly like Stack bridges its header
+// the React/Angular adapters; here Vue supplies the lifecycle - a shallowRef for the dispatched
+// router state (Vue's twin of useReducer), useId for route-key generation, expose() for the
+// jumpTo/setParams handle - plus the descriptor bridge for the tab-bar leaf, like Stack's header
 // config (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 {
-  defineComponent,
-  h,
-  nextTick,
-  onMounted,
-  onUnmounted,
-  shallowRef,
-  useId,
-  watch,
-} from '@vue/runtime-core';
+import { defineComponent, h, nextTick, onUnmounted, shallowRef, useId } from '@vue/runtime-core';
 import type { VNode } from '@vue/runtime-core';
 import { descriptorToVue, normalizeVueAttrs } from '@symbiote-native/vue';
 import { dlog } from '@symbiote-native/engine';
@@ -28,6 +19,7 @@ import {
   diffFocusedRoute,
   isFocusedRoute,
   isRecord,
+  reconcileTabRoutes,
   renderTabBar,
   tabRouterReducer,
 } from '../../core';
@@ -37,6 +29,8 @@ import type {
   ITabBarItemView,
   ITabNavigatorHandle,
   ITabOptions,
+  ITabRouterAction,
+  ITabRouterState,
 } from '../../core';
 import { NavigationScope, injectNavigationScope } from '../navigation-context';
 import { TabScreen } from '../tab-screen';
@@ -130,12 +124,30 @@ const TabImpl = defineComponent<ITabProps>(
     const initialRoutes = buildRoutes(initialRegistry);
     if (initialRoutes.length === 0) dlog('Tab: no <Tab.Screen> children registered');
 
-    const state = shallowRef(
-      createInitialTabState(initialRoutes, asString(attrs.initialRouteName)),
-    );
+    // A <Tab.Screen> can appear or disappear after mount (a marker behind a v-if, a data-driven
+    // screen list), so the route list is re-collected from the slot on every render and the
+    // DISPATCHED 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 setup() first saw. Slot vnodes are not reactive state, so
+    // the render fn is the only place that can observe the registry change: the reconciliation
+    // happens there, as a pure local, and never writes back - a state write inside a derivation is
+    // an error in Vue, not a style choice. `null` means nothing has dispatched yet, which is what
+    // keeps initialRouteName honored when the markers arrive after the first render.
+    const dispatchedState = shallowRef<ITabRouterState | null>(null);
+    // Non-reactive cache of the route list the last render derived: dispatch() reduces over the
+    // RECONCILED state, so it needs the same list that paint used. A ref here would be a reactive
+    // write from the render fn, exactly what the comment above rules out.
+    let latestRoutes: readonly IRoute<unknown>[] = initialRoutes;
+
+    function resolveState(routes: readonly IRoute<unknown>[]): ITabRouterState {
+      const dispatched = dispatchedState.value;
+      return dispatched === null
+        ? createInitialTabState(routes, asString(attrs.initialRouteName))
+        : reconcileTabRoutes(dispatched, routes);
+    }
 
-    function dispatch(action: Parameters<typeof tabRouterReducer>[1]): void {
-      state.value = tabRouterReducer(state.value, action);
+    function dispatch(action: ITabRouterAction): void {
+      dispatchedState.value = tabRouterReducer(resolveState(latestRoutes), action);
     }
 
     const jumpTo = (name: string, params?: unknown): void =>
@@ -146,16 +158,6 @@ const TabImpl = defineComponent<ITabProps>(
     const handle: ITabNavigatorHandle = { jumpTo, setParams };
     expose(handle);
 
-    // 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: emit 'focus' once the newly-focused
-    // route's content has mounted, 'blur' when it's about to be replaced or Tab itself unmounts.
-    // Keyed on the route KEY (not the route object) so a setParams-only change (new route object,
-    // same key) doesn't spuriously re-fire focus/blur - mirrors tabs.ts's React twin exactly,
-    // just expressed as a `watch` over the focused key instead of a useEffect dependency array.
-    function focusedKeyOf(current: typeof state.value): string | undefined {
-      return current.routes[current.index]?.key;
-    }
-
     // One emitter per route.key, created lazily and cached for the navigator's whole lifetime -
     // mirrors stack.ts's own `emitters` map. This decouples emitter IDENTITY (stable, looked up
     // by key, read by the render closure below when it builds a route's NavigationScope) from
@@ -179,43 +181,39 @@ const TabImpl = defineComponent<ITabProps>(
     // Stack's RNSScreen), so focus/blur is synthesized here: emit 'focus' once the newly-focused
     // route's content has mounted, 'blur' when it's about to be replaced or Tab itself unmounts.
     // Keyed on the route KEY (not the route object) so a setParams-only change (new route object,
-    // same key) doesn't spuriously re-fire focus/blur - mirrors tabs.ts's React twin exactly,
-    // just expressed as a `watch` over the focused key instead of a useEffect dependency array.
-    let focusedRouteKey = focusedKeyOf(state.value);
-
-    onMounted(() => {
-      if (focusedRouteKey !== undefined) {
-        dlog(`Tab: route "${focusedRouteKey}" focused at t=${Date.now()}`);
-        emitterFor(focusedRouteKey).emit(NAVIGATION_EVENT_FOCUS);
-      }
-    });
-
+    // same key) doesn't spuriously re-fire focus/blur.
+    //
+    // Driven from the render pass rather than a `watch` because the focused key follows the
+    // SLOT-collected route list too - a marker disappearing can move focus, and slot vnodes are
+    // not reactive state, so no watcher source can see that; only a render can. The diff therefore
+    // lives where the state is derived, and stays a plain local, never a reactive write.
+    //
     // The bookkeeping (which key is focused) updates immediately so the render closure below
     // always reads the right route; the actual emit is deferred to nextTick(), which resolves
     // only after the CURRENT flush cycle fully drains - including the newly-focused screen's own
-    // onMounted (subscribing its useIsFocused/useFocusEffect listeners). flush:'post' alone is
-    // NOT enough here: it only guarantees this callback runs after THIS component's own render
-    // effect, not after an arbitrary sibling post-flush job (a just-mounted child's onMounted)
-    // that may be queued after it in the same batch - nextTick is the one API that waits for the
-    // WHOLE cycle, not just this watcher's own slot in it.
-    watch(
-      () => focusedKeyOf(state.value),
-      nextKey => {
-        const { blurKey, focusKey } = diffFocusedRoute(focusedRouteKey, nextKey);
-        if (blurKey === undefined && focusKey === undefined) return;
-        focusedRouteKey = nextKey;
-        nextTick(() => {
-          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);
-          }
-        });
-      },
-    );
+    // onMounted (subscribing its useIsFocused/useFocusEffect listeners). Emitting inline would
+    // reach zero subscribers; flush:'post' would not have been enough either, since it only
+    // orders a callback after THIS component's own render effect, not after an arbitrary sibling
+    // post-flush job (a just-mounted child's onMounted) queued after it in the same batch.
+    let focusedRouteKey: string | undefined;
+
+    function syncFocus(current: ITabRouterState): void {
+      const nextKey = current.routes[current.index]?.key;
+      const { blurKey, focusKey } = diffFocusedRoute(focusedRouteKey, nextKey);
+      if (blurKey === undefined && focusKey === undefined) return;
+      focusedRouteKey = nextKey;
+      nextTick(() => {
+        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);
+        }
+      });
+    }
+
     onUnmounted(() => {
       if (focusedRouteKey !== undefined) emitterFor(focusedRouteKey).emit(NAVIGATION_EVENT_BLUR);
     });
@@ -226,11 +224,16 @@ const TabImpl = defineComponent<ITabProps>(
 
       if (registry.size === 0) dlog('Tab: no <Tab.Screen> children registered');
 
-      const focusedRoute: IRoute<unknown> | undefined = state.value.routes[state.value.index];
+      const routes = buildRoutes(registry);
+      latestRoutes = routes;
+      const state = resolveState(routes);
+      syncFocus(state);
+
+      const focusedRoute: IRoute<unknown> | undefined = state.routes[state.index];
 
-      const items: ITabBarItemView[] = state.value.routes.map((route, index) => {
+      const items: ITabBarItemView[] = state.routes.map((route, index) => {
         const entry = registry.get(route.name);
-        const focused = isFocusedRoute(index, state.value.index);
+        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: {} };