@uniweb/runtime 1.4.6 → 1.5.1

package/package.json

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

package/src/components/BlockRenderer.jsx

@@ -13,6 +13,7 @@ import Background from './Background.jsx'
 import { sectionStickyProps, sectionScrollMargin } from '../sticky.js'
 import { noteBodySection } from '../sticky-top.js'
 import { noteSectionWrapper } from '../sticky-check.js'
+import { openingUnderHeader, underHeaderProps } from '../under-header.js'
 
 /**
  * Valid color contexts
@@ -173,6 +174,14 @@ export default function BlockRenderer({ block, as = 'section', stickySelf = fals
   // On a page whose layout has a sticky area, a link to this section lands below it.
   const margin = sectionScrollMargin(block, stickySelf)
   if (margin) wrapperProps.style = { ...wrapperProps.style, ...margin }
+  // The page's opening section, when the header lies over it: the header's height to clear, the
+  // declared one until the browser measures it (`../under-header.js`). Mirrored in `ssr-renderer.js`.
+  const overlay = stickySelf === 'section' || stickySelf === true ? openingUnderHeader(block) : null
+  if (overlay) {
+    const under = underHeaderProps(overlay)
+    wrapperProps.style = { ...wrapperProps.style, ...under.style }
+    wrapperProps['data-uw-under-header'] = under['data-uw-under-header']
+  }
   // A body section's element, for the measurement of what is stuck over the body (`../sticky-top.js`);
   // in dev, every section's, so `uniweb dev`'s sticky check knows a component's outermost element.
   const bodySection = stickySelf === 'section' || stickySelf === true
@@ -202,6 +211,11 @@ export default function BlockRenderer({ block, as = 'section', stickySelf = fals
   // and let the engine background show through.
   block.hasBackground = hasBackground
 
+  // `background: 'self'` is everything behind the content: the theme leaves this wrapper
+  // unpainted too, and the component paints its context's surface where it wants it
+  // (`@uniweb/theming`'s section rule). Mirrored in `ssr-renderer.js`.
+  if (meta?.background === 'self') wrapperProps['data-uw-background'] = 'self'
+
   // Determine wrapper element:
   // - Explicit as prop (not 'section') → use as prop directly
   // - Component.as → use component's declared tag (e.g., Header.as = 'header')

package/src/components/Layout.jsx

@@ -35,6 +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 { 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`).
@@ -95,9 +96,14 @@ export default function Layout({ page, website }) {
   // it is lifted above the areas that scroll under it.
   const sticky = layoutStickiness(areas)
   const layers = resolveLayoutLayers(areaNames, layoutMeta?.layers, sticky)
+  // A page that opens with a section under the header has the header lie over it: the header's box
+  // takes no room in the flow (`../under-header.js`). In a foundation's layout that box is the area
+  // wrapper; in the built-in one, the zone around it.
+  const overlay = headerOverlay(page)
 
   const wrap = (region, children) => {
-    const props = areaWrapperProps(region, transitions, layers, RemoteLayout ? sticky[region] : null)
+    let props = areaWrapperProps(region, transitions, layers, RemoteLayout ? sticky[region] : null)
+    if (overlay && RemoteLayout && region === 'header') props = overlayBoxProps(props)
     return props ? <div {...props}>{children}</div> : children
   }
 
@@ -143,7 +149,7 @@ export default function Layout({ page, website }) {
     <DefaultLayout
       body={bodyElement}
       {...areaElements}
-      zones={{ header: zone('header'), footer: zone('footer') }}
+      zones={{ header: overlay ? overlayBoxProps(zone('header')) : zone('header'), footer: zone('footer') }}
     />
   )
 }

package/src/components/PageRenderer.jsx

@@ -126,13 +126,12 @@ export default function PageRenderer() {
 
   // ⭐ WHAT THE URL NAMES — `Website#resolveRoute`, the one rule every lane calls
   // (`@uniweb/core/resolve-route`): a page, a redirect, a page served from elsewhere, or
-  // nothing. Resolved synchronously (not in an effect) so child components like Header see the
-  // correct activePage during the same render cycle.
+  // nothing. Resolved synchronously (not in an effect), and the page drawn made active below,
+  // so child components like Header see it during the same render cycle.
   const navigate = useNavigate()
 
   const resolution = website?.resolveRoute?.(location.pathname) ?? null
   let page = resolution && resolution.kind !== 'notFound' ? resolution.page : null
-  if (page && website) website.setActivePage(location.pathname)
 
   // ─── Content loading (split page content) ───
   // On first load, the current page's sections are pre-embedded → contentReady = true.
@@ -182,6 +181,13 @@ export default function PageRenderer() {
     page = website?.getNotFoundPage?.() || null
   }
 
+  // ⭐ THE PAGE DRAWN IS THE ACTIVE ONE, by the Page itself, as the prerender makes it
+  // (`renderPage`): a header reading its next block, the language switcher, page state and a
+  // contents rail all read the page on screen, the not-found page included. ⛔ Until 2026-11-06 it
+  // was made active by the URL, so the not-found page drew with another page active, and a
+  // parametric page whose records were not held yet was looked up anew, another Page than this one.
+  if (page && website) website.setActivePage(page)
+
   // Head metadata — compute for all cases (redirect pages get a fallback)
   const headMeta = page?.getHeadMeta?.() || {
     title: isNotFound ? 'Page Not Found' : (page?.title || 'Website'),

package/src/page-renderer.js

@@ -38,7 +38,6 @@ import { resolveRequestedPage } from './resolve-page.js'
 import { hydrateDataStore } from './wire-foundation.js'
 import { loadPageData } from './load-page-data.js'
 import { requireTransport } from './require-transport.js'
-import { restoreStartPage } from './start-page.js'
 import { whileReadingIcons } from './page-icons.js'
 
 /**
@@ -152,15 +151,11 @@ export function createPageRenderer({ website, shell }) {
     // host that answered by the outcome sent 200 for a URL naming no record.
     const missing = !named || page?.notFound === true
 
-    // ⭐ EVERY RENDER STARTS FROM THE ACTIVE PAGE THE WEBSITE STARTED WITH (`start-page.js`),
-    // then makes active the page the route names, as the browser's boot does (`index.jsx`).
-    // `renderPage` then makes the page it renders active by its route, and the not-found page
-    // has none: it renders with the page a route served from elsewhere names, as in the browser,
-    // or with the start page. ⛔ Until 2026-10-26 it rendered with whatever page this Website
-    // rendered last, so on a Website reused across requests its header could show the previous
-    // request's page.
-    restoreStartPage(website)
-    if (typeof target === 'string') website.setActivePage(target)
+    // ⭐ `renderPage` makes the page it renders active, by the Page, the not-found page included,
+    // so no render sees the page an earlier request rendered. ⛔ Until 2026-10-26 the not-found
+    // page rendered with whatever page this Website rendered last, so on a Website reused across
+    // requests its header could show the previous request's page; until 2026-11-06 it rendered with
+    // the page the Website started with (or a page served from elsewhere that the route named).
     // ⭐ The page carries the icons it drew, so the browser's first render draws them too.
     const icons = new Map()
     let result

package/src/ssr-renderer.js

@@ -34,10 +34,10 @@ 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 { DefaultLayout } from './default-layout.js'
 import { renderAppearanceBootScript } from './appearance.js'
 import { documentTitle } from './document-title.js'
-import { recordStartPage } from './start-page.js'
 import { escapeHtml } from '@uniweb/core/page-shell'
 import { jsonForScript } from '@uniweb/core/data-script'
 
@@ -185,6 +185,14 @@ export function renderBlock(block, { as = 'section', stickySelf = false } = {})
   // On a page whose layout has a sticky area, a link to this section lands below it.
   const margin = sectionScrollMargin(block, stickySelf)
   if (margin) wrapperProps.style = { ...wrapperProps.style, ...margin }
+  // The page's opening section, when the header lies over it: the header's height to clear
+  // (`under-header.js`). Mirrors `BlockRenderer.jsx`.
+  const overlay = stickySelf === 'section' || stickySelf === true ? openingUnderHeader(block) : null
+  if (overlay) {
+    const under = underHeaderProps(overlay)
+    wrapperProps.style = { ...wrapperProps.style, ...under.style }
+    wrapperProps['data-uw-under-header'] = under['data-uw-under-header']
+  }
 
   // Merge Component.className (static classes declared on the component function)
   const componentClassName = Component.className
@@ -197,6 +205,8 @@ export function renderBlock(block, { as = 'section', stickySelf = false } = {})
   // Check if component handles its own background
   const hasBackground = background?.mode && meta?.background !== 'self'
   block.hasBackground = hasBackground
+  // `background: 'self'` leaves the wrapper unpainted by the theme too (`BlockRenderer.jsx`).
+  if (meta?.background === 'self') wrapperProps['data-uw-background'] = 'self'
 
   // Determine wrapper element:
   // - Explicit as (not 'section') → use as prop directly
@@ -261,8 +271,11 @@ export function renderLayout(page, website) {
   // above the areas that scroll under it.
   const sticky = layoutStickiness(areas)
   const layers = resolveLayoutLayers(areaNames, layoutMeta?.layers, sticky)
+  // 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) => {
-    const props = areaWrapperProps(name, transitions, layers, RemoteLayout ? sticky[name] : null)
+    let props = areaWrapperProps(name, transitions, layers, RemoteLayout ? sticky[name] : null)
+    if (overlay && RemoteLayout && name === 'header') props = overlayBoxProps(props)
     return props ? React.createElement('div', props, element) : element
   }
 
@@ -288,7 +301,7 @@ export function renderLayout(page, website) {
   return React.createElement(DefaultLayout, {
     body: bodyElement,
     ...areaElements,
-    zones: { header: zone('header'), footer: zone('footer') },
+    zones: { header: overlay ? overlayBoxProps(zone('header')) : zone('header'), footer: zone('footer') },
   })
 }
 
@@ -362,8 +375,6 @@ export function initPrerender(content, foundation, extensionsOrOptions, maybeOpt
   // Uniweb constructor wires foundation, capabilities, layoutMeta, handlers,
   // and extensions at construction time — see `@uniweb/core`'s src/uniweb.js.
   const uniweb = createUniweb(content, foundation, extensions)
-  // Before anything renders: the active page every render starts from (`start-page.js`).
-  recordStartPage(uniweb.activeWebsite)
 
   // Set base path from site config for subdirectory deployments
   if (content.config?.base && uniweb.activeWebsite?.setBasePath) {
@@ -401,12 +412,8 @@ export function initPrerender(content, foundation, extensionsOrOptions, maybeOpt
   ensureThemeCss(uniweb, foundation)
 
   // Register SSR-safe routing so useRouting()/useActiveRoute() work during prerender.
-  // renderPage() calls website.setActivePage() before rendering each page,
-  // so activePage.route reflects the page being rendered — except the site's
-  // not-found page, which no route names. Through `createPageRenderer` it renders
-  // with the page a route served from elsewhere names, else the page the Website
-  // starts with (`start-page.js`); through `generate404Html`, with the page
-  // rendered last.
+  // renderPage() makes the page it renders active before rendering it, so
+  // activePage.route is the page being rendered, the not-found page included.
   const website = uniweb.activeWebsite
   uniweb.routingComponents = {
     useLocation: () => {
@@ -534,11 +541,13 @@ export function classifyRenderError(err) {
  * @returns {{ renderedContent: string, sectionOverrideCSS: string } | { error: { type: string, message: string } }}
  */
 export function renderPage(page, website) {
-  // ⛔ The site's not-found page is never made active by its route. No route names it, and on a
-  // site whose parametric page matches `/404` (a root `/:slug`) that route names THAT page, which
-  // then rendered as the active one. It renders with the active page it finds: the Website's
-  // first, through `createPageRenderer` (`start-page.js`), as in the browser.
-  if (page !== website.getNotFoundPage()) website.setActivePage(page.route)
+  // ⭐ The page it renders is the active one, by the Page itself, as in the browser
+  // (`PageRenderer.jsx`): whatever adapts to the page — a header reading its next block, the
+  // language switcher, page state, a contents rail — reads the page on screen. ⛔ Until 2026-11-06
+  // it was made active by its route. The site's not-found page has none (on a site whose
+  // parametric page matches `/404`, that route names THAT page), so it rendered with another page
+  // active, and a parametric page whose records were not held yet was made anew by the lookup.
+  website.setActivePage(page)
 
   // A page that claims content but yields no blocks has not been loaded — it is
   // not an empty page. `Page#bodyBlocks` returns [] when its sections are absent

package/src/sticky-check.js

@@ -25,6 +25,13 @@
  * Table parts are left out: a sticky table header cell sticks within its table, though its row is
  * no taller than it is. So is a child section the runtime made sticky (`data-uw-sticky="child"`):
  * with no room — stacked at one column, or the tallest in its row — it does not stick, by design.
+ * And so is an element whose box is sticky itself: the box moves, and the element with it — the
+ * runtime's area wrapper inside a layout's own element that `page.isSticky(area)` made sticky, as
+ * the docs say to. ⛔ Until 2026-11-06 that layout was told to do what it had done.
+ *
+ * ⭐ A header over the page's opening section is checked too (`under-header.js`): when what it
+ * holds takes no room, a bar made `fixed` or `absolute`, the runtime measures 0px, so the section
+ * is not cleared and a link to a section lands under the bar — and nothing else says why.
  *
  * And an element that sits in a box that CLIPS — `overflow: hidden`, or `overflow-x: hidden`
  * alone, which makes the box scroll vertically too — sticks to that box in place of the page,
@@ -33,6 +40,8 @@
  * (a layout's own scrolling `<main>`) is the element's scroller, and is left alone.
  */
 
+import { measureHeaderOverlay } from './sticky-top.js'
+
 const warned = new WeakSet()
 
 /** Every section wrapper the browser's renderer drew, noted in dev (`BlockRenderer.jsx`). */
@@ -125,10 +134,37 @@ export function unmovableAdvice(el) {
   )
 }
 
+/**
+ * The box of a header over the opening section, when what it holds takes no room though some of
+ * it is drawn: a bar out of the flow — or null.
+ *
+ * @param {Document} doc
+ * @returns {Element|null}
+ */
+export function headerOutOfFlow(doc) {
+  const box = doc.querySelector?.('[data-uw-header="over"]')
+  if (!box || measureHeaderOverlay(doc) !== 0) return null
+  const drawn = [...box.querySelectorAll('*')].some((el) => el.getBoundingClientRect().height > 0)
+  return drawn ? box : null
+}
+
 /** Warn, once per element, about each sticky element on the page that cannot move. */
 function checkPage(doc) {
+  const header = headerOutOfFlow(doc)
+  if (header && !warned.has(header)) {
+    warned.add(header)
+    console.warn(
+      '[uniweb] The header lies over the page\'s opening section, but what it holds takes no room: a bar ' +
+        'made `fixed` or `absolute` leaves the runtime nothing to measure, so the section is cleared by ' +
+        '0px and a link to a section lands under the bar. Keep the bar in the flow; the runtime lays ' +
+        'the header over the section and keeps it stuck.',
+      header,
+    )
+  }
   for (const el of doc.body.querySelectorAll('*')) {
     if (warned.has(el) || getComputedStyle(el).position !== 'sticky') continue
+    const parent = boxParent(el)
+    if (parent && getComputedStyle(parent).position === 'sticky') continue
     const clip = clippingAncestor(el)
     if (clip) {
       warned.add(el)

package/src/sticky-top.js

@@ -16,8 +16,15 @@
  * reaches its `top` plus its height; the variable is the furthest any of them reaches. A rule of
  * position, so it reads no meaning into an area's name (`area-wrappers.js` refuses to for the
  * same reason).
+ *
+ * ⭐ A HEADER OVER THE OPENING SECTION (`under-header.js`) takes no room in the flow, so its box is
+ * as tall as nothing: what it reaches is what it holds, the runtime's own wrappers inside it. Its
+ * height is published too, as `--uw-header-measured`, which the opening section's
+ * `--uw-header-height` reads in place of the height the header type declared for the first paint.
  */
 
+import { MEASURED_HEADER_HEIGHT } from './under-header.js'
+
 const VARIABLE = '--uw-sticky-top'
 const FOLLOWING = 4 // Node.DOCUMENT_POSITION_FOLLOWING
 
@@ -40,6 +47,34 @@ export function bodySectionOf(block) {
   return (block && bodySections.get(block)) || null
 }
 
+/**
+ * How tall a box is drawn: its own height — or, for the header's box over the page's opening
+ * section (`data-uw-header="over"`, `under-header.js`), which takes no room in the flow, how far what
+ * it holds reaches below its top. What it holds is the runtime's own elements (the area's wrapper,
+ * the sections' wrappers), never a guess at a foundation's markup.
+ *
+ * @param {Element} box
+ * @returns {number}
+ */
+function drawnHeight(box) {
+  const own = box.getBoundingClientRect()
+  if (box.getAttribute('data-uw-header') !== 'over') return own.height
+  let bottom = own.top
+  for (const child of box.children) bottom = Math.max(bottom, child.getBoundingClientRect().bottom)
+  return bottom - own.top
+}
+
+/**
+ * How tall the header lying over the page's opening section is, in px — null on a page with none.
+ *
+ * @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
+}
+
 /**
  * How far down the viewport the stuck chrome over the body reaches, in px — 0 when none does.
  *
@@ -57,7 +92,7 @@ export function measureStickyTop(doc, body) {
     const own = box.getBoundingClientRect()
     if (own.right <= over.left || own.left >= over.right) continue // beside the body: a rail
     const top = parseFloat(doc.defaultView.getComputedStyle(box).top) || 0
-    reach = Math.max(reach, top + own.height)
+    reach = Math.max(reach, top + drawnHeight(box))
   }
   return Math.round(reach * 100) / 100
 }
@@ -78,13 +113,19 @@ export function watchStickyTop(doc, body) {
     const reach = measureStickyTop(doc, body)
     if (reach > 0) root.style.setProperty(VARIABLE, `${reach}px`)
     else root.style.removeProperty(VARIABLE)
+    // The header over the opening section: what the section's `--uw-header-height` reads once known.
+    const header = measureHeaderOverlay(doc)
+    if (header != null) root.style.setProperty(MEASURED_HEADER_HEIGHT, `${header}px`)
+    else root.style.removeProperty(MEASURED_HEADER_HEIGHT)
+  }
+  const forget = () => {
+    root.style.removeProperty(VARIABLE)
+    root.style.removeProperty(MEASURED_HEADER_HEIGHT)
   }
   apply()
 
   const View = doc.defaultView
-  if (!body || typeof View?.ResizeObserver !== 'function') {
-    return () => root.style.removeProperty(VARIABLE)
-  }
+  if (!body || typeof View?.ResizeObserver !== 'function') return forget
   let frame = 0
   const observer = new View.ResizeObserver(() => {
     View.cancelAnimationFrame(frame)
@@ -92,9 +133,11 @@ export function watchStickyTop(doc, body) {
   })
   observer.observe(body)
   for (const box of doc.querySelectorAll('[data-uw-sticky="area"]')) observer.observe(box)
+  // A box over the opening section keeps no height of its own to change: what it holds does.
+  for (const box of doc.querySelectorAll('[data-uw-header="over"]')) for (const child of box.children) observer.observe(child)
   return () => {
     View.cancelAnimationFrame(frame)
     observer.disconnect()
-    root.style.removeProperty(VARIABLE)
+    forget()
   }
 }

package/src/under-header.js

@@ -0,0 +1,85 @@
+/**
+ * The header laid over a page's opening section — `underHeader`, a setting of the section.
+ *
+ * A page that opens with a section that can sit under the header (`underHeader: true`: its type's
+ * default in `meta.js`, or its author's) has the header lie over it. The header's box takes no room
+ * in the flow, so the section starts at the top of the window and its picture reaches up behind a
+ * see-through header; the header keeps its own height inside that box, and stays in view if it
+ * sticks. Pure, so both renderers (`components/Layout.jsx`, `ssr-renderer.js`) build the same page,
+ * and the browser's measurement (`sticky-top.js`) reads the same boxes.
+ *
+ * ⭐ THE RUNTIME DOES IT, AS IT DOES `sticky`, because a component cannot move the box the runtime
+ * puts it in. Foundations that floated a header from inside its own section took the bar out of
+ * the flow (`absolute`, `fixed`), which left the box the runtime measures with no height: no
+ * `--uw-sticky-top`, and a link to a section landing under the bar (measured 2026-11-06 on a site's
+ * store page, in Chromium and WebKit). Five sites solved it five ways.
+ *
+ * The opening section keeps its content clear of the header by `--uw-header-height`, which the
+ * runtime gives its wrapper: the header type's `height` on the first paint, which no prerender can
+ * measure, then what the browser measures. The header reads `getNextBlockInfo().underHeader` to
+ * paint itself see-through, and its box says `data-uw-header="over"` for a stylesheet. Its type
+ * says `background: 'self'` and paints its own bar: otherwise the theme paints the header's section
+ * with its surface, a solid band over the opening section (measured 2026-11-06).
+ */
+
+/** The header's height, on the opening section's wrapper: what its content is padded by. */
+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'
+
+/**
+ * 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.
+ *
+ * @param {Object} page - its blocks' components initialized, as both renderers do before rendering
+ * @returns {{ height: string }|null}
+ */
+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
+  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 }
+}
+
+/**
+ * The props of the header's box — the built-in layout's zone, or a foundation layout's area
+ * wrapper — when it lies over the opening section: it takes no room in the flow, and what it holds
+ * keeps its height. Whatever else the box has (its layer, its stickiness) stays.
+ *
+ * @param {Object|null} props - the box's props without the overlay
+ * @returns {Object}
+ */
+export function overlayBoxProps(props) {
+  return { ...(props || {}), style: { ...(props?.style || {}), height: 0, minHeight: 0 }, 'data-uw-header': 'over' }
+}
+
+/**
+ * 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.
+ *
+ * @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})` },
+    'data-uw-under-header': '',
+  }
+}
+
+/**
+ * Whether `block` is its page's opening section under the header — what its wrapper asks before it
+ * adds `underHeaderProps`.
+ *
+ * @param {Object} block - a body section's block, its component initialized
+ * @returns {{ height: string }|null} the page's overlay, when it opens with this section
+ */
+export function openingUnderHeader(block) {
+  const page = block?.page
+  if (!page || page.getBodyBlocks?.()?.[0] !== block) return null
+  return headerOverlay(page)
+}

package/src/start-page.js

@@ -1,26 +0,0 @@
-/**
- * The page a Website starts with as active — recorded when the SSR init builds the graph, and put
- * back before each render (`createPageRenderer`).
- *
- * ⭐ It is what the browser has on a URL that names no page. Core makes the site's index page (or
- * its first page) active when it builds the Website, and neither the boot nor `PageRenderer` makes
- * the not-found page active, since no route names it.
- *
- * ⛔ `renderPage` makes the page it renders active by its route, so for the not-found page it
- * changes nothing, and that page rendered with whatever page the Website rendered last: on a
- * Website reused across requests, the previous request's. Anything that adapts to the active page
- * — a header, a language switcher, a docs sidebar — showed that page.
- *
- * A WeakMap rather than a slot on core's sealed Website: it is SSR state, and core is in every site.
- */
-const startPages = new WeakMap()
-
-/** Remember `website`'s active page as the one it starts with. Call it before anything renders. */
-export function recordStartPage(website) {
-  if (website && !startPages.has(website)) startPages.set(website, website.activePage)
-}
-
-/** Make `website`'s start page active again. A Website the SSR init did not build is left alone. */
-export function restoreStartPage(website) {
-  if (startPages.has(website)) website.activePage = startPages.get(website)
-}