diff --git a/packages/email-renderer/package.json b/packages/email-renderer/package.json
index da895d5c..8d3907bd 100644
--- a/packages/email-renderer/package.json
+++ b/packages/email-renderer/package.json
@@ -1,6 +1,6 @@
{
"name": "@wrnexus/email-renderer",
- "version": "0.1.37",
+ "version": "0.1.38",
"type": "module",
"description": "WRNexus block email renderers with HTML, text, AMP Email, and MJML interoperability.",
"exports": {
diff --git a/packages/email-renderer/src/blocks.ts b/packages/email-renderer/src/blocks.ts
index a6385078..21567d1e 100644
--- a/packages/email-renderer/src/blocks.ts
+++ b/packages/email-renderer/src/blocks.ts
@@ -163,7 +163,7 @@ export const emailDocumentBlock = defineBlock({
emailHtml: ({ node, slots }) =>
`
${attrs(node).logoUrl ? ` ` : ""} |
`,
ampEmail: ({ node, slots }) =>
- `| ${attrs(node).logoUrl ? `` : ""} |
`,
+ `| ${attrs(node).logoUrl ? `` : ""} |
`,
mjml: ({ node, slots, context }) =>
`${mjmlDocumentHead(node, context)}${attrs(node).logoUrl ? `` : ""}${slots.content}`,
},
diff --git a/packages/email-renderer/src/email.ts b/packages/email-renderer/src/email.ts
index c52f139b..a08f78a8 100644
--- a/packages/email-renderer/src/email.ts
+++ b/packages/email-renderer/src/email.ts
@@ -83,7 +83,7 @@ const head = (document: BlockDocument, body: string, direction: "ltr" | "rtl") =
const ampHead = (document: BlockDocument, body: string, direction: "ltr" | "rtl") => {
const layoutCss = (node: BlockDocument["root"]): string => ampLayoutCss(node, String(document.root.props.linkColor ?? "#2563eb")) + Object.values(node.slots).flat().map(layoutCss).join("");
const props = document.root.props as Record;
- const css = `@media only screen and (max-width:480px){.email-body .wrn-columns{display:block}.email-body .wrn-column{display:block;width:100%}}.marketing-image img{object-fit:contain}body{margin:0;color:${props.textColor ?? "#111827"};font-family:${props.fontFamily ?? "Arial, sans-serif"}}a{color:${props.linkColor ?? "#2563eb"}}.email-bg{background:${props.background ?? "#f3f4f6"}}.email-body{max-width:${props.width ?? "600"}px;width:100%;background:${props.contentBackground ?? "#ffffff"}}`;
+ const css = `@media only screen and (max-width:480px){.email-body .wrn-columns{display:block}.email-body .wrn-column{display:block;width:100%}}.marketing-image img{object-fit:contain}body{margin:0;color:${props.textColor ?? "#111827"};font-family:${props.fontFamily ?? "Arial, sans-serif"}}a{color:${props.linkColor ?? "#2563eb"}}.brand-logo{max-width:${props.logoWidth ?? "200"}px;width:100%;margin:20px auto}.email-bg{table-layout:fixed;width:100%;background:${props.background ?? "#f3f4f6"}}.email-body{max-width:${props.width ?? "600"}px;width:100%;background:${props.contentBackground ?? "#ffffff"}}`;
return `${body}`;
};
diff --git a/packages/email-renderer/test/email.test.ts b/packages/email-renderer/test/email.test.ts
index c3554fbe..715bf8cc 100644
--- a/packages/email-renderer/test/email.test.ts
+++ b/packages/email-renderer/test/email.test.ts
@@ -124,6 +124,8 @@ describe("email renderer", () => {
expect(await validateMjml(result.value.exports!.mjml!)).toEqual([]);
expect(result.value.parts.html.content).toContain('width="180" height="90"');
expect(result.value.parts.amp?.content).toContain('width="180" height="90"');
+ expect(result.value.parts.amp?.content).toContain('width="180" height="90" layout="responsive"');
+ expect(result.value.parts.amp?.content).toContain('.brand-logo{max-width:180px;width:100%;margin:20px auto}');
expect(result.value.exports?.mjml).toContain('width="180px" height="90px"');
for (const value of ["0", "4001", "180px", "1;display:none"]) {
const invalid = structuredClone(draft);