@emabuild/core 0.3.0 → 0.4.1

package/dist/{index-zy5NbC2E.js → index-CLXq1CZC.js}

@@ -1,6 +1,6 @@
-import { css as _, LitElement as T, nothing as v, html as d } from "lit";
-import { property as x, customElement as S, state as E } from "lit/decorators.js";
-import { unsafeHTML as ie } from "lit/directives/unsafe-html.js";
+import { css as _, LitElement as T, nothing as x, html as d } from "lit";
+import { property as v, customElement as S, state as E } from "lit/decorators.js";
+import { unsafeHTML as J } from "lit/directives/unsafe-html.js";
 import { styleMap as He } from "lit/directives/style-map.js";
 import { repeat as ye } from "lit/directives/repeat.js";
 class B {
@@ -67,17 +67,17 @@ function V(e, t) {
   const i = $e(o.r, o.g, o.b), n = $e(r.r, r.g, r.b);
   return (Math.max(i, n) + 0.05) / (Math.min(i, n) + 0.05);
 }
-function Le(e) {
+function ze(e) {
   if (typeof e != "string") return !1;
   const t = e.trim().toLowerCase();
   return t !== "" && t !== "transparent" && t !== "none" && t !== "inherit";
 }
 function Ce(...e) {
   for (const t of e)
-    if (Le(t)) return t;
+    if (ze(t)) return t;
   return "#ffffff";
 }
-function te(e, t = 0) {
+function oe(e, t = 0) {
   return typeof e == "number" ? e : typeof e == "string" && parseInt(e, 10) || t;
 }
 function Ue(e) {
@@ -122,10 +122,10 @@ let U = class extends T {
     const e = this.checkAccessibility(), t = e.filter((i) => i.severity === "error"), o = e.filter((i) => i.severity === "warning"), r = e.filter((i) => i.severity === "info");
     return d`
       <div class="summary">
-        ${t.length > 0 ? d`<span class="score-pill errors"><span class="score-dot error"></span>${t.length}</span>` : v}
-        ${o.length > 0 ? d`<span class="score-pill warnings"><span class="score-dot warning"></span>${o.length}</span>` : v}
-        ${r.length > 0 ? d`<span class="score-pill infos"><span class="score-dot info"></span>${r.length}</span>` : v}
-        ${t.length === 0 && o.length === 0 ? d`<span class="score-pill pass"><span class="score-dot pass"></span>Pass</span>` : v}
+        ${t.length > 0 ? d`<span class="score-pill errors"><span class="score-dot error"></span>${t.length}</span>` : x}
+        ${o.length > 0 ? d`<span class="score-pill warnings"><span class="score-dot warning"></span>${o.length}</span>` : x}
+        ${r.length > 0 ? d`<span class="score-pill infos"><span class="score-dot info"></span>${r.length}</span>` : x}
+        ${t.length === 0 && o.length === 0 ? d`<span class="score-pill pass"><span class="score-dot pass"></span>Pass</span>` : x}
       </div>
 
       ${e.length === 0 ? d`
@@ -138,15 +138,15 @@ let U = class extends T {
         ${t.length > 0 ? d`
           <div class="section-title">Errors</div>
           <div class="issues-list">${t.map((i) => this.renderIssue(i))}</div>
-        ` : v}
+        ` : x}
         ${o.length > 0 ? d`
           <div class="section-title">Warnings</div>
           <div class="issues-list">${o.map((i) => this.renderIssue(i))}</div>
-        ` : v}
+        ` : x}
         ${r.length > 0 ? d`
           <div class="section-title">Info</div>
           <div class="issues-list">${r.map((i) => this.renderIssue(i))}</div>
-        ` : v}
+        ` : x}
       `}
     `;
   }
@@ -162,9 +162,9 @@ let U = class extends T {
         <div class="issue-body">
           <div class="issue-rule">${e.rule}</div>
           <div class="issue-msg">${e.message}</div>
-          ${e.element ? d`<div class="issue-element">${e.element}</div>` : v}
-          ${e.rule === "heading-structure" ? d`<button class="issue-fix" @click=${this.handleFixHeading}>+ Add heading</button>` : v}
-          ${e.rule === "preheader" ? d`<button class="issue-fix" @click=${this.handleFixPreheader}>Fix</button>` : v}
+          ${e.element ? d`<div class="issue-element">${e.element}</div>` : x}
+          ${e.rule === "heading-structure" ? d`<button class="issue-fix" @click=${this.handleFixHeading}>+ Add heading</button>` : x}
+          ${e.rule === "preheader" ? d`<button class="issue-fix" @click=${this.handleFixPreheader}>Fix</button>` : x}
         </div>
       </div>
     `;
@@ -274,10 +274,10 @@ U.styles = _`
     .all-clear-sub { font-size: 11px; color: #9ca3af; margin-top: 4px; }
   `;
 xe([
-  x({ attribute: !1 })
+  v({ attribute: !1 })
 ], U.prototype, "store", 1);
 xe([
-  x({ attribute: !1 })
+  v({ attribute: !1 })
 ], U.prototype, "toolRegistry", 2);
 U = xe([
   S("me-a11y-checker")
@@ -297,23 +297,23 @@ function ve(e) {
           (f.src || "") && !C.trim() ? t.push({ severity: "error", rule: "img-alt", message: "Missing alt text.", element: w, elementId: m.id }) : C && C.length > 125 && t.push({ severity: "warning", rule: "img-alt-length", message: `Alt text ${C.length} chars (max 125).`, element: w, elementId: m.id });
         }
         if (y === "text" || y === "heading" || y === "paragraph") {
-          const C = Le(f.color) ? f.color : n, A = Ce(f.backgroundColor, $), I = V(C, A);
+          const C = ze(f.color) ? f.color : n, A = Ce(f.backgroundColor, $), I = V(C, A);
           if (I !== null) {
-            const Y = te(f.fontSize, 14), je = ["700", "800", "900"].includes(f.fontWeight || ""), ke = Y >= 18 || Y >= 14 && je ? 3 : 4.5;
+            const Q = oe(f.fontSize, 14), Oe = ["700", "800", "900"].includes(f.fontWeight || ""), ke = Q >= 18 || Q >= 14 && Oe ? 3 : 4.5;
             I < ke && t.push({ severity: I < 3 ? "error" : "warning", rule: "color-contrast", message: `Ratio ${I.toFixed(1)}:1 (min ${ke}:1). "${C}" on "${A}".`, element: w, elementId: m.id });
           }
-          const W = te(f.fontSize, 14);
+          const W = oe(f.fontSize, 14);
           y !== "heading" && W > 0 && W < 12 && t.push({ severity: "warning", rule: "font-size", message: `Font size ${W}px below 12px minimum.`, element: w, elementId: m.id });
-          const ee = Ue(f.lineHeight);
-          ee !== null && ee < 1.2 && y !== "heading" && t.push({ severity: "warning", rule: "line-height", message: `Line height ${String(f.lineHeight)} too tight (min 1.5x).`, element: w, elementId: m.id }), f.textAlign === "justify" && t.push({ severity: "warning", rule: "text-justify", message: "Justified text reduces readability.", element: w, elementId: m.id });
+          const te = Ue(f.lineHeight);
+          te !== null && te < 1.2 && y !== "heading" && t.push({ severity: "warning", rule: "line-height", message: `Line height ${String(f.lineHeight)} too tight (min 1.5x).`, element: w, elementId: m.id }), f.textAlign === "justify" && t.push({ severity: "warning", rule: "text-justify", message: "Justified text reduces readability.", element: w, elementId: m.id });
         }
         if (y === "button") {
           const C = f.backgroundColor || "#3b82f6", A = f.textColor || "#ffffff", I = V(A, C);
           I !== null && I < 4.5 && t.push({ severity: I < 3 ? "error" : "warning", rule: "color-contrast", message: `Button contrast ${I.toFixed(1)}:1 (min 4.5:1).`, element: w, elementId: m.id });
           const W = V(C, $);
           W !== null && W < 3 && t.push({ severity: "warning", rule: "btn-visibility", message: `Button blends with background (${W.toFixed(1)}:1).`, element: w, elementId: m.id }), (f.text || "").trim() || t.push({ severity: "error", rule: "link-text", message: "Button has no visible text.", element: w, elementId: m.id });
-          const ee = (f.buttonPadding || "10px 20px").split(/\s+/), Y = te(f.fontSize, 14) + te(ee[0], 10) * 2;
-          Y < 44 && t.push({ severity: "info", rule: "touch-target", message: `Button height ~${Y}px (min 44px).`, element: w, elementId: m.id });
+          const te = (f.buttonPadding || "10px 20px").split(/\s+/), Q = oe(f.fontSize, 14) + oe(te[0], 10) * 2;
+          Q < 44 && t.push({ severity: "info", rule: "touch-target", message: `Button height ~${Q}px (min 44px).`, element: w, elementId: m.id });
         }
         if (y === "heading" && (s = !0, a.push(f.headingType || "h1")), y === "text" || y === "paragraph") {
           const C = f.text || "", A = C.match(/<a[^>]*>(\s|&nbsp;)*<\/a>/gi);
@@ -422,7 +422,7 @@ class Ge {
     this.undoStack = [], this.redoStack = [];
   }
 }
-function Qe() {
+function Ye() {
   return {
     counters: { u_row: 0, u_column: 0 },
     body: {
@@ -467,7 +467,7 @@ function Qe() {
     schemaVersion: 16
   };
 }
-function Ye(e, t) {
+function Qe(e, t) {
   const o = e.next("u_row"), r = t.map(() => {
     const i = e.next("u_column");
     return {
@@ -519,13 +519,13 @@ function Ke(e, t, o = {}) {
 function de(e, t) {
   return e.body.rows.find((o) => o.id === t);
 }
-function oe(e, t) {
+function re(e, t) {
   for (const o of e.body.rows) {
     const r = o.columns.find((i) => i.id === t);
     if (r) return r;
   }
 }
-function re(e, t) {
+function ie(e, t) {
   for (const o of e.body.rows)
     for (const r of o.columns) {
       const i = r.contents.find((n) => n.id === t);
@@ -546,7 +546,13 @@ function ce(e, t) {
 }
 class Ze {
   constructor() {
-    this.history = new Ge(), this.counterManager = qe(), this.channelSubscribers = /* @__PURE__ */ new Map(), this.events = new Ne(), this._mergeTags = [], this._a11yIssueIds = /* @__PURE__ */ new Set(), this._selectedId = null, this._hoveredId = null, this._viewMode = "desktop", this._activeTab = "content", this.design = Qe();
+    this.history = new Ge(), this.counterManager = qe(), this.channelSubscribers = /* @__PURE__ */ new Map(), this.events = new Ne(), this._mergeTags = [], this._callbacks = /* @__PURE__ */ new Map(), this._a11yIssueIds = /* @__PURE__ */ new Set(), this._selectedId = null, this._hoveredId = null, this._viewMode = "desktop", this._activeTab = "content", this.pendingChannels = /* @__PURE__ */ new Set(), this.rafId = null, this.design = Ye();
+  }
+  setCallback(t, o) {
+    this._callbacks.set(t, o);
+  }
+  getCallback(t) {
+    return this._callbacks.get(t);
   }
   get a11yIssueIds() {
     return this._a11yIssueIds;
@@ -582,14 +588,18 @@ class Ze {
     const o = ["design", "selection", "hover", "viewMode", "activeTab"];
     return this.subscribeChannels(o, t);
   }
-  /** Notify only subscribers of specific channels */
   notifyChannels(...t) {
-    const o = /* @__PURE__ */ new Set();
-    for (const r of t) {
-      const i = this.channelSubscribers.get(r);
-      if (i) for (const n of i) o.add(n);
-    }
-    for (const r of o) r();
+    for (const o of t) this.pendingChannels.add(o);
+    this.rafId === null && (this.rafId = requestAnimationFrame(() => {
+      this.rafId = null;
+      const o = /* @__PURE__ */ new Set();
+      for (const r of this.pendingChannels) {
+        const i = this.channelSubscribers.get(r);
+        if (i) for (const n of i) o.add(n);
+      }
+      this.pendingChannels.clear();
+      for (const r of o) r();
+    }));
   }
   // ── Getters ────────────────────────────────────────────────
   /** Get the full design document */
@@ -651,7 +661,9 @@ class Ze {
     this._selectedId = t, this.notifyChannels("selection");
   }
   hover(t) {
-    this._hoveredId = t, this.notifyChannels("hover");
+    this._hoveredId = t;
+    const o = this.channelSubscribers.get("hover");
+    if (o) for (const r of o) r();
   }
   setViewMode(t) {
     this._viewMode = t, this.notifyChannels("viewMode");
@@ -710,13 +722,13 @@ class Ze {
   // ── Column Operations ──────────────────────────────────────
   /** Update column-level values. Returns true if updated. */
   updateColumnValues(t, o) {
-    const r = oe(this.design, t);
+    const r = re(this.design, t);
     return r ? (this.history.push(this.design), Object.assign(r.values, o), this.notifyChannels("design"), this.emitUpdate("content_updated"), !0) : !1;
   }
   // ── Content Operations ─────────────────────────────────────
   /** Add content to a column at the given index. Returns the inserted content. */
   addContent(t, o, r) {
-    const i = oe(this.design, t);
+    const i = re(this.design, t);
     if (!i) return;
     const n = structuredClone(o);
     return this.history.push(this.design), r !== void 0 && r >= 0 && r <= i.contents.length ? i.contents.splice(r, 0, n) : i.contents.push(n), this.syncCounters(), this.notifyChannels("design"), this.emitUpdate("content_added", n), n;
@@ -733,13 +745,13 @@ class Ze {
   }
   /** Update content values by ID. Returns true if updated. */
   updateContentValues(t, o) {
-    const r = re(this.design, t);
+    const r = ie(this.design, t);
     return r ? (this.history.push(this.design), Object.assign(r.values, o), this.notifyChannels("design"), this.emitUpdate("content_updated"), !0) : !1;
   }
   /** Move a content block to a different column at a given index. Returns true if moved. */
   moveContent(t, o, r) {
-    if (!re(this.design, t)) return !1;
-    const n = oe(this.design, o);
+    if (!ie(this.design, t)) return !1;
+    const n = re(this.design, o);
     if (!n) return !1;
     this.history.push(this.design);
     let s;
@@ -757,7 +769,7 @@ class Ze {
   }
   /** Duplicate a content block, inserting the copy right after the original */
   duplicateContent(t) {
-    const o = re(this.design, t);
+    const o = ie(this.design, t);
     if (o)
       for (const r of this.design.body.rows)
         for (const i of r.columns) {
@@ -779,10 +791,10 @@ class Ze {
     return de(this.design, t);
   }
   findColumn(t) {
-    return oe(this.design, t);
+    return re(this.design, t);
   }
   findContent(t) {
-    return re(this.design, t);
+    return ie(this.design, t);
   }
   findParentColumn(t) {
     return Je(this.design, t);
@@ -793,7 +805,7 @@ class Ze {
   // ── Factory Methods (delegate to design-factory) ───────────
   /** Create a new row with the given column layout */
   createRow(t) {
-    const o = Ye(this.counterManager, t);
+    const o = Qe(this.counterManager, t);
     return this.syncCounters(), o;
   }
   /** Create a new content block for the given tool type */
@@ -1165,7 +1177,7 @@ function Pe(e) {
     color: p(e, "textColor", "#ffffff")
   };
 }
-function fo(e, t) {
+function bo(e, t) {
   if (typeof e != "string") return t;
   try {
     return JSON.parse(e);
@@ -1297,7 +1309,7 @@ const it = [
       const t = p(e, "backgroundColor", "transparent"), o = p(e, "color", "inherit"), r = p(e, "lineHeight", "140%"), i = p(e, "textAlign", "left"), n = be(e), s = p(e, "text");
       return d`
         <div style="background-color:${t};color:${o};line-height:${r};text-align:${i};font-family:${n};">
-          ${ie(s)}
+          ${J(s)}
         </div>
       `;
     },
@@ -1377,7 +1389,7 @@ const it = [
         letterSpacing: p(e, "letterSpacing", "normal"),
         fontFamily: be(e)
       }, o = De(e, "Heading");
-      return d`<div style=${He(t)}>${ie(o)}</div>`;
+      return d`<div style=${He(t)}>${J(o)}</div>`;
     },
     renderHtml(e) {
       const t = p(e, "containerPadding", "10px"), o = p(e, "fontSize", "22px"), r = p(e, "color", "#000000"), i = p(e, "textAlign", "left"), n = p(e, "fontWeight", "700"), s = p(e, "lineHeight", "140%"), a = p(e, "letterSpacing", "normal"), c = be(e), l = p(e, "headingType", "h1"), u = De(e, "Heading"), h = `<${l} style="margin:0;font-size:${o};color:${r};text-align:${i};font-weight:${n};line-height:${s};letter-spacing:${a};font-family:${c};">${u}</${l}>`;
@@ -1423,7 +1435,7 @@ const it = [
   renderer: {
     renderEditor(e) {
       const t = p(e, "color", "#374151"), o = p(e, "lineHeight", "160%"), r = p(e, "textAlign", "left");
-      return d`<div style="color:${t};line-height:${o};text-align:${r};">${ie(p(e, "text"))}</div>`;
+      return d`<div style="color:${t};line-height:${o};text-align:${r};">${J(p(e, "text"))}</div>`;
     },
     renderHtml(e) {
       const t = p(e, "containerPadding", "10px"), o = p(e, "color", "#374151"), r = p(e, "lineHeight", "160%"), i = p(e, "textAlign", "left"), n = p(e, "letterSpacing", "normal"), s = `<div style="font-size:14px;color:${o};line-height:${r};text-align:${i};letter-spacing:${n};word-wrap:break-word;">${p(e, "text")}</div>`;
@@ -1440,7 +1452,7 @@ const it = [
     image: {
       title: "Image",
       options: {
-        src: { label: "Image URL", defaultValue: "", widget: "text" },
+        src: { label: "Image URL", defaultValue: "", widget: "image_upload" },
         alt: { label: "Alt Text", defaultValue: "", widget: "text" },
         href: { label: "Link URL", defaultValue: "", widget: "text" },
         target: { label: "Link Target", defaultValue: "_blank", widget: "text" }
@@ -1560,7 +1572,7 @@ const it = [
       const { bg: t, color: o } = Pe(e), r = p(e, "fontSize", "14px"), i = p(e, "fontWeight", "700"), n = p(e, "borderRadius", "4px"), s = p(e, "buttonPadding", p(e, "padding", "10px 20px")), a = p(e, "text", "Click Me"), c = p(e, "textAlign", "center"), l = p(e, "buttonWidth", "auto"), u = p(e, "borderWidth", "0px"), h = p(e, "borderColor", t), g = u !== "0px" ? `border:${u} solid ${h};` : "border:none;", b = l === "auto" ? "display:inline-block;" : `display:block;width:${l};`;
       return d`
         <div style="text-align:${c};">
-          <a style="${b}background-color:${t};color:${o};font-size:${r};font-weight:${i};border-radius:${n};padding:${s};text-decoration:none;text-align:center;${g}cursor:pointer;font-family:arial,helvetica,sans-serif;">${a}</a>
+          <a style="${b}background-color:${t};color:${o};font-size:${r};font-weight:${i};border-radius:${n};padding:${s};text-decoration:none;text-align:center;${g}cursor:pointer;font-family:arial,helvetica,sans-serif;">${J(a)}</a>
         </div>
       `;
     },
@@ -1631,31 +1643,31 @@ const it = [
 ], Ee = [
   {
     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-4zZO2hqE.js").then((e) => e.htmlTool)
+    loader: () => import("./html-tool-RhawxTfJ.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-kPuP-4n6.js").then((e) => e.socialTool)
+    loader: () => import("./social-tool-CUjd50d7.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-Cu5D_VYs.js").then((e) => e.menuTool)
+    loader: () => import("./menu-tool-BkQwnMyx.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-CttMka8Z.js").then((e) => e.videoTool)
+    loader: () => import("./video-tool-C8evvYgp.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-CG1oul_Z.js").then((e) => e.timerTool)
+    loader: () => import("./timer-tool-CwBZNCmI.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-CcWFvTSc.js").then((e) => e.tableTool)
+    loader: () => import("./table-tool-Bi0-Rvry.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-C7760Hvm.js").then((e) => e.formTool)
+    loader: () => import("./form-tool-a_WVnfC2.js").then((e) => e.formTool)
   }
 ];
 function mt(e, t, o) {
@@ -2077,12 +2089,12 @@ function At(...e) {
     }
   return t;
 }
-var Mt = Object.defineProperty, zt = Object.getOwnPropertyDescriptor, se = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? zt(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+var Mt = Object.defineProperty, Lt = Object.getOwnPropertyDescriptor, se = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? Lt(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
   return r && i && Mt(t, o, i), i;
 };
-let O = class extends T {
+let j = class extends T {
   constructor() {
     super(...arguments), this.visible = !1, this.mergeTags = [], this.mergeDropdownOpen = !1, this._outsideClickHandler = (e) => {
       if (!this.mergeDropdownOpen) return;
@@ -2179,14 +2191,14 @@ let O = class extends T {
                   `)}
                 `)}
               </div>
-            ` : v}
+            ` : x}
           </div>
-        ` : v}
+        ` : x}
       </div>
     `;
   }
 };
-O.styles = _`
+j.styles = _`
     :host {
       position: fixed;
       z-index: 10000;
@@ -2286,21 +2298,21 @@ O.styles = _`
     }
   `;
 se([
-  x({ type: Boolean })
-], O.prototype, "visible", 2);
+  v({ type: Boolean })
+], j.prototype, "visible", 2);
 se([
-  x({ attribute: !1 })
-], O.prototype, "mergeTags", 2);
+  v({ attribute: !1 })
+], j.prototype, "mergeTags", 2);
 se([
   E()
-], O.prototype, "mergeDropdownOpen", 2);
-O = se([
+], j.prototype, "mergeDropdownOpen", 2);
+j = se([
   S("me-inline-toolbar")
-], O);
-var Lt = Object.defineProperty, Bt = Object.getOwnPropertyDescriptor, J = (e, t, o, r) => {
+], j);
+var zt = Object.defineProperty, Bt = Object.getOwnPropertyDescriptor, X = (e, t, o, r) => {
   for (var i = r > 1 ? void 0 : r ? Bt(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && Lt(t, o, i), i;
+  return r && i && zt(t, o, i), i;
 };
 const Ae = /* @__PURE__ */ new Set(["text", "heading", "paragraph"]);
 function Me(e) {
@@ -2344,17 +2356,27 @@ let M = class extends T {
     this.classList.remove("hovered"), this.store.hover(null);
   }
   handleDelete(e) {
-    e.stopPropagation(), this.store.removeContent(this.content.id);
+    e.stopPropagation(), this.classList.add("removing");
+    const t = this.content.id;
+    this.addEventListener("animationend", () => this.store.removeContent(t), { once: !0 });
   }
   handleDuplicate(e) {
-    e.stopPropagation(), this.store.duplicateContent(this.content.id);
+    e.stopPropagation();
+    const t = this.store.duplicateContent(this.content.id);
+    t && requestAnimationFrame(() => {
+      const o = this.parentElement;
+      if (o?.shadowRoot) {
+        const r = o.shadowRoot.querySelector(`[data-content-id="${t.id}"]`);
+        r?.classList.add("just-duplicated"), setTimeout(() => r?.classList.remove("just-duplicated"), 600);
+      }
+    });
   }
   /** Called from the drag handle only (not the whole block) */
   handleDragStart(e) {
-    e.stopPropagation(), e.dataTransfer.setData("application/maileditor-content", this.content.id), e.dataTransfer.effectAllowed = "move", this.style.opacity = "0.4", D.startContentDrag(this.content.id, this);
+    e.stopPropagation(), e.dataTransfer.setData("application/maileditor-content", this.content.id), e.dataTransfer.effectAllowed = "move", this.style.opacity = "0.4", this.style.transform = "scale(0.97)", D.startContentDrag(this.content.id, this);
   }
   handleDragEnd() {
-    D.reset();
+    this.style.transform = "", D.reset();
   }
   // ── Inline editing ───────────────────────────────────────
   startEditing() {
@@ -2392,7 +2414,7 @@ let M = class extends T {
   }
   // ── Lifecycle ────────────────────────────────────────────
   connectedCallback() {
-    super.connectedCallback(), this.store && (this.hoverUnsub = this.store.subscribeChannels(["hover"], () => {
+    super.connectedCallback(), this.classList.add("just-dropped"), setTimeout(() => this.classList.remove("just-dropped"), 400), this.store && (this.hoverUnsub = this.store.subscribeChannels(["hover"], () => {
       this.store.hoveredId === this.content?.id ? this.classList.add("hovered") : this.matches(":hover") || this.classList.remove("hovered");
     }));
   }
@@ -2428,7 +2450,7 @@ let M = class extends T {
       ${l}
       <div class="action-bar">
         <span class="action-bar-label">${this.content.type}</span>
-        <button class="action-btn" @click=${this.handleDuplicate} title="Duplicate">&#9851;</button>
+        <button class="action-btn" @click=${this.handleDuplicate} title="Duplicate">&#10697;</button>
         <button class="action-btn" @click=${this.handleDelete} title="Delete">&#10005;</button>
       </div>
       <div class="content-wrapper" style="padding:${h};"
@@ -2484,6 +2506,20 @@ M.styles = _`
     :host(.just-dropped) {
       animation: dropIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
     }
+    :host(.just-duplicated) {
+      animation: duplicateFlash 0.5s ease-out;
+    }
+    @keyframes duplicateFlash {
+      0% { background: var(--me-primary-10, rgba(93,118,139,0.1)); transform: scale(1.01); }
+      100% { background: transparent; transform: scale(1); }
+    }
+    :host(.removing) {
+      animation: fadeRemove 0.25s ease-out forwards;
+      pointer-events: none;
+    }
+    @keyframes fadeRemove {
+      to { opacity: 0; transform: scale(0.96) translateY(-4px); height: 0; margin: 0; padding: 0; overflow: hidden; }
+    }
     :host(.hidden-in-view) { opacity: 0.3; position: relative; }
     .hidden-badge {
       position: absolute; top: 4px; right: 4px; z-index: 5;
@@ -2553,27 +2589,27 @@ M.styles = _`
     }
     .inline-editable:focus { outline: none; }
   `;
-J([
-  x({ attribute: !1 })
+X([
+  v({ attribute: !1 })
 ], M.prototype, "content", 2);
-J([
-  x({ attribute: !1 })
+X([
+  v({ attribute: !1 })
 ], M.prototype, "store", 1);
-J([
-  x({ attribute: !1 })
+X([
+  v({ attribute: !1 })
 ], M.prototype, "toolRegistry", 2);
-J([
+X([
   E()
 ], M.prototype, "editing", 2);
-M = J([
+M = X([
   S("me-content-renderer")
 ], M);
-var Wt = Object.defineProperty, Ot = Object.getOwnPropertyDescriptor, X = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? Ot(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+var Wt = Object.defineProperty, jt = Object.getOwnPropertyDescriptor, Z = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? jt(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
   return r && i && Wt(t, o, i), i;
 };
-let z = class extends T {
+let L = class extends T {
   constructor() {
     super(...arguments), this.storeCtrl = new B(this, ["design"]), this.widthPercent = 100;
   }
@@ -2600,7 +2636,7 @@ let z = class extends T {
     `;
   }
 };
-z.styles = _`
+L.styles = _`
     :host {
       display: block;
       min-height: 40px;
@@ -2611,12 +2647,17 @@ z.styles = _`
       align-items: center;
       justify-content: center;
       min-height: 60px;
-      border: 2px dashed #d1d5db;
-      border-radius: 4px;
-      color: #9ca3af;
-      font-size: 13px;
+      border: 2px dashed var(--me-grey-300, #d1d5db);
+      border-radius: 8px;
+      color: var(--me-grey-400, #9ca3af);
+      font-size: 12px;
       font-family: sans-serif;
       margin: 4px;
+      animation: emptyBreath 3s ease-in-out infinite;
+    }
+    @keyframes emptyBreath {
+      0%, 100% { border-color: var(--me-grey-300, #d1d5db); opacity: 0.6; }
+      50% { border-color: var(--me-primary, #5d768b); opacity: 1; }
     }
     .drop-indicator {
       height: 3px;
@@ -2630,32 +2671,32 @@ z.styles = _`
       opacity: 1;
     }
   `;
-X([
-  x({ attribute: !1 })
-], z.prototype, "column", 2);
-X([
-  x({ attribute: !1 })
-], z.prototype, "store", 1);
-X([
-  x({ attribute: !1 })
-], z.prototype, "toolRegistry", 2);
-X([
-  x({ type: Number })
-], z.prototype, "widthPercent", 2);
-z = X([
+Z([
+  v({ attribute: !1 })
+], L.prototype, "column", 2);
+Z([
+  v({ attribute: !1 })
+], L.prototype, "store", 1);
+Z([
+  v({ attribute: !1 })
+], L.prototype, "toolRegistry", 2);
+Z([
+  v({ type: Number })
+], L.prototype, "widthPercent", 2);
+L = Z([
   S("me-column-renderer")
-], z);
-var jt = Object.defineProperty, Ht = Object.getOwnPropertyDescriptor, ae = (e, t, o, r) => {
+], L);
+var Ot = Object.defineProperty, Ht = Object.getOwnPropertyDescriptor, ae = (e, t, o, r) => {
   for (var i = r > 1 ? void 0 : r ? Ht(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && jt(t, o, i), i;
+  return r && i && Ot(t, o, i), i;
 };
-let j = class extends T {
+let O = class extends T {
   constructor() {
     super(...arguments), this.storeCtrl = new B(this, ["design", "viewMode"]), this.handleDragStart = (e) => {
-      e.stopPropagation(), e.dataTransfer.setData("application/maileditor-row", this.row.id), e.dataTransfer.effectAllowed = "move", this.style.opacity = "0.4", D.startRowDrag(this.row.id, this);
+      e.stopPropagation(), e.dataTransfer.setData("application/maileditor-row", this.row.id), e.dataTransfer.effectAllowed = "move", this.style.opacity = "0.4", this.style.transform = "scale(0.98)", D.startRowDrag(this.row.id, this);
     }, this.handleDragEnd = () => {
-      D.reset();
+      this.style.transform = "", D.reset();
     };
   }
   set store(e) {
@@ -2678,7 +2719,9 @@ let j = class extends T {
     e.stopPropagation(), this.store.duplicateRow(this.row.id);
   }
   handleDelete(e) {
-    e.stopPropagation(), this.store.removeRow(this.row.id);
+    e.stopPropagation(), this.classList.add("removing");
+    const t = this.row.id;
+    this.addEventListener("animationend", () => this.store.removeRow(t), { once: !0 });
   }
   render() {
     if (!this.store) return d``;
@@ -2736,13 +2779,20 @@ let j = class extends T {
     `;
   }
 };
-j.styles = _`
+O.styles = _`
     :host {
       display: block;
       position: relative;
-      transition: opacity 0.2s ease;
+      transition: opacity 0.2s ease, transform 0.25s ease;
     }
     :host(.hidden-in-view) { opacity: 0.3; }
+    :host(.removing) {
+      animation: rowRemove 0.25s ease-out forwards;
+      pointer-events: none;
+    }
+    @keyframes rowRemove {
+      to { opacity: 0; transform: scaleY(0.8); height: 0; margin: 0; overflow: hidden; }
+    }
     .row-hidden-badge {
       position: absolute; top: 4px; left: 4px; z-index: 5;
       background: #f59e0b; color: white; font-size: 10px; font-weight: 600;
@@ -2850,23 +2900,23 @@ j.styles = _`
     }
   `;
 ae([
-  x({ attribute: !1 })
-], j.prototype, "row", 2);
+  v({ attribute: !1 })
+], O.prototype, "row", 2);
 ae([
-  x({ attribute: !1 })
-], j.prototype, "store", 1);
+  v({ attribute: !1 })
+], O.prototype, "store", 1);
 ae([
-  x({ attribute: !1 })
-], j.prototype, "toolRegistry", 2);
-j = ae([
+  v({ attribute: !1 })
+], O.prototype, "toolRegistry", 2);
+O = ae([
   S("me-row-renderer")
-], j);
-var Vt = Object.defineProperty, Ft = Object.getOwnPropertyDescriptor, Z = (e, t, o, r) => {
+], O);
+var Vt = Object.defineProperty, Ft = Object.getOwnPropertyDescriptor, ee = (e, t, o, r) => {
   for (var i = r > 1 ? void 0 : r ? Ft(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
   return r && i && Vt(t, o, i), i;
 };
-let L = class extends T {
+let z = class extends T {
   constructor() {
     super(...arguments), this.storeCtrl = new B(this, ["design", "viewMode"]), this.quickAddIndex = null, this.quickAddPos = { x: 0, y: 0 }, this.boundCloseQuickAdd = this.closeQuickAdd.bind(this);
   }
@@ -2885,6 +2935,11 @@ let L = class extends T {
   handleCanvasClick() {
     this.store.select(null);
   }
+  /** Flash the canvas border to confirm undo/redo */
+  flashUndo() {
+    const e = this.shadowRoot?.querySelector(".canvas-body");
+    e && (e.classList.add("undo-flash"), e.addEventListener("animationend", () => e.classList.remove("undo-flash"), { once: !0 }));
+  }
   setViewMode(e) {
     this.store.setViewMode(e);
   }
@@ -2989,8 +3044,19 @@ let L = class extends T {
         >
           ${e.length === 0 ? d`
                 <div class="empty-canvas">
-                  <div class="empty-icon">&#9776;</div>
-                  <div>Drag a content block here</div>
+                  <div class="empty-icon">
+                    <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
+                  </div>
+                  <div class="empty-title">Start building your email</div>
+                  <div class="empty-sub">Drag elements from the sidebar, use the + button, or start with a template</div>
+                  <div class="empty-actions">
+                    <button class="empty-action primary" @click=${() => this.quickAddTool("heading", 0)}>Add Heading</button>
+                    <button class="empty-action" @click=${() => this.quickAddTool("text", 0)}>Add Text</button>
+                    <button class="empty-action" @click=${() => this.quickAddLayout([1, 1], 0)}>2 Columns</button>
+                  </div>
+                  <div class="empty-shortcut">
+                    <kbd>Ctrl</kbd>+<kbd>Z</kbd> undo · <kbd>Ctrl</kbd>+<kbd>D</kbd> duplicate · <kbd>Del</kbd> remove
+                  </div>
                 </div>
                 ${this.renderRowGap(0)}
               ` : d`
@@ -3010,7 +3076,7 @@ let L = class extends T {
     `;
   }
 };
-L.styles = _`
+z.styles = _`
     :host {
       display: block;
       flex: 1;
@@ -3027,21 +3093,48 @@ L.styles = _`
       background: #ffffff;
       min-height: 200px;
       position: relative;
+      transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .canvas-body.undo-flash {
+      animation: undoFlash 0.3s ease-out;
+    }
+    @keyframes undoFlash {
+      0% { box-shadow: inset 0 0 0 2px var(--me-primary-30, rgba(93,118,139,0.3)); }
+      100% { box-shadow: none; }
     }
     .empty-canvas {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      min-height: 300px;
-      color: var(--me-grey-400);
-      font-family: sans-serif;
-      font-size: 14px;
-      gap: 8px;
+      display: flex; flex-direction: column; align-items: center; justify-content: center;
+      min-height: 300px; color: var(--me-grey-400); font-family: sans-serif; gap: 12px;
+      padding: 40px 20px; text-align: center;
     }
     .empty-icon {
-      font-size: 40px;
-      opacity: 0.4;
+      width: 56px; height: 56px; border-radius: 50%;
+      background: var(--me-primary-5, rgba(93,118,139,0.05));
+      display: flex; align-items: center; justify-content: center;
+      animation: emptyPulse 3s ease-in-out infinite;
+    }
+    .empty-icon svg { width: 24px; height: 24px; stroke: var(--me-primary); fill: none; stroke-width: 1.5; }
+    @keyframes emptyPulse {
+      0%, 100% { opacity: 0.6; transform: scale(0.95); }
+      50% { opacity: 1; transform: scale(1); }
+    }
+    .empty-title { font-size: 14px; font-weight: 600; color: var(--me-grey-600); }
+    .empty-sub { font-size: 12px; color: var(--me-grey-400); max-width: 240px; line-height: 1.5; }
+    .empty-actions { display: flex; gap: 8px; margin-top: 8px; }
+    .empty-action {
+      padding: 6px 14px; border-radius: var(--me-radius, 8px); border: 1px solid var(--me-grey-200);
+      background: white; color: var(--me-grey-600); font-size: 11px; font-weight: 600;
+      cursor: pointer; transition: all var(--me-transition, 150ms ease); font-family: sans-serif;
+    }
+    .empty-action:hover { border-color: var(--me-primary); color: var(--me-primary); background: var(--me-primary-5); }
+    .empty-action.primary { background: var(--me-primary); color: white; border-color: var(--me-primary); }
+    .empty-action.primary:hover { background: var(--me-primary-dark, #4a6070); }
+    .empty-shortcut {
+      font-size: 10px; color: var(--me-grey-300); margin-top: 12px; font-family: sans-serif;
+    }
+    .empty-shortcut kbd {
+      background: var(--me-grey-100); border: 1px solid var(--me-grey-200);
+      border-radius: 3px; padding: 1px 4px; font-size: 10px; font-family: monospace;
     }
     .view-toggle {
       display: flex;
@@ -3190,22 +3283,22 @@ L.styles = _`
       background: var(--me-primary);
     }
   `;
-Z([
-  x({ attribute: !1 })
-], L.prototype, "store", 1);
-Z([
-  x({ attribute: !1 })
-], L.prototype, "toolRegistry", 2);
-Z([
+ee([
+  v({ attribute: !1 })
+], z.prototype, "store", 1);
+ee([
+  v({ attribute: !1 })
+], z.prototype, "toolRegistry", 2);
+ee([
   E()
-], L.prototype, "quickAddIndex", 2);
-Z([
+], z.prototype, "quickAddIndex", 2);
+ee([
   E()
-], L.prototype, "quickAddPos", 2);
-L = Z([
+], z.prototype, "quickAddPos", 2);
+z = ee([
   S("me-editor-canvas")
-], L);
-var Ut = Object.defineProperty, qt = Object.getOwnPropertyDescriptor, Oe = (e, t, o, r) => {
+], z);
+var Ut = Object.defineProperty, qt = Object.getOwnPropertyDescriptor, je = (e, t, o, r) => {
   for (var i = r > 1 ? void 0 : r ? qt(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
   return r && i && Ut(t, o, i), i;
@@ -3365,10 +3458,10 @@ K.styles = _`
       50% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.2); }
     }
   `;
-Oe([
-  x({ attribute: !1 })
+je([
+  v({ attribute: !1 })
 ], K.prototype, "store", 1);
-K = Oe([
+K = je([
   S("me-body-settings")
 ], K);
 var Nt = Object.defineProperty, Gt = Object.getOwnPropertyDescriptor, le = (e, t, o, r) => {
@@ -3376,7 +3469,7 @@ var Nt = Object.defineProperty, Gt = Object.getOwnPropertyDescriptor, le = (e, t
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
   return r && i && Nt(t, o, i), i;
 };
-const ze = {
+const Le = {
   text: { label: "Text", tools: ["text", "heading", "paragraph"] },
   media: { label: "Media", tools: ["image", "video"] },
   actions: { label: "Actions", tools: ["button", "social", "menu"] },
@@ -3432,10 +3525,10 @@ let H = class extends T {
     for (const l of e) o.set(l.name, l);
     const r = (l) => !t || l.label.toLowerCase().includes(t) || l.name.toLowerCase().includes(t);
     let i = !1;
-    const n = Object.entries(ze).map(([, l]) => {
+    const n = Object.entries(Le).map(([, l]) => {
       const u = l.tools.map((h) => o.get(h)).filter((h) => !!h && r(h));
       return u.length > 0 && (i = !0), { label: l.label, tools: u };
-    }), s = new Set(Object.values(ze).flatMap((l) => l.tools)), a = e.filter((l) => !s.has(l.name) && r(l));
+    }), s = new Set(Object.values(Le).flatMap((l) => l.tools)), a = e.filter((l) => !s.has(l.name) && r(l));
     a.length > 0 && (i = !0);
     const c = !t || "layout".includes(t) || "row".includes(t) || "column".includes(t);
     return d`
@@ -3451,7 +3544,7 @@ let H = class extends T {
       </div>
       <div class="tab-content">
         ${n.map(
-      (l) => l.tools.length === 0 ? v : d`
+      (l) => l.tools.length === 0 ? x : d`
             <div class="category">
               <div class="category-title">${l.label}</div>
               <div class="tool-grid">
@@ -3489,14 +3582,14 @@ let H = class extends T {
   }
   renderA11yBadge() {
     const { errors: e, warnings: t, infos: o } = this.getA11ySeverities();
-    return !e && !t && !o ? v : d`<span class="tab-badge">${e ? d`<span class="tab-dot error"></span>` : v}${t ? d`<span class="tab-dot warning"></span>` : v}${o ? d`<span class="tab-dot info"></span>` : v}</span>`;
+    return !e && !t && !o ? x : d`<span class="tab-badge">${e ? d`<span class="tab-dot error"></span>` : x}${t ? d`<span class="tab-dot warning"></span>` : x}${o ? d`<span class="tab-dot info"></span>` : x}</span>`;
   }
   renderToolItem(e) {
     return d`
       <div class="tool-item"
         draggable="true"
         @dragstart=${(t) => this.handleDragStart(t, e.name)}>
-        <div class="tool-icon">${ie(e.icon)}</div>
+        <div class="tool-icon">${J(e.icon)}</div>
         <span>${e.label}</span>
       </div>
     `;
@@ -3579,6 +3672,11 @@ H.styles = _`
       padding: 0 12px 16px;
       flex: 1;
       overflow-y: auto;
+      animation: tabFadeIn 0.2s ease-out;
+    }
+    @keyframes tabFadeIn {
+      from { opacity: 0; transform: translateY(4px); }
+      to { opacity: 1; transform: translateY(0); }
     }
 
     /* ── Category groups ── */
@@ -3674,10 +3772,10 @@ H.styles = _`
     }
   `;
 le([
-  x({ attribute: !1 })
+  v({ attribute: !1 })
 ], H.prototype, "store", 1);
 le([
-  x({ attribute: !1 })
+  v({ attribute: !1 })
 ], H.prototype, "toolRegistry", 2);
 le([
   E()
@@ -3685,7 +3783,7 @@ le([
 H = le([
   S("me-editor-sidebar")
 ], H);
-function Qt(e, t, o) {
+function Yt(e, t, o) {
   const r = e && /^#[0-9a-fA-F]{3,8}$/.test(e) ? e : "#000000";
   return d`
     <div class="prop-row">
@@ -3699,7 +3797,7 @@ function Qt(e, t, o) {
     </div>
   `;
 }
-function Yt(e, t, o, r) {
+function Qt(e, t, o, r) {
   const i = r?.options || [];
   return d`
     <div class="prop-row">
@@ -3810,10 +3908,41 @@ function ro(e, t, o, r) {
     </div>
   `;
 }
-var io = Object.defineProperty, no = Object.getOwnPropertyDescriptor, we = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? no(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+function io(e, t, o, r) {
+  const i = () => {
+    r && r({
+      done: (n) => {
+        n?.url && t(n.url);
+      }
+    });
+  };
+  return d`
+    <div class="prop-row">
+      <label class="prop-label">${o}</label>
+      ${e ? d`
+        <div style="margin-bottom:6px;border-radius:6px;overflow:hidden;border:1px solid var(--me-grey-200,#e5e7eb);background:var(--me-grey-50,#f9fafb);">
+          <img src=${e} alt="Preview" style="display:block;width:100%;max-height:120px;object-fit:cover;" />
+        </div>
+      ` : x}
+      <div style="display:flex;gap:4px;">
+        <input class="prop-input" type="text" .value=${e ?? ""} placeholder="https://..."
+          style="flex:1;${r ? "border-radius:8px 0 0 8px;" : ""}"
+          @change=${(n) => t(n.target.value)} />
+        ${r ? d`
+          <button @click=${i}
+            style="padding:0 10px;border:1px solid var(--me-grey-200,#e5e7eb);border-left:none;border-radius:0 8px 8px 0;background:var(--me-grey-50,#f9fafb);cursor:pointer;color:var(--me-grey-600,#4b5563);font-size:11px;font-weight:600;transition:all 150ms ease;white-space:nowrap;"
+            title="Upload image">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle;"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+          </button>
+        ` : x}
+      </div>
+    </div>
+  `;
+}
+var no = Object.defineProperty, so = Object.getOwnPropertyDescriptor, we = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? so(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && io(t, o, i), i;
+  return r && i && no(t, o, i), i;
 };
 let q = class extends T {
   constructor() {
@@ -3861,19 +3990,21 @@ let q = class extends T {
     const r = e.values[t] ?? o.defaultValue, i = this.onChange(e.id, t);
     switch (o.widget) {
       case "color_picker":
-        return Qt(r, i, o.label);
+        return Yt(r, i, o.label);
       case "toggle":
         return eo(r, i, o.label);
       case "rich_text":
         return oo(r, i, o.label);
       case "dropdown":
-        return Yt(r, i, o.label, o.widgetParams);
+        return Qt(r, i, o.label, o.widgetParams);
       case "alignment":
         return Kt(r, i, o.label);
       case "padding":
         return Zt(r, i, o.label);
       case "number_unit":
         return ro(r, i, o.label, o.widgetParams);
+      case "image_upload":
+        return io(r, i, o.label, this.store.getCallback("image"));
       case "text":
       default:
         return to(r, i, o.label);
@@ -3959,27 +4090,29 @@ q.styles = _`
     .color-swatch:hover { border-color: var(--me-primary); }
   `;
 we([
-  x({ attribute: !1 })
+  v({ attribute: !1 })
 ], q.prototype, "store", 1);
 we([
-  x({ attribute: !1 })
+  v({ attribute: !1 })
 ], q.prototype, "toolRegistry", 2);
 q = we([
   S("me-property-panel")
 ], q);
-var so = Object.defineProperty, ao = Object.getOwnPropertyDescriptor, Q = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? ao(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+var ao = Object.defineProperty, lo = Object.getOwnPropertyDescriptor, Y = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? lo(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && so(t, o, i), i;
+  return r && i && ao(t, o, i), i;
 };
 let P = class extends T {
   constructor() {
     super(...arguments), this.options = {}, this.store = new Ze(), this.toolRegistry = new et(), this.dragManager = null, this.callbacks = /* @__PURE__ */ new Map(), this.unsubscribe = null, this.sidebarCollapsed = !1, this.a11yHasErrors = !1, this.a11yHasWarnings = !1, this.a11yHasInfos = !1, this.a11yDebounceTimer = null, this._handleKeydown = (e) => {
-      const t = e.metaKey || e.ctrlKey, r = e.composedPath().some((i) => {
-        const n = i, s = n?.tagName;
-        return !!(s === "INPUT" || s === "TEXTAREA" || s === "SELECT" || n?.isContentEditable);
+      const t = e.metaKey || e.ctrlKey, r = e.composedPath().some((n) => {
+        const s = n, a = s?.tagName;
+        return !!(a === "INPUT" || a === "TEXTAREA" || a === "SELECT" || s?.isContentEditable);
       });
-      r && !t || (t && e.key === "z" && !e.shiftKey ? (e.preventDefault(), this.store.undo()) : t && (e.key === "y" || e.key === "z" && e.shiftKey) ? (e.preventDefault(), this.store.redo()) : (e.key === "Delete" || e.key === "Backspace") && this.store.selectedId && !r ? (e.preventDefault(), this.store.removeContent(this.store.selectedId)) : e.key === "Escape" && this.store.select(null));
+      if (r && !t) return;
+      const i = this.shadowRoot?.querySelector("me-editor-canvas");
+      t && e.key === "z" && !e.shiftKey ? (e.preventDefault(), this.store.undo(), i?.flashUndo?.()) : t && (e.key === "y" || e.key === "z" && e.shiftKey) ? (e.preventDefault(), this.store.redo(), i?.flashUndo?.()) : t && e.key === "d" && !e.shiftKey && this.store.selectedId && !r ? (e.preventDefault(), this.store.duplicateContent(this.store.selectedId)) : (e.key === "Delete" || e.key === "Backspace") && this.store.selectedId && !r ? (e.preventDefault(), this.store.removeContent(this.store.selectedId)) : e.key === "Escape" && this.store.select(null);
     };
   }
   updateA11yState() {
@@ -4051,7 +4184,7 @@ let P = class extends T {
   registerTab(e) {
   }
   registerCallback(e, t) {
-    this.callbacks.set(e, t);
+    this.callbacks.set(e, t), this.store.setCallback(e, t);
   }
   setMergeTags(e) {
     this.store.setMergeTags(e);
@@ -4106,11 +4239,11 @@ let P = class extends T {
       </button>
       ${this.sidebarCollapsed && (this.a11yHasErrors || this.a11yHasWarnings || this.a11yHasInfos) ? d`
         <div class="a11y-dots">
-          ${this.a11yHasErrors ? d`<div class="a11y-dot error"></div>` : v}
-          ${this.a11yHasWarnings ? d`<div class="a11y-dot warning"></div>` : v}
-          ${this.a11yHasInfos ? d`<div class="a11y-dot info"></div>` : v}
+          ${this.a11yHasErrors ? d`<div class="a11y-dot error"></div>` : x}
+          ${this.a11yHasWarnings ? d`<div class="a11y-dot warning"></div>` : x}
+          ${this.a11yHasInfos ? d`<div class="a11y-dot info"></div>` : x}
         </div>
-      ` : v}
+      ` : x}
       <me-editor-canvas
         .store=${this.store}
         .toolRegistry=${this.toolRegistry}
@@ -4257,47 +4390,47 @@ P.styles = _`
       40% { opacity: 0.9; transform: scale(1.05); }
     }
   `;
-Q([
-  x({ type: Object })
+Y([
+  v({ type: Object })
 ], P.prototype, "options", 2);
-Q([
+Y([
   E()
 ], P.prototype, "sidebarCollapsed", 2);
-Q([
+Y([
   E()
 ], P.prototype, "a11yHasErrors", 2);
-Q([
+Y([
   E()
 ], P.prototype, "a11yHasWarnings", 2);
-Q([
+Y([
   E()
 ], P.prototype, "a11yHasInfos", 2);
-P = Q([
+P = Y([
   S("mail-editor")
 ], P);
 function R(e, t) {
   customElements.get(e) || customElements.define(e, t);
 }
 R("mail-editor", P);
-R("me-editor-canvas", L);
-R("me-row-renderer", j);
-R("me-column-renderer", z);
+R("me-editor-canvas", z);
+R("me-row-renderer", O);
+R("me-column-renderer", L);
 R("me-content-renderer", M);
 R("me-editor-sidebar", H);
 R("me-body-settings", K);
 R("me-property-panel", q);
-R("me-inline-toolbar", O);
+R("me-inline-toolbar", j);
 R("me-a11y-checker", U);
-const bo = customElements.get("mail-editor") !== void 0;
+const mo = customElements.get("mail-editor") !== void 0;
 export {
-  bo as E,
+  mo as E,
   P as M,
   et as T,
   Ze as a,
   N as e,
   Pt as f,
-  fo as j,
+  bo as j,
   p as s,
   Et as t
 };
-//# sourceMappingURL=index-zy5NbC2E.js.map
+//# sourceMappingURL=index-CLXq1CZC.js.map