@pagenflow/email 1.4.7 → 1.4.8

package/dist/index.esm.js

@@ -1531,6 +1531,57 @@ function arePropsEqual(prevProps, nextProps) {
     return isEqual(prevProps, nextProps);
 }
 
+/**
+ * bindingAttribute.ts
+ * -------------------
+ * Serialises DataBindings into discrete HTML attributes:
+ *
+ *  data-bind-if    → visible condition     → stamped on the root element
+ *  data-bind-list  → repeater (dataList + itemAlias) → stamped on the
+ *                    direct parent of the children loop, NOT the root
+ *  data-bind       → propertyMap           → stamped on the root element
+ *
+ * Keeping the three concerns in separate attributes lets the post-processor
+ * handle them independently without ambiguity.
+ */
+// ─── Root element props (visible + propertyMap) ───────────────────────────────
+/**
+ * Props to spread onto the component's root element.
+ * Carries `data-bind-if` and/or `data-bind` (propertyMap).
+ */
+function rootBindingProps(bindings) {
+    if (!bindings)
+        return {};
+    const props = {};
+    if (bindings.visible) {
+        props['data-bind-if'] = bindings.visible;
+    }
+    if (bindings.propertyMap && Object.keys(bindings.propertyMap).length) {
+        props['data-bind'] = JSON.stringify({ propertyMap: bindings.propertyMap });
+    }
+    return props;
+}
+// ─── List wrapper props (dataList + itemAlias) ────────────────────────────────
+/**
+ * Props to spread onto the *direct parent* of the children loop.
+ * Carries `data-bind-list` only when a repeater is defined.
+ *
+ * Usage inside a component:
+ *   <tbody {...listBindingProps(bindings)}>
+ *     {children}
+ *   </tbody>
+ */
+function listBindingProps(bindings) {
+    if (!(bindings === null || bindings === void 0 ? void 0 : bindings.dataList))
+        return {};
+    return {
+        'data-bind-list': JSON.stringify({
+            dataList: bindings.dataList,
+            ...(bindings.itemAlias && { itemAlias: bindings.itemAlias }),
+        }),
+    };
+}
+
 // Map alignment to HTML 'align' attribute
 const justifyMap$3 = {
     start: "left",
@@ -1538,7 +1589,7 @@ const justifyMap$3 = {
     end: "right",
 };
 // Helper to build link href based on innerLink type (mirrors Icon component)
-function buildLinkHref$2(innerLink) {
+function buildLinkHref$4(innerLink) {
     if (!innerLink || innerLink.type === "none")
         return null;
     switch (innerLink.type) {
@@ -1592,10 +1643,10 @@ function getBorderStyleString$2(border) {
     }
     return styles.join(" ");
 }
-function Button({ config, devMode }) {
+function Button({ config, devMode, bindings }) {
     const { innerLink, children, backgroundColor, color, padding, borderRadius, border, width, maxWidth, justifyContent, textAlign, fontSize, fontWeight, fontStyle, fontFamily, lineHeight, letterSpacing, textTransform, textDecoration, direction, verticalAlign, opacity, whiteSpace, wordBreak, } = config;
     // Resolve href from innerLink
-    const href = buildLinkHref$2(innerLink);
+    const href = buildLinkHref$4(innerLink);
     const target = (innerLink === null || innerLink === void 0 ? void 0 : innerLink.target) || "_blank";
     // Sanitize fontFamily early so safeFontFamily is available for all paths below.
     const safeFontFamily = fontFamily
@@ -1679,7 +1730,7 @@ function Button({ config, devMode }) {
         .join(" ");
     return (
     // Wrapper table for alignment - maintains proper positioning for hover indicators
-    jsx("table", { role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
+    jsx("table", { role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, ...rootBindingProps(bindings), style: {
             width: "100%",
             borderCollapse: "collapse",
             boxSizing: "border-box",
@@ -1787,7 +1838,7 @@ function getBorderStyle$5(border) {
     }
     return style;
 }
-function Column({ children, config, devNode }) {
+function Column({ children, config, devNode, bindings }) {
     var _a, _b, _c;
     // Process children array for gap support
     const childrenArray = (Array.isArray(children) ? children : [children]).filter((child) => child != null);
@@ -1839,6 +1890,7 @@ function Column({ children, config, devNode }) {
         // treat it as content-box height and add padding on top, causing the
         // total to exceed the declared height in preview mode.
         verticalAlign: config.alignItems ? alignMap$2[config.alignItems] : "top",
+        background: "transparent",
     };
     // 4. Gap spacer style (used between children)
     const gapSpacerStyle = {
@@ -1846,6 +1898,7 @@ function Column({ children, config, devNode }) {
         lineHeight: "1px",
         fontSize: "1px",
         width: "100%",
+        background: "transparent",
     };
     // 5. maxWidth constraining table style (modern clients).
     //    The `width` HTML attribute on this table is what Outlook Classic
@@ -1860,10 +1913,10 @@ function Column({ children, config, devNode }) {
         borderCollapse: "collapse",
     };
     // Main content rendering
-    const renderContent = () => (jsx("table", { "aria-label": "Column Padding", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: innerTableStyle, children: jsx("tbody", { children: jsx("tr", { children: jsx("td", { style: innerTdStyle, valign: config.justifyContent ? vAlignMap[config.justifyContent] : "top", align: config.alignItems ? alignMap$2[config.alignItems] : "left", children: config.gap && numChildren > 1 ? (jsx("table", { "aria-label": "Column Gap Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
+    const renderContent = () => (jsx("table", { "aria-label": "Column Padding", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: innerTableStyle, children: jsx("tbody", { children: jsx("tr", { children: jsx("td", { style: innerTdStyle, valign: config.justifyContent ? vAlignMap[config.justifyContent] : "top", align: config.alignItems ? alignMap$2[config.alignItems] : "left", ...(numChildren > 1 ? {} : listBindingProps(bindings)), children: numChildren > 1 ? (jsx("table", { "aria-label": "Column Gap Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
                             width: "100%",
                             borderCollapse: "collapse",
-                        }, children: jsx("tbody", { children: childrenArray.map((child, index) => (jsxs(Fragment, { children: [jsx("tr", { children: jsx("td", { style: {
+                        }, children: jsx("tbody", { ...listBindingProps(bindings), children: childrenArray.map((child, index) => (jsxs(Fragment, { children: [jsx("tr", { children: jsx("td", { style: {
                                                 verticalAlign: config.alignItems
                                                     ? alignMap$2[config.alignItems]
                                                     : "top",
@@ -1872,7 +1925,7 @@ function Column({ children, config, devNode }) {
                                                 : "top", align: config.alignItems
                                                 ? alignMap$2[config.alignItems]
                                                 : "left", children: child }) }), index < numChildren - 1 && (jsx("tr", { children: jsx("td", { style: gapSpacerStyle, children: "\u00A0" }) }))] }, `col-child-${index}`))) }) })) : (children) }) }) }) }));
-    return (jsxs("table", { "aria-label": "Column Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
+    return (jsxs("table", { "aria-label": "Column Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, ...rootBindingProps(bindings), style: {
             position: "relative",
             ...outerTableStyle,
         }, ...(config.height && { height: config.height }), children: [jsx("tbody", { children: jsx("tr", { children: jsx("td", { style: outerTdStyle, ...(config.width && { width: config.width }), ...(config.height && { height: config.height }), children: config.maxWidth ? (
@@ -1941,7 +1994,7 @@ function getBorderStyle$4(border) {
     }
     return style;
 }
-function Container({ children, config, devMode, devNode }) {
+function Container({ children, config, bindings, devMode, devNode, }) {
     var _a, _b, _c;
     const { widthType, childrenConstraints } = config;
     const childrenArray = (Array.isArray(children) ? children : [children]).filter((child) => child != null);
@@ -1959,7 +2012,7 @@ function Container({ children, config, devMode, devNode }) {
         return 0;
     })();
     const getChildWidths = (() => {
-        const { widthDistributionType } = childrenConstraints;
+        const { widthDistributionType } = childrenConstraints !== null && childrenConstraints !== void 0 ? childrenConstraints : {};
         const totalGapSpace = gapWidthPx * (numChildren > 1 ? numChildren - 1 : 0);
         const remainingContentSpace = containerWidthPx - totalGapSpace;
         switch (widthDistributionType) {
@@ -2033,6 +2086,7 @@ function Container({ children, config, devMode, devNode }) {
         width: config.gap || "0",
         lineHeight: "1px",
         fontSize: "1px",
+        background: "transparent",
     };
     const justifyAlign = config.justifyContent
         ? justifyMap$2[config.justifyContent]
@@ -2053,6 +2107,7 @@ function Container({ children, config, devMode, devNode }) {
                                     fontSize: "0",
                                     lineHeight: "0",
                                     height: config.gap,
+                                    background: "transparent",
                                 }, children: "\u00A0" }))] }, `child-${index}`), jsx("td", { className: isStacking ? "desktop-gap-column" : undefined, width: config.gap, style: gapTdStyle, children: "\u00A0" }, `gap-${index}`)] }, `ctn:${index}`));
         }
         return (jsx("td", { className: isStacking ? "stack-td" : undefined, width: getChildWidths[index], style: childTdStyle, children: child }, `child-${index}`));
@@ -2060,7 +2115,7 @@ function Container({ children, config, devMode, devNode }) {
     return (jsx("table", { "aria-label": `Container | Table Outer`, cellPadding: 0, cellSpacing: 0, role: "presentation", border: 0, style: {
             position: "relative",
             ...outerTableStyle,
-        }, children: jsx("tbody", { children: jsx("tr", { children: jsxs("td", { align: justifyAlign, children: [jsx("div", { dangerouslySetInnerHTML: { __html: msoFixedWrapper } }), jsxs("table", { className: [
+        }, ...rootBindingProps(bindings), children: jsx("tbody", { children: jsx("tr", { children: jsxs("td", { align: justifyAlign, children: [jsx("div", { dangerouslySetInnerHTML: { __html: msoFixedWrapper } }), jsxs("table", { className: [
                                 widthType === "fixed" ? "container-fixed-width" : undefined,
                                 devMode ? "main-wrapper relative" : undefined,
                             ]
@@ -2069,22 +2124,22 @@ function Container({ children, config, devMode, devNode }) {
                                 width: "100%",
                                 maxWidth: widthType === "fixed" ? config.width || "600px" : undefined,
                                 borderCollapse: "collapse",
-                            }, width: containerWidthAttr, children: [jsx("tbody", { children: jsx("tr", { children: jsx("td", { style: backgroundTdStyle, children: jsx("table", { "aria-label": `Container | Border Wrapper`, cellPadding: 0, cellSpacing: 0, role: "presentation", border: 0, style: borderTableStyle, children: jsx("tbody", { children: jsx("tr", { children: jsx("td", { style: innerTdStyle, children: jsx("table", { "aria-label": `Container | Content Table`, cellPadding: 0, cellSpacing: 0, role: "presentation", border: 0, style: contentTableStyle, children: jsx("tbody", { children: jsx("tr", { children: rowElements }) }) }) }) }) }) }) }) }) }), !!devNode && (jsx("tfoot", { children: jsx("tr", { children: jsx("td", { children: devNode }) }) }))] }), jsx("div", { dangerouslySetInnerHTML: { __html: msoFixedFooter } })] }) }) }) }));
+                            }, width: containerWidthAttr, children: [jsx("tbody", { children: jsx("tr", { children: jsx("td", { style: backgroundTdStyle, children: jsx("table", { "aria-label": `Container | Border Wrapper`, cellPadding: 0, cellSpacing: 0, role: "presentation", border: 0, style: borderTableStyle, children: jsx("tbody", { children: jsx("tr", { children: jsx("td", { style: innerTdStyle, children: jsx("table", { "aria-label": `Container | Content Table`, cellPadding: 0, cellSpacing: 0, role: "presentation", border: 0, style: contentTableStyle, children: jsx("tbody", { children: jsx("tr", { ...listBindingProps(bindings), children: rowElements }) }) }) }) }) }) }) }) }) }), !!devNode && (jsx("tfoot", { children: jsx("tr", { children: jsx("td", { children: devNode }) }) }))] }), jsx("div", { dangerouslySetInnerHTML: { __html: msoFixedFooter } })] }) }) }) }));
 }
 var Container_default = memo(Container, arePropsEqual);
 
-function Divider({ config, devNode }) {
+function Divider({ config, devNode, bindings }) {
     const { height = "1px", color = "#cccccc", width = "100%", margin = "20px 0", align = "center", hideOnMobile, } = config;
     const heightPx = parseInt(height, 10) || 1;
     // Parse margin into paddingTop / paddingBottom for the outer TD.
     // Outlook ignores shorthand "20px 0" on TDs — must be explicit.
-    const [marginTopRaw = "0", marginRightRaw = "0", marginBottomRaw, marginLeftRaw] = margin.trim().split(/\s+/);
+    const [marginTopRaw = "0", marginRightRaw = "0", marginBottomRaw, marginLeftRaw,] = margin.trim().split(/\s+/);
     const marginTop = marginTopRaw;
     const marginBottom = marginBottomRaw !== null && marginBottomRaw !== void 0 ? marginBottomRaw : marginTopRaw; // "20px 0" → top=20px, bottom=20px
     // Outlook requires align on the outer TD to correctly position
     // a fixed-width inner table (e.g. width="300px").
     const alignAttr = align === "left" ? "left" : align === "right" ? "right" : "center";
-    return (jsxs("table", { role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
+    return (jsxs("table", { role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, ...rootBindingProps(bindings), style: {
             position: "relative", // dev overlay anchor
             width: "100%",
             borderCollapse: "collapse",
@@ -2403,8 +2458,32 @@ function injectLinkStyles(html, fallback) {
     return result;
 }
 
-function Heading({ config, devMode, children }) {
-    const { text, level = "h1", padding, color, textAlign, fontFamily, fontSize, fontWeight, fontStyle, lineHeight, letterSpacing, textTransform, textDecoration, direction, verticalAlign, backgroundColor, wordBreak, whiteSpace, } = config;
+// Helper to build link href based on innerLink type
+function buildLinkHref$3(innerLink) {
+    if (!innerLink || innerLink.type === "none")
+        return null;
+    switch (innerLink.type) {
+        case "url":
+            return innerLink.url || null;
+        case "email":
+            return innerLink.email ? `mailto:${innerLink.email}` : null;
+        case "phone":
+            return innerLink.phone ? `tel:${innerLink.phone}` : null;
+        case "anchor":
+            return innerLink.anchor ? `#${innerLink.anchor}` : null;
+        case "page_top":
+            return "#top";
+        case "page_bottom":
+            return "#bottom";
+        default:
+            return null;
+    }
+}
+function Heading({ config, devMode, children, bindings }) {
+    const { text, level = "h1", padding, color, textAlign, fontFamily, fontSize, fontWeight, fontStyle, lineHeight, letterSpacing, textTransform, textDecoration, direction, verticalAlign, backgroundColor, wordBreak, whiteSpace, innerLink, } = config;
+    // Resolve href and target from innerLink
+    const href = buildLinkHref$3(innerLink);
+    const target = (innerLink === null || innerLink === void 0 ? void 0 : innerLink.target) || "_blank";
     // Determine the content to render
     const content = text !== null && text !== void 0 ? text : children;
     const isString = typeof content === "string";
@@ -2441,12 +2520,17 @@ function Heading({ config, devMode, children }) {
         : "";
     // Dynamically create the Heading element
     const HeadingTag = level;
+    const headingElement = isString ? (jsx(HeadingTag, { style: headingStyle, dangerouslySetInnerHTML: { __html: processedHtml } })) : (jsx(HeadingTag, { style: headingStyle, children: content }));
     return (
     // Wrap the heading content in a table for padding/width/background management.
-    jsx("table", { "aria-label": "Heading Block Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
+    jsx("table", { "aria-label": "Heading Block Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, ...rootBindingProps(bindings), style: {
             width: "100%",
             borderCollapse: "collapse",
-        }, children: jsx("tbody", { children: jsx("tr", { children: jsx("td", { style: tdStyle, align: textAlign, children: isString ? (jsx(HeadingTag, { style: headingStyle, dangerouslySetInnerHTML: { __html: processedHtml } })) : (jsx(HeadingTag, { style: headingStyle, children: content })) }) }) }) }));
+        }, children: jsx("tbody", { children: jsx("tr", { children: jsx("td", { style: tdStyle, align: textAlign, children: href && !devMode ? (jsx("a", { href: href, target: target, ...(target === "_blank" ? { rel: "noopener noreferrer" } : {}), style: {
+                            display: "block",
+                            textDecoration: "none",
+                            color: "inherit",
+                        }, children: headingElement })) : (headingElement) }) }) }) }));
 }
 var Heading_default = memo(Heading, arePropsEqual);
 
@@ -2471,7 +2555,7 @@ function Html({ children, backgroundColor = "#ffffff", }) {
 }
 
 // Helper to build link href based on innerLink type
-function buildLinkHref$1(innerLink) {
+function buildLinkHref$2(innerLink) {
     if (!innerLink || innerLink.type === "none")
         return null;
     switch (innerLink.type) {
@@ -2531,11 +2615,15 @@ function getBorderStyleString$1(border) {
         styles.push(`border-left:${border.left.width} ${border.left.style} ${border.left.color} !important;`);
     return styles.join(" ");
 }
-function Image({ config, devNode, devMode }) {
+function Image({ config, devNode, devMode, bindings }) {
     var _a, _b;
-    const { src, alt, innerLink, mobile } = config;
+    const { src: originalSrc, alt, innerLink, mobile } = config;
+    // In dev mode, if there's no src, use the placeholder
+    const src = devMode && !originalSrc
+        ? "https://placehold.co/300x200?text=select+an+image&font=poppins"
+        : originalSrc;
     // Resolve href and target from innerLink
-    const href = buildLinkHref$1(innerLink);
+    const href = buildLinkHref$2(innerLink);
     const target = (innerLink === null || innerLink === void 0 ? void 0 : innerLink.target) || "_blank";
     const seed = src + (alt || "");
     const instanceId = seed
@@ -2549,43 +2637,37 @@ function Image({ config, devNode, devMode }) {
     const widthAttr = desktopWidth.replace("px", "");
     const heightAttr = (_a = config.height) === null || _a === void 0 ? void 0 : _a.replace("px", "");
     // Determine the table's "initial" width.
-    // If it's 300px, the table should be 300px, not 100%.
     const tableWidth = isPercent ? desktopWidth : `${widthAttr}px`;
-    // When width is a percentage, Outlook ignores CSS and renders the image at
-    // its intrinsic pixel size. Setting a concrete `width` HTML attribute gives
-    // Outlook a value to constrain against while modern clients continue to use
-    // the CSS `width: 100%` for fluid rendering.
-    //
-    // If `maxWidth` is a pixel value (e.g. "600px"), we extract the number and
-    // use it as the HTML `width` attribute so Outlook enforces that cap.
-    // Other clients ignore the attribute and rely on CSS styles instead.
-    // If `maxWidth` is not set or is not a pixel value (e.g. "100%"), we fall
-    // back to the original behaviour (numeric string for px widths, undefined
-    // for % widths).
-    const maxWidthPx = ((_b = config.maxWidth) === null || _b === void 0 ? void 0 : _b.endsWith("px"))
-        ? parseInt(config.maxWidth, 10)
-        : undefined;
-    const imgWidthAttr = isPercent ? (maxWidthPx !== null && maxWidthPx !== void 0 ? maxWidthPx : undefined) : widthAttr;
-    // 2. Mobile Overrides — only emit CSS properties that are explicitly set,
-    // so unspecified properties are left untouched (no forced defaults).
+    // Calculate width attribute for Outlook
+    let imgWidthAttr;
+    if (config.outlookWidth) {
+        // Use explicit outlookWidth if provided
+        imgWidthAttr = parseInt(config.outlookWidth, 10);
+    }
+    else if (isPercent) {
+        // For percentage widths, use maxWidth as fallback for Outlook
+        const maxWidthPx = ((_b = config.maxWidth) === null || _b === void 0 ? void 0 : _b.endsWith("px"))
+            ? parseInt(config.maxWidth, 10)
+            : undefined;
+        imgWidthAttr = maxWidthPx !== null && maxWidthPx !== void 0 ? maxWidthPx : undefined;
+    }
+    else {
+        // For fixed pixel widths, use that value
+        imgWidthAttr = widthAttr ? parseInt(widthAttr, 10) : undefined;
+    }
+    // 2. Mobile Overrides
     let mobileCss = "";
     if (mobile) {
-        // .wrap-${imgClass} rules
-        const wrapRules = [
-            // Always reset min-width so the px lock from desktop can be overridden
-            "min-width: 0 !important;",
-        ];
+        const wrapRules = ["min-width: 0 !important;"];
         if (mobile.width !== undefined)
             wrapRules.push(`width: ${mobile.width} !important;`);
         if (mobile.maxWidth !== undefined)
             wrapRules.push(`max-width: ${mobile.maxWidth} !important;`);
-        // .td-${imgClass} rules
         const tdRules = [];
         if (mobile.padding !== undefined)
             tdRules.push(`padding: ${mobile.padding} !important;`);
         if (mobile.backgroundColor !== undefined)
             tdRules.push(`background-color: ${mobile.backgroundColor} !important;`);
-        // .${imgClass} rules
         const imgRules = [];
         if (mobile.width !== undefined)
             imgRules.push(`width: ${mobile.width} !important;`);
@@ -2608,7 +2690,6 @@ function Image({ config, devNode, devMode }) {
         mobileCss = `
       @media screen and (max-width: 768px) {
         .wrap-${imgClass} {
-          /* This breaks the px lock from desktop and makes it fluid */
           ${wrapRules.join("\n          ")}
         }
         .td-${imgClass} {
@@ -2634,9 +2715,27 @@ function Image({ config, devNode, devMode }) {
         objectPosition: config.objectPosition,
     };
     const imageElement = (jsx("img", { src: src, alt: alt, width: imgWidthAttr, height: heightAttr !== "auto" ? heightAttr : undefined, className: imgClass, style: imgStyle, draggable: !devMode }));
-    return (jsxs(Fragment$1, { children: [mobile && jsx("style", { dangerouslySetInnerHTML: { __html: mobileCss } }), jsxs("table", { role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, className: `wrap-${imgClass}`, align: "center" // Ensures a 300px image stays centered in its parent
-                , style: {
-                    width: tableWidth, // Fixed px here prevents the 100% "ghost space"
+    // Outlook Classic wrapper - only applied when outlookWidth is explicitly set
+    // OR when we need to constrain a percentage-width image in Outlook
+    const needsOutlookWrapper = config.outlookWidth || (isPercent && imgWidthAttr);
+    const finalImageElement = needsOutlookWrapper ? (jsxs(Fragment$1, { children: [jsx("style", { dangerouslySetInnerHTML: {
+                    __html: `</style>` +
+                        `<!--[if mso]>` +
+                        `<table cellpadding="0" cellspacing="0" border="0" style="width: ${imgWidthAttr}px;">` +
+                        `<tr>` +
+                        `<td style="padding: 0; margin: 0;" width="${imgWidthAttr}">` +
+                        `<img src="${src}" alt="${alt || ""}" width="${imgWidthAttr}" height="${heightAttr !== "auto" ? heightAttr : ""}" style="display: block; width: 100%; height: auto;" />` +
+                        `</td>` +
+                        `</tr>` +
+                        `</table>` +
+                        `<![endif]-->` +
+                        `<!--[if !mso]><!-->` +
+                        `<style>`,
+                } }), imageElement, jsx("style", { dangerouslySetInnerHTML: {
+                    __html: `</style>` + `<!--<![endif]-->` + `<style>`,
+                } })] })) : (imageElement);
+    return (jsxs(Fragment$1, { children: [mobile && jsx("style", { dangerouslySetInnerHTML: { __html: mobileCss } }), jsxs("table", { role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, className: `wrap-${imgClass}`, align: "center", ...rootBindingProps(bindings), style: {
+                    width: tableWidth,
                     maxWidth: "100%",
                     borderCollapse: "collapse",
                     margin: "0 auto",
@@ -2645,10 +2744,10 @@ function Image({ config, devNode, devMode }) {
                                     backgroundColor: config.backgroundColor,
                                     fontSize: "0",
                                     lineHeight: "0",
-                                    width: tableWidth, // Lock the cell as well
+                                    width: tableWidth,
                                 }, children: href && !devMode ? (jsx("a", { href: href, target: target, ...(target === "_blank"
                                         ? { rel: "noopener noreferrer" }
-                                        : {}), style: { display: "block", width: "100%" }, children: imageElement })) : (imageElement) }) }) }), devMode && !!devNode && (jsx("tfoot", { children: jsx("tr", { children: jsx("td", { children: devNode }) }) }))] })] }));
+                                        : {}), style: { display: "block", width: "100%" }, children: finalImageElement })) : (finalImageElement) }) }) }), devMode && !!devNode && (jsx("tfoot", { children: jsx("tr", { children: jsx("td", { children: devNode }) }) }))] })] }));
 }
 var Image_default = memo(Image, arePropsEqual);
 
@@ -2717,7 +2816,21 @@ function getHrefFromInnerLink(innerLink) {
             return undefined;
     }
 }
-function Row({ children, config, devNode, devMode }) {
+/**
+ * Resolves the width for a child <td> at the given index based on layoutColumns.
+ *
+ * - "equal"   → equal percentage share across all children
+ * - string[]  → explicit value at the matching index (px, %, or mixed)
+ * - undefined → undefined, so no width attribute is set (retrocompat)
+ */
+function resolveChildColumnWidth(layoutColumns, index, numChildren) {
+    if (!layoutColumns)
+        return undefined;
+    if (layoutColumns === "equal")
+        return `${100 / numChildren}%`;
+    return layoutColumns[index];
+}
+function Row({ children, config, devNode, devMode, bindings }) {
     var _a, _b, _c, _d, _e, _f;
     const childrenArray = (Array.isArray(children) ? children : [children]).filter((child) => child != null);
     const numChildren = childrenArray.length;
@@ -2728,6 +2841,9 @@ function Row({ children, config, devNode, devMode }) {
     // / mobile-gap-spacer class names so that stacking works via non-@media CSS
     // rules that survive Gmail's stylesheet stripping.
     const isStacking = ((_b = config.mobile) === null || _b === void 0 ? void 0 : _b.wrap) === true && numChildren > 1;
+    // Whether layoutColumns is active. When true, table-layout:fixed is applied
+    // to the content table so Outlook Classic honours the declared column widths.
+    const hasLayoutColumns = config.layoutColumns !== undefined;
     // 1. Outer TD: Background, Border Radius, Width, Height.
     const backgroundTdStyle = {
         backgroundColor: config.backgroundColor,
@@ -2768,24 +2884,34 @@ function Row({ children, config, devNode, devMode }) {
     //      Content table fills available space, giving Outlook Classic a hard
     //      boundary so text children get a constrained box and line wrapping
     //      triggers correctly. Use for rows containing text + image layouts.
+    //
+    //    layoutColumns (any value) → additionally applies table-layout: fixed
+    //      so Outlook Classic honours the per-child width declarations.
+    //      Compatible with both fillWidth modes.
     const contentTableStyle = {
-        width: config.fillWidth ? "100%" : "auto",
+        // When layoutColumns is active, force 100% so Outlook Classic has a
+        // concrete boundary to resolve percentage column widths against.
+        // table-layout:fixed is meaningless without a fixed reference width.
+        width: hasLayoutColumns || config.fillWidth ? "100%" : "auto",
         height: "100%",
         borderCollapse: "collapse",
         minWidth: "1px",
-        ...(!config.fillWidth && { maxWidth: config.width || "100%" }),
+        ...(!config.fillWidth &&
+            !hasLayoutColumns && { maxWidth: config.width || "100%" }),
+        ...(hasLayoutColumns && { tableLayout: "fixed" }),
     };
     // 5. Gap TD.
     const gapTdStyle = {
         width: config.gap || "0",
         lineHeight: "1px",
         fontSize: "1px",
+        background: "transparent",
     };
     const tdAlign = config.justifyContent
         ? justifyMap$1[config.justifyContent]
         : "left";
     const tdValign = config.alignItems ? alignMap[config.alignItems] : "top";
-    const content = (jsxs("table", { "aria-label": "Row Outer", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
+    const content = (jsxs("table", { "aria-label": "Row Outer", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, ...(!href ? rootBindingProps(bindings) : {}), style: {
             position: "relative",
             width: config.width || "100%",
             height: config.height,
@@ -2794,32 +2920,44 @@ function Row({ children, config, devNode, devMode }) {
                                                 width: "100%",
                                                 height: "100%",
                                                 borderCollapse: "collapse",
-                                            }, children: jsx("tbody", { children: jsx("tr", { children: jsx("td", { align: tdAlign, width: "100%", style: { width: "100%" }, children: jsx("table", { "aria-label": "Row Content", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: contentTableStyle, ...(config.height && { height: config.height }), className: "content-table row-content-table", "data-mobile-wrap": ((_f = config.mobile) === null || _f === void 0 ? void 0 : _f.wrap) ? "true" : undefined, "data-gap": config.gap, children: jsx("tbody", { children: jsx("tr", { className: "content-tr", children: childrenArray.map((child, index) => (jsxs(Fragment, { children: [jsxs("td", { align: tdAlign, style: {
-                                                                                    verticalAlign: tdValign,
-                                                                                    textAlign: tdAlign,
-                                                                                    padding: "0",
-                                                                                    margin: "0",
-                                                                                }, 
-                                                                                // Mirror of Container's stack-td pattern: when isStacking,
-                                                                                // the non-@media .stack-td rule forces display:block +
-                                                                                // width:100% on each child, which survives Gmail's
-                                                                                // @media stripping and achieves true mobile stacking.
-                                                                                className: `child-cell${isStacking ? " stack-td" : ""}`, children: [child, isStacking &&
-                                                                                        index < numChildren - 1 &&
-                                                                                        config.gap && (jsx("div", { className: "mobile-gap-spacer", style: {
-                                                                                            display: "none",
-                                                                                            fontSize: "0",
-                                                                                            lineHeight: "0",
-                                                                                            height: config.gap,
-                                                                                        }, children: "\u00A0" }))] }), index < numChildren - 1 &&
-                                                                                config.gap && (jsx("td", { width: config.gap, style: gapTdStyle, 
-                                                                                // Mirror of Container's desktop-gap-column pattern:
-                                                                                // when isStacking, the non-@media .desktop-gap-column
-                                                                                // rule collapses the between-column gap td so it does
-                                                                                // not create phantom space while children are stacked.
-                                                                                className: `row-gap-td${isStacking ? " desktop-gap-column" : ""}`, children: "\u00A0" }, `row-gap-${index}`))] }, `row-child-${index}`))) }) }) }) }) }) }) }) }) }) }) }) }) }) }), devNode && (jsx("tfoot", { children: jsx("tr", { children: jsx("td", { children: devNode }) }) }))] }));
+                                            }, children: jsx("tbody", { children: jsx("tr", { children: jsx("td", { align: tdAlign, width: "100%", style: { width: "100%" }, children: jsx("table", { "aria-label": "Row Content", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: contentTableStyle, ...(config.height && { height: config.height }), className: "content-table row-content-table", "data-mobile-wrap": ((_f = config.mobile) === null || _f === void 0 ? void 0 : _f.wrap) ? "true" : undefined, "data-gap": config.gap, children: jsx("tbody", { children: jsx("tr", { className: "content-tr", ...listBindingProps(bindings), children: childrenArray.map((child, index) => {
+                                                                        // Resolve the column width for this child based on
+                                                                        // layoutColumns. undefined when layoutColumns is not set,
+                                                                        // preserving the original behaviour (retrocompat).
+                                                                        const columnWidth = resolveChildColumnWidth(config.layoutColumns, index, numChildren);
+                                                                        return (jsxs(Fragment, { children: [jsxs("td", { align: tdAlign, ...(columnWidth && {
+                                                                                        width: columnWidth,
+                                                                                    }), style: {
+                                                                                        verticalAlign: tdValign,
+                                                                                        textAlign: tdAlign,
+                                                                                        padding: "0",
+                                                                                        margin: "0",
+                                                                                        ...(columnWidth && {
+                                                                                            width: columnWidth,
+                                                                                        }),
+                                                                                    }, 
+                                                                                    // Mirror of Container's stack-td pattern: when isStacking,
+                                                                                    // the non-@media .stack-td rule forces display:block +
+                                                                                    // width:100% on each child, which survives Gmail's
+                                                                                    // @media stripping and achieves true mobile stacking.
+                                                                                    className: `child-cell${isStacking ? " stack-td" : ""}`, children: [child, isStacking &&
+                                                                                            index < numChildren - 1 &&
+                                                                                            config.gap && (jsx("div", { className: "mobile-gap-spacer", style: {
+                                                                                                display: "none",
+                                                                                                fontSize: "0",
+                                                                                                lineHeight: "0",
+                                                                                                height: config.gap,
+                                                                                                background: "transparent",
+                                                                                            }, children: "\u00A0" }))] }), index < numChildren - 1 &&
+                                                                                    config.gap && (jsx("td", { width: config.gap, style: gapTdStyle, 
+                                                                                    // Mirror of Container's desktop-gap-column pattern:
+                                                                                    // when isStacking, the non-@media .desktop-gap-column
+                                                                                    // rule collapses the between-column gap td so it does
+                                                                                    // not create phantom space while children are stacked.
+                                                                                    className: `row-gap-td${isStacking ? " desktop-gap-column" : ""}`, children: "\u00A0" }, `row-gap-${index}`))] }, `row-child-${index}`));
+                                                                    }) }) }) }) }) }) }) }) }) }) }) }) }) }) }), devNode && (jsx("tfoot", { children: jsx("tr", { children: jsx("td", { children: devNode }) }) }))] }));
     if (href && !devMode) {
-        return (jsx("a", { href: href, ...({ target }), style: {
+        return (jsx("a", { href: href, ...({ target }), ...rootBindingProps(bindings), style: {
                 textDecoration: "none",
                 color: "inherit",
                 display: "block",
@@ -2864,10 +3002,10 @@ function getBorderStyle$1(border) {
     }
     return style;
 }
-const Section = ({ config, children, devNode, }) => {
+const Section = ({ config, children, devNode, bindings, }) => {
     var _a, _b, _c;
     const { sectionType, padding } = config;
-    return (jsxs("table", { "aria-label": `Section |Table | ${sectionType}`, role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
+    return (jsxs("table", { "aria-label": `Section |Table | ${sectionType}`, role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, ...rootBindingProps(bindings), style: {
             position: "relative",
             width: "100%",
             backgroundColor: config.backgroundColor,
@@ -2880,58 +3018,84 @@ const Section = ({ config, children, devNode, }) => {
             backgroundPosition: (_c = config.backgroundImage) === null || _c === void 0 ? void 0 : _c.position,
         }, children: [jsx("tbody", { children: jsx("tr", { children: jsx("td", { style: {
                             padding: padding,
-                        }, children: children }) }) }), devNode && (jsx("tfoot", { children: jsx("tr", { children: jsxs("td", { children: [jsxs("span", { style: {
-                                    backgroundColor: "black",
-                                    color: "white",
-                                    padding: "4px",
-                                    fontSize: "14px",
-                                    position: "absolute",
-                                    left: 0,
-                                    top: 0,
-                                }, children: ["Section | ", sectionType] }), children] }) }) }))] }));
+                        }, ...listBindingProps(bindings), children: children }) }) }), devNode && (jsx("tfoot", { children: jsx("tr", { children: jsx("td", { children: jsxs("span", { style: {
+                                backgroundColor: "black",
+                                color: "white",
+                                padding: "4px",
+                                fontSize: "14px",
+                                position: "absolute",
+                                left: 0,
+                                top: 0,
+                            }, children: ["Section | ", sectionType] }) }) }) }))] }));
 };
 var Section_default = memo(Section, arePropsEqual);
 
-function Spacer({ config, devNode }) {
-    const { height, hideOnMobile } = config;
+function Spacer({ config, devNode, bindings }) {
+    var _a, _b, _c;
+    const { height, hideOnMobile, backgroundColor, backgroundImage } = config;
     // 1. Spacer Table Style
     const spacerTableStyle = {
-        // Crucial for compatibility: Ensures no background or border interference
-        backgroundColor: "transparent",
         borderCollapse: "collapse",
-        border: "0",
         width: "100%",
-        // Note the CSS standard dash convention: 'mso-table-lspace'
-        // ["mso-table-lspace" as string]: "0pt",
-        ["msoTableLspace"]: "0pt",
-        // ["mso-table-rspace" as string]: "0pt",
-        ["msoTableRspace"]: "0pt",
     };
     // 2. Spacer TD Style: The element that creates the actual vertical space
     const spacerTdStyle = {
         height: height,
-        // Critical: Suppress any vertical height created by text/font
+        maxHeight: height,
         fontSize: "0",
         lineHeight: "0",
         padding: "0",
+        margin: "0",
+        border: "none",
+        color: "transparent",
+        // Background applied at TD level for Outlook Classic compatibility
+        ...(backgroundColor && { backgroundColor }),
+        ...(backgroundImage && {
+            backgroundImage: `url(${backgroundImage.src})`,
+            backgroundRepeat: (_a = backgroundImage.repeat) !== null && _a !== void 0 ? _a : "no-repeat",
+            backgroundSize: (_b = backgroundImage.size) !== null && _b !== void 0 ? _b : "cover",
+            backgroundPosition: (_c = backgroundImage.position) !== null && _c !== void 0 ? _c : "center",
+        }),
     };
     // Parse height for the HTML attribute
     const spacerHeightAttribute = parseInt(height, 10) || 1;
-    return (
-    // Outer table ensures the spacer spans the full width of its container
-    jsxs("table", { "aria-label": "Vertical Spacer", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
+    return (jsxs("table", { "aria-label": "Vertical Spacer", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, ...rootBindingProps(bindings), style: {
             // --- Start dev
             position: "relative",
             // --- End dev
             ...spacerTableStyle,
-        }, ...{ height: spacerHeightAttribute }, className: hideOnMobile ? "hide-on-mobile" : undefined, children: [jsx("tbody", { children: jsx("tr", { children: jsx("td", { style: spacerTdStyle, 
-                        // Explicit height attribute
-                        height: spacerHeightAttribute, children: "\u00A0" }) }) }), devNode && (jsx("tfoot", { children: jsx("tr", { children: jsx("td", { children: devNode }) }) }))] }));
+        }, ...{ height: spacerHeightAttribute }, className: hideOnMobile ? "hide-on-mobile" : undefined, children: [jsx("tbody", { children: jsx("tr", { children: jsx("td", { style: spacerTdStyle, height: spacerHeightAttribute, ...(backgroundColor && !backgroundImage
+                            ? { bgcolor: backgroundColor }
+                            : {}) }) }) }), devNode && (jsx("tfoot", { children: jsx("tr", { children: jsx("td", { children: devNode }) }) }))] }));
 }
 var Spacer_default = memo(Spacer, arePropsEqual);
 
-function Text({ config, devMode, children }) {
-    const { text, padding, color, textAlign, fontFamily, fontSize, fontWeight, fontStyle, lineHeight, letterSpacing, textTransform, textDecoration, direction, verticalAlign, backgroundColor, opacity, whiteSpace, wordBreak = "break-all", maxWidth, } = config;
+// Helper to build link href based on innerLink type
+function buildLinkHref$1(innerLink) {
+    if (!innerLink || innerLink.type === "none")
+        return null;
+    switch (innerLink.type) {
+        case "url":
+            return innerLink.url || null;
+        case "email":
+            return innerLink.email ? `mailto:${innerLink.email}` : null;
+        case "phone":
+            return innerLink.phone ? `tel:${innerLink.phone}` : null;
+        case "anchor":
+            return innerLink.anchor ? `#${innerLink.anchor}` : null;
+        case "page_top":
+            return "#top";
+        case "page_bottom":
+            return "#bottom";
+        default:
+            return null;
+    }
+}
+function Text({ config, devMode, children, bindings }) {
+    const { text, padding, color, textAlign, fontFamily, fontSize, fontWeight, fontStyle, lineHeight, letterSpacing, textTransform, textDecoration, direction, verticalAlign, backgroundColor, opacity, whiteSpace, wordBreak = "break-all", maxWidth, innerLink, } = config;
+    // Resolve href and target from innerLink
+    const href = buildLinkHref$1(innerLink);
+    const target = (innerLink === null || innerLink === void 0 ? void 0 : innerLink.target) || "_blank";
     // 1. TD Style: Where padding and background are reliably applied.
     //    When maxWidth is set, this TD stays at width: 100% so it always fills
     //    its parent — the inner maxWidth table (see below) does the actual
@@ -2984,26 +3148,31 @@ function Text({ config, devMode, children }) {
         ? injectLinkStyles(content, contentStyle)
         : "";
     const innerContent = isString ? (jsx("div", { style: contentStyle, dangerouslySetInnerHTML: { __html: processedHtml } })) : (jsx("div", { style: contentStyle, children: content }));
-    return (jsx("table", { "aria-label": "Text Block Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
+    const wrappedContent = maxWidth ? (
+    /*
+     * maxWidth wrapper — Outlook Classic compatibility pattern:
+     *
+     * <center> instructs the Word rendering engine to horizontally
+     * centre its child block, equivalent to margin: 0 auto in CSS.
+     *
+     * The inner table carries the `width` HTML attribute set to the
+     * maxWidth value. Outlook Classic reads `width` as a hard pixel
+     * cap; it has no concept of max-width so this is the only lever
+     * available. Modern clients receive the CSS max-width on the
+     * same table and behave correctly.
+     *
+     * The outer TD remains at width: 100% so it always fills its
+     * parent cell in every client — only the inner content is capped.
+     */
+    jsx("center", { children: jsx("table", { "aria-label": "Text Max Width Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, width: maxWidth, style: maxWidthTableStyle, children: jsx("tbody", { children: jsx("tr", { children: jsx("td", { children: innerContent }) }) }) }) })) : (innerContent);
+    return (jsx("table", { "aria-label": "Text Block Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, ...rootBindingProps(bindings), style: {
             width: "100%",
             borderCollapse: "collapse",
-        }, children: jsx("tbody", { children: jsx("tr", { children: jsx("td", { style: tdStyle, align: textAlign, children: maxWidth ? (
-                    /*
-                     * maxWidth wrapper — Outlook Classic compatibility pattern:
-                     *
-                     * <center> instructs the Word rendering engine to horizontally
-                     * centre its child block, equivalent to margin: 0 auto in CSS.
-                     *
-                     * The inner table carries the `width` HTML attribute set to the
-                     * maxWidth value. Outlook Classic reads `width` as a hard pixel
-                     * cap; it has no concept of max-width so this is the only lever
-                     * available. Modern clients receive the CSS max-width on the
-                     * same table and behave correctly.
-                     *
-                     * The outer TD remains at width: 100% so it always fills its
-                     * parent cell in every client — only the inner content is capped.
-                     */
-                    jsx("center", { children: jsx("table", { "aria-label": "Text Max Width Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, width: maxWidth, style: maxWidthTableStyle, children: jsx("tbody", { children: jsx("tr", { children: jsx("td", { children: innerContent }) }) }) }) })) : (innerContent) }) }) }) }));
+        }, children: jsx("tbody", { children: jsx("tr", { children: jsx("td", { style: tdStyle, align: textAlign, children: href && !devMode ? (jsx("a", { href: href, target: target, ...(target === "_blank" ? { rel: "noopener noreferrer" } : {}), style: {
+                            display: "block",
+                            textDecoration: "none",
+                            color: "inherit",
+                        }, children: wrappedContent })) : (wrappedContent) }) }) }) }));
 }
 var Text_default = memo(Text, arePropsEqual);
 
@@ -3129,7 +3298,7 @@ function buildLinkHref(innerLink) {
             return null;
     }
 }
-function Icon({ config, devNode, devMode, children }) {
+function Icon({ config, devNode, devMode, children, bindings }) {
     const { 
     // base64Source,
     width, height, backgroundColor, padding = "0", borderRadius = "0", border, innerLink, justifyContent = "center", } = config;
@@ -3264,7 +3433,7 @@ function Icon({ config, devNode, devMode, children }) {
     <!--<![endif]-->
   `
         : null;
-    return (jsxs("table", { "aria-label": "Icon", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, align: align, style: {
+    return (jsxs("table", { "aria-label": "Icon", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, align: align, ...rootBindingProps(bindings), style: {
             // --- Start dev
             position: "relative",
             // --- End dev