@uniweb/runtime 1.5.1 → 1.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/runtime",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "Minimal runtime for loading Uniweb foundations",
   "type": "module",
   "exports": {
@@ -36,15 +36,15 @@
     "node": ">=22.12"
   },
   "dependencies": {
-    "@uniweb/core": "~1.6.7",
-    "@uniweb/theming": "~1.3.1"
+    "@uniweb/theming": "~1.3.1",
+    "@uniweb/core": "~1.6.7"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.5.2",
     "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.18.0"
+    "@uniweb/build": "1.18.1"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/components/Layout.jsx

@@ -35,7 +35,7 @@ import { useEffect } from 'react'
 import Blocks from './Blocks.jsx'
 import { resolveLayoutTransitions, resolveLayoutLayers, areaWrapperProps } from '../area-wrappers.js'
 import { layoutStickiness, zoneProps } from '../sticky.js'
-import { headerOverlay, overlayBoxProps } from '../under-header.js'
+import { headerOverlay, overlayBoxProps, headerAreaProps } from '../under-header.js'
 import { warnUnmovableSticky } from '../sticky-check.js'
 import { watchStickyTop, bodySectionOf } from '../sticky-top.js'
 // The built-in layout — one copy, which the prerender renders too (`../default-layout.js`).
@@ -102,8 +102,12 @@ export default function Layout({ page, website }) {
   const overlay = headerOverlay(page)
 
   const wrap = (region, children) => {
-    let props = areaWrapperProps(region, transitions, layers, RemoteLayout ? sticky[region] : null)
-    if (overlay && RemoteLayout && region === 'header') props = overlayBoxProps(props)
+    const props = areaWrapperProps(region, transitions, layers, RemoteLayout ? sticky[region] : null)
+    if (RemoteLayout && region === 'header') {
+      // The same boxes on every page, the name on one that keeps the header's height.
+      const { outer, inner } = headerAreaProps(props, overlay)
+      return <div {...outer}>{inner ? <div {...inner}>{children}</div> : children}</div>
+    }
     return props ? <div {...props}>{children}</div> : children
   }
 

package/src/ssr-renderer.js

@@ -34,7 +34,7 @@ import {
 } from './wire-foundation.js'
 import { resolveLayoutTransitions, resolveLayoutLayers, areaWrapperProps } from './area-wrappers.js'
 import { layoutStickiness, sectionStickyProps, sectionScrollMargin, zoneProps } from './sticky.js'
-import { headerOverlay, overlayBoxProps, openingUnderHeader, underHeaderProps } from './under-header.js'
+import { headerOverlay, overlayBoxProps, openingUnderHeader, underHeaderProps, headerAreaProps } from './under-header.js'
 import { DefaultLayout } from './default-layout.js'
 import { renderAppearanceBootScript } from './appearance.js'
 import { documentTitle } from './document-title.js'
@@ -274,8 +274,12 @@ export function renderLayout(page, website) {
   // Mirror Layout.jsx: the header lies over a page's opening section under it (`under-header.js`).
   const overlay = headerOverlay(page)
   const wrapArea = (name, element) => {
-    let props = areaWrapperProps(name, transitions, layers, RemoteLayout ? sticky[name] : null)
-    if (overlay && RemoteLayout && name === 'header') props = overlayBoxProps(props)
+    const props = areaWrapperProps(name, transitions, layers, RemoteLayout ? sticky[name] : null)
+    if (RemoteLayout && name === 'header') {
+      // Mirror Layout.jsx: the same boxes on every page, the name on one that keeps the header's height.
+      const { outer, inner } = headerAreaProps(props, overlay)
+      return React.createElement('div', outer, inner ? React.createElement('div', inner, element) : element)
+    }
     return props ? React.createElement('div', props, element) : element
   }
 

package/src/sticky-top.js

@@ -65,14 +65,19 @@ function drawnHeight(box) {
 }
 
 /**
- * How tall the header lying over the page's opening section is, in px — null on a page with none.
+ * How tall the header lying over the page's opening section is, in px — 0 when the layout drew no
+ * header on such a page, null on a page with no section under the header.
  *
  * @param {Document} doc
  * @returns {number|null}
  */
 export function measureHeaderOverlay(doc) {
   const box = doc.querySelector('[data-uw-header="over"]')
-  return box ? Math.round(drawnHeight(box) * 100) / 100 : null
+  if (box) return Math.round(drawnHeight(box) * 100) / 100
+  // A page whose opening section lies under the header, in a layout that drew no header on it:
+  // there is nothing to clear, so the section is padded by nothing once the browser has looked.
+  // ⛔ Until 2026-11-06 it kept the declared height, padding the section for a header not there.
+  return doc.querySelector('[data-uw-under-header]') ? 0 : null
 }
 
 /**

package/src/under-header.js

@@ -57,6 +57,36 @@ export function overlayBoxProps(props) {
   return { ...(props || {}), style: { ...(props?.style || {}), height: 0, minHeight: 0 }, 'data-uw-header': 'over' }
 }
 
+/**
+ * The boxes a foundation layout's header area is drawn in, the same in both renderers.
+ *
+ * ⭐ THE SAME ELEMENTS ON EVERY PAGE. Between a page whose opening section lies under the header and
+ * one with none, only styles change, so React keeps the header mounted, with its state: a search
+ * box's words, a menu, an animation that ran once. So the area always has its wrapper — its layer
+ * and stickiness, collapsed on a page under the header, and `display: contents`, no box at all,
+ * where it has nothing to carry (a layout that ranks its own stacking and a header that neither
+ * sticks nor is named). ⛔ For part of 2026-11-06 a wrapper appeared only on a page under the
+ * header there, and React rebuilt the header on each move between the two kinds of page.
+ *
+ * ⭐ THE NAME A LAYOUT ASKS FOR GOES ON AN ELEMENT INSIDE THE WRAPPER, which keeps the header's
+ * height on every page. A named box is captured at its own size, and one with no height is captured
+ * as nothing, so on the collapsed wrapper the header was gone for the length of a page switch; the
+ * element inside is the header's extent everywhere, and two pages' headers pair as the layout means.
+ * ⛔ For part of 2026-11-06 a collapsed wrapper dropped the name instead, which quietly ignored what
+ * the layout asked for on exactly those pages.
+ *
+ * @param {Object|null} wrapper - the area wrapper's props (`areaWrapperProps`), its name included
+ * @param {{ height: string }|null} overlay - `headerOverlay(page)`
+ * @returns {{ outer: Object, inner: Object|null }} the wrapper's props, and the named element's
+ */
+export function headerAreaProps(wrapper, overlay) {
+  const { viewTransitionName, ...style } = wrapper?.style || {}
+  const inner = viewTransitionName ? { style: { viewTransitionName } } : null
+  const base = { ...(wrapper || {}), style }
+  if (overlay) return { outer: overlayBoxProps(base), inner }
+  return { outer: Object.keys(style).length ? base : { ...base, style: { display: 'contents' } }, inner }
+}
+
 /**
  * What the opening section's wrapper adds when the header lies over it: the header's height, the
  * declared one until the browser has measured it.