@emabuild/core 0.1.0 → 0.1.1

package/dist/{index-CZt184D3.js → index-BQJRD2VW.js}

@@ -1,53 +1,53 @@
 import { html as c, LitElement as v, css as $ } from "lit";
-import { property as f, customElement as k } from "lit/decorators.js";
-import { unsafeHTML as q } from "lit/directives/unsafe-html.js";
-function lt() {
-  const t = {};
+import { property as b, customElement as k } from "lit/decorators.js";
+import { unsafeHTML as H } from "lit/directives/unsafe-html.js";
+function dt() {
+  const e = {};
   return {
     getCounters() {
-      return { ...t };
+      return { ...e };
     },
-    setCounters(e) {
-      for (const o of Object.keys(t))
-        delete t[o];
-      Object.assign(t, e);
+    setCounters(t) {
+      for (const o of Object.keys(e))
+        delete e[o];
+      Object.assign(e, t);
     },
-    next(e) {
-      const o = t[e] ?? 0;
-      return t[e] = o + 1, t[e];
+    next(t) {
+      const o = e[t] ?? 0;
+      return e[t] = o + 1, e[t];
     }
   };
 }
-class dt {
+class ct {
   constructor() {
     this.listeners = /* @__PURE__ */ new Map();
   }
   /** Register a listener for an event */
-  on(e, o) {
-    this.listeners.has(e) || this.listeners.set(e, /* @__PURE__ */ new Set()), this.listeners.get(e).add(o);
+  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(e, o) {
-    this.listeners.get(e)?.delete(o);
+  off(t, o) {
+    this.listeners.get(t)?.delete(o);
   }
   /** Emit an event with a payload. Errors in listeners are caught and logged. */
-  emit(e, o) {
-    this.listeners.get(e)?.forEach((n) => {
+  emit(t, o) {
+    this.listeners.get(t)?.forEach((n) => {
       try {
         n(o);
       } catch (i) {
-        console.error(`[emabuild] Error in "${e}" listener:`, i);
+        console.error(`[emabuild] Error in "${t}" listener:`, i);
       }
     });
   }
   /** Remove all listeners, optionally scoped to a single event */
-  removeAllListeners(e) {
-    e ? this.listeners.delete(e) : this.listeners.clear();
+  removeAllListeners(t) {
+    t ? this.listeners.delete(t) : this.listeners.clear();
   }
 }
-class ct {
-  constructor(e = 50) {
-    this.undoStack = [], this.redoStack = [], this.maxHistory = e;
+class pt {
+  constructor(t = 50) {
+    this.undoStack = [], this.redoStack = [], this.maxHistory = t;
   }
   /** Whether there are states to undo to */
   get canUndo() {
@@ -58,27 +58,27 @@ class ct {
     return this.redoStack.length > 0;
   }
   /** Save current design to the undo stack before a mutation */
-  push(e) {
-    this.undoStack.push(structuredClone(e)), this.undoStack.length > this.maxHistory && this.undoStack.shift(), this.redoStack = [];
+  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(e) {
+  undo(t) {
     const o = this.undoStack.pop();
     if (o)
-      return this.redoStack.push(structuredClone(e)), o;
+      return this.redoStack.push(structuredClone(t)), o;
   }
   /** Restore the next state, pushing current state to undo. Returns the restored design or undefined. */
-  redo(e) {
+  redo(t) {
     const o = this.redoStack.pop();
     if (o)
-      return this.undoStack.push(structuredClone(e)), o;
+      return this.undoStack.push(structuredClone(t)), o;
   }
   /** Clear all history (e.g. when loading a new design) */
   clear() {
     this.undoStack = [], this.redoStack = [];
   }
 }
-function pt() {
+function ht() {
   return {
     counters: { u_row: 0, u_column: 0 },
     body: {
@@ -123,9 +123,9 @@ function pt() {
     schemaVersion: 16
   };
 }
-function ht(t, e) {
-  const o = t.next("u_row"), n = e.map(() => {
-    const i = t.next("u_column");
+function ut(e, t) {
+  const o = e.next("u_row"), n = t.map(() => {
+    const i = e.next("u_column");
     return {
       id: `u_column_${i}`,
       contents: [],
@@ -140,7 +140,7 @@ function ht(t, e) {
   });
   return {
     id: `u_row_${o}`,
-    cells: e,
+    cells: t,
     columns: n,
     values: {
       displayCondition: null,
@@ -156,58 +156,58 @@ function ht(t, e) {
     }
   };
 }
-function ut(t, e, o = {}) {
-  const n = t.next(`u_content_${e}`), i = `u_content_${e}_${n}`;
+function gt(e, t, o = {}) {
+  const n = e.next(`u_content_${t}`), i = `u_content_${t}_${n}`;
   return {
     id: i,
-    type: e,
+    type: t,
     values: {
       containerPadding: "10px",
       anchor: "",
       hideDesktop: !1,
       hideMobile: !1,
       displayCondition: null,
-      _meta: { htmlID: i, htmlClassNames: `u_content_${e}` },
+      _meta: { htmlID: i, htmlClassNames: `u_content_${t}` },
       ...o
     }
   };
 }
-function U(t, e) {
-  return t.body.rows.find((o) => o.id === e);
+function F(e, t) {
+  return e.body.rows.find((o) => o.id === t);
 }
-function H(t, e) {
-  for (const o of t.body.rows) {
-    const n = o.columns.find((i) => i.id === e);
+function O(e, t) {
+  for (const o of e.body.rows) {
+    const n = o.columns.find((i) => i.id === t);
     if (n) return n;
   }
 }
-function O(t, e) {
-  for (const o of t.body.rows)
+function j(e, t) {
+  for (const o of e.body.rows)
     for (const n of o.columns) {
-      const i = n.contents.find((r) => r.id === e);
+      const i = n.contents.find((r) => r.id === t);
       if (i) return i;
     }
 }
-function gt(t, e) {
-  for (const o of t.body.rows)
+function ft(e, t) {
+  for (const o of e.body.rows)
     for (const n of o.columns)
-      if (n.contents.some((i) => i.id === e)) return n;
+      if (n.contents.some((i) => i.id === t)) return n;
 }
-function bt(t, e) {
-  for (const o of t.body.rows)
-    if (o.columns.some((n) => n.id === e)) return o;
+function bt(e, t) {
+  for (const o of e.body.rows)
+    if (o.columns.some((n) => n.id === t)) return o;
 }
-function F(t, e) {
-  return t.body.rows.findIndex((o) => o.id === e);
+function N(e, t) {
+  return e.body.rows.findIndex((o) => o.id === t);
 }
-class ft {
+class mt {
   constructor() {
-    this.history = new ct(), this.counterManager = lt(), this.subscribers = /* @__PURE__ */ new Set(), this.channelSubscribers = /* @__PURE__ */ new Map(), this.events = new dt(), this._selectedId = null, this._hoveredId = null, this._viewMode = "desktop", this._activeTab = "content", this.design = pt();
+    this.history = new pt(), this.counterManager = dt(), this.subscribers = /* @__PURE__ */ new Set(), this.channelSubscribers = /* @__PURE__ */ new Map(), this.events = new ct(), this._selectedId = null, this._hoveredId = null, this._viewMode = "desktop", this._activeTab = "content", this.design = ht();
   }
   // ── Subscriptions ──────────────────────────────────────────
   /** Subscribe to ALL state changes (legacy). Returns an unsubscribe function. */
-  subscribe(e) {
-    return this.subscribers.add(e), () => this.subscribers.delete(e);
+  subscribe(t) {
+    return this.subscribers.add(t), () => this.subscribers.delete(t);
   }
   /**
    * Subscribe to specific channels only. The callback is invoked only
@@ -219,23 +219,23 @@ class ft {
    * store.subscribeChannels(['design'], () => this.requestUpdate());
    * ```
    */
-  subscribeChannels(e, o) {
-    for (const n of e)
+  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 e)
+      for (const n of t)
         this.channelSubscribers.get(n)?.delete(o);
     };
   }
   /** Notify legacy (all) subscribers */
   notify() {
-    this.subscribers.forEach((e) => e());
+    this.subscribers.forEach((t) => t());
   }
   /** Notify only subscribers of specific channels + legacy subscribers */
-  notifyChannels(...e) {
+  notifyChannels(...t) {
     const o = /* @__PURE__ */ new Set();
     for (const n of this.subscribers) o.add(n);
-    for (const n of e) {
+    for (const n of t) {
       const i = this.channelSubscribers.get(n);
       if (i) for (const r of i) o.add(r);
     }
@@ -278,52 +278,52 @@ class ft {
   }
   // ── Design Loading ─────────────────────────────────────────
   /** Load a design document, resetting history and selection */
-  loadDesign(e) {
-    this.design = structuredClone(e), this.counterManager.setCounters(this.design.counters), this.history.clear(), this._selectedId = null, this.notifyChannels("design", "selection"), this.events.emit("design:loaded", { design: this.design });
+  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 e = this.history.undo(this.design);
-    e && (this.design = e, this.counterManager.setCounters(this.design.counters), this.notifyChannels("design"), this.emitUpdate("content_updated"));
+    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 e = this.history.redo(this.design);
-    e && (this.design = e, this.counterManager.setCounters(this.design.counters), this.notifyChannels("design"), this.emitUpdate("content_updated"));
+    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(e) {
-    this._selectedId = e, this.notifyChannels("selection");
+  select(t) {
+    this._selectedId = t, this.notifyChannels("selection");
   }
-  hover(e) {
-    this._hoveredId = e, this.notifyChannels("hover");
+  hover(t) {
+    this._hoveredId = t, this.notifyChannels("hover");
   }
-  setViewMode(e) {
-    this._viewMode = e, this.notifyChannels("viewMode");
+  setViewMode(t) {
+    this._viewMode = t, this.notifyChannels("viewMode");
   }
-  setActiveTab(e) {
-    this._activeTab = e, this.notifyChannels("activeTab");
+  setActiveTab(t) {
+    this._activeTab = t, this.notifyChannels("activeTab");
   }
   // ── Row Operations ─────────────────────────────────────────
   /** Add a row at the given index (or at the end) */
-  addRow(e, o) {
+  addRow(t, o) {
     this.history.push(this.design);
-    const n = this.design.body.rows, i = structuredClone(e);
+    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(e) {
-    const o = F(this.design, e);
-    o !== -1 && (this.history.push(this.design), this.design.body.rows.splice(o, 1), this._selectedId === e && (this._selectedId = null), this.notifyChannels("design"), this.emitUpdate("row_removed"));
+  removeRow(t) {
+    const o = N(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(e, o) {
+  moveRow(t, o) {
     this.history.push(this.design);
-    const n = this.design.body.rows, [i] = n.splice(e, 1);
+    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(e) {
-    const o = U(this.design, e);
+  duplicateRow(t) {
+    const o = F(this.design, t);
     if (!o) return;
     this.history.push(this.design);
     const n = structuredClone(o), i = this.counterManager.next("u_row");
@@ -336,72 +336,72 @@ class ft {
         d.id = `u_content_${d.type}_${p}`, d.values._meta = { htmlID: d.id, htmlClassNames: `u_content_${d.type}` };
       }
     }
-    const r = F(this.design, e);
+    const r = N(this.design, t);
     this.design.body.rows.splice(r + 1, 0, n), this.syncCounters(), this.notifyChannels("design"), this.emitUpdate("row_added", n);
   }
   /** Get the index of a row */
-  getRowIndex(e) {
-    return F(this.design, e);
+  getRowIndex(t) {
+    return N(this.design, t);
   }
   /** Update row-level values */
-  updateRowValues(e, o) {
-    const n = U(this.design, e);
+  updateRowValues(t, o) {
+    const n = F(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(e, o) {
-    const n = H(this.design, e);
+  updateColumnValues(t, o) {
+    const n = O(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(e, o, n) {
-    const i = H(this.design, e);
+  addContent(t, o, n) {
+    const i = O(this.design, t);
     if (!i) return;
     this.history.push(this.design);
     const r = structuredClone(o);
     n !== void 0 && n >= 0 && n <= i.contents.length ? i.contents.splice(n, 0, r) : i.contents.push(r), this.syncCounters(), this.notifyChannels("design"), this.emitUpdate("content_added", r);
   }
   /** Remove a content block by ID */
-  removeContent(e) {
+  removeContent(t) {
     for (const o of this.design.body.rows)
       for (const n of o.columns) {
-        const i = n.contents.findIndex((r) => r.id === e);
+        const i = n.contents.findIndex((r) => r.id === t);
         if (i !== -1) {
-          this.history.push(this.design), n.contents.splice(i, 1), this._selectedId === e && (this._selectedId = null), this.notifyChannels("design"), this.emitUpdate("content_removed");
+          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(e, o) {
-    const n = O(this.design, e);
+  updateContentValues(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"));
   }
   /** Move a content block to a different column at a given index */
-  moveContent(e, o, n) {
-    const i = O(this.design, e);
+  moveContent(t, o, n) {
+    const i = j(this.design, t);
     if (!i) return;
     this.history.push(this.design);
     for (const s of this.design.body.rows)
       for (const l of s.columns) {
-        const d = l.contents.findIndex((p) => p.id === e);
+        const d = l.contents.findIndex((p) => p.id === t);
         if (d !== -1) {
           l.contents.splice(d, 1);
           break;
         }
       }
-    const r = H(this.design, o);
+    const r = O(this.design, o);
     r && r.contents.splice(n, 0, i), this.notifyChannels("design"), this.emitUpdate("content_reordered");
   }
   /** Duplicate a content block, inserting the copy right after the original */
-  duplicateContent(e) {
-    const o = O(this.design, e);
+  duplicateContent(t) {
+    const o = j(this.design, t);
     if (o)
       for (const n of this.design.body.rows)
         for (const i of n.columns) {
-          const r = i.contents.findIndex((s) => s.id === e);
+          const r = i.contents.findIndex((s) => s.id === t);
           if (r !== -1) {
             this.history.push(this.design);
             const s = structuredClone(o), l = this.counterManager.next(`u_content_${o.type}`);
@@ -412,51 +412,51 @@ class ft {
   }
   // ── Body Values ────────────────────────────────────────────
   /** Update body-level values (background, fonts, etc.) */
-  updateBodyValues(e) {
-    this.history.push(this.design), Object.assign(this.design.body.values, e), this.notifyChannels("design"), this.emitUpdate("body_updated");
+  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(e) {
-    return U(this.design, e);
+  findRow(t) {
+    return F(this.design, t);
   }
-  findColumn(e) {
-    return H(this.design, e);
+  findColumn(t) {
+    return O(this.design, t);
   }
-  findContent(e) {
-    return O(this.design, e);
+  findContent(t) {
+    return j(this.design, t);
   }
-  findParentColumn(e) {
-    return gt(this.design, e);
+  findParentColumn(t) {
+    return ft(this.design, t);
   }
-  findParentRow(e) {
-    return bt(this.design, e);
+  findParentRow(t) {
+    return bt(this.design, t);
   }
   // ── Factory Methods (delegate to design-factory) ───────────
   /** Create a new row with the given column layout */
-  createRow(e) {
-    const o = ht(this.counterManager, e);
+  createRow(t) {
+    const o = ut(this.counterManager, t);
     return this.syncCounters(), o;
   }
   /** Create a new content block for the given tool type */
-  createContent(e, o = {}) {
-    const n = ut(this.counterManager, e, o);
+  createContent(t, o = {}) {
+    const n = gt(this.counterManager, t, o);
     return this.syncCounters(), n;
   }
   // ── Private Helpers ────────────────────────────────────────
   syncCounters() {
     this.design.counters = this.counterManager.getCounters();
   }
-  emitUpdate(e, o) {
-    this.events.emit("design:updated", { type: e, item: o });
+  emitUpdate(t, o) {
+    this.events.emit("design:updated", { type: t, item: o });
   }
 }
-class mt {
+class xt {
   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(e) {
-    this.tools.set(e.name, e), this.lazyLoaders.delete(e.name), this.lazyMeta.delete(e.name);
+  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.
@@ -473,56 +473,56 @@ class mt {
    * );
    * ```
    */
-  registerLazy(e, o) {
-    this.tools.has(e.name) || (this.lazyMeta.set(e.name, e), this.lazyLoaders.set(e.name, o));
+  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(e) {
-    return this.tools.get(e);
+  get(t) {
+    return this.tools.get(t);
   }
   /** Check if a tool is registered (eager or lazy) */
-  has(e) {
-    return this.tools.has(e) || this.lazyLoaders.has(e);
+  has(t) {
+    return this.tools.has(t) || this.lazyLoaders.has(t);
   }
   /** Check if a tool is fully loaded and ready to render */
-  isLoaded(e) {
-    return this.tools.has(e);
+  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(e) {
-    if (this.tools.has(e)) return this.tools.get(e);
-    if (this.loadingPromises.has(e)) return this.loadingPromises.get(e);
-    const o = this.lazyLoaders.get(e);
+  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(e, i), this.lazyLoaders.delete(e), this.lazyMeta.delete(e), this.loadingPromises.delete(e), i));
-    return this.loadingPromises.set(e, n), n;
+    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((e, o) => (e.position ?? 0) - (o.position ?? 0));
+    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 e = [];
+    const t = [];
     for (const o of this.tools.values())
-      e.push({ name: o.name, label: o.label, icon: o.icon, position: o.position });
+      t.push({ name: o.name, label: o.label, icon: o.icon, position: o.position });
     for (const o of this.lazyMeta.values())
-      e.push(o);
-    return e.sort((o, n) => (o.position ?? 0) - (n.position ?? 0));
+      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(e) {
-    const o = this.tools.get(e);
+  getDefaultValues(t) {
+    const o = this.tools.get(t);
     if (!o) return {};
     const n = { ...o.defaultValues };
     for (const i of Object.values(o.options))
@@ -531,40 +531,40 @@ class mt {
     return n;
   }
   /** Get property groups for a tool */
-  getPropertyGroups(e) {
-    return this.tools.get(e)?.options ?? {};
+  getPropertyGroups(t) {
+    return this.tools.get(t)?.options ?? {};
   }
 }
 const E = {
   /** ID of the content currently being dragged (null if not dragging content) */
   draggingContentId: null,
-  startContentDrag(t) {
-    this.draggingContentId = t;
+  startContentDrag(e) {
+    this.draggingContentId = e;
   },
   reset() {
     this.draggingContentId = null;
   }
 };
-function J(t) {
-  const e = document.createElement("div");
-  return Object.assign(e.style, {
+function Q(e) {
+  const t = document.createElement("div");
+  return Object.assign(t.style, {
     position: "absolute",
     left: "0",
     right: "0",
     height: "3px",
-    background: t,
+    background: e,
     borderRadius: "2px",
     pointerEvents: "none",
     zIndex: "1000",
     display: "none",
-    boxShadow: `0 0 6px ${t}80`
-  }), e;
+    boxShadow: `0 0 6px ${e}80`
+  }), t;
 }
-function X(t, e, o, n, i = "4px") {
-  t.parentNode !== e && (t.remove(), e.appendChild(t));
-  const s = (e instanceof ShadowRoot ? e.host : e).getBoundingClientRect();
+function Z(e, t, o, n, i = "4px") {
+  e.parentNode !== t && (e.remove(), t.appendChild(e));
+  const s = (t instanceof ShadowRoot ? t.host : t).getBoundingClientRect();
   let l;
-  o.length === 0 || n === 0 ? l = o.length === 0 ? 0 : o[0].getBoundingClientRect().top - s.top : n >= o.length ? l = o[o.length - 1].getBoundingClientRect().bottom - s.top : l = o[n].getBoundingClientRect().top - s.top, Object.assign(t.style, {
+  o.length === 0 || n === 0 ? l = o.length === 0 ? 0 : o[0].getBoundingClientRect().top - s.top : n >= o.length ? l = o[o.length - 1].getBoundingClientRect().bottom - s.top : l = o[n].getBoundingClientRect().top - s.top, Object.assign(e.style, {
     display: "block",
     top: `${l}px`,
     left: i,
@@ -572,24 +572,24 @@ function X(t, e, o, n, i = "4px") {
     width: "auto"
   });
 }
-function M(t) {
-  t && (t.style.display = "none");
+function M(e) {
+  e && (e.style.display = "none");
 }
-function N(t, e) {
-  const o = (t instanceof ShadowRoot, t.children);
+function G(e, t) {
+  const o = (e instanceof ShadowRoot, e.children);
   for (const n of Array.from(o)) {
     const i = n;
-    e(i), i.shadowRoot && N(i.shadowRoot, e), i.children?.length && N(i, e);
+    t(i), i.shadowRoot && G(i.shadowRoot, t), i.children?.length && G(i, t);
   }
 }
-function Q(t, e) {
+function tt(e, t) {
   const o = [];
-  return N(t, (n) => {
-    n.matches?.(e) && o.push(n);
+  return G(e, (n) => {
+    n.matches?.(t) && o.push(n);
   }), o;
 }
-class xt {
-  constructor(e, o, n) {
+class yt {
+  constructor(t, o, n) {
     this.currentDrop = null, this.contentIndicator = null, this.rowIndicator = null, this.onDragOver = (i) => {
       const r = i.dataTransfer?.types || [], s = r.includes("application/maileditor-tool"), l = r.includes("application/maileditor-layout"), d = r.includes("application/maileditor-content") || !!E.draggingContentId;
       !s && !d && !l || (i.preventDefault(), i.dataTransfer.dropEffect = s || l ? "copy" : "move", l ? (this.currentDrop = this.findRowDropTarget(i.clientY), M(this.contentIndicator), this.showRowIndicator()) : (this.currentDrop = this.findContentDropTarget(i.clientX, i.clientY), M(this.rowIndicator), this.showContentIndicator()));
@@ -612,68 +612,68 @@ class xt {
     }, this.onDragLeave = (i) => {
       const r = i.relatedTarget;
       (!r || !this.root.contains(r)) && (this.hideAllIndicators(), this.currentDrop = null);
-    }, this.store = e, this.toolRegistry = o, this.root = n;
+    }, 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 = J("#3b82f6"), this.rowIndicator = J("#8b5cf6");
+    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 = Q("#3b82f6"), this.rowIndicator = Q("#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(e, o = this.currentDrop) {
-    const n = this.store.createRow(e), i = o?.type === "row" ? o.rowIndex : void 0;
+  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(e, o) {
-    if (await this.toolRegistry.ensureLoaded(e), o?.type === "content" && o.columnId) {
-      const n = this.toolRegistry.getDefaultValues(e), i = this.store.createContent(e, n);
+  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(e), r = this.store.createContent(e, i);
+      const i = this.toolRegistry.getDefaultValues(t), r = this.store.createContent(t, i);
       this.store.addContent(n.columns[0].id, r), this.store.select(r.id);
     }
   }
-  handleContentDrop(e, o) {
-    o?.type === "content" && o.columnId && (this.store.moveContent(e, o.columnId, o.contentIndex), this.store.select(e));
+  handleContentDrop(t, o) {
+    o?.type === "content" && o.columnId && (this.store.moveContent(t, o.columnId, o.contentIndex), this.store.select(t));
   }
   // ── Drop Target Detection ─────────────────────────────────
-  findRowDropTarget(e) {
+  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(e - n[0].getBoundingClientRect().top), r = { type: "row", rowIndex: 0, y: n[0].getBoundingClientRect().top };
+    let i = Math.abs(t - n[0].getBoundingClientRect().top), r = { type: "row", rowIndex: 0, y: n[0].getBoundingClientRect().top };
     for (let s = 0; s < n.length; s++) {
-      const l = n[s].getBoundingClientRect().bottom, d = Math.abs(e - l);
+      const l = n[s].getBoundingClientRect().bottom, d = Math.abs(t - l);
       d < i && (i = d, r = { type: "row", rowIndex: s + 1, y: l });
     }
     return r;
   }
-  findContentDropTarget(e, o) {
-    const n = Q(this.root, "me-column-renderer");
+  findContentDropTarget(t, o) {
+    const n = tt(this.root, "me-column-renderer");
     let i = null, r = 1 / 0;
     for (const s of n) {
       const l = s.dataset.columnId;
       if (!l || !s.shadowRoot) continue;
       const d = s.getBoundingClientRect();
-      if (e < d.left || e > d.right) continue;
+      if (t < d.left || t > d.right) continue;
       const p = Array.from(s.shadowRoot.querySelectorAll("me-content-renderer"));
       if (p.length === 0) {
-        const u = Math.abs(o - (d.top + d.height / 2));
-        u < r && (r = u, i = { type: "content", columnId: l, contentIndex: 0, y: d.top + d.height / 2 });
+        const g = Math.abs(o - (d.top + d.height / 2));
+        g < r && (r = g, i = { type: "content", columnId: l, contentIndex: 0, y: d.top + d.height / 2 });
         continue;
       }
       const h = p[0].getBoundingClientRect().top;
-      let g = Math.abs(o - h);
-      g < r && (r = g, i = { type: "content", columnId: l, contentIndex: 0, y: h });
-      for (let u = 0; u < p.length; u++) {
-        const m = p[u].getBoundingClientRect(), x = p[u + 1]?.getBoundingClientRect(), b = x ? (m.bottom + x.top) / 2 : m.bottom;
-        g = Math.abs(o - b), g < r && (r = g, i = { type: "content", columnId: l, contentIndex: u + 1, y: b });
+      let u = Math.abs(o - h);
+      u < r && (r = u, i = { type: "content", columnId: l, contentIndex: 0, y: h });
+      for (let g = 0; g < p.length; g++) {
+        const m = p[g].getBoundingClientRect(), x = p[g + 1]?.getBoundingClientRect(), f = x ? (m.bottom + x.top) / 2 : m.bottom;
+        u = Math.abs(o - f), u < r && (r = u, i = { type: "content", columnId: l, contentIndex: g + 1, y: f });
       }
     }
     return i;
@@ -684,20 +684,20 @@ class xt {
       M(this.contentIndicator);
       return;
     }
-    const o = Q(this.root, "me-column-renderer").find((i) => i.dataset.columnId === this.currentDrop.columnId);
+    const o = tt(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"));
-    X(this.contentIndicator, o.shadowRoot, n, this.currentDrop.contentIndex ?? 0, "4px");
+    Z(this.contentIndicator, o.shadowRoot, n, this.currentDrop.contentIndex ?? 0, "4px");
   }
   showRowIndicator() {
     if (!this.rowIndicator || !this.currentDrop) {
       M(this.rowIndicator);
       return;
     }
-    const e = this.root.querySelector("me-editor-canvas"), o = e?.shadowRoot?.querySelector(".canvas-body");
+    const t = this.root.querySelector("me-editor-canvas"), o = t?.shadowRoot?.querySelector(".canvas-body");
     if (!o) return;
-    const n = Array.from(e.shadowRoot.querySelectorAll("me-row-renderer"));
-    X(this.rowIndicator, o, n, this.currentDrop.rowIndex ?? 0, "0");
+    const n = Array.from(t.shadowRoot.querySelectorAll("me-row-renderer"));
+    Z(this.rowIndicator, o, n, this.currentDrop.rowIndex ?? 0, "0");
   }
   hideAllIndicators() {
     M(this.contentIndicator), M(this.rowIndicator);
@@ -706,41 +706,41 @@ class xt {
     this.currentDrop = null, E.reset();
   }
 }
-function a(t, e, o = "") {
-  const n = t[e];
+function a(e, t, o = "") {
+  const n = e[t];
   return typeof n == "string" && n !== "" ? n : typeof n == "number" ? String(n) : o;
 }
-function Z(t) {
-  return typeof t == "string" ? t : t && typeof t == "object" && "url" in t && t.url || "";
+function et(e) {
+  return typeof e == "string" ? e : e && typeof e == "object" && "url" in e && e.url || "";
 }
-function tt(t) {
-  if (t && typeof t == "object") {
-    const e = t;
+function ot(e) {
+  if (e && typeof e == "object") {
+    const t = e;
     return {
-      width: typeof e.width == "number" ? e.width : void 0,
-      maxWidth: typeof e.maxWidth == "string" ? e.maxWidth : void 0
+      width: typeof t.width == "number" ? t.width : void 0,
+      maxWidth: typeof t.maxWidth == "string" ? t.maxWidth : void 0
     };
   }
   return {};
 }
-function yt(t) {
-  const e = t.action;
-  if (e && typeof e == "object") {
-    const o = e.values;
+function wt(e) {
+  const t = e.action;
+  if (t && typeof t == "object") {
+    const o = t.values;
     return {
       href: o?.href || "",
       target: o?.target || "_blank"
     };
   }
   return {
-    href: a(t, "href"),
-    target: a(t, "target", "_blank")
+    href: a(e, "href"),
+    target: a(e, "target", "_blank")
   };
 }
-function et(t, e = "") {
-  const o = t.text;
+function nt(e, t = "") {
+  const o = e.text;
   if (typeof o == "string" && o !== "") return o;
-  const n = t.textJson;
+  const n = e.textJson;
   if (typeof n == "string")
     try {
       const i = JSON.parse(n), r = [], s = (l) => {
@@ -751,36 +751,52 @@ function et(t, e = "") {
       if (s(i.root || i), r.length > 0) return r.join("");
     } catch {
     }
-  return e;
+  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, r = n.url;
+    if (r && typeof document < "u") {
+      const s = `emabuild-font-${i.replace(/[^a-z]/gi, "")}`;
+      if (!document.getElementById(s)) {
+        const l = document.createElement("link");
+        l.id = s, l.rel = "stylesheet", l.href = r, document.head.appendChild(l);
+      }
+    }
+    return i;
+  }
+  return t;
 }
-function se(t, e) {
-  if (typeof t != "string") return e;
+function le(e, t) {
+  if (typeof e != "string") return t;
   try {
-    return JSON.parse(t);
+    return JSON.parse(e);
   } catch {
-    return e;
+    return t;
   }
 }
-function V(t, e) {
-  const { padding: o, align: n = "left", extraTdStyle: i = "" } = e;
+function V(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="${`overflow-wrap:break-word;word-break:break-word;padding:${o};font-family:arial,helvetica,sans-serif;${i}`}" align="${n}">
-    ${t}
+    ${e}
   </td></tr></tbody>
 </table>`;
 }
-function wt(t, e, o) {
+function vt(e, t, o) {
   const { bgColor: n, textColor: i, fontSize: r, fontWeight: s, borderRadius: l } = o, d = parseInt(l) || 0;
   if (d <= 0) return "";
   const p = 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="${e}" style="height:auto;v-text-anchor:middle;width:auto;" arcsize="${p}%" stroke="f" fillcolor="${n}">
+  <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="${p}%" stroke="f" fillcolor="${n}">
     <w:anchorlock/>
-    <center style="color:${i};font-family:arial,helvetica,sans-serif;font-size:${r};font-weight:${s};">${t}</center>
+    <center style="color:${i};font-family:arial,helvetica,sans-serif;font-size:${r};font-weight:${s};">${e}</center>
   </v:roundrect>
   <![endif]-->`;
 }
-const vt = {
+const $t = {
   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>',
@@ -842,20 +858,20 @@ const vt = {
     textAlign: "left"
   },
   renderer: {
-    renderEditor(t) {
-      const e = a(t, "containerPadding", "10px"), o = a(t, "backgroundColor", "transparent"), n = a(t, "color", "inherit"), i = a(t, "lineHeight", "140%"), r = a(t, "text");
+    renderEditor(e) {
+      const t = a(e, "containerPadding", "10px"), o = a(e, "backgroundColor", "transparent"), n = a(e, "color", "inherit"), i = a(e, "lineHeight", "140%"), r = Y(e), s = a(e, "text");
       return c`
-        <div style="padding:${e};background-color:${o};color:${n};line-height:${i};word-break:break-word;">
-          ${q(r)}
+        <div style="padding:${t};background-color:${o};color:${n};line-height:${i};font-family:${r};word-break:break-word;">
+          ${H(s)}
         </div>
       `;
     },
-    renderHtml(t) {
-      const e = a(t, "containerPadding", "10px"), o = a(t, "backgroundColor"), n = a(t, "color", "#000000"), i = a(t, "lineHeight", "140%"), r = a(t, "textAlign", "left"), s = a(t, "text"), l = o ? `background-color:${o};` : "", d = `<div style="font-size:14px;color:${n};line-height:${i};text-align:${r};word-wrap:break-word;">${s}</div>`;
-      return V(d, { padding: e, extraTdStyle: l });
+    renderHtml(e) {
+      const t = a(e, "containerPadding", "10px"), o = a(e, "backgroundColor"), n = a(e, "color", "#000000"), i = a(e, "lineHeight", "140%"), r = a(e, "textAlign", "left"), s = a(e, "text"), l = o ? `background-color:${o};` : "", d = `<div style="font-size:14px;color:${n};line-height:${i};text-align:${r};word-wrap:break-word;">${s}</div>`;
+      return V(d, { padding: t, extraTdStyle: l });
     }
   }
-}, $t = {
+}, kt = {
   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>',
@@ -956,20 +972,20 @@ const vt = {
     containerPadding: "10px"
   },
   renderer: {
-    renderEditor(t) {
-      const e = a(t, "containerPadding", "10px"), o = a(t, "fontSize", "22px"), n = a(t, "color", "#000000"), i = a(t, "textAlign", "left"), r = a(t, "fontWeight", "700"), s = a(t, "lineHeight", "140%"), l = et(t, "Heading");
+    renderEditor(e) {
+      const t = a(e, "containerPadding", "10px"), o = a(e, "fontSize", "22px"), n = a(e, "color", "#000000"), i = a(e, "textAlign", "left"), r = a(e, "fontWeight", "700"), s = a(e, "lineHeight", "140%"), l = Y(e), d = nt(e, "Heading");
       return c`
-        <div style="padding:${e};font-size:${o};color:${n};text-align:${i};font-weight:${r};line-height:${s};">
-          ${l}
+        <div style="padding:${t};font-size:${o};color:${n};text-align:${i};font-weight:${r};line-height:${s};font-family:${l};">
+          ${H(d)}
         </div>
       `;
     },
-    renderHtml(t) {
-      const e = a(t, "containerPadding", "10px"), o = a(t, "fontSize", "22px"), n = a(t, "color", "#000000"), i = a(t, "textAlign", "left"), r = a(t, "fontWeight", "700"), s = a(t, "lineHeight", "140%"), l = a(t, "letterSpacing", "normal"), d = a(t, "headingType", "h1"), p = et(t, "Heading"), h = `<${d} style="margin:0;font-size:${o};color:${n};text-align:${i};font-weight:${r};line-height:${s};letter-spacing:${l};">${p}</${d}>`;
-      return V(h, { padding: e });
+    renderHtml(e) {
+      const t = a(e, "containerPadding", "10px"), o = a(e, "fontSize", "22px"), n = a(e, "color", "#000000"), i = a(e, "textAlign", "left"), r = a(e, "fontWeight", "700"), s = a(e, "lineHeight", "140%"), l = a(e, "letterSpacing", "normal"), d = Y(e), p = a(e, "headingType", "h1"), h = nt(e, "Heading"), u = `<${p} style="margin:0;font-size:${o};color:${n};text-align:${i};font-weight:${r};line-height:${s};letter-spacing:${l};font-family:${d};">${h}</${p}>`;
+      return V(u, { padding: t });
     }
   }
-}, kt = {
+}, Ct = {
   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>',
@@ -1011,16 +1027,16 @@ const vt = {
     containerPadding: "10px"
   },
   renderer: {
-    renderEditor(t) {
-      const e = a(t, "containerPadding", "10px"), o = a(t, "color", "#374151"), n = a(t, "lineHeight", "160%");
-      return c`<div style="padding:${e};color:${o};line-height:${n};word-break:break-word;">${q(a(t, "text"))}</div>`;
+    renderEditor(e) {
+      const t = a(e, "containerPadding", "10px"), o = a(e, "color", "#374151"), n = a(e, "lineHeight", "160%");
+      return c`<div style="padding:${t};color:${o};line-height:${n};word-break:break-word;">${H(a(e, "text"))}</div>`;
     },
-    renderHtml(t) {
-      const e = a(t, "containerPadding", "10px"), o = a(t, "color", "#374151"), n = a(t, "lineHeight", "160%"), i = a(t, "textAlign", "left"), r = a(t, "letterSpacing", "normal"), s = `<div style="font-size:14px;color:${o};line-height:${n};text-align:${i};letter-spacing:${r};word-wrap:break-word;">${a(t, "text")}</div>`;
-      return V(s, { padding: e });
+    renderHtml(e) {
+      const t = a(e, "containerPadding", "10px"), o = a(e, "color", "#374151"), n = a(e, "lineHeight", "160%"), i = a(e, "textAlign", "left"), r = a(e, "letterSpacing", "normal"), s = `<div style="font-size:14px;color:${o};line-height:${n};text-align:${i};letter-spacing:${r};word-wrap:break-word;">${a(e, "text")}</div>`;
+      return V(s, { padding: t });
     }
   }
-}, Ct = {
+}, _t = {
   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>',
@@ -1080,16 +1096,16 @@ const vt = {
     containerPadding: "10px"
   },
   renderer: {
-    renderEditor(t) {
-      const e = a(t, "containerPadding", "10px"), o = Z(t.src), n = a(t, "alt"), r = tt(t.src).maxWidth || a(t, "width", "100%"), s = a(t, "borderRadius", "0px"), l = a(t, "textAlign", a(t, "align", "center"));
-      return o ? c`<div style="padding:${e};text-align:${l};"><img src=${o} alt=${n} style="display:inline-block;max-width:100%;width:${r};border-radius:${s};border:0;" /></div>` : c`<div style="padding:${e};text-align:${l};"><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>`;
+    renderEditor(e) {
+      const t = a(e, "containerPadding", "10px"), o = et(e.src), n = a(e, "alt"), r = ot(e.src).maxWidth || a(e, "width", "100%"), s = a(e, "borderRadius", "0px"), l = a(e, "textAlign", a(e, "align", "center"));
+      return o ? c`<div style="padding:${t};text-align:${l};"><img src=${o} alt=${n} style="display:inline-block;max-width:100%;width:${r};border-radius:${s};border:0;" /></div>` : c`<div style="padding:${t};text-align:${l};"><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(t, e) {
-      const o = a(t, "containerPadding", "10px"), n = Z(t.src), i = a(t, "alt"), r = yt(t), l = tt(t.src).maxWidth || a(t, "width", "100%"), d = a(t, "borderRadius", "0px"), p = a(t, "textAlign", a(t, "align", "center")), h = l === "100%" ? e.columnWidth : parseInt(l) || e.columnWidth, g = d !== "0px" ? `border-radius:${d};` : "", u = `<img align="${p}" border="0" src="${n}" alt="${i}" title="${i}" style="outline:none;text-decoration:none;clear:both;display:inline-block!important;border:none;height:auto;float:none;width:${l};max-width:${h}px;${g}" width="${h}" />`, m = r.href ? `<a href="${r.href}" target="${r.target}" style="text-decoration:none;">${u}</a>` : u;
+    renderHtml(e, t) {
+      const o = a(e, "containerPadding", "10px"), n = et(e.src), i = a(e, "alt"), r = wt(e), l = ot(e.src).maxWidth || a(e, "width", "100%"), d = a(e, "borderRadius", "0px"), p = a(e, "textAlign", a(e, "align", "center")), h = l === "100%" ? t.columnWidth : parseInt(l) || t.columnWidth, u = d !== "0px" ? `border-radius:${d};` : "", g = `<img align="${p}" border="0" src="${n}" alt="${i}" title="${i}" style="outline:none;text-decoration:none;clear:both;display:inline-block!important;border:none;height:auto;float:none;width:${l};max-width:${h}px;${u}" width="${h}" />`, m = r.href ? `<a href="${r.href}" target="${r.target}" style="text-decoration:none;">${g}</a>` : g;
       return V(m, { padding: o, align: p });
     }
   }
-}, _t = {
+}, Dt = {
   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>',
@@ -1175,25 +1191,25 @@ const vt = {
     containerPadding: "10px"
   },
   renderer: {
-    renderEditor(t) {
-      const e = a(t, "containerPadding", "10px"), o = a(t, "backgroundColor", "#3b82f6"), n = a(t, "textColor", "#ffffff"), i = a(t, "fontSize", "14px"), r = a(t, "fontWeight", "700"), s = a(t, "borderRadius", "4px"), l = a(t, "buttonPadding", "10px 20px"), d = a(t, "text", "Click Me"), p = a(t, "textAlign", "center"), h = a(t, "buttonWidth", "auto"), g = a(t, "borderWidth", "0px"), u = a(t, "borderColor", o), m = g !== "0px" ? `border:${g} solid ${u};` : "border:none;", x = h === "auto" ? "display:inline-block;" : `display:block;width:${h};`;
+    renderEditor(e) {
+      const t = a(e, "containerPadding", "10px"), o = a(e, "backgroundColor", "#3b82f6"), n = a(e, "textColor", "#ffffff"), i = a(e, "fontSize", "14px"), r = a(e, "fontWeight", "700"), s = a(e, "borderRadius", "4px"), l = a(e, "buttonPadding", "10px 20px"), d = a(e, "text", "Click Me"), p = a(e, "textAlign", "center"), h = a(e, "buttonWidth", "auto"), u = a(e, "borderWidth", "0px"), g = a(e, "borderColor", o), m = u !== "0px" ? `border:${u} solid ${g};` : "border:none;", x = h === "auto" ? "display:inline-block;" : `display:block;width:${h};`;
       return c`
-        <div style="padding:${e};text-align:${p};">
+        <div style="padding:${t};text-align:${p};">
           <a style="${x}background-color:${o};color:${n};font-size:${i};font-weight:${r};border-radius:${s};padding:${l};text-decoration:none;text-align:center;${m}cursor:pointer;font-family:arial,helvetica,sans-serif;box-sizing:border-box;">${d}</a>
         </div>
       `;
     },
-    renderHtml(t) {
-      const e = a(t, "containerPadding", "10px"), o = a(t, "backgroundColor", "#3b82f6"), n = a(t, "textColor", "#ffffff"), i = a(t, "fontSize", "14px"), r = a(t, "fontWeight", "700"), s = a(t, "borderRadius", "4px"), l = a(t, "buttonPadding", "10px 20px"), d = a(t, "text", "Click Me"), p = a(t, "textAlign", "center"), h = a(t, "href", "#"), g = a(t, "target", "_blank"), u = a(t, "borderWidth", "0px"), m = a(t, "borderColor", o), x = u !== "0px" ? `border:${u} solid ${m};` : "border:none;", b = wt(d, h, { bgColor: o, textColor: n, fontSize: i, fontWeight: r, borderRadius: s }), y = b ? `${b}
+    renderHtml(e) {
+      const t = a(e, "containerPadding", "10px"), o = a(e, "backgroundColor", "#3b82f6"), n = a(e, "textColor", "#ffffff"), i = a(e, "fontSize", "14px"), r = a(e, "fontWeight", "700"), s = a(e, "borderRadius", "4px"), l = a(e, "buttonPadding", "10px 20px"), d = a(e, "text", "Click Me"), p = a(e, "textAlign", "center"), h = a(e, "href", "#"), u = a(e, "target", "_blank"), g = a(e, "borderWidth", "0px"), m = a(e, "borderColor", o), x = g !== "0px" ? `border:${g} solid ${m};` : "border:none;", f = vt(d, h, { bgColor: o, textColor: n, fontSize: i, fontWeight: r, borderRadius: s }), y = f ? `${f}
   <!--[if !mso]><!-->` : "<!--[if !mso]><!-->", z = `<div align="${p}">
       ${y}
-      <a href="${h}" target="${g}" style="box-sizing:border-box;display:inline-block;text-decoration:none;text-align:center;color:${n};background-color:${o};border-radius:${s};font-size:${i};font-weight:${r};padding:${l};font-family:arial,helvetica,sans-serif;${x}mso-border-alt:none;word-break:keep-all;"><span style="line-height:120%;">${d}</span></a>
+      <a href="${h}" target="${u}" style="box-sizing:border-box;display:inline-block;text-decoration:none;text-align:center;color:${n};background-color:${o};border-radius:${s};font-size:${i};font-weight:${r};padding:${l};font-family:arial,helvetica,sans-serif;${x}mso-border-alt:none;word-break:keep-all;"><span style="line-height:120%;">${d}</span></a>
       <!--<![endif]-->
     </div>`;
-      return V(z, { padding: e, align: p });
+      return V(z, { padding: t, align: p });
     }
   }
-}, Dt = {
+}, St = {
   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>',
@@ -1239,53 +1255,53 @@ const vt = {
     containerPadding: "10px"
   },
   renderer: {
-    renderEditor(t) {
-      const e = a(t, "containerPadding", "10px"), o = a(t, "width", "100%"), n = `${a(t, "borderTopWidth", "1px")} ${a(t, "borderTopStyle", "solid")} ${a(t, "borderTopColor", "#cccccc")}`;
-      return c`<div style="padding:${e};"><div style="border-top:${n};width:${o};margin:0 auto;"></div></div>`;
+    renderEditor(e) {
+      const t = a(e, "containerPadding", "10px"), o = a(e, "width", "100%"), n = `${a(e, "borderTopWidth", "1px")} ${a(e, "borderTopStyle", "solid")} ${a(e, "borderTopColor", "#cccccc")}`;
+      return c`<div style="padding:${t};"><div style="border-top:${n};width:${o};margin:0 auto;"></div></div>`;
     },
-    renderHtml(t) {
-      const e = a(t, "containerPadding", "10px"), o = a(t, "width", "100%"), n = `${a(t, "borderTopWidth", "1px")} ${a(t, "borderTopStyle", "solid")} ${a(t, "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 V(i, { padding: e, align: "center" });
+    renderHtml(e) {
+      const t = a(e, "containerPadding", "10px"), o = a(e, "width", "100%"), n = `${a(e, "borderTopWidth", "1px")} ${a(e, "borderTopStyle", "solid")} ${a(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 V(i, { padding: t, align: "center" });
     }
   }
-}, St = [
-  vt,
+}, Rt = [
   $t,
   kt,
   Ct,
   _t,
-  Dt
-], ot = [
+  Dt,
+  St
+], it = [
   {
     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-Be4HAhoj.js").then((t) => t.htmlTool)
+    loader: () => import("./html-tool-YYfXkFIO.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-bc46FNgk.js").then((t) => t.socialTool)
+    loader: () => import("./social-tool-Ba7s8khr.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-HPxxeiRV.js").then((t) => t.menuTool)
+    loader: () => import("./menu-tool-Dus3qFoN.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-CPjCWbTX.js").then((t) => t.videoTool)
+    loader: () => import("./video-tool-3FQ9rHns.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-GPhdsvRE.js").then((t) => t.timerTool)
+    loader: () => import("./timer-tool-YDsaHv7a.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-LzRcAPFb.js").then((t) => t.tableTool)
+    loader: () => import("./table-tool-D8yaPASq.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-DSXsWpjQ.js").then((t) => t.formTool)
+    loader: () => import("./form-tool-DShwYWpp.js").then((e) => e.formTool)
   }
 ];
-function Rt(t, e, o) {
+function Mt(e, t, o) {
   const n = o.backgroundColor || "#e7e7e7", i = o.contentWidth || "600px", r = o.fontFamily?.value || "arial,helvetica,sans-serif", s = o.textColor || "#000000", l = o.preheaderText || "", d = l ? `<div style="display:none;font-size:1px;color:${n};line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">${l}${"&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">
@@ -1310,7 +1326,7 @@ function Rt(t, e, o) {
   <![endif]-->
   <!--[if !mso]><!-->
   <style type="text/css">
-    ${e}
+    ${t}
   </style>
   <!--<![endif]-->
   <style type="text/css">
@@ -1329,7 +1345,7 @@ function Rt(t, e, o) {
       <tr style="vertical-align:top;">
         <td style="word-break:break-word;border-collapse:collapse !important;vertical-align:top;">
           <!--[if (mso)|(IE)]><table width="${parseInt(i)}" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
-          ${t}
+          ${e}
           <!--[if (mso)|(IE)]></td></tr></table><![endif]-->
         </td>
       </tr>
@@ -1338,20 +1354,20 @@ function Rt(t, e, o) {
 </body>
 </html>`;
 }
-function Mt(t, e, o) {
-  const n = parseInt(e.contentWidth || "600"), i = t.values.backgroundColor || "", r = t.values.columnsBackgroundColor || "", s = t.values.padding || "0px", l = t.cells.reduce((b, y) => b + y, 0), d = i ? `background-color:${i};` : "", p = t.values.backgroundImage?.url ? `background-image:url('${t.values.backgroundImage.url}');background-repeat:${t.values.backgroundImage.repeat ? "repeat" : "no-repeat"};background-position:center top;background-size:${t.values.backgroundImage.cover ? "cover" : "auto"};` : "", h = t.columns.map((b, y) => {
-    const R = Math.round(t.cells[y] / l * n);
-    return nt(b, R, r, e, o);
-  }), g = t.columns.length > 1;
-  let u;
-  if (g) {
-    const b = t.columns.map((y, R) => {
-      const z = Math.round(t.cells[R] / l * n), at = nt(y, z, r, e, o);
+function Tt(e, t, o) {
+  const n = parseInt(t.contentWidth || "600"), i = e.values.backgroundColor || "", r = e.values.columnsBackgroundColor || "", s = e.values.padding || "0px", l = e.cells.reduce((f, y) => f + y, 0), d = i ? `background-color:${i};` : "", p = e.values.backgroundImage?.url ? `background-image:url('${e.values.backgroundImage.url}');background-repeat:${e.values.backgroundImage.repeat ? "repeat" : "no-repeat"};background-position:center top;background-size:${e.values.backgroundImage.cover ? "cover" : "auto"};` : "", h = e.columns.map((f, y) => {
+    const R = Math.round(e.cells[y] / l * n);
+    return rt(f, R, r, t, o);
+  }), u = e.columns.length > 1;
+  let g;
+  if (u) {
+    const f = e.columns.map((y, R) => {
+      const z = Math.round(e.cells[R] / l * n), at = rt(y, z, r, t, o);
       return `<!--[if (mso)|(IE)]><td align="center" width="${z}" style="width:${z}px;padding:0px;border:none;" valign="top"><![endif]-->
 ${at}
 <!--[if (mso)|(IE)]></td><![endif]-->`;
     });
-    u = `<!--[if (mso)|(IE)]><table role="presentation" width="${n}" cellpadding="0" cellspacing="0" border="0"><tr>${b.join(`
+    g = `<!--[if (mso)|(IE)]><table role="presentation" width="${n}" cellpadding="0" cellspacing="0" border="0"><tr>${f.join(`
 `)}</tr></table><![endif]-->
 
 <!--[if !mso]><!-->
@@ -1361,33 +1377,33 @@ ${h.join(`
 </div>
 <!--<![endif]-->`;
   } else
-    u = h.join(`
+    g = h.join(`
 `);
-  const m = t.values.hideDesktop ? " u_hide_desktop" : "", x = t.values.hideMobile ? " u_hide_mobile" : "";
+  const m = e.values.hideDesktop ? " u_hide_desktop" : "", x = e.values.hideMobile ? " u_hide_mobile" : "";
   return `<div class="u_row${m}${x}" style="padding:${s};${d}${p}">
   <div style="margin:0 auto;min-width:320px;max-width:${n}px;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;background-color:transparent;">
     <div style="border-collapse:collapse;display:table;width:100%;height:100%;background-color:transparent;">
-      ${u}
+      ${g}
     </div>
   </div>
 </div>`;
 }
-function nt(t, e, o, n, i) {
-  const r = t.values.backgroundColor || o || "", s = t.values.padding || "0px", l = t.values.borderRadius || "0px", d = r ? `background-color:${r};` : "", p = t.contents.map((h) => {
-    const g = i.get(h.type);
-    if (!g) return `<!-- unknown tool: ${h.type} -->`;
-    const u = {
-      columnWidth: e,
+function rt(e, t, o, n, i) {
+  const r = e.values.backgroundColor || o || "", s = e.values.padding || "0px", l = e.values.borderRadius || "0px", d = r ? `background-color:${r};` : "", p = e.contents.map((h) => {
+    const u = i.get(h.type);
+    if (!u) return `<!-- unknown tool: ${h.type} -->`;
+    const g = {
+      columnWidth: t,
       displayMode: "email",
       contentWidth: parseInt(n.contentWidth || "600"),
       bodyValues: n
     };
-    let m = g(h.values, u);
-    const x = !!h.values.hideDesktop, b = !!h.values.hideMobile;
-    return (x || b) && (m = `<div class="${[x && "u_hide_desktop", b && "u_hide_mobile"].filter(Boolean).join(" ")}">${m}</div>`), m;
+    let m = u(h.values, g);
+    const x = !!h.values.hideDesktop, f = !!h.values.hideMobile;
+    return (x || f) && (m = `<div class="${[x && "u_hide_desktop", f && "u_hide_mobile"].filter(Boolean).join(" ")}">${m}</div>`), m;
   }).join(`
 `);
-  return `<div class="u_column" style="max-width:${e}px;min-width:${Math.min(e, 320)}px;display:table-cell;vertical-align:top;">
+  return `<div class="u_column" style="max-width:${t}px;min-width:${Math.min(t, 320)}px;display:table-cell;vertical-align:top;">
   <div style="height:100%;width:100% !important;border-radius:${l};-webkit-border-radius:${l};${d}">
     <div style="box-sizing:border-box;height:100%;padding:${s};border:none;border-radius:${l};-webkit-border-radius:${l};">
       ${p || '<!--[if (!mso)&(!IE)]><!--><div style="height:0;min-height:1px;font-size:0;">&nbsp;</div><!--<![endif]-->'}
@@ -1395,13 +1411,13 @@ function nt(t, e, o, n, i) {
   </div>
 </div>`;
 }
-function It(t) {
+function It(e) {
   return `
-@media only screen and (min-width: ${t + 20}px) {
+@media only screen and (min-width: ${e + 20}px) {
   .u_row .u_column { display: table-cell; }
 }
 
-@media only screen and (max-width: ${t + 20}px) {
+@media only screen and (max-width: ${e + 20}px) {
   .u_row .u_column {
     display: block !important;
     width: 100% !important;
@@ -1435,30 +1451,30 @@ function It(t) {
 .u_hide_desktop { display: block !important; }
 .u_hide_mobile { display: block !important; }
 
-@media only screen and (max-width: ${t + 20}px) {
+@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: ${t + 21}px) {
+@media only screen and (min-width: ${e + 21}px) {
   .u_hide_desktop { display: none !important; }
   .u_hide_mobile { display: block !important; }
 }`;
 }
-function Tt(t, e, o) {
-  const n = t.body.values, i = parseInt(n.contentWidth || "600"), r = t.body.rows.map((g) => Mt(g, n, e)).join(`
+function Pt(e, t, o) {
+  const n = e.body.values, i = parseInt(n.contentWidth || "600"), r = e.body.rows.map((u) => Tt(u, n, t)).join(`
 `), s = It(i);
-  let l = Rt(r, s, n);
+  let l = Mt(r, s, n);
   if (o?.mergeTags)
-    for (const [g, u] of Object.entries(o.mergeTags))
-      l = l.replaceAll(`{{${g}}}`, u);
+    for (const [u, g] of Object.entries(o.mergeTags))
+      l = l.replaceAll(`{{${u}}}`, g);
   const d = l.match(/<body[^>]*>([\s\S]*)<\/body>/i), p = l.match(/<style[^>]*>([\s\S]*?)<\/style>/gi), h = [];
   return n.fontFamily?.url && h.push(n.fontFamily.url), {
-    design: structuredClone(t),
+    design: structuredClone(e),
     html: l,
     chunks: {
       body: d?.[1] ?? r,
-      css: p?.map((g) => g.replace(/<\/?style[^>]*>/gi, "")).join(`
+      css: p?.map((u) => u.replace(/<\/?style[^>]*>/gi, "")).join(`
 `) ?? s,
       fonts: h,
       js: ""
@@ -1470,12 +1486,12 @@ class S {
    * @param host - The Lit component that owns this controller
    * @param channels - Which store channels to subscribe to
    */
-  constructor(e, o) {
-    this.store = null, this.host = e, this.channels = o, e.addController(this);
+  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(e) {
-    this.store !== e && (this.unsub?.(), this.store = e, this.subscribe());
+  setStore(t) {
+    this.store !== t && (this.unsub?.(), this.store = t, this.subscribe());
   }
   hostConnected() {
     this.subscribe();
@@ -1489,27 +1505,27 @@ class S {
     }));
   }
 }
-var Pt = Object.defineProperty, Vt = Object.getOwnPropertyDescriptor, j = (t, e, o, n) => {
-  for (var i = n > 1 ? void 0 : n ? Vt(e, o) : e, r = t.length - 1, s; r >= 0; r--)
-    (s = t[r]) && (i = (n ? s(e, o, i) : s(i)) || i);
-  return n && i && Pt(e, o, i), i;
+var Vt = Object.defineProperty, zt = Object.getOwnPropertyDescriptor, W = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? zt(t, o) : t, r = e.length - 1, s; r >= 0; r--)
+    (s = e[r]) && (i = (n ? s(t, o, i) : s(i)) || i);
+  return n && i && Vt(t, o, i), i;
 };
 let _ = class extends v {
   constructor() {
-    super(...arguments), this.storeCtrl = new S(this, ["design", "selection", "hover", "viewMode"]), this._onDragStart = (t) => {
-      t.dataTransfer.setData("application/maileditor-content", this.content.id), t.dataTransfer.effectAllowed = "move", this.style.opacity = "0.4", E.startContentDrag(this.content.id);
+    super(...arguments), this.storeCtrl = new S(this, ["design", "selection", "hover", "viewMode"]), this._onDragStart = (e) => {
+      e.dataTransfer.setData("application/maileditor-content", this.content.id), e.dataTransfer.effectAllowed = "move", this.style.opacity = "0.4", E.startContentDrag(this.content.id);
     }, this._onDragEnd = () => {
       this.style.opacity = "1", E.reset();
     };
   }
-  set store(t) {
-    this.storeCtrl.setStore(t);
+  set store(e) {
+    this.storeCtrl.setStore(e);
   }
   get store() {
     return this.storeCtrl.store;
   }
-  handleClick(t) {
-    t.stopPropagation(), this.store.select(this.content.id);
+  handleClick(e) {
+    e.stopPropagation(), this.store.select(this.content.id);
   }
   handleMouseEnter() {
     this.store.hover(this.content.id);
@@ -1517,11 +1533,11 @@ let _ = class extends v {
   handleMouseLeave() {
     this.store.hover(null);
   }
-  handleDelete(t) {
-    t.stopPropagation(), this.store.removeContent(this.content.id);
+  handleDelete(e) {
+    e.stopPropagation(), this.store.removeContent(this.content.id);
   }
-  handleDuplicate(t) {
-    t.stopPropagation(), this.store.duplicateContent(this.content.id);
+  handleDuplicate(e) {
+    e.stopPropagation(), this.store.duplicateContent(this.content.id);
   }
   connectedCallback() {
     super.connectedCallback(), this.addEventListener("dragstart", this._onDragStart), this.addEventListener("dragend", this._onDragEnd);
@@ -1531,14 +1547,14 @@ let _ = class extends v {
   }
   render() {
     if (!this.store) return c``;
-    const t = this.store.selectedId === this.content.id, e = this.store.hoveredId === this.content.id, o = this.store.viewMode, n = !!this.content.values.hideDesktop, i = !!this.content.values.hideMobile, r = o === "desktop" && n || o === "mobile" && i;
-    this.classList.toggle("selected", t), this.classList.toggle("hovered", e), this.classList.toggle("hidden-in-view", r), this.setAttribute("draggable", "true"), this.dataset.contentId = this.content.id;
+    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, r = o === "desktop" && n || o === "mobile" && i;
+    this.classList.toggle("selected", e), this.classList.toggle("hovered", t), this.classList.toggle("hidden-in-view", r), this.setAttribute("draggable", "true"), this.dataset.contentId = this.content.id;
     const s = this.toolRegistry.get(this.content.type);
     if (!s && this.toolRegistry.has(this.content.type))
       return this.toolRegistry.ensureLoaded(this.content.type).then(() => this.requestUpdate()), c`<div style="padding:16px;text-align:center;color:#9ca3af;font-size:13px;font-family:sans-serif;">Loading ${this.content.type}...</div>`;
     const l = s?.renderer.renderEditor(this.content.values, {
-      isSelected: t,
-      isHovered: e,
+      isSelected: e,
+      isHovered: t,
       columnWidth: 600,
       displayMode: "email"
     });
@@ -1591,36 +1607,36 @@ _.styles = $`
     .action-btn:hover { background: rgba(255,255,255,0.2); }
     .content-wrapper { position: relative; }
   `;
-j([
-  f({ attribute: !1 })
+W([
+  b({ attribute: !1 })
 ], _.prototype, "content", 2);
-j([
-  f({ attribute: !1 })
+W([
+  b({ attribute: !1 })
 ], _.prototype, "store", 1);
-j([
-  f({ attribute: !1 })
+W([
+  b({ attribute: !1 })
 ], _.prototype, "toolRegistry", 2);
-_ = j([
+_ = W([
   k("me-content-renderer")
 ], _);
-var zt = Object.defineProperty, Et = Object.getOwnPropertyDescriptor, B = (t, e, o, n) => {
-  for (var i = n > 1 ? void 0 : n ? Et(e, o) : e, r = t.length - 1, s; r >= 0; r--)
-    (s = t[r]) && (i = (n ? s(e, o, i) : s(i)) || i);
-  return n && i && zt(e, o, i), i;
+var Et = Object.defineProperty, Lt = Object.getOwnPropertyDescriptor, A = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? Lt(t, o) : t, r = e.length - 1, s; r >= 0; r--)
+    (s = e[r]) && (i = (n ? s(t, o, i) : s(i)) || i);
+  return n && i && Et(t, o, i), i;
 };
 let w = class extends v {
   constructor() {
     super(...arguments), this.storeCtrl = new S(this, ["design"]), this.widthPercent = 100;
   }
-  set store(t) {
-    this.storeCtrl.setStore(t);
+  set store(e) {
+    this.storeCtrl.setStore(e);
   }
   get store() {
     return this.storeCtrl.store;
   }
   render() {
-    const t = this.column.values.padding || "0px", e = this.column.values.backgroundColor || "transparent", o = this.column.contents;
-    return this.dataset.columnId = this.column.id, this.style.width = `${this.widthPercent}%`, this.style.padding = t, this.style.backgroundColor = e, this.style.verticalAlign = "top", this.style.boxSizing = "border-box", o.length === 0 ? c`
+    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 ? c`
         <div class="empty-column" data-column-id=${this.column.id}>
           Drag content here
         </div>
@@ -1667,56 +1683,56 @@ w.styles = $`
       opacity: 1;
     }
   `;
-B([
-  f({ attribute: !1 })
+A([
+  b({ attribute: !1 })
 ], w.prototype, "column", 2);
-B([
-  f({ attribute: !1 })
+A([
+  b({ attribute: !1 })
 ], w.prototype, "store", 1);
-B([
-  f({ attribute: !1 })
+A([
+  b({ attribute: !1 })
 ], w.prototype, "toolRegistry", 2);
-B([
-  f({ type: Number })
+A([
+  b({ type: Number })
 ], w.prototype, "widthPercent", 2);
-w = B([
+w = A([
   k("me-column-renderer")
 ], w);
-var Lt = Object.defineProperty, At = Object.getOwnPropertyDescriptor, W = (t, e, o, n) => {
-  for (var i = n > 1 ? void 0 : n ? At(e, o) : e, r = t.length - 1, s; r >= 0; r--)
-    (s = t[r]) && (i = (n ? s(e, o, i) : s(i)) || i);
-  return n && i && Lt(e, o, i), i;
+var Bt = Object.defineProperty, At = Object.getOwnPropertyDescriptor, U = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? At(t, o) : t, r = e.length - 1, s; r >= 0; r--)
+    (s = e[r]) && (i = (n ? s(t, o, i) : s(i)) || i);
+  return n && i && Bt(t, o, i), i;
 };
 let D = class extends v {
   constructor() {
     super(...arguments), this.storeCtrl = new S(this, ["design", "viewMode"]);
   }
-  set store(t) {
-    this.storeCtrl.setStore(t);
+  set store(e) {
+    this.storeCtrl.setStore(e);
   }
   get store() {
     return this.storeCtrl.store;
   }
-  handleMoveUp(t) {
-    t.stopPropagation();
-    const e = this.store.getRowIndex(this.row.id);
-    e > 0 && this.store.moveRow(e, e - 1);
+  handleMoveUp(e) {
+    e.stopPropagation();
+    const t = this.store.getRowIndex(this.row.id);
+    t > 0 && this.store.moveRow(t, t - 1);
   }
-  handleMoveDown(t) {
-    t.stopPropagation();
-    const e = this.store.getRowIndex(this.row.id), o = this.store.getRows().length;
-    e < o - 1 && this.store.moveRow(e, e + 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(t) {
-    t.stopPropagation(), this.store.duplicateRow(this.row.id);
+  handleDuplicate(e) {
+    e.stopPropagation(), this.store.duplicateRow(this.row.id);
   }
-  handleDelete(t) {
-    t.stopPropagation(), this.store.removeRow(this.row.id);
+  handleDelete(e) {
+    e.stopPropagation(), this.store.removeRow(this.row.id);
   }
   render() {
     if (!this.store) return c``;
-    const { row: t, store: e, toolRegistry: o } = this, n = t.values.backgroundColor || "transparent", i = t.values.columnsBackgroundColor || "transparent", r = t.values.padding || "0px", s = t.cells.reduce((b, y) => b + y, 0), l = t.values.backgroundImage, d = typeof l == "object" && l?.url ? l.url : "", p = d ? `background-image:url('${d}');background-size:${l?.cover ? "cover" : "contain"};background-position:${l?.center ? "center" : "top left"};background-repeat:${l?.repeat ? "repeat" : "no-repeat"};` : "", h = e.viewMode, g = !!t.values.hideDesktop, u = !!t.values.hideMobile, m = h === "desktop" && g || h === "mobile" && u, x = g ? "Hidden on desktop" : u ? "Hidden on mobile" : "";
-    return this.classList.toggle("hidden-in-view", m), this.setAttribute("draggable", "true"), this.dataset.rowId = t.id, c`
+    const { row: e, store: t, toolRegistry: o } = this, n = e.values.backgroundColor || "transparent", i = e.values.columnsBackgroundColor || "transparent", r = e.values.padding || "0px", s = e.cells.reduce((f, y) => f + y, 0), l = e.values.backgroundImage, d = typeof l == "object" && l?.url ? l.url : "", p = d ? `background-image:url('${d}');background-size:${l?.cover ? "cover" : "contain"};background-position:${l?.center ? "center" : "top left"};background-repeat:${l?.repeat ? "repeat" : "no-repeat"};` : "", h = t.viewMode, u = !!e.values.hideDesktop, g = !!e.values.hideMobile, m = h === "desktop" && u || h === "mobile" && g, x = u ? "Hidden on desktop" : g ? "Hidden on mobile" : "";
+    return this.classList.toggle("hidden-in-view", m), this.setAttribute("draggable", "true"), this.dataset.rowId = e.id, c`
       ${m ? c`<div class="row-hidden-badge">${x}</div>` : ""}
       <div class="row-actions">
         <button class="row-action-btn" @click=${this.handleMoveUp} title="Move Up">
@@ -1736,12 +1752,12 @@ let D = class extends v {
         class="row-wrapper"
         style="background-color:${n};padding:${r};${p}"
       >
-        ${t.columns.map((b, y) => {
-      const R = t.cells[y] / s * 100;
+        ${e.columns.map((f, y) => {
+      const R = e.cells[y] / s * 100;
       return c`
             <me-column-renderer
-              .column=${b}
-              .store=${e}
+              .column=${f}
+              .store=${t}
               .toolRegistry=${o}
               .widthPercent=${R}
               style="background-color:${i};"
@@ -1816,29 +1832,29 @@ D.styles = $`
       stroke-linejoin: round;
     }
   `;
-W([
-  f({ attribute: !1 })
+U([
+  b({ attribute: !1 })
 ], D.prototype, "row", 2);
-W([
-  f({ attribute: !1 })
+U([
+  b({ attribute: !1 })
 ], D.prototype, "store", 1);
-W([
-  f({ attribute: !1 })
+U([
+  b({ attribute: !1 })
 ], D.prototype, "toolRegistry", 2);
-D = W([
+D = U([
   k("me-row-renderer")
 ], D);
-var Bt = Object.defineProperty, Ht = Object.getOwnPropertyDescriptor, G = (t, e, o, n) => {
-  for (var i = n > 1 ? void 0 : n ? Ht(e, o) : e, r = t.length - 1, s; r >= 0; r--)
-    (s = t[r]) && (i = (n ? s(e, o, i) : s(i)) || i);
-  return n && i && Bt(e, o, i), i;
+var Ot = Object.defineProperty, jt = Object.getOwnPropertyDescriptor, K = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? jt(t, o) : t, r = e.length - 1, s; r >= 0; r--)
+    (s = e[r]) && (i = (n ? s(t, o, i) : s(i)) || i);
+  return n && i && Ot(t, o, i), i;
 };
-let I = class extends v {
+let T = class extends v {
   constructor() {
     super(...arguments), this.storeCtrl = new S(this, ["design", "viewMode"]);
   }
-  set store(t) {
-    this.storeCtrl.setStore(t);
+  set store(e) {
+    this.storeCtrl.setStore(e);
   }
   get store() {
     return this.storeCtrl.store;
@@ -1846,11 +1862,11 @@ let I = class extends v {
   handleCanvasClick() {
     this.store.select(null);
   }
-  setViewMode(t) {
-    this.store.setViewMode(t);
+  setViewMode(e) {
+    this.store.setViewMode(e);
   }
   render() {
-    const t = this.store.getRows(), e = this.store.getBodyValues(), o = e.contentWidth || "600px", n = e.backgroundColor || "#e7e7e7", i = this.store.viewMode;
+    const e = this.store.getRows(), t = this.store.getBodyValues(), o = t.contentWidth || "600px", n = t.backgroundColor || "#e7e7e7", i = this.store.viewMode;
     return c`
       <div class="view-toggle">
         <button
@@ -1868,12 +1884,12 @@ let I = class extends v {
         style="max-width:${i === "mobile" ? "375px" : o};background-color:${n};"
         @click=${this.handleCanvasClick}
       >
-        ${t.length === 0 ? c`
+        ${e.length === 0 ? c`
               <div class="empty-canvas">
                 <div class="empty-icon">&#9776;</div>
                 <div>Drag a content block here</div>
               </div>
-            ` : t.map(
+            ` : e.map(
       (s) => c`
                 <me-row-renderer
                   .row=${s}
@@ -1886,7 +1902,7 @@ let I = class extends v {
     `;
   }
 };
-I.styles = $`
+T.styles = $`
     :host {
       display: block;
       flex: 1;
@@ -1940,67 +1956,87 @@ I.styles = $`
       color: white;
     }
   `;
-G([
-  f({ attribute: !1 })
-], I.prototype, "store", 1);
-G([
-  f({ attribute: !1 })
-], I.prototype, "toolRegistry", 2);
-I = G([
+K([
+  b({ attribute: !1 })
+], T.prototype, "store", 1);
+K([
+  b({ attribute: !1 })
+], T.prototype, "toolRegistry", 2);
+T = K([
   k("me-editor-canvas")
-], I);
-var Ot = Object.defineProperty, jt = Object.getOwnPropertyDescriptor, rt = (t, e, o, n) => {
-  for (var i = n > 1 ? void 0 : n ? jt(e, o) : e, r = t.length - 1, s; r >= 0; r--)
-    (s = t[r]) && (i = (n ? s(e, o, i) : s(i)) || i);
-  return n && i && Ot(e, o, i), i;
+], T);
+var Ht = Object.defineProperty, Wt = Object.getOwnPropertyDescriptor, st = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? Wt(t, o) : t, r = e.length - 1, s; r >= 0; r--)
+    (s = e[r]) && (i = (n ? s(t, o, i) : s(i)) || i);
+  return n && i && Ht(t, o, i), i;
 };
-const it = [
-  { label: "Arial", value: "arial,helvetica,sans-serif" },
-  { label: "Helvetica", value: "helvetica,sans-serif" },
-  { label: "Georgia", value: "georgia,serif" },
-  { label: "Times New Roman", value: "'times new roman',times,serif" },
-  { label: "Trebuchet MS", value: "trebuchet ms,helvetica,sans-serif" },
-  { label: "Verdana", value: "verdana,geneva,sans-serif" },
-  { label: "Courier New", value: "'courier new',courier,monospace" }
+const q = [
+  // 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 L = class extends v {
   constructor() {
     super(...arguments), this.storeCtrl = new S(this, ["design"]);
   }
-  set store(t) {
-    this.storeCtrl.setStore(t);
+  set store(e) {
+    this.storeCtrl.setStore(e);
   }
   get store() {
     return this.storeCtrl.store;
   }
-  update_(t, e) {
-    this.store.updateBodyValues({ [t]: e });
+  update_(e, t) {
+    this.store.updateBodyValues({ [e]: t });
   }
-  updateLinkStyle(t, e) {
+  updateLinkStyle(e, t) {
     const o = this.store.getBodyValues().linkStyle;
-    this.store.updateBodyValues({ linkStyle: { ...o, [t]: e } });
-  }
-  updateFontFamily(t) {
-    const e = it.find((o) => o.value === t);
-    this.store.updateBodyValues({ fontFamily: { label: e?.label || t, value: t } });
+    this.store.updateBodyValues({ linkStyle: { ...o, [e]: t } });
+  }
+  updateFontFamily(e) {
+    const t = q.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 t = this.store.getBodyValues();
+    const e = this.store.getBodyValues();
     return c`
-      ${this.renderColorField("Background Color", t.backgroundColor || "#e7e7e7", (e) => this.update_("backgroundColor", e))}
+      ${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(t.contentWidth || "600")} min="320" max="960" step="10"
-          @change=${(e) => this.update_("contentWidth", e.target.value + "px")} />
+        <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((e) => c`
-            <button class="align-btn ${t.contentAlign === e ? "active" : ""}"
-              @click=${() => this.update_("contentAlign", e)}>${e}</button>
+          ${["left", "center", "right"].map((t) => c`
+            <button class="align-btn ${e.contentAlign === t ? "active" : ""}"
+              @click=${() => this.update_("contentAlign", t)}>${t}</button>
           `)}
         </div>
       </div>
@@ -2008,18 +2044,23 @@ let L = class extends v {
       <p class="section-title" style="margin-top:16px;">Typography</p>
       <div class="field">
         <label class="field-label">Font Family</label>
-        <select class="input" @change=${(e) => this.updateFontFamily(e.target.value)}>
-          ${it.map((e) => c`<option value=${e.value} ?selected=${t.fontFamily?.value === e.value}>${e.label}</option>`)}
+        <select class="input" @change=${(t) => this.updateFontFamily(t.target.value)}>
+          <optgroup label="System Fonts">
+            ${q.filter((t) => !t.url).map((t) => c`<option value=${t.value} ?selected=${e.fontFamily?.value === t.value}>${t.label}</option>`)}
+          </optgroup>
+          <optgroup label="Google Fonts">
+            ${q.filter((t) => !!t.url).map((t) => c`<option value=${t.value} ?selected=${e.fontFamily?.value === t.value}>${t.label}</option>`)}
+          </optgroup>
         </select>
       </div>
-      ${this.renderColorField("Text Color", t.textColor || "#000000", (e) => this.update_("textColor", e))}
+      ${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", t.linkStyle?.linkColor || "#0000ee", (e) => this.updateLinkStyle("linkColor", e))}
+      ${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=${t.linkStyle?.linkUnderline ?? !0}
-            @change=${(e) => this.updateLinkStyle("linkUnderline", e.target.checked)} />
+          <input type="checkbox" .checked=${e.linkStyle?.linkUnderline ?? !0}
+            @change=${(t) => this.updateLinkStyle("linkUnderline", t.target.checked)} />
           Underline Links
         </label>
       </div>
@@ -2027,20 +2068,20 @@ let L = class extends v {
       <p class="section-title" style="margin-top:16px;">Email</p>
       <div class="field">
         <label class="field-label">Preheader Text</label>
-        <textarea class="input" .value=${t.preheaderText || ""} placeholder="Preview text shown in inbox..."
+        <textarea class="input" .value=${e.preheaderText || ""} placeholder="Preview text shown in inbox..."
           style="min-height:60px;resize:vertical;font-family:inherit;"
-          @change=${(e) => this.update_("preheaderText", e.target.value)}></textarea>
+          @change=${(t) => this.update_("preheaderText", t.target.value)}></textarea>
       </div>
     `;
   }
   /** Reusable color field (swatch + hex input) */
-  renderColorField(t, e, o) {
+  renderColorField(e, t, o) {
     return c`
       <div class="field">
-        <label class="field-label">${t}</label>
+        <label class="field-label">${e}</label>
         <div class="color-row">
-          <input class="color-swatch" type="color" .value=${e} @input=${(n) => o(n.target.value)} />
-          <input class="input" type="text" .value=${e} style="flex:1;" @change=${(n) => o(n.target.value)} />
+          <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>
     `;
@@ -2071,66 +2112,66 @@ L.styles = $`
     }
     .align-btn.active { border-color: #3b82f6; background: #eff6ff; color: #3b82f6; }
   `;
-rt([
-  f({ attribute: !1 })
+st([
+  b({ attribute: !1 })
 ], L.prototype, "store", 1);
-L = rt([
+L = st([
   k("me-body-settings")
 ], L);
-var Wt = Object.defineProperty, Ut = Object.getOwnPropertyDescriptor, Y = (t, e, o, n) => {
-  for (var i = n > 1 ? void 0 : n ? Ut(e, o) : e, r = t.length - 1, s; r >= 0; r--)
-    (s = t[r]) && (i = (n ? s(e, o, i) : s(i)) || i);
-  return n && i && Wt(e, o, i), i;
+var Ut = Object.defineProperty, Ft = Object.getOwnPropertyDescriptor, J = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? Ft(t, o) : t, r = e.length - 1, s; r >= 0; r--)
+    (s = e[r]) && (i = (n ? s(t, o, i) : s(i)) || i);
+  return n && i && Ut(t, o, i), i;
 };
-let T = class extends v {
+let I = class extends v {
   constructor() {
     super(...arguments), this.storeCtrl = new S(this, ["activeTab"]);
   }
-  set store(t) {
-    this.storeCtrl.setStore(t);
+  set store(e) {
+    this.storeCtrl.setStore(e);
   }
   get store() {
     return this.storeCtrl.store;
   }
-  handleDragStart(t, e) {
-    t.dataTransfer.setData("application/maileditor-tool", e), t.dataTransfer.effectAllowed = "copy";
+  handleDragStart(e, t) {
+    e.dataTransfer.setData("application/maileditor-tool", t), e.dataTransfer.effectAllowed = "copy";
   }
-  handleLayoutDragStart(t, e) {
-    t.dataTransfer.setData("application/maileditor-layout", JSON.stringify(e)), t.dataTransfer.effectAllowed = "copy";
+  handleLayoutDragStart(e, t) {
+    e.dataTransfer.setData("application/maileditor-layout", JSON.stringify(t)), e.dataTransfer.effectAllowed = "copy";
   }
-  addRowWithLayout(t) {
-    const e = this.store.createRow(t);
-    this.store.addRow(e);
+  addRowWithLayout(e) {
+    const t = this.store.createRow(e);
+    this.store.addRow(t);
   }
   render() {
-    const t = this.store.activeTab, e = this.toolRegistry.getAllMeta();
+    const e = this.store.activeTab, t = this.toolRegistry.getAllMeta();
     return c`
       <div class="tabs">
-        <button class="tab ${t === "content" ? "active" : ""}" @click=${() => this.store.setActiveTab("content")}>Content</button>
-        <button class="tab ${t === "blocks" ? "active" : ""}" @click=${() => this.store.setActiveTab("blocks")}>Blocks</button>
-        <button class="tab ${t === "body" ? "active" : ""}" @click=${() => this.store.setActiveTab("body")}>Body</button>
+        <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">
-        ${t === "content" ? this.renderContentTab(e) : ""}
-        ${t === "blocks" ? this.renderBlocksTab() : ""}
-        ${t === "body" ? this.renderBodyTab() : ""}
+        ${e === "content" ? this.renderContentTab(t) : ""}
+        ${e === "blocks" ? this.renderBlocksTab() : ""}
+        ${e === "body" ? this.renderBodyTab() : ""}
       </div>
     `;
   }
-  renderContentTab(t) {
+  renderContentTab(e) {
     return c`
       <p class="section-title">Content</p>
       <div class="tool-grid">
-        ${t.map(
-      (e) => c`
+        ${e.map(
+      (t) => c`
             <div
               class="tool-item"
               draggable="true"
-              @dragstart=${(o) => this.handleDragStart(o, e.name)}
+              @dragstart=${(o) => this.handleDragStart(o, t.name)}
             >
-              <div class="tool-icon">${q(e.icon)}</div>
-              <span>${e.label}</span>
+              <div class="tool-icon">${H(t.icon)}</div>
+              <span>${t.label}</span>
             </div>
           `
     )}
@@ -2147,17 +2188,17 @@ let T = class extends v {
       </div>
     `;
   }
-  renderLayoutOption(t, e) {
-    const o = t.reduce((n, i) => n + i, 0);
+  renderLayoutOption(e, t) {
+    const o = e.reduce((n, i) => n + i, 0);
     return c`
       <div
         class="layout-item"
         draggable="true"
-        @click=${() => this.addRowWithLayout(t)}
-        @dragstart=${(n) => this.handleLayoutDragStart(n, t)}
-        title=${e}
+        @click=${() => this.addRowWithLayout(e)}
+        @dragstart=${(n) => this.handleLayoutDragStart(n, e)}
+        title=${t}
       >
-        ${t.map(
+        ${e.map(
       (n) => c`<div class="layout-col" style="width:${n / o * 100}%;"></div>`
     )}
       </div>
@@ -2174,7 +2215,7 @@ let T = class extends v {
     return c`<me-body-settings .store=${this.store}></me-body-settings>`;
   }
 };
-T.styles = $`
+I.styles = $`
     :host {
       display: flex;
       flex-direction: column;
@@ -2308,64 +2349,64 @@ T.styles = $`
       transition: background 0.2s ease;
     }
   `;
-Y([
-  f({ attribute: !1 })
-], T.prototype, "store", 1);
-Y([
-  f({ attribute: !1 })
-], T.prototype, "toolRegistry", 2);
-T = Y([
+J([
+  b({ attribute: !1 })
+], I.prototype, "store", 1);
+J([
+  b({ attribute: !1 })
+], I.prototype, "toolRegistry", 2);
+I = J([
   k("me-editor-sidebar")
-], T);
-function Ft(t, e, o) {
-  const n = t && /^#[0-9a-fA-F]{3,8}$/.test(t) ? t : "#000000";
+], I);
+function Nt(e, t, o) {
+  const n = e && /^#[0-9a-fA-F]{3,8}$/.test(e) ? e : "#000000";
   return c`
     <div class="prop-row">
       <label class="prop-label">${o}</label>
       <div class="prop-color">
         <input class="color-swatch" type="color" .value=${n}
-          @input=${(i) => e(i.target.value)} />
-        <input class="prop-input" type="text" .value=${t ?? ""} style="flex:1;"
-          @change=${(i) => e(i.target.value)} />
+          @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 Nt(t, e, o, n) {
+function qt(e, t, o, n) {
   const i = n?.options || [];
   return c`
     <div class="prop-row">
       <label class="prop-label">${o}</label>
-      <select class="prop-input" @change=${(r) => e(r.target.value)}>
-        ${i.map((r) => c`<option value=${r.value} ?selected=${t === r.value}>${r.label}</option>`)}
+      <select class="prop-input" @change=${(r) => t(r.target.value)}>
+        ${i.map((r) => c`<option value=${r.value} ?selected=${e === r.value}>${r.label}</option>`)}
       </select>
     </div>
   `;
 }
-function qt(t, e, o) {
+function Gt(e, t, o) {
   return c`
     <div class="prop-row">
       <label class="prop-label">${o}</label>
       <div style="display:flex;gap:2px;">
         ${["left", "center", "right"].map((n) => c`
           <button
-            style="flex:1;padding:6px;border:1px solid ${t === n ? "#3b82f6" : "#d1d5db"};background:${t === n ? "#eff6ff" : "white"};border-radius:4px;cursor:pointer;font-size:11px;text-transform:capitalize;color:${t === n ? "#3b82f6" : "#6b7280"};"
-            @click=${() => e(n)}
+            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 Gt(t) {
-  const e = (t || "0px").split(/\s+/).map((s) => parseInt(s) || 0), o = e[0], n = e[1] ?? o, i = e[2] ?? o, r = e[3] ?? n;
+function Yt(e) {
+  const t = (e || "0px").split(/\s+/).map((s) => parseInt(s) || 0), o = t[0], n = t[1] ?? o, i = t[2] ?? o, r = t[3] ?? n;
   return [o, n, i, r];
 }
-function Yt(t, e, o, n) {
-  return t === e && e === o && o === n ? `${t}px` : t === o && e === n ? `${t}px ${e}px` : `${t}px ${e}px ${o}px ${n}px`;
+function Kt(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 Kt(t, e, o) {
-  const [n, i, r, s] = Gt(t), l = (p, h, g, u) => e(Yt(p, h, g, u));
+function Jt(e, t, o) {
+  const [n, i, r, s] = Yt(e), l = (p, h, u, g) => t(Kt(p, h, u, g));
   return c`
     <div class="prop-row">
       <label class="prop-label">${o}</label>
@@ -2387,106 +2428,106 @@ function Kt(t, e, o) {
     </div>
   `;
 }
-function Jt(t, e, o) {
+function Xt(e, t, o) {
   return c`
     <div class="prop-row">
       <div class="prop-toggle">
-        <input type="checkbox" .checked=${!!t}
-          @change=${(n) => e(n.target.checked)} />
+        <input type="checkbox" .checked=${!!e}
+          @change=${(n) => t(n.target.checked)} />
         <label class="prop-label" style="margin:0;">${o}</label>
       </div>
     </div>
   `;
 }
-function Xt(t, e, o) {
+function Qt(e, t, o) {
   return c`
     <div class="prop-row">
       <label class="prop-label">${o}</label>
-      <input class="prop-input" type="text" .value=${t ?? ""}
-        @change=${(n) => e(n.target.value)} />
+      <input class="prop-input" type="text" .value=${e ?? ""}
+        @change=${(n) => t(n.target.value)} />
     </div>
   `;
 }
-function Qt(t, e, o) {
+function Zt(e, t, o) {
   return c`
     <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=${t ?? ""}
-        @change=${(n) => e(n.target.value)}
+        .value=${e ?? ""}
+        @change=${(n) => t(n.target.value)}
       ></textarea>
     </div>
   `;
 }
-var Zt = Object.defineProperty, te = Object.getOwnPropertyDescriptor, K = (t, e, o, n) => {
-  for (var i = n > 1 ? void 0 : n ? te(e, o) : e, r = t.length - 1, s; r >= 0; r--)
-    (s = t[r]) && (i = (n ? s(e, o, i) : s(i)) || i);
-  return n && i && Zt(e, o, i), i;
+var te = Object.defineProperty, ee = Object.getOwnPropertyDescriptor, X = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? ee(t, o) : t, r = e.length - 1, s; r >= 0; r--)
+    (s = e[r]) && (i = (n ? s(t, o, i) : s(i)) || i);
+  return n && i && te(t, o, i), i;
 };
 let P = class extends v {
   constructor() {
     super(...arguments), this.storeCtrl = new S(this, ["design", "selection"]);
   }
-  set store(t) {
-    this.storeCtrl.setStore(t);
+  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(t, e) {
+  onChange(e, t) {
     return (o) => {
-      this.store.updateContentValues(t, { [e]: o });
+      this.store.updateContentValues(e, { [t]: o });
     };
   }
   render() {
-    const t = this.store.selectedId;
-    if (!t)
-      return c`<div class="no-selection">Select an element to edit its properties</div>`;
-    const e = this.store.findContent(t);
+    const e = this.store.selectedId;
     if (!e)
       return c`<div class="no-selection">Select an element to edit its properties</div>`;
-    const o = this.toolRegistry.get(e.type);
+    const t = this.store.findContent(e);
+    if (!t)
+      return c`<div class="no-selection">Select an element to edit its properties</div>`;
+    const o = this.toolRegistry.get(t.type);
     return o ? c`
       <div class="header">
         <p class="header-title">${o.label}</p>
-        <p class="header-type">${e.type}</p>
+        <p class="header-type">${t.type}</p>
       </div>
-      ${Object.entries(o.options).map(([, n]) => this.renderGroup(e, n))}
-    ` : c`<div class="no-selection">Unknown tool: ${e.type}</div>`;
+      ${Object.entries(o.options).map(([, n]) => this.renderGroup(t, n))}
+    ` : c`<div class="no-selection">Unknown tool: ${t.type}</div>`;
   }
-  renderGroup(t, e) {
+  renderGroup(e, t) {
     return c`
       <div class="group">
-        <div class="group-title">${e.title}</div>
+        <div class="group-title">${t.title}</div>
         <div class="group-body">
-          ${Object.entries(e.options).map(
-      ([o, n]) => this.renderWidget(t, o, n)
+          ${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(t, e, o) {
-    const n = t.values[e] ?? o.defaultValue, i = this.onChange(t.id, e);
+  renderWidget(e, t, o) {
+    const n = e.values[t] ?? o.defaultValue, i = this.onChange(e.id, t);
     switch (o.widget) {
       case "color_picker":
-        return Ft(n, i, o.label);
+        return Nt(n, i, o.label);
       case "toggle":
-        return Jt(n, i, o.label);
+        return Xt(n, i, o.label);
       case "rich_text":
-        return Qt(n, i, o.label);
+        return Zt(n, i, o.label);
       case "dropdown":
-        return Nt(n, i, o.label, o.widgetParams);
+        return qt(n, i, o.label, o.widgetParams);
       case "alignment":
-        return qt(n, i, o.label);
+        return Gt(n, i, o.label);
       case "padding":
-        return Kt(n, i, o.label);
+        return Jt(n, i, o.label);
       case "text":
       default:
-        return Xt(n, i, o.label);
+        return Qt(n, i, o.label);
     }
   }
 };
@@ -2524,38 +2565,38 @@ P.styles = $`
     .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; }
   `;
-K([
-  f({ attribute: !1 })
+X([
+  b({ attribute: !1 })
 ], P.prototype, "store", 1);
-K([
-  f({ attribute: !1 })
+X([
+  b({ attribute: !1 })
 ], P.prototype, "toolRegistry", 2);
-P = K([
+P = X([
   k("me-property-panel")
 ], P);
-var ee = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, st = (t, e, o, n) => {
-  for (var i = n > 1 ? void 0 : n ? oe(e, o) : e, r = t.length - 1, s; r >= 0; r--)
-    (s = t[r]) && (i = (n ? s(e, o, i) : s(i)) || i);
-  return n && i && ee(e, o, i), i;
+var oe = Object.defineProperty, ne = Object.getOwnPropertyDescriptor, lt = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? ne(t, o) : t, r = e.length - 1, s; r >= 0; r--)
+    (s = e[r]) && (i = (n ? s(t, o, i) : s(i)) || i);
+  return n && i && oe(t, o, i), i;
 };
-let A = class extends v {
+let B = class extends v {
   constructor() {
-    super(...arguments), this.options = {}, this.store = new ft(), this.toolRegistry = new mt(), this.dragManager = null, this.callbacks = /* @__PURE__ */ new Map(), this.unsubscribe = null, this._handleKeydown = (t) => {
-      const e = t.metaKey || t.ctrlKey, n = t.composedPath().some((i) => {
+    super(...arguments), this.options = {}, this.store = new mt(), this.toolRegistry = new xt(), 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 r = i?.tagName;
         return r === "INPUT" || r === "TEXTAREA" || r === "SELECT";
       });
-      n && !e || (e && t.key === "z" && !t.shiftKey ? (t.preventDefault(), this.store.undo()) : e && (t.key === "y" || t.key === "z" && t.shiftKey) ? (t.preventDefault(), this.store.redo()) : (t.key === "Delete" || t.key === "Backspace") && this.store.selectedId && !n ? (t.preventDefault(), this.store.removeContent(this.store.selectedId)) : t.key === "Escape" && this.store.select(null));
+      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 xt(this.store, this.toolRegistry, this.shadowRoot), this.dragManager.attach(), this.store.events.on("design:loaded", (t) => {
-      this.dispatchEvent(new CustomEvent("design:loaded", { detail: t, bubbles: !0, composed: !0 }));
-    }), this.store.events.on("design:updated", (t) => {
-      this.dispatchEvent(new CustomEvent("design:updated", { detail: t, bubbles: !0, composed: !0 }));
+    this.dragManager = new yt(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() {
@@ -2564,41 +2605,41 @@ let A = class extends v {
   // ----------------------------------------------------------
   // Public API — public API
   // ----------------------------------------------------------
-  loadDesign(t) {
-    this.store.loadDesign(t);
+  loadDesign(e) {
+    this.store.loadDesign(e);
   }
-  saveDesign(t) {
-    t(structuredClone(this.store.getDesign()));
+  saveDesign(e) {
+    e(structuredClone(this.store.getDesign()));
   }
-  exportHtml(t, e) {
+  exportHtml(e, t) {
     const o = this.store.getDesign(), n = /* @__PURE__ */ new Set();
     for (const r of o.body.rows)
       for (const s of r.columns)
         for (const l of s.contents)
           n.add(l.type);
     const i = Array.from(n).filter((r) => !this.toolRegistry.isLoaded(r)).map((r) => this.toolRegistry.ensureLoaded(r));
-    i.length > 0 ? Promise.all(i).then(() => this.doExport(o, t, e)) : this.doExport(o, t, e);
+    i.length > 0 ? Promise.all(i).then(() => this.doExport(o, e, t)) : this.doExport(o, e, t);
   }
-  doExport(t, e, o) {
+  doExport(e, t, o) {
     const n = /* @__PURE__ */ new Map();
     for (const i of this.toolRegistry.getAll())
       n.set(i.name, (r, s) => i.renderer.renderHtml(r, s));
-    e(Tt(t, n, o));
+    t(Pt(e, n, o));
   }
-  async exportHtmlAsync(t) {
-    return new Promise((e) => this.exportHtml(e, t));
+  async exportHtmlAsync(e) {
+    return new Promise((t) => this.exportHtml(t, e));
   }
-  registerTool(t) {
-    this.toolRegistry.register(t), this.requestUpdate();
+  registerTool(e) {
+    this.toolRegistry.register(e), this.requestUpdate();
   }
-  registerPropertyEditor(t, e) {
+  registerPropertyEditor(e, t) {
   }
-  registerTab(t) {
+  registerTab(e) {
   }
-  registerCallback(t, e) {
-    this.callbacks.set(t, e);
+  registerCallback(e, t) {
+    this.callbacks.set(e, t);
   }
-  setMergeTags(t) {
+  setMergeTags(e) {
   }
   undo() {
     this.store.undo();
@@ -2606,8 +2647,8 @@ let A = class extends v {
   redo() {
     this.store.redo();
   }
-  setBodyValues(t) {
-    this.store.updateBodyValues(t);
+  setBodyValues(e) {
+    this.store.updateBodyValues(e);
   }
   // ----------------------------------------------------------
   // Internal
@@ -2618,17 +2659,17 @@ let A = class extends v {
    * Falls back to setTimeout(1000) for browsers without idle callback support.
    */
   preloadLazyTools() {
-    const t = window.requestIdleCallback ?? ((e) => setTimeout(e, 1e3));
-    for (const { meta: e } of ot)
-      t(() => {
-        this.toolRegistry.ensureLoaded(e.name);
+    const e = window.requestIdleCallback ?? ((t) => setTimeout(t, 1e3));
+    for (const { meta: t } of it)
+      e(() => {
+        this.toolRegistry.ensureLoaded(t.name);
       });
   }
   registerBuiltInTools() {
-    for (const t of St)
-      this.toolRegistry.register(t);
-    for (const { meta: t, loader: e } of ot)
-      this.toolRegistry.registerLazy(t, e);
+    for (const e of Rt)
+      this.toolRegistry.register(e);
+    for (const { meta: e, loader: t } of it)
+      this.toolRegistry.registerLazy(e, t);
   }
   applyOptions() {
     this.options.design && this.store.loadDesign(this.options.design);
@@ -2650,7 +2691,7 @@ let A = class extends v {
     `;
   }
 };
-A.styles = $`
+B.styles = $`
     :host {
       display: flex;
       width: 100%;
@@ -2665,31 +2706,31 @@ A.styles = $`
     }
     * { box-sizing: border-box; }
   `;
-st([
-  f({ type: Object })
-], A.prototype, "options", 2);
-A = st([
+lt([
+  b({ type: Object })
+], B.prototype, "options", 2);
+B = lt([
   k("mail-editor")
-], A);
-function C(t, e) {
-  customElements.get(t) || customElements.define(t, e);
+], B);
+function C(e, t) {
+  customElements.get(e) || customElements.define(e, t);
 }
-C("mail-editor", A);
-C("me-editor-canvas", I);
+C("mail-editor", B);
+C("me-editor-canvas", T);
 C("me-row-renderer", D);
 C("me-column-renderer", w);
 C("me-content-renderer", _);
-C("me-editor-sidebar", T);
+C("me-editor-sidebar", I);
 C("me-body-settings", L);
 C("me-property-panel", P);
 const ae = customElements.get("mail-editor") !== void 0;
 export {
   ae as E,
-  A as M,
-  mt as T,
-  ft as a,
+  B as M,
+  xt as T,
+  mt as a,
   V as e,
-  se as j,
+  le as j,
   a as s
 };
-//# sourceMappingURL=index-CZt184D3.js.map
+//# sourceMappingURL=index-BQJRD2VW.js.map