best-email-builder 0.2.0 → 0.3.0

package/dist/chunk-ILRAQTHS.js

@@ -0,0 +1,3677 @@
+import {
+  Button,
+  DEFAULT_BUTTON_URL,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  FONT_STACK,
+  FRAME_SCROLLBAR_CSS,
+  GROUPS,
+  Input,
+  Label,
+  NoticeArea,
+  PALETTE,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  PreviewButton,
+  SectionLabel,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Separator,
+  Skeleton,
+  TEMPLATE_GALLERY,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  Textarea,
+  TooltipWrap,
+  TruncatedText,
+  UiProvider,
+  buildGallery,
+  cn,
+  createHttpStorage,
+  createStarterMjml,
+  inWhiteSection,
+  prop,
+  socialBlock,
+  socialElementBlock,
+  useLayoutWidth,
+  useT,
+  useUi,
+  withThumbnailImages
+} from "./chunk-ZSUHOCCE.js";
+import {
+  isSafeUrl
+} from "./chunk-57CTQNTK.js";
+import {
+  CUSTOM_GROUP,
+  DEFAULT_VARIABLES,
+  EMAIL_DEVICES,
+  VARIABLE_LIMITS,
+  createDocument,
+  defineVariables,
+  imageUploadError,
+  keyFromLabel,
+  mergeVariables,
+  readDocument,
+  tokenOf,
+  validateCustomVariable
+} from "./chunk-3M36VVXS.js";
+
+// src/core/events.js
+function createEmitter({ onError } = {}) {
+  const listeners = /* @__PURE__ */ new Map();
+  const report = onError || ((error, event) => {
+    console.warn(`[best-email-builder] listener for "${event}" failed`, error);
+  });
+  function off(event, listener) {
+    listeners.get(event)?.delete(listener);
+  }
+  return {
+    on(event, listener) {
+      if (!listeners.has(event)) listeners.set(event, /* @__PURE__ */ new Set());
+      listeners.get(event)?.add(listener);
+      return () => off(event, listener);
+    },
+    off,
+    emit(event, payload) {
+      for (const listener of [...listeners.get(event) || []]) {
+        try {
+          listener(payload);
+        } catch (error) {
+          report(error, event);
+        }
+      }
+    },
+    clear() {
+      listeners.clear();
+    }
+  };
+}
+
+// src/core/mjmlAttributes.js
+var LONGHAND_SPACING = /* @__PURE__ */ new Set(["padding"]);
+var SIDES = (
+  /** @type {const} */
+  ["top", "right", "bottom", "left"]
+);
+function parseSpacing(value) {
+  const parts = String(value || "").trim().split(/\s+/).filter(Boolean);
+  const [a = "0px", b = a, c = a, d = b] = parts;
+  return [a, b, c, d];
+}
+function formatSpacing(sides) {
+  const [t, r, b, l] = sides.map((s) => String(s || "0px"));
+  if (t === b && r === l) return t === r ? t : `${t} ${r}`;
+  if (r === l) return `${t} ${r} ${b}`;
+  return `${t} ${r} ${b} ${l}`;
+}
+function cleanAttributeValue(value) {
+  return String(value ?? "").replace(/["<>\r\n]/g, "").trim();
+}
+function toAttributes(values) {
+  const out = {};
+  for (const [key, raw] of Object.entries(values || {})) {
+    const value = raw === null || raw === void 0 ? "" : cleanAttributeValue(raw);
+    if (LONGHAND_SPACING.has(key)) {
+      const sides = value ? parseSpacing(value) : null;
+      SIDES.forEach((side, i) => {
+        out[`${key}-${side}`] = sides ? sides[i] : null;
+      });
+      out[key] = null;
+    } else {
+      out[key] = value || null;
+    }
+  }
+  return out;
+}
+function toValues(attributes, properties) {
+  const values = {};
+  for (const { key } of properties) {
+    if (LONGHAND_SPACING.has(key)) {
+      const base = parseSpacing(String(attributes[key] ?? ""));
+      const sides = SIDES.map((side, i) => {
+        const v = attributes[`${key}-${side}`];
+        return v === void 0 || v === null || v === "" ? base[i] : String(v);
+      });
+      const hasAny = attributes[key] || SIDES.some((side) => attributes[`${key}-${side}`]);
+      values[key] = hasAny ? formatSpacing(sides) : "";
+    } else {
+      const v = attributes[key];
+      values[key] = v === void 0 || v === null ? "" : String(v);
+    }
+  }
+  return values;
+}
+
+// src/core/EmailEditor.js
+function createEmailEditor({ adapter, blocks, features = null }) {
+  if (!adapter) throw new Error("EmailEditor: missing adapter");
+  if (!blocks) throw new Error("EmailEditor: missing block registry");
+  const emitter = createEmitter();
+  let status = "idle";
+  let generation = 0;
+  let teardowns = [];
+  function requireReady(action) {
+    if (status !== "ready") {
+      throw new Error(`EmailEditor: "${action}" called before the editor was initialized`);
+    }
+  }
+  function targetOf(id, action) {
+    const resolved = id ?? adapter.getSelection()?.id ?? null;
+    if (!resolved) throw new Error(`EmailEditor: "${action}" with no selected element`);
+    return resolved;
+  }
+  function blockForTag(tagName) {
+    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) {
+    if (!selection) return null;
+    const block = blockForTag(selection.tagName);
+    return {
+      ...selection,
+      blockId: block?.id || null,
+      label: block?.label || selection.tagName,
+      values: toValues(selection.attributes || {}, block?.properties || [])
+    };
+  }
+  function startFeatures() {
+    if (!features) return;
+    for (const feature of features.list((f) => f.enabled !== false)) {
+      try {
+        const stop = feature.setup?.(editor);
+        if (typeof stop === "function") teardowns.push(stop);
+      } catch (error) {
+        console.warn(`[best-email-builder] feature "${feature.id}" failed`, error);
+      }
+    }
+  }
+  function stopFeatures() {
+    for (const stop of teardowns.reverse()) {
+      try {
+        stop();
+      } catch (error) {
+        console.warn("[best-email-builder] feature teardown failed", error);
+      }
+    }
+    teardowns = [];
+  }
+  const editor = {
+    get status() {
+      return status;
+    },
+    get adapterName() {
+      return adapter.name;
+    },
+    async initialize({ container, document = null }) {
+      if (!container) throw new Error("EmailEditor: missing container");
+      if (status !== "idle") {
+        throw new Error(`EmailEditor: initialization refused (status "${status}")`);
+      }
+      const ticket = ++generation;
+      status = "initializing";
+      try {
+        await adapter.initialize({
+          container,
+          blocks: blocks.list(),
+          document: document ? readDocument(document) : null,
+          onEvent: (type, payload) => {
+            if (ticket !== generation) return;
+            emitter.emit(type, type === "selection" ? toEmailSelection(payload) : payload);
+          }
+        });
+      } catch (error) {
+        if (ticket === generation) status = "idle";
+        throw error;
+      }
+      if (ticket !== generation) return;
+      status = "ready";
+      startFeatures();
+      emitter.emit("ready");
+    },
+    destroy() {
+      generation += 1;
+      stopFeatures();
+      const etait = status;
+      status = "idle";
+      adapter.destroy();
+      if (etait === "ready") emitter.emit("destroy");
+    },
+    listBlocks: () => blocks.list(),
+    getBlock: (blockId) => blocks.get(blockId),
+    addBlock(blockId, options = {}) {
+      requireReady("addBlock");
+      const block = blocks.get(blockId);
+      if (!block || !block.mjml) throw new Error(`EmailEditor: unknown block "${blockId}"`);
+      return adapter.addBlock(block, options);
+    },
+    remove(id = null) {
+      requireReady("remove");
+      return adapter.remove(targetOf(id, "remove"));
+    },
+    duplicate(id = null) {
+      requireReady("duplicate");
+      return adapter.duplicate(targetOf(id, "duplicate"));
+    },
+    move(direction, id = null) {
+      requireReady("move");
+      if (direction !== -1 && direction !== 1) throw new Error("EmailEditor: invalid move direction");
+      return adapter.move(targetOf(id, "move"), direction);
+    },
+    select(id) {
+      requireReady("select");
+      adapter.select(id);
+    },
+    getSelection() {
+      return status === "ready" ? toEmailSelection(adapter.getSelection()) : null;
+    },
+    getElement(id) {
+      return status === "ready" && id ? toEmailSelection(adapter.describe(id)) : null;
+    },
+    /** The email body: page background and width, edited without a selection. */
+    getRootId: () => status === "ready" ? adapter.getRootId() : null,
+    updateProperties(values, id = null) {
+      requireReady("updateProperties");
+      adapter.updateProperties(targetOf(id, "updateProperties"), toAttributes(values));
+    },
+    setContent(content, id = null) {
+      requireReady("setContent");
+      adapter.setContent(targetOf(id, "setContent"), content);
+    },
+    insertText(text) {
+      requireReady("insertText");
+      return adapter.insertText(String(text ?? ""));
+    },
+    /**
+     * Link at the caret of the text being edited, at the end of the selected
+     * text, or as the selected button's URL. False if nothing fits.
+     */
+    insertLink(href, label) {
+      requireReady("insertLink");
+      return adapter.insertLink(String(href || ""), String(label || href || ""));
+    },
+    undo() {
+      requireReady("undo");
+      adapter.undo();
+    },
+    redo() {
+      requireReady("redo");
+      adapter.redo();
+    },
+    canUndo: () => status === "ready" && adapter.canUndo(),
+    canRedo: () => status === "ready" && adapter.canRedo(),
+    getDocument() {
+      requireReady("getDocument");
+      return createDocument({
+        engine: adapter.name,
+        engineVersion: adapter.version,
+        project: adapter.getProject()
+      });
+    },
+    loadDocument(raw) {
+      requireReady("loadDocument");
+      const document = readDocument(raw);
+      if (document.engine !== adapter.name) {
+        throw new Error(
+          `EmailEditor: document written for engine "${document.engine}", editor runs on "${adapter.name}"`
+        );
+      }
+      adapter.loadProject(document.project);
+      adapter.clearHistory();
+    },
+    loadMjml(mjml) {
+      requireReady("loadMjml");
+      adapter.loadMjml(String(mjml || ""));
+      adapter.clearHistory();
+    },
+    exportMjml() {
+      requireReady("exportMjml");
+      return adapter.exportMjml();
+    },
+    /**
+     * 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(mjml === null || mjml === void 0 ? null : String(mjml));
+    },
+    setDevice(device) {
+      requireReady("setDevice");
+      if (!EMAIL_DEVICES.includes(device)) throw new Error(`EmailEditor: unknown device "${device}"`);
+      adapter.setDevice(device);
+    },
+    getDevice: () => status === "ready" ? adapter.getDevice() : "desktop",
+    startBlockDrag(blockId, event) {
+      requireReady("startBlockDrag");
+      const block = blocks.get(blockId);
+      if (!block || !block.mjml) throw new Error(`EmailEditor: unknown block "${blockId}"`);
+      adapter.startBlockDrag(block, event);
+    },
+    endBlockDrag(cancel = false) {
+      if (status === "ready") adapter.endBlockDrag(cancel);
+    },
+    /**
+     * Keyboard shortcut that also works INSIDE the canvas (an iframe: page
+     * listeners hear nothing there). `keys`: `mod+s` (Ctrl, or ⌘ on Mac),
+     * several combinations separated by commas.
+     */
+    addShortcut(id, keys, handler) {
+      requireReady("addShortcut");
+      return adapter.addShortcut(id, keys, handler);
+    },
+    on: (event, listener) => emitter.on(event, listener)
+  };
+  return editor;
+}
+
+// src/core/registry.js
+var ID_SHAPE = /^[a-z][a-z0-9-]*$/;
+function createRegistry(kind, initial = []) {
+  const items = /* @__PURE__ */ new Map();
+  function unregister(id) {
+    return items.delete(id);
+  }
+  function register(item) {
+    if (!item || typeof item.id !== "string" || !ID_SHAPE.test(item.id)) {
+      throw new Error(`${kind}: invalid id ("${item?.id}")`);
+    }
+    if (items.has(item.id)) {
+      throw new Error(`${kind}: "${item.id}" is already registered`);
+    }
+    items.set(item.id, item);
+    return () => {
+      unregister(item.id);
+    };
+  }
+  initial.forEach(register);
+  return {
+    kind,
+    register,
+    unregister,
+    get: (id) => items.get(id),
+    has: (id) => items.has(id),
+    // Stable sort: `order` first, then registration order.
+    list: (filter) => [...items.values()].map((item, index) => ({ item, index })).sort((a, b) => (a.item.order ?? 1e3) - (b.item.order ?? 1e3) || a.index - b.index).map(({ item }) => item).filter((item) => filter ? filter(item) : true),
+    ids: () => [...items.keys()]
+  };
+}
+
+// src/blocks/structure/index.js
+var bodyBlock = {
+  id: "body",
+  label: "Email",
+  icon: "Mail",
+  kind: "structure",
+  tagName: "mj-body",
+  order: 900,
+  properties: [
+    prop.background("background-color", "Page background"),
+    {
+      key: "width",
+      label: "Content width",
+      type: "select",
+      group: GROUPS.layout,
+      options: [
+        { value: "600px", label: "600 px (standard)" },
+        { value: "640px", label: "640 px" }
+      ]
+    }
+  ]
+};
+var sectionBlock = {
+  id: "section",
+  label: "Section",
+  icon: "Rows3",
+  kind: "structure",
+  tagName: "mj-section",
+  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)
+  ]
+};
+var columnBlock = {
+  id: "column",
+  label: "Column",
+  icon: "Columns2",
+  kind: "structure",
+  tagName: "mj-column",
+  order: 902,
+  properties: [
+    prop.background("background-color", "Background"),
+    prop.padding("padding", "Padding"),
+    {
+      key: "vertical-align",
+      label: "Vertical alignment",
+      type: "select",
+      group: GROUPS.layout,
+      options: [
+        { value: "top", label: "Top" },
+        { value: "middle", label: "Middle" },
+        { value: "bottom", label: "Bottom" }
+      ]
+    }
+  ]
+};
+
+// src/blocks/text/index.js
+function textMjml(content) {
+  return `<mj-text font-family="${FONT_STACK}" font-size="15px" line-height="24px" color="${PALETTE.ink}" align="left">${content}</mj-text>`;
+}
+var MJML = textMjml("Your text.");
+var textBlock = {
+  id: "text",
+  label: "Text",
+  description: "Paragraph or heading",
+  icon: "Type",
+  kind: "content",
+  tagName: "mj-text",
+  order: 10,
+  mjml: MJML,
+  sectionMjml: inWhiteSection(MJML),
+  editableContent: true,
+  properties: [
+    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" }] },
+    prop.padding()
+  ]
+};
+
+// src/blocks/image/index.js
+var MJML2 = '<mj-image align="center"></mj-image>';
+var imageBlock = {
+  id: "image",
+  label: "Image",
+  description: "Photo, visual or logo",
+  icon: "Image",
+  kind: "content",
+  tagName: "mj-image",
+  order: 20,
+  mjml: MJML2,
+  sectionMjml: inWhiteSection(MJML2),
+  properties: [
+    { key: "src", label: "Image", type: "image", group: GROUPS.content },
+    {
+      key: "alt",
+      label: "Alt text",
+      type: "text",
+      group: GROUPS.content,
+      placeholder: "Describes the image if it is blocked"
+    },
+    prop.href("Link on click"),
+    { key: "width", label: "Width", type: "size", group: GROUPS.layout, min: 20, max: 600, unit: "px" },
+    prop.align(),
+    prop.radius(40),
+    prop.padding()
+  ]
+};
+
+// src/blocks/button/index.js
+var MJML3 = `<mj-button href="${DEFAULT_BUTTON_URL}" background-color="${PALETTE.navy}" color="${PALETTE.white}" font-family="${FONT_STACK}" font-size="15px" font-weight="bold" border-radius="6px" inner-padding="12px 28px" align="center">Learn more</mj-button>`;
+var buttonBlock = {
+  id: "button",
+  label: "Button",
+  description: "Call to action",
+  icon: "RectangleHorizontal",
+  kind: "content",
+  tagName: "mj-button",
+  order: 30,
+  mjml: MJML3,
+  sectionMjml: inWhiteSection(MJML3),
+  editableContent: true,
+  properties: [
+    prop.href("Link URL"),
+    prop.background("background-color", "Button background"),
+    prop.color("Text"),
+    prop.fontFamily(),
+    prop.fontSize(11, 28),
+    {
+      key: "font-weight",
+      label: "Weight",
+      type: "select",
+      group: GROUPS.typography,
+      options: [
+        { value: "bold", label: "Bold" },
+        { value: "normal", label: "Normal" }
+      ]
+    },
+    prop.radius(30),
+    {
+      key: "width",
+      label: "Width",
+      type: "select",
+      group: GROUPS.layout,
+      options: [
+        { value: "", label: "Fit to text" },
+        { value: "100%", label: "Full width" }
+      ]
+    },
+    prop.align(),
+    prop.padding("inner-padding", "Button padding"),
+    prop.padding()
+  ]
+};
+
+// src/blocks/divider/index.js
+var MJML4 = `<mj-divider border-color="${PALETTE.border}" border-width="1px"></mj-divider>`;
+var dividerBlock = {
+  id: "divider",
+  label: "Divider",
+  description: "Horizontal rule",
+  icon: "SeparatorHorizontal",
+  kind: "content",
+  tagName: "mj-divider",
+  order: 40,
+  mjml: MJML4,
+  sectionMjml: inWhiteSection(MJML4),
+  properties: [
+    prop.background("border-color", "Line color"),
+    { key: "border-width", label: "Thickness", type: "size", group: GROUPS.layout, min: 1, max: 10, unit: "px" },
+    {
+      key: "border-style",
+      label: "Line style",
+      type: "select",
+      group: GROUPS.layout,
+      options: [
+        { value: "solid", label: "Solid" },
+        { value: "dashed", label: "Dashed" },
+        { value: "dotted", label: "Dotted" }
+      ]
+    },
+    {
+      key: "width",
+      label: "Length",
+      type: "select",
+      group: GROUPS.layout,
+      options: [
+        { value: "100%", label: "Full length" },
+        { value: "75%", label: "75%" },
+        { value: "50%", label: "50%" },
+        { value: "25%", label: "25%" }
+      ]
+    },
+    prop.align(),
+    prop.padding()
+  ]
+};
+
+// src/blocks/spacer/index.js
+var MJML5 = '<mj-spacer height="24px"></mj-spacer>';
+var spacerBlock = {
+  id: "spacer",
+  label: "Spacer",
+  description: "Vertical space",
+  icon: "MoveVertical",
+  kind: "content",
+  tagName: "mj-spacer",
+  order: 50,
+  mjml: MJML5,
+  sectionMjml: inWhiteSection(MJML5),
+  properties: [
+    { key: "height", label: "Height", type: "size", group: GROUPS.layout, min: 4, max: 200, unit: "px" },
+    prop.background("container-background-color", "Background")
+  ]
+};
+
+// 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/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 MJML7 = '<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: MJML7,
+  sectionMjml: inWhiteSection(MJML7),
+  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 MJML8 = `<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: MJML8,
+  properties: []
+};
+
+// src/blocks/columns/index.js
+function sectionWith(count) {
+  const columns = Array.from(
+    { length: count },
+    (_, i) => `<mj-column>${textMjml(count === 1 ? "Your text." : `Column ${i + 1}`)}</mj-column>`
+  ).join("");
+  return `<mj-section background-color="${PALETTE.surface}">${columns}</mj-section>`;
+}
+function layout(count, icon) {
+  return {
+    id: `columns-${count}`,
+    label: count === 1 ? "1 column" : `${count} columns`,
+    description: count === 1 ? "Full-width section" : `${count}-column section`,
+    icon,
+    kind: "layout",
+    tagName: "mj-section",
+    order: 100 + count,
+    mjml: sectionWith(count),
+    properties: []
+  };
+}
+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,
+  socialElementBlock,
+  navbarLinkBlock
+];
+var emailBlocks = createRegistry("emailBlocks", BLOCKS);
+
+// src/features/autosave/index.js
+var autosaveFeature = {
+  id: "autosave",
+  label: "Autosave",
+  order: 20,
+  options: { idleMs: 2e4, maxWaitMs: 12e4, draftDelayMs: 1500 }
+};
+
+// src/features/versions/VersionsMenu.jsx
+import { useState } from "react";
+import { History } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function formatWhen(value, locale) {
+  if (!value) return "";
+  const d = new Date(value);
+  return Number.isNaN(d.getTime()) ? "" : d.toLocaleString(locale, { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" });
+}
+function VersionsMenu({ context }) {
+  const { editor, storage, template, isDirty, markDirty, ready } = context;
+  const { t, confirm, notify, locale } = useUi();
+  const [open, setOpen] = useState(false);
+  const [versions, setVersions] = useState(null);
+  const [error, setError] = useState(null);
+  const [restoring, setRestoring] = useState(null);
+  const load = async () => {
+    setVersions(null);
+    setError(null);
+    try {
+      setVersions(await storage.listVersions(template.id));
+    } catch (e) {
+      setError(e.message);
+    }
+  };
+  const restore = async (version) => {
+    if (isDirty()) {
+      const ok = await confirm({
+        title: t("Restore version {n}?", { n: version.versionNumber }),
+        description: t("Unsaved changes will be replaced."),
+        confirmLabel: t("Restore"),
+        destructive: true
+      });
+      if (!ok) return;
+    }
+    setRestoring(version.id);
+    try {
+      const full = await storage.getVersion(template.id, version.id);
+      editor.loadDocument(full.document);
+      markDirty();
+      setOpen(false);
+      notify("success", t("Version {n} restored \u2014 save to keep it.", { n: version.versionNumber }));
+    } catch (e) {
+      notify("error", e.message);
+    } finally {
+      setRestoring(null);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      open,
+      onOpenChange: (next) => {
+        setOpen(next);
+        if (next) load();
+      },
+      children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "sm-compact",
+            disabled: !ready || !template.id,
+            title: !template.id ? t("Save the template first") : void 0,
+            children: [
+              /* @__PURE__ */ jsx(History, {}),
+              t("Versions")
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(PopoverContent, { align: "end", className: "eb:w-80 eb:p-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "eb:border-b eb:border-border eb:px-3 eb:py-2.5 eb:text-[13px] eb:font-medium eb:text-foreground", children: t("Versions") }),
+          /* @__PURE__ */ jsx("div", { className: "eb:max-h-[320px] eb:overflow-y-auto eb:p-1", "aria-busy": versions === null && !error, children: error ? /* @__PURE__ */ jsx("p", { role: "alert", className: "eb:px-2 eb:py-1.5 eb:text-[12px] eb:text-destructive", children: error }) : versions === null ? /* @__PURE__ */ jsxs("div", { className: "eb:space-y-1 eb:p-1", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "eb:h-8 eb:w-40" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "eb:h-8 eb:w-32" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "eb:h-8 eb:w-36" })
+          ] }) : versions.length === 0 ? /* @__PURE__ */ jsx("p", { className: "eb:px-2 eb:py-1.5 eb:text-[12px] eb:text-foreground-muted", children: t("No versions yet.") }) : versions.map((version, index) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "eb:flex eb:items-center eb:gap-2 eb:rounded-lg2 eb:px-2 eb:py-1.5 eb:hover:bg-surface-100",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "eb:min-w-0 eb:flex-1", children: [
+                  /* @__PURE__ */ jsxs("p", { className: "eb:text-[13px] eb:text-foreground", children: [
+                    t("Version {n}", { n: version.versionNumber }),
+                    index === 0 && /* @__PURE__ */ jsx("span", { className: "eb:ml-1.5 eb:text-[11px] eb:text-foreground-muted", children: t("current") })
+                  ] }),
+                  /* @__PURE__ */ jsxs("p", { className: "eb:text-[11px] eb:tabular-nums eb:text-foreground-muted", children: [
+                    formatWhen(version.createdAt, locale),
+                    version.createdBy ? ` \xB7 ${version.createdBy}` : ""
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "xs",
+                    disabled: restoring !== null,
+                    onClick: () => restore(version),
+                    "aria-label": t("Restore version {n}", { n: version.versionNumber }),
+                    children: t("Restore")
+                  }
+                )
+              ]
+            },
+            version.id
+          )) })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/features/versions/index.js
+var versionsFeature = {
+  id: "versions",
+  label: "Versions",
+  order: 30,
+  toolbar: VersionsMenu
+};
+
+// src/features/variables/VariablesMenu.jsx
+import { useState as useState4 } from "react";
+import { Braces as Braces2 } from "lucide-react";
+
+// src/features/variables/VariableDialog.jsx
+import { useEffect, useMemo, useState as useState2 } from "react";
+import { Braces, Loader2, Trash2 } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function VariableDialog({ open, onOpenChange, variable = null, initialLabel = "", variables, storage, onSaved, onDeleted }) {
+  const { t, notify, confirm } = useUi();
+  const editing = Boolean(variable);
+  const [form, setForm] = useState2({ label: "", key: "", group: "", sample: "", fallback: "" });
+  const [keyTouched, setKeyTouched] = useState2(false);
+  const [errors, setErrors] = useState2({});
+  const [busy, setBusy] = useState2(false);
+  useEffect(() => {
+    if (!open) return;
+    setForm(
+      variable ? {
+        label: variable.label,
+        key: variable.key,
+        group: variable.group || "",
+        sample: variable.sample || "",
+        fallback: variable.fallback || ""
+      } : { label: initialLabel, key: initialLabel ? keyFromLabel(initialLabel) : "", group: "", sample: "", fallback: "" }
+    );
+    setKeyTouched(false);
+    setErrors({});
+  }, [open, variable, initialLabel]);
+  const groups = useMemo(
+    () => [.../* @__PURE__ */ new Set([CUSTOM_GROUP, ...variables.filter((v) => v.custom).map((v) => v.group)])].filter(Boolean),
+    [variables]
+  );
+  const set = (field2) => (e) => {
+    const value = e.target.value;
+    setForm((f) => {
+      const next = { ...f, [field2]: value };
+      if (field2 === "label" && !editing && !keyTouched) next.key = value.trim() ? keyFromLabel(value) : "";
+      return next;
+    });
+    if (field2 === "key") setKeyTouched(true);
+    setErrors((errs) => ({ ...errs, [field2]: void 0 }));
+  };
+  const submit = async (e) => {
+    e.preventDefault();
+    const existing = variables.filter((v) => !editing || v.key !== variable.key);
+    const check = validateCustomVariable(form, { existing, editing: editing ? variable.key : null, t });
+    if (check.errors) {
+      setErrors(check.errors);
+      return;
+    }
+    setBusy(true);
+    try {
+      const saved = await storage.saveVariable(check.variable, { create: !editing });
+      onSaved(saved, !editing);
+      onOpenChange(false);
+    } catch (error) {
+      notify("error", error.message);
+    } finally {
+      setBusy(false);
+    }
+  };
+  const remove = async () => {
+    const ok = await confirm({
+      title: t("Delete the variable \u201C{name}\u201D?", { name: variable.label }),
+      description: t("Templates that use it will show its \u201Cvalue if empty\u201D."),
+      confirmLabel: t("Delete"),
+      destructive: true
+    });
+    if (!ok) return;
+    setBusy(true);
+    try {
+      await storage.deleteVariable(variable.key);
+      onDeleted?.(variable.key);
+      onOpenChange(false);
+    } catch (error) {
+      notify("error", error.message);
+    } finally {
+      setBusy(false);
+    }
+  };
+  const field = (name, label, props = {}, hint = null) => /* @__PURE__ */ jsxs2("div", { className: "eb:space-y-1.5", children: [
+    /* @__PURE__ */ jsx2(Label, { htmlFor: `eb-var-${name}`, children: label }),
+    /* @__PURE__ */ jsx2(
+      Input,
+      {
+        id: `eb-var-${name}`,
+        value: form[name],
+        onChange: set(name),
+        "aria-invalid": errors[name] ? true : void 0,
+        "aria-describedby": errors[name] || hint ? `eb-var-${name}-hint` : void 0,
+        ...props
+      }
+    ),
+    (errors[name] || hint) && /* @__PURE__ */ jsx2("p", { id: `eb-var-${name}-hint`, className: errors[name] ? "eb:text-[12px] eb:text-destructive" : "eb:text-[11px] eb:text-foreground-muted", children: errors[name] || hint })
+  ] });
+  return /* @__PURE__ */ jsx2(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs2(
+    DialogContent,
+    {
+      className: "eb:sm:max-w-[440px]",
+      onMouseDown: (e) => e.stopPropagation(),
+      onCloseAutoFocus: (e) => e.preventDefault(),
+      children: [
+        /* @__PURE__ */ jsx2(DialogHeader, { children: /* @__PURE__ */ jsxs2("div", { className: "eb:flex eb:items-center eb:gap-3", children: [
+          /* @__PURE__ */ jsx2("span", { className: "eb:flex eb:size-10 eb:shrink-0 eb:items-center eb:justify-center eb:rounded-lg2 eb:bg-primary/10 eb:text-primary", children: /* @__PURE__ */ jsx2(Braces, { className: "eb:size-5" }) }),
+          /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx2(DialogTitle, { className: "eb:text-base eb:font-normal", children: editing ? t("Edit variable") : t("New variable") }),
+            /* @__PURE__ */ jsx2(DialogDescription, { className: "eb:text-[13px]", children: t("Available in every template.") })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs2("form", { onSubmit: submit, className: "eb:space-y-3", noValidate: true, children: [
+          field("label", t("Name"), { autoFocus: true, maxLength: VARIABLE_LIMITS.label, placeholder: t("Order number") }),
+          field(
+            "key",
+            t("Tag"),
+            { disabled: editing, maxLength: VARIABLE_LIMITS.key, className: "eb:font-mono eb:text-[12px]" },
+            form.key ? `{{${form.key}}}` : null
+          ),
+          /* @__PURE__ */ jsxs2("div", { className: "eb:space-y-1.5", children: [
+            /* @__PURE__ */ jsx2(Label, { htmlFor: "eb-var-group", children: t("Group") }),
+            /* @__PURE__ */ jsx2(
+              Input,
+              {
+                id: "eb-var-group",
+                list: "eb-var-groups",
+                value: form.group,
+                onChange: set("group"),
+                maxLength: VARIABLE_LIMITS.group,
+                placeholder: t(CUSTOM_GROUP)
+              }
+            ),
+            /* @__PURE__ */ jsx2("datalist", { id: "eb-var-groups", children: groups.map((g) => /* @__PURE__ */ jsx2("option", { value: g }, g)) })
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { className: "eb:grid eb:grid-cols-2 eb:gap-3", children: [
+            field("sample", t("Sample value"), { maxLength: VARIABLE_LIMITS.sample, placeholder: "CMD-1042" }, t("Preview and tests")),
+            field("fallback", t("Value if empty"), { maxLength: VARIABLE_LIMITS.fallback }, t("When a recipient has none"))
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { className: "eb:flex eb:items-center eb:gap-2 eb:pt-1", children: [
+            editing && /* @__PURE__ */ jsxs2(Button, { variant: "ghost", className: "eb:text-destructive eb:hover:text-destructive", onClick: remove, disabled: busy, children: [
+              /* @__PURE__ */ jsx2(Trash2, {}),
+              t("Delete")
+            ] }),
+            /* @__PURE__ */ jsxs2("div", { className: "eb:ml-auto eb:flex eb:gap-2", children: [
+              /* @__PURE__ */ jsx2(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: busy, children: t("Cancel") }),
+              /* @__PURE__ */ jsxs2(Button, { type: "submit", disabled: busy, children: [
+                busy && /* @__PURE__ */ jsx2(Loader2, { className: "eb:animate-spin" }),
+                editing ? t("Save") : t("Create")
+              ] })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  ) });
+}
+
+// src/features/variables/VariablePicker.jsx
+import { useEffect as useEffect2, useMemo as useMemo2, useRef, useState as useState3 } from "react";
+import { Pencil, Plus, Search } from "lucide-react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function VariablePicker({ variables, onPick, onCreate = null, onEdit = null, filter }) {
+  const t = useT();
+  const [query, setQuery] = useState3("");
+  const [active, setActive] = useState3(0);
+  const listRef = useRef(null);
+  const matches = useMemo2(() => {
+    const q = query.trim().toLowerCase();
+    return variables.filter((v) => filter ? filter(v) : true).filter(
+      (v) => !q || t(v.label).toLowerCase().includes(q) || v.key.toLowerCase().includes(q) || t(v.group).toLowerCase().includes(q)
+    );
+  }, [variables, query, filter, t]);
+  const groups = useMemo2(() => [...new Set(matches.map((v) => v.group))], [matches]);
+  const ordered = useMemo2(() => groups.flatMap((g) => matches.filter((v) => v.group === g)), [groups, matches]);
+  useEffect2(() => setActive(0), [query]);
+  useEffect2(() => {
+    listRef.current?.querySelector('[data-active="true"]')?.scrollIntoView({ block: "nearest" });
+  }, [active]);
+  const onKeyDown = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActive((i) => Math.min(i + 1, ordered.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActive((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (ordered[active]) onPick(ordered[active]);
+      else if (onCreate && query.trim()) onCreate(query.trim());
+    }
+  };
+  return /* @__PURE__ */ jsxs3("div", { className: "eb:flex eb:max-h-[min(440px,70vh)] eb:flex-col", "data-testid": "variable-picker", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "eb:relative eb:border-b eb:border-border eb:p-2", children: [
+      /* @__PURE__ */ jsx3(Search, { className: "eb:pointer-events-none eb:absolute eb:top-1/2 eb:left-4 eb:size-3.5 eb:-translate-y-1/2 eb:text-foreground-muted" }),
+      /* @__PURE__ */ jsx3(
+        "input",
+        {
+          autoFocus: true,
+          value: query,
+          onChange: (e) => setQuery(e.target.value),
+          onKeyDown,
+          placeholder: t("Search variables\u2026"),
+          "aria-label": t("Search variables\u2026"),
+          className: "eb:h-8 eb:w-full eb:rounded-md eb:bg-surface-75 eb:pr-2 eb:pl-7 eb:text-[13px] eb:text-foreground eb:outline-none eb:placeholder:text-foreground-muted eb:focus-visible:ring-2 eb:focus-visible:ring-ring/40"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { ref: listRef, role: "listbox", "aria-label": t("Variables"), className: "eb:min-h-0 eb:flex-1 eb:overflow-y-auto eb:p-1", children: [
+      ordered.length === 0 && /* @__PURE__ */ jsxs3("div", { className: "eb:px-2 eb:py-3 eb:text-center eb:text-[12px] eb:text-foreground-muted", children: [
+        /* @__PURE__ */ jsx3("p", { children: t("No variable found.") }),
+        onCreate && query.trim() && /* @__PURE__ */ jsxs3(
+          "button",
+          {
+            type: "button",
+            onClick: () => onCreate(query.trim()),
+            className: "eb:mt-2 eb:inline-flex eb:items-center eb:gap-1 eb:rounded-md eb:px-2 eb:py-1 eb:text-[12px] eb:font-medium eb:text-primary eb:hover:bg-accent",
+            children: [
+              /* @__PURE__ */ jsx3(Plus, { className: "eb:size-3.5" }),
+              t("Create \u201C{name}\u201D", { name: query.trim() })
+            ]
+          }
+        )
+      ] }),
+      groups.map((group) => /* @__PURE__ */ jsxs3("div", { role: "group", "aria-label": t(group), children: [
+        /* @__PURE__ */ jsx3("p", { className: "eb:px-2 eb:pt-2 eb:pb-1 eb:text-[11px] eb:text-foreground-muted", children: t(group) }),
+        ordered.filter((v) => v.group === group).map((variable) => {
+          const index = ordered.indexOf(variable);
+          return /* @__PURE__ */ jsxs3(
+            "div",
+            {
+              "data-active": index === active,
+              className: cn(
+                "eb:group/var eb:flex eb:items-center eb:gap-1 eb:rounded-md",
+                index === active ? "eb:bg-accent eb:text-accent-foreground" : "eb:hover:bg-accent/60"
+              ),
+              onMouseEnter: () => setActive(index),
+              children: [
+                /* @__PURE__ */ jsxs3(
+                  "button",
+                  {
+                    type: "button",
+                    role: "option",
+                    "aria-selected": index === active,
+                    "data-variable": variable.key,
+                    onClick: () => onPick(variable),
+                    className: "eb:flex eb:min-w-0 eb:flex-1 eb:items-center eb:gap-2 eb:px-2 eb:py-1.5 eb:text-left eb:text-[13px]",
+                    title: variable.description || void 0,
+                    children: [
+                      /* @__PURE__ */ jsx3("span", { className: "eb:min-w-0 eb:flex-1 eb:truncate", children: variable.custom ? variable.label : t(variable.label) }),
+                      /* @__PURE__ */ jsx3("code", { className: "eb:shrink-0 eb:font-mono eb:text-[10.5px] eb:text-foreground-muted", children: tokenOf(variable) })
+                    ]
+                  }
+                ),
+                onEdit && variable.custom && /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": t("Edit \u201C{name}\u201D", { name: variable.label }),
+                    title: t("Edit"),
+                    onClick: () => onEdit(variable),
+                    className: "eb:mr-1 eb:flex eb:size-6 eb:shrink-0 eb:items-center eb:justify-center eb:rounded-md eb:text-foreground-muted eb:opacity-0 eb:group-hover/var:opacity-100 eb:hover:bg-background eb:hover:text-foreground eb:focus-visible:opacity-100",
+                    children: /* @__PURE__ */ jsx3(Pencil, { className: "eb:size-3" })
+                  }
+                )
+              ]
+            },
+            variable.key
+          );
+        })
+      ] }, group))
+    ] }),
+    onCreate && /* @__PURE__ */ jsx3("div", { className: "eb:border-t eb:border-border eb:p-1", children: /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        type: "button",
+        onClick: () => onCreate(query.trim()),
+        className: "eb:flex eb:w-full eb:items-center eb:gap-2 eb:rounded-md eb:px-2 eb:py-1.5 eb:text-left eb:text-[13px] eb:font-medium eb:text-primary eb:hover:bg-accent",
+        children: [
+          /* @__PURE__ */ jsx3(Plus, { className: "eb:size-4" }),
+          t("New variable")
+        ]
+      }
+    ) })
+  ] });
+}
+
+// src/features/variables/VariablesMenu.jsx
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function VariablesMenu({ context }) {
+  const { editor, ready, variables, storage, canManageVariables, reloadVariables } = context;
+  const { t, notify } = useUi();
+  const [open, setOpen] = useState4(false);
+  const [dialog, setDialog] = useState4(null);
+  const insert = (variable) => {
+    setOpen(false);
+    const done = variable.kind === "link" ? editor.insertLink(tokenOf(variable), t("Unsubscribe")) : editor.insertText(tokenOf(variable));
+    if (!done) notify("info", t("Select a text or a button first."));
+    return done;
+  };
+  const manage = canManageVariables ? {
+    onCreate: (label) => {
+      setOpen(false);
+      setDialog({ variable: null, label });
+    },
+    onEdit: (variable) => {
+      setOpen(false);
+      setDialog({ variable, label: "" });
+    }
+  } : {};
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsxs4(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx4(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs4(
+        Button,
+        {
+          variant: "outline",
+          size: "sm-compact",
+          disabled: !ready,
+          onPointerDown: (e) => e.pointerType === "mouse" && e.preventDefault(),
+          children: [
+            /* @__PURE__ */ jsx4(Braces2, {}),
+            t("Variables")
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx4(
+        PopoverContent,
+        {
+          align: "end",
+          className: "eb:w-80 eb:p-0",
+          onCloseAutoFocus: (e) => e.preventDefault(),
+          onMouseDown: (e) => e.stopPropagation(),
+          children: /* @__PURE__ */ jsx4(VariablePicker, { variables, onPick: insert, ...manage })
+        }
+      )
+    ] }),
+    canManageVariables && /* @__PURE__ */ jsx4(
+      VariableDialog,
+      {
+        open: Boolean(dialog),
+        onOpenChange: (next) => !next && setDialog(null),
+        variable: dialog?.variable || null,
+        initialLabel: dialog?.label || "",
+        variables,
+        storage,
+        onSaved: async (variable, created) => {
+          await reloadVariables();
+          if (created) {
+            if (editor.insertText(tokenOf(variable))) {
+              notify("success", t("Variable \u201C{name}\u201D created and inserted.", { name: variable.label }));
+            } else {
+              notify("success", t("Variable \u201C{name}\u201D created.", { name: variable.label }));
+            }
+          } else {
+            notify("success", t("Variable \u201C{name}\u201D saved.", { name: variable.label }));
+          }
+        },
+        onDeleted: async () => {
+          await reloadVariables();
+          notify("success", t("Variable deleted."));
+        }
+      }
+    )
+  ] });
+}
+
+// src/features/variables/index.js
+var variablesFeature = {
+  id: "variables",
+  label: "Variables",
+  order: 10,
+  toolbar: VariablesMenu
+};
+
+// src/features/preview/index.js
+var previewFeature = {
+  id: "preview",
+  label: "Preview",
+  order: 40,
+  toolbar: PreviewButton,
+  isAvailable: (context) => typeof context.storage?.render === "function"
+};
+
+// src/features/test-email/TestEmailButton.jsx
+import { useState as useState5 } from "react";
+import { CheckCircle2, Loader2 as Loader22, Send, XCircle } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var KEY = "best-email-builder:test-addresses";
+function readAddresses(fallback) {
+  try {
+    return window.localStorage.getItem(KEY) ?? fallback;
+  } catch {
+    return fallback;
+  }
+}
+function rememberAddresses(value) {
+  try {
+    window.localStorage.setItem(KEY, value);
+  } catch {
+  }
+}
+function TestEmailButton({ context }) {
+  const { editor, ready, meta, storage, testRecipients = [] } = context;
+  const { t, notify } = useUi();
+  const [open, setOpen] = useState5(false);
+  const [addresses, setAddresses] = useState5("");
+  const [sending, setSending] = useState5(false);
+  const [report, setReport] = useState5(null);
+  const emails = addresses.split(/[,;\s]+/).map((a) => a.trim()).filter(Boolean);
+  const send = async () => {
+    if (!emails.length) return;
+    rememberAddresses(addresses);
+    setSending(true);
+    setReport(null);
+    try {
+      const result = await storage.sendTest({
+        mjml: editor.exportMjml(),
+        subject: meta.subject,
+        preheader: meta.preheader,
+        emails
+      });
+      setReport(result);
+      if (result.failed > 0) notify("warning", t("{sent} sent, {failed} failed.", { sent: result.sent, failed: result.failed }));
+      else notify("success", t("{sent} test(s) sent \u2014 check your inbox.", { sent: result.sent }));
+    } catch (error) {
+      notify("error", error.message);
+    } finally {
+      setSending(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsxs5(
+      Button,
+      {
+        variant: "outline",
+        size: "sm-compact",
+        disabled: !ready,
+        onClick: () => {
+          setAddresses(readAddresses(testRecipients.join(", ")));
+          setReport(null);
+          setOpen(true);
+        },
+        children: [
+          /* @__PURE__ */ jsx5(Send, {}),
+          t("Test")
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx5(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs5(DialogContent, { className: "eb:sm:max-w-[460px]", children: [
+      /* @__PURE__ */ jsx5(DialogHeader, { children: /* @__PURE__ */ jsxs5("div", { className: "eb:flex eb:items-center eb:gap-3", children: [
+        /* @__PURE__ */ jsx5("span", { className: "eb:flex eb:size-10 eb:shrink-0 eb:items-center eb:justify-center eb:rounded-lg2 eb:bg-primary/10 eb:text-primary", children: /* @__PURE__ */ jsx5(Send, { className: "eb:size-5" }) }),
+        /* @__PURE__ */ jsxs5("div", { children: [
+          /* @__PURE__ */ jsx5(DialogTitle, { className: "eb:text-base eb:font-normal", children: t("Send a test") }),
+          /* @__PURE__ */ jsx5(DialogDescription, { className: "eb:text-[13px]", children: t("The email on screen, to reviewers\u2019 addresses.") })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxs5("div", { className: "eb:space-y-2", children: [
+        /* @__PURE__ */ jsx5(Label, { htmlFor: "eb-test-addresses", children: t("Addresses") }),
+        /* @__PURE__ */ jsx5(
+          Textarea,
+          {
+            id: "eb-test-addresses",
+            value: addresses,
+            onChange: (e) => setAddresses(e.target.value),
+            placeholder: "jane@example.com, john@example.com",
+            rows: 3
+          }
+        )
+      ] }),
+      report && /* @__PURE__ */ jsxs5("ul", { className: "eb:space-y-1", "aria-label": t("Results"), children: [
+        report.results.map((r) => /* @__PURE__ */ jsxs5("li", { className: "eb:flex eb:items-start eb:gap-1.5 eb:text-[12px] eb:text-foreground", children: [
+          r.ok ? /* @__PURE__ */ jsx5(CheckCircle2, { className: "eb:mt-0.5 eb:size-3.5 eb:shrink-0 eb:text-success", "aria-hidden": "true" }) : /* @__PURE__ */ jsx5(XCircle, { className: "eb:mt-0.5 eb:size-3.5 eb:shrink-0 eb:text-destructive", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs5("span", { className: "eb:min-w-0 eb:break-all", children: [
+            r.email,
+            r.error ? ` \u2014 ${r.error}` : ""
+          ] })
+        ] }, r.email)),
+        report.invalid.map((email) => /* @__PURE__ */ jsx5("li", { className: "eb:text-[12px] eb:text-foreground-muted", children: t("Ignored (invalid): {email}", { email }) }, `invalid-${email}`))
+      ] }),
+      /* @__PURE__ */ jsxs5("div", { className: "eb:flex eb:justify-end eb:gap-2", children: [
+        /* @__PURE__ */ jsx5(Button, { variant: "outline", onClick: () => setOpen(false), children: t("Close") }),
+        /* @__PURE__ */ jsxs5(Button, { onClick: send, disabled: sending || !emails.length, children: [
+          sending ? /* @__PURE__ */ jsx5(Loader22, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx5(Send, {}),
+          t("Send")
+        ] })
+      ] })
+    ] }) })
+  ] });
+}
+
+// src/features/test-email/index.js
+var testEmailFeature = {
+  id: "test-email",
+  label: "Send a test",
+  order: 50,
+  toolbar: TestEmailButton,
+  isAvailable: (context) => typeof context.storage?.sendTest === "function"
+};
+
+// src/features/templates/TemplateGallery.jsx
+import { useMemo as useMemo3, useState as useState6 } from "react";
+import { LayoutTemplate } from "lucide-react";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var THUMBNAIL_SCALE = 0.38;
+var EMAIL_WIDTH = 600;
+function Thumbnail({ html, title }) {
+  return /* @__PURE__ */ jsx6(
+    "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__ */ jsx6(
+        "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] = useState6(false);
+  const cards = useMemo3(() => {
+    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__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsxs6(Button, { variant: "outline", size: "sm-compact", disabled: !ready, onClick: () => setOpen(true), children: [
+      /* @__PURE__ */ jsx6(LayoutTemplate, {}),
+      t("Templates")
+    ] }),
+    /* @__PURE__ */ jsx6(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs6(DialogContent, { className: "eb:max-h-[calc(100dvh-2rem)] eb:overflow-y-auto eb:sm:max-w-4xl", "data-testid": "eb-template-gallery", children: [
+      /* @__PURE__ */ jsxs6(DialogHeader, { children: [
+        /* @__PURE__ */ jsx6(DialogTitle, { children: t("Start from a template") }),
+        /* @__PURE__ */ jsx6(DialogDescription, { children: t("Picking a template replaces the email being edited.") })
+      ] }),
+      /* @__PURE__ */ jsx6("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__ */ jsx6("li", { children: /* @__PURE__ */ jsxs6(
+        "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__ */ jsx6(Thumbnail, { html: card.html, title: card.name }),
+            /* @__PURE__ */ jsxs6("span", { className: "eb:px-1", children: [
+              /* @__PURE__ */ jsx6("span", { className: "eb:block eb:text-[13px] eb:font-medium eb:text-foreground", children: card.name }),
+              /* @__PURE__ */ jsx6("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/adapters/grapesjs/engineConfig.js
+var DEVICES = [
+  { id: "desktop", name: "desktop", width: "" },
+  // `widthMedia`: MJML's mobile rule (480px) applies inside the frame.
+  { id: "mobile", name: "mobile", width: "375px", widthMedia: "480px" }
+];
+var EMPTY_MJML = '<mjml><mj-body background-color="#eceff4" width="600px"></mj-body></mjml>';
+var IMAGE_PLACEHOLDER = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 220'%3E%3Crect width='600' height='220' fill='%23f3f5f9'/%3E%3Cg transform='translate(276 86)' fill='none' stroke='%238b93a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='1' width='46' height='46' rx='5'/%3E%3Ccircle cx='17' cy='17' r='5'/%3E%3Cpath d='m47 31-8-8a4 4 0 0 0-6 0L5 47'/%3E%3C/g%3E%3C/svg%3E";
+var CANVAS_CSS = `
+  body { background: #eceff4; }
+  [data-gjs-highlightable] { outline-offset: -1px; }
+  *::selection { background: rgba(53, 104, 168, .22); }
+${FRAME_SCROLLBAR_CSS}
+`;
+function buildEngineConfig({ container, mjmlPlugin, locales = {}, locale = "en" }) {
+  return {
+    container,
+    height: "100%",
+    width: "auto",
+    telemetry: false,
+    customUI: true,
+    cssIcons: "",
+    noticeOnUnload: false,
+    storageManager: (
+      /** @type {false} */
+      false
+    ),
+    fromElement: false,
+    showDevices: false,
+    showOffsets: false,
+    multipleSelection: false,
+    avoidInlineStyle: true,
+    log: (
+      /** @type {('warning'|'error')[]} */
+      ["error"]
+    ),
+    canvasCss: CANVAS_CSS,
+    i18n: {
+      locale,
+      localeFallback: locale,
+      detectLocale: false,
+      messages: locales.engine ? { [locale]: locales.engine } : {}
+    },
+    panels: { defaults: [] },
+    blockManager: { custom: true },
+    layerManager: { custom: true },
+    traitManager: { custom: true },
+    selectorManager: { custom: true, componentFirst: true },
+    styleManager: { custom: true },
+    assetManager: { custom: true, upload: false },
+    deviceManager: { devices: DEVICES, default: "desktop" },
+    undoManager: { trackSelection: false, maximumStackLength: 300 },
+    // Canvas shortcuts: the ones users expect (undo, redo — Ctrl+Y included —,
+    // copy, paste, delete), without GrapesJS's single-letter navigation
+    // ("s", "w", "a", "d") that moved the selection on any keypress outside a
+    // field.
+    keymaps: {
+      defaults: {
+        "core:undo": { keys: "\u2318+z, ctrl+z", handler: "core:undo", opts: { prevent: true } },
+        "core:redo": { keys: "\u2318+shift+z, ctrl+shift+z, ctrl+y", handler: "core:redo", opts: { prevent: true } },
+        "core:copy": { keys: "\u2318+c, ctrl+c", handler: "core:copy" },
+        "core:paste": { keys: "\u2318+v, ctrl+v", handler: "core:paste" },
+        "core:component-delete": { keys: "backspace, delete", handler: "core:component-delete", opts: { prevent: true } }
+      }
+    },
+    parser: {
+      optionsHtml: {
+        allowScripts: false,
+        allowUnsafeAttr: false,
+        allowUnsafeAttrValue: false
+      }
+    },
+    plugins: [
+      (editor) => mjmlPlugin(editor, {
+        // No blocks, devices or style settings from the plugin: blocks and
+        // properties come from `blocks/`.
+        blocks: [],
+        resetBlocks: true,
+        resetDevices: false,
+        resetStyleManager: false,
+        hideSelector: true,
+        useCustomTheme: false,
+        overwriteExport: false,
+        imagePlaceholderSrc: IMAGE_PLACEHOLDER,
+        i18n: locales.mjml ? { [locale]: locales.mjml } : {}
+      }),
+      // After the plugin: the empty image gets our banner, not the raw SVG.
+      (editor) => editor.Components.addType("mj-image", { model: { defaults: { src: IMAGE_PLACEHOLDER } } })
+    ]
+  };
+}
+
+// src/adapters/grapesjs/unwrapModule.js
+function unwrapModule(mod) {
+  let value = mod;
+  for (let depth = 0; depth < 3 && isInteropLayer(value); depth += 1) value = value.default;
+  return value;
+}
+function isInteropLayer(value) {
+  if (value === null || typeof value !== "object" || !("default" in value)) return false;
+  return value.__esModule === true || Object.prototype.toString.call(value) === "[object Module]";
+}
+
+// src/adapters/grapesjs/GrapesJsAdapter.js
+var ENGINE_NAME = "grapesjs-mjml";
+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", "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")])
+};
+async function defaultLoadEngine(locale) {
+  const loadLocales = Object.prototype.hasOwnProperty.call(ENGINE_LOCALES, locale) ? ENGINE_LOCALES[locale] : null;
+  const [grapesjs, mjml, localeModules] = await Promise.all([
+    import("grapesjs"),
+    import("grapesjs-mjml"),
+    loadLocales ? loadLocales() : Promise.resolve(null)
+  ]);
+  return {
+    grapesjs: unwrapModule(grapesjs),
+    mjmlPlugin: unwrapModule(mjml),
+    locales: localeModules ? { engine: unwrapModule(localeModules[0]), mjml: unwrapModule(localeModules[1]) } : {}
+  };
+}
+var ENGINE_SVG = /^\s*<svg[\s>]/i;
+var PLACEHOLDER_SRC_ATTR = new RegExp(
+  `\\ssrc="(?:${IMAGE_PLACEHOLDER.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}|\\s*<svg[\\s\\S]*?<\\/svg>\\s*)"`,
+  "g"
+);
+var PLACEHOLDER_SRC_STYLE = /src:\s*<svg[\s\S]*?<\/svg>;?/gi;
+function isEnginePlaceholder(value) {
+  return typeof value === "string" && (value === IMAGE_PLACEHOLDER || ENGINE_SVG.test(value));
+}
+function withoutPlaceholders(node) {
+  if (Array.isArray(node)) return node.map(withoutPlaceholders);
+  if (!node || typeof node !== "object") return node;
+  const out = {};
+  for (const [key, value] of Object.entries(node)) {
+    if (key === "src" && isEnginePlaceholder(value)) out[key] = "";
+    else if (key === "style" && typeof value === "string") {
+      out[key] = value.replace(PLACEHOLDER_SRC_STYLE, "").split(`src:${IMAGE_PLACEHOLDER};`).join("");
+    } else out[key] = withoutPlaceholders(value);
+  }
+  return out;
+}
+function escapeHtml(text) {
+  return String(text ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function insertAtCaret(ed, html) {
+  const view = ed.getEditing()?.view;
+  const rte = view?.activeRte;
+  if (!view || typeof rte?.insertHTML !== "function") return false;
+  rte.insertHTML(html);
+  view.onInput?.();
+  void view.syncContent?.();
+  return true;
+}
+function createGrapesJsAdapter({ locale = "en", loadEngine = defaultLoadEngine } = {}) {
+  let editor = null;
+  let host = null;
+  let emit = () => {
+  };
+  let generation = 0;
+  let selectionQueued = false;
+  let loading = false;
+  function muteUntilFlushed() {
+    loading = true;
+    setTimeout(() => {
+      loading = false;
+    }, 0);
+  }
+  function requireEditor() {
+    if (!editor) throw new Error("GrapesJsAdapter: engine not initialized");
+    return editor;
+  }
+  function byId(id) {
+    const all = requireEditor().Components.allById();
+    return all[id] || null;
+  }
+  function typeOf(component) {
+    return component ? String(component.get("type") || "") : "";
+  }
+  function body() {
+    const ed = requireEditor();
+    return ed.getWrapper().findType("mj-body")[0] || null;
+  }
+  function closest(component, types) {
+    let current = component;
+    while (current) {
+      if (types.includes(typeOf(current))) return current;
+      current = current.parent();
+    }
+    return null;
+  }
+  function attributesOf(component) {
+    const out = {};
+    for (const [key, value] of Object.entries(component.getAttributes() || {})) {
+      if (key === "style" || key === "id" || value === void 0 || value === null) continue;
+      out[key] = String(value);
+    }
+    if (component.get("src") !== void 0) out.src = String(component.get("src") || "");
+    if (isEnginePlaceholder(out.src)) out.src = "";
+    return out;
+  }
+  function describe(component) {
+    if (!component) return null;
+    const type = typeOf(component);
+    const parent = component.parent();
+    const index = parent ? parent.components().indexOf(component) : -1;
+    const siblings = parent ? parent.components().length : 0;
+    const locked = LOCKED_TYPES.has(type);
+    return {
+      id: component.getId(),
+      tagName: type,
+      attributes: attributesOf(component),
+      content: LABEL_TYPES.has(type) ? textOf(component) : null,
+      canRemove: !locked && component.get("removable") !== false,
+      canDuplicate: !locked && component.get("copyable") !== false,
+      canMoveUp: !locked && index > 0,
+      canMoveDown: !locked && index >= 0 && index < siblings - 1
+    };
+  }
+  function textOf(component) {
+    const html = component.getInnerHTML ? component.getInnerHTML() : "";
+    return String(html).replace(/<br\s*\/?>/gi, " ").replace(/<[^>]*>/g, "").replace(/&nbsp;/g, " ").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").trim();
+  }
+  function queueSelection() {
+    if (selectionQueued) return;
+    selectionQueued = true;
+    queueMicrotask(() => {
+      selectionQueued = false;
+      if (editor) emit("selection", describe(editor.getSelected()));
+    });
+  }
+  function emitHistory() {
+    if (!editor) return;
+    const um = editor.UndoManager;
+    emit("history", { canUndo: um.hasUndo(), canRedo: um.hasRedo() });
+  }
+  function firstOf(added) {
+    return Array.isArray(added) ? added[0] : added;
+  }
+  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 afterSection = () => {
+      if (section && section.parent()) {
+        const coll = section.parent().components();
+        return { collection: coll, at: coll.indexOf(section) + 1, wrap: false };
+      }
+      return { collection: root.components(), at: root.components().length, wrap: false };
+    };
+    if (block.kind === "layout") return afterSection();
+    const type = typeOf(target);
+    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) {
+      let child = target;
+      while (child.parent() && child.parent() !== column) child = child.parent();
+      const coll = column.components();
+      return { collection: coll, at: coll.indexOf(child) + 1, wrap: false };
+    }
+    return { ...afterSection(), wrap: true };
+  }
+  const adapter = {
+    name: ENGINE_NAME,
+    version: ENGINE_VERSION,
+    get engine() {
+      return editor;
+    },
+    async initialize({ container, blocks: blockList, document, onEvent }) {
+      if (editor) throw new Error("GrapesJsAdapter: already initialized");
+      const ticket = ++generation;
+      const { grapesjs, mjmlPlugin, locales } = await loadEngine(locale);
+      if (ticket !== generation) return;
+      emit = onEvent;
+      host = createEngineHost(container);
+      const instance = grapesjs.init(buildEngineConfig({ container: host, mjmlPlugin, locales, locale }));
+      editor = instance;
+      await new Promise((resolve) => instance.onReady(() => resolve(void 0)));
+      if (ticket !== generation) return;
+      for (const block of blockList) {
+        if (!block.mjml) continue;
+        instance.Blocks.add(`${BLOCK_PREFIX}${block.id}`, {
+          label: block.label,
+          content: block.mjml,
+          activate: true,
+          select: true
+        });
+      }
+      muteUntilFlushed();
+      if (document) instance.loadProjectData(document.project);
+      else instance.setComponents(EMPTY_MJML);
+      instance.UndoManager.clear();
+      instance.on("update", () => {
+        if (!loading) emit("change");
+        emitHistory();
+      });
+      instance.on("undo", emitHistory);
+      instance.on("redo", emitHistory);
+      instance.on("component:toggled", queueSelection);
+      instance.on("component:update", (component) => {
+        if (component && component === instance.getSelected()) queueSelection();
+      });
+      instance.on("change:device", () => emit("device", adapter.getDevice()));
+      emitHistory();
+    },
+    destroy() {
+      generation += 1;
+      if (editor) {
+        try {
+          editor.destroy();
+        } catch (error) {
+          console.warn("[best-email-builder] engine destroy failed", error);
+        }
+      }
+      editor = null;
+      if (host?.parentNode) host.parentNode.removeChild(host);
+      host = null;
+      emit = () => {
+      };
+    },
+    addBlock(block, { targetId = null } = {}) {
+      const ed = requireEditor();
+      if (!block.mjml) return null;
+      const target = targetId ? byId(targetId) : ed.getSelected();
+      const { collection, at, wrap } = placementFor(block, target);
+      const source = wrap ? block.sectionMjml || `<mj-section><mj-column>${block.mjml}</mj-column></mj-section>` : block.mjml;
+      const added = firstOf(collection.add(source, { at }));
+      if (!added) return null;
+      const focus = wrap ? added.findType(block.tagName)[0] || added : added;
+      ed.select(focus);
+      return focus.getId();
+    },
+    remove(id) {
+      const component = byId(id);
+      if (!component || LOCKED_TYPES.has(typeOf(component))) return false;
+      if (component.get("removable") === false) return false;
+      const ed = requireEditor();
+      if (ed.getSelected() === component) ed.select(null);
+      component.remove();
+      return true;
+    },
+    duplicate(id) {
+      const component = byId(id);
+      if (!component || LOCKED_TYPES.has(typeOf(component)) || !component.parent()) return null;
+      const collection = component.parent().components();
+      const copy = firstOf(collection.add(component.clone(), { at: collection.indexOf(component) + 1 }));
+      if (!copy) return null;
+      requireEditor().select(copy);
+      return copy.getId();
+    },
+    move(id, direction) {
+      const component = byId(id);
+      if (!component || LOCKED_TYPES.has(typeOf(component))) return false;
+      const parent = component.parent();
+      if (!parent) return false;
+      const index = parent.components().indexOf(component);
+      const to = index + direction;
+      if (to < 0 || to >= parent.components().length) return false;
+      component.move(parent, { at: direction > 0 ? to + 1 : to });
+      requireEditor().select(component);
+      queueSelection();
+      return true;
+    },
+    select(id) {
+      const ed = requireEditor();
+      ed.select(id ? byId(id) : null);
+    },
+    getSelection() {
+      return editor ? describe(editor.getSelected()) : null;
+    },
+    describe(id) {
+      return editor ? describe(byId(id)) : null;
+    },
+    getRootId() {
+      return editor ? body()?.getId() || null : null;
+    },
+    updateProperties(id, attributes) {
+      const component = byId(id);
+      if (!component) return;
+      const toSet = {};
+      const toRemove = [];
+      for (const [key, value] of Object.entries(attributes || {})) {
+        if (key === "src" && component.get("src") !== void 0) {
+          component.set("src", value || "");
+        } else if (value === null || value === void 0 || value === "") {
+          toRemove.push(key);
+        } else {
+          toSet[key] = String(value);
+        }
+      }
+      if (Object.keys(toSet).length) component.addAttributes(toSet);
+      if (toRemove.length) {
+        component.removeStyle?.(toRemove);
+        component.removeAttributes(toRemove);
+      }
+      queueSelection();
+    },
+    setContent(id, content) {
+      const component = byId(id);
+      if (!component) return;
+      if (LABEL_TYPES.has(typeOf(component))) {
+        component.components(escapeHtml(content));
+      } else if (RICH_TYPES.has(typeOf(component))) {
+        component.components(String(content || ""));
+      }
+      queueSelection();
+    },
+    insertText(text) {
+      const ed = requireEditor();
+      if (insertAtCaret(ed, escapeHtml(text))) return true;
+      const target = ed.getSelected();
+      if (target && RICH_TYPES.has(typeOf(target))) {
+        target.append({ type: "textnode", content: ` ${text}` });
+        queueSelection();
+        return true;
+      }
+      return false;
+    },
+    insertLink(href, label) {
+      const ed = requireEditor();
+      const safeHref = escapeHtml(href).replace(/"/g, "&quot;");
+      const html = `<a href="${safeHref}">${escapeHtml(label)}</a>`;
+      if (insertAtCaret(ed, html)) return true;
+      const target = ed.getSelected();
+      if (target && typeOf(target) === "mj-button") {
+        target.addAttributes({ href });
+        queueSelection();
+        return true;
+      }
+      if (target && typeOf(target) === "mj-text") {
+        target.append(` ${html}`);
+        queueSelection();
+        return true;
+      }
+      return false;
+    },
+    undo() {
+      requireEditor().UndoManager.undo();
+      emitHistory();
+    },
+    redo() {
+      requireEditor().UndoManager.redo();
+      emitHistory();
+    },
+    canUndo: () => Boolean(editor?.UndoManager.hasUndo()),
+    canRedo: () => Boolean(editor?.UndoManager.hasRedo()),
+    clearHistory() {
+      requireEditor().UndoManager.clear();
+      emitHistory();
+    },
+    getProject() {
+      return withoutPlaceholders(requireEditor().getProjectData());
+    },
+    loadProject(project) {
+      const ed = requireEditor();
+      ed.select(null);
+      muteUntilFlushed();
+      ed.loadProjectData(project);
+      emit("load");
+      queueSelection();
+    },
+    loadMjml(mjml) {
+      const ed = requireEditor();
+      ed.select(null);
+      muteUntilFlushed();
+      ed.setComponents(mjml || EMPTY_MJML);
+      emit("load");
+      queueSelection();
+    },
+    exportMjml() {
+      return String(requireEditor().runCommand("mjml-code") || "").replace(PLACEHOLDER_SRC_ATTR, "").trim();
+    },
+    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) => ({
+          line: e.line,
+          message: String(e.formattedMessage || e.message || e),
+          tagName: e.tagName
+        }))
+      };
+    },
+    setDevice(device) {
+      requireEditor().setDevice(device);
+    },
+    getDevice() {
+      const name = editor?.getDevice?.();
+      return name === "mobile" ? "mobile" : "desktop";
+    },
+    startBlockDrag(block, event) {
+      const ed = requireEditor();
+      const engineBlock = ed.Blocks.get(`${BLOCK_PREFIX}${block.id}`);
+      if (engineBlock) ed.Blocks.startDrag(engineBlock, event);
+    },
+    endBlockDrag(cancel = false) {
+      editor?.Blocks.endDrag(cancel);
+    },
+    addShortcut(id, keys, handler) {
+      const ed = requireEditor();
+      const keymapId = `eb:${id}`;
+      const engineKeys = keys.split(",").map((k) => k.trim()).flatMap((k) => k.startsWith("mod+") ? [`\u2318+${k.slice(4)}`, `ctrl+${k.slice(4)}`] : [k]).join(", ");
+      ed.Keymaps.add(keymapId, engineKeys, () => handler(), { prevent: true });
+      return () => {
+        if (editor === ed) ed.Keymaps.remove(keymapId);
+      };
+    }
+  };
+  return adapter;
+}
+function createEngineHost(container) {
+  const el = container.ownerDocument.createElement("div");
+  el.className = "eb-engine-host";
+  el.style.height = "100%";
+  container.appendChild(el);
+  return el;
+}
+
+// src/defaultEditor.js
+function createDefaultEmailEditor(options = {}) {
+  const { locale } = options;
+  return createEmailEditor({
+    adapter: createGrapesJsAdapter({ locale }),
+    blocks: emailBlocks,
+    features: emailBuilderFeatures
+  });
+}
+
+// src/ui/EmailCanvas.jsx
+import { useEffect as useEffect3, useRef as useRef2 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function EmailCanvas({ editor, document = null, onReady, onError, className }) {
+  const ref = useRef2(null);
+  const documentRef = useRef2(document);
+  const callbacks = useRef2({ onReady, onError });
+  callbacks.current = { onReady, onError };
+  useEffect3(() => {
+    if (!editor || !ref.current) return void 0;
+    let alive = true;
+    editor.initialize({ container: ref.current, document: documentRef.current }).then(() => {
+      if (alive && editor.status === "ready") callbacks.current.onReady?.(editor);
+    }).catch((error) => {
+      if (alive) callbacks.current.onError?.(error);
+    });
+    return () => {
+      alive = false;
+      editor.destroy();
+    };
+  }, [editor]);
+  return /* @__PURE__ */ jsx7("div", { ref, className: cn("eb-canvas eb:h-full eb:w-full", className), "data-testid": "eb-canvas" });
+}
+
+// src/ui/EmailBuilder.jsx
+import { useCallback as useCallback2, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef6, useState as useState11 } from "react";
+import { AlertTriangle, Loader2 as Loader24, Plus as Plus2, Save, SlidersHorizontal } from "lucide-react";
+
+// src/features/autosave/scheduler.js
+function createAutosaveScheduler({
+  run,
+  idleMs = 2e4,
+  maxWaitMs = 12e4,
+  now = () => Date.now(),
+  setTimer = (fn, ms) => setTimeout(fn, ms),
+  clearTimer = (handle) => clearTimeout(handle)
+}) {
+  let firstChangeAt = null;
+  let handle = null;
+  let disposed = false;
+  function clear() {
+    if (handle !== null) clearTimer(handle);
+    handle = null;
+  }
+  function fire() {
+    handle = null;
+    firstChangeAt = null;
+    if (!disposed) run();
+  }
+  return {
+    notify() {
+      if (disposed) return;
+      const at = now();
+      if (firstChangeAt === null) firstChangeAt = at;
+      const remainingMax = Math.max(0, firstChangeAt + maxWaitMs - at);
+      clear();
+      handle = setTimer(fire, Math.min(idleMs, remainingMax));
+    },
+    reset() {
+      clear();
+      firstChangeAt = null;
+    },
+    get pending() {
+      return handle !== null;
+    },
+    dispose() {
+      disposed = true;
+      clear();
+    }
+  };
+}
+
+// src/features/autosave/localDraft.js
+var KEY2 = "best-email-builder:new-template-draft";
+var MAX_AGE_MS = 7 * 24 * 60 * 60 * 1e3;
+function usable(store) {
+  return store && typeof store.getItem === "function" ? store : null;
+}
+function defaultStore() {
+  try {
+    return typeof window !== "undefined" ? window.localStorage : null;
+  } catch {
+    return null;
+  }
+}
+function saveLocalDraft({ document, meta }, store = defaultStore()) {
+  const target = usable(store);
+  if (!target) return false;
+  try {
+    target.setItem(KEY2, JSON.stringify({ savedAt: Date.now(), document, meta }));
+    return true;
+  } catch {
+    return false;
+  }
+}
+function readLocalDraft(store = defaultStore(), { now = Date.now() } = {}) {
+  const target = usable(store);
+  if (!target) return null;
+  try {
+    const raw = target.getItem(KEY2);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (!parsed || now - Number(parsed.savedAt) > MAX_AGE_MS) {
+      target.removeItem(KEY2);
+      return null;
+    }
+    return { savedAt: Number(parsed.savedAt), document: readDocument(parsed.document), meta: parsed.meta || {} };
+  } catch {
+    target.removeItem(KEY2);
+    return null;
+  }
+}
+function clearLocalDraft(store = defaultStore()) {
+  try {
+    usable(store)?.removeItem(KEY2);
+  } catch {
+  }
+}
+
+// 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 jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var ICONS = {
+  Heading,
+  Type,
+  Share2,
+  Menu,
+  Columns4,
+  LayoutPanelLeft,
+  GalleryHorizontal,
+  Image: ImageIcon,
+  RectangleHorizontal,
+  SeparatorHorizontal,
+  MoveVertical,
+  Square,
+  Columns2,
+  Columns3
+};
+var GROUPS2 = [
+  { kind: "content", title: "Content" },
+  { kind: "layout", title: "Layout" }
+];
+function BlockTile({ block, disabled, onAdd, onDragStart, onDragEnd }) {
+  const t = useT();
+  const Icon = ICONS[block.icon] || Square;
+  return /* @__PURE__ */ jsx8(TooltipWrap, { label: block.description ? t(block.description) : block.description, children: /* @__PURE__ */ jsxs7(
+    "button",
+    {
+      type: "button",
+      draggable: !disabled,
+      disabled,
+      onClick: () => onAdd(block.id),
+      onDragStart: (e) => {
+        e.dataTransfer.effectAllowed = "copy";
+        e.dataTransfer.setData("text/plain", block.id);
+        onDragStart(block.id, e.nativeEvent);
+      },
+      onDragEnd: (e) => onDragEnd(e.dataTransfer?.dropEffect === "none"),
+      "data-block-id": block.id,
+      className: cn(
+        "eb:flex eb:h-20 eb:cursor-grab eb:select-none eb:flex-col eb:items-center eb:justify-center eb:gap-1.5 eb:rounded-lg2 eb:border eb:border-border eb:bg-background eb:px-2 eb:text-center eb:transition-colors eb:active:cursor-grabbing",
+        "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",
+        disabled && "eb:cursor-not-allowed eb:opacity-50"
+      ),
+      children: [
+        /* @__PURE__ */ jsx8(Icon, { className: "eb:h-5 eb:w-5 eb:text-foreground-lighter", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx8("span", { className: "eb:text-[12px] eb:text-foreground", children: t(block.label) })
+      ]
+    }
+  ) });
+}
+function BlockSidebar({ editor, disabled = false, onAdded }) {
+  const t = useT();
+  const blocks = editor.listBlocks();
+  return /* @__PURE__ */ jsx8("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__ */ jsxs7("section", { className: "eb:space-y-2", children: [
+      /* @__PURE__ */ jsx8(SectionLabel, { children: t(group.title) }),
+      /* @__PURE__ */ jsx8("div", { className: "eb:grid eb:grid-cols-2 eb:gap-2", children: items.map((block) => /* @__PURE__ */ jsx8(
+        BlockTile,
+        {
+          block,
+          disabled,
+          onAdd: (id) => {
+            if (editor.addBlock(id)) onAdded?.(id);
+          },
+          onDragStart: (id, event) => editor.startBlockDrag(id, event),
+          onDragEnd: (cancel) => editor.endBlockDrag(cancel)
+        },
+        block.id
+      )) })
+    ] }, group.kind);
+  }) });
+}
+
+// src/ui/ElementActions.jsx
+import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Copy, Trash2 as Trash22 } from "lucide-react";
+import { jsx as jsx9, jsxs as jsxs8 } 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__ */ jsxs8("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__ */ jsx9(TooltipWrap, { label: prevLabel, children: /* @__PURE__ */ jsx9(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon-sm-compact",
+        "aria-label": prevLabel,
+        disabled: !selection.canMoveUp,
+        onClick: () => editor.move(-1, selection.id),
+        children: /* @__PURE__ */ jsx9(Prev, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx9(TooltipWrap, { label: nextLabel, children: /* @__PURE__ */ jsx9(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon-sm-compact",
+        "aria-label": nextLabel,
+        disabled: !selection.canMoveDown,
+        onClick: () => editor.move(1, selection.id),
+        children: /* @__PURE__ */ jsx9(Next, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx9(TooltipWrap, { label: t("Duplicate"), children: /* @__PURE__ */ jsx9(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon-sm-compact",
+        "aria-label": t("Duplicate"),
+        disabled: !selection.canDuplicate,
+        onClick: () => editor.duplicate(selection.id),
+        children: /* @__PURE__ */ jsx9(Copy, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx9(TooltipWrap, { label: t("Delete (Del)"), children: /* @__PURE__ */ jsx9(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon-sm-compact",
+        "aria-label": t("Delete"),
+        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__ */ jsx9(Trash22, {})
+      }
+    ) })
+  ] });
+}
+
+// src/ui/PropertiesPanel.jsx
+import { useMemo as useMemo4, useRef as useRef4 } from "react";
+import { X } from "lucide-react";
+
+// src/ui/fields.jsx
+import { useEffect as useEffect4, useRef as useRef3, useState as useState8 } from "react";
+
+// src/ui/primitives/color-picker.jsx
+import { useState as useState7 } from "react";
+import { HexAlphaColorPicker } from "react-colorful";
+import { Check } from "lucide-react";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+var PRESET_COLORS = [
+  "#8B5CF6",
+  "#A78BFA",
+  "#6366F1",
+  "#3B82F6",
+  "#06B6D4",
+  "#17A2B8",
+  "#10B981",
+  "#22C55E",
+  "#28A745",
+  "#84CC16",
+  "#EAB308",
+  "#FFC107",
+  "#F59E0B",
+  "#F97316",
+  "#EF4444",
+  "#DC3545",
+  "#EC4899",
+  "#6B7280"
+];
+var FALLBACK_COLOR = "#8B5CF6";
+var isValidHex = (v) => /^#([0-9A-Fa-f]{8}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{4}|[0-9A-Fa-f]{3})$/.test(v || "");
+function normalizeHex(v) {
+  if (!v) return "";
+  let s = v.trim();
+  if (s && !s.startsWith("#")) s = `#${s}`;
+  return s.toUpperCase();
+}
+function ColorPicker({ value, onChange, id, className }) {
+  const t = useT();
+  const [open, setOpen] = useState7(false);
+  const valid = isValidHex(value);
+  const normalized = valid ? normalizeHex(value) : "";
+  const emit = (hex) => onChange(normalizeHex(hex));
+  return /* @__PURE__ */ jsxs9("div", { className: cn("eb:flex eb:gap-2", className), children: [
+    /* @__PURE__ */ jsxs9(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx10(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx10(
+        "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__ */ jsx10("span", { className: "eb:absolute eb:inset-0", style: { backgroundColor: valid ? value : "transparent" }, "aria-hidden": true })
+        }
+      ) }),
+      /* @__PURE__ */ jsxs9(PopoverContent, { align: "start", className: "eb:w-64 eb:space-y-3 eb:p-3", children: [
+        /* @__PURE__ */ jsx10("div", { className: "eb-picker", children: /* @__PURE__ */ jsx10(HexAlphaColorPicker, { color: valid ? value : FALLBACK_COLOR, onChange: emit }) }),
+        /* @__PURE__ */ jsxs9("div", { className: "eb:flex eb:items-center eb:gap-2", children: [
+          /* @__PURE__ */ jsx10(
+            "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__ */ jsx10("span", { className: "eb:absolute eb:inset-0", style: { backgroundColor: valid ? value : "transparent" } })
+            }
+          ),
+          /* @__PURE__ */ jsx10(
+            Input,
+            {
+              value: value || "",
+              onChange: (e) => emit(e.target.value),
+              placeholder: "#RRGGBB",
+              maxLength: 9,
+              "aria-label": t("Hex code"),
+              className: "eb:h-8 eb:flex-1 eb:font-mono eb:text-[12px] eb:uppercase"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx10("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__ */ jsx10(
+          "button",
+          {
+            type: "button",
+            onClick: () => onChange(c),
+            title: c,
+            "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__ */ jsx10(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__ */ jsx10(
+      Input,
+      {
+        id,
+        value: value || "",
+        onChange: (e) => onChange(e.target.value),
+        maxLength: 9,
+        placeholder: "#RRGGBB",
+        className: "eb:h-8 eb:flex-1 eb:font-mono eb:text-[13px]"
+      }
+    )
+  ] });
+}
+
+// src/ui/fields.jsx
+import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Loader2 as Loader23, Upload } from "lucide-react";
+import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+var COLOR_DEBOUNCE_MS = 250;
+function emailColor(value) {
+  const v = String(value || "").trim();
+  if (/^#[0-9a-f]{3}$/i.test(v) || /^#[0-9a-f]{6}$/i.test(v)) return v.toLowerCase();
+  if (/^#[0-9a-f]{8}$/i.test(v)) return v.slice(0, 7).toLowerCase();
+  return null;
+}
+function useDraft(value, toDraft) {
+  const [draft, setDraft] = useState8(() => toDraft(value));
+  const ref = useRef3(null);
+  const convert = useRef3(toDraft);
+  convert.current = toDraft;
+  useEffect4(() => {
+    const el = ref.current;
+    const focused = el && el.ownerDocument?.activeElement && el.contains(el.ownerDocument.activeElement);
+    if (!focused) setDraft(convert.current(value));
+  }, [value]);
+  return [draft, setDraft, ref];
+}
+var asText = (v) => v || "";
+function FieldLabel({ id, children }) {
+  return /* @__PURE__ */ jsx11(Label, { htmlFor: id, className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children });
+}
+function FieldError({ children }) {
+  return children ? /* @__PURE__ */ jsx11("p", { className: "eb:text-[12px] eb:text-destructive", children }) : null;
+}
+function TextField({ id, property, value, onCommit, addon = null, error = null }) {
+  const t = useT();
+  const [draft, setDraft, ref] = useDraft(value, asText);
+  const isUrl = property.type === "url" || property.type === "image";
+  const kind = property.type === "image" ? "image" : "link";
+  const invalid = isUrl && draft.trim() !== "" && !isSafeUrl(draft, kind);
+  const commit = () => {
+    const next = draft.trim();
+    if (invalid || next === (value || "")) return;
+    onCommit(next || null);
+  };
+  const keyDown = (e) => {
+    if (e.key === "Escape") {
+      setDraft(value || "");
+      e.currentTarget.blur();
+    } else if (e.key === "Enter" && property.type !== "textarea") {
+      e.preventDefault();
+      commit();
+    }
+  };
+  const shared = {
+    id,
+    value: draft,
+    placeholder: property.placeholder ? t(property.placeholder) : property.placeholder,
+    onChange: (e) => setDraft(e.target.value),
+    onBlur: commit,
+    onKeyDown: keyDown,
+    "aria-invalid": invalid || void 0
+  };
+  return /* @__PURE__ */ jsxs10("div", { ref, className: "eb:space-y-1.5", children: [
+    /* @__PURE__ */ jsx11(FieldLabel, { id, children: t(property.label) }),
+    property.type === "textarea" ? /* @__PURE__ */ jsx11(Textarea, { rows: 3, ...shared }) : addon ? /* @__PURE__ */ jsxs10("div", { className: "eb:flex eb:gap-2", children: [
+      /* @__PURE__ */ jsx11(Input, { ...shared, className: "eb:min-w-0 eb:flex-1" }),
+      addon
+    ] }) : /* @__PURE__ */ jsx11(Input, { ...shared }),
+    /* @__PURE__ */ jsx11(FieldError, { children: invalid ? kind === "image" ? t("An https:// address is required") : t("Address not allowed") : error })
+  ] });
+}
+function ImageField({ id, property, value, onCommit, services }) {
+  const t = useT();
+  const inputRef = useRef3(
+    /** @type {HTMLInputElement|null} */
+    null
+  );
+  const [busy, setBusy] = useState8(false);
+  const [error, setError] = useState8(
+    /** @type {string|null} */
+    null
+  );
+  const upload = services?.uploadImage;
+  const pick = async (event) => {
+    const file = event.target.files?.[0];
+    event.target.value = "";
+    if (!file || !upload) return;
+    const refused = imageUploadError(file, { t });
+    setError(refused);
+    if (refused) return;
+    setBusy(true);
+    try {
+      const { path } = await upload(file);
+      onCommit(path);
+    } catch (err) {
+      setError(err?.message || t("Upload failed"));
+    } finally {
+      setBusy(false);
+    }
+  };
+  const addon = upload ? /* @__PURE__ */ jsxs10(Fragment4, { children: [
+    /* @__PURE__ */ jsx11(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept: "image/png,image/jpeg,image/gif",
+        className: "eb:sr-only",
+        tabIndex: -1,
+        "aria-hidden": "true",
+        "data-testid": `${id}-file`,
+        onChange: pick
+      }
+    ),
+    /* @__PURE__ */ jsxs10(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        disabled: busy,
+        onClick: () => inputRef.current?.click(),
+        children: [
+          busy ? /* @__PURE__ */ jsx11(Loader23, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx11(Upload, {}),
+          t("Upload")
+        ]
+      }
+    )
+  ] }) : null;
+  return /* @__PURE__ */ jsx11(TextField, { id, property, value, onCommit, addon, error });
+}
+var asNumber = (v) => {
+  const n = Number.parseFloat(String(v || ""));
+  return Number.isFinite(n) ? String(n) : "";
+};
+function SizeField({ id, property, value, onCommit }) {
+  const t = useT();
+  const [draft, setDraft, ref] = useDraft(value, asNumber);
+  const commit = (raw = draft) => {
+    if (String(raw).trim() === "") {
+      if (value) onCommit(null);
+      return;
+    }
+    let n = Number.parseFloat(String(raw));
+    if (!Number.isFinite(n)) return;
+    if (property.min !== void 0) n = Math.max(property.min, n);
+    if (property.max !== void 0) n = Math.min(property.max, n);
+    setDraft(String(n));
+    const next = `${n}${property.unit || "px"}`;
+    if (next !== value) onCommit(next);
+  };
+  return /* @__PURE__ */ jsxs10("div", { ref, className: "eb:space-y-1.5", children: [
+    /* @__PURE__ */ jsx11(FieldLabel, { id, children: t(property.label) }),
+    /* @__PURE__ */ jsxs10("div", { className: "eb:relative", children: [
+      /* @__PURE__ */ jsx11(
+        Input,
+        {
+          id,
+          type: "number",
+          inputMode: "numeric",
+          min: property.min,
+          max: property.max,
+          value: draft,
+          onChange: (e) => setDraft(e.target.value),
+          onBlur: () => commit(),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") commit();
+            if (e.key === "Escape") setDraft(asNumber(value));
+          },
+          className: "eb:pr-9 eb:tabular-nums"
+        }
+      ),
+      /* @__PURE__ */ jsx11("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" })
+    ] })
+  ] });
+}
+function ColorField({ id, property, value, onCommit }) {
+  const t = useT();
+  const [draft, setDraft, ref] = useDraft(value, asText);
+  const timer = useRef3(null);
+  const latest = useRef3({ value, onCommit });
+  latest.current = { value, onCommit };
+  useEffect4(() => () => clearTimeout(timer.current), []);
+  const change = (next) => {
+    setDraft(next);
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
+      const color = emailColor(next);
+      if (!String(next || "").trim()) {
+        if (latest.current.value) latest.current.onCommit(null);
+      } else if (color && color !== latest.current.value) {
+        latest.current.onCommit(color);
+      }
+    }, COLOR_DEBOUNCE_MS);
+  };
+  return /* @__PURE__ */ jsxs10("div", { ref, className: "eb:space-y-1.5", children: [
+    /* @__PURE__ */ jsx11(FieldLabel, { id, children: t(property.label) }),
+    /* @__PURE__ */ jsx11(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__ */ jsxs10("div", { className: "eb:space-y-1.5", children: [
+    /* @__PURE__ */ jsx11(FieldLabel, { id, children: t(property.label) }),
+    /* @__PURE__ */ jsxs10(
+      Select,
+      {
+        value: current,
+        onValueChange: (next) => {
+          const v = next === DEFAULT_OPTION ? "" : next;
+          if (v !== (value || "")) onCommit(v || null);
+        },
+        children: [
+          /* @__PURE__ */ jsx11(SelectTrigger, { id, className: "eb:w-full", children: /* @__PURE__ */ jsx11(SelectValue, { placeholder: t("Default") }) }),
+          /* @__PURE__ */ jsxs10(SelectContent, { children: [
+            !(property.options || []).some((o) => !o.value) && /* @__PURE__ */ jsx11(SelectItem, { value: DEFAULT_OPTION, children: t("Default") }),
+            (property.options || []).map((o) => /* @__PURE__ */ jsx11(SelectItem, { value: o.value || DEFAULT_OPTION, children: t(o.label) }, o.value || DEFAULT_OPTION))
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+var ALIGN_ICONS = { left: AlignLeft, center: AlignCenter, right: AlignRight, justify: AlignJustify };
+function AlignField({ id, property, value, onCommit }) {
+  const t = useT();
+  return /* @__PURE__ */ jsxs10("div", { className: "eb:space-y-1.5", children: [
+    /* @__PURE__ */ jsx11(FieldLabel, { id, children: t(property.label) }),
+    /* @__PURE__ */ jsx11(
+      "div",
+      {
+        id,
+        role: "radiogroup",
+        "aria-label": t(property.label),
+        className: "eb:flex eb:w-fit eb:items-center eb:gap-0.5 eb:rounded-lg2 eb:border eb:border-border-strong eb:bg-surface-75 eb:p-0.5",
+        children: (property.options || []).map((option) => {
+          const Icon = ALIGN_ICONS[option.value] || AlignLeft;
+          const active = value === option.value;
+          return /* @__PURE__ */ jsx11(TooltipWrap, { label: t(option.label), children: /* @__PURE__ */ jsx11(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": active,
+              "aria-label": t(option.label),
+              onClick: () => !active && onCommit(option.value),
+              className: cn(
+                "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__ */ jsx11(Icon, { className: "eb:h-3.5 eb:w-3.5" })
+            }
+          ) }, option.value);
+        })
+      }
+    )
+  ] });
+}
+var SIDE_LABELS = [
+  ["top", "Top"],
+  ["right", "Right"],
+  ["bottom", "Bottom"],
+  ["left", "Left"]
+];
+var asSides = (v) => parseSpacing(v || "").map((s) => String(Number.parseFloat(s) || 0));
+function SpacingField({ id, property, value, onCommit }) {
+  const t = useT();
+  const [draft, setDraft, ref] = useDraft(value, asSides);
+  const commit = (sides = draft) => {
+    const next = formatSpacing(sides.map((s) => `${Math.max(0, Math.min(200, Number.parseFloat(s) || 0))}px`));
+    if (next !== (value || "")) onCommit(next);
+  };
+  return /* @__PURE__ */ jsxs10("fieldset", { ref, className: "eb:space-y-1.5", children: [
+    /* @__PURE__ */ jsx11("legend", { className: "eb:mb-1.5 eb:text-[12px] eb:text-foreground-lighter", children: t(property.label) }),
+    /* @__PURE__ */ jsx11("div", { className: "eb:grid eb:grid-cols-4 eb:gap-1.5", children: SIDE_LABELS.map(([side, label], i) => /* @__PURE__ */ jsxs10("div", { className: "eb:space-y-1", children: [
+      /* @__PURE__ */ jsx11(
+        Input,
+        {
+          id: `${id}-${side}`,
+          type: "number",
+          min: 0,
+          max: 200,
+          "aria-label": t("{label} \u2014 {side}", { label: t(property.label), side: t(label) }),
+          title: t(label),
+          value: draft[i],
+          onChange: (e) => setDraft((d) => d.map((v, j) => j === i ? e.target.value : v)),
+          onBlur: () => commit(),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") commit();
+          },
+          className: "eb:px-2 eb:text-center eb:tabular-nums"
+        }
+      ),
+      /* @__PURE__ */ jsx11("span", { className: "eb:block eb:text-center eb:text-[10.5px] eb:text-foreground-muted", children: t(label) })
+    ] }, side)) })
+  ] });
+}
+var FIELDS = {
+  text: TextField,
+  textarea: TextField,
+  url: TextField,
+  image: ImageField,
+  size: SizeField,
+  color: ColorField,
+  select: SelectField,
+  align: AlignField,
+  spacing: SpacingField
+};
+function PropertyField({ property, value, onCommit, idPrefix = "eb", services = null }) {
+  const Field = FIELDS[property.type] || TextField;
+  const id = `${idPrefix}-${property.key}`;
+  return /* @__PURE__ */ jsx11(Field, { id, property, value, onCommit, services });
+}
+
+// src/features/variables/VariableInsertButton.jsx
+import { useState as useState9 } from "react";
+import { Braces as Braces3 } from "lucide-react";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+function VariableInsertButton({ variables, inputRef, value, onChange, label }) {
+  const [open, setOpen] = useState9(false);
+  const insert = (variable) => {
+    const input = inputRef.current;
+    const text = String(value || "");
+    const token = tokenOf(variable);
+    const start = input?.selectionStart ?? text.length;
+    const end = input?.selectionEnd ?? text.length;
+    const next = `${text.slice(0, start)}${token}${text.slice(end)}`;
+    onChange(next);
+    setOpen(false);
+    requestAnimationFrame(() => {
+      if (!input) return;
+      input.focus();
+      input.setSelectionRange(start + token.length, start + token.length);
+    });
+  };
+  return /* @__PURE__ */ jsxs11(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx12(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx12(Button, { variant: "ghost", size: "icon-xs", "aria-label": label, title: label, children: /* @__PURE__ */ jsx12(Braces3, {}) }) }),
+    /* @__PURE__ */ jsx12(PopoverContent, { align: "end", className: "eb:w-72 eb:p-0", onCloseAutoFocus: (e) => e.preventDefault(), children: /* @__PURE__ */ jsx12(VariablePicker, { variables, onPick: insert, filter: (v) => v.kind !== "link" }) })
+  ] });
+}
+
+// src/ui/PropertiesPanel.jsx
+import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+var GROUP_ORDER = Object.values(GROUPS);
+function grouped(properties) {
+  const map = /* @__PURE__ */ new Map();
+  for (const property of properties) {
+    if (!map.has(property.group)) map.set(property.group, []);
+    map.get(property.group).push(property);
+  }
+  return [...map.entries()].sort(
+    ([a], [b]) => (GROUP_ORDER.indexOf(a) + 1 || 99) - (GROUP_ORDER.indexOf(b) + 1 || 99)
+  );
+}
+function PropertyGroups({ editor, element, block, idPrefix, services = null }) {
+  const t = useT();
+  return grouped(block?.properties || []).map(([group, properties]) => /* @__PURE__ */ jsxs12("section", { className: "eb:space-y-3", children: [
+    /* @__PURE__ */ jsx13(SectionLabel, { children: t(group) }),
+    properties.map((property) => /* @__PURE__ */ jsx13(
+      PropertyField,
+      {
+        idPrefix,
+        property,
+        value: element.values[property.key],
+        services,
+        onCommit: (value) => editor.updateProperties({ [property.key]: value }, element.id)
+      },
+      `${element.id}:${property.key}`
+    ))
+  ] }, group));
+}
+var LABEL_PROPERTY = { key: "content", label: "Label", type: "text", group: GROUPS.content };
+function PanelHeader({ title, onClose, closeLabel = "Deselect" }) {
+  const t = useT();
+  return /* @__PURE__ */ jsxs12("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__ */ jsx13("h3", { className: "eb:min-w-0 eb:flex-1 eb:text-[13px] eb:font-medium eb:text-foreground", children: /* @__PURE__ */ jsx13(TruncatedText, { children: title }) }),
+    onClose && /* @__PURE__ */ jsx13(Button, { variant: "ghost", size: "icon-sm-compact", onClick: onClose, "aria-label": t(closeLabel), children: /* @__PURE__ */ jsx13(X, {}) })
+  ] });
+}
+function TemplateSettings({ editor, meta, onMetaChange, changes, showErrors, variables = null, onDismiss = null }) {
+  const t = useT();
+  const subjectRef = useRef4(null);
+  const preheaderRef = useRef4(null);
+  const rootId = editor.getRootId();
+  const root = useMemo4(() => 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__ */ jsxs12(Fragment5, { children: [
+    /* @__PURE__ */ jsx13(PanelHeader, { title: t("Email"), onClose: onDismiss, closeLabel: "Close" }),
+    /* @__PURE__ */ jsxs12("div", { className: "eb:space-y-5 eb:p-4", children: [
+      /* @__PURE__ */ jsxs12("section", { className: "eb:space-y-3", children: [
+        /* @__PURE__ */ jsx13(SectionLabel, { children: t("Template") }),
+        /* @__PURE__ */ jsxs12("div", { className: "eb:space-y-1.5", children: [
+          /* @__PURE__ */ jsxs12(Label, { htmlFor: "eb-meta-name", className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children: [
+            t("Name"),
+            " ",
+            /* @__PURE__ */ jsx13("span", { className: "eb:text-destructive", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx13(
+            Input,
+            {
+              id: "eb-meta-name",
+              maxLength: 200,
+              value: meta.name,
+              onChange: field("name"),
+              "aria-invalid": showErrors && !meta.name.trim() || void 0
+            }
+          ),
+          showErrors && !meta.name.trim() && /* @__PURE__ */ jsx13("p", { className: "eb:text-[12px] eb:text-destructive", children: t("Name is required") })
+        ] }),
+        /* @__PURE__ */ jsxs12("div", { className: "eb:space-y-1.5", children: [
+          /* @__PURE__ */ jsxs12("div", { className: "eb:flex eb:h-6 eb:items-center eb:justify-between", children: [
+            /* @__PURE__ */ jsx13(Label, { htmlFor: "eb-meta-subject", className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children: t("Subject") }),
+            variables && /* @__PURE__ */ jsx13(
+              VariableInsertButton,
+              {
+                variables,
+                inputRef: subjectRef,
+                value: meta.subject,
+                onChange: (subject) => onMetaChange({ ...meta, subject }),
+                label: t("Insert a variable in the subject")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx13(Input, { ref: subjectRef, id: "eb-meta-subject", maxLength: 250, value: meta.subject, onChange: field("subject") })
+        ] }),
+        /* @__PURE__ */ jsxs12("div", { className: "eb:space-y-1.5", children: [
+          /* @__PURE__ */ jsxs12("div", { className: "eb:flex eb:h-6 eb:items-center eb:justify-between", children: [
+            /* @__PURE__ */ jsx13(Label, { htmlFor: "eb-meta-preheader", className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children: t("Preview text") }),
+            variables && /* @__PURE__ */ jsx13(
+              VariableInsertButton,
+              {
+                variables,
+                inputRef: preheaderRef,
+                value: meta.preheader,
+                onChange: (preheader) => onMetaChange({ ...meta, preheader }),
+                label: t("Insert a variable in the preview text")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx13(
+            Textarea,
+            {
+              ref: preheaderRef,
+              id: "eb-meta-preheader",
+              rows: 2,
+              maxLength: 250,
+              value: meta.preheader,
+              onChange: field("preheader"),
+              placeholder: t("Shown after the subject in the inbox")
+            }
+          )
+        ] })
+      ] }),
+      root && bodyBlock2 && /* @__PURE__ */ jsx13(PropertyGroups, { editor, element: root, block: bodyBlock2, idPrefix: "eb-page" })
+    ] })
+  ] });
+}
+function PropertiesPanel({
+  editor,
+  selection,
+  meta,
+  onMetaChange,
+  changes,
+  actions = null,
+  showErrors = false,
+  services = null,
+  variables = null,
+  onDismiss = null
+}) {
+  const t = useT();
+  const block = selection?.blockId ? editor.getBlock(selection.blockId) : null;
+  return /* @__PURE__ */ jsx13("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__ */ jsx13(
+    TemplateSettings,
+    {
+      editor,
+      meta,
+      onMetaChange,
+      changes,
+      showErrors,
+      variables,
+      onDismiss
+    }
+  ) : /* @__PURE__ */ jsxs12(Fragment5, { children: [
+    /* @__PURE__ */ jsx13(
+      PanelHeader,
+      {
+        title: t(selection.label),
+        onClose: onDismiss || (() => editor.select(null)),
+        closeLabel: onDismiss ? "Close" : "Deselect"
+      }
+    ),
+    actions,
+    /* @__PURE__ */ jsxs12("div", { className: "eb:space-y-5 eb:p-4", children: [
+      selection.content !== null && selection.content !== void 0 && /* @__PURE__ */ jsxs12("section", { className: "eb:space-y-3", children: [
+        /* @__PURE__ */ jsx13(SectionLabel, { children: t(GROUPS.content) }),
+        /* @__PURE__ */ jsx13(
+          PropertyField,
+          {
+            idPrefix: "eb-prop",
+            property: LABEL_PROPERTY,
+            value: selection.content || "",
+            onCommit: (value) => editor.setContent(value || "", selection.id)
+          },
+          `${selection.id}:content`
+        )
+      ] }),
+      selection.tagName === "mj-text" && /* @__PURE__ */ jsx13("p", { className: "eb:text-[12px] eb:text-foreground-muted", children: t("Double-click the text to edit it.") }),
+      /* @__PURE__ */ jsx13(PropertyGroups, { editor, element: selection, block, idPrefix: "eb-prop", services })
+    ] })
+  ] }) });
+}
+
+// src/ui/Toolbar.jsx
+import { ArrowLeft as ArrowLeft2, Monitor, Redo2, Smartphone, Undo2 } from "lucide-react";
+import { Fragment as Fragment6, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+function Toolbar({
+  title,
+  status,
+  ready,
+  canUndo,
+  canRedo,
+  onUndo,
+  onRedo,
+  device,
+  onDeviceChange,
+  onBack,
+  actions = null,
+  primary = null,
+  compact = false
+}) {
+  const t = useT();
+  const identity = /* @__PURE__ */ jsxs13(Fragment6, { children: [
+    /* @__PURE__ */ jsxs13(
+      Button,
+      {
+        variant: "ghost",
+        size: compact ? "icon-sm-compact" : "sm-compact",
+        onClick: onBack,
+        "aria-label": compact ? t("Back") : void 0,
+        children: [
+          /* @__PURE__ */ jsx14(ArrowLeft2, {}),
+          !compact && t("Back")
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx14(Separator, { orientation: "vertical", className: "eb:h-5" }),
+    /* @__PURE__ */ jsxs13("div", { className: cn("eb:min-w-0 eb:flex-1", !compact && "eb:max-w-[320px]"), children: [
+      /* @__PURE__ */ jsx14("p", { className: "eb:text-[13px] eb:font-medium eb:text-foreground", children: /* @__PURE__ */ jsx14(TruncatedText, { children: title || t("New template") }) }),
+      /* @__PURE__ */ jsx14("p", { className: "eb:text-[11px] eb:text-foreground-muted", role: "status", "aria-live": "polite", children: status })
+    ] })
+  ] });
+  const editing = /* @__PURE__ */ jsxs13("div", { className: "eb:flex eb:shrink-0 eb:items-center eb:gap-2", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "eb:flex eb:items-center eb:gap-0.5", children: [
+      /* @__PURE__ */ jsx14(TooltipWrap, { label: t("Undo (Ctrl+Z)"), children: /* @__PURE__ */ jsx14(Button, { variant: "ghost", size: "icon-sm-compact", onClick: onUndo, disabled: !ready || !canUndo, "aria-label": t("Undo"), children: /* @__PURE__ */ jsx14(Undo2, {}) }) }),
+      /* @__PURE__ */ jsx14(TooltipWrap, { label: t("Redo (Ctrl+Y)"), children: /* @__PURE__ */ jsx14(Button, { variant: "ghost", size: "icon-sm-compact", onClick: onRedo, disabled: !ready || !canRedo, "aria-label": t("Redo"), children: /* @__PURE__ */ jsx14(Redo2, {}) }) })
+    ] }),
+    /* @__PURE__ */ jsx14(Tabs, { value: device, onValueChange: onDeviceChange, children: /* @__PURE__ */ jsxs13(TabsList, { "aria-label": t("Device"), children: [
+      /* @__PURE__ */ jsxs13(TabsTrigger, { value: "desktop", disabled: !ready, "aria-label": compact ? t("Desktop") : void 0, children: [
+        /* @__PURE__ */ jsx14(Monitor, {}),
+        !compact && t("Desktop")
+      ] }),
+      /* @__PURE__ */ jsxs13(TabsTrigger, { value: "mobile", disabled: !ready, "aria-label": compact ? t("Mobile") : void 0, children: [
+        /* @__PURE__ */ jsx14(Smartphone, {}),
+        !compact && t("Mobile")
+      ] })
+    ] }) })
+  ] });
+  if (compact) {
+    return /* @__PURE__ */ jsxs13("div", { className: "eb:shrink-0 eb:border-b eb:border-border", "data-layout": "compact", children: [
+      /* @__PURE__ */ jsxs13("div", { className: "eb:flex eb:h-12 eb:items-center eb:gap-2 eb:px-2", children: [
+        identity,
+        primary
+      ] }),
+      /* @__PURE__ */ jsxs13("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__ */ jsx14(Separator, { orientation: "vertical", className: "eb:h-5 eb:shrink-0" }),
+        /* @__PURE__ */ jsx14("div", { className: "eb:flex eb:shrink-0 eb:items-center eb:gap-2", children: actions })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs13("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: [
+    identity,
+    editing,
+    /* @__PURE__ */ jsxs13("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 useEffect5 } from "react";
+import { X as X2 } from "lucide-react";
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+function Drawer({ open, side = "left", title, onClose, children, testId, header = true }) {
+  const t = useT();
+  useEffect5(() => {
+    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__ */ jsxs14("div", { className: cn("eb:absolute eb:inset-0 eb:z-20", !open && "eb:hidden"), "data-testid": testId, "data-open": open ? "true" : "false", children: [
+    /* @__PURE__ */ jsx15("div", { className: "eb:absolute eb:inset-0 eb:bg-black/30", onClick: onClose, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs14(
+      "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: [
+          header && /* @__PURE__ */ jsxs14("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__ */ jsx15("h3", { className: "eb:text-[13px] eb:font-medium eb:text-foreground", children: title }),
+            /* @__PURE__ */ jsx15(Button, { variant: "ghost", size: "icon-sm-compact", onClick: onClose, "aria-label": t("Close"), children: /* @__PURE__ */ jsx15(X2, {}) })
+          ] }),
+          /* @__PURE__ */ jsx15("div", { className: "eb:grid eb:min-h-0 eb:flex-1", children })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/ui/useEmailEditorState.js
+import { useCallback, useEffect as useEffect6, useRef as useRef5, useState as useState10 } from "react";
+var DIRTY_CHECK_MS = 150;
+function useEmailEditorState(editor) {
+  const [state, setState] = useState10(() => ({
+    status: editor?.status || "idle",
+    selection: null,
+    canUndo: false,
+    canRedo: false,
+    device: "desktop",
+    changes: 0,
+    dirty: false
+  }));
+  const clean = useRef5(null);
+  const forced = useRef5(false);
+  const timer = useRef5(null);
+  const snapshot = useCallback(() => {
+    try {
+      return editor.status === "ready" ? editor.exportMjml() : null;
+    } catch {
+      return null;
+    }
+  }, [editor]);
+  const markClean = useCallback((saved = null) => {
+    clean.current = saved ?? snapshot();
+    forced.current = false;
+    const current = snapshot();
+    setState((s) => ({ ...s, dirty: current !== null && current !== clean.current }));
+  }, [snapshot]);
+  const checkDirty = useCallback(() => {
+    if (forced.current) return true;
+    const current = snapshot();
+    return current !== null && current !== clean.current;
+  }, [snapshot]);
+  const markDirty = useCallback(() => {
+    forced.current = true;
+    setState((s) => ({ ...s, dirty: true }));
+  }, []);
+  useEffect6(() => {
+    if (!editor) return void 0;
+    const patch = (values) => setState((s) => ({ ...s, ...values }));
+    const measure = () => {
+      clearTimeout(timer.current);
+      timer.current = setTimeout(() => {
+        const current = snapshot();
+        patch({ dirty: forced.current || current !== null && current !== clean.current });
+      }, DIRTY_CHECK_MS);
+    };
+    const offs = [
+      editor.on("ready", () => {
+        clean.current = snapshot();
+        forced.current = false;
+        patch({
+          status: "ready",
+          device: editor.getDevice(),
+          canUndo: editor.canUndo(),
+          canRedo: editor.canRedo(),
+          selection: editor.getSelection(),
+          dirty: false
+        });
+      }),
+      editor.on("destroy", () => patch({ status: "idle", selection: null, canUndo: false, canRedo: false })),
+      editor.on("selection", (selection) => patch({ selection })),
+      editor.on("history", ({ canUndo, canRedo }) => patch({ canUndo, canRedo })),
+      editor.on("device", (device) => patch({ device })),
+      editor.on("change", () => {
+        setState((s) => ({ ...s, changes: s.changes + 1 }));
+        measure();
+      }),
+      editor.on("load", () => {
+        clearTimeout(timer.current);
+        clean.current = snapshot();
+        forced.current = false;
+        setState((s) => ({ ...s, changes: s.changes + 1, dirty: false }));
+      })
+    ];
+    return () => {
+      clearTimeout(timer.current);
+      offs.forEach((off) => off());
+    };
+  }, [editor, snapshot]);
+  return { ...state, markClean, markDirty, checkDirty };
+}
+
+// src/ui/EmailBuilder.jsx
+import { Fragment as Fragment7, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+var EMPTY_META = { name: "", subject: "", preheader: "", description: "" };
+function metaOf(template) {
+  return {
+    name: template?.name || "",
+    subject: template?.subject || "",
+    preheader: template?.preheader || "",
+    description: template?.description || ""
+  };
+}
+var sameMeta = (a, b) => Object.keys(EMPTY_META).every((k) => (a[k] || "") === (b[k] || ""));
+function Builder({
+  editor: injected,
+  storage: injectedStorage,
+  templateId: initialTemplateId,
+  variables: variablesProp,
+  sender,
+  starterMjml,
+  templates: galleryProp,
+  testRecipients,
+  initialMjml,
+  initialMeta,
+  onClose,
+  onSaved,
+  onDirtyChange,
+  dirtyCheckRef,
+  className
+}) {
+  const { t, locale, notify, confirm } = useUi();
+  const editor = useMemo5(() => injected || createDefaultEmailEditor({ locale }), [injected, locale]);
+  const storage = useMemo5(() => injectedStorage || createHttpStorage(), [injectedStorage]);
+  const systemVariables = useMemo5(() => defineVariables(variablesProp || DEFAULT_VARIABLES), [variablesProp]);
+  const [customVariables, setCustomVariables] = useState11([]);
+  const variables = useMemo5(() => mergeVariables(systemVariables, customVariables), [systemVariables, customVariables]);
+  const canManageVariables = typeof storage.saveVariable === "function" && typeof storage.listVariables === "function";
+  const reloadVariables = useCallback2(async () => {
+    if (typeof storage.listVariables !== "function") return;
+    try {
+      setCustomVariables(await storage.listVariables());
+    } catch (error) {
+      notify("error", error.message);
+    }
+  }, [storage, notify]);
+  useEffect7(() => {
+    reloadVariables();
+  }, [reloadVariables]);
+  const starter = useMemo5(() => starterMjml || createStarterMjml({ sender, t }), [starterMjml, sender, t]);
+  const templates = useMemo5(
+    () => buildGallery({ templates: galleryProp ?? TEMPLATE_GALLERY, sender: sender || {}, t }),
+    [galleryProp, sender, t]
+  );
+  const services = useMemo5(() => ({ uploadImage: (file) => storage.uploadImage(file) }), [storage]);
+  const state = useEmailEditorState(editor);
+  const autosaveOn = isFeatureEnabled("autosave");
+  const autosaveOptions = emailBuilderFeatures.get("autosave")?.options || {};
+  const [template, setTemplate] = useState11({ id: initialTemplateId, revision: null, savedAt: null, auto: false });
+  const [boot, setBoot] = useState11({ status: "loading", document: null, draft: false, message: null });
+  const [meta, setMeta] = useState11(EMPTY_META);
+  const [savedMeta, setSavedMeta] = useState11(EMPTY_META);
+  const [saving, setSaving] = useState11(null);
+  const [showErrors, setShowErrors] = useState11(false);
+  const [autosaveBlocked, setAutosaveBlocked] = useState11(null);
+  const [engineError, setEngineError] = useState11(null);
+  const [attempt, setAttempt] = useState11(0);
+  const rootRef = useRef6(null);
+  const layout2 = useLayoutWidth(rootRef);
+  const compact = layout2 !== "wide";
+  const blocksInDrawer = layout2 === "narrow";
+  const [drawer, setDrawer] = useState11(null);
+  const closeDrawer = useCallback2(() => setDrawer(null), []);
+  useEffect7(() => {
+    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;
+  const timeOf = useCallback2(
+    (date) => date ? new Date(date).toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit" }) : "",
+    [locale]
+  );
+  const booted = useRef6(false);
+  useEffect7(() => {
+    if (booted.current) return;
+    booted.current = true;
+    (async () => {
+      if (initialTemplateId) {
+        try {
+          const loaded = await storage.load(initialTemplateId);
+          setMeta(metaOf(loaded));
+          setSavedMeta(metaOf(loaded));
+          setTemplate({ id: loaded.id, revision: loaded.revision, savedAt: null, auto: false });
+          setBoot({ status: "ready", document: loaded.document, draft: false, message: null });
+        } catch (error) {
+          setBoot({ status: "error", document: null, draft: false, message: error.message });
+        }
+        return;
+      }
+      if (initialMjml) {
+        setMeta({ ...EMPTY_META, ...initialMeta });
+        setBoot({ status: "ready", document: null, draft: true, message: null });
+        return;
+      }
+      const draft = autosaveOn ? readLocalDraft() : null;
+      if (draft) {
+        const when = new Date(draft.savedAt).toLocaleString(locale, {
+          day: "2-digit",
+          month: "2-digit",
+          hour: "2-digit",
+          minute: "2-digit"
+        });
+        const restore = await confirm({
+          title: t("Resume the draft?"),
+          description: t("Unsaved template from {when}.", { when }),
+          confirmLabel: t("Resume"),
+          cancelLabel: t("Start over")
+        });
+        if (restore) {
+          setMeta({ ...EMPTY_META, ...draft.meta });
+          setBoot({ status: "ready", document: draft.document, draft: true, message: null });
+          return;
+        }
+        clearLocalDraft();
+      }
+      setBoot({ status: "ready", document: null, draft: false, message: null });
+    })();
+  }, [initialTemplateId, storage, autosaveOn, confirm, t, locale]);
+  const onReady = useCallback2(() => {
+    if (!boot.document) editor.loadMjml(initialMjml || starter);
+  }, [editor, boot.document, starter, initialMjml]);
+  const { markDirty, markClean, checkDirty } = state;
+  useEffect7(() => {
+    if (ready && boot.draft) markDirty();
+  }, [ready, boot.draft, markDirty]);
+  const isDirty = useCallback2(
+    () => editor.status === "ready" && checkDirty() || metaDirty,
+    [editor, checkDirty, metaDirty]
+  );
+  const reportDirty = useRef6(onDirtyChange);
+  reportDirty.current = onDirtyChange;
+  useEffect7(() => {
+    reportDirty.current?.(dirty);
+  }, [dirty]);
+  useEffect7(() => {
+    if (!dirtyCheckRef) return void 0;
+    dirtyCheckRef.current = isDirty;
+    return () => {
+      dirtyCheckRef.current = null;
+    };
+  }, [dirtyCheckRef, isDirty]);
+  useEffect7(() => {
+    if (!dirty) return void 0;
+    const warn = (e) => {
+      e.preventDefault();
+      e.returnValue = "";
+    };
+    window.addEventListener("beforeunload", warn);
+    return () => window.removeEventListener("beforeunload", warn);
+  }, [dirty]);
+  const savingRef = useRef6(false);
+  const latest = useRef6({});
+  latest.current = { template, meta, onSaved, compact };
+  const save = useCallback2(
+    async ({ auto = false } = {}) => {
+      if (savingRef.current || editor.status !== "ready") return false;
+      const { template: current, meta: currentMeta } = latest.current;
+      if (!currentMeta.name.trim()) {
+        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;
+      }
+      const document = editor.getDocument();
+      const mjml = editor.exportMjml();
+      const payload = { ...currentMeta, document, mjml };
+      savingRef.current = true;
+      setSaving(auto ? "auto" : "manual");
+      try {
+        const result = current.id ? await storage.save(current.id, { ...payload, revision: current.revision, createVersion: !auto }) : await storage.create(payload);
+        setTemplate({ id: result.template.id, revision: result.template.revision, savedAt: /* @__PURE__ */ new Date(), auto });
+        setSavedMeta(currentMeta);
+        setShowErrors(false);
+        setAutosaveBlocked(null);
+        markClean(mjml);
+        if (!current.id) clearLocalDraft();
+        latest.current.onSaved?.(result.template);
+        const warnings = result.warnings || [];
+        if (warnings.length) {
+          notify(
+            "warning",
+            t("Saved, with {count} MJML warning(s): {message}", { count: warnings.length, message: warnings[0].message })
+          );
+        } else if (!auto) {
+          notify(
+            "success",
+            result.version ? t("Saved \u2014 version {n}.", { n: result.version.versionNumber }) : t("Template saved.")
+          );
+        }
+        return true;
+      } catch (error) {
+        if (error.status === 409 && current.id) {
+          if (auto) {
+            setAutosaveBlocked(error.message);
+            return false;
+          }
+          const copy = await confirm({
+            title: t("Template changed in the meantime"),
+            description: t("{message} Your version can be saved as a copy.", { message: error.message }),
+            confirmLabel: t("Save a copy")
+          });
+          if (!copy) return false;
+          try {
+            const result = await storage.create({
+              ...payload,
+              name: t("{name} (copy)", { name: currentMeta.name }).slice(0, 200)
+            });
+            const copyMeta = { ...currentMeta, name: result.template.name };
+            setMeta(copyMeta);
+            setSavedMeta(copyMeta);
+            setTemplate({ id: result.template.id, revision: result.template.revision, savedAt: /* @__PURE__ */ new Date(), auto: false });
+            setAutosaveBlocked(null);
+            markClean(mjml);
+            latest.current.onSaved?.(result.template);
+            notify("success", t("Copy saved: \u201C{name}\u201D.", { name: result.template.name }));
+            return true;
+          } catch (copyError) {
+            notify("error", copyError.message);
+            return false;
+          }
+        }
+        if (auto) setAutosaveBlocked(error.message);
+        else notify("error", error.message);
+        return false;
+      } finally {
+        savingRef.current = false;
+        setSaving(null);
+      }
+    },
+    [editor, storage, markClean, notify, confirm, t]
+  );
+  useEffect7(() => {
+    const onKey = (e) => {
+      if ((e.ctrlKey || e.metaKey) && !e.shiftKey && !e.altKey && e.key.toLowerCase() === "s") {
+        e.preventDefault();
+        save();
+      }
+    };
+    window.addEventListener("keydown", onKey, true);
+    return () => window.removeEventListener("keydown", onKey, true);
+  }, [save]);
+  useEffect7(() => {
+    if (!ready) return void 0;
+    return editor.addShortcut("save", "mod+s", () => save());
+  }, [ready, editor, save]);
+  const scheduler = useMemo5(
+    () => createAutosaveScheduler({
+      run: () => save({ auto: true }),
+      idleMs: autosaveOptions.idleMs,
+      maxWaitMs: autosaveOptions.maxWaitMs
+    }),
+    [save, autosaveOptions.idleMs, autosaveOptions.maxWaitMs]
+  );
+  useEffect7(() => () => scheduler.dispose(), [scheduler]);
+  useEffect7(() => {
+    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(() => {
+    if (!autosaveOn || !ready || template.id || !dirty) return void 0;
+    const timer = setTimeout(() => {
+      if (editor.status === "ready") saveLocalDraft({ document: editor.getDocument(), meta });
+    }, autosaveOptions.draftDelayMs ?? 1500);
+    return () => clearTimeout(timer);
+  }, [autosaveOn, ready, template.id, dirty, state.changes, meta, editor, autosaveOptions.draftDelayMs]);
+  const back = async () => {
+    if (isDirty()) {
+      const ok = await confirm({
+        title: t("Leave the builder?"),
+        description: template.id ? t("Unsaved changes will be lost.") : t("The draft will be offered again next time."),
+        confirmLabel: t("Leave"),
+        destructive: true
+      });
+      if (!ok) return;
+    }
+    onClose?.();
+  };
+  const status = !ready ? t("Loading\u2026") : saving === "manual" ? t("Saving\u2026") : saving === "auto" ? t("Autosaving\u2026") : autosaveBlocked ? t("Autosave paused") : dirty ? t("Unsaved changes") : template.savedAt ? template.auto ? t("Autosaved at {time}", { time: timeOf(template.savedAt) }) : t("Saved at {time}", { time: timeOf(template.savedAt) }) : template.id ? t("Saved") : t("No changes");
+  const featureContext = {
+    editor,
+    storage,
+    template,
+    meta,
+    setMeta,
+    templates,
+    ready,
+    isDirty,
+    markDirty,
+    save,
+    variables,
+    systemVariables,
+    canManageVariables,
+    reloadVariables,
+    testRecipients
+  };
+  const toolbarFeatures = emailBuilderFeatures.list(
+    (f) => f.enabled !== false && Boolean(f.toolbar) && (f.isAvailable ? f.isAvailable(featureContext) : true)
+  );
+  const properties = /* @__PURE__ */ jsx16(
+    PropertiesPanel,
+    {
+      onDismiss: compact ? closeDrawer : null,
+      editor,
+      selection: ready ? state.selection : null,
+      meta,
+      onMetaChange: setMeta,
+      changes: state.changes,
+      showErrors,
+      actions: /* @__PURE__ */ jsx16(ElementActions, { editor, selection: state.selection }),
+      services,
+      variables
+    }
+  );
+  return /* @__PURE__ */ jsxs15(
+    "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__ */ jsx16(
+          Toolbar,
+          {
+            title: meta.name,
+            status,
+            ready,
+            canUndo: state.canUndo,
+            canRedo: state.canRedo,
+            onUndo: () => editor.undo(),
+            onRedo: () => editor.redo(),
+            device: state.device,
+            onDeviceChange: (device) => editor.setDevice(device),
+            onBack: onClose ? back : void 0,
+            compact,
+            actions: toolbarFeatures.map((feature) => {
+              const Action = feature.toolbar;
+              return /* @__PURE__ */ jsx16(Action, { context: featureContext }, feature.id);
+            }),
+            primary: /* @__PURE__ */ jsxs15(Button, { size: "sm-compact", onClick: () => save(), disabled: !ready || saving !== null, children: [
+              saving === "manual" ? /* @__PURE__ */ jsx16(Loader24, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx16(Save, {}),
+              t("Save")
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs15(
+          "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"
+            ),
+            children: [
+              !blocksInDrawer && /* @__PURE__ */ jsx16(BlockSidebar, { editor, disabled: !ready, onAdded: compact ? () => setDrawer("properties") : void 0 }),
+              /* @__PURE__ */ jsx16("div", { className: "eb:relative eb:min-w-0 eb:bg-surface-75", "aria-busy": !ready, children: boot.status === "error" || engineError ? /* @__PURE__ */ jsxs15("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__ */ jsx16(AlertTriangle, { className: "eb:size-6 eb:text-destructive", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx16("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__ */ jsx16("p", { className: "eb:max-w-sm eb:text-[12px] eb:text-foreground-muted", children: boot.message || engineError }),
+                engineError && /* @__PURE__ */ jsx16(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "sm-compact",
+                    onClick: () => {
+                      setEngineError(null);
+                      setAttempt((n) => n + 1);
+                    },
+                    children: t("Retry")
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsxs15(Fragment7, { children: [
+                boot.status === "ready" && /* @__PURE__ */ jsx16(
+                  EmailCanvas,
+                  {
+                    editor,
+                    document: boot.document,
+                    onReady,
+                    onError: (error) => setEngineError(error.message)
+                  },
+                  attempt
+                ),
+                !ready && /* @__PURE__ */ jsxs15("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__ */ jsx16(Loader24, { className: "eb:size-6 eb:animate-spin eb:text-foreground-muted", "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx16("span", { className: "eb:sr-only", children: t("Loading the builder") })
+                ] })
+              ] }) }),
+              !compact && properties,
+              blocksInDrawer && /* @__PURE__ */ jsx16(Drawer, { open: drawer === "blocks", side: "left", title: t("Add a block"), onClose: closeDrawer, testId: "eb-blocks-drawer", children: /* @__PURE__ */ jsx16(BlockSidebar, { editor, disabled: !ready, onAdded: () => setDrawer("properties") }) }),
+              compact && /* @__PURE__ */ jsx16(
+                Drawer,
+                {
+                  open: drawer === "properties",
+                  side: "right",
+                  title: t("Properties"),
+                  onClose: closeDrawer,
+                  testId: "eb-properties-drawer",
+                  header: false,
+                  children: properties
+                }
+              )
+            ]
+          }
+        ),
+        compact && /* @__PURE__ */ jsxs15("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__ */ jsxs15(Button, { variant: "outline", size: "sm-compact", disabled: !ready, onClick: () => setDrawer("blocks"), children: [
+            /* @__PURE__ */ jsx16(Plus2, {}),
+            t("Add a block")
+          ] }),
+          /* @__PURE__ */ jsxs15(
+            Button,
+            {
+              variant: state.selection ? "default" : "outline",
+              size: "sm-compact",
+              className: "eb:ml-auto eb:min-w-0",
+              disabled: !ready,
+              onClick: () => setDrawer("properties"),
+              children: [
+                /* @__PURE__ */ jsx16(SlidersHorizontal, {}),
+                /* @__PURE__ */ jsx16("span", { className: "eb:truncate", children: ready && state.selection ? t("Edit: {element}", { element: t(state.selection.label) }) : t("Email settings") })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx16(NoticeArea, {})
+      ]
+    }
+  );
+}
+function EmailBuilder({ locale = "en", messages, onNotify, ...props }) {
+  return /* @__PURE__ */ jsx16(UiProvider, { locale, messages, onNotify, children: /* @__PURE__ */ jsx16(Builder, { ...props, templateId: props.templateId ?? null }) });
+}
+
+// src/ui/EmailBuilderBoundary.jsx
+import { Component } from "react";
+import { AlertTriangle as AlertTriangle2, ArrowLeft as ArrowLeft3, RefreshCw } from "lucide-react";
+import { jsx as jsx17, jsxs as jsxs16 } 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 {
+  constructor(props) {
+    super(props);
+    this.state = { error: null, attempt: 0 };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error) {
+    console.warn("[best-email-builder] the builder could not load", error);
+  }
+  retry = () => {
+    if (isChunkError(this.state.error)) {
+      window.location.reload();
+      return;
+    }
+    this.setState((s) => ({ error: null, attempt: s.attempt + 1 }));
+  };
+  render() {
+    const { error, attempt } = this.state;
+    const t = this.props.t || english;
+    if (!error) {
+      return /* @__PURE__ */ jsx17("div", { style: { height: "100%" }, children: this.props.children }, attempt);
+    }
+    return /* @__PURE__ */ jsxs16(
+      "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__ */ jsx17(AlertTriangle2, { className: "eb:size-6 eb:text-destructive", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx17("p", { className: "eb:text-[13px] eb:text-foreground", children: t("The builder could not load.") }),
+          /* @__PURE__ */ jsxs16("div", { className: "eb:flex eb:gap-2", children: [
+            this.props.onClose && /* @__PURE__ */ jsxs16(Button, { variant: "outline", size: "sm", onClick: this.props.onClose, children: [
+              /* @__PURE__ */ jsx17(ArrowLeft3, {}),
+              t("Back")
+            ] }),
+            /* @__PURE__ */ jsxs16(Button, { size: "sm", onClick: this.retry, children: [
+              /* @__PURE__ */ jsx17(RefreshCw, {}),
+              t("Retry")
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+};
+
+export {
+  createEmailEditor,
+  createRegistry,
+  emailBlocks,
+  emailBuilderFeatures,
+  isFeatureEnabled,
+  createGrapesJsAdapter,
+  createDefaultEmailEditor,
+  EmailCanvas,
+  EmailBuilder,
+  EmailBuilderBoundary
+};
+//# sourceMappingURL=chunk-ILRAQTHS.js.map