@aswin.dev/renderer 0.6.3

package/dist/index.js

@@ -0,0 +1,1221 @@
+// src/index.ts
+import { isSection as isSection3, isCustomBlock as isCustomBlock2 } from "@templatical/types";
+
+// src/render-context.ts
+var BUILT_IN_FONT_FALLBACKS = {
+  arial: "Arial, sans-serif",
+  helvetica: "Helvetica, sans-serif",
+  georgia: "Georgia, serif",
+  "times new roman": "'Times New Roman', serif",
+  verdana: "Verdana, sans-serif",
+  "trebuchet ms": "'Trebuchet MS', sans-serif",
+  "courier new": "'Courier New', monospace",
+  tahoma: "Tahoma, sans-serif"
+};
+var RenderContext = class _RenderContext {
+  constructor(containerWidth, customFonts, defaultFallbackFont, allowHtmlBlocks, customBlockHtml = /* @__PURE__ */ new Map()) {
+    this.containerWidth = containerWidth;
+    this.customFonts = customFonts;
+    this.defaultFallbackFont = defaultFallbackFont;
+    this.allowHtmlBlocks = allowHtmlBlocks;
+    this.customBlockHtml = customBlockHtml;
+  }
+  containerWidth;
+  customFonts;
+  defaultFallbackFont;
+  allowHtmlBlocks;
+  customBlockHtml;
+  /**
+   * Create a new context with a different container width.
+   * Used when rendering columns with narrower widths.
+   */
+  withContainerWidth(width) {
+    return new _RenderContext(
+      width,
+      this.customFonts,
+      this.defaultFallbackFont,
+      this.allowHtmlBlocks,
+      this.customBlockHtml
+    );
+  }
+  /**
+   * Resolve a font family name to include custom font fallbacks.
+   * If the font matches a custom font, returns `'FontName', fallback`.
+   * Otherwise returns the original font family string.
+   */
+  resolveFontFamily(fontFamily) {
+    for (const customFont of this.customFonts) {
+      if (customFont.name.toLowerCase() === fontFamily.toLowerCase()) {
+        const fallback = customFont.fallback ?? this.defaultFallbackFont;
+        return `'${customFont.name}', ${fallback}`;
+      }
+    }
+    const builtIn = BUILT_IN_FONT_FALLBACKS[fontFamily.toLowerCase()];
+    if (builtIn) {
+      return builtIn;
+    }
+    return fontFamily;
+  }
+};
+
+// src/renderers/index.ts
+import {
+  isSection as isSection2,
+  isTitle,
+  isParagraph,
+  isImage,
+  isInput,
+  isButton,
+  isDivider,
+  isSpacer,
+  isHtml,
+  isSocialIcons,
+  isMenu,
+  isTable,
+  isVideo,
+  isCustomBlock
+} from "@templatical/types";
+
+// src/renderers/title.ts
+import { HEADING_LEVEL_FONT_SIZE } from "@templatical/types";
+
+// src/escape.ts
+var HTML_ENTITIES = {
+  "&": "&",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#039;"
+};
+var HTML_ENTITY_REGEX = /[&<>"']/g;
+function escapeHtml(text) {
+  if (text === "") {
+    return "";
+  }
+  return text.replace(HTML_ENTITY_REGEX, (char) => HTML_ENTITIES[char] ?? char);
+}
+function escapeAttr(text) {
+  if (text === "") {
+    return "";
+  }
+  return text.replace(HTML_ENTITY_REGEX, (char) => HTML_ENTITIES[char] ?? char);
+}
+function escapeCssValue(text) {
+  if (text === "") {
+    return "";
+  }
+  return escapeAttr(text).replace(/[;{}\r\n]/g, "");
+}
+function convertMergeTagsToValues(html) {
+  if (html === "") {
+    return "";
+  }
+  let result = html.replace(
+    /<span[^>]*\bdata-merge-tag="([^"]*)"[^>]*>.*?<\/span>/gs,
+    "$1"
+  );
+  result = result.replace(
+    /<span[^>]*\bdata-logic-merge-tag="([^"]*)"[^>]*>.*?<\/span>/gs,
+    "$1"
+  );
+  return result;
+}
+
+// src/padding.ts
+function toPaddingString(padding) {
+  return `${padding.top}px ${padding.right}px ${padding.bottom}px ${padding.left}px`;
+}
+function toMarginString(margin) {
+  return toPaddingString(margin);
+}
+
+// src/utils.ts
+function bgAttr(backgroundColor, placement) {
+  if (!backgroundColor) {
+    return "";
+  }
+  const name = placement === "native" ? "background-color" : "container-background-color";
+  return ` ${name}="${backgroundColor}"`;
+}
+
+// src/visibility.ts
+function isHiddenOnAll(block) {
+  const visibility = block.visibility;
+  if (!visibility) {
+    return false;
+  }
+  return !visibility.desktop && !visibility.tablet && !visibility.mobile;
+}
+function getCssClassAttr(block) {
+  const classes = getCssClasses(block);
+  if (classes === "") {
+    return "";
+  }
+  return ` css-class="${classes}"`;
+}
+function getCssClasses(block) {
+  const visibility = block.visibility;
+  if (!visibility) {
+    return "";
+  }
+  const classes = [];
+  if (!visibility.desktop) {
+    classes.push("tpl-hide-desktop");
+  }
+  if (!visibility.tablet) {
+    classes.push("tpl-hide-tablet");
+  }
+  if (!visibility.mobile) {
+    classes.push("tpl-hide-mobile");
+  }
+  return classes.join(" ");
+}
+
+// src/renderers/title.ts
+function renderTitle(block, context) {
+  if (isHiddenOnAll(block)) {
+    return "";
+  }
+  const padding = toPaddingString(block.styles.padding);
+  const bgColor = bgAttr(block.styles.backgroundColor, "container");
+  const content = unwrapParagraph(convertMergeTagsToValues(block.content));
+  const fontSize = HEADING_LEVEL_FONT_SIZE[block.level] ?? HEADING_LEVEL_FONT_SIZE[2];
+  const color = escapeAttr(block.color);
+  const align = block.textAlign;
+  const fontFamilyAttr = renderFontFamilyAttr(block.fontFamily, context);
+  const visibilityAttr = getCssClassAttr(block);
+  const safeLevel = HEADING_LEVEL_FONT_SIZE[block.level] ? block.level : 2;
+  const tag = `h${safeLevel}`;
+  return `<mj-text
+  font-size="${fontSize}px"
+  color="${color}"
+  align="${align}"
+  line-height="1.3"
+  padding="${padding}"${bgColor}${fontFamilyAttr}${visibilityAttr}
+><${tag} style="margin:0;font-size:inherit;color:inherit;line-height:inherit">${content}</${tag}></mj-text>`;
+}
+function unwrapParagraph(html) {
+  const match = html.match(/^\s*<p\b[^>]*>([\s\S]*)<\/p>\s*$/);
+  if (!match) return html;
+  if (/<\/p>\s*<p\b/i.test(match[1])) return html;
+  return match[1];
+}
+function renderFontFamilyAttr(fontFamily, context) {
+  if (!fontFamily) {
+    return "";
+  }
+  const resolved = context.resolveFontFamily(fontFamily);
+  return ` font-family="${resolved}"`;
+}
+
+// src/renderers/paragraph.ts
+function renderParagraph(block, _context) {
+  if (isHiddenOnAll(block)) {
+    return "";
+  }
+  const stripped = block.content.replace(/<\/?p[^>]*>/gi, "").trim();
+  if (stripped === "") {
+    return "";
+  }
+  const padding = toPaddingString(block.styles.padding);
+  const bgColor = bgAttr(block.styles.backgroundColor, "container");
+  const content = convertMergeTagsToValues(block.content);
+  const visibilityAttr = getCssClassAttr(block);
+  return `<mj-text
+  line-height="1.5"
+  padding="${padding}"${bgColor}${visibilityAttr}
+>${content}</mj-text>`;
+}
+
+// src/renderers/image.ts
+function renderImage(block, context) {
+  if (isHiddenOnAll(block)) {
+    return "";
+  }
+  if (block.src === "") {
+    return "";
+  }
+  const padding = toPaddingString(block.styles.padding);
+  const bgColor = bgAttr(block.styles.backgroundColor, "container");
+  const width = block.width === "full" ? context.containerWidth + "px" : block.width + "px";
+  const visibilityAttr = getCssClassAttr(block);
+  let linkAttr = "";
+  if (block.linkUrl) {
+    linkAttr = ` href="${escapeAttr(block.linkUrl)}"`;
+    if (block.linkOpenInNewTab) {
+      linkAttr += ' target="_blank" rel="noopener"';
+    }
+  }
+  const src = escapeAttr(block.src);
+  const decorative = block.decorative === true;
+  const alt = decorative ? "" : escapeAttr(block.alt);
+  const align = block.align;
+  return `<mj-image
+  src="${src}"
+  alt="${alt}"
+  width="${width}"
+  align="${align}"
+  padding="${padding}"${bgColor}${linkAttr}${visibilityAttr}
+/>`;
+}
+
+// src/renderers/input.ts
+function fontFamilyDeclaration(fontFamily, context) {
+  if (!fontFamily) {
+    return "";
+  }
+  const resolved = context.resolveFontFamily(fontFamily);
+  return `font-family:${escapeCssValue(resolved)};`;
+}
+function inputBorderCss(widthPx, color, sides) {
+  if (widthPx <= 0) {
+    return "border:none;";
+  }
+  const w = `${widthPx}px`;
+  const c = escapeCssValue(color);
+  if (sides === "all") {
+    return `border:${w} solid ${c};`;
+  }
+  const z = "0";
+  const tw = sides === "top" ? w : z;
+  const rw = sides === "right" ? w : z;
+  const bw = sides === "bottom" ? w : z;
+  const lw = sides === "left" ? w : z;
+  return `border-style:solid;border-color:${c};border-top-width:${tw};border-right-width:${rw};border-bottom-width:${bw};border-left-width:${lw};`;
+}
+function mergePlain(text) {
+  return escapeHtml(convertMergeTagsToValues(text));
+}
+function renderInput(block, context) {
+  if (isHiddenOnAll(block)) {
+    return "";
+  }
+  const padding = toPaddingString(block.styles.padding);
+  const bgColor = bgAttr(block.styles.backgroundColor, "container");
+  const visibilityAttr = getCssClassAttr(block);
+  const htmlInputId = `tpl-in-${block.id}`;
+  const htmlInputIdAttr = escapeAttr(htmlInputId);
+  const dataIdAttr = escapeAttr(block.id);
+  const labelText = mergePlain(block.label);
+  const placeholderPlain = convertMergeTagsToValues(block.placeholder);
+  const valuePlain = convertMergeTagsToValues(block.defaultValue ?? "");
+  const labelMargin = toMarginString(block.labelMargin);
+  const labelPadding = toPaddingString(block.labelPadding);
+  const labelStyle = [
+    "display:block;",
+    `margin:${labelMargin};`,
+    `padding:${labelPadding};`,
+    `font-size:${block.labelFontSize}px;`,
+    `font-weight:${block.labelFontWeight};`,
+    `color:${escapeCssValue(block.labelColor)};`,
+    `text-align:${block.labelTextAlign};`,
+    fontFamilyDeclaration(block.labelFontFamily, context)
+  ].filter(Boolean).join("");
+  const inputMargin = toMarginString(block.inputMargin);
+  const inputPad = toPaddingString(block.inputPadding);
+  const widthCss = block.inputWidth === "full" ? "100%" : `${block.inputWidth}px`;
+  const bw = block.inputBorderWidth ?? 0;
+  const borderCss = inputBorderCss(
+    bw,
+    block.inputBorderColor ?? "#d1d5db",
+    block.inputBorderSides ?? "all"
+  );
+  const inputStyle = [
+    "box-sizing:border-box;",
+    `width:${widthCss};`,
+    `margin:${inputMargin};`,
+    `padding:${inputPad};`,
+    `background-color:${escapeCssValue(block.inputBackgroundColor)};`,
+    `color:${escapeCssValue(block.inputTextColor)};`,
+    `font-size:${block.inputFontSize}px;`,
+    `border-radius:${block.inputBorderRadius}px;`,
+    borderCss,
+    fontFamilyDeclaration(block.inputFontFamily, context),
+    "outline:none;"
+  ].join("");
+  const typeAttr = escapeAttr(block.inputType);
+  const requiredAttr = block.required ? " required" : "";
+  const nameAttr = block.name.trim() === "" ? "" : ` name="${escapeAttr(block.name.trim())}"`;
+  const placeholderStyle = `<style type="text/css">[data-tpl-input="${dataIdAttr}"]::placeholder{color:${escapeCssValue(block.inputPlaceholderColor)}!important;opacity:1;}</style>`;
+  const html = `${placeholderStyle}<label for="${htmlInputIdAttr}" style="${labelStyle}">${labelText}</label><input id="${htmlInputIdAttr}"${nameAttr} type="${typeAttr}" data-tpl-input="${dataIdAttr}" placeholder="${escapeAttr(placeholderPlain)}" value="${escapeAttr(valuePlain)}" style="${inputStyle}"${requiredAttr} />`;
+  return `<mj-text
+  line-height="1.5"
+  padding="${padding}"${bgColor}${visibilityAttr}
+>${html}</mj-text>`;
+}
+
+// src/renderers/button.ts
+function renderButton(block, context) {
+  if (isHiddenOnAll(block)) {
+    return "";
+  }
+  const padding = toPaddingString(block.styles.padding);
+  const bgColor = bgAttr(block.styles.backgroundColor, "container");
+  const buttonPadding = toPaddingString(block.buttonPadding);
+  const href = resolveButtonHref(block);
+  const hrefAttr = href === "" ? "" : ` href="${href}"`;
+  const backgroundColor = escapeAttr(block.backgroundColor);
+  const textColor = escapeAttr(block.textColor);
+  const fontSize = block.fontSize;
+  const borderRadius = block.borderRadius;
+  const text = escapeHtml(block.text);
+  const action = block.clickAction ?? "none";
+  const targetAttr = block.openInNewTab && action !== "next_step" && action !== "previous_step" ? ' target="_blank" rel="noopener"' : "";
+  const fontFamilyAttr = renderFontFamilyAttr2(block.fontFamily, context);
+  const btnCssClassAttr = renderMjButtonCssClassAttr(block);
+  const borderAttrs = renderMjButtonBorderAttrs(block);
+  return `<mj-button${hrefAttr}${targetAttr}
+  background-color="${backgroundColor}"
+  color="${textColor}"
+  font-size="${fontSize}px"
+  font-weight="bold"
+  border-radius="${borderRadius}px"
+  inner-padding="${buttonPadding}"
+  padding="${padding}"${bgColor}${fontFamilyAttr}${btnCssClassAttr}${borderAttrs}
+>${text}</mj-button>`;
+}
+function renderMjButtonCssClassAttr(block) {
+  const parts = [];
+  const vis = getCssClasses(block);
+  if (vis) {
+    parts.push(...vis.split(/\s+/).filter(Boolean));
+  }
+  const action = block.clickAction ?? "none";
+  if (action === "next_step") {
+    parts.push("tpl-btn-next-step");
+  } else if (action === "previous_step") {
+    parts.push("tpl-btn-prev-step");
+  }
+  if (parts.length === 0) {
+    return "";
+  }
+  return ` css-class="${escapeAttr(parts.join(" "))}"`;
+}
+function renderMjButtonBorderAttrs(block) {
+  const w = block.borderWidth ?? 0;
+  if (w <= 0) {
+    return "";
+  }
+  const color = block.borderColor ?? "#000000";
+  const segment = `${w}px solid ${color}`;
+  const escSegment = escapeAttr(segment);
+  const escNone = escapeAttr("none");
+  const sides = block.borderSides ?? "all";
+  if (sides === "all") {
+    return ` border="${escSegment}"`;
+  }
+  const top = sides === "top" ? escSegment : escNone;
+  const right = sides === "right" ? escSegment : escNone;
+  const bottom = sides === "bottom" ? escSegment : escNone;
+  const left = sides === "left" ? escSegment : escNone;
+  return ` border-top="${top}" border-right="${right}" border-bottom="${bottom}" border-left="${left}"`;
+}
+function resolveButtonHref(block) {
+  const action = block.clickAction ?? "none";
+  if (action === "scroll_anchor") {
+    const raw = block.clickActionAnchorId?.trim().replace(/^#/, "") ?? "";
+    if (raw !== "") {
+      return escapeAttr(`#${raw}`);
+    }
+    return block.url === "" ? "" : escapeAttr(block.url);
+  }
+  if (action === "none" || action === "load_page") {
+    return block.url === "" ? "" : escapeAttr(block.url);
+  }
+  if (action === "next_step" || action === "previous_step" || action === "close_popup") {
+    return escapeAttr(block.url === "" ? "#" : block.url);
+  }
+  return "";
+}
+function renderFontFamilyAttr2(fontFamily, context) {
+  if (!fontFamily) {
+    return "";
+  }
+  const resolved = context.resolveFontFamily(fontFamily);
+  return ` font-family="${resolved}"`;
+}
+
+// src/renderers/divider.ts
+function renderDivider(block, _context) {
+  if (isHiddenOnAll(block)) {
+    return "";
+  }
+  const padding = toPaddingString(block.styles.padding);
+  const bgColor = block.styles.backgroundColor ? ` container-background-color="${escapeAttr(block.styles.backgroundColor)}"` : "";
+  const width = block.width === "full" ? "100%" : block.width + "px";
+  const thickness = block.thickness;
+  const lineStyle = block.lineStyle;
+  const color = escapeAttr(block.color);
+  const visibilityAttr = getCssClassAttr(block);
+  return `<mj-divider
+  border-width="${thickness}px"
+  border-style="${lineStyle}"
+  border-color="${color}"
+  width="${width}"
+  padding="${padding}"${bgColor}${visibilityAttr}
+/>`;
+}
+
+// src/renderers/spacer.ts
+function renderSpacer(block, _context) {
+  if (isHiddenOnAll(block)) {
+    return "";
+  }
+  const height = block.height;
+  const bgColor = block.styles.backgroundColor ? ` container-background-color="${escapeAttr(block.styles.backgroundColor)}"` : "";
+  const visibilityAttr = getCssClassAttr(block);
+  return `<mj-spacer height="${height}px" padding="0"${bgColor}${visibilityAttr} />`;
+}
+
+// src/renderers/html.ts
+function renderHtml(block, context) {
+  if (isHiddenOnAll(block)) {
+    return "";
+  }
+  if (!context.allowHtmlBlocks) {
+    return "";
+  }
+  const content = block.content;
+  if (content === "") {
+    return "";
+  }
+  const visibilityAttr = getCssClassAttr(block);
+  return `<mj-text${visibilityAttr}>
+${content}
+</mj-text>`;
+}
+
+// src/social-icons.ts
+var SOCIAL_ICONS = {
+  facebook: {
+    path: "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",
+    color: "#1877F2"
+  },
+  twitter: {
+    path: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z",
+    color: "#000000"
+  },
+  instagram: {
+    path: "M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z",
+    color: "#E4405F"
+  },
+  linkedin: {
+    path: "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.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 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",
+    color: "#0A66C2"
+  },
+  youtube: {
+    path: "M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z",
+    color: "#FF0000"
+  },
+  tiktok: {
+    path: "M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z",
+    color: "#000000"
+  },
+  pinterest: {
+    path: "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.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-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-12 0-6.628-5.373-12-12-12z",
+    color: "#BD081C"
+  },
+  email: {
+    path: "M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z",
+    color: "#6B7280"
+  },
+  whatsapp: {
+    path: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z",
+    color: "#25D366"
+  },
+  telegram: {
+    path: "M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z",
+    color: "#26A5E4"
+  },
+  discord: {
+    path: "M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z",
+    color: "#5865F2"
+  },
+  snapchat: {
+    path: "M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-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.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12.017-5.373 12.017-12.001C24.034 5.367 18.644 0 12.017 0z",
+    color: "#FFFC00"
+  },
+  reddit: {
+    path: "M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z",
+    color: "#FF4500"
+  },
+  github: {
+    path: "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",
+    color: "#181717"
+  },
+  dribbble: {
+    path: "M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12-5.385 12-12 12zm10.12-10.358c-.35-.11-3.17-.953-6.384-.438 1.34 3.684 1.887 6.684 1.992 7.308 2.3-1.555 3.936-4.02 4.392-6.87zm-6.115 7.808c-.153-.9-.75-4.032-2.19-7.77l-.066.02c-5.79 2.015-7.86 6.025-8.04 6.4 1.73 1.358 3.92 2.166 6.29 2.166 1.42 0 2.77-.29 4-.814zm-11.62-2.58c.232-.4 3.045-5.055 8.332-6.765.135-.045.27-.084.405-.12-.26-.585-.54-1.167-.832-1.74C7.17 11.775 2.206 11.71 1.756 11.7l-.004.312c0 2.633.998 5.037 2.634 6.855zm-2.42-8.955c.46.008 4.683.026 9.477-1.248-1.698-3.018-3.53-5.558-3.8-5.928-2.868 1.35-5.01 3.99-5.676 7.17zM9.6 2.052c.282.38 2.145 2.914 3.822 6 3.645-1.365 5.19-3.44 5.373-3.702-1.81-1.61-4.19-2.586-6.795-2.586-.825 0-1.63.1-2.4.285zm10.335 3.483c-.218.29-1.935 2.493-5.724 4.04.24.49.47.985.68 1.486.08.18.15.36.22.53 3.41-.43 6.8.26 7.14.33-.02-2.42-.88-4.64-2.31-6.38z",
+    color: "#EA4C89"
+  },
+  behance: {
+    path: "M22 7h-7V5h7v2zm1.726 10c-.442 1.297-2.029 3-5.101 3-3.074 0-5.564-1.729-5.564-5.675 0-3.91 2.325-5.92 5.466-5.92 3.082 0 4.964 1.782 5.375 4.426.078.506.109 1.188.095 2.14H15.97c.13 3.211 3.483 3.312 4.588 2.029h3.168zm-7.686-4h4.965c-.105-1.547-1.136-2.219-2.477-2.219-1.466 0-2.277.768-2.488 2.219zm-9.574 6.988H0V5.021h6.953c5.476.081 5.58 5.444 2.72 6.906 3.461 1.26 3.577 8.061-3.207 8.061zM3 11h3.584c2.508 0 2.906-3-.312-3H3v3zm3.391 3H3v3.016h3.341c3.055 0 2.868-3.016.05-3.016z",
+    color: "#1769FF"
+  }
+};
+function generateSocialIconDataUri(platform, style, size) {
+  const iconData = SOCIAL_ICONS[platform];
+  const path = iconData?.path ?? "";
+  const brandColor = iconData?.color ?? "#6B7280";
+  if (path === "") {
+    return "";
+  }
+  const isOutlined = style === "outlined";
+  const iconColor = isOutlined ? brandColor : "#ffffff";
+  let bgShape;
+  switch (style) {
+    case "circle":
+      bgShape = `<circle cx="12" cy="12" r="12" fill="${brandColor}"/>`;
+      break;
+    case "rounded":
+      bgShape = `<rect width="24" height="24" rx="6" fill="${brandColor}"/>`;
+      break;
+    case "square":
+      bgShape = `<rect width="24" height="24" rx="0" fill="${brandColor}"/>`;
+      break;
+    case "outlined":
+      bgShape = `<rect width="22" height="22" x="1" y="1" rx="3" fill="transparent" stroke="${brandColor}" stroke-width="2"/>`;
+      break;
+    default:
+      bgShape = `<rect width="24" height="24" rx="3" fill="${brandColor}"/>`;
+      break;
+  }
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="${size}" height="${size}">` + bgShape + `<g transform="translate(4.8, 4.8) scale(0.6)"><path d="${path}" fill="${iconColor}"/></g></svg>`;
+  return "data:image/svg+xml;base64," + btoa(svg);
+}
+
+// src/renderers/social.ts
+function renderSocialIcons(block, _context) {
+  if (isHiddenOnAll(block)) {
+    return "";
+  }
+  const icons = block.icons;
+  if (icons.length === 0) {
+    return "";
+  }
+  const padding = toPaddingString(block.styles.padding);
+  const bgColor = block.styles.backgroundColor ? ` container-background-color="${escapeAttr(block.styles.backgroundColor)}"` : "";
+  const visibilityAttr = getCssClassAttr(block);
+  const align = block.align;
+  const iconSize = block.iconSize;
+  const iconStyle = block.iconStyle;
+  const spacing = block.spacing;
+  let iconSizePx;
+  switch (iconSize) {
+    case "small":
+      iconSizePx = 24;
+      break;
+    case "large":
+      iconSizePx = 48;
+      break;
+    default:
+      iconSizePx = 32;
+      break;
+  }
+  let borderRadius;
+  switch (iconStyle) {
+    case "circle":
+      borderRadius = "50%";
+      break;
+    case "rounded":
+      borderRadius = "8px";
+      break;
+    case "square":
+      borderRadius = "0";
+      break;
+    default:
+      borderRadius = "4px";
+      break;
+  }
+  const iconCount = icons.length;
+  const socialElements = icons.map((icon, index) => {
+    const platform = icon.platform;
+    const url = escapeAttr(icon.url);
+    const iconSrc = generateSocialIconDataUri(platform, iconStyle, iconSizePx);
+    const rightPad = index === iconCount - 1 ? 0 : spacing;
+    return `<mj-social-element src="${iconSrc}" href="${url}" icon-size="${iconSizePx}px" padding="0 ${rightPad}px 0 0" border-radius="${borderRadius}" background-color="transparent"></mj-social-element>`;
+  });
+  const socialContent = socialElements.join("\n");
+  return `<mj-social
+  mode="horizontal"
+  align="${align}"
+  icon-padding="0"
+  padding="${padding}"${bgColor}${visibilityAttr}
+>
+${socialContent}
+</mj-social>`;
+}
+
+// src/renderers/menu.ts
+function renderMenu(block, context) {
+  if (isHiddenOnAll(block)) {
+    return "";
+  }
+  if (block.items.length === 0) {
+    return "";
+  }
+  const padding = toPaddingString(block.styles.padding);
+  const bgColor = bgAttr(block.styles.backgroundColor, "container");
+  const visibilityAttr = getCssClassAttr(block);
+  const fontFamilyAttr = renderFontFamilyAttr3(block.fontFamily, context);
+  const align = block.textAlign;
+  const fontSize = block.fontSize;
+  const color = escapeAttr(block.color);
+  const content = renderMenuItems(block);
+  return `<mj-text
+  font-size="${fontSize}px"
+  color="${color}"
+  align="${align}"
+  line-height="1.5"
+  padding="${padding}"${bgColor}${fontFamilyAttr}${visibilityAttr}
+>${content}</mj-text>`;
+}
+function renderMenuItems(block) {
+  const items = block.items;
+  const separator = escapeHtml(block.separator);
+  const separatorColor = escapeCssValue(block.separatorColor);
+  const spacing = block.spacing;
+  const linkColor = block.linkColor ?? block.color;
+  const parts = [];
+  const itemCount = items.length;
+  for (let index = 0; index < itemCount; index++) {
+    parts.push(renderMenuItem(items[index], linkColor));
+    if (index < itemCount - 1) {
+      parts.push(
+        `<span style="color: ${separatorColor}; padding: 0 ${spacing}px;">${separator}</span>`
+      );
+    }
+  }
+  return parts.join("");
+}
+function renderMenuItem(item, linkColor) {
+  const text = escapeHtml(item.text);
+  const url = escapeAttr(item.url);
+  const color = escapeCssValue(item.color ?? linkColor);
+  const target = item.openInNewTab ? ' target="_blank" rel="noopener"' : "";
+  const styles = [`color: ${color}`, "text-decoration: none"];
+  if (item.bold) {
+    styles.push("font-weight: bold");
+  }
+  if (item.underline) {
+    styles.push("text-decoration: underline");
+  }
+  const styleAttr = styles.join("; ");
+  return `<a href="${url}" style="${styleAttr}"${target}>${text}</a>`;
+}
+function renderFontFamilyAttr3(fontFamily, context) {
+  if (!fontFamily) {
+    return "";
+  }
+  const resolved = context.resolveFontFamily(fontFamily);
+  return ` font-family="${resolved}"`;
+}
+
+// src/renderers/table.ts
+function renderTable(block, context) {
+  if (isHiddenOnAll(block)) {
+    return "";
+  }
+  if (block.rows.length === 0) {
+    return "";
+  }
+  const padding = toPaddingString(block.styles.padding);
+  const bgColor = bgAttr(block.styles.backgroundColor, "container");
+  const visibilityAttr = getCssClassAttr(block);
+  const fontFamilyAttr = renderFontFamilyAttr4(block.fontFamily, context);
+  const fontSize = block.fontSize;
+  const color = escapeAttr(block.color);
+  const align = block.textAlign;
+  const tableHtml = renderTableElement(block);
+  return `<mj-text
+  font-size="${fontSize}px"
+  color="${color}"
+  align="${align}"
+  line-height="1.5"
+  padding="${padding}"${bgColor}${fontFamilyAttr}${visibilityAttr}
+>${tableHtml}</mj-text>`;
+}
+function renderTableElement(block) {
+  const borderColor = escapeCssValue(block.borderColor);
+  const borderWidth = block.borderWidth;
+  const tableStyle = "width: 100%; border-collapse: collapse;";
+  let rowsHtml = "";
+  for (let index = 0; index < block.rows.length; index++) {
+    const row = block.rows[index];
+    const isHeader = block.hasHeaderRow && index === 0;
+    rowsHtml += renderRow(row, block, isHeader, borderColor, borderWidth);
+  }
+  return `<table style="${tableStyle}">${rowsHtml}</table>`;
+}
+function renderRow(row, block, isHeader, borderColor, borderWidth) {
+  let cellsHtml = "";
+  for (const cell of row.cells) {
+    cellsHtml += renderCell(cell, block, isHeader, borderColor, borderWidth);
+  }
+  return `<tr>${cellsHtml}</tr>`;
+}
+function renderCell(cell, block, isHeader, borderColor, borderWidth) {
+  const cellPadding = block.cellPadding;
+  const styles = [
+    `border: ${borderWidth}px solid ${borderColor}`,
+    `padding: ${cellPadding}px`
+  ];
+  if (isHeader) {
+    styles.push("font-weight: bold");
+    if (block.headerBackgroundColor) {
+      styles.push(
+        `background-color: ${escapeCssValue(block.headerBackgroundColor)}`
+      );
+    }
+  }
+  const styleAttr = styles.join("; ");
+  const content = convertMergeTagsToValues(cell.content);
+  const tag = isHeader ? "th" : "td";
+  return `<${tag} style="${styleAttr}">${content}</${tag}>`;
+}
+function renderFontFamilyAttr4(fontFamily, context) {
+  if (!fontFamily) {
+    return "";
+  }
+  const resolved = context.resolveFontFamily(fontFamily);
+  return ` font-family="${resolved}"`;
+}
+
+// src/renderers/custom.ts
+function renderCustom(block, context) {
+  if (isHiddenOnAll(block)) {
+    return "";
+  }
+  const fromContext = context.customBlockHtml.get(block.id);
+  const content = fromContext ?? block.renderedHtml;
+  if (!content || content === "") {
+    return "";
+  }
+  const visibilityAttr = getCssClassAttr(block);
+  const bgColor = bgAttr(block.styles?.backgroundColor, "container");
+  return `<mj-text${bgColor}${visibilityAttr}>
+${content}
+</mj-text>`;
+}
+
+// src/renderers/section.ts
+import { isSection } from "@templatical/types";
+
+// src/columns.ts
+function getWidthPercentages(layout) {
+  switch (layout) {
+    case "2":
+      return ["50%", "50%"];
+    case "3":
+      return ["33.33%", "33.33%", "33.34%"];
+    case "1-2":
+      return ["33.33%", "66.67%"];
+    case "2-1":
+      return ["66.67%", "33.33%"];
+    default:
+      return ["100%"];
+  }
+}
+function getWidthPixels(layout, containerWidth) {
+  switch (layout) {
+    case "2":
+      return [containerWidth * 0.5, containerWidth * 0.5];
+    case "3":
+      return [containerWidth / 3, containerWidth / 3, containerWidth / 3];
+    case "1-2":
+      return [containerWidth / 3, containerWidth * 2 / 3];
+    case "2-1":
+      return [containerWidth * 2 / 3, containerWidth / 3];
+    default:
+      return [containerWidth];
+  }
+}
+
+// src/renderers/section.ts
+function renderSection(block, context, renderBlock2) {
+  if (isHiddenOnAll(block)) {
+    return "";
+  }
+  const columnsLayout = block.columns;
+  const columnWidths = getWidthPercentages(columnsLayout);
+  const columnWidthsPx = getWidthPixels(columnsLayout, context.containerWidth);
+  const padding = toPaddingString(block.styles.padding);
+  const bgColor = bgAttr(block.styles.backgroundColor, "native");
+  const visibilityAttr = getCssClassAttr(block);
+  const children = block.children;
+  const columnsContent = [];
+  for (let index = 0; index < children.length; index++) {
+    const column = children[index];
+    const width = columnWidths[index] ?? "100%";
+    const columnWidth = Math.floor(
+      columnWidthsPx[index] ?? context.containerWidth
+    );
+    const filteredColumn = filterHtmlBlocks(
+      column,
+      context.allowHtmlBlocks
+    ).filter((child) => !isSection(child));
+    const columnContext = context.withContainerWidth(columnWidth);
+    const columnBlocks = filteredColumn.map((child) => renderBlock2(child, columnContext)).filter((value) => value !== "").join("\n");
+    const content = columnBlocks === "" ? "<mj-text>&nbsp;</mj-text>" : columnBlocks;
+    columnsContent.push(`<mj-column width="${width}">
+${content}
+</mj-column>`);
+  }
+  const columns = columnsContent.join("\n");
+  return `<mj-section${bgColor} padding="${padding}"${visibilityAttr}>
+${columns}
+</mj-section>`;
+}
+function filterHtmlBlocks(blocks, allowHtmlBlocks) {
+  if (allowHtmlBlocks) {
+    return blocks;
+  }
+  return blocks.filter((block) => block.type !== "html");
+}
+
+// src/renderers/video.ts
+function getVideoThumbnail(url, customThumbnail) {
+  if (customThumbnail) {
+    return customThumbnail;
+  }
+  if (!url) {
+    return null;
+  }
+  const youtubePatterns = [
+    /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/,
+    /youtube\.com\/shorts\/([a-zA-Z0-9_-]{11})/
+  ];
+  for (const pattern of youtubePatterns) {
+    const match = url.match(pattern);
+    if (match) {
+      return `https://img.youtube.com/vi/${match[1]}/maxresdefault.jpg`;
+    }
+  }
+  const vimeoMatch = url.match(/vimeo\.com\/(?:video\/)?(\d+)/);
+  if (vimeoMatch) {
+    return `https://vumbnail.com/${vimeoMatch[1]}.jpg`;
+  }
+  return null;
+}
+function renderVideo(block, context) {
+  if (isHiddenOnAll(block)) {
+    return "";
+  }
+  const thumbnailUrl = getVideoThumbnail(block.url, block.thumbnailUrl);
+  if (!thumbnailUrl) {
+    return "";
+  }
+  const padding = toPaddingString(block.styles.padding);
+  const bgColor = bgAttr(block.styles.backgroundColor, "container");
+  const width = block.width === "full" ? context.containerWidth + "px" : block.width + "px";
+  const visibilityAttr = getCssClassAttr(block);
+  const src = escapeAttr(thumbnailUrl);
+  const alt = escapeAttr(block.alt);
+  const align = block.align;
+  const href = escapeAttr(block.url);
+  return `<mj-image
+  src="${src}"
+  alt="${alt}"
+  width="${width}"
+  align="${align}"
+  padding="${padding}"
+  href="${href}"
+  target="_blank"
+  rel="noopener"${bgColor}${visibilityAttr}
+/>`;
+}
+
+// src/renderers/index.ts
+function renderBlock(block, context) {
+  if (isSection2(block)) {
+    return renderSection(block, context, renderBlock);
+  }
+  if (isTitle(block)) {
+    return renderTitle(block, context);
+  }
+  if (isParagraph(block)) {
+    return renderParagraph(block, context);
+  }
+  if (isImage(block)) {
+    return renderImage(block, context);
+  }
+  if (isInput(block)) {
+    return renderInput(block, context);
+  }
+  if (isButton(block)) {
+    return renderButton(block, context);
+  }
+  if (isDivider(block)) {
+    return renderDivider(block, context);
+  }
+  if (isSpacer(block)) {
+    return renderSpacer(block, context);
+  }
+  if (isHtml(block)) {
+    return renderHtml(block, context);
+  }
+  if (isSocialIcons(block)) {
+    return renderSocialIcons(block, context);
+  }
+  if (isMenu(block)) {
+    return renderMenu(block, context);
+  }
+  if (isTable(block)) {
+    return renderTable(block, context);
+  }
+  if (isVideo(block)) {
+    return renderVideo(block, context);
+  }
+  if (isCustomBlock(block)) {
+    return renderCustom(block, context);
+  }
+  return "";
+}
+
+// src/index.ts
+async function renderToMjml(content, options) {
+  const customFonts = options?.customFonts ?? [];
+  const defaultFallbackFont = options?.defaultFallbackFont ?? "Arial, sans-serif";
+  const allowHtmlBlocks = options?.allowHtmlBlocks ?? true;
+  const customBlockHtml = await resolveCustomBlocks(
+    content,
+    options?.renderCustomBlock
+  );
+  const renderContext = new RenderContext(
+    content.settings.width,
+    customFonts,
+    defaultFallbackFont,
+    allowHtmlBlocks,
+    customBlockHtml
+  );
+  const fontFamily = renderContext.resolveFontFamily(
+    content.settings.fontFamily
+  );
+  const backgroundColor = content.settings.backgroundColor;
+  const multiCanvas = (content.canvasPages?.length ?? 0) > 0;
+  const bodyContent = buildMjBodyContent(
+    content,
+    renderContext,
+    allowHtmlBlocks
+  );
+  const fontDeclarations = generateFontDeclarations(customFonts);
+  const previewTag = generatePreviewTag(content.settings.preheaderText);
+  const lang = escapeAttr(content.settings.locale);
+  const mjBodyAttrs = `width="${renderContext.containerWidth}px" background-color="${backgroundColor}"` + (multiCanvas ? ` css-class="tpl-canvas-multi"` : "");
+  return `<mjml lang="${lang}">
+  <mj-head>${previewTag}
+    <mj-attributes>
+      <mj-all font-family="${fontFamily}" />
+      <mj-text font-size="14px" />
+      <mj-section padding="0" />
+      <mj-column padding="0" />
+      <mj-image fluid-on-mobile="true" />
+    </mj-attributes>${fontDeclarations}
+    <mj-style>
+      a { color: inherit; text-decoration: none; }
+      @media only screen and (max-width: 480px) {
+        .tpl-hide-mobile { display: none !important; mso-hide: all !important; }
+      }
+      @media only screen and (min-width: 481px) and (max-width: 768px) {
+        .tpl-hide-tablet { display: none !important; mso-hide: all !important; }
+      }
+      @media only screen and (min-width: 769px) {
+        .tpl-hide-desktop { display: none !important; mso-hide: all !important; }
+      }${multiCanvas ? multiCanvasStepCss() : ""}
+    </mj-style>
+  </mj-head>
+  <mj-body ${mjBodyAttrs}>
+${bodyContent}${multiCanvas ? `
+${multiCanvasStepScriptMjRaw()}
+` : ""}
+  </mj-body>
+</mjml>`;
+}
+function buildMjBodyContent(content, context, allowHtmlBlocks) {
+  const pages = content.canvasPages;
+  if (pages?.length) {
+    const chunks = [];
+    for (let i = 0; i < pages.length; i++) {
+      const pageBlocks = pages[i].blocks ?? [];
+      const inner = renderBlocksTopLevel(pageBlocks, context, allowHtmlBlocks);
+      if (inner.trim() === "") {
+        continue;
+      }
+      const rawClasses = i === 0 ? `tpl-canvas-page tpl-canvas-page-idx-${i} tpl-canvas-page--current` : `tpl-canvas-page tpl-canvas-page-idx-${i}`;
+      chunks.push(
+        `<mj-wrapper css-class="${escapeAttr(rawClasses)}" padding="0">
+${inner}
+</mj-wrapper>`
+      );
+    }
+    return chunks.join("\n");
+  }
+  return renderBlocksTopLevel(content.blocks, context, allowHtmlBlocks);
+}
+function renderBlocksTopLevel(blocks, context, allowHtmlBlocks) {
+  return filterHtmlBlocks2(blocks, allowHtmlBlocks).map((block) => renderTopLevelBlock(block, context)).filter((value) => value !== "").join("\n");
+}
+function renderTopLevelBlock(block, context) {
+  if (isSection3(block)) {
+    const rendered = renderBlock(block, context);
+    return wrapWithDisplayCondition(block, rendered);
+  }
+  const content = renderBlock(block, context);
+  const wrapped = wrapInSection(content);
+  return wrapWithDisplayCondition(block, wrapped);
+}
+function wrapWithDisplayCondition(block, rendered) {
+  if (rendered === "") {
+    return "";
+  }
+  const displayCondition = block.displayCondition;
+  if (!displayCondition) {
+    return rendered;
+  }
+  return `<mj-raw>${displayCondition.before}</mj-raw>
+` + rendered + `
+<mj-raw>${displayCondition.after}</mj-raw>`;
+}
+function wrapInSection(content) {
+  if (content === "") {
+    return "";
+  }
+  return `<mj-section>
+  <mj-column>
+${content}
+  </mj-column>
+</mj-section>`;
+}
+function generatePreviewTag(preheaderText) {
+  if (!preheaderText) {
+    return "";
+  }
+  const trimmed = preheaderText.trim();
+  if (trimmed === "") {
+    return "";
+  }
+  const escaped = escapeHtml(trimmed);
+  return `
+    <mj-preview>${escaped}</mj-preview>`;
+}
+function generateFontDeclarations(customFonts) {
+  if (customFonts.length === 0) {
+    return "";
+  }
+  return customFonts.map(
+    (font) => `
+    <mj-font name="${escapeAttr(font.name)}" href="${escapeAttr(font.url)}" />`
+  ).join("");
+}
+function filterHtmlBlocks2(blocks, allowHtmlBlocks) {
+  if (allowHtmlBlocks) {
+    return blocks;
+  }
+  return blocks.filter((block) => block.type !== "html");
+}
+async function resolveCustomBlocks(content, renderCustomBlock) {
+  const result = /* @__PURE__ */ new Map();
+  if (!renderCustomBlock) {
+    return result;
+  }
+  const customBlocks = [];
+  collectCustomBlocksFromContent(content, customBlocks);
+  if (customBlocks.length === 0) {
+    return result;
+  }
+  const rendered = await Promise.all(
+    customBlocks.map((block) => renderCustomBlock(block))
+  );
+  for (let index = 0; index < customBlocks.length; index++) {
+    result.set(customBlocks[index].id, rendered[index]);
+  }
+  return result;
+}
+function collectCustomBlocks(blocks, out) {
+  for (const block of blocks) {
+    if (isCustomBlock2(block)) {
+      out.push(block);
+      continue;
+    }
+    if (isSection3(block)) {
+      for (const column of block.children) {
+        collectCustomBlocks(column, out);
+      }
+    }
+  }
+}
+function collectCustomBlocksFromContent(content, out) {
+  const pages = content.canvasPages;
+  if (pages?.length) {
+    for (const page of pages) {
+      collectCustomBlocks(page.blocks ?? [], out);
+    }
+    return;
+  }
+  collectCustomBlocks(content.blocks, out);
+}
+function multiCanvasStepCss() {
+  return `
+      .tpl-canvas-multi .tpl-canvas-page { display: none !important; }
+      .tpl-canvas-multi .tpl-canvas-page.tpl-canvas-page--current { display: block !important; }`;
+}
+function multiCanvasStepScriptMjRaw() {
+  return `<mj-raw>
+    <script>
+      (function () {
+        var root = document.body;
+        if (!root || !root.classList.contains("tpl-canvas-multi")) return;
+        root.addEventListener(
+          "click",
+          function (e) {
+            var link = e.target.closest("a");
+            if (!link || !root.contains(link)) return;
+            var isNext =
+              link.classList.contains("tpl-btn-next-step") ||
+              !!link.closest("td.tpl-btn-next-step");
+            var isPrev =
+              link.classList.contains("tpl-btn-prev-step") ||
+              !!link.closest("td.tpl-btn-prev-step");
+            if (!isNext && !isPrev) return;
+            e.preventDefault();
+            e.stopPropagation();
+            var pages = Array.prototype.slice.call(
+              root.querySelectorAll(".tpl-canvas-page"),
+            );
+            var cur = root.querySelector(
+              ".tpl-canvas-page.tpl-canvas-page--current",
+            );
+            var i = pages.indexOf(cur);
+            if (i < 0) return;
+            if (isNext) {
+              if (i >= pages.length - 1) return;
+              pages[i].classList.remove("tpl-canvas-page--current");
+              pages[i + 1].classList.add("tpl-canvas-page--current");
+            } else {
+              if (i <= 0) return;
+              pages[i].classList.remove("tpl-canvas-page--current");
+              pages[i - 1].classList.add("tpl-canvas-page--current");
+            }
+          },
+          true,
+        );
+      })();
+    </script>
+  </mj-raw>`;
+}
+export {
+  RenderContext,
+  SOCIAL_ICONS,
+  convertMergeTagsToValues,
+  escapeAttr,
+  escapeHtml,
+  generateSocialIconDataUri,
+  getCssClassAttr,
+  getCssClasses,
+  getWidthPercentages,
+  getWidthPixels,
+  isHiddenOnAll,
+  renderBlock,
+  renderToMjml,
+  toPaddingString
+};
+//# sourceMappingURL=index.js.map