@symbiote-native/navigation 2.1.0 → 3.0.0

package/src/solid/tabs/index.ts

@@ -0,0 +1,327 @@
+// Tab, the Solid 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
+// every other adapter; here Solid supplies the lifecycle - a signal for the dispatched router
+// state, a callback `ref` 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 painting ordinary
+// `symbiote-view`/`symbiote-text` primitives, so there is no react-native-screens ViewConfig to
+// register here.
+//
+// TWO SOLID-ONLY REBUILD BOUNDARIES, both invisible in every other adapter:
+//
+// 1. THE TAB BAR'S SHAPE FOLLOWS ITS DATA. renderTabBar emits one child per item, and each item
+//    emits an icon wrapper only when it has an icon or a badge - so adding a screen, or a badge
+//    appearing, CHANGES the Descriptor's shape, which descriptorToSolid's shape guard rejects by
+//    design (it builds once and updates props in place). `barSignature` captures exactly the parts
+//    of the data the shape depends on, and the bar is rebuilt when that string changes and only
+//    then. Every other adapter re-renders the whole bar every time and never meets this.
+//
+// 2. ONLY THE FOCUSED SCREEN IS MOUNTED, so a focus change is a genuine rebuild while a
+//    `setParams` on the focused route must NOT be. The content memo therefore depends on the
+//    focused route KEY and its component identity alone, with the build `untrack`ed
+//    (.claude/rules/solid-descriptor-bridge.md §5); the route object itself reaches the screen
+//    through the scope accessor, which is what keeps useRoute() live without rebuilding anything.
+
+import { createEffect, createMemo, createSignal, untrack } from 'solid-js';
+import { descriptorToSolid } from '@symbiote-native/solid';
+import type { JSX } from '@symbiote-native/solid/jsx-runtime';
+// createComponent from solid-js, insert from the renderer - see stack/index.ts's note.
+import { createComponent } from 'solid-js';
+import { insert } from '@symbiote-native/solid/renderer';
+import type { ISymbioteNode } from '@symbiote-native/engine';
+import { dlog } from '@symbiote-native/engine';
+import {
+  NAVIGATION_EVENT_BLUR,
+  NAVIGATION_EVENT_FOCUS,
+  createInitialTabState,
+  createNavigationEmitter,
+  diffFocusedRoute,
+  isFocusedRoute,
+  reconcileTabRoutes,
+  renderTabBar,
+  tabRouterReducer,
+} from '../../core';
+import type {
+  INavigationEmitter,
+  IRoute,
+  ITabBarIcon,
+  ITabBarItemView,
+  ITabNavigatorHandle,
+  ITabOptions,
+  ITabRouterAction,
+  ITabRouterState,
+} from '../../core';
+import { hostElement } from '../host';
+import {
+  NavigationScopeProvider,
+  useNavigationScope,
+} from '../navigation-context';
+import type { INavigationScope } from '../navigation-context';
+import {
+  ScreenCollectorProvider,
+  createScreenSignal,
+  toRegistry,
+} from '../screen-registry';
+import type { IRegisteredScreen } from '../screen-registry';
+import { TabScreen } from '../screen';
+import type {
+  ITabScreenOptionsArgs,
+  ITabScreenProps,
+} from '../tab-screen-props';
+
+export type { ITabNavigatorHandle } from '../../core';
+
+export type ITabProps = {
+  initialRouteName?: string;
+  screenOptions?: ITabOptions;
+  ref?: (handle: ITabNavigatorHandle) => void;
+  children?: JSX.Element;
+};
+
+const TAB_CONTENT_STYLE = { flex: 1 };
+const TAB_ROOT_STYLE = { flex: 1 };
+
+let navigatorSequence = 0;
+
+type ITabScreenEntry = IRegisteredScreen<ITabScreenProps['options']>;
+
+function resolveTabOptions(
+  entry: ITabScreenEntry,
+  args: ITabScreenOptionsArgs,
+  screenOptions: ITabOptions | undefined,
+): ITabOptions {
+  const own =
+    typeof entry.options === 'function' ? entry.options(args) : entry.options;
+  return { ...screenOptions, ...own };
+}
+
+// A Descriptor icon is spliced into the bar verbatim, so only its ROOT type is visible here - an
+// app that swaps one Descriptor icon for another of the same type but a different child count
+// would still trip the bridge's shape guard, with the guard's own message. That is the honest
+// boundary: this signature covers the shape decisions render-tabs.ts itself makes.
+function iconKind(icon: ITabBarIcon | undefined): string {
+  if (icon === undefined) return '-';
+  return typeof icon === 'string' ? 'glyph' : icon.type;
+}
+
+function barSignature(items: readonly ITabBarItemView[]): string {
+  return items
+    .map(
+      item =>
+        `${item.key}:${iconKind(item.icon)}:${item.badge === undefined ? 0 : 1}`,
+    )
+    .join('|');
+}
+
+function TabImpl(props: ITabProps): JSX.Element {
+  // Read BEFORE this Tab provides its own per-screen scope - becomes the `parent` link a nested
+  // screen's useNavigation().getParent() walks. undefined when this Tab is the nesting root.
+  const parentScope = useNavigationScope();
+
+  const { screens, collector } = createScreenSignal<
+    'tab',
+    ITabScreenProps['options']
+  >('tab');
+  const registry = createMemo(() => toRegistry(screens()));
+
+  navigatorSequence += 1;
+  const routeIdPrefix = `tab-${navigatorSequence}`;
+
+  // Route keys are derived from the screen NAME, never a counter: a Tab's route list is rebuilt
+  // from the registry on every registration change, and a counter would mint a fresh key each time,
+  // re-mounting every screen for an unrelated marker edit.
+  const routes = createMemo<readonly IRoute<unknown>[]>(() =>
+    [...registry().entries()].map(([name, entry]) => ({
+      key: `${routeIdPrefix}-${name}`,
+      name,
+      params: entry.initialParams,
+    })),
+  );
+
+  // `null` means nothing has dispatched yet, which is what keeps initialRouteName honored when the
+  // markers arrive after the body has already run (screen-registry.ts).
+  const [dispatched, setDispatched] = createSignal<ITabRouterState | null>(
+    null,
+  );
+
+  const state = createMemo<ITabRouterState>(() => {
+    const current = routes();
+    const previous = dispatched();
+    return previous === null
+      ? createInitialTabState(current, props.initialRouteName)
+      : reconcileTabRoutes(previous, current);
+  });
+
+  function dispatch(action: ITabRouterAction): void {
+    setDispatched(tabRouterReducer(state(), action));
+  }
+
+  const jumpTo = (name: string, params?: unknown): void =>
+    dispatch({ type: 'jumpTo', name, params });
+  const setParams = (params: unknown, key: string): void =>
+    dispatch({ type: 'setParams', key, params });
+
+  const handle: ITabNavigatorHandle = { jumpTo, setParams };
+  props.ref?.(handle);
+
+  // One emitter per route.key, created lazily and cached for the navigator's whole lifetime. Emitter
+  // IDENTITY (stable, looked up by key) is deliberately decoupled from emit TIMING (deferred below):
+  // a scheme that recreated the emitter on each focus change raced the build of the very screen that
+  // was supposed to subscribe to it.
+  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;
+  }
+
+  const focusedKey = createMemo(() => {
+    const current = state();
+    return current.routes[current.index]?.key;
+  });
+
+  // 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. The emit is deferred to a microtask,
+  // which resolves only after Solid's whole effect flush has drained - including the build of the
+  // newly focused screen and the subscriptions createIsFocused/createFocusEffect register inside
+  // it. Emitting inline would reach zero subscribers.
+  let lastFocusedKey: string | undefined;
+  createEffect(() => {
+    const nextKey = focusedKey();
+    const { blurKey, focusKey } = diffFocusedRoute(lastFocusedKey, nextKey);
+    if (blurKey === undefined && focusKey === undefined) return;
+    lastFocusedKey = nextKey;
+    queueMicrotask(() => {
+      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);
+      }
+    });
+  });
+
+  const items = createMemo<readonly ITabBarItemView[]>(() => {
+    const current = state();
+    const entries = registry();
+    return current.routes.map((route, index) => {
+      const entry = entries.get(route.name);
+      const focused = isFocusedRoute(index, current.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, navigation: handle },
+        props.screenOptions,
+      );
+      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 focusedOptions = createMemo<ITabOptions | undefined>(() => {
+    const current = state();
+    const route = current.routes[current.index];
+    const entry = route === undefined ? undefined : registry().get(route.name);
+    if (entry === undefined || route === undefined) return props.screenOptions;
+    return resolveTabOptions(
+      entry,
+      { route, navigation: handle },
+      props.screenOptions,
+    );
+  });
+
+  // Header note 1: the bar is rebuilt only when its Descriptor SHAPE would change; every tint,
+  // label and badge-value change flows through descriptorToSolid's prop diff on the live nodes.
+  const barShape = createMemo(() => barSignature(items()));
+  const tabBar = createMemo(() => {
+    barShape();
+    return untrack(() =>
+      descriptorToSolid(() =>
+        renderTabBar({
+          items: items(),
+          style: focusedOptions()?.tabBarStyle,
+          passthrough: {},
+        }),
+      ),
+    );
+  });
+
+  // Header note 2. Only the focused route's screen is ever mounted (unlike Stack, which keeps every
+  // pushed route alive), so the previous screen's whole subtree - and every listener it registered
+  // - is torn down by Solid's ordinary disposal when focus moves on.
+  const focusedComponent = createMemo(() => {
+    const current = state();
+    const route = current.routes[current.index];
+    return route === undefined
+      ? undefined
+      : registry().get(route.name)?.component;
+  });
+
+  const content = createMemo(() => {
+    const routeKey = focusedKey();
+    const Component = focusedComponent();
+    return untrack(() => {
+      if (routeKey === undefined || Component === undefined) return undefined;
+      const scope: INavigationScope = () => ({
+        route: routeFor(routeKey),
+        navigation: handle,
+        emitter: emitterFor(routeKey),
+        parent: parentScope?.(),
+      });
+      return createComponent(NavigationScopeProvider, {
+        value: scope,
+        // No route/navigation props: the screen reads both through the primitives off the scope
+        // provided here (useRoute / useTabNavigation).
+        get children(): JSX.Element {
+          return createComponent(Component, {});
+        },
+      });
+    });
+  });
+
+  // Reads the CURRENT object for a key rather than closing over the one that was focused at build
+  // time - the accessor is what makes `setParams` reach a mounted screen's useRoute().
+  function routeFor(routeKey: string): IRoute<unknown> {
+    const found = state().routes.find(route => route.key === routeKey);
+    return found ?? { key: routeKey, name: '', params: undefined };
+  }
+
+  const contentHost = hostElement('symbiote-view', () => ({
+    style: TAB_CONTENT_STYLE,
+  }));
+  insert(contentHost, content);
+
+  const root = hostElement('symbiote-view', () => ({ style: TAB_ROOT_STYLE }));
+  // ONE array insert rather than two: a second `insert` on the same parent would find the first
+  // child already there and REPLACE it (solid-js/universal's insertExpression), while an array is
+  // reconciled by identity - contentHost keeps its node, only the bar is swapped when it rebuilds.
+  insert(root, (): readonly ISymbioteNode[] => [contentHost, tabBar()]);
+
+  return createComponent(ScreenCollectorProvider, {
+    value: collector,
+    get children(): JSX.Element {
+      return [props.children, root];
+    },
+  });
+}
+
+export const Tab = Object.assign(TabImpl, { Screen: TabScreen });

package/src/svelte/attachments.ts

@@ -31,7 +31,9 @@ function isShimElement(value: unknown): value is ShimElement {
 
 // The object-bag prop set, the same entry point every adapter's props go through (routeProp).
 // Re-runs on every change of `props`, and the shim's own `p` setter diffs per key from there.
-export function hostProps(props: Record<string, unknown>): (node: unknown) => void {
+export function hostProps(
+  props: Record<string, unknown>,
+): (node: unknown) => void {
   return node => {
     if (!isShimElement(node)) {
       dlog('navigation: hostProps attached to a non-shim element, ignored');

package/src/svelte/descriptor-subtree.ts

@@ -24,7 +24,9 @@ const TEXT_CHILD_MARK = '#';
 function shapeOf(children: readonly IDescriptorChild[]): string {
   return children
     .map(child =>
-      typeof child === 'string' ? TEXT_CHILD_MARK : `${child.type}(${shapeOf(child.children)})`,
+      typeof child === 'string'
+        ? TEXT_CHILD_MARK
+        : `${child.type}(${shapeOf(child.children)})`,
     )
     .join(',');
 }

package/src/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/src/svelte/drawer-screen-props.ts

@@ -3,14 +3,20 @@
 // same tsc-cannot-see-a-`.svelte`-named-export reason screen-props.ts documents.
 
 import type { Component } from 'svelte';
-import type { IDrawerNavigatorHandle, IDrawerScreenOptions, IRoute } from '../core';
+import type {
+  IDrawerNavigatorHandle,
+  IDrawerScreenOptions,
+  IRoute,
+} from '../core';
 
 export type IDrawerScreenOptionsArgs = {
   route: IRoute<unknown>;
   navigation: IDrawerNavigatorHandle;
 };
 
-export type IDrawerScreenOptionsResolver = (args: IDrawerScreenOptionsArgs) => IDrawerScreenOptions;
+export type IDrawerScreenOptionsResolver = (
+  args: IDrawerScreenOptionsArgs,
+) => IDrawerScreenOptions;
 
 export type IDrawerScreenProps = {
   name: string;

package/src/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'] {