@markless/router 0.8.0 → 0.10.0

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

@@ -10,9 +10,13 @@ export interface FragmentNavigationConfig {
 	readonly scrollAttribute: string;
 	readonly routeScriptType: string;
 	readonly servedHtmlAttributesProperty: string;
+	readonly servedBodyAttributesProperty: string;
 	readonly retireProperty: string;
 	readonly streamExecutorGlobal: string;
 	readonly streamedArmSelector: string;
+	readonly streamOpenProperty: string;
+	// The leaving page stays up this long after the click while the next one still streams its @pending arms.
+	readonly pendingDeadlineMs: number;
 	readonly requestPrefix: string;
 	readonly regionEndMarker: string;
 	readonly appendMarker: string;
@@ -21,6 +25,7 @@ export interface FragmentNavigationConfig {
 	readonly pageStartComment: string;
 	// The container's own attributes, never carried from the leaving page's element to the next one.
 	readonly containerAttributes: readonly [container: string, paths: string];
+	readonly keepAttributes: readonly [keep: string, own: string];
 	// 'document' apps swap the whole body: their shell renders from the request URL.
 	readonly documentLoads: boolean;
 	// A mouse fetches after resting this long on a link; press, focus and touch fetch at once.
@@ -32,6 +37,8 @@ export interface FragmentNavigationConfig {
 	readonly endpointPrefixes: readonly string[];
 	// At most this many visible-link fragments are fetched at idle on fast connections, in document order; 0 keeps HTML to intent only.
 	readonly idleFragments: number;
+	// An idle fetch stops once a page's region passes this many bytes, and that page waits for intent.
+	readonly idleFragmentBytes: number;
 	readonly idleWithoutConnectionInfo: boolean;
 	// false: nothing is fetched before a click.
 	readonly prefetch: boolean;
@@ -39,7 +46,9 @@ export interface FragmentNavigationConfig {
 	readonly pages: readonly string[];
 }
 
-export type FragmentRouteCode = Record<string, readonly ModulePreloadInput[]>;
+// What a link's destination needs before it shows: its code, and the stylesheets the page that links it lacks.
+export type FragmentPreload = ModulePreloadInput | { readonly href: string; readonly as: 'style' };
+export type FragmentRouteCode = Record<string, readonly FragmentPreload[]>;
 
 export type FragmentFetched = {
 	readonly url: string;
@@ -51,6 +60,10 @@ export type FragmentFetched = {
 
 export type FragmentPrefetch = {
 	readonly at: number;
+	// The writes this page had sent when the fetch began: a later write makes it stale.
+	readonly writes: number;
+	// When the response's Cache-Control ends its reuse (on arrival for no-store and no-cache).
+	expires?: number;
 	readonly result: Promise<FragmentFetched>;
 	// The response is still arriving, so it holds a connection.
 	open: boolean;
@@ -60,9 +73,12 @@ export type FragmentPrefetch = {
 // What the inline bootstrap leaves on the document for the swap module (entries/fragment-entry.ts).
 export type FragmentNavigationState = {
 	readonly config: FragmentNavigationConfig;
-	readonly routes: Record<string, readonly ModulePreloadInput[]>;
+	readonly routes: FragmentRouteCode;
 	readonly prefetches: Map<string, FragmentPrefetch>;
 	readonly visited: Map<string, string>;
+	// Writes this page has started or finished: each one makes every page fetched before it stale.
+	writes: number;
+	readonly fresh: (entry: FragmentPrefetch, now: number) => boolean;
 	shown: string;
 	readonly eligible: (anchor: Element | null | undefined, forClick?: boolean) => URL | undefined;
 	readonly preloadCode: (url: URL, low: boolean) => void;
@@ -98,6 +114,8 @@ type Session = {
 	streaming?: AbortController;
 	// The history entry on screen, and the last scroll offset seen for every entry this tab visited.
 	current?: string;
+	// An entry a navigation pushed whose page has not swapped in yet: the next navigation replaces it.
+	unshown?: string;
 	readonly positions: Map<string, { readonly x: number; readonly y: number }>;
 };
 
@@ -160,12 +178,13 @@ function take(
 		parsedVisits.get(state)?.delete(key);
 		return {
 			at: now,
+			writes: state.writes,
 			result: Promise.resolve(ready ?? state.parse(url.href, cached)),
 			open: false,
 			abort: () => {},
 		};
 	}
-	if (existing && now - existing.at < state.config.prefetchTtlMs) return existing;
+	if (existing && state.fresh(existing, now)) return existing;
 	existing?.abort();
 	state.preloadCode(url, false);
 	return state.request(url, false);
@@ -258,13 +277,15 @@ function captureLoadListeners(d: Document, w: Window, into: LoadListener[]): ()
 		const own = Object.getOwnPropertyDescriptor(target, 'addEventListener');
 		const add = target.addEventListener;
 		target.addEventListener = function (
-			this: EventTarget,
+			this: EventTarget | undefined,
 			kind: string,
 			listener: EventListenerOrEventListenerObject | null,
 			options?: boolean | AddEventListenerOptions,
 		) {
-			if (kind === type && listener && this === target) into.push({ target, type, listener });
-			return add.call(this, kind, listener, options);
+			// A bare call has no receiver; one for the event that already fired is kept off the target, which would hold it and its page for good.
+			const self = this ?? w;
+			if (kind === type && listener && self === target) return void into.push({ target, type, listener });
+			return add.call(self, kind, listener, options);
 		};
 		return () => {
 			if (own) Object.defineProperty(target, 'addEventListener', own);
@@ -381,12 +402,18 @@ async function mergeHead(d: Document, next: Document) {
 		else current.set(element.outerHTML, [element]);
 	}
 	const stylesheets: HTMLLinkElement[] = [];
+	const hidden: [Element, string | null][] = [];
 	const scripts: HTMLScriptElement[] = [];
 	let cursor: Element | null = null;
 	for (const element of Array.from(next.head.children)) {
 		const reused = current.get(element.outerHTML)?.shift();
 		const node = reused ?? d.adoptNode(element);
 		if (!reused) {
+			// An arriving stylesheet applies only with its page: applied before, it restyles the leaving page for nothing.
+			if (isStyleNode(node)) {
+				hidden.push([node, node.getAttribute('media')]);
+				node.setAttribute('media', 'not all');
+			}
 			if (cursor) cursor.after(node);
 			else d.head.prepend(node);
 			if (node.localName === 'link' && (node as HTMLLinkElement).rel === 'stylesheet')
@@ -404,24 +431,135 @@ async function mergeHead(d: Document, next: Document) {
 		else if ((element as HTMLScriptElement).type !== 'importmap') element.remove();
 	}
 	await loaded(d.defaultView!, stylesheets);
-	return { stale, scripts };
+	const show = () => {
+		for (const [node, media] of hidden)
+			if (media === null) node.removeAttribute('media');
+			else node.setAttribute('media', media);
+	};
+	return { stale, scripts, show };
+}
+
+function isStyleNode(node: Element): boolean {
+	return (
+		node.localName === 'style' ||
+		(node.localName === 'link' && (node as HTMLLinkElement).rel === 'stylesheet')
+	);
+}
+
+// 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],
+		)
+	);
 }
 
-// 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>>();
+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 <body> kept in place takes only the server's changes to its attributes; its own container attributes are as served.
+function syncBodyAttributes(
+	d: Document,
+	served: Element,
+	servedProperty: string,
+	own: readonly string[] = [],
+): void {
+	const incoming = attributePairs(served);
+	applyServedChanges(d, d.body, servedBefore(d, 'body', servedProperty), incoming);
+	syncOwnAttributes(d.body, served, own);
+	servedAttributes.body.set(d, incoming);
+}
+
+function syncOwnAttributes(element: Element, served: Element, own: readonly string[]): void {
+	for (const name of own) {
+		const value = served.getAttribute(name);
+		if (value === null) element.removeAttribute(name);
+		else if (element.getAttribute(name) !== value) element.setAttribute(name, value);
+	}
+}
+
+// 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.
@@ -442,15 +580,14 @@ function pageStart(host: Node, data: string): Comment | undefined {
 	return undefined;
 }
 
-function nodesBefore(d: Document, node: Node): DocumentFragment {
-	const nodes = d.createDocumentFragment();
-	while (node.previousSibling) nodes.prepend(node.previousSibling);
-	return nodes;
-}
-
-function nodesAfter(d: Document, node: Node): DocumentFragment {
-	const nodes = d.createDocumentFragment();
-	while (node.nextSibling) nodes.append(node.nextSibling);
+function nodesBetween(parent: Node, after: Node | undefined, before: Node | null): ChildNode[] {
+	const nodes: ChildNode[] = [];
+	for (
+		let node = after ? after.nextSibling : parent.firstChild;
+		node && node !== before;
+		node = node.nextSibling
+	)
+		nodes.push(node);
 	return nodes;
 }
 
@@ -459,86 +596,195 @@ const scriptsIn = (element: Element): Element[] =>
 
 const serverHostAttributes = new WeakMap<Document, Set<string>>();
 
-// The incoming container is a fresh element; attributes a script set on the outgoing one stay.
-function carryHostAttributes(
+// A container kept in place takes the server's attributes; one a script set on it, and the server never served, stays.
+function syncHostAttributes(
 	d: Document,
-	from: Element,
-	to: Element,
+	host: Element,
+	served: Element,
 	own: readonly string[],
 ): void {
 	const server = serverHostAttributes.get(d);
-	serverHostAttributes.set(d, new Set(to.getAttributeNames()));
-	for (const attribute of from.attributes)
-		if (
-			!to.hasAttribute(attribute.name) &&
-			!server?.has(attribute.name) &&
-			!own.includes(attribute.name)
-		)
-			to.setAttribute(attribute.name, attribute.value);
-}
-
-// A document app's shell has no runtime, so it is morphed in place: unchanged chrome keeps its nodes.
-// Containers are always replaced whole: their DOM is the new page's resume payload's to locate.
-function morphChildren(d: Document, from: Node, to: Node, fresh: Element[]): void {
-	let cursor = from.firstChild;
-	const skipContainers = () => {
-		while (cursor && isContainer(cursor)) {
-			const next: ChildNode | null = cursor.nextSibling;
-			cursor.remove();
-			cursor = next;
+	serverHostAttributes.set(d, new Set(served.getAttributeNames()));
+	for (const name of host.getAttributeNames())
+		if (!served.hasAttribute(name) && (server?.has(name) || own.includes(name)))
+			host.removeAttribute(name);
+	for (const attribute of served.attributes)
+		if (host.getAttribute(attribute.name) !== attribute.value)
+			host.setAttribute(attribute.name, attribute.value);
+}
+
+// Kept nodes keep hover, focus, scroll and running transitions; inside a container scripts are always fresh, so the page boots again.
+function morphChildren(d: Document, from: Node, to: Node, fresh: Element[], page = false): void {
+	morphRange(d, from, from.firstChild, null, Array.from(to.childNodes), fresh, page);
+}
+
+const sameKind = (from: ChildNode, to: ChildNode): boolean =>
+	from.nodeType === to.nodeType &&
+	from.nodeName === to.nodeName &&
+	isContainer(from) === isContainer(to) &&
+	(from.nodeType !== 1 || (from as Element).id === (to as Element).id);
+
+function morphRange(
+	d: Document,
+	parent: Node,
+	cursor: ChildNode | null,
+	stop: Node | null,
+	incoming: readonly ChildNode[],
+	fresh: Element[],
+	page: boolean,
+): void {
+	for (const next of incoming) {
+		if (cursor && cursor !== stop && kept(d, cursor, next, fresh)) {
+			cursor = cursor.nextSibling;
+			continue;
 		}
-	};
-	for (const incoming of Array.from(to.childNodes)) {
-		skipContainers();
-		if (
-			cursor &&
-			cursor.nodeType === incoming.nodeType &&
-			cursor.nodeName === incoming.nodeName &&
-			!isContainer(cursor) &&
-			!isContainer(incoming)
-		) {
-			const next = cursor.nextSibling;
-			morphNode(d, cursor, incoming, fresh);
-			cursor = next;
+		// A node the next page dropped from a list: the one after it is the match.
+		if (cursor && cursor !== stop && !sameKind(cursor, next)) {
+			const after = cursor.nextSibling;
+			if (after && after !== stop && sameKind(after, next)) {
+				cursor.remove();
+				cursor = after;
+			}
+		}
+		if (cursor && cursor !== stop && sameKind(cursor, next)) {
+			const after = cursor.nextSibling;
+			morphNode(d, cursor, next, fresh, page);
+			cursor = after;
 			continue;
 		}
-		const node = d.adoptNode(incoming);
-		from.insertBefore(node, cursor);
+		const node = d.adoptNode(next);
+		parent.insertBefore(node, cursor && cursor !== stop ? cursor : stop);
 		if (node.nodeType === 1) fresh.push(node as Element);
 	}
-	while (cursor) {
-		const next = cursor.nextSibling;
+	while (cursor && cursor !== stop) {
+		const after: ChildNode | null = cursor.nextSibling;
 		cursor.remove();
-		cursor = next;
+		cursor = after;
 	}
 }
 
-function morphNode(d: Document, from: ChildNode, to: ChildNode, fresh: Element[]): void {
+let keepAttributes: readonly [keep: string, own: string] = ['', ''];
+
+// Both pages render this element byte for byte: it stays, with what scripts did to it; only the page's own children inside are replaced.
+function kept(d: Document, from: ChildNode, to: ChildNode, fresh: Element[]): boolean {
+	const [keep, own] = keepAttributes;
+	const hash = keep && from.nodeType === 1 && (from as Element).getAttribute(keep);
+	if (!hash || to.nodeType !== 1 || hash !== (to as Element).getAttribute(keep)) return false;
+	const slots = (root: Element) =>
+		root.hasAttribute(own)
+			? [root]
+			: [...root.querySelectorAll(`[${own}]`)].filter(
+					(slot) => !root.contains(slot.parentElement!.closest(`[${own}]`)),
+				);
+	const leaving = slots(from as Element);
+	const arriving = slots(to as Element);
+	if (leaving.length !== arriving.length) return false;
+	leaving.forEach((slot, index) => {
+		const nodes = [...arriving[index]!.childNodes].map((node) => d.adoptNode(node));
+		slot.replaceChildren(...nodes);
+		for (const node of nodes) if (node.nodeType === 1) fresh.push(node as Element);
+	});
+	return true;
+}
+
+function morphNode(
+	d: Document,
+	from: ChildNode,
+	to: ChildNode,
+	fresh: Element[],
+	page: boolean,
+): void {
 	if (from.nodeType !== 1) {
 		if ((from as CharacterData).data !== (to as CharacterData).data)
 			(from as CharacterData).data = (to as CharacterData).data;
 		return;
 	}
-	if (from.isEqualNode(to)) return;
 	const element = from as Element;
 	const incoming = to as Element;
-	if (element.localName === 'script' || element.localName.includes('-')) {
+	const name = element.localName;
+	page ||= isContainer(element);
+	// A template's content is not its children, so a morph cannot see it; a custom element owns its own state.
+	if (
+		name === 'template' ||
+		(name === 'script' && (page || !element.isEqualNode(incoming))) ||
+		(name.includes('-') && !element.isEqualNode(incoming))
+	) {
 		const node = d.adoptNode(incoming);
 		element.replaceWith(node);
 		fresh.push(node);
 		return;
 	}
-	for (const name of element.getAttributeNames())
-		if (!incoming.hasAttribute(name)) element.removeAttribute(name);
+	if (!page && element.isEqualNode(incoming)) return;
+	for (const attribute of element.getAttributeNames())
+		if (!incoming.hasAttribute(attribute)) element.removeAttribute(attribute);
 	for (const attribute of incoming.attributes)
 		if (element.getAttribute(attribute.name) !== attribute.value)
 			element.setAttribute(attribute.name, attribute.value);
-	morphChildren(d, element, incoming, fresh);
+	if (page) resetControl(element);
+	if (name !== 'script') morphChildren(d, element, incoming, fresh, page);
+}
+
+// A kept control shows what the server rendered for the next page, as a landing would.
+function resetControl(element: Element): void {
+	const name = element.localName;
+	if (name === 'input') {
+		const input = element as HTMLInputElement;
+		if (input.checked !== input.defaultChecked) input.checked = input.defaultChecked;
+		if (input.value !== input.defaultValue) input.value = input.defaultValue;
+	} else if (name === 'textarea') {
+		const area = element as HTMLTextAreaElement;
+		if (area.value !== area.defaultValue) area.value = area.defaultValue;
+	} else if (name === 'option') {
+		const option = element as HTMLOptionElement;
+		if (option.selected !== option.defaultSelected) option.selected = option.defaultSelected;
+	}
+}
+
+// A kept node takes the next page's classes in one step: a CSS transition between two pages' styles shows as morphing.
+// Transitions stay off until the frame after the swap has computed its styles; turning them on then starts none.
+// Transitions the swap starts are cancelled before each of its first frames paints; a sheet turning them off restyles the whole document twice.
+function withoutTransitions(d: Document): () => void {
+	const w = d.defaultView as Window & typeof globalThis;
+	if (w.ResizeObserver && w.CSSTransition && d.getAnimations) {
+		const running = new Set(d.getAnimations());
+		const beforePaint = (frames: number) => {
+			const observer = new w.ResizeObserver(() => {
+				observer.disconnect();
+				for (const animation of d.getAnimations())
+					if (!running.has(animation) && animation instanceof w.CSSTransition) animation.cancel();
+				if (frames > 1) w.requestAnimationFrame(() => beforePaint(frames - 1));
+			});
+			observer.observe(d.documentElement);
+		};
+		return () => beforePaint(3);
+	}
+	const sheet = new w.CSSStyleSheet();
+	sheet.replaceSync('*,*::before,*::after{transition:none!important}');
+	d.adoptedStyleSheets = [...d.adoptedStyleSheets, sheet];
+	return () =>
+		w.requestAnimationFrame(() =>
+			w.requestAnimationFrame(() => {
+				d.adoptedStyleSheets = d.adoptedStyleSheets.filter((own) => own !== sheet);
+			}),
+		);
+}
+
+// Drops the leaving page's runtime state (the framework names its own `__m*`) and gives each container a new page lifetime.
+function forgetRuntimeState(root: Element): void {
+	const forget = (node: Node) => {
+		for (const key of Object.keys(node))
+			if (key.startsWith('__m')) delete (node as unknown as Record<string, unknown>)[key];
+		if (isContainer(node)) (node as unknown as Record<string, unknown>).__mL = {};
+	};
+	forget(root);
+	const walker = root.ownerDocument.createTreeWalker(root, 129);
+	for (let node = walker.nextNode(); node; node = walker.nextNode()) forget(node);
 }
 
 // Scrolled boxes (a sidebar) keep their offset when the same box is there after the swap:
 // at its old place in the tree, or else by its id when the next page wraps it differently.
 type ScrolledBox = {
+	readonly element: Element;
 	readonly path: string | undefined;
 	readonly id: string;
 	readonly kind: string;
@@ -577,6 +823,52 @@ function sameBox(root: Element, box: ScrolledBox): Element | undefined {
 	return named && root.contains(named) && boxKind(named) === box.kind ? named : undefined;
 }
 
+type HeldStream = {
+	readonly reader: ReadableStreamDefaultReader<Uint8Array>;
+	readonly ended: boolean;
+};
+
+// Reads ahead until the stream ends or `ms` pass, then hands back a reader that replays what it read.
+function holdStream(
+	reader: ReadableStreamDefaultReader<Uint8Array>,
+	ms: number,
+	w: Window,
+): Promise<HeldStream> {
+	const chunks: Uint8Array[] = [];
+	let ended = false;
+	let failure: { readonly error: unknown } | undefined;
+	let wake = () => {};
+	const replay = {
+		read: async () => {
+			while (!chunks.length && !ended) await new Promise<void>((done) => (wake = done));
+			if (chunks.length) return { done: false, value: chunks.shift()! };
+			if (failure) throw failure.error;
+			return { done: true, value: undefined };
+		},
+		cancel: (reason?: unknown) => reader.cancel(reason),
+	} as ReadableStreamDefaultReader<Uint8Array>;
+	return new Promise((resolve) => {
+		const timer = w.setTimeout(
+			() => resolve({ reader: replay, ended: false }),
+			Math.max(0, ms),
+		);
+		void (async () => {
+			try {
+				for (let chunk = await reader.read(); !chunk.done; chunk = await reader.read()) {
+					chunks.push(chunk.value);
+					wake();
+				}
+			} catch (error) {
+				failure = { error };
+			}
+			ended = true;
+			wake();
+			w.clearTimeout(timer);
+			resolve({ reader: replay, ended: true });
+		})();
+	});
+}
+
 // Streamed @pending arms arrive after the region, one delimited piece each, and run exactly as on a landing.
 async function streamAppends(
 	d: Document,
@@ -584,6 +876,7 @@ async function streamAppends(
 	fetched: FragmentFetched,
 	end: Node,
 	signal: AbortSignal,
+	arrived: boolean,
 ): Promise<string | undefined> {
 	const marker = state.config.appendMarker;
 	const decoder = new TextDecoder();
@@ -617,57 +910,15 @@ async function streamAppends(
 		}
 	}
 	flush(true);
+	// Arms that all arrived before the swap commit in its task, so @pending never paints.
+	if (arrived && !signal.aborted)
+		(d.defaultView as unknown as Record<string, { flush?: () => void } | undefined>)[
+			state.config.streamExecutorGlobal
+		]?.flush?.();
 	if ((end as Comment).data !== state.config.pageEndComment) end.parentNode?.removeChild(end);
 	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;
-
-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; ) {
-		const next: ChildNode | null = node.nextSibling;
-		nodes.push(node);
-		node.remove();
-		node = next;
-	}
-	return [[parent, before, nodes]];
-}
-
-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.
-function fillPage(
-	w: Window,
-	held: HeldPage,
-	budget: number,
-	current: () => boolean,
-): true | Promise<boolean> {
-	let used = 0;
-	while (held.length) {
-		const [parent, before, nodes] = held[0]!;
-		const node = nodes.shift()!;
-		if (!nodes.length) held.shift();
-		const size = elementsIn(node);
-		if (used + 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));
-	}
-	return true;
-}
-
 export async function navigate(
 	d: Document,
 	url: URL,
@@ -680,20 +931,55 @@ export async function navigate(
 	containerAttribute = state.config.containerAttributes[0];
 	const session = sessionFor(d);
 	const id = ++session.navigation;
-	session.streaming?.abort();
+	// The address follows the click at once, so Back before the page arrives returns to the page still shown.
+	const entryNow = () =>
+		(w.history.state as { __marklessFragment?: { id?: string } } | null)?.__marklessFragment
+			?.id;
+	let entered: string | undefined;
+	if (mode !== 'traverse') {
+		const unshown = session.unshown !== undefined && session.unshown === entryNow();
+		if (!unshown)
+			session.positions.set(session.current ?? entryNow() ?? LANDING_ENTRY, {
+				x: w.scrollX,
+				y: w.scrollY,
+			});
+		w.history.scrollRestoration = 'manual';
+		session.unshown = entered = entryId();
+		const entry = { __marklessFragment: { id: entered, x: 0, y: 0 } };
+		if (mode === 'push' && !unshown) w.history.pushState(entry, '', url.href);
+		else w.history.replaceState(entry, '', url.href);
+	}
+	const left = () => entered !== undefined && entryNow() !== entered;
+	const stale = () => id !== session.navigation || left();
 	const fallback = (href: string) => {
 		if (mode === 'traverse') w.location.reload();
-		else w.location.assign(href);
+		else w.location.replace(href);
+	};
+	const started = w.performance.now();
+	const taken = take(state, url, mode === 'traverse', started);
+	const abandon = () => {
+		if (session.unshown === entered) session.unshown = undefined;
+		taken.abort();
 	};
-	const taken = take(state, url, mode === 'traverse', w.performance.now());
 	let fetched: FragmentFetched;
 	try {
 		fetched = await taken.result;
 	} catch {
-		if (id === session.navigation) fallback(url.href);
+		if (!stale()) fallback(url.href);
 		return;
 	}
-	if (id !== session.navigation) return taken.abort();
+	if (stale()) return abandon();
+	let arrived = !fetched.rest;
+	if (fetched.rest) {
+		const held = await holdStream(
+			fetched.rest,
+			state.config.pendingDeadlineMs - (w.performance.now() - started),
+			w,
+		);
+		arrived = held.ended;
+		fetched = { ...fetched, rest: held.reader };
+	}
+	if (stale()) return abandon();
 	// A prefetch is shared by every link to the page, so the address takes the clicked link's #fragment.
 	const landed = new URL(fetched.url);
 	landed.hash = url.hash;
@@ -719,7 +1005,7 @@ export async function navigate(
 	const ranFiles = filesRan(d);
 	const head = await mergeHead(d, next);
 	await Promise.race([Promise.all(code), new Promise((resolve) => w.setTimeout(resolve, 3000))]);
-	if (id !== session.navigation) return taken.abort();
+	if (stale()) return abandon();
 	let restore = scroll;
 	if (mode === 'traverse') {
 		const key = (typeof scroll === 'object' ? scroll.id : undefined) ?? LANDING_ENTRY;
@@ -727,101 +1013,140 @@ export async function navigate(
 		if (saved) restore = saved;
 		session.current = key;
 	} else {
-		const leaving =
-			session.current ??
-			(w.history.state as { __marklessFragment?: { id?: string } } | null)?.__marklessFragment
-				?.id ??
-			LANDING_ENTRY;
-		session.positions.set(leaving, { x: w.scrollX, y: w.scrollY });
-		w.history.scrollRestoration = 'manual';
-		session.current = entryId();
-		const entry = { __marklessFragment: { id: session.current, x: 0, y: 0 } };
-		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,
-			});
+		session.current = entered;
+		session.unshown = undefined;
+		if (landed.href !== w.location.href)
+			w.history.replaceState(w.history.state, '', landed.href);
 	}
-	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)) {
+	let region!: Element;
+	let end!: Comment;
+	let scripts: Element[] = [];
+	const commit = (): boolean => {
+		if (id !== session.navigation) return false;
+		// The leaving page keeps its stream until now: closed early, its unanswered @try runs the recipe in the browser.
+		session.streaming?.abort();
+		const settle = withoutTransitions(d);
+		keepAttributes = state.config.keepAttributes ?? ['', ''];
+		const offsets: ScrolledBox[] = [];
+		for (const element of state.scrolled) {
+			if (!element.isConnected || !scope.contains(element)) continue;
+			if (element.scrollTop || element.scrollLeft)
+				offsets.push({
+					element,
+					path: elementPath(scope, element),
+					id: element.id,
+					kind: boxKind(element),
+					top: element.scrollTop,
+					left: element.scrollLeft,
+				});
+		}
+		state.scrolled.clear();
+		retire(state, outgoing);
+		forgetRuntimeState(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);
 		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);
-			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 = outgoing;
+		if (documentLoads && !isContainer(d.body)) {
+			syncBodyAttributes(d, next.body, state.config.servedBodyAttributesProperty);
+			morphChildren(d, region, incoming, fresh);
+			region.append((end = d.createComment('')));
+		} else {
+			const own = state.config.containerAttributes;
+			if (outgoing === d.body)
+				syncBodyAttributes(d, incoming, state.config.servedBodyAttributesProperty, own);
+			else syncHostAttributes(d, outgoing, incoming, own);
+			const leavingEnd = pageEnd(outgoing, state.config.pageEndComment);
+			if (leavingEnd) {
+				const arrivingEnd = pageEnd(incoming, state.config.pageEndComment) ?? null;
+				const arrivingStart = pageStart(incoming, state.config.pageStartComment);
+				let leavingStart = pageStart(outgoing, state.config.pageStartComment);
+				if (!leavingStart && arrivingStart)
+					leavingStart = outgoing.insertBefore(
+						d.createComment(state.config.pageStartComment),
+						outgoing.firstChild,
+					);
+				morphRange(
+					d,
+					outgoing,
+					leavingStart ? leavingStart.nextSibling : outgoing.firstChild,
+					leavingEnd,
+					nodesBetween(incoming, arrivingStart, arrivingEnd),
+					fresh,
+					true,
 				);
-				const keptBefore = leavingStart
-					? nodesBefore(d, leavingStart)
-					: d.createDocumentFragment();
-				const arrivingBefore = nodesBefore(d, start);
-				if (documentLoads) morphChildren(d, keptBefore, arrivingBefore, fresh);
-				region.insertBefore(keptBefore, start);
+				end = leavingEnd;
+				// The document's own nodes around the page stay; a document app morphs them to its next shell.
+				if (documentLoads) {
+					morphRange(
+						d,
+						outgoing,
+						leavingEnd.nextSibling,
+						null,
+						arrivingEnd ? nodesBetween(incoming, arrivingEnd, null) : [],
+						fresh,
+						false,
+					);
+					if (leavingStart)
+						morphRange(
+							d,
+							outgoing,
+							outgoing.firstChild,
+							leavingStart,
+							arrivingStart ? nodesBetween(incoming, undefined, arrivingStart) : [],
+							fresh,
+							false,
+						);
+				}
+			} else {
+				morphRange(
+					d,
+					outgoing,
+					outgoing.firstChild,
+					null,
+					Array.from(incoming.childNodes),
+					fresh,
+					true,
+				);
+				outgoing.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;
+		scripts = fresh.flatMap(scriptsIn);
+		// A box the swap kept still has its offset; scrolling it again would lay out the page before it paints.
+		// 'instant': a `scroll-behavior: smooth` page would otherwise animate every landing.
+		for (const box of offsets)
+			if (!box.element.isConnected)
+				sameBox(scope, box)?.scrollTo({
+					top: box.top,
+					left: box.left,
+					behavior: 'instant',
+				});
+		head.show();
+		for (const element of head.stale) element.remove();
+		if (next.title && d.title !== next.title) d.title = next.title;
+		settle();
+		return true;
+	};
+	const committed = commit();
+	if (!committed) return;
+	const controller = new AbortController();
+	session.streaming = controller;
+	const host = d as unknown as Record<string, unknown>;
+	const openKey = state.config.streamOpenProperty;
+	const open = fetched.rest
+		? new Promise<void>((done) => {
+				controller.signal.addEventListener('abort', () => done(), { once: true });
+			})
+		: undefined;
+	if (open) host[openKey] = open;
+	else delete host[openKey];
+	const ended = () => {
+		if (open && host[openKey] === open) delete host[openKey];
+		controller.abort();
+	};
 	const ran = runScripts(
 		d,
 		[...head.scripts, ...(scripts as HTMLScriptElement[])],
@@ -834,29 +1159,36 @@ 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 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'));
 	state.rescan();
-	const controller = new AbortController();
-	session.streaming = controller;
 	const key = state.shown;
-	void streamAppends(d, state, fetched, end, controller.signal).then((rest) => {
-		if (rest === undefined) return;
-		state.visited.delete(key);
-		const text = `${fetched.prefix}${state.config.regionEndMarker}${rest}`;
-		state.visited.set(key, text);
-		while (state.visited.size > 8) state.visited.delete(state.visited.keys().next().value!);
-		const parsed = parsedVisits.get(state) ?? new Map<string, FragmentFetched>();
-		parsedVisits.set(state, parsed);
-		// Parsing runs no page code; done at idle, a Back to this page only swaps.
-		const idle = () => {
-			if (state.visited.get(key) === text) parsed.set(key, state.parse(fetched.url, text));
-			for (const other of parsed.keys()) if (!state.visited.has(other)) parsed.delete(other);
-		};
-		if (w.requestIdleCallback) w.requestIdleCallback(idle, { timeout: 2000 });
-		else w.setTimeout(idle, 200);
-	}, reportAsync);
+	void streamAppends(d, state, fetched, end, controller.signal, arrived).then(
+		(rest) => {
+			ended();
+			if (rest === undefined) return;
+			state.visited.delete(key);
+			const text = `${fetched.prefix}${state.config.regionEndMarker}${rest}`;
+			state.visited.set(key, text);
+			while (state.visited.size > 8) state.visited.delete(state.visited.keys().next().value!);
+			const parsed = parsedVisits.get(state) ?? new Map<string, FragmentFetched>();
+			parsedVisits.set(state, parsed);
+			// Parsing runs no page code; done at idle, a Back to this page only swaps.
+			const idle = () => {
+				if (state.visited.get(key) === text)
+					parsed.set(key, state.parse(fetched.url, text));
+				for (const other of parsed.keys())
+					if (!state.visited.has(other)) parsed.delete(other);
+			};
+			if (w.requestIdleCallback) w.requestIdleCallback(idle, { timeout: 2000 });
+			else w.setTimeout(idle, 200);
+		},
+		(error: unknown) => {
+			ended();
+			reportAsync(error);
+		},
+	);
 	await ran;
 }