@pagenflow/email 1.4.6 → 1.4.7

package/dist/components/Column.d.ts

@@ -16,6 +16,7 @@ export type ColumnConfig = {
     backgroundImage?: BackgroundImageType;
     width?: string;
     height?: string;
+    maxWidth?: string;
     gap?: string;
 };
 export type ColumnProps = {

package/dist/components/Text.d.ts

@@ -36,6 +36,13 @@ export interface TextConfig {
     whiteSpace?: string;
     /** Word break behavior (e.g., 'break-all', 'break-word', 'keep-all', 'normal'). */
     wordBreak?: string;
+    /**
+     * Constrains the text block width in modern clients via CSS, and in
+     * Outlook Classic (Word rendering engine) via a <center> + table `width`
+     * HTML attribute pattern — identical to the Column maxWidth approach.
+     * The outer table always stays at 100% so no retro layout is disturbed;
+     * only the inner constrained table is capped.
+     */
     maxWidth?: string;
     listStyle?: string;
 }

package/dist/index.cjs.js

@@ -1803,6 +1803,9 @@ function Column({ children, config, devNode }) {
     };
     // 2. Outer TD style: Background and Border Radius (no border here).
     //    height is set so the TD occupies the full declared height.
+    //    When maxWidth is set, the outer TD stays at its normal width so it
+    //    always fills its parent — the inner maxWidth table (see below) does
+    //    the actual capping.
     const outerTdStyle = {
         width: config.width,
         height: config.height,
@@ -1846,6 +1849,18 @@ function Column({ children, config, devNode }) {
         fontSize: "1px",
         width: "100%",
     };
+    // 5. maxWidth constraining table style (modern clients).
+    //    The `width` HTML attribute on this table is what Outlook Classic
+    //    (Word engine) reads — it has no concept of max-width, but it does
+    //    honour the `width` attribute as a hard column cap.
+    //    The CSS max-width here handles modern web/email clients correctly.
+    //    <center> around it ensures the constrained block stays horizontally
+    //    centred in both the Word engine and standards-based renderers.
+    const maxWidthTableStyle = {
+        width: "100%",
+        maxWidth: config.maxWidth,
+        borderCollapse: "collapse",
+    };
     // Main content rendering
     const renderContent = () => (jsxRuntime.jsx("table", { "aria-label": "Column Padding", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: innerTableStyle, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { style: innerTdStyle, valign: config.justifyContent ? vAlignMap[config.justifyContent] : "top", align: config.alignItems ? alignMap$2[config.alignItems] : "left", children: config.gap && numChildren > 1 ? (jsxRuntime.jsx("table", { "aria-label": "Column Gap Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
                             width: "100%",
@@ -1862,7 +1877,24 @@ function Column({ children, config, devNode }) {
     return (jsxRuntime.jsxs("table", { "aria-label": "Column Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
             position: "relative",
             ...outerTableStyle,
-        }, ...(config.height && { height: config.height }), children: [jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { style: outerTdStyle, ...(config.width && { width: config.width }), ...(config.height && { height: config.height }), children: renderContent() }) }) }), devNode && (jsxRuntime.jsx("tfoot", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { children: devNode }) }) }))] }));
+        }, ...(config.height && { height: config.height }), children: [jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { style: outerTdStyle, ...(config.width && { width: config.width }), ...(config.height && { height: config.height }), children: config.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 column remains at its normal width so it always
+                         * fills its parent cell in every client — only the inner
+                         * content is capped.
+                         */
+                        jsxRuntime.jsx("center", { children: jsxRuntime.jsx("table", { "aria-label": "Column Max Width Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, width: config.maxWidth, style: maxWidthTableStyle, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { children: renderContent() }) }) }) }) })) : (renderContent()) }) }) }), devNode && (jsxRuntime.jsx("tfoot", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { children: devNode }) }) }))] }));
 }
 var Column_default = React.memo(Column, arePropsEqual);
 
@@ -2194,36 +2226,7 @@ function Head({ children, backgroundColor = "#ffffff", title = "Email Preview",
                 mso-line-height-rule: exactly;
             }
         }
-        @media only screen and (max-width: 768px) {
-          .row-content-table[data-mobile-justify="center"] { margin: 0 auto !important; float: none !important; }
-          .row-content-table[data-mobile-justify="start"] { margin: 0 !important; float: left !important; }
-          .row-content-table[data-mobile-justify="end"] { margin: 0 0 0 auto !important; float: right !important; }
-          .row-content-table[data-mobile-align="center"] .child-cell { vertical-align: middle !important; }
-          .row-content-table[data-mobile-align="start"] .child-cell { vertical-align: top !important; }
-          .row-content-table[data-mobile-align="end"] .child-cell { vertical-align: bottom !important; }
-          .row-content-table[data-mobile-wrap="true"] { width: 100% !important; max-width: 100% !important; }
-          .row-content-table[data-mobile-wrap="true"] > tbody > .content-tr { display: block !important; }
-          .row-content-table[data-mobile-wrap="true"] > tbody > .content-tr > .child-cell {
-            display: block !important;
-            width: 100% !important;
-            box-sizing: border-box !important;
-          }
-          .row-content-table[data-mobile-wrap="true"] > tbody > .content-tr > .row-gap-td {
-            display: none !important;
-            width: 0 !important;
-            height: 0 !important;
-          }
-          .row-content-table[data-mobile-wrap="true"] > tbody > .content-tr > .child-cell:not(:last-child) {
-            margin-bottom: 20px !important;
-          }
-          ${["10px", "15px", "20px", "24px", "30px", "40px", ...rowGaps]
-        .filter((gap, index, self) => self.indexOf(gap) === index)
-        .map((gap) => `
-              .row-content-table[data-mobile-wrap="true"][data-gap="${gap}"] > tbody > .content-tr > .child-cell:not(:last-child) {
-                margin-bottom: ${gap} !important;
-              }`)
-        .join("\n")}
-        }
+
         a { color: inherit; text-decoration: none; }
         ol, ul { margin: 0px; padding: 0px; list-style: none; }
         li {
@@ -2375,7 +2378,9 @@ function resolveAnchorStyles(anchor, fallback) {
         else if (fallback === null || fallback === void 0 ? void 0 : fallback[prop]) {
             resolved[prop] = fallback[prop];
         }
-        // if neither — leave it out entirely, don't force inherit
+        else if (prop === "text-decoration") {
+            resolved[prop] = "none";
+        }
     }
     return Object.entries(resolved)
         .map(([k, v]) => `${k}:${v}`)
@@ -2715,11 +2720,16 @@ function getHrefFromInnerLink(innerLink) {
     }
 }
 function Row({ children, config, devNode, devMode }) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f;
     const childrenArray = (Array.isArray(children) ? children : [children]).filter((child) => child != null);
     const numChildren = childrenArray.length;
     const href = getHrefFromInnerLink(config.innerLink);
     const target = ((_a = config.innerLink) === null || _a === void 0 ? void 0 : _a.target) || "_blank";
+    // Whether children should stack on mobile.
+    // Mirrors Container's isStacking pattern: drives stack-td / desktop-gap-column
+    // / 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;
     // 1. Outer TD: Background, Border Radius, Width, Height.
     const backgroundTdStyle = {
         backgroundColor: config.backgroundColor,
@@ -2729,9 +2739,9 @@ function Row({ children, config, devNode, devMode }) {
         backgroundImage: config.backgroundImage
             ? `url(${config.backgroundImage.src})`
             : undefined,
-        backgroundRepeat: (_b = config.backgroundImage) === null || _b === void 0 ? void 0 : _b.repeat,
-        backgroundSize: (_c = config.backgroundImage) === null || _c === void 0 ? void 0 : _c.size,
-        backgroundPosition: (_d = config.backgroundImage) === null || _d === void 0 ? void 0 : _d.position,
+        backgroundRepeat: (_c = config.backgroundImage) === null || _c === void 0 ? void 0 : _c.repeat,
+        backgroundSize: (_d = config.backgroundImage) === null || _d === void 0 ? void 0 : _d.size,
+        backgroundPosition: (_e = config.backgroundImage) === null || _e === void 0 ? void 0 : _e.position,
         ...(config.borderRadius && { overflow: "hidden" }),
     };
     // 2. Inner Table: Border and Border Radius.
@@ -2786,13 +2796,30 @@ function Row({ children, config, devNode, devMode }) {
                                                 width: "100%",
                                                 height: "100%",
                                                 borderCollapse: "collapse",
-                                            }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { align: tdAlign, width: "100%", style: { width: "100%" }, children: jsxRuntime.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-justify": (_e = config.mobile) === null || _e === void 0 ? void 0 : _e.justifyContent, "data-mobile-align": (_f = config.mobile) === null || _f === void 0 ? void 0 : _f.alignItems, "data-mobile-wrap": ((_g = config.mobile) === null || _g === void 0 ? void 0 : _g.wrap) ? "true" : undefined, "data-gap": config.gap, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { className: "content-tr", children: childrenArray.map((child, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx("td", { valign: tdValign, style: {
+                                            }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { align: tdAlign, width: "100%", style: { width: "100%" }, children: jsxRuntime.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: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { className: "content-tr", children: childrenArray.map((child, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("td", { align: tdAlign, style: {
                                                                                     verticalAlign: tdValign,
-                                                                                    textAlign: "left",
+                                                                                    textAlign: tdAlign,
                                                                                     padding: "0",
                                                                                     margin: "0",
-                                                                                }, className: "child-cell", children: child }), index < numChildren - 1 &&
-                                                                                config.gap && (jsxRuntime.jsx("td", { width: config.gap, style: gapTdStyle, className: "row-gap-td", children: "\u00A0" }, `row-gap-${index}`))] }, `row-child-${index}`))) }) }) }) }) }) }) }) }) }) }) }) }) }) }), devNode && (jsxRuntime.jsx("tfoot", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { children: devNode }) }) }))] }));
+                                                                                }, 
+                                                                                // 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 && (jsxRuntime.jsx("div", { className: "mobile-gap-spacer", style: {
+                                                                                            display: "none",
+                                                                                            fontSize: "0",
+                                                                                            lineHeight: "0",
+                                                                                            height: config.gap,
+                                                                                        }, children: "\u00A0" }))] }), index < numChildren - 1 &&
+                                                                                config.gap && (jsxRuntime.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 && (jsxRuntime.jsx("tfoot", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { children: devNode }) }) }))] }));
     if (href && !devMode) {
         return (jsxRuntime.jsx("a", { href: href, ...({ target }), style: {
                 textDecoration: "none",
@@ -2908,13 +2935,19 @@ var Spacer_default = React.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;
     // 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
+    //    capping, keeping the outer layout intact in all clients.
     const tdStyle = {
         padding: padding,
         backgroundColor: backgroundColor,
         width: "100%",
         verticalAlign: "top",
     };
-    // 2. Content Style: Applied directly to a wrapper element
+    // 2. Content Style: Applied directly to the inner div wrapper.
+    //    maxWidth is intentionally omitted here — putting it on a div has no
+    //    effect in Outlook Classic (Word engine ignores CSS on div elements).
+    //    The constraint is enforced at the table level instead (see below).
     const contentStyle = {
         color: color,
         textAlign: textAlign,
@@ -2933,7 +2966,18 @@ function Text({ config, devMode, children }) {
         wordBreak: wordBreak,
         margin: "0",
         padding: "0",
-        maxWidth,
+    };
+    // 3. maxWidth constraining table style (modern clients).
+    //    The `width` HTML attribute on this table is what Outlook Classic
+    //    (Word engine) reads — it has no concept of max-width, but it does
+    //    honour the `width` attribute as a hard column cap.
+    //    The CSS max-width here handles modern web/email clients correctly.
+    //    <center> around it ensures the constrained block stays horizontally
+    //    centred in both the Word engine and standards-based renderers.
+    const maxWidthTableStyle = {
+        width: "100%",
+        maxWidth: maxWidth,
+        borderCollapse: "collapse",
     };
     // Determine content to render
     const content = text !== null && text !== void 0 ? text : children;
@@ -2941,10 +2985,27 @@ function Text({ config, devMode, children }) {
     const processedHtml = isString
         ? injectLinkStyles(content, contentStyle)
         : "";
+    const innerContent = isString ? (jsxRuntime.jsx("div", { style: contentStyle, dangerouslySetInnerHTML: { __html: processedHtml } })) : (jsxRuntime.jsx("div", { style: contentStyle, children: content }));
     return (jsxRuntime.jsx("table", { "aria-label": "Text Block Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
             width: "100%",
             borderCollapse: "collapse",
-        }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { style: tdStyle, align: textAlign, children: isString ? (jsxRuntime.jsx("div", { style: contentStyle, dangerouslySetInnerHTML: { __html: processedHtml } })) : (jsxRuntime.jsx("div", { style: contentStyle, children: content })) }) }) }) }));
+        }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.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.
+                     */
+                    jsxRuntime.jsx("center", { children: jsxRuntime.jsx("table", { "aria-label": "Text Max Width Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, width: maxWidth, style: maxWidthTableStyle, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { children: innerContent }) }) }) }) })) : (innerContent) }) }) }) }));
 }
 var Text_default = React.memo(Text, arePropsEqual);