email-builder-utils 1.1.35 → 1.1.42

package/dist/utils/jsonToHTML.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.tableCommonStyle = void 0;
 exports.convertToHtml = convertToHtml;
 exports.convertVideoBlock = convertVideoBlock;
-const jimp_1 = require("jimp");
 const types_1 = require("../types");
 const common_1 = require("./common");
+const fontFallback_1 = require("./fontFallback");
 const addPxToAttributes = [
     "fontSize",
     "lineHeight",
@@ -15,23 +15,13 @@ const addPxToAttributes = [
 const addPxOrPerToAttributes = ["width", "height"];
 const allPxAttributes = [...addPxToAttributes, ...addPxOrPerToAttributes];
 exports.tableCommonStyle = "border-collapse:collapse; table-layout:fixed;";
-function cleanJson(obj) {
-    if (typeof obj !== "object" || obj === null)
-        return obj;
-    if (Array.isArray(obj))
-        return obj.map(cleanJson);
-    return Object.fromEntries(Object.entries(obj)
-        .filter(([_, value]) => value !== undefined && value !== null && value !== "")
-        .map(([key, value]) => [key, cleanJson(value)]));
-}
-function jsonToPlainString(obj) {
-    if (typeof obj !== "object" || obj === null)
-        return String(obj);
-    if (Array.isArray(obj))
-        return obj.map(jsonToPlainString).join(", ");
-    return Object.entries(obj)
-        .map(([key, value]) => `${key}:${jsonToPlainString(value)}; `)
-        .join("");
+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;
+    });
 }
 function buildStyles(style, { pxChanges, perChanges }) {
     if (!style)
@@ -47,7 +37,9 @@ function buildStyles(style, { pxChanges, perChanges }) {
             "childWidth",
             "visibility",
             "hideOnMobile",
-            "hideOnDesktop"
+            "hideOnDesktop",
+            "label",
+            "alignment",
         ];
         if (INVALID_KEYS.includes(key))
             return;
@@ -66,11 +58,26 @@ function buildStyles(style, { pxChanges, perChanges }) {
             };
             value = `${safePad.top}px ${safePad.right}px ${safePad.bottom}px ${safePad.left}px`;
         }
+        // Sanitize fontFamily: replace double quotes with single quotes to avoid
+        // breaking the surrounding style="..." HTML attribute
+        if (key === "fontFamily" && typeof value === "string") {
+            value = (0, fontFallback_1.withFontFallback)(value).replace(/"/g, "'");
+        }
+        // Wrap backgroundImage values in url() if not already wrapped
+        if (key === "backgroundImage" && typeof value === "string" && !String(value).startsWith("url(")) {
+            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") {
-                stylesObj[cssKey] = `${value}px`;
+                const rounded = Math.round(value * 100) / 100;
+                stylesObj[cssKey] = `${rounded}px`;
             }
             else if (typeof value === "string" && value.includes("null")) {
                 // Skip invalid styles
@@ -92,12 +99,17 @@ function buildStyles(style, { pxChanges, perChanges }) {
             stylesObj[cssKey] = value;
         }
     });
-    return `${jsonToPlainString(cleanJson(stylesObj))}${style.customCss || ""}`.trim();
+    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('; ').trim();
 }
 async function convertToHtml(blockData, rootData, cellWidthInPx) {
     switch (blockData.type) {
         case types_1.BlockType.TEXT:
-            return convertTextBlock(blockData);
+            return convertTextBlock(blockData, cellWidthInPx);
         case types_1.BlockType.IMAGE:
             return await convertImageBlock(blockData, cellWidthInPx);
         case types_1.BlockType.BUTTON:
@@ -118,23 +130,36 @@ async function convertToHtml(blockData, rootData, cellWidthInPx) {
             return "";
     }
 }
-// function appendOutlookSupport(content: string, contentStyle: string) {
-//   return `
-//   <table width="100%" style="${tableCommonStyle}"><tr><td style="${contentStyle}">${content}</td></tr></table>
-//   `;
-// }
-function appendOutlookSupport(content, contentStyle, className) {
+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]-->
+        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%" style="${exports.tableCommonStyle}; max-width:600px;" class="${visibilityClass}"><tr><td style="${contentStyle}">${content}</td></tr></table>
+    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) {
@@ -153,21 +178,21 @@ function convertDividerBlockToHtml(blockData) {
     ]
         .filter(Boolean)
         .join(" ");
-    const dividerContent = `
-    <table
-      width="${dividerWidth}%"
-      cellpadding="0"
-      cellspacing="0"
-    >
-      <tr>
-        <td
-          height="${thickness}"
-          style="font-size:1px; line-height:1px; background:${dividerColor}; width:${dividerWidth};"
-        >
-          &nbsp;
-        </td>
-      </tr>
-    </table>
+    const dividerContent = `
+    <table
+      width="${dividerWidth}%"
+      cellpadding="0"
+      cellspacing="0"
+    >
+      <tr>
+        <td
+          height="${thickness}"
+          style="font-size:1px; line-height:1px; background:${dividerColor}; width:${dividerWidth};"
+        >
+          &nbsp;
+        </td>
+      </tr>
+    </table>
   `;
     return appendOutlookSupport(dividerContent, convertedStyle, visibilityClass);
 }
@@ -180,28 +205,13 @@ function convertSpacerBlockToHtml(blockData) {
     });
     return appendOutlookSupport(``, styles, visibilityClass);
 }
-// function convertTextBlock(blockData: IBlockData) {
-//   const { style, props } = blockData.data;
-//   const styles = buildStyles(style, {
-//     perChanges: [],
-//     pxChanges: allPxAttributes,
-//   });
-//   const text = props.text || "";
-//   const navigateToUrl = props.navigateToUrl || "";
-//   const textContent = appendOutlookSupport(
-//     text.replaceAll(/\n/g, "<br>"),
-//     styles
-//   );
-//   return navigateToUrl
-//     ? `<a href="${navigateToUrl}" rel="noreferrer noopener" style="color:inherit; text-decoration:none; cursor:pointer;">${textContent}</a>`
-//     : textContent;
-// }
-function convertTextBlock(blockData) {
+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, ...rest } = style;
+    const { width, backgroundColor, padding, borderRadius, borderStyle, borderColor, borderWidth, textContainerBackgroundColor, textContainerPadding, fontSize, whiteSpace: _whiteSpace, // strip from outer td — pre-wrap on a td preserves editor whitespace
+    ...rest } = style;
+    // Text box decoration styles (border, background, padding) — no width
     const textBoxStyle = {
-        width,
         backgroundColor,
         padding,
         borderRadius,
@@ -213,6 +223,7 @@ function convertTextBlock(blockData) {
         perChanges: [],
         pxChanges: allPxAttributes,
     });
+    // Outer td styles: layout only, no typography, no white-space
     const styles = buildStyles({
         padding: textContainerPadding,
         backgroundColor: textContainerBackgroundColor,
@@ -222,244 +233,584 @@ function convertTextBlock(blockData) {
         pxChanges: allPxAttributes,
     });
     const sanitizedText = (props.text ?? "")
-        .replaceAll(/<p>/g, "<div>")
-        .replaceAll(/<\/p>/g, "</div>");
+        .replace(/<p(\s[^>]*)?>/gi, (_, attrs) => `<div${attrs || ""}>`)
+        .replace(/<\/p>/gi, "</div>");
     const navigateToUrl = props.navigateToUrl || "";
-    const convertedTextBox = `<div style="display: inline-block; max-width: 100%; box-sizing: border-box; ${convertedTextStyle}">${sanitizedText.replaceAll(/\n/g, "<br>")}</div>`;
-    const textContent = appendOutlookSupport(convertedTextBox, styles, visibilityClass);
+    const fontSizeStyle = fontSize != null ? `font-size:${fontSize}px;` : "";
+    // 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; ${fontSizeStyle}${convertedTextStyle}">${sanitizedText.replaceAll(/\n/g, "<br>")}</div>`;
+    const safeCellWidth = cellWidthInPx ? Math.min(cellWidthInPx, 600) : undefined;
+    const textContent = appendOutlookSupport(convertedTextBox, styles, visibilityClass, safeCellWidth);
     return navigateToUrl
         ? `<a href="${navigateToUrl}" rel="noreferrer noopener" style="color:inherit;text-decoration:none;cursor:pointer;">${textContent}</a>`
         : textContent;
 }
-async function appendOutlookForImage(content, outerContainerWidth, innerContainerWidth, imageUrl, style = {}) {
-    const image = await jimp_1.Jimp.read(imageUrl);
-    const originalWidth = image.bitmap.width;
-    const originalHeight = image.bitmap.height;
-    const widthScalingFactor = Math.min(outerContainerWidth / originalWidth, innerContainerWidth / originalWidth);
-    const scaledWidth = Math.round(originalWidth * widthScalingFactor);
-    const scaledHeight = Math.round(originalHeight * widthScalingFactor);
+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 / scaledHeight, 1).toFixed(2)
+        ? Math.min(borderRadius / vmlHeight, 1).toFixed(2)
         : "";
     const borderAttributes = borderWidth > 0
         ? `strokeweight="${borderWidth}px" strokecolor="${borderColor}"`
         : `stroked="false"`;
-    const outlookImage = `<!--[if mso]>
-  <v:${useRoundRect ? "roundrect" : "rect"} xmlns:v="urn:schemas-microsoft-com:vml"
-    style="width:${scaledWidth}px;height:${scaledHeight}px;"
-    ${borderAttributes}
-    ${useRoundRect ? `arcsize="${arcsize}"` : ""}
-    fill="true" fillcolor="none">
-    <v:fill src="${imageUrl}" type="frame" />
-    <v:textbox inset="0,0,0,0"><div style="display:none;">.</div></v:textbox>
-  </v:${useRoundRect ? "roundrect" : "rect"}>
+    // 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]-->`;
-    return `
-    ${outlookImage}
-    <!--[if !mso]><!-->
-      ${content}
-    <!--<![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) {
-    const image = await jimp_1.Jimp.read(imageUrl);
-    const originalWidth = image.bitmap.width;
-    const originalHeight = image.bitmap.height;
-    const widthScalingFactor = Math.min(maxContainerWidthPx / originalWidth, 1);
-    const scaledWidth = Math.round(originalWidth * widthScalingFactor);
-    const scaledHeight = Math.round(originalHeight * widthScalingFactor);
-    return { originalWidth, originalHeight, scaledWidth, scaledHeight };
+    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;
-    // Ensure border styles are applied only to the container, not the image
-    const imageStyle = {
-        width,
-        height,
-        objectFit,
-        borderStyle,
-        borderRadius: borderRadius,
-        borderColor,
-    };
     // Add border styles to container for fallback clients
     const containerStyles = buildStyles({
         ...containerStyle,
     }, { perChanges: [], pxChanges: addPxToAttributes });
-    const innerContainerWidth = (((typeof width === "string" ? parseInt(width.replace("%", "")) : width) ||
-        100) /
-        100) *
-        (cellWidthInPx -
-            (style?.padding?.left || 0) -
-            (style?.padding?.right || 0));
+    // 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({
-        maxWidth: `${originalWidth}px`, // Limit to original size
-        maxHeight: `${originalHeight}px`,
-        ...imageStyle,
+        borderStyle,
+        borderRadius: borderRadius,
+        borderColor,
+        borderWidth,
     }, {
-        perChanges: addPxOrPerToAttributes,
+        perChanges: [],
         pxChanges: addPxToAttributes,
     });
-    const imageElement = `<img src="${imageUrl}" alt="${altText}" width="${scaledWidth}" height="${scaledHeight}" style="${imageTagStyles}; width:100%; height:auto; max-width:${originalWidth}px; max-height:${originalHeight}px;" />`;
+    // 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%";
-    const nonMsoWrapper = `<div style="display:inline-block; width:${percentWidth}; max-width:${originalWidth}px;">${imageElement}</div>`;
-    const outlookImage = await appendOutlookForImage(nonMsoWrapper, cellWidthInPx, innerContainerWidth, imageUrl, style);
-    const imageContent = appendOutlookSupport(outlookImage, containerStyles, visibilityClass);
+    // 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(content, buttonStyle, navigateToUrl, text) {
-    const { width = 200, height = 44, borderRadius = 0, borderColor = "transparent", borderWidth = 0, buttonColor = "none", buttonPadding = { top: 0, bottom: 0, left: 0, right: 0 }, color = "#000000", fontFamily = "Arial, sans-serif", fontSize = 16, fontWeight = 400, } = buttonStyle;
-    const borderAttributes = borderWidth > 0
-        ? `strokeweight="${borderWidth}px" strokecolor="${borderColor}"`
-        : `stroked="false"`;
-    return `
-<!--[if mso]>
-<v:${borderRadius ? "roundrect" : "rect"} xmlns:v="urn:schemas-microsoft-com:vml" href="${navigateToUrl}"
-  style="height:${height}px;v-text-anchor:middle;width:${width}px;"
-  arcsize="${borderRadius / height}" ${borderAttributes}
-  fillcolor="${buttonColor}">
-  <w:anchorlock/>
-  <v:textbox inset="${buttonPadding.top}px,${buttonPadding.left}px,${buttonPadding.bottom}px,${buttonPadding.right}px">
-    <center style="font-family:${fontFamily};font-size:${fontSize}px;font-weight:${fontWeight};color:${color};">
-      ${text}
-    </center>
-  </v:textbox>
-</v:${borderRadius ? "roundrect" : "rect"}>
-<![endif]-->
-<!--[if !mso]><!-->
-  ${content}
-<!--<![endif]-->
-`;
+    const pad = buttonStyle.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 fontSize = buttonStyle.fontSize || 16;
+    const height = typeof buttonStyle.height === "number" && buttonStyle.height > 0
+        ? buttonStyle.height
+        : null;
+    // prevent layout break
+    const minHeight = padTop + padBottom + fontSize;
+    const finalHeight = height ? Math.max(height, minHeight) : null;
+    const borderRadius = buttonStyle.borderRadius || 0;
+    const borderColor = buttonStyle.borderColor || "transparent";
+    const borderWidth = buttonStyle.borderWidth || 0;
+    const borderStyle = buttonStyle.borderStyle || "solid";
+    const bgColor = buttonStyle.buttonColor || "transparent";
+    const color = buttonStyle.color || "#ffffff";
+    const fontFamily = (0, fontFallback_1.withFontFallback)(buttonStyle.fontFamily).replace(/"/g, "'");
+    const fontWeight = buttonStyle.fontWeight || 400;
+    const width = typeof buttonStyle.width === "number"
+        ? `width="${buttonStyle.width}"`
+        : "";
+    return `<!--[if mso]>
+<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="display:inline-table;">
+  <tr>
+    <td align="center"
+        valign="middle"
+        ${width}
+        ${finalHeight ? `height="${finalHeight}"` : ""}
+        bgcolor="${bgColor}"
+        style="
+          ${finalHeight ? `height:${finalHeight}px;` : ""}
+          background-color:${bgColor};
+          border-radius:${borderRadius}px;
+          border:${borderWidth}px ${borderStyle} ${borderColor};
+          overflow:hidden;
+          mso-line-height-rule:exactly;
+        ">
+
+      <table role="presentation" cellspacing="0" cellpadding="0" border="0">
+        <tr>
+          <td align="center" valign="middle"
+              style="padding:${padTop}px ${padRight}px ${padBottom}px ${padLeft}px;">
+
+            <a href="${navigateToUrl}"
+               style="
+                 display:inline-block;
+                 color:${color};
+                 text-decoration:none;
+                 font-family:${fontFamily};
+                 font-size:${fontSize}px;
+                 font-weight:${fontWeight};
+                 line-height:normal;
+               ">
+              ${text}
+            </a>
+
+          </td>
+        </tr>
+      </table>
+
+    </td>
+  </tr>
+</table>
+<![endif]-->
+<!--[if !mso]><!-->
+${content}
+<!--<![endif]-->`;
 }
 function convertButtonBlock(blockData) {
     const { style, props } = blockData.data;
     const { text, navigateToUrl } = props;
-    const visibilityClass = (0, common_1.getVisibilityClass)(props);
-    const { fontFamily, fontSize, fontWeight, borderColor, borderRadius, borderWidth, borderStyle, buttonPadding, color, buttonColor, width, height, ...rest } = style;
-    const buttonStyle = {
-        width,
-        height,
-        fontFamily,
-        fontSize,
-        fontWeight,
-        borderColor,
-        borderRadius,
-        borderWidth,
-        borderStyle,
-        padding: buttonPadding,
-        color,
-        backgroundColor: buttonColor,
+    const { fontFamily, fontSize, fontWeight, textAlign, borderColor, borderRadius, borderWidth, borderStyle, buttonPadding, color, buttonColor, width, height, alignment, padding, backgroundColor: containerBg, margin, } = style;
+    const pad = 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 = fontSize || 16;
+    // prevent layout break
+    const minHeight = padTop + padBottom + fs;
+    const finalHeight = typeof height === "number" && height > 0
+        ? Math.max(height, minHeight)
+        : null;
+    const safeFF = (0, fontFallback_1.withFontFallback)(fontFamily).replace(/"/g, "'");
+    const safeColor = color || "#ffffff";
+    const bgColor = buttonColor || "transparent";
+    const bdColor = borderColor || "transparent";
+    const bdStyle = borderStyle || "solid";
+    const bw = borderWidth || 0;
+    const br = borderRadius || 0;
+    const containerAlign = alignment || textAlign || "left";
+    const widthAttr = typeof width === "number"
+        ? `width="${width}"`
+        : "";
+    // ✅ FIX: no width=100% anywhere
+    const buttonTable = `
+<table role="presentation" cellspacing="0" cellpadding="0" border="0"
+  style="display:inline-table; border-collapse:separate;"
+  ${widthAttr}>
+  <tr>
+    <td
+      align="center"
+      valign="middle"
+      ${finalHeight ? `height="${finalHeight}"` : ""}
+      style="
+        ${finalHeight ? `height:${finalHeight}px;` : ""}
+        background-color:${bgColor};
+        border-radius:${br}px;
+        border:${bw}px ${bdStyle} ${bdColor};
+        overflow:hidden;
+        mso-line-height-rule:exactly;
+      "
+    >
+
+      <table role="presentation" cellspacing="0" cellpadding="0" border="0">
+        <tr>
+          <td align="center" valign="middle"
+              style="padding:${padTop}px ${padRight}px ${padBottom}px ${padLeft}px;">
+
+            <a href="${navigateToUrl}"
+               style="
+                 display:inline-block;
+                 color:${safeColor};
+                 text-decoration:none;
+                 font-family:${safeFF};
+                 font-size:${fs}px;
+                 font-weight:${fontWeight || 400};
+                 line-height:normal;
+                 white-space:nowrap;
+               ">
+              ${text}
+            </a>
+
+          </td>
+        </tr>
+      </table>
+
+    </td>
+  </tr>
+</table>
+`;
+    const aligned = containerAlign === "center"
+        ? `<center>${buttonTable}</center>`
+        : `<div style="text-align:${containerAlign};">${buttonTable}</div>`;
+    const buttonWithOutlook = appendOutlookForButton(aligned, style, navigateToUrl, text);
+    return `
+<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
+  <tr>
+    <td align="${containerAlign}"
+        style="padding:${padding?.top || 0}px ${padding?.right || 0}px ${padding?.bottom || 0}px ${padding?.left || 0}px;
+               background-color:${containerBg || "transparent"};">
+      ${buttonWithOutlook}
+    </td>
+  </tr>
+</table>
+`;
+}
+/**
+ * Extract the first solid-color stop from a CSS gradient in customCss.
+ * Used as a MSO/Outlook bgcolor fallback when backgroundColor is not set
+ * but the block has a gradient in customCss (e.g. linear-gradient imports).
+ */
+function extractCssFallbackColor(customCss) {
+    if (!customCss)
+        return '';
+    const m = customCss.match(/(?:linear|radial|conic)-gradient\([^)]*?(#[0-9a-fA-F]{3,8}|rgb\([^)]+\)|rgba\([^)]+\))/);
+    return m?.[1] ?? '';
+}
+function parseGradient(gradient) {
+    if (!gradient)
+        return null;
+    const angleMatch = gradient.match(/(\d+)deg/);
+    const angle = angleMatch ? parseInt(angleMatch[1]) : 180;
+    const colors = gradient.match(/#([0-9a-fA-F]{3,8})|rgb[a]?\([^)]+\)/g) || [];
+    return {
+        angle,
+        colors,
+        fallback: colors[0] || "#ffffff",
     };
-    const convertedButtonStyle = buildStyles(buttonStyle, {
-        perChanges: [],
-        pxChanges: allPxAttributes,
-    });
-    const convertedStyles = buildStyles({ maxWidth: "100%", boxSizing: "border-box", ...rest }, {
-        perChanges: [],
-        pxChanges: allPxAttributes,
-    });
-    const buttonElement = `<a href="${navigateToUrl}" rel="noreferrer noopener" style="display:inline-block; text-decoration:none; cursor:pointer;"><button style="${convertedButtonStyle}">${text}</button></a>`;
-    const buttonContent = appendOutlookSupport(appendOutlookForButton(buttonElement, style, navigateToUrl, text), convertedStyles, visibilityClass);
-    return buttonContent;
+}
+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, ...restStyle } = style;
+    const { columnGap = 0, backgroundImage, backgroundColor, ...restStyle } = style;
     const gridVisibilityClass = (0, common_1.getVisibilityClass)(props);
+    // Strip url() wrapper if already present, so we have a raw URL for VML
+    const isGradient = typeof backgroundImage === "string" && backgroundImage.includes("gradient");
+    const parsedGradient = isGradient ? parseGradient(backgroundImage) : null;
+    const fallbackBgColor = backgroundColor ||
+        parsedGradient?.fallback ||
+        extractCssFallbackColor(restStyle.customCss) ||
+        "#ffffff";
+    const rawBgImageUrl = !isGradient && backgroundImage
+        ? String(backgroundImage).replace(/^url\(['"]?/, "").replace(/['"]?\)$/, "")
+        : null;
     // FIX: avoid table-layout:fixed – causes shrink in many clients
-    const tableStyles = buildStyles(restStyle, {
+    const tableStyles = buildStyles({ backgroundColor, ...restStyle }, {
         perChanges: [],
         pxChanges: allPxAttributes,
     });
     const total = childrenIds.length;
     const visualRows = Math.ceil(total / columns);
-    let html = `
-  <!--[if mso]>
-  <table border="0" cellpadding="0" cellspacing="${columnGap}" width="100%"
-     style="border-collapse:separate;border-spacing:${columnGap}px;"
-     class="${gridVisibilityClass}">
-  <![endif]-->
-  <table border="0" cellpadding="0" cellspacing="${columnGap}" width="100%" 
-     role="presentation"
-     style="border-collapse:separate;border-spacing:${columnGap}px; ${tableStyles}; max-width:600px;"
-     class="${gridVisibilityClass}">
+    // OUTLOOK FIX: Use explicit pixel width for Old Outlook (Word engine)
+    const msoTableWidth = Math.min(cellWidthInPx, 600);
+    // When a background image is present, the background is applied on an outer
+    // wrapper <td> (see bottom of function). The inner grid tables must be clean
+    // (no background) so that outer td background shows through.
+    // When no background image, the MSO table gets bgcolor for solid-color sections.
+    const msoBgColor = !rawBgImageUrl
+        ? (backgroundColor || extractCssFallbackColor(restStyle.customCss))
+        : '';
+    const msoBgAttr = msoBgColor ? ` bgcolor="${msoBgColor}"` : '';
+    const msoBgStyle = msoBgColor ? `background-color:${msoBgColor};` : '';
+    // Inner non-MSO table: strip ALL background-related props when an outer bg-td
+    // wrapper is used. background-position/repeat/size without a background-image
+    // are harmless, but keeping them in the inner table style is confusing and
+    // could conflict with email client default styles.
+    const innerNonMsoStyle = rawBgImageUrl
+        ? buildStyles({
+            ...restStyle,
+            customCss: '',
+            backgroundSize: undefined,
+            backgroundPosition: undefined,
+            backgroundRepeat: undefined,
+        }, { perChanges: [], pxChanges: allPxAttributes })
+        : tableStyles;
+    // When bg image is present, inner tables must be explicitly transparent so the
+    // outer <td> background shows through (email clients may default table bg to white).
+    const innerBgTransparent = (rawBgImageUrl || isGradient)
+        ? 'background-color:transparent;'
+        : '';
+    // bgcolor attribute on both tables: survives Outlook compose paste (Word + Web
+    // both strip background-image CSS but keep the bgcolor HTML attribute).
+    const nonMsoBgAttr = !rawBgImageUrl && backgroundColor ? ` bgcolor="${backgroundColor}"` : '';
+    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}${innerNonMsoStyle}; max-width:600px;"
+     class="${gridVisibilityClass}">
+  <!--<![endif]-->
   `;
     for (let r = 0; r < visualRows; r++) {
         html += "<tr>";
-        // COUNT visible cells only
+        // 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);
-            if (id) {
-                const child = rootData[id];
-                const isHidden = child?.data?.props?.hideOnDesktop;
-                if (!isHidden)
-                    visibleCells++;
+            const child = id ? rootData[id] : null;
+            const isHidden = child?.data?.props?.hideOnDesktop;
+            if (!isHidden) {
+                visibleCells++;
+                lastVisibleCol = c;
             }
         }
-        // FIX: fallback safe-width
-        const safeWidth = visibleCells > 0 ? Math.min(100 / visibleCells, 50) : Math.min(100 / columns, 50);
+        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 idx = r * columns + c;
             const id = rowIds[c];
             let widthPercent = cellWidths[c] ?? safeWidth;
-            // FIX: never exceed reasonable width
             if (widthPercent <= 0 || widthPercent > 100) {
                 widthPercent = safeWidth;
             }
-            // FIX: Cap width percent to prevent overflow in Outlook
-            widthPercent = Math.min(widthPercent, 50);
+            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);
-                // Only render if visible
                 if (childVisible) {
-                    const { html: childHtml, styles } = await convertGridCellBlock(child, rootData, widthPercent, cellWidthInPx);
-                    html += `
-          <td
-            width="${Math.round(widthPercent)}%"
-            class="${[
-                        responsive ? "stack-column" : "",
-                        visibilityClass,
-                    ].filter(Boolean).join(" ")}"
-            style="vertical-align:${verticalAlign};word-break:break-word;${styles}"
-          >
-            ${childHtml}
+                    const { html: childHtml, styles } = await convertGridCellBlock(child, rootData, widthPercent, adjustedTableWidth);
+                    // 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 {
-                // SAFE empty cell (keeps layout stable)
-                html += `
-        <td width="${Math.round(widthPercent)}%" 
-            ${responsive ? 'class="stack-column"' : ""}
-            style="vertical-align:top;">
+                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>";
     }
-    html += "</table><!--[if mso]></table><![endif]-->";
+    // 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"
+      style="
+        width:${msoTableWidth}px;
+        background-color:${fallbackBgColor};
+        ${isGradient ? `background:${backgroundImage};` : `background:url('${rawBgImageUrl}') center/cover 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>`;
+    }
     return html;
 }
 async function convertGridCellBlock(blockData, rootData, cellWidthPercent, parentCellWidthPx) {
@@ -470,16 +821,42 @@ async function convertGridCellBlock(blockData, rootData, cellWidthPercent, paren
         pxChanges: allPxAttributes,
     });
     const parts = [];
-    // FIX: do NOT re-calc px based on parent → causes shrinking
-    const safeCellWidthPx = Math.max(parentCellWidthPx, 20);
+    // 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 = style?.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 = style?.borderRadius || 0;
+    const bgColor = style?.backgroundColor || "transparent";
+    // IMPORTANT: radius only for non-Outlook
+    const wrapped = `
+<!--[if !mso]><!-->
+<div style="
+  border-radius:${borderRadius}px;
+  overflow:hidden;
+  background-color:${bgColor};
+">
+<!--<![endif]-->
+  ${parts.join("")}
+<!--[if !mso]><!-->
+</div>
+<!--<![endif]-->
+`;
     return {
-        html: parts.join(""),
+        html: wrapped,
         styles,
     };
 }
@@ -544,116 +921,117 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
     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;" stroked="t"
-           strokeweight="${borderWidth}px"
-           strokecolor="${borderColor}"
-           ${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>
+        ? `<!--[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;" stroked="t"
+           strokeweight="${borderWidth}px"
+           strokecolor="${borderColor}"
+           ${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; stroked="t"
-           strokeweight="${borderWidth}px"
-           strokecolor="${borderColor}"
-           ${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>
+        : `<!--[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;"
+           stroked="t"
+           strokeweight="${borderWidth}px"
+           strokecolor="${borderColor}"
+           ${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]-->`;
-    const nonOutlookVideoContent = `<!--[if !mso]><!-->
-    <table
-      width="${innerContainerWidth}"
-      cellpadding="0"
-      cellspacing="0"
-      border="0"
-      role="presentation"
-      align="${style?.textAlign || "left"}"
-      style="
-        max-width: ${innerContainerWidth}px;
-        width: 100%;
-        height: ${calculatedHeight}px;
-        background-color: ${style?.backgroundColor || "#FFFFFF"};
-        background-image: url('${resolvedThumbnail}');
-        background-size: contain;
-        background-position: center;
-        background-repeat: no-repeat;
-        box-sizing: border-box;
-        border: ${borderWidth}px ${style?.borderStyle || "solid"} ${borderColor};
-        border-radius: ${borderRadius}px;
-      "
-    >
-      <tr>
-        <td style="padding: 0; height: ${calculatedHeight}px; text-align: center; vertical-align: middle;" valign="middle">
-          <a href="${videoLink}" target="_blank" style="display:inline-block; border: 0; outline: none; text-decoration: none;">
-            <img
-              src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png"
-              width="${playIconWidth}"
-              alt="Play"
-              style="display: block;
-              border: 0;
-                outline: none;
-                text-decoration: none;
-                height: auto;"
-            />
-          </a>
-        </td>
-      </tr>
-    </table>
+    const nonOutlookVideoContent = `<!--[if !mso]><!-->
+    <table
+      width="${innerContainerWidth}"
+      cellpadding="0"
+      cellspacing="0"
+      border="0"
+      role="presentation"
+      align="${style?.textAlign || "left"}"
+      style="
+        max-width: ${innerContainerWidth}px;
+        width: 100%;
+        height: ${calculatedHeight}px;
+        background-color: ${style?.backgroundColor || "#FFFFFF"};
+        background-image: url('${resolvedThumbnail}');
+        background-size: contain;
+        background-position: center;
+        background-repeat: no-repeat;
+        box-sizing: border-box;
+        border: ${borderWidth}px ${style?.borderStyle || "solid"} ${borderColor};
+        border-radius: ${borderRadius}px;
+      "
+    >
+      <tr>
+        <td style="padding: 0; height: ${calculatedHeight}px; text-align: center; vertical-align: middle;" valign="middle">
+          <a href="${videoLink}" target="_blank" style="display:inline-block; border: 0; outline: none; text-decoration: none;">
+            <img
+              src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png"
+              width="${playIconWidth}"
+              alt="Play"
+              style="display: block;
+              border: 0;
+                outline: none;
+                text-decoration: none;
+                height: auto;"
+            />
+          </a>
+        </td>
+      </tr>
+    </table>
     <!--<![endif]-->`;
     const videoContent = `${outlookVideoContent}${nonOutlookVideoContent}`;
-    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}">
-    <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>
+    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}">
+    <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;
 }
@@ -735,48 +1113,48 @@ async function convertShapeBlock(blockData) {
     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:${finalBackgroundColor} url('${imageUrl}') center/cover no-repeat;
-  overflow:hidden;${alignmentStyle}${customCss || ""}">
-  <div style="width:100%;height:100%;display:flex;justify-content:${flexJustify};align-items:${flexAlign};overflow:hidden;padding:6px;box-sizing:border-box;">
-    <div style="${textSizeStyle}text-align:${textAlignStyle};max-width:90%;overflow:hidden;">
-      ${text}
-    </div>
-  </div>
+        nonMsoContent = `
+<div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
+  border:${borderWidth}px ${borderStyle} ${borderColor};
+  border-radius:${resolvedBorderRadius};
+  background:${finalBackgroundColor} url('${imageUrl}') center/cover no-repeat;
+  overflow:hidden;${alignmentStyle}${customCss || ""}">
+  <div style="width:100%;height:100%;display:flex;justify-content:${flexJustify};align-items:${flexAlign};overflow:hidden;padding:6px;box-sizing:border-box;">
+    <div style="${textSizeStyle}text-align:${textAlignStyle};max-width:90%;overflow:hidden;">
+      ${text}
+    </div>
+  </div>
 </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;" />
+        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:${finalBackgroundColor};
-  border:${borderWidth}px ${borderStyle} ${borderColor};
-  border-radius:${resolvedBorderRadius};
-  overflow:hidden;${alignmentStyle}${customCss || ""}">
-  <div style="width:100%;height:100%;display:flex;justify-content:${flexJustify};align-items:${flexAlign};padding:8px;box-sizing:border-box;">
-    <div style="${textSizeStyle}text-align:${textAlignStyle};max-width:90%;overflow:hidden;">
-      ${text || ""}
-    </div>
-  </div>
+        nonMsoContent = `
+<div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
+  background:${finalBackgroundColor};
+  border:${borderWidth}px ${borderStyle} ${borderColor};
+  border-radius:${resolvedBorderRadius};
+  overflow:hidden;${alignmentStyle}${customCss || ""}">
+  <div style="width:100%;height:100%;display:flex;justify-content:${flexJustify};align-items:${flexAlign};padding:8px;box-sizing:border-box;">
+    <div style="${textSizeStyle}text-align:${textAlignStyle};max-width:90%;overflow:hidden;">
+      ${text || ""}
+    </div>
+  </div>
 </div>`;
     }
     // Outlook (VML) fallback
-    const outlookContent = await appendOutlookForShape(nonMsoContent, resolvedWidthPx, resolvedWidthPx, {
+    const outlookContent = appendOutlookForShape(nonMsoContent, resolvedWidthPx, resolvedWidthPx, {
         shape,
         imageUrl,
         backgroundColor,
@@ -795,16 +1173,16 @@ async function convertShapeBlock(blockData) {
         msoBakeImageWithText,
     }, visibilityClass);
     // Combine into table wrapper
-    return `
-<table width="100%" style="border-collapse:collapse;table-layout:fixed;max-width:600px;" class="${visibilityClass}">
-  <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>
+    return `
+<table width="100%" style="border-collapse:collapse;table-layout:fixed;max-width:600px;" class="${visibilityClass}">
+  <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 ----------
@@ -837,24 +1215,24 @@ function buildVMLShape({ shape, widthPx, heightPx, imageUrl, backgroundColor, bo
     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 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}
+    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) {
@@ -882,53 +1260,50 @@ function appendOutlookForShape(content, outerContainerWidth, innerContainerWidth
     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>
+        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>
+    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, ...rest } = style;
+    const { width, height, dividerColor, padding, backgroundColor } = style;
     const visibilityClass = (0, common_1.getVisibilityClass)(props);
-    // Convert other styles to inline-safe HTML attributes
-    const convertedStyle = buildStyles(rest, {
+    const outerStyles = buildStyles({ padding, backgroundColor }, {
         perChanges: [],
         pxChanges: allPxAttributes,
     });
-    // Outlook-safe vertical divider
-    const dividerContent = `
-    <table cellpadding="0" cellspacing="0" border="0" align="center" style="width:auto; ${convertedStyle}">
-      <tr>
-        <td style="vertical-align: middle; text-align: center;">
-          <!--[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>
-  `;
-    return appendOutlookSupport(dividerContent, convertedStyle, visibilityClass);
+    return `
+  <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"
+         style="${exports.tableCommonStyle} max-width:600px;" class="${visibilityClass}">
+    <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>`;
 }