@medalsocial/meda 2.0.0 → 2.2.0

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

@@ -0,0 +1,9 @@
+import type { DevicePreview, EmailBuilderLabels } from './types.js';
+interface BuilderHeaderProps {
+    device: DevicePreview;
+    onDeviceChange: (next: DevicePreview) => void;
+    onExport: () => void;
+    labels: EmailBuilderLabels;
+}
+export declare function BuilderHeader({ device, onDeviceChange, onExport, labels }: BuilderHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/email-builder/builder-header.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Download } from 'lucide-react';
+import { cn } from '../lib/utils.js';
+import { ViewControls } from './view-controls.js';
+export function BuilderHeader({ device, onDeviceChange, onExport, labels }) {
+    return (_jsxs("header", { "data-slot": "email-builder-header", className: "flex h-12 items-center justify-between gap-2 border-border border-b bg-background px-4", children: [_jsx("div", { className: "font-semibold text-foreground text-sm", children: labels.preview }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ViewControls, { device: device, onDeviceChange: onDeviceChange, desktopLabel: labels.desktopPreview, mobileLabel: labels.mobilePreview }), _jsxs("button", { type: "button", onClick: onExport, className: cn('inline-flex h-9 items-center gap-2 rounded-md border border-input bg-background px-3 font-medium text-sm', 'hover:bg-accent hover:text-accent-foreground'), children: [_jsx(Download, { className: "size-4", "aria-hidden": true }), labels.exportHtml] })] })] }));
+}

package/dist/email-builder/builder-left-tabs.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { EmailBuilderLabels } from './types.js';
+interface BuilderLeftTabsProps {
+    labels: EmailBuilderLabels;
+    blocksContent: ReactNode;
+    designContent?: ReactNode;
+    envelopeContent: ReactNode;
+}
+/** Vertical tab strip + content panel for the left sidebar. */
+export declare function BuilderLeftTabs({ labels, blocksContent, designContent, envelopeContent, }: BuilderLeftTabsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/email-builder/builder-left-tabs.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { cn } from '../lib/utils.js';
+/** Vertical tab strip + content panel for the left sidebar. */
+export function BuilderLeftTabs({ labels, blocksContent, designContent, envelopeContent, }) {
+    const [tab, setTab] = useState('blocks');
+    const tabs = [
+        { id: 'blocks', label: labels.blocksTab, content: blocksContent },
+        { id: 'envelope', label: labels.envelopeTab, content: envelopeContent },
+    ];
+    if (designContent) {
+        tabs.splice(1, 0, { id: 'design', label: labels.designTab, content: designContent });
+    }
+    /* v8 ignore next -- fallback to tabs[0] is unreachable; tab state is always set to a valid TabId */
+    const active = tabs.find((t) => t.id === tab) ?? tabs[0];
+    return (_jsxs("div", { "data-slot": "email-builder-left-tabs", className: "flex h-full flex-col", children: [_jsx("div", { role: "tablist", className: "flex border-border border-b", children: tabs.map((t) => (_jsx("button", { type: "button", role: "tab", "aria-selected": t.id === tab, onClick: () => setTab(t.id), className: cn('flex h-11 flex-1 items-center justify-center text-sm transition-colors', t.id === tab
+                        ? 'border-primary border-b-2 font-medium text-foreground'
+                        : 'text-muted-foreground hover:text-foreground'), children: t.label }, t.id))) }), _jsx("div", { role: "tabpanel", className: "flex-1 overflow-y-auto", children: active?.content })] }));
+}

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

@@ -0,0 +1,3 @@
+import { type EmailBuilderProps } from './types.js';
+export declare function EmailBuilder({ document, onDocumentChange, brand, renderMediaPicker, renderSavedBlocks, renderTextEditor, onExportHtml, labels: labelsProp, className, initialDevice, }: EmailBuilderProps): import("react/jsx-runtime").JSX.Element;
+export { renderToEmailHtml } from './render-to-email-html.js';

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

@@ -0,0 +1,94 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { cn } from '../lib/utils.js';
+import { BlockPalette } from './block-palette.js';
+import { createBlock } from './block-registry.js';
+import { BuilderCanvas } from './builder-canvas.js';
+import { BuilderHeader } from './builder-header.js';
+import { BuilderLeftTabs } from './builder-left-tabs.js';
+import { EnvelopeCard } from './envelope-card.js';
+import { FloatingBar } from './floating-bar.js';
+import { addBlock, duplicateBlock, moveBlock, removeBlock, updateBlockProps, } from './internal/builder-state-utils.js';
+import { BuilderDndWrapper } from './internal/dnd-wrapper.js';
+import { MobileDrawer } from './mobile-drawers.js';
+import { MobileTabBar } from './mobile-tab-bar.js';
+import { PropertyInspector } from './property-inspector.js';
+import { renderToEmailHtml } from './render-to-email-html.js';
+import { defaultEmailBuilderLabels, } from './types.js';
+export function EmailBuilder({ document, onDocumentChange, brand, renderMediaPicker, renderSavedBlocks, renderTextEditor, onExportHtml, labels: labelsProp, className, initialDevice = 'desktop', }) {
+    const labels = useMemo(() => ({ ...defaultEmailBuilderLabels, ...(labelsProp ?? {}) }), [labelsProp]);
+    const [selectedBlockId, setSelectedBlockId] = useState(null);
+    const [device, setDevice] = useState(initialDevice);
+    const [mobilePane, setMobilePane] = useState(null);
+    const selectedBlock = useMemo(() => document.blocks.find((b) => b.id === selectedBlockId) ?? null, [document.blocks, selectedBlockId]);
+    const handleAddBlock = useCallback((kind) => {
+        const block = createBlock(kind);
+        onDocumentChange(addBlock(document, block));
+        setSelectedBlockId(block.id);
+        setMobilePane(null);
+    }, [document, onDocumentChange]);
+    const handleSavedBlockPick = useCallback((block) => {
+        onDocumentChange(addBlock(document, block));
+        setSelectedBlockId(block.id);
+        setMobilePane(null);
+    }, [document, onDocumentChange]);
+    const handlePropChange = useCallback((blockId, patch) => {
+        onDocumentChange(updateBlockProps(document, blockId, patch));
+    }, [document, onDocumentChange]);
+    const handleDelete = useCallback((blockId) => {
+        onDocumentChange(removeBlock(document, blockId));
+        setSelectedBlockId(null);
+    }, [document, onDocumentChange]);
+    const handleDuplicate = useCallback((blockId) => {
+        onDocumentChange(duplicateBlock(document, blockId));
+    }, [document, onDocumentChange]);
+    const handleMove = useCallback((blockId, delta) => {
+        const idx = document.blocks.findIndex((b) => b.id === blockId);
+        /* v8 ignore next -- defensive guard; floating bar only renders for blocks that exist in document */
+        if (idx === -1)
+            return;
+        onDocumentChange(moveBlock(document, idx, idx + delta));
+    }, [document, onDocumentChange]);
+    const handleDragEnd = useCallback((event) => {
+        const { active, over } = event;
+        if (!over || active.id === over.id)
+            return;
+        const fromIndex = document.blocks.findIndex((b) => b.id === active.id);
+        const toIndex = document.blocks.findIndex((b) => b.id === over.id);
+        if (fromIndex === -1 || toIndex === -1)
+            return;
+        onDocumentChange(moveBlock(document, fromIndex, toIndex));
+    }, [document, onDocumentChange]);
+    const handleExport = useCallback(() => {
+        const html = renderToEmailHtml(document, brand ? { brand } : undefined);
+        if (onExportHtml) {
+            onExportHtml(html);
+            return;
+        }
+        /* v8 ignore next -- typeof window guard is always true in jsdom; SSR-only branch */
+        if (typeof window !== 'undefined') {
+            const blob = new Blob([html], { type: 'text/html' });
+            const url = URL.createObjectURL(blob);
+            const a = window.document.createElement('a');
+            a.href = url;
+            a.download = `${document.envelope?.subject ?? 'email'}.html`;
+            a.click();
+            URL.revokeObjectURL(url);
+        }
+    }, [brand, document, onExportHtml]);
+    const blockIds = useMemo(() => document.blocks.map((b) => b.id), [document.blocks]);
+    const blocksTabContent = (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(BlockPalette, { onPick: handleAddBlock }), renderSavedBlocks ? (_jsx("div", { "data-slot": "email-builder-saved-blocks-slot", className: "border-border border-t p-2", children: renderSavedBlocks({ onPick: handleSavedBlockPick }) })) : null] }));
+    const envelopeTabContent = (_jsx(EnvelopeCard, { envelope: document.envelope, onChange: (envelope) => onDocumentChange({ ...document, envelope }) }));
+    return (_jsxs("div", { "data-slot": "email-builder", className: cn('relative flex h-full min-h-[600px] w-full flex-col bg-background', className), children: [_jsx(BuilderHeader, { device: device, onDeviceChange: setDevice, onExport: handleExport, labels: labels }), _jsx(BuilderDndWrapper, { blockIds: blockIds, onDragEnd: handleDragEnd, children: _jsxs("div", { className: "flex min-h-0 flex-1", children: [_jsx("aside", { "data-slot": "email-builder-left", "aria-label": labels.blocksTab, className: "hidden w-72 shrink-0 border-border border-r md:block", children: _jsx(BuilderLeftTabs, { labels: labels, blocksContent: blocksTabContent, envelopeContent: envelopeTabContent }) }), _jsx("main", { className: "min-w-0 flex-1", children: _jsx(BuilderCanvas, { blocks: document.blocks, selectedBlockId: selectedBlockId, onSelectBlock: setSelectedBlockId, device: device, labels: labels, renderFloatingBar: (block) => (_jsx(FloatingBar, { labels: labels, canMoveUp: document.blocks[0]?.id !== block.id, canMoveDown: document.blocks[document.blocks.length - 1]?.id !== block.id, onMoveUp: () => handleMove(block.id, -1), onMoveDown: () => handleMove(block.id, 1), onDuplicate: () => handleDuplicate(block.id), onDelete: () => handleDelete(block.id) })) }) }), _jsx("aside", { "data-slot": "email-builder-right", "aria-label": labels.openInspector, className: "hidden w-80 shrink-0 overflow-y-auto border-border border-l md:block", children: _jsx(PropertyInspector, { block: selectedBlock, onChange: (id, patch) => handlePropChange(id, patch), emptyContent: labels.inspectorEmpty, renderMediaPicker: renderMediaPicker, renderTextEditor: renderTextEditor }) })] }) }), _jsx(MobileTabBar, { labels: labels, onOpenBlocks: () => setMobilePane('blocks'), onOpenInspector: () => setMobilePane('inspector'), onOpenSettings: () => setMobilePane('settings') }), _jsx(MobileDrawer, { open: mobilePane === 'blocks', 
+                /* v8 ignore next -- vaul close events (swipe/overlay/escape) don't fire in jsdom */
+                onOpenChange: (o) => !o && setMobilePane(null), title: labels.blocksTab, children: blocksTabContent }), _jsx(MobileDrawer, { open: mobilePane === 'inspector', 
+                /* v8 ignore next -- vaul close events (swipe/overlay/escape) don't fire in jsdom */
+                onOpenChange: (o) => !o && setMobilePane(null), title: labels.openInspector, children: _jsx(PropertyInspector, { block: selectedBlock, 
+                    /* v8 ignore next -- onChange is identical to the right-rail's; mobile drawer portal content is not exercised in jsdom */
+                    onChange: (id, patch) => handlePropChange(id, patch), emptyContent: labels.inspectorEmpty, renderMediaPicker: renderMediaPicker, renderTextEditor: renderTextEditor }) }), _jsx(MobileDrawer, { open: mobilePane === 'settings', 
+                /* v8 ignore next -- vaul close events (swipe/overlay/escape) don't fire in jsdom */
+                onOpenChange: (o) => !o && setMobilePane(null), title: labels.envelopeTab, children: envelopeTabContent })] }));
+}
+// Re-exported for convenience.
+export { renderToEmailHtml } from './render-to-email-html.js';

package/dist/email-builder/envelope-card.d.ts

@@ -0,0 +1,7 @@
+import type { EmailEnvelope } from './types.js';
+interface EnvelopeCardProps {
+    envelope: EmailEnvelope | undefined;
+    onChange: (next: EmailEnvelope) => void;
+}
+export declare function EnvelopeCard({ envelope, onChange }: EnvelopeCardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/email-builder/envelope-card.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+const fieldClass = 'w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring';
+export function EnvelopeCard({ envelope, onChange }) {
+    const e = envelope ?? {};
+    const update = (patch) => onChange({ ...e, ...patch });
+    const ids = {
+        subject: useId(),
+        fromName: useId(),
+        fromEmail: useId(),
+        replyTo: useId(),
+        preheader: useId(),
+    };
+    return (_jsxs("div", { "data-slot": "email-builder-envelope", className: "flex flex-col gap-2 p-3", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("label", { htmlFor: ids.subject, className: "font-medium text-foreground text-xs", children: "Subject" }), _jsx("input", { id: ids.subject, type: "text", value: e.subject ?? '', onChange: (ev) => update({ subject: ev.target.value }), className: fieldClass })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("label", { htmlFor: ids.fromName, className: "font-medium text-foreground text-xs", children: "From name" }), _jsx("input", { id: ids.fromName, type: "text", value: e.fromName ?? '', onChange: (ev) => update({ fromName: ev.target.value }), className: fieldClass })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("label", { htmlFor: ids.fromEmail, className: "font-medium text-foreground text-xs", children: "From email" }), _jsx("input", { id: ids.fromEmail, type: "email", value: e.fromEmail ?? '', onChange: (ev) => update({ fromEmail: ev.target.value }), className: fieldClass })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("label", { htmlFor: ids.replyTo, className: "font-medium text-foreground text-xs", children: "Reply-to" }), _jsx("input", { id: ids.replyTo, type: "email", value: e.replyTo ?? '', onChange: (ev) => update({ replyTo: ev.target.value }), className: fieldClass })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("label", { htmlFor: ids.preheader, className: "font-medium text-foreground text-xs", children: "Preheader" }), _jsx("input", { id: ids.preheader, type: "text", value: e.preheader ?? '', onChange: (ev) => update({ preheader: ev.target.value }), className: fieldClass })] })] }));
+}

package/dist/email-builder/floating-bar.d.ts

@@ -0,0 +1,13 @@
+import type { EmailBuilderLabels } from './types.js';
+interface FloatingBarProps {
+    labels: EmailBuilderLabels;
+    canMoveUp: boolean;
+    canMoveDown: boolean;
+    onMoveUp: () => void;
+    onMoveDown: () => void;
+    onDuplicate: () => void;
+    onDelete: () => void;
+}
+/** Per-block floating action bar. Rendered next to the selected block. */
+export declare function FloatingBar({ labels, canMoveUp, canMoveDown, onMoveUp, onMoveDown, onDuplicate, onDelete, }: FloatingBarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/email-builder/floating-bar.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp, Copy, Trash2 } from 'lucide-react';
+import { cn } from '../lib/utils.js';
+/** Per-block floating action bar. Rendered next to the selected block. */
+export function FloatingBar({ labels, canMoveUp, canMoveDown, onMoveUp, onMoveDown, onDuplicate, onDelete, }) {
+    const btnClass = 'inline-flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40';
+    return (_jsxs("div", { "data-slot": "email-builder-floating-bar", className: "inline-flex rounded-md border border-input bg-background p-0.5 shadow-sm", children: [_jsx("button", { type: "button", onClick: onMoveUp, disabled: !canMoveUp, "aria-label": labels.moveUp, className: btnClass, children: _jsx(ChevronUp, { className: "size-4", "aria-hidden": true }) }), _jsx("button", { type: "button", onClick: onMoveDown, disabled: !canMoveDown, "aria-label": labels.moveDown, className: btnClass, children: _jsx(ChevronDown, { className: "size-4", "aria-hidden": true }) }), _jsx("button", { type: "button", onClick: onDuplicate, "aria-label": labels.duplicateBlock, className: btnClass, children: _jsx(Copy, { className: "size-4", "aria-hidden": true }) }), _jsx("button", { type: "button", onClick: onDelete, "aria-label": labels.deleteBlock, className: cn(btnClass, 'hover:bg-destructive/10 hover:text-destructive'), children: _jsx(Trash2, { className: "size-4", "aria-hidden": true }) })] }));
+}

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

@@ -0,0 +1,4 @@
+export { EmailBuilder } from './email-builder.js';
+export { type RenderToEmailHtmlOptions, renderToEmailHtml, } from './render-to-email-html.js';
+export { createStarterDocument } from './starter-shell.js';
+export { type Alignment, BLOCK_KINDS, type BlockKind, type BlockPropsMap, type ButtonBlockProps, type ColumnLayout, type ColumnsBlockProps, type DevicePreview, type DividerBlockProps, defaultEmailBuilderLabels, type EmailBlock, type EmailBrand, type EmailBuilderLabels, type EmailBuilderProps, type EmailDocument, type EmailEnvelope, type FooterBlockProps, type HeadingBlockProps, type ImageBlockProps, type MediaPickerContext, type SavedBlocksContext, type SocialBlockProps, type SocialLink, type SpacerBlockProps, type SpacingValue, type TextBlockProps, } from './types.js';

package/dist/email-builder/index.js

@@ -0,0 +1,12 @@
+// open/meda/src/email-builder/index.ts
+//
+// Subpath barrel for `@medalsocial/meda/email-builder`.
+//
+// Single top-level `EmailBuilder` component. Heavy/optional integrations
+// (rich text editor, media browser, saved blocks library) are injected via
+// render-prop slots — see `EmailBuilderProps`. Block primitives, palettes,
+// inspectors, and renderers remain internal implementation details.
+export { EmailBuilder } from './email-builder.js';
+export { renderToEmailHtml, } from './render-to-email-html.js';
+export { createStarterDocument } from './starter-shell.js';
+export { BLOCK_KINDS, defaultEmailBuilderLabels, } from './types.js';

package/dist/email-builder/internal/builder-state-utils.d.ts

@@ -0,0 +1,7 @@
+import type { BlockKind, BlockPropsMap, EmailBlock, EmailDocument } from '../types.js';
+export declare function addBlock(doc: EmailDocument, block: EmailBlock, atIndex?: number): EmailDocument;
+export declare function removeBlock(doc: EmailDocument, blockId: string): EmailDocument;
+export declare function moveBlock(doc: EmailDocument, fromIndex: number, toIndex: number): EmailDocument;
+export declare function updateBlockProps<K extends BlockKind>(doc: EmailDocument, blockId: string, patch: Partial<BlockPropsMap[K]>): EmailDocument;
+export declare function duplicateBlock(doc: EmailDocument, blockId: string): EmailDocument;
+export declare function findBlock(doc: EmailDocument, blockId: string): EmailBlock | null;

package/dist/email-builder/internal/builder-state-utils.js

@@ -0,0 +1,53 @@
+let __idCounter = 0;
+function genId(prefix = 'blk') {
+    __idCounter += 1;
+    return `${prefix}_${Date.now().toString(36)}_${__idCounter.toString(36)}`;
+}
+export function addBlock(doc, block, atIndex) {
+    const blocks = [...doc.blocks];
+    const idx = atIndex ?? blocks.length;
+    blocks.splice(idx, 0, block);
+    return { ...doc, blocks };
+}
+export function removeBlock(doc, blockId) {
+    return { ...doc, blocks: doc.blocks.filter((b) => b.id !== blockId) };
+}
+export function moveBlock(doc, fromIndex, toIndex) {
+    if (fromIndex === toIndex)
+        return doc;
+    const blocks = [...doc.blocks];
+    const [moved] = blocks.splice(fromIndex, 1);
+    if (!moved)
+        return doc;
+    blocks.splice(toIndex, 0, moved);
+    return { ...doc, blocks };
+}
+export function updateBlockProps(doc, blockId, patch) {
+    return {
+        ...doc,
+        blocks: doc.blocks.map((b) => b.id === blockId
+            ? { ...b, props: { ...b.props, ...patch } }
+            : b),
+    };
+}
+export function duplicateBlock(doc, blockId) {
+    const idx = doc.blocks.findIndex((b) => b.id === blockId);
+    if (idx === -1)
+        return doc;
+    const original = doc.blocks[idx];
+    /* v8 ignore next -- defensive guard; findIndex guarantees idx is valid */
+    if (!original)
+        return doc;
+    const clone = {
+        ...original,
+        id: genId(original.kind),
+        props: { ...original.props },
+        children: original.children?.map((col) => col.map((b) => ({ ...b, id: genId(b.kind) }))),
+    };
+    const blocks = [...doc.blocks];
+    blocks.splice(idx + 1, 0, clone);
+    return { ...doc, blocks };
+}
+export function findBlock(doc, blockId) {
+    return doc.blocks.find((b) => b.id === blockId) ?? null;
+}

package/dist/email-builder/internal/dnd-wrapper.d.ts

@@ -0,0 +1,10 @@
+import { type DragEndEvent } from '@dnd-kit/core';
+import type { ReactNode } from 'react';
+interface BuilderDndWrapperProps {
+    blockIds: string[];
+    onDragEnd: (event: DragEndEvent) => void;
+    children: ReactNode;
+}
+/** Wraps the canvas in a vertical-list sortable DndContext. */
+export declare function BuilderDndWrapper({ blockIds, onDragEnd, children }: BuilderDndWrapperProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/email-builder/internal/dnd-wrapper.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+/** Wraps the canvas in a vertical-list sortable DndContext. */
+export function BuilderDndWrapper({ blockIds, onDragEnd, children }) {
+    const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }), useSensor(KeyboardSensor));
+    return (_jsx(DndContext, { sensors: sensors, onDragEnd: onDragEnd, children: _jsx(SortableContext, { items: blockIds, strategy: verticalListSortingStrategy, children: children }) }));
+}

package/dist/email-builder/internal/email-font-options.d.ts

@@ -0,0 +1,5 @@
+export interface EmailFontOption {
+    label: string;
+    value: string;
+}
+export declare const EMAIL_FONT_OPTIONS: EmailFontOption[];

package/dist/email-builder/internal/email-font-options.js

@@ -0,0 +1,12 @@
+export const EMAIL_FONT_OPTIONS = [
+    { label: 'Inherit', value: '' },
+    {
+        label: 'System',
+        value: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    },
+    { label: 'Arial', value: 'Arial, Helvetica, sans-serif' },
+    { label: 'Georgia', value: 'Georgia, "Times New Roman", serif' },
+    { label: 'Helvetica', value: '"Helvetica Neue", Helvetica, Arial, sans-serif' },
+    { label: 'Times', value: '"Times New Roman", Times, serif' },
+    { label: 'Courier', value: '"Courier New", Courier, monospace' },
+];

package/dist/email-builder/mobile-drawers.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+interface MobileDrawerProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    children: ReactNode;
+}
+/** Generic bottom-sheet drawer used for the mobile palette/inspector. */
+export declare function MobileDrawer({ open, onOpenChange, title, children }: MobileDrawerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/email-builder/mobile-drawers.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from '../components/ui/drawer.js';
+/** Generic bottom-sheet drawer used for the mobile palette/inspector. */
+export function MobileDrawer({ open, onOpenChange, title, children }) {
+    return (_jsx(Drawer, { open: open, onOpenChange: onOpenChange, children: _jsxs(DrawerContent, { children: [_jsx(DrawerHeader, { children: _jsx(DrawerTitle, { children: title }) }), _jsx("div", { className: "max-h-[70vh] overflow-y-auto px-4 pb-6", children: children })] }) }));
+}

package/dist/email-builder/mobile-tab-bar.d.ts

@@ -0,0 +1,10 @@
+import type { EmailBuilderLabels } from './types.js';
+interface MobileTabBarProps {
+    labels: EmailBuilderLabels;
+    onOpenBlocks: () => void;
+    onOpenInspector: () => void;
+    onOpenSettings: () => void;
+}
+/** Bottom-of-screen tab bar visible on mobile. */
+export declare function MobileTabBar({ labels, onOpenBlocks, onOpenInspector, onOpenSettings, }: MobileTabBarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/email-builder/mobile-tab-bar.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LayoutPanelLeft, Settings, SlidersHorizontal } from 'lucide-react';
+import { cn } from '../lib/utils.js';
+/** Bottom-of-screen tab bar visible on mobile. */
+export function MobileTabBar({ labels, onOpenBlocks, onOpenInspector, onOpenSettings, }) {
+    const btnClass = 'flex flex-1 flex-col items-center justify-center gap-1 py-2 text-muted-foreground hover:text-foreground';
+    return (_jsxs("div", { "data-slot": "email-builder-mobile-tab-bar", className: cn('fixed inset-x-0 bottom-0 z-40 flex items-stretch border-border border-t bg-background md:hidden'), children: [_jsxs("button", { type: "button", onClick: onOpenBlocks, className: btnClass, children: [_jsx(LayoutPanelLeft, { className: "size-5", "aria-hidden": true }), _jsx("span", { className: "text-xs", children: labels.openBlocks })] }), _jsxs("button", { type: "button", onClick: onOpenInspector, className: btnClass, children: [_jsx(SlidersHorizontal, { className: "size-5", "aria-hidden": true }), _jsx("span", { className: "text-xs", children: labels.openInspector })] }), _jsxs("button", { type: "button", onClick: onOpenSettings, className: btnClass, children: [_jsx(Settings, { className: "size-5", "aria-hidden": true }), _jsx("span", { className: "text-xs", children: labels.openSettings })] })] }));
+}

package/dist/email-builder/property-editors/_shared.d.ts

@@ -0,0 +1,58 @@
+import type { ReactNode } from 'react';
+import type { Alignment, SpacingValue } from '../types.js';
+/**
+ * Wraps a labeled control. If `htmlFor` is set, the label uses it. Otherwise
+ * the field auto-injects `aria-label` on the immediate child element so axe
+ * passes without the consumer manually wiring ids everywhere.
+ */
+export declare function Field({ label, htmlFor, children, }: {
+    label: string;
+    htmlFor?: string;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TextInput({ id, value, onChange, placeholder, 'aria-label': ariaLabel, }: {
+    id?: string;
+    value: string;
+    onChange: (next: string) => void;
+    placeholder?: string;
+    'aria-label'?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TextAreaInput({ id, value, onChange, rows, 'aria-label': ariaLabel, }: {
+    id?: string;
+    value: string;
+    onChange: (next: string) => void;
+    rows?: number;
+    'aria-label'?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function NumberInput({ id, value, onChange, min, max, step, 'aria-label': ariaLabel, }: {
+    id?: string;
+    value: number;
+    onChange: (next: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    'aria-label'?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ColorInput({ id, value, onChange, }: {
+    id?: string;
+    value: string;
+    onChange: (next: string) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SelectInput<T extends string>({ id, value, options, onChange, 'aria-label': ariaLabel, }: {
+    id?: string;
+    value: T;
+    options: {
+        value: T;
+        label: string;
+    }[];
+    onChange: (next: T) => void;
+    'aria-label'?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function AlignmentToggle({ value, onChange, }: {
+    value: Alignment;
+    onChange: (next: Alignment) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SpacingEditor({ value, onChange, }: {
+    value: SpacingValue;
+    onChange: (next: SpacingValue) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/email-builder/property-editors/_shared.js

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement } from 'react';
+import { cn } from '../../lib/utils.js';
+/**
+ * Wraps a labeled control. If `htmlFor` is set, the label uses it. Otherwise
+ * the field auto-injects `aria-label` on the immediate child element so axe
+ * passes without the consumer manually wiring ids everywhere.
+ */
+export function Field({ label, htmlFor, children, }) {
+    const enhanced = !htmlFor && isValidElement(children)
+        ? cloneElement(children, {
+            'aria-label': label,
+        })
+        : children;
+    return (_jsxs("div", { "data-slot": "email-builder-field", className: "flex flex-col gap-1.5", children: [_jsx("label", { htmlFor: htmlFor, className: "font-medium text-foreground text-xs", children: label }), enhanced] }));
+}
+export function TextInput({ id, value, onChange, placeholder, 'aria-label': ariaLabel, }) {
+    return (_jsx("input", { id: id, type: "text", value: value, placeholder: placeholder, "aria-label": ariaLabel, onChange: (e) => onChange(e.target.value), className: "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring" }));
+}
+export function TextAreaInput({ id, value, onChange, rows = 4, 'aria-label': ariaLabel, }) {
+    return (_jsx("textarea", { id: id, value: value, rows: rows, "aria-label": ariaLabel, onChange: (e) => onChange(e.target.value), className: "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring" }));
+}
+export function NumberInput({ id, value, onChange, min, max, step = 1, 'aria-label': ariaLabel, }) {
+    return (_jsx("input", { id: id, type: "number", value: value, min: min, max: max, step: step, "aria-label": ariaLabel, onChange: (e) => {
+            const n = Number(e.target.value);
+            /* v8 ignore next -- number inputs sanitize non-numeric input in real browsers; jsdom always coerces to 0 */
+            if (!Number.isNaN(n))
+                onChange(n);
+        }, className: "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring" }));
+}
+export function ColorInput({ id, value, onChange, }) {
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { id: id, type: "color", value: value || '#000000', onChange: (e) => onChange(e.target.value), className: "h-8 w-10 cursor-pointer rounded border border-input bg-transparent", "aria-label": "Color picker" }), _jsx("input", { type: "text", value: value, "aria-label": "Color value (hex)", onChange: (e) => onChange(e.target.value), className: "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring" })] }));
+}
+export function SelectInput({ id, value, options, onChange, 'aria-label': ariaLabel, }) {
+    return (_jsx("select", { id: id, value: value, "aria-label": ariaLabel, onChange: (e) => onChange(e.target.value), className: "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring", children: options.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value))) }));
+}
+export function AlignmentToggle({ value, onChange, }) {
+    const options = ['left', 'center', 'right'];
+    return (_jsx("div", { role: "radiogroup", "aria-label": "Alignment", className: "inline-flex rounded-md border border-input p-0.5", children: options.map((opt) => (_jsx("button", { type: "button", role: "radio", "aria-checked": value === opt, onClick: () => onChange(opt), className: cn('rounded px-3 py-1.5 text-xs capitalize', value === opt
+                ? 'bg-primary text-primary-foreground'
+                : 'text-muted-foreground hover:bg-accent'), children: opt }, opt))) }));
+}
+export function SpacingEditor({ value, onChange, }) {
+    return (_jsx("div", { className: "grid grid-cols-2 gap-2", children: ['top', 'right', 'bottom', 'left'].map((side) => {
+            const label = (side[0]?.toUpperCase() + side.slice(1));
+            return (_jsxs("div", { "data-slot": "email-builder-field", className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "font-medium text-foreground text-xs", children: label }), _jsx("input", { type: "number", value: value[side], min: 0, "aria-label": `${label} padding`, onChange: (e) => {
+                            const n = Number(e.target.value);
+                            /* v8 ignore next -- number inputs sanitize non-numeric input in real browsers; jsdom always coerces to 0 */
+                            if (!Number.isNaN(n))
+                                onChange({ ...value, [side]: n });
+                        }, className: "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring" })] }, side));
+        }) }));
+}

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

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

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

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlignmentToggle, ColorInput, Field, NumberInput, SelectInput, SpacingEditor, TextInput, } from './_shared.js';
+export function ButtonPropertyEditor({ value, onChange }) {
+    return (_jsxs("div", { "data-slot": "email-builder-property-button", className: "flex flex-col gap-3", children: [_jsx(Field, { label: "Text", htmlFor: "btn-text", children: _jsx(TextInput, { id: "btn-text", value: value.text, onChange: (text) => onChange({ text }) }) }), _jsx(Field, { label: "URL", htmlFor: "btn-url", children: _jsx(TextInput, { id: "btn-url", value: value.url, onChange: (url) => onChange({ url }) }) }), _jsx(Field, { label: "Background color", children: _jsx(ColorInput, { value: value.backgroundColor, onChange: (backgroundColor) => onChange({ backgroundColor }) }) }), _jsx(Field, { label: "Text color", children: _jsx(ColorInput, { value: value.textColor, onChange: (textColor) => onChange({ textColor }) }) }), _jsx(Field, { label: "Border radius (px)", children: _jsx(NumberInput, { value: value.borderRadius, min: 0, max: 64, onChange: (borderRadius) => onChange({ borderRadius }) }) }), _jsx(Field, { label: "Size", children: _jsx(SelectInput, { value: value.size, options: [
+                        { value: 'sm', label: 'Small' },
+                        { value: 'md', label: 'Medium' },
+                        { value: 'lg', label: 'Large' },
+                    ], onChange: (size) => onChange({ size }) }) }), _jsx(Field, { label: "Alignment", children: _jsx(AlignmentToggle, { value: value.alignment, onChange: (alignment) => onChange({ alignment }) }) }), _jsx(Field, { label: "Full width", children: _jsxs("label", { className: "inline-flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: value.fullWidth, onChange: (e) => onChange({ fullWidth: e.target.checked }) }), "Stretch to container width"] }) }), _jsx(Field, { label: "Padding", children: _jsx(SpacingEditor, { value: value.padding, onChange: (padding) => onChange({ padding }) }) })] }));
+}

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

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

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

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ColorInput, Field, NumberInput, SelectInput, SpacingEditor } from './_shared.js';
+export function ColumnsPropertyEditor({ value, onChange }) {
+    return (_jsxs("div", { "data-slot": "email-builder-property-columns", className: "flex flex-col gap-3", children: [_jsx(Field, { label: "Layout", children: _jsx(SelectInput, { value: value.layout, options: [
+                        { value: '50-50', label: '2 columns (50/50)' },
+                        { value: '33-67', label: '2 columns (33/67)' },
+                        { value: '67-33', label: '2 columns (67/33)' },
+                        { value: '33-33-33', label: '3 columns' },
+                    ], onChange: (layout) => onChange({ layout }) }) }), _jsx(Field, { label: "Vertical alignment", children: _jsx(SelectInput, { value: value.verticalAlignment, options: [
+                        { value: 'top', label: 'Top' },
+                        { value: 'middle', label: 'Middle' },
+                        { value: 'bottom', label: 'Bottom' },
+                    ], onChange: (verticalAlignment) => onChange({ verticalAlignment }) }) }), _jsx(Field, { label: "Background color", children: _jsx(ColorInput, { value: value.backgroundColor === 'transparent' ? '#ffffff' : value.backgroundColor, onChange: (backgroundColor) => onChange({ backgroundColor }) }) }), _jsx(Field, { label: "Gap (px)", children: _jsx(NumberInput, { value: value.gap, min: 0, max: 64, onChange: (gap) => onChange({ gap }) }) }), _jsx(Field, { label: "Mobile stacking", children: _jsxs("label", { className: "inline-flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: value.mobileStacking, onChange: (e) => onChange({ mobileStacking: e.target.checked }) }), "Stack columns vertically on mobile"] }) }), _jsx(Field, { label: "Padding", children: _jsx(SpacingEditor, { value: value.padding, onChange: (padding) => onChange({ padding }) }) })] }));
+}

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

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

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

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ColorInput, Field, NumberInput, SelectInput, SpacingEditor } from './_shared.js';
+export function DividerPropertyEditor({ value, onChange }) {
+    return (_jsxs("div", { "data-slot": "email-builder-property-divider", className: "flex flex-col gap-3", children: [_jsx(Field, { label: "Color", children: _jsx(ColorInput, { value: value.color, onChange: (color) => onChange({ color }) }) }), _jsx(Field, { label: "Thickness (px)", children: _jsx(NumberInput, { value: value.thickness, min: 1, max: 20, onChange: (thickness) => onChange({ thickness }) }) }), _jsx(Field, { label: "Width (%)", children: _jsx(NumberInput, { value: value.width, min: 1, max: 100, onChange: (width) => onChange({ width }) }) }), _jsx(Field, { label: "Style", children: _jsx(SelectInput, { value: value.style, options: [
+                        { value: 'solid', label: 'Solid' },
+                        { value: 'dashed', label: 'Dashed' },
+                        { value: 'dotted', label: 'Dotted' },
+                    ], onChange: (style) => onChange({ style }) }) }), _jsx(Field, { label: "Padding", children: _jsx(SpacingEditor, { value: value.padding, onChange: (padding) => onChange({ padding }) }) })] }));
+}

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

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

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

@@ -0,0 +1,6 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlignmentToggle, ColorInput, Field, NumberInput, SpacingEditor, TextAreaInput, TextInput, } from './_shared.js';
+export function FooterPropertyEditor({ value, onChange }) {
+    return (_jsxs("div", { "data-slot": "email-builder-property-footer", className: "flex flex-col gap-3", children: [_jsx(Field, { label: "Company name", children: _jsx(TextInput, { value: value.companyName, onChange: (companyName) => onChange({ companyName }) }) }), _jsx(Field, { label: "Address", children: _jsx(TextInput, { value: value.address, onChange: (address) => onChange({ address }) }) }), _jsx(Field, { label: "Custom text", children: _jsx(TextAreaInput, { value: value.customText, onChange: (customText) => onChange({ customText }) }) }), _jsx(Field, { label: "Unsubscribe link text", children: _jsx(TextInput, { value: value.unsubscribeText, onChange: (unsubscribeText) => onChange({ unsubscribeText }) }) }), _jsx(Field, { label: "Text color", children: _jsx(ColorInput, { value: value.textColor, onChange: (textColor) => onChange({ textColor }) }) }), _jsx(Field, { label: "Font size (px)", children: _jsx(NumberInput, { value: value.fontSize, min: 8, max: 20, onChange: (fontSize) => onChange({ fontSize }) }) }), _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/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 {};