@symbo.ls/brender 3.7.4 → 3.7.6

package/dist/cjs/index.js

@@ -24,6 +24,7 @@ __export(index_exports, {
   extractMetadata: () => import_metadata.extractMetadata,
   generateHeadHtml: () => import_metadata.generateHeadHtml,
   generateSitemap: () => import_sitemap.generateSitemap,
+  getAccumulatedEmotionCSS: () => import_render.getAccumulatedEmotionCSS,
   hydrate: () => import_hydrate.hydrate,
   injectPrefetchedState: () => import_prefetch.injectPrefetchedState,
   loadAndRenderAll: () => import_load.loadAndRenderAll,
@@ -34,6 +35,7 @@ __export(index_exports, {
   renderElement: () => import_render.renderElement,
   renderPage: () => import_render.renderPage,
   renderRoute: () => import_render.renderRoute,
+  replaceEmotionCSS: () => import_render.replaceEmotionCSS,
   resetGlobalCSSCache: () => import_render.resetGlobalCSSCache,
   resetKeys: () => import_keys.resetKeys
 });
@@ -58,6 +60,8 @@ var index_default = {
   renderRoute: import_render.renderRoute,
   renderPage: import_render.renderPage,
   resetGlobalCSSCache: import_render.resetGlobalCSSCache,
+  getAccumulatedEmotionCSS: import_render.getAccumulatedEmotionCSS,
+  replaceEmotionCSS: import_render.replaceEmotionCSS,
   extractMetadata: import_metadata.extractMetadata,
   generateHeadHtml: import_metadata.generateHeadHtml,
   collectBrNodes: import_hydrate.collectBrNodes,

package/dist/cjs/prefetch.js

@@ -99,15 +99,14 @@ const createSSRAdapter = async (dbConfig) => {
   if (adapter !== "supabase") return null;
   const supabaseUrl = url || projectId && `https://${projectId}.supabase.co`;
   if (!supabaseUrl || !key) return null;
-  let clientFactory = createClient;
-  if (!clientFactory) {
-    try {
-      const mod = await import("@supabase/supabase-js");
-      clientFactory = mod.createClient;
-    } catch {
-      return null;
-    }
+  let clientFactory;
+  try {
+    const mod = await import("@supabase/supabase-js");
+    clientFactory = mod.createClient;
+  } catch {
+    clientFactory = createClient;
   }
+  if (!clientFactory) return null;
   const client = clientFactory(supabaseUrl, key);
   return {
     rpc: ({ from, params }) => client.rpc(from, params),
@@ -161,7 +160,7 @@ const prefetchPageData = async (data, route = "/", options = {}) => {
   const pageDef = pages[route];
   if (!pageDef) return /* @__PURE__ */ new Map();
   const config = data.config || data.settings || {};
-  const dbConfig = config.fetch || config.db || data.db;
+  const dbConfig = config.fetch || data.fetch || config.db || data.db;
   if (!dbConfig) return /* @__PURE__ */ new Map();
   const adapter = await createSSRAdapter(dbConfig);
   if (!adapter) return /* @__PURE__ */ new Map();
@@ -171,9 +170,13 @@ const prefetchPageData = async (data, route = "/", options = {}) => {
   const results = await Promise.allSettled(
     declarations.map(async ({ config: config2, stateKey, path }) => {
       const fetchedData = await executeSingle(adapter, config2);
-      if (fetchedData !== null && stateKey) {
+      if (fetchedData !== null) {
         const existing = stateUpdates.get(path) || {};
-        existing[stateKey] = fetchedData;
+        if (stateKey) {
+          existing[stateKey] = fetchedData;
+        } else if (isObject(fetchedData)) {
+          Object.assign(existing, fetchedData);
+        }
         stateUpdates.set(path, existing);
       }
     })
@@ -181,10 +184,10 @@ const prefetchPageData = async (data, route = "/", options = {}) => {
   return stateUpdates;
 };
 const fetchSSRTranslations = async (data) => {
-  const config = data.config || data.settings || {};
-  const polyglot = config.polyglot;
+  const config = data.config || {};
+  const polyglot = config.polyglot || data.polyglot;
   if (!polyglot?.fetch) return null;
-  const dbConfig = config.fetch || config.db || data.db;
+  const dbConfig = config.fetch || data.fetch || config.db || data.db;
   if (!dbConfig) return null;
   const adapter = await createSSRAdapter(dbConfig);
   if (!adapter) return null;

package/dist/cjs/render.js

@@ -27,10 +27,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var render_exports = {};
 __export(render_exports, {
+  getAccumulatedEmotionCSS: () => getAccumulatedEmotionCSS,
   render: () => render,
   renderElement: () => renderElement,
   renderPage: () => renderPage,
   renderRoute: () => renderRoute,
+  replaceEmotionCSS: () => replaceEmotionCSS,
   resetGlobalCSSCache: () => resetGlobalCSSCache
 });
 module.exports = __toCommonJS(render_exports);
@@ -46,6 +48,51 @@ var import_prefetch = require("./prefetch.js");
 var import_linkedom = require("linkedom");
 var import_create_instance = __toESM(require("@emotion/css/create-instance"), 1);
 const import_meta = {};
+const ssrResolve = (map, key) => {
+  if (!map || !key) return void 0;
+  if (map[key] !== void 0) return map[key];
+  const parts = key.split(".");
+  let v = map;
+  for (const p of parts) {
+    if (v == null || typeof v !== "object") return void 0;
+    v = v[p];
+  }
+  return v;
+};
+const ssrTranslate = function(key, lang) {
+  if (!key) return "";
+  const ctx = this?.context;
+  const poly = ctx?.polyglot;
+  const activeLang = lang || poly?.defaultLang || "ka";
+  if (poly?.translations) {
+    const langMap = poly.translations[activeLang];
+    if (langMap) {
+      const val = ssrResolve(langMap, key);
+      if (val !== void 0) return val;
+    }
+  }
+  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 !== void 0) return val;
+    }
+  }
+  const defaultLang = poly?.defaultLang || "en";
+  if (defaultLang !== activeLang && poly?.translations) {
+    const fallback = poly.translations[defaultLang];
+    if (fallback) {
+      const val = ssrResolve(fallback, key);
+      if (val !== void 0) return val;
+    }
+  }
+  return key;
+};
+const ssrGetActiveLang = function() {
+  const ctx = this?.context;
+  return this?.state?.root?.lang || ctx?.polyglot?.defaultLang || "ka";
+};
 const structuredCloneDeep = (obj, seen = /* @__PURE__ */ new WeakMap()) => {
   if (obj === null || typeof obj !== "object") return obj;
   if (seen.has(obj)) return seen.get(obj);
@@ -321,7 +368,16 @@ const UIKIT_STUBS = {
   Text: { tag: "span" }
 };
 const render = async (data, options = {}) => {
-  const { route = "/", state: stateOverrides, context: contextOverrides, prefetch = false } = options;
+  const { route = "/", pathname, state: stateOverrides, context: contextOverrides, prefetch = false } = options;
+  const locationPath = pathname || route;
+  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 {
@@ -359,16 +415,26 @@ const render = async (data, options = {}) => {
     } catch {
     }
   }
+  if (_prevLocPrefetch !== void 0) globalThis.location = _prevLocPrefetch;
+  else delete globalThis.location;
+  if (_prevWinPrefetch !== void 0) globalThis.window = _prevWinPrefetch;
+  else delete globalThis.window;
   const { window, document } = (0, import_env.createEnv)();
   const body = document.body;
-  window.location.pathname = route;
+  window.location.pathname = locationPath;
   const _prevDoc = globalThis.document;
   const _prevLoc = globalThis.location;
   globalThis.document = document;
   globalThis.location = window.location;
   const { createDomqlElement } = await bundleCreateDomql();
   const app = structuredCloneDeep(data.app || {});
-  const config = data.config || data.settings || {};
+  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];
+  }
   const polyglotConfig = config.polyglot ? { ...config.polyglot } : void 0;
   if (ssrTranslations && polyglotConfig) {
     polyglotConfig.translations = {
@@ -401,7 +467,13 @@ const render = async (data, options = {}) => {
     components: structuredCloneDeep(data.components || {}),
     snippets: structuredCloneDeep(data.snippets || {}),
     pages: structuredCloneDeep(prefetchedPages || data.pages || {}),
-    functions: data.functions || {},
+    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 || {},
@@ -426,7 +498,7 @@ const render = async (data, options = {}) => {
   await new Promise((r) => setTimeout(r, flushDelay));
   (0, import_keys.assignKeys)(body);
   const registry = (0, import_keys.mapKeysToElements)(element);
-  const metadata = (0, import_metadata.extractMetadata)(data, route);
+  const metadata = (0, import_metadata.extractMetadata)(data, route, element, element?.state);
   const emotionCSS = [];
   const emotionInstance = ctx.emotion || element && element.context && element.context.emotion;
   if (emotionInstance && emotionInstance.cache) {
@@ -476,7 +548,7 @@ const render = async (data, options = {}) => {
   else delete globalThis.document;
   if (_prevLoc !== void 0) globalThis.location = _prevLoc;
   else delete globalThis.location;
-  return { html, metadata, registry, element, emotionCSS, document, window, ssrTranslations };
+  return { html, metadata, registry, element, emotionCSS, document, window, ssrTranslations, prefetchedPages };
 };
 const renderElement = async (elementDef, options = {}) => {
   const { context = {} } = options;
@@ -660,63 +732,82 @@ ${frameRules}
     return _cachedGlobalCSS;
   }
 };
-let _cachedEmotionCSS = null;
+let _accumulatedEmotionCSS = /* @__PURE__ */ new Set();
 const resetGlobalCSSCache = () => {
   _cachedGlobalCSS = null;
-  _cachedEmotionCSS = null;
+  _accumulatedEmotionCSS = /* @__PURE__ */ new Set();
+};
+const getAccumulatedEmotionCSS = () => Array.from(_accumulatedEmotionCSS).join("\n");
+const replaceEmotionCSS = (html, newCSS) => {
+  return html.replace(
+    /<style data-emotion="smbls">[\s\S]*?<\/style>/,
+    newCSS ? `<style data-emotion="smbls">
+${newCSS}
+</style>` : ""
+  );
 };
 const renderRoute = async (data, options = {}) => {
-  const { route = "/" } = options;
+  const { route = "/", pathname } = options;
+  const result = await render(data, { route, pathname, prefetch: true });
+  if (!result) return null;
   const ds = data.designSystem || {};
-  const pageDef = (data.pages || {})[route];
-  if (!pageDef) return null;
-  const result = await renderElement(pageDef, {
-    context: {
-      components: data.components || {},
-      snippets: data.snippets || {},
-      designSystem: ds,
-      state: data.state || {},
-      functions: data.functions || {},
-      methods: data.methods || {}
-    }
-  });
-  const { document: cssDoc } = (0, import_linkedom.parseHTML)(`<html><head></head><body>${result.html}</body></html>`);
-  let emotionInstance;
+  const globalCSS = await generateGlobalCSS(ds, data.config || data.settings);
+  let prefetchedState = null;
+  let activeLang = null;
   try {
-    const { default: createInstance } = await import("@emotion/css/create-instance");
-    emotionInstance = createInstance({ key: "smbls", container: cssDoc.head });
-  } catch {
+    const el = result.element;
+    const polyglot = el?.context?.polyglot || data.polyglot || data.config?.polyglot;
+    activeLang = el?.state?.root?.lang || polyglot?.defaultLang || "en";
+    if (result.prefetchedPages && result.prefetchedPages[route]) {
+      const pageDef = result.prefetchedPages[route];
+      const collectStates = (def, result2 = {}) => {
+        if (!def || typeof def !== "object") return result2;
+        if (def.state && typeof def.state === "object") {
+          for (const [k, v] of Object.entries(def.state)) {
+            if (v !== void 0 && v !== null && typeof v !== "function") {
+              result2[k] = v;
+            }
+          }
+        }
+        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, result2);
+          }
+        }
+        return result2;
+      };
+      prefetchedState = collectStates(pageDef);
+    }
+  } catch (e) {
   }
-  (0, import_hydrate.hydrate)(result.element, {
-    root: cssDoc.body,
-    renderEvents: false,
-    events: false,
-    emotion: emotionInstance,
-    designSystem: ds
-  });
-  const globalCSS = await generateGlobalCSS(ds, data.config || data.settings);
   return {
-    html: cssDoc.body.innerHTML,
-    css: extractCSS(result.element, ds),
+    html: result.html,
+    css: result.emotionCSS ? result.emotionCSS.join("\n") : "",
     globalCSS,
     resetCss: globalCSS.resetRules || generateResetCSS(ds.reset),
     fontLinks: generateFontLinks(ds),
-    metadata: (0, import_metadata.extractMetadata)(data, route),
-    brKeyCount: Object.keys(result.registry).length
+    metadata: result.metadata || (0, import_metadata.extractMetadata)(data, route),
+    brKeyCount: result.registry ? Object.keys(result.registry).length : 0,
+    ssrTranslations: result.ssrTranslations,
+    prefetchedState,
+    activeLang
   };
 };
 const renderPage = async (data, route = "/", options = {}) => {
-  const { lang, themeColor, isr, prefetch = true } = options;
+  const { lang, themeColor, isr, hydrate: hydrate2 = true, prefetch = true } = options;
   const htmlLang = lang || data.state?.lang || data.app?.metadata?.lang || "en";
   const result = await render(data, { route, prefetch });
   if (!result) return null;
   const metadata = { ...result.metadata };
   if (themeColor) metadata["theme-color"] = themeColor;
   const headTags = (0, import_metadata.generateHeadHtml)(metadata);
-  if (!_cachedEmotionCSS && result.emotionCSS && result.emotionCSS.length) {
-    _cachedEmotionCSS = result.emotionCSS.join("\n");
+  if (result.emotionCSS && result.emotionCSS.length) {
+    for (const rule of result.emotionCSS) {
+      if (rule) _accumulatedEmotionCSS.add(rule);
+    }
   }
-  const emotionCSS = _cachedEmotionCSS || (result.emotionCSS || []).join("\n");
+  const emotionCSS = Array.from(_accumulatedEmotionCSS).join("\n");
   const ds = data.designSystem || {};
   const globalCSS = await generateGlobalCSS(ds, data.config || data.settings);
   const fontLinks = generateFontLinks(ds);
@@ -725,7 +816,32 @@ const renderPage = async (data, route = "/", options = {}) => {
   if (isr && isr.clientScript) {
     const depth = route === "/" ? 0 : route.replace(/^\/|\/$/g, "").split("/").length;
     const prefix = depth > 0 ? "../".repeat(depth) : "./";
-    isrBody = `<script type="module">
+    if (hydrate2) {
+      let translationSeed = "";
+      if (result.ssrTranslations) {
+        const polyglotCfg2 = data.polyglot || data.config?.polyglot;
+        const storagePrefix = polyglotCfg2?.storagePrefix || "";
+        const storageLangKey = polyglotCfg2?.storageLangKey || "";
+        const seedEntries = [];
+        for (const lang2 in result.ssrTranslations) {
+          const map = result.ssrTranslations[lang2];
+          if (map && typeof map === "object") {
+            seedEntries.push(`localStorage.setItem(${JSON.stringify(storagePrefix + lang2)},${JSON.stringify(JSON.stringify(map))})`);
+          }
+        }
+        if (storageLangKey) {
+          const defaultLang = polyglotCfg2?.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>
+`;
+        }
+      }
+      isrBody = `${translationSeed}<script>window.__BRENDER__ = true<\/script>
+<script type="module" src="${prefix}${isr.clientScript}"><\/script>`;
+    } else {
+      isrBody = `<script type="module">
 {
   const brEls = document.querySelectorAll('body > :not(script):not(style)')
   const observer = new MutationObserver((mutations) => {
@@ -743,9 +859,11 @@ const renderPage = async (data, route = "/", options = {}) => {
 }
 <\/script>
 <script type="module" src="${prefix}${isr.clientScript}"><\/script>`;
+    }
   }
-  const config = data.config || data.settings || {};
-  const polyglotCfg = config.polyglot;
+  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";

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 import { createEnv } from "./env.js";
 import { resetKeys, assignKeys, mapKeysToElements } from "./keys.js";
 import { loadProject, loadAndRenderAll } from "./load.js";
-import { render, renderElement, renderRoute, renderPage, resetGlobalCSSCache } from "./render.js";
+import { render, renderElement, renderRoute, renderPage, resetGlobalCSSCache, getAccumulatedEmotionCSS, replaceEmotionCSS } from "./render.js";
 import { extractMetadata, generateHeadHtml } from "./metadata.js";
 import { collectBrNodes, hydrate } from "./hydrate.js";
 import { generateSitemap } from "./sitemap.js";
@@ -18,6 +18,8 @@ var index_default = {
   renderRoute,
   renderPage,
   resetGlobalCSSCache,
+  getAccumulatedEmotionCSS,
+  replaceEmotionCSS,
   extractMetadata,
   generateHeadHtml,
   collectBrNodes,
@@ -34,6 +36,7 @@ export {
   extractMetadata,
   generateHeadHtml,
   generateSitemap,
+  getAccumulatedEmotionCSS,
   hydrate,
   injectPrefetchedState,
   loadAndRenderAll,
@@ -44,6 +47,7 @@ export {
   renderElement,
   renderPage,
   renderRoute,
+  replaceEmotionCSS,
   resetGlobalCSSCache,
   resetKeys
 };

package/dist/esm/prefetch.js

@@ -65,15 +65,14 @@ const createSSRAdapter = async (dbConfig) => {
   if (adapter !== "supabase") return null;
   const supabaseUrl = url || projectId && `https://${projectId}.supabase.co`;
   if (!supabaseUrl || !key) return null;
-  let clientFactory = createClient;
-  if (!clientFactory) {
-    try {
-      const mod = await import("@supabase/supabase-js");
-      clientFactory = mod.createClient;
-    } catch {
-      return null;
-    }
+  let clientFactory;
+  try {
+    const mod = await import("@supabase/supabase-js");
+    clientFactory = mod.createClient;
+  } catch {
+    clientFactory = createClient;
   }
+  if (!clientFactory) return null;
   const client = clientFactory(supabaseUrl, key);
   return {
     rpc: ({ from, params }) => client.rpc(from, params),
@@ -127,7 +126,7 @@ const prefetchPageData = async (data, route = "/", options = {}) => {
   const pageDef = pages[route];
   if (!pageDef) return /* @__PURE__ */ new Map();
   const config = data.config || data.settings || {};
-  const dbConfig = config.fetch || config.db || data.db;
+  const dbConfig = config.fetch || data.fetch || config.db || data.db;
   if (!dbConfig) return /* @__PURE__ */ new Map();
   const adapter = await createSSRAdapter(dbConfig);
   if (!adapter) return /* @__PURE__ */ new Map();
@@ -137,9 +136,13 @@ const prefetchPageData = async (data, route = "/", options = {}) => {
   const results = await Promise.allSettled(
     declarations.map(async ({ config: config2, stateKey, path }) => {
       const fetchedData = await executeSingle(adapter, config2);
-      if (fetchedData !== null && stateKey) {
+      if (fetchedData !== null) {
         const existing = stateUpdates.get(path) || {};
-        existing[stateKey] = fetchedData;
+        if (stateKey) {
+          existing[stateKey] = fetchedData;
+        } else if (isObject(fetchedData)) {
+          Object.assign(existing, fetchedData);
+        }
         stateUpdates.set(path, existing);
       }
     })
@@ -147,10 +150,10 @@ const prefetchPageData = async (data, route = "/", options = {}) => {
   return stateUpdates;
 };
 const fetchSSRTranslations = async (data) => {
-  const config = data.config || data.settings || {};
-  const polyglot = config.polyglot;
+  const config = data.config || {};
+  const polyglot = config.polyglot || data.polyglot;
   if (!polyglot?.fetch) return null;
-  const dbConfig = config.fetch || config.db || data.db;
+  const dbConfig = config.fetch || data.fetch || config.db || data.db;
   if (!dbConfig) return null;
   const adapter = await createSSRAdapter(dbConfig);
   if (!adapter) return null;

package/dist/esm/render.js

@@ -9,6 +9,51 @@ import { hydrate } from "./hydrate.js";
 import { prefetchPageData, injectPrefetchedState, fetchSSRTranslations } from "./prefetch.js";
 import { parseHTML } from "linkedom";
 import createEmotionInstance from "@emotion/css/create-instance";
+const ssrResolve = (map, key) => {
+  if (!map || !key) return void 0;
+  if (map[key] !== void 0) return map[key];
+  const parts = key.split(".");
+  let v = map;
+  for (const p of parts) {
+    if (v == null || typeof v !== "object") return void 0;
+    v = v[p];
+  }
+  return v;
+};
+const ssrTranslate = function(key, lang) {
+  if (!key) return "";
+  const ctx = this?.context;
+  const poly = ctx?.polyglot;
+  const activeLang = lang || poly?.defaultLang || "ka";
+  if (poly?.translations) {
+    const langMap = poly.translations[activeLang];
+    if (langMap) {
+      const val = ssrResolve(langMap, key);
+      if (val !== void 0) return val;
+    }
+  }
+  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 !== void 0) return val;
+    }
+  }
+  const defaultLang = poly?.defaultLang || "en";
+  if (defaultLang !== activeLang && poly?.translations) {
+    const fallback = poly.translations[defaultLang];
+    if (fallback) {
+      const val = ssrResolve(fallback, key);
+      if (val !== void 0) return val;
+    }
+  }
+  return key;
+};
+const ssrGetActiveLang = function() {
+  const ctx = this?.context;
+  return this?.state?.root?.lang || ctx?.polyglot?.defaultLang || "ka";
+};
 const structuredCloneDeep = (obj, seen = /* @__PURE__ */ new WeakMap()) => {
   if (obj === null || typeof obj !== "object") return obj;
   if (seen.has(obj)) return seen.get(obj);
@@ -284,7 +329,16 @@ const UIKIT_STUBS = {
   Text: { tag: "span" }
 };
 const render = async (data, options = {}) => {
-  const { route = "/", state: stateOverrides, context: contextOverrides, prefetch = false } = options;
+  const { route = "/", pathname, state: stateOverrides, context: contextOverrides, prefetch = false } = options;
+  const locationPath = pathname || route;
+  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 {
@@ -322,16 +376,26 @@ const render = async (data, options = {}) => {
     } catch {
     }
   }
+  if (_prevLocPrefetch !== void 0) globalThis.location = _prevLocPrefetch;
+  else delete globalThis.location;
+  if (_prevWinPrefetch !== void 0) globalThis.window = _prevWinPrefetch;
+  else delete globalThis.window;
   const { window, document } = createEnv();
   const body = document.body;
-  window.location.pathname = route;
+  window.location.pathname = locationPath;
   const _prevDoc = globalThis.document;
   const _prevLoc = globalThis.location;
   globalThis.document = document;
   globalThis.location = window.location;
   const { createDomqlElement } = await bundleCreateDomql();
   const app = structuredCloneDeep(data.app || {});
-  const config = data.config || data.settings || {};
+  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];
+  }
   const polyglotConfig = config.polyglot ? { ...config.polyglot } : void 0;
   if (ssrTranslations && polyglotConfig) {
     polyglotConfig.translations = {
@@ -364,7 +428,13 @@ const render = async (data, options = {}) => {
     components: structuredCloneDeep(data.components || {}),
     snippets: structuredCloneDeep(data.snippets || {}),
     pages: structuredCloneDeep(prefetchedPages || data.pages || {}),
-    functions: data.functions || {},
+    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 || {},
@@ -389,7 +459,7 @@ const render = async (data, options = {}) => {
   await new Promise((r) => setTimeout(r, flushDelay));
   assignKeys(body);
   const registry = mapKeysToElements(element);
-  const metadata = extractMetadata(data, route);
+  const metadata = extractMetadata(data, route, element, element?.state);
   const emotionCSS = [];
   const emotionInstance = ctx.emotion || element && element.context && element.context.emotion;
   if (emotionInstance && emotionInstance.cache) {
@@ -439,7 +509,7 @@ const render = async (data, options = {}) => {
   else delete globalThis.document;
   if (_prevLoc !== void 0) globalThis.location = _prevLoc;
   else delete globalThis.location;
-  return { html, metadata, registry, element, emotionCSS, document, window, ssrTranslations };
+  return { html, metadata, registry, element, emotionCSS, document, window, ssrTranslations, prefetchedPages };
 };
 const renderElement = async (elementDef, options = {}) => {
   const { context = {} } = options;
@@ -623,63 +693,82 @@ ${frameRules}
     return _cachedGlobalCSS;
   }
 };
-let _cachedEmotionCSS = null;
+let _accumulatedEmotionCSS = /* @__PURE__ */ new Set();
 const resetGlobalCSSCache = () => {
   _cachedGlobalCSS = null;
-  _cachedEmotionCSS = null;
+  _accumulatedEmotionCSS = /* @__PURE__ */ new Set();
+};
+const getAccumulatedEmotionCSS = () => Array.from(_accumulatedEmotionCSS).join("\n");
+const replaceEmotionCSS = (html, newCSS) => {
+  return html.replace(
+    /<style data-emotion="smbls">[\s\S]*?<\/style>/,
+    newCSS ? `<style data-emotion="smbls">
+${newCSS}
+</style>` : ""
+  );
 };
 const renderRoute = async (data, options = {}) => {
-  const { route = "/" } = options;
+  const { route = "/", pathname } = options;
+  const result = await render(data, { route, pathname, prefetch: true });
+  if (!result) return null;
   const ds = data.designSystem || {};
-  const pageDef = (data.pages || {})[route];
-  if (!pageDef) return null;
-  const result = await renderElement(pageDef, {
-    context: {
-      components: data.components || {},
-      snippets: data.snippets || {},
-      designSystem: ds,
-      state: data.state || {},
-      functions: data.functions || {},
-      methods: data.methods || {}
-    }
-  });
-  const { document: cssDoc } = parseHTML(`<html><head></head><body>${result.html}</body></html>`);
-  let emotionInstance;
+  const globalCSS = await generateGlobalCSS(ds, data.config || data.settings);
+  let prefetchedState = null;
+  let activeLang = null;
   try {
-    const { default: createInstance } = await import("@emotion/css/create-instance");
-    emotionInstance = createInstance({ key: "smbls", container: cssDoc.head });
-  } catch {
+    const el = result.element;
+    const polyglot = el?.context?.polyglot || data.polyglot || data.config?.polyglot;
+    activeLang = el?.state?.root?.lang || polyglot?.defaultLang || "en";
+    if (result.prefetchedPages && result.prefetchedPages[route]) {
+      const pageDef = result.prefetchedPages[route];
+      const collectStates = (def, result2 = {}) => {
+        if (!def || typeof def !== "object") return result2;
+        if (def.state && typeof def.state === "object") {
+          for (const [k, v] of Object.entries(def.state)) {
+            if (v !== void 0 && v !== null && typeof v !== "function") {
+              result2[k] = v;
+            }
+          }
+        }
+        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, result2);
+          }
+        }
+        return result2;
+      };
+      prefetchedState = collectStates(pageDef);
+    }
+  } catch (e) {
   }
-  hydrate(result.element, {
-    root: cssDoc.body,
-    renderEvents: false,
-    events: false,
-    emotion: emotionInstance,
-    designSystem: ds
-  });
-  const globalCSS = await generateGlobalCSS(ds, data.config || data.settings);
   return {
-    html: cssDoc.body.innerHTML,
-    css: extractCSS(result.element, ds),
+    html: result.html,
+    css: result.emotionCSS ? result.emotionCSS.join("\n") : "",
     globalCSS,
     resetCss: globalCSS.resetRules || generateResetCSS(ds.reset),
     fontLinks: generateFontLinks(ds),
-    metadata: extractMetadata(data, route),
-    brKeyCount: Object.keys(result.registry).length
+    metadata: result.metadata || extractMetadata(data, route),
+    brKeyCount: result.registry ? Object.keys(result.registry).length : 0,
+    ssrTranslations: result.ssrTranslations,
+    prefetchedState,
+    activeLang
   };
 };
 const renderPage = async (data, route = "/", options = {}) => {
-  const { lang, themeColor, isr, prefetch = true } = options;
+  const { lang, themeColor, isr, hydrate: hydrate2 = true, prefetch = true } = options;
   const htmlLang = lang || data.state?.lang || data.app?.metadata?.lang || "en";
   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);
-  if (!_cachedEmotionCSS && result.emotionCSS && result.emotionCSS.length) {
-    _cachedEmotionCSS = result.emotionCSS.join("\n");
+  if (result.emotionCSS && result.emotionCSS.length) {
+    for (const rule of result.emotionCSS) {
+      if (rule) _accumulatedEmotionCSS.add(rule);
+    }
   }
-  const emotionCSS = _cachedEmotionCSS || (result.emotionCSS || []).join("\n");
+  const emotionCSS = Array.from(_accumulatedEmotionCSS).join("\n");
   const ds = data.designSystem || {};
   const globalCSS = await generateGlobalCSS(ds, data.config || data.settings);
   const fontLinks = generateFontLinks(ds);
@@ -688,7 +777,32 @@ const renderPage = async (data, route = "/", options = {}) => {
   if (isr && isr.clientScript) {
     const depth = route === "/" ? 0 : route.replace(/^\/|\/$/g, "").split("/").length;
     const prefix = depth > 0 ? "../".repeat(depth) : "./";
-    isrBody = `<script type="module">
+    if (hydrate2) {
+      let translationSeed = "";
+      if (result.ssrTranslations) {
+        const polyglotCfg2 = data.polyglot || data.config?.polyglot;
+        const storagePrefix = polyglotCfg2?.storagePrefix || "";
+        const storageLangKey = polyglotCfg2?.storageLangKey || "";
+        const seedEntries = [];
+        for (const lang2 in result.ssrTranslations) {
+          const map = result.ssrTranslations[lang2];
+          if (map && typeof map === "object") {
+            seedEntries.push(`localStorage.setItem(${JSON.stringify(storagePrefix + lang2)},${JSON.stringify(JSON.stringify(map))})`);
+          }
+        }
+        if (storageLangKey) {
+          const defaultLang = polyglotCfg2?.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>
+`;
+        }
+      }
+      isrBody = `${translationSeed}<script>window.__BRENDER__ = true<\/script>
+<script type="module" src="${prefix}${isr.clientScript}"><\/script>`;
+    } else {
+      isrBody = `<script type="module">
 {
   const brEls = document.querySelectorAll('body > :not(script):not(style)')
   const observer = new MutationObserver((mutations) => {
@@ -706,9 +820,11 @@ const renderPage = async (data, route = "/", options = {}) => {
 }
 <\/script>
 <script type="module" src="${prefix}${isr.clientScript}"><\/script>`;
+    }
   }
-  const config = data.config || data.settings || {};
-  const polyglotCfg = config.polyglot;
+  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";
@@ -1189,9 +1305,11 @@ const generateFontLinks = (ds) => {
   ].join("\n");
 };
 export {
+  getAccumulatedEmotionCSS,
   render,
   renderElement,
   renderPage,
   renderRoute,
+  replaceEmotionCSS,
   resetGlobalCSSCache
 };

package/index.js

@@ -1,7 +1,7 @@
 import { createEnv } from './env.js'
 import { resetKeys, assignKeys, mapKeysToElements } from './keys.js'
 import { loadProject, loadAndRenderAll } from './load.js'
-import { render, renderElement, renderRoute, renderPage, resetGlobalCSSCache } from './render.js'
+import { render, renderElement, renderRoute, renderPage, resetGlobalCSSCache, getAccumulatedEmotionCSS, replaceEmotionCSS } from './render.js'
 import { extractMetadata, generateHeadHtml } from './metadata.js'
 import { collectBrNodes, hydrate } from './hydrate.js'
 import { generateSitemap } from './sitemap.js'
@@ -19,6 +19,8 @@ export {
   renderRoute,
   renderPage,
   resetGlobalCSSCache,
+  getAccumulatedEmotionCSS,
+  replaceEmotionCSS,
   extractMetadata,
   generateHeadHtml,
   collectBrNodes,
@@ -40,6 +42,8 @@ export default {
   renderRoute,
   renderPage,
   resetGlobalCSSCache,
+  getAccumulatedEmotionCSS,
+  replaceEmotionCSS,
   extractMetadata,
   generateHeadHtml,
   collectBrNodes,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbo.ls/brender",
-  "version": "3.7.4",
+  "version": "3.7.6",
   "license": "CC-BY-NC-4.0",
   "type": "module",
   "module": "./dist/esm/index.js",
@@ -36,7 +36,7 @@
     "dev:rita": "node examples/serve-rita.js"
   },
   "dependencies": {
-    "@symbo.ls/helmet": "^3.7.4",
+    "@symbo.ls/helmet": "^3.7.6",
     "linkedom": "^0.16.8"
   },
   "devDependencies": {

package/prefetch.js

@@ -118,15 +118,17 @@ const createSSRAdapter = async (dbConfig) => {
   const supabaseUrl = url || (projectId && `https://${projectId}.supabase.co`)
   if (!supabaseUrl || !key) return null
 
-  let clientFactory = createClient
-  if (!clientFactory) {
-    try {
-      const mod = await import('@supabase/supabase-js')
-      clientFactory = mod.createClient
-    } catch {
-      return null
-    }
+  // Always import @supabase/supabase-js for SSR — the serialized createClient
+  // from project data is a no-op placeholder that won't produce a real client.
+  let clientFactory
+  try {
+    const mod = await import('@supabase/supabase-js')
+    clientFactory = mod.createClient
+  } catch {
+    // Fall back to provided createClient only if import fails
+    clientFactory = createClient
   }
+  if (!clientFactory) return null
 
   const client = clientFactory(supabaseUrl, key)
 
@@ -199,7 +201,7 @@ export const prefetchPageData = async (data, route = '/', options = {}) => {
   if (!pageDef) return new Map()
 
   const config = data.config || data.settings || {}
-  const dbConfig = config.fetch || config.db || data.db
+  const dbConfig = config.fetch || data.fetch || config.db || data.db
   if (!dbConfig) return new Map()
 
   const adapter = await createSSRAdapter(dbConfig)
@@ -214,9 +216,15 @@ export const prefetchPageData = async (data, route = '/', options = {}) => {
   const results = await Promise.allSettled(
     declarations.map(async ({ config, stateKey, path }) => {
       const fetchedData = await executeSingle(adapter, config)
-      if (fetchedData !== null && stateKey) {
+      if (fetchedData !== null) {
         const existing = stateUpdates.get(path) || {}
-        existing[stateKey] = fetchedData
+        if (stateKey) {
+          // Named: store under the `as` key
+          existing[stateKey] = fetchedData
+        } else if (isObject(fetchedData)) {
+          // No `as` key + transform returned an object: spread into state
+          Object.assign(existing, fetchedData)
+        }
         stateUpdates.set(path, existing)
       }
     })
@@ -240,11 +248,12 @@ export const prefetchPageData = async (data, route = '/', options = {}) => {
  * @returns {Promise<object|null>} Translation map keyed by language, or null on failure
  */
 export const fetchSSRTranslations = async (data) => {
-  const config = data.config || data.settings || {}
-  const polyglot = config.polyglot
+  // Config fields may be nested under data.config or spread at the top level
+  const config = data.config || {}
+  const polyglot = config.polyglot || data.polyglot
   if (!polyglot?.fetch) return null
 
-  const dbConfig = config.fetch || config.db || data.db
+  const dbConfig = config.fetch || data.fetch || config.db || data.db
   if (!dbConfig) return null
 
   const adapter = await createSSRAdapter(dbConfig)

package/render.js

@@ -10,6 +10,64 @@ import { prefetchPageData, injectPrefetchedState, fetchSSRTranslations } from '.
 import { parseHTML } from 'linkedom'
 import createEmotionInstance from '@emotion/css/create-instance'
 
+// 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
+  const activeLang = lang || poly?.defaultLang || 'ka'
+
+  // 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
+  return this?.state?.root?.lang || ctx?.polyglot?.defaultLang || 'ka'
+}
+
 // Deep clone that preserves functions and avoids circular refs
 const structuredCloneDeep = (obj, seen = new WeakMap()) => {
   if (obj === null || typeof obj !== 'object') return obj
@@ -307,12 +365,24 @@ const UIKIT_STUBS = {
  * @returns {Promise<{ html: string, metadata: object, registry: object, element: object }>}
  */
 export const render = async (data, options = {}) => {
-  const { route = '/', state: stateOverrides, context: contextOverrides, prefetch = false } = 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 {
@@ -355,11 +425,17 @@ export const render = async (data, options = {}) => {
     } catch {}
   }
 
+  // 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 = route
+  window.location.pathname = locationPath
 
   // Set globalThis.document/location so the bundled smbls code
   // (which uses `window = globalThis`) can access them during SSR.
@@ -375,7 +451,15 @@ export const render = async (data, options = {}) => {
 
   const app = structuredCloneDeep(data.app || {})
 
-  const config = data.config || data.settings || {}
+  // 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
@@ -418,7 +502,13 @@ export const render = async (data, options = {}) => {
     components: structuredCloneDeep(data.components || {}),
     snippets: structuredCloneDeep(data.snippets || {}),
     pages: structuredCloneDeep(prefetchedPages || data.pages || {}),
-    functions: data.functions || {},
+    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 || {},
@@ -455,7 +545,9 @@ export const render = async (data, options = {}) => {
   const registry = mapKeysToElements(element)
 
   // Extract metadata for the rendered route
-  const metadata = extractMetadata(data, 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 emotion-generated CSS
   // Emotion uses insertRule() (CSSOM) which doesn't populate textContent in linkedom.
@@ -521,7 +613,7 @@ export const render = async (data, options = {}) => {
   if (_prevLoc !== undefined) globalThis.location = _prevLoc
   else delete globalThis.location
 
-  return { html, metadata, registry, element, emotionCSS, document, window, ssrTranslations }
+  return { html, metadata, registry, element, emotionCSS, document, window, ssrTranslations, prefetchedPages }
 }
 
 /**
@@ -768,16 +860,34 @@ const generateGlobalCSS = async (ds, config) => {
   }
 }
 
-// Emotion CSS is generated by a singleton cache in the bundled smbls module.
-// After the first render, emotion's cache.inserted marks all classes as done,
-// so subsequent renders don't re-insert CSS. We capture the emotion CSS from
-// the first render and reuse it for all pages (all pages share the same components).
-let _cachedEmotionCSS = null
+// 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; _cachedEmotionCSS = null }
+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 ───────────────────────────────────────────────────────────
 
@@ -792,49 +902,61 @@ export const resetGlobalCSSCache = () => { _cachedGlobalCSS = null; _cachedEmoti
  * @returns {Promise<{ html: string, css: string, resetCss: string, fontLinks: string, metadata: object, brKeyCount: number }>}
  */
 export const renderRoute = async (data, options = {}) => {
-  const { route = '/' } = options
-  const ds = data.designSystem || {}
-  const pageDef = (data.pages || {})[route]
-  if (!pageDef) return null
-
-  const result = await renderElement(pageDef, {
-    context: {
-      components: data.components || {},
-      snippets: data.snippets || {},
-      designSystem: ds,
-      state: data.state || {},
-      functions: data.functions || {},
-      methods: data.methods || {}
-    }
-  })
+  const { route = '/', pathname } = options
 
-  // Hydrate with emotion → CSS classes on nodes
-  const { document: cssDoc } = parseHTML(`<html><head></head><body>${result.html}</body></html>`)
-  let emotionInstance
-  try {
-    const { default: createInstance } = await import('@emotion/css/create-instance')
-    emotionInstance = createInstance({ key: 'smbls', container: cssDoc.head })
-  } catch {}
-
-  hydrate(result.element, {
-    root: cssDoc.body,
-    renderEvents: false,
-    events: false,
-    emotion: emotionInstance,
-    designSystem: ds
-  })
+  // 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
 
-  // Generate global CSS (variables, reset, keyframes) via scratch pipeline
+  const ds = data.designSystem || {}
   const globalCSS = await generateGlobalCSS(ds, data.config || data.settings)
 
+  // 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: cssDoc.body.innerHTML,
-    css: extractCSS(result.element, ds),
+    html: result.html,
+    css: result.emotionCSS ? result.emotionCSS.join('\n') : '',
     globalCSS,
     resetCss: globalCSS.resetRules || generateResetCSS(ds.reset),
     fontLinks: generateFontLinks(ds),
-    metadata: extractMetadata(data, route),
-    brKeyCount: Object.keys(result.registry).length
+    metadata: result.metadata || extractMetadata(data, route),
+    brKeyCount: result.registry ? Object.keys(result.registry).length : 0,
+    ssrTranslations: result.ssrTranslations,
+    prefetchedState,
+    activeLang
   }
 }
 
@@ -853,11 +975,12 @@ export const renderRoute = async (data, options = {}) => {
  * @param {string} [options.lang='en'] - HTML lang attribute
  * @param {string} [options.themeColor] - theme-color meta
  * @param {object} [options.isr] - ISR options with clientScript path
+ * @param {boolean} [options.hydrate=true] - Use true hydration (attach to existing DOM) instead of full SPA re-render
  * @param {boolean} [options.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, prefetch = true } = 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'
@@ -870,13 +993,16 @@ export const renderPage = async (data, route = '/', options = {}) => {
   if (themeColor) metadata['theme-color'] = themeColor
   const headTags = generateHeadHtml(metadata)
 
-  // Extract CSS: emotion-generated styles from the full pipeline.
-  // Emotion uses a singleton cache in the bundled module — after the first render,
-  // subsequent renders don't re-insert CSS. Cache the first result and reuse.
-  if (!_cachedEmotionCSS && result.emotionCSS && result.emotionCSS.length) {
-    _cachedEmotionCSS = result.emotionCSS.join('\n')
+  // 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 = _cachedEmotionCSS || (result.emotionCSS || []).join('\n')
+  const emotionCSS = Array.from(_accumulatedEmotionCSS).join('\n')
 
   // Generate global CSS (variables, reset, keyframes) via scratch pipeline
   const ds = data.designSystem || {}
@@ -893,9 +1019,40 @@ export const renderPage = async (data, route = '/', options = {}) => {
     // Calculate relative path from route directory to root
     const depth = route === '/' ? 0 : route.replace(/^\/|\/$/g, '').split('/').length
     const prefix = depth > 0 ? '../'.repeat(depth) : './'
-    // Inline handoff script: when the SPA adds its root element to <body>,
-    // remove the pre-rendered brender content for a seamless transition.
-    isrBody = `<script type="module">
+
+    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`
+        }
+      }
+      isrBody = `${translationSeed}<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) => {
@@ -913,11 +1070,13 @@ export const renderPage = async (data, route = '/', options = {}) => {
 }
 </script>
 <script type="module" src="${prefix}${isr.clientScript}"></script>`
+    }
   }
 
   // Resolve any {{ key | polyglot }} templates in head tags (title, meta, etc.)
-  const config = data.config || data.settings || {}
-  const polyglotCfg = config.polyglot
+  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'