@timber-js/app 0.2.0-alpha.13 → 0.2.0-alpha.131

package/src/client/router.ts

@@ -5,10 +5,21 @@ 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 } from './navigation-root.js';
+import { isStaleClientReference, triggerStaleReload } from './stale-reload.js';
 import type { FetchResult } from './rsc-fetch.js';
 
 // ─── Types ───────────────────────────────────────────────────────
@@ -18,6 +29,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 +55,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
@@ -64,14 +92,65 @@ 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;
 }
 
 export interface RouterInstance {
@@ -80,7 +159,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 */
@@ -100,12 +179,7 @@ export interface RouterInstance {
    * 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 +204,71 @@ 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, aborting any
+   * previous in-flight navigation. Optionally links to an external
+   * signal (e.g., from the Navigation API's NavigateEvent.signal).
+   */
+  function createNavAbort(externalSignal?: AbortSignal): AbortController {
+    // Abort previous navigation's fetch
+    currentNavAbort?.abort();
+    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,94 +284,139 @@ 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).
    */
+  interface TransitionResult {
+    headElements: HeadElement[] | null;
+    decodePromise: Promise<void> | null;
+  }
+
   async function renderViaTransition(
     url: string,
-    perform: () => Promise<FetchResult>
-  ): Promise<HeadElement[] | null> {
+    perform: () => Promise<FetchResult & { navState: NavigationState }>
+  ): Promise<TransitionResult> {
     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,
+            headElements: result.headElements,
+            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,
+          payload: result.payload,
           headElements: result.headElements,
           params: result.params,
         });
-        return wrapPayload(merged);
+        const element = wrapPayload(result.payload, result.navState);
+        return { element, decodePromise: result.decodePromise };
       });
-      return headElements;
+      // decodePromise is awaited inside the transition's startTransition
+      // callback (NavigationRoot), so we don't need it here.
+      return { headElements, decodePromise: null };
     }
     // 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;
+    if (isPartialNavigation(result.skippedSegments)) {
+      historyStack.push(url, {
+        payload: null,
+        headElements: result.headElements,
+        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,
+        headElements: result.headElements,
+        params: result.params,
+      });
+      renderPayload(payload, result.navState);
+    }
+    return { headElements: result.headElements, decodePromise: result.decodePromise };
   }
 
   /** Apply head elements (title, meta tags) to the DOM if available. */
@@ -269,20 +435,32 @@ 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'));
+    });
+  }
+
   /**
    * 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; 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,
+          decodePromise: null,
           headElements: prefetched.headElements,
           segmentInfo: prefetched.segmentInfo ?? null,
           params: prefetched.params ?? null,
@@ -293,19 +471,26 @@ 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).
+    if (!options.skipHistory) {
+      // 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 }, '', url);
+      } else {
+        deps.pushState({ timber: true, scrollY: 0 }, '', url);
+      }
+      deps.setRouterNavigating?.(false);
     }
 
     // NOTE: History push is deferred — the merged payload (after segment
@@ -316,29 +501,57 @@ 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;
+
+    // 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 })
+      const { headElements } = await renderViaTransition(url, () =>
+        performNavigationFetch(url, {
+          replace,
+          signal: navAbort.signal,
+          skipHistory: effectiveSkipHistory,
+        })
       );
 
       // Update document.title and <meta> tags with the new page's metadata
@@ -350,51 +563,117 @@ export function createRouter(deps: RouterDeps): RouterInstance {
       // 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'));
-      });
+      restoreScrollAfterPaint(scroll ? 0 : currentScrollY);
     } catch (error) {
+      // Version skew — server has been redeployed. Trigger full page reload
+      // so the browser fetches the new bundle. See TIM-446.
+      // Set hard-navigating flag to prevent Navigation API interception
+      // and React from rendering during page teardown. See TIM-626.
+      if (error instanceof VersionSkewError) {
+        setHardNavigating(true);
+        // Import triggerStaleReload dynamically to avoid circular deps
+        // and keep the reload logic centralized with its loop guard.
+        const { triggerStaleReload } = await import('./stale-reload.js');
+        triggerStaleReload();
+        // Return a never-resolving promise — page is reloading.
+        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);
+        deps.completeRouterNavigation?.();
         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;
+      }
+      // Stale client reference from streaming RSC decode — the server
+      // was redeployed with new bundles. Same recovery as VersionSkewError.
+      if (isStaleClientReference(error)) {
+        setHardNavigating(true);
+        triggerStaleReload();
+        return new Promise(() => {}) as never;
+      }
       // Abort errors are not application errors — swallow silently.
       if (isAbortError(error)) return;
       throw error;
     } finally {
+      // 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". By clearing the controller here,
+      // createNavAbort() becomes a no-op for completed navigations.
+      if (currentNavAbort === navAbort) {
+        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 () => {
+      const { headElements } = 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 (isStaleClientReference(error)) {
+        setHardNavigating(true);
+        triggerStaleReload();
+        return new Promise(() => {}) as never;
+      }
+      // Stale transition (superseded by a newer navigation) or aborted
+      // fetch — silently ignore. See TIM-629.
+      if (isAbortError(error)) return;
+      throw error;
     } finally {
+      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.
@@ -402,37 +681,43 @@ export function createRouter(deps: RouterDeps): RouterInstance {
 
     if (entry && entry.payload !== null) {
       // Replay cached payload — no server roundtrip
-      updateNavigationState(entry.params, url);
-      renderPayload(entry.payload);
+      const navState = updateNavigationState(entry.params, url);
+      renderPayload(entry.payload, navState);
       applyHead(entry.headElements);
-      afterPaint(() => {
-        deps.scrollTo(0, scrollY);
-        window.dispatchEvent(new Event('timber:scroll-restored'));
-      });
+      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);
+        const { headElements } = 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 (isStaleClientReference(error)) {
+          setHardNavigating(true);
+          triggerStaleReload();
+          return new Promise(() => {}) as never;
+        }
+        // Stale transition (superseded by a newer navigation) or aborted
+        // fetch — silently ignore. See TIM-629.
+        if (isAbortError(error)) return;
+        throw error;
       } finally {
+        if (currentNavAbort === navAbort) {
+          currentNavAbort = null;
+        }
         setPending(false);
       }
     }
@@ -448,9 +733,10 @@ export function createRouter(deps: RouterDeps): RouterInstance {
     if (historyStack.has(url)) return;
 
     // Fire-and-forget fetch
-    const stateTree = segmentCache.serializeStateTree(segmentElementCache.getMergeablePaths());
+    const stateTree = segmentCache.serializeStateTree();
     void fetchRscPayload(url, deps, stateTree).then(
       (result) => {
+        result.decodePromise?.catch(() => {});
         prefetchCache.set(url, result);
       },
       () => {
@@ -463,8 +749,8 @@ 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);
@@ -474,18 +760,22 @@ export function createRouter(deps: RouterDeps): RouterInstance {
       // 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.
+      // 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);
       historyStack.push(currentUrl, {
-        payload: merged,
+        payload: element,
         headElements,
       });
-      renderPayload(merged);
+
+      // 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();
+      renderPayload(element, navState);
       applyHead(headElements);
     },
     initSegmentCache: (segments: SegmentInfo[]) => updateSegmentCache(segments),
-    cacheElementTree: (element: unknown) => cacheSegmentElements(element, segmentElementCache),
     segmentCache,
     prefetchCache,
     historyStack,