best-email-builder 0.1.1 → 0.2.0

package/dist/index.js

@@ -29,7 +29,7 @@ import {
   unknownVariables,
   usedVariables,
   validateCustomVariable
-} from "./chunk-2DZ6BRIJ.js";
+} from "./chunk-MTALS5GC.js";
 
 // src/core/events.js
 function createEmitter({ onError } = {}) {
@@ -136,7 +136,7 @@ function createEmailEditor({ adapter, blocks, features = null }) {
     return resolved;
   }
   function blockForTag(tagName) {
-    const all = blocks.list();
+    const all = blocks.list((b) => !b.insertOnly);
     return all.find((b) => b.tagName === tagName && b.kind === "structure") || all.find((b) => b.tagName === tagName) || null;
   }
   function toEmailSelection(selection) {
@@ -302,9 +302,14 @@ function createEmailEditor({ adapter, blocks, features = null }) {
       requireReady("exportMjml");
       return adapter.exportMjml();
     },
-    exportHtml() {
+    /**
+     * The email (or the given MJML) compiled by the CANVAS compiler — for
+     * display only (thumbnails, inspection). The HTML that is stored and sent
+     * is always compiled by the server.
+     */
+    exportHtml(mjml = null) {
       requireReady("exportHtml");
-      return adapter.exportHtml();
+      return adapter.exportHtml(mjml === null || mjml === void 0 ? null : String(mjml));
     },
     setDevice(device) {
       requireReady("setDevice");
@@ -439,10 +444,10 @@ function isInteropLayer(value) {
 
 // src/adapters/grapesjs/GrapesJsAdapter.js
 var ENGINE_NAME = "grapesjs-mjml";
-var ENGINE_VERSION = "0.22.16";
+var ENGINE_VERSION = "0.23.6";
 var BLOCK_PREFIX = "eb-";
 var LOCKED_TYPES = /* @__PURE__ */ new Set(["mjml", "mj-head", "mj-body", "wrapper"]);
-var LABEL_TYPES = /* @__PURE__ */ new Set(["mj-button"]);
+var LABEL_TYPES = /* @__PURE__ */ new Set(["mj-button", "mj-navbar-link"]);
 var RICH_TYPES = /* @__PURE__ */ new Set(["mj-text", "mj-button"]);
 var ENGINE_LOCALES = {
   fr: () => Promise.all([import("grapesjs/locale/fr.mjs"), import("grapesjs-mjml/locale/fr")])
@@ -581,11 +586,11 @@ function createGrapesJsAdapter({ locale = "en", loadEngine = defaultLoadEngine }
   function placementFor(block, target) {
     const root = body();
     if (!root) throw new Error("GrapesJsAdapter: email body not found");
-    const section = target ? closest(target, ["mj-section", "mj-wrapper", "mj-hero"]) : null;
+    const section2 = target ? closest(target, ["mj-section", "mj-wrapper", "mj-hero"]) : null;
     const afterSection = () => {
-      if (section && section.parent()) {
-        const coll = section.parent().components();
-        return { collection: coll, at: coll.indexOf(section) + 1, wrap: false };
+      if (section2 && section2.parent()) {
+        const coll = section2.parent().components();
+        return { collection: coll, at: coll.indexOf(section2) + 1, wrap: false };
       }
       return { collection: root.components(), at: root.components().length, wrap: false };
     };
@@ -594,11 +599,11 @@ function createGrapesJsAdapter({ locale = "en", loadEngine = defaultLoadEngine }
     if (type === "mj-column") {
       return { collection: target.components(), at: target.components().length, wrap: false };
     }
-    const column = target ? closest(target, ["mj-column"]) : null;
-    if (column && target !== column) {
+    const column2 = target ? closest(target, ["mj-column"]) : null;
+    if (column2 && target !== column2) {
       let child = target;
-      while (child.parent() && child.parent() !== column) child = child.parent();
-      const coll = column.components();
+      while (child.parent() && child.parent() !== column2) child = child.parent();
+      const coll = column2.components();
       return { collection: coll, at: coll.indexOf(child) + 1, wrap: false };
     }
     return { ...afterSection(), wrap: true };
@@ -813,8 +818,9 @@ function createGrapesJsAdapter({ locale = "en", loadEngine = defaultLoadEngine }
     exportMjml() {
       return String(requireEditor().runCommand("mjml-code") || "").replace(PLACEHOLDER_SRC_ATTR, "").trim();
     },
-    exportHtml() {
-      const result = requireEditor().runCommand("mjml-code-to-html", { mjml: adapter.exportMjml() }) || {};
+    exportHtml(mjml = null) {
+      const source = mjml ?? adapter.exportMjml();
+      const result = requireEditor().runCommand("mjml-code-to-html", { mjml: source }) || {};
       return {
         html: String(result.html || ""),
         errors: (result.errors || []).map((e) => ({
@@ -981,6 +987,30 @@ var sectionBlock = {
   order: 901,
   properties: [
     prop.background("background-color", "Background"),
+    // A background image keeps the color under it: shown when images are blocked.
+    { key: "background-url", label: "Background image", type: "image", group: GROUPS.colors },
+    {
+      key: "background-size",
+      label: "Image size",
+      type: "select",
+      group: GROUPS.colors,
+      options: [
+        { value: "cover", label: "Fill the section" },
+        { value: "contain", label: "Whole image" },
+        { value: "auto", label: "Original size" }
+      ]
+    },
+    {
+      key: "background-position",
+      label: "Image position",
+      type: "select",
+      group: GROUPS.colors,
+      options: [
+        { value: "center center", label: "Center" },
+        { value: "center top", label: "Top" },
+        { value: "center bottom", label: "Bottom" }
+      ]
+    },
     prop.padding("padding", "Padding"),
     prop.radius(24)
   ]
@@ -1029,6 +1059,16 @@ var textBlock = {
     prop.fontFamily(),
     prop.fontSize(10, 48),
     prop.lineHeight(),
+    {
+      key: "font-weight",
+      label: "Weight",
+      type: "select",
+      group: GROUPS.typography,
+      options: [
+        { value: "normal", label: "Normal" },
+        { value: "bold", label: "Bold" }
+      ]
+    },
     prop.color("Text"),
     prop.background("container-background-color", "Background"),
     { ...prop.align(), options: [...prop.align().options || [], { value: "justify", label: "Justify" }] },
@@ -1172,6 +1212,133 @@ var spacerBlock = {
   ]
 };
 
+// src/blocks/heading/index.js
+var MJML6 = `<mj-text font-family="${FONT_STACK}" font-size="26px" line-height="34px" font-weight="bold" color="${PALETTE.navy}" align="left">Your headline</mj-text>`;
+var headingBlock = {
+  id: "heading",
+  label: "Heading",
+  description: "Large bold title",
+  icon: "Heading",
+  kind: "content",
+  tagName: "mj-text",
+  insertOnly: true,
+  order: 5,
+  mjml: MJML6,
+  sectionMjml: inWhiteSection(MJML6),
+  editableContent: true,
+  properties: []
+};
+
+// 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 MJML7 = '<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: MJML7,
+  sectionMjml: inWhiteSection(MJML7),
+  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/blocks/navbar/index.js
+function link(label, href) {
+  return `<mj-navbar-link href="${href}" font-family="${FONT_STACK}" font-size="14px" color="${PALETTE.navy}" padding-top="8px" padding-right="12px" padding-bottom="8px" padding-left="12px">${label}</mj-navbar-link>`;
+}
+var MJML8 = '<mj-navbar align="center">' + link("Shop", "https://example.com/shop") + link("Blog", "https://example.com/blog") + link("Contact", "https://example.com/contact") + "</mj-navbar>";
+var navbarBlock = {
+  id: "navbar",
+  label: "Menu",
+  description: "Row of links to your site",
+  icon: "Menu",
+  kind: "content",
+  tagName: "mj-navbar",
+  order: 70,
+  mjml: MJML8,
+  sectionMjml: inWhiteSection(MJML8),
+  properties: [prop.align()]
+};
+var navbarLinkBlock = {
+  id: "navbar-link",
+  label: "Menu link",
+  icon: "Link",
+  kind: "structure",
+  tagName: "mj-navbar-link",
+  order: 904,
+  editableContent: true,
+  properties: [
+    prop.href("Link URL"),
+    prop.color("Text"),
+    prop.fontFamily(),
+    prop.fontSize(10, 24),
+    prop.padding()
+  ]
+};
+
+// src/blocks/hero/index.js
+var MJML9 = `<mj-section background-color="${PALETTE.navy}" background-size="cover" background-position="center center" background-repeat="no-repeat" padding-top="56px" padding-bottom="56px"><mj-column><mj-text font-family="${FONT_STACK}" font-size="30px" line-height="38px" font-weight="bold" color="${PALETTE.white}" align="center" padding-left="32px" padding-right="32px">Your big announcement</mj-text><mj-text font-family="${FONT_STACK}" font-size="16px" line-height="24px" color="${PALETTE.border}" align="center" padding-left="32px" padding-right="32px">One sentence that makes people want to read on.</mj-text><mj-button href="${DEFAULT_BUTTON_URL}" background-color="${PALETTE.white}" color="${PALETTE.navy}" font-family="${FONT_STACK}" font-size="15px" font-weight="bold" border-radius="6px" inner-padding="12px 28px" align="center">Learn more</mj-button></mj-column></mj-section>`;
+var heroBlock = {
+  id: "hero",
+  label: "Hero banner",
+  description: "Background image with a title and a button",
+  icon: "GalleryHorizontal",
+  kind: "layout",
+  tagName: "mj-section",
+  order: 110,
+  mjml: MJML9,
+  properties: []
+};
+
 // src/blocks/columns/index.js
 function sectionWith(count) {
   const columns = Array.from(
@@ -1196,20 +1363,41 @@ function layout(count, icon) {
 var oneColumnBlock = layout(1, "Square");
 var twoColumnsBlock = layout(2, "Columns2");
 var threeColumnsBlock = layout(3, "Columns3");
+var fourColumnsBlock = layout(4, "Columns4");
+var IMAGE_TEXT_MJML = `<mj-section background-color="${PALETTE.surface}"><mj-column vertical-align="middle"><mj-image align="center"></mj-image></mj-column><mj-column vertical-align="middle"><mj-text font-family="${FONT_STACK}" font-size="20px" line-height="28px" font-weight="bold" color="${PALETTE.navy}" align="left">Title</mj-text>` + textMjml("A few words about it.") + `<mj-button href="${DEFAULT_BUTTON_URL}" background-color="${PALETTE.navy}" color="${PALETTE.white}" font-family="${FONT_STACK}" font-size="14px" font-weight="bold" border-radius="6px" inner-padding="10px 22px" align="left">Learn more</mj-button></mj-column></mj-section>`;
+var imageTextBlock = {
+  id: "image-text",
+  label: "Image + text",
+  description: "Image beside a title, text and button",
+  icon: "LayoutPanelLeft",
+  kind: "layout",
+  tagName: "mj-section",
+  order: 105,
+  mjml: IMAGE_TEXT_MJML,
+  properties: []
+};
 
 // src/blocks/index.js
 var BLOCKS = [
+  headingBlock,
   textBlock,
   imageBlock,
   buttonBlock,
   dividerBlock,
   spacerBlock,
+  socialBlock,
+  navbarBlock,
   oneColumnBlock,
   twoColumnsBlock,
   threeColumnsBlock,
+  fourColumnsBlock,
+  imageTextBlock,
+  heroBlock,
   bodyBlock,
   sectionBlock,
-  columnBlock
+  columnBlock,
+  socialElementBlock,
+  navbarLinkBlock
 ];
 var emailBlocks = createRegistry("emailBlocks", BLOCKS);
 
@@ -2507,7 +2695,7 @@ function TestEmailButton({ context }) {
             r.error ? ` \u2014 ${r.error}` : ""
           ] })
         ] }, r.email)),
-        report.invalid.map((email) => /* @__PURE__ */ jsx11("li", { className: "eb:text-[12px] eb:text-foreground-muted", children: t("Ignored (invalid): {email}", { email }) }, `invalid-${email}`))
+        report.invalid.map((email2) => /* @__PURE__ */ jsx11("li", { className: "eb:text-[12px] eb:text-foreground-muted", children: t("Ignored (invalid): {email}", { email: email2 }) }, `invalid-${email2}`))
       ] }),
       /* @__PURE__ */ jsxs9("div", { className: "eb:flex eb:justify-end eb:gap-2", children: [
         /* @__PURE__ */ jsx11(Button, { variant: "outline", onClick: () => setOpen(false), children: t("Close") }),
@@ -2529,17 +2717,9 @@ var testEmailFeature = {
   isAvailable: (context) => typeof context.storage?.sendTest === "function"
 };
 
-// src/features/index.js
-var FEATURES = [variablesFeature, autosaveFeature, versionsFeature, previewFeature, testEmailFeature];
-var emailBuilderFeatures = createRegistry("emailBuilderFeatures", FEATURES);
-function isFeatureEnabled(id) {
-  const feature = emailBuilderFeatures.get(id);
-  return Boolean(feature && feature.enabled !== false);
-}
-
-// src/ui/EmailBuilder.jsx
-import { useCallback as useCallback3, useEffect as useEffect7, useMemo as useMemo6, useRef as useRef7, useState as useState12 } from "react";
-import { AlertTriangle as AlertTriangle2, Loader2 as Loader25, Save } from "lucide-react";
+// src/features/templates/TemplateGallery.jsx
+import { useMemo as useMemo5, useState as useState8 } from "react";
+import { LayoutTemplate } from "lucide-react";
 
 // src/features/templates/starter.js
 function escapeXml(text) {
@@ -2547,17 +2727,23 @@ function escapeXml(text) {
 }
 var SIDE = 'padding-left="32px" padding-right="32px"';
 var TEXT = `font-family="${FONT_STACK}" color="${PALETTE.ink}"`;
-function createStarterMjml({ sender = {}, buttonUrl = DEFAULT_BUTTON_URL, t = identity } = {}) {
+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 ");
-  const header = 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>`;
+  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>",
-    header,
+    senderHeaderMjml(sender, t),
     "</mj-column>",
     "</mj-section>",
     // Body: headline, text, button.
@@ -2569,17 +2755,316 @@ function createStarterMjml({ sender = {}, buttonUrl = DEFAULT_BUTTON_URL, t = id
     "</mj-column>",
     "</mj-section>",
     // Footer: sender and unsubscribe link.
-    '<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>",
+    footerSectionMjml(sender, t),
     "</mj-body>",
     "</mjml>"
   ].join("");
 }
 var STARTER_MJML = createStarterMjml();
 
+// 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>`);
+}
+
+// src/features/templates/TemplateGallery.jsx
+import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+var THUMBNAIL_SCALE = 0.38;
+var EMAIL_WIDTH = 600;
+function Thumbnail({ html, title }) {
+  return /* @__PURE__ */ jsx12(
+    "div",
+    {
+      className: "eb:relative eb:h-[220px] eb:overflow-hidden eb:rounded-md eb:border eb:border-border eb:bg-surface-75",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx12(
+        "iframe",
+        {
+          title,
+          sandbox: "",
+          srcDoc: html,
+          tabIndex: -1,
+          loading: "lazy",
+          className: "eb:pointer-events-none eb:absolute eb:top-0 eb:left-1/2 eb:origin-top eb:border-0",
+          style: {
+            width: EMAIL_WIDTH,
+            height: 220 / THUMBNAIL_SCALE,
+            transform: `translateX(-50%) scale(${THUMBNAIL_SCALE})`
+          }
+        }
+      )
+    }
+  );
+}
+function TemplateGalleryButton({ context }) {
+  const { editor, ready, templates, isDirty, markDirty, template, setMeta } = context;
+  const { t, confirm, notify } = useUi();
+  const [open, setOpen] = useState8(false);
+  const cards = useMemo5(() => {
+    if (!open || !ready) return [];
+    return templates.map((entry) => {
+      try {
+        return { ...entry, html: editor.exportHtml(withThumbnailImages(entry.mjml)).html };
+      } catch {
+        return { ...entry, html: "" };
+      }
+    });
+  }, [open, ready, templates, editor]);
+  const apply = async (entry) => {
+    if (isDirty()) {
+      setOpen(false);
+      const ok = await confirm({
+        title: t("Replace the current email?"),
+        description: t("Unsaved changes will be replaced."),
+        confirmLabel: t("Replace"),
+        destructive: true
+      });
+      if (!ok) return;
+    }
+    editor.loadMjml(entry.mjml);
+    setMeta((meta) => ({
+      ...meta,
+      subject: meta.subject || entry.subject,
+      preheader: meta.preheader || entry.preheader
+    }));
+    if (template.id) markDirty();
+    setOpen(false);
+    notify("success", t("\u201C{name}\u201D template applied.", { name: entry.name }));
+  };
+  return /* @__PURE__ */ jsxs10(Fragment4, { children: [
+    /* @__PURE__ */ jsxs10(Button, { variant: "outline", size: "sm-compact", disabled: !ready, onClick: () => setOpen(true), children: [
+      /* @__PURE__ */ jsx12(LayoutTemplate, {}),
+      t("Templates")
+    ] }),
+    /* @__PURE__ */ jsx12(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs10(DialogContent, { className: "eb:max-h-[calc(100dvh-2rem)] eb:overflow-y-auto eb:sm:max-w-4xl", "data-testid": "eb-template-gallery", children: [
+      /* @__PURE__ */ jsxs10(DialogHeader, { children: [
+        /* @__PURE__ */ jsx12(DialogTitle, { children: t("Start from a template") }),
+        /* @__PURE__ */ jsx12(DialogDescription, { children: t("Picking a template replaces the email being edited.") })
+      ] }),
+      /* @__PURE__ */ jsx12("ul", { className: "eb:grid eb:grid-cols-1 eb:gap-3 eb:sm:grid-cols-2 eb:md:grid-cols-3", children: cards.map((card) => /* @__PURE__ */ jsx12("li", { children: /* @__PURE__ */ jsxs10(
+        "button",
+        {
+          type: "button",
+          onClick: () => apply(card),
+          "data-template-id": card.id,
+          className: "eb:group eb:flex eb:w-full eb:flex-col eb:gap-2 eb:rounded-lg2 eb:border eb:border-border eb:bg-background eb:p-2 eb:text-left eb:transition-colors eb:hover:border-primary/50 eb:hover:bg-primary/5 eb:focus-visible:outline-none eb:focus-visible:ring-2 eb:focus-visible:ring-ring/50",
+          children: [
+            /* @__PURE__ */ jsx12(Thumbnail, { html: card.html, title: card.name }),
+            /* @__PURE__ */ jsxs10("span", { className: "eb:px-1", children: [
+              /* @__PURE__ */ jsx12("span", { className: "eb:block eb:text-[13px] eb:font-medium eb:text-foreground", children: card.name }),
+              /* @__PURE__ */ jsx12("span", { className: "eb:block eb:text-[12px] eb:text-foreground-muted", children: card.description })
+            ] })
+          ]
+        }
+      ) }, card.id)) })
+    ] }) })
+  ] });
+}
+
+// src/features/templates/index.js
+var templatesFeature = {
+  id: "templates",
+  label: "Templates",
+  order: 5,
+  toolbar: TemplateGalleryButton,
+  isAvailable: (context) => Array.isArray(context.templates) && context.templates.length > 0
+};
+
+// src/features/index.js
+var FEATURES = [
+  templatesFeature,
+  variablesFeature,
+  autosaveFeature,
+  versionsFeature,
+  previewFeature,
+  testEmailFeature
+];
+var emailBuilderFeatures = createRegistry("emailBuilderFeatures", FEATURES);
+function isFeatureEnabled(id) {
+  const feature = emailBuilderFeatures.get(id);
+  return Boolean(feature && feature.enabled !== false);
+}
+
+// src/ui/EmailBuilder.jsx
+import { useCallback as useCallback3, useEffect as useEffect9, useMemo as useMemo7, useRef as useRef7, useState as useState14 } from "react";
+import { AlertTriangle as AlertTriangle2, Loader2 as Loader25, Plus as Plus2, Save, SlidersHorizontal } from "lucide-react";
+
 // src/features/autosave/scheduler.js
 function createAutosaveScheduler({
   run,
@@ -2879,7 +3364,7 @@ function createMemoryStorage({ render, sendTest, assetsPath = DEFAULT_ASSETS_PAT
 
 // src/ui/EmailCanvas.jsx
 import { useEffect as useEffect4, useRef as useRef3 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function EmailCanvas({ editor, document = null, onReady, onError, className }) {
   const ref = useRef3(null);
   const documentRef = useRef3(document);
@@ -2898,23 +3383,35 @@ function EmailCanvas({ editor, document = null, onReady, onError, className }) {
       editor.destroy();
     };
   }, [editor]);
-  return /* @__PURE__ */ jsx12("div", { ref, className: cn("eb-canvas eb:h-full eb:w-full", className), "data-testid": "eb-canvas" });
+  return /* @__PURE__ */ jsx13("div", { ref, className: cn("eb-canvas eb:h-full eb:w-full", className), "data-testid": "eb-canvas" });
 }
 
 // src/ui/BlockSidebar.jsx
 import {
   Columns2,
   Columns3,
+  Columns4,
+  GalleryHorizontal,
+  Heading,
   Image as ImageIcon,
+  LayoutPanelLeft,
+  Menu,
   MoveVertical,
   RectangleHorizontal,
   SeparatorHorizontal,
+  Share2,
   Square,
   Type
 } from "lucide-react";
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var ICONS = {
+  Heading,
   Type,
+  Share2,
+  Menu,
+  Columns4,
+  LayoutPanelLeft,
+  GalleryHorizontal,
   Image: ImageIcon,
   RectangleHorizontal,
   SeparatorHorizontal,
@@ -2930,7 +3427,7 @@ var GROUPS2 = [
 function BlockTile({ block, disabled, onAdd, onDragStart, onDragEnd }) {
   const t = useT();
   const Icon = ICONS[block.icon] || Square;
-  return /* @__PURE__ */ jsx13(TooltipWrap, { label: block.description ? t(block.description) : block.description, children: /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsx14(TooltipWrap, { label: block.description ? t(block.description) : block.description, children: /* @__PURE__ */ jsxs11(
     "button",
     {
       type: "button",
@@ -2950,26 +3447,28 @@ function BlockTile({ block, disabled, onAdd, onDragStart, onDragEnd }) {
         disabled && "eb:cursor-not-allowed eb:opacity-50"
       ),
       children: [
-        /* @__PURE__ */ jsx13(Icon, { className: "eb:h-5 eb:w-5 eb:text-foreground-lighter", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx13("span", { className: "eb:text-[12px] eb:text-foreground", children: t(block.label) })
+        /* @__PURE__ */ jsx14(Icon, { className: "eb:h-5 eb:w-5 eb:text-foreground-lighter", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx14("span", { className: "eb:text-[12px] eb:text-foreground", children: t(block.label) })
       ]
     }
   ) });
 }
-function BlockSidebar({ editor, disabled = false }) {
+function BlockSidebar({ editor, disabled = false, onAdded }) {
   const t = useT();
   const blocks = editor.listBlocks();
-  return /* @__PURE__ */ jsx13("aside", { "aria-label": t("Blocks"), className: "eb:min-h-0 eb:space-y-5 eb:overflow-y-auto eb:border-r eb:border-border eb:p-3", children: GROUPS2.map((group) => {
+  return /* @__PURE__ */ jsx14("aside", { "aria-label": t("Blocks"), className: "eb:min-h-0 eb:space-y-5 eb:overflow-y-auto eb:border-r eb:border-border eb:p-3", children: GROUPS2.map((group) => {
     const items = blocks.filter((b) => b.kind === group.kind && b.mjml);
     if (!items.length) return null;
-    return /* @__PURE__ */ jsxs10("section", { className: "eb:space-y-2", children: [
-      /* @__PURE__ */ jsx13(SectionLabel, { children: t(group.title) }),
-      /* @__PURE__ */ jsx13("div", { className: "eb:grid eb:grid-cols-2 eb:gap-2", children: items.map((block) => /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsxs11("section", { className: "eb:space-y-2", children: [
+      /* @__PURE__ */ jsx14(SectionLabel, { children: t(group.title) }),
+      /* @__PURE__ */ jsx14("div", { className: "eb:grid eb:grid-cols-2 eb:gap-2", children: items.map((block) => /* @__PURE__ */ jsx14(
         BlockTile,
         {
           block,
           disabled,
-          onAdd: (id) => editor.addBlock(id),
+          onAdd: (id) => {
+            if (editor.addBlock(id)) onAdded?.(id);
+          },
           onDragStart: (id, event) => editor.startBlockDrag(id, event),
           onDragEnd: (cancel) => editor.endBlockDrag(cancel)
         },
@@ -2981,15 +3480,15 @@ function BlockSidebar({ editor, disabled = false }) {
 
 // src/ui/ElementActions.jsx
 import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Copy, Trash2 as Trash22 } from "lucide-react";
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 function ElementActions({ editor, selection }) {
   const t = useT();
   if (!selection || !selection.canRemove && !selection.canDuplicate) return null;
   const horizontal = selection.tagName === "mj-column";
   const [Prev, Next] = horizontal ? [ArrowLeft, ArrowRight] : [ArrowUp, ArrowDown];
   const [prevLabel, nextLabel] = horizontal ? [t("Move left"), t("Move right")] : [t("Move up"), t("Move down")];
-  return /* @__PURE__ */ jsxs11("div", { className: "eb:flex eb:items-center eb:gap-0.5 eb:border-b eb:border-border eb:px-3 eb:py-1.5", role: "toolbar", "aria-label": t("Element actions"), children: [
-    /* @__PURE__ */ jsx14(TooltipWrap, { label: prevLabel, children: /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs12("div", { className: "eb:flex eb:items-center eb:gap-0.5 eb:border-b eb:border-border eb:px-3 eb:py-1.5", role: "toolbar", "aria-label": t("Element actions"), children: [
+    /* @__PURE__ */ jsx15(TooltipWrap, { label: prevLabel, children: /* @__PURE__ */ jsx15(
       Button,
       {
         variant: "ghost",
@@ -2997,10 +3496,10 @@ function ElementActions({ editor, selection }) {
         "aria-label": prevLabel,
         disabled: !selection.canMoveUp,
         onClick: () => editor.move(-1, selection.id),
-        children: /* @__PURE__ */ jsx14(Prev, {})
+        children: /* @__PURE__ */ jsx15(Prev, {})
       }
     ) }),
-    /* @__PURE__ */ jsx14(TooltipWrap, { label: nextLabel, children: /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(TooltipWrap, { label: nextLabel, children: /* @__PURE__ */ jsx15(
       Button,
       {
         variant: "ghost",
@@ -3008,10 +3507,10 @@ function ElementActions({ editor, selection }) {
         "aria-label": nextLabel,
         disabled: !selection.canMoveDown,
         onClick: () => editor.move(1, selection.id),
-        children: /* @__PURE__ */ jsx14(Next, {})
+        children: /* @__PURE__ */ jsx15(Next, {})
       }
     ) }),
-    /* @__PURE__ */ jsx14(TooltipWrap, { label: t("Duplicate"), children: /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(TooltipWrap, { label: t("Duplicate"), children: /* @__PURE__ */ jsx15(
       Button,
       {
         variant: "ghost",
@@ -3019,10 +3518,10 @@ function ElementActions({ editor, selection }) {
         "aria-label": t("Duplicate"),
         disabled: !selection.canDuplicate,
         onClick: () => editor.duplicate(selection.id),
-        children: /* @__PURE__ */ jsx14(Copy, {})
+        children: /* @__PURE__ */ jsx15(Copy, {})
       }
     ) }),
-    /* @__PURE__ */ jsx14(TooltipWrap, { label: t("Delete (Del)"), children: /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(TooltipWrap, { label: t("Delete (Del)"), children: /* @__PURE__ */ jsx15(
       Button,
       {
         variant: "ghost",
@@ -3031,24 +3530,24 @@ function ElementActions({ editor, selection }) {
         disabled: !selection.canRemove,
         onClick: () => editor.remove(selection.id),
         className: "eb:ml-auto eb:text-foreground-muted eb:hover:bg-destructive/10 eb:hover:text-destructive",
-        children: /* @__PURE__ */ jsx14(Trash22, {})
+        children: /* @__PURE__ */ jsx15(Trash22, {})
       }
     ) })
   ] });
 }
 
 // src/ui/PropertiesPanel.jsx
-import { useMemo as useMemo5, useRef as useRef5 } from "react";
+import { useMemo as useMemo6, useRef as useRef5 } from "react";
 import { X as X2 } from "lucide-react";
 
 // src/ui/fields.jsx
-import { useEffect as useEffect5, useRef as useRef4, useState as useState9 } from "react";
+import { useEffect as useEffect5, useRef as useRef4, useState as useState10 } from "react";
 
 // src/ui/primitives/color-picker.jsx
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 import { HexAlphaColorPicker } from "react-colorful";
 import { Check } from "lucide-react";
-import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 var PRESET_COLORS = [
   "#8B5CF6",
   "#A78BFA",
@@ -3079,34 +3578,34 @@ function normalizeHex(v) {
 }
 function ColorPicker({ value, onChange, id, className }) {
   const t = useT();
-  const [open, setOpen] = useState8(false);
+  const [open, setOpen] = useState9(false);
   const valid = isValidHex(value);
   const normalized = valid ? normalizeHex(value) : "";
   const emit = (hex) => onChange(normalizeHex(hex));
-  return /* @__PURE__ */ jsxs12("div", { className: cn("eb:flex eb:gap-2", className), children: [
-    /* @__PURE__ */ jsxs12(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx15(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs13("div", { className: cn("eb:flex eb:gap-2", className), children: [
+    /* @__PURE__ */ jsxs13(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx16(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx16(
         "button",
         {
           type: "button",
           "aria-label": t("Pick a colour"),
           title: t("Pick a colour"),
           className: "eb-checker eb:relative eb:h-8 eb:w-[44px] eb:shrink-0 eb:overflow-hidden eb:rounded-lg2 eb:shadow-sm eb:ring-1 eb:ring-black/10 eb:ring-inset eb:transition-transform eb:hover:scale-[1.04]",
-          children: /* @__PURE__ */ jsx15("span", { className: "eb:absolute eb:inset-0", style: { backgroundColor: valid ? value : "transparent" }, "aria-hidden": true })
+          children: /* @__PURE__ */ jsx16("span", { className: "eb:absolute eb:inset-0", style: { backgroundColor: valid ? value : "transparent" }, "aria-hidden": true })
         }
       ) }),
-      /* @__PURE__ */ jsxs12(PopoverContent, { align: "start", className: "eb:w-64 eb:space-y-3 eb:p-3", children: [
-        /* @__PURE__ */ jsx15("div", { className: "eb-picker", children: /* @__PURE__ */ jsx15(HexAlphaColorPicker, { color: valid ? value : FALLBACK_COLOR, onChange: emit }) }),
-        /* @__PURE__ */ jsxs12("div", { className: "eb:flex eb:items-center eb:gap-2", children: [
-          /* @__PURE__ */ jsx15(
+      /* @__PURE__ */ jsxs13(PopoverContent, { align: "start", className: "eb:w-64 eb:space-y-3 eb:p-3", children: [
+        /* @__PURE__ */ jsx16("div", { className: "eb-picker", children: /* @__PURE__ */ jsx16(HexAlphaColorPicker, { color: valid ? value : FALLBACK_COLOR, onChange: emit }) }),
+        /* @__PURE__ */ jsxs13("div", { className: "eb:flex eb:items-center eb:gap-2", children: [
+          /* @__PURE__ */ jsx16(
             "span",
             {
               className: "eb-checker eb:relative eb:size-8 eb:shrink-0 eb:overflow-hidden eb:rounded-lg2 eb:ring-1 eb:ring-black/10 eb:ring-inset",
               "aria-hidden": true,
-              children: /* @__PURE__ */ jsx15("span", { className: "eb:absolute eb:inset-0", style: { backgroundColor: valid ? value : "transparent" } })
+              children: /* @__PURE__ */ jsx16("span", { className: "eb:absolute eb:inset-0", style: { backgroundColor: valid ? value : "transparent" } })
             }
           ),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(
             Input,
             {
               value: value || "",
@@ -3118,7 +3617,7 @@ function ColorPicker({ value, onChange, id, className }) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx15("div", { className: "eb:grid eb:grid-cols-6 eb:gap-1.5 eb:border-t eb:border-border eb:pt-2.5", children: PRESET_COLORS.map((c) => /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx16("div", { className: "eb:grid eb:grid-cols-6 eb:gap-1.5 eb:border-t eb:border-border eb:pt-2.5", children: PRESET_COLORS.map((c) => /* @__PURE__ */ jsx16(
           "button",
           {
             type: "button",
@@ -3127,13 +3626,13 @@ function ColorPicker({ value, onChange, id, className }) {
             "aria-label": c,
             className: "eb:relative eb:size-6 eb:rounded-lg2 eb:ring-1 eb:ring-black/10 eb:ring-inset eb:transition-transform eb:hover:scale-110",
             style: { backgroundColor: c },
-            children: normalized === c && /* @__PURE__ */ jsx15(Check, { className: "eb:absolute eb:inset-0 eb:m-auto eb:size-3.5 eb:text-white eb:drop-shadow-[0_1px_1px_rgba(0,0,0,0.6)]" })
+            children: normalized === c && /* @__PURE__ */ jsx16(Check, { className: "eb:absolute eb:inset-0 eb:m-auto eb:size-3.5 eb:text-white eb:drop-shadow-[0_1px_1px_rgba(0,0,0,0.6)]" })
           },
           c
         )) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx16(
       Input,
       {
         id,
@@ -3149,7 +3648,7 @@ function ColorPicker({ value, onChange, id, className }) {
 
 // src/ui/fields.jsx
 import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Loader2 as Loader24, Upload } from "lucide-react";
-import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 var COLOR_DEBOUNCE_MS = 250;
 function emailColor(value) {
   const v = String(value || "").trim();
@@ -3158,7 +3657,7 @@ function emailColor(value) {
   return null;
 }
 function useDraft(value, toDraft) {
-  const [draft, setDraft] = useState9(() => toDraft(value));
+  const [draft, setDraft] = useState10(() => toDraft(value));
   const ref = useRef4(null);
   const convert = useRef4(toDraft);
   convert.current = toDraft;
@@ -3171,10 +3670,10 @@ function useDraft(value, toDraft) {
 }
 var asText = (v) => v || "";
 function FieldLabel({ id, children }) {
-  return /* @__PURE__ */ jsx16(Label, { htmlFor: id, className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children });
+  return /* @__PURE__ */ jsx17(Label, { htmlFor: id, className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children });
 }
 function FieldError({ children }) {
-  return children ? /* @__PURE__ */ jsx16("p", { className: "eb:text-[12px] eb:text-destructive", children }) : null;
+  return children ? /* @__PURE__ */ jsx17("p", { className: "eb:text-[12px] eb:text-destructive", children }) : null;
 }
 function TextField({ id, property, value, onCommit, addon = null, error = null }) {
   const t = useT();
@@ -3205,13 +3704,13 @@ function TextField({ id, property, value, onCommit, addon = null, error = null }
     onKeyDown: keyDown,
     "aria-invalid": invalid || void 0
   };
-  return /* @__PURE__ */ jsxs13("div", { ref, className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx16(FieldLabel, { id, children: t(property.label) }),
-    property.type === "textarea" ? /* @__PURE__ */ jsx16(Textarea, { rows: 3, ...shared }) : addon ? /* @__PURE__ */ jsxs13("div", { className: "eb:flex eb:gap-2", children: [
-      /* @__PURE__ */ jsx16(Input, { ...shared, className: "eb:min-w-0 eb:flex-1" }),
+  return /* @__PURE__ */ jsxs14("div", { ref, className: "eb:space-y-1.5", children: [
+    /* @__PURE__ */ jsx17(FieldLabel, { id, children: t(property.label) }),
+    property.type === "textarea" ? /* @__PURE__ */ jsx17(Textarea, { rows: 3, ...shared }) : addon ? /* @__PURE__ */ jsxs14("div", { className: "eb:flex eb:gap-2", children: [
+      /* @__PURE__ */ jsx17(Input, { ...shared, className: "eb:min-w-0 eb:flex-1" }),
       addon
-    ] }) : /* @__PURE__ */ jsx16(Input, { ...shared }),
-    /* @__PURE__ */ jsx16(FieldError, { children: invalid ? kind === "image" ? t("An https:// address is required") : t("Address not allowed") : error })
+    ] }) : /* @__PURE__ */ jsx17(Input, { ...shared }),
+    /* @__PURE__ */ jsx17(FieldError, { children: invalid ? kind === "image" ? t("An https:// address is required") : t("Address not allowed") : error })
   ] });
 }
 function ImageField({ id, property, value, onCommit, services }) {
@@ -3220,8 +3719,8 @@ function ImageField({ id, property, value, onCommit, services }) {
     /** @type {HTMLInputElement|null} */
     null
   );
-  const [busy, setBusy] = useState9(false);
-  const [error, setError] = useState9(
+  const [busy, setBusy] = useState10(false);
+  const [error, setError] = useState10(
     /** @type {string|null} */
     null
   );
@@ -3243,8 +3742,8 @@ function ImageField({ id, property, value, onCommit, services }) {
       setBusy(false);
     }
   };
-  const addon = upload ? /* @__PURE__ */ jsxs13(Fragment4, { children: [
-    /* @__PURE__ */ jsx16(
+  const addon = upload ? /* @__PURE__ */ jsxs14(Fragment5, { children: [
+    /* @__PURE__ */ jsx17(
       "input",
       {
         ref: inputRef,
@@ -3257,7 +3756,7 @@ function ImageField({ id, property, value, onCommit, services }) {
         onChange: pick
       }
     ),
-    /* @__PURE__ */ jsxs13(
+    /* @__PURE__ */ jsxs14(
       Button,
       {
         type: "button",
@@ -3266,13 +3765,13 @@ function ImageField({ id, property, value, onCommit, services }) {
         disabled: busy,
         onClick: () => inputRef.current?.click(),
         children: [
-          busy ? /* @__PURE__ */ jsx16(Loader24, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx16(Upload, {}),
+          busy ? /* @__PURE__ */ jsx17(Loader24, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx17(Upload, {}),
           t("Upload")
         ]
       }
     )
   ] }) : null;
-  return /* @__PURE__ */ jsx16(TextField, { id, property, value, onCommit, addon, error });
+  return /* @__PURE__ */ jsx17(TextField, { id, property, value, onCommit, addon, error });
 }
 var asNumber = (v) => {
   const n = Number.parseFloat(String(v || ""));
@@ -3294,10 +3793,10 @@ function SizeField({ id, property, value, onCommit }) {
     const next = `${n}${property.unit || "px"}`;
     if (next !== value) onCommit(next);
   };
-  return /* @__PURE__ */ jsxs13("div", { ref, className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx16(FieldLabel, { id, children: t(property.label) }),
-    /* @__PURE__ */ jsxs13("div", { className: "eb:relative", children: [
-      /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs14("div", { ref, className: "eb:space-y-1.5", children: [
+    /* @__PURE__ */ jsx17(FieldLabel, { id, children: t(property.label) }),
+    /* @__PURE__ */ jsxs14("div", { className: "eb:relative", children: [
+      /* @__PURE__ */ jsx17(
         Input,
         {
           id,
@@ -3315,7 +3814,7 @@ function SizeField({ id, property, value, onCommit }) {
           className: "eb:pr-9 eb:tabular-nums"
         }
       ),
-      /* @__PURE__ */ jsx16("span", { className: "eb:pointer-events-none eb:absolute eb:right-3 eb:top-1/2 eb:-translate-y-1/2 eb:text-[12px] eb:text-foreground-muted", children: property.unit || "px" })
+      /* @__PURE__ */ jsx17("span", { className: "eb:pointer-events-none eb:absolute eb:right-3 eb:top-1/2 eb:-translate-y-1/2 eb:text-[12px] eb:text-foreground-muted", children: property.unit || "px" })
     ] })
   ] });
 }
@@ -3338,18 +3837,18 @@ function ColorField({ id, property, value, onCommit }) {
       }
     }, COLOR_DEBOUNCE_MS);
   };
-  return /* @__PURE__ */ jsxs13("div", { ref, className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx16(FieldLabel, { id, children: t(property.label) }),
-    /* @__PURE__ */ jsx16(ColorPicker, { id, value: draft, onChange: change })
+  return /* @__PURE__ */ jsxs14("div", { ref, className: "eb:space-y-1.5", children: [
+    /* @__PURE__ */ jsx17(FieldLabel, { id, children: t(property.label) }),
+    /* @__PURE__ */ jsx17(ColorPicker, { id, value: draft, onChange: change })
   ] });
 }
 var DEFAULT_OPTION = "__default__";
 function SelectField({ id, property, value, onCommit }) {
   const t = useT();
   const current = value || DEFAULT_OPTION;
-  return /* @__PURE__ */ jsxs13("div", { className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx16(FieldLabel, { id, children: t(property.label) }),
-    /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14("div", { className: "eb:space-y-1.5", children: [
+    /* @__PURE__ */ jsx17(FieldLabel, { id, children: t(property.label) }),
+    /* @__PURE__ */ jsxs14(
       Select,
       {
         value: current,
@@ -3358,10 +3857,10 @@ function SelectField({ id, property, value, onCommit }) {
           if (v !== (value || "")) onCommit(v || null);
         },
         children: [
-          /* @__PURE__ */ jsx16(SelectTrigger, { id, className: "eb:w-full", children: /* @__PURE__ */ jsx16(SelectValue, { placeholder: t("Default") }) }),
-          /* @__PURE__ */ jsxs13(SelectContent, { children: [
-            !(property.options || []).some((o) => !o.value) && /* @__PURE__ */ jsx16(SelectItem, { value: DEFAULT_OPTION, children: t("Default") }),
-            (property.options || []).map((o) => /* @__PURE__ */ jsx16(SelectItem, { value: o.value || DEFAULT_OPTION, children: t(o.label) }, o.value || DEFAULT_OPTION))
+          /* @__PURE__ */ jsx17(SelectTrigger, { id, className: "eb:w-full", children: /* @__PURE__ */ jsx17(SelectValue, { placeholder: t("Default") }) }),
+          /* @__PURE__ */ jsxs14(SelectContent, { children: [
+            !(property.options || []).some((o) => !o.value) && /* @__PURE__ */ jsx17(SelectItem, { value: DEFAULT_OPTION, children: t("Default") }),
+            (property.options || []).map((o) => /* @__PURE__ */ jsx17(SelectItem, { value: o.value || DEFAULT_OPTION, children: t(o.label) }, o.value || DEFAULT_OPTION))
           ] })
         ]
       }
@@ -3371,9 +3870,9 @@ function SelectField({ id, property, value, onCommit }) {
 var ALIGN_ICONS = { left: AlignLeft, center: AlignCenter, right: AlignRight, justify: AlignJustify };
 function AlignField({ id, property, value, onCommit }) {
   const t = useT();
-  return /* @__PURE__ */ jsxs13("div", { className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx16(FieldLabel, { id, children: t(property.label) }),
-    /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs14("div", { className: "eb:space-y-1.5", children: [
+    /* @__PURE__ */ jsx17(FieldLabel, { id, children: t(property.label) }),
+    /* @__PURE__ */ jsx17(
       "div",
       {
         id,
@@ -3383,7 +3882,7 @@ function AlignField({ id, property, value, onCommit }) {
         children: (property.options || []).map((option) => {
           const Icon = ALIGN_ICONS[option.value] || AlignLeft;
           const active = value === option.value;
-          return /* @__PURE__ */ jsx16(TooltipWrap, { label: t(option.label), children: /* @__PURE__ */ jsx16(
+          return /* @__PURE__ */ jsx17(TooltipWrap, { label: t(option.label), children: /* @__PURE__ */ jsx17(
             "button",
             {
               type: "button",
@@ -3395,7 +3894,7 @@ function AlignField({ id, property, value, onCommit }) {
                 "eb:inline-flex eb:h-7 eb:w-7 eb:items-center eb:justify-center eb:rounded-lg2 eb:transition-colors",
                 active ? "eb:bg-primary eb:text-primary-foreground" : "eb:text-foreground-lighter eb:hover:bg-surface-200 eb:hover:text-foreground"
               ),
-              children: /* @__PURE__ */ jsx16(Icon, { className: "eb:h-3.5 eb:w-3.5" })
+              children: /* @__PURE__ */ jsx17(Icon, { className: "eb:h-3.5 eb:w-3.5" })
             }
           ) }, option.value);
         })
@@ -3417,10 +3916,10 @@ function SpacingField({ id, property, value, onCommit }) {
     const next = formatSpacing(sides.map((s) => `${Math.max(0, Math.min(200, Number.parseFloat(s) || 0))}px`));
     if (next !== (value || "")) onCommit(next);
   };
-  return /* @__PURE__ */ jsxs13("fieldset", { ref, className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx16("legend", { className: "eb:mb-1.5 eb:text-[12px] eb:text-foreground-lighter", children: t(property.label) }),
-    /* @__PURE__ */ jsx16("div", { className: "eb:grid eb:grid-cols-4 eb:gap-1.5", children: SIDE_LABELS.map(([side, label], i) => /* @__PURE__ */ jsxs13("div", { className: "eb:space-y-1", children: [
-      /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs14("fieldset", { ref, className: "eb:space-y-1.5", children: [
+    /* @__PURE__ */ jsx17("legend", { className: "eb:mb-1.5 eb:text-[12px] eb:text-foreground-lighter", children: t(property.label) }),
+    /* @__PURE__ */ jsx17("div", { className: "eb:grid eb:grid-cols-4 eb:gap-1.5", children: SIDE_LABELS.map(([side, label], i) => /* @__PURE__ */ jsxs14("div", { className: "eb:space-y-1", children: [
+      /* @__PURE__ */ jsx17(
         Input,
         {
           id: `${id}-${side}`,
@@ -3438,7 +3937,7 @@ function SpacingField({ id, property, value, onCommit }) {
           className: "eb:px-2 eb:text-center eb:tabular-nums"
         }
       ),
-      /* @__PURE__ */ jsx16("span", { className: "eb:block eb:text-center eb:text-[10.5px] eb:text-foreground-muted", children: t(label) })
+      /* @__PURE__ */ jsx17("span", { className: "eb:block eb:text-center eb:text-[10.5px] eb:text-foreground-muted", children: t(label) })
     ] }, side)) })
   ] });
 }
@@ -3456,15 +3955,15 @@ var FIELDS = {
 function PropertyField({ property, value, onCommit, idPrefix = "eb", services = null }) {
   const Field = FIELDS[property.type] || TextField;
   const id = `${idPrefix}-${property.key}`;
-  return /* @__PURE__ */ jsx16(Field, { id, property, value, onCommit, services });
+  return /* @__PURE__ */ jsx17(Field, { id, property, value, onCommit, services });
 }
 
 // src/features/variables/VariableInsertButton.jsx
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 import { Braces as Braces3 } from "lucide-react";
-import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 function VariableInsertButton({ variables, inputRef, value, onChange, label }) {
-  const [open, setOpen] = useState10(false);
+  const [open, setOpen] = useState11(false);
   const insert = (variable) => {
     const input = inputRef.current;
     const text = String(value || "");
@@ -3480,14 +3979,14 @@ function VariableInsertButton({ variables, inputRef, value, onChange, label }) {
       input.setSelectionRange(start + token.length, start + token.length);
     });
   };
-  return /* @__PURE__ */ jsxs14(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx17(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx17(Button, { variant: "ghost", size: "icon-xs", "aria-label": label, title: label, children: /* @__PURE__ */ jsx17(Braces3, {}) }) }),
-    /* @__PURE__ */ jsx17(PopoverContent, { align: "end", className: "eb:w-72 eb:p-0", onCloseAutoFocus: (e) => e.preventDefault(), children: /* @__PURE__ */ jsx17(VariablePicker, { variables, onPick: insert, filter: (v) => v.kind !== "link" }) })
+  return /* @__PURE__ */ jsxs15(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx18(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx18(Button, { variant: "ghost", size: "icon-xs", "aria-label": label, title: label, children: /* @__PURE__ */ jsx18(Braces3, {}) }) }),
+    /* @__PURE__ */ jsx18(PopoverContent, { align: "end", className: "eb:w-72 eb:p-0", onCloseAutoFocus: (e) => e.preventDefault(), children: /* @__PURE__ */ jsx18(VariablePicker, { variables, onPick: insert, filter: (v) => v.kind !== "link" }) })
   ] });
 }
 
 // src/ui/PropertiesPanel.jsx
-import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 var GROUP_ORDER = Object.values(GROUPS);
 function grouped(properties) {
   const map = /* @__PURE__ */ new Map();
@@ -3501,9 +4000,9 @@ function grouped(properties) {
 }
 function PropertyGroups({ editor, element, block, idPrefix, services = null }) {
   const t = useT();
-  return grouped(block?.properties || []).map(([group, properties]) => /* @__PURE__ */ jsxs15("section", { className: "eb:space-y-3", children: [
-    /* @__PURE__ */ jsx18(SectionLabel, { children: t(group) }),
-    properties.map((property) => /* @__PURE__ */ jsx18(
+  return grouped(block?.properties || []).map(([group, properties]) => /* @__PURE__ */ jsxs16("section", { className: "eb:space-y-3", children: [
+    /* @__PURE__ */ jsx19(SectionLabel, { children: t(group) }),
+    properties.map((property) => /* @__PURE__ */ jsx19(
       PropertyField,
       {
         idPrefix,
@@ -3517,33 +4016,33 @@ function PropertyGroups({ editor, element, block, idPrefix, services = null }) {
   ] }, group));
 }
 var LABEL_PROPERTY = { key: "content", label: "Label", type: "text", group: GROUPS.content };
-function PanelHeader({ title, onClose }) {
+function PanelHeader({ title, onClose, closeLabel = "Deselect" }) {
   const t = useT();
-  return /* @__PURE__ */ jsxs15("header", { className: "eb:sticky eb:top-0 eb:z-10 eb:flex eb:h-11 eb:shrink-0 eb:items-center eb:gap-2 eb:border-b eb:border-border eb:bg-background eb:px-4", children: [
-    /* @__PURE__ */ jsx18("h3", { className: "eb:min-w-0 eb:flex-1 eb:text-[13px] eb:font-medium eb:text-foreground", children: /* @__PURE__ */ jsx18(TruncatedText, { children: title }) }),
-    onClose && /* @__PURE__ */ jsx18(Button, { variant: "ghost", size: "icon-sm-compact", onClick: onClose, "aria-label": t("Deselect"), children: /* @__PURE__ */ jsx18(X2, {}) })
+  return /* @__PURE__ */ jsxs16("header", { className: "eb:sticky eb:top-0 eb:z-10 eb:flex eb:h-11 eb:shrink-0 eb:items-center eb:gap-2 eb:border-b eb:border-border eb:bg-background eb:px-4", children: [
+    /* @__PURE__ */ jsx19("h3", { className: "eb:min-w-0 eb:flex-1 eb:text-[13px] eb:font-medium eb:text-foreground", children: /* @__PURE__ */ jsx19(TruncatedText, { children: title }) }),
+    onClose && /* @__PURE__ */ jsx19(Button, { variant: "ghost", size: "icon-sm-compact", onClick: onClose, "aria-label": t(closeLabel), children: /* @__PURE__ */ jsx19(X2, {}) })
   ] });
 }
-function TemplateSettings({ editor, meta, onMetaChange, changes, showErrors, variables = null }) {
+function TemplateSettings({ editor, meta, onMetaChange, changes, showErrors, variables = null, onDismiss = null }) {
   const t = useT();
   const subjectRef = useRef5(null);
   const preheaderRef = useRef5(null);
   const rootId = editor.getRootId();
-  const root = useMemo5(() => rootId ? editor.getElement(rootId) : null, [editor, rootId, changes]);
+  const root = useMemo6(() => rootId ? editor.getElement(rootId) : null, [editor, rootId, changes]);
   const bodyBlock2 = root?.blockId ? editor.getBlock(root.blockId) : null;
   const field = (key) => (e) => onMetaChange({ ...meta, [key]: e.target.value });
-  return /* @__PURE__ */ jsxs15(Fragment5, { children: [
-    /* @__PURE__ */ jsx18(PanelHeader, { title: t("Email") }),
-    /* @__PURE__ */ jsxs15("div", { className: "eb:space-y-5 eb:p-4", children: [
-      /* @__PURE__ */ jsxs15("section", { className: "eb:space-y-3", children: [
-        /* @__PURE__ */ jsx18(SectionLabel, { children: t("Template") }),
-        /* @__PURE__ */ jsxs15("div", { className: "eb:space-y-1.5", children: [
-          /* @__PURE__ */ jsxs15(Label, { htmlFor: "eb-meta-name", className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children: [
+  return /* @__PURE__ */ jsxs16(Fragment6, { children: [
+    /* @__PURE__ */ jsx19(PanelHeader, { title: t("Email"), onClose: onDismiss, closeLabel: "Close" }),
+    /* @__PURE__ */ jsxs16("div", { className: "eb:space-y-5 eb:p-4", children: [
+      /* @__PURE__ */ jsxs16("section", { className: "eb:space-y-3", children: [
+        /* @__PURE__ */ jsx19(SectionLabel, { children: t("Template") }),
+        /* @__PURE__ */ jsxs16("div", { className: "eb:space-y-1.5", children: [
+          /* @__PURE__ */ jsxs16(Label, { htmlFor: "eb-meta-name", className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children: [
             t("Name"),
             " ",
-            /* @__PURE__ */ jsx18("span", { className: "eb:text-destructive", children: "*" })
+            /* @__PURE__ */ jsx19("span", { className: "eb:text-destructive", children: "*" })
           ] }),
-          /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx19(
             Input,
             {
               id: "eb-meta-name",
@@ -3553,12 +4052,12 @@ function TemplateSettings({ editor, meta, onMetaChange, changes, showErrors, var
               "aria-invalid": showErrors && !meta.name.trim() || void 0
             }
           ),
-          showErrors && !meta.name.trim() && /* @__PURE__ */ jsx18("p", { className: "eb:text-[12px] eb:text-destructive", children: t("Name is required") })
+          showErrors && !meta.name.trim() && /* @__PURE__ */ jsx19("p", { className: "eb:text-[12px] eb:text-destructive", children: t("Name is required") })
         ] }),
-        /* @__PURE__ */ jsxs15("div", { className: "eb:space-y-1.5", children: [
-          /* @__PURE__ */ jsxs15("div", { className: "eb:flex eb:h-6 eb:items-center eb:justify-between", children: [
-            /* @__PURE__ */ jsx18(Label, { htmlFor: "eb-meta-subject", className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children: t("Subject") }),
-            variables && /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsxs16("div", { className: "eb:space-y-1.5", children: [
+          /* @__PURE__ */ jsxs16("div", { className: "eb:flex eb:h-6 eb:items-center eb:justify-between", children: [
+            /* @__PURE__ */ jsx19(Label, { htmlFor: "eb-meta-subject", className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children: t("Subject") }),
+            variables && /* @__PURE__ */ jsx19(
               VariableInsertButton,
               {
                 variables,
@@ -3569,12 +4068,12 @@ function TemplateSettings({ editor, meta, onMetaChange, changes, showErrors, var
               }
             )
           ] }),
-          /* @__PURE__ */ jsx18(Input, { ref: subjectRef, id: "eb-meta-subject", maxLength: 250, value: meta.subject, onChange: field("subject") })
+          /* @__PURE__ */ jsx19(Input, { ref: subjectRef, id: "eb-meta-subject", maxLength: 250, value: meta.subject, onChange: field("subject") })
         ] }),
-        /* @__PURE__ */ jsxs15("div", { className: "eb:space-y-1.5", children: [
-          /* @__PURE__ */ jsxs15("div", { className: "eb:flex eb:h-6 eb:items-center eb:justify-between", children: [
-            /* @__PURE__ */ jsx18(Label, { htmlFor: "eb-meta-preheader", className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children: t("Preview text") }),
-            variables && /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsxs16("div", { className: "eb:space-y-1.5", children: [
+          /* @__PURE__ */ jsxs16("div", { className: "eb:flex eb:h-6 eb:items-center eb:justify-between", children: [
+            /* @__PURE__ */ jsx19(Label, { htmlFor: "eb-meta-preheader", className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children: t("Preview text") }),
+            variables && /* @__PURE__ */ jsx19(
               VariableInsertButton,
               {
                 variables,
@@ -3585,7 +4084,7 @@ function TemplateSettings({ editor, meta, onMetaChange, changes, showErrors, var
               }
             )
           ] }),
-          /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx19(
             Textarea,
             {
               ref: preheaderRef,
@@ -3599,7 +4098,7 @@ function TemplateSettings({ editor, meta, onMetaChange, changes, showErrors, var
           )
         ] })
       ] }),
-      root && bodyBlock2 && /* @__PURE__ */ jsx18(PropertyGroups, { editor, element: root, block: bodyBlock2, idPrefix: "eb-page" })
+      root && bodyBlock2 && /* @__PURE__ */ jsx19(PropertyGroups, { editor, element: root, block: bodyBlock2, idPrefix: "eb-page" })
     ] })
   ] });
 }
@@ -3612,11 +4111,12 @@ function PropertiesPanel({
   actions = null,
   showErrors = false,
   services = null,
-  variables = null
+  variables = null,
+  onDismiss = null
 }) {
   const t = useT();
   const block = selection?.blockId ? editor.getBlock(selection.blockId) : null;
-  return /* @__PURE__ */ jsx18("aside", { "aria-label": t("Properties"), className: "eb:min-h-0 eb:overflow-y-auto eb:border-l eb:border-border", "data-testid": "eb-properties", children: !selection ? /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19("aside", { "aria-label": t("Properties"), className: "eb:min-h-0 eb:overflow-y-auto eb:border-l eb:border-border", "data-testid": "eb-properties", children: !selection ? /* @__PURE__ */ jsx19(
     TemplateSettings,
     {
       editor,
@@ -3624,15 +4124,23 @@ function PropertiesPanel({
       onMetaChange,
       changes,
       showErrors,
-      variables
+      variables,
+      onDismiss
     }
-  ) : /* @__PURE__ */ jsxs15(Fragment5, { children: [
-    /* @__PURE__ */ jsx18(PanelHeader, { title: t(selection.label), onClose: () => editor.select(null) }),
+  ) : /* @__PURE__ */ jsxs16(Fragment6, { children: [
+    /* @__PURE__ */ jsx19(
+      PanelHeader,
+      {
+        title: t(selection.label),
+        onClose: onDismiss || (() => editor.select(null)),
+        closeLabel: onDismiss ? "Close" : "Deselect"
+      }
+    ),
     actions,
-    /* @__PURE__ */ jsxs15("div", { className: "eb:space-y-5 eb:p-4", children: [
-      selection.tagName === "mj-button" && /* @__PURE__ */ jsxs15("section", { className: "eb:space-y-3", children: [
-        /* @__PURE__ */ jsx18(SectionLabel, { children: t(GROUPS.content) }),
-        /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsxs16("div", { className: "eb:space-y-5 eb:p-4", children: [
+      selection.content !== null && selection.content !== void 0 && /* @__PURE__ */ jsxs16("section", { className: "eb:space-y-3", children: [
+        /* @__PURE__ */ jsx19(SectionLabel, { children: t(GROUPS.content) }),
+        /* @__PURE__ */ jsx19(
           PropertyField,
           {
             idPrefix: "eb-prop",
@@ -3643,15 +4151,15 @@ function PropertiesPanel({
           `${selection.id}:content`
         )
       ] }),
-      selection.tagName === "mj-text" && /* @__PURE__ */ jsx18("p", { className: "eb:text-[12px] eb:text-foreground-muted", children: t("Double-click the text to edit it.") }),
-      /* @__PURE__ */ jsx18(PropertyGroups, { editor, element: selection, block, idPrefix: "eb-prop", services })
+      selection.tagName === "mj-text" && /* @__PURE__ */ jsx19("p", { className: "eb:text-[12px] eb:text-foreground-muted", children: t("Double-click the text to edit it.") }),
+      /* @__PURE__ */ jsx19(PropertyGroups, { editor, element: selection, block, idPrefix: "eb-prop", services })
     ] })
   ] }) });
 }
 
 // src/ui/Toolbar.jsx
 import { ArrowLeft as ArrowLeft2, Monitor as Monitor2, Redo2, Smartphone as Smartphone2, Undo2 } from "lucide-react";
-import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
 function Toolbar({
   title,
   status,
@@ -3663,44 +4171,112 @@ function Toolbar({
   device,
   onDeviceChange,
   onBack,
-  actions = null
+  actions = null,
+  primary = null,
+  compact = false
 }) {
   const t = useT();
-  return /* @__PURE__ */ jsxs16("div", { className: "eb:flex eb:h-12 eb:shrink-0 eb:items-center eb:gap-3 eb:border-b eb:border-border eb:px-3", children: [
-    /* @__PURE__ */ jsxs16(Button, { variant: "ghost", size: "sm-compact", onClick: onBack, children: [
-      /* @__PURE__ */ jsx19(ArrowLeft2, {}),
-      t("Back")
-    ] }),
-    /* @__PURE__ */ jsx19(Separator, { orientation: "vertical", className: "eb:h-5" }),
-    /* @__PURE__ */ jsxs16("div", { className: "eb:min-w-0 eb:max-w-[320px] eb:flex-1", children: [
-      /* @__PURE__ */ jsx19("p", { className: "eb:text-[13px] eb:font-medium eb:text-foreground", children: /* @__PURE__ */ jsx19(TruncatedText, { children: title || t("New template") }) }),
-      /* @__PURE__ */ jsx19("p", { className: "eb:text-[11px] eb:text-foreground-muted", role: "status", "aria-live": "polite", children: status })
+  const identity2 = /* @__PURE__ */ jsxs17(Fragment7, { children: [
+    /* @__PURE__ */ jsxs17(
+      Button,
+      {
+        variant: "ghost",
+        size: compact ? "icon-sm-compact" : "sm-compact",
+        onClick: onBack,
+        "aria-label": compact ? t("Back") : void 0,
+        children: [
+          /* @__PURE__ */ jsx20(ArrowLeft2, {}),
+          !compact && t("Back")
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx20(Separator, { orientation: "vertical", className: "eb:h-5" }),
+    /* @__PURE__ */ jsxs17("div", { className: cn("eb:min-w-0 eb:flex-1", !compact && "eb:max-w-[320px]"), children: [
+      /* @__PURE__ */ jsx20("p", { className: "eb:text-[13px] eb:font-medium eb:text-foreground", children: /* @__PURE__ */ jsx20(TruncatedText, { children: title || t("New template") }) }),
+      /* @__PURE__ */ jsx20("p", { className: "eb:text-[11px] eb:text-foreground-muted", role: "status", "aria-live": "polite", children: status })
+    ] })
+  ] });
+  const editing = /* @__PURE__ */ jsxs17("div", { className: "eb:flex eb:shrink-0 eb:items-center eb:gap-2", children: [
+    /* @__PURE__ */ jsxs17("div", { className: "eb:flex eb:items-center eb:gap-0.5", children: [
+      /* @__PURE__ */ jsx20(TooltipWrap, { label: t("Undo (Ctrl+Z)"), children: /* @__PURE__ */ jsx20(Button, { variant: "ghost", size: "icon-sm-compact", onClick: onUndo, disabled: !ready || !canUndo, "aria-label": t("Undo"), children: /* @__PURE__ */ jsx20(Undo2, {}) }) }),
+      /* @__PURE__ */ jsx20(TooltipWrap, { label: t("Redo (Ctrl+Y)"), children: /* @__PURE__ */ jsx20(Button, { variant: "ghost", size: "icon-sm-compact", onClick: onRedo, disabled: !ready || !canRedo, "aria-label": t("Redo"), children: /* @__PURE__ */ jsx20(Redo2, {}) }) })
     ] }),
-    /* @__PURE__ */ jsxs16("div", { className: "eb:flex eb:items-center eb:gap-2", children: [
-      /* @__PURE__ */ jsxs16("div", { className: "eb:flex eb:items-center eb:gap-0.5", children: [
-        /* @__PURE__ */ jsx19(TooltipWrap, { label: t("Undo (Ctrl+Z)"), children: /* @__PURE__ */ jsx19(Button, { variant: "ghost", size: "icon-sm-compact", onClick: onUndo, disabled: !ready || !canUndo, "aria-label": t("Undo"), children: /* @__PURE__ */ jsx19(Undo2, {}) }) }),
-        /* @__PURE__ */ jsx19(TooltipWrap, { label: t("Redo (Ctrl+Y)"), children: /* @__PURE__ */ jsx19(Button, { variant: "ghost", size: "icon-sm-compact", onClick: onRedo, disabled: !ready || !canRedo, "aria-label": t("Redo"), children: /* @__PURE__ */ jsx19(Redo2, {}) }) })
+    /* @__PURE__ */ jsx20(Tabs, { value: device, onValueChange: onDeviceChange, children: /* @__PURE__ */ jsxs17(TabsList, { "aria-label": t("Device"), children: [
+      /* @__PURE__ */ jsxs17(TabsTrigger, { value: "desktop", disabled: !ready, "aria-label": compact ? t("Desktop") : void 0, children: [
+        /* @__PURE__ */ jsx20(Monitor2, {}),
+        !compact && t("Desktop")
       ] }),
-      /* @__PURE__ */ jsx19(Tabs, { value: device, onValueChange: onDeviceChange, children: /* @__PURE__ */ jsxs16(TabsList, { "aria-label": t("Device"), children: [
-        /* @__PURE__ */ jsxs16(TabsTrigger, { value: "desktop", disabled: !ready, children: [
-          /* @__PURE__ */ jsx19(Monitor2, {}),
-          t("Desktop")
-        ] }),
-        /* @__PURE__ */ jsxs16(TabsTrigger, { value: "mobile", disabled: !ready, children: [
-          /* @__PURE__ */ jsx19(Smartphone2, {}),
-          t("Mobile")
-        ] })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsx19("div", { className: "eb:ml-auto eb:flex eb:items-center eb:gap-2", children: actions })
+      /* @__PURE__ */ jsxs17(TabsTrigger, { value: "mobile", disabled: !ready, "aria-label": compact ? t("Mobile") : void 0, children: [
+        /* @__PURE__ */ jsx20(Smartphone2, {}),
+        !compact && t("Mobile")
+      ] })
+    ] }) })
+  ] });
+  if (compact) {
+    return /* @__PURE__ */ jsxs17("div", { className: "eb:shrink-0 eb:border-b eb:border-border", "data-layout": "compact", children: [
+      /* @__PURE__ */ jsxs17("div", { className: "eb:flex eb:h-12 eb:items-center eb:gap-2 eb:px-2", children: [
+        identity2,
+        primary
+      ] }),
+      /* @__PURE__ */ jsxs17("div", { className: "eb:flex eb:items-center eb:gap-2 eb:overflow-x-auto eb:px-2 eb:pb-2", "data-testid": "eb-toolbar-actions", children: [
+        editing,
+        /* @__PURE__ */ jsx20(Separator, { orientation: "vertical", className: "eb:h-5 eb:shrink-0" }),
+        /* @__PURE__ */ jsx20("div", { className: "eb:flex eb:shrink-0 eb:items-center eb:gap-2", children: actions })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs17("div", { className: "eb:flex eb:h-12 eb:shrink-0 eb:items-center eb:gap-3 eb:border-b eb:border-border eb:px-3", children: [
+    identity2,
+    editing,
+    /* @__PURE__ */ jsxs17("div", { className: "eb:ml-auto eb:flex eb:items-center eb:gap-2", "data-testid": "eb-toolbar-actions", children: [
+      actions,
+      primary
+    ] })
+  ] });
+}
+
+// src/ui/Drawer.jsx
+import { useEffect as useEffect6 } from "react";
+import { X as X3 } from "lucide-react";
+import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+function Drawer({ open, side = "left", title, onClose, children, testId, header: header2 = true }) {
+  const t = useT();
+  useEffect6(() => {
+    if (!open) return void 0;
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+  return /* @__PURE__ */ jsxs18("div", { className: cn("eb:absolute eb:inset-0 eb:z-20", !open && "eb:hidden"), "data-testid": testId, "data-open": open ? "true" : "false", children: [
+    /* @__PURE__ */ jsx21("div", { className: "eb:absolute eb:inset-0 eb:bg-black/30", onClick: onClose, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs18(
+      "section",
+      {
+        role: "dialog",
+        "aria-label": title,
+        className: cn(
+          "eb:absolute eb:inset-y-0 eb:flex eb:w-[min(340px,88%)] eb:flex-col eb:bg-background eb:shadow-lg",
+          side === "left" ? "eb:left-0 eb:border-r eb:border-border" : "eb:right-0 eb:border-l eb:border-border"
+        ),
+        children: [
+          header2 && /* @__PURE__ */ jsxs18("header", { className: "eb:flex eb:h-10 eb:shrink-0 eb:items-center eb:justify-between eb:border-b eb:border-border eb:px-3", children: [
+            /* @__PURE__ */ jsx21("h3", { className: "eb:text-[13px] eb:font-medium eb:text-foreground", children: title }),
+            /* @__PURE__ */ jsx21(Button, { variant: "ghost", size: "icon-sm-compact", onClick: onClose, "aria-label": t("Close"), children: /* @__PURE__ */ jsx21(X3, {}) })
+          ] }),
+          /* @__PURE__ */ jsx21("div", { className: "eb:grid eb:min-h-0 eb:flex-1", children })
+        ]
+      }
+    )
   ] });
 }
 
 // src/ui/useEmailEditorState.js
-import { useCallback as useCallback2, useEffect as useEffect6, useRef as useRef6, useState as useState11 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect7, useRef as useRef6, useState as useState12 } from "react";
 var DIRTY_CHECK_MS = 150;
 function useEmailEditorState(editor) {
-  const [state, setState] = useState11(() => ({
+  const [state, setState] = useState12(() => ({
     status: editor?.status || "idle",
     selection: null,
     canUndo: false,
@@ -3734,7 +4310,7 @@ function useEmailEditorState(editor) {
     forced.current = true;
     setState((s) => ({ ...s, dirty: true }));
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!editor) return void 0;
     const patch = (values) => setState((s) => ({ ...s, ...values }));
     const measure = () => {
@@ -3780,8 +4356,33 @@ function useEmailEditorState(editor) {
   return { ...state, markClean, markDirty, checkDirty };
 }
 
+// src/ui/useLayoutWidth.js
+import { useEffect as useEffect8, useState as useState13 } 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 [layout2, setLayout] = useState13(
+    /** @type {'wide'|'medium'|'narrow'} */
+    "wide"
+  );
+  useEffect8(() => {
+    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 layout2;
+}
+
 // src/ui/EmailBuilder.jsx
-import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 var EMPTY_META = { name: "", subject: "", preheader: "", description: "" };
 function metaOf(template) {
   return {
@@ -3799,6 +4400,7 @@ function Builder({
   variables: variablesProp,
   sender,
   starterMjml,
+  templates: galleryProp,
   testRecipients,
   initialMjml,
   initialMeta,
@@ -3809,11 +4411,11 @@ function Builder({
   className
 }) {
   const { t, locale, notify, confirm } = useUi();
-  const editor = useMemo6(() => injected || createDefaultEmailEditor({ locale }), [injected, locale]);
-  const storage = useMemo6(() => injectedStorage || createHttpStorage(), [injectedStorage]);
-  const systemVariables = useMemo6(() => defineVariables(variablesProp || DEFAULT_VARIABLES), [variablesProp]);
-  const [customVariables, setCustomVariables] = useState12([]);
-  const variables = useMemo6(() => mergeVariables(systemVariables, customVariables), [systemVariables, customVariables]);
+  const editor = useMemo7(() => injected || createDefaultEmailEditor({ locale }), [injected, locale]);
+  const storage = useMemo7(() => injectedStorage || createHttpStorage(), [injectedStorage]);
+  const systemVariables = useMemo7(() => defineVariables(variablesProp || DEFAULT_VARIABLES), [variablesProp]);
+  const [customVariables, setCustomVariables] = useState14([]);
+  const variables = useMemo7(() => mergeVariables(systemVariables, customVariables), [systemVariables, customVariables]);
   const canManageVariables = typeof storage.saveVariable === "function" && typeof storage.listVariables === "function";
   const reloadVariables = useCallback3(async () => {
     if (typeof storage.listVariables !== "function") return;
@@ -3823,23 +4425,37 @@ function Builder({
       notify("error", error.message);
     }
   }, [storage, notify]);
-  useEffect7(() => {
+  useEffect9(() => {
     reloadVariables();
   }, [reloadVariables]);
-  const starter = useMemo6(() => starterMjml || createStarterMjml({ sender, t }), [starterMjml, sender, t]);
-  const services = useMemo6(() => ({ uploadImage: (file) => storage.uploadImage(file) }), [storage]);
+  const starter = useMemo7(() => starterMjml || createStarterMjml({ sender, t }), [starterMjml, sender, t]);
+  const templates = useMemo7(
+    () => buildGallery({ templates: galleryProp ?? TEMPLATE_GALLERY, sender: sender || {}, t }),
+    [galleryProp, sender, t]
+  );
+  const services = useMemo7(() => ({ uploadImage: (file) => storage.uploadImage(file) }), [storage]);
   const state = useEmailEditorState(editor);
   const autosaveOn = isFeatureEnabled("autosave");
   const autosaveOptions = emailBuilderFeatures.get("autosave")?.options || {};
-  const [template, setTemplate] = useState12({ id: initialTemplateId, revision: null, savedAt: null, auto: false });
-  const [boot, setBoot] = useState12({ status: "loading", document: null, draft: false, message: null });
-  const [meta, setMeta] = useState12(EMPTY_META);
-  const [savedMeta, setSavedMeta] = useState12(EMPTY_META);
-  const [saving, setSaving] = useState12(null);
-  const [showErrors, setShowErrors] = useState12(false);
-  const [autosaveBlocked, setAutosaveBlocked] = useState12(null);
-  const [engineError, setEngineError] = useState12(null);
-  const [attempt, setAttempt] = useState12(0);
+  const [template, setTemplate] = useState14({ id: initialTemplateId, revision: null, savedAt: null, auto: false });
+  const [boot, setBoot] = useState14({ status: "loading", document: null, draft: false, message: null });
+  const [meta, setMeta] = useState14(EMPTY_META);
+  const [savedMeta, setSavedMeta] = useState14(EMPTY_META);
+  const [saving, setSaving] = useState14(null);
+  const [showErrors, setShowErrors] = useState14(false);
+  const [autosaveBlocked, setAutosaveBlocked] = useState14(null);
+  const [engineError, setEngineError] = useState14(null);
+  const [attempt, setAttempt] = useState14(0);
+  const rootRef = useRef7(null);
+  const layout2 = useLayoutWidth(rootRef);
+  const compact = layout2 !== "wide";
+  const blocksInDrawer = layout2 === "narrow";
+  const [drawer, setDrawer] = useState14(null);
+  const closeDrawer = useCallback3(() => setDrawer(null), []);
+  useEffect9(() => {
+    if (!compact) setDrawer(null);
+    else if (!blocksInDrawer) setDrawer((d) => d === "blocks" ? null : d);
+  }, [compact, blocksInDrawer]);
   const ready = state.status === "ready";
   const metaDirty = !sameMeta(meta, savedMeta);
   const dirty = state.dirty || metaDirty;
@@ -3848,7 +4464,7 @@ function Builder({
     [locale]
   );
   const booted = useRef7(false);
-  useEffect7(() => {
+  useEffect9(() => {
     if (booted.current) return;
     booted.current = true;
     (async () => {
@@ -3897,7 +4513,7 @@ function Builder({
     if (!boot.document) editor.loadMjml(initialMjml || starter);
   }, [editor, boot.document, starter, initialMjml]);
   const { markDirty, markClean, checkDirty } = state;
-  useEffect7(() => {
+  useEffect9(() => {
     if (ready && boot.draft) markDirty();
   }, [ready, boot.draft, markDirty]);
   const isDirty = useCallback3(
@@ -3906,17 +4522,17 @@ function Builder({
   );
   const reportDirty = useRef7(onDirtyChange);
   reportDirty.current = onDirtyChange;
-  useEffect7(() => {
+  useEffect9(() => {
     reportDirty.current?.(dirty);
   }, [dirty]);
-  useEffect7(() => {
+  useEffect9(() => {
     if (!dirtyCheckRef) return void 0;
     dirtyCheckRef.current = isDirty;
     return () => {
       dirtyCheckRef.current = null;
     };
   }, [dirtyCheckRef, isDirty]);
-  useEffect7(() => {
+  useEffect9(() => {
     if (!dirty) return void 0;
     const warn = (e) => {
       e.preventDefault();
@@ -3927,7 +4543,7 @@ function Builder({
   }, [dirty]);
   const savingRef = useRef7(false);
   const latest = useRef7({});
-  latest.current = { template, meta, onSaved };
+  latest.current = { template, meta, onSaved, compact };
   const save = useCallback3(
     async ({ auto = false } = {}) => {
       if (savingRef.current || editor.status !== "ready") return false;
@@ -3936,6 +4552,7 @@ function Builder({
         if (!auto) {
           setShowErrors(true);
           editor.select(null);
+          setDrawer((d) => d === null && latest.current.compact ? "properties" : d);
           notify("error", t("Give the template a name before saving it."));
         }
         return false;
@@ -4008,7 +4625,7 @@ function Builder({
     },
     [editor, storage, markClean, notify, confirm, t]
   );
-  useEffect7(() => {
+  useEffect9(() => {
     const onKey = (e) => {
       if ((e.ctrlKey || e.metaKey) && !e.shiftKey && !e.altKey && e.key.toLowerCase() === "s") {
         e.preventDefault();
@@ -4018,11 +4635,11 @@ function Builder({
     window.addEventListener("keydown", onKey, true);
     return () => window.removeEventListener("keydown", onKey, true);
   }, [save]);
-  useEffect7(() => {
+  useEffect9(() => {
     if (!ready) return void 0;
     return editor.addShortcut("save", "mod+s", () => save());
   }, [ready, editor, save]);
-  const scheduler = useMemo6(
+  const scheduler = useMemo7(
     () => createAutosaveScheduler({
       run: () => save({ auto: true }),
       idleMs: autosaveOptions.idleMs,
@@ -4030,13 +4647,13 @@ function Builder({
     }),
     [save, autosaveOptions.idleMs, autosaveOptions.maxWaitMs]
   );
-  useEffect7(() => () => scheduler.dispose(), [scheduler]);
-  useEffect7(() => {
+  useEffect9(() => () => scheduler.dispose(), [scheduler]);
+  useEffect9(() => {
     if (!autosaveOn || !ready || !template.id || autosaveBlocked) return;
     if (dirty) scheduler.notify();
     else scheduler.reset();
   }, [autosaveOn, ready, template.id, autosaveBlocked, dirty, state.changes, meta, scheduler]);
-  useEffect7(() => {
+  useEffect9(() => {
     if (!autosaveOn || !ready || template.id || !dirty) return void 0;
     const timer = setTimeout(() => {
       if (editor.status === "ready") saveLocalDraft({ document: editor.getDocument(), meta });
@@ -4061,6 +4678,8 @@ function Builder({
     storage,
     template,
     meta,
+    setMeta,
+    templates,
     ready,
     isDirty,
     markDirty,
@@ -4074,15 +4693,32 @@ function Builder({
   const toolbarFeatures = emailBuilderFeatures.list(
     (f) => f.enabled !== false && Boolean(f.toolbar) && (f.isAvailable ? f.isAvailable(featureContext) : true)
   );
-  return /* @__PURE__ */ jsxs17(
+  const properties = /* @__PURE__ */ jsx22(
+    PropertiesPanel,
+    {
+      onDismiss: compact ? closeDrawer : null,
+      editor,
+      selection: ready ? state.selection : null,
+      meta,
+      onMetaChange: setMeta,
+      changes: state.changes,
+      showErrors,
+      actions: /* @__PURE__ */ jsx22(ElementActions, { editor, selection: state.selection }),
+      services,
+      variables
+    }
+  );
+  return /* @__PURE__ */ jsxs19(
     "div",
     {
+      ref: rootRef,
       className: cn("eb-root eb:relative eb:flex eb:h-full eb:min-h-0 eb:flex-col eb:bg-background eb:text-foreground", className),
       "data-testid": "email-builder",
       "data-status": state.status,
+      "data-layout": layout2,
       "data-template-id": template.id || "",
       children: [
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx22(
           Toolbar,
           {
             title: meta.name,
@@ -4095,80 +4731,110 @@ function Builder({
             device: state.device,
             onDeviceChange: (device) => editor.setDevice(device),
             onBack: onClose ? back : void 0,
-            actions: /* @__PURE__ */ jsxs17(Fragment6, { children: [
-              toolbarFeatures.map((feature) => {
-                const Action = feature.toolbar;
-                return /* @__PURE__ */ jsx20(Action, { context: featureContext }, feature.id);
-              }),
-              /* @__PURE__ */ jsxs17(Button, { size: "sm-compact", onClick: () => save(), disabled: !ready || saving !== null, children: [
-                saving === "manual" ? /* @__PURE__ */ jsx20(Loader25, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx20(Save, {}),
-                t("Save")
-              ] })
+            compact,
+            actions: toolbarFeatures.map((feature) => {
+              const Action = feature.toolbar;
+              return /* @__PURE__ */ jsx22(Action, { context: featureContext }, feature.id);
+            }),
+            primary: /* @__PURE__ */ jsxs19(Button, { size: "sm-compact", onClick: () => save(), disabled: !ready || saving !== null, children: [
+              saving === "manual" ? /* @__PURE__ */ jsx22(Loader25, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx22(Save, {}),
+              t("Save")
             ] })
           }
         ),
-        /* @__PURE__ */ jsxs17("div", { className: "eb:grid eb:min-h-0 eb:flex-1 eb:grid-cols-[224px_minmax(0,1fr)_296px] eb:grid-rows-1", children: [
-          /* @__PURE__ */ jsx20(BlockSidebar, { editor, disabled: !ready }),
-          /* @__PURE__ */ jsx20("div", { className: "eb:relative eb:min-w-0 eb:bg-surface-75", "aria-busy": !ready, children: boot.status === "error" || engineError ? /* @__PURE__ */ jsxs17("div", { role: "alert", className: "eb:flex eb:h-full eb:flex-col eb:items-center eb:justify-center eb:gap-2 eb:p-6 eb:text-center", children: [
-            /* @__PURE__ */ jsx20(AlertTriangle2, { className: "eb:size-6 eb:text-destructive", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx20("p", { className: "eb:text-[13px] eb:text-foreground", children: boot.status === "error" ? t("The template could not be loaded.") : t("The builder could not start.") }),
-            /* @__PURE__ */ jsx20("p", { className: "eb:max-w-sm eb:text-[12px] eb:text-foreground-muted", children: boot.message || engineError }),
-            engineError && /* @__PURE__ */ jsx20(
-              Button,
-              {
-                variant: "outline",
-                size: "sm-compact",
-                onClick: () => {
-                  setEngineError(null);
-                  setAttempt((n) => n + 1);
-                },
-                children: t("Retry")
-              }
-            )
-          ] }) : /* @__PURE__ */ jsxs17(Fragment6, { children: [
-            boot.status === "ready" && /* @__PURE__ */ jsx20(
-              EmailCanvas,
-              {
-                editor,
-                document: boot.document,
-                onReady,
-                onError: (error) => setEngineError(error.message)
-              },
-              attempt
+        /* @__PURE__ */ jsxs19(
+          "div",
+          {
+            className: cn(
+              "eb:relative eb:grid eb:min-h-0 eb:flex-1 eb:grid-rows-1",
+              layout2 === "wide" && "eb:grid-cols-[224px_minmax(0,1fr)_296px]",
+              layout2 === "medium" && "eb:grid-cols-[200px_minmax(0,1fr)]",
+              layout2 === "narrow" && "eb:grid-cols-1"
             ),
-            !ready && /* @__PURE__ */ jsxs17("div", { className: "eb:absolute eb:inset-0 eb:flex eb:items-center eb:justify-center eb:bg-surface-75", role: "status", "aria-live": "polite", children: [
-              /* @__PURE__ */ jsx20(Loader25, { className: "eb:size-6 eb:animate-spin eb:text-foreground-muted", "aria-hidden": "true" }),
-              /* @__PURE__ */ jsx20("span", { className: "eb:sr-only", children: t("Loading the builder") })
-            ] })
-          ] }) }),
-          /* @__PURE__ */ jsx20(
-            PropertiesPanel,
+            children: [
+              !blocksInDrawer && /* @__PURE__ */ jsx22(BlockSidebar, { editor, disabled: !ready, onAdded: compact ? () => setDrawer("properties") : void 0 }),
+              /* @__PURE__ */ jsx22("div", { className: "eb:relative eb:min-w-0 eb:bg-surface-75", "aria-busy": !ready, children: boot.status === "error" || engineError ? /* @__PURE__ */ jsxs19("div", { role: "alert", className: "eb:flex eb:h-full eb:flex-col eb:items-center eb:justify-center eb:gap-2 eb:p-6 eb:text-center", children: [
+                /* @__PURE__ */ jsx22(AlertTriangle2, { className: "eb:size-6 eb:text-destructive", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx22("p", { className: "eb:text-[13px] eb:text-foreground", children: boot.status === "error" ? t("The template could not be loaded.") : t("The builder could not start.") }),
+                /* @__PURE__ */ jsx22("p", { className: "eb:max-w-sm eb:text-[12px] eb:text-foreground-muted", children: boot.message || engineError }),
+                engineError && /* @__PURE__ */ jsx22(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "sm-compact",
+                    onClick: () => {
+                      setEngineError(null);
+                      setAttempt((n) => n + 1);
+                    },
+                    children: t("Retry")
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsxs19(Fragment8, { children: [
+                boot.status === "ready" && /* @__PURE__ */ jsx22(
+                  EmailCanvas,
+                  {
+                    editor,
+                    document: boot.document,
+                    onReady,
+                    onError: (error) => setEngineError(error.message)
+                  },
+                  attempt
+                ),
+                !ready && /* @__PURE__ */ jsxs19("div", { className: "eb:absolute eb:inset-0 eb:flex eb:items-center eb:justify-center eb:bg-surface-75", role: "status", "aria-live": "polite", children: [
+                  /* @__PURE__ */ jsx22(Loader25, { className: "eb:size-6 eb:animate-spin eb:text-foreground-muted", "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx22("span", { className: "eb:sr-only", children: t("Loading the builder") })
+                ] })
+              ] }) }),
+              !compact && properties,
+              blocksInDrawer && /* @__PURE__ */ jsx22(Drawer, { open: drawer === "blocks", side: "left", title: t("Add a block"), onClose: closeDrawer, testId: "eb-blocks-drawer", children: /* @__PURE__ */ jsx22(BlockSidebar, { editor, disabled: !ready, onAdded: () => setDrawer("properties") }) }),
+              compact && /* @__PURE__ */ jsx22(
+                Drawer,
+                {
+                  open: drawer === "properties",
+                  side: "right",
+                  title: t("Properties"),
+                  onClose: closeDrawer,
+                  testId: "eb-properties-drawer",
+                  header: false,
+                  children: properties
+                }
+              )
+            ]
+          }
+        ),
+        compact && /* @__PURE__ */ jsxs19("div", { className: "eb:flex eb:shrink-0 eb:items-center eb:gap-2 eb:border-t eb:border-border eb:px-2 eb:py-2", "data-testid": "eb-compact-bar", children: [
+          blocksInDrawer && /* @__PURE__ */ jsxs19(Button, { variant: "outline", size: "sm-compact", disabled: !ready, onClick: () => setDrawer("blocks"), children: [
+            /* @__PURE__ */ jsx22(Plus2, {}),
+            t("Add a block")
+          ] }),
+          /* @__PURE__ */ jsxs19(
+            Button,
             {
-              editor,
-              selection: ready ? state.selection : null,
-              meta,
-              onMetaChange: setMeta,
-              changes: state.changes,
-              showErrors,
-              actions: /* @__PURE__ */ jsx20(ElementActions, { editor, selection: state.selection }),
-              services,
-              variables
+              variant: state.selection ? "default" : "outline",
+              size: "sm-compact",
+              className: "eb:ml-auto eb:min-w-0",
+              disabled: !ready,
+              onClick: () => setDrawer("properties"),
+              children: [
+                /* @__PURE__ */ jsx22(SlidersHorizontal, {}),
+                /* @__PURE__ */ jsx22("span", { className: "eb:truncate", children: ready && state.selection ? t("Edit: {element}", { element: t(state.selection.label) }) : t("Email settings") })
+              ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsx20(NoticeArea, {})
+        /* @__PURE__ */ jsx22(NoticeArea, {})
       ]
     }
   );
 }
 function EmailBuilder({ locale = "en", messages, onNotify, ...props }) {
-  return /* @__PURE__ */ jsx20(UiProvider, { locale, messages, onNotify, children: /* @__PURE__ */ jsx20(Builder, { ...props, templateId: props.templateId ?? null }) });
+  return /* @__PURE__ */ jsx22(UiProvider, { locale, messages, onNotify, children: /* @__PURE__ */ jsx22(Builder, { ...props, templateId: props.templateId ?? null }) });
 }
 
 // src/ui/EmailBuilderBoundary.jsx
 import { Component } from "react";
 import { AlertTriangle as AlertTriangle3, ArrowLeft as ArrowLeft3, RefreshCw as RefreshCw2 } from "lucide-react";
-import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
 var isChunkError = (error) => error?.name === "ChunkLoadError" || /Loading (CSS )?chunk .* failed/i.test(String(error?.message || ""));
 var english = (text) => text;
 var EmailBuilderBoundary = class extends Component {
@@ -4193,23 +4859,23 @@ var EmailBuilderBoundary = class extends Component {
     const { error, attempt } = this.state;
     const t = this.props.t || english;
     if (!error) {
-      return /* @__PURE__ */ jsx21("div", { style: { height: "100%" }, children: this.props.children }, attempt);
+      return /* @__PURE__ */ jsx23("div", { style: { height: "100%" }, children: this.props.children }, attempt);
     }
-    return /* @__PURE__ */ jsxs18(
+    return /* @__PURE__ */ jsxs20(
       "div",
       {
         role: "alert",
         className: "eb-root eb:flex eb:h-full eb:flex-col eb:items-center eb:justify-center eb:gap-3 eb:p-6 eb:text-center",
         children: [
-          /* @__PURE__ */ jsx21(AlertTriangle3, { className: "eb:size-6 eb:text-destructive", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx21("p", { className: "eb:text-[13px] eb:text-foreground", children: t("The builder could not load.") }),
-          /* @__PURE__ */ jsxs18("div", { className: "eb:flex eb:gap-2", children: [
-            this.props.onClose && /* @__PURE__ */ jsxs18(Button, { variant: "outline", size: "sm", onClick: this.props.onClose, children: [
-              /* @__PURE__ */ jsx21(ArrowLeft3, {}),
+          /* @__PURE__ */ jsx23(AlertTriangle3, { className: "eb:size-6 eb:text-destructive", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx23("p", { className: "eb:text-[13px] eb:text-foreground", children: t("The builder could not load.") }),
+          /* @__PURE__ */ jsxs20("div", { className: "eb:flex eb:gap-2", children: [
+            this.props.onClose && /* @__PURE__ */ jsxs20(Button, { variant: "outline", size: "sm", onClick: this.props.onClose, children: [
+              /* @__PURE__ */ jsx23(ArrowLeft3, {}),
               t("Back")
             ] }),
-            /* @__PURE__ */ jsxs18(Button, { size: "sm", onClick: this.retry, children: [
-              /* @__PURE__ */ jsx21(RefreshCw2, {}),
+            /* @__PURE__ */ jsxs20(Button, { size: "sm", onClick: this.retry, children: [
+              /* @__PURE__ */ jsx23(RefreshCw2, {}),
               t("Retry")
             ] })
           ] })
@@ -4242,10 +4908,12 @@ export {
   LOCALES,
   STARTER_MJML,
   StorageError,
+  TEMPLATE_GALLERY,
   UiProvider,
   absoluteAssetUrls,
   applyVariables,
   applyVariablesToText,
+  buildGallery,
   createDefaultEmailEditor,
   createDocument,
   createEmailEditor,