@webjsdev/core 0.7.64 → 0.8.0

package/src/router-client/anchors.js

@@ -37,8 +37,10 @@ export function closestAnchor(target) {
       const a = el.closest && el.closest('a');
       if (a instanceof HTMLAnchorElement) return a;
     }
+    // Only a real ShadowRoot has a host to cross to (a detached subtree's
+    // root can be an <a>, whose `host` is a URL string).
     const root = node.getRootNode ? node.getRootNode() : null;
-    node = root && /** @type any */ (root).host ? /** @type any */ (root).host : null;
+    node = typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot ? root.host : null;
   }
   return null;
 }

package/src/router-client/boundaries.js

@@ -159,6 +159,20 @@ export function collectBoundaries(root) {
  *   live: { routeKey: string, start: Comment, end: Comment },
  *   incoming: { routeKey: string, start: Comment, end: Comment } } | null}
  */
+/**
+ * Does segment `inner` sit at or below segment `outer`. Boundary segments are
+ * nested path prefixes, so `/ui/docs` is within `/ui` and within `/`, and
+ * `/uix` is within neither `/ui` nor `/ui/docs`. The one statement of the
+ * nesting rule: the swap plan below and the stylesheet ownership in
+ * owned-styles.js both use it, so they cannot disagree about which range a
+ * segment belongs to.
+ * @param {string} inner
+ * @param {string} outer
+ */
+export function segmentWithin(inner, outer) {
+  return inner === outer || inner.startsWith(outer === '/' ? '/' : outer + '/');
+}
+
 export function planBoundarySwap(here, there) {
   // Shared segments, shallowest first (a nested path prefix is shorter).
   const shared = [...here.keys()].filter((s) => there.has(s)).sort((a, b) => a.length - b.length);
@@ -169,7 +183,7 @@ export function planBoundarySwap(here, there) {
       let parent = null;
       for (const p of shared) {
         if (p === seg) break;
-        if (seg.startsWith(p === '/' ? p : p + '/')) parent = p;
+        if (seg !== p && segmentWithin(seg, p)) parent = p;
       }
       if (!parent) return null; // no anchored parent: degrade
       return { mode: 'replace', segment: parent, live: here.get(parent), incoming: there.get(parent) };

package/src/router-client/constants.js

@@ -204,3 +204,33 @@ export function _isNonHtmlPath(pathname) {
  * alone rather than reverted.
  */
 export const WRITE_BACK_ARMED_MS = 250;
+
+/**
+ * Marks the router's temporary stylesheet copies (`stylesheets.js`). Here,
+ * in the leaf module, so `owned-styles.js` can skip those copies without
+ * importing `stylesheets.js`, which imports `head-merge.js`, which imports
+ * `owned-styles.js`.
+ */
+export const PRELOAD_ATTR = 'data-webjs-preload-style';
+
+/**
+ * Does `el`'s `rel` name a stylesheet that applies (`stylesheet`, not
+ * `alternate`). The one test both the stylesheet loader (`stylesheets.js`) and
+ * the owned-sheet merge (`owned-styles.js`) use, so the two cannot disagree.
+ * @param {Element} el
+ */
+export function relIsStylesheet(el) {
+  const rel = relTokens(el);
+  return rel.includes('stylesheet') && !rel.includes('alternate');
+}
+
+/**
+ * The lowercased tokens of `el`'s `rel`, the one parse every stylesheet test
+ * in the router builds on (`relIsStylesheet` here, and the head merge's
+ * never-remove rule, which counts an alternate stylesheet too).
+ * @param {Element} el
+ * @returns {string[]}
+ */
+export function relTokens(el) {
+  return (el.getAttribute('rel') || '').toLowerCase().split(/\s+/);
+}

package/src/router-client/fetch-apply.js

@@ -19,6 +19,7 @@ import { navigate } from './navigator.js';
 import { prefetchTake } from './prefetch.js';
 import { currentNavigationToken } from './state.js';
 import { readStreamedShell, streamBoundariesProgressively } from './stream.js';
+import { loadIncomingStylesheets, releaseIncomingStylesheets } from './stylesheets.js';
 import { _swapCommit, applySwap } from './swap.js';
 
 /**
@@ -295,6 +296,21 @@ export async function fetchAndApply(href, frameId, recordHistory, optimisticStat
   // recover in place rather than a destructive full reload.
   if (!doc) { restoreOptimistic(optimisticState); handleNavigationError(href, null, new Error('navigation response did not parse as HTML')); return { ok: false, status: respStatus, aborted: false, applied: false }; }
 
+  // Load the stylesheets the incoming page brings before it is swapped in, so
+  // its first paint is styled (see stylesheets.js). Null when it brings none,
+  // and the swap then stays in this task. A newer navigation that started
+  // during the wait owns the page, exactly as after the body read above, and
+  // this one's temporary copies go with it.
+  const sheets = loadIncomingStylesheets(doc, finalUrl || href, frameId);
+  if (sheets) {
+    await sheets.ready;
+    if (myToken !== currentNavigationToken) {
+      releaseIncomingStylesheets(sheets);
+      if (streamCtx && streamCtx.reader) { try { streamCtx.reader.cancel(); } catch { /* ignore */ } }
+      return { ok: false, status: respStatus, aborted: true, applied: false };
+    }
+  }
+
   // #1406: recording the push after the swap finalizes the outgoing page's
   // entry against the DESTINATION document, at a scroll offset the browser has
   // already clamped to that document's height (measured on the gallery: 1600 to
@@ -336,6 +352,11 @@ export async function fetchAndApply(href, frameId, recordHistory, optimisticStat
     : null;
 
   const disposition = applySwap(doc, frameId, !!revalidating, finalUrl, incomingBuild, incomingSrc, refresh || (mutation ? 'layouts' : undefined), recordHistoryNow);
+  // The temporary stylesheet copies are released once the swap has COMMITTED:
+  // under a view transition the new markup, and the page's own links with it,
+  // lands a frame later. A copy with no twin in the result (a discarded or
+  // uncommitted swap) goes as soon as the commit settles.
+  if (sheets) _swapCommit.then(() => releaseIncomingStylesheets(sheets), () => releaseIncomingStylesheets(sheets));
   // `'none'` means applySwap returned WITHOUT committing anything: the frame the
   // response was for is missing, or it degraded to a hard navigation (an
   // importmap/build mismatch, a poisoned boundary scan). The page is not left

package/src/router-client/frames.js

@@ -24,10 +24,13 @@ export function activeFrameId(el) {
   while (cur) {
     const frame = cur.closest('webjs-frame');
     if (frame && frame.id) return frame.id;
-    // Cross shadow boundary upwards if necessary.
+    // Cross a shadow boundary upwards if necessary. Only a real ShadowRoot
+    // has a host to cross to: a DETACHED element's root is the top of its
+    // own subtree, and when that is an <a>, its `host` is the URL's host
+    // STRING, which the next closest() call threw on.
     const root = cur.getRootNode();
-    if (root && /** @type any */ (root).host) {
-      cur = /** @type any */ (root).host;
+    if (typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot) {
+      cur = root.host;
     } else {
       break;
     }

package/src/router-client/head-merge.js

@@ -6,7 +6,8 @@
  *
  * @module
  */
-import { META_KEY_CSP_NONCE } from './constants.js';
+import { META_KEY_CSP_NONCE, relTokens } from './constants.js';
+import { isStylesheetLink, stylesheetMerge } from './owned-styles.js';
 
 /**
  * Read the CSP nonce that the original page load published via
@@ -214,7 +215,16 @@ function reconcileHeadMetas(newHead) {
   }
 }
 
-export function addNewHeadElements(newHead) {
+/**
+ * @param {HTMLHeadElement} newHead
+ * @param {{ base?: string | null, frame?: boolean, segment?: string | null }} [opts]  `base` is the URL
+ *   the incoming page came from; `frame` marks a frame swap, which switches no
+ *   owned stylesheet on (owned-styles.js `stylesheetMerge`).
+ */
+export function addNewHeadElements(newHead, opts = {}) {
+  // `styles: false` leaves the stylesheet links to `mergeHeadStylesheets`,
+  // which the boundary swap calls inside its commit (#1669).
+  const mergeSheet = opts.styles === false ? null : stylesheetMerge(opts);
   const newTitle = newHead.querySelector('title');
   if (newTitle) document.title = newTitle.textContent || '';
 
@@ -236,6 +246,10 @@ export function addNewHeadElements(newHead) {
     // A keyed <meta> is add/update/remove reconciled below (#1046), so skip it
     // here to avoid appending a duplicate when its content changed.
     if (el.tagName === 'META' && metaIdentity(el)) continue;
+    // One link per stylesheet, and an owned one placed root to leaf (#1669).
+    if (isStylesheetLink(el)) {
+      if (!mergeSheet || mergeSheet(el, cloneElementWithCorrectNonce)) continue;
+    }
     if (!currentSet.has(outerHTMLForDiff(el))) {
       if (el.tagName === 'SCRIPT') {
         document.head.appendChild(
@@ -252,6 +266,26 @@ export function addNewHeadElements(newHead) {
   reconcileHeadMetas(newHead);
 }
 
+/**
+ * The stylesheet half of `addNewHeadElements`, for the boundary swap to run
+ * INSIDE its commit (#1669): adopting the router's loading copies, switching
+ * a sheet back on, and inserting an owned one all take effect with the swap,
+ * so the outgoing page, and a view transition's capture of it, never paint
+ * with the incoming page's CSS. A stylesheet the merge does not handle (an
+ * unowned one the head lacks) is appended, as the full merge does.
+ * @param {HTMLHeadElement} newHead
+ * @param {{ base?: string | null, segment?: string | null, leaving?: (el: Element) => boolean }} [opts]
+ */
+export function mergeHeadStylesheets(newHead, opts = {}) {
+  const mergeSheet = stylesheetMerge(opts);
+  const currentSet = new Set();
+  for (const el of document.head.children) currentSet.add(outerHTMLForDiff(el));
+  for (const el of newHead.children) {
+    if (!isStylesheetLink(el) || mergeSheet(el, cloneElementWithCorrectNonce)) continue;
+    if (!currentSet.has(outerHTMLForDiff(el))) document.head.appendChild(cloneElementWithCorrectNonce(el));
+  }
+}
+
 /**
  * Is `el` a stylesheet the head merge must never remove: a `<style>` or a
  * `<link rel~="stylesheet">`. WebJs ALWAYS keeps these on a soft nav, with no
@@ -263,22 +297,32 @@ export function addNewHeadElements(newHead) {
  * head (the shared app stylesheet is omitted because the client already has it),
  * so "absent from the incoming head" means "optimized away", NOT "removed". A
  * dynamic-removal opt-out would therefore re-introduce #936 (it would strip a
- * still-needed sheet on any partial response), and WebJs is Tailwind-first (one
- * global sheet, no page-specific sheets to drop), so the knob would be unsafe
- * and unused. Keeping every stylesheet is correct here; a genuinely changed one
- * is dropped by the deploy-level hard reload (build-id mismatch), not a soft swap.
+ * still-needed sheet on any partial response). Keeping every stylesheet is
+ * correct HERE; a genuinely changed one is dropped by the deploy-level hard
+ * reload (build-id mismatch), not a soft swap. A section's own stylesheet is
+ * the one case that does leave, and it is decided elsewhere, by ownership
+ * rather than by head absence: `owned-styles.js` switches a sheet off when the
+ * boundary that owns it is swapped, a replace or a morph, or on a full-body
+ * swap whose response is complete (#1669). This merge itself never removes
+ * one.
  *
  * @param {Element} el
  * @returns {boolean}
  */
 function isPersistentHeadStyle(el) {
   if (el.tagName === 'STYLE') return true;
-  return el.tagName === 'LINK' &&
-    (el.getAttribute('rel') || '').toLowerCase().split(/\s+/).includes('stylesheet');
+  // Any stylesheet link, an alternate one included, so not `relIsStylesheet`.
+  return el.tagName === 'LINK' && relTokens(el).includes('stylesheet');
 }
 
-/** @param {HTMLHeadElement} newHead */
-export function mergeHead(newHead) {
+/**
+ * @param {HTMLHeadElement} newHead
+ * @param {{ base?: string | null, segment?: string | null }} [opts]  the URL the incoming page came from, and the range being replaced
+ */
+export function mergeHead(newHead, opts = {}) {
+  // `styles: false` leaves the stylesheet links to `mergeHeadStylesheets`,
+  // which the full-body swap calls inside its commit (#1669).
+  const mergeSheet = opts.styles === false ? null : stylesheetMerge(opts);
   const currentHead = document.head;
 
   const newTitle = newHead.querySelector('title');
@@ -327,6 +371,10 @@ export function mergeHead(newHead) {
     // kept above), or the head would carry two and `getCspNonce` could read the
     // wrong one (#1050).
     if (el.tagName === 'META' && metaIdentity(el) === META_KEY_CSP_NONCE) continue;
+    // A stylesheet the head already links is not appended twice, and an owned
+    // one is placed root to leaf (#1669). Nothing here REMOVES a sheet: this
+    // head can be a reduced one (#936).
+    if (isStylesheetLink(el) && (!mergeSheet || mergeSheet(el, cloneElementWithCorrectNonce))) continue;
     if (!currentSet.has(outerHTMLForDiff(el))) {
       if (el.tagName === 'SCRIPT') {
         currentHead.appendChild(

package/src/router-client/navigator.js

@@ -21,6 +21,7 @@ import { clearPrefetchHover, clearPrefetchRefused, clearPrefetchViewTimers, onPr
 import { afterTwoFrames, bumpRestoreGeneration, releaseHeightReservation, releaseScrollAnchor, reserveRestoredHeight, restoreGeneration, suppressScrollAnchoring } from './scroll.js';
 import { snapshotCache, snapshotCurrent, snapshotGet } from './snapshot-cache.js';
 import { _setEnabled, bumpNavToken, clearFragmentNav, consumeFragmentNav, currentNavigationToken, enabled, hardNavigate } from './state.js';
+import { primeLiveStylesheetKeys } from './owned-styles.js';
 import { _swapCommit, applySwap } from './swap.js';
 import { ensureUpgradeObserver } from './upgrade.js';
 import { viewTransitionsEnabled } from './view-transition.js';
@@ -143,6 +144,9 @@ let prevScrollRestoration = null;
 export function enableClientRouter() {
   if (enabled || typeof document === 'undefined') return;
   _setEnabled(true);
+  // Key the page's stylesheets against the URL they were served at, before
+  // any navigation moves it (#1669, owned-styles.js).
+  primeLiveStylesheetKeys();
   // Publish the in-place refresh entry on the global (#1398). The dev
   // live-reload client is a separate served script with no import of this
   // module, so a global is the only seam it has, and its PRESENCE is the

package/src/router-client/owned-styles.js

@@ -0,0 +1,372 @@
+/**
+ * Stylesheets owned by a layout boundary (#1669).
+ *
+ * The server hoists the `<link rel="stylesheet">` at the start of a nested
+ * layout's or page's output into `<head>`, tagged `data-wj-style-owner` with
+ * the segment of the `wj:children` range it was rendered in. This module is
+ * the client half: it switches such a sheet OFF when a soft navigation
+ * replaces that range and the incoming page no longer carries the file, and
+ * back ON when a later page (or a back / forward restore) carries it again.
+ *
+ * Why OFF and not removed. Every framework the router takes cues from puts a
+ * route's sheet in the head and dedupes by href, but they split on what a
+ * departed route's sheet should do: Next, React Float, TanStack and SvelteKit
+ * keep it, Remix and Astro remove it, and Turbo removes it only when the link
+ * opts in with `data-turbo-track="dynamic"`. Keeping it costs real time here,
+ * since a disjoint section's sheet can carry hundreds of `:has()` rules every
+ * element insertion is checked against. Removing it would leave a back /
+ * forward restore painting before the sheet reloads, because a restore applies
+ * synchronously so the browser can replay the scroll offset (#1428). A
+ * disabled sheet is in neither bind: the browser skips it in matching and
+ * invalidation, and turning it back on is synchronous because it is already
+ * parsed. The `data-wj-style-off` marker records the state in the DOM, so a
+ * snapshot serializes it and a restore knows which sheets were off.
+ *
+ * Why it cannot reintroduce #936. A sheet is switched off ONLY when the range
+ * that owns it is SWAPPED (replaced, or morphed in place), never because the
+ * incoming head lacks it in general: a reduced `X-Webjs-Have` response omits
+ * what the client already has, and reading that absence as "no longer needed"
+ * is what left the page unstyled there. Everything inside a swapped range was
+ * re-rendered by the server, so the incoming head carries every owned sheet
+ * that range still needs. A sheet with no owner (the root layout's, or one an
+ * app writes into its head) is never touched.
+ */
+import { segmentWithin } from './boundaries.js';
+import { PRELOAD_ATTR, relIsStylesheet } from './constants.js';
+
+/** The server's tag naming a hoisted stylesheet's owner segment. */
+export const OWNER_ATTR = 'data-wj-style-owner';
+/** Marks an owned stylesheet the router has switched off. */
+export const OFF_ATTR = 'data-wj-style-off';
+/**
+ * Marks a link loading under `media="not all"` so it is fetched without
+ * applying, and holds the author's own media (empty for none) until it is
+ * released. The dev refresh (`dev-styles.js`) reads the same attribute.
+ */
+export const HELD_MEDIA_ATTR = 'data-wj-style-media';
+
+/** The query the dev refresh re-requests a sheet under (`dev-styles.js`). */
+const DEV_REFRESH_PARAM = '__webjs_dev';
+
+/**
+ * Is `el` a `<link>` naming a stylesheet (`rel` has `stylesheet`, not
+ * `alternate`) with an href.
+ * @param {Element} el
+ */
+export function isStylesheetLink(el) {
+  return el.tagName === 'LINK' && !!el.getAttribute('href') && relIsStylesheet(el);
+}
+
+/**
+ * The media a link applies under: the author's, also while the link is held
+ * under `not all`.
+ * @param {Element} el
+ */
+function authoredMedia(el) {
+  return ((el.hasAttribute(HELD_MEDIA_ATTR) ? el.getAttribute(HELD_MEDIA_ATTR) : el.getAttribute('media')) || '').trim();
+}
+
+/**
+ * The identity of a stylesheet link: its URL resolved against `base`, with the
+ * dev refresh's cache-buster stripped (so a sheet the dev refresh re-requested
+ * still matches the bare href the next response carries), plus the `media` it
+ * applies under (a print copy and a screen copy of one file are two sheets).
+ * The server's hoist keys sheets the same way.
+ * @param {Element} el
+ * @param {string} base
+ * @returns {string | null}
+ */
+function keyFor(el, base) {
+  const href = el.getAttribute('href');
+  if (!href) return null;
+  try {
+    const url = new URL(href, base);
+    url.searchParams.delete(DEV_REFRESH_PARAM);
+    const media = authoredMedia(el);
+    return media && media !== 'all' ? `${url.href} ${media}` : url.href;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * The key of each live link, taken against the URL the document had when the
+ * router first saw it. A swap records the new history entry before it merges
+ * the head, so by then `document.baseURI` is the NEW page's, and resolving a
+ * live relative href against it would name a different file.
+ * @type {WeakMap<Element, string>}
+ */
+const liveKeys = new WeakMap();
+
+/**
+ * Record the key of every live stylesheet the router has not seen yet,
+ * against the current `document.baseURI`. Called when the router enables and
+ * at the start of every swap, before the history entry moves.
+ */
+export function primeLiveStylesheetKeys() {
+  if (typeof document === 'undefined' || !document.head) return;
+  for (const el of document.querySelectorAll('link[href]')) {
+    if (liveKeys.has(el) || !isStylesheetLink(el)) continue;
+    const key = keyFor(el, document.baseURI);
+    if (key) liveKeys.set(el, key);
+  }
+}
+
+/** @param {Element} el */
+function liveKey(el) {
+  let key = liveKeys.get(el);
+  if (!key) {
+    key = keyFor(el, document.baseURI) || '';
+    if (key) liveKeys.set(el, key);
+  }
+  return key || null;
+}
+
+/**
+ * Hold a link under `media="not all"`: it is fetched but does not apply, the
+ * standard way to load a stylesheet without applying it (a `disabled` link is
+ * never fetched at all). The author's media is kept in `HELD_MEDIA_ATTR`.
+ * @param {Element} link
+ */
+export function holdMedia(link) {
+  if (link.hasAttribute(HELD_MEDIA_ATTR)) return;
+  link.setAttribute(HELD_MEDIA_ATTR, link.getAttribute('media') || '');
+  link.setAttribute('media', 'not all');
+}
+
+/**
+ * Give a held link its own media back. Firefox and WebKit give the link a new
+ * sheet object when its media changes, so a caller that disables the sheet
+ * does it after this.
+ * @param {Element} link
+ */
+export function releaseMedia(link) {
+  if (!link.hasAttribute(HELD_MEDIA_ATTR)) return;
+  const media = link.getAttribute(HELD_MEDIA_ATTR);
+  link.removeAttribute(HELD_MEDIA_ATTR);
+  if (media) link.setAttribute('media', media);
+  else link.removeAttribute('media');
+}
+
+/** Links with a settle listener pending, so one is never added twice. */
+const settling = new WeakSet();
+
+/**
+ * Switch a link off or on.
+ *
+ * A sheet still loading has no `sheet` yet. It is neither removed (a back /
+ * forward restore would then paint before a reload) nor left to apply: a
+ * stylesheet takes effect when it loads, a rendering frame can fall before
+ * its `load` task, and the departed section's rules would paint for that
+ * frame. So it is held (`holdMedia`) and, when it loads, released and then
+ * disabled if it is still marked off. Switching it back on releases it at
+ * once, so a link that already failed to load never keeps `not all`.
+ * @param {HTMLLinkElement} link
+ * @param {boolean} off
+ */
+function setOff(link, off) {
+  if (off) link.setAttribute(OFF_ATTR, '');
+  else link.removeAttribute(OFF_ATTR);
+  if (!off) {
+    releaseMedia(link);
+    if (link.sheet) link.sheet.disabled = false;
+    return;
+  }
+  if (link.sheet) { link.sheet.disabled = true; return; }
+  holdMedia(link);
+  if (settling.has(link)) return;
+  settling.add(link);
+  const settle = () => {
+    link.removeEventListener('load', settle);
+    link.removeEventListener('error', settle);
+    settling.delete(link);
+    if (!link.hasAttribute(OFF_ATTR)) return;
+    releaseMedia(link);
+    if (link.sheet) link.sheet.disabled = true;
+  };
+  link.addEventListener('load', settle);
+  link.addEventListener('error', settle);
+}
+
+/**
+ * Put an owned stylesheet link where a full load would have it: after the
+ * last owned sheet of its own boundary or an enclosing one, else before the
+ * first owned sheet, else at the end of the head. Root to leaf, so the
+ * cascade does not depend on how the page was reached. The router's
+ * temporary copies are placed the same way, which is what lets the head
+ * merge adopt a copy as the real link without moving it.
+ * @param {Element} node
+ * @param {string} owner
+ */
+export function placeOwnedLink(node, owner) {
+  /** @type {Element | null} */
+  let after = null;
+  /** @type {Element | null} */
+  let firstOwned = null;
+  for (const el of document.head.querySelectorAll(`link[${OWNER_ATTR}]`)) {
+    // The router's temporary copies count too (they carry their owner), so
+    // two sheets one navigation brings keep their relative order.
+    if (el === node || !isStylesheetLink(el)) continue;
+    if (!firstOwned) firstOwned = el;
+    if (segmentWithin(owner, /** @type {string} */ (el.getAttribute(OWNER_ATTR)))) after = el;
+  }
+  if (after) after.after(node);
+  else if (firstOwned) firstOwned.before(node);
+  else document.head.appendChild(node);
+}
+
+/**
+ * Start merging one incoming head's stylesheets into the live document.
+ * Returns a `merge(el, clone)` that answers true when it handled `el`, so the
+ * caller does not append it. The live links are read once, here, and kept
+ * current as the merge inserts. Called inside the swap commit, so whatever it
+ * switches on or adds takes effect with the swap and not before it.
+ *
+ * For each incoming stylesheet:
+ * - The live document already links the file, in its head or in a part of
+ *   its body this swap keeps (`leaving` says which elements are on their way
+ *   out): no second copy, since two links to one URL are two active sheets.
+ *   An owned one that was off is switched back on. Its owner is the outermost
+ *   boundary still on screen that links it: a sheet a layout and a page under
+ *   it both link stays the layout's while the layout is held (a reduced
+ *   response re-rendered only the page), and is handed to the incoming owner
+ *   once the old one is gone (the swap replaces it, or the sheet was off), so
+ *   a later swap of the new owner's range can retire it.
+ * - The incoming link is one a snapshot recorded as off, or one of the
+ *   router's temporary copies a snapshot captured: nothing to do.
+ * - The router's temporary copy of the file is loading (stylesheets.js): it
+ *   is adopted as the page's own link, where it already sits.
+ * - An incoming OWNED sheet with neither is inserted root to leaf
+ *   (`placeOwnedLink`), the order a full load puts them in.
+ * - Anything else is left to the caller's append.
+ *
+ * In `frame` mode (a frame swap whose response turned out to be a whole
+ * page) nothing owned is switched on, re-owned, adopted or inserted: the page
+ * around the frame decides which sheets apply, and a frame swap never
+ * switches one off either.
+ *
+ * @param {{ base?: string | null, frame?: boolean, segment?: string | null, leaving?: (el: Element) => boolean }} [opts]
+ *   `base` is the URL the incoming document came from, which its relative
+ *   hrefs resolve against; `segment` is the range this swap replaces (`/` for
+ *   a full-body swap), whose owners are on their way out.
+ * @returns {(el: Element, clone: (el: Element) => Element) => boolean}
+ */
+export function stylesheetMerge(opts = {}) {
+  const base = opts.base || (typeof document !== 'undefined' ? document.baseURI : '');
+  /** @type {Map<string, HTMLLinkElement>} */
+  const live = new Map();
+  /** The router's load-before-swap copies (stylesheets.js), by key. */
+  /** @type {Map<string, HTMLLinkElement>} */
+  const copies = new Map();
+  for (const el of document.querySelectorAll('link[href]')) {
+    if (!isStylesheetLink(el)) continue;
+    const inHead = el.parentNode === document.head;
+    if (!inHead && opts.leaving && opts.leaving(el)) continue;
+    const key = liveKey(el);
+    if (!key) continue;
+    const into = el.hasAttribute(PRELOAD_ATTR) ? (inHead ? copies : null) : live;
+    if (into && !into.has(key)) into.set(key, /** @type {HTMLLinkElement} */ (el));
+  }
+  return (incoming, clone) => {
+    // A link a snapshot recorded as off, or one of the router's temporary
+    // load-before-swap copies a snapshot captured mid-navigation: neither is
+    // a sheet that page used, so neither is appended or switched on.
+    if (incoming.hasAttribute(OFF_ATTR) || incoming.hasAttribute(PRELOAD_ATTR)) return true;
+    const key = keyFor(incoming, base);
+    if (!key) return false;
+    const owner = incoming.getAttribute(OWNER_ATTR);
+    const existing = live.get(key);
+    if (existing) {
+      if (opts.frame) return true;
+      const wasOff = existing.hasAttribute(OFF_ATTR);
+      if (wasOff) setOff(existing, false);
+      const held = existing.getAttribute(OWNER_ATTR);
+      if (owner && held !== null && held !== owner) {
+        // The held owner stays only while it is on screen and encloses the
+        // incoming one: a layout this response did not re-render. A held
+        // owner the swap replaces, one whose sheet was off, or one inside the
+        // incoming owner gives way.
+        const heldStays = !wasOff
+          && !(opts.segment != null && segmentWithin(held, opts.segment))
+          && segmentWithin(owner, held);
+        if (!heldStays) existing.setAttribute(OWNER_ATTR, owner);
+      }
+      return true;
+    }
+    const copy = opts.frame ? null : copies.get(key);
+    if (copy) {
+      for (const attr of incoming.attributes) {
+        if (attr.name === 'href' || attr.name === 'nonce') continue;
+        // The copy is still held: its media goes into the held slot, and is
+        // put back when the commit releases the incoming sheets.
+        if (attr.name === 'media' && copy.hasAttribute(HELD_MEDIA_ATTR)) copy.setAttribute(HELD_MEDIA_ATTR, attr.value);
+        else copy.setAttribute(attr.name, attr.value);
+      }
+      copy.removeAttribute(PRELOAD_ATTR);
+      copies.delete(key);
+      live.set(key, copy);
+      return true;
+    }
+    if (!owner) return false;
+    if (opts.frame) return true;
+    const node = /** @type {HTMLLinkElement} */ (clone(incoming));
+    // Absolute, so the inserted link names the file the response meant
+    // whatever the document's URL is when it is next read.
+    try { node.setAttribute('href', new URL(/** @type {string} */ (incoming.getAttribute('href')), base).href); } catch { /* keep as authored */ }
+    placeOwnedLink(node, owner);
+    liveKeys.set(node, key);
+    live.set(key, node);
+    return true;
+  };
+}
+
+/**
+ * Let the incoming page's sheets apply: release every held link that is not
+ * switched off, meaning the router's load-before-swap copies (stylesheets.js)
+ * and the ones the merge adopted. Called inside the swap commit, so the
+ * outgoing page, and a view transition's capture of it, never paint with the
+ * incoming page's CSS.
+ */
+export function releaseIncomingSheets() {
+  if (typeof document === 'undefined' || !document.head) return;
+  for (const el of document.head.querySelectorAll(`link[${HELD_MEDIA_ATTR}]`)) {
+    if (!el.hasAttribute(OFF_ATTR)) releaseMedia(el);
+  }
+}
+
+/**
+ * Switch off every owned stylesheet whose boundary sits at or below the
+ * swapped `segment` and that the incoming page does not link, in its head or
+ * its body. Called inside the swap commit of the boundary tiers, a replace or
+ * a morph (the server re-rendered everything inside that range, so the
+ * incoming page carries every owned sheet the range still uses), and of a
+ * full-body swap whose response is known to be complete. Never from a frame
+ * swap, nor from a full-body swap whose head can be a reduced one that omits
+ * what the client already has (#936).
+ *
+ * @param {string} segment  The segment of the range being swapped.
+ * @param {ParentNode | null} incoming  The incoming document (head and body).
+ * @param {string | null} [base]  The URL the incoming document came from.
+ */
+export function switchOffDepartedStylesheets(segment, incoming, base) {
+  if (typeof document === 'undefined' || !document.head) return;
+  const from = base || document.baseURI;
+  const carried = new Set();
+  if (incoming) {
+    for (const el of incoming.querySelectorAll('link[href]')) {
+      // A snapshot taken mid-navigation can hold the router's temporary copy
+      // of the NEXT page's sheet; it does not mean the page used it.
+      if (!isStylesheetLink(el) || el.hasAttribute(OFF_ATTR) || el.hasAttribute(PRELOAD_ATTR)) continue;
+      const key = keyFor(el, from);
+      if (key) carried.add(key);
+    }
+  }
+  for (const el of document.head.querySelectorAll(`link[${OWNER_ATTR}]`)) {
+    if (el.hasAttribute(PRELOAD_ATTR) || el.hasAttribute(OFF_ATTR) || el.hasAttribute('disabled') || !isStylesheetLink(el)) continue;
+    const owner = /** @type {string} */ (el.getAttribute(OWNER_ATTR));
+    if (!segmentWithin(owner, segment)) continue;
+    const key = liveKey(el);
+    if (key && carried.has(key)) continue;
+    setOff(/** @type {HTMLLinkElement} */ (el), true);
+  }
+}

package/src/router-client/prefetch.js

@@ -662,6 +662,9 @@ export function onPrefetchIntent(e) {
   prefetchHoverTimer = setTimeout(() => {
     prefetchHoverTimer = null;
     prefetchHoverAnchor = null;
+    // A navigation during the dwell can swap the hovered link out of the
+    // page; a link nobody can click any more warms nothing.
+    if (!anchor.isConnected) return;
     // Resolved at FIRE time, so it sees the document a click at this moment
     // would (a soft nav during the dwell can change which frame encloses it).
     prefetch(href, resolveTargetFrameId(anchor));