@medalsocial/meda 2.0.0 → 2.1.0

package/dist/calendar/week-view.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { cn } from '../lib/utils.js';
+import { formatDayOfWeek, formatHour, getDateKey, getHoursOfDay, getWeekDays, isToday, } from './internal/date.js';
+import { TimeSlot } from './internal/time-slot.js';
+import { DEFAULT_CALENDAR_LABELS } from './types.js';
+export function WeekView({ date, events, onEventClick, onSlotClick, onDateClick, weekStartsOn = 0, locale = 'en-US', labels: labelOverrides, className, renderEvent, }) {
+    const labels = { ...DEFAULT_CALENDAR_LABELS, ...labelOverrides };
+    const weekDays = useMemo(() => getWeekDays(date, weekStartsOn), [date, weekStartsOn]);
+    const hours = useMemo(() => getHoursOfDay(), []);
+    const eventsByDateHour = useMemo(() => {
+        const map = new Map();
+        for (const event of events) {
+            if (event.allDay)
+                continue;
+            const dateKey = getDateKey(event.start);
+            const hour = event.start.getHours();
+            const key = `${dateKey}-${hour}`;
+            const existing = map.get(key) ?? [];
+            existing.push(event);
+            map.set(key, existing);
+        }
+        for (const [key, slot] of map.entries()) {
+            slot.sort((a, b) => a.start.getTime() - b.start.getTime());
+            map.set(key, slot);
+        }
+        return map;
+    }, [events]);
+    return (_jsxs("section", { "data-slot": "calendar-week-view", "aria-label": labels.weekView, className: cn('@container/calendar overflow-hidden rounded-lg border border-border bg-background', className), children: [_jsxs("div", { className: "sticky top-0 z-10 grid grid-cols-[64px_repeat(7,minmax(0,1fr))] border-border border-b bg-muted/50", children: [_jsx("div", { className: "border-border border-r px-2 py-3" }), weekDays.map((d) => {
+                        const isTodayDate = isToday(d);
+                        const isInteractive = typeof onDateClick === 'function';
+                        const dayLabel = formatDayOfWeek(d, locale, 'short');
+                        const node = (_jsxs(_Fragment, { children: [_jsx("div", { className: "font-medium text-muted-foreground text-[11px]", children: dayLabel }), _jsx("div", { className: cn('mt-0.5 font-semibold text-base', isTodayDate ? 'text-primary' : 'text-foreground'), children: d.getDate() })] }));
+                        return isInteractive ? (_jsx("button", { type: "button", onClick: () => onDateClick?.(d), className: cn('min-h-[44px] border-border border-r px-2 py-3 text-center transition-colors last:border-r-0', 'hover:bg-accent/50', isTodayDate && 'bg-primary/5'), children: node }, `header-${getDateKey(d)}`)) : (_jsx("div", { className: cn('min-h-[44px] border-border border-r px-2 py-3 text-center last:border-r-0', isTodayDate && 'bg-primary/5'), children: node }, `header-${getDateKey(d)}`));
+                    })] }), _jsx("div", { 
+                // biome-ignore lint/a11y/noNoninteractiveTabindex: scrollable region needs keyboard focus per WCAG (axe scrollable-region-focusable)
+                tabIndex: 0, className: "max-h-[36rem] overflow-y-auto focus:outline-none focus-visible:ring-2 focus-visible:ring-primary", children: hours.map((hour) => (_jsxs("div", { className: "grid grid-cols-[64px_repeat(7,minmax(0,1fr))]", children: [_jsx("div", { className: "border-border border-r border-b px-2 py-2 text-right text-muted-foreground text-[11px]", children: formatHour(hour, locale) }), weekDays.map((d) => (_jsx(TimeSlot, { date: d, hour: hour, events: eventsByDateHour.get(`${getDateKey(d)}-${hour}`) ?? [], onSlotClick: onSlotClick, onEventClick: onEventClick, renderEvent: renderEvent, variant: "week" }, `slot-${getDateKey(d)}-${hour}`)))] }, `row-${hour}`))) })] }));
+}

package/dist/chat/turn-card.js

@@ -13,11 +13,16 @@ export function TurnCard({ turn, startedAtRef, tz, onPlay, className }) {
     const offset = turn.startedAt - startedAtRef;
     // amber-700 (not -500) for the 11px system speaker label so it clears
     // WCAG AA (4.5:1) against the card background.
-    const speakerColor = turn.speaker === 'assistant'
-        ? 'text-primary'
-        : turn.speaker === 'system'
-            ? 'text-amber-700'
-            : 'text-foreground';
+    let speakerColor;
+    if (turn.speaker === 'assistant') {
+        speakerColor = 'text-primary';
+    }
+    else if (turn.speaker === 'system') {
+        speakerColor = 'text-amber-700';
+    }
+    else {
+        speakerColor = 'text-foreground';
+    }
     return (_jsxs("div", { className: [
             'grid grid-cols-[64px_1fr] gap-5 border-b border-border py-4 last:border-b-0',
             className ?? '',

package/dist/email-builder/block-error-boundary.d.ts

@@ -0,0 +1,16 @@
+import { Component, type ReactNode } from 'react';
+interface Props {
+    blockId: string;
+    children: ReactNode;
+}
+interface State {
+    error: Error | null;
+}
+/** Catches render errors inside an individual block so a broken block doesn't tear down the canvas. */
+export declare class BlockErrorBoundary extends Component<Props, State> {
+    state: State;
+    static getDerivedStateFromError(error: Error): State;
+    componentDidCatch(_error: Error): void;
+    render(): ReactNode;
+}
+export {};

package/dist/email-builder/block-error-boundary.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Component } from 'react';
+/** Catches render errors inside an individual block so a broken block doesn't tear down the canvas. */
+export class BlockErrorBoundary extends Component {
+    state = { error: null };
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    componentDidCatch(_error) {
+        // No-op. Consumers can subclass or wrap to add custom logging — we don't
+        // want to call console here (and trip the lint rule) in a public package.
+    }
+    render() {
+        if (this.state.error) {
+            return (_jsxs("div", { "data-slot": "email-builder-block-error", className: "rounded-md border border-destructive/40 bg-destructive/10 p-3 text-destructive text-sm", role: "alert", children: ["Block failed to render: ", this.state.error.message] }));
+        }
+        return this.props.children;
+    }
+}

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

@@ -0,0 +1,7 @@
+import type { BlockKind } from './types.js';
+interface BlockPaletteProps {
+    onPick: (kind: BlockKind) => void;
+}
+/** Vertical button list of all available block kinds. */
+export declare function BlockPalette({ onPick }: BlockPaletteProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlignLeft, Columns2, Image, Minus, MousePointerClick, Share2, Space, Type, } from 'lucide-react';
+import { BLOCK_REGISTRY } from './block-registry.js';
+const ICONS = {
+    heading: Type,
+    text: Type,
+    image: Image,
+    button: MousePointerClick,
+    divider: Minus,
+    spacer: Space,
+    columns: Columns2,
+    social: Share2,
+    footer: AlignLeft,
+};
+/** Vertical button list of all available block kinds. */
+export function BlockPalette({ onPick }) {
+    return (_jsx("div", { "data-slot": "email-builder-palette", className: "flex flex-col gap-1.5 p-2", children: BLOCK_REGISTRY.map((meta) => {
+            const Icon = ICONS[meta.kind];
+            return (_jsxs("button", { type: "button", onClick: () => onPick(meta.kind), "data-slot": "email-builder-palette-item", "data-block-kind": meta.kind, className: "flex min-h-[44px] items-center gap-3 rounded-md border border-input bg-background p-2 text-left hover:bg-accent hover:text-accent-foreground", children: [_jsx(Icon, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "font-medium text-sm", children: meta.label }), _jsx("div", { className: "truncate text-muted-foreground text-xs", children: meta.description })] })] }, meta.kind));
+        }) }));
+}

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

@@ -0,0 +1,15 @@
+import type { Alignment, BlockKind, BlockPropsMap, ColumnLayout, EmailBlock } from './types.js';
+export declare function getDefaultBlockProps(): {
+    [K in BlockKind]: BlockPropsMap[K];
+};
+export declare const COLUMN_WIDTHS: Record<ColumnLayout, number[]>;
+export declare function getColumnWidths(layout: ColumnLayout): number[];
+export declare function createBlock<K extends BlockKind>(kind: K, overrides?: Partial<BlockPropsMap[K]>): EmailBlock<K>;
+export interface BlockMeta {
+    kind: BlockKind;
+    label: string;
+    description: string;
+    category: 'content' | 'layout' | 'marketing';
+}
+export declare const BLOCK_REGISTRY: BlockMeta[];
+export declare const ALIGNMENT_OPTIONS: Alignment[];

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

@@ -0,0 +1,156 @@
+const DEFAULT_PADDING = { top: 12, right: 24, bottom: 12, left: 24 };
+let __idCounter = 0;
+function genId(prefix = 'blk') {
+    __idCounter += 1;
+    // Prefix + epoch + counter is enough for stable in-memory uniqueness.
+    return `${prefix}_${Date.now().toString(36)}_${__idCounter.toString(36)}`;
+}
+export function getDefaultBlockProps() {
+    const heading = {
+        text: 'Your headline',
+        level: 2,
+        alignment: 'left',
+        color: '#111827',
+        fontFamily: '',
+        fontWeight: 600,
+        fontSize: 28,
+        padding: { ...DEFAULT_PADDING },
+    };
+    const text = {
+        content: 'Tell your readers what this email is about.',
+        alignment: 'left',
+        color: '#374151',
+        fontFamily: '',
+        fontWeight: 400,
+        fontSize: 16,
+        padding: { ...DEFAULT_PADDING },
+    };
+    const image = {
+        src: '',
+        alt: 'Image',
+        linkUrl: '',
+        width: 600,
+        height: 'auto',
+        alignment: 'center',
+        padding: { ...DEFAULT_PADDING },
+    };
+    const button = {
+        text: 'Click me',
+        url: 'https://',
+        backgroundColor: '#4F46E5',
+        textColor: '#ffffff',
+        borderRadius: 8,
+        size: 'md',
+        alignment: 'center',
+        fullWidth: false,
+        padding: { ...DEFAULT_PADDING },
+    };
+    const divider = {
+        color: '#e5e7eb',
+        thickness: 1,
+        width: 100,
+        style: 'solid',
+        padding: { ...DEFAULT_PADDING },
+    };
+    const spacer = { height: 24 };
+    const columns = {
+        layout: '50-50',
+        verticalAlignment: 'top',
+        backgroundColor: 'transparent',
+        gap: 16,
+        mobileStacking: true,
+        padding: { top: 0, right: 0, bottom: 0, left: 0 },
+    };
+    const social = {
+        links: [
+            { platform: 'twitter', url: 'https://twitter.com/' },
+            { platform: 'linkedin', url: 'https://linkedin.com/' },
+        ],
+        iconSize: 24,
+        spacing: 8,
+        alignment: 'center',
+        padding: { ...DEFAULT_PADDING },
+    };
+    const footer = {
+        companyName: 'Your Company',
+        address: '123 Main St, City, Country',
+        customText: 'You received this email because you signed up at example.com.',
+        unsubscribeText: 'Unsubscribe',
+        textColor: '#6b7280',
+        fontSize: 12,
+        alignment: 'center',
+        padding: { top: 24, right: 24, bottom: 24, left: 24 },
+    };
+    return { heading, text, image, button, divider, spacer, columns, social, footer };
+}
+export const COLUMN_WIDTHS = {
+    '50-50': [50, 50],
+    '33-67': [33, 67],
+    '67-33': [67, 33],
+    '33-33-33': [33, 33, 34],
+};
+export function getColumnWidths(layout) {
+    return COLUMN_WIDTHS[layout] ?? [100];
+}
+export function createBlock(kind, overrides) {
+    const defaults = { ...getDefaultBlockProps()[kind] };
+    const props = overrides ? { ...defaults, ...overrides } : defaults;
+    const block = { id: genId(kind), kind, props };
+    if (kind === 'columns') {
+        const layout = props.layout;
+        block.children = Array.from({ length: getColumnWidths(layout).length }, () => []);
+    }
+    return block;
+}
+export const BLOCK_REGISTRY = [
+    {
+        kind: 'heading',
+        label: 'Heading',
+        description: 'Section headline.',
+        category: 'content',
+    },
+    {
+        kind: 'text',
+        label: 'Text',
+        description: 'A paragraph of text.',
+        category: 'content',
+    },
+    { kind: 'image', label: 'Image', description: 'An inline image.', category: 'content' },
+    {
+        kind: 'button',
+        label: 'Button',
+        description: 'Call-to-action button.',
+        category: 'content',
+    },
+    {
+        kind: 'divider',
+        label: 'Divider',
+        description: 'A horizontal divider.',
+        category: 'layout',
+    },
+    {
+        kind: 'spacer',
+        label: 'Spacer',
+        description: 'Vertical whitespace.',
+        category: 'layout',
+    },
+    {
+        kind: 'columns',
+        label: 'Columns',
+        description: 'Multi-column layout.',
+        category: 'layout',
+    },
+    {
+        kind: 'social',
+        label: 'Social',
+        description: 'Social media icons.',
+        category: 'marketing',
+    },
+    {
+        kind: 'footer',
+        label: 'Footer',
+        description: 'Email footer with unsubscribe link.',
+        category: 'marketing',
+    },
+];
+export const ALIGNMENT_OPTIONS = ['left', 'center', 'right'];

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

@@ -0,0 +1,5 @@
+import type { EmailBlock } from './types.js';
+/** Pure renderer — turns an EmailBlock into preview React. No selection chrome. */
+export declare function BlockRenderer({ block }: {
+    block: EmailBlock;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BlockErrorBoundary } from './block-error-boundary.js';
+import { ButtonBlock } from './block-renderers/button.js';
+import { ColumnsBlock } from './block-renderers/columns.js';
+import { DividerBlock } from './block-renderers/divider.js';
+import { FooterBlock } from './block-renderers/footer.js';
+import { HeadingBlock } from './block-renderers/heading.js';
+import { ImageBlock } from './block-renderers/image.js';
+import { SocialBlock } from './block-renderers/social.js';
+import { SpacerBlock } from './block-renderers/spacer.js';
+import { TextBlock } from './block-renderers/text.js';
+/** Pure renderer — turns an EmailBlock into preview React. No selection chrome. */
+export function BlockRenderer({ block }) {
+    return (_jsx(BlockErrorBoundary, { blockId: block.id, children: _jsx(BlockBody, { block: block }) }));
+}
+function BlockBody({ block }) {
+    switch (block.kind) {
+        case 'heading':
+            return _jsx(HeadingBlock, { props: block.props });
+        case 'text':
+            return _jsx(TextBlock, { props: block.props });
+        case 'image':
+            return _jsx(ImageBlock, { props: block.props });
+        case 'button':
+            return _jsx(ButtonBlock, { props: block.props });
+        case 'divider':
+            return _jsx(DividerBlock, { props: block.props });
+        case 'spacer':
+            return _jsx(SpacerBlock, { props: block.props });
+        case 'columns':
+            return (_jsx(ColumnsBlock, { props: block.props, columnChildren: block.children }));
+        case 'social':
+            return _jsx(SocialBlock, { props: block.props });
+        case 'footer':
+            return _jsx(FooterBlock, { props: block.props });
+        default:
+            return null;
+    }
+}

package/dist/email-builder/block-renderers/button.d.ts

@@ -0,0 +1,4 @@
+import type { ButtonBlockProps } from '../types.js';
+export declare function ButtonBlock({ props }: {
+    props: ButtonBlockProps;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/email-builder/block-renderers/button.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+const SIZES = {
+    sm: { paddingX: 16, paddingY: 8, fontSize: 14 },
+    md: { paddingX: 24, paddingY: 12, fontSize: 16 },
+    lg: { paddingX: 32, paddingY: 16, fontSize: 18 },
+};
+export function ButtonBlock({ props }) {
+    const s = SIZES[props.size];
+    const wrapperStyle = {
+        padding: `${props.padding.top}px ${props.padding.right}px ${props.padding.bottom}px ${props.padding.left}px`,
+        textAlign: props.alignment,
+    };
+    const linkStyle = {
+        display: 'inline-block',
+        backgroundColor: props.backgroundColor,
+        color: props.textColor,
+        borderRadius: props.borderRadius,
+        padding: `${s.paddingY}px ${s.paddingX}px`,
+        fontSize: s.fontSize,
+        fontWeight: 600,
+        textDecoration: 'none',
+        width: props.fullWidth ? '100%' : undefined,
+    };
+    return (_jsx("div", { "data-slot": "email-block-button", style: wrapperStyle, children: _jsx("a", { href: props.url, style: linkStyle, rel: "noopener noreferrer", children: props.text }) }));
+}

package/dist/email-builder/block-renderers/columns.d.ts

@@ -0,0 +1,5 @@
+import type { ColumnsBlockProps, EmailBlock } from '../types.js';
+export declare function ColumnsBlock({ props, columnChildren, }: {
+    props: ColumnsBlockProps;
+    columnChildren?: EmailBlock[][];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/email-builder/block-renderers/columns.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getColumnWidths } from '../block-registry.js';
+import { BlockRenderer } from '../block-renderer.js';
+function getAlignItems(alignment) {
+    if (alignment === 'top')
+        return 'flex-start';
+    if (alignment === 'middle')
+        return 'center';
+    return 'flex-end';
+}
+export function ColumnsBlock({ props, columnChildren, }) {
+    const widths = getColumnWidths(props.layout);
+    const wrapperStyle = {
+        padding: `${props.padding.top}px ${props.padding.right}px ${props.padding.bottom}px ${props.padding.left}px`,
+        backgroundColor: props.backgroundColor !== 'transparent' ? props.backgroundColor : undefined,
+        display: 'flex',
+        flexDirection: props.mobileStacking ? undefined : 'row',
+        gap: props.gap,
+        alignItems: getAlignItems(props.verticalAlignment),
+        flexWrap: 'wrap',
+    };
+    return (_jsx("div", { "data-slot": "email-block-columns", style: wrapperStyle, children: widths.map((w, i) => (_jsx("div", { "data-slot": "email-block-columns-cell", style: {
+                flex: `0 0 calc(${w}% - ${(props.gap * (widths.length - 1)) / widths.length}px)`,
+                minWidth: 120,
+            }, children: (columnChildren?.[i] ?? []).map((b) => (_jsx(BlockRenderer, { block: b }, b.id))) }, i))) }));
+}

package/dist/email-builder/block-renderers/divider.d.ts

@@ -0,0 +1,4 @@
+import type { DividerBlockProps } from '../types.js';
+export declare function DividerBlock({ props }: {
+    props: DividerBlockProps;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/email-builder/block-renderers/divider.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function DividerBlock({ props }) {
+    const wrapperStyle = {
+        padding: `${props.padding.top}px ${props.padding.right}px ${props.padding.bottom}px ${props.padding.left}px`,
+    };
+    const ruleStyle = {
+        width: `${props.width}%`,
+        margin: '0 auto',
+        borderTop: `${props.thickness}px ${props.style} ${props.color}`,
+        height: 0,
+    };
+    return (_jsx("div", { "data-slot": "email-block-divider", style: wrapperStyle, children: _jsx("div", { style: ruleStyle }) }));
+}

package/dist/email-builder/block-renderers/footer.d.ts

@@ -0,0 +1,4 @@
+import type { FooterBlockProps } from '../types.js';
+export declare function FooterBlock({ props }: {
+    props: FooterBlockProps;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/email-builder/block-renderers/footer.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function FooterBlock({ props }) {
+    const wrapperStyle = {
+        padding: `${props.padding.top}px ${props.padding.right}px ${props.padding.bottom}px ${props.padding.left}px`,
+        textAlign: props.alignment,
+        color: props.textColor,
+        fontSize: props.fontSize,
+        lineHeight: 1.5,
+    };
+    return (_jsxs("div", { "data-slot": "email-block-footer", style: wrapperStyle, children: [props.companyName ? _jsx("div", { children: props.companyName }) : null, props.address ? _jsx("div", { children: props.address }) : null, props.customText ? _jsx("div", { children: props.customText }) : null, props.unsubscribeText ? (_jsx("div", { style: { marginTop: 8 }, children: _jsx("a", { href: "#unsubscribe", style: { color: props.textColor, textDecoration: 'underline' }, children: props.unsubscribeText }) })) : null] }));
+}

package/dist/email-builder/block-renderers/heading.d.ts

@@ -0,0 +1,4 @@
+import type { HeadingBlockProps } from '../types.js';
+export declare function HeadingBlock({ props }: {
+    props: HeadingBlockProps;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/email-builder/block-renderers/heading.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement } from 'react';
+export function HeadingBlock({ props }) {
+    const tag = `h${props.level}`;
+    const style = {
+        margin: 0,
+        color: props.color,
+        fontSize: props.fontSize,
+        fontWeight: props.fontWeight,
+        fontFamily: props.fontFamily || undefined,
+        lineHeight: 1.3,
+    };
+    const wrapperStyle = {
+        padding: `${props.padding.top}px ${props.padding.right}px ${props.padding.bottom}px ${props.padding.left}px`,
+        textAlign: props.alignment,
+    };
+    return (_jsx("div", { "data-slot": "email-block-heading", style: wrapperStyle, children: createElement(tag, { style }, props.text) }));
+}

package/dist/email-builder/block-renderers/image.d.ts

@@ -0,0 +1,4 @@
+import type { ImageBlockProps } from '../types.js';
+export declare function ImageBlock({ props }: {
+    props: ImageBlockProps;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/email-builder/block-renderers/image.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ImageOff } from 'lucide-react';
+export function ImageBlock({ props }) {
+    const wrapperStyle = {
+        padding: `${props.padding.top}px ${props.padding.right}px ${props.padding.bottom}px ${props.padding.left}px`,
+        textAlign: props.alignment,
+    };
+    if (!props.src) {
+        return (_jsx("div", { "data-slot": "email-block-image", style: wrapperStyle, children: _jsxs("div", { className: "mx-auto flex items-center justify-center rounded-md border border-border border-dashed bg-muted/50 text-muted-foreground", style: {
+                    width: '100%',
+                    maxWidth: props.width,
+                    height: 120,
+                }, children: [_jsx(ImageOff, { className: "size-6", "aria-hidden": true }), _jsx("span", { className: "ml-2 text-sm", children: "No image selected" })] }) }));
+    }
+    const img = (_jsx("img", { src: props.src, alt: props.alt, width: props.width, height: props.height === 'auto' ? undefined : props.height, style: { display: 'block', width: '100%', maxWidth: props.width, height: 'auto' } }));
+    return (_jsx("div", { "data-slot": "email-block-image", style: wrapperStyle, children: props.linkUrl ? (_jsx("a", { href: props.linkUrl, rel: "noopener noreferrer", children: img })) : (img) }));
+}

package/dist/email-builder/block-renderers/social.d.ts

@@ -0,0 +1,4 @@
+import type { SocialBlockProps } from '../types.js';
+export declare function SocialBlock({ props }: {
+    props: SocialBlockProps;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/email-builder/block-renderers/social.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function SocialBlock({ props }) {
+    const visible = props.links.filter((l) => Boolean(l.url));
+    const wrapperStyle = {
+        padding: `${props.padding.top}px ${props.padding.right}px ${props.padding.bottom}px ${props.padding.left}px`,
+        textAlign: props.alignment,
+    };
+    return (_jsx("div", { "data-slot": "email-block-social", style: wrapperStyle, children: _jsx("div", { style: {
+                display: 'inline-flex',
+                gap: props.spacing,
+                alignItems: 'center',
+                justifyContent: 'center',
+            }, children: visible.map((link, i) => (_jsx("a", { href: link.url, rel: "noopener noreferrer", "aria-label": link.platform, className: "inline-flex items-center justify-center rounded bg-muted px-3 py-1 text-foreground text-xs no-underline", style: {
+                    width: link.iconUrl ? props.iconSize : undefined,
+                    height: link.iconUrl ? props.iconSize : undefined,
+                    padding: link.iconUrl ? 0 : undefined,
+                }, children: link.iconUrl ? (_jsx("img", { src: link.iconUrl, alt: link.platform, width: props.iconSize, height: props.iconSize, style: { display: 'block' } })) : (link.platform) }, `${link.platform}-${i}`))) }) }));
+}

package/dist/email-builder/block-renderers/spacer.d.ts

@@ -0,0 +1,4 @@
+import type { SpacerBlockProps } from '../types.js';
+export declare function SpacerBlock({ props }: {
+    props: SpacerBlockProps;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/email-builder/block-renderers/spacer.js

@@ -0,0 +1,5 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function SpacerBlock({ props }) {
+    return (_jsx("div", { "data-slot": "email-block-spacer", "aria-hidden": true, style: { height: props.height, width: '100%' } }));
+}

package/dist/email-builder/block-renderers/text.d.ts

@@ -0,0 +1,4 @@
+import type { TextBlockProps } from '../types.js';
+export declare function TextBlock({ props }: {
+    props: TextBlockProps;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/email-builder/block-renderers/text.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function TextBlock({ props }) {
+    const wrapperStyle = {
+        padding: `${props.padding.top}px ${props.padding.right}px ${props.padding.bottom}px ${props.padding.left}px`,
+        textAlign: props.alignment,
+        color: props.color,
+        fontSize: props.fontSize,
+        fontWeight: props.fontWeight,
+        fontFamily: props.fontFamily || undefined,
+        lineHeight: 1.55,
+        wordBreak: 'break-word',
+    };
+    // Render as paragraphs split on blank lines.
+    const paragraphs = props.content.split(/\n{2,}/);
+    return (_jsx("div", { "data-slot": "email-block-text", style: wrapperStyle, children: paragraphs.map((para, i) => (_jsx("p", { style: { margin: i > 0 ? '12px 0 0 0' : 0 }, children: para.split('\n').map((line, lineIdx, lines) => (_jsxs("span", { children: [line, lineIdx < lines.length - 1 ? _jsx("br", {}) : null] }, lineIdx))) }, i))) }));
+}

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

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import type { DevicePreview, EmailBlock, EmailBuilderLabels } from './types.js';
+interface BuilderCanvasProps {
+    blocks: EmailBlock[];
+    selectedBlockId: string | null;
+    onSelectBlock: (id: string | null) => void;
+    device: DevicePreview;
+    labels: EmailBuilderLabels;
+    /** Optional content to render above the empty state — typically the palette CTA. */
+    emptyStateAction?: ReactNode;
+    /** Per-block floating bar; rendered near the selected block. */
+    renderFloatingBar?: (block: EmailBlock) => ReactNode;
+}
+export declare function BuilderCanvas({ blocks, selectedBlockId, onSelectBlock, device, labels, emptyStateAction, renderFloatingBar, }: BuilderCanvasProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { cn } from '../lib/utils.js';
+import { BlockRenderer } from './block-renderer.js';
+const DEVICE_WIDTHS = { desktop: 600, mobile: 375 };
+export function BuilderCanvas({ blocks, selectedBlockId, onSelectBlock, device, labels, emptyStateAction, renderFloatingBar, }) {
+    return (_jsx("div", { "data-slot": "email-builder-canvas", className: "flex h-full w-full flex-col items-center overflow-y-auto bg-muted/40 p-6", children: _jsx("div", { "data-slot": "email-builder-canvas-frame", className: "rounded-md border border-border bg-background text-left shadow-sm transition-all", style: { width: '100%', maxWidth: DEVICE_WIDTHS[device] }, children: blocks.length === 0 ? (_jsx(EmptyState, { labels: labels, action: emptyStateAction })) : (blocks.map((block) => (_jsx(SortableBlock, { block: block, selected: block.id === selectedBlockId, onSelect: () => onSelectBlock(block.id), renderFloatingBar: renderFloatingBar }, block.id)))) }) }));
+}
+function SortableBlock({ block, selected, onSelect, renderFloatingBar }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+        id: block.id,
+        data: { kind: 'block', blockId: block.id },
+    });
+    // dnd-kit injects role="button" + tabIndex by default; strip those so we don't
+    // create nested interactive controls (the inner select <button> handles a11y).
+    const { role: _role, tabIndex: _tabIndex, ...sortableAttrs } = attributes;
+    return (_jsxs("div", { ref: setNodeRef, "data-slot": "email-builder-canvas-block", "data-block-id": block.id, "data-selected": selected ? 'true' : undefined, style: { transform: CSS.Transform.toString(transform), transition }, className: cn('group relative cursor-grab transition-shadow', selected && 'ring-2 ring-primary ring-inset', isDragging && 'z-10 opacity-60'), ...sortableAttrs, ...listeners, children: [_jsx(BlockRenderer, { block: block }), _jsx("button", { type: "button", "data-slot": "email-builder-canvas-block-select", "aria-label": `Select ${block.kind} block`, "aria-pressed": selected, className: cn('absolute inset-0 z-0 cursor-pointer bg-transparent outline-none', selected ? 'pointer-events-none' : 'pointer-events-auto'), onClick: (e) => {
+                    e.stopPropagation();
+                    onSelect();
+                } }), selected && renderFloatingBar ? (_jsx(_Fragment, { children: _jsx("div", { "data-slot": "email-builder-canvas-block-actions", className: "-top-3 -translate-x-1/2 absolute left-1/2 z-10", onClick: (e) => e.stopPropagation(), onPointerDown: (e) => e.stopPropagation(), children: renderFloatingBar(block) }) })) : null] }));
+}
+function EmptyState({ labels, action }) {
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-3 px-6 py-16 text-center", children: [_jsx("div", { className: "font-semibold text-base text-foreground", children: labels.emptyTitle }), _jsx("p", { className: "max-w-sm text-muted-foreground text-sm", children: labels.emptyDescription }), action ? _jsx("div", { className: "pt-2", children: action }) : null] }));
+}

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 {};