Preserve global typography and metadata in MJML exports

packages/email-renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/email-renderer",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "type": "module",
   "description": "WRNexus block email renderers with HTML, text, AMP Email, and MJML interoperability.",
   "exports": {

packages/email-renderer/src/blocks.ts

@@ -34,6 +34,10 @@ const html = (value: unknown) =>
 const attrs = (node: BlockNode) => node.props as Record<string, unknown>;
 const isEmailRootChild = (node: BlockNode, context: unknown) =>
   (context as { rootBlockIds?: string[] } | undefined)?.rootBlockIds?.includes(node.id) ?? false;
+const mjmlDocumentHead = (node: BlockNode, context: unknown) => {
+  const meta = context as { emailSubject?: string; emailPreheader?: string } | undefined;
+  return `<mj-head><mj-title>${html(meta?.emailSubject)}</mj-title>${meta?.emailPreheader ? `<mj-preview>${html(meta.emailPreheader)}</mj-preview>` : ""}<mj-attributes><mj-all font-family="${html(attrs(node).fontFamily ?? "Arial, sans-serif")}" /><mj-text color="${html(attrs(node).textColor ?? "#111827")}" /></mj-attributes></mj-head>`;
+};
 export const ampLayoutClass = (node: BlockNode) =>
   "wrn-layout-" + Array.from(node.id, char => char.codePointAt(0)!.toString(16)).join("-");
 
@@ -158,8 +162,8 @@ export const emailDocumentBlock = defineBlock({
       `<table data-block-id="${html(node.id)}" role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;background:${html(attrs(node).background ?? "#f3f4f6")};color:${html(attrs(node).textColor ?? "#111827")};font-family:${html(attrs(node).fontFamily ?? "Arial, sans-serif")};"><tr><td align="center">${attrs(node).logoUrl ? `<img src="${html(attrs(node).logoUrl)}" alt="${html(attrs(node).logoAlt)}" style="display:block;height:auto;max-width:200px;padding:20px;" />` : ""}<table role="presentation" class="wrn-email" width="${html(attrs(node).width)}" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;max-width:100%;width:${html(attrs(node).width)}px;background:${html(attrs(node).contentBackground ?? "#ffffff")};color:${html(attrs(node).textColor ?? "#111827")};font-family:${html(attrs(node).fontFamily ?? "Arial, sans-serif")};">${slots.content}</table></td></tr></table>`,
     ampEmail: ({ node, slots }) =>
       `<table role="presentation" width="100%" class="email-bg"><tr><td align="center">${attrs(node).logoUrl ? `<amp-img class="marketing-image" src="${html(attrs(node).logoUrl)}" alt="${html(attrs(node).logoAlt)}" width="200" height="64" layout="fixed"></amp-img>` : ""}<table role="presentation" width="${html(attrs(node).width)}" class="email-body">${slots.content}</table></td></tr></table>`,
-    mjml: ({ node, slots }) =>
+    mjml: ({ node, slots, context }) =>
-      `<mjml><mj-body width="${html(attrs(node).width ?? "600")}px" background-color="${html(attrs(node).background ?? "#f3f4f6")}">${attrs(node).logoUrl ? `<mj-section padding="20px"><mj-column><mj-image src="${html(attrs(node).logoUrl)}" alt="${html(attrs(node).logoAlt)}" width="200px" padding="0" /></mj-column></mj-section>` : ""}${slots.content}</mj-body></mjml>`,
+      `<mjml>${mjmlDocumentHead(node, context)}<mj-body width="${html(attrs(node).width ?? "600")}px" background-color="${html(attrs(node).background ?? "#f3f4f6")}">${attrs(node).logoUrl ? `<mj-section padding="20px"><mj-column><mj-image src="${html(attrs(node).logoUrl)}" alt="${html(attrs(node).logoAlt)}" width="200px" padding="0" /></mj-column></mj-section>` : ""}${slots.content}</mj-body></mjml>`,
   },
   textRenderer: ({ slots }) => slots.content,
 } satisfies BlockDefinition);

packages/email-renderer/src/email.ts

@@ -140,6 +140,8 @@ export async function renderEmail(
     direction: options.direction ?? "ltr",
     countdownImageUrl: options.countdownImageUrl,
     brandLinkColor: String(source.root.props.linkColor ?? "#2563eb"),
+    emailSubject: String(source.meta.subject),
+    emailPreheader: String(source.meta.preheader ?? ""),
     rootBlockIds: Object.values(source.root.slots).flat().map(node => node.id),
   };
   const [htmlResult, textResult, mjmlResult] = await Promise.all([

packages/email-renderer/test/mjml-brand.test.ts

@@ -0,0 +1,30 @@
+import { expect, test } from "bun:test";
+import { createRequire } from "node:module";
+import type { BlockDocument } from "@wrnexus/blocks";
+import { renderEmail } from "../src/index.ts";
+
+const compile = createRequire(import.meta.url)("mjml");
+
+test("MJML preserves document metadata and global typography in compiled HTML", async () => {
+  const document: BlockDocument = {
+    schemaVersion: 1, kind: "email", meta: { subject: 'Brand & "News" <today>', preheader: 'Preview <safe> & useful', lang: "en" }, theme: { tokens: {} },
+    root: { id: "root", type: "layout.email-document", version: 1, props: { width: "600", fontFamily: "Georgia, serif", textColor: "#123456" }, styles: {}, slots: {
+      content: [{ id: "text", type: "content.text", version: 1, props: { text: "Brand text" }, styles: {}, slots: {} }, { id: "button", type: "content.button", version: 1, props: { label: "Brand action", href: "https://example.com" }, styles: {}, slots: {} }],
+    } },
+  };
+  const before = structuredClone(document);
+  const result = await renderEmail(document, { mjml: true });
+  expect(result.ok).toBe(true);
+  if (!result.ok) return;
+  const source = result.value.exports!.mjml!;
+  expect(source).toContain('<mj-title>Brand &amp; &quot;News&quot; &lt;today&gt;</mj-title>');
+  expect(source).toContain('<mj-preview>Preview &lt;safe&gt; &amp; useful</mj-preview>');
+  expect(source).toContain('<mj-all font-family="Georgia, serif" />');
+  const compiled = await compile(source, { validationLevel: "strict", minify: false });
+  expect(compiled.errors).toEqual([]);
+  expect(compiled.html).toContain("font-family:Georgia, serif");
+  expect(compiled.html).toContain("color:#123456");
+  expect(compiled.html).toContain("Preview &lt;safe&gt; &amp; useful");
+  expect(compiled.html).not.toContain("<safe>");
+  expect(document).toEqual(before);
+});