@uniweb/runtime 1.1.13 → 1.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/runtime",
-  "version": "1.1.13",
+  "version": "1.1.14",
   "description": "Minimal runtime for loading Uniweb foundations",
   "type": "module",
   "exports": {
@@ -36,15 +36,15 @@
     "node": ">=22.12"
   },
   "dependencies": {
-    "@uniweb/theming": "~1.2.0",
-    "@uniweb/core": "~1.4.0"
+    "@uniweb/core": "~1.4.0",
+    "@uniweb/theming": "~1.2.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.6.2"
+    "@uniweb/build": "1.7.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/area-wrappers.js

@@ -180,3 +180,20 @@ export function areaWrapperStyle(region, transitions, layers, sticky = null) {
 
   return Object.keys(style).length > 0 ? style : null
 }
+
+/**
+ * The props for one area's wrapper element — its style, and `data-uw-sticky="area"` when it is
+ * the box that sticks (`sticky.js`) — or `null` when the region needs no wrapper. Both renderers
+ * build the wrapper from this, so the prerendered page and the browser's agree.
+ *
+ * @param {string} region - Area name, or `body`.
+ * @param {Object|null} transitions - region → view-transition-name.
+ * @param {Object} layers - region → z-index.
+ * @param {{ top: string }|null} [sticky] - the area's stickiness, when its box is the one that sticks
+ * @returns {{ style: Object, 'data-uw-sticky'?: 'area' }|null}
+ */
+export function areaWrapperProps(region, transitions, layers, sticky = null) {
+  const style = areaWrapperStyle(region, transitions, layers, sticky)
+  if (!style) return null
+  return sticky ? { style, 'data-uw-sticky': 'area' } : { style }
+}

package/src/components/BlockRenderer.jsx

@@ -10,7 +10,8 @@ import React, { useState, useEffect } from 'react'
 import { sectionDomId } from '@uniweb/core/section-id'
 import { prepareProps, getComponentMeta } from '../prepare-props.js'
 import Background from './Background.jsx'
-import { sectionStickyStyle } from '../sticky.js'
+import { sectionStickyProps } from '../sticky.js'
+import { noteBodySection } from '../sticky-top.js'
 
 /**
  * Valid color contexts
@@ -79,7 +80,8 @@ const getWrapperProps = (block) => {
  * @param {Object} props
  * @param {Block} props.block - Block instance to render
  * @param {string|null} props.as - Wrapper element tag for section mode, or null/false for bare mode
- * @param {boolean} [props.stickySelf] - whether a sticky section's own wrapper sticks (in the body)
+ * @param {'section'|'child'|boolean} [props.stickySelf] - whether a sticky section's own wrapper is
+ *   the box that sticks: a body section's (`'section'`), or a child section's (`'child'`)
  */
 export default function BlockRenderer({ block, as = 'section', stickySelf = false }) {
   const Component = block.initComponent()
@@ -161,9 +163,14 @@ export default function BlockRenderer({ block, as = 'section', stickySelf = fals
   // Section mode — full treatment with wrapper, context classes, background.
   const { background, ...wrapperProps } = getWrapperProps(block)
 
-  // In the body, a sticky section's wrapper is the box that stays in view (`../sticky.js`).
-  const sticky = stickySelf ? sectionStickyStyle(block) : null
-  if (sticky) wrapperProps.style = { ...wrapperProps.style, ...sticky }
+  // A body section's wrapper, or a child section's, is the box that stays in view (`../sticky.js`).
+  const sticky = sectionStickyProps(block, stickySelf)
+  if (sticky) {
+    wrapperProps.style = { ...wrapperProps.style, ...sticky.style }
+    wrapperProps['data-uw-sticky'] = sticky['data-uw-sticky']
+  }
+  // A body section's element, for the measurement of what is stuck over the body (`../sticky-top.js`).
+  if (stickySelf === 'section' || stickySelf === true) wrapperProps.ref = (element) => noteBodySection(block, element)
 
   // Merge Component.className (static classes declared on the component function)
   // Order: context-{theme} + block.state.className + Component.className

package/src/components/Blocks.jsx

@@ -19,8 +19,8 @@ import BlockRenderer from './BlockRenderer.jsx'
 /**
  * @param {Object} props
  * @param {Block[]} props.blocks
- * @param {boolean} [props.stickySelf] - a sticky section's own wrapper is the box that sticks:
- *   true in the body; an area's sections leave it to the area's box (`../sticky.js`)
+ * @param {'section'|false} [props.stickySelf] - a sticky section's own wrapper is the box that
+ *   sticks: `'section'` in the body; an area's sections leave it to the area's box (`../sticky.js`)
  */
 export default function Blocks({ blocks, stickySelf = false }) {
   if (!blocks || blocks.length === 0) return null

package/src/components/Layout.jsx

@@ -33,9 +33,10 @@
 
 import { useEffect } from 'react'
 import Blocks from './Blocks.jsx'
-import { resolveLayoutTransitions, resolveLayoutLayers, areaWrapperStyle } from '../area-wrappers.js'
-import { layoutStickiness, stickyStyle } from '../sticky.js'
+import { resolveLayoutTransitions, resolveLayoutLayers, areaWrapperProps } from '../area-wrappers.js'
+import { layoutStickiness, zoneProps } from '../sticky.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`).
 import { DefaultLayout } from '../default-layout.js'
 
@@ -98,21 +99,25 @@ export default function Layout({ page, website }) {
   const layers = resolveLayoutLayers(areaNames, layoutMeta?.layers, sticky)
 
   const wrap = (region, children) => {
-    const style = areaWrapperStyle(region, transitions, layers, RemoteLayout ? sticky[region] : null)
-    return style ? <div style={style}>{children}</div> : children
+    const props = areaWrapperProps(region, transitions, layers, RemoteLayout ? sticky[region] : null)
+    return props ? <div {...props}>{children}</div> : children
   }
 
   // A body section's own wrapper is the box that sticks for it; an area's sections leave that to
   // the area's box.
-  const bodyElement = bodyBlocks ? wrap('body', <Blocks blocks={bodyBlocks} stickySelf />) : null
+  const bodyElement = bodyBlocks ? wrap('body', <Blocks blocks={bodyBlocks} stickySelf="section" />) : null
 
   const areaElements = {}
   for (const [name, blocks] of Object.entries(areas)) {
     areaElements[name] = wrap(name, <Blocks blocks={blocks} />)
   }
 
-  // `uniweb dev` names a sticky element that cannot move — a component's own `sticky`, or an area
-  // a layout wraps in an element of its own. Dropped from a published page's runtime.
+  // How far down the stuck chrome reaches — `--uw-sticky-top`, where a sticky section with no
+  // `top` of its own stays, and where kit's anchors land (`../sticky-top.js`).
+  useEffect(() => watchStickyTop(document, bodySectionOf(bodyBlocks?.[0])), [page])
+
+  // `uniweb dev` names a sticky element that cannot move — a component's own `sticky`, an area a
+  // layout wraps in an element of its own, a box that clips. Dropped from a published page's runtime.
   useEffect(() => {
     if (import.meta.env?.DEV) return warnUnmovableSticky()
   }, [page])
@@ -134,7 +139,7 @@ export default function Layout({ page, website }) {
   }
 
   // Default layout — a sticky area's zone is the box that sticks.
-  const zone = (name) => (sticky[name] ? stickyStyle(sticky[name].top, layers?.[name]) : null)
+  const zone = (name) => zoneProps(sticky[name], layers?.[name])
   return (
     <DefaultLayout
       body={bodyElement}

package/src/components/PageRenderer.jsx

@@ -45,7 +45,7 @@ export function ChildBlocks({ blocks, from, wrapAs }) {
 
   return blockList.map((childBlock, index) => (
     <React.Fragment key={childBlock.id || index}>
-      <BlockRenderer block={childBlock} as={wrapAs || null} />
+      <BlockRenderer block={childBlock} as={wrapAs || null} stickySelf={wrapAs ? 'child' : false} />
     </React.Fragment>
   ))
 }

package/src/default-layout.js

@@ -21,9 +21,9 @@
  * 2026-07-31: `layers: { header: 0 }` on the default layout changed nothing.
  *
  * ⭐ A ZONE IS THE BOX THAT STICKS. When a section of the header (or footer) area is sticky, the
- * runtime hands this layout the zone's style (`zones`): its parent is the page column, so it can
- * stay in view, where the area wrapper inside it, as tall as itself, cannot (`sticky.js`). The
- * style carries the area's layer, which the sticky zone then holds.
+ * runtime hands this layout the zone's props (`zones`, from `zoneProps`): its parent is the page
+ * column, so it can stay in view, where the area wrapper inside it, as tall as itself, cannot
+ * (`sticky.js`). The style carries the area's layer, which the sticky zone then holds.
  */
 
 import React from 'react'
@@ -36,16 +36,15 @@ const GROW = { flex: 1 }
  * @param {React.ReactNode} [props.header]
  * @param {React.ReactNode} [props.body]
  * @param {React.ReactNode} [props.footer]
- * @param {{ header?: Object, footer?: Object }} [props.zones] - a zone's style, when it sticks
+ * @param {{ header?: Object, footer?: Object }} [props.zones] - a zone's props, when it sticks
  * @returns {React.ReactElement}
  */
 export function DefaultLayout({ header, body, footer, zones }) {
-  const zone = (name) => (zones?.[name] ? { style: zones[name] } : null)
   return React.createElement(
     'div',
     { style: COLUMN },
-    header && React.createElement('header', zone('header'), header),
+    header && React.createElement('header', zones?.header || null, header),
     body && React.createElement('main', { style: GROW }, body),
-    footer && React.createElement('footer', zone('footer'), footer),
+    footer && React.createElement('footer', zones?.footer || null, footer),
   )
 }

package/src/ssr-renderer.js

@@ -30,8 +30,8 @@ import {
   hydrateDataStore,
   ensureThemeCss,
 } from './wire-foundation.js'
-import { resolveLayoutTransitions, resolveLayoutLayers, areaWrapperStyle } from './area-wrappers.js'
-import { layoutStickiness, sectionStickyStyle, stickyStyle } from './sticky.js'
+import { resolveLayoutTransitions, resolveLayoutLayers, areaWrapperProps } from './area-wrappers.js'
+import { layoutStickiness, sectionStickyProps, zoneProps } from './sticky.js'
 import { DefaultLayout } from './default-layout.js'
 import { renderAppearanceBootScript } from './appearance.js'
 import { documentTitle } from './document-title.js'
@@ -224,7 +224,8 @@ export function renderBackground(background) {
  * @param {Block} block - Block instance to render
  * @param {Object} [options]
  * @param {string|null} [options.as='section'] - Wrapper element tag, or null/false for bare mode
- * @param {boolean} [options.stickySelf] - whether a sticky section's own wrapper sticks (in the body)
+ * @param {'section'|'child'|boolean} [options.stickySelf] - whether a sticky section's own wrapper
+ *   is the box that sticks: a body section's (`'section'`), or a child section's (`'child'`)
  * @returns {React.ReactElement}
  */
 export function renderBlock(block, { as = 'section', stickySelf = false } = {}) {
@@ -267,9 +268,12 @@ export function renderBlock(block, { as = 'section', stickySelf = false } = {})
   // Section mode: full treatment with wrapper, context classes, background.
   const { background, ...wrapperProps } = getWrapperProps(block)
 
-  // In the body, a sticky section's wrapper is the box that stays in view (`sticky.js`).
-  const sticky = stickySelf ? sectionStickyStyle(block) : null
-  if (sticky) wrapperProps.style = { ...wrapperProps.style, ...sticky }
+  // A body section's wrapper, or a child section's, is the box that stays in view (`sticky.js`).
+  const sticky = sectionStickyProps(block, stickySelf)
+  if (sticky) {
+    wrapperProps.style = { ...wrapperProps.style, ...sticky.style }
+    wrapperProps['data-uw-sticky'] = sticky['data-uw-sticky']
+  }
 
   // Merge Component.className (static classes declared on the component function)
   const componentClassName = Component.className
@@ -347,11 +351,11 @@ export function renderLayout(page, website) {
   const sticky = layoutStickiness(areas)
   const layers = resolveLayoutLayers(areaNames, layoutMeta?.layers, sticky)
   const wrapArea = (name, element) => {
-    const style = areaWrapperStyle(name, transitions, layers, RemoteLayout ? sticky[name] : null)
-    return style ? React.createElement('div', { style }, element) : element
+    const props = areaWrapperProps(name, transitions, layers, RemoteLayout ? sticky[name] : null)
+    return props ? React.createElement('div', props, element) : element
   }
 
-  const bodyElement = bodyBlocks ? wrapArea('body', renderBlocks(bodyBlocks, { stickySelf: true })) : null
+  const bodyElement = bodyBlocks ? wrapArea('body', renderBlocks(bodyBlocks, { stickySelf: 'section' })) : null
   const areaElements = {}
   for (const [name, blocks] of Object.entries(areas)) {
     areaElements[name] = wrapArea(name, renderBlocks(blocks))
@@ -369,7 +373,7 @@ export function renderLayout(page, website) {
   // The built-in layout — the browser's own copy, not a mirror of it (`default-layout.js`).
   // ⛔ Until 2026-10-07 this wrote its own, with no full-height column, so the prerendered
   // page differed from the one the browser renders over it.
-  const zone = (name) => (sticky[name] ? stickyStyle(sticky[name].top, layers?.[name]) : null)
+  const zone = (name) => zoneProps(sticky[name], layers?.[name])
   return React.createElement(DefaultLayout, {
     body: bodyElement,
     ...areaElements,
@@ -461,7 +465,7 @@ export function initPrerender(content, foundation, extensionsOrOptions, maybeOpt
     const blockList = blocks || from?.childBlocks || []
     return blockList.map((childBlock, index) =>
       React.createElement(React.Fragment, { key: childBlock.id || index },
-        renderBlock(childBlock, { as: wrapAs || null })
+        renderBlock(childBlock, { as: wrapAs || null, stickySelf: wrapAs ? 'child' : false })
       )
     )
   }

package/src/sticky-check.js

@@ -13,7 +13,14 @@
  *     The layout makes its element sticky when `page.isSticky(area)`.
  *
  * Table parts are left out: a sticky table header cell sticks within its table, though its row is
- * no taller than it 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 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,
+ * and the box does not scroll, so it never moves. Components clip for rounded corners; the
+ * warning names `overflow: clip`, which clips and keeps it sticking. A box that really scrolls
+ * (a layout's own scrolling `<main>`) is the element's scroller, and is left alone.
  */
 
 const warned = new WeakSet()
@@ -43,6 +50,28 @@ export function canStick(el) {
   return (vertical && room.height > own.height + 0.5) || (horizontal && room.width > own.width + 0.5)
 }
 
+/**
+ * The box a sticky element would stick to in place of the page, because it clips its overflow
+ * without scrolling — or null. Looks no further than the nearest box with an overflow of its own:
+ * one that scrolls is the element's scroller, which is fine. Stops below `<body>`, whose overflow
+ * is the viewport's.
+ *
+ * @param {Element} el
+ * @returns {Element|null}
+ */
+export function clippingAncestor(el) {
+  const doc = el.ownerDocument
+  for (let node = el.parentElement; node && node !== doc?.body && node !== doc?.documentElement; node = node.parentElement) {
+    const { overflowX, overflowY } = getComputedStyle(node)
+    if (overflowY === 'visible' || overflowY === 'clip') continue
+    if (overflowY === 'hidden') return node
+    // `auto` / `scroll`: a scroller — unless it is only `overflow-x: hidden`'s side effect.
+    const scrolls = node.scrollHeight > node.clientHeight + 1
+    return overflowX === 'hidden' && !scrolls ? node : null
+  }
+  return null
+}
+
 /**
  * Warn, once per element, about each sticky element on the page that cannot move.
  *
@@ -53,7 +82,20 @@ export function warnUnmovableSticky(doc = globalThis.document) {
   if (!doc?.body || typeof requestAnimationFrame !== 'function') return () => {}
   const frame = requestAnimationFrame(() => {
     for (const el of doc.body.querySelectorAll('*')) {
-      if (warned.has(el) || getComputedStyle(el).position !== 'sticky' || canStick(el)) continue
+      if (warned.has(el) || getComputedStyle(el).position !== 'sticky') continue
+      const clip = clippingAncestor(el)
+      if (clip) {
+        warned.add(el)
+        console.warn(
+          '[uniweb] This element is sticky but sits in a box that clips its overflow (`overflow: hidden`, ' +
+            'or `overflow-x: hidden`), so it sticks to that box, which does not scroll, and never moves. ' +
+            'Clip with `overflow: clip` instead: it clips the same and keeps the element sticking.',
+          el,
+          clip,
+        )
+        continue
+      }
+      if (el.getAttribute('data-uw-sticky') === 'child' || canStick(el)) continue
       warned.add(el)
       console.warn(
         '[uniweb] This element is sticky but cannot move: its parent is no taller than it is, so it ' +

package/src/sticky-top.js

@@ -0,0 +1,100 @@
+/**
+ * `--uw-sticky-top` — how far down the viewport the page's stuck chrome reaches.
+ *
+ * A sticky section with no `top` of its own stays in view below it (`sticky.js`), and kit's
+ * anchors land below it — a heading a contents rail scrolls to, a figure a cross-reference links
+ * to. Browser-only, run by `components/Layout.jsx`: only a browser knows a box's height, and the
+ * height is all that varies — a header that wraps on a phone, an announcement bar above it.
+ *
+ * ⭐ A MEASUREMENT THE PRERENDER DOES NOT NEED. The offset matters only once something is stuck,
+ * which takes scrolling; by then the browser has rendered and measured. A prerendered page, and
+ * one read without scripts, keep the variable's fallback.
+ *
+ * WHAT COUNTS: each box the runtime made sticky for an area (`data-uw-sticky="area"`) that comes
+ * before the body and spans over it — a header — but not one that follows it (a footer that
+ * sticks never reaches the top) or sits beside it (a rail stuck at the top covers no content). It
+ * 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).
+ */
+
+const VARIABLE = '--uw-sticky-top'
+const FOLLOWING = 4 // Node.DOCUMENT_POSITION_FOLLOWING
+
+/**
+ * The body's sections, by their Block — noted by `components/BlockRenderer.jsx` — so the
+ * measurement finds the body by the block it rendered, never by an id: a header's section and a
+ * body's can carry the same one.
+ */
+const bodySections = new WeakMap()
+
+/** Note (or forget, with `null`) the element a body section rendered into. */
+export function noteBodySection(block, element) {
+  if (!block) return
+  if (element) bodySections.set(block, element)
+  else bodySections.delete(block)
+}
+
+/** The element a body section rendered into, or null. */
+export function bodySectionOf(block) {
+  return (block && bodySections.get(block)) || null
+}
+
+/**
+ * How far down the viewport the stuck chrome over the body reaches, in px — 0 when none does.
+ *
+ * @param {Document} doc
+ * @param {Element|null} body - the body's first section
+ * @returns {number}
+ */
+export function measureStickyTop(doc, body) {
+  if (!body) return 0
+  const over = body.getBoundingClientRect()
+  let reach = 0
+  for (const box of doc.querySelectorAll('[data-uw-sticky="area"]')) {
+    if (box.contains(body)) continue
+    if (!(box.compareDocumentPosition(body) & FOLLOWING)) continue // the body comes first: a footer
+    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)
+  }
+  return Math.round(reach * 100) / 100
+}
+
+/**
+ * Keep `--uw-sticky-top` on the root element as the page's stuck chrome changes size, and remove
+ * it when nothing over the body sticks.
+ *
+ * @param {Document} doc
+ * @param {Element|null} body - the body's first section
+ * @returns {() => void} stops watching, and removes the variable
+ */
+export function watchStickyTop(doc, body) {
+  const root = doc?.documentElement
+  if (!root) return () => {}
+
+  const apply = () => {
+    const reach = measureStickyTop(doc, body)
+    if (reach > 0) root.style.setProperty(VARIABLE, `${reach}px`)
+    else root.style.removeProperty(VARIABLE)
+  }
+  apply()
+
+  const View = doc.defaultView
+  if (!body || typeof View?.ResizeObserver !== 'function') {
+    return () => root.style.removeProperty(VARIABLE)
+  }
+  let frame = 0
+  const observer = new View.ResizeObserver(() => {
+    View.cancelAnimationFrame(frame)
+    frame = View.requestAnimationFrame(apply)
+  })
+  observer.observe(body)
+  for (const box of doc.querySelectorAll('[data-uw-sticky="area"]')) observer.observe(box)
+  return () => {
+    View.cancelAnimationFrame(frame)
+    observer.disconnect()
+    root.style.removeProperty(VARIABLE)
+  }
+}

package/src/sticky.js

@@ -10,22 +10,44 @@
  * defaulted by its type's `meta.js` — and the runtime makes sticky the box that can:
  *
  *   - in the body, the section's own wrapper, whose parent, the body, spans every section;
+ *   - a child section rendered as a section (`<ChildBlocks wrapAs>`, kit's `ChildGrid`), its own
+ *     wrapper too, which then stays in view within the box its parent places it in — in
+ *     `ChildGrid`, its cell, as tall as the row — and no further. Top-aligned, so a flex or grid
+ *     item has room. At one column (a phone) a child is its own row and does not stick, which is
+ *     what a side panel stacked under the content should do;
  *   - in any other area, the area's box when any of its sections is sticky: the zone, in the
  *     built-in layout; the area wrapper, in a foundation's layout. That box takes the area's
  *     layer, and a sticky area's layer is above every area that scrolls under it
  *     (`resolveLayoutLayers`).
  *
+ * ⭐ A section stays in view BELOW what is stuck at the top. A sticky area sticks at `0px`; a
+ * sticky section with no `top` of its own sticks at `--uw-sticky-top`, how far down the page's
+ * stuck chrome reaches, which the browser measures (`sticky-top.js`) — so a side panel or a
+ * sub-navigation clears a stuck header whatever its height. Unmeasured — a prerendered page
+ * before the browser runs, a page with nothing stuck — it is `0px`.
+ *
+ * Every box this module makes sticky says so, `data-uw-sticky` = `area`, `section` or `child`,
+ * for what reads them in the browser: the measurement, and `uniweb dev`'s check
+ * (`sticky-check.js`).
+ *
  * ⛔ A layout that wraps an area in an element of its own confines the area wrapper, as the zone
  * does in the built-in layout. That element is the layout's, so the layout makes it sticky, when
  * `page.isSticky(area)`.
  *
  * ⛔ Until 2026-10-19 there was no setting, and a header's own `sticky top-0` — the starter
- * templates' — scrolled away with the page.
+ * templates' — scrolled away with the page. Until 2026-10-20 a child section's setting did
+ * nothing, and a sticky section stuck at `0px`, under a stuck header.
  */
 
-/** The very top of the viewport — a sticky box with no `top` of its own. */
+/** The very top of the viewport — a sticky area with no `top` of its own. */
 export const STICKY_TOP = '0px'
 
+/**
+ * Where a sticky section with no `top` of its own stays: below what is stuck at the top
+ * (`sticky-top.js` measures it), else the very top.
+ */
+export const STICKY_SECTION_TOP = 'var(--uw-sticky-top, 0px)'
+
 /**
  * The style that keeps a box in view.
  *
@@ -65,12 +87,38 @@ export function layoutStickiness(areas) {
 }
 
 /**
- * The style a sticky section's own wrapper takes, in the body — or null. Layer 1, so it paints
- * over the sections after it, which are positioned only when they have a background.
+ * The props a built-in layout zone takes when its area sticks — or null.
+ *
+ * @param {{ top: string }|null|undefined} stickiness - the area's (`areaStickiness`)
+ * @param {number|null} [layer] - the area's layer (`resolveLayoutLayers`)
+ * @returns {{ style: Object, 'data-uw-sticky': 'area' }|null}
+ */
+export function zoneProps(stickiness, layer) {
+  return stickiness ? { style: stickyStyle(stickiness.top, layer), 'data-uw-sticky': 'area' } : null
+}
+
+/**
+ * The style a sticky section's own wrapper takes — a body section's, or a child section's — or
+ * null. Below what is stuck at the top unless its type says how far down; layer 1, so it paints
+ * over the sections after it, which are positioned only when they have a background; and
+ * top-aligned, so that as a flex or grid item it is not stretched to the row, which would leave
+ * it no room to move (in normal flow `align-self` does nothing).
  *
  * @param {Object} block - its component initialized
  * @returns {Object|null}
  */
 export function sectionStickyStyle(block) {
-  return block?.sticky ? stickyStyle(block.stickyTop, 1) : null
+  return block?.sticky ? { ...stickyStyle(block.stickyTop || STICKY_SECTION_TOP, 1), alignSelf: 'start' } : null
+}
+
+/**
+ * What a section's wrapper adds when it sticks: its style, and which kind of box it is.
+ *
+ * @param {Object} block - its component initialized
+ * @param {'section'|'child'|boolean} kind - a body section (`true` reads as one), or a child section
+ * @returns {{ style: Object, 'data-uw-sticky': string }|null}
+ */
+export function sectionStickyProps(block, kind) {
+  const style = kind ? sectionStickyStyle(block) : null
+  return style ? { style, 'data-uw-sticky': kind === 'child' ? 'child' : 'section' } : null
 }