@symbo.ls/brender 3.7.3 → 3.7.5

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/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
 });
@@ -98,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),
@@ -159,7 +159,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 || data.fetch || config.db || data.db;
   if (!dbConfig) return /* @__PURE__ */ new Map();
   const adapter = await createSSRAdapter(dbConfig);
   if (!adapter) return /* @__PURE__ */ new Map();
@@ -167,17 +168,81 @@ 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);
-      if (fetchedData !== null && stateKey) {
+    declarations.map(async ({ config: config2, stateKey, path }) => {
+      const fetchedData = await executeSingle(adapter, config2);
+      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);
       }
     })
   );
   return stateUpdates;
 };
+const fetchSSRTranslations = async (data) => {
+  const config = data.config || {};
+  const polyglot = config.polyglot || data.polyglot;
+  if (!polyglot?.fetch) return null;
+  const dbConfig = config.fetch || data.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 +259,7 @@ const injectPrefetchedState = (pageDef, stateUpdates) => {
         target.state = {};
       }
       Object.assign(target.state, data);
+      preEvaluateChildren(target, target.state);
     }
   }
 };

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);
@@ -44,7 +46,53 @@ 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 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);
@@ -76,7 +124,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");
@@ -320,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 {
@@ -346,44 +403,102 @@ 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 {
+    }
+  }
+  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 || {} };
+  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 = {
+      ...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 || {}),
     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 || {},
-    ...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);
+  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) {
@@ -420,12 +535,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, prefetchedPages };
 };
 const renderElement = async (elementDef, options = {}) => {
   const { context = {} } = options;
@@ -609,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);
@@ -674,7 +816,11 @@ 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) {
+      isrBody = `<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) => {
@@ -692,11 +838,28 @@ const renderPage = async (data, route = "/", options = {}) => {
 }
 <\/script>
 <script type="module" src="${prefix}${isr.clientScript}"><\/script>`;
+    }
+  }
+  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";
+    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/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/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) => {