@symbo.ls/brender 3.7.0 → 3.7.4

package/dist/cjs/load.js

@@ -103,17 +103,17 @@ const loadProject = async (projectPath) => {
     bundleAndImport((0, import_path.join)(symbolsDir, "files", "index.js"))
   ]);
   return {
-    app: appModule?.default || {},
-    state: stateModule?.default || {},
-    dependencies: depsModule?.default || {},
-    components: componentsModule || {},
-    snippets: snippetsModule || {},
-    pages: pagesModule?.default || {},
-    functions: functionsModule || {},
-    methods: methodsModule || {},
-    designSystem: designSystemModule?.default || {},
-    files: filesModule?.default || {},
-    config: configModule?.default || {}
+    app: { ...appModule?.default || {} },
+    state: { ...stateModule?.default || {} },
+    dependencies: { ...depsModule?.default || {} },
+    components: { ...componentsModule || {} },
+    snippets: { ...snippetsModule || {} },
+    pages: { ...pagesModule?.default || {} },
+    functions: { ...functionsModule || {} },
+    methods: { ...methodsModule || {} },
+    designSystem: { ...designSystemModule?.default || {} },
+    files: { ...filesModule?.default || {} },
+    config: { ...configModule?.default || {} }
   };
 };
 const loadAndRenderAll = async (projectPath, renderFn) => {

package/dist/cjs/prefetch.js

@@ -27,6 +27,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var prefetch_exports = {};
 __export(prefetch_exports, {
+  fetchSSRTranslations: () => fetchSSRTranslations,
   injectPrefetchedState: () => injectPrefetchedState,
   prefetchPageData: () => prefetchPageData
 });
@@ -159,7 +160,8 @@ const prefetchPageData = async (data, route = "/", options = {}) => {
   const pages = data.pages || {};
   const pageDef = pages[route];
   if (!pageDef) return /* @__PURE__ */ new Map();
-  const dbConfig = data.config?.db || data.settings?.db || data.db;
+  const config = data.config || data.settings || {};
+  const dbConfig = config.fetch || config.db || data.db;
   if (!dbConfig) return /* @__PURE__ */ new Map();
   const adapter = await createSSRAdapter(dbConfig);
   if (!adapter) return /* @__PURE__ */ new Map();
@@ -167,8 +169,8 @@ const prefetchPageData = async (data, route = "/", options = {}) => {
   if (!declarations.length) return /* @__PURE__ */ new Map();
   const stateUpdates = /* @__PURE__ */ new Map();
   const results = await Promise.allSettled(
-    declarations.map(async ({ config, stateKey, path }) => {
-      const fetchedData = await executeSingle(adapter, config);
+    declarations.map(async ({ config: config2, stateKey, path }) => {
+      const fetchedData = await executeSingle(adapter, config2);
       if (fetchedData !== null && stateKey) {
         const existing = stateUpdates.get(path) || {};
         existing[stateKey] = fetchedData;
@@ -178,6 +180,66 @@ const prefetchPageData = async (data, route = "/", options = {}) => {
   );
   return stateUpdates;
 };
+const fetchSSRTranslations = async (data) => {
+  const config = data.config || data.settings || {};
+  const polyglot = config.polyglot;
+  if (!polyglot?.fetch) return null;
+  const dbConfig = config.fetch || config.db || data.db;
+  if (!dbConfig) return null;
+  const adapter = await createSSRAdapter(dbConfig);
+  if (!adapter) return null;
+  const fetchConfig = polyglot.fetch;
+  const rpcName = fetchConfig.rpc || fetchConfig.from || "get_translations_if_changed";
+  const languages = polyglot.languages || [polyglot.defaultLang || "en"];
+  const translations = {};
+  const results = await Promise.allSettled(
+    languages.map(async (lang) => {
+      try {
+        const res = await adapter.rpc({
+          from: rpcName,
+          params: { p_lang: lang, p_cached_version: 0 }
+        });
+        if (res.error || !res.data) return;
+        const result = res.data;
+        if (result.translations) {
+          translations[lang] = result.translations;
+        }
+      } catch {
+      }
+    })
+  );
+  return Object.keys(translations).length ? translations : null;
+};
+const preEvaluateChildren = (def, inheritedState) => {
+  if (!def || typeof def !== "object") return;
+  for (const key in def) {
+    if (key === "state" || key === "fetch" || key === "props" || key === "attr" || key === "on" || key === "define" || key === "childExtends" || key === "childProps" || key === "childrenAs") continue;
+    if (key.charAt(0) >= "A" && key.charAt(0) <= "Z" && isObject(def[key])) {
+      const child = def[key];
+      const effectiveState = child.state && typeof child.state === "object" ? { ...inheritedState, ...child.state } : inheritedState;
+      if (isFunction(child.children)) {
+        try {
+          const mockEl = {
+            state: effectiveState,
+            props: {},
+            call: (fn) => {
+              if (fn === "getActiveLang" || fn === "getLang") return effectiveState?.lang || "ka";
+              if (fn === "polyglot") return arguments[1] || "";
+              return void 0;
+            },
+            __ref: {}
+          };
+          const result = child.children(mockEl, effectiveState);
+          if (isArray(result) && result.length > 0) {
+            child.children = result;
+          }
+        } catch {
+        }
+      }
+      preEvaluateChildren(child, effectiveState);
+    }
+  }
+};
 const injectPrefetchedState = (pageDef, stateUpdates) => {
   if (!stateUpdates || !stateUpdates.size) return;
   for (const [path, data] of stateUpdates) {
@@ -194,6 +256,7 @@ const injectPrefetchedState = (pageDef, stateUpdates) => {
         target.state = {};
       }
       Object.assign(target.state, data);
+      preEvaluateChildren(target, target.state);
     }
   }
 };

package/dist/cjs/render.js

@@ -44,6 +44,7 @@ var import_metadata = require("./metadata.js");
 var import_hydrate = require("./hydrate.js");
 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 structuredCloneDeep = (obj, seen = /* @__PURE__ */ new WeakMap()) => {
   if (obj === null || typeof obj !== "object") return obj;
@@ -76,7 +77,7 @@ const safeJsonReplacer = () => {
 let _cachedCreateDomql = null;
 const bundleCreateDomql = async () => {
   if (_cachedCreateDomql) return _cachedCreateDomql;
-  const brenderDir = new URL(".", import_meta.url).pathname;
+  const brenderDir = (0, import_fs.realpathSync)(new URL(".", import_meta.url).pathname);
   const monorepoRoot = (0, import_path.resolve)(brenderDir, "../..");
   const entry = (0, import_path.resolve)(monorepoRoot, "packages", "smbls", "src", "createDomql.js");
   const esbuild = await import("esbuild");
@@ -346,10 +347,18 @@ const render = async (data, options = {}) => {
         (0, import_prefetch.injectPrefetchedState)(pageDef, stateUpdates);
         prefetchedPages[route] = pageDef;
       }
-    } catch {
+    } catch (prefetchErr) {
+      console.error("[brender] Prefetch error:", prefetchErr);
       prefetchedPages = data.pages;
     }
   }
+  let ssrTranslations;
+  if (prefetch) {
+    try {
+      ssrTranslations = await (0, import_prefetch.fetchSSRTranslations)(data);
+    } catch {
+    }
+  }
   const { window, document } = (0, import_env.createEnv)();
   const body = document.body;
   window.location.pathname = route;
@@ -359,9 +368,35 @@ const render = async (data, options = {}) => {
   globalThis.location = window.location;
   const { createDomqlElement } = await bundleCreateDomql();
   const app = structuredCloneDeep(data.app || {});
+  const config = data.config || data.settings || {};
+  const polyglotConfig = config.polyglot ? { ...config.polyglot } : void 0;
+  if (ssrTranslations && polyglotConfig) {
+    polyglotConfig.translations = {
+      ...polyglotConfig.translations || {},
+      ...ssrTranslations
+    };
+  }
+  const baseState = structuredCloneDeep(data.state || {});
+  if (ssrTranslations || polyglotConfig) {
+    if (!baseState.root) baseState.root = {};
+    if (polyglotConfig) {
+      baseState.root.lang = baseState.root.lang || polyglotConfig.defaultLang || "en";
+    }
+    if (ssrTranslations) {
+      baseState.root.translations = {
+        ...baseState.root.translations || {},
+        ...ssrTranslations
+      };
+    }
+  }
+  const ssrEmotion = (0, import_create_instance.default)({
+    key: "smbls",
+    container: document.head,
+    speedy: false
+  });
   const ctx = {
-    state: structuredCloneDeep(data.state || {}),
-    ...stateOverrides ? { state: { ...structuredCloneDeep(data.state || {}), ...stateOverrides } } : {},
+    state: baseState,
+    ...stateOverrides ? { state: { ...baseState, ...stateOverrides } } : {},
     dependencies: structuredCloneDeep(data.dependencies || {}),
     components: structuredCloneDeep(data.components || {}),
     snippets: structuredCloneDeep(data.snippets || {}),
@@ -370,17 +405,25 @@ const render = async (data, options = {}) => {
     methods: data.methods || {},
     designSystem: structuredCloneDeep(data.designSystem || {}),
     files: data.files || {},
-    ...data.config || data.settings || {},
+    ...config,
+    // Override polyglot with SSR-enriched version
+    ...polyglotConfig ? { polyglot: polyglotConfig } : {},
     // Virtual DOM environment
     document,
     window,
     parent: { node: body },
+    // Use SSR emotion instance (non-speedy) for proper @media rule extraction
+    initOptions: { emotion: ssrEmotion },
+    // Disable sourcemap tracking in SSR — it causes stack overflows
+    // when state contains large data arrays (articles, events, etc.)
+    domqlOptions: { sourcemap: false },
     // Caller overrides
     ...contextOverrides || {}
   };
   (0, import_keys.resetKeys)();
   const element = await createDomqlElement(app, ctx);
-  await new Promise((r) => setTimeout(r, 50));
+  const flushDelay = prefetch ? 2e3 : 50;
+  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);
@@ -420,12 +463,20 @@ const render = async (data, options = {}) => {
       }
     }
   }
-  const html = fixSvgContent(body.innerHTML);
+  let html = fixSvgContent(body.innerHTML);
+  if (ssrTranslations) {
+    const defaultLang = polyglotConfig?.defaultLang || "en";
+    const langMap = ssrTranslations[defaultLang] || Object.values(ssrTranslations)[0] || {};
+    html = html.replace(/\{\{\s*([^|{}]+?)\s*\|\s*polyglot\s*\}\}/g, (match, key) => {
+      const trimmed = key.trim();
+      return langMap[trimmed] ?? match;
+    });
+  }
   if (_prevDoc !== void 0) globalThis.document = _prevDoc;
   else delete globalThis.document;
   if (_prevLoc !== void 0) globalThis.location = _prevLoc;
   else delete globalThis.location;
-  return { html, metadata, registry, element, emotionCSS, document, window };
+  return { html, metadata, registry, element, emotionCSS, document, window, ssrTranslations };
 };
 const renderElement = async (elementDef, options = {}) => {
   const { context = {} } = options;
@@ -693,10 +744,25 @@ 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;
+  let resolvedHeadTags = headTags;
+  if (polyglotCfg) {
+    const defaultLang = polyglotCfg.defaultLang || "en";
+    const translations = {
+      ...polyglotCfg.translations || {},
+      ...result.ssrTranslations || {}
+    };
+    const langMap = translations[defaultLang] || {};
+    resolvedHeadTags = headTags.replace(/\{\{\s*([^|{}]+?)\s*\|\s*polyglot\s*\}\}/g, (match, key) => {
+      const trimmed = key.trim();
+      return langMap[trimmed] ?? match;
+    });
+  }
   const html = `<!DOCTYPE html>
 <html lang="${htmlLang}">
 <head>
-${headTags}
+${resolvedHeadTags}
 ${fontLinks}
 ${globalCSS.fontFaceCSS ? `<style>${globalCSS.fontFaceCSS}</style>` : ""}
 <style>

package/dist/esm/load.js

@@ -70,17 +70,17 @@ const loadProject = async (projectPath) => {
     bundleAndImport(join(symbolsDir, "files", "index.js"))
   ]);
   return {
-    app: appModule?.default || {},
-    state: stateModule?.default || {},
-    dependencies: depsModule?.default || {},
-    components: componentsModule || {},
-    snippets: snippetsModule || {},
-    pages: pagesModule?.default || {},
-    functions: functionsModule || {},
-    methods: methodsModule || {},
-    designSystem: designSystemModule?.default || {},
-    files: filesModule?.default || {},
-    config: configModule?.default || {}
+    app: { ...appModule?.default || {} },
+    state: { ...stateModule?.default || {} },
+    dependencies: { ...depsModule?.default || {} },
+    components: { ...componentsModule || {} },
+    snippets: { ...snippetsModule || {} },
+    pages: { ...pagesModule?.default || {} },
+    functions: { ...functionsModule || {} },
+    methods: { ...methodsModule || {} },
+    designSystem: { ...designSystemModule?.default || {} },
+    files: { ...filesModule?.default || {} },
+    config: { ...configModule?.default || {} }
   };
 };
 const loadAndRenderAll = async (projectPath, renderFn) => {

package/dist/esm/prefetch.js

@@ -126,7 +126,8 @@ const prefetchPageData = async (data, route = "/", options = {}) => {
   const pages = data.pages || {};
   const pageDef = pages[route];
   if (!pageDef) return /* @__PURE__ */ new Map();
-  const dbConfig = data.config?.db || data.settings?.db || data.db;
+  const config = data.config || data.settings || {};
+  const dbConfig = config.fetch || config.db || data.db;
   if (!dbConfig) return /* @__PURE__ */ new Map();
   const adapter = await createSSRAdapter(dbConfig);
   if (!adapter) return /* @__PURE__ */ new Map();
@@ -134,8 +135,8 @@ const prefetchPageData = async (data, route = "/", options = {}) => {
   if (!declarations.length) return /* @__PURE__ */ new Map();
   const stateUpdates = /* @__PURE__ */ new Map();
   const results = await Promise.allSettled(
-    declarations.map(async ({ config, stateKey, path }) => {
-      const fetchedData = await executeSingle(adapter, config);
+    declarations.map(async ({ config: config2, stateKey, path }) => {
+      const fetchedData = await executeSingle(adapter, config2);
       if (fetchedData !== null && stateKey) {
         const existing = stateUpdates.get(path) || {};
         existing[stateKey] = fetchedData;
@@ -145,6 +146,66 @@ const prefetchPageData = async (data, route = "/", options = {}) => {
   );
   return stateUpdates;
 };
+const fetchSSRTranslations = async (data) => {
+  const config = data.config || data.settings || {};
+  const polyglot = config.polyglot;
+  if (!polyglot?.fetch) return null;
+  const dbConfig = config.fetch || config.db || data.db;
+  if (!dbConfig) return null;
+  const adapter = await createSSRAdapter(dbConfig);
+  if (!adapter) return null;
+  const fetchConfig = polyglot.fetch;
+  const rpcName = fetchConfig.rpc || fetchConfig.from || "get_translations_if_changed";
+  const languages = polyglot.languages || [polyglot.defaultLang || "en"];
+  const translations = {};
+  const results = await Promise.allSettled(
+    languages.map(async (lang) => {
+      try {
+        const res = await adapter.rpc({
+          from: rpcName,
+          params: { p_lang: lang, p_cached_version: 0 }
+        });
+        if (res.error || !res.data) return;
+        const result = res.data;
+        if (result.translations) {
+          translations[lang] = result.translations;
+        }
+      } catch {
+      }
+    })
+  );
+  return Object.keys(translations).length ? translations : null;
+};
+const preEvaluateChildren = (def, inheritedState) => {
+  if (!def || typeof def !== "object") return;
+  for (const key in def) {
+    if (key === "state" || key === "fetch" || key === "props" || key === "attr" || key === "on" || key === "define" || key === "childExtends" || key === "childProps" || key === "childrenAs") continue;
+    if (key.charAt(0) >= "A" && key.charAt(0) <= "Z" && isObject(def[key])) {
+      const child = def[key];
+      const effectiveState = child.state && typeof child.state === "object" ? { ...inheritedState, ...child.state } : inheritedState;
+      if (isFunction(child.children)) {
+        try {
+          const mockEl = {
+            state: effectiveState,
+            props: {},
+            call: (fn) => {
+              if (fn === "getActiveLang" || fn === "getLang") return effectiveState?.lang || "ka";
+              if (fn === "polyglot") return arguments[1] || "";
+              return void 0;
+            },
+            __ref: {}
+          };
+          const result = child.children(mockEl, effectiveState);
+          if (isArray(result) && result.length > 0) {
+            child.children = result;
+          }
+        } catch {
+        }
+      }
+      preEvaluateChildren(child, effectiveState);
+    }
+  }
+};
 const injectPrefetchedState = (pageDef, stateUpdates) => {
   if (!stateUpdates || !stateUpdates.size) return;
   for (const [path, data] of stateUpdates) {
@@ -161,10 +222,12 @@ const injectPrefetchedState = (pageDef, stateUpdates) => {
         target.state = {};
       }
       Object.assign(target.state, data);
+      preEvaluateChildren(target, target.state);
     }
   }
 };
 export {
+  fetchSSRTranslations,
   injectPrefetchedState,
   prefetchPageData
 };

package/dist/esm/render.js

@@ -1,13 +1,14 @@
 import { resolve, join } from "path";
-import { existsSync, writeFileSync, unlinkSync, readFileSync } from "fs";
+import { existsSync, writeFileSync, unlinkSync, readFileSync, realpathSync } from "fs";
 import { tmpdir } from "os";
 import { randomBytes } from "crypto";
 import { createEnv } from "./env.js";
 import { resetKeys, assignKeys, mapKeysToElements } from "./keys.js";
 import { extractMetadata, generateHeadHtml } from "./metadata.js";
 import { hydrate } from "./hydrate.js";
-import { prefetchPageData, injectPrefetchedState } from "./prefetch.js";
+import { prefetchPageData, injectPrefetchedState, fetchSSRTranslations } from "./prefetch.js";
 import { parseHTML } from "linkedom";
+import createEmotionInstance from "@emotion/css/create-instance";
 const structuredCloneDeep = (obj, seen = /* @__PURE__ */ new WeakMap()) => {
   if (obj === null || typeof obj !== "object") return obj;
   if (seen.has(obj)) return seen.get(obj);
@@ -39,7 +40,7 @@ const safeJsonReplacer = () => {
 let _cachedCreateDomql = null;
 const bundleCreateDomql = async () => {
   if (_cachedCreateDomql) return _cachedCreateDomql;
-  const brenderDir = new URL(".", import.meta.url).pathname;
+  const brenderDir = realpathSync(new URL(".", import.meta.url).pathname);
   const monorepoRoot = resolve(brenderDir, "../..");
   const entry = resolve(monorepoRoot, "packages", "smbls", "src", "createDomql.js");
   const esbuild = await import("esbuild");
@@ -309,10 +310,18 @@ const render = async (data, options = {}) => {
         injectPrefetchedState(pageDef, stateUpdates);
         prefetchedPages[route] = pageDef;
       }
-    } catch {
+    } catch (prefetchErr) {
+      console.error("[brender] Prefetch error:", prefetchErr);
       prefetchedPages = data.pages;
     }
   }
+  let ssrTranslations;
+  if (prefetch) {
+    try {
+      ssrTranslations = await fetchSSRTranslations(data);
+    } catch {
+    }
+  }
   const { window, document } = createEnv();
   const body = document.body;
   window.location.pathname = route;
@@ -322,9 +331,35 @@ const render = async (data, options = {}) => {
   globalThis.location = window.location;
   const { createDomqlElement } = await bundleCreateDomql();
   const app = structuredCloneDeep(data.app || {});
+  const config = data.config || data.settings || {};
+  const polyglotConfig = config.polyglot ? { ...config.polyglot } : void 0;
+  if (ssrTranslations && polyglotConfig) {
+    polyglotConfig.translations = {
+      ...polyglotConfig.translations || {},
+      ...ssrTranslations
+    };
+  }
+  const baseState = structuredCloneDeep(data.state || {});
+  if (ssrTranslations || polyglotConfig) {
+    if (!baseState.root) baseState.root = {};
+    if (polyglotConfig) {
+      baseState.root.lang = baseState.root.lang || polyglotConfig.defaultLang || "en";
+    }
+    if (ssrTranslations) {
+      baseState.root.translations = {
+        ...baseState.root.translations || {},
+        ...ssrTranslations
+      };
+    }
+  }
+  const ssrEmotion = createEmotionInstance({
+    key: "smbls",
+    container: document.head,
+    speedy: false
+  });
   const ctx = {
-    state: structuredCloneDeep(data.state || {}),
-    ...stateOverrides ? { state: { ...structuredCloneDeep(data.state || {}), ...stateOverrides } } : {},
+    state: baseState,
+    ...stateOverrides ? { state: { ...baseState, ...stateOverrides } } : {},
     dependencies: structuredCloneDeep(data.dependencies || {}),
     components: structuredCloneDeep(data.components || {}),
     snippets: structuredCloneDeep(data.snippets || {}),
@@ -333,17 +368,25 @@ const render = async (data, options = {}) => {
     methods: data.methods || {},
     designSystem: structuredCloneDeep(data.designSystem || {}),
     files: data.files || {},
-    ...data.config || data.settings || {},
+    ...config,
+    // Override polyglot with SSR-enriched version
+    ...polyglotConfig ? { polyglot: polyglotConfig } : {},
     // Virtual DOM environment
     document,
     window,
     parent: { node: body },
+    // Use SSR emotion instance (non-speedy) for proper @media rule extraction
+    initOptions: { emotion: ssrEmotion },
+    // Disable sourcemap tracking in SSR — it causes stack overflows
+    // when state contains large data arrays (articles, events, etc.)
+    domqlOptions: { sourcemap: false },
     // Caller overrides
     ...contextOverrides || {}
   };
   resetKeys();
   const element = await createDomqlElement(app, ctx);
-  await new Promise((r) => setTimeout(r, 50));
+  const flushDelay = prefetch ? 2e3 : 50;
+  await new Promise((r) => setTimeout(r, flushDelay));
   assignKeys(body);
   const registry = mapKeysToElements(element);
   const metadata = extractMetadata(data, route);
@@ -383,12 +426,20 @@ const render = async (data, options = {}) => {
       }
     }
   }
-  const html = fixSvgContent(body.innerHTML);
+  let html = fixSvgContent(body.innerHTML);
+  if (ssrTranslations) {
+    const defaultLang = polyglotConfig?.defaultLang || "en";
+    const langMap = ssrTranslations[defaultLang] || Object.values(ssrTranslations)[0] || {};
+    html = html.replace(/\{\{\s*([^|{}]+?)\s*\|\s*polyglot\s*\}\}/g, (match, key) => {
+      const trimmed = key.trim();
+      return langMap[trimmed] ?? match;
+    });
+  }
   if (_prevDoc !== void 0) globalThis.document = _prevDoc;
   else delete globalThis.document;
   if (_prevLoc !== void 0) globalThis.location = _prevLoc;
   else delete globalThis.location;
-  return { html, metadata, registry, element, emotionCSS, document, window };
+  return { html, metadata, registry, element, emotionCSS, document, window, ssrTranslations };
 };
 const renderElement = async (elementDef, options = {}) => {
   const { context = {} } = options;
@@ -656,10 +707,25 @@ 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;
+  let resolvedHeadTags = headTags;
+  if (polyglotCfg) {
+    const defaultLang = polyglotCfg.defaultLang || "en";
+    const translations = {
+      ...polyglotCfg.translations || {},
+      ...result.ssrTranslations || {}
+    };
+    const langMap = translations[defaultLang] || {};
+    resolvedHeadTags = headTags.replace(/\{\{\s*([^|{}]+?)\s*\|\s*polyglot\s*\}\}/g, (match, key) => {
+      const trimmed = key.trim();
+      return langMap[trimmed] ?? match;
+    });
+  }
   const html = `<!DOCTYPE html>
 <html lang="${htmlLang}">
 <head>
-${headTags}
+${resolvedHeadTags}
 ${fontLinks}
 ${globalCSS.fontFaceCSS ? `<style>${globalCSS.fontFaceCSS}</style>` : ""}
 <style>

package/load.js

@@ -86,18 +86,20 @@ export const loadProject = async (projectPath) => {
     bundleAndImport(join(symbolsDir, 'files', 'index.js'))
   ])
 
+  // Spread into plain objects — ESM module namespaces are non-extensible,
+  // which breaks downstream code that adds properties (e.g. polyglot functions).
   return {
-    app: appModule?.default || {},
-    state: stateModule?.default || {},
-    dependencies: depsModule?.default || {},
-    components: componentsModule || {},
-    snippets: snippetsModule || {},
-    pages: pagesModule?.default || {},
-    functions: functionsModule || {},
-    methods: methodsModule || {},
-    designSystem: designSystemModule?.default || {},
-    files: filesModule?.default || {},
-    config: configModule?.default || {}
+    app: { ...(appModule?.default || {}) },
+    state: { ...(stateModule?.default || {}) },
+    dependencies: { ...(depsModule?.default || {}) },
+    components: { ...(componentsModule || {}) },
+    snippets: { ...(snippetsModule || {}) },
+    pages: { ...(pagesModule?.default || {}) },
+    functions: { ...(functionsModule || {}) },
+    methods: { ...(methodsModule || {}) },
+    designSystem: { ...(designSystemModule?.default || {}) },
+    files: { ...(filesModule?.default || {}) },
+    config: { ...(configModule?.default || {}) }
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbo.ls/brender",
-  "version": "3.7.0",
+  "version": "3.7.4",
   "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.0",
+    "@symbo.ls/helmet": "^3.7.4",
     "linkedom": "^0.16.8"
   },
   "devDependencies": {

package/prefetch.js

@@ -198,7 +198,8 @@ export const prefetchPageData = async (data, route = '/', options = {}) => {
   const pageDef = pages[route]
   if (!pageDef) return new Map()
 
-  const dbConfig = data.config?.db || data.settings?.db || data.db
+  const config = data.config || data.settings || {}
+  const dbConfig = config.fetch || config.db || data.db
   if (!dbConfig) return new Map()
 
   const adapter = await createSSRAdapter(dbConfig)
@@ -231,6 +232,99 @@ export const prefetchPageData = async (data, route = '/', options = {}) => {
  * @param {object} pageDef - Page definition (will be mutated)
  * @param {Map<string, object>} stateUpdates - Map from prefetchPageData
  */
+/**
+ * Fetch polyglot translations from the DB for SSR use.
+ * Returns a map of { [lang]: { key: text, ... } } for all configured languages.
+ *
+ * @param {object} data - Full project data (from loadProject)
+ * @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
+  if (!polyglot?.fetch) return null
+
+  const dbConfig = config.fetch || config.db || data.db
+  if (!dbConfig) return null
+
+  const adapter = await createSSRAdapter(dbConfig)
+  if (!adapter) return null
+
+  const fetchConfig = polyglot.fetch
+  const rpcName = fetchConfig.rpc || fetchConfig.from || 'get_translations_if_changed'
+  const languages = polyglot.languages || [polyglot.defaultLang || 'en']
+
+  const translations = {}
+
+  // Fetch translations for all languages in parallel
+  const results = await Promise.allSettled(
+    languages.map(async (lang) => {
+      try {
+        const res = await adapter.rpc({
+          from: rpcName,
+          params: { p_lang: lang, p_cached_version: 0 }
+        })
+        if (res.error || !res.data) return
+        const result = res.data
+        if (result.translations) {
+          translations[lang] = result.translations
+        }
+      } catch {}
+    })
+  )
+
+  return Object.keys(translations).length ? translations : null
+}
+
+/**
+ * Pre-evaluate children functions and replace them with static results.
+ * During SSR, DOMQL's runtime state cascading and async re-render cycle
+ * may not work correctly (trackSourcemapDeep stack overflows, etc.).
+ * By pre-evaluating the children functions, we produce static element
+ * definitions that DOMQL can render directly.
+ */
+const preEvaluateChildren = (def, inheritedState) => {
+  if (!def || typeof def !== 'object') return
+  for (const key in def) {
+    if (key === 'state' || key === 'fetch' || key === 'props' ||
+        key === 'attr' || key === 'on' || key === 'define' ||
+        key === 'childExtends' || key === 'childProps' || key === 'childrenAs') continue
+    if (key.charAt(0) >= 'A' && key.charAt(0) <= 'Z' && isObject(def[key])) {
+      const child = def[key]
+      // Determine effective state for this element (own state or inherited)
+      const effectiveState = child.state && typeof child.state === 'object'
+        ? { ...inheritedState, ...child.state }
+        : inheritedState
+
+      // Pre-evaluate children function
+      if (isFunction(child.children)) {
+        try {
+          const mockEl = {
+            state: effectiveState,
+            props: {},
+            call: (fn) => {
+              if (fn === 'getActiveLang' || fn === 'getLang') return effectiveState?.lang || 'ka'
+              if (fn === 'polyglot') return arguments[1] || ''
+              return undefined
+            },
+            __ref: {}
+          }
+          const result = child.children(mockEl, effectiveState)
+          if (isArray(result) && result.length > 0) {
+            // Replace children function with static array
+            child.children = result
+          }
+        } catch {
+          // If evaluation fails, leave the function as-is
+        }
+      }
+
+      // Recurse deeper
+      preEvaluateChildren(child, effectiveState)
+    }
+  }
+}
+
 export const injectPrefetchedState = (pageDef, stateUpdates) => {
   if (!stateUpdates || !stateUpdates.size) return
 
@@ -251,6 +345,10 @@ export const injectPrefetchedState = (pageDef, stateUpdates) => {
         target.state = {}
       }
       Object.assign(target.state, data)
+
+      // Pre-evaluate children functions with the injected state
+      // so DOMQL gets static element definitions instead of functions
+      preEvaluateChildren(target, target.state)
     }
   }
 }

package/render.js

@@ -1,13 +1,14 @@
 import { resolve, join } from 'path'
-import { existsSync, writeFileSync, unlinkSync, readFileSync } from 'fs'
+import { existsSync, writeFileSync, unlinkSync, readFileSync, realpathSync } from 'fs'
 import { tmpdir } from 'os'
 import { randomBytes } from 'crypto'
 import { createEnv } from './env.js'
 import { resetKeys, assignKeys, mapKeysToElements } from './keys.js'
 import { extractMetadata, generateHeadHtml } from './metadata.js'
 import { hydrate } from './hydrate.js'
-import { prefetchPageData, injectPrefetchedState } from './prefetch.js'
+import { prefetchPageData, injectPrefetchedState, fetchSSRTranslations } from './prefetch.js'
 import { parseHTML } from 'linkedom'
+import createEmotionInstance from '@emotion/css/create-instance'
 
 // Deep clone that preserves functions and avoids circular refs
 const structuredCloneDeep = (obj, seen = new WeakMap()) => {
@@ -50,7 +51,7 @@ let _cachedCreateDomql = null
 const bundleCreateDomql = async () => {
   if (_cachedCreateDomql) return _cachedCreateDomql
 
-  const brenderDir = new URL('.', import.meta.url).pathname
+  const brenderDir = realpathSync(new URL('.', import.meta.url).pathname)
   const monorepoRoot = resolve(brenderDir, '../..')
   const entry = resolve(monorepoRoot, 'packages', 'smbls', 'src', 'createDomql.js')
 
@@ -339,11 +340,21 @@ export const render = async (data, options = {}) => {
         injectPrefetchedState(pageDef, stateUpdates)
         prefetchedPages[route] = pageDef
       }
-    } catch {
+    } catch (prefetchErr) {
+      console.error('[brender] Prefetch error:', prefetchErr)
       prefetchedPages = data.pages
     }
   }
 
+  // ── SSR polyglot translations ──
+  // Fetch translations from the DB so polyglot resolves during render
+  let ssrTranslations
+  if (prefetch) {
+    try {
+      ssrTranslations = await fetchSSRTranslations(data)
+    } catch {}
+  }
+
   const { window, document } = createEnv()
   const body = document.body
 
@@ -364,9 +375,45 @@ export const render = async (data, options = {}) => {
 
   const app = structuredCloneDeep(data.app || {})
 
+  const config = data.config || data.settings || {}
+
+  // Inject SSR translations into polyglot config and root state
+  const polyglotConfig = config.polyglot ? { ...config.polyglot } : undefined
+  if (ssrTranslations && polyglotConfig) {
+    polyglotConfig.translations = {
+      ...(polyglotConfig.translations || {}),
+      ...ssrTranslations
+    }
+  }
+
+  const baseState = structuredCloneDeep(data.state || {})
+  // Ensure root state has lang and translations for polyglot resolution
+  if (ssrTranslations || polyglotConfig) {
+    if (!baseState.root) baseState.root = {}
+    if (polyglotConfig) {
+      baseState.root.lang = baseState.root.lang || polyglotConfig.defaultLang || 'en'
+    }
+    if (ssrTranslations) {
+      baseState.root.translations = {
+        ...(baseState.root.translations || {}),
+        ...ssrTranslations
+      }
+    }
+  }
+
+  // Create SSR emotion instance with speedy: false.
+  // In linkedom, emotion's insertRule() doesn't handle @media rules properly,
+  // so responsive CSS is lost. Non-speedy mode uses text nodes instead,
+  // which preserves @media rules in cache.inserted as strings.
+  const ssrEmotion = createEmotionInstance({
+    key: 'smbls',
+    container: document.head,
+    speedy: false
+  })
+
   const ctx = {
-    state: structuredCloneDeep(data.state || {}),
-    ...(stateOverrides ? { state: { ...structuredCloneDeep(data.state || {}), ...stateOverrides } } : {}),
+    state: baseState,
+    ...(stateOverrides ? { state: { ...baseState, ...stateOverrides } } : {}),
     dependencies: structuredCloneDeep(data.dependencies || {}),
     components: structuredCloneDeep(data.components || {}),
     snippets: structuredCloneDeep(data.snippets || {}),
@@ -375,11 +422,18 @@ export const render = async (data, options = {}) => {
     methods: data.methods || {},
     designSystem: structuredCloneDeep(data.designSystem || {}),
     files: data.files || {},
-    ...(data.config || data.settings || {}),
+    ...config,
+    // Override polyglot with SSR-enriched version
+    ...(polyglotConfig ? { polyglot: polyglotConfig } : {}),
     // Virtual DOM environment
     document,
     window,
     parent: { node: body },
+    // Use SSR emotion instance (non-speedy) for proper @media rule extraction
+    initOptions: { emotion: ssrEmotion },
+    // Disable sourcemap tracking in SSR — it causes stack overflows
+    // when state contains large data arrays (articles, events, etc.)
+    domqlOptions: { sourcemap: false },
     // Caller overrides
     ...(contextOverrides || {})
   }
@@ -388,8 +442,12 @@ export const render = async (data, options = {}) => {
 
   const element = await createDomqlElement(app, ctx)
 
-  // Allow async microtasks (fetch callbacks, state updates) to flush
-  await new Promise(r => setTimeout(r, 50))
+  // Allow async operations (fetch callbacks, state updates, re-renders) to flush.
+  // DOMQL's fetch plugin fires on element creation and updates state asynchronously.
+  // With prefetch enabled, data is pre-injected but DOMQL's fetch may also fire
+  // and trigger state updates. Give enough time for these to complete.
+  const flushDelay = prefetch ? 2000 : 50
+  await new Promise(r => setTimeout(r, flushDelay))
 
   // Assign data-br keys for hydration
   assignKeys(body)
@@ -444,7 +502,18 @@ export const render = async (data, options = {}) => {
     }
   }
 
-  const html = fixSvgContent(body.innerHTML)
+  let html = fixSvgContent(body.innerHTML)
+
+  // Post-process: resolve any remaining {{ key | polyglot }} templates
+  // that weren't resolved during DOMQL rendering (e.g. due to timing)
+  if (ssrTranslations) {
+    const defaultLang = polyglotConfig?.defaultLang || 'en'
+    const langMap = ssrTranslations[defaultLang] || Object.values(ssrTranslations)[0] || {}
+    html = html.replace(/\{\{\s*([^|{}]+?)\s*\|\s*polyglot\s*\}\}/g, (match, key) => {
+      const trimmed = key.trim()
+      return langMap[trimmed] ?? match
+    })
+  }
 
   // Restore globalThis after render
   if (_prevDoc !== undefined) globalThis.document = _prevDoc
@@ -452,7 +521,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 }
+  return { html, metadata, registry, element, emotionCSS, document, window, ssrTranslations }
 }
 
 /**
@@ -846,10 +915,28 @@ export const renderPage = async (data, route = '/', options = {}) => {
 <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
+  let resolvedHeadTags = headTags
+  if (polyglotCfg) {
+    const defaultLang = polyglotCfg.defaultLang || 'en'
+    // Use SSR-fetched translations (from render result) merged with static translations
+    const translations = {
+      ...(polyglotCfg.translations || {}),
+      ...(result.ssrTranslations || {})
+    }
+    const langMap = translations[defaultLang] || {}
+    resolvedHeadTags = headTags.replace(/\{\{\s*([^|{}]+?)\s*\|\s*polyglot\s*\}\}/g, (match, key) => {
+      const trimmed = key.trim()
+      return langMap[trimmed] ?? match
+    })
+  }
+
   const html = `<!DOCTYPE html>
 <html lang="${htmlLang}">
 <head>
-${headTags}
+${resolvedHeadTags}
 ${fontLinks}
 ${globalCSS.fontFaceCSS ? `<style>${globalCSS.fontFaceCSS}</style>` : ''}
 <style>