email-builder-utils 1.1.49 → 1.1.50

package/dist/utils/blocks/button.d.ts

@@ -1,29 +1,2 @@
-export declare function appendOutlookForButton(buttonData: {
-    style: any;
-    text: string;
-    navigateToUrl: string;
-}): {
-    innerContent: string;
-    computed: {
-        fs: any;
-        fontWeight: any;
-        containerAlign: any;
-        padTop: any;
-        padRight: any;
-        padBottom: any;
-        padLeft: any;
-        explicitWidth: any;
-        vmlWidth: number;
-        safeColor: any;
-        bgColor: any;
-        safeFF: string;
-        finalHeight: any;
-        explicitHeight: any;
-        bw: any;
-        br: any;
-        bdColor: any;
-        bdStyle: any;
-    };
-};
 export declare function convertButtonBlock(blockData: any): string;
 //# sourceMappingURL=button.d.ts.map

package/dist/utils/blocks/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/button.ts"],"names":[],"mappings":"AAIA,wBAAgB,sBAAsB,CAAC,UAAU,EAAE;IAAE,KAAK,EAAE,GAAG,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE;;;;;;;;;;;;;;;;;;;;;;EA6ErG;AAED,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,GAAG,UAgEhD"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/button.ts"],"names":[],"mappings":"AA6IA,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,GAAG,UAuFhD"}

package/dist/utils/blocks/button.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.appendOutlookForButton = appendOutlookForButton;
 exports.convertButtonBlock = convertButtonBlock;
 const buildStyles_1 = require("../buildStyles");
 const fontFallback_1 = require("../fontFallback");
@@ -26,27 +25,55 @@ function appendOutlookForButton(buttonData) {
     const fontWeight = style.fontWeight || 400;
     const containerAlign = style.alignment || style.textAlign || "left";
     const explicitWidth = typeof style.width === "number" && style.width > 0 ? style.width : 0;
+    // VML requires explicit pixel width — estimate from text + padding when not set.
+    // Slightly conservative multiplier to reduce clipping risk in Outlook.
     const estimatedTextWidth = Math.ceil((text || "").length * fs * 0.62);
     const vmlWidthBase = explicitWidth || Math.max(120, estimatedTextWidth + padLeft + padRight + bw * 2);
+    // For pill buttons (large radius), ensure enough width so the curved ends don't encroach.
     const minPillWidth = br > 0 ? Math.ceil(finalHeight * 2) : 0;
     const vmlWidth = Math.max(vmlWidthBase, minPillWidth);
     const borderCss = bw > 0 ? `border:${bw}px ${bdStyle} ${bdColor};` : "";
-    const widthCss = explicitWidth ? `width:${explicitWidth}px;` : "";
-    const nonMsoVerticalSizing = explicitHeight > 0
-        ? `height:${finalHeight}px;line-height:${finalHeight}px;padding:0 ${padRight}px 0 ${padLeft}px;`
-        : `padding:${padTop}px ${padRight}px ${padBottom}px ${padLeft}px;line-height:${fs}px;`;
+    // Empty href triggers New Outlook's link sanitizer to strip surrounding styles.
+    const safeHref = navigateToUrl && navigateToUrl.trim() ? navigateToUrl : "#";
+    // ── Non-MSO fallback ──
+    // All visual box styling (bg, border, radius, width, height) lives on the <td>.
+    // New Outlook (and many web mail clients) strip these from <a> inline styles,
+    // treating anchors as inline text. The <td> is a block container and is preserved.
+    // The <a> fills the cell so the entire button is the click target — typography only.
+    // Down-level-hidden conditional comments hide this branch from classic Outlook
+    // (which renders the VML below), so both engines see exactly one button.
+    const tdWidthCss = explicitWidth ? `width:${explicitWidth}px;` : "";
+    const tdHeightCss = explicitHeight > 0 ? `height:${finalHeight}px;` : "";
+    const tdWidthAttr = explicitWidth ? ` width="${explicitWidth}"` : "";
+    const tdHeightAttr = explicitHeight > 0 ? ` height="${finalHeight}"` : "";
+    // <a> fills the cell. When height is explicit, line-height = inner height for vertical
+    // centering. When not, padding provides the vertical sizing (matches canvas behavior).
+    const anchorBoxStyles = explicitHeight > 0
+        ? `display:block;line-height:${finalHeight - 2 * bw}px;padding:0 ${padRight}px;`
+        : `display:block;padding:${padTop}px ${padRight}px ${padBottom}px ${padLeft}px;line-height:${fs}px;`;
+    const tableAlignAttr = ` align="${containerAlign}"`;
+    const tableMargin = containerAlign === 'center' ? 'margin:0 auto;'
+        : containerAlign === 'right' ? 'margin-left:auto;margin-right:0;'
+            : '';
     const nonMsoAnchor = `<!--[if !mso]><!-->
-<a href="${navigateToUrl}"
-   target="_blank" rel="noreferrer noopener"
-   style="display:inline-block;background-color:${bgColor};border-radius:${br}px;${borderCss}color:${safeColor};font-family:${safeFF};font-size:${fs}px;font-weight:${fontWeight};text-decoration:none;${nonMsoVerticalSizing}text-align:center;white-space:nowrap;-webkit-text-size-adjust:none;box-sizing:border-box;${widthCss}mso-hide:all;">${text}</a>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation"${tableAlignAttr} style="border-collapse:separate;${tableMargin}">
+  <tr>
+    <td bgcolor="${bgColor}" align="center" valign="middle"${tdWidthAttr}${tdHeightAttr} style="background-color:${bgColor};border-radius:${br}px;${borderCss}${tdWidthCss}${tdHeightCss}box-sizing:border-box;mso-padding-alt:0;text-align:center;">
+      <a href="${safeHref}" target="_blank" rel="noreferrer noopener"
+         style="${anchorBoxStyles}color:${safeColor};font-family:${safeFF};font-size:${fs}px;font-weight:${fontWeight};text-decoration:none;text-align:center;white-space:nowrap;-webkit-text-size-adjust:none;box-sizing:border-box;">${text}</a>
+    </td>
+  </tr>
+</table>
 <!--<![endif]-->`;
+    // ── MSO: VML bulletproof button (classic Outlook / Word engine) ──
+    // VML arcsize is a percentage of half the shorter side. Clamp to 50% (pill).
     const arcSizePct = br > 0 ? Math.min(Math.round((br / (finalHeight / 2)) * 100), 50) : 0;
     const strokeAttrs = bw > 0
         ? `stroke="true" strokecolor="${bdColor}" strokeweight="${bw}px"`
         : `stroke="false"`;
     const msoButton = `<!--[if mso]>
 <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
-  href="${navigateToUrl}"
+  href="${safeHref}"
   style="height:${finalHeight}px;v-text-anchor:middle;width:${vmlWidth}px;"
   arcsize="${arcSizePct}%"
   ${strokeAttrs}
@@ -63,12 +90,24 @@ function appendOutlookForButton(buttonData) {
     return {
         innerContent,
         computed: {
-            fs, fontWeight, containerAlign,
-            padTop, padRight, padBottom, padLeft,
-            explicitWidth, vmlWidth,
-            safeColor, bgColor, safeFF,
-            finalHeight, explicitHeight,
-            bw, br, bdColor, bdStyle,
+            fs,
+            fontWeight,
+            containerAlign,
+            padTop,
+            padRight,
+            padBottom,
+            padLeft,
+            explicitWidth,
+            vmlWidth,
+            safeColor,
+            bgColor,
+            safeFF,
+            finalHeight,
+            explicitHeight,
+            bw,
+            br,
+            bdColor,
+            bdStyle,
         },
     };
 }
@@ -79,9 +118,20 @@ function convertButtonBlock(blockData) {
     const visibilityClass = (0, common_1.getVisibilityClass)(props);
     const { innerContent, computed } = appendOutlookForButton({
         style: {
-            fontFamily, fontSize, fontWeight, textAlign,
-            borderColor, borderRadius, borderWidth, borderStyle,
-            buttonPadding, color, buttonColor, width, height, alignment,
+            fontFamily,
+            fontSize,
+            fontWeight,
+            textAlign,
+            borderColor,
+            borderRadius,
+            borderWidth,
+            borderStyle,
+            buttonPadding,
+            color,
+            buttonColor,
+            width,
+            height,
+            alignment,
         },
         text: text || "",
         navigateToUrl: navigateToUrl || "",
@@ -118,9 +168,9 @@ function convertButtonBlock(blockData) {
         hideOnMobile: Boolean(props.hideOnMobile),
     });
     return `
-<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" class="${visibilityClass}" data-block-type="button" data-block-props="${buttonBlockProps}">
+<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" class="${visibilityClass}" data-block-type="button" data-block-props="${buttonBlockProps}" style="border-collapse:collapse;table-layout:fixed;">
   <tr>
-    <td align="${computed.containerAlign}"
+    <td align="${computed.containerAlign}"${(0, common_1.buildOutlookBgAttr)(containerBg)}
         style="padding:${padding?.top || 0}px ${padding?.right || 0}px ${padding?.bottom || 0}px ${padding?.left || 0}px;background-color:${containerBg || 'transparent'};">
       ${innerContent}
     </td>

package/dist/utils/blocks/grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/grid.ts"],"names":[],"mappings":"AAMA,wBAAsB,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAiO1F;AAED,wBAAsB,oBAAoB,CACxC,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,GAAG,EACb,gBAAgB,EAAE,MAAM,EACxB,iBAAiB,EAAE,MAAM,EACzB,mBAAmB,UAAQ;;;GAoE5B"}
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/grid.ts"],"names":[],"mappings":"AAMA,wBAAsB,gBAAgB,CACpC,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,GAAG,EACb,aAAa,EAAE,MAAM,mBAgTtB;AAED,wBAAsB,oBAAoB,CACxC,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,GAAG,EACb,gBAAgB,EAAE,MAAM,EACxB,iBAAiB,EAAE,MAAM,EACzB,mBAAmB,UAAQ;;;GAwG5B"}

package/dist/utils/blocks/grid.js

@@ -6,18 +6,22 @@ const buildStyles_1 = require("../buildStyles");
 const gradientUtils_1 = require("../gradientUtils");
 const common_1 = require("../common");
 const jsonToHTML_1 = require("../jsonToHTML");
-const outlookSupport_1 = require("../outlookSupport");
 async function convertGridBlock(blockData, rootData, cellWidthInPx) {
     const { style = {}, childrenIds = [], props } = blockData.data;
     const { columns = 1, cellWidths = [], responsive = true } = props;
     const { columnGap = 0, backgroundImage, backgroundColor, ...restStyle } = style;
     const gridVisibilityClass = (0, common_1.getVisibilityClass)(props);
+    // Detect gradient — check both backgroundImage prop and customCss (gradient may land in
+    // customCss when the block was built via CSS shorthand or custom CSS input).
     const bgImageStr = typeof backgroundImage === "string" ? backgroundImage : '';
     const customCssStr = restStyle.customCss || '';
+    // Extract gradient string from customCss if not already in backgroundImage
     const gradientInCustomCss = !bgImageStr.includes('gradient(') && customCssStr.includes('gradient(')
         ? (customCssStr.match(/(?:linear|radial|conic)-gradient\([^)]+(?:\([^)]*\)[^)]*)*\)/)?.[0] || '')
         : '';
-    const effectiveGradient = bgImageStr.includes('gradient(') ? bgImageStr : gradientInCustomCss;
+    const effectiveGradient = bgImageStr.includes('gradient(')
+        ? bgImageStr
+        : gradientInCustomCss;
     const isGradient = Boolean(effectiveGradient);
     const parsedGradient = isGradient ? (0, gradientUtils_1.parseGradient)(effectiveGradient) : null;
     const fallbackBgColor = backgroundColor ||
@@ -27,12 +31,18 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
     const rawBgImageUrl = !isGradient && bgImageStr
         ? bgImageStr.replace(/^url\(['"]?/, "").replace(/['"]?\)$/, "")
         : null;
+    // When gradient came from customCss, strip background-image from customCss so it
+    // doesn't duplicate into the inner table style (the outer <td> wrapper carries it).
     const innerCustomCss = gradientInCustomCss
         ? customCssStr.replace(/background-image\s*:[^;]+;?/gi, '').trim()
         : customCssStr;
+    // Build inner table styles — when gradient/bg-image is on the outer wrapper, strip
+    // background props from the inner table so the outer <td> background shows through.
     const innerRestStyleRaw = (rawBgImageUrl || isGradient)
         ? { ...restStyle, customCss: innerCustomCss, backgroundSize: undefined, backgroundPosition: undefined, backgroundRepeat: undefined }
         : { ...restStyle, customCss: innerCustomCss };
+    // Extract border/radius props — applied via a div wrapper for non-MSO clients so that
+    // border-radius is honoured (Gmail/Outlook compose strip border-radius from <table>).
     const { borderRadius, border, borderColor, borderWidth, borderStyle: borderStyleProp, ...innerRestStyle } = innerRestStyleRaw;
     const divBorderParts = [];
     if (borderRadius)
@@ -51,16 +61,31 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
         ? 'transparent'
         : ((rawBgImageUrl || isGradient) ? undefined : backgroundColor);
     const tableStyles = (0, buildStyles_1.buildStyles)({ backgroundColor: tableBgForNonMso, ...innerRestStyle }, {
-        perChanges: [], pxChanges: buildStyles_1.allPxAttributes,
+        perChanges: [],
+        pxChanges: buildStyles_1.allPxAttributes,
     });
     const total = childrenIds.length;
     const visualRows = Math.ceil(total / columns);
+    // OUTLOOK FIX: Use explicit pixel width for Old Outlook (Word engine)
     const msoTableWidth = Math.min(cellWidthInPx, 600);
-    const msoBgColor = !rawBgImageUrl && !isGradient ? (backgroundColor || '') : '';
-    const msoBgAttr = msoBgColor ? ` bgcolor="${(0, outlookSupport_1.toOutlookBgColor)(msoBgColor)}"` : '';
+    // When a background image/gradient is present, the background is applied on an outer
+    // wrapper <td> (see bottom of function). The inner grid tables must be clean.
+    // When no background, the MSO table gets bgcolor for solid-color sections.
+    const msoBgColor = !rawBgImageUrl && !isGradient
+        ? (backgroundColor || '')
+        : '';
+    const msoBgAttr = (0, common_1.buildOutlookBgAttr)(msoBgColor);
     const msoBgStyle = msoBgColor ? `background-color:${msoBgColor};` : '';
-    const innerBgTransparent = (rawBgImageUrl || isGradient) ? 'background-color:transparent;' : '';
-    const nonMsoBgAttr = !rawBgImageUrl && !isGradient && backgroundColor && !divBorderStyle ? ` bgcolor="${(0, outlookSupport_1.toOutlookBgColor)(backgroundColor)}"` : '';
+    // Inner tables must be explicitly transparent when outer <td> carries the background.
+    const innerBgTransparent = (rawBgImageUrl || isGradient)
+        ? 'background-color:transparent;'
+        : '';
+    const nonMsoBgAttr = !rawBgImageUrl && !isGradient && !divBorderStyle
+        ? (0, common_1.buildOutlookBgAttr)(backgroundColor || '')
+        : '';
+    // When divBorderStyle is set the non-MSO <table> is transparent, so the Grid's
+    // backgroundColor must move onto the div wrapper — otherwise it vanishes in modern clients.
+    // Skip this for bg-image/gradient blocks; they apply their background via a separate wrapper.
     const divWrapBg = divBorderStyle && backgroundColor && !rawBgImageUrl && !isGradient
         ? ` background-color:${backgroundColor};`
         : '';
@@ -73,14 +98,15 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
      class="${gridVisibilityClass}">
   <![endif]-->
   <!--[if !mso]><!-->
-  <table border="0" cellpadding="0" cellspacing="0" width="100%"
+  <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center"
      role="presentation"${nonMsoBgAttr}
-     style="border-collapse:collapse; ${innerBgTransparent}${tableStyles}; max-width:600px;"
+     style="border-collapse:collapse; table-layout:fixed; ${innerBgTransparent}${tableStyles}; max-width:600px;"
      class="${gridVisibilityClass}">
   <!--<![endif]-->
   `;
     for (let r = 0; r < visualRows; r++) {
         html += "<tr>";
+        // COUNT visible cells and find last visible column index
         let visibleCells = 0;
         let lastVisibleCol = 0;
         const rowIds = [];
@@ -89,12 +115,14 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
             const id = childrenIds[idx] ?? null;
             rowIds.push(id);
             const child = id ? rootData[id] : null;
-            if (!child?.data?.props?.hideOnDesktop) {
+            const isHidden = child?.data?.props?.hideOnDesktop;
+            if (!isHidden) {
                 visibleCells++;
                 lastVisibleCol = c;
             }
         }
         const safeWidth = visibleCells > 0 ? 100 / visibleCells : 100 / columns;
+        // Reserve pixel space for spacer tds between visible cells (N-1 gaps for N visible cells)
         const totalGapPx = columnGap * Math.max(visibleCells - 1, 0);
         const adjustedTableWidth = Math.max(msoTableWidth - totalGapPx, 1);
         let totalWidth = 0;
@@ -102,19 +130,24 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
         for (let c = 0; c < columns; c++) {
             const id = rowIds[c];
             let widthPercent = cellWidths[c] ?? safeWidth;
-            if (widthPercent <= 0 || widthPercent > 100)
+            if (widthPercent <= 0 || widthPercent > 100) {
                 widthPercent = safeWidth;
+            }
             cellWidthPercents.push(widthPercent);
             if (id) {
                 const child = rootData[id];
-                if (!child?.data?.props?.hideOnDesktop)
+                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 = Math.min(cellWidthPercents[c] * scaleFactor, 100);
+            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];
@@ -124,34 +157,40 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
                 const visibilityClass = (0, common_1.getVisibilityClass)(childProps);
                 if (childVisible) {
                     const { html: childHtml, styles } = await convertGridCellBlock(child, rootData, widthPercent, adjustedTableWidth, Boolean(divBorderStyle));
+                    // bgcolor on the cell <td> ensures background-color survives Outlook
+                    // compose paste (Word/Web editors strip CSS but keep bgcolor attribute).
                     const cellBgColor = cellStyle.backgroundColor || '';
-                    const cellBgAttr = cellBgColor ? ` bgcolor="${(0, outlookSupport_1.toOutlookBgColor)(cellBgColor)}"` : '';
+                    const cellBgAttr = (0, common_1.buildOutlookBgAttr)(cellBgColor);
                     html += `
           <td
-            width="${cellWidthPx}"${cellBgAttr}
+            width="${Math.max(1, Math.round(widthPercent))}%"${cellBgAttr}
             class="${[responsive ? "stack-column" : "", visibilityClass].filter(Boolean).join(" ")}"
-            style="width:${cellWidthPx}px;vertical-align:${verticalAlign};word-break:break-word;${styles}"
+            style="width:${widthPercent}%;vertical-align:${verticalAlign};word-break:break-word;${styles}"
           >
             ${childHtml}
           </td>`;
+                    // Spacer td between columns — uses width attribute only (no inline style width) so
+                    // Outlook mobile (which strips <style>) treats it proportionally, not as a fixed blocker.
+                    // col-gap-spacer class hides it when columns stack via CSS media query.
                     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 += `<td width="${columnGap}" class="col-gap-spacer" style="font-size:0;line-height:0;padding:0;" aria-hidden="true"></td>`;
                     }
                 }
             }
             else {
                 html += `
-        <td width="${cellWidthPx}"
+        <td width="${Math.max(1, Math.round(widthPercent))}%"
             ${responsive ? 'class="stack-column"' : ""}
-            style="width:${cellWidthPx}px;vertical-align:top;">
+            style="width:${widthPercent}%;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 += `<td width="${columnGap}" class="col-gap-spacer" style="font-size:0;line-height:0;padding:0;" aria-hidden="true"></td>`;
                 }
             }
         }
         html += "</tr>";
     }
+    // Close both MSO and non-MSO tables
     html += `
   <!--[if mso]>
   </table>
@@ -160,6 +199,21 @@ 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
             ? (() => {
@@ -171,9 +225,9 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
             : `<v:fill type="frame" src="${rawBgImageUrl}" color="${fallbackBgColor}" />`;
         html = `
 <table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation"
-  style="border-collapse:collapse;width:100%;max-width:${msoTableWidth}px;">
+  style="border-collapse:collapse;table-layout:fixed;width:100%;max-width:${msoTableWidth}px;">
   <tr>
-    <td width="100%" bgcolor="${fallbackBgColor}" valign="top"
+    <td width="100%"${(0, common_1.buildOutlookBgAttr)(fallbackBgColor)} valign="top"
       ${!isGradient && rawBgImageUrl ? `background="${rawBgImageUrl}"` : ""}
       style="
         width:100%;max-width:${msoTableWidth}px;
@@ -200,58 +254,68 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
   </tr>
 </table>`;
     }
+    // Wrap the entire grid (including any bg-image outer table) in a div when the block
+    // has border/radius. An unconditional <div> is used — not gated behind <!--[if !mso]>-->
+    // — so Gmail compose paste renders the border-radius reliably. Old Outlook ignores
+    // border-radius on <div> but still shows the rectangular border; new Outlook works fully.
     if (divBorderStyle)
         html = `${divWrapOpen}${html}${divWrapClose}`;
     return html;
 }
 async function convertGridCellBlock(blockData, rootData, cellWidthPercent, parentCellWidthPx, parentGridHasBorder = false) {
     const { style = {}, childrenIds = [], props = {} } = blockData.data;
+    const visibilityClass = (0, common_1.getVisibilityClass)(props);
+    // Extract border + radius from style so they move to the div wrapper (not the <td>).
+    // Gmail strips border-radius from <td> but honours it on <div>. By putting border and
+    // radius on the same unconditional <div>, the rounded card border renders in all clients.
+    // The <td> keeps bgcolor (via attribute) for Old Outlook background fallback.
     const { borderRadius: cellBorderRadius, borderWidth: cellBorderWidth, borderStyle: cellBorderStyleProp, borderColor: cellBorderColor, border: cellBorderShorthand, ...styleWithoutBorder } = style;
+    // backgroundColor must stay on the div wrapper (not the <td>) in two cases:
+    // 1. Cell has its own border-radius — the div's overflow:hidden clips the background.
+    // 2. Parent grid has a border div (divBorderStyle) — the grid's overflow:hidden clips it.
+    // In both cases, the rectangular <td> background bleeds through rounded corners if kept
+    // in CSS, creating visible corner squares. The bgcolor attribute stays for Outlook fallback.
     const stripBgFromTd = Boolean(cellBorderRadius) || parentGridHasBorder;
-    // Omit backgroundColor entirely rather than setting 'transparent' — an explicit
-    // background-color:transparent can defeat the bgcolor HTML attribute in Old Outlook
-    // (Word engine), leaving the cell with no background at all.
+    // When stripping bg from <td>, omit backgroundColor entirely rather than setting 'transparent'.
+    // An explicit background-color:transparent in CSS can defeat the bgcolor HTML attribute in
+    // Old Outlook (Word engine), leaving the cell with no background at all.
     const styleForTd = stripBgFromTd
         ? { ...styleWithoutBorder, backgroundColor: undefined }
         : styleWithoutBorder;
-    const styles = (0, buildStyles_1.buildStyles)(styleForTd, { perChanges: [], pxChanges: buildStyles_1.allPxAttributes });
+    // Outlook treats <td width="..."> as content width and then adds horizontal padding,
+    // which can push the total row width beyond the parent table and shift columns.
+    // Keep sizing styles on <td>, but move padding into the inner div wrapper.
+    const styleForTdWithoutPadding = { ...styleForTd, padding: undefined };
+    const styles = (0, buildStyles_1.buildStyles)(styleForTdWithoutPadding, {
+        perChanges: [],
+        pxChanges: buildStyles_1.allPxAttributes,
+    });
     const parts = [];
+    // OUTLOOK FIX: Calculate the actual cell width in pixels based on percentage
+    // If parent is 600px and cell is 50%, cell width should be 300px, not 600px
     const cellWidthPx = Math.round((cellWidthPercent / 100) * parentCellWidthPx);
-    const rawPad = styleWithoutBorder?.padding;
-    let cellPadLeft = 0;
-    let cellPadRight = 0;
-    if (rawPad && typeof rawPad === 'object') {
-        cellPadLeft = Number.isFinite(rawPad.left) ? rawPad.left : 0;
-        cellPadRight = Number.isFinite(rawPad.right) ? rawPad.right : 0;
-    }
-    else if (typeof rawPad === 'string') {
-        const parts = rawPad.trim().split(/\s+/).map(v => parseFloat(v) || 0);
-        if (parts.length >= 4) {
-            cellPadRight = parts[1];
-            cellPadLeft = parts[3];
-        }
-        else if (parts.length === 3) {
-            cellPadRight = parts[1];
-            cellPadLeft = parts[1];
-        }
-        else if (parts.length === 2) {
-            cellPadRight = parts[1];
-            cellPadLeft = parts[1];
-        }
-        else if (parts.length === 1) {
-            cellPadRight = parts[0];
-            cellPadLeft = parts[0];
-        }
-    }
+    // Subtract the cell's own padding so children receive the actual content-area width.
+    // Old Outlook honours explicit img/table width attributes — if a child is sized to the
+    // full column width (ignoring padding) it overflows and expands the column.
+    const cellPad = styleWithoutBorder?.padding || {};
+    const cellPadLeft = Number.isFinite(cellPad.left) ? cellPad.left : 0;
+    const cellPadRight = Number.isFinite(cellPad.right) ? cellPad.right : 0;
     const contentWidthPx = Math.max(cellWidthPx - cellPadLeft - cellPadRight, 20);
+    // OUTLOOK FIX: Ensure cell width is reasonable and capped at 600px
     const safeCellWidthPx = Math.min(contentWidthPx, 600);
     for (const childId of childrenIds) {
         const child = rootData[childId];
-        if (child)
+        if (child) {
             parts.push(await (0, jsonToHTML_1.convertToHtml)(child, rootData, safeCellWidthPx));
+        }
     }
     const borderRadius = cellBorderRadius || 0;
     const bgColor = styleWithoutBorder?.backgroundColor || "transparent";
+    // Build border CSS for the div wrapper.
+    // When the parent grid already has a divBorderStyle wrapper (border + border-radius +
+    // overflow:hidden), the cell must NOT duplicate the same border/radius — that causes
+    // two concentric borders of the same colour (double-border). The grid's wrapper div
+    // already provides the visual container; the cell div only needs background-color.
     const cellDivBorderParts = [];
     if (!parentGridHasBorder) {
         if (borderRadius)
@@ -267,9 +331,21 @@ async function convertGridCellBlock(blockData, rootData, cellWidthPercent, paren
         }
     }
     const cellDivBorderStyle = cellDivBorderParts.join(' ');
+    // Unconditional div — visible to all clients (Gmail, Outlook new/old, Apple Mail).
+    // background-color on the div covers modern clients; bgcolor on <td> covers Old Outlook.
     const divStyleParts = [`background-color:${bgColor};`];
+    const formatPad = (value) => (typeof value === 'number' ? `${value}px` : (value || '0'));
+    const cellPadTop = formatPad(cellPad.top);
+    const cellPadBottom = formatPad(cellPad.bottom);
+    const cellPadLeftCss = formatPad(cellPad.left);
+    const cellPadRightCss = formatPad(cellPad.right);
+    divStyleParts.push(`padding:${cellPadTop} ${cellPadRightCss} ${cellPadBottom} ${cellPadLeftCss};`);
     if (cellDivBorderStyle)
         divStyleParts.push(cellDivBorderStyle);
-    const wrapped = `<div style="${divStyleParts.join(' ')}">${parts.join("")}</div>`;
-    return { html: wrapped, styles };
+    const divStyleStr = divStyleParts.join(' ');
+    const wrapped = `<div style="${divStyleStr}">${parts.join("")}</div>`;
+    return {
+        html: wrapped,
+        styles,
+    };
 }

package/dist/utils/blocks/image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/image.ts"],"names":[],"mappings":"AAIA,wBAAsB,uBAAuB,CAAC,QAAQ,EAAE,MAAM,EAAE,mBAAmB,EAAE,MAAM;;;;;GAiB1F;AAED,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBA2D5E"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/image.ts"],"names":[],"mappings":"AAIA,wBAAsB,uBAAuB,CAC3C,QAAQ,EAAE,MAAM,EAChB,mBAAmB,EAAE,MAAM;;;;;GAoB5B;AAED,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAiH5E"}

package/dist/utils/blocks/image.js

@@ -29,27 +29,65 @@ async function convertImageBlock(blockData, cellWidthInPx) {
     const { altText, imageUrl, navigateToUrl } = props;
     const visibilityClass = (0, common_1.getVisibilityClass)(props);
     const { width, height, objectFit, borderRadius, borderWidth, borderColor, borderStyle, ...containerStyle } = style;
-    const containerStyles = (0, buildStyles_1.buildStyles)({ ...containerStyle }, { perChanges: [], pxChanges: buildStyles_1.addPxToAttributes });
+    // Add border styles to container for fallback clients
+    const containerStyles = (0, buildStyles_1.buildStyles)({
+        ...containerStyle,
+    }, { perChanges: [], pxChanges: buildStyles_1.addPxToAttributes });
+    // OUTLOOK FIX: Ensure cellWidthInPx never exceeds 600px
     const safeCellWidth = Math.min(cellWidthInPx, 600);
+    // Parse width percentage (default 100%)
     const widthPercent = typeof width === "string" && width.includes("%")
         ? parseInt(width.replace("%", ""))
-        : typeof width === "number" ? width : 100;
+        : 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);
-    const imageTagStyles = (0, buildStyles_1.buildStyles)({ borderStyle, borderRadius, borderColor, borderWidth }, { perChanges: [], pxChanges: buildStyles_1.addPxToAttributes });
+    // Build image styles for modern email clients (non-Outlook)
+    const imageTagStyles = (0, buildStyles_1.buildStyles)({
+        borderStyle,
+        borderRadius: borderRadius,
+        borderColor,
+        borderWidth,
+    }, {
+        perChanges: [],
+        pxChanges: buildStyles_1.addPxToAttributes,
+    });
+    // OUTLOOK RENDERING CONTRACT
+    // width/height HTML attributes → Old Outlook Word engine (CSS is lower priority in Word)
+    // width/height inline CSS      → New Outlook, OWA, and all CSS-capable clients
+    // max-width:100%               → prevents overflow in any client that ignores pixel constraints
+    // height:auto !important       → @media query (convertJsonToHtml.ts) overrides this on mobile
+    //                                so proportional scaling is preserved on small screens
+    // -ms-interpolation-mode       → inline fallback; the <style> block is stripped by
+    //                                Outlook during forward/reply MIME rewriting
     const imageElement = `<img src="${imageUrl}" alt="${altText || "Image"}" border="0" width="${finalWidth}" height="${finalHeight}" style="${imageTagStyles}; display:block; width:${finalWidth}px; height:${finalHeight}px; max-width:100%; line-height:0; -ms-interpolation-mode:bicubic;" />`;
     const percentWidth = typeof width === "string" && width.endsWith("%")
         ? width
-        : typeof width === "number" ? `${width}%` : "100%";
+        : typeof width === "number"
+            ? `${width}%`
+            : "100%";
+    // Non-MSO wrapper: display:block removes the phantom inline-baseline gap that
+    // display:inline-block creates in Gmail / Apple Mail / Yahoo between images.
+    // margin handles alignment since text-align won't move block elements.
     const imgTextAlign = containerStyle.textAlign || "left";
     const imgMargin = imgTextAlign === "center" ? "margin:0 auto;" :
         imgTextAlign === "right" ? "margin-left:auto; margin-right:0;" : "";
+    // OUTLOOK FIX: Use finalWidth (the actual displayed size) as max-width so the div
+    // doesn't claim more space than the image occupies. originalWidth is the natural
+    // image size (e.g. 636px for the Beefree logo rendered at 35px) which was
+    // misleadingly large and could confuse some rendering engines.
     const nonMsoWrapper = `<div style="display:block; width:${percentWidth}; max-width:${finalWidth}px; line-height:0; font-size:0; ${imgMargin}">${imageElement}</div>`;
+    // OUTLOOK FIX: Generate VML with corrected dimensions
     const outlookImage = await (0, outlookSupport_1.appendOutlookForImage)(nonMsoWrapper, safeCellWidth, innerContainerWidth, imageUrl, style, finalWidth, finalHeight);
     const imageContent = (0, outlookSupport_1.appendOutlookSupport)(outlookImage, containerStyles, visibilityClass, safeCellWidth);
     return navigateToUrl

package/dist/utils/blocks/shape.js

@@ -147,7 +147,7 @@ async function convertShapeBlock(blockData) {
     // --- Case 1: Image + Text ---
     if (imageUrl && text) {
         nonMsoContent = `
-<div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
+<div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;max-width:100%;box-sizing:border-box;
   border:${borderWidth}px ${borderStyle} ${borderColor};
   border-radius:${resolvedBorderRadius};
   background-color:${finalBackgroundColor};
@@ -156,11 +156,11 @@ async function convertShapeBlock(blockData) {
   background-size:cover;
   background-repeat:no-repeat;
   overflow:hidden;${alignmentStyle}${customCss || ""}">
-  <table border="0" cellpadding="0" cellspacing="0" width="${resolvedWidthPx}"
-    style="width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;border-collapse:collapse;">
+  <table border="0" cellpadding="0" cellspacing="0" width="100%"
+    style="width:100%;height:${resolvedHeightPx}px;border-collapse:collapse;">
     <tr>
       <td align="${textAlignStyle}" valign="${verticalAlign}"
-          width="${resolvedWidthPx}" height="${resolvedHeightPx}"
+          height="${resolvedHeightPx}"
           style="padding:6px;vertical-align:${verticalAlign};text-align:${textAlignStyle};overflow:hidden;box-sizing:border-box;">
         <div style="${textSizeStyle}text-align:${textAlignStyle};max-width:90%;overflow:hidden;">${text}</div>
       </td>
@@ -171,7 +171,7 @@ async function convertShapeBlock(blockData) {
     // --- Case 2: Image only ---
     else if (imageUrl) {
         nonMsoContent = `
-<div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
+<div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;max-width:100%;box-sizing:border-box;
   border:${borderWidth}px ${borderStyle} ${borderColor};
   border-radius:${resolvedBorderRadius};
   overflow:hidden;${alignmentStyle}${customCss || ""}">
@@ -183,16 +183,16 @@ async function convertShapeBlock(blockData) {
     // --- Case 3: Text only ---
     else {
         nonMsoContent = `
-<div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
+<div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;max-width:100%;box-sizing:border-box;
   background-color:${finalBackgroundColor};
   border:${borderWidth}px ${borderStyle} ${borderColor};
   border-radius:${resolvedBorderRadius};
   overflow:hidden;${alignmentStyle}${customCss || ""}">
-  <table border="0" cellpadding="0" cellspacing="0" width="${resolvedWidthPx}"
-    style="width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;border-collapse:collapse;">
+  <table border="0" cellpadding="0" cellspacing="0" width="100%"
+    style="width:100%;height:${resolvedHeightPx}px;border-collapse:collapse;">
     <tr>
       <td align="${textAlignStyle}" valign="${verticalAlign}"
-          width="${resolvedWidthPx}" height="${resolvedHeightPx}"
+          height="${resolvedHeightPx}"
           style="padding:8px;vertical-align:${verticalAlign};text-align:${textAlignStyle};box-sizing:border-box;">
         <div style="${textSizeStyle}text-align:${textAlignStyle};max-width:90%;overflow:hidden;">${text || ""}</div>
       </td>

package/dist/utils/blocks/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/text.ts"],"names":[],"mappings":"AAKA,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,CAAC,EAAE,MAAM,UA4ItE"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/text.ts"],"names":[],"mappings":"AASA,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,CAAC,EAAE,MAAM,UAkLtE"}

package/dist/utils/blocks/text.js

@@ -8,42 +8,69 @@ const common_1 = require("../common");
 function convertTextBlock(blockData, cellWidthInPx) {
     const { style, props } = blockData.data;
     const visibilityClass = (0, common_1.getVisibilityClass)(props);
-    const { width, backgroundColor, padding, borderRadius, borderStyle, borderColor, borderWidth, textContainerBackgroundColor, textContainerPadding, fontSize, backgroundImage, backgroundPosition, backgroundRepeat, backgroundSize, whiteSpace: _whiteSpace, ...rest } = style;
-    const bgImageStr = typeof backgroundImage === 'string' ? backgroundImage : '';
-    const customCssStr = rest.customCss || '';
-    const gradientInCustomCss = !bgImageStr.includes('gradient(') && customCssStr.includes('gradient(')
-        ? (customCssStr.match(/(?:linear|radial|conic)-gradient\([^)]+(?:\([^)]*\)[^)]*)*\)/)?.[0] || '')
-        : '';
-    const effectiveGradient = bgImageStr.includes('gradient(') ? bgImageStr : gradientInCustomCss;
+    const { width, backgroundColor, padding, borderRadius, borderStyle, borderColor, borderWidth, textContainerBackgroundColor, textContainerPadding, fontSize, backgroundImage, whiteSpace: _whiteSpace, // strip from outer td — pre-wrap on a td preserves editor whitespace
+    ...rest } = style;
+    // Detect background image or gradient (may live in backgroundImage or customCss).
+    // Same multi-client approach as Grid block: outer wrapper <td> carries the background
+    // via CSS (Gmail/New Outlook), background attribute (Yahoo), and VML (Old Outlook).
+    const bgImageStr = typeof backgroundImage === "string" ? backgroundImage : "";
+    const customCssStr = rest.customCss || "";
+    const gradientInCustomCss = !bgImageStr.includes("gradient(") && customCssStr.includes("gradient(")
+        ? customCssStr.match(/(?:linear|radial|conic)-gradient\([^)]+(?:\([^)]*\)[^)]*)*\)/)?.[0] || ""
+        : "";
+    const effectiveGradient = bgImageStr.includes("gradient(")
+        ? bgImageStr
+        : gradientInCustomCss;
     const isGradient = Boolean(effectiveGradient);
     const parsedGradient = isGradient ? (0, gradientUtils_1.parseGradient)(effectiveGradient) : null;
     const rawBgImageUrl = !isGradient && bgImageStr
-        ? bgImageStr.replace(/^url\(['"]?/, '').replace(/['"]?\)$/, '')
+        ? bgImageStr.replace(/^url\(['"]?/, "").replace(/['"]?\)$/, "")
         : null;
     const hasBgImage = Boolean(rawBgImageUrl || isGradient);
     const fallbackBgColor = textContainerBackgroundColor ||
         parsedGradient?.fallback ||
         (0, gradientUtils_1.extractCssFallbackColor)(customCssStr) ||
-        '#ffffff';
-    const textBoxStyle = { backgroundColor, padding, borderRadius, borderStyle, borderColor, borderWidth };
-    const convertedTextStyle = (0, buildStyles_1.buildStyles)(textBoxStyle, { perChanges: [], pxChanges: buildStyles_1.allPxAttributes });
+        "#ffffff";
+    // Text box decoration styles (border, background, padding) — no width
+    const textBoxStyle = {
+        backgroundColor,
+        padding,
+        borderRadius,
+        borderStyle,
+        borderColor,
+        borderWidth,
+    };
+    const convertedTextStyle = (0, buildStyles_1.buildStyles)(textBoxStyle, {
+        perChanges: [],
+        pxChanges: buildStyles_1.allPxAttributes,
+    });
+    // Strip gradient from customCss when it is hoisted to the outer bg wrapper.
     const innerCustomCss = gradientInCustomCss
-        ? customCssStr.replace(/background-image\s*:[^;]+;?/gi, '').trim()
+        ? customCssStr.replace(/background-image\s*:[^;]+;?/gi, "").trim()
         : customCssStr;
-    const restForStyles = gradientInCustomCss ? { ...rest, customCss: innerCustomCss } : rest;
+    const restForStyles = gradientInCustomCss
+        ? { ...rest, customCss: innerCustomCss }
+        : rest;
+    // Outer td styles: strip container background when a bg-image wrapper is present
+    // so the outer wrapper's background is not double-applied.
     const styles = (0, buildStyles_1.buildStyles)({
         padding: textContainerPadding,
         backgroundColor: hasBgImage ? undefined : textContainerBackgroundColor,
         ...restForStyles,
-    }, { perChanges: [], pxChanges: buildStyles_1.allPxAttributes });
+    }, {
+        perChanges: [],
+        pxChanges: buildStyles_1.allPxAttributes,
+    });
     const sanitizedText = (props.text ?? "")
         .replace(/<p(\s[^>]*)?>/gi, (_, attrs) => `<div${attrs || ""}>`)
         .replace(/<\/p>/gi, "</div>");
     const navigateToUrl = props.navigateToUrl || "";
     const fontSizeStyle = fontSize != null ? `font-size:${fontSize}px;` : "";
+    // Email clients apply `a { color: blue }` which overrides inherited color.
+    // Inject the block color directly onto <a> tags that don't already have one.
     const blockTextColor = rest.color;
     const processedText = blockTextColor
-        ? sanitizedText.replace(/<a(\s[^>]*)?>/gi, (match, attrs = '') => {
+        ? sanitizedText.replace(/<a(\s[^>]*)?>/gi, (match, attrs = "") => {
             if (/style\s*=\s*["'][^"']*\bcolor\s*:/i.test(attrs))
                 return match;
             if (/\bstyle\s*=/i.test(attrs)) {
@@ -52,33 +79,37 @@ function convertTextBlock(blockData, cellWidthInPx) {
             return `<a${attrs} style="color:${blockTextColor};">`;
         })
         : sanitizedText;
-    const colorStyle = blockTextColor ? `color:${blockTextColor};` : '';
+    const colorStyle = blockTextColor ? `color:${blockTextColor};` : "";
+    // Use display:block + width:100% so text fills the column naturally.
+    // display:inline-block with a pixel width (e.g. 400px) breaks narrow grid cells.
     const convertedTextBox = `<div style="display:block; width:100%; box-sizing:border-box; ${colorStyle}${fontSizeStyle}${convertedTextStyle}">${processedText.replaceAll(/\n/g, "<br>")}</div>`;
-    const safeCellWidth = cellWidthInPx ? Math.min(cellWidthInPx, 600) : undefined;
-    const textContent = (0, outlookSupport_1.appendOutlookSupport)(convertedTextBox, styles, hasBgImage ? '' : visibilityClass, safeCellWidth);
-    const linkColorStyle = blockTextColor ? `color:${blockTextColor};` : 'color:inherit;';
+    const safeCellWidth = cellWidthInPx
+        ? Math.min(cellWidthInPx, 600)
+        : undefined;
+    // When a bg-image wrapper is present, visibilityClass moves to the outer table.
+    const textContent = (0, outlookSupport_1.appendOutlookSupport)(convertedTextBox, styles, hasBgImage ? "" : visibilityClass, safeCellWidth);
+    const linkColorStyle = blockTextColor
+        ? `color:${blockTextColor};`
+        : "color:inherit;";
     if (hasBgImage) {
         const msoWidth = cellWidthInPx ? Math.min(cellWidthInPx, 600) : 600;
         const vmlFill = isGradient
             ? (() => {
                 const vmlAngle = (0, gradientUtils_1.cssAngleToVml)(parsedGradient?.angle || 180);
-                const c1 = parsedGradient?.fallback || '#ffffff';
+                const c1 = parsedGradient?.fallback || "#ffffff";
                 const c2 = parsedGradient?.colors[parsedGradient.colors.length - 1] || c1;
                 return `<v:fill type="gradient" color="${c1}" color2="${c2}" angle="${vmlAngle}" />`;
             })()
             : `<v:fill type="frame" src="${rawBgImageUrl}" color="${fallbackBgColor}" />`;
-        const bgPosition = backgroundPosition ?? 'center center';
-        const bgSize = backgroundSize ?? 'cover';
-        const bgRepeat = backgroundRepeat ?? 'no-repeat';
         const bgCss = isGradient
             ? `background:${effectiveGradient};`
-            : `background-image:url('${rawBgImageUrl}'); background-position:${bgPosition}; background-size:${bgSize}; background-repeat:${bgRepeat};`;
+            : `background-image:url('${rawBgImageUrl}'); background-position:center center; background-size:cover; background-repeat:no-repeat;`;
         const wrappedContent = `
 <table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation"
   style="border-collapse:collapse;width:100%;max-width:${msoWidth}px;" class="${visibilityClass}">
   <tr>
-    <td width="100%" bgcolor="${fallbackBgColor}" valign="top"
-      ${!isGradient && rawBgImageUrl ? `background="${rawBgImageUrl}"` : ''}
+    <td width="100%"${(0, common_1.buildOutlookBgAttr)(fallbackBgColor)} valign="top"
+      ${!isGradient && rawBgImageUrl ? `background="${rawBgImageUrl}"` : ""}
       style="width:100%;max-width:${msoWidth}px;background-color:${fallbackBgColor};${bgCss}">
 
       <!--[if gte mso 9]>

package/dist/utils/buildStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buildStyles.d.ts","sourceRoot":"","sources":["../../src/utils/buildStyles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,UAA8C,CAAC;AAC7E,eAAO,MAAM,sBAAsB,UAAsB,CAAC;AAC1D,eAAO,MAAM,eAAe,UAAoD,CAAC;AAEjF,eAAO,MAAM,gBAAgB,iDAAiD,CAAC;AAQ/E,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAe7D;AAED,wBAAgB,WAAW,CACzB,KAAK,EAAE,GAAG,EACV,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,EAAE,CAAC;IAAC,UAAU,EAAE,MAAM,EAAE,CAAA;CAAE,UAmEzE"}
+{"version":3,"file":"buildStyles.d.ts","sourceRoot":"","sources":["../../src/utils/buildStyles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,UAA8C,CAAC;AAC7E,eAAO,MAAM,sBAAsB,UAAsB,CAAC;AAC1D,eAAO,MAAM,eAAe,UAAoD,CAAC;AAEjF,eAAO,MAAM,gBAAgB,iDAAiD,CAAC;AAQ/E,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAkB7D;AACD,wBAAgB,WAAW,CACzB,KAAK,EAAE,GAAG,EACV,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,EAAE,CAAC;IAAC,UAAU,EAAE,MAAM,EAAE,CAAA;CAAE,UAqFzE"}

package/dist/utils/buildStyles.js

@@ -20,12 +20,15 @@ function sanitizeFontFamily(fontFamily) {
         .split(',')
         .map(font => {
         const trimmed = font.trim();
+        // Strip any surrounding quotes (single or double) from either end
         const unquoted = trimmed.replace(/^["']|["']$/g, '').trim();
         if (!unquoted)
             return '';
+        // Generic families and single-token names need no quotes
         if (GENERIC_FONT_FAMILIES.has(unquoted.toLowerCase()) || !/\s/.test(unquoted)) {
             return unquoted;
         }
+        // Multi-word font name: wrap in single quotes, escaping any embedded single quotes
         return `'${unquoted.replace(/'/g, "\\'")}'`;
     })
         .filter(Boolean)
@@ -35,18 +38,28 @@ function buildStyles(style, { pxChanges, perChanges }) {
     if (!style)
         style = {};
     const stylesObj = {};
-    const INVALID_KEYS = [
-        "columns", "cellWidths", "cellWidth", "childWidth",
-        "visibility", "hideOnMobile", "hideOnDesktop", "label", "alignment",
-    ];
     Object.entries(style).forEach(([key, value]) => {
         if (key === "customCss")
             return;
+        const INVALID_KEYS = [
+            "columns",
+            "cellWidths",
+            "cellWidth",
+            "childWidth",
+            "visibility",
+            "hideOnMobile",
+            "hideOnDesktop",
+            "label",
+            "alignment",
+        ];
         if (INVALID_KEYS.includes(key))
             return;
+        // Prevent null/undefined/"" from leaking into CSS
         if (value === undefined || value === null || value === "")
             return;
-        if ((key === "padding" || key === "buttonPadding") && typeof value === "object") {
+        // FIX 1 — SANITIZE padding objects
+        if ((key === "padding" || key === "buttonPadding") &&
+            typeof value === "object") {
             const pad = value;
             const safePad = {
                 top: Number.isFinite(pad.top) ? pad.top : 0,
@@ -59,21 +72,26 @@ function buildStyles(style, { pxChanges, perChanges }) {
         if (key === "fontFamily" && typeof value === "string") {
             value = sanitizeFontFamily((0, fontFallback_1.withFontFallback)(value));
         }
+        // Wrap backgroundImage values in url() if not already wrapped — skip gradients
         if (key === "backgroundImage" && typeof value === "string"
             && !String(value).startsWith("url(")
             && !String(value).toLowerCase().includes("gradient(")) {
             value = `url('${value}')`;
         }
+        // lineHeight: values >= 4 are pixel values; smaller values are unitless multipliers (e.g. 1.5)
         if (key === "lineHeight" && typeof value === "number") {
             stylesObj["line-height"] = value >= 4 ? `${value}px` : String(value);
             return;
         }
         const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+        // FIX 2 — Sanitize invalid px/per values
         if (pxChanges.includes(key)) {
             if (typeof value === "number") {
-                stylesObj[cssKey] = `${Math.round(value * 100) / 100}px`;
+                const rounded = Math.round(value * 100) / 100;
+                stylesObj[cssKey] = `${rounded}px`;
             }
             else if (typeof value === "string" && value.includes("null")) {
+                // Skip invalid styles
                 return;
             }
             else {

package/dist/utils/common.d.ts

@@ -5,4 +5,5 @@ export declare function getVisibilityClass(props?: {
     hideOnMobile?: boolean;
 }): string;
 export declare function encodeBlockPropsAttr(props: Record<string, any>): string;
+export declare function buildOutlookBgAttr(color: string): string;
 //# sourceMappingURL=common.d.ts.map

package/dist/utils/common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,KAAG,MAAM,GAAG,IAqBvD,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,KAAK,MAAM,KAAG,MAAM,GAAG,IAIrD,CAAC;AAGF,wBAAgB,kBAAkB,CAAC,KAAK,CAAC,EAAE;IACzC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,UASA;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAQvE"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,KAAG,MAAM,GAAG,IAqBvD,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,KAAK,MAAM,KAAG,MAAM,GAAG,IAIrD,CAAC;AAGF,wBAAgB,kBAAkB,CAAC,KAAK,CAAC,EAAE;IACzC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,UASA;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAQvE;AAYD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAGxD"}

package/dist/utils/common.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.extractVimeoId = exports.extractYouTubeId = void 0;
 exports.getVisibilityClass = getVisibilityClass;
 exports.encodeBlockPropsAttr = encodeBlockPropsAttr;
+exports.buildOutlookBgAttr = buildOutlookBgAttr;
 const extractYouTubeId = (url) => {
     try {
         const u = new URL(url);
@@ -53,3 +54,16 @@ function encodeBlockPropsAttr(props) {
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;");
 }
+function toOutlookBgColor(color) {
+    if (!color || color === 'transparent')
+        return '';
+    const m = color.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*[\d.]+)?\s*\)/);
+    if (m) {
+        return '#' + [m[1], m[2], m[3]].map(n => parseInt(n).toString(16).padStart(2, '0')).join('');
+    }
+    return color;
+}
+function buildOutlookBgAttr(color) {
+    const normalized = toOutlookBgColor(color);
+    return normalized ? ` bgcolor="${normalized}"` : '';
+}

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

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

package/dist/utils/convertJsonToHtml.js

@@ -86,9 +86,14 @@ const convertJsonToHtml = async (jsonData) => {
       }
 
       @media only screen and (max-width: 600px) {
+        body {
+          overflow-x: hidden !important;
+        }
+
         .email-container {
           width: 100% !important;
           max-width: 100% !important;
+          overflow-x: hidden !important;
         }
 
         .stack-column,
@@ -96,6 +101,29 @@ const convertJsonToHtml = async (jsonData) => {
           display: block !important;
           width: 100% !important;
           max-width: 100% !important;
+          /* Prevents horizontal padding from adding to 100% width once display:block is applied */
+          box-sizing: border-box !important;
+        }
+
+        /* Images: drop the inline pixel height so aspect ratio is preserved as width shrinks,
+           and cap width to the container. Matches the canvas ImageBlock (height:auto, max-width:100%). */
+        img {
+          height: auto !important;
+          max-width: 100% !important;
+        }
+
+        /* Safety net for clients that keep inline max-width:600px on nested wrappers */
+        table[style*="max-width:600px"] {
+          width: 100% !important;
+          max-width: 100% !important;
+        }
+
+        /* Column-gap spacer tds have no stacking behaviour — collapse them when columns stack */
+        .col-gap-spacer {
+          display: none !important;
+          width: 0 !important;
+          max-height: 0 !important;
+          overflow: hidden !important;
         }
 
         .hide-mobile {
@@ -129,6 +157,7 @@ const convertJsonToHtml = async (jsonData) => {
             <table
               role="presentation"
               class="email-container"
+              align="center"
               bgcolor="${canvasColor || '#ffffff'}"
               cellpadding="0"
               cellspacing="0"
@@ -140,6 +169,7 @@ const convertJsonToHtml = async (jsonData) => {
                 width: 100%;
                 max-width: 600px;
                 margin: 0 auto;
+                overflow: hidden;
                 background-color: ${canvasColor || '#ffffff'};
                 ${textColor ? `color: ${textColor};` : ''}
                 ${borderWidth ? `border: ${borderWidth}px ${borderStyle || 'solid'} ${borderColor || 'transparent'};` : ''}
@@ -147,7 +177,7 @@ const convertJsonToHtml = async (jsonData) => {
             >
               <tbody>
                 <tr>
-                  <td style="padding: ${top}px ${right}px ${bottom}px ${left}px;">
+                  <td style="padding: ${top}px ${right}px ${bottom}px ${left}px; max-width: 600px; overflow: hidden; box-sizing: border-box; word-break: break-word; overflow-wrap: anywhere;">
                     ${blocksHtml.join("")}
                   </td>
                 </tr>

package/dist/utils/outlookSupport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"outlookSupport.d.ts","sourceRoot":"","sources":["../../src/utils/outlookSupport.ts"],"names":[],"mappings":"AAIA,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAOtD;AAOD,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,MAAM,EACf,YAAY,EAAE,MAAM,EACpB,SAAS,CAAC,EAAE,MAAM,EAClB,QAAQ,CAAC,EAAE,MAAM,UAqClB;AAED,wBAAsB,qBAAqB,CACzC,OAAO,EAAE,MAAM,EACf,mBAAmB,EAAE,MAAM,EAC3B,mBAAmB,EAAE,MAAM,EAC3B,QAAQ,EAAE,MAAM,EAChB,KAAK,GAAE,GAAQ,EACf,UAAU,CAAC,EAAE,MAAM,EACnB,WAAW,CAAC,EAAE,MAAM,mBA2ErB;AAED,wBAAsB,0BAA0B,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAO7G"}
+{"version":3,"file":"outlookSupport.d.ts","sourceRoot":"","sources":["../../src/utils/outlookSupport.ts"],"names":[],"mappings":"AAKA,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAOtD;AAOD,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,MAAM,EACf,YAAY,EAAE,MAAM,EACpB,SAAS,CAAC,EAAE,MAAM,EAClB,QAAQ,CAAC,EAAE,MAAM,UAyClB;AAED,wBAAsB,qBAAqB,CACzC,OAAO,EAAE,MAAM,EACf,mBAAmB,EAAE,MAAM,EAC3B,mBAAmB,EAAE,MAAM,EAC3B,QAAQ,EAAE,MAAM,EAChB,KAAK,GAAE,GAAQ,EACf,UAAU,CAAC,EAAE,MAAM,EACnB,WAAW,CAAC,EAAE,MAAM,mBA2FrB;AAED,wBAAsB,0BAA0B,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAO7G"}

package/dist/utils/outlookSupport.js

@@ -5,6 +5,7 @@ exports.appendOutlookSupport = appendOutlookSupport;
 exports.appendOutlookForImage = appendOutlookForImage;
 exports.loadImageNaturalDimensions = loadImageNaturalDimensions;
 const buildStyles_1 = require("./buildStyles");
+const common_1 = require("./common");
 // Converts rgba(r,g,b,a) → #rrggbb for use in HTML bgcolor attributes.
 // Old Outlook's bgcolor attribute only accepts solid hex or named colors — rgba is silently ignored.
 function toOutlookBgColor(color) {
@@ -23,10 +24,11 @@ function extractBgColor(styleStr) {
 function appendOutlookSupport(content, contentStyle, className, msoWidth) {
     const visibilityClass = className || "";
     const shouldHideInOutlook = visibilityClass.includes("hide-desktop");
-    // bgcolor attribute is the reliable fallback for solid colors in Outlook and webmail
-    // forwarding chains where CSS background-color gets stripped.
+    // Old Outlook (Word engine) often ignores CSS background-color on deeply-nested <td>
+    // elements. The bgcolor HTML attribute is the reliable fallback for solid colors.
+    // rgba() is stripped from CSS by the Word engine — convert to hex first.
     const rawBg = extractBgColor(contentStyle);
-    const bgAttr = rawBg ? ` bgcolor="${toOutlookBgColor(rawBg)}"` : '';
+    const bgAttr = (0, common_1.buildOutlookBgAttr)(rawBg);
     if (shouldHideInOutlook) {
         return `
     <!--[if !mso]><!-->
@@ -34,13 +36,16 @@ function appendOutlookSupport(content, contentStyle, className, msoWidth) {
     <!--<![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 role="presentation" border="0" cellpadding="0" cellspacing="0" width="${msoWidth}" style="border-collapse:collapse;width:${msoWidth}px;"><tr><td width="${msoWidth}"${bgAttr} style="${contentStyle}">
 <![endif]-->
 <!--[if !mso]><!-->
-<table data-ebr-role="wrapper" role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" style="${buildStyles_1.tableCommonStyle}; max-width:600px;" class="${visibilityClass}"><tr><td width="100%"${bgAttr} style="${contentStyle}">
+<table data-ebr-role="wrapper" role="presentation" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" style="${buildStyles_1.tableCommonStyle}; max-width:600px;" class="${visibilityClass}"><tr><td width="100%"${bgAttr} style="${contentStyle}">
 <!--<![endif]-->
 ${content}
 <!--[if mso]></td></tr></table><![endif]-->
@@ -50,13 +55,15 @@ ${content}
     `;
     }
     return `
-  <table data-ebr-role="wrapper" role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" style="${buildStyles_1.tableCommonStyle}; max-width:600px;" class="${visibilityClass}"><tr><td width="100%"${bgAttr} style="${contentStyle}">${content}</td></tr></table>
+  <table data-ebr-role="wrapper" role="presentation" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" style="${buildStyles_1.tableCommonStyle}; max-width:600px;" class="${visibilityClass}"><tr><td width="100%"${bgAttr} style="${contentStyle}">${content}</td></tr></table>
   `;
 }
 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;
     }
@@ -80,12 +87,18 @@ async function appendOutlookForImage(content, outerContainerWidth, innerContaine
     const borderColor = style?.borderColor || "transparent";
     const borderRadius = parseInt(style?.borderRadius) || 0;
     const useRoundRect = borderRadius > 0;
-    const arcsize = useRoundRect ? Math.min(borderRadius / vmlHeight, 1).toFixed(2) : "";
+    const arcsize = useRoundRect
+        ? Math.min(borderRadius / vmlHeight, 1).toFixed(2)
+        : "";
     const borderAttributes = borderWidth > 0
         ? `strokeweight="${borderWidth}px" strokecolor="${borderColor}"`
         : `stroked="false"`;
+    // OUTLOOK FIX: For Outlook 2019+ (version 2512), VML type="frame" causes stretching
+    // Solution: Use simple IMG tag with fixed dimensions for Outlook, only use VML for border radius
     let outlookImage;
     if (useRoundRect && borderRadius > 0) {
+        // Use VML for border radius - wrap in table to constrain width for Old Outlook (Word engine)
+        // Use aspect="atmost" to prevent image from stretching beyond its bounds
         outlookImage = `<!--[if mso]>
   <table border="0" cellpadding="0" cellspacing="0" width="${vmlWidth}" style="width:${vmlWidth}px;">
     <tr>
@@ -104,7 +117,11 @@ async function appendOutlookForImage(content, outerContainerWidth, innerContaine
   <![endif]-->`;
     }
     else {
-        const borderStyleAttr = borderWidth > 0 ? `border: ${borderWidth}px solid ${borderColor};` : '';
+        // 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>

package/package.json

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