@ogygia/core 0.12.3 → 0.13.0

package/dist/runtime/router-nav.js

@@ -1,4 +1,3 @@
-import { PageCache } from "./page-cache.js";
 import { boot_link, router_link, slots } from "./slots.js";
 import { dispose_scope } from "../ref.js";
 import { reconcile_body, stamp_region_keys, swap_body } from "./reconcile.js";
@@ -12,26 +11,31 @@ import { emit } from "../events/bus.js";
 * intercepted click: page fetch + cache, head merge, the body reconcile / morph, seeds, a11y.
 * Nothing here runs at boot; a visitor who never leaves the page never downloads it.
 *
-* A navigation is TWO tasks. The first — this module's `navigate` after the fetch — does everything
-* that needs no live DOM change: parse the HTML, read the route facts, batch the incoming holes,
-* stamp reconcile keys, parse the incoming page seed, drop hints for modules already warm, preload
-* stylesheets. Then it yields. The second task is the view transition's callback and does ONLY the
-* DOM: head merge, seeds, body morph, title. The old single-task swap ran a whole-document regex,
-* two `'*'` walks and a seed parse inside `startViewTransition`, on the frame the transition
-* captures.
+* A navigation is a STAGED CHANGE (`stage`, @ogygia/machine), in two tasks. The build — this
+* module's `navigate` up to the commit — does everything that needs no live DOM change: fetch and
+* parse the HTML, read the route facts, batch the incoming holes, stamp reconcile keys, parse the
+* incoming page seed, drop hints for modules already warm, load the stylesheets (inert: they style
+* nothing yet). Then it yields. The commit is one synchronous step, the view transition's callback
+* or a plain call, and does ONLY the DOM: head merge, seeds, body morph, title. A navigation left
+* before its commit gives back what it built; one whose commit throws goes to the browser. The old
+* single-task swap ran a whole-document regex, two `'*'` walks and a seed parse inside
+* `startViewTransition`, on the frame the transition captures. The soft refresh is staged the same
+* way.
 */
 const KitBoot = { document_has: (doc) => boot_link().KitBoot.document_has(doc) };
 const regions_in_shadow = () => boot_link().regions_in_shadow();
+const release_sheets = (unlisted) => boot_link().release_sheets(unlisted);
 const session = () => boot_link().runtime_session;
+/** devalue first, when the fetched page holds a script in its lane (./devalue-lane.ts) */
+const devalue_for = (doc) => boot_link().needs_devalue(doc) ? boot_link().load_devalue() : void 0;
 const is_warmed_module = (entry, base) => boot_link().is_warmed_module(entry, base);
 const warm_island_module = (entry, base) => boot_link().warm_island_module(entry, base);
 const note_entry_location = (entry, src, base) => boot_link().note_entry_location(entry, src, base);
 const register_island_graph = (text, base) => boot_link().register_island_graph(text, base);
 const yield_task = () => boot_link().yield_task();
-const document_key = (url) => router_link().document_key(url);
+/** What a machine's task answers once its visit is left (the boot's `@ogygia/machine`). */
+const is_stale = (v) => v === boot_link().STALE;
 const jump_to_hash = (hash) => router_link().jump_to_hash(hash);
-const push_state = (state, url) => router_link().push_state(state, url);
-const replace_state = (state, url) => router_link().replace_state(state, url);
 const DEVTOOLS = typeof __OGYGIA_DEVTOOLS__ !== "undefined" ? __OGYGIA_DEVTOOLS__ : false;
 /** High-res clock for devtools nav timings (guarded — dead when off). */
 const dt_now = () => typeof performance !== "undefined" && performance.now ? performance.now() : Date.now();
@@ -117,6 +121,8 @@ const PAGE_CACHE_MAX_ENTRIES = 32;
 const PAGE_CACHE_MAX_BYTES = 4e6;
 /** Cap on waiting for a destination stylesheet to load before the body swap (cold-cache FOUC guard). */
 const STYLESHEET_WAIT_MS = 2e3;
+/** A `Content-Disposition` that makes a response a file to save. */
+const ATTACHMENT = /^\s*attachment\b/i;
 /** Kit remote-function POSTs live under `…/_app/remote/…` (or custom `appDir`). */
 const REMOTE_MUTATION_PATH = /\/remote(?:\/|$|\?)/;
 /** An `<ogygia-region>` open tag's attributes (shared `g` regex — reset `lastIndex` per scan). */
@@ -213,20 +219,36 @@ function apply_late_templates(root) {
 * linger in the tab order. For `<body>` the attribute is removed immediately (body stays the active
 * element regardless). For a normal element — a `#hash` heading — removing `tabindex` while it is
 * focused would BLUR it back to `<body>`, so the cleanup is deferred to the element's next `blur`.
+*
+* The `tabindex` is LENT until that blur (`lent`), once per element: a second navigation that
+* focuses it meanwhile (a refresh in place at its `#hash`) finds the loan and leaves it, instead of
+* saving the first one's `-1` as the element's own and putting that back after the first cleanup
+* (#278). The loan is the element's, not the page's: an element kept across a navigation (inside a
+* kept island) still gives its `tabindex` back when focus leaves it on the next page.
 */
 function focus_reset(el) {
 	const is_body = el === document.body || el === document.documentElement;
-	const had = el.hasAttribute("tabindex");
+	if (lent.has(el)) {
+		el.focus({ preventScroll: true });
+		return;
+	}
 	const prev = el.getAttribute("tabindex");
 	const restore = () => {
-		if (had) el.setAttribute("tabindex", prev);
+		lent.delete(el);
+		if (prev !== null) el.setAttribute("tabindex", prev);
 		else el.removeAttribute("tabindex");
 	};
 	el.tabIndex = -1;
 	el.focus({ preventScroll: true });
-	if (is_body) restore();
-	else el.addEventListener("blur", () => restore(), { once: true });
+	if (is_body) {
+		restore();
+		return;
+	}
+	lent.set(el, prev);
+	el.addEventListener("blur", restore, { once: true });
 }
+/** The elements whose `tabindex` a navigation's focus lent until they blur, with their own value. */
+const lent = /* @__PURE__ */ new WeakMap();
 /** Head nodes that must never be adopted from SPA HTML (rewrite relative fetches / CSP). */
 function is_dangerous_head_node(node) {
 	const tag = node.tagName;
@@ -237,38 +259,44 @@ function is_dangerous_head_node(node) {
 	}
 	return false;
 }
-const page_cache = new PageCache({
-	ttlMs: PREFETCH_TTL_MS,
-	maxEntries: PAGE_CACHE_MAX_ENTRIES,
-	maxBytes: PAGE_CACHE_MAX_BYTES
+let page_flights;
+/** The world the cached pages are made in: a mutation moves it (`bust_page_cache`). */
+let page_world;
+/** The page fetches: one flight per address, shared by every navigation and prefetch of it. A
+*  cacheable answer is kept for PREFETCH_TTL_MS, within PAGE_CACHE_MAX_BYTES (each entry weighs at
+*  least its share of it, so no more than PAGE_CACHE_MAX_ENTRIES small pages are kept). They are made
+*  in `page_world`: a move of it drops them all, a fetch in flight is aborted, and a navigation that
+*  waited on it fetches again. */
+const pages = () => page_flights ??= boot_link().flights.keyed()({
+	name: "router pages",
+	key: ["href"],
+	ignore: { purpose: "a navigation joins the prefetch out for its address: how, not what" },
+	run: (ask, signal) => run_page_fetch(ask, signal),
+	world: page_world = boot_link().world(),
+	keep: (answer) => answer.page !== null && answer.cacheable ? PREFETCH_TTL_MS : 0,
+	max: PAGE_CACHE_MAX_BYTES,
+	weigh: (answer) => Math.max((answer.page?.html.length ?? 0) * 2, PAGE_CACHE_MAX_BYTES / PAGE_CACHE_MAX_ENTRIES)
 });
-const inflight = /* @__PURE__ */ new Map();
 /** Prefetches still waiting in the load scheduler's queue, by href (a click promotes its one). */
 const queued_prefetch = /* @__PURE__ */ new Map();
-/** requested href → the FINAL href a fetch landed on after following server redirects, when it
-*  differs. One-shot: `navigate()` reads it to correct the address bar (a redirect is invisible to
-*  `fetch` beyond `response.url`), then deletes it. See {@link fetch_page}. */
-const final_url = /* @__PURE__ */ new Map();
 /** Hrefs whose prefetched HTML was already scanned for island entries — parse once. (URL-level
 *  import dedupe lives in the shared `warm_island_module`.) */
 const warmed_pages = /* @__PURE__ */ new Set();
-/** (Hard SPA navigations cancel through the router's own handle, `r.nav_gen` / `r.nav_abort`, so a
-*  "same document" decision there can stop one in flight: SpaRouter.supersede.) */
-/** Soft invalidate fetches only — aborting these must not cancel a real click nav. */
-let soft_gen = 0;
-let soft_abort = null;
+/** (Hard SPA navigations are the router's own machine, `r.nav` (./navigation.ts), so a "same
+*  document" decision there can stop one in flight: SpaRouter.supersede. The soft refresh is its
+*  machine too, `boot_link().soft` (./soft-refresh.ts): the boot holds it, as a page without the
+*  router refreshes too.) */
 /** The visually-hidden `aria-live` region that announces each navigation to screen readers. Created
 *  lazily on the first nav and reused (a live region must persist so assistive tech observes its
 *  mutations). It lives in `<body>` but is DETACHED before each body swap so the reconcile never
 *  removes it, then re-attached. See {@link announce} / {@link reset_focus}. */
 let announcer = null;
+/** Moves the world the cached pages are made in: what is kept goes, and a fetch that started before
+*  the move (a prefetch out when a remote mutation lands) never fills the cache after it with the
+*  page as it was (#208), and a navigation that waited on it fetches again. (No pages yet: none to
+*  put out of date.) */
 function bust_page_cache() {
-	page_cache.clear();
-	inflight.clear();
-	final_url.clear();
-}
-function page_cache_size() {
-	return page_cache.size;
+	page_world?.bump();
 }
 /**
 * Bust the SPA HTML cache after any successful Kit remote mutation (command/form POST).
@@ -292,65 +320,81 @@ function install_remote_mutation_cache_bust() {
 	};
 }
 install_remote_mutation_cache_bust();
-function fetch_page(href, signal, purpose = "nav") {
-	const cached = page_cache.get(href);
-	if (cached != null) return Promise.resolve(cached);
-	const pending = inflight.get(href);
-	if (pending) {
-		if (purpose === "nav") queued_prefetch.get(href)?.promote("user");
-		return pending;
+/**
+* The page at `href`, as HTML plus the address it belongs to: a server redirect (a Kit `redirect()`
+* in load, a trailing-slash canonicalization) is followed by `fetch` transparently, and
+* `response.url` is its only trace. The landing travels WITH the HTML, through the cache and to the
+* navigation that reads it, so nothing else (a cache clear, another fetch) can take it away.
+*/
+async function fetch_page(href, signal, purpose = "nav") {
+	const ask = {
+		href,
+		purpose
+	};
+	for (;;) {
+		if (purpose !== "prefetch") queued_prefetch.get(href)?.promote("user");
+		const answer = await pages().get(ask, { signal });
+		if (answer !== boot_link().STALE) {
+			if (purpose === "prefetch" && answer.page !== null) warm_modules(href, answer.page.html);
+			return answer.page;
+		}
+		if (signal?.aborted || purpose === "prefetch") return null;
 	}
-	final_url.delete(href);
+}
+/** One page fetch (a flight's work): a prefetch waits for its turn in the load scheduler first. */
+async function run_page_fetch({ href, purpose }, signal) {
 	const go = () => fetch(href, {
 		signal,
 		headers: nav_headers(purpose),
 		...purpose === "prefetch" ? { priority: "low" } : {}
 	});
-	let fetched;
-	if (purpose === "prefetch") {
-		const slot = boot_link().load_slot({
-			kind: "content",
-			cls: "speculative",
-			label: href
-		});
-		queued_prefetch.set(href, slot.ticket);
-		fetched = slot.ready.then((release) => {
-			queued_prefetch.delete(href);
-			return go().finally(release);
-		});
-	} else fetched = go();
-	const settled = fetched.then(async (res) => {
+	let res;
+	try {
+		if (purpose === "prefetch") {
+			const { LoadSlot } = boot_link();
+			const slot = new LoadSlot({
+				kind: "content",
+				cls: "speculative",
+				label: href
+			});
+			queued_prefetch.set(href, slot);
+			const release = await slot.ready;
+			if (queued_prefetch.get(href) === slot) queued_prefetch.delete(href);
+			try {
+				if (signal.aborted) return {
+					page: null,
+					cacheable: false
+				};
+				res = await go();
+			} finally {
+				release();
+			}
+		} else res = await go();
 		if (!(res.headers.get("content-type") || "").includes("text/html")) return {
-			html: null,
+			page: null,
 			cacheable: false
 		};
-		if (res.redirected && res.url && res.url !== href) final_url.set(href, res.url);
+		if (ATTACHMENT.test(res.headers.get("content-disposition") || "")) return {
+			page: null,
+			cacheable: false
+		};
+		const url = res.redirected && res.url ? res.url : href;
 		const html = await res.text();
 		const cc = res.headers.get("cache-control") || "";
 		return {
-			html,
+			page: {
+				html,
+				url
+			},
 			cacheable: spa_html_cacheable(cc, res.headers.has("set-cookie"))
 		};
-	}).catch((err) => {
+	} catch (err) {
 		if (err && err.name === "AbortError") throw err;
 		return {
-			html: null,
+			page: null,
 			cacheable: false
 		};
-	});
-	const html_p = settled.then((r) => r.html);
-	if (!signal) {
-		inflight.set(href, html_p);
-		html_p.finally(() => {
-			if (inflight.get(href) === html_p) inflight.delete(href);
-		});
-		settled.then((r) => {
-			if (r.html == null) return;
-			if (r.cacheable) page_cache.set(href, r.html);
-			warm_modules(href, r.html);
-		}).catch(() => {});
 	}
-	return html_p;
 }
 /**
 * Kick off import() for every island module the prefetched page will hydrate, so they are in the
@@ -401,16 +445,18 @@ function build_of(d) {
 	const file = (v) => v ? v.slice(v.lastIndexOf("/") + 1) : "";
 	return file(s.getAttribute("src")) + " " + file(s.getAttribute("data-og-locations"));
 }
-async function navigate(r, url, from, { push = true, pop_scroll = null, type = "link", replace = false } = {}) {
-	if (!r.run_before(from, url, type)) {
-		if (r.nav_target === url.href) r.nav_target = null;
-		return;
-	}
+/** What matches no screen: a sheet under it loads, and styles nothing. */
+const INERT_MEDIA = "not all";
+/** The next page's sheet goes live: it styles the page as it came. */
+function apply_sheet({ link, media, priority }) {
+	if (media === null) link.removeAttribute("media");
+	else link.setAttribute("media", media);
+	if (priority === null) link.removeAttribute("fetchpriority");
+}
+async function navigate(r, url, from, { push = true, pop, type = "link", replace = false } = {}, claim = r.nav.now) {
+	if (r.nav.now !== claim) return;
 	const dt_t0 = DEVTOOLS ? dt_now() : 0;
-	let dt_reconciled = false;
 	const nav_t0 = performance.now();
-	let nav_fetched = nav_t0;
-	let nav_styled = nav_t0;
 	if (DEVTOOLS) emit({
 		domain: "nav",
 		name: "nav.start",
@@ -418,93 +464,80 @@ async function navigate(r, url, from, { push = true, pop_scroll = null, type = "
 		to: url.pathname + url.search,
 		type
 	});
-	r.nav_abort?.abort();
-	r.nav_abort = new AbortController();
-	const { signal } = r.nav_abort;
-	const gen = ++r.nav_gen;
-	r.nav_target = url.href;
-	signal.addEventListener("abort", () => {
-		if (r.nav_target === url.href) r.nav_target = null;
+	r.nav.go("loading", { href: url.href });
+	const mine = r.nav.now;
+	const attempt = r.nav.scope;
+	const next = session().next_visit();
+	attempt.defer(() => {
+		if (session().visit !== next) next.scope.close();
 	});
-	if (replace) replace_state({
-		...history.state,
-		ogygia: true
-	}, url.href);
-	else if (push) {
-		replace_state({
-			...history.state,
-			scroll: {
-				x: scrollX,
-				y: scrollY
-			}
-		});
-		push_state({ ogygia: true }, url.href);
-	}
+	const move = pop ? "pop" : push && !replace ? "push" : "replace";
+	const hand_off = (error, written = false) => r.hand_off(url, mine, written ? "replace" : move, error);
 	const purpose = type === "popstate" ? "history" : "nav";
-	let html;
-	try {
-		html = await fetch_page(url.href, signal, purpose);
-	} catch (err) {
-		if (err?.name === "AbortError" || gen !== r.nav_gen) return;
-		location.href = url.href;
-		return;
-	}
-	if (gen !== r.nav_gen) return;
-	if (html == null) {
-		location.href = url.href;
-		return;
-	}
-	nav_fetched = performance.now();
-	page_cache.delete(url.href);
-	let dest = url;
-	const landed = final_url.get(url.href);
-	final_url.delete(url.href);
-	if (landed) try {
-		dest = new URL(landed, url);
-	} catch {
-		dest = url;
-	}
-	const hand_off = () => {
-		location.href = url.href;
+	const build = async ({ signal, discard }) => {
+		const page = await fetch_page(url.href, signal, purpose);
+		if (page === null || signal.aborted) return null;
+		const { html } = page;
+		const fetched = performance.now();
+		pages().drop(({ href }, entry) => href === url.href && entry.kind === "kept" && !entry.flying);
+		let dest = url;
+		if (page.url !== url.href) try {
+			dest = new URL(page.url, url);
+		} catch {
+			dest = url;
+		}
+		if (dest.origin !== location.origin) return null;
+		const doc = new DOMParser().parseFromString(html, "text/html");
+		if (KitBoot.document_has(doc)) return null;
+		const marker = doc.querySelector("meta[name=\"ogygia-router\"]");
+		if (!marker) return null;
+		const next_build = build_of(doc);
+		const this_build = next_build === null ? null : build_of(document);
+		if (this_build !== null && next_build !== this_build) return null;
+		if (doc.querySelector("meta[name=\"ogygia-first-load\"]")) return null;
+		globalThis.__og_restore?.(doc);
+		const prefer_reduced_motion = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+		const use_vt = marker.getAttribute("content") !== "plain" && !prefer_reduced_motion;
+		for (const el of doc.querySelectorAll("ogygia-region")) pin_region_urls(el, dest.href);
+		batch_regions(doc, next.scope);
+		await devalue_for(doc);
+		if (signal.aborted) return null;
+		preflight(doc, dest);
+		const sheets = [];
+		await preload_stylesheets(doc.head, attempt, sheets, discard);
+		if (signal.aborted) return null;
+		const styled = performance.now();
+		await yield_task();
+		return {
+			doc,
+			dest,
+			use_vt,
+			sheets,
+			fetched,
+			styled,
+			reconciled: false,
+			written: false
+		};
 	};
-	if (dest.origin !== location.origin) return hand_off();
-	const doc = new DOMParser().parseFromString(html, "text/html");
-	if (KitBoot.document_has(doc)) return hand_off();
-	const marker = doc.querySelector("meta[name=\"ogygia-router\"]");
-	if (!marker) return hand_off();
-	const next_build = build_of(doc);
-	const this_build = next_build === null ? null : build_of(document);
-	if (this_build !== null && next_build !== this_build) return hand_off();
-	if (doc.querySelector("meta[name=\"ogygia-first-load\"]")) return hand_off();
-	globalThis.__og_restore?.(doc);
-	if (dest !== url) replace_state({
-		...history.state,
-		ogygia: true
-	}, dest.href);
-	const prefer_reduced_motion = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
-	const use_vt = marker.getAttribute("content") !== "plain" && !prefer_reduced_motion;
-	for (const el of doc.querySelectorAll("ogygia-region")) pin_region_urls(el, dest.href);
-	batch_regions(doc, dest.href);
-	preflight(doc, dest);
-	await preload_stylesheets(doc.head);
-	if (gen !== r.nav_gen) return;
-	nav_styled = performance.now();
-	await yield_task();
-	if (gen !== r.nav_gen) return;
-	const reconcile = !!slots.morph && !regions_in_shadow() && !document.body.querySelector("[data-og-no-reconcile]") && !doc.body.querySelector("[data-og-no-reconcile]");
-	const swap = () => {
-		if (gen !== r.nav_gen) return;
+	const commit = (built) => {
+		if (built === null) return;
+		const { doc, dest } = built;
+		const { soft } = boot_link();
+		if (soft.now.kind === "refreshing") soft.go("idle");
+		const left = r.current_url;
+		r.history.commit(dest, move, pop);
+		built.written = true;
+		const reconcile = !!slots.morph && !regions_in_shadow() && !document.body.querySelector("[data-og-no-reconcile]") && !doc.body.querySelector("[data-og-no-reconcile]");
 		announcer?.remove();
 		document.dispatchEvent(new Event("og:before-swap"));
-		merge_head(doc.head);
-		if (gen !== r.nav_gen) return;
-		if (slots.forms.enabled && r.current_url) slots.forms.snapshot(document.body, r.current_url.pathname);
-		prepare_spa_document();
+		const unlisted_sheets = merge_head(doc.head);
+		for (const sheet of built.sheets) apply_sheet(sheet);
+		if (slots.forms.enabled) slots.forms.snapshot(document.body, left.pathname);
+		prepare_spa_document(next);
 		apply_soft_invalidate_doc(doc);
-		if (gen !== r.nav_gen) return;
 		if (reconcile) {
 			reconcile_body(document.body, doc.body, slots.morph);
-			dt_reconciled = true;
+			built.reconciled = true;
 			document.title = doc.title;
 			session().settle_lakes_in(document.body);
 		} else {
@@ -520,29 +553,53 @@ async function navigate(r, url, from, { push = true, pop_scroll = null, type = "
 		}
 		globalThis.__og_restore_adopt?.();
 		session().retire_page_head_copies();
+		release_sheets(unlisted_sheets);
 		apply_late_templates(document.body);
 		finish_spa_document();
 		if (slots.forms.enabled) slots.forms.restore(url.pathname);
 		document.dispatchEvent(new Event("og:after-swap"));
 	};
-	if (use_vt && document.startViewTransition) {
-		const restore_vt_names = fold_orphan_vt_names(document.body, doc.body);
+	const staged = boot_link().stage(attempt, {
+		name: "navigation",
+		build,
+		commit
+	});
+	let built;
+	try {
+		built = await staged.ready;
+	} catch (error) {
+		return hand_off(error);
+	}
+	if (is_stale(built) || r.nav.now !== mine) return;
+	if (built === null) return hand_off();
+	const { dest } = built;
+	const out = {};
+	const swap = () => {
+		try {
+			staged.commit();
+		} catch (error) {
+			out.failed = { error };
+		}
+	};
+	if (built.use_vt && document.startViewTransition) {
+		const restore_vt_names = fold_orphan_vt_names(document.body, built.doc.body);
 		const t = document.startViewTransition(swap);
 		t.ready?.catch(() => {});
 		(t.finished ?? Promise.resolve()).then(restore_vt_names, restore_vt_names);
 		await t.updateCallbackDone.catch(() => {});
+		if (out.failed) t.skipTransition?.();
 	} else swap();
-	if (gen !== r.nav_gen) return;
-	r.doc_key = document_key(dest);
-	r.current_url = dest;
-	r.nav_target = null;
+	if (out.failed) return hand_off(out.failed.error, built.written);
+	if (r.nav.now !== mine) return;
+	r.nav.move("loading", "settling", { href: url.href });
+	const settled = r.nav.now;
 	boot_link().beacon_nav({
 		from: from.pathname + from.search,
 		to: dest.pathname + dest.search,
 		type,
 		t: nav_t0,
-		fetched: nav_fetched,
-		styled: nav_styled,
+		fetched: built.fetched,
+		styled: built.styled,
 		swapped: performance.now(),
 		href: url.href
 	});
@@ -551,27 +608,25 @@ async function navigate(r, url, from, { push = true, pop_scroll = null, type = "
 		name: "nav.finish",
 		to: dest.pathname + dest.search,
 		ms: dt_now() - dt_t0,
-		reconciled: dt_reconciled,
-		vt: !!(use_vt && document.startViewTransition)
+		reconciled: built.reconciled,
+		vt: !!(built.use_vt && document.startViewTransition)
 	});
-	if (replace) {} else if (pop_scroll) {
+	const scroll = pop?.scroll;
+	if (replace) {} else if (scroll) {
 		const html_el = document.documentElement;
 		const prev = html_el.style.scrollBehavior;
 		html_el.style.scrollBehavior = "auto";
 		try {
-			window.scrollTo(pop_scroll.x, pop_scroll.y);
+			window.scrollTo(scroll.x, scroll.y);
 		} finally {
 			html_el.style.scrollBehavior = prev;
 		}
 	} else jump_to_hash(dest.hash);
 	announce(dest);
-	reset_focus(dest.hash);
+	reset_focus(dest.hash, pop?.focus ?? null);
 	r.run_after(from, dest, type);
 	document.dispatchEvent(new Event("og:page-load"));
-	if (gen === r.nav_gen) {
-		r.nav_abort = null;
-		if (r.nav_target === url.href) r.nav_target = null;
-	}
+	if (r.nav.now === settled) r.nav.go("idle");
 	r.scan_preload_links();
 }
 /**
@@ -585,29 +640,44 @@ async function navigate(r, url, from, { push = true, pop_scroll = null, type = "
 * that need query updates use `.refresh()`, or `submit().updates(q)` with server
 * `requested(q).refreshAll()` (updates alone does not populate response `q`).
 *
-* Uses a separate abort/generation from hard `navigate()` so soft fetches never cancel
-* an in-flight click navigation (and vice versa).
+* Its own machine (`soft`, ./soft-refresh.ts, which the boot holds: a page without the router
+* refreshes too) so soft fetches never cancel an in-flight click navigation; a real navigation's
+* commit ends a soft refresh in flight.
+*
+* It refreshes the PAGE ON SCREEN (`on_screen`: the router's, which knows it; the address bar
+* without the router), never the page a navigation is still bringing (#268). The refreshed page is
+* staged like a navigation's (`stage`): fetched and parsed off to the side, merged in one commit,
+* which a navigation that went in first refuses (its commit ended this refresh). A refresh whose
+* devalue fails to load ends, and says so to its caller.
 */
-async function invalidate_all() {
+async function invalidate_all(on_screen) {
 	bust_page_cache();
-	const url = new URL(location.href);
-	soft_abort?.abort();
-	soft_abort = new AbortController();
-	const { signal } = soft_abort;
-	const gen = ++soft_gen;
-	let html;
+	const url = on_screen ?? new URL(location.href);
+	const { soft, stage } = boot_link();
+	soft.go("refreshing", { href: url.href });
+	const mine = soft.now;
+	const staged = stage(soft.scope, {
+		name: "soft refresh",
+		build: async ({ signal }) => {
+			const fetched = await fetch_page(url.href, signal);
+			if (fetched === null || signal.aborted) return null;
+			const doc = new DOMParser().parseFromString(fetched.html, "text/html");
+			if (KitBoot.document_has(doc) || !doc.querySelector("meta[name=\"ogygia-router\"]")) return null;
+			await devalue_for(doc);
+			return doc;
+		},
+		commit: (doc) => {
+			if (doc === null) return;
+			release_sheets(merge_head(doc.head));
+			apply_soft_invalidate_doc(doc);
+		}
+	});
 	try {
-		html = await fetch_page(url.href, signal);
-	} catch (err) {
-		if (err?.name === "AbortError" || gen !== soft_gen) return;
-		return;
+		if (is_stale(await staged.ready)) return;
+		staged.commit();
+	} finally {
+		if (soft.now === mine) soft.go("idle");
 	}
-	if (gen !== soft_gen || html == null) return;
-	const doc = new DOMParser().parseFromString(html, "text/html");
-	if (KitBoot.document_has(doc)) return;
-	if (!doc.querySelector("meta[name=\"ogygia-router\"]")) return;
-	merge_head(doc.head);
-	apply_soft_invalidate_doc(doc);
 }
 /**
 * ACCESSIBILITY — announce the new page. A body swap is invisible to assistive tech: no document
@@ -636,11 +706,15 @@ function announce(dest) {
 * does this natively; a body swap does not). SvelteKit's algorithm: a `[autofocus]` element wins;
 * else a `#hash` target; else focus falls back to `<body>` (made momentarily focusable). The one
 * ogygia twist: a control INSIDE kept/persisted chrome (`data-ogygia-keep` / `data-persist`) that
-* survived the nav is left focused — the visitor is still using that persistent widget.
+* survived the nav is left focused — the visitor is still using that persistent widget. A back or
+* forward step first gives focus back to the element (`kept`, by id) that had it when its entry
+* was left (./router.ts `RouterHistory`).
 */
-function reset_focus(hash) {
+function reset_focus(hash, kept = null) {
 	const active = document.activeElement;
 	if (active && active !== document.body && active.isConnected && active.closest("[data-ogygia-keep],[data-persist]")) return;
+	const was = kept ? document.getElementById(kept) : null;
+	if (was) return focus_reset(was);
 	if (hash) {
 		const id = decodeURIComponent(hash.slice(1));
 		const target = id ? document.getElementById(id) : null;
@@ -653,7 +727,11 @@ function reset_focus(hash) {
 	}
 	focus_reset(document.body);
 }
-/** Merge <head>: keep nodes present in both, remove stale, add new. Keeps runtime scripts alive. */
+/**
+* Merge <head>: keep nodes present in both, remove stale, add new. Keeps runtime scripts alive.
+* Returns the region sheets the new head does not list: they are for the regions that use them too
+* (./region-sheets.ts), so they go only after the swap, once it is settled which regions stayed.
+*/
 function merge_head(new_head) {
 	const current = document.head;
 	const owned = session().page_head;
@@ -664,36 +742,49 @@ function merge_head(new_head) {
 		if (is_dangerous_head_node(node)) continue;
 		next_keys.add(head_node_key(node));
 	}
+	const unlisted = [];
 	for (const [key, node] of current_nodes) {
 		if (next_keys.has(key)) continue;
 		if (keep_head_node_across_spa(node)) continue;
-		node.remove();
+		if (node.hasAttribute("data-ogygia-region-css")) unlisted.push(node);
+		else node.remove();
 	}
-	const anchor = current.firstChild;
+	let anchor = current.firstChild;
 	for (const node of Array.from(new_head.children)) {
 		if (is_dangerous_head_node(node)) continue;
 		const key = head_node_key(node);
 		const existing = current_nodes.get(key);
 		if (key === "STYLE:data-sveltekit") {
-			existing?.remove();
 			install_head_style(node, current, anchor);
+			if (existing) {
+				if (existing === anchor) anchor = existing.nextSibling;
+				existing.remove();
+			}
 			continue;
 		}
 		if (existing) continue;
 		if (node.tagName === "STYLE") install_head_style(node, current, anchor);
 		else session().claim_page_head(current.appendChild(node.cloneNode(true)));
 	}
+	return unlisted;
 }
 /**
 * Load the destination page's stylesheets into the live `<head>` and resolve once they have
-* applied — call this BEFORE the body swap. A freshly appended `<link rel="stylesheet">` loads
+* loaded — call this BEFORE the body swap. A freshly appended `<link rel="stylesheet">` loads
 * asynchronously, so swapping the body first shows the new route unstyled (e.g. a content column
 * at full width) until the sheet arrives. That window is invisible on a warm cache but flashes on
 * the first visit after a deploy, when the route CSS isn't cached yet. Preloading here closes it;
 * `merge_head` then dedupes these by key so nothing is added twice. Capped so a stalled sheet
 * can't hang navigation.
+*
+* Each loads INERT: under a media no screen matches (at the fetch priority of a sheet that does),
+* so a sheet that arrived first never styles the page still on screen while the navigation waits
+* for the rest (#267). The commit gives each its own media back (`apply_sheet`). The wait is the
+* navigation's (`attempt`: its listeners and its cap go when it ends); the sheets are the stage's
+* (listed in `sheets`, given back by `discard`): a navigation that ends before its commit takes
+* them out again.
 */
-function preload_stylesheets(new_head) {
+function preload_stylesheets(new_head, attempt, sheets, discard) {
 	const present = /* @__PURE__ */ new Set();
 	for (const node of Array.from(document.head.children)) if (node.tagName === "LINK" && node.getAttribute("rel") === "stylesheet") present.add(head_node_key(node));
 	const pending = [];
@@ -705,15 +796,30 @@ function preload_stylesheets(new_head) {
 		if (present.has(key)) continue;
 		present.add(key);
 		const link = node.cloneNode(true);
+		const sheet = {
+			link,
+			media: link.getAttribute("media"),
+			priority: link.getAttribute("fetchpriority")
+		};
+		link.setAttribute("media", INERT_MEDIA);
+		if (sheet.priority === null) link.setAttribute("fetchpriority", "high");
 		pending.push(new Promise((resolve) => {
-			link.addEventListener("load", () => resolve(), { once: true });
-			link.addEventListener("error", () => resolve(), { once: true });
+			attempt.on(link, "load", () => resolve(), { once: true });
+			attempt.on(link, "error", () => resolve(), { once: true });
 		}));
 		session().claim_page_head(link);
 		document.head.insertBefore(link, document.head.firstChild);
+		sheets.push(sheet);
+		discard(() => link.remove());
 	}
 	if (!pending.length) return Promise.resolve();
-	return Promise.race([Promise.all(pending), new Promise((resolve) => setTimeout(resolve, STYLESHEET_WAIT_MS))]);
+	return new Promise((resolve) => {
+		const cancel = attempt.timeout(resolve, STYLESHEET_WAIT_MS);
+		Promise.all(pending).then(() => {
+			cancel();
+			resolve();
+		});
+	});
 }
 /**
 * SINGLE-FLIGHT NAVIGATION. Collect the incoming page's deferred, load-timed region calls and stream them as
@@ -722,34 +828,20 @@ function preload_stylesheets(new_head) {
 * irrelevant. Only `when="load"` (or unset) is batched: a region scheduled `visible`/`idle`/media
 * stays lazy and fetches on its own trigger, so dynamic schedules are preserved, not eagerly pulled.
 */
-/** `base`: the fetched page's own URL (its relative hrefs resolve against it). */
-function batch_regions(doc, base) {
+/** `visit`: the scope of the page's visit, the batch's owner (a navigation called off stops it). */
+function batch_regions(doc, visit) {
 	const endpoints = [];
-	const batched = /* @__PURE__ */ new Set();
 	for (const el of Array.from(doc.querySelectorAll("ogygia-region[render=\"defer\"][endpoint]"))) {
 		if ((el.getAttribute("when") || "load") !== "load") continue;
 		const ep = el.getAttribute("endpoint");
-		if (ep) {
-			endpoints.push(ep);
-			batched.add(ep);
-		}
+		if (ep) endpoints.push(ep);
 	}
 	if (!endpoints.length) return;
-	const same_url = (href) => {
-		try {
-			const u = new URL(href, base);
-			return u.pathname + u.search;
-		} catch {
-			return href;
-		}
-	};
-	const batched_urls = new Set(Array.from(batched, same_url));
-	for (const link of Array.from(doc.querySelectorAll("link[rel=\"preload\"][as=\"fetch\"]"))) if (batched_urls.has(same_url(link.getAttribute("href") || ""))) link.remove();
 	if (DEVTOOLS) emit({
 		domain: "nav",
 		name: "nav.batch",
 		count: endpoints.length
 	});
-	slots.frames?.stream?.(endpoints);
+	slots.frames?.stream?.(endpoints, visit);
 }
-export { DOCUMENT_ACCEPT, apply_late_templates, bust_page_cache, fetch_page, head_node_key, install_head_style, invalidate_all, keep_head_node_across_spa, navigate, page_cache_size, tag_attr };
+export { DOCUMENT_ACCEPT, apply_late_templates, bust_page_cache, fetch_page, head_node_key, install_head_style, invalidate_all, keep_head_node_across_spa, navigate, tag_attr };