create-email-renderer 0.1.1 → 0.2.0

package/dist/html-render.js

@@ -2,7 +2,9 @@
 // EmailTemplate (blocks.tsx): mismas estructuras (tablas + estilos inline),
 // mismas variables, mismo richtext. Debe mantenerse visualmente sincronizado.
 import { escapeHtml, renderRichText } from "./richtext.js";
-import { DEFAULT_PALETTE, DEFAULT_SETTINGS } from "./default-blocks.js";
+import { DEFAULT_BLOCK_LIBRARY, DEFAULT_PALETTE, DEFAULT_SETTINGS, } from "./default-blocks.js";
+import { getBlockRenderHtml, registerBlock } from "./registry.js";
+import { applyTracking } from "./tracking.js";
 import { resolveVariables, SAMPLE_CONTEXT } from "./variables.js";
 const alignMap = {
     left: "left",
@@ -38,13 +40,58 @@ const styleToString = (style) => Object.entries(style)
 })
     .join(";");
 const blockPadding = (props) => {
-    const py = "paddingY" in props ? (props.paddingY ?? 0) : 0;
-    const px = "paddingX" in props ? (props.paddingX ?? 0) : 0;
-    return { padding: `${py}px ${px}px` };
+    const layout = props;
+    const py = "paddingY" in props ? layout.paddingY : undefined;
+    const px = "paddingX" in props ? layout.paddingX : undefined;
+    const top = layout.paddingTop;
+    const right = layout.paddingRight;
+    const bottom = layout.paddingBottom;
+    const left = layout.paddingLeft;
+    // Sin overrides por lado emitimos el shorthand (paridad con versiones previas).
+    if (top === undefined && right === undefined && bottom === undefined && left === undefined) {
+        return { padding: `${py ?? 0}px ${px ?? 0}px` };
+    }
+    return {
+        paddingTop: top ?? py ?? 0,
+        paddingRight: right ?? px ?? 0,
+        paddingBottom: bottom ?? py ?? 0,
+        paddingLeft: left ?? px ?? 0,
+    };
+};
+/** Padding por lado + márgenes externos del bloque. */
+const blockSpacing = (props) => {
+    const layout = props;
+    return {
+        ...blockPadding(props),
+        ...(layout.marginTop !== undefined ? { marginTop: layout.marginTop } : {}),
+        ...(layout.marginBottom !== undefined
+            ? { marginBottom: layout.marginBottom }
+            : {}),
+    };
 };
 /** Tabla full-width con una celda: equivalente email-safe de <Section>. */
-const section = (style, content) => `<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td style="${styleToString(style)}">${content}</td></tr></tbody></table>`;
+const section = (style, content) => {
+    // Los márgenes no aplican a un <td>; se mueven a la tabla contenedora.
+    const cell = {};
+    const outer = {};
+    for (const [k, v] of Object.entries(style)) {
+        if (k.startsWith("margin"))
+            outer[k] = v;
+        else
+            cell[k] = v;
+    }
+    const outerStyle = styleToString(outer);
+    return `<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"${outerStyle ? ` style="${outerStyle}"` : ""}><tbody><tr><td style="${styleToString(cell)}">${content}</td></tr></tbody></table>`;
+};
 const text = (content, style) => `<p style="${styleToString(style)}">${content}</p>`;
+/**
+ * Enlace si hay `href`; si no, el mismo contenido como texto (`<span>`).
+ * Evita emitir `<a href="">`, que recargaría el correo al pulsarlo y se
+ * anunciaría como enlace. Un CTA sin destino se sigue viendo igual.
+ */
+const linkOrSpan = (href, style, inner, attributes = ' target="_blank"') => href
+    ? `<a href="${escapeHtml(href)}"${attributes} style="${style}">${inner}</a>`
+    : `<span style="${style}">${inner}</span>`;
 const renderHeader = (props, context, palette) => {
     const logo = props.logoUrl
         ? `<img src="${escapeHtml(resolveVariables(props.logoUrl, context))}" alt="${escapeHtml(props.brandName)}" width="140" style="display:inline-block;border:0;outline:none;" />`
@@ -55,7 +102,7 @@ const renderHeader = (props, context, palette) => {
     return section({
         backgroundColor: props.backgroundColor || palette.DARK,
         textAlign: alignMap[props.align || "center"],
-        ...blockPadding(props),
+        ...blockSpacing(props),
     }, logo + tagline);
 };
 const renderHero = (props, context, palette) => {
@@ -68,7 +115,7 @@ const renderHero = (props, context, palette) => {
         : "";
     return section({
         textAlign: alignMap[props.align || "center"],
-        ...blockPadding(props),
+        ...blockSpacing(props),
         ...(props.backgroundColor
             ? { backgroundColor: props.backgroundColor }
             : {}),
@@ -76,36 +123,77 @@ const renderHero = (props, context, palette) => {
 };
 const renderHeading = (props, context, palette) => section({
     textAlign: alignMap[props.align || "left"],
-    ...blockPadding(props),
+    ...blockSpacing(props),
     ...(props.backgroundColor
         ? { backgroundColor: props.backgroundColor }
         : {}),
 }, `<div style="${styleToString({ color: props.color || palette.DARK, fontSize: props.size ?? 22, lineHeight: 1.3, margin: 0, fontWeight: 700 })}">${renderRichText(resolveVariables(props.text, context))}</div>`);
 const renderText = (props, context, palette) => section({
     textAlign: alignMap[props.align || "left"],
-    ...blockPadding(props),
+    ...blockSpacing(props),
     ...(props.backgroundColor
         ? { backgroundColor: props.backgroundColor }
         : {}),
 }, `<div style="${styleToString({ color: props.color || palette.INK, fontSize: props.size || 15, lineHeight: 1.6, margin: 0 })}">${renderRichText(resolveVariables(props.text, context))}</div>`);
+/** Badge circular con el número de la fila (24px, como react.email). */
+const listBadge = (label, accent) => `<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td width="24" height="24" align="center" valign="middle" style="${styleToString({ width: 24, height: 24, borderRadius: 9999, backgroundColor: accent, color: "#ffffff", fontSize: 12, fontWeight: 600, lineHeight: 1, textAlign: "center" })}">${escapeHtml(label)}</td></tr></tbody></table>`;
+/** Fila de `numbered` / `with-image`: badge + título + descripción (+ imagen/enlace). */
+const renderListEntry = (entry, index, context, palette, opts) => {
+    const badge = listBadge(entry.number && entry.number.trim() !== ""
+        ? entry.number
+        : String(index + 1), opts.accent);
+    const title = `<div style="${styleToString({ color: palette.DARK, fontSize: 18, fontWeight: 700, lineHeight: 1.4, margin: "0 0 4px" })}">${renderRichText(resolveVariables(entry.title, context))}</div>`;
+    const description = entry.description
+        ? `<div style="${styleToString({ color: palette.INK, fontSize: 13, lineHeight: 1.5, margin: 0 })}">${renderRichText(resolveVariables(entry.description, context))}</div>`
+        : "";
+    const link = entry.href
+        ? `<a href="${escapeHtml(resolveVariables(entry.href, context))}" target="_blank" style="${styleToString({ color: opts.accent, fontSize: 14, fontWeight: 600, textDecoration: "none", display: "block", marginTop: 12 })}">${escapeHtml(entry.linkLabel || "Aprender más →")}</a>`
+        : "";
+    const table = (cells) => `<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr>${cells}</tr></tbody></table>`;
+    if (!opts.withImage) {
+        // Badge en su propia celda a la izquierda del texto.
+        return table(`<td width="24" valign="top" style="width:24px;padding-right:18px;">${badge}</td><td valign="top">${title}${description}${link}</td>`);
+    }
+    // `with-image` va sin número: imagen a la izquierda y texto a la derecha.
+    const image = entry.image
+        ? `<img src="${escapeHtml(resolveVariables(entry.image, context))}" alt="${escapeHtml(entry.title)}" width="100%" height="${opts.imageHeight}" style="${styleToString({ width: "100%", maxWidth: "100%", display: "block", border: 0, borderRadius: opts.radius, height: opts.imageHeight, objectFit: "cover", objectPosition: "center" })}" />`
+        : text("(Imagen)", { color: palette.CREAM_DIM, fontSize: 12, margin: 0 });
+    return table(`<td width="40%" valign="top" style="width:40%;padding-right:24px;">${image}</td><td width="60%" valign="top" style="width:60%;padding-right:24px;">${title}${description}${link}</td>`);
+};
 const renderList = (props, context, palette) => {
-    const items = props.items
-        .map((item) => `<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-bottom:8px;"><tbody><tr><td width="24" valign="top">${text(escapeHtml(props.icon || "✓"), { color: palette.GOLD, fontWeight: 700, margin: 0, fontSize: 14 })}</td><td valign="top"><div style="${styleToString({ color: palette.INK, fontSize: 14, lineHeight: 1.5, margin: 0 })}">${renderRichText(resolveVariables(item, context))}</div></td></tr></tbody></table>`)
-        .join("");
+    const accent = props.accentColor || palette.GOLD;
+    let content;
+    if (props.variant === "numbered" || props.variant === "with-image") {
+        const gap = props.gap ?? 24;
+        content = (props.entries || [])
+            .map((entry, i) => `<div style="${styleToString({ marginBottom: i === (props.entries || []).length - 1 ? 0 : gap })}">${renderListEntry(entry, i, context, palette, {
+            accent,
+            radius: props.radius ?? 4,
+            imageHeight: props.imageHeight ?? 168,
+            withImage: props.variant === "with-image",
+        })}</div>`)
+            .join("");
+    }
+    else {
+        const gap = props.gap ?? 8;
+        content = props.items
+            .map((item) => `<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-bottom:${gap}px;"><tbody><tr><td width="24" valign="top">${text(escapeHtml(props.icon || "✓"), { color: palette.GOLD, fontWeight: 700, margin: 0, fontSize: 14 })}</td><td valign="top"><div style="${styleToString({ color: palette.INK, fontSize: 14, lineHeight: 1.5, margin: 0 })}">${renderRichText(resolveVariables(item, context))}</div></td></tr></tbody></table>`)
+            .join("");
+    }
     return section({
-        ...blockPadding(props),
+        ...blockSpacing(props),
         ...(props.backgroundColor
             ? { backgroundColor: props.backgroundColor }
             : {}),
-    }, items);
+    }, content);
 };
 const renderButton = (props, context, palette) => section({
     textAlign: alignMap[props.align || "center"],
-    ...blockPadding(props),
+    ...blockSpacing(props),
     ...(props.blockBackgroundColor
         ? { backgroundColor: props.blockBackgroundColor }
         : {}),
-}, `<a href="${escapeHtml(resolveVariables(props.href, context))}" target="_blank" style="${styleToString({ backgroundColor: props.backgroundColor || palette.GOLD, color: props.color || palette.DARK, fontWeight: 700, padding: "14px 28px", borderRadius: 999, fontSize: 14, textTransform: "uppercase", letterSpacing: "0.5px", display: "inline-block", textDecoration: "none" })}">${escapeHtml(resolveVariables(props.label, context))}</a>`);
+}, linkOrSpan(resolveVariables(props.href, context), styleToString({ backgroundColor: props.backgroundColor || palette.GOLD, color: props.color || palette.DARK, fontWeight: 700, padding: "14px 28px", borderRadius: 999, fontSize: 14, textTransform: "uppercase", letterSpacing: "0.5px", display: "inline-block", textDecoration: "none" }), escapeHtml(resolveVariables(props.label, context))));
 const renderImage = (props, context, palette) => {
     let content;
     if (props.src) {
@@ -123,7 +211,7 @@ const renderImage = (props, context, palette) => {
     }
     return section({
         textAlign: alignMap[props.align || "center"],
-        ...blockPadding(props),
+        ...blockSpacing(props),
         ...(props.backgroundColor
             ? { backgroundColor: props.backgroundColor }
             : {}),
@@ -136,7 +224,7 @@ const renderQuote = (props, context, palette) => {
         : "";
     return section({
         borderLeft: `${props.borderWidth ?? 3}px solid ${props.borderColor || palette.GOLD}`,
-        ...blockPadding(props),
+        ...blockSpacing(props),
         paddingLeft: (props.paddingX ?? 32) + 16,
         ...(props.marginLeft ? { marginLeft: `${props.marginLeft}px` } : {}),
         ...(props.backgroundColor
@@ -145,20 +233,40 @@ const renderQuote = (props, context, palette) => {
     }, quote + author);
 };
 const renderColumns = (props, context, palette) => {
-    const cols = (props.columns || [])
-        .map((col) => `<td width="50%" valign="top" style="width:50%;padding-right:8px;"><div style="${styleToString({ color: palette.INK, fontSize: 14, lineHeight: 1.5, margin: 0 })}">${renderRichText(resolveVariables(col.text, context))}</div></td>`)
+    const gutter = props.gap ?? 8;
+    const columns = props.columns || [];
+    const cols = columns
+        .map((col, i) => {
+        const isLast = i === columns.length - 1;
+        const inner = (col.blocks || [])
+            .map((child) => renderBlock(child, context, palette))
+            .join("");
+        return `<td width="50%" valign="top" style="width:50%;${isLast ? "" : `padding-right:${gutter}px;`}"><table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td>${inner}</td></tr></tbody></table></td>`;
+    })
         .join("");
     return section({
-        ...blockPadding(props),
+        ...blockSpacing(props),
         ...(props.backgroundColor
             ? { backgroundColor: props.backgroundColor }
             : {}),
     }, `<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr>${cols}</tr></tbody></table>`);
 };
+const renderContainer = (props, context, palette) => {
+    const inner = (props.blocks || [])
+        .map((child) => renderBlock(child, context, palette))
+        .join("");
+    return section({
+        ...blockSpacing(props),
+        ...(props.backgroundColor
+            ? { backgroundColor: props.backgroundColor }
+            : {}),
+    }, inner);
+};
 const renderDivider = (props) => {
+    const spacing = blockSpacing(props);
     const style = props.height !== undefined
-        ? { padding: `${props.height}px ${props.paddingX ?? 32}px` }
-        : blockPadding(props);
+        ? { ...spacing, padding: `${props.height}px ${props.paddingX ?? 32}px` }
+        : spacing;
     return section({
         ...style,
         ...(props.backgroundColor
@@ -174,7 +282,7 @@ const renderSpacer = (props) => section({
         ? { backgroundColor: props.backgroundColor }
         : {}),
 }, "&nbsp;");
-const renderFooter = (props, context, palette) => {
+const renderFooterClassic = (props, context, palette) => {
     const body = text(escapeHtml(props.text
         ? resolveVariables(props.text, context)
         : "Recibes este correo por estar registrado en nuestra plataforma."), { color: "#f5f1e8", fontSize: 12, lineHeight: 1.6, margin: "0 0 12px" });
@@ -187,49 +295,580 @@ const renderFooter = (props, context, palette) => {
         textAlign: "center",
     }, body + brand);
 };
-const renderBlock = (block, context, palette) => {
-    switch (block.type) {
-        case "header":
-            return renderHeader(block.props, context, palette);
+const renderFooter = (props, context, palette) => {
+    // "classic" (default) mantiene la barra oscura con text/brandName.
+    if (!props.variant || props.variant === "classic") {
+        return renderFooterClassic(props, context, palette);
+    }
+    // "one-column" / "two-columns": layout de columnas con bloques anidados.
+    return section({
+        textAlign: alignMap[props.align || "left"],
+        ...blockSpacing(props),
+        ...bgStyle(props),
+    }, renderColumnsTable(props.columns || [], props.gap ?? 12, context, palette));
+};
+const chunkRows = (arr, size) => {
+    const out = [];
+    for (let i = 0; i < arr.length; i += size)
+        out.push(arr.slice(i, i + size));
+    return out;
+};
+const bgStyle = (props) => props.backgroundColor ? { backgroundColor: props.backgroundColor } : {};
+const isRemoteAsset = (value) => /^(https?:)?\/\//.test(value) || value.startsWith("data:");
+const renderSocial = (props, context, palette) => {
+    const accent = props.accentColor || palette.GOLD;
+    const logo = props.mode === "logo";
+    const size = props.iconSize ?? 32;
+    const half = (props.gap ?? 6) / 2;
+    const links = (props.links || [])
+        .map((l) => {
+        const href = resolveVariables(l.href, context);
+        if (logo) {
+            const icon = (l.icon || "").trim();
+            const inner = isRemoteAsset(icon)
+                ? `<img src="${escapeHtml(resolveVariables(icon, context))}" alt="${escapeHtml(l.label)}" width="${size}" height="${size}" style="display:inline-block;border:0;border-radius:50%;width:${size}px;height:${size}px;object-fit:cover;" />`
+                : `<span style="${styleToString({ display: "inline-block", width: size, height: size, lineHeight: `${size}px`, textAlign: "center", borderRadius: "50%", backgroundColor: accent, color: palette.DARK, fontSize: Math.round(size * 0.4), fontWeight: 700 })}">${escapeHtml(icon || resolveVariables(l.label, context).slice(0, 2))}</span>`;
+            return linkOrSpan(href, `display:inline-block;margin:0 ${half}px;text-decoration:none;`, inner);
+        }
+        return linkOrSpan(href, styleToString({ color: props.color || palette.INK, fontSize: 13, fontWeight: 600, textDecoration: "none", margin: "0 10px", display: "inline-block" }), escapeHtml(resolveVariables(l.label, context)));
+    })
+        .join("");
+    return section({
+        textAlign: alignMap[props.align || "center"],
+        ...blockSpacing(props),
+        ...bgStyle(props),
+    }, links);
+};
+/** Gutter por defecto entre celdas de la galería (2 * 6px de padding). */
+const GALLERY_GUTTER = 12;
+/** `<img>` (o placeholder) de una imagen de la galería, con enlace opcional. */
+const galleryImage = (img, context, palette, style) => {
+    const el = !img || !img.src
+        ? text("(Imagen)", {
+            color: palette.CREAM_DIM,
+            fontSize: 12,
+            margin: 0,
+        })
+        : style.height > 0
+            ? `<img src="${escapeHtml(resolveVariables(img.src, context))}" alt="${escapeHtml(img.alt || "")}" width="100%" height="${style.height}" style="${styleToString({ width: "100%", maxWidth: "100%", display: "block", border: 0, borderRadius: style.radius, height: style.height, objectFit: "cover" })}" />`
+            : `<img src="${escapeHtml(resolveVariables(img.src, context))}" alt="${escapeHtml(img.alt || "")}" width="240" style="max-width:100%;display:block;border:0;border-radius:${style.radius}px;" />`;
+    if (!img || !img.href)
+        return el;
+    return `<a href="${escapeHtml(resolveVariables(img.href, context))}" target="_blank" rel="noopener">${el}</a>`;
+};
+const galleryTable = (rows) => `<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody>${rows}</tbody></table>`;
+/** Cuadrícula clásica: filas de `columns` (2 o 3) imágenes. */
+const renderGalleryGrid = (images, context, palette, style, columns) => {
+    const cols = columns === 3 ? 3 : 2;
+    const width = Math.floor(100 / cols);
+    const rows = chunkRows(images, cols)
+        .map((row) => {
+        const cells = row
+            .map((img) => {
+            const inner = galleryImage(img, context, palette, style);
+            return `<td width="${width}%" valign="top" style="width:${width}%;padding:${style.half}px;">${inner}</td>`;
+        })
+            .join("");
+        return `<tr>${cells}</tr>`;
+    })
+        .join("");
+    return galleryTable(rows);
+};
+/** Tres columnas en una sola fila. */
+const renderGalleryColumnsLayout = (images, context, palette, style) => {
+    const width = Math.round((100 / 3) * 100) / 100;
+    const cells = [0, 1, 2]
+        .map((i) => {
+        // El gutter se reparte: la primera solo a la derecha, la última solo a la izquierda.
+        const padding = i === 0
+            ? `padding-right:${style.half}px;`
+            : i === 2
+                ? `padding-left:${style.half}px;`
+                : `padding-left:${style.half}px;padding-right:${style.half}px;`;
+        const inner = galleryImage(images[i], context, palette, style);
+        return `<td width="${width}%" valign="top" style="width:${width}%;${padding}">${inner}</td>`;
+    })
+        .join("");
+    return galleryTable(`<tr>${cells}</tr>`);
+};
+/** Dos apiladas a la izquierda + una alta a la derecha. */
+const renderGalleryHorizontal = (images, context, palette, style) => {
+    const left = galleryTable(`<tr><td style="padding-bottom:${style.half}px;">${galleryImage(images[0], context, palette, style)}</td></tr>` +
+        `<tr><td style="padding-top:${style.half}px;">${galleryImage(images[1], context, palette, style)}</td></tr>`);
+    // La imagen alta cubre las dos apiladas más el gutter que las separa.
+    const tall = style.height > 0 ? style.height * 2 + style.half * 2 : style.height;
+    const right = galleryImage(images[2], context, palette, {
+        ...style,
+        height: tall,
+    });
+    return galleryTable(`<tr><td width="50%" valign="top" style="width:50%;padding-right:${style.half}px;">${left}</td>` +
+        `<td width="50%" valign="top" style="width:50%;padding-left:${style.half}px;padding-top:${style.half}px;padding-bottom:${style.half}px;">${right}</td></tr>`);
+};
+/** Una imagen ancha arriba + dos columnas debajo. */
+const renderGalleryVertical = (images, context, palette, style) => {
+    const hero = galleryImage(images[0], context, palette, style);
+    const below = [1, 2]
+        .map((i) => {
+        const inner = galleryImage(images[i], context, palette, style);
+        const padding = i === 1
+            ? `padding-right:${style.half}px;`
+            : `padding-left:${style.half}px;`;
+        return `<td width="50%" valign="top" style="width:50%;padding-top:${style.half}px;${padding}">${inner}</td>`;
+    })
+        .join("");
+    return galleryTable(`<tr><td style="padding-bottom:${style.half}px;">${hero}</td></tr>` +
+        `<tr>${below}</tr>`);
+};
+const renderGallery = (props, context, palette) => {
+    const style = {
+        radius: typeof props.radius === "number" ? props.radius : 6,
+        height: typeof props.imageHeight === "number" ? props.imageHeight : 0,
+        half: (props.gap ?? GALLERY_GUTTER) / 2,
+    };
+    const images = props.images || [];
+    let content;
+    switch (props.variant) {
+        case "three-columns":
+            content = renderGalleryColumnsLayout(images, context, palette, style);
+            break;
+        case "horizontal":
+            content = renderGalleryHorizontal(images, context, palette, style);
+            break;
+        case "vertical":
+            content = renderGalleryVertical(images, context, palette, style);
+            break;
+        // "grid" (default) y cualquier variante desconocida.
+        default:
+            content = renderGalleryGrid(images, context, palette, style, props.columns ?? 2);
+    }
+    return section({ ...blockSpacing(props), ...bgStyle(props) }, content);
+};
+const renderStats = (props, context, palette) => {
+    const stats = props.stats || [];
+    const width = stats.length > 0 ? Math.floor(100 / stats.length) : 100;
+    const cells = stats
+        .map((s) => `<td width="${width}%" align="center" valign="top" style="width:${width}%;padding:8px;"><div style="${styleToString({ color: props.accentColor || palette.GOLD, fontSize: 28, fontWeight: 700, lineHeight: 1.1, margin: 0 })}">${renderRichText(resolveVariables(s.value, context))}</div><div style="${styleToString({ color: palette.INK, fontSize: 12, margin: "6px 0 0" })}">${renderRichText(resolveVariables(s.label, context))}</div></td>`)
+        .join("");
+    return section({
+        textAlign: alignMap[props.align || "center"],
+        ...blockSpacing(props),
+        ...bgStyle(props),
+    }, `<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr>${cells}</tr></tbody></table>`);
+};
+const renderPricingCard = (props, context, palette) => {
+    const accent = props.accentColor || palette.GOLD;
+    const textColor = props.textColor || palette.INK;
+    const bullets = (props.bullets || [])
+        .map((b) => `<div style="${styleToString({ color: textColor, fontSize: 14, lineHeight: 1.6, margin: "0 0 6px" })}"><span style="${styleToString({ color: accent, fontWeight: 700 })}">✓</span> ${renderRichText(resolveVariables(b, context))}</div>`)
+        .join("");
+    const cta = props.ctaLabel
+        ? linkOrSpan(resolveVariables(props.ctaHref, context), styleToString({ backgroundColor: accent, color: palette.DARK, fontWeight: 700, padding: "12px 24px", borderRadius: 999, fontSize: 14, textTransform: "uppercase", letterSpacing: "0.5px", display: "inline-block", textDecoration: "none", marginTop: 16 }), escapeHtml(resolveVariables(props.ctaLabel, context)))
+        : "";
+    const card = `<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:420px;margin:0 auto;"><tbody><tr><td style="${styleToString({ border: "1px solid #e3dccb", borderRadius: 10, padding: 24, textAlign: "center" })}"><div style="${styleToString({ color: accent, fontSize: 13, fontWeight: 700, textTransform: "uppercase", letterSpacing: "1px", margin: "0 0 8px" })}">${renderRichText(resolveVariables(props.title, context))}</div><div style="${styleToString({ color: textColor, fontSize: 36, fontWeight: 700, lineHeight: 1.1, margin: 0 })}">${renderRichText(resolveVariables(props.price, context))}<span style="${styleToString({ fontSize: 14, fontWeight: 400, color: palette.CREAM_DIM })}">${escapeHtml(props.period || "")}</span></div><div style="${styleToString({ margin: "16px 0 0", textAlign: "left" })}">${bullets}</div>${cta}</td></tr></tbody></table>`;
+    return section({ ...blockSpacing(props), ...bgStyle(props) }, card);
+};
+/** Botón ancho completo (email-safe: display:block). */
+const pricingButton = (label, href, background, color, options, context) => {
+    if (!label)
+        return "";
+    return linkOrSpan(resolveVariables(href || "", context), styleToString({ backgroundColor: background, color, borderRadius: options.radius, boxSizing: "border-box", display: "block", fontSize: options.fontSize, lineHeight: options.lineHeight, fontWeight: options.fontWeight, letterSpacing: "0.025em", padding: options.padding, textAlign: "center", textDecoration: "none", width: "100%" }), escapeHtml(resolveVariables(label, context)));
+};
+const pricingRichList = (items, context, style) => `<ul style="${styleToString(style)}">${items
+    .map((item) => `<li style="margin-bottom:8px">${renderRichText(resolveVariables(item, context))}</li>`)
+    .join("")}</ul>`;
+const renderPricingOffer = (props, context, palette) => {
+    const accent = props.accentColor || "#4f46e5";
+    const eyebrow = props.eyebrow
+        ? `<div style="${styleToString({ color: accent, fontSize: 12, fontWeight: 600, letterSpacing: "0.025em", lineHeight: "20px", textTransform: "uppercase", margin: "0 0 16px" })}">${escapeHtml(resolveVariables(props.eyebrow, context))}</div>`
+        : "";
+    const price = `<div style="${styleToString({ fontSize: 30, fontWeight: 700, lineHeight: "36px", margin: "0 0 12px" })}"><span style="${styleToString({ color: "#101828" })}">${renderRichText(resolveVariables(props.price, context))}</span> <span style="${styleToString({ fontSize: 16, fontWeight: 500, lineHeight: "20px" })}">${escapeHtml(props.period || "")}</span></div>`;
+    const description = props.description
+        ? `<div style="${styleToString({ color: "#374151", fontSize: 14, lineHeight: "20px", margin: "16px 0 24px" })}">${renderRichText(resolveVariables(props.description, context))}</div>`
+        : "";
+    const note = props.note
+        ? `<div style="${styleToString({ color: "#6b7280", fontSize: 12, lineHeight: "16px", fontStyle: "italic", margin: "24px 0 6px", textAlign: "center" })}">${renderRichText(resolveVariables(props.note, context))}</div>`
+        : "";
+    const note2 = props.note2
+        ? `<div style="${styleToString({ color: "#6b7280", fontSize: 12, lineHeight: "16px", margin: 0, textAlign: "center" })}">${renderRichText(resolveVariables(props.note2, context))}</div>`
+        : "";
+    const card = `<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:500px;margin:0 auto;"><tbody><tr><td style="${styleToString({ backgroundColor: "#ffffff", border: "1px solid #d1d5db", borderRadius: 12, padding: 28, textAlign: "left", color: "#4b5563" })}">${eyebrow}${price}${description}${pricingRichList(props.bullets || [], context, { color: "#6b7280", fontSize: 14, lineHeight: "24px", margin: "0 0 32px", paddingLeft: 14 })}${pricingButton(props.ctaLabel, props.ctaHref, accent, "#ffffff", { radius: 8, padding: "14px", fontWeight: 700, fontSize: 16, lineHeight: "24px" }, context)}<hr style="border:none;border-top:1px solid #e5e7eb;margin:24px 0 0" />${note}${note2}</td></tr></tbody></table>`;
+    return section({ ...blockSpacing(props), ...bgStyle(props) }, card);
+};
+const renderPricingTwoTiers = (props, context, palette) => {
+    const plans = props.plans || [];
+    const fallbackWidth = plans.length > 0 ? 100 / plans.length : 100;
+    const cells = plans
+        .map((plan, i) => {
+        const isLast = i === plans.length - 1;
+        const hl = plan.highlighted === true;
+        const accent = hl ? "#7c86ff" : props.accentColor || "#4f46e5";
+        const width = String(Math.round(fallbackWidth * 100) / 100);
+        const card = `<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td style="${styleToString({ backgroundColor: hl ? "#101828" : "#ffffff", border: `1px solid ${hl ? "#101828" : "#d1d5db"}`, borderRadius: 8, padding: 24, textAlign: "left", color: hl ? "#d1d5db" : "#4b5563" })}"><div style="${styleToString({ color: accent, fontSize: 14, fontWeight: 600, lineHeight: "20px", margin: "0 0 16px" })}">${renderRichText(resolveVariables(plan.title, context))}</div><div style="${styleToString({ fontSize: 28, fontWeight: 700, margin: "0 0 8px" })}"><span style="${styleToString({ color: hl ? "#ffffff" : "#101828" })}">${renderRichText(resolveVariables(plan.price, context))}</span> <span style="${styleToString({ fontSize: 14, lineHeight: "20px" })}">${escapeHtml(plan.period || "")}</span></div>${plan.description
+            ? `<div style="${styleToString({ margin: "12px 0 24px" })}">${renderRichText(resolveVariables(plan.description, context))}</div>`
+            : ""}${pricingRichList(plan.features || [], context, { fontSize: 12, lineHeight: "20px", margin: "0 0 30px", paddingLeft: 14 })}${pricingButton(plan.ctaLabel, plan.ctaHref, "#4f46e5", "#ffffff", { radius: 8, padding: "12px", fontWeight: 600, fontSize: 14, lineHeight: "20px" }, context)}</td></tr></tbody></table>`;
+        return `<td width="${width}%" valign="top" style="width:${width}%;${isLast ? "" : "padding-right:20px;"}">${card}</td>`;
+    })
+        .join("");
+    const header = props.heading || props.subtitle
+        ? `<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td style="text-align:center;padding-bottom:32px;">${props.heading
+            ? `<div style="${styleToString({ fontSize: 24, lineHeight: "32px", fontWeight: 700, margin: "0 0 12px" })}">${renderRichText(resolveVariables(props.heading, context))}</div>`
+            : ""}${props.subtitle
+            ? `<div style="${styleToString({ color: "#6b7280", fontSize: 14, lineHeight: "20px", margin: 0 })}">${renderRichText(resolveVariables(props.subtitle, context))}</div>`
+            : ""}</td></tr></tbody></table>`
+        : "";
+    const footer = props.footnote
+        ? `<hr style="border:none;border-top:1px solid #e5e7eb;margin:24px 0 0" /><div style="${styleToString({ color: "#6b7280", fontSize: 12, lineHeight: "16px", fontWeight: 500, margin: "30px 0 0", textAlign: "center" })}">${renderRichText(resolveVariables(props.footnote, context))}</div>`
+        : "";
+    const cards = `<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr>${cells}</tr></tbody></table>`;
+    return section({ ...blockSpacing(props), ...bgStyle(props) }, header + cards + footer);
+};
+const renderPricing = (props, context, palette) => {
+    if (props.variant === "offer") {
+        return renderPricingOffer(props, context, palette);
+    }
+    if (props.variant === "two-tiers") {
+        return renderPricingTwoTiers(props, context, palette);
+    }
+    return renderPricingCard(props, context, palette);
+};
+/** Botón de los diseños de `product` / `checkout` (estilo react.email). */
+const productButton = (label, href, context, style) => linkOrSpan(resolveVariables(href, context), styleToString({ backgroundColor: "#4f46e5", color: "#ffffff", borderRadius: 8, padding: "12px 24px", fontSize: 16, fontWeight: 600, textDecoration: "none", display: "inline-block", textAlign: "center", ...style }), escapeHtml(resolveVariables(label, context)));
+/** Imagen de producto con alto fijo y recorte (o placeholder). */
+const productImage = (src, alt, context, palette, opts) => src
+    ? `<img src="${escapeHtml(resolveVariables(src, context))}" alt="${escapeHtml(alt)}" width="100%" height="${opts.height}" style="${styleToString({ width: "100%", maxWidth: "100%", display: "block", border: 0, borderRadius: opts.radius, height: opts.height, objectFit: "cover" })}" />`
+    : text("(Imagen)", {
+        color: palette.CREAM_DIM,
+        fontSize: 12,
+        margin: 0,
+    });
+/** Tarjeta clásica: imagen centrada + nombre + descripción + precio + CTA. */
+const renderProductCard = (props, context, palette) => {
+    const image = props.imageUrl
+        ? `<img src="${escapeHtml(resolveVariables(props.imageUrl, context))}" alt="${escapeHtml(props.name)}" width="360" style="max-width:100%;display:block;border:0;border-radius:${props.radius ?? 8}px;margin:0 auto 16px;" />`
+        : "";
+    const name = `<div style="${styleToString({ color: palette.DARK, fontSize: 22, fontWeight: 700, margin: "0 0 8px" })}">${renderRichText(resolveVariables(props.name, context))}</div>`;
+    const desc = props.description
+        ? `<div style="${styleToString({ color: palette.INK, fontSize: 14, lineHeight: 1.6, margin: "0 0 12px" })}">${renderRichText(resolveVariables(props.description, context))}</div>`
+        : "";
+    const price = `<div style="${styleToString({ color: palette.GOLD, fontSize: 20, fontWeight: 700, margin: "0 0 16px" })}">${renderRichText(resolveVariables(props.price, context))}</div>`;
+    const cta = props.ctaLabel
+        ? linkOrSpan(resolveVariables(props.ctaHref, context), styleToString({ backgroundColor: palette.GOLD, color: palette.DARK, fontWeight: 700, padding: "12px 24px", borderRadius: 999, fontSize: 14, textTransform: "uppercase", letterSpacing: "0.5px", display: "inline-block", textDecoration: "none" }), escapeHtml(resolveVariables(props.ctaLabel, context)))
+        : "";
+    return section({
+        textAlign: alignMap[props.align || "center"],
+        ...blockSpacing(props),
+        ...bgStyle(props),
+    }, image + name + desc + price + cta);
+};
+/** "One product": imagen ancha arriba y el texto centrado debajo. */
+const renderProductHero = (props, context, palette) => {
+    const accent = props.accentColor || palette.GOLD;
+    const height = props.imageHeight && props.imageHeight > 0 ? props.imageHeight : 320;
+    const radius = props.radius ?? 12;
+    const image = productImage(props.imageUrl, props.name, context, palette, {
+        height,
+        radius,
+    });
+    const eyebrow = props.eyebrow
+        ? `<div style="${styleToString({ color: accent, fontSize: 18, fontWeight: 600, lineHeight: 1.55, margin: "16px 0 0" })}">${renderRichText(resolveVariables(props.eyebrow, context))}</div>`
+        : "";
+    const name = `<div style="${styleToString({ color: palette.DARK, fontSize: 36, fontWeight: 600, lineHeight: 1.11, letterSpacing: "0.4px", margin: "8px 0 0" })}">${renderRichText(resolveVariables(props.name, context))}</div>`;
+    const desc = props.description
+        ? `<div style="${styleToString({ color: palette.INK, fontSize: 16, lineHeight: 1.5, margin: "8px 0 0" })}">${renderRichText(resolveVariables(props.description, context))}</div>`
+        : "";
+    const price = props.price
+        ? `<div style="${styleToString({ color: palette.DARK, fontSize: 16, fontWeight: 600, lineHeight: 1.5, margin: "8px 0 0" })}">${renderRichText(resolveVariables(props.price, context))}</div>`
+        : "";
+    const cta = props.ctaLabel
+        ? productButton(props.ctaLabel, props.ctaHref, context, {
+            backgroundColor: accent,
+            marginTop: 16,
+        })
+        : "";
+    return section({
+        textAlign: alignMap[props.align || "center"],
+        ...blockSpacing(props),
+        ...bgStyle(props),
+    }, image + eyebrow + name + desc + price + cta);
+};
+/** Imagen a la izquierda (50%) y ficha del producto a la derecha. */
+const renderProductImageLeft = (props, context, palette) => {
+    const accent = props.accentColor || palette.GOLD;
+    const height = props.imageHeight && props.imageHeight > 0 ? props.imageHeight : 220;
+    const radius = props.radius ?? 8;
+    const image = productImage(props.imageUrl, props.name, context, palette, {
+        height,
+        radius,
+    });
+    const name = `<div style="${styleToString({ color: palette.DARK, fontSize: 20, fontWeight: 600, lineHeight: 1.4, margin: "8px 0 0" })}">${renderRichText(resolveVariables(props.name, context))}</div>`;
+    const desc = props.description
+        ? `<div style="${styleToString({ color: palette.INK, fontSize: 16, lineHeight: 1.5, margin: "8px 0 0" })}">${renderRichText(resolveVariables(props.description, context))}</div>`
+        : "";
+    const price = props.price
+        ? `<div style="${styleToString({ color: palette.DARK, fontSize: 18, fontWeight: 600, lineHeight: 1.55, margin: "8px 0 0" })}">${renderRichText(resolveVariables(props.price, context))}</div>`
+        : "";
+    const cta = props.ctaLabel
+        ? productButton(props.ctaLabel, props.ctaHref, context, {
+            backgroundColor: accent,
+            width: "75%",
+            display: "block",
+            boxSizing: "border-box",
+            marginTop: 16,
+            padding: "12px 16px",
+        })
+        : "";
+    return section({
+        ...blockSpacing(props),
+        ...bgStyle(props),
+    }, `<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td width="50%" valign="top" style="width:50%;padding-right:32px;box-sizing:border-box;">${image}</td><td width="50%" valign="top" style="width:50%;vertical-align:baseline;">${name}${desc}${price}${cta}</td></tr></tbody></table>`);
+};
+/** Filas de tarjetas: encabezado opcional + 2/3/4 tarjetas (4 = 2×2 con Hr). */
+const renderProductGrid = (props, context, palette) => {
+    const items = props.products || [];
+    const cols = props.columns === 3 ? 3 : props.columns === 4 ? 4 : 2;
+    // Con 4 tarjetas react.email usa 2×2 con separador; con 3, una sola fila.
+    const perRow = cols === 4 ? 2 : cols;
+    const gutter = cols === 3 ? 4 : 8;
+    const accent = props.accentColor || palette.GOLD;
+    const radius = props.radius ?? 8;
+    const height = props.imageHeight && props.imageHeight > 0
+        ? props.imageHeight
+        : cols === 3
+            ? 180
+            : 250;
+    const card = (item) => {
+        const image = productImage(item.imageUrl, item.name, context, palette, {
+            height,
+            radius,
+        });
+        const name = `<div style="${styleToString({ color: palette.DARK, fontSize: 20, fontWeight: 600, lineHeight: 1.4, margin: "24px 0 0" })}">${renderRichText(resolveVariables(item.name, context))}</div>`;
+        const desc = item.description
+            ? `<div style="${styleToString({ color: palette.INK, fontSize: 16, lineHeight: 1.5, margin: "16px 0 0" })}">${renderRichText(resolveVariables(item.description, context))}</div>`
+            : "";
+        const price = item.price
+            ? `<div style="${styleToString({ color: palette.DARK, fontSize: 16, fontWeight: 600, lineHeight: 1.5, margin: "8px 0 0" })}">${renderRichText(resolveVariables(item.price, context))}</div>`
+            : "";
+        const cta = item.ctaLabel
+            ? productButton(item.ctaLabel, item.ctaHref || "", context, {
+                backgroundColor: accent,
+                marginTop: 16,
+            })
+            : "";
+        return image + name + desc + price + cta;
+    };
+    const rows = chunkRows(items, perRow)
+        .map((row, ri) => {
+        const cells = row
+            .map((item, ci) => {
+            const first = ci === 0;
+            const last = ci === row.length - 1;
+            const padding = (first ? "" : `padding-left:${gutter}px;`) +
+                (last ? "" : `padding-right:${gutter}px;`);
+            const width = String(Math.round((100 / perRow) * 100) / 100);
+            return `<td width="${width}%" valign="top" style="width:${width}%;padding-top:16px;padding-bottom:16px;${padding}">${card(item)}</td>`;
+        })
+            .join("");
+        const separator = ri === 0 && chunkRows(items, perRow).length > 1
+            ? `<tr><td colspan="${row.length}" style="padding:0;"><hr style="border:none;border-top:1px solid #e5e7eb;margin:24px 0;" /></td></tr>`
+            : "";
+        return `<tr>${cells}</tr>${separator}`;
+    })
+        .join("");
+    const header = props.heading || props.subheading
+        ? `<div style="padding-bottom:16px;">${props.heading
+            ? `<div style="${styleToString({ color: palette.DARK, fontSize: 20, fontWeight: 600, lineHeight: 1.4, margin: 0 })}">${renderRichText(resolveVariables(props.heading, context))}</div>`
+            : ""}${props.subheading
+            ? `<div style="${styleToString({ color: palette.INK, fontSize: 16, lineHeight: 1.5, margin: "8px 0 0" })}">${renderRichText(resolveVariables(props.subheading, context))}</div>`
+            : ""}</div>`
+        : "";
+    return section({
+        textAlign: alignMap[props.align || "left"],
+        ...blockSpacing(props),
+        ...bgStyle(props),
+    }, `${header}<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody>${rows}</tbody></table>`);
+};
+const renderProduct = (props, context, palette) => {
+    switch (props.variant) {
         case "hero":
-            return renderHero(block.props, context, palette);
-        case "heading":
-            return renderHeading(block.props, context, palette);
-        case "text":
-            return renderText(block.props, context, palette);
-        case "list":
-            return renderList(block.props, context, palette);
-        case "button":
-            return renderButton(block.props, context, palette);
-        case "image":
-            return renderImage(block.props, context, palette);
-        case "quote":
-            return renderQuote(block.props, context, palette);
-        case "columns":
-            return renderColumns(block.props, context, palette);
-        case "divider":
-            return renderDivider(block.props);
-        case "spacer":
-            return renderSpacer(block.props);
-        case "footer":
-            return renderFooter(block.props, context, palette);
+            return renderProductHero(props, context, palette);
+        case "image-left":
+            return renderProductImageLeft(props, context, palette);
+        case "grid":
+            return renderProductGrid(props, context, palette);
+        // "card" (default) y cualquier variante desconocida.
         default:
-            return "";
+            return renderProductCard(props, context, palette);
     }
 };
+/** Resumen de pedido: tabla de líneas + botón de compra full-width. */
+const renderCheckout = (props, context, palette) => {
+    const accent = props.accentColor || "#4f46e5";
+    const border = props.borderColor || "#e5e7eb";
+    const height = props.imageHeight && props.imageHeight > 0 ? props.imageHeight : 110;
+    const radius = props.radius ?? 8;
+    const cell = `padding:8px 0;border-bottom:1px solid ${border};`;
+    const head = (label, align) => `<th align="${align}" style="${cell}${styleToString({ color: "#6b7280", fontSize: 14, fontWeight: 600, textAlign: align })}">${escapeHtml(label)}</th>`;
+    const rows = (props.lines || [])
+        .map((line) => {
+        const image = line.imageUrl
+            ? `<img src="${escapeHtml(resolveVariables(line.imageUrl, context))}" alt="${escapeHtml(line.name)}" width="${height}" height="${height}" style="${styleToString({ width: height, height, borderRadius: radius, objectFit: "cover", border: 0, display: "block" })}" />`
+            : text("(Imagen)", { color: palette.CREAM_DIM, fontSize: 12, margin: 0 });
+        const name = `<div style="${styleToString({ color: palette.DARK, fontSize: 14, margin: 0 })}">${renderRichText(resolveVariables(line.name, context))}</div>`;
+        const qty = `<div style="${styleToString({ color: palette.DARK, fontSize: 14, margin: 0, textAlign: "center" })}">${escapeHtml(resolveVariables(line.quantity || "1", context))}</div>`;
+        const price = `<div style="${styleToString({ color: palette.DARK, fontSize: 14, margin: 0, textAlign: "center" })}">${escapeHtml(resolveVariables(line.price || "", context))}</div>`;
+        return `<tr><td style="${cell}">${image}</td><td align="left" style="${cell}">${name}</td><td align="center" style="${cell}">${qty}</td><td align="center" style="${cell}">${price}</td></tr>`;
+    })
+        .join("");
+    const table = `<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-bottom:16px;"><tbody><tr><th style="${cell}">&nbsp;</th>${head("Producto", "left")}${head("Cantidad", "center")}${head("Precio", "center")}</tr>${rows}</tbody></table>`;
+    const cta = props.ctaLabel
+        ? productButton(props.ctaLabel, props.ctaHref || "", context, {
+            backgroundColor: accent,
+            display: "block",
+            width: "100%",
+            boxSizing: "border-box",
+            padding: "12px",
+        })
+        : "";
+    const box = `<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td style="${styleToString({ border: `1px solid ${border}`, borderRadius: 8, padding: "0 16px 16px", marginTop: 16 })}">${table}${cta}</td></tr></tbody></table>`;
+    const heading = props.heading
+        ? `<div style="${styleToString({ color: palette.DARK, fontSize: 30, fontWeight: 600, lineHeight: 1.2, margin: "0 0 16px", textAlign: "center" })}">${renderRichText(resolveVariables(props.heading, context))}</div>`
+        : "";
+    return section({
+        textAlign: alignMap[props.align || "center"],
+        ...blockSpacing(props),
+        ...bgStyle(props),
+    }, heading + box);
+};
+const renderTestimonial = (props, context, palette) => {
+    const avatar = props.avatarUrl
+        ? `<img src="${escapeHtml(resolveVariables(props.avatarUrl, context))}" alt="${escapeHtml(props.name)}" width="56" height="56" style="width:56px;height:56px;border-radius:50%;display:block;margin:0 0 12px;border:0;object-fit:cover;" />`
+        : "";
+    const quote = `<div style="${styleToString({ color: palette.INK, fontStyle: "italic", fontSize: 16, lineHeight: 1.6, margin: 0 })}">\u201C${renderRichText(resolveVariables(props.quote, context))}\u201D</div>`;
+    const name = `<div style="${styleToString({ color: props.accentColor || palette.GOLD, fontSize: 14, fontWeight: 700, margin: "12px 0 0" })}">${renderRichText(resolveVariables(props.name, context))}</div>`;
+    const role = props.role
+        ? `<div style="${styleToString({ color: palette.CREAM_DIM, fontSize: 12, margin: "2px 0 0" })}">${renderRichText(resolveVariables(props.role, context))}</div>`
+        : "";
+    return section({
+        textAlign: alignMap[props.align || "left"],
+        ...blockSpacing(props),
+        ...bgStyle(props),
+    }, avatar + quote + name + role);
+};
+const renderFeatures = (props, context, palette) => {
+    const cols = props.columns === 3 ? 3 : 2;
+    const width = Math.floor(100 / cols);
+    const accent = props.accentColor || palette.GOLD;
+    const rows = chunkRows(props.features || [], cols)
+        .map((row) => {
+        const cells = row
+            .map((f) => `<td width="${width}%" valign="top" style="width:${width}%;padding:10px 10px 16px 0;"><div style="${styleToString({ color: accent, fontSize: 20, fontWeight: 700, margin: "0 0 6px" })}">${escapeHtml(f.icon || "✓")}</div><div style="${styleToString({ color: palette.DARK, fontSize: 15, fontWeight: 700, margin: "0 0 4px" })}">${renderRichText(resolveVariables(f.title, context))}</div><div style="${styleToString({ color: palette.INK, fontSize: 13, lineHeight: 1.5, margin: 0 })}">${renderRichText(resolveVariables(f.description, context))}</div></td>`)
+            .join("");
+        return `<tr>${cells}</tr>`;
+    })
+        .join("");
+    return section({
+        textAlign: alignMap[props.align || "left"],
+        ...blockSpacing(props),
+        ...bgStyle(props),
+    }, `<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody>${rows}</tbody></table>`);
+};
+const renderAvatar = (props, context, palette) => {
+    const size = props.size || 96;
+    const image = props.imageUrl
+        ? `<img src="${escapeHtml(resolveVariables(props.imageUrl, context))}" alt="${escapeHtml(props.name)}" width="${size}" height="${size}" style="width:${size}px;height:${size}px;border-radius:50%;display:inline-block;border:0;object-fit:cover;" />`
+        : `<div style="${styleToString({ width: size, height: size, borderRadius: "50%", backgroundColor: palette.CREAM_DIM, display: "inline-block" })}"></div>`;
+    const name = `<div style="${styleToString({ color: palette.DARK, fontSize: 16, fontWeight: 700, margin: "12px 0 0" })}">${renderRichText(resolveVariables(props.name, context))}</div>`;
+    const role = props.role
+        ? `<div style="${styleToString({ color: palette.CREAM_DIM, fontSize: 13, margin: "2px 0 0" })}">${renderRichText(resolveVariables(props.role, context))}</div>`
+        : "";
+    return section({
+        textAlign: alignMap[props.align || "center"],
+        ...blockSpacing(props),
+        ...bgStyle(props),
+    }, image + name + role);
+};
+const renderCode = (props) => section({ ...blockSpacing(props) }, `<pre style="${styleToString({ backgroundColor: props.backgroundColor || DEFAULT_PALETTE.DARK, color: props.color || "#f5f1e8", padding: 16, borderRadius: 8, fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace", fontSize: 13, lineHeight: 1.5, margin: 0, whiteSpace: "pre-wrap", wordBreak: "break-word" })}">${escapeHtml(props.code || "")}</pre>`);
+const renderLink = (props, context, palette) => section({
+    textAlign: alignMap[props.align || "left"],
+    ...blockSpacing(props),
+    ...bgStyle(props),
+}, linkOrSpan(resolveVariables(props.href, context), styleToString({ color: props.color || palette.GOLD, fontSize: 15, fontWeight: 600, textDecoration: "underline" }), escapeHtml(resolveVariables(props.label, context))));
+/** Tabla de columnas (celdas con ancho y gutter) compartida por grid/footer. */
+const renderColumnsTable = (columns, gutter, context, palette) => {
+    const fallbackWidth = columns.length > 0 ? 100 / columns.length : 100;
+    const cells = columns
+        .map((col, i) => {
+        const isLast = i === columns.length - 1;
+        const width = String(Math.round((col.width ?? fallbackWidth) * 100) / 100);
+        const inner = (col.blocks || [])
+            .map((child) => renderBlock(child, context, palette))
+            .join("");
+        return `<td width="${width}%" valign="top" style="width:${width}%;${isLast ? "" : `padding-right:${gutter}px;`}"><table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td>${inner}</td></tr></tbody></table></td>`;
+    })
+        .join("");
+    return `<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr>${cells}</tr></tbody></table>`;
+};
+const renderGrid = (props, context, palette) => section({
+    ...blockSpacing(props),
+    ...bgStyle(props),
+}, renderColumnsTable(props.columns || [], props.gap ?? 0, context, palette));
+/** Renderers built-in por tipo — se registran en el registry al importar. */
+const BUILTIN_RENDERERS = {
+    header: renderHeader,
+    hero: renderHero,
+    heading: renderHeading,
+    text: renderText,
+    list: renderList,
+    button: renderButton,
+    image: renderImage,
+    quote: renderQuote,
+    columns: renderColumns,
+    container: renderContainer,
+    grid: renderGrid,
+    divider: renderDivider,
+    spacer: renderSpacer,
+    footer: renderFooter,
+    social: renderSocial,
+    gallery: renderGallery,
+    stats: renderStats,
+    pricing: renderPricing,
+    product: renderProduct,
+    checkout: renderCheckout,
+    testimonial: renderTestimonial,
+    features: renderFeatures,
+    avatar: renderAvatar,
+    code: renderCode,
+    link: renderLink,
+};
+for (const definition of DEFAULT_BLOCK_LIBRARY) {
+    const renderer = BUILTIN_RENDERERS[definition.type];
+    registerBlock({
+        definition,
+        renderHtml: ({ props, context, palette }) => renderer(props, context, palette),
+    });
+}
+const renderBlock = (block, context, palette) => {
+    const renderHtml = getBlockRenderHtml(block.type);
+    if (!renderHtml)
+        return "";
+    return renderHtml({ props: block.props, context, palette });
+};
 /**
  * Renderiza el payload de bloques a HTML email-safe sin React.
  * Equivalente funcional de `renderEmailHtml` basado en react-email.
  */
-export const renderEmailHtml = async ({ blocks, subject = "", context = SAMPLE_CONTEXT, settings = {}, palette = DEFAULT_PALETTE, }) => {
+export const renderEmailHtml = async ({ blocks, subject = "", context = SAMPLE_CONTEXT, settings = {}, palette = DEFAULT_PALETTE, tracking, }) => {
     const pageBackground = settings.pageBackground ?? DEFAULT_SETTINGS.pageBackground;
     const cardBorderWidth = settings.cardBorderWidth ?? DEFAULT_SETTINGS.cardBorderWidth;
     const cardBorderRadius = settings.cardBorderRadius ?? DEFAULT_SETTINGS.cardBorderRadius;
+    const fontFamily = settings.fontFamily ?? DEFAULT_SETTINGS.fontFamily;
+    // `""` desactiva la tipografía explícita (se hereda la del cliente).
+    const font = fontFamily ? { fontFamily } : {};
     const resolvedSubject = resolveVariables(subject, context);
     const body = blocks
         .map((block) => renderBlock(block, context, palette))
         .join("");
-    return `<!DOCTYPE html>
+    const html = `<!DOCTYPE html>
 <html dir="ltr" lang="es">
   <head>
     <meta charset="utf-8" />
@@ -237,12 +876,13 @@ export const renderEmailHtml = async ({ blocks, subject = "", context = SAMPLE_C
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>${escapeHtml(resolvedSubject)}</title>
   </head>
-  <body style="${styleToString({ margin: 0, padding: 0, backgroundColor: pageBackground })}">
+  <body style="${styleToString({ margin: 0, padding: 0, backgroundColor: pageBackground, ...font })}">
     <div style="display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">${escapeHtml(resolvedSubject)}</div>
     <table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="${styleToString({ maxWidth: 600, width: "100%", backgroundColor: "#ffffff", border: `${cardBorderWidth}px solid #e3dccb`, borderRadius: cardBorderRadius, margin: "0 auto" })}">
-      <tbody><tr><td>${body}</td></tr></tbody>
+      <tbody><tr><td${fontFamily ? ` style="${styleToString(font)}"` : ""}>${body}</td></tr></tbody>
     </table>
   </body>
 </html>`;
+    return applyTracking(html, tracking, context);
 };
 //# sourceMappingURL=html-render.js.map