@emabuild/core 0.1.2 → 0.1.4

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

@@ -329,8 +329,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 a = this.counterManager.next("u_column");
-      r.id = `u_column_${a}`, r.values._meta = { htmlID: r.id, htmlClassNames: "u_column" };
+      const l = this.counterManager.next("u_column");
+      r.id = `u_column_${l}`, 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 +385,10 @@ class wt {
     if (!i) return;
     this.history.push(this.design);
     for (const r of this.design.body.rows)
-      for (const a of r.columns) {
-        const d = a.contents.findIndex((c) => c.id === t);
+      for (const l of r.columns) {
+        const d = l.contents.findIndex((c) => c.id === t);
         if (d !== -1) {
-          a.contents.splice(d, 1);
+          l.contents.splice(d, 1);
           break;
         }
       }
@@ -404,8 +404,8 @@ class wt {
           const s = i.contents.findIndex((r) => r.id === t);
           if (s !== -1) {
             this.history.push(this.design);
-            const r = structuredClone(o), a = this.counterManager.next(`u_content_${o.type}`);
-            r.id = `u_content_${o.type}_${a}`, r.values._meta = { htmlID: r.id, htmlClassNames: `u_content_${o.type}` }, i.contents.splice(s + 1, 0, r), this.syncCounters(), this.notifyChannels("design"), this.emitUpdate("content_added", r);
+            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);
             return;
           }
         }
@@ -535,7 +535,7 @@ class vt {
     return this.tools.get(t)?.options ?? {};
   }
 }
-const z = {
+const L = {
   /** ID of the content currently being dragged (null if not dragging content) */
   draggingContentId: null,
   startContentDrag(e) {
@@ -563,10 +563,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 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, {
+  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, {
     display: "block",
-    top: `${a}px`,
+    top: `${l}px`,
     left: i,
     right: i,
     width: "auto"
@@ -591,8 +591,8 @@ function et(e, t) {
 class $t {
   constructor(t, o, n) {
     this.currentDrop = null, this.contentIndicator = null, this.rowIndicator = null, this.onDragOver = (i) => {
-      const s = i.dataTransfer?.types || [], r = s.includes("application/maileditor-tool"), a = s.includes("application/maileditor-layout"), d = s.includes("application/maileditor-content") || !!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()));
+      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()));
     }, this.onDrop = (i) => {
       i.preventDefault(), this.hideAllIndicators();
       const s = this.currentDrop, r = i.dataTransfer?.getData("application/maileditor-layout");
@@ -600,12 +600,12 @@ class $t {
         this.handleLayoutDrop(JSON.parse(r), s), this.reset();
         return;
       }
-      const a = i.dataTransfer?.getData("application/maileditor-tool");
-      if (a) {
-        this.handleToolDrop(a, s), this.reset();
+      const l = i.dataTransfer?.getData("application/maileditor-tool");
+      if (l) {
+        this.handleToolDrop(l, s), this.reset();
         return;
       }
-      const d = i.dataTransfer?.getData("application/maileditor-content") || z.draggingContentId;
+      const d = i.dataTransfer?.getData("application/maileditor-content") || L.draggingContentId;
       d && this.handleContentDrop(d, s), this.reset();
     }, this.onDragEnd = () => {
       this.hideAllIndicators(), this.reset();
@@ -649,8 +649,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 a = n[r].getBoundingClientRect().bottom, d = Math.abs(t - a);
-      d < i && (i = d, s = { type: "row", rowIndex: r + 1, y: a });
+      const l = n[r].getBoundingClientRect().bottom, d = Math.abs(t - l);
+      d < i && (i = d, s = { type: "row", rowIndex: r + 1, y: l });
     }
     return s;
   }
@@ -658,22 +658,22 @@ class $t {
     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 l = r.dataset.columnId;
+      if (!l || !r.shadowRoot) continue;
       const d = r.getBoundingClientRect();
       if (t < d.left || t > d.right) continue;
       const c = Array.from(r.shadowRoot.querySelectorAll("me-content-renderer"));
       if (c.length === 0) {
         const u = Math.abs(o - (d.top + d.height / 2));
-        u < s && (s = u, i = { type: "content", columnId: a, contentIndex: 0, y: d.top + d.height / 2 });
+        u < s && (s = u, i = { type: "content", columnId: l, contentIndex: 0, y: d.top + d.height / 2 });
         continue;
       }
       const h = c[0].getBoundingClientRect().top;
       let g = Math.abs(o - h);
-      g < s && (s = g, i = { type: "content", columnId: a, contentIndex: 0, y: h });
+      g < s && (s = g, i = { type: "content", columnId: l, 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 });
+        g = Math.abs(o - x), g < s && (s = g, i = { type: "content", columnId: l, contentIndex: u + 1, y: x });
       }
     }
     return i;
@@ -703,10 +703,10 @@ class $t {
     I(this.contentIndicator), I(this.rowIndicator);
   }
   reset() {
-    this.currentDrop = null, z.reset();
+    this.currentDrop = null, L.reset();
   }
 }
-function l(e, t, o = "") {
+function a(e, t, o = "") {
   const n = e[t];
   return typeof n == "string" && n !== "" ? n : typeof n == "number" ? String(n) : o;
 }
@@ -733,8 +733,8 @@ function kt(e) {
     };
   }
   return {
-    href: l(e, "href"),
-    target: l(e, "target", "_blank")
+    href: a(e, "href"),
+    target: a(e, "target", "_blank")
   };
 }
 function it(e, t = "") {
@@ -743,9 +743,9 @@ function it(e, t = "") {
   const n = e.textJson;
   if (typeof n == "string")
     try {
-      const i = JSON.parse(n), s = [], r = (a) => {
-        typeof a.text == "string" && s.push(a.text), a.type === "linebreak" && s.push("<br/>");
-        const d = a.children;
+      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;
         d && d.forEach(r);
       };
       if (r(i.root || i), s.length > 0) return s.join("");
@@ -761,8 +761,8 @@ 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 a = document.createElement("link");
-        a.id = r, a.rel = "stylesheet", a.href = s, document.head.appendChild(a);
+        const l = document.createElement("link");
+        l.id = r, l.rel = "stylesheet", l.href = s, document.head.appendChild(l);
       }
     }
     return i;
@@ -777,7 +777,7 @@ function me(e, t) {
     return t;
   }
 }
-function L(e, t) {
+function z(e, t) {
   const { padding: o, align: n = "left", extraTdStyle: i = "" } = t;
   return `<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
   <tbody><tr><td style="${`padding:${o};font-family:arial,helvetica,sans-serif;${i}`}" align="${n}">
@@ -786,7 +786,7 @@ function L(e, t) {
 </table>`;
 }
 function Ct(e, t, o) {
-  const { bgColor: n, textColor: i, fontSize: s, fontWeight: r, borderRadius: a } = o, d = parseInt(a) || 0;
+  const { bgColor: n, textColor: i, fontSize: s, fontWeight: r, borderRadius: l } = o, d = parseInt(l) || 0;
   if (d <= 0) return "";
   const c = Math.round(d / 20 * 100);
   return `<!--[if mso]>
@@ -859,7 +859,7 @@ const _t = {
   },
   renderer: {
     renderEditor(e) {
-      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");
+      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");
       return p`
         <div style="padding:${t};background-color:${o};color:${n};line-height:${i};font-family:${s};word-break:break-word;">
           ${U(r)}
@@ -867,8 +867,8 @@ const _t = {
       `;
     },
     renderHtml(e) {
-      const t = l(e, "containerPadding", "10px"), o = l(e, "backgroundColor"), n = l(e, "color", "#000000"), i = l(e, "lineHeight", "140%"), s = l(e, "textAlign", "left"), r = l(e, "text"), a = o ? `background-color:${o};` : "", d = `<div style="font-size:14px;color:${n};line-height:${i};text-align:${s};">${r}</div>`;
-      return L(d, { padding: t, extraTdStyle: a });
+      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 });
     }
   }
 }, Dt = {
@@ -973,16 +973,16 @@ const _t = {
   },
   renderer: {
     renderEditor(e) {
-      const t = l(e, "containerPadding", "10px"), o = l(e, "fontSize", "22px"), n = l(e, "color", "#000000"), i = l(e, "textAlign", "left"), s = l(e, "fontWeight", "700"), r = l(e, "lineHeight", "140%"), a = Y(e), d = it(e, "Heading");
+      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:${a};">
+        <div style="padding:${t};font-size:${o};color:${n};text-align:${i};font-weight:${s};line-height:${r};font-family:${l};">
           ${U(d)}
         </div>
       `;
     },
     renderHtml(e) {
-      const t = l(e, "containerPadding", "10px"), o = l(e, "fontSize", "22px"), n = l(e, "color", "#000000"), i = l(e, "textAlign", "left"), s = l(e, "fontWeight", "700"), r = l(e, "lineHeight", "140%"), a = l(e, "letterSpacing", "normal"), d = Y(e), c = l(e, "headingType", "h1"), h = it(e, "Heading"), g = `<${c} style="margin:0;font-size:${o};color:${n};text-align:${i};font-weight:${s};line-height:${r};letter-spacing:${a};font-family:${d};">${h}</${c}>`;
-      return L(g, { padding: t });
+      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}>`;
+      return z(g, { padding: t });
     }
   }
 }, St = {
@@ -1028,12 +1028,12 @@ const _t = {
   },
   renderer: {
     renderEditor(e) {
-      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>`;
+      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>`;
     },
     renderHtml(e) {
-      const t = l(e, "containerPadding", "10px"), o = l(e, "color", "#374151"), n = l(e, "lineHeight", "160%"), i = l(e, "textAlign", "left"), s = l(e, "letterSpacing", "normal"), r = `<div style="font-size:14px;color:${o};line-height:${n};text-align:${i};letter-spacing:${s};word-wrap:break-word;">${l(e, "text")}</div>`;
-      return L(r, { padding: t });
+      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>`;
+      return z(r, { padding: t });
     }
   }
 }, Rt = {
@@ -1097,15 +1097,15 @@ const _t = {
   },
   renderer: {
     renderEditor(e) {
-      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>`;
+      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>`;
     },
     renderHtml(e, t) {
-      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"));
+      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"));
       let h;
-      a.includes("%") ? h = Math.round(t.columnWidth * (parseFloat(a) / 100)) : a === "auto" ? h = r.width || t.columnWidth : h = parseInt(a) || t.columnWidth;
+      l.includes("%") ? h = Math.round(t.columnWidth * (parseFloat(l) / 100)) : l === "auto" ? h = r.width || t.columnWidth : h = parseInt(l) || 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 });
+      return z(f, { padding: o, align: c });
     }
   }
 }, Tt = {
@@ -1195,21 +1195,21 @@ const _t = {
   },
   renderer: {
     renderEditor(e) {
-      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};`;
+      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};`;
       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>
+          <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>
       `;
     },
     renderHtml(e) {
-      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}
+      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}
   <!--[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>
+      <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>
       <!--<![endif]-->
     </div>`;
-      return L(v, { padding: t, align: c });
+      return z(v, { padding: t, align: c });
     }
   }
 }, It = {
@@ -1259,12 +1259,12 @@ const _t = {
   },
   renderer: {
     renderEditor(e) {
-      const t = l(e, "containerPadding", "10px"), o = l(e, "width", "100%"), n = `${l(e, "borderTopWidth", "1px")} ${l(e, "borderTopStyle", "solid")} ${l(e, "borderTopColor", "#cccccc")}`;
+      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>`;
     },
     renderHtml(e) {
-      const t = l(e, "containerPadding", "10px"), o = l(e, "width", "100%"), n = `${l(e, "borderTopWidth", "1px")} ${l(e, "borderTopStyle", "solid")} ${l(e, "borderTopColor", "#cccccc")}`, i = `<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="${o}" style="border-collapse:collapse;border-top:${n};"><tbody><tr><td style="font-size:0;line-height:0;">&nbsp;</td></tr></tbody></table>`;
-      return L(i, { padding: t, align: "center" });
+      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 z(i, { padding: t, align: "center" });
     }
   }
 }, Mt = [
@@ -1277,35 +1277,35 @@ const _t = {
 ], 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-BxuBzfKP.js").then((e) => e.htmlTool)
+    loader: () => import("./html-tool-1B9Cos-6.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-BY75hT3n.js").then((e) => e.socialTool)
+    loader: () => import("./social-tool-Ba7QItoR.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-BZDYFgXW.js").then((e) => e.menuTool)
+    loader: () => import("./menu-tool-CZjaIKsU.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-DiIJBQpM.js").then((e) => e.videoTool)
+    loader: () => import("./video-tool-OdNg0UMg.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-Dj9QeWtN.js").then((e) => e.timerTool)
+    loader: () => import("./timer-tool-p0KWo21p.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-Ep89kXMr.js").then((e) => e.tableTool)
+    loader: () => import("./table-tool-swpmCeU4.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-At5Uq7es.js").then((e) => e.formTool)
+    loader: () => import("./form-tool-DiE5BEft.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", 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>`;
+  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>`;
   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>
@@ -1333,7 +1333,7 @@ function Pt(e, t, o) {
   </style>
   <!--<![endif]-->
   <style type="text/css">
-    body { margin: 0; padding: 0; }
+    body { margin: 0; padding: 0; word-break: normal; }
     table, tr, td { vertical-align: top; border-collapse: collapse; }
     p { margin: 0; }
     a[x-apple-data-detectors='true'] { color: inherit !important; text-decoration: none !important; }
@@ -1356,15 +1356,15 @@ function Pt(e, t, o) {
 </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", a = e.cells.reduce((m, w) => m + w, 0), d = i ? `background-color:${i};` : "", c = e.values.backgroundImage;
+  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;
   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 };
+    const v = Math.round(e.cells[w] / l * n);
+    return { colHtml: zt(m, v, s, t, o), colWidthPx: v };
   });
   let f;
   if (g) {
@@ -1379,8 +1379,8 @@ function Et(e, t, o) {
   <div style="margin:0 auto;max-width:${n}px;${g ? "font-size:0;" : ""}text-align:center;">${f}</div>
 </div>`;
 }
-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) => {
+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) => {
     const g = i.get(h.type);
     if (!g) return `<!-- unknown tool: ${h.type} -->`;
     const u = {
@@ -1395,14 +1395,14 @@ function Lt(e, t, o, n, i) {
   }).join(`
 `);
   return `<div class="u_column" style="display:inline-block;vertical-align:top;width:${t}px;max-width:${t}px;font-size:14px;text-align:left;">
-  <div style="width:100%;${d}${a !== "0px" ? `border-radius:${a};` : ""}">
+  <div style="width:100%;${d}${l !== "0px" ? `border-radius:${l};` : ""}">
     <div style="padding:${r};">
       ${c || "&nbsp;"}
     </div>
   </div>
 </div>`;
 }
-function zt(e) {
+function Lt(e) {
   return `
 @media only screen and (min-width: ${e + 20}px) {
   .u_row .u_column { display: inline-block !important; }
@@ -1479,8 +1479,8 @@ function Ot(e) {
 }
 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);
+`), r = Lt(i), l = Ot(s);
+  let d = Pt(l, r, n);
   if (o?.mergeTags)
     for (const [u, f] of Object.entries(o.mergeTags))
       d = d.replaceAll(`{{${u}}}`, f);
@@ -1673,9 +1673,9 @@ let D = class extends $ {
         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);
+      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", z.reset();
+      this.style.opacity = "1", L.reset();
     }, this.handleInlineInput = () => {
       this.saveDebounceTimer && clearTimeout(this.saveDebounceTimer), this.saveDebounceTimer = setTimeout(() => this.saveInlineContent(), 500), this.showToolbar();
     }, this.handleInlineBlur = (e) => {
@@ -1749,7 +1749,7 @@ let D = class extends $ {
     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);
+    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`
@@ -1773,7 +1773,7 @@ let D = class extends $ {
       displayMode: "email"
     });
     return p`
-      ${s ? p`<div class="hidden-badge">${a}</div>` : ""}
+      ${s ? p`<div class="hidden-badge">${l}</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>
@@ -1802,8 +1802,8 @@ let D = class extends $ {
     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 l = o("lineHeight", "140%");
+    t.push(`line-height:${l}`);
     const d = o("textAlign");
     d && t.push(`text-align:${d}`);
     const c = o("letterSpacing");
@@ -1981,7 +1981,13 @@ 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), 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" : "";
+    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 : "";
+    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 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">
@@ -2656,16 +2662,16 @@ 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 re(e, t, o) {
-  const [n, i, s, r] = ie(e), a = (c, h, g, u) => t(se(c, h, g, u));
+  const [n, i, s, r] = ie(e), l = (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: (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) }
+    { 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) }
   ].map((c) => p`
           <div style="display:flex;align-items:center;gap:4px;">
             <span style="font-size:10px;color:#9ca3af;width:12px;">${c.label}</span>
@@ -2865,8 +2871,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 a of r.contents)
-          n.add(a.type);
+        for (const l of r.contents)
+          n.add(l.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);
   }
@@ -2980,8 +2986,8 @@ export {
   B as M,
   vt as T,
   wt as a,
-  L as e,
+  z as e,
   me as j,
-  l as s
+  a as s
 };
-//# sourceMappingURL=index-BTE3G6Ph.js.map
+//# sourceMappingURL=index-C_nXnIR5.js.map