@ultimat3/render 23.0.0 → 25.0.0

package/src/navigation-fetch.ts

@@ -5,14 +5,15 @@
  * page's text, or a non-page's bytes to hand over (a prefetch's are dropped unread).
  */
 
-import { CLIENT_BUILD_META, CLIENT_SCOPE_META } from '@ultimat3/core/page';
 import {
-  NAVIGATION_HEADER,
-  NAVIGATION_LOCATION_HEADER,
-  NAVIGATION_META,
-  NAVIGATION_SCOPE_HEADER,
-  NAVIGATION_SURFACE_HEADER,
-} from './navigation-rules';
+  CLIENT_BUILD_META,
+  CLIENT_NAVIGATION_HEADER,
+  CLIENT_NAVIGATION_LOCATION_HEADER,
+  CLIENT_NAVIGATION_SCOPE_HEADER,
+  CLIENT_NAVIGATION_SURFACE_HEADER,
+  CLIENT_SCOPE_META,
+} from '@ultimat3/core/page';
+import { NAVIGATION_META } from './navigation-rules';
 
 /** One fetched answer, read once — a prefetch and the click after it share it. */
 export interface Answer {
@@ -41,11 +42,11 @@ export function fetchDocument(
 ): Promise<Answer> {
   const headers: Record<string, string> = {
     accept: 'text/html,application/xhtml+xml',
-    [NAVIGATION_HEADER]: purpose,
-    [NAVIGATION_SURFACE_HEADER]: metaOf(doc, NAVIGATION_META) ?? '',
+    [CLIENT_NAVIGATION_HEADER]: purpose,
+    [CLIENT_NAVIGATION_SURFACE_HEADER]: metaOf(doc, NAVIGATION_META) ?? '',
   };
   const scope = metaOf(doc, CLIENT_SCOPE_META);
-  if (scope !== null) headers[NAVIGATION_SCOPE_HEADER] = scope;
+  if (scope !== null) headers[CLIENT_NAVIGATION_SCOPE_HEADER] = scope;
   // GET only: a skewed GET is refused before any route runs; a POST is never refused mid-submit.
   const build = metaOf(doc, CLIENT_BUILD_META);
   if ((init.method ?? 'GET') === 'GET' && build !== null) headers[CLIENT_BUILD_META] = build;
@@ -61,7 +62,7 @@ export function fetchDocument(
         if (purpose === 'prefetch') await response.body?.cancel();
         else body = await response.blob();
       }
-      const location = response.headers.get(NAVIGATION_LOCATION_HEADER);
+      const location = response.headers.get(CLIENT_NAVIGATION_LOCATION_HEADER);
       return {
         status: response.status,
         opaqueRedirect,

package/src/navigation-rules.ts

@@ -1,33 +1,19 @@
 /**
  * Which clicks and submits the client router takes, and which it leaves to the browser — as pure
  * functions over plain facts, so every rule is testable without a DOM and the router
- * (`navigation.ts`) only gathers the facts. Also the one declaration of every attribute, header and
- * event name the router shares with the documents the server renders and the apps that listen.
+ * (`navigation.ts`) only gathers the facts. Also the one declaration of every attribute and event
+ * name the router shares with the documents the server renders and the apps that listen; the
+ * router's headers are core's (`CLIENT_NAVIGATION_*_HEADER`), imported where they are sent.
  */
 
-import {
-  CLIENT_NAVIGATION_HEADER,
-  CLIENT_NAVIGATION_LOCATION_HEADER,
-  CLIENT_NAVIGATION_SCOPE_HEADER,
-  CLIENT_NAVIGATION_SURFACE_HEADER,
-} from '@ultimat3/core/page';
-
 /**
  * `<meta name="ultimate-navigation" content="<app>:<surface>">` — present only on an opted-in
  * surface. The app's name is part of it, so two apps on one origin (web and admin) are two routers.
  */
 export const NAVIGATION_META = 'ultimate-navigation';
-/**
- * Sent on every router fetch: `soft` when a visitor asked for the page, `prefetch` when the router
- * guessed they would. The server answers a route that did not opt in before running it.
- */
-export const NAVIGATION_HEADER = CLIENT_NAVIGATION_HEADER;
-/** The `<app>:<surface>` of the document the router runs in, on every router fetch. */
-export const NAVIGATION_SURFACE_HEADER = CLIENT_NAVIGATION_SURFACE_HEADER;
-/** The document's principal (`ultimate-scope`), when it carries one. */
-export const NAVIGATION_SCOPE_HEADER = CLIENT_NAVIGATION_SCOPE_HEADER;
-/** On a `204`: load this URL with a real navigation — the server's hand-over. */
-export const NAVIGATION_LOCATION_HEADER = CLIENT_NAVIGATION_LOCATION_HEADER;
+// The four router HEADERS are core's (`CLIENT_NAVIGATION_HEADER`, `…_SURFACE_HEADER`,
+// `…_SCOPE_HEADER`, `…_LOCATION_HEADER`), imported by the fetcher and by `@ultimat3/http`'s gate —
+// 25.0.0 deleted the `NAVIGATION_*_HEADER` aliases this file published for them (`X_HELPER_COPY`).
 /** On a link or form: always a full document load. */
 export const NAVIGATION_RELOAD_ATTRIBUTE = 'data-x-reload';
 /** On a link: followed softly, never fetched before it is clicked. */
@@ -70,7 +56,8 @@ export type NativeReason =
   | 'hash'
   | 'method'
   | 'encoding'
-  | 'file';
+  | 'file'
+  | 'unparsable';
 
 export type LinkVerdict =
   | { readonly kind: 'soft'; readonly url: string }
@@ -97,9 +84,12 @@ const native = (reason: NativeReason): { readonly kind: 'native'; reason: Native
   reason,
 });
 
-/** Same document, fragment only: the browser scrolls, no fetch. */
-const hashOnly = (to: URL, from: URL): boolean =>
-  to.hash !== '' && to.pathname === from.pathname && to.search === from.search;
+/**
+ * Same document, fragment only: the browser scrolls, no fetch. Asked of the HREF, not `to.hash`:
+ * an empty fragment (`<a href="#">`) parses to `hash === ''`, and was soft-navigated and re-fetched.
+ */
+const hashOnly = (href: string, to: URL, from: URL): boolean =>
+  href.includes('#') && to.pathname === from.pathname && to.search === from.search;
 
 /**
  * The link rules, in the order a reader checks them. The SURFACE is not decided here: the URL
@@ -113,12 +103,15 @@ export function linkVerdict(facts: LinkFacts): LinkVerdict {
   if (facts.download) return native('download');
   if (facts.rel.split(/\s+/).includes('external')) return native('external');
   if (facts.reload) return native('opt-out');
+  // `a.href` is the raw attribute when it does not parse (`href="http://"`): the browser decides
+  // what such a link does, where `new URL` threw a bare `TypeError` out of the click handler.
+  if (!URL.canParse(facts.href)) return native('unparsable');
   const to = new URL(facts.href);
   const from = new URL(facts.current);
   if (to.origin !== from.origin || (to.protocol !== 'http:' && to.protocol !== 'https:')) {
     return native('cross-origin');
   }
-  if (hashOnly(to, from)) return native('hash');
+  if (hashOnly(facts.href, to, from)) return native('hash');
   return { kind: 'soft', url: to.href };
 }
 
@@ -153,7 +146,7 @@ export type FormVerdict =
 
 /** What a `submit` tells the router — the submitter's `formmethod`/`formaction` already applied. */
 export interface FormFacts {
-  /** Resolved action URL. */
+  /** Resolved action URL — or the raw attribute when it does not resolve (`'unparsable'`). */
   readonly action: string;
   readonly current: string;
   /** Lower case: `get`, `post` or `dialog`. */
@@ -175,6 +168,7 @@ export function formVerdict(facts: FormFacts): FormVerdict {
   if (facts.method !== 'get' && facts.method !== 'post') return native('method');
   // `text/plain` is the browser's own encoding, with no `fetch` body that reproduces it byte for byte.
   if (facts.method === 'post' && facts.enctype === 'text/plain') return native('encoding');
+  if (!URL.canParse(facts.action)) return native('unparsable');
   const to = new URL(facts.action);
   if (to.origin !== new URL(facts.current).origin) return native('cross-origin');
   if (facts.method === 'get') {
@@ -246,6 +240,14 @@ export function responseVerdict(facts: ResponseFacts): ResponseVerdict {
   }
   if (facts.status === 204) {
     if (facts.location === null) return { kind: 'stay' };
+    // The caller ASSIGNS this to `window.location`, so only http(s) is a place to go: a scheme
+    // that runs in the page would be script in the app's origin. `@ultimat3/http`'s `locationFor`
+    // refuses it at the source; this is the same rule for an answer something else wrote. The
+    // requested url is loaded as a document instead — a POST is never re-sent, so it fails.
+    if (!/^https?:\/\/./i.test(facts.location) || !URL.canParse(facts.location)) {
+      const reason = 'a location that is not http(s)';
+      return get ? load(facts.requested, reason) : { kind: 'failed', reason };
+    }
     if (origin(facts.location) !== origin(facts.requested))
       return load(facts.location, 'another origin');
     // The server asked for THIS url as a document: the route did not run, the browser runs it.
@@ -259,7 +261,15 @@ export function responseVerdict(facts: ResponseFacts): ResponseVerdict {
     facts.build !== null && facts.nextBuild !== null && facts.build !== facts.nextBuild;
   // A GET refused for skew (409 before any route ran) or rendered by another build: load it.
   if (get && skewed) return load(facts.requested, 'another build');
-  if (!/^\s*text\/html\b/i.test(facts.contentType)) return { kind: 'hand-over' };
+  const html = /^\s*text\/html\b/i.test(facts.contentType);
+  // An error that is not a page (an offline service worker's empty 503, a JSON 404) is nothing to
+  // show — handed over, it became a `blob:` URL in the address bar. A GET is the browser's to
+  // load (a worker answers a real navigation with its offline page); a POST is never re-sent.
+  if (facts.status >= 400 && !html) {
+    const reason = 'an error answer that is not a page';
+    return get ? load(facts.requested, reason) : { kind: 'failed', reason };
+  }
+  if (!html) return { kind: 'hand-over' };
   // A POST answered in place IS the page the browser would have shown, whatever rendered it —
   // and when that is another principal's or build's, the caller stops trusting this tab
   // (`answerMovesTab`): every later navigation is a real load.

package/src/navigation-scroll.ts

@@ -0,0 +1,51 @@
+/**
+ * The client router's scroll keeping: the browser's own restoration is off, so the router restores
+ * a saved offset when a document LOADS onto one of its entries (reload, or Back after a full load),
+ * then saves the offset into the entry on screen as the visitor scrolls.
+ */
+
+import { entryOf, saveEntryScroll } from './navigation-history';
+
+export interface ScrollKeeper {
+  /** The offset, into the entry of the document on screen now. */
+  save(): void;
+  /** Drops a save still pending — it belongs to the entry just left. */
+  cancel(): void;
+  stop(): void;
+}
+
+/** How long a scroll must rest before it is saved: a browser caps `replaceState` calls. */
+const SCROLL_SETTLE_MS = 150;
+
+export function scrollKeeper(win: Window, rendered: () => string): ScrollKeeper {
+  win.history.scrollRestoration = 'manual';
+  // BEFORE the first save. With restoration manual, a reload or a Back that is a full load lands
+  // at the top, and the save below then overwrote the entry's offset with that 0 — the place the
+  // visitor left was lost twice. Only this document's own entry: one an app pushed has no offset.
+  const held = entryOf(win.history.state);
+  if (held !== undefined && held.doc === rendered()) {
+    win.scrollTo({
+      left: held.scroll[0],
+      top: held.scroll[1],
+      behavior: 'instant' as ScrollBehavior,
+    });
+  }
+  const save = (): void => saveEntryScroll(win, rendered());
+  save();
+  // Saved as the visitor scrolls, once the scroll settles — so FORWARD restores too.
+  let settle: number | undefined;
+  const cancel = (): void => win.clearTimeout(settle);
+  const onScroll = (): void => {
+    cancel();
+    settle = win.setTimeout(save, SCROLL_SETTLE_MS);
+  };
+  win.addEventListener('scroll', onScroll, { passive: true });
+  return {
+    save,
+    cancel,
+    stop() {
+      cancel();
+      win.removeEventListener('scroll', onScroll);
+    },
+  };
+}

package/src/navigation-swap.ts

@@ -56,8 +56,15 @@ export function missingStylesheets(doc: Document, next: Document): readonly stri
     .filter((href) => !loaded.has(href));
 }
 
-/** Resolves once every sheet loaded OR failed — a missing sheet must not hang the navigation. */
-export function loadStylesheets(doc: Document, hrefs: readonly string[]): Promise<void> {
+/**
+ * Resolves once every sheet loaded OR failed — a missing sheet must not hang the navigation. Each
+ * sheet joins `owned` as it is appended, so a swap that never happens still leaves it retirable.
+ */
+export function loadStylesheets(
+  doc: Document,
+  hrefs: readonly string[],
+  owned: WeakSet<Element>,
+): Promise<void> {
   return Promise.all(
     hrefs.map(
       (href) =>
@@ -68,6 +75,7 @@ export function loadStylesheets(doc: Document, hrefs: readonly string[]): Promis
           link.onload = () => done();
           link.onerror = () => done();
           doc.head.append(link);
+          owned.add(link);
         }),
     ),
   ).then(() => undefined);

package/src/navigation-tabs.ts

@@ -0,0 +1,58 @@
+/**
+ * The client router's tie to the origin's other tabs: one `BroadcastChannel`, so a write or a new
+ * principal in one tab empties every tab's prefetch cache. Closed while the page sits in the
+ * back/forward cache (an open channel keeps a page out of it); reopened, cache emptied, on return.
+ */
+
+import { onClientWrite, onRescope } from '@ultimat3/core/page';
+
+/** One channel per origin: a principal change or a write in one tab empties every tab's cache. */
+export const NAVIGATION_CHANNEL = 'ultimate:navigation';
+
+export interface TabSync {
+  /** This tab and every other: a write or a new principal makes every held page suspect. */
+  forget(): void;
+  stop(): void;
+}
+
+/** `clear` empties this tab's cache; called for this tab's own events and every other tab's. */
+export function tabSync(win: Window, clear: () => void): TabSync {
+  const open = (): BroadcastChannel | undefined => {
+    if (!('BroadcastChannel' in win)) return undefined;
+    const opened = new BroadcastChannel(NAVIGATION_CHANNEL);
+    opened.onmessage = clear;
+    return opened;
+  };
+  let channel = open();
+  const forget = (): void => {
+    clear();
+    channel?.postMessage('clear');
+  };
+  // `pagehide`, not `unload`: it fires for a page entering the back/forward cache too, and a page
+  // holding an open channel is refused by it — Back then reloads the page from the network.
+  const onHide = (): void => {
+    channel?.close();
+    channel = undefined;
+  };
+  // Restored from that cache: every message sent while it was frozen was missed, so nothing held
+  // can be trusted. A `pageshow` of a fresh load finds the channel open and leaves it.
+  const onShow = (event: PageTransitionEvent): void => {
+    if (!event.persisted || channel !== undefined) return;
+    channel = open();
+    clear();
+  };
+  win.addEventListener('pagehide', onHide);
+  win.addEventListener('pageshow', onShow);
+  const offWrite = onClientWrite(forget);
+  const offRescope = onRescope(forget);
+  return {
+    forget,
+    stop() {
+      win.removeEventListener('pagehide', onHide);
+      win.removeEventListener('pageshow', onShow);
+      offWrite();
+      offRescope();
+      onHide();
+    },
+  };
+}

package/src/navigation.ts

@@ -14,19 +14,15 @@
  * on documents whose surface opted in (`navigation: { client: [...] }` in `app.config.ts`).
  */
 
-import {
-  CLIENT_BUILD_META,
-  CLIENT_SCOPE_META,
-  onClientWrite,
-  onRescope,
-} from '@ultimat3/core/page';
+import { CLIENT_BUILD_META, CLIENT_SCOPE_META } from '@ultimat3/core/page';
 import { navigationCache } from './navigation-cache';
 import {
   anchorOf,
   announcer,
-  fieldText,
   focusMain,
+  formAction,
   formFields,
+  formPairs,
   handOver,
   linkFacts,
   type RunningTransition,
@@ -37,7 +33,6 @@ import {
   type EntryState,
   entryOf,
   STATE_KEY,
-  saveEntryScroll,
   scrollAfter,
   withoutFragment,
 } from './navigation-history';
@@ -51,6 +46,7 @@ import {
   NAVIGATED_EVENT,
   NAVIGATING_ATTRIBUTE,
   NAVIGATION_ERROR_EVENT,
+  NAVIGATION_MAX_HOPS,
   NAVIGATION_META,
   NAVIGATION_NO_PREFETCH_ATTRIBUTE,
   NAVIGATION_PREFETCH_DELAY_MS,
@@ -60,6 +56,7 @@ import {
   responseVerdict,
   reusable,
 } from './navigation-rules';
+import { scrollKeeper } from './navigation-scroll';
 import {
   documentHead,
   loadStylesheets,
@@ -68,6 +65,7 @@ import {
   runScripts,
   swapDocument,
 } from './navigation-swap';
+import { tabSync } from './navigation-tabs';
 
 export interface NavigateOptions {
   readonly method?: 'GET' | 'POST';
@@ -84,9 +82,6 @@ export interface NavigationRouter {
   stop(): void;
 }
 
-/** One channel per origin: a principal change or a write in one tab empties every tab's cache. */
-const CHANNEL = 'ultimate:navigation';
-
 interface RouterWindow extends Window {
   __xNavigation?: NavigationRouter;
 }
@@ -109,7 +104,7 @@ export function startNavigation(win: RouterWindow = window): NavigationRouter |
   let rendered = withoutFragment(win.location.href);
   /** The URL a navigation in flight is fetching: a prefetch never asks for it a second time. */
   let navigatingTo: string | undefined;
-  /** The view transition still animating, which a press skips to the new page. */
+  /** The view transition still animating — skipped only for a click it swallowed (`onClick`). */
   let animating: RunningTransition | undefined;
   /** Between a press and its click: the focus the press gives a link is not a hover. */
   let pressed = false;
@@ -122,28 +117,9 @@ export function startNavigation(win: RouterWindow = window): NavigationRouter |
   const live = announcer(doc);
   const owned = documentHead(doc);
   notePersisted(doc);
-  win.history.scrollRestoration = 'manual';
-
-  const channel = 'BroadcastChannel' in win ? new BroadcastChannel(CHANNEL) : undefined;
-  if (channel !== undefined) channel.onmessage = () => cache.clear();
-  /** This tab and every other: a write or a new principal makes every held page suspect. */
-  const forget = (): void => {
-    cache.clear();
-    channel?.postMessage('clear');
-  };
-  const offWrite = onClientWrite(forget);
-  const offRescope = onRescope(forget);
-
-  const saveScroll = (): void => saveEntryScroll(win, rendered);
-
-  saveScroll();
-  // Saved as the visitor scrolls, once the scroll settles — so FORWARD restores too, and a
-  // browser's cap on `replaceState` calls is never approached.
-  let settle: number | undefined;
-  const onScroll = (): void => {
-    win.clearTimeout(settle);
-    settle = win.setTimeout(saveScroll, 150);
-  };
+  const tabs = tabSync(win, () => cache.clear());
+  const forget = tabs.forget;
+  const scroll = scrollKeeper(win, () => rendered);
 
   const request = (url: string, purpose: 'soft' | 'prefetch', init?: RequestInit) =>
     fetchDocument(win, doc, url, purpose, init);
@@ -172,12 +148,11 @@ export function startNavigation(win: RouterWindow = window): NavigationRouter |
     signal: AbortSignal,
   ) => {
     if (method === 'POST') {
+      // Before AND once it settles, landed or not: a guess sent while the write was in flight
+      // may have rendered the old state, and a write that failed here may still have committed.
       forget();
-      return request(url, 'soft', {
-        method,
-        ...(options.body === undefined ? {} : { body: options.body }),
-        signal,
-      });
+      const body = options.body === undefined ? {} : { body: options.body };
+      return request(url, 'soft', { method, ...body, signal }).finally(forget);
     }
     const held = cache.peek(url);
     cache.delete(url);
@@ -198,6 +173,12 @@ export function startNavigation(win: RouterWindow = window): NavigationRouter |
   };
 
   const navigate = async (url: string, options: NavigateOptions = {}): Promise<void> => {
+    // The redirect chain's only exit is `hops >= NAVIGATION_MAX_HOPS`, which `NaN` never meets.
+    // `hops` is this router's own recursion counter (nothing outside it can reach `navigate`), so a
+    // non-count is a broken caller, not input: it fails CLOSED as an exhausted chain — one request,
+    // then the browser loads the page — instead of shipping the error renderer (~2 KB) to every page.
+    const asked = options.hops ?? 0;
+    const hops = Number.isSafeInteger(asked) && asked >= 0 ? asked : NAVIGATION_MAX_HOPS;
     const method = options.method ?? 'GET';
     // After an answer for another principal or build was shown in place, this tab is no longer
     // trusted to swap: every navigation is a real load (`answerMovesTab`).
@@ -212,7 +193,7 @@ export function startNavigation(win: RouterWindow = window): NavigationRouter |
     inflight = mine;
     win.clearTimeout(intent);
     navigatingTo = withoutFragment(url);
-    if (options.history !== 'none') saveScroll();
+    if (options.history !== 'none') scroll.save();
     const progress = win.setTimeout(
       () => doc.documentElement.setAttribute(NAVIGATING_ATTRIBUTE, ''),
       NAVIGATION_PROGRESS_DELAY_MS,
@@ -238,7 +219,7 @@ export function startNavigation(win: RouterWindow = window): NavigationRouter |
         opaqueRedirect: answer.opaqueRedirect,
         location: answer.location,
         contentType: answer.contentType,
-        hops: options.hops ?? 0,
+        hops,
         surface: metaOf(doc, NAVIGATION_META),
         nextSurface: next === null ? null : metaOf(next, NAVIGATION_META),
         build: metaOf(doc, CLIENT_BUILD_META),
@@ -262,7 +243,7 @@ export function startNavigation(win: RouterWindow = window): NavigationRouter |
         case 'follow':
           await navigate(verdict.url, {
             history: options.history === 'none' ? 'replace' : 'push',
-            hops: (options.hops ?? 0) + 1,
+            hops: hops + 1,
           });
           return;
         case 'hand-over':
@@ -274,11 +255,15 @@ export function startNavigation(win: RouterWindow = window): NavigationRouter |
       if (next === null) return;
       const landed = `${withoutFragment(url)}${new URL(url).hash}`;
       try {
-        await loadStylesheets(doc, missingStylesheets(doc, next));
+        // Owned from the moment they are appended: a navigation aborted after this point left its
+        // sheets in the head for good, styling every page after it — the next swap retires an
+        // owned sheet its page does not link.
+        await loadStylesheets(doc, missingStylesheets(doc, next), owned);
         if (mine.signal.aborted) return;
         let swapped: ReturnType<typeof swapDocument> | undefined;
-        const track = (running: RunningTransition | undefined): void => {
-          animating = running;
+        const track = (running: RunningTransition, finished: boolean): void => {
+          if (!finished) animating = running;
+          else if (animating === running) animating = undefined;
         };
         await transition(
           win,
@@ -337,9 +322,9 @@ export function startNavigation(win: RouterWindow = window): NavigationRouter |
     pressed = true;
     pressedOverTransition = animating !== undefined;
     // A press is not a hover: the click it becomes navigates, and a guess on its heels is a
-    // second request for the same page. And a press during the animation skips to the new page.
+    // second request for the same page. A press alone never skips the running transition — that
+    // snapped every named element to its end mid-glide (#621); only the click below may.
     win.clearTimeout(intent);
-    animating?.skipTransition?.();
   };
   const onRelease = (): void => {
     pressed = false;
@@ -347,13 +332,15 @@ export function startNavigation(win: RouterWindow = window): NavigationRouter |
 
   const onClick = (event: MouseEvent): void => {
     win.clearTimeout(intent);
-    // While a view transition paints, the browser hit-tests every press to `<html>`: the press
-    // skipped the animation (`onPress`), the release landed on the real element, and the click —
-    // aimed at their common ancestor — reached nothing. The visitor's first click after a swap was
-    // lost. It is given to the element under the pointer NOW, whatever it is: a link, a submit
-    // button, an island's own control.
+    // While a view transition paints, the browser hit-tests every press to `<html>` — Chrome does
+    // so whatever `pointer-events` the `::view-transition` overlay has — so the click reached
+    // nothing: the visitor's first click after a swap was lost. It is given to the element under
+    // the pointer, whatever it is: a link, a submit button, an island's own control. Only a
+    // skipped transition hit-tests the page, so the skip happens HERE, at the click, never at
+    // the press; when the animation already ended between the two, there is nothing to skip.
     if (pressedOverTransition && event.target === doc.documentElement) {
       pressedOverTransition = false;
+      animating?.skipTransition?.();
       const hit = doc.elementFromPoint(event.clientX, event.clientY);
       if (hit !== null && hit !== doc.documentElement && hit instanceof HTMLElement) hit.click();
       return;
@@ -375,7 +362,7 @@ export function startNavigation(win: RouterWindow = window): NavigationRouter |
     const say = (attr: string, fallback: string): string =>
       submitter?.getAttribute(`form${attr}`) ?? form.getAttribute(attr) ?? fallback;
     const facts: FormFacts = {
-      action: new URL(say('action', win.location.href) || win.location.href, doc.baseURI).href,
+      action: formAction(say('action', ''), win.location.href, doc.baseURI),
       current: win.location.href,
       method: say('method', 'get').toLowerCase(),
       enctype: say('enctype', 'application/x-www-form-urlencoded').toLowerCase(),
@@ -388,9 +375,7 @@ export function startNavigation(win: RouterWindow = window): NavigationRouter |
       hasFile: [...fields.values()].some(
         (value: unknown) => value instanceof File && value.name !== '',
       ),
-      fields: [...fields].map(
-        ([name, value]: [string, unknown]) => [name, fieldText(value)] as const,
-      ),
+      fields: formPairs(fields),
     };
     const verdict = formVerdict(facts);
     if (verdict.kind === 'native') return;
@@ -438,8 +423,7 @@ export function startNavigation(win: RouterWindow = window): NavigationRouter |
    * screen it is fetched; when it is, only the scroll moves — the app keeps its own history.
    */
   const onPop = (event: PopStateEvent): void => {
-    // A save still pending belongs to the entry just left.
-    win.clearTimeout(settle);
+    scroll.cancel();
     const url = win.location.href;
     const entry = entryOf(event.state);
     const wanted = entry?.doc ?? withoutFragment(url);
@@ -464,7 +448,6 @@ export function startNavigation(win: RouterWindow = window): NavigationRouter |
   // had its chance to `preventDefault`, which the rules then honour.
   win.addEventListener('click', onClick);
   win.addEventListener('submit', onSubmit);
-  win.addEventListener('scroll', onScroll, { passive: true });
   doc.addEventListener('pointerover', onIntent, { passive: true });
   doc.addEventListener('pointerout', onLeave, { passive: true });
   doc.addEventListener('focusin', onIntent);
@@ -480,7 +463,6 @@ export function startNavigation(win: RouterWindow = window): NavigationRouter |
     stop() {
       win.removeEventListener('click', onClick);
       win.removeEventListener('submit', onSubmit);
-      win.removeEventListener('scroll', onScroll);
       doc.removeEventListener('pointerover', onIntent);
       doc.removeEventListener('pointerout', onLeave);
       doc.removeEventListener('focusin', onIntent);
@@ -489,9 +471,8 @@ export function startNavigation(win: RouterWindow = window): NavigationRouter |
       doc.removeEventListener('pointerdown', onPress, { capture: true });
       doc.removeEventListener('pointerup', onRelease, { capture: true });
       doc.removeEventListener('pointercancel', onRelease, { capture: true });
-      offWrite();
-      offRescope();
-      channel?.close();
+      scroll.stop();
+      tabs.stop();
       delete win.__xNavigation;
     },
   };