@endora-commerce/page-builder-admin 0.100.0

package/dist/email/EmailEditorPane.js

@@ -0,0 +1,637 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import '@endora-commerce/cms-components/styles.css';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Puck } from '@measured/puck';
+import '@measured/puck/puck.css';
+import { Eye, Monitor, Smartphone, X } from 'lucide-react';
+import { applyEmailRowLayoutPreset, buildSampleVariableContext, DEFAULT_ORDER_ITEMS_SAMPLE, defaultEmailBuilderConfig, EmailBrandingPreviewProvider, EmailEmbedsProvider, filterEmailPaletteByVariables, findEmailRowById, replaceEmailRowInData, renderDirectives, renderEmailHtml, sampleOrderDiscountsText, sampleOrderSummaryText, useEmailBrandingPreview, } from '@endora-commerce/email-components';
+import { buildPaletteCategories, filterConfigByContext, } from '@endora-commerce/page-builder-core';
+import { hasInvalidColumnPlacement, shouldRevertPuckAction, toPuckItemArray, } from '@endora-commerce/page-builder-core/editor';
+import { Button } from '@endora-commerce/admin-kit/ui';
+import { apiClient, cn } from '@endora-commerce/admin-kit/lib';
+import { createImageAssetField, createImageSourceField, createImageUrlField, } from '../chrome/AssetPickers.js';
+import { createCategorySlugsField, createProductSlugField, createProductSlugsField, } from '../chrome/CatalogPickers.js';
+import { PageBuilderColorPaletteProvider } from '../chrome/ColorPaletteProvider.js';
+import { PageBuilderHeaderActions, PageBuilderHeaderShell, PageBuilderTemplateActions, } from '../chrome/PageBuilderHeaderActions.js';
+import { PageBuilderOverlayBridge } from '../chrome/PageBuilderOverlayBridge.js';
+import { getPageBuilderColorPalette, getPageBuilderDescriptor, } from '../chrome/cms-page-builder-api.js';
+import { getEmailBranding } from './email-templates-api.js';
+import { fetchAssetDetail } from '@endora-commerce/admin-kit/components';
+import { toAbsoluteAssetUrl } from '@endora-commerce/admin-kit/lib';
+import { useTranslation, useTranslationContext } from '@endora-commerce/admin-kit/i18n';
+import { emailRichTextContentField, emailHtmlFromRichContent } from './EmailRichTextField.js';
+import { emailTextareaWithVariablesField } from './EmailVariableFields.js';
+import { createEmailBuilderEditorPlugin } from './email-builder-plugin.js';
+import { useEmailVariables } from './EmailVariablesProvider.js';
+import { EmailBuilderActionBar } from './EmailBuilderActionBar.js';
+import { EmailRowLayoutPicker } from './EmailRowLayoutPicker.js';
+const emptyData = { root: { props: {} }, content: [] };
+const CANVAS_WIDTH = 600;
+const emailBuilderPlugin = createEmailBuilderEditorPlugin();
+function collectEmailRowIds(data) {
+    const ids = new Set();
+    const visit = (items) => {
+        for (const item of items) {
+            if (item.type === 'transactional_emails.EmailRow' && typeof item.props.id === 'string') {
+                ids.add(item.props.id);
+            }
+            for (const value of Object.values(item.props)) {
+                const nested = toPuckItemArray(value);
+                if (nested.length > 0)
+                    visit(nested);
+            }
+        }
+    };
+    visit(toPuckItemArray(data.content));
+    for (const zoneItems of Object.values(data.zones ?? {})) {
+        visit(toPuckItemArray(zoneItems));
+    }
+    return ids;
+}
+const PREVIEW_PLACEHOLDER_LOGO = 'https://placehold.co/160x48?text=Logo';
+const PREVIEW_UNSUBSCRIBE_URL = 'https://shop.example/newsletter/unsubscribe?token=preview';
+function pickLanguageTree(content) {
+    const raw = content['pl-PL'] ?? content['en-US'] ?? Object.values(content)[0] ?? null;
+    if (!raw || typeof raw !== 'object')
+        return null;
+    return raw;
+}
+/**
+ * Canvas preview for an embedded block/template. Resolves branding (and other
+ * sample) directives so `{{var branding.logoUrl}}` becomes a real `<img src>`.
+ */
+function EmbedPreviewHtml({ content }) {
+    const { logoUrl } = useEmailBrandingPreview();
+    const tree = pickLanguageTree(content);
+    const raw = renderEmailHtml(tree, { document: false });
+    const html = renderDirectives(raw, {
+        branding: {
+            logoUrl: logoUrl || PREVIEW_PLACEHOLDER_LOGO,
+            accentColor: '#1f2937',
+        },
+        unsubscribeUrl: PREVIEW_UNSUBSCRIBE_URL,
+    }, { escape: true });
+    return _jsx("div", { dangerouslySetInnerHTML: { __html: html } });
+}
+function previewNode(content) {
+    return _jsx(EmbedPreviewHtml, { content: content });
+}
+const STOREFRONT_BASE_URL = (import.meta.env.VITE_STOREFRONT_BASE_URL ?? 'http://localhost:3000').replace(/\/+$/, '');
+function toAbsoluteStorefrontUrl(pathOrUrl) {
+    if (!pathOrUrl)
+        return '';
+    if (/^https?:\/\//i.test(pathOrUrl))
+        return pathOrUrl;
+    if (pathOrUrl.startsWith('/'))
+        return `${STOREFRONT_BASE_URL}${pathOrUrl}`;
+    return pathOrUrl;
+}
+function pickName(name, fallback) {
+    if (typeof name === 'string')
+        return name || fallback;
+    return name['pl-PL'] ?? name['en-US'] ?? Object.values(name)[0] ?? fallback;
+}
+async function resolveProductForCard(slug) {
+    if (!slug) {
+        return { productId: '', productSlug: '', title: 'Select a product', sku: '', imageSrc: '', href: '' };
+    }
+    const params = new URLSearchParams();
+    params.set('q', slug);
+    params.set('pageSize', '10');
+    const res = await apiClient.get(`/api/v1/admin/catalog/products?${params.toString()}`);
+    const product = res.data.find((p) => p.slug === slug) ?? res.data[0];
+    if (!product) {
+        return {
+            productId: '',
+            productSlug: slug,
+            title: slug,
+            sku: '',
+            imageSrc: '',
+            href: toAbsoluteStorefrontUrl(`/p/${slug}`),
+        };
+    }
+    let imageSrc = '';
+    try {
+        const gallery = await apiClient.get(`/api/v1/admin/catalog/products/${product.id}/gallery`);
+        const ordered = [...gallery.data].sort((a, b) => (a.position ?? 0) - (b.position ?? 0));
+        const preferred = ordered.find((g) => g.labels?.includes('thumbnail')) ??
+            ordered.find((g) => g.labels?.includes('small_image')) ??
+            ordered.find((g) => g.labels?.includes('base_image')) ??
+            ordered[0];
+        if (preferred?.assetId) {
+            const asset = await fetchAssetDetail(preferred.assetId);
+            imageSrc = toAbsoluteAssetUrl(asset.url);
+        }
+    }
+    catch {
+        /* no gallery */
+    }
+    return {
+        productId: product.id,
+        productSlug: product.slug,
+        title: pickName(product.name, product.slug),
+        sku: product.sku,
+        imageSrc,
+        href: toAbsoluteStorefrontUrl(`/p/${product.slug}`),
+    };
+}
+async function resolveCategoryForGrid(slug) {
+    if (!slug) {
+        return { categoryId: '', categorySlug: '', title: '', href: '', imageSrc: '' };
+    }
+    const res = await apiClient.get('/api/v1/admin/catalog/categories');
+    const category = res.data.find((c) => c.slug === slug);
+    if (!category) {
+        return {
+            categoryId: '',
+            categorySlug: slug,
+            title: slug,
+            href: toAbsoluteStorefrontUrl(`/c/${slug}`),
+            imageSrc: '',
+        };
+    }
+    let imageSrc = '';
+    if (category.mainImageAssetId) {
+        try {
+            const asset = await fetchAssetDetail(category.mainImageAssetId);
+            imageSrc = toAbsoluteAssetUrl(asset.url);
+        }
+        catch {
+            /* ignore */
+        }
+    }
+    return {
+        categoryId: category.id,
+        categorySlug: category.slug,
+        title: pickName(category.name, category.slug),
+        href: toAbsoluteStorefrontUrl(`/c/${category.slug}`),
+        imageSrc,
+    };
+}
+function withEditorFields(base) {
+    const components = { ...(base.components ?? {}) };
+    const patchTextarea = (name, fieldKey) => {
+        const c = components[name];
+        if (!c?.fields?.[fieldKey])
+            return;
+        components[name] = {
+            ...c,
+            fields: {
+                ...c.fields,
+                [fieldKey]: {
+                    ...emailTextareaWithVariablesField,
+                    label: c.fields[fieldKey].label,
+                },
+            },
+        };
+    };
+    patchTextarea('transactional_emails.EmailText', 'text');
+    patchTextarea('transactional_emails.EmailHeading', 'text');
+    patchTextarea('transactional_emails.EmailCallout', 'text');
+    patchTextarea('transactional_emails.EmailFooterLegal', 'text');
+    const rich = components['transactional_emails.EmailRichText'];
+    if (rich) {
+        components['transactional_emails.EmailRichText'] = {
+            ...rich,
+            fields: {
+                ...rich.fields,
+                content: emailRichTextContentField,
+                align: rich.fields?.['align'],
+            },
+            resolveData: async ({ props }, { changed }) => {
+                if (changed['content'] || (!props['html'] && props['content'])) {
+                    return {
+                        props: {
+                            ...props,
+                            html: emailHtmlFromRichContent(props['content']) || props['html'] || '',
+                        },
+                    };
+                }
+                return { props };
+            },
+        };
+    }
+    const image = components['transactional_emails.EmailImage'];
+    if (image) {
+        components['transactional_emails.EmailImage'] = {
+            ...image,
+            fields: {
+                ...image.fields,
+                imageSource: createImageSourceField(),
+                src: createImageUrlField('Image URL'),
+                assetId: createImageAssetField('Image'),
+            },
+            resolveData: async ({ props }) => {
+                const source = props.imageSource === 'library' ? 'library' : 'url';
+                let src = typeof props.src === 'string' ? props.src : '';
+                const assetId = typeof props.assetId === 'string' ? props.assetId : '';
+                if (source === 'library' && assetId) {
+                    try {
+                        const detail = await fetchAssetDetail(assetId);
+                        src = toAbsoluteAssetUrl(detail.url);
+                    }
+                    catch {
+                        /* keep */
+                    }
+                }
+                if (source === 'url') {
+                    return { props: { ...props, imageSource: 'url', assetId: '', src } };
+                }
+                return { props: { ...props, imageSource: 'library', assetId, src } };
+            },
+        };
+    }
+    const productCard = components['catalog.EmailProductCard'];
+    if (productCard) {
+        components['catalog.EmailProductCard'] = {
+            ...productCard,
+            fields: {
+                ...productCard.fields,
+                productSlug: createProductSlugField(),
+            },
+            resolveData: async ({ props }) => {
+                const slug = typeof props.productSlug === 'string' ? props.productSlug : '';
+                if (!slug) {
+                    return {
+                        props: {
+                            ...props,
+                            productId: '',
+                            title: 'Select a product',
+                            sku: '',
+                            imageSrc: '',
+                            href: typeof props.href === 'string' ? props.href : '',
+                        },
+                    };
+                }
+                try {
+                    const resolved = await resolveProductForCard(slug);
+                    const priceOverride = typeof props.price === 'string' ? props.price : '';
+                    const hrefOverride = typeof props.href === 'string' ? props.href : '';
+                    return {
+                        props: {
+                            ...props,
+                            productSlug: slug,
+                            productId: resolved.productId,
+                            title: resolved.title,
+                            sku: resolved.sku,
+                            imageSrc: resolved.imageSrc,
+                            // Keep author price override when set; otherwise leave blank for B2B.
+                            price: priceOverride,
+                            href: hrefOverride
+                                ? toAbsoluteStorefrontUrl(hrefOverride)
+                                : resolved.href,
+                        },
+                    };
+                }
+                catch {
+                    return { props };
+                }
+            },
+        };
+    }
+    const productGrid = components['catalog.EmailProductGrid'];
+    if (productGrid) {
+        components['catalog.EmailProductGrid'] = {
+            ...productGrid,
+            fields: {
+                ...productGrid.fields,
+                productSlugs: createProductSlugsField(),
+            },
+            resolveData: async ({ props }) => {
+                const slugs = Array.isArray(props.productSlugs)
+                    ? props.productSlugs.filter((s) => typeof s === 'string' && s)
+                    : [];
+                if (slugs.length === 0) {
+                    return { props: { ...props, productSlugs: [], items: [] } };
+                }
+                try {
+                    const items = await Promise.all(slugs.map((slug) => resolveProductForCard(slug)));
+                    return {
+                        props: {
+                            ...props,
+                            productSlugs: slugs,
+                            items: items.map((item) => ({
+                                productId: item.productId,
+                                productSlug: item.productSlug,
+                                title: item.title,
+                                sku: item.sku,
+                                price: '',
+                                href: item.href,
+                                imageSrc: item.imageSrc,
+                            })),
+                        },
+                    };
+                }
+                catch {
+                    return { props };
+                }
+            },
+        };
+    }
+    const categoryGrid = components['catalog.EmailCategoryGrid'];
+    if (categoryGrid) {
+        components['catalog.EmailCategoryGrid'] = {
+            ...categoryGrid,
+            fields: {
+                ...categoryGrid.fields,
+                categorySlugs: createCategorySlugsField(),
+            },
+            resolveData: async ({ props }) => {
+                const slugs = Array.isArray(props.categorySlugs)
+                    ? props.categorySlugs.filter((s) => typeof s === 'string' && s)
+                    : [];
+                if (slugs.length === 0) {
+                    return { props: { ...props, categorySlugs: [], items: [] } };
+                }
+                try {
+                    const items = await Promise.all(slugs.map((slug) => resolveCategoryForGrid(slug)));
+                    return {
+                        props: {
+                            ...props,
+                            categorySlugs: slugs,
+                            items,
+                        },
+                    };
+                }
+                catch {
+                    return { props };
+                }
+            },
+        };
+    }
+    return { ...base, components };
+}
+function mergeEmbedSelects(base, blockOptions) {
+    const components = { ...(base.components ?? {}) };
+    const insertBlock = components['transactional_emails.EmailInsertBlock'];
+    if (insertBlock) {
+        components['transactional_emails.EmailInsertBlock'] = {
+            ...insertBlock,
+            fields: {
+                ...insertBlock.fields,
+                code: { type: 'select', label: 'Block', options: [{ label: '—', value: '' }, ...blockOptions] },
+            },
+        };
+    }
+    return { ...base, components };
+}
+function EmailHtmlPreviewModal({ open, html, onClose, }) {
+    const [width, setWidth] = useState(600);
+    useEffect(() => {
+        if (!open)
+            return undefined;
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [open, onClose]);
+    if (!open)
+        return null;
+    return (_jsx("div", { className: "fixed inset-0 z-[80] flex items-center justify-center bg-black/40 p-4", role: "dialog", "aria-modal": "true", "aria-label": "Preview email", onClick: (e) => {
+            if (e.target === e.currentTarget)
+                onClose();
+        }, children: _jsxs("div", { className: "flex max-h-[90vh] w-full max-w-4xl flex-col overflow-hidden rounded-lg border bg-background shadow-lg", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 border-b px-4 py-3", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "text-sm font-semibold", children: "Preview email" }), _jsxs(Button, { type: "button", variant: width === 600 ? 'default' : 'outline', size: "sm", onClick: () => setWidth(600), "aria-pressed": width === 600, children: [_jsx(Monitor, { className: "mr-1 h-4 w-4" }), "Desktop mail (600px)"] }), _jsxs(Button, { type: "button", variant: width === 320 ? 'default' : 'outline', size: "sm", onClick: () => setWidth(320), "aria-pressed": width === 320, children: [_jsx(Smartphone, { className: "mr-1 h-4 w-4" }), "Narrow (320px)"] })] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close preview", children: _jsx(X, { className: "h-4 w-4" }) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto bg-muted/30 p-4", children: _jsx("iframe", { title: "Email HTML preview", srcDoc: html, className: "mx-auto block h-[min(70vh,640px)] border-0 bg-white shadow-sm", style: { width, maxWidth: '100%', overflow: 'hidden' }, scrolling: "auto" }) })] }) }));
+}
+function buildPreviewHtml(data, variables, logoUrl, extras, embedTrees, previewLanguage) {
+    const language = previewLanguage || 'en-US';
+    const raw = renderEmailHtml((data ?? emptyData), {
+        document: true,
+        language,
+        ...(embedTrees ? { embeds: embedTrees } : {}),
+    });
+    const fromDescriptors = buildSampleVariableContext(variables.map((v) => ({ key: v.key, sampleValue: v.sampleValue ?? v.snippet })), {
+        branding: { logoUrl: logoUrl || PREVIEW_PLACEHOLDER_LOGO, accentColor: '#1f2937' },
+        ...extras,
+    });
+    // Ensure order.items exists for Order summary even when not in the variable catalogue.
+    const order = fromDescriptors['order'] ?? {};
+    if (!Array.isArray(order['items'])) {
+        order['items'] = DEFAULT_ORDER_ITEMS_SAMPLE;
+        fromDescriptors['order'] = order;
+    }
+    // Always localize built-in order money lines for the active editor language —
+    // catalogue sampleValue is English-only.
+    order['summaryText'] = sampleOrderSummaryText(language);
+    if (typeof order['discountsText'] !== 'string' || order['discountsText'] === '  none') {
+        order['discountsText'] = sampleOrderDiscountsText(language);
+    }
+    fromDescriptors['order'] = order;
+    if (typeof fromDescriptors['unsubscribeUrl'] !== 'string' || !fromDescriptors['unsubscribeUrl']) {
+        fromDescriptors['unsubscribeUrl'] = PREVIEW_UNSUBSCRIBE_URL;
+    }
+    return renderDirectives(raw, fromDescriptors, { escape: true });
+}
+export function EmailEditorPane({ data, onChange, editorKey, builderContext = 'email', blockOptions = [], embeds: embedsProp, embedTrees: embedTreesProp, previewLanguage = null, salesChannelId = null, previewExtras = {}, onSaveAsTemplate, onListTemplatesForApply, onResolveTemplateLayout, }) {
+    const { variables } = useEmailVariables();
+    // `core`, not `cms` — the page-builder chrome this pane renders owns no module
+    // knowledge and its copy ships in `_i18n`'s bundle (feature 091 P5a, R-1).
+    const tChrome = useTranslation('core');
+    const [embeds, setEmbeds] = useState(embedsProp ?? { blocks: {}, templates: {} });
+    const [embedTrees, setEmbedTrees] = useState(embedTreesProp ?? { blocks: {}, templates: {} });
+    const [fullscreen, setFullscreen] = useState(false);
+    const [previewOpen, setPreviewOpen] = useState(false);
+    const [canvasEpoch, setCanvasEpoch] = useState(0);
+    const [rowLayoutPickerForId, setRowLayoutPickerForId] = useState(null);
+    const [logoUrl, setLogoUrl] = useState('');
+    const [descriptor, setDescriptor] = useState(null);
+    const { t: translateInScope } = useTranslationContext();
+    const [paletteEntries, setPaletteEntries] = useState([]);
+    const knownRowIdsRef = useRef(collectEmailRowIds(data ?? emptyData));
+    const lastValidDataRef = useRef(data ?? emptyData);
+    const applyCanvasData = (next) => {
+        knownRowIdsRef.current = collectEmailRowIds(next);
+        lastValidDataRef.current = next;
+        onChange(next);
+        setCanvasEpoch((n) => n + 1);
+    };
+    const handleEditorChange = useCallback((next) => {
+        if (hasInvalidColumnPlacement(next)) {
+            // Remount to last good tree — EmailColumn must stay inside EmailRow.
+            setCanvasEpoch((n) => n + 1);
+            return;
+        }
+        const nextRowIds = collectEmailRowIds(next);
+        let newRowId = null;
+        for (const id of nextRowIds) {
+            if (!knownRowIdsRef.current.has(id)) {
+                newRowId = id;
+                break;
+            }
+        }
+        knownRowIdsRef.current = nextRowIds;
+        lastValidDataRef.current = next;
+        onChange(next);
+        if (newRowId) {
+            const rowId = newRowId;
+            window.setTimeout(() => setRowLayoutPickerForId(rowId), 0);
+        }
+    }, [onChange]);
+    const handlePuckAction = useCallback((action, appState) => {
+        if (shouldRevertPuckAction(action, appState.data, lastValidDataRef.current)) {
+            return false;
+        }
+        return action;
+    }, []);
+    const applyRowLayout = useCallback((rowId, presetId) => {
+        const row = findEmailRowById(lastValidDataRef.current, rowId);
+        if (!row) {
+            setRowLayoutPickerForId(null);
+            return;
+        }
+        const nextProps = applyEmailRowLayoutPreset(row.props, presetId);
+        const next = replaceEmailRowInData(lastValidDataRef.current, rowId, {
+            type: 'transactional_emails.EmailRow',
+            props: { ...nextProps, id: rowId },
+        });
+        lastValidDataRef.current = next;
+        knownRowIdsRef.current = collectEmailRowIds(next);
+        onChange(next);
+        setCanvasEpoch((n) => n + 1);
+        setRowLayoutPickerForId(null);
+    }, [onChange]);
+    const hasTemplateActions = Boolean(onSaveAsTemplate || (onListTemplatesForApply && onResolveTemplateLayout));
+    useEffect(() => {
+        if (embedsProp)
+            setEmbeds(embedsProp);
+    }, [embedsProp]);
+    useEffect(() => {
+        if (embedTreesProp)
+            setEmbedTrees(embedTreesProp);
+    }, [embedTreesProp]);
+    useEffect(() => {
+        let live = true;
+        void getEmailBranding(salesChannelId)
+            .then((b) => {
+            if (live)
+                setLogoUrl(toAbsoluteAssetUrl(b.logoUrl || ''));
+        })
+            .catch(() => {
+            if (live)
+                setLogoUrl('');
+        });
+        return () => {
+            live = false;
+        };
+    }, [salesChannelId]);
+    useEffect(() => {
+        let live = true;
+        void getPageBuilderColorPalette()
+            .then((entries) => {
+            if (live)
+                setPaletteEntries(entries);
+        })
+            .catch(() => {
+            if (live)
+                setPaletteEntries([]);
+        });
+        return () => {
+            live = false;
+        };
+    }, []);
+    /**
+     * The declared palette (feature 096, T305).
+     *
+     * A failure leaves `descriptor` null, which renders every block in Puck's
+     * *Other* drawer rather than in its section — degraded and still usable,
+     * which is the same answer the colour-palette fetch above gives. It is not a
+     * `catch` hiding a capability's absence: the endpoint is `cms`', and an
+     * operator who has switched `cms` off has not thereby switched off the e-mail
+     * builder.
+     */
+    useEffect(() => {
+        let live = true;
+        void getPageBuilderDescriptor()
+            .then((served) => {
+            if (live)
+                setDescriptor(served);
+        })
+            .catch(() => {
+            if (live)
+                setDescriptor(null);
+        });
+        return () => {
+            live = false;
+        };
+    }, []);
+    useEffect(() => {
+        if (!fullscreen)
+            return undefined;
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                setFullscreen(false);
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [fullscreen]);
+    const config = useMemo(() => {
+        const withFields = withEditorFields(defaultEmailBuilderConfig);
+        const withEmbeds = mergeEmbedSelects(withFields, blockOptions);
+        const byContext = filterConfigByContext(withEmbeds, builderContext);
+        // Feature 096, T302/T305 — the sections come from the modules that declared
+        // them, merged and presence-filtered by the server, and are resolved for
+        // `builderContext` through `contextAdmits`. That last part is what keeps the
+        // **newsletter** palette sectioned: no block declares `newsletter`, the
+        // newsletter palette *is* the e-mail palette, and the admission is the one
+        // thing that says so (`contracts/block-definition.md` §4.1.1). The
+        // `categories` map that used to sit in `@endora-commerce/email-components`
+        // named `orders`' eight blocks and `catalog`'s three from a package neither
+        // module owns.
+        const sectioned = {
+            ...byContext,
+            categories: buildPaletteCategories(descriptor?.components ?? [], descriptor?.categories ?? [], builderContext, {
+                title: (section) => {
+                    const owner = section.ownerModule ?? 'transactional_emails';
+                    const resolved = translateInScope(owner, section.titleKey);
+                    return resolved === `${owner}.${section.titleKey}` ? section.key : resolved;
+                },
+                renderable: new Set(Object.keys(byContext.components ?? {})),
+            }),
+        };
+        return filterEmailPaletteByVariables(sectioned, variables.map((v) => v.key));
+    }, [blockOptions, builderContext, descriptor, translateInScope, variables]);
+    const previewHtml = useMemo(() => buildPreviewHtml(data ?? emptyData, variables, logoUrl, previewExtras, embedTrees, previewLanguage), [data, variables, logoUrl, previewExtras, embedTrees, previewLanguage]);
+    return (_jsx(PageBuilderColorPaletteProvider, { initialEntries: paletteEntries, children: _jsxs("div", { className: cn('space-y-3', fullscreen && 'fixed inset-0 z-50 flex flex-col overflow-auto bg-background p-4'), children: [_jsx("div", { className: cn('overflow-hidden rounded-md border', fullscreen ? 'min-h-0 flex-1' : 'min-h-[560px]'), style: { ['--email-preview-width']: `${CANVAS_WIDTH}px` }, children: _jsx(EmailBrandingPreviewProvider, { value: { logoUrl }, children: _jsx(EmailEmbedsProvider, { value: embeds, children: _jsx("div", { className: "email-builder-pane", "data-preview-width": CANVAS_WIDTH, children: _jsx(Puck, { config: config, data: data ?? emptyData, onChange: handleEditorChange, onAction: handlePuckAction, plugins: [emailBuilderPlugin], overrides: {
+                                        drawerItem: ({ name, children, }) => (name === 'transactional_emails.EmailColumn' ? _jsx(_Fragment, {}) : _jsx(_Fragment, { children: children })),
+                                        actionBar: (props) => _jsx(EmailBuilderActionBar, { ...props }),
+                                        componentOverlay: (props) => _jsx(PageBuilderOverlayBridge, { ...props }),
+                                        ...(hasTemplateActions
+                                            ? {
+                                                header: ({ children }) => (_jsx(PageBuilderHeaderShell, { leading: _jsx(PageBuilderTemplateActions, { currentData: data ?? emptyData, ...(onSaveAsTemplate ? { onSaveAsTemplate } : {}), ...(onListTemplatesForApply
+                                                            ? { onListTemplatesForApply }
+                                                            : {}), ...(onResolveTemplateLayout
+                                                            ? {
+                                                                onApplyTemplate: async (templateId) => {
+                                                                    const next = await onResolveTemplateLayout(templateId);
+                                                                    applyCanvasData(structuredClone(next));
+                                                                },
+                                                            }
+                                                            : {}), t: tChrome }), children: children })),
+                                            }
+                                            : {}),
+                                        headerActions: () => (_jsxs("div", { className: "cms-pb-header-actions", children: [_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setPreviewOpen(true), title: "Preview email", "aria-label": "Preview email", children: [_jsx(Eye, { className: "h-4 w-4" }), _jsx("span", { className: "cms-pb-header-actions__label", children: "Preview email" })] }), _jsx(PageBuilderHeaderActions, { fullscreen: fullscreen, onToggleFullscreen: () => setFullscreen((f) => !f), currentData: data ?? emptyData, onClearCanvas: () => applyCanvasData(emptyData), t: tChrome })] })),
+                                    } }, `${editorKey}:${canvasEpoch}`) }) }) }) }), _jsx(EmailRowLayoutPicker, { open: rowLayoutPickerForId !== null, onOpenChange: (open) => {
+                        if (!open) {
+                            if (rowLayoutPickerForId) {
+                                const row = findEmailRowById(lastValidDataRef.current, rowLayoutPickerForId);
+                                const cols = Array.isArray(row?.props.content) ? row.props.content : [];
+                                const hasColumns = cols.length > 0 ||
+                                    Object.keys(lastValidDataRef.current.zones ?? {}).some((zone) => zone.startsWith(`${rowLayoutPickerForId}:`));
+                                // Zones may hold columns before props.content does — check zone length.
+                                const zoneCols = lastValidDataRef.current.zones?.[`${rowLayoutPickerForId}:content`] ?? [];
+                                if (!hasColumns && (!Array.isArray(zoneCols) || zoneCols.length === 0)) {
+                                    applyRowLayout(rowLayoutPickerForId, '2');
+                                    return;
+                                }
+                            }
+                            setRowLayoutPickerForId(null);
+                        }
+                    }, onSelect: (presetId) => {
+                        if (rowLayoutPickerForId)
+                            applyRowLayout(rowLayoutPickerForId, presetId);
+                        setRowLayoutPickerForId(null);
+                    } }), _jsx(EmailHtmlPreviewModal, { open: previewOpen, html: previewHtml, onClose: () => setPreviewOpen(false) })] }) }));
+}
+export { previewNode };
+//# sourceMappingURL=EmailEditorPane.js.map