@symbiote-native/navigation 2.1.0 → 3.0.0

package/build/svelte/drawer/index.svelte

@@ -24,8 +24,17 @@
 <script lang="ts">
   import type { Component } from 'svelte';
   import { onDestroy, tick } from 'svelte';
-  import { AnimatedValue, Dimensions, PanResponder, dlog, timing } from '@symbiote-native/engine';
-  import type { IPanResponderGestureState, ISymbioteEvent } from '@symbiote-native/engine';
+  import {
+    AnimatedValue,
+    Dimensions,
+    PanResponder,
+    dlog,
+    timing,
+  } from '@symbiote-native/engine';
+  import type {
+    IPanResponderGestureState,
+    ISymbioteEvent,
+  } from '@symbiote-native/engine';
   // The ONLY import from the adapter's main barrel: `Animated.View` is a compiled `.svelte`
   // component, so unlike PanResponder/Dimensions/AnimatedValue (pure engine re-exports, taken
   // from the engine directly here) it has no `.svelte`-free home to import from.
@@ -63,7 +72,11 @@
   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 {
+    setScreenCollector,
+    toRegistry,
+    withoutScreen,
+  } from '../screen-registry';
   import type { IRegisteredScreen } from '../screen-registry';
   import type { IDrawerScreenProps } from '../drawer-screen-props';
   import type { IDrawerProps } from './drawer-props';
@@ -103,7 +116,9 @@
     swipeMinVelocity,
   });
 
-  let screens = $state.raw<IRegisteredScreen<IDrawerScreenProps['options']>[]>([]);
+  let screens = $state.raw<IRegisteredScreen<IDrawerScreenProps['options']>[]>(
+    [],
+  );
   setScreenCollector<IDrawerScreenProps['options']>({
     kind: 'drawer',
     register: screen => {
@@ -123,10 +138,16 @@
 
   function seedState(): IDrawerRouterState {
     if (seededState !== undefined) return seededState;
-    const routes: IRoute<unknown>[] = [...registry.entries()].map(([name, entry]) => {
-      routeSequence += 1;
-      return { key: `${routeIdPrefix}-${name}-${routeSequence}`, name, params: entry.initialParams };
-    });
+    const routes: IRoute<unknown>[] = [...registry.entries()].map(
+      ([name, entry]) => {
+        routeSequence += 1;
+        return {
+          key: `${routeIdPrefix}-${name}-${routeSequence}`,
+          name,
+          params: entry.initialParams,
+        };
+      },
+    );
     if (routes.length === 0) {
       dlog('Drawer: no <Drawer.Screen> children registered');
       // Deliberately not memoized - markers may still be registering.
@@ -164,17 +185,23 @@
   }
 
   export function openDrawer(): void {
-    dlog(`Drawer: openDrawer() called, isOpen=${state.isOpen} at t=${Date.now()}`);
+    dlog(
+      `Drawer: openDrawer() called, isOpen=${state.isOpen} at t=${Date.now()}`,
+    );
     animateProgressTo(true);
     dispatch({ type: 'openDrawer' });
   }
   export function closeDrawer(): void {
-    dlog(`Drawer: closeDrawer() called, isOpen=${state.isOpen} at t=${Date.now()}`);
+    dlog(
+      `Drawer: closeDrawer() called, isOpen=${state.isOpen} at t=${Date.now()}`,
+    );
     animateProgressTo(false);
     dispatch({ type: 'closeDrawer' });
   }
   export function toggleDrawer(): void {
-    dlog(`Drawer: toggleDrawer() called, isOpen=${state.isOpen} at t=${Date.now()}`);
+    dlog(
+      `Drawer: toggleDrawer() called, isOpen=${state.isOpen} at t=${Date.now()}`,
+    );
     animateProgressTo(!state.isOpen);
     dispatch({ type: 'toggleDrawer' });
   }
@@ -189,7 +216,12 @@
     if (wasOpen && !state.isOpen) animateProgressTo(false);
   }
 
-  const handle: IDrawerNavigatorHandle = { openDrawer, closeDrawer, toggleDrawer, jumpTo };
+  const handle: IDrawerNavigatorHandle = {
+    openDrawer,
+    closeDrawer,
+    toggleDrawer,
+    jumpTo,
+  };
 
   // The window width is read fresh AT GESTURE TIME rather than through a reactive
   // window-dimensions rune: it is only ever consumed inside these PanResponder callbacks (never
@@ -224,8 +256,13 @@
       dlog('Drawer: gesture grant');
       dragStartProgress = state.isOpen ? 1 : 0;
     },
-    onPanResponderMove: (_event: ISymbioteEvent, gestureState: IPanResponderGestureState): void => {
-      progress.setValue(resolveDragProgress(gestureState, dragStartProgress, options));
+    onPanResponderMove: (
+      _event: ISymbioteEvent,
+      gestureState: IPanResponderGestureState,
+    ): void => {
+      progress.setValue(
+        resolveDragProgress(gestureState, dragStartProgress, options),
+      );
     },
     onPanResponderRelease: (
       _event: ISymbioteEvent,
@@ -288,12 +325,16 @@
 
   const panelTranslateX = $derived(
     animated
-      ? progress.interpolate(resolveDrawerSlotInterpolation(geometry, 'panel').translateX)
+      ? progress.interpolate(
+          resolveDrawerSlotInterpolation(geometry, 'panel').translateX,
+        )
       : undefined,
   );
   const contentTranslateX = $derived(
     animated
-      ? progress.interpolate(resolveDrawerSlotInterpolation(geometry, 'content').translateX)
+      ? progress.interpolate(
+          resolveDrawerSlotInterpolation(geometry, 'content').translateX,
+        )
       : undefined,
   );
   // The overlay is a full-screen absolutely-positioned sibling BELOW content in paint order (see
@@ -310,14 +351,22 @@
       ? undefined
       : {
           opacity: progress.interpolate(overlayInterpolation.opacity),
-          transform: [{ translateX: progress.interpolate(overlayInterpolation.translateX) }],
+          transform: [
+            {
+              translateX: progress.interpolate(overlayInterpolation.translateX),
+            },
+          ],
         },
   );
   const contentStyle = $derived(
-    contentTranslateX === undefined ? undefined : { transform: [{ translateX: contentTranslateX }] },
+    contentTranslateX === undefined
+      ? undefined
+      : { transform: [{ translateX: contentTranslateX }] },
   );
   const panelStyle = $derived(
-    panelTranslateX === undefined ? undefined : { transform: [{ translateX: panelTranslateX }] },
+    panelTranslateX === undefined
+      ? undefined
+      : { transform: [{ translateX: panelTranslateX }] },
   );
 
   const focusedRoute = $derived(state.routes[state.index]);
@@ -327,7 +376,9 @@
     if (focusedRoute === undefined) return undefined;
     const entry = registry.get(focusedRoute.name);
     if (entry === undefined) {
-      dlog(`Drawer: no screen registered for route name "${focusedRoute.name}"`);
+      dlog(
+        `Drawer: no screen registered for route name "${focusedRoute.name}"`,
+      );
       return undefined;
     }
     return {
@@ -345,7 +396,8 @@
     entry: IRegisteredScreen<IDrawerScreenProps['options']>,
     route: IRoute<unknown>,
   ): IDrawerScreenOptions {
-    if (typeof entry.options === 'function') return entry.options({ route, navigation: handle });
+    if (typeof entry.options === 'function')
+      return entry.options({ route, navigation: handle });
     return entry.options ?? {};
   }
 
@@ -354,7 +406,10 @@
     for (const route of state.routes) {
       const entry = registry.get(route.name);
       if (entry === undefined) continue;
-      map[route.key] = { options: resolveDrawerScreenOptions(entry, route), navigation: handle };
+      map[route.key] = {
+        options: resolveDrawerScreenOptions(entry, route),
+        navigation: handle,
+      };
     }
     return map;
   });
@@ -385,11 +440,14 @@
 
   // renderDrawer emits its slots as root children IN `drawerChildOrder`'s order, so the two zip
   // together - the same index-pairing Vue's own render loop does.
-  const slotDescriptors = $derived.by<Partial<Record<IDrawerSlot, IDescriptor>>>(() => {
+  const slotDescriptors = $derived.by<
+    Partial<Record<IDrawerSlot, IDescriptor>>
+  >(() => {
     const map: Partial<Record<IDrawerSlot, IDescriptor>> = {};
     order.forEach((slot, index) => {
       const descriptor = root.children[index];
-      if (typeof descriptor !== 'string' && descriptor !== undefined) map[slot] = descriptor;
+      if (typeof descriptor !== 'string' && descriptor !== undefined)
+        map[slot] = descriptor;
     });
     return map;
   });
@@ -400,7 +458,87 @@
   });
 </script>
 
-{#snippet screenContent()}{#if focusedScreen !== undefined}{@const FocusedComponent = focusedScreen.component}<NavigationScope value={focusedScreen.scope}><FocusedComponent /></NavigationScope>{/if}{/snippet}{#snippet contentSlot()}{@const descriptor = slotDescriptors.content}{#if descriptor !== undefined}{#if contentStyle !== undefined}<Animated.View {...descriptor.props} style={[descriptor.props.style, contentStyle]}>{@render screenContent()}</Animated.View>{:else}<symbiote-view p={descriptor.props}>{@render screenContent()}</symbiote-view>{/if}{/if}{/snippet}{#snippet overlaySlot()}{@const descriptor = slotDescriptors.overlay}{#if descriptor !== undefined}{#if overlayStyle !== undefined}<Animated.View {...descriptor.props} style={[descriptor.props.style, overlayStyle]} />{:else}<symbiote-view p={descriptor.props} />{/if}{/if}{/snippet}{#snippet panelSlot()}{@const descriptor = slotDescriptors.panel}{#if descriptor !== undefined}{#if panelStyle !== undefined}<Animated.View {...descriptor.props} style={[descriptor.props.style, panelStyle]}>{@render drawerContent?.({ state, descriptors, navigation: handle })}</Animated.View>{:else}<symbiote-view p={descriptor.props}>{@render drawerContent?.({ state, descriptors, navigation: handle })}</symbiote-view>{/if}{/if}{/snippet}<symbiote-view p={rootProps}><symbiote-text p={SCREEN_REGISTRY_HOST_PROPS}>{@render children?.()}</symbiote-text>{#each order as slot (slot)}{#if slot === 'content'}{@render contentSlot()}{:else if slot === 'overlay'}{@render overlaySlot()}{:else}{@render panelSlot()}{/if}{/each}</symbiote-view>
+{#snippet screenContent()}
+  {#if focusedScreen !== undefined}
+    {@const FocusedComponent = focusedScreen.component}
+    <NavigationScope value={focusedScreen.scope}>
+      <FocusedComponent />
+    </NavigationScope>
+  {/if}
+{/snippet}
+
+{#snippet contentSlot()}
+  {@const descriptor = slotDescriptors.content}
+  {#if descriptor !== undefined}
+    {#if contentStyle !== undefined}
+      <Animated.View
+        {...descriptor.props}
+        style={[descriptor.props.style, contentStyle]}
+      >
+        {@render screenContent()}
+      </Animated.View>
+    {:else}
+      <symbiote-view p={descriptor.props}>
+        {@render screenContent()}
+      </symbiote-view>
+    {/if}
+  {/if}
+{/snippet}
+
+{#snippet overlaySlot()}
+  {@const descriptor = slotDescriptors.overlay}
+  {#if descriptor !== undefined}
+    {#if overlayStyle !== undefined}
+      <Animated.View
+        {...descriptor.props}
+        style={[descriptor.props.style, overlayStyle]}
+      />
+    {:else}
+      <symbiote-view p={descriptor.props} />
+    {/if}
+  {/if}
+{/snippet}
+
+{#snippet panelSlot()}
+  {@const descriptor = slotDescriptors.panel}
+  {#if descriptor !== undefined}
+    {#if panelStyle !== undefined}
+      <Animated.View
+        {...descriptor.props}
+        style={[descriptor.props.style, panelStyle]}
+      >
+        {@render drawerContent?.({
+          state,
+          descriptors,
+          navigation: handle,
+        })}
+      </Animated.View>
+    {:else}
+      <symbiote-view p={descriptor.props}>
+        {@render drawerContent?.({
+          state,
+          descriptors,
+          navigation: handle,
+        })}
+      </symbiote-view>
+    {/if}
+  {/if}
+{/snippet}
+
+<symbiote-view p={rootProps}>
+  <symbiote-text p={SCREEN_REGISTRY_HOST_PROPS}>
+    {@render children?.()}
+  </symbiote-text>
+  {#each order as slot (slot)}
+    {#if slot === 'content'}
+      {@render contentSlot()}
+    {:else if slot === 'overlay'}
+      {@render overlaySlot()}
+    {:else}
+      {@render panelSlot()}
+    {/if}
+  {/each}
+</symbiote-view>
 
 <!-- --- Explicit gap list vs the real react-native-gesture-handler + react-native-reanimated
      @react-navigation/drawer (confirmed against its current docs, mirrored verbatim from the

package/build/svelte/drawer-screen.svelte

@@ -5,7 +5,8 @@
   import { collectScreen } from './screen-registry';
   import type { IDrawerScreenProps } from './drawer-screen-props';
 
-  let { name, component, options, initialParams }: IDrawerScreenProps = $props();
+  let { name, component, options, initialParams }: IDrawerScreenProps =
+    $props();
 
   collectScreen('drawer', {
     get name(): IDrawerScreenProps['name'] {

package/build/svelte/index.d.ts

@@ -3,10 +3,10 @@ export { Stack } from './stack';
 export type { INavigatorHandle, IStackProps } from './stack';
 export { default as Screen } from './screen.svelte';
 export type { IScreenOptionsArgs, IScreenOptionsResolver, IScreenProps, ISvelteScreenOptions, ISvelteSearchBarOptions, } from './screen-props';
-export type { IScreenOptions, IStackAnimation, IStackPresentation } from '../core';
+export type { IScreenOptions, IStackAnimation, IStackPresentation, } from '../core';
 export { useNavigation, useStackNavigation, useTabNavigation, useDrawerNavigation, useRoute, useIsFocused, useFocusEffect, useNavigationState, } from './runes';
 export type { INavigationHandle, IStackNavigationHandle, ITabNavigationHandle, IDrawerNavigationHandle, } from './runes';
-export type { INavigationScopeValue, IAnyNavigatorHandle } from './navigation-context';
+export type { INavigationScopeValue, IAnyNavigatorHandle, } from './navigation-context';
 export { useLinkingIntegration } from './linking.svelte';
 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 { default as DrawerScreen } from './drawer-screen.svelte';
 export type { IDrawerScreenOptionsArgs, IDrawerScreenOptionsResolver, IDrawerScreenProps, } from './drawer-screen-props';
-export type { IDrawerOptions, IDrawerScreenOptions, IDrawerType, IDrawerPosition } from '../core';
+export type { IDrawerOptions, IDrawerScreenOptions, IDrawerType, IDrawerPosition, } from '../core';

package/build/svelte/index.js

@@ -3,7 +3,7 @@
 // views' ViewConfigs (../register, a side-effect import of the codegen specs - never
 // react-native-screens' own React components), then exposes Stack (with Stack.Screen attached)
 // and the navigator handle. Mirrors vue/index.ts's barrel shape.
-import '../register';
+import '../register.js';
 export { Stack } from './stack/index.js';
 export { default as Screen } from './screen.svelte';
 export { useNavigation, useStackNavigation, useTabNavigation, useDrawerNavigation, useRoute, useIsFocused, useFocusEffect, useNavigationState, } from './runes/index.js';

package/build/svelte/navigation-scope.svelte

@@ -12,7 +12,10 @@
   import { setNavigationScope } from './navigation-context';
   import type { INavigationScopeValue } from './navigation-context';
 
-  let { value, children }: { value: INavigationScopeValue; children?: Snippet } = $props();
+  let {
+    value,
+    children,
+  }: { value: INavigationScopeValue; children?: Snippet } = $props();
 
   setNavigationScope({
     get current(): INavigationScopeValue {

package/build/svelte/runes/use-navigation.svelte.js

@@ -12,7 +12,11 @@ export function useNavigation() {
     const scope = requireNavigationScope('useNavigation');
     const handle = $derived.by(() => {
         const { navigation, emitter, parent } = scope.current;
-        return { ...navigation, addListener: emitter.addListener, getParent: () => parent?.navigation };
+        return {
+            ...navigation,
+            addListener: emitter.addListener,
+            getParent: () => parent?.navigation,
+        };
     });
     return {
         get current() {

package/build/svelte/stack/index.svelte

@@ -48,7 +48,11 @@
   import { hostProps } from '../attachments';
   import { getNavigationScope } from '../navigation-context';
   import { SCREEN_REGISTRY_HOST_PROPS } from '../registry-host';
-  import { setScreenCollector, toRegistry, withoutScreen } from '../screen-registry';
+  import {
+    setScreenCollector,
+    toRegistry,
+    withoutScreen,
+  } from '../screen-registry';
   import type { IRegisteredScreen } from '../screen-registry';
   import type { IScreenProps, ISvelteScreenOptions } from '../screen-props';
   import StackScreen from './stack-screen.svelte';
@@ -100,7 +104,11 @@
       dlog('Stack: no <Stack.Screen> children registered');
       // Deliberately NOT memoized: markers may still be registering, and the next derivation run
       // should get a real initial route rather than being stuck on this placeholder.
-      return createInitialNavigatorState({ key: routeIdPrefix, name: '', params: undefined });
+      return createInitialNavigatorState({
+        key: routeIdPrefix,
+        name: '',
+        params: undefined,
+      });
     }
     seededState = createInitialNavigatorState(
       createRoute(startRouteName, registry.get(startRouteName)?.initialParams),
@@ -114,7 +122,9 @@
   // derivation because it is PURE - it hands back the same state reference when nothing changed, so
   // it writes no state and cannot re-trigger itself; `dispatch` below then persists the pruned
   // history, since it reduces over this value rather than over `pushedState`.
-  const state = $derived(reconcileStackRoutes(pushedState ?? seedState(), [...registry.keys()]));
+  const state = $derived(
+    reconcileStackRoutes(pushedState ?? seedState(), [...registry.keys()]),
+  );
 
   function dispatch(action: INavigatorAction): void {
     pushedState = navigatorReducer(state, action);
@@ -185,7 +195,8 @@
       emitterFor(route.key).emit(NAVIGATION_EVENT_STATE, current);
     }
     for (const routeKey of [...emitters.keys()]) {
-      if (!current.routes.some(route => route.key === routeKey)) emitters.delete(routeKey);
+      if (!current.routes.some(route => route.key === routeKey))
+        emitters.delete(routeKey);
     }
   });
 
@@ -196,7 +207,8 @@
   // never removed.
   const stackProps = resolveStackProps({
     passthrough: {
-      [STACK_ON_FINISH_TRANSITIONING]: () => dlog(`Stack: onFinishTransitioning at t=${Date.now()}`),
+      [STACK_ON_FINISH_TRANSITIONING]: () =>
+        dlog(`Stack: onFinishTransitioning at t=${Date.now()}`),
     },
   });
 
@@ -221,4 +233,29 @@
   }
 </script>
 
-<symbiote-view p={STACK_ROOT_PROPS}><symbiote-text p={SCREEN_REGISTRY_HOST_PROPS}>{@render children?.()}</symbiote-text><svelte:element this={RNS_SCREEN_STACK_VIEW_NAME} {@attach hostProps(stackProps)}>{#each state.routes as route, index (route.key)}{@const screenComponent = componentFor(route)}{#if screenComponent !== undefined}<StackScreen {route} {index} routeCount={state.routes.length} options={optionsFor(route)} navigation={handle} emitter={emitterFor(route.key)} parentScope={parentScope?.current} component={screenComponent} onPopRequested={popOne} />{/if}{/each}</svelte:element></symbiote-view>
+<symbiote-view p={STACK_ROOT_PROPS}>
+  <symbiote-text p={SCREEN_REGISTRY_HOST_PROPS}>
+    {@render children?.()}
+  </symbiote-text>
+  <svelte:element
+    this={RNS_SCREEN_STACK_VIEW_NAME}
+    {@attach hostProps(stackProps)}
+  >
+    {#each state.routes as route, index (route.key)}
+      {@const screenComponent = componentFor(route)}
+      {#if screenComponent !== undefined}
+        <StackScreen
+          {route}
+          {index}
+          routeCount={state.routes.length}
+          options={optionsFor(route)}
+          navigation={handle}
+          emitter={emitterFor(route.key)}
+          parentScope={parentScope?.current}
+          component={screenComponent}
+          onPopRequested={popOne}
+        />
+      {/if}
+    {/each}
+  </svelte:element>
+</symbiote-view>

package/build/svelte/stack/stack-screen.svelte

@@ -5,7 +5,9 @@
   // (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: INavigatorPlatform = { defaultHeaderBackTitleVisible: true };
+  const NAVIGATOR_PLATFORM: INavigatorPlatform = {
+    defaultHeaderBackTitleVisible: true,
+  };
 
   // react-native-screens' RNSScreenStackHeaderConfig.mm requires every header child to be an
   // RNSScreenStackHeaderSubview; `type: 'searchBar'` is how it knows which slot this one fills.
@@ -24,9 +26,9 @@
   // compiles through Svelte's generic setAttribute path and never the custom-element property-SET
   // path the object bag depends on - see ../attachments.ts for the full reasoning.
   //
-  // The whole per-route tree is packed edge-to-edge with zero whitespace between sibling tags:
-  // svelte-adapter-dom-shim skill §16, where a stray space would become a real RCTRawText child
-  // of a react-native-screens view.
+  // Whitespace between sibling tags in the per-route tree is inert: the shim drops a
+  // whitespace-only text node whose parent takes no raw text, so it never becomes an RCTRawText
+  // child of a react-native-screens view (dom-shim/text.ts, svelte-adapter-dom-shim skill §16b).
   import { Platform, dlog } from '@symbiote-native/engine';
   import {
     NAVIGATION_EVENT_BLUR,
@@ -86,13 +88,19 @@
         [SCREEN_ON_WILL_APPEAR]: () =>
           dlog(`Stack: route "${route.name}" will appear at t=${Date.now()}`),
         [SCREEN_ON_APPEAR]: () => {
-          dlog(`Stack: route "${route.name}" appeared (focus) at t=${Date.now()}`);
+          dlog(
+            `Stack: route "${route.name}" appeared (focus) at t=${Date.now()}`,
+          );
           emitter.emit(NAVIGATION_EVENT_FOCUS);
         },
         [SCREEN_ON_WILL_DISAPPEAR]: () =>
-          dlog(`Stack: route "${route.name}" will disappear at t=${Date.now()}`),
+          dlog(
+            `Stack: route "${route.name}" will disappear at t=${Date.now()}`,
+          ),
         [SCREEN_ON_DISAPPEAR]: () => {
-          dlog(`Stack: route "${route.name}" disappeared (blur) at t=${Date.now()}`);
+          dlog(
+            `Stack: route "${route.name}" disappeared (blur) at t=${Date.now()}`,
+          );
           emitter.emit(NAVIGATION_EVENT_BLUR);
         },
       },
@@ -131,7 +139,9 @@
   // controller to attach to, so the header silently never renders. activityState mirrors the
   // outer screen's own value - RNSScreen.mm treats an unset/inactive nested screen as not yet
   // pushed, leaving it parked at its pre-push transition position.
-  const innerStackProps = $derived<Record<string, unknown>>({ style: plan.innerStackStyle });
+  const innerStackProps = $derived<Record<string, unknown>>({
+    style: plan.innerStackStyle,
+  });
   const innerScreenProps = $derived<Record<string, unknown>>({
     style: plan.innerScreenStyle,
     activityState: plan.activityState,
@@ -145,4 +155,51 @@
   });
 </script>
 
-{#snippet chrome()}<svelte:element this={RNS_SCREEN_STACK_HEADER_CONFIG_VIEW_NAME} {@attach hostProps(plan.headerConfig.props)}>{#if plan.searchBarProps !== undefined}<svelte:element this={RNS_SCREEN_STACK_HEADER_SUBVIEW_VIEW_NAME} {@attach hostProps(HEADER_SUBVIEW_PROPS)}><svelte:element this={RNS_SEARCH_BAR_VIEW_NAME} {@attach hostProps(plan.searchBarProps)} {@attach searchBarRef(searchBarOptions?.ref)}></svelte:element></svelte:element>{/if}</svelte:element><svelte:element this={RNS_SCREEN_CONTENT_WRAPPER_VIEW_NAME} {@attach hostProps(plan.contentWrapperProps)}><NavigationScope value={scopeValue}><ScreenComponent /></NavigationScope></svelte:element>{/snippet}<svelte:element this={plan.screenViewName} {@attach hostProps(plan.screenProps)}>{#if plan.inModal}<svelte:element this={RNS_SCREEN_STACK_VIEW_NAME} {@attach hostProps(innerStackProps)}><svelte:element this={RNS_SCREEN_VIEW_NAME} {@attach hostProps(innerScreenProps)}>{@render chrome()}</svelte:element></svelte:element>{:else}{@render chrome()}{/if}</svelte:element>
+{#snippet chrome()}
+  <svelte:element
+    this={RNS_SCREEN_STACK_HEADER_CONFIG_VIEW_NAME}
+    {@attach hostProps(plan.headerConfig.props)}
+  >
+    {#if plan.searchBarProps !== undefined}
+      <svelte:element
+        this={RNS_SCREEN_STACK_HEADER_SUBVIEW_VIEW_NAME}
+        {@attach hostProps(HEADER_SUBVIEW_PROPS)}
+      >
+        <svelte:element
+          this={RNS_SEARCH_BAR_VIEW_NAME}
+          {@attach hostProps(plan.searchBarProps)}
+          {@attach searchBarRef(searchBarOptions?.ref)}
+        />
+      </svelte:element>
+    {/if}
+  </svelte:element>
+  <svelte:element
+    this={RNS_SCREEN_CONTENT_WRAPPER_VIEW_NAME}
+    {@attach hostProps(plan.contentWrapperProps)}
+  >
+    <NavigationScope value={scopeValue}>
+      <ScreenComponent />
+    </NavigationScope>
+  </svelte:element>
+{/snippet}
+
+<svelte:element
+  this={plan.screenViewName}
+  {@attach hostProps(plan.screenProps)}
+>
+  {#if plan.inModal}
+    <svelte:element
+      this={RNS_SCREEN_STACK_VIEW_NAME}
+      {@attach hostProps(innerStackProps)}
+    >
+      <svelte:element
+        this={RNS_SCREEN_VIEW_NAME}
+        {@attach hostProps(innerScreenProps)}
+      >
+        {@render chrome()}
+      </svelte:element>
+    </svelte:element>
+  {:else}
+    {@render chrome()}
+  {/if}
+</svelte:element>

package/build/svelte/tabs/index.svelte

@@ -48,7 +48,11 @@
   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 {
+    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';
@@ -94,7 +98,8 @@
   let dispatchedState = $state.raw<ITabRouterState | null>(null);
 
   const state = $derived.by<ITabRouterState>(() => {
-    if (registeredRoutes.length === 0) dlog('Tab: no <Tab.Screen> children registered');
+    if (registeredRoutes.length === 0)
+      dlog('Tab: no <Tab.Screen> children registered');
     const dispatched = dispatchedState;
     return dispatched === null
       ? createInitialTabState(registeredRoutes, initialRouteName)
@@ -207,29 +212,33 @@
   );
 
   const tabBar = $derived.by<IDescriptor>(() =>
-    renderTabBar({ items, style: focusedOptions?.tabBarStyle, passthrough: {} }),
+    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,
-        },
-      };
-    },
-  );
+  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
@@ -244,4 +253,17 @@
   });
 </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>
+<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>