@uniflowed/router 0.0.0-alpha.40 → 0.0.0-alpha.41

package/internal/runtime.js

@@ -20,7 +20,7 @@
 
 "use client";
 
-import * as React from "react";
+import type * as React from "react";
 import {
   Suspense,
   createContext,
@@ -28,8 +28,10 @@ import {
   use,
   useContext,
   useEffect,
+  useRef,
   useState,
   useSyncExternalStore,
+  useTransition,
 } from "react";
 // The one thing in this module that only a browser can do, and the reason it
 // is imported here rather than from `../client.js`: a view transition needs
@@ -74,7 +76,13 @@ import {
 import { BoundaryReporter } from "./boundaries.js";
 import { routeBoundaries } from "./boundary-data.js";
 import { composeRoute, pageComponent } from "./compose.js";
-import { type FetchedFlight, type FlightRoot, type RouteState, routeState } from "./flight.js";
+import {
+  type FetchedFlight,
+  type FlightFetchOptions,
+  type FlightRoot,
+  type RouteState,
+  routeState,
+} from "./flight.js";
 import { Head } from "./head.js";
 import { addressOf, applicationPathOf, canonicalAddress } from "./base-path.js";
 import {
@@ -426,15 +434,19 @@ export function navigationMode(): Navigation {
  * shown, whether or not anything calls it, so an import here would put that
  * package in every one of those bundles, or fail the build where it is absent.
  */
-let installedFlightFetch: ((url: string) => Promise<FetchedFlight>) | null = null;
+let installedFlightFetch:
+  | ((url: string, options?: FlightFetchOptions) => Promise<FetchedFlight>)
+  | null = null;
 
 /** Hand the router the payload fetch. Called once, by `hydrateFlight`, before the first render. */
-export function installFlightFetch(fetcher: (url: string) => Promise<FetchedFlight>): void {
+export function installFlightFetch(
+  fetcher: (url: string, options?: FlightFetchOptions) => Promise<FetchedFlight>,
+): void {
   installedFlightFetch = fetcher;
 }
 
 /** The next route's payload, through the fetch `hydrateFlight` installed. */
-function fetchFlight(url: string): Promise<FetchedFlight> {
+function fetchFlight(url: string, options?: FlightFetchOptions): Promise<FetchedFlight> {
   if (installedFlightFetch == null) {
     return Promise.reject(
       new Error(
@@ -444,7 +456,7 @@ function fetchFlight(url: string): Promise<FetchedFlight> {
       ),
     );
   }
-  return installedFlightFetch(url);
+  return installedFlightFetch(url, options);
 }
 
 /** Register the generated route table. Called once by the client and server entries. */
@@ -570,6 +582,12 @@ function historyStateFor(resolved: ResolvedRoute): mixed {
   return { [INTERCEPTED_FROM]: interception.base.pathname + interception.base.search };
 }
 
+/** The state a history entry for a Flight route is written with. */
+function historyStateForRoute(route: RouteState): mixed {
+  const from = route.interception?.from;
+  return from == null ? null : { [INTERCEPTED_FROM]: from };
+}
+
 /** Where the history entry holding `state` was intercepted from, if it was. */
 function interceptedFrom(state: mixed): ?string {
   if (state == null || typeof state !== "object" || Array.isArray(state)) {
@@ -599,6 +617,22 @@ function withoutInterception(state: mixed): mixed {
   return Object.keys(rest).length === 0 ? null : rest;
 }
 
+/** The page a Flight navigation is leaving from, as an application path and query. */
+function flightNavigationOrigin(root: FlightRoot): string {
+  return root.route.interception?.from ?? root.route.pathname + root.route.search;
+}
+
+/** The optional fetch settings for an intercepted payload request. */
+function flightFetchOptions(from: ?string): FlightFetchOptions | void {
+  return from == null ? undefined : { interceptedFrom: from };
+}
+
+/** The cache key for a Flight payload, separated by the page it renders over. */
+function flightNavigationKey(pathname: string, search: string, from: ?string): string {
+  const key = navigationKey(pathname, search);
+  return from == null ? key : `${key}\0${from}`;
+}
+
 /**
  * The provider for a route resolved from its modules: a single-page
  * application, and a project that turned `app.rsc` off.
@@ -625,7 +659,7 @@ component ModuleRouter(url: string, initial: ResolvedRoute, children: React.Node
   // whether a navigation is intercepted is a question about the page it starts
   // on — and `show` writes both in the same breath, so the two cannot disagree
   // about what was last committed.
-  const shown = React.useRef<ResolvedRoute>(initial);
+  const shown = useRef<ResolvedRoute>(initial);
   const show = (next: ResolvedRoute) => {
     shown.current = next;
     setResolved(next);
@@ -943,6 +977,11 @@ component FlightRouter(flight: Promise<FlightRoot>, children: React.Node) {
   const [current, setCurrent] = useState<Promise<FlightRoot>>(flight);
   const [pending, setPending] = useState<boolean>(false);
   const root = use(current);
+  const shown = useRef<FlightRoot>(root);
+  const show = (payload: Promise<FlightRoot>, nextRoot: FlightRoot) => {
+    shown.current = nextRoot;
+    setCurrent(payload);
+  };
   // Read once per render, for the reason `ModuleRouter` reads it once.
   const navigation = navigationMode();
 
@@ -967,11 +1006,13 @@ component FlightRouter(flight: Promise<FlightRoot>, children: React.Node) {
     try {
       // The route this page already has while it is fresh, then a prefetch
       // still in hand, then the network. See `./navigation-cache.js`.
-      const key = navigationKey(target.pathname, target.search);
+      const from = flightNavigationOrigin(shown.current);
+      const ordinaryKey = navigationKey(target.pathname, target.search);
+      const key = flightNavigationKey(target.pathname, target.search, from);
       const fetched = await (
         flightNavigations.read(key) ??
-        takePrefetched(next) ??
-        keepFlight(key, fetchFlight(next))
+        takePrefetched(next, from) ??
+        keepFlight(key, fetchFlight(next, flightFetchOptions(from)), ordinaryKey)
       );
       // Not a payload: a redirect off this origin, or a host that has no payload
       // for this URL. The browser loads it as a document, which is what the
@@ -989,13 +1030,14 @@ component FlightRouter(flight: Promise<FlightRoot>, children: React.Node) {
       // address the server answers without a redirect.
       const arrived = new URL(fetched.url, window.location.href);
       const landed = canonicalAddress(arrived.pathname) + arrived.search + target.hash;
+      const state = historyStateForRoute(nextRoot.route);
       if (options?.replace === true) {
-        window.history.replaceState(null, "", landed);
+        window.history.replaceState(state, "", landed);
       } else {
-        window.history.pushState(null, "", landed);
+        window.history.pushState(state, "", landed);
       }
       const commit = () => {
-        setCurrent(payload);
+        show(payload, nextRoot);
         setPending(false);
       };
       if (options?.transition === false) {
@@ -1003,7 +1045,9 @@ component FlightRouter(flight: Promise<FlightRoot>, children: React.Node) {
       } else {
         withViewTransition(nextRoot.route.viewTransition, commit);
       }
-      if (options?.scroll !== false) {
+      const scroll =
+        nextRoot.route.interception == null ? options?.scroll !== false : options?.scroll === true;
+      if (scroll) {
         if (target.hash !== "") {
           const element = document.getElementById(target.hash.slice(1));
           if (element != null) {
@@ -1023,6 +1067,13 @@ component FlightRouter(flight: Promise<FlightRoot>, children: React.Node) {
     if (!isBrowser()) {
       return undefined;
     }
+    // A document reload rendered the URL's ordinary page. If the browser kept
+    // an intercepted history marker for it, clear that marker before a later
+    // back/forward asks for a modal over a page this document did not show.
+    const restored = window.history.state;
+    if (interceptedFrom(restored) != null) {
+      window.history.replaceState(withoutInterception(restored), "", window.location.href);
+    }
     // No history entry was pushed, so there is nothing to pop back into; see
     // `ModuleRouter`.
     if (navigation === "document") {
@@ -1033,8 +1084,13 @@ component FlightRouter(flight: Promise<FlightRoot>, children: React.Node) {
       // The history entry already moved; a payload that cannot be had for it is
       // a document to load, and a reload is the browser's way to load it. While
       // this page keeps the route fresh, what it kept is what comes back.
-      const key = navigationKey(window.location.pathname, window.location.search);
-      (flightNavigations.read(key) ?? keepFlight(key, fetchFlight(next))).then(
+      const from = interceptedFrom(window.history.state);
+      const ordinaryKey = navigationKey(window.location.pathname, window.location.search);
+      const key = flightNavigationKey(window.location.pathname, window.location.search, from);
+      (
+        flightNavigations.read(key) ??
+        keepFlight(key, fetchFlight(next, flightFetchOptions(from)), ordinaryKey)
+      ).then(
         (fetched) => {
           if (fetched.kind === "document") {
             window.location.reload();
@@ -1044,7 +1100,7 @@ component FlightRouter(flight: Promise<FlightRoot>, children: React.Node) {
           payload.then(
             (nextRoot) => {
               withViewTransition(nextRoot.route.viewTransition, () => {
-                setCurrent(payload);
+                show(payload, nextRoot);
               });
             },
             () => {
@@ -1077,14 +1133,19 @@ component FlightRouter(flight: Promise<FlightRoot>, children: React.Node) {
         return;
       }
       const next = target.pathname + target.search;
+      const from = flightNavigationOrigin(shown.current);
       // Kept for every navigation to it while it is fresh, when a project set
       // `app.rendering.staleTime`; otherwise held for the one click after it.
       if (keepsNavigations()) {
-        const key = navigationKey(target.pathname, target.search);
-        await (flightNavigations.read(key) ?? keepFlight(key, fetchFlight(next)));
+        const ordinaryKey = navigationKey(target.pathname, target.search);
+        const key = flightNavigationKey(target.pathname, target.search, from);
+        await (
+          flightNavigations.read(key) ??
+          keepFlight(key, fetchFlight(next, flightFetchOptions(from)), ordinaryKey)
+        );
         return;
       }
-      await prefetchFlight(next);
+      await prefetchFlight(next, from);
     },
     refresh: async () => {
       if (!isBrowser()) {
@@ -1097,20 +1158,23 @@ component FlightRouter(flight: Promise<FlightRoot>, children: React.Node) {
       // Everything a navigation kept is older than what this asks for, so none
       // of it is shown again; see `./navigation-cache.js`.
       clearNavigationCache();
+      const from = root.route.interception?.from ?? null;
+      const ordinaryKey = navigationKey(window.location.pathname, window.location.search);
       const fetched = await keepFlight(
-        navigationKey(window.location.pathname, window.location.search),
-        fetchFlight(window.location.pathname + window.location.search),
+        flightNavigationKey(window.location.pathname, window.location.search, from),
+        fetchFlight(window.location.pathname + window.location.search, flightFetchOptions(from)),
+        ordinaryKey,
       );
       if (fetched.kind === "document") {
         window.location.reload();
         return;
       }
       const payload = fetched.root;
-      await payload;
+      const nextRoot = await payload;
       // No view transition: a refresh is the same URL rendered again. See
       // `ModuleRouter`'s refresh.
       startTransition(() => {
-        setCurrent(payload);
+        show(payload, nextRoot);
       });
     },
     back: () => {
@@ -1157,13 +1221,20 @@ const prefetchedFlights: Map<
  * request that failed, an answer that was a document rather than a payload, or
  * a payload React could not read.
  */
-function keepFlight(key: string, fetched: Promise<FetchedFlight>): Promise<FetchedFlight> {
+function keepFlight(
+  key: string,
+  fetched: Promise<FetchedFlight>,
+  ordinaryKey?: string,
+): Promise<FetchedFlight> {
   if (!keepsNavigations()) {
     return fetched;
   }
   flightNavigations.store(key, fetched);
   const forget = () => {
     flightNavigations.forget(key, fetched);
+    if (ordinaryKey != null) {
+      flightNavigations.forget(ordinaryKey, fetched);
+    }
   };
   void fetched.then((answer) => {
     if (answer.kind === "document") {
@@ -1175,6 +1246,10 @@ function keepFlight(key: string, fetched: Promise<FetchedFlight>): Promise<Fetch
     void answer.root.then((root) => {
       if (root.route.status !== 200) {
         forget();
+        return;
+      }
+      if (ordinaryKey != null && root.route.interception == null) {
+        flightNavigations.store(ordinaryKey, fetched);
       }
     }, forget);
   }, forget);
@@ -1202,8 +1277,13 @@ function keepRoute(key: string, resolved: Promise<ResolvedRoute>): Promise<Resol
   return resolved;
 }
 
-function prefetchFlight(url: string): Promise<FetchedFlight> {
-  const existing = prefetchedFlights.get(url);
+function prefetchedFlightKey(url: string, from: ?string): string {
+  return from == null ? url : `${url}\0${from}`;
+}
+
+function prefetchFlight(url: string, from: ?string): Promise<FetchedFlight> {
+  const key = prefetchedFlightKey(url, from);
+  const existing = prefetchedFlights.get(key);
   if (existing != null && Date.now() - existing.at < PREFETCH_LIFETIME_MS) {
     return existing.fetched;
   }
@@ -1213,17 +1293,18 @@ function prefetchFlight(url: string): Promise<FetchedFlight> {
       prefetchedFlights.delete(oldest.value);
     }
   }
-  const fetched = fetchFlight(url);
-  prefetchedFlights.set(url, { fetched, at: Date.now() });
+  const fetched = fetchFlight(url, flightFetchOptions(from));
+  prefetchedFlights.set(key, { fetched, at: Date.now() });
   fetched.catch(() => {
-    prefetchedFlights.delete(url);
+    prefetchedFlights.delete(key);
   });
   return fetched;
 }
 
-function takePrefetched(url: string): Promise<FetchedFlight> | null {
-  const entry = prefetchedFlights.get(url);
-  prefetchedFlights.delete(url);
+function takePrefetched(url: string, from: ?string): Promise<FetchedFlight> | null {
+  const key = prefetchedFlightKey(url, from);
+  const entry = prefetchedFlights.get(key);
+  prefetchedFlights.delete(key);
   if (entry == null || Date.now() - entry.at >= PREFETCH_LIFETIME_MS) {
     return null;
   }
@@ -1639,6 +1720,13 @@ export hook useSeo(seo: Metadata): React.Node {
 /** When a `Link` loads the route it points at. */
 export type LinkPrefetch = "off" | "intent" | "render";
 
+const LinkStatusContext: React.Context<boolean> = createContext(false);
+
+/** Whether the containing Link is waiting for the navigation it started. */
+export hook useLinkStatus(): {| readonly pending: boolean |} {
+  return { pending: useContext(LinkStatusContext) };
+}
+
 /**
  * A client-side navigation.
  *
@@ -1675,7 +1763,8 @@ export component Link(
   ...rest: { readonly [string]: mixed }
 ) {
   const { router, navigation } = useRouterState();
-  const prefetched = React.useRef(false);
+  const [linkPending, startLinkTransition] = useTransition();
+  const prefetched = useRef(false);
   const drives = navigation === "client";
 
   const doPrefetch = () => {
@@ -1703,15 +1792,21 @@ export component Link(
       event.ctrlKey ||
       event.shiftKey ||
       event.altKey ||
+      (rest.target != null && rest.target !== "_self") ||
+      rest.download != null ||
       isExternal(to)
     ) {
       return;
     }
     event.preventDefault();
-    router.push(to, { replace, transition }).catch((error) => {
-      // A failed navigation falls back to the browser doing it.
-      console.error(error);
-      window.location.assign(addressOf(to));
+    startLinkTransition(async () => {
+      try {
+        await router.push(to, { replace, transition });
+      } catch (error) {
+        // A failed navigation falls back to the browser doing it.
+        console.error(error);
+        window.location.assign(addressOf(to));
+      }
     });
   };
 
@@ -1727,11 +1822,13 @@ export component Link(
       // works before hydration and for a right click goes where this one does.
       href={addressOf(to)}
       className={className}
+      aria-busy={linkPending || undefined}
+      data-pending={linkPending ? "" : undefined}
       onClick={drives ? handleClick : onClick}
       onMouseEnter={drives && prefetch === "intent" ? doPrefetch : undefined}
       onFocus={drives && prefetch === "intent" ? doPrefetch : undefined}
     >
-      {children}
+      <LinkStatusContext value={linkPending}>{children}</LinkStatusContext>
     </a>
   );
 }

package/internal/stream.js

@@ -906,6 +906,11 @@ function withPayload(
  * from chunk to chunk, and otherwise waits for the HTML that finishes what is
  * open.
  *
+ * **Outside replaceable boundaries.** Even between tags, a payload inside a
+ * Suspense fallback disappears when React reveals its content. A browser that
+ * loads the Flight reader afterwards then sees an incomplete stream. React's
+ * boundary comments keep those ranges closed to injection until their end.
+ *
  * **`</body></html>` waits for the end of the payload.** The HTML can finish
  * first — the last boundary's markup is rendered from rows that are already
  * written — and a payload element after `</html>` is one the parser moves
@@ -1020,11 +1025,13 @@ type Boundary = {|
   readonly safe: boolean,
   /** The `script` or `style` element the HTML is inside, if it is inside one. */
   readonly rawText: string | null,
+  /** Suspense/Activity ranges React can replace before hydration starts. */
+  readonly replaceable: number,
   /** A tag, or a comment, the HTML has started and not yet finished. */
   readonly open: string,
 |};
 
-const NOTHING_WRITTEN: Boundary = { safe: false, rawText: null, open: "" };
+const NOTHING_WRITTEN: Boundary = { safe: false, rawText: null, replaceable: 0, open: "" };
 
 /**
  * `boundary`, once `html` has been written after it.
@@ -1041,23 +1048,31 @@ const NOTHING_WRITTEN: Boundary = { safe: false, rawText: null, open: "" };
 function advanced(boundary: Boundary, html: string): Boundary {
   const text = boundary.open + html;
   let rawText = boundary.rawText;
-  const tags = /<(\/?)(script|style)(?=[\s/>])[^>]*>/gi;
+  let replaceable = boundary.replaceable;
+  const tags = /<!--([\s\S]*?)-->|<(\/?)(script|style)(?=[\s/>])[^>]*>/gi;
   let tag = tags.exec(text);
   while (tag != null) {
-    const name = tag[2].toLowerCase();
-    if (tag[1] === "/") {
-      if (rawText === name) {
-        rawText = null;
+    const comment = tag[1];
+    if (comment != null) {
+      if (rawText == null) {
+        if (/^[\$&][?!~]?$/.test(comment)) replaceable += 1;
+        else if (comment === "/$" || comment === "/&") replaceable = Math.max(0, replaceable - 1);
+      }
+    } else {
+      const name = tag[3].toLowerCase();
+      if (tag[2] === "/") {
+        if (rawText === name) rawText = null;
+      } else if (rawText == null) {
+        rawText = name;
       }
-    } else if (rawText == null) {
-      rawText = name;
     }
     tag = tags.exec(text);
   }
   const start = text.lastIndexOf("<");
   return {
-    safe: rawText == null && text.endsWith(">"),
+    safe: rawText == null && replaceable === 0 && text.endsWith(">"),
     rawText,
+    replaceable,
     open: start > text.lastIndexOf(">") ? text.slice(start) : "",
   };
 }

package/native-navigation.js

@@ -0,0 +1,217 @@
+// @flow
+import * as React from "react";
+import { Pressable } from "react-native";
+import {
+  CommonActions,
+  NavigationContainer,
+  StackActions,
+  createNavigationContainerRef,
+  useRoute,
+} from "@react-navigation/native";
+import { resolveNativeNavigation, createNativeRouter, createNativeLinking } from "./native.js";
+import type { NativeLinkSource } from "./native.js";
+import type { RouteTable } from "./internal/routing.js";
+import type {
+  NativeLayout,
+  NativeNode,
+  NativeTree,
+  NavigationPayload,
+  NavigationState,
+} from "./internal/native-tree.js";
+import { nativeTree, stateForPath, hrefFromState, paramsForPath } from "./internal/native-tree.js";
+
+export interface NavigatorPair {
+  readonly Navigator: React.ComponentType<{ ... }>;
+  readonly Screen: React.ComponentType<{ ... }>;
+}
+export type FileRouter = {
+  readonly push: (href: string) => void,
+  readonly replace: (href: string) => void,
+  readonly back: () => void,
+  readonly prefetch: (href: string) => Promise<void>,
+};
+type Scope = {
+  tree: NativeTree,
+  node: NativeNode,
+  screens: Map<NativeNode, React.ComponentType<{ ... }>>,
+  stack: NavigatorPair,
+  tabs: ?NavigatorPair,
+  router: FileRouter,
+};
+const ScopeContext: React.Context<Scope | null> = React.createContext(null);
+
+function useScope(): Scope {
+  const scope = React.useContext(ScopeContext);
+  if (scope == null)
+    throw new Error(
+      "Native navigation: mount createNativeNavigation().Root before using its navigator or hooks",
+    );
+  return scope;
+}
+
+/** The application supplies its own React Navigation navigator factories. */
+export function createNativeNavigation(options: {
+  table: RouteTable<>,
+  layouts: $ReadOnlyArray<NativeLayout>,
+  stack: NavigatorPair,
+  tabs?: NavigatorPair,
+  initialHref?: string,
+  links?: NativeLinkSource,
+}): { Root: React.ComponentType<{ ... }>, router: FileRouter, linking: { ... } } {
+  const { table, layouts, stack, tabs } = options;
+  const tree = nativeTree(table, layouts);
+  const ref = createNavigationContainerRef();
+  const screens = new Map<NativeNode, React.ComponentType<{ ... }>>();
+  const resolve = (href: string): { names: $ReadOnlyArray<string>, payload: NavigationPayload } => {
+    const event = resolveNativeNavigation(table, href);
+    const names = tree.paths.get(event.route);
+    if (names == null) throw new Error(`Native navigation: no screen for ${event.route}`);
+    return { names, payload: { ufHref: event.href, ufParams: event.params } };
+  };
+  function actionFor(
+    names: $ReadOnlyArray<string>,
+    payload: NavigationPayload,
+    kind: "push" | "replace",
+  ): { readonly [string]: mixed } {
+    if (!ref.isReady()) throw new Error("Native navigation: NavigationContainer is not ready");
+    let state: NavigationState = ref.getRootState();
+    let depth = 0;
+    while (depth < names.length - 1) {
+      const active = state.routes[state.index ?? 0];
+      if (active?.name !== names[depth] || active?.state == null) break;
+      state = active.state;
+      depth += 1;
+    }
+    const name = names[depth];
+    const params = paramsForPath(names.slice(depth + 1), payload);
+    const action =
+      state.type === "stack"
+        ? StackActions[kind](name, params)
+        : CommonActions.navigate({ name, params });
+    return { ...action, target: state.key };
+  }
+  function navigate(href: string, kind: "push" | "replace"): void {
+    const { names, payload } = resolve(href);
+    ref.dispatch(actionFor(names, payload, kind));
+  }
+  const router: FileRouter = {
+    push: (href) => navigate(href, "push"),
+    replace: (href) => navigate(href, "replace"),
+    back: () => {
+      if (ref.canGoBack()) ref.goBack();
+    },
+    prefetch: createNativeRouter(table, {}).prefetch,
+  };
+  const source = options.links == null ? null : createNativeLinking(table, options.links);
+  const linking = {
+    prefixes: [""],
+    getInitialURL: source?.getInitialURL ?? (async () => null),
+    subscribe: source?.subscribe ?? (() => () => {}),
+    getStateFromPath: (href: string) => {
+      const { names, payload } = resolve(
+        href.startsWith("/") || /^[A-Za-z][A-Za-z0-9+.-]*:/.test(href) ? href : `/${href}`,
+      );
+      return stateForPath(names, payload);
+    },
+    getPathFromState: (state: NavigationState) => hrefFromState(state) ?? "/",
+    getActionFromState: (state: NavigationState) => {
+      const href = hrefFromState(state);
+      if (href == null) return undefined;
+      const { names, payload } = resolve(href);
+      return actionFor(names, payload, "push");
+    },
+  };
+  function build(node: NativeNode): React.ComponentType<{ ... }> {
+    const load = node.module;
+    const Content =
+      load == null
+        ? Stack
+        : React.lazy(async () => {
+            const module: $FlowFixMe = await load();
+            const Component = module.default ?? (node.layout ? module.Layout : module.Page);
+            if (
+              typeof Component !== "function" &&
+              (Component == null || typeof Component !== "object")
+            ) {
+              throw new Error(
+                `Native navigation: ${node.name} must export ${node.layout ? "Layout" : "Page"} or default`,
+              );
+            }
+            return { default: Component };
+          });
+    function Screen(props: { ... }): React.Node {
+      return (
+        <ScopeContext value={{ tree, node, screens, stack, tabs, router }}>
+          <React.Suspense fallback={null}>
+            <Content {...props} />
+          </React.Suspense>
+        </ScopeContext>
+      );
+    }
+    screens.set(node, Screen);
+    for (const child of node.children) build(child);
+    return Screen;
+  }
+  const RootScreen = build(tree.root);
+  const initialState =
+    options.initialHref == null ? undefined : linking.getStateFromPath(options.initialHref);
+  function Root(props: { ... }): React.Node {
+    return (
+      <NavigationContainer {...props} ref={ref} linking={linking} initialState={initialState}>
+        <RootScreen />
+      </NavigationContainer>
+    );
+  }
+  return { Root, router, linking };
+}
+
+/** Any React Navigation navigator can consume this segment's direct children. */
+export component Navigator(navigator: NavigatorPair, ...props: { ... }) {
+  const scope = useScope();
+  const Container = navigator.Navigator;
+  const Screen = navigator.Screen;
+  return (
+    <Container {...props}>
+      {scope.node.children.map((node) => (
+        <Screen key={node.name} name={node.name} component={scope.screens.get(node)} />
+      ))}
+    </Container>
+  );
+}
+
+export component Stack(...props: { ... }) {
+  return <Navigator {...props} navigator={useScope().stack} />;
+}
+
+export component Tabs(...props: { ... }) {
+  const tabs = useScope().tabs;
+  if (tabs == null)
+    throw new Error("Native navigation: supply the app's tab navigator to createNativeNavigation");
+  return <Navigator {...props} navigator={tabs} />;
+}
+
+export function useNativeRouter(): FileRouter {
+  return useScope().router;
+}
+export function useParams(): { readonly [string]: string | $ReadOnlyArray<string> } {
+  const route = useRoute();
+  return route.params?.ufParams ?? {};
+}
+
+export component Link(
+  href: string,
+  children: React.Node,
+  replace: boolean = false,
+  ...props: { ... }
+) {
+  const router = useNativeRouter();
+  return (
+    <Pressable
+      {...props}
+      accessibilityRole="link"
+      onPress={() => (replace ? router.replace(href) : router.push(href))}
+    >
+      {children}
+    </Pressable>
+  );
+}