fix(email-renderer): preserve AMP section and spacer layout

packages/email-renderer/src/blocks.ts

@@ -32,6 +32,22 @@ const html = (value: unknown) =>
     .replaceAll('"', """)
     .replaceAll("'", "'");
 const attrs = (node: BlockNode) => node.props as Record<string, unknown>;
+export const ampLayoutClass = (node: BlockNode) =>
+  "wrn-layout-" + Array.from(node.id, char => char.codePointAt(0)!.toString(16)).join("-");
+
+export function ampLayoutCss(node: BlockNode): string {
+  const props = attrs(node);
+  if (node.type === "layout.section") {
+    const background = safeCssValue(props.background, /^(#[0-9a-f]{3,8}|rgba?\([0-9., %]+\))$/i) || "#ffffff";
+    const padding = safeCssValue(props.padding, /^\d+(?:\.\d+)?(?:px|rem|em|%)?(?:\s+\d+(?:\.\d+)?(?:px|rem|em|%)?){0,3}$/) || "24px";
+    return `.${ampLayoutClass(node)}{background:${background};padding:${padding}}`;
+  }
+  if (node.type === "content.spacer") {
+    const height = safeCssValue(props.height, /^\d{1,4}$/) || "24";
+    return `.${ampLayoutClass(node)}{height:${height}px;line-height:${height}px;font-size:1px}`;
+  }
+  return "";
+}
 const multilineText = (value: unknown) => html(value).replace(/\r\n?|\n/g, "<br />");
 const imageDimension = (fallback: string): ValueSchema<string> => ({
   kind: "string",
@@ -155,7 +171,7 @@ export const sectionBlock = defineBlock({
       ),
     ampEmail: ({ node, slots }) =>
       emailCell(
-        `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="section"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">${slots.content}</table></td></tr></table>`,
+        `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="${ampLayoutClass(node)}"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">${slots.content}</table></td></tr></table>`,
         node,
       ),
     mjml: ({ node, slots }) => {
@@ -382,7 +398,7 @@ export const spacerBlock = leaf(
         `<div style="font-size:1px;height:${html(attrs(node).height)}px;line-height:${html(attrs(node).height)}px;">&nbsp;</div>`,
         node,
       ),
-    ampEmail: ({ node }) => emailCell(`<div class="spacer">&nbsp;</div>`, node),
+    ampEmail: ({ node }) => emailCell(`<div class="${ampLayoutClass(node)}">&nbsp;</div>`, node),
     mjml: ({ node }) => `<mj-spacer height="${html(attrs(node).height)}px" />`,
   },
   () => "\n",

packages/email-renderer/src/email.ts

@@ -12,7 +12,7 @@ import {
   type Diagnostic,
   type Result,
 } from "@wrnexus/blocks";
-import { emailCoreBlocks } from "./blocks.ts";
+import { emailCoreBlocks, ampLayoutCss } from "./blocks.ts";
 
 interface AmpValidationError {
   severity: string;
@@ -80,9 +80,10 @@ const head = (document: BlockDocument, body: string, direction: "ltr" | "rtl") =
   return `<!doctype html><html lang="${escapeHtml(document.meta.lang)}" dir="${direction}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="x-apple-disable-message-reformatting"><meta name="color-scheme" content="light dark"><title>${escapeHtml(document.meta.subject)}</title><style>a{color:${linkColor}}@media only screen and (max-width:480px){.wrn-email{width:100%!important}.wrn-columns{display:block!important}.wrn-column{display:block!important;width:100%!important}}</style></head><body style="margin:0;padding:0;color:${textColor};font-family:${fontFamily};">${document.meta.preheader ? `<div style="display:none;max-height:0;overflow:hidden;opacity:0;">${escapeHtml(document.meta.preheader)}</div>` : ""}${body}</body></html>`;
 };
 const ampHead = (document: BlockDocument, body: string, direction: "ltr" | "rtl") => {
+  const layoutCss = (node: BlockDocument["root"]): string => ampLayoutCss(node) + Object.values(node.slots).flat().map(layoutCss).join("");
   const props = document.root.props as Record<string, unknown>;
   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"}}`;
-  return `<!doctype html><html amp4email data-css-strict lang="${escapeHtml(document.meta.lang)}" dir="${direction}"><head><meta charset="utf-8"><script async src="https://cdn.ampproject.org/v0.js"></script><style amp4email-boilerplate>body{visibility:hidden}</style><style amp-custom>${css}.section{padding:24px}.button{background:#2563eb;border-radius:6px;color:#fff;display:inline-block;font-weight:700;padding:12px 20px;text-decoration:none}.spacer{height:24px}</style></head><body>${body}</body></html>`;
+  return `<!doctype html><html amp4email data-css-strict lang="${escapeHtml(document.meta.lang)}" dir="${direction}"><head><meta charset="utf-8"><script async src="https://cdn.ampproject.org/v0.js"></script><style amp4email-boilerplate>body{visibility:hidden}</style><style amp-custom>${css}${layoutCss(document.root)}.button{background:#2563eb;border-radius:6px;color:#fff;display:inline-block;font-weight:700;padding:12px 20px;text-decoration:none}</style></head><body>${body}</body></html>`;
 };
 
 export async function validateAmpEmail(content: string): Promise<ValidationReport> {