@marlinjai/email-editor-core 0.2.0

package/dist/server.mjs

@@ -0,0 +1,1966 @@
+import {
+  CURRENT_TEMPLATE_VERSION,
+  allSections,
+  buildGradientCSS,
+  isLeafBlockType,
+  isTemplateMigrationError,
+  isWrapper,
+  migrateTemplate
+} from "./chunk-2ZL7A2I6.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"
+    };
+  }
+  /**
+   * Compile email template to MJML and HTML
+   */
+  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: {} } : {}
+      });
+      return {
+        mjml,
+        html: result.html,
+        errors: result.errors.length > 0 ? result.errors.map((e) => e.formattedMessage) : void 0
+      };
+    } catch (error) {
+      return {
+        mjml: "",
+        html: "",
+        errors: [error instanceof Error ? error.message : "Unknown compilation error"]
+      };
+    }
+  }
+  /**
+   * 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();
+}
+
+// src/store/mst/MJMLExporter.ts
+import mjml2html2 from "mjml";
+import { getSnapshot } from "mobx-state-tree";
+var MJMLExporter = class {
+  constructor(options = {}) {
+    this.compiler = new MJMLCompiler();
+    this.options = {
+      validationLevel: options.validationLevel || "soft",
+      minify: options.minify ?? false,
+      beautify: options.beautify ?? false
+    };
+  }
+  /**
+   * Export template to MJML + HTML
+   */
+  export(template) {
+    const mjml = this.exportMJML(template);
+    try {
+      const result = mjml2html2(mjml, {
+        // Never resolve <mj-include>: see MJMLCompiler.compile.
+        ignoreIncludes: true,
+        validationLevel: this.options.validationLevel,
+        minify: this.options.minify,
+        beautify: this.options.beautify
+      });
+      return {
+        mjml,
+        html: result.html,
+        errors: result.errors.length > 0 ? result.errors.map((e) => e.formattedMessage) : void 0
+      };
+    } catch (error) {
+      return { mjml, html: "", errors: [error instanceof Error ? error.message : "Unknown compilation error"] };
+    }
+  }
+  /**
+   * Export only MJML (without HTML compilation)
+   */
+  exportMJML(template) {
+    return this.compiler.toMJML(JSON.parse(JSON.stringify(getSnapshot(template))));
+  }
+};
+function createMJMLExporter(options) {
+  return new MJMLExporter(options);
+}
+function exportTemplate(template, options) {
+  const exporter = new MJMLExporter(options);
+  return exporter.export(template);
+}
+
+// src/importer/importMjml.ts
+import mjml2html3 from "mjml";
+import { nanoid } from "nanoid";
+
+// src/importer/types.ts
+var MAX_MJML_BYTES = 512 * 1024;
+var MAX_MJML_DEPTH = 32;
+var MAX_MJML_ELEMENTS = 5e3;
+var MjmlImportError = class extends Error {
+  constructor(code, message, position = {}) {
+    super(position.line !== void 0 ? `Line ${position.line}${position.column !== void 0 ? `, column ${position.column}` : ""}: ${message}` : message);
+    this.name = "MjmlImportError";
+    this.code = code;
+    this.line = position.line;
+    this.column = position.column;
+  }
+  /** A plain object that survives a worker thread boundary. */
+  toJSON() {
+    return { code: this.code, message: this.message, line: this.line, column: this.column };
+  }
+};
+function isMjmlImportError(error) {
+  return error instanceof MjmlImportError;
+}
+
+// src/importer/scan.ts
+function locator(source) {
+  const starts = [0];
+  for (let i = 0; i < source.length; i++) if (source.charCodeAt(i) === 10) starts.push(i + 1);
+  return (index) => {
+    let lo = 0;
+    let hi = starts.length - 1;
+    while (lo < hi) {
+      const mid = lo + hi + 1 >> 1;
+      if (starts[mid] <= index) lo = mid;
+      else hi = mid - 1;
+    }
+    return { line: lo + 1, column: index - starts[lo] + 1 };
+  };
+}
+var NAME = /[A-Za-z_][A-Za-z0-9_.:-]*/y;
+var ATTRIBUTE = /\s+([^\s=/>"'<]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/y;
+var TAG_END = /\s*(\/?)>/y;
+function scanMjml(source, endingTags) {
+  if (Buffer.byteLength(source, "utf8") > MAX_MJML_BYTES) {
+    throw new MjmlImportError("too_large", `The MJML is larger than ${MAX_MJML_BYTES} bytes.`);
+  }
+  const at = locator(source);
+  const include = /<\s*mj-include\b/i.exec(source);
+  if (include) {
+    throw new MjmlImportError(
+      "include_not_supported",
+      "mj-include is not supported: an import has no files to include. Paste the included MJML in its place.",
+      at(include.index)
+    );
+  }
+  const fail = (code, message, index) => {
+    throw new MjmlImportError(code, message, at(index));
+  };
+  const stack = [];
+  let elements = 0;
+  let rootClosed = false;
+  let rootSeen = false;
+  let i = 0;
+  const skipPast = (terminator, from, what) => {
+    const end = source.indexOf(terminator, from);
+    if (end < 0) fail("invalid_xml", `${what} is never closed.`, from);
+    return end + terminator.length;
+  };
+  while (i < source.length) {
+    const lt = source.indexOf("<", i);
+    const textEnd = lt < 0 ? source.length : lt;
+    if (source.slice(i, textEnd).trim() !== "" && (stack.length === 0 || rootClosed)) {
+      fail(rootSeen ? "invalid_xml" : "not_mjml", rootSeen ? "Text after the closing </mjml>." : "The document must start with <mjml>.", i + source.slice(i, textEnd).search(/\S/));
+    }
+    if (lt < 0) break;
+    i = lt;
+    if (source.startsWith("<!--", i)) {
+      i = skipPast("-->", i + 4, "A comment");
+      continue;
+    }
+    if (source.startsWith("<![CDATA[", i)) {
+      i = skipPast("]]>", i + 9, "A CDATA section");
+      continue;
+    }
+    if (source.startsWith("<?", i)) {
+      if (rootSeen) fail("invalid_xml", "A processing instruction inside the document.", i);
+      i = skipPast("?>", i + 2, "A processing instruction");
+      continue;
+    }
+    if (source.startsWith("<!", i)) {
+      if (rootSeen) fail("invalid_xml", "A declaration inside the document.", i);
+      i = skipPast(">", i + 2, "A declaration");
+      continue;
+    }
+    const closing = source[i + 1] === "/";
+    NAME.lastIndex = i + (closing ? 2 : 1);
+    const nameMatch = NAME.exec(source);
+    if (!nameMatch) fail("invalid_xml", 'A "<" that does not start a tag. Write it as &lt; outside content.', i);
+    const name = nameMatch[0];
+    let cursor = NAME.lastIndex;
+    if (closing) {
+      TAG_END.lastIndex = cursor;
+      const end2 = TAG_END.exec(source);
+      if (!end2 || end2[1] === "/") fail("invalid_xml", `The closing tag </${name}> is malformed.`, i);
+      const open2 = stack.pop();
+      if (!open2) fail("invalid_xml", `</${name}> closes nothing.`, i);
+      if (open2.name !== name) {
+        const where = at(open2.index);
+        fail("invalid_xml", `</${name}> does not match <${open2.name}> opened on line ${where.line}, column ${where.column}.`, i);
+      }
+      if (stack.length === 0) rootClosed = true;
+      i = TAG_END.lastIndex;
+      continue;
+    }
+    if (rootClosed) fail("invalid_xml", `<${name}> after the closing </mjml>.`, i);
+    if (!rootSeen) {
+      if (name !== "mjml") fail("not_mjml", `The document must start with <mjml>, not <${name}>.`, i);
+      rootSeen = true;
+    }
+    if (name === "mj-include") {
+      fail("include_not_supported", "mj-include is not supported: an import has no files to include. Paste the included MJML in its place.", i);
+    }
+    const seen = /* @__PURE__ */ new Set();
+    for (; ; ) {
+      ATTRIBUTE.lastIndex = cursor;
+      const attr = ATTRIBUTE.exec(source);
+      if (!attr) break;
+      if (seen.has(attr[1])) fail("invalid_xml", `The attribute "${attr[1]}" appears twice on <${name}>.`, cursor);
+      seen.add(attr[1]);
+      cursor = ATTRIBUTE.lastIndex;
+    }
+    TAG_END.lastIndex = cursor;
+    const end = TAG_END.exec(source);
+    if (!end) fail("invalid_xml", `The tag <${name}> is malformed (an unquoted or unclosed attribute value?).`, cursor);
+    i = TAG_END.lastIndex;
+    elements += 1;
+    if (elements > MAX_MJML_ELEMENTS) fail("too_many_elements", `More than ${MAX_MJML_ELEMENTS} MJML elements.`, i);
+    if (end[1] === "/") {
+      if (stack.length === 0) rootClosed = true;
+      continue;
+    }
+    if (stack.length + 1 > MAX_MJML_DEPTH) fail("too_deep", `MJML elements are nested more than ${MAX_MJML_DEPTH} deep.`, i);
+    if (endingTags.has(name)) {
+      let depth = 1;
+      const token = new RegExp(`<!--|<(/?)${name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(?=[\\s/>])`, "g");
+      token.lastIndex = i;
+      let m;
+      while (m = token.exec(source)) {
+        if (m[0] === "<!--") {
+          const close = source.indexOf("-->", m.index + 4);
+          if (close < 0) fail("invalid_xml", "A comment is never closed.", m.index);
+          token.lastIndex = close + 3;
+          continue;
+        }
+        const gt = source.indexOf(">", m.index);
+        if (gt < 0) fail("invalid_xml", `The tag at this position is never closed.`, m.index);
+        if (m[1] === "/") depth -= 1;
+        else if (source[gt - 1] !== "/") depth += 1;
+        token.lastIndex = gt + 1;
+        if (depth === 0) break;
+      }
+      if (depth !== 0) fail("invalid_xml", `<${name}> is never closed.`, i);
+      i = token.lastIndex;
+      if (stack.length === 0) rootClosed = true;
+      continue;
+    }
+    stack.push({ name, index: lt });
+  }
+  if (!rootSeen) fail("not_mjml", "The document is empty: it must start with <mjml>.", 0);
+  const open = stack.pop();
+  if (open) fail("invalid_xml", `<${open.name}> is never closed.`, open.index);
+}
+
+// src/importer/tree.ts
+import parseXmlModule from "mjml-parser-xml";
+import presetModule from "mjml-preset-core";
+function unwrap(mod) {
+  const m = mod;
+  return m && typeof m === "object" && "default" in m && m.default ? m.default : mod;
+}
+var parseXml = unwrap(parseXmlModule);
+var preset = unwrap(presetModule);
+var componentName = (c) => c.getTagName ? c.getTagName() : c.componentName ?? "";
+var COMPONENTS = Object.fromEntries(preset.components.map((c) => [componentName(c), c]));
+var ENDING_TAGS = new Set(
+  preset.components.filter((c) => c.endingTag).map((c) => componentName(c))
+);
+var KNOWN_TAGS = /* @__PURE__ */ new Set(["mjml", ...Object.keys(COMPONENTS), "mj-all", "mj-class", "mj-selector", "mj-html-attribute"]);
+function normalize(node) {
+  const attributes = {};
+  for (const [k, v] of Object.entries(node.attributes ?? {})) attributes[k] = String(v).replace(/"/g, "&quot;");
+  return {
+    tagName: node.tagName,
+    attributes,
+    content: node.content,
+    children: (node.children ?? []).map(normalize),
+    line: node.line
+  };
+}
+function parseMjml(source) {
+  const root = parseXml(source, {
+    components: COMPONENTS,
+    keepComments: true,
+    ignoreIncludes: true,
+    convertBooleans: false,
+    addEmptyAttributes: true
+  });
+  return normalize(root);
+}
+function serialize(node) {
+  const attrs = Object.entries(node.attributes).map(([k, v]) => ` ${k}="${v}"`).join("");
+  const inner = node.content !== void 0 ? node.content : node.children.map(serialize).join("");
+  if (inner === "" && node.children.length === 0 && node.content === void 0) return `<${node.tagName}${attrs} />`;
+  return `<${node.tagName}${attrs}>${inner}</${node.tagName}>`;
+}
+function isComment(node) {
+  return node.tagName === "mj-raw" && Object.keys(node.attributes).length === 0 && node.children.length === 0 && /^<!--[\s\S]*-->$/.test(node.content ?? "");
+}
+
+// src/importer/importMjml.ts
+var ID = /^[A-Za-z0-9_-]{1,64}$/;
+var ATTRIBUTE_NAME = /^[a-z][a-z0-9-]*$/;
+var FRAGMENT_LIMIT = 2e3;
+var EDITOR_SUB_COLUMN_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;
+  }
+}`;
+var EDITOR_COMMENTS = /* @__PURE__ */ new Set(["<!-- Social Icons (horizontal) -->", "<!-- Social Icons (vertical) -->"]);
+var SOCIAL_PLATFORMS = /* @__PURE__ */ new Set(["facebook", "twitter", "instagram", "linkedin", "youtube", "pinterest", "github"]);
+var SOCIAL_COLORS = {
+  facebook: "#1877F2",
+  twitter: "#000000",
+  instagram: "#E4405F",
+  linkedin: "#0A66C2",
+  youtube: "#FF0000",
+  pinterest: "#BD081C",
+  github: "#181717"
+};
+var squash = (s) => s.replace(/\s+/g, " ").trim();
+var shorten = (s) => s.length > FRAGMENT_LIMIT ? `${s.slice(0, FRAGMENT_LIMIT)}...` : s;
+function decodeEditorData(value) {
+  if (!value || !/^[A-Za-z0-9+/=]+$/.test(value)) return null;
+  try {
+    return JSON.parse(Buffer.from(value, "base64").toString("utf8"));
+  } catch {
+    return null;
+  }
+}
+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;
+  const [top, right = top, bottom = top, left = right] = parts;
+  const all = { top, right, bottom, left };
+  const out = {};
+  for (const side of ["top", "right", "bottom", "left"]) if (all[side] !== "0") out[side] = all[side];
+  if (Object.keys(out).length === 0) return { top: "0", right: "0", bottom: "0", left: "0" };
+  return out;
+}
+function parseGradientRules(css) {
+  const rules = css.trim().split("\n").filter((l) => l.trim() !== "");
+  const out = /* @__PURE__ */ new Map();
+  for (const rule of rules) {
+    const m = /^\.el-grad-([A-Za-z0-9_-]+) \{ background-image: (linear|radial)-gradient\((?:(-?[0-9.]+)deg|circle), (.*)\); \}$/.exec(rule.trim());
+    if (!m) return null;
+    const stops = m[4].split(/,\s(?![^()]*\))/).map((s) => {
+      const sm = /^(.*) (-?[0-9.]+)%$/.exec(s.trim());
+      return sm ? { color: sm[1], position: Number(sm[2]) } : null;
+    });
+    if (stops.some((s) => s === null)) return null;
+    out.set(m[1], { type: m[2], angle: m[3] ? Number(m[3]) : 0, stops });
+  }
+  return out;
+}
+var Importer = class {
+  constructor(root) {
+    this.root = root;
+    this.warnings = [];
+    this.usedIds = /* @__PURE__ */ new Set();
+    this.fallbacks = [];
+    this.gradients = /* @__PURE__ */ new Map();
+    this.kept = /* @__PURE__ */ new Map();
+    this.usesMjClass = false;
+    this.hasOwnDefaults = false;
+  }
+  warn(code, severity, path, node, message, withFragment = false) {
+    this.warnings.push({
+      severity,
+      code,
+      path,
+      line: node?.line,
+      message,
+      ...withFragment && node ? { fragment: shorten(serialize(node)) } : {}
+    });
+  }
+  id(candidate) {
+    if (candidate && ID.test(candidate) && !this.usedIds.has(candidate)) {
+      this.usedIds.add(candidate);
+      return candidate;
+    }
+    let fresh = nanoid();
+    while (this.usedIds.has(fresh)) fresh = nanoid();
+    this.usedIds.add(fresh);
+    return fresh;
+  }
+  /** `css-class="el-<type> el-<id> ..."`: the editor's id, and the author's own classes. */
+  identity(attrs, marker) {
+    const classes = (attrs["css-class"] ?? "").split(/\s+/).filter(Boolean);
+    delete attrs["css-class"];
+    if (classes[0] === marker && classes[1]?.startsWith("el-")) {
+      const id = classes[1].slice(3);
+      return { id, classes: classes.slice(2).filter((c) => c !== `el-grad-${id}`) };
+    }
+    return { classes };
+  }
+  /** Whatever is left of `attrs` (plus the author's classes), as kept attributes. */
+  extras(attrs, classes, path, node) {
+    const out = {};
+    for (const [name, value] of Object.entries(attrs)) {
+      if (!ATTRIBUTE_NAME.test(name)) {
+        this.warn("attribute_dropped", "info", path, node, `The attribute "${name}" is not an MJML attribute name; MJML ignored it and so does the editor.`);
+        continue;
+      }
+      if (name === "mj-class") this.usesMjClass = true;
+      out[name] = value;
+      this.kept.set(name, (this.kept.get(name) ?? 0) + 1);
+    }
+    if (classes.length > 0) {
+      out["css-class"] = classes.join(" ");
+      this.kept.set("css-class", (this.kept.get("css-class") ?? 0) + 1);
+    }
+    return Object.keys(out).length > 0 ? out : void 0;
+  }
+  /** Marks `node` (a child of `parent`) to be kept as compiled HTML. */
+  fallback(node, parent, path, reason, unknown = false) {
+    const block = { id: this.id(), type: "raw", html: "" };
+    this.fallbacks.push({ node, parent, block, unknown });
+    if (unknown) {
+      this.warn("unknown_component", "warning", path, node, `<${node.tagName}> is not an MJML component, so MJML renders nothing for it. Its source is kept, as a comment, in a Raw block.`, true);
+    } else {
+      this.warn("kept_as_html", "warning", path, node, `${reason} It is kept as compiled HTML in a Raw block: the mail looks the same, but it is not editable as a block. Rebuild it in the editor to edit it.`, true);
+    }
+    return block;
+  }
+  // Head
+  head(head, body) {
+    const metadata = {};
+    const mjmlHead = {};
+    const fonts = [];
+    const css = [];
+    const inline = [];
+    const raw = [];
+    let attributes;
+    for (const [index, node] of (head?.children ?? []).entries()) {
+      const path = `mj-head > ${node.tagName}[${index + 1}]`;
+      const a = node.attributes;
+      switch (node.tagName) {
+        case "mj-title":
+          metadata.title = node.content ?? "";
+          break;
+        case "mj-preview":
+          metadata.previewText = node.content ?? "";
+          break;
+        case "mj-font":
+          if (a.name && a.href && Object.keys(a).length === 2) fonts.push({ name: a.name, href: a.href });
+          else raw.push(serialize(node));
+          break;
+        case "mj-breakpoint":
+          if (a.width && Object.keys(a).length === 1) metadata.breakpoint = a.width;
+          else raw.push(serialize(node));
+          break;
+        case "mj-style": {
+          const content = node.content ?? "";
+          const keys = Object.keys(a);
+          if (keys.length === 1 && a.inline === "inline") inline.push(content);
+          else if (keys.length > 0) {
+            raw.push(serialize(node));
+            this.warn("head_element_kept", "info", path, node, "An mj-style with attributes the editor has no field for is kept as it is.");
+          } else if (squash(content) === squash(EDITOR_SUB_COLUMN_STYLE)) {
+          } else {
+            const gradients = parseGradientRules(content);
+            if (gradients && gradients.size > 0) for (const [id, g] of gradients) this.gradients.set(id, g);
+            else css.push(content);
+          }
+          break;
+        }
+        case "mj-attributes": {
+          const markup = node.children.map(serialize).join("");
+          attributes = (attributes ?? "") + markup;
+          break;
+        }
+        default:
+          raw.push(serialize(node));
+          if (isComment(node)) break;
+          if (!KNOWN_TAGS.has(node.tagName)) {
+            this.warn("unknown_component", "warning", path, node, `<${node.tagName}> is not an MJML head element; it is kept as it is, and MJML ignores it.`, true);
+          } else {
+            this.warn("head_element_kept", "info", path, node, `<${node.tagName}> has no field in the editor; it is kept as it is and applies to the mail.`);
+          }
+      }
+    }
+    if (fonts.length > 0) metadata.fonts = fonts;
+    if (css.length > 0) metadata.customCSS = css.join("\n");
+    if (inline.length > 0) metadata.inlineCSS = inline.join("\n");
+    const isEditorDefault = attributes !== void 0 && squash(attributes) === squash(DEFAULT_MJML_ATTRIBUTES.replace(/\s*\n\s*/g, ""));
+    if (!isEditorDefault) {
+      mjmlHead.attributes = attributes ?? "";
+      if ((attributes ?? "").trim() !== "") this.hasOwnDefaults = true;
+    }
+    if (raw.length > 0) mjmlHead.headRaw = raw.join("\n");
+    const bodyAttrs = { ...body.attributes };
+    const bodyExtra = this.extras(bodyAttrs, [], "mj-body", body);
+    if (bodyExtra) mjmlHead.bodyAttributes = bodyExtra;
+    if (Object.keys(mjmlHead).length > 0) metadata.mjmlHead = mjmlHead;
+    return metadata;
+  }
+  // Body
+  body(body) {
+    const items = [];
+    const raw = this.rawRuns((section) => items.push(section));
+    const counts = /* @__PURE__ */ new Map();
+    for (const node of body.children) {
+      const n = (counts.get(node.tagName) ?? 0) + 1;
+      counts.set(node.tagName, n);
+      const path = `mj-body > ${node.tagName}[${n}]`;
+      if (node.tagName === "mj-raw") {
+        if (isComment(node) && EDITOR_COMMENTS.has(node.content.trim())) continue;
+        raw.push(this.raw(node, body, path));
+        continue;
+      }
+      if (node.tagName === "mj-wrapper") {
+        raw.end();
+        items.push(this.wrapper(node, path));
+        continue;
+      }
+      if (node.tagName === "mj-section") {
+        const section = this.section(node, path);
+        if (section) {
+          raw.end();
+          items.push(section);
+        } else {
+          raw.push(this.fallback(node, body, path, "The editor cannot hold this section as it is (see the other warnings for it)."));
+        }
+        continue;
+      }
+      if (node.tagName === "mj-hero") {
+        raw.push(this.fallback(node, body, path, "The editor's Hero block has no content of its own, so an mj-hero with text and buttons cannot become one."));
+        continue;
+      }
+      if (!KNOWN_TAGS.has(node.tagName)) {
+        raw.push(this.fallback(node, body, path, "", true));
+        continue;
+      }
+      raw.push(this.fallback(node, body, path, `<${node.tagName}> does not belong directly in mj-body; MJML renders it as it can.`));
+    }
+    if (typeof body.content === "string" && body.content.trim()) {
+      this.warn("stray_text", "info", "mj-body", body, "Text directly in mj-body is ignored by MJML, and by the import.");
+    }
+    return items;
+  }
+  /**
+   * Consecutive raw markup (in mj-body or in an mj-wrapper) collects in one
+   * raw-only section (`bodyRaw`), which the compiler emits back in place as
+   * `mj-raw`; any other child ends the run.
+   */
+  rawRuns(add) {
+    let run = null;
+    return {
+      push: (block) => {
+        if (!run) {
+          run = [];
+          add({ id: this.id(), type: "section", bodyRaw: true, columns: [{ id: this.id(), width: 100, blocks: run }] });
+        }
+        run.push(block);
+      },
+      end: () => {
+        run = null;
+      }
+    };
+  }
+  /** An `mj-raw` child of mj-body or mj-wrapper: its markup, or its compiled output when it has attributes the editor cannot keep. */
+  raw(node, parent, path) {
+    const attrs = { ...node.attributes };
+    const { id, classes } = this.identity(attrs, "el-raw");
+    if (Object.keys(attrs).length > 0 || classes.length > 0) {
+      return this.fallback(node, parent, path, "This mj-raw has attributes (such as position) the editor cannot keep.");
+    }
+    return { id: this.id(id), type: "raw", html: node.content ?? "" };
+  }
+  wrapper(node, path) {
+    const attrs = { ...node.attributes };
+    const { id, classes } = this.identity(attrs, "el-wrapper");
+    const wrapper = { id: this.id(id), type: "wrapper", sections: [] };
+    const gradient = id ? this.gradients.get(id) : void 0;
+    if (gradient) {
+      wrapper.backgroundGradient = gradient;
+      delete attrs["background-color"];
+    }
+    this.mapCommon(attrs, wrapper, {
+      "background-color": "backgroundColor",
+      "background-url": "backgroundImage",
+      "background-position": "backgroundPosition",
+      "background-size": "backgroundSize",
+      border: "border",
+      "border-top": "borderTop",
+      "border-right": "borderRight",
+      "border-bottom": "borderBottom",
+      "border-left": "borderLeft",
+      "border-radius": "borderRadius"
+    });
+    this.mapEnum(attrs, wrapper, "background-repeat", "backgroundRepeat", ["repeat", "no-repeat"]);
+    this.mapEnum(attrs, wrapper, "text-align", "textAlign", ["left", "center", "right"]);
+    if (attrs["full-width"] === "full-width") {
+      wrapper.fullWidth = true;
+      delete attrs["full-width"];
+    }
+    if (attrs.gap !== void 0 && /^[0-9]+(\.[0-9]+)?px$/.test(attrs.gap)) {
+      wrapper.gap = attrs.gap;
+      delete attrs.gap;
+    }
+    this.mapPadding(attrs, wrapper);
+    if (classes.length > 0) wrapper.cssClass = classes.join(" ");
+    const extra = this.extras(attrs, [], path, node);
+    if (extra) wrapper.extraAttributes = extra;
+    const raw = this.rawRuns((section) => wrapper.sections.push(section));
+    const counts = /* @__PURE__ */ new Map();
+    for (const child of node.children) {
+      const n = (counts.get(child.tagName) ?? 0) + 1;
+      counts.set(child.tagName, n);
+      const childPath = `${path} > ${child.tagName}[${n}]`;
+      if (child.tagName === "mj-raw") {
+        if (isComment(child) && EDITOR_COMMENTS.has(child.content.trim())) continue;
+        raw.push(this.raw(child, node, childPath));
+        continue;
+      }
+      if (child.tagName === "mj-section") {
+        const section = this.section(child, childPath);
+        if (section) {
+          raw.end();
+          wrapper.sections.push(section);
+        } else {
+          raw.push(this.fallback(child, node, childPath, "The editor cannot hold this section as it is (see the other warnings for it); it stays in its wrapper."));
+        }
+        continue;
+      }
+      if (!KNOWN_TAGS.has(child.tagName)) {
+        raw.push(this.fallback(child, node, childPath, "", true));
+        continue;
+      }
+      const why = child.tagName === "mj-hero" ? "The editor's Hero block has no content of its own, so an mj-hero with text and buttons cannot become one; it stays in its wrapper." : child.tagName === "mj-wrapper" ? "A wrapper cannot hold another wrapper; MJML renders this one as it can, and it stays in its outer wrapper." : `<${child.tagName}> does not belong directly in mj-wrapper; MJML renders it as it can, and it stays in its wrapper.`;
+      raw.push(this.fallback(child, node, childPath, why));
+    }
+    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.");
+    }
+    return wrapper;
+  }
+  section(node, path) {
+    const attrs = { ...node.attributes };
+    const { id, classes } = this.identity(attrs, "el-section");
+    const sectionId = this.id(id);
+    const section = { id: sectionId, type: "section", columns: [] };
+    const gradient = id ? this.gradients.get(id) : void 0;
+    if (gradient) {
+      section.backgroundGradient = gradient;
+      delete attrs["background-color"];
+    }
+    this.mapCommon(attrs, section, {
+      "background-color": "backgroundColor",
+      "background-url": "backgroundImage",
+      "background-position": "backgroundPosition",
+      "background-size": "backgroundSize"
+    });
+    if (attrs["background-repeat"] === "repeat" || attrs["background-repeat"] === "no-repeat") {
+      section.backgroundRepeat = attrs["background-repeat"];
+      delete attrs["background-repeat"];
+    }
+    if (attrs["full-width"] === "full-width") {
+      section.fullWidth = true;
+      delete attrs["full-width"];
+    }
+    this.mapPadding(attrs, section);
+    const children = [];
+    for (const child of node.children) {
+      if (isComment(child)) {
+        if (/^<!--\[if/.test(child.content ?? "")) return null;
+        this.warn("comment_dropped", "info", `${path} > comment`, child, "A comment between columns is left out: it renders nothing.");
+        continue;
+      }
+      children.push(child);
+    }
+    let columnNodes = children;
+    let parent = node;
+    if (children.length === 1 && children[0].tagName === "mj-group") {
+      const group = children[0];
+      if (Object.keys(group.attributes).length > 0) return null;
+      columnNodes = group.children.filter((c) => {
+        if (!isComment(c)) return true;
+        if (/^<!--\[if/.test(c.content ?? "")) columnNodes = [];
+        return false;
+      });
+      parent = group;
+      if (columnNodes.length > 1) section.noStack = true;
+    }
+    if (columnNodes.length === 0 || columnNodes.some((c) => c.tagName !== "mj-column")) return null;
+    const counts = /* @__PURE__ */ new Map();
+    for (const [index, col] of columnNodes.entries()) {
+      const n = (counts.get(col.tagName) ?? 0) + 1;
+      counts.set(col.tagName, n);
+      section.columns.push(this.column(col, columnNodes.length, `${path}${parent !== node ? " > mj-group[1]" : ""} > mj-column[${index + 1}]`));
+    }
+    const extra = this.extras(attrs, classes, path, node);
+    if (extra) section.extraAttributes = extra;
+    return section;
+  }
+  column(node, siblings, path) {
+    const attrs = { ...node.attributes };
+    const { id, classes } = this.identity(attrs, "el-column");
+    const column = { id: this.id(id), blocks: [] };
+    const gradient = id ? this.gradients.get(id) : void 0;
+    if (gradient) {
+      column.backgroundGradient = gradient;
+      delete attrs["background-color"];
+    }
+    const width = attrs.width;
+    if (width === void 0) {
+      if (!id) column.width = 100 / siblings;
+    } else if (/^[0-9]+(\.[0-9]+)?%$/.test(width) && Number.parseFloat(width) <= 100) {
+      column.width = Number.parseFloat(width);
+      delete attrs.width;
+    } else {
+      this.warn("column_width_px", "info", path, node, `The column width "${width}" is kept as it is; the editor's width control works in percent.`);
+    }
+    this.mapCommon(attrs, column, { "background-color": "backgroundColor" });
+    if (attrs["vertical-align"] === "top" || attrs["vertical-align"] === "middle" || attrs["vertical-align"] === "bottom") {
+      column.verticalAlign = attrs["vertical-align"];
+      delete attrs["vertical-align"];
+    }
+    this.mapPadding(attrs, column);
+    const only = node.children.length === 1 ? node.children[0] : void 0;
+    if (only?.tagName === "mj-raw") {
+      const m = /^\s*<table role="presentation" class="ee-sub-cols" data-ee-subcols="([A-Za-z0-9+/=]+)"/.exec(only.content ?? "");
+      const subs = decodeEditorData(m?.[1]);
+      if (subs && Array.isArray(subs) && subs.length > 0) {
+        column.subColumns = subs;
+        for (const s of subs) this.id(s.id);
+        const extra2 = this.extras(attrs, classes, path, node);
+        if (extra2) column.extraAttributes = extra2;
+        return column;
+      }
+    }
+    const counts = /* @__PURE__ */ new Map();
+    const children = node.children;
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      const n = (counts.get(child.tagName) ?? 0) + 1;
+      counts.set(child.tagName, n);
+      const childPath = `${path} > ${child.tagName}[${n}]`;
+      if (isComment(child) && EDITOR_COMMENTS.has(child.content.trim())) continue;
+      const social = this.socialButtons(children, i);
+      if (social) {
+        column.blocks.push(social.block);
+        i = social.end - 1;
+        continue;
+      }
+      const block = this.block(child, childPath);
+      column.blocks.push(block ?? this.fallback(child, node, childPath, this.fallbackReason(child), !KNOWN_TAGS.has(child.tagName)));
+    }
+    const extra = this.extras(attrs, classes, path, node);
+    if (extra) column.extraAttributes = extra;
+    return column;
+  }
+  fallbackReason(node) {
+    switch (node.tagName) {
+      case "mj-social":
+        return "The editor's Social block draws its own icons, so an mj-social would look different as one.";
+      case "mj-table":
+        return "The editor's Table block styles every cell itself, so this table would look different as one.";
+      case "mj-hero":
+        return "The editor's Hero block has no content of its own.";
+      case "mj-button":
+        return "A button without a link or a label cannot be an editor Button block.";
+      case "mj-image":
+        return "An image without a src cannot be an editor Image block.";
+      default:
+        return `The editor has no block for this <${node.tagName}> as it is written.`;
+    }
+  }
+  socialButtons(children, start) {
+    const read = (node) => {
+      if (!node || node.tagName !== "mj-button") return null;
+      const classes = (node.attributes["css-class"] ?? "").split(/\s+/);
+      if (classes[0] !== "el-social-btn" || !classes[1]?.startsWith("el-")) return null;
+      const m = /^el-(.+)-([a-z]+)$/.exec(classes[1]);
+      if (!m || !SOCIAL_PLATFORMS.has(m[2])) return null;
+      return { id: m[1], platform: m[2], a: node.attributes };
+    };
+    const first = read(children[start]);
+    if (!first) return null;
+    const links = [];
+    let end = start;
+    let cur = first;
+    while (cur && cur.id === first.id) {
+      const color = cur.a["background-color"];
+      links.push({ platform: cur.platform, url: cur.a.href ?? "", ...color && color !== SOCIAL_COLORS[cur.platform] ? { color } : {} });
+      end += 1;
+      cur = read(children[end]);
+    }
+    const a = first.a;
+    const block = { id: this.id(first.id), type: "social", mode: "vertical", links };
+    if (a.width) block.iconSize = a.width;
+    if (a.padding) block.iconPadding = a.padding.split(/\s+/)[0];
+    if (a["border-radius"]) block.borderRadius = a["border-radius"];
+    if (a.align === "left" || a.align === "center" || a.align === "right") block.align = a.align;
+    return { block, end };
+  }
+  // Blocks
+  block(node, path) {
+    const attrs = { ...node.attributes };
+    switch (node.tagName) {
+      case "mj-text":
+        return this.text(node, attrs, path);
+      case "mj-image": {
+        if (!attrs.src) return null;
+        const { id, classes } = this.identity(attrs, "el-image");
+        const b = { id: this.id(id), type: "image", src: attrs.src };
+        delete attrs.src;
+        this.mapCommon(attrs, b, { alt: "alt", width: "width", height: "height", href: "href", "border-radius": "borderRadius" });
+        this.mapEnum(attrs, b, "align", "align", ["left", "center", "right"]);
+        this.mapPadding(attrs, b);
+        return this.finish(b, attrs, classes, path, node);
+      }
+      case "mj-button": {
+        const label = node.content ?? "";
+        if (!attrs.href || label.trim() === "") return null;
+        const { id, classes } = this.identity(attrs, "el-button");
+        const b = { id: this.id(id), type: "button", label, href: attrs.href };
+        delete attrs.href;
+        this.mapCommon(attrs, b, {
+          "background-color": "backgroundColor",
+          color: "color",
+          "border-radius": "borderRadius",
+          border: "border",
+          "inner-padding": "innerPadding"
+        });
+        this.mapEnum(attrs, b, "align", "align", ["left", "center", "right"]);
+        this.mapPadding(attrs, b);
+        return this.finish(b, attrs, classes, path, node);
+      }
+      case "mj-divider": {
+        const { id, classes } = this.identity(attrs, "el-divider");
+        const b = { id: this.id(id), type: "divider" };
+        this.mapCommon(attrs, b, { "border-color": "borderColor", "border-width": "borderWidth", width: "width" });
+        this.mapEnum(attrs, b, "border-style", "borderStyle", ["solid", "dashed", "dotted"]);
+        this.mapPadding(attrs, b);
+        return this.finish(b, attrs, classes, path, node);
+      }
+      case "mj-spacer": {
+        if (!attrs.height) return null;
+        const { id, classes } = this.identity(attrs, "el-spacer");
+        const b = { id: this.id(id), type: "spacer", height: attrs.height };
+        delete attrs.height;
+        return this.finish(b, attrs, classes, path, node);
+      }
+      case "mj-raw": {
+        if (isComment(node)) return { id: this.id(), type: "raw", html: node.content ?? "" };
+        const social = /^\s*<table [^>]*data-ee-social="([A-Za-z0-9+/=]+)"/.exec(node.content ?? "");
+        const decoded = decodeEditorData(social?.[1]);
+        if (decoded && decoded.type === "social" && Array.isArray(decoded.links)) {
+          return { ...decoded, id: this.id(decoded.id) };
+        }
+        const { id, classes } = this.identity(attrs, "el-raw");
+        if (Object.keys(attrs).length > 0 || classes.length > 0) return null;
+        return { id: this.id(id), type: "raw", html: node.content ?? "" };
+      }
+      case "mj-hero": {
+        const { id, classes } = this.identity(attrs, "el-hero");
+        if (!id || !attrs["background-url"]) return null;
+        const b = { id: this.id(id), type: "hero", backgroundImage: attrs["background-url"] };
+        delete attrs["background-url"];
+        this.mapCommon(attrs, b, {
+          "background-height": "backgroundHeight",
+          "background-width": "backgroundWidth",
+          "background-color": "backgroundColor"
+        });
+        this.mapEnum(attrs, b, "vertical-align", "verticalAlign", ["top", "middle", "bottom"]);
+        this.mapEnum(attrs, b, "mode", "mode", ["fixed-height", "fluid-height"]);
+        return this.finish(b, attrs, classes, path, node);
+      }
+      case "mj-accordion":
+        return this.accordion(node, attrs, path);
+      case "mj-navbar":
+        return this.navbar(node, attrs, path);
+      case "mj-carousel":
+        return this.carousel(node, attrs, path);
+      case "mj-table":
+        return this.table(node, attrs, path);
+      case "mj-wrapper": {
+        const cls = (attrs["css-class"] ?? "").trim();
+        if (cls === "el-header-wrapper") return { id: this.id(), type: "header", locked: true };
+        if (cls === "el-footer-wrapper") return { id: this.id(), type: "footer", locked: true };
+        return null;
+      }
+      default:
+        return null;
+    }
+  }
+  text(node, attrs, path) {
+    const { id, classes } = this.identity(attrs, "el-text");
+    const b = { id: this.id(id), type: "text", content: node.content ?? "" };
+    this.mapEnum(attrs, b, "align", "align", ["left", "center", "right", "justify"]);
+    this.mapCommon(attrs, b, { color: "color", "font-size": "fontSize", "font-family": "fontFamily", "line-height": "lineHeight" });
+    this.mapPadding(attrs, b);
+    const styles = [];
+    if (b.align) styles.push(`text-align:${b.align}`);
+    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 (styles.length > 0) {
+      const open = `<div style="${styles.join(";")}">`;
+      if (b.content.startsWith(open) && b.content.endsWith("</div>")) {
+        const inner = b.content.slice(open.length, -"</div>".length);
+        if (!/<\/div>/i.test(inner) || balancedDivs(inner)) b.content = inner;
+      }
+    }
+    return this.finish(b, attrs, classes, path, node);
+  }
+  accordion(node, attrs, path) {
+    const items = [];
+    for (const el of node.children) {
+      if (isComment(el)) return null;
+      if (el.tagName !== "mj-accordion-element" || Object.keys(el.attributes).length > 0) return null;
+      const parts = el.children.filter((c) => !isComment(c));
+      const title = parts.find((c) => c.tagName === "mj-accordion-title");
+      const text = parts.find((c) => c.tagName === "mj-accordion-text");
+      if (parts.length !== 2 || !title || !text || parts[0] !== title) return null;
+      if (Object.keys(title.attributes).length > 0 || Object.keys(text.attributes).length > 0) return null;
+      items.push({ title: title.content ?? "", content: text.content ?? "" });
+    }
+    const { id, classes } = this.identity(attrs, "el-accordion");
+    const b = { id: this.id(id), type: "accordion", items };
+    this.mapEnum(attrs, b, "icon-position", "iconPosition", ["left", "right"]);
+    this.mapCommon(attrs, b, { border: "borderColor", "font-family": "fontFamily" });
+    return this.finish(b, attrs, classes, path, node);
+  }
+  navbar(node, attrs, path) {
+    const links = [];
+    for (const el of node.children) {
+      if (el.tagName !== "mj-navbar-link") return null;
+      const { href, color, ...rest } = el.attributes;
+      if (!href || Object.keys(rest).length > 0) return null;
+      links.push({ href, label: el.content ?? "", ...color ? { color } : {} });
+    }
+    const { id, classes } = this.identity(attrs, "el-navbar");
+    const b = { id: this.id(id), type: "navbar", links };
+    if (attrs.hamburger === "hamburger") {
+      b.hamburger = true;
+      delete attrs.hamburger;
+    }
+    this.mapCommon(attrs, b, { "base-url": "baseUrl", "ico-color": "icoColor" });
+    this.mapEnum(attrs, b, "align", "align", ["left", "center", "right"]);
+    this.mapPadding(attrs, b);
+    return this.finish(b, attrs, classes, path, node);
+  }
+  carousel(node, attrs, path) {
+    const images = [];
+    for (const el of node.children) {
+      if (el.tagName !== "mj-carousel-image") return null;
+      const { src, alt, href, "thumbnails-src": thumbnailSrc, ...rest } = el.attributes;
+      if (!src || Object.keys(rest).length > 0) return null;
+      images.push({ src, ...alt ? { alt } : {}, ...href ? { href } : {}, ...thumbnailSrc ? { thumbnailSrc } : {} });
+    }
+    const { id, classes } = this.identity(attrs, "el-carousel");
+    const b = { id: this.id(id), type: "carousel", images };
+    this.mapEnum(attrs, b, "thumbnails", "thumbnails", ["visible", "hidden"]);
+    this.mapCommon(attrs, b, { "border-radius": "borderRadius", "icon-width": "iconWidth", "tb-border-radius": "tbBorderRadius" });
+    this.mapPadding(attrs, b);
+    return this.finish(b, attrs, classes, path, node);
+  }
+  /** Only the editor's own table (`el-table`), whose markup the compiler writes in one exact shape. */
+  table(node, attrs, path) {
+    const { id, classes } = this.identity(attrs, "el-table");
+    if (!id) return null;
+    const lines = (node.content ?? "").split("\n");
+    const head = /^<tr style="background-color: #f5f5f5;">(.*)<\/tr>$/.exec(lines[0] ?? "");
+    if (!head) return null;
+    const cells = (row, tag, style) => {
+      const out = [];
+      const open = `<${tag} style="${style}">`;
+      let rest = row;
+      while (rest.length > 0) {
+        if (!rest.startsWith(open)) return null;
+        const close = rest.indexOf(`</${tag}>`);
+        if (close < 0) return null;
+        out.push(rest.slice(open.length, close));
+        rest = rest.slice(close + tag.length + 3);
+      }
+      return out;
+    };
+    const headers = cells(head[1], "th", "padding: 8px; border-bottom: 1px solid #ddd; text-align: left;");
+    if (!headers) return null;
+    const rows = [];
+    for (const line of lines.slice(1)) {
+      const m = /^<tr>(.*)<\/tr>$/.exec(line);
+      const row = m ? cells(m[1], "td", "padding: 8px; border-bottom: 1px solid #eee;") : null;
+      if (!row) return null;
+      rows.push(row);
+    }
+    const b = { id: this.id(id), type: "table", headers, rows };
+    this.mapEnum(attrs, b, "align", "align", ["left", "center", "right"]);
+    this.mapCommon(attrs, b, {
+      color: "color",
+      "font-family": "fontFamily",
+      "font-size": "fontSize",
+      cellpadding: "cellpadding",
+      cellspacing: "cellspacing",
+      border: "border"
+    });
+    this.mapPadding(attrs, b);
+    return this.finish(b, attrs, classes, path, node);
+  }
+  // Attribute helpers
+  mapCommon(attrs, target, map) {
+    for (const [attr, field] of Object.entries(map)) {
+      if (attrs[attr] === void 0) continue;
+      target[field] = attrs[attr];
+      delete attrs[attr];
+    }
+  }
+  mapEnum(attrs, target, attr, field, allowed) {
+    const v = attrs[attr];
+    if (v !== void 0 && allowed.includes(v)) {
+      target[field] = v;
+      delete attrs[attr];
+    }
+  }
+  mapPadding(attrs, target) {
+    if (attrs.padding === void 0) return;
+    const spacing = parsePadding(attrs.padding);
+    if (spacing) {
+      target.padding = spacing;
+      delete attrs.padding;
+    }
+  }
+  finish(block, attrs, classes, path, node) {
+    const extra = this.extras(attrs, classes, path, node);
+    if (extra) block.extraAttributes = extra;
+    return block;
+  }
+  // Fallbacks: compile the whole source once, with each fallback marked, and cut them out.
+  resolveFallbacks(metadata) {
+    if (this.fallbacks.length === 0) return;
+    const marker = (i, edge) => ({
+      tagName: "mj-raw",
+      attributes: {},
+      content: `<!--ee-import-${i}-${edge}-->`,
+      children: []
+    });
+    for (const [i, f] of this.fallbacks.entries()) {
+      const at = f.parent.children.indexOf(f.node);
+      f.parent.children.splice(at, 1, marker(i, "start"), f.node, marker(i, "end"));
+    }
+    let html = "";
+    try {
+      html = mjml2html3(serialize(this.root), { ignoreIncludes: true, validationLevel: "skip", minify: false, keepComments: true }).html;
+    } catch {
+      html = "";
+    }
+    const needed = [];
+    for (const [i, f] of this.fallbacks.entries()) {
+      const start = html.indexOf(`<!--ee-import-${i}-start-->`);
+      const end = html.indexOf(`<!--ee-import-${i}-end-->`);
+      let fragment = start >= 0 && end > start ? html.slice(start + `<!--ee-import-${i}-start-->`.length, end).trim() : "";
+      if (f.unknown || fragment === "") {
+        const source = serialize(f.node).replace(/--/g, "- -");
+        fragment = `<!-- Imported MJML that renders nothing: ${source} -->`;
+      }
+      f.block.html = fragment;
+      needed.push(fragment);
+    }
+    const css = supportingCss(html, needed.join("\n"), metadata.breakpoint);
+    if (css) metadata.customCSS = metadata.customCSS ? `${metadata.customCSS}
+${css}` : css;
+  }
+  summarize() {
+    if (this.kept.size > 0) {
+      const list = [...this.kept.entries()].sort((a, b) => b[1] - a[1]).map(([name, n]) => `${name} (${n})`).join(", ");
+      this.warnings.push({
+        severity: "info",
+        code: "attribute_kept",
+        path: "mj-body",
+        message: `Attributes the editor has no control for are kept and apply to the mail as before: ${list}. The editor canvas may not show their effect.`
+      });
+    }
+    if (this.hasOwnDefaults || this.usesMjClass) {
+      this.warnings.push({
+        severity: "info",
+        code: "document_defaults",
+        path: "mj-head > mj-attributes",
+        message: "The document-wide defaults (mj-attributes, mj-class) are kept and apply to the mail. The editor canvas shows blocks without them, so the preview is the reference for how the mail looks."
+      });
+    }
+  }
+};
+function balancedDivs(html) {
+  let depth = 0;
+  for (const m of html.matchAll(/<(\/?)div\b[^>]*>/gi)) {
+    depth += m[1] ? -1 : 1;
+    if (depth < 0) return false;
+  }
+  return depth === 0;
+}
+function supportingCss(fullHtml, fragments, breakpoint = "480px") {
+  const out = [];
+  const classes = new Set([...fragments.matchAll(/mj-column-(?:per|px)-[0-9-]+/g)].map((m) => m[0]));
+  const rules = [];
+  for (const cls of classes) {
+    const m = new RegExp(`\\.${cls}\\s*\\{[^}]*\\}`).exec(fullHtml);
+    if (m) rules.push(m[0]);
+  }
+  if (rules.length > 0) out.push(`@media only screen and (min-width:${breakpoint}) { ${rules.join(" ")} }`);
+  const styles = [...fullHtml.matchAll(/<style type="text\/css">([\s\S]*?)<\/style>/g)].map((m) => m[1]);
+  for (const token of ["mj-accordion", "mj-carousel", "mj-menu"]) {
+    if (!fragments.includes(token)) continue;
+    for (const s of styles) if (s.includes(token) && !out.includes(s.trim())) out.push(s.trim());
+  }
+  return out.join("\n");
+}
+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);
+  if (root.tagName !== "mjml") throw new MjmlImportError("not_mjml", "The document must start with <mjml>.");
+  const head = root.children.find((c) => c.tagName === "mj-head");
+  const body = root.children.find((c) => c.tagName === "mj-body");
+  if (!body) throw new MjmlImportError("not_mjml", "The document has no <mj-body>.");
+  const importer = new Importer(root);
+  for (const [i, c] of root.children.entries()) {
+    if (c !== head && c !== body && !isComment(c)) {
+      importer.warn("stray_text", "info", `mjml > ${c.tagName}[${i + 1}]`, c, `<${c.tagName}> outside mj-head and mj-body is ignored by MJML, and by the import.`, true);
+    }
+  }
+  const metadata = importer.head(head, body);
+  const sections = importer.body(body);
+  importer.resolveFallbacks(metadata);
+  importer.summarize();
+  const document = { version: CURRENT_TEMPLATE_VERSION, metadata, sections };
+  try {
+    migrateTemplate(document);
+  } catch (err) {
+    const detail = isTemplateMigrationError(err) ? err.message : String(err);
+    throw new MjmlImportError("invalid_document", `The imported document does not pass the editor's schema: ${detail}`);
+  }
+  return { document, warnings: importer.warnings };
+}
+export {
+  DEFAULT_MJML_ATTRIBUTES,
+  EDITOR_DATA_ATTRIBUTE,
+  MAX_MJML_BYTES,
+  MAX_MJML_DEPTH,
+  MAX_MJML_ELEMENTS,
+  MJMLCompiler,
+  MJMLExporter,
+  MjmlImportError,
+  createMJMLCompiler,
+  createMJMLExporter,
+  encodeEditorData,
+  exportTemplate,
+  importMjml,
+  isMjmlImportError
+};