@uniweb/runtime 1.5.0 → 1.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/runtime",
-  "version": "1.5.0",
+  "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.6",
-    "@uniweb/theming": "~1.3.0"
+    "@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.17.2"
+    "@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/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,11 +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 { 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'
-import { recordStartPage } from './start-page.js'
 import { escapeHtml } from '@uniweb/core/page-shell'
 import { jsonForScript } from '@uniweb/core/data-script'
 
@@ -275,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
   }
 
@@ -376,8 +379,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) {
@@ -415,12 +416,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: () => {
@@ -548,11 +545,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

@@ -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

@@ -17,7 +17,9 @@
  * 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.
+ * 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. */
@@ -55,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.

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)
-}