@emabuild/core 0.2.0 → 0.4.0

package/dist/index-CpMbWdgn.js

@@ -1,3092 +0,0 @@
-import { html as p, LitElement as $, css as k } from "lit";
-import { property as b, customElement as C, state as ht } from "lit/decorators.js";
-import { unsafeHTML as U } from "lit/directives/unsafe-html.js";
-import { styleMap as ut } from "lit/directives/style-map.js";
-function gt() {
-  const e = {};
-  return {
-    getCounters() {
-      return { ...e };
-    },
-    setCounters(t) {
-      for (const o of Object.keys(e))
-        delete e[o];
-      Object.assign(e, t);
-    },
-    next(t) {
-      const o = e[t] ?? 0;
-      return e[t] = o + 1, e[t];
-    }
-  };
-}
-class ft {
-  constructor() {
-    this.listeners = /* @__PURE__ */ new Map();
-  }
-  /** Register a listener for an event */
-  on(t, o) {
-    this.listeners.has(t) || this.listeners.set(t, /* @__PURE__ */ new Set()), this.listeners.get(t).add(o);
-  }
-  /** Remove a specific listener */
-  off(t, o) {
-    this.listeners.get(t)?.delete(o);
-  }
-  /** Emit an event with a payload. Errors in listeners are caught and logged. */
-  emit(t, o) {
-    this.listeners.get(t)?.forEach((n) => {
-      try {
-        n(o);
-      } catch (i) {
-        console.error(`[emabuild] Error in "${t}" listener:`, i);
-      }
-    });
-  }
-  /** Remove all listeners, optionally scoped to a single event */
-  removeAllListeners(t) {
-    t ? this.listeners.delete(t) : this.listeners.clear();
-  }
-}
-class bt {
-  constructor(t = 50) {
-    this.undoStack = [], this.redoStack = [], this.maxHistory = t;
-  }
-  /** Whether there are states to undo to */
-  get canUndo() {
-    return this.undoStack.length > 0;
-  }
-  /** Whether there are states to redo to */
-  get canRedo() {
-    return this.redoStack.length > 0;
-  }
-  /** Save current design to the undo stack before a mutation */
-  push(t) {
-    this.undoStack.push(structuredClone(t)), this.undoStack.length > this.maxHistory && this.undoStack.shift(), this.redoStack = [];
-  }
-  /** Restore the previous state, pushing current state to redo. Returns the restored design or undefined. */
-  undo(t) {
-    const o = this.undoStack.pop();
-    if (o)
-      return this.redoStack.push(structuredClone(t)), o;
-  }
-  /** Restore the next state, pushing current state to undo. Returns the restored design or undefined. */
-  redo(t) {
-    const o = this.redoStack.pop();
-    if (o)
-      return this.undoStack.push(structuredClone(t)), o;
-  }
-  /** Clear all history (e.g. when loading a new design) */
-  clear() {
-    this.undoStack = [], this.redoStack = [];
-  }
-}
-function mt() {
-  return {
-    counters: { u_row: 0, u_column: 0 },
-    body: {
-      id: "u_body",
-      rows: [],
-      headers: [],
-      footers: [],
-      values: {
-        backgroundColor: "#e7e7e7",
-        contentAlign: "center",
-        contentVerticalAlign: "center",
-        contentWidth: "600px",
-        fontFamily: { label: "Arial", value: "arial,helvetica,sans-serif" },
-        textColor: "#000000",
-        linkStyle: {
-          body: !0,
-          linkColor: "#0000ee",
-          linkHoverColor: "#0000ee",
-          linkUnderline: !0,
-          linkHoverUnderline: !0
-        },
-        preheaderText: "",
-        popupPosition: "center",
-        popupWidth: "600px",
-        popupHeight: "auto",
-        borderRadius: "10px",
-        popupBackgroundColor: "#FFFFFF",
-        popupBackgroundImage: { url: "", fullWidth: !0, repeat: "no-repeat", center: !0, cover: !0 },
-        popupOverlay_backgroundColor: "rgba(0, 0, 0, 0.1)",
-        popupCloseButton_position: "top-right",
-        popupCloseButton_backgroundColor: "#DDDDDD",
-        popupCloseButton_iconColor: "#000000",
-        popupCloseButton_borderRadius: "0px",
-        popupCloseButton_margin: "0px",
-        popupCloseButton_action: {
-          name: "close_popup",
-          attrs: { onClick: "document.querySelector('.u-popup-container').style.display = 'none';" }
-        },
-        _meta: { htmlID: "u_body", htmlClassNames: "u_body" }
-      }
-    },
-    schemaVersion: 16
-  };
-}
-function xt(e, t) {
-  const o = e.next("u_row"), n = t.map(() => {
-    const i = e.next("u_column");
-    return {
-      id: `u_column_${i}`,
-      contents: [],
-      values: {
-        backgroundColor: "",
-        padding: "0px",
-        border: {},
-        borderRadius: "0px",
-        _meta: { htmlID: `u_column_${i}`, htmlClassNames: "u_column" }
-      }
-    };
-  });
-  return {
-    id: `u_row_${o}`,
-    cells: t,
-    columns: n,
-    values: {
-      displayCondition: null,
-      columns: !1,
-      backgroundColor: "",
-      columnsBackgroundColor: "",
-      backgroundImage: { url: "", fullWidth: !0, repeat: !1, center: !0, cover: !1 },
-      padding: "0px",
-      anchor: "",
-      hideDesktop: !1,
-      hideMobile: !1,
-      _meta: { htmlID: `u_row_${o}`, htmlClassNames: "u_row" }
-    }
-  };
-}
-function yt(e, t, o = {}) {
-  const n = e.next(`u_content_${t}`), i = `u_content_${t}_${n}`;
-  return {
-    id: i,
-    type: t,
-    values: {
-      containerPadding: "10px",
-      anchor: "",
-      hideDesktop: !1,
-      hideMobile: !1,
-      displayCondition: null,
-      _meta: { htmlID: i, htmlClassNames: `u_content_${t}` },
-      ...o
-    }
-  };
-}
-function N(e, t) {
-  return e.body.rows.find((o) => o.id === t);
-}
-function j(e, t) {
-  for (const o of e.body.rows) {
-    const n = o.columns.find((i) => i.id === t);
-    if (n) return n;
-  }
-}
-function W(e, t) {
-  for (const o of e.body.rows)
-    for (const n of o.columns) {
-      const i = n.contents.find((s) => s.id === t);
-      if (i) return i;
-    }
-}
-function wt(e, t) {
-  for (const o of e.body.rows)
-    for (const n of o.columns)
-      if (n.contents.some((i) => i.id === t)) return n;
-}
-function vt(e, t) {
-  for (const o of e.body.rows)
-    if (o.columns.some((n) => n.id === t)) return o;
-}
-function q(e, t) {
-  return e.body.rows.findIndex((o) => o.id === t);
-}
-class $t {
-  constructor() {
-    this.history = new bt(), this.counterManager = gt(), this.subscribers = /* @__PURE__ */ new Set(), this.channelSubscribers = /* @__PURE__ */ new Map(), this.events = new ft(), this._selectedId = null, this._hoveredId = null, this._viewMode = "desktop", this._activeTab = "content", this.design = mt();
-  }
-  // ── Subscriptions ──────────────────────────────────────────
-  /** Subscribe to ALL state changes (legacy). Returns an unsubscribe function. */
-  subscribe(t) {
-    return this.subscribers.add(t), () => this.subscribers.delete(t);
-  }
-  /**
-   * Subscribe to specific channels only. The callback is invoked only
-   * when one of the listed channels fires. Returns an unsubscribe function.
-   *
-   * @example
-   * ```ts
-   * // Only re-render when the design changes, not on hover/selection
-   * store.subscribeChannels(['design'], () => this.requestUpdate());
-   * ```
-   */
-  subscribeChannels(t, o) {
-    for (const n of t)
-      this.channelSubscribers.has(n) || this.channelSubscribers.set(n, /* @__PURE__ */ new Set()), this.channelSubscribers.get(n).add(o);
-    return () => {
-      for (const n of t)
-        this.channelSubscribers.get(n)?.delete(o);
-    };
-  }
-  /** Notify legacy (all) subscribers */
-  notify() {
-    this.subscribers.forEach((t) => t());
-  }
-  /** Notify only subscribers of specific channels + legacy subscribers */
-  notifyChannels(...t) {
-    const o = /* @__PURE__ */ new Set();
-    for (const n of this.subscribers) o.add(n);
-    for (const n of t) {
-      const i = this.channelSubscribers.get(n);
-      if (i) for (const s of i) o.add(s);
-    }
-    o.forEach((n) => n());
-  }
-  // ── Getters ────────────────────────────────────────────────
-  /** Get the full design document */
-  getDesign() {
-    return this.design;
-  }
-  /** Get the design body */
-  getBody() {
-    return this.design.body;
-  }
-  /** Get all rows */
-  getRows() {
-    return this.design.body.rows;
-  }
-  /** Get body-level values (background, fonts, etc.) */
-  getBodyValues() {
-    return this.design.body.values;
-  }
-  get selectedId() {
-    return this._selectedId;
-  }
-  get hoveredId() {
-    return this._hoveredId;
-  }
-  get viewMode() {
-    return this._viewMode;
-  }
-  get activeTab() {
-    return this._activeTab;
-  }
-  get canUndo() {
-    return this.history.canUndo;
-  }
-  get canRedo() {
-    return this.history.canRedo;
-  }
-  // ── Design Loading ─────────────────────────────────────────
-  /** Load a design document, resetting history and selection */
-  loadDesign(t) {
-    this.design = structuredClone(t), this.counterManager.setCounters(this.design.counters), this.history.clear(), this._selectedId = null, this.notifyChannels("design", "selection"), this.events.emit("design:loaded", { design: this.design });
-  }
-  // ── Undo / Redo ────────────────────────────────────────────
-  undo() {
-    const t = this.history.undo(this.design);
-    t && (this.design = t, this.counterManager.setCounters(this.design.counters), this.notifyChannels("design"), this.emitUpdate("content_updated"));
-  }
-  redo() {
-    const t = this.history.redo(this.design);
-    t && (this.design = t, this.counterManager.setCounters(this.design.counters), this.notifyChannels("design"), this.emitUpdate("content_updated"));
-  }
-  // ── Selection / UI State ───────────────────────────────────
-  select(t) {
-    this._selectedId = t, this.notifyChannels("selection");
-  }
-  hover(t) {
-    this._hoveredId = t, this.notifyChannels("hover");
-  }
-  setViewMode(t) {
-    this._viewMode = t, this.notifyChannels("viewMode");
-  }
-  setActiveTab(t) {
-    this._activeTab = t, this.notifyChannels("activeTab");
-  }
-  // ── Row Operations ─────────────────────────────────────────
-  /** Add a row at the given index (or at the end) */
-  addRow(t, o) {
-    this.history.push(this.design);
-    const n = this.design.body.rows, i = structuredClone(t);
-    o !== void 0 && o >= 0 && o <= n.length ? n.splice(o, 0, i) : n.push(i), this.syncCounters(), this.notifyChannels("design"), this.emitUpdate("row_added", i);
-  }
-  /** Remove a row by ID */
-  removeRow(t) {
-    const o = q(this.design, t);
-    o !== -1 && (this.history.push(this.design), this.design.body.rows.splice(o, 1), this._selectedId === t && (this._selectedId = null), this.notifyChannels("design"), this.emitUpdate("row_removed"));
-  }
-  /** Move a row from one index to another */
-  moveRow(t, o) {
-    this.history.push(this.design);
-    const n = this.design.body.rows, [i] = n.splice(t, 1);
-    n.splice(o, 0, i), this.notifyChannels("design"), this.emitUpdate("row_reordered");
-  }
-  /** Duplicate a row, assigning fresh IDs to all nested elements */
-  duplicateRow(t) {
-    const o = N(this.design, t);
-    if (!o) return;
-    this.history.push(this.design);
-    const n = structuredClone(o), i = this.counterManager.next("u_row");
-    n.id = `u_row_${i}`, n.values._meta = { htmlID: n.id, htmlClassNames: "u_row" };
-    for (const r of n.columns) {
-      const a = this.counterManager.next("u_column");
-      r.id = `u_column_${a}`, r.values._meta = { htmlID: r.id, htmlClassNames: "u_column" };
-      for (const d of r.contents) {
-        const c = this.counterManager.next(`u_content_${d.type}`);
-        d.id = `u_content_${d.type}_${c}`, d.values._meta = { htmlID: d.id, htmlClassNames: `u_content_${d.type}` };
-      }
-    }
-    const s = q(this.design, t);
-    this.design.body.rows.splice(s + 1, 0, n), this.syncCounters(), this.notifyChannels("design"), this.emitUpdate("row_added", n);
-  }
-  /** Get the index of a row */
-  getRowIndex(t) {
-    return q(this.design, t);
-  }
-  /** Update row-level values */
-  updateRowValues(t, o) {
-    const n = N(this.design, t);
-    n && (this.history.push(this.design), Object.assign(n.values, o), this.notifyChannels("design"), this.emitUpdate("content_updated"));
-  }
-  // ── Column Operations ──────────────────────────────────────
-  /** Update column-level values */
-  updateColumnValues(t, o) {
-    const n = j(this.design, t);
-    n && (this.history.push(this.design), Object.assign(n.values, o), this.notifyChannels("design"), this.emitUpdate("content_updated"));
-  }
-  // ── Content Operations ─────────────────────────────────────
-  /** Add content to a column at the given index */
-  addContent(t, o, n) {
-    const i = j(this.design, t);
-    if (!i) return;
-    this.history.push(this.design);
-    const s = structuredClone(o);
-    n !== void 0 && n >= 0 && n <= i.contents.length ? i.contents.splice(n, 0, s) : i.contents.push(s), this.syncCounters(), this.notifyChannels("design"), this.emitUpdate("content_added", s);
-  }
-  /** Remove a content block by ID */
-  removeContent(t) {
-    for (const o of this.design.body.rows)
-      for (const n of o.columns) {
-        const i = n.contents.findIndex((s) => s.id === t);
-        if (i !== -1) {
-          this.history.push(this.design), n.contents.splice(i, 1), this._selectedId === t && (this._selectedId = null), this.notifyChannels("design"), this.emitUpdate("content_removed");
-          return;
-        }
-      }
-  }
-  /** Update content values by ID */
-  updateContentValues(t, o) {
-    const n = W(this.design, t);
-    n && (this.history.push(this.design), Object.assign(n.values, o), this.notifyChannels("design"), this.emitUpdate("content_updated"));
-  }
-  /** Move a content block to a different column at a given index */
-  moveContent(t, o, n) {
-    const i = W(this.design, t);
-    if (!i) return;
-    this.history.push(this.design);
-    for (const r of this.design.body.rows)
-      for (const a of r.columns) {
-        const d = a.contents.findIndex((c) => c.id === t);
-        if (d !== -1) {
-          a.contents.splice(d, 1);
-          break;
-        }
-      }
-    const s = j(this.design, o);
-    s && s.contents.splice(n, 0, i), this.notifyChannels("design"), this.emitUpdate("content_reordered");
-  }
-  /** Duplicate a content block, inserting the copy right after the original */
-  duplicateContent(t) {
-    const o = W(this.design, t);
-    if (o)
-      for (const n of this.design.body.rows)
-        for (const i of n.columns) {
-          const s = i.contents.findIndex((r) => r.id === t);
-          if (s !== -1) {
-            this.history.push(this.design);
-            const r = structuredClone(o), a = this.counterManager.next(`u_content_${o.type}`);
-            r.id = `u_content_${o.type}_${a}`, r.values._meta = { htmlID: r.id, htmlClassNames: `u_content_${o.type}` }, i.contents.splice(s + 1, 0, r), this.syncCounters(), this.notifyChannels("design"), this.emitUpdate("content_added", r);
-            return;
-          }
-        }
-  }
-  // ── Body Values ────────────────────────────────────────────
-  /** Update body-level values (background, fonts, etc.) */
-  updateBodyValues(t) {
-    this.history.push(this.design), Object.assign(this.design.body.values, t), this.notifyChannels("design"), this.emitUpdate("body_updated");
-  }
-  // ── Lookups (delegate to design-lookup) ────────────────────
-  findRow(t) {
-    return N(this.design, t);
-  }
-  findColumn(t) {
-    return j(this.design, t);
-  }
-  findContent(t) {
-    return W(this.design, t);
-  }
-  findParentColumn(t) {
-    return wt(this.design, t);
-  }
-  findParentRow(t) {
-    return vt(this.design, t);
-  }
-  // ── Factory Methods (delegate to design-factory) ───────────
-  /** Create a new row with the given column layout */
-  createRow(t) {
-    const o = xt(this.counterManager, t);
-    return this.syncCounters(), o;
-  }
-  /** Create a new content block for the given tool type */
-  createContent(t, o = {}) {
-    const n = yt(this.counterManager, t, o);
-    return this.syncCounters(), n;
-  }
-  // ── Private Helpers ────────────────────────────────────────
-  syncCounters() {
-    this.design.counters = this.counterManager.getCounters();
-  }
-  emitUpdate(t, o) {
-    this.events.emit("design:updated", { type: t, item: o });
-  }
-}
-class kt {
-  constructor() {
-    this.tools = /* @__PURE__ */ new Map(), this.lazyLoaders = /* @__PURE__ */ new Map(), this.lazyMeta = /* @__PURE__ */ new Map(), this.loadingPromises = /* @__PURE__ */ new Map();
-  }
-  /** Register a tool eagerly (available immediately) */
-  register(t) {
-    this.tools.set(t.name, t), this.lazyLoaders.delete(t.name), this.lazyMeta.delete(t.name);
-  }
-  /**
-   * Register a tool lazily. The tool's code is only loaded when first needed.
-   * Provide metadata (name, label, icon) so the tool can appear in the sidebar.
-   *
-   * @param meta - Display metadata for the sidebar palette
-   * @param loader - Async function that imports and returns the tool definition
-   *
-   * @example
-   * ```ts
-   * registry.registerLazy(
-   *   { name: 'timer', label: 'Timer', icon: '<svg>...</svg>', position: 11 },
-   *   () => import('./built-in/timer-tool.js').then(m => m.timerTool),
-   * );
-   * ```
-   */
-  registerLazy(t, o) {
-    this.tools.has(t.name) || (this.lazyMeta.set(t.name, t), this.lazyLoaders.set(t.name, o));
-  }
-  /** Get a tool by name. Returns undefined if not loaded yet (use ensureLoaded for lazy tools). */
-  get(t) {
-    return this.tools.get(t);
-  }
-  /** Check if a tool is registered (eager or lazy) */
-  has(t) {
-    return this.tools.has(t) || this.lazyLoaders.has(t);
-  }
-  /** Check if a tool is fully loaded and ready to render */
-  isLoaded(t) {
-    return this.tools.has(t);
-  }
-  /**
-   * Ensure a lazy tool is loaded. Returns the tool definition.
-   * If the tool is already loaded, returns it immediately.
-   * If it's being loaded, returns the in-flight promise.
-   */
-  async ensureLoaded(t) {
-    if (this.tools.has(t)) return this.tools.get(t);
-    if (this.loadingPromises.has(t)) return this.loadingPromises.get(t);
-    const o = this.lazyLoaders.get(t);
-    if (!o) return;
-    const n = o().then((i) => (this.tools.set(t, i), this.lazyLoaders.delete(t), this.lazyMeta.delete(t), this.loadingPromises.delete(t), i));
-    return this.loadingPromises.set(t, n), n;
-  }
-  /**
-   * Get all tools for display in the sidebar palette.
-   * Returns both loaded tools and lazy tool metadata, sorted by position.
-   */
-  getAll() {
-    return Array.from(this.tools.values()).sort((t, o) => (t.position ?? 0) - (o.position ?? 0));
-  }
-  /**
-   * Get all tool names and display metadata (including lazy tools not yet loaded).
-   * Used by the sidebar to show all available tools.
-   */
-  getAllMeta() {
-    const t = [];
-    for (const o of this.tools.values())
-      t.push({ name: o.name, label: o.label, icon: o.icon, position: o.position });
-    for (const o of this.lazyMeta.values())
-      t.push(o);
-    return t.sort((o, n) => (o.position ?? 0) - (n.position ?? 0));
-  }
-  /** Get default values for a tool. Loads lazily if needed (sync — returns empty if not loaded). */
-  getDefaultValues(t) {
-    const o = this.tools.get(t);
-    if (!o) return {};
-    const n = { ...o.defaultValues };
-    for (const i of Object.values(o.options))
-      for (const [s, r] of Object.entries(i.options))
-        s in n || (n[s] = r.defaultValue);
-    return n;
-  }
-  /** Get property groups for a tool */
-  getPropertyGroups(t) {
-    return this.tools.get(t)?.options ?? {};
-  }
-}
-const L = {
-  /** ID of the content currently being dragged (null if not dragging content) */
-  draggingContentId: null,
-  startContentDrag(e) {
-    this.draggingContentId = e;
-  },
-  reset() {
-    this.draggingContentId = null;
-  }
-};
-function Z(e) {
-  const t = document.createElement("div");
-  return Object.assign(t.style, {
-    position: "absolute",
-    left: "0",
-    right: "0",
-    height: "3px",
-    background: e,
-    borderRadius: "2px",
-    pointerEvents: "none",
-    zIndex: "1000",
-    display: "none",
-    boxShadow: `0 0 6px ${e}80`
-  }), t;
-}
-function tt(e, t, o, n, i = "4px") {
-  e.parentNode !== t && (e.remove(), t.appendChild(e));
-  const r = (t instanceof ShadowRoot ? t.host : t).getBoundingClientRect();
-  let a;
-  o.length === 0 || n === 0 ? a = o.length === 0 ? 0 : o[0].getBoundingClientRect().top - r.top : n >= o.length ? a = o[o.length - 1].getBoundingClientRect().bottom - r.top : a = o[n].getBoundingClientRect().top - r.top, Object.assign(e.style, {
-    display: "block",
-    top: `${a}px`,
-    left: i,
-    right: i,
-    width: "auto"
-  });
-}
-function I(e) {
-  e && (e.style.display = "none");
-}
-function K(e, t) {
-  const o = (e instanceof ShadowRoot, e.children);
-  for (const n of Array.from(o)) {
-    const i = n;
-    t(i), i.shadowRoot && K(i.shadowRoot, t), i.children?.length && K(i, t);
-  }
-}
-function et(e, t) {
-  const o = [];
-  return K(e, (n) => {
-    n.matches?.(t) && o.push(n);
-  }), o;
-}
-class Ct {
-  constructor(t, o, n) {
-    this.currentDrop = null, this.contentIndicator = null, this.rowIndicator = null, this.onDragOver = (i) => {
-      const s = i.dataTransfer?.types || [], r = s.includes("application/maileditor-tool"), a = s.includes("application/maileditor-layout"), d = s.includes("application/maileditor-content") || !!L.draggingContentId;
-      !r && !d && !a || (i.preventDefault(), i.dataTransfer.dropEffect = r || a ? "copy" : "move", a ? (this.currentDrop = this.findRowDropTarget(i.clientY), I(this.contentIndicator), this.showRowIndicator()) : (this.currentDrop = this.findContentDropTarget(i.clientX, i.clientY), I(this.rowIndicator), this.showContentIndicator()));
-    }, this.onDrop = (i) => {
-      i.preventDefault(), this.hideAllIndicators();
-      const s = this.currentDrop, r = i.dataTransfer?.getData("application/maileditor-layout");
-      if (r) {
-        this.handleLayoutDrop(JSON.parse(r), s), this.reset();
-        return;
-      }
-      const a = i.dataTransfer?.getData("application/maileditor-tool");
-      if (a) {
-        this.handleToolDrop(a, s), this.reset();
-        return;
-      }
-      const d = i.dataTransfer?.getData("application/maileditor-content") || L.draggingContentId;
-      d && this.handleContentDrop(d, s), this.reset();
-    }, this.onDragEnd = () => {
-      this.hideAllIndicators(), this.reset();
-    }, this.onDragLeave = (i) => {
-      const s = i.relatedTarget;
-      (!s || !this.root.contains(s)) && (this.hideAllIndicators(), this.currentDrop = null);
-    }, this.store = t, this.toolRegistry = o, this.root = n;
-  }
-  /** Attach all drag event listeners to the shadow root */
-  attach() {
-    this.root.addEventListener("dragover", this.onDragOver), this.root.addEventListener("drop", this.onDrop), this.root.addEventListener("dragend", this.onDragEnd), this.root.addEventListener("dragleave", this.onDragLeave), this.contentIndicator = Z("#3b82f6"), this.rowIndicator = Z("#8b5cf6");
-  }
-  /** Remove all event listeners and clean up indicators */
-  detach() {
-    this.root.removeEventListener("dragover", this.onDragOver), this.root.removeEventListener("drop", this.onDrop), this.root.removeEventListener("dragend", this.onDragEnd), this.root.removeEventListener("dragleave", this.onDragLeave), this.contentIndicator?.remove(), this.rowIndicator?.remove();
-  }
-  // ── Drop Handlers ──────────────────────────────────────────
-  handleLayoutDrop(t, o = this.currentDrop) {
-    const n = this.store.createRow(t), i = o?.type === "row" ? o.rowIndex : void 0;
-    this.store.addRow(n, i);
-  }
-  async handleToolDrop(t, o) {
-    if (await this.toolRegistry.ensureLoaded(t), o?.type === "content" && o.columnId) {
-      const n = this.toolRegistry.getDefaultValues(t), i = this.store.createContent(t, n);
-      this.store.addContent(o.columnId, i, o.contentIndex), this.store.select(i.id);
-    } else {
-      const n = this.store.createRow([1]);
-      this.store.addRow(n);
-      const i = this.toolRegistry.getDefaultValues(t), s = this.store.createContent(t, i);
-      this.store.addContent(n.columns[0].id, s), this.store.select(s.id);
-    }
-  }
-  handleContentDrop(t, o) {
-    o?.type === "content" && o.columnId && (this.store.moveContent(t, o.columnId, o.contentIndex), this.store.select(t));
-  }
-  // ── Drop Target Detection ─────────────────────────────────
-  findRowDropTarget(t) {
-    const o = this.root.querySelector("me-editor-canvas");
-    if (!o?.shadowRoot) return null;
-    const n = Array.from(o.shadowRoot.querySelectorAll("me-row-renderer"));
-    if (n.length === 0) return { type: "row", rowIndex: 0, y: 0 };
-    let i = Math.abs(t - n[0].getBoundingClientRect().top), s = { type: "row", rowIndex: 0, y: n[0].getBoundingClientRect().top };
-    for (let r = 0; r < n.length; r++) {
-      const a = n[r].getBoundingClientRect().bottom, d = Math.abs(t - a);
-      d < i && (i = d, s = { type: "row", rowIndex: r + 1, y: a });
-    }
-    return s;
-  }
-  findContentDropTarget(t, o) {
-    const n = et(this.root, "me-column-renderer");
-    let i = null, s = 1 / 0;
-    for (const r of n) {
-      const a = r.dataset.columnId;
-      if (!a || !r.shadowRoot) continue;
-      const d = r.getBoundingClientRect();
-      if (t < d.left || t > d.right) continue;
-      const c = Array.from(r.shadowRoot.querySelectorAll("me-content-renderer"));
-      if (c.length === 0) {
-        const u = Math.abs(o - (d.top + d.height / 2));
-        u < s && (s = u, i = { type: "content", columnId: a, contentIndex: 0, y: d.top + d.height / 2 });
-        continue;
-      }
-      const h = c[0].getBoundingClientRect().top;
-      let g = Math.abs(o - h);
-      g < s && (s = g, i = { type: "content", columnId: a, contentIndex: 0, y: h });
-      for (let u = 0; u < c.length; u++) {
-        const f = c[u].getBoundingClientRect(), w = c[u + 1]?.getBoundingClientRect(), x = w ? (f.bottom + w.top) / 2 : f.bottom;
-        g = Math.abs(o - x), g < s && (s = g, i = { type: "content", columnId: a, contentIndex: u + 1, y: x });
-      }
-    }
-    return i;
-  }
-  // ── Indicator Positioning ──────────────────────────────────
-  showContentIndicator() {
-    if (!this.contentIndicator || !this.currentDrop?.columnId) {
-      I(this.contentIndicator);
-      return;
-    }
-    const o = et(this.root, "me-column-renderer").find((i) => i.dataset.columnId === this.currentDrop.columnId);
-    if (!o?.shadowRoot) return;
-    const n = Array.from(o.shadowRoot.querySelectorAll("me-content-renderer"));
-    tt(this.contentIndicator, o.shadowRoot, n, this.currentDrop.contentIndex ?? 0, "4px");
-  }
-  showRowIndicator() {
-    if (!this.rowIndicator || !this.currentDrop) {
-      I(this.rowIndicator);
-      return;
-    }
-    const t = this.root.querySelector("me-editor-canvas"), o = t?.shadowRoot?.querySelector(".canvas-body");
-    if (!o) return;
-    const n = Array.from(t.shadowRoot.querySelectorAll("me-row-renderer"));
-    tt(this.rowIndicator, o, n, this.currentDrop.rowIndex ?? 0, "0");
-  }
-  hideAllIndicators() {
-    I(this.contentIndicator), I(this.rowIndicator);
-  }
-  reset() {
-    this.currentDrop = null, L.reset();
-  }
-}
-function l(e, t, o = "") {
-  const n = e[t];
-  return typeof n == "string" && n !== "" ? n : typeof n == "number" ? String(n) : o;
-}
-function ot(e) {
-  return typeof e == "string" ? e : e && typeof e == "object" && "url" in e && e.url || "";
-}
-function nt(e) {
-  if (e && typeof e == "object") {
-    const t = e;
-    return {
-      width: typeof t.width == "number" ? t.width : void 0,
-      maxWidth: typeof t.maxWidth == "string" ? t.maxWidth : void 0
-    };
-  }
-  return {};
-}
-function _t(e) {
-  const t = e.action;
-  if (t && typeof t == "object") {
-    const o = t.values;
-    return {
-      href: o?.href || "",
-      target: o?.target || "_blank"
-    };
-  }
-  return {
-    href: l(e, "href"),
-    target: l(e, "target", "_blank")
-  };
-}
-function it(e, t = "") {
-  const o = e.text;
-  if (typeof o == "string" && o !== "") return o;
-  const n = e.textJson;
-  if (typeof n == "string")
-    try {
-      const i = JSON.parse(n), s = [], r = (a) => {
-        typeof a.text == "string" && s.push(a.text), a.type === "linebreak" && s.push("<br/>");
-        const d = a.children;
-        d && d.forEach(r);
-      };
-      if (r(i.root || i), s.length > 0) return s.join("");
-    } catch {
-    }
-  return t;
-}
-function Y(e, t = "arial,helvetica,sans-serif") {
-  const o = e.fontFamily;
-  if (typeof o == "string" && o !== "") return o;
-  if (o && typeof o == "object") {
-    const n = o, i = n.value || t, s = n.url;
-    if (s && typeof document < "u") {
-      const r = `emabuild-font-${i.replace(/[^a-z]/gi, "")}`;
-      if (!document.getElementById(r)) {
-        const a = document.createElement("link");
-        a.id = r, a.rel = "stylesheet", a.href = s, document.head.appendChild(a);
-      }
-    }
-    return i;
-  }
-  return t;
-}
-function st(e) {
-  const t = e.buttonColors;
-  if (t && typeof t == "object") {
-    const o = t;
-    return {
-      bg: o.backgroundColor || l(e, "backgroundColor", "#3b82f6"),
-      color: o.color || l(e, "textColor", "#ffffff")
-    };
-  }
-  return {
-    bg: l(e, "backgroundColor", "#3b82f6"),
-    color: l(e, "textColor", "#ffffff")
-  };
-}
-function ve(e, t) {
-  if (typeof e != "string") return t;
-  try {
-    return JSON.parse(e);
-  } catch {
-    return t;
-  }
-}
-function z(e, t) {
-  const { padding: o, align: n = "left", extraTdStyle: i = "" } = t;
-  return `<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
-  <tbody><tr><td style="${`padding:${o};font-family:arial,helvetica,sans-serif;${i}`}" align="${n}">
-    ${e}
-  </td></tr></tbody>
-</table>`;
-}
-function St(e, t, o) {
-  const { bgColor: n, textColor: i, fontSize: s, fontWeight: r, borderRadius: a } = o, d = parseInt(a) || 0;
-  if (d <= 0) return "";
-  const c = Math.round(d / 20 * 100);
-  return `<!--[if mso]>
-  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${t}" style="height:auto;v-text-anchor:middle;width:auto;" arcsize="${c}%" stroke="f" fillcolor="${n}">
-    <w:anchorlock/>
-    <center style="color:${i};font-family:arial,helvetica,sans-serif;font-size:${s};font-weight:${r};">${e}</center>
-  </v:roundrect>
-  <![endif]-->`;
-}
-const Dt = {
-  name: "text",
-  label: "Text",
-  icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7V4h16v3"/><path d="M9 20h6"/><path d="M12 4v16"/></svg>',
-  supportedDisplayModes: ["email", "web"],
-  position: 1,
-  options: {
-    text: {
-      title: "Text",
-      options: {
-        text: {
-          label: "Text Content",
-          defaultValue: '<p style="font-size: 14px;">This is a new text block. Change the text.</p>',
-          widget: "rich_text"
-        }
-      }
-    },
-    style: {
-      title: "Style",
-      options: {
-        color: { label: "Text Color", defaultValue: "#000000", widget: "color_picker" },
-        backgroundColor: { label: "Background Color", defaultValue: "", widget: "color_picker" },
-        textAlign: { label: "Text Align", defaultValue: "left", widget: "alignment" },
-        lineHeight: {
-          label: "Line Height",
-          defaultValue: "140%",
-          widget: "dropdown",
-          widgetParams: { options: [
-            { label: "100%", value: "100%" },
-            { label: "120%", value: "120%" },
-            { label: "140%", value: "140%" },
-            { label: "160%", value: "160%" },
-            { label: "180%", value: "180%" },
-            { label: "200%", value: "200%" }
-          ] }
-        }
-      }
-    },
-    spacing: {
-      title: "Spacing",
-      options: {
-        containerPadding: { label: "Padding", defaultValue: "10px", widget: "padding" }
-      }
-    },
-    general: {
-      title: "General",
-      options: {
-        anchor: { label: "Anchor", defaultValue: "", widget: "text" },
-        hideDesktop: { label: "Hide on Desktop", defaultValue: !1, widget: "toggle" },
-        hideMobile: { label: "Hide on Mobile", defaultValue: !1, widget: "toggle" }
-      }
-    }
-  },
-  defaultValues: {
-    text: '<p style="font-size: 14px;">This is a new text block. Change the text.</p>',
-    color: "#000000",
-    backgroundColor: "",
-    lineHeight: "140%",
-    containerPadding: "10px",
-    textAlign: "left"
-  },
-  renderer: {
-    renderEditor(e) {
-      const t = l(e, "backgroundColor", "transparent"), o = l(e, "color", "inherit"), n = l(e, "lineHeight", "140%"), i = l(e, "textAlign", "left"), s = Y(e), r = l(e, "text");
-      return p`
-        <div style="background-color:${t};color:${o};line-height:${n};text-align:${i};font-family:${s};">
-          ${U(r)}
-        </div>
-      `;
-    },
-    renderHtml(e) {
-      const t = l(e, "containerPadding", "10px"), o = l(e, "backgroundColor"), n = l(e, "color", "#000000"), i = l(e, "lineHeight", "140%"), s = l(e, "textAlign", "left"), r = l(e, "text"), a = o ? `background-color:${o};` : "", d = `<div style="font-size:14px;color:${n};line-height:${i};text-align:${s};">${r}</div>`;
-      return z(d, { padding: t, extraTdStyle: a });
-    }
-  }
-};
-const Rt = {
-  name: "heading",
-  label: "Heading",
-  icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 12h12"/><path d="M6 4v16"/><path d="M18 4v16"/></svg>',
-  supportedDisplayModes: ["email", "web"],
-  position: 2,
-  options: {
-    text: {
-      title: "Heading",
-      options: {
-        text: { label: "Text", defaultValue: "Heading", widget: "text" },
-        headingType: {
-          label: "Heading Type",
-          defaultValue: "h1",
-          widget: "dropdown",
-          widgetParams: { options: [
-            { label: "H1", value: "h1" },
-            { label: "H2", value: "h2" },
-            { label: "H3", value: "h3" },
-            { label: "H4", value: "h4" }
-          ] }
-        }
-      }
-    },
-    style: {
-      title: "Style",
-      options: {
-        fontSize: {
-          label: "Font Size",
-          defaultValue: "22px",
-          widget: "dropdown",
-          widgetParams: { options: [
-            { label: "12px", value: "12px" },
-            { label: "14px", value: "14px" },
-            { label: "16px", value: "16px" },
-            { label: "18px", value: "18px" },
-            { label: "20px", value: "20px" },
-            { label: "22px", value: "22px" },
-            { label: "26px", value: "26px" },
-            { label: "30px", value: "30px" },
-            { label: "36px", value: "36px" },
-            { label: "48px", value: "48px" },
-            { label: "60px", value: "60px" }
-          ] }
-        },
-        color: { label: "Text Color", defaultValue: "#000000", widget: "color_picker" },
-        textAlign: { label: "Text Align", defaultValue: "left", widget: "alignment" },
-        fontWeight: {
-          label: "Font Weight",
-          defaultValue: "700",
-          widget: "dropdown",
-          widgetParams: { options: [
-            { label: "Normal", value: "400" },
-            { label: "Medium", value: "500" },
-            { label: "Semi Bold", value: "600" },
-            { label: "Bold", value: "700" },
-            { label: "Extra Bold", value: "800" }
-          ] }
-        },
-        lineHeight: {
-          label: "Line Height",
-          defaultValue: "140%",
-          widget: "dropdown",
-          widgetParams: { options: [
-            { label: "100%", value: "100%" },
-            { label: "120%", value: "120%" },
-            { label: "140%", value: "140%" },
-            { label: "160%", value: "160%" },
-            { label: "180%", value: "180%" },
-            { label: "200%", value: "200%" }
-          ] }
-        },
-        letterSpacing: {
-          label: "Letter Spacing",
-          defaultValue: "0px",
-          widget: "number_unit",
-          widgetParams: { unit: "px", min: -5, max: 50, step: 0.1 }
-        }
-      }
-    },
-    spacing: {
-      title: "Spacing",
-      options: {
-        containerPadding: { label: "Padding", defaultValue: "10px", widget: "padding" }
-      }
-    },
-    general: {
-      title: "General",
-      options: {
-        anchor: { label: "Anchor", defaultValue: "", widget: "text" },
-        hideDesktop: { label: "Hide on Desktop", defaultValue: !1, widget: "toggle" },
-        hideMobile: { label: "Hide on Mobile", defaultValue: !1, widget: "toggle" }
-      }
-    }
-  },
-  defaultValues: {
-    text: "Heading",
-    headingType: "h1",
-    fontSize: "22px",
-    color: "#000000",
-    textAlign: "left",
-    fontWeight: "700",
-    lineHeight: "140%",
-    letterSpacing: "0px",
-    containerPadding: "10px"
-  },
-  renderer: {
-    renderEditor(e) {
-      const t = {
-        padding: l(e, "containerPadding", "10px"),
-        fontSize: l(e, "fontSize", "22px"),
-        color: l(e, "color", "#000000"),
-        textAlign: l(e, "textAlign", "left"),
-        fontWeight: l(e, "fontWeight", "700"),
-        lineHeight: l(e, "lineHeight", "140%"),
-        letterSpacing: l(e, "letterSpacing", "normal"),
-        fontFamily: Y(e)
-      }, o = it(e, "Heading");
-      return p`<div style=${ut(t)}>${U(o)}</div>`;
-    },
-    renderHtml(e) {
-      const t = l(e, "containerPadding", "10px"), o = l(e, "fontSize", "22px"), n = l(e, "color", "#000000"), i = l(e, "textAlign", "left"), s = l(e, "fontWeight", "700"), r = l(e, "lineHeight", "140%"), a = l(e, "letterSpacing", "normal"), d = Y(e), c = l(e, "headingType", "h1"), h = it(e, "Heading"), g = `<${c} style="margin:0;font-size:${o};color:${n};text-align:${i};font-weight:${s};line-height:${r};letter-spacing:${a};font-family:${d};">${h}</${c}>`;
-      return z(g, { padding: t });
-    }
-  }
-}, Tt = {
-  name: "paragraph",
-  label: "Paragraph",
-  icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><line x1="3" y1="14" x2="17" y2="14"/></svg>',
-  supportedDisplayModes: ["email", "web"],
-  position: 3,
-  options: {
-    text: {
-      title: "Paragraph",
-      options: {
-        text: {
-          label: "Text",
-          defaultValue: '<p style="font-size:14px;line-height:1.6;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>',
-          widget: "rich_text"
-        }
-      }
-    },
-    style: {
-      title: "Style",
-      options: {
-        color: { label: "Text Color", defaultValue: "#374151", widget: "color_picker" },
-        textAlign: { label: "Text Align", defaultValue: "left", widget: "alignment" },
-        lineHeight: { label: "Line Height", defaultValue: "160%", widget: "text" },
-        letterSpacing: { label: "Letter Spacing", defaultValue: "normal", widget: "text" }
-      }
-    },
-    spacing: {
-      title: "Spacing",
-      options: {
-        containerPadding: { label: "Padding", defaultValue: "10px", widget: "padding" }
-      }
-    }
-  },
-  defaultValues: {
-    text: '<p style="font-size:14px;line-height:1.6;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>',
-    color: "#374151",
-    lineHeight: "160%",
-    letterSpacing: "normal",
-    textAlign: "left",
-    containerPadding: "10px"
-  },
-  renderer: {
-    renderEditor(e) {
-      const t = l(e, "color", "#374151"), o = l(e, "lineHeight", "160%"), n = l(e, "textAlign", "left");
-      return p`<div style="color:${t};line-height:${o};text-align:${n};">${U(l(e, "text"))}</div>`;
-    },
-    renderHtml(e) {
-      const t = l(e, "containerPadding", "10px"), o = l(e, "color", "#374151"), n = l(e, "lineHeight", "160%"), i = l(e, "textAlign", "left"), s = l(e, "letterSpacing", "normal"), r = `<div style="font-size:14px;color:${o};line-height:${n};text-align:${i};letter-spacing:${s};word-wrap:break-word;">${l(e, "text")}</div>`;
-      return z(r, { padding: t });
-    }
-  }
-}, It = {
-  name: "image",
-  label: "Image",
-  icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>',
-  supportedDisplayModes: ["email", "web"],
-  position: 3,
-  options: {
-    image: {
-      title: "Image",
-      options: {
-        src: { label: "Image URL", defaultValue: "", widget: "text" },
-        alt: { label: "Alt Text", defaultValue: "", widget: "text" },
-        href: { label: "Link URL", defaultValue: "", widget: "text" },
-        target: { label: "Link Target", defaultValue: "_blank", widget: "text" }
-      }
-    },
-    style: {
-      title: "Style",
-      options: {
-        width: {
-          label: "Width",
-          defaultValue: "100%",
-          widget: "dropdown",
-          widgetParams: { options: [
-            { label: "Auto", value: "auto" },
-            { label: "25%", value: "25%" },
-            { label: "50%", value: "50%" },
-            { label: "75%", value: "75%" },
-            { label: "100%", value: "100%" }
-          ] }
-        },
-        align: { label: "Align", defaultValue: "center", widget: "alignment" },
-        borderRadius: { label: "Border Radius", defaultValue: "0px", widget: "text" }
-      }
-    },
-    spacing: {
-      title: "Spacing",
-      options: { containerPadding: { label: "Padding", defaultValue: "10px", widget: "padding" } }
-    },
-    general: {
-      title: "General",
-      options: {
-        anchor: { label: "Anchor", defaultValue: "", widget: "text" },
-        hideDesktop: { label: "Hide on Desktop", defaultValue: !1, widget: "toggle" },
-        hideMobile: { label: "Hide on Mobile", defaultValue: !1, widget: "toggle" }
-      }
-    }
-  },
-  defaultValues: {
-    src: "https://placehold.co/600x200/e2e8f0/64748b?text=Drop+Image+Here",
-    alt: "Image",
-    href: "",
-    target: "_blank",
-    width: "100%",
-    maxWidth: "100%",
-    align: "center",
-    borderRadius: "0px",
-    containerPadding: "10px"
-  },
-  renderer: {
-    renderEditor(e) {
-      const t = ot(e.src), o = l(e, "alt"), i = nt(e.src).maxWidth || l(e, "width", "100%"), s = l(e, "borderRadius", "0px"), r = l(e, "textAlign", l(e, "align", "center"));
-      return t ? p`<div style="text-align:${r};"><img src=${t} alt=${o} style="display:inline-block;max-width:100%;width:${i};border-radius:${s};border:0;" /></div>` : p`<div style="text-align:${r};"><div style="background:#f1f5f9;border:2px dashed #cbd5e1;border-radius:8px;padding:40px 20px;text-align:center;color:#94a3b8;font-size:13px;">No image set. Enter a URL in the property panel.</div></div>`;
-    },
-    renderHtml(e, t) {
-      const o = l(e, "containerPadding", "10px"), n = ot(e.src), i = l(e, "alt"), s = _t(e), r = nt(e.src), a = r.maxWidth || l(e, "width", "100%"), d = l(e, "borderRadius", "0px"), c = l(e, "textAlign", l(e, "align", "center"));
-      let h;
-      a.includes("%") ? h = Math.round(t.columnWidth * (parseFloat(a) / 100)) : a === "auto" ? h = r.width || t.columnWidth : h = parseInt(a) || t.columnWidth;
-      const g = d !== "0px" ? `border-radius:${d};` : "", u = `<img align="${c}" border="0" src="${n}" alt="${i}" title="${i}" style="display:block;border:0;height:auto;width:100%;max-width:${h}px;${g}" width="${h}" />`, f = s.href ? `<a href="${s.href}" target="${s.target}" style="text-decoration:none;">${u}</a>` : u;
-      return z(f, { padding: o, align: c });
-    }
-  }
-}, Mt = {
-  name: "button",
-  label: "Button",
-  icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="10" rx="2"/><path d="M12 7v10"/><path d="m8 12 4-3 4 3"/></svg>',
-  supportedDisplayModes: ["email", "web"],
-  position: 4,
-  options: {
-    button: {
-      title: "Button",
-      options: {
-        text: { label: "Button Text", defaultValue: "Click Me", widget: "text" },
-        href: { label: "Link URL", defaultValue: "#", widget: "text" },
-        target: { label: "Target", defaultValue: "_blank", widget: "text" }
-      }
-    },
-    style: {
-      title: "Style",
-      options: {
-        backgroundColor: { label: "Button Color", defaultValue: "#3b82f6", widget: "color_picker" },
-        textColor: { label: "Text Color", defaultValue: "#ffffff", widget: "color_picker" },
-        fontSize: {
-          label: "Font Size",
-          defaultValue: "14px",
-          widget: "dropdown",
-          widgetParams: { options: [
-            { label: "12px", value: "12px" },
-            { label: "13px", value: "13px" },
-            { label: "14px", value: "14px" },
-            { label: "16px", value: "16px" },
-            { label: "18px", value: "18px" },
-            { label: "20px", value: "20px" }
-          ] }
-        },
-        fontWeight: {
-          label: "Font Weight",
-          defaultValue: "700",
-          widget: "dropdown",
-          widgetParams: { options: [{ label: "Normal", value: "400" }, { label: "Bold", value: "700" }] }
-        },
-        borderRadius: { label: "Border Radius", defaultValue: "4px", widget: "text" },
-        buttonWidth: {
-          label: "Width",
-          defaultValue: "auto",
-          widget: "dropdown",
-          widgetParams: { options: [
-            { label: "Auto", value: "auto" },
-            { label: "100%", value: "100%" },
-            { label: "50%", value: "50%" }
-          ] }
-        },
-        textAlign: { label: "Align", defaultValue: "center", widget: "alignment" },
-        buttonPadding: { label: "Button Padding", defaultValue: "10px 20px", widget: "padding" },
-        borderColor: { label: "Border Color", defaultValue: "", widget: "color_picker" },
-        borderWidth: { label: "Border Width", defaultValue: "0px", widget: "text" }
-      }
-    },
-    spacing: {
-      title: "Spacing",
-      options: { containerPadding: { label: "Padding", defaultValue: "10px", widget: "padding" } }
-    },
-    general: {
-      title: "General",
-      options: {
-        anchor: { label: "Anchor", defaultValue: "", widget: "text" },
-        hideDesktop: { label: "Hide on Desktop", defaultValue: !1, widget: "toggle" },
-        hideMobile: { label: "Hide on Mobile", defaultValue: !1, widget: "toggle" }
-      }
-    }
-  },
-  defaultValues: {
-    text: "Click Me",
-    href: "#",
-    target: "_blank",
-    backgroundColor: "#3b82f6",
-    textColor: "#ffffff",
-    fontSize: "14px",
-    fontWeight: "700",
-    borderRadius: "4px",
-    buttonWidth: "auto",
-    textAlign: "center",
-    buttonPadding: "10px 20px",
-    borderColor: "",
-    borderWidth: "0px",
-    containerPadding: "10px"
-  },
-  renderer: {
-    renderEditor(e) {
-      const { bg: t, color: o } = st(e), n = l(e, "fontSize", "14px"), i = l(e, "fontWeight", "700"), s = l(e, "borderRadius", "4px"), r = l(e, "buttonPadding", l(e, "padding", "10px 20px")), a = l(e, "text", "Click Me"), d = l(e, "textAlign", "center"), c = l(e, "buttonWidth", "auto"), h = l(e, "borderWidth", "0px"), g = l(e, "borderColor", t), u = h !== "0px" ? `border:${h} solid ${g};` : "border:none;", f = c === "auto" ? "display:inline-block;" : `display:block;width:${c};`;
-      return p`
-        <div style="text-align:${d};">
-          <a style="${f}background-color:${t};color:${o};font-size:${n};font-weight:${i};border-radius:${s};padding:${r};text-decoration:none;text-align:center;${u}cursor:pointer;font-family:arial,helvetica,sans-serif;">${a}</a>
-        </div>
-      `;
-    },
-    renderHtml(e) {
-      const t = l(e, "containerPadding", "10px"), { bg: o, color: n } = st(e), i = l(e, "fontSize", "14px"), s = l(e, "fontWeight", "700"), r = l(e, "borderRadius", "4px"), a = l(e, "buttonPadding", l(e, "padding", "10px 20px")), d = l(e, "text", "Click Me"), c = l(e, "textAlign", "center"), h = l(e, "href", "#"), g = l(e, "target", "_blank"), u = l(e, "borderWidth", "0px"), f = l(e, "borderColor", o), w = u !== "0px" ? `border:${u} solid ${f};` : "border:none;", x = St(d, h, { bgColor: o, textColor: n, fontSize: i, fontWeight: s, borderRadius: r }), m = x ? `${x}
-  <!--[if !mso]><!-->` : "<!--[if !mso]><!-->", v = `<div align="${c}">
-      ${m}
-      <a href="${h}" target="${g}" style="display:inline-block;text-decoration:none;text-align:center;color:${n};background-color:${o};border-radius:${r};font-size:${i};font-weight:${s};padding:${a};font-family:arial,helvetica,sans-serif;${w}mso-border-alt:none;"><span style="line-height:120%;">${d}</span></a>
-      <!--<![endif]-->
-    </div>`;
-      return z(v, { padding: t, align: c });
-    }
-  }
-}, Pt = {
-  name: "divider",
-  label: "Divider",
-  icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="2" y1="12" x2="22" y2="12"/></svg>',
-  supportedDisplayModes: ["email", "web"],
-  position: 5,
-  options: {
-    style: {
-      title: "Style",
-      options: {
-        borderTopWidth: { label: "Width", defaultValue: "1px", widget: "text" },
-        borderTopStyle: {
-          label: "Style",
-          defaultValue: "solid",
-          widget: "dropdown",
-          widgetParams: { options: [
-            { label: "Solid", value: "solid" },
-            { label: "Dashed", value: "dashed" },
-            { label: "Dotted", value: "dotted" },
-            { label: "Double", value: "double" }
-          ] }
-        },
-        borderTopColor: { label: "Color", defaultValue: "#cccccc", widget: "color_picker" },
-        width: { label: "Line Width", defaultValue: "100%", widget: "text" }
-      }
-    },
-    spacing: {
-      title: "Spacing",
-      options: { containerPadding: { label: "Padding", defaultValue: "10px", widget: "padding" } }
-    },
-    general: {
-      title: "General",
-      options: {
-        hideDesktop: { label: "Hide on Desktop", defaultValue: !1, widget: "toggle" },
-        hideMobile: { label: "Hide on Mobile", defaultValue: !1, widget: "toggle" }
-      }
-    }
-  },
-  defaultValues: {
-    borderTopWidth: "1px",
-    borderTopStyle: "solid",
-    borderTopColor: "#cccccc",
-    width: "100%",
-    containerPadding: "10px"
-  },
-  renderer: {
-    renderEditor(e) {
-      const t = l(e, "containerPadding", "10px"), o = l(e, "width", "100%"), n = `${l(e, "borderTopWidth", "1px")} ${l(e, "borderTopStyle", "solid")} ${l(e, "borderTopColor", "#cccccc")}`;
-      return p`<div><div style="border-top:${n};width:${o};margin:0 auto;"></div></div>`;
-    },
-    renderHtml(e) {
-      const t = l(e, "containerPadding", "10px"), o = l(e, "width", "100%"), n = `${l(e, "borderTopWidth", "1px")} ${l(e, "borderTopStyle", "solid")} ${l(e, "borderTopColor", "#cccccc")}`, i = `<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="${o}" style="border-collapse:collapse;border-top:${n};"><tbody><tr><td style="font-size:0;line-height:0;">&nbsp;</td></tr></tbody></table>`;
-      return z(i, { padding: t, align: "center" });
-    }
-  }
-}, Et = [
-  Dt,
-  Rt,
-  Tt,
-  It,
-  Mt,
-  Pt
-], rt = [
-  {
-    meta: { name: "html", label: "HTML", icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>', position: 6 },
-    loader: () => import("./html-tool-DMtmrF3n.js").then((e) => e.htmlTool)
-  },
-  {
-    meta: { name: "social", label: "Social", icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>', position: 8 },
-    loader: () => import("./social-tool-CRY3-_sU.js").then((e) => e.socialTool)
-  },
-  {
-    meta: { name: "menu", label: "Menu", icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></svg>', position: 9 },
-    loader: () => import("./menu-tool-CJcQdpcP.js").then((e) => e.menuTool)
-  },
-  {
-    meta: { name: "video", label: "Video", icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>', position: 10 },
-    loader: () => import("./video-tool-g1fIoCWW.js").then((e) => e.videoTool)
-  },
-  {
-    meta: { name: "timer", label: "Timer", icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>', position: 11 },
-    loader: () => import("./timer-tool-BVE1shO1.js").then((e) => e.timerTool)
-  },
-  {
-    meta: { name: "table", label: "Table", icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/><path d="M9 3v18"/><path d="M15 3v18"/></svg>', position: 12 },
-    loader: () => import("./table-tool-DeIQci5z.js").then((e) => e.tableTool)
-  },
-  {
-    meta: { name: "form", label: "Form", icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M7 7h10"/><path d="M7 12h10"/><path d="M7 17h6"/></svg>', position: 13 },
-    loader: () => import("./form-tool-DdFDrS3b.js").then((e) => e.formTool)
-  }
-];
-function zt(e, t, o) {
-  const n = o.backgroundColor || "#e7e7e7", i = o.contentWidth || "600px", s = o.fontFamily?.value || "arial,helvetica,sans-serif", r = o.textColor || "#000000", a = o.preheaderText || "" || "&zwnj;", d = `<div style="display:none;font-size:1px;color:${n};line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">${a}${"&zwnj;&nbsp;".repeat(80)}</div>`;
-  return `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="x-apple-disable-message-reformatting">
-  <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no">
-  <meta name="color-scheme" content="light dark">
-  <meta name="supported-color-schemes" content="light dark">
-  <title></title>
-  <!--[if mso]>
-  <noscript><xml>
-    <o:OfficeDocumentSettings>
-      <o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch>
-    </o:OfficeDocumentSettings>
-  </xml></noscript>
-  <style type="text/css">
-    table, td, th { font-family: ${s} !important; }
-  </style>
-  <![endif]-->
-  <!--[if !mso]><!-->
-  <style type="text/css">
-    ${t}
-  </style>
-  <!--<![endif]-->
-  <style type="text/css">
-    body { margin: 0; padding: 0; word-break: normal; }
-    table, tr, td { vertical-align: top; border-collapse: collapse; }
-    p { margin: 0; }
-    a[x-apple-data-detectors='true'] { color: inherit !important; text-decoration: none !important; }
-  </style>
-</head>
-<body class="clean-body u_body" style="margin:0;padding:0;-webkit-text-size-adjust:100%;background-color:${n};color:${r};">
-  ${d}
-  <table id="u_body" role="presentation" style="border-collapse:collapse;border-spacing:0;margin:0 auto;background-color:${n};width:100%;" cellpadding="0" cellspacing="0" border="0">
-    <tbody>
-      <tr>
-        <td style="vertical-align:top;">
-          <!--[if (mso)|(IE)]><table width="${parseInt(i)}" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
-          ${e}
-          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</body>
-</html>`;
-}
-function Lt(e, t, o) {
-  const n = parseInt(t.contentWidth || "600"), i = e.values.backgroundColor || "", s = e.values.columnsBackgroundColor || "", r = e.values.padding || "0px", a = e.cells.reduce((m, y) => m + y, 0), d = i ? `background-color:${i};` : "", c = e.values.backgroundImage;
-  let h = "";
-  if (c?.url) {
-    const m = c.repeat === !0 || c.repeat === "repeat" ? "repeat" : "no-repeat", y = c.cover === !0 ? "cover" : c.fullWidth === !0 ? "100% auto" : "auto", v = c.center !== !1 ? "center top" : "left top";
-    h = `background-image:url('${c.url}');background-repeat:${m};background-position:${v};background-size:${y};`;
-  }
-  const g = e.columns.length > 1, u = e.columns.map((m, y) => {
-    const v = Math.round(e.cells[y] / a * n);
-    return { colHtml: Vt(m, v, s, t, o), colWidthPx: v };
-  });
-  let f;
-  if (g) {
-    const m = u.map(
-      ({ colHtml: y, colWidthPx: v }) => `<!--[if (mso)|(IE)]><td align="center" width="${v}" style="width:${v}px;padding:0px;" valign="top"><![endif]-->${y}<!--[if (mso)|(IE)]></td><![endif]-->`
-    );
-    f = `<!--[if (mso)|(IE)]><table role="presentation" width="${n}" cellpadding="0" cellspacing="0" border="0"><tr><![endif]-->${m.join("")}<!--[if (mso)|(IE)]></tr></table><![endif]-->`;
-  } else
-    f = u.map(({ colHtml: m }) => m).join("");
-  const w = e.values.hideDesktop ? " u_hide_desktop" : "", x = e.values.hideMobile ? " u_hide_mobile" : "";
-  return `<div class="u_row${w}${x}" style="padding:${r};${d}${h}">
-  <div style="margin:0 auto;max-width:${n}px;${g ? "font-size:0;" : ""}text-align:center;">${f}</div>
-</div>`;
-}
-function Vt(e, t, o, n, i) {
-  const s = e.values.backgroundColor || o || "", r = e.values.padding || "0px", a = e.values.borderRadius || "0px", d = s ? `background-color:${s};` : "", c = e.contents.map((h) => {
-    const g = i.get(h.type);
-    if (!g) return `<!-- unknown tool: ${h.type} -->`;
-    const u = {
-      columnWidth: t,
-      displayMode: "email",
-      contentWidth: parseInt(n.contentWidth || "600"),
-      bodyValues: n
-    };
-    let f = g(h.values, u);
-    const w = !!h.values.hideDesktop, x = !!h.values.hideMobile;
-    return (w || x) && (f = `<div class="${[w && "u_hide_desktop", x && "u_hide_mobile"].filter(Boolean).join(" ")}">${f}</div>`), f;
-  }).join(`
-`);
-  return `<div class="u_column" style="display:inline-block;vertical-align:top;width:${t}px;max-width:${t}px;font-size:14px;text-align:left;">
-  <div style="width:100%;${d}${a !== "0px" ? `border-radius:${a};` : ""}">
-    <div style="padding:${r};">
-      ${c || "&nbsp;"}
-    </div>
-  </div>
-</div>`;
-}
-function At(e) {
-  return `
-@media only screen and (min-width: ${e + 20}px) {
-  .u_row .u_column { display: inline-block !important; }
-}
-
-@media only screen and (max-width: ${e + 20}px) {
-  .u_row .u_column {
-    display: block !important;
-    width: 100% !important;
-    max-width: 100% !important;
-  }
-  .u_row {
-    width: 100% !important;
-  }
-}
-
-@media only screen and (max-width: 620px) {
-  .u_row-container {
-    max-width: 100% !important;
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  /* Dark mode overrides — add per-client rules as needed */
-}
-
-/* Outlook dark mode */
-[data-ogsb] body,
-[data-ogsb] table,
-[data-ogsb] td {
-  /* Preserve original colors */
-}
-
-.u_hide_desktop { display: block !important; }
-.u_hide_mobile { display: block !important; }
-
-@media only screen and (max-width: ${e + 20}px) {
-  .u_hide_desktop { display: block !important; }
-  .u_hide_mobile { display: none !important; }
-}
-
-@media only screen and (min-width: ${e + 21}px) {
-  .u_hide_desktop { display: none !important; }
-  .u_hide_mobile { display: block !important; }
-}`;
-}
-const Bt = [
-  "box-sizing",
-  "overflow-wrap",
-  "word-break",
-  "word-wrap",
-  "outline",
-  "cursor",
-  "transition",
-  "animation",
-  "transform",
-  "z-index",
-  "display:\\s*flex",
-  "display:\\s*grid",
-  "gap"
-], Ot = new RegExp(
-  `(?:;\\s*|^\\s*)(${Bt.join("|")})\\s*:[^;]*;?`,
-  "gi"
-), Ht = /var\(--[^)]*\)/gi;
-function jt(e) {
-  return e.replace(/style="([^"]*)"/gi, (t, o) => {
-    let n = o;
-    return n = n.replace(Ot, ""), n = n.replace(Ht, "inherit"), n = n.replace(/;\s*;/g, ";").replace(/^\s*;\s*/, "").replace(/;\s*$/, "").trim(), n ? `style="${n}"` : "";
-  });
-}
-function Wt(e, t, o) {
-  const n = e.body.values, i = parseInt(n.contentWidth || "600"), s = e.body.rows.map((u) => Lt(u, n, t)).join(`
-`), r = At(i), a = jt(s);
-  let d = zt(a, r, n);
-  if (o?.mergeTags)
-    for (const [u, f] of Object.entries(o.mergeTags))
-      d = d.replaceAll(`{{${u}}}`, f);
-  const c = d.match(/<body[^>]*>([\s\S]*)<\/body>/i), h = d.match(/<style[^>]*>([\s\S]*?)<\/style>/gi), g = [];
-  return n.fontFamily?.url && g.push(n.fontFamily.url), {
-    design: structuredClone(e),
-    html: d,
-    chunks: {
-      body: c?.[1] ?? s,
-      css: h?.map((u) => u.replace(/<\/?style[^>]*>/gi, "")).join(`
-`) ?? r,
-      fonts: g,
-      js: ""
-    }
-  };
-}
-class T {
-  /**
-   * @param host - The Lit component that owns this controller
-   * @param channels - Which store channels to subscribe to
-   */
-  constructor(t, o) {
-    this.store = null, this.host = t, this.channels = o, t.addController(this);
-  }
-  /** Set or change the store reference. Re-subscribes automatically. */
-  setStore(t) {
-    this.store !== t && (this.unsub?.(), this.store = t, this.subscribe());
-  }
-  hostConnected() {
-    this.subscribe();
-  }
-  hostDisconnected() {
-    this.unsub?.(), this.unsub = void 0;
-  }
-  subscribe() {
-    this.store && (this.unsub = this.store.subscribeChannels(this.channels, () => {
-      this.host.requestUpdate();
-    }));
-  }
-}
-var Ut = Object.defineProperty, Ft = Object.getOwnPropertyDescriptor, dt = (e, t, o, n) => {
-  for (var i = n > 1 ? void 0 : n ? Ft(t, o) : t, s = e.length - 1, r; s >= 0; s--)
-    (r = e[s]) && (i = (n ? r(t, o, i) : r(i)) || i);
-  return n && i && Ut(t, o, i), i;
-};
-let V = class extends $ {
-  constructor() {
-    super(...arguments), this.visible = !1;
-  }
-  exec(e, t) {
-    document.execCommand(e, !1, t), this.requestUpdate();
-  }
-  isActive(e) {
-    try {
-      return document.queryCommandState(e);
-    } catch {
-      return !1;
-    }
-  }
-  /** Position the toolbar above a given element */
-  positionAbove(e) {
-    const t = e.getBoundingClientRect();
-    this.style.left = `${t.left + t.width / 2}px`, this.style.top = `${t.top - 8}px`, this.style.transform = "translate(-50%, -100%)", this.classList.add("visible");
-  }
-  hide() {
-    this.classList.remove("visible");
-  }
-  handleLink() {
-    if (this.isActive("createLink"))
-      this.exec("unlink");
-    else {
-      const e = prompt("Enter URL:");
-      e && this.exec("createLink", e);
-    }
-  }
-  render() {
-    return p`
-      <div class="toolbar" @mousedown=${(e) => e.preventDefault()}>
-        <button class="btn ${this.isActive("bold") ? "active" : ""}"
-          @click=${() => this.exec("bold")} title="Bold (Ctrl+B)">
-          <strong>B</strong>
-        </button>
-        <button class="btn ${this.isActive("italic") ? "active" : ""}"
-          @click=${() => this.exec("italic")} title="Italic (Ctrl+I)">
-          <em>I</em>
-        </button>
-        <button class="btn ${this.isActive("underline") ? "active" : ""}"
-          @click=${() => this.exec("underline")} title="Underline (Ctrl+U)">
-          <u>U</u>
-        </button>
-        <button class="btn ${this.isActive("strikeThrough") ? "active" : ""}"
-          @click=${() => this.exec("strikeThrough")} title="Strikethrough">
-          <s>S</s>
-        </button>
-        <div class="separator"></div>
-        <button class="btn ${this.isActive("createLink") ? "active" : ""}"
-          @click=${this.handleLink} title="Link">
-          <svg viewBox="0 0 24 24"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
-        </button>
-        <div class="separator"></div>
-        <button class="btn" @click=${() => this.exec("justifyLeft")} title="Align Left">
-          <svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="15" y2="12"/><line x1="3" y1="18" x2="18" y2="18"/></svg>
-        </button>
-        <button class="btn" @click=${() => this.exec("justifyCenter")} title="Align Center">
-          <svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"/><line x1="6" y1="12" x2="18" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></svg>
-        </button>
-        <button class="btn" @click=${() => this.exec("justifyRight")} title="Align Right">
-          <svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"/><line x1="9" y1="12" x2="21" y2="12"/><line x1="6" y1="18" x2="21" y2="18"/></svg>
-        </button>
-      </div>
-    `;
-  }
-};
-V.styles = k`
-    :host {
-      position: fixed;
-      z-index: 10000;
-      display: none;
-    }
-    :host(.visible) {
-      display: block;
-      animation: fadeIn 0.15s ease;
-    }
-    @keyframes fadeIn {
-      from { opacity: 0; transform: translateY(4px); }
-      to { opacity: 1; transform: translateY(0); }
-    }
-    .toolbar {
-      display: flex;
-      align-items: center;
-      gap: 2px;
-      padding: 4px 6px;
-      background: #1f2937;
-      border-radius: 8px;
-      box-shadow: 0 4px 16px rgba(0,0,0,0.2);
-    }
-    .btn {
-      width: 32px;
-      height: 32px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: none;
-      border: none;
-      color: #d1d5db;
-      cursor: pointer;
-      border-radius: 4px;
-      font-size: 14px;
-      font-weight: 600;
-      transition: all 0.1s ease;
-      padding: 0;
-    }
-    .btn:hover { background: rgba(255,255,255,0.1); color: white; }
-    .btn.active { background: rgba(59,130,246,0.3); color: #93c5fd; }
-    .separator {
-      width: 1px;
-      height: 20px;
-      background: #374151;
-      margin: 0 2px;
-    }
-    .btn svg {
-      width: 16px;
-      height: 16px;
-      stroke: currentColor;
-      fill: none;
-      stroke-width: 2;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-    }
-  `;
-dt([
-  b({ type: Boolean })
-], V.prototype, "visible", 2);
-V = dt([
-  C("me-inline-toolbar")
-], V);
-var Nt = Object.defineProperty, qt = Object.getOwnPropertyDescriptor, O = (e, t, o, n) => {
-  for (var i = n > 1 ? void 0 : n ? qt(t, o) : t, s = e.length - 1, r; s >= 0; s--)
-    (r = e[s]) && (i = (n ? r(t, o, i) : r(i)) || i);
-  return n && i && Nt(t, o, i), i;
-};
-const lt = /* @__PURE__ */ new Set(["text", "heading", "paragraph"]);
-function at(e) {
-  return e === "html" ? "html" : "text";
-}
-let S = class extends $ {
-  constructor() {
-    super(...arguments), this.storeCtrl = new T(this, ["design", "selection", "hover", "viewMode"]), this.editing = !1, this.toolbar = null, this.editableEl = null, this.saveDebounceTimer = null, this.handleInlineInput = () => {
-      this.showToolbar();
-    }, this.handleInlineBlur = (e) => {
-      const t = e.relatedTarget;
-      t && (t.closest("me-inline-toolbar") || this.toolbar?.contains(t)) || setTimeout(() => {
-        document.activeElement !== this.editableEl && !this.toolbar?.matches(":hover") && this.stopEditing();
-      }, 150);
-    }, this.handleOverlayBlur = (e) => {
-      const t = e.relatedTarget;
-      t && (t.closest("me-inline-toolbar") || this.toolbar?.contains(t)) || setTimeout(() => {
-        document.activeElement !== this.editableEl && !this.toolbar?.matches(":hover") && this.stopEditing();
-      }, 200);
-    }, this.handleInlineKeydown = (e) => {
-      e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), this.stopEditing());
-    };
-  }
-  set store(e) {
-    this.storeCtrl.setStore(e);
-  }
-  get store() {
-    return this.storeCtrl.store;
-  }
-  // ── Event handlers ───────────────────────────────────────
-  handleClick(e) {
-    e.stopPropagation(), this.editing || this.store.select(this.content.id);
-  }
-  handleDblClick(e) {
-    e.stopPropagation(), lt.has(this.content.type) && this.startEditing();
-  }
-  handleMouseEnter() {
-    this.store.hover(this.content.id);
-  }
-  handleMouseLeave() {
-    this.store.hover(null);
-  }
-  handleDelete(e) {
-    e.stopPropagation(), this.store.removeContent(this.content.id);
-  }
-  handleDuplicate(e) {
-    e.stopPropagation(), this.store.duplicateContent(this.content.id);
-  }
-  /** Called from the drag handle only (not the whole block) */
-  handleDragStart(e) {
-    e.stopPropagation(), e.dataTransfer.setData("application/maileditor-content", this.content.id), e.dataTransfer.effectAllowed = "move", this.style.opacity = "0.4", L.startContentDrag(this.content.id);
-  }
-  handleDragEnd() {
-    this.style.opacity = "1", L.reset();
-  }
-  // ── Inline editing ───────────────────────────────────────
-  startEditing() {
-    this.editing = !0, this.classList.add("editing"), this.storeCtrl.hostDisconnected();
-    const e = this.getBoundingClientRect(), t = this.getInlineStyles(this.content.values), o = at(this.content.type), n = this.content.values[o] || "", i = document.createElement("div");
-    i.contentEditable = "true", i.innerHTML = n, Object.assign(i.style, {
-      position: "fixed",
-      left: e.left + "px",
-      top: e.top + "px",
-      width: e.width + "px",
-      minHeight: e.height + "px",
-      zIndex: "9999",
-      background: "white",
-      boxShadow: "0 0 0 2px #8b5cf6, 0 4px 16px rgba(0,0,0,0.15)",
-      borderRadius: "2px",
-      outline: "none",
-      boxSizing: "border-box"
-    }), t.split(";").forEach((a) => {
-      const [d, c] = a.split(":").map((h) => h?.trim());
-      if (d && c)
-        try {
-          i.style.setProperty(d, c);
-        } catch {
-        }
-    }), i.addEventListener("keydown", this.handleInlineKeydown), i.addEventListener("blur", this.handleOverlayBlur), document.body.appendChild(i), this.editableEl = i, i.focus();
-    const s = window.getSelection(), r = document.createRange();
-    r.selectNodeContents(i), r.collapse(!1), s?.removeAllRanges(), s?.addRange(r), this.showToolbar();
-  }
-  stopEditing() {
-    this.editing && (this.saveInlineContent(), this.editableEl && (this.editableEl.removeEventListener("keydown", this.handleInlineKeydown), this.editableEl.removeEventListener("blur", this.handleOverlayBlur), this.editableEl.remove()), this.editing = !1, this.classList.remove("editing"), this.editableEl = null, this.storeCtrl.hostConnected(), this.requestUpdate(), this.toolbar?.hide());
-  }
-  saveInlineContent() {
-    if (!this.editableEl) return;
-    const e = this.editableEl.innerHTML, t = at(this.content.type), o = this.content.values[t];
-    e !== o && this.store.updateContentValues(this.content.id, { [t]: e });
-  }
-  showToolbar() {
-    this.toolbar || (this.toolbar = document.createElement("me-inline-toolbar"), document.body.appendChild(this.toolbar)), this.editableEl && this.toolbar.positionAbove(this.editableEl);
-  }
-  // ── Lifecycle ────────────────────────────────────────────
-  connectedCallback() {
-    super.connectedCallback();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.toolbar?.remove(), this.toolbar = null, this.saveDebounceTimer && clearTimeout(this.saveDebounceTimer);
-  }
-  // ── Render ───────────────────────────────────────────────
-  render() {
-    if (!this.store) return p``;
-    const e = this.store.selectedId === this.content.id, t = this.store.hoveredId === this.content.id, o = this.store.viewMode, n = !!this.content.values.hideDesktop, i = !!this.content.values.hideMobile, s = o === "desktop" && n || o === "mobile" && i;
-    this.classList.toggle("selected", e && !this.editing), this.classList.toggle("hovered", t && !this.editing), this.classList.toggle("hidden-in-view", s), this.removeAttribute("draggable"), this.dataset.contentId = this.content.id, this.editing && !e && this.stopEditing();
-    const r = this.toolRegistry.get(this.content.type);
-    if (!r && this.toolRegistry.has(this.content.type))
-      return this.toolRegistry.ensureLoaded(this.content.type).then(() => this.requestUpdate()), p`<div style="padding:16px;text-align:center;color:#9ca3af;font-size:13px;">Loading ${this.content.type}...</div>`;
-    const a = n ? "Hidden on desktop" : i ? "Hidden on mobile" : "", d = lt.has(this.content.type), c = p`
-      <button class="drag-handle" draggable="true" title="Drag to move"
-        @dragstart=${(u) => this.handleDragStart(u)}
-        @dragend=${() => this.handleDragEnd()}
-        @mousedown=${(u) => u.stopPropagation()}>
-        <svg viewBox="0 0 16 16"><circle cx="5" cy="3" r="1.5"/><circle cx="11" cy="3" r="1.5"/><circle cx="5" cy="8" r="1.5"/><circle cx="11" cy="8" r="1.5"/><circle cx="5" cy="13" r="1.5"/><circle cx="11" cy="13" r="1.5"/></svg>
-      </button>
-    `, h = r?.renderer.renderEditor(this.content.values, {
-      isSelected: e,
-      isHovered: t,
-      columnWidth: 600,
-      displayMode: "email"
-    });
-    if (this.editing && d)
-      return p`${c}<div class="content-wrapper" style="visibility:hidden;">${h}</div>`;
-    const g = this.content.values.containerPadding || "0px";
-    return p`
-      ${s ? p`<div class="hidden-badge">${a}</div>` : ""}
-      ${c}
-      <div class="action-bar">
-        <button class="action-btn" @click=${this.handleDuplicate} title="Duplicate">&#9851;</button>
-        <button class="action-btn" @click=${this.handleDelete} title="Delete">&#10005;</button>
-      </div>
-      <div class="content-wrapper" style="padding:${g};"
-        @click=${this.handleClick}
-        @dblclick=${this.handleDblClick}
-        @mouseenter=${this.handleMouseEnter}
-        @mouseleave=${this.handleMouseLeave}>
-        ${h ?? p`<div style="padding:10px;color:#999;font-style:italic;">Unknown tool: ${this.content.type}</div>`}
-      </div>
-    `;
-  }
-  /** Build inline CSS for the contenteditable area based on content values */
-  getInlineStyles(e) {
-    const t = [], o = (g, u = "") => {
-      const f = e[g];
-      return typeof f == "string" ? f : typeof f == "number" ? String(f) : u;
-    };
-    t.push(`padding:${o("containerPadding", "10px")}`);
-    const n = o("backgroundColor");
-    n && t.push(`background-color:${n}`);
-    const i = o("color");
-    i && t.push(`color:${i}`);
-    const s = o("fontSize");
-    s && t.push(`font-size:${s}`);
-    const r = o("fontWeight");
-    r && t.push(`font-weight:${r}`);
-    const a = o("lineHeight", "140%");
-    t.push(`line-height:${a}`);
-    const d = o("textAlign");
-    d && t.push(`text-align:${d}`);
-    const c = o("letterSpacing");
-    c && c !== "normal" && t.push(`letter-spacing:${c}`);
-    const h = e.fontFamily;
-    return typeof h == "string" ? t.push(`font-family:${h}`) : h && typeof h == "object" && t.push(`font-family:${h.value || "inherit"}`), t.push("word-break:break-word", "outline:none", "min-height:1em"), t.join(";");
-  }
-};
-S.styles = k`
-    :host {
-      display: block; position: relative;
-      transition: outline 0.15s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
-    }
-    :host(.selected) { outline: 2px solid #3b82f6; outline-offset: -1px; }
-    :host(.hovered:not(.selected)) { outline: 2px dashed #93c5fd; outline-offset: -1px; }
-    :host(.editing) { outline: 2px solid #8b5cf6; outline-offset: -1px; }
-    :host(.just-dropped) {
-      animation: dropIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
-    }
-    :host(.hidden-in-view) { opacity: 0.3; position: relative; }
-    .hidden-badge {
-      position: absolute; top: 4px; right: 4px; z-index: 5;
-      background: #f59e0b; color: white; font-size: 10px; font-weight: 600;
-      padding: 2px 6px; border-radius: 3px; font-family: sans-serif;
-      pointer-events: none;
-    }
-    @keyframes dropIn {
-      0% { opacity: 0; transform: scale(0.92) translateY(-8px); }
-      100% { opacity: 1; transform: scale(1) translateY(0); }
-    }
-    /* Drag handle — straddles the right border, vertically centered */
-    .drag-handle {
-      display: none;
-      position: absolute;
-      top: 50%;
-      right: -12px;
-      transform: translateY(-50%);
-      width: 24px;
-      height: 24px;
-      background: #3b82f6;
-      color: white;
-      border: 2px solid white;
-      border-radius: 50%;
-      cursor: grab;
-      z-index: 20;
-      align-items: center;
-      justify-content: center;
-      padding: 0;
-      box-shadow: 0 1px 4px rgba(0,0,0,0.2);
-      transition: background 0.15s ease, transform 0.15s ease;
-    }
-    .drag-handle:hover {
-      background: #2563eb;
-      transform: translateY(-50%) scale(1.15);
-    }
-    .drag-handle:active { cursor: grabbing; }
-    .drag-handle svg {
-      width: 12px; height: 12px; fill: currentColor; stroke: none;
-    }
-    :host(.selected) .drag-handle,
-    :host(.hovered) .drag-handle { display: flex; }
-    :host(.editing) .drag-handle { display: none; }
-    /* Action bar */
-    .action-bar {
-      display: none; position: absolute; top: -28px; right: 4px;
-      background: #3b82f6; border-radius: 4px; padding: 2px; gap: 2px; z-index: 10;
-    }
-    :host(.selected:not(.editing)) .action-bar { display: flex; }
-    .action-btn {
-      background: none; border: none; color: white; cursor: pointer;
-      padding: 2px 6px; font-size: 12px; line-height: 1; border-radius: 2px;
-    }
-    .action-btn:hover { background: rgba(255,255,255,0.2); }
-    .content-wrapper { position: relative; cursor: default; box-sizing: border-box; }
-    /* Reset paragraph margins in user content to match email rendering.
-       Override inline margin from external editors (e.g. margin: 1.25em 0px). */
-    .content-wrapper p { margin: 0 !important; }
-    /* Reset paragraph margins to match email rendering.
-       Spacing comes from line-height, <br>, and &nbsp; in the HTML content. */
-    .content-wrapper p { margin: 0; }
-    .inline-editable {
-      outline: none; cursor: text; min-height: 1em;
-    }
-    .inline-editable:focus { outline: none; }
-  `;
-O([
-  b({ attribute: !1 })
-], S.prototype, "content", 2);
-O([
-  b({ attribute: !1 })
-], S.prototype, "store", 1);
-O([
-  b({ attribute: !1 })
-], S.prototype, "toolRegistry", 2);
-O([
-  ht()
-], S.prototype, "editing", 2);
-S = O([
-  C("me-content-renderer")
-], S);
-var Gt = Object.defineProperty, Kt = Object.getOwnPropertyDescriptor, H = (e, t, o, n) => {
-  for (var i = n > 1 ? void 0 : n ? Kt(t, o) : t, s = e.length - 1, r; s >= 0; s--)
-    (r = e[s]) && (i = (n ? r(t, o, i) : r(i)) || i);
-  return n && i && Gt(t, o, i), i;
-};
-let D = class extends $ {
-  constructor() {
-    super(...arguments), this.storeCtrl = new T(this, ["design"]), this.widthPercent = 100;
-  }
-  set store(e) {
-    this.storeCtrl.setStore(e);
-  }
-  get store() {
-    return this.storeCtrl.store;
-  }
-  render() {
-    const e = this.column.values.padding || "0px", t = this.column.values.backgroundColor || "transparent", o = this.column.contents;
-    return this.dataset.columnId = this.column.id, this.style.width = `${this.widthPercent}%`, this.style.padding = e, this.style.backgroundColor = t, this.style.verticalAlign = "top", this.style.boxSizing = "border-box", o.length === 0 ? p`
-        <div class="empty-column" data-column-id=${this.column.id}>
-          Drag content here
-        </div>
-      ` : p`
-      ${o.map(
-      (n) => p`
-          <me-content-renderer
-            .content=${n}
-            .store=${this.store}
-            .toolRegistry=${this.toolRegistry}
-          ></me-content-renderer>
-        `
-    )}
-    `;
-  }
-};
-D.styles = k`
-    :host {
-      display: block;
-      min-height: 40px;
-      position: relative;
-    }
-    .empty-column {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 60px;
-      border: 2px dashed #d1d5db;
-      border-radius: 4px;
-      color: #9ca3af;
-      font-size: 13px;
-      font-family: sans-serif;
-      margin: 4px;
-    }
-    .drop-indicator {
-      height: 3px;
-      background: #3b82f6;
-      border-radius: 2px;
-      margin: 0 4px;
-      opacity: 0;
-      transition: opacity 0.15s ease;
-    }
-    .drop-indicator.active {
-      opacity: 1;
-    }
-  `;
-H([
-  b({ attribute: !1 })
-], D.prototype, "column", 2);
-H([
-  b({ attribute: !1 })
-], D.prototype, "store", 1);
-H([
-  b({ attribute: !1 })
-], D.prototype, "toolRegistry", 2);
-H([
-  b({ type: Number })
-], D.prototype, "widthPercent", 2);
-D = H([
-  C("me-column-renderer")
-], D);
-var Yt = Object.defineProperty, Jt = Object.getOwnPropertyDescriptor, F = (e, t, o, n) => {
-  for (var i = n > 1 ? void 0 : n ? Jt(t, o) : t, s = e.length - 1, r; s >= 0; s--)
-    (r = e[s]) && (i = (n ? r(t, o, i) : r(i)) || i);
-  return n && i && Yt(t, o, i), i;
-};
-let R = class extends $ {
-  constructor() {
-    super(...arguments), this.storeCtrl = new T(this, ["design", "viewMode"]);
-  }
-  set store(e) {
-    this.storeCtrl.setStore(e);
-  }
-  get store() {
-    return this.storeCtrl.store;
-  }
-  handleMoveUp(e) {
-    e.stopPropagation();
-    const t = this.store.getRowIndex(this.row.id);
-    t > 0 && this.store.moveRow(t, t - 1);
-  }
-  handleMoveDown(e) {
-    e.stopPropagation();
-    const t = this.store.getRowIndex(this.row.id), o = this.store.getRows().length;
-    t < o - 1 && this.store.moveRow(t, t + 1);
-  }
-  handleDuplicate(e) {
-    e.stopPropagation(), this.store.duplicateRow(this.row.id);
-  }
-  handleDelete(e) {
-    e.stopPropagation(), this.store.removeRow(this.row.id);
-  }
-  render() {
-    if (!this.store) return p``;
-    const { row: e, store: t, toolRegistry: o } = this, n = e.values.backgroundColor || "transparent", i = e.values.columnsBackgroundColor || "transparent", s = e.values.padding || "0px", r = e.cells.reduce((x, m) => x + m, 0), a = e.values.backgroundImage, d = typeof a == "object" && a?.url ? a.url : "";
-    let c = "";
-    if (d) {
-      const x = a.repeat === !0 || a.repeat === "repeat" ? "repeat" : "no-repeat", m = a.cover === !0 ? "cover" : a.fullWidth === !0 ? "100% auto" : "auto", y = a.center !== !1 ? "center" : "top left";
-      c = `background-image:url('${d}');background-size:${m};background-position:${y};background-repeat:${x};`;
-    }
-    const h = t.viewMode, g = !!e.values.hideDesktop, u = !!e.values.hideMobile, f = h === "desktop" && g || h === "mobile" && u, w = g ? "Hidden on desktop" : u ? "Hidden on mobile" : "";
-    return this.classList.toggle("hidden-in-view", f), this.setAttribute("draggable", "true"), this.dataset.rowId = e.id, p`
-      ${f ? p`<div class="row-hidden-badge">${w}</div>` : ""}
-      <div class="row-actions">
-        <button class="row-action-btn" @click=${this.handleMoveUp} title="Move Up">
-          <svg viewBox="0 0 24 24"><path d="M12 19V5"/><path d="m5 12 7-7 7 7"/></svg>
-        </button>
-        <button class="row-action-btn" @click=${this.handleMoveDown} title="Move Down">
-          <svg viewBox="0 0 24 24"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
-        </button>
-        <button class="row-action-btn" @click=${this.handleDuplicate} title="Duplicate Row">
-          <svg viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
-        </button>
-        <button class="row-action-btn danger" @click=${this.handleDelete} title="Delete Row">
-          <svg viewBox="0 0 24 24"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
-        </button>
-      </div>
-      <div
-        class="row-wrapper"
-        style="background-color:${n};padding:${s};${c}"
-      >
-        ${e.columns.map((x, m) => {
-      const y = e.cells[m] / r * 100;
-      return p`
-            <me-column-renderer
-              .column=${x}
-              .store=${t}
-              .toolRegistry=${o}
-              .widthPercent=${y}
-              style="background-color:${i};"
-            ></me-column-renderer>
-          `;
-    })}
-      </div>
-    `;
-  }
-};
-R.styles = k`
-    :host {
-      display: block;
-      position: relative;
-      transition: opacity 0.2s ease;
-    }
-    :host(.hidden-in-view) { opacity: 0.3; }
-    .row-hidden-badge {
-      position: absolute; top: 4px; left: 4px; z-index: 5;
-      background: #f59e0b; color: white; font-size: 10px; font-weight: 600;
-      padding: 2px 6px; border-radius: 3px; font-family: sans-serif;
-      pointer-events: none;
-    }
-    .row-wrapper {
-      display: flex;
-      flex-wrap: nowrap;
-      position: relative;
-      min-height: 30px;
-      transition: box-shadow 0.15s ease;
-    }
-    :host(:hover) .row-wrapper {
-      box-shadow: inset 0 0 0 1px #93c5fd;
-    }
-    .row-actions {
-      display: none;
-      position: absolute;
-      right: -36px;
-      top: 50%;
-      transform: translateY(-50%);
-      flex-direction: column;
-      gap: 2px;
-      z-index: 10;
-    }
-    :host(:hover) .row-actions {
-      display: flex;
-    }
-    .row-action-btn {
-      width: 28px;
-      height: 28px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: #6b7280;
-      color: white;
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-      font-size: 12px;
-      line-height: 1;
-      transition: background 0.15s ease;
-      padding: 0;
-    }
-    .row-action-btn:hover { background: #3b82f6; }
-    .row-action-btn.danger:hover { background: #ef4444; }
-    .row-action-btn svg {
-      width: 14px;
-      height: 14px;
-      stroke: currentColor;
-      fill: none;
-      stroke-width: 2;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-    }
-  `;
-F([
-  b({ attribute: !1 })
-], R.prototype, "row", 2);
-F([
-  b({ attribute: !1 })
-], R.prototype, "store", 1);
-F([
-  b({ attribute: !1 })
-], R.prototype, "toolRegistry", 2);
-R = F([
-  C("me-row-renderer")
-], R);
-var Xt = Object.defineProperty, Qt = Object.getOwnPropertyDescriptor, J = (e, t, o, n) => {
-  for (var i = n > 1 ? void 0 : n ? Qt(t, o) : t, s = e.length - 1, r; s >= 0; s--)
-    (r = e[s]) && (i = (n ? r(t, o, i) : r(i)) || i);
-  return n && i && Xt(t, o, i), i;
-};
-let M = class extends $ {
-  constructor() {
-    super(...arguments), this.storeCtrl = new T(this, ["design", "viewMode"]);
-  }
-  set store(e) {
-    this.storeCtrl.setStore(e);
-  }
-  get store() {
-    return this.storeCtrl.store;
-  }
-  handleCanvasClick() {
-    this.store.select(null);
-  }
-  setViewMode(e) {
-    this.store.setViewMode(e);
-  }
-  render() {
-    const e = this.store.getRows(), t = this.store.getBodyValues(), o = t.contentWidth || "600px", n = t.backgroundColor || "#e7e7e7", i = this.store.viewMode;
-    return p`
-      <div class="view-toggle">
-        <button
-          class="view-btn ${i === "desktop" ? "active" : ""}"
-          @click=${() => this.setViewMode("desktop")}
-        >Desktop</button>
-        <button
-          class="view-btn ${i === "mobile" ? "active" : ""}"
-          @click=${() => this.setViewMode("mobile")}
-        >Mobile</button>
-      </div>
-
-      <div
-        class="canvas-body"
-        style="max-width:${i === "mobile" ? "375px" : o};background-color:${n};"
-        @click=${this.handleCanvasClick}
-      >
-        ${e.length === 0 ? p`
-              <div class="empty-canvas">
-                <div class="empty-icon">&#9776;</div>
-                <div>Drag a content block here</div>
-              </div>
-            ` : e.map(
-      (r) => p`
-                <me-row-renderer
-                  .row=${r}
-                  .store=${this.store}
-                  .toolRegistry=${this.toolRegistry}
-                ></me-row-renderer>
-              `
-    )}
-      </div>
-    `;
-  }
-};
-M.styles = k`
-    :host {
-      display: block;
-      flex: 1;
-      overflow-y: auto;
-      background: #f3f4f6;
-      padding: 20px;
-    }
-    .canvas-body {
-      margin: 0 auto;
-      background: #ffffff;
-      box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
-      min-height: 200px;
-      position: relative;
-    }
-    .empty-canvas {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      min-height: 300px;
-      color: #9ca3af;
-      font-family: sans-serif;
-      font-size: 14px;
-      gap: 8px;
-    }
-    .empty-icon {
-      font-size: 40px;
-      opacity: 0.4;
-    }
-    .view-toggle {
-      display: flex;
-      justify-content: center;
-      margin-bottom: 12px;
-      gap: 4px;
-    }
-    .view-btn {
-      padding: 6px 16px;
-      border: 1px solid #d1d5db;
-      background: white;
-      cursor: pointer;
-      font-size: 13px;
-      font-family: sans-serif;
-      color: #374151;
-      transition: all 0.15s ease;
-    }
-    .view-btn:first-child { border-radius: 6px 0 0 6px; }
-    .view-btn:last-child { border-radius: 0 6px 6px 0; }
-    .view-btn.active {
-      background: #3b82f6;
-      border-color: #3b82f6;
-      color: white;
-    }
-  `;
-J([
-  b({ attribute: !1 })
-], M.prototype, "store", 1);
-J([
-  b({ attribute: !1 })
-], M.prototype, "toolRegistry", 2);
-M = J([
-  C("me-editor-canvas")
-], M);
-var Zt = Object.defineProperty, te = Object.getOwnPropertyDescriptor, ct = (e, t, o, n) => {
-  for (var i = n > 1 ? void 0 : n ? te(t, o) : t, s = e.length - 1, r; s >= 0; s--)
-    (r = e[s]) && (i = (n ? r(t, o, i) : r(i)) || i);
-  return n && i && Zt(t, o, i), i;
-};
-const G = [
-  // System / email-safe fonts
-  { label: "Arial", value: "arial,helvetica,sans-serif", url: "" },
-  { label: "Helvetica", value: "helvetica,sans-serif", url: "" },
-  { label: "Georgia", value: "georgia,serif", url: "" },
-  { label: "Times New Roman", value: "'times new roman',times,serif", url: "" },
-  { label: "Trebuchet MS", value: "trebuchet ms,helvetica,sans-serif", url: "" },
-  { label: "Verdana", value: "verdana,geneva,sans-serif", url: "" },
-  { label: "Courier New", value: "'courier new',courier,monospace", url: "" },
-  // Google Fonts
-  { label: "Lato", value: "'Lato',sans-serif", url: "https://fonts.googleapis.com/css?family=Lato:400,700" },
-  { label: "Montserrat", value: "'Montserrat',sans-serif", url: "https://fonts.googleapis.com/css?family=Montserrat:400,700" },
-  { label: "Old Standard TT", value: "'Old Standard TT',serif", url: "https://fonts.googleapis.com/css?family=Old+Standard+TT:400,700" },
-  { label: "Open Sans", value: "'Open Sans',sans-serif", url: "https://fonts.googleapis.com/css?family=Open+Sans:400,700" },
-  { label: "Pacifico", value: "'Pacifico',cursive", url: "https://fonts.googleapis.com/css?family=Pacifico:400" },
-  { label: "Playfair Display", value: "'Playfair Display',serif", url: "https://fonts.googleapis.com/css?family=Playfair+Display:400,700" },
-  { label: "Raleway", value: "'Raleway',sans-serif", url: "https://fonts.googleapis.com/css?family=Raleway:400,700" },
-  { label: "Roboto", value: "'Roboto',sans-serif", url: "https://fonts.googleapis.com/css?family=Roboto:400,700" },
-  { label: "Rubik", value: "'Rubik',sans-serif", url: "https://fonts.googleapis.com/css?family=Rubik:400,700" },
-  { label: "Source Sans Pro", value: "'Source Sans Pro',sans-serif", url: "https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" }
-];
-let A = class extends $ {
-  constructor() {
-    super(...arguments), this.storeCtrl = new T(this, ["design"]);
-  }
-  set store(e) {
-    this.storeCtrl.setStore(e);
-  }
-  get store() {
-    return this.storeCtrl.store;
-  }
-  update_(e, t) {
-    this.store.updateBodyValues({ [e]: t });
-  }
-  updateLinkStyle(e, t) {
-    const o = this.store.getBodyValues().linkStyle;
-    this.store.updateBodyValues({ linkStyle: { ...o, [e]: t } });
-  }
-  updateFontFamily(e) {
-    const t = G.find((n) => n.value === e), o = { label: t?.label || e, value: e };
-    if (t?.url) {
-      o.url = t.url;
-      const n = `emabuild-font-${e.replace(/[^a-z]/gi, "")}`;
-      if (!document.getElementById(n)) {
-        const i = document.createElement("link");
-        i.id = n, i.rel = "stylesheet", i.href = t.url, document.head.appendChild(i);
-      }
-    }
-    this.store.updateBodyValues({ fontFamily: o });
-  }
-  render() {
-    const e = this.store.getBodyValues();
-    return p`
-      ${this.renderColorField("Background Color", e.backgroundColor || "#e7e7e7", (t) => this.update_("backgroundColor", t))}
-
-      <p class="section-title" style="margin-top:16px;">Content</p>
-      <div class="field">
-        <label class="field-label">Content Width (px)</label>
-        <input class="input" type="number" .value=${parseInt(e.contentWidth || "600")} min="320" max="960" step="10"
-          @change=${(t) => this.update_("contentWidth", t.target.value + "px")} />
-      </div>
-      <div class="field">
-        <label class="field-label">Content Align</label>
-        <div class="align-group">
-          ${["left", "center", "right"].map((t) => p`
-            <button class="align-btn ${e.contentAlign === t ? "active" : ""}"
-              @click=${() => this.update_("contentAlign", t)}>${t}</button>
-          `)}
-        </div>
-      </div>
-
-      <p class="section-title" style="margin-top:16px;">Typography</p>
-      <div class="field">
-        <label class="field-label">Font Family</label>
-        <select class="input" @change=${(t) => this.updateFontFamily(t.target.value)}>
-          <optgroup label="System Fonts">
-            ${G.filter((t) => !t.url).map((t) => p`<option value=${t.value} ?selected=${e.fontFamily?.value === t.value}>${t.label}</option>`)}
-          </optgroup>
-          <optgroup label="Google Fonts">
-            ${G.filter((t) => !!t.url).map((t) => p`<option value=${t.value} ?selected=${e.fontFamily?.value === t.value}>${t.label}</option>`)}
-          </optgroup>
-        </select>
-      </div>
-      ${this.renderColorField("Text Color", e.textColor || "#000000", (t) => this.update_("textColor", t))}
-
-      <p class="section-title" style="margin-top:16px;">Links</p>
-      ${this.renderColorField("Link Color", e.linkStyle?.linkColor || "#0000ee", (t) => this.updateLinkStyle("linkColor", t))}
-      <div class="field">
-        <label style="display:flex;align-items:center;gap:8px;font-size:12px;color:#6b7280;cursor:pointer;">
-          <input type="checkbox" .checked=${e.linkStyle?.linkUnderline ?? !0}
-            @change=${(t) => this.updateLinkStyle("linkUnderline", t.target.checked)} />
-          Underline Links
-        </label>
-      </div>
-
-      <p class="section-title" style="margin-top:16px;">Email</p>
-      <div class="field">
-        <label class="field-label">Preheader Text</label>
-        <textarea class="input" .value=${e.preheaderText || ""} placeholder="Preview text shown in inbox..."
-          style="min-height:60px;resize:vertical;font-family:inherit;"
-          @change=${(t) => this.update_("preheaderText", t.target.value)}></textarea>
-      </div>
-    `;
-  }
-  /** Reusable color field (swatch + hex input) */
-  renderColorField(e, t, o) {
-    return p`
-      <div class="field">
-        <label class="field-label">${e}</label>
-        <div class="color-row">
-          <input class="color-swatch" type="color" .value=${t} @input=${(n) => o(n.target.value)} />
-          <input class="input" type="text" .value=${t} style="flex:1;" @change=${(n) => o(n.target.value)} />
-        </div>
-      </div>
-    `;
-  }
-};
-A.styles = k`
-    :host { display: block; }
-    .section-title {
-      font-size: 11px; font-weight: 600; text-transform: uppercase;
-      color: #9ca3af; letter-spacing: 0.05em; margin: 0 0 8px 0;
-    }
-    .field { margin-bottom: 12px; }
-    .field-label { display: block; font-size: 12px; color: #6b7280; margin-bottom: 4px; }
-    .input {
-      width: 100%; padding: 5px 8px; border: 1px solid #d1d5db; border-radius: 4px;
-      font-size: 12px; box-sizing: border-box;
-    }
-    .input:focus { outline: none; border-color: #3b82f6; }
-    .color-row { display: flex; gap: 6px; align-items: center; }
-    .color-swatch {
-      width: 32px; height: 32px; border: 1px solid #d1d5db; border-radius: 4px;
-      padding: 0; cursor: pointer;
-    }
-    .align-group { display: flex; gap: 2px; }
-    .align-btn {
-      flex: 1; padding: 5px; border: 1px solid #d1d5db; background: white;
-      border-radius: 4px; cursor: pointer; font-size: 11px; color: #6b7280;
-    }
-    .align-btn.active { border-color: #3b82f6; background: #eff6ff; color: #3b82f6; }
-  `;
-ct([
-  b({ attribute: !1 })
-], A.prototype, "store", 1);
-A = ct([
-  C("me-body-settings")
-], A);
-var ee = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, X = (e, t, o, n) => {
-  for (var i = n > 1 ? void 0 : n ? oe(t, o) : t, s = e.length - 1, r; s >= 0; s--)
-    (r = e[s]) && (i = (n ? r(t, o, i) : r(i)) || i);
-  return n && i && ee(t, o, i), i;
-};
-let P = class extends $ {
-  constructor() {
-    super(...arguments), this.storeCtrl = new T(this, ["activeTab"]);
-  }
-  set store(e) {
-    this.storeCtrl.setStore(e);
-  }
-  get store() {
-    return this.storeCtrl.store;
-  }
-  handleDragStart(e, t) {
-    e.dataTransfer.setData("application/maileditor-tool", t), e.dataTransfer.effectAllowed = "copy";
-  }
-  handleLayoutDragStart(e, t) {
-    e.dataTransfer.setData("application/maileditor-layout", JSON.stringify(t)), e.dataTransfer.effectAllowed = "copy";
-  }
-  addRowWithLayout(e) {
-    const t = this.store.createRow(e);
-    this.store.addRow(t);
-  }
-  render() {
-    const e = this.store.activeTab, t = this.toolRegistry.getAllMeta();
-    return p`
-      <div class="tabs">
-        <button class="tab ${e === "content" ? "active" : ""}" @click=${() => this.store.setActiveTab("content")}>Content</button>
-        <button class="tab ${e === "blocks" ? "active" : ""}" @click=${() => this.store.setActiveTab("blocks")}>Blocks</button>
-        <button class="tab ${e === "body" ? "active" : ""}" @click=${() => this.store.setActiveTab("body")}>Body</button>
-      </div>
-
-      <div class="tab-content">
-        ${e === "content" ? this.renderContentTab(t) : ""}
-        ${e === "blocks" ? this.renderBlocksTab() : ""}
-        ${e === "body" ? this.renderBodyTab() : ""}
-      </div>
-    `;
-  }
-  renderContentTab(e) {
-    return p`
-      <p class="section-title">Content</p>
-      <div class="tool-grid">
-        ${e.map(
-      (t) => p`
-            <div
-              class="tool-item"
-              draggable="true"
-              @dragstart=${(o) => this.handleDragStart(o, t.name)}
-            >
-              <div class="tool-icon">${U(t.icon)}</div>
-              <span>${t.label}</span>
-            </div>
-          `
-    )}
-      </div>
-
-      <p class="section-title" style="margin-top:20px;">Layout</p>
-      <div class="layout-grid">
-        ${this.renderLayoutOption([1], "100%")}
-        ${this.renderLayoutOption([1, 1], "50/50")}
-        ${this.renderLayoutOption([1, 1, 1], "33/33/33")}
-        ${this.renderLayoutOption([2, 1], "66/33")}
-        ${this.renderLayoutOption([1, 2], "33/66")}
-        ${this.renderLayoutOption([1, 1, 1, 1], "25x4")}
-      </div>
-    `;
-  }
-  renderLayoutOption(e, t) {
-    const o = e.reduce((n, i) => n + i, 0);
-    return p`
-      <div
-        class="layout-item"
-        draggable="true"
-        @click=${() => this.addRowWithLayout(e)}
-        @dragstart=${(n) => this.handleLayoutDragStart(n, e)}
-        title=${t}
-      >
-        ${e.map(
-      (n) => p`<div class="layout-col" style="width:${n / o * 100}%;"></div>`
-    )}
-      </div>
-    `;
-  }
-  renderBlocksTab() {
-    return p`
-      <p style="color:#9ca3af;font-size:13px;text-align:center;margin-top:40px;">
-        No saved blocks yet.<br/>Select a row in the editor and save it as a block.
-      </p>
-    `;
-  }
-  renderBodyTab() {
-    return p`<me-body-settings .store=${this.store}></me-body-settings>`;
-  }
-};
-P.styles = k`
-    :host {
-      display: flex;
-      flex-direction: column;
-      width: 280px;
-      min-width: 280px;
-      background: #ffffff;
-      border-right: 1px solid #e5e7eb;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      overflow-y: auto;
-    }
-    .tabs {
-      display: flex;
-      border-bottom: 1px solid #e5e7eb;
-      background: #f9fafb;
-    }
-    .tab {
-      flex: 1;
-      padding: 10px 8px;
-      border: none;
-      background: none;
-      cursor: pointer;
-      font-size: 12px;
-      font-weight: 500;
-      color: #6b7280;
-      text-align: center;
-      transition: all 0.15s ease;
-      border-bottom: 2px solid transparent;
-    }
-    .tab:hover {
-      color: #374151;
-      background: #f3f4f6;
-    }
-    .tab.active {
-      color: #3b82f6;
-      border-bottom-color: #3b82f6;
-    }
-    .tab-content {
-      padding: 12px;
-      flex: 1;
-    }
-    .section-title {
-      font-size: 11px;
-      font-weight: 600;
-      text-transform: uppercase;
-      color: #9ca3af;
-      letter-spacing: 0.05em;
-      margin: 0 0 8px 0;
-    }
-    .tool-grid {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 8px;
-    }
-    .tool-item {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 6px;
-      padding: 12px 8px;
-      border: 1px solid #e5e7eb;
-      border-radius: 6px;
-      cursor: grab;
-      background: white;
-      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-      font-size: 12px;
-      color: #374151;
-    }
-    .tool-item:hover {
-      border-color: #3b82f6;
-      background: #eff6ff;
-      transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
-    }
-    .tool-item:hover .tool-icon {
-      transform: scale(1.15);
-    }
-    .tool-item:active {
-      transform: translateY(0px);
-      box-shadow: 0 1px 4px rgba(59, 130, 246, 0.1);
-    }
-    .tool-item:active {
-      cursor: grabbing;
-    }
-    .tool-icon {
-      width: 20px;
-      height: 20px;
-      display: flex;
-      align-items: center;
-      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-      justify-content: center;
-      color: #6b7280;
-    }
-    .tool-icon svg {
-      width: 20px;
-      height: 20px;
-    }
-    .layout-grid {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
-      gap: 8px;
-      margin-top: 16px;
-    }
-    .layout-item {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 2px;
-      padding: 10px 4px;
-      border: 1px solid #e5e7eb;
-      border-radius: 6px;
-      cursor: pointer;
-      background: white;
-      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-    .layout-item:hover {
-      border-color: #3b82f6;
-      background: #eff6ff;
-      transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
-    }
-    .layout-item:hover .layout-col {
-      background: #93c5fd;
-    }
-    .layout-item:active {
-      transform: translateY(0px);
-    }
-    .layout-col {
-      height: 20px;
-      background: #d1d5db;
-      border-radius: 2px;
-      transition: background 0.2s ease;
-    }
-  `;
-X([
-  b({ attribute: !1 })
-], P.prototype, "store", 1);
-X([
-  b({ attribute: !1 })
-], P.prototype, "toolRegistry", 2);
-P = X([
-  C("me-editor-sidebar")
-], P);
-function ne(e, t, o) {
-  const n = e && /^#[0-9a-fA-F]{3,8}$/.test(e) ? e : "#000000";
-  return p`
-    <div class="prop-row">
-      <label class="prop-label">${o}</label>
-      <div class="prop-color">
-        <input class="color-swatch" type="color" .value=${n}
-          @input=${(i) => t(i.target.value)} />
-        <input class="prop-input" type="text" .value=${e ?? ""} style="flex:1;"
-          @change=${(i) => t(i.target.value)} />
-      </div>
-    </div>
-  `;
-}
-function ie(e, t, o, n) {
-  const i = n?.options || [];
-  return p`
-    <div class="prop-row">
-      <label class="prop-label">${o}</label>
-      <select class="prop-input" @change=${(s) => t(s.target.value)}>
-        ${i.map((s) => p`<option value=${s.value} ?selected=${e === s.value}>${s.label}</option>`)}
-      </select>
-    </div>
-  `;
-}
-function se(e, t, o) {
-  return p`
-    <div class="prop-row">
-      <label class="prop-label">${o}</label>
-      <div style="display:flex;gap:2px;">
-        ${["left", "center", "right"].map((n) => p`
-          <button
-            style="flex:1;padding:6px;border:1px solid ${e === n ? "#3b82f6" : "#d1d5db"};background:${e === n ? "#eff6ff" : "white"};border-radius:4px;cursor:pointer;font-size:11px;text-transform:capitalize;color:${e === n ? "#3b82f6" : "#6b7280"};"
-            @click=${() => t(n)}
-          >${n}</button>
-        `)}
-      </div>
-    </div>
-  `;
-}
-function re(e) {
-  const t = (e || "0px").split(/\s+/).map((r) => parseInt(r) || 0), o = t[0], n = t[1] ?? o, i = t[2] ?? o, s = t[3] ?? n;
-  return [o, n, i, s];
-}
-function le(e, t, o, n) {
-  return e === t && t === o && o === n ? `${e}px` : e === o && t === n ? `${e}px ${t}px` : `${e}px ${t}px ${o}px ${n}px`;
-}
-function ae(e, t, o) {
-  const [n, i, s, r] = re(e), a = (c, h, g, u) => t(le(c, h, g, u));
-  return p`
-    <div class="prop-row">
-      <label class="prop-label">${o}</label>
-      <div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;">
-        ${[
-    { label: "T", val: n, change: (c) => a(c, i, s, r) },
-    { label: "R", val: i, change: (c) => a(n, c, s, r) },
-    { label: "B", val: s, change: (c) => a(n, i, c, r) },
-    { label: "L", val: r, change: (c) => a(n, i, s, c) }
-  ].map((c) => p`
-          <div style="display:flex;align-items:center;gap:4px;">
-            <span style="font-size:10px;color:#9ca3af;width:12px;">${c.label}</span>
-            <input type="number" .value=${c.val} min="0"
-              @change=${(h) => c.change(parseInt(h.target.value) || 0)}
-              style="flex:1;padding:4px 6px;border:1px solid #d1d5db;border-radius:3px;font-size:12px;width:50px;" />
-          </div>
-        `)}
-      </div>
-    </div>
-  `;
-}
-function de(e, t, o) {
-  return p`
-    <div class="prop-row">
-      <div class="prop-toggle">
-        <input type="checkbox" .checked=${!!e}
-          @change=${(n) => t(n.target.checked)} />
-        <label class="prop-label" style="margin:0;">${o}</label>
-      </div>
-    </div>
-  `;
-}
-function ce(e, t, o) {
-  return p`
-    <div class="prop-row">
-      <label class="prop-label">${o}</label>
-      <input class="prop-input" type="text" .value=${e ?? ""}
-        @change=${(n) => t(n.target.value)} />
-    </div>
-  `;
-}
-function pe(e, t, o) {
-  return p`
-    <div class="prop-row">
-      <label class="prop-label">${o}</label>
-      <textarea class="prop-input"
-        style="min-height:100px;font-family:'SF Mono',Menlo,monospace;font-size:12px;"
-        .value=${e ?? ""}
-        @change=${(n) => t(n.target.value)}
-      ></textarea>
-    </div>
-  `;
-}
-function he(e, t, o, n) {
-  const i = n?.unit || "px", s = n?.min ?? 0, r = n?.max ?? 100, a = n?.step ?? 0.1, d = parseFloat(e) || 0, c = (h) => {
-    const g = parseFloat(h.target.value) || 0;
-    t(`${g}${i}`);
-  };
-  return p`
-    <div class="prop-row">
-      <label class="prop-label">${o}</label>
-      <div style="display:flex;align-items:center;gap:4px;">
-        <input
-          type="number"
-          .value=${String(d)}
-          min=${s}
-          max=${r}
-          step=${a}
-          @input=${c}
-          style="flex:1;padding:6px 8px;border:1px solid #d1d5db;border-radius:4px;font-size:13px;color:#111827;"
-        />
-        <span style="font-size:12px;color:#9ca3af;min-width:20px;">${i}</span>
-      </div>
-    </div>
-  `;
-}
-var ue = Object.defineProperty, ge = Object.getOwnPropertyDescriptor, Q = (e, t, o, n) => {
-  for (var i = n > 1 ? void 0 : n ? ge(t, o) : t, s = e.length - 1, r; s >= 0; s--)
-    (r = e[s]) && (i = (n ? r(t, o, i) : r(i)) || i);
-  return n && i && ue(t, o, i), i;
-};
-let E = class extends $ {
-  constructor() {
-    super(...arguments), this.storeCtrl = new T(this, ["design", "selection"]);
-  }
-  set store(e) {
-    this.storeCtrl.setStore(e);
-  }
-  get store() {
-    return this.storeCtrl.store;
-  }
-  /** Create a change handler bound to a specific content ID and property key */
-  onChange(e, t) {
-    return (o) => {
-      this.store.updateContentValues(e, { [t]: o });
-    };
-  }
-  render() {
-    const e = this.store.selectedId;
-    if (!e)
-      return p`<div class="no-selection">Select an element to edit its properties</div>`;
-    const t = this.store.findContent(e);
-    if (!t)
-      return p`<div class="no-selection">Select an element to edit its properties</div>`;
-    const o = this.toolRegistry.get(t.type);
-    return o ? p`
-      <div class="header">
-        <p class="header-title">${o.label}</p>
-        <p class="header-type">${t.type}</p>
-      </div>
-      ${Object.entries(o.options).map(([, n]) => this.renderGroup(t, n))}
-    ` : p`<div class="no-selection">Unknown tool: ${t.type}</div>`;
-  }
-  renderGroup(e, t) {
-    return p`
-      <div class="group">
-        <div class="group-title">${t.title}</div>
-        <div class="group-body">
-          ${Object.entries(t.options).map(
-      ([o, n]) => this.renderWidget(e, o, n)
-    )}
-        </div>
-      </div>
-    `;
-  }
-  /** Delegate to the correct widget function based on the property's widget type */
-  renderWidget(e, t, o) {
-    const n = e.values[t] ?? o.defaultValue, i = this.onChange(e.id, t);
-    switch (o.widget) {
-      case "color_picker":
-        return ne(n, i, o.label);
-      case "toggle":
-        return de(n, i, o.label);
-      case "rich_text":
-        return pe(n, i, o.label);
-      case "dropdown":
-        return ie(n, i, o.label, o.widgetParams);
-      case "alignment":
-        return se(n, i, o.label);
-      case "padding":
-        return ae(n, i, o.label);
-      case "number_unit":
-        return he(n, i, o.label, o.widgetParams);
-      case "text":
-      default:
-        return ce(n, i, o.label);
-    }
-  }
-};
-E.styles = k`
-    :host {
-      display: flex; flex-direction: column; width: 300px; min-width: 300px;
-      background: #fff; border-left: 1px solid #e5e7eb;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      overflow-y: auto;
-    }
-    .header { padding: 12px 16px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; }
-    .header-title { font-size: 14px; font-weight: 600; color: #111827; margin: 0; }
-    .header-type { font-size: 11px; color: #9ca3af; text-transform: uppercase; margin: 2px 0 0 0; }
-    .no-selection {
-      display: flex; flex-direction: column; align-items: center; justify-content: center;
-      flex: 1; color: #9ca3af; font-size: 13px; gap: 8px; padding: 40px 20px; text-align: center;
-    }
-    .group { border-bottom: 1px solid #f3f4f6; }
-    .group-title {
-      padding: 10px 16px; font-size: 12px; font-weight: 600; color: #6b7280;
-      background: #f9fafb; cursor: pointer; user-select: none;
-      display: flex; align-items: center; justify-content: space-between;
-    }
-    .group-title:hover { background: #f3f4f6; }
-    .group-body { padding: 12px 16px; }
-    .prop-row { margin-bottom: 12px; }
-    .prop-label { display: block; font-size: 12px; color: #6b7280; margin-bottom: 4px; }
-    .prop-input {
-      width: 100%; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 4px;
-      font-size: 13px; color: #111827; background: white; box-sizing: border-box;
-    }
-    .prop-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }
-    .prop-toggle { display: flex; align-items: center; gap: 8px; }
-    .prop-color { display: flex; align-items: center; gap: 8px; }
-    .color-swatch { width: 28px; height: 28px; border-radius: 4px; border: 1px solid #d1d5db; cursor: pointer; padding: 0; }
-    textarea.prop-input { min-height: 80px; resize: vertical; font-family: monospace; }
-  `;
-Q([
-  b({ attribute: !1 })
-], E.prototype, "store", 1);
-Q([
-  b({ attribute: !1 })
-], E.prototype, "toolRegistry", 2);
-E = Q([
-  C("me-property-panel")
-], E);
-var fe = Object.defineProperty, be = Object.getOwnPropertyDescriptor, pt = (e, t, o, n) => {
-  for (var i = n > 1 ? void 0 : n ? be(t, o) : t, s = e.length - 1, r; s >= 0; s--)
-    (r = e[s]) && (i = (n ? r(t, o, i) : r(i)) || i);
-  return n && i && fe(t, o, i), i;
-};
-let B = class extends $ {
-  constructor() {
-    super(...arguments), this.options = {}, this.store = new $t(), this.toolRegistry = new kt(), this.dragManager = null, this.callbacks = /* @__PURE__ */ new Map(), this.unsubscribe = null, this._handleKeydown = (e) => {
-      const t = e.metaKey || e.ctrlKey, n = e.composedPath().some((i) => {
-        const s = i, r = s?.tagName;
-        return !!(r === "INPUT" || r === "TEXTAREA" || r === "SELECT" || s?.isContentEditable);
-      });
-      n && !t || (t && e.key === "z" && !e.shiftKey ? (e.preventDefault(), this.store.undo()) : t && (e.key === "y" || e.key === "z" && e.shiftKey) ? (e.preventDefault(), this.store.redo()) : (e.key === "Delete" || e.key === "Backspace") && this.store.selectedId && !n ? (e.preventDefault(), this.store.removeContent(this.store.selectedId)) : e.key === "Escape" && this.store.select(null));
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.registerBuiltInTools(), this.applyOptions(), this.setAttribute("tabindex", "0"), this.addEventListener("keydown", this._handleKeydown);
-  }
-  firstUpdated() {
-    this.dragManager = new Ct(this.store, this.toolRegistry, this.shadowRoot), this.dragManager.attach(), this.store.events.on("design:loaded", (e) => {
-      this.dispatchEvent(new CustomEvent("design:loaded", { detail: e, bubbles: !0, composed: !0 }));
-    }), this.store.events.on("design:updated", (e) => {
-      this.dispatchEvent(new CustomEvent("design:updated", { detail: e, bubbles: !0, composed: !0 }));
-    }), this.dispatchEvent(new CustomEvent("editor:ready", { bubbles: !0, composed: !0 })), this.preloadLazyTools();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.dragManager?.detach(), this.unsubscribe?.(), this.store.events.removeAllListeners(), this.removeEventListener("keydown", this._handleKeydown);
-  }
-  // ----------------------------------------------------------
-  // Public API — public API
-  // ----------------------------------------------------------
-  loadDesign(e) {
-    this.store.loadDesign(e);
-  }
-  saveDesign(e) {
-    e(structuredClone(this.store.getDesign()));
-  }
-  exportHtml(e, t) {
-    const o = this.store.getDesign(), n = /* @__PURE__ */ new Set();
-    for (const s of o.body.rows)
-      for (const r of s.columns)
-        for (const a of r.contents)
-          n.add(a.type);
-    const i = Array.from(n).filter((s) => !this.toolRegistry.isLoaded(s)).map((s) => this.toolRegistry.ensureLoaded(s));
-    i.length > 0 ? Promise.all(i).then(() => this.doExport(o, e, t)) : this.doExport(o, e, t);
-  }
-  doExport(e, t, o) {
-    const n = /* @__PURE__ */ new Map();
-    for (const i of this.toolRegistry.getAll())
-      n.set(i.name, (s, r) => i.renderer.renderHtml(s, r));
-    t(Wt(e, n, o));
-  }
-  async exportHtmlAsync(e) {
-    return new Promise((t) => this.exportHtml(t, e));
-  }
-  registerTool(e) {
-    this.toolRegistry.register(e), this.requestUpdate();
-  }
-  registerPropertyEditor(e, t) {
-  }
-  registerTab(e) {
-  }
-  registerCallback(e, t) {
-    this.callbacks.set(e, t);
-  }
-  setMergeTags(e) {
-  }
-  undo() {
-    this.store.undo();
-  }
-  redo() {
-    this.store.redo();
-  }
-  setBodyValues(e) {
-    this.store.updateBodyValues(e);
-  }
-  // ----------------------------------------------------------
-  // Internal
-  // ----------------------------------------------------------
-  /**
-   * Preload lazy tools during browser idle time.
-   * Uses requestIdleCallback to avoid blocking the main thread.
-   * Falls back to setTimeout(1000) for browsers without idle callback support.
-   */
-  preloadLazyTools() {
-    const e = window.requestIdleCallback ?? ((t) => setTimeout(t, 1e3));
-    for (const { meta: t } of rt)
-      e(() => {
-        this.toolRegistry.ensureLoaded(t.name);
-      });
-  }
-  registerBuiltInTools() {
-    for (const e of Et)
-      this.toolRegistry.register(e);
-    for (const { meta: e, loader: t } of rt)
-      this.toolRegistry.registerLazy(e, t);
-  }
-  applyOptions() {
-    this.options.design && this.store.loadDesign(this.options.design);
-  }
-  render() {
-    return p`
-      <me-editor-sidebar
-        .store=${this.store}
-        .toolRegistry=${this.toolRegistry}
-      ></me-editor-sidebar>
-      <me-editor-canvas
-        .store=${this.store}
-        .toolRegistry=${this.toolRegistry}
-      ></me-editor-canvas>
-      <me-property-panel
-        .store=${this.store}
-        .toolRegistry=${this.toolRegistry}
-      ></me-property-panel>
-    `;
-  }
-};
-B.styles = k`
-    :host {
-      display: flex;
-      width: 100%;
-      height: 100%;
-      flex: 1;
-      min-height: 500px;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      color: #111827;
-      box-sizing: border-box;
-      overflow: hidden;
-      position: relative;
-    }
-    * { box-sizing: border-box; }
-  `;
-pt([
-  b({ type: Object })
-], B.prototype, "options", 2);
-B = pt([
-  C("mail-editor")
-], B);
-function _(e, t) {
-  customElements.get(e) || customElements.define(e, t);
-}
-_("mail-editor", B);
-_("me-editor-canvas", M);
-_("me-row-renderer", R);
-_("me-column-renderer", D);
-_("me-content-renderer", S);
-_("me-editor-sidebar", P);
-_("me-body-settings", A);
-_("me-property-panel", E);
-_("me-inline-toolbar", V);
-const $e = customElements.get("mail-editor") !== void 0;
-export {
-  $e as E,
-  B as M,
-  kt as T,
-  $t as a,
-  z as e,
-  ve as j,
-  l as s
-};
-//# sourceMappingURL=index-CpMbWdgn.js.map