@emabuild/core 0.1.1 → 0.1.2

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

@@ -1,7 +1,7 @@
-import { html as c, LitElement as v, css as $ } from "lit";
-import { property as b, customElement as k } from "lit/decorators.js";
-import { unsafeHTML as H } from "lit/directives/unsafe-html.js";
-function dt() {
+import { html as p, LitElement as $, css as k } from "lit";
+import { property as b, customElement as C, state as pt } from "lit/decorators.js";
+import { unsafeHTML as U } from "lit/directives/unsafe-html.js";
+function ht() {
   const e = {};
   return {
     getCounters() {
@@ -18,7 +18,7 @@ function dt() {
     }
   };
 }
-class ct {
+class ut {
   constructor() {
     this.listeners = /* @__PURE__ */ new Map();
   }
@@ -45,7 +45,7 @@ class ct {
     t ? this.listeners.delete(t) : this.listeners.clear();
   }
 }
-class pt {
+class gt {
   constructor(t = 50) {
     this.undoStack = [], this.redoStack = [], this.maxHistory = t;
   }
@@ -78,7 +78,7 @@ class pt {
     this.undoStack = [], this.redoStack = [];
   }
 }
-function ht() {
+function ft() {
   return {
     counters: { u_row: 0, u_column: 0 },
     body: {
@@ -123,7 +123,7 @@ function ht() {
     schemaVersion: 16
   };
 }
-function ut(e, t) {
+function bt(e, t) {
   const o = e.next("u_row"), n = t.map(() => {
     const i = e.next("u_column");
     return {
@@ -156,7 +156,7 @@ function ut(e, t) {
     }
   };
 }
-function gt(e, t, o = {}) {
+function mt(e, t, o = {}) {
   const n = e.next(`u_content_${t}`), i = `u_content_${t}_${n}`;
   return {
     id: i,
@@ -172,37 +172,37 @@ function gt(e, t, o = {}) {
     }
   };
 }
-function F(e, t) {
+function N(e, t) {
   return e.body.rows.find((o) => o.id === t);
 }
-function O(e, t) {
+function j(e, t) {
   for (const o of e.body.rows) {
     const n = o.columns.find((i) => i.id === t);
     if (n) return n;
   }
 }
-function j(e, t) {
+function W(e, t) {
   for (const o of e.body.rows)
     for (const n of o.columns) {
-      const i = n.contents.find((r) => r.id === t);
+      const i = n.contents.find((s) => s.id === t);
       if (i) return i;
     }
 }
-function ft(e, t) {
+function xt(e, t) {
   for (const o of e.body.rows)
     for (const n of o.columns)
       if (n.contents.some((i) => i.id === t)) return n;
 }
-function bt(e, t) {
+function yt(e, t) {
   for (const o of e.body.rows)
     if (o.columns.some((n) => n.id === t)) return o;
 }
-function N(e, t) {
+function q(e, t) {
   return e.body.rows.findIndex((o) => o.id === t);
 }
-class mt {
+class wt {
   constructor() {
-    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();
+    this.history = new gt(), this.counterManager = ht(), this.subscribers = /* @__PURE__ */ new Set(), this.channelSubscribers = /* @__PURE__ */ new Map(), this.events = new ut(), this._selectedId = null, this._hoveredId = null, this._viewMode = "desktop", this._activeTab = "content", this.design = ft();
   }
   // ── Subscriptions ──────────────────────────────────────────
   /** Subscribe to ALL state changes (legacy). Returns an unsubscribe function. */
@@ -237,7 +237,7 @@ class mt {
     for (const n of this.subscribers) o.add(n);
     for (const n of t) {
       const i = this.channelSubscribers.get(n);
-      if (i) for (const r of i) o.add(r);
+      if (i) for (const s of i) o.add(s);
     }
     o.forEach((n) => n());
   }
@@ -312,7 +312,7 @@ class mt {
   }
   /** Remove a row by ID */
   removeRow(t) {
-    const o = N(this.design, t);
+    const o = q(this.design, t);
     o !== -1 && (this.history.push(this.design), this.design.body.rows.splice(o, 1), this._selectedId === t && (this._selectedId = null), this.notifyChannels("design"), this.emitUpdate("row_removed"));
   }
   /** Move a row from one index to another */
@@ -323,51 +323,51 @@ class mt {
   }
   /** Duplicate a row, assigning fresh IDs to all nested elements */
   duplicateRow(t) {
-    const o = F(this.design, t);
+    const o = N(this.design, t);
     if (!o) return;
     this.history.push(this.design);
     const n = structuredClone(o), i = this.counterManager.next("u_row");
     n.id = `u_row_${i}`, n.values._meta = { htmlID: n.id, htmlClassNames: "u_row" };
-    for (const s of n.columns) {
-      const l = this.counterManager.next("u_column");
-      s.id = `u_column_${l}`, s.values._meta = { htmlID: s.id, htmlClassNames: "u_column" };
-      for (const d of s.contents) {
-        const p = this.counterManager.next(`u_content_${d.type}`);
-        d.id = `u_content_${d.type}_${p}`, d.values._meta = { htmlID: d.id, htmlClassNames: `u_content_${d.type}` };
+    for (const r of n.columns) {
+      const a = this.counterManager.next("u_column");
+      r.id = `u_column_${a}`, r.values._meta = { htmlID: r.id, htmlClassNames: "u_column" };
+      for (const d of r.contents) {
+        const c = this.counterManager.next(`u_content_${d.type}`);
+        d.id = `u_content_${d.type}_${c}`, d.values._meta = { htmlID: d.id, htmlClassNames: `u_content_${d.type}` };
       }
     }
-    const r = N(this.design, t);
-    this.design.body.rows.splice(r + 1, 0, n), this.syncCounters(), this.notifyChannels("design"), this.emitUpdate("row_added", n);
+    const s = q(this.design, t);
+    this.design.body.rows.splice(s + 1, 0, n), this.syncCounters(), this.notifyChannels("design"), this.emitUpdate("row_added", n);
   }
   /** Get the index of a row */
   getRowIndex(t) {
-    return N(this.design, t);
+    return q(this.design, t);
   }
   /** Update row-level values */
   updateRowValues(t, o) {
-    const n = F(this.design, t);
+    const n = N(this.design, t);
     n && (this.history.push(this.design), Object.assign(n.values, o), this.notifyChannels("design"), this.emitUpdate("content_updated"));
   }
   // ── Column Operations ──────────────────────────────────────
   /** Update column-level values */
   updateColumnValues(t, o) {
-    const n = O(this.design, t);
+    const n = j(this.design, t);
     n && (this.history.push(this.design), Object.assign(n.values, o), this.notifyChannels("design"), this.emitUpdate("content_updated"));
   }
   // ── Content Operations ─────────────────────────────────────
   /** Add content to a column at the given index */
   addContent(t, o, n) {
-    const i = O(this.design, t);
+    const i = j(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);
+    const s = structuredClone(o);
+    n !== void 0 && n >= 0 && n <= i.contents.length ? i.contents.splice(n, 0, s) : i.contents.push(s), this.syncCounters(), this.notifyChannels("design"), this.emitUpdate("content_added", s);
   }
   /** Remove a content block by ID */
   removeContent(t) {
     for (const o of this.design.body.rows)
       for (const n of o.columns) {
-        const i = n.contents.findIndex((r) => r.id === t);
+        const i = n.contents.findIndex((s) => s.id === t);
         if (i !== -1) {
           this.history.push(this.design), n.contents.splice(i, 1), this._selectedId === t && (this._selectedId = null), this.notifyChannels("design"), this.emitUpdate("content_removed");
           return;
@@ -376,36 +376,36 @@ class mt {
   }
   /** Update content values by ID */
   updateContentValues(t, o) {
-    const n = j(this.design, t);
+    const n = W(this.design, t);
     n && (this.history.push(this.design), Object.assign(n.values, o), this.notifyChannels("design"), this.emitUpdate("content_updated"));
   }
   /** Move a content block to a different column at a given index */
   moveContent(t, o, n) {
-    const i = j(this.design, t);
+    const i = W(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 === t);
+    for (const r of this.design.body.rows)
+      for (const a of r.columns) {
+        const d = a.contents.findIndex((c) => c.id === t);
         if (d !== -1) {
-          l.contents.splice(d, 1);
+          a.contents.splice(d, 1);
           break;
         }
       }
-    const r = O(this.design, o);
-    r && r.contents.splice(n, 0, i), this.notifyChannels("design"), this.emitUpdate("content_reordered");
+    const s = j(this.design, o);
+    s && s.contents.splice(n, 0, i), this.notifyChannels("design"), this.emitUpdate("content_reordered");
   }
   /** Duplicate a content block, inserting the copy right after the original */
   duplicateContent(t) {
-    const o = j(this.design, t);
+    const o = W(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 === t);
-          if (r !== -1) {
+          const s = i.contents.findIndex((r) => r.id === t);
+          if (s !== -1) {
             this.history.push(this.design);
-            const s = structuredClone(o), l = this.counterManager.next(`u_content_${o.type}`);
-            s.id = `u_content_${o.type}_${l}`, s.values._meta = { htmlID: s.id, htmlClassNames: `u_content_${o.type}` }, i.contents.splice(r + 1, 0, s), this.syncCounters(), this.notifyChannels("design"), this.emitUpdate("content_added", s);
+            const r = structuredClone(o), a = this.counterManager.next(`u_content_${o.type}`);
+            r.id = `u_content_${o.type}_${a}`, r.values._meta = { htmlID: r.id, htmlClassNames: `u_content_${o.type}` }, i.contents.splice(s + 1, 0, r), this.syncCounters(), this.notifyChannels("design"), this.emitUpdate("content_added", r);
             return;
           }
         }
@@ -417,29 +417,29 @@ class mt {
   }
   // ── Lookups (delegate to design-lookup) ────────────────────
   findRow(t) {
-    return F(this.design, t);
+    return N(this.design, t);
   }
   findColumn(t) {
-    return O(this.design, t);
+    return j(this.design, t);
   }
   findContent(t) {
-    return j(this.design, t);
+    return W(this.design, t);
   }
   findParentColumn(t) {
-    return ft(this.design, t);
+    return xt(this.design, t);
   }
   findParentRow(t) {
-    return bt(this.design, t);
+    return yt(this.design, t);
   }
   // ── Factory Methods (delegate to design-factory) ───────────
   /** Create a new row with the given column layout */
   createRow(t) {
-    const o = ut(this.counterManager, t);
+    const o = bt(this.counterManager, t);
     return this.syncCounters(), o;
   }
   /** Create a new content block for the given tool type */
   createContent(t, o = {}) {
-    const n = gt(this.counterManager, t, o);
+    const n = mt(this.counterManager, t, o);
     return this.syncCounters(), n;
   }
   // ── Private Helpers ────────────────────────────────────────
@@ -450,7 +450,7 @@ class mt {
     this.events.emit("design:updated", { type: t, item: o });
   }
 }
-class xt {
+class vt {
   constructor() {
     this.tools = /* @__PURE__ */ new Map(), this.lazyLoaders = /* @__PURE__ */ new Map(), this.lazyMeta = /* @__PURE__ */ new Map(), this.loadingPromises = /* @__PURE__ */ new Map();
   }
@@ -526,8 +526,8 @@ class xt {
     if (!o) return {};
     const n = { ...o.defaultValues };
     for (const i of Object.values(o.options))
-      for (const [r, s] of Object.entries(i.options))
-        r in n || (n[r] = s.defaultValue);
+      for (const [s, r] of Object.entries(i.options))
+        s in n || (n[s] = r.defaultValue);
     return n;
   }
   /** Get property groups for a tool */
@@ -535,7 +535,7 @@ class xt {
     return this.tools.get(t)?.options ?? {};
   }
 }
-const E = {
+const z = {
   /** ID of the content currently being dragged (null if not dragging content) */
   draggingContentId: null,
   startContentDrag(e) {
@@ -545,7 +545,7 @@ const E = {
     this.draggingContentId = null;
   }
 };
-function Q(e) {
+function Z(e) {
   const t = document.createElement("div");
   return Object.assign(t.style, {
     position: "absolute",
@@ -560,63 +560,63 @@ function Q(e) {
     boxShadow: `0 0 6px ${e}80`
   }), t;
 }
-function Z(e, t, o, n, i = "4px") {
+function tt(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(e.style, {
+  const r = (t instanceof ShadowRoot ? t.host : t).getBoundingClientRect();
+  let a;
+  o.length === 0 || n === 0 ? a = o.length === 0 ? 0 : o[0].getBoundingClientRect().top - r.top : n >= o.length ? a = o[o.length - 1].getBoundingClientRect().bottom - r.top : a = o[n].getBoundingClientRect().top - r.top, Object.assign(e.style, {
     display: "block",
-    top: `${l}px`,
+    top: `${a}px`,
     left: i,
     right: i,
     width: "auto"
   });
 }
-function M(e) {
+function I(e) {
   e && (e.style.display = "none");
 }
-function G(e, t) {
+function K(e, t) {
   const o = (e instanceof ShadowRoot, e.children);
   for (const n of Array.from(o)) {
     const i = n;
-    t(i), i.shadowRoot && G(i.shadowRoot, t), i.children?.length && G(i, t);
+    t(i), i.shadowRoot && K(i.shadowRoot, t), i.children?.length && K(i, t);
   }
 }
-function tt(e, t) {
+function et(e, t) {
   const o = [];
-  return G(e, (n) => {
+  return K(e, (n) => {
     n.matches?.(t) && o.push(n);
   }), o;
 }
-class yt {
+class $t {
   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()));
+      const s = i.dataTransfer?.types || [], r = s.includes("application/maileditor-tool"), a = s.includes("application/maileditor-layout"), d = s.includes("application/maileditor-content") || !!z.draggingContentId;
+      !r && !d && !a || (i.preventDefault(), i.dataTransfer.dropEffect = r || a ? "copy" : "move", a ? (this.currentDrop = this.findRowDropTarget(i.clientY), I(this.contentIndicator), this.showRowIndicator()) : (this.currentDrop = this.findContentDropTarget(i.clientX, i.clientY), I(this.rowIndicator), this.showContentIndicator()));
     }, this.onDrop = (i) => {
       i.preventDefault(), this.hideAllIndicators();
-      const r = this.currentDrop, s = i.dataTransfer?.getData("application/maileditor-layout");
-      if (s) {
-        this.handleLayoutDrop(JSON.parse(s), r), this.reset();
+      const s = this.currentDrop, r = i.dataTransfer?.getData("application/maileditor-layout");
+      if (r) {
+        this.handleLayoutDrop(JSON.parse(r), s), this.reset();
         return;
       }
-      const l = i.dataTransfer?.getData("application/maileditor-tool");
-      if (l) {
-        this.handleToolDrop(l, r), this.reset();
+      const a = i.dataTransfer?.getData("application/maileditor-tool");
+      if (a) {
+        this.handleToolDrop(a, s), this.reset();
         return;
       }
-      const d = i.dataTransfer?.getData("application/maileditor-content") || E.draggingContentId;
-      d && this.handleContentDrop(d, r), this.reset();
+      const d = i.dataTransfer?.getData("application/maileditor-content") || z.draggingContentId;
+      d && this.handleContentDrop(d, s), this.reset();
     }, this.onDragEnd = () => {
       this.hideAllIndicators(), this.reset();
     }, this.onDragLeave = (i) => {
-      const r = i.relatedTarget;
-      (!r || !this.root.contains(r)) && (this.hideAllIndicators(), this.currentDrop = null);
+      const s = i.relatedTarget;
+      (!s || !this.root.contains(s)) && (this.hideAllIndicators(), this.currentDrop = null);
     }, this.store = t, this.toolRegistry = o, this.root = n;
   }
   /** Attach all drag event listeners to the shadow root */
   attach() {
-    this.root.addEventListener("dragover", this.onDragOver), this.root.addEventListener("drop", this.onDrop), this.root.addEventListener("dragend", this.onDragEnd), this.root.addEventListener("dragleave", this.onDragLeave), this.contentIndicator = Q("#3b82f6"), this.rowIndicator = Q("#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 = Z("#3b82f6"), this.rowIndicator = Z("#8b5cf6");
   }
   /** Remove all event listeners and clean up indicators */
   detach() {
@@ -634,8 +634,8 @@ class yt {
     } else {
       const n = this.store.createRow([1]);
       this.store.addRow(n);
-      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);
+      const i = this.toolRegistry.getDefaultValues(t), s = this.store.createContent(t, i);
+      this.store.addContent(n.columns[0].id, s), this.store.select(s.id);
     }
   }
   handleContentDrop(t, o) {
@@ -647,33 +647,33 @@ class yt {
     if (!o?.shadowRoot) return null;
     const n = Array.from(o.shadowRoot.querySelectorAll("me-row-renderer"));
     if (n.length === 0) return { type: "row", rowIndex: 0, y: 0 };
-    let i = Math.abs(t - n[0].getBoundingClientRect().top), 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(t - l);
-      d < i && (i = d, r = { type: "row", rowIndex: s + 1, y: l });
+    let i = Math.abs(t - n[0].getBoundingClientRect().top), s = { type: "row", rowIndex: 0, y: n[0].getBoundingClientRect().top };
+    for (let r = 0; r < n.length; r++) {
+      const a = n[r].getBoundingClientRect().bottom, d = Math.abs(t - a);
+      d < i && (i = d, s = { type: "row", rowIndex: r + 1, y: a });
     }
-    return r;
+    return s;
   }
   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();
+    const n = et(this.root, "me-column-renderer");
+    let i = null, s = 1 / 0;
+    for (const r of n) {
+      const a = r.dataset.columnId;
+      if (!a || !r.shadowRoot) continue;
+      const d = r.getBoundingClientRect();
       if (t < d.left || t > d.right) continue;
-      const p = Array.from(s.shadowRoot.querySelectorAll("me-content-renderer"));
-      if (p.length === 0) {
-        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 });
+      const c = Array.from(r.shadowRoot.querySelectorAll("me-content-renderer"));
+      if (c.length === 0) {
+        const u = Math.abs(o - (d.top + d.height / 2));
+        u < s && (s = u, i = { type: "content", columnId: a, contentIndex: 0, y: d.top + d.height / 2 });
         continue;
       }
-      const h = p[0].getBoundingClientRect().top;
-      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 });
+      const h = c[0].getBoundingClientRect().top;
+      let g = Math.abs(o - h);
+      g < s && (s = g, i = { type: "content", columnId: a, contentIndex: 0, y: h });
+      for (let u = 0; u < c.length; u++) {
+        const f = c[u].getBoundingClientRect(), y = c[u + 1]?.getBoundingClientRect(), x = y ? (f.bottom + y.top) / 2 : f.bottom;
+        g = Math.abs(o - x), g < s && (s = g, i = { type: "content", columnId: a, contentIndex: u + 1, y: x });
       }
     }
     return i;
@@ -681,39 +681,39 @@ class yt {
   // ── Indicator Positioning ──────────────────────────────────
   showContentIndicator() {
     if (!this.contentIndicator || !this.currentDrop?.columnId) {
-      M(this.contentIndicator);
+      I(this.contentIndicator);
       return;
     }
-    const o = tt(this.root, "me-column-renderer").find((i) => i.dataset.columnId === this.currentDrop.columnId);
+    const o = et(this.root, "me-column-renderer").find((i) => i.dataset.columnId === this.currentDrop.columnId);
     if (!o?.shadowRoot) return;
     const n = Array.from(o.shadowRoot.querySelectorAll("me-content-renderer"));
-    Z(this.contentIndicator, o.shadowRoot, n, this.currentDrop.contentIndex ?? 0, "4px");
+    tt(this.contentIndicator, o.shadowRoot, n, this.currentDrop.contentIndex ?? 0, "4px");
   }
   showRowIndicator() {
     if (!this.rowIndicator || !this.currentDrop) {
-      M(this.rowIndicator);
+      I(this.rowIndicator);
       return;
     }
     const t = this.root.querySelector("me-editor-canvas"), o = t?.shadowRoot?.querySelector(".canvas-body");
     if (!o) return;
     const n = Array.from(t.shadowRoot.querySelectorAll("me-row-renderer"));
-    Z(this.rowIndicator, o, n, this.currentDrop.rowIndex ?? 0, "0");
+    tt(this.rowIndicator, o, n, this.currentDrop.rowIndex ?? 0, "0");
   }
   hideAllIndicators() {
-    M(this.contentIndicator), M(this.rowIndicator);
+    I(this.contentIndicator), I(this.rowIndicator);
   }
   reset() {
-    this.currentDrop = null, E.reset();
+    this.currentDrop = null, z.reset();
   }
 }
-function a(e, t, o = "") {
+function l(e, t, o = "") {
   const n = e[t];
   return typeof n == "string" && n !== "" ? n : typeof n == "number" ? String(n) : o;
 }
-function et(e) {
+function ot(e) {
   return typeof e == "string" ? e : e && typeof e == "object" && "url" in e && e.url || "";
 }
-function ot(e) {
+function nt(e) {
   if (e && typeof e == "object") {
     const t = e;
     return {
@@ -723,7 +723,7 @@ function ot(e) {
   }
   return {};
 }
-function wt(e) {
+function kt(e) {
   const t = e.action;
   if (t && typeof t == "object") {
     const o = t.values;
@@ -733,22 +733,22 @@ function wt(e) {
     };
   }
   return {
-    href: a(e, "href"),
-    target: a(e, "target", "_blank")
+    href: l(e, "href"),
+    target: l(e, "target", "_blank")
   };
 }
-function nt(e, t = "") {
+function it(e, t = "") {
   const o = e.text;
   if (typeof o == "string" && o !== "") return o;
   const n = e.textJson;
   if (typeof n == "string")
     try {
-      const i = JSON.parse(n), r = [], s = (l) => {
-        typeof l.text == "string" && r.push(l.text), l.type === "linebreak" && r.push("<br/>");
-        const d = l.children;
-        d && d.forEach(s);
+      const i = JSON.parse(n), s = [], r = (a) => {
+        typeof a.text == "string" && s.push(a.text), a.type === "linebreak" && s.push("<br/>");
+        const d = a.children;
+        d && d.forEach(r);
       };
-      if (s(i.root || i), r.length > 0) return r.join("");
+      if (r(i.root || i), s.length > 0) return s.join("");
     } catch {
     }
   return t;
@@ -757,19 +757,19 @@ 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);
+    const n = o, i = n.value || t, s = n.url;
+    if (s && typeof document < "u") {
+      const r = `emabuild-font-${i.replace(/[^a-z]/gi, "")}`;
+      if (!document.getElementById(r)) {
+        const a = document.createElement("link");
+        a.id = r, a.rel = "stylesheet", a.href = s, document.head.appendChild(a);
       }
     }
     return i;
   }
   return t;
 }
-function le(e, t) {
+function me(e, t) {
   if (typeof e != "string") return t;
   try {
     return JSON.parse(e);
@@ -777,26 +777,26 @@ function le(e, t) {
     return t;
   }
 }
-function V(e, t) {
+function L(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}">
+  <tbody><tr><td style="${`padding:${o};font-family:arial,helvetica,sans-serif;${i}`}" align="${n}">
     ${e}
   </td></tr></tbody>
 </table>`;
 }
-function vt(e, t, o) {
-  const { bgColor: n, textColor: i, fontSize: r, fontWeight: s, borderRadius: l } = o, d = parseInt(l) || 0;
+function Ct(e, t, o) {
+  const { bgColor: n, textColor: i, fontSize: s, fontWeight: r, borderRadius: a } = o, d = parseInt(a) || 0;
   if (d <= 0) return "";
-  const p = Math.round(d / 20 * 100);
+  const c = Math.round(d / 20 * 100);
   return `<!--[if mso]>
-  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${t}" style="height:auto;v-text-anchor:middle;width:auto;" arcsize="${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="${c}%" stroke="f" fillcolor="${n}">
     <w:anchorlock/>
-    <center style="color:${i};font-family:arial,helvetica,sans-serif;font-size:${r};font-weight:${s};">${e}</center>
+    <center style="color:${i};font-family:arial,helvetica,sans-serif;font-size:${s};font-weight:${r};">${e}</center>
   </v:roundrect>
   <![endif]-->`;
 }
-const $t = {
+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>',
@@ -859,19 +859,19 @@ const $t = {
   },
   renderer: {
     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:${t};background-color:${o};color:${n};line-height:${i};font-family:${r};word-break:break-word;">
-          ${H(s)}
+      const t = l(e, "containerPadding", "10px"), o = l(e, "backgroundColor", "transparent"), n = l(e, "color", "inherit"), i = l(e, "lineHeight", "140%"), s = Y(e), r = l(e, "text");
+      return p`
+        <div style="padding:${t};background-color:${o};color:${n};line-height:${i};font-family:${s};word-break:break-word;">
+          ${U(r)}
         </div>
       `;
     },
     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 });
+      const t = l(e, "containerPadding", "10px"), o = l(e, "backgroundColor"), n = l(e, "color", "#000000"), i = l(e, "lineHeight", "140%"), s = l(e, "textAlign", "left"), r = l(e, "text"), a = o ? `background-color:${o};` : "", d = `<div style="font-size:14px;color:${n};line-height:${i};text-align:${s};">${r}</div>`;
+      return L(d, { padding: t, extraTdStyle: a });
     }
   }
-}, kt = {
+}, Dt = {
   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>',
@@ -973,19 +973,19 @@ const $t = {
   },
   renderer: {
     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:${t};font-size:${o};color:${n};text-align:${i};font-weight:${r};line-height:${s};font-family:${l};">
-          ${H(d)}
+      const t = l(e, "containerPadding", "10px"), o = l(e, "fontSize", "22px"), n = l(e, "color", "#000000"), i = l(e, "textAlign", "left"), s = l(e, "fontWeight", "700"), r = l(e, "lineHeight", "140%"), a = Y(e), d = it(e, "Heading");
+      return p`
+        <div style="padding:${t};font-size:${o};color:${n};text-align:${i};font-weight:${s};line-height:${r};font-family:${a};">
+          ${U(d)}
         </div>
       `;
     },
     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 });
+      const t = l(e, "containerPadding", "10px"), o = l(e, "fontSize", "22px"), n = l(e, "color", "#000000"), i = l(e, "textAlign", "left"), s = l(e, "fontWeight", "700"), r = l(e, "lineHeight", "140%"), a = l(e, "letterSpacing", "normal"), d = Y(e), c = l(e, "headingType", "h1"), h = it(e, "Heading"), g = `<${c} style="margin:0;font-size:${o};color:${n};text-align:${i};font-weight:${s};line-height:${r};letter-spacing:${a};font-family:${d};">${h}</${c}>`;
+      return L(g, { padding: t });
     }
   }
-}, Ct = {
+}, St = {
   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>',
@@ -1028,15 +1028,15 @@ const $t = {
   },
   renderer: {
     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>`;
+      const t = l(e, "containerPadding", "10px"), o = l(e, "color", "#374151"), n = l(e, "lineHeight", "160%");
+      return p`<div style="padding:${t};color:${o};line-height:${n};word-break:break-word;">${U(l(e, "text"))}</div>`;
     },
     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 });
+      const t = l(e, "containerPadding", "10px"), o = l(e, "color", "#374151"), n = l(e, "lineHeight", "160%"), i = l(e, "textAlign", "left"), s = l(e, "letterSpacing", "normal"), r = `<div style="font-size:14px;color:${o};line-height:${n};text-align:${i};letter-spacing:${s};word-wrap:break-word;">${l(e, "text")}</div>`;
+      return L(r, { padding: t });
     }
   }
-}, _t = {
+}, Rt = {
   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>',
@@ -1097,15 +1097,18 @@ const $t = {
   },
   renderer: {
     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>`;
+      const t = l(e, "containerPadding", "10px"), o = ot(e.src), n = l(e, "alt"), s = nt(e.src).maxWidth || l(e, "width", "100%"), r = l(e, "borderRadius", "0px"), a = l(e, "textAlign", l(e, "align", "center"));
+      return o ? p`<div style="padding:${t};text-align:${a};"><img src=${o} alt=${n} style="display:inline-block;max-width:100%;width:${s};border-radius:${r};border:0;" /></div>` : p`<div style="padding:${t};text-align:${a};"><div style="background:#f1f5f9;border:2px dashed #cbd5e1;border-radius:8px;padding:40px 20px;text-align:center;color:#94a3b8;font-size:13px;">No image set. Enter a URL in the property panel.</div></div>`;
     },
     renderHtml(e, t) {
-      const o = 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 });
+      const o = l(e, "containerPadding", "10px"), n = ot(e.src), i = l(e, "alt"), s = kt(e), r = nt(e.src), a = r.maxWidth || l(e, "width", "100%"), d = l(e, "borderRadius", "0px"), c = l(e, "textAlign", l(e, "align", "center"));
+      let h;
+      a.includes("%") ? h = Math.round(t.columnWidth * (parseFloat(a) / 100)) : a === "auto" ? h = r.width || t.columnWidth : h = parseInt(a) || t.columnWidth;
+      const g = d !== "0px" ? `border-radius:${d};` : "", u = `<img align="${c}" border="0" src="${n}" alt="${i}" title="${i}" style="display:block;border:0;height:auto;width:100%;max-width:${h}px;${g}" width="${h}" />`, f = s.href ? `<a href="${s.href}" target="${s.target}" style="text-decoration:none;">${u}</a>` : u;
+      return L(f, { padding: o, align: c });
     }
   }
-}, Dt = {
+}, Tt = {
   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>',
@@ -1192,24 +1195,24 @@ const $t = {
   },
   renderer: {
     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:${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>
+      const t = l(e, "containerPadding", "10px"), o = l(e, "backgroundColor", "#3b82f6"), n = l(e, "textColor", "#ffffff"), i = l(e, "fontSize", "14px"), s = l(e, "fontWeight", "700"), r = l(e, "borderRadius", "4px"), a = l(e, "buttonPadding", "10px 20px"), d = l(e, "text", "Click Me"), c = l(e, "textAlign", "center"), h = l(e, "buttonWidth", "auto"), g = l(e, "borderWidth", "0px"), u = l(e, "borderColor", o), f = g !== "0px" ? `border:${g} solid ${u};` : "border:none;", y = h === "auto" ? "display:inline-block;" : `display:block;width:${h};`;
+      return p`
+        <div style="padding:${t};text-align:${c};">
+          <a style="${y}background-color:${o};color:${n};font-size:${i};font-weight:${s};border-radius:${r};padding:${a};text-decoration:none;text-align:center;${f}cursor:pointer;font-family:arial,helvetica,sans-serif;">${d}</a>
         </div>
       `;
     },
     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="${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>
+      const t = l(e, "containerPadding", "10px"), o = l(e, "backgroundColor", "#3b82f6"), n = l(e, "textColor", "#ffffff"), i = l(e, "fontSize", "14px"), s = l(e, "fontWeight", "700"), r = l(e, "borderRadius", "4px"), a = l(e, "buttonPadding", "10px 20px"), d = l(e, "text", "Click Me"), c = l(e, "textAlign", "center"), h = l(e, "href", "#"), g = l(e, "target", "_blank"), u = l(e, "borderWidth", "0px"), f = l(e, "borderColor", o), y = u !== "0px" ? `border:${u} solid ${f};` : "border:none;", x = Ct(d, h, { bgColor: o, textColor: n, fontSize: i, fontWeight: s, borderRadius: r }), m = x ? `${x}
+  <!--[if !mso]><!-->` : "<!--[if !mso]><!-->", v = `<div align="${c}">
+      ${m}
+      <a href="${h}" target="${g}" style="display:inline-block;text-decoration:none;text-align:center;color:${n};background-color:${o};border-radius:${r};font-size:${i};font-weight:${s};padding:${a};font-family:arial,helvetica,sans-serif;${y}mso-border-alt:none;"><span style="line-height:120%;">${d}</span></a>
       <!--<![endif]-->
     </div>`;
-      return V(z, { padding: t, align: p });
+      return L(v, { padding: t, align: c });
     }
   }
-}, St = {
+}, It = {
   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>',
@@ -1256,53 +1259,53 @@ const $t = {
   },
   renderer: {
     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>`;
+      const t = l(e, "containerPadding", "10px"), o = l(e, "width", "100%"), n = `${l(e, "borderTopWidth", "1px")} ${l(e, "borderTopStyle", "solid")} ${l(e, "borderTopColor", "#cccccc")}`;
+      return p`<div style="padding:${t};"><div style="border-top:${n};width:${o};margin:0 auto;"></div></div>`;
     },
     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" });
+      const t = l(e, "containerPadding", "10px"), o = l(e, "width", "100%"), n = `${l(e, "borderTopWidth", "1px")} ${l(e, "borderTopStyle", "solid")} ${l(e, "borderTopColor", "#cccccc")}`, i = `<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="${o}" style="border-collapse:collapse;border-top:${n};"><tbody><tr><td style="font-size:0;line-height:0;">&nbsp;</td></tr></tbody></table>`;
+      return L(i, { padding: t, align: "center" });
     }
   }
-}, Rt = [
-  $t,
-  kt,
-  Ct,
+}, Mt = [
   _t,
   Dt,
-  St
-], it = [
+  St,
+  Rt,
+  Tt,
+  It
+], st = [
   {
     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-YYfXkFIO.js").then((e) => e.htmlTool)
+    loader: () => import("./html-tool-BxuBzfKP.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-Ba7s8khr.js").then((e) => e.socialTool)
+    loader: () => import("./social-tool-BY75hT3n.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-Dus3qFoN.js").then((e) => e.menuTool)
+    loader: () => import("./menu-tool-BZDYFgXW.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-3FQ9rHns.js").then((e) => e.videoTool)
+    loader: () => import("./video-tool-DiIJBQpM.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-YDsaHv7a.js").then((e) => e.timerTool)
+    loader: () => import("./timer-tool-Dj9QeWtN.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-D8yaPASq.js").then((e) => e.tableTool)
+    loader: () => import("./table-tool-Ep89kXMr.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-DShwYWpp.js").then((e) => e.formTool)
+    loader: () => import("./form-tool-At5Uq7es.js").then((e) => e.formTool)
   }
 ];
-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>` : "";
+function Pt(e, t, o) {
+  const n = o.backgroundColor || "#e7e7e7", i = o.contentWidth || "600px", s = o.fontFamily?.value || "arial,helvetica,sans-serif", r = o.textColor || "#000000", a = o.preheaderText || "" || "&zwnj;", d = `<div style="display:none;font-size:1px;color:${n};line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">${a}${"&zwnj;&nbsp;".repeat(80)}</div>`;
   return `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
 <head>
@@ -1321,7 +1324,7 @@ function Mt(e, t, o) {
     </o:OfficeDocumentSettings>
   </xml></noscript>
   <style type="text/css">
-    table, td, th { font-family: ${r} !important; }
+    table, td, th { font-family: ${s} !important; }
   </style>
   <![endif]-->
   <!--[if !mso]><!-->
@@ -1333,17 +1336,15 @@ function Mt(e, t, o) {
     body { margin: 0; padding: 0; }
     table, tr, td { vertical-align: top; border-collapse: collapse; }
     p { margin: 0; }
-    .ie-container table, .mso-container table { table-layout: fixed; }
-    * { line-height: inherit; }
     a[x-apple-data-detectors='true'] { color: inherit !important; text-decoration: none !important; }
   </style>
 </head>
-<body class="clean-body u_body" style="margin:0;padding:0;-webkit-text-size-adjust:100%;background-color:${n};color:${s};">
+<body class="clean-body u_body" style="margin:0;padding:0;-webkit-text-size-adjust:100%;background-color:${n};color:${r};">
   ${d}
-  <table id="u_body" style="border-collapse:collapse;table-layout:fixed;border-spacing:0;mso-table-lspace:0pt;mso-table-rspace:0pt;vertical-align:top;min-width:320px;margin:0 auto;background-color:${n};width:100%;" cellpadding="0" cellspacing="0" border="0">
+  <table id="u_body" role="presentation" style="border-collapse:collapse;border-spacing:0;margin:0 auto;background-color:${n};width:100%;" cellpadding="0" cellspacing="0" border="0">
     <tbody>
-      <tr style="vertical-align:top;">
-        <td style="word-break:break-word;border-collapse:collapse !important;vertical-align:top;">
+      <tr>
+        <td style="vertical-align:top;">
           <!--[if (mso)|(IE)]><table width="${parseInt(i)}" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
           ${e}
           <!--[if (mso)|(IE)]></td></tr></table><![endif]-->
@@ -1354,74 +1355,63 @@ function Mt(e, t, o) {
 </body>
 </html>`;
 }
-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]-->`;
-    });
-    g = `<!--[if (mso)|(IE)]><table role="presentation" width="${n}" cellpadding="0" cellspacing="0" border="0"><tr>${f.join(`
-`)}</tr></table><![endif]-->
-
-<!--[if !mso]><!-->
-<div style="max-width:${n}px;margin:0 auto;">
-${h.join(`
-`)}
-</div>
-<!--<![endif]-->`;
+function Et(e, t, o) {
+  const n = parseInt(t.contentWidth || "600"), i = e.values.backgroundColor || "", s = e.values.columnsBackgroundColor || "", r = e.values.padding || "0px", a = e.cells.reduce((m, w) => m + w, 0), d = i ? `background-color:${i};` : "", c = e.values.backgroundImage;
+  let h = "";
+  if (c?.url) {
+    const m = c.repeat === !0 || c.repeat === "repeat" ? "repeat" : "no-repeat", w = c.cover === !0 ? "cover" : c.fullWidth === !0 ? "100% auto" : "auto", v = c.center !== !1 ? "center top" : "left top";
+    h = `background-image:url('${c.url}');background-repeat:${m};background-position:${v};background-size:${w};`;
+  }
+  const g = e.columns.length > 1, u = e.columns.map((m, w) => {
+    const v = Math.round(e.cells[w] / a * n);
+    return { colHtml: Lt(m, v, s, t, o), colWidthPx: v };
+  });
+  let f;
+  if (g) {
+    const m = u.map(
+      ({ colHtml: w, colWidthPx: v }) => `<!--[if (mso)|(IE)]><td align="center" width="${v}" style="width:${v}px;padding:0px;" valign="top"><![endif]-->${w}<!--[if (mso)|(IE)]></td><![endif]-->`
+    );
+    f = `<!--[if (mso)|(IE)]><table role="presentation" width="${n}" cellpadding="0" cellspacing="0" border="0"><tr><![endif]-->${m.join("")}<!--[if (mso)|(IE)]></tr></table><![endif]-->`;
   } else
-    g = h.join(`
-`);
-  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;">
-      ${g}
-    </div>
-  </div>
+    f = u.map(({ colHtml: m }) => m).join("");
+  const y = e.values.hideDesktop ? " u_hide_desktop" : "", x = e.values.hideMobile ? " u_hide_mobile" : "";
+  return `<div class="u_row${y}${x}" style="padding:${r};${d}${h}">
+  <div style="margin:0 auto;max-width:${n}px;${g ? "font-size:0;" : ""}text-align:center;">${f}</div>
 </div>`;
 }
-function 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 = {
+function Lt(e, t, o, n, i) {
+  const s = e.values.backgroundColor || o || "", r = e.values.padding || "0px", a = e.values.borderRadius || "0px", d = s ? `background-color:${s};` : "", c = e.contents.map((h) => {
+    const g = i.get(h.type);
+    if (!g) return `<!-- unknown tool: ${h.type} -->`;
+    const u = {
       columnWidth: t,
       displayMode: "email",
       contentWidth: parseInt(n.contentWidth || "600"),
       bodyValues: n
     };
-    let 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;
+    let f = g(h.values, u);
+    const y = !!h.values.hideDesktop, x = !!h.values.hideMobile;
+    return (y || x) && (f = `<div class="${[y && "u_hide_desktop", x && "u_hide_mobile"].filter(Boolean).join(" ")}">${f}</div>`), f;
   }).join(`
 `);
-  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]-->'}
+  return `<div class="u_column" style="display:inline-block;vertical-align:top;width:${t}px;max-width:${t}px;font-size:14px;text-align:left;">
+  <div style="width:100%;${d}${a !== "0px" ? `border-radius:${a};` : ""}">
+    <div style="padding:${r};">
+      ${c || "&nbsp;"}
     </div>
   </div>
 </div>`;
 }
-function It(e) {
+function zt(e) {
   return `
 @media only screen and (min-width: ${e + 20}px) {
-  .u_row .u_column { display: table-cell; }
+  .u_row .u_column { display: inline-block !important; }
 }
 
 @media only screen and (max-width: ${e + 20}px) {
   .u_row .u_column {
     display: block !important;
     width: 100% !important;
-    min-width: 320px !important;
     max-width: 100% !important;
   }
   .u_row {
@@ -1461,27 +1451,53 @@ function It(e) {
   .u_hide_mobile { display: block !important; }
 }`;
 }
-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 = Mt(r, s, n);
+const Vt = [
+  "box-sizing",
+  "float",
+  "overflow-wrap",
+  "word-break",
+  "word-wrap",
+  "outline",
+  "cursor",
+  "transition",
+  "animation",
+  "transform",
+  "position",
+  "z-index",
+  "display:\\s*flex",
+  "display:\\s*grid",
+  "gap"
+], At = new RegExp(
+  `(?:;\\s*|^\\s*)(${Vt.join("|")})\\s*:[^;]*;?`,
+  "gi"
+), Bt = /var\(--[^)]*\)/gi;
+function Ot(e) {
+  return e.replace(/style="([^"]*)"/gi, (t, o) => {
+    let n = o;
+    return n = n.replace(At, ""), n = n.replace(Bt, "inherit"), n = n.replace(/;\s*;/g, ";").replace(/^\s*;\s*/, "").replace(/;\s*$/, "").trim(), n ? `style="${n}"` : "";
+  });
+}
+function Ht(e, t, o) {
+  const n = e.body.values, i = parseInt(n.contentWidth || "600"), s = e.body.rows.map((u) => Et(u, n, t)).join(`
+`), r = zt(i), a = Ot(s);
+  let d = Pt(a, r, n);
   if (o?.mergeTags)
-    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), {
+    for (const [u, f] of Object.entries(o.mergeTags))
+      d = d.replaceAll(`{{${u}}}`, f);
+  const c = d.match(/<body[^>]*>([\s\S]*)<\/body>/i), h = d.match(/<style[^>]*>([\s\S]*?)<\/style>/gi), g = [];
+  return n.fontFamily?.url && g.push(n.fontFamily.url), {
     design: structuredClone(e),
-    html: l,
+    html: d,
     chunks: {
-      body: d?.[1] ?? r,
-      css: p?.map((u) => u.replace(/<\/?style[^>]*>/gi, "")).join(`
-`) ?? s,
-      fonts: h,
+      body: c?.[1] ?? s,
+      css: h?.map((u) => u.replace(/<\/?style[^>]*>/gi, "")).join(`
+`) ?? r,
+      fonts: g,
       js: ""
     }
   };
 }
-class S {
+class T {
   /**
    * @param host - The Lit component that owns this controller
    * @param channels - Which store channels to subscribe to
@@ -1505,17 +1521,170 @@ class S {
     }));
   }
 }
-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;
+var jt = Object.defineProperty, Wt = Object.getOwnPropertyDescriptor, at = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? Wt(t, o) : t, s = e.length - 1, r; s >= 0; s--)
+    (r = e[s]) && (i = (n ? r(t, o, i) : r(i)) || i);
+  return n && i && jt(t, o, i), i;
 };
-let _ = class extends v {
+let V = class extends $ {
   constructor() {
-    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);
+    super(...arguments), this.visible = !1;
+  }
+  exec(e, t) {
+    document.execCommand(e, !1, t), this.requestUpdate();
+  }
+  isActive(e) {
+    try {
+      return document.queryCommandState(e);
+    } catch {
+      return !1;
+    }
+  }
+  /** Position the toolbar above a given element */
+  positionAbove(e) {
+    const t = e.getBoundingClientRect();
+    this.style.left = `${t.left + t.width / 2}px`, this.style.top = `${t.top - 8}px`, this.style.transform = "translate(-50%, -100%)", this.classList.add("visible");
+  }
+  hide() {
+    this.classList.remove("visible");
+  }
+  handleLink() {
+    if (this.isActive("createLink"))
+      this.exec("unlink");
+    else {
+      const e = prompt("Enter URL:");
+      e && this.exec("createLink", e);
+    }
+  }
+  render() {
+    return p`
+      <div class="toolbar" @mousedown=${(e) => e.preventDefault()}>
+        <button class="btn ${this.isActive("bold") ? "active" : ""}"
+          @click=${() => this.exec("bold")} title="Bold (Ctrl+B)">
+          <strong>B</strong>
+        </button>
+        <button class="btn ${this.isActive("italic") ? "active" : ""}"
+          @click=${() => this.exec("italic")} title="Italic (Ctrl+I)">
+          <em>I</em>
+        </button>
+        <button class="btn ${this.isActive("underline") ? "active" : ""}"
+          @click=${() => this.exec("underline")} title="Underline (Ctrl+U)">
+          <u>U</u>
+        </button>
+        <button class="btn ${this.isActive("strikeThrough") ? "active" : ""}"
+          @click=${() => this.exec("strikeThrough")} title="Strikethrough">
+          <s>S</s>
+        </button>
+        <div class="separator"></div>
+        <button class="btn ${this.isActive("createLink") ? "active" : ""}"
+          @click=${this.handleLink} title="Link">
+          <svg viewBox="0 0 24 24"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
+        </button>
+        <div class="separator"></div>
+        <button class="btn" @click=${() => this.exec("justifyLeft")} title="Align Left">
+          <svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="15" y2="12"/><line x1="3" y1="18" x2="18" y2="18"/></svg>
+        </button>
+        <button class="btn" @click=${() => this.exec("justifyCenter")} title="Align Center">
+          <svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"/><line x1="6" y1="12" x2="18" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></svg>
+        </button>
+        <button class="btn" @click=${() => this.exec("justifyRight")} title="Align Right">
+          <svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"/><line x1="9" y1="12" x2="21" y2="12"/><line x1="6" y1="18" x2="21" y2="18"/></svg>
+        </button>
+      </div>
+    `;
+  }
+};
+V.styles = k`
+    :host {
+      position: fixed;
+      z-index: 10000;
+      display: none;
+    }
+    :host(.visible) {
+      display: block;
+      animation: fadeIn 0.15s ease;
+    }
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(4px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .toolbar {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+      padding: 4px 6px;
+      background: #1f2937;
+      border-radius: 8px;
+      box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+    }
+    .btn {
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: none;
+      border: none;
+      color: #d1d5db;
+      cursor: pointer;
+      border-radius: 4px;
+      font-size: 14px;
+      font-weight: 600;
+      transition: all 0.1s ease;
+      padding: 0;
+    }
+    .btn:hover { background: rgba(255,255,255,0.1); color: white; }
+    .btn.active { background: rgba(59,130,246,0.3); color: #93c5fd; }
+    .separator {
+      width: 1px;
+      height: 20px;
+      background: #374151;
+      margin: 0 2px;
+    }
+    .btn svg {
+      width: 16px;
+      height: 16px;
+      stroke: currentColor;
+      fill: none;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+  `;
+at([
+  b({ type: Boolean })
+], V.prototype, "visible", 2);
+V = at([
+  C("me-inline-toolbar")
+], V);
+var Ut = Object.defineProperty, Ft = Object.getOwnPropertyDescriptor, O = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? Ft(t, o) : t, s = e.length - 1, r; s >= 0; s--)
+    (r = e[s]) && (i = (n ? r(t, o, i) : r(i)) || i);
+  return n && i && Ut(t, o, i), i;
+};
+const rt = /* @__PURE__ */ new Set(["text", "heading", "paragraph"]);
+function lt(e) {
+  return e === "html" ? "html" : "text";
+}
+let D = class extends $ {
+  constructor() {
+    super(...arguments), this.storeCtrl = new T(this, ["design", "selection", "hover", "viewMode"]), this.editing = !1, this.toolbar = null, this.editableEl = null, this.saveDebounceTimer = null, this._onDragStart = (e) => {
+      if (this.editing) {
+        e.preventDefault();
+        return;
+      }
+      e.dataTransfer.setData("application/maileditor-content", this.content.id), e.dataTransfer.effectAllowed = "move", this.style.opacity = "0.4", z.startContentDrag(this.content.id);
     }, this._onDragEnd = () => {
-      this.style.opacity = "1", E.reset();
+      this.style.opacity = "1", z.reset();
+    }, this.handleInlineInput = () => {
+      this.saveDebounceTimer && clearTimeout(this.saveDebounceTimer), this.saveDebounceTimer = setTimeout(() => this.saveInlineContent(), 500), this.showToolbar();
+    }, this.handleInlineBlur = (e) => {
+      const t = e.relatedTarget;
+      t && (t.closest("me-inline-toolbar") || this.toolbar?.contains(t)) || setTimeout(() => {
+        !this.shadowRoot?.activeElement && !this.toolbar?.matches(":hover") && this.stopEditing();
+      }, 150);
+    }, this.handleInlineKeydown = (e) => {
+      e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), this.stopEditing()), (e.key === "Delete" || e.key === "Backspace") && e.stopPropagation();
     };
   }
   set store(e) {
@@ -1524,8 +1693,12 @@ let _ = class extends v {
   get store() {
     return this.storeCtrl.store;
   }
+  // ── Event handlers ───────────────────────────────────────
   handleClick(e) {
-    e.stopPropagation(), this.store.select(this.content.id);
+    e.stopPropagation(), this.editing || this.store.select(this.content.id);
+  }
+  handleDblClick(e) {
+    e.stopPropagation(), rt.has(this.content.type) && this.startEditing();
   }
   handleMouseEnter() {
     this.store.hover(this.content.id);
@@ -1539,52 +1712,118 @@ let _ = class extends v {
   handleDuplicate(e) {
     e.stopPropagation(), this.store.duplicateContent(this.content.id);
   }
+  // ── Inline editing ───────────────────────────────────────
+  startEditing() {
+    this.editing = !0, this.classList.add("editing"), this.setAttribute("draggable", "false"), this.updateComplete.then(() => {
+      const e = this.shadowRoot?.querySelector(".inline-editable");
+      if (e) {
+        this.editableEl = e, e.focus();
+        const t = window.getSelection(), o = document.createRange();
+        o.selectNodeContents(e), o.collapse(!1), t?.removeAllRanges(), t?.addRange(o), this.showToolbar();
+      }
+    });
+  }
+  stopEditing() {
+    this.editing && (this.saveInlineContent(), this.editing = !1, this.classList.remove("editing"), this.setAttribute("draggable", "true"), this.editableEl = null, this.toolbar?.hide());
+  }
+  saveInlineContent() {
+    if (!this.editableEl) return;
+    const e = this.editableEl.innerHTML, t = lt(this.content.type), o = this.content.values[t];
+    e !== o && this.store.updateContentValues(this.content.id, { [t]: e });
+  }
+  showToolbar() {
+    this.toolbar || (this.toolbar = document.createElement("me-inline-toolbar"), document.body.appendChild(this.toolbar)), this.editableEl && this.toolbar.positionAbove(this.editableEl);
+  }
+  // ── Lifecycle ────────────────────────────────────────────
   connectedCallback() {
     super.connectedCallback(), this.addEventListener("dragstart", this._onDragStart), this.addEventListener("dragend", this._onDragEnd);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("dragstart", this._onDragStart), this.removeEventListener("dragend", this._onDragEnd);
+    super.disconnectedCallback(), this.removeEventListener("dragstart", this._onDragStart), this.removeEventListener("dragend", this._onDragEnd), this.toolbar?.remove(), this.toolbar = null, this.saveDebounceTimer && clearTimeout(this.saveDebounceTimer);
   }
+  // ── Render ───────────────────────────────────────────────
   render() {
-    if (!this.store) return c``;
-    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, {
+    if (!this.store) return p``;
+    const e = this.store.selectedId === this.content.id, t = this.store.hoveredId === this.content.id, o = this.store.viewMode, n = !!this.content.values.hideDesktop, i = !!this.content.values.hideMobile, s = o === "desktop" && n || o === "mobile" && i;
+    this.classList.toggle("selected", e && !this.editing), this.classList.toggle("hovered", t && !this.editing), this.classList.toggle("hidden-in-view", s), this.editing || this.setAttribute("draggable", "true"), this.dataset.contentId = this.content.id, this.editing && !e && this.stopEditing();
+    const r = this.toolRegistry.get(this.content.type);
+    if (!r && this.toolRegistry.has(this.content.type))
+      return this.toolRegistry.ensureLoaded(this.content.type).then(() => this.requestUpdate()), p`<div style="padding:16px;text-align:center;color:#9ca3af;font-size:13px;">Loading ${this.content.type}...</div>`;
+    const a = n ? "Hidden on desktop" : i ? "Hidden on mobile" : "", d = rt.has(this.content.type);
+    if (this.editing && d && r) {
+      const h = this.content.values, g = lt(this.content.type), u = h[g] || "", f = this.getInlineStyles(h);
+      return p`
+        <div class="content-wrapper">
+          <div
+            class="inline-editable"
+            contenteditable="true"
+            style=${f}
+            .innerHTML=${u}
+            @input=${this.handleInlineInput}
+            @blur=${this.handleInlineBlur}
+            @keydown=${this.handleInlineKeydown}
+          ></div>
+        </div>
+      `;
+    }
+    const c = r?.renderer.renderEditor(this.content.values, {
       isSelected: e,
       isHovered: t,
       columnWidth: 600,
       displayMode: "email"
     });
-    return c`
-      ${r ? c`<div class="hidden-badge">${n ? "Hidden on desktop" : i ? "Hidden on mobile" : ""}</div>` : ""}
+    return p`
+      ${s ? p`<div class="hidden-badge">${a}</div>` : ""}
       <div class="action-bar">
         <button class="action-btn" @click=${this.handleDuplicate} title="Duplicate">&#9851;</button>
         <button class="action-btn" @click=${this.handleDelete} title="Delete">&#10005;</button>
       </div>
-      <div class="content-wrapper" @click=${this.handleClick}
-        @mouseenter=${this.handleMouseEnter} @mouseleave=${this.handleMouseLeave}>
-        ${l ?? c`<div style="padding:10px;color:#999;font-style:italic;">Unknown tool: ${this.content.type}</div>`}
+      <div class="content-wrapper"
+        @click=${this.handleClick}
+        @dblclick=${this.handleDblClick}
+        @mouseenter=${this.handleMouseEnter}
+        @mouseleave=${this.handleMouseLeave}>
+        ${c ?? p`<div style="padding:10px;color:#999;font-style:italic;">Unknown tool: ${this.content.type}</div>`}
       </div>
     `;
   }
+  /** Build inline CSS for the contenteditable area based on content values */
+  getInlineStyles(e) {
+    const t = [], o = (g, u = "") => {
+      const f = e[g];
+      return typeof f == "string" ? f : typeof f == "number" ? String(f) : u;
+    };
+    t.push(`padding:${o("containerPadding", "10px")}`);
+    const n = o("backgroundColor");
+    n && t.push(`background-color:${n}`);
+    const i = o("color");
+    i && t.push(`color:${i}`);
+    const s = o("fontSize");
+    s && t.push(`font-size:${s}`);
+    const r = o("fontWeight");
+    r && t.push(`font-weight:${r}`);
+    const a = o("lineHeight", "140%");
+    t.push(`line-height:${a}`);
+    const d = o("textAlign");
+    d && t.push(`text-align:${d}`);
+    const c = o("letterSpacing");
+    c && c !== "normal" && t.push(`letter-spacing:${c}`);
+    const h = e.fontFamily;
+    return typeof h == "string" ? t.push(`font-family:${h}`) : h && typeof h == "object" && t.push(`font-family:${h.value || "inherit"}`), t.push("word-break:break-word", "outline:none", "min-height:1em"), t.join(";");
+  }
 };
-_.styles = $`
+D.styles = k`
     :host {
       display: block; position: relative; cursor: pointer;
       transition: outline 0.15s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
     }
     :host(.selected) { outline: 2px solid #3b82f6; outline-offset: -1px; }
     :host(.hovered:not(.selected)) { outline: 2px dashed #93c5fd; outline-offset: -1px; }
+    :host(.editing) { outline: 2px solid #8b5cf6; outline-offset: -1px; cursor: text; }
     :host(.just-dropped) {
       animation: dropIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
     }
-    :host(.hidden-in-view) {
-      opacity: 0.3;
-      position: relative;
-    }
+    :host(.hidden-in-view) { opacity: 0.3; position: relative; }
     .hidden-badge {
       position: absolute; top: 4px; right: 4px; z-index: 5;
       background: #f59e0b; color: white; font-size: 10px; font-weight: 600;
@@ -1599,34 +1838,45 @@ _.styles = $`
       display: none; position: absolute; top: -28px; right: 4px;
       background: #3b82f6; border-radius: 4px; padding: 2px; gap: 2px; z-index: 10;
     }
-    :host(.selected) .action-bar { display: flex; }
+    :host(.selected:not(.editing)) .action-bar { display: flex; }
     .action-btn {
       background: none; border: none; color: white; cursor: pointer;
       padding: 2px 6px; font-size: 12px; line-height: 1; border-radius: 2px;
     }
     .action-btn:hover { background: rgba(255,255,255,0.2); }
     .content-wrapper { position: relative; }
+    .inline-editable {
+      outline: none;
+      cursor: text;
+      min-height: 1em;
+    }
+    .inline-editable:focus {
+      outline: none;
+    }
   `;
-W([
+O([
   b({ attribute: !1 })
-], _.prototype, "content", 2);
-W([
+], D.prototype, "content", 2);
+O([
   b({ attribute: !1 })
-], _.prototype, "store", 1);
-W([
+], D.prototype, "store", 1);
+O([
   b({ attribute: !1 })
-], _.prototype, "toolRegistry", 2);
-_ = W([
-  k("me-content-renderer")
-], _);
-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;
+], D.prototype, "toolRegistry", 2);
+O([
+  pt()
+], D.prototype, "editing", 2);
+D = O([
+  C("me-content-renderer")
+], D);
+var Nt = Object.defineProperty, qt = Object.getOwnPropertyDescriptor, H = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? qt(t, o) : t, s = e.length - 1, r; s >= 0; s--)
+    (r = e[s]) && (i = (n ? r(t, o, i) : r(i)) || i);
+  return n && i && Nt(t, o, i), i;
 };
-let w = class extends v {
+let S = class extends $ {
   constructor() {
-    super(...arguments), this.storeCtrl = new S(this, ["design"]), this.widthPercent = 100;
+    super(...arguments), this.storeCtrl = new T(this, ["design"]), this.widthPercent = 100;
   }
   set store(e) {
     this.storeCtrl.setStore(e);
@@ -1636,13 +1886,13 @@ let w = class extends v {
   }
   render() {
     const e = this.column.values.padding || "0px", t = this.column.values.backgroundColor || "transparent", o = this.column.contents;
-    return this.dataset.columnId = this.column.id, this.style.width = `${this.widthPercent}%`, this.style.padding = e, this.style.backgroundColor = t, this.style.verticalAlign = "top", this.style.boxSizing = "border-box", o.length === 0 ? c`
+    return this.dataset.columnId = this.column.id, this.style.width = `${this.widthPercent}%`, this.style.padding = e, this.style.backgroundColor = t, this.style.verticalAlign = "top", this.style.boxSizing = "border-box", o.length === 0 ? p`
         <div class="empty-column" data-column-id=${this.column.id}>
           Drag content here
         </div>
-      ` : c`
+      ` : p`
       ${o.map(
-      (n) => c`
+      (n) => p`
           <me-content-renderer
             .content=${n}
             .store=${this.store}
@@ -1653,7 +1903,7 @@ let w = class extends v {
     `;
   }
 };
-w.styles = $`
+S.styles = k`
     :host {
       display: block;
       min-height: 40px;
@@ -1683,29 +1933,29 @@ w.styles = $`
       opacity: 1;
     }
   `;
-A([
+H([
   b({ attribute: !1 })
-], w.prototype, "column", 2);
-A([
+], S.prototype, "column", 2);
+H([
   b({ attribute: !1 })
-], w.prototype, "store", 1);
-A([
+], S.prototype, "store", 1);
+H([
   b({ attribute: !1 })
-], w.prototype, "toolRegistry", 2);
-A([
+], S.prototype, "toolRegistry", 2);
+H([
   b({ type: Number })
-], w.prototype, "widthPercent", 2);
-w = A([
-  k("me-column-renderer")
-], w);
-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;
+], S.prototype, "widthPercent", 2);
+S = H([
+  C("me-column-renderer")
+], S);
+var Gt = Object.defineProperty, Kt = Object.getOwnPropertyDescriptor, F = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? Kt(t, o) : t, s = e.length - 1, r; s >= 0; s--)
+    (r = e[s]) && (i = (n ? r(t, o, i) : r(i)) || i);
+  return n && i && Gt(t, o, i), i;
 };
-let D = class extends v {
+let R = class extends $ {
   constructor() {
-    super(...arguments), this.storeCtrl = new S(this, ["design", "viewMode"]);
+    super(...arguments), this.storeCtrl = new T(this, ["design", "viewMode"]);
   }
   set store(e) {
     this.storeCtrl.setStore(e);
@@ -1730,10 +1980,10 @@ let D = class extends v {
     e.stopPropagation(), this.store.removeRow(this.row.id);
   }
   render() {
-    if (!this.store) return 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>` : ""}
+    if (!this.store) return p``;
+    const { row: e, store: t, toolRegistry: o } = this, n = e.values.backgroundColor || "transparent", i = e.values.columnsBackgroundColor || "transparent", s = e.values.padding || "0px", r = e.cells.reduce((x, m) => x + m, 0), a = e.values.backgroundImage, d = typeof a == "object" && a?.url ? a.url : "", c = d ? `background-image:url('${d}');background-size:${a?.cover ? "cover" : "contain"};background-position:${a?.center ? "center" : "top left"};background-repeat:${a?.repeat ? "repeat" : "no-repeat"};` : "", h = t.viewMode, g = !!e.values.hideDesktop, u = !!e.values.hideMobile, f = h === "desktop" && g || h === "mobile" && u, y = g ? "Hidden on desktop" : u ? "Hidden on mobile" : "";
+    return this.classList.toggle("hidden-in-view", f), this.setAttribute("draggable", "true"), this.dataset.rowId = e.id, p`
+      ${f ? p`<div class="row-hidden-badge">${y}</div>` : ""}
       <div class="row-actions">
         <button class="row-action-btn" @click=${this.handleMoveUp} title="Move Up">
           <svg viewBox="0 0 24 24"><path d="M12 19V5"/><path d="m5 12 7-7 7 7"/></svg>
@@ -1750,16 +2000,16 @@ let D = class extends v {
       </div>
       <div
         class="row-wrapper"
-        style="background-color:${n};padding:${r};${p}"
+        style="background-color:${n};padding:${s};${c}"
       >
-        ${e.columns.map((f, y) => {
-      const R = e.cells[y] / s * 100;
-      return c`
+        ${e.columns.map((x, m) => {
+      const w = e.cells[m] / r * 100;
+      return p`
             <me-column-renderer
-              .column=${f}
+              .column=${x}
               .store=${t}
               .toolRegistry=${o}
-              .widthPercent=${R}
+              .widthPercent=${w}
               style="background-color:${i};"
             ></me-column-renderer>
           `;
@@ -1768,7 +2018,7 @@ let D = class extends v {
     `;
   }
 };
-D.styles = $`
+R.styles = k`
     :host {
       display: block;
       position: relative;
@@ -1832,26 +2082,26 @@ D.styles = $`
       stroke-linejoin: round;
     }
   `;
-U([
+F([
   b({ attribute: !1 })
-], D.prototype, "row", 2);
-U([
+], R.prototype, "row", 2);
+F([
   b({ attribute: !1 })
-], D.prototype, "store", 1);
-U([
+], R.prototype, "store", 1);
+F([
   b({ attribute: !1 })
-], D.prototype, "toolRegistry", 2);
-D = U([
-  k("me-row-renderer")
-], D);
-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;
+], R.prototype, "toolRegistry", 2);
+R = F([
+  C("me-row-renderer")
+], R);
+var Yt = Object.defineProperty, Jt = Object.getOwnPropertyDescriptor, J = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? Jt(t, o) : t, s = e.length - 1, r; s >= 0; s--)
+    (r = e[s]) && (i = (n ? r(t, o, i) : r(i)) || i);
+  return n && i && Yt(t, o, i), i;
 };
-let T = class extends v {
+let M = class extends $ {
   constructor() {
-    super(...arguments), this.storeCtrl = new S(this, ["design", "viewMode"]);
+    super(...arguments), this.storeCtrl = new T(this, ["design", "viewMode"]);
   }
   set store(e) {
     this.storeCtrl.setStore(e);
@@ -1867,7 +2117,7 @@ let T = class extends v {
   }
   render() {
     const e = this.store.getRows(), t = this.store.getBodyValues(), o = t.contentWidth || "600px", n = t.backgroundColor || "#e7e7e7", i = this.store.viewMode;
-    return c`
+    return p`
       <div class="view-toggle">
         <button
           class="view-btn ${i === "desktop" ? "active" : ""}"
@@ -1884,15 +2134,15 @@ let T = class extends v {
         style="max-width:${i === "mobile" ? "375px" : o};background-color:${n};"
         @click=${this.handleCanvasClick}
       >
-        ${e.length === 0 ? c`
+        ${e.length === 0 ? p`
               <div class="empty-canvas">
                 <div class="empty-icon">&#9776;</div>
                 <div>Drag a content block here</div>
               </div>
             ` : e.map(
-      (s) => c`
+      (r) => p`
                 <me-row-renderer
-                  .row=${s}
+                  .row=${r}
                   .store=${this.store}
                   .toolRegistry=${this.toolRegistry}
                 ></me-row-renderer>
@@ -1902,7 +2152,7 @@ let T = class extends v {
     `;
   }
 };
-T.styles = $`
+M.styles = k`
     :host {
       display: block;
       flex: 1;
@@ -1956,21 +2206,21 @@ T.styles = $`
       color: white;
     }
   `;
-K([
+J([
   b({ attribute: !1 })
-], T.prototype, "store", 1);
-K([
+], M.prototype, "store", 1);
+J([
   b({ attribute: !1 })
-], T.prototype, "toolRegistry", 2);
-T = K([
-  k("me-editor-canvas")
-], 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;
+], M.prototype, "toolRegistry", 2);
+M = J([
+  C("me-editor-canvas")
+], M);
+var Xt = Object.defineProperty, Qt = Object.getOwnPropertyDescriptor, dt = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? Qt(t, o) : t, s = e.length - 1, r; s >= 0; s--)
+    (r = e[s]) && (i = (n ? r(t, o, i) : r(i)) || i);
+  return n && i && Xt(t, o, i), i;
 };
-const q = [
+const G = [
   // System / email-safe fonts
   { label: "Arial", value: "arial,helvetica,sans-serif", url: "" },
   { label: "Helvetica", value: "helvetica,sans-serif", url: "" },
@@ -1991,9 +2241,9 @@ const q = [
   { 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 {
+let A = class extends $ {
   constructor() {
-    super(...arguments), this.storeCtrl = new S(this, ["design"]);
+    super(...arguments), this.storeCtrl = new T(this, ["design"]);
   }
   set store(e) {
     this.storeCtrl.setStore(e);
@@ -2009,7 +2259,7 @@ let L = class extends v {
     this.store.updateBodyValues({ linkStyle: { ...o, [e]: t } });
   }
   updateFontFamily(e) {
-    const t = q.find((n) => n.value === e), o = { label: t?.label || e, value: e };
+    const t = G.find((n) => n.value === e), o = { label: t?.label || e, value: e };
     if (t?.url) {
       o.url = t.url;
       const n = `emabuild-font-${e.replace(/[^a-z]/gi, "")}`;
@@ -2022,7 +2272,7 @@ let L = class extends v {
   }
   render() {
     const e = this.store.getBodyValues();
-    return c`
+    return p`
       ${this.renderColorField("Background Color", e.backgroundColor || "#e7e7e7", (t) => this.update_("backgroundColor", t))}
 
       <p class="section-title" style="margin-top:16px;">Content</p>
@@ -2034,7 +2284,7 @@ let L = class extends v {
       <div class="field">
         <label class="field-label">Content Align</label>
         <div class="align-group">
-          ${["left", "center", "right"].map((t) => c`
+          ${["left", "center", "right"].map((t) => p`
             <button class="align-btn ${e.contentAlign === t ? "active" : ""}"
               @click=${() => this.update_("contentAlign", t)}>${t}</button>
           `)}
@@ -2046,10 +2296,10 @@ let L = class extends v {
         <label class="field-label">Font Family</label>
         <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>`)}
+            ${G.filter((t) => !t.url).map((t) => p`<option value=${t.value} ?selected=${e.fontFamily?.value === t.value}>${t.label}</option>`)}
           </optgroup>
           <optgroup label="Google Fonts">
-            ${q.filter((t) => !!t.url).map((t) => c`<option value=${t.value} ?selected=${e.fontFamily?.value === t.value}>${t.label}</option>`)}
+            ${G.filter((t) => !!t.url).map((t) => p`<option value=${t.value} ?selected=${e.fontFamily?.value === t.value}>${t.label}</option>`)}
           </optgroup>
         </select>
       </div>
@@ -2076,7 +2326,7 @@ let L = class extends v {
   }
   /** Reusable color field (swatch + hex input) */
   renderColorField(e, t, o) {
-    return c`
+    return p`
       <div class="field">
         <label class="field-label">${e}</label>
         <div class="color-row">
@@ -2087,7 +2337,7 @@ let L = class extends v {
     `;
   }
 };
-L.styles = $`
+A.styles = k`
     :host { display: block; }
     .section-title {
       font-size: 11px; font-weight: 600; text-transform: uppercase;
@@ -2112,20 +2362,20 @@ L.styles = $`
     }
     .align-btn.active { border-color: #3b82f6; background: #eff6ff; color: #3b82f6; }
   `;
-st([
+dt([
   b({ attribute: !1 })
-], L.prototype, "store", 1);
-L = st([
-  k("me-body-settings")
-], L);
-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;
+], A.prototype, "store", 1);
+A = dt([
+  C("me-body-settings")
+], A);
+var Zt = Object.defineProperty, te = Object.getOwnPropertyDescriptor, X = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? te(t, o) : t, s = e.length - 1, r; s >= 0; s--)
+    (r = e[s]) && (i = (n ? r(t, o, i) : r(i)) || i);
+  return n && i && Zt(t, o, i), i;
 };
-let I = class extends v {
+let P = class extends $ {
   constructor() {
-    super(...arguments), this.storeCtrl = new S(this, ["activeTab"]);
+    super(...arguments), this.storeCtrl = new T(this, ["activeTab"]);
   }
   set store(e) {
     this.storeCtrl.setStore(e);
@@ -2145,7 +2395,7 @@ let I = class extends v {
   }
   render() {
     const e = this.store.activeTab, t = this.toolRegistry.getAllMeta();
-    return c`
+    return p`
       <div class="tabs">
         <button class="tab ${e === "content" ? "active" : ""}" @click=${() => this.store.setActiveTab("content")}>Content</button>
         <button class="tab ${e === "blocks" ? "active" : ""}" @click=${() => this.store.setActiveTab("blocks")}>Blocks</button>
@@ -2160,17 +2410,17 @@ let I = class extends v {
     `;
   }
   renderContentTab(e) {
-    return c`
+    return p`
       <p class="section-title">Content</p>
       <div class="tool-grid">
         ${e.map(
-      (t) => c`
+      (t) => p`
             <div
               class="tool-item"
               draggable="true"
               @dragstart=${(o) => this.handleDragStart(o, t.name)}
             >
-              <div class="tool-icon">${H(t.icon)}</div>
+              <div class="tool-icon">${U(t.icon)}</div>
               <span>${t.label}</span>
             </div>
           `
@@ -2190,7 +2440,7 @@ let I = class extends v {
   }
   renderLayoutOption(e, t) {
     const o = e.reduce((n, i) => n + i, 0);
-    return c`
+    return p`
       <div
         class="layout-item"
         draggable="true"
@@ -2199,23 +2449,23 @@ let I = class extends v {
         title=${t}
       >
         ${e.map(
-      (n) => c`<div class="layout-col" style="width:${n / o * 100}%;"></div>`
+      (n) => p`<div class="layout-col" style="width:${n / o * 100}%;"></div>`
     )}
       </div>
     `;
   }
   renderBlocksTab() {
-    return c`
+    return p`
       <p style="color:#9ca3af;font-size:13px;text-align:center;margin-top:40px;">
         No saved blocks yet.<br/>Select a row in the editor and save it as a block.
       </p>
     `;
   }
   renderBodyTab() {
-    return c`<me-body-settings .store=${this.store}></me-body-settings>`;
+    return p`<me-body-settings .store=${this.store}></me-body-settings>`;
   }
 };
-I.styles = $`
+P.styles = k`
     :host {
       display: flex;
       flex-direction: column;
@@ -2349,18 +2599,18 @@ I.styles = $`
       transition: background 0.2s ease;
     }
   `;
-J([
+X([
   b({ attribute: !1 })
-], I.prototype, "store", 1);
-J([
+], P.prototype, "store", 1);
+X([
   b({ attribute: !1 })
-], I.prototype, "toolRegistry", 2);
-I = J([
-  k("me-editor-sidebar")
-], I);
-function Nt(e, t, o) {
+], P.prototype, "toolRegistry", 2);
+P = X([
+  C("me-editor-sidebar")
+], P);
+function ee(e, t, o) {
   const n = e && /^#[0-9a-fA-F]{3,8}$/.test(e) ? e : "#000000";
-  return c`
+  return p`
     <div class="prop-row">
       <label class="prop-label">${o}</label>
       <div class="prop-color">
@@ -2372,23 +2622,23 @@ function Nt(e, t, o) {
     </div>
   `;
 }
-function qt(e, t, o, n) {
+function oe(e, t, o, n) {
   const i = n?.options || [];
-  return c`
+  return p`
     <div class="prop-row">
       <label class="prop-label">${o}</label>
-      <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 class="prop-input" @change=${(s) => t(s.target.value)}>
+        ${i.map((s) => p`<option value=${s.value} ?selected=${e === s.value}>${s.label}</option>`)}
       </select>
     </div>
   `;
 }
-function Gt(e, t, o) {
-  return c`
+function ne(e, t, o) {
+  return p`
     <div class="prop-row">
       <label class="prop-label">${o}</label>
       <div style="display:flex;gap:2px;">
-        ${["left", "center", "right"].map((n) => c`
+        ${["left", "center", "right"].map((n) => p`
           <button
             style="flex:1;padding:6px;border:1px solid ${e === n ? "#3b82f6" : "#d1d5db"};background:${e === n ? "#eff6ff" : "white"};border-radius:4px;cursor:pointer;font-size:11px;text-transform:capitalize;color:${e === n ? "#3b82f6" : "#6b7280"};"
             @click=${() => t(n)}
@@ -2398,29 +2648,29 @@ function Gt(e, t, o) {
     </div>
   `;
 }
-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 ie(e) {
+  const t = (e || "0px").split(/\s+/).map((r) => parseInt(r) || 0), o = t[0], n = t[1] ?? o, i = t[2] ?? o, s = t[3] ?? n;
+  return [o, n, i, s];
 }
-function Kt(e, t, o, n) {
+function se(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 Jt(e, t, o) {
-  const [n, i, r, s] = Yt(e), l = (p, h, u, g) => t(Kt(p, h, u, g));
-  return c`
+function re(e, t, o) {
+  const [n, i, s, r] = ie(e), a = (c, h, g, u) => t(se(c, h, g, u));
+  return p`
     <div class="prop-row">
       <label class="prop-label">${o}</label>
       <div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;">
         ${[
-    { label: "T", val: n, change: (p) => l(p, i, r, s) },
-    { label: "R", val: i, change: (p) => l(n, p, r, s) },
-    { label: "B", val: r, change: (p) => l(n, i, p, s) },
-    { label: "L", val: s, change: (p) => l(n, i, r, p) }
-  ].map((p) => c`
+    { label: "T", val: n, change: (c) => a(c, i, s, r) },
+    { label: "R", val: i, change: (c) => a(n, c, s, r) },
+    { label: "B", val: s, change: (c) => a(n, i, c, r) },
+    { label: "L", val: r, change: (c) => a(n, i, s, c) }
+  ].map((c) => p`
           <div style="display:flex;align-items:center;gap:4px;">
-            <span style="font-size:10px;color:#9ca3af;width:12px;">${p.label}</span>
-            <input type="number" .value=${p.val} min="0"
-              @change=${(h) => p.change(parseInt(h.target.value) || 0)}
+            <span style="font-size:10px;color:#9ca3af;width:12px;">${c.label}</span>
+            <input type="number" .value=${c.val} min="0"
+              @change=${(h) => c.change(parseInt(h.target.value) || 0)}
               style="flex:1;padding:4px 6px;border:1px solid #d1d5db;border-radius:3px;font-size:12px;width:50px;" />
           </div>
         `)}
@@ -2428,8 +2678,8 @@ function Jt(e, t, o) {
     </div>
   `;
 }
-function Xt(e, t, o) {
-  return c`
+function le(e, t, o) {
+  return p`
     <div class="prop-row">
       <div class="prop-toggle">
         <input type="checkbox" .checked=${!!e}
@@ -2439,8 +2689,8 @@ function Xt(e, t, o) {
     </div>
   `;
 }
-function Qt(e, t, o) {
-  return c`
+function ae(e, t, o) {
+  return p`
     <div class="prop-row">
       <label class="prop-label">${o}</label>
       <input class="prop-input" type="text" .value=${e ?? ""}
@@ -2448,8 +2698,8 @@ function Qt(e, t, o) {
     </div>
   `;
 }
-function Zt(e, t, o) {
-  return c`
+function de(e, t, o) {
+  return p`
     <div class="prop-row">
       <label class="prop-label">${o}</label>
       <textarea class="prop-input"
@@ -2460,14 +2710,14 @@ function Zt(e, t, o) {
     </div>
   `;
 }
-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;
+var ce = Object.defineProperty, pe = Object.getOwnPropertyDescriptor, Q = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? pe(t, o) : t, s = e.length - 1, r; s >= 0; s--)
+    (r = e[s]) && (i = (n ? r(t, o, i) : r(i)) || i);
+  return n && i && ce(t, o, i), i;
 };
-let P = class extends v {
+let E = class extends $ {
   constructor() {
-    super(...arguments), this.storeCtrl = new S(this, ["design", "selection"]);
+    super(...arguments), this.storeCtrl = new T(this, ["design", "selection"]);
   }
   set store(e) {
     this.storeCtrl.setStore(e);
@@ -2484,21 +2734,21 @@ let P = class extends v {
   render() {
     const e = this.store.selectedId;
     if (!e)
-      return c`<div class="no-selection">Select an element to edit its properties</div>`;
+      return p`<div class="no-selection">Select an element to edit its properties</div>`;
     const t = this.store.findContent(e);
     if (!t)
-      return c`<div class="no-selection">Select an element to edit its properties</div>`;
+      return p`<div class="no-selection">Select an element to edit its properties</div>`;
     const o = this.toolRegistry.get(t.type);
-    return o ? c`
+    return o ? p`
       <div class="header">
         <p class="header-title">${o.label}</p>
         <p class="header-type">${t.type}</p>
       </div>
       ${Object.entries(o.options).map(([, n]) => this.renderGroup(t, n))}
-    ` : c`<div class="no-selection">Unknown tool: ${t.type}</div>`;
+    ` : p`<div class="no-selection">Unknown tool: ${t.type}</div>`;
   }
   renderGroup(e, t) {
-    return c`
+    return p`
       <div class="group">
         <div class="group-title">${t.title}</div>
         <div class="group-body">
@@ -2514,24 +2764,24 @@ let P = class extends v {
     const n = e.values[t] ?? o.defaultValue, i = this.onChange(e.id, t);
     switch (o.widget) {
       case "color_picker":
-        return Nt(n, i, o.label);
+        return ee(n, i, o.label);
       case "toggle":
-        return Xt(n, i, o.label);
+        return le(n, i, o.label);
       case "rich_text":
-        return Zt(n, i, o.label);
+        return de(n, i, o.label);
       case "dropdown":
-        return qt(n, i, o.label, o.widgetParams);
+        return oe(n, i, o.label, o.widgetParams);
       case "alignment":
-        return Gt(n, i, o.label);
+        return ne(n, i, o.label);
       case "padding":
-        return Jt(n, i, o.label);
+        return re(n, i, o.label);
       case "text":
       default:
-        return Qt(n, i, o.label);
+        return ae(n, i, o.label);
     }
   }
 };
-P.styles = $`
+E.styles = k`
     :host {
       display: flex; flex-direction: column; width: 300px; min-width: 300px;
       background: #fff; border-left: 1px solid #e5e7eb;
@@ -2565,26 +2815,26 @@ 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; }
   `;
-X([
+Q([
   b({ attribute: !1 })
-], P.prototype, "store", 1);
-X([
+], E.prototype, "store", 1);
+Q([
   b({ attribute: !1 })
-], P.prototype, "toolRegistry", 2);
-P = X([
-  k("me-property-panel")
-], P);
-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;
+], E.prototype, "toolRegistry", 2);
+E = Q([
+  C("me-property-panel")
+], E);
+var he = Object.defineProperty, ue = Object.getOwnPropertyDescriptor, ct = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? ue(t, o) : t, s = e.length - 1, r; s >= 0; s--)
+    (r = e[s]) && (i = (n ? r(t, o, i) : r(i)) || i);
+  return n && i && he(t, o, i), i;
 };
-let B = class extends v {
+let B = class extends $ {
   constructor() {
-    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) => {
+    super(...arguments), this.options = {}, this.store = new wt(), this.toolRegistry = new vt(), 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";
+        const s = i?.tagName;
+        return s === "INPUT" || s === "TEXTAREA" || s === "SELECT";
       });
       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));
     };
@@ -2593,7 +2843,7 @@ let B = class extends v {
     super.connectedCallback(), this.registerBuiltInTools(), this.applyOptions(), this.setAttribute("tabindex", "0"), this.addEventListener("keydown", this._handleKeydown);
   }
   firstUpdated() {
-    this.dragManager = new yt(this.store, this.toolRegistry, this.shadowRoot), this.dragManager.attach(), this.store.events.on("design:loaded", (e) => {
+    this.dragManager = new $t(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 }));
@@ -2613,18 +2863,18 @@ let B = class extends v {
   }
   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));
+    for (const s of o.body.rows)
+      for (const r of s.columns)
+        for (const a of r.contents)
+          n.add(a.type);
+    const i = Array.from(n).filter((s) => !this.toolRegistry.isLoaded(s)).map((s) => this.toolRegistry.ensureLoaded(s));
     i.length > 0 ? Promise.all(i).then(() => this.doExport(o, e, t)) : this.doExport(o, e, t);
   }
   doExport(e, t, o) {
     const n = /* @__PURE__ */ new Map();
     for (const i of this.toolRegistry.getAll())
-      n.set(i.name, (r, s) => i.renderer.renderHtml(r, s));
-    t(Pt(e, n, o));
+      n.set(i.name, (s, r) => i.renderer.renderHtml(s, r));
+    t(Ht(e, n, o));
   }
   async exportHtmlAsync(e) {
     return new Promise((t) => this.exportHtml(t, e));
@@ -2660,22 +2910,22 @@ let B = class extends v {
    */
   preloadLazyTools() {
     const e = window.requestIdleCallback ?? ((t) => setTimeout(t, 1e3));
-    for (const { meta: t } of it)
+    for (const { meta: t } of st)
       e(() => {
         this.toolRegistry.ensureLoaded(t.name);
       });
   }
   registerBuiltInTools() {
-    for (const e of Rt)
+    for (const e of Mt)
       this.toolRegistry.register(e);
-    for (const { meta: e, loader: t } of it)
+    for (const { meta: e, loader: t } of st)
       this.toolRegistry.registerLazy(e, t);
   }
   applyOptions() {
     this.options.design && this.store.loadDesign(this.options.design);
   }
   render() {
-    return c`
+    return p`
       <me-editor-sidebar
         .store=${this.store}
         .toolRegistry=${this.toolRegistry}
@@ -2691,7 +2941,7 @@ let B = class extends v {
     `;
   }
 };
-B.styles = $`
+B.styles = k`
     :host {
       display: flex;
       width: 100%;
@@ -2706,31 +2956,32 @@ B.styles = $`
     }
     * { box-sizing: border-box; }
   `;
-lt([
+ct([
   b({ type: Object })
 ], B.prototype, "options", 2);
-B = lt([
-  k("mail-editor")
+B = ct([
+  C("mail-editor")
 ], B);
-function C(e, t) {
+function _(e, t) {
   customElements.get(e) || customElements.define(e, t);
 }
-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", I);
-C("me-body-settings", L);
-C("me-property-panel", P);
-const ae = customElements.get("mail-editor") !== void 0;
+_("mail-editor", B);
+_("me-editor-canvas", M);
+_("me-row-renderer", R);
+_("me-column-renderer", S);
+_("me-content-renderer", D);
+_("me-editor-sidebar", P);
+_("me-body-settings", A);
+_("me-property-panel", E);
+_("me-inline-toolbar", V);
+const xe = customElements.get("mail-editor") !== void 0;
 export {
-  ae as E,
+  xe as E,
   B as M,
-  xt as T,
-  mt as a,
-  V as e,
-  le as j,
-  a as s
+  vt as T,
+  wt as a,
+  L as e,
+  me as j,
+  l as s
 };
-//# sourceMappingURL=index-BQJRD2VW.js.map
+//# sourceMappingURL=index-BTE3G6Ph.js.map