@rangojs/router 0.0.0-experimental.112 → 0.0.0-experimental.114

package/src/router/match-middleware/cache-lookup.ts

@@ -282,6 +282,38 @@ async function* yieldFromStore<TEnv>(
   }
 }
 
+/**
+ * Look up a prerendered (build-time cached) entry for the current route and, on
+ * a hit, yield its segments. Returns true when an entry was served (the caller
+ * should stop the pipeline) and false on a miss. Intercept navigations consult
+ * only the intercept-specific entry (`paramHash + "/i"`); a miss there falls
+ * through to the normal pipeline so intercept-resolution can run. Callers must
+ * guard on `prerenderStoreInstance` after `ensurePrerenderDeps()`.
+ */
+async function* tryPrerenderLookup<TEnv>(
+  ctx: MatchContext<TEnv>,
+  state: MatchPipelineState,
+  pipelineStart: number,
+  handleStoreRef?: HandleStore,
+): AsyncGenerator<ResolvedSegment, boolean> {
+  const paramHash = _hashParams!(ctx.matched.params);
+  const isPassthroughPrerenderRoute = ctx.entries.some(
+    (entry) => entry.type === "route" && entry.isPassthrough === true,
+  );
+  const lookupHash = ctx.isIntercept ? paramHash + "/i" : paramHash;
+  const entry = await prerenderStoreInstance!.get(
+    ctx.matched.routeKey,
+    lookupHash,
+    {
+      pathname: ctx.pathname,
+      isPassthroughRoute: isPassthroughPrerenderRoute,
+    },
+  );
+  if (!entry) return false;
+  yield* yieldFromStore(entry, ctx, state, pipelineStart, handleStoreRef);
+  return true;
+}
+
 /**
  * Async generator middleware type
  */
@@ -334,54 +366,13 @@ export function withCacheLookup<TEnv>(
     if (!ctx.isAction && !isHmr && ctx.matched.pr) {
       await ensurePrerenderDeps();
       if (prerenderStoreInstance) {
-        const paramHash = _hashParams!(ctx.matched.params);
-        const isPassthroughPrerenderRoute = ctx.entries.some(
-          (entry) => entry.type === "route" && entry.isPassthrough === true,
+        const served = yield* tryPrerenderLookup(
+          ctx,
+          state,
+          pipelineStart,
+          handleStoreRef,
         );
-
-        if (ctx.isIntercept) {
-          // Intercept navigation: try intercept-specific prerender entry
-          const entry = await prerenderStoreInstance.get(
-            ctx.matched.routeKey,
-            paramHash + "/i",
-            {
-              pathname: ctx.pathname,
-              isPassthroughRoute: isPassthroughPrerenderRoute,
-            },
-          );
-          if (entry) {
-            yield* yieldFromStore(
-              entry,
-              ctx,
-              state,
-              pipelineStart,
-              handleStoreRef,
-            );
-            return;
-          }
-          // No intercept prerender -- fall through to normal pipeline
-          // (skip non-intercept prerender to let intercept-resolution run)
-        } else {
-          // Normal navigation: existing behavior
-          const entry = await prerenderStoreInstance.get(
-            ctx.matched.routeKey,
-            paramHash,
-            {
-              pathname: ctx.pathname,
-              isPassthroughRoute: isPassthroughPrerenderRoute,
-            },
-          );
-          if (entry) {
-            yield* yieldFromStore(
-              entry,
-              ctx,
-              state,
-              pipelineStart,
-              handleStoreRef,
-            );
-            return;
-          }
-        }
+        if (served) return;
       }
     }
 
@@ -404,51 +395,13 @@ export function withCacheLookup<TEnv>(
       if (hasStatic) {
         await ensurePrerenderDeps();
         if (prerenderStoreInstance) {
-          const paramHash = _hashParams!(ctx.matched.params);
-          const isPassthroughPrerenderRoute = ctx.entries.some(
-            (entry) => entry.type === "route" && entry.isPassthrough === true,
+          const served = yield* tryPrerenderLookup(
+            ctx,
+            state,
+            pipelineStart,
+            handleStoreRef,
           );
-
-          if (ctx.isIntercept) {
-            const entry = await prerenderStoreInstance.get(
-              ctx.matched.routeKey,
-              paramHash + "/i",
-              {
-                pathname: ctx.pathname,
-                isPassthroughRoute: isPassthroughPrerenderRoute,
-              },
-            );
-            if (entry) {
-              yield* yieldFromStore(
-                entry,
-                ctx,
-                state,
-                pipelineStart,
-                handleStoreRef,
-              );
-              return;
-            }
-            // No intercept prerender -- fall through to normal pipeline
-          } else {
-            const entry = await prerenderStoreInstance.get(
-              ctx.matched.routeKey,
-              paramHash,
-              {
-                pathname: ctx.pathname,
-                isPassthroughRoute: isPassthroughPrerenderRoute,
-              },
-            );
-            if (entry) {
-              yield* yieldFromStore(
-                entry,
-                ctx,
-                state,
-                pipelineStart,
-                handleStoreRef,
-              );
-              return;
-            }
-          }
+          if (served) return;
         }
       }
     }

package/src/router/match-middleware/cache-store.ts

@@ -169,10 +169,11 @@ export function withCacheStore<TEnv>(
     // skip (client already had them). Segments where the handler intentionally
     // returned null are not revalidation skips — re-rendering them will still
     // produce null, so proactive caching would be wasted work.
-    const clientIdSet = new Set(ctx.clientSegmentIds);
     const hasNullComponents = allSegmentsToCache.some(
       (s) =>
-        s.component === null && s.type !== "loader" && clientIdSet.has(s.id),
+        s.component === null &&
+        s.type !== "loader" &&
+        ctx.clientSegmentSet.has(s.id),
     );
 
     const requestCtx = getRequestContext();

package/src/router/router-options.ts

@@ -357,6 +357,30 @@ export interface RangoOptions<TEnv = any> {
    */
   theme?: import("../theme/types.js").ThemeConfig | true;
 
+  /**
+   * Default for whether the router wraps `transition()` segments in its own
+   * React `<ViewTransition>` boundary (experimental React only).
+   *
+   * - "auto" (default): every route/layout that opts in via `transition()`
+   *   gets a router-owned cross-fade.
+   * - false: the router never places its own boundary. Routes that use
+   *   `transition()` still drive navigation through startTransition (so loaders
+   *   hold instead of flashing a skeleton) and still let consumer-placed
+   *   `<ViewTransition>` elements animate — the router just contributes no
+   *   cross-fade of its own. This is the "router triggers, you place the
+   *   transitions" model.
+   *
+   * A per-segment `transition({ viewTransition })` overrides this default.
+   *
+   * @example
+   * ```typescript
+   * // App-wide: drive + hold, but never auto-wrap. Place <ViewTransition>
+   * // yourself in components where you want a morph.
+   * const router = createRouter<AppEnv>({ viewTransition: false });
+   * ```
+   */
+  viewTransition?: "auto" | false;
+
   /**
    * URL patterns to register with the router.
    *

package/src/router/segment-resolution/fresh.ts

@@ -28,6 +28,7 @@ import {
   resolveLayoutComponent,
   resolveWithErrorBoundary,
 } from "./helpers.js";
+import { applyViewTransitionDefault } from "./view-transition-default.js";
 import { getRouterContext } from "../router-context.js";
 import { resolveSink, safeEmit } from "../telemetry.js";
 import {
@@ -224,7 +225,10 @@ export async function resolveSegment<TEnv>(
       index: 0,
       component,
       loading: entry.loading === false ? null : entry.loading,
-      transition: entry.transition,
+      transition: applyViewTransitionDefault(
+        entry.transition,
+        deps.viewTransitionDefault,
+      ),
       params,
       belongsToRoute: false,
       layoutName: entry.id,
@@ -359,7 +363,10 @@ export async function resolveSegment<TEnv>(
       index: 0,
       component: component ?? null,
       loading: entry.loading === false ? null : entry.loading,
-      transition: entry.transition,
+      transition: applyViewTransitionDefault(
+        entry.transition,
+        deps.viewTransitionDefault,
+      ),
       params,
       belongsToRoute: true,
       ...(entry.mountPath ? { mountPath: entry.mountPath } : {}),
@@ -443,7 +450,10 @@ export async function resolveOrphanLayout<TEnv>(
     belongsToRoute,
     layoutName: orphan.id,
     loading: orphan.loading === false ? null : orphan.loading,
-    transition: orphan.transition,
+    transition: applyViewTransitionDefault(
+      orphan.transition,
+      deps.viewTransitionDefault,
+    ),
     ...(orphan.mountPath ? { mountPath: orphan.mountPath } : {}),
   });
 
@@ -565,7 +575,10 @@ export async function resolveParallelEntry<TEnv>(
       index: 0,
       component,
       loading: parallelEntry.loading === false ? null : parallelEntry.loading,
-      transition: parallelEntry.transition,
+      transition: applyViewTransitionDefault(
+        parallelEntry.transition,
+        deps.viewTransitionDefault,
+      ),
       params,
       slot,
       belongsToRoute,

package/src/router/segment-resolution/revalidation.ts

@@ -39,6 +39,7 @@ import {
   resolveLayoutComponent,
   resolveWithErrorBoundary,
 } from "./helpers.js";
+import { applyViewTransitionDefault } from "./view-transition-default.js";
 import { getRouterContext } from "../router-context.js";
 import { resolveSink, safeEmit } from "../telemetry.js";
 import {
@@ -593,7 +594,10 @@ export async function resolveParallelSegmentsWithRevalidation<TEnv>(
       index: 0,
       component,
       loading: parallelEntry.loading === false ? null : parallelEntry.loading,
-      transition: parallelEntry.transition,
+      transition: applyViewTransitionDefault(
+        parallelEntry.transition,
+        deps.viewTransitionDefault,
+      ),
       params,
       slot,
       _handlerRan: handlerRan,
@@ -803,7 +807,10 @@ export async function resolveEntryHandlerWithRevalidation<TEnv>(
     index: 0,
     component: resolvedComponent,
     loading: entry.loading === false ? null : entry.loading,
-    transition: entry.transition,
+    transition: applyViewTransitionDefault(
+      entry.transition,
+      deps.viewTransitionDefault,
+    ),
     params,
     belongsToRoute,
     ...(entry.type === "layout" || entry.type === "cache"
@@ -1137,7 +1144,10 @@ export async function resolveOrphanLayoutWithRevalidation<TEnv>(
     belongsToRoute,
     layoutName: orphan.id,
     loading: orphan.loading === false ? null : orphan.loading,
-    transition: orphan.transition,
+    transition: applyViewTransitionDefault(
+      orphan.transition,
+      deps.viewTransitionDefault,
+    ),
     ...(orphan.mountPath ? { mountPath: orphan.mountPath } : {}),
   });
 
@@ -1294,7 +1304,10 @@ export async function resolveOrphanLayoutWithRevalidation<TEnv>(
       index: 0,
       component,
       loading: parallelEntry.loading === false ? null : parallelEntry.loading,
-      transition: parallelEntry.transition,
+      transition: applyViewTransitionDefault(
+        parallelEntry.transition,
+        deps.viewTransitionDefault,
+      ),
       params,
       slot,
       _handlerRan: handlerRan,

package/src/router/segment-resolution/view-transition-default.ts

@@ -0,0 +1,36 @@
+/**
+ * View-transition boundary default resolution.
+ *
+ * Kept in its own module (rather than helpers.ts) because several resolution
+ * tests mock helpers.ts with an explicit export list; a shared util here is
+ * never mocked, so the fresh and revalidation paths always get the real
+ * implementation.
+ */
+
+import type { EntryData } from "../../server/context";
+
+/**
+ * Resolve the effective `viewTransition` for a segment's transition config.
+ *
+ * The per-segment value (set via the transition() DSL) always wins. When it is
+ * unset, the router-level createRouter({ viewTransition }) default is stamped
+ * in so the render gate reads the boundary decision off the segment — server
+ * and client, via the serialized segment — without the router option being
+ * threaded to the client. Only `false` is ever stamped; an unset (or "auto")
+ * value is left untouched because it already means "wrap" at the gate, which
+ * also avoids needless object allocation and payload growth. Used by both the
+ * fresh and revalidation resolution paths.
+ */
+export function applyViewTransitionDefault(
+  transition: EntryData["transition"],
+  viewTransitionDefault: "auto" | false | undefined,
+): EntryData["transition"] {
+  if (!transition) return transition;
+  if (
+    transition.viewTransition === undefined &&
+    viewTransitionDefault === false
+  ) {
+    return { ...transition, viewTransition: false };
+  }
+  return transition;
+}

package/src/router/types.ts

@@ -98,6 +98,14 @@ export interface SegmentResolutionDeps<TEnv = any> {
   ) => ReactNode | NotFoundBoundaryHandler | null;
   notFoundComponent?: ReactNode | ((props: { pathname: string }) => ReactNode);
   callOnError: (error: unknown, phase: ErrorPhase, context: any) => void;
+  /**
+   * Router-level default for the per-segment `transition({ viewTransition })`
+   * flag, from createRouter({ viewTransition }). Resolved into each segment's
+   * transition config during resolution (only `false` is stamped) so the render
+   * gate reads the boundary decision off the segment on both server and client.
+   * Undefined is treated as "auto" (wrap).
+   */
+  viewTransitionDefault?: "auto" | false;
 }
 
 /**

package/src/router.ts

@@ -155,6 +155,7 @@ export function createRouter<TEnv = any>(
     timeouts: timeoutsOption,
     onTimeout,
     originCheck: originCheckOption,
+    viewTransition: viewTransitionOption = "auto",
   } = options;
 
   // Normalize basename: ensure leading slash, strip trailing slash.
@@ -534,6 +535,7 @@ export function createRouter<TEnv = any>(
     findNearestNotFoundBoundary,
     notFoundComponent: notFound,
     callOnError,
+    viewTransitionDefault: viewTransitionOption,
   };
 
   // Match API dependencies

package/src/segment-system.tsx

@@ -99,8 +99,11 @@ function createViewTransitionBoundary(
   transition: NonNullable<ResolvedSegment["transition"]>,
   children: ReactNode,
 ): ReactNode {
+  // `viewTransition` is a router-specific flag (boundary opt-out), not a React
+  // <ViewTransition> prop — strip it so it never reaches React.
+  const { viewTransition: _viewTransition, ...vtProps } = transition;
   return createElement(ReactViewTransition, {
-    ...transition,
+    ...vtProps,
     children,
   });
 }
@@ -216,6 +219,25 @@ export async function renderSegments(
   }
   // Separate segments by type, passing intercept segments for explicit injection
   const tree = segmentTreeWalk(normalizedSegments, normalizedInterceptSegments);
+
+  // A route is "in a transition scope" when its own segment OR any layout in
+  // its matched chain declares transition(). Both transition() forms land here:
+  // the per-route item form sets transition on the route entry, and the block
+  // wrapper form sets it on a transparent ancestor layout (dsl-helpers.ts). When
+  // in scope, the route and its route-owned layouts use param-agnostic keys so a
+  // same-route navigation reconciles (holds content) instead of remounting. The
+  // value is a static property of the route's position in the tree, so it is the
+  // same on every render of that route (SSR, navigation, action) — the keys
+  // never drift. Cross-route navigation still remounts: different routes have
+  // different segment ids regardless of transition scope.
+  const inTransitionScope = normalizedSegments.some(
+    (s) =>
+      s.transition != null &&
+      (s.type === "layout" ||
+        s.type === "route" ||
+        s.type === "error" ||
+        s.type === "notFound"),
+  );
   // Render content segments as siblings
   let content: ReactNode = null;
   for (const node of tree) {
@@ -228,17 +250,31 @@ export async function renderSegments(
     );
     const { component, id, params, loading } = node.segment;
 
-    // Only include params in key for segments that belong to the route
-    // - Routes: always include params (they render param-specific content)
-    // - Error/notFound segments: always include params (they replace failed route content)
-    // - Route's layouts (orphans): include params (children of parameterized route)
-    // - Parent chain layouts: exclude params (shared across routes, param-agnostic)
-    // This prevents unnecessary unmounting when params change
+    // Param-agnostic keys are opt-in via the transition() DSL (see
+    // inTransitionScope above). A route (and its route-owned layouts) inside a
+    // transition scope drops the param from its key, so navigating between two
+    // param values of the SAME route (e.g. /product/1 -> /product/2) reconciles
+    // the route subtree instead of remounting it. Combined with the
+    // startTransition wrap that shouldStartViewTransition already applies to
+    // transition routes (browser/partial-update.ts), the previous content stays
+    // on screen while the new loaders resolve (stale-while-revalidate) instead
+    // of flashing the loading skeleton. This works on stable React; experimental
+    // React adds the animated <ViewTransition> cross-fade on top.
+    //
+    // Outside a transition scope the key stays param-bearing and the route
+    // remounts on param change (the default: a fresh skeleton and fresh
+    // component state).
+    //
+    // error/notFound always keep param-bearing keys: createErrorSegment reuses
+    // the boundary layout's shortCode as the error segment id (router/
+    // error-handling.ts), so a param-agnostic error key could collide with that
+    // layout's key within the same render.
     const includeParams =
-      node.segment.type === "route" ||
       node.segment.type === "error" ||
       node.segment.type === "notFound" ||
-      (node.segment.type === "layout" && node.segment.belongsToRoute);
+      ((node.segment.type === "route" ||
+        (node.segment.type === "layout" && node.segment.belongsToRoute)) &&
+        !inTransitionScope);
 
     const paramStr =
       includeParams && params && Object.keys(params).length > 0
@@ -286,12 +322,25 @@ export async function renderSegments(
     // subtree update on the layout-level VT — which would otherwise make
     // React's commit walker fire `document.startViewTransition` and apply
     // view-transition-names to the underlying main subtree (cover/title/etc.).
+    //
+    // `transition.viewTransition === false` opts out of the router-owned
+    // boundary only. Driving (the startTransition wrap in browser/partial-update.ts
+    // and the param-agnostic key/hold below) keys off transition *presence*, not
+    // this flag, so a boundary-less transition still holds content and lets
+    // consumer-placed <ViewTransition> elements animate. The global
+    // createRouter({ viewTransition }) default is resolved into this field
+    // during segment resolution (only `false` is stamped; unset/"auto" is left
+    // as-is and means "wrap"), so this gate needs no router-option threading.
     let outletContent: ReactNode =
       node.segment.type === "layout" ? content : null;
 
     const transition = node.segment.transition;
 
-    if (ReactViewTransition && transition) {
+    if (
+      ReactViewTransition &&
+      transition &&
+      transition.viewTransition !== false
+    ) {
       if (node.segment.type === "layout") {
         outletContent = wrapDefaultOutletContent(outletContent, transition);
       } else {

package/src/server/context.ts

@@ -748,6 +748,17 @@ const loaderScopeALS: AsyncLocalStorage<{ active: true }> = ((
   globalThis as any
 )[LOADER_SCOPE_KEY] ??= new AsyncLocalStorage<{ active: true }>());
 
+// Purity-only scope: marks that a loader FUNCTION BODY is executing, regardless
+// of how the loader was invoked (DSL via runInsideLoaderScope, or handler-
+// invoked via ctx.use). Consulted ONLY by isInsideCacheScope() to exempt
+// request-scoped reads. It deliberately does NOT affect isInsideLoaderScope(),
+// so rendered()/barrier/deadlock gating (which must distinguish DSL from
+// handler-invoked loaders) is unchanged.
+const LOADER_BODY_SCOPE_KEY = Symbol.for("rangojs-router:loader-body-scope");
+const loaderBodyScopeALS: AsyncLocalStorage<{ active: true }> = ((
+  globalThis as any
+)[LOADER_BODY_SCOPE_KEY] ??= new AsyncLocalStorage<{ active: true }>());
+
 /**
  * Check if the current execution is inside a cache() DSL boundary.
  * Returns false inside loader execution — loaders are always fresh
@@ -759,6 +770,10 @@ export function isInsideCacheScope(): boolean {
   // function re-executes on every request. Skip the guard when running
   // inside a loader.
   if (loaderScopeALS.getStore()?.active) return false;
+  // Also exempt handler-invoked loaders: their bodies run in a loader-body
+  // scope (not the DSL loader scope above), so request-scoped reads inside any
+  // loader — however invoked — are safe (loaders always re-run fresh).
+  if (loaderBodyScopeALS.getStore()?.active) return false;
   return true;
 }
 
@@ -779,3 +794,14 @@ export function isInsideLoaderScope(): boolean {
 export function runInsideLoaderScope<T>(fn: () => T): T {
   return loaderScopeALS.run({ active: true }, fn);
 }
+
+/**
+ * Run `fn` inside a loader BODY scope. Marks loader-function execution for the
+ * cache-purity guard only (isInsideCacheScope), WITHOUT affecting
+ * isInsideLoaderScope()/rendered() gating. Applied to every loader body (DSL
+ * and handler-invoked via ctx.use) so request-scoped reads inside a loader
+ * never trip the cache-scope guards — loaders always run fresh.
+ */
+export function runInsideLoaderBodyScope<T>(fn: () => T): T {
+  return loaderBodyScopeALS.run({ active: true }, fn);
+}

package/src/server/cookie-store.ts

@@ -9,6 +9,7 @@
 
 import type { CookieOptions } from "../router/middleware-types.js";
 import { getRequestContext } from "./request-context.js";
+import { isInsideCacheScope } from "./context.js";
 import { INSIDE_CACHE_EXEC } from "../cache/taint.js";
 
 /**
@@ -84,10 +85,23 @@ export interface ReadonlyHeaders {
 type HeadersIterator<T> = IterableIterator<T>;
 
 /**
- * Throw if called inside a "use cache" function.
- * Reading request-scoped data (cookies, headers) inside a cached function
- * produces results that vary per request but the cache key does not include
- * those values, leading to one user's data being served to another.
+ * Throw if called inside a cache boundary — either a "use cache" function
+ * (`INSIDE_CACHE_EXEC` stamped on ctx by the cache runtime) or a `cache()`
+ * DSL boundary (`isInsideCacheScope()` — the render-store flag set while
+ * resolving a `type: "cache"` route entry).
+ *
+ * Reading request-scoped data (cookies, headers) inside a cached scope
+ * produces per-request values that are NOT reflected in the cache key, so
+ * they would be frozen into the shared cache entry and served to the wrong
+ * users. This is the same hazard for both scopes: a `cache()` boundary caches
+ * everything except loaders (it is the document-level "PPR shell"), so a read
+ * here is baked into the shell exactly like a `"use cache"` return value is
+ * baked into its cache entry.
+ *
+ * `isInsideCacheScope()` returns false inside loaders (loaders always run
+ * fresh on every request, even on a cache hit), so reading cookies()/headers()
+ * from a loader is allowed — loaders are the dynamic "holes" of a cached
+ * document.
  */
 function assertNotInsideCacheContext(ctx: unknown, fnName: string): void {
   if (
@@ -106,6 +120,16 @@ function assertNotInsideCacheContext(ctx: unknown, fnName: string): void {
         `  const data = await getCachedData(locale); // locale is now in the cache key`,
     );
   }
+  if (isInsideCacheScope()) {
+    throw new Error(
+      `${fnName}() cannot be called inside a cache() boundary. ` +
+        `A cache() scope caches everything except loaders, so request-scoped ` +
+        `data (cookies, headers) read here would be frozen into the shared ` +
+        `cached shell and served to other users. Read it inside a loader ` +
+        `instead — loaders always run fresh on every request, even on a cache hit:\n\n` +
+        `  loader("user", () => getUser(cookies().get("session")?.value));`,
+    );
+  }
 }
 
 const HEADERS_MUTATION_METHODS = new Set(["set", "append", "delete"]);

package/src/types/handler-context.ts

@@ -567,8 +567,11 @@ export type ShouldRevalidateFn<TParams = GenericParams, TEnv = any> = (args: {
 
   // ── Segment metadata (which segment is being evaluated) ──────────────
 
-  /** The type of segment being revalidated. */
-  segmentType: "layout" | "route" | "parallel";
+  /**
+   * The type of segment being revalidated. `"loader"` is passed to revalidate
+   * functions attached to a `loader(Fn, () => [revalidate(...)])` registration.
+   */
+  segmentType: "layout" | "route" | "parallel" | "loader";
   /** Layout name (e.g., `"root"`, `"shop"`, `"auth"`). Only set for layout segments. */
   layoutName?: string;
   /** Slot name (e.g., `"@sidebar"`, `"@modal"`). Only set for parallel segments. */

package/src/types/segments.ts

@@ -10,7 +10,10 @@ export type ViewTransitionClass = Record<string, string> | string;
 
 /**
  * Configuration for React's <ViewTransition> component.
- * Maps directly to ViewTransitionProps (minus children/ref/callbacks).
+ *
+ * The phase fields (enter/exit/update/share/default/name) map directly to
+ * ViewTransitionProps (minus children/ref/callbacks). The `viewTransition`
+ * field is router-specific and is stripped before the config reaches React.
  */
 export interface TransitionConfig {
   enter?: ViewTransitionClass;
@@ -19,6 +22,20 @@ export interface TransitionConfig {
   share?: ViewTransitionClass;
   default?: ViewTransitionClass;
   name?: string;
+  /**
+   * Whether the router wraps this segment's content in its own
+   * <ViewTransition> boundary.
+   *
+   * - "auto" (default): the router places the boundary, producing the
+   *   router-owned cross-fade described by the phase fields above.
+   * - false: the router places no boundary. The navigation commit is still
+   *   driven through startTransition (so loaders hold instead of flashing a
+   *   skeleton, and consumer-placed <ViewTransition> elements still animate),
+   *   but the router contributes no cross-fade of its own.
+   *
+   * When unset, inherits the createRouter({ viewTransition }) default.
+   */
+  viewTransition?: "auto" | false;
 }
 
 /**

package/src/urls/path-helper-types.ts

@@ -350,7 +350,15 @@ export type PathHelpers<TEnv> = {
   };
 
   /**
-   * Attach a ViewTransition boundary to the current segment or a group of routes
+   * Opt a route (or group of routes) into transition-driven navigation.
+   *
+   * Two independent layers: (1) startTransition, on all React versions, holds
+   * the previous content across a same-route nav (no skeleton flash) and is the
+   * precondition for any view transition; (2) on experimental React, an
+   * additional `<ViewTransition>` boundary cross-fades/morphs the swap. Pass
+   * `{ viewTransition: false }` to keep #1 without the router boundary. A view
+   * transition cannot fire without a startTransition. See
+   * skills/view-transitions for the startTransition x ViewTransition matrix.
    */
   transition: {
     (): TransitionItem;