npm - email-builder-utils - Versions diffs - 1.1.40 → 1.1.42 - Mend

email-builder-utils 1.1.40 → 1.1.42

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/utils/convertJsonToHtml.d.ts.map +1 -1
package/dist/utils/convertJsonToHtml.js +25 -20
package/dist/utils/fontFallback.d.ts +7 -0
package/dist/utils/fontFallback.d.ts.map +1 -0
package/dist/utils/fontFallback.js +65 -0
package/dist/utils/jsonToHTML.d.ts.map +1 -1
package/dist/utils/jsonToHTML.js +459 -177
package/package.json +1 -1

package/dist/utils/convertJsonToHtml.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"convertJsonToHtml.d.ts","sourceRoot":"","sources":["../../src/utils/convertJsonToHtml.ts"],"names":[],"mappings":"~~AAEA~~,eAAO,MAAM,iBAAiB,GAAU,UAAU,GAAG,~~oBA8GpD~~,CAAC"}
1	+ {"version":3,"file":"convertJsonToHtml.d.ts","sourceRoot":"","sources":["../../src/utils/convertJsonToHtml.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,GAAU,UAAU,GAAG,oBAiHpD,CAAC"}

package/dist/utils/convertJsonToHtml.js CHANGED Viewed

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.convertJsonToHtml = void 0;
+const fontFallback_1 = require("./fontFallback");
 const jsonToHTML_1 = require("./jsonToHTML");
 const convertJsonToHtml = async (jsonData) => {
     const rootData = jsonData?.root?.data;
@@ -36,54 +37,58 @@ const convertJsonToHtml = async (jsonData) => {
         }
         .hide-mobile {
          display: block !important;
-         mso-hide: all !important; /* Hide in Outlook */
        }
        .hide-desktop {
          display: block !important;
-         mso-hide: all !important; /* Hide in Outlook */
+         mso-hide: all !important; /* Hide in Outlook (treated as desktop) */
        }
        @media only screen and (max-width: 600px) {
-                .hide-mobile {
-             display: none !important;
-             max-height: 0 !important;
+         .hide-mobile {
+           display: none !important;
+           max-height: 0 !important;
            overflow: hidden !important;
-           mso-hide: all !important;
-           }
-        }
+           mso-hide: all !important;
+         }
+       }
-     @media only screen and (min-width: 601px) {
-       .hide-desktop {
-         display: none !important;
-         max-height: 0 !important;
-         overflow: hidden !important;
-         mso-hide: all !important;
+       @media only screen and (min-width: 601px) {
+         .hide-desktop {
+           display: none !important;
+           max-height: 0 !important;
+           overflow: hidden !important;
+           mso-hide: all !important;
+         }
        }
-     }
       </style>
     </head>
-    <body>
-      <center>
+    <body style="margin:0; padding:0; background-color:${canvasColor};">
+      <center style="width:100%; background-color:${canvasColor};">
         <table
           class="responsive-table"
+          role="presentation"
           bgcolor="${canvasColor}"
+          cellpadding="0"
+          cellspacing="0"
+          border="0"
+          width="600"
+          align="center"
           style="
-            font-family: ${fontFamily};
+            font-family: ${(0, fontFallback_1.withFontFallback)(fontFamily)};
             margin: 0 auto;
             table-layout:fixed;
             width:600px;
             max-width:600px;
             background-color: ${canvasColor};
             color: ${textColor};
-            padding: ${top}px ${right}px ${bottom}px ${left}px;
             border: ${borderWidth}px ${borderStyle} ${borderColor};
             border-radius: ${borderRadius}px; "
         >
           <tbody>
             <tr>
-              <td style="padding: 0;">
+              <td style="padding: ${top}px ${right}px ${bottom}px ${left}px;">
                 ${blocksHtml.join("")}
               </td>
             </tr>

package/dist/utils/fontFallback.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+/**
+ * If the font-family value doesn't already end with a generic/web-safe family,
+ * append an appropriate fallback so Outlook desktop (which silently falls back
+ * to Times New Roman for any non-web-safe font) picks a reasonable match.
+ */
+export declare function withFontFallback(fontFamily: string | undefined | null): string;
+//# sourceMappingURL=fontFallback.d.ts.map

package/dist/utils/fontFallback.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"fontFallback.d.ts","sourceRoot":"","sources":["../../src/utils/fontFallback.ts"],"names":[],"mappings":"AA6CA;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,MAAM,CAY9E"}

package/dist/utils/fontFallback.js ADDED Viewed

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withFontFallback = withFontFallback;
+// Web-safe fonts that render natively in Outlook desktop (Word engine).
+// Anything not in this set falls back silently to Times New Roman unless we
+// append a generic stack. Keep lowercase for comparison.
+const WEB_SAFE_FONTS = new Set([
+    "arial",
+    "arial black",
+    "helvetica",
+    "helvetica neue",
+    "verdana",
+    "tahoma",
+    "trebuchet ms",
+    "times",
+    "times new roman",
+    "georgia",
+    "garamond",
+    "courier",
+    "courier new",
+    "lucida console",
+    "lucida sans unicode",
+    "palatino",
+    "palatino linotype",
+    "book antiqua",
+    "impact",
+    "serif",
+    "sans-serif",
+    "monospace",
+    "cursive",
+    "fantasy",
+    "system-ui",
+]);
+const DEFAULT_FALLBACK = "Arial, sans-serif";
+const SERIF_FALLBACK = "Georgia, 'Times New Roman', serif";
+const MONO_FALLBACK = "'Courier New', Courier, monospace";
+const SERIF_HINTS = ["serif", "playfair", "merriweather", "lora", "roboto slab", "source serif", "pt serif", "noto serif"];
+const MONO_HINTS = ["mono", "code", "courier", "consolas", "menlo"];
+function pickGenericFallback(name) {
+    const lower = name.toLowerCase();
+    if (MONO_HINTS.some((h) => lower.includes(h)))
+        return MONO_FALLBACK;
+    if (SERIF_HINTS.some((h) => lower.includes(h)))
+        return SERIF_FALLBACK;
+    return DEFAULT_FALLBACK;
+}
+/**
+ * If the font-family value doesn't already end with a generic/web-safe family,
+ * append an appropriate fallback so Outlook desktop (which silently falls back
+ * to Times New Roman for any non-web-safe font) picks a reasonable match.
+ */
+function withFontFallback(fontFamily) {
+    if (!fontFamily)
+        return DEFAULT_FALLBACK;
+    const trimmed = String(fontFamily).trim();
+    if (!trimmed)
+        return DEFAULT_FALLBACK;
+    const parts = trimmed.split(",").map((p) => p.trim().replace(/^["']|["']$/g, ""));
+    const alreadySafe = parts.some((p) => WEB_SAFE_FONTS.has(p.toLowerCase()));
+    if (alreadySafe)
+        return trimmed;
+    const primary = parts[0] || "";
+    const fallback = pickGenericFallback(primary);
+    return `${trimmed}, ${fallback}`;
+}

package/dist/utils/jsonToHTML.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"jsonToHTML.d.ts","sourceRoot":"","sources":["../../src/utils/jsonToHTML.ts"],"names":[],"mappings":"~~AACA~~,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;~~AAGrC~~,UAAU,cAAc;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,UAAU,UAAU;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,cAAc,CAAC;QACtB,KAAK,EAAE,GAAG,CAAC;QACX,WAAW,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;KAC7B,CAAC;CACH;AAYD,eAAO,MAAM,gBAAgB,kDAAkD,CAAC;~~AAwFhF~~,wBAAsB,aAAa,CACjC,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,GAAG,EACb,aAAa,EAAE,MAAM,mBAwBtB;~~AA4qBD~~,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,~~mBAyL5E~~"}
1	+ {"version":3,"file":"jsonToHTML.d.ts","sourceRoot":"","sources":["../../src/utils/jsonToHTML.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAIrC,UAAU,cAAc;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,UAAU,UAAU;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,cAAc,CAAC;QACtB,KAAK,EAAE,GAAG,CAAC;QACX,WAAW,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;KAC7B,CAAC;CACH;AAYD,eAAO,MAAM,gBAAgB,kDAAkD,CAAC;AAqGhF,wBAAsB,aAAa,CACjC,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,GAAG,EACb,aAAa,EAAE,MAAM,mBAwBtB;AA68BD,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBA0L5E"}

package/dist/utils/jsonToHTML.js CHANGED Viewed

@@ -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,12 +130,7 @@ 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) {
@@ -133,9 +140,24 @@ function appendOutlookSupport(content, contentStyle, className) {
     <!--<![endif]-->
     `;
     }
-    // Use a single table that works for both MSO and non-MSO
-    // The content inside already has its own MSO conditional comments
-    // width="100%" works for modern clients, Outlook will use the td width from nested tables
+    // 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>
   `;
@@ -183,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,
@@ -216,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,
@@ -225,11 +233,15 @@ 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;
@@ -243,15 +255,21 @@ async function appendOutlookForImage(content, outerContainerWidth, innerContaine
         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 {
-        // Fallback: calculate from image
-        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, 1 // Never scale up
-        );
-        vmlWidth = Math.round(originalWidth * widthScalingFactor);
-        vmlHeight = Math.round(originalHeight * widthScalingFactor);
+        vmlWidth = innerContainerWidth;
+        vmlHeight = innerContainerWidth;
     }
     const borderWidth = parseInt(style?.borderWidth) || 0;
     const borderColor = style?.borderColor || "transparent";
@@ -310,13 +328,23 @@ async function appendOutlookForImage(content, outerContainerWidth, innerContaine
   `;
 }
 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;
@@ -359,83 +387,233 @@ async function convertImageBlock(blockData, cellWidthInPx) {
     // 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;" />`;
+    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 for responsive behavior
-    const nonMsoWrapper = `<div style="display:inline-block; width:${percentWidth}; max-width:${originalWidth}px;">${imageElement}</div>`;
+    // 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);
+    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"}>
+    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]-->
-`;
+${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,
     });
@@ -443,45 +621,75 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
     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 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="${columnGap}" width="${msoTableWidth}"
-     style="border-collapse:separate;border-spacing:${columnGap}px;width:${msoTableWidth}px;"
+  <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="${columnGap}" width="100%"
-     role="presentation"
-     style="border-collapse:separate;border-spacing:${columnGap}px; ${tableStyles}; max-width:600px;"
+  <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;
             }
         }
-        // OUTLOOK FIX: Calculate safe width based on visible cells
-        // If we have visible cells, distribute 100% width evenly
         const safeWidth = visibleCells > 0 ? 100 / visibleCells : 100 / columns;
-        // OUTLOOK FIX: Calculate total width used by all cells
+        // 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;
-            // Validate width
             if (widthPercent <= 0 || widthPercent > 100) {
                 widthPercent = safeWidth;
             }
@@ -494,49 +702,48 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
                 }
             }
         }
-        // OUTLOOK FIX: If total width < 100%, scale up to fill container
-        // This prevents orphaned space that Outlook handles poorly
         const scaleFactor = totalWidth > 0 && totalWidth < 100 ? 100 / totalWidth : 1;
         for (let c = 0; c < columns; c++) {
-            const idx = r * columns + c;
             const id = rowIds[c];
-            // OUTLOOK FIX: Scale width to ensure cells fill 100% of container
             let widthPercent = cellWidthPercents[c] * scaleFactor;
-            // OUTLOOK FIX: Ensure width doesn't exceed 100% after scaling
             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);
-                    // OUTLOOK FIX: Calculate pixel width for Outlook
-                    const cellWidthPx = Math.round((widthPercent / 100) * cellWidthInPx);
+                    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="${Math.round(widthPercent)}%"
-            class="${[
-                        responsive ? "stack-column" : "",
-                        visibilityClass,
-                    ].filter(Boolean).join(" ")}"
+            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)
-                // OUTLOOK FIX: Calculate pixel width for Outlook
-                const cellWidthPx = Math.round((widthPercent / 100) * cellWidthInPx);
                 html += `
-        <td width="${Math.round(widthPercent)}%"
+        <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>";
@@ -550,6 +757,60 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
   </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) {
@@ -563,16 +824,39 @@ async function convertGridCellBlock(blockData, rootData, cellWidthPercent, paren
     // 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(Math.max(cellWidthPx, 20), 600);
+    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,
     };
 }
@@ -666,7 +950,8 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
          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"
+         <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)}"` : ""}
@@ -869,7 +1154,7 @@ async function convertShapeBlock(blockData) {
 </div>`;
     }
     // Outlook (VML) fallback
-    const outlookContent = await appendOutlookForShape(nonMsoContent, resolvedWidthPx, resolvedWidthPx, {
+    const outlookContent = appendOutlookForShape(nonMsoContent, resolvedWidthPx, resolvedWidthPx, {
         shape,
         imageUrl,
         backgroundColor,
@@ -1001,27 +1286,24 @@ function appendOutlookForShape(content, outerContainerWidth, innerContainerWidth
 }
 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>`;
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "email-builder-utils",
-  "version": "1.1.40",
+  "version": "1.1.42",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [