best-email-builder 0.1.1 → 0.3.0

package/dist/index.js

@@ -1,3 +1,38 @@
+import {
+  EmailBuilder,
+  EmailBuilderBoundary,
+  EmailCanvas,
+  createDefaultEmailEditor,
+  createEmailEditor,
+  createGrapesJsAdapter,
+  createRegistry,
+  emailBlocks,
+  emailBuilderFeatures,
+  isFeatureEnabled
+} from "./chunk-ILRAQTHS.js";
+import {
+  TemplateLibrary
+} from "./chunk-JOC752I3.js";
+import {
+  STARTER_MJML,
+  StorageError,
+  TEMPLATE_GALLERY,
+  UiProvider,
+  buildGallery,
+  createHttpStorage,
+  createMemoryStorage,
+  createStarterMjml,
+  useT,
+  useUi,
+  withPlaceholderImages
+} from "./chunk-ZSUHOCCE.js";
+import {
+  applyVariables,
+  applyVariablesToText,
+  unknownVariables,
+  usedVariables
+} from "./chunk-BVOVAEEJ.js";
+import "./chunk-57CTQNTK.js";
 import {
   CUSTOM_GROUP,
   DEFAULT_ASSETS_PATH,
@@ -5,4228 +40,77 @@ import {
   EMAIL_BUILDER_VERSION,
   EMAIL_DEVICES,
   EMAIL_DOCUMENT_SCHEMA_VERSION,
-  EMAIL_MOBILE_WIDTH,
   EmailDocumentError,
-  IMAGE_TYPES,
   LOCALES,
-  VARIABLE_LIMITS,
   absoluteAssetUrls,
-  applyVariables,
-  applyVariablesToText,
   createDocument,
   createTranslator,
   defineVariables,
-  identity,
-  imageUploadError,
   isAssetPath,
-  isSafeUrl,
   keyFromLabel,
   mergeVariables,
   readDocument,
   serializeDocument,
   tokenOf,
   translatorFor,
-  unknownVariables,
-  usedVariables,
   validateCustomVariable
-} from "./chunk-2DZ6BRIJ.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();
-    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();
-    },
-    exportHtml() {
-      requireReady("exportHtml");
-      return adapter.exportHtml();
-    },
-    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/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); }
-`;
-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.22.16";
-var BLOCK_PREFIX = "eb-";
-var LOCKED_TYPES = /* @__PURE__ */ new Set(["mjml", "mj-head", "mj-body", "wrapper"]);
-var LABEL_TYPES = /* @__PURE__ */ new Set(["mj-button"]);
-var 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() {
-      const result = requireEditor().runCommand("mjml-code-to-html", { mjml: adapter.exportMjml() }) || {};
-      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/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/shared.js
-var PALETTE = {
-  ink: "#2b3038",
-  inkSoft: "#41506b",
-  navy: "#212e5a",
-  brand: "#2977bc",
-  border: "#dfe6f0",
-  canvas: "#eceff4",
-  surface: "#ffffff",
-  white: "#ffffff"
-};
-var DEFAULT_BUTTON_URL = "https://example.com";
-var FONT_STACK = "Arial, Helvetica, sans-serif";
-var FONT_OPTIONS = [
-  { value: "Arial, Helvetica, sans-serif", label: "Arial" },
-  { value: "Verdana, Geneva, sans-serif", label: "Verdana" },
-  { value: "Tahoma, Geneva, sans-serif", label: "Tahoma" },
-  { value: "'Trebuchet MS', Helvetica, sans-serif", label: "Trebuchet" },
-  { value: "Georgia, Times, serif", label: "Georgia" },
-  { value: "'Times New Roman', Times, serif", label: "Times" },
-  { value: "'Courier New', Courier, monospace", label: "Courier" }
-];
-var ALIGN_OPTIONS = [
-  { value: "left", label: "Left" },
-  { value: "center", label: "Center" },
-  { value: "right", label: "Right" }
-];
-var GROUPS = {
-  content: "Content",
-  link: "Link",
-  typography: "Typography",
-  colors: "Colors",
-  layout: "Layout",
-  spacing: "Spacing"
-};
-var prop = {
-  /** @returns {BlockProperty} */
-  fontFamily: () => ({ key: "font-family", label: "Font", type: "select", group: GROUPS.typography, options: FONT_OPTIONS }),
-  /** @returns {BlockProperty} */
-  fontSize: (min = 10, max = 48) => ({ key: "font-size", label: "Size", type: "size", group: GROUPS.typography, min, max, unit: "px" }),
-  /** @returns {BlockProperty} */
-  lineHeight: () => ({ key: "line-height", label: "Line height", type: "size", group: GROUPS.typography, min: 10, max: 80, unit: "px" }),
-  /** @returns {BlockProperty} */
-  color: (label = "Text") => ({ key: "color", label, type: "color", group: GROUPS.colors }),
-  /** @returns {BlockProperty} */
-  background: (key = "background-color", label = "Background") => ({ key, label, type: "color", group: GROUPS.colors }),
-  /** @returns {BlockProperty} */
-  align: (options = ALIGN_OPTIONS) => ({ key: "align", label: "Alignment", type: "align", group: GROUPS.layout, options }),
-  /** @returns {BlockProperty} */
-  padding: (key = "padding", label = "Padding") => ({ key, label, type: "spacing", group: GROUPS.spacing }),
-  /** @returns {BlockProperty} */
-  href: (label = "Link URL") => ({ key: "href", label, type: "url", group: GROUPS.link, placeholder: "https://" }),
-  /** @returns {BlockProperty} */
-  radius: (max = 40) => ({ key: "border-radius", label: "Corner radius", type: "size", group: GROUPS.layout, min: 0, max, unit: "px" })
-};
-function inWhiteSection(inner) {
-  return `<mj-section background-color="${PALETTE.surface}" padding-top="0px" padding-bottom="0px"><mj-column>${inner}</mj-column></mj-section>`;
-}
-
-// 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"),
-    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(),
-    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/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");
-
-// src/blocks/index.js
-var BLOCKS = [
-  textBlock,
-  imageBlock,
-  buttonBlock,
-  dividerBlock,
-  spacerBlock,
-  oneColumnBlock,
-  twoColumnsBlock,
-  threeColumnsBlock,
-  bodyBlock,
-  sectionBlock,
-  columnBlock
-];
-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 as useState2 } from "react";
-import { History } from "lucide-react";
-
-// src/ui/primitives/button.jsx
-import { Slot } from "radix-ui";
-import { cva } from "class-variance-authority";
-
-// src/ui/primitives/cn.js
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({ prefix: "eb" });
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
+} from "./chunk-3M36VVXS.js";
 
-// src/ui/primitives/button.jsx
+// src/ui/EmailStudio.jsx
+import { useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-var buttonVariants = cva(
-  "eb:inline-flex eb:shrink-0 eb:items-center eb:justify-center eb:gap-2 eb:whitespace-nowrap eb:rounded-lg2 eb:text-sm eb:font-medium eb:transition-all eb:outline-none eb:disabled:pointer-events-none eb:disabled:opacity-50 eb:focus-visible:border-ring eb:focus-visible:ring-[3px] eb:focus-visible:ring-ring/50 eb:aria-invalid:border-destructive eb:aria-invalid:ring-destructive/20 eb:[&_svg]:pointer-events-none eb:[&_svg]:shrink-0 eb:[&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        default: "eb:bg-primary eb:text-primary-foreground eb:hover:bg-primary/90",
-        destructive: "eb:bg-destructive eb:text-white eb:hover:bg-destructive/90 eb:focus-visible:ring-destructive/20",
-        outline: "eb:border eb:border-border eb:bg-background eb:text-foreground eb:shadow-xs eb:hover:bg-accent eb:hover:text-accent-foreground",
-        secondary: "eb:bg-secondary eb:text-secondary-foreground eb:hover:bg-secondary/80",
-        ghost: "eb:text-foreground eb:hover:bg-accent eb:hover:text-accent-foreground",
-        link: "eb:text-primary eb:underline-offset-4 eb:hover:underline"
-      },
-      size: {
-        default: "eb:h-8 eb:gap-1.5 eb:px-3 eb:text-[13px] eb:has-[>svg]:px-2.5",
-        xs: "eb:h-6 eb:gap-1 eb:px-2 eb:text-xs eb:has-[>svg]:px-1.5 eb:[&_svg:not([class*='size-'])]:size-3",
-        "sm-compact": "eb:h-7 eb:gap-1.5 eb:px-3 eb:text-xs eb:has-[>svg]:px-2.5 eb:[&_svg:not([class*='size-'])]:size-3",
-        sm: "eb:h-8 eb:gap-1.5 eb:px-3 eb:text-[13px] eb:has-[>svg]:px-2.5",
-        lg: "eb:h-10 eb:px-6 eb:has-[>svg]:px-4",
-        icon: "eb:size-8",
-        "icon-xs": "eb:size-6 eb:[&_svg:not([class*='size-'])]:size-3",
-        "icon-sm-compact": "eb:size-7 eb:[&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "eb:size-8"
-      }
-    },
-    defaultVariants: { variant: "default", size: "default" }
-  }
-);
-function Button({ className, variant = "default", size = "default", asChild = false, type, ...props }) {
-  const Comp = asChild ? Slot.Root : "button";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      "data-slot": "button",
-      type: asChild ? type : type || "button",
-      className: cn(buttonVariants({ variant, size }), className),
-      ...props
-    }
-  );
-}
-
-// src/ui/primitives/overlays.jsx
-import {
-  AlertDialog as AlertDialogPrimitive,
-  Dialog as DialogPrimitive,
-  DropdownMenu as DropdownMenuPrimitive,
-  Popover as PopoverPrimitive,
-  Select as SelectPrimitive
-} from "radix-ui";
-import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
-
-// src/ui/context.jsx
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { AlertCircle, CheckCircle2, Info, TriangleAlert, X } from "lucide-react";
-
-// src/ui/primitives/misc.jsx
-import { Separator as SeparatorPrimitive, Tabs as TabsPrimitive, Tooltip as TooltipPrimitive } from "radix-ui";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-function Separator({ className, orientation = "horizontal", decorative = true, ...props }) {
-  return /* @__PURE__ */ jsx2(
-    SeparatorPrimitive.Root,
-    {
-      "data-slot": "separator",
-      decorative,
-      orientation,
-      className: cn(
-        "eb:shrink-0 eb:bg-border eb:data-[orientation=horizontal]:h-px eb:data-[orientation=horizontal]:w-full eb:data-[orientation=vertical]:h-full eb:data-[orientation=vertical]:w-px",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function Skeleton({ className, as: Comp = "div", ...props }) {
-  return /* @__PURE__ */ jsx2(Comp, { "data-slot": "skeleton", className: cn("eb:animate-pulse eb:rounded-lg2 eb:bg-accent", className), ...props });
-}
-function SectionLabel({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
-    "span",
-    {
-      "data-slot": "section-label",
-      className: cn("eb:font-mono eb:text-[10px] eb:uppercase eb:tracking-[0.14em] eb:text-foreground-muted", className),
-      ...props
-    }
-  );
-}
-function TruncatedText({ children, className, as: Comp = "span", ...props }) {
-  return /* @__PURE__ */ jsx2(
-    Comp,
-    {
-      className: cn("eb:block eb:truncate", className),
-      title: typeof children === "string" ? children : void 0,
-      ...props,
-      children
-    }
-  );
-}
-function Tabs({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(TabsPrimitive.Root, { "data-slot": "tabs", className: cn("eb:flex eb:flex-col eb:gap-2", className), ...props });
-}
-function TabsList({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
-    TabsPrimitive.List,
-    {
-      "data-slot": "tabs-list",
-      className: cn(
-        "eb:inline-flex eb:h-8 eb:w-fit eb:items-center eb:justify-center eb:rounded-lg2 eb:bg-muted eb:p-[3px] eb:text-muted-foreground",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function TabsTrigger({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
-    TabsPrimitive.Trigger,
-    {
-      "data-slot": "tabs-trigger",
-      className: cn(
-        "eb:inline-flex eb:h-[calc(100%-1px)] eb:flex-1 eb:items-center eb:justify-center eb:gap-1.5 eb:rounded-lg2 eb:border eb:border-transparent eb:px-2 eb:py-1 eb:text-[13px] eb:font-medium eb:whitespace-nowrap eb:text-foreground/60 eb:transition-all eb:hover:text-foreground eb:focus-visible:border-ring eb:focus-visible:ring-[3px] eb:focus-visible:ring-ring/50 eb:focus-visible:outline-1 eb:disabled:pointer-events-none eb:disabled:opacity-50 eb:data-[state=active]:bg-background eb:data-[state=active]:text-foreground eb:data-[state=active]:shadow-sm eb:[&_svg]:pointer-events-none eb:[&_svg]:shrink-0 eb:[&_svg:not([class*='size-'])]:size-4",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function TooltipProvider({ delayDuration = 0, ...props }) {
-  return /* @__PURE__ */ jsx2(TooltipPrimitive.Provider, { delayDuration, ...props });
-}
-function Tooltip(props) {
-  return /* @__PURE__ */ jsx2(TooltipPrimitive.Root, { ...props });
-}
-function TooltipTrigger(props) {
-  return /* @__PURE__ */ jsx2(TooltipPrimitive.Trigger, { ...props });
-}
-function TooltipContent({ className, sideOffset = 4, children, ...props }) {
-  return /* @__PURE__ */ jsx2(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx2(
-    TooltipPrimitive.Content,
-    {
-      "data-slot": "tooltip-content",
-      sideOffset,
-      className: cn(
-        "eb-scope eb:z-50 eb:w-fit eb:origin-(--radix-tooltip-content-transform-origin) eb:animate-in eb:rounded-lg2 eb:border eb:border-border eb:bg-popover eb:px-3 eb:py-1.5 eb:text-xs eb:text-balance eb:text-popover-foreground eb:shadow-md eb:fade-in-0 eb:zoom-in-95 eb:data-[state=closed]:animate-out eb:data-[state=closed]:fade-out-0 eb:data-[state=closed]:zoom-out-95",
-        className
-      ),
-      ...props,
-      children
-    }
-  ) });
-}
-function TooltipWrap({ label, side = "top", children, asChild = true, delayDuration }) {
-  if (!label) return children;
-  return /* @__PURE__ */ jsxs(Tooltip, { delayDuration, children: [
-    /* @__PURE__ */ jsx2(TooltipTrigger, { asChild, children }),
-    /* @__PURE__ */ jsx2(TooltipContent, { side, className: "eb:px-2 eb:py-1 eb:text-[11px]", children: label })
-  ] });
-}
-
-// src/ui/context.jsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var NoticeContext = createContext({ notices: [], dismiss: () => {
-} });
-var UiContext = createContext({
-  t: identity,
-  locale: "en",
-  /** @type {(level: NotifyLevel, message: string) => void} */
-  notify: () => {
-  },
-  /** @type {(options: ConfirmOptions) => Promise<boolean>} */
-  confirm: async () => false
-});
-var useUi = () => useContext(UiContext);
-var useT = () => useContext(UiContext).t;
-var NOTICE_ICON = { success: CheckCircle2, info: Info, warning: TriangleAlert, error: AlertCircle };
-var NOTICE_TTL = { success: 3500, info: 4e3, warning: 6e3, error: 7e3 };
-function NoticeArea() {
-  const t = useT();
-  const { notices, dismiss: onDismiss } = useContext(NoticeContext);
-  return /* @__PURE__ */ jsx3("div", { className: "eb:pointer-events-none eb:absolute eb:right-3 eb:bottom-3 eb:z-40 eb:flex eb:w-80 eb:max-w-[calc(100%-1.5rem)] eb:flex-col eb:gap-2", children: notices.map((notice) => {
-    const Icon = NOTICE_ICON[notice.level] || Info;
-    return /* @__PURE__ */ jsxs2(
-      "div",
-      {
-        role: notice.level === "error" ? "alert" : "status",
-        "data-level": notice.level,
-        className: "eb:pointer-events-auto eb:flex eb:items-start eb:gap-2 eb:rounded-lg2 eb:border eb:border-border eb:bg-popover eb:px-3 eb:py-2.5 eb:text-[13px] eb:text-popover-foreground eb:shadow-lg",
-        children: [
-          /* @__PURE__ */ jsx3(
-            Icon,
-            {
-              "aria-hidden": "true",
-              className: cn(
-                "eb:mt-0.5 eb:size-4 eb:shrink-0",
-                notice.level === "error" && "eb:text-destructive",
-                notice.level === "warning" && "eb:text-warning",
-                notice.level === "success" && "eb:text-success",
-                notice.level === "info" && "eb:text-foreground-muted"
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx3("p", { className: "eb:min-w-0 eb:flex-1", children: notice.message }),
-          /* @__PURE__ */ jsx3(
-            "button",
-            {
-              type: "button",
-              "aria-label": t("Dismiss"),
-              className: "eb:shrink-0 eb:rounded-sm eb:text-foreground-muted eb:hover:text-foreground",
-              onClick: () => onDismiss(notice.id),
-              children: /* @__PURE__ */ jsx3(X, { className: "eb:size-3.5" })
-            }
-          )
-        ]
-      },
-      notice.id
-    );
-  }) });
-}
-function UiProvider({ locale = "en", messages, onNotify, children }) {
-  const t = useMemo(() => translatorFor(locale, messages), [locale, messages]);
-  const [notices, setNotices] = useState([]);
-  const timers = useRef(/* @__PURE__ */ new Map());
-  const dismiss = useCallback((id) => {
-    clearTimeout(timers.current.get(id));
-    timers.current.delete(id);
-    setNotices((list) => list.filter((n) => n.id !== id));
-  }, []);
-  const hostNotify = useRef(onNotify);
-  hostNotify.current = onNotify;
-  const nextId = useRef(0);
-  const notify = useCallback(
-    (level, message) => {
-      if (hostNotify.current) {
-        hostNotify.current(level, message);
-        return;
-      }
-      const id = nextId.current += 1;
-      setNotices((list) => [...list.slice(-3), { id, level, message }]);
-      timers.current.set(
-        id,
-        setTimeout(() => dismiss(id), NOTICE_TTL[level] || 4e3)
-      );
-    },
-    [dismiss]
-  );
-  useEffect(() => {
-    const pending = timers.current;
-    return () => pending.forEach((timer) => clearTimeout(timer));
-  }, []);
-  const [request, setRequest] = useState(null);
-  const confirm = useCallback(
-    (options2 = {}) => new Promise((resolve) => {
-      setRequest((current) => {
-        current?.resolve(false);
-        return { options: options2, resolve };
-      });
-    }),
-    []
-  );
-  const settle = (result) => {
-    request?.resolve(result);
-    setRequest(null);
-  };
-  const value = useMemo(() => ({ t, locale, notify, confirm }), [t, locale, notify, confirm]);
-  const noticeValue = useMemo(() => ({ notices, dismiss }), [notices, dismiss]);
-  const options = request?.options || {};
-  return /* @__PURE__ */ jsx3(UiContext.Provider, { value, children: /* @__PURE__ */ jsxs2(TooltipProvider, { delayDuration: 300, children: [
-    /* @__PURE__ */ jsx3(NoticeContext.Provider, { value: noticeValue, children }),
-    /* @__PURE__ */ jsx3(AlertDialog, { open: Boolean(request), onOpenChange: (open) => !open && settle(false), children: /* @__PURE__ */ jsxs2(AlertDialogContent, { children: [
-      /* @__PURE__ */ jsxs2("div", { className: "eb:flex eb:items-center eb:gap-3", children: [
-        /* @__PURE__ */ jsx3(
-          "span",
-          {
-            className: cn(
-              "eb:flex eb:size-10 eb:shrink-0 eb:items-center eb:justify-center eb:rounded-lg2",
-              options.destructive ? "eb:bg-destructive/10 eb:text-destructive" : "eb:bg-primary/10 eb:text-primary"
-            ),
-            children: /* @__PURE__ */ jsx3(AlertCircle, { className: "eb:size-5" })
-          }
-        ),
-        /* @__PURE__ */ jsx3(AlertDialogTitle, { className: "eb:text-base", children: options.title || t("Confirm") })
-      ] }),
-      options.description && /* @__PURE__ */ jsx3(AlertDialogDescription, { className: "eb:text-[13px] eb:leading-relaxed", children: options.description }),
-      /* @__PURE__ */ jsxs2("div", { className: "eb:flex eb:flex-col-reverse eb:gap-2 eb:sm:flex-row eb:sm:justify-end", children: [
-        /* @__PURE__ */ jsx3(AlertDialogCancel, { className: buttonVariants({ variant: "outline" }), onClick: () => settle(false), children: options.cancelLabel || t("Cancel") }),
-        /* @__PURE__ */ jsx3(
-          AlertDialogAction,
-          {
-            className: buttonVariants({ variant: options.destructive ? "destructive" : "default" }),
-            onClick: () => settle(true),
-            children: options.confirmLabel || t("Confirm")
-          }
-        )
-      ] })
-    ] }) })
-  ] }) });
-}
-
-// src/ui/primitives/overlays.jsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var FADE_ZOOM = "eb:data-[state=open]:animate-in eb:data-[state=open]:fade-in-0 eb:data-[state=open]:zoom-in-95 eb:data-[state=closed]:animate-out eb:data-[state=closed]:fade-out-0 eb:data-[state=closed]:zoom-out-95";
-function Dialog(props) {
-  return /* @__PURE__ */ jsx4(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
-}
-function DialogContent({ className, children, showCloseButton = true, ...props }) {
-  const t = useT();
-  return /* @__PURE__ */ jsxs3(DialogPrimitive.Portal, { children: [
-    /* @__PURE__ */ jsx4(DialogPrimitive.Overlay, { className: "eb-scope eb:fixed eb:inset-0 eb:z-50 eb:bg-black/50 eb:data-[state=open]:animate-in eb:data-[state=open]:fade-in-0 eb:data-[state=closed]:animate-out eb:data-[state=closed]:fade-out-0" }),
-    /* @__PURE__ */ jsxs3(
-      DialogPrimitive.Content,
-      {
-        "data-slot": "dialog-content",
-        className: cn(
-          "eb-scope eb:fixed eb:top-[50%] eb:left-[50%] eb:z-50 eb:grid eb:w-full eb:max-w-[calc(100%-2rem)] eb:translate-x-[-50%] eb:translate-y-[-50%] eb:gap-4 eb:rounded-lg2 eb:border eb:border-border eb:bg-background eb:p-6 eb:text-foreground eb:shadow-lg eb:duration-200 eb:outline-none eb:sm:max-w-lg",
-          FADE_ZOOM,
-          className
-        ),
-        ...props,
-        children: [
-          children,
-          showCloseButton && /* @__PURE__ */ jsxs3(DialogPrimitive.Close, { className: "eb:absolute eb:top-4 eb:right-4 eb:rounded-xs eb:opacity-70 eb:transition-opacity eb:hover:opacity-100 eb:focus:ring-2 eb:focus:ring-ring eb:focus:ring-offset-2 eb:focus:outline-hidden eb:disabled:pointer-events-none eb:[&_svg]:pointer-events-none eb:[&_svg]:shrink-0 eb:[&_svg:not([class*='size-'])]:size-4", children: [
-            /* @__PURE__ */ jsx4(XIcon, {}),
-            /* @__PURE__ */ jsx4("span", { className: "eb:sr-only", children: t("Close") })
-          ] })
-        ]
-      }
-    )
-  ] });
-}
-function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx4("div", { className: cn("eb:flex eb:flex-col eb:gap-2 eb:text-left", className), ...props });
-}
-function DialogTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx4(DialogPrimitive.Title, { className: cn("eb:text-lg eb:leading-none eb:font-semibold", className), ...props });
-}
-function DialogDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx4(DialogPrimitive.Description, { className: cn("eb:text-sm eb:text-muted-foreground", className), ...props });
-}
-function AlertDialog(props) {
-  return /* @__PURE__ */ jsx4(AlertDialogPrimitive.Root, { ...props });
-}
-function AlertDialogContent({ className, ...props }) {
-  return /* @__PURE__ */ jsxs3(AlertDialogPrimitive.Portal, { children: [
-    /* @__PURE__ */ jsx4(AlertDialogPrimitive.Overlay, { className: "eb-scope eb:fixed eb:inset-0 eb:z-50 eb:bg-black/50 eb:data-[state=open]:animate-in eb:data-[state=open]:fade-in-0 eb:data-[state=closed]:animate-out eb:data-[state=closed]:fade-out-0" }),
-    /* @__PURE__ */ jsx4(
-      AlertDialogPrimitive.Content,
-      {
-        className: cn(
-          "eb-scope eb:fixed eb:top-[50%] eb:left-[50%] eb:z-50 eb:grid eb:w-full eb:max-w-[calc(100%-2rem)] eb:translate-x-[-50%] eb:translate-y-[-50%] eb:gap-4 eb:rounded-lg2 eb:border eb:border-border eb:bg-background eb:p-6 eb:text-foreground eb:shadow-lg eb:duration-200 eb:sm:max-w-lg",
-          FADE_ZOOM,
-          className
-        ),
-        ...props
-      }
-    )
-  ] });
-}
-var AlertDialogTitle = ({ className, ...props }) => /* @__PURE__ */ jsx4(AlertDialogPrimitive.Title, { className: cn("eb:text-lg eb:font-semibold", className), ...props });
-var AlertDialogDescription = ({ className, ...props }) => /* @__PURE__ */ jsx4(AlertDialogPrimitive.Description, { className: cn("eb:text-sm eb:text-muted-foreground", className), ...props });
-var AlertDialogAction = AlertDialogPrimitive.Action;
-var AlertDialogCancel = AlertDialogPrimitive.Cancel;
-function Popover(props) {
-  return /* @__PURE__ */ jsx4(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
-}
-function PopoverTrigger(props) {
-  return /* @__PURE__ */ jsx4(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
-}
-function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
-  return /* @__PURE__ */ jsx4(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx4(
-    PopoverPrimitive.Content,
-    {
-      "data-slot": "popover-content",
-      align,
-      sideOffset,
-      className: cn(
-        "eb-scope eb:z-50 eb:w-72 eb:origin-(--radix-popover-content-transform-origin) eb:rounded-lg2 eb:border eb:border-border eb:bg-popover eb:p-4 eb:text-popover-foreground eb:shadow-md eb:outline-hidden",
-        FADE_ZOOM,
-        className
-      ),
-      ...props
-    }
-  ) });
-}
-function Select(props) {
-  return /* @__PURE__ */ jsx4(SelectPrimitive.Root, { "data-slot": "select", ...props });
-}
-function SelectValue(props) {
-  return /* @__PURE__ */ jsx4(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
-}
-function SelectTrigger({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxs3(
-    SelectPrimitive.Trigger,
-    {
-      "data-slot": "select-trigger",
-      className: cn(
-        "eb:flex eb:h-8 eb:w-full eb:items-center eb:justify-between eb:gap-2 eb:rounded-lg2 eb:border eb:border-border-strong eb:bg-surface-75 eb:px-3 eb:py-1 eb:text-[13px] eb:whitespace-nowrap eb:text-foreground eb:shadow-xs eb:transition-[color,box-shadow] eb:outline-none eb:focus-visible:border-ring eb:focus-visible:ring-[3px] eb:focus-visible:ring-ring/50 eb:disabled:cursor-not-allowed eb:disabled:opacity-50 eb:data-[placeholder]:text-foreground-muted eb:*:data-[slot=select-value]:line-clamp-1 eb:*:data-[slot=select-value]:flex eb:*:data-[slot=select-value]:items-center eb:*:data-[slot=select-value]:gap-2 eb:[&_svg]:pointer-events-none eb:[&_svg]:shrink-0 eb:[&_svg:not([class*='size-'])]:size-4",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsx4(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx4(ChevronDownIcon, { className: "eb:size-4 eb:opacity-50" }) })
-      ]
-    }
-  );
-}
-function SelectContent({ className, children, position = "popper", ...props }) {
-  return /* @__PURE__ */ jsx4(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx4(
-    SelectPrimitive.Content,
-    {
-      "data-slot": "select-content",
-      position,
-      className: cn(
-        "eb-scope eb:relative eb:z-50 eb:max-h-(--radix-select-content-available-height) eb:min-w-[8rem] eb:origin-(--radix-select-content-transform-origin) eb:overflow-x-hidden eb:overflow-y-auto eb:rounded-lg2 eb:border eb:border-border eb:bg-popover eb:text-popover-foreground eb:shadow-md",
-        FADE_ZOOM,
-        position === "popper" && "eb:data-[side=bottom]:translate-y-1 eb:data-[side=top]:-translate-y-1",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsx4(
-        SelectPrimitive.Viewport,
-        {
-          className: cn(
-            "eb:p-1",
-            position === "popper" && "eb:h-[var(--radix-select-trigger-height)] eb:w-full eb:min-w-[var(--radix-select-trigger-width)] eb:scroll-my-1"
-          ),
-          children
-        }
-      )
-    }
-  ) });
-}
-function SelectItem({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxs3(
-    SelectPrimitive.Item,
-    {
-      "data-slot": "select-item",
-      className: cn(
-        "eb:relative eb:flex eb:w-full eb:cursor-default eb:items-center eb:gap-2 eb:rounded-sm eb:py-1.5 eb:pr-8 eb:pl-2 eb:text-[13px] eb:outline-hidden eb:select-none eb:focus:bg-accent eb:focus:text-accent-foreground eb:data-[disabled]:pointer-events-none eb:data-[disabled]:opacity-50",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx4("span", { className: "eb:absolute eb:right-2 eb:flex eb:size-3.5 eb:items-center eb:justify-center", children: /* @__PURE__ */ jsx4(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx4(CheckIcon, { className: "eb:size-4" }) }) }),
-        /* @__PURE__ */ jsx4(SelectPrimitive.ItemText, { children })
-      ]
-    }
-  );
-}
-
-// src/features/versions/VersionsMenu.jsx
-import { jsx as jsx5, jsxs as jsxs4 } 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] = useState2(false);
-  const [versions, setVersions] = useState2(null);
-  const [error, setError] = useState2(null);
-  const [restoring, setRestoring] = useState2(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__ */ jsxs4(
-    Popover,
-    {
-      open,
-      onOpenChange: (next) => {
-        setOpen(next);
-        if (next) load();
-      },
-      children: [
-        /* @__PURE__ */ jsx5(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs4(
-          Button,
-          {
-            variant: "outline",
-            size: "sm-compact",
-            disabled: !ready || !template.id,
-            title: !template.id ? t("Save the template first") : void 0,
-            children: [
-              /* @__PURE__ */ jsx5(History, {}),
-              t("Versions")
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsxs4(PopoverContent, { align: "end", className: "eb:w-80 eb:p-0", children: [
-          /* @__PURE__ */ jsx5("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__ */ jsx5("div", { className: "eb:max-h-[320px] eb:overflow-y-auto eb:p-1", "aria-busy": versions === null && !error, children: error ? /* @__PURE__ */ jsx5("p", { role: "alert", className: "eb:px-2 eb:py-1.5 eb:text-[12px] eb:text-destructive", children: error }) : versions === null ? /* @__PURE__ */ jsxs4("div", { className: "eb:space-y-1 eb:p-1", "aria-hidden": "true", children: [
-            /* @__PURE__ */ jsx5(Skeleton, { className: "eb:h-8 eb:w-40" }),
-            /* @__PURE__ */ jsx5(Skeleton, { className: "eb:h-8 eb:w-32" }),
-            /* @__PURE__ */ jsx5(Skeleton, { className: "eb:h-8 eb:w-36" })
-          ] }) : versions.length === 0 ? /* @__PURE__ */ jsx5("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__ */ jsxs4(
-            "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__ */ jsxs4("div", { className: "eb:min-w-0 eb:flex-1", children: [
-                  /* @__PURE__ */ jsxs4("p", { className: "eb:text-[13px] eb:text-foreground", children: [
-                    t("Version {n}", { n: version.versionNumber }),
-                    index === 0 && /* @__PURE__ */ jsx5("span", { className: "eb:ml-1.5 eb:text-[11px] eb:text-foreground-muted", children: t("current") })
-                  ] }),
-                  /* @__PURE__ */ jsxs4("p", { className: "eb:text-[11px] eb:tabular-nums eb:text-foreground-muted", children: [
-                    formatWhen(version.createdAt, locale),
-                    version.createdBy ? ` \xB7 ${version.createdBy}` : ""
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsx5(
-                  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 useState5 } from "react";
-import { Braces as Braces2 } from "lucide-react";
-
-// src/features/variables/VariableDialog.jsx
-import { useEffect as useEffect2, useMemo as useMemo2, useState as useState3 } from "react";
-import { Braces, Loader2, Trash2 } from "lucide-react";
-
-// src/ui/primitives/fields.jsx
-import { forwardRef } from "react";
-import { Label as LabelPrimitive } from "radix-ui";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var Input = forwardRef(function Input2({ className, type, ...props }, ref) {
-  return /* @__PURE__ */ jsx6(
-    "input",
-    {
-      ref,
-      type,
-      "data-slot": "input",
-      className: cn(
-        "eb:h-8 eb:w-full eb:min-w-0 eb:rounded-lg2 eb:border eb:border-border-strong eb:bg-surface-75 eb:px-3 eb:py-1 eb:text-[13px] eb:text-foreground eb:shadow-xs eb:transition-[color,box-shadow] eb:outline-none eb:placeholder:text-foreground-muted eb:selection:bg-primary eb:selection:text-primary-foreground eb:disabled:pointer-events-none eb:disabled:cursor-not-allowed eb:disabled:opacity-50",
-        "eb:focus-visible:border-ring eb:focus-visible:ring-[3px] eb:focus-visible:ring-ring/50",
-        "eb:aria-invalid:border-destructive eb:aria-invalid:ring-destructive/20",
-        className
-      ),
-      ...props
-    }
-  );
-});
-var Textarea = forwardRef(function Textarea2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx6(
-    "textarea",
-    {
-      ref,
-      "data-slot": "textarea",
-      className: cn(
-        "eb:flex eb:field-sizing-content eb:min-h-16 eb:w-full eb:rounded-lg2 eb:border eb:border-border-strong eb:bg-surface-75 eb:px-3 eb:py-2 eb:text-[13px] eb:text-foreground eb:shadow-xs eb:transition-[color,box-shadow] eb:outline-none eb:placeholder:text-foreground-muted eb:focus-visible:border-ring eb:focus-visible:ring-[3px] eb:focus-visible:ring-ring/50 eb:aria-invalid:border-destructive eb:aria-invalid:ring-destructive/20 eb:disabled:cursor-not-allowed eb:disabled:opacity-50",
-        className
-      ),
-      ...props
-    }
-  );
-});
-function Label({ className, ...props }) {
-  return /* @__PURE__ */ jsx6(
-    LabelPrimitive.Root,
-    {
-      "data-slot": "label",
-      className: cn(
-        "eb:flex eb:items-center eb:gap-2 eb:text-[13px] eb:leading-none eb:font-medium eb:text-foreground eb:select-none eb:peer-disabled:cursor-not-allowed eb:peer-disabled:opacity-50",
-        className
-      ),
-      ...props
-    }
-  );
-}
-
-// src/features/variables/VariableDialog.jsx
-import { jsx as jsx7, jsxs as jsxs5 } 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] = useState3({ label: "", key: "", group: "", sample: "", fallback: "" });
-  const [keyTouched, setKeyTouched] = useState3(false);
-  const [errors, setErrors] = useState3({});
-  const [busy, setBusy] = useState3(false);
-  useEffect2(() => {
-    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 = useMemo2(
-    () => [.../* @__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__ */ jsxs5("div", { className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx7(Label, { htmlFor: `eb-var-${name}`, children: label }),
-    /* @__PURE__ */ jsx7(
-      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__ */ jsx7("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__ */ jsx7(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs5(
-    DialogContent,
-    {
-      className: "eb:sm:max-w-[440px]",
-      onMouseDown: (e) => e.stopPropagation(),
-      onCloseAutoFocus: (e) => e.preventDefault(),
-      children: [
-        /* @__PURE__ */ jsx7(DialogHeader, { children: /* @__PURE__ */ jsxs5("div", { className: "eb:flex eb:items-center eb:gap-3", children: [
-          /* @__PURE__ */ jsx7("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__ */ jsx7(Braces, { className: "eb:size-5" }) }),
-          /* @__PURE__ */ jsxs5("div", { children: [
-            /* @__PURE__ */ jsx7(DialogTitle, { className: "eb:text-base eb:font-normal", children: editing ? t("Edit variable") : t("New variable") }),
-            /* @__PURE__ */ jsx7(DialogDescription, { className: "eb:text-[13px]", children: t("Available in every template.") })
-          ] })
-        ] }) }),
-        /* @__PURE__ */ jsxs5("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__ */ jsxs5("div", { className: "eb:space-y-1.5", children: [
-            /* @__PURE__ */ jsx7(Label, { htmlFor: "eb-var-group", children: t("Group") }),
-            /* @__PURE__ */ jsx7(
-              Input,
-              {
-                id: "eb-var-group",
-                list: "eb-var-groups",
-                value: form.group,
-                onChange: set("group"),
-                maxLength: VARIABLE_LIMITS.group,
-                placeholder: t(CUSTOM_GROUP)
-              }
-            ),
-            /* @__PURE__ */ jsx7("datalist", { id: "eb-var-groups", children: groups.map((g) => /* @__PURE__ */ jsx7("option", { value: g }, g)) })
-          ] }),
-          /* @__PURE__ */ jsxs5("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__ */ jsxs5("div", { className: "eb:flex eb:items-center eb:gap-2 eb:pt-1", children: [
-            editing && /* @__PURE__ */ jsxs5(Button, { variant: "ghost", className: "eb:text-destructive eb:hover:text-destructive", onClick: remove, disabled: busy, children: [
-              /* @__PURE__ */ jsx7(Trash2, {}),
-              t("Delete")
-            ] }),
-            /* @__PURE__ */ jsxs5("div", { className: "eb:ml-auto eb:flex eb:gap-2", children: [
-              /* @__PURE__ */ jsx7(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: busy, children: t("Cancel") }),
-              /* @__PURE__ */ jsxs5(Button, { type: "submit", disabled: busy, children: [
-                busy && /* @__PURE__ */ jsx7(Loader2, { className: "eb:animate-spin" }),
-                editing ? t("Save") : t("Create")
-              ] })
-            ] })
-          ] })
-        ] })
-      ]
-    }
-  ) });
-}
-
-// src/features/variables/VariablePicker.jsx
-import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef2, useState as useState4 } from "react";
-import { Pencil, Plus, Search } from "lucide-react";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-function VariablePicker({ variables, onPick, onCreate = null, onEdit = null, filter }) {
-  const t = useT();
-  const [query, setQuery] = useState4("");
-  const [active, setActive] = useState4(0);
-  const listRef = useRef2(null);
-  const matches = useMemo3(() => {
-    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 = useMemo3(() => [...new Set(matches.map((v) => v.group))], [matches]);
-  const ordered = useMemo3(() => groups.flatMap((g) => matches.filter((v) => v.group === g)), [groups, matches]);
-  useEffect3(() => setActive(0), [query]);
-  useEffect3(() => {
-    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__ */ jsxs6("div", { className: "eb:flex eb:max-h-[min(440px,70vh)] eb:flex-col", "data-testid": "variable-picker", children: [
-    /* @__PURE__ */ jsxs6("div", { className: "eb:relative eb:border-b eb:border-border eb:p-2", children: [
-      /* @__PURE__ */ jsx8(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__ */ jsx8(
-        "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__ */ jsxs6("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__ */ jsxs6("div", { className: "eb:px-2 eb:py-3 eb:text-center eb:text-[12px] eb:text-foreground-muted", children: [
-        /* @__PURE__ */ jsx8("p", { children: t("No variable found.") }),
-        onCreate && query.trim() && /* @__PURE__ */ jsxs6(
-          "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__ */ jsx8(Plus, { className: "eb:size-3.5" }),
-              t("Create \u201C{name}\u201D", { name: query.trim() })
-            ]
-          }
-        )
-      ] }),
-      groups.map((group) => /* @__PURE__ */ jsxs6("div", { role: "group", "aria-label": t(group), children: [
-        /* @__PURE__ */ jsx8("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__ */ jsxs6(
-            "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__ */ jsxs6(
-                  "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__ */ jsx8("span", { className: "eb:min-w-0 eb:flex-1 eb:truncate", children: variable.custom ? variable.label : t(variable.label) }),
-                      /* @__PURE__ */ jsx8("code", { className: "eb:shrink-0 eb:font-mono eb:text-[10.5px] eb:text-foreground-muted", children: tokenOf(variable) })
-                    ]
-                  }
-                ),
-                onEdit && variable.custom && /* @__PURE__ */ jsx8(
-                  "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__ */ jsx8(Pencil, { className: "eb:size-3" })
-                  }
-                )
-              ]
-            },
-            variable.key
-          );
-        })
-      ] }, group))
-    ] }),
-    onCreate && /* @__PURE__ */ jsx8("div", { className: "eb:border-t eb:border-border eb:p-1", children: /* @__PURE__ */ jsxs6(
-      "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__ */ jsx8(Plus, { className: "eb:size-4" }),
-          t("New variable")
-        ]
-      }
-    ) })
-  ] });
-}
-
-// src/features/variables/VariablesMenu.jsx
-import { Fragment, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
-function VariablesMenu({ context }) {
-  const { editor, ready, variables, storage, canManageVariables, reloadVariables } = context;
-  const { t, notify } = useUi();
-  const [open, setOpen] = useState5(false);
-  const [dialog, setDialog] = useState5(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__ */ jsxs7(Fragment, { children: [
-    /* @__PURE__ */ jsxs7(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx9(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs7(
-        Button,
-        {
-          variant: "outline",
-          size: "sm-compact",
-          disabled: !ready,
-          onPointerDown: (e) => e.pointerType === "mouse" && e.preventDefault(),
-          children: [
-            /* @__PURE__ */ jsx9(Braces2, {}),
-            t("Variables")
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx9(
-        PopoverContent,
-        {
-          align: "end",
-          className: "eb:w-80 eb:p-0",
-          onCloseAutoFocus: (e) => e.preventDefault(),
-          onMouseDown: (e) => e.stopPropagation(),
-          children: /* @__PURE__ */ jsx9(VariablePicker, { variables, onPick: insert, ...manage })
-        }
-      )
-    ] }),
-    canManageVariables && /* @__PURE__ */ jsx9(
-      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/PreviewButton.jsx
-import { useMemo as useMemo4, useState as useState6 } from "react";
-import { AlertTriangle, CheckCircle2 as CheckCircle22, Eye, Info as Info2, Loader2 as Loader22, Monitor, RefreshCw, Smartphone } from "lucide-react";
-import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
-var LEVEL_ICON = { warning: AlertTriangle, info: Info2 };
-function QualityList({ quality = [], warnings = [] }) {
-  const { t } = useUi();
-  if (!quality.length && !warnings.length) {
-    return /* @__PURE__ */ jsxs8("p", { className: "eb:flex eb:items-center eb:gap-1.5 eb:text-[12px] eb:text-foreground-lighter", children: [
-      /* @__PURE__ */ jsx10(CheckCircle22, { className: "eb:size-3.5 eb:text-success", "aria-hidden": "true" }),
-      t("Nothing to fix.")
-    ] });
-  }
-  return /* @__PURE__ */ jsxs8("ul", { className: "eb:space-y-1.5", "aria-label": t("Points to check"), children: [
-    quality.map((issue) => {
-      const Icon = LEVEL_ICON[issue.level] || Info2;
-      return /* @__PURE__ */ jsxs8("li", { className: "eb:flex eb:items-start eb:gap-1.5 eb:text-[12px] eb:text-foreground", children: [
-        /* @__PURE__ */ jsx10(
-          Icon,
-          {
-            className: cn(
-              "eb:mt-0.5 eb:size-3.5 eb:shrink-0",
-              issue.level === "warning" ? "eb:text-warning" : "eb:text-foreground-muted"
-            ),
-            "aria-hidden": "true"
-          }
-        ),
-        issue.message
-      ] }, issue.code);
-    }),
-    warnings.slice(0, 5).map((w, i) => /* @__PURE__ */ jsxs8("li", { className: "eb:flex eb:items-start eb:gap-1.5 eb:text-[12px] eb:text-foreground-lighter", children: [
-      /* @__PURE__ */ jsx10(Info2, { className: "eb:mt-0.5 eb:size-3.5 eb:shrink-0 eb:text-foreground-muted", "aria-hidden": "true" }),
-      "MJML: ",
-      w.message
-    ] }, `mjml-${i}`))
-  ] });
-}
-function EmailPreview({ html, loading = false, error = null, device = "desktop", onDeviceChange, onRefresh, hint = true }) {
-  const { t } = useUi();
-  const isMobile = device === "mobile";
-  const srcDoc = useMemo4(() => html || "", [html]);
-  return /* @__PURE__ */ jsxs8("div", { className: "eb:flex eb:h-full eb:min-h-0 eb:flex-col", children: [
-    /* @__PURE__ */ jsxs8("div", { className: "eb:mb-2 eb:flex eb:shrink-0 eb:items-center eb:justify-between eb:gap-2", children: [
-      /* @__PURE__ */ jsxs8("div", { className: "eb:inline-flex eb:rounded-lg2 eb:border eb:border-border-strong eb:bg-surface-75 eb:p-0.5", children: [
-        /* @__PURE__ */ jsxs8(
-          Button,
-          {
-            variant: isMobile ? "ghost" : "secondary",
-            size: "sm-compact",
-            onClick: () => onDeviceChange?.("desktop"),
-            "aria-pressed": !isMobile,
-            children: [
-              /* @__PURE__ */ jsx10(Monitor, {}),
-              t("Desktop")
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs8(
-          Button,
-          {
-            variant: isMobile ? "secondary" : "ghost",
-            size: "sm-compact",
-            onClick: () => onDeviceChange?.("mobile"),
-            "aria-pressed": isMobile,
-            children: [
-              /* @__PURE__ */ jsx10(Smartphone, {}),
-              t("Mobile")
-            ]
-          }
-        )
-      ] }),
-      onRefresh && /* @__PURE__ */ jsxs8(Button, { variant: "outline", size: "sm-compact", onClick: onRefresh, disabled: loading, children: [
-        loading ? /* @__PURE__ */ jsx10(Loader22, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx10(RefreshCw, {}),
-        t("Refresh")
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx10("div", { className: "eb:min-h-0 eb:flex-1 eb:overflow-auto eb:rounded-lg2 eb:border eb:border-border eb:bg-surface-75 eb:p-3", children: error ? /* @__PURE__ */ jsx10("div", { className: "eb:flex eb:h-full eb:items-center eb:justify-center eb:p-6 eb:text-center eb:text-[13px] eb:text-destructive", children: error }) : !srcDoc ? /* @__PURE__ */ jsx10("div", { className: "eb:flex eb:h-full eb:items-center eb:justify-center eb:p-6 eb:text-center eb:text-[13px] eb:text-foreground-lighter", children: loading ? t("Rendering\u2026") : t("Nothing to show yet.") }) : /* @__PURE__ */ jsx10(
-      "div",
-      {
-        className: cn("eb:mx-auto eb:bg-white", isMobile && "eb:shadow-sm"),
-        style: isMobile ? { width: EMAIL_MOBILE_WIDTH } : void 0,
-        children: /* @__PURE__ */ jsx10(
-          "iframe",
-          {
-            sandbox: "",
-            srcDoc,
-            title: t("Email preview"),
-            className: "eb:block eb:w-full eb:border-0 eb:bg-white",
-            style: { height: isMobile ? 760 : 900 }
-          }
-        )
-      }
-    ) }),
-    hint && /* @__PURE__ */ jsx10("p", { className: "eb:mt-2 eb:shrink-0 eb:text-[11px] eb:leading-relaxed eb:text-foreground-lighter", children: t("Indicative preview \u2014 check it with \u201CSend test\u201D.") })
-  ] });
-}
-function PreviewButton({ context }) {
-  const { editor, ready, meta, storage } = context;
-  const { t } = useUi();
-  const [open, setOpen] = useState6(false);
-  const [device, setDevice] = useState6("desktop");
-  const [state, setState] = useState6({ loading: false, html: "", subject: null, preheader: null, warnings: [], quality: [], error: null });
-  const refresh = async () => {
-    setState((s) => ({ ...s, loading: true, error: null }));
-    try {
-      const data = await storage.render({ mjml: editor.exportMjml(), subject: meta.subject, preheader: meta.preheader });
-      setState({
-        loading: false,
-        html: data.html,
-        // Subject and preview text with their variables filled, when the backend returns them.
-        subject: data.subject ?? null,
-        preheader: data.preheader ?? null,
-        warnings: data.warnings || [],
-        quality: data.quality || [],
-        error: null
-      });
-    } catch (error) {
-      setState({ loading: false, html: "", subject: null, preheader: null, warnings: [], quality: [], error: error.message });
-    }
-  };
-  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
-    /* @__PURE__ */ jsxs8(
-      Button,
-      {
-        variant: "outline",
-        size: "sm-compact",
-        disabled: !ready,
-        onClick: () => {
-          setOpen(true);
-          refresh();
-        },
-        children: [
-          /* @__PURE__ */ jsx10(Eye, {}),
-          t("Preview")
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx10(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs8(DialogContent, { className: "eb:flex eb:h-[85vh] eb:max-h-[85vh] eb:flex-col eb:gap-4 eb:sm:max-w-[67.2rem]", children: [
-      /* @__PURE__ */ jsx10(DialogHeader, { children: /* @__PURE__ */ jsxs8("div", { className: "eb:flex eb:items-center eb:gap-3", children: [
-        /* @__PURE__ */ jsx10("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__ */ jsx10(Eye, { className: "eb:size-5" }) }),
-        /* @__PURE__ */ jsxs8("div", { children: [
-          /* @__PURE__ */ jsx10(DialogTitle, { className: "eb:text-base eb:font-normal", children: t("Email preview") }),
-          /* @__PURE__ */ jsx10(DialogDescription, { className: "eb:text-[13px]", children: t("Final rendering, variables filled with samples.") })
-        ] })
-      ] }) }),
-      /* @__PURE__ */ jsxs8("div", { className: "eb:grid eb:min-h-0 eb:flex-1 eb:grid-cols-1 eb:gap-4 eb:md:grid-cols-[minmax(0,1fr)_260px]", children: [
-        /* @__PURE__ */ jsx10(
-          EmailPreview,
-          {
-            html: state.html,
-            loading: state.loading,
-            error: state.error,
-            device,
-            onDeviceChange: setDevice,
-            onRefresh: refresh,
-            hint: typeof storage.sendTest === "function"
-          }
-        ),
-        /* @__PURE__ */ jsxs8("aside", { className: "eb:min-h-0 eb:space-y-5 eb:overflow-y-auto", "aria-busy": state.loading, children: [
-          /* @__PURE__ */ jsxs8("section", { className: "eb:space-y-2", children: [
-            /* @__PURE__ */ jsx10(SectionLabel, { children: t("Inbox") }),
-            /* @__PURE__ */ jsxs8("div", { className: "eb:rounded-lg2 eb:border eb:border-border eb:bg-surface-75 eb:px-3 eb:py-2.5", children: [
-              /* @__PURE__ */ jsx10("p", { className: "eb:text-[13px] eb:font-medium eb:text-foreground", children: (state.subject ?? meta.subject) || t("No subject") }),
-              /* @__PURE__ */ jsx10("p", { className: "eb:text-[12px] eb:text-foreground-muted", children: (state.preheader ?? meta.preheader) || t("No preview text") })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs8("section", { className: "eb:space-y-2", children: [
-            /* @__PURE__ */ jsx10(SectionLabel, { children: t("To check") }),
-            !state.loading && !state.error && /* @__PURE__ */ jsx10(QualityList, { quality: state.quality, warnings: state.warnings })
-          ] })
-        ] })
-      ] })
-    ] }) })
-  ] });
-}
-
-// 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 useState7 } from "react";
-import { CheckCircle2 as CheckCircle23, Loader2 as Loader23, Send, XCircle } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs9 } 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] = useState7(false);
-  const [addresses, setAddresses] = useState7("");
-  const [sending, setSending] = useState7(false);
-  const [report, setReport] = useState7(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__ */ jsxs9(Fragment3, { children: [
-    /* @__PURE__ */ jsxs9(
-      Button,
-      {
-        variant: "outline",
-        size: "sm-compact",
-        disabled: !ready,
-        onClick: () => {
-          setAddresses(readAddresses(testRecipients.join(", ")));
-          setReport(null);
-          setOpen(true);
-        },
-        children: [
-          /* @__PURE__ */ jsx11(Send, {}),
-          t("Test")
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx11(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs9(DialogContent, { className: "eb:sm:max-w-[460px]", children: [
-      /* @__PURE__ */ jsx11(DialogHeader, { children: /* @__PURE__ */ jsxs9("div", { className: "eb:flex eb:items-center eb:gap-3", children: [
-        /* @__PURE__ */ jsx11("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__ */ jsx11(Send, { className: "eb:size-5" }) }),
-        /* @__PURE__ */ jsxs9("div", { children: [
-          /* @__PURE__ */ jsx11(DialogTitle, { className: "eb:text-base eb:font-normal", children: t("Send a test") }),
-          /* @__PURE__ */ jsx11(DialogDescription, { className: "eb:text-[13px]", children: t("The email on screen, to reviewers\u2019 addresses.") })
-        ] })
-      ] }) }),
-      /* @__PURE__ */ jsxs9("div", { className: "eb:space-y-2", children: [
-        /* @__PURE__ */ jsx11(Label, { htmlFor: "eb-test-addresses", children: t("Addresses") }),
-        /* @__PURE__ */ jsx11(
-          Textarea,
-          {
-            id: "eb-test-addresses",
-            value: addresses,
-            onChange: (e) => setAddresses(e.target.value),
-            placeholder: "jane@example.com, john@example.com",
-            rows: 3
-          }
-        )
-      ] }),
-      report && /* @__PURE__ */ jsxs9("ul", { className: "eb:space-y-1", "aria-label": t("Results"), children: [
-        report.results.map((r) => /* @__PURE__ */ jsxs9("li", { className: "eb:flex eb:items-start eb:gap-1.5 eb:text-[12px] eb:text-foreground", children: [
-          r.ok ? /* @__PURE__ */ jsx11(CheckCircle23, { className: "eb:mt-0.5 eb:size-3.5 eb:shrink-0 eb:text-success", "aria-hidden": "true" }) : /* @__PURE__ */ jsx11(XCircle, { className: "eb:mt-0.5 eb:size-3.5 eb:shrink-0 eb:text-destructive", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsxs9("span", { className: "eb:min-w-0 eb:break-all", children: [
-            r.email,
-            r.error ? ` \u2014 ${r.error}` : ""
-          ] })
-        ] }, r.email)),
-        report.invalid.map((email) => /* @__PURE__ */ jsx11("li", { className: "eb:text-[12px] eb:text-foreground-muted", children: t("Ignored (invalid): {email}", { email }) }, `invalid-${email}`))
-      ] }),
-      /* @__PURE__ */ jsxs9("div", { className: "eb:flex eb:justify-end eb:gap-2", children: [
-        /* @__PURE__ */ jsx11(Button, { variant: "outline", onClick: () => setOpen(false), children: t("Close") }),
-        /* @__PURE__ */ jsxs9(Button, { onClick: send, disabled: sending || !emails.length, children: [
-          sending ? /* @__PURE__ */ jsx11(Loader23, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx11(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/index.js
-var FEATURES = [variablesFeature, autosaveFeature, versionsFeature, previewFeature, testEmailFeature];
-var emailBuilderFeatures = createRegistry("emailBuilderFeatures", FEATURES);
-function isFeatureEnabled(id) {
-  const feature = emailBuilderFeatures.get(id);
-  return Boolean(feature && feature.enabled !== false);
-}
-
-// src/ui/EmailBuilder.jsx
-import { useCallback as useCallback3, useEffect as useEffect7, useMemo as useMemo6, useRef as useRef7, useState as useState12 } from "react";
-import { AlertTriangle as AlertTriangle2, Loader2 as Loader25, Save } from "lucide-react";
-
-// src/features/templates/starter.js
-function escapeXml(text) {
-  return String(text ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-}
-var SIDE = 'padding-left="32px" padding-right="32px"';
-var TEXT = `font-family="${FONT_STACK}" color="${PALETTE.ink}"`;
-function createStarterMjml({ sender = {}, buttonUrl = DEFAULT_BUTTON_URL, t = identity } = {}) {
-  const name = escapeXml(sender.name || t("Your company"));
-  const footer = [name, sender.address ? escapeXml(sender.address) : ""].filter(Boolean).join(" \xB7 ");
-  const header = sender.logoUrl ? `<mj-image src="${escapeXml(sender.logoUrl)}" alt="${name}" width="${Number(sender.logoWidth) || 140}px" align="left" ${SIDE}></mj-image>` : `<mj-text ${TEXT} font-size="18px" line-height="24px" font-weight="bold" ${SIDE}>${name}</mj-text>`;
-  return [
-    "<mjml>",
-    `<mj-body background-color="${PALETTE.canvas}" width="600px">`,
-    // Header: logo or sender name.
-    `<mj-section background-color="${PALETTE.surface}" padding-top="28px" padding-bottom="8px">`,
-    "<mj-column>",
-    header,
-    "</mj-column>",
-    "</mj-section>",
-    // Body: headline, text, button.
-    `<mj-section background-color="${PALETTE.surface}" padding-top="8px" padding-bottom="28px">`,
-    "<mj-column>",
-    `<mj-text ${TEXT} font-size="24px" line-height="32px" font-weight="bold" ${SIDE}>${escapeXml(t("Your headline"))}</mj-text>`,
-    `<mj-text ${TEXT} font-size="15px" line-height="24px" ${SIDE}>${escapeXml(t("Hello {name},", { name: "{{contact.firstname}}" }))}<br /><br />${escapeXml(t("Your text."))}</mj-text>`,
-    `<mj-button href="${escapeXml(buttonUrl)}" background-color="${PALETTE.navy}" color="${PALETTE.white}" font-family="${FONT_STACK}" font-size="15px" font-weight="bold" border-radius="6px" inner-padding="12px 28px" align="left" ${SIDE}>${escapeXml(t("Learn more"))}</mj-button>`,
-    "</mj-column>",
-    "</mj-section>",
-    // Footer: sender and unsubscribe link.
-    '<mj-section padding-top="20px" padding-bottom="28px">',
-    "<mj-column>",
-    `<mj-text font-family="${FONT_STACK}" font-size="12px" line-height="18px" color="#6d7484" align="center" ${SIDE}>${footer}<br /><a href="{{ unsubscribe }}" style="color:#6d7484;text-decoration:underline;">${escapeXml(t("Unsubscribe"))}</a></mj-text>`,
-    "</mj-column>",
-    "</mj-section>",
-    "</mj-body>",
-    "</mjml>"
-  ].join("");
-}
-var STARTER_MJML = createStarterMjml();
-
-// 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/storage/client.js
-var StorageError = class extends Error {
-  /** @param {string} message @param {number} status @param {string} [code] */
-  constructor(message, status, code) {
-    super(message);
-    this.name = "StorageError";
-    this.status = status;
-    this.code = code;
-  }
-};
-function assertUploadable(file) {
-  const error = imageUploadError(file);
-  if (error) throw new StorageError(error, 415, "UNSUPPORTED_IMAGE");
-}
-function withDocument(template) {
-  if (!template || !template.document) return template;
-  return { ...template, document: readDocument(template.document) };
-}
-function createHttpStorage({ baseUrl = "/api/email-builder", headers = {}, fetch: fetchImpl } = {}) {
-  const root = baseUrl.replace(/\/+$/, "");
-  const doFetch = fetchImpl || ((input, init) => fetch(input, init));
-  const extraHeaders = () => typeof headers === "function" ? headers() : headers;
-  async function unwrap(res) {
-    const json = await res.json().catch(() => ({}));
-    if (!res.ok || json.error) {
-      throw new StorageError(json.error || `Request failed (HTTP ${res.status})`, res.status, json.code);
-    }
-    return json.data;
-  }
-  async function call(path, init) {
-    const res = await doFetch(`${root}${path}`, {
-      ...init,
-      headers: { "Content-Type": "application/json", ...extraHeaders(), ...init?.headers || {} }
-    });
-    return unwrap(res);
-  }
-  function body(payload) {
-    return JSON.stringify({ ...payload, document: readDocument(payload.document) });
-  }
-  return {
-    load: async (id) => withDocument(await call(`/templates/${encodeURIComponent(id)}`)),
-    create: async (payload) => call("/templates", { method: "POST", body: body(payload) }),
-    duplicate: async (id) => call("/templates", { method: "POST", body: JSON.stringify({ duplicateOf: id }) }),
-    save: async (id, payload) => call(`/templates/${encodeURIComponent(id)}`, { method: "PUT", body: body(payload) }),
-    listVersions: async (id) => call(`/templates/${encodeURIComponent(id)}/versions`),
-    getVersion: async (id, versionId) => withDocument(await call(`/templates/${encodeURIComponent(id)}/versions/${encodeURIComponent(versionId)}`)),
-    render: async (input) => call("/render", { method: "POST", body: JSON.stringify(input) }),
-    sendTest: async (input) => call("/test", { method: "POST", body: JSON.stringify(input) }),
-    listVariables: async () => call("/variables"),
-    saveVariable: async (variable, { create = false } = {}) => create ? call("/variables", { method: "POST", body: JSON.stringify(variable) }) : call(`/variables/${encodeURIComponent(String(variable.key))}`, { method: "PUT", body: JSON.stringify(variable) }),
-    deleteVariable: async (key) => {
-      await call(`/variables/${encodeURIComponent(key)}`, { method: "DELETE" });
-    },
-    async uploadImage(file) {
-      assertUploadable(file);
-      const form = new FormData();
-      form.append("file", file, file.name || "image");
-      const res = await doFetch(`${root}/assets`, { method: "POST", body: form, headers: extraHeaders() });
-      const data = await unwrap(res);
-      return { path: data.path };
-    }
-  };
-}
-function createMemoryStorage({ render, sendTest, assetsPath = DEFAULT_ASSETS_PATH, systemVariables = DEFAULT_VARIABLES } = {}) {
-  const rows = /* @__PURE__ */ new Map();
-  const versions = /* @__PURE__ */ new Map();
-  const images = /* @__PURE__ */ new Map();
-  const customVariables = /* @__PURE__ */ new Map();
-  let nextId = 1;
-  let tick = Date.parse("2026-01-01T00:00:00.000Z");
-  const now = () => new Date(tick += 1e3).toISOString();
-  function toTemplate(row) {
-    return {
-      id: row.id,
-      name: row.name,
-      description: row.description,
-      subject: row.subject,
-      preheader: row.preheader,
-      revision: row.revision,
-      document: readDocument(row.documentJson),
-      mjml: row.mjml,
-      createdAt: row.createdAt,
-      updatedAt: row.updatedAt
-    };
-  }
-  function snapshot(row) {
-    const list = versions.get(String(row.id)) || [];
-    const entry = {
-      id: list.length + 1,
-      versionNumber: list.length + 1,
-      name: row.name,
-      subject: row.subject,
-      createdBy: null,
-      createdAt: row.revision,
-      documentJson: row.documentJson,
-      mjml: row.mjml
-    };
-    versions.set(String(row.id), [...list, entry]);
-    return { id: entry.id, versionNumber: entry.versionNumber };
-  }
-  function rowOf(id) {
-    const row = rows.get(String(id));
-    if (!row) throw new StorageError("Template not found", 404, "NOT_FOUND");
-    return row;
-  }
-  const storage = {
-    async load(id) {
-      return toTemplate(rowOf(id));
-    },
-    async create(payload) {
-      if (!payload.name?.trim()) throw new StorageError("Name required", 400, "NAME_REQUIRED");
-      const at = now();
-      const row = {
-        id: nextId++,
-        name: payload.name.trim(),
-        description: payload.description ?? null,
-        subject: payload.subject ?? null,
-        preheader: payload.preheader ?? null,
-        documentJson: JSON.stringify(readDocument(payload.document)),
-        mjml: payload.mjml,
-        createdAt: at,
-        updatedAt: null,
-        revision: at
-      };
-      rows.set(String(row.id), row);
-      snapshot(row);
-      return { template: toTemplate(row), warnings: [] };
-    },
-    async duplicate(id) {
-      const source = rowOf(id);
-      return storage.create({
-        name: `${source.name} (copy)`,
-        description: source.description,
-        subject: source.subject,
-        preheader: source.preheader,
-        document: readDocument(source.documentJson),
-        mjml: source.mjml
-      });
-    },
-    async save(id, payload) {
-      const row = rowOf(id);
-      if (payload.revision && payload.revision !== row.revision) {
-        throw new StorageError("Template changed in the meantime \u2014 reload it before saving", 409, "CONFLICT");
-      }
-      const at = now();
-      Object.assign(row, {
-        ...payload.name !== void 0 ? { name: payload.name } : {},
-        ...payload.description !== void 0 ? { description: payload.description } : {},
-        ...payload.subject !== void 0 ? { subject: payload.subject } : {},
-        ...payload.preheader !== void 0 ? { preheader: payload.preheader } : {},
-        documentJson: JSON.stringify(readDocument(payload.document)),
-        mjml: payload.mjml,
-        updatedAt: at,
-        revision: at
-      });
-      const version = payload.createVersion ? snapshot(row) : null;
-      const { document: _omit, ...template } = toTemplate(row);
-      return { template, warnings: [], version };
-    },
-    async listVersions(id) {
-      rowOf(id);
-      return [...versions.get(String(id)) || []].reverse().map(({ documentJson: _d, mjml: _m, ...v }) => v);
-    },
-    async getVersion(id, versionId) {
-      const entry = (versions.get(String(id)) || []).find((v) => String(v.id) === String(versionId));
-      if (!entry) throw new StorageError("Version not found", 404, "NOT_FOUND");
-      const { documentJson, ...version } = entry;
-      return { ...version, document: readDocument(documentJson) };
-    },
-    async uploadImage(file) {
-      assertUploadable(file);
-      const digest = await crypto.subtle.digest("SHA-256", await file.arrayBuffer());
-      const hex = [...new Uint8Array(digest)].map((b) => b.toString(16).padStart(2, "0")).join("");
-      const path = `${assetsPath}${hex.slice(0, 32)}.${IMAGE_TYPES[file.type]}`;
-      images.set(path, file);
-      return { path };
-    },
-    async listVariables() {
-      return [...customVariables.values()].map((v) => ({ ...v }));
-    },
-    async saveVariable(input, { create = false } = {}) {
-      const existing = [...systemVariables, ...customVariables.values()];
-      if (!create && !customVariables.has(String(input?.key))) {
-        throw new StorageError("Variable not found", 404, "NOT_FOUND");
-      }
-      const base = create ? {} : customVariables.get(String(input.key));
-      const { variable, errors } = validateCustomVariable({ ...base, ...input }, { existing, editing: create ? null : input.key });
-      if (errors) throw new StorageError(Object.values(errors)[0], 400, "INVALID_VARIABLE");
-      customVariables.set(variable.key, variable);
-      return { ...variable };
-    },
-    async deleteVariable(key) {
-      if (!customVariables.delete(String(key))) throw new StorageError("Variable not found", 404, "NOT_FOUND");
-    },
-    ...render ? { render } : {},
-    ...sendTest ? { sendTest } : {},
-    dump: () => ({
-      rows: [...rows.values()],
-      versions: Object.fromEntries(versions),
-      images: [...images.keys()],
-      variables: [...customVariables.values()]
-    })
-  };
-  return storage;
-}
-
-// src/ui/EmailCanvas.jsx
-import { useEffect as useEffect4, useRef as useRef3 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
-function EmailCanvas({ editor, document = null, onReady, onError, className }) {
-  const ref = useRef3(null);
-  const documentRef = useRef3(document);
-  const callbacks = useRef3({ onReady, onError });
-  callbacks.current = { onReady, onError };
-  useEffect4(() => {
-    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__ */ jsx12("div", { ref, className: cn("eb-canvas eb:h-full eb:w-full", className), "data-testid": "eb-canvas" });
-}
-
-// src/ui/BlockSidebar.jsx
-import {
-  Columns2,
-  Columns3,
-  Image as ImageIcon,
-  MoveVertical,
-  RectangleHorizontal,
-  SeparatorHorizontal,
-  Square,
-  Type
-} from "lucide-react";
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
-var ICONS = {
-  Type,
-  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__ */ jsx13(TooltipWrap, { label: block.description ? t(block.description) : block.description, children: /* @__PURE__ */ jsxs10(
-    "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__ */ jsx13(Icon, { className: "eb:h-5 eb:w-5 eb:text-foreground-lighter", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx13("span", { className: "eb:text-[12px] eb:text-foreground", children: t(block.label) })
-      ]
-    }
-  ) });
-}
-function BlockSidebar({ editor, disabled = false }) {
-  const t = useT();
-  const blocks = editor.listBlocks();
-  return /* @__PURE__ */ jsx13("aside", { "aria-label": t("Blocks"), className: "eb:min-h-0 eb:space-y-5 eb:overflow-y-auto eb:border-r eb:border-border eb:p-3", children: GROUPS2.map((group) => {
-    const items = blocks.filter((b) => b.kind === group.kind && b.mjml);
-    if (!items.length) return null;
-    return /* @__PURE__ */ jsxs10("section", { className: "eb:space-y-2", children: [
-      /* @__PURE__ */ jsx13(SectionLabel, { children: t(group.title) }),
-      /* @__PURE__ */ jsx13("div", { className: "eb:grid eb:grid-cols-2 eb:gap-2", children: items.map((block) => /* @__PURE__ */ jsx13(
-        BlockTile,
-        {
-          block,
-          disabled,
-          onAdd: (id) => editor.addBlock(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 jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
-function ElementActions({ editor, selection }) {
-  const t = useT();
-  if (!selection || !selection.canRemove && !selection.canDuplicate) return null;
-  const horizontal = selection.tagName === "mj-column";
-  const [Prev, Next] = horizontal ? [ArrowLeft, ArrowRight] : [ArrowUp, ArrowDown];
-  const [prevLabel, nextLabel] = horizontal ? [t("Move left"), t("Move right")] : [t("Move up"), t("Move down")];
-  return /* @__PURE__ */ jsxs11("div", { className: "eb:flex eb:items-center eb:gap-0.5 eb:border-b eb:border-border eb:px-3 eb:py-1.5", role: "toolbar", "aria-label": t("Element actions"), children: [
-    /* @__PURE__ */ jsx14(TooltipWrap, { label: prevLabel, children: /* @__PURE__ */ jsx14(
-      Button,
-      {
-        variant: "ghost",
-        size: "icon-sm-compact",
-        "aria-label": prevLabel,
-        disabled: !selection.canMoveUp,
-        onClick: () => editor.move(-1, selection.id),
-        children: /* @__PURE__ */ jsx14(Prev, {})
-      }
-    ) }),
-    /* @__PURE__ */ jsx14(TooltipWrap, { label: nextLabel, children: /* @__PURE__ */ jsx14(
-      Button,
-      {
-        variant: "ghost",
-        size: "icon-sm-compact",
-        "aria-label": nextLabel,
-        disabled: !selection.canMoveDown,
-        onClick: () => editor.move(1, selection.id),
-        children: /* @__PURE__ */ jsx14(Next, {})
-      }
-    ) }),
-    /* @__PURE__ */ jsx14(TooltipWrap, { label: t("Duplicate"), children: /* @__PURE__ */ jsx14(
-      Button,
-      {
-        variant: "ghost",
-        size: "icon-sm-compact",
-        "aria-label": t("Duplicate"),
-        disabled: !selection.canDuplicate,
-        onClick: () => editor.duplicate(selection.id),
-        children: /* @__PURE__ */ jsx14(Copy, {})
-      }
-    ) }),
-    /* @__PURE__ */ jsx14(TooltipWrap, { label: t("Delete (Del)"), children: /* @__PURE__ */ jsx14(
-      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__ */ jsx14(Trash22, {})
-      }
-    ) })
-  ] });
-}
-
-// src/ui/PropertiesPanel.jsx
-import { useMemo as useMemo5, useRef as useRef5 } from "react";
-import { X as X2 } from "lucide-react";
-
-// src/ui/fields.jsx
-import { useEffect as useEffect5, useRef as useRef4, useState as useState9 } from "react";
-
-// src/ui/primitives/color-picker.jsx
-import { useState as useState8 } from "react";
-import { HexAlphaColorPicker } from "react-colorful";
-import { Check } from "lucide-react";
-import { jsx as jsx15, jsxs as jsxs12 } 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] = useState8(false);
-  const valid = isValidHex(value);
-  const normalized = valid ? normalizeHex(value) : "";
-  const emit = (hex) => onChange(normalizeHex(hex));
-  return /* @__PURE__ */ jsxs12("div", { className: cn("eb:flex eb:gap-2", className), children: [
-    /* @__PURE__ */ jsxs12(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx15(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx15(
-        "button",
-        {
-          type: "button",
-          "aria-label": t("Pick a colour"),
-          title: t("Pick a colour"),
-          className: "eb-checker eb:relative eb:h-8 eb:w-[44px] eb:shrink-0 eb:overflow-hidden eb:rounded-lg2 eb:shadow-sm eb:ring-1 eb:ring-black/10 eb:ring-inset eb:transition-transform eb:hover:scale-[1.04]",
-          children: /* @__PURE__ */ jsx15("span", { className: "eb:absolute eb:inset-0", style: { backgroundColor: valid ? value : "transparent" }, "aria-hidden": true })
-        }
-      ) }),
-      /* @__PURE__ */ jsxs12(PopoverContent, { align: "start", className: "eb:w-64 eb:space-y-3 eb:p-3", children: [
-        /* @__PURE__ */ jsx15("div", { className: "eb-picker", children: /* @__PURE__ */ jsx15(HexAlphaColorPicker, { color: valid ? value : FALLBACK_COLOR, onChange: emit }) }),
-        /* @__PURE__ */ jsxs12("div", { className: "eb:flex eb:items-center eb:gap-2", children: [
-          /* @__PURE__ */ jsx15(
-            "span",
-            {
-              className: "eb-checker eb:relative eb:size-8 eb:shrink-0 eb:overflow-hidden eb:rounded-lg2 eb:ring-1 eb:ring-black/10 eb:ring-inset",
-              "aria-hidden": true,
-              children: /* @__PURE__ */ jsx15("span", { className: "eb:absolute eb:inset-0", style: { backgroundColor: valid ? value : "transparent" } })
-            }
-          ),
-          /* @__PURE__ */ jsx15(
-            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__ */ jsx15("div", { className: "eb:grid eb:grid-cols-6 eb:gap-1.5 eb:border-t eb:border-border eb:pt-2.5", children: PRESET_COLORS.map((c) => /* @__PURE__ */ jsx15(
-          "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__ */ jsx15(Check, { className: "eb:absolute eb:inset-0 eb:m-auto eb:size-3.5 eb:text-white eb:drop-shadow-[0_1px_1px_rgba(0,0,0,0.6)]" })
-          },
-          c
-        )) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx15(
-      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 Loader24, Upload } from "lucide-react";
-import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs13 } 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] = useState9(() => toDraft(value));
-  const ref = useRef4(null);
-  const convert = useRef4(toDraft);
-  convert.current = toDraft;
-  useEffect5(() => {
-    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__ */ jsx16(Label, { htmlFor: id, className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children });
-}
-function FieldError({ children }) {
-  return children ? /* @__PURE__ */ jsx16("p", { className: "eb:text-[12px] eb:text-destructive", children }) : null;
-}
-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__ */ jsxs13("div", { ref, className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx16(FieldLabel, { id, children: t(property.label) }),
-    property.type === "textarea" ? /* @__PURE__ */ jsx16(Textarea, { rows: 3, ...shared }) : addon ? /* @__PURE__ */ jsxs13("div", { className: "eb:flex eb:gap-2", children: [
-      /* @__PURE__ */ jsx16(Input, { ...shared, className: "eb:min-w-0 eb:flex-1" }),
-      addon
-    ] }) : /* @__PURE__ */ jsx16(Input, { ...shared }),
-    /* @__PURE__ */ jsx16(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 = useRef4(
-    /** @type {HTMLInputElement|null} */
-    null
-  );
-  const [busy, setBusy] = useState9(false);
-  const [error, setError] = useState9(
-    /** @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__ */ jsxs13(Fragment4, { children: [
-    /* @__PURE__ */ jsx16(
-      "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__ */ jsxs13(
-      Button,
-      {
-        type: "button",
-        variant: "outline",
-        size: "sm",
-        disabled: busy,
-        onClick: () => inputRef.current?.click(),
-        children: [
-          busy ? /* @__PURE__ */ jsx16(Loader24, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx16(Upload, {}),
-          t("Upload")
-        ]
-      }
-    )
-  ] }) : null;
-  return /* @__PURE__ */ jsx16(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__ */ jsxs13("div", { ref, className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx16(FieldLabel, { id, children: t(property.label) }),
-    /* @__PURE__ */ jsxs13("div", { className: "eb:relative", children: [
-      /* @__PURE__ */ jsx16(
-        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__ */ jsx16("span", { className: "eb:pointer-events-none eb:absolute eb:right-3 eb:top-1/2 eb:-translate-y-1/2 eb:text-[12px] eb:text-foreground-muted", children: property.unit || "px" })
-    ] })
-  ] });
-}
-function ColorField({ id, property, value, onCommit }) {
-  const t = useT();
-  const [draft, setDraft, ref] = useDraft(value, asText);
-  const timer = useRef4(null);
-  const latest = useRef4({ value, onCommit });
-  latest.current = { value, onCommit };
-  useEffect5(() => () => 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__ */ jsxs13("div", { ref, className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx16(FieldLabel, { id, children: t(property.label) }),
-    /* @__PURE__ */ jsx16(ColorPicker, { id, value: draft, onChange: change })
-  ] });
-}
-var DEFAULT_OPTION = "__default__";
-function SelectField({ id, property, value, onCommit }) {
-  const t = useT();
-  const current = value || DEFAULT_OPTION;
-  return /* @__PURE__ */ jsxs13("div", { className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx16(FieldLabel, { id, children: t(property.label) }),
-    /* @__PURE__ */ jsxs13(
-      Select,
-      {
-        value: current,
-        onValueChange: (next) => {
-          const v = next === DEFAULT_OPTION ? "" : next;
-          if (v !== (value || "")) onCommit(v || null);
-        },
-        children: [
-          /* @__PURE__ */ jsx16(SelectTrigger, { id, className: "eb:w-full", children: /* @__PURE__ */ jsx16(SelectValue, { placeholder: t("Default") }) }),
-          /* @__PURE__ */ jsxs13(SelectContent, { children: [
-            !(property.options || []).some((o) => !o.value) && /* @__PURE__ */ jsx16(SelectItem, { value: DEFAULT_OPTION, children: t("Default") }),
-            (property.options || []).map((o) => /* @__PURE__ */ jsx16(SelectItem, { value: o.value || DEFAULT_OPTION, children: t(o.label) }, o.value || DEFAULT_OPTION))
-          ] })
-        ]
-      }
-    )
-  ] });
-}
-var ALIGN_ICONS = { left: AlignLeft, center: AlignCenter, right: AlignRight, justify: AlignJustify };
-function AlignField({ id, property, value, onCommit }) {
-  const t = useT();
-  return /* @__PURE__ */ jsxs13("div", { className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx16(FieldLabel, { id, children: t(property.label) }),
-    /* @__PURE__ */ jsx16(
-      "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__ */ jsx16(TooltipWrap, { label: t(option.label), children: /* @__PURE__ */ jsx16(
-            "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__ */ jsx16(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__ */ jsxs13("fieldset", { ref, className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx16("legend", { className: "eb:mb-1.5 eb:text-[12px] eb:text-foreground-lighter", children: t(property.label) }),
-    /* @__PURE__ */ jsx16("div", { className: "eb:grid eb:grid-cols-4 eb:gap-1.5", children: SIDE_LABELS.map(([side, label], i) => /* @__PURE__ */ jsxs13("div", { className: "eb:space-y-1", children: [
-      /* @__PURE__ */ jsx16(
-        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__ */ jsx16("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__ */ jsx16(Field, { id, property, value, onCommit, services });
-}
-
-// src/features/variables/VariableInsertButton.jsx
-import { useState as useState10 } from "react";
-import { Braces as Braces3 } from "lucide-react";
-import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
-function VariableInsertButton({ variables, inputRef, value, onChange, label }) {
-  const [open, setOpen] = useState10(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__ */ jsxs14(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx17(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx17(Button, { variant: "ghost", size: "icon-xs", "aria-label": label, title: label, children: /* @__PURE__ */ jsx17(Braces3, {}) }) }),
-    /* @__PURE__ */ jsx17(PopoverContent, { align: "end", className: "eb:w-72 eb:p-0", onCloseAutoFocus: (e) => e.preventDefault(), children: /* @__PURE__ */ jsx17(VariablePicker, { variables, onPick: insert, filter: (v) => v.kind !== "link" }) })
-  ] });
-}
-
-// src/ui/PropertiesPanel.jsx
-import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs15 } 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__ */ jsxs15("section", { className: "eb:space-y-3", children: [
-    /* @__PURE__ */ jsx18(SectionLabel, { children: t(group) }),
-    properties.map((property) => /* @__PURE__ */ jsx18(
-      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 }) {
-  const t = useT();
-  return /* @__PURE__ */ jsxs15("header", { className: "eb:sticky eb:top-0 eb:z-10 eb:flex eb:h-11 eb:shrink-0 eb:items-center eb:gap-2 eb:border-b eb:border-border eb:bg-background eb:px-4", children: [
-    /* @__PURE__ */ jsx18("h3", { className: "eb:min-w-0 eb:flex-1 eb:text-[13px] eb:font-medium eb:text-foreground", children: /* @__PURE__ */ jsx18(TruncatedText, { children: title }) }),
-    onClose && /* @__PURE__ */ jsx18(Button, { variant: "ghost", size: "icon-sm-compact", onClick: onClose, "aria-label": t("Deselect"), children: /* @__PURE__ */ jsx18(X2, {}) })
-  ] });
-}
-function TemplateSettings({ editor, meta, onMetaChange, changes, showErrors, variables = null }) {
-  const t = useT();
-  const subjectRef = useRef5(null);
-  const preheaderRef = useRef5(null);
-  const rootId = editor.getRootId();
-  const root = useMemo5(() => rootId ? editor.getElement(rootId) : null, [editor, rootId, changes]);
-  const bodyBlock2 = root?.blockId ? editor.getBlock(root.blockId) : null;
-  const field = (key) => (e) => onMetaChange({ ...meta, [key]: e.target.value });
-  return /* @__PURE__ */ jsxs15(Fragment5, { children: [
-    /* @__PURE__ */ jsx18(PanelHeader, { title: t("Email") }),
-    /* @__PURE__ */ jsxs15("div", { className: "eb:space-y-5 eb:p-4", children: [
-      /* @__PURE__ */ jsxs15("section", { className: "eb:space-y-3", children: [
-        /* @__PURE__ */ jsx18(SectionLabel, { children: t("Template") }),
-        /* @__PURE__ */ jsxs15("div", { className: "eb:space-y-1.5", children: [
-          /* @__PURE__ */ jsxs15(Label, { htmlFor: "eb-meta-name", className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children: [
-            t("Name"),
-            " ",
-            /* @__PURE__ */ jsx18("span", { className: "eb:text-destructive", children: "*" })
-          ] }),
-          /* @__PURE__ */ jsx18(
-            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__ */ jsx18("p", { className: "eb:text-[12px] eb:text-destructive", children: t("Name is required") })
-        ] }),
-        /* @__PURE__ */ jsxs15("div", { className: "eb:space-y-1.5", children: [
-          /* @__PURE__ */ jsxs15("div", { className: "eb:flex eb:h-6 eb:items-center eb:justify-between", children: [
-            /* @__PURE__ */ jsx18(Label, { htmlFor: "eb-meta-subject", className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children: t("Subject") }),
-            variables && /* @__PURE__ */ jsx18(
-              VariableInsertButton,
-              {
-                variables,
-                inputRef: subjectRef,
-                value: meta.subject,
-                onChange: (subject) => onMetaChange({ ...meta, subject }),
-                label: t("Insert a variable in the subject")
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx18(Input, { ref: subjectRef, id: "eb-meta-subject", maxLength: 250, value: meta.subject, onChange: field("subject") })
-        ] }),
-        /* @__PURE__ */ jsxs15("div", { className: "eb:space-y-1.5", children: [
-          /* @__PURE__ */ jsxs15("div", { className: "eb:flex eb:h-6 eb:items-center eb:justify-between", children: [
-            /* @__PURE__ */ jsx18(Label, { htmlFor: "eb-meta-preheader", className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children: t("Preview text") }),
-            variables && /* @__PURE__ */ jsx18(
-              VariableInsertButton,
-              {
-                variables,
-                inputRef: preheaderRef,
-                value: meta.preheader,
-                onChange: (preheader) => onMetaChange({ ...meta, preheader }),
-                label: t("Insert a variable in the preview text")
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx18(
-            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__ */ jsx18(PropertyGroups, { editor, element: root, block: bodyBlock2, idPrefix: "eb-page" })
-    ] })
-  ] });
-}
-function PropertiesPanel({
-  editor,
-  selection,
-  meta,
-  onMetaChange,
-  changes,
-  actions = null,
-  showErrors = false,
-  services = null,
-  variables = null
-}) {
-  const t = useT();
-  const block = selection?.blockId ? editor.getBlock(selection.blockId) : null;
-  return /* @__PURE__ */ jsx18("aside", { "aria-label": t("Properties"), className: "eb:min-h-0 eb:overflow-y-auto eb:border-l eb:border-border", "data-testid": "eb-properties", children: !selection ? /* @__PURE__ */ jsx18(
-    TemplateSettings,
-    {
-      editor,
-      meta,
-      onMetaChange,
-      changes,
-      showErrors,
-      variables
-    }
-  ) : /* @__PURE__ */ jsxs15(Fragment5, { children: [
-    /* @__PURE__ */ jsx18(PanelHeader, { title: t(selection.label), onClose: () => editor.select(null) }),
-    actions,
-    /* @__PURE__ */ jsxs15("div", { className: "eb:space-y-5 eb:p-4", children: [
-      selection.tagName === "mj-button" && /* @__PURE__ */ jsxs15("section", { className: "eb:space-y-3", children: [
-        /* @__PURE__ */ jsx18(SectionLabel, { children: t(GROUPS.content) }),
-        /* @__PURE__ */ jsx18(
-          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__ */ jsx18("p", { className: "eb:text-[12px] eb:text-foreground-muted", children: t("Double-click the text to edit it.") }),
-      /* @__PURE__ */ jsx18(PropertyGroups, { editor, element: selection, block, idPrefix: "eb-prop", services })
-    ] })
-  ] }) });
-}
-
-// src/ui/Toolbar.jsx
-import { ArrowLeft as ArrowLeft2, Monitor as Monitor2, Redo2, Smartphone as Smartphone2, Undo2 } from "lucide-react";
-import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
-function Toolbar({
-  title,
-  status,
-  ready,
-  canUndo,
-  canRedo,
-  onUndo,
-  onRedo,
-  device,
-  onDeviceChange,
-  onBack,
-  actions = null
-}) {
-  const t = useT();
-  return /* @__PURE__ */ jsxs16("div", { className: "eb:flex eb:h-12 eb:shrink-0 eb:items-center eb:gap-3 eb:border-b eb:border-border eb:px-3", children: [
-    /* @__PURE__ */ jsxs16(Button, { variant: "ghost", size: "sm-compact", onClick: onBack, children: [
-      /* @__PURE__ */ jsx19(ArrowLeft2, {}),
-      t("Back")
-    ] }),
-    /* @__PURE__ */ jsx19(Separator, { orientation: "vertical", className: "eb:h-5" }),
-    /* @__PURE__ */ jsxs16("div", { className: "eb:min-w-0 eb:max-w-[320px] eb:flex-1", children: [
-      /* @__PURE__ */ jsx19("p", { className: "eb:text-[13px] eb:font-medium eb:text-foreground", children: /* @__PURE__ */ jsx19(TruncatedText, { children: title || t("New template") }) }),
-      /* @__PURE__ */ jsx19("p", { className: "eb:text-[11px] eb:text-foreground-muted", role: "status", "aria-live": "polite", children: status })
-    ] }),
-    /* @__PURE__ */ jsxs16("div", { className: "eb:flex eb:items-center eb:gap-2", children: [
-      /* @__PURE__ */ jsxs16("div", { className: "eb:flex eb:items-center eb:gap-0.5", children: [
-        /* @__PURE__ */ jsx19(TooltipWrap, { label: t("Undo (Ctrl+Z)"), children: /* @__PURE__ */ jsx19(Button, { variant: "ghost", size: "icon-sm-compact", onClick: onUndo, disabled: !ready || !canUndo, "aria-label": t("Undo"), children: /* @__PURE__ */ jsx19(Undo2, {}) }) }),
-        /* @__PURE__ */ jsx19(TooltipWrap, { label: t("Redo (Ctrl+Y)"), children: /* @__PURE__ */ jsx19(Button, { variant: "ghost", size: "icon-sm-compact", onClick: onRedo, disabled: !ready || !canRedo, "aria-label": t("Redo"), children: /* @__PURE__ */ jsx19(Redo2, {}) }) })
-      ] }),
-      /* @__PURE__ */ jsx19(Tabs, { value: device, onValueChange: onDeviceChange, children: /* @__PURE__ */ jsxs16(TabsList, { "aria-label": t("Device"), children: [
-        /* @__PURE__ */ jsxs16(TabsTrigger, { value: "desktop", disabled: !ready, children: [
-          /* @__PURE__ */ jsx19(Monitor2, {}),
-          t("Desktop")
-        ] }),
-        /* @__PURE__ */ jsxs16(TabsTrigger, { value: "mobile", disabled: !ready, children: [
-          /* @__PURE__ */ jsx19(Smartphone2, {}),
-          t("Mobile")
-        ] })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsx19("div", { className: "eb:ml-auto eb:flex eb:items-center eb:gap-2", children: actions })
-  ] });
-}
-
-// src/ui/useEmailEditorState.js
-import { useCallback as useCallback2, useEffect as useEffect6, useRef as useRef6, useState as useState11 } from "react";
-var DIRTY_CHECK_MS = 150;
-function useEmailEditorState(editor) {
-  const [state, setState] = useState11(() => ({
-    status: editor?.status || "idle",
-    selection: null,
-    canUndo: false,
-    canRedo: false,
-    device: "desktop",
-    changes: 0,
-    dirty: false
-  }));
-  const clean = useRef6(null);
-  const forced = useRef6(false);
-  const timer = useRef6(null);
-  const snapshot = useCallback2(() => {
-    try {
-      return editor.status === "ready" ? editor.exportMjml() : null;
-    } catch {
-      return null;
-    }
-  }, [editor]);
-  const markClean = useCallback2((saved = null) => {
-    clean.current = saved ?? snapshot();
-    forced.current = false;
-    const current = snapshot();
-    setState((s) => ({ ...s, dirty: current !== null && current !== clean.current }));
-  }, [snapshot]);
-  const checkDirty = useCallback2(() => {
-    if (forced.current) return true;
-    const current = snapshot();
-    return current !== null && current !== clean.current;
-  }, [snapshot]);
-  const markDirty = useCallback2(() => {
-    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 Fragment6, jsx as jsx20, jsxs as jsxs17 } 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,
+function EmailStudio({
   storage: injectedStorage,
-  templateId: initialTemplateId,
-  variables: variablesProp,
+  locale = "en",
+  messages,
+  onNotify,
   sender,
-  starterMjml,
-  testRecipients,
-  initialMjml,
-  initialMeta,
+  templates,
   onClose,
-  onSaved,
-  onDirtyChange,
-  dirtyCheckRef,
+  libraryProps,
+  builderProps,
   className
 }) {
-  const { t, locale, notify, confirm } = useUi();
-  const editor = useMemo6(() => injected || createDefaultEmailEditor({ locale }), [injected, locale]);
-  const storage = useMemo6(() => injectedStorage || createHttpStorage(), [injectedStorage]);
-  const systemVariables = useMemo6(() => defineVariables(variablesProp || DEFAULT_VARIABLES), [variablesProp]);
-  const [customVariables, setCustomVariables] = useState12([]);
-  const variables = useMemo6(() => mergeVariables(systemVariables, customVariables), [systemVariables, customVariables]);
-  const canManageVariables = typeof storage.saveVariable === "function" && typeof storage.listVariables === "function";
-  const reloadVariables = useCallback3(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 = useMemo6(() => starterMjml || createStarterMjml({ sender, t }), [starterMjml, sender, t]);
-  const services = useMemo6(() => ({ uploadImage: (file) => storage.uploadImage(file) }), [storage]);
-  const state = useEmailEditorState(editor);
-  const autosaveOn = isFeatureEnabled("autosave");
-  const autosaveOptions = emailBuilderFeatures.get("autosave")?.options || {};
-  const [template, setTemplate] = useState12({ id: initialTemplateId, revision: null, savedAt: null, auto: false });
-  const [boot, setBoot] = useState12({ status: "loading", document: null, draft: false, message: null });
-  const [meta, setMeta] = useState12(EMPTY_META);
-  const [savedMeta, setSavedMeta] = useState12(EMPTY_META);
-  const [saving, setSaving] = useState12(null);
-  const [showErrors, setShowErrors] = useState12(false);
-  const [autosaveBlocked, setAutosaveBlocked] = useState12(null);
-  const [engineError, setEngineError] = useState12(null);
-  const [attempt, setAttempt] = useState12(0);
-  const ready = state.status === "ready";
-  const metaDirty = !sameMeta(meta, savedMeta);
-  const dirty = state.dirty || metaDirty;
-  const timeOf = useCallback3(
-    (date) => date ? new Date(date).toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit" }) : "",
-    [locale]
-  );
-  const booted = useRef7(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 = useCallback3(() => {
-    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 = useCallback3(
-    () => editor.status === "ready" && checkDirty() || metaDirty,
-    [editor, checkDirty, metaDirty]
-  );
-  const reportDirty = useRef7(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 = useRef7(false);
-  const latest = useRef7({});
-  latest.current = { template, meta, onSaved };
-  const save = useCallback3(
-    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);
-          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;
-          }
+  const storage = useMemo(() => injectedStorage || createHttpStorage(), [injectedStorage]);
+  const [session, setSession] = useState(null);
+  const [lastId, setLastId] = useState(null);
+  const shared = { storage, locale, messages, onNotify, sender, templates, className };
+  if (session) {
+    return /* @__PURE__ */ jsx(
+      EmailBuilder,
+      {
+        ...shared,
+        templates: [],
+        ...builderProps,
+        templateId: session.templateId,
+        initialMjml: session.start?.mjml,
+        initialMeta: session.start?.meta,
+        onSaved: (template) => {
+          if (template?.id != null) setLastId(template.id);
+          builderProps?.onSaved?.(template);
+        },
+        onClose: () => {
+          setSession(null);
+          builderProps?.onClose?.();
         }
-        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 = useMemo6(
-    () => 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,
-    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)
-  );
-  return /* @__PURE__ */ jsxs17(
-    "div",
-    {
-      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-template-id": template.id || "",
-      children: [
-        /* @__PURE__ */ jsx20(
-          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,
-            actions: /* @__PURE__ */ jsxs17(Fragment6, { children: [
-              toolbarFeatures.map((feature) => {
-                const Action = feature.toolbar;
-                return /* @__PURE__ */ jsx20(Action, { context: featureContext }, feature.id);
-              }),
-              /* @__PURE__ */ jsxs17(Button, { size: "sm-compact", onClick: () => save(), disabled: !ready || saving !== null, children: [
-                saving === "manual" ? /* @__PURE__ */ jsx20(Loader25, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx20(Save, {}),
-                t("Save")
-              ] })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsxs17("div", { className: "eb:grid eb:min-h-0 eb:flex-1 eb:grid-cols-[224px_minmax(0,1fr)_296px] eb:grid-rows-1", children: [
-          /* @__PURE__ */ jsx20(BlockSidebar, { editor, disabled: !ready }),
-          /* @__PURE__ */ jsx20("div", { className: "eb:relative eb:min-w-0 eb:bg-surface-75", "aria-busy": !ready, children: boot.status === "error" || engineError ? /* @__PURE__ */ jsxs17("div", { role: "alert", className: "eb:flex eb:h-full eb:flex-col eb:items-center eb:justify-center eb:gap-2 eb:p-6 eb:text-center", children: [
-            /* @__PURE__ */ jsx20(AlertTriangle2, { className: "eb:size-6 eb:text-destructive", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx20("p", { className: "eb:text-[13px] eb:text-foreground", children: boot.status === "error" ? t("The template could not be loaded.") : t("The builder could not start.") }),
-            /* @__PURE__ */ jsx20("p", { className: "eb:max-w-sm eb:text-[12px] eb:text-foreground-muted", children: boot.message || engineError }),
-            engineError && /* @__PURE__ */ jsx20(
-              Button,
-              {
-                variant: "outline",
-                size: "sm-compact",
-                onClick: () => {
-                  setEngineError(null);
-                  setAttempt((n) => n + 1);
-                },
-                children: t("Retry")
-              }
-            )
-          ] }) : /* @__PURE__ */ jsxs17(Fragment6, { children: [
-            boot.status === "ready" && /* @__PURE__ */ jsx20(
-              EmailCanvas,
-              {
-                editor,
-                document: boot.document,
-                onReady,
-                onError: (error) => setEngineError(error.message)
-              },
-              attempt
-            ),
-            !ready && /* @__PURE__ */ jsxs17("div", { className: "eb:absolute eb:inset-0 eb:flex eb:items-center eb:justify-center eb:bg-surface-75", role: "status", "aria-live": "polite", children: [
-              /* @__PURE__ */ jsx20(Loader25, { className: "eb:size-6 eb:animate-spin eb:text-foreground-muted", "aria-hidden": "true" }),
-              /* @__PURE__ */ jsx20("span", { className: "eb:sr-only", children: t("Loading the builder") })
-            ] })
-          ] }) }),
-          /* @__PURE__ */ jsx20(
-            PropertiesPanel,
-            {
-              editor,
-              selection: ready ? state.selection : null,
-              meta,
-              onMetaChange: setMeta,
-              changes: state.changes,
-              showErrors,
-              actions: /* @__PURE__ */ jsx20(ElementActions, { editor, selection: state.selection }),
-              services,
-              variables
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx20(NoticeArea, {})
-      ]
-    }
-  );
-}
-function EmailBuilder({ locale = "en", messages, onNotify, ...props }) {
-  return /* @__PURE__ */ jsx20(UiProvider, { locale, messages, onNotify, children: /* @__PURE__ */ jsx20(Builder, { ...props, templateId: props.templateId ?? null }) });
-}
-
-// src/ui/EmailBuilderBoundary.jsx
-import { Component } from "react";
-import { AlertTriangle as AlertTriangle3, ArrowLeft as ArrowLeft3, RefreshCw as RefreshCw2 } from "lucide-react";
-import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
-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__ */ jsx21("div", { style: { height: "100%" }, children: this.props.children }, attempt);
-    }
-    return /* @__PURE__ */ jsxs18(
-      "div",
-      {
-        role: "alert",
-        className: "eb-root eb:flex eb:h-full eb:flex-col eb:items-center eb:justify-center eb:gap-3 eb:p-6 eb:text-center",
-        children: [
-          /* @__PURE__ */ jsx21(AlertTriangle3, { className: "eb:size-6 eb:text-destructive", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx21("p", { className: "eb:text-[13px] eb:text-foreground", children: t("The builder could not load.") }),
-          /* @__PURE__ */ jsxs18("div", { className: "eb:flex eb:gap-2", children: [
-            this.props.onClose && /* @__PURE__ */ jsxs18(Button, { variant: "outline", size: "sm", onClick: this.props.onClose, children: [
-              /* @__PURE__ */ jsx21(ArrowLeft3, {}),
-              t("Back")
-            ] }),
-            /* @__PURE__ */ jsxs18(Button, { size: "sm", onClick: this.retry, children: [
-              /* @__PURE__ */ jsx21(RefreshCw2, {}),
-              t("Retry")
-            ] })
-          ] })
-        ]
-      }
+      },
+      session.key
     );
   }
-};
-
-// src/index.js
-function createDefaultEmailEditor(options = {}) {
-  const { locale } = options;
-  return createEmailEditor({
-    adapter: createGrapesJsAdapter({ locale }),
-    blocks: emailBlocks,
-    features: emailBuilderFeatures
-  });
+  return /* @__PURE__ */ jsx(
+    TemplateLibrary,
+    {
+      ...shared,
+      ...libraryProps,
+      selectedId: lastId,
+      onClose,
+      onEdit: (template) => {
+        setLastId(template.id);
+        setSession({ key: Date.now(), templateId: template.id, start: null });
+      },
+      onCreate: (start) => setSession({ key: Date.now(), templateId: null, start })
+    }
+  );
 }
 export {
   CUSTOM_GROUP,
@@ -4239,13 +123,17 @@ export {
   EmailBuilderBoundary,
   EmailCanvas,
   EmailDocumentError,
+  EmailStudio,
   LOCALES,
   STARTER_MJML,
   StorageError,
+  TEMPLATE_GALLERY,
+  TemplateLibrary,
   UiProvider,
   absoluteAssetUrls,
   applyVariables,
   applyVariablesToText,
+  buildGallery,
   createDefaultEmailEditor,
   createDocument,
   createEmailEditor,
@@ -4270,6 +158,7 @@ export {
   useT,
   useUi,
   usedVariables,
-  validateCustomVariable
+  validateCustomVariable,
+  withPlaceholderImages
 };
 //# sourceMappingURL=index.js.map