email-builder-utils 1.1.46 → 1.1.48

package/dist/utils/jsonToHTML.js

@@ -2,1579 +2,37 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.tableCommonStyle = void 0;
 exports.convertToHtml = convertToHtml;
-exports.convertVideoBlock = convertVideoBlock;
 const types_1 = require("../types");
-const common_1 = require("./common");
-const fontFallback_1 = require("./fontFallback");
-const addPxToAttributes = [
-    "fontSize",
-    "borderRadius",
-    "borderWidth",
-];
-const addPxOrPerToAttributes = ["width", "height"];
-const allPxAttributes = [...addPxToAttributes, ...addPxOrPerToAttributes];
-exports.tableCommonStyle = "border-collapse:collapse; table-layout:fixed";
-function encodeBlockProps(props) {
-    return JSON.stringify(props)
-        .replace(/&/g, '&')
-        .replace(/"/g, '"');
-}
-async function loadImageNaturalDimensions(imageUrl) {
-    return new Promise((resolve, reject) => {
-        const img = new Image();
-        img.onload = () => resolve({ width: img.naturalWidth, height: img.naturalHeight });
-        img.onerror = () => reject(new Error(`Failed to load image: ${imageUrl}`));
-        img.src = imageUrl;
-    });
-}
-const GENERIC_FONT_FAMILIES = new Set([
-    'serif', 'sans-serif', 'monospace', 'cursive', 'fantasy',
-    'system-ui', 'ui-serif', 'ui-sans-serif', 'ui-monospace',
-    'ui-rounded', 'emoji', 'math', 'fangsong',
-]);
-/**
- * Normalises a CSS font-family string so every multi-word family name is wrapped
- * in single quotes — safe inside double-quoted HTML style attributes.
- * Handles already-quoted names (single or double), generic keywords, and any
- * number of comma-separated families.
- */
-function sanitizeFontFamily(fontFamily) {
-    if (!fontFamily)
-        return fontFamily;
-    return fontFamily
-        .split(',')
-        .map(font => {
-        const trimmed = font.trim();
-        // Strip any surrounding quotes (single or double) from either end
-        const unquoted = trimmed.replace(/^["']|["']$/g, '').trim();
-        if (!unquoted)
-            return '';
-        // Generic families and single-token names need no quotes
-        if (GENERIC_FONT_FAMILIES.has(unquoted.toLowerCase()) || !/\s/.test(unquoted)) {
-            return unquoted;
-        }
-        // Multi-word font name: wrap in single quotes, escaping any embedded single quotes
-        return `'${unquoted.replace(/'/g, "\\'")}'`;
-    })
-        .filter(Boolean)
-        .join(', ');
-}
-function buildStyles(style, { pxChanges, perChanges }) {
-    if (!style)
-        style = {};
-    const stylesObj = {};
-    Object.entries(style).forEach(([key, value]) => {
-        if (key === "customCss")
-            return;
-        const INVALID_KEYS = [
-            "columns",
-            "cellWidths",
-            "cellWidth",
-            "childWidth",
-            "visibility",
-            "hideOnMobile",
-            "hideOnDesktop",
-            "label",
-            "alignment",
-        ];
-        if (INVALID_KEYS.includes(key))
-            return;
-        // Prevent null/undefined/"" from leaking into CSS
-        if (value === undefined || value === null || value === "")
-            return;
-        // FIX 1 — SANITIZE padding objects
-        if ((key === "padding" || key === "buttonPadding") &&
-            typeof value === "object") {
-            const pad = value;
-            const safePad = {
-                top: Number.isFinite(pad.top) ? pad.top : 0,
-                right: Number.isFinite(pad.right) ? pad.right : 0,
-                bottom: Number.isFinite(pad.bottom) ? pad.bottom : 0,
-                left: Number.isFinite(pad.left) ? pad.left : 0,
-            };
-            value = `${safePad.top}px ${safePad.right}px ${safePad.bottom}px ${safePad.left}px`;
-        }
-        if (key === "fontFamily" && typeof value === "string") {
-            value = sanitizeFontFamily((0, fontFallback_1.withFontFallback)(value));
-        }
-        // Wrap backgroundImage values in url() if not already wrapped — skip gradients
-        if (key === "backgroundImage" && typeof value === "string"
-            && !String(value).startsWith("url(")
-            && !String(value).toLowerCase().includes("gradient(")) {
-            value = `url('${value}')`;
-        }
-        // lineHeight: values >= 4 are pixel values; smaller values are unitless multipliers (e.g. 1.5)
-        if (key === "lineHeight" && typeof value === "number") {
-            stylesObj["line-height"] = value >= 4 ? `${value}px` : String(value);
-            return;
-        }
-        const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
-        // FIX 2 — Sanitize invalid px/per values
-        if (pxChanges.includes(key)) {
-            if (typeof value === "number") {
-                const rounded = Math.round(value * 100) / 100;
-                stylesObj[cssKey] = `${rounded}px`;
-            }
-            else if (typeof value === "string" && value.includes("null")) {
-                // Skip invalid styles
-                return;
-            }
-            else {
-                stylesObj[cssKey] = value;
-            }
-        }
-        else if (perChanges.includes(key)) {
-            if (typeof value === "number") {
-                stylesObj[cssKey] = `${value}%`;
-            }
-            else {
-                stylesObj[cssKey] = value;
-            }
-        }
-        else {
-            stylesObj[cssKey] = value;
-        }
-    });
-    const parts = Object.entries(stylesObj)
-        .filter(([, v]) => v !== undefined && v !== null && v !== '')
-        .map(([k, v]) => `${k}:${v}`);
-    if (style.customCss)
-        parts.push(style.customCss);
-    return parts.join('; ').replace(/;\s*$/, '').trim();
-}
+const text_1 = require("./blocks/text");
+const image_1 = require("./blocks/image");
+const button_1 = require("./blocks/button");
+const grid_1 = require("./blocks/grid");
+const dividers_1 = require("./blocks/dividers");
+const video_1 = require("./blocks/video");
+const shape_1 = require("./blocks/shape");
+var buildStyles_1 = require("./buildStyles");
+Object.defineProperty(exports, "tableCommonStyle", { enumerable: true, get: function () { return buildStyles_1.tableCommonStyle; } });
 async function convertToHtml(blockData, rootData, cellWidthInPx) {
     switch (blockData.type) {
         case types_1.BlockType.TEXT:
-            return convertTextBlock(blockData, cellWidthInPx);
+            return (0, text_1.convertTextBlock)(blockData, cellWidthInPx);
         case types_1.BlockType.IMAGE:
-            return await convertImageBlock(blockData, cellWidthInPx);
+            return await (0, image_1.convertImageBlock)(blockData, cellWidthInPx);
         case types_1.BlockType.BUTTON:
-            return convertButtonBlock(blockData);
+            return (0, button_1.convertButtonBlock)(blockData);
         case types_1.BlockType.GRID:
-            return await convertGridBlock(blockData, rootData, cellWidthInPx);
+            return await (0, grid_1.convertGridBlock)(blockData, rootData, cellWidthInPx);
         case types_1.BlockType.DIVIDER:
-            return convertDividerBlockToHtml(blockData);
+            return (0, dividers_1.convertDividerBlockToHtml)(blockData);
         case types_1.BlockType.SPACER:
-            return convertSpacerBlockToHtml(blockData);
+            return (0, dividers_1.convertSpacerBlockToHtml)(blockData);
         case types_1.BlockType.VIDEO:
-            return convertVideoBlock(blockData, cellWidthInPx);
+            return (0, video_1.convertVideoBlock)(blockData, cellWidthInPx);
         case types_1.BlockType.SHAPE:
-            return await convertShapeBlock(blockData);
+            return await (0, shape_1.convertShapeBlock)(blockData);
         case types_1.BlockType.VDivider:
-            return convertVerticalDividerBlockToHtml(blockData);
+            return (0, dividers_1.convertVerticalDividerBlockToHtml)(blockData);
         default:
             return "";
     }
 }
-function appendOutlookSupport(content, contentStyle, className, msoWidth) {
-    const visibilityClass = className || "";
-    const shouldHideInOutlook = visibilityClass.includes("hide-desktop");
-    if (shouldHideInOutlook) {
-        return `
-    <!--[if !mso]><!-->
-    <table width="100%" style="${exports.tableCommonStyle}" class="${visibilityClass}"><tr><td style="${contentStyle}">${content}</td></tr></table>
-    <!--<![endif]-->
-    `;
-    }
-    // When an explicit pixel width is provided (e.g. inside a column cell), use dual MSO/non-MSO
-    // tables. Old Outlook (Word engine) ignores max-width and can resolve width="100%" to the
-    // full email width (600px) rather than the column width, causing images/buttons to expand.
-    if (msoWidth) {
-        return `
-<!--[if mso]>
-<table border="0" cellpadding="0" cellspacing="0" width="${msoWidth}" style="border-collapse:collapse;width:${msoWidth}px;"><tr><td width="${msoWidth}" style="${contentStyle}">
-<![endif]-->
-<!--[if !mso]><!-->
-<table width="100%" border="0" cellpadding="0" cellspacing="0" style="${exports.tableCommonStyle}; max-width:600px;" class="${visibilityClass}"><tr><td width="100%" style="${contentStyle}">
-<!--<![endif]-->
-${content}
-<!--[if mso]></td></tr></table><![endif]-->
-<!--[if !mso]><!-->
-</td></tr></table>
-<!--<![endif]-->
-    `;
-    }
-    return `
-  <table width="100%" border="0" cellpadding="0" cellspacing="0" style="${exports.tableCommonStyle}; max-width:600px;" class="${visibilityClass}"><tr><td width="100%" style="${contentStyle}">${content}</td></tr></table>
-  `;
-}
-function convertDividerBlockToHtml(blockData) {
-    const { style, props } = blockData.data;
-    const { hideOnMobile, hideOnDesktop } = props;
-    const { thickness, dividerColor, width, alignment, ...rest } = style;
-    const convertedStyle = buildStyles(rest, {
-        perChanges: [],
-        pxChanges: allPxAttributes,
-    });
-    const dividerWidth = width || 100;
-    const alignAttr = alignment === 'center' ? 'center' : alignment === 'right' ? 'right' : 'left';
-    const alignMargin = alignAttr === 'center' ? '0 auto' : alignAttr === 'right' ? '0 0 0 auto' : '0 auto 0 0';
-    // Append text-align so the import parser can recover alignment via inheritance
-    const contentStyle = convertedStyle
-        ? `${convertedStyle}; text-align:${alignAttr};`
-        : `text-align:${alignAttr};`;
-    // Build class name based on visibility
-    const visibilityClass = [
-        hideOnMobile ? "hide-mobile" : "",
-        hideOnDesktop ? "hide-desktop" : "",
-    ]
-        .filter(Boolean)
-        .join(" ");
-    const dividerContent = `
-    <table
-      align="${alignAttr}"
-      width="${dividerWidth}%"
-      cellpadding="0"
-      cellspacing="0"
-      style="margin:${alignMargin};"
-    >
-      <tr>
-        <td
-          height="${thickness}"
-          style="font-size:1px; line-height:1px; background:${dividerColor}; width:${dividerWidth}%;"
-        >
-          &nbsp;
-        </td>
-      </tr>
-    </table>
-  `;
-    return appendOutlookSupport(dividerContent, contentStyle, visibilityClass);
-}
-function convertSpacerBlockToHtml(blockData) {
-    const { style, props } = blockData.data;
-    const visibilityClass = (0, common_1.getVisibilityClass)(props);
-    const styles = buildStyles(style, {
-        perChanges: [],
-        pxChanges: allPxAttributes,
-    });
-    return appendOutlookSupport(``, styles, visibilityClass);
-}
-function convertTextBlock(blockData, cellWidthInPx) {
-    const { style, props } = blockData.data;
-    const visibilityClass = (0, common_1.getVisibilityClass)(props);
-    const { width, backgroundColor, padding, borderRadius, borderStyle, borderColor, borderWidth, textContainerBackgroundColor, textContainerPadding, fontSize, backgroundImage, whiteSpace: _whiteSpace, // strip from outer td — pre-wrap on a td preserves editor whitespace
-    ...rest } = style;
-    // Detect background image or gradient (may live in backgroundImage or customCss).
-    // Same multi-client approach as Grid block: outer wrapper <td> carries the background
-    // via CSS (Gmail/New Outlook), background attribute (Yahoo), and VML (Old Outlook).
-    const bgImageStr = typeof backgroundImage === 'string' ? backgroundImage : '';
-    const customCssStr = rest.customCss || '';
-    const gradientInCustomCss = !bgImageStr.includes('gradient(') && customCssStr.includes('gradient(')
-        ? (customCssStr.match(/(?:linear|radial|conic)-gradient\([^)]+(?:\([^)]*\)[^)]*)*\)/)?.[0] || '')
-        : '';
-    const effectiveGradient = bgImageStr.includes('gradient(') ? bgImageStr : gradientInCustomCss;
-    const isGradient = Boolean(effectiveGradient);
-    const parsedGradient = isGradient ? parseGradient(effectiveGradient) : null;
-    const rawBgImageUrl = !isGradient && bgImageStr
-        ? bgImageStr.replace(/^url\(['"]?/, '').replace(/['"]?\)$/, '')
-        : null;
-    const hasBgImage = Boolean(rawBgImageUrl || isGradient);
-    const fallbackBgColor = textContainerBackgroundColor ||
-        parsedGradient?.fallback ||
-        extractCssFallbackColor(customCssStr) ||
-        '#ffffff';
-    // Text box decoration styles (border, background, padding) — no width
-    const textBoxStyle = {
-        backgroundColor,
-        padding,
-        borderRadius,
-        borderStyle,
-        borderColor,
-        borderWidth,
-    };
-    const convertedTextStyle = buildStyles(textBoxStyle, {
-        perChanges: [],
-        pxChanges: allPxAttributes,
-    });
-    // Strip gradient from customCss when it is hoisted to the outer bg wrapper.
-    const innerCustomCss = gradientInCustomCss
-        ? customCssStr.replace(/background-image\s*:[^;]+;?/gi, '').trim()
-        : customCssStr;
-    const restForStyles = gradientInCustomCss ? { ...rest, customCss: innerCustomCss } : rest;
-    // Outer td styles: strip container background when a bg-image wrapper is present
-    // so the outer wrapper's background is not double-applied.
-    const styles = buildStyles({
-        padding: textContainerPadding,
-        backgroundColor: hasBgImage ? undefined : textContainerBackgroundColor,
-        ...restForStyles,
-    }, {
-        perChanges: [],
-        pxChanges: allPxAttributes,
-    });
-    const sanitizedText = (props.text ?? "")
-        .replace(/<p(\s[^>]*)?>/gi, (_, attrs) => `<div${attrs || ""}>`)
-        .replace(/<\/p>/gi, "</div>");
-    const navigateToUrl = props.navigateToUrl || "";
-    const fontSizeStyle = fontSize != null ? `font-size:${fontSize}px;` : "";
-    // Email clients apply `a { color: blue }` which overrides inherited color.
-    // Inject the block color directly onto <a> tags that don't already have one.
-    const blockTextColor = rest.color;
-    const processedText = blockTextColor
-        ? sanitizedText.replace(/<a(\s[^>]*)?>/gi, (match, attrs = '') => {
-            if (/style\s*=\s*["'][^"']*\bcolor\s*:/i.test(attrs))
-                return match;
-            if (/\bstyle\s*=/i.test(attrs)) {
-                return `<a${attrs.replace(/(\bstyle\s*=\s*["'])/, `$1color:${blockTextColor};`)}>`;
-            }
-            return `<a${attrs} style="color:${blockTextColor};">`;
-        })
-        : sanitizedText;
-    const colorStyle = blockTextColor ? `color:${blockTextColor};` : '';
-    // Use display:block + width:100% so text fills the column naturally.
-    // display:inline-block with a pixel width (e.g. 400px) breaks narrow grid cells.
-    const convertedTextBox = `<div style="display:block; width:100%; box-sizing:border-box; ${colorStyle}${fontSizeStyle}${convertedTextStyle}">${processedText.replaceAll(/\n/g, "<br>")}</div>`;
-    const safeCellWidth = cellWidthInPx ? Math.min(cellWidthInPx, 600) : undefined;
-    // When a bg-image wrapper is present, visibilityClass moves to the outer table.
-    const textContent = appendOutlookSupport(convertedTextBox, styles, hasBgImage ? '' : visibilityClass, safeCellWidth);
-    const linkColorStyle = blockTextColor ? `color:${blockTextColor};` : 'color:inherit;';
-    if (hasBgImage) {
-        const msoWidth = cellWidthInPx ? Math.min(cellWidthInPx, 600) : 600;
-        const vmlFill = isGradient
-            ? (() => {
-                const vmlAngle = cssAngleToVml(parsedGradient?.angle || 180);
-                const c1 = parsedGradient?.fallback || '#ffffff';
-                const c2 = parsedGradient?.colors[parsedGradient.colors.length - 1] || c1;
-                return `<v:fill type="gradient" color="${c1}" color2="${c2}" angle="${vmlAngle}" />`;
-            })()
-            : `<v:fill type="frame" src="${rawBgImageUrl}" color="${fallbackBgColor}" />`;
-        const bgCss = isGradient
-            ? `background:${effectiveGradient};`
-            : `background-image:url('${rawBgImageUrl}'); background-position:center center; background-size:cover; background-repeat:no-repeat;`;
-        const wrappedContent = `
-<table border="0" cellpadding="0" cellspacing="0" width="${msoWidth}" role="presentation"
-  style="border-collapse:collapse;width:${msoWidth}px;" class="${visibilityClass}">
-  <tr>
-    <td width="${msoWidth}" bgcolor="${fallbackBgColor}" valign="top"
-      ${!isGradient && rawBgImageUrl ? `background="${rawBgImageUrl}"` : ''}
-      style="width:${msoWidth}px;background-color:${fallbackBgColor};${bgCss}">
-
-      <!--[if gte mso 9]>
-      <v:rect xmlns:v="urn:schemas-microsoft-com:vml"
-        fill="true" stroke="false"
-        style="width:${msoWidth}px;">
-        ${vmlFill}
-        <v:textbox inset="0,0,0,0">
-      <![endif]-->
-
-      ${textContent}
-
-      <!--[if gte mso 9]>
-        </v:textbox>
-      </v:rect>
-      <![endif]-->
-
-    </td>
-  </tr>
-</table>`;
-        return navigateToUrl
-            ? `<a href="${navigateToUrl}" rel="noreferrer noopener" style="${linkColorStyle}text-decoration:none;cursor:pointer;">${wrappedContent}</a>`
-            : wrappedContent;
-    }
-    return navigateToUrl
-        ? `<a href="${navigateToUrl}" rel="noreferrer noopener" style="${linkColorStyle}text-decoration:none;cursor:pointer;">${textContent}</a>`
-        : textContent;
-}
-async function appendOutlookForImage(content, outerContainerWidth, innerContainerWidth, imageUrl, style = {}, finalWidth, finalHeight) {
-    // OUTLOOK FIX: Use provided dimensions or calculate from image
-    let vmlWidth;
-    let vmlHeight;
-    if (finalWidth && finalHeight) {
-        // Use pre-calculated dimensions (preferred for accuracy)
-        vmlWidth = finalWidth;
-        vmlHeight = finalHeight;
-    }
-    else if (imageUrl) {
-        try {
-            const { width: originalWidth, height: originalHeight } = await loadImageNaturalDimensions(imageUrl);
-            const widthScalingFactor = Math.min(outerContainerWidth / originalWidth, innerContainerWidth / originalWidth, 1);
-            vmlWidth = Math.round(originalWidth * widthScalingFactor);
-            vmlHeight = Math.round(originalHeight * widthScalingFactor);
-        }
-        catch {
-            vmlWidth = innerContainerWidth;
-            vmlHeight = innerContainerWidth;
-        }
-    }
-    else {
-        vmlWidth = innerContainerWidth;
-        vmlHeight = innerContainerWidth;
-    }
-    const borderWidth = parseInt(style?.borderWidth) || 0;
-    const borderColor = style?.borderColor || "transparent";
-    const borderRadius = parseInt(style?.borderRadius) || 0;
-    const useRoundRect = borderRadius > 0;
-    const arcsize = useRoundRect
-        ? Math.min(borderRadius / vmlHeight, 1).toFixed(2)
-        : "";
-    const borderAttributes = borderWidth > 0
-        ? `strokeweight="${borderWidth}px" strokecolor="${borderColor}"`
-        : `stroked="false"`;
-    // OUTLOOK FIX: For Outlook 2019+ (version 2512), VML type="frame" causes stretching
-    // Solution: Use simple IMG tag with fixed dimensions for Outlook, only use VML for border radius
-    let outlookImage;
-    if (useRoundRect && borderRadius > 0) {
-        // Use VML for border radius - wrap in table to constrain width for Old Outlook (Word engine)
-        // Use aspect="atmost" to prevent image from stretching beyond its bounds
-        outlookImage = `<!--[if mso]>
-  <table border="0" cellpadding="0" cellspacing="0" width="${vmlWidth}" style="width:${vmlWidth}px;">
-    <tr>
-      <td align="center" valign="top" width="${vmlWidth}" style="width:${vmlWidth}px;">
-        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
-          style="width:${vmlWidth}px;height:${vmlHeight}px;"
-          ${borderAttributes}
-          arcsize="${arcsize}"
-          fill="true" fillcolor="none">
-          <v:fill src="${imageUrl}" type="tile" aspect="atmost" />
-          <v:textbox inset="0,0,0,0"><div style="display:none;">.</div></v:textbox>
-        </v:roundrect>
-      </td>
-    </tr>
-  </table>
-  <![endif]-->`;
-    }
-    else {
-        // For images without border radius, wrap in a table with explicit width for Old Outlook (Word engine)
-        // This prevents stretching/overflow in Outlook 2007-2019 and Outlook Classic
-        const borderStyleAttr = borderWidth > 0
-            ? `border: ${borderWidth}px solid ${borderColor};`
-            : '';
-        outlookImage = `<!--[if mso]>
-  <table border="0" cellpadding="0" cellspacing="0" width="${vmlWidth}" style="width:${vmlWidth}px;">
-    <tr>
-      <td align="center" valign="top" width="${vmlWidth}" style="width:${vmlWidth}px;">
-        <img src="${imageUrl}" alt="Image" border="0" width="${vmlWidth}" height="${vmlHeight}" style="display:block; width:${vmlWidth}px; height:${vmlHeight}px; max-width:${vmlWidth}px; ${borderStyleAttr}" />
-      </td>
-    </tr>
-  </table>
-  <![endif]-->`;
-    }
-    return `
-    ${outlookImage}
-    <!--[if !mso]><!-->
-      ${content}
-    <!--<![endif]-->
-  `;
-}
-async function computeScaledDimensions(imageUrl, maxContainerWidthPx) {
-    if (!imageUrl) {
-        const w = Math.max(maxContainerWidthPx, 1);
-        const h = Math.round(w * (2 / 3));
-        return { originalWidth: w, originalHeight: h, scaledWidth: w, scaledHeight: h };
-    }
-    try {
-        const { width: originalWidth, height: originalHeight } = await loadImageNaturalDimensions(imageUrl);
-        const widthScalingFactor = Math.min(maxContainerWidthPx / originalWidth, 1);
-        const scaledWidth = Math.round(originalWidth * widthScalingFactor);
-        const scaledHeight = Math.round(originalHeight * widthScalingFactor);
-        return { originalWidth, originalHeight, scaledWidth, scaledHeight };
-    }
-    catch {
-        const w = Math.max(maxContainerWidthPx, 1);
-        const h = Math.round(w * (2 / 3));
-        return { originalWidth: w, originalHeight: h, scaledWidth: w, scaledHeight: h };
-    }
-}
-async function convertImageBlock(blockData, cellWidthInPx) {
-    const { style, props } = blockData.data;
-    const { altText, imageUrl, navigateToUrl } = props;
-    const visibilityClass = (0, common_1.getVisibilityClass)(props);
-    const { width, height, objectFit, borderRadius, borderWidth, borderColor, borderStyle, ...containerStyle } = style;
-    // Add border styles to container for fallback clients
-    const containerStyles = buildStyles({
-        ...containerStyle,
-    }, { perChanges: [], pxChanges: addPxToAttributes });
-    // OUTLOOK FIX: Ensure cellWidthInPx never exceeds 600px
-    const safeCellWidth = Math.min(cellWidthInPx, 600);
-    // Parse width percentage (default 100%)
-    const widthPercent = typeof width === "string" && width.includes("%")
-        ? parseInt(width.replace("%", ""))
-        : typeof width === "number"
-            ? width
-            : 100;
-    // OUTLOOK FIX: Calculate inner container width based on safe cell width
-    const paddingLeft = style?.padding?.left || 0;
-    const paddingRight = style?.padding?.right || 0;
-    const availableWidth = safeCellWidth - paddingLeft - paddingRight;
-    const innerContainerWidth = Math.round((widthPercent / 100) * availableWidth);
-    // Get image dimensions and calculate scaled sizes
-    const { originalWidth, originalHeight, scaledWidth, scaledHeight } = await computeScaledDimensions(imageUrl, innerContainerWidth);
-    // OUTLOOK FIX: For Outlook, we need exact pixel dimensions
-    // Calculate final dimensions that respect both original size and container
-    const finalWidth = Math.min(scaledWidth, innerContainerWidth, originalWidth);
-    const finalHeight = Math.round((finalWidth / originalWidth) * originalHeight);
-    // Build image styles for modern email clients (non-Outlook)
-    const imageTagStyles = buildStyles({
-        borderStyle,
-        borderRadius: borderRadius,
-        borderColor,
-        borderWidth,
-    }, {
-        perChanges: [],
-        pxChanges: addPxToAttributes,
-    });
-    // OUTLOOK FIX: Image element with explicit dimensions
-    // Outlook will use width/height attributes, modern clients use CSS
-    // Use max-width instead of width:100% to prevent stretching
-    const imageElement = `<img src="${imageUrl}" alt="${altText || "Image"}" border="0" width="${finalWidth}" height="${finalHeight}" style="${imageTagStyles}; display:block; max-width:100%; height:auto; line-height: 0;" />`;
-    const percentWidth = typeof width === "string" && width.endsWith("%")
-        ? width
-        : typeof width === "number"
-            ? `${width}%`
-            : "100%";
-    // Non-MSO wrapper: display:block removes the phantom inline-baseline gap that
-    // display:inline-block creates in Gmail / Apple Mail / Yahoo between images.
-    // margin handles alignment since text-align won't move block elements.
-    const imgTextAlign = containerStyle.textAlign || "left";
-    const imgMargin = imgTextAlign === "center" ? "margin:0 auto;" :
-        imgTextAlign === "right" ? "margin-left:auto; margin-right:0;" : "";
-    // OUTLOOK FIX: Use finalWidth (the actual displayed size) as max-width so the div
-    // doesn't claim more space than the image occupies. originalWidth is the natural
-    // image size (e.g. 636px for the Beefree logo rendered at 35px) which was
-    // misleadingly large and could confuse some rendering engines.
-    const nonMsoWrapper = `<div style="display:block; width:${percentWidth}; max-width:${finalWidth}px; line-height:0; font-size:0; ${imgMargin}">${imageElement}</div>`;
-    // OUTLOOK FIX: Generate VML with corrected dimensions
-    const outlookImage = await appendOutlookForImage(nonMsoWrapper, safeCellWidth, innerContainerWidth, imageUrl, style, finalWidth, finalHeight);
-    const imageContent = appendOutlookSupport(outlookImage, containerStyles, visibilityClass, safeCellWidth);
-    return navigateToUrl
-        ? `<a href="${navigateToUrl}" target="_blank" rel="noreferrer noopener" style="display:block;">${imageContent}</a>`
-        : imageContent;
-}
-function appendOutlookForButton(buttonData) {
-    const { style, text, navigateToUrl } = buttonData;
-    const pad = style.buttonPadding || {};
-    const padTop = Number.isFinite(pad.top) ? pad.top : 10;
-    const padBottom = Number.isFinite(pad.bottom) ? pad.bottom : 10;
-    const padLeft = Number.isFinite(pad.left) ? pad.left : 20;
-    const padRight = Number.isFinite(pad.right) ? pad.right : 20;
-    const fs = style.fontSize || 16;
-    const minHeight = padTop + padBottom + fs;
-    const finalHeight = typeof style.height === "number" && style.height > 0
-        ? Math.max(style.height, minHeight)
-        : minHeight;
-    const safeFF = sanitizeFontFamily((0, fontFallback_1.withFontFallback)(style.fontFamily));
-    const safeColor = style.color || "#ffffff";
-    const bgColor = style.buttonColor || "transparent";
-    const bdColor = style.borderColor || "transparent";
-    const bdStyle = style.borderStyle || "solid";
-    const bw = typeof style.borderWidth === "number" ? style.borderWidth : 0;
-    const br = typeof style.borderRadius === "number" ? style.borderRadius : 0;
-    const fontWeight = style.fontWeight || 400;
-    const containerAlign = style.alignment || style.textAlign || "left";
-    const explicitWidth = typeof style.width === "number" && style.width > 0 ? style.width : 0;
-    const borderCss = bw > 0 ? `border:${bw}px ${bdStyle} ${bdColor};` : "";
-    const widthCss = explicitWidth ? `width:${explicitWidth}px;` : "";
-    // ── Non-MSO: <a display:inline-block> — border-radius works in modern clients ──
-    const nonMsoAnchor = `<!--[if !mso]><!-->
-<a href="${navigateToUrl}"
-   target="_blank" rel="noreferrer noopener"
-   style="display:inline-block;background-color:${bgColor};border-radius:${br}px;${borderCss}color:${safeColor};font-family:${safeFF};font-size:${fs}px;font-weight:${fontWeight};text-decoration:none;padding:${padTop}px ${padRight}px ${padBottom}px ${padLeft}px;line-height:${fs}px;text-align:center;white-space:nowrap;-webkit-text-size-adjust:none;box-sizing:border-box;${widthCss}mso-hide:all;">${text}</a>
-<!--<![endif]-->`;
-    // ── MSO: table-based bulletproof button.
-    // <v:roundrect arcsize="50%"> renders its half-circle arcs as visible bracket shapes
-    // in Outlook, so we use a plain <table>+<td> instead. bgcolor on <td> is reliable in
-    // all classic Outlook versions; border-radius is not (square corners in Outlook).
-    const tdStyleParts = [`padding:${padTop}px ${padRight}px ${padBottom}px ${padLeft}px`];
-    if (bw > 0)
-        tdStyleParts.push(`border:${bw}px ${bdStyle} ${bdColor}`);
-    if (explicitWidth)
-        tdStyleParts.push(`width:${explicitWidth}px`);
-    const tdStyle = tdStyleParts.join(";");
-    const msoButton = `<!--[if mso]>
-<table cellspacing="0" cellpadding="0" border="0">
-  <tr>
-    <td bgcolor="${bgColor}" style="${tdStyle};">
-      <a href="${navigateToUrl}" target="_blank" rel="noreferrer noopener"
-         style="color:${safeColor};font-family:${safeFF};font-size:${fs}px;font-weight:${fontWeight};text-decoration:none;display:inline-block;line-height:${fs}px;">${text}</a>
-    </td>
-  </tr>
-</table>
-<![endif]-->`;
-    const innerContent = containerAlign === "center"
-        ? `<center>${msoButton}${nonMsoAnchor}</center>`
-        : `<div style="text-align:${containerAlign};">${msoButton}${nonMsoAnchor}</div>`;
-    return {
-        innerContent,
-        computed: {
-            fs,
-            fontWeight,
-            containerAlign,
-            padTop,
-            padRight,
-            padBottom,
-            padLeft,
-            explicitWidth,
-            safeColor,
-            bgColor,
-            safeFF,
-            finalHeight,
-            bw,
-            br,
-            bdColor,
-            bdStyle,
-        },
-    };
-}
-function convertButtonBlock(blockData) {
-    const { style, props } = blockData.data;
-    const { text, navigateToUrl } = props;
-    const { fontFamily, fontSize, fontWeight, textAlign, borderColor, borderRadius, borderWidth, borderStyle, buttonPadding, color, buttonColor, width, height, alignment, padding, backgroundColor: containerBg, } = style;
-    const visibilityClass = (0, common_1.getVisibilityClass)(props);
-    const { innerContent, computed } = appendOutlookForButton({
-        style: {
-            fontFamily,
-            fontSize,
-            fontWeight,
-            textAlign,
-            borderColor,
-            borderRadius,
-            borderWidth,
-            borderStyle,
-            buttonPadding,
-            color,
-            buttonColor,
-            width,
-            height,
-            alignment,
-        },
-        text: text || "",
-        navigateToUrl: navigateToUrl || "",
-    });
-    const buttonBlockProps = encodeBlockProps({
-        buttonText: text || '',
-        navigateToUrl: navigateToUrl || '',
-        buttonColor: computed.bgColor,
-        color: computed.safeColor,
-        fontFamily: fontFamily || '',
-        fontSize: computed.fs,
-        fontWeight: computed.fontWeight,
-        alignment: computed.containerAlign,
-        padding: {
-            top: padding?.top || 0,
-            right: padding?.right || 0,
-            bottom: padding?.bottom || 0,
-            left: padding?.left || 0,
-        },
-        buttonPadding: { top: computed.padTop, right: computed.padRight, bottom: computed.padBottom, left: computed.padLeft },
-        width: computed.explicitWidth,
-        height: typeof height === 'number' && height > 0 ? height : 0,
-        backgroundColor: containerBg || '',
-        borderRadius: computed.br,
-        borderColor: computed.bdColor,
-        borderWidth: computed.bw,
-        borderStyle: computed.bdStyle,
-        hideOnDesktop: Boolean(props.hideOnDesktop),
-        hideOnMobile: Boolean(props.hideOnMobile),
-    });
-    return `
-<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" class="${visibilityClass}" data-block-type="button" data-block-props="${buttonBlockProps}">
-  <tr>
-    <td align="${computed.containerAlign}"
-        style="padding:${padding?.top || 0}px ${padding?.right || 0}px ${padding?.bottom || 0}px ${padding?.left || 0}px;background-color:${containerBg || 'transparent'};">
-      ${innerContent}
-    </td>
-  </tr>
-</table>
-`;
-}
-// Words inside a gradient() that are NOT color names
-const GRADIENT_KEYWORDS = new Set([
-    'linear', 'radial', 'conic', 'gradient',
-    'to', 'at', 'top', 'bottom', 'left', 'right', 'center',
-    'closest', 'farthest', 'corner', 'side', 'circle', 'ellipse',
-    'deg', 'turn', 'rad', 'grad', 'from', 'in',
-    'url', // url() prefix sometimes appears when gradient is wrapped incorrectly
-]);
-/** Extract the first color stop (hex, rgb, or named CSS color) from a gradient string. */
-function firstGradientColor(gradient) {
-    const tokenRe = /#[0-9a-fA-F]{3,8}|rgba?\([^)]+\)|([a-zA-Z-]+)/g;
-    let m;
-    while ((m = tokenRe.exec(gradient)) !== null) {
-        const namedWord = m[1];
-        if (namedWord) {
-            if (!GRADIENT_KEYWORDS.has(namedWord.toLowerCase()))
-                return namedWord;
-        }
-        else {
-            return m[0]; // hex or rgb()
-        }
-    }
-    return '';
-}
-/**
- * Extract the first solid-color stop from a CSS gradient in customCss.
- * Used as a MSO/Outlook bgcolor fallback. Handles hex, rgb, and named colors.
- */
-function extractCssFallbackColor(customCss) {
-    if (!customCss)
-        return '';
-    const gradientMatch = customCss.match(/(?:linear|radial|conic)-gradient\(([^)]+(?:\([^)]*\)[^)]*)*)\)/);
-    if (!gradientMatch)
-        return '';
-    return firstGradientColor(gradientMatch[1]);
-}
-function parseGradient(gradient) {
-    if (!gradient)
-        return null;
-    const lower = gradient.toLowerCase();
-    // Determine angle from deg value or direction keyword
-    const degMatch = gradient.match(/(\d+(?:\.\d+)?)deg/);
-    let angle = 180;
-    if (degMatch) {
-        angle = parseFloat(degMatch[1]);
-    }
-    else if (lower.includes('to right'))
-        angle = 90;
-    else if (lower.includes('to left'))
-        angle = 270;
-    else if (lower.includes('to top'))
-        angle = 0;
-    // 'to bottom' and bare gradient() both default to 180
-    // Extract ALL color tokens: hex, rgb/rgba, and named CSS color words
-    const colors = [];
-    const tokenRe = /#[0-9a-fA-F]{3,8}|rgba?\([^)]+\)|([a-zA-Z-]+)/g;
-    let m;
-    while ((m = tokenRe.exec(gradient)) !== null) {
-        const namedWord = m[1];
-        if (namedWord) {
-            if (!GRADIENT_KEYWORDS.has(namedWord.toLowerCase()))
-                colors.push(namedWord);
-        }
-        else {
-            colors.push(m[0]);
-        }
-    }
-    return {
-        angle,
-        colors,
-        fallback: colors[0] || '#ffffff',
-    };
-}
-function cssAngleToVml(angle) {
-    return (angle + 90) % 360;
-}
-async function convertGridBlock(blockData, rootData, cellWidthInPx) {
-    const { style = {}, childrenIds = [], props } = blockData.data;
-    const { columns = 1, cellWidths = [], responsive = true } = props;
-    const { columnGap = 0, backgroundImage, backgroundColor, ...restStyle } = style;
-    const gridVisibilityClass = (0, common_1.getVisibilityClass)(props);
-    // Detect gradient — check both backgroundImage prop and customCss (gradient may land in
-    // customCss when the block was built via CSS shorthand or custom CSS input).
-    const bgImageStr = typeof backgroundImage === "string" ? backgroundImage : '';
-    const customCssStr = restStyle.customCss || '';
-    // Extract gradient string from customCss if not already in backgroundImage
-    const gradientInCustomCss = !bgImageStr.includes('gradient(') && customCssStr.includes('gradient(')
-        ? (customCssStr.match(/(?:linear|radial|conic)-gradient\([^)]+(?:\([^)]*\)[^)]*)*\)/)?.[0] || '')
-        : '';
-    const effectiveGradient = bgImageStr.includes('gradient(')
-        ? bgImageStr
-        : gradientInCustomCss;
-    const isGradient = Boolean(effectiveGradient);
-    const parsedGradient = isGradient ? parseGradient(effectiveGradient) : null;
-    const fallbackBgColor = backgroundColor ||
-        parsedGradient?.fallback ||
-        extractCssFallbackColor(customCssStr) ||
-        "#ffffff";
-    const rawBgImageUrl = !isGradient && bgImageStr
-        ? bgImageStr.replace(/^url\(['"]?/, "").replace(/['"]?\)$/, "")
-        : null;
-    // When gradient came from customCss, strip background-image from customCss so it
-    // doesn't duplicate into the inner table style (the outer <td> wrapper carries it).
-    const innerCustomCss = gradientInCustomCss
-        ? customCssStr.replace(/background-image\s*:[^;]+;?/gi, '').trim()
-        : customCssStr;
-    // Build inner table styles — when gradient/bg-image is on the outer wrapper, strip
-    // background props from the inner table so the outer <td> background shows through.
-    const innerRestStyleRaw = (rawBgImageUrl || isGradient)
-        ? { ...restStyle, customCss: innerCustomCss, backgroundSize: undefined, backgroundPosition: undefined, backgroundRepeat: undefined }
-        : { ...restStyle, customCss: innerCustomCss };
-    // Extract border/radius props — applied via a div wrapper for non-MSO clients so that
-    // border-radius is honoured (Gmail/Outlook compose strip border-radius from <table>).
-    const { borderRadius, border, borderColor, borderWidth, borderStyle: borderStyleProp, ...innerRestStyle } = innerRestStyleRaw;
-    const divBorderParts = [];
-    if (borderRadius)
-        divBorderParts.push(`border-radius:${typeof borderRadius === 'number' ? borderRadius + 'px' : borderRadius};`, `overflow:hidden;`);
-    if (border) {
-        divBorderParts.push(`border:${border};`);
-    }
-    else if (borderWidth || borderColor || borderStyleProp) {
-        const bw = borderWidth ? (typeof borderWidth === 'number' ? borderWidth + 'px' : borderWidth) : '1px';
-        const bs = borderStyleProp || 'solid';
-        const bc = borderColor || '#000000';
-        divBorderParts.push(`border:${bw} ${bs} ${bc};`);
-    }
-    const divBorderStyle = divBorderParts.join(' ');
-    const tableBgForNonMso = divBorderStyle
-        ? 'transparent'
-        : ((rawBgImageUrl || isGradient) ? undefined : backgroundColor);
-    const tableStyles = buildStyles({ backgroundColor: tableBgForNonMso, ...innerRestStyle }, {
-        perChanges: [],
-        pxChanges: allPxAttributes,
-    });
-    const total = childrenIds.length;
-    const visualRows = Math.ceil(total / columns);
-    // OUTLOOK FIX: Use explicit pixel width for Old Outlook (Word engine)
-    const msoTableWidth = Math.min(cellWidthInPx, 600);
-    // When a background image/gradient is present, the background is applied on an outer
-    // wrapper <td> (see bottom of function). The inner grid tables must be clean.
-    // When no background, the MSO table gets bgcolor for solid-color sections.
-    const msoBgColor = !rawBgImageUrl && !isGradient
-        ? (backgroundColor || '')
-        : '';
-    const msoBgAttr = msoBgColor ? ` bgcolor="${msoBgColor}"` : '';
-    const msoBgStyle = msoBgColor ? `background-color:${msoBgColor};` : '';
-    // Inner tables must be explicitly transparent when outer <td> carries the background.
-    const innerBgTransparent = (rawBgImageUrl || isGradient)
-        ? 'background-color:transparent;'
-        : '';
-    const nonMsoBgAttr = !rawBgImageUrl && !isGradient && backgroundColor && !divBorderStyle ? ` bgcolor="${backgroundColor}"` : '';
-    // When divBorderStyle is set the non-MSO <table> is transparent, so the Grid's
-    // backgroundColor must move onto the div wrapper — otherwise it vanishes in modern clients.
-    // Skip this for bg-image/gradient blocks; they apply their background via a separate wrapper.
-    const divWrapBg = divBorderStyle && backgroundColor && !rawBgImageUrl && !isGradient
-        ? ` background-color:${backgroundColor};`
-        : '';
-    const divWrapOpen = divBorderStyle ? `<div style="${divBorderStyle}${divWrapBg}">` : '';
-    const divWrapClose = divBorderStyle ? `</div>` : '';
-    let html = `
-  <!--[if mso]>
-  <table border="0" cellpadding="0" cellspacing="0" width="${msoTableWidth}"${msoBgAttr}
-     style="border-collapse:collapse;width:${msoTableWidth}px;${msoBgStyle}${innerBgTransparent}"
-     class="${gridVisibilityClass}">
-  <![endif]-->
-  <!--[if !mso]><!-->
-  <table border="0" cellpadding="0" cellspacing="0" width="100%"
-     role="presentation"${nonMsoBgAttr}
-     style="border-collapse:collapse; ${innerBgTransparent}${tableStyles}; max-width:600px;"
-     class="${gridVisibilityClass}">
-  <!--<![endif]-->
-  `;
-    for (let r = 0; r < visualRows; r++) {
-        html += "<tr>";
-        // COUNT visible cells and find last visible column index
-        let visibleCells = 0;
-        let lastVisibleCol = 0;
-        const rowIds = [];
-        for (let c = 0; c < columns; c++) {
-            const idx = r * columns + c;
-            const id = childrenIds[idx] ?? null;
-            rowIds.push(id);
-            const child = id ? rootData[id] : null;
-            const isHidden = child?.data?.props?.hideOnDesktop;
-            if (!isHidden) {
-                visibleCells++;
-                lastVisibleCol = c;
-            }
-        }
-        const safeWidth = visibleCells > 0 ? 100 / visibleCells : 100 / columns;
-        // Reserve pixel space for spacer tds between visible cells (N-1 gaps for N visible cells)
-        const totalGapPx = columnGap * Math.max(visibleCells - 1, 0);
-        const adjustedTableWidth = Math.max(msoTableWidth - totalGapPx, 1);
-        let totalWidth = 0;
-        const cellWidthPercents = [];
-        for (let c = 0; c < columns; c++) {
-            const id = rowIds[c];
-            let widthPercent = cellWidths[c] ?? safeWidth;
-            if (widthPercent <= 0 || widthPercent > 100) {
-                widthPercent = safeWidth;
-            }
-            cellWidthPercents.push(widthPercent);
-            if (id) {
-                const child = rootData[id];
-                const isHidden = child?.data?.props?.hideOnDesktop;
-                if (!isHidden) {
-                    totalWidth += widthPercent;
-                }
-            }
-        }
-        const scaleFactor = totalWidth > 0 && totalWidth < 100 ? 100 / totalWidth : 1;
-        for (let c = 0; c < columns; c++) {
-            const id = rowIds[c];
-            let widthPercent = cellWidthPercents[c] * scaleFactor;
-            widthPercent = Math.min(widthPercent, 100);
-            // Cell pixel width is a share of the gap-adjusted table width
-            const cellWidthPx = Math.round((widthPercent / 100) * adjustedTableWidth);
-            if (id) {
-                const child = rootData[id];
-                const { style: cellStyle = {}, props: childProps = {} } = child.data;
-                const verticalAlign = cellStyle.verticalAlign || "top";
-                const childVisible = !childProps.hideOnDesktop;
-                const visibilityClass = (0, common_1.getVisibilityClass)(childProps);
-                if (childVisible) {
-                    const { html: childHtml, styles } = await convertGridCellBlock(child, rootData, widthPercent, adjustedTableWidth, Boolean(divBorderStyle));
-                    // bgcolor on the cell <td> ensures background-color survives Outlook
-                    // compose paste (Word/Web editors strip CSS but keep bgcolor attribute).
-                    const cellBgColor = cellStyle.backgroundColor || '';
-                    const cellBgAttr = cellBgColor ? ` bgcolor="${cellBgColor}"` : '';
-                    html += `
-          <td
-            width="${cellWidthPx}"${cellBgAttr}
-            class="${[responsive ? "stack-column" : "", visibilityClass].filter(Boolean).join(" ")}"
-            style="width:${cellWidthPx}px;vertical-align:${verticalAlign};word-break:break-word;${styles}"
-          >
-            ${childHtml}
-          </td>`;
-                    // Spacer td between columns — fixed pixel width, invisible to screen readers
-                    if (columnGap > 0 && c !== lastVisibleCol) {
-                        html += `<td width="${columnGap}" style="width:${columnGap}px;font-size:0;line-height:0;padding:0;" aria-hidden="true"></td>`;
-                    }
-                }
-            }
-            else {
-                html += `
-        <td width="${cellWidthPx}"
-            ${responsive ? 'class="stack-column"' : ""}
-            style="width:${cellWidthPx}px;vertical-align:top;">
-        </td>`;
-                if (columnGap > 0 && c !== lastVisibleCol) {
-                    html += `<td width="${columnGap}" style="width:${columnGap}px;font-size:0;line-height:0;padding:0;" aria-hidden="true"></td>`;
-                }
-            }
-        }
-        html += "</tr>";
-    }
-    // Close both MSO and non-MSO tables
-    html += `
-  <!--[if mso]>
-  </table>
-  <![endif]-->
-  <!--[if !mso]><!-->
-  </table>
-  <!--<![endif]-->
-  `;
-    // ── Background image: canonical multi-client approach ────────────────────
-    //
-    // Problem: `background-image` on a <table> element is stripped by:
-    //   • New Outlook Mac / Windows (Chromium-based app)
-    //   • Outlook.com
-    //   • Old Outlook (Word engine) — ignores CSS entirely
-    //
-    // Solution: wrap the grid in an outer <table><tr><td> where the <td> carries
-    // the background. Different clients pick it up via different mechanisms:
-    //
-    //   background="" attribute on <td>  → Yahoo Mail, older webmail
-    //   CSS background-image on <td>     → Gmail, Apple Mail, new Outlook Mac ✓
-    //   VML v:rect inside the <td>       → Old Outlook (Word engine) ✓
-    //
-    // The inner grid tables have NO background so the outer <td> bg shows through.
-    if (rawBgImageUrl || isGradient) {
-        const vmlFill = isGradient
-            ? (() => {
-                const vmlAngle = cssAngleToVml(parsedGradient?.angle || 180);
-                const c1 = parsedGradient?.fallback || '#ffffff';
-                const c2 = parsedGradient?.colors[parsedGradient.colors.length - 1] || c1;
-                return `<v:fill type="gradient" color="${c1}" color2="${c2}" angle="${vmlAngle}" />`;
-            })()
-            : `<v:fill type="frame" src="${rawBgImageUrl}" color="${fallbackBgColor}" />`;
-        html = `
-<table border="0" cellpadding="0" cellspacing="0" width="${msoTableWidth}" role="presentation"
-  style="border-collapse:collapse;width:${msoTableWidth}px;">
-  <tr>
-    <td width="${msoTableWidth}" bgcolor="${fallbackBgColor}" valign="top"
-      ${!isGradient && rawBgImageUrl ? `background="${rawBgImageUrl}"` : ""}
-      style="
-        width:${msoTableWidth}px;
-        background-color:${fallbackBgColor};
-        ${isGradient ? `background:${effectiveGradient};` : `background-image:url('${rawBgImageUrl}'); background-position:center center; background-size:cover; background-repeat:no-repeat;`}
-      ">
-
-      <!--[if gte mso 9]>
-      <v:rect xmlns:v="urn:schemas-microsoft-com:vml"
-        fill="true" stroke="false"
-        style="width:${msoTableWidth}px;">
-        ${vmlFill}
-        <v:textbox inset="0,0,0,0">
-      <![endif]-->
-
-      ${html}
-
-      <!--[if gte mso 9]>
-        </v:textbox>
-      </v:rect>
-      <![endif]-->
-
-    </td>
-  </tr>
-</table>`;
-    }
-    // Wrap the entire grid (including any bg-image outer table) in a div when the block
-    // has border/radius. An unconditional <div> is used — not gated behind <!--[if !mso]>-->
-    // — so Gmail compose paste renders the border-radius reliably. Old Outlook ignores
-    // border-radius on <div> but still shows the rectangular border; new Outlook works fully.
-    if (divBorderStyle)
-        html = `${divWrapOpen}${html}${divWrapClose}`;
-    return html;
-}
-async function convertGridCellBlock(blockData, rootData, cellWidthPercent, parentCellWidthPx, parentGridHasBorder = false) {
-    const { style = {}, childrenIds = [], props = {} } = blockData.data;
-    const visibilityClass = (0, common_1.getVisibilityClass)(props);
-    // Extract border + radius from style so they move to the div wrapper (not the <td>).
-    // Gmail strips border-radius from <td> but honours it on <div>. By putting border and
-    // radius on the same unconditional <div>, the rounded card border renders in all clients.
-    // The <td> keeps bgcolor (via attribute) for Old Outlook background fallback.
-    const { borderRadius: cellBorderRadius, borderWidth: cellBorderWidth, borderStyle: cellBorderStyleProp, borderColor: cellBorderColor, border: cellBorderShorthand, ...styleWithoutBorder } = style;
-    // backgroundColor must stay on the div wrapper (not the <td>) in two cases:
-    // 1. Cell has its own border-radius — the div's overflow:hidden clips the background.
-    // 2. Parent grid has a border div (divBorderStyle) — the grid's overflow:hidden clips it.
-    // In both cases, the rectangular <td> background bleeds through rounded corners if kept
-    // in CSS, creating visible corner squares. The bgcolor attribute stays for Outlook fallback.
-    const stripBgFromTd = Boolean(cellBorderRadius) || parentGridHasBorder;
-    const styleForTd = stripBgFromTd
-        ? { ...styleWithoutBorder, backgroundColor: 'transparent' }
-        : styleWithoutBorder;
-    const styles = buildStyles(styleForTd, {
-        perChanges: [],
-        pxChanges: allPxAttributes,
-    });
-    const parts = [];
-    // OUTLOOK FIX: Calculate the actual cell width in pixels based on percentage
-    // If parent is 600px and cell is 50%, cell width should be 300px, not 600px
-    const cellWidthPx = Math.round((cellWidthPercent / 100) * parentCellWidthPx);
-    // Subtract the cell's own padding so children receive the actual content-area width.
-    // Old Outlook honours explicit img/table width attributes — if a child is sized to the
-    // full column width (ignoring padding) it overflows and expands the column.
-    const cellPad = styleWithoutBorder?.padding || {};
-    const cellPadLeft = Number.isFinite(cellPad.left) ? cellPad.left : 0;
-    const cellPadRight = Number.isFinite(cellPad.right) ? cellPad.right : 0;
-    const contentWidthPx = Math.max(cellWidthPx - cellPadLeft - cellPadRight, 20);
-    // OUTLOOK FIX: Ensure cell width is reasonable and capped at 600px
-    const safeCellWidthPx = Math.min(contentWidthPx, 600);
-    for (const childId of childrenIds) {
-        const child = rootData[childId];
-        if (child) {
-            parts.push(await convertToHtml(child, rootData, safeCellWidthPx));
-        }
-    }
-    const borderRadius = cellBorderRadius || 0;
-    const bgColor = styleWithoutBorder?.backgroundColor || "transparent";
-    // Build border CSS for the div wrapper.
-    // When the parent grid already has a divBorderStyle wrapper (border + border-radius +
-    // overflow:hidden), the cell must NOT duplicate the same border/radius — that causes
-    // two concentric borders of the same colour (double-border). The grid's wrapper div
-    // already provides the visual container; the cell div only needs background-color.
-    const cellDivBorderParts = [];
-    if (!parentGridHasBorder) {
-        if (borderRadius)
-            cellDivBorderParts.push(`border-radius:${typeof borderRadius === 'number' ? borderRadius + 'px' : borderRadius};`, `overflow:hidden;`);
-        if (cellBorderShorthand) {
-            cellDivBorderParts.push(`border:${cellBorderShorthand};`);
-        }
-        else if (cellBorderWidth || cellBorderColor || cellBorderStyleProp) {
-            const bw = cellBorderWidth ? (typeof cellBorderWidth === 'number' ? cellBorderWidth + 'px' : cellBorderWidth) : '1px';
-            const bs = cellBorderStyleProp || 'solid';
-            const bc = cellBorderColor || '#000000';
-            cellDivBorderParts.push(`border:${bw} ${bs} ${bc};`);
-        }
-    }
-    const cellDivBorderStyle = cellDivBorderParts.join(' ');
-    // Unconditional div — visible to all clients (Gmail, Outlook new/old, Apple Mail).
-    // background-color on the div covers modern clients; bgcolor on <td> covers Old Outlook.
-    const divStyleParts = [`background-color:${bgColor};`];
-    if (cellDivBorderStyle)
-        divStyleParts.push(cellDivBorderStyle);
-    const divStyleStr = divStyleParts.join(' ');
-    const wrapped = `<div style="${divStyleStr}">${parts.join("")}</div>`;
-    return {
-        html: wrapped,
-        styles,
-    };
-}
-// Enhanced Video Block HTML Conversion with centered play button
-async function convertVideoBlock(blockData, cellWidthInPx) {
-    const { style, props } = blockData.data;
-    const visibilityClass = (0, common_1.getVisibilityClass)(props);
-    const { hideOnDesktop } = props; // Get the hideOnDesktop prop
-    const { videoUrl, youtubeVideoUrl, thumbnailUrl, altText } = props;
-    const videoLink = youtubeVideoUrl || videoUrl || "#";
-    // via.placeholder.com is defunct — use a data-URI grey box as the default thumbnail
-    const FALLBACK_THUMBNAIL = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='360'%3E%3Crect width='480' height='360' fill='%23cccccc'/%3E%3C/svg%3E`;
-    let resolvedThumbnail = thumbnailUrl || FALLBACK_THUMBNAIL;
-    if (youtubeVideoUrl) {
-        const youtubeId = (0, common_1.extractYouTubeId)(youtubeVideoUrl);
-        const vimeoId = (0, common_1.extractVimeoId)(youtubeVideoUrl);
-        if (youtubeId) {
-            resolvedThumbnail = `https://img.youtube.com/vi/${youtubeId}/hqdefault.jpg`;
-        }
-        else if (vimeoId) {
-            try {
-                const res = await fetch(`https://vimeo.com/api/v2/video/${vimeoId}.json`);
-                if (res.ok) {
-                    const data = await res.json();
-                    resolvedThumbnail = data?.[0]?.thumbnail_large || resolvedThumbnail;
-                }
-            }
-            catch (_) { }
-        }
-    }
-    // Determine width logic
-    let percentWidth;
-    if (typeof style?.width === "string" && style.width.trim().endsWith("%")) {
-        percentWidth = style.width.trim();
-    }
-    else if (typeof style?.width === "number") {
-        percentWidth = `${style.width}%`;
-    }
-    else {
-        percentWidth = "100%";
-    }
-    const innerContainerWidth = (parseFloat(percentWidth) / 100) * (cellWidthInPx - (style?.padding?.left || 0) - (style?.padding?.right || 0));
-    const aspectRatio = 16 / 9;
-    const calculatedHeight = innerContainerWidth / aspectRatio;
-    const outerContainerStyles = buildStyles({
-        ...style,
-        width: undefined,
-        borderColor: undefined,
-        borderRadius: undefined,
-        borderWidth: undefined,
-        borderStyle: undefined,
-    }, {
-        perChanges: addPxOrPerToAttributes,
-        pxChanges: addPxToAttributes,
-    });
-    const borderRadius = parseInt(style?.borderRadius) || 0;
-    const borderWidth = parseInt(style?.borderWidth) || 0;
-    const borderColor = style?.borderColor || "transparent";
-    // Play icon size
-    const playIconWidth = 65;
-    const playIconHeight = 46;
-    // VML centering math (for Outlook)
-    const vmlLeft = innerContainerWidth / 2 - playIconWidth / 2;
-    const vmlTop = calculatedHeight / 2 - playIconHeight / 2;
-    const shouldHideInOutlook = hideOnDesktop;
-    const outlookVideoContent = shouldHideInOutlook
-        ? `<!--[if !mso]><!-->
-       <v:group xmlns:v="urn:schemas-microsoft-com:vml"
-         coordsize="${innerContainerWidth},${calculatedHeight}"
-         href="${videoLink}"
-         style="width:${innerContainerWidth}px;height:${calculatedHeight}px;">
-         <v:rect fill="t" style="position:absolute;width:${innerContainerWidth}px;height:${calculatedHeight}px;"
-           ${borderWidth > 0 ? `stroked="t" strokeweight="${borderWidth}px" strokecolor="${borderColor}"` : `stroked="f"`}
-           ${borderRadius > 0 ? `arcsize="${Math.min(borderRadius / calculatedHeight, 1).toFixed(2)}"` : ""}
-         >
-           <v:fill src="${resolvedThumbnail}" type="frame" color="${style?.backgroundColor || "#FFFFFF"}"/>
-         </v:rect>
-         <v:shape type="#_x0000_t75"
-           style="position:absolute;
-                  left:${vmlLeft.toFixed(1)}px;
-                  top:${vmlTop.toFixed(1)}px;
-                  width:${playIconWidth}px;
-                  height:${playIconHeight}px;"
-           alt="Play" href="${videoLink}" title="${altText || "Video"}"
-           stroked="f" filled="t">
-           <v:imagedata src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png" />
-         </v:shape>
-       </v:group>
-       <!--<![endif]-->`
-        : `<!--[if mso]>
-       <v:group xmlns:v="urn:schemas-microsoft-com:vml"
-         coordsize="${innerContainerWidth},${calculatedHeight}"
-         href="${videoLink}"
-         style="width:${innerContainerWidth}px;height:${calculatedHeight}px;">
-         <v:rect fill="t" style="position:absolute;width:${innerContainerWidth}px;height:${calculatedHeight}px;"
-           ${borderWidth > 0 ? `stroked="t" strokeweight="${borderWidth}px" strokecolor="${borderColor}"` : `stroked="f"`}
-           ${borderRadius > 0 ? `arcsize="${Math.min(borderRadius / calculatedHeight, 1).toFixed(2)}"` : ""}
-         >
-           <v:fill src="${resolvedThumbnail}" type="frame" color="${style?.backgroundColor || "#FFFFFF"}"/>
-         </v:rect>
-         <v:shape type="#_x0000_t75"
-           style="position:absolute;
-                  left:${vmlLeft.toFixed(1)}px;
-                  top:${vmlTop.toFixed(1)}px;
-                  width:${playIconWidth}px;
-                  height:${playIconHeight}px;"
-           alt="Play" href="${videoLink}" title="${altText || "Video"}"
-           stroked="f" filled="t">
-           <v:imagedata src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png" />
-         </v:shape>
-       </v:group>
-       <![endif]-->`;
-    // Non-Outlook: use a real <img> for the thumbnail so it renders in Gmail / Yahoo / webmail.
-    // background-image on <table> is stripped by virtually every email client.
-    const thumbnailW = Math.round(innerContainerWidth);
-    const thumbnailH = Math.round(calculatedHeight);
-    const borderAttr = borderWidth > 0 ? `border:${borderWidth}px ${style?.borderStyle || "solid"} ${borderColor};` : "border:0;";
-    const radiusAttr = borderRadius > 0 ? `border-radius:${borderRadius}px; overflow:hidden;` : "";
-    // Overlay the play button using negative margin-top + line-height centering.
-    // This avoids both position:absolute (stripped by Gmail/Yahoo) and
-    // height:0/overflow:visible (clipped by New Outlook at <td> boundaries).
-    // The play button <a> is pulled up by margin-top:-thumbnailH to sit over the thumbnail,
-    // then line-height:thumbnailH + vertical-align:middle centres the icon vertically.
-    // Elements later in DOM flow render on top of earlier ones, so the play icon overlays the image.
-    const playButtonHtml = `<a href="${videoLink}" target="_blank" data-play-button="true"
-      style="display:block; margin-top:-${thumbnailH}px; text-align:center; line-height:${thumbnailH}px; font-size:0; text-decoration:none; border:0; outline:none;">
-      <img
-        src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png"
-        width="${playIconWidth}"
-        height="${playIconHeight}"
-        alt="Play"
-        style="display:inline-block; vertical-align:middle; border:0; outline:none;"
-      />
-    </a>`;
-    const nonOutlookVideoContent = `<!--[if !mso]><!-->
-<div style="display:block; width:100%; max-width:${thumbnailW}px; line-height:0; font-size:0; ${borderAttr}${radiusAttr}">
-  <a href="${videoLink}" target="_blank" style="display:block; text-decoration:none; line-height:0; font-size:0;">
-    <img
-      src="${resolvedThumbnail}"
-      width="${thumbnailW}"
-      height="${thumbnailH}"
-      alt="${altText || "Video"}"
-      style="display:block; width:100%; max-width:${thumbnailW}px; height:auto; border:0;"
-    />
-  </a>
-  ${playButtonHtml}
-</div>
-<!--<![endif]-->`;
-    const videoContent = `${outlookVideoContent}${nonOutlookVideoContent}`;
-    const videoBlockProps = encodeBlockProps({
-        videoUrl: videoUrl || '',
-        youtubeVideoUrl: youtubeVideoUrl || '',
-        thumbnailUrl: thumbnailUrl || resolvedThumbnail,
-        altText: altText || '',
-        width: parseFloat(percentWidth) || 100,
-        padding: style?.padding || { top: 0, right: 0, bottom: 0, left: 0 },
-        backgroundColor: style?.backgroundColor || '',
-        textAlign: style?.textAlign || 'left',
-        borderRadius: style?.borderRadius || 0,
-        borderColor: style?.borderColor || '',
-        borderWidth: style?.borderWidth || 0,
-        borderStyle: style?.borderStyle || 'none',
-        hideOnDesktop: Boolean(props.hideOnDesktop),
-        hideOnMobile: Boolean(props.hideOnMobile),
-    });
-    const wrapperHtml = `
-  <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin:0; padding:0; border-collapse: collapse; max-width:600px;" class="${visibilityClass}" data-block-type="video" data-block-props="${videoBlockProps}">
-    <tr>
-      <td align="${style?.textAlign || "left"}" style="padding:0; ${outerContainerStyles}">
-        <table border="0" cellpadding="0" cellspacing="0" role="presentation"
-          align="${style?.textAlign || "left"}"
-          style="
-            margin:0;
-            max-width:${cellWidthInPx}px;
-            width:${percentWidth};
-            border-collapse:collapse;
-          ">
-          <tr>
-            <td align="${style?.textAlign || "left"}" style="text-align:${style?.textAlign || "left"}; padding:0;">
-              ${videoContent}
-            </td>
-          </tr>
-        </table>
-      </td>
-    </tr>
-  </table>
-`;
-    return wrapperHtml;
-}
-// Enhanced Shape Block HTML Conversion using appendOutlookForShape
-// ---------- helpers ----------
-function computeArcSize(borderRadius, widthPx) {
-    if (!borderRadius)
-        return "0";
-    if (typeof borderRadius === "number")
-        return Math.min(borderRadius / widthPx, 1).toFixed(2);
-    const s = borderRadius.toString().trim();
-    if (s.endsWith("%")) {
-        const pct = parseFloat(s.replace("%", "")) || 0;
-        return Math.min(pct / 100, 1).toFixed(2);
-    }
-    // assume px or raw number
-    const px = parseFloat(s.replace("px", "")) || 0;
-    return Math.min(px / widthPx, 1).toFixed(2);
-}
-async function convertShapeBlock(blockData) {
-    const { style, props } = blockData.data;
-    const { shape, text, imageUrl } = props;
-    const visibilityClass = (0, common_1.getVisibilityClass)(props);
-    const { width = "100", height = "150", padding = {}, backgroundColor = "#2F80ED", borderRadius, borderWidth = 0, borderStyle = "solid", borderColor = "transparent", customCss, shapeColor, alignment = "left", msoBakeImageWithText, color = "#000000", fontSize = 14, textAlign = "center", verticalAlign = "middle", } = style || {};
-    const borderRadiusMap = {
-        rectangle: "0",
-        rounded: "10px",
-        circle: "50%",
-        oval: "50%",
-    };
-    let resolvedBorderRadius = borderRadius || borderRadiusMap[shape] || "0";
-    let resolvedWidthPx = typeof width === "number"
-        ? width
-        : parseInt(width.toString().replace("px", ""), 10) || 100;
-    let resolvedHeightPx = typeof height === "number"
-        ? height
-        : parseInt(height.toString().replace("px", ""), 10) || 150;
-    // --- Shape-specific constraints ---
-    if (shape === "circle") {
-        const side = Math.min(resolvedWidthPx, resolvedHeightPx);
-        resolvedWidthPx = side;
-        resolvedHeightPx = side;
-        resolvedBorderRadius = "50%";
-    }
-    else if (shape === "oval") {
-        resolvedBorderRadius = "50% / 50%";
-    }
-    const finalBackgroundColor = shapeColor || backgroundColor;
-    // --- Horizontal alignment for outer container ---
-    const alignmentStyles = {
-        left: "margin-right:auto;margin-left:0;",
-        center: "margin-left:auto;margin-right:auto;",
-        right: "margin-left:auto;margin-right:0;",
-    };
-    const alignmentStyle = alignmentStyles[alignment] || "";
-    // --- Text + vertical alignment maps ---
-    const textAlignMap = {
-        left: "left",
-        center: "center",
-        right: "right",
-        justify: "justify",
-    };
-    const textAlignStyle = textAlignMap[textAlign] || "center";
-    // --- Text styling ---
-    const textSizeStyle = `font-size:${fontSize}px;line-height:1.3;word-break:break-word;overflow-wrap:break-word;color:${color};`;
-    // ============================
-    // Modern HTML (non-MSO)
-    // ============================
-    let nonMsoContent = "";
-    // --- Case 1: Image + Text ---
-    if (imageUrl && text) {
-        nonMsoContent = `
-<div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
-  border:${borderWidth}px ${borderStyle} ${borderColor};
-  border-radius:${resolvedBorderRadius};
-  background-color:${finalBackgroundColor};
-  background-image:url('${imageUrl}');
-  background-position:center center;
-  background-size:cover;
-  background-repeat:no-repeat;
-  overflow:hidden;${alignmentStyle}${customCss || ""}">
-  <table border="0" cellpadding="0" cellspacing="0" width="${resolvedWidthPx}"
-    style="width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;border-collapse:collapse;">
-    <tr>
-      <td align="${textAlignStyle}" valign="${verticalAlign}"
-          width="${resolvedWidthPx}" height="${resolvedHeightPx}"
-          style="padding:6px;vertical-align:${verticalAlign};text-align:${textAlignStyle};overflow:hidden;box-sizing:border-box;">
-        <div style="${textSizeStyle}text-align:${textAlignStyle};max-width:90%;overflow:hidden;">${text}</div>
-      </td>
-    </tr>
-  </table>
-</div>`;
-    }
-    // --- Case 2: Image only ---
-    else if (imageUrl) {
-        nonMsoContent = `
-<div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
-  border:${borderWidth}px ${borderStyle} ${borderColor};
-  border-radius:${resolvedBorderRadius};
-  overflow:hidden;${alignmentStyle}${customCss || ""}">
-  <img src="${imageUrl}" alt="${text || "shape image"}"
-    width="${resolvedWidthPx}" height="${resolvedHeightPx}"
-    style="width:100%;height:100%;object-fit:cover;border-radius:${resolvedBorderRadius};display:block;" />
-</div>`;
-    }
-    // --- Case 3: Text only ---
-    else {
-        nonMsoContent = `
-<div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
-  background-color:${finalBackgroundColor};
-  border:${borderWidth}px ${borderStyle} ${borderColor};
-  border-radius:${resolvedBorderRadius};
-  overflow:hidden;${alignmentStyle}${customCss || ""}">
-  <table border="0" cellpadding="0" cellspacing="0" width="${resolvedWidthPx}"
-    style="width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;border-collapse:collapse;">
-    <tr>
-      <td align="${textAlignStyle}" valign="${verticalAlign}"
-          width="${resolvedWidthPx}" height="${resolvedHeightPx}"
-          style="padding:8px;vertical-align:${verticalAlign};text-align:${textAlignStyle};box-sizing:border-box;">
-        <div style="${textSizeStyle}text-align:${textAlignStyle};max-width:90%;overflow:hidden;">${text || ""}</div>
-      </td>
-    </tr>
-  </table>
-</div>`;
-    }
-    // Outlook (VML) fallback
-    const outlookContent = appendOutlookForShape(nonMsoContent, resolvedWidthPx, resolvedWidthPx, {
-        shape,
-        imageUrl,
-        backgroundColor,
-        shapeColor,
-        borderWidth,
-        borderColor,
-        borderRadius: resolvedBorderRadius,
-        heightPx: resolvedHeightPx,
-        text,
-        textColor: color,
-        textSize: fontSize,
-        verticalAlign,
-        textAlign, // ✅ added
-        alignment,
-        padding,
-        msoBakeImageWithText,
-    }, visibilityClass);
-    // Embed block metadata so the HTML importer can reconstruct the Shape block exactly.
-    const shapeProps = encodeBlockProps({
-        shape,
-        width: resolvedWidthPx,
-        height: resolvedHeightPx,
-        shapeColor: String(finalBackgroundColor || '#BEBEBE'),
-        backgroundColor: String(finalBackgroundColor || '#BEBEBE'),
-        borderRadius: borderRadius !== undefined ? borderRadius : 0,
-        borderWidth: borderWidth || 0,
-        borderColor: borderColor || 'transparent',
-        borderStyle: borderStyle || 'solid',
-        imageUrl: imageUrl || '',
-        text: text || '',
-        color: String(color || '#000000'),
-        fontSize: fontSize || 14,
-        textAlign: textAlignStyle,
-        verticalAlign: verticalAlign || 'middle',
-        alignment: alignment || 'left',
-        padding: {
-            top: padding.top || 0,
-            right: padding.right || 0,
-            bottom: padding.bottom || 0,
-            left: padding.left || 0,
-        },
-        hideOnDesktop: Boolean(props.hideOnDesktop),
-        hideOnMobile: Boolean(props.hideOnMobile),
-        customCss: customCss || '',
-    });
-    // Combine into table wrapper
-    return `
-<table width="100%" style="border-collapse:collapse;table-layout:fixed;max-width:600px;" class="${visibilityClass}" data-block-type="shape" data-block-props="${shapeProps}">
-  <tr>
-    <td style="padding:${padding.top || 0}px ${padding.right || 0}px ${padding.bottom || 0}px ${padding.left || 0}px;text-align:${alignment};">
-      ${outlookContent}
-      <!--[if !mso]><!-->
-      ${nonMsoContent}
-      <!--<![endif]-->
-    </td>
-  </tr>
-</table>`;
-}
-// ---------- Updated VML builder ----------
-function buildVMLShape({ shape, widthPx, heightPx, imageUrl, backgroundColor, borderWidth, borderColor, borderRadius, text, textColor = "#000000", textSize = 14, verticalAlign = "middle", textAlign = "center", msoHasBakedText = false, }) {
-    const bw = borderWidth || 0;
-    const bc = borderColor || "transparent";
-    const borderAttrs = bw > 0 ? `strokeweight="${bw}px" strokecolor="${bc}"` : `stroked="false"`;
-    const fillColor = backgroundColor || "#2F80ED";
-    // Use frame for img fill so sizing is preserved
-    const fillMarkup = `<v:fill ${imageUrl ? `src="${imageUrl}" type="frame" aspect="atleast"` : ""} color="${fillColor}" />`;
-    let tag = "rect";
-    let extraAttr = "";
-    if (shape === "circle" || shape === "oval") {
-        tag = "oval";
-    }
-    else if (shape === "rounded") {
-        tag = "roundrect";
-        extraAttr = `arcsize="${computeArcSize(borderRadius, widthPx)}"`;
-    }
-    // maps for vml
-    const vAlignMap = { top: "top", middle: "middle", bottom: "bottom" };
-    const hAlignMap = {
-        left: "left",
-        center: "center",
-        right: "right",
-        justify: "left",
-    }; // justify -> left fallback in VML
-    const vAlign = vAlignMap[verticalAlign] || "middle";
-    const hAlign = hAlignMap[textAlign] || "center";
-    const safeFontSize = Math.max(Math.round(textSize), 10);
-    // Build the textbox with table/cell for reliable vertical centering in Outlook
-    const textboxMarkup = text && !msoHasBakedText
-        ? `<v:textbox inset="6pt,6pt,6pt,6pt" style="mso-fit-shape-to-text:false;">
-           <div style="display:table;width:100%;height:100%;">
-             <div style="display:table-cell;vertical-align:${vAlign};text-align:${hAlign};padding:0 6px;">
-               <div style="color:${textColor};font-family:Arial, sans-serif;font-size:${safeFontSize}px;line-height:1.3;word-wrap:break-word;">
-                 ${text}
-               </div>
-             </div>
-           </div>
-         </v:textbox>`
-        : `<v:textbox inset="0,0,0,0"><div style="display:none;">.</div></v:textbox>`;
-    // Return VML shape
-    return `
-<v:${tag} xmlns:v="urn:schemas-microsoft-com:vml"
-  style="width:${widthPx}px;height:${heightPx}px;display:inline-block;"
-  ${borderAttrs}
-  fill="true" fillcolor="${fillColor}"${extraAttr}>
-  ${fillMarkup}
-  ${textboxMarkup}
-</v:${tag}>`;
-}
-function appendOutlookForShape(content, outerContainerWidth, innerContainerWidth, opts, visibilityClass) {
-    const widthPx = Math.round(Math.min(outerContainerWidth, innerContainerWidth));
-    const heightPx = Math.max(1, Math.round(opts.heightPx));
-    const vml = buildVMLShape({
-        shape: opts.shape,
-        widthPx,
-        heightPx,
-        imageUrl: opts.msoBakeImageWithText || opts.imageUrl,
-        backgroundColor: opts.shapeColor || opts.backgroundColor,
-        borderWidth: opts.borderWidth,
-        borderColor: opts.borderColor,
-        borderRadius: opts.borderRadius,
-        text: opts.text,
-        textColor: opts.textColor,
-        textSize: opts.textSize,
-        verticalAlign: opts.verticalAlign,
-        textAlign: opts.textAlign,
-        msoHasBakedText: Boolean(opts.msoBakeImageWithText),
-    });
-    const pad = opts.padding || {};
-    const align = opts.alignment || "left";
-    const valign = opts.verticalAlign || "middle";
-    const shouldHideInOutlook = visibilityClass.includes("hide-desktop");
-    // Fix: Properly handle Outlook visibility with conditional comments
-    if (shouldHideInOutlook) {
-        return `<!--[if !mso]><!-->
-    <table align="${align}" border="0" cellpadding="0" cellspacing="0"
-           style="width:${widthPx}px;height:${heightPx}px;border-collapse:collapse;" class="${visibilityClass}">
-      <tr>
-        <td valign="${valign}"
-            style="padding:${pad.top || 0}px ${pad.right || 0}px ${pad.bottom || 0}px ${pad.left || 0}px;">
-          ${vml}
-        </td>
-      </tr>
-    </table>
-    <!--<![endif]-->`;
-    }
-    return `<!--[if mso]>
-  <table align="${align}" border="0" cellpadding="0" cellspacing="0"
-         style="width:${widthPx}px;height:${heightPx}px;border-collapse:collapse;" class="${visibilityClass}">
-    <tr>
-      <td valign="${valign}"
-          style="padding:${pad.top || 0}px ${pad.right || 0}px ${pad.bottom || 0}px ${pad.left || 0}px;">
-        ${vml}
-      </td>
-    </tr>
-  </table>
-<![endif]-->`;
-}
-function convertVerticalDividerBlockToHtml(blockData) {
-    const { style, props } = blockData.data;
-    const { width, height, dividerColor, padding, backgroundColor } = style;
-    const visibilityClass = (0, common_1.getVisibilityClass)(props);
-    const outerStyles = buildStyles({ padding, backgroundColor }, {
-        perChanges: [],
-        pxChanges: allPxAttributes,
-    });
-    const vDividerProps = encodeBlockProps({
-        width: width || 5,
-        height: height || 100,
-        dividerColor: dividerColor || '#808080',
-        backgroundColor: backgroundColor || '',
-        alignment: 'left',
-        padding: padding || { top: 0, right: 0, bottom: 0, left: 0 },
-        hideOnDesktop: Boolean(props.hideOnDesktop),
-        hideOnMobile: Boolean(props.hideOnMobile),
-    });
-    return `
-  <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"
-         style="${exports.tableCommonStyle}; max-width:600px;" class="${visibilityClass}" data-block-type="vdivider" data-block-props="${vDividerProps}">
-    <tr>
-      <td style="${outerStyles}; text-align:center; vertical-align:middle;">
-        <!--[if mso | IE]>
-        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fillcolor="${dividerColor}" style="width:${width}px;height:${height}px;" stroke="f"></v:rect>
-        <![endif]-->
-        <!--[if !mso]><!-->
-        <div style="display:inline-block;width:${width}px;height:${height}px;background:${dividerColor};line-height:0;font-size:0;">&nbsp;</div>
-        <!--<![endif]-->
-      </td>
-    </tr>
-  </table>`;
-}