best-email-builder 0.3.0 → 0.5.0

package/dist/chunk-ILRAQTHS.js

@@ -1,3677 +0,0 @@
-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