@symbo.ls/brender 3.14.662 → 3.14.664

package/render.js

@@ -10,6 +10,9 @@ import { extractMetadata, generateHeadHtml } from './metadata.js'
 import { hydrate } from './hydrate.js'
 import { composeIntoShell } from './shell.js'
 import { prefetchPageData, injectPrefetchedState, fetchSSRTranslations } from './prefetch.js'
+import { createEarlySeedScript } from '@symbo.ls/fetch'
+import { headerEntries } from '@symbo.ls/fetch/rest'
+import { jsonForScript } from '@symbo.ls/utils'
 
 // funcql plugin — enables evaluation of funcql schemas as property values
 // during SSR. Async-imported to avoid polluting non-funcql codepaths.
@@ -111,19 +114,6 @@ const structuredCloneDeep = (obj, seen = new WeakMap()) => {
   return clone
 }
 
-// JSON replacer that drops functions, circular refs, and non-serializable values
-const safeJsonReplacer = () => {
-  const seen = new WeakSet()
-  return (key, value) => {
-    if (typeof value === 'function') return undefined
-    if (typeof value === 'object' && value !== null) {
-      if (seen.has(value)) return undefined
-      seen.add(value)
-    }
-    return value
-  }
-}
-
 // ── Workspace detection ──────────────────────────────────────────────────────
 // Detect whether brender is running inside the monorepo or as an installed
 // npm package, and resolve paths accordingly.
@@ -302,18 +292,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
@@ -323,6 +305,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)) {
@@ -642,24 +627,23 @@ 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 = {}
-
-  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))
-      }
+  const walk = (el) => {
+    const ref = el && el.__ref
+    if (!ref) return
+    if (ref.__brKey) {
+      const path = elementPath(el)
+      registry[path === '' ? '__root' : path] = ref.__brKey
     }
+    if (ref.__children) for (const childKey of ref.__children) walk(el[childKey])
   }
-
+  walk(element)
   return registry
 }
 
@@ -678,6 +662,134 @@ 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
+// counting wrapper is installed around whatever globalThis.fetch is at render
+// time and left in place: it returns the inner call's own promise untouched,
+// and re-installing per render would nest wrappers across concurrent renders
+// in one isolate. A host that swaps globalThis.fetch later gets wrapped again
+// on its next render. The count is process-wide — a concurrent render's
+// request can only make a flush wait longer, never cut one short, and the
+// flush is capped.
+let _inFlight = 0
+const FETCH_TRACKED = Symbol.for('brender.fetchTracked')
+const inFlightRequests = () => _inFlight
+// ── Recorded answers (the fetch seed, phase B) ──────────────────────────────
+// While exactly ONE render is running, the anonymous GETs it makes are
+// recorded — url, Accept-Language, status, content type, body — so the page
+// can carry them (@symbo.ls/fetch createEarlySeedScript) and the hydrating
+// client adopts them instead of asking again. A second render overlapping
+// in the same isolate taints the recording: another project's answers must
+// never land in this page, so an overlapped render carries none.
+// Only a GET whose headers are Accept-Language / Accept at most is recorded
+// (never a signed-in or keyed call), only an ok JSON or text answer, at most
+// SEED_ENTRY_MAX bytes each and SEED_TOTAL_MAX per page.
+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 requestShape = (args) => {
+  const [input, init] = args
+  const isRequest = input && typeof input === 'object' && typeof input.url === 'string'
+  const url = isRequest ? input.url : String(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
+    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)
+  return { url, method, headers }
+}
+
+const recordAnswer = (seed, shape, response, track) => {
+  if (!response || !response.ok || typeof response.clone !== 'function') return
+  const type = (response.headers && response.headers.get && response.headers.get('content-type')) || ''
+  if (!/json|^text\//i.test(type)) return
+  let copy
+  try { copy = response.clone() } catch { return }
+  track(copy.text().then((body) => {
+    if (seed.tainted || body.length > SEED_ENTRY_MAX || seed.bytes + body.length > SEED_TOTAL_MAX) return
+    seed.bytes += body.length
+    seed.entries.push({ url: shape.url, lang: shape.headers['accept-language'] || '', status: response.status, type, body })
+  }, () => {}))
+}
+
+const trackFetches = () => {
+  const inner = globalThis.fetch
+  if (typeof inner !== 'function' || inner[FETCH_TRACKED]) return
+  const tracked = function (...args) {
+    _inFlight++
+    let settled = false
+    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
+    let shape = null
+    if (seed) {
+      try {
+        shape = requestShape(args)
+        if (shape.method !== 'GET' || !/^https?:/i.test(shape.url) ||
+          Object.keys(shape.headers).some((h) => !SEED_HEADERS_OK.has(h))) shape = null
+      } catch { shape = null }
+    }
+    let result
+    try {
+      result = inner.apply(this, args)
+    } catch (err) {
+      done()
+      throw err
+    }
+    if (result && typeof result.then === 'function') {
+      result.then((response) => {
+        if (shape) recordAnswer(seed, shape, response, track)
+        done()
+      }, done)
+    } else done()
+    return result
+  }
+  tracked[FETCH_TRACKED] = true
+  globalThis.fetch = tracked
+}
+
+// ── Opt-in hydration boot scripts (phase B) ────────────────────────────────
+// What a page needs for the client to ADOPT the server DOM instead of
+// replacing it (smbls createDomql hydrateRender): the element-path registry,
+// the opt-in flag, and the recorded anonymous answers for the fetch plugin
+// (@symbo.ls/fetch createEarlySeedScript). Default off everywhere — a page
+// without these keeps the fresh client render.
+// FW-BRENDER-HYDRATION-AND-CF-DEPLOY-PROVIDER-1.
+// `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 = 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) : '')
+}
+
 export const render = async (data, options = {}) => {
   const { route = '/', pathname, state: stateOverrides, context: contextOverrides, prefetch = false } = options
   // pathname is the actual URL path (e.g. /podcast/abc-123), route is the page pattern (e.g. /podcast/:id)
@@ -773,7 +885,7 @@ export const render = async (data, options = {}) => {
   if (data.polyglot && !config.polyglot) config.polyglot = data.polyglot
   if (data.fetch && !config.fetch) config.fetch = data.fetch
   if (data.router && !config.router) config.router = data.router
-  for (const k of ['useReset', 'useVariable', 'useFontImport', 'useIconSprite', 'useSvgSprite', 'useDefaultConfig', 'useDocumentTheme']) {
+  for (const k of SCRATCH_CONFIG_FLAGS) {
     if (data[k] != null && config[k] == null) config[k] = data[k]
   }
 
@@ -804,7 +916,24 @@ export const render = async (data, options = {}) => {
   // Reset the atomic CSS engine for this render pass
   resetCss()
 
+  // Every other top-level key of the payload, as the client gets it: the
+  // client boots with the WHOLE published payload as its context (mermaid
+  // bundle.js), so `globalScope` (frank's hoisted helpers behind `__scope.X`)
+  // and project-level context keys (`catalog`, `imageBase`, `siteUrl`, …)
+  // must be there on the server too — without them docs.symbols.app threw
+  // "__scope.isViewNavRoute is not a function" and shaker.ge read
+  // `this.context.catalog` as undefined (FW-BRENDER-HYDRATION-AND-CF-DEPLOY-
+  // PROVIDER-1). Cloned: a render must not write into a payload a multi-page
+  // build reuses. The explicit keys below still win.
+  const projectContext = {}
+  for (const key in data) {
+    if (CONTEXT_KEYS_SET_BELOW.has(key)) continue
+    const value = data[key]
+    projectContext[key] = value && typeof value === 'object' ? structuredCloneDeep(value) : value
+  }
+
   const ctx = {
+    ...projectContext,
     state: baseState,
     ...(stateOverrides ? { state: { ...baseState, ...stateOverrides } } : {}),
     dependencies: structuredCloneDeep(data.dependencies || {}),
@@ -857,14 +986,43 @@ export const render = async (data, options = {}) => {
 
   resetKeys()
 
-  const 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.
-  const flushDelay = prefetch ? 2000 : 50
-  await new Promise(r => setTimeout(r, flushDelay))
+  trackFetches()
+  // 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
+  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.
+    //
+    // 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
+    // each platform pre-render. Now: a 50 ms quiet period, then — with
+    // prefetch — keep waiting while requests are in flight (the answers the
+    // flush exists for), each settled batch followed by another quiet period
+    // for the state updates and follow-up requests it triggers. The old
+    // 2000 ms stays the cap (FW-BRENDER-HYDRATION-AND-CF-DEPLOY-PROVIDER-1).
+    const flushStart = Date.now()
+    const flushCap = prefetch ? 2000 : 50
+    const sleep = (ms) => new Promise(r => setTimeout(r, ms))
+    await sleep(Math.min(50, flushCap))
+    while (prefetch && inFlightRequests() > 0 && Date.now() - flushStart < flushCap) {
+      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
+  }
+  const fetchSeed = seed && !seed.tainted ? seed.entries.slice() : []
 
   // Assign data-br keys for hydration
   assignKeys(body)
@@ -873,7 +1031,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
@@ -881,21 +1040,25 @@ 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)
+          if (rule.cssText) capturedRules.push(rule)
         }
       }
-      if (!emotionCSS.length) {
+      if (!capturedRules.length) {
         const content = style.textContent || ''
-        if (content) emotionCSS.push(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)
 
@@ -916,7 +1079,7 @@ export const render = async (data, options = {}) => {
   if (_prevLoc !== undefined) globalThis.location = _prevLoc
   else delete globalThis.location
 
-  return { html, metadata, registry, brRegistry, element, emotionCSS, document, window, ssrTranslations, prefetchedPages }
+  return { html, metadata, registry, brRegistry, element, emotionCSS, globalCSS, classRules, fetchSeed, document, window, ssrTranslations, prefetchedPages }
 }
 
 /**
@@ -990,268 +1153,92 @@ const fixSvgContent = (html) => {
   )
 }
 
-// ── Global CSS generation ─────────────────────────────────────────────────────
-
-/**
- * Runs the scratch design-system pipeline (via esbuild bundling to work around
- * bare-import issues) to produce CSS variables and reset styles — the same
- * globals that the SPA runtime injects via emotion.injectGlobal.
- */
-let _cachedGlobalCSS = null
-
 // Frank serializes a project's `config.js` exports at the TOP LEVEL of the
 // data payload (not under `data.config`), so `globalTheme` / `themeStorageKey`
 // / `useReset` / etc. live alongside `components` / `pages` / `designSystem`.
-// Both renderRoute and renderPage used to call `generateGlobalCSS(ds,
-// data.config || data.settings)` which resolved to undefined for any project
-// pushed through frank — every config flag silently dropped, including
-// `globalTheme: 'light'`. The hardcoded `globalTheme: 'auto'` default in
-// generateGlobalCSS then won, prod always rendered in matchMedia-detected
-// theme regardless of what the project declared. Helper picks the config
-// flags from `data` whichever shape they arrive in.
+// render() lifts these into the render context, as the client's context
+// carries them — the global CSS is captured from that render, so a project's
+// `globalTheme: 'light'` decides which scheme lands in the :root fallback.
 const SCRATCH_CONFIG_FLAGS = [
   'globalTheme', 'themeStorageKey', 'themeRoot',
   'useReset', 'useVariable', 'useFontImport', 'useIconSprite', 'useSvgSprite',
   'useDocumentTheme', 'useDefaultConfig', 'useDefaultIcons',
   'useThemeSuffixedVars', 'verbose', 'semanticIcons',
 ]
-const pickProjectConfig = (data) => {
-  if (!data || typeof data !== 'object') return null
-  if (data.config && typeof data.config === 'object') return data.config
-  const out = {}
-  let any = false
-  for (const flag of SCRATCH_CONFIG_FLAGS) {
-    if (Object.prototype.hasOwnProperty.call(data, flag)) {
-      out[flag] = data[flag]
-      any = true
-    }
-  }
-  if (any) return out
-  return data.settings || null
-}
 
-// 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}}` : ''
+// ── Global CSS: the render's own capture, split ────────────────────────────
+// The rules smbls init injects into the virtual <head> during render() ARE
+// the page's global CSS — the :root variables, scheme and skin blocks, the
+// processed reset and every @keyframes — exactly what the client injects,
+// for THIS project and render. They are split off the captured sheet so a
+// page emits them once, ahead of the atomic classes, and so renderPage's
+// cross-page accumulation keeps only the classes.
+//
+// This replaced generateGlobalCSS, which re-derived the same CSS by bundling
+// a temp module with esbuild into tmpdir. It read data.RESET/data.ANIMATION
+// where the module exported reset/animation (resetRules and keyframeRules
+// were always '', and renderRoute fell back to the RAW design-system reset,
+// tokens unresolved); it threw on every cold Cloudflare isolate ("[unenv]
+// fs.writeFileSync is not implemented yet"); and its result was cached per
+// PROCESS, keyed on nothing, so a server rendering two projects gave the
+// second one the first one's :root (FW-BRENDER-HYDRATION-AND-CF-DEPLOY-PROVIDER-1).
+
+// A selector is global when no selector in its list targets a class — the
+// atomic engine's every rule does (`._p-a`, `.c1x:hover`, `[data-theme] .c2`).
+// Quoted strings and attribute brackets are masked first: a dot inside
+// `[href$=".pdf"]` is not a class.
+const CLASS_IN_SELECTOR = /\.[A-Za-z_\\-]/
+const isGlobalSelector = (selectorText) => {
+  if (typeof selectorText !== 'string' || !selectorText) return false
+  const masked = selectorText
+    .replace(/"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/g, '""')
+    .replace(/\[[^\]]*\]/g, '[]')
+  return !CLASS_IN_SELECTOR.test(masked)
+}
+const VARIABLE_SCOPE = /^\s*(:root|\[data-theme|\[data-skin)/
+
+// Classify one CSSOM rule: 'root' (variables, scheme and skin blocks),
+// 'keyframes', 'reset' (any other global rule), or null (stays with the
+// atomic classes).
+const classifyRule = (rule) => {
+  const text = rule && rule.cssText
+  if (typeof text !== 'string') return null
+  if (/^@(-webkit-)?keyframes\b/.test(text)) return 'keyframes'
+  // @font-face stays in the class stream (`css` / data-emotion), where every
+  // consumer — including a mermaid that predates this split and emits only
+  // rootRule/resetCss/keyframeRules + css — has always found it.
+  if (text.startsWith('@font-face')) return null
+  if (typeof rule.selectorText === 'string') {
+    if (!isGlobalSelector(rule.selectorText)) return null
+    return VARIABLE_SCOPE.test(rule.selectorText) ? 'root' : 'reset'
+  }
+  // A grouping rule (@media/@supports/@container) is global when all of its
+  // rules are; it joins the group its rules agree on.
+  const inner = rule.cssRules && Array.from(rule.cssRules)
+  if (inner && inner.length && /^@(media|supports|container)\b/.test(text)) {
+    const kinds = new Set(inner.map(classifyRule))
+    if (kinds.has(null) || kinds.size !== 1) return kinds.has(null) ? null : 'reset'
+    return [...kinds][0]
+  }
+  return null
 }
 
-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')
-
-const generateGlobalCSS = async (ds, config) => {
-  if (_cachedGlobalCSS) return _cachedGlobalCSS
-
-  try {
-    const { existsSync, writeFileSync, unlinkSync } = await import('fs')
-    const { tmpdir } = await import('os')
-    const { randomBytes } = await import('crypto')
-
-    // Guard: skip if filesystem APIs aren't available (e.g. CF Workers)
-    try { tmpdir() } catch { return {} }
-
-    const esbuild = await import('esbuild')
-
-    // Write a temporary script that imports scratch, runs set(), and
-    // serialises the CSS_VARS + RESET objects as JSON.
-    const dsJson = JSON.stringify(ds || {}, safeJsonReplacer())
-    // Config may contain non-serializable values (e.g. a DB client with
-    // circular refs, functions). Strip those for the CSS generation script.
-    const cfgJson = JSON.stringify(config || {}, safeJsonReplacer())
-    const tmpEntry = join(tmpdir(), `br_global_${randomBytes(6).toString('hex')}.mjs`)
-    const tmpOut = join(tmpdir(), `br_global_${randomBytes(6).toString('hex')}_out.mjs`)
-
-    writeFileSync(tmpEntry, `
-      import { set, getActiveConfig, getFontFaceString } from '@symbo.ls/scratch'
-      // Namespace access for the skin builder: a scratch without it (version
-      // skew) gives an empty skin block instead of failing this whole bundle
-      // and, with it, every global rule.
-      import * as scratchNs from '@symbo.ls/scratch'
-      import { DEFAULT_CONFIG } from '@symbo.ls/default-config'
-
-      const ds = ${dsJson}
-      const cfg = ${cfgJson}
-
-      // Merge with defaults (same as initEmotion)
-      const merged = {}
-      for (const k in DEFAULT_CONFIG) merged[k] = DEFAULT_CONFIG[k]
-      for (const k in ds) {
-        if (typeof ds[k] === 'object' && !Array.isArray(ds[k]) && typeof merged[k] === 'object' && !Array.isArray(merged[k])) {
-          merged[k] = { ...merged[k], ...ds[k] }
-        } else {
-          merged[k] = ds[k]
-        }
-      }
-
-      const conf = set({
-        useReset: true,
-        useVariable: true,
-        useFontImport: true,
-        useDocumentTheme: true,
-        useDefaultConfig: true,
-        globalTheme: 'auto',
-        ...merged,
-        ...cfg
-      }, { newConfig: {} })
-
-      const result = {
-        CSS_VARS: conf.CSS_VARS || {},
-        CSS_MEDIA_VARS: conf.CSS_MEDIA_VARS || {},
-        // Skin rules — the same builder smbls init() injects on the client
-        // (FW-SCRATCH-SKINS-DIMENSION-1).
-        CSS_SKIN_RULES: typeof scratchNs.buildSkinVarStyles === 'function'
-          ? scratchNs.buildSkinVarStyles(conf.cssSkinVars, conf.cssSkinFallback, ':root')
-          : {},
-        reset: conf.reset || {},
-        animation: conf.animation || {}
-      }
-      // Export as globalThis so we can read it
-      globalThis.__BR_GLOBAL_CSS__ = result
-      export default result
-    `)
-
-    // Detect workspace layout (monorepo vs npm install)
-    const ws = detectWorkspace()
-
-    // Workspace resolve plugin: maps @symbo.ls/* and @symbo.ls/* to source paths
-    const workspacePlugin = {
-      name: 'workspace-resolve',
-      setup (build) {
-        build.onResolve({ filter: /^@symbo\.ls\// }, args => {
-          const pkg = args.path.replace('@symbo.ls/', '')
-          if (ws.isMonorepo) {
-            for (const dir of ['packages', 'plugins']) {
-              const src = resolve(ws.monorepoRoot, dir, pkg, 'src', 'index.js')
-              if (existsSync(src)) return { path: src }
-              const dist = resolve(ws.monorepoRoot, dir, pkg, 'index.js')
-              if (existsSync(dist)) return { path: dist }
-            }
-            const blank = resolve(ws.monorepoRoot, 'packages', 'default-config', 'blank', 'index.js')
-            if (pkg === 'default-config' && existsSync(blank)) return { path: blank }
-          }
-          // An npm install: no override — esbuild resolves the package's
-          // published `exports` (dist/esm). Forcing the root index.js here
-          // broke every npm consumer: published @symbo.ls/scratch and
-          // @symbo.ls/default-config ship a root index.js that re-exports
-          // ./src/… and ./designSystem/…, which their tarballs do not
-          // contain, so this bundle failed ("Could not resolve
-          // ./src/index.js") and every page lost its :root variables, reset
-          // and @keyframes (found with the xma.info report item 1 repro).
-        })
-        build.onResolve({ filter: /^@domql\// }, args => {
-          const pkg = args.path.replace('@symbo.ls/', '')
-          if (ws.isMonorepo) {
-            const src = resolve(ws.monorepoRoot, 'packages', 'domql', 'packages', pkg, 'src', 'index.js')
-            if (existsSync(src)) return { path: src }
-          } else {
-            const resolved = resolveDomqlPackage(ws, pkg, 'src', 'index.js')
-            if (resolved && existsSync(resolved)) return { path: resolved }
-            const resolvedIdx = resolveDomqlPackage(ws, pkg, 'index.js')
-            if (resolvedIdx && existsSync(resolvedIdx)) return { path: resolvedIdx }
-          }
-        })
-      }
-    }
-
-    await esbuild.build({
-      entryPoints: [tmpEntry],
-      bundle: true,
-      format: 'esm',
-      platform: 'node',
-      outfile: tmpOut,
-      write: true,
-      logLevel: 'silent',
-      plugins: [workspacePlugin],
-      nodePaths: ws.isMonorepo
-        ? [resolve(ws.monorepoRoot, 'node_modules')]
-        : [
-          ...(ws.smblsRoot ? [resolve(ws.smblsRoot, 'node_modules')] : []),
-          ...(ws.projectRoot ? [resolve(ws.projectRoot, 'node_modules')] : []),
-          ...(ws.smblsRoot ? [resolve(ws.smblsRoot, '..', '..', 'node_modules')] : [])
-        ].filter(p => existsSync(p)),
-      external: ['fs', 'path', 'os', 'crypto', 'url', 'http', 'https', 'stream', 'util', 'events', 'buffer', 'child_process', 'worker_threads', 'net', 'tls', 'dns', 'dgram', 'zlib', 'assert', 'querystring', 'string_decoder', 'readline', 'perf_hooks', 'async_hooks', 'v8', 'vm', 'cluster', 'inspector', 'module', 'process', 'tty', 'color-contrast-checker']
-    })
-
-    const mod = await import(`file://${tmpOut}`)
-    const data = mod.default || {}
-    try { unlinkSync(tmpEntry) } catch {} // cleanup: ignore if temp file already removed
-    try { unlinkSync(tmpOut) } catch {} // cleanup: ignore if temp file already removed
-
-    const cssVars = data.CSS_VARS || {}
-    const cssMediaVars = data.CSS_MEDIA_VARS || {}
-    const reset = data.RESET || {}
-    const animations = data.ANIMATION || {}
-
-    // ── :root CSS variables ──
-    const varDecls = Object.entries(cssVars)
-      .map(([k, v]) => `  ${k}: ${v}`)
-      .join(';\n')
-    let rootRule = varDecls ? `:root {\n${varDecls};\n}` : ''
-
-    // ── Theme-switching CSS vars (media queries + data-theme selectors) ──
-    const themeVarRules = Object.entries(cssMediaVars)
-      .map(([key, vars]) => {
-        const decls = Object.entries(vars)
-          .map(([k, v]) => `    ${k}: ${v}`)
-          .join(';\n')
-        if (!decls) return ''
-        if (key.startsWith('@media')) {
-          // Media query — only when no data-theme forces a theme
-          return `${key} {\n  :root:not([data-theme]) {\n${decls};\n  }\n}`
-        }
-        // Selector ([data-theme="..."]) — apply directly
-        return `${key} {\n${decls};\n}`
-      })
-      .filter(Boolean)
-      .join('\n\n')
-    if (themeVarRules) rootRule += '\n\n' + themeVarRules
-
-    // ── Skin rules ([data-skin] selectors + the reduced-transparency block) ──
-    // After the scheme blocks: on an equal specificity the skin wins, as it
-    // does in the hydrated page (smbls init injects them in the same order).
-    const skinRules = skinRulesToCSS(data.CSS_SKIN_RULES)
-    if (skinRules) rootRule += (rootRule ? '\n\n' : '') + skinRules
-
-    // ── Reset styles ──
-    const resetRules = generateResetCSS(reset)
-
-    // ── @keyframes animations ──
-    const keyframeRules = []
-    for (const name in animations) {
-      const frames = animations[name]
-      if (!frames || typeof frames !== 'object') continue
-      const frameRules = Object.entries(frames).map(([step, p]) => {
-        if (typeof p !== 'object') return ''
-        const decls = Object.entries(p).map(([k, v]) => `${camelToKebab(k)}: ${v}`).join('; ')
-        return `  ${step} { ${decls}; }`
-      }).join('\n')
-      keyframeRules.push(`@keyframes ${name} {\n${frameRules}\n}`)
-    }
-
-    _cachedGlobalCSS = {
-      rootRule,
-      resetRules,
-      fontFaceCSS: '',
-      keyframeRules: keyframeRules.join('\n')
-    }
-    return _cachedGlobalCSS
-  } catch (err) {
-    console.warn('generateGlobalCSS failed:', err.message, err.stack)
-    _cachedGlobalCSS = { rootRule: '', resetRules: '', fontFaceCSS: '', keyframeRules: '' }
-    return _cachedGlobalCSS
+export const splitCapturedCSS = (rules) => {
+  const groups = { root: [], reset: [], keyframes: [] }
+  const rest = []
+  for (const rule of rules || []) {
+    const kind = classifyRule(rule)
+    if (kind) groups[kind].push(rule.cssText)
+    else if (rule && rule.cssText) rest.push(rule.cssText)
+  }
+  return {
+    globalCSS: {
+      rootRule: groups.root.join('\n'),
+      resetRules: groups.reset.join('\n'),
+      keyframeRules: groups.keyframes.join('\n'),
+      fontFaceCSS: ''
+    },
+    classRules: rest
   }
 }
 
@@ -1265,7 +1252,7 @@ let _accumulatedEmotionCSS = new Set()
 /**
  * Reset the cached global CSS and emotion CSS (useful when rendering multiple projects).
  */
-export const resetGlobalCSSCache = () => { _cachedGlobalCSS = null; _accumulatedEmotionCSS = new Set() }
+export const resetGlobalCSSCache = () => { _accumulatedEmotionCSS = new Set() }
 
 /**
  * Returns the complete accumulated emotion CSS from all renders so far.
@@ -1297,15 +1284,17 @@ 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 = {}) => {
-  const { route = '/', pathname } = options
+  // `prefetch: false` renders without the DB prefetch and translation fetch
+  // — 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.
   // Pass pathname so the virtual DOM location reflects the actual URL (for dynamic routes)
-  const result = await render(data, { route, pathname, prefetch: true })
+  const result = await render(data, { route, pathname, prefetch })
   if (!result) return null
 
   const ds = data.designSystem || {}
-  const globalCSS = await generateGlobalCSS(ds, pickProjectConfig(data))
+  const globalCSS = result.globalCSS
 
   // Extract prefetched state and language for metadata resolution
   let prefetchedState = null
@@ -1343,13 +1332,18 @@ export const renderRoute = async (data, options = {}) => {
 
   return {
     html: result.html,
-    css: result.emotionCSS ? result.emotionCSS.join('\n') : '',
+    css: result.classRules.join('\n'),
+    // the same rules as a list — a caller that unions several routes' CSS
+    // (the publish-time ssrCache) dedupes by rule
+    classRules: result.classRules.slice(),
     globalCSS,
-    resetCss: globalCSS.resetRules || generateResetCSS(ds.reset),
+    resetCss: globalCSS.resetRules,
     fontLinks: generateFontLinks(ds),
     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
+    fetchSeed: result.fetchSeed || [],
     ssrTranslations: result.ssrTranslations,
     prefetchedState,
     activeLang
@@ -1371,7 +1365,12 @@ export const renderRoute = async (data, options = {}) => {
  * @param {string} [options.lang='en'] - HTML lang attribute
  * @param {string} [options.themeColor] - theme-color meta
  * @param {object} [options.isr] - ISR options with clientScript path
- * @param {boolean} [options.hydrate=true] - Use true hydration (attach to existing DOM) instead of full SPA re-render
+ * @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
  * @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).
@@ -1382,7 +1381,7 @@ 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 } = options
+  const { lang, themeColor, isr, hydrate = true, prefetch = true, shell, adoptDom = false } = options
 
   // Detect lang from project config, app metadata, or default
   const htmlLang = lang || data.state?.lang || data.app?.metadata?.lang || 'en'
@@ -1414,22 +1413,28 @@ export const renderPage = async (data, route = '/', options = {}) => {
   // Each page may introduce unique CSS classes not seen on previous pages.
   // Emotion's singleton cache only emits NEW classes per render, so we
   // collect all rules across renders to build the complete stylesheet.
-  if (result.emotionCSS && result.emotionCSS.length) {
-    for (const rule of result.emotionCSS) {
-      if (rule) _accumulatedEmotionCSS.add(rule)
-    }
+  // Only the classes accumulate: the globals are this page's own (one :root,
+  // one copy of each @keyframes — they used to pile up across pages).
+  for (const rule of result.classRules) {
+    if (rule) _accumulatedEmotionCSS.add(rule)
   }
   const emotionCSS = Array.from(_accumulatedEmotionCSS).join('\n')
 
-  // Generate global CSS (variables, reset, keyframes) via scratch pipeline
-  const ds = data.designSystem || {}
-  const globalCSS = await generateGlobalCSS(ds, pickProjectConfig(data))
+  // 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
 
+  // The element-path registry — with the opt-in hydration flag and the
+  // recorded fetch answers under `adoptDom` (adoptionScripts).
+  const bootScripts = adoptionScripts({ brRegistry: result.brRegistry, fetchSeed: result.fetchSeed, hydrateFlag: adoptDom })
+
   // ISR: include client SPA bundle for hydration + data fetching
   let isrBody = ''
   if (isr && isr.clientScript) {
@@ -1470,12 +1475,7 @@ export const renderPage = async (data, route = '/', options = {}) => {
         }
       }
       // Embed BR registry for true DOM-adoption hydration
-      const brRegistryJson = result.brRegistry && Object.keys(result.brRegistry).length
-        ? JSON.stringify(result.brRegistry)
-        : null
-      const brRegistryScript = brRegistryJson
-        ? `<script>window.__BR_REGISTRY__=${brRegistryJson}</script>\n`
-        : ''
+      const brRegistryScript = bootScripts ? bootScripts + '\n' : ''
       isrBody = `${translationSeed}${brRegistryScript}<script>window.__BRENDER__=true</script>
 <script type="module" src="${prefix}${isr.clientScript}"></script>`
     } else {
@@ -1525,32 +1525,26 @@ export const renderPage = async (data, route = '/', options = {}) => {
   // 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>${globalCSS.fontFaceCSS}</style>` : '',
-      `<style>\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'),
+      headEnd: [fontLinks, brenderStyle, emotionStyle].filter(Boolean).join('\n'),
       body: result.html,
-      depth: Number.isInteger(options.depth) ? options.depth : 0
+      depth: Number.isInteger(options.depth) ? options.depth : 0,
+      bootScripts: adoptDom ? bootScripts : ''
     })
     return { html, route, brKeyCount, shell: true }
   }
 
+  // (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}
 ${fontLinks}
-${globalCSS.fontFaceCSS ? `<style>${globalCSS.fontFaceCSS}</style>` : ''}
-<style>
-${globalCSS.rootRule || ''}
-${globalCSS.resetRules || ''}
-${globalCSS.keyframeRules || ''}
-</style>
-${emotionCSS ? `<style data-emotion="smbls">\n${emotionCSS}\n</style>` : ''}
+
+${brenderStyle}
+${emotionStyle}
 </head>
 <body>
 ${result.html}
@@ -1561,425 +1555,6 @@ ${isrBody}
   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
-}
-
-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')
-}
-
-const generateResetCSS = (reset) => {
-  if (!reset) return ''
-  const rules = []
-  for (const [selector, props] of Object.entries(reset)) {
-    if (!props || typeof props !== 'object') continue
-    const baseDecls = []
-    const mediaRules = []
-    for (const [k, v] of Object.entries(props)) {
-      if (typeof v === 'object' && v !== null) {
-        // Nested object: @media query or sub-selector
-        if (k.startsWith('@media') || k.startsWith('@')) {
-          const inner = Object.entries(v)
-            .filter(([, iv]) => typeof iv !== 'object')
-            .map(([ik, iv]) => `${camelToKebab(ik)}: ${iv}`)
-            .join('; ')
-          if (inner) mediaRules.push(`${k} { ${selector} { ${inner}; } }`)
-        }
-        continue
-      }
-      baseDecls.push(`${camelToKebab(k)}: ${v}`)
-    }
-    if (baseDecls.length) rules.push(`${selector} { ${baseDecls.join('; ')}; }`)
-    rules.push(...mediaRules)
-  }
-  return rules.join('\n')
-}
-
 const generateFontLinks = (ds) => {
   if (!ds) return ''
   const families = ds.font_family || ds.fontFamily || {}