@pagenflow/email 1.4.6 → 1.4.8

package/dist/components/Button.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
 import { BorderConfig } from "../types";
 import IInnerLink from "../types/IInnerLink";
+import { DataBindings } from "../types/DataBindings";
 export interface ButtonConfig {
     /** Link configuration for the button destination. Required. */
     innerLink?: IInnerLink;
@@ -58,7 +59,8 @@ export interface ButtonConfig {
 export type ButtonProps = {
     config: ButtonConfig;
     devMode?: boolean;
+    bindings?: DataBindings;
 };
-declare function Button({ config, devMode }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function Button({ config, devMode, bindings }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Button>;
 export default _default;

package/dist/components/Column.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 import { BorderConfig } from "../types";
+import { DataBindings } from "../types/DataBindings";
 export interface BackgroundImageType {
     src: string;
     repeat?: "no-repeat" | "repeat" | "repeat-x" | "repeat-y";
@@ -16,13 +17,15 @@ export type ColumnConfig = {
     backgroundImage?: BackgroundImageType;
     width?: string;
     height?: string;
+    maxWidth?: string;
     gap?: string;
 };
 export type ColumnProps = {
     children?: ReactNode;
     config: ColumnConfig;
     devNode?: ReactNode;
+    bindings?: DataBindings;
 };
-declare function Column({ children, config, devNode }: ColumnProps): import("react/jsx-runtime").JSX.Element;
+declare function Column({ children, config, devNode, bindings }: ColumnProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Column>;
 export default _default;

package/dist/components/Container.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 import { BorderConfig } from "../types";
+import { DataBindings } from "../types/DataBindings";
 export type WidthType = "full" | "fixed";
 export type WidthDistributionType = "equals" | "ratio" | "manual";
 export interface RatioConstraint {
@@ -17,7 +18,7 @@ export type ChildrenConstraints = {
 };
 export interface ContainerConfig {
     widthType: WidthType;
-    childrenConstraints: ChildrenConstraints;
+    childrenConstraints?: ChildrenConstraints;
     shouldWrap?: boolean;
     borderRadius?: string;
     border?: BorderConfig;
@@ -38,9 +39,10 @@ export interface ContainerConfig {
 export type ContainerProps = {
     config: ContainerConfig;
     children?: ReactNode;
+    bindings?: DataBindings;
     devMode?: boolean;
     devNode?: ReactNode;
 };
-declare function Container({ children, config, devMode, devNode }: ContainerProps): import("react/jsx-runtime").JSX.Element;
+declare function Container({ children, config, bindings, devMode, devNode, }: ContainerProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Container>;
 export default _default;

package/dist/components/Divider.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+import { DataBindings } from "../types/DataBindings";
 export interface DividerConfig {
     height?: string;
     color?: string;
@@ -10,7 +11,8 @@ export interface DividerConfig {
 export type DividerProps = {
     config: DividerConfig;
     devNode?: ReactNode;
+    bindings?: DataBindings;
 };
-declare function Divider({ config, devNode }: DividerProps): import("react/jsx-runtime").JSX.Element;
+declare function Divider({ config, devNode, bindings }: DividerProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Divider>;
 export default _default;

package/dist/components/Heading.d.ts

@@ -1,4 +1,6 @@
 import { ReactNode } from "react";
+import IInnerLink from "../types/IInnerLink";
+import { DataBindings } from "../types/DataBindings";
 export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 export interface HeadingConfig {
     /** The text content. */
@@ -37,12 +39,15 @@ export interface HeadingConfig {
     wordBreak?: string;
     /** White space handling (e.g., 'nowrap', 'pre', 'pre-wrap', 'pre-line', 'normal'). */
     whiteSpace?: string;
+    /** Inner link configuration for making the entire heading block clickable */
+    innerLink?: IInnerLink;
 }
 export type HeadingProps = {
     config: HeadingConfig;
     devMode?: ReactNode;
     children?: ReactNode;
+    bindings?: DataBindings;
 };
-declare function Heading({ config, devMode, children }: HeadingProps): import("react/jsx-runtime").JSX.Element;
+declare function Heading({ config, devMode, children, bindings }: HeadingProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Heading>;
 export default _default;

package/dist/components/Icon.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
-import IInnerLink from "../types/IInnerLink";
 import { BorderConfig } from "../types";
+import IInnerLink from "../types/IInnerLink";
+import { DataBindings } from "../types/DataBindings";
 export interface IconConfig {
     /** Icon identifier for the Iconify API */
     iconIdentifier?: string;
@@ -32,7 +33,8 @@ export type IconProps = {
     devNode?: ReactNode;
     devMode?: boolean;
     children?: ReactNode;
+    bindings?: DataBindings;
 };
-declare function Icon({ config, devNode, devMode, children }: IconProps): import("react/jsx-runtime").JSX.Element | null;
+declare function Icon({ config, devNode, devMode, children, bindings }: IconProps): import("react/jsx-runtime").JSX.Element | null;
 declare const _default: import("react").MemoExoticComponent<typeof Icon>;
 export default _default;

package/dist/components/Image.d.ts

@@ -1,6 +1,7 @@
 import { CSSProperties, ReactNode } from "react";
 import { BorderConfig } from "../types";
 import IInnerLink from "../types/IInnerLink";
+import { DataBindings } from "../types/DataBindings";
 /**
  * RULES NOT TO BE REMOVED
  * -------------------
@@ -20,7 +21,7 @@ export interface ImageMobileConfig {
     hidden?: boolean;
 }
 export interface ImageConfig {
-    src: string;
+    src?: string;
     alt: string;
     width?: string;
     height?: string;
@@ -42,13 +43,35 @@ export interface ImageConfig {
     objectFit?: CSSProperties["objectFit"];
     objectPosition?: string;
     mobile?: ImageMobileConfig;
+    /**
+     * Pixel width constraint for Outlook Classic only.
+     *
+     * Outlook Classic ignores CSS width/maxWidth on <img> and always renders
+     * images at their intrinsic size. The only reliable workaround is a wrapping
+     * <td> with a hard pixel `width` attribute, injected inside an MSO
+     * conditional comment so it is invisible to every other client.
+     *
+     * When set, the image is wrapped in:
+     *   <!--[if mso]><table><tr><td width="${outlookWidth}"><![endif]-->
+     *   <img ... />
+     *   <!--[if mso]></td></tr></table><![endif]-->
+     *
+     * Modern clients (Gmail, Apple Mail, mobile) ignore MSO conditional comments
+     * entirely — they never see the wrapping <td> and continue to render the
+     * image using its CSS styles alone.
+     *
+     * Retrocompat: undefined by default. Existing templates that do not set this
+     * property are completely unaffected.
+     */
+    outlookWidth?: string;
 }
 export type ImageProps = {
     config: ImageConfig;
     devNode?: ReactNode;
     devMode?: boolean;
     previewMode?: boolean;
+    bindings?: DataBindings;
 };
-declare function Image({ config, devNode, devMode }: ImageProps): import("react/jsx-runtime").JSX.Element;
+declare function Image({ config, devNode, devMode, bindings }: ImageProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Image>;
 export default _default;

package/dist/components/Row.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
 import { AlignItems, BorderConfig, JustifyContent } from "../types";
 import IInnerLink from "../types/IInnerLink";
+import { DataBindings } from "../types/DataBindings";
 export interface BackgroundImageType {
     src: string;
     repeat?: "no-repeat" | "repeat" | "repeat-x" | "repeat-y";
@@ -23,6 +24,23 @@ export interface RowConfig {
      * behavior. Use this for icon rows, button rows, social link rows.
      */
     fillWidth?: boolean;
+    /**
+     * Controls how child <td> widths are distributed across the row.
+     *
+     * - "equal"    → each child gets `${100 / numChildren}%`; table-layout:fixed
+     *                is applied so Outlook Classic honours the declaration.
+     * - string[]   → explicit width per child (px, %, or mixed), e.g.
+     *                ["200px","50%","1px"]. Length must match the number of
+     *                children; table-layout:fixed is applied.
+     * - undefined  → default / retrocompat: no width is set on child <td>s and
+     *                table-layout remains unset, preserving the original
+     *                shrink-wrap / fillWidth behaviour.
+     *
+     * Note: when mixing % and px the author is responsible for ensuring values
+     * do not overflow the row width — the same trade-off accepted by MJML and
+     * Foundation for Emails.
+     */
+    layoutColumns?: "equal" | string[];
     padding?: string;
     backgroundColor?: string;
     backgroundImage?: BackgroundImageType;
@@ -40,7 +58,8 @@ export type RowProps = {
     config: RowConfig;
     devNode?: ReactNode;
     devMode?: boolean;
+    bindings?: DataBindings;
 };
-declare function Row({ children, config, devNode, devMode }: RowProps): import("react/jsx-runtime").JSX.Element;
+declare function Row({ children, config, devNode, devMode, bindings }: RowProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Row>;
 export default _default;

package/dist/components/Section.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactNode } from "react";
 import { BorderConfig } from "../types";
+import { DataBindings } from "../types/DataBindings";
 export type SectionConfig = {
     sectionType: "header" | "footer" | "content";
     gap?: string;
@@ -17,6 +18,7 @@ export interface SectionProps {
     config: SectionConfig;
     children?: ReactNode;
     devNode?: ReactNode;
+    bindings?: DataBindings;
 }
 declare const _default: React.NamedExoticComponent<SectionProps>;
 export default _default;

package/dist/components/Spacer.d.ts

@@ -1,13 +1,18 @@
 import { ReactNode } from "react";
+import { DataBindings } from "../types/DataBindings";
+import { BackgroundImageType } from "./Row";
 export interface SpacerConfig {
     /** The height of the vertical space (e.g., "20px"). Required. */
     height: string;
     hideOnMobile?: boolean;
+    backgroundColor?: string;
+    backgroundImage?: BackgroundImageType;
 }
 export type SpacerProps = {
     config: SpacerConfig;
     devNode?: ReactNode;
+    bindings?: DataBindings;
 };
-declare function Spacer({ config, devNode }: SpacerProps): import("react/jsx-runtime").JSX.Element;
+declare function Spacer({ config, devNode, bindings }: SpacerProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Spacer>;
 export default _default;

package/dist/components/Text.d.ts

@@ -1,4 +1,6 @@
 import { ReactNode } from "react";
+import IInnerLink from "../types/IInnerLink";
+import { DataBindings } from "../types/DataBindings";
 export interface TextConfig {
     /** The text content or React nodes to render. */
     text?: string;
@@ -36,14 +38,24 @@ 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;
+    /** Inner link configuration for making the entire text block clickable */
+    innerLink?: IInnerLink;
 }
 export type TextProps = {
     config: TextConfig;
     devMode?: ReactNode;
     children?: ReactNode;
+    bindings?: DataBindings;
 };
-declare function Text({ config, devMode, children }: TextProps): import("react/jsx-runtime").JSX.Element;
+declare function Text({ config, devMode, children, bindings }: TextProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Text>;
 export default _default;

package/dist/components/utils/bindingAttribute.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 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.
+ */
+import { DataBindings } from '../../types/DataBindings';
+/**
+ * Props to spread onto the component's root element.
+ * Carries `data-bind-if` and/or `data-bind` (propertyMap).
+ */
+export declare function rootBindingProps(bindings: DataBindings | undefined): {
+    'data-bind-if'?: string;
+    'data-bind'?: string;
+};
+/**
+ * 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>
+ */
+export declare function listBindingProps(bindings: DataBindings | undefined): {
+    'data-bind-list'?: string;
+};
+/** @deprecated Use rootBindingProps + listBindingProps instead. */
+export declare function bindingProps(bindings: DataBindings | undefined): {
+    'data-bind'?: string;
+};

package/dist/components/utils/linearizeStyle.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties } from "react";
+/**
+ * Converts a CSSProperties object to an inline style string suitable for
+ * embedding inside a dangerouslySetInnerHTML / VML conditional comment where
+ * JSX style objects are not available.
+ *
+ * Converts camelCase keys to kebab-case (e.g. borderRadius → border-radius).
+ * Skips undefined/null values.
+ */
+export default function linearizeStyle(style: CSSProperties): string;