@uniweb/runtime 1.3.12 → 1.3.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/runtime",
-  "version": "1.3.12",
+  "version": "1.3.14",
   "description": "Minimal runtime for loading Uniweb foundations",
   "type": "module",
   "exports": {
@@ -44,7 +44,7 @@
     "esbuild": "^0.21.0 || ^0.23.0 || ^0.24.0 || ^0.25.0 || ^0.27.0 || ^0.28.0",
     "vite": "^7.3.1",
     "vitest": "^4.1.7",
-    "@uniweb/build": "1.14.1"
+    "@uniweb/build": "1.14.3"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/area-wrappers.js

@@ -5,7 +5,9 @@
  * each layout area a `view-transition-name` so the browser animates it on its
  * own — persistent chrome (header, sidebar, footer) morphs in place while
  * everything else, the body included, crossfades as the page. With no names the
- * whole layout (chrome included) would flicker on every navigation.
+ * whole layout (chrome included) would flicker on every navigation. An area with
+ * no height has nothing to capture, so a navigation folds it back into the page
+ * (`foldEmptyAreas`, `navigation.js`).
  *
  * ⛔ **The body takes no name by default, which is what keeps a phone usable.** A
  * named element is captured as one image. WebKit captures it whole, off-screen part

package/src/navigation.js

@@ -74,6 +74,29 @@ function pageAt(to) {
   return website.getPage(route.split(/[?#]/)[0]) || null
 }
 
+/**
+ * Folds an area with no height back into the page's crossfade, as a `null` in a layout's `transitions`
+ * would.
+ *
+ * ⛔ A named element is captured at its own size, so a box with no height is captured as nothing,
+ * whatever overflows it. A bar that overlays the page is that box: `fixed`, or `absolute` in a sticky
+ * box it doesn't fill. Its name took it out of the page's capture and its own capture drew nothing,
+ * so the bar was gone for the length of every transition and came back at the end. Measured
+ * 2026-11-02 in Chromium and WebKit.
+ *
+ * An area with nothing in it keeps its name, since a sidebar that fills on the next page should still
+ * move on its own. A folded name stays folded: React wrote it and has no reason to write it again,
+ * except on a new element, so this runs again once a page has committed, for a layout change.
+ */
+function foldEmptyAreas() {
+  for (const area of document.querySelectorAll('[style*="view-transition-name"]')) {
+    const box = area.getClientRects()[0]
+    if (box && !box.height && [...area.querySelectorAll('*')].some((el) => el.getBoundingClientRect().height)) {
+      area.style.viewTransitionName = 'none'
+    }
+  }
+}
+
 /** Whether `page`'s content can be shown now: `PageRenderer`'s own test. */
 function isReady(page) {
   return !page || !page.hasContent() || page.isContentLoaded()
@@ -206,11 +229,12 @@ export function navigateInApp(navigate, to, options) {
       navigate(to, options)
       return
     }
+    foldEmptyAreas()
     const transition = document.startViewTransition(() => {
       // Asked before navigating: a router that commits synchronously settles it from inside `navigate`.
       const committed = nextPageCommit()
       navigate(to, options)
-      return committed
+      return committed.then(foldEmptyAreas)
     })
     // A transition the browser skips, for a duplicate `view-transition-name` or a newer
     // transition, still runs its callback, so the page is swapped all the same. The browser