@symbiote-native/navigation 2.1.0 → 3.0.0

package/src/svelte/fabric-tree.test-helper.ts

@@ -17,7 +17,10 @@ function isFabricNode(value: unknown): value is IFabricNode {
   return typeof value === 'object' && value !== null;
 }
 
-export function walkLive(root: unknown, visit: (node: IFabricNode) => void): void {
+export function walkLive(
+  root: unknown,
+  visit: (node: IFabricNode) => void,
+): void {
   if (!isFabricNode(root)) return;
   visit(root);
   for (const child of root.children ?? []) walkLive(child, visit);
@@ -31,7 +34,10 @@ export function findAllLive(root: unknown, viewName: string): IFabricNode[] {
   return found;
 }
 
-export function findLive(root: unknown, viewName: string): IFabricNode | undefined {
+export function findLive(
+  root: unknown,
+  viewName: string,
+): IFabricNode | undefined {
   return findAllLive(root, viewName)[0];
 }
 
@@ -39,7 +45,10 @@ export function countLive(root: unknown, viewName: string): number {
   return findAllLive(root, viewName).length;
 }
 
-export function findLiveByTestId(root: unknown, testID: string): IFabricNode | undefined {
+export function findLiveByTestId(
+  root: unknown,
+  testID: string,
+): IFabricNode | undefined {
   let found: IFabricNode | undefined;
   walkLive(root, node => {
     if (found === undefined && node.props?.testID === testID) found = node;
@@ -47,6 +56,31 @@ export function findLiveByTestId(root: unknown, testID: string): IFabricNode | u
   return found;
 }
 
+const TEXT_CONTAINER_VIEW_NAMES = new Set(['RCTText', 'RCTVirtualText']);
+
+// Every raw text committed under a parent that cannot hold one - an invalid Fabric child.
+// The gap Svelte leaves between two sibling tags compiles to a ' ' text node, and the shim
+// drops it exactly when the parent takes no raw text (dom-shim/text.ts, svelte-adapter-dom-shim
+// §16b); inside an RCTText the same string is a real word separator and must survive. So the
+// parent, not the string, is what makes a raw text legal, and this returns the ones that are
+// not. Formatted `viewName > "text"` so a failure names the offender.
+export function rawTextsOutsideTextContainer(root: unknown): string[] {
+  const found: string[] = [];
+  const visit = (node: unknown, parent: IFabricNode | undefined): void => {
+    if (!isFabricNode(node)) return;
+    const parentName = parent?.viewName;
+    if (
+      node.viewName === 'RCTRawText' &&
+      (parentName === undefined || !TEXT_CONTAINER_VIEW_NAMES.has(parentName))
+    ) {
+      found.push(`${String(parentName)} > ${JSON.stringify(node.props?.text)}`);
+    }
+    for (const child of node.children ?? []) visit(child, node);
+  };
+  visit(root, undefined);
+  return found;
+}
+
 // A depth-indented `viewName` outline, for asserting the exact committed SHAPE (which is what
 // catches a stray whitespace text node, an extra wrapper, or a missing header).
 export function outline(root: unknown): string[] {

package/src/svelte/index.ts

@@ -16,7 +16,11 @@ export type {
   ISvelteScreenOptions,
   ISvelteSearchBarOptions,
 } from './screen-props';
-export type { IScreenOptions, IStackAnimation, IStackPresentation } from '../core';
+export type {
+  IScreenOptions,
+  IStackAnimation,
+  IStackPresentation,
+} from '../core';
 
 export {
   useNavigation,
@@ -34,7 +38,10 @@ export type {
   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';
@@ -68,4 +75,9 @@ export type {
   IDrawerScreenOptionsResolver,
   IDrawerScreenProps,
 } from './drawer-screen-props';
-export type { IDrawerOptions, IDrawerScreenOptions, IDrawerType, IDrawerPosition } from '../core';
+export type {
+  IDrawerOptions,
+  IDrawerScreenOptions,
+  IDrawerType,
+  IDrawerPosition,
+} from '../core';

package/src/svelte/linking.svelte.ts

@@ -34,7 +34,10 @@ export function useLinkingIntegration(
 
     let cancelled = false;
 
-    const applyRoute = (url: string, dispatch: (name: string, params?: unknown) => void): void => {
+    const applyRoute = (
+      url: string,
+      dispatch: (name: string, params?: unknown) => void,
+    ): void => {
       const route = resolveRouteFromUrl(config, url);
       if (route === null) {
         dlog(`useLinkingIntegration: no route resolved for "${url}"`);
@@ -53,10 +56,13 @@ export function useLinkingIntegration(
         dlog(`useLinkingIntegration: getInitialURL failed: ${String(error)}`);
       });
 
-    const subscription: IEventSubscription = Linking.addEventListener('url', (event: IUrlEvent) => {
-      dlog(`useLinkingIntegration: url event "${event.url}"`);
-      applyRoute(event.url, handle.push);
-    });
+    const subscription: IEventSubscription = Linking.addEventListener(
+      'url',
+      (event: IUrlEvent) => {
+        dlog(`useLinkingIntegration: url event "${event.url}"`);
+        applyRoute(event.url, handle.push);
+      },
+    );
 
     return () => {
       cancelled = true;

package/src/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/src/svelte/runes/use-drawer-navigation.svelte.ts

@@ -8,7 +8,9 @@ import type { INavigationHandle } from './use-navigation.svelte';
 export type IDrawerNavigationHandle = IDrawerNavigatorHandle &
   Pick<INavigationHandle, 'addListener' | 'getParent'>;
 
-export function useDrawerNavigation(): { readonly current: IDrawerNavigationHandle } {
+export function useDrawerNavigation(): {
+  readonly current: IDrawerNavigationHandle;
+} {
   const navigation = useNavigation();
   const narrowed = $derived.by<IDrawerNavigationHandle>(() => {
     const value = navigation.current;

package/src/svelte/runes/use-focus-effect.svelte.ts

@@ -24,8 +24,14 @@ export function useFocusEffect(effect: () => (() => void) | void): void {
   // once. The teardown also runs any still-pending cleanup, matching Vue's onUnmounted.
   $effect(() => {
     const { emitter } = untrack(() => scope.current);
-    const unsubscribeFocus = emitter.addListener(NAVIGATION_EVENT_FOCUS, runEffect);
-    const unsubscribeBlur = emitter.addListener(NAVIGATION_EVENT_BLUR, runCleanup);
+    const unsubscribeFocus = emitter.addListener(
+      NAVIGATION_EVENT_FOCUS,
+      runEffect,
+    );
+    const unsubscribeBlur = emitter.addListener(
+      NAVIGATION_EVENT_BLUR,
+      runCleanup,
+    );
     return () => {
       unsubscribeFocus();
       unsubscribeBlur();

package/src/svelte/runes/use-navigation-state.svelte.ts

@@ -23,7 +23,9 @@ function isNavigatorState(value: unknown): value is INavigatorState {
   return isRecord(value) && Array.isArray(value.routes);
 }
 
-export function useNavigationState<TResult>(selector: (state: INavigatorState) => TResult): {
+export function useNavigationState<TResult>(
+  selector: (state: INavigatorState) => TResult,
+): {
   readonly current: TResult;
 } {
   const scope = requireNavigationScope('useNavigationState');

package/src/svelte/runes/use-navigation.svelte.ts

@@ -8,12 +8,18 @@
 // §21). A caller reads `useNavigation().current` inside a `$derived`/template/`$effect`, exactly
 // like unwrapping Vue's `ComputedRef` via `.value`.
 
-import type { INavigationEventListener, INavigationEventName } from '../../core';
+import type {
+  INavigationEventListener,
+  INavigationEventName,
+} from '../../core';
 import { requireNavigationScope } from '../navigation-context';
 import type { IAnyNavigatorHandle } from '../navigation-context';
 
 export type INavigationHandle = IAnyNavigatorHandle & {
-  addListener: (event: INavigationEventName, listener: INavigationEventListener) => () => void;
+  addListener: (
+    event: INavigationEventName,
+    listener: INavigationEventListener,
+  ) => () => void;
   // Walks exactly ONE hop up the scope's `parent` chain to the enclosing navigator's handle -
   // e.g. a Tab screen nested inside a Stack screen calling getParent() to push a new Stack route.
   // Callers narrow the union themselves ('push' in parent, etc.). Deliberately NOT
@@ -28,7 +34,11 @@ export function useNavigation(): { readonly current: INavigationHandle } {
   const scope = requireNavigationScope('useNavigation');
   const handle = $derived.by<INavigationHandle>(() => {
     const { navigation, emitter, parent } = scope.current;
-    return { ...navigation, addListener: emitter.addListener, getParent: () => parent?.navigation };
+    return {
+      ...navigation,
+      addListener: emitter.addListener,
+      getParent: () => parent?.navigation,
+    };
   });
 
   return {

package/src/svelte/runes/use-stack-navigation.svelte.ts

@@ -11,7 +11,9 @@ import type { INavigationHandle } from './use-navigation.svelte';
 export type IStackNavigationHandle = INavigatorHandle &
   Pick<INavigationHandle, 'addListener' | 'getParent'>;
 
-export function useStackNavigation(): { readonly current: IStackNavigationHandle } {
+export function useStackNavigation(): {
+  readonly current: IStackNavigationHandle;
+} {
   const navigation = useNavigation();
   const narrowed = $derived.by<IStackNavigationHandle>(() => {
     const value = navigation.current;

package/src/svelte/screen-props.ts

@@ -23,7 +23,10 @@ export type ISvelteSearchBarOptions = ISearchBarOptions & {
   ref?: { current: ISearchBarCommands | null };
 };
 
-export type ISvelteScreenOptions = Omit<IScreenOptions, 'headerSearchBarOptions'> & {
+export type ISvelteScreenOptions = Omit<
+  IScreenOptions,
+  'headerSearchBarOptions'
+> & {
   headerSearchBarOptions?: ISvelteSearchBarOptions;
 };
 
@@ -35,7 +38,9 @@ export type IScreenOptionsArgs = {
   navigation: INavigatorHandle;
 };
 
-export type IScreenOptionsResolver = (args: IScreenOptionsArgs) => ISvelteScreenOptions;
+export type IScreenOptionsResolver = (
+  args: IScreenOptionsArgs,
+) => ISvelteScreenOptions;
 
 export type IScreenProps = {
   name: string;

package/src/svelte/screen-registry.ts

@@ -45,7 +45,9 @@ export type IScreenCollector<TOptions> = {
 const SCREEN_COLLECTOR_KEY = Symbol('symbiote-navigation-screen-collector');
 
 // Called once from a navigator's own init, before it renders the children snippet.
-export function setScreenCollector<TOptions>(collector: IScreenCollector<TOptions>): void {
+export function setScreenCollector<TOptions>(
+  collector: IScreenCollector<TOptions>,
+): void {
   setContext(SCREEN_COLLECTOR_KEY, collector);
 }
 
@@ -55,9 +57,13 @@ export function collectScreen<TOptions>(
   kind: INavigatorKind,
   screen: IRegisteredScreen<TOptions>,
 ): void {
-  const collector = getContext<IScreenCollector<TOptions> | undefined>(SCREEN_COLLECTOR_KEY);
+  const collector = getContext<IScreenCollector<TOptions> | undefined>(
+    SCREEN_COLLECTOR_KEY,
+  );
   if (collector === undefined) {
-    dlog(`navigation: <${kind} screen "${screen.name}"> rendered outside any navigator, ignored`);
+    dlog(
+      `navigation: <${kind} screen "${screen.name}"> rendered outside any navigator, ignored`,
+    );
     return;
   }
   if (collector.kind !== kind) {

package/src/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/src/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/src/svelte/svelte-compile.test-helper.ts

@@ -36,10 +36,11 @@ const {
   compileSvelteModuleFile: (source: string, filename: string) => string;
 } = metroSvelteTransformer;
 
-const COMPILE_OPTIONS = { generate: 'client', fragments: 'tree', css: 'external' } as const;
-// The §16 tell: a single-space text entry inside a compiled `from_tree([...])` array, i.e. real
-// whitespace between two sibling nodes that became a real RCTRawText engine node.
-const STRAY_WHITESPACE_PATTERN = /,\s*'\s+'\s*,/g;
+const COMPILE_OPTIONS = {
+  generate: 'client',
+  fragments: 'tree',
+  css: 'external',
+} as const;
 const SVELTE_SPECIFIER_PATTERN = /(['"])(\.{1,2}\/[^'"]*\.svelte)\1/g;
 
 export type ISvelteHarness = {
@@ -47,8 +48,6 @@ export type ISvelteHarness = {
   compileFile(sveltePath: string): string;
   // Compile an inline fixture written into `dir`, so its own relative imports resolve from there.
   compileSource(dir: string, name: string, source: string): string;
-  // The number of stray single-space text entries across everything compiled so far - must be 0.
-  strayWhitespaceCount(): number;
   cleanup(): void;
 };
 
@@ -58,7 +57,6 @@ export function createSvelteHarness(
 ): ISvelteHarness {
   const written: string[] = [];
   const compiledBySource = new Map<string, string>();
-  let strayWhitespace = 0;
 
   function outPathFor(sveltePath: string): string {
     const stem = basename(sveltePath).replace(/\./g, '-');
@@ -83,13 +81,21 @@ export function createSvelteHarness(
       },
     );
     for (const [specifier, target] of Object.entries(aliases)) {
-      rewritten = rewritten.split(`'${specifier}'`).join(`'${relativeSpecifier(outPath, target)}'`);
-      rewritten = rewritten.split(`"${specifier}"`).join(`"${relativeSpecifier(outPath, target)}"`);
+      rewritten = rewritten
+        .split(`'${specifier}'`)
+        .join(`'${relativeSpecifier(outPath, target)}'`);
+      rewritten = rewritten
+        .split(`"${specifier}"`)
+        .join(`"${relativeSpecifier(outPath, target)}"`);
     }
     return rewritten;
   }
 
-  function emit(sveltePath: string, source: string, isRuneModule: boolean): string {
+  function emit(
+    sveltePath: string,
+    source: string,
+    isRuneModule: boolean,
+  ): string {
     const outPath = outPathFor(sveltePath);
     // Registered BEFORE compiling so a cycle between two components terminates.
     compiledBySource.set(sveltePath, outPath);
@@ -98,7 +104,6 @@ export function createSvelteHarness(
     const code = isRuneModule
       ? compileSvelteModuleFile(source, `${filename}.ts`)
       : compile(source, { ...COMPILE_OPTIONS, filename }).js.code;
-    strayWhitespace += (code.match(STRAY_WHITESPACE_PATTERN) ?? []).length;
     writeFileSync(outPath, rewrite(code, outPath));
     return outPath;
   }
@@ -121,7 +126,6 @@ export function createSvelteHarness(
     compileSource(dir, name, source) {
       return emit(join(dir, `${name}.svelte`), source, false);
     },
-    strayWhitespaceCount: () => strayWhitespace,
     cleanup() {
       for (const file of written) rmSync(file, { force: true });
       written.length = 0;

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

@@ -10,7 +10,9 @@ export type ITabScreenOptionsArgs = {
   navigation: ITabNavigatorHandle;
 };
 
-export type ITabScreenOptionsResolver = (args: ITabScreenOptionsArgs) => ITabOptions;
+export type ITabScreenOptionsResolver = (
+  args: ITabScreenOptionsArgs,
+) => ITabOptions;
 
 export type ITabScreenProps = {
   name: string;

package/src/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>