@emabuild/core 0.1.3 → 0.1.5

package/dist/{index-CcfSPqXh.js → index-BoKIXJKv.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 { unsafeHTML as U } from "lit/directives/unsafe-html.js";
-function ht() {
+import { styleMap as ht } from "lit/directives/style-map.js";
+function ut() {
   const e = {};
   return {
     getCounters() {
@@ -18,7 +19,7 @@ function ht() {
     }
   };
 }
-class ut {
+class gt {
   constructor() {
     this.listeners = /* @__PURE__ */ new Map();
   }
@@ -45,7 +46,7 @@ class ut {
     t ? this.listeners.delete(t) : this.listeners.clear();
   }
 }
-class gt {
+class ft {
   constructor(t = 50) {
     this.undoStack = [], this.redoStack = [], this.maxHistory = t;
   }
@@ -78,7 +79,7 @@ class gt {
     this.undoStack = [], this.redoStack = [];
   }
 }
-function ft() {
+function bt() {
   return {
     counters: { u_row: 0, u_column: 0 },
     body: {
@@ -123,7 +124,7 @@ function ft() {
     schemaVersion: 16
   };
 }
-function bt(e, t) {
+function mt(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 xt(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 yt(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 wt(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 vt {
   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 ft(), this.counterManager = ut(), this.subscribers = /* @__PURE__ */ new Set(), this.channelSubscribers = /* @__PURE__ */ new Map(), this.events = new gt(), this._selectedId = null, this._hoveredId = null, this._viewMode = "desktop", this._activeTab = "content", this.design = bt();
   }
   // ── Subscriptions ──────────────────────────────────────────
   /** Subscribe to ALL state changes (legacy). Returns an unsubscribe function. */
@@ -426,20 +427,20 @@ class wt {
     return W(this.design, t);
   }
   findParentColumn(t) {
-    return xt(this.design, t);
+    return yt(this.design, t);
   }
   findParentRow(t) {
-    return yt(this.design, t);
+    return wt(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 = mt(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 = xt(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 $t {
   constructor() {
     this.tools = /* @__PURE__ */ new Map(), this.lazyLoaders = /* @__PURE__ */ new Map(), this.lazyMeta = /* @__PURE__ */ new Map(), this.loadingPromises = /* @__PURE__ */ new Map();
   }
@@ -535,7 +536,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) {
@@ -588,10 +589,10 @@ function et(e, t) {
     n.matches?.(t) && o.push(n);
   }), o;
 }
-class $t {
+class kt {
   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;
+      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();
@@ -605,7 +606,7 @@ class $t {
         this.handleToolDrop(a, 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();
@@ -703,7 +704,7 @@ class $t {
     I(this.contentIndicator), I(this.rowIndicator);
   }
   reset() {
-    this.currentDrop = null, z.reset();
+    this.currentDrop = null, L.reset();
   }
 }
 function l(e, t, o = "") {
@@ -723,7 +724,7 @@ function nt(e) {
   }
   return {};
 }
-function kt(e) {
+function Ct(e) {
   const t = e.action;
   if (t && typeof t == "object") {
     const o = t.values;
@@ -769,7 +770,7 @@ function Y(e, t = "arial,helvetica,sans-serif") {
   }
   return t;
 }
-function me(e, t) {
+function ye(e, t) {
   if (typeof e != "string") return t;
   try {
     return JSON.parse(e);
@@ -777,7 +778,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}">
@@ -785,7 +786,7 @@ function L(e, t) {
   </td></tr></tbody>
 </table>`;
 }
-function Ct(e, t, o) {
+function _t(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);
@@ -796,7 +797,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>',
@@ -868,10 +869,11 @@ 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 });
+      return z(d, { padding: t, extraTdStyle: a });
     }
   }
-}, Dt = {
+};
+const St = {
   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 +905,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" },
@@ -973,19 +976,24 @@ 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");
-      return p`
-        <div style="padding:${t};font-size:${o};color:${n};text-align:${i};font-weight:${s};line-height:${r};font-family:${a};">
-          ${U(d)}
-        </div>
-      `;
+      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=${ht(t)}>${U(o)}</div>`;
     },
     renderHtml(e) {
       const t = l(e, "containerPadding", "10px"), o = l(e, "fontSize", "22px"), n = l(e, "color", "#000000"), i = l(e, "textAlign", "left"), s = l(e, "fontWeight", "700"), r = l(e, "lineHeight", "140%"), a = l(e, "letterSpacing", "normal"), d = Y(e), c = l(e, "headingType", "h1"), h = it(e, "Heading"), g = `<${c} style="margin:0;font-size:${o};color:${n};text-align:${i};font-weight:${s};line-height:${r};letter-spacing:${a};font-family:${d};">${h}</${c}>`;
-      return L(g, { padding: t });
+      return z(g, { padding: t });
     }
   }
-}, St = {
+}, Rt = {
   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>',
@@ -1033,10 +1041,10 @@ const _t = {
     },
     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 });
+      return z(r, { padding: t });
     }
   }
-}, Rt = {
+}, Tt = {
   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>',
@@ -1101,14 +1109,14 @@ const _t = {
       return o ? p`<div style="padding:${t};text-align:${a};"><img src=${o} alt=${n} style="display:inline-block;max-width:100%;width:${s};border-radius:${r};border:0;" /></div>` : p`<div style="padding:${t};text-align:${a};"><div style="background:#f1f5f9;border:2px dashed #cbd5e1;border-radius:8px;padding:40px 20px;text-align:center;color:#94a3b8;font-size:13px;">No image set. Enter a URL in the property panel.</div></div>`;
     },
     renderHtml(e, t) {
-      const o = 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 = l(e, "containerPadding", "10px"), n = ot(e.src), i = l(e, "alt"), s = Ct(e), r = nt(e.src), a = r.maxWidth || l(e, "width", "100%"), d = l(e, "borderRadius", "0px"), c = l(e, "textAlign", l(e, "align", "center"));
       let h;
       a.includes("%") ? h = Math.round(t.columnWidth * (parseFloat(a) / 100)) : a === "auto" ? h = r.width || t.columnWidth : h = parseInt(a) || t.columnWidth;
       const g = d !== "0px" ? `border-radius:${d};` : "", u = `<img align="${c}" border="0" src="${n}" alt="${i}" title="${i}" style="display:block;border:0;height:auto;width:100%;max-width:${h}px;${g}" width="${h}" />`, f = s.href ? `<a href="${s.href}" target="${s.target}" style="text-decoration:none;">${u}</a>` : u;
-      return L(f, { padding: o, align: c });
+      return z(f, { padding: o, align: c });
     }
   }
-}, Tt = {
+}, It = {
   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>',
@@ -1203,16 +1211,16 @@ const _t = {
       `;
     },
     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 = 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 = _t(d, h, { bgColor: o, textColor: n, fontSize: i, fontWeight: s, borderRadius: r }), m = x ? `${x}
   <!--[if !mso]><!-->` : "<!--[if !mso]><!-->", v = `<div align="${c}">
       ${m}
       <a href="${h}" target="${g}" style="display:inline-block;text-decoration:none;text-align:center;color:${n};background-color:${o};border-radius:${r};font-size:${i};font-weight:${s};padding:${a};font-family:arial,helvetica,sans-serif;${y}mso-border-alt:none;"><span style="line-height:120%;">${d}</span></a>
       <!--<![endif]-->
     </div>`;
-      return L(v, { padding: t, align: c });
+      return z(v, { padding: t, align: c });
     }
   }
-}, It = {
+}, Mt = {
   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>',
@@ -1264,47 +1272,47 @@ const _t = {
     },
     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" });
+      return z(i, { padding: t, align: "center" });
     }
   }
-}, Mt = [
-  _t,
+}, Pt = [
   Dt,
   St,
   Rt,
   Tt,
-  It
+  It,
+  Mt
 ], 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-BKv8imO8.js").then((e) => e.htmlTool)
+    loader: () => import("./html-tool-D4ay2h-U.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-BlbbjEP9.js").then((e) => e.socialTool)
+    loader: () => import("./social-tool-B8Jg2yE-.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-DL7b9bp2.js").then((e) => e.menuTool)
+    loader: () => import("./menu-tool-KvGDbaYD.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-DK978htk.js").then((e) => e.videoTool)
+    loader: () => import("./video-tool-CdGVmZxz.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-D6palusx.js").then((e) => e.timerTool)
+    loader: () => import("./timer-tool-Ck1ERDW-.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-DwFJnQBX.js").then((e) => e.tableTool)
+    loader: () => import("./table-tool-BzpD08dq.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-DVWF0Cn-.js").then((e) => e.formTool)
+    loader: () => import("./form-tool-CduLiZgt.js").then((e) => e.formTool)
   }
 ];
-function Pt(e, t, o) {
+function Et(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">
@@ -1355,7 +1363,7 @@ function Pt(e, t, o) {
 </body>
 </html>`;
 }
-function Et(e, t, o) {
+function zt(e, t, o) {
   const n = parseInt(t.contentWidth || "600"), i = e.values.backgroundColor || "", s = e.values.columnsBackgroundColor || "", r = e.values.padding || "0px", a = e.cells.reduce((m, w) => m + w, 0), d = i ? `background-color:${i};` : "", c = e.values.backgroundImage;
   let h = "";
   if (c?.url) {
@@ -1402,7 +1410,7 @@ function Lt(e, t, o, n, i) {
   </div>
 </div>`;
 }
-function zt(e) {
+function Vt(e) {
   return `
 @media only screen and (min-width: ${e + 20}px) {
   .u_row .u_column { display: inline-block !important; }
@@ -1451,7 +1459,7 @@ function zt(e) {
   .u_hide_mobile { display: block !important; }
 }`;
 }
-const Vt = [
+const At = [
   "box-sizing",
   "float",
   "overflow-wrap",
@@ -1467,20 +1475,20 @@ const Vt = [
   "display:\\s*flex",
   "display:\\s*grid",
   "gap"
-], At = new RegExp(
-  `(?:;\\s*|^\\s*)(${Vt.join("|")})\\s*:[^;]*;?`,
+], Bt = new RegExp(
+  `(?:;\\s*|^\\s*)(${At.join("|")})\\s*:[^;]*;?`,
   "gi"
-), Bt = /var\(--[^)]*\)/gi;
-function Ot(e) {
+), Ot = /var\(--[^)]*\)/gi;
+function Ht(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(Bt, ""), n = n.replace(Ot, "inherit"), n = n.replace(/;\s*;/g, ";").replace(/^\s*;\s*/, "").replace(/;\s*$/, "").trim(), n ? `style="${n}"` : "";
   });
 }
-function Ht(e, t, o) {
-  const n = e.body.values, i = parseInt(n.contentWidth || "600"), s = e.body.rows.map((u) => Et(u, n, t)).join(`
-`), r = zt(i), a = Ot(s);
-  let d = Pt(a, r, n);
+function jt(e, t, o) {
+  const n = e.body.values, i = parseInt(n.contentWidth || "600"), s = e.body.rows.map((u) => zt(u, n, t)).join(`
+`), r = Vt(i), a = Ht(s);
+  let d = Et(a, r, n);
   if (o?.mergeTags)
     for (const [u, f] of Object.entries(o.mergeTags))
       d = d.replaceAll(`{{${u}}}`, f);
@@ -1521,10 +1529,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 Wt = Object.defineProperty, Ut = Object.getOwnPropertyDescriptor, at = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? Ut(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 && Wt(t, o, i), i;
 };
 let V = class extends $ {
   constructor() {
@@ -1657,10 +1665,10 @@ at([
 V = at([
   C("me-inline-toolbar")
 ], V);
-var Ut = Object.defineProperty, Ft = Object.getOwnPropertyDescriptor, O = (e, t, o, n) => {
-  for (var i = n > 1 ? void 0 : n ? Ft(t, o) : t, s = e.length - 1, r; s >= 0; s--)
+var Ft = Object.defineProperty, Nt = Object.getOwnPropertyDescriptor, O = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? Nt(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 && Ft(t, o, i), i;
 };
 const rt = /* @__PURE__ */ new Set(["text", "heading", "paragraph"]);
 function lt(e) {
@@ -1673,9 +1681,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) => {
@@ -1869,10 +1877,10 @@ O([
 D = O([
   C("me-content-renderer")
 ], D);
-var Nt = Object.defineProperty, qt = Object.getOwnPropertyDescriptor, H = (e, t, o, n) => {
-  for (var i = n > 1 ? void 0 : n ? qt(t, o) : t, s = e.length - 1, r; s >= 0; s--)
+var qt = Object.defineProperty, Gt = Object.getOwnPropertyDescriptor, H = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? Gt(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 && qt(t, o, i), i;
 };
 let S = class extends $ {
   constructor() {
@@ -1948,10 +1956,10 @@ H([
 S = H([
   C("me-column-renderer")
 ], S);
-var Gt = Object.defineProperty, Kt = Object.getOwnPropertyDescriptor, F = (e, t, o, n) => {
-  for (var i = n > 1 ? void 0 : n ? Kt(t, o) : t, s = e.length - 1, r; s >= 0; s--)
+var Kt = Object.defineProperty, Yt = Object.getOwnPropertyDescriptor, F = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? Yt(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 && Kt(t, o, i), i;
 };
 let R = class extends $ {
   constructor() {
@@ -1981,7 +1989,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), a = e.values.backgroundImage, d = typeof a == "object" && a?.url ? a.url : "";
+    let c = "";
+    if (d) {
+      const x = a.repeat === !0 || a.repeat === "repeat" ? "repeat" : "no-repeat", m = a.cover === !0 ? "cover" : a.fullWidth === !0 ? "100% auto" : "auto", w = a.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">
@@ -2094,10 +2108,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 Jt = Object.defineProperty, Xt = Object.getOwnPropertyDescriptor, J = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? Xt(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 && Jt(t, o, i), i;
 };
 let M = class extends $ {
   constructor() {
@@ -2215,10 +2229,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 Qt = Object.defineProperty, Zt = Object.getOwnPropertyDescriptor, dt = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? Zt(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 && Qt(t, o, i), i;
 };
 const G = [
   // System / email-safe fonts
@@ -2368,10 +2382,10 @@ dt([
 A = dt([
   C("me-body-settings")
 ], A);
-var Zt = Object.defineProperty, te = Object.getOwnPropertyDescriptor, X = (e, t, o, n) => {
-  for (var i = n > 1 ? void 0 : n ? te(t, o) : t, s = e.length - 1, r; s >= 0; s--)
+var te = Object.defineProperty, ee = Object.getOwnPropertyDescriptor, X = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? ee(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 && te(t, o, i), i;
 };
 let P = class extends $ {
   constructor() {
@@ -2608,7 +2622,7 @@ X([
 P = X([
   C("me-editor-sidebar")
 ], P);
-function ee(e, t, o) {
+function oe(e, t, o) {
   const n = e && /^#[0-9a-fA-F]{3,8}$/.test(e) ? e : "#000000";
   return p`
     <div class="prop-row">
@@ -2622,7 +2636,7 @@ function ee(e, t, o) {
     </div>
   `;
 }
-function oe(e, t, o, n) {
+function ne(e, t, o, n) {
   const i = n?.options || [];
   return p`
     <div class="prop-row">
@@ -2633,7 +2647,7 @@ function oe(e, t, o, n) {
     </div>
   `;
 }
-function ne(e, t, o) {
+function ie(e, t, o) {
   return p`
     <div class="prop-row">
       <label class="prop-label">${o}</label>
@@ -2648,15 +2662,15 @@ function ne(e, t, o) {
     </div>
   `;
 }
-function ie(e) {
+function se(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 re(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));
+function le(e, t, o) {
+  const [n, i, s, r] = se(e), a = (c, h, g, u) => t(re(c, h, g, u));
   return p`
     <div class="prop-row">
       <label class="prop-label">${o}</label>
@@ -2678,7 +2692,7 @@ function re(e, t, o) {
     </div>
   `;
 }
-function le(e, t, o) {
+function ae(e, t, o) {
   return p`
     <div class="prop-row">
       <div class="prop-toggle">
@@ -2689,7 +2703,7 @@ function le(e, t, o) {
     </div>
   `;
 }
-function ae(e, t, o) {
+function de(e, t, o) {
   return p`
     <div class="prop-row">
       <label class="prop-label">${o}</label>
@@ -2698,7 +2712,7 @@ function ae(e, t, o) {
     </div>
   `;
 }
-function de(e, t, o) {
+function ce(e, t, o) {
   return p`
     <div class="prop-row">
       <label class="prop-label">${o}</label>
@@ -2710,10 +2724,10 @@ 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--)
+var pe = Object.defineProperty, he = Object.getOwnPropertyDescriptor, Q = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? he(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 && pe(t, o, i), i;
 };
 let E = class extends $ {
   constructor() {
@@ -2764,20 +2778,20 @@ 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 oe(n, i, o.label);
       case "toggle":
-        return le(n, i, o.label);
+        return ae(n, i, o.label);
       case "rich_text":
-        return de(n, i, o.label);
+        return ce(n, i, o.label);
       case "dropdown":
-        return oe(n, i, o.label, o.widgetParams);
+        return ne(n, i, o.label, o.widgetParams);
       case "alignment":
-        return ne(n, i, o.label);
+        return ie(n, i, o.label);
       case "padding":
-        return re(n, i, o.label);
+        return le(n, i, o.label);
       case "text":
       default:
-        return ae(n, i, o.label);
+        return de(n, i, o.label);
     }
   }
 };
@@ -2824,14 +2838,14 @@ 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 ue = Object.defineProperty, ge = Object.getOwnPropertyDescriptor, ct = (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 && he(t, o, i), i;
+  return n && i && ue(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 vt(), this.toolRegistry = new $t(), 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";
@@ -2843,7 +2857,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 kt(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 }));
@@ -2874,7 +2888,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(jt(e, n, o));
   }
   async exportHtmlAsync(e) {
     return new Promise((t) => this.exportHtml(t, e));
@@ -2916,7 +2930,7 @@ let B = class extends $ {
       });
   }
   registerBuiltInTools() {
-    for (const e of Mt)
+    for (const e of Pt)
       this.toolRegistry.register(e);
     for (const { meta: e, loader: t } of st)
       this.toolRegistry.registerLazy(e, t);
@@ -2974,14 +2988,14 @@ _("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 we = customElements.get("mail-editor") !== void 0;
 export {
-  xe as E,
+  we as E,
   B as M,
-  vt as T,
-  wt as a,
-  L as e,
-  me as j,
+  $t as T,
+  vt as a,
+  z as e,
+  ye as j,
   l as s
 };
-//# sourceMappingURL=index-CcfSPqXh.js.map
+//# sourceMappingURL=index-BoKIXJKv.js.map