@uniflowed/router 0.0.0-alpha.33 → 0.0.0-alpha.34

package/index.js

@@ -22,6 +22,12 @@
 // URL the page is, so one URL renders two subtrees at once, and
 // `$default.js` is what a slot renders when the URL matched none of its
 // routes. See ubugeeei-prod/uf#267.
+//
+// A directory named `(.)photo` inside a slot is an intercepting route: a client
+// navigation that starts on a page the slot is on, and reaches the URL the
+// directory stands in for, renders it in the slot and leaves the page
+// underneath where it was. A document request for that URL — a reload, a
+// shared link, a prerender — renders the ordinary page.
 
 import * as React from "react";
 
@@ -31,6 +37,7 @@ export type {
   AppProps,
   ErrorBoundary,
   ErrorModule,
+  Interception,
   JsonLd,
   LayoutModule,
   LinkPrefetch,

package/internal/routing.js

@@ -52,6 +52,26 @@ export type SlotRecord<
   readonly defaultMdx?: boolean,
   readonly defaultErrorBoundary?: ?SlotErrorBoundaryRecord<TError>,
   readonly routes: $ReadOnlyArray<SlotRouteRecord<TPage, TLayout, TTemplate, TLoading, TError>>,
+  /**
+   * The routes this slot renders when a client navigation *intercepts* the URL
+   * each one names — `app/feed/@modal/(.)photo/[id]/$page.js` is the one for
+   * `/feed/photo/:id` — keyed by that URL.
+   *
+   * A second list rather than a flag on `routes`, because the two are read by
+   * different callers at different times and neither may see the other's.
+   * `routes` is matched against every URL the segment renders, by the server and
+   * by the browser alike. These are matched only by a navigation that starts on
+   * a page this slot is already rendered on, and nothing on a server reads them
+   * — which is the whole of why a document request for an intercepted URL
+   * renders the ordinary page. `resolveInterception`, beside the rest of the
+   * rendering, is the one reader.
+   *
+   * Absent on a slot that intercepts nothing, which is every slot a table
+   * written before interception existed.
+   */
+  readonly intercepts?: $ReadOnlyArray<
+    SlotRouteRecord<TPage, TLayout, TTemplate, TLoading, TError>,
+  >,
 |};
 
 /** One page inside a slot. */

package/internal/runtime.js

@@ -605,6 +605,41 @@ export type ResolvedRoute = {|
    * belongs to the segment the walk went through.
    */
   readonly slots: $ReadOnlyArray<ResolvedSlot>,
+  /**
+   * Set when a client navigation was intercepted: this is then the route the
+   * navigation came from, still on screen, with the intercepting route in one
+   * of its slots.
+   *
+   * `null` or absent on every other resolution — which includes every one a
+   * server makes, because a document request is never intercepted. See
+   * [`resolveInterception`].
+   */
+  readonly interception?: ?Interception,
+|};
+
+/**
+ * What an intercepted navigation went to, and what it went there from.
+ *
+ * A route is resolved *for* a URL, and an intercepted navigation is the one
+ * case where the URL in the address bar is not the URL the page on screen was
+ * resolved for. The `ResolvedRoute` that carries this is the page the
+ * navigation started on — its `pathname`, `params` and `data` are that page's,
+ * because that page is what `children` still renders and what `useRoute()`
+ * still describes — and this is the other half: where the address bar went.
+ *
+ * `base` is the same page as it was before anything intercepted it. Kept rather
+ * than re-derived, because a second interception from inside the first — the
+ * next photo, from a photo already open in the modal — has to start from the
+ * page underneath rather than from a page that already has a modal in it, and
+ * going back from the second to the first has to find that page where it left
+ * it.
+ */
+export type Interception = {|
+  /** The URL the navigation went to: the one in the address bar. */
+  readonly pathname: string,
+  readonly search: string,
+  /** The route the navigation came from, as it was before it was intercepted. */
+  readonly base: ResolvedRoute,
 |};
 
 /**
@@ -629,6 +664,32 @@ export type ResolvedSlot = {|
   readonly templates: $ReadOnlyArray<ResolvedTemplate>,
   readonly errorBoundary: ?ResolvedSlotErrorBoundary,
   readonly slots: $ReadOnlyArray<ResolvedSlot>,
+  /**
+   * The table record this slot was resolved from.
+   *
+   * Carried so a client navigation can ask the slots *on screen* whether they
+   * intercept where it is going. Interception is a question about the page a
+   * navigation starts on, and this is that page's own answer rather than a
+   * second match of the table that could arrive at different slots. Absent on
+   * a slot written by hand, which then intercepts nothing.
+   */
+  readonly record?: SlotRecord,
+  /**
+   * Set when this slot renders an intercepting route, or sits inside one: the
+   * URL that was intercepted.
+   *
+   * The slot's keys and its page's `searchParams` come from here rather than
+   * from the route on screen, because the route on screen is the page the
+   * navigation started on. Keying the modal's templates on that page's
+   * pathname would leave the second photo mounted as the first one.
+   */
+  readonly intercepted?: ?InterceptedUrl,
+|};
+
+/** The URL an intercepting route was matched against. */
+type InterceptedUrl = {|
+  readonly pathname: string,
+  readonly searchParams: SearchParams,
 |};
 
 // ---------------------------------------------------------------------------
@@ -863,12 +924,15 @@ async function resolveSlots(
   pathname: string,
   layoutCount: number,
   fallbackParams: RouteParams,
+  intercepted?: ?InterceptedUrl,
 ): Promise<$ReadOnlyArray<ResolvedSlot>> {
   if (records.length === 0) {
     return [];
   }
   return Promise.all(
-    records.map((record) => resolveSlot(record, pathname, layoutCount, fallbackParams)),
+    records.map((record) =>
+      resolveSlot(record, pathname, layoutCount, fallbackParams, intercepted),
+    ),
   );
 }
 
@@ -877,6 +941,7 @@ async function resolveSlot(
   pathname: string,
   layoutCount: number,
   fallbackParams: RouteParams,
+  intercepted?: ?InterceptedUrl,
 ): Promise<ResolvedSlot> {
   // Clamped exactly as a template's `above` is, and for the same reason: a
   // hand-written table, or a `(group)` between the layout and the route, can
@@ -892,6 +957,8 @@ async function resolveSlot(
     templates: [],
     errorBoundary: null,
     slots: [],
+    record,
+    intercepted,
   };
 
   const matched = matchIn(record.routes, pathname);
@@ -913,6 +980,31 @@ async function resolveSlot(
     };
   }
 
+  return (await resolveSlotRoute(record, matched, above, pathname, intercepted)) ?? empty;
+}
+
+/**
+ * One route inside a slot, imported: what the slot renders for a match.
+ *
+ * Shared by the two ways a slot comes to render a route — one of its own
+ * `routes`, matched against the URL, and one of its `intercepts`, matched
+ * against where a client navigation is going — so an intercepting page is
+ * composed exactly the way every other slot page is: inside its own layouts,
+ * fallbacks, templates and error boundary, with the slots those layouts
+ * declare.
+ *
+ * `null` when the page or a layout will not import, and what that means is the
+ * caller's to say. For a match it is an empty slot, for the reason
+ * [`resolveSlots`] gives; for an interception it is no interception, and the
+ * navigation goes where the URL says instead.
+ */
+async function resolveSlotRoute(
+  record: SlotRecord,
+  matched: RoutingRouteMatch<SlotRouteRecord>,
+  above: number,
+  pathname: string,
+  intercepted: ?InterceptedUrl,
+): Promise<?ResolvedSlot> {
   const route = matched.route;
   // Started together and awaited apart, so the two `await`s are not a
   // waterfall and each keeps the type its loader had.
@@ -921,11 +1013,11 @@ async function resolveSlot(
   const page = await pending;
   const layouts = await pendingLayouts;
   if (page == null) {
-    return empty;
+    return null;
   }
   const loaded = layouts.filter(Boolean);
   if (loaded.length !== layouts.length) {
-    return empty;
+    return null;
   }
   const loading = await resolveLoadingRecords(route.loading ?? [], loaded.length);
   const templates = await resolveTemplateRecords(route.templates ?? [], loaded.length);
@@ -940,11 +1032,199 @@ async function resolveSlot(
     templates,
     errorBoundary,
     // The slot's own layouts are what a nested slot is measured against, so
-    // the count handed down is this slot's rather than the route's.
-    slots: await resolveSlots(route.slots, pathname, loaded.length, matched.params),
+    // the count handed down is this slot's rather than the route's. A slot
+    // nested inside an interception is matched against the intercepted URL,
+    // and keyed on it, for the same reason the interception is.
+    slots: await resolveSlots(route.slots, pathname, loaded.length, matched.params, intercepted),
+    record,
+    intercepted,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Interception
+// ---------------------------------------------------------------------------
+
+/**
+ * The page underneath: `resolved` itself, or what it was before an interception
+ * put something in one of its slots.
+ *
+ * Every question about where a navigation *starts* is asked of this rather than
+ * of the route on screen, because an interception is not a place a navigation
+ * can start from. The next photo, opened from inside the modal, is intercepted
+ * from the feed.
+ */
+function beneath(resolved: ResolvedRoute): ResolvedRoute {
+  return resolved.interception?.base ?? resolved;
+}
+
+/**
+ * The intercepting routes the slots on screen have for `pathname`.
+ *
+ * Only the slots on screen, and that is the whole of what "a navigation from
+ * inside `/feed`" means. A page under `app/feed/$layout.js` renders the layout
+ * that declares `@modal`, so the slot is in its tree and so are the slot's
+ * `intercepts`. A page outside that segment has no such slot in its tree —
+ * which is why a link to `/feed/photo/1` from `/about` is an ordinary
+ * navigation to the photo page, not an interception with nowhere to render.
+ *
+ * A slot that intercepts `pathname` is not looked inside: what it holds is
+ * about to be replaced, nested slots and all.
+ */
+function interceptingRoutes(
+  slots: $ReadOnlyArray<ResolvedSlot>,
+  pathname: string,
+): $ReadOnlyArray<SlotRouteRecord> {
+  const found: Array<SlotRouteRecord> = [];
+  for (const slot of slots) {
+    const matched = matchIn(slot.record?.intercepts ?? [], pathname);
+    if (matched != null) {
+      found.push(matched.route);
+    } else {
+      found.push(...interceptingRoutes(slot.slots, pathname));
+    }
+  }
+  return found;
+}
+
+/**
+ * `base`, with every slot on it that intercepts `url` rendering what it
+ * intercepts — or `null` when none of them does.
+ *
+ * # What stays, and what does not
+ *
+ * Everything that is not an intercepting slot stays exactly as it was, and that
+ * is the feature rather than a shortcut. `children` goes on rendering the page
+ * the reader navigated *from* — its data, its scroll position, whatever state
+ * its components are holding — and every other slot keeps what it was showing.
+ * An intercepted navigation changes the address bar and the slots that
+ * intercept it, and nothing else. Matching the rest against the new URL would
+ * be an ordinary navigation with a modal on top of it: the page underneath
+ * swapped for the page the URL names, which is precisely what interception
+ * exists not to do.
+ *
+ * Every slot that intercepts the URL renders it, not only the first, because
+ * slots are independent of each other: two named places may each have
+ * something to show for one URL, the way two slots each match one URL by their
+ * own routes.
+ *
+ * # Never on a server
+ *
+ * Nothing on the server calls this. A document request for an intercepted URL
+ * resolves the ordinary page, because a request carries where it is going and
+ * not what was on screen when it was made — which is what a reload, a shared
+ * link and a crawler all are.
+ *
+ * # When the interception cannot render
+ *
+ * A slot whose intercepting page will not import keeps what it had, and when no
+ * slot could render the interception this answers `null`: the navigation goes
+ * ahead as an ordinary one, and the reader gets the page the URL names — what a
+ * reload would have given them — rather than a click that did nothing. An
+ * intercepting page that exports a `loader`, which no slot page may, is the
+ * error boundary for the URL, the way any other slot page's is.
+ */
+async function resolveInterception(
+  table: RouteTable,
+  base: ResolvedRoute,
+  url: string,
+): Promise<?ResolvedRoute> {
+  const { pathname, search } = splitUrl(url);
+  const intercepted: InterceptedUrl = { pathname, searchParams: parseSearch(search) };
+  // The first slot that renders the interception, for the transition's name.
+  let first: ?ResolvedSlot = null;
+  const visit = (slots: $ReadOnlyArray<ResolvedSlot>): Promise<$ReadOnlyArray<ResolvedSlot>> =>
+    Promise.all(
+      slots.map(async (slot): Promise<ResolvedSlot> => {
+        const record = slot.record;
+        const matched = record == null ? null : matchIn(record.intercepts ?? [], pathname);
+        if (record == null || matched == null) {
+          return slot.slots.length === 0 ? slot : { ...slot, slots: await visit(slot.slots) };
+        }
+        const rendered = await resolveSlotRoute(record, matched, slot.above, pathname, intercepted);
+        if (rendered == null) {
+          return slot;
+        }
+        first = first ?? rendered;
+        return rendered;
+      }),
+    );
+
+  let slots: $ReadOnlyArray<ResolvedSlot>;
+  try {
+    slots = await visit(base.slots);
+  } catch (error) {
+    return resolveFailure(table, url, error);
+  }
+  if (first == null) {
+    return null;
+  }
+  return {
+    ...base,
+    slots,
+    // The intercepting page's own name, where it or a layout inside the slot
+    // declares one, so a stylesheet can tell a modal opening from a page
+    // arriving. The page underneath has not moved, so its name would say
+    // nothing about this arrival.
+    viewTransition: resolveViewTransition(first.page ?? {}, first.layouts),
+    interception: { pathname, search, base },
   };
 }
 
+/**
+ * The key an intercepted navigation writes into its history entry.
+ *
+ * One string in `history.state` rather than the resolved route, because the
+ * browser structured-clones the state and keeps it across a reload: it can hold
+ * a URL and nothing with a module in it. A URL is also all the entry needs —
+ * where the navigation came from, resolved again when that page is not the one
+ * on screen, and the entry's own URL for what intercepted it.
+ */
+const INTERCEPTED_FROM = "uf:intercepted-from";
+
+/**
+ * The state a history entry for `resolved` is written with.
+ *
+ * `null` for a navigation nothing intercepted, which is what every entry this
+ * router wrote was before interception existed.
+ */
+function historyStateFor(resolved: ResolvedRoute): mixed {
+  const interception = resolved.interception;
+  if (interception == null) {
+    return null;
+  }
+  return { [INTERCEPTED_FROM]: interception.base.pathname + interception.base.search };
+}
+
+/** 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)) {
+    return null;
+  }
+  const from = state[INTERCEPTED_FROM];
+  return typeof from === "string" ? from : null;
+}
+
+/**
+ * `state` without the interception in it.
+ *
+ * What is left is handed back rather than cleared, because an entry's state is
+ * not only this router's to write: another library may have put something
+ * beside it.
+ */
+function withoutInterception(state: mixed): mixed {
+  if (state == null || typeof state !== "object" || Array.isArray(state)) {
+    return state;
+  }
+  const rest: { [string]: mixed } = {};
+  for (const key of Object.keys(state)) {
+    if (key !== INTERCEPTED_FROM) {
+      rest[key] = state[key];
+    }
+  }
+  return Object.keys(rest).length === 0 ? null : rest;
+}
+
 async function resolveSlotErrorBoundary(
   boundary: ?SlotErrorBoundaryLoader,
   layoutCount: number,
@@ -1883,6 +2163,20 @@ export component RouterProvider(url: string, initial: ResolvedRoute, children: R
   // that asked at click time would be asking a question whose answer decided
   // what it rendered.
   const navigation = navigationMode();
+  // The route on screen, for the code that runs after a render has finished.
+  //
+  // State is what renders, and a closure only sees the state of the render that
+  // made it: the `popstate` listener below is installed once and would go on
+  // reading the first route forever, and a navigation awaits between reading
+  // what is on screen and replacing it. Interception is what needs the answer —
+  // 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 show = (next: ResolvedRoute) => {
+    shown.current = next;
+    setResolved(next);
+  };
 
   const navigate = async (to: string, options?: NavigateOptions): Promise<void> => {
     if (!isBrowser()) {
@@ -1903,6 +2197,13 @@ export component RouterProvider(url: string, initial: ResolvedRoute, children: R
       }
       return;
     }
+    // Interception first, because it is a question about the page this
+    // navigation starts on rather than about the one it reaches. A slot on
+    // screen that intercepts the URL renders a page of its own, so whether the
+    // URL's ordinary page is in this bundle — the paragraph below — is not a
+    // question this navigation has to ask.
+    const origin = beneath(shown.current);
+    const intercepting = interceptingRoutes(origin.slots, target.pathname).length > 0;
     // The half of the split that is not about bytes. A route whose page is not
     // in this bundle is not a route this router can render, and pretending
     // otherwise is the silent break: the navigation would resolve to nothing
@@ -1910,21 +2211,29 @@ export component RouterProvider(url: string, initial: ResolvedRoute, children: R
     // has the document, so the browser does the navigation — which is what a
     // link does when there is no JavaScript at all, and what the anchor
     // `Link` renders would have done on its own.
-    const matched = matchRoute(routeTable().routes, target.pathname);
-    if (matched != null && !hasClientPage(matched.route)) {
-      window.location.assign(target.href);
-      return;
+    if (!intercepting) {
+      const matched = matchRoute(routeTable().routes, target.pathname);
+      if (matched != null && !hasClientPage(matched.route)) {
+        window.location.assign(target.href);
+        return;
+      }
     }
     setPending(true);
     try {
-      const nextResolved = await resolveMatch(routeTable(), next);
+      const nextResolved =
+        (intercepting ? await resolveInterception(routeTable(), origin, next) : null) ??
+        (await resolveMatch(routeTable(), next));
+      // An intercepted entry remembers where it was intercepted from, so back
+      // and forward can put the page underneath under it again. Every other
+      // entry is written the way it always was.
+      const state = historyStateFor(nextResolved);
       if (options?.replace === true) {
-        window.history.replaceState(null, "", next + target.hash);
+        window.history.replaceState(state, "", next + target.hash);
       } else {
-        window.history.pushState(null, "", next + target.hash);
+        window.history.pushState(state, "", next + target.hash);
       }
       const commit = () => {
-        setResolved(nextResolved);
+        show(nextResolved);
         setPending(false);
       };
       if (options?.transition === false) {
@@ -1932,7 +2241,13 @@ export component RouterProvider(url: string, initial: ResolvedRoute, children: R
       } else {
         withViewTransition(nextResolved.viewTransition, commit);
       }
-      if (options?.scroll !== false) {
+      // An intercepted navigation leaves the page underneath where the reader
+      // left it — the modal opens over the post they clicked, not over the top
+      // of the feed — so it moves the window only for a caller who asks with
+      // `scroll: true`. Every other navigation scrolls unless asked not to.
+      const scroll =
+        nextResolved.interception == null ? options?.scroll !== false : options?.scroll === true;
+      if (scroll) {
         if (target.hash !== "") {
           const element = document.getElementById(target.hash.slice(1));
           if (element != null) {
@@ -1952,6 +2267,16 @@ export component RouterProvider(url: string, initial: ResolvedRoute, children: R
     if (!isBrowser()) {
       return undefined;
     }
+    // An entry that says it was intercepted, under a provider that has only
+    // just mounted, is an entry the browser reloaded or restored — and the
+    // document on screen is what a request for its URL returned, which is the
+    // ordinary page. Clearing the mark makes the entry say what the reader is
+    // looking at, so coming back to it later renders this page again rather
+    // than a modal over a page they never saw one on.
+    const restored = window.history.state;
+    if (interceptedFrom(restored) != null) {
+      window.history.replaceState(withoutInterception(restored), "", window.location.href);
+    }
     // Nothing pushed a history entry, so there is nothing to pop back into: a
     // document-navigating application left this page when the link was
     // followed, and the back button asks the browser for the previous document
@@ -1961,8 +2286,37 @@ export component RouterProvider(url: string, initial: ResolvedRoute, children: R
     if (navigation === "document") {
       return undefined;
     }
+    const arrive = (nextResolved: ResolvedRoute) => {
+      // The back button is a navigation, and a navigation that animates in
+      // one direction and cuts in the other would read as a bug in the
+      // animation rather than as a decision.
+      withViewTransition(nextResolved.viewTransition, () => {
+        show(nextResolved);
+      });
+    };
     const onPopState = () => {
       const next = window.location.pathname + window.location.search;
+      // Back or forward into an entry an interception wrote: the page it was
+      // intercepted from, with the interception over it again. That page is
+      // resolved afresh only when it is not already the one underneath, so
+      // back from the second photo to the first leaves the feed exactly where
+      // it is.
+      const from = interceptedFrom(window.history.state);
+      if (from != null) {
+        const underneath = beneath(shown.current);
+        const origin =
+          underneath.pathname + underneath.search === from
+            ? Promise.resolve(underneath)
+            : resolveMatch(routeTable(), from);
+        origin
+          .then((page) => resolveInterception(routeTable(), page, next))
+          // Nothing on that page intercepts the entry's URL any more — a
+          // module that will not load, a table a development server rebuilt —
+          // so the entry is what its URL names.
+          .then((intercepted) => intercepted ?? resolveMatch(routeTable(), next))
+          .then(arrive);
+        return;
+      }
       // Back into a route this bundle has no page for. The history entry is
       // already the browser's — it moved before this listener ran — so the
       // document that belongs to it is what has to be fetched.
@@ -1971,14 +2325,7 @@ export component RouterProvider(url: string, initial: ResolvedRoute, children: R
         window.location.reload();
         return;
       }
-      resolveMatch(routeTable(), next).then((nextResolved) => {
-        // The back button is a navigation, and a navigation that animates in
-        // one direction and cuts in the other would read as a bug in the
-        // animation rather than as a decision.
-        withViewTransition(nextResolved.viewTransition, () => {
-          setResolved(nextResolved);
-        });
-      });
+      resolveMatch(routeTable(), next).then(arrive);
     };
     window.addEventListener("popstate", onPopState);
     return () => {
@@ -1999,6 +2346,19 @@ export component RouterProvider(url: string, initial: ResolvedRoute, children: R
         return;
       }
       const target = new URL(to, window.location.href);
+      // What the next render will need is decided the way the navigation will
+      // decide it: a URL a slot on screen intercepts renders that slot's page,
+      // so that is the module worth having, and the page the URL names is not.
+      const intercepting = interceptingRoutes(beneath(shown.current).slots, target.pathname);
+      if (intercepting.length > 0) {
+        await Promise.all(
+          intercepting.flatMap((route) => [
+            loadOnce(route.page),
+            ...route.layouts.map((layout) => loadOnce(layout)),
+          ]),
+        );
+        return;
+      }
       const matched = matchRoute(routeTable().routes, target.pathname);
       const load = matched?.route.page;
       if (matched == null || load == null) {
@@ -2021,16 +2381,28 @@ export component RouterProvider(url: string, initial: ResolvedRoute, children: R
         window.location.reload();
         return;
       }
-      const nextResolved = await resolveMatch(
-        routeTable(),
-        window.location.pathname + window.location.search,
-      );
+      // A refresh of an intercepted page refreshes both of its halves: the
+      // page underneath, resolved again for its own URL, and the interception
+      // resolved again over it. Resolving only the address bar's URL would
+      // close the modal, which is a navigation nobody asked for.
+      const interception = shown.current.interception;
+      const nextResolved =
+        interception == null
+          ? await resolveMatch(routeTable(), window.location.pathname + window.location.search)
+          : ((await resolveInterception(
+              routeTable(),
+              await resolveMatch(
+                routeTable(),
+                interception.base.pathname + interception.base.search,
+              ),
+              interception.pathname + interception.search,
+            )) ?? (await resolveMatch(routeTable(), interception.pathname + interception.search)));
       // No view transition, and it is the one place that is right: a refresh
       // is the same URL resolved again, so a transition would animate a page
       // into itself — a cross-fade between two frames of the same thing,
       // which is a flicker with a name.
       startTransition(() => {
-        setResolved(nextResolved);
+        show(nextResolved);
       });
     },
     back: () => {
@@ -2669,12 +3041,19 @@ component SlotView(slot: ResolvedSlot) {
   if (page == null) {
     return null;
   }
+  // Except in an interception, whose URL is not the one the route on screen was
+  // resolved for. The page it renders reads the intercepted URL's query, and
+  // its templates and error boundary are keyed on the intercepted pathname — so
+  // a second photo opened in the modal remounts what the first one mounted, the
+  // way a navigation between two pages does.
+  const pathname = slot.intercepted?.pathname ?? resolved.pathname;
+  const searchParams = slot.intercepted?.searchParams ?? resolved.searchParams;
   const Page = pageComponent(page);
   let element: React.Node = (
-    <Page params={slot.params} searchParams={resolved.searchParams} data={undefined} />
+    <Page params={slot.params} searchParams={searchParams} data={undefined} />
   );
   const templateContext = {
-    pathname: resolved.pathname,
+    pathname,
     params: slot.params,
     templates: slot.templates,
   };
@@ -2690,10 +3069,7 @@ component SlotView(slot: ResolvedSlot) {
     const errorBoundary = slot.errorBoundary;
     if (errorBoundary != null && errorBoundary.above === depth) {
       element = (
-        <RouteErrorBoundary
-          module={errorBoundary.module}
-          resetKey={`${resolved.pathname}:${slot.name}`}
-        >
+        <RouteErrorBoundary module={errorBoundary.module} resetKey={`${pathname}:${slot.name}`}>
           {element}
         </RouteErrorBoundary>
       );

package/native.js

@@ -8,6 +8,23 @@
 // native bundle cannot render, and hands a navigator-shaped event to the app's
 // own navigation runtime. Rendering the tree is still the renderer/host-config
 // half of the React Native target.
+//
+// # No interception here, deliberately
+//
+// An intercepting route — a slot's `(.)photo` — is not one of this adapter's
+// features, and that is a decision rather than a gap. What interception does
+// is a browser's: the address bar says `/feed/photo/1` while the page
+// underneath stays on screen with the photo in a slot over it, and a reload
+// renders the page the URL names instead. A native navigator has no address bar
+// for the screen to disagree with, and it already has the thing interception
+// imitates — a screen presented modally over the one below it, with its own
+// back gesture. Doing both would give a native app two answers to "open this
+// over the feed", one of them the router's and one the navigator's.
+//
+// So `resolveNativeNavigation` matches `table.routes` and nothing else:
+// `/feed/photo/1` resolves to the ordinary `app/feed/photo/[id]` route every
+// time, a slot's `intercepts` are never read, and presenting that screen as a
+// modal is the navigator's call, made where the rest of its presentation is.
 
 import type { RouteParams, RouteRecord, RouteTable } from "./internal/routing.js";
 import { hasClientPage, matchRoute, splitUrl } from "./internal/routing.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniflowed/router",
-  "version": "0.0.0-alpha.33",
+  "version": "0.0.0-alpha.34",
   "description": "The file-system router for Flow React applications: matching, layouts, loaders, navigation, server rendering and hydration.",
   "type": "module",
   "license": "MIT",
@@ -38,7 +38,7 @@
     "react-dom": ">=19"
   },
   "dependencies": {
-    "@uniflowed/hooks": "0.0.0-alpha.33",
-    "@uniflowed/server": "0.0.0-alpha.33"
+    "@uniflowed/hooks": "0.0.0-alpha.34",
+    "@uniflowed/server": "0.0.0-alpha.34"
   }
 }

package/server.js

@@ -181,13 +181,13 @@ export { DATA_ID, ROOT_ID } from "./internal/document.js";
  *
  * Re-exported rather than left to the host to import, and the reason is the
  * one thing about `@uniflowed/server` that is easy to get wrong: the request
- * lives in an `AsyncLocalStorage` belonging to *that module instance*. A host
- * that resolved `@uniflowed/server/host` for itself — from its own
- * `node_modules`, or from outside the bundle a build produced — would begin a
- * request in a second storage, and every `cookies()` in the application would
- * still be outside one, silently. Handing it out from here makes the copy the
- * host begins with the copy this module dispatches and renders with, because
- * it is the same import.
+ * store is shared by every copy of one *release* of that package, and no more.
+ * A host that resolved `@uniflowed/server/host` for itself — from its own
+ * `node_modules`, or from outside the bundle a build produced — may hold a
+ * different release, and would begin a request in a store the application
+ * never reads, so every `cookies()` in it would still be outside one, silently.
+ * Handing it out from here makes the copy the host begins with the copy this
+ * module dispatches and renders with, because it is the same import.
  *
  * `run` wraps everything that decides the response; `settle` is called once
  * the response has been *written*, which is a different line in every host.