@delmaredigital/payload-puck 0.6.16 → 0.6.18

package/dist/config/config.email.editor.d.ts

@@ -0,0 +1,82 @@
+/**
+ * Email Puck configuration - Editor
+ *
+ * Full interactive editor experience with field factories.
+ * Use with PuckEditor for email building.
+ */
+import type { ComponentConfig } from '@puckeditor/core';
+import type { ReactNode } from 'react';
+export declare const emailEditorConfig: {
+    root: {
+        fields: {
+            subject: {
+                type: "text";
+                label: string;
+            };
+            previewText: {
+                type: "textarea";
+                label: string;
+            };
+            backgroundColor: import("@puckeditor/core").CustomField<import("../fields/shared.js").ColorValue | null>;
+            fontFamily: {
+                type: "select";
+                label: string;
+                options: {
+                    label: "Arial" | "Helvetica" | "Georgia" | "Times New Roman" | "Courier New" | "Verdana" | "Tahoma" | "Trebuchet MS";
+                    value: "Arial, Helvetica, sans-serif" | "Helvetica, Arial, sans-serif" | "Georgia, Times, serif" | "'Times New Roman', Times, serif" | "'Courier New', Courier, monospace" | "Verdana, Geneva, sans-serif" | "Tahoma, Geneva, sans-serif" | "'Trebuchet MS', Helvetica, sans-serif";
+                }[];
+            };
+            maxWidth: {
+                type: "number";
+                label: string;
+                min: number;
+                max: number;
+            };
+        };
+        defaultProps: {
+            subject: string;
+            previewText: string;
+            backgroundColor: {
+                hex: string;
+            };
+            fontFamily: string;
+            maxWidth: number;
+        };
+        render: ({ children }: {
+            children: ReactNode;
+        }) => import("react").JSX.Element;
+    };
+    categories: {
+        layout: {
+            title: string;
+            components: string[];
+            defaultExpanded: true;
+        };
+        content: {
+            title: string;
+            components: string[];
+        };
+        utility: {
+            title: string;
+            components: string[];
+        };
+        prebuilt: {
+            title: string;
+            components: string[];
+        };
+    };
+    components: {
+        EmailWrapper: ComponentConfig<any>;
+        EmailSection: ComponentConfig<any>;
+        EmailColumns: ComponentConfig<any>;
+        EmailText: ComponentConfig<any>;
+        EmailHeading: ComponentConfig<any>;
+        EmailImage: ComponentConfig<any>;
+        EmailButton: ComponentConfig<any>;
+        EmailSpacer: ComponentConfig<any>;
+        EmailDivider: ComponentConfig<any>;
+        EmailHeader: ComponentConfig<any>;
+        EmailFooter: ComponentConfig<any>;
+        EmailSocial: ComponentConfig<any>;
+    };
+};

package/dist/config/config.email.editor.js

@@ -0,0 +1,112 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { createColorPickerField } from '../fields/ColorPickerField.js';
+import { WEB_SAFE_FONTS } from '../components/email/utils.js';
+// Layout
+import { EmailWrapperEditorConfig } from '../components/email/EmailWrapper/EmailWrapper.editor.js';
+import { EmailSectionEditorConfig } from '../components/email/EmailSection/EmailSection.editor.js';
+import { EmailColumnsEditorConfig } from '../components/email/EmailColumns/EmailColumns.editor.js';
+// Content
+import { EmailTextEditorConfig } from '../components/email/EmailText/EmailText.editor.js';
+import { EmailHeadingEditorConfig } from '../components/email/EmailHeading/EmailHeading.editor.js';
+import { EmailImageEditorConfig } from '../components/email/EmailImage/EmailImage.editor.js';
+import { EmailButtonEditorConfig } from '../components/email/EmailButton/EmailButton.editor.js';
+// Utility
+import { EmailSpacerEditorConfig } from '../components/email/EmailSpacer/EmailSpacer.editor.js';
+import { EmailDividerEditorConfig } from '../components/email/EmailDivider/EmailDivider.editor.js';
+// Prebuilt
+import { EmailHeaderEditorConfig } from '../components/email/EmailHeader/EmailHeader.editor.js';
+import { EmailFooterEditorConfig } from '../components/email/EmailFooter/EmailFooter.editor.js';
+import { EmailSocialEditorConfig } from '../components/email/EmailSocial/EmailSocial.editor.js';
+export const emailEditorConfig = {
+    root: {
+        fields: {
+            subject: {
+                type: 'text',
+                label: 'Subject Line'
+            },
+            previewText: {
+                type: 'textarea',
+                label: 'Preview Text'
+            },
+            backgroundColor: createColorPickerField({
+                label: 'Background Color'
+            }),
+            fontFamily: {
+                type: 'select',
+                label: 'Font Family',
+                options: WEB_SAFE_FONTS.map(({ label, value })=>({
+                        label,
+                        value
+                    }))
+            },
+            maxWidth: {
+                type: 'number',
+                label: 'Max Width (px)',
+                min: 400,
+                max: 900
+            }
+        },
+        defaultProps: {
+            subject: '',
+            previewText: '',
+            backgroundColor: {
+                hex: '#f4f4f4'
+            },
+            fontFamily: 'Arial, Helvetica, sans-serif',
+            maxWidth: 600
+        },
+        render: ({ children })=>/*#__PURE__*/ _jsx(_Fragment, {
+                children: children
+            })
+    },
+    categories: {
+        layout: {
+            title: 'Layout',
+            components: [
+                'EmailWrapper',
+                'EmailSection',
+                'EmailColumns'
+            ],
+            defaultExpanded: true
+        },
+        content: {
+            title: 'Content',
+            components: [
+                'EmailText',
+                'EmailHeading',
+                'EmailImage',
+                'EmailButton'
+            ]
+        },
+        utility: {
+            title: 'Utility',
+            components: [
+                'EmailSpacer',
+                'EmailDivider'
+            ]
+        },
+        prebuilt: {
+            title: 'Prebuilt',
+            components: [
+                'EmailHeader',
+                'EmailFooter',
+                'EmailSocial'
+            ]
+        }
+    },
+    components: {
+        EmailWrapper: EmailWrapperEditorConfig,
+        EmailSection: EmailSectionEditorConfig,
+        EmailColumns: EmailColumnsEditorConfig,
+        EmailText: EmailTextEditorConfig,
+        EmailHeading: EmailHeadingEditorConfig,
+        EmailImage: EmailImageEditorConfig,
+        EmailButton: EmailButtonEditorConfig,
+        EmailSpacer: EmailSpacerEditorConfig,
+        EmailDivider: EmailDividerEditorConfig,
+        EmailHeader: EmailHeaderEditorConfig,
+        EmailFooter: EmailFooterEditorConfig,
+        EmailSocial: EmailSocialEditorConfig
+    }
+};

package/dist/config/config.email.js

@@ -0,0 +1,101 @@
+/**
+ * Email Puck configuration - Server-safe
+ *
+ * All components render to table-based, inline-styled HTML
+ * compatible with email clients. No Tailwind, no CSS classes.
+ *
+ * Use with EmailRenderer or renderToEmailHtml().
+ */ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+// Layout
+import { EmailWrapperConfig } from '../components/email/EmailWrapper/EmailWrapper.server.js';
+import { EmailSectionConfig } from '../components/email/EmailSection/EmailSection.server.js';
+import { EmailColumnsConfig } from '../components/email/EmailColumns/EmailColumns.server.js';
+// Content
+import { EmailTextConfig } from '../components/email/EmailText/EmailText.server.js';
+import { EmailHeadingConfig } from '../components/email/EmailHeading/EmailHeading.server.js';
+import { EmailImageConfig } from '../components/email/EmailImage/EmailImage.server.js';
+import { EmailButtonConfig } from '../components/email/EmailButton/EmailButton.server.js';
+// Utility
+import { EmailSpacerConfig } from '../components/email/EmailSpacer/EmailSpacer.server.js';
+import { EmailDividerConfig } from '../components/email/EmailDivider/EmailDivider.server.js';
+// Prebuilt
+import { EmailHeaderConfig } from '../components/email/EmailHeader/EmailHeader.server.js';
+import { EmailFooterConfig } from '../components/email/EmailFooter/EmailFooter.server.js';
+import { EmailSocialConfig } from '../components/email/EmailSocial/EmailSocial.server.js';
+export const emailBaseConfig = {
+    root: {
+        fields: {
+            subject: {
+                type: 'text',
+                label: 'Subject Line'
+            },
+            previewText: {
+                type: 'textarea',
+                label: 'Preview Text'
+            },
+            maxWidth: {
+                type: 'number',
+                label: 'Max Width (px)'
+            }
+        },
+        defaultProps: {
+            subject: '',
+            previewText: '',
+            backgroundColor: '#f4f4f4',
+            fontFamily: 'Arial, Helvetica, sans-serif',
+            maxWidth: 600
+        },
+        render: ({ children })=>/*#__PURE__*/ _jsx(_Fragment, {
+                children: children
+            })
+    },
+    categories: {
+        layout: {
+            title: 'Layout',
+            components: [
+                'EmailWrapper',
+                'EmailSection',
+                'EmailColumns'
+            ],
+            defaultExpanded: true
+        },
+        content: {
+            title: 'Content',
+            components: [
+                'EmailText',
+                'EmailHeading',
+                'EmailImage',
+                'EmailButton'
+            ]
+        },
+        utility: {
+            title: 'Utility',
+            components: [
+                'EmailSpacer',
+                'EmailDivider'
+            ]
+        },
+        prebuilt: {
+            title: 'Prebuilt',
+            components: [
+                'EmailHeader',
+                'EmailFooter',
+                'EmailSocial'
+            ]
+        }
+    },
+    components: {
+        EmailWrapper: EmailWrapperConfig,
+        EmailSection: EmailSectionConfig,
+        EmailColumns: EmailColumnsConfig,
+        EmailText: EmailTextConfig,
+        EmailHeading: EmailHeadingConfig,
+        EmailImage: EmailImageConfig,
+        EmailButton: EmailButtonConfig,
+        EmailSpacer: EmailSpacerConfig,
+        EmailDivider: EmailDividerConfig,
+        EmailHeader: EmailHeaderConfig,
+        EmailFooter: EmailFooterConfig,
+        EmailSocial: EmailSocialConfig
+    }
+};

package/dist/email/EmailRenderer.d.ts

@@ -0,0 +1,16 @@
+/**
+ * EmailRenderer - Server-safe React component for rendering Puck email data
+ *
+ * Wraps Puck's Render with email config.
+ * For producing HTML strings, use renderToEmailHtml() instead.
+ */
+import type { Config as PuckConfig, Data as PuckData } from '@puckeditor/core';
+export interface EmailRendererProps {
+    data: PuckData;
+    config?: PuckConfig;
+}
+/**
+ * Renders Puck email data as React elements.
+ * Server-safe — no hooks or client-side interactivity.
+ */
+export declare function EmailRenderer({ data, config, }: EmailRendererProps): import("react").JSX.Element | null;

package/dist/email/EmailRenderer.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * EmailRenderer - Server-safe React component for rendering Puck email data
+ *
+ * Wraps Puck's Render with email config.
+ * For producing HTML strings, use renderToEmailHtml() instead.
+ */ import { Render } from '@puckeditor/core';
+import { emailBaseConfig } from '../config/config.email.js';
+/**
+ * Renders Puck email data as React elements.
+ * Server-safe — no hooks or client-side interactivity.
+ */ export function EmailRenderer({ data, config = emailBaseConfig }) {
+    if (!data || !data.content) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx(Render, {
+        config: config,
+        data: data
+    });
+}

package/dist/email/email-document.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Email HTML Document Shell
+ *
+ * Provides the DOCTYPE, html, head, and body wrapper for email HTML.
+ * Includes standard email reset CSS and MSO conditional comments.
+ */
+/**
+ * Email reset CSS applied in a style block in the head.
+ * These resets normalize rendering across email clients.
+ */
+export declare const EMAIL_RESET_CSS: string;
+export interface EmailDocumentOptions {
+    /** Preview text shown in inbox list */
+    previewText?: string;
+    /** Background color for the email body */
+    backgroundColor?: string;
+    /** Base font family */
+    fontFamily?: string;
+    /** Max width of email content in px */
+    maxWidth?: number;
+}
+/**
+ * Wraps email content in a complete HTML document.
+ * Returns the opening HTML (before content) and closing HTML (after content).
+ */
+export declare function getEmailDocumentParts(options?: EmailDocumentOptions): {
+    before: string;
+    after: string;
+};

package/dist/email/email-document.js

@@ -0,0 +1,67 @@
+/**
+ * Email HTML Document Shell
+ *
+ * Provides the DOCTYPE, html, head, and body wrapper for email HTML.
+ * Includes standard email reset CSS and MSO conditional comments.
+ */ /**
+ * Email reset CSS applied in a style block in the head.
+ * These resets normalize rendering across email clients.
+ */ export const EMAIL_RESET_CSS = `
+  body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+  table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
+  img { -ms-interpolation-mode: bicubic; border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
+  body { margin: 0 !important; padding: 0 !important; width: 100% !important; min-width: 100% !important; }
+  a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }
+  #MessageViewBody a { color: inherit; text-decoration: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; }
+`.trim();
+/**
+ * Wraps email content in a complete HTML document.
+ * Returns the opening HTML (before content) and closing HTML (after content).
+ */ export function getEmailDocumentParts(options = {}) {
+    const { previewText = '', backgroundColor = '#f4f4f4', fontFamily = 'Arial, Helvetica, sans-serif', maxWidth = 600 } = options;
+    const preheaderHtml = previewText ? `<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">\n${previewText}${'&#847; &zwnj; &nbsp; '.repeat(20)}\n</div>` : '';
+    const before = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+<!--[if mso]>
+<noscript>
+<xml>
+<o:OfficeDocumentSettings>
+<o:AllowPNG/>
+<o:PixelsPerInch>96</o:PixelsPerInch>
+</o:OfficeDocumentSettings>
+</xml>
+</noscript>
+<![endif]-->
+<style type="text/css">
+${EMAIL_RESET_CSS}
+</style>
+</head>
+<body style="margin:0;padding:0;background-color:${backgroundColor};font-family:${fontFamily};">
+${preheaderHtml}
+<!--[if mso]>
+<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="${maxWidth}" align="center" style="width:${maxWidth}px;">
+<tr>
+<td>
+<![endif]-->
+<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:${maxWidth}px;margin:0 auto;">
+<tr>
+<td>`;
+    const after = `</td>
+</tr>
+</table>
+<!--[if mso]>
+</td>
+</tr>
+</table>
+<![endif]-->
+</body>
+</html>`;
+    return {
+        before,
+        after
+    };
+}

package/dist/email/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Email builder exports
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   emailBaseConfig,
+ *   emailEditorConfig,
+ *   renderToEmailHtml,
+ *   EmailRenderer,
+ * } from '@delmaredigital/payload-puck/email'
+ * ```
+ */
+export { emailBaseConfig } from '../config/config.email.js';
+export { emailEditorConfig } from '../config/config.email.editor.js';
+export { EmailRenderer } from './EmailRenderer.js';
+export type { EmailRendererProps } from './EmailRenderer.js';
+export { renderToEmailHtml } from './renderToEmailHtml.js';
+export type { RenderToEmailHtmlOptions } from './renderToEmailHtml.js';
+export { getEmailDocumentParts, EMAIL_RESET_CSS } from './email-document.js';
+export type { EmailDocumentOptions } from './email-document.js';
+export { TABLE_ATTRS, FULL_WIDTH_TABLE_STYLE, centeredTableStyle, emailAlign, alignmentToMargin, WEB_SAFE_FONTS, tiptapHtmlToEmailHtml, vmlBackgroundOpen, vmlBackgroundClose, } from '../components/email/utils.js';
+export type { WebSafeFont } from '../components/email/utils.js';

package/dist/email/index.js

@@ -0,0 +1,22 @@
+/**
+ * Email builder exports
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   emailBaseConfig,
+ *   emailEditorConfig,
+ *   renderToEmailHtml,
+ *   EmailRenderer,
+ * } from '@delmaredigital/payload-puck/email'
+ * ```
+ */ // Configs
+export { emailBaseConfig } from '../config/config.email.js';
+export { emailEditorConfig } from '../config/config.email.editor.js';
+// Rendering
+export { EmailRenderer } from './EmailRenderer.js';
+export { renderToEmailHtml } from './renderToEmailHtml.js';
+// Document shell (for advanced customization)
+export { getEmailDocumentParts, EMAIL_RESET_CSS } from './email-document.js';
+// Email utilities (for custom component authors)
+export { TABLE_ATTRS, FULL_WIDTH_TABLE_STYLE, centeredTableStyle, emailAlign, alignmentToMargin, WEB_SAFE_FONTS, tiptapHtmlToEmailHtml, vmlBackgroundOpen, vmlBackgroundClose } from '../components/email/utils.js';

package/dist/email/renderToEmailHtml.d.ts

@@ -0,0 +1,23 @@
+/**
+ * renderToEmailHtml - Produces a complete email HTML string from Puck data
+ *
+ * Uses React's renderToStaticMarkup to generate static HTML,
+ * then wraps it in the email document shell with reset CSS.
+ */
+import type { Config as PuckConfig, Data as PuckData } from '@puckeditor/core';
+export interface RenderToEmailHtmlOptions {
+    /** Puck config to use (defaults to emailBaseConfig) */
+    config?: PuckConfig;
+}
+/**
+ * Renders Puck data to a complete email HTML string.
+ *
+ * @example
+ * ```ts
+ * import { renderToEmailHtml } from '@delmaredigital/payload-puck/email'
+ *
+ * const html = renderToEmailHtml(emailData)
+ * await sendEmail({ to: 'user@example.com', html })
+ * ```
+ */
+export declare function renderToEmailHtml(data: PuckData, options?: RenderToEmailHtmlOptions): string;

package/dist/email/renderToEmailHtml.js

@@ -0,0 +1,43 @@
+/**
+ * renderToEmailHtml - Produces a complete email HTML string from Puck data
+ *
+ * Uses React's renderToStaticMarkup to generate static HTML,
+ * then wraps it in the email document shell with reset CSS.
+ */ import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { EmailRenderer } from './EmailRenderer.js';
+import { getEmailDocumentParts } from './email-document.js';
+import { colorValueToEmailCSS } from '../fields/shared.js';
+/**
+ * Renders Puck data to a complete email HTML string.
+ *
+ * @example
+ * ```ts
+ * import { renderToEmailHtml } from '@delmaredigital/payload-puck/email'
+ *
+ * const html = renderToEmailHtml(emailData)
+ * await sendEmail({ to: 'user@example.com', html })
+ * ```
+ */ export function renderToEmailHtml(data, options = {}) {
+    const rootProps = data.root?.props;
+    // Resolve backgroundColor — could be a ColorValue object or plain string
+    let bgColor = '#f4f4f4';
+    if (rootProps?.backgroundColor) {
+        if (typeof rootProps.backgroundColor === 'string') {
+            bgColor = rootProps.backgroundColor;
+        } else {
+            bgColor = colorValueToEmailCSS(rootProps.backgroundColor) ?? '#f4f4f4';
+        }
+    }
+    const { before, after } = getEmailDocumentParts({
+        previewText: rootProps?.previewText,
+        backgroundColor: bgColor,
+        fontFamily: rootProps?.fontFamily,
+        maxWidth: rootProps?.maxWidth
+    });
+    const contentHtml = renderToStaticMarkup(React.createElement(EmailRenderer, {
+        data,
+        config: options.config
+    }));
+    return before + contentHtml + after;
+}

package/dist/fields/index.d.ts

@@ -31,6 +31,7 @@ export { GradientEditor } from './GradientEditor.js';
 export { BackgroundField, createBackgroundField } from './BackgroundField.js';
 export type { BackgroundValue, BackgroundImageValue, BackgroundOverlay, GradientValue, GradientStop, GradientMask, } from './shared.js';
 export { backgroundValueToCSS, gradientValueToCSS, getBackgroundImageOpacity } from './shared.js';
+export { colorValueToEmailCSS, paddingValueToEmailCSS, backgroundValueToEmailCSS, } from './shared.js';
 export { ResponsiveField, createResponsiveField } from './ResponsiveField.js';
 export type { Breakpoint, ResponsiveValue, VisibilityValue, ResponsiveCSSResult } from './shared.js';
 export { BREAKPOINTS, isResponsiveValue, responsiveValueToCSS, cssPropertiesToString, visibilityValueToCSS, DEFAULT_VISIBILITY, } from './shared.js';

package/dist/fields/index.js

@@ -30,6 +30,7 @@ export { SizeField, createSizeField, sizeValueToCSS, getSizeClasses } from './Si
 export { GradientEditor } from './GradientEditor.js';
 export { BackgroundField, createBackgroundField } from './BackgroundField.js';
 export { backgroundValueToCSS, gradientValueToCSS, getBackgroundImageOpacity } from './shared.js';
+export { colorValueToEmailCSS, paddingValueToEmailCSS, backgroundValueToEmailCSS } from './shared.js';
 export { ResponsiveField, createResponsiveField } from './ResponsiveField.js';
 export { BREAKPOINTS, isResponsiveValue, responsiveValueToCSS, cssPropertiesToString, visibilityValueToCSS, DEFAULT_VISIBILITY } from './shared.js';
 export { ResponsiveVisibilityField, createResponsiveVisibilityField } from './ResponsiveVisibilityField.js';

package/dist/fields/shared.d.ts

@@ -284,6 +284,22 @@ export declare function backgroundValueToCSS(bg: BackgroundValue | null | undefi
  * Returns undefined if no image or opacity is 100%
  */
 export declare function getBackgroundImageOpacity(bg: BackgroundValue | null | undefined): number | undefined;
+/**
+ * Converts a ColorValue to an email-safe hex string.
+ * Email clients have poor rgba support, so we always return hex.
+ * Opacity is baked into the hex value by blending with white.
+ */
+export declare function colorValueToEmailCSS(color: ColorValue | null | undefined): string | undefined;
+/**
+ * Converts a PaddingValue to an email-safe CSS padding string.
+ * Always uses px units (email clients don't reliably support rem/em).
+ */
+export declare function paddingValueToEmailCSS(padding: PaddingValue | null | undefined): string | undefined;
+/**
+ * Converts a BackgroundValue to email-safe inline style properties.
+ * Only supports solid colors — gradients and images need VML for Outlook.
+ */
+export declare function backgroundValueToEmailCSS(bg: BackgroundValue | null | undefined): React.CSSProperties;
 /**
  * Check if any custom style values are set
  */

package/dist/fields/shared.js

@@ -1084,6 +1084,65 @@ export const flexWrapField = {
     const opacity = bg.image.opacity ?? 100;
     return opacity < 100 ? opacity / 100 : undefined;
 }
+// =============================================================================
+// Email CSS Converters
+// =============================================================================
+// Email-safe versions of CSS converters. Email clients don't support:
+// - rgba/hsla colors (use hex only)
+// - CSS shorthand inconsistently
+// - rem/em units (use px only)
+/**
+ * Converts a ColorValue to an email-safe hex string.
+ * Email clients have poor rgba support, so we always return hex.
+ * Opacity is baked into the hex value by blending with white.
+ */ export function colorValueToEmailCSS(color) {
+    if (!color?.hex) return undefined;
+    const opacity = color.opacity ?? 100;
+    if (opacity === 100) return color.hex;
+    // Bake opacity into hex — email clients don't support rgba
+    const rgb = hexToRgb(color.hex);
+    if (!rgb) return color.hex;
+    // Blend with white background (most emails have white/light bg)
+    const blend = (c)=>Math.round(c * (opacity / 100) + 255 * (1 - opacity / 100));
+    const r = blend(rgb.r).toString(16).padStart(2, '0');
+    const g = blend(rgb.g).toString(16).padStart(2, '0');
+    const b = blend(rgb.b).toString(16).padStart(2, '0');
+    return `#${r}${g}${b}`;
+}
+/**
+ * Converts a PaddingValue to an email-safe CSS padding string.
+ * Always uses px units (email clients don't reliably support rem/em).
+ */ export function paddingValueToEmailCSS(padding) {
+    if (!padding) return undefined;
+    const { top, right, bottom, left } = padding;
+    if (top === right && right === bottom && bottom === left) {
+        return `${top}px`;
+    }
+    if (top === bottom && left === right) {
+        return `${top}px ${right}px`;
+    }
+    return `${top}px ${right}px ${bottom}px ${left}px`;
+}
+/**
+ * Converts a BackgroundValue to email-safe inline style properties.
+ * Only supports solid colors — gradients and images need VML for Outlook.
+ */ export function backgroundValueToEmailCSS(bg) {
+    if (!bg || bg.type === 'none') return {};
+    if (bg.type === 'solid' && bg.solid) {
+        const color = colorValueToEmailCSS(bg.solid);
+        return color ? {
+            backgroundColor: color
+        } : {};
+    }
+    // Gradient backgrounds: use first stop color as fallback
+    if (bg.type === 'gradient' && bg.gradient?.stops?.length) {
+        const fallback = colorValueToEmailCSS(bg.gradient.stops[0].color);
+        return fallback ? {
+            backgroundColor: fallback
+        } : {};
+    }
+    return {};
+}
 /**
  * Check if any custom style values are set
  */ export function hasCustomStyles(options) {

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.6.16";
+export declare const VERSION = "0.6.18";

package/dist/version.js

@@ -1,2 +1,2 @@
 // Auto-generated by scripts/generate-version.js - do not edit manually
-export const VERSION = '0.6.16';
+export const VERSION = '0.6.18';