@emabuild/core 0.0.8 → 0.0.9

package/dist/{mail-editor-D3QbvBKs.js → index-DV_tofKb.js}

@@ -1,7 +1,7 @@
-import { html as m, css as z, LitElement as L } from "lit";
-import { property as W, customElement as j } from "lit/decorators.js";
-import { unsafeHTML as A } from "lit/directives/unsafe-html.js";
-function U() {
+import { html as c, LitElement as w, css as v } from "lit";
+import { property as b, customElement as $ } from "lit/decorators.js";
+import { unsafeHTML as q } from "lit/directives/unsafe-html.js";
+function rt() {
   const e = {};
   return {
     getCounters() {
@@ -18,7 +18,7 @@ function U() {
     }
   };
 }
-class O {
+class st {
   constructor() {
     this.listeners = /* @__PURE__ */ new Map();
   }
@@ -45,7 +45,7 @@ class O {
     t ? this.listeners.delete(t) : this.listeners.clear();
   }
 }
-class N {
+class lt {
   constructor(t = 50) {
     this.undoStack = [], this.redoStack = [], this.maxHistory = t;
   }
@@ -78,7 +78,7 @@ class N {
     this.undoStack = [], this.redoStack = [];
   }
 }
-function F() {
+function at() {
   return {
     counters: { u_row: 0, u_column: 0 },
     body: {
@@ -123,7 +123,7 @@ function F() {
     schemaVersion: 16
   };
 }
-function q(e, t) {
+function dt(e, t) {
   const o = e.next("u_row"), n = t.map(() => {
     const i = e.next("u_column");
     return {
@@ -156,7 +156,7 @@ function q(e, t) {
     }
   };
 }
-function G(e, t, o = {}) {
+function ct(e, t, o = {}) {
   const n = e.next(`u_content_${t}`), i = `u_content_${t}_${n}`;
   return {
     id: i,
@@ -172,37 +172,37 @@ function G(e, t, o = {}) {
     }
   };
 }
-function D(e, t) {
+function U(e, t) {
   return e.body.rows.find((o) => o.id === t);
 }
-function C(e, t) {
+function O(e, t) {
   for (const o of e.body.rows) {
     const n = o.columns.find((i) => i.id === t);
     if (n) return n;
   }
 }
-function $(e, t) {
+function H(e, t) {
   for (const o of e.body.rows)
     for (const n of o.columns) {
       const i = n.contents.find((r) => r.id === t);
       if (i) return i;
     }
 }
-function K(e, t) {
+function pt(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 J(e, t) {
+function ht(e, t) {
   for (const o of e.body.rows)
     if (o.columns.some((n) => n.id === t)) return o;
 }
-function I(e, t) {
+function F(e, t) {
   return e.body.rows.findIndex((o) => o.id === t);
 }
-class X {
+class ut {
   constructor() {
-    this.history = new N(), this.counterManager = U(), this.subscribers = /* @__PURE__ */ new Set(), this.channelSubscribers = /* @__PURE__ */ new Map(), this.events = new O(), this._selectedId = null, this._hoveredId = null, this._viewMode = "desktop", this._activeTab = "content", this.design = F();
+    this.history = new lt(), this.counterManager = rt(), this.subscribers = /* @__PURE__ */ new Set(), this.channelSubscribers = /* @__PURE__ */ new Map(), this.events = new st(), this._selectedId = null, this._hoveredId = null, this._viewMode = "desktop", this._activeTab = "content", this.design = at();
   }
   // ── Subscriptions ──────────────────────────────────────────
   /** Subscribe to ALL state changes (legacy). Returns an unsubscribe function. */
@@ -312,7 +312,7 @@ class X {
   }
   /** Remove a row by ID */
   removeRow(t) {
-    const o = I(this.design, t);
+    const o = F(this.design, t);
     o !== -1 && (this.history.push(this.design), this.design.body.rows.splice(o, 1), this._selectedId === t && (this._selectedId = null), this.notifyChannels("design"), this.emitUpdate("row_removed"));
   }
   /** Move a row from one index to another */
@@ -323,41 +323,41 @@ class X {
   }
   /** Duplicate a row, assigning fresh IDs to all nested elements */
   duplicateRow(t) {
-    const o = D(this.design, t);
+    const o = U(this.design, t);
     if (!o) return;
     this.history.push(this.design);
     const n = structuredClone(o), i = this.counterManager.next("u_row");
     n.id = `u_row_${i}`, n.values._meta = { htmlID: n.id, htmlClassNames: "u_row" };
-    for (const l of n.columns) {
+    for (const s of n.columns) {
       const a = this.counterManager.next("u_column");
-      l.id = `u_column_${a}`, l.values._meta = { htmlID: l.id, htmlClassNames: "u_column" };
-      for (const d of l.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}` };
+      s.id = `u_column_${a}`, s.values._meta = { htmlID: s.id, htmlClassNames: "u_column" };
+      for (const d of s.contents) {
+        const p = this.counterManager.next(`u_content_${d.type}`);
+        d.id = `u_content_${d.type}_${p}`, d.values._meta = { htmlID: d.id, htmlClassNames: `u_content_${d.type}` };
       }
     }
-    const r = I(this.design, t);
+    const r = F(this.design, t);
     this.design.body.rows.splice(r + 1, 0, n), this.syncCounters(), this.notifyChannels("design"), this.emitUpdate("row_added", n);
   }
   /** Get the index of a row */
   getRowIndex(t) {
-    return I(this.design, t);
+    return F(this.design, t);
   }
   /** Update row-level values */
   updateRowValues(t, o) {
-    const n = D(this.design, t);
+    const n = U(this.design, t);
     n && (this.history.push(this.design), Object.assign(n.values, o), this.notifyChannels("design"), this.emitUpdate("content_updated"));
   }
   // ── Column Operations ──────────────────────────────────────
   /** Update column-level values */
   updateColumnValues(t, o) {
-    const n = C(this.design, t);
+    const n = O(this.design, t);
     n && (this.history.push(this.design), Object.assign(n.values, o), this.notifyChannels("design"), this.emitUpdate("content_updated"));
   }
   // ── Content Operations ─────────────────────────────────────
   /** Add content to a column at the given index */
   addContent(t, o, n) {
-    const i = C(this.design, t);
+    const i = O(this.design, t);
     if (!i) return;
     this.history.push(this.design);
     const r = structuredClone(o);
@@ -376,36 +376,36 @@ class X {
   }
   /** Update content values by ID */
   updateContentValues(t, o) {
-    const n = $(this.design, t);
+    const n = H(this.design, t);
     n && (this.history.push(this.design), Object.assign(n.values, o), this.notifyChannels("design"), this.emitUpdate("content_updated"));
   }
   /** Move a content block to a different column at a given index */
   moveContent(t, o, n) {
-    const i = $(this.design, t);
+    const i = H(this.design, t);
     if (!i) return;
     this.history.push(this.design);
-    for (const l of this.design.body.rows)
-      for (const a of l.columns) {
-        const d = a.contents.findIndex((c) => c.id === t);
+    for (const s of this.design.body.rows)
+      for (const a of s.columns) {
+        const d = a.contents.findIndex((p) => p.id === t);
         if (d !== -1) {
           a.contents.splice(d, 1);
           break;
         }
       }
-    const r = C(this.design, o);
+    const r = O(this.design, o);
     r && r.contents.splice(n, 0, i), this.notifyChannels("design"), this.emitUpdate("content_reordered");
   }
   /** Duplicate a content block, inserting the copy right after the original */
   duplicateContent(t) {
-    const o = $(this.design, t);
+    const o = H(this.design, t);
     if (o)
       for (const n of this.design.body.rows)
         for (const i of n.columns) {
-          const r = i.contents.findIndex((l) => l.id === t);
+          const r = i.contents.findIndex((s) => s.id === t);
           if (r !== -1) {
             this.history.push(this.design);
-            const l = structuredClone(o), a = this.counterManager.next(`u_content_${o.type}`);
-            l.id = `u_content_${o.type}_${a}`, l.values._meta = { htmlID: l.id, htmlClassNames: `u_content_${o.type}` }, i.contents.splice(r + 1, 0, l), this.syncCounters(), this.notifyChannels("design"), this.emitUpdate("content_added", l);
+            const s = structuredClone(o), a = this.counterManager.next(`u_content_${o.type}`);
+            s.id = `u_content_${o.type}_${a}`, s.values._meta = { htmlID: s.id, htmlClassNames: `u_content_${o.type}` }, i.contents.splice(r + 1, 0, s), this.syncCounters(), this.notifyChannels("design"), this.emitUpdate("content_added", s);
             return;
           }
         }
@@ -417,29 +417,29 @@ class X {
   }
   // ── Lookups (delegate to design-lookup) ────────────────────
   findRow(t) {
-    return D(this.design, t);
+    return U(this.design, t);
   }
   findColumn(t) {
-    return C(this.design, t);
+    return O(this.design, t);
   }
   findContent(t) {
-    return $(this.design, t);
+    return H(this.design, t);
   }
   findParentColumn(t) {
-    return K(this.design, t);
+    return pt(this.design, t);
   }
   findParentRow(t) {
-    return J(this.design, t);
+    return ht(this.design, t);
   }
   // ── Factory Methods (delegate to design-factory) ───────────
   /** Create a new row with the given column layout */
   createRow(t) {
-    const o = q(this.counterManager, t);
+    const o = dt(this.counterManager, t);
     return this.syncCounters(), o;
   }
   /** Create a new content block for the given tool type */
   createContent(t, o = {}) {
-    const n = G(this.counterManager, t, o);
+    const n = ct(this.counterManager, t, o);
     return this.syncCounters(), n;
   }
   // ── Private Helpers ────────────────────────────────────────
@@ -450,7 +450,7 @@ class X {
     this.events.emit("design:updated", { type: t, item: o });
   }
 }
-class Y {
+class gt {
   constructor() {
     this.tools = /* @__PURE__ */ new Map(), this.lazyLoaders = /* @__PURE__ */ new Map(), this.lazyMeta = /* @__PURE__ */ new Map(), this.loadingPromises = /* @__PURE__ */ new Map();
   }
@@ -526,8 +526,8 @@ class Y {
     if (!o) return {};
     const n = { ...o.defaultValues };
     for (const i of Object.values(o.options))
-      for (const [r, l] of Object.entries(i.options))
-        r in n || (n[r] = l.defaultValue);
+      for (const [r, s] of Object.entries(i.options))
+        r in n || (n[r] = s.defaultValue);
     return n;
   }
   /** Get property groups for a tool */
@@ -535,7 +535,7 @@ class Y {
     return this.tools.get(t)?.options ?? {};
   }
 }
-const R = {
+const z = {
   /** ID of the content currently being dragged (null if not dragging content) */
   draggingContentId: null,
   startContentDrag(e) {
@@ -545,7 +545,7 @@ const R = {
     this.draggingContentId = null;
   }
 };
-function T(e) {
+function J(e) {
   const t = document.createElement("div");
   return Object.assign(t.style, {
     position: "absolute",
@@ -560,11 +560,11 @@ function T(e) {
     boxShadow: `0 0 6px ${e}80`
   }), t;
 }
-function M(e, t, o, n, i = "4px") {
+function X(e, t, o, n, i = "4px") {
   e.parentNode !== t && (e.remove(), t.appendChild(e));
-  const l = (t instanceof ShadowRoot ? t.host : t).getBoundingClientRect();
+  const s = (t instanceof ShadowRoot ? t.host : t).getBoundingClientRect();
   let a;
-  o.length === 0 || n === 0 ? a = o.length === 0 ? 0 : o[0].getBoundingClientRect().top - l.top : n >= o.length ? a = o[o.length - 1].getBoundingClientRect().bottom - l.top : a = o[n].getBoundingClientRect().top - l.top, Object.assign(e.style, {
+  o.length === 0 || n === 0 ? a = o.length === 0 ? 0 : o[0].getBoundingClientRect().top - s.top : n >= o.length ? a = o[o.length - 1].getBoundingClientRect().bottom - s.top : a = o[n].getBoundingClientRect().top - s.top, Object.assign(e.style, {
     display: "block",
     top: `${a}px`,
     left: i,
@@ -572,32 +572,32 @@ function M(e, t, o, n, i = "4px") {
     width: "auto"
   });
 }
-function x(e) {
+function S(e) {
   e && (e.style.display = "none");
 }
-function S(e, t) {
+function N(e, t) {
   const o = (e instanceof ShadowRoot, e.children);
   for (const n of Array.from(o)) {
     const i = n;
-    t(i), i.shadowRoot && S(i.shadowRoot, t), i.children?.length && S(i, t);
+    t(i), i.shadowRoot && N(i.shadowRoot, t), i.children?.length && N(i, t);
   }
 }
-function V(e, t) {
+function Q(e, t) {
   const o = [];
-  return S(e, (n) => {
+  return N(e, (n) => {
     n.matches?.(t) && o.push(n);
   }), o;
 }
-class Q {
+class bt {
   constructor(t, o, n) {
     this.currentDrop = null, this.contentIndicator = null, this.rowIndicator = null, this.onDragOver = (i) => {
-      const r = i.dataTransfer?.types || [], l = r.includes("application/maileditor-tool"), a = r.includes("application/maileditor-layout"), d = r.includes("application/maileditor-content") || !!R.draggingContentId;
-      !l && !d && !a || (i.preventDefault(), i.dataTransfer.dropEffect = l || a ? "copy" : "move", a ? (this.currentDrop = this.findRowDropTarget(i.clientY), x(this.contentIndicator), this.showRowIndicator()) : (this.currentDrop = this.findContentDropTarget(i.clientX, i.clientY), x(this.rowIndicator), this.showContentIndicator()));
+      const r = i.dataTransfer?.types || [], s = r.includes("application/maileditor-tool"), a = r.includes("application/maileditor-layout"), d = r.includes("application/maileditor-content") || !!z.draggingContentId;
+      !s && !d && !a || (i.preventDefault(), i.dataTransfer.dropEffect = s || a ? "copy" : "move", a ? (this.currentDrop = this.findRowDropTarget(i.clientY), S(this.contentIndicator), this.showRowIndicator()) : (this.currentDrop = this.findContentDropTarget(i.clientX, i.clientY), S(this.rowIndicator), this.showContentIndicator()));
     }, this.onDrop = (i) => {
       i.preventDefault(), this.hideAllIndicators();
-      const r = this.currentDrop, l = i.dataTransfer?.getData("application/maileditor-layout");
-      if (l) {
-        this.handleLayoutDrop(JSON.parse(l), r), this.reset();
+      const r = this.currentDrop, s = i.dataTransfer?.getData("application/maileditor-layout");
+      if (s) {
+        this.handleLayoutDrop(JSON.parse(s), r), this.reset();
         return;
       }
       const a = i.dataTransfer?.getData("application/maileditor-tool");
@@ -605,7 +605,7 @@ class Q {
         this.handleToolDrop(a, r), this.reset();
         return;
       }
-      const d = i.dataTransfer?.getData("application/maileditor-content") || R.draggingContentId;
+      const d = i.dataTransfer?.getData("application/maileditor-content") || z.draggingContentId;
       d && this.handleContentDrop(d, r), this.reset();
     }, this.onDragEnd = () => {
       this.hideAllIndicators(), this.reset();
@@ -616,7 +616,7 @@ class Q {
   }
   /** Attach all drag event listeners to the shadow root */
   attach() {
-    this.root.addEventListener("dragover", this.onDragOver), this.root.addEventListener("drop", this.onDrop), this.root.addEventListener("dragend", this.onDragEnd), this.root.addEventListener("dragleave", this.onDragLeave), this.contentIndicator = T("#3b82f6"), this.rowIndicator = T("#8b5cf6");
+    this.root.addEventListener("dragover", this.onDragOver), this.root.addEventListener("drop", this.onDrop), this.root.addEventListener("dragend", this.onDragEnd), this.root.addEventListener("dragleave", this.onDragLeave), this.contentIndicator = J("#3b82f6"), this.rowIndicator = J("#8b5cf6");
   }
   /** Remove all event listeners and clean up indicators */
   detach() {
@@ -648,32 +648,32 @@ class Q {
     const n = Array.from(o.shadowRoot.querySelectorAll("me-row-renderer"));
     if (n.length === 0) return { type: "row", rowIndex: 0, y: 0 };
     let i = Math.abs(t - n[0].getBoundingClientRect().top), r = { type: "row", rowIndex: 0, y: n[0].getBoundingClientRect().top };
-    for (let l = 0; l < n.length; l++) {
-      const a = n[l].getBoundingClientRect().bottom, d = Math.abs(t - a);
-      d < i && (i = d, r = { type: "row", rowIndex: l + 1, y: a });
+    for (let s = 0; s < n.length; s++) {
+      const a = n[s].getBoundingClientRect().bottom, d = Math.abs(t - a);
+      d < i && (i = d, r = { type: "row", rowIndex: s + 1, y: a });
     }
     return r;
   }
   findContentDropTarget(t, o) {
-    const n = V(this.root, "me-column-renderer");
+    const n = Q(this.root, "me-column-renderer");
     let i = null, r = 1 / 0;
-    for (const l of n) {
-      const a = l.dataset.columnId;
-      if (!a || !l.shadowRoot) continue;
-      const d = l.getBoundingClientRect();
+    for (const s of n) {
+      const a = s.dataset.columnId;
+      if (!a || !s.shadowRoot) continue;
+      const d = s.getBoundingClientRect();
       if (t < d.left || t > d.right) continue;
-      const c = Array.from(l.shadowRoot.querySelectorAll("me-content-renderer"));
-      if (c.length === 0) {
-        const h = Math.abs(o - (d.top + d.height / 2));
-        h < r && (r = h, i = { type: "content", columnId: a, contentIndex: 0, y: d.top + d.height / 2 });
+      const p = Array.from(s.shadowRoot.querySelectorAll("me-content-renderer"));
+      if (p.length === 0) {
+        const u = Math.abs(o - (d.top + d.height / 2));
+        u < r && (r = u, i = { type: "content", columnId: a, contentIndex: 0, y: d.top + d.height / 2 });
         continue;
       }
-      const u = c[0].getBoundingClientRect().top;
-      let g = Math.abs(o - u);
-      g < r && (r = g, i = { type: "content", columnId: a, contentIndex: 0, y: u });
-      for (let h = 0; h < c.length; h++) {
-        const f = c[h].getBoundingClientRect(), b = c[h + 1]?.getBoundingClientRect(), p = b ? (f.bottom + b.top) / 2 : f.bottom;
-        g = Math.abs(o - p), g < r && (r = g, i = { type: "content", columnId: a, contentIndex: h + 1, y: p });
+      const h = p[0].getBoundingClientRect().top;
+      let g = Math.abs(o - h);
+      g < r && (r = g, i = { type: "content", columnId: a, contentIndex: 0, y: h });
+      for (let u = 0; u < p.length; u++) {
+        const m = p[u].getBoundingClientRect(), x = p[u + 1]?.getBoundingClientRect(), f = x ? (m.bottom + x.top) / 2 : m.bottom;
+        g = Math.abs(o - f), g < r && (r = g, i = { type: "content", columnId: a, contentIndex: u + 1, y: f });
       }
     }
     return i;
@@ -681,36 +681,36 @@ class Q {
   // ── Indicator Positioning ──────────────────────────────────
   showContentIndicator() {
     if (!this.contentIndicator || !this.currentDrop?.columnId) {
-      x(this.contentIndicator);
+      S(this.contentIndicator);
       return;
     }
-    const o = V(this.root, "me-column-renderer").find((i) => i.dataset.columnId === this.currentDrop.columnId);
+    const o = Q(this.root, "me-column-renderer").find((i) => i.dataset.columnId === this.currentDrop.columnId);
     if (!o?.shadowRoot) return;
     const n = Array.from(o.shadowRoot.querySelectorAll("me-content-renderer"));
-    M(this.contentIndicator, o.shadowRoot, n, this.currentDrop.contentIndex ?? 0, "4px");
+    X(this.contentIndicator, o.shadowRoot, n, this.currentDrop.contentIndex ?? 0, "4px");
   }
   showRowIndicator() {
     if (!this.rowIndicator || !this.currentDrop) {
-      x(this.rowIndicator);
+      S(this.rowIndicator);
       return;
     }
     const t = this.root.querySelector("me-editor-canvas"), o = t?.shadowRoot?.querySelector(".canvas-body");
     if (!o) return;
     const n = Array.from(t.shadowRoot.querySelectorAll("me-row-renderer"));
-    M(this.rowIndicator, o, n, this.currentDrop.rowIndex ?? 0, "0");
+    X(this.rowIndicator, o, n, this.currentDrop.rowIndex ?? 0, "0");
   }
   hideAllIndicators() {
-    x(this.contentIndicator), x(this.rowIndicator);
+    S(this.contentIndicator), S(this.rowIndicator);
   }
   reset() {
-    this.currentDrop = null, R.reset();
+    this.currentDrop = null, z.reset();
   }
 }
-function s(e, t, o = "") {
+function l(e, t, o = "") {
   const n = e[t];
   return typeof n == "string" && n !== "" ? n : o;
 }
-function bt(e, t) {
+function oe(e, t) {
   if (typeof e != "string") return t;
   try {
     return JSON.parse(e);
@@ -718,7 +718,7 @@ function bt(e, t) {
     return t;
   }
 }
-function y(e, t) {
+function M(e, t) {
   const { padding: o, align: n = "left", extraTdStyle: i = "" } = t;
   return `<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
   <tbody><tr><td style="${`overflow-wrap:break-word;word-break:break-word;padding:${o};font-family:arial,helvetica,sans-serif;${i}`}" align="${n}">
@@ -726,18 +726,18 @@ function y(e, t) {
   </td></tr></tbody>
 </table>`;
 }
-function Z(e, t, o) {
-  const { bgColor: n, textColor: i, fontSize: r, fontWeight: l, borderRadius: a } = o, d = parseInt(a) || 0;
+function ft(e, t, o) {
+  const { bgColor: n, textColor: i, fontSize: r, fontWeight: s, borderRadius: a } = o, d = parseInt(a) || 0;
   if (d <= 0) return "";
-  const c = Math.round(d / 20 * 100);
+  const p = Math.round(d / 20 * 100);
   return `<!--[if mso]>
-  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${t}" style="height:auto;v-text-anchor:middle;width:auto;" arcsize="${c}%" stroke="f" fillcolor="${n}">
+  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${t}" style="height:auto;v-text-anchor:middle;width:auto;" arcsize="${p}%" stroke="f" fillcolor="${n}">
     <w:anchorlock/>
-    <center style="color:${i};font-family:arial,helvetica,sans-serif;font-size:${r};font-weight:${l};">${e}</center>
+    <center style="color:${i};font-family:arial,helvetica,sans-serif;font-size:${r};font-weight:${s};">${e}</center>
   </v:roundrect>
   <![endif]-->`;
 }
-const tt = {
+const mt = {
   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>',
@@ -800,19 +800,19 @@ const tt = {
   },
   renderer: {
     renderEditor(e) {
-      const t = s(e, "containerPadding", "10px"), o = s(e, "backgroundColor", "transparent"), n = s(e, "color", "inherit"), i = s(e, "lineHeight", "140%"), r = s(e, "text");
-      return m`
+      const t = l(e, "containerPadding", "10px"), o = l(e, "backgroundColor", "transparent"), n = l(e, "color", "inherit"), i = l(e, "lineHeight", "140%"), r = l(e, "text");
+      return c`
         <div style="padding:${t};background-color:${o};color:${n};line-height:${i};word-break:break-word;">
-          ${A(r)}
+          ${q(r)}
         </div>
       `;
     },
     renderHtml(e) {
-      const t = s(e, "containerPadding", "10px"), o = s(e, "backgroundColor"), n = s(e, "color", "#000000"), i = s(e, "lineHeight", "140%"), r = s(e, "textAlign", "left"), l = s(e, "text"), a = o ? `background-color:${o};` : "", d = `<div style="font-size:14px;color:${n};line-height:${i};text-align:${r};word-wrap:break-word;">${l}</div>`;
-      return y(d, { padding: t, extraTdStyle: a });
+      const t = l(e, "containerPadding", "10px"), o = l(e, "backgroundColor"), n = l(e, "color", "#000000"), i = l(e, "lineHeight", "140%"), r = l(e, "textAlign", "left"), s = l(e, "text"), a = o ? `background-color:${o};` : "", d = `<div style="font-size:14px;color:${n};line-height:${i};text-align:${r};word-wrap:break-word;">${s}</div>`;
+      return M(d, { padding: t, extraTdStyle: a });
     }
   }
-}, et = {
+}, xt = {
   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>',
@@ -914,19 +914,19 @@ const tt = {
   },
   renderer: {
     renderEditor(e) {
-      const t = s(e, "containerPadding", "10px"), o = s(e, "fontSize", "22px"), n = s(e, "color", "#000000"), i = s(e, "textAlign", "left"), r = s(e, "fontWeight", "700"), l = s(e, "lineHeight", "140%"), a = s(e, "text", "Heading");
-      return m`
-        <div style="padding:${t};font-size:${o};color:${n};text-align:${i};font-weight:${r};line-height:${l};">
+      const t = l(e, "containerPadding", "10px"), o = l(e, "fontSize", "22px"), n = l(e, "color", "#000000"), i = l(e, "textAlign", "left"), r = l(e, "fontWeight", "700"), s = l(e, "lineHeight", "140%"), a = l(e, "text", "Heading");
+      return c`
+        <div style="padding:${t};font-size:${o};color:${n};text-align:${i};font-weight:${r};line-height:${s};">
           ${a}
         </div>
       `;
     },
     renderHtml(e) {
-      const t = s(e, "containerPadding", "10px"), o = s(e, "fontSize", "22px"), n = s(e, "color", "#000000"), i = s(e, "textAlign", "left"), r = s(e, "fontWeight", "700"), l = s(e, "lineHeight", "140%"), a = s(e, "letterSpacing", "normal"), d = s(e, "headingType", "h1"), c = s(e, "text", "Heading"), u = `<${d} style="margin:0;font-size:${o};color:${n};text-align:${i};font-weight:${r};line-height:${l};letter-spacing:${a};">${c}</${d}>`;
-      return y(u, { padding: t });
+      const t = l(e, "containerPadding", "10px"), o = l(e, "fontSize", "22px"), n = l(e, "color", "#000000"), i = l(e, "textAlign", "left"), r = l(e, "fontWeight", "700"), s = l(e, "lineHeight", "140%"), a = l(e, "letterSpacing", "normal"), d = l(e, "headingType", "h1"), p = l(e, "text", "Heading"), h = `<${d} style="margin:0;font-size:${o};color:${n};text-align:${i};font-weight:${r};line-height:${s};letter-spacing:${a};">${p}</${d}>`;
+      return M(h, { padding: t });
     }
   }
-}, ot = {
+}, yt = {
   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>',
@@ -969,15 +969,15 @@ const tt = {
   },
   renderer: {
     renderEditor(e) {
-      const t = s(e, "containerPadding", "10px"), o = s(e, "color", "#374151"), n = s(e, "lineHeight", "160%");
-      return m`<div style="padding:${t};color:${o};line-height:${n};word-break:break-word;">${A(s(e, "text"))}</div>`;
+      const t = l(e, "containerPadding", "10px"), o = l(e, "color", "#374151"), n = l(e, "lineHeight", "160%");
+      return c`<div style="padding:${t};color:${o};line-height:${n};word-break:break-word;">${q(l(e, "text"))}</div>`;
     },
     renderHtml(e) {
-      const t = s(e, "containerPadding", "10px"), o = s(e, "color", "#374151"), n = s(e, "lineHeight", "160%"), i = s(e, "textAlign", "left"), r = s(e, "letterSpacing", "normal"), l = `<div style="font-size:14px;color:${o};line-height:${n};text-align:${i};letter-spacing:${r};word-wrap:break-word;">${s(e, "text")}</div>`;
-      return y(l, { padding: t });
+      const t = l(e, "containerPadding", "10px"), o = l(e, "color", "#374151"), n = l(e, "lineHeight", "160%"), i = l(e, "textAlign", "left"), r = l(e, "letterSpacing", "normal"), s = `<div style="font-size:14px;color:${o};line-height:${n};text-align:${i};letter-spacing:${r};word-wrap:break-word;">${l(e, "text")}</div>`;
+      return M(s, { padding: t });
     }
   }
-}, nt = {
+}, wt = {
   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>',
@@ -1038,15 +1038,15 @@ const tt = {
   },
   renderer: {
     renderEditor(e) {
-      const t = s(e, "containerPadding", "10px"), o = s(e, "src"), n = s(e, "alt"), i = s(e, "width", "100%"), r = s(e, "borderRadius", "0px"), l = s(e, "align", "center");
-      return o ? m`<div style="padding:${t};text-align:${l};"><img src=${o} alt=${n} style="display:inline-block;max-width:100%;width:${i};border-radius:${r};border:0;" /></div>` : m`<div style="padding:${t};text-align:${l};"><div style="background:#f1f5f9;border:2px dashed #cbd5e1;border-radius:8px;padding:40px 20px;text-align:center;color:#94a3b8;font-size:13px;">No image set. Enter a URL in the property panel.</div></div>`;
+      const t = l(e, "containerPadding", "10px"), o = l(e, "src"), n = l(e, "alt"), i = l(e, "width", "100%"), r = l(e, "borderRadius", "0px"), s = l(e, "align", "center");
+      return o ? c`<div style="padding:${t};text-align:${s};"><img src=${o} alt=${n} style="display:inline-block;max-width:100%;width:${i};border-radius:${r};border:0;" /></div>` : c`<div style="padding:${t};text-align:${s};"><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 = s(e, "containerPadding", "10px"), n = s(e, "src"), i = s(e, "alt"), r = s(e, "href"), l = s(e, "target", "_blank"), a = s(e, "width", "100%"), d = s(e, "borderRadius", "0px"), c = s(e, "align", "center"), u = a === "100%" ? t.columnWidth : parseInt(a), g = d !== "0px" ? `border-radius:${d};` : "", h = `<img align="${c}" border="0" src="${n}" alt="${i}" title="${i}" style="outline:none;text-decoration:none;clear:both;display:inline-block!important;border:none;height:auto;float:none;width:${a};max-width:${u}px;${g}" width="${u}" />`, f = r ? `<a href="${r}" target="${l}" style="text-decoration:none;">${h}</a>` : h;
-      return y(f, { padding: o, align: c });
+      const o = l(e, "containerPadding", "10px"), n = l(e, "src"), i = l(e, "alt"), r = l(e, "href"), s = l(e, "target", "_blank"), a = l(e, "width", "100%"), d = l(e, "borderRadius", "0px"), p = l(e, "align", "center"), h = a === "100%" ? t.columnWidth : parseInt(a), g = d !== "0px" ? `border-radius:${d};` : "", u = `<img align="${p}" border="0" src="${n}" alt="${i}" title="${i}" style="outline:none;text-decoration:none;clear:both;display:inline-block!important;border:none;height:auto;float:none;width:${a};max-width:${h}px;${g}" width="${h}" />`, m = r ? `<a href="${r}" target="${s}" style="text-decoration:none;">${u}</a>` : u;
+      return M(m, { padding: o, align: p });
     }
   }
-}, it = {
+}, vt = {
   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>',
@@ -1133,24 +1133,24 @@ const tt = {
   },
   renderer: {
     renderEditor(e) {
-      const t = s(e, "containerPadding", "10px"), o = s(e, "backgroundColor", "#3b82f6"), n = s(e, "textColor", "#ffffff"), i = s(e, "fontSize", "14px"), r = s(e, "fontWeight", "700"), l = s(e, "borderRadius", "4px"), a = s(e, "buttonPadding", "10px 20px"), d = s(e, "text", "Click Me"), c = s(e, "textAlign", "center"), u = s(e, "buttonWidth", "auto"), g = s(e, "borderWidth", "0px"), h = s(e, "borderColor", o), f = g !== "0px" ? `border:${g} solid ${h};` : "border:none;", b = u === "auto" ? "display:inline-block;" : `display:block;width:${u};`;
-      return m`
-        <div style="padding:${t};text-align:${c};">
-          <a style="${b}background-color:${o};color:${n};font-size:${i};font-weight:${r};border-radius:${l};padding:${a};text-decoration:none;text-align:center;${f}cursor:pointer;font-family:arial,helvetica,sans-serif;box-sizing:border-box;">${d}</a>
+      const t = l(e, "containerPadding", "10px"), o = l(e, "backgroundColor", "#3b82f6"), n = l(e, "textColor", "#ffffff"), i = l(e, "fontSize", "14px"), r = l(e, "fontWeight", "700"), s = l(e, "borderRadius", "4px"), a = l(e, "buttonPadding", "10px 20px"), d = l(e, "text", "Click Me"), p = l(e, "textAlign", "center"), h = l(e, "buttonWidth", "auto"), g = l(e, "borderWidth", "0px"), u = l(e, "borderColor", o), m = g !== "0px" ? `border:${g} solid ${u};` : "border:none;", x = h === "auto" ? "display:inline-block;" : `display:block;width:${h};`;
+      return c`
+        <div style="padding:${t};text-align:${p};">
+          <a style="${x}background-color:${o};color:${n};font-size:${i};font-weight:${r};border-radius:${s};padding:${a};text-decoration:none;text-align:center;${m}cursor:pointer;font-family:arial,helvetica,sans-serif;box-sizing:border-box;">${d}</a>
         </div>
       `;
     },
     renderHtml(e) {
-      const t = s(e, "containerPadding", "10px"), o = s(e, "backgroundColor", "#3b82f6"), n = s(e, "textColor", "#ffffff"), i = s(e, "fontSize", "14px"), r = s(e, "fontWeight", "700"), l = s(e, "borderRadius", "4px"), a = s(e, "buttonPadding", "10px 20px"), d = s(e, "text", "Click Me"), c = s(e, "textAlign", "center"), u = s(e, "href", "#"), g = s(e, "target", "_blank"), h = s(e, "borderWidth", "0px"), f = s(e, "borderColor", o), b = h !== "0px" ? `border:${h} solid ${f};` : "border:none;", p = Z(d, u, { bgColor: o, textColor: n, fontSize: i, fontWeight: r, borderRadius: l }), w = p ? `${p}
-  <!--[if !mso]><!-->` : "<!--[if !mso]><!-->", v = `<div align="${c}">
-      ${w}
-      <a href="${u}" target="${g}" style="box-sizing:border-box;display:inline-block;text-decoration:none;text-align:center;color:${n};background-color:${o};border-radius:${l};font-size:${i};font-weight:${r};padding:${a};font-family:arial,helvetica,sans-serif;${b}mso-border-alt:none;word-break:keep-all;"><span style="line-height:120%;">${d}</span></a>
+      const t = l(e, "containerPadding", "10px"), o = l(e, "backgroundColor", "#3b82f6"), n = l(e, "textColor", "#ffffff"), i = l(e, "fontSize", "14px"), r = l(e, "fontWeight", "700"), s = l(e, "borderRadius", "4px"), a = l(e, "buttonPadding", "10px 20px"), d = l(e, "text", "Click Me"), p = l(e, "textAlign", "center"), h = l(e, "href", "#"), g = l(e, "target", "_blank"), u = l(e, "borderWidth", "0px"), m = l(e, "borderColor", o), x = u !== "0px" ? `border:${u} solid ${m};` : "border:none;", f = ft(d, h, { bgColor: o, textColor: n, fontSize: i, fontWeight: r, borderRadius: s }), C = f ? `${f}
+  <!--[if !mso]><!-->` : "<!--[if !mso]><!-->", V = `<div align="${p}">
+      ${C}
+      <a href="${h}" target="${g}" style="box-sizing:border-box;display:inline-block;text-decoration:none;text-align:center;color:${n};background-color:${o};border-radius:${s};font-size:${i};font-weight:${r};padding:${a};font-family:arial,helvetica,sans-serif;${x}mso-border-alt:none;word-break:keep-all;"><span style="line-height:120%;">${d}</span></a>
       <!--<![endif]-->
     </div>`;
-      return y(v, { padding: t, align: c });
+      return M(V, { padding: t, align: p });
     }
   }
-}, rt = {
+}, $t = {
   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>',
@@ -1197,53 +1197,53 @@ const tt = {
   },
   renderer: {
     renderEditor(e) {
-      const t = s(e, "containerPadding", "10px"), o = s(e, "width", "100%"), n = `${s(e, "borderTopWidth", "1px")} ${s(e, "borderTopStyle", "solid")} ${s(e, "borderTopColor", "#cccccc")}`;
-      return m`<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 c`<div style="padding:${t};"><div style="border-top:${n};width:${o};margin:0 auto;"></div></div>`;
     },
     renderHtml(e) {
-      const t = s(e, "containerPadding", "10px"), o = s(e, "width", "100%"), n = `${s(e, "borderTopWidth", "1px")} ${s(e, "borderTopStyle", "solid")} ${s(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 y(i, { padding: t, align: "center" });
-    }
-  }
-}, st = [
-  tt,
-  et,
-  ot,
-  nt,
-  it,
-  rt
-], P = [
+      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 M(i, { padding: t, align: "center" });
+    }
+  }
+}, kt = [
+  mt,
+  xt,
+  yt,
+  wt,
+  vt,
+  $t
+], Z = [
   {
     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-Dx0bJnRa.js").then((e) => e.htmlTool)
+    loader: () => import("./html-tool-Cqvglh05.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-_2fRc5-k.js").then((e) => e.socialTool)
+    loader: () => import("./social-tool-MqaqWdRm.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-D34uGd81.js").then((e) => e.menuTool)
+    loader: () => import("./menu-tool-ACBHeTTN.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-HOA8TCla.js").then((e) => e.videoTool)
+    loader: () => import("./video-tool-8g1_UVbn.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-BUl5TiH0.js").then((e) => e.timerTool)
+    loader: () => import("./timer-tool-BxrGmF-W.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-B_MVWfF5.js").then((e) => e.tableTool)
+    loader: () => import("./table-tool-AnVvJ0rV.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-C9ccGMTE.js").then((e) => e.formTool)
+    loader: () => import("./form-tool-CxJstLJz.js").then((e) => e.formTool)
   }
 ];
-function lt(e, t, o) {
-  const n = o.backgroundColor || "#e7e7e7", i = o.contentWidth || "600px", r = o.fontFamily?.value || "arial,helvetica,sans-serif", l = o.textColor || "#000000", a = o.preheaderText || "", d = a ? `<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>` : "";
+function Ct(e, t, o) {
+  const n = o.backgroundColor || "#e7e7e7", i = o.contentWidth || "600px", r = o.fontFamily?.value || "arial,helvetica,sans-serif", s = o.textColor || "#000000", a = o.preheaderText || "", d = a ? `<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>
@@ -1279,7 +1279,7 @@ function lt(e, t, o) {
     a[x-apple-data-detectors='true'] { color: inherit !important; text-decoration: none !important; }
   </style>
 </head>
-<body class="clean-body u_body" style="margin:0;padding:0;-webkit-text-size-adjust:100%;background-color:${n};color:${l};">
+<body class="clean-body u_body" style="margin:0;padding:0;-webkit-text-size-adjust:100%;background-color:${n};color:${s};">
   ${d}
   <table id="u_body" style="border-collapse:collapse;table-layout:fixed;border-spacing:0;mso-table-lspace:0pt;mso-table-rspace:0pt;vertical-align:top;min-width:320px;margin:0 auto;background-color:${n};width:100%;" cellpadding="0" cellspacing="0" border="0">
     <tbody>
@@ -1295,62 +1295,62 @@ function lt(e, t, o) {
 </body>
 </html>`;
 }
-function at(e, t, o) {
-  const n = parseInt(t.contentWidth || "600"), i = e.values.backgroundColor || "", r = e.values.columnsBackgroundColor || "", l = e.values.padding || "0px", a = e.cells.reduce((p, w) => p + w, 0), d = i ? `background-color:${i};` : "", c = e.values.backgroundImage?.url ? `background-image:url('${e.values.backgroundImage.url}');background-repeat:${e.values.backgroundImage.repeat ? "repeat" : "no-repeat"};background-position:center top;background-size:${e.values.backgroundImage.cover ? "cover" : "auto"};` : "", u = e.columns.map((p, w) => {
-    const k = Math.round(e.cells[w] / a * n);
-    return E(p, k, r, t, o);
+function _t(e, t, o) {
+  const n = parseInt(t.contentWidth || "600"), i = e.values.backgroundColor || "", r = e.values.columnsBackgroundColor || "", s = e.values.padding || "0px", a = e.cells.reduce((f, C) => f + C, 0), d = i ? `background-color:${i};` : "", p = e.values.backgroundImage?.url ? `background-image:url('${e.values.backgroundImage.url}');background-repeat:${e.values.backgroundImage.repeat ? "repeat" : "no-repeat"};background-position:center top;background-size:${e.values.backgroundImage.cover ? "cover" : "auto"};` : "", h = e.columns.map((f, C) => {
+    const A = Math.round(e.cells[C] / a * n);
+    return tt(f, A, r, t, o);
   }), g = e.columns.length > 1;
-  let h;
+  let u;
   if (g) {
-    const p = e.columns.map((w, k) => {
-      const v = Math.round(e.cells[k] / a * n), B = E(w, v, r, t, o);
-      return `<!--[if (mso)|(IE)]><td align="center" width="${v}" style="width:${v}px;padding:0px;border:none;" valign="top"><![endif]-->
-${B}
+    const f = e.columns.map((C, A) => {
+      const V = Math.round(e.cells[A] / a * n), it = tt(C, V, r, t, o);
+      return `<!--[if (mso)|(IE)]><td align="center" width="${V}" style="width:${V}px;padding:0px;border:none;" valign="top"><![endif]-->
+${it}
 <!--[if (mso)|(IE)]></td><![endif]-->`;
     });
-    h = `<!--[if (mso)|(IE)]><table role="presentation" width="${n}" cellpadding="0" cellspacing="0" border="0"><tr>${p.join(`
+    u = `<!--[if (mso)|(IE)]><table role="presentation" width="${n}" cellpadding="0" cellspacing="0" border="0"><tr>${f.join(`
 `)}</tr></table><![endif]-->
 
 <!--[if !mso]><!-->
 <div style="max-width:${n}px;margin:0 auto;">
-${u.join(`
+${h.join(`
 `)}
 </div>
 <!--<![endif]-->`;
   } else
-    h = u.join(`
+    u = h.join(`
 `);
-  const f = e.values.hideDesktop ? " u_hide_desktop" : "", b = e.values.hideMobile ? " u_hide_mobile" : "";
-  return `<div class="u_row${f}${b}" style="padding:${l};${d}${c}">
+  const m = e.values.hideDesktop ? " u_hide_desktop" : "", x = e.values.hideMobile ? " u_hide_mobile" : "";
+  return `<div class="u_row${m}${x}" style="padding:${s};${d}${p}">
   <div style="margin:0 auto;min-width:320px;max-width:${n}px;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;background-color:transparent;">
     <div style="border-collapse:collapse;display:table;width:100%;height:100%;background-color:transparent;">
-      ${h}
+      ${u}
     </div>
   </div>
 </div>`;
 }
-function E(e, t, o, n, i) {
-  const r = e.values.backgroundColor || o || "", l = e.values.padding || "0px", a = e.values.borderRadius || "0px", d = r ? `background-color:${r};` : "", c = e.contents.map((u) => {
-    const g = i.get(u.type);
-    if (!g) return `<!-- unknown tool: ${u.type} -->`;
-    const h = {
+function tt(e, t, o, n, i) {
+  const r = e.values.backgroundColor || o || "", s = e.values.padding || "0px", a = e.values.borderRadius || "0px", d = r ? `background-color:${r};` : "", p = e.contents.map((h) => {
+    const g = i.get(h.type);
+    if (!g) return `<!-- unknown tool: ${h.type} -->`;
+    const u = {
       columnWidth: t,
       displayMode: "email",
       contentWidth: parseInt(n.contentWidth || "600"),
       bodyValues: n
     };
-    return g(u.values, h);
+    return g(h.values, u);
   }).join(`
 `);
   return `<div class="u_column" style="max-width:${t}px;min-width:${Math.min(t, 320)}px;display:table-cell;vertical-align:top;">
   <div style="height:100%;width:100% !important;border-radius:${a};-webkit-border-radius:${a};${d}">
-    <div style="box-sizing:border-box;height:100%;padding:${l};border:none;border-radius:${a};-webkit-border-radius:${a};">
-      ${c || '<!--[if (!mso)&(!IE)]><!--><div style="height:0;min-height:1px;font-size:0;">&nbsp;</div><!--<![endif]-->'}
+    <div style="box-sizing:border-box;height:100%;padding:${s};border:none;border-radius:${a};-webkit-border-radius:${a};">
+      ${p || '<!--[if (!mso)&(!IE)]><!--><div style="height:0;min-height:1px;font-size:0;">&nbsp;</div><!--<![endif]-->'}
     </div>
   </div>
 </div>`;
 }
-function dt(e) {
+function Dt(e) {
   return `
 @media only screen and (min-width: ${e + 20}px) {
   .u_row .u_column { display: table-cell; }
@@ -1400,34 +1400,1081 @@ function dt(e) {
   .u_hide_mobile { display: block !important; }
 }`;
 }
-function ct(e, t, o) {
-  const n = e.body.values, i = parseInt(n.contentWidth || "600"), r = e.body.rows.map((g) => at(g, n, t)).join(`
-`), l = dt(i);
-  let a = lt(r, l, n);
+function Rt(e, t, o) {
+  const n = e.body.values, i = parseInt(n.contentWidth || "600"), r = e.body.rows.map((g) => _t(g, n, t)).join(`
+`), s = Dt(i);
+  let a = Ct(r, s, n);
   if (o?.mergeTags)
-    for (const [g, h] of Object.entries(o.mergeTags))
-      a = a.replaceAll(`{{${g}}}`, h);
-  const d = a.match(/<body[^>]*>([\s\S]*)<\/body>/i), c = a.match(/<style[^>]*>([\s\S]*?)<\/style>/gi), u = [];
-  return n.fontFamily?.url && u.push(n.fontFamily.url), {
+    for (const [g, u] of Object.entries(o.mergeTags))
+      a = a.replaceAll(`{{${g}}}`, u);
+  const d = a.match(/<body[^>]*>([\s\S]*)<\/body>/i), p = a.match(/<style[^>]*>([\s\S]*?)<\/style>/gi), h = [];
+  return n.fontFamily?.url && h.push(n.fontFamily.url), {
     design: structuredClone(e),
     html: a,
     chunks: {
       body: d?.[1] ?? r,
-      css: c?.map((g) => g.replace(/<\/?style[^>]*>/gi, "")).join(`
-`) ?? l,
-      fonts: u,
+      css: p?.map((g) => g.replace(/<\/?style[^>]*>/gi, "")).join(`
+`) ?? s,
+      fonts: h,
       js: ""
     }
   };
 }
-var ht = Object.defineProperty, ut = Object.getOwnPropertyDescriptor, H = (e, t, o, n) => {
-  for (var i = n > 1 ? void 0 : n ? ut(t, o) : t, r = e.length - 1, l; r >= 0; r--)
-    (l = e[r]) && (i = (n ? l(t, o, i) : l(i)) || i);
-  return n && i && ht(t, o, i), i;
+class R {
+  /**
+   * @param host - The Lit component that owns this controller
+   * @param channels - Which store channels to subscribe to
+   */
+  constructor(t, o) {
+    this.store = null, this.host = t, this.channels = o, t.addController(this);
+  }
+  /** Set or change the store reference. Re-subscribes automatically. */
+  setStore(t) {
+    this.store !== t && (this.unsub?.(), this.store = t, this.subscribe());
+  }
+  hostConnected() {
+    this.subscribe();
+  }
+  hostDisconnected() {
+    this.unsub?.(), this.unsub = void 0;
+  }
+  subscribe() {
+    this.store && (this.unsub = this.store.subscribeChannels(this.channels, () => {
+      this.host.requestUpdate();
+    }));
+  }
+}
+var St = Object.defineProperty, Tt = Object.getOwnPropertyDescriptor, j = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? Tt(t, o) : t, r = e.length - 1, s; r >= 0; r--)
+    (s = e[r]) && (i = (n ? s(t, o, i) : s(i)) || i);
+  return n && i && St(t, o, i), i;
+};
+let _ = class extends w {
+  constructor() {
+    super(...arguments), this.storeCtrl = new R(this, ["design", "selection", "hover"]), this._onDragStart = (e) => {
+      e.dataTransfer.setData("application/maileditor-content", this.content.id), e.dataTransfer.effectAllowed = "move", this.style.opacity = "0.4", z.startContentDrag(this.content.id);
+    }, this._onDragEnd = () => {
+      this.style.opacity = "1", z.reset();
+    };
+  }
+  set store(e) {
+    this.storeCtrl.setStore(e);
+  }
+  get store() {
+    return this.storeCtrl.store;
+  }
+  handleClick(e) {
+    e.stopPropagation(), this.store.select(this.content.id);
+  }
+  handleMouseEnter() {
+    this.store.hover(this.content.id);
+  }
+  handleMouseLeave() {
+    this.store.hover(null);
+  }
+  handleDelete(e) {
+    e.stopPropagation(), this.store.removeContent(this.content.id);
+  }
+  handleDuplicate(e) {
+    e.stopPropagation(), this.store.duplicateContent(this.content.id);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("dragstart", this._onDragStart), this.addEventListener("dragend", this._onDragEnd);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("dragstart", this._onDragStart), this.removeEventListener("dragend", this._onDragEnd);
+  }
+  render() {
+    if (!this.store) return c``;
+    const e = this.store.selectedId === this.content.id, t = this.store.hoveredId === this.content.id;
+    this.classList.toggle("selected", e), this.classList.toggle("hovered", t), this.setAttribute("draggable", "true"), this.dataset.contentId = this.content.id;
+    const o = this.toolRegistry.get(this.content.type);
+    if (!o && this.toolRegistry.has(this.content.type))
+      return this.toolRegistry.ensureLoaded(this.content.type).then(() => this.requestUpdate()), c`<div style="padding:16px;text-align:center;color:#9ca3af;font-size:13px;font-family:sans-serif;">Loading ${this.content.type}...</div>`;
+    const n = o?.renderer.renderEditor(this.content.values, {
+      isSelected: e,
+      isHovered: t,
+      columnWidth: 600,
+      displayMode: "email"
+    });
+    return 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" @click=${this.handleClick}
+        @mouseenter=${this.handleMouseEnter} @mouseleave=${this.handleMouseLeave}>
+        ${n ?? c`<div style="padding:10px;color:#999;font-style:italic;">Unknown tool: ${this.content.type}</div>`}
+      </div>
+    `;
+  }
+};
+_.styles = v`
+    :host {
+      display: block; position: relative; cursor: pointer;
+      transition: outline 0.15s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
+    }
+    :host(.selected) { outline: 2px solid #3b82f6; outline-offset: -1px; }
+    :host(.hovered:not(.selected)) { outline: 2px dashed #93c5fd; outline-offset: -1px; }
+    :host(.just-dropped) {
+      animation: dropIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+    @keyframes dropIn {
+      0% { opacity: 0; transform: scale(0.92) translateY(-8px); }
+      100% { opacity: 1; transform: scale(1) translateY(0); }
+    }
+    .action-bar {
+      display: none; position: absolute; top: -28px; right: 4px;
+      background: #3b82f6; border-radius: 4px; padding: 2px; gap: 2px; z-index: 10;
+    }
+    :host(.selected) .action-bar { display: flex; }
+    .action-btn {
+      background: none; border: none; color: white; cursor: pointer;
+      padding: 2px 6px; font-size: 12px; line-height: 1; border-radius: 2px;
+    }
+    .action-btn:hover { background: rgba(255,255,255,0.2); }
+    .content-wrapper { position: relative; }
+  `;
+j([
+  b({ attribute: !1 })
+], _.prototype, "content", 2);
+j([
+  b({ attribute: !1 })
+], _.prototype, "store", 1);
+j([
+  b({ attribute: !1 })
+], _.prototype, "toolRegistry", 2);
+_ = j([
+  $("me-content-renderer")
+], _);
+var It = Object.defineProperty, Pt = Object.getOwnPropertyDescriptor, B = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? Pt(t, o) : t, r = e.length - 1, s; r >= 0; r--)
+    (s = e[r]) && (i = (n ? s(t, o, i) : s(i)) || i);
+  return n && i && It(t, o, i), i;
+};
+let y = class extends w {
+  constructor() {
+    super(...arguments), this.storeCtrl = new R(this, ["design"]), this.widthPercent = 100;
+  }
+  set store(e) {
+    this.storeCtrl.setStore(e);
+  }
+  get store() {
+    return this.storeCtrl.store;
+  }
+  render() {
+    const e = this.column.values.padding || "0px", t = this.column.values.backgroundColor || "transparent", o = this.column.contents;
+    return this.dataset.columnId = this.column.id, this.style.width = `${this.widthPercent}%`, this.style.padding = e, this.style.backgroundColor = t, this.style.verticalAlign = "top", this.style.boxSizing = "border-box", o.length === 0 ? c`
+        <div class="empty-column" data-column-id=${this.column.id}>
+          Drag content here
+        </div>
+      ` : c`
+      ${o.map(
+      (n) => c`
+          <me-content-renderer
+            .content=${n}
+            .store=${this.store}
+            .toolRegistry=${this.toolRegistry}
+          ></me-content-renderer>
+        `
+    )}
+    `;
+  }
+};
+y.styles = v`
+    :host {
+      display: block;
+      min-height: 40px;
+      position: relative;
+    }
+    .empty-column {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 60px;
+      border: 2px dashed #d1d5db;
+      border-radius: 4px;
+      color: #9ca3af;
+      font-size: 13px;
+      font-family: sans-serif;
+      margin: 4px;
+    }
+    .drop-indicator {
+      height: 3px;
+      background: #3b82f6;
+      border-radius: 2px;
+      margin: 0 4px;
+      opacity: 0;
+      transition: opacity 0.15s ease;
+    }
+    .drop-indicator.active {
+      opacity: 1;
+    }
+  `;
+B([
+  b({ attribute: !1 })
+], y.prototype, "column", 2);
+B([
+  b({ attribute: !1 })
+], y.prototype, "store", 1);
+B([
+  b({ attribute: !1 })
+], y.prototype, "toolRegistry", 2);
+B([
+  b({ type: Number })
+], y.prototype, "widthPercent", 2);
+y = B([
+  $("me-column-renderer")
+], y);
+var Mt = Object.defineProperty, Vt = Object.getOwnPropertyDescriptor, W = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? Vt(t, o) : t, r = e.length - 1, s; r >= 0; r--)
+    (s = e[r]) && (i = (n ? s(t, o, i) : s(i)) || i);
+  return n && i && Mt(t, o, i), i;
+};
+let D = class extends w {
+  constructor() {
+    super(...arguments), this.storeCtrl = new R(this, ["design"]);
+  }
+  set store(e) {
+    this.storeCtrl.setStore(e);
+  }
+  get store() {
+    return this.storeCtrl.store;
+  }
+  handleMoveUp(e) {
+    e.stopPropagation();
+    const t = this.store.getRowIndex(this.row.id);
+    t > 0 && this.store.moveRow(t, t - 1);
+  }
+  handleMoveDown(e) {
+    e.stopPropagation();
+    const t = this.store.getRowIndex(this.row.id), o = this.store.getRows().length;
+    t < o - 1 && this.store.moveRow(t, t + 1);
+  }
+  handleDuplicate(e) {
+    e.stopPropagation(), this.store.duplicateRow(this.row.id);
+  }
+  handleDelete(e) {
+    e.stopPropagation(), this.store.removeRow(this.row.id);
+  }
+  render() {
+    const { row: e, store: t, toolRegistry: o } = this, n = e.values.backgroundColor || "transparent", i = e.values.columnsBackgroundColor || "transparent", r = e.values.padding || "0px", s = e.cells.reduce((a, d) => a + d, 0);
+    return this.setAttribute("draggable", "true"), this.dataset.rowId = e.id, c`
+      <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>
+        </button>
+        <button class="row-action-btn" @click=${this.handleMoveDown} title="Move Down">
+          <svg viewBox="0 0 24 24"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
+        </button>
+        <button class="row-action-btn" @click=${this.handleDuplicate} title="Duplicate Row">
+          <svg viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+        </button>
+        <button class="row-action-btn danger" @click=${this.handleDelete} title="Delete Row">
+          <svg viewBox="0 0 24 24"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+        </button>
+      </div>
+      <div
+        class="row-wrapper"
+        style="background-color:${n};padding:${r};"
+      >
+        ${e.columns.map((a, d) => {
+      const p = e.cells[d] / s * 100;
+      return c`
+            <me-column-renderer
+              .column=${a}
+              .store=${t}
+              .toolRegistry=${o}
+              .widthPercent=${p}
+              style="background-color:${i};"
+            ></me-column-renderer>
+          `;
+    })}
+      </div>
+    `;
+  }
+};
+D.styles = v`
+    :host {
+      display: block;
+      position: relative;
+    }
+    .row-wrapper {
+      display: flex;
+      flex-wrap: nowrap;
+      position: relative;
+      min-height: 30px;
+      transition: box-shadow 0.15s ease;
+    }
+    :host(:hover) .row-wrapper {
+      box-shadow: inset 0 0 0 1px #93c5fd;
+    }
+    .row-actions {
+      display: none;
+      position: absolute;
+      right: -36px;
+      top: 50%;
+      transform: translateY(-50%);
+      flex-direction: column;
+      gap: 2px;
+      z-index: 10;
+    }
+    :host(:hover) .row-actions {
+      display: flex;
+    }
+    .row-action-btn {
+      width: 28px;
+      height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #6b7280;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 12px;
+      line-height: 1;
+      transition: background 0.15s ease;
+      padding: 0;
+    }
+    .row-action-btn:hover { background: #3b82f6; }
+    .row-action-btn.danger:hover { background: #ef4444; }
+    .row-action-btn svg {
+      width: 14px;
+      height: 14px;
+      stroke: currentColor;
+      fill: none;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+  `;
+W([
+  b({ attribute: !1 })
+], D.prototype, "row", 2);
+W([
+  b({ attribute: !1 })
+], D.prototype, "store", 1);
+W([
+  b({ attribute: !1 })
+], D.prototype, "toolRegistry", 2);
+D = W([
+  $("me-row-renderer")
+], D);
+var zt = Object.defineProperty, Et = Object.getOwnPropertyDescriptor, G = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? Et(t, o) : t, r = e.length - 1, s; r >= 0; r--)
+    (s = e[r]) && (i = (n ? s(t, o, i) : s(i)) || i);
+  return n && i && zt(t, o, i), i;
+};
+let T = class extends w {
+  constructor() {
+    super(...arguments), this.storeCtrl = new R(this, ["design", "viewMode"]);
+  }
+  set store(e) {
+    this.storeCtrl.setStore(e);
+  }
+  get store() {
+    return this.storeCtrl.store;
+  }
+  handleCanvasClick() {
+    this.store.select(null);
+  }
+  setViewMode(e) {
+    this.store.setViewMode(e);
+  }
+  render() {
+    const e = this.store.getRows(), t = this.store.getBodyValues(), o = t.contentWidth || "600px", n = t.backgroundColor || "#e7e7e7", i = this.store.viewMode;
+    return c`
+      <div class="view-toggle">
+        <button
+          class="view-btn ${i === "desktop" ? "active" : ""}"
+          @click=${() => this.setViewMode("desktop")}
+        >Desktop</button>
+        <button
+          class="view-btn ${i === "mobile" ? "active" : ""}"
+          @click=${() => this.setViewMode("mobile")}
+        >Mobile</button>
+      </div>
+
+      <div
+        class="canvas-body"
+        style="max-width:${i === "mobile" ? "375px" : o};background-color:${n};"
+        @click=${this.handleCanvasClick}
+      >
+        ${e.length === 0 ? c`
+              <div class="empty-canvas">
+                <div class="empty-icon">&#9776;</div>
+                <div>Drag a content block here</div>
+              </div>
+            ` : e.map(
+      (s) => c`
+                <me-row-renderer
+                  .row=${s}
+                  .store=${this.store}
+                  .toolRegistry=${this.toolRegistry}
+                ></me-row-renderer>
+              `
+    )}
+      </div>
+    `;
+  }
+};
+T.styles = v`
+    :host {
+      display: block;
+      flex: 1;
+      overflow-y: auto;
+      background: #f3f4f6;
+      padding: 20px;
+    }
+    .canvas-body {
+      margin: 0 auto;
+      background: #ffffff;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
+      min-height: 200px;
+      position: relative;
+    }
+    .empty-canvas {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      min-height: 300px;
+      color: #9ca3af;
+      font-family: sans-serif;
+      font-size: 14px;
+      gap: 8px;
+    }
+    .empty-icon {
+      font-size: 40px;
+      opacity: 0.4;
+    }
+    .view-toggle {
+      display: flex;
+      justify-content: center;
+      margin-bottom: 12px;
+      gap: 4px;
+    }
+    .view-btn {
+      padding: 6px 16px;
+      border: 1px solid #d1d5db;
+      background: white;
+      cursor: pointer;
+      font-size: 13px;
+      font-family: sans-serif;
+      color: #374151;
+      transition: all 0.15s ease;
+    }
+    .view-btn:first-child { border-radius: 6px 0 0 6px; }
+    .view-btn:last-child { border-radius: 0 6px 6px 0; }
+    .view-btn.active {
+      background: #3b82f6;
+      border-color: #3b82f6;
+      color: white;
+    }
+  `;
+G([
+  b({ attribute: !1 })
+], T.prototype, "store", 1);
+G([
+  b({ attribute: !1 })
+], T.prototype, "toolRegistry", 2);
+T = G([
+  $("me-editor-canvas")
+], T);
+var Lt = Object.defineProperty, Bt = Object.getOwnPropertyDescriptor, ot = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? Bt(t, o) : t, r = e.length - 1, s; r >= 0; r--)
+    (s = e[r]) && (i = (n ? s(t, o, i) : s(i)) || i);
+  return n && i && Lt(t, o, i), i;
+};
+const et = [
+  { label: "Arial", value: "arial,helvetica,sans-serif" },
+  { label: "Helvetica", value: "helvetica,sans-serif" },
+  { label: "Georgia", value: "georgia,serif" },
+  { label: "Times New Roman", value: "'times new roman',times,serif" },
+  { label: "Trebuchet MS", value: "trebuchet ms,helvetica,sans-serif" },
+  { label: "Verdana", value: "verdana,geneva,sans-serif" },
+  { label: "Courier New", value: "'courier new',courier,monospace" }
+];
+let E = class extends w {
+  constructor() {
+    super(...arguments), this.storeCtrl = new R(this, ["design"]);
+  }
+  set store(e) {
+    this.storeCtrl.setStore(e);
+  }
+  get store() {
+    return this.storeCtrl.store;
+  }
+  update_(e, t) {
+    this.store.updateBodyValues({ [e]: t });
+  }
+  updateLinkStyle(e, t) {
+    const o = this.store.getBodyValues().linkStyle;
+    this.store.updateBodyValues({ linkStyle: { ...o, [e]: t } });
+  }
+  updateFontFamily(e) {
+    const t = et.find((o) => o.value === e);
+    this.store.updateBodyValues({ fontFamily: { label: t?.label || e, value: e } });
+  }
+  render() {
+    const e = this.store.getBodyValues();
+    return c`
+      ${this.renderColorField("Background Color", e.backgroundColor || "#e7e7e7", (t) => this.update_("backgroundColor", t))}
+
+      <p class="section-title" style="margin-top:16px;">Content</p>
+      <div class="field">
+        <label class="field-label">Content Width (px)</label>
+        <input class="input" type="number" .value=${parseInt(e.contentWidth || "600")} min="320" max="960" step="10"
+          @change=${(t) => this.update_("contentWidth", t.target.value + "px")} />
+      </div>
+      <div class="field">
+        <label class="field-label">Content Align</label>
+        <div class="align-group">
+          ${["left", "center", "right"].map((t) => c`
+            <button class="align-btn ${e.contentAlign === t ? "active" : ""}"
+              @click=${() => this.update_("contentAlign", t)}>${t}</button>
+          `)}
+        </div>
+      </div>
+
+      <p class="section-title" style="margin-top:16px;">Typography</p>
+      <div class="field">
+        <label class="field-label">Font Family</label>
+        <select class="input" @change=${(t) => this.updateFontFamily(t.target.value)}>
+          ${et.map((t) => c`<option value=${t.value} ?selected=${e.fontFamily?.value === t.value}>${t.label}</option>`)}
+        </select>
+      </div>
+      ${this.renderColorField("Text Color", e.textColor || "#000000", (t) => this.update_("textColor", t))}
+
+      <p class="section-title" style="margin-top:16px;">Links</p>
+      ${this.renderColorField("Link Color", e.linkStyle?.linkColor || "#0000ee", (t) => this.updateLinkStyle("linkColor", t))}
+      <div class="field">
+        <label style="display:flex;align-items:center;gap:8px;font-size:12px;color:#6b7280;cursor:pointer;">
+          <input type="checkbox" .checked=${e.linkStyle?.linkUnderline ?? !0}
+            @change=${(t) => this.updateLinkStyle("linkUnderline", t.target.checked)} />
+          Underline Links
+        </label>
+      </div>
+
+      <p class="section-title" style="margin-top:16px;">Email</p>
+      <div class="field">
+        <label class="field-label">Preheader Text</label>
+        <textarea class="input" .value=${e.preheaderText || ""} placeholder="Preview text shown in inbox..."
+          style="min-height:60px;resize:vertical;font-family:inherit;"
+          @change=${(t) => this.update_("preheaderText", t.target.value)}></textarea>
+      </div>
+    `;
+  }
+  /** Reusable color field (swatch + hex input) */
+  renderColorField(e, t, o) {
+    return c`
+      <div class="field">
+        <label class="field-label">${e}</label>
+        <div class="color-row">
+          <input class="color-swatch" type="color" .value=${t} @input=${(n) => o(n.target.value)} />
+          <input class="input" type="text" .value=${t} style="flex:1;" @change=${(n) => o(n.target.value)} />
+        </div>
+      </div>
+    `;
+  }
+};
+E.styles = v`
+    :host { display: block; }
+    .section-title {
+      font-size: 11px; font-weight: 600; text-transform: uppercase;
+      color: #9ca3af; letter-spacing: 0.05em; margin: 0 0 8px 0;
+    }
+    .field { margin-bottom: 12px; }
+    .field-label { display: block; font-size: 12px; color: #6b7280; margin-bottom: 4px; }
+    .input {
+      width: 100%; padding: 5px 8px; border: 1px solid #d1d5db; border-radius: 4px;
+      font-size: 12px; box-sizing: border-box;
+    }
+    .input:focus { outline: none; border-color: #3b82f6; }
+    .color-row { display: flex; gap: 6px; align-items: center; }
+    .color-swatch {
+      width: 32px; height: 32px; border: 1px solid #d1d5db; border-radius: 4px;
+      padding: 0; cursor: pointer;
+    }
+    .align-group { display: flex; gap: 2px; }
+    .align-btn {
+      flex: 1; padding: 5px; border: 1px solid #d1d5db; background: white;
+      border-radius: 4px; cursor: pointer; font-size: 11px; color: #6b7280;
+    }
+    .align-btn.active { border-color: #3b82f6; background: #eff6ff; color: #3b82f6; }
+  `;
+ot([
+  b({ attribute: !1 })
+], E.prototype, "store", 1);
+E = ot([
+  $("me-body-settings")
+], E);
+var At = Object.defineProperty, Ot = Object.getOwnPropertyDescriptor, Y = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? Ot(t, o) : t, r = e.length - 1, s; r >= 0; r--)
+    (s = e[r]) && (i = (n ? s(t, o, i) : s(i)) || i);
+  return n && i && At(t, o, i), i;
+};
+let I = class extends w {
+  constructor() {
+    super(...arguments), this.storeCtrl = new R(this, ["activeTab"]);
+  }
+  set store(e) {
+    this.storeCtrl.setStore(e);
+  }
+  get store() {
+    return this.storeCtrl.store;
+  }
+  handleDragStart(e, t) {
+    e.dataTransfer.setData("application/maileditor-tool", t), e.dataTransfer.effectAllowed = "copy";
+  }
+  handleLayoutDragStart(e, t) {
+    e.dataTransfer.setData("application/maileditor-layout", JSON.stringify(t)), e.dataTransfer.effectAllowed = "copy";
+  }
+  addRowWithLayout(e) {
+    const t = this.store.createRow(e);
+    this.store.addRow(t);
+  }
+  render() {
+    const e = this.store.activeTab, t = this.toolRegistry.getAllMeta();
+    return c`
+      <div class="tabs">
+        <button class="tab ${e === "content" ? "active" : ""}" @click=${() => this.store.setActiveTab("content")}>Content</button>
+        <button class="tab ${e === "blocks" ? "active" : ""}" @click=${() => this.store.setActiveTab("blocks")}>Blocks</button>
+        <button class="tab ${e === "body" ? "active" : ""}" @click=${() => this.store.setActiveTab("body")}>Body</button>
+      </div>
+
+      <div class="tab-content">
+        ${e === "content" ? this.renderContentTab(t) : ""}
+        ${e === "blocks" ? this.renderBlocksTab() : ""}
+        ${e === "body" ? this.renderBodyTab() : ""}
+      </div>
+    `;
+  }
+  renderContentTab(e) {
+    return c`
+      <p class="section-title">Content</p>
+      <div class="tool-grid">
+        ${e.map(
+      (t) => c`
+            <div
+              class="tool-item"
+              draggable="true"
+              @dragstart=${(o) => this.handleDragStart(o, t.name)}
+            >
+              <div class="tool-icon">${q(t.icon)}</div>
+              <span>${t.label}</span>
+            </div>
+          `
+    )}
+      </div>
+
+      <p class="section-title" style="margin-top:20px;">Layout</p>
+      <div class="layout-grid">
+        ${this.renderLayoutOption([1], "100%")}
+        ${this.renderLayoutOption([1, 1], "50/50")}
+        ${this.renderLayoutOption([1, 1, 1], "33/33/33")}
+        ${this.renderLayoutOption([2, 1], "66/33")}
+        ${this.renderLayoutOption([1, 2], "33/66")}
+        ${this.renderLayoutOption([1, 1, 1, 1], "25x4")}
+      </div>
+    `;
+  }
+  renderLayoutOption(e, t) {
+    const o = e.reduce((n, i) => n + i, 0);
+    return c`
+      <div
+        class="layout-item"
+        draggable="true"
+        @click=${() => this.addRowWithLayout(e)}
+        @dragstart=${(n) => this.handleLayoutDragStart(n, e)}
+        title=${t}
+      >
+        ${e.map(
+      (n) => c`<div class="layout-col" style="width:${n / o * 100}%;"></div>`
+    )}
+      </div>
+    `;
+  }
+  renderBlocksTab() {
+    return c`
+      <p style="color:#9ca3af;font-size:13px;text-align:center;margin-top:40px;">
+        No saved blocks yet.<br/>Select a row in the editor and save it as a block.
+      </p>
+    `;
+  }
+  renderBodyTab() {
+    return c`<me-body-settings .store=${this.store}></me-body-settings>`;
+  }
+};
+I.styles = v`
+    :host {
+      display: flex;
+      flex-direction: column;
+      width: 280px;
+      min-width: 280px;
+      background: #ffffff;
+      border-right: 1px solid #e5e7eb;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      overflow-y: auto;
+    }
+    .tabs {
+      display: flex;
+      border-bottom: 1px solid #e5e7eb;
+      background: #f9fafb;
+    }
+    .tab {
+      flex: 1;
+      padding: 10px 8px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      font-size: 12px;
+      font-weight: 500;
+      color: #6b7280;
+      text-align: center;
+      transition: all 0.15s ease;
+      border-bottom: 2px solid transparent;
+    }
+    .tab:hover {
+      color: #374151;
+      background: #f3f4f6;
+    }
+    .tab.active {
+      color: #3b82f6;
+      border-bottom-color: #3b82f6;
+    }
+    .tab-content {
+      padding: 12px;
+      flex: 1;
+    }
+    .section-title {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      color: #9ca3af;
+      letter-spacing: 0.05em;
+      margin: 0 0 8px 0;
+    }
+    .tool-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 8px;
+    }
+    .tool-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 6px;
+      padding: 12px 8px;
+      border: 1px solid #e5e7eb;
+      border-radius: 6px;
+      cursor: grab;
+      background: white;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      font-size: 12px;
+      color: #374151;
+    }
+    .tool-item:hover {
+      border-color: #3b82f6;
+      background: #eff6ff;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
+    }
+    .tool-item:hover .tool-icon {
+      transform: scale(1.15);
+    }
+    .tool-item:active {
+      transform: translateY(0px);
+      box-shadow: 0 1px 4px rgba(59, 130, 246, 0.1);
+    }
+    .tool-item:active {
+      cursor: grabbing;
+    }
+    .tool-icon {
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      justify-content: center;
+      color: #6b7280;
+    }
+    .tool-icon svg {
+      width: 20px;
+      height: 20px;
+    }
+    .layout-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      gap: 8px;
+      margin-top: 16px;
+    }
+    .layout-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 2px;
+      padding: 10px 4px;
+      border: 1px solid #e5e7eb;
+      border-radius: 6px;
+      cursor: pointer;
+      background: white;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .layout-item:hover {
+      border-color: #3b82f6;
+      background: #eff6ff;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
+    }
+    .layout-item:hover .layout-col {
+      background: #93c5fd;
+    }
+    .layout-item:active {
+      transform: translateY(0px);
+    }
+    .layout-col {
+      height: 20px;
+      background: #d1d5db;
+      border-radius: 2px;
+      transition: background 0.2s ease;
+    }
+  `;
+Y([
+  b({ attribute: !1 })
+], I.prototype, "store", 1);
+Y([
+  b({ attribute: !1 })
+], I.prototype, "toolRegistry", 2);
+I = Y([
+  $("me-editor-sidebar")
+], I);
+function Ht(e, t, o) {
+  const n = e && /^#[0-9a-fA-F]{3,8}$/.test(e) ? e : "#000000";
+  return c`
+    <div class="prop-row">
+      <label class="prop-label">${o}</label>
+      <div class="prop-color">
+        <input class="color-swatch" type="color" .value=${n}
+          @input=${(i) => t(i.target.value)} />
+        <input class="prop-input" type="text" .value=${e ?? ""} style="flex:1;"
+          @change=${(i) => t(i.target.value)} />
+      </div>
+    </div>
+  `;
+}
+function jt(e, t, o, n) {
+  const i = n?.options || [];
+  return c`
+    <div class="prop-row">
+      <label class="prop-label">${o}</label>
+      <select class="prop-input" @change=${(r) => t(r.target.value)}>
+        ${i.map((r) => c`<option value=${r.value} ?selected=${e === r.value}>${r.label}</option>`)}
+      </select>
+    </div>
+  `;
+}
+function Wt(e, t, o) {
+  return c`
+    <div class="prop-row">
+      <label class="prop-label">${o}</label>
+      <div style="display:flex;gap:2px;">
+        ${["left", "center", "right"].map((n) => c`
+          <button
+            style="flex:1;padding:6px;border:1px solid ${e === n ? "#3b82f6" : "#d1d5db"};background:${e === n ? "#eff6ff" : "white"};border-radius:4px;cursor:pointer;font-size:11px;text-transform:capitalize;color:${e === n ? "#3b82f6" : "#6b7280"};"
+            @click=${() => t(n)}
+          >${n}</button>
+        `)}
+      </div>
+    </div>
+  `;
+}
+function Ut(e) {
+  const t = (e || "0px").split(/\s+/).map((s) => parseInt(s) || 0), o = t[0], n = t[1] ?? o, i = t[2] ?? o, r = t[3] ?? n;
+  return [o, n, i, r];
+}
+function Ft(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 Nt(e, t, o) {
+  const [n, i, r, s] = Ut(e), a = (p, h, g, u) => t(Ft(p, h, g, u));
+  return c`
+    <div class="prop-row">
+      <label class="prop-label">${o}</label>
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;">
+        ${[
+    { label: "T", val: n, change: (p) => a(p, i, r, s) },
+    { label: "R", val: i, change: (p) => a(n, p, r, s) },
+    { label: "B", val: r, change: (p) => a(n, i, p, s) },
+    { label: "L", val: s, change: (p) => a(n, i, r, p) }
+  ].map((p) => c`
+          <div style="display:flex;align-items:center;gap:4px;">
+            <span style="font-size:10px;color:#9ca3af;width:12px;">${p.label}</span>
+            <input type="number" .value=${p.val} min="0"
+              @change=${(h) => p.change(parseInt(h.target.value) || 0)}
+              style="flex:1;padding:4px 6px;border:1px solid #d1d5db;border-radius:3px;font-size:12px;width:50px;" />
+          </div>
+        `)}
+      </div>
+    </div>
+  `;
+}
+function qt(e, t, o) {
+  return c`
+    <div class="prop-row">
+      <div class="prop-toggle">
+        <input type="checkbox" .checked=${!!e}
+          @change=${(n) => t(n.target.checked)} />
+        <label class="prop-label" style="margin:0;">${o}</label>
+      </div>
+    </div>
+  `;
+}
+function Gt(e, t, o) {
+  return c`
+    <div class="prop-row">
+      <label class="prop-label">${o}</label>
+      <input class="prop-input" type="text" .value=${e ?? ""}
+        @change=${(n) => t(n.target.value)} />
+    </div>
+  `;
+}
+function Yt(e, t, o) {
+  return c`
+    <div class="prop-row">
+      <label class="prop-label">${o}</label>
+      <textarea class="prop-input"
+        style="min-height:100px;font-family:'SF Mono',Menlo,monospace;font-size:12px;"
+        .value=${e ?? ""}
+        @change=${(n) => t(n.target.value)}
+      ></textarea>
+    </div>
+  `;
+}
+var Kt = Object.defineProperty, Jt = Object.getOwnPropertyDescriptor, K = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? Jt(t, o) : t, r = e.length - 1, s; r >= 0; r--)
+    (s = e[r]) && (i = (n ? s(t, o, i) : s(i)) || i);
+  return n && i && Kt(t, o, i), i;
 };
-let _ = class extends L {
+let P = class extends w {
   constructor() {
-    super(...arguments), this.options = {}, this.store = new X(), this.toolRegistry = new Y(), this.dragManager = null, this.callbacks = /* @__PURE__ */ new Map(), this.unsubscribe = null, this._handleKeydown = (e) => {
+    super(...arguments), this.storeCtrl = new R(this, ["design", "selection"]);
+  }
+  set store(e) {
+    this.storeCtrl.setStore(e);
+  }
+  get store() {
+    return this.storeCtrl.store;
+  }
+  /** Create a change handler bound to a specific content ID and property key */
+  onChange(e, t) {
+    return (o) => {
+      this.store.updateContentValues(e, { [t]: o });
+    };
+  }
+  render() {
+    const e = this.store.selectedId;
+    if (!e)
+      return c`<div class="no-selection">Select an element to edit its properties</div>`;
+    const t = this.store.findContent(e);
+    if (!t)
+      return c`<div class="no-selection">Select an element to edit its properties</div>`;
+    const o = this.toolRegistry.get(t.type);
+    return o ? c`
+      <div class="header">
+        <p class="header-title">${o.label}</p>
+        <p class="header-type">${t.type}</p>
+      </div>
+      ${Object.entries(o.options).map(([, n]) => this.renderGroup(t, n))}
+    ` : c`<div class="no-selection">Unknown tool: ${t.type}</div>`;
+  }
+  renderGroup(e, t) {
+    return c`
+      <div class="group">
+        <div class="group-title">${t.title}</div>
+        <div class="group-body">
+          ${Object.entries(t.options).map(
+      ([o, n]) => this.renderWidget(e, o, n)
+    )}
+        </div>
+      </div>
+    `;
+  }
+  /** Delegate to the correct widget function based on the property's widget type */
+  renderWidget(e, t, o) {
+    const n = e.values[t] ?? o.defaultValue, i = this.onChange(e.id, t);
+    switch (o.widget) {
+      case "color_picker":
+        return Ht(n, i, o.label);
+      case "toggle":
+        return qt(n, i, o.label);
+      case "rich_text":
+        return Yt(n, i, o.label);
+      case "dropdown":
+        return jt(n, i, o.label, o.widgetParams);
+      case "alignment":
+        return Wt(n, i, o.label);
+      case "padding":
+        return Nt(n, i, o.label);
+      case "text":
+      default:
+        return Gt(n, i, o.label);
+    }
+  }
+};
+P.styles = v`
+    :host {
+      display: flex; flex-direction: column; width: 300px; min-width: 300px;
+      background: #fff; border-left: 1px solid #e5e7eb;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      overflow-y: auto;
+    }
+    .header { padding: 12px 16px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; }
+    .header-title { font-size: 14px; font-weight: 600; color: #111827; margin: 0; }
+    .header-type { font-size: 11px; color: #9ca3af; text-transform: uppercase; margin: 2px 0 0 0; }
+    .no-selection {
+      display: flex; flex-direction: column; align-items: center; justify-content: center;
+      flex: 1; color: #9ca3af; font-size: 13px; gap: 8px; padding: 40px 20px; text-align: center;
+    }
+    .group { border-bottom: 1px solid #f3f4f6; }
+    .group-title {
+      padding: 10px 16px; font-size: 12px; font-weight: 600; color: #6b7280;
+      background: #f9fafb; cursor: pointer; user-select: none;
+      display: flex; align-items: center; justify-content: space-between;
+    }
+    .group-title:hover { background: #f3f4f6; }
+    .group-body { padding: 12px 16px; }
+    .prop-row { margin-bottom: 12px; }
+    .prop-label { display: block; font-size: 12px; color: #6b7280; margin-bottom: 4px; }
+    .prop-input {
+      width: 100%; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 4px;
+      font-size: 13px; color: #111827; background: white; box-sizing: border-box;
+    }
+    .prop-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }
+    .prop-toggle { display: flex; align-items: center; gap: 8px; }
+    .prop-color { display: flex; align-items: center; gap: 8px; }
+    .color-swatch { width: 28px; height: 28px; border-radius: 4px; border: 1px solid #d1d5db; cursor: pointer; padding: 0; }
+    textarea.prop-input { min-height: 80px; resize: vertical; font-family: monospace; }
+  `;
+K([
+  b({ attribute: !1 })
+], P.prototype, "store", 1);
+K([
+  b({ attribute: !1 })
+], P.prototype, "toolRegistry", 2);
+P = K([
+  $("me-property-panel")
+], P);
+var Xt = Object.defineProperty, Qt = Object.getOwnPropertyDescriptor, nt = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? Qt(t, o) : t, r = e.length - 1, s; r >= 0; r--)
+    (s = e[r]) && (i = (n ? s(t, o, i) : s(i)) || i);
+  return n && i && Xt(t, o, i), i;
+};
+let L = class extends w {
+  constructor() {
+    super(...arguments), this.options = {}, this.store = new ut(), this.toolRegistry = new gt(), this.dragManager = null, this.callbacks = /* @__PURE__ */ new Map(), this.unsubscribe = null, this._handleKeydown = (e) => {
       const t = e.metaKey || e.ctrlKey, n = e.composedPath().some((i) => {
         const r = i?.tagName;
         return r === "INPUT" || r === "TEXTAREA" || r === "SELECT";
@@ -1439,7 +2486,7 @@ let _ = class extends L {
     super.connectedCallback(), this.registerBuiltInTools(), this.applyOptions(), this.setAttribute("tabindex", "0"), this.addEventListener("keydown", this._handleKeydown);
   }
   firstUpdated() {
-    this.dragManager = new Q(this.store, this.toolRegistry, this.shadowRoot), this.dragManager.attach(), this.store.events.on("design:loaded", (e) => {
+    this.dragManager = new bt(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 }));
@@ -1460,8 +2507,8 @@ let _ = class extends L {
   exportHtml(e, t) {
     const o = this.store.getDesign(), n = /* @__PURE__ */ new Set();
     for (const r of o.body.rows)
-      for (const l of r.columns)
-        for (const a of l.contents)
+      for (const s of r.columns)
+        for (const a of s.contents)
           n.add(a.type);
     const i = Array.from(n).filter((r) => !this.toolRegistry.isLoaded(r)).map((r) => this.toolRegistry.ensureLoaded(r));
     i.length > 0 ? Promise.all(i).then(() => this.doExport(o, e, t)) : this.doExport(o, e, t);
@@ -1469,8 +2516,8 @@ let _ = class extends L {
   doExport(e, t, o) {
     const n = /* @__PURE__ */ new Map();
     for (const i of this.toolRegistry.getAll())
-      n.set(i.name, (r, l) => i.renderer.renderHtml(r, l));
-    t(ct(e, n, o));
+      n.set(i.name, (r, s) => i.renderer.renderHtml(r, s));
+    t(Rt(e, n, o));
   }
   async exportHtmlAsync(e) {
     return new Promise((t) => this.exportHtml(t, e));
@@ -1506,22 +2553,22 @@ let _ = class extends L {
    */
   preloadLazyTools() {
     const e = window.requestIdleCallback ?? ((t) => setTimeout(t, 1e3));
-    for (const { meta: t } of P)
+    for (const { meta: t } of Z)
       e(() => {
         this.toolRegistry.ensureLoaded(t.name);
       });
   }
   registerBuiltInTools() {
-    for (const e of st)
+    for (const e of kt)
       this.toolRegistry.register(e);
-    for (const { meta: e, loader: t } of P)
+    for (const { meta: e, loader: t } of Z)
       this.toolRegistry.registerLazy(e, t);
   }
   applyOptions() {
     this.options.design && this.store.loadDesign(this.options.design);
   }
   render() {
-    return m`
+    return c`
       <me-editor-sidebar
         .store=${this.store}
         .toolRegistry=${this.toolRegistry}
@@ -1537,7 +2584,7 @@ let _ = class extends L {
     `;
   }
 };
-_.styles = z`
+L.styles = v`
     :host {
       display: flex;
       width: 100%;
@@ -1552,18 +2599,31 @@ _.styles = z`
     }
     * { box-sizing: border-box; }
   `;
-H([
-  W({ type: Object })
-], _.prototype, "options", 2);
-_ = H([
-  j("mail-editor")
-], _);
+nt([
+  b({ type: Object })
+], L.prototype, "options", 2);
+L = nt([
+  $("mail-editor")
+], L);
+function k(e, t) {
+  customElements.get(e) || customElements.define(e, t);
+}
+k("mail-editor", L);
+k("me-editor-canvas", T);
+k("me-row-renderer", D);
+k("me-column-renderer", y);
+k("me-content-renderer", _);
+k("me-editor-sidebar", I);
+k("me-body-settings", E);
+k("me-property-panel", P);
+const ne = customElements.get("mail-editor") !== void 0;
 export {
-  X as E,
-  _ as M,
-  Y as T,
-  y as e,
-  bt as j,
-  s
+  ne as E,
+  L as M,
+  gt as T,
+  ut as a,
+  M as e,
+  oe as j,
+  l as s
 };
-//# sourceMappingURL=mail-editor-D3QbvBKs.js.map
+//# sourceMappingURL=index-DV_tofKb.js.map