@marlinjai/email-editor-core 0.3.0 → 0.4.0

package/dist/index.js

@@ -35,8 +35,11 @@ __export(index_exports, {
   ColumnModel: () => ColumnModel,
   ColumnSchema: () => ColumnSchema,
   CustomFontSchema: () => CustomFontSchema,
+  DEFAULT_MJML_ATTRIBUTES: () => DEFAULT_MJML_ATTRIBUTES,
   DEFAULT_ON_CHANGE_DEBOUNCE_MS: () => DEFAULT_ON_CHANGE_DEBOUNCE_MS,
   DividerBlockSchema: () => DividerBlockSchema,
+  EDITOR_DATA_ATTRIBUTE: () => EDITOR_DATA_ATTRIBUTE,
+  EDITOR_MARKER: () => EDITOR_MARKER,
   EditorUIStore: () => EditorUIStore,
   EmailTemplateSchema: () => EmailTemplateSchema,
   EmailTemplateSchemaV1_0: () => EmailTemplateSchemaV1_0,
@@ -51,6 +54,7 @@ __export(index_exports, {
   ImageBlockSchema: () => ImageBlockSchema,
   LEAF_BLOCK_TYPES: () => LEAF_BLOCK_TYPES,
   MJML_WRAPPER_DEFAULT_PADDING: () => MJML_WRAPPER_DEFAULT_PADDING,
+  MjmlBuilder: () => MjmlBuilder,
   MjmlHeadSchema: () => MjmlHeadSchema,
   NavbarBlockSchema: () => NavbarBlockSchema,
   NavbarLinkModel: () => NavbarLinkModel,
@@ -78,7 +82,9 @@ __export(index_exports, {
   TopLevelItemSchema: () => TopLevelItemSchema,
   WrapperModel: () => WrapperModel,
   WrapperSchema: () => WrapperSchema,
+  addPx: () => addPx,
   allSections: () => allSections,
+  base64Utf8: () => base64Utf8,
   buildGradientCSS: () => buildGradientCSS,
   cloneSectionSnapshot: () => cloneSectionSnapshot,
   createBlockRegistry: () => createBlockRegistry,
@@ -93,12 +99,17 @@ __export(index_exports, {
   createTemplate: () => createTemplate,
   createTemplateWithDefaultSection: () => createTemplateWithDefaultSection,
   createWrapper: () => createWrapper,
+  encodeEditorData: () => encodeEditorData,
   isLeafBlockType: () => isLeafBlockType,
   isTemplateMigrationError: () => isTemplateMigrationError,
   isWrapper: () => isWrapper,
   isWrapperInstance: () => isWrapperInstance,
   migrateTemplate: () => migrateTemplate,
   migrateV1_0ToV1_1: () => migrateV1_0ToV1_1,
+  mjmlOptions: () => mjmlOptions,
+  paddingWithGap: () => paddingWithGap,
+  stripEditorMarkup: () => stripEditorMarkup,
+  textInlineStyles: () => textInlineStyles,
   validateTemplate: () => validateTemplate,
   withTemplateId: () => withTemplateId
 });
@@ -2605,8 +2616,7 @@ var EditorUIStore = import_mobx_state_tree7.types.model("EditorUI", {
   previewDevice: import_mobx_state_tree7.types.optional(
     import_mobx_state_tree7.types.enumeration(["desktop", "mobile"]),
     "desktop"
-  ),
-  zoomLevel: import_mobx_state_tree7.types.optional(import_mobx_state_tree7.types.number, 1)
+  )
 }).volatile(() => ({
   // === Transient State (not persisted) ===
   hoverBlockId: void 0,
@@ -2863,30 +2873,6 @@ var EditorUIStore = import_mobx_state_tree7.types.model("EditorUI", {
    */
   togglePreviewDevice() {
     self.previewDevice = self.previewDevice === "desktop" ? "mobile" : "desktop";
-  },
-  /**
-   * Set zoom level
-   */
-  setZoomLevel(zoom) {
-    self.zoomLevel = Math.max(0.25, Math.min(2, zoom));
-  },
-  /**
-   * Zoom in
-   */
-  zoomIn() {
-    self.zoomLevel = Math.min(2, self.zoomLevel + 0.1);
-  },
-  /**
-   * Zoom out
-   */
-  zoomOut() {
-    self.zoomLevel = Math.max(0.25, self.zoomLevel - 0.1);
-  },
-  /**
-   * Reset zoom to 100%
-   */
-  resetZoom() {
-    self.zoomLevel = 1;
   }
 })).views((self) => ({
   /**
@@ -2977,12 +2963,6 @@ var EditorUIStore = import_mobx_state_tree7.types.model("EditorUI", {
    */
   get isDesktopPreview() {
     return self.previewDevice === "desktop";
-  },
-  /**
-   * Get zoom percentage
-   */
-  get zoomPercentage() {
-    return Math.round(self.zoomLevel * 100);
   }
 }));
 
@@ -3216,6 +3196,860 @@ function createEmptyStore() {
     template: createTemplate()
   });
 }
+
+// src/compiler/blockToRawHtml.ts
+function escapeAttr(s) {
+  return s.replace(/"/g, "&quot;").replace(/</g, "&lt;");
+}
+function spacingToCss(p) {
+  if (!p) return "";
+  const t = p.top ?? "0", r = p.right ?? "0", b = p.bottom ?? "0", l = p.left ?? "0";
+  return `padding:${t} ${r} ${b} ${l};`;
+}
+function identity(b) {
+  return `class="el-${b.type} el-${b.id}"`;
+}
+function textToHtml(b) {
+  const styles = [];
+  if (b.color) styles.push(`color:${b.color}`);
+  if (b.fontSize) styles.push(`font-size:${b.fontSize}`);
+  if (b.fontFamily) styles.push(`font-family:${b.fontFamily}`);
+  if (b.lineHeight) styles.push(`line-height:${b.lineHeight}`);
+  if (b.align) styles.push(`text-align:${b.align}`);
+  styles.push("margin:0");
+  const padding = spacingToCss(b.padding);
+  return `<div ${identity(b)} style="${styles.join(";")};${padding}">${b.content}</div>`;
+}
+function imageToHtml(b) {
+  const align = b.align ?? "center";
+  const wrap = `${identity(b)} style="text-align:${align};${spacingToCss(b.padding)}"`;
+  const widthAttr = b.width ? ` width="${escapeAttr(b.width)}"` : "";
+  const heightAttr = b.height ? ` height="${escapeAttr(b.height)}"` : "";
+  const radius = b.borderRadius ? `border-radius:${b.borderRadius};` : "";
+  const img = `<img src="${escapeAttr(b.src)}" alt="${escapeAttr(b.alt ?? "")}"${widthAttr}${heightAttr} style="display:block;max-width:100%;${radius}border:0;outline:none;text-decoration:none;" />`;
+  const inner = b.href ? `<a href="${escapeAttr(b.href)}" target="_blank" rel="noopener" style="text-decoration:none;">${img}</a>` : img;
+  return `<div ${wrap}>${inner}</div>`;
+}
+function buttonToHtml(b) {
+  const align = b.align ?? "center";
+  const bg = b.backgroundColor ?? "#000000";
+  const fg = b.color ?? "#ffffff";
+  const radius = b.borderRadius ?? "3px";
+  const innerPadding = b.innerPadding ?? "10px 25px";
+  const border = b.border ? `border:${b.border};` : "";
+  return `<div ${identity(b)} style="text-align:${align};${spacingToCss(b.padding)}">
+    <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse:separate;line-height:100%;display:inline-block;">
+      <tr>
+        <td align="center" valign="middle" role="presentation" style="background-color:${bg};border-radius:${radius};${border}padding:${innerPadding};">
+          <a href="${escapeAttr(b.href)}" target="_blank" rel="noopener" style="display:inline-block;color:${fg};font-family:inherit;font-size:14px;font-weight:600;line-height:120%;text-decoration:none;text-transform:none;">${escapeAttr(b.label)}</a>
+        </td>
+      </tr>
+    </table>
+  </div>`;
+}
+function dividerToHtml(b) {
+  const color = b.borderColor ?? "#cccccc";
+  const w = b.borderWidth ?? "1px";
+  const style = b.borderStyle ?? "solid";
+  const width = b.width ?? "100%";
+  return `<div ${identity(b)} style="${spacingToCss(b.padding)}">
+    <div style="border-top:${w} ${style} ${color};width:${width};font-size:1px;line-height:1px;">&nbsp;</div>
+  </div>`;
+}
+function spacerToHtml(b) {
+  return `<div ${identity(b)} style="height:${b.height};line-height:${b.height};font-size:1px;">&nbsp;</div>`;
+}
+function socialToHtml(b) {
+  const items = (b.links ?? []).map((link) => {
+    const icon = link.icon ?? "";
+    return `<a href="${escapeAttr(link.url)}" target="_blank" rel="noopener" style="display:inline-block;margin:0 4px;">
+      <img src="${escapeAttr(icon)}" alt="${escapeAttr(link.platform)}" width="24" height="24" style="display:inline-block;border:0;" />
+    </a>`;
+  }).join("");
+  return `<div ${identity(b)} style="text-align:center;">${items}</div>`;
+}
+function blockToRawHtml(block) {
+  if (!isLeafBlockType(block.type)) {
+    throw new Error(`blockToRawHtml only handles leaf blocks; got "${block.type}"`);
+  }
+  switch (block.type) {
+    case "text" /* TEXT */:
+      return textToHtml(block);
+    case "image" /* IMAGE */:
+      return imageToHtml(block);
+    case "button" /* BUTTON */:
+      return buttonToHtml(block);
+    case "divider" /* DIVIDER */:
+      return dividerToHtml(block);
+    case "spacer" /* SPACER */:
+      return spacerToHtml(block);
+    case "social" /* SOCIAL */:
+      return socialToHtml(block);
+    default:
+      throw new Error(`Unhandled leaf block type: ${block.type}`);
+  }
+}
+
+// src/compiler/MjmlBuilder.ts
+var DEFAULT_MJML_ATTRIBUTES = `
+        <mj-all font-family="Georgia, serif" />
+        <mj-text font-size="14px" line-height="1.6" />
+      `;
+var EDITOR_DATA_ATTRIBUTE = {
+  social: "data-ee-social",
+  subColumns: "data-ee-subcols"
+};
+function base64Utf8(text) {
+  const bytes = new TextEncoder().encode(text);
+  let binary = "";
+  for (let i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i]);
+  return btoa(binary);
+}
+var EDITOR_MARKER = { begin: "<!--ee:begin-->", end: "<!--ee:end-->" };
+function stripEditorMarkup(markup) {
+  return markup.replace(/<!--ee:begin-->[\s\S]*?<!--ee:end-->/g, "").replace(/<!--\/?ee:raw:[^>]*-->/g, "");
+}
+function rawMarkers(id, html, editor) {
+  return editor ? `<!--ee:raw:${id}-->${html}<!--/ee:raw:${id}-->` : html;
+}
+function textInlineStyles(block) {
+  const styles = [];
+  if (block.align) styles.push(`text-align:${block.align}`);
+  if (block.color) styles.push(`color:${block.color}`);
+  if (block.fontSize) styles.push(`font-size:${block.fontSize}`);
+  if (block.fontFamily) styles.push(`font-family:${block.fontFamily}`);
+  if (block.lineHeight) styles.push(`line-height:${block.lineHeight}`);
+  return styles;
+}
+function encodeEditorData(value) {
+  return base64Utf8(JSON.stringify(value));
+}
+function finishAttributes(attrs, classes, extra) {
+  const out = [...attrs];
+  const taken = new Set(attrs.map((a) => a.slice(0, a.indexOf("="))));
+  const allClasses = [...classes];
+  if (extra) {
+    for (const [name, value] of Object.entries(extra)) {
+      if (name === "css-class") {
+        for (const c of value.replace(/"/g, "&quot;").split(/\s+/)) if (c && !allClasses.includes(c)) allClasses.push(c);
+        continue;
+      }
+      if (taken.has(name)) continue;
+      out.push(`${name}="${value.replace(/"/g, "&quot;")}"`);
+    }
+  }
+  if (allClasses.length > 0) out.push(`css-class="${allClasses.join(" ")}"`);
+  return out.join(" ");
+}
+function quoted(value) {
+  return value.replace(/"/g, "&quot;");
+}
+function spacingToString(spacing) {
+  if (!spacing) return "";
+  const { top, right, bottom, left } = spacing;
+  if (!top && !right && !bottom && !left) return "";
+  return [top || "0", right || "0", bottom || "0", left || "0"].join(" ");
+}
+var MJML_SECTION_PADDING = { top: "20px", right: "0", bottom: "20px", left: "0" };
+function addPx(a, b) {
+  const px = (v) => v === "0" ? 0 : /^-?\d+(\.\d+)?px$/.test(v) ? Number.parseFloat(v) : NaN;
+  const sum = px(a) + px(b);
+  if (Number.isNaN(sum)) return void 0;
+  return `${Number.isInteger(sum) ? sum : Number(sum.toFixed(2))}px`;
+}
+function paddingWithGap(spacing, gap) {
+  const base = spacing ?? MJML_SECTION_PADDING;
+  const top = addPx(base.top || "0", gap);
+  return top === void 0 ? base : { ...base, top };
+}
+function mjmlOptions(options = {}) {
+  return {
+    // Never resolve <mj-include>: its path is read from the server's disk,
+    // and a stored document (a Raw block's html) must not reach local files.
+    ignoreIncludes: true,
+    validationLevel: "soft",
+    minify: false,
+    ...options.webFonts === false ? { fonts: {} } : {}
+  };
+}
+var MjmlBuilder = class {
+  constructor() {
+    /**
+     * Set true while emitting a column with sub-columns. Causes generateHead
+     * to inject the responsive media query exactly once per template.
+     */
+    this.needsSubColumnStyles = false;
+    /** Set for the duration of one build in editor mode; see {@link BuildOptions}. */
+    this.editor = false;
+    /**
+     * Platform brand colors for social icons
+     */
+    this.SOCIAL_COLORS = {
+      facebook: "#1877F2",
+      twitter: "#000000",
+      instagram: "#E4405F",
+      linkedin: "#0A66C2",
+      youtube: "#FF0000",
+      pinterest: "#BD081C",
+      github: "#181717"
+    };
+  }
+  /** `fragment` fenced as an editor addition, or nothing outside editor mode. */
+  ee(fragment) {
+    return this.editor ? `${EDITOR_MARKER.begin}${fragment}${EDITOR_MARKER.end}` : "";
+  }
+  /** The label of a ghost: what the node is, so the person can find and unhide it. */
+  ghostText(cssClasses, label) {
+    return `<mj-text css-class="ee-ghost ${cssClasses.join(" ")}" padding="8px 25px" font-size="12px" line-height="1.4" color="#6b7280" container-background-color="#f3f4f6"><span style="display:block;border:1px dashed #9ca3af;padding:6px 10px;">${label} (hidden)</span></mj-text>`;
+  }
+  /**
+   * The MJML markup for a document, without compiling it to HTML.
+   */
+  toMJML(template, options = {}) {
+    this.needsSubColumnStyles = false;
+    this.editor = options.editor === true;
+    try {
+      return this.templateToMJML(template);
+    } finally {
+      this.editor = false;
+    }
+  }
+  /**
+   * Convert template to MJML markup
+   */
+  templateToMJML(template) {
+    const { metadata, sections } = template;
+    const body = sections.map((item) => isWrapper(item) ? this.wrapperToMJML(item) : this.sectionToMJML(item)).join("\n");
+    const gradientCSS = this.collectGradientStyles(sections);
+    const head = this.generateHead(metadata, gradientCSS);
+    const bodyAttributes = finishAttributes([], [], metadata.mjmlHead?.bodyAttributes);
+    return `
+<mjml>
+  ${head}
+  <mj-body${bodyAttributes ? ` ${bodyAttributes}` : ""}>
+    ${body}
+  </mj-body>
+</mjml>
+    `.trim();
+  }
+  /**
+   * Generate MJML head section with all head components
+   * Supports: mj-title, mj-preview, mj-font, mj-breakpoint, mj-style
+   */
+  generateHead(metadata, gradientCSS) {
+    const parts = ["<mj-head>"];
+    if (metadata.title) {
+      parts.push(`<mj-title>${metadata.title}</mj-title>`);
+    }
+    if (metadata.previewText || metadata.subject) {
+      parts.push(`<mj-preview>${metadata.previewText || metadata.subject || ""}</mj-preview>`);
+    }
+    if (metadata.fonts && metadata.fonts.length > 0) {
+      for (const font of metadata.fonts) {
+        parts.push(`<mj-font name="${font.name}" href="${font.href}" />`);
+      }
+    }
+    if (metadata.breakpoint) {
+      parts.push(`<mj-breakpoint width="${metadata.breakpoint}" />`);
+    }
+    const mjmlHead = metadata.mjmlHead;
+    const attributes = mjmlHead?.attributes ?? DEFAULT_MJML_ATTRIBUTES;
+    if (attributes.trim()) parts.push(`<mj-attributes>${attributes}</mj-attributes>`);
+    if (mjmlHead?.headRaw) parts.push(mjmlHead.headRaw);
+    if (metadata.customCSS) {
+      parts.push(`<mj-style>${metadata.customCSS}</mj-style>`);
+    }
+    if (metadata.inlineCSS) {
+      parts.push(`<mj-style inline="inline">${metadata.inlineCSS}</mj-style>`);
+    }
+    if (gradientCSS) {
+      parts.push(`<mj-style>${gradientCSS}</mj-style>`);
+    }
+    if (this.needsSubColumnStyles) {
+      parts.push(`<mj-style>
+@media only screen and (max-width:480px) {
+  table.ee-sub-cols td.ee-sub-col {
+    display: block !important;
+    width: 100% !important;
+    padding-bottom: 12px !important;
+  }
+  table.ee-sub-cols td.ee-sub-col:last-child {
+    padding-bottom: 0 !important;
+  }
+}
+</mj-style>`);
+    }
+    parts.push("</mj-head>");
+    return parts.join("\n");
+  }
+  /**
+   * Collect background-image CSS rules for all wrappers, sections and columns that have gradients.
+   * Returns a string of CSS rules to inject as a single mj-style block.
+   */
+  collectGradientStyles(items) {
+    const rules = [];
+    for (const item of items) {
+      if (isWrapper(item) && item.backgroundGradient) {
+        const css = buildGradientCSS(item.backgroundGradient);
+        if (css) rules.push(`.el-grad-${item.id} { background-image: ${css}; }`);
+      }
+    }
+    for (const section of allSections(items)) {
+      if (section.backgroundGradient) {
+        const css = buildGradientCSS(section.backgroundGradient);
+        if (css) {
+          rules.push(`.el-grad-${section.id} { background-image: ${css}; }`);
+        }
+      }
+      for (const column of section.columns) {
+        if (column.backgroundGradient) {
+          const css = buildGradientCSS(column.backgroundGradient);
+          if (css) {
+            rules.push(`.el-grad-${column.id} { background-image: ${css}; }`);
+          }
+        }
+      }
+    }
+    return rules.join("\n");
+  }
+  /**
+   * Convert a wrapper to an `<mj-wrapper>` around its sections. The wrapper's
+   * attributes are MJML's own for `mj-wrapper`; the sections inside follow
+   * MJML's rules there (a full-width section inside a full-width wrapper
+   * renders at standard width, which the inspector explains).
+   */
+  wrapperToMJML(wrapper) {
+    if (wrapper.hidden) {
+      return this.ee(`<mj-wrapper css-class="ee-ghost el-wrapper el-${wrapper.id}" padding="0"><mj-section padding="0"><mj-column>${this.ghostText([], "Container")}</mj-column></mj-section></mj-wrapper>`);
+    }
+    const attrs = [];
+    const cssClasses = ["el-wrapper", `el-${wrapper.id}`];
+    this.pushBackground(attrs, cssClasses, wrapper);
+    if (wrapper.border) attrs.push(`border="${quoted(wrapper.border)}"`);
+    if (wrapper.borderTop) attrs.push(`border-top="${quoted(wrapper.borderTop)}"`);
+    if (wrapper.borderRight) attrs.push(`border-right="${quoted(wrapper.borderRight)}"`);
+    if (wrapper.borderBottom) attrs.push(`border-bottom="${quoted(wrapper.borderBottom)}"`);
+    if (wrapper.borderLeft) attrs.push(`border-left="${quoted(wrapper.borderLeft)}"`);
+    if (wrapper.borderRadius) attrs.push(`border-radius="${quoted(wrapper.borderRadius)}"`);
+    if (wrapper.fullWidth) attrs.push('full-width="full-width"');
+    const padding = spacingToString(wrapper.padding);
+    if (padding) attrs.push(`padding="${quoted(padding)}"`);
+    if (wrapper.gap) attrs.push(`gap="${quoted(wrapper.gap)}"`);
+    if (wrapper.textAlign) attrs.push(`text-align="${quoted(wrapper.textAlign)}"`);
+    for (const c of (wrapper.cssClass ?? "").split(/\s+/)) if (c && !cssClasses.includes(quoted(c))) cssClasses.push(quoted(c));
+    let first = true;
+    const sections = wrapper.sections.map((section) => {
+      if (section.hidden) return this.sectionToMJML(section);
+      const out = this.sectionToMJML(section, first ? void 0 : wrapper.gap);
+      first = false;
+      return out;
+    }).filter(Boolean).join("\n");
+    return `
+<mj-wrapper ${finishAttributes(attrs, cssClasses, wrapper.extraAttributes)}>
+  ${sections}
+</mj-wrapper>
+    `.trim();
+  }
+  /** Background attributes shared by sections and wrappers: a gradient (with its Outlook fallback colour), or colour and image. */
+  pushBackground(attrs, cssClasses, node) {
+    if (node.backgroundGradient) {
+      const fallbackColor = node.backgroundGradient.stops[0]?.color;
+      if (fallbackColor) attrs.push(`background-color="${quoted(fallbackColor)}"`);
+      cssClasses.push(`el-grad-${node.id}`);
+      return;
+    }
+    if (node.backgroundColor) attrs.push(`background-color="${quoted(node.backgroundColor)}"`);
+    if (node.backgroundImage) attrs.push(`background-url="${quoted(node.backgroundImage)}"`);
+    if (node.backgroundPosition) attrs.push(`background-position="${quoted(node.backgroundPosition)}"`);
+    if (node.backgroundRepeat) attrs.push(`background-repeat="${quoted(node.backgroundRepeat)}"`);
+    if (node.backgroundSize) attrs.push(`background-size="${quoted(node.backgroundSize)}"`);
+  }
+  /**
+   * Convert section to MJML
+   * Supports background images, full-width, and mj-group for non-stacking columns
+   */
+  sectionToMJML(section, gapAbove) {
+    if (section.hidden) {
+      return this.ee(`<mj-section css-class="ee-ghost el-section el-${section.id}" padding="0"><mj-column>${this.ghostText([], "Section")}</mj-column></mj-section>`);
+    }
+    if (section.bodyRaw) {
+      const blocks = section.columns.flatMap((c) => c.blocks).filter((b) => !b.hidden);
+      if (blocks.every((b) => b.type === "raw") && section.columns.every((c) => !c.subColumns?.length)) {
+        return blocks.map((b) => `<mj-raw>${rawMarkers(b.id, b.html, this.editor)}</mj-raw>`).join("\n");
+      }
+    }
+    const attrs = [];
+    const cssClasses = ["el-section", `el-${section.id}`];
+    this.pushBackground(attrs, cssClasses, section);
+    if (section.fullWidth) {
+      attrs.push('full-width="full-width"');
+    }
+    const sectionPadding = gapAbove ? paddingWithGap(section.padding, gapAbove) : section.padding;
+    if (sectionPadding) {
+      const padding = spacingToString(sectionPadding);
+      if (padding) attrs.push(`padding="${padding}"`);
+    }
+    const columns = section.columns.map((col) => this.columnToMJML(col)).join("\n");
+    const sectionAttrs = finishAttributes(attrs, cssClasses, section.extraAttributes);
+    if (section.noStack && section.columns.length > 1) {
+      return `
+<mj-section ${sectionAttrs}>
+  <mj-group>
+    ${columns}
+  </mj-group>
+</mj-section>
+      `.trim();
+    }
+    return `
+<mj-section ${sectionAttrs}>
+  ${columns}
+</mj-section>
+    `.trim();
+  }
+  /**
+   * Convert column to MJML
+   */
+  columnToMJML(column) {
+    if (column.hidden) return "";
+    if (column.subColumns && column.subColumns.length > 0) {
+      return this.subColumnsToMJML(column);
+    }
+    const cssClasses = ["el-column", `el-${column.id}`];
+    const attrs = [];
+    if (column.width) {
+      attrs.push(`width="${column.width}%"`);
+    }
+    if (column.backgroundGradient) {
+      const fallbackColor = column.backgroundGradient.stops[0]?.color;
+      if (fallbackColor) attrs.push(`background-color="${fallbackColor}"`);
+      cssClasses.push(`el-grad-${column.id}`);
+    } else {
+      if (column.backgroundColor) {
+        attrs.push(`background-color="${column.backgroundColor}"`);
+      }
+    }
+    if (column.verticalAlign) {
+      attrs.push(`vertical-align="${column.verticalAlign}"`);
+    }
+    if (column.padding) {
+      const padding = spacingToString(column.padding);
+      if (padding) attrs.push(`padding="${padding}"`);
+    }
+    const blocks = column.blocks.map((block) => this.blockToMJML(block)).join("\n");
+    const floor = column.blocks.length === 0 ? this.ee('<mj-spacer height="48px" css-class="ee-ghost ee-empty" />') : "";
+    return `
+<mj-column ${finishAttributes(attrs, cssClasses, column.extraAttributes)}>
+  ${blocks}${floor}
+</mj-column>
+    `.trim();
+  }
+  /**
+   * Emit a group column as an mj-column wrapping a hand-built nested
+   * table inside an mj-raw island. The parent mj-section structure
+   * stays standard MJML; only the nested area escapes MJML's parser.
+   *
+   * The responsive media query (table.ee-sub-cols td.ee-sub-col) is
+   * injected once at document head via generateHead when the
+   * needsSubColumnStyles flag is set.
+   */
+  subColumnsToMJML(column) {
+    this.needsSubColumnStyles = true;
+    const subs = column.subColumns ?? [];
+    const sumRaw = subs.reduce((a, s) => a + (s.width || 0), 0) || 100;
+    const widths = subs.map((s) => Math.round((s.width || 0) / sumRaw * 1e4) / 100);
+    const cells = subs.map((sc, i) => {
+      const inner = (sc.blocks ?? []).map((b) => blockToRawHtml(b)).join("\n");
+      const valign = sc.verticalAlign ?? "top";
+      const hasPadding = sc.paddingTop || sc.paddingRight || sc.paddingBottom || sc.paddingLeft;
+      const padding = hasPadding ? `padding:${sc.paddingTop || "0"} ${sc.paddingRight || "0"} ${sc.paddingBottom || "0"} ${sc.paddingLeft || "0"};` : "padding:10px;";
+      const bg = sc.backgroundColor ? `background-color:${sc.backgroundColor};` : "";
+      return `<td class="ee-sub-col el-subcolumn el-${sc.id}" width="${widths[i]}%" valign="${valign}" style="${padding}${bg}">${inner}</td>`;
+    }).join("");
+    const colAttrs = [];
+    if (column.width) colAttrs.push(`width="${column.width}%"`);
+    if (column.backgroundColor) colAttrs.push(`background-color="${column.backgroundColor}"`);
+    if (column.verticalAlign) colAttrs.push(`vertical-align="${column.verticalAlign}"`);
+    if (column.padding) {
+      const padding = spacingToString(column.padding);
+      if (padding) colAttrs.push(`padding="${padding}"`);
+    }
+    return `
+<mj-column ${finishAttributes(colAttrs, ["el-column", `el-${column.id}`], column.extraAttributes)}>
+  <mj-raw>
+    <table role="presentation" class="ee-sub-cols" ${EDITOR_DATA_ATTRIBUTE.subColumns}="${encodeEditorData(subs)}" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
+      <tr>${cells}</tr>
+    </table>
+  </mj-raw>
+</mj-column>
+    `.trim();
+  }
+  /**
+   * Convert block to MJML based on type
+   */
+  blockToMJML(block) {
+    if (block.hidden) return this.ee(this.ghostText([`el-${block.type}`, `el-${block.id}`], block.type.charAt(0).toUpperCase() + block.type.slice(1)));
+    switch (block.type) {
+      case "text":
+        return this.textBlockToMJML(block);
+      case "image":
+        return this.imageBlockToMJML(block);
+      case "button":
+        return this.buttonBlockToMJML(block);
+      case "divider":
+        return this.dividerBlockToMJML(block);
+      case "spacer":
+        return this.spacerBlockToMJML(block);
+      case "social":
+        return this.socialBlockToMJML(block);
+      case "hero":
+        return this.heroBlockToMJML(block);
+      case "accordion":
+        return this.accordionBlockToMJML(block);
+      case "raw":
+        return this.rawBlockToMJML(block);
+      case "navbar":
+        return this.navbarBlockToMJML(block);
+      case "carousel":
+        return this.carouselBlockToMJML(block);
+      case "table":
+        return this.tableBlockToMJML(block);
+      case "header":
+        return this.headerBlockToMJML();
+      case "footer":
+        return this.footerBlockToMJML();
+      default:
+        console.warn(`Unknown block type: ${block.type}`);
+        return "";
+    }
+  }
+  /**
+   * Convert text block to MJML
+   *
+   * Note: MJML applies styles to the container <td>, but TipTap content
+   * (wrapped in <p> tags) doesn't inherit these styles. We solve this by
+   * wrapping the content in a <div> with explicit inline styles.
+   */
+  textBlockToMJML(block) {
+    const attrs = [];
+    const inlineStyles = textInlineStyles(block);
+    if (block.align) attrs.push(`align="${block.align}"`);
+    if (block.color) attrs.push(`color="${block.color}"`);
+    if (block.fontSize) attrs.push(`font-size="${block.fontSize}"`);
+    if (block.fontFamily) attrs.push(`font-family="${block.fontFamily}"`);
+    if (block.lineHeight) attrs.push(`line-height="${block.lineHeight}"`);
+    if (block.padding) {
+      const padding = spacingToString(block.padding);
+      if (padding) attrs.push(`padding="${padding}"`);
+    }
+    const styledContent = inlineStyles.length > 0 ? `<div style="${inlineStyles.join(";")}">${block.content}</div>` : block.content;
+    return `<mj-text ${finishAttributes(attrs, ["el-text", `el-${block.id}`], block.extraAttributes)}>${styledContent}</mj-text>`;
+  }
+  /**
+   * Convert image block to MJML
+   */
+  imageBlockToMJML(block) {
+    const attrs = [`src="${block.src}"`];
+    if (block.alt) attrs.push(`alt="${block.alt}"`);
+    if (block.width) attrs.push(`width="${block.width}"`);
+    if (block.height) attrs.push(`height="${block.height}"`);
+    if (block.align) attrs.push(`align="${block.align}"`);
+    if (block.href) attrs.push(`href="${block.href}"`);
+    if (block.borderRadius) attrs.push(`border-radius="${block.borderRadius}"`);
+    if (block.padding) {
+      const padding = spacingToString(block.padding);
+      if (padding) attrs.push(`padding="${padding}"`);
+    }
+    return `<mj-image ${finishAttributes(attrs, ["el-image", `el-${block.id}`], block.extraAttributes)} />`;
+  }
+  /**
+   * Convert button block to MJML
+   */
+  buttonBlockToMJML(block) {
+    const attrs = [`href="${block.href}"`];
+    if (block.align) attrs.push(`align="${block.align}"`);
+    if (block.backgroundColor) attrs.push(`background-color="${block.backgroundColor}"`);
+    if (block.color) attrs.push(`color="${block.color}"`);
+    if (block.borderRadius) attrs.push(`border-radius="${block.borderRadius}"`);
+    if (block.border) attrs.push(`border="${block.border}"`);
+    if (block.innerPadding) attrs.push(`inner-padding="${block.innerPadding}"`);
+    if (block.padding) {
+      const padding = spacingToString(block.padding);
+      if (padding) attrs.push(`padding="${padding}"`);
+    }
+    return `<mj-button ${finishAttributes(attrs, ["el-button", `el-${block.id}`], block.extraAttributes)}>${block.label}</mj-button>`;
+  }
+  /**
+   * Convert divider block to MJML
+   */
+  dividerBlockToMJML(block) {
+    const attrs = [];
+    if (block.borderColor) attrs.push(`border-color="${block.borderColor}"`);
+    if (block.borderWidth) attrs.push(`border-width="${block.borderWidth}"`);
+    if (block.borderStyle) attrs.push(`border-style="${block.borderStyle}"`);
+    if (block.width) attrs.push(`width="${block.width}"`);
+    if (block.padding) {
+      const padding = spacingToString(block.padding);
+      if (padding) attrs.push(`padding="${padding}"`);
+    }
+    return `<mj-divider ${finishAttributes(attrs, ["el-divider", `el-${block.id}`], block.extraAttributes)} />`;
+  }
+  /**
+   * Convert spacer block to MJML
+   */
+  spacerBlockToMJML(block) {
+    return `<mj-spacer ${finishAttributes([`height="${block.height}"`], ["el-spacer", `el-${block.id}`], block.extraAttributes)} />`;
+  }
+  /**
+   * Get white SVG icon as data URI for a platform
+   * Uses clean, minimal SVGs optimized for email
+   */
+  getSocialIconDataUri(platform) {
+    const svgIcons = {
+      facebook: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>',
+      twitter: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg>',
+      instagram: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 0C8.74 0 8.333.015 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.74 0 12s.015 3.667.072 4.947c.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.74 24 12 24s3.667-.015 4.947-.072c4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>',
+      linkedin: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>',
+      youtube: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>',
+      pinterest: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 01.083.345c-.091.378-.293 1.194-.333 1.361-.052.218-.174.265-.402.159-1.495-.696-2.428-2.882-2.428-4.64 0-3.779 2.744-7.253 7.917-7.253 4.158 0 7.389 2.963 7.389 6.923 0 4.13-2.607 7.461-6.229 7.461-1.217 0-2.36-.632-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0z"/></svg>',
+      github: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>'
+    };
+    const svg = svgIcons[platform] || svgIcons.facebook;
+    return `data:image/svg+xml;base64,${base64Utf8(svg)}`;
+  }
+  /**
+   * Convert social block to MJML using raw HTML table for reliable horizontal layout
+   * Uses styled anchor tags with background colors for full width control
+   */
+  socialBlockToMJML(block) {
+    const iconSize = block.iconSize || "40px";
+    const iconPadding = block.iconPadding || "8px";
+    const borderRadius = block.borderRadius || "999px";
+    const align = block.align || "center";
+    const isVertical = block.mode === "vertical";
+    const sizeNum = parseInt(iconSize, 10) || 40;
+    const innerIconSize = Math.round(sizeNum * 0.5);
+    const paddingNum = parseInt(iconPadding, 10) || 8;
+    const getLinkColor = (link) => {
+      return link.color || this.SOCIAL_COLORS[link.platform] || "#666666";
+    };
+    if (isVertical) {
+      const verticalButtons = block.links.map((link) => {
+        const bgColor = getLinkColor(link);
+        const iconUrl = this.getSocialIconDataUri(link.platform);
+        return `<mj-button
+    href="${link.url}"
+    background-color="${bgColor}"
+    border-radius="${borderRadius}"
+    width="${iconSize}"
+    height="${iconSize}"
+    padding="${iconPadding} 0"
+    inner-padding="0"
+    align="${align}"
+    css-class="el-social-btn el-${block.id}-${link.platform}"
+  ><img src="${iconUrl}" alt="${link.platform}" width="${innerIconSize}" height="${innerIconSize}" style="display:block;margin:auto;" /></mj-button>`;
+      }).join("\n");
+      return `<!-- Social Icons (vertical) -->
+${verticalButtons}`;
+    }
+    const alignMargin = align === "center" ? "0 auto" : align === "right" ? "0 0 0 auto" : "0 auto 0 0";
+    const socialCells = block.links.map((link, index) => {
+      const bgColor = getLinkColor(link);
+      const iconUrl = this.getSocialIconDataUri(link.platform);
+      const isLast = index === block.links.length - 1;
+      const cellPadding = isLast ? "0" : `0 ${paddingNum}px 0 0`;
+      const paddingForCentering = Math.round((sizeNum - innerIconSize) / 2);
+      return `<td style="padding: ${cellPadding};">
+          <a href="${link.url}" target="_blank" style="display: block; width: ${iconSize}; height: ${iconSize}; background-color: ${bgColor}; border-radius: ${borderRadius}; text-decoration: none;">
+            <img src="${iconUrl}" alt="${link.platform}" width="${innerIconSize}" height="${innerIconSize}" style="display: block; margin: ${paddingForCentering}px auto 0 auto;" />
+          </a>
+        </td>`;
+    }).join("\n        ");
+    return `<!-- Social Icons (horizontal) -->
+<mj-raw>
+  <table align="${align}" role="presentation" cellpadding="0" cellspacing="0" style="margin: ${alignMargin};" ${EDITOR_DATA_ATTRIBUTE.social}="${encodeEditorData(block)}">
+    <tr>
+      ${socialCells}
+    </tr>
+  </table>
+</mj-raw>`;
+  }
+  /**
+   * Convert hero block to MJML
+   */
+  heroBlockToMJML(block) {
+    const attrs = [`background-url="${block.backgroundImage}"`];
+    if (block.backgroundHeight) attrs.push(`background-height="${block.backgroundHeight}"`);
+    if (block.backgroundWidth) attrs.push(`background-width="${block.backgroundWidth}"`);
+    if (block.backgroundColor) attrs.push(`background-color="${block.backgroundColor}"`);
+    if (block.verticalAlign) attrs.push(`vertical-align="${block.verticalAlign}"`);
+    if (block.mode) attrs.push(`mode="${block.mode}"`);
+    return `
+<mj-hero ${finishAttributes(attrs, ["el-hero", `el-${block.id}`], block.extraAttributes)}>
+  <mj-text align="center" color="#ffffff" font-size="32px" font-weight="bold">
+    Hero Title
+  </mj-text>
+  <mj-text align="center" color="#ffffff" font-size="16px">
+    Add your hero content here
+  </mj-text>
+  <mj-button href="#" background-color="#ffffff" color="#944923">
+    Call to Action
+  </mj-button>
+</mj-hero>
+    `.trim();
+  }
+  /**
+   * Convert accordion block to MJML
+   */
+  accordionBlockToMJML(block) {
+    const attrs = [];
+    if (block.iconPosition) attrs.push(`icon-position="${block.iconPosition}"`);
+    if (block.borderColor) attrs.push(`border="${block.borderColor}"`);
+    if (block.fontFamily) attrs.push(`font-family="${block.fontFamily}"`);
+    const items = block.items.map(
+      (item) => `
+  <mj-accordion-element>
+    <mj-accordion-title>${item.title}</mj-accordion-title>
+    <mj-accordion-text>${item.content}</mj-accordion-text>
+  </mj-accordion-element>`
+    ).join("\n");
+    return `
+<mj-accordion ${finishAttributes(attrs, ["el-accordion", `el-${block.id}`], block.extraAttributes)}>
+${items}
+</mj-accordion>
+    `.trim();
+  }
+  /**
+   * Convert raw HTML block to MJML
+   */
+  rawBlockToMJML(block) {
+    return `<mj-raw css-class="el-raw el-${block.id}">${rawMarkers(block.id, block.html, this.editor)}</mj-raw>`;
+  }
+  /**
+   * Convert navbar block to MJML
+   */
+  navbarBlockToMJML(block) {
+    const attrs = [];
+    if (block.hamburger) attrs.push('hamburger="hamburger"');
+    if (block.baseUrl) attrs.push(`base-url="${block.baseUrl}"`);
+    if (block.align) attrs.push(`align="${block.align}"`);
+    if (block.icoColor) attrs.push(`ico-color="${block.icoColor}"`);
+    if (block.padding) {
+      const padding = spacingToString(block.padding);
+      if (padding) attrs.push(`padding="${padding}"`);
+    }
+    const links = block.links.map((link) => {
+      const linkAttrs = [`href="${link.href}"`];
+      if (link.color) linkAttrs.push(`color="${link.color}"`);
+      return `  <mj-navbar-link ${linkAttrs.join(" ")}>${link.label}</mj-navbar-link>`;
+    }).join("\n");
+    return `
+<mj-navbar ${finishAttributes(attrs, ["el-navbar", `el-${block.id}`], block.extraAttributes)}>
+${links}
+</mj-navbar>
+    `.trim();
+  }
+  /**
+   * Convert carousel block to MJML
+   */
+  carouselBlockToMJML(block) {
+    const attrs = [];
+    if (block.thumbnails) attrs.push(`thumbnails="${block.thumbnails}"`);
+    if (block.borderRadius) attrs.push(`border-radius="${block.borderRadius}"`);
+    if (block.iconWidth) attrs.push(`icon-width="${block.iconWidth}"`);
+    if (block.tbBorderRadius) attrs.push(`tb-border-radius="${block.tbBorderRadius}"`);
+    if (block.padding) {
+      const padding = spacingToString(block.padding);
+      if (padding) attrs.push(`padding="${padding}"`);
+    }
+    const images = block.images.map((img) => {
+      const imgAttrs = [`src="${img.src}"`];
+      if (img.alt) imgAttrs.push(`alt="${img.alt}"`);
+      if (img.href) imgAttrs.push(`href="${img.href}"`);
+      if (img.thumbnailSrc) imgAttrs.push(`thumbnails-src="${img.thumbnailSrc}"`);
+      return `  <mj-carousel-image ${imgAttrs.join(" ")} />`;
+    }).join("\n");
+    return `
+<mj-carousel ${finishAttributes(attrs, ["el-carousel", `el-${block.id}`], block.extraAttributes)}>
+${images}
+</mj-carousel>
+    `.trim();
+  }
+  /**
+   * Convert table block to MJML
+   */
+  tableBlockToMJML(block) {
+    const attrs = [];
+    if (block.align) attrs.push(`align="${block.align}"`);
+    if (block.color) attrs.push(`color="${block.color}"`);
+    if (block.fontFamily) attrs.push(`font-family="${block.fontFamily}"`);
+    if (block.fontSize) attrs.push(`font-size="${block.fontSize}"`);
+    if (block.cellpadding) attrs.push(`cellpadding="${block.cellpadding}"`);
+    if (block.cellspacing) attrs.push(`cellspacing="${block.cellspacing}"`);
+    if (block.border) attrs.push(`border="${block.border}"`);
+    if (block.padding) {
+      const padding = spacingToString(block.padding);
+      if (padding) attrs.push(`padding="${padding}"`);
+    }
+    const headerCells = block.headers.map((h) => `<th style="padding: 8px; border-bottom: 1px solid #ddd; text-align: left;">${h}</th>`).join("");
+    const headerRow = `<tr style="background-color: #f5f5f5;">${headerCells}</tr>`;
+    const dataRows = block.rows.map((row) => {
+      const cells = row.map((cell) => `<td style="padding: 8px; border-bottom: 1px solid #eee;">${cell}</td>`).join("");
+      return `<tr>${cells}</tr>`;
+    }).join("\n");
+    return `
+<mj-table ${finishAttributes(attrs, ["el-table", `el-${block.id}`], block.extraAttributes)}>
+${headerRow}
+${dataRows}
+</mj-table>
+    `.trim();
+  }
+  /**
+   * Generate the locked header block.
+   *
+   * It used to render one client's company name and a logo from an image host;
+   * both are gone. What is left is a placeholder image slot. Keep this in step
+   * with `headerBlockDefinition` in `packages/blocks/src/branded/index.ts`:
+   * which of the two runs depends on how the registry is configured.
+   *
+   * The placeholder is a `data:` URI rather than an address on an image host,
+   * so a workspace whose `asset_policy` is `service_only` can still send a mail
+   * that contains this block.
+   */
+  headerBlockToMJML() {
+    return `
+<mj-wrapper background-color="#ffffff" padding="20px" css-class="el-header-wrapper">
+  <mj-section css-class="el-header-section">
+    <mj-column css-class="el-header-column">
+      <!-- Nothing: see headerBlockDefinition in packages/blocks. -->
+      <mj-spacer height="1px" css-class="el-header-spacer" />
+    </mj-column>
+  </mj-section>
+</mj-wrapper>
+    `.trim();
+  }
+  /**
+   * Generate the locked footer block: the unsubscribe link and nothing else.
+   *
+   * It used to carry a copyright line naming one client's company. A locked
+   * block carries no props, so whoever sends the mail cannot correct a name
+   * that is not theirs; the line is gone rather than replaced with a fake one.
+   * Keep this in step with `footerBlockDefinition` in
+   * `packages/blocks/src/branded/index.ts`.
+   */
+  footerBlockToMJML() {
+    return `
+<mj-wrapper background-color="#f5f5f5" padding="20px" css-class="el-footer-wrapper">
+  <mj-section css-class="el-footer-section">
+    <mj-column css-class="el-footer-column">
+      <mj-text align="center" font-size="12px" color="#666666" css-class="el-footer-text-2">
+        <a href="{{unsubscribe_url}}" style="color: #374151; text-decoration: underline;">Unsubscribe</a>
+      </mj-text>
+    </mj-column>
+  </mj-section>
+</mj-wrapper>
+    `.trim();
+  }
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AccordionBlockSchema,
@@ -3233,8 +4067,11 @@ function createEmptyStore() {
   ColumnModel,
   ColumnSchema,
   CustomFontSchema,
+  DEFAULT_MJML_ATTRIBUTES,
   DEFAULT_ON_CHANGE_DEBOUNCE_MS,
   DividerBlockSchema,
+  EDITOR_DATA_ATTRIBUTE,
+  EDITOR_MARKER,
   EditorUIStore,
   EmailTemplateSchema,
   EmailTemplateSchemaV1_0,
@@ -3249,6 +4086,7 @@ function createEmptyStore() {
   ImageBlockSchema,
   LEAF_BLOCK_TYPES,
   MJML_WRAPPER_DEFAULT_PADDING,
+  MjmlBuilder,
   MjmlHeadSchema,
   NavbarBlockSchema,
   NavbarLinkModel,
@@ -3276,7 +4114,9 @@ function createEmptyStore() {
   TopLevelItemSchema,
   WrapperModel,
   WrapperSchema,
+  addPx,
   allSections,
+  base64Utf8,
   buildGradientCSS,
   cloneSectionSnapshot,
   createBlockRegistry,
@@ -3291,12 +4131,17 @@ function createEmptyStore() {
   createTemplate,
   createTemplateWithDefaultSection,
   createWrapper,
+  encodeEditorData,
   isLeafBlockType,
   isTemplateMigrationError,
   isWrapper,
   isWrapperInstance,
   migrateTemplate,
   migrateV1_0ToV1_1,
+  mjmlOptions,
+  paddingWithGap,
+  stripEditorMarkup,
+  textInlineStyles,
   validateTemplate,
   withTemplateId
 });