fix(email-renderer): preserve section ancestry in parsed HTML

packages/email-renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/email-renderer",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "type": "module",
   "description": "WRNexus block email renderers with HTML, text, AMP Email, and MJML interoperability.",
   "exports": {
@@ -21,6 +21,7 @@
     "mjml-parser-xml": "5.4.0"
   },
   "devDependencies": {
+    "parse5": "7.3.0",
     "@types/bun": "^1.4.0",
     "typescript": "^6.0.3"
   }

packages/email-renderer/src/blocks.ts

@@ -129,12 +129,12 @@ export const sectionBlock = defineBlock({
   renderers: {
     emailHtml: ({ node, slots }) =>
       emailCell(
-        `<table role="presentation" width="100%"><tr><td style="background:${html(attrs(node).background)};padding:${html(attrs(node).padding)};">${slots.content}</td></tr></table>`,
+        `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="background:${html(attrs(node).background)};padding:${html(attrs(node).padding)};"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">${slots.content}</table></td></tr></table>`,
         node,
       ),
     ampEmail: ({ node, slots }) =>
       emailCell(
-        `<table role="presentation" width="100%"><tr><td class="section">${slots.content}</td></tr></table>`,
+        `<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>`,
         node,
       ),
     mjml: ({ node, slots }) =>

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

@@ -1,4 +1,5 @@
 import { describe, expect, test } from "bun:test";
+import { parse, type DefaultTreeAdapterMap } from "parse5";
 import {
   emailCoreBlocks,
   renderEmail,
@@ -55,6 +56,21 @@ const document: BlockDocument = {
 };
 
 describe("email renderer", () => {
+  test("browser HTML parsing preserves every block inside its section", async () => {
+    const rendered = await renderEmail(document);
+    expect(rendered.ok).toBe(true);
+    if (!rendered.ok) return;
+    const tree = parse(rendered.value.parts.html.content);
+    const ancestry = new Map<string, string[]>();
+    const walk = (node: DefaultTreeAdapterMap["node"], parents: string[]) => {
+      const id = "attrs" in node ? node.attrs.find(attr => attr.name === "data-block-id")?.value : undefined;
+      if (id) ancestry.set(id, parents);
+      if ("childNodes" in node) for (const child of node.childNodes) walk(child, id ? [...parents, id] : parents);
+    };
+    walk(tree, []);
+    expect(ancestry.get("heading")).toEqual(["root", "section"]);
+    expect(ancestry.get("button")).toEqual(["root", "section"]);
+  });
   test("renders deterministic HTML, text, AMP, and MJML", async () => {
     const first = await renderEmail(document, { amp: true, mjml: true });
     const second = await renderEmail(document, { amp: true, mjml: true });