@lovrozagar/flare 0.9.13 → 0.9.15

package/README.md

@@ -630,11 +630,36 @@ import { navigate } from "@lovrozagar/flare";
 - `prefetch={false}` disables. Default comes from router / route cache.
 - `activeClass` / `inactiveClass` / `activeProps` / `inactiveProps` / `aria-current`.
 - `createRouter({ viewTransitions: true })` wraps updates in `document.startViewTransition` (Chromium). Put `<ViewTransitionCSS />` from `@lovrozagar/flare/view-transition-css` in the root head.
+- `<ViewTransitionBoundary>` from `@lovrozagar/flare/view-transition-boundary` scopes navigations inside a persistent layout to one element, so everything outside it (sidebar, header, tabs) keeps hover, clicks and CSS transitions while the content animates. See [Scoped view transitions](#scoped-view-transitions).
 - `useBlocker(() => dirty())` — first-class leave guard.
 - Optional chrome: `<NavigationProgress />` from `@lovrozagar/flare/navigation-progress`.
 
 `ctx.invalidate()` / `router.invalidate()` refetches current matches.
 
+### Scoped view transitions
+
+```tsx
+import { ViewTransitionBoundary } from "@lovrozagar/flare/view-transition-boundary";
+
+export const route = createLayout("_root_/(app)").render((props) => (
+	<div class="shell">
+		<aside>…sidebar…</aside>
+		<ViewTransitionBoundary>
+			<main>{props.children}</main>
+		</ViewTransitionBoundary>
+	</div>
+));
+```
+
+- Each navigation starts one view transition, on the innermost boundary element that wraps the content the navigation swaps. A navigation that leaves the layout, an intercept or not-found change, or no boundary uses `document.startViewTransition` as before.
+- The boundary renders its single child unchanged; the child must be one element with a box (not `display: contents` or inline). Several children or a text child throw in dev.
+- `scope: "document"` forces a document transition: `createRouter({ viewTransitions: { scope: "document" } })`, `<Link viewTransition={{ scope: "document" }}>`, `navigate({ viewTransition: { scope } })`, or a function of the location change. Navigation and link options override the router.
+- Element-scoped transitions need Chromium (CSS View Transitions Level 2). Firefox and WebKit fall back to the document transition.
+- With a boundary, selectors change: use bare or element-qualified pseudo-elements (`::view-transition-old(root)`, `main::view-transition-group(root)`). `:root::view-transition-*` and `html:active-view-transition-type(x)` match only document transitions.
+- During the transition the boundary gets `contain: layout`, so `position: fixed` elements inside it are positioned against it for the duration. Render fixed UI in a portal or the top layer.
+- Named elements (`view-transition-name`) outside the boundary do not animate; use `scope: "document"` for a morph across it.
+- In dev, the scope carries `data-flare-vt-scope` while it animates, and a boundary around no route content (a sidebar, or an element inside a page) logs a warning once.
+
 ## Rewrite
 
 Vanity URLs without changing the matched virtual path.
@@ -1129,63 +1154,64 @@ Do **not** set `flare({ port: 3000 })` in e2e apps — it steals Playwright’s
 
 Import features from their path.
 
-| Export                                  | You get                                 |
-| --------------------------------------- | --------------------------------------- |
-| `@lovrozagar/flare`                     | `createRouter`, hooks, `navigate`       |
-| `@lovrozagar/flare/router`              | `createRouter`                          |
-| `@lovrozagar/flare/page`                | `createPage`                            |
-| `@lovrozagar/flare/layout`              | `createLayout`                          |
-| `@lovrozagar/flare/root-layout`         | `createRootLayout`                      |
-| `@lovrozagar/flare/path-segment`        | `createPathSegment`                     |
-| `@lovrozagar/flare/link`                | `Link`                                  |
-| `@lovrozagar/flare/outlet`              | `Outlet`                                |
-| `@lovrozagar/flare/hydrate`             | `hydrate`                               |
-| `@lovrozagar/flare/client`              | `createClient`                          |
-| `@lovrozagar/flare/await`               | `<Await>`                               |
-| `@lovrozagar/flare/form`                | `Form`, `FieldError`                    |
-| `@lovrozagar/flare/server-fn`           | `createServerFn`                        |
-| `@lovrozagar/flare/server-fn-query`     | server fn ↔ Query                       |
-| `@lovrozagar/flare/plugins`             | `flare()`                               |
-| `@lovrozagar/flare/styles`              | `styles`, `cn`, `compileSx`             |
-| `@lovrozagar/flare/fonts`               | `FontCSS`, `createFont`                 |
-| `@lovrozagar/flare/fonts/<family>`      | `import { inter } from "…/fonts/inter"` |
-| `@lovrozagar/flare/image`               | `Image`, `configureImage`               |
-| `@lovrozagar/flare/theme`               | `ThemeScript`, `ThemeProvider`          |
-| `@lovrozagar/flare/direction`           | `DirectionScript`                       |
-| `@lovrozagar/flare/locale`              | `LocaleScript`, `LocaleProvider`        |
-| `@lovrozagar/flare/i18n`                | `createTranslations`, `formatMessage`   |
-| `@lovrozagar/flare/middleware`          | `onPage`, `virtualPath`, types          |
-| `@lovrozagar/flare/middleware/*`        | builtins                                |
-| `@lovrozagar/flare/errors`              | `NotFoundError`, redirects, auth errors |
-| `@lovrozagar/flare/security`            | `SecurityConfig`                        |
-| `@lovrozagar/flare/revalidation`        | `createRevalidateFn`                    |
-| `@lovrozagar/flare/store`               | `FlareStore`                            |
-| `@lovrozagar/flare/store-filesystem`    | disk store                              |
-| `@lovrozagar/flare/query-client`        | `createQueryClientGetter`               |
-| `@lovrozagar/flare/suspense-query`      | `useSuspenseQuery`                      |
-| `@lovrozagar/flare/broadcast`           | cross-tab                               |
-| `@lovrozagar/flare/lazy`                | `lazy`, `clientLazy`                    |
-| `@lovrozagar/flare/server`              | `createServer`                          |
-| `@lovrozagar/flare/server-context`      | ALS, `background`                       |
-| `@lovrozagar/flare/fetch-dedupe`        | `withFetchDedupe`                       |
-| `@lovrozagar/flare/server-only`         | `createServerOnlyFn`                    |
-| `@lovrozagar/flare/client-only`         | `createClientOnlyFn`                    |
-| `@lovrozagar/flare/isomorphic`          | `createIsomorphicFn`                    |
-| `@lovrozagar/flare/testing`             | Playwright helpers                      |
-| `@lovrozagar/flare/sitemap`             | sitemap XML                             |
-| `@lovrozagar/flare/search-engine`       | IndexNow / Google / Bing                |
-| `@lovrozagar/flare/rewrite`             | `LocationRewrite`                       |
-| `@lovrozagar/flare/mount`               | `mount`                                 |
-| `@lovrozagar/flare/intercept-outlet`    | `InterceptOutlet`                       |
-| `@lovrozagar/flare/navigation-progress` | `<NavigationProgress>`                  |
-| `@lovrozagar/flare/reset-css`           | `<ResetCSS>`                            |
-| `@lovrozagar/flare/view-transition-css` | `<ViewTransitionCSS>`                   |
-| `@lovrozagar/flare/prerender`           | `loadPrerenderArtifacts`                |
-| `@lovrozagar/flare/tracing`             | timing / OTel                           |
-| `@lovrozagar/flare/validation`          | `Validator`, `runValidator`             |
-| `@lovrozagar/flare/codegen`             | generated types                         |
-| `@lovrozagar/flare/generators`          | `runGenerate`                           |
-| `@lovrozagar/flare/virtual-types`       | `/// <reference types="…" />`           |
+| Export                                       | You get                                 |
+| -------------------------------------------- | --------------------------------------- |
+| `@lovrozagar/flare`                          | `createRouter`, hooks, `navigate`       |
+| `@lovrozagar/flare/router`                   | `createRouter`                          |
+| `@lovrozagar/flare/page`                     | `createPage`                            |
+| `@lovrozagar/flare/layout`                   | `createLayout`                          |
+| `@lovrozagar/flare/root-layout`              | `createRootLayout`                      |
+| `@lovrozagar/flare/path-segment`             | `createPathSegment`                     |
+| `@lovrozagar/flare/link`                     | `Link`                                  |
+| `@lovrozagar/flare/outlet`                   | `Outlet`                                |
+| `@lovrozagar/flare/hydrate`                  | `hydrate`                               |
+| `@lovrozagar/flare/client`                   | `createClient`                          |
+| `@lovrozagar/flare/await`                    | `<Await>`                               |
+| `@lovrozagar/flare/form`                     | `Form`, `FieldError`                    |
+| `@lovrozagar/flare/server-fn`                | `createServerFn`                        |
+| `@lovrozagar/flare/server-fn-query`          | server fn ↔ Query                       |
+| `@lovrozagar/flare/plugins`                  | `flare()`                               |
+| `@lovrozagar/flare/styles`                   | `styles`, `cn`, `compileSx`             |
+| `@lovrozagar/flare/fonts`                    | `FontCSS`, `createFont`                 |
+| `@lovrozagar/flare/fonts/<family>`           | `import { inter } from "…/fonts/inter"` |
+| `@lovrozagar/flare/image`                    | `Image`, `configureImage`               |
+| `@lovrozagar/flare/theme`                    | `ThemeScript`, `ThemeProvider`          |
+| `@lovrozagar/flare/direction`                | `DirectionScript`                       |
+| `@lovrozagar/flare/locale`                   | `LocaleScript`, `LocaleProvider`        |
+| `@lovrozagar/flare/i18n`                     | `createTranslations`, `formatMessage`   |
+| `@lovrozagar/flare/middleware`               | `onPage`, `virtualPath`, types          |
+| `@lovrozagar/flare/middleware/*`             | builtins                                |
+| `@lovrozagar/flare/errors`                   | `NotFoundError`, redirects, auth errors |
+| `@lovrozagar/flare/security`                 | `SecurityConfig`                        |
+| `@lovrozagar/flare/revalidation`             | `createRevalidateFn`                    |
+| `@lovrozagar/flare/store`                    | `FlareStore`                            |
+| `@lovrozagar/flare/store-filesystem`         | disk store                              |
+| `@lovrozagar/flare/query-client`             | `createQueryClientGetter`               |
+| `@lovrozagar/flare/suspense-query`           | `useSuspenseQuery`                      |
+| `@lovrozagar/flare/broadcast`                | cross-tab                               |
+| `@lovrozagar/flare/lazy`                     | `lazy`, `clientLazy`                    |
+| `@lovrozagar/flare/server`                   | `createServer`                          |
+| `@lovrozagar/flare/server-context`           | ALS, `background`                       |
+| `@lovrozagar/flare/fetch-dedupe`             | `withFetchDedupe`                       |
+| `@lovrozagar/flare/server-only`              | `createServerOnlyFn`                    |
+| `@lovrozagar/flare/client-only`              | `createClientOnlyFn`                    |
+| `@lovrozagar/flare/isomorphic`               | `createIsomorphicFn`                    |
+| `@lovrozagar/flare/testing`                  | Playwright helpers                      |
+| `@lovrozagar/flare/sitemap`                  | sitemap XML                             |
+| `@lovrozagar/flare/search-engine`            | IndexNow / Google / Bing                |
+| `@lovrozagar/flare/rewrite`                  | `LocationRewrite`                       |
+| `@lovrozagar/flare/mount`                    | `mount`                                 |
+| `@lovrozagar/flare/intercept-outlet`         | `InterceptOutlet`                       |
+| `@lovrozagar/flare/navigation-progress`      | `<NavigationProgress>`                  |
+| `@lovrozagar/flare/reset-css`                | `<ResetCSS>`                            |
+| `@lovrozagar/flare/view-transition-boundary` | `<ViewTransitionBoundary>`              |
+| `@lovrozagar/flare/view-transition-css`      | `<ViewTransitionCSS>`                   |
+| `@lovrozagar/flare/prerender`                | `loadPrerenderArtifacts`                |
+| `@lovrozagar/flare/tracing`                  | timing / OTel                           |
+| `@lovrozagar/flare/validation`               | `Validator`, `runValidator`             |
+| `@lovrozagar/flare/codegen`                  | generated types                         |
+| `@lovrozagar/flare/generators`               | `runGenerate`                           |
+| `@lovrozagar/flare/virtual-types`            | `/// <reference types="…" />`           |
 
 ## Repository layout
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@lovrozagar/flare",
-	"version": "0.9.13",
+	"version": "0.9.15",
 	"description": "Solid meta-framework. Server-driven, NDJSON streaming, renderToStream.",
 	"keywords": [
 		"flare",
@@ -89,6 +89,7 @@
 		"./theme": "./src/theme.ts",
 		"./tracing": "./src/tracing/index.ts",
 		"./validation": "./src/validation/index.ts",
+		"./view-transition-boundary": "./src/view-transition-boundary/index.tsx",
 		"./view-transition-css": "./src/view-transition-css.ts",
 		"./virtual-types": "./src/plugins/virtual.d.ts"
 	},

package/src/form/index.tsx

@@ -50,8 +50,9 @@ interface FormOwnProps<TInput, TOutput> {
 	onSuccess?: (data: TOutput) => void;
 }
 
+/* The element's own `onError` (an ErrorEvent) gives way to the action's. */
 export type FormProps<TInput, TOutput> = FormOwnProps<TInput, TOutput> &
-	Omit<JSX.FormHTMLAttributes<HTMLFormElement>, "action" | "children" | "enctype" | "method">;
+	Omit<JSX.FormHTMLAttributes<HTMLFormElement>, "action" | "children" | "enctype" | "method" | "onError">;
 
 /** Seed `form.error()` after a no-JS PE POST with form-level validation errors. */
 export function seedFormErrorFromSsr(ssrCtx: FormActionContext | undefined): Error | null {

package/src/link/index.tsx

@@ -1,3 +1,4 @@
+import type { ViewTransitionConfig } from "../outlet/types.ts";
 import { createEffect, createMemo, createSignal, omit, Show } from "solid-js";
 import type { JSX } from "@solidjs/web";
 import { applyRewriteOutput, isExternal, navigate, prefetch } from "../navigation/index.ts";
@@ -27,7 +28,7 @@ type InternalLinkProps<TPath extends RoutePaths = RoutePaths> = FlareAnchorProps
 	scroll?: boolean;
 	shallow?: boolean;
 	to: TPath;
-	viewTransition?: boolean | { types: string[] };
+	viewTransition?: ViewTransitionConfig;
 } & RouteParamsProps<TPath> &
 	RouteSearchProps<TPath>;
 
@@ -64,7 +65,7 @@ interface LinkPropsInternal {
 	style?: JSX.CSSProperties | string;
 	target?: string;
 	to?: string;
-	viewTransition?: boolean | { types: string[] };
+	viewTransition?: ViewTransitionConfig;
 }
 
 const DANGEROUS_PROTOCOLS = ["javascript:", "data:", "blob:", "vbscript:"];

package/src/logger.ts

@@ -1,10 +1,13 @@
-import defaultLevel from "virtual:flare-log-level";
-
 export type LogLevel = "error" | "silent" | "verbose" | "warn";
 
+/* A Vite `define` from Flare's plugin (its `logLevel`, else warn in dev and error in production).
+   Outside the plugin (a library's unit tests importing `cn`) the logger warns, and needs nothing
+   from Flare's build. */
+declare const __FLARE_LOG_LEVEL__: LogLevel | undefined;
+
 const PRIORITY: Record<LogLevel, number> = { error: 1, silent: 0, verbose: 3, warn: 2 };
 
-const level: LogLevel = defaultLevel;
+const level: LogLevel = typeof __FLARE_LOG_LEVEL__ === "string" ? __FLARE_LOG_LEVEL__ : "warn";
 
 export function warn(tag: string, msg: string, data?: unknown): void {
 	if (PRIORITY[level] < 2) return;

package/src/navigation/index.ts

@@ -27,7 +27,7 @@ import { isChunkLoadError, isRenderFn } from "../internal.ts";
 import { KEEPALIVE_PATH, STORAGE_CHUNK_RELOAD } from "../protocol.ts";
 import type { LocaleConfig } from "../locale.ts";
 import { formatLocaleCookie } from "../locale/cookie.ts";
-import { warn } from "../logger.ts";
+import { verbose, warn } from "../logger.ts";
 import { fetchNDJSON, type NDJSONFetchResult } from "../ndjson-client/index.ts";
 import type { DeferredResolver } from "../state-parser/index.ts";
 import { hasRawDeferredMarkers, hydrateLoaderData } from "../state-parser/index.ts";
@@ -37,6 +37,7 @@ import type {
 	LocationChangeInfo,
 	ViewTransitionConfig,
 	ViewTransitionDirection,
+	ViewTransitionScope,
 } from "../outlet/types.ts";
 import { executeRewriteInput, executeRewriteOutput, type LocationRewrite } from "../rewrite/index.ts";
 import type { HeadConfig } from "../route-builder/types.ts";
@@ -49,6 +50,9 @@ import {
 	toLocaleMatch,
 } from "../router-primitives/index.ts";
 import { buildUrl, parseSearchParams, type SearchParams, serializeSearchParams } from "../url/index.ts";
+import { allOutletNodes, outletNodes, resetOutletNodes } from "../outlet/outlet-nodes.ts";
+import { registeredBoundaries, resetViewTransitionBoundaries } from "../view-transition-boundary/registry.ts";
+import { resolveTransitionScope } from "./transition-scope.ts";
 import type { LoadedRouteModule, LoadRouteModulesFn } from "./types.ts";
 
 function extractRootIdentity(virtualPath: string): string {
@@ -87,6 +91,38 @@ function hasViewTransitions(doc: Document): doc is Document & ViewTransitionDocu
 	return "startViewTransition" in doc && typeof doc.startViewTransition === "function";
 }
 
+/* Element-scoped view transitions (CSS View Transitions Level 2). Chromium only for now. */
+function hasElementViewTransitions(): boolean {
+	return (
+		typeof Element !== "undefined" &&
+		typeof (Element.prototype as unknown as Partial<ViewTransitionDocument>).startViewTransition === "function"
+	);
+}
+
+/* The navigation transition still running, so the next one can skip it first: only a second
+ * transition on the same element aborts the first, and two running at once would both freeze
+ * content that is being swapped. */
+let activeTransition: ViewTransitionResult | null = null;
+let warnedScopedStart = false;
+const warnedMisplaced = new WeakSet<Element>();
+
+/* Dev: a boundary around no route content (a sidebar, a header, a heading inside a page) can never
+ * scope a navigation. */
+function warnMisplacedBoundaries(): void {
+	const content = allOutletNodes();
+	if (content.length === 0) return;
+	for (const boundary of registeredBoundaries()) {
+		if (warnedMisplaced.has(boundary) || !boundary.isConnected) continue;
+		/* Useful only around some outlet's content; a boundary inside a page is swapped with it. */
+		if (content.some((node) => node !== boundary && boundary.contains(node))) continue;
+		warnedMisplaced.add(boundary);
+		warn(
+			"nav",
+			`<ViewTransitionBoundary> on <${boundary.tagName.toLowerCase()}> wraps no route content, so no navigation can scope to it. Wrap the element that renders the outlet.`,
+		);
+	}
+}
+
 export type { EffectsConfig, LoadedRouteModule, LoadedRouteModules, LoadRouteModulesFn } from "./types.ts";
 
 const GC_INTERVAL = 60_000;
@@ -580,23 +616,25 @@ function hydrateCachedDeferred(cached: CachedMatch): boolean {
 }
 
 /**
- * Paint cached/prefetched matches immediately so click is not blocked on NDJSON.
- * Hydrates prefetch `{ __deferred, key }` markers so Await can track enter `c` chunks.
+ * A cached/prefetched shell to paint before the enter NDJSON hop, so a click is not blocked on it.
+ * Hydrates prefetch `{ __deferred, key }` markers so Await can track enter `c` chunks. Returns
+ * null unless every route is cached; `commit` swaps the route in, so the caller can run it inside
+ * a view transition.
  */
-function commitCachedShell(
+function prepareCachedShell(
 	c: FlareProviderContext,
 	allModules: LoadedRouteModule[],
 	rootLayout: LoadedRouteModule | undefined,
 	search: SearchParams,
 	params: Record<string, string | string[]>,
-): { hadShell: boolean; keepMatchIds: string[] } {
-	if (!ctx) return { hadShell: false, keepMatchIds: [] };
+): { commit: () => void; keepMatchIds: string[] } | null {
+	if (!ctx) return null;
 	/* Paint only a complete shell. A cached layout (hydration seeds it) with an
 	 * uncached page would mount the page with null loader data. */
 	const cachedMatches: CachedMatch[] = [];
 	for (const mod of allModules) {
 		const cached = ctx.matchCache.get(matchIdForModule(mod, search, params));
-		if (!cached || cached.invalid) return { hadShell: false, keepMatchIds: [] };
+		if (!cached || cached.invalid) return null;
 		cachedMatches.push(cached);
 	}
 	const keepMatchIds: string[] = [];
@@ -620,14 +658,16 @@ function commitCachedShell(
 		heads.push({ head, matchId });
 	}
 
-	c.setIntercepted(null);
-	c.setNotFound(false);
-	assignMatches(c, buildClientMatches(allModules, search, params));
-	c.setParams(params);
-	c.setSearch(search);
-	syncLocale(params);
-	if (heads.length > 0) applyPerRouteHeads(heads);
-	return { hadShell: true, keepMatchIds };
+	const commit = () => {
+		c.setIntercepted(null);
+		c.setNotFound(false);
+		assignMatches(c, buildClientMatches(allModules, search, params));
+		c.setParams(params);
+		c.setSearch(search);
+		syncLocale(params);
+		if (heads.length > 0) applyPerRouteHeads(heads);
+	};
+	return { commit, keepMatchIds };
 }
 
 /** Whether the params a route's own path declares kept their values. */
@@ -713,6 +753,158 @@ function assignMatches(c: FlareProviderContext, next: ReturnType<FlareProviderCo
 	c.setMatches(next);
 }
 
+function locationChange(options: InternalNavigateOptions, url: URL): LocationChangeInfo {
+	const direction: ViewTransitionDirection = options._popstateDirection ?? (options._popstate ? "back" : "forward");
+	const fromLoc = ctx
+		? {
+				hash: ctx.location().hash,
+				pathname: ctx.location().pathname,
+				search: serializeSearchParams(ctx.location().search),
+			}
+		: null;
+	const toLoc = { hash: url.hash, pathname: url.pathname, search: url.search };
+	return { direction, fromLocation: fromLoc, pathChanged: fromLoc?.pathname !== toLoc.pathname, toLocation: toLoc };
+}
+
+/* Scope precedence: navigate()/Link option, then the router default, then "auto". */
+function resolveScope(options: InternalNavigateOptions, info: () => LocationChangeInfo): ViewTransitionScope {
+	const fromNav = typeof options.viewTransition === "object" ? options.viewTransition.scope : undefined;
+	const fromRouter = typeof defaultViewTransition === "object" ? defaultViewTransition.scope : undefined;
+	const scope = fromNav ?? fromRouter ?? "auto";
+	return typeof scope === "function" ? scope(info()) : scope;
+}
+
+/** The outlet depth a commit of `allModules` replaces: the first match it does not reuse. */
+function changedDepth(allModules: LoadedRouteModule[], params: Record<string, string | string[]>): number {
+	const current = ctx?.matches() ?? [];
+	const prevParams = ctx?.params() ?? {};
+	const shared = Math.min(current.length, allModules.length);
+	for (let i = 0; i < shared; i++) {
+		const prev = current[i];
+		const mod = allModules[i];
+		if (
+			!prev ||
+			!mod ||
+			prev.virtualPath !== mod.virtualPath ||
+			prev._type !== mod._type ||
+			!ownParamsUnchanged(mod.virtualPath, prevParams, params)
+		) {
+			return i;
+		}
+	}
+	if (current.length !== allModules.length) return shared;
+	/* Nothing replaced (search-only refresh): the deepest route updates in place. */
+	return Math.max(0, allModules.length - 1);
+}
+
+/** DOM nodes a commit of `allModules` swaps, read before the commit runs. */
+function swappedNodes(allModules: LoadedRouteModule[], params: Record<string, string | string[]>): readonly Node[] {
+	return outletNodes(changedDepth(allModules, params));
+}
+
+/**
+ * Start a view transition around `update` when the config, the `types` hook and the browser allow
+ * one. `started: false` means no transition ran and `update` has not run. A started call without a
+ * transition object means the API ran `update` itself. The transition runs on the innermost
+ * <ViewTransitionBoundary> around the nodes `update` swaps when the browser supports element-scoped
+ * transitions; otherwise, or with `scope: "document"`, on the document.
+ */
+function startNavigationTransition(
+	resolvedVT: ViewTransitionConfig,
+	update: () => void,
+	options: InternalNavigateOptions,
+	url: URL,
+	swapped: () => readonly Node[],
+): { started: boolean; transition?: ViewTransitionResult } {
+	const doc = typeof document !== "undefined" ? document : null;
+	if (!doc || !hasViewTransitions(doc) || !resolvedVT) return { started: false };
+	const info = () => locationChange(options, url);
+	let types: string[] = [];
+	if (typeof resolvedVT === "object" && resolvedVT.types) {
+		const rawTypes = resolvedVT.types;
+		if (typeof rawTypes === "function") {
+			const result = rawTypes(info());
+			if (result === false) return { started: false };
+			types = result;
+		} else {
+			types = rawTypes;
+		}
+	}
+
+	/* An intercept or not-found flip is not confined to one outlet: use the document. */
+	const confined = ctx ? ctx.intercepted() === null && !ctx.notFound() : true;
+	const scopeEl =
+		confined && hasElementViewTransitions() && resolveScope(options, info) === "auto"
+			? resolveTransitionScope(registeredBoundaries(), swapped())
+			: null;
+	if (import.meta.env.DEV) {
+		warnMisplacedBoundaries();
+		verbose("nav", `view transition scope: ${scopeEl ? `<${scopeEl.tagName.toLowerCase()}>` : "document"}`);
+	}
+
+	const run = (target: ViewTransitionDocument) =>
+		types.length > 0 ? target.startViewTransition({ types, update }) : target.startViewTransition(update);
+
+	if (activeTransition) {
+		try {
+			activeTransition.skipTransition();
+		} catch {
+			/* already finished */
+		}
+		activeTransition = null;
+	}
+
+	let transition: ViewTransitionResult | undefined;
+	if (scopeEl) {
+		try {
+			transition = run(scopeEl as unknown as ViewTransitionDocument);
+		} catch (e: unknown) {
+			if (!warnedScopedStart) {
+				warnedScopedStart = true;
+				warn("nav", "element-scoped view transition failed; using a document transition", e);
+			}
+			transition = run(doc);
+		}
+	} else {
+		transition = run(doc);
+	}
+	if (transition) {
+		activeTransition = transition;
+		/* Dev: mark the scope while it animates, for devtools and tests. */
+		const marked = import.meta.env.DEV && scopeEl && transition !== undefined ? scopeEl : null;
+		marked?.setAttribute("data-flare-vt-scope", "");
+		const settled = () => {
+			if (activeTransition === transition) activeTransition = null;
+			marked?.removeAttribute("data-flare-vt-scope");
+		};
+		transition.finished.then(settled, settled);
+	}
+	return { started: true, transition };
+}
+
+/** Enter "transitioning" for a transition whose route swap has landed; "idle" once it finishes.
+ * The version check keeps a superseded navigation's transition from resetting the phase. */
+function trackTransition(transition: ViewTransitionResult, version: number): void {
+	if (!ctx) return;
+	ctx.setNavigationPhase("transitioning");
+	ctx.setViewTransition(transition);
+	transition.finished.then(
+		() => {
+			if (ctx && version === navigationVersion) {
+				ctx.setNavigationPhase("idle");
+				ctx.setViewTransition(null);
+			}
+		},
+		(e: unknown) => {
+			warn("nav", "view transition finished with error", e);
+			if (ctx && version === navigationVersion) {
+				ctx.setNavigationPhase("idle");
+				ctx.setViewTransition(null);
+			}
+		},
+	);
+}
+
 /** Apply view transition with VT API, or call update() directly as fallback.
  * Returns a promise that resolves after update() has executed so navigate()
  * callers can rely on state being settled when the promise resolves.
@@ -726,100 +918,38 @@ async function applyViewTransition(
 	options: InternalNavigateOptions,
 	url: URL,
 	version: number,
+	swapped: () => readonly Node[],
 ): Promise<void> {
-	const doc = typeof document !== "undefined" ? document : null;
-	if (doc && hasViewTransitions(doc) && resolvedVT) {
-		const startVT = doc.startViewTransition.bind(doc);
-
-		let transition: ViewTransitionResult | undefined;
-		try {
-			if (typeof resolvedVT === "object" && resolvedVT.types) {
-				const rawTypes = resolvedVT.types;
-				if (typeof rawTypes === "function") {
-					const direction: ViewTransitionDirection =
-						options._popstateDirection ?? (options._popstate ? "back" : "forward");
-					const fromLoc = ctx
-						? {
-								hash: ctx.location().hash,
-								pathname: ctx.location().pathname,
-								search: serializeSearchParams(ctx.location().search),
-							}
-						: null;
-					const toLoc = { hash: url.hash, pathname: url.pathname, search: url.search };
-					const info: LocationChangeInfo = {
-						direction,
-						fromLocation: fromLoc,
-						pathChanged: fromLoc?.pathname !== toLoc.pathname,
-						toLocation: toLoc,
-					};
-					const result = rawTypes(info);
-					if (result === false) {
-						update();
-						stopNavigation();
-						return;
-					}
-					if (result.length > 0) {
-						transition = startVT({ types: result, update });
-					} else {
-						transition = startVT(update);
-					}
-				} else if (rawTypes.length > 0) {
-					transition = startVT({ types: rawTypes, update });
-				} else {
-					transition = startVT(update);
-				}
-			} else {
-				transition = startVT(update);
-			}
-		} catch (e: unknown) {
-			warn("nav", "view transition API failed", e);
-			update();
-			stopNavigation();
-			return;
-		}
-
-		if (transition) {
-			/**
-			 * WebKit rejects transition.ready with AbortError when a new startViewTransition
-			 * call replaces an in-flight one. Chromium swallows this internally but WebKit
-			 * surfaces it as an unhandledrejection, which triggers the dev error overlay and
-			 * blocks pointer events. The finished promise is already handled below.
-			 */
-			transition.ready.catch(() => {});
-
-			await transition.updateCallbackDone;
-
-			/* State is settled — enter transitioning phase while VT animation plays */
-			if (ctx) {
-				ctx.setNavigationPhase("transitioning");
-				ctx.setViewTransition(transition);
-			}
-
-			/* Wire finished → idle (catch rejection too — VT can be skipped/aborted).
-			 * Version check prevents stale VT from resetting phase when a new navigation superseded this one. */
-			transition.finished.then(
-				() => {
-					if (ctx && version === navigationVersion) {
-						ctx.setNavigationPhase("idle");
-						ctx.setViewTransition(null);
-					}
-				},
-				(e: unknown) => {
-					warn("nav", "view transition finished with error", e);
-					if (ctx && version === navigationVersion) {
-						ctx.setNavigationPhase("idle");
-						ctx.setViewTransition(null);
-					}
-				},
-			);
-		} else {
-			/* startVT returned void/undefined — update ran inside it, just clean up */
-			stopNavigation();
-		}
-	} else {
+	let started: ReturnType<typeof startNavigationTransition>;
+	try {
+		started = startNavigationTransition(resolvedVT, update, options, url, swapped);
+	} catch (e: unknown) {
+		warn("nav", "view transition API failed", e);
+		update();
+		stopNavigation();
+		return;
+	}
+	if (!started.started) {
 		update();
 		stopNavigation();
+		return;
 	}
+	const transition = started.transition;
+	if (!transition) {
+		/* startVT returned void/undefined — update ran inside it, just clean up */
+		stopNavigation();
+		return;
+	}
+	/**
+	 * WebKit rejects transition.ready with AbortError when a new startViewTransition
+	 * call replaces an in-flight one. Chromium swallows this internally but WebKit
+	 * surfaces it as an unhandledrejection, which triggers the dev error overlay and
+	 * blocks pointer events. The finished promise is handled in trackTransition.
+	 */
+	transition.ready.catch(() => {});
+	await transition.updateCallbackDone;
+	/* State is settled — enter transitioning phase while VT animation plays */
+	trackTransition(transition, version);
 }
 
 export async function navigate(options: InternalNavigateOptions, redirectCount = 0): Promise<void> {
@@ -1129,6 +1259,9 @@ export async function navigate(options: InternalNavigateOptions, redirectCount =
 	}
 
 	let paintedShell = false;
+	/* The view transition started around the cached shell, if one was painted. */
+	let shellTransition: ViewTransitionResult | undefined;
+	let shellCommitted: Promise<void> | undefined;
 	let paintedModules: LoadedRouteModule[] | undefined;
 	let paintedSearch: SearchParams | undefined;
 	let paintedParams: Record<string, string | string[]> | undefined;
@@ -1166,6 +1299,8 @@ export async function navigate(options: InternalNavigateOptions, redirectCount =
 		const rootLayout = modules.layouts.find((m) => m._type === "root-layout");
 		const headModules = rootLayout ? [rootLayout, ...allModules] : allModules;
 
+		const resolvedVT = options.viewTransition ?? defaultViewTransition;
+
 		/* Instant navigation: reuse in-flight prefetch and paint a cached shell
 		 * before the enter NDJSON hop. Skipped when this nav already fetched in
 		 * parallel (first visit, no cache). */
@@ -1184,29 +1319,52 @@ export async function navigate(options: InternalNavigateOptions, redirectCount =
 				}
 			}
 			if (controller.signal.aborted || myVersion !== navigationVersion) return;
-			const shell = commitCachedShell(c, allModules, rootLayout, search, modules.params);
-			hadShell = shell.hadShell;
-			paintedShell = shell.hadShell;
-			if (shell.hadShell) {
+			const shell = prepareCachedShell(c, allModules, rootLayout, search, modules.params);
+			if (shell) {
+				hadShell = true;
+				paintedShell = true;
 				paintedModules = allModules;
 				paintedSearch = search;
 				paintedParams = modules.params;
-			}
-			keepMatchIds = shell.keepMatchIds;
-			/* Restore before the next paint so back/forward does not flash at y=0
-			 * while the enter hop (or the post-update rAF) is still outstanding. */
-			if (hadShell && scrollRestorationEnabled) {
-				flush();
-				if (options._restoreScroll) {
-					restoreScroll(options._restoreScroll, "auto");
-				} else if (options.scroll !== false) {
-					if (url.hash) {
-						const el = typeof document !== "undefined" ? document.getElementById(url.hash.slice(1)) : null;
-						if (el) el.scrollIntoView();
-						else scrollToTop();
-					} else {
-						scrollToTop();
+				keepMatchIds = shell.keepMatchIds;
+				const paint = () => {
+					if (myVersion !== navigationVersion) return;
+					shell.commit();
+					/* Restore before the next paint so back/forward does not flash at y=0
+					 * while the enter hop (or the post-update rAF) is still outstanding. */
+					if (!scrollRestorationEnabled) return;
+					flush();
+					if (options._restoreScroll) {
+						restoreScroll(options._restoreScroll, "auto");
+					} else if (options.scroll !== false) {
+						if (url.hash) {
+							const el = typeof document !== "undefined" ? document.getElementById(url.hash.slice(1)) : null;
+							if (el) el.scrollIntoView();
+							else scrollToTop();
+						} else {
+							scrollToTop();
+						}
 					}
+				};
+				/* The shell is the first route swap, so the navigation's one view transition wraps it;
+				 * the post-fetch update below then runs outside any transition. */
+				let started: ReturnType<typeof startNavigationTransition> = { started: false };
+				try {
+					started = startNavigationTransition(resolvedVT, paint, options, url, () =>
+						swappedNodes(allModules, modules.params),
+					);
+				} catch (e: unknown) {
+					warn("nav", "view transition API failed", e);
+				}
+				if (started.transition) {
+					shellTransition = started.transition;
+					shellTransition.ready.catch(() => {});
+					shellTransition.finished.catch(() => {});
+					shellCommitted = shellTransition.updateCallbackDone.catch(() => {});
+					/* Phase stays "loading" until the data lands; the transition is visible meanwhile. */
+					ctx.setViewTransition(shellTransition);
+				} else if (!started.started) {
+					paint();
 				}
 			}
 		}
@@ -1488,11 +1646,25 @@ export async function navigate(options: InternalNavigateOptions, redirectCount =
 		/* Step 13: Apply view transition or direct update.
 		 * Await ensures navigate() doesn't resolve until update() has run,
 		 * so callers see settled state (matches, params, head) after await.
-		 * Phase management is handled by applyViewTransition:
-		 * - VT path: "transitioning" after updateCallbackDone, "idle" on finished
-		 * - No VT: "idle" immediately after update() */
-		const resolvedVT = options.viewTransition ?? defaultViewTransition;
-		await applyViewTransition(resolvedVT, update, options, url, myVersion);
+		 * One transition per navigation, around the first route swap:
+		 * - Shell painted inside a transition: wait for that paint, then update outside it;
+		 *   "transitioning" while it still animates, "idle" when it finishes.
+		 * - Otherwise applyViewTransition wraps this update ("transitioning" after
+		 *   updateCallbackDone, "idle" on finished), or runs it directly. */
+		if (shellTransition) {
+			await shellCommitted;
+			if (myVersion !== navigationVersion) return;
+			update();
+			trackTransition(shellTransition, myVersion);
+		} else if (hadShell) {
+			/* The shell already swapped the route without a transition; don't start one now. */
+			update();
+			stopNavigation();
+		} else {
+			await applyViewTransition(resolvedVT, update, options, url, myVersion, () =>
+				swappedNodes(allModules, modules.params),
+			);
+		}
 	} catch (error: unknown) {
 		if (error instanceof RedirectResponse) {
 			if (error.external) {
@@ -1667,6 +1839,10 @@ export function hardNavigate(href: string): void {
 
 export function resetNavigationState(): void {
 	ctx = null;
+	activeTransition = null;
+	warnedScopedStart = false;
+	resetOutletNodes();
+	resetViewTransitionBoundaries();
 	currentController = null;
 	navigationVersion = 0;
 	scrollStore = null;

package/src/navigation/transition-scope.ts

@@ -0,0 +1,41 @@
+import { warn } from "../logger.ts";
+
+const warned = new WeakSet<Element>();
+
+/*
+ * Element-scoped view transitions need a box: the browser rejects `display: contents`, inline and
+ * SVG scopes (`ready` rejects with InvalidStateError) and silently skips hidden or detached ones.
+ */
+function canScope(element: Element): boolean {
+	if (!element.isConnected) return false;
+	if (element === element.ownerDocument.documentElement) return false;
+	if (typeof SVGElement !== "undefined" && element instanceof SVGElement) return false;
+	const display = getComputedStyle(element).display;
+	if (display === "contents" || display === "none" || display.startsWith("inline")) {
+		if (!warned.has(element)) {
+			warned.add(element);
+			warn("nav", `<ViewTransitionBoundary> child has display: ${display}; using a document transition`);
+		}
+		return false;
+	}
+	return true;
+}
+
+/**
+ * The element to scope a navigation's view transition to: the innermost boundary that contains
+ * every node the update swaps and is not inside any of them (the update would remove it). Null
+ * means a document transition.
+ */
+export function resolveTransitionScope(boundaries: Iterable<Element>, swapped: readonly Node[]): Element | null {
+	if (swapped.length === 0) return null;
+	const survivors: Element[] = [];
+	for (const boundary of new Set(boundaries)) {
+		if (!canScope(boundary)) continue;
+		if (!swapped.every((node) => boundary !== node && boundary.contains(node))) continue;
+		if (swapped.some((node) => node.contains(boundary))) continue;
+		survivors.push(boundary);
+	}
+	return (
+		survivors.find((candidate) => !survivors.some((other) => other !== candidate && candidate.contains(other))) ?? null
+	);
+}

package/src/outlet/index.tsx

@@ -1,5 +1,6 @@
 import {
 	type Accessor,
+	children,
 	createContext,
 	createEffect,
 	createMemo,
@@ -20,6 +21,7 @@ import { NotFoundError, UnauthenticatedError, UnauthorizedError } from "../error
 import { createTranslator } from "../i18n/index.ts";
 import { clearPendingNavigation, proceedPendingNavigation, setActiveBlocker } from "../navigation/index.ts";
 import { matchRoute, toLocaleMatch } from "../router-primitives/tree.ts";
+import { setOutletNodes } from "./outlet-nodes.ts";
 import { buildUrl, parseSearchParams, type SearchParams } from "../url/index.ts";
 import type {
 	BrowserViewTransition,
@@ -55,6 +57,7 @@ export type {
 	ViewTransitionConfig,
 	ViewTransitionDirection,
 	ViewTransitionOptions,
+	ViewTransitionScope,
 } from "./types.ts";
 
 /** Default `null` (not `undefined`) — Solid 2 throws ContextNotFoundError when default is undefined. */
@@ -487,7 +490,7 @@ function OutletContent(props: { depth: number; fallback?: JSX.Element }): JSX.El
 	 * values. Instant shells reuse the same match object so local page signals
 	 * survive; a new object (different route or error identity) must remount.
 	 */
-	return (
+	const content = children(() => (
 		<Show
 			fallback={ctx.notFound() && props.depth === 0 ? resolveNotFoundBoundary(ctx, props.depth) : null}
 			keyed
@@ -495,7 +498,14 @@ function OutletContent(props: { depth: number; fallback?: JSX.Element }): JSX.El
 		>
 			{(m) => <MatchOutlet depth={props.depth} fallback={props.fallback} match={m} />}
 		</Show>
-	) as JSX.Element;
+	));
+	/* Record what this depth renders so a navigation can scope its view transition to the
+	 * <ViewTransitionBoundary> around it. */
+	createEffect(
+		() => content.toArray().filter((n): n is Node => typeof Node !== "undefined" && n instanceof Node),
+		(nodes) => setOutletNodes(props.depth, nodes),
+	);
+	return content as unknown as JSX.Element;
 }
 
 function MatchOutlet(props: { depth: number; fallback?: JSX.Element; match: ClientMatch }): JSX.Element {

package/src/outlet/outlet-nodes.ts

@@ -0,0 +1,26 @@
+/*
+ * The DOM nodes each outlet depth currently renders. Navigation reads the depth an update swaps
+ * to scope its view transition to the boundary around them. Internal.
+ */
+const nodesByDepth = new Map<number, readonly Node[]>();
+
+export function setOutletNodes(depth: number, nodes: readonly Node[]): () => void {
+	nodesByDepth.set(depth, nodes);
+	return () => {
+		if (nodesByDepth.get(depth) === nodes) nodesByDepth.delete(depth);
+	};
+}
+
+export function outletNodes(depth: number): readonly Node[] {
+	return nodesByDepth.get(depth) ?? [];
+}
+
+/** Every node any outlet depth renders. */
+export function allOutletNodes(): Node[] {
+	return [...nodesByDepth.values()].flat();
+}
+
+/** Tests only. */
+export function resetOutletNodes(): void {
+	nodesByDepth.clear();
+}

package/src/outlet/types.ts

@@ -27,8 +27,15 @@ export interface LocationChangeInfo {
 	toLocation: { hash: string; pathname: string; search: string };
 }
 
+/**
+ * Where a navigation's view transition runs. "auto": the innermost <ViewTransitionBoundary> around
+ * the swapped route content, else the document. "document": always the document.
+ */
+export type ViewTransitionScope = "auto" | "document";
+
 export interface ViewTransitionOptions {
-	types: string[] | ((info: LocationChangeInfo) => string[] | false);
+	scope?: ViewTransitionScope | ((info: LocationChangeInfo) => ViewTransitionScope);
+	types?: string[] | ((info: LocationChangeInfo) => string[] | false);
 }
 
 export type ViewTransitionConfig = boolean | ViewTransitionOptions;

package/src/plugins/virtual.d.ts

@@ -25,11 +25,6 @@ declare module "virtual:flare-is-dev" {
 	export default isDev;
 }
 
-declare module "virtual:flare-log-level" {
-	const level: "error" | "silent" | "verbose" | "warn";
-	export default level;
-}
-
 declare module "virtual:flare-config" {
 	const config: Record<string, unknown>;
 	export default config;

package/src/plugins/virtual.ts

@@ -80,6 +80,7 @@ export function createVirtualPlugin(
 			return {
 				define: {
 					__FLARE_IS_DEV__: JSON.stringify(isDevMode),
+					__FLARE_LOG_LEVEL__: JSON.stringify(config.logLevel ?? (isDevMode ? "warn" : "error")),
 				},
 			};
 		},
@@ -129,11 +130,6 @@ export function createVirtualPlugin(
 				const dev = isDevMode || this.environment?.config?.mode === "development";
 				return { code: `export default ${dev}`, moduleType: "js" };
 			}
-			if (id === "\0virtual:flare-log-level") {
-				const dev = isDevMode || this.environment?.config?.mode === "development";
-				const level = config.logLevel ?? (dev ? "warn" : "error");
-				return { code: `export default "${level}"`, moduleType: "js" };
-			}
 			if (id === "\0virtual:flare-module-preloads") {
 				const mode = this.environment?.config?.mode ?? "production";
 				if (mode === "development") {
@@ -180,7 +176,6 @@ export function createVirtualPlugin(
 			if (id === "virtual:flare-client-entry") return "\0virtual:flare-client-entry";
 			if (id === "virtual:flare-generated") return "\0virtual:flare-generated";
 			if (id === "virtual:flare-is-dev") return "\0virtual:flare-is-dev";
-			if (id === "virtual:flare-log-level") return "\0virtual:flare-log-level";
 			if (id === "virtual:flare-module-preloads") return "\0virtual:flare-module-preloads";
 			if (id === "virtual:flare-sx-manifest") return "\0virtual:flare-sx-manifest";
 			return null;

package/src/router-config/index.ts

@@ -1,3 +1,4 @@
+import type { ViewTransitionConfig } from "../outlet/types.ts";
 import type { DirectionConfig } from "../direction.ts";
 import type { LocaleConfig } from "../locale/index.tsx";
 import type { LocationRewrite } from "../rewrite/index.ts";
@@ -8,7 +9,7 @@ import type { ThemeConfig } from "../theme.ts";
 
 export type PrefetchStrategy = false | "intent" | "render" | "viewport";
 export type TrailingSlashMode = "always" | "never" | "preserve";
-export type ViewTransitionDefaults = boolean | { types: string[] };
+export type ViewTransitionDefaults = ViewTransitionConfig;
 
 export interface RouterCacheConfig {
 	client?: ClientCacheConfig | false;

package/src/router.ts

@@ -19,6 +19,7 @@ export type {
 	ViewTransitionConfig,
 	ViewTransitionDirection,
 	ViewTransitionOptions,
+	ViewTransitionScope,
 } from "./outlet/index.tsx";
 export { useRouter } from "./outlet/index.tsx";
 export type {

package/src/view-transition-boundary/index.tsx

@@ -0,0 +1,51 @@
+import { children, createEffect } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { registerBoundary } from "./registry.ts";
+
+const MISUSE = "<ViewTransitionBoundary> needs exactly one element child (it renders no wrapper of its own); got";
+
+let reportedMisuse = false;
+
+function describeNodes(nodes: unknown[]): string {
+	return nodes
+		.map((n) => (n instanceof Element ? `<${n.tagName.toLowerCase()}>` : typeof n === "string" ? "text" : String(n)))
+		.join(", ");
+}
+
+/**
+ * Scope view transitions of navigations inside it to its child element: content outside (sidebar,
+ * header, tabs) keeps hover, clicks and CSS transitions while the child animates.
+ *
+ * ```tsx
+ * <aside>…</aside>
+ * <ViewTransitionBoundary>
+ *   <main>{props.children}</main>
+ * </ViewTransitionBoundary>
+ * ```
+ *
+ * Renders its child unchanged. The child must resolve to exactly one element; a component child
+ * works when it renders one root element, and an empty child (a false `<Show>`) is inactive.
+ */
+export function ViewTransitionBoundary(props: { children: JSX.Element }): JSX.Element {
+	const resolved = children(() => props.children);
+
+	createEffect(
+		() => resolved.toArray().filter((n) => n !== null && n !== undefined && n !== false && n !== ""),
+		(nodes) => {
+			if (nodes.length === 0) return;
+			const [node] = nodes;
+			if (nodes.length > 1 || !(node instanceof Element)) {
+				const message = `${MISUSE} ${describeNodes(nodes)}`;
+				if (import.meta.env.DEV) throw new Error(message);
+				if (!reportedMisuse) {
+					reportedMisuse = true;
+					console.error(message);
+				}
+				return;
+			}
+			return registerBoundary(node);
+		},
+	);
+
+	return resolved as unknown as JSX.Element;
+}

package/src/view-transition-boundary/registry.ts

@@ -0,0 +1,22 @@
+/*
+ * Elements that may scope a navigation's view transition. Navigation picks the innermost one that
+ * wraps the swapped route content; none → a document transition. Internal: not a public export.
+ */
+const boundaries = new Set<Element>();
+
+/** Registered boundary elements, in registration order. */
+export function registeredBoundaries(): ReadonlySet<Element> {
+	return boundaries;
+}
+
+export function registerBoundary(element: Element): () => void {
+	boundaries.add(element);
+	return () => {
+		boundaries.delete(element);
+	};
+}
+
+/** Clear the registry. Tests only. */
+export function resetViewTransitionBoundaries(): void {
+	boundaries.clear();
+}