@medalsocial/meda 1.7.0 → 2.1.0

package/dist/email-builder/property-editors/heading-editor.d.ts

@@ -0,0 +1,7 @@
+import type { HeadingBlockProps } from '../types.js';
+interface Props {
+    value: HeadingBlockProps;
+    onChange: (patch: Partial<HeadingBlockProps>) => void;
+}
+export declare function HeadingPropertyEditor({ value, onChange }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/email-builder/property-editors/heading-editor.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EMAIL_FONT_OPTIONS } from '../internal/email-font-options.js';
+import { AlignmentToggle, ColorInput, Field, NumberInput, SelectInput, SpacingEditor, TextInput, } from './_shared.js';
+export function HeadingPropertyEditor({ value, onChange }) {
+    return (_jsxs("div", { "data-slot": "email-builder-property-heading", className: "flex flex-col gap-3", children: [_jsx(Field, { label: "Text", htmlFor: "heading-text", children: _jsx(TextInput, { id: "heading-text", value: value.text, onChange: (text) => onChange({ text }) }) }), _jsx(Field, { label: "Level", htmlFor: "heading-level", children: _jsx(SelectInput, { id: "heading-level", value: String(value.level), options: [
+                        { value: '1', label: 'H1' },
+                        { value: '2', label: 'H2' },
+                        { value: '3', label: 'H3' },
+                    ], onChange: (v) => onChange({ level: Number(v) }) }) }), _jsx(Field, { label: "Alignment", children: _jsx(AlignmentToggle, { value: value.alignment, onChange: (alignment) => onChange({ alignment }) }) }), _jsx(Field, { label: "Color", htmlFor: "heading-color", children: _jsx(ColorInput, { id: "heading-color", value: value.color, onChange: (color) => onChange({ color }) }) }), _jsx(Field, { label: "Font family", htmlFor: "heading-font", children: _jsx(SelectInput, { id: "heading-font", value: value.fontFamily, options: EMAIL_FONT_OPTIONS.map((o) => ({ value: o.value, label: o.label })), onChange: (fontFamily) => onChange({ fontFamily }) }) }), _jsx(Field, { label: "Font weight", children: _jsx(SelectInput, { value: String(value.fontWeight), options: [
+                        { value: '400', label: 'Regular' },
+                        { value: '500', label: 'Medium' },
+                        { value: '600', label: 'Semibold' },
+                        { value: '700', label: 'Bold' },
+                    ], onChange: (v) => onChange({ fontWeight: Number(v) }) }) }), _jsx(Field, { label: "Font size (px)", htmlFor: "heading-fs", children: _jsx(NumberInput, { id: "heading-fs", value: value.fontSize, min: 10, max: 96, onChange: (fontSize) => onChange({ fontSize }) }) }), _jsx(Field, { label: "Padding", children: _jsx(SpacingEditor, { value: value.padding, onChange: (padding) => onChange({ padding }) }) })] }));
+}

package/dist/email-builder/property-editors/image-editor.d.ts

@@ -0,0 +1,8 @@
+import type { EmailBuilderProps, ImageBlockProps } from '../types.js';
+interface Props {
+    value: ImageBlockProps;
+    onChange: (patch: Partial<ImageBlockProps>) => void;
+    renderMediaPicker?: EmailBuilderProps['renderMediaPicker'];
+}
+export declare function ImagePropertyEditor({ value, onChange, renderMediaPicker }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/email-builder/property-editors/image-editor.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { cn } from '../../lib/utils.js';
+import { AlignmentToggle, Field, NumberInput, SpacingEditor, TextInput } from './_shared.js';
+export function ImagePropertyEditor({ value, onChange, renderMediaPicker }) {
+    const [pickerOpen, setPickerOpen] = useState(false);
+    return (_jsxs("div", { "data-slot": "email-builder-property-image", className: "flex flex-col gap-3", children: [_jsx(Field, { label: "Source URL", htmlFor: "img-src", children: _jsx(TextInput, { id: "img-src", value: value.src, onChange: (src) => onChange({ src }) }) }), renderMediaPicker ? (_jsx("button", { type: "button", onClick: () => setPickerOpen(true), className: cn('inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-3 font-medium text-sm', 'hover:bg-accent hover:text-accent-foreground'), children: "Pick from media library" })) : null, pickerOpen && renderMediaPicker
+                ? renderMediaPicker({
+                    onPick: (url) => {
+                        onChange({ src: url });
+                        setPickerOpen(false);
+                    },
+                    onCancel: () => setPickerOpen(false),
+                })
+                : null, _jsx(Field, { label: "Alt text", htmlFor: "img-alt", children: _jsx(TextInput, { id: "img-alt", value: value.alt, onChange: (alt) => onChange({ alt }) }) }), _jsx(Field, { label: "Link URL", htmlFor: "img-link", children: _jsx(TextInput, { id: "img-link", value: value.linkUrl, onChange: (linkUrl) => onChange({ linkUrl }) }) }), _jsx(Field, { label: "Width (px)", children: _jsx(NumberInput, { value: value.width, min: 20, max: 1200, onChange: (width) => onChange({ width }) }) }), _jsx(Field, { label: "Alignment", children: _jsx(AlignmentToggle, { value: value.alignment, onChange: (alignment) => onChange({ alignment }) }) }), _jsx(Field, { label: "Padding", children: _jsx(SpacingEditor, { value: value.padding, onChange: (padding) => onChange({ padding }) }) })] }));
+}

package/dist/email-builder/property-editors/social-editor.d.ts

@@ -0,0 +1,7 @@
+import type { SocialBlockProps } from '../types.js';
+interface Props {
+    value: SocialBlockProps;
+    onChange: (patch: Partial<SocialBlockProps>) => void;
+}
+export declare function SocialPropertyEditor({ value, onChange }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/email-builder/property-editors/social-editor.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Plus, Trash2 } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+import { AlignmentToggle, Field, NumberInput, SpacingEditor, TextInput } from './_shared.js';
+export function SocialPropertyEditor({ value, onChange }) {
+    const updateLink = (index, patch) => {
+        const links = value.links.map((l, i) => (i === index ? { ...l, ...patch } : l));
+        onChange({ links });
+    };
+    const removeLink = (index) => {
+        onChange({ links: value.links.filter((_, i) => i !== index) });
+    };
+    const addLink = () => {
+        onChange({ links: [...value.links, { platform: 'twitter', url: 'https://' }] });
+    };
+    return (_jsxs("div", { "data-slot": "email-builder-property-social", className: "flex flex-col gap-3", children: [_jsx(Field, { label: "Links", children: _jsxs("div", { className: "flex flex-col gap-2", children: [value.links.map((link, i) => (_jsxs("div", { className: "flex flex-col gap-1.5 rounded-md border border-input p-2", children: [_jsx(TextInput, { value: link.platform, placeholder: "Platform", onChange: (platform) => updateLink(i, { platform }) }), _jsx(TextInput, { value: link.url, placeholder: "https://", onChange: (url) => updateLink(i, { url }) }), _jsx(TextInput, { value: link.iconUrl ?? '', placeholder: "Icon URL (optional)", onChange: (iconUrl) => updateLink(i, { iconUrl }) }), _jsxs("button", { type: "button", onClick: () => removeLink(i), className: cn('inline-flex h-8 items-center justify-center gap-1 rounded-md text-destructive text-xs hover:bg-destructive/10'), "aria-label": "Remove link", children: [_jsx(Trash2, { className: "size-3.5" }), " Remove"] })] }, i))), _jsxs("button", { type: "button", onClick: addLink, className: "inline-flex h-9 items-center justify-center gap-1 rounded-md border border-input border-dashed text-sm hover:bg-accent", children: [_jsx(Plus, { className: "size-4" }), " Add link"] })] }) }), _jsx(Field, { label: "Icon size (px)", children: _jsx(NumberInput, { value: value.iconSize, min: 12, max: 64, onChange: (iconSize) => onChange({ iconSize }) }) }), _jsx(Field, { label: "Spacing (px)", children: _jsx(NumberInput, { value: value.spacing, min: 0, max: 48, onChange: (spacing) => onChange({ spacing }) }) }), _jsx(Field, { label: "Alignment", children: _jsx(AlignmentToggle, { value: value.alignment, onChange: (alignment) => onChange({ alignment }) }) }), _jsx(Field, { label: "Padding", children: _jsx(SpacingEditor, { value: value.padding, onChange: (padding) => onChange({ padding }) }) })] }));
+}

package/dist/email-builder/property-editors/spacer-editor.d.ts

@@ -0,0 +1,7 @@
+import type { SpacerBlockProps } from '../types.js';
+interface Props {
+    value: SpacerBlockProps;
+    onChange: (patch: Partial<SpacerBlockProps>) => void;
+}
+export declare function SpacerPropertyEditor({ value, onChange }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/email-builder/property-editors/spacer-editor.js

@@ -0,0 +1,6 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Field, NumberInput } from './_shared.js';
+export function SpacerPropertyEditor({ value, onChange }) {
+    return (_jsx("div", { "data-slot": "email-builder-property-spacer", className: "flex flex-col gap-3", children: _jsx(Field, { label: "Height (px)", children: _jsx(NumberInput, { value: value.height, min: 1, max: 400, onChange: (height) => onChange({ height }) }) }) }));
+}

package/dist/email-builder/property-editors/text-editor.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import type { TextBlockProps } from '../types.js';
+interface Props {
+    value: TextBlockProps;
+    onChange: (patch: Partial<TextBlockProps>) => void;
+    /** Optional rich-text editor slot (Lexical, etc.). Defaults to a textarea. */
+    renderEditor?: (ctx: {
+        value: string;
+        onChange: (next: string) => void;
+    }) => ReactNode;
+}
+export declare function TextPropertyEditor({ value, onChange, renderEditor }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/email-builder/property-editors/text-editor.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EMAIL_FONT_OPTIONS } from '../internal/email-font-options.js';
+import { AlignmentToggle, ColorInput, Field, NumberInput, SelectInput, SpacingEditor, TextAreaInput, } from './_shared.js';
+export function TextPropertyEditor({ value, onChange, renderEditor }) {
+    const onContent = (content) => onChange({ content });
+    return (_jsxs("div", { "data-slot": "email-builder-property-text", className: "flex flex-col gap-3", children: [_jsx(Field, { label: "Content", htmlFor: "text-content", children: renderEditor ? (renderEditor({ value: value.content, onChange: onContent })) : (_jsx(TextAreaInput, { id: "text-content", value: value.content, onChange: onContent, rows: 5 })) }), _jsx(Field, { label: "Alignment", children: _jsx(AlignmentToggle, { value: value.alignment, onChange: (alignment) => onChange({ alignment }) }) }), _jsx(Field, { label: "Color", htmlFor: "text-color", children: _jsx(ColorInput, { id: "text-color", value: value.color, onChange: (color) => onChange({ color }) }) }), _jsx(Field, { label: "Font family", children: _jsx(SelectInput, { value: value.fontFamily, options: EMAIL_FONT_OPTIONS.map((o) => ({ value: o.value, label: o.label })), onChange: (fontFamily) => onChange({ fontFamily }) }) }), _jsx(Field, { label: "Font size (px)", children: _jsx(NumberInput, { value: value.fontSize, min: 10, max: 48, onChange: (fontSize) => onChange({ fontSize }) }) }), _jsx(Field, { label: "Padding", children: _jsx(SpacingEditor, { value: value.padding, onChange: (padding) => onChange({ padding }) }) })] }));
+}

package/dist/email-builder/property-inspector.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { BlockKind, BlockPropsMap, EmailBlock, EmailBuilderProps } from './types.js';
+interface PropertyInspectorProps {
+    block: EmailBlock | null;
+    onChange: <K extends BlockKind>(blockId: string, patch: Partial<BlockPropsMap[K]>) => void;
+    emptyContent: ReactNode;
+    renderMediaPicker?: EmailBuilderProps['renderMediaPicker'];
+    renderTextEditor?: EmailBuilderProps['renderTextEditor'];
+}
+export declare function PropertyInspector({ block, onChange, emptyContent, renderMediaPicker, renderTextEditor, }: PropertyInspectorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/email-builder/property-inspector.js

@@ -0,0 +1,42 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ButtonPropertyEditor } from './property-editors/button-editor.js';
+import { ColumnsPropertyEditor } from './property-editors/columns-editor.js';
+import { DividerPropertyEditor } from './property-editors/divider-editor.js';
+import { FooterPropertyEditor } from './property-editors/footer-editor.js';
+import { HeadingPropertyEditor } from './property-editors/heading-editor.js';
+import { ImagePropertyEditor } from './property-editors/image-editor.js';
+import { SocialPropertyEditor } from './property-editors/social-editor.js';
+import { SpacerPropertyEditor } from './property-editors/spacer-editor.js';
+import { TextPropertyEditor } from './property-editors/text-editor.js';
+export function PropertyInspector({ block, onChange, emptyContent, renderMediaPicker, renderTextEditor, }) {
+    if (!block) {
+        return (_jsx("div", { "data-slot": "email-builder-inspector-empty", className: "flex h-full items-center justify-center p-6 text-center text-muted-foreground text-sm", children: emptyContent }));
+    }
+    return (_jsxs("div", { "data-slot": "email-builder-inspector", className: "flex flex-col gap-3 p-4", children: [_jsxs("div", { className: "font-semibold text-foreground text-sm capitalize", children: [block.kind, " properties"] }), renderEditor(block, onChange, { renderMediaPicker, renderTextEditor })] }));
+}
+function renderEditor(block, onChange, slots) {
+    const id = block.id;
+    switch (block.kind) {
+        case 'heading':
+            return (_jsx(HeadingPropertyEditor, { value: block.props, onChange: (p) => onChange(id, p) }));
+        case 'text':
+            return (_jsx(TextPropertyEditor, { value: block.props, onChange: (p) => onChange(id, p), renderEditor: slots.renderTextEditor }));
+        case 'image':
+            return (_jsx(ImagePropertyEditor, { value: block.props, onChange: (p) => onChange(id, p), renderMediaPicker: slots.renderMediaPicker }));
+        case 'button':
+            return (_jsx(ButtonPropertyEditor, { value: block.props, onChange: (p) => onChange(id, p) }));
+        case 'divider':
+            return (_jsx(DividerPropertyEditor, { value: block.props, onChange: (p) => onChange(id, p) }));
+        case 'spacer':
+            return (_jsx(SpacerPropertyEditor, { value: block.props, onChange: (p) => onChange(id, p) }));
+        case 'columns':
+            return (_jsx(ColumnsPropertyEditor, { value: block.props, onChange: (p) => onChange(id, p) }));
+        case 'social':
+            return (_jsx(SocialPropertyEditor, { value: block.props, onChange: (p) => onChange(id, p) }));
+        case 'footer':
+            return (_jsx(FooterPropertyEditor, { value: block.props, onChange: (p) => onChange(id, p) }));
+        default:
+            return null;
+    }
+}

package/dist/email-builder/public.d.ts

@@ -0,0 +1 @@
+export { type EmailBlock, type EmailBrand, EmailBuilder, type EmailBuilderLabels, type EmailBuilderProps, type EmailDocument, renderToEmailHtml, } from './index.js';

package/dist/email-builder/public.js

@@ -0,0 +1,3 @@
+// Root re-export for `@medalsocial/meda` — exposes the most common
+// types/components without forcing consumers to import the full subpath.
+export { EmailBuilder, renderToEmailHtml, } from './index.js';

package/dist/email-builder/render-to-email-html.d.ts

@@ -0,0 +1,11 @@
+import type { EmailBrand, EmailDocument } from './types.js';
+export interface RenderToEmailHtmlOptions {
+    brand?: EmailBrand;
+    /** Override the default content width (px). */
+    contentWidth?: number;
+    /** Background color of the surrounding email shell. */
+    backgroundColor?: string;
+    /** Background color of the content table. */
+    contentBackgroundColor?: string;
+}
+export declare function renderToEmailHtml(doc: EmailDocument, options?: RenderToEmailHtmlOptions): string;

package/dist/email-builder/render-to-email-html.js

@@ -0,0 +1,219 @@
+// Render an EmailDocument to email-safe HTML. Adapted from
+// apps/web/src/components/email-builder/render-to-email-html.ts. Differences:
+//   - No DOMPurify dependency (consumer can re-sanitize the output if desired).
+//     Block content is text-escaped at render time; raw HTML is not supported in
+//     this surface.
+//   - No dark-mode or site-url plumbing.
+//   - No `contentSlot`/`html`/`video`/`otp` block kinds (out of scope).
+import { getColumnWidths } from './block-registry.js';
+const BUTTON_SIZES = {
+    sm: { paddingX: 16, paddingY: 8, fontSize: 14 },
+    md: { paddingX: 24, paddingY: 12, fontSize: 16 },
+    lg: { paddingX: 32, paddingY: 16, fontSize: 18 },
+};
+export function renderToEmailHtml(doc, options = {}) {
+    const brand = options.brand ?? {};
+    const contentWidth = options.contentWidth ?? 600;
+    const backgroundColor = options.backgroundColor ?? '#f4f4f4';
+    const contentBackgroundColor = options.contentBackgroundColor ?? '#ffffff';
+    const fontFamily = brand.fontBody ??
+        '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
+    const textColor = '#111827';
+    const preheader = doc.envelope?.preheader ?? '';
+    const subject = doc.envelope?.subject ?? '';
+    const body = doc.blocks.map((b) => renderBlock(b, brand, contentWidth)).join('\n');
+    return `<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="x-apple-disable-message-reformatting">
+  <title>${esc(subject)}</title>
+</head>
+<body style="margin: 0; padding: 0; background-color: ${esc(backgroundColor)}; font-family: ${esc(fontFamily)}; color: ${esc(textColor)};">
+  ${preheader ? `<div style="display:none;visibility:hidden;mso-hide:all;font-size:1px;color:${esc(backgroundColor)};line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">${esc(preheader)}</div>` : ''}
+  <table cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: ${esc(backgroundColor)};">
+    <tr>
+      <td align="center" valign="top">
+        <table cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: ${esc(contentBackgroundColor)}; max-width: ${contentWidth}px; margin: 0 auto;">
+${body}
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>`;
+}
+function renderBlock(block, brand, contentWidth) {
+    switch (block.kind) {
+        case 'heading':
+            return renderHeading(block.props, brand);
+        case 'text':
+            return renderText(block.props, brand);
+        case 'image':
+            return renderImage(block.props);
+        case 'button':
+            return renderButton(block.props, brand);
+        case 'divider':
+            return renderDivider(block.props);
+        case 'spacer':
+            return renderSpacer(block.props);
+        case 'columns':
+            return renderColumns(block, brand, contentWidth);
+        case 'social':
+            return renderSocial(block.props);
+        case 'footer':
+            return renderFooter(block.props);
+        default:
+            return '';
+    }
+}
+function renderHeading(p, brand) {
+    const tag = `h${p.level}`;
+    const fontFamily = p.fontFamily || brand.fontHeading || '';
+    return `<tr>
+  <td style="padding: ${pad(p.padding)}; text-align: ${p.alignment};">
+    <${tag} style="margin: 0; color: ${esc(p.color)}; font-size: ${p.fontSize}px; font-weight: ${p.fontWeight}; ${fontFamily ? `font-family: ${esc(fontFamily)};` : ''} line-height: 1.3;">${esc(p.text)}</${tag}>
+  </td>
+</tr>`;
+}
+function renderText(p, brand) {
+    const fontFamily = p.fontFamily || brand.fontBody || '';
+    // Content is plain text — split paragraphs on blank lines and `<br>` single breaks.
+    const escaped = esc(p.content)
+        .split(/\n{2,}/)
+        .map((para) => `<p style="margin: 0 0 12px 0;">${para.replace(/\n/g, '<br>')}</p>`)
+        .join('\n    ');
+    return `<tr>
+  <td style="padding: ${pad(p.padding)}; text-align: ${p.alignment}; color: ${esc(p.color)}; font-size: ${p.fontSize}px; font-weight: ${p.fontWeight}; ${fontFamily ? `font-family: ${esc(fontFamily)};` : ''} line-height: 1.55; word-break: break-word;">
+    ${escaped}
+  </td>
+</tr>`;
+}
+function renderImage(p) {
+    if (!p.src)
+        return '';
+    const heightAttr = p.height === 'auto' ? '' : ` height="${p.height}"`;
+    const img = `<img src="${esc(p.src)}" alt="${esc(p.alt)}" width="${p.width}"${heightAttr} border="0" style="display: block; width: 100%; max-width: ${p.width}px; height: auto;">`;
+    const content = p.linkUrl ? `<a href="${esc(p.linkUrl)}">${img}</a>` : img;
+    return `<tr>
+  <td style="padding: ${pad(p.padding)}; text-align: ${p.alignment};">
+    ${wrapAligned(content, p.alignment)}
+  </td>
+</tr>`;
+}
+function renderButton(p, brand) {
+    const s = BUTTON_SIZES[p.size];
+    const bg = p.backgroundColor || brand.brandColor || '#4F46E5';
+    const widthAttr = p.fullWidth ? ' width="100%"' : '';
+    return `<tr>
+  <td style="padding: ${pad(p.padding)};" align="${p.alignment}">
+    <table cellspacing="0" cellpadding="0" border="0" align="${p.alignment}"${widthAttr}>
+      <tr>
+        <td bgcolor="${esc(bg)}" style="background-color: ${esc(bg)}; border-radius: ${p.borderRadius}px; padding: ${s.paddingY}px ${s.paddingX}px; text-align: center;">
+          <a href="${esc(p.url)}" style="color: ${esc(p.textColor)}; font-size: ${s.fontSize}px; font-weight: 600; text-decoration: none;">${esc(p.text)}</a>
+        </td>
+      </tr>
+    </table>
+  </td>
+</tr>`;
+}
+function renderDivider(p) {
+    return `<tr>
+  <td style="padding: ${pad(p.padding)};">
+    <table cellspacing="0" cellpadding="0" border="0" width="${p.width}%" align="center">
+      <tr>
+        <td style="border-top: ${p.thickness}px ${p.style} ${esc(p.color)}; font-size: 0;">&nbsp;</td>
+      </tr>
+    </table>
+  </td>
+</tr>`;
+}
+function renderSpacer(p) {
+    return `<tr>
+  <td height="${p.height}" style="font-size: 0; line-height: 0;">&nbsp;</td>
+</tr>`;
+}
+function renderColumns(block, brand, contentWidth) {
+    const p = block.props;
+    const widths = getColumnWidths(p.layout);
+    const children = block.children ?? [];
+    const bg = p.backgroundColor !== 'transparent' ? ` background-color: ${esc(p.backgroundColor)};` : '';
+    const cells = widths
+        .map((width, i) => {
+        const colBlocks = (children[i] ?? [])
+            .map((b) => renderBlock(b, brand, contentWidth))
+            .join('\n');
+        const padRight = i < widths.length - 1 && p.gap > 0 ? ` style="padding-right: ${p.gap}px;"` : '';
+        return `<td valign="${p.verticalAlignment}" width="${Math.round((width / 100) * contentWidth)}"${padRight}>
+        <table cellspacing="0" cellpadding="0" border="0" width="100%">
+${colBlocks}
+        </table>
+      </td>`;
+    })
+        .join('\n');
+    return `<tr>
+  <td style="padding: ${pad(p.padding)};${bg}">
+    <table cellspacing="0" cellpadding="0" border="0" width="100%">
+      <tr>
+        ${cells}
+      </tr>
+    </table>
+  </td>
+</tr>`;
+}
+function renderSocial(p) {
+    const visible = p.links.filter((l) => Boolean(l.url));
+    if (visible.length === 0)
+        return '';
+    const cells = visible
+        .map((link, i) => `<td${i < visible.length - 1 ? ` style="padding-right: ${p.spacing}px;"` : ''}>
+          <a href="${esc(link.url)}" style="text-decoration: none;">
+            ${link.iconUrl
+        ? `<img src="${esc(link.iconUrl)}" alt="${esc(link.platform)}" width="${p.iconSize}" height="${p.iconSize}" border="0" style="display: block;">`
+        : `<span style="display: inline-block; padding: 4px 10px; background: #e5e7eb; color: #111827; font-size: 12px; border-radius: 999px;">${esc(link.platform)}</span>`}
+          </a>
+        </td>`)
+        .join('\n');
+    return `<tr>
+  <td style="padding: ${pad(p.padding)}; text-align: ${p.alignment};">
+    <table cellspacing="0" cellpadding="0" border="0" align="${p.alignment}">
+      <tr>${cells}</tr>
+    </table>
+  </td>
+</tr>`;
+}
+function renderFooter(p) {
+    const lines = [];
+    if (p.companyName)
+        lines.push(esc(p.companyName));
+    if (p.address)
+        lines.push(esc(p.address));
+    if (p.customText)
+        lines.push(esc(p.customText));
+    return `<tr>
+  <td style="padding: ${pad(p.padding)}; text-align: ${p.alignment}; color: ${esc(p.textColor)}; font-size: ${p.fontSize}px; line-height: 1.5;">
+    ${lines.join('<br>\n    ')}
+    ${p.unsubscribeText ? `<br><a href="{{unsubscribeUrl}}" style="color: ${esc(p.textColor)}; text-decoration: underline;">${esc(p.unsubscribeText)}</a>` : ''}
+  </td>
+</tr>`;
+}
+// ============================================
+// Helpers
+// ============================================
+function esc(str) {
+    return String(str)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+function pad(p) {
+    return `${p.top}px ${p.right}px ${p.bottom}px ${p.left}px`;
+}
+function wrapAligned(content, alignment) {
+    return `<table cellspacing="0" cellpadding="0" border="0" align="${alignment}">
+      <tr><td>${content}</td></tr>
+    </table>`;
+}

package/dist/email-builder/starter-shell.d.ts

@@ -0,0 +1,3 @@
+import type { EmailDocument } from './types.js';
+/** A simple non-empty starter document used by stories and the empty-state CTA. */
+export declare function createStarterDocument(): EmailDocument;

package/dist/email-builder/starter-shell.js

@@ -0,0 +1,21 @@
+import { createBlock } from './block-registry.js';
+/** A simple non-empty starter document used by stories and the empty-state CTA. */
+export function createStarterDocument() {
+    return {
+        blocks: [
+            createBlock('heading', { text: 'Welcome to your email' }),
+            createBlock('text', {
+                content: 'Use the palette on the left to add blocks. Click a block to edit its properties.',
+            }),
+            createBlock('button', { text: 'Get started', url: 'https://example.com' }),
+            createBlock('divider'),
+            createBlock('footer'),
+        ],
+        envelope: {
+            subject: 'Hello from Meda',
+            fromName: 'Meda',
+            fromEmail: 'hello@example.com',
+            preheader: 'A first look at the Meda email builder.',
+        },
+    };
+}

package/dist/email-builder/types.d.ts

@@ -0,0 +1,182 @@
+import type { ReactNode } from 'react';
+export declare const BLOCK_KINDS: readonly ["heading", "text", "image", "button", "divider", "spacer", "columns", "social", "footer"];
+export type BlockKind = (typeof BLOCK_KINDS)[number];
+export type Alignment = 'left' | 'center' | 'right';
+export interface SpacingValue {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export interface HeadingBlockProps {
+    text: string;
+    level: 1 | 2 | 3;
+    alignment: Alignment;
+    color: string;
+    fontFamily: string;
+    fontWeight: 400 | 500 | 600 | 700;
+    fontSize: number;
+    padding: SpacingValue;
+}
+export interface TextBlockProps {
+    /**
+     * Plain or simple HTML text. The reference Lexical editor was deferred — the
+     * default property editor renders a `<textarea>`; consumers can swap a richer
+     * editor in via the `renderTextEditor` slot in a future iteration.
+     */
+    content: string;
+    alignment: Alignment;
+    color: string;
+    fontFamily: string;
+    fontWeight: 300 | 400 | 500 | 600 | 700;
+    fontSize: number;
+    padding: SpacingValue;
+}
+export interface ImageBlockProps {
+    src: string;
+    alt: string;
+    linkUrl: string;
+    width: number;
+    height: number | 'auto';
+    alignment: Alignment;
+    padding: SpacingValue;
+}
+export interface ButtonBlockProps {
+    text: string;
+    url: string;
+    backgroundColor: string;
+    textColor: string;
+    borderRadius: number;
+    size: 'sm' | 'md' | 'lg';
+    alignment: Alignment;
+    fullWidth: boolean;
+    padding: SpacingValue;
+}
+export interface DividerBlockProps {
+    color: string;
+    thickness: number;
+    width: number;
+    style: 'solid' | 'dashed' | 'dotted';
+    padding: SpacingValue;
+}
+export interface SpacerBlockProps {
+    height: number;
+}
+export type ColumnLayout = '50-50' | '33-67' | '67-33' | '33-33-33';
+export interface ColumnsBlockProps {
+    layout: ColumnLayout;
+    verticalAlignment: 'top' | 'middle' | 'bottom';
+    backgroundColor: string;
+    gap: number;
+    mobileStacking: boolean;
+    padding: SpacingValue;
+}
+export interface SocialLink {
+    platform: string;
+    url: string;
+    iconUrl?: string;
+}
+export interface SocialBlockProps {
+    links: SocialLink[];
+    iconSize: number;
+    spacing: number;
+    alignment: Alignment;
+    padding: SpacingValue;
+}
+export interface FooterBlockProps {
+    companyName: string;
+    address: string;
+    customText: string;
+    unsubscribeText: string;
+    textColor: string;
+    fontSize: number;
+    alignment: Alignment;
+    padding: SpacingValue;
+}
+export interface BlockPropsMap {
+    heading: HeadingBlockProps;
+    text: TextBlockProps;
+    image: ImageBlockProps;
+    button: ButtonBlockProps;
+    divider: DividerBlockProps;
+    spacer: SpacerBlockProps;
+    columns: ColumnsBlockProps;
+    social: SocialBlockProps;
+    footer: FooterBlockProps;
+}
+export interface EmailBlock<K extends BlockKind = BlockKind> {
+    id: string;
+    kind: K;
+    props: BlockPropsMap[K];
+    /** Only used by `kind: 'columns'` — one entry per column. */
+    children?: EmailBlock[][];
+}
+export interface EmailEnvelope {
+    subject?: string;
+    fromName?: string;
+    fromEmail?: string;
+    replyTo?: string;
+    preheader?: string;
+}
+export interface EmailDocument {
+    blocks: EmailBlock[];
+    envelope?: EmailEnvelope;
+}
+export interface EmailBrand {
+    logoUrl?: string;
+    brandColor?: string;
+    accentColor?: string;
+    fontHeading?: string;
+    fontBody?: string;
+}
+export interface EmailBuilderLabels {
+    addBlock: string;
+    blockPalette: string;
+    blocksTab: string;
+    designTab: string;
+    envelopeTab: string;
+    rightRailEmpty: string;
+    openBlocks: string;
+    openInspector: string;
+    openSettings: string;
+    preview: string;
+    desktopPreview: string;
+    mobilePreview: string;
+    exportHtml: string;
+    emptyTitle: string;
+    emptyDescription: string;
+    inspectorEmpty: string;
+    duplicateBlock: string;
+    deleteBlock: string;
+    moveUp: string;
+    moveDown: string;
+}
+export declare const defaultEmailBuilderLabels: EmailBuilderLabels;
+export type DevicePreview = 'desktop' | 'mobile';
+export interface MediaPickerContext {
+    onPick: (url: string) => void;
+    onCancel: () => void;
+}
+export interface SavedBlocksContext {
+    onPick: (block: EmailBlock) => void;
+}
+export interface EmailBuilderProps {
+    document: EmailDocument;
+    onDocumentChange: (next: EmailDocument) => void;
+    brand?: EmailBrand;
+    /** Slot for picking media (image picker, etc.). Receives a callback to commit. */
+    renderMediaPicker?: (ctx: MediaPickerContext) => ReactNode;
+    /** Slot for the saved-blocks library. */
+    renderSavedBlocks?: (ctx: SavedBlocksContext) => ReactNode;
+    /** Slot for a richer text editor (e.g. Lexical). Defaults to a `<textarea>`. */
+    renderTextEditor?: (ctx: {
+        value: string;
+        onChange: (next: string) => void;
+    }) => ReactNode;
+    /** Override the export-HTML button handler. Receives the rendered HTML string. */
+    onExportHtml?: (html: string) => void;
+    labels?: Partial<EmailBuilderLabels>;
+    className?: string;
+    /** Initial device preview. Defaults to `desktop`. */
+    initialDevice?: DevicePreview;
+}