@uniweb/runtime 1.5.1 → 1.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/runtime",
-  "version": "1.5.1",
+  "version": "1.5.3",
   "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/core": "~1.6.8",
+    "@uniweb/theming": "~1.3.2"
   },
   "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

@@ -72,6 +72,8 @@ function drawnHeight(box) {
  */
 export function measureHeaderOverlay(doc) {
   const box = doc.querySelector('[data-uw-header="over"]')
+  // A page under the header whose layout drew no header has no box to measure, and the page's
+  // stylesheet pads its section by nothing (`underHeaderProps`).
   return box ? Math.round(drawnHeight(box) * 100) / 100 : null
 }
 

package/src/under-header.js

@@ -28,6 +28,9 @@ export const HEADER_HEIGHT = '--uw-header-height'
 /** What the browser measured, on the root, which the opening section's value defers to. */
 export const MEASURED_HEADER_HEIGHT = '--uw-header-measured'
 
+/** The header types' declared height, on the opening section's wrapper: the value before measuring. */
+export const DECLARED_HEADER_HEIGHT = '--uw-header-declared'
+
 /**
  * Whether the page's header lies over its opening section, and how tall the header is before the
  * browser measures it: the `height` its sections' types declare, else `0px` until measured.
@@ -37,9 +40,8 @@ export const MEASURED_HEADER_HEIGHT = '--uw-header-measured'
  */
 export function headerOverlay(page) {
   const first = page?.getBodyBlocks?.()?.[0]
-  if (!first?.underHeader) return null
-  const header = page.getLayoutAreas?.()?.header
-  if (!Array.isArray(header) || header.length === 0) return null
+  if (!first?.liesUnderHeader?.()) return null
+  const header = page.getLayoutAreas().header
   const heights = header.map((block) => block?.height).filter(Boolean)
   const height = heights.length === 0 ? '0px' : heights.length === 1 ? heights[0] : `calc(${heights.join(' + ')})`
   return { height }
@@ -58,15 +60,52 @@ export function overlayBoxProps(props) {
 }
 
 /**
- * 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.
+ * 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 type's declared
+ * height, and the mark the page's stylesheet keys on.
+ *
+ * ⭐ THE STYLESHEET GIVES THE SECTION ITS `--uw-header-height` (`@uniweb/theming`): what the browser
+ * measured, else the declared height, on a page where a header box lies over it
+ * (`[data-uw-header="over"]`), and `0px` on one where none does — a layout that draws no header on
+ * the page. A rule rather than this style, since only the rendered page holds that answer, and so
+ * the first paint, the prerender's included, pads by what is there. ⛔ Until 2026-11-06 the section
+ * was padded by the declared height whatever the layout drew, until the browser measured.
  *
  * @param {{ height: string }} overlay - `headerOverlay(page)`
  * @returns {{ style: Object, 'data-uw-under-header': string }}
  */
 export function underHeaderProps(overlay) {
   return {
-    style: { [HEADER_HEIGHT]: `var(${MEASURED_HEADER_HEIGHT}, ${overlay.height})` },
+    style: { [DECLARED_HEADER_HEIGHT]: overlay.height },
     'data-uw-under-header': '',
   }
 }