@templatical/renderer 0.9.1 → 0.10.1

package/dist/index.js

@@ -1,284 +1,234 @@
-// src/index.ts
-import { isSection as isSection3, isCustomBlock as isCustomBlock2 } from "@templatical/types";
-
-// package.json
-var package_default = {
-  name: "@templatical/renderer",
-  description: "Render Templatical email templates to MJML",
-  version: "0.9.1",
-  bugs: "https://github.com/templatical/sdk/issues",
-  dependencies: {
-    "@templatical/types": "workspace:*"
-  },
-  devDependencies: {
-    "@resvg/resvg-js": "^2.6.2",
-    mjml: "^5.2.2",
-    tsup: "^8.5.1",
-    typescript: "^6.0.3",
-    vitest: "^4.1.7"
-  },
-  exports: {
-    ".": {
-      types: "./dist/index.d.ts",
-      import: "./dist/index.js"
-    }
-  },
-  files: [
-    "dist",
-    "assets"
-  ],
-  homepage: "https://templatical.com",
-  keywords: [
-    "email",
-    "email-template",
-    "html-email",
-    "mjml",
-    "renderer",
-    "templatical"
-  ],
-  license: "MIT",
-  module: "./dist/index.js",
-  publishConfig: {
-    access: "public"
-  },
-  repository: {
-    type: "git",
-    url: "git+https://github.com/templatical/sdk.git",
-    directory: "packages/renderer"
-  },
-  scripts: {
-    build: "tsup && node scripts/rasterize-social.mjs",
-    test: "vitest run --config vitest.config.ts",
-    typecheck: "tsc --noEmit"
-  },
-  type: "module",
-  types: "./dist/index.d.ts"
+import { HEADING_LEVEL_FONT_SIZE, isButton, isCustomBlock, isDivider, isHtml, isImage, isMenu, isParagraph, isSection, isSocialIcons, isSpacer, isTable, isTitle, isVideo } from "@templatical/types";
+//#endregion
+//#region src/render-context.ts
+const DEFAULT_SOCIAL_ICONS_BASE_URL = `https://unpkg.com/@templatical/renderer@0.10.1/assets/social`;
+const 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"
 };
-
-// src/render-context.ts
-var DEFAULT_SOCIAL_ICONS_BASE_URL = `https://unpkg.com/@templatical/renderer@${package_default.version}/assets/social`;
-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"
+/**
+* Immutable context passed through the block rendering chain.
+*/
+var RenderContext = class RenderContext {
+	containerWidth;
+	customFonts;
+	defaultFallbackFont;
+	allowHtmlBlocks;
+	customBlockHtml;
+	socialIconsBaseUrl;
+	constructor(containerWidth, customFonts, defaultFallbackFont, allowHtmlBlocks, customBlockHtml = /* @__PURE__ */ new Map(), socialIconsBaseUrl = DEFAULT_SOCIAL_ICONS_BASE_URL) {
+		this.containerWidth = containerWidth;
+		this.customFonts = customFonts;
+		this.defaultFallbackFont = defaultFallbackFont;
+		this.allowHtmlBlocks = allowHtmlBlocks;
+		this.customBlockHtml = customBlockHtml;
+		this.socialIconsBaseUrl = socialIconsBaseUrl;
+	}
+	/**
+	* 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, this.socialIconsBaseUrl);
+	}
+	/**
+	* 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;
+	}
 };
-var RenderContext = class _RenderContext {
-  constructor(containerWidth, customFonts, defaultFallbackFont, allowHtmlBlocks, customBlockHtml = /* @__PURE__ */ new Map(), socialIconsBaseUrl = DEFAULT_SOCIAL_ICONS_BASE_URL) {
-    this.containerWidth = containerWidth;
-    this.customFonts = customFonts;
-    this.defaultFallbackFont = defaultFallbackFont;
-    this.allowHtmlBlocks = allowHtmlBlocks;
-    this.customBlockHtml = customBlockHtml;
-    this.socialIconsBaseUrl = socialIconsBaseUrl;
-  }
-  containerWidth;
-  customFonts;
-  defaultFallbackFont;
-  allowHtmlBlocks;
-  customBlockHtml;
-  socialIconsBaseUrl;
-  /**
-   * 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,
-      this.socialIconsBaseUrl
-    );
-  }
-  /**
-   * 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;
-  }
+//#endregion
+//#region src/escape.ts
+const HTML_ENTITIES = {
+	"&": "&",
+	"<": "&lt;",
+	">": "&gt;",
+	"\"": "&quot;",
+	"'": "&#039;"
 };
-
-// src/renderers/index.ts
-import {
-  isSection as isSection2,
-  isTitle,
-  isParagraph,
-  isImage,
-  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 = {
-  "&": "&amp;",
-  "<": "&lt;",
-  ">": "&gt;",
-  '"': "&quot;",
-  "'": "&#039;"
-};
-var HTML_ENTITY_REGEX = /[&<>"']/g;
+const HTML_ENTITY_REGEX = /[&<>"']/g;
+/**
+* Escape HTML special characters (& < > " ').
+* Equivalent to PHP htmlspecialchars with ENT_QUOTES | ENT_HTML5.
+*/
 function escapeHtml(text) {
-  if (text === "") {
-    return "";
-  }
-  return text.replace(HTML_ENTITY_REGEX, (char) => HTML_ENTITIES[char] ?? char);
+	if (text === "") return "";
+	return text.replace(HTML_ENTITY_REGEX, (char) => HTML_ENTITIES[char] ?? char);
 }
+/**
+* Escape a string for use in an HTML attribute value.
+* Same implementation as escapeHtml for consistency with PHP.
+*/
 function escapeAttr(text) {
-  if (text === "") {
-    return "";
-  }
-  return text.replace(HTML_ENTITY_REGEX, (char) => HTML_ENTITIES[char] ?? char);
-}
+	if (text === "") return "";
+	return text.replace(HTML_ENTITY_REGEX, (char) => HTML_ENTITIES[char] ?? char);
+}
+/**
+* Escape a string for use as a CSS property value inside an inline
+* `style="prop: ${value}"` attribute. Beyond HTML entity escaping (so the
+* value survives the attribute boundary), this strips characters that
+* could break out of the property value into a sibling property:
+*
+*   `;`     — separates CSS declarations
+*   `{`/`}` — opens/closes a CSS rule (rejected by attribute parsers but
+*             still safer to remove)
+*   `\n`/`\r` — would smuggle past line-based CSS sanitizers
+*
+* Without this, an attacker-controlled color like
+* `"red; background: url('//attacker/log')"` lands as a real CSS rule.
+*/
 function escapeCssValue(text) {
-  if (text === "") {
-    return "";
-  }
-  return escapeAttr(text).replace(/[;{}\r\n]/g, "");
-}
+	if (text === "") return "";
+	return escapeAttr(text).replace(/[;{}\r\n]/g, "");
+}
+/**
+* Replace merge tag span elements with their data attribute values.
+* Converts `<span data-merge-tag="{{name}}">Label</span>` to `{{name}}`.
+* Also handles `data-logic-merge-tag` attributes.
+*
+* Uses a single-pass linear scan instead of an `[^>]*…[^>]*` regex because
+* the latter is polynomial-ReDoS over inputs that contain many `<span`
+* starts but no closing `>` — the engine retries `[^>]*` at every span
+* position. The scan below resolves each `<span>` open tag with a bounded
+* `indexOf('>')`, keeping the work strictly O(n).
+*/
 function convertMergeTagsToValues(html) {
-  if (html === "") {
-    return "";
-  }
-  return rewriteMergeTagSpans(
-    html,
-    (attrs) => findAttr(attrs, "data-merge-tag") ?? findAttr(attrs, "data-logic-merge-tag")
-  );
-}
+	if (html === "") return "";
+	return rewriteMergeTagSpans(html, (attrs) => findAttr(attrs, "data-merge-tag") ?? findAttr(attrs, "data-logic-merge-tag"));
+}
+/**
+* Walk `html`, find every `<span …>…</span>`, and replace the entire span
+* with whatever `extract` returns for its attribute string (or leave it
+* alone if `extract` returns `null`). Linear in the length of `html`:
+* every `indexOf` advances the cursor monotonically.
+*/
 function rewriteMergeTagSpans(html, extract) {
-  let out = "";
-  let i = 0;
-  while (i < html.length) {
-    const open = html.indexOf("<span", i);
-    if (open === -1) {
-      out += html.substring(i);
-      break;
-    }
-    const afterTagName = html[open + 5];
-    if (afterTagName !== ">" && afterTagName !== " " && afterTagName !== "	" && afterTagName !== "\n" && afterTagName !== "\r" && afterTagName !== "/") {
-      out += html.substring(i, open + 5);
-      i = open + 5;
-      continue;
-    }
-    const openEnd = html.indexOf(">", open + 5);
-    if (openEnd === -1) {
-      out += html.substring(i);
-      break;
-    }
-    const closeStart = html.indexOf("</span>", openEnd + 1);
-    if (closeStart === -1) {
-      out += html.substring(i);
-      break;
-    }
-    const attrs = html.substring(open + 5, openEnd);
-    const replacement = extract(attrs);
-    if (replacement === null) {
-      out += html.substring(i, open + 5);
-      i = open + 5;
-      continue;
-    }
-    out += html.substring(i, open);
-    out += replacement;
-    i = closeStart + 7;
-  }
-  return out;
-}
+	let out = "";
+	let i = 0;
+	while (i < html.length) {
+		const open = html.indexOf("<span", i);
+		if (open === -1) {
+			out += html.substring(i);
+			break;
+		}
+		const afterTagName = html[open + 5];
+		if (afterTagName !== ">" && afterTagName !== " " && afterTagName !== "	" && afterTagName !== "\n" && afterTagName !== "\r" && afterTagName !== "/") {
+			out += html.substring(i, open + 5);
+			i = open + 5;
+			continue;
+		}
+		const openEnd = html.indexOf(">", open + 5);
+		if (openEnd === -1) {
+			out += html.substring(i);
+			break;
+		}
+		const closeStart = html.indexOf("</span>", openEnd + 1);
+		if (closeStart === -1) {
+			out += html.substring(i);
+			break;
+		}
+		const replacement = extract(html.substring(open + 5, openEnd));
+		if (replacement === null) {
+			out += html.substring(i, open + 5);
+			i = open + 5;
+			continue;
+		}
+		out += html.substring(i, open);
+		out += replacement;
+		i = closeStart + 7;
+	}
+	return out;
+}
+/**
+* Extract the value of `name="…"` from an HTML attribute string, or `null`
+* if absent. Uses `[^<>"]*` for the value match so a missing closing quote
+* fails fast rather than backtracking across the full input.
+*/
 function findAttr(attrs, name) {
-  const pattern = new RegExp(`(?:^|\\s)${name}="([^"<>]*)"`);
-  const match = pattern.exec(attrs);
-  return match ? match[1] : null;
-}
-
-// src/padding.ts
+	const match = new RegExp(`(?:^|\\s)${name}="([^"<>]*)"`).exec(attrs);
+	return match ? match[1] : null;
+}
+//#endregion
+//#region src/padding.ts
+/**
+* Convert a SpacingValue to a CSS padding string like "10px 10px 10px 10px".
+*/
 function toPaddingString(padding) {
-  return `${padding.top}px ${padding.right}px ${padding.bottom}px ${padding.left}px`;
-}
-
-// src/utils.ts
+	return `${padding.top}px ${padding.right}px ${padding.bottom}px ${padding.left}px`;
+}
+//#endregion
+//#region src/utils.ts
+/**
+* Render the appropriate background-color attribute for an MJML element.
+* Returns an empty string when no color is set, or a leading-space attribute
+* fragment ready to interpolate into a tag's attribute list.
+*/
 function bgAttr(backgroundColor, placement) {
-  if (!backgroundColor) {
-    return "";
-  }
-  const name = placement === "native" ? "background-color" : "container-background-color";
-  return ` ${name}="${backgroundColor}"`;
-}
-
-// src/visibility.ts
+	if (!backgroundColor) return "";
+	return ` ${placement === "native" ? "background-color" : "container-background-color"}="${backgroundColor}"`;
+}
+//#endregion
+//#region src/visibility.ts
+/**
+* Check if a block is hidden on all viewports.
+*/
 function isHiddenOnAll(block) {
-  const visibility = block.visibility;
-  if (!visibility) {
-    return false;
-  }
-  return !visibility.desktop && !visibility.tablet && !visibility.mobile;
-}
+	const visibility = block.visibility;
+	if (!visibility) return false;
+	return !visibility.desktop && !visibility.mobile;
+}
+/**
+* Get the MJML css-class attribute string for visibility hiding.
+* Returns a string like ` css-class="tpl-hide-desktop"` or empty string.
+*/
 function getCssClassAttr(block) {
-  const classes = getCssClasses(block);
-  if (classes === "") {
-    return "";
-  }
-  return ` css-class="${classes}"`;
+	const classes = getCssClasses(block);
+	if (classes === "") return "";
+	return ` css-class="${classes}"`;
 }
+/**
+* Get the CSS classes for visibility hiding.
+*/
 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
+	const visibility = block.visibility;
+	if (!visibility) return "";
+	const classes = [];
+	if (!visibility.desktop) classes.push("tpl-hide-desktop");
+	if (!visibility.mobile) classes.push("tpl-hide-mobile");
+	return classes.join(" ");
+}
+//#endregion
+//#region src/renderers/title.ts
+/**
+* Render a title block to MJML markup.
+*/
 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
+	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$3(block.fontFamily, context);
+	const visibilityAttr = getCssClassAttr(block);
+	const tag = `h${HEADING_LEVEL_FONT_SIZE[block.level] ? block.level : 2}`;
+	return `<mj-text
   font-size="${fontSize}px"
   color="${color}"
   align="${align}"
@@ -286,573 +236,521 @@ function renderTitle(block, context) {
   padding="${padding}"${bgColor}${fontFamilyAttr}${visibilityAttr}
 ><${tag} style="margin:0;font-size:inherit;color:inherit;line-height:inherit">${content}</${tag}></mj-text>`;
 }
+/**
+* The editor stores title content as a TipTap paragraph (`<p>...</p>`),
+* but the renderer wraps it in `<h${level}>`. `<p>` is invalid inside a
+* heading, so strip a single outer `<p>` wrapper if present.
+*/
 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
+	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$3(fontFamily, context) {
+	if (!fontFamily) return "";
+	return ` font-family="${context.resolveFontFamily(fontFamily)}"`;
+}
+//#endregion
+//#region src/renderers/paragraph.ts
+/**
+* Render a paragraph block to MJML markup.
+* All text formatting is inline in the HTML content (managed by TipTap).
+*/
 function renderParagraph(block, _context) {
-  if (isHiddenOnAll(block)) {
-    return "";
-  }
-  const stripped = block.content.replace(/<\/?p\b[^<>]*>/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
+	if (isHiddenOnAll(block)) return "";
+	if (block.content.replace(/<\/?p\b[^<>]*>/gi, "").trim() === "") return "";
+	const padding = toPaddingString(block.styles.padding);
+	const bgColor = bgAttr(block.styles.backgroundColor, "container");
+	const content = convertMergeTagsToValues(block.content);
+	return `<mj-text
   line-height="1.5"
-  padding="${padding}"${bgColor}${visibilityAttr}
+  padding="${padding}"${bgColor}${getCssClassAttr(block)}
 >${content}</mj-text>`;
 }
-
-// src/renderers/image.ts
+//#endregion
+//#region src/renderers/image.ts
+/**
+* Render an image block to MJML markup.
+*/
 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;
-  const roleAttr = decorative ? ' role="presentation"' : "";
-  return `<mj-image
+	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;
+	return `<mj-image
   src="${src}"
-  alt="${alt}"
+  alt="${decorative ? "" : escapeAttr(block.alt)}"
   width="${width}"
-  align="${align}"
-  padding="${padding}"${bgColor}${linkAttr}${visibilityAttr}${roleAttr}
+  align="${block.align}"
+  padding="${padding}"${bgColor}${linkAttr}${visibilityAttr}${decorative ? " role=\"presentation\"" : ""}
 />`;
 }
-
-// src/renderers/button.ts
+//#endregion
+//#region src/renderers/button.ts
+/**
+* Render a button block to MJML markup.
+*/
 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 = block.url === "" ? "" : escapeAttr(block.url);
-  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 targetAttr = block.openInNewTab ? ' target="_blank" rel="noopener"' : "";
-  const fontFamilyAttr = renderFontFamilyAttr2(block.fontFamily, context);
-  const visibilityAttr = getCssClassAttr(block);
-  return `<mj-button${hrefAttr}${targetAttr}
+	if (isHiddenOnAll(block)) return "";
+	const padding = toPaddingString(block.styles.padding);
+	const bgColor = bgAttr(block.styles.backgroundColor, "container");
+	const buttonPadding = toPaddingString(block.buttonPadding);
+	const href = block.url === "" ? "" : escapeAttr(block.url);
+	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);
+	return `<mj-button${hrefAttr}${block.openInNewTab ? " target=\"_blank\" rel=\"noopener\"" : ""}
   background-color="${backgroundColor}"
   color="${textColor}"
   font-size="${fontSize}px"
   font-weight="bold"
   border-radius="${borderRadius}px"
   inner-padding="${buttonPadding}"
-  padding="${padding}"${bgColor}${fontFamilyAttr}${visibilityAttr}
+  padding="${padding}"${bgColor}${renderFontFamilyAttr$2(block.fontFamily, context)}${getCssClassAttr(block)}
 >${text}</mj-button>`;
 }
-function renderFontFamilyAttr2(fontFamily, context) {
-  if (!fontFamily) {
-    return "";
-  }
-  const resolved = context.resolveFontFamily(fontFamily);
-  return ` font-family="${resolved}"`;
+function renderFontFamilyAttr$2(fontFamily, context) {
+	if (!fontFamily) return "";
+	return ` font-family="${context.resolveFontFamily(fontFamily)}"`;
 }
-
-// src/renderers/divider.ts
+//#endregion
+//#region src/renderers/divider.ts
+/**
+* Render a divider block to MJML markup.
+*/
 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}"
+	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";
+	return `<mj-divider
+  border-width="${block.thickness}px"
+  border-style="${block.lineStyle}"
+  border-color="${escapeAttr(block.color)}"
   width="${width}"
-  padding="${padding}"${bgColor}${visibilityAttr}
+  padding="${padding}"${bgColor}${getCssClassAttr(block)}
 />`;
 }
-
-// src/renderers/spacer.ts
+//#endregion
+//#region src/renderers/spacer.ts
+/**
+* Render a spacer block to MJML markup.
+*
+* The canvas renders a spacer at exactly `block.height` pixels and ignores
+* `block.styles.padding`. Match that here: emit `padding="0"` so the
+* exported email's spacer occupies the same vertical space the user saw
+* in the editor preview. Any non-zero `block.styles.padding` on a spacer
+* is meaningless and silently dropped from the export.
+*/
 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
+	if (isHiddenOnAll(block)) return "";
+	return `<mj-spacer height="${block.height}px" padding="0"${block.styles.backgroundColor ? ` container-background-color="${escapeAttr(block.styles.backgroundColor)}"` : ""}${getCssClassAttr(block)} />`;
+}
+//#endregion
+//#region src/renderers/html.ts
+/**
+* Render an HTML block to MJML markup.
+* No sanitization in the OSS version -- consumers are responsible for content safety.
+*/
 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}>
+	if (isHiddenOnAll(block)) return "";
+	if (!context.allowHtmlBlocks) return "";
+	const content = block.content;
+	if (content === "") return "";
+	const visibilityAttr = getCssClassAttr(block);
+	return `<mj-text padding="${toPaddingString(block.styles.padding)}"${bgAttr(block.styles.backgroundColor, "container")}${visibilityAttr}>
 ${content}
 </mj-text>`;
 }
-
-// src/renderers/social.ts
+//#endregion
+//#region src/renderers/social.ts
+/**
+* Render a social icons block to MJML markup.
+*
+* Icons are emitted as `<img src="…/{style}/{platform}.png">` rather than
+* inline SVG or base64 data URIs. Outlook desktop (Word rendering engine)
+* does not support SVG and rejects base64 in `<img src>`, so hosted PNGs are
+* the only format that renders across every mainstream client. The base URL
+* is read from `context.socialIconsBaseUrl` (configurable via
+* `RenderOptions.socialIconsBaseUrl`; default is the version-pinned unpkg
+* mirror of this package).
+*/
 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 = `${context.socialIconsBaseUrl}/${iconStyle}/${platform}.png`;
-    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
+	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;
+	return `<mj-social
   mode="horizontal"
   align="${align}"
   icon-padding="0"
   padding="${padding}"${bgColor}${visibilityAttr}
 >
-${socialContent}
+${icons.map((icon, index) => {
+		const platform = icon.platform;
+		const url = escapeAttr(icon.url);
+		const iconSrc = `${context.socialIconsBaseUrl}/${iconStyle}/${platform}.png`;
+		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>`;
+	}).join("\n")}
 </mj-social>`;
 }
-
-// src/renderers/menu.ts
+//#endregion
+//#region src/renderers/menu.ts
+/**
+* Render a menu block to MJML markup.
+* Uses mj-text with inline <a> tags separated by styled <span> separators.
+*/
 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}"
+	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 = renderFontFamilyAttr$1(block.fontFamily, context);
+	const align = block.textAlign;
+	return `<mj-text
+  font-size="${block.fontSize}px"
+  color="${escapeAttr(block.color)}"
   align="${align}"
   line-height="1.5"
   padding="${padding}"${bgColor}${fontFamilyAttr}${visibilityAttr}
->${content}</mj-text>`;
+>${renderMenuItems(block)}</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("");
+	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
+	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");
+	return `<a href="${url}" style="${styles.join("; ")}"${target}>${text}</a>`;
+}
+function renderFontFamilyAttr$1(fontFamily, context) {
+	if (!fontFamily) return "";
+	return ` font-family="${context.resolveFontFamily(fontFamily)}"`;
+}
+//#endregion
+//#region src/renderers/table.ts
+/**
+* Render a table block to MJML markup.
+* Uses mj-text wrapping an HTML <table> with styled <tr>/<td> elements.
+*/
 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}"
+	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 = renderFontFamilyAttr(block.fontFamily, context);
+	return `<mj-text
+  font-size="${block.fontSize}px"
+  color="${escapeAttr(block.color)}"
+  align="${block.textAlign}"
   line-height="1.5"
   padding="${padding}"${bgColor}${fontFamilyAttr}${visibilityAttr}
->${tableHtml}</mj-text>`;
+>${renderTableElement(block)}</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>`;
+	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>`;
+	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}"`;
+	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}>`;
 }
-
-// src/renderers/custom.ts
+function renderFontFamilyAttr(fontFamily, context) {
+	if (!fontFamily) return "";
+	return ` font-family="${context.resolveFontFamily(fontFamily)}"`;
+}
+//#endregion
+//#region src/renderers/custom.ts
+/**
+* Render a custom block to MJML markup.
+*
+* Custom block HTML resolution order:
+*   1. `context.customBlockHtml` map — populated by `renderToMjml` when the
+*      caller passes a `renderCustomBlock` option (typical for editor
+*      consumers and headless callers wiring their own resolver).
+*   2. `block.renderedHtml` — populated by an external pre-render step
+*      (e.g., a previous render pass that mutated the block).
+*   3. Empty — block omitted from output.
+*/
 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}>
+	if (isHiddenOnAll(block)) return "";
+	const content = context.customBlockHtml.get(block.id) ?? block.renderedHtml;
+	if (!content || content === "") return "";
+	const visibilityAttr = getCssClassAttr(block);
+	return `<mj-text padding="${toPaddingString(block.styles.padding)}"${bgAttr(block.styles.backgroundColor, "container")}${visibilityAttr}>
 ${content}
 </mj-text>`;
 }
-
-// src/renderers/section.ts
-import { isSection } from "@templatical/types";
-
-// src/columns.ts
+//#endregion
+//#region src/columns.ts
+/**
+* Get width percentages for each column in a layout.
+*/
 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%"];
-  }
-}
+	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%"];
+	}
+}
+/**
+* Get width in pixels for each column in a layout.
+*/
 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];
-  }
+	switch (layout) {
+		case "2": return [containerWidth * .5, containerWidth * .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];
+	}
+}
+//#endregion
+//#region src/display-condition.ts
+/**
+* Wrap rendered block markup in the block's liquid display-condition guards
+* (`<mj-raw>{% if %}</mj-raw>` … `<mj-raw>{% endif %}</mj-raw>`), if present.
+*
+* Returns the input unchanged when the block has no display condition, and an
+* empty string when the rendered markup is empty (a hidden block) so callers
+* can keep using an `=== ""` filter to drop it.
+*
+* Used for BOTH top-level blocks (`index.ts`) and blocks nested inside section
+* columns (`renderers/section.ts`). A condition on a nested block must emit the
+* same guards as a top-level one — otherwise conditional content placed inside
+* a multi-column section renders unconditionally for every recipient.
+*/
+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>`;
 }
-
-// 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}">
+//#endregion
+//#region src/renderers/section.ts
+/**
+* Render a section block with columns to MJML markup.
+*/
+function renderSection(block, context, renderBlock) {
+	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$1(column, context.allowHtmlBlocks).filter((child) => !isSection(child));
+		const columnContext = context.withContainerWidth(columnWidth);
+		const columnBlocks = filteredColumn.map((child) => wrapWithDisplayCondition(child, renderBlock(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}
+	}
+	return `<mj-section${bgColor} padding="${padding}"${visibilityAttr}>
+${columnsContent.join("\n")}
 </mj-section>`;
 }
-function filterHtmlBlocks(blocks, allowHtmlBlocks) {
-  if (allowHtmlBlocks) {
-    return blocks;
-  }
-  return blocks.filter((block) => block.type !== "html");
-}
-
-// src/renderers/video.ts
+/**
+* Filter out HTML blocks if they are not allowed.
+*/
+function filterHtmlBlocks$1(blocks, allowHtmlBlocks) {
+	if (allowHtmlBlocks) return blocks;
+	return blocks.filter((block) => block.type !== "html");
+}
+//#endregion
+//#region src/renderers/video.ts
+/**
+* Extract video thumbnail URL from common platforms.
+* Works without server-side processing — YouTube and Vimeo thumbnails are publicly accessible.
+*/
 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;
-}
+	if (customThumbnail) return customThumbnail;
+	if (!url) return null;
+	for (const pattern of [/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/, /youtube\.com\/shorts\/([a-zA-Z0-9_-]{11})/]) {
+		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;
+}
+/**
+* Render a video block to MJML markup.
+* Videos in email are rendered as a linked thumbnail image pointing to the video URL.
+*/
 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}"
+	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);
+	return `<mj-image
+  src="${escapeAttr(thumbnailUrl)}"
+  alt="${escapeAttr(block.alt)}"
   width="${width}"
-  align="${align}"
+  align="${block.align}"
   padding="${padding}"
-  href="${href}"
+  href="${escapeAttr(block.url)}"
   target="_blank"
   rel="noopener"${bgColor}${visibilityAttr}
 />`;
 }
-
-// src/renderers/index.ts
+//#endregion
+//#region src/renderers/index.ts
+/**
+* Render a single block to MJML markup.
+* Dispatches to the appropriate block-type renderer.
+*/
 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 (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
+	if (isSection(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 (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 "";
+}
+//#endregion
+//#region src/index.ts
+/**
+* Render template content to an MJML string.
+*
+* The function is async because resolving custom blocks may require
+* asynchronous work (e.g., the editor's liquid renderer dynamically imports
+* `liquidjs`). When the content has no custom blocks or `renderCustomBlock`
+* is omitted, no async work is performed but the function still resolves
+* synchronously — i.e., it always returns a Promise.
+*/
 async function renderToMjml(content, options) {
-  const customFonts = options?.customFonts ?? [];
-  const defaultFallbackFont = options?.defaultFallbackFont ?? "Arial, sans-serif";
-  const allowHtmlBlocks = options?.allowHtmlBlocks ?? true;
-  const socialIconsBaseUrl = stripTrailingSlash(
-    options?.socialIconsBaseUrl ?? DEFAULT_SOCIAL_ICONS_BASE_URL
-  );
-  const customBlockHtml = await resolveCustomBlocks(
-    content,
-    options?.renderCustomBlock
-  );
-  const renderContext = new RenderContext(
-    content.settings.width,
-    customFonts,
-    defaultFallbackFont,
-    allowHtmlBlocks,
-    customBlockHtml,
-    socialIconsBaseUrl
-  );
-  const blocks = filterHtmlBlocks2(content.blocks, allowHtmlBlocks);
-  const fontFamily = renderContext.resolveFontFamily(
-    content.settings.fontFamily
-  );
-  const backgroundColor = content.settings.backgroundColor;
-  const bodyContent = blocks.map((block) => renderTopLevelBlock(block, renderContext)).filter((value) => value !== "").join("\n");
-  const fontDeclarations = generateFontDeclarations(customFonts);
-  const previewTag = generatePreviewTag(content.settings.preheaderText);
-  const lang = escapeAttr(content.settings.locale);
-  return `<mjml lang="${lang}">
+	const customFonts = options?.customFonts ?? [];
+	const defaultFallbackFont = options?.defaultFallbackFont ?? "Arial, sans-serif";
+	const allowHtmlBlocks = options?.allowHtmlBlocks ?? true;
+	const socialIconsBaseUrl = stripTrailingSlash(options?.socialIconsBaseUrl ?? DEFAULT_SOCIAL_ICONS_BASE_URL);
+	const customBlockHtml = await resolveCustomBlocks(content, options?.renderCustomBlock);
+	const customBlockStylesheets = collectCustomBlockStylesheets(content, options?.getCustomBlockStylesheet);
+	const renderContext = new RenderContext(content.settings.width, customFonts, defaultFallbackFont, allowHtmlBlocks, customBlockHtml, socialIconsBaseUrl);
+	const blocks = filterHtmlBlocks(content.blocks, allowHtmlBlocks);
+	const fontFamily = renderContext.resolveFontFamily(content.settings.fontFamily);
+	const backgroundColor = content.settings.backgroundColor;
+	const bodyContent = blocks.map((block) => renderTopLevelBlock(block, renderContext)).filter((value) => value !== "").join("\n");
+	const fontDeclarations = generateFontDeclarations(customFonts);
+	const previewTag = generatePreviewTag(content.settings.preheaderText);
+	return `<mjml lang="${escapeAttr(content.settings.locale)}">
   <mj-head>${previewTag}
     <mj-attributes>
       <mj-all font-family="${fontFamily}" />
@@ -866,124 +764,119 @@ async function renderToMjml(content, options) {
       @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) {
+      @media only screen and (min-width: 481px) {
         .tpl-hide-desktop { display: none !important; mso-hide: all !important; }
       }
-    </mj-style>
+    </mj-style>${renderCustomBlockStylesheets(customBlockStylesheets)}
   </mj-head>
   <mj-body width="${renderContext.containerWidth}px" background-color="${backgroundColor}">
 ${bodyContent}
   </mj-body>
 </mjml>`;
 }
+/**
+* Render a top-level block. Sections are rendered directly,
+* non-section blocks are wrapped in a default section/column.
+*/
 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>`;
+	if (isSection(block)) return wrapWithDisplayCondition(block, renderBlock(block, context));
+	return wrapWithDisplayCondition(block, wrapInSection(renderBlock(block, context)));
 }
+/**
+* Wrap block content in a default mj-section/mj-column for non-section blocks.
+*/
 function wrapInSection(content) {
-  if (content === "") {
-    return "";
-  }
-  return `<mj-section>
+	if (content === "") return "";
+	return `<mj-section>
   <mj-column>
 ${content}
   </mj-column>
 </mj-section>`;
 }
 function stripTrailingSlash(url) {
-  return url.endsWith("/") ? url.slice(0, -1) : url;
+	return url.endsWith("/") ? url.slice(0, -1) : url;
 }
 function generatePreviewTag(preheaderText) {
-  if (!preheaderText) {
-    return "";
-  }
-  const trimmed = preheaderText.trim();
-  if (trimmed === "") {
-    return "";
-  }
-  const escaped = escapeHtml(trimmed);
-  return `
-    <mj-preview>${escaped}</mj-preview>`;
+	if (!preheaderText) return "";
+	const trimmed = preheaderText.trim();
+	if (trimmed === "") return "";
+	return `\n    <mj-preview>${escapeHtml(trimmed)}</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");
+	if (customFonts.length === 0) return "";
+	return customFonts.map((font) => `\n    <mj-font name="${escapeAttr(font.name)}" href="${escapeAttr(font.url)}" />`).join("");
 }
+/**
+* Filter out HTML blocks if they are not allowed.
+*/
+function filterHtmlBlocks(blocks, allowHtmlBlocks) {
+	if (allowHtmlBlocks) return blocks;
+	return blocks.filter((block) => block.type !== "html");
+}
+/**
+* Walk the content tree, collect every custom block, then resolve each in
+* parallel via the supplied callback. Returns a map keyed by block id that
+* the synchronous render pass reads from. If no callback is provided, returns
+* an empty map and the sync pass falls back to `block.renderedHtml`.
+*
+* Per-block failures bubble up — the caller decides whether to swallow or
+* rethrow. We don't replace failures with placeholders here because that's
+* a policy decision (the editor swallows; a strict CLI may want to fail).
+*/
 async function resolveCustomBlocks(content, renderCustomBlock) {
-  const result = /* @__PURE__ */ new Map();
-  if (!renderCustomBlock) {
-    return result;
-  }
-  const customBlocks = [];
-  collectCustomBlocks(content.blocks, 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;
+	const result = /* @__PURE__ */ new Map();
+	if (!renderCustomBlock) return result;
+	const customBlocks = [];
+	collectCustomBlocks(content.blocks, 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);
-      }
-    }
-  }
-}
-export {
-  DEFAULT_SOCIAL_ICONS_BASE_URL,
-  RenderContext,
-  convertMergeTagsToValues,
-  escapeAttr,
-  escapeHtml,
-  getCssClassAttr,
-  getCssClasses,
-  getWidthPercentages,
-  getWidthPixels,
-  isHiddenOnAll,
-  renderBlock,
-  renderToMjml,
-  toPaddingString
-};
+	for (const block of blocks) {
+		if (isCustomBlock(block)) {
+			out.push(block);
+			continue;
+		}
+		if (isSection(block)) for (const column of block.children) collectCustomBlocks(column, out);
+	}
+}
+/**
+* Walk the content tree, find every unique `customType`, ask the consumer's
+* resolver for that definition's stylesheet, and return the non-empty,
+* content-deduped set in insertion order.
+*
+* Content-level dedupe (not just by customType) means two definitions that
+* happen to ship the same stylesheet string emit it only once — cheap and
+* matches the "one rule, emitted once" mental model. Whitespace-only and
+* empty stylesheets are skipped.
+*/
+function collectCustomBlockStylesheets(content, resolver) {
+	if (!resolver) return [];
+	const customBlocks = [];
+	collectCustomBlocks(content.blocks, customBlocks);
+	if (customBlocks.length === 0) return [];
+	const seenTypes = /* @__PURE__ */ new Set();
+	const seenContent = /* @__PURE__ */ new Set();
+	const stylesheets = [];
+	for (const block of customBlocks) {
+		if (seenTypes.has(block.customType)) continue;
+		seenTypes.add(block.customType);
+		const css = resolver(block.customType);
+		if (!css) continue;
+		const trimmed = css.trim();
+		if (trimmed === "" || seenContent.has(trimmed)) continue;
+		seenContent.add(trimmed);
+		stylesheets.push(trimmed);
+	}
+	return stylesheets;
+}
+function renderCustomBlockStylesheets(stylesheets) {
+	if (stylesheets.length === 0) return "";
+	return stylesheets.map((css) => `\n    <mj-style>\n${css}\n    </mj-style>`).join("");
+}
+//#endregion
+export { DEFAULT_SOCIAL_ICONS_BASE_URL, RenderContext, convertMergeTagsToValues, escapeAttr, escapeHtml, getCssClassAttr, getCssClasses, getWidthPercentages, getWidthPixels, isHiddenOnAll, renderBlock, renderToMjml, toPaddingString };
+
 //# sourceMappingURL=index.js.map