@aglyn/plugins-email 1.0.0-beta.143

package/src/lib/components/email-blocks.js

@@ -0,0 +1,875 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import * as Aglyn from "@aglyn/aglyn";
+import { mdiCardTextOutline, mdiEmailOutline, mdiFormatText, mdiImageOutline, mdiMinus, mdiPackageVariantClosed, mdiArrowExpandVertical, mdiGestureTapButton, mdiCodeTags } from "@aglyn/shared-data-mdi";
+import { sanitizeAuthorHtml } from "@aglyn/aglyn/app-utils/author-html";
+import { mergeSxProps } from "@aglyn/shared-ui-theme";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { forwardRef } from "react";
+import { BUNDLE_ID } from "../constants/bundle-common.js";
+import { generatePresetId } from "../utils/generate-preset-id.js";
+// ---------------------------------------------------------------- section
+export const SECTION_ID = 'emailSection';
+export const EmailSection = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { backgroundColor, padding, align, children, sx } = props, rest = _object_without_properties_loose(props, [
+        "backgroundColor",
+        "padding",
+        "align",
+        "children",
+        "sx"
+    ]);
+    return /*#__PURE__*/ _jsx(Box, _extends({
+        ref: ref
+    }, rest, {
+        sx: mergeSxProps({
+            maxWidth: 600,
+            mx: 'auto',
+            backgroundColor: backgroundColor || '#ffffff',
+            p: `${padding != null ? padding : 24}px`,
+            textAlign: align != null ? align : 'left'
+        }, sx),
+        children: children
+    }));
+});
+EmailSection.displayName = 'EmailSection';
+export const emailSectionSchema = {
+    $id: SECTION_ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Email section',
+    description: 'An email-safe band with its own background color and padding.',
+    category: Aglyn.ComponentCategory.LAYOUT,
+    icon: {
+        path: mdiEmailOutline.path,
+        sx: {
+            color: '#f57c00'
+        }
+    },
+    attributes: [
+        {
+            name: 'backgroundColor',
+            label: 'Background color',
+            description: 'Solid colors only — gradients are unreliable in email.',
+            component: Aglyn.FieldComponentType.COLOR_PICKER
+        },
+        {
+            name: 'padding',
+            label: 'Padding (px)',
+            description: 'Inner spacing around the section content.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            type: 'number'
+        },
+        {
+            name: 'align',
+            label: 'Content alignment',
+            description: 'How every block inside this section lines up. Each block can still ' + 'override it with its own alignment.',
+            component: Aglyn.FieldComponentType.SELECT,
+            options: [
+                {
+                    value: 'left',
+                    label: 'Left'
+                },
+                {
+                    value: 'center',
+                    label: 'Center'
+                },
+                {
+                    value: 'right',
+                    label: 'Right'
+                }
+            ]
+        }
+    ]
+};
+// ------------------------------------------------------------------- text
+export const TEXT_ID = 'emailText';
+const TEXT_PRESETS = {
+    heading: {
+        fontSize: 28,
+        fontWeight: 700,
+        lineHeight: 1.25
+    },
+    subheading: {
+        fontSize: 20,
+        fontWeight: 600,
+        lineHeight: 1.3
+    },
+    body: {
+        fontSize: 15,
+        fontWeight: 400,
+        lineHeight: 1.55
+    },
+    caption: {
+        fontSize: 12,
+        fontWeight: 400,
+        lineHeight: 1.4
+    }
+};
+export const EmailText = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { children, variant, color, align, sx } = props, rest = _object_without_properties_loose(props, [
+        "children",
+        "variant",
+        "color",
+        "align",
+        "sx"
+    ]);
+    const preset = TEXT_PRESETS[variant != null ? variant : 'body'];
+    return /*#__PURE__*/ _jsx(Typography, _extends({
+        ref: ref,
+        component: "div"
+    }, rest, {
+        sx: mergeSxProps({
+            fontSize: preset.fontSize,
+            fontWeight: preset.fontWeight,
+            lineHeight: preset.lineHeight,
+            color: color || '#1a1a1a',
+            textAlign: align != null ? align : 'left',
+            fontFamily: 'Helvetica, Arial, sans-serif',
+            mb: 1
+        }, sx),
+        children: children != null ? children : 'Email text'
+    }));
+});
+EmailText.displayName = 'EmailText';
+export const emailTextSchema = {
+    $id: TEXT_ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Email text',
+    description: 'A paragraph of email copy in one of the preset styles.',
+    category: Aglyn.ComponentCategory.DATA_DISPLAY,
+    icon: {
+        path: mdiFormatText.path,
+        sx: {
+            color: '#f57c00'
+        }
+    },
+    flags: {
+        textEditable: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    attributes: [
+        {
+            name: 'children',
+            label: 'Text',
+            description: 'Supports merge tokens: {{contact.firstName}}, {{contact.email}}, ' + '{{org.name}}, {{unsubscribeUrl}}.',
+            component: Aglyn.FieldComponentType.TEXTAREA
+        },
+        {
+            name: 'variant',
+            label: 'Style',
+            description: 'Size and weight of this text — Heading and Subheading also give it ' + 'the spacing above and below that a heading needs.',
+            component: Aglyn.FieldComponentType.SELECT,
+            options: [
+                {
+                    value: 'heading',
+                    label: 'Heading'
+                },
+                {
+                    value: 'subheading',
+                    label: 'Subheading'
+                },
+                {
+                    value: 'body',
+                    label: 'Body'
+                },
+                {
+                    value: 'caption',
+                    label: 'Caption'
+                }
+            ]
+        },
+        {
+            name: 'color',
+            label: 'Color',
+            description: 'Text color. Keep it dark on a light background: many clients ' + 'ignore dark mode overrides and show your color as-is.',
+            component: Aglyn.FieldComponentType.COLOR_PICKER
+        },
+        {
+            name: 'align',
+            label: 'Alignment',
+            description: 'How this block of text lines up within the section.',
+            component: Aglyn.FieldComponentType.SELECT,
+            options: [
+                {
+                    value: 'left',
+                    label: 'Left'
+                },
+                {
+                    value: 'center',
+                    label: 'Center'
+                },
+                {
+                    value: 'right',
+                    label: 'Right'
+                }
+            ]
+        }
+    ]
+};
+// --------------------------------------------------------------- richtext
+export const RICHTEXT_ID = 'emailRichtext';
+export const EmailRichtext = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { html, sx } = props, rest = _object_without_properties_loose(props, [
+        "html",
+        "sx"
+    ]);
+    if (!(html == null ? void 0 : html.trim())) {
+        return /*#__PURE__*/ _jsx(Box, _extends({
+            ref: ref
+        }, rest, {
+            sx: mergeSxProps({
+                p: 2,
+                border: '1px dashed',
+                borderColor: 'divider',
+                color: 'text.secondary',
+                fontSize: 13
+            }, sx),
+            children: 'Rich text — add HTML in the attributes panel'
+        }));
+    }
+    return /*#__PURE__*/ _jsx(Box, _extends({
+        ref: ref
+    }, rest, {
+        sx: mergeSxProps({
+            fontFamily: 'Helvetica, Arial, sans-serif',
+            fontSize: 15
+        }, sx),
+        // Sanitized on every render — same policy as the custom HTML block.
+        // The `typeof window` guard this replaced existed only because that
+        // policy was DOMPurify, which needs a DOM; it is now a pure function
+        // (AGL-1901), so the body survives a server render instead of being
+        // blanked — which for an email is the render that gets SENT.
+        dangerouslySetInnerHTML: {
+            __html: sanitizeAuthorHtml(html)
+        }
+    }));
+});
+EmailRichtext.displayName = 'EmailRichtext';
+export const emailRichtextSchema = {
+    $id: RICHTEXT_ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Email rich text',
+    description: 'An HTML fragment in an email, sanitised on render.',
+    category: Aglyn.ComponentCategory.DATA_DISPLAY,
+    icon: {
+        path: mdiCardTextOutline.path,
+        sx: {
+            color: '#f57c00'
+        }
+    },
+    flags: {
+        selfClosing: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    attributes: [
+        {
+            name: 'html',
+            label: 'HTML',
+            description: 'Formatted content (p, b, i, a, ul/ol, h1-h4). Scripts and forms ' + 'are stripped; keep styling simple for email clients. Merge ' + 'tokens work here too.',
+            component: Aglyn.FieldComponentType.TEXTAREA
+        }
+    ]
+};
+// ------------------------------------------------------------------ image
+export const IMAGE_ID = 'emailImage';
+export const EmailImage = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { src: storedSrc, alt, width, href, align, sx } = props, rest = _object_without_properties_loose(props, [
+        "src",
+        "alt",
+        "width",
+        "href",
+        "align",
+        "sx"
+    ]);
+    // A media-picker target, so it can hold a media reference (AGL-1215).
+    // This is the CANVAS preview only — the sent HTML is built by
+    // `email-render`, which needs an absolute URL and cannot resolve either
+    // a reference or the relative CDN path it replaces.
+    const src = Aglyn.resolveMediaSrc(storedSrc);
+    return /*#__PURE__*/ _jsx(Box, _extends({
+        ref: ref
+    }, rest, {
+        sx: mergeSxProps({
+            textAlign: align != null ? align : 'center',
+            my: 1
+        }, sx),
+        children: src ? /*#__PURE__*/ _jsx(Box, {
+            component: "img",
+            src: src,
+            alt: alt != null ? alt : '',
+            sx: {
+                maxWidth: '100%',
+                width: width ? `${width}px` : '100%'
+            }
+        }) : /*#__PURE__*/ _jsx(Box, {
+            sx: {
+                height: 120,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                border: '1px dashed',
+                borderColor: 'divider',
+                color: 'text.secondary',
+                fontSize: 13
+            },
+            children: 'Image — pick from the media library'
+        })
+    }));
+});
+EmailImage.displayName = 'EmailImage';
+export const emailImageSchema = {
+    $id: IMAGE_ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Email image',
+    description: 'An email-safe image, capped at 600px wide, optionally linked.',
+    category: Aglyn.ComponentCategory.DATA_DISPLAY,
+    icon: {
+        path: mdiImageOutline.path,
+        sx: {
+            color: '#f57c00'
+        }
+    },
+    flags: {
+        selfClosing: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    attributes: [
+        {
+            name: 'src',
+            label: 'Source URL',
+            description: 'Use an absolute URL — email clients cannot resolve relative paths.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD
+        },
+        {
+            name: 'alt',
+            label: 'Alt text',
+            // AGL-1896: the same "Browse media" default the site Image element
+            // gets. It matters MORE here — most clients block images by default,
+            // so for most recipients the alt text IS the block.
+            description: 'Shown while images are blocked — most clients block by default. ' + 'Filled in from the media library when you pick a file that has ' + 'alt text.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD
+        },
+        {
+            name: 'width',
+            label: 'Width (px)',
+            description: 'How wide the image renders. Blank fills the section — which is ' + 'usually right, since a phone is narrower than any number you pick.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            type: 'number'
+        },
+        {
+            name: 'href',
+            label: 'Link URL',
+            description: 'Where the image goes when it is clicked. Blank leaves it as a ' + 'plain picture.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD
+        },
+        {
+            name: 'align',
+            label: 'Alignment',
+            description: 'Where the image sits when it is narrower than the section.',
+            component: Aglyn.FieldComponentType.SELECT,
+            options: [
+                {
+                    value: 'left',
+                    label: 'Left'
+                },
+                {
+                    value: 'center',
+                    label: 'Center'
+                },
+                {
+                    value: 'right',
+                    label: 'Right'
+                }
+            ]
+        }
+    ]
+};
+// ----------------------------------------------------------------- button
+export const BUTTON_ID = 'emailButton';
+export const EmailButton = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { children, href, backgroundColor, color, align, sx } = props, rest = _object_without_properties_loose(props, [
+        "children",
+        "href",
+        "backgroundColor",
+        "color",
+        "align",
+        "sx"
+    ]);
+    return /*#__PURE__*/ _jsx(Box, _extends({
+        ref: ref
+    }, rest, {
+        sx: mergeSxProps({
+            textAlign: align != null ? align : 'center',
+            my: 1.5
+        }, sx),
+        children: /*#__PURE__*/ _jsx(Box, {
+            component: "span",
+            sx: {
+                display: 'inline-block',
+                px: 3,
+                py: 1.25,
+                borderRadius: 1,
+                backgroundColor: backgroundColor || '#1a73e8',
+                color: color || '#ffffff',
+                fontFamily: 'Helvetica, Arial, sans-serif',
+                fontSize: 15,
+                fontWeight: 600
+            },
+            children: children != null ? children : 'Call to action'
+        })
+    }));
+});
+EmailButton.displayName = 'EmailButton';
+export const emailButtonSchema = {
+    $id: BUTTON_ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Email button',
+    description: 'A call-to-action button that survives every mail client.',
+    category: Aglyn.ComponentCategory.INPUT,
+    icon: {
+        path: mdiGestureTapButton.path,
+        sx: {
+            color: '#f57c00'
+        }
+    },
+    flags: {
+        textEditable: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    attributes: [
+        {
+            name: 'children',
+            label: 'Label',
+            description: 'The words on the button. Say what happens next — "See the report" ' + 'reads as a destination where "Click here" does not.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD
+        },
+        {
+            name: 'href',
+            label: 'Link URL',
+            description: 'Absolute URL (https://…). Merge tokens allowed.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD
+        },
+        {
+            name: 'backgroundColor',
+            label: 'Button color',
+            description: 'The fill behind the label. Check it against the label color — a ' + 'button nobody can read is a link nobody clicks.',
+            component: Aglyn.FieldComponentType.COLOR_PICKER
+        },
+        {
+            name: 'color',
+            label: 'Label color',
+            description: 'The color of the words on the button.',
+            component: Aglyn.FieldComponentType.COLOR_PICKER
+        },
+        {
+            name: 'align',
+            label: 'Alignment',
+            description: 'Where the button sits across the width of the section.',
+            component: Aglyn.FieldComponentType.SELECT,
+            options: [
+                {
+                    value: 'left',
+                    label: 'Left'
+                },
+                {
+                    value: 'center',
+                    label: 'Center'
+                },
+                {
+                    value: 'right',
+                    label: 'Right'
+                }
+            ]
+        }
+    ]
+};
+// ---------------------------------------------------------------- divider
+export const DIVIDER_ID = 'emailDivider';
+export const EmailDivider = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { color, sx } = props, rest = _object_without_properties_loose(props, [
+        "color",
+        "sx"
+    ]);
+    return /*#__PURE__*/ _jsx(Box, _extends({
+        ref: ref,
+        component: "hr"
+    }, rest, {
+        sx: mergeSxProps({
+            border: 0,
+            // Split shorthand so a palette token path from the theme-
+            // reference color picker (AGL-588) resolves through the sx
+            // system instead of dying inside a template string.
+            borderTopStyle: 'solid',
+            borderTopWidth: 1,
+            borderTopColor: color || '#e0e0e0',
+            my: 2
+        }, sx)
+    }));
+});
+EmailDivider.displayName = 'EmailDivider';
+export const emailDividerSchema = {
+    $id: DIVIDER_ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Email divider',
+    description: 'A horizontal rule between email sections.',
+    category: Aglyn.ComponentCategory.LAYOUT,
+    icon: {
+        path: mdiMinus.path,
+        sx: {
+            color: '#f57c00'
+        }
+    },
+    flags: {
+        selfClosing: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    attributes: [
+        {
+            name: 'color',
+            label: 'Line color',
+            description: 'The color of the rule. A light grey separates sections without ' + 'drawing the eye to the line itself.',
+            component: Aglyn.FieldComponentType.COLOR_PICKER
+        }
+    ]
+};
+// ----------------------------------------------------------------- spacer
+export const SPACER_ID = 'emailSpacer';
+export const EmailSpacer = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { height, sx } = props, rest = _object_without_properties_loose(props, [
+        "height",
+        "sx"
+    ]);
+    return /*#__PURE__*/ _jsx(Box, _extends({
+        ref: ref
+    }, rest, {
+        sx: mergeSxProps({
+            height: height != null ? height : 24
+        }, sx)
+    }));
+});
+EmailSpacer.displayName = 'EmailSpacer';
+export const emailSpacerSchema = {
+    $id: SPACER_ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Email spacer',
+    description: 'Fixed vertical whitespace between email blocks.',
+    category: Aglyn.ComponentCategory.LAYOUT,
+    icon: {
+        path: mdiArrowExpandVertical.path,
+        sx: {
+            color: '#f57c00'
+        }
+    },
+    flags: {
+        selfClosing: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    attributes: [
+        {
+            name: 'height',
+            label: 'Height (px)',
+            description: 'How much empty vertical space this block adds. Email clients drop ' + 'CSS margins, so a spacer is how you get reliable breathing room.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            type: 'number'
+        }
+    ]
+};
+// ---------------------------------------------------------------- product
+export const PRODUCT_ID = 'emailProduct';
+export const EmailProduct = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { productId, buttonLabel, sx } = props, rest = _object_without_properties_loose(props, [
+        "productId",
+        "buttonLabel",
+        "sx"
+    ]);
+    return /*#__PURE__*/ _jsxs(Box, _extends({
+        ref: ref
+    }, rest, {
+        sx: mergeSxProps({
+            border: '1px solid',
+            borderColor: 'divider',
+            borderRadius: 1,
+            p: 2,
+            my: 1,
+            textAlign: 'center',
+            color: 'text.secondary',
+            fontSize: 13
+        }, sx),
+        children: [
+            productId ? `Product card (${productId}) — name, price, image fill in at send` : 'Product card — pick a product in the attributes panel',
+            /*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    mt: 1,
+                    fontWeight: 600
+                },
+                children: buttonLabel != null ? buttonLabel : 'Shop now'
+            })
+        ]
+    }));
+});
+EmailProduct.displayName = 'EmailProduct';
+export const emailProductSchema = {
+    $id: PRODUCT_ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Email product',
+    description: 'A product card resolved at send time, so it never goes stale.',
+    category: Aglyn.ComponentCategory.DATA_DISPLAY,
+    icon: {
+        path: mdiPackageVariantClosed.path,
+        sx: {
+            color: '#f57c00'
+        }
+    },
+    flags: {
+        selfClosing: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    attributes: [
+        {
+            name: 'productId',
+            label: 'Product',
+            description: 'Stored by id — the current name, price, and image render at send.',
+            component: Aglyn.FieldComponentType.PRODUCT_SELECT
+        },
+        {
+            name: 'buttonLabel',
+            label: 'Button label',
+            description: 'The words on the card’s button. Blank uses the block’s default, ' + 'and the link always points at this product’s page.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD
+        }
+    ]
+};
+// ------------------------------------------------------------ custom html
+export const HTML_ID = 'emailHtml';
+export const EmailHtml = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { html, sx } = props, rest = _object_without_properties_loose(props, [
+        "html",
+        "sx"
+    ]);
+    return /*#__PURE__*/ _jsx(Box, _extends({
+        ref: ref
+    }, rest, {
+        sx: mergeSxProps({
+            fontFamily: 'Helvetica, Arial, sans-serif'
+        }, sx),
+        // No `typeof window` guard any more (AGL-1901): the sanitizer needs
+        // no DOM, so a server-rendered email keeps its custom HTML.
+        dangerouslySetInnerHTML: {
+            __html: html ? sanitizeAuthorHtml(html) : ''
+        }
+    }));
+});
+EmailHtml.displayName = 'EmailHtml';
+export const emailHtmlSchema = {
+    $id: HTML_ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Email custom HTML',
+    description: 'Hand-written HTML for an email, used as-is.',
+    category: Aglyn.ComponentCategory.DATA_DISPLAY,
+    icon: {
+        path: mdiCodeTags.path,
+        sx: {
+            color: '#f57c00'
+        }
+    },
+    flags: {
+        selfClosing: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    attributes: [
+        {
+            name: 'html',
+            label: 'HTML',
+            description: 'Raw table markup for advanced layouts. Sanitized with the ' + 'custom-html policy; the render pipeline passes it through as-is ' + 'after sanitization.',
+            component: Aglyn.FieldComponentType.TEXTAREA
+        }
+    ]
+};
+export const emailPresets = [
+    {
+        $id: generatePresetId(SECTION_ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Email section',
+        pluginId: BUNDLE_ID,
+        category: Aglyn.ComponentCategory.LAYOUT,
+        icon: {
+            path: mdiEmailOutline.path,
+            sx: {
+                color: '#f57c00'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: SECTION_ID,
+            pluginId: BUNDLE_ID,
+            props: {}
+        }
+    },
+    {
+        $id: generatePresetId(TEXT_ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Email text',
+        pluginId: BUNDLE_ID,
+        category: Aglyn.ComponentCategory.DATA_DISPLAY,
+        icon: {
+            path: mdiFormatText.path,
+            sx: {
+                color: '#f57c00'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: TEXT_ID,
+            pluginId: BUNDLE_ID,
+            props: {
+                children: 'Hello {{contact.firstName}},',
+                variant: 'body'
+            }
+        }
+    },
+    {
+        $id: generatePresetId(RICHTEXT_ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Email rich text',
+        pluginId: BUNDLE_ID,
+        category: Aglyn.ComponentCategory.DATA_DISPLAY,
+        icon: {
+            path: mdiCardTextOutline.path,
+            sx: {
+                color: '#f57c00'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: RICHTEXT_ID,
+            pluginId: BUNDLE_ID,
+            props: {}
+        }
+    },
+    {
+        $id: generatePresetId(IMAGE_ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Email image',
+        pluginId: BUNDLE_ID,
+        category: Aglyn.ComponentCategory.DATA_DISPLAY,
+        icon: {
+            path: mdiImageOutline.path,
+            sx: {
+                color: '#f57c00'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: IMAGE_ID,
+            pluginId: BUNDLE_ID,
+            props: {}
+        }
+    },
+    {
+        $id: generatePresetId(BUTTON_ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Email button',
+        pluginId: BUNDLE_ID,
+        category: Aglyn.ComponentCategory.INPUT,
+        icon: {
+            path: mdiGestureTapButton.path,
+            sx: {
+                color: '#f57c00'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: BUTTON_ID,
+            pluginId: BUNDLE_ID,
+            props: {
+                children: 'Shop now'
+            }
+        }
+    },
+    {
+        $id: generatePresetId(DIVIDER_ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Email divider',
+        pluginId: BUNDLE_ID,
+        category: Aglyn.ComponentCategory.LAYOUT,
+        icon: {
+            path: mdiMinus.path,
+            sx: {
+                color: '#f57c00'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: DIVIDER_ID,
+            pluginId: BUNDLE_ID,
+            props: {}
+        }
+    },
+    {
+        $id: generatePresetId(SPACER_ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Email spacer',
+        pluginId: BUNDLE_ID,
+        category: Aglyn.ComponentCategory.LAYOUT,
+        icon: {
+            path: mdiArrowExpandVertical.path,
+            sx: {
+                color: '#f57c00'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: SPACER_ID,
+            pluginId: BUNDLE_ID,
+            props: {}
+        }
+    },
+    {
+        $id: generatePresetId(PRODUCT_ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Email product',
+        pluginId: BUNDLE_ID,
+        category: Aglyn.ComponentCategory.DATA_DISPLAY,
+        icon: {
+            path: mdiPackageVariantClosed.path,
+            sx: {
+                color: '#f57c00'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: PRODUCT_ID,
+            pluginId: BUNDLE_ID,
+            props: {}
+        }
+    },
+    {
+        $id: generatePresetId(HTML_ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Email custom HTML',
+        pluginId: BUNDLE_ID,
+        category: Aglyn.ComponentCategory.DATA_DISPLAY,
+        icon: {
+            path: mdiCodeTags.path,
+            sx: {
+                color: '#f57c00'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: HTML_ID,
+            pluginId: BUNDLE_ID,
+            props: {}
+        }
+    }
+];
+
+//# sourceMappingURL=email-blocks.js.map