@markless/router 0.8.0 → 0.9.0

package/dist/{create-server-entry-BsYTWdxi.js → create-server-entry-CVhSjR45.js}

@@ -1,4 +1,4 @@
-import { a as ROUTE_SCRIPT_TYPE, c as servedHtmlAttributesScript, d as REPLACE_ATTRIBUTE, f as SCROLL_ATTRIBUTE, i as HTML_ATTRIBUTES_SLOT, l as LINK_ATTRIBUTE, n as requestLocals, o as SERVED_HTML_ATTRIBUTES_PROPERTY, r as takeMiddlewareHeaders, u as PREFETCH_ATTRIBUTE } from "./request-locals-BDAhNpEa.js";
+import { a as ROUTE_SCRIPT_TYPE, d as PREFETCH_ATTRIBUTE, f as REPLACE_ATTRIBUTE, i as HTML_ATTRIBUTES_SLOT, l as servedHtmlAttributesScript, n as requestLocals, o as SERVED_BODY_ATTRIBUTES_PROPERTY, p as SCROLL_ATTRIBUTE, r as takeMiddlewareHeaders, s as SERVED_HTML_ATTRIBUTES_PROPERTY, u as LINK_ATTRIBUTE } from "./request-locals-BPfJaoM_.js";
 import { i as matchRouteManifest, n as buildRouteManifestFromFileIds, o as normalizeRouteFileId } from "./route-manifest-DmoxXanW.js";
 import { n as __marklessDebugBootstrapSource } from "./debug-channel-Di6SppZv.js";
 import { CONTAINER_ATTRIBUTE, PROTOCOL_CONTAINER_END_COMMENT, PROTOCOL_CONTAINER_START_COMMENT, PROTOCOL_LOCATOR_PATHS_ATTRIBUTE } from "@markless/web/fns/container-region";
@@ -252,13 +252,27 @@ function runFragmentNavigation(d, config, routes, importModule, scrolled, arrivi
 			d.head.appendChild(link);
 		}
 	};
+	const parseAsLoaded = (html) => {
+		const raw = [];
+		const emptied = html.replace(/<!--[\s\S]*?-->|<(script|style|textarea|title)\b[^>]*>[\s\S]*?<\/\1\s*>|<noscript\b([^>]*)>([\s\S]*?)<\/noscript\s*>/gi, (match, _rawText, attributes, content) => {
+			if (content === void 0) return match;
+			raw.push(content);
+			return `<noscript${attributes ?? ""}></noscript>`;
+		});
+		if (!raw.length) return new DOMParser().parseFromString(html, "text/html");
+		const doc = new DOMParser().parseFromString(emptied, "text/html");
+		const tags = doc.getElementsByTagName("noscript");
+		if (tags.length !== raw.length) return new DOMParser().parseFromString(html, "text/html");
+		for (let index = 0; index < tags.length; index++) tags[index].textContent = raw[index];
+		return doc;
+	};
 	const parse = (url, text) => {
 		const at = text.indexOf(config.regionEndMarker);
 		const prefix = at === -1 ? text : text.slice(0, at);
 		return {
 			url,
 			prefix,
-			doc: new DOMParser().parseFromString(prefix, "text/html"),
+			doc: parseAsLoaded(prefix),
 			tail: at === -1 ? "" : text.slice(at + config.regionEndMarker.length)
 		};
 	};
@@ -876,7 +890,7 @@ function createServerEntry(options) {
 			resumeModuleUrl: options.resumeEntryPath ?? baseArtifact?.resumeModuleUrl,
 			modulePreloads: (html, resumes) => landingModulePreloads(resumes ? options.routeSsrModulePreloads?.[file] : void 0, linkBridges?.[html.includes("href=\"#/") ? 1 : 0])
 		};
-		const headStart = (documentLoads && fragmentNavigation && !fragment ? servedHtmlAttributesScript() : "") + (fragment ? "" : options.importMap ?? "");
+		const headStart = (fragmentNavigation && !fragment ? servedHtmlAttributesScript() : "") + (fragment ? "" : options.importMap ?? "");
 		if (options.render === "blocking") {
 			const pageHtml = splitPageHtml(await renderToString(routedArtifact, renderOptions));
 			privateToVisitor();
@@ -1014,7 +1028,17 @@ function landingModulePreloads(routePreloads, linkBridgePath) {
 	const preloads = [];
 	addModulePreloads(preloads, /* @__PURE__ */ new Set(), routePreloads);
 	if (linkBridgePath) preloads.push(linkBridgePath);
-	return preloads.length > 0 ? preloads : void 0;
+	return preloads.length > 0 ? preloads.map(lowFetchPriority) : void 0;
+}
+function lowFetchPriority(preload) {
+	if (typeof preload === "string") return {
+		href: preload,
+		fetchPriority: "low"
+	};
+	return preload.fetchPriority ? preload : {
+		...preload,
+		fetchPriority: "low"
+	};
 }
 function routerLinkHrefs(html) {
 	return [...html.matchAll(/<a\b(?=[^>]*\bdata-markless-router-link(?:[\s=>]|$))(?=[^>]*\bhref="([^"]*)")[^>]*>/g)].map((match) => unescapeHtmlAttribute(match[1] ?? ""));
@@ -1290,6 +1314,7 @@ function fragmentConfig(fragment, documentLoads) {
 		scrollAttribute: SCROLL_ATTRIBUTE,
 		routeScriptType: ROUTE_SCRIPT_TYPE,
 		servedHtmlAttributesProperty: SERVED_HTML_ATTRIBUTES_PROPERTY,
+		servedBodyAttributesProperty: SERVED_BODY_ATTRIBUTES_PROPERTY,
 		retireProperty: CONTAINER_RETIRE_PROPERTY,
 		streamExecutorGlobal: STREAM_ARM_EXECUTOR_GLOBAL,
 		streamedArmSelector: STREAMED_ARM_SELECTOR,

package/dist/index.js

@@ -1,4 +1,4 @@
-import { d as REPLACE_ATTRIBUTE, f as SCROLL_ATTRIBUTE, i as HTML_ATTRIBUTES_SLOT, l as LINK_ATTRIBUTE, s as routeMountTarget, t as rememberRequestLocals, u as PREFETCH_ATTRIBUTE } from "./request-locals-BDAhNpEa.js";
+import { c as routeMountTarget, d as PREFETCH_ATTRIBUTE, f as REPLACE_ATTRIBUTE, i as HTML_ATTRIBUTES_SLOT, p as SCROLL_ATTRIBUTE, t as rememberRequestLocals, u as LINK_ATTRIBUTE } from "./request-locals-BPfJaoM_.js";
 import { a as normalizeRequestPathname, c as parseRequestFile, i as matchRouteManifest, l as transformRequestFileSource, n as buildRouteManifestFromFileIds, o as normalizeRouteFileId, s as normalizeRequestFileId } from "./route-manifest-DmoxXanW.js";
 import { createExternalDelegateStructureTokens, createExternalDelegateView } from "@markless/web/fns/external-delegate";
 import { render } from "@markless/web/render";

package/dist/{request-locals-BDAhNpEa.js → request-locals-BPfJaoM_.js}

@@ -9,8 +9,9 @@ const PREFETCH_ATTRIBUTE = "data-markless-router-prefetch";
 const ROUTE_SCRIPT_TYPE = "@markless/core/route";
 const HTML_ATTRIBUTES_SLOT = "__marklessRouterHtmlAttributes";
 const SERVED_HTML_ATTRIBUTES_PROPERTY = "__marklessServedHtmlAttributes";
+const SERVED_BODY_ATTRIBUTES_PROPERTY = "__marklessServedBodyAttributes";
 function servedHtmlAttributesScript() {
-	return `<script>document.documentElement.${SERVED_HTML_ATTRIBUTES_PROPERTY}=document.documentElement.getAttributeNames()<\/script>`;
+	return `<script>(()=>{const r=document.documentElement,p=(e)=>Array.from(e.attributes,(a)=>[a.name,a.value]),b=()=>!!document.body&&!!(r.${SERVED_BODY_ATTRIBUTES_PROPERTY}=p(document.body));r.${SERVED_HTML_ATTRIBUTES_PROPERTY}=p(r);b()||new MutationObserver((_,o)=>{b()&&o.disconnect()}).observe(r,{childList:true})})()<\/script>`;
 }
 function routeMountTarget(document, currentRoot) {
 	const root = currentRoot ?? document.querySelector(`script[type="@markless/core/route"]`)?.parentElement;
@@ -91,4 +92,4 @@ function takeMiddlewareHeaders(request) {
 	return record.taken;
 }
 //#endregion
-export { ROUTE_SCRIPT_TYPE as a, servedHtmlAttributesScript as c, REPLACE_ATTRIBUTE as d, SCROLL_ATTRIBUTE as f, HTML_ATTRIBUTES_SLOT as i, LINK_ATTRIBUTE as l, requestLocals as n, SERVED_HTML_ATTRIBUTES_PROPERTY as o, takeMiddlewareHeaders as r, routeMountTarget as s, rememberRequestLocals as t, PREFETCH_ATTRIBUTE as u };
+export { ROUTE_SCRIPT_TYPE as a, routeMountTarget as c, PREFETCH_ATTRIBUTE as d, REPLACE_ATTRIBUTE as f, HTML_ATTRIBUTES_SLOT as i, servedHtmlAttributesScript as l, requestLocals as n, SERVED_BODY_ATTRIBUTES_PROPERTY as o, SCROLL_ATTRIBUTE as p, takeMiddlewareHeaders as r, SERVED_HTML_ATTRIBUTES_PROPERTY as s, rememberRequestLocals as t, LINK_ATTRIBUTE as u };

package/dist/vite/runtime/create-server-entry.js

@@ -1 +1 @@
-export { t as createServerEntry, n as routerLinkBridgeModules } from "../../create-server-entry-BsYTWdxi.js";
+export { t as createServerEntry, n as routerLinkBridgeModules } from "../../create-server-entry-CVhSjR45.js";

package/dist/vite/runtime/mdx-route.d.ts

@@ -93,6 +93,7 @@ type ProtocolStatePayload = {
       readonly key: unknown;
       readonly error: unknown;
     };
+    readonly hostScope?: string;
   }>;
   readonly sharedSeeds?: ReadonlyArray<{
     readonly graphNodeId: string;
@@ -866,7 +867,7 @@ type ResumeDomElement = ResumeDomNode & {
   readonly dispatchEvent?: (event: ResumeSharedPatchEvent) => boolean;
   readonly setAttribute?: (name: string, value: string) => void;
   readonly removeAttribute?: (name: string) => void;
-  __marklessDelegatedDispatch?: boolean;
+  __marklessDelegatedDispatch?: boolean | string;
   __marklessListen?: (eventType: string) => void;
   __marklessDispatch?: (input: {
     readonly root: ResumeDomElement;

package/dist/vite/runtime/mdx-route.js

@@ -4,7 +4,7 @@ import { i as protocolStateVersion, n as protocolInstanceQualifies, t as protoco
 /** The field names each templated record list may spell, in the order its templates index them. */
 const PROTOCOL_RECORD_KEYS = {
 	"markless/state": {
-		computed: "graphNodeId name async deriveSymbolId value version root $type $ref source flags records id type fields items entries values bytes arrayType buffer byteOffset length byteLength directValue dependencies path snapshot status key error",
+		computed: "graphNodeId name async deriveSymbolId value version root $type $ref source flags records id type fields items entries values bytes arrayType buffer byteOffset length byteLength directValue dependencies path snapshot status key error hostScope",
 		sharedSeeds: "graphNodeId deriveSymbolId dependencies path reads",
 		sharedDefinitions: "id name exportedName scope version graphNodeIds projectionIds dependencies definitionId definitionName returnProperties kind graphNodeId path"
 	},

package/dist/vite.js

@@ -1,8 +1,8 @@
-import { d as REPLACE_ATTRIBUTE, f as SCROLL_ATTRIBUTE, l as LINK_ATTRIBUTE, u as PREFETCH_ATTRIBUTE } from "./request-locals-BDAhNpEa.js";
+import { d as PREFETCH_ATTRIBUTE, f as REPLACE_ATTRIBUTE, p as SCROLL_ATTRIBUTE, u as LINK_ATTRIBUTE } from "./request-locals-BPfJaoM_.js";
 import { i as matchRouteManifest, l as transformRequestFileSource, n as buildRouteManifestFromFileIds, o as normalizeRouteFileId, r as isPageModuleFile, t as assertNoEndpointConflicts } from "./route-manifest-DmoxXanW.js";
 import { t as __marklessRouteHref } from "./route-href-CGooO_g6.js";
 import { r as protocolIslandSegment } from "./protocol-constants-B4WxrZAS.js";
-import { a as runFragmentNavigation, c as listenForLinkIntent, i as FRAGMENT_PATH_PREFIX, n as routerLinkBridgeModules, o as startFragmentNavigation, s as documentHandlersMessage } from "./create-server-entry-BsYTWdxi.js";
+import { a as runFragmentNavigation, c as listenForLinkIntent, i as FRAGMENT_PATH_PREFIX, n as routerLinkBridgeModules, o as startFragmentNavigation, s as documentHandlersMessage } from "./create-server-entry-CVhSjR45.js";
 import { dirname, extname, isAbsolute, join, normalize, relative, resolve } from "pathe";
 import { decodePath, joinURL, parsePath, parseQuery, parseURL, stringifyQuery, withLeadingSlash, withQuery, withoutBase, withoutLeadingSlash } from "ufo";
 import { existsSync, readdirSync } from "node:fs";
@@ -1527,6 +1527,30 @@ function fragmentRequestModule() {
 	};
 }
 //#endregion
+//#region src/vite/nitro-dev-close.ts
+function devNitroState() {
+	return { nitro: void 0 };
+}
+function devNitroModule(state) {
+	return {
+		name: "markless-router:dev-nitro",
+		setup(nitro) {
+			state.nitro = nitro;
+		}
+	};
+}
+function devNitroClosePlugin(state) {
+	return {
+		name: "markless-router:dev-nitro-close",
+		apply: "serve",
+		async closeBundle() {
+			const nitro = state.nitro;
+			state.nitro = void 0;
+			await nitro?.close();
+		}
+	};
+}
+//#endregion
 //#region src/vite/nitro-prerender.ts
 function serverBuildState() {
 	return { entry: void 0 };
@@ -1621,8 +1645,10 @@ function router(options = {}) {
 	const navigationEntry = resumeEntryState();
 	const fragmentEntry = resumeEntryState();
 	const routePreloads = routePreloadState();
+	const serverBuild = serverBuildState();
+	const devNitro = devNitroState();
 	return [
-		routerConfigPlugin(nitroPlugins, resumeEntry, prerenderWakeEntry, navigationEntry, routePreloads, fragmentEntry, serverBuildState()),
+		routerConfigPlugin(nitroPlugins, resumeEntry, prerenderWakeEntry, navigationEntry, routePreloads, fragmentEntry, serverBuild, devNitro),
 		devSourceModuleRequestPlugin(),
 		devPageForUrlPlugin(options),
 		pageServerOnlyPropsPlugin(),
@@ -1633,6 +1659,7 @@ function router(options = {}) {
 		htmlTransformPlugin(),
 		virtualModulesPlugin(resumeEntry, prerenderWakeEntry, navigationEntry, routePreloads, options, fragmentEntry),
 		linkBridgeFilesPlugin(navigationEntry, fragmentEntry, options),
+		devNitroClosePlugin(devNitro),
 		nitroPlugins
 	];
 }
@@ -1697,7 +1724,7 @@ function devSourceModuleRequestPlugin() {
 		}
 	};
 }
-function routerConfigPlugin(nitroPluginsFromRouter, resumeEntry, prerenderWakeEntry, navigationEntry, routePreloads, fragmentEntry = resumeEntryState(), serverBuild = serverBuildState()) {
+function routerConfigPlugin(nitroPluginsFromRouter, resumeEntry, prerenderWakeEntry, navigationEntry, routePreloads, fragmentEntry = resumeEntryState(), serverBuild = serverBuildState(), devNitro = devNitroState()) {
 	let clientOutDir = "";
 	let clientEnvironmentName = "";
 	let clientEnvironmentConfig;
@@ -1731,7 +1758,7 @@ function routerConfigPlugin(nitroPluginsFromRouter, resumeEntry, prerenderWakeEn
 			ssrEnvironment.build.rolldownOptions.input ??= scopedVirtualEntryId(SERVER_ENTRY_ID, config.root);
 			const serverWatch = withWatchIgnores(config.server?.watch);
 			return {
-				nitro: createNitroConfig(config.nitro, config.root, serverWatch.ignored, env?.command === "build", serverBuild),
+				nitro: createNitroConfig(config.nitro, config.root, serverWatch.ignored, env?.command === "build", serverBuild, devNitro),
 				server: {
 					...config.server,
 					watch: serverWatch
@@ -1927,7 +1954,7 @@ function requestFileBuildTransformPlugin(root) {
 		}
 	};
 }
-function createNitroConfig(nitroConfig, root = ".", serverWatchIgnored = [], isBuild = false, serverBuild = serverBuildState()) {
+function createNitroConfig(nitroConfig, root = ".", serverWatchIgnored = [], isBuild = false, serverBuild = serverBuildState(), devNitro = devNitroState()) {
 	const scanDirs = Array.isArray(nitroConfig?.scanDirs) ? nitroConfig.scanDirs.filter((dir) => typeof dir === "string") : [];
 	const watchOptions = withWatchIgnores(nitroConfig?.watchOptions, serverWatchIgnored);
 	const publicAssets = Array.isArray(nitroConfig?.publicAssets) ? nitroConfig.publicAssets : [];
@@ -1950,7 +1977,7 @@ function createNitroConfig(nitroConfig, root = ".", serverWatchIgnored = [], isB
 		modules: [
 			...nitroConfig?.modules ?? [],
 			fragmentRequestModule(),
-			...isBuild ? [prerenderRendererModule(serverBuild)] : []
+			...isBuild ? [prerenderRendererModule(serverBuild)] : [devNitroModule(devNitro)]
 		],
 		...isBuild && { routeRules: {
 			[`/${MARKLESS_BUILD_PREFIX}**`]: { headers: { "cache-control": "public, max-age=31536000, immutable" } },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markless/router",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Markless router: client-side navigation with SSR streaming and build-time preload maps.",
   "license": "MIT",
   "repository": {
@@ -64,12 +64,12 @@
     "pathe": "^2.0.3",
     "satteri": "0.6.3",
     "ufo": "^1.6.4",
-    "@markless/bundler": "0.8.0",
-    "@markless/web": "0.8.0",
-    "@markless/compiler": "0.8.0"
+    "@markless/compiler": "0.9.0",
+    "@markless/bundler": "0.9.0",
+    "@markless/web": "0.9.0"
   },
   "devDependencies": {
-    "@markless/analyzer": "0.8.0"
+    "@markless/analyzer": "0.9.0"
   },
   "peerDependencies": {
     "typescript": "^5.9.3",

package/src/vite/entries/fragment-entry.ts

@@ -10,6 +10,7 @@ export interface FragmentNavigationConfig {
 	readonly scrollAttribute: string;
 	readonly routeScriptType: string;
 	readonly servedHtmlAttributesProperty: string;
+	readonly servedBodyAttributesProperty: string;
 	readonly retireProperty: string;
 	readonly streamExecutorGlobal: string;
 	readonly streamedArmSelector: string;
@@ -407,21 +408,126 @@ async function mergeHead(d: Document, next: Document) {
 	return { stale, scripts };
 }
 
-// Only attributes a server document set are the server's to remove: scripts own the rest (a theme class).
-const serverHtmlAttributes = new WeakMap<Document, Set<string>>();
+// A swap applies only what the server changed between its documents; a script's own changes (a theme class) stay.
+type ServedAttributes = ReadonlyMap<string, string>;
+const servedAttributes = {
+	html: new WeakMap<Document, ServedAttributes>(),
+	body: new WeakMap<Document, ServedAttributes>(),
+};
+
+const attributePairs = (element: Element): ServedAttributes =>
+	new Map(Array.from(element.attributes, (attribute) => [attribute.name, attribute.value]));
+
+// What the served document gave <html> or <body>: the last swap's incoming, else the landing's own record.
+function servedBefore(
+	d: Document,
+	which: 'html' | 'body',
+	servedProperty: string,
+): ServedAttributes {
+	return (
+		servedAttributes[which].get(d) ??
+		new Map(
+			(
+				d.documentElement as unknown as Record<
+					string,
+					readonly [string, string][] | undefined
+				>
+			)[servedProperty],
+		)
+	);
+}
+
+function applyServedChanges(
+	d: Document,
+	target: HTMLElement,
+	served: ServedAttributes,
+	incoming: ServedAttributes,
+): void {
+	for (const name of new Set([...served.keys(), ...incoming.keys()])) {
+		const before = served.get(name) ?? null;
+		const after = incoming.get(name) ?? null;
+		if (before !== after) applyServedChange(d, target, name, before, after);
+	}
+}
 
 function syncHtmlAttributes(d: Document, next: Document, servedProperty: string): void {
-	const root = d.documentElement;
-	const incoming = next.documentElement;
-	const served =
-		serverHtmlAttributes.get(d) ??
-		((root as unknown as Record<string, readonly string[] | undefined>)[servedProperty] || []);
-	for (const name of served)
-		if (!incoming.hasAttribute(name)) root.removeAttribute(name);
-	for (const attribute of incoming.attributes)
-		if (root.getAttribute(attribute.name) !== attribute.value)
-			root.setAttribute(attribute.name, attribute.value);
-	serverHtmlAttributes.set(d, new Set(incoming.getAttributeNames()));
+	const incoming = attributePairs(next.documentElement);
+	applyServedChanges(d, d.documentElement, servedBefore(d, 'html', servedProperty), incoming);
+	servedAttributes.html.set(d, incoming);
+}
+
+// A shell <body> the swap morphs in place takes only the server's changes to its attributes.
+function syncBodyAttributes(d: Document, next: Document, servedProperty: string): void {
+	const incoming = attributePairs(next.body);
+	applyServedChanges(d, d.body, servedBefore(d, 'body', servedProperty), incoming);
+	servedAttributes.body.set(d, incoming);
+}
+
+// A container <body> is replaced whole: the incoming one takes the outgoing's attributes plus the server's changes, its own container attributes as served.
+function carryBodyAttributes(
+	d: Document,
+	from: HTMLElement,
+	to: HTMLElement,
+	own: readonly string[],
+	servedProperty: string,
+): void {
+	const incoming = attributePairs(to);
+	const merged = d.createElement(from.localName);
+	for (const attribute of from.attributes) merged.setAttribute(attribute.name, attribute.value);
+	applyServedChanges(d, merged, servedBefore(d, 'body', servedProperty), incoming);
+	for (const name of to.getAttributeNames())
+		if (!own.includes(name) && !merged.hasAttribute(name)) to.removeAttribute(name);
+	for (const attribute of merged.attributes)
+		if (!own.includes(attribute.name) && to.getAttribute(attribute.name) !== attribute.value)
+			to.setAttribute(attribute.name, attribute.value);
+	servedAttributes.body.set(d, incoming);
+}
+
+// class and style are merged a token and a declaration at a time, so a script's own tokens are never dropped.
+function applyServedChange(
+	d: Document,
+	root: HTMLElement,
+	name: string,
+	before: string | null,
+	after: string | null,
+): void {
+	if (name === 'class') {
+		const was = classTokens(before);
+		const will = classTokens(after);
+		const removed = [...was].filter((token) => !will.has(token));
+		const added = [...will].filter((token) => !was.has(token));
+		if (removed.length) root.classList.remove(...removed);
+		if (added.length) root.classList.add(...added);
+	} else if (name === 'style') {
+		const was = declarations(d, before);
+		const will = declarations(d, after);
+		for (const property of was.keys())
+			if (!will.has(property)) root.style.removeProperty(property);
+		for (const [property, [value, priority]] of will) {
+			const old = was.get(property);
+			if (old?.[0] !== value || old[1] !== priority)
+				root.style.setProperty(property, value, priority);
+		}
+	} else if (after === null) root.removeAttribute(name);
+	else root.setAttribute(name, after);
+	if (after === null && !root.getAttribute(name)?.trim()) root.removeAttribute(name);
+}
+
+const classTokens = (value: string | null): Set<string> =>
+	new Set(value?.split(/\s+/).filter(Boolean));
+
+function declarations(d: Document, value: string | null): Map<string, [string, string]> {
+	const style = d.createElement('div').style;
+	style.cssText = value ?? '';
+	const result = new Map<string, [string, string]>();
+	for (let index = 0; index < style.length; index++) {
+		const property = style.item(index);
+		result.set(property, [
+			style.getPropertyValue(property),
+			style.getPropertyPriority(property),
+		]);
+	}
+	return result;
 }
 
 // Set from the page's config at the start of every swap.
@@ -621,14 +727,14 @@ async function streamAppends(
 	return signal.aborted ? undefined : all;
 }
 
-// Inserting a big page whole lays it out in one long frame; the HTML parser yields while it streams a document, and the swap does the same.
-const FRAME_ELEMENTS = 800;
+// Inserting a big page whole lays it out in one long task; the swap lays it out this many elements at a time and yields between.
+const CHUNK_ELEMENTS = 800;
 
 type HeldPage = [parent: Node, before: Node | null, nodes: ChildNode[]][];
 
 function holdPage(parent: Element, after: Node | undefined, before: Node | null): HeldPage {
 	const nodes: ChildNode[] = [];
-	for (let node = after ? after.nextSibling : parent.firstChild; node && node !== before; ) {
+	for (let node = after ? after.nextSibling : parent.firstChild; node && node !== before;) {
 		const next: ChildNode | null = node.nextSibling;
 		nodes.push(node);
 		node.remove();
@@ -640,32 +746,40 @@ function holdPage(parent: Element, after: Node | undefined, before: Node | null)
 const elementsIn = (node: Node) =>
 	node.nodeType === 1 ? (node as Element).getElementsByTagName('*').length + 1 : 0;
 
-// Places a frame's worth synchronously, so the first paint shows the top of the page; true when everything is in.
+// Runs while the leaving page is held on screen; each chunk is laid out before yielding and an element that fits in one goes in whole.
 function fillPage(
 	w: Window,
 	held: HeldPage,
 	budget: number,
 	current: () => boolean,
 ): true | Promise<boolean> {
+	const laidOut = () => {
+		void w.document.documentElement.offsetHeight;
+		return new Promise<boolean>((resolve) => {
+			const channel = new MessageChannel();
+			channel.port1.onmessage = () => resolve(current());
+			channel.port2.postMessage(0);
+		});
+	};
+	const nextChunk = () => laidOut().then((still) => still && fillPage(w, held, budget, current));
 	let used = 0;
 	while (held.length) {
 		const [parent, before, nodes] = held[0]!;
+		const size = elementsIn(nodes[0]!);
+		if (used > 0 && used + size > budget && size <= budget) return nextChunk();
 		const node = nodes.shift()!;
 		if (!nodes.length) held.shift();
-		const size = elementsIn(node);
-		if (used + size > budget && node.firstChild) {
+		if (size > budget && node.firstChild) {
 			const children = [...node.childNodes];
 			(node as Element).replaceChildren();
 			held.unshift([node, null, children]);
 			used += 1;
 		} else used += size;
 		parent.insertBefore(node, before);
-		if (used >= budget && held.length)
-			return new Promise<void>((resolve) =>
-				w.requestAnimationFrame(() => w.setTimeout(resolve, 0)),
-			).then(() => current() && fillPage(w, held, budget, current));
+		if (used >= budget && held.length) return nextChunk();
 	}
-	return true;
+	// The last chunk is laid out in its own task too, so what runs once the page is in starts on a laid-out page.
+	return budget === Infinity ? true : laidOut();
 }
 
 export async function navigate(
@@ -739,89 +853,128 @@ export async function navigate(
 		if (mode === 'push') w.history.pushState(entry, '', landed.href);
 		else w.history.replaceState(entry, '', landed.href);
 	}
-	const offsets: ScrolledBox[] = [];
-	for (const element of state.scrolled) {
-		if (!element.isConnected || !scope.contains(element)) continue;
-		if (element.scrollTop || element.scrollLeft)
-			offsets.push({
-				path: elementPath(scope, element),
-				id: element.id,
-				kind: boxKind(element),
-				top: element.scrollTop,
-				left: element.scrollLeft,
-			});
-	}
-	state.scrolled.clear();
-	retire(state, outgoing);
-	(w as unknown as Record<string, unknown>)[state.config.streamExecutorGlobal] = undefined;
-	for (const element of d.querySelectorAll(state.config.streamedArmSelector)) element.remove();
-	state.shown = pageKey(new URL(w.location.href));
-	if (documentLoads) syncHtmlAttributes(d, next, state.config.servedHtmlAttributesProperty);
-	let region: Element;
-	let end: Comment;
-	let start: Comment | undefined;
-	let scripts: Element[];
-	let held: HeldPage | undefined;
-	if (documentLoads && !isContainer(d.body)) {
-		const fresh: Element[] = [];
-		region = d.body;
-		morphChildren(d, region, incoming, fresh);
-		scripts = fresh.flatMap(scriptsIn);
-		region.append((end = d.createComment('')));
-	} else {
-		region = d.adoptNode(incoming);
-		const leavingEnd = pageEnd(outgoing, state.config.pageEndComment);
-		if (leavingEnd) {
-			carryHostAttributes(d, outgoing, region, state.config.containerAttributes);
-			end =
-				pageEnd(region, state.config.pageEndComment) ??
-				region.appendChild(d.createComment(state.config.pageEndComment));
-			// The document's own nodes after the page stay; a document app morphs them to its next shell.
-			const focused = d.activeElement as HTMLElement | null;
-			const kept = nodesAfter(d, leavingEnd);
-			const arriving = nodesAfter(d, end);
+	// A scroll target or a restored position needs the whole page in place before it is applied; a page that fits in a chunk goes in at once.
+	const progressive =
+		restore === 'reset' &&
+		!url.hash &&
+		d.visibilityState !== 'hidden' &&
+		typeof d.startViewTransition === 'function' &&
+		incoming.getElementsByTagName('*').length > CHUNK_ELEMENTS;
+	let region!: Element;
+	let end!: Comment;
+	let scripts: Element[] = [];
+	const commit = async (): Promise<boolean> => {
+		if (id !== session.navigation) return false;
+		const offsets: ScrolledBox[] = [];
+		for (const element of state.scrolled) {
+			if (!element.isConnected || !scope.contains(element)) continue;
+			if (element.scrollTop || element.scrollLeft)
+				offsets.push({
+					path: elementPath(scope, element),
+					id: element.id,
+					kind: boxKind(element),
+					top: element.scrollTop,
+					left: element.scrollLeft,
+				});
+		}
+		state.scrolled.clear();
+		retire(state, outgoing);
+		(w as unknown as Record<string, unknown>)[state.config.streamExecutorGlobal] = undefined;
+		for (const element of d.querySelectorAll(state.config.streamedArmSelector))
+			element.remove();
+		state.shown = pageKey(new URL(w.location.href));
+		if (documentLoads) syncHtmlAttributes(d, next, state.config.servedHtmlAttributesProperty);
+		if (documentLoads && !isContainer(d.body))
+			syncBodyAttributes(d, next, state.config.servedBodyAttributesProperty);
+		let start: Comment | undefined;
+		let held: HeldPage | undefined;
+		if (documentLoads && !isContainer(d.body)) {
 			const fresh: Element[] = [];
-			if (documentLoads) morphChildren(d, kept, arriving, fresh);
-			const leavingStart = pageStart(outgoing, state.config.pageStartComment);
-			start = pageStart(region, state.config.pageStartComment);
-			if (leavingStart || start) {
-				start ??= region.insertBefore(
-					d.createComment(state.config.pageStartComment),
-					region.firstChild,
+			region = d.body;
+			morphChildren(d, region, incoming, fresh);
+			scripts = fresh.flatMap(scriptsIn);
+			region.append((end = d.createComment('')));
+		} else {
+			region = d.adoptNode(incoming);
+			if (outgoing === d.body)
+				carryBodyAttributes(
+					d,
+					outgoing as HTMLElement,
+					region as HTMLElement,
+					state.config.containerAttributes,
+					state.config.servedBodyAttributesProperty,
 				);
-				const keptBefore = leavingStart
-					? nodesBefore(d, leavingStart)
-					: d.createDocumentFragment();
-				const arrivingBefore = nodesBefore(d, start);
-				if (documentLoads) morphChildren(d, keptBefore, arrivingBefore, fresh);
-				region.insertBefore(keptBefore, start);
+			const leavingEnd = pageEnd(outgoing, state.config.pageEndComment);
+			if (leavingEnd) {
+				if (outgoing !== d.body)
+					carryHostAttributes(d, outgoing, region, state.config.containerAttributes);
+				end =
+					pageEnd(region, state.config.pageEndComment) ??
+					region.appendChild(d.createComment(state.config.pageEndComment));
+				// The document's own nodes after the page stay; a document app morphs them to its next shell.
+				const focused = d.activeElement as HTMLElement | null;
+				const kept = nodesAfter(d, leavingEnd);
+				const arriving = nodesAfter(d, end);
+				const fresh: Element[] = [];
+				if (documentLoads) morphChildren(d, kept, arriving, fresh);
+				const leavingStart = pageStart(outgoing, state.config.pageStartComment);
+				start = pageStart(region, state.config.pageStartComment);
+				if (leavingStart || start) {
+					start ??= region.insertBefore(
+						d.createComment(state.config.pageStartComment),
+						region.firstChild,
+					);
+					const keptBefore = leavingStart
+						? nodesBefore(d, leavingStart)
+						: d.createDocumentFragment();
+					const arrivingBefore = nodesBefore(d, start);
+					if (documentLoads) morphChildren(d, keptBefore, arrivingBefore, fresh);
+					region.insertBefore(keptBefore, start);
+				}
+				scripts = [...scriptsIn(region), ...fresh.flatMap(scriptsIn)];
+				region.append(kept);
+				held = holdPage(region, start, end);
+				outgoing.replaceWith(region);
+				// The document's own nodes moved to the new element; focus inside them stays put.
+				if (focused && focused !== d.activeElement && region.contains(focused))
+					focused.focus({ preventScroll: true });
+			} else {
+				scripts = scriptsIn(region);
+				held = holdPage(region, undefined, null);
+				outgoing.replaceWith(region);
+				region.after((end = d.createComment('')));
 			}
-			scripts = [...scriptsIn(region), ...fresh.flatMap(scriptsIn)];
-			region.append(kept);
-			held = holdPage(region, start, end);
-			outgoing.replaceWith(region);
-			// The document's own nodes moved to the new element; focus inside them stays put.
-			if (focused && focused !== d.activeElement && region.contains(focused))
-				focused.focus({ preventScroll: true });
-		} else {
-			scripts = scriptsIn(region);
-			held = holdPage(region, undefined, null);
-			outgoing.replaceWith(region);
-			region.after((end = d.createComment('')));
 		}
-	}
-	// A scroll target or a restored position needs the whole page in place before it is applied.
-	const progressive = restore === 'reset' && !url.hash && d.visibilityState !== 'hidden';
-	const filled = held && fillPage(w, held, progressive ? FRAME_ELEMENTS : Infinity, () => id === session.navigation);
-	if (filled instanceof Promise) {
-		w.scrollTo({ top: 0, left: 0, behavior: 'instant' });
-		if (!(await filled)) return;
-	}
-	// 'instant': a `scroll-behavior: smooth` page would otherwise animate every landing.
-	for (const box of offsets)
-		sameBox(scope, box)?.scrollTo({ top: box.top, left: box.left, behavior: 'instant' });
-	for (const element of head.stale) element.remove();
-	if (next.title && d.title !== next.title) d.title = next.title;
+		const filled =
+			held &&
+			fillPage(
+				w,
+				held,
+				progressive ? CHUNK_ELEMENTS : Infinity,
+				() => id === session.navigation,
+			);
+		if (filled instanceof Promise && !(await filled)) return false;
+		if (progressive) w.scrollTo({ top: 0, left: 0, behavior: 'instant' });
+		// 'instant': a `scroll-behavior: smooth` page would otherwise animate every landing.
+		for (const box of offsets)
+			sameBox(scope, box)?.scrollTo({ top: box.top, left: box.left, behavior: 'instant' });
+		for (const element of head.stale) element.remove();
+		if (next.title && d.title !== next.title) d.title = next.title;
+		return true;
+	};
+	let committed: boolean;
+	if (progressive) {
+		// The leaving page stays on screen while the next one is laid out a chunk at a time; it then paints in one frame, with no animation.
+		let result = false;
+		const transition = d.startViewTransition(async () => {
+			result = await commit();
+		});
+		transition.ready.catch(() => {});
+		transition.finished.catch(() => {});
+		await transition.updateCallbackDone.then(() => transition.skipTransition(), reportAsync);
+		committed = result;
+	} else committed = await commit();
+	if (!committed) return;
 	const ran = runScripts(
 		d,
 		[...head.scripts, ...(scripts as HTMLScriptElement[])],
@@ -834,7 +987,7 @@ export async function navigate(
 	if (restore === 'reset') {
 		const target = url.hash ? d.getElementById(decodeURIComponent(url.hash.slice(1))) : null;
 		if (target) target.scrollIntoView({ behavior: 'instant' });
-		else if (!(filled instanceof Promise)) w.scrollTo({ top: 0, left: 0, behavior: 'instant' });
+		else if (!progressive) w.scrollTo({ top: 0, left: 0, behavior: 'instant' });
 	} else if (restore !== 'manual')
 		w.scrollTo({ top: restore.y, left: restore.x, behavior: 'instant' });
 	d.dispatchEvent(new CustomEvent('marklessrouterrendered'));