@timber-js/app 0.2.0-alpha.16 → 0.2.0-alpha.161

package/src/client/router.ts

@@ -4,11 +4,20 @@
 import { SegmentCache, PrefetchCache, buildSegmentTree } from './segment-cache';
 import type { SegmentInfo } from './segment-cache';
 import { HistoryStack } from './history';
-import type { HeadElement } from './head';
-import { setCurrentParams } from './use-params.js';
-import { setNavigationState } from './navigation-context.js';
-import { SegmentElementCache, cacheSegmentElements, mergeSegmentTree } from './segment-merger.js';
-import { fetchRscPayload, RedirectError } from './rsc-fetch.js';
+import { setCurrentParams } from './use-segment-params.js';
+import {
+  setNavigationState,
+  getNavigationState,
+  type NavigationState,
+} from './navigation-context.js';
+
+import {
+  fetchRscPayload,
+  RedirectError,
+  ServerErrorResponse,
+  VersionSkewError,
+} from './rsc-fetch.js';
+import { setHardNavigating, supersedeNavigationTransitions } from './navigation-root.js';
 import type { FetchResult } from './rsc-fetch.js';
 
 // ─── Types ───────────────────────────────────────────────────────
@@ -18,6 +27,19 @@ export interface NavigationOptions {
   scroll?: boolean;
   /** Use replaceState instead of pushState (replaces current history entry) */
   replace?: boolean;
+  /**
+   * @internal AbortSignal from the Navigation API's NavigateEvent.
+   * When provided, the signal is linked to the router's per-navigation
+   * AbortController so in-flight RSC fetches are cancelled when a new
+   * navigation starts.
+   */
+  _signal?: AbortSignal;
+  /**
+   * @internal Skip pushState/replaceState — the Navigation API has already
+   * updated the URL via event.intercept(). Used for external navigations
+   * intercepted by the navigate event handler.
+   */
+  _skipHistory?: boolean;
 }
 
 /**
@@ -31,8 +53,12 @@ export type RscDecoder = (fetchPromise: Promise<Response>) => unknown;
  * Function that renders a decoded RSC element tree into the DOM.
  * In production: reactRoot.render(element).
  * In tests: a no-op or mock.
+ *
+ * Receives the current NavigationState explicitly — no temporal
+ * coupling with setNavigationState/getNavigationState. The renderer
+ * wraps the element in NavigationProvider with this state.
  */
-export type RootRenderer = (element: unknown) => void;
+export type RootRenderer = (element: unknown, navState: NavigationState) => void;
 
 /**
  * Platform dependencies injected for testability. In production these
@@ -55,8 +81,6 @@ export interface RouterDeps {
    * In tests, this runs the callback synchronously.
    */
   afterPaint?: (callback: () => void) => void;
-  /** Apply resolved head elements (title, meta tags) to the DOM after navigation. */
-  applyHead?: (elements: HeadElement[]) => void;
   /**
    * Run a navigation inside a React transition with optimistic pending URL.
    * The pending URL shows immediately (useOptimistic urgent update) and
@@ -64,14 +88,73 @@ export interface RouterDeps {
    *
    * The `perform` callback receives a `wrapPayload` function to wrap the
    * decoded RSC payload with NavigationProvider + NuqsAdapter before
-   * TransitionRoot sets it as the new element.
+   * NavigationRoot sets it as the new element. The `wrapPayload` function
+   * receives the NavigationState explicitly — no temporal coupling with
+   * getNavigationState().
    *
    * If not provided (tests), the router falls back to renderRoot.
    */
   navigateTransition?: (
     pendingUrl: string,
-    perform: (wrapPayload: (payload: unknown) => unknown) => Promise<unknown>
+    perform: (
+      wrapPayload: (
+        payload: unknown,
+        navState: NavigationState,
+        segmentUpdates?: Map<string, unknown>
+      ) => unknown
+    ) => Promise<{ element: unknown; decodePromise: Promise<void> | null }>
   ) => Promise<void>;
+
+  /**
+   * Whether the Navigation API is active and handling traversals.
+   * When true, the popstate handler is a no-op — the Navigation API's
+   * navigate event covers back/forward button presses.
+   */
+  navigationApiActive?: boolean;
+
+  /**
+   * Called around pushState/replaceState to set a flag that prevents
+   * the Navigation API's navigate listener from double-handling
+   * router-initiated navigations.
+   */
+  setRouterNavigating?: (value: boolean) => void;
+
+  /**
+   * Save scroll position via the Navigation API's per-entry state.
+   * When provided, used instead of history.replaceState for scroll storage.
+   */
+  saveNavigationEntryScroll?: (scrollY: number) => void;
+
+  /**
+   * Signal that a router-initiated navigation has completed. Resolves the
+   * deferred promise that ties the browser's native loading state to the
+   * navigation lifecycle. Called in the finally block of navigate/refresh,
+   * aligned with when the TopLoader's pendingUrl clears.
+   */
+  completeRouterNavigation?: () => void;
+
+  /**
+   * Get the current unwrapped RSC payload element. Used for partial
+   * navigation: the router re-wraps the same element with new
+   * NavigationProvider context so mounted SegmentOutlets are preserved.
+   */
+  _getCurrentPayload?: () => unknown;
+
+  /**
+   * Initiate a navigation via the Navigation API (`navigation.navigate()`).
+   * Fires the navigate event BEFORE committing the URL, allowing Chrome
+   * to show its native loading indicator. Falls back to pushState when
+   * unavailable.
+   */
+  navigationNavigate?: (url: string, replace: boolean) => void;
+
+  /**
+   * Scroll the element matching a URL #fragment into view. Returns true
+   * when a matching element was found and scrolled. When absent or false,
+   * the router falls back to scroll-to-top on forward navigation — same
+   * as a full page load with an unknown fragment landing at the top.
+   */
+  scrollToHash?: (hash: string) => boolean;
 }
 
 export interface RouterInstance {
@@ -80,7 +163,7 @@ export interface RouterInstance {
   /** Full re-render of the current URL — no state tree sent */
   refresh(): Promise<void>;
   /** Handle a popstate event (back/forward button). scrollY is read from history.state. */
-  handlePopState(url: string, scrollY?: number): Promise<void>;
+  handlePopState(url: string, scrollY?: number, externalSignal?: AbortSignal): Promise<void>;
   /** Whether a navigation is currently in flight */
   isPending(): boolean;
   /** The URL currently being navigated to, or null if idle */
@@ -94,18 +177,13 @@ export interface RouterInstance {
    * Renders the element tree and updates head elements without a server fetch.
    * See design/08-forms-and-actions.md §"Single-Roundtrip Revalidation".
    */
-  applyRevalidation(element: unknown, headElements: HeadElement[] | null): void;
+  applyRevalidation(element: unknown): void;
   /**
    * Populate the segment cache from server-provided segment metadata.
    * Called on initial hydration with segment info embedded in the HTML.
    */
   initSegmentCache(segments: SegmentInfo[]): void;
-  /**
-   * Cache segment elements from a decoded RSC element tree.
-   * Called on initial hydration to populate the element cache so the
-   * first client navigation can use partial payloads.
-   */
-  cacheElementTree(element: unknown): void;
+
   /** The segment cache (exposed for tests and <Link> prefetch) */
   segmentCache: SegmentCache;
   /** The prefetch cache (exposed for tests and <Link> prefetch) */
@@ -130,24 +208,83 @@ function isAbortError(error: unknown): boolean {
  * Create a router instance. In production, called once at app hydration
  * with real browser APIs. In tests, called with mock dependencies.
  */
+/**
+ * Router navigation phase — discriminated union replacing scattered
+ * `pending` + `pendingUrl` boolean flags.
+ *
+ * - `idle`: No navigation in flight. The committed params/pathname
+ *   are current.
+ * - `navigating`: A fetch or render is in progress. `targetUrl` is
+ *   the destination being navigated to.
+ */
+export type RouterPhase = { phase: 'idle' } | { phase: 'navigating'; targetUrl: string };
+
 export function createRouter(deps: RouterDeps): RouterInstance {
   const segmentCache = new SegmentCache();
   const prefetchCache = new PrefetchCache();
   const historyStack = new HistoryStack();
-  const segmentElementCache = new SegmentElementCache();
-
-  let pending = false;
-  let pendingUrl: string | null = null;
+  let routerPhase: RouterPhase = { phase: 'idle' };
   const pendingListeners = new Set<(pending: boolean) => void>();
 
+  // AbortController for the current in-flight navigation.
+  // When a new navigation starts, the previous controller is aborted,
+  // cancelling any in-progress RSC fetch. This provides automatic
+  // cancellation of stale fetches regardless of Navigation API support.
+  let currentNavAbort: AbortController | null = null;
+
+  /**
+   * Create a new AbortController for a navigation, superseding any
+   * previous in-flight navigation. Optionally links to an external
+   * signal (e.g., from the Navigation API's NavigateEvent.signal).
+   *
+   * Superseding is one operation with three parts:
+   * 1. Abort the previous navigation's fetch.
+   * 2. Invalidate its render transition so a response that already
+   *    arrived can't commit a stale tree (NavigationRoot's transId guard).
+   * 3. Resolve its Navigation API deferred — the superseded navigation's
+   *    finally block is staleness-guarded (see TIM-1034) and no longer
+   *    cleans up after itself, so the browser's native loading state for
+   *    the dead navigation is cleared here.
+   */
+  function createNavAbort(externalSignal?: AbortSignal): AbortController {
+    if (currentNavAbort) {
+      currentNavAbort.abort();
+      supersedeNavigationTransitions();
+      deps.completeRouterNavigation?.();
+    }
+    const controller = new AbortController();
+    currentNavAbort = controller;
+
+    // If an external signal is provided (e.g., Navigation API),
+    // forward its abort to our controller.
+    if (externalSignal) {
+      if (externalSignal.aborted) {
+        controller.abort();
+      } else {
+        externalSignal.addEventListener('abort', () => controller.abort(), { once: true });
+      }
+    }
+
+    return controller;
+  }
+
   function setPending(value: boolean, url?: string): void {
-    const newPendingUrl = value && url ? url : null;
-    if (pending === value && pendingUrl === newPendingUrl) return;
-    pending = value;
-    pendingUrl = newPendingUrl;
+    const next: RouterPhase =
+      value && url ? { phase: 'navigating', targetUrl: url } : { phase: 'idle' };
+    // Skip no-op updates
+    if (
+      routerPhase.phase === next.phase &&
+      (routerPhase.phase === 'idle' ||
+        (routerPhase.phase === 'navigating' &&
+          next.phase === 'navigating' &&
+          routerPhase.targetUrl === next.targetUrl))
+    ) {
+      return;
+    }
+    routerPhase = next;
     // Notify external store listeners (non-React consumers).
     // React-facing pending state is handled by useOptimistic in
-    // TransitionRoot via navigateTransition — not this function.
+    // NavigationRoot via navigateTransition — not this function.
     for (const listener of pendingListeners) {
       listener(value);
     }
@@ -163,100 +300,124 @@ export function createRouter(deps: RouterDeps): RouterInstance {
   }
 
   /** Render a decoded RSC payload into the DOM if a renderer is available. */
-  function renderPayload(payload: unknown): void {
+  function renderPayload(payload: unknown, navState: NavigationState): void {
     if (deps.renderRoot) {
-      deps.renderRoot(payload);
+      deps.renderRoot(payload, navState);
     }
   }
 
+  function isPartialNavigation(skippedSegments: string[] | null | undefined): boolean {
+    return skippedSegments != null && skippedSegments.length > 0;
+  }
+
   /**
-   * Merge a partial RSC payload with cached segment elements if segments
-   * were skipped, then cache segments from the (merged) payload.
-   * Returns the merged payload ready for rendering.
+   * Build a segment updates map for partial navigation. Identifies the
+   * first non-skipped segment and maps it to the payload content.
    */
-  function mergeAndCachePayload(
-    payload: unknown,
-    skippedSegments: string[] | null | undefined
-  ): unknown {
-    let merged = payload;
-
-    // If segments were skipped, merge the partial payload with cached segments
-    if (skippedSegments && skippedSegments.length > 0) {
-      merged = mergeSegmentTree(payload, skippedSegments, segmentElementCache);
+  function buildSegmentUpdates(result: FetchResult): Map<string, unknown> {
+    const skipped = new Set(result.skippedSegments!);
+    const segmentInfo = result.segmentInfo;
+    const updates = new Map<string, unknown>();
+    if (segmentInfo) {
+      for (const info of segmentInfo) {
+        if (!skipped.has(info.segmentId ?? info.path)) {
+          // Use segmentId (outlet key) when available — route groups
+          // use a disambiguated key like "/(marketing)" instead of "/".
+          updates.set(info.segmentId ?? info.path, result.payload);
+          break;
+        }
+      }
     }
-
-    // Cache segment elements from the (merged) payload for future merges
-    cacheSegmentElements(merged, segmentElementCache);
-
-    return merged;
+    return updates;
   }
 
   /**
    * Update navigation state (params + pathname) for the next render.
    *
-   * Sets both the module-level fallback (for tests and SSR) and the
-   * navigation context state (read by renderRoot to wrap the element
-   * in NavigationProvider). The context update is atomic with the tree
-   * render — both are passed to reactRoot.render() in the same call.
+   * Sets the module-level fallback (for tests and SSR) and the
+   * globalThis bridge, then returns the NavigationState so callers
+   * can pass it explicitly to renderRoot/wrapPayload — eliminating
+   * temporal coupling with getNavigationState().
    */
   function updateNavigationState(
     params: Record<string, string | string[]> | null | undefined,
     url: string
-  ): void {
+  ): NavigationState {
     const resolvedParams = params ?? {};
     // Module-level fallback for tests (no NavigationProvider) and SSR
     setCurrentParams(resolvedParams);
-    // Navigation context — read by renderRoot to wrap the RSC element
-    const pathname = url.startsWith('http') ? new URL(url).pathname : url.split('?')[0] || '/';
-    setNavigationState({ params: resolvedParams, pathname });
+    // globalThis bridge — kept for backward compat
+    const parsed = new URL(url, 'http://localhost');
+    const pathname = parsed.pathname || '/';
+    const search = parsed.search;
+    const navState: NavigationState = { params: resolvedParams, pathname, search };
+    setNavigationState(navState);
+    return navState;
   }
 
   /**
    * Render a payload via navigateTransition (production) or renderRoot (tests).
-   * The perform callback should fetch data, update state, and return the payload.
-   * In production, the entire callback runs inside a React transition with
-   * useOptimistic for the pending URL. In tests, the payload is rendered directly.
+   * The perform callback should fetch data, update state, and return the
+   * FetchResult plus the NavigationState (so it can be passed explicitly
+   * to wrapPayload/renderRoot without temporal coupling).
    */
   async function renderViaTransition(
     url: string,
-    perform: () => Promise<FetchResult>
-  ): Promise<HeadElement[] | null> {
+    perform: () => Promise<FetchResult & { navState: NavigationState }>
+  ): Promise<void> {
     if (deps.navigateTransition) {
-      let headElements: HeadElement[] | null = null;
       await deps.navigateTransition(url, async (wrapPayload) => {
         const result = await perform();
-        headElements = result.headElements;
-        // Merge partial payload with cached segments before wrapping
-        const merged = mergeAndCachePayload(result.payload, result.skippedSegments);
-        // Store the MERGED payload in history — not the partial pre-merge tree.
-        // This ensures handlePopState replays the complete tree on back/forward.
+
+        if (isPartialNavigation(result.skippedSegments)) {
+          const segmentUpdates = buildSegmentUpdates(result);
+
+          historyStack.push(url, {
+            payload: null,
+            params: result.params,
+          });
+
+          // Re-wrap the CURRENT element with new context values.
+          // SegmentOutlets read updates from SegmentUpdateContext;
+          // NavigationProvider gets new params/pathname.
+          const element = wrapPayload(
+            deps._getCurrentPayload?.() ?? result.payload,
+            result.navState,
+            segmentUpdates
+          );
+          return { element, decodePromise: result.decodePromise };
+        }
+
+        // Full navigation — empty updates, render the new tree.
         historyStack.push(url, {
-          payload: merged,
-          headElements: result.headElements,
+          payload: result.payload,
           params: result.params,
         });
-        return wrapPayload(merged);
+        const element = wrapPayload(result.payload, result.navState);
+        return { element, decodePromise: result.decodePromise };
       });
-      return headElements;
+      return;
     }
     // Fallback: no transition (tests, no React tree)
     const result = await perform();
-    // Merge partial payload with cached segments before rendering
-    const merged = mergeAndCachePayload(result.payload, result.skippedSegments);
-    // Store merged payload in history
-    historyStack.push(url, {
-      payload: merged,
-      headElements: result.headElements,
-      params: result.params,
-    });
-    renderPayload(merged);
-    return result.headElements;
-  }
-
-  /** Apply head elements (title, meta tags) to the DOM if available. */
-  function applyHead(elements: HeadElement[] | null | undefined): void {
-    if (elements && deps.applyHead) {
-      deps.applyHead(elements);
+    if (isPartialNavigation(result.skippedSegments)) {
+      historyStack.push(url, {
+        payload: null,
+        params: result.params,
+      });
+    } else {
+      // Resolve thenables before storing/rendering in the fallback path
+      // (tests without navigateTransition). In production, React handles
+      // thenables via Suspense; in tests, renderRoot expects resolved values.
+      const payload =
+        result.payload != null && typeof result.payload === 'object' && 'then' in result.payload
+          ? await (result.payload as PromiseLike<unknown>)
+          : result.payload;
+      historyStack.push(url, {
+        payload,
+        params: result.params,
+      });
+      renderPayload(payload, result.navState);
     }
   }
 
@@ -269,21 +430,47 @@ export function createRouter(deps: RouterDeps): RouterInstance {
     }
   }
 
+  /**
+   * Schedule scroll restoration after the next paint and fire the
+   * scroll-restored event. Used by navigate, popstate, and refresh.
+   */
+  function restoreScrollAfterPaint(scrollY: number): void {
+    afterPaint(() => {
+      deps.scrollTo(0, scrollY);
+      window.dispatchEvent(new Event('timber:scroll-restored'));
+    });
+  }
+
+  /**
+   * Scroll to the element matching the URL #fragment after paint, falling
+   * back to scroll-to-top when no element matches (matching full-page-load
+   * behavior for an unknown fragment). Used by forward navigation to a
+   * hash-bearing URL (TIM-1035).
+   */
+  function scrollToHashAfterPaint(hash: string): void {
+    afterPaint(() => {
+      if (deps.scrollToHash?.(hash) !== true) {
+        deps.scrollTo(0, 0);
+      }
+      window.dispatchEvent(new Event('timber:scroll-restored'));
+    });
+  }
+
   /**
    * Core navigation logic shared between the transition and fallback paths.
    * Fetches the RSC payload, updates all state, and returns the result.
    */
   async function performNavigationFetch(
     url: string,
-    options: { replace: boolean }
-  ): Promise<FetchResult> {
+    options: { replace: boolean; commitUrl?: string; signal?: AbortSignal; skipHistory?: boolean }
+  ): Promise<FetchResult & { navState: NavigationState }> {
     // Check prefetch cache first. PrefetchResult has optional segmentInfo/params
     // fields — normalize to null for FetchResult compatibility.
     const prefetched = prefetchCache.consume(url);
     let result: FetchResult | undefined = prefetched
       ? {
           payload: prefetched.payload,
-          headElements: prefetched.headElements,
+          decodePromise: null,
           segmentInfo: prefetched.segmentInfo ?? null,
           params: prefetched.params ?? null,
           skippedSegments: prefetched.skippedSegments ?? null,
@@ -293,19 +480,29 @@ export function createRouter(deps: RouterDeps): RouterInstance {
     if (result === undefined) {
       // Fetch RSC payload with state tree for partial rendering.
       // Send current URL for intercepting route resolution (modal pattern).
-      const stateTree = segmentCache.serializeStateTree(segmentElementCache.getMergeablePaths());
+      const stateTree = segmentCache.serializeStateTree();
       const rawCurrentUrl = deps.getCurrentUrl();
       const currentUrl = rawCurrentUrl.startsWith('http')
         ? new URL(rawCurrentUrl).pathname
         : new URL(rawCurrentUrl, 'http://localhost').pathname;
-      result = await fetchRscPayload(url, deps, stateTree, currentUrl);
+      result = await fetchRscPayload(url, deps, stateTree, currentUrl, options.signal);
     }
 
-    // Update the browser history — replace mode overwrites the current entry
-    if (options.replace) {
-      deps.replaceState({ timber: true, scrollY: 0 }, '', url);
-    } else {
-      deps.pushState({ timber: true, scrollY: 0 }, '', url);
+    // Update the browser history — skip when the Navigation API has already
+    // updated the URL via event.intercept() (external navigations).
+    // The committed URL keeps the #fragment (commitUrl) even though the
+    // fetch/history-stack URL is hash-less (TIM-1035).
+    if (!options.skipHistory) {
+      const commitUrl = options.commitUrl ?? url;
+      // Set the router-navigating flag so the Navigation API's navigate
+      // listener doesn't double-intercept this pushState/replaceState.
+      deps.setRouterNavigating?.(true);
+      if (options.replace) {
+        deps.replaceState({ timber: true, scrollY: 0 }, '', commitUrl);
+      } else {
+        deps.pushState({ timber: true, scrollY: 0 }, '', commitUrl);
+      }
+      deps.setRouterNavigating?.(false);
     }
 
     // NOTE: History push is deferred — the merged payload (after segment
@@ -316,124 +513,230 @@ export function createRouter(deps: RouterDeps): RouterInstance {
     // Update the segment cache with the new route's segment tree.
     updateSegmentCache(result.segmentInfo);
 
-    // Update navigation state (params + pathname) before rendering.
-    updateNavigationState(result.params, url);
+    // Update navigation state and capture it for explicit passing.
+    const navState = updateNavigationState(result.params, url);
 
-    return result;
+    return { ...result, navState };
   }
 
   async function navigate(url: string, options: NavigationOptions = {}): Promise<void> {
     const scroll = options.scroll !== false;
     const replace = options.replace === true;
+    const externalSignal = options._signal as AbortSignal | undefined;
+    const skipHistory = options._skipHistory === true;
+
+    // Split the #fragment off the navigation URL (TIM-1035). The full URL
+    // (with hash) is committed to the address bar; the hash-less URL is used
+    // for the RSC fetch (fragments are client-only — keeping it would also
+    // swallow the ?_rsc cache-bust param into the fragment) and for
+    // history-stack/prefetch keys (popstate lookups use pathname + search).
+    const hashIndex = url.indexOf('#');
+    const hash = hashIndex === -1 ? '' : url.slice(hashIndex);
+    const fetchUrl = hashIndex === -1 ? url : url.slice(0, hashIndex);
+
+    // Create an abort controller for this navigation. Links to the external
+    // signal (Navigation API's event.signal) when provided.
+    const navAbort = createNavAbort(externalSignal);
 
     // Capture the departing page's scroll position for scroll={false} preservation.
     const currentScrollY = deps.getScrollY();
 
-    // Save the departing page's scroll position in history.state before
-    // pushing a new entry. This ensures back/forward navigation can restore
-    // the correct scroll position from the browser's per-entry state.
-    deps.replaceState({ timber: true, scrollY: currentScrollY }, '', deps.getCurrentUrl());
+    // Save the departing page's scroll position — use Navigation API entry
+    // state when available, otherwise fall back to history.state.
+    if (deps.saveNavigationEntryScroll) {
+      deps.saveNavigationEntryScroll(currentScrollY);
+    } else {
+      deps.replaceState({ timber: true, scrollY: currentScrollY }, '', deps.getCurrentUrl());
+    }
+
+    // When Navigation API is active, initiate the navigation via
+    // navigation.navigate() BEFORE the fetch. Unlike history.pushState()
+    // which commits the URL synchronously (so Chrome sees it as "done"),
+    // navigation.navigate() fires the navigate event before committing.
+    // Our handler intercepts with a deferred promise, and Chrome shows
+    // its native loading indicator until completeRouterNavigation()
+    // resolves it in the finally block (same time as TopLoader clears).
+    let effectiveSkipHistory = skipHistory;
+    if (!skipHistory && deps.navigationNavigate) {
+      deps.setRouterNavigating?.(true);
+      deps.navigationNavigate(url, replace);
+      deps.setRouterNavigating?.(false);
+      effectiveSkipHistory = true;
+    }
 
     setPending(true, url);
 
     try {
-      const headElements = await renderViaTransition(url, () =>
-        performNavigationFetch(url, { replace })
+      await renderViaTransition(fetchUrl, () =>
+        performNavigationFetch(fetchUrl, {
+          replace,
+          commitUrl: url,
+          signal: navAbort.signal,
+          skipHistory: effectiveSkipHistory,
+        })
       );
 
-      // Update document.title and <meta> tags with the new page's metadata
-      applyHead(headElements);
-
       // Notify nuqs adapter (and any other listeners) that navigation completed.
       window.dispatchEvent(new Event('timber:navigation-end'));
 
-      // Scroll-to-top on forward navigation, or restore captured position
-      // for scroll={false}. React's render() on the document root can reset
-      // scroll during DOM reconciliation, so all scroll must be actively managed.
-      afterPaint(() => {
-        if (scroll) {
-          deps.scrollTo(0, 0);
-        } else {
-          deps.scrollTo(0, currentScrollY);
-        }
-        window.dispatchEvent(new Event('timber:scroll-restored'));
-      });
+      // Scroll-to-top on forward navigation, scroll to the #fragment target
+      // when the URL has one, or restore captured position for scroll={false}.
+      // React's render() on the document root can reset scroll during DOM
+      // reconciliation, so all scroll must be actively managed.
+      if (scroll && hash) {
+        scrollToHashAfterPaint(hash);
+      } else {
+        restoreScrollAfterPaint(scroll ? 0 : currentScrollY);
+      }
     } catch (error) {
+      // Version skew — server has been redeployed. Full page reload
+      // so the browser fetches the new bundle. See TIM-446.
+      if (error instanceof VersionSkewError) {
+        setHardNavigating(true);
+        window.location.reload();
+        return new Promise(() => {}) as never;
+      }
       // Server-side redirect during RSC fetch → soft router navigation.
+      // The redirect navigate will push/replace its own URL.
       if (error instanceof RedirectError) {
-        setPending(false);
+        // Drop the redirect if a newer navigation superseded this one
+        // while the redirect response was in flight — the newer
+        // navigation wins, same as the stale-transition guard.
+        if (currentNavAbort !== navAbort) return;
+        // The recursive navigate() supersedes this one via createNavAbort,
+        // which also resolves this navigation's Navigation API deferred.
         await navigate(error.redirectUrl, { replace: true });
         return;
       }
+      // Server 5xx error — hard-navigate so the server renders the
+      // error page as HTML. See design/10-error-handling.md
+      // §"Error Page Rendering for Client Navigation".
+      //
+      // Set hard-navigating flag BEFORE setting window.location.href:
+      // 1. Prevents Navigation API from intercepting → infinite loop
+      // 2. Causes NavigationRoot to throw unresolvedThenable → prevents
+      //    React from rendering children during page teardown (avoids
+      //    "Rendered more hooks" crashes). See TIM-626.
+      if (error instanceof ServerErrorResponse) {
+        setHardNavigating(true);
+        window.location.href = error.url;
+        return new Promise(() => {}) as never;
+      }
       // Abort errors are not application errors — swallow silently.
       if (isAbortError(error)) return;
       throw error;
     } finally {
-      setPending(false);
+      // Staleness guard (TIM-1034): only clean up when this navigation
+      // still owns the abort controller. When a newer navigation
+      // superseded this one, createNavAbort() already replaced
+      // currentNavAbort — running setPending(false) /
+      // completeRouterNavigation() here would clear the NEWER
+      // navigation's pending state and resolve its Navigation API
+      // deferred. The superseding navigation resolved OUR deferred in
+      // createNavAbort().
+      if (currentNavAbort === navAbort) {
+        // Clear the abort controller so we don't abort a completed
+        // navigation when the next one starts. In dev mode, the RSC body
+        // stream stays open after data arrives (React's Flight client
+        // waits for debug rows). Aborting a "completed" navigation kills
+        // the open stream reader → "BodyStreamBuffer was aborted".
+        currentNavAbort = null;
+        setPending(false);
+        // Resolve the Navigation API deferred — clears the browser's
+        // native loading state (tab spinner) at the same time as the
+        // TopLoader.
+        deps.completeRouterNavigation?.();
+      }
     }
   }
 
   async function refresh(): Promise<void> {
     const currentUrl = deps.getCurrentUrl();
+    const navAbort = createNavAbort();
 
     setPending(true, currentUrl);
 
     try {
-      const headElements = await renderViaTransition(currentUrl, async () => {
+      await renderViaTransition(currentUrl, async () => {
         // No state tree sent — server renders the complete RSC payload
-        const result = await fetchRscPayload(currentUrl, deps);
+        const result = await fetchRscPayload(
+          currentUrl,
+          deps,
+          undefined,
+          undefined,
+          navAbort.signal
+        );
         // History push handled by renderViaTransition (stores merged payload)
         updateSegmentCache(result.segmentInfo);
-        updateNavigationState(result.params, currentUrl);
-        return result;
+        const navState = updateNavigationState(result.params, currentUrl);
+        return { ...result, navState };
       });
-
-      applyHead(headElements);
+    } catch (error) {
+      if (isAbortError(error)) return;
+      throw error;
     } finally {
-      setPending(false);
+      // Staleness guard (TIM-1034) — see navigate()'s finally block.
+      if (currentNavAbort === navAbort) {
+        currentNavAbort = null;
+        setPending(false);
+        deps.completeRouterNavigation?.();
+      }
     }
   }
 
-  async function handlePopState(url: string, scrollY: number = 0): Promise<void> {
+  async function handlePopState(
+    url: string,
+    scrollY: number = 0,
+    externalSignal?: AbortSignal
+  ): Promise<void> {
     // Scroll position is read from history.state by the caller (browser-entry.ts)
     // and passed in. This is more reliable than tracking scroll per-URL in memory
     // because the browser maintains per-entry state even with duplicate URLs.
     const entry = historyStack.get(url);
 
     if (entry && entry.payload !== null) {
-      // Replay cached payload — no server roundtrip
-      updateNavigationState(entry.params, url);
-      renderPayload(entry.payload);
-      applyHead(entry.headElements);
-      afterPaint(() => {
-        deps.scrollTo(0, scrollY);
-        window.dispatchEvent(new Event('timber:scroll-restored'));
-      });
+      // Replay cached payload — no server roundtrip.
+      //
+      // A forward navigation may still be in flight (back pressed while a
+      // slow RSC fetch was pending). createNavAbort() supersedes it: aborts
+      // its fetch and invalidates its render transition so the stale
+      // forward payload can't commit over this replay (TIM-1022). The
+      // replay itself is synchronous — nothing to abort later — so the
+      // controller is cleared immediately, and any pending state left by
+      // the superseded navigation is reset.
+      createNavAbort(externalSignal);
+      currentNavAbort = null;
+      setPending(false);
+      const navState = updateNavigationState(entry.params, url);
+      renderPayload(entry.payload, navState);
+      restoreScrollAfterPaint(scrollY);
     } else {
       // No cached payload — fetch from server.
       // This happens when navigating back to the initial SSR'd page
       // (its payload is null since it was rendered via SSR, not RSC fetch)
       // or when the entry doesn't exist at all.
+      const navAbort = createNavAbort(externalSignal);
       setPending(true, url);
       try {
-        const headElements = await renderViaTransition(url, async () => {
-          const stateTree = segmentCache.serializeStateTree(
-            segmentElementCache.getMergeablePaths()
-          );
-          const result = await fetchRscPayload(url, deps, stateTree);
+        await renderViaTransition(url, async () => {
+          const stateTree = segmentCache.serializeStateTree();
+          const result = await fetchRscPayload(url, deps, stateTree, undefined, navAbort.signal);
           updateSegmentCache(result.segmentInfo);
-          updateNavigationState(result.params, url);
+          const navState = updateNavigationState(result.params, url);
           // History push handled by renderViaTransition (stores merged payload)
-          return result;
+          return { ...result, navState };
         });
 
-        applyHead(headElements);
-        afterPaint(() => {
-          deps.scrollTo(0, scrollY);
-          window.dispatchEvent(new Event('timber:scroll-restored'));
-        });
+        restoreScrollAfterPaint(scrollY);
+      } catch (error) {
+        if (isAbortError(error)) return;
+        throw error;
       } finally {
-        setPending(false);
+        // Staleness guard (TIM-1034) — see navigate()'s finally block.
+        if (currentNavAbort === navAbort) {
+          currentNavAbort = null;
+          setPending(false);
+        }
       }
     }
   }
@@ -443,15 +746,21 @@ export function createRouter(deps: RouterDeps): RouterInstance {
    * Called on hover of <Link prefetch> elements.
    */
   function prefetch(url: string): void {
+    // Strip fragment — it's client-only and would swallow the _rsc cache-bust
+    // param into the hash. The hash-less key also matches navigate()'s fetchUrl.
+    const hashIndex = url.indexOf('#');
+    const fetchUrl = hashIndex === -1 ? url : url.slice(0, hashIndex);
+
     // Don't prefetch if already cached
-    if (prefetchCache.get(url) !== undefined) return;
-    if (historyStack.has(url)) return;
+    if (prefetchCache.get(fetchUrl) !== undefined) return;
+    if (historyStack.has(fetchUrl)) return;
 
     // Fire-and-forget fetch
-    const stateTree = segmentCache.serializeStateTree(segmentElementCache.getMergeablePaths());
-    void fetchRscPayload(url, deps, stateTree).then(
+    const stateTree = segmentCache.serializeStateTree();
+    void fetchRscPayload(fetchUrl, deps, stateTree).then(
       (result) => {
-        prefetchCache.set(url, result);
+        result.decodePromise?.catch(() => {});
+        prefetchCache.set(fetchUrl, result);
       },
       () => {
         // Prefetch failure is non-fatal — navigation will fetch fresh
@@ -463,29 +772,36 @@ export function createRouter(deps: RouterDeps): RouterInstance {
     navigate,
     refresh,
     handlePopState,
-    isPending: () => pending,
-    getPendingUrl: () => pendingUrl,
+    isPending: () => routerPhase.phase === 'navigating',
+    getPendingUrl: () => (routerPhase.phase === 'navigating' ? routerPhase.targetUrl : null),
     onPendingChange(listener) {
       pendingListeners.add(listener);
       return () => pendingListeners.delete(listener);
     },
     prefetch,
-    applyRevalidation(element: unknown, headElements: HeadElement[] | null): void {
+    applyRevalidation(element: unknown): void {
       // Render the piggybacked element tree from a server action response.
-      // Updates the current history entry with the fresh payload and applies
-      // head elements — same as refresh() but without a server fetch.
-      // Cache segment elements for future partial merges.
+      // Updates the current history entry with the fresh payload —
+      // same as refresh() but without a server fetch.
+      // Revalidation payloads are already resolved (no Flight thenable),
+      // so no segment merging is needed — just cache and render.
       const currentUrl = deps.getCurrentUrl();
-      const merged = mergeAndCachePayload(element, null);
+
+      // Revalidation doesn't change params/pathname — preserve current state.
+      // DO NOT call updateNavigationState(null, ...) here: that normalizes
+      // params to {}, clearing dynamic route params on every action response.
+      const navState = getNavigationState();
+
+      // Keep params on the overwritten entry — dropping them would make
+      // away-and-back navigation replay this page with params normalized
+      // to {} (TIM-1037).
       historyStack.push(currentUrl, {
-        payload: merged,
-        headElements,
+        payload: element,
+        params: navState.params,
       });
-      renderPayload(merged);
-      applyHead(headElements);
+      renderPayload(element, navState);
     },
     initSegmentCache: (segments: SegmentInfo[]) => updateSegmentCache(segments),
-    cacheElementTree: (element: unknown) => cacheSegmentElements(element, segmentElementCache),
     segmentCache,
     prefetchCache,
     historyStack,