diff --git a/.agents/skills/webjs/references/client-router-and-streaming.md b/.agents/skills/webjs/references/client-router-and-streaming.md
index f8b1f533..2f896cb2 100644
--- a/.agents/skills/webjs/references/client-router-and-streaming.md
+++ b/.agents/skills/webjs/references/client-router-and-streaming.md
@@ -115,6 +115,8 @@ The router can wrap a navigation's DOM mutation in the native View Transitions A
 
 The accepted value is `same-origin`. When enabled it wraps every swap path (the two-tier boundary swap, the `<webjs-frame>` swap, and the background-revalidation full-body path). When `startViewTransition` is unavailable the swap runs synchronously with no flash and no throw. To persist a live element (a playing `<audio>`, an open menu) across a swap by node identity, mark it `data-webjs-permanent` and give it an `id`.
 
+The opt-in is **per page**, so it is a page-scoped meta: put it on a page's metadata to animate that page, or on the root layout to animate the whole app. Navigating to a page that does NOT declare it turns transitions back off, because the soft-nav head merge reconciles page-scoped `<meta>` tags (a stale one the previous page declared is removed, not left to leak, #1046). View transitions **compose with Suspense streaming**: a streamed boundary (a `loading.{js,ts}` skeleton or a `<webjs-suspense>` region) navigated to under an active transition still resolves its content progressively, because the streamed resolve waits for the transition's DOM swap to commit before it applies (#1048).
+
 ## `<webjs-stream>` Surgical Updates
 
 `<webjs-stream>` is WebJs's take on Turbo Streams, and the action set mirrors `<turbo-stream>`. It is the only SINGLE-element update primitive (append one row, remove one item, bump a count, insert a toast), whereas a frame or layout swap redraws a whole region.
diff --git a/docs/app/docs/client-router/page.ts b/docs/app/docs/client-router/page.ts
index 9a5f0621..ecdfb02b 100644
--- a/docs/app/docs/client-router/page.ts
+++ b/docs/app/docs/client-router/page.ts
@@ -193,7 +193,8 @@ connectWS('/posts/' + id + '/feed', { onMessage: (m) =&gt; renderStream(m) });</
     <p>The router can wrap a client navigation's DOM mutation in the native <a href="https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API">View Transitions API</a> (<code>document.startViewTransition</code>), so a same-shell partial swap cross-fades (or runs your <code>::view-transition-*</code> CSS) instead of snapping. It is OFF by default and purely OPT-IN, so an unconfigured app behaves exactly as before (no animation surprise, no regression in a browser without the API). Opt in by adding a meta to the page head, mirroring Turbo's <code>&lt;meta name="view-transition"&gt;</code> convention:</p>
     <pre>&lt;!-- in the root layout's &lt;head&gt;, or any page's head --&gt;
 &lt;meta name="view-transition" content="same-origin"&gt;</pre>
-    <p>The accepted opt-in value is <code>same-origin</code> (every client-router swap is same-origin by construction, so it reads as "animate these in-app navigations"); any other value, or the meta being absent, keeps transitions off. The meta is re-read PER navigation, so a page can turn transitions on or off as the user moves through the app (the head merge brings in the new page's head).</p>
+    <p>The accepted opt-in value is <code>same-origin</code> (every client-router swap is same-origin by construction, so it reads as "animate these in-app navigations"); any other value, or the meta being absent, keeps transitions off. The opt-in is PER page, so it is a page-scoped meta: put it on one page's metadata to animate that page, or on the root layout to animate the whole app. Navigating to a page that does NOT declare it turns transitions back off, because the soft-nav head merge reconciles page-scoped <code>&lt;meta&gt;</code> tags (a stale one the previous page declared is removed, not left to leak).</p>
+    <p>View transitions COMPOSE with Suspense streaming: a streamed boundary (a <code>loading.ts</code> skeleton or a <code>&lt;webjs-suspense&gt;</code> region) navigated to under an active transition still resolves its content progressively, because the streamed resolve waits for the transition's DOM swap to commit before applying.</p>
     <p>When enabled and supported, the transition wraps ALL THREE swap paths, the deepest-marker layout swap, the <code>&lt;webjs-frame&gt;</code> swap, AND the full-body fallback, not just the full-body case (the inverse of what an author expects, since the marker and frame swaps are the common designed-for paths). The transition wraps the DOM MUTATION ONLY, never the fetch (which already happened); the browser captures the before/after around the synchronous swap. When <code>startViewTransition</code> is unavailable (Firefox / older Safari), the swap runs synchronously, byte-identical to the no-transition path, with no flash and no throw.</p>
 
     <h3>Persisting elements across a swap (<code>data-webjs-permanent</code>)</h3>
diff --git a/packages/core/src/router-client.js b/packages/core/src/router-client.js
index c3ce33a3..ea77050b 100644
--- a/packages/core/src/router-client.js
+++ b/packages/core/src/router-client.js
@@ -2161,14 +2161,18 @@ async function fetchAndApply(href, frameId, recordHistory, optimisticState, meth
   // now live, so stream the resolved boundaries in fast-before-slow. Detached
   // (fire-and-forget) so the URL advance + navigate event do not wait on the
   // slow boundary; each apply is guarded by the nav token so a newer navigation
-  // stops it.
+  // stops it. Gated on the swap COMMIT (`_swapCommit`): under an async view
+  // transition the shell swap is deferred a frame, so applying a resolve before
+  // the placeholder is in the DOM dropped the boundary and stuck the skeleton
+  // (#1048). On the synchronous path `_swapCommit` is already resolved, so this
+  // is a same-microtask no-op there.
   if (streamCtx && (streamCtx.reader || streamCtx.rest)) {
-    streamBoundariesProgressively(
+    _swapCommit.then(() => streamBoundariesProgressively(
       streamCtx.reader,
       streamCtx.dec,
       streamCtx.rest,
       () => myToken === currentNavigationToken,
-    );
+    ));
   }
 
   document.dispatchEvent(new CustomEvent('webjs:navigate', { detail: { url: finalUrl, frameId, from: 'navigate' } }));
@@ -2450,10 +2454,19 @@ function runWithTransition(thunk, afterFinished) {
     } else if (afterFinished) {
       afterFinished();
     }
-    return;
+    // Resolve when the DOM MUTATION (the thunk) has actually committed, NOT when
+    // the animation finishes. Under `startViewTransition` the thunk is deferred a
+    // frame, so anything that reads the swapped-in DOM (a progressively-streamed
+    // Suspense resolve, #1048) must await this, or it runs against the pre-swap
+    // DOM and drops. `updateCallbackDone` is that signal; fall back to a resolved
+    // promise if the browser does not expose it.
+    return (t && t.updateCallbackDone && typeof t.updateCallbackDone.then === 'function')
+      ? t.updateCallbackDone.catch(() => {})
+      : Promise.resolve();
   }
   thunk();
   if (afterFinished) afterFinished();
+  return Promise.resolve();
 }
 
 /**
@@ -2597,6 +2610,16 @@ function upgradeCustomElementsInRange(range) {
   }
 }
 
+/**
+ * Resolves when the most recent `applySwap` DOM mutation has committed. Under an
+ * async view transition the swap is deferred a frame, so the progressive
+ * Suspense streamer must await this before applying resolves, or it targets the
+ * pre-swap DOM (no placeholder yet) and drops the boundary (#1048). A resolved
+ * promise on the synchronous (no-transition) path.
+ * @type {Promise<void>}
+ */
+let _swapCommit = Promise.resolve();
+
 function applySwap(doc, frameId, revalidating, href, incomingBuild, incomingSrc) {
   // SSR action seeding (#472): ingest any seed payload the incoming page
   // carries BEFORE its components are grafted into the live DOM and upgrade, so
@@ -2771,13 +2794,17 @@ function applySwap(doc, frameId, revalidating, href, incomingBuild, incomingSrc)
       // by node identity (it imports the incoming children first, then
       // swaps the live permanent node into the imported tree), so the live
       // `<audio>`/widget keeps running across the frame swap.
-      runWithTransition(() => {
+      // Capture the swap commit like the other swap paths so a frame nav that
+      // ALSO progressively streams a Suspense boundary gates its resolves on the
+      // committed frame swap, not a stale prior _swapCommit (#1048).
+      _swapCommit = runWithTransition(() => {
         diffChildren(target, source);
         reactivateScripts(target);
         upgradeCustomElements(target);
+        // Inside the swap so the placeholder exists before we resolve (#1048).
+        forwardSuspenseResolvers(doc.body);
         blurOutgoingFocus();
       }, () => upgradeCustomElements(target));
-      forwardSuspenseResolvers(doc.body);
       return;
     }
     // The response did not carry the requested frame (source null), or the
@@ -2815,7 +2842,7 @@ function applySwap(doc, frameId, revalidating, href, incomingBuild, incomingSrc)
     // ADD-ONLY head merge: the outer layout stays mounted, so its head-bound
     // runtime state (Tailwind injection, etc.) must not be invalidated.
     addNewHeadElements(doc.head);
-    runWithTransition(() => {
+    _swapCommit = runWithTransition(() => {
       if (mode === 'replace') replaceBoundaryRange(live, incoming);
       else swapMarkerRange(live, incoming, doc);
       // No key sync is needed on the anchor's own comments: the plan's anchor
@@ -2832,9 +2859,12 @@ function applySwap(doc, frameId, revalidating, href, incomingBuild, incomingSrc)
       // applySlotAssignments would wipe the freshly swapped content and
       // restore the stale list.
       resyncEnclosingHostSlots(live.start, incoming.start);
+      // Resolve buffered Suspense boundaries INSIDE the swap so the placeholder
+      // exists first. Doing this after `runWithTransition` returned raced the
+      // async view-transition swap and stuck the skeleton (#1048).
+      forwardSuspenseResolvers(doc.body);
       blurOutgoingFocus();
     }, () => upgradeCustomElementsInRange(live));
-    forwardSuspenseResolvers(doc.body);
     return;
   }
 
@@ -2883,7 +2913,7 @@ function applySwap(doc, frameId, revalidating, href, incomingBuild, incomingSrc)
     upgradeCustomElements(document.body);
     blurOutgoingFocus();
   };
-  runWithTransition(doSwap, () => upgradeCustomElements(document.body));
+  _swapCommit = runWithTransition(doSwap, () => upgradeCustomElements(document.body));
 }
 
 /**
@@ -3708,6 +3738,109 @@ function outerHTMLForDiff(el) {
   return clone.outerHTML;
 }
 
+/**
+ * The one framework-owned keyed meta that must NEVER be reconciled: the CSP
+ * nonce. A soft-nav response carries a FRESH per-request nonce, but the browser
+ * enforces CSP against the nonce the ORIGINAL page load declared (see
+ * `getCspNonce`), so overwriting the live `csp-nonce` meta with the incoming
+ * one would make every later nonce-stamped script/preload violate the active
+ * policy. Excluded from add/update/remove so the original meta survives verbatim.
+ */
+const META_KEY_CSP_NONCE = 'name=csp-nonce';
+
+/**
+ * Stable identity key for a `<meta>` that represents a single logical tag, so a
+ * PAGE-SCOPED meta can be reconciled across a soft-nav head merge (#1046). A
+ * meta with no identifying attribute returns null and is left to the add-only
+ * path (added but never removed), since its identity is ambiguous.
+ *
+ * @param {Element} m
+ * @returns {string | null}
+ */
+function metaIdentity(m) {
+  const name = m.getAttribute('name');
+  if (name) return 'name=' + name;
+  const property = m.getAttribute('property');
+  if (property) return 'property=' + property;
+  const httpEquiv = m.getAttribute('http-equiv');
+  if (httpEquiv) return 'http-equiv=' + httpEquiv;
+  if (m.hasAttribute('charset')) return 'charset';
+  return null;
+}
+
+/**
+ * Reconcile keyed `<meta>` tags across a soft-nav head merge (#1046). The
+ * add-only merge (`addNewHeadElements`) never removes a stale head element, so a
+ * PAGE-SCOPED meta the previous page added (a `view-transition` opt-in, a
+ * per-page `robots` / `theme-color` / `description`, an `og:*` property) leaked
+ * onto every later page. This pass gives each keyed meta the full add / update /
+ * remove treatment: a meta present in the incoming head is added or synced, and
+ * a live keyed meta ABSENT from the incoming head is removed.
+ *
+ * Safe against the `X-Webjs-Have` reduced-head optimization (#936): that
+ * optimization only omits the shared app STYLESHEET (already on the client), and
+ * this pass touches ONLY `<meta>` tags, never a stylesheet / link / script. The
+ * incoming head always carries the target page's complete meta set (charset,
+ * viewport, and the app-wide metas from the root layout appear in both heads, so
+ * they are preserved), so "absent from the incoming head" means "this page does
+ * not declare it", not "optimized away".
+ *
+ * A key may repeat (multiple `og:image`), so both sides are grouped into a LIST
+ * per key and reconciled as a set: an unchanged set is left alone, else the live
+ * copies are removed and the incoming set re-appended.
+ *
+ * @param {HTMLHeadElement} newHead
+ */
+function reconcileHeadMetas(newHead) {
+  // A HEADLESS fragment response (a `<webjs-frame>` subtree) has no `<head>`, so
+  // `parseHTML` leaves `newHead` empty. A real full head ALWAYS emits charset +
+  // viewport, so "no `<meta>` at all in the incoming head" means "this is a
+  // fragment, not a head to reconcile against". Skipping it here is what keeps a
+  // frame swap from stripping every live page-scoped meta (viewport, og:*, ...).
+  if (!newHead.querySelector('meta')) return;
+
+  /** @param {ParentNode} root @returns {Map<string, Element[]>} */
+  const group = (root) => {
+    const map = new Map();
+    for (const el of root.querySelectorAll('meta')) {
+      const key = metaIdentity(el);
+      if (!key || key === META_KEY_CSP_NONCE) continue;
+      const list = map.get(key);
+      if (list) list.push(el); else map.set(key, [el]);
+    }
+    return map;
+  };
+  const incoming = group(newHead);
+  const live = group(document.head);
+
+  // Add or replace each incoming key whose SET differs from the live set.
+  for (const [key, incEls] of incoming) {
+    const liveEls = live.get(key) || [];
+    const incKey = incEls.map(outerHTMLForDiff).join('\n');
+    const liveKey = liveEls.map(outerHTMLForDiff).join('\n');
+    if (incKey === liveKey) continue;
+    if (incEls.length === 1 && liveEls.length === 1) {
+      // The common case (one description / theme-color / robots per page):
+      // sync attributes IN PLACE so the live element keeps its DOM identity.
+      // An app script holding a reference (a theme manager caching
+      // meta[name=theme-color]) still points at the live tag after the nav,
+      // and there is no remove/append churn for a content-only change.
+      const cur = liveEls[0];
+      for (const a of [...cur.attributes]) cur.removeAttribute(a.name);
+      for (const a of incEls[0].attributes) cur.setAttribute(a.name, a.value);
+      continue;
+    }
+    // Multi-element sets (repeated og:image): no unambiguous element-to-element
+    // mapping exists, so replace the set wholesale.
+    for (const el of liveEls) el.remove();
+    for (const el of incEls) document.head.appendChild(cloneElementWithCorrectNonce(el));
+  }
+  // Remove a stale page-scoped key the incoming page does not declare at all.
+  for (const [key, liveEls] of live) {
+    if (!incoming.has(key)) for (const el of liveEls) el.remove();
+  }
+}
+
 function addNewHeadElements(newHead) {
   const newTitle = newHead.querySelector('title');
   if (newTitle) document.title = newTitle.textContent || '';
@@ -3727,6 +3860,9 @@ function addNewHeadElements(newHead) {
     }
     if (el.tagName === 'BASE') continue;
     if (el.tagName === 'TITLE') continue;
+    // 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;
     if (!currentSet.has(outerHTMLForDiff(el))) {
       if (el.tagName === 'SCRIPT') {
         document.head.appendChild(
@@ -3737,6 +3873,10 @@ function addNewHeadElements(newHead) {
       }
     }
   }
+
+  // Reconcile keyed <meta> tags so a stale page-scoped meta is removed, not
+  // leaked onto every later page (#1046).
+  reconcileHeadMetas(newHead);
 }
 
 /**
@@ -3848,7 +3988,21 @@ function upgradeTree(root) {
  */
 function forwardSuspenseResolvers(fetchedBody) {
   for (const tpl of fetchedBody.querySelectorAll('template[data-webjs-resolve]')) {
-    document.body.appendChild(tpl.cloneNode(true));
+    const clone = /** @type {HTMLTemplateElement} */ (tpl.cloneNode(true));
+    document.body.appendChild(clone);
+    // Resolve SYNCHRONOUSLY against the just-swapped DOM instead of relying on
+    // the inline MutationObserver. The observer fires on a microtask, which
+    // races an async `startViewTransition` swap: with view transitions on, the
+    // swap that places the `#<id>` placeholder is deferred a frame, so the
+    // observer ran first, found no placeholder, and the skeleton stuck (#1048).
+    // Called from INSIDE the swap thunk (below), the placeholder is already in
+    // the DOM here, so this replaces it within the same commit (and inside any
+    // wrapping view transition, so the transition captures the resolved
+    // content, not the fallback). Falls back to the observer if the page-level
+    // resolver global is somehow absent.
+    const id = clone.getAttribute('data-webjs-resolve');
+    const resolve = /** @type {any} */ (window).__webjsResolve;
+    if (id && typeof resolve === 'function') resolve(id);
   }
 }
 
@@ -3952,6 +4106,13 @@ function takeResolveUnit(buf) {
  */
 function applyStreamedResolve(id, content) {
   const boundary = document.getElementById(id);
+  // A missing boundary is dropped (non-destructive), exactly as before. The
+  // async-view-transition race that USED to drop a still-valid boundary (#1048)
+  // is handled upstream: `streamBoundariesProgressively` is gated on the swap
+  // COMMIT (`_swapCommit`), so the placeholder is already live by the time any
+  // resolve is applied. A retry here would run OUTSIDE the streamer's
+  // `isCurrent()` nav-token fence and could splice a superseded nav's content
+  // into a recycled boundary id, so it is deliberately not attempted.
   if (!boundary) return;
   const tpl = document.createElement('template');
   tpl.innerHTML = content;
diff --git a/packages/core/test/routing/browser/view-transition-head-and-suspense.test.js b/packages/core/test/routing/browser/view-transition-head-and-suspense.test.js
new file mode 100644
index 00000000..5e021a9e
--- /dev/null
+++ b/packages/core/test/routing/browser/view-transition-head-and-suspense.test.js
@@ -0,0 +1,257 @@
+/**
+ * Real-browser regression tests for two view-transition soft-nav defects
+ * (#1046, #1048). Both need a real browser: linkedom models neither the
+ * streamed-shell swap pipeline nor the async View Transitions API timing that
+ * causes the bugs.
+ *
+ *  #1046: a page-scoped `<meta>` (the `view-transition` opt-in, a per-page
+ *  `robots` / og:*) the previous page declared must be REMOVED on a soft nav to
+ *  a page that does not declare it, not leaked onto every later page. The
+ *  add-only head merge never removed it; `reconcileHeadMetas` now does.
+ *
+ *  #1048: with view transitions ON, `startViewTransition` defers the swap a
+ *  frame, so a Suspense resolve that ran right after the swap call targeted the
+ *  pre-swap DOM (no placeholder) and the skeleton stuck. The resolve is now
+ *  gated on the swap COMMIT. We stub an ASYNC `startViewTransition` (deferring
+ *  the callback to a microtask, exactly like the real API) so the race is real,
+ *  and assert the streamed boundary resolves to content, not a stuck skeleton.
+ *
+ * We stub `window.fetch` to return the navigation response and drive a real
+ * link click so `applySwap` runs exactly as in prod.
+ */
+import { enableClientRouter } from '../../../src/router-client.js';
+import { assert } from '../../../../../test/browser-assert.js';
+
+const tick = () => new Promise((r) => setTimeout(r, 0));
+async function settle() { for (let i = 0; i < 6; i++) await tick(); }
+
+const htmlResponse = (body) => Promise.resolve(new Response(body, {
+  headers: { 'content-type': 'text/html', 'x-webjs-build': '' },
+}));
+
+function setViewTransitionMeta(on) {
+  let meta = document.querySelector('meta[name="view-transition"]');
+  if (on) {
+    if (!meta) {
+      meta = document.createElement('meta');
+      meta.setAttribute('name', 'view-transition');
+      document.head.appendChild(meta);
+    }
+    meta.setAttribute('content', 'same-origin');
+  } else if (meta) {
+    meta.remove();
+  }
+}
+
+suite('Client router: page-scoped <meta> reconciliation on soft nav (#1046)', () => {
+  let container, origFetch, origSVT;
+  function setup() {
+    enableClientRouter();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    origFetch = window.fetch;
+    origSVT = document.startViewTransition;
+  }
+  function teardown() {
+    window.fetch = origFetch;
+    document.startViewTransition = origSVT;
+    setViewTransitionMeta(false);
+    // Clean any test-added app-wide metas.
+    for (const m of [...document.head.querySelectorAll('meta[name="robots"]')]) m.remove();
+    container.remove();
+  }
+
+  test('a stale view-transition meta is removed when the incoming page does not declare it', async () => {
+    setup();
+    try {
+      // The current page opted into view transitions.
+      setViewTransitionMeta(true);
+      container.innerHTML =
+        '<!--wj:children:/a:/a-->' +
+        '<a id="a-link" href="/a-target"></a>' +
+        '<span id="a-content">OLD</span>' +
+        '<!--/wj:children:/a-->';
+
+      // The incoming page carries the app-wide metas but NOT view-transition.
+      window.fetch = () => htmlResponse(
+        '<!doctype html><html><head>' +
+        '<meta charset="utf-8">' +
+        '<meta name="viewport" content="width=device-width">' +
+        '</head><body>' +
+        '<!--wj:children:/a:/a--><span id="a-content">NEW</span><!--/wj:children:/a-->' +
+        '</body></html>'
+      );
+
+      document.getElementById('a-link').click();
+      await settle();
+
+      assert.equal(document.querySelectorAll('meta[name="view-transition"]').length, 0,
+        'the stale page-scoped view-transition meta is removed on the soft nav');
+      assert.equal(document.getElementById('a-content').textContent, 'NEW',
+        'the swap still applied');
+    } finally { teardown(); }
+  });
+
+  test('a frame nav (headless fragment) does NOT strip live page-scoped metas (#1046 regression)', async () => {
+    setup();
+    try {
+      // Live head carries app-wide metas.
+      const vp = document.createElement('meta');
+      vp.setAttribute('name', 'viewport'); vp.setAttribute('content', 'width=device-width');
+      document.head.appendChild(vp);
+
+      container.innerHTML =
+        '<webjs-frame id="hf">' +
+        '<span id="hf-content">OLD</span>' +
+        '<a id="hf-link" href="/hf-target"></a>' +
+        '</webjs-frame>';
+
+      // A frame nav response is a BARE subtree fragment: no <head>.
+      window.fetch = () => htmlResponse(
+        '<webjs-frame id="hf"><span id="hf-content">NEW</span></webjs-frame>'
+      );
+
+      document.getElementById('hf-link').click();
+      await settle();
+
+      assert.equal(document.getElementById('hf-content').textContent, 'NEW', 'the frame swapped');
+      assert.ok(document.querySelector('meta[name="viewport"]'),
+        'the viewport meta survives a headless frame swap (not stripped by the reconcile)');
+    } finally {
+      const m = document.querySelector('meta[name="viewport"]'); if (m) m.remove();
+      teardown();
+    }
+  });
+
+  test('an app-wide meta present in the incoming head is preserved (not churned)', async () => {
+    setup();
+    try {
+      // A live app-wide robots meta that the incoming page also declares.
+      const robots = document.createElement('meta');
+      robots.setAttribute('name', 'robots');
+      robots.setAttribute('content', 'index,follow');
+      document.head.appendChild(robots);
+
+      container.innerHTML =
+        '<!--wj:children:/b:/b-->' +
+        '<a id="b-link" href="/b-target"></a>' +
+        '<span id="b-content">OLD</span>' +
+        '<!--/wj:children:/b-->';
+
+      window.fetch = () => htmlResponse(
+        '<!doctype html><html><head>' +
+        '<meta name="robots" content="index,follow">' +
+        '</head><body>' +
+        '<!--wj:children:/b:/b--><span id="b-content">NEW</span><!--/wj:children:/b-->' +
+        '</body></html>'
+      );
+
+      document.getElementById('b-link').click();
+      await settle();
+
+      const live = document.querySelectorAll('meta[name="robots"]');
+      assert.equal(live.length, 1, 'exactly one robots meta (kept, not duplicated)');
+      assert.equal(live[0].getAttribute('content'), 'index,follow', 'content unchanged');
+    } finally { teardown(); }
+  });
+});
+
+suite('Client router: Suspense streaming resolves under view transitions (#1048)', () => {
+  let container, origFetch, origSVT;
+
+  // A streamed navigation response. The shell (up to the shell sentinel) brings
+  // the #s1 skeleton placeholder in via a REPLACE-tier swap (the child boundary
+  // route-key changes /s/a -> /s/b), so the placeholder exists ONLY after the
+  // swap commits, never in the pre-nav DOM. The resolved boundary template
+  // follows the sentinel. This is what makes the swap-vs-resolve timing matter:
+  // if the resolve runs before the deferred view-transition swap commits, it
+  // finds no #s1 and the skeleton sticks.
+  const streamedBody =
+    // The target page ALSO opts into view transitions, so the meta survives the
+    // head reconcile and the swap genuinely runs under an async transition (the
+    // #1048 scenario). Without this the #1046 reconcile would drop the meta and
+    // turn transitions off before the swap, masking the race.
+    '<!doctype html><html><head><meta name="view-transition" content="same-origin"></head><body>' +
+    '<!--wj:children:/:/-->' +
+    '<!--wj:children:/s/[x]:/s/b-->' +
+    '<div id="s1">SKELETON</div>' +
+    '<!--/wj:children:/s/[x]-->' +
+    '<!--/wj:children:/-->' +
+    '<!--wj-stream-shell-->' +
+    '<template data-webjs-resolve="s1"><div id="resolved">RESOLVED</div></template>' +
+    '</body></html>';
+
+  // Same streamed shell but WITHOUT the view-transition opt-in, for the
+  // synchronous-swap (no-regression) case.
+  const streamedBodyNoVT = streamedBody.replace(
+    '<meta name="view-transition" content="same-origin">', '');
+
+  const liveShell = (linkId) =>
+    '<!--wj:children:/:/-->' +
+    '<!--wj:children:/s/[x]:/s/a-->' +
+    `<a id="${linkId}" href="/s-target"></a>` +
+    '<!--/wj:children:/s/[x]-->' +
+    '<!--/wj:children:/-->';
+
+  function setup() {
+    enableClientRouter();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    origFetch = window.fetch;
+    origSVT = document.startViewTransition;
+  }
+  function teardown() {
+    window.fetch = origFetch;
+    document.startViewTransition = origSVT;
+    setViewTransitionMeta(false);
+    container.remove();
+  }
+
+  // Stub an ASYNC startViewTransition: defer the DOM-mutation callback to a
+  // microtask and expose updateCallbackDone, exactly the timing that stuck the
+  // skeleton before the fix.
+  function stubAsyncSVT() {
+    document.startViewTransition = (cb) => {
+      const updateCallbackDone = Promise.resolve().then(() => cb());
+      return { updateCallbackDone, finished: updateCallbackDone, ready: updateCallbackDone };
+    };
+  }
+
+  test('a streamed Suspense boundary resolves (skeleton not stuck) with an async view transition', async () => {
+    setup();
+    try {
+      setViewTransitionMeta(true);
+      stubAsyncSVT();
+      container.innerHTML = liveShell('s-link');
+      assert.ok(!document.getElementById('s1'), 'no placeholder before the nav (arrives via the swap)');
+
+      window.fetch = () => htmlResponse(streamedBody);
+
+      document.getElementById('s-link').click();
+      await settle();
+
+      assert.ok(document.getElementById('resolved'),
+        'the streamed boundary resolved to its content');
+      assert.equal(document.getElementById('resolved').textContent, 'RESOLVED',
+        'content is the resolved boundary, not the skeleton');
+      assert.ok(!document.getElementById('s1'),
+        'the #s1 skeleton placeholder was replaced (not stuck)');
+    } finally { teardown(); }
+  });
+
+  test('the same streamed nav resolves with view transitions OFF (no regression)', async () => {
+    setup();
+    try {
+      setViewTransitionMeta(false); // sync swap path, and the target does not opt in either
+      container.innerHTML = liveShell('s2-link');
+
+      window.fetch = () => htmlResponse(streamedBodyNoVT);
+
+      document.getElementById('s2-link').click();
+      await settle();
+
+      assert.ok(document.getElementById('resolved'), 'boundary resolves on the synchronous path too');
+      assert.ok(!document.getElementById('s1'), 'skeleton replaced');
+    } finally { teardown(); }
+  });
+});
diff --git a/packages/core/test/routing/router-client.test.js b/packages/core/test/routing/router-client.test.js
index 1d09ccd2..713f9259 100644
--- a/packages/core/test/routing/router-client.test.js
+++ b/packages/core/test/routing/router-client.test.js
@@ -687,6 +687,176 @@ test('addNewHeadElements: script elements are recreated (not cloned) to execute'
   assert.equal(added.getAttribute('type'), 'module');
 });
 
+/* ====================================================================
+ * addNewHeadElements: page-scoped <meta> reconciliation (#1046)
+ * ==================================================================== */
+
+test('addNewHeadElements: removes a stale page-scoped meta absent from the incoming head (#1046)', () => {
+  // The previous page opted into view transitions; the incoming page does not.
+  document.head.innerHTML =
+    '<title>T</title>' +
+    '<meta charset="utf-8">' +
+    '<meta name="viewport" content="width=device-width">' +
+    '<meta name="view-transition" content="same-origin">' +
+    '<style id="runtime-css">.a{color:red}</style>' +
+    '<link rel="stylesheet" href="/app.css">';
+  const newHead = document.createElement('head');
+  newHead.innerHTML =
+    '<title>T</title>' +
+    '<meta charset="utf-8">' +
+    '<meta name="viewport" content="width=device-width">';
+  // NOTE: the incoming head omits both view-transition (page-scoped, dropped)
+  // AND the shared stylesheet (X-Webjs-Have reduction, must be KEPT, #936).
+
+  _addNewHead(newHead);
+
+  assert.equal(
+    document.head.querySelectorAll('meta[name="view-transition"]').length, 0,
+    'stale page-scoped view-transition meta must be removed'
+  );
+  // App-wide metas present in both heads survive.
+  assert.ok(document.head.querySelector('meta[charset="utf-8"]'), 'charset preserved');
+  assert.ok(document.head.querySelector('meta[name="viewport"]'), 'viewport preserved');
+  // #936 guard: a stylesheet absent from the reduced incoming head is NEVER removed.
+  assert.ok(document.head.querySelector('link[href="/app.css"]'), 'shared stylesheet must survive');
+  assert.ok(document.head.querySelector('#runtime-css'), 'runtime CSS must survive');
+});
+
+test('addNewHeadElements: updates a changed keyed meta in place, no duplicate (#1046)', () => {
+  document.head.innerHTML = '<title>T</title><meta name="robots" content="index,follow">';
+  const before = document.head.querySelector('meta[name="robots"]');
+  const newHead = document.createElement('head');
+  newHead.innerHTML = '<title>T</title><meta name="robots" content="noindex">';
+  _addNewHead(newHead);
+  const robots = document.head.querySelectorAll('meta[name="robots"]');
+  assert.equal(robots.length, 1, 'exactly one robots meta (updated, not duplicated)');
+  assert.equal(robots[0].getAttribute('content'), 'noindex', 'content updated to the new page value');
+  // Identity guarantee: the 1:1 case syncs attributes IN PLACE, so an app
+  // script holding a reference to the meta still points at the live element.
+  assert.strictEqual(robots[0], before, 'the live meta element keeps its DOM identity');
+});
+
+test('addNewHeadElements: adds a keyed meta present only in the incoming head (#1046)', () => {
+  document.head.innerHTML = '<title>T</title>';
+  const newHead = document.createElement('head');
+  newHead.innerHTML = '<title>T</title><meta name="view-transition" content="same-origin">';
+  _addNewHead(newHead);
+  const vt = document.head.querySelectorAll('meta[name="view-transition"]');
+  assert.equal(vt.length, 1, 'incoming page-scoped meta added');
+  assert.equal(vt[0].getAttribute('content'), 'same-origin');
+});
+
+test('addNewHeadElements: an og:* property meta is reconciled by property (#1046)', () => {
+  document.head.innerHTML = '<title>T</title><meta charset="utf-8"><meta property="og:title" content="Old page">';
+  const newHead = document.createElement('head');
+  // A real full head (charset present) that declares no og:title.
+  newHead.innerHTML = '<title>T</title><meta charset="utf-8">';
+  _addNewHead(newHead);
+  assert.equal(
+    document.head.querySelectorAll('meta[property="og:title"]').length, 0,
+    'stale og:title removed when the incoming page does not declare it'
+  );
+});
+
+test('addNewHeadElements: a bare fragment (empty incoming head) does NOT strip live metas (#1046 frame-nav guard)', () => {
+  // A <webjs-frame> nav response is a headless subtree, so the incoming head is
+  // empty. That must NOT delete every live page-scoped meta.
+  document.head.innerHTML =
+    '<title>T</title>' +
+    '<meta name="viewport" content="width=device-width">' +
+    '<meta name="description" content="hi">' +
+    '<meta property="og:title" content="Home">';
+  const emptyHead = document.createElement('head'); // no metas at all (fragment)
+  _addNewHead(emptyHead);
+  assert.ok(document.head.querySelector('meta[name="viewport"]'), 'viewport survives a headless-fragment merge');
+  assert.ok(document.head.querySelector('meta[name="description"]'), 'description survives');
+  assert.ok(document.head.querySelector('meta[property="og:title"]'), 'og:title survives');
+});
+
+test('addNewHeadElements: repeated-key metas (multiple og:image) are reconciled as a set (#1046)', () => {
+  // Live page has one og:image; the incoming page declares two.
+  document.head.innerHTML =
+    '<title>T</title>' +
+    '<meta charset="utf-8">' +
+    '<meta property="og:image" content="/a.png">';
+  const newHead = document.createElement('head');
+  newHead.innerHTML =
+    '<title>T</title>' +
+    '<meta charset="utf-8">' +
+    '<meta property="og:image" content="/a.png">' +
+    '<meta property="og:image" content="/b.png">';
+  _addNewHead(newHead);
+  const imgs = [...document.head.querySelectorAll('meta[property="og:image"]')].map((m) => m.getAttribute('content'));
+  assert.deepEqual(imgs, ['/a.png', '/b.png'], 'both og:image metas present after nav to a two-image page');
+
+  // Now navigate to a page with only ONE og:image: the extra stale one is removed.
+  const back = document.createElement('head');
+  back.innerHTML = '<title>T</title><meta charset="utf-8"><meta property="og:image" content="/a.png">';
+  _addNewHead(back);
+  const after = [...document.head.querySelectorAll('meta[property="og:image"]')].map((m) => m.getAttribute('content'));
+  assert.deepEqual(after, ['/a.png'], 'the extra stale og:image is removed');
+});
+
+test('addNewHeadElements: the csp-nonce meta is NEVER reconciled (keeps the original page-load nonce)', () => {
+  // The browser enforces CSP against the nonce the ORIGINAL page load declared,
+  // so a soft-nav response's fresh per-request nonce must not overwrite it, or
+  // every later nonce-stamped script/preload violates the active policy.
+  document.head.innerHTML = '<title>T</title><meta name="csp-nonce" content="ORIGINAL-nonce">';
+  const newHead = document.createElement('head');
+  newHead.innerHTML = '<title>T</title><meta name="csp-nonce" content="INCOMING-nonce">';
+  _addNewHead(newHead);
+  const nonce = document.head.querySelectorAll('meta[name="csp-nonce"]');
+  assert.equal(nonce.length, 1, 'exactly one csp-nonce meta (not duplicated)');
+  assert.equal(nonce[0].getAttribute('content'), 'ORIGINAL-nonce',
+    'the original page-load nonce is preserved, not overwritten by the incoming one');
+});
+
+/* ====================================================================
+ * runWithTransition: swap-commit promise (#1048)
+ *
+ * The progressive Suspense streamer applies each resolved boundary against
+ * the swapped-in DOM. Under an async view transition the swap is deferred a
+ * frame, so the streamer must await the swap COMMIT or it runs against the
+ * pre-swap DOM (no placeholder) and the skeleton sticks. runWithTransition
+ * returns that commit signal.
+ * ==================================================================== */
+
+test('runWithTransition: sync path runs the thunk and returns a resolved promise', async () => {
+  document.head.innerHTML = ''; // no view-transition meta -> VT disabled
+  const order = [];
+  const p = _runWithTransition(() => order.push('thunk'), () => order.push('after'));
+  assert.deepEqual(order, ['thunk', 'after'], 'thunk then afterFinished run synchronously');
+  await p; // must be a thenable that resolves
+  assert.ok(true, 'returned a resolved promise on the sync path');
+});
+
+test('runWithTransition: with an async view transition, the commit promise resolves AFTER the thunk (#1048)', async () => {
+  // Enable view transitions and mock an async startViewTransition that defers
+  // the DOM-mutation callback to a microtask (like the real API).
+  document.head.innerHTML = '<meta name="view-transition" content="same-origin">';
+  assert.equal(_viewTransitionsEnabled(), true, 'VT is enabled by the meta');
+
+  const prev = document.startViewTransition;
+  let thunkRan = false;
+  let committedBeforeThunk = null;
+  document.startViewTransition = (cb) => {
+    // Defer the update callback, exactly the ordering that stuck the skeleton.
+    const updateCallbackDone = Promise.resolve().then(() => { cb(); thunkRan = true; });
+    return { updateCallbackDone, finished: updateCallbackDone, ready: updateCallbackDone };
+  };
+  try {
+    const commit = _runWithTransition(() => {}, () => {});
+    // At this synchronous point the deferred thunk has NOT run yet.
+    committedBeforeThunk = thunkRan;
+    await commit;
+    assert.equal(committedBeforeThunk, false, 'thunk is deferred (async), not run synchronously');
+    assert.equal(thunkRan, true, 'the commit promise only resolves after the thunk has committed');
+  } finally {
+    document.startViewTransition = prev;
+    document.head.innerHTML = '';
+  }
+});
+
 test('addNewHeadElements: dynamically-created scripts get the meta csp-nonce, not the source page\'s per-request nonce', () => {
   // Set up the meta tag the server emits for the original page load.
   document.head.innerHTML = '<meta name="csp-nonce" content="original-page-nonce">';