@symbo.ls/brender 3.14.663 → 3.14.664

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @symbo.ls/brender
 
+## 3.14.664
+
+### Patch Changes
+
+- Performance pass on the 3.14.827–3.14.832 batch, and opt-in View Transitions.
+
+  - Element create is faster than 3.14.826 again (kekela-like 4,068-element tree: create CPU min 1,265–1,355 ms vs 1,361–1,532 ms on 3.14.826). Per-definition caching of the extends merge layers (46,330 → 13,600 entries), no per-element source-text reads, one attribute writer.
+  - `css()` 3x faster (21 → 7 µs per call), byte-identical CSS output.
+  - Helmet renders a head layer only when its values change (20 `root.update({})` → 0 head renders, was 40). One runtime head writer: `applyElementMetadata`.
+  - brender/mermaid: registry script is escaped on the ISR and non-adopt paths; head/SSR output byte-identical otherwise.
+  - View Transitions for page switches (opt-in), `viewTransitionName` / `viewTransitionClass` flat props, `designSystem.viewTransition` animations.
+  - utils exports shared helpers used by helmet, frank, fetch and polyglot (escapeHtml, jsonForScript, alternateLinkKey, faviconLinkKey, bareLibraryKey, librarySpecsFor, polyglotLangStorageKey, ...).
+
+- Updated dependencies
+  - smbls@3.14.833
+  - @symbo.ls/element@3.14.803
+  - @symbo.ls/css@3.14.777
+  - @symbo.ls/scratch@3.14.788
+  - @symbo.ls/utils@3.14.786
+  - @symbo.ls/fetch@3.14.664
+  - @symbo.ls/helmet@3.14.670
+
 ## 3.14.663
 
 ### Patch Changes

package/dist/esm/render.js

@@ -1,25 +1,22 @@
-import{resolve as d,join as At,dirname as T}from"path";import{existsSync as y,unlinkSync as Pt,readFileSync as V,realpathSync as qt}from"fs";import{resolvePackageEntry as It}from"./packageEntry.js";import{tmpdir as vt}from"os";import{randomBytes as Dt}from"crypto";import{createRequire as ot}from"module";import{createEnv as at}from"./env.js";import{resetKeys as ft,assignKeys as ut,mapKeysToElements as pt}from"./keys.js";import{extractMetadata as st,generateHeadHtml as Mt}from"./metadata.js";import"./hydrate.js";import{composeIntoShell as Bt}from"./shell.js";import{prefetchPageData as Ft,injectPrefetchedState as Nt,fetchSSRTranslations as Wt}from"./prefetch.js";import{createEarlySeedScript as Ht}from"@symbo.ls/fetch";let X=null;const Gt=async()=>{if(X)return X;try{return X=(await import("@symbo.ls/funcql")).funcqlPlugin,X}catch{return null}};import"linkedom";import{reset as Jt}from"@symbo.ls/css";const rt=(t,e)=>{if(!t||!e)return;if(t[e]!==void 0)return t[e];const n=e.split(".");let o=t;for(const i of n){if(o==null||typeof o!="object")return;o=o[i]}return o},Kt=function(t,e){if(!t)return"";const n=this?.context,o=n?.polyglot,i=e||o?.defaultLang||"en";if(o?.translations){const a=o.translations[i];if(a){const r=rt(a,t);if(r!==void 0)return r}}const c=this?.state?.root||n?.state?.root;if(c?.translations){const a=c.translations[i];if(a){const r=rt(a,t);if(r!==void 0)return r}}const u=o?.defaultLang||"en";if(u!==i&&o?.translations){const a=o.translations[u];if(a){const r=rt(a,t);if(r!==void 0)return r}}return t},dt=function(){const t=this?.context;return this?.state?.root?.lang||t?.polyglot?.defaultLang||"en"},A=(t,e=new WeakMap)=>{if(t===null||typeof t!="object")return t;if(e.has(t))return e.get(t);if(Array.isArray(t)){const o=[];e.set(t,o);for(const i of t)o.push(typeof i=="object"&&i!==null?A(i,e):i);return o}const n={};e.set(t,n);for(const o of Object.keys(t)){const i=t[o];n[o]=typeof i=="object"&&i!==null?A(i,e):i}return n};let F=null;try{import.meta.url&&(F=ot(import.meta.url))}catch{}const zt=()=>{if(!import.meta.url||!F)return{isMonorepo:!1,monorepoRoot:null,resolvePackage:r=>r};const t=qt(new URL(".",import.meta.url).pathname),e=d(t,"../..");if(y(d(e,"packages","smbls","src","createDomql.js")))return{isMonorepo:!0,monorepoRoot:e};let o;try{const r=F.resolve("smbls/package.json");o=T(r)}catch{let r=t;for(;r!==T(r);){const s=d(r,"node_modules","smbls");if(y(d(s,"package.json"))){o=s;break}r=T(r)}}let i=F;if(o)try{i=ot(d(o,"package.json"))}catch{}let c,u=process.cwd();for(;u!==T(u);){if(y(d(u,"package.json"))){c=u;break}u=T(u)}let a=i;if(c)try{a=ot(d(c,"package.json"))}catch{}return{isMonorepo:!1,smblsRoot:o,brenderDir:t,projectRoot:c,_smblsRequire:i,_projectRequire:a}},K=(t,e)=>{const n=t.isMonorepo?[F]:[t._smblsRequire,t._projectRequire,F].filter(Boolean);for(const o of n)try{return o.resolve(e)}catch{}return null},qe=(t,e,...n)=>{if(t.isMonorepo)return d(t.monorepoRoot,"packages",e,...n);const o=K(t,`${e}/package.json`);return o?d(T(o),...n):null},Ie=(t,e,...n)=>{if(t.isMonorepo)return d(t.monorepoRoot,"plugins",e,...n);const o=K(t,`@symbo.ls/${e}/package.json`);return o?d(T(o),...n):null},it=(t,e,...n)=>{if(t.isMonorepo){for(const i of["packages","plugins"]){const c=d(t.monorepoRoot,i,e,...n);if(y(c))return c}return null}const o=K(t,`@symbo.ls/${e}/package.json`);return o?d(T(o),...n):null},mt=(t,e,...n)=>{if(t.isMonorepo)return d(t.monorepoRoot,"packages","domql","packages",e,...n);const o=K(t,`@symbo.ls/${e}/package.json`);return o?d(T(o),...n):null};let N=null;const gt="smbls/ssr",ht=async()=>{const t=await import("smbls/ssr");if(typeof t?.createDomqlElement!="function")throw new Error("smbls/ssr does not export createDomqlElement");return t},Ut=async()=>{if(N)return N;const t=zt();if(!F)try{return N=await ht(),N}catch(a){throw new Error(`brender: ${gt} is not available in this bundled runtime (${a.message}). Bundle smbls \u2265 the release that adds the smbls/ssr export alongside @symbo.ls/brender.`)}let e;if(t.isMonorepo)e=d(t.monorepoRoot,"packages","smbls","src","createDomql.js");else{let a;try{return N=await ht(),N}catch(s){a=s}const r=t.smblsRoot&&d(t.smblsRoot,"src","createDomql.js");if(r&&y(r))e=r;else throw new Error(`brender: cannot load ${gt} (${a.message}). Server rendering needs smbls installed in this project, at a release that exports smbls/ssr`+(t.smblsRoot?` (found smbls at ${t.smblsRoot}).`:" (no smbls package found)."))}const n=await import("esbuild"),o=At(vt(),`br_createDomql_${Dt(6).toString("hex")}.mjs`),i=It,c={name:"workspace-resolve",setup(a){a.onResolve({filter:/^smbls/},r=>{const s=r.path.replace(/^smbls\/?/,""),f=t.isMonorepo?d(t.monorepoRoot,"packages","smbls"):t.smblsRoot;if(!f)return;if(!s){const h=i(f);return h?{path:h}:void 0}const l=d(f,s);if(y(l))return{path:l};if(y(l+".js"))return{path:l+".js"};const p=d(l,"index.js");if(y(p))return{path:p}}),a.onResolve({filter:/^domql$/},r=>{if(t.isMonorepo){const s=d(t.monorepoRoot,"packages","domql","src","index.js");if(y(s))return{path:s};const f=d(t.monorepoRoot,"packages","domql","index.js");if(y(f))return{path:f}}else try{const s=_require.resolve("domql/package.json"),f=i(T(s));if(f)return{path:f}}catch{}}),a.onResolve({filter:/^@symbo\.ls\//},r=>{const s=r.path.replace("@symbo.ls/","");if(s==="sync")return{path:"sync-stub",namespace:"brender-stub"};if(t.isMonorepo){for(const l of["packages","plugins"]){const p=d(t.monorepoRoot,l,s,"src","index.js");if(y(p))return{path:p};const h=d(t.monorepoRoot,l,s,"index.js");if(y(h))return{path:h}}const f=d(t.monorepoRoot,"packages","default-config","blank","index.js");if(s==="default-config"&&y(f))return{path:f}}else{const f=it(t,s,"src","index.js");if(f&&y(f))return{path:f};const l=it(t,s,"index.js");if(l&&y(l))return{path:l};if(s==="default-config"){const p=it(t,"default-config","blank","index.js");if(p&&y(p))return{path:p}}}}),a.onResolve({filter:/^@domql\//},r=>{const s=r.path.replace("@symbo.ls/","");if(t.isMonorepo){const f=d(t.monorepoRoot,"packages","domql","packages",s,"src","index.js");if(y(f))return{path:f};const l=d(t.monorepoRoot,"packages","domql","packages",s,"index.js");if(y(l))return{path:l}}else{const f=mt(t,s,"src","index.js");if(f&&y(f))return{path:f};const l=mt(t,s,"index.js");if(l&&y(l))return{path:l}}}),a.onResolve({filter:/^css-in-props/},r=>{let s;if(t.isMonorepo)s=d(t.monorepoRoot,"packages","css-in-props");else{const p=K(t,"css-in-props/package.json");p&&(s=T(p))}if(!s)return;const f=r.path.replace(/^css-in-props\/?/,"");if(f){const p=d(s,f),h=d(p,"index.js");if(y(h))return{path:h};if(y(p+".js"))return{path:p+".js"};if(y(p))return{path:p}}const l=i(s);if(l)return{path:l}}),a.onResolve({filter:/^@emotion\//},r=>{let s;if(t.isMonorepo)s=d(t.monorepoRoot,"node_modules",r.path);else{const f=K(t,`${r.path}/package.json`);if(!f)return;s=T(f)}if(y(s)){const f=d(s,"package.json");if(y(f))try{const l=JSON.parse(V(f,"utf8")),p=l.module||l.main||"dist/emotion-css.esm.js";return{path:d(s,p)}}catch{}return{path:s}}}),a.onResolve({filter:/\.json$/},r=>{if(r.resolveDir){const s=d(r.resolveDir,r.path);if(y(s))return{path:s}}}),a.onLoad({filter:/smbls\/.*options\.js$/},async r=>{if(!r.path.includes("smbls/")||!r.path.endsWith("options.js"))return;let s=V(r.path,"utf8");return s=s.replace(/import\s*\{[^}]*version[^}]*\}\s*from\s*['"][^'"]*package\.json['"][^;\n]*/,"const version = '0.0.0'"),s=s.replace(/import\s*\{[^}]*createRequire[^}]*\}\s*from\s*['"]module['"][^;\n]*/g,"// createRequire removed for brender build"),{contents:s,loader:"js"}}),a.onLoad({filter:/smbls\/.*init\.js$/},async r=>{if(!r.path.includes("smbls/")||!r.path.endsWith("init.js"))return;let s=V(r.path,"utf8");return s=s.replace(/import\s*\{[^}]*createRequire[^}]*\}\s*from\s*['"]module['"][^;\n]*/g,"// createRequire removed for brender build"),{contents:s,loader:"js"}}),a.onLoad({filter:/.*/,namespace:"brender-stub"},()=>({contents:"export const SyncComponent = {}; export const Inspect = {}; export const Notifications = {}; export const syncPlugin = () => ({}); export const notificationsPlugin = () => ({}); export const seedRawDesignSystem = () => {}; export const inspectPlugin = () => ({}); export default {}",loader:"js"})),a.onLoad({filter:/smbls\/src\/router\.js$/},async r=>{let s=V(r.path,"utf8");return s=s.replace(/import\s*\{\s*Link\s*\}\s*from\s*['"]smbls['"]/,"const Link = { tag: 'a', attr: { href: (el) => el.href } }"),{contents:s,loader:"js"}}),a.onLoad({filter:/fetchOnCreate\.js$/},async r=>{if(!r.path.includes("smbls/"))return;let s=V(r.path,"utf8");return s=s.replace(/window\s*&&\s*window\.location\s*\?\s*window\.location\.host\.includes/g,"window && window.location && window.location.host ? window.location.host.includes"),{contents:s,loader:"js"}})}};await n.build({entryPoints:[e],bundle:!0,format:"esm",platform:"node",outfile:o,write:!0,logLevel:"warning",plugins:[c],nodePaths:t.isMonorepo?[d(t.monorepoRoot,"node_modules")]:[...t.smblsRoot?[d(t.smblsRoot,"node_modules")]:[],...t.projectRoot?[d(t.projectRoot,"node_modules")]:[],...t.smblsRoot?[d(t.smblsRoot,"..","..","node_modules")]:[]].filter(a=>y(a)),supported:{"import-attributes":!1},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 u=await import(`file://${o}`);if(process.env.BRENDER_DEBUG)console.log("[brender] Bundle saved:",o);else try{Pt(o)}catch{}return N=u,u},Yt={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:t=>t.href,target:t=>t.target,rel:t=>t.rel}},A:{extends:"Link"},RouteLink:{extends:"Link"},Img:{tag:"img",attr:{src:t=>{let e=t.src;return typeof e=="string"&&e.includes("{{")&&(e=t.call("replaceLiteralsWithObjectFields",e,t.state)),e},alt:t=>t.alt,loading:t=>t.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"}},yt=(t,e="")=>{if(!t||!t.__ref)return{};const n={},o=t.__ref.__brKey;if(o&&(n[e===""?"__root":e]=o),t.__ref.__children)for(const i of t.__ref.__children){const c=t[i];if(c&&c.__ref){const u=e===""?i:`${e}.${i}`;Object.assign(n,yt(c,u))}}return n};let z=0;const bt=Symbol.for("brender.fetchTracked"),St=()=>z,Vt=256*1024,Xt=1024*1024,Zt=new Set(["accept-language","accept"]);let lt=0,q=null;const Qt=t=>{const[e,n]=t,o=e&&typeof e=="object"&&typeof e.url=="string",i=o?e.url:String(e),c=String(n&&n.method||o&&e.method||"GET").toUpperCase(),u={},a=r=>{if(r)if(typeof r.forEach=="function"&&!Array.isArray(r))r.forEach((s,f)=>{u[String(f).toLowerCase()]=String(s)});else if(Array.isArray(r))for(const[s,f]of r)u[String(s).toLowerCase()]=String(f);else for(const s in r)r[s]!=null&&(u[s.toLowerCase()]=String(r[s]))};return o&&a(e.headers),n&&a(n.headers),{url:i,method:c,headers:u}},te=(t,e,n,o)=>{if(!n||!n.ok||typeof n.clone!="function")return;const i=n.headers&&n.headers.get&&n.headers.get("content-type")||"";if(!/json|^text\//i.test(i))return;let c;try{c=n.clone()}catch{return}o(c.text().then(u=>{t.tainted||u.length>Vt||t.bytes+u.length>Xt||(t.bytes+=u.length,t.entries.push({url:e.url,lang:e.headers["accept-language"]||"",status:n.status,type:i,body:u}))},()=>{}))},ee=()=>{const t=globalThis.fetch;if(typeof t!="function"||t[bt])return;const e=function(...n){z++;let o=!1;const i=()=>{o||(o=!0,z--)},c=s=>{z++,s.then(()=>{z--},()=>{z--})},u=q&&!q.tainted?q:null;let a=null;if(u)try{a=Qt(n),(a.method!=="GET"||!/^https?:/i.test(a.url)||Object.keys(a.headers).some(s=>!Zt.has(s)))&&(a=null)}catch{a=null}let r;try{r=t.apply(this,n)}catch(s){throw i(),s}return r&&typeof r.then=="function"?r.then(s=>{a&&te(u,a,s,c),i()},i):i(),r};e[bt]=!0,globalThis.fetch=e},ct=({brRegistry:t,fetchSeed:e}={})=>!t||!Object.keys(t).length?"":`<script>window.__BR_REGISTRY__=${JSON.stringify(t).replace(/</g,"\\u003c")};window.__BRENDER_HYDRATE__=true<\/script>`+(e&&e.length?`
-`+Ht(e):""),wt=async(t,e={})=>{const{route:n="/",pathname:o,state:i,context:c,prefetch:u=!1}=e,a=o||n,r=globalThis.location,s=globalThis.window;(!globalThis.location||globalThis.location.pathname!==a)&&(globalThis.location={pathname:a,href:a,search:"",hash:"",origin:""}),globalThis.window||(globalThis.window={location:globalThis.location});let f;if(u)try{const g=t.pages||{};f={...g};const b=await Ft(t,n);if(b.size){const P=JSON.parse(JSON.stringify(g[n],(C,D)=>{if(typeof D!="function")return D})),J=(C,D)=>{if(!(!C||!D))for(const O in C)typeof C[O]=="function"?D[O]=C[O]:typeof C[O]=="object"&&C[O]!==null&&!Array.isArray(C[O])&&typeof D[O]=="object"&&D[O]!==null&&J(C[O],D[O])};J(g[n],P),Nt(P,b),f[n]=P}}catch(g){console.error("[brender] Prefetch error:",g),f=t.pages}let l;if(u)try{l=await Wt(t)}catch(g){console.warn("[brender] SSR translation fetch failed:",g.message)}r!==void 0?globalThis.location=r:delete globalThis.location,s!==void 0?globalThis.window=s:delete globalThis.window;const{window:p,document:h}=at(),S=h.body;p.location.pathname=a;const w=globalThis.document,m=globalThis.location;globalThis.document=h,globalThis.location=p.location;const{createDomqlElement:R}=await Ut(),E=A(t.app||{}),x={...t.config||{}};t.polyglot&&!x.polyglot&&(x.polyglot=t.polyglot),t.fetch&&!x.fetch&&(x.fetch=t.fetch),t.router&&!x.router&&(x.router=t.router);for(const g of ne)t[g]!=null&&x[g]==null&&(x[g]=t[g]);const _=x.polyglot?{...x.polyglot}:void 0;l&&_&&(_.translations={..._.translations||{},...l});const j=A(t.state||{});(l||_)&&(j.root||(j.root={}),_&&(j.root.lang=j.root.lang||_.defaultLang||"en"),l&&(j.root.translations={...j.root.translations||{},...l})),Jt();const W={};for(const g in t){if(g==="app"||g==="config"||g==="pages"||g==="components"||g==="state"||g==="snippets"||g==="designSystem"||g==="dependencies")continue;const b=t[g];W[g]=b&&typeof b=="object"?A(b):b}const H={...W,state:j,...i?{state:{...j,...i}}:{},dependencies:A(t.dependencies||{}),components:A(t.components||{}),snippets:A(t.snippets||{}),pages:A(f||t.pages||{}),functions:{...t.functions||{},polyglot:Kt,getActiveLang:dt,getLang:dt},methods:t.methods||{},designSystem:A(t.designSystem||{}),files:t.files||{},sharedLibraries:t.sharedLibraries||[],...x,..._?{polyglot:_}:{},document:h,window:p,parent:{node:S},initOptions:{},domqlOptions:{sourcemap:!1},sync:!1,inspect:!1,notifications:!1,...c||{}},k=await Gt();k&&(H.plugins=H.plugins||[],H.plugins.some(g=>g.name==="funcql")||H.plugins.push(k)),ft(),ee(),lt++,lt===1?q={entries:[],bytes:0,tainted:!1}:q&&(q.tainted=!0);const L=q;let $;try{$=await R(E,H);const g=Date.now(),b=u?2e3:50,P=J=>new Promise(C=>setTimeout(C,J));for(await P(Math.min(50,b));u&&St()>0&&Date.now()-g<b;){for(;St()>0&&Date.now()-g<b;)await P(10);await P(Math.max(0,Math.min(50,b-(Date.now()-g))))}}finally{lt--,q===L&&(q=null)}const G=L&&!L.tainted?L.entries.slice():[];ut(S);const U=pt($),M=yt($),et=st(t,n,$,$?.state),I=[],v=[],B=h.head||h.querySelector("head");if(B)for(const g of B.querySelectorAll("style")){if(g.sheet&&g.sheet.cssRules)for(const b of g.sheet.cssRules)b.cssText&&(I.push(b.cssText),v.push(b));if(!I.length){const b=g.textContent||"";b&&(I.push(b),v.push({cssText:b}))}}const{globalCSS:Y,classRules:Ot}=ie(v);let nt=Rt(S.innerHTML);if(l){const g=_?.defaultLang||"en",b=l[g]||Object.values(l)[0]||{};nt=nt.replace(/\{\{\s*([^|{}]+?)\s*\|\s*polyglot\s*\}\}/g,(P,J)=>{const C=J.trim();return b[C]??P})}return w!==void 0?globalThis.document=w:delete globalThis.document,m!==void 0?globalThis.location=m:delete globalThis.location,{html:nt,metadata:et,registry:U,brRegistry:M,element:$,emotionCSS:I,globalCSS:Y,classRules:Ot,fetchSeed:G,document:h,window:p,ssrTranslations:l,prefetchedPages:f}},ve=async(t,e={})=>{const{context:n={}}=e,{window:o,document:i}=at(),c=i.body,{create:u}=await import("@symbo.ls/element"),a=await import("@symbo.ls/utils"),r={...Yt,...n.components||{}},s={...a,...n.utils||{},...n.functions||{}};ft();let f;try{f=u(t,{node:c},"root",{context:{document:i,window:o,...n,components:r,utils:s}})}catch{}ut(c);const l=f?pt(f):{};return{html:Rt(c.innerHTML),registry:l,element:f}},Rt=t=>t.replace(/(<svg\b[^>]*>)([\s\S]*?)(<\/svg>)/gi,(e,n,o,i)=>{if(o.includes("&lt;")){const c=o.replace(/&lt;/g,"<").replace(/&gt;/g,">").replace(/&amp;/g,"&").replace(/&quot;/g,'"').replace(/&#39;/g,"'");return n+c+i}return e}),ne=["globalTheme","themeStorageKey","themeRoot","useReset","useVariable","useFontImport","useIconSprite","useSvgSprite","useDocumentTheme","useDefaultConfig","useDefaultIcons","useThemeSuffixedVars","verbose","semanticIcons"],xt=(t,e,n)=>{const o=Object.entries(e||{}).map(([i,c])=>`${n}  ${i}: ${c}`).join(`;
-`);return o?`${n}${t} {
-${o};
-${n}}`:""},De=t=>Object.entries(t||{}).map(([e,n])=>{if(!e.startsWith("@"))return xt(e,n,"");const o=Object.entries(n||{}).map(([i,c])=>xt(i,c,"  ")).filter(Boolean).join(`
-`);return o?`${e} {
-${o}
-}`:""}).filter(Boolean).join(`
-
-`),oe=/\.[A-Za-z_\\-]/,se=t=>{if(typeof t!="string"||!t)return!1;const e=t.replace(/"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/g,'""').replace(/\[[^\]]*\]/g,"[]");return!oe.test(e)},re=/^\s*(:root|\[data-theme|\[data-skin)/,_t=t=>{const e=t&&t.cssText;if(typeof e!="string")return null;if(/^@(-webkit-)?keyframes\b/.test(e))return"keyframes";if(e.startsWith("@font-face"))return null;if(typeof t.selectorText=="string")return se(t.selectorText)?re.test(t.selectorText)?"root":"reset":null;const n=t.cssRules&&Array.from(t.cssRules);if(n&&n.length&&/^@(media|supports|container)\b/.test(e)){const o=new Set(n.map(_t));return o.has(null)||o.size!==1?o.has(null)?null:"reset":[...o][0]}return null},ie=t=>{const e={root:[],reset:[],keyframes:[]},n=[];for(const o of t||[]){const i=_t(o);i?e[i].push(o.cssText):o&&o.cssText&&n.push(o.cssText)}return{globalCSS:{rootRule:e.root.join(`
-`),resetRules:e.reset.join(`
-`),keyframeRules:e.keyframes.join(`
-`),fontFaceCSS:""},classRules:n}};let Z=new Set;const Me=()=>{Z=new Set},Be=()=>Array.from(Z).join(`
-`),Fe=(t,e)=>t.replace(/<style data-emotion="smbls">[\s\S]*?<\/style>/,e?`<style data-emotion="smbls">
-${e}
-</style>`:""),Ne=async(t,e={})=>{const{route:n="/",pathname:o,prefetch:i=!0}=e,c=await wt(t,{route:n,pathname:o,prefetch:i});if(!c)return null;const u=t.designSystem||{},a=c.globalCSS;let r=null,s=null;try{const f=c.element,l=f?.context?.polyglot||t.polyglot||t.config?.polyglot;if(s=f?.state?.root?.lang||l?.defaultLang||"en",c.prefetchedPages&&c.prefetchedPages[n]){const p=c.prefetchedPages[n],h=(S,w={})=>{if(!S||typeof S!="object")return w;if(S.state&&typeof S.state=="object")for(const[m,R]of Object.entries(S.state))R!=null&&typeof R!="function"&&(w[m]=R);for(const[m,R]of Object.entries(S))m==="state"||m==="props"||m==="attr"||m==="on"||m==="define"||m==="__ref"||m.startsWith("__")||R&&typeof R=="object"&&!Array.isArray(R)&&h(R,w);return w};r=h(p)}}catch{}return{html:c.html,css:c.classRules.join(`
-`),classRules:c.classRules.slice(),globalCSS:a,resetCss:a.resetRules,fontLinks:Lt(u),metadata:c.metadata||st(t,n),brKeyCount:c.registry?Object.keys(c.registry).length:0,brRegistry:c.brRegistry||{},fetchSeed:c.fetchSeed||[],ssrTranslations:c.ssrTranslations,prefetchedState:r,activeLang:s}},We=async(t,e="/",n={})=>{const{lang:o,themeColor:i,isr:c,hydrate:u=!0,prefetch:a=!0,shell:r,adoptDom:s=!1}=n,f=o||t.state?.lang||t.app?.metadata?.lang||"en",l=await wt(t,{route:e,prefetch:a});if(!l)return null;const p={...l.metadata};if(i&&(p["theme-color"]=i),typeof r=="string"&&!t.name){const k="\0brender-undeclared-title\0";if(st({...t,name:k},e,l.element,l.element?.state).title===k)for(const $ of["title","og:title","twitter:title"])p[$]===l.metadata.title&&delete p[$]}const h=Mt(p);for(const k of l.classRules)k&&Z.add(k);const S=Array.from(Z).join(`
-`),w=t.designSystem||{},m=l.globalCSS,R=Lt(w),E=Object.keys(l.registry).length;let x="";if(c&&c.clientScript){const k=Number.isInteger(n.depth)?n.depth:e==="/"?0:e.replace(/^\/|\/$/g,"").split("/").length,L=k>0?"../".repeat(k):"./";if(u){let $="";if(l.ssrTranslations){const M=t.polyglot||t.config?.polyglot,et=M?.storagePrefix||"",I=M?.storageLangKey||"",v=[];for(const B in l.ssrTranslations){const Y=l.ssrTranslations[B];Y&&typeof Y=="object"&&v.push(`localStorage.setItem(${JSON.stringify(et+B)},${JSON.stringify(JSON.stringify(Y))})`)}if(I){const B=M?.defaultLang||"en";v.push(`if(!localStorage.getItem(${JSON.stringify(I)}))localStorage.setItem(${JSON.stringify(I)},${JSON.stringify(B)})`)}v.length&&($=`<script>try{${v.join(";")}}catch(e){}<\/script>
-`)}const G=l.brRegistry&&Object.keys(l.brRegistry).length?JSON.stringify(l.brRegistry):null,U=s?ct(l)?ct(l)+`
-`:"":G?`<script>window.__BR_REGISTRY__=${G}<\/script>
-`:"";x=`${$}${U}<script>window.__BRENDER__=true<\/script>
-<script type="module" src="${L}${c.clientScript}"><\/script>`}else x=`<script type="module">
+import{resolve as u,join as ke,dirname as v}from"path";import{existsSync as d,unlinkSync as we,readFileSync as V,realpathSync as xe}from"fs";import{resolvePackageEntry as _e}from"./packageEntry.js";import{tmpdir as je}from"os";import{randomBytes as ve}from"crypto";import{createRequire as oe}from"module";import{createEnv as ie}from"./env.js";import{resetKeys as ae,assignKeys as ce,mapKeysToElements as fe}from"./keys.js";import{extractMetadata as ne,generateHeadHtml as Te}from"./metadata.js";import"./hydrate.js";import{composeIntoShell as Ee}from"./shell.js";import{prefetchPageData as Le,injectPrefetchedState as Ce,fetchSSRTranslations as qe}from"./prefetch.js";import{createEarlySeedScript as $e}from"@symbo.ls/fetch";import{headerEntries as Pe}from"@symbo.ls/fetch/rest";import{jsonForScript as De}from"@symbo.ls/utils";let Q=null;const Ae=async()=>{if(Q)return Q;try{return Q=(await import("@symbo.ls/funcql")).funcqlPlugin,Q}catch{return null}};import"linkedom";import{reset as Me}from"@symbo.ls/css";const se=(e,t)=>{if(!e||!t)return;if(e[t]!==void 0)return e[t];const o=t.split(".");let n=e;for(const l of o){if(n==null||typeof n!="object")return;n=n[l]}return n},Oe=function(e,t){if(!e)return"";const o=this?.context,n=o?.polyglot,l=t||n?.defaultLang||"en";if(n?.translations){const c=n.translations[l];if(c){const r=se(c,e);if(r!==void 0)return r}}const a=this?.state?.root||o?.state?.root;if(a?.translations){const c=a.translations[l];if(c){const r=se(c,e);if(r!==void 0)return r}}const p=n?.defaultLang||"en";if(p!==l&&n?.translations){const c=n.translations[p];if(c){const r=se(c,e);if(r!==void 0)return r}}return e},pe=function(){const e=this?.context;return this?.state?.root?.lang||e?.polyglot?.defaultLang||"en"},L=(e,t=new WeakMap)=>{if(e===null||typeof e!="object")return e;if(t.has(e))return t.get(e);if(Array.isArray(e)){const n=[];t.set(e,n);for(const l of e)n.push(typeof l=="object"&&l!==null?L(l,t):l);return n}const o={};t.set(e,o);for(const n of Object.keys(e)){const l=e[n];o[n]=typeof l=="object"&&l!==null?L(l,t):l}return o};let M=null;try{import.meta.url&&(M=oe(import.meta.url))}catch{}const Ie=()=>{if(!import.meta.url||!M)return{isMonorepo:!1,monorepoRoot:null,resolvePackage:r=>r};const e=xe(new URL(".",import.meta.url).pathname),t=u(e,"../..");if(d(u(t,"packages","smbls","src","createDomql.js")))return{isMonorepo:!0,monorepoRoot:t};let n;try{const r=M.resolve("smbls/package.json");n=v(r)}catch{let r=e;for(;r!==v(r);){const s=u(r,"node_modules","smbls");if(d(u(s,"package.json"))){n=s;break}r=v(r)}}let l=M;if(n)try{l=oe(u(n,"package.json"))}catch{}let a,p=process.cwd();for(;p!==v(p);){if(d(u(p,"package.json"))){a=p;break}p=v(p)}let c=l;if(a)try{c=oe(u(a,"package.json"))}catch{}return{isMonorepo:!1,smblsRoot:n,brenderDir:e,projectRoot:a,_smblsRequire:l,_projectRequire:c}},K=(e,t)=>{const o=e.isMonorepo?[M]:[e._smblsRequire,e._projectRequire,M].filter(Boolean);for(const n of o)try{return n.resolve(t)}catch{}return null},_t=(e,t,...o)=>{if(e.isMonorepo)return u(e.monorepoRoot,"packages",t,...o);const n=K(e,`${t}/package.json`);return n?u(v(n),...o):null},jt=(e,t,...o)=>{if(e.isMonorepo)return u(e.monorepoRoot,"plugins",t,...o);const n=K(e,`@symbo.ls/${t}/package.json`);return n?u(v(n),...o):null},re=(e,t,...o)=>{if(e.isMonorepo){for(const l of["packages","plugins"]){const a=u(e.monorepoRoot,l,t,...o);if(d(a))return a}return null}const n=K(e,`@symbo.ls/${t}/package.json`);return n?u(v(n),...o):null},ue=(e,t,...o)=>{if(e.isMonorepo)return u(e.monorepoRoot,"packages","domql","packages",t,...o);const n=K(e,`@symbo.ls/${t}/package.json`);return n?u(v(n),...o):null};let X=null;const me="smbls/ssr",Fe=async()=>{const e=await import("smbls/ssr");if(typeof e?.createDomqlElement!="function")throw new Error("smbls/ssr does not export createDomqlElement");return e},Ne=async()=>{if(X)return X;const e=Ie();let t;if(M&&e.isMonorepo)t=u(e.monorepoRoot,"packages","smbls","src","createDomql.js");else{let c;try{return X=await Fe(),X}catch(s){c=s}if(!M)throw new Error(`brender: ${me} is not available in this bundled runtime (${c.message}). Bundle smbls \u2265 the release that adds the smbls/ssr export alongside @symbo.ls/brender.`);const r=e.smblsRoot&&u(e.smblsRoot,"src","createDomql.js");if(r&&d(r))t=r;else throw new Error(`brender: cannot load ${me} (${c.message}). Server rendering needs smbls installed in this project, at a release that exports smbls/ssr`+(e.smblsRoot?` (found smbls at ${e.smblsRoot}).`:" (no smbls package found)."))}const o=await import("esbuild"),n=ke(je(),`br_createDomql_${ve(6).toString("hex")}.mjs`),l=_e,a={name:"workspace-resolve",setup(c){c.onResolve({filter:/^smbls/},r=>{const s=r.path.replace(/^smbls\/?/,""),f=e.isMonorepo?u(e.monorepoRoot,"packages","smbls"):e.smblsRoot;if(!f)return;if(!s){const h=l(f);return h?{path:h}:void 0}const i=u(f,s);if(d(i))return{path:i};if(d(i+".js"))return{path:i+".js"};const m=u(i,"index.js");if(d(m))return{path:m}}),c.onResolve({filter:/^domql$/},r=>{if(e.isMonorepo){const s=u(e.monorepoRoot,"packages","domql","src","index.js");if(d(s))return{path:s};const f=u(e.monorepoRoot,"packages","domql","index.js");if(d(f))return{path:f}}else try{const s=_require.resolve("domql/package.json"),f=l(v(s));if(f)return{path:f}}catch{}}),c.onResolve({filter:/^@symbo\.ls\//},r=>{const s=r.path.replace("@symbo.ls/","");if(s==="sync")return{path:"sync-stub",namespace:"brender-stub"};if(e.isMonorepo){for(const i of["packages","plugins"]){const m=u(e.monorepoRoot,i,s,"src","index.js");if(d(m))return{path:m};const h=u(e.monorepoRoot,i,s,"index.js");if(d(h))return{path:h}}const f=u(e.monorepoRoot,"packages","default-config","blank","index.js");if(s==="default-config"&&d(f))return{path:f}}else{const f=re(e,s,"src","index.js");if(f&&d(f))return{path:f};const i=re(e,s,"index.js");if(i&&d(i))return{path:i};if(s==="default-config"){const m=re(e,"default-config","blank","index.js");if(m&&d(m))return{path:m}}}}),c.onResolve({filter:/^@domql\//},r=>{const s=r.path.replace("@symbo.ls/","");if(e.isMonorepo){const f=u(e.monorepoRoot,"packages","domql","packages",s,"src","index.js");if(d(f))return{path:f};const i=u(e.monorepoRoot,"packages","domql","packages",s,"index.js");if(d(i))return{path:i}}else{const f=ue(e,s,"src","index.js");if(f&&d(f))return{path:f};const i=ue(e,s,"index.js");if(i&&d(i))return{path:i}}}),c.onResolve({filter:/^css-in-props/},r=>{let s;if(e.isMonorepo)s=u(e.monorepoRoot,"packages","css-in-props");else{const m=K(e,"css-in-props/package.json");m&&(s=v(m))}if(!s)return;const f=r.path.replace(/^css-in-props\/?/,"");if(f){const m=u(s,f),h=u(m,"index.js");if(d(h))return{path:h};if(d(m+".js"))return{path:m+".js"};if(d(m))return{path:m}}const i=l(s);if(i)return{path:i}}),c.onResolve({filter:/^@emotion\//},r=>{let s;if(e.isMonorepo)s=u(e.monorepoRoot,"node_modules",r.path);else{const f=K(e,`${r.path}/package.json`);if(!f)return;s=v(f)}if(d(s)){const f=u(s,"package.json");if(d(f))try{const i=JSON.parse(V(f,"utf8")),m=i.module||i.main||"dist/emotion-css.esm.js";return{path:u(s,m)}}catch{}return{path:s}}}),c.onResolve({filter:/\.json$/},r=>{if(r.resolveDir){const s=u(r.resolveDir,r.path);if(d(s))return{path:s}}}),c.onLoad({filter:/smbls\/.*options\.js$/},async r=>{if(!r.path.includes("smbls/")||!r.path.endsWith("options.js"))return;let s=V(r.path,"utf8");return s=s.replace(/import\s*\{[^}]*version[^}]*\}\s*from\s*['"][^'"]*package\.json['"][^;\n]*/,"const version = '0.0.0'"),s=s.replace(/import\s*\{[^}]*createRequire[^}]*\}\s*from\s*['"]module['"][^;\n]*/g,"// createRequire removed for brender build"),{contents:s,loader:"js"}}),c.onLoad({filter:/smbls\/.*init\.js$/},async r=>{if(!r.path.includes("smbls/")||!r.path.endsWith("init.js"))return;let s=V(r.path,"utf8");return s=s.replace(/import\s*\{[^}]*createRequire[^}]*\}\s*from\s*['"]module['"][^;\n]*/g,"// createRequire removed for brender build"),{contents:s,loader:"js"}}),c.onLoad({filter:/.*/,namespace:"brender-stub"},()=>({contents:"export const SyncComponent = {}; export const Inspect = {}; export const Notifications = {}; export const syncPlugin = () => ({}); export const notificationsPlugin = () => ({}); export const seedRawDesignSystem = () => {}; export const inspectPlugin = () => ({}); export default {}",loader:"js"})),c.onLoad({filter:/smbls\/src\/router\.js$/},async r=>{let s=V(r.path,"utf8");return s=s.replace(/import\s*\{\s*Link\s*\}\s*from\s*['"]smbls['"]/,"const Link = { tag: 'a', attr: { href: (el) => el.href } }"),{contents:s,loader:"js"}}),c.onLoad({filter:/fetchOnCreate\.js$/},async r=>{if(!r.path.includes("smbls/"))return;let s=V(r.path,"utf8");return s=s.replace(/window\s*&&\s*window\.location\s*\?\s*window\.location\.host\.includes/g,"window && window.location && window.location.host ? window.location.host.includes"),{contents:s,loader:"js"}})}};await o.build({entryPoints:[t],bundle:!0,format:"esm",platform:"node",outfile:n,write:!0,logLevel:"warning",plugins:[a],nodePaths:e.isMonorepo?[u(e.monorepoRoot,"node_modules")]:[...e.smblsRoot?[u(e.smblsRoot,"node_modules")]:[],...e.projectRoot?[u(e.projectRoot,"node_modules")]:[],...e.smblsRoot?[u(e.smblsRoot,"..","..","node_modules")]:[]].filter(c=>d(c)),supported:{"import-attributes":!1},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 p=await import(`file://${n}`);if(process.env.BRENDER_DEBUG)console.log("[brender] Bundle saved:",n);else try{we(n)}catch{}return X=p,p},Be={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:e=>e.href,target:e=>e.target,rel:e=>e.rel}},A:{extends:"Link"},RouteLink:{extends:"Link"},Img:{tag:"img",attr:{src:e=>{let t=e.src;return typeof t=="string"&&t.includes("{{")&&(t=e.call("replaceLiteralsWithObjectFields",t,e.state)),t},alt:e=>e.alt,loading:e=>e.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"}},He=(e,t)=>{const o={},n=l=>{const a=l&&l.__ref;if(a){if(a.__brKey){const p=t(l);o[p===""?"__root":p]=a.__brKey}if(a.__children)for(const p of a.__children)n(l[p])}};return n(e),o},Je=new Set(["app","config","pages","components","state","snippets","designSystem","dependencies","functions","methods","files","sharedLibraries"]);let G=0;const ge=Symbol.for("brender.fetchTracked"),de=()=>G,Ke=256*1024,Ge=1024*1024,We=new Set(["accept-language","accept"]);let le=0,D=null;const Ue=e=>{const[t,o]=e,n=t&&typeof t=="object"&&typeof t.url=="string",l=n?t.url:String(t),a=String(o&&o.method||n&&t.method||"GET").toUpperCase(),p={},c=r=>{if(!r)return;const s=!Array.isArray(r)&&typeof r.entries!="function";for(const[f,i]of Pe(r))s&&i==null||(p[String(f).toLowerCase()]=String(i))};return n&&c(t.headers),o&&c(o.headers),{url:l,method:a,headers:p}},Ye=(e,t,o,n)=>{if(!o||!o.ok||typeof o.clone!="function")return;const l=o.headers&&o.headers.get&&o.headers.get("content-type")||"";if(!/json|^text\//i.test(l))return;let a;try{a=o.clone()}catch{return}n(a.text().then(p=>{e.tainted||p.length>Ke||e.bytes+p.length>Ge||(e.bytes+=p.length,e.entries.push({url:t.url,lang:t.headers["accept-language"]||"",status:o.status,type:l,body:p}))},()=>{}))},ze=()=>{const e=globalThis.fetch;if(typeof e!="function"||e[ge])return;const t=function(...o){G++;let n=!1;const l=()=>{n||(n=!0,G--)},a=s=>{G++,s.then(()=>{G--},()=>{G--})},p=D&&!D.tainted?D:null;let c=null;if(p)try{c=Ue(o),(c.method!=="GET"||!/^https?:/i.test(c.url)||Object.keys(c.headers).some(s=>!We.has(s)))&&(c=null)}catch{c=null}let r;try{r=e.apply(this,o)}catch(s){throw l(),s}return r&&typeof r.then=="function"?r.then(s=>{c&&Ye(p,c,s,a),l()},l):l(),r};t[ge]=!0,globalThis.fetch=t},Ve=({brRegistry:e,fetchSeed:t,hydrateFlag:o=!0}={})=>{if(!e||!Object.keys(e).length)return"";const n=De(e);return o?`<script>window.__BR_REGISTRY__=${n};window.__BRENDER_HYDRATE__=true<\/script>`+(t&&t.length?`
+`+$e(t):""):`<script>window.__BR_REGISTRY__=${n}<\/script>`},he=async(e,t={})=>{const{route:o="/",pathname:n,state:l,context:a,prefetch:p=!1}=t,c=n||o,r=globalThis.location,s=globalThis.window;(!globalThis.location||globalThis.location.pathname!==c)&&(globalThis.location={pathname:c,href:c,search:"",hash:"",origin:""}),globalThis.window||(globalThis.window={location:globalThis.location});let f;if(p)try{const g=e.pages||{};f={...g};const y=await Le(e,o);if(y.size){const P=JSON.parse(JSON.stringify(g[o],(_,A)=>{if(typeof A!="function")return A})),J=(_,A)=>{if(!(!_||!A))for(const E in _)typeof _[E]=="function"?A[E]=_[E]:typeof _[E]=="object"&&_[E]!==null&&!Array.isArray(_[E])&&typeof A[E]=="object"&&A[E]!==null&&J(_[E],A[E])};J(g[o],P),Ce(P,y),f[o]=P}}catch(g){console.error("[brender] Prefetch error:",g),f=e.pages}let i;if(p)try{i=await qe(e)}catch(g){console.warn("[brender] SSR translation fetch failed:",g.message)}r!==void 0?globalThis.location=r:delete globalThis.location,s!==void 0?globalThis.window=s:delete globalThis.window;const{window:m,document:h}=ie(),w=h.body;m.location.pathname=c;const T=globalThis.document,S=globalThis.location;globalThis.document=h,globalThis.location=m.location;const{createDomqlElement:R}=await Ne(),Z=L(e.app||{}),k={...e.config||{}};e.polyglot&&!k.polyglot&&(k.polyglot=e.polyglot),e.fetch&&!k.fetch&&(k.fetch=e.fetch),e.router&&!k.router&&(k.router=e.router);for(const g of Xe)e[g]!=null&&k[g]==null&&(k[g]=e[g]);const x=k.polyglot?{...k.polyglot}:void 0;i&&x&&(x.translations={...x.translations||{},...i});const j=L(e.state||{});(i||x)&&(j.root||(j.root={}),x&&(j.root.lang=j.root.lang||x.defaultLang||"en"),i&&(j.root.translations={...j.root.translations||{},...i})),Me();const F={};for(const g in e){if(Je.has(g))continue;const y=e[g];F[g]=y&&typeof y=="object"?L(y):y}const C={...F,state:j,...l?{state:{...j,...l}}:{},dependencies:L(e.dependencies||{}),components:L(e.components||{}),snippets:L(e.snippets||{}),pages:L(f||e.pages||{}),functions:{...e.functions||{},polyglot:Oe,getActiveLang:pe,getLang:pe},methods:e.methods||{},designSystem:L(e.designSystem||{}),files:e.files||{},sharedLibraries:e.sharedLibraries||[],...k,...x?{polyglot:x}:{},document:h,window:m,parent:{node:w},initOptions:{},domqlOptions:{sourcemap:!1},sync:!1,inspect:!1,notifications:!1,...a||{}},N=await Ae();N&&(C.plugins=C.plugins||[],C.plugins.some(g=>g.name==="funcql")||C.plugins.push(N)),ae(),ze(),le++,le===1?D={entries:[],bytes:0,tainted:!1}:D&&(D.tainted=!0);const W=D;let b;try{b=await R(Z,C);const g=Date.now(),y=p?2e3:50,P=J=>new Promise(_=>setTimeout(_,J));for(await P(Math.min(50,y));p&&de()>0&&Date.now()-g<y;)await P(10),de()===0&&await P(Math.max(0,Math.min(50,y-(Date.now()-g))))}finally{le--,D===W&&(D=null)}const B=W&&!W.tainted?W.entries.slice():[];ce(w);const q=fe(b),{elementPath:U}=await import("@symbo.ls/element"),O=He(b,U),Y=ne(e,o,b,b?.state),$=[],I=h.head||h.querySelector("head");if(I)for(const g of I.querySelectorAll("style")){if(g.sheet&&g.sheet.cssRules)for(const y of g.sheet.cssRules)y.cssText&&$.push(y);if(!$.length){const y=g.textContent||"";y&&$.push({cssText:y})}}const H=$.map(g=>g.cssText),{globalCSS:z,classRules:Re}=tt($);let te=ye(w.innerHTML);if(i){const g=x?.defaultLang||"en",y=i[g]||Object.values(i)[0]||{};te=te.replace(/\{\{\s*([^|{}]+?)\s*\|\s*polyglot\s*\}\}/g,(P,J)=>{const _=J.trim();return y[_]??P})}return T!==void 0?globalThis.document=T:delete globalThis.document,S!==void 0?globalThis.location=S:delete globalThis.location,{html:te,metadata:Y,registry:q,brRegistry:O,element:b,emotionCSS:H,globalCSS:z,classRules:Re,fetchSeed:B,document:h,window:m,ssrTranslations:i,prefetchedPages:f}},vt=async(e,t={})=>{const{context:o={}}=t,{window:n,document:l}=ie(),a=l.body,{create:p}=await import("@symbo.ls/element"),c=await import("@symbo.ls/utils"),r={...Be,...o.components||{}},s={...c,...o.utils||{},...o.functions||{}};ae();let f;try{f=p(e,{node:a},"root",{context:{document:l,window:n,...o,components:r,utils:s}})}catch{}ce(a);const i=f?fe(f):{};return{html:ye(a.innerHTML),registry:i,element:f}},ye=e=>e.replace(/(<svg\b[^>]*>)([\s\S]*?)(<\/svg>)/gi,(t,o,n,l)=>{if(n.includes("&lt;")){const a=n.replace(/&lt;/g,"<").replace(/&gt;/g,">").replace(/&amp;/g,"&").replace(/&quot;/g,'"').replace(/&#39;/g,"'");return o+a+l}return t}),Xe=["globalTheme","themeStorageKey","themeRoot","useReset","useVariable","useFontImport","useIconSprite","useSvgSprite","useDocumentTheme","useDefaultConfig","useDefaultIcons","useThemeSuffixedVars","verbose","semanticIcons"],Ze=/\.[A-Za-z_\\-]/,Qe=e=>{if(typeof e!="string"||!e)return!1;const t=e.replace(/"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/g,'""').replace(/\[[^\]]*\]/g,"[]");return!Ze.test(t)},et=/^\s*(:root|\[data-theme|\[data-skin)/,be=e=>{const t=e&&e.cssText;if(typeof t!="string")return null;if(/^@(-webkit-)?keyframes\b/.test(t))return"keyframes";if(t.startsWith("@font-face"))return null;if(typeof e.selectorText=="string")return Qe(e.selectorText)?et.test(e.selectorText)?"root":"reset":null;const o=e.cssRules&&Array.from(e.cssRules);if(o&&o.length&&/^@(media|supports|container)\b/.test(t)){const n=new Set(o.map(be));return n.has(null)||n.size!==1?n.has(null)?null:"reset":[...n][0]}return null},tt=e=>{const t={root:[],reset:[],keyframes:[]},o=[];for(const n of e||[]){const l=be(n);l?t[l].push(n.cssText):n&&n.cssText&&o.push(n.cssText)}return{globalCSS:{rootRule:t.root.join(`
+`),resetRules:t.reset.join(`
+`),keyframeRules:t.keyframes.join(`
+`),fontFaceCSS:""},classRules:o}};let ee=new Set;const Tt=()=>{ee=new Set},Et=()=>Array.from(ee).join(`
+`),Lt=(e,t)=>e.replace(/<style data-emotion="smbls">[\s\S]*?<\/style>/,t?`<style data-emotion="smbls">
+${t}
+</style>`:""),Ct=async(e,t={})=>{const{route:o="/",pathname:n,prefetch:l=!0}=t,a=await he(e,{route:o,pathname:n,prefetch:l});if(!a)return null;const p=e.designSystem||{},c=a.globalCSS;let r=null,s=null;try{const f=a.element,i=f?.context?.polyglot||e.polyglot||e.config?.polyglot;if(s=f?.state?.root?.lang||i?.defaultLang||"en",a.prefetchedPages&&a.prefetchedPages[o]){const m=a.prefetchedPages[o],h=(w,T={})=>{if(!w||typeof w!="object")return T;if(w.state&&typeof w.state=="object")for(const[S,R]of Object.entries(w.state))R!=null&&typeof R!="function"&&(T[S]=R);for(const[S,R]of Object.entries(w))S==="state"||S==="props"||S==="attr"||S==="on"||S==="define"||S==="__ref"||S.startsWith("__")||R&&typeof R=="object"&&!Array.isArray(R)&&h(R,T);return T};r=h(m)}}catch{}return{html:a.html,css:a.classRules.join(`
+`),classRules:a.classRules.slice(),globalCSS:c,resetCss:c.resetRules,fontLinks:Se(p),metadata:a.metadata||ne(e,o),brKeyCount:a.registry?Object.keys(a.registry).length:0,brRegistry:a.brRegistry||{},fetchSeed:a.fetchSeed||[],ssrTranslations:a.ssrTranslations,prefetchedState:r,activeLang:s}},qt=async(e,t="/",o={})=>{const{lang:n,themeColor:l,isr:a,hydrate:p=!0,prefetch:c=!0,shell:r,adoptDom:s=!1}=o,f=n||e.state?.lang||e.app?.metadata?.lang||"en",i=await he(e,{route:t,prefetch:c});if(!i)return null;const m={...i.metadata};if(l&&(m["theme-color"]=l),typeof r=="string"&&!e.name){const b="\0brender-undeclared-title\0";if(ne({...e,name:b},t,i.element,i.element?.state).title===b)for(const q of["title","og:title","twitter:title"])m[q]===i.metadata.title&&delete m[q]}const h=Te(m);for(const b of i.classRules)b&&ee.add(b);const w=Array.from(ee).join(`
+`),T=i.globalCSS,S=`<style data-brender>
+${T.rootRule||""}
+${T.resetRules||""}
+${T.keyframeRules||""}
+</style>`,R=w?`<style data-emotion="smbls">
+${w}
+</style>`:"",Z=Se(e.designSystem||{}),k=Object.keys(i.registry).length,x=Ve({brRegistry:i.brRegistry,fetchSeed:i.fetchSeed,hydrateFlag:s});let j="";if(a&&a.clientScript){const b=Number.isInteger(o.depth)?o.depth:t==="/"?0:t.replace(/^\/|\/$/g,"").split("/").length,B=b>0?"../".repeat(b):"./";if(p){let q="";if(i.ssrTranslations){const O=e.polyglot||e.config?.polyglot,Y=O?.storagePrefix||"",$=O?.storageLangKey||"",I=[];for(const H in i.ssrTranslations){const z=i.ssrTranslations[H];z&&typeof z=="object"&&I.push(`localStorage.setItem(${JSON.stringify(Y+H)},${JSON.stringify(JSON.stringify(z))})`)}if($){const H=O?.defaultLang||"en";I.push(`if(!localStorage.getItem(${JSON.stringify($)}))localStorage.setItem(${JSON.stringify($)},${JSON.stringify(H)})`)}I.length&&(q=`<script>try{${I.join(";")}}catch(e){}<\/script>
+`)}const U=x?x+`
+`:"";j=`${q}${U}<script>window.__BRENDER__=true<\/script>
+<script type="module" src="${B}${a.clientScript}"><\/script>`}else j=`<script type="module">
 {
   const brEls = document.querySelectorAll('body > :not(script):not(style)')
   const observer = new MutationObserver((mutations) => {
@@ -36,36 +33,19 @@ ${e}
   observer.observe(document.body, { childList: true })
 }
 <\/script>
-<script type="module" src="${L}${c.clientScript}"><\/script>`}const _={...t.config||{}};t.polyglot&&!_.polyglot&&(_.polyglot=t.polyglot);const j=_.polyglot;let W=h;if(j){const k=j.defaultLang||"en",$={...j.translations||{},...l.ssrTranslations||{}}[k]||{};W=h.replace(/\{\{\s*([^|{}]+?)\s*\|\s*polyglot\s*\}\}/g,(G,U)=>{const M=U.trim();return $[M]??G})}if(typeof r=="string"){const k=[m.fontFaceCSS?`<style data-brender>${m.fontFaceCSS}</style>`:"",`<style data-brender>
-${m.rootRule||""}
-${m.resetRules||""}
-${m.keyframeRules||""}
-</style>`,S?`<style data-emotion="smbls">
-${S}
-</style>`:""];return{html:Bt(r,{headTags:W,headEnd:[R,...k].filter(Boolean).join(`
-`),body:l.html,depth:Number.isInteger(n.depth)?n.depth:0,bootScripts:s?ct(l):""}),route:e,brKeyCount:E,shell:!0}}return{html:`<!DOCTYPE html>
+<script type="module" src="${B}${a.clientScript}"><\/script>`}const F={...e.config||{}};e.polyglot&&!F.polyglot&&(F.polyglot=e.polyglot);const C=F.polyglot;let N=h;if(C){const b=C.defaultLang||"en",q={...C.translations||{},...i.ssrTranslations||{}}[b]||{};N=h.replace(/\{\{\s*([^|{}]+?)\s*\|\s*polyglot\s*\}\}/g,(U,O)=>{const Y=O.trim();return q[Y]??U})}return typeof r=="string"?{html:Ee(r,{headTags:N,headEnd:[Z,S,R].filter(Boolean).join(`
+`),body:i.html,depth:Number.isInteger(o.depth)?o.depth:0,bootScripts:s?x:""}),route:t,brKeyCount:k,shell:!0}:{html:`<!DOCTYPE html>
 <html lang="${f}">
 <head>
-${W}
-${R}
-${m.fontFaceCSS?`<style data-brender>${m.fontFaceCSS}</style>`:""}
-<style data-brender>
-${m.rootRule||""}
-${m.resetRules||""}
-${m.keyframeRules||""}
-</style>
-${S?`<style data-emotion="smbls">
+${N}
+${Z}
+
 ${S}
-</style>`:""}
+${R}
 </head>
 <body>
-${l.html}
-${x}
+${i.html}
+${j}
 </body>
-</html>`,route:e,brKeyCount:E}},le={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},jt=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"]),kt=(t,e)=>{if(!t||typeof t!="string"||!e)return null;const n=e.base||16,o=e.ratio||1.618,i=e.unit||"px",c=e.subSequence!==!1;if(t.includes(" "))return t.split(" ").map(m=>m==="-"||m===""?m:kt(m,e)||m).join(" ");if(/^(none|auto|inherit|initial|unset|0)$/i.test(t)||/\d+(px|em|rem|%|vh|vw|vmin|vmax|ch|ex|cm|mm|in|pt|pc|fr|s|ms)$/i.test(t)||/^(#|rgb|hsl|var\()/i.test(t))return null;const u=t.startsWith("-"),r=(u?t.slice(1):t).match(/^([A-Z])(\d)?$/i);if(!r)return null;const s=r[1].toUpperCase(),f=r[2]?parseInt(r[2]):0,l=le[s];if(l===void 0)return null;let p=n*Math.pow(o,l);if(f>0&&c){const w=n*Math.pow(o,l+1),R=(w-p)/o,E=w-R,x=p+R,_=(E+x)/2,j=~~w-~~p>16?[E,_,x]:[E,x];f<=j.length&&(p=j[f-1])}const h=Math.round(p*100)/100;return`${u?"-":""}${h}${i}`},ce=new Set([...jt].map(t=>t.replace(/[A-Z]/g,e=>"-"+e.toLowerCase()))),Q=(t,e,n)=>{if(typeof e!="string")return e;if(ae.has(t)){const o=n?.color||{};if(o[e])return o[e]}if(jt.has(t)||ce.has(t)){const o=n?.spacing||{},i=kt(e,o);if(i)return i}return e},ae=new Set(["color","background","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor","fill","stroke"]),$t=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"]),tt=t=>t.replace(/[A-Z]/g,e=>"-"+e.toLowerCase()),Ct=(t,e)=>{if(typeof e>"u"||e===null)return null;if(t==="flow"&&typeof e=="string"){let[n,o]=(e||"row").split(" ");return(e.startsWith("x")||e==="row")&&(n="row"),(e.startsWith("y")||e==="column")&&(n="column"),{display:"flex","flex-flow":(n||"")+" "+(o||"")}}if(t==="wrap")return{display:"flex","flex-wrap":e};if((t==="align"||t==="flexAlign")&&typeof e=="string"){const[n,o]=e.split(" "),i={display:"flex","align-items":n};return o&&(i["justify-content"]=o),i}if(t==="gridAlign"&&typeof e=="string"){const[n,o]=e.split(" "),i={display:"grid","align-items":n};return o&&(i["justify-content"]=o),i}if(t==="flexFlow"&&typeof e=="string"){let[n,o]=(e||"row").split(" ");return(e.startsWith("x")||e==="row")&&(n="row"),(e.startsWith("y")||e==="column")&&(n="column"),{display:"flex","flex-flow":(n||"")+" "+(o||"")}}if(t==="flexWrap")return{display:"flex","flex-wrap":e};if(t==="backgroundImage"&&typeof e=="string"&&!e.startsWith("url(")&&!e.startsWith("linear-gradient")&&!e.startsWith("radial-gradient")&&!e.startsWith("none"))return{"background-image":`url(${e})`};if(t==="round"||t==="borderRadius"&&e)return{"border-radius":typeof e=="number"?e+"px":e};if(t==="boxSize"&&typeof e=="string"){const[n,o]=e.split(" ");return{height:n,width:o||n}}if(t==="widthRange"&&typeof e=="string"){const[n,o]=e.split(" ");return{"min-width":n,"max-width":o||n}}if(t==="heightRange"&&typeof e=="string"){const[n,o]=e.split(" ");return{"min-height":n,"max-height":o||n}}return t==="column"?{"grid-column":e}:t==="columns"?{"grid-template-columns":e}:t==="templateColumns"?{"grid-template-columns":e}:t==="row"?{"grid-row":e}:t==="rows"?{"grid-template-rows":e}:t==="templateRows"?{"grid-template-rows":e}:t==="area"?{"grid-area":e}:t==="template"?{"grid-template":e}:t==="templateAreas"?{"grid-template-areas":e}:t==="autoColumns"?{"grid-auto-columns":e}:t==="autoRows"?{"grid-auto-rows":e}:t==="autoFlow"?{"grid-auto-flow":e}:t==="columnStart"?{"grid-column-start":e}:t==="rowStart"?{"grid-row-start":e}:null},Tt=(t,e)=>{const n={};for(const o in t){const i=t[o],c=Ct(o,i);if(c){for(const u in c)n[u]=Q(u,c[u],e);continue}typeof i!="string"&&typeof i!="number"||(n[tt(o)]=Q(o,i,e))}return n},fe=(t,e,n)=>{const o={},i={},c={};for(const u in t){const a=t[u];if(u.charCodeAt(0)===64&&typeof a=="object"){const s=n?.[u.slice(1)];if(s){const f=Tt(a,e);Object.keys(f).length&&(i[s]=f)}continue}if(u.charCodeAt(0)===58&&typeof a=="object"){const s=Tt(a,e);Object.keys(s).length&&(c[u]=s);continue}if(typeof a!="string"&&typeof a!="number"||u.charCodeAt(0)>=65&&u.charCodeAt(0)<=90||$t.has(u))continue;const r=Ct(u,a);if(r){for(const s in r)o[s]=Q(s,r[s],e);continue}o[tt(u)]=Q(u,a,e)}return{base:o,mediaRules:i,pseudoRules:c}},ue=(t,{base:e,mediaRules:n,pseudoRules:o})=>{const i=[],c=Object.entries(e).map(([u,a])=>`${u}: ${a}`).join("; ");c&&i.push(`${t} { ${c}; }`);for(const[u,a]of Object.entries(o)){const r=Object.entries(a).map(([s,f])=>`${s}: ${f}`).join("; ");r&&i.push(`${t}${u} { ${r}; }`)}for(const[u,a]of Object.entries(n)){const r=Object.entries(a).map(([f,l])=>`${f}: ${l}`).join("; "),s=u.startsWith("@")?u:`@media ${u}`;r&&i.push(`${s} { ${t} { ${r}; } }`)}return i.join(`
-`)},Et={Flex:{display:"flex"},InlineFlex:{display:"inline-flex"},Grid:{display:"grid"},InlineGrid:{display:"inline-grid"},Block:{display:"block"},Inline:{display:"inline"}},pe=t=>{const e=t.__ref?.__extends;if(!e||!Array.isArray(e))return null;for(const n of e)if(Et[n])return Et[n];return null},de=t=>{let e;for(const n in t){if(typeof t[n]!="function"||$t.has(n)||n.charCodeAt(0)>=65&&n.charCodeAt(0)<=90||n.startsWith("on")||n.startsWith("__"))continue;e||(e={});let o;try{o=t[n](t,t.state||{})}catch{try{const i={root:{},...t.state||{}};o=t[n](t,i)}catch{}}o!=null&&o!==!1&&(e[n]=o)}return e||t},He=(t,e)=>{const n=e?.media||{},o=e?.animation||{},i=[],c=new Set,u=new Set,a=s=>{if(!s||!s.__ref)return;const f=de(s);if(f&&s.node){const l=s.node.getAttribute?.("class");if(l&&!c.has(l)){c.add(l);const p=fe(f,e,n),h=pe(s);if(h)for(const[m,R]of Object.entries(h)){const E=tt(m);p.base[E]||(p.base[E]=R)}(Object.keys(p.base).length||Object.keys(p.mediaRules).length||Object.keys(p.pseudoRules).length)&&i.push(ue("."+l.split(" ")[0],p));const w=f.animation||f.animationName;if(typeof w=="string"){const m=w.split(" ")[0];o[m]&&u.add(m)}}}if(s.__ref?.__children)for(const l of s.__ref.__children)s[l]?.__ref&&a(s[l])};a(t);const r=[];for(const s of u){const f=o[s],l=Object.entries(f).map(([p,h])=>{const S=Object.entries(h).map(([w,m])=>`${tt(w)}: ${m}`).join("; ");return`  ${p} { ${S}; }`}).join(`
-`);r.push(`@keyframes ${s} {
-${l}
-}`)}return[...r,...i].join(`
-`)},Lt=t=>{if(!t)return"";const e=t.font_family||t.fontFamily||{},n=new Set;for(const i of Object.values(e)){if(typeof i!="string")continue;const c=i.match(/'([^']+)'/);c&&n.add(c[1])}return n.size?['<link rel="preconnect" href="https://fonts.googleapis.com">','<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>',`<link href="https://fonts.googleapis.com/css2?${[...n].map(i=>`family=${i.replace(/\s+/g,"+")}:wght@300;400;500;600;700`).join("&")}&display=swap" rel="stylesheet">`].join(`
-`):""};export{gt as SMBLS_SSR_SPECIFIER,ct as adoptionScripts,Be as getAccumulatedEmotionCSS,wt as render,ve as renderElement,We as renderPage,Ne as renderRoute,Fe as replaceEmotionCSS,Me as resetGlobalCSSCache,De as skinRulesToCSS,ie as splitCapturedCSS};
+</html>`,route:t,brKeyCount:k}},Se=e=>{if(!e)return"";const t=e.font_family||e.fontFamily||{},o=new Set;for(const l of Object.values(t)){if(typeof l!="string")continue;const a=l.match(/'([^']+)'/);a&&o.add(a[1])}return o.size?['<link rel="preconnect" href="https://fonts.googleapis.com">','<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>',`<link href="https://fonts.googleapis.com/css2?${[...o].map(l=>`family=${l.replace(/\s+/g,"+")}:wght@300;400;500;600;700`).join("&")}&display=swap" rel="stylesheet">`].join(`
+`):""};export{me as SMBLS_SSR_SPECIFIER,Ve as adoptionScripts,Et as getAccumulatedEmotionCSS,he as render,vt as renderElement,qt as renderPage,Ct as renderRoute,Lt as replaceEmotionCSS,Tt as resetGlobalCSSCache,tt as splitCapturedCSS};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbo.ls/brender",
-  "version": "3.14.663",
+  "version": "3.14.664",
   "license": "CC-BY-NC-4.0",
   "type": "module",
   "module": "./dist/esm/index.js",
@@ -46,18 +46,18 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@symbo.ls/css": "^3.14.775",
+    "@symbo.ls/css": "^3.14.777",
     "@symbo.ls/default-config": "^3.14.785",
-    "@symbo.ls/element": "^3.14.800",
-    "@symbo.ls/fetch": "^3.14.663",
-    "@symbo.ls/helmet": "^3.14.669",
-    "@symbo.ls/scratch": "^3.14.786",
-    "@symbo.ls/utils": "^3.14.784",
+    "@symbo.ls/element": "^3.14.803",
+    "@symbo.ls/fetch": "^3.14.664",
+    "@symbo.ls/helmet": "^3.14.670",
+    "@symbo.ls/scratch": "^3.14.788",
+    "@symbo.ls/utils": "^3.14.786",
     "esbuild": "^0.28.1",
     "linkedom": "^0.16.8"
   },
   "peerDependencies": {
-    "smbls": "^3.14.828"
+    "smbls": "^3.14.833"
   },
   "optionalDependencies": {
     "@symbo.ls/funcql": "^3.14.0"

package/render.js

@@ -11,6 +11,8 @@ 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.
@@ -290,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
@@ -311,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)) {
@@ -630,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
 }
 
@@ -666,6 +662,15 @@ const buildPathRegistry = (element, path = '') => {
  * @param {object} [options.context] - Additional context overrides
  * @returns {Promise<{ html: string, metadata: object, registry: object, element: object }>}
  */
+// The payload keys render() puts on the context itself (below `ctx`): the
+// generic copy of every other top-level key skips them — cloning one only for
+// the explicit key to replace it was a deep clone of `functions`, `methods`
+// and `files` thrown away on every render.
+const CONTEXT_KEYS_SET_BELOW = new Set([
+  'app', 'config', 'pages', 'components', 'state', 'snippets', 'designSystem', 'dependencies',
+  'functions', 'methods', 'files', 'sharedLibraries'
+])
+
 // ── In-flight request tracking (the post-create flush) ──────────────────────
 // The render's flush waits for the requests a page starts while it renders
 // (fetch plugin, SDK, project code — all end in globalThis.fetch). One
@@ -701,11 +706,15 @@ const requestShape = (args) => {
   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
-    if (typeof h.forEach === 'function' && !Array.isArray(h)) h.forEach((v, k) => { headers[String(k).toLowerCase()] = String(v) })
-    else if (Array.isArray(h)) for (const [k, v] of h) headers[String(k).toLowerCase()] = String(v)
-    else for (const k in h) if (h[k] != null) headers[k.toLowerCase()] = String(h[k])
+    const plain = !Array.isArray(h) && typeof h.entries !== 'function'
+    for (const [k, v] of headerEntries(h)) {
+      if (plain && v == null) continue
+      headers[String(k).toLowerCase()] = String(v)
+    }
   }
   if (isRequest) add(input.headers)
   if (init) add(init.headers)
@@ -769,9 +778,14 @@ const trackFetches = () => {
 // (@symbo.ls/fetch createEarlySeedScript). Default off everywhere — a page
 // without these keeps the fresh client render.
 // FW-BRENDER-HYDRATION-AND-CF-DEPLOY-PROVIDER-1.
-export const adoptionScripts = ({ brRegistry, fetchSeed } = {}) => {
+// `hydrateFlag: false` — the registry alone, for a client that replaces the
+// server DOM but still reads the registry (renderPage's default ISR path). It
+// inlined its own JSON.stringify there, without the `<` escape, so an element
+// key carrying `</script>` closed the tag.
+export const adoptionScripts = ({ brRegistry, fetchSeed, hydrateFlag = true } = {}) => {
   if (!brRegistry || !Object.keys(brRegistry).length) return ''
-  const registry = JSON.stringify(brRegistry).replace(/</g, '\\u003c')
+  const registry = jsonForScript(brRegistry)
+  if (!hydrateFlag) return `<script>window.__BR_REGISTRY__=${registry}</script>`
   return `<script>window.__BR_REGISTRY__=${registry};window.__BRENDER_HYDRATE__=true</script>` +
     (fetchSeed && fetchSeed.length ? '\n' + createEarlySeedScript(fetchSeed) : '')
 }
@@ -913,8 +927,7 @@ export const render = async (data, options = {}) => {
   // build reuses. The explicit keys below still win.
   const projectContext = {}
   for (const key in data) {
-    if (key === 'app' || key === 'config' || key === 'pages' || key === 'components' ||
-      key === 'state' || key === 'snippets' || key === 'designSystem' || key === 'dependencies') continue
+    if (CONTEXT_KEYS_SET_BELOW.has(key)) continue
     const value = data[key]
     projectContext[key] = value && typeof value === 'object' ? structuredCloneDeep(value) : value
   }
@@ -1001,8 +1014,9 @@ export const render = async (data, options = {}) => {
     const sleep = (ms) => new Promise(r => setTimeout(r, ms))
     await sleep(Math.min(50, flushCap))
     while (prefetch && inFlightRequests() > 0 && Date.now() - flushStart < flushCap) {
-      while (inFlightRequests() > 0 && Date.now() - flushStart < flushCap) await sleep(10)
-      await sleep(Math.max(0, Math.min(50, flushCap - (Date.now() - flushStart))))
+      await sleep(10)
+      // a settled batch: another quiet period for what it triggers
+      if (inFlightRequests() === 0) await sleep(Math.max(0, Math.min(50, flushCap - (Date.now() - flushStart))))
     }
   } finally {
     _activeRenders--
@@ -1017,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
@@ -1025,28 +1040,22 @@ export const render = async (data, options = {}) => {
   const metadata = extractMetadata(data, route, element, element?.state)
 
   // Extract CSS from style tags in virtual head (atomic CSS engine writes here)
-  const emotionCSS = []
   const capturedRules = []
   const head = document.head || document.querySelector('head')
   if (head) {
     for (const style of head.querySelectorAll('style')) {
       if (style.sheet && style.sheet.cssRules) {
         for (const rule of style.sheet.cssRules) {
-          if (rule.cssText) {
-            emotionCSS.push(rule.cssText)
-            capturedRules.push(rule)
-          }
+          if (rule.cssText) capturedRules.push(rule)
         }
       }
-      if (!emotionCSS.length) {
+      if (!capturedRules.length) {
         const content = style.textContent || ''
-        if (content) {
-          emotionCSS.push(content)
-          capturedRules.push({ cssText: content })
-        }
+        if (content) capturedRules.push({ cssText: content })
       }
     }
   }
+  const emotionCSS = capturedRules.map((rule) => rule.cssText)
   // globalCSS: the init-injected globals; classRules: everything else, in
   // capture order (see splitCapturedCSS).
   const { globalCSS, classRules } = splitCapturedCSS(capturedRules)
@@ -1156,27 +1165,6 @@ const SCRATCH_CONFIG_FLAGS = [
   'useDocumentTheme', 'useDefaultConfig', 'useDefaultIcons',
   'useThemeSuffixedVars', 'verbose', 'semanticIcons',
 ]
-// Serialise scratch `buildSkinVarStyles` output — `{ selector: { var: value },
-// '@media …': { selector: { var: value } } }` — as CSS text
-// (FW-SCRATCH-SKINS-DIMENSION-1).
-const declarationBlock = (selector, vars, indent) => {
-  const decls = Object.entries(vars || {})
-    .map(([k, v]) => `${indent}  ${k}: ${v}`)
-    .join(';\n')
-  return decls ? `${indent}${selector} {\n${decls};\n${indent}}` : ''
-}
-
-export const skinRulesToCSS = (rules) => Object.entries(rules || {})
-  .map(([key, body]) => {
-    if (!key.startsWith('@')) return declarationBlock(key, body, '')
-    const inner = Object.entries(body || {})
-      .map(([selector, vars]) => declarationBlock(selector, vars, '  '))
-      .filter(Boolean)
-      .join('\n')
-    return inner ? `${key} {\n${inner}\n}` : ''
-  })
-  .filter(Boolean)
-  .join('\n\n')
 
 // ── Global CSS: the render's own capture, split ────────────────────────────
 // The rules smbls init injects into the virtual <head> during render() ARE
@@ -1432,15 +1420,21 @@ export const renderPage = async (data, route = '/', options = {}) => {
   }
   const emotionCSS = Array.from(_accumulatedEmotionCSS).join('\n')
 
-  // Global CSS (variables, reset, keyframes): this render's own init output
-  const ds = data.designSystem || {}
+  // Global CSS (variables, reset, keyframes): this render's own init output.
+  // The style tags, built once for both documents below.
   const globalCSS = result.globalCSS
+  const brenderStyle = `<style data-brender>\n${globalCSS.rootRule || ''}\n${globalCSS.resetRules || ''}\n${globalCSS.keyframeRules || ''}\n</style>`
+  const emotionStyle = emotionCSS ? `<style data-emotion="smbls">\n${emotionCSS}\n</style>` : ''
 
   // Generate font links from design system
-  const fontLinks = generateFontLinks(ds)
+  const fontLinks = generateFontLinks(data.designSystem || {})
 
   const brKeyCount = Object.keys(result.registry).length
 
+  // 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) {
@@ -1481,14 +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 = adoptDom
-        ? (adoptionScripts(result) ? adoptionScripts(result) + '\n' : '')
-        : 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 {
@@ -1538,33 +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 data-brender>${globalCSS.fontFaceCSS}</style>` : '',
-      `<style data-brender>\n${globalCSS.rootRule || ''}\n${globalCSS.resetRules || ''}\n${globalCSS.keyframeRules || ''}\n</style>`,
-      emotionCSS ? `<style data-emotion="smbls">\n${emotionCSS}\n</style>` : ''
-    ]
     const html = composeIntoShell(shell, {
       headTags: resolvedHeadTags,
-      headEnd: [fontLinks, ...styles].filter(Boolean).join('\n'),
+      headEnd: [fontLinks, brenderStyle, emotionStyle].filter(Boolean).join('\n'),
       body: result.html,
       depth: Number.isInteger(options.depth) ? options.depth : 0,
-      bootScripts: adoptDom ? adoptionScripts(result) : ''
+      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 data-brender>${globalCSS.fontFaceCSS}</style>` : ''}
-<style data-brender>
-${globalCSS.rootRule || ''}
-${globalCSS.resetRules || ''}
-${globalCSS.keyframeRules || ''}
-</style>
-${emotionCSS ? `<style data-emotion="smbls">\n${emotionCSS}\n</style>` : ''}
+
+${brenderStyle}
+${emotionStyle}
 </head>
 <body>
 ${result.html}
@@ -1575,398 +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 generateFontLinks = (ds) => {
   if (!ds) return ''
   const families = ds.font_family || ds.fontFamily || {}