@emabuild/core 0.1.4 → 0.2.0

package/dist/{index-C_nXnIR5.js → index-CpMbWdgn.js}

@@ -1,7 +1,8 @@
 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 { property as b, customElement as C, state as ht } from "lit/decorators.js";
 import { unsafeHTML as U } from "lit/directives/unsafe-html.js";
-function ht() {
+import { styleMap as ut } from "lit/directives/style-map.js";
+function gt() {
   const e = {};
   return {
     getCounters() {
@@ -18,7 +19,7 @@ function ht() {
     }
   };
 }
-class ut {
+class ft {
   constructor() {
     this.listeners = /* @__PURE__ */ new Map();
   }
@@ -45,7 +46,7 @@ class ut {
     t ? this.listeners.delete(t) : this.listeners.clear();
   }
 }
-class gt {
+class bt {
   constructor(t = 50) {
     this.undoStack = [], this.redoStack = [], this.maxHistory = t;
   }
@@ -78,7 +79,7 @@ class gt {
     this.undoStack = [], this.redoStack = [];
   }
 }
-function ft() {
+function mt() {
   return {
     counters: { u_row: 0, u_column: 0 },
     body: {
@@ -123,7 +124,7 @@ function ft() {
     schemaVersion: 16
   };
 }
-function bt(e, t) {
+function xt(e, t) {
   const o = e.next("u_row"), n = t.map(() => {
     const i = e.next("u_column");
     return {
@@ -156,7 +157,7 @@ function bt(e, t) {
     }
   };
 }
-function mt(e, t, o = {}) {
+function yt(e, t, o = {}) {
   const n = e.next(`u_content_${t}`), i = `u_content_${t}_${n}`;
   return {
     id: i,
@@ -188,21 +189,21 @@ function W(e, t) {
       if (i) return i;
     }
 }
-function xt(e, t) {
+function wt(e, t) {
   for (const o of e.body.rows)
     for (const n of o.columns)
       if (n.contents.some((i) => i.id === t)) return n;
 }
-function yt(e, t) {
+function vt(e, t) {
   for (const o of e.body.rows)
     if (o.columns.some((n) => n.id === t)) return o;
 }
 function q(e, t) {
   return e.body.rows.findIndex((o) => o.id === t);
 }
-class wt {
+class $t {
   constructor() {
-    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();
+    this.history = new bt(), this.counterManager = gt(), this.subscribers = /* @__PURE__ */ new Set(), this.channelSubscribers = /* @__PURE__ */ new Map(), this.events = new ft(), this._selectedId = null, this._hoveredId = null, this._viewMode = "desktop", this._activeTab = "content", this.design = mt();
   }
   // ── Subscriptions ──────────────────────────────────────────
   /** Subscribe to ALL state changes (legacy). Returns an unsubscribe function. */
@@ -329,8 +330,8 @@ class wt {
     const n = structuredClone(o), i = this.counterManager.next("u_row");
     n.id = `u_row_${i}`, n.values._meta = { htmlID: n.id, htmlClassNames: "u_row" };
     for (const r of n.columns) {
-      const l = this.counterManager.next("u_column");
-      r.id = `u_column_${l}`, r.values._meta = { htmlID: r.id, htmlClassNames: "u_column" };
+      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}` };
@@ -385,10 +386,10 @@ class wt {
     if (!i) return;
     this.history.push(this.design);
     for (const r of this.design.body.rows)
-      for (const l of r.columns) {
-        const d = l.contents.findIndex((c) => c.id === t);
+      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;
         }
       }
@@ -404,8 +405,8 @@ class wt {
           const s = i.contents.findIndex((r) => r.id === t);
           if (s !== -1) {
             this.history.push(this.design);
-            const r = structuredClone(o), l = this.counterManager.next(`u_content_${o.type}`);
-            r.id = `u_content_${o.type}_${l}`, 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);
+            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;
           }
         }
@@ -426,20 +427,20 @@ class wt {
     return W(this.design, t);
   }
   findParentColumn(t) {
-    return xt(this.design, t);
+    return wt(this.design, t);
   }
   findParentRow(t) {
-    return yt(this.design, t);
+    return vt(this.design, t);
   }
   // ── Factory Methods (delegate to design-factory) ───────────
   /** Create a new row with the given column layout */
   createRow(t) {
-    const o = bt(this.counterManager, t);
+    const o = xt(this.counterManager, t);
     return this.syncCounters(), o;
   }
   /** Create a new content block for the given tool type */
   createContent(t, o = {}) {
-    const n = mt(this.counterManager, t, o);
+    const n = yt(this.counterManager, t, o);
     return this.syncCounters(), n;
   }
   // ── Private Helpers ────────────────────────────────────────
@@ -450,7 +451,7 @@ class wt {
     this.events.emit("design:updated", { type: t, item: o });
   }
 }
-class vt {
+class kt {
   constructor() {
     this.tools = /* @__PURE__ */ new Map(), this.lazyLoaders = /* @__PURE__ */ new Map(), this.lazyMeta = /* @__PURE__ */ new Map(), this.loadingPromises = /* @__PURE__ */ new Map();
   }
@@ -563,10 +564,10 @@ function Z(e) {
 function tt(e, t, o, n, i = "4px") {
   e.parentNode !== t && (e.remove(), t.appendChild(e));
   const r = (t instanceof ShadowRoot ? t.host : t).getBoundingClientRect();
-  let l;
-  o.length === 0 || n === 0 ? l = o.length === 0 ? 0 : o[0].getBoundingClientRect().top - r.top : n >= o.length ? l = o[o.length - 1].getBoundingClientRect().bottom - r.top : l = o[n].getBoundingClientRect().top - r.top, Object.assign(e.style, {
+  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"
@@ -588,11 +589,11 @@ function et(e, t) {
     n.matches?.(t) && o.push(n);
   }), o;
 }
-class $t {
+class Ct {
   constructor(t, o, n) {
     this.currentDrop = null, this.contentIndicator = null, this.rowIndicator = null, this.onDragOver = (i) => {
-      const s = i.dataTransfer?.types || [], r = s.includes("application/maileditor-tool"), l = s.includes("application/maileditor-layout"), d = s.includes("application/maileditor-content") || !!L.draggingContentId;
-      !r && !d && !l || (i.preventDefault(), i.dataTransfer.dropEffect = r || l ? "copy" : "move", l ? (this.currentDrop = this.findRowDropTarget(i.clientY), I(this.contentIndicator), this.showRowIndicator()) : (this.currentDrop = this.findContentDropTarget(i.clientX, i.clientY), I(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") || !!L.draggingContentId;
+      !r && !d && !a || (i.preventDefault(), i.dataTransfer.dropEffect = r || a ? "copy" : "move", a ? (this.currentDrop = this.findRowDropTarget(i.clientY), I(this.contentIndicator), this.showRowIndicator()) : (this.currentDrop = this.findContentDropTarget(i.clientX, i.clientY), I(this.rowIndicator), this.showContentIndicator()));
     }, this.onDrop = (i) => {
       i.preventDefault(), this.hideAllIndicators();
       const s = this.currentDrop, r = i.dataTransfer?.getData("application/maileditor-layout");
@@ -600,9 +601,9 @@ class $t {
         this.handleLayoutDrop(JSON.parse(r), s), this.reset();
         return;
       }
-      const l = i.dataTransfer?.getData("application/maileditor-tool");
-      if (l) {
-        this.handleToolDrop(l, s), 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") || L.draggingContentId;
@@ -649,8 +650,8 @@ class $t {
     if (n.length === 0) return { type: "row", rowIndex: 0, y: 0 };
     let i = Math.abs(t - n[0].getBoundingClientRect().top), s = { type: "row", rowIndex: 0, y: n[0].getBoundingClientRect().top };
     for (let r = 0; r < n.length; r++) {
-      const l = n[r].getBoundingClientRect().bottom, d = Math.abs(t - l);
-      d < i && (i = d, s = { type: "row", rowIndex: r + 1, y: l });
+      const a = n[r].getBoundingClientRect().bottom, d = Math.abs(t - a);
+      d < i && (i = d, s = { type: "row", rowIndex: r + 1, y: a });
     }
     return s;
   }
@@ -658,22 +659,22 @@ class $t {
     const n = et(this.root, "me-column-renderer");
     let i = null, s = 1 / 0;
     for (const r of n) {
-      const l = r.dataset.columnId;
-      if (!l || !r.shadowRoot) continue;
+      const a = r.dataset.columnId;
+      if (!a || !r.shadowRoot) continue;
       const d = r.getBoundingClientRect();
       if (t < d.left || t > d.right) continue;
       const c = Array.from(r.shadowRoot.querySelectorAll("me-content-renderer"));
       if (c.length === 0) {
         const u = Math.abs(o - (d.top + d.height / 2));
-        u < s && (s = u, i = { type: "content", columnId: l, contentIndex: 0, y: d.top + d.height / 2 });
+        u < s && (s = u, i = { type: "content", columnId: a, contentIndex: 0, y: d.top + d.height / 2 });
         continue;
       }
       const h = c[0].getBoundingClientRect().top;
       let g = Math.abs(o - h);
-      g < s && (s = g, i = { type: "content", columnId: l, contentIndex: 0, y: 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: l, contentIndex: u + 1, y: x });
+        const f = c[u].getBoundingClientRect(), w = c[u + 1]?.getBoundingClientRect(), x = w ? (f.bottom + w.top) / 2 : f.bottom;
+        g = Math.abs(o - x), g < s && (s = g, i = { type: "content", columnId: a, contentIndex: u + 1, y: x });
       }
     }
     return i;
@@ -706,7 +707,7 @@ class $t {
     this.currentDrop = null, L.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;
 }
@@ -723,7 +724,7 @@ function nt(e) {
   }
   return {};
 }
-function kt(e) {
+function _t(e) {
   const t = e.action;
   if (t && typeof t == "object") {
     const o = t.values;
@@ -733,8 +734,8 @@ function kt(e) {
     };
   }
   return {
-    href: a(e, "href"),
-    target: a(e, "target", "_blank")
+    href: l(e, "href"),
+    target: l(e, "target", "_blank")
   };
 }
 function it(e, t = "") {
@@ -743,9 +744,9 @@ function it(e, t = "") {
   const n = e.textJson;
   if (typeof n == "string")
     try {
-      const i = JSON.parse(n), s = [], r = (l) => {
-        typeof l.text == "string" && s.push(l.text), l.type === "linebreak" && s.push("<br/>");
-        const d = l.children;
+      const i = JSON.parse(n), s = [], r = (a) => {
+        typeof a.text == "string" && s.push(a.text), a.type === "linebreak" && s.push("<br/>");
+        const d = a.children;
         d && d.forEach(r);
       };
       if (r(i.root || i), s.length > 0) return s.join("");
@@ -761,15 +762,29 @@ function Y(e, t = "arial,helvetica,sans-serif") {
     if (s && typeof document < "u") {
       const r = `emabuild-font-${i.replace(/[^a-z]/gi, "")}`;
       if (!document.getElementById(r)) {
-        const l = document.createElement("link");
-        l.id = r, l.rel = "stylesheet", l.href = s, document.head.appendChild(l);
+        const a = document.createElement("link");
+        a.id = r, a.rel = "stylesheet", a.href = s, document.head.appendChild(a);
       }
     }
     return i;
   }
   return t;
 }
-function me(e, t) {
+function st(e) {
+  const t = e.buttonColors;
+  if (t && typeof t == "object") {
+    const o = t;
+    return {
+      bg: o.backgroundColor || l(e, "backgroundColor", "#3b82f6"),
+      color: o.color || l(e, "textColor", "#ffffff")
+    };
+  }
+  return {
+    bg: l(e, "backgroundColor", "#3b82f6"),
+    color: l(e, "textColor", "#ffffff")
+  };
+}
+function ve(e, t) {
   if (typeof e != "string") return t;
   try {
     return JSON.parse(e);
@@ -785,8 +800,8 @@ function z(e, t) {
   </td></tr></tbody>
 </table>`;
 }
-function Ct(e, t, o) {
-  const { bgColor: n, textColor: i, fontSize: s, fontWeight: r, borderRadius: l } = o, d = parseInt(l) || 0;
+function St(e, t, o) {
+  const { bgColor: n, textColor: i, fontSize: s, fontWeight: r, borderRadius: a } = o, d = parseInt(a) || 0;
   if (d <= 0) return "";
   const c = Math.round(d / 20 * 100);
   return `<!--[if mso]>
@@ -796,7 +811,7 @@ function Ct(e, t, o) {
   </v:roundrect>
   <![endif]-->`;
 }
-const _t = {
+const Dt = {
   name: "text",
   label: "Text",
   icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7V4h16v3"/><path d="M9 20h6"/><path d="M12 4v16"/></svg>',
@@ -859,19 +874,20 @@ 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%"), s = Y(e), r = a(e, "text");
+      const t = l(e, "backgroundColor", "transparent"), o = l(e, "color", "inherit"), n = l(e, "lineHeight", "140%"), i = l(e, "textAlign", "left"), s = Y(e), r = l(e, "text");
       return p`
-        <div style="padding:${t};background-color:${o};color:${n};line-height:${i};font-family:${s};word-break:break-word;">
+        <div style="background-color:${t};color:${o};line-height:${n};text-align:${i};font-family:${s};">
           ${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%"), s = a(e, "textAlign", "left"), r = a(e, "text"), l = o ? `background-color:${o};` : "", d = `<div style="font-size:14px;color:${n};line-height:${i};text-align:${s};">${r}</div>`;
-      return z(d, { padding: t, extraTdStyle: 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 z(d, { padding: t, extraTdStyle: a });
     }
   }
-}, Dt = {
+};
+const Rt = {
   name: "heading",
   label: "Heading",
   icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 12h12"/><path d="M6 4v16"/><path d="M18 4v16"/></svg>',
@@ -903,6 +919,7 @@ const _t = {
           defaultValue: "22px",
           widget: "dropdown",
           widgetParams: { options: [
+            { label: "12px", value: "12px" },
             { label: "14px", value: "14px" },
             { label: "16px", value: "16px" },
             { label: "18px", value: "18px" },
@@ -942,7 +959,12 @@ const _t = {
             { label: "200%", value: "200%" }
           ] }
         },
-        letterSpacing: { label: "Letter Spacing", defaultValue: "normal", widget: "text" }
+        letterSpacing: {
+          label: "Letter Spacing",
+          defaultValue: "0px",
+          widget: "number_unit",
+          widgetParams: { unit: "px", min: -5, max: 50, step: 0.1 }
+        }
       }
     },
     spacing: {
@@ -968,24 +990,29 @@ const _t = {
     textAlign: "left",
     fontWeight: "700",
     lineHeight: "140%",
-    letterSpacing: "normal",
+    letterSpacing: "0px",
     containerPadding: "10px"
   },
   renderer: {
     renderEditor(e) {
-      const t = a(e, "containerPadding", "10px"), o = a(e, "fontSize", "22px"), n = a(e, "color", "#000000"), i = a(e, "textAlign", "left"), s = a(e, "fontWeight", "700"), r = a(e, "lineHeight", "140%"), l = 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:${l};">
-          ${U(d)}
-        </div>
-      `;
+      const t = {
+        padding: l(e, "containerPadding", "10px"),
+        fontSize: l(e, "fontSize", "22px"),
+        color: l(e, "color", "#000000"),
+        textAlign: l(e, "textAlign", "left"),
+        fontWeight: l(e, "fontWeight", "700"),
+        lineHeight: l(e, "lineHeight", "140%"),
+        letterSpacing: l(e, "letterSpacing", "normal"),
+        fontFamily: Y(e)
+      }, o = it(e, "Heading");
+      return p`<div style=${ut(t)}>${U(o)}</div>`;
     },
     renderHtml(e) {
-      const t = a(e, "containerPadding", "10px"), o = a(e, "fontSize", "22px"), n = a(e, "color", "#000000"), i = a(e, "textAlign", "left"), s = a(e, "fontWeight", "700"), r = a(e, "lineHeight", "140%"), l = a(e, "letterSpacing", "normal"), d = Y(e), c = a(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:${l};font-family:${d};">${h}</${c}>`;
+      const t = l(e, "containerPadding", "10px"), o = l(e, "fontSize", "22px"), n = l(e, "color", "#000000"), i = l(e, "textAlign", "left"), s = l(e, "fontWeight", "700"), r = l(e, "lineHeight", "140%"), a = l(e, "letterSpacing", "normal"), d = Y(e), c = l(e, "headingType", "h1"), h = it(e, "Heading"), g = `<${c} style="margin:0;font-size:${o};color:${n};text-align:${i};font-weight:${s};line-height:${r};letter-spacing:${a};font-family:${d};">${h}</${c}>`;
       return z(g, { padding: t });
     }
   }
-}, St = {
+}, Tt = {
   name: "paragraph",
   label: "Paragraph",
   icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><line x1="3" y1="14" x2="17" y2="14"/></svg>',
@@ -1028,15 +1055,15 @@ const _t = {
   },
   renderer: {
     renderEditor(e) {
-      const t = a(e, "containerPadding", "10px"), o = a(e, "color", "#374151"), n = a(e, "lineHeight", "160%");
-      return p`<div style="padding:${t};color:${o};line-height:${n};word-break:break-word;">${U(a(e, "text"))}</div>`;
+      const t = l(e, "color", "#374151"), o = l(e, "lineHeight", "160%"), n = l(e, "textAlign", "left");
+      return p`<div style="color:${t};line-height:${o};text-align:${n};">${U(l(e, "text"))}</div>`;
     },
     renderHtml(e) {
-      const t = a(e, "containerPadding", "10px"), o = a(e, "color", "#374151"), n = a(e, "lineHeight", "160%"), i = a(e, "textAlign", "left"), s = a(e, "letterSpacing", "normal"), r = `<div style="font-size:14px;color:${o};line-height:${n};text-align:${i};letter-spacing:${s};word-wrap:break-word;">${a(e, "text")}</div>`;
+      const t = l(e, "containerPadding", "10px"), o = l(e, "color", "#374151"), n = l(e, "lineHeight", "160%"), i = l(e, "textAlign", "left"), s = l(e, "letterSpacing", "normal"), r = `<div style="font-size:14px;color:${o};line-height:${n};text-align:${i};letter-spacing:${s};word-wrap:break-word;">${l(e, "text")}</div>`;
       return z(r, { padding: t });
     }
   }
-}, Rt = {
+}, It = {
   name: "image",
   label: "Image",
   icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>',
@@ -1097,18 +1124,18 @@ const _t = {
   },
   renderer: {
     renderEditor(e) {
-      const t = a(e, "containerPadding", "10px"), o = ot(e.src), n = a(e, "alt"), s = nt(e.src).maxWidth || a(e, "width", "100%"), r = a(e, "borderRadius", "0px"), l = a(e, "textAlign", a(e, "align", "center"));
-      return o ? p`<div style="padding:${t};text-align:${l};"><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:${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 = ot(e.src), o = l(e, "alt"), i = nt(e.src).maxWidth || l(e, "width", "100%"), s = l(e, "borderRadius", "0px"), r = l(e, "textAlign", l(e, "align", "center"));
+      return t ? p`<div style="text-align:${r};"><img src=${t} alt=${o} style="display:inline-block;max-width:100%;width:${i};border-radius:${s};border:0;" /></div>` : p`<div style="text-align:${r};"><div style="background:#f1f5f9;border:2px dashed #cbd5e1;border-radius:8px;padding:40px 20px;text-align:center;color:#94a3b8;font-size:13px;">No image set. Enter a URL in the property panel.</div></div>`;
     },
     renderHtml(e, t) {
-      const o = a(e, "containerPadding", "10px"), n = ot(e.src), i = a(e, "alt"), s = kt(e), r = nt(e.src), l = r.maxWidth || a(e, "width", "100%"), d = a(e, "borderRadius", "0px"), c = a(e, "textAlign", a(e, "align", "center"));
+      const o = l(e, "containerPadding", "10px"), n = ot(e.src), i = l(e, "alt"), s = _t(e), r = nt(e.src), a = r.maxWidth || l(e, "width", "100%"), d = l(e, "borderRadius", "0px"), c = l(e, "textAlign", l(e, "align", "center"));
       let h;
-      l.includes("%") ? h = Math.round(t.columnWidth * (parseFloat(l) / 100)) : l === "auto" ? h = r.width || t.columnWidth : h = parseInt(l) || t.columnWidth;
+      a.includes("%") ? h = Math.round(t.columnWidth * (parseFloat(a) / 100)) : a === "auto" ? h = r.width || t.columnWidth : h = parseInt(a) || t.columnWidth;
       const g = d !== "0px" ? `border-radius:${d};` : "", u = `<img align="${c}" border="0" src="${n}" alt="${i}" title="${i}" style="display:block;border:0;height:auto;width:100%;max-width:${h}px;${g}" width="${h}" />`, f = s.href ? `<a href="${s.href}" target="${s.target}" style="text-decoration:none;">${u}</a>` : u;
       return z(f, { padding: o, align: c });
     }
   }
-}, Tt = {
+}, Mt = {
   name: "button",
   label: "Button",
   icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="10" rx="2"/><path d="M12 7v10"/><path d="m8 12 4-3 4 3"/></svg>',
@@ -1195,24 +1222,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"), s = a(e, "fontWeight", "700"), r = a(e, "borderRadius", "4px"), l = a(e, "buttonPadding", "10px 20px"), d = a(e, "text", "Click Me"), c = a(e, "textAlign", "center"), h = a(e, "buttonWidth", "auto"), g = a(e, "borderWidth", "0px"), u = a(e, "borderColor", o), f = g !== "0px" ? `border:${g} solid ${u};` : "border:none;", y = h === "auto" ? "display:inline-block;" : `display:block;width:${h};`;
+      const { bg: t, color: o } = st(e), n = l(e, "fontSize", "14px"), i = l(e, "fontWeight", "700"), s = l(e, "borderRadius", "4px"), r = l(e, "buttonPadding", l(e, "padding", "10px 20px")), a = l(e, "text", "Click Me"), d = l(e, "textAlign", "center"), c = l(e, "buttonWidth", "auto"), h = l(e, "borderWidth", "0px"), g = l(e, "borderColor", t), u = h !== "0px" ? `border:${h} solid ${g};` : "border:none;", f = c === "auto" ? "display:inline-block;" : `display:block;width:${c};`;
       return p`
-        <div style="padding:${t};text-align:${c};">
-          <a style="${y}background-color:${o};color:${n};font-size:${i};font-weight:${s};border-radius:${r};padding:${l};text-decoration:none;text-align:center;${f}cursor:pointer;font-family:arial,helvetica,sans-serif;">${d}</a>
+        <div style="text-align:${d};">
+          <a style="${f}background-color:${t};color:${o};font-size:${n};font-weight:${i};border-radius:${s};padding:${r};text-decoration:none;text-align:center;${u}cursor:pointer;font-family:arial,helvetica,sans-serif;">${a}</a>
         </div>
       `;
     },
     renderHtml(e) {
-      const t = a(e, "containerPadding", "10px"), o = a(e, "backgroundColor", "#3b82f6"), n = a(e, "textColor", "#ffffff"), i = a(e, "fontSize", "14px"), s = a(e, "fontWeight", "700"), r = a(e, "borderRadius", "4px"), l = a(e, "buttonPadding", "10px 20px"), d = a(e, "text", "Click Me"), c = a(e, "textAlign", "center"), h = a(e, "href", "#"), g = a(e, "target", "_blank"), u = a(e, "borderWidth", "0px"), f = a(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}
+      const t = l(e, "containerPadding", "10px"), { bg: o, color: n } = st(e), i = l(e, "fontSize", "14px"), s = l(e, "fontWeight", "700"), r = l(e, "borderRadius", "4px"), a = l(e, "buttonPadding", l(e, "padding", "10px 20px")), d = l(e, "text", "Click Me"), c = l(e, "textAlign", "center"), h = l(e, "href", "#"), g = l(e, "target", "_blank"), u = l(e, "borderWidth", "0px"), f = l(e, "borderColor", o), w = u !== "0px" ? `border:${u} solid ${f};` : "border:none;", x = St(d, h, { bgColor: o, textColor: n, fontSize: i, fontWeight: s, borderRadius: r }), m = x ? `${x}
   <!--[if !mso]><!-->` : "<!--[if !mso]><!-->", v = `<div align="${c}">
       ${m}
-      <a href="${h}" target="${g}" style="display:inline-block;text-decoration:none;text-align:center;color:${n};background-color:${o};border-radius:${r};font-size:${i};font-weight:${s};padding:${l};font-family:arial,helvetica,sans-serif;${y}mso-border-alt:none;"><span style="line-height:120%;">${d}</span></a>
+      <a href="${h}" target="${g}" style="display:inline-block;text-decoration:none;text-align:center;color:${n};background-color:${o};border-radius:${r};font-size:${i};font-weight:${s};padding:${a};font-family:arial,helvetica,sans-serif;${w}mso-border-alt:none;"><span style="line-height:120%;">${d}</span></a>
       <!--<![endif]-->
     </div>`;
       return z(v, { padding: t, align: c });
     }
   }
-}, It = {
+}, Pt = {
   name: "divider",
   label: "Divider",
   icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="2" y1="12" x2="22" y2="12"/></svg>',
@@ -1259,53 +1286,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 p`<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><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>`;
+      const t = l(e, "containerPadding", "10px"), o = l(e, "width", "100%"), n = `${l(e, "borderTopWidth", "1px")} ${l(e, "borderTopStyle", "solid")} ${l(e, "borderTopColor", "#cccccc")}`, i = `<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="${o}" style="border-collapse:collapse;border-top:${n};"><tbody><tr><td style="font-size:0;line-height:0;">&nbsp;</td></tr></tbody></table>`;
       return z(i, { padding: t, align: "center" });
     }
   }
-}, Mt = [
-  _t,
+}, Et = [
   Dt,
-  St,
   Rt,
   Tt,
-  It
-], st = [
+  It,
+  Mt,
+  Pt
+], rt = [
   {
     meta: { name: "html", label: "HTML", icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>', position: 6 },
-    loader: () => import("./html-tool-1B9Cos-6.js").then((e) => e.htmlTool)
+    loader: () => import("./html-tool-DMtmrF3n.js").then((e) => e.htmlTool)
   },
   {
     meta: { name: "social", label: "Social", icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>', position: 8 },
-    loader: () => import("./social-tool-Ba7QItoR.js").then((e) => e.socialTool)
+    loader: () => import("./social-tool-CRY3-_sU.js").then((e) => e.socialTool)
   },
   {
     meta: { name: "menu", label: "Menu", icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></svg>', position: 9 },
-    loader: () => import("./menu-tool-CZjaIKsU.js").then((e) => e.menuTool)
+    loader: () => import("./menu-tool-CJcQdpcP.js").then((e) => e.menuTool)
   },
   {
     meta: { name: "video", label: "Video", icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>', position: 10 },
-    loader: () => import("./video-tool-OdNg0UMg.js").then((e) => e.videoTool)
+    loader: () => import("./video-tool-g1fIoCWW.js").then((e) => e.videoTool)
   },
   {
     meta: { name: "timer", label: "Timer", icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>', position: 11 },
-    loader: () => import("./timer-tool-p0KWo21p.js").then((e) => e.timerTool)
+    loader: () => import("./timer-tool-BVE1shO1.js").then((e) => e.timerTool)
   },
   {
     meta: { name: "table", label: "Table", icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/><path d="M9 3v18"/><path d="M15 3v18"/></svg>', position: 12 },
-    loader: () => import("./table-tool-swpmCeU4.js").then((e) => e.tableTool)
+    loader: () => import("./table-tool-DeIQci5z.js").then((e) => e.tableTool)
   },
   {
     meta: { name: "form", label: "Form", icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M7 7h10"/><path d="M7 12h10"/><path d="M7 17h6"/></svg>', position: 13 },
-    loader: () => import("./form-tool-DiE5BEft.js").then((e) => e.formTool)
+    loader: () => import("./form-tool-DdFDrS3b.js").then((e) => e.formTool)
   }
 ];
-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", l = 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;">${l}${"&zwnj;&nbsp;".repeat(80)}</div>`;
+function zt(e, t, o) {
+  const n = o.backgroundColor || "#e7e7e7", i = o.contentWidth || "600px", s = o.fontFamily?.value || "arial,helvetica,sans-serif", r = o.textColor || "#000000", a = o.preheaderText || "" || "&zwnj;", d = `<div style="display:none;font-size:1px;color:${n};line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">${a}${"&zwnj;&nbsp;".repeat(80)}</div>`;
   return `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
 <head>
@@ -1355,32 +1382,32 @@ function Pt(e, t, o) {
 </body>
 </html>`;
 }
-function Et(e, t, o) {
-  const n = parseInt(t.contentWidth || "600"), i = e.values.backgroundColor || "", s = e.values.columnsBackgroundColor || "", r = e.values.padding || "0px", l = e.cells.reduce((m, w) => m + w, 0), d = i ? `background-color:${i};` : "", c = e.values.backgroundImage;
+function Lt(e, t, o) {
+  const n = parseInt(t.contentWidth || "600"), i = e.values.backgroundColor || "", s = e.values.columnsBackgroundColor || "", r = e.values.padding || "0px", a = e.cells.reduce((m, y) => m + y, 0), d = i ? `background-color:${i};` : "", c = e.values.backgroundImage;
   let h = "";
   if (c?.url) {
-    const m = c.repeat === !0 || c.repeat === "repeat" ? "repeat" : "no-repeat", 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 m = c.repeat === !0 || c.repeat === "repeat" ? "repeat" : "no-repeat", y = c.cover === !0 ? "cover" : c.fullWidth === !0 ? "100% auto" : "auto", v = c.center !== !1 ? "center top" : "left top";
+    h = `background-image:url('${c.url}');background-repeat:${m};background-position:${v};background-size:${y};`;
   }
-  const g = e.columns.length > 1, u = e.columns.map((m, w) => {
-    const v = Math.round(e.cells[w] / l * n);
-    return { colHtml: zt(m, v, s, t, o), colWidthPx: v };
+  const g = e.columns.length > 1, u = e.columns.map((m, y) => {
+    const v = Math.round(e.cells[y] / a * n);
+    return { colHtml: Vt(m, v, s, t, o), colWidthPx: v };
   });
   let f;
   if (g) {
     const m = u.map(
-      ({ colHtml: 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]-->`
+      ({ colHtml: y, colWidthPx: v }) => `<!--[if (mso)|(IE)]><td align="center" width="${v}" style="width:${v}px;padding:0px;" valign="top"><![endif]-->${y}<!--[if (mso)|(IE)]></td><![endif]-->`
     );
     f = `<!--[if (mso)|(IE)]><table role="presentation" width="${n}" cellpadding="0" cellspacing="0" border="0"><tr><![endif]-->${m.join("")}<!--[if (mso)|(IE)]></tr></table><![endif]-->`;
   } else
     f = u.map(({ colHtml: m }) => m).join("");
-  const 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}">
+  const w = e.values.hideDesktop ? " u_hide_desktop" : "", x = e.values.hideMobile ? " u_hide_mobile" : "";
+  return `<div class="u_row${w}${x}" style="padding:${r};${d}${h}">
   <div style="margin:0 auto;max-width:${n}px;${g ? "font-size:0;" : ""}text-align:center;">${f}</div>
 </div>`;
 }
-function zt(e, t, o, n, i) {
-  const s = e.values.backgroundColor || o || "", r = e.values.padding || "0px", l = e.values.borderRadius || "0px", d = s ? `background-color:${s};` : "", c = e.contents.map((h) => {
+function Vt(e, t, o, n, i) {
+  const s = e.values.backgroundColor || o || "", r = e.values.padding || "0px", a = e.values.borderRadius || "0px", d = s ? `background-color:${s};` : "", c = e.contents.map((h) => {
     const g = i.get(h.type);
     if (!g) return `<!-- unknown tool: ${h.type} -->`;
     const u = {
@@ -1390,19 +1417,19 @@ function zt(e, t, o, n, i) {
       bodyValues: n
     };
     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;
+    const w = !!h.values.hideDesktop, x = !!h.values.hideMobile;
+    return (w || x) && (f = `<div class="${[w && "u_hide_desktop", x && "u_hide_mobile"].filter(Boolean).join(" ")}">${f}</div>`), f;
   }).join(`
 `);
   return `<div class="u_column" style="display:inline-block;vertical-align:top;width:${t}px;max-width:${t}px;font-size:14px;text-align:left;">
-  <div style="width:100%;${d}${l !== "0px" ? `border-radius:${l};` : ""}">
+  <div style="width:100%;${d}${a !== "0px" ? `border-radius:${a};` : ""}">
     <div style="padding:${r};">
       ${c || "&nbsp;"}
     </div>
   </div>
 </div>`;
 }
-function Lt(e) {
+function At(e) {
   return `
 @media only screen and (min-width: ${e + 20}px) {
   .u_row .u_column { display: inline-block !important; }
@@ -1451,9 +1478,8 @@ function Lt(e) {
   .u_hide_mobile { display: block !important; }
 }`;
 }
-const Vt = [
+const Bt = [
   "box-sizing",
-  "float",
   "overflow-wrap",
   "word-break",
   "word-wrap",
@@ -1462,25 +1488,24 @@ const Vt = [
   "transition",
   "animation",
   "transform",
-  "position",
   "z-index",
   "display:\\s*flex",
   "display:\\s*grid",
   "gap"
-], At = new RegExp(
-  `(?:;\\s*|^\\s*)(${Vt.join("|")})\\s*:[^;]*;?`,
+], Ot = new RegExp(
+  `(?:;\\s*|^\\s*)(${Bt.join("|")})\\s*:[^;]*;?`,
   "gi"
-), Bt = /var\(--[^)]*\)/gi;
-function Ot(e) {
+), Ht = /var\(--[^)]*\)/gi;
+function jt(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}"` : "";
+    return n = n.replace(Ot, ""), n = n.replace(Ht, "inherit"), n = n.replace(/;\s*;/g, ";").replace(/^\s*;\s*/, "").replace(/;\s*$/, "").trim(), n ? `style="${n}"` : "";
   });
 }
-function 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 = Lt(i), l = Ot(s);
-  let d = Pt(l, r, n);
+function Wt(e, t, o) {
+  const n = e.body.values, i = parseInt(n.contentWidth || "600"), s = e.body.rows.map((u) => Lt(u, n, t)).join(`
+`), r = At(i), a = jt(s);
+  let d = zt(a, r, n);
   if (o?.mergeTags)
     for (const [u, f] of Object.entries(o.mergeTags))
       d = d.replaceAll(`{{${u}}}`, f);
@@ -1521,10 +1546,10 @@ class T {
     }));
   }
 }
-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--)
+var Ut = Object.defineProperty, Ft = Object.getOwnPropertyDescriptor, dt = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? Ft(t, o) : t, s = e.length - 1, r; s >= 0; s--)
     (r = e[s]) && (i = (n ? r(t, o, i) : r(i)) || i);
-  return n && i && jt(t, o, i), i;
+  return n && i && Ut(t, o, i), i;
 };
 let V = class extends $ {
   constructor() {
@@ -1651,40 +1676,37 @@ V.styles = k`
       stroke-linejoin: round;
     }
   `;
-at([
+dt([
   b({ type: Boolean })
 ], V.prototype, "visible", 2);
-V = at([
+V = dt([
   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--)
+var Nt = Object.defineProperty, qt = Object.getOwnPropertyDescriptor, O = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? qt(t, o) : t, s = e.length - 1, r; s >= 0; s--)
     (r = e[s]) && (i = (n ? r(t, o, i) : r(i)) || i);
-  return n && i && Ut(t, o, i), i;
+  return n && i && Nt(t, o, i), i;
 };
-const rt = /* @__PURE__ */ new Set(["text", "heading", "paragraph"]);
-function lt(e) {
+const lt = /* @__PURE__ */ new Set(["text", "heading", "paragraph"]);
+function at(e) {
   return e === "html" ? "html" : "text";
 }
-let D = class extends $ {
+let S = class extends $ {
   constructor() {
-    super(...arguments), this.storeCtrl = new T(this, ["design", "selection", "hover", "viewMode"]), this.editing = !1, this.toolbar = null, this.editableEl = null, this.saveDebounceTimer = null, this._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", L.startContentDrag(this.content.id);
-    }, this._onDragEnd = () => {
-      this.style.opacity = "1", L.reset();
-    }, this.handleInlineInput = () => {
-      this.saveDebounceTimer && clearTimeout(this.saveDebounceTimer), this.saveDebounceTimer = setTimeout(() => this.saveInlineContent(), 500), this.showToolbar();
+    super(...arguments), this.storeCtrl = new T(this, ["design", "selection", "hover", "viewMode"]), this.editing = !1, this.toolbar = null, this.editableEl = null, this.saveDebounceTimer = null, this.handleInlineInput = () => {
+      this.showToolbar();
     }, this.handleInlineBlur = (e) => {
       const t = e.relatedTarget;
       t && (t.closest("me-inline-toolbar") || this.toolbar?.contains(t)) || setTimeout(() => {
-        !this.shadowRoot?.activeElement && !this.toolbar?.matches(":hover") && this.stopEditing();
+        document.activeElement !== this.editableEl && !this.toolbar?.matches(":hover") && this.stopEditing();
       }, 150);
+    }, this.handleOverlayBlur = (e) => {
+      const t = e.relatedTarget;
+      t && (t.closest("me-inline-toolbar") || this.toolbar?.contains(t)) || setTimeout(() => {
+        document.activeElement !== this.editableEl && !this.toolbar?.matches(":hover") && this.stopEditing();
+      }, 200);
     }, this.handleInlineKeydown = (e) => {
-      e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), this.stopEditing()), (e.key === "Delete" || e.key === "Backspace") && e.stopPropagation();
+      e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), this.stopEditing());
     };
   }
   set store(e) {
@@ -1698,7 +1720,7 @@ let D = class extends $ {
     e.stopPropagation(), this.editing || this.store.select(this.content.id);
   }
   handleDblClick(e) {
-    e.stopPropagation(), rt.has(this.content.type) && this.startEditing();
+    e.stopPropagation(), lt.has(this.content.type) && this.startEditing();
   }
   handleMouseEnter() {
     this.store.hover(this.content.id);
@@ -1712,23 +1734,46 @@ let D = class extends $ {
   handleDuplicate(e) {
     e.stopPropagation(), this.store.duplicateContent(this.content.id);
   }
+  /** Called from the drag handle only (not the whole block) */
+  handleDragStart(e) {
+    e.stopPropagation(), e.dataTransfer.setData("application/maileditor-content", this.content.id), e.dataTransfer.effectAllowed = "move", this.style.opacity = "0.4", L.startContentDrag(this.content.id);
+  }
+  handleDragEnd() {
+    this.style.opacity = "1", L.reset();
+  }
   // ── Inline editing ───────────────────────────────────────
   startEditing() {
-    this.editing = !0, this.classList.add("editing"), this.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();
-      }
-    });
+    this.editing = !0, this.classList.add("editing"), this.storeCtrl.hostDisconnected();
+    const e = this.getBoundingClientRect(), t = this.getInlineStyles(this.content.values), o = at(this.content.type), n = this.content.values[o] || "", i = document.createElement("div");
+    i.contentEditable = "true", i.innerHTML = n, Object.assign(i.style, {
+      position: "fixed",
+      left: e.left + "px",
+      top: e.top + "px",
+      width: e.width + "px",
+      minHeight: e.height + "px",
+      zIndex: "9999",
+      background: "white",
+      boxShadow: "0 0 0 2px #8b5cf6, 0 4px 16px rgba(0,0,0,0.15)",
+      borderRadius: "2px",
+      outline: "none",
+      boxSizing: "border-box"
+    }), t.split(";").forEach((a) => {
+      const [d, c] = a.split(":").map((h) => h?.trim());
+      if (d && c)
+        try {
+          i.style.setProperty(d, c);
+        } catch {
+        }
+    }), i.addEventListener("keydown", this.handleInlineKeydown), i.addEventListener("blur", this.handleOverlayBlur), document.body.appendChild(i), this.editableEl = i, i.focus();
+    const s = window.getSelection(), r = document.createRange();
+    r.selectNodeContents(i), r.collapse(!1), s?.removeAllRanges(), s?.addRange(r), this.showToolbar();
   }
   stopEditing() {
-    this.editing && (this.saveInlineContent(), this.editing = !1, this.classList.remove("editing"), this.setAttribute("draggable", "true"), this.editableEl = null, this.toolbar?.hide());
+    this.editing && (this.saveInlineContent(), this.editableEl && (this.editableEl.removeEventListener("keydown", this.handleInlineKeydown), this.editableEl.removeEventListener("blur", this.handleOverlayBlur), this.editableEl.remove()), this.editing = !1, this.classList.remove("editing"), this.editableEl = null, this.storeCtrl.hostConnected(), this.requestUpdate(), this.toolbar?.hide());
   }
   saveInlineContent() {
     if (!this.editableEl) return;
-    const e = this.editableEl.innerHTML, t = lt(this.content.type), o = this.content.values[t];
+    const e = this.editableEl.innerHTML, t = at(this.content.type), o = this.content.values[t];
     e !== o && this.store.updateContentValues(this.content.id, { [t]: e });
   }
   showToolbar() {
@@ -1736,54 +1781,48 @@ let D = class extends $ {
   }
   // ── Lifecycle ────────────────────────────────────────────
   connectedCallback() {
-    super.connectedCallback(), this.addEventListener("dragstart", this._onDragStart), this.addEventListener("dragend", this._onDragEnd);
+    super.connectedCallback();
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("dragstart", this._onDragStart), this.removeEventListener("dragend", this._onDragEnd), this.toolbar?.remove(), this.toolbar = null, this.saveDebounceTimer && clearTimeout(this.saveDebounceTimer);
+    super.disconnectedCallback(), this.toolbar?.remove(), this.toolbar = null, this.saveDebounceTimer && clearTimeout(this.saveDebounceTimer);
   }
   // ── Render ───────────────────────────────────────────────
   render() {
     if (!this.store) return p``;
     const e = this.store.selectedId === this.content.id, t = this.store.hoveredId === this.content.id, o = this.store.viewMode, n = !!this.content.values.hideDesktop, i = !!this.content.values.hideMobile, s = o === "desktop" && n || o === "mobile" && i;
-    this.classList.toggle("selected", e && !this.editing), this.classList.toggle("hovered", t && !this.editing), this.classList.toggle("hidden-in-view", s), this.editing || this.setAttribute("draggable", "true"), this.dataset.contentId = this.content.id, this.editing && !e && this.stopEditing();
+    this.classList.toggle("selected", e && !this.editing), this.classList.toggle("hovered", t && !this.editing), this.classList.toggle("hidden-in-view", s), this.removeAttribute("draggable"), this.dataset.contentId = this.content.id, this.editing && !e && this.stopEditing();
     const r = this.toolRegistry.get(this.content.type);
     if (!r && this.toolRegistry.has(this.content.type))
       return this.toolRegistry.ensureLoaded(this.content.type).then(() => this.requestUpdate()), p`<div style="padding:16px;text-align:center;color:#9ca3af;font-size:13px;">Loading ${this.content.type}...</div>`;
-    const l = 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, {
+    const a = n ? "Hidden on desktop" : i ? "Hidden on mobile" : "", d = lt.has(this.content.type), c = p`
+      <button class="drag-handle" draggable="true" title="Drag to move"
+        @dragstart=${(u) => this.handleDragStart(u)}
+        @dragend=${() => this.handleDragEnd()}
+        @mousedown=${(u) => u.stopPropagation()}>
+        <svg viewBox="0 0 16 16"><circle cx="5" cy="3" r="1.5"/><circle cx="11" cy="3" r="1.5"/><circle cx="5" cy="8" r="1.5"/><circle cx="11" cy="8" r="1.5"/><circle cx="5" cy="13" r="1.5"/><circle cx="11" cy="13" r="1.5"/></svg>
+      </button>
+    `, h = r?.renderer.renderEditor(this.content.values, {
       isSelected: e,
       isHovered: t,
       columnWidth: 600,
       displayMode: "email"
     });
+    if (this.editing && d)
+      return p`${c}<div class="content-wrapper" style="visibility:hidden;">${h}</div>`;
+    const g = this.content.values.containerPadding || "0px";
     return p`
-      ${s ? p`<div class="hidden-badge">${l}</div>` : ""}
+      ${s ? p`<div class="hidden-badge">${a}</div>` : ""}
+      ${c}
       <div class="action-bar">
         <button class="action-btn" @click=${this.handleDuplicate} title="Duplicate">&#9851;</button>
         <button class="action-btn" @click=${this.handleDelete} title="Delete">&#10005;</button>
       </div>
-      <div class="content-wrapper"
+      <div class="content-wrapper" style="padding:${g};"
         @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>`}
+        ${h ?? p`<div style="padding:10px;color:#999;font-style:italic;">Unknown tool: ${this.content.type}</div>`}
       </div>
     `;
   }
@@ -1802,8 +1841,8 @@ let D = class extends $ {
     s && t.push(`font-size:${s}`);
     const r = o("fontWeight");
     r && t.push(`font-weight:${r}`);
-    const l = o("lineHeight", "140%");
-    t.push(`line-height:${l}`);
+    const a = o("lineHeight", "140%");
+    t.push(`line-height:${a}`);
     const d = o("textAlign");
     d && t.push(`text-align:${d}`);
     const c = o("letterSpacing");
@@ -1812,14 +1851,14 @@ let D = class extends $ {
     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(";");
   }
 };
-D.styles = k`
+S.styles = k`
     :host {
-      display: block; position: relative; cursor: pointer;
+      display: block; position: relative;
       transition: outline 0.15s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
     }
     :host(.selected) { outline: 2px solid #3b82f6; outline-offset: -1px; }
     :host(.hovered:not(.selected)) { outline: 2px dashed #93c5fd; outline-offset: -1px; }
-    :host(.editing) { outline: 2px solid #8b5cf6; outline-offset: -1px; cursor: text; }
+    :host(.editing) { outline: 2px solid #8b5cf6; outline-offset: -1px; }
     :host(.just-dropped) {
       animation: dropIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
     }
@@ -1834,6 +1873,39 @@ D.styles = k`
       0% { opacity: 0; transform: scale(0.92) translateY(-8px); }
       100% { opacity: 1; transform: scale(1) translateY(0); }
     }
+    /* Drag handle — straddles the right border, vertically centered */
+    .drag-handle {
+      display: none;
+      position: absolute;
+      top: 50%;
+      right: -12px;
+      transform: translateY(-50%);
+      width: 24px;
+      height: 24px;
+      background: #3b82f6;
+      color: white;
+      border: 2px solid white;
+      border-radius: 50%;
+      cursor: grab;
+      z-index: 20;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      box-shadow: 0 1px 4px rgba(0,0,0,0.2);
+      transition: background 0.15s ease, transform 0.15s ease;
+    }
+    .drag-handle:hover {
+      background: #2563eb;
+      transform: translateY(-50%) scale(1.15);
+    }
+    .drag-handle:active { cursor: grabbing; }
+    .drag-handle svg {
+      width: 12px; height: 12px; fill: currentColor; stroke: none;
+    }
+    :host(.selected) .drag-handle,
+    :host(.hovered) .drag-handle { display: flex; }
+    :host(.editing) .drag-handle { display: none; }
+    /* Action bar */
     .action-bar {
       display: none; position: absolute; top: -28px; right: 4px;
       background: #3b82f6; border-radius: 4px; padding: 2px; gap: 2px; z-index: 10;
@@ -1844,37 +1916,39 @@ D.styles = k`
       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; }
+    .content-wrapper { position: relative; cursor: default; box-sizing: border-box; }
+    /* Reset paragraph margins in user content to match email rendering.
+       Override inline margin from external editors (e.g. margin: 1.25em 0px). */
+    .content-wrapper p { margin: 0 !important; }
+    /* Reset paragraph margins to match email rendering.
+       Spacing comes from line-height, <br>, and &nbsp; in the HTML content. */
+    .content-wrapper p { margin: 0; }
     .inline-editable {
-      outline: none;
-      cursor: text;
-      min-height: 1em;
-    }
-    .inline-editable:focus {
-      outline: none;
+      outline: none; cursor: text; min-height: 1em;
     }
+    .inline-editable:focus { outline: none; }
   `;
 O([
   b({ attribute: !1 })
-], D.prototype, "content", 2);
+], S.prototype, "content", 2);
 O([
   b({ attribute: !1 })
-], D.prototype, "store", 1);
+], S.prototype, "store", 1);
 O([
   b({ attribute: !1 })
-], D.prototype, "toolRegistry", 2);
+], S.prototype, "toolRegistry", 2);
 O([
-  pt()
-], D.prototype, "editing", 2);
-D = O([
+  ht()
+], S.prototype, "editing", 2);
+S = 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--)
+], S);
+var Gt = Object.defineProperty, Kt = Object.getOwnPropertyDescriptor, H = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? Kt(t, o) : t, s = e.length - 1, r; s >= 0; s--)
     (r = e[s]) && (i = (n ? r(t, o, i) : r(i)) || i);
-  return n && i && Nt(t, o, i), i;
+  return n && i && Gt(t, o, i), i;
 };
-let S = class extends $ {
+let D = class extends $ {
   constructor() {
     super(...arguments), this.storeCtrl = new T(this, ["design"]), this.widthPercent = 100;
   }
@@ -1903,7 +1977,7 @@ let S = class extends $ {
     `;
   }
 };
-S.styles = k`
+D.styles = k`
     :host {
       display: block;
       min-height: 40px;
@@ -1935,23 +2009,23 @@ S.styles = k`
   `;
 H([
   b({ attribute: !1 })
-], S.prototype, "column", 2);
+], D.prototype, "column", 2);
 H([
   b({ attribute: !1 })
-], S.prototype, "store", 1);
+], D.prototype, "store", 1);
 H([
   b({ attribute: !1 })
-], S.prototype, "toolRegistry", 2);
+], D.prototype, "toolRegistry", 2);
 H([
   b({ type: Number })
-], S.prototype, "widthPercent", 2);
-S = H([
+], D.prototype, "widthPercent", 2);
+D = 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--)
+], D);
+var Yt = Object.defineProperty, Jt = Object.getOwnPropertyDescriptor, F = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? Jt(t, o) : t, s = e.length - 1, r; s >= 0; s--)
     (r = e[s]) && (i = (n ? r(t, o, i) : r(i)) || i);
-  return n && i && Gt(t, o, i), i;
+  return n && i && Yt(t, o, i), i;
 };
 let R = class extends $ {
   constructor() {
@@ -1981,15 +2055,15 @@ let R = class extends $ {
   }
   render() {
     if (!this.store) return p``;
-    const { row: e, store: t, toolRegistry: o } = this, n = e.values.backgroundColor || "transparent", i = e.values.columnsBackgroundColor || "transparent", s = e.values.padding || "0px", r = e.cells.reduce((x, m) => x + m, 0), l = e.values.backgroundImage, d = typeof l == "object" && l?.url ? l.url : "";
+    const { row: e, store: t, toolRegistry: o } = this, n = e.values.backgroundColor || "transparent", i = e.values.columnsBackgroundColor || "transparent", s = e.values.padding || "0px", r = e.cells.reduce((x, m) => x + m, 0), a = e.values.backgroundImage, d = typeof a == "object" && a?.url ? a.url : "";
     let c = "";
     if (d) {
-      const x = l.repeat === !0 || l.repeat === "repeat" ? "repeat" : "no-repeat", m = l.cover === !0 ? "cover" : l.fullWidth === !0 ? "100% auto" : "auto", w = l.center !== !1 ? "center" : "top left";
-      c = `background-image:url('${d}');background-size:${m};background-position:${w};background-repeat:${x};`;
+      const x = a.repeat === !0 || a.repeat === "repeat" ? "repeat" : "no-repeat", m = a.cover === !0 ? "cover" : a.fullWidth === !0 ? "100% auto" : "auto", y = a.center !== !1 ? "center" : "top left";
+      c = `background-image:url('${d}');background-size:${m};background-position:${y};background-repeat:${x};`;
     }
-    const h = t.viewMode, g = !!e.values.hideDesktop, u = !!e.values.hideMobile, f = h === "desktop" && g || h === "mobile" && u, y = g ? "Hidden on desktop" : u ? "Hidden on mobile" : "";
+    const h = t.viewMode, g = !!e.values.hideDesktop, u = !!e.values.hideMobile, f = h === "desktop" && g || h === "mobile" && u, w = g ? "Hidden on desktop" : u ? "Hidden on mobile" : "";
     return this.classList.toggle("hidden-in-view", f), this.setAttribute("draggable", "true"), this.dataset.rowId = e.id, p`
-      ${f ? p`<div class="row-hidden-badge">${y}</div>` : ""}
+      ${f ? p`<div class="row-hidden-badge">${w}</div>` : ""}
       <div class="row-actions">
         <button class="row-action-btn" @click=${this.handleMoveUp} title="Move Up">
           <svg viewBox="0 0 24 24"><path d="M12 19V5"/><path d="m5 12 7-7 7 7"/></svg>
@@ -2009,13 +2083,13 @@ let R = class extends $ {
         style="background-color:${n};padding:${s};${c}"
       >
         ${e.columns.map((x, m) => {
-      const w = e.cells[m] / r * 100;
+      const y = e.cells[m] / r * 100;
       return p`
             <me-column-renderer
               .column=${x}
               .store=${t}
               .toolRegistry=${o}
-              .widthPercent=${w}
+              .widthPercent=${y}
               style="background-color:${i};"
             ></me-column-renderer>
           `;
@@ -2100,10 +2174,10 @@ F([
 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--)
+var Xt = Object.defineProperty, Qt = Object.getOwnPropertyDescriptor, J = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? Qt(t, o) : t, s = e.length - 1, r; s >= 0; s--)
     (r = e[s]) && (i = (n ? r(t, o, i) : r(i)) || i);
-  return n && i && Yt(t, o, i), i;
+  return n && i && Xt(t, o, i), i;
 };
 let M = class extends $ {
   constructor() {
@@ -2221,10 +2295,10 @@ J([
 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--)
+var Zt = Object.defineProperty, te = Object.getOwnPropertyDescriptor, ct = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? te(t, o) : t, s = e.length - 1, r; s >= 0; s--)
     (r = e[s]) && (i = (n ? r(t, o, i) : r(i)) || i);
-  return n && i && Xt(t, o, i), i;
+  return n && i && Zt(t, o, i), i;
 };
 const G = [
   // System / email-safe fonts
@@ -2368,16 +2442,16 @@ A.styles = k`
     }
     .align-btn.active { border-color: #3b82f6; background: #eff6ff; color: #3b82f6; }
   `;
-dt([
+ct([
   b({ attribute: !1 })
 ], A.prototype, "store", 1);
-A = dt([
+A = ct([
   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--)
+var ee = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, X = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? oe(t, o) : t, s = e.length - 1, r; s >= 0; s--)
     (r = e[s]) && (i = (n ? r(t, o, i) : r(i)) || i);
-  return n && i && Zt(t, o, i), i;
+  return n && i && ee(t, o, i), i;
 };
 let P = class extends $ {
   constructor() {
@@ -2614,7 +2688,7 @@ X([
 P = X([
   C("me-editor-sidebar")
 ], P);
-function ee(e, t, o) {
+function ne(e, t, o) {
   const n = e && /^#[0-9a-fA-F]{3,8}$/.test(e) ? e : "#000000";
   return p`
     <div class="prop-row">
@@ -2628,7 +2702,7 @@ function ee(e, t, o) {
     </div>
   `;
 }
-function oe(e, t, o, n) {
+function ie(e, t, o, n) {
   const i = n?.options || [];
   return p`
     <div class="prop-row">
@@ -2639,7 +2713,7 @@ function oe(e, t, o, n) {
     </div>
   `;
 }
-function ne(e, t, o) {
+function se(e, t, o) {
   return p`
     <div class="prop-row">
       <label class="prop-label">${o}</label>
@@ -2654,24 +2728,24 @@ function ne(e, t, o) {
     </div>
   `;
 }
-function ie(e) {
+function re(e) {
   const t = (e || "0px").split(/\s+/).map((r) => parseInt(r) || 0), o = t[0], n = t[1] ?? o, i = t[2] ?? o, s = t[3] ?? n;
   return [o, n, i, s];
 }
-function se(e, t, o, n) {
+function le(e, t, o, n) {
   return e === t && t === o && o === n ? `${e}px` : e === o && t === n ? `${e}px ${t}px` : `${e}px ${t}px ${o}px ${n}px`;
 }
-function re(e, t, o) {
-  const [n, i, s, r] = ie(e), l = (c, h, g, u) => t(se(c, h, g, u));
+function ae(e, t, o) {
+  const [n, i, s, r] = re(e), a = (c, h, g, u) => t(le(c, h, g, u));
   return p`
     <div class="prop-row">
       <label class="prop-label">${o}</label>
       <div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;">
         ${[
-    { label: "T", val: n, change: (c) => l(c, i, s, r) },
-    { label: "R", val: i, change: (c) => l(n, c, s, r) },
-    { label: "B", val: s, change: (c) => l(n, i, c, r) },
-    { label: "L", val: r, change: (c) => l(n, i, s, 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;">${c.label}</span>
@@ -2684,7 +2758,7 @@ function re(e, t, o) {
     </div>
   `;
 }
-function le(e, t, o) {
+function de(e, t, o) {
   return p`
     <div class="prop-row">
       <div class="prop-toggle">
@@ -2695,7 +2769,7 @@ function le(e, t, o) {
     </div>
   `;
 }
-function ae(e, t, o) {
+function ce(e, t, o) {
   return p`
     <div class="prop-row">
       <label class="prop-label">${o}</label>
@@ -2704,7 +2778,7 @@ function ae(e, t, o) {
     </div>
   `;
 }
-function de(e, t, o) {
+function pe(e, t, o) {
   return p`
     <div class="prop-row">
       <label class="prop-label">${o}</label>
@@ -2716,10 +2790,33 @@ function de(e, t, o) {
     </div>
   `;
 }
-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--)
+function he(e, t, o, n) {
+  const i = n?.unit || "px", s = n?.min ?? 0, r = n?.max ?? 100, a = n?.step ?? 0.1, d = parseFloat(e) || 0, c = (h) => {
+    const g = parseFloat(h.target.value) || 0;
+    t(`${g}${i}`);
+  };
+  return p`
+    <div class="prop-row">
+      <label class="prop-label">${o}</label>
+      <div style="display:flex;align-items:center;gap:4px;">
+        <input
+          type="number"
+          .value=${String(d)}
+          min=${s}
+          max=${r}
+          step=${a}
+          @input=${c}
+          style="flex:1;padding:6px 8px;border:1px solid #d1d5db;border-radius:4px;font-size:13px;color:#111827;"
+        />
+        <span style="font-size:12px;color:#9ca3af;min-width:20px;">${i}</span>
+      </div>
+    </div>
+  `;
+}
+var ue = Object.defineProperty, ge = Object.getOwnPropertyDescriptor, Q = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? ge(t, o) : t, s = e.length - 1, r; s >= 0; s--)
     (r = e[s]) && (i = (n ? r(t, o, i) : r(i)) || i);
-  return n && i && ce(t, o, i), i;
+  return n && i && ue(t, o, i), i;
 };
 let E = class extends $ {
   constructor() {
@@ -2770,20 +2867,22 @@ let E = class extends $ {
     const n = e.values[t] ?? o.defaultValue, i = this.onChange(e.id, t);
     switch (o.widget) {
       case "color_picker":
-        return ee(n, i, o.label);
+        return ne(n, i, o.label);
       case "toggle":
-        return le(n, i, o.label);
-      case "rich_text":
         return de(n, i, o.label);
+      case "rich_text":
+        return pe(n, i, o.label);
       case "dropdown":
-        return oe(n, i, o.label, o.widgetParams);
+        return ie(n, i, o.label, o.widgetParams);
       case "alignment":
-        return ne(n, i, o.label);
+        return se(n, i, o.label);
       case "padding":
-        return re(n, i, o.label);
+        return ae(n, i, o.label);
+      case "number_unit":
+        return he(n, i, o.label, o.widgetParams);
       case "text":
       default:
-        return ae(n, i, o.label);
+        return ce(n, i, o.label);
     }
   }
 };
@@ -2830,17 +2929,17 @@ Q([
 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--)
+var fe = Object.defineProperty, be = Object.getOwnPropertyDescriptor, pt = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? be(t, o) : t, s = e.length - 1, r; s >= 0; s--)
     (r = e[s]) && (i = (n ? r(t, o, i) : r(i)) || i);
-  return n && i && he(t, o, i), i;
+  return n && i && fe(t, o, i), i;
 };
 let B = class extends $ {
   constructor() {
-    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) => {
+    super(...arguments), this.options = {}, this.store = new $t(), this.toolRegistry = new kt(), this.dragManager = null, this.callbacks = /* @__PURE__ */ new Map(), this.unsubscribe = null, this._handleKeydown = (e) => {
       const t = e.metaKey || e.ctrlKey, n = e.composedPath().some((i) => {
-        const s = i?.tagName;
-        return s === "INPUT" || s === "TEXTAREA" || s === "SELECT";
+        const s = i, r = s?.tagName;
+        return !!(r === "INPUT" || r === "TEXTAREA" || r === "SELECT" || s?.isContentEditable);
       });
       n && !t || (t && e.key === "z" && !e.shiftKey ? (e.preventDefault(), this.store.undo()) : t && (e.key === "y" || e.key === "z" && e.shiftKey) ? (e.preventDefault(), this.store.redo()) : (e.key === "Delete" || e.key === "Backspace") && this.store.selectedId && !n ? (e.preventDefault(), this.store.removeContent(this.store.selectedId)) : e.key === "Escape" && this.store.select(null));
     };
@@ -2849,7 +2948,7 @@ let B = class extends $ {
     super.connectedCallback(), this.registerBuiltInTools(), this.applyOptions(), this.setAttribute("tabindex", "0"), this.addEventListener("keydown", this._handleKeydown);
   }
   firstUpdated() {
-    this.dragManager = new $t(this.store, this.toolRegistry, this.shadowRoot), this.dragManager.attach(), this.store.events.on("design:loaded", (e) => {
+    this.dragManager = new Ct(this.store, this.toolRegistry, this.shadowRoot), this.dragManager.attach(), this.store.events.on("design:loaded", (e) => {
       this.dispatchEvent(new CustomEvent("design:loaded", { detail: e, bubbles: !0, composed: !0 }));
     }), this.store.events.on("design:updated", (e) => {
       this.dispatchEvent(new CustomEvent("design:updated", { detail: e, bubbles: !0, composed: !0 }));
@@ -2871,8 +2970,8 @@ let B = class extends $ {
     const o = this.store.getDesign(), n = /* @__PURE__ */ new Set();
     for (const s of o.body.rows)
       for (const r of s.columns)
-        for (const l of r.contents)
-          n.add(l.type);
+        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);
   }
@@ -2880,7 +2979,7 @@ let B = class extends $ {
     const n = /* @__PURE__ */ new Map();
     for (const i of this.toolRegistry.getAll())
       n.set(i.name, (s, r) => i.renderer.renderHtml(s, r));
-    t(Ht(e, n, o));
+    t(Wt(e, n, o));
   }
   async exportHtmlAsync(e) {
     return new Promise((t) => this.exportHtml(t, e));
@@ -2916,15 +3015,15 @@ let B = class extends $ {
    */
   preloadLazyTools() {
     const e = window.requestIdleCallback ?? ((t) => setTimeout(t, 1e3));
-    for (const { meta: t } of st)
+    for (const { meta: t } of rt)
       e(() => {
         this.toolRegistry.ensureLoaded(t.name);
       });
   }
   registerBuiltInTools() {
-    for (const e of Mt)
+    for (const e of Et)
       this.toolRegistry.register(e);
-    for (const { meta: e, loader: t } of st)
+    for (const { meta: e, loader: t } of rt)
       this.toolRegistry.registerLazy(e, t);
   }
   applyOptions() {
@@ -2962,10 +3061,10 @@ B.styles = k`
     }
     * { box-sizing: border-box; }
   `;
-ct([
+pt([
   b({ type: Object })
 ], B.prototype, "options", 2);
-B = ct([
+B = pt([
   C("mail-editor")
 ], B);
 function _(e, t) {
@@ -2974,20 +3073,20 @@ function _(e, t) {
 _("mail-editor", B);
 _("me-editor-canvas", M);
 _("me-row-renderer", R);
-_("me-column-renderer", S);
-_("me-content-renderer", D);
+_("me-column-renderer", D);
+_("me-content-renderer", S);
 _("me-editor-sidebar", P);
 _("me-body-settings", A);
 _("me-property-panel", E);
 _("me-inline-toolbar", V);
-const xe = customElements.get("mail-editor") !== void 0;
+const $e = customElements.get("mail-editor") !== void 0;
 export {
-  xe as E,
+  $e as E,
   B as M,
-  vt as T,
-  wt as a,
+  kt as T,
+  $t as a,
   z as e,
-  me as j,
-  a as s
+  ve as j,
+  l as s
 };
-//# sourceMappingURL=index-C_nXnIR5.js.map
+//# sourceMappingURL=index-CpMbWdgn.js.map