best-email-builder 0.3.0 → 0.5.0

package/dist/chunk-3LKF4QBL.js

@@ -0,0 +1,595 @@
+import {
+  DARK_PAGE,
+  simulateDarkMode
+} from "./chunk-UFKCLU2D.js";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  SectionLabel,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  cn,
+  useUi
+} from "./chunk-LXR4QTGP.js";
+import {
+  EMAIL_MOBILE_WIDTH
+} from "./chunk-7U6BAKM7.js";
+import {
+  DEFAULT_BUTTON_URL,
+  FONT_STACK,
+  GROUPS,
+  PALETTE,
+  cleanBrand,
+  identity,
+  inWhiteSection,
+  prop
+} from "./chunk-DFNHICTF.js";
+
+// src/features/templates/starter.js
+function escapeXml(text) {
+  return String(text ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+var SIDE = 'padding-left="32px" padding-right="32px"';
+var TEXT = `font-family="${FONT_STACK}" color="${PALETTE.ink}"`;
+function senderHeaderMjml(sender, t) {
+  const name = escapeXml(sender.name || t("Your company"));
+  return sender.logoUrl ? `<mj-image src="${escapeXml(sender.logoUrl)}" alt="${name}" width="${Number(sender.logoWidth) || 140}px" align="left" ${SIDE}></mj-image>` : `<mj-text ${TEXT} font-size="18px" line-height="24px" font-weight="bold" ${SIDE}>${name}</mj-text>`;
+}
+function footerSectionMjml(sender, t) {
+  const name = escapeXml(sender.name || t("Your company"));
+  const footer = [name, sender.address ? escapeXml(sender.address) : ""].filter(Boolean).join(" \xB7 ");
+  return `<mj-section padding-top="20px" padding-bottom="28px"><mj-column><mj-text font-family="${FONT_STACK}" font-size="12px" line-height="18px" color="#6d7484" align="center" ${SIDE}>${footer}<br /><a href="{{ unsubscribe }}" style="color:#6d7484;text-decoration:underline;">${escapeXml(t("Unsubscribe"))}</a></mj-text></mj-column></mj-section>`;
+}
+function createStarterMjml({ sender = {}, buttonUrl = DEFAULT_BUTTON_URL, t = identity } = {}) {
+  return [
+    "<mjml>",
+    `<mj-body background-color="${PALETTE.canvas}" width="600px">`,
+    // Header: logo or sender name.
+    `<mj-section background-color="${PALETTE.surface}" padding-top="28px" padding-bottom="8px">`,
+    "<mj-column>",
+    senderHeaderMjml(sender, t),
+    "</mj-column>",
+    "</mj-section>",
+    // Body: headline, text, button.
+    `<mj-section background-color="${PALETTE.surface}" padding-top="8px" padding-bottom="28px">`,
+    "<mj-column>",
+    `<mj-text ${TEXT} font-size="24px" line-height="32px" font-weight="bold" ${SIDE}>${escapeXml(t("Your headline"))}</mj-text>`,
+    `<mj-text ${TEXT} font-size="15px" line-height="24px" ${SIDE}>${escapeXml(t("Hello {name},", { name: "{{contact.firstname}}" }))}<br /><br />${escapeXml(t("Your text."))}</mj-text>`,
+    `<mj-button href="${escapeXml(buttonUrl)}" background-color="${PALETTE.navy}" color="${PALETTE.white}" font-family="${FONT_STACK}" font-size="15px" font-weight="bold" border-radius="6px" inner-padding="12px 28px" align="left" ${SIDE}>${escapeXml(t("Learn more"))}</mj-button>`,
+    "</mj-column>",
+    "</mj-section>",
+    // Footer: sender and unsubscribe link.
+    footerSectionMjml(sender, t),
+    "</mj-body>",
+    "</mjml>"
+  ].join("");
+}
+var STARTER_MJML = createStarterMjml();
+
+// src/blocks/social/index.js
+var SOCIAL_NETWORKS = [
+  { value: "facebook-noshare", label: "Facebook", href: "https://www.facebook.com/" },
+  { value: "instagram-noshare", label: "Instagram", href: "https://www.instagram.com/" },
+  { value: "linkedin-noshare", label: "LinkedIn", href: "https://www.linkedin.com/" },
+  { value: "x-noshare", label: "X", href: "https://x.com/" },
+  { value: "youtube-noshare", label: "YouTube", href: "https://www.youtube.com/" },
+  { value: "github-noshare", label: "GitHub", href: "https://github.com/" }
+];
+var DEFAULT_NETWORKS = ["facebook-noshare", "instagram-noshare", "linkedin-noshare", "x-noshare"];
+var MJML = '<mj-social mode="horizontal" align="center" icon-size="28px" border-radius="14px" inner-padding="6px">' + DEFAULT_NETWORKS.map((name) => {
+  const network = SOCIAL_NETWORKS.find((n) => n.value === name);
+  return `<mj-social-element name="${name}" href="${network?.href}"></mj-social-element>`;
+}).join("") + "</mj-social>";
+var socialBlock = {
+  id: "social",
+  label: "Social links",
+  description: "Icons linking to your profiles",
+  icon: "Share2",
+  kind: "content",
+  tagName: "mj-social",
+  order: 60,
+  mjml: MJML,
+  sectionMjml: inWhiteSection(MJML),
+  properties: [
+    { key: "icon-size", label: "Icon size", type: "size", group: GROUPS.layout, min: 16, max: 48, unit: "px" },
+    prop.radius(24),
+    prop.align(),
+    {
+      key: "mode",
+      label: "Direction",
+      type: "select",
+      group: GROUPS.layout,
+      options: [
+        { value: "horizontal", label: "Horizontal" },
+        { value: "vertical", label: "Vertical" }
+      ]
+    },
+    prop.padding("inner-padding", "Space around each icon"),
+    prop.padding()
+  ]
+};
+var socialElementBlock = {
+  id: "social-element",
+  label: "Social link",
+  icon: "Link",
+  kind: "structure",
+  tagName: "mj-social-element",
+  order: 903,
+  properties: [
+    {
+      key: "name",
+      label: "Network",
+      type: "select",
+      group: GROUPS.content,
+      options: SOCIAL_NETWORKS.map(({ value, label }) => ({ value, label }))
+    },
+    prop.href("Profile URL"),
+    prop.background("background-color", "Icon background")
+  ]
+};
+
+// src/features/templates/gallery.js
+var WHITE_SECTION = `background-color="${PALETTE.surface}"`;
+function section(inner, { top = 8, bottom = 8, x = 0 } = {}) {
+  const sides = x ? ` padding-left="${x}px" padding-right="${x}px"` : "";
+  return `<mj-section ${WHITE_SECTION} padding-top="${top}px" padding-bottom="${bottom}px"${sides}>${inner}</mj-section>`;
+}
+function column(inner, attrs = "") {
+  return `<mj-column${attrs ? ` ${attrs}` : ""}>${inner}</mj-column>`;
+}
+function heading(text, { size = 24, color = PALETTE.navy, align = "left", side = true } = {}) {
+  return `<mj-text font-family="${FONT_STACK}" font-size="${size}px" line-height="${Math.round(size * 1.3)}px" font-weight="bold" color="${color}" align="${align}"${side ? ` ${SIDE}` : ""}>${text}</mj-text>`;
+}
+function paragraph(html, { size = 15, color = PALETTE.ink, align = "left", side = true } = {}) {
+  return `<mj-text font-family="${FONT_STACK}" font-size="${size}px" line-height="${Math.round(size * 1.6)}px" color="${color}" align="${align}"${side ? ` ${SIDE}` : ""}>${html}</mj-text>`;
+}
+function button(label, { align = "left", background = PALETTE.navy, color = PALETTE.white, side = true } = {}) {
+  return `<mj-button href="${DEFAULT_BUTTON_URL}" background-color="${background}" color="${color}" font-family="${FONT_STACK}" font-size="15px" font-weight="bold" border-radius="6px" inner-padding="12px 28px" align="${align}"${side ? ` ${SIDE}` : ""}>${label}</mj-button>`;
+}
+var IMAGE = '<mj-image align="center"></mj-image>';
+function header(sender, t) {
+  return `<mj-section ${WHITE_SECTION} padding-top="28px" padding-bottom="8px">${column(senderHeaderMjml(sender, t))}</mj-section>`;
+}
+function banner({ title, text, cta, background = PALETTE.navy }) {
+  return `<mj-section background-color="${background}" background-size="cover" background-position="center center" background-repeat="no-repeat" padding-top="48px" padding-bottom="48px">` + column(
+    heading(title, { size: 30, color: PALETTE.white, align: "center" }) + paragraph(text, { size: 16, color: PALETTE.border, align: "center" }) + (cta ? button(cta, { align: "center", background: PALETTE.white, color: PALETTE.navy }) : "")
+  ) + "</mj-section>";
+}
+function social() {
+  const elements = ["facebook-noshare", "instagram-noshare", "linkedin-noshare"].map((name) => `<mj-social-element name="${name}" href="${SOCIAL_NETWORKS.find((n) => n.value === name)?.href}"></mj-social-element>`).join("");
+  return section(
+    column(
+      `<mj-social mode="horizontal" align="center" icon-size="28px" border-radius="14px" inner-padding="6px">${elements}</mj-social>`
+    ),
+    { top: 16, bottom: 16 }
+  );
+}
+function email(body) {
+  return `<mjml><mj-body background-color="${PALETTE.canvas}" width="600px">${body}</mj-body></mjml>`;
+}
+var esc = escapeXml;
+var TEMPLATE_GALLERY = [
+  {
+    id: "blank",
+    name: "Blank",
+    description: "An empty page to build from scratch",
+    create: () => email("")
+  },
+  {
+    id: "simple",
+    name: "Simple",
+    description: "Logo, headline, text and a button",
+    create: ({ sender, t }) => createStarterMjml({ sender, t })
+  },
+  {
+    id: "newsletter",
+    name: "Newsletter",
+    description: "Monthly news: banner, two articles, highlights",
+    meta: (t) => ({
+      subject: t("The news of the month"),
+      preheader: t("What changed, what is coming, and two stories worth your time.")
+    }),
+    create: ({ sender, t }) => email(
+      header(sender, t) + banner({
+        title: esc(t("The news of the month")),
+        text: esc(t("What changed, what is coming, and two stories worth your time.")),
+        cta: null
+      }) + [1, 2].map(
+        (n) => section(
+          column(IMAGE, 'vertical-align="middle"') + column(
+            heading(esc(t("Article {n}", { n })), { size: 20, side: false }) + paragraph(esc(t("Two or three sentences that sum up the story and make people want the rest.")), {
+              side: false
+            }) + button(esc(t("Read more")), { side: false }),
+            'vertical-align="middle"'
+          ),
+          { top: 16, bottom: 16, x: 16 }
+        )
+      ).join("") + section(column(heading(esc(t("In brief")), { size: 20 })), { top: 20, bottom: 0 }) + section(
+        [t("A new feature"), t("An event"), t("A tip")].map(
+          (title) => column(
+            heading(esc(title), { size: 16, side: false }) + paragraph(esc(t("One sentence about it.")), { size: 14, side: false })
+          )
+        ).join(""),
+        { bottom: 20, x: 16 }
+      ) + social() + footerSectionMjml(sender, t)
+    )
+  },
+  {
+    id: "welcome",
+    name: "Welcome",
+    description: "Greets a new customer and lists the first steps",
+    meta: (t) => ({ subject: t("Welcome aboard!"), preheader: t("Three steps to get started.") }),
+    create: ({ sender, t }) => email(
+      header(sender, t) + section(
+        column(
+          heading(esc(t("Welcome, {name}!", { name: "{{contact.firstname}}" })), { size: 28 }) + paragraph(esc(t("Thank you for joining us. Here is how to get the most out of your account.")))
+        ),
+        { top: 16, bottom: 8 }
+      ) + section(
+        [
+          [t("1. Complete your profile"), t("So we can tailor what we send you.")],
+          [t("2. Explore"), t("Take a tour of what you can do.")],
+          [t("3. Ask us anything"), t("Reply to this email: a person reads it.")]
+        ].map(
+          ([title, text]) => column(
+            heading(esc(title), { size: 16, side: false }) + paragraph(esc(text), { size: 14, side: false }),
+            `background-color="${PALETTE.canvas}" padding-top="12px" padding-bottom="12px" padding-left="12px" padding-right="12px"`
+          )
+        ).join(""),
+        { x: 24 }
+      ) + section(column(button(esc(t("Get started")), { align: "center" })), { top: 16, bottom: 28 }) + footerSectionMjml(sender, t)
+    )
+  },
+  {
+    id: "promotion",
+    name: "Promotion",
+    description: "A sale with a discount code and two products",
+    meta: (t) => ({ subject: t("30% off this weekend only"), preheader: t("With the code SPRING30, until Sunday midnight.") }),
+    create: ({ sender, t }) => email(
+      header(sender, t) + banner({
+        title: esc(t("30% off everything")),
+        text: esc(t("This weekend only, with the code SPRING30.")),
+        cta: esc(t("Shop the sale")),
+        background: PALETTE.brand
+      }) + section(
+        [t("Product one"), t("Product two")].map(
+          (name) => column(
+            IMAGE + heading(esc(name), { size: 18, side: false }) + paragraph(esc(t("\u20AC49 instead of \u20AC70")), { size: 15, side: false }) + button(esc(t("Buy")), { side: false })
+          )
+        ).join(""),
+        { top: 20, bottom: 20, x: 16 }
+      ) + section(
+        column(
+          paragraph(esc(t("Offer valid until Sunday midnight, while stocks last.")), {
+            size: 12,
+            color: "#6d7484",
+            align: "center"
+          })
+        )
+      ) + footerSectionMjml(sender, t)
+    )
+  },
+  {
+    id: "event",
+    name: "Event invitation",
+    description: "Date, place and a button to book a seat",
+    meta: (t) => ({ subject: t("You're invited"), preheader: t("Save the date \u2014 seats are limited.") }),
+    create: ({ sender, t }) => email(
+      header(sender, t) + banner({
+        title: esc(t("You're invited")),
+        text: esc(t("An evening of talks and drinks with the team and our customers.")),
+        cta: null
+      }) + section(
+        column(heading(esc(t("When")), { size: 16, side: false }) + paragraph(esc(t("Thursday, 7 pm")), { side: false })) + column(heading(esc(t("Where")), { size: 16, side: false }) + paragraph(esc(t("Our offices, 1 Main Street")), { side: false })),
+        { top: 24, x: 16 }
+      ) + section(
+        column(
+          paragraph(esc(t("Seats are limited: book yours now, it takes ten seconds."))) + button(esc(t("Book my seat")), { align: "left" })
+        ),
+        { bottom: 28 }
+      ) + footerSectionMjml(sender, t)
+    )
+  }
+];
+function buildGallery({ templates = TEMPLATE_GALLERY, sender = {}, t = identity } = {}) {
+  return templates.map((template) => {
+    const meta = template.meta ? template.meta(t) : {};
+    return {
+      id: template.id,
+      name: t(template.name),
+      description: t(template.description),
+      mjml: template.create({ sender, t }),
+      subject: meta.subject || "",
+      preheader: meta.preheader || ""
+    };
+  });
+}
+var THUMBNAIL_IMAGE = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 300'%3E%3Crect width='600' height='300' fill='%23dfe6f0'/%3E%3C/svg%3E";
+function withThumbnailImages(mjml) {
+  return String(mjml || "").replace(/<mj-image(?![^>]*\ssrc=)([^>]*)>/g, `<mj-image src="${THUMBNAIL_IMAGE}"$1>`);
+}
+function withPlaceholderImages(html) {
+  return String(html || "").replace(/<img(?![^>]*\ssrc=)(\s[^>]*)?>/g, (_m, attrs = "") => `<img src="${THUMBNAIL_IMAGE}"${attrs}>`);
+}
+
+// src/features/preview/PreviewButton.jsx
+import { useMemo, useState } from "react";
+import { AlertTriangle, CheckCircle2, Eye, Info, Loader2, Monitor, Moon, RefreshCw, Smartphone, Sun } from "lucide-react";
+
+// src/core/scrollbars.js
+var FRAME_SCROLLBAR_CSS = `
+::-webkit-scrollbar{width:5.6px;height:5.6px;background:transparent}
+::-webkit-scrollbar-button{display:none;width:0;height:0}
+::-webkit-scrollbar-track,::-webkit-scrollbar-track-piece,::-webkit-scrollbar-corner{background:transparent;border:0;box-shadow:none}
+::-webkit-scrollbar-thumb{background-color:rgba(156,163,175,.45);border:1.4px solid transparent;background-clip:content-box;border-radius:9999px;min-height:2rem;min-width:2rem}
+::-webkit-scrollbar-thumb:hover{background-color:rgba(107,114,128,.7)}
+@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:rgba(156,163,175,.45) transparent}}
+@media (hover:hover) and (pointer:fine){
+::-webkit-scrollbar-thumb{background-color:transparent}
+*:hover::-webkit-scrollbar-thumb{background-color:rgba(156,163,175,.45)}
+*:hover::-webkit-scrollbar-thumb:hover{background-color:rgba(107,114,128,.7)}
+@supports not selector(::-webkit-scrollbar){*{scrollbar-color:transparent transparent}*:hover{scrollbar-color:rgba(156,163,175,.45) transparent}}
+}`;
+
+// src/features/preview/PreviewButton.jsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var LEVEL_ICON = { warning: AlertTriangle, info: Info };
+function QualityList({ quality = [], warnings = [] }) {
+  const { t } = useUi();
+  if (!quality.length && !warnings.length) {
+    return /* @__PURE__ */ jsxs("p", { className: "eb:flex eb:items-center eb:gap-1.5 eb:text-[12px] eb:text-foreground-lighter", children: [
+      /* @__PURE__ */ jsx(CheckCircle2, { className: "eb:size-3.5 eb:text-success", "aria-hidden": "true" }),
+      t("Nothing to fix.")
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("ul", { className: "eb:space-y-1.5", "aria-label": t("Points to check"), children: [
+    quality.map((issue) => {
+      const Icon = LEVEL_ICON[issue.level] || Info;
+      return /* @__PURE__ */ jsxs("li", { className: "eb:flex eb:items-start eb:gap-1.5 eb:text-[12px] eb:text-foreground", children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            className: cn(
+              "eb:mt-0.5 eb:size-3.5 eb:shrink-0",
+              issue.level === "warning" ? "eb:text-warning" : "eb:text-foreground-muted"
+            ),
+            "aria-hidden": "true"
+          }
+        ),
+        issue.message
+      ] }, issue.code);
+    }),
+    warnings.slice(0, 5).map((w, i) => /* @__PURE__ */ jsxs("li", { className: "eb:flex eb:items-start eb:gap-1.5 eb:text-[12px] eb:text-foreground-lighter", children: [
+      /* @__PURE__ */ jsx(Info, { className: "eb:mt-0.5 eb:size-3.5 eb:shrink-0 eb:text-foreground-muted", "aria-hidden": "true" }),
+      "MJML: ",
+      w.message
+    ] }, `mjml-${i}`))
+  ] });
+}
+var PREVIEW_SCROLLBAR_CSS = `<style data-preview-scrollbar>${FRAME_SCROLLBAR_CSS}</style>`;
+var withPreviewScrollbars = (html) => !html ? "" : /<\/head>/i.test(html) ? html.replace(/<\/head>/i, `${PREVIEW_SCROLLBAR_CSS}</head>`) : PREVIEW_SCROLLBAR_CSS + html;
+function EmailPreview({ html, loading = false, error = null, device = "desktop", onDeviceChange, onRefresh, hint = true }) {
+  const { t } = useUi();
+  const isMobile = device === "mobile";
+  const [scheme, setScheme] = useState("light");
+  const dark = scheme === "dark";
+  const srcDoc = useMemo(() => withPreviewScrollbars(dark ? simulateDarkMode(html) : html), [html, dark]);
+  return /* @__PURE__ */ jsxs("div", { className: "eb:flex eb:h-full eb:min-h-0 eb:flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "eb:mb-2 eb:flex eb:shrink-0 eb:flex-wrap eb:items-center eb:gap-2", children: [
+      /* @__PURE__ */ jsx(Tabs, { value: device, onValueChange: (value) => onDeviceChange?.(value), children: /* @__PURE__ */ jsxs(TabsList, { "aria-label": t("Device"), children: [
+        /* @__PURE__ */ jsxs(TabsTrigger, { value: "desktop", children: [
+          /* @__PURE__ */ jsx(Monitor, {}),
+          t("Desktop")
+        ] }),
+        /* @__PURE__ */ jsxs(TabsTrigger, { value: "mobile", children: [
+          /* @__PURE__ */ jsx(Smartphone, {}),
+          t("Mobile")
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(Tabs, { value: scheme, onValueChange: setScheme, children: /* @__PURE__ */ jsxs(TabsList, { "aria-label": t("Color scheme"), children: [
+        /* @__PURE__ */ jsx(TabsTrigger, { value: "light", "aria-label": t("Light mode"), title: t("Light mode"), children: /* @__PURE__ */ jsx(Sun, {}) }),
+        /* @__PURE__ */ jsx(TabsTrigger, { value: "dark", "aria-label": t("Dark mode"), title: t("Dark mode"), children: /* @__PURE__ */ jsx(Moon, {}) })
+      ] }) }),
+      /* @__PURE__ */ jsx("span", { className: "eb:flex-1" }),
+      onRefresh && /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm-compact", onClick: onRefresh, disabled: loading, children: [
+        loading ? /* @__PURE__ */ jsx(Loader2, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx(RefreshCw, {}),
+        t("Refresh")
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "eb:min-h-0 eb:flex-1 eb:overflow-auto eb:rounded-lg2 eb:border eb:border-border eb:bg-surface-75 eb:p-3", children: error ? /* @__PURE__ */ jsx("div", { className: "eb:flex eb:h-full eb:items-center eb:justify-center eb:p-6 eb:text-center eb:text-[13px] eb:text-destructive", children: error }) : !srcDoc ? /* @__PURE__ */ jsx("div", { className: "eb:flex eb:h-full eb:items-center eb:justify-center eb:p-6 eb:text-center eb:text-[13px] eb:text-foreground-lighter", children: loading ? t("Rendering\u2026") : t("Nothing to show yet.") }) : (
+      // Narrows and widens like the editor's canvas (width .35s ease).
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "eb:mx-auto eb:max-w-full eb:transition-[width,box-shadow] eb:duration-[350ms] eb:ease-in-out eb:motion-reduce:transition-none",
+            isMobile && "eb:shadow-sm"
+          ),
+          style: { width: isMobile ? EMAIL_MOBILE_WIDTH : "100%", background: dark ? DARK_PAGE : "#ffffff" },
+          "data-device": device,
+          "data-scheme": scheme,
+          children: /* @__PURE__ */ jsx(
+            "iframe",
+            {
+              sandbox: "",
+              srcDoc,
+              title: t("Email preview"),
+              className: "eb:block eb:w-full eb:border-0 eb:transition-[height] eb:duration-[350ms] eb:ease-in-out eb:motion-reduce:transition-none",
+              style: { height: isMobile ? 760 : 900, background: dark ? DARK_PAGE : "#ffffff" }
+            }
+          )
+        }
+      )
+    ) }),
+    dark ? /* @__PURE__ */ jsx("p", { className: "eb:mt-2 eb:shrink-0 eb:text-[11px] eb:leading-relaxed eb:text-foreground-lighter", "data-testid": "eb-dark-hint", children: t("Dark mode as Gmail and Outlook apps show it: light backgrounds turn dark, dark text turns light, images stay as they are.") }) : hint && /* @__PURE__ */ jsx("p", { className: "eb:mt-2 eb:shrink-0 eb:text-[11px] eb:leading-relaxed eb:text-foreground-lighter", children: t("Indicative preview \u2014 check it with \u201CSend test\u201D.") })
+  ] });
+}
+function PreviewButton({ context }) {
+  const { editor, ready, meta, storage } = context;
+  const { t } = useUi();
+  const [open, setOpen] = useState(false);
+  const [device, setDevice] = useState("desktop");
+  const [state, setState] = useState({ loading: false, html: "", subject: null, preheader: null, warnings: [], quality: [], error: null });
+  const refresh = async () => {
+    setState((s) => ({ ...s, loading: true, error: null }));
+    try {
+      const data = await storage.render({ mjml: editor.exportMjml(), subject: meta.subject, preheader: meta.preheader });
+      setState({
+        loading: false,
+        html: data.html,
+        // Subject and preview text with their variables filled, when the backend returns them.
+        subject: data.subject ?? null,
+        preheader: data.preheader ?? null,
+        warnings: data.warnings || [],
+        quality: data.quality || [],
+        error: null
+      });
+    } catch (error) {
+      setState({ loading: false, html: "", subject: null, preheader: null, warnings: [], quality: [], error: error.message });
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        size: "sm-compact",
+        disabled: !ready,
+        onClick: () => {
+          setOpen(true);
+          refresh();
+        },
+        children: [
+          /* @__PURE__ */ jsx(Eye, {}),
+          t("Preview")
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "eb:flex eb:h-[85vh] eb:max-h-[85vh] eb:flex-col eb:gap-4 eb:sm:max-w-[67.2rem]", children: [
+      /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs("div", { className: "eb:flex eb:items-center eb:gap-3", children: [
+        /* @__PURE__ */ jsx("span", { className: "eb:flex eb:size-10 eb:shrink-0 eb:items-center eb:justify-center eb:rounded-lg2 eb:bg-primary/10 eb:text-primary", children: /* @__PURE__ */ jsx(Eye, { className: "eb:size-5" }) }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { className: "eb:text-base eb:font-normal", children: t("Email preview") }),
+          /* @__PURE__ */ jsx(DialogDescription, { className: "eb:text-[13px]", children: t("Final rendering, variables filled with samples.") })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "eb:grid eb:min-h-0 eb:flex-1 eb:grid-cols-1 eb:gap-4 eb:md:grid-cols-[minmax(0,1fr)_260px]", children: [
+        /* @__PURE__ */ jsx(
+          EmailPreview,
+          {
+            html: state.html,
+            loading: state.loading,
+            error: state.error,
+            device,
+            onDeviceChange: setDevice,
+            onRefresh: refresh,
+            hint: typeof storage.sendTest === "function"
+          }
+        ),
+        /* @__PURE__ */ jsxs("aside", { className: "eb:min-h-0 eb:space-y-5 eb:overflow-y-auto", "aria-busy": state.loading, children: [
+          /* @__PURE__ */ jsxs("section", { className: "eb:space-y-2", children: [
+            /* @__PURE__ */ jsx(SectionLabel, { children: t("Inbox") }),
+            /* @__PURE__ */ jsxs("div", { className: "eb:rounded-lg2 eb:border eb:border-border eb:bg-surface-75 eb:px-3 eb:py-2.5", children: [
+              /* @__PURE__ */ jsx("p", { className: "eb:text-[13px] eb:font-medium eb:text-foreground", children: (state.subject ?? meta.subject) || t("No subject") }),
+              /* @__PURE__ */ jsx("p", { className: "eb:text-[12px] eb:text-foreground-muted", children: (state.preheader ?? meta.preheader) || t("No preview text") })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("section", { className: "eb:space-y-2", children: [
+            /* @__PURE__ */ jsx(SectionLabel, { children: t("To check") }),
+            !state.loading && !state.error && /* @__PURE__ */ jsx(QualityList, { quality: state.quality, warnings: state.warnings })
+          ] })
+        ] })
+      ] })
+    ] }) })
+  ] });
+}
+
+// src/features/brand/useBrand.js
+import { useCallback, useEffect, useState as useState2 } from "react";
+var entries = /* @__PURE__ */ new WeakMap();
+function brandOf(storage) {
+  let entry = entries.get(storage);
+  if (entry) return entry;
+  const created = { value: {}, loaded: Promise.resolve({}), listeners: /* @__PURE__ */ new Set() };
+  created.loaded = typeof storage?.loadBrand === "function" ? Promise.resolve().then(() => storage.loadBrand()).then(
+    (brand) => cleanBrand(brand),
+    () => (
+      /** @type {Brand} */
+      {}
+    )
+  ).then((brand) => {
+    created.value = brand;
+    created.listeners.forEach((listener) => listener(brand));
+    return brand;
+  }) : created.loaded;
+  if (storage && typeof storage === "object") entries.set(storage, created);
+  return created;
+}
+function useBrand(storage) {
+  const [brand, setState] = useState2(() => brandOf(storage).value);
+  useEffect(() => {
+    const entry = brandOf(storage);
+    setState(entry.value);
+    entry.listeners.add(setState);
+    return () => {
+      entry.listeners.delete(setState);
+    };
+  }, [storage]);
+  const setBrand = useCallback(
+    (value) => {
+      const entry = brandOf(storage);
+      entry.value = cleanBrand(value);
+      entry.listeners.forEach((listener) => listener(entry.value));
+    },
+    [storage]
+  );
+  return { brand, setBrand };
+}
+
+// src/ui/useLayoutWidth.js
+import { useEffect as useEffect2, useState as useState3 } from "react";
+var LAYOUT_BREAKPOINTS = { wide: 1180, medium: 760 };
+function layoutFor(width) {
+  if (width >= LAYOUT_BREAKPOINTS.wide) return "wide";
+  if (width >= LAYOUT_BREAKPOINTS.medium) return "medium";
+  return "narrow";
+}
+function useLayoutWidth(ref) {
+  const [layout, setLayout] = useState3(
+    /** @type {'wide'|'medium'|'narrow'} */
+    "wide"
+  );
+  useEffect2(() => {
+    const el = ref.current;
+    if (!el || typeof ResizeObserver === "undefined") return void 0;
+    const measure = () => setLayout(layoutFor(el.getBoundingClientRect().width));
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref]);
+  return layout;
+}
+
+export {
+  socialBlock,
+  socialElementBlock,
+  FRAME_SCROLLBAR_CSS,
+  EmailPreview,
+  PreviewButton,
+  createStarterMjml,
+  STARTER_MJML,
+  TEMPLATE_GALLERY,
+  buildGallery,
+  withThumbnailImages,
+  withPlaceholderImages,
+  brandOf,
+  useBrand,
+  useLayoutWidth
+};
+//# sourceMappingURL=chunk-3LKF4QBL.js.map