@symbo.ls/brender 3.14.663 → 3.14.665

package/render.js

@@ -4,13 +4,16 @@ import { resolvePackageEntry } from './packageEntry.js'
 import { tmpdir } from 'os'
 import { randomBytes } from 'crypto'
 import { createRequire } from 'module'
+import { pathToFileURL } from 'url'
 import { createEnv } from './env.js'
 import { resetKeys, assignKeys, mapKeysToElements } from './keys.js'
 import { extractMetadata, generateHeadHtml } from './metadata.js'
 import { hydrate } from './hydrate.js'
 import { composeIntoShell } from './shell.js'
-import { prefetchPageData, injectPrefetchedState, fetchSSRTranslations } from './prefetch.js'
+import { fetchSSRTranslations } from './prefetch.js'
 import { createEarlySeedScript } from '@symbo.ls/fetch'
+import { headerEntries } from '@symbo.ls/fetch/rest'
+import { brenderRegistryBlock, escapeRegExp, jsonForScript, polyglotFallbackLang } from '@symbo.ls/utils'
 
 // funcql plugin — enables evaluation of funcql schemas as property values
 // during SSR. Async-imported to avoid polluting non-funcql codepaths.
@@ -26,6 +29,7 @@ const getFuncqlPlugin = async () => {
   }
 }
 import { parseHTML } from 'linkedom'
+import { createEarlySeedBlock } from '@symbo.ls/fetch'
 import { css, injectGlobal, reset as resetCss } from '@symbo.ls/css'
 
 // Lightweight SSR polyglot functions — resolve translations from context
@@ -43,17 +47,17 @@ const ssrResolve = (map, key) => {
   return v
 }
 
-const ssrTranslate = function (key, lang) {
-  if (!key) return ''
-  const ctx = this?.context
-  const poly = ctx?.polyglot
-  // Default lang fallback must match the polyglot plugin's contract
-  // (`'en'`) — when a project doesn't set polyglot.defaultLang, SSR was
-  // resolving against KA translations while client hydrate resolved
-  // against EN, producing different text in the SSR shell vs the
-  // hydrated DOM. See plugins/polyglot/index.js:41.
-  const activeLang = lang || poly?.defaultLang || 'en'
-
+// The language a server render shows: the root state's — a page under a
+// language prefix sets it (a router guard reading `/en/…`) — else the
+// project's default, else 'en' (@symbo.ls/utils polyglotFallbackLang, the
+// order plugins/polyglot getActiveLang resolves it in). Diverging produces
+// SSR/hydrate text mismatches.
+const activeLangOf = (root, poly) => polyglotFallbackLang(root?.lang, poly)
+
+// One label lookup, the order the client's translate() reads: static
+// translations, then the labels loaded into the root state, then the
+// default language's static ones. `undefined` when no table has the key.
+const findLabel = (key, activeLang, poly, root) => {
   // Static translations from context.polyglot.translations
   if (poly?.translations) {
     const langMap = poly.translations[activeLang]
@@ -64,7 +68,6 @@ const ssrTranslate = function (key, lang) {
   }
 
   // Server-loaded translations in root state
-  const root = this?.state?.root || ctx?.state?.root
   if (root?.translations) {
     const langMap = root.translations[activeLang]
     if (langMap) {
@@ -74,7 +77,7 @@ const ssrTranslate = function (key, lang) {
   }
 
   // Fallback to default lang
-  const defaultLang = poly?.defaultLang || 'en'
+  const defaultLang = polyglotFallbackLang(undefined, poly)
   if (defaultLang !== activeLang && poly?.translations) {
     const fallback = poly.translations[defaultLang]
     if (fallback) {
@@ -82,15 +85,30 @@ const ssrTranslate = function (key, lang) {
       if (val !== undefined) return val
     }
   }
+  return undefined
+}
 
+const ssrTranslate = function (key, lang) {
+  if (!key) return ''
+  const ctx = this?.context
+  const poly = ctx?.polyglot
+  const root = this?.state?.root || ctx?.state?.root
+  // The ROOT's language, as the client's translate() asks getActiveLang.
+  // This used to read `poly.defaultLang` straight, so a page rendered for
+  // /en/about had `en` in its state and Georgian text in its markup
+  // (xma.info report, brender build item 8).
+  const val = findLabel(key, lang || activeLangOf(root, poly), poly, root)
+  if (val !== undefined) return val
+  // A key with no label yet. The labels may still be on their way (a
+  // project's own polyglot.fetch loads them during the render), so this only
+  // notes the key; the end of the render checks it again (see rawLabelKeys).
+  const diag = liveRecord(DIAG)
+  if (poly && diag) diag.labelKeys.add(key)
   return key
 }
 
 const ssrGetActiveLang = function () {
-  const ctx = this?.context
-  // 'en' matches plugins/polyglot/index.js#getActiveLang — diverging here
-  // produces SSR/hydrate text mismatches.
-  return this?.state?.root?.lang || ctx?.polyglot?.defaultLang || 'en'
+  return activeLangOf(this?.state?.root, this?.context?.polyglot)
 }
 
 // Deep clone that preserves functions and avoids circular refs
@@ -290,18 +308,10 @@ const bundleCreateDomql = async () => {
 
   const ws = detectWorkspace()
 
-  if (!_brenderRequire) {
-    try {
-      _cachedCreateDomql = await importSmblsSsr()
-      return _cachedCreateDomql
-    } catch (err) {
-      throw new Error(`brender: ${SMBLS_SSR_SPECIFIER} is not available in this bundled runtime (${err.message}). Bundle smbls ≥ the release that adds the smbls/ssr export alongside @symbo.ls/brender.`)
-    }
-  }
-
-  // Resolve entry point
+  // Resolve entry point: the monorepo's source, else `smbls/ssr` (one import
+  // for both a bundled runtime and an installed smbls).
   let entry
-  if (ws.isMonorepo) {
+  if (_brenderRequire && ws.isMonorepo) {
     entry = resolve(ws.monorepoRoot, 'packages', 'smbls', 'src', 'createDomql.js')
   } else {
     let ssrError
@@ -311,6 +321,9 @@ const bundleCreateDomql = async () => {
     } catch (err) {
       ssrError = err
     }
+    if (!_brenderRequire) {
+      throw new Error(`brender: ${SMBLS_SSR_SPECIFIER} is not available in this bundled runtime (${ssrError.message}). Bundle smbls ≥ the release that adds the smbls/ssr export alongside @symbo.ls/brender.`)
+    }
     // Legacy: an smbls that predates the ssr entry but still ships its source.
     const srcEntry = ws.smblsRoot && resolve(ws.smblsRoot, 'src', 'createDomql.js')
     if (srcEntry && existsSync(srcEntry)) {
@@ -329,9 +342,44 @@ const bundleCreateDomql = async () => {
 
   const tryResolve = resolvePackageEntry
 
+  // In the monorepo, every workspace specifier the handlers below do not own
+  // — a SUBPATH of a sibling (`@symbo.ls/dropdown/components`,
+  // `@symbo.ls/sync/applier`, `@symbo.ls/utils/function.js`) and an unscoped
+  // sibling (`attrs-in-props`) — resolves to its source through the map the
+  // test runner and smbls's own build resolve with
+  // (scripts/vite-workspace-source.mjs). They fell through to esbuild, which
+  // followed each package's `exports` into its dist/: a render ran whatever
+  // build was left on disk (the legacy Dropdown kit of an earlier build, a
+  // sync applier without the exports createDomql imports now), and a
+  // checkout without dist/ could not render at all. A dist input now fails
+  // the bundle.
+  const workspaceSource = ws.isMonorepo
+    ? await import(pathToFileURL(resolve(ws.monorepoRoot, 'scripts', 'vite-workspace-source.mjs')).href)
+    : null
+  const workspaceNames = workspaceSource
+    ? new Set(workspaceSource.workspacePackageRoots().map((dir) => workspaceSource.workspacePackageAt(dir).name))
+    : null
+  // Bare specifiers the handlers below resolve themselves (the sync stub
+  // among them).
+  const OWN_HANDLERS = /^(?:smbls(?:\/.*)?|domql|css-in-props(?:\/.*)?|@symbo\.ls\/[^/]+)$/
+
   const workspacePlugin = {
     name: 'workspace-resolve',
     setup (build) {
+      if (workspaceSource) {
+        build.onResolve({ filter: /^[^./]/ }, (args) => {
+          if (OWN_HANDLERS.test(args.path)) return
+          const parts = args.path.split('/')
+          const name = args.path.startsWith('@') ? parts.slice(0, 2).join('/') : parts[0]
+          if (!workspaceNames.has(name)) return
+          const source = workspaceSource.resolveWorkspaceSource(args.path, args.importer || entry)
+          if (source) return { path: source }
+          return { errors: [{ text: `"${args.path}" names no source file in the workspace` }] }
+        })
+        build.onLoad({ filter: /[\\/]dist[\\/]/ }, (args) => workspaceSource.isWorkspaceDist(args.path)
+          ? { errors: [{ text: `${args.path} is a BUILD of a workspace package — the render bundles source` }] }
+          : undefined)
+      }
       // Resolve smbls bare import
       build.onResolve({ filter: /^smbls/ }, (args) => {
         const subpath = args.path.replace(/^smbls\/?/, '')
@@ -630,25 +678,31 @@ const UIKIT_STUBS = {
  *
  * The registry is serialized into the pre-rendered HTML so the browser can
  * assign the correct brKey to each skeleton element during true hydration.
+ * A path is @symbo.ls/element elementPath — the very function the hydrating
+ * client looks each element up with (adoptHydrationNode), so the two sides
+ * cannot spell a path differently. One flat object, filled in place (the
+ * recursive walk merged a fresh object per element into its parent's).
  */
-const buildPathRegistry = (element, path = '') => {
-  if (!element || !element.__ref) return {}
+const buildPathRegistry = (element, elementPath) => {
   const registry = {}
+  walkElements(element, (el, ref) => {
+    if (!ref.__brKey) return
+    const path = elementPath(el)
+    registry[path === '' ? '__root' : path] = ref.__brKey
+  })
+  return registry
+}
 
-  const brKey = element.__ref.__brKey
-  if (brKey) registry[path === '' ? '__root' : path] = brKey
-
-  if (element.__ref.__children) {
-    for (const childKey of element.__ref.__children) {
-      const child = element[childKey]
-      if (child && child.__ref) {
-        const childPath = path === '' ? childKey : `${path}.${childKey}`
-        Object.assign(registry, buildPathRegistry(child, childPath))
-      }
-    }
+// Every element of a rendered tree, each before its children, in the order of
+// `__ref.__children`.
+const walkElements = (root, visit) => {
+  const walk = (el) => {
+    const ref = el && el.__ref
+    if (!ref) return
+    visit(el, ref)
+    if (ref.__children) for (const childKey of ref.__children) walk(el[childKey])
   }
-
-  return registry
+  walk(root)
 }
 
 /**
@@ -666,6 +720,15 @@ const buildPathRegistry = (element, path = '') => {
  * @param {object} [options.context] - Additional context overrides
  * @returns {Promise<{ html: string, metadata: object, registry: object, element: object }>}
  */
+// The payload keys render() puts on the context itself (below `ctx`): the
+// generic copy of every other top-level key skips them — cloning one only for
+// the explicit key to replace it was a deep clone of `functions`, `methods`
+// and `files` thrown away on every render.
+const CONTEXT_KEYS_SET_BELOW = new Set([
+  'app', 'config', 'pages', 'components', 'state', 'snippets', 'designSystem', 'dependencies',
+  'functions', 'methods', 'files', 'sharedLibraries'
+])
+
 // ── In-flight request tracking (the post-create flush) ──────────────────────
 // The render's flush waits for the requests a page starts while it renders
 // (fetch plugin, SDK, project code — all end in globalThis.fetch). One
@@ -692,20 +755,75 @@ const inFlightRequests = () => _inFlight
 const SEED_ENTRY_MAX = 256 * 1024
 const SEED_TOTAL_MAX = 1024 * 1024
 const SEED_HEADERS_OK = new Set(['accept-language', 'accept'])
-let _activeRenders = 0
-let _seed = null
+const SEED = { renders: 0, record: null }
+// ── What went wrong in a render (its diagnostics) ───────────────────────────
+// Kept like the seed — one record while exactly ONE render runs, tainted by
+// an overlapping one — so a build can tell a page made from data from a page
+// made from nothing: the requests that failed (a non-ok status or a network
+// error) and the label keys that missed (ssrTranslate notes them; the end of
+// the render checks them again, see rawLabelKeys). A build with its database
+// unreachable printed "✓ 22 of 22 routes" and exited 0 while every page
+// carried raw keys (xma.info report, brender build item 9).
+const DIAG_FAILURES_MAX = 50
+const DIAG = { renders: 0, record: null }
+
+// One record per window of overlapping renders (the seed's and the
+// diagnostics' windows open at different points of a render, so each has its
+// own slot): the first render of a window opens it, a render that overlaps it
+// taints it — another project's answers or failures must never land in this
+// page — and it goes as soon as one of the renders holding it ends. A render
+// that starts inside a window whose record is gone gets none.
+const openRenderRecord = (slot, make) => {
+  slot.renders++
+  if (slot.renders === 1) slot.record = make()
+  else if (slot.record) slot.record.tainted = true
+  const record = slot.record
+  const close = () => {
+    slot.renders--
+    if (slot.record === record) slot.record = null
+  }
+  return { record, close }
+}
+
+// The slot's record while it is the only render's, else null.
+const liveRecord = (slot) => slot.record && !slot.record.tainted ? slot.record : null
+
+// A request as a diagnostic names it: origin and path. The query is left out
+// — a public read can carry its key there (`?apikey=…`), and a log line is no
+// place for one.
+const requestLabel = (url) => {
+  try {
+    const u = new URL(url)
+    return u.origin + u.pathname
+  } catch {
+    return String(url).split('?')[0]
+  }
+}
+
+const recordFailure = (diag, url, reason) => {
+  if (!diag || diag.tainted || diag.failures.length >= DIAG_FAILURES_MAX) return
+  diag.failures.push({ url: requestLabel(url), reason })
+}
+
+// The URL a fetch() call asks for: a Request's own, else its input as text.
+const requestUrl = (input) =>
+  input && typeof input === 'object' && typeof input.url === 'string' ? input.url : String(input)
 
 const requestShape = (args) => {
   const [input, init] = args
   const isRequest = input && typeof input === 'object' && typeof input.url === 'string'
-  const url = isRequest ? input.url : String(input)
+  const url = requestUrl(input)
   const method = String((init && init.method) || (isRequest && input.method) || 'GET').toUpperCase()
   const headers = {}
+  // Any fetch HeadersInit, read like the REST adapter reads one (headerEntries).
+  // A plain object's null / undefined value is no header.
   const add = (h) => {
     if (!h) return
-    if (typeof h.forEach === 'function' && !Array.isArray(h)) h.forEach((v, k) => { headers[String(k).toLowerCase()] = String(v) })
-    else if (Array.isArray(h)) for (const [k, v] of h) headers[String(k).toLowerCase()] = String(v)
-    else for (const k in h) if (h[k] != null) headers[k.toLowerCase()] = String(h[k])
+    const plain = !Array.isArray(h) && typeof h.entries !== 'function'
+    for (const [k, v] of headerEntries(h)) {
+      if (plain && v == null) continue
+      headers[String(k).toLowerCase()] = String(v)
+    }
   }
   if (isRequest) add(input.headers)
   if (init) add(init.headers)
@@ -734,7 +852,8 @@ const trackFetches = () => {
     const done = () => { if (!settled) { settled = true; _inFlight-- } }
     // a pending body read counts as in flight: the flush waits for it too
     const track = (promise) => { _inFlight++; promise.then(() => { _inFlight-- }, () => { _inFlight-- }) }
-    const seed = _seed && !_seed.tainted ? _seed : null
+    const seed = liveRecord(SEED)
+    const diag = liveRecord(DIAG)
     let shape = null
     if (seed) {
       try {
@@ -743,18 +862,24 @@ const trackFetches = () => {
           Object.keys(shape.headers).some((h) => !SEED_HEADERS_OK.has(h))) shape = null
       } catch { shape = null }
     }
+    const urlOf = () => requestUrl(args[0])
     let result
     try {
       result = inner.apply(this, args)
     } catch (err) {
+      recordFailure(diag, urlOf(), (err && err.message) || 'failed')
       done()
       throw err
     }
     if (result && typeof result.then === 'function') {
       result.then((response) => {
         if (shape) recordAnswer(seed, shape, response, track)
+        if (diag && response && response.ok === false) recordFailure(diag, urlOf(), 'HTTP ' + response.status)
         done()
-      }, done)
+      }, (err) => {
+        recordFailure(diag, urlOf(), (err && err.message) || 'network error')
+        done()
+      })
     } else done()
     return result
   }
@@ -769,9 +894,14 @@ const trackFetches = () => {
 // (@symbo.ls/fetch createEarlySeedScript). Default off everywhere — a page
 // without these keeps the fresh client render.
 // FW-BRENDER-HYDRATION-AND-CF-DEPLOY-PROVIDER-1.
-export const adoptionScripts = ({ brRegistry, fetchSeed } = {}) => {
+// `hydrateFlag: false` — the registry alone, for a client that replaces the
+// server DOM but still reads the registry (renderPage's default ISR path). It
+// inlined its own JSON.stringify there, without the `<` escape, so an element
+// key carrying `</script>` closed the tag.
+export const adoptionScripts = ({ brRegistry, fetchSeed, hydrateFlag = true } = {}) => {
   if (!brRegistry || !Object.keys(brRegistry).length) return ''
-  const registry = JSON.stringify(brRegistry).replace(/</g, '\\u003c')
+  const registry = jsonForScript(brRegistry)
+  if (!hydrateFlag) return `<script>window.__BR_REGISTRY__=${registry}</script>`
   return `<script>window.__BR_REGISTRY__=${registry};window.__BRENDER_HYDRATE__=true</script>` +
     (fetchSeed && fetchSeed.length ? '\n' + createEarlySeedScript(fetchSeed) : '')
 }
@@ -781,55 +911,35 @@ export const render = async (data, options = {}) => {
   // pathname is the actual URL path (e.g. /podcast/abc-123), route is the page pattern (e.g. /podcast/:id)
   const locationPath = pathname || route
 
-  // ── SSR data prefetching ──
-  // When prefetch is enabled, walk the page definition to find fetch
-  // declarations, execute them against the DB adapter, and inject
-  // the results into element state before rendering.
-  // Set up globalThis.location early so fetch params that reference
-  // window.location.pathname (e.g. to extract :id from URL) work during prefetch.
-  const _prevLocPrefetch = globalThis.location
-  const _prevWinPrefetch = globalThis.window
-  if (!globalThis.location || globalThis.location.pathname !== locationPath) {
-    globalThis.location = { pathname: locationPath, href: locationPath, search: '', hash: '', origin: '' }
-  }
-  if (!globalThis.window) {
-    globalThis.window = { location: globalThis.location }
-  }
-  let prefetchedPages
-  if (prefetch) {
-    try {
-      const pages = data.pages || {}
-      prefetchedPages = { ...pages }
-      const stateUpdates = await prefetchPageData(data, route)
-      if (stateUpdates.size) {
-        // Deep clone the page def to avoid mutating the original
-        const pageDef = JSON.parse(JSON.stringify(pages[route], (key, value) => {
-          if (typeof value === 'function') return undefined
-          return value
-        }))
-        // Re-attach functions from original
-        const copyFunctions = (src, dst) => {
-          if (!src || !dst) return
-          for (const k in src) {
-            if (typeof src[k] === 'function') {
-              dst[k] = src[k]
-            } else if (typeof src[k] === 'object' && src[k] !== null && !Array.isArray(src[k]) && typeof dst[k] === 'object' && dst[k] !== null) {
-              copyFunctions(src[k], dst[k])
-            }
-          }
-        }
-        copyFunctions(pages[route], pageDef)
-        injectPrefetchedState(pageDef, stateUpdates)
-        prefetchedPages[route] = pageDef
-      }
-    } catch (prefetchErr) {
-      console.error('[brender] Prefetch error:', prefetchErr)
-      prefetchedPages = data.pages
-    }
+  // This render's diagnostics (see `DIAG`), open before its first request.
+  trackFetches()
+  const diag = openRenderRecord(DIAG, () => ({ failures: [], labelKeys: new Set(), tainted: false }))
+  try {
+    return await renderWithDiagnostics(data, { route, locationPath, stateOverrides, contextOverrides, prefetch }, diag.record)
+  } finally {
+    diag.close()
   }
+}
+
+const renderWithDiagnostics = async (data, { route, locationPath, stateOverrides, contextOverrides, prefetch }, diag) => {
+  // The page's data is NOT fetched here. The fetch plugin runs during the
+  // render below with the real element — its `transform(data, el, state)`,
+  // its `children` re-run on the answer — and the post-create flush waits
+  // for its requests. A pre-fetch used to run every page `fetch` through a
+  // second code path: `transform(data)` without the element (a transform
+  // reading `el.call(...)` threw, so the RAW rows landed in state) and
+  // `children` functions evaluated once with a stand-in element whose
+  // call() hard-coded 'ka' and read the wrong argument, then frozen into
+  // static arrays the real answer could no longer replace — cards without
+  // titles, a calendar of NaN (xma.info report, brender build items 5, 13).
 
   // ── SSR polyglot translations ──
-  // Fetch translations from the DB so polyglot resolves during render
+  // Labels a project serves through a table/RPC (`polyglot.fetch: { rpc }`)
+  // are fetched before the render, for every language. A FUNCTION
+  // `polyglot.fetch` is the project's own loader: it runs inside the render,
+  // called by the polyglot plugin with the real root element (see
+  // fetchSSRTranslations), and its labels are read back from the root state
+  // afterwards (renderedLabels).
   let ssrTranslations
   if (prefetch) {
     try {
@@ -839,24 +949,27 @@ export const render = async (data, options = {}) => {
     }
   }
 
-  // Restore location/window before createEnv sets them properly
-  if (_prevLocPrefetch !== undefined) globalThis.location = _prevLocPrefetch
-  else delete globalThis.location
-  if (_prevWinPrefetch !== undefined) globalThis.window = _prevWinPrefetch
-  else delete globalThis.window
-
   const { window, document } = createEnv()
   const body = document.body
 
   // Set route on location so the router picks it up
   window.location.pathname = locationPath
 
-  // Set globalThis.document/location so the bundled smbls code
-  // (which uses `window = globalThis`) can access them during SSR.
-  const _prevDoc = globalThis.document
-  const _prevLoc = globalThis.location
-  globalThis.document = document
-  globalThis.location = window.location
+  // globalThis.document/location for the bundled smbls code (which uses
+  // `window = globalThis`) during SSR, and the render's own storage behind
+  // the bare `localStorage` the framework reads (smbls prepareState):
+  // polyglot persists the language a page switched to and the labels it
+  // loaded there, and one shared store handed them to the next page of the
+  // build (createEnv). Swapped by descriptor and put back however the render
+  // ends, a throw included — a host's own Web Storage global (Node's is a
+  // lazy accessor) is never read or lost.
+  const restoreGlobals = [
+    swapGlobal('document', document),
+    swapGlobal('location', window.location),
+    swapGlobal('localStorage', window.localStorage),
+    swapGlobal('sessionStorage', window.sessionStorage)
+  ]
+  try {
 
   // Import createDomqlElement via bundled smbls source.
   // The smbls monorepo uses extensionless/directory imports that Node.js ESM
@@ -889,7 +1002,7 @@ export const render = async (data, options = {}) => {
   if (ssrTranslations || polyglotConfig) {
     if (!baseState.root) baseState.root = {}
     if (polyglotConfig) {
-      baseState.root.lang = baseState.root.lang || polyglotConfig.defaultLang || 'en'
+      baseState.root.lang = polyglotFallbackLang(baseState.root.lang, polyglotConfig)
     }
     if (ssrTranslations) {
       baseState.root.translations = {
@@ -913,8 +1026,7 @@ export const render = async (data, options = {}) => {
   // build reuses. The explicit keys below still win.
   const projectContext = {}
   for (const key in data) {
-    if (key === 'app' || key === 'config' || key === 'pages' || key === 'components' ||
-      key === 'state' || key === 'snippets' || key === 'designSystem' || key === 'dependencies') continue
+    if (CONTEXT_KEYS_SET_BELOW.has(key)) continue
     const value = data[key]
     projectContext[key] = value && typeof value === 'object' ? structuredCloneDeep(value) : value
   }
@@ -926,7 +1038,7 @@ export const render = async (data, options = {}) => {
     dependencies: structuredCloneDeep(data.dependencies || {}),
     components: structuredCloneDeep(data.components || {}),
     snippets: structuredCloneDeep(data.snippets || {}),
-    pages: structuredCloneDeep(prefetchedPages || data.pages || {}),
+    pages: structuredCloneDeep(data.pages || {}),
     functions: {
       ...(data.functions || {}),
       // SSR polyglot functions — enable {{ key | polyglot }} resolution during render
@@ -949,6 +1061,11 @@ export const render = async (data, options = {}) => {
     // Disable sourcemap tracking in SSR — it causes stack overflows
     // when state contains large data arrays (articles, events, etc.)
     domqlOptions: { sourcemap: false },
+    // The server builds the page in one go: the browser boot's short tasks
+    // (smbls firstRender.js) serve input and paint, and a server has neither.
+    // smbls skips them by itself in a realm without requestAnimationFrame;
+    // this document shims it (env.js), so it says so here.
+    firstRender: false,
     // Editor/live-sync, inspector and toast plugins have no place in server
     // markup. The source-bundle path used to stub @symbo.ls/sync to no-ops at
     // bundle time; the installed `smbls/ssr` entry carries the real plugins,
@@ -958,6 +1075,19 @@ export const render = async (data, options = {}) => {
     sync: false,
     inspect: false,
     notifications: false,
+    // Every server render processes the design system the way the page's
+    // own single boot does, on a config of its own — the first render of a
+    // process used to share the global config and every later one took the
+    // iframe path, so their theme variables differed (smbls
+    // prepareDesignSystem; xma.info report, brender build item 7).
+    isolateDesignSystem: true,
+    // Every server render starts from an empty query cache (@symbo.ls/fetch
+    // enterContext). The fetch plugin's cache outlives a render, so a page
+    // rendered after another one that read the same key showed those rows
+    // without a request, and its fetch seed — recorded from requests — did
+    // not carry them: the browser asked for them again after boot (xma.info,
+    // 2026-10-16: index.html 10 seed entries, about.html 3).
+    isolateFetchCache: true,
     // Caller overrides
     ...(contextOverrides || {})
   }
@@ -973,21 +1103,19 @@ export const render = async (data, options = {}) => {
 
   resetKeys()
 
-  trackFetches()
-  // the recording of this render's answers (see `_seed`): tainted the moment
+  // the recording of this render's answers (see `SEED`): tainted the moment
   // another render overlaps it
-  _activeRenders++
-  if (_activeRenders === 1) _seed = { entries: [], bytes: 0, tainted: false }
-  else if (_seed) _seed.tainted = true
-  const seed = _seed
+  const recording = openRenderRecord(SEED, () => ({ entries: [], bytes: 0, tainted: false }))
+  const seed = recording.record
   let element
   try {
     element = await createDomqlElement(app, ctx)
 
     // Allow async operations (fetch callbacks, state updates, re-renders) to flush.
-    // DOMQL's fetch plugin fires on element creation and updates state asynchronously.
-    // With prefetch enabled, data is pre-injected but DOMQL's fetch may also fire
-    // and trigger state updates. Give enough time for these to complete.
+    // DOMQL's fetch plugin fires on element creation and updates state
+    // asynchronously — it is what loads the page's data (nothing is
+    // pre-injected) — and a function polyglot.fetch loads the labels the
+    // same way. Give enough time for these to complete.
     //
     // It used to sleep a flat 2000 ms with prefetch — measured in workerd on
     // six published projects, `flush` was 2000 ms on every route, 40–90 % of
@@ -1001,12 +1129,12 @@ export const render = async (data, options = {}) => {
     const sleep = (ms) => new Promise(r => setTimeout(r, ms))
     await sleep(Math.min(50, flushCap))
     while (prefetch && inFlightRequests() > 0 && Date.now() - flushStart < flushCap) {
-      while (inFlightRequests() > 0 && Date.now() - flushStart < flushCap) await sleep(10)
-      await sleep(Math.max(0, Math.min(50, flushCap - (Date.now() - flushStart))))
+      await sleep(10)
+      // a settled batch: another quiet period for what it triggers
+      if (inFlightRequests() === 0) await sleep(Math.max(0, Math.min(50, flushCap - (Date.now() - flushStart))))
     }
   } finally {
-    _activeRenders--
-    if (_seed === seed) _seed = null
+    recording.close()
   }
   const fetchSeed = seed && !seed.tainted ? seed.entries.slice() : []
 
@@ -1017,7 +1145,8 @@ export const render = async (data, options = {}) => {
 
   // Build element path → brKey registry for client-side true hydration.
   // Walks the element tree after mapKeysToElements has set __brKey on each element.
-  const brRegistry = buildPathRegistry(element)
+  const { elementPath } = await import('@symbo.ls/element')
+  const brRegistry = buildPathRegistry(element, elementPath)
 
   // Extract metadata for the rendered route
   // Pass the rendered element and its state so function-valued metadata
@@ -1025,52 +1154,128 @@ export const render = async (data, options = {}) => {
   const metadata = extractMetadata(data, route, element, element?.state)
 
   // Extract CSS from style tags in virtual head (atomic CSS engine writes here)
-  const emotionCSS = []
   const capturedRules = []
   const head = document.head || document.querySelector('head')
   if (head) {
     for (const style of head.querySelectorAll('style')) {
       if (style.sheet && style.sheet.cssRules) {
         for (const rule of style.sheet.cssRules) {
-          if (rule.cssText) {
-            emotionCSS.push(rule.cssText)
-            capturedRules.push(rule)
-          }
+          if (rule.cssText) capturedRules.push(rule)
         }
       }
-      if (!emotionCSS.length) {
+      if (!capturedRules.length) {
         const content = style.textContent || ''
-        if (content) {
-          emotionCSS.push(content)
-          capturedRules.push({ cssText: content })
-        }
+        if (content) capturedRules.push({ cssText: content })
       }
     }
   }
+  const emotionCSS = capturedRules.map((rule) => rule.cssText)
   // globalCSS: the init-injected globals; classRules: everything else, in
   // capture order (see splitCapturedCSS).
   const { globalCSS, classRules } = splitCapturedCSS(capturedRules)
 
   let html = fixSvgContent(body.innerHTML)
 
+  // The language this page was rendered in and the labels it ended with:
+  // the ones fetched before the render plus whatever the project's own
+  // polyglot.fetch loaded into the root state during it.
+  const root = element?.state?.root
+  const activeLang = activeLangOf(root, polyglotConfig)
+  const labels = renderedLabels(ssrTranslations, root)
+
   // Post-process: resolve any remaining {{ key | polyglot }} templates
-  // that weren't resolved during DOMQL rendering (e.g. due to timing)
-  if (ssrTranslations) {
-    const defaultLang = polyglotConfig?.defaultLang || 'en'
-    const langMap = ssrTranslations[defaultLang] || Object.values(ssrTranslations)[0] || {}
-    html = html.replace(/\{\{\s*([^|{}]+?)\s*\|\s*polyglot\s*\}\}/g, (match, key) => {
-      const trimmed = key.trim()
-      return langMap[trimmed] ?? match
-    })
+  // that weren't resolved during DOMQL rendering (e.g. due to timing) — in
+  // the page's language. It used the default language, so a page rendered
+  // for /en/… got its leftover templates in the default language's words
+  // (xma.info report, brender build item 8).
+  if (labels) html = resolveLabelTemplates(html, labelMapFor(labels, activeLang, polyglotConfig))
+
+  const diagnostics = diag && !diag.tainted
+    ? {
+        failedRequests: diag.failures.slice(),
+        rawLabelKeys: rawLabelKeys(diag.labelKeys, html, activeLang, polyglotConfig, root)
+      }
+    : null
+
+  return { html, metadata, registry, brRegistry, element, emotionCSS, globalCSS, classRules, fetchSeed, document, window, ssrTranslations: labels || undefined, activeLang, diagnostics }
+  } finally {
+    for (const restore of restoreGlobals) restore()
   }
+}
 
-  // Restore globalThis after render
-  if (_prevDoc !== undefined) globalThis.document = _prevDoc
-  else delete globalThis.document
-  if (_prevLoc !== undefined) globalThis.location = _prevLoc
-  else delete globalThis.location
+// Put `value` on globalThis[name] for a render and hand back what puts the
+// old property back, descriptor and all. Never reads the old value — a host
+// global can be a lazy accessor that warns or throws when read.
+const swapGlobal = (name, value) => {
+  const previous = Object.getOwnPropertyDescriptor(globalThis, name)
+  if (previous && !previous.configurable) {
+    if (!previous.writable && !previous.set) return () => {}
+    globalThis[name] = value
+    return () => {}
+  }
+  Object.defineProperty(globalThis, name, { value, writable: true, configurable: true, enumerable: true })
+  return () => {
+    if (previous) Object.defineProperty(globalThis, name, previous)
+    else delete globalThis[name]
+  }
+}
+
+// ── Labels after a render ───────────────────────────────────────────────────
+
+const LABEL_TEMPLATE = /\{\{\s*([^|{}]+?)\s*\|\s*polyglot\s*\}\}/g
+
+const plainOf = (value) => value && typeof value.parse === 'function' ? value.parse() : value
+
+// The labels a render ended with, by language: the ones fetched before it
+// (`ssrTranslations`), with the root state's own — loaded during the render
+// by the project's polyglot.fetch — over them. Null when there are none.
+const renderedLabels = (ssrTranslations, root) => {
+  const loaded = plainOf(root?.translations)
+  const out = {}
+  for (const source of [ssrTranslations, loaded]) {
+    if (!source || typeof source !== 'object') continue
+    for (const lang in source) {
+      const map = plainOf(source[lang])
+      if (map && typeof map === 'object') out[lang] = { ...(out[lang] || {}), ...map }
+    }
+  }
+  return Object.keys(out).length ? out : null
+}
+
+// One language's labels: the page's, else the default language's, else the
+// first there is — the order the post-render pass always fell back in.
+const labelMapFor = (labels, activeLang, poly) =>
+  labels[activeLang] || labels[polyglotFallbackLang(undefined, poly)] || Object.values(labels)[0] || {}
+
+const resolveLabelTemplates = (html, langMap) =>
+  html.replace(LABEL_TEMPLATE, (match, key) => {
+    const val = ssrResolve(langMap, key.trim())
+    return val ?? match
+  })
 
-  return { html, metadata, registry, brRegistry, element, emotionCSS, globalCSS, classRules, fetchSeed, document, window, ssrTranslations, prefetchedPages }
+// JSON data blocks (registry, fetch seed) are data, not what a visitor reads.
+const DATA_BLOCK = /<script\b[^>]*\btype\s*=\s*["']?application\/json["']?[^>]*>[\s\S]*?<\/script\s*>/gi
+// The key as a whole token: not part of a longer key or word.
+const keyInMarkup = (markup, key) =>
+  new RegExp(`(?:^|[^\\w.-])${escapeRegExp(key)}(?![\\w-]|\\.\\w)`).test(markup)
+
+// The label keys a page shows raw: every key ssrTranslate missed that the
+// labels the render ended with still do not have AND that reached the
+// markup, plus every `{{ key | polyglot }}` template left in it. A lookup
+// whose result never rendered (a discarded value, a branch not taken) is no
+// raw key on screen — XMA /vlog failed `--strict` on `ui.vlog.desc`, which
+// appeared 0 times in the page. A miss with whitespace in it is text handed
+// to `polyglot`, not a key.
+const rawLabelKeys = (missed, html, activeLang, poly, root) => {
+  const raw = new Set()
+  const markup = html.replace(DATA_BLOCK, '')
+  for (const key of missed) {
+    if (/\s/.test(key)) continue
+    if (findLabel(key, activeLang, poly, root) !== undefined) continue
+    if (keyInMarkup(markup, key)) raw.add(key)
+  }
+  for (const m of markup.matchAll(LABEL_TEMPLATE)) raw.add(m[1].trim())
+  return [...raw]
 }
 
 /**
@@ -1156,27 +1361,6 @@ const SCRATCH_CONFIG_FLAGS = [
   'useDocumentTheme', 'useDefaultConfig', 'useDefaultIcons',
   'useThemeSuffixedVars', 'verbose', 'semanticIcons',
 ]
-// Serialise scratch `buildSkinVarStyles` output — `{ selector: { var: value },
-// '@media …': { selector: { var: value } } }` — as CSS text
-// (FW-SCRATCH-SKINS-DIMENSION-1).
-const declarationBlock = (selector, vars, indent) => {
-  const decls = Object.entries(vars || {})
-    .map(([k, v]) => `${indent}  ${k}: ${v}`)
-    .join(';\n')
-  return decls ? `${indent}${selector} {\n${decls};\n${indent}}` : ''
-}
-
-export const skinRulesToCSS = (rules) => Object.entries(rules || {})
-  .map(([key, body]) => {
-    if (!key.startsWith('@')) return declarationBlock(key, body, '')
-    const inner = Object.entries(body || {})
-      .map(([selector, vars]) => declarationBlock(selector, vars, '  '))
-      .filter(Boolean)
-      .join('\n')
-    return inner ? `${key} {\n${inner}\n}` : ''
-  })
-  .filter(Boolean)
-  .join('\n\n')
 
 // ── Global CSS: the render's own capture, split ────────────────────────────
 // The rules smbls init injects into the virtual <head> during render() ARE
@@ -1296,8 +1480,9 @@ export const replaceEmotionCSS = (html, newCSS) => {
  * @returns {Promise<{ html: string, css: string, resetCss: string, fontLinks: string, metadata: object, brKeyCount: number }>}
  */
 export const renderRoute = async (data, options = {}) => {
-  // `prefetch: false` renders without the DB prefetch and translation fetch
-  // — the publish-time pre-render (smbls publish → ssrCache) renders data-free.
+  // `prefetch: false` fetches no table/RPC labels first and does not wait for
+  // the page's requests — the publish-time pre-render (smbls publish →
+  // ssrCache) renders data-free.
   const { route = '/', pathname, prefetch = true } = options
 
   // Use the full render pipeline which handles polyglot, prefetch, emotion, etc.
@@ -1308,39 +1493,16 @@ export const renderRoute = async (data, options = {}) => {
   const ds = data.designSystem || {}
   const globalCSS = result.globalCSS
 
-  // Extract prefetched state and language for metadata resolution
+  // The page data the render ended with and its language, for a caller's
+  // metadata (mermaid's fallback reads them). The data is what the fetch
+  // plugin put into state during the render (collectFetchedState) — it used
+  // to be the RAW rows a pre-fetch had injected into the page definition.
   let prefetchedState = null
-  let activeLang = null
   try {
-    const el = result.element
-    const polyglot = el?.context?.polyglot || data.polyglot || data.config?.polyglot
-    activeLang = el?.state?.root?.lang || polyglot?.defaultLang || 'en'
-
-    // Get prefetched data from the injected page definitions (pre-DOMQL proxy)
-    if (result.prefetchedPages && result.prefetchedPages[route]) {
-      const pageDef = result.prefetchedPages[route]
-      // Collect all state entries from the page definition tree
-      const collectStates = (def, result = {}) => {
-        if (!def || typeof def !== 'object') return result
-        if (def.state && typeof def.state === 'object') {
-          for (const [k, v] of Object.entries(def.state)) {
-            if (v !== undefined && v !== null && typeof v !== 'function') {
-              result[k] = v
-            }
-          }
-        }
-        // Recurse into all child definitions (not just those with state)
-        for (const [key, child] of Object.entries(def)) {
-          if (key === 'state' || key === 'props' || key === 'attr' || key === 'on' || key === 'define' || key === '__ref' || key.startsWith('__')) continue
-          if (child && typeof child === 'object' && !Array.isArray(child)) {
-            collectStates(child, result)
-          }
-        }
-        return result
-      }
-      prefetchedState = collectStates(pageDef)
-    }
+    const fetched = collectFetchedState(result.element)
+    if (Object.keys(fetched).length) prefetchedState = fetched
   } catch (e) { /* ignore */ }
+  const activeLang = result.activeLang
 
   return {
     html: result.html,
@@ -1354,14 +1516,39 @@ export const renderRoute = async (data, options = {}) => {
     metadata: result.metadata || extractMetadata(data, route),
     brKeyCount: result.registry ? Object.keys(result.registry).length : 0,
     brRegistry: result.brRegistry || {},
-    // anonymous GET answers this render got (see `_seed`) — for adoptionScripts
+    // anonymous GET answers this render got (see `SEED`) — for adoptionScripts
     fetchSeed: result.fetchSeed || [],
     ssrTranslations: result.ssrTranslations,
     prefetchedState,
-    activeLang
+    activeLang,
+    // failed requests and raw label keys (see `DIAG`); null when an
+    // overlapping render made them unknowable
+    diagnostics: result.diagnostics
   }
 }
 
+// What the fetch plugin put into state during a render, by the `as` key each
+// `fetch` config names — a `~/key` one read off the root state. Configs
+// without `as` (a transform spreading into the element's state) and function
+// configs are not read: a function would have to run again.
+const collectFetchedState = (element) => {
+  const out = {}
+  walkElements(element, (el) => {
+    const decl = el.fetch
+    if (!decl || typeof decl !== 'object' || !el.state) return
+    for (const cfg of Array.isArray(decl) ? decl : [decl]) {
+      const as = cfg && typeof cfg === 'object' && typeof cfg.as === 'string' ? cfg.as : null
+      if (!as) continue
+      const fromRoot = as.startsWith('~/')
+      const name = fromRoot ? as.slice(2) : as
+      const source = fromRoot ? el.state.root : el.state
+      const value = plainOf(source && source[name])
+      if (name && value != null && typeof value !== 'function') out[name] = value
+    }
+  })
+  return out
+}
+
 // ── Full page SSR ─────────────────────────────────────────────────────────────
 
 /**
@@ -1378,12 +1565,20 @@ export const renderRoute = async (data, options = {}) => {
  * @param {string} [options.themeColor] - theme-color meta
  * @param {object} [options.isr] - ISR options with clientScript path
  * @param {boolean} [options.hydrate=true] - With `isr`: boot the client over the
- *   pre-rendered markup (`__BRENDER__`; the client replaces it with a fresh
- *   render) instead of the legacy swap script
- * @param {boolean} [options.adoptDom=false] - Opt-in hydration: also ship the
- *   element-path registry, `__BRENDER_HYDRATE__` and the recorded anonymous
- *   fetch answers, so the client ADOPTS the server DOM (smbls hydrateRender)
- * @param {boolean} [options.prefetch=true] - Whether to prefetch data via DB adapter
+ *   pre-rendered markup (the page's `<meta name="brender">`) instead of the
+ *   legacy swap script
+ * @param {boolean} [options.adoptDom=false] - Hydration: also ship the
+ *   element-path registry (a JSON data block), so the client ADOPTS the
+ *   server DOM (smbls prerender.js) instead of replacing it. `smbls build`
+ *   passes symbols.json `brender.hydrate` (cli helpers/runBrender.js).
+ * @param {string} [options.nonce] - The Content-Security-Policy nonce for the
+ *   inline scripts the page needs (the ISR paths only: a page rendered into a
+ *   shell carries none — its flag is a <meta>, its registry and fetch seed are
+ *   data blocks, which no policy blocks)
+ * @param {boolean} [options.prefetch=true] - Fetch table/RPC labels before the
+ *   render and wait (up to 2 s) for the requests the page starts; false waits
+ *   only a 50 ms quiet period. The page's data always comes from the fetch
+ *   plugin during the render.
  * @param {string} [options.shell] - A built app document (e.g. dist/index.html)
  *   to render INTO instead of emitting a standalone document (see shell.js).
  *   The result then carries `shell: true`.
@@ -1393,13 +1588,18 @@ export const renderRoute = async (data, options = {}) => {
  * @returns {Promise<{ html: string, route: string, brKeyCount: number, shell?: true }>}
  */
 export const renderPage = async (data, route = '/', options = {}) => {
-  const { lang, themeColor, isr, hydrate = true, prefetch = true, shell, adoptDom = false } = options
+  const { lang, themeColor, isr, hydrate = true, prefetch = true, shell, adoptDom = false, pathname, eagerImages = EAGER_IMAGES_DEFAULT, preloadScripts = true, nonce } = options
+  const nonceAttr = nonceAttribute(nonce)
 
   // Detect lang from project config, app metadata, or default
   const htmlLang = lang || data.state?.lang || data.app?.metadata?.lang || 'en'
 
-  // Use the full smbls pipeline for rendering
-  const result = await render(data, { route, prefetch })
+  // Use the full smbls pipeline for rendering. `pathname` is the address the
+  // page is rendered at — the router matches it, location and every
+  // canonical/og:url built from it read it. Without it a route was rendered
+  // at its own pattern: the `/*` page wrote a `/*` canonical into 404.html
+  // (xma.info report, brender build item 7).
+  const result = await render(data, { route, pathname, prefetch })
   if (!result) return null
 
   const metadata = { ...result.metadata }
@@ -1432,15 +1632,23 @@ export const renderPage = async (data, route = '/', options = {}) => {
   }
   const emotionCSS = Array.from(_accumulatedEmotionCSS).join('\n')
 
-  // Global CSS (variables, reset, keyframes): this render's own init output
-  const ds = data.designSystem || {}
+  // Global CSS (variables, reset, keyframes): this render's own init output.
+  // The style tags, built once for both documents below.
   const globalCSS = result.globalCSS
+  const brenderStyle = `<style data-brender>\n${globalCSS.rootRule || ''}\n${globalCSS.resetRules || ''}\n${globalCSS.keyframeRules || ''}\n</style>`
+  const emotionStyle = emotionCSS ? `<style data-emotion="smbls">\n${emotionCSS}\n</style>` : ''
 
   // Generate font links from design system
-  const fontLinks = generateFontLinks(ds)
+  const fontLinks = generateFontLinks(data.designSystem || {})
 
   const brKeyCount = Object.keys(result.registry).length
 
+  // What the client boots with (prerenderParts): the page's mark for <head>,
+  // and the data blocks after the markup — the registry under `adoptDom`,
+  // and the recorded anonymous answers, so the client renders from the data
+  // the server used instead of asking for all of it again.
+  const prerender = prerenderParts({ brRegistry: result.brRegistry, fetchSeed: result.fetchSeed, adoptDom })
+
   // ISR: include client SPA bundle for hydration + data fetching
   let isrBody = ''
   if (isr && isr.clientScript) {
@@ -1453,9 +1661,9 @@ export const renderPage = async (data, route = '/', options = {}) => {
     const prefix = depth > 0 ? '../'.repeat(depth) : './'
 
     if (hydrate) {
-      // True hydration: signal the SPA to adopt existing DOM nodes
-      // instead of creating new ones. The SPA detects __BRENDER__ flag
-      // and uses onlyResolveExtends + node adoption.
+      // The client boots over the markup: it knows the page by its
+      // `<meta name="brender">` and adopts the markup when the page carries
+      // the registry (`adoptDom`), else replaces it (smbls prerender.js).
       //
       // Seed client-side polyglot with SSR translations so that
       // el.call('polyglot', key) resolves immediately during hydration
@@ -1473,27 +1681,20 @@ export const renderPage = async (data, route = '/', options = {}) => {
           }
         }
         if (storageLangKey) {
-          const defaultLang = polyglotCfg?.defaultLang || 'en'
+          const defaultLang = polyglotFallbackLang(undefined, polyglotCfg)
           seedEntries.push(`if(!localStorage.getItem(${JSON.stringify(storageLangKey)}))localStorage.setItem(${JSON.stringify(storageLangKey)},${JSON.stringify(defaultLang)})`)
         }
         if (seedEntries.length) {
-          translationSeed = `<script>try{${seedEntries.join(';')}}catch(e){}</script>\n`
+          translationSeed = `<script${nonceAttr}>try{${seedEntries.join(';')}}catch(e){}</script>\n`
         }
       }
-      // Embed BR registry for true DOM-adoption hydration
-      const brRegistryJson = result.brRegistry && Object.keys(result.brRegistry).length
-        ? JSON.stringify(result.brRegistry)
-        : null
-      const brRegistryScript = adoptDom
-        ? (adoptionScripts(result) ? adoptionScripts(result) + '\n' : '')
-        : brRegistryJson
-          ? `<script>window.__BR_REGISTRY__=${brRegistryJson}</script>\n`
-          : ''
-      isrBody = `${translationSeed}${brRegistryScript}<script>window.__BRENDER__=true</script>
-<script type="module" src="${prefix}${isr.clientScript}"></script>`
+      // The registry and the fetch seed as data blocks; the page's mark is
+      // its <meta name="brender"> (no inline flag a policy could block).
+      const blocks = prerender.blocks ? prerender.blocks + '\n' : ''
+      isrBody = `${translationSeed}${blocks}<script type="module" src="${prefix}${isr.clientScript}"${nonceAttr}></script>`
     } else {
       // Legacy swap mode: SPA creates new DOM, MutationObserver removes brender nodes
-      isrBody = `<script type="module">
+      isrBody = `<script type="module"${nonceAttr}>
 {
   const brEls = document.querySelectorAll('body > :not(script):not(style)')
   const observer = new MutationObserver((mutations) => {
@@ -1510,461 +1711,100 @@ export const renderPage = async (data, route = '/', options = {}) => {
   observer.observe(document.body, { childList: true })
 }
 </script>
-<script type="module" src="${prefix}${isr.clientScript}"></script>`
+<script type="module" src="${prefix}${isr.clientScript}"${nonceAttr}></script>`
     }
   }
 
   // Resolve any {{ key | polyglot }} templates in head tags (title, meta, etc.)
+  // — in the page's language, with the labels the render ended with.
   const headConfig = { ...(data.config || {}) }
   if (data.polyglot && !headConfig.polyglot) headConfig.polyglot = data.polyglot
   const polyglotCfg = headConfig.polyglot
   let resolvedHeadTags = headTags
   if (polyglotCfg) {
-    const defaultLang = polyglotCfg.defaultLang || 'en'
     // Use SSR-fetched translations (from render result) merged with static translations
-    const translations = {
-      ...(polyglotCfg.translations || {}),
-      ...(result.ssrTranslations || {})
+    const translations = { ...(polyglotCfg.translations || {}) }
+    for (const lang in result.ssrTranslations || {}) {
+      translations[lang] = { ...(translations[lang] || {}), ...result.ssrTranslations[lang] }
     }
-    const langMap = translations[defaultLang] || {}
-    resolvedHeadTags = headTags.replace(/\{\{\s*([^|{}]+?)\s*\|\s*polyglot\s*\}\}/g, (match, key) => {
-      const trimmed = key.trim()
-      return langMap[trimmed] ?? match
-    })
+    resolvedHeadTags = resolveLabelTemplates(headTags, labelMapFor(translations, result.activeLang, polyglotCfg))
   }
 
+  // A template the head still carries is a raw key too.
+  const diagnostics = result.diagnostics
+  if (diagnostics) {
+    for (const m of resolvedHeadTags.matchAll(LABEL_TEMPLATE)) {
+      const key = m[1].trim()
+      if (!diagnostics.rawLabelKeys.includes(key)) diagnostics.rawLabelKeys.push(key)
+    }
+  }
+
+  // Images past the first `eagerImages` load lazily unless they say how to
+  // load (see markLazyImages).
+  const bodyHtml = markLazyImages(result.html, eagerImages)
+
   // Build path: render INTO the app's own built document (shell.js) — the
   // standalone document below carries no app code unless `isr` adds a
   // client bundle, so writing it over a bundler's dist/index.html shipped
   // pages that never booted.
   if (typeof shell === 'string') {
-    const styles = [
-      globalCSS.fontFaceCSS ? `<style data-brender>${globalCSS.fontFaceCSS}</style>` : '',
-      `<style data-brender>\n${globalCSS.rootRule || ''}\n${globalCSS.resetRules || ''}\n${globalCSS.keyframeRules || ''}\n</style>`,
-      emotionCSS ? `<style data-emotion="smbls">\n${emotionCSS}\n</style>` : ''
-    ]
     const html = composeIntoShell(shell, {
-      headTags: resolvedHeadTags,
-      headEnd: [fontLinks, ...styles].filter(Boolean).join('\n'),
-      body: result.html,
+      headTags: `${resolvedHeadTags}\n${prerender.meta}`,
+      headEnd: [fontLinks, brenderStyle, emotionStyle].filter(Boolean).join('\n'),
+      body: bodyHtml,
       depth: Number.isInteger(options.depth) ? options.depth : 0,
-      bootScripts: adoptDom ? adoptionScripts(result) : ''
+      bootScripts: prerender.blocks,
+      // The page's language on <html>, as the client's polyglot sets it at
+      // boot — a page rendered for /en/… kept the shell's `lang="ka"`.
+      // Only when the project has languages (or the caller names one).
+      lang: lang || (polyglotCfg ? result.activeLang : undefined),
+      preloadScripts
     })
-    return { html, route, brKeyCount, shell: true }
+    return { html, route, brKeyCount, shell: true, diagnostics }
   }
 
+  // (The empty line after the font links held a @font-face <style> that
+  // splitCapturedCSS never fills — @font-face stays in the class stream.)
   const html = `<!DOCTYPE html>
 <html lang="${htmlLang}">
 <head>
-${resolvedHeadTags}
+${resolvedHeadTags}${isr && isr.clientScript && hydrate ? `\n${prerender.meta}` : ''}
 ${fontLinks}
-${globalCSS.fontFaceCSS ? `<style data-brender>${globalCSS.fontFaceCSS}</style>` : ''}
-<style data-brender>
-${globalCSS.rootRule || ''}
-${globalCSS.resetRules || ''}
-${globalCSS.keyframeRules || ''}
-</style>
-${emotionCSS ? `<style data-emotion="smbls">\n${emotionCSS}\n</style>` : ''}
+
+${brenderStyle}
+${emotionStyle}
 </head>
 <body>
-${result.html}
+${bodyHtml}
 ${isrBody}
 </body>
 </html>`
 
-  return { html, route, brKeyCount }
-}
-
-// ── Design system token resolution ──────────────────────────────────────────
-
-const LETTER_TO_INDEX = {
-  U: -6, V: -5, W: -4, X: -3, Y: -2, Z: -1,
-  A: 0, B: 1, C: 2, D: 3, E: 4, F: 5, G: 6, H: 7, I: 8, J: 9,
-  K: 10, L: 11, M: 12, N: 13, O: 14, P: 15
+  return { html, route, brKeyCount, diagnostics }
 }
 
-const SPACING_PROPS = new Set([
-  'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
-  'paddingBlock', 'paddingInline', 'paddingBlockStart', 'paddingBlockEnd',
-  'paddingInlineStart', 'paddingInlineEnd',
-  'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft',
-  'marginBlock', 'marginInline', 'marginBlockStart', 'marginBlockEnd',
-  'marginInlineStart', 'marginInlineEnd',
-  'gap', 'rowGap', 'columnGap',
-  'top', 'right', 'bottom', 'left',
-  'width', 'height', 'minWidth', 'maxWidth', 'minHeight', 'maxHeight',
-  'flexBasis', 'fontSize', 'lineHeight', 'letterSpacing',
-  'borderWidth', 'borderRadius', 'outlineWidth', 'outlineOffset',
-  'inset', 'insetBlock', 'insetInline',
-  'boxSize', 'round'
-])
-
-/**
- * Resolves a spacing token like 'B2', 'A', 'E3' to a px/em value.
- * Uses base * ratio^index for main steps (A=0, B=1, etc.)
- * and sub-ratio interpolation for sub-steps (B1, B2, B3).
- */
-const resolveSpacingToken = (token, spacingConfig) => {
-  if (!token || typeof token !== 'string') return null
-  if (!spacingConfig) return null
-
-  const base = spacingConfig.base || 16
-  const ratio = spacingConfig.ratio || 1.618
-  const unit = spacingConfig.unit || 'px'
-  const hasSubSequence = spacingConfig.subSequence !== false
-
-  // Handle compound values like 'B2 - -' or 'A1 B C1'
-  if (token.includes(' ')) {
-    const parts = token.split(' ').map(part => {
-      if (part === '-' || part === '') return part
-      return resolveSpacingToken(part, spacingConfig) || part
-    })
-    return parts.join(' ')
-  }
-
-  // Skip CSS keywords and values with units
-  if (/^(none|auto|inherit|initial|unset|0)$/i.test(token)) return null
-  if (/\d+(px|em|rem|%|vh|vw|vmin|vmax|ch|ex|cm|mm|in|pt|pc|fr|s|ms)$/i.test(token)) return null
-  // Skip hex colors, rgb(), etc.
-  if (/^(#|rgb|hsl|var\()/i.test(token)) return null
-
-  const isNegative = token.startsWith('-')
-  const abs = isNegative ? token.slice(1) : token
-
-  // Match letter + optional digit: A, B, B2, E3, etc.
-  const m = abs.match(/^([A-Z])(\d)?$/i)
-  if (!m) return null
-
-  const letter = m[1].toUpperCase()
-  const subStep = m[2] ? parseInt(m[2]) : 0
-  const idx = LETTER_TO_INDEX[letter]
-  if (idx === undefined) return null
-
-  let value = base * Math.pow(ratio, idx)
-
-  if (subStep > 0 && hasSubSequence) {
-    const next = base * Math.pow(ratio, idx + 1)
-    const diff = next - value
-    const subRatio = diff / ratio
-    // Sub-steps: 1 = value + (diff - subRatio), 2 = midpoint, 3 = value + subRatio
-    const first = next - subRatio
-    const second = value + subRatio
-    const middle = (first + second) / 2
-    const subs = (~~next - ~~value > 16) ? [first, middle, second] : [first, second]
-    if (subStep <= subs.length) {
-      value = subs[subStep - 1]
-    }
-  }
-
-  const rounded = Math.round(value * 100) / 100
-  const sign = isNegative ? '-' : ''
-  return `${sign}${rounded}${unit}`
-}
-
-// Kebab-case versions of spacing props for post-shorthand resolution
-const SPACING_PROPS_KEBAB = new Set(
-  [...SPACING_PROPS].map(k => k.replace(/[A-Z]/g, m => '-' + m.toLowerCase()))
-)
-
-/**
- * Try to resolve a CSS value through the design system.
- * Returns the resolved value or the original if not a token.
- */
-const resolveDSValue = (key, val, ds) => {
-  if (typeof val !== 'string') return val
-
-  // Color resolution
-  if (CSS_COLOR_PROPS.has(key)) {
-    const colorMap = ds?.color || {}
-    if (colorMap[val]) return colorMap[val]
-  }
-
-  // Spacing resolution (check both camelCase and kebab-case keys)
-  if (SPACING_PROPS.has(key) || SPACING_PROPS_KEBAB.has(key)) {
-    const spacing = ds?.spacing || {}
-    const resolved = resolveSpacingToken(val, spacing)
-    if (resolved) return resolved
-  }
-
-  return val
-}
-
-// ── CSS helpers ─────────────────────────────────────────────────────────────
-
-const CSS_COLOR_PROPS = new Set([
-  'color', 'background', 'backgroundColor', 'borderColor',
-  'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor',
-  'outlineColor', 'fill', 'stroke'
-])
-
-const NON_CSS_PROPS = new Set([
-  'href', 'src', 'alt', 'title', 'id', 'name', 'type', 'value', 'placeholder',
-  'target', 'rel', 'loading', 'srcset', 'sizes', 'media', 'role', 'tabindex',
-  'for', 'action', 'method', 'enctype', 'autocomplete', 'autofocus',
-  'theme', '__element', 'update',
-  'childrenAs', 'childExtends', 'childProps', 'children'
-])
-
-const camelToKebab = (str) => str.replace(/[A-Z]/g, m => '-' + m.toLowerCase())
-
-const resolveShorthand = (key, val) => {
-  if (typeof val === 'undefined' || val === null) return null
-
-  // Flex shorthands
-  if (key === 'flow' && typeof val === 'string') {
-    let [direction, wrap] = (val || 'row').split(' ')
-    if (val.startsWith('x') || val === 'row') direction = 'row'
-    if (val.startsWith('y') || val === 'column') direction = 'column'
-    return { display: 'flex', 'flex-flow': (direction || '') + ' ' + (wrap || '') }
-  }
-  if (key === 'wrap') {
-    return { display: 'flex', 'flex-wrap': val }
-  }
-  if ((key === 'align' || key === 'flexAlign') && typeof val === 'string') {
-    const [alignItems, justifyContent] = val.split(' ')
-    const result = { display: 'flex', 'align-items': alignItems }
-    if (justifyContent) result['justify-content'] = justifyContent
-    return result
-  }
-  if (key === 'gridAlign' && typeof val === 'string') {
-    const [alignItems, justifyContent] = val.split(' ')
-    const result = { display: 'grid', 'align-items': alignItems }
-    if (justifyContent) result['justify-content'] = justifyContent
-    return result
-  }
-  if (key === 'flexFlow' && typeof val === 'string') {
-    let [direction, wrap] = (val || 'row').split(' ')
-    if (val.startsWith('x') || val === 'row') direction = 'row'
-    if (val.startsWith('y') || val === 'column') direction = 'column'
-    return { display: 'flex', 'flex-flow': (direction || '') + ' ' + (wrap || '') }
-  }
-  if (key === 'flexWrap') {
-    return { display: 'flex', 'flex-wrap': val }
-  }
-
-  // Background image shorthand
-  if (key === 'backgroundImage' && typeof val === 'string' && !val.startsWith('url(') && !val.startsWith('linear-gradient') && !val.startsWith('radial-gradient') && !val.startsWith('none')) {
-    return { 'background-image': `url(${val})` }
-  }
-
-  // Box/size shorthands
-  if (key === 'round' || (key === 'borderRadius' && val)) {
-    return { 'border-radius': typeof val === 'number' ? val + 'px' : val }
-  }
-  if (key === 'boxSize' && typeof val === 'string') {
-    const [height, width] = val.split(' ')
-    return { height, width: width || height }
-  }
-  if (key === 'widthRange' && typeof val === 'string') {
-    const [minWidth, maxWidth] = val.split(' ')
-    return { 'min-width': minWidth, 'max-width': maxWidth || minWidth }
-  }
-  if (key === 'heightRange' && typeof val === 'string') {
-    const [minHeight, maxHeight] = val.split(' ')
-    return { 'min-height': minHeight, 'max-height': maxHeight || minHeight }
-  }
-
-  // Grid aliases
-  if (key === 'column') return { 'grid-column': val }
-  if (key === 'columns') return { 'grid-template-columns': val }
-  if (key === 'templateColumns') return { 'grid-template-columns': val }
-  if (key === 'row') return { 'grid-row': val }
-  if (key === 'rows') return { 'grid-template-rows': val }
-  if (key === 'templateRows') return { 'grid-template-rows': val }
-  if (key === 'area') return { 'grid-area': val }
-  if (key === 'template') return { 'grid-template': val }
-  if (key === 'templateAreas') return { 'grid-template-areas': val }
-  if (key === 'autoColumns') return { 'grid-auto-columns': val }
-  if (key === 'autoRows') return { 'grid-auto-rows': val }
-  if (key === 'autoFlow') return { 'grid-auto-flow': val }
-  if (key === 'columnStart') return { 'grid-column-start': val }
-  if (key === 'rowStart') return { 'grid-row-start': val }
-
-  return null
-}
-
-const resolveInnerProps = (obj, ds) => {
-  const result = {}
-  for (const k in obj) {
-    const v = obj[k]
-    const expanded = resolveShorthand(k, v)
-    if (expanded) {
-      for (const ek in expanded) {
-        result[ek] = resolveDSValue(ek, expanded[ek], ds)
-      }
-      continue
-    }
-    if (typeof v !== 'string' && typeof v !== 'number') continue
-    result[camelToKebab(k)] = resolveDSValue(k, v, ds)
-  }
-  return result
-}
-
-const buildCSSFromProps = (props, ds, mediaMap) => {
-  const base = {}
-  const mediaRules = {}
-  const pseudoRules = {}
-
-  for (const key in props) {
-    const val = props[key]
-
-    if (key.charCodeAt(0) === 64 && typeof val === 'object') {
-      const bp = mediaMap?.[key.slice(1)]
-      if (bp) {
-        const inner = resolveInnerProps(val, ds)
-        if (Object.keys(inner).length) mediaRules[bp] = inner
-      }
-      continue
-    }
-
-    if (key.charCodeAt(0) === 58 && typeof val === 'object') {
-      const inner = resolveInnerProps(val, ds)
-      if (Object.keys(inner).length) pseudoRules[key] = inner
-      continue
-    }
-
-    if (typeof val !== 'string' && typeof val !== 'number') continue
-    if (key.charCodeAt(0) >= 65 && key.charCodeAt(0) <= 90) continue
-    if (NON_CSS_PROPS.has(key)) continue
-
-    const expanded = resolveShorthand(key, val)
-    if (expanded) {
-      for (const ek in expanded) {
-        base[ek] = resolveDSValue(ek, expanded[ek], ds)
-      }
-      continue
-    }
-
-    base[camelToKebab(key)] = resolveDSValue(key, val, ds)
-  }
-
-  return { base, mediaRules, pseudoRules }
-}
-
-const renderCSSRule = (selector, { base, mediaRules, pseudoRules }) => {
-  const lines = []
-  const baseDecls = Object.entries(base).map(([k, v]) => `${k}: ${v}`).join('; ')
-  if (baseDecls) lines.push(`${selector} { ${baseDecls}; }`)
-
-  for (const [pseudo, p] of Object.entries(pseudoRules)) {
-    const decls = Object.entries(p).map(([k, v]) => `${k}: ${v}`).join('; ')
-    if (decls) lines.push(`${selector}${pseudo} { ${decls}; }`)
-  }
-
-  for (const [query, p] of Object.entries(mediaRules)) {
-    const decls = Object.entries(p).map(([k, v]) => `${k}: ${v}`).join('; ')
-    const mq = query.startsWith('@') ? query : `@media ${query}`
-    if (decls) lines.push(`${mq} { ${selector} { ${decls}; } }`)
-  }
-
-  return lines.join('\n')
-}
-
-// Map of component names to their implicit CSS from extends
-const EXTENDS_CSS = {
-  Flex: { display: 'flex' },
-  InlineFlex: { display: 'inline-flex' },
-  Grid: { display: 'grid' },
-  InlineGrid: { display: 'inline-grid' },
-  Block: { display: 'block' },
-  Inline: { display: 'inline' }
-}
-
-const getExtendsCSS = (el) => {
-  const exts = el.__ref?.__extends
-  if (!exts || !Array.isArray(exts)) return null
-  for (const ext of exts) {
-    if (EXTENDS_CSS[ext]) return EXTENDS_CSS[ext]
-  }
-  return null
-}
-
-/**
- * Resolve function-valued CSS props by evaluating them with (element, state).
- * In SSR, this gives correct initial values (e.g. display: 'none' when no auth).
- * Uses fallback mock state if element state is incomplete.
- */
-const resolveElementProps = (el) => {
-  let resolved
-  for (const key in el) {
-    if (typeof el[key] !== 'function') continue
-    // Skip non-CSS props and component children
-    if (NON_CSS_PROPS.has(key)) continue
-    if (key.charCodeAt(0) >= 65 && key.charCodeAt(0) <= 90) continue
-    if (key.startsWith('on')) continue
-    if (key.startsWith('__')) continue
-    if (!resolved) resolved = {}
-    let result
-    try {
-      result = el[key](el, el.state || {})
-    } catch {
-      // State prototype chain may be incomplete in SSR — try with mock
-      try {
-        const mockState = { root: {}, ...(el.state || {}) }
-        result = el[key](el, mockState)
-      } catch { /* skip prop */ }
-    }
-    if (result !== undefined && result !== null && result !== false) {
-      resolved[key] = result
-    }
-  }
-  return resolved || el
-}
-
-const extractCSS = (element, ds) => {
-  const mediaMap = ds?.media || {}
-  const animations = ds?.animation || {}
-  const rules = []
-  const seen = new Set()
-  const usedAnimations = new Set()
-
-  const walk = (el) => {
-    if (!el || !el.__ref) return
-    const props = resolveElementProps(el)
-    if (props && el.node) {
-      const cls = el.node.getAttribute?.('class')
-      if (cls && !seen.has(cls)) {
-        seen.add(cls)
-        const cssResult = buildCSSFromProps(props, ds, mediaMap)
-
-        // Inject CSS from extends chain (e.g. extends: 'Flex' → display: flex)
-        const extsCss = getExtendsCSS(el)
-        if (extsCss) {
-          for (const [k, v] of Object.entries(extsCss)) {
-            const kebab = camelToKebab(k)
-            if (!cssResult.base[kebab]) cssResult.base[kebab] = v
-          }
-        }
-
-        const has = Object.keys(cssResult.base).length || Object.keys(cssResult.mediaRules).length || Object.keys(cssResult.pseudoRules).length
-        if (has) rules.push(renderCSSRule('.' + cls.split(' ')[0], cssResult))
-
-        const anim = props.animation || props.animationName
-        if (typeof anim === 'string') {
-          const name = anim.split(' ')[0]
-          if (animations[name]) usedAnimations.add(name)
-        }
-      }
-    }
-    if (el.__ref?.__children) {
-      for (const ck of el.__ref.__children) {
-        if (el[ck]?.__ref) walk(el[ck])
-      }
-    }
-  }
-  walk(element)
-
-  const keyframes = []
-  for (const name of usedAnimations) {
-    const frames = animations[name]
-    const frameRules = Object.entries(frames).map(([step, p]) => {
-      const decls = Object.entries(p).map(([k, v]) => `${camelToKebab(k)}: ${v}`).join('; ')
-      return `  ${step} { ${decls}; }`
-    }).join('\n')
-    keyframes.push(`@keyframes ${name} {\n${frameRules}\n}`)
-  }
-
-  return [...keyframes, ...rules].join('\n')
+// ── Images below the fold ───────────────────────────────────────────────────
+// A pre-rendered page's images are in the markup before the app's script,
+// and on a slow connection they took its bandwidth: measured on a throttled
+// phone, the app's 214 KB script finished at 2.65 s instead of 1.75 s while
+// 165–191 KB of images loaded (xma.info report, brender build item 14). The
+// server cannot see the fold, so the first `eager` images in document order
+// load as written and every later one that does not say how to load gets
+// `loading="lazy"` — a lazy image inside the viewport still loads right after
+// layout. An image that names its own `loading` is left alone. `eager:
+// false` turns this off.
+export const EAGER_IMAGES_DEFAULT = 2
+const IMG_TAG = /<img\b(?:[^>"']|"[^"]*"|'[^']*')*>/gi
+const HAS_LOADING = /\sloading\s*=/i
+
+export const markLazyImages = (html, eager = EAGER_IMAGES_DEFAULT) => {
+  if (eager === false || eager == null || typeof html !== 'string') return html
+  const keep = Math.max(0, Number(eager) || 0)
+  let seen = 0
+  return html.replace(IMG_TAG, (tag) => {
+    if (seen++ < keep || HAS_LOADING.test(tag)) return tag
+    return tag.replace(/^<img\b/i, '<img loading="lazy"')
+  })
 }
 
 const generateFontLinks = (ds) => {
@@ -1993,3 +1833,38 @@ const generateFontLinks = (ds) => {
     `<link href="https://fonts.googleapis.com/css2?${params}&display=swap" rel="stylesheet">`
   ].join('\n')
 }
+
+// ── The page's boot data (CSP-safe) ─────────────────────────────────────────
+// A pre-rendered page tells the client what it is without one inline script:
+// XMA serves `script-src 'self'` (no 'unsafe-inline'), which blocked the
+// `<script>window.__BRENDER__=true</script>` flag — the client then created
+// the app from scratch and appended it after the server markup, two app
+// roots (XMA report, brender item 1). A policy blocks inline scripts, never
+// <meta> tags or data blocks. The format smbls reads (smbls prerender.js):
+//   meta    `<meta name="brender" content="hydrate|replace">` for <head>
+//   blocks  after the markup — the element-path registry under `adoptDom`
+//           (`<script type="application/json" data-brender="registry">`),
+//           and the recorded anonymous answers (@symbo.ls/fetch
+//           createEarlySeedBlock), which the client adopts instead of asking
+//           again. Placed after the markup, so they never delay its paint;
+//           the app's scripts run after them either way.
+// `adoptionScripts` above stays for older callers (the platform's renderer).
+export const prerenderParts = ({ brRegistry, fetchSeed, adoptDom = false } = {}) => {
+  const registry = adoptDom && brRegistry && Object.keys(brRegistry).length
+    ? brenderRegistryBlock(brRegistry)
+    : ''
+  const seed = createEarlySeedBlock(fetchSeed)
+  return {
+    meta: `<meta name="brender" content="${registry ? 'hydrate' : 'replace'}">`,
+    blocks: [registry, seed].filter(Boolean).join('\n')
+  }
+}
+
+// ` nonce="…"` for an inline script, or '' — a value that could break out of
+// the attribute is refused.
+const nonceAttribute = (nonce) => {
+  if (nonce == null || nonce === '') return ''
+  const value = String(nonce)
+  if (!/^[A-Za-z0-9+/=_-]+$/.test(value)) throw new Error('brender: a nonce is base64 or base64url text')
+  return ` nonce="${value}"`
+}