@uniweb/runtime 1.2.13 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/runtime",
-  "version": "1.2.13",
+  "version": "1.3.0",
   "description": "Minimal runtime for loading Uniweb foundations",
   "type": "module",
   "exports": {
@@ -36,15 +36,15 @@
     "node": ">=22.12"
   },
   "dependencies": {
-    "@uniweb/theming": "~1.2.1",
-    "@uniweb/core": "~1.4.12"
+    "@uniweb/core": "~1.5.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.10.14"
+    "@uniweb/build": "1.12.2"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/area-wrappers.js

@@ -2,11 +2,19 @@
  * What the runtime puts on a layout-area wrapper.
  *
  * When a foundation enables view transitions (the default), the runtime gives
- * each layout region a `view-transition-name` so the browser animates them
- * independently — persistent chrome (header, sidebar, footer) morphs in place
- * while the body crossfades. Without per-region names the browser falls back to
- * a single full-page crossfade, which makes the whole layout (chrome included)
- * flicker on every navigation.
+ * each layout area a `view-transition-name` so the browser animates it on its
+ * own — persistent chrome (header, sidebar, footer) morphs in place while
+ * everything else, the body included, crossfades as the page. With no names the
+ * whole layout (chrome included) would flicker on every navigation.
+ *
+ * ⛔ **The body takes no name by default, which is what keeps a phone usable.** A
+ * named element is captured as one image. WebKit captures it whole, off-screen part
+ * included, at device resolution, painting every filter in it on the main thread; the
+ * page itself is captured at the size of the viewport. Measured 2026-10-30 on a live
+ * site, in WebKit on a 3× phone viewport with a desktop CPU: a named body was a
+ * 1179 × 22710 capture, 107 MB against 9 MB, and a tap stalled the main thread for up to
+ * 842 ms, against 271 ms with no name. Chromium did not stall at all. On an iPhone, that
+ * site froze for about 30 s on a tap. The body still crossfades, with the page.
  *
  * Naming is only half of it. A `view-transition-name` **makes its element a
  * stacking context**, so the moment the runtime adds these wrappers it has
@@ -41,13 +49,14 @@ const toIdent = (name) => NS + String(name).replace(/[^a-zA-Z0-9_-]/g, '-')
 /**
  * Build the effective view-transition-name map for a layout.
  *
- * Default: every rendered area plus the implicit `body` gets a stable,
- * namespaced name (`uw-<area>`, `uw-body`). Same-named areas across layouts
- * therefore share a name and morph between layouts automatically.
+ * Default: every rendered area gets a stable, namespaced name (`uw-<area>`), so
+ * same-named areas across layouts share a name and morph between layouts
+ * automatically. The body gets none and crossfades as the page (the header above).
  *
  * The layout's `meta.js` `transitions` value overrides this:
  *   - an object overrides per region (`{ left: 'sidebar' }` to group across
- *     layouts, or `{ left: null }` to opt one region out);
+ *     layouts, `{ left: null }` to opt one region out, or `{ body: 'main' }` for a
+ *     body that morphs between layouts, which WebKit captures whole);
  *   - `false` opts the whole layout out (back to the full-page crossfade).
  *
  * @param {string[]} areaNames - Names of the areas rendered for this page (excludes `body`).
@@ -58,7 +67,7 @@ const toIdent = (name) => NS + String(name).replace(/[^a-zA-Z0-9_-]/g, '-')
 export function resolveLayoutTransitions(areaNames, explicit) {
   if (explicit === false) return null
 
-  const transitions = { body: toIdent('body') }
+  const transitions = {}
   for (const name of areaNames) transitions[name] = toIdent(name)
 
   return explicit ? { ...transitions, ...explicit } : transitions
@@ -169,6 +178,7 @@ export function areaWrapperStyle(region, transitions, layers, sticky = null) {
 
   const name = transitions?.[region]
   if (name) style.viewTransitionName = name
+  else if (transitions && region === 'body') style.isolation = 'isolate'
 
   const layer = layers?.[region]
   if (sticky) {

package/src/components/BlockRenderer.jsx

@@ -139,8 +139,8 @@ export default function BlockRenderer({ block, as = 'section', stickySelf = fals
 
   // Build content and params with runtime guarantees.
   // prepareProps handles the full pipeline: entity data merge onto
-  // block.parsedContent.data, foundation content handler invocation,
-  // guaranteed content structure, schema application, and param defaults.
+  // block.parsedContent.data, foundation data and content handlers,
+  // param defaults, guaranteed content structure, and the props handler.
   // See prepare-props.js for the pipeline details.
   const prepared = prepareProps(block, meta, entityData)
   const params = prepared.params

package/src/components/Layout.jsx

@@ -86,8 +86,8 @@ export default function Layout({ page, website }) {
   // Pre-render each area as React elements.
   // When the foundation enables view transitions, wrap areas in thin divs with
   // view-transition-name so the browser can animate them independently. Names
-  // default to one per area + body (see resolveLayoutTransitions); the layout's
-  // `transitions` meta overrides or opts out.
+  // default to one per area and none for the body (see resolveLayoutTransitions);
+  // the layout's `transitions` meta overrides or opts out.
   const areaNames = Object.keys(areas)
   const transitions = website.viewTransitions
     ? resolveLayoutTransitions(areaNames, layoutMeta?.transitions)

package/src/ssr-renderer.js

@@ -157,8 +157,8 @@ export function renderBlock(block, { as = 'section', stickySelf = false } = {})
 
   // Build content and params with runtime guarantees.
   // prepareProps handles the full pipeline: entity data merge,
-  // foundation content handler invocation, guaranteed content
-  // structure, schema application, and param defaults.
+  // foundation data and content handlers, param defaults, guaranteed
+  // content structure, and the props handler.
   // See prepare-props.js for the pipeline details.
   const prepared = prepareProps(block, meta, entityData)
   const params = prepared.params
@@ -247,7 +247,7 @@ export function renderLayout(page, website) {
     for (const block of blocks || []) block.initComponent()
   }
 
-  // Mirror Layout.jsx: wrap body + each area in a thin div carrying its
+  // Mirror Layout.jsx: wrap the body and each area in a thin div, an area's carrying its
   // view-transition-name, so the prerendered HTML matches the page the SPA renders
   // in its place and the browser can animate regions independently on client navigation.
   const areaNames = Object.keys(areas)