@marlinjai/email-editor-core 0.3.0 → 0.4.0

package/dist/server.mjs

@@ -1,179 +1,31 @@
 import {
   CURRENT_TEMPLATE_VERSION,
-  allSections,
-  buildGradientCSS,
-  isLeafBlockType,
   isTemplateMigrationError,
-  isWrapper,
   migrateTemplate
-} from "./chunk-2ZL7A2I6.mjs";
+} from "./chunk-NQPMHQ5G.mjs";
+import {
+  DEFAULT_MJML_ATTRIBUTES,
+  EDITOR_DATA_ATTRIBUTE,
+  EDITOR_MARKER,
+  MjmlBuilder,
+  addPx,
+  base64Utf8,
+  encodeEditorData,
+  mjmlOptions,
+  paddingWithGap,
+  stripEditorMarkup
+} from "./chunk-OOCYGZMB.mjs";
 
 // src/compiler/MJMLCompiler.ts
 import mjml2html from "mjml";
-
-// 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 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 style="${styles.join(";")};${padding}">${b.content}</div>`;
-}
-function imageToHtml(b) {
-  const align = b.align ?? "center";
-  const wrap = `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 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 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 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 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/MJMLCompiler.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 encodeEditorData(value) {
-  return Buffer.from(JSON.stringify(value), "utf8").toString("base64");
-}
-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 MJMLCompiler = 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;
-    /**
-     * Platform brand colors for social icons
-     */
-    this.SOCIAL_COLORS = {
-      facebook: "#1877F2",
-      twitter: "#000000",
-      instagram: "#E4405F",
-      linkedin: "#0A66C2",
-      youtube: "#FF0000",
-      pinterest: "#BD081C",
-      github: "#181717"
-    };
-  }
+var MJMLCompiler = class extends MjmlBuilder {
   /**
    * Compile email template to MJML and HTML
    */
-  compile(template, options = {}) {
+  async compile(template, options = {}) {
     try {
-      this.needsSubColumnStyles = false;
-      const mjml = this.templateToMJML(template);
-      const result = mjml2html(mjml, {
-        // 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: {} } : {}
-      });
+      const mjml = this.toMJML(template, { editor: options.editor });
+      const result = await mjml2html(mjml, mjmlOptions(options));
       return {
         mjml,
         html: result.html,
@@ -187,651 +39,6 @@ var MJMLCompiler = class {
       };
     }
   }
-  /**
-   * The MJML markup for a document, without compiling it to HTML.
-   */
-  toMJML(template) {
-    this.needsSubColumnStyles = false;
-    return this.templateToMJML(template);
-  }
-  /**
-   * 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 "";
-    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));
-    const sections = wrapper.sections.map((section) => this.sectionToMJML(section)).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) {
-    if (section.hidden) return "";
-    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>${b.html}</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"');
-    }
-    if (section.padding) {
-      const padding = spacingToString(section.padding);
-      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");
-    return `
-<mj-column ${finishAttributes(attrs, cssClasses, column.extraAttributes)}>
-  ${blocks}
-</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" 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 "";
-    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 = [];
-    if (block.align) {
-      attrs.push(`align="${block.align}"`);
-      inlineStyles.push(`text-align:${block.align}`);
-    }
-    if (block.color) {
-      attrs.push(`color="${block.color}"`);
-      inlineStyles.push(`color:${block.color}`);
-    }
-    if (block.fontSize) {
-      attrs.push(`font-size="${block.fontSize}"`);
-      inlineStyles.push(`font-size:${block.fontSize}`);
-    }
-    if (block.fontFamily) {
-      attrs.push(`font-family="${block.fontFamily}"`);
-      inlineStyles.push(`font-family:${block.fontFamily}`);
-    }
-    if (block.lineHeight) {
-      attrs.push(`line-height="${block.lineHeight}"`);
-      inlineStyles.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,${Buffer.from(svg).toString("base64")}`;
-  }
-  /**
-   * 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}">${block.html}</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();
-  }
 };
 function createMJMLCompiler() {
   return new MJMLCompiler();
@@ -852,10 +59,10 @@ var MJMLExporter = class {
   /**
    * Export template to MJML + HTML
    */
-  export(template) {
+  async export(template) {
     const mjml = this.exportMJML(template);
     try {
-      const result = mjml2html2(mjml, {
+      const result = await mjml2html2(mjml, {
         // Never resolve <mj-include>: see MJMLCompiler.compile.
         ignoreIncludes: true,
         validationLevel: this.options.validationLevel,
@@ -1141,6 +348,12 @@ function decodeEditorData(value) {
     return null;
   }
 }
+function subtractPx(a, b) {
+  const px = (v) => v === "0" ? 0 : /^-?\d+(\.\d+)?px$/.test(v) ? Number.parseFloat(v) : NaN;
+  const diff = px(a) - px(b);
+  if (Number.isNaN(diff) || diff < 0) return void 0;
+  return diff === 0 ? "0" : `${Number.isInteger(diff) ? diff : Number(diff.toFixed(2))}px`;
+}
 function parsePadding(value) {
   const parts = value.trim().split(/\s+/);
   if (parts.length < 1 || parts.length > 4 || parts.some((p) => !/^-?[0-9.]+(px|%|em|rem)?$/.test(p))) return null;
@@ -1447,6 +660,24 @@ var Importer = class {
     if (typeof node.content === "string" && node.content.trim()) {
       this.warn("stray_text", "info", path, node, "Text directly in mj-wrapper is ignored by MJML, and by the import.");
     }
+    if (wrapper.gap) {
+      let first = true;
+      for (const section of wrapper.sections) {
+        if (section.bodyRaw) continue;
+        if (first) {
+          first = false;
+          continue;
+        }
+        const top = section.padding?.top;
+        if (!top) continue;
+        const without = subtractPx(top, wrapper.gap);
+        if (without === void 0) continue;
+        const padding = { ...section.padding, top: without };
+        const isDefault = padding.top === "20px" && (padding.right ?? "0") === "0" && padding.bottom === "20px" && (padding.left ?? "0") === "0";
+        if (isDefault) delete section.padding;
+        else section.padding = padding;
+      }
+    }
     return wrapper;
   }
   section(node, path) {
@@ -1843,7 +1074,7 @@ var Importer = class {
     return block;
   }
   // Fallbacks: compile the whole source once, with each fallback marked, and cut them out.
-  resolveFallbacks(metadata) {
+  async resolveFallbacks(metadata) {
     if (this.fallbacks.length === 0) return;
     const marker = (i, edge) => ({
       tagName: "mj-raw",
@@ -1857,7 +1088,7 @@ var Importer = class {
     }
     let html = "";
     try {
-      html = mjml2html3(serialize(this.root), { ignoreIncludes: true, validationLevel: "skip", minify: false, keepComments: true }).html;
+      html = (await mjml2html3(serialize(this.root), { ignoreIncludes: true, validationLevel: "skip", minify: false, keepComments: true })).html;
     } catch {
       html = "";
     }
@@ -1921,7 +1152,7 @@ function supportingCss(fullHtml, fragments, breakpoint = "480px") {
   }
   return out.join("\n");
 }
-function importMjml(source) {
+async function importMjml(source) {
   if (typeof source !== "string") throw new MjmlImportError("not_mjml", "The MJML must be a string.");
   scanMjml(source, ENDING_TAGS);
   const root = parseMjml(source);
@@ -1937,7 +1168,7 @@ function importMjml(source) {
   }
   const metadata = importer.head(head, body);
   const sections = importer.body(body);
-  importer.resolveFallbacks(metadata);
+  await importer.resolveFallbacks(metadata);
   importer.summarize();
   const document = { version: CURRENT_TEMPLATE_VERSION, metadata, sections };
   try {
@@ -1951,16 +1182,23 @@ function importMjml(source) {
 export {
   DEFAULT_MJML_ATTRIBUTES,
   EDITOR_DATA_ATTRIBUTE,
+  EDITOR_MARKER,
   MAX_MJML_BYTES,
   MAX_MJML_DEPTH,
   MAX_MJML_ELEMENTS,
   MJMLCompiler,
   MJMLExporter,
+  MjmlBuilder,
   MjmlImportError,
+  addPx,
+  base64Utf8,
   createMJMLCompiler,
   createMJMLExporter,
   encodeEditorData,
   exportTemplate,
   importMjml,
-  isMjmlImportError
+  isMjmlImportError,
+  mjmlOptions,
+  paddingWithGap,
+  stripEditorMarkup
 };