email-builder-utils 1.1.28 → 1.1.30

package/dist/types/Template.d.ts

@@ -31,6 +31,8 @@ interface IProps {
     youtubeVideoUrl?: string;
     thumbnailUrl?: string;
     shape?: string;
+    hideOnDesktop?: boolean;
+    hideOnMobile?: boolean;
 }
 interface IStyle {
     [key: string]: any;

package/dist/types/Template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Template.d.ts","sourceRoot":"","sources":["../../src/types/Template.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,YAAY;IAChB,KAAK,UAAU;IACf,QAAQ,WAAW;IACnB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAW,gBAAgB;IAC3B,KAAK,UAAU;IACf,KAAK,UAAU;IACf,QAAQ,aAAa;CACtB;AAED,oBAAY,UAAU;IACpB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAW,gBAAgB;CAC5B;AAED,UAAU,MAAM;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,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;CAChB;AAED,UAAU,MAAM;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,MAAM,EAAE,CAAC;KACvB,CAAC;CACH"}
+{"version":3,"file":"Template.d.ts","sourceRoot":"","sources":["../../src/types/Template.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,YAAY;IAChB,KAAK,UAAU;IACf,QAAQ,WAAW;IACnB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAW,gBAAgB;IAC3B,KAAK,UAAU;IACf,KAAK,UAAU;IACf,QAAQ,aAAa;CACtB;AAED,oBAAY,UAAU;IACpB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAW,gBAAgB;CAC5B;AAED,UAAU,MAAM;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,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,MAAM;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,MAAM,EAAE,CAAC;KACvB,CAAC;CACH"}

package/dist/utils/common.d.ts

@@ -1,3 +1,7 @@
 export declare const extractYouTubeId: (url: string) => string | null;
 export declare const extractVimeoId: (url: string) => string | null;
+export declare function getVisibilityClass(props?: {
+    hideOnDesktop?: boolean;
+    hideOnMobile?: boolean;
+}): 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"}
+{"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"}

package/dist/utils/common.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.extractVimeoId = exports.extractYouTubeId = void 0;
+exports.getVisibilityClass = getVisibilityClass;
 const extractYouTubeId = (url) => {
     try {
         const u = new URL(url);
@@ -31,3 +32,14 @@ const extractVimeoId = (url) => {
     return match ? match[1] : null;
 };
 exports.extractVimeoId = extractVimeoId;
+function getVisibilityClass(props) {
+    if (!props)
+        return "";
+    const { hideOnDesktop, hideOnMobile } = props;
+    return [
+        hideOnMobile ? "hide-mobile" : "",
+        hideOnDesktop ? "hide-desktop" : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+}

package/dist/utils/jsonToHTML.d.ts

@@ -12,6 +12,8 @@ interface BlockJsonProps {
     youtubeVideoUrl?: string;
     thumbnailUrl?: string;
     shape?: string;
+    hideOnDesktop?: boolean;
+    hideOnMobile?: boolean;
 }
 interface IBlockData {
     type: BlockType;

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

@@ -1 +1 @@
-{"version":3,"file":"jsonToHTML.d.ts","sourceRoot":"","sources":["../../src/utils/jsonToHTML.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAUrC,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;CAChB;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;AA2DhF,wBAAsB,aAAa,CACjC,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,GAAG,EACb,aAAa,EAAE,MAAM,mBAwBtB;AAobD,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBA8K5E"}
+{"version":3,"file":"jsonToHTML.d.ts","sourceRoot":"","sources":["../../src/utils/jsonToHTML.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAUrC,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;AA2DhF,wBAAsB,aAAa,CACjC,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,GAAG,EACb,aAAa,EAAE,MAAM,mBAwBtB;AAuiBD,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAyL5E"}

package/dist/utils/jsonToHTML.js

@@ -84,34 +84,67 @@ async function convertToHtml(blockData, rootData, cellWidthInPx) {
             return "";
     }
 }
-function appendOutlookSupport(content, contentStyle) {
+// 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) {
+    const visibilityClass = className || "";
+    const shouldHideInOutlook = visibilityClass.includes("hide-desktop");
+    if (shouldHideInOutlook) {
+        return `
+    <!--[if !mso]><!-->
+    <table width="100%" style="${exports.tableCommonStyle}" class="${visibilityClass}"><tr><td style="${contentStyle}">${content}</td></tr></table>
+    <!--<![endif]-->
+    `;
+    }
     return `
-  <table width="100%" style="${exports.tableCommonStyle}"><tr><td style="${contentStyle}">${content}</td></tr></table>
+  <table width="100%" style="${exports.tableCommonStyle}" class="${visibilityClass}"><tr><td style="${contentStyle}">${content}</td></tr></table>
   `;
 }
 function convertDividerBlockToHtml(blockData) {
-    const { style } = blockData.data;
-    const { thickness, dividerColor, ...rest } = style;
+    const { style, props } = blockData.data;
+    const { hideOnMobile, hideOnDesktop } = props;
+    const { thickness, dividerColor, width, ...rest } = style;
     const convertedStyle = buildStyles(rest, {
         perChanges: [],
         pxChanges: allPxAttributes,
     });
+    const dividerWidth = width || "100%";
+    // Build class name based on visibility
+    const visibilityClass = [
+        hideOnMobile ? "hide-mobile" : "",
+        hideOnDesktop ? "hide-desktop" : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
     const dividerContent = `
-    <table width="100%" cellpadding="0" cellspacing="0">
+    <table
+      width="${dividerWidth}%"
+      cellpadding="0"
+      cellspacing="0"
+    >
       <tr>
-        <td height="${thickness}" style="font-size:1px; line-height:1px; background:${dividerColor};">&nbsp;</td>
+        <td
+          height="${thickness}"
+          style="font-size:1px; line-height:1px; background:${dividerColor}; width:${dividerWidth};"
+        >
+          &nbsp;
+        </td>
       </tr>
     </table>
   `;
-    return appendOutlookSupport(dividerContent, convertedStyle);
+    return appendOutlookSupport(dividerContent, convertedStyle, visibilityClass);
 }
 function convertSpacerBlockToHtml(blockData) {
-    const { style } = blockData.data;
+    const { style, props } = blockData.data;
+    const visibilityClass = (0, common_1.getVisibilityClass)(props);
     const styles = buildStyles(style, {
         perChanges: [],
         pxChanges: allPxAttributes,
     });
-    return appendOutlookSupport(``, styles);
+    return appendOutlookSupport(``, styles, visibilityClass);
 }
 // function convertTextBlock(blockData: IBlockData) {
 //   const { style, props } = blockData.data;
@@ -131,6 +164,7 @@ function convertSpacerBlockToHtml(blockData) {
 // }
 function convertTextBlock(blockData) {
     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 textBoxStyle = {
         width,
@@ -158,9 +192,9 @@ function convertTextBlock(blockData) {
         .replaceAll(/<\/p>/g, "</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);
+    const textContent = appendOutlookSupport(convertedTextBox, styles, visibilityClass);
     return navigateToUrl
-        ? `<a href="${navigateToUrl}" rel="noreferrer noopener" style="color:inherit; text-decoration:none; cursor:pointer;">${textContent}</a>`
+        ? `<a href="${navigateToUrl}" rel="noreferrer noopener" style="color:inherit;text-decoration:none;cursor:pointer;">${textContent}</a>`
         : textContent;
 }
 async function appendOutlookForImage(content, outerContainerWidth, innerContainerWidth, imageUrl, style = {}) {
@@ -197,13 +231,20 @@ async function appendOutlookForImage(content, outerContainerWidth, innerContaine
     <!--<![endif]-->
   `;
 }
+async function computeScaledDimensions(imageUrl, maxContainerWidthPx) {
+    const image = await jimp_1.Jimp.read(imageUrl);
+    const originalWidth = image.bitmap.width;
+    const originalHeight = image.bitmap.height;
+    const widthScalingFactor = Math.min(maxContainerWidthPx / originalWidth, 1);
+    const scaledWidth = Math.round(originalWidth * widthScalingFactor);
+    const scaledHeight = Math.round(originalHeight * widthScalingFactor);
+    return { originalWidth, originalHeight, scaledWidth, scaledHeight };
+}
 async function convertImageBlock(blockData, cellWidthInPx) {
     const { style, props } = blockData.data;
     const { altText, imageUrl, navigateToUrl } = props;
+    const visibilityClass = (0, common_1.getVisibilityClass)(props);
     const { width, height, objectFit, borderRadius, borderWidth, borderColor, borderStyle, ...containerStyle } = style;
-    const image = await jimp_1.Jimp.read(imageUrl);
-    const originalWidth = image.bitmap.width;
-    const originalHeight = image.bitmap.height;
     // Ensure border styles are applied only to the container, not the image
     const imageStyle = {
         width,
@@ -212,27 +253,37 @@ async function convertImageBlock(blockData, cellWidthInPx) {
         borderStyle,
         borderRadius: borderRadius,
         borderColor,
-        maxWidth: `${originalWidth}px`, // Limit to original size
-        maxHeight: `${originalHeight}px`,
     };
     // Add border styles to container for fallback clients
     const containerStyles = buildStyles({
         ...containerStyle,
     }, { perChanges: [], pxChanges: addPxToAttributes });
-    const imageTagStyles = buildStyles(imageStyle, {
-        perChanges: addPxOrPerToAttributes,
-        pxChanges: addPxToAttributes,
-    });
-    const imageElement = `<img src="${imageUrl}" alt="${altText}" style="${imageTagStyles}; max-width: ${originalWidth}px; max-height: ${originalHeight}px;" />`;
-    const innerContainerWidth = ((typeof width === "string" ? parseInt(width.replace("%", "")) : width) /
+    const innerContainerWidth = (((typeof width === "string" ? parseInt(width.replace("%", "")) : width) ||
+        100) /
         100) *
         (cellWidthInPx -
             (style?.padding?.left || 0) -
             (style?.padding?.right || 0));
-    const outlookImage = await appendOutlookForImage(imageElement, cellWidthInPx, innerContainerWidth, imageUrl, style);
-    const imageContent = appendOutlookSupport(outlookImage, containerStyles);
+    const { originalWidth, originalHeight, scaledWidth, scaledHeight } = await computeScaledDimensions(imageUrl, innerContainerWidth);
+    const imageTagStyles = buildStyles({
+        maxWidth: `${originalWidth}px`, // Limit to original size
+        maxHeight: `${originalHeight}px`,
+        ...imageStyle,
+    }, {
+        perChanges: addPxOrPerToAttributes,
+        pxChanges: addPxToAttributes,
+    });
+    const imageElement = `<img src="${imageUrl}" alt="${altText}" width="${scaledWidth}" height="${scaledHeight}" style="${imageTagStyles}; width:100%; height:auto; max-width:${originalWidth}px; max-height:${originalHeight}px;" />`;
+    const percentWidth = typeof width === "string" && width.endsWith("%")
+        ? width
+        : typeof width === "number"
+            ? `${width}%`
+            : "100%";
+    const nonMsoWrapper = `<div style="display:inline-block; width:${percentWidth}; max-width:${originalWidth}px;">${imageElement}</div>`;
+    const outlookImage = await appendOutlookForImage(nonMsoWrapper, cellWidthInPx, innerContainerWidth, imageUrl, style);
+    const imageContent = appendOutlookSupport(outlookImage, containerStyles, visibilityClass);
     return navigateToUrl
-        ? `<a href="${navigateToUrl}" target="_blank" rel="noreferrer noopener"  style="display:block; text-decoration:none; cursor:pointer;">${imageContent}</a>`
+        ? `<a href="${navigateToUrl}" target="_blank" rel="noreferrer noopener" style="display:block;">${imageContent}</a>`
         : imageContent;
 }
 function appendOutlookForButton(content, buttonStyle, navigateToUrl, text) {
@@ -262,6 +313,7 @@ function appendOutlookForButton(content, buttonStyle, navigateToUrl, text) {
 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,
@@ -286,44 +338,71 @@ function convertButtonBlock(blockData) {
         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);
+    const buttonContent = appendOutlookSupport(appendOutlookForButton(buttonElement, style, navigateToUrl, text), convertedStyles, visibilityClass);
     return buttonContent;
 }
 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 gridVisibilityClass = (0, common_1.getVisibilityClass)(props);
     const tableStyles = buildStyles(restStyle, {
         perChanges: [],
         pxChanges: allPxAttributes,
     });
     const total = childrenIds.length;
     const visualRows = Math.ceil(total / columns);
+    // Fix: Calculate visible cells per row to adjust widths
     let html = `
   <!--[if mso]>
-  <table border="0" cellpadding="0" cellspacing="${columnGap}" width="100%" style="${exports.tableCommonStyle}border-collapse: separate;border-spacing:${columnGap}px;">
+  <table border="0" cellpadding="0" cellspacing="${columnGap}" width="100%" 
+    style="${exports.tableCommonStyle}border-collapse: separate;border-spacing:${columnGap}px;" class="${gridVisibilityClass}">
   <![endif]-->
-  <table border="0" cellpadding="0" cellspacing="${columnGap}" width="100%" role="presentation" style="${exports.tableCommonStyle} ${tableStyles}border-collapse: separate;border-spacing:${columnGap}px;">
+  <table border="0" cellpadding="0" cellspacing="${columnGap}" width="100%" role="presentation" 
+    style="${exports.tableCommonStyle} ${tableStyles}border-collapse: separate;border-spacing:${columnGap}px;" class="${gridVisibilityClass}">
   `;
     for (let r = 0; r < visualRows; r++) {
         html += "<tr>";
+        let visibleCellsInRow = 0;
+        const rowCellVisibility = [];
+        for (let c = 0; c < columns; c++) {
+            const idx = r * columns + c;
+            const childId = childrenIds[idx];
+            if (childId) {
+                const child = rootData[childId];
+                const { props: childProps = {} } = child.data || {};
+                const isVisible = !childProps.hideOnDesktop;
+                rowCellVisibility.push(isVisible);
+                if (isVisible)
+                    visibleCellsInRow++;
+            }
+            else {
+                rowCellVisibility.push(false);
+            }
+        }
+        const widthPerVisibleCell = visibleCellsInRow > 0 ? 100 / visibleCellsInRow : 100 / columns;
         for (let c = 0; c < columns; c++) {
             const idx = r * columns + c;
             const childId = childrenIds[idx];
-            const widthPercent = cellWidths[c] ?? 100 / columns;
+            const widthPercent = cellWidths[c] ?? widthPerVisibleCell;
             if (childId) {
                 const child = rootData[childId];
-                const { style: cellStyle = {} } = child.data || {};
+                const { style: cellStyle = {}, props: childProps = {} } = child.data || {};
                 const verticalAlign = cellStyle.verticalAlign || "top";
                 const { html: childHtml, styles } = await convertGridCellBlock(child, rootData, widthPercent, cellWidthInPx);
-                html += `
-   <td
-    width="${widthPercent}%"
-    ${responsive ? 'class="stack-column"' : ""}
-    style="vertical-align:${verticalAlign}; word-break:break-word; ${styles} "
-  >
-    ${childHtml}
-  </td>`;
+                const cellVisibilityClass = (0, common_1.getVisibilityClass)(childProps);
+                if (!childProps.hideOnDesktop) {
+                    html += `
+            <td
+              width="${widthPercent}%"
+              class="${[responsive ? "stack-column" : "", cellVisibilityClass]
+                        .filter(Boolean)
+                        .join(" ")}"
+              style="vertical-align:${verticalAlign}; word-break:break-word; ${styles}"
+            >
+              ${childHtml}
+            </td>`;
+                }
             }
             else {
                 html += `<td width="${widthPercent}%" ${responsive ? 'class="stack-column"' : ""} style=""></td>`;
@@ -335,7 +414,7 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
     return html;
 }
 async function convertGridCellBlock(blockData, rootData, cellWidthPercent, parentCellWidthPx) {
-    const { style = {}, childrenIds = [] } = blockData.data;
+    const { style = {}, childrenIds = [], props = {} } = blockData.data;
     const styles = buildStyles(style, {
         perChanges: [],
         pxChanges: allPxAttributes,
@@ -348,13 +427,17 @@ async function convertGridCellBlock(blockData, rootData, cellWidthPercent, paren
             innerHtmlParts.push(await convertToHtml(child, rootData, cellWidthPx));
         }
     }
+    const cellContent = innerHtmlParts.join("");
     return {
-        html: innerHtmlParts.join(""),
+        html: cellContent,
         styles,
     };
 }
+// Enhanced Video Block HTML Conversion with centered play button
 async function convertVideoBlock(blockData, cellWidthInPx) {
     const { style, props } = blockData.data;
+    const visibilityClass = (0, common_1.getVisibilityClass)(props);
+    const { hideOnDesktop } = props; // Get the hideOnDesktop prop
     const { videoUrl, youtubeVideoUrl, thumbnailUrl, altText } = props;
     const videoLink = youtubeVideoUrl || videoUrl || "#";
     let resolvedThumbnail = thumbnailUrl || "https://via.placeholder.com/480x360?text=No+Thumbnail";
@@ -386,10 +469,7 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
     else {
         percentWidth = "100%";
     }
-    const innerContainerWidth = (parseFloat(percentWidth) / 100) *
-        (cellWidthInPx -
-            (style?.padding?.left || 0) -
-            (style?.padding?.right || 0));
+    const innerContainerWidth = (parseFloat(percentWidth) / 100) * (cellWidthInPx - (style?.padding?.left || 0) - (style?.padding?.right || 0));
     const aspectRatio = 16 / 9;
     const calculatedHeight = innerContainerWidth / aspectRatio;
     const outerContainerStyles = buildStyles({
@@ -412,77 +492,99 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
     // VML centering math (for Outlook)
     const vmlLeft = innerContainerWidth / 2 - playIconWidth / 2;
     const vmlTop = calculatedHeight / 2 - playIconHeight / 2;
-    const videoContent = `
-  <!--[if mso]>
-  <v:group xmlns:v="urn:schemas-microsoft-com:vml"
-    coordsize="${innerContainerWidth},${calculatedHeight}"
-    href="${videoLink}"
-    style="width:${innerContainerWidth}px;height:${calculatedHeight}px;">
-    <v:rect fill="t"  style="position:absolute;width:${innerContainerWidth}px;height:${calculatedHeight}px; stroked="t"
-    strokeweight="${borderWidth}px"
-    strokecolor="${borderColor}"
-    ${borderRadius > 0
-        ? `arcsize="${Math.min(borderRadius / calculatedHeight, 1).toFixed(2)}"`
-        : ""}
+    const shouldHideInOutlook = hideOnDesktop;
+    const outlookVideoContent = shouldHideInOutlook
+        ? `<!--[if !mso]><!-->
+       <v:group xmlns:v="urn:schemas-microsoft-com:vml"
+         coordsize="${innerContainerWidth},${calculatedHeight}"
+         href="${videoLink}"
+         style="width:${innerContainerWidth}px;height:${calculatedHeight}px;">
+         <v:rect fill="t" style="position:absolute;width:${innerContainerWidth}px;height:${calculatedHeight}px; stroked="t"
+           strokeweight="${borderWidth}px"
+           strokecolor="${borderColor}"
+           ${borderRadius > 0 ? `arcsize="${Math.min(borderRadius / calculatedHeight, 1).toFixed(2)}"` : ""}
+         >
+           <v:fill src="${resolvedThumbnail}" type="frame" color="${style?.backgroundColor || "#FFFFFF"}"/>
+         </v:rect>
+         <v:shape type="#_x0000_t75"
+           style="position:absolute;
+                  left:${vmlLeft.toFixed(1)}px;
+                  top:${vmlTop.toFixed(1)}px;
+                  width:${playIconWidth}px;
+                  height:${playIconHeight}px;"
+           alt="Play" href="${videoLink}" title="${altText || "Video"}"
+           stroked="f" filled="t">
+           <v:imagedata src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png" />
+         </v:shape>
+       </v:group>
+       <!--<![endif]-->`
+        : `<!--[if mso]>
+       <v:group xmlns:v="urn:schemas-microsoft-com:vml"
+         coordsize="${innerContainerWidth},${calculatedHeight}"
+         href="${videoLink}"
+         style="width:${innerContainerWidth}px;height:${calculatedHeight}px;">
+         <v:rect fill="t" style="position:absolute;width:${innerContainerWidth}px;height:${calculatedHeight}px; stroked="t"
+           strokeweight="${borderWidth}px"
+           strokecolor="${borderColor}"
+           ${borderRadius > 0 ? `arcsize="${Math.min(borderRadius / calculatedHeight, 1).toFixed(2)}"` : ""}
+         >
+           <v:fill src="${resolvedThumbnail}" type="frame" color="${style?.backgroundColor || "#FFFFFF"}"/>
+         </v:rect>
+         <v:shape type="#_x0000_t75"
+           style="position:absolute;
+                  left:${vmlLeft.toFixed(1)}px;
+                  top:${vmlTop.toFixed(1)}px;
+                  width:${playIconWidth}px;
+                  height:${playIconHeight}px;"
+           alt="Play" href="${videoLink}" title="${altText || "Video"}"
+           stroked="f" filled="t">
+           <v:imagedata src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png" />
+         </v:shape>
+       </v:group>
+       <![endif]-->`;
+    const nonOutlookVideoContent = `<!--[if !mso]><!-->
+    <table
+      width="${innerContainerWidth}"
+      cellpadding="0"
+      cellspacing="0"
+      border="0"
+      role="presentation"
+      align="${style?.textAlign || "left"}"
+      style="
+        max-width: ${innerContainerWidth}px;
+        width: 100%;
+        height: ${calculatedHeight}px;
+        background-color: ${style?.backgroundColor || "#FFFFFF"};
+        background-image: url('${resolvedThumbnail}');
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+        box-sizing: border-box;
+        border: ${borderWidth}px ${style?.borderStyle || "solid"} ${borderColor};
+        border-radius: ${borderRadius}px;
+      "
     >
-      <v:fill src="${resolvedThumbnail}" type="frame" color="${style?.backgroundColor || "#FFFFFF"}"/>
-    </v:rect>
-    <v:shape type="#_x0000_t75"
-      style="position:absolute;
-             left:${vmlLeft.toFixed(1)}px;
-             top:${vmlTop.toFixed(1)}px;
-             width:${playIconWidth}px;
-             height:${playIconHeight}px;"
-      alt="Play" href="${videoLink}" title="${altText || "Video"}"
-      stroked="f" filled="t">
-      <v:imagedata src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png" />
-    </v:shape>
-  </v:group>
-  <![endif]-->
-
-  <!--[if !mso]><!-->
-  <table
-    width="${innerContainerWidth}"
-    cellpadding="0"
-    cellspacing="0"
-    border="0"
-    role="presentation"
-    align="${style?.textAlign || "left"}"
-    style="
-      max-width: ${innerContainerWidth}px;
-      width: 100%;
-      height: ${calculatedHeight}px;
-      background-color: ${style?.backgroundColor || "#FFFFFF"};
-      background-image: url('${resolvedThumbnail}');
-      background-size: cover;
-      background-position: center;
-      background-repeat: no-repeat;
-      box-sizing: border-box;
-      border: ${borderWidth}px ${style?.borderStyle || "solid"} ${borderColor};
-      border-radius: ${borderRadius}px;
-    "
-  >
-    <tr>
-      <td style="padding: 0; height: ${calculatedHeight}px; text-align: center; vertical-align: middle;" valign="middle">
-        <a href="${videoLink}" target="_blank" style="display:inline-block; border: 0; outline: none; text-decoration: none;">
-          <img
-            src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png"
-            width="${playIconWidth}"
-            alt="Play"
-            style="display: block;
-            border: 0;
-              outline: none;
-              text-decoration: none;
-              height: auto;"
-          />
-        </a>
-      </td>
-    </tr>
-  </table>
-  <!--<![endif]-->
-`;
+      <tr>
+        <td style="padding: 0; height: ${calculatedHeight}px; text-align: center; vertical-align: middle;" valign="middle">
+          <a href="${videoLink}" target="_blank" style="display:inline-block; border: 0; outline: none; text-decoration: none;">
+            <img
+              src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png"
+              width="${playIconWidth}"
+              alt="Play"
+              style="display: block;
+              border: 0;
+                outline: none;
+                text-decoration: none;
+                height: auto;"
+            />
+          </a>
+        </td>
+      </tr>
+    </table>
+    <!--<![endif]-->`;
+    const videoContent = `${outlookVideoContent}${nonOutlookVideoContent}`;
     const wrapperHtml = `
-  <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin:0; padding:0; border-collapse: collapse;">
+  <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin:0; padding:0; border-collapse: collapse;" class="${visibilityClass}">
     <tr>
       <td align="${style?.textAlign || "left"}" style="padding:0; ${outerContainerStyles}">
         <table border="0" cellpadding="0" cellspacing="0" role="presentation" 
@@ -522,10 +624,158 @@ function computeArcSize(borderRadius, widthPx) {
     return Math.min(px / widthPx, 1).toFixed(2);
 }
 // ---------- Updated convertShapeBlock function ----------
+// async function convertShapeBlock(blockData: IBlockData) {
+//   const { style, props } = blockData.data;
+//   const { shape, text, imageUrl } = props as any;
+//   const {
+//     width = "100",
+//     height = "150",
+//     padding = {},
+//     backgroundColor = "#2F80ED",
+//     borderRadius,
+//     borderWidth = 0,
+//     borderStyle = "solid",
+//     borderColor = "transparent",
+//     customCss,
+//     shapeColor,
+//     alignment = "left",
+//     msoBakeImageWithText,
+//     color = "#000000",
+//     fontSize = 14,
+//     verticalAlign = "center",
+//   } = style || {};
+//   const borderRadiusMap: Record<string, string> = {
+//     rectangle: "0",
+//     rounded: "10px",
+//     circle: "50%",
+//     oval: "50%",
+//   };
+//   let resolvedBorderRadius = borderRadius || borderRadiusMap[shape] || "0";
+//   let resolvedWidthPx =
+//     typeof width === "number"
+//       ? width
+//       : parseInt(width.toString().replace("px", ""), 10) || 100;
+//   let resolvedHeightPx =
+//     typeof height === "number"
+//       ? height
+//       : parseInt(height.toString().replace("px", ""), 10) || 150;
+//   // --- Shape specific constraints ---
+//   if (shape === "circle") {
+//     const side = Math.min(resolvedWidthPx, resolvedHeightPx);
+//     resolvedWidthPx = side;
+//     resolvedHeightPx = side;
+//     resolvedBorderRadius = "50%";
+//   } else if (shape === "oval") {
+//     resolvedBorderRadius = "50% / 50%";
+//   }
+//   const finalBackgroundColor = shapeColor || backgroundColor;
+//   const alignmentStyles = {
+//     left: "margin-right:auto;margin-left:0;",
+//     center: "margin-left:auto;margin-right:auto;",
+//     right: "margin-left:auto;margin-right:0;",
+//   };
+//   const alignmentStyle =
+//     alignmentStyles[alignment as keyof typeof alignmentStyles] || "";
+//   const verticalAlignStyles = {
+//     top: "align-items:flex-start;padding-top:8px;",
+//     center: "align-items:center;",
+//     bottom: "align-items:flex-end;padding-bottom:8px;",
+//   };
+//   const verticalAlignStyle =
+//     verticalAlignStyles[verticalAlign as keyof typeof verticalAlignStyles] ||
+//     verticalAlignStyles.center;
+//   // Text styling (safe across clients)
+//   const textSizeStyle = `font-size:${fontSize}px;line-height:1.3;word-break:break-word;overflow-wrap:break-word;text-align:center;color:${color};`;
+//   // ============================
+//   // Modern HTML (non-MSO)
+//   // ============================
+//   let nonMsoContent = "";
+//   if (imageUrl && text) {
+//     nonMsoContent = `
+// <div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
+//   border:${borderWidth}px ${borderStyle} ${borderColor};
+//   border-radius:${resolvedBorderRadius};
+//   background:${finalBackgroundColor} url('${imageUrl}') center/cover no-repeat;
+//   overflow:hidden;${alignmentStyle}${customCss || ""}">
+//   <div style="width:100%;height:100%;display:flex;${verticalAlignStyle}justify-content:center;overflow:hidden;">
+//     <div style="${textSizeStyle}padding:6px;max-width:90%;-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;">
+//       ${text}
+//     </div>
+//   </div>
+// </div>`;
+//   } else if (imageUrl) {
+//     nonMsoContent = `
+// <div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
+//   border:${borderWidth}px ${borderStyle} ${borderColor};
+//   border-radius:${resolvedBorderRadius};
+//   overflow:hidden;${alignmentStyle}${customCss || ""}">
+//   <img src="${imageUrl}" alt="${text || "shape image"}"
+//     width="${resolvedWidthPx}" height="${resolvedHeightPx}"
+//     style="width:100%;height:100%;object-fit:cover;border-radius:${resolvedBorderRadius};display:block;" />
+// </div>`;
+//   } else {
+//     const circlePadding =
+//       shape === "circle" ? Math.round(resolvedHeightPx * 0.15) : 8;
+//     nonMsoContent = `
+// <div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
+//   background:${finalBackgroundColor};
+//   border:${borderWidth}px ${borderStyle} ${borderColor};
+//   border-radius:${resolvedBorderRadius};
+//   overflow:hidden;${alignmentStyle}${customCss || ""}">
+//   <div style="width:100%;height:100%;display:flex;${verticalAlignStyle}justify-content:center;padding:${circlePadding}px;box-sizing:border-box;">
+//     <div style="${textSizeStyle}max-width:90%;overflow:hidden;">
+//       ${text || ""}
+//     </div>
+//   </div>
+// </div>`;
+//   }
+//   // ============================
+//   // Outlook (VML) version
+//   // ============================
+//   const outlookContent = await appendOutlookForShape(
+//     nonMsoContent,
+//     resolvedWidthPx,
+//     resolvedWidthPx,
+//     {
+//       shape,
+//       imageUrl,
+//       backgroundColor,
+//       shapeColor,
+//       borderWidth,
+//       borderColor,
+//       borderRadius: resolvedBorderRadius,
+//       heightPx: resolvedHeightPx,
+//       text,
+//       textColor: color,
+//       textSize: fontSize,
+//       verticalAlign,
+//       alignment,
+//       padding,
+//       msoBakeImageWithText,
+//     }
+//   );
+//   // ============================
+//   // Final combined block
+//   // ============================
+//   return `
+// <table width="100%" style="border-collapse:collapse;table-layout:fixed;">
+//   <tr>
+//     <td style="padding:${padding.top || 0}px ${padding.right || 0}px ${
+//     padding.bottom || 0
+//   }px ${padding.left || 0}px;text-align:${alignment};">
+//       ${outlookContent}
+//       <!--[if !mso]><!-->
+//       ${nonMsoContent}
+//       <!--<![endif]-->
+//     </td>
+//   </tr>
+// </table>`;
+// }
 async function convertShapeBlock(blockData) {
     const { style, props } = blockData.data;
     const { shape, text, imageUrl } = props;
-    const { width = "100", height = "150", padding = {}, backgroundColor = "#2F80ED", borderRadius, borderWidth = 0, borderStyle = "solid", borderColor = "transparent", customCss, shapeColor, alignment = "left", msoBakeImageWithText, color = "#000000", fontSize = 14, verticalAlign = "center", } = style || {};
+    const visibilityClass = (0, common_1.getVisibilityClass)(props);
+    const { width = "100", height = "150", padding = {}, backgroundColor = "#2F80ED", borderRadius, borderWidth = 0, borderStyle = "solid", borderColor = "transparent", customCss, shapeColor, alignment = "left", msoBakeImageWithText, color = "#000000", fontSize = 14, textAlign = "center", verticalAlign = "middle", } = style || {};
     const borderRadiusMap = {
         rectangle: "0",
         rounded: "10px",
@@ -539,7 +789,7 @@ async function convertShapeBlock(blockData) {
     let resolvedHeightPx = typeof height === "number"
         ? height
         : parseInt(height.toString().replace("px", ""), 10) || 150;
-    // --- Shape specific constraints ---
+    // --- Shape-specific constraints ---
     if (shape === "circle") {
         const side = Math.min(resolvedWidthPx, resolvedHeightPx);
         resolvedWidthPx = side;
@@ -550,25 +800,38 @@ async function convertShapeBlock(blockData) {
         resolvedBorderRadius = "50% / 50%";
     }
     const finalBackgroundColor = shapeColor || backgroundColor;
+    // --- Horizontal alignment for outer container ---
     const alignmentStyles = {
         left: "margin-right:auto;margin-left:0;",
         center: "margin-left:auto;margin-right:auto;",
         right: "margin-left:auto;margin-right:0;",
     };
     const alignmentStyle = alignmentStyles[alignment] || "";
-    const verticalAlignStyles = {
-        top: "align-items:flex-start;padding-top:8px;",
-        center: "align-items:center;",
-        bottom: "align-items:flex-end;padding-bottom:8px;",
+    // --- Text + vertical alignment maps ---
+    const textAlignMap = {
+        left: "left",
+        center: "center",
+        right: "right",
+        justify: "justify",
     };
-    const verticalAlignStyle = verticalAlignStyles[verticalAlign] ||
-        verticalAlignStyles.center;
-    // Text styling (safe across clients)
-    const textSizeStyle = `font-size:${fontSize}px;line-height:1.3;word-break:break-word;overflow-wrap:break-word;text-align:center;color:${color};`;
+    const textAlignStyle = textAlignMap[textAlign] || "center";
+    const flexJustify = textAlign === "left"
+        ? "flex-start"
+        : textAlign === "right"
+            ? "flex-end"
+            : "center";
+    const flexAlign = verticalAlign === "top"
+        ? "flex-start"
+        : verticalAlign === "bottom"
+            ? "flex-end"
+            : "center";
+    // --- Text styling ---
+    const textSizeStyle = `font-size:${fontSize}px;line-height:1.3;word-break:break-word;overflow-wrap:break-word;color:${color};`;
     // ============================
     // Modern HTML (non-MSO)
     // ============================
     let nonMsoContent = "";
+    // --- Case 1: Image + Text ---
     if (imageUrl && text) {
         nonMsoContent = `
 <div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
@@ -576,13 +839,14 @@ async function convertShapeBlock(blockData) {
   border-radius:${resolvedBorderRadius};
   background:${finalBackgroundColor} url('${imageUrl}') center/cover no-repeat;
   overflow:hidden;${alignmentStyle}${customCss || ""}">
-  <div style="width:100%;height:100%;display:flex;${verticalAlignStyle}justify-content:center;overflow:hidden;">
-    <div style="${textSizeStyle}padding:6px;max-width:90%;-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;">
+  <div style="width:100%;height:100%;display:flex;justify-content:${flexJustify};align-items:${flexAlign};overflow:hidden;padding:6px;box-sizing:border-box;">
+    <div style="${textSizeStyle}text-align:${textAlignStyle};max-width:90%;overflow:hidden;">
       ${text}
     </div>
   </div>
 </div>`;
     }
+    // --- Case 2: Image only ---
     else if (imageUrl) {
         nonMsoContent = `
 <div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
@@ -594,24 +858,22 @@ async function convertShapeBlock(blockData) {
     style="width:100%;height:100%;object-fit:cover;border-radius:${resolvedBorderRadius};display:block;" />
 </div>`;
     }
+    // --- Case 3: Text only ---
     else {
-        const circlePadding = shape === "circle" ? Math.round(resolvedHeightPx * 0.15) : 8;
         nonMsoContent = `
 <div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
   background:${finalBackgroundColor};
   border:${borderWidth}px ${borderStyle} ${borderColor};
   border-radius:${resolvedBorderRadius};
   overflow:hidden;${alignmentStyle}${customCss || ""}">
-  <div style="width:100%;height:100%;display:flex;${verticalAlignStyle}justify-content:center;padding:${circlePadding}px;box-sizing:border-box;">
-    <div style="${textSizeStyle}max-width:90%;overflow:hidden;">
+  <div style="width:100%;height:100%;display:flex;justify-content:${flexJustify};align-items:${flexAlign};padding:8px;box-sizing:border-box;">
+    <div style="${textSizeStyle}text-align:${textAlignStyle};max-width:90%;overflow:hidden;">
       ${text || ""}
     </div>
   </div>
 </div>`;
     }
-    // ============================
-    // Outlook (VML) version
-    // ============================
+    // Outlook (VML) fallback
     const outlookContent = await appendOutlookForShape(nonMsoContent, resolvedWidthPx, resolvedWidthPx, {
         shape,
         imageUrl,
@@ -625,15 +887,14 @@ async function convertShapeBlock(blockData) {
         textColor: color,
         textSize: fontSize,
         verticalAlign,
+        textAlign, // ✅ added
         alignment,
         padding,
         msoBakeImageWithText,
-    });
-    // ============================
-    // Final combined block
-    // ============================
+    }, visibilityClass);
+    // Combine into table wrapper
     return `
-<table width="100%" style="border-collapse:collapse;table-layout:fixed;">
+<table width="100%" style="border-collapse:collapse;table-layout:fixed;" class="${visibilityClass}">
   <tr>
     <td style="padding:${padding.top || 0}px ${padding.right || 0}px ${padding.bottom || 0}px ${padding.left || 0}px;text-align:${alignment};">
       ${outlookContent}
@@ -644,15 +905,14 @@ async function convertShapeBlock(blockData) {
   </tr>
 </table>`;
 }
-// ---------- Updated VML builder with better text containment ----------
-function buildVMLShape({ shape, widthPx, heightPx, imageUrl, backgroundColor, borderWidth, borderColor, borderRadius, text, textColor = "#000000", textSize = 14, verticalAlign = "center", msoHasBakedText = false, }) {
-    // --- Basic setup ---
+// ---------- Updated VML builder ----------
+function buildVMLShape({ shape, widthPx, heightPx, imageUrl, backgroundColor, borderWidth, borderColor, borderRadius, text, textColor = "#000000", textSize = 14, verticalAlign = "middle", textAlign = "center", msoHasBakedText = false, }) {
     const bw = borderWidth || 0;
     const bc = borderColor || "transparent";
     const borderAttrs = bw > 0 ? `strokeweight="${bw}px" strokecolor="${bc}"` : `stroked="false"`;
     const fillColor = backgroundColor || "#2F80ED";
+    // Use frame for img fill so sizing is preserved
     const fillMarkup = `<v:fill ${imageUrl ? `src="${imageUrl}" type="frame" aspect="atleast"` : ""} color="${fillColor}" />`;
-    // --- Shape tag ---
     let tag = "rect";
     let extraAttr = "";
     if (shape === "circle" || shape === "oval") {
@@ -662,15 +922,22 @@ function buildVMLShape({ shape, widthPx, heightPx, imageUrl, backgroundColor, bo
         tag = "roundrect";
         extraAttr = `arcsize="${computeArcSize(borderRadius, widthPx)}"`;
     }
-    // --- Text alignment ---
-    const vAlignMap = { top: "top", center: "middle", bottom: "bottom" };
+    // maps for vml
+    const vAlignMap = { top: "top", middle: "middle", bottom: "bottom" };
+    const hAlignMap = {
+        left: "left",
+        center: "center",
+        right: "right",
+        justify: "left",
+    }; // justify -> left fallback in VML
     const vAlign = vAlignMap[verticalAlign] || "middle";
-    const safeFontSize = Math.max(textSize, 10);
-    // --- Text inside shape ---
+    const hAlign = hAlignMap[textAlign] || "center";
+    const safeFontSize = Math.max(Math.round(textSize), 10);
+    // Build the textbox with table/cell for reliable vertical centering in Outlook
     const textboxMarkup = text && !msoHasBakedText
         ? `<v:textbox inset="6pt,6pt,6pt,6pt" style="mso-fit-shape-to-text:false;">
            <div style="display:table;width:100%;height:100%;">
-             <div style="display:table-cell;vertical-align:${vAlign};text-align:center;">
+             <div style="display:table-cell;vertical-align:${vAlign};text-align:${hAlign};padding:0 6px;">
                <div style="color:${textColor};font-family:Arial, sans-serif;font-size:${safeFontSize}px;line-height:1.3;word-wrap:break-word;">
                  ${text}
                </div>
@@ -678,20 +945,17 @@ function buildVMLShape({ shape, widthPx, heightPx, imageUrl, backgroundColor, bo
            </div>
          </v:textbox>`
         : `<v:textbox inset="0,0,0,0"><div style="display:none;">.</div></v:textbox>`;
-    // --- Final shape markup ---
+    // Return VML shape
     return `
 <v:${tag} xmlns:v="urn:schemas-microsoft-com:vml"
-  style="width:${widthPx}px;height:${heightPx}px;
-         mso-position-horizontal:center;
-         mso-position-vertical:center;"
+  style="width:${widthPx}px;height:${heightPx}px;display:inline-block;"
   ${borderAttrs}
   fill="true" fillcolor="${fillColor}"${extraAttr}>
   ${fillMarkup}
   ${textboxMarkup}
 </v:${tag}>`;
 }
-// ---------- Updated appendOutlookForShape ----------
-async function appendOutlookForShape(content, outerContainerWidth, innerContainerWidth, opts) {
+function appendOutlookForShape(content, outerContainerWidth, innerContainerWidth, opts, visibilityClass) {
     const widthPx = Math.round(Math.min(outerContainerWidth, innerContainerWidth));
     const heightPx = Math.max(1, Math.round(opts.heightPx));
     const vml = buildVMLShape({
@@ -706,14 +970,31 @@ async function appendOutlookForShape(content, outerContainerWidth, innerContaine
         text: opts.text,
         textColor: opts.textColor,
         textSize: opts.textSize,
+        verticalAlign: opts.verticalAlign,
+        textAlign: opts.textAlign,
         msoHasBakedText: Boolean(opts.msoBakeImageWithText),
     });
     const pad = opts.padding || {};
     const align = opts.alignment || "left";
     const valign = opts.verticalAlign || "middle";
+    const shouldHideInOutlook = visibilityClass.includes("hide-desktop");
+    // Fix: Properly handle Outlook visibility with conditional comments
+    if (shouldHideInOutlook) {
+        return `<!--[if !mso]><!-->
+    <table align="${align}" border="0" cellpadding="0" cellspacing="0"
+           style="width:${widthPx}px;height:${heightPx}px;border-collapse:collapse;" class="${visibilityClass}">
+      <tr>
+        <td valign="${valign}"
+            style="padding:${pad.top || 0}px ${pad.right || 0}px ${pad.bottom || 0}px ${pad.left || 0}px;">
+          ${vml}
+        </td>
+      </tr>
+    </table>
+    <!--<![endif]-->`;
+    }
     return `<!--[if mso]>
   <table align="${align}" border="0" cellpadding="0" cellspacing="0"
-         style="width:${widthPx}px;height:${heightPx}px;">
+         style="width:${widthPx}px;height:${heightPx}px;border-collapse:collapse;" class="${visibilityClass}">
     <tr>
       <td valign="${valign}"
           style="padding:${pad.top || 0}px ${pad.right || 0}px ${pad.bottom || 0}px ${pad.left || 0}px;">
@@ -721,11 +1002,12 @@ async function appendOutlookForShape(content, outerContainerWidth, innerContaine
       </td>
     </tr>
   </table>
-  <![endif]-->`;
+<![endif]-->`;
 }
 function convertVerticalDividerBlockToHtml(blockData) {
-    const { style } = blockData.data;
+    const { style, props } = blockData.data;
     const { width, height, dividerColor, ...rest } = style;
+    const visibilityClass = (0, common_1.getVisibilityClass)(props);
     // Convert other styles to inline-safe HTML attributes
     const convertedStyle = buildStyles(rest, {
         perChanges: [],
@@ -746,5 +1028,5 @@ function convertVerticalDividerBlockToHtml(blockData) {
       </tr>
     </table>
   `;
-    return appendOutlookSupport(dividerContent, convertedStyle);
+    return appendOutlookSupport(dividerContent, convertedStyle, visibilityClass);
 }

package/package.json

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