@symbiote-native/navigation 2.0.3 → 2.2.0

package/README.md

@@ -3,7 +3,7 @@
 A native stack/tab/drawer navigator for [SymbioteNative](../../README.md), built directly on
 [`react-native-screens`](https://github.com/software-mansion/react-native-screens)' native view
 primitives (`RNSScreen`/`RNSScreenStack`/`RNSScreenStackHeaderConfig`/`RNSSearchBar`) — reachable
-from **every** adapter: React, Vue, and Angular. Unlike the third-party-view wrappers
+from **every** adapter: React, Vue, Svelte, Solid, and Angular. Unlike the third-party-view wrappers
 ([`@symbiote-native/slider`](../slider), [`@symbiote-native/splash-screen`](../splash-screen)),
 there is no upstream React component to route around here at all — `react-navigation`'s own
 navigator UI is itself React-only (it calls hooks off the React dispatcher), so wrapping it was
@@ -38,14 +38,16 @@ src/
 │                 react-native-screens' own React components)
 ├── react/        @symbiote-native/navigation/react   — Stack/Tab/Drawer + hooks
 ├── vue/          @symbiote-native/navigation/vue     — Stack/Tab/Drawer + composables
+├── svelte/       @symbiote-native/navigation/svelte  — Stack/Tab/Drawer + runes
+├── solid/        @symbiote-native/navigation/solid   — Stack/Tab/Drawer + primitives
 └── angular/      @symbiote-native/navigation/angular — Stack/Tab/Drawer + directives + inject*
 ```
 
 Each adapter entry imports `../register` first (so every native view's `ViewConfig` is registered
 before a screen ever mounts), then exposes `Stack`, `Tab`, and `Drawer`. The router/reducer logic
 and every `react-native-screens` prop fold are written once in `core/` and shared verbatim; each
-adapter supplies only its own lifecycle (hooks / composables / `inject*` functions) and the
-descriptor bridge.
+adapter supplies only its own lifecycle (hooks / composables / runes / primitives / `inject*`
+functions) and the descriptor bridge.
 
 ## Use it
 
@@ -65,8 +67,16 @@ function App() {
 
   return (
     <Stack ref={setStackHandle} initialRouteName="Menu">
-      <Stack.Screen name="Menu" component={MenuScreen} options={{ title: 'Navigation Demos' }} />
-      <Stack.Screen name="Details" component={DetailsScreen} options={{ title: 'Details' }} />
+      <Stack.Screen
+        name="Menu"
+        component={MenuScreen}
+        options={{ title: 'Navigation Demos' }}
+      />
+      <Stack.Screen
+        name="Details"
+        component={DetailsScreen}
+        options={{ title: 'Details' }}
+      />
     </Stack>
   );
 }
@@ -84,8 +94,16 @@ const stackHandle = ref<INavigatorHandle | null>(null);
 
 <template>
   <Stack ref="stackHandle" initial-route-name="Menu">
-    <Screen name="Menu" :component="MenuScreen" :options="{ title: 'Navigation Demos' }" />
-    <Screen name="Details" :component="DetailsScreen" :options="{ title: 'Details' }" />
+    <Screen
+      name="Menu"
+      :component="MenuScreen"
+      :options="{ title: 'Navigation Demos' }"
+    />
+    <Screen
+      name="Details"
+      :component="DetailsScreen"
+      :options="{ title: 'Details' }"
+    />
   </Stack>
 </template>
 ```
@@ -100,8 +118,18 @@ import { Stack, ScreenDirective } from '@symbiote-native/navigation/angular';
   imports: [Stack, ScreenDirective],
   template: `
     <Stack #nav initialRouteName="Menu">
-      <ng-template symbioteScreen name="Menu" [component]="menuScreen" [options]="menuOptions"></ng-template>
-      <ng-template symbioteScreen name="Details" [component]="detailsScreen" [options]="detailsOptions"></ng-template>
+      <ng-template
+        symbioteScreen
+        name="Menu"
+        [component]="menuScreen"
+        [options]="menuOptions"
+      ></ng-template>
+      <ng-template
+        symbioteScreen
+        name="Details"
+        [component]="detailsScreen"
+        [options]="detailsOptions"
+      ></ng-template>
     </Stack>
   `,
 })
@@ -125,8 +153,10 @@ swipeable drawer navigator (`Drawer`/`Drawer.Screen`, built on `PanResponder`/`A
 codebase doesn't depend on `react-native-gesture-handler`/`react-native-reanimated` — see
 [Known gaps](#known-gaps-drawer-parity) below), the full `useNavigation`/`useRoute`/
 `useIsFocused`/`useFocusEffect`/`useNavigationState` hook family (narrowed per navigator as
-`useStackNavigation`/`useTabNavigation`/`useDrawerNavigation`, with Vue composable and Angular
-`inject*` twins of all of them), header/search-bar screen options (bar buttons, menus,
+`useStackNavigation`/`useTabNavigation`/`useDrawerNavigation`, with Vue composable, Svelte rune,
+Solid primitive and Angular `inject*` twins of all of them — Solid spells the three that own state
+`createIsFocused`/`createFocusEffect`/`createNavigationState`, since it reserves `use*` for reading
+an existing context), header/search-bar screen options (bar buttons, menus,
 `formSheet`/modal presentation, `sheetAllowedDetents`), a `resolveRouteFromUrl`/
 `useLinkingIntegration` deep-linking layer, and `serializeNavigatorState`/
 `deserializeNavigatorState` for state persistence. See the docs-site navigation section
@@ -153,7 +183,7 @@ horizontal `ScrollView` hijacking the swipe), `useDrawerProgress` as a UI-thread
 ## Test it
 
 Headless tests live next to each adapter entry and the shared core
-(`src/{core,react,vue,angular}/**/*.test.{ts,tsx}`) and drive the same reducers/prop folds every
+(`src/{core,react,vue,svelte,solid,angular}/**/*.test.{ts,tsx}`) and drive the same reducers/prop folds every
 adapter shares, plus per-adapter component tests against a fake `nativeFabricUIManager` slot.
 Native rendering (the real `RNSScreenStack` push/pop transitions, header/search-bar chrome,
 `formSheet` detents) is verified on-device (see the parent [README](../../README.md) for the

package/build/angular/drawer/index.js

@@ -92,7 +92,10 @@ let Drawer = (() => {
         @for (slot of slotOrder(); track slot) {
           @switch (slot) {
             @case ('content') {
-              <AnimatedView [style]="contentStyle()" [animatedProps]="slotAnimatedProps('content')">
+              <AnimatedView
+                [style]="contentStyle()"
+                [animatedProps]="slotAnimatedProps('content')"
+              >
                 @if (focusedRoute(); as route) {
                   @if (componentForRoute(route); as component) {
                     <ng-container
@@ -113,7 +116,10 @@ let Drawer = (() => {
               />
             }
             @case ('panel') {
-              <AnimatedView [style]="panelStyle()" [animatedProps]="slotAnimatedProps('panel')">
+              <AnimatedView
+                [style]="panelStyle()"
+                [animatedProps]="slotAnimatedProps('panel')"
+              >
                 @if (drawerContentTemplate) {
                   <ng-container
                     *ngTemplateOutlet="
@@ -214,7 +220,8 @@ let Drawer = (() => {
         swipeEdgeWidth = (__runInitializers(this, _swipeEnabled_extraInitializers), __runInitializers(this, _swipeEdgeWidth_initializers, void 0));
         swipeMinDistance = (__runInitializers(this, _swipeEdgeWidth_extraInitializers), __runInitializers(this, _swipeMinDistance_initializers, void 0));
         swipeMinVelocity = (__runInitializers(this, _swipeMinDistance_extraInitializers), __runInitializers(this, _swipeMinVelocity_initializers, void 0));
-        windowDimensions = (__runInitializers(this, _swipeMinVelocity_extraInitializers), inject(WindowDimensionsService).dimensions);
+        windowDimensions = (__runInitializers(this, _swipeMinVelocity_extraInitializers), inject(WindowDimensionsService)
+            .dimensions);
         routeIdPrefix = `drawer-${(drawerInstanceCounter += 1)}`;
         // Keyed by name -> the LIVE DrawerScreenDirective instance - see stack.ts's matching comment
         // for why a snapshot copy would go stale on an in-place `[options]`/`[component]` change.
@@ -243,12 +250,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({
@@ -276,9 +285,10 @@ let Drawer = (() => {
         ngAfterContentInit() {
             this.rebuildRegistry();
             this.initializeState();
-            this.drawerScreenChildrenSubscription = this.drawerScreenChildren.changes.subscribe(() => {
-                this.rebuildRegistry();
-            });
+            this.drawerScreenChildrenSubscription =
+                this.drawerScreenChildren.changes.subscribe(() => {
+                    this.rebuildRegistry();
+                });
         }
         ngOnDestroy() {
             this.drawerScreenChildrenSubscription?.unsubscribe();
@@ -363,7 +373,9 @@ let Drawer = (() => {
             overlayColor: this.optionsSnapshot().overlayColor ?? DRAWER_DEFAULT_OVERLAY_COLOR,
             drawerStyle: this.drawerStyleSnapshot(),
             contentPassthrough: {},
-            overlayPassthrough: this.isAnimated() ? this.overlayResponderPassthrough() : {},
+            overlayPassthrough: this.isAnimated()
+                ? this.overlayResponderPassthrough()
+                : {},
             panelPassthrough: {},
         }, this.optionsSnapshot()));
         slotsMap = computed(() => {
@@ -398,7 +410,9 @@ let Drawer = (() => {
         }
         slotStyle(slot, animatedStyle) {
             const base = this.slotsMap().get(slot)?.props.style;
-            return this.isAnimated() ? flattenStyle([base, animatedStyle()]) : flattenStyle(base);
+            return this.isAnimated()
+                ? flattenStyle([base, animatedStyle()])
+                : flattenStyle(base);
         }
         contentStyle() {
             return this.slotStyle('content', () => {
@@ -500,7 +514,9 @@ let Drawer = (() => {
                     navigation: this,
                 };
             }
-            return { $implicit: { state: currentState, descriptors, navigation: this } };
+            return {
+                $implicit: { state: currentState, descriptors, navigation: this },
+            };
         }
     };
     return Drawer = _classThis;

package/build/angular/index.d.ts

@@ -3,7 +3,7 @@ export { Stack } from './stack';
 export type { INavigatorHandle } from './stack';
 export { ScreenDirective } from './screen.directive';
 export type { IAngularScreenOptions, IAngularSearchBarOptions, IScreenOptionsArgs, IScreenOptionsResolver, } from './screen.directive';
-export type { IScreenOptions, IStackAnimation, IStackPresentation } from '../core';
+export type { IScreenOptions, IStackAnimation, IStackPresentation, } from '../core';
 export { injectNavigation, injectStackNavigation, injectTabNavigation, injectDrawerNavigation, injectRoute, injectIsFocused, injectFocusEffect, injectNavigationState, } from './injectors';
 export type { INavigationHandle, IStackNavigationHandle, ITabNavigationHandle, IDrawerNavigationHandle, IFocusEffectCallback, } from './injectors';
 export { NavigationContextService } from './navigation-context.service';
@@ -14,10 +14,10 @@ export type { ILinkingConfig, IScreenLinkingConfig } from '../core';
 export { Tab } from './tabs';
 export type { ITabNavigatorHandle } from './tabs';
 export { TabScreenDirective } from './tab-screen.directive';
-export type { ITabScreenOptionsArgs, ITabScreenOptionsResolver } from './tab-screen.directive';
+export type { ITabScreenOptionsArgs, ITabScreenOptionsResolver, } from './tab-screen.directive';
 export type { ITabOptions, ITabBarIcon } from '../core';
 export { Drawer } from './drawer';
-export type { IDrawerNavigatorHandle, IDrawerDescriptorMap, IDrawerContentContext } from './drawer';
+export type { IDrawerNavigatorHandle, IDrawerDescriptorMap, IDrawerContentContext, } from './drawer';
 export { DrawerScreenDirective } from './drawer-screen.directive';
 export type { IDrawerScreenOptionsArgs, IDrawerScreenOptionsResolver, } from './drawer-screen.directive';
-export type { IDrawerOptions, IDrawerScreenOptions, IDrawerType, IDrawerPosition } from '../core';
+export type { IDrawerOptions, IDrawerScreenOptions, IDrawerType, IDrawerPosition, } from '../core';

package/build/angular/injectors/inject-navigation.js

@@ -5,7 +5,7 @@
 // that route's own emitter - mirrors @react-navigation's `navigation.addListener('focus', cb)`
 // surface. All pub/sub logic lives in ../../core/navigation-events; this function only reads
 // NavigationContextService and binds identity.
-import { requireNavigationContext } from '../navigation-context.service.js';
+import { requireNavigationContext, } from '../navigation-context.service.js';
 export function injectNavigation() {
     const context = requireNavigationContext('injectNavigation');
     return {

package/build/angular/navigation-scope.directive.js

@@ -41,7 +41,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { Directive, Input, inject } from '@angular/core';
-import { NavigationContextService } from './navigation-context.service.js';
+import { NavigationContextService, } from './navigation-context.service.js';
 let NavigationScopeDirective = (() => {
     let _classDecorators = [Directive({
             selector: '[symbioteNavigationScope]',

package/build/angular/search-bar-ref.directive.js

@@ -40,7 +40,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
-import { Directive, Input, inject, ElementRef } from '@angular/core';
+import { Directive, Input, inject, ElementRef, } from '@angular/core';
 import { isSymbioteNode, dlog, debugNodeId } from '@symbiote-native/engine';
 import { buildSearchBarHandle } from '../core/index.js';
 let SearchBarRefDirective = (() => {

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,13 +81,15 @@ 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';
 // backTitleVisible defaults to `true` on both platforms per the codegen spec's own default - no
 // ios/android divergence in v1 scope (mirrors react/stack.ts's own constant exactly).
-const NAVIGATOR_PLATFORM = { defaultHeaderBackTitleVisible: true };
+const NAVIGATOR_PLATFORM = {
+    defaultHeaderBackTitleVisible: true,
+};
 let stackInstanceCounter = 0;
 let Stack = (() => {
     let _classDecorators = [Component({
@@ -151,7 +153,9 @@ let Stack = (() => {
     </ng-template>
 
     <ng-template #headerAndContentTpl let-route let-index="index">
-      <RNSScreenStackHeaderConfig [symbioteHostProps]="headerConfigProps(route, index)">
+      <RNSScreenStackHeaderConfig
+        [symbioteHostProps]="headerConfigProps(route, index)"
+      >
         @if (hasSearchBar(route)) {
           <RNSScreenStackHeaderSubview [symbioteHostProps]="headerSubviewProps">
             <RNSSearchBar
@@ -161,7 +165,9 @@ let Stack = (() => {
           </RNSScreenStackHeaderSubview>
         }
       </RNSScreenStackHeaderConfig>
-      <RNSScreenContentWrapper [symbioteHostProps]="contentWrapperProps(route, index)">
+      <RNSScreenContentWrapper
+        [symbioteHostProps]="contentWrapperProps(route, index)"
+      >
         <ng-container
           [symbioteNavigationScope]="route"
           [navigation]="this"
@@ -246,6 +252,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)
@@ -253,20 +274,33 @@ let Stack = (() => {
             const initialRouteName = this.initialRouteName ?? this.registry.keys().next().value;
             if (initialRouteName === undefined) {
                 dlog('Stack: no <ng-template symbioteScreen> children registered');
-                this.stateSignal.set(createInitialNavigatorState({ key: this.routeIdPrefix, name: '', params: undefined }));
+                this.stateSignal.set(createInitialNavigatorState({
+                    key: this.routeIdPrefix,
+                    name: '',
+                    params: undefined,
+                }));
                 return;
             }
             this.stateSignal.set(createInitialNavigatorState(this.createRoute(initialRouteName, this.registry.get(initialRouteName)?.initialParams)));
         }
         createRoute(name, params) {
             this.routeSequence += 1;
-            return { key: `${this.routeIdPrefix}-${name}-${this.routeSequence}`, name, params };
+            return {
+                key: `${this.routeIdPrefix}-${name}-${this.routeSequence}`,
+                name,
+                params,
+            };
         }
         dispatch(action) {
             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));
@@ -350,7 +384,7 @@ let Stack = (() => {
             return plan;
         }
         outerScreenIsModal(route, index) {
-            return this.planFor(route, index).screenViewName === RNS_MODAL_SCREEN_VIEW_NAME;
+            return (this.planFor(route, index).screenViewName === RNS_MODAL_SCREEN_VIEW_NAME);
         }
         isInModal(route, index) {
             return this.planFor(route, index).inModal;

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 };
@@ -63,7 +63,12 @@ let Tab = (() => {
     let _classDecorators = [Component({
             selector: 'Tab',
             standalone: true,
-            imports: [NgComponentOutlet, NavigationScopeDirective, DescriptorOutlet, View],
+            imports: [
+                NgComponentOutlet,
+                NavigationScopeDirective,
+                DescriptorOutlet,
+                View,
+            ],
             changeDetection: ChangeDetectionStrategy.OnPush,
             template: `
     <View [style]="rootStyle">
@@ -128,11 +133,11 @@ 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.tabScreenChildrenSubscription = this.tabScreenChildren.changes.subscribe(() => {
-                this.rebuildRegistry();
-            });
+            this.syncRegistry();
+            this.tabScreenChildrenSubscription =
+                this.tabScreenChildren.changes.subscribe(() => {
+                    this.syncRegistry();
+                });
         }
         ngOnDestroy() {
             this.tabScreenChildrenSubscription?.unsubscribe();
@@ -152,12 +157,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) {
@@ -168,7 +187,9 @@ let Tab = (() => {
         }
         resolveTabOptions(entry, route) {
             const props = { route, navigation: this };
-            const own = typeof entry.options === 'function' ? entry.options(props) : entry.options;
+            const own = typeof entry.options === 'function'
+                ? entry.options(props)
+                : entry.options;
             return { ...this.screenOptions, ...own };
         }
         focusedRoute() {
@@ -251,11 +272,17 @@ let Tab = (() => {
                 };
             });
             const focusedRoute = this.focusedRoute();
-            const focusedEntry = focusedRoute ? this.registry.get(focusedRoute.name) : undefined;
+            const focusedEntry = focusedRoute
+                ? this.registry.get(focusedRoute.name)
+                : undefined;
             const focusedOptions = focusedEntry && focusedRoute
                 ? this.resolveTabOptions(focusedEntry, focusedRoute)
                 : this.screenOptions;
-            return renderTabBar({ items, style: focusedOptions?.tabBarStyle, passthrough: {} });
+            return renderTabBar({
+                items,
+                style: focusedOptions?.tabBarStyle,
+                passthrough: {},
+            });
         }
     };
     return Tab = _classThis;

package/build/core/drawer-options/index.js

@@ -85,25 +85,37 @@ export function resolveDrawerSlotInterpolation(geometry, slot) {
             return {
                 translateX: {
                     inputRange: DRAWER_PROGRESS_INPUT_RANGE,
-                    outputRange: [geometry.contentTranslateXClosed, geometry.contentTranslateXOpen],
+                    outputRange: [
+                        geometry.contentTranslateXClosed,
+                        geometry.contentTranslateXOpen,
+                    ],
                 },
             };
         case 'overlay':
             return {
                 opacity: {
                     inputRange: DRAWER_PROGRESS_INPUT_RANGE,
-                    outputRange: [geometry.overlayOpacityClosed, geometry.overlayOpacityOpen],
+                    outputRange: [
+                        geometry.overlayOpacityClosed,
+                        geometry.overlayOpacityOpen,
+                    ],
                 },
                 translateX: {
                     inputRange: DRAWER_PROGRESS_INPUT_RANGE,
-                    outputRange: [geometry.contentTranslateXClosed, geometry.contentTranslateXOpen],
+                    outputRange: [
+                        geometry.contentTranslateXClosed,
+                        geometry.contentTranslateXOpen,
+                    ],
                 },
             };
         case 'panel':
             return {
                 translateX: {
                     inputRange: DRAWER_PROGRESS_INPUT_RANGE,
-                    outputRange: [geometry.panelTranslateXClosed, geometry.panelTranslateXOpen],
+                    outputRange: [
+                        geometry.panelTranslateXClosed,
+                        geometry.panelTranslateXOpen,
+                    ],
                 },
             };
     }
@@ -154,7 +166,9 @@ export function clamp01(value) {
     return Math.min(1, Math.max(0, value));
 }
 function toFiniteNumber(value) {
-    return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+    return typeof value === 'number' && Number.isFinite(value)
+        ? value
+        : undefined;
 }
 // The touch's real starting page-X, read off the raw event rather than gestureState.x0: the
 // engine's capture phase (core/engine/src/pan-responder/index.ts's

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

@@ -11,7 +11,11 @@ export function createInitialDrawerRouterState(routes, initialRouteName) {
         return { routes, index: INITIAL_FOCUSED_INDEX, isOpen: false };
     }
     const index = routes.findIndex(route => route.name === initialRouteName);
-    return { routes, index: index === -1 ? INITIAL_FOCUSED_INDEX : index, isOpen: false };
+    return {
+        routes,
+        index: index === -1 ? INITIAL_FOCUSED_INDEX : index,
+        isOpen: false,
+    };
 }
 // Mirrors @react-navigation/drawer's DrawerActions: jumpTo focuses a route by NAME (TabRouter's
 // own convention, not the stack's by-key popTo) AND closes the drawer - selecting a destination
@@ -23,7 +27,9 @@ export function drawerRouterReducer(state, action) {
             const index = state.routes.findIndex(route => route.name === action.name);
             if (index === -1)
                 return state;
-            return index === state.index && !state.isOpen ? state : { ...state, index, isOpen: false };
+            return index === state.index && !state.isOpen
+                ? state
+                : { ...state, index, isOpen: false };
         }
         case 'openDrawer':
             return state.isOpen ? state : { ...state, isOpen: true };

package/build/core/guards.js

@@ -18,5 +18,7 @@ export function isRecord(value) {
 // navigator-state.ts (Stack) and tab-router-state.ts (Tabs) so the two reducers can't drift on
 // this rule independently.
 export function mergeParams(current, incoming) {
-    return isRecord(current) && isRecord(incoming) ? { ...current, ...incoming } : incoming;
+    return isRecord(current) && isRecord(incoming)
+        ? { ...current, ...incoming }
+        : incoming;
 }

package/build/core/header-bar-buttons.js

@@ -21,7 +21,9 @@ function prepareIcon(icon) {
         case 'imageSource':
             return { imageSource: imageStatics.resolveAssetSource(icon.imageSource) };
         case 'templateSource':
-            return { templateSource: imageStatics.resolveAssetSource(icon.templateSource) };
+            return {
+                templateSource: imageStatics.resolveAssetSource(icon.templateSource),
+            };
     }
 }
 // The one id algorithm both the payload tagger (prepareMenuItems/prepareHeaderBarButtonItems)
@@ -38,7 +40,9 @@ function prepareTitleStyle(titleStyle) {
         return undefined;
     return {
         ...titleStyle,
-        color: titleStyle.color === undefined ? undefined : processColor(titleStyle.color),
+        color: titleStyle.color === undefined
+            ? undefined
+            : processColor(titleStyle.color),
     };
 }
 function prepareBadge(badge) {
@@ -49,7 +53,9 @@ function prepareBadge(badge) {
         style: badge.style
             ? {
                 ...badge.style,
-                color: badge.style.color === undefined ? undefined : processColor(badge.style.color),
+                color: badge.style.color === undefined
+                    ? undefined
+                    : processColor(badge.style.color),
                 backgroundColor: badge.style.backgroundColor === undefined
                     ? undefined
                     : processColor(badge.style.backgroundColor),
@@ -88,7 +94,11 @@ function prepareMenuItems(menuLike, index, side, path = '') {
             const currentPath = path ? `${path}.${menuIndex}` : `${menuIndex}`;
             const icon = prepareIcon(menuItem.icon);
             if (menuItem.type === 'submenu') {
-                return { ...menuItem, ...icon, ...prepareMenuItems(menuItem, index, side, currentPath) };
+                return {
+                    ...menuItem,
+                    ...icon,
+                    ...prepareMenuItems(menuItem, index, side, currentPath),
+                };
             }
             return {
                 ...excludeOnPress(menuItem),