@symbo.ls/brender 3.14.7 → 3.14.8

package/render.js

@@ -0,0 +1,1894 @@
+import { resolve, join, dirname } from 'path'
+import { existsSync, writeFileSync, unlinkSync, readFileSync, realpathSync } from 'fs'
+import { tmpdir } from 'os'
+import { randomBytes } from 'crypto'
+import { createRequire } from 'module'
+import { createEnv } from './env.js'
+import { resetKeys, assignKeys, mapKeysToElements } from './keys.js'
+import { extractMetadata, generateHeadHtml } from './metadata.js'
+import { hydrate } from './hydrate.js'
+import { prefetchPageData, injectPrefetchedState, fetchSSRTranslations } from './prefetch.js'
+
+// funcql plugin — enables evaluation of funcql schemas as property values
+// during SSR. Async-imported to avoid polluting non-funcql codepaths.
+let _funcqlPlugin = null
+const getFuncqlPlugin = async () => {
+  if (_funcqlPlugin) return _funcqlPlugin
+  try {
+    const mod = await import('@symbo.ls/funcql')
+    _funcqlPlugin = mod.funcqlPlugin
+    return _funcqlPlugin
+  } catch {
+    return null
+  }
+}
+import { parseHTML } from 'linkedom'
+import { css, injectGlobal, reset as resetCss } from '@symbo.ls/css'
+
+// Lightweight SSR polyglot functions — resolve translations from context
+// without needing the full polyglot plugin runtime
+const ssrResolve = (map, key) => {
+  if (!map || !key) return undefined
+  if (map[key] !== undefined) return map[key]
+  // Try nested dot-path (e.g. "ui.main.latest")
+  const parts = key.split('.')
+  let v = map
+  for (const p of parts) {
+    if (v == null || typeof v !== 'object') return undefined
+    v = v[p]
+  }
+  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'
+
+  // Static translations from context.polyglot.translations
+  if (poly?.translations) {
+    const langMap = poly.translations[activeLang]
+    if (langMap) {
+      const val = ssrResolve(langMap, key)
+      if (val !== undefined) return val
+    }
+  }
+
+  // Server-loaded translations in root state
+  const root = this?.state?.root || ctx?.state?.root
+  if (root?.translations) {
+    const langMap = root.translations[activeLang]
+    if (langMap) {
+      const val = ssrResolve(langMap, key)
+      if (val !== undefined) return val
+    }
+  }
+
+  // Fallback to default lang
+  const defaultLang = poly?.defaultLang || 'en'
+  if (defaultLang !== activeLang && poly?.translations) {
+    const fallback = poly.translations[defaultLang]
+    if (fallback) {
+      const val = ssrResolve(fallback, key)
+      if (val !== undefined) return val
+    }
+  }
+
+  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'
+}
+
+// Deep clone that preserves functions and avoids circular refs
+const structuredCloneDeep = (obj, seen = new WeakMap()) => {
+  if (obj === null || typeof obj !== 'object') return obj
+  if (seen.has(obj)) return seen.get(obj)
+  if (Array.isArray(obj)) {
+    const arr = []
+    seen.set(obj, arr)
+    for (const v of obj) arr.push(typeof v === 'object' && v !== null ? structuredCloneDeep(v, seen) : v)
+    return arr
+  }
+  const clone = {}
+  seen.set(obj, clone)
+  for (const k of Object.keys(obj)) {
+    const v = obj[k]
+    clone[k] = typeof v === 'object' && v !== null ? structuredCloneDeep(v, seen) : v
+  }
+  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.
+// Guard createRequire for bundled environments (e.g. Cloudflare Workers)
+// where import.meta.url may be undefined after bundling.
+let _brenderRequire = null
+try {
+  if (import.meta.url) {
+    _brenderRequire = createRequire(import.meta.url)
+  }
+} catch {
+  // Bundled runtime — filesystem-based resolution not available
+}
+
+const detectWorkspace = () => {
+  // In bundled environments (CF Workers), import.meta.url may be undefined.
+  // Return a minimal workspace config that skips filesystem-based resolution.
+  if (!import.meta.url || !_brenderRequire) {
+    return { isMonorepo: false, monorepoRoot: null, resolvePackage: (pkg) => pkg }
+  }
+  const brenderDir = realpathSync(new URL('.', import.meta.url).pathname)
+  const monorepoRoot = resolve(brenderDir, '../..')
+
+  // Check if monorepo layout exists (packages/smbls/src/createDomql.js)
+  const isMonorepo = existsSync(resolve(monorepoRoot, 'packages', 'smbls', 'src', 'createDomql.js'))
+
+  if (isMonorepo) {
+    return { isMonorepo: true, monorepoRoot }
+  }
+
+  // npm install context — resolve packages from node_modules
+  // Find the smbls package root via require.resolve
+  let smblsRoot
+  try {
+    const smblsPkg = _brenderRequire.resolve('smbls/package.json')
+    smblsRoot = dirname(smblsPkg)
+  } catch {
+    // Fallback: walk up from brenderDir looking for node_modules/smbls
+    let dir = brenderDir
+    while (dir !== dirname(dir)) {
+      const candidate = resolve(dir, 'node_modules', 'smbls')
+      if (existsSync(resolve(candidate, 'package.json'))) {
+        smblsRoot = candidate
+        break
+      }
+      dir = dirname(dir)
+    }
+  }
+
+  // Create a require function from smbls root so we can resolve its dependencies
+  // (e.g. @symbo.ls/scratch, @symbo.ls/default-config which are deps of smbls, not brender)
+  let _smblsRequire = _brenderRequire
+  if (smblsRoot) {
+    try {
+      _smblsRequire = createRequire(resolve(smblsRoot, 'package.json'))
+    } catch {} // fallback: module not found via this resolver, trying next
+  }
+
+  // Also find the project root (where the user's package.json is)
+  let projectRoot
+  let dir = process.cwd()
+  while (dir !== dirname(dir)) {
+    if (existsSync(resolve(dir, 'package.json'))) {
+      projectRoot = dir
+      break
+    }
+    dir = dirname(dir)
+  }
+
+  // Create a require from project root for hoisted deps
+  let _projectRequire = _smblsRequire
+  if (projectRoot) {
+    try {
+      _projectRequire = createRequire(resolve(projectRoot, 'package.json'))
+    } catch {} // fallback: module not found via this resolver, trying next
+  }
+
+  return { isMonorepo: false, smblsRoot, brenderDir, projectRoot, _smblsRequire, _projectRequire }
+}
+
+// Try multiple require functions to resolve a package (brender scope, smbls scope, project scope)
+const tryRequireResolve = (ws, specifier) => {
+  const requireFns = ws.isMonorepo
+    ? [_brenderRequire]
+    : [ws._smblsRequire, ws._projectRequire, _brenderRequire].filter(Boolean)
+  for (const req of requireFns) {
+    try {
+      return req.resolve(specifier)
+    } catch {} // fallback: module not found via this resolver, trying next
+  }
+  return null
+}
+
+// Resolve a package path — monorepo layout or node_modules
+const resolvePackagePath = (ws, pkgName, ...subpath) => {
+  if (ws.isMonorepo) {
+    return resolve(ws.monorepoRoot, 'packages', pkgName, ...subpath)
+  }
+  const pkgJson = tryRequireResolve(ws, `${pkgName}/package.json`)
+  if (pkgJson) return resolve(dirname(pkgJson), ...subpath)
+  return null
+}
+
+const resolvePluginPath = (ws, pluginName, ...subpath) => {
+  if (ws.isMonorepo) {
+    return resolve(ws.monorepoRoot, 'plugins', pluginName, ...subpath)
+  }
+  const pkgJson = tryRequireResolve(ws, `@symbo.ls/${pluginName}/package.json`)
+  if (pkgJson) return resolve(dirname(pkgJson), ...subpath)
+  return null
+}
+
+const resolveSymbolsPackage = (ws, pkg, ...subpath) => {
+  if (ws.isMonorepo) {
+    for (const dir of ['packages', 'plugins']) {
+      const src = resolve(ws.monorepoRoot, dir, pkg, ...subpath)
+      if (existsSync(src)) return src
+    }
+    return null
+  }
+  const pkgJson = tryRequireResolve(ws, `@symbo.ls/${pkg}/package.json`)
+  if (pkgJson) return resolve(dirname(pkgJson), ...subpath)
+  return null
+}
+
+const resolveDomqlPackage = (ws, pkg, ...subpath) => {
+  if (ws.isMonorepo) {
+    return resolve(ws.monorepoRoot, 'packages', 'domql', 'packages', pkg, ...subpath)
+  }
+  const pkgJson = tryRequireResolve(ws, `@symbo.ls/${pkg}/package.json`)
+  if (pkgJson) return resolve(dirname(pkgJson), ...subpath)
+  return null
+}
+
+// ── Bundled import of createDomqlElement ──────────────────────────────────────
+// The smbls source tree uses extensionless/directory imports that Node.js ESM
+// cannot resolve natively. We bundle createDomql.js with esbuild (once, cached)
+// so all bare/directory specifiers are resolved at bundle time.
+let _cachedCreateDomql = null
+
+const bundleCreateDomql = async () => {
+  if (_cachedCreateDomql) return _cachedCreateDomql
+
+  const ws = detectWorkspace()
+
+  // In bundled environments (CF Workers), use the pre-bundled createDomql.
+  // Generated by: node scripts/prebundle-createDomql.js (or during npm prepublish)
+  if (!_brenderRequire) {
+    try {
+      const mod = await import('./dist/createDomql.bundled.mjs')
+      _cachedCreateDomql = mod
+      return mod
+    } catch (err) {
+      throw new Error(`brender: pre-bundled createDomql not available in bundled runtime: ${err.message}`)
+    }
+  }
+
+  // Resolve entry point
+  let entry
+  if (ws.isMonorepo) {
+    entry = resolve(ws.monorepoRoot, 'packages', 'smbls', 'src', 'createDomql.js')
+  } else if (ws.smblsRoot) {
+    // Prefer src/ (shipped in smbls package), fall back to dist
+    const srcEntry = resolve(ws.smblsRoot, 'src', 'createDomql.js')
+    const distEntry = resolve(ws.smblsRoot, 'dist', 'esm', 'src', 'createDomql.js')
+    entry = existsSync(srcEntry) ? srcEntry : distEntry
+  }
+
+  if (!entry || !existsSync(entry)) {
+    throw new Error(`brender: cannot find createDomql.js (isMonorepo=${ws.isMonorepo}, entry=${entry})`)
+  }
+
+  const esbuild = await import('esbuild')
+  const outFile = join(tmpdir(), `br_createDomql_${randomBytes(6).toString('hex')}.mjs`)
+
+  // Helper to find a file trying src/ then root index.js
+  const tryResolve = (base) => {
+    if (!base) return null
+    const src = resolve(base, 'src', 'index.js')
+    if (existsSync(src)) return src
+    const idx = resolve(base, 'index.js')
+    if (existsSync(idx)) return idx
+    return null
+  }
+
+  const workspacePlugin = {
+    name: 'workspace-resolve',
+    setup (build) {
+      // Resolve smbls bare import
+      build.onResolve({ filter: /^smbls/ }, (args) => {
+        const subpath = args.path.replace(/^smbls\/?/, '')
+        const smblsBase = ws.isMonorepo
+          ? resolve(ws.monorepoRoot, 'packages', 'smbls')
+          : ws.smblsRoot
+        if (!smblsBase) return
+        if (!subpath) {
+          const r = tryResolve(smblsBase)
+          if (r) return { path: r }
+          return
+        }
+        const full = resolve(smblsBase, subpath)
+        if (existsSync(full)) return { path: full }
+        if (existsSync(full + '.js')) return { path: full + '.js' }
+        const idx = resolve(full, 'index.js')
+        if (existsSync(idx)) return { path: idx }
+      })
+      // Resolve domql bare import
+      build.onResolve({ filter: /^domql$/ }, (args) => {
+        if (ws.isMonorepo) {
+          const src = resolve(ws.monorepoRoot, 'packages', 'domql', 'src', 'index.js')
+          if (existsSync(src)) return { path: src }
+          const dist = resolve(ws.monorepoRoot, 'packages', 'domql', 'index.js')
+          if (existsSync(dist)) return { path: dist }
+        } else {
+          try {
+            const pkgJson = _require.resolve('domql/package.json')
+            const r = tryResolve(dirname(pkgJson))
+            if (r) return { path: r }
+          } catch {} // fallback: module not found via this resolver, trying next
+        }
+      })
+      // Resolve @symbo.ls/* packages (skip sync — stubbed above)
+      build.onResolve({ filter: /^@symbo\.ls\// }, args => {
+        const pkg = args.path.replace('@symbo.ls/', '')
+        if (pkg === 'sync') return { path: 'sync-stub', namespace: 'brender-stub' }
+        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 }
+        } else {
+          const resolved = resolveSymbolsPackage(ws, pkg, 'src', 'index.js')
+          if (resolved && existsSync(resolved)) return { path: resolved }
+          const resolvedIdx = resolveSymbolsPackage(ws, pkg, 'index.js')
+          if (resolvedIdx && existsSync(resolvedIdx)) return { path: resolvedIdx }
+          // default-config blank
+          if (pkg === 'default-config') {
+            const blank = resolveSymbolsPackage(ws, 'default-config', 'blank', 'index.js')
+            if (blank && existsSync(blank)) return { path: blank }
+          }
+        }
+      })
+      // Resolve @symbo.ls/* packages
+      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 }
+          const dist = resolve(ws.monorepoRoot, 'packages', 'domql', 'packages', pkg, 'index.js')
+          if (existsSync(dist)) return { path: dist }
+        } 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 }
+        }
+      })
+      // Resolve css-in-props
+      build.onResolve({ filter: /^css-in-props/ }, args => {
+        let base
+        if (ws.isMonorepo) {
+          base = resolve(ws.monorepoRoot, 'packages', 'css-in-props')
+        } else {
+          const pkgJson = tryRequireResolve(ws, 'css-in-props/package.json')
+          if (pkgJson) base = dirname(pkgJson)
+        }
+        if (!base) return
+        const subpath = args.path.replace(/^css-in-props\/?/, '')
+        if (subpath) {
+          const full = resolve(base, subpath)
+          const idx = resolve(full, 'index.js')
+          if (existsSync(idx)) return { path: idx }
+          if (existsSync(full + '.js')) return { path: full + '.js' }
+          if (existsSync(full)) return { path: full }
+        }
+        const r = tryResolve(base)
+        if (r) return { path: r }
+      })
+      // Resolve @emotion/* from node_modules
+      build.onResolve({ filter: /^@emotion\// }, args => {
+        let nm
+        if (ws.isMonorepo) {
+          nm = resolve(ws.monorepoRoot, 'node_modules', args.path)
+        } else {
+          const pkgJson = tryRequireResolve(ws, `${args.path}/package.json`)
+          if (!pkgJson) return
+          nm = dirname(pkgJson)
+        }
+        if (existsSync(nm)) {
+          const pkg = resolve(nm, 'package.json')
+          if (existsSync(pkg)) {
+            try {
+              const p = JSON.parse(readFileSync(pkg, 'utf8'))
+              const main = p.module || p.main || 'dist/emotion-css.esm.js'
+              return { path: resolve(nm, main) }
+            } catch {} // expected: value is not a valid JSON
+          }
+          return { path: nm }
+        }
+      })
+      // Handle JSON imports
+      build.onResolve({ filter: /\.json$/ }, args => {
+        if (args.resolveDir) {
+          const full = resolve(args.resolveDir, args.path)
+          if (existsSync(full)) return { path: full }
+        }
+      })
+      // Fix options.js: replace createRequire + package.json version import
+      // Match both src/ and dist/esm/src/ paths
+      build.onLoad({ filter: /smbls\/.*options\.js$/ }, async (args) => {
+        if (!args.path.includes('smbls/') || !args.path.endsWith('options.js')) return
+        let contents = readFileSync(args.path, 'utf8')
+        // Replace import attributes (package.json with { type: 'json' })
+        contents = contents.replace(
+          /import\s*\{[^}]*version[^}]*\}\s*from\s*['"][^'"]*package\.json['"][^;\n]*/,
+          "const version = '0.0.0'"
+        )
+        contents = contents.replace(
+          /import\s*\{[^}]*createRequire[^}]*\}\s*from\s*['"]module['"][^;\n]*/g,
+          '// createRequire removed for brender build'
+        )
+        return { contents, loader: 'js' }
+      })
+      // Fix init.js: remove createRequire (match both src/ and dist/)
+      build.onLoad({ filter: /smbls\/.*init\.js$/ }, async (args) => {
+        if (!args.path.includes('smbls/') || !args.path.endsWith('init.js')) return
+        let contents = readFileSync(args.path, 'utf8')
+        contents = contents.replace(
+          /import\s*\{[^}]*createRequire[^}]*\}\s*from\s*['"]module['"][^;\n]*/g,
+          '// createRequire removed for brender build'
+        )
+        return { contents, loader: 'js' }
+      })
+      // Stub the Supabase adapter during brender — the prefetch system handles
+      // data fetching separately via its own Supabase client. The DOMQL fetch
+      // plugin's on.create handler shouldn't fire during SSR.
+      build.onLoad({ filter: /fetch\/adapters\/supabase\.js$/ }, () => {
+        return {
+          contents: `export const setup = async () => null;\nexport const supabaseAdapter = () => ({name:'supabase'});\n`,
+          loader: 'js'
+        }
+      })
+      // No-op: globals.js keeps window = globalThis
+      // We set globalThis.document/location before import to make it SSR-safe
+      // Stub loader for brender-stub namespace (used for @symbo.ls/sync etc.)
+      build.onLoad({ filter: /.*/, namespace: 'brender-stub' }, () => {
+        return { contents: 'export const SyncComponent = {}; export const Inspect = {}; export const Notifications = {}; export default {}', loader: 'js' }
+      })
+      // Fix router.js: break circular import of Link from smbls
+      build.onLoad({ filter: /smbls\/src\/router\.js$/ }, async (args) => {
+        let contents = readFileSync(args.path, 'utf8')
+        contents = contents.replace(
+          /import\s*\{\s*Link\s*\}\s*from\s*['"]smbls['"]/,
+          `const Link = { tag: 'a', attr: { href: (el) => el.href } }`
+        )
+        return { contents, loader: 'js' }
+      })
+      // Fix fetchOnCreate.js: guard window.location access
+      build.onLoad({ filter: /fetchOnCreate\.js$/ }, async (args) => {
+        if (!args.path.includes('smbls/')) return
+        let contents = readFileSync(args.path, 'utf8')
+        // Make window.location.host access safe for SSR
+        contents = contents.replace(
+          /window\s*&&\s*window\.location\s*\?\s*window\.location\.host\.includes/g,
+          'window && window.location && window.location.host ? window.location.host.includes'
+        )
+        return { contents, loader: 'js' }
+      })
+      // Let esbuild handle remaining npm deps via nodePaths
+    }
+  }
+
+  await esbuild.build({
+    entryPoints: [entry],
+    bundle: true,
+    format: 'esm',
+    platform: 'node',
+    outfile: outFile,
+    write: true,
+    logLevel: 'warning',
+    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)),
+    supported: { 'import-attributes': false },
+    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', 'linkedom'
+    ]
+  })
+
+  const mod = await import(`file://${outFile}`)
+  // Keep temp file in debug mode for inspection
+  if (!process.env.BRENDER_DEBUG) {
+    try { unlinkSync(outFile) } catch {}
+  } else {
+    console.log('[brender] Bundle saved:', outFile)
+  }
+
+  _cachedCreateDomql = mod
+  return mod
+}
+
+// ── Minimal uikit stubs ──────────────────────────────────────────────────────
+// Lightweight versions of uikit components so DOMQL can resolve extends chains
+// (tag, display, attrs) without importing the full @symbo.ls/uikit package.
+const UIKIT_STUBS = {
+  Box: {},
+  Focusable: {},
+  Block: { display: 'block' },
+  Inline: { display: 'inline' },
+  Flex: { display: 'flex' },
+  InlineFlex: { display: 'inline-flex' },
+  Grid: { display: 'grid' },
+  InlineGrid: { display: 'inline-grid' },
+  Link: {
+    tag: 'a',
+    attr: {
+      href: (el) => el.href,
+      target: (el) => el.target,
+      rel: (el) => el.rel
+    }
+  },
+  A: { extends: 'Link' },
+  RouteLink: { extends: 'Link' },
+  Img: {
+    tag: 'img',
+    attr: {
+      src: (el) => {
+        let src = el.src
+        if (typeof src === 'string' && src.includes('{{')) {
+          src = el.call('replaceLiteralsWithObjectFields', src, el.state)
+        }
+        return src
+      },
+      alt: (el) => el.alt,
+      loading: (el) => el.loading
+    }
+  },
+  Image: { extends: 'Img' },
+  Button: { tag: 'button' },
+  FocusableComponent: { tag: 'button' },
+  Form: { tag: 'form' },
+  Input: { tag: 'input' },
+  TextArea: { tag: 'textarea' },
+  Textarea: { tag: 'textarea' },
+  Select: { tag: 'select' },
+  Label: { tag: 'label' },
+  Iframe: { tag: 'iframe' },
+  Video: { tag: 'video' },
+  Audio: { tag: 'audio' },
+  Canvas: { tag: 'canvas' },
+  Span: { tag: 'span' },
+  P: { tag: 'p' },
+  H1: { tag: 'h1' },
+  H2: { tag: 'h2' },
+  H3: { tag: 'h3' },
+  H4: { tag: 'h4' },
+  H5: { tag: 'h5' },
+  H6: { tag: 'h6' },
+  Svg: {
+    tag: 'svg',
+    attr: {
+      xmlns: 'http://www.w3.org/2000/svg',
+      'xmlns:xlink': 'http://www.w3.org/1999/xlink'
+    }
+  },
+  Text: { tag: 'span' }
+}
+
+// ── BR path registry ─────────────────────────────────────────────────────────
+
+/**
+ * Walks a DOMQL element tree (after mapKeysToElements has set __brKey on each
+ * element) and returns a plain object mapping "element path" → "data-br key".
+ *
+ * The path is a dot-separated chain of element keys from root to leaf:
+ *   '' (root element itself) → '__root'
+ *   'Header'                 → 'Header'
+ *   'Header.Nav'             → 'Header.Nav'
+ *
+ * The registry is serialized into the pre-rendered HTML so the browser can
+ * assign the correct brKey to each skeleton element during true hydration.
+ */
+const buildPathRegistry = (element, path = '') => {
+  if (!element || !element.__ref) return {}
+  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))
+      }
+    }
+  }
+
+  return registry
+}
+
+/**
+ * Renders a Symbols/DOMQL project to HTML on the server.
+ *
+ * Accepts project data as a plain object (matching what ProjectDataService provides)
+ * or as a pre-loaded smbls context. Runs DOMQL in a linkedom virtual DOM,
+ * assigns data-br keys for hydration, and extracts page metadata for SEO.
+ *
+ * @param {object} data - Project data object with: pages, components, designSystem,
+ *   state, functions, methods, snippets, files, app, config/settings
+ * @param {object} [options]
+ * @param {string} [options.route='/'] - The route/page to render
+ * @param {object} [options.state] - State overrides
+ * @param {object} [options.context] - Additional context overrides
+ * @returns {Promise<{ html: string, metadata: object, registry: object, element: object }>}
+ */
+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)
+  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
+    }
+  }
+
+  // ── SSR polyglot translations ──
+  // Fetch translations from the DB so polyglot resolves during render
+  let ssrTranslations
+  if (prefetch) {
+    try {
+      ssrTranslations = await fetchSSRTranslations(data)
+    } catch (e) {
+      console.warn('[brender] SSR translation fetch failed:', e.message)
+    }
+  }
+
+  // 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
+
+  // Import createDomqlElement via bundled smbls source.
+  // The smbls monorepo uses extensionless/directory imports that Node.js ESM
+  // can't resolve natively, so we bundle it with esbuild first.
+  const { createDomqlElement } = await bundleCreateDomql()
+
+  const app = structuredCloneDeep(data.app || {})
+
+  // Config fields may be nested under data.config or spread at the top level
+  // (frank spreads config.js exports at the top level of the JSON)
+  const config = { ...(data.config || {}) }
+  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']) {
+    if (data[k] != null && config[k] == null) config[k] = data[k]
+  }
+
+  // Inject SSR translations into polyglot config and root state
+  const polyglotConfig = config.polyglot ? { ...config.polyglot } : undefined
+  if (ssrTranslations && polyglotConfig) {
+    polyglotConfig.translations = {
+      ...(polyglotConfig.translations || {}),
+      ...ssrTranslations
+    }
+  }
+
+  const baseState = structuredCloneDeep(data.state || {})
+  // Ensure root state has lang and translations for polyglot resolution
+  if (ssrTranslations || polyglotConfig) {
+    if (!baseState.root) baseState.root = {}
+    if (polyglotConfig) {
+      baseState.root.lang = baseState.root.lang || polyglotConfig.defaultLang || 'en'
+    }
+    if (ssrTranslations) {
+      baseState.root.translations = {
+        ...(baseState.root.translations || {}),
+        ...ssrTranslations
+      }
+    }
+  }
+
+  // Reset the atomic CSS engine for this render pass
+  resetCss()
+
+  const ctx = {
+    state: baseState,
+    ...(stateOverrides ? { state: { ...baseState, ...stateOverrides } } : {}),
+    dependencies: structuredCloneDeep(data.dependencies || {}),
+    components: structuredCloneDeep(data.components || {}),
+    snippets: structuredCloneDeep(data.snippets || {}),
+    pages: structuredCloneDeep(prefetchedPages || data.pages || {}),
+    functions: {
+      ...(data.functions || {}),
+      // SSR polyglot functions — enable {{ key | polyglot }} resolution during render
+      polyglot: ssrTranslate,
+      getActiveLang: ssrGetActiveLang,
+      getLang: ssrGetActiveLang
+    },
+    methods: data.methods || {},
+    designSystem: structuredCloneDeep(data.designSystem || {}),
+    files: data.files || {},
+    sharedLibraries: data.sharedLibraries || [],
+    ...config,
+    // Override polyglot with SSR-enriched version
+    ...(polyglotConfig ? { polyglot: polyglotConfig } : {}),
+    // Virtual DOM environment
+    document,
+    window,
+    parent: { node: body },
+    initOptions: {},
+    // Disable sourcemap tracking in SSR — it causes stack overflows
+    // when state contains large data arrays (articles, events, etc.)
+    domqlOptions: { sourcemap: false },
+    // Caller overrides
+    ...(contextOverrides || {})
+  }
+
+  // Add funcql plugin if available (enables funcql schema evaluation in exec())
+  const funcql = await getFuncqlPlugin()
+  if (funcql) {
+    ctx.plugins = ctx.plugins || []
+    if (!ctx.plugins.some(p => p.name === 'funcql')) {
+      ctx.plugins.push(funcql)
+    }
+  }
+
+  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))
+
+  // Assign data-br keys for hydration
+  assignKeys(body)
+
+  const registry = mapKeysToElements(element)
+
+  // 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)
+
+  // Extract metadata for the rendered route
+  // Pass the rendered element and its state so function-valued metadata
+  // (e.g. detail page titles from fetched data) can be resolved
+  const metadata = extractMetadata(data, route, element, element?.state)
+
+  // Extract CSS from style tags in virtual head (atomic CSS engine writes here)
+  const emotionCSS = []
+  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 (!emotionCSS.length) {
+        const content = style.textContent || ''
+        if (content) emotionCSS.push(content)
+      }
+    }
+  }
+
+  let html = fixSvgContent(body.innerHTML)
+
+  // 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
+    })
+  }
+
+  // Restore globalThis after render
+  if (_prevDoc !== undefined) globalThis.document = _prevDoc
+  else delete globalThis.document
+  if (_prevLoc !== undefined) globalThis.location = _prevLoc
+  else delete globalThis.location
+
+  return { html, metadata, registry, brRegistry, element, emotionCSS, document, window, ssrTranslations, prefetchedPages }
+}
+
+/**
+ * Renders a single DOMQL element definition to HTML.
+ * Useful for rendering individual components without a full project.
+ *
+ * @param {object} elementDef - DOMQL element definition
+ * @param {object} [options]
+ * @param {object} [options.context] - DOMQL context (components, designSystem, etc.)
+ * @returns {Promise<{ html: string, registry: object, element: object }>}
+ */
+export const renderElement = async (elementDef, options = {}) => {
+  const { context = {} } = options
+
+  const { window, document } = createEnv()
+  const body = document.body
+
+  const { create } = await import('@symbo.ls/element')
+  const domqlUtils = await import('@symbo.ls/utils')
+
+  // Merge minimal uikit stubs so DOMQL resolves extends chains
+  // (e.g. extends: 'Link' → tag: 'a', extends: 'Flex' → display: flex)
+  const components = { ...UIKIT_STUBS, ...(context.components || {}) }
+
+  // Register utility functions so element.call() can resolve them
+  // (e.g. replaceLiteralsWithObjectFields for {{ }} templates)
+  const utils = {
+    ...domqlUtils,
+    ...(context.utils || {}),
+    ...(context.functions || {})
+  }
+
+  resetKeys()
+
+  let element
+  try {
+    element = create(elementDef, { node: body }, 'root', {
+      context: { document, window, ...context, components, utils }
+    })
+  } catch (err) {
+    // Lifecycle events (onRender, onDone, etc.) may throw in SSR
+    // because they access browser-only APIs. The DOM tree is built
+    // before these fire, so we can still extract HTML.
+  }
+
+  assignKeys(body)
+  const registry = element ? mapKeysToElements(element) : {}
+  const html = fixSvgContent(body.innerHTML)
+
+  return { html, registry, element }
+}
+
+// ── SVG content post-processing ───────────────────────────────────────────────
+// DOMQL's html mixin uses textContent for SVG nodes, which escapes HTML entities.
+// This post-processor unescapes content inside <svg> tags so paths/circles render.
+const fixSvgContent = (html) => {
+  return html.replace(
+    /(<svg\b[^>]*>)([\s\S]*?)(<\/svg>)/gi,
+    (match, open, content, close) => {
+      if (content.includes('&lt;')) {
+        const unescaped = content
+          .replace(/&lt;/g, '<')
+          .replace(/&gt;/g, '>')
+          .replace(/&amp;/g, '&')
+          .replace(/&quot;/g, '"')
+          .replace(/&#39;/g, "'")
+        return open + unescaped + close
+      }
+      return match
+    }
+  )
+}
+
+// ── 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.
+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
+}
+
+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. Supabase 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'
+      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 || {},
+        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 }
+          } else {
+            const resolved = resolveSymbolsPackage(ws, pkg, 'src', 'index.js')
+            if (resolved && existsSync(resolved)) return { path: resolved }
+            const resolvedIdx = resolveSymbolsPackage(ws, pkg, 'index.js')
+            if (resolvedIdx && existsSync(resolvedIdx)) return { path: resolvedIdx }
+            if (pkg === 'default-config') {
+              const blank = resolveSymbolsPackage(ws, 'default-config', 'blank', 'index.js')
+              if (blank && existsSync(blank)) return { path: blank }
+            }
+          }
+        })
+        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
+
+    // ── 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
+  }
+}
+
+// Accumulate emotion CSS across all page renders.
+// Each page may generate unique CSS classes (e.g. page-specific components/styles).
+// Emotion's singleton cache marks classes as "inserted" after the first render,
+// so subsequent renders only produce NEW classes not seen before.
+// We merge all CSS rules across renders to ensure every page has complete styles.
+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() }
+
+/**
+ * Returns the complete accumulated emotion CSS from all renders so far.
+ * Call this after rendering ALL pages to get the full CSS needed by every page.
+ */
+export const getAccumulatedEmotionCSS = () => Array.from(_accumulatedEmotionCSS).join('\n')
+
+/**
+ * Replace the emotion CSS in a rendered HTML page with updated CSS.
+ * Used in two-pass rendering: render all pages first, then inject complete CSS.
+ */
+export const replaceEmotionCSS = (html, newCSS) => {
+  return html.replace(
+    /<style data-emotion="smbls">[\s\S]*?<\/style>/,
+    newCSS ? `<style data-emotion="smbls">\n${newCSS}\n</style>` : ''
+  )
+}
+
+// ── Route-level SSR ───────────────────────────────────────────────────────────
+
+/**
+ * Renders a single route and returns body HTML + CSS separately.
+ * Designed for integration with an existing server router that manages
+ * its own <head>, template, and bundle injection.
+ *
+ * @param {object} data - Full project data
+ * @param {object} [options]
+ * @param {string} [options.route='/'] - Route to render
+ * @returns {Promise<{ html: string, css: string, resetCss: string, fontLinks: string, metadata: object, brKeyCount: number }>}
+ */
+export const renderRoute = async (data, options = {}) => {
+  const { route = '/', pathname } = 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 })
+  if (!result) return null
+
+  const ds = data.designSystem || {}
+  const globalCSS = await generateGlobalCSS(ds, pickProjectConfig(data))
+
+  // Extract prefetched state and language for metadata resolution
+  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)
+    }
+  } catch (e) { /* ignore */ }
+
+  return {
+    html: result.html,
+    css: result.emotionCSS ? result.emotionCSS.join('\n') : '',
+    globalCSS,
+    resetCss: globalCSS.resetRules || generateResetCSS(ds.reset),
+    fontLinks: generateFontLinks(ds),
+    metadata: result.metadata || extractMetadata(data, route),
+    brKeyCount: result.registry ? Object.keys(result.registry).length : 0,
+    brRegistry: result.brRegistry || {},
+    ssrTranslations: result.ssrTranslations,
+    prefetchedState,
+    activeLang
+  }
+}
+
+// ── Full page SSR ─────────────────────────────────────────────────────────────
+
+/**
+ * Renders a complete HTML page for a route — ready to serve.
+ * Uses the full smbls pipeline (createDomqlElement) so the output
+ * matches exactly what the SPA produces in the browser.
+ *
+ * Includes head, metadata, fonts, reset CSS, component CSS, and body.
+ *
+ * @param {object} data - Full project data (from loadProject)
+ * @param {string} route - Route to render (e.g. '/', '/about')
+ * @param {object} [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.prefetch=true] - Whether to prefetch data via DB adapter
+ * @returns {Promise<{ html: string, route: string, brKeyCount: number }>}
+ */
+export const renderPage = async (data, route = '/', options = {}) => {
+  const { lang, themeColor, isr, hydrate = true, prefetch = true } = options
+
+  // 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 })
+  if (!result) return null
+
+  const metadata = { ...result.metadata }
+  if (themeColor) metadata['theme-color'] = themeColor
+  const headTags = generateHeadHtml(metadata)
+
+  // Accumulate emotion CSS from each page render.
+  // 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)
+    }
+  }
+  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))
+
+  // Generate font links from design system
+  const fontLinks = generateFontLinks(ds)
+
+  const brKeyCount = Object.keys(result.registry).length
+
+  // ISR: include client SPA bundle for hydration + data fetching
+  let isrBody = ''
+  if (isr && isr.clientScript) {
+    // Calculate relative path from route directory to root
+    const depth = route === '/' ? 0 : route.replace(/^\/|\/$/g, '').split('/').length
+    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.
+      //
+      // Seed client-side polyglot with SSR translations so that
+      // el.call('polyglot', key) resolves immediately during hydration
+      // instead of showing raw keys until the async fetch completes.
+      let translationSeed = ''
+      if (result.ssrTranslations) {
+        const polyglotCfg = data.polyglot || data.config?.polyglot
+        const storagePrefix = polyglotCfg?.storagePrefix || ''
+        const storageLangKey = polyglotCfg?.storageLangKey || ''
+        const seedEntries = []
+        for (const lang in result.ssrTranslations) {
+          const map = result.ssrTranslations[lang]
+          if (map && typeof map === 'object') {
+            seedEntries.push(`localStorage.setItem(${JSON.stringify(storagePrefix + lang)},${JSON.stringify(JSON.stringify(map))})`)
+          }
+        }
+        if (storageLangKey) {
+          const defaultLang = polyglotCfg?.defaultLang || 'en'
+          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`
+        }
+      }
+      // 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`
+        : ''
+      isrBody = `${translationSeed}${brRegistryScript}<script>window.__BRENDER__=true</script>
+<script type="module" src="${prefix}${isr.clientScript}"></script>`
+    } else {
+      // Legacy swap mode: SPA creates new DOM, MutationObserver removes brender nodes
+      isrBody = `<script type="module">
+{
+  const brEls = document.querySelectorAll('body > :not(script):not(style)')
+  const observer = new MutationObserver((mutations) => {
+    for (const m of mutations) {
+      for (const node of m.addedNodes) {
+        if (node.nodeType === 1 && node.tagName !== 'SCRIPT' && node.tagName !== 'STYLE' && !node.hasAttribute('data-br')) {
+          brEls.forEach(el => { if (el.hasAttribute('data-br') || el.querySelector('[data-br]')) el.remove() })
+          observer.disconnect()
+          return
+        }
+      }
+    }
+  })
+  observer.observe(document.body, { childList: true })
+}
+</script>
+<script type="module" src="${prefix}${isr.clientScript}"></script>`
+    }
+  }
+
+  // Resolve any {{ key | polyglot }} templates in head tags (title, meta, etc.)
+  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 langMap = translations[defaultLang] || {}
+    resolvedHeadTags = headTags.replace(/\{\{\s*([^|{}]+?)\s*\|\s*polyglot\s*\}\}/g, (match, key) => {
+      const trimmed = key.trim()
+      return langMap[trimmed] ?? match
+    })
+  }
+
+  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>` : ''}
+</head>
+<body>
+${result.html}
+${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
+}
+
+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 || {}
+  const fontNames = new Set()
+
+  // Collect font family names from the design system
+  for (const val of Object.values(families)) {
+    if (typeof val !== 'string') continue
+    const match = val.match(/'([^']+)'/)
+    if (match) fontNames.add(match[1])
+  }
+
+  if (!fontNames.size) return ''
+
+  // Build Google Fonts URL
+  const params = [...fontNames].map(name => {
+    const slug = name.replace(/\s+/g, '+')
+    return `family=${slug}:wght@300;400;500;600;700`
+  }).join('&')
+
+  return [
+    '<link rel="preconnect" href="https://fonts.googleapis.com">',
+    '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>',
+    `<link href="https://fonts.googleapis.com/css2?${params}&display=swap" rel="stylesheet">`
+  ].join('\n')
+}