@pagenflow/email 1.3.6 → 1.4.0

package/dist/components/Button.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+import { BorderConfig } from "../types";
 export interface ButtonConfig {
     /** The destination URL for the button. Required. */
     href: string;
@@ -12,8 +13,12 @@ export interface ButtonConfig {
     padding?: string;
     /** Border radius (e.g., "3px"). */
     borderRadius?: string;
+    /** Border configuration for outline buttons. */
+    border?: BorderConfig;
     /** Width of the button (e.g., "200px" or "100%"). */
     width?: string;
+    /** Maximum width of the button (e.g., "300px"). Text will wrap if content exceeds this. */
+    maxWidth?: string;
     /** Horizontal alignment within the container. */
     justifyContent?: "start" | "center" | "end";
     /** Horizontal text alignment within the button (e.g., 'left', 'center'). */
@@ -24,6 +29,8 @@ export interface ButtonConfig {
     fontWeight?: string;
     /** Font style (e.g., 'italic'). */
     fontStyle?: string;
+    /** Font family (e.g., 'Arial, sans-serif'). */
+    fontFamily?: string;
     /** Line height (e.g., '1.5' or '24px'). */
     lineHeight?: string;
     /** Letter spacing (e.g., '0.5px', '1px'). */
@@ -32,10 +39,16 @@ export interface ButtonConfig {
     textTransform?: string;
     /** Text decoration (e.g., 'underline', 'line-through'). */
     textDecoration?: string;
-    /** Font family (e.g., 'Arial, sans-serif'). */
-    fontFamily?: string;
+    /** Text direction (e.g., 'ltr', 'rtl'). */
+    direction?: string;
+    /** Vertical alignment of text (e.g., 'sub', 'super'). */
+    verticalAlign?: string;
+    /** Opacity of the button text (e.g., '0.5', '1'). */
+    opacity?: string | number;
     /** White space behavior (e.g., 'normal', 'nowrap', 'pre-wrap'). */
     whiteSpace?: string;
+    /** Word break behavior (e.g., 'break-all', 'break-word', 'keep-all', 'normal'). */
+    wordBreak?: string;
 }
 export type ButtonProps = {
     config: ButtonConfig;

package/dist/components/Divider.d.ts

@@ -10,6 +10,7 @@ export interface DividerConfig {
     margin?: string;
     /** Horizontal alignment of the divider. */
     align?: "left" | "center" | "right";
+    hideOnMobile?: boolean;
 }
 export type DividerProps = {
     config: DividerConfig;

package/dist/components/Font.d.ts

@@ -0,0 +1,30 @@
+export type FontFormat = "woff2" | "woff" | "truetype" | "opentype" | "svg" | "embedded-opentype";
+export interface WebFont {
+    /** Direct URL to the font file (woff2, woff, ttf, etc.) */
+    url: string;
+    /** Font format hint used in the CSS src descriptor */
+    format: FontFormat;
+}
+export interface FontProps {
+    /** The CSS font-family name, e.g. "Roboto" */
+    fontFamily: string;
+    /**
+     * Fallback font family used:
+     *   1. In the MSO (Outlook) conditional comment so Outlook renders the
+     *      closest web-safe equivalent.
+     *   2. As the CSS font-stack fallback after the web font.
+     * Accepts a single string or an array for a prioritised fallback chain.
+     */
+    fallbackFontFamily?: string | string[];
+    /**
+     * Web font to load. When omitted the component only emits the MSO fallback
+     * comment (useful for system fonts you still want to declare explicitly).
+     */
+    webFont?: WebFont;
+    /** CSS font-weight — numeric (400) or keyword ("bold"). Default: 400 */
+    fontWeight?: number | string;
+    /** CSS font-style. Default: "normal" */
+    fontStyle?: "normal" | "italic" | "oblique";
+}
+export default function Font({ fontFamily, fallbackFontFamily, webFont, fontWeight, fontStyle, }: FontProps): import("react/jsx-runtime").JSX.Element;
+export declare function cssClassName(fontFamily: string): string;

package/dist/components/Head.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+import type { ResolvedFont } from "@/lib/email-fonts/loadEmailFonts";
 export interface HeadProps {
     /** Additional elements like custom <style> blocks, <title>, etc. */
     children?: ReactNode;
@@ -6,5 +7,19 @@ export interface HeadProps {
     backgroundColor?: string;
     /** Subject line for the email title. */
     title?: string;
+    /** Array of gap values (e.g. ["8px", "12px", "48px"]) to generate mobile wrap margin-bottom rules */
+    rowGaps?: string[];
+    /**
+     * Resolved fonts from `loadEmailFonts()`.
+     * Head will render a <Font> for every variant of every family.
+     * This is the preferred API when using the builder pipeline.
+     *
+     * Example:
+     *   const { resolved } = await loadEmailFonts(
+     *     extractFontFamilies(tree)
+     *   );
+     *   <Head fonts={resolved} ... />
+     */
+    fonts?: ResolvedFont[];
 }
-export default function Head({ children, backgroundColor, title, }: HeadProps): import("react/jsx-runtime").JSX.Element;
+export default function Head({ children, backgroundColor, title, rowGaps, fonts, }: HeadProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/HeadDev.d.ts

@@ -1,3 +1,4 @@
+import { ResolvedFont } from "@/lib/email-fonts/loadEmailFonts";
 import { ReactNode } from "react";
 export interface HeadDevProps {
     /** Additional elements like custom <style> blocks, <title>, etc. */
@@ -6,9 +7,16 @@ export interface HeadDevProps {
     backgroundColor?: string;
     /** Subject line for the email title. */
     title?: string;
+    /** Array of gap values (e.g. ["8px", "12px", "48px"]) to generate mobile wrap margin-bottom rules */
+    rowGaps?: string[];
+    fonts?: ResolvedFont[];
 }
 /**
  * Dev variant of Head component for use in builder canvas.
  * Injects styles directly into document head to maintain email behavior during development.
+ *
+ * All styles — including @font-face declarations — are injected imperatively into
+ * document.head via useEffect. This guarantees correct placement (always in <head>,
+ * never in <body>) and correct declaration order (fonts before selectors).
  */
-export default function HeadDev({ children, backgroundColor, title, }: HeadDevProps): null;
+export default function HeadDev({ children, backgroundColor, title, rowGaps, fonts, }: HeadDevProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Heading.d.ts

@@ -11,6 +11,8 @@ export interface HeadingConfig {
     color?: string;
     /** Horizontal text alignment. */
     textAlign?: "left" | "center" | "right" | "justify";
+    /** Font family (e.g., 'Arial, sans-serif'). */
+    fontFamily?: string;
     /** Font size (e.g., '24px'). Overrides default size for the level. */
     fontSize?: string;
     /** Font weight (e.g., 'normal', 'bold', or '700'). */
@@ -31,6 +33,10 @@ export interface HeadingConfig {
     verticalAlign?: string;
     /** Background color of the heading block. */
     backgroundColor?: string;
+    /** Word break behavior (e.g., 'break-all', 'break-word', 'keep-all', 'normal'). */
+    wordBreak?: string;
+    /** White space handling (e.g., 'nowrap', 'pre', 'pre-wrap', 'pre-line', 'normal'). */
+    whiteSpace?: string;
 }
 export type HeadingProps = {
     config: HeadingConfig;

package/dist/components/Icon.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 import IInnerLink from "../types/IInnerLink";
+import { BorderConfig } from "../types";
 export interface IconConfig {
     /** Icon identifier for the Iconify API */
     iconIdentifier?: string;
@@ -21,6 +22,8 @@ export interface IconConfig {
     padding?: string;
     /** Border radius for the icon container */
     borderRadius?: string;
+    /** Border configuration for the icon container */
+    border?: BorderConfig;
     /** Horizontal alignment within the container */
     justifyContent?: "start" | "center" | "end";
 }

package/dist/components/Image.d.ts

@@ -1,25 +1,37 @@
 import { ReactNode } from "react";
+import { BorderConfig } from "../types";
+/** Style-only mobile overrides. Content props (src, alt, href, target) are excluded. */
+export interface ImageMobileConfig {
+    width?: string;
+    height?: string;
+    maxWidth?: string;
+    maxHeight?: string;
+    backgroundColor?: string;
+    padding?: string;
+    borderRadius?: string;
+    border?: BorderConfig;
+    /** When true, the mobile version of the image is not rendered at all. */
+    hidden?: boolean;
+}
 export interface ImageConfig {
-    /** The source URL of the image. Required. */
     src: string;
-    /** Alt text for accessibility. Required. */
     alt: string;
-    /** Width of the image. Can be fixed (e.g., "600px") or percentage (e.g., "100%"). */
     width?: string;
-    /** Height of the image. Optional, usually auto-calculated if width is set. */
     height?: string;
     maxWidth?: string;
     maxHeight?: string;
-    /** Background color of the containing TD/parent element if the image has transparency. */
     backgroundColor?: string;
-    /** Padding around the image (applied to the containing TD). */
     padding?: string;
-    /** Border radius for the image (CSS only, limited compatibility). */
     borderRadius?: string;
-    /** Optional URL to make the image clickable */
+    border?: BorderConfig;
     href?: string;
-    /** Link target attribute (e.g., "_blank" for new window) */
     target?: string;
+    /**
+     * Mobile-specific style overrides.
+     * Only explicitly set properties override the desktop value on mobile.
+     * Unset properties fall back to the desktop value.
+     */
+    mobile?: ImageMobileConfig;
 }
 export type ImageProps = {
     config: ImageConfig;

package/dist/components/MsoConditional.d.ts

@@ -0,0 +1,29 @@
+/**
+ * MSO conditional comment helpers.
+ *
+ * Follows the same pattern as Icon.tsx: raw HTML is injected via
+ * dangerouslySetInnerHTML on a <td>, which is the only way to emit
+ * unescaped conditional comment strings without a post-processing step.
+ *
+ * Accepts an HTML string (not ReactNode) — the caller is responsible
+ * for building the inner HTML, exactly like Icon does with vmlIcon/htmlContent.
+ *
+ * Usage:
+ *
+ *   <MsoOnly html={`<img src="..." />`} />
+ *   <NonMso html={`<table>...</table>`} />
+ */
+type Props = {
+    html: string;
+};
+/**
+ * Content rendered by Outlook Classic only.
+ * Outputs: <!--[if mso]> ... <![endif]-->
+ */
+export declare function MsoOnly({ html }: Props): import("react/jsx-runtime").JSX.Element;
+/**
+ * Content hidden from Outlook Classic, visible in all other clients.
+ * Outputs: <!--[if !mso]><!--> ... <!--<![endif]-->
+ */
+export declare function NonMso({ html }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Row.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 import { AlignItems, BorderConfig, JustifyContent } from "../types";
+import IInnerLink from "../types/IInnerLink";
 export interface BackgroundImageType {
     src: string;
     repeat?: "no-repeat" | "repeat" | "repeat-x" | "repeat-y";
@@ -17,6 +18,7 @@ export interface RowConfig {
     backgroundImage?: BackgroundImageType;
     borderRadius?: string;
     border?: BorderConfig;
+    innerLink?: IInnerLink;
     mobile?: {
         justifyContent?: JustifyContent;
         alignItems?: AlignItems;
@@ -27,7 +29,8 @@ export type RowProps = {
     children: ReactNode;
     config: RowConfig;
     devNode?: ReactNode;
+    devMode?: boolean;
 };
-declare function Row({ children, config, devNode }: RowProps): import("react/jsx-runtime").JSX.Element;
+declare function Row({ children, config, devNode, devMode }: RowProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Row>;
 export default _default;

package/dist/components/Spacer.d.ts

@@ -2,6 +2,7 @@ import { ReactNode } from "react";
 export interface SpacerConfig {
     /** The height of the vertical space (e.g., "20px"). Required. */
     height: string;
+    hideOnMobile?: boolean;
 }
 export type SpacerProps = {
     config: SpacerConfig;

package/dist/components/Text.d.ts

@@ -8,6 +8,8 @@ export interface TextConfig {
     color?: string;
     /** Horizontal text alignment (e.g., 'left', 'center'). */
     textAlign?: "left" | "center" | "right" | "justify";
+    /** Font family (e.g., 'Arial, sans-serif'). */
+    fontFamily?: string;
     /** Font size (e.g., '16px'). */
     fontSize?: string;
     /** Font weight (e.g., 'bold' or '700'). */
@@ -32,6 +34,8 @@ export interface TextConfig {
     opacity?: string | number;
     /** White space handling (e.g., 'normal', 'nowrap', 'pre', 'pre-wrap'). */
     whiteSpace?: string;
+    /** Word break behavior (e.g., 'break-all', 'break-word', 'keep-all', 'normal'). */
+    wordBreak?: string;
 }
 export type TextProps = {
     config: TextConfig;