@emabuild/core 0.2.0 → 0.3.0

package/dist/index-zy5NbC2E.js

@@ -0,0 +1,4303 @@
+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 { styleMap as He } from "lit/directives/style-map.js";
+import { repeat as ye } from "lit/directives/repeat.js";
+class B {
+  /**
+   * @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 Ve = Object.defineProperty, Fe = Object.getOwnPropertyDescriptor, xe = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? Fe(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 && Ve(t, o, i), i;
+};
+function ge(e) {
+  if (!e || e === "transparent" || e === "" || e === "none") return null;
+  const t = e.trim().toLowerCase(), o = {
+    white: "#ffffff",
+    black: "#000000",
+    red: "#ff0000",
+    blue: "#0000ff",
+    green: "#008000",
+    yellow: "#ffff00",
+    gray: "#808080",
+    grey: "#808080"
+  };
+  if (o[t]) return ge(o[t]);
+  if (t.startsWith("#")) {
+    let i = t.slice(1);
+    if (i.length === 3 && (i = i[0] + i[0] + i[1] + i[1] + i[2] + i[2]), i.length !== 6) return null;
+    const n = parseInt(i, 16);
+    return isNaN(n) ? null : { r: n >> 16 & 255, g: n >> 8 & 255, b: n & 255 };
+  }
+  const r = t.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+  return r ? { r: +r[1], g: +r[2], b: +r[3] } : null;
+}
+function $e(e, t, o) {
+  const [r, i, n] = [e, t, o].map((s) => {
+    const a = s / 255;
+    return a <= 0.03928 ? a / 12.92 : Math.pow((a + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * r + 0.7152 * i + 0.0722 * n;
+}
+function V(e, t) {
+  const o = ge(e), r = ge(t);
+  if (!o || !r) return null;
+  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) {
+  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;
+  return "#ffffff";
+}
+function te(e, t = 0) {
+  return typeof e == "number" ? e : typeof e == "string" && parseInt(e, 10) || t;
+}
+function Ue(e) {
+  if (!e || e === "") return null;
+  const t = String(e);
+  if (t.endsWith("%")) return parseFloat(t) / 100;
+  const o = parseFloat(t);
+  return isNaN(o) ? null : o > 5 ? o / 100 : o;
+}
+let U = class extends T {
+  constructor() {
+    super(...arguments), this.storeCtrl = new B(this, ["design"]);
+  }
+  set store(e) {
+    this.storeCtrl.setStore(e);
+  }
+  get store() {
+    return this.storeCtrl.store;
+  }
+  checkAccessibility() {
+    return ve(this.store);
+  }
+  handleIssueClick(e) {
+    e && this.store.select(e);
+  }
+  handleIssueHover(e) {
+    this.store.hover(e ?? null);
+  }
+  handleFixPreheader(e) {
+    e.stopPropagation(), this.store.setActiveTab("body"), requestAnimationFrame(() => {
+      setTimeout(() => {
+        document.querySelector("mail-editor")?.shadowRoot?.querySelector("me-editor-sidebar")?.shadowRoot?.querySelector("me-body-settings")?.highlightPreheader?.();
+      }, 100);
+    });
+  }
+  handleFixHeading(e) {
+    e.stopPropagation();
+    const t = this.store.createRow([1]), r = this.store.addRow(t, 0).columns[0].id, i = this.toolRegistry.getDefaultValues("heading"), n = this.store.createContent("heading", i);
+    this.store.addContent(r, n), this.store.select(n.id);
+  }
+  render() {
+    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}
+      </div>
+
+      ${e.length === 0 ? d`
+        <div class="all-clear">
+          <div class="all-clear-icon">✓</div>
+          <div class="all-clear-text">Accessible</div>
+          <div class="all-clear-sub">No issues detected</div>
+        </div>
+      ` : d`
+        ${t.length > 0 ? d`
+          <div class="section-title">Errors</div>
+          <div class="issues-list">${t.map((i) => this.renderIssue(i))}</div>
+        ` : v}
+        ${o.length > 0 ? d`
+          <div class="section-title">Warnings</div>
+          <div class="issues-list">${o.map((i) => this.renderIssue(i))}</div>
+        ` : v}
+        ${r.length > 0 ? d`
+          <div class="section-title">Info</div>
+          <div class="issues-list">${r.map((i) => this.renderIssue(i))}</div>
+        ` : v}
+      `}
+    `;
+  }
+  renderIssue(e) {
+    return d`
+      <div class="issue ${e.severity}"
+        @click=${() => this.handleIssueClick(e.elementId)}
+        @mouseenter=${() => this.handleIssueHover(e.elementId)}
+        @mouseleave=${() => this.handleIssueHover(void 0)}>
+        <div class="issue-icon ${e.severity}">
+          ${e.severity === "error" ? "✕" : e.severity === "warning" ? "!" : "i"}
+        </div>
+        <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}
+        </div>
+      </div>
+    `;
+  }
+};
+U.styles = _`
+    :host {
+      display: flex;
+      flex-direction: column;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    }
+
+    .summary {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      margin-bottom: 12px;
+    }
+    .score-pill {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 3px 8px;
+      border-radius: 20px;
+      font-size: 11px;
+      font-weight: 600;
+    }
+    .score-pill.errors { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
+    .score-pill.warnings { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
+    .score-pill.infos { background: #EDF5FF; color: #245A7F; border: 1px solid #bfdbfe; }
+    .score-pill.pass { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
+    .score-dot { width: 6px; height: 6px; border-radius: 50%; }
+    .score-dot.error { background: #dc2626; }
+    .score-dot.warning { background: #d97706; }
+    .score-dot.info { background: #245A7F; }
+    .score-dot.pass { background: #16a34a; }
+
+    .section-title {
+      font-size: 10px; font-weight: 700; text-transform: uppercase;
+      letter-spacing: 0.06em; color: #245A7F;
+      padding: 6px 0 4px; margin-top: 8px;
+      border-bottom: 1px solid #EDF5FF;
+    }
+    .section-title:first-of-type { margin-top: 0; }
+
+    .issues-list {
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+      margin-top: 6px;
+    }
+    .issue {
+      display: flex;
+      gap: 8px;
+      padding: 6px 8px;
+      border-radius: 6px;
+      border: 1px solid #f3f4f6;
+      transition: all 150ms ease;
+      cursor: pointer;
+    }
+    .issue:hover { background: #f9fafb; border-color: #e5e7eb; }
+    .issue.error { border-left: 3px solid #dc2626; }
+    .issue.warning { border-left: 3px solid #d97706; }
+    .issue.info { border-left: 3px solid #5d768b; }
+    .issue-icon {
+      flex-shrink: 0;
+      width: 16px; height: 16px;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 10px; font-weight: 700;
+      border-radius: 50%;
+      margin-top: 1px;
+    }
+    .issue-icon.error { background: #fef2f2; color: #dc2626; }
+    .issue-icon.warning { background: #fffbeb; color: #d97706; }
+    .issue-icon.info { background: #EDF5FF; color: #245A7F; }
+    .issue-body { flex: 1; min-width: 0; }
+    .issue-rule {
+      font-size: 9px; font-weight: 600; text-transform: uppercase;
+      letter-spacing: 0.04em; color: #9ca3af;
+    }
+    .issue-msg { font-size: 11px; color: #374151; line-height: 1.4; margin-top: 1px; }
+    .issue-element {
+      font-size: 10px; color: #5d768b; margin-top: 2px;
+      cursor: pointer;
+    }
+    .issue-element:hover { text-decoration: underline; }
+    .issue-fix {
+      display: inline-flex; align-items: center; gap: 3px;
+      margin-top: 4px; padding: 2px 8px;
+      background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0;
+      border-radius: 4px; font-size: 10px; font-weight: 600;
+      cursor: pointer; transition: all 150ms ease;
+    }
+    .issue-fix:hover { background: #dcfce7; border-color: #86efac; }
+
+    .all-clear {
+      text-align: center;
+      padding: 24px 16px;
+    }
+    .all-clear-icon {
+      width: 36px; height: 36px; border-radius: 50%;
+      background: #f0fdf4; margin: 0 auto 8px;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 18px; color: #16a34a;
+    }
+    .all-clear-text { font-size: 12px; font-weight: 600; color: #16a34a; }
+    .all-clear-sub { font-size: 11px; color: #9ca3af; margin-top: 4px; }
+  `;
+xe([
+  x({ attribute: !1 })
+], U.prototype, "store", 1);
+xe([
+  x({ attribute: !1 })
+], U.prototype, "toolRegistry", 2);
+U = xe([
+  S("me-a11y-checker")
+], U);
+function ve(e) {
+  const t = [], o = e.getDesign(), r = e.getBodyValues(), i = r.backgroundColor || "#ffffff", n = r.textColor || "#000000";
+  let s = !1;
+  const a = [];
+  for (const h of o.body.rows) {
+    const g = h.values.backgroundColor || "", b = h.values.columnsBackgroundColor || "";
+    for (const k of h.columns) {
+      const $ = Ce(k.values.backgroundColor, b, g, i);
+      for (const m of k.contents) {
+        const f = m.values, y = m.type, w = `${y} #${m.id.split("_").pop()}`;
+        if (y === "image") {
+          const C = f.alt || "";
+          (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);
+          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;
+            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);
+          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 });
+        }
+        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 });
+        }
+        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);
+          A && t.push({ severity: "error", rule: "link-text", message: `${A.length} empty link(s).`, element: w, elementId: m.id });
+          const I = C.match(/<a[^>]*>(click here|here|link|read more)<\/a>/gi);
+          I && t.push({ severity: "warning", rule: "link-purpose", message: `${I.length} generic link text(s).`, element: w, elementId: m.id });
+        }
+        y === "social" && t.push({ severity: "info", rule: "social-alt", message: "Verify social icons have alt text.", element: w, elementId: m.id });
+      }
+    }
+  }
+  const c = o.body.rows.reduce((h, g) => h + g.columns.reduce((b, k) => b + k.contents.length, 0), 0);
+  if (c > 0 && !s && t.push({ severity: "warning", rule: "heading-structure", message: "No heading in email." }), a.length > 1) {
+    const h = a.map((g) => parseInt(g.replace("h", ""), 10)).filter((g) => !isNaN(g));
+    for (let g = 1; g < h.length; g++)
+      if (h[g] > h[g - 1] + 1) {
+        t.push({ severity: "warning", rule: "heading-skip", message: `Heading jumps h${h[g - 1]} → h${h[g]}.` });
+        break;
+      }
+  }
+  const l = V(n, i);
+  l !== null && l < 4.5 && t.push({ severity: "warning", rule: "color-contrast", message: `Body text contrast ${l.toFixed(1)}:1 (min 4.5:1).` });
+  const u = r.linkStyle?.linkColor;
+  if (u) {
+    const h = V(u, i);
+    h !== null && h < 4.5 && t.push({ severity: "warning", rule: "link-contrast", message: `Link contrast ${h.toFixed(1)}:1 (min 4.5:1).` });
+    const g = V(u, n);
+    g !== null && g < 3 && !r.linkStyle?.linkUnderline && t.push({ severity: "warning", rule: "link-distinguish", message: "Links not underlined and low contrast vs text." });
+  }
+  return (r.preheaderText || "").trim() || t.push({ severity: "info", rule: "preheader", message: "No preheader text set." }), c === 0 && t.push({ severity: "info", rule: "empty-email", message: "Email has no content." }), t.sort((h, g) => ({ error: 0, warning: 1, info: 2 })[h.severity] - { error: 0, warning: 1, info: 2 }[g.severity]), t;
+}
+function qe() {
+  const e = {};
+  return {
+    getCounters() {
+      return { ...e };
+    },
+    setCounters(t) {
+      for (const o of Object.keys(e))
+        delete e[o];
+      Object.assign(e, t);
+    },
+    next(t) {
+      const o = e[t] ?? 0;
+      return e[t] = o + 1, e[t];
+    }
+  };
+}
+class Ne {
+  constructor() {
+    this.listeners = /* @__PURE__ */ new Map();
+  }
+  /** Register a listener for an event */
+  on(t, o) {
+    this.listeners.has(t) || this.listeners.set(t, /* @__PURE__ */ new Set()), this.listeners.get(t).add(o);
+  }
+  /** Remove a specific listener */
+  off(t, o) {
+    this.listeners.get(t)?.delete(o);
+  }
+  /** Emit an event with a payload. Errors in listeners are caught and logged. */
+  emit(t, o) {
+    this.listeners.get(t)?.forEach((r) => {
+      try {
+        r(o);
+      } catch (i) {
+        console.error(`[emabuild] Error in "${t}" listener:`, i);
+      }
+    });
+  }
+  /** Remove all listeners, optionally scoped to a single event */
+  removeAllListeners(t) {
+    t ? this.listeners.delete(t) : this.listeners.clear();
+  }
+}
+class Ge {
+  constructor(t = 50) {
+    this.undoStack = [], this.redoStack = [], this.maxHistory = t;
+  }
+  /** Whether there are states to undo to */
+  get canUndo() {
+    return this.undoStack.length > 0;
+  }
+  /** Whether there are states to redo to */
+  get canRedo() {
+    return this.redoStack.length > 0;
+  }
+  /** Save current design to the undo stack before a mutation */
+  push(t) {
+    this.undoStack.push(structuredClone(t)), this.undoStack.length > this.maxHistory && this.undoStack.shift(), this.redoStack = [];
+  }
+  /** Restore the previous state, pushing current state to redo. Returns the restored design or undefined. */
+  undo(t) {
+    const o = this.undoStack.pop();
+    if (o)
+      return this.redoStack.push(structuredClone(t)), structuredClone(o);
+  }
+  /** Restore the next state, pushing current state to undo. Returns the restored design or undefined. */
+  redo(t) {
+    const o = this.redoStack.pop();
+    if (o)
+      return this.undoStack.push(structuredClone(t)), structuredClone(o);
+  }
+  /** Clear all history (e.g. when loading a new design) */
+  clear() {
+    this.undoStack = [], this.redoStack = [];
+  }
+}
+function Qe() {
+  return {
+    counters: { u_row: 0, u_column: 0 },
+    body: {
+      id: "u_body",
+      rows: [],
+      headers: [],
+      footers: [],
+      values: {
+        backgroundColor: "#e7e7e7",
+        contentAlign: "center",
+        contentVerticalAlign: "center",
+        contentWidth: "600px",
+        fontFamily: { label: "Arial", value: "arial,helvetica,sans-serif" },
+        textColor: "#000000",
+        linkStyle: {
+          body: !0,
+          linkColor: "#0000ee",
+          linkHoverColor: "#0000ee",
+          linkUnderline: !0,
+          linkHoverUnderline: !0
+        },
+        preheaderText: "",
+        popupPosition: "center",
+        popupWidth: "600px",
+        popupHeight: "auto",
+        borderRadius: "10px",
+        popupBackgroundColor: "#FFFFFF",
+        popupBackgroundImage: { url: "", fullWidth: !0, repeat: "no-repeat", center: !0, cover: !0 },
+        popupOverlay_backgroundColor: "rgba(0, 0, 0, 0.1)",
+        popupCloseButton_position: "top-right",
+        popupCloseButton_backgroundColor: "#DDDDDD",
+        popupCloseButton_iconColor: "#000000",
+        popupCloseButton_borderRadius: "0px",
+        popupCloseButton_margin: "0px",
+        popupCloseButton_action: {
+          name: "close_popup",
+          attrs: { onClick: "document.querySelector('.u-popup-container').style.display = 'none';" }
+        },
+        _meta: { htmlID: "u_body", htmlClassNames: "u_body" }
+      }
+    },
+    schemaVersion: 16
+  };
+}
+function Ye(e, t) {
+  const o = e.next("u_row"), r = t.map(() => {
+    const i = e.next("u_column");
+    return {
+      id: `u_column_${i}`,
+      contents: [],
+      values: {
+        backgroundColor: "",
+        padding: "0px",
+        border: {},
+        borderRadius: "0px",
+        _meta: { htmlID: `u_column_${i}`, htmlClassNames: "u_column" }
+      }
+    };
+  });
+  return {
+    id: `u_row_${o}`,
+    cells: t,
+    columns: r,
+    values: {
+      displayCondition: null,
+      columns: !1,
+      backgroundColor: "",
+      columnsBackgroundColor: "",
+      backgroundImage: { url: "", fullWidth: !0, repeat: !1, center: !0, cover: !1 },
+      padding: "0px",
+      anchor: "",
+      hideDesktop: !1,
+      hideMobile: !1,
+      _meta: { htmlID: `u_row_${o}`, htmlClassNames: "u_row" }
+    }
+  };
+}
+function Ke(e, t, o = {}) {
+  const r = e.next(`u_content_${t}`), i = `u_content_${t}_${r}`;
+  return {
+    id: i,
+    type: t,
+    values: {
+      containerPadding: "10px",
+      anchor: "",
+      hideDesktop: !1,
+      hideMobile: !1,
+      displayCondition: null,
+      _meta: { htmlID: i, htmlClassNames: `u_content_${t}` },
+      ...o
+    }
+  };
+}
+function de(e, t) {
+  return e.body.rows.find((o) => o.id === t);
+}
+function oe(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) {
+  for (const o of e.body.rows)
+    for (const r of o.columns) {
+      const i = r.contents.find((n) => n.id === t);
+      if (i) return i;
+    }
+}
+function Je(e, t) {
+  for (const o of e.body.rows)
+    for (const r of o.columns)
+      if (r.contents.some((i) => i.id === t)) return r;
+}
+function Xe(e, t) {
+  for (const o of e.body.rows)
+    if (o.columns.some((r) => r.id === t)) return o;
+}
+function ce(e, t) {
+  return e.body.rows.findIndex((o) => o.id === 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();
+  }
+  get a11yIssueIds() {
+    return this._a11yIssueIds;
+  }
+  setA11yIssueIds(t) {
+    this._a11yIssueIds = t;
+  }
+  // ── Subscriptions ──────────────────────────────────────────
+  /**
+   * Subscribe to specific channels only. The callback is invoked only
+   * when one of the listed channels fires. Returns an unsubscribe function.
+   *
+   * @example
+   * ```ts
+   * // Only re-render when the design changes, not on hover/selection
+   * store.subscribeChannels(['design'], () => this.requestUpdate());
+   * ```
+   */
+  subscribeChannels(t, o) {
+    for (const r of t) {
+      let i = this.channelSubscribers.get(r);
+      i || (i = /* @__PURE__ */ new Set(), this.channelSubscribers.set(r, i)), i.add(o);
+    }
+    return () => {
+      for (const r of t) {
+        const i = this.channelSubscribers.get(r);
+        i && (i.delete(o), i.size === 0 && this.channelSubscribers.delete(r));
+      }
+    };
+  }
+  /** @deprecated Use subscribeChannels instead */
+  subscribe(t) {
+    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();
+  }
+  // ── Getters ────────────────────────────────────────────────
+  /** Get the full design document */
+  getDesign() {
+    return this.design;
+  }
+  /** Get the design body */
+  getBody() {
+    return this.design.body;
+  }
+  /** Get all rows */
+  getRows() {
+    return this.design.body.rows;
+  }
+  /** Get body-level values (background, fonts, etc.) */
+  getBodyValues() {
+    return this.design.body.values;
+  }
+  get selectedId() {
+    return this._selectedId;
+  }
+  get hoveredId() {
+    return this._hoveredId;
+  }
+  get viewMode() {
+    return this._viewMode;
+  }
+  get activeTab() {
+    return this._activeTab;
+  }
+  get mergeTags() {
+    return this._mergeTags;
+  }
+  get canUndo() {
+    return this.history.canUndo;
+  }
+  get canRedo() {
+    return this.history.canRedo;
+  }
+  // ── Design Loading ─────────────────────────────────────────
+  /** Load a design document, resetting history and selection */
+  loadDesign(t) {
+    this.design = structuredClone(t), this.counterManager.setCounters(this.design.counters), this.history.clear(), this._selectedId = null, this.notifyChannels("design", "selection"), this.events.emit("design:loaded", { design: this.design });
+  }
+  // ── Undo / Redo ────────────────────────────────────────────
+  undo() {
+    const t = this.history.undo(this.design);
+    t && (this.design = t, this.counterManager.setCounters(this.design.counters), this.notifyChannels("design"), this.emitUpdate("content_updated"));
+  }
+  redo() {
+    const t = this.history.redo(this.design);
+    t && (this.design = t, this.counterManager.setCounters(this.design.counters), this.notifyChannels("design"), this.emitUpdate("content_updated"));
+  }
+  // ── Selection / UI State ───────────────────────────────────
+  setMergeTags(t) {
+    this._mergeTags = t, this.notifyChannels("design");
+  }
+  select(t) {
+    this._selectedId = t, this.notifyChannels("selection");
+  }
+  hover(t) {
+    this._hoveredId = t, this.notifyChannels("hover");
+  }
+  setViewMode(t) {
+    this._viewMode = t, this.notifyChannels("viewMode");
+  }
+  setActiveTab(t) {
+    this._activeTab = t, this.notifyChannels("activeTab");
+  }
+  // ── Row Operations ─────────────────────────────────────────
+  /** Add a row at the given index (or at the end). Returns the inserted row. */
+  addRow(t, o) {
+    const r = structuredClone(t);
+    this.history.push(this.design);
+    const i = this.design.body.rows;
+    return o !== void 0 && o >= 0 && o <= i.length ? i.splice(o, 0, r) : i.push(r), this.syncCounters(), this.notifyChannels("design"), this.emitUpdate("row_added", r), r;
+  }
+  /** Remove a row by ID. Returns true if removed. */
+  removeRow(t) {
+    const o = ce(this.design, t);
+    return o === -1 ? !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"), !0);
+  }
+  /** Move a row from one index to another. Returns true if moved. */
+  moveRow(t, o) {
+    const r = this.design.body.rows;
+    if (t < 0 || t >= r.length || o < 0 || o >= r.length || t === o) return !1;
+    this.history.push(this.design);
+    const [i] = r.splice(t, 1);
+    return r.splice(o, 0, i), this.notifyChannels("design"), this.emitUpdate("row_reordered"), !0;
+  }
+  /** Duplicate a row, assigning fresh IDs to all nested elements */
+  duplicateRow(t) {
+    const o = de(this.design, t);
+    if (!o) return;
+    this.history.push(this.design);
+    const r = structuredClone(o), i = this.counterManager.next("u_row");
+    r.id = `u_row_${i}`, r.values._meta = { htmlID: r.id, htmlClassNames: "u_row" };
+    for (const s of r.columns) {
+      const a = this.counterManager.next("u_column");
+      s.id = `u_column_${a}`, s.values._meta = { htmlID: s.id, htmlClassNames: "u_column" };
+      for (const c of s.contents) {
+        const l = this.counterManager.next(`u_content_${c.type}`);
+        c.id = `u_content_${c.type}_${l}`, c.values._meta = { htmlID: c.id, htmlClassNames: `u_content_${c.type}` };
+      }
+    }
+    const n = ce(this.design, t);
+    return this.design.body.rows.splice(n + 1, 0, r), this.syncCounters(), this.notifyChannels("design"), this.emitUpdate("row_added", r), r;
+  }
+  /** Get the index of a row */
+  getRowIndex(t) {
+    return ce(this.design, t);
+  }
+  /** Update row-level values. Returns true if updated. */
+  updateRowValues(t, o) {
+    const r = de(this.design, t);
+    return r ? (this.history.push(this.design), Object.assign(r.values, o), this.notifyChannels("design"), this.emitUpdate("content_updated"), !0) : !1;
+  }
+  // ── Column Operations ──────────────────────────────────────
+  /** Update column-level values. Returns true if updated. */
+  updateColumnValues(t, o) {
+    const r = oe(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);
+    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;
+  }
+  /** Remove a content block by ID. Returns true if removed. */
+  removeContent(t) {
+    for (const o of this.design.body.rows)
+      for (const r of o.columns) {
+        const i = r.contents.findIndex((n) => n.id === t);
+        if (i !== -1)
+          return this.history.push(this.design), r.contents.splice(i, 1), this._selectedId === t && (this._selectedId = null), this.notifyChannels("design"), this.emitUpdate("content_removed"), !0;
+      }
+    return !1;
+  }
+  /** Update content values by ID. Returns true if updated. */
+  updateContentValues(t, o) {
+    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;
+  }
+  /** 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 (!n) return !1;
+    this.history.push(this.design);
+    let s;
+    e: for (const c of this.design.body.rows)
+      for (const l of c.columns) {
+        const u = l.contents.findIndex((h) => h.id === t);
+        if (u !== -1) {
+          [s] = l.contents.splice(u, 1);
+          break e;
+        }
+      }
+    if (!s) return !1;
+    const a = Math.min(r, n.contents.length);
+    return n.contents.splice(a, 0, s), this.notifyChannels("design"), this.emitUpdate("content_reordered"), !0;
+  }
+  /** Duplicate a content block, inserting the copy right after the original */
+  duplicateContent(t) {
+    const o = re(this.design, t);
+    if (o)
+      for (const r of this.design.body.rows)
+        for (const i of r.columns) {
+          const n = i.contents.findIndex((s) => s.id === t);
+          if (n !== -1) {
+            this.history.push(this.design);
+            const s = structuredClone(o), a = this.counterManager.next(`u_content_${o.type}`);
+            return s.id = `u_content_${o.type}_${a}`, s.values._meta = { htmlID: s.id, htmlClassNames: `u_content_${o.type}` }, i.contents.splice(n + 1, 0, s), this.syncCounters(), this.notifyChannels("design"), this.emitUpdate("content_added", s), s;
+          }
+        }
+  }
+  // ── Body Values ────────────────────────────────────────────
+  /** Update body-level values (background, fonts, etc.) */
+  updateBodyValues(t) {
+    this.history.push(this.design), Object.assign(this.design.body.values, t), this.notifyChannels("design"), this.emitUpdate("body_updated");
+  }
+  // ── Lookups (delegate to design-lookup) ────────────────────
+  findRow(t) {
+    return de(this.design, t);
+  }
+  findColumn(t) {
+    return oe(this.design, t);
+  }
+  findContent(t) {
+    return re(this.design, t);
+  }
+  findParentColumn(t) {
+    return Je(this.design, t);
+  }
+  findParentRow(t) {
+    return Xe(this.design, t);
+  }
+  // ── Factory Methods (delegate to design-factory) ───────────
+  /** Create a new row with the given column layout */
+  createRow(t) {
+    const o = Ye(this.counterManager, t);
+    return this.syncCounters(), o;
+  }
+  /** Create a new content block for the given tool type */
+  createContent(t, o = {}) {
+    const r = Ke(this.counterManager, t, o);
+    return this.syncCounters(), r;
+  }
+  // ── Private Helpers ────────────────────────────────────────
+  syncCounters() {
+    this.design.counters = this.counterManager.getCounters();
+  }
+  emitUpdate(t, o) {
+    this.events.emit("design:updated", { type: t, item: o });
+  }
+}
+class et {
+  constructor() {
+    this.tools = /* @__PURE__ */ new Map(), this.lazyLoaders = /* @__PURE__ */ new Map(), this.lazyMeta = /* @__PURE__ */ new Map(), this.loadingPromises = /* @__PURE__ */ new Map();
+  }
+  /** Register a tool eagerly (available immediately) */
+  register(t) {
+    this.tools.set(t.name, t), this.lazyLoaders.delete(t.name), this.lazyMeta.delete(t.name);
+  }
+  /**
+   * Register a tool lazily. The tool's code is only loaded when first needed.
+   * Provide metadata (name, label, icon) so the tool can appear in the sidebar.
+   *
+   * @param meta - Display metadata for the sidebar palette
+   * @param loader - Async function that imports and returns the tool definition
+   *
+   * @example
+   * ```ts
+   * registry.registerLazy(
+   *   { name: 'timer', label: 'Timer', icon: '<svg>...</svg>', position: 11 },
+   *   () => import('./built-in/timer-tool.js').then(m => m.timerTool),
+   * );
+   * ```
+   */
+  registerLazy(t, o) {
+    this.tools.has(t.name) || (this.lazyMeta.set(t.name, t), this.lazyLoaders.set(t.name, o));
+  }
+  /** Get a tool by name. Returns undefined if not loaded yet (use ensureLoaded for lazy tools). */
+  get(t) {
+    return this.tools.get(t);
+  }
+  /** Check if a tool is registered (eager or lazy) */
+  has(t) {
+    return this.tools.has(t) || this.lazyLoaders.has(t);
+  }
+  /** Check if a tool is fully loaded and ready to render */
+  isLoaded(t) {
+    return this.tools.has(t);
+  }
+  /**
+   * Ensure a lazy tool is loaded. Returns the tool definition.
+   * If the tool is already loaded, returns it immediately.
+   * If it's being loaded, returns the in-flight promise.
+   */
+  async ensureLoaded(t) {
+    if (this.tools.has(t)) return this.tools.get(t);
+    if (this.loadingPromises.has(t)) return this.loadingPromises.get(t);
+    const o = this.lazyLoaders.get(t);
+    if (!o) return;
+    const r = o().then((i) => {
+      if (!i?.name || !i?.renderer)
+        throw new Error(`[ToolRegistry] Loaded tool "${t}" has invalid definition`);
+      return this.tools.set(t, i), this.lazyLoaders.delete(t), this.lazyMeta.delete(t), this.loadingPromises.delete(t), i;
+    }).catch((i) => {
+      this.loadingPromises.delete(t), console.error(`[ToolRegistry] Failed to load tool "${t}":`, i);
+    });
+    return this.loadingPromises.set(t, r), r;
+  }
+  /**
+   * Get all tools for display in the sidebar palette.
+   * Returns both loaded tools and lazy tool metadata, sorted by position.
+   */
+  getAll() {
+    return Array.from(this.tools.values()).sort((t, o) => (t.position ?? 0) - (o.position ?? 0));
+  }
+  /**
+   * Get all tool names and display metadata (including lazy tools not yet loaded).
+   * Used by the sidebar to show all available tools.
+   */
+  getAllMeta() {
+    const t = [];
+    for (const o of this.tools.values())
+      t.push({ name: o.name, label: o.label, icon: o.icon, position: o.position });
+    for (const o of this.lazyMeta.values())
+      t.push(o);
+    return t.sort((o, r) => (o.position ?? 0) - (r.position ?? 0));
+  }
+  /** Get default values for a tool. Loads lazily if needed (sync — returns empty if not loaded). */
+  getDefaultValues(t) {
+    const o = this.tools.get(t);
+    if (!o) return {};
+    const r = { ...o.defaultValues };
+    for (const i of Object.values(o.options))
+      for (const [n, s] of Object.entries(i.options))
+        n in r || (r[n] = s.defaultValue);
+    return r;
+  }
+  /** Get property groups for a tool */
+  getPropertyGroups(t) {
+    return this.tools.get(t)?.options ?? {};
+  }
+}
+const D = {
+  draggingContentId: null,
+  draggingRowId: null,
+  draggingElement: null,
+  startContentDrag(e, t) {
+    this.draggingContentId = e, this.draggingElement = t ?? null;
+  },
+  startRowDrag(e, t) {
+    this.draggingRowId = e, this.draggingElement = t ?? null;
+  },
+  reset() {
+    this.draggingElement && (this.draggingElement.style.opacity = "1", this.draggingElement = null), this.draggingContentId = null, this.draggingRowId = null;
+  }
+};
+function Ie(e) {
+  const t = document.createElement("div");
+  return Object.assign(t.style, {
+    position: "absolute",
+    left: "0",
+    right: "0",
+    height: "3px",
+    background: e,
+    borderRadius: "2px",
+    pointerEvents: "none",
+    zIndex: "1000",
+    display: "none",
+    boxShadow: `0 0 6px ${e}80`
+  }), t;
+}
+function _e(e, t, o, r, i = "4px") {
+  e.parentNode !== t && (e.remove(), t.appendChild(e));
+  const s = (t instanceof ShadowRoot ? t.host : t).getBoundingClientRect();
+  let a;
+  o.length === 0 || r === 0 ? a = o.length === 0 ? 0 : o[0].getBoundingClientRect().top - s.top : r >= o.length ? a = o[o.length - 1].getBoundingClientRect().bottom - s.top : a = o[r].getBoundingClientRect().top - s.top, Object.assign(e.style, {
+    display: "block",
+    top: `${a}px`,
+    left: i,
+    right: i,
+    width: "auto"
+  });
+}
+function F(e) {
+  e && (e.style.display = "none");
+}
+function fe(e, t) {
+  const o = (e instanceof ShadowRoot, e.children);
+  for (const r of Array.from(o)) {
+    const i = r;
+    t(i), i.shadowRoot && fe(i.shadowRoot, t), i.children?.length && fe(i, t);
+  }
+}
+function Te(e, t) {
+  const o = [];
+  return fe(e, (r) => {
+    r.matches?.(t) && o.push(r);
+  }), o;
+}
+class tt {
+  constructor(t, o, r) {
+    this.currentDrop = null, this.contentIndicator = null, this.rowIndicator = null, this.onDragOver = (i) => {
+      const n = i.dataTransfer?.types || [], s = n.includes("application/maileditor-tool"), a = n.includes("application/maileditor-layout"), c = n.includes("application/maileditor-content") || !!D.draggingContentId, l = n.includes("application/maileditor-row") || !!D.draggingRowId;
+      !s && !c && !a && !l || (i.preventDefault(), i.dataTransfer.dropEffect = s || a ? "copy" : "move", a || l ? (this.currentDrop = this.findRowDropTarget(i.clientY), F(this.contentIndicator), this.showRowIndicator()) : (this.currentDrop = this.findContentDropTarget(i.clientX, i.clientY), F(this.rowIndicator), this.showContentIndicator()));
+    }, this.onDrop = async (i) => {
+      i.preventDefault(), this.hideAllIndicators();
+      const n = this.currentDrop, s = i.dataTransfer?.getData("application/maileditor-row") || D.draggingRowId;
+      if (s) {
+        this.handleRowDrop(s, n), this.reset();
+        return;
+      }
+      const a = i.dataTransfer?.getData("application/maileditor-layout");
+      if (a) {
+        this.handleLayoutDrop(JSON.parse(a), n), this.reset();
+        return;
+      }
+      const c = i.dataTransfer?.getData("application/maileditor-tool");
+      if (c) {
+        await this.handleToolDrop(c, n), this.reset();
+        return;
+      }
+      const l = i.dataTransfer?.getData("application/maileditor-content") || D.draggingContentId;
+      l && this.handleContentDrop(l, n), this.reset();
+    }, this.onDragEnd = () => {
+      this.hideAllIndicators(), this.reset();
+    }, this.onDragLeave = (i) => {
+      const n = i.relatedTarget;
+      (!n || !this.root.contains(n)) && (this.hideAllIndicators(), this.currentDrop = null);
+    }, this.store = t, this.toolRegistry = o, this.root = r;
+  }
+  /** 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 = Ie("#3b82f6"), this.rowIndicator = Ie("#8b5cf6");
+  }
+  /** Remove all event listeners and clean up indicators */
+  detach() {
+    this.root.removeEventListener("dragover", this.onDragOver), this.root.removeEventListener("drop", this.onDrop), this.root.removeEventListener("dragend", this.onDragEnd), this.root.removeEventListener("dragleave", this.onDragLeave), this.contentIndicator?.remove(), this.rowIndicator?.remove();
+  }
+  // ── Drop Handlers ──────────────────────────────────────────
+  handleRowDrop(t, o = this.currentDrop) {
+    if (o?.type === "row" && o.rowIndex !== void 0) {
+      const r = this.store.getRowIndex(t);
+      if (r === -1) return;
+      const i = o.rowIndex > r ? o.rowIndex - 1 : o.rowIndex;
+      r !== i && this.store.moveRow(r, i);
+    }
+  }
+  handleLayoutDrop(t, o = this.currentDrop) {
+    const r = this.store.createRow(t), i = o?.type === "row" ? o.rowIndex : void 0;
+    this.store.addRow(r, i);
+  }
+  async handleToolDrop(t, o) {
+    if (await this.toolRegistry.ensureLoaded(t), o?.type === "content" && o.columnId) {
+      const r = this.toolRegistry.getDefaultValues(t), i = this.store.createContent(t, r);
+      this.store.addContent(o.columnId, i, o.contentIndex), this.store.select(i.id);
+    } else {
+      const r = this.store.createRow([1]);
+      this.store.addRow(r);
+      const i = this.toolRegistry.getDefaultValues(t), n = this.store.createContent(t, i);
+      this.store.addContent(r.columns[0].id, n), this.store.select(n.id);
+    }
+  }
+  handleContentDrop(t, o) {
+    o?.type === "content" && o.columnId && (this.store.moveContent(t, o.columnId, o.contentIndex), this.store.select(t));
+  }
+  // ── Drop Target Detection ─────────────────────────────────
+  findRowDropTarget(t) {
+    const o = this.root.querySelector("me-editor-canvas");
+    if (!o?.shadowRoot) return null;
+    const r = Array.from(o.shadowRoot.querySelectorAll("me-row-renderer"));
+    if (r.length === 0) return { type: "row", rowIndex: 0, y: 0 };
+    let i = Math.abs(t - r[0].getBoundingClientRect().top), n = { type: "row", rowIndex: 0, y: r[0].getBoundingClientRect().top };
+    for (let s = 0; s < r.length; s++) {
+      const a = r[s].getBoundingClientRect().bottom, c = Math.abs(t - a);
+      c < i && (i = c, n = { type: "row", rowIndex: s + 1, y: a });
+    }
+    return n;
+  }
+  findContentDropTarget(t, o) {
+    const r = Te(this.root, "me-column-renderer");
+    let i = null, n = 1 / 0;
+    for (const s of r) {
+      const a = s.dataset.columnId;
+      if (!a || !s.shadowRoot) continue;
+      const c = s.getBoundingClientRect();
+      if (t < c.left || t > c.right) continue;
+      const l = Array.from(s.shadowRoot.querySelectorAll("me-content-renderer"));
+      if (l.length === 0) {
+        const g = Math.abs(o - (c.top + c.height / 2));
+        g < n && (n = g, i = { type: "content", columnId: a, contentIndex: 0, y: c.top + c.height / 2 });
+        continue;
+      }
+      const u = l[0].getBoundingClientRect().top;
+      let h = Math.abs(o - u);
+      h < n && (n = h, i = { type: "content", columnId: a, contentIndex: 0, y: u });
+      for (let g = 0; g < l.length; g++) {
+        const b = l[g].getBoundingClientRect(), k = l[g + 1]?.getBoundingClientRect(), $ = k ? (b.bottom + k.top) / 2 : b.bottom;
+        h = Math.abs(o - $), h < n && (n = h, i = { type: "content", columnId: a, contentIndex: g + 1, y: $ });
+      }
+    }
+    return i;
+  }
+  // ── Indicator Positioning ──────────────────────────────────
+  showContentIndicator() {
+    if (!this.contentIndicator || !this.currentDrop?.columnId) {
+      F(this.contentIndicator);
+      return;
+    }
+    const o = Te(this.root, "me-column-renderer").find((i) => i.dataset.columnId === this.currentDrop.columnId);
+    if (!o?.shadowRoot) return;
+    const r = Array.from(o.shadowRoot.querySelectorAll("me-content-renderer"));
+    _e(this.contentIndicator, o.shadowRoot, r, this.currentDrop.contentIndex ?? 0, "4px");
+  }
+  showRowIndicator() {
+    if (!this.rowIndicator || !this.currentDrop) {
+      F(this.rowIndicator);
+      return;
+    }
+    const t = this.root.querySelector("me-editor-canvas"), o = t?.shadowRoot?.querySelector(".canvas-body");
+    if (!o) return;
+    const r = Array.from(t.shadowRoot.querySelectorAll("me-row-renderer"));
+    _e(this.rowIndicator, o, r, this.currentDrop.rowIndex ?? 0, "0");
+  }
+  hideAllIndicators() {
+    F(this.contentIndicator), F(this.rowIndicator);
+  }
+  reset() {
+    this.currentDrop = null, D.reset();
+  }
+}
+function p(e, t, o = "") {
+  const r = e[t];
+  return typeof r == "string" && r !== "" ? r : typeof r == "number" ? String(r) : o;
+}
+function Se(e) {
+  return typeof e == "string" ? e : e && typeof e == "object" && "url" in e && e.url || "";
+}
+function Re(e) {
+  if (e && typeof e == "object") {
+    const t = e;
+    return {
+      width: typeof t.width == "number" ? t.width : void 0,
+      maxWidth: typeof t.maxWidth == "string" ? t.maxWidth : void 0
+    };
+  }
+  return {};
+}
+function ot(e) {
+  const t = e.action;
+  if (t && typeof t == "object") {
+    const o = t.values;
+    return {
+      href: o?.href || "",
+      target: o?.target || "_blank"
+    };
+  }
+  return {
+    href: p(e, "href"),
+    target: p(e, "target", "_blank")
+  };
+}
+function De(e, t = "") {
+  const o = e.text;
+  if (typeof o == "string" && o !== "") return o;
+  const r = e.textJson;
+  if (typeof r == "string")
+    try {
+      const i = JSON.parse(r), n = [], s = (a) => {
+        typeof a.text == "string" && n.push(a.text), a.type === "linebreak" && n.push("<br/>");
+        const c = a.children;
+        c && c.forEach(s);
+      };
+      if (s(i.root || i), n.length > 0) return n.join("");
+    } catch {
+    }
+  return t;
+}
+function be(e, t = "arial,helvetica,sans-serif") {
+  const o = e.fontFamily;
+  if (typeof o == "string" && o !== "") return o;
+  if (o && typeof o == "object") {
+    const r = o, i = r.value || t, n = r.url;
+    if (n && typeof document < "u") {
+      const s = `emabuild-font-${i.replace(/[^a-z]/gi, "")}`;
+      if (!document.getElementById(s)) {
+        const a = document.createElement("link");
+        a.id = s, a.rel = "stylesheet", a.href = n, document.head.appendChild(a);
+      }
+    }
+    return i;
+  }
+  return t;
+}
+function Pe(e) {
+  const t = e.buttonColors;
+  if (t && typeof t == "object") {
+    const o = t;
+    return {
+      bg: o.backgroundColor || p(e, "backgroundColor", "#3b82f6"),
+      color: o.color || p(e, "textColor", "#ffffff")
+    };
+  }
+  return {
+    bg: p(e, "backgroundColor", "#3b82f6"),
+    color: p(e, "textColor", "#ffffff")
+  };
+}
+function fo(e, t) {
+  if (typeof e != "string") return t;
+  try {
+    return JSON.parse(e);
+  } catch {
+    return t;
+  }
+}
+function N(e, t) {
+  const { padding: o, align: r = "left", extraTdStyle: i = "" } = t;
+  return `<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
+  <tbody><tr><td style="${`padding:${o};font-family:arial,helvetica,sans-serif;${i}`}" align="${r}">
+    ${e}
+  </td></tr></tbody>
+</table>`;
+}
+function rt(e, t, o) {
+  const { bgColor: r, textColor: i, fontSize: n, fontWeight: s, borderRadius: a } = o, c = parseInt(a) || 0;
+  if (c <= 0) return "";
+  const l = Math.round(c / 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="${l}%" stroke="f" fillcolor="${r}">
+    <w:anchorlock/>
+    <center style="color:${i};font-family:arial,helvetica,sans-serif;font-size:${n};font-weight:${s};">${e}</center>
+  </v:roundrect>
+  <![endif]-->`;
+}
+const it = [
+  { label: "100%", value: "100%" },
+  { label: "120%", value: "120%" },
+  { label: "140%", value: "140%" },
+  { label: "160%", value: "160%" },
+  { label: "180%", value: "180%" },
+  { label: "200%", value: "200%" }
+], nt = [
+  { label: "Normal", value: "400" },
+  { label: "Medium", value: "500" },
+  { label: "Semi Bold", value: "600" },
+  { label: "Bold", value: "700" },
+  { label: "Extra Bold", value: "800" }
+], st = [
+  { label: "Normal", value: "400" },
+  { label: "Bold", value: "700" }
+], at = [
+  { label: "12px", value: "12px" },
+  { label: "14px", value: "14px" },
+  { label: "16px", value: "16px" },
+  { label: "18px", value: "18px" },
+  { label: "20px", value: "20px" },
+  { label: "22px", value: "22px" },
+  { label: "26px", value: "26px" },
+  { label: "30px", value: "30px" },
+  { label: "36px", value: "36px" },
+  { label: "48px", value: "48px" },
+  { label: "60px", value: "60px" }
+], lt = [
+  { label: "12px", value: "12px" },
+  { label: "13px", value: "13px" },
+  { label: "14px", value: "14px" },
+  { label: "16px", value: "16px" },
+  { label: "18px", value: "18px" },
+  { label: "20px", value: "20px" }
+], Be = (e = "140%") => ({
+  label: "Line Height",
+  defaultValue: e,
+  widget: "dropdown",
+  widgetParams: { options: [...it] }
+}), We = (e = "700", t = !1) => ({
+  label: "Font Weight",
+  defaultValue: e,
+  widget: "dropdown",
+  widgetParams: { options: [...t ? st : nt] }
+}), G = {
+  title: "Spacing",
+  options: {
+    containerPadding: { label: "Padding", defaultValue: "10px", widget: "padding" }
+  }
+}, ne = {
+  title: "General",
+  options: {
+    anchor: { label: "Anchor", defaultValue: "", widget: "text" },
+    hideDesktop: { label: "Hide on Desktop", defaultValue: !1, widget: "toggle" },
+    hideMobile: { label: "Hide on Mobile", defaultValue: !1, widget: "toggle" }
+  }
+}, dt = {
+  title: "General",
+  options: {
+    hideDesktop: { label: "Hide on Desktop", defaultValue: !1, widget: "toggle" },
+    hideMobile: { label: "Hide on Mobile", defaultValue: !1, widget: "toggle" }
+  }
+}, ct = {
+  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>',
+  supportedDisplayModes: ["email", "web"],
+  position: 1,
+  options: {
+    text: {
+      title: "Text",
+      options: {
+        text: {
+          label: "Text Content",
+          defaultValue: '<p style="font-size: 14px;">This is a new text block. Change the text.</p>',
+          widget: "rich_text"
+        }
+      }
+    },
+    style: {
+      title: "Style",
+      options: {
+        color: { label: "Text Color", defaultValue: "#000000", widget: "color_picker" },
+        backgroundColor: { label: "Background Color", defaultValue: "", widget: "color_picker" },
+        textAlign: { label: "Text Align", defaultValue: "left", widget: "alignment" },
+        lineHeight: Be()
+      }
+    },
+    spacing: G,
+    general: ne
+  },
+  defaultValues: {
+    text: '<p style="font-size: 14px;">This is a new text block. Change the text.</p>',
+    color: "#000000",
+    backgroundColor: "",
+    lineHeight: "140%",
+    containerPadding: "10px",
+    textAlign: "left"
+  },
+  renderer: {
+    renderEditor(e) {
+      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)}
+        </div>
+      `;
+    },
+    renderHtml(e) {
+      const t = p(e, "containerPadding", "10px"), o = p(e, "backgroundColor"), r = p(e, "color", "#000000"), i = p(e, "lineHeight", "140%"), n = p(e, "textAlign", "left"), s = p(e, "text"), a = o ? `background-color:${o};` : "", c = `<div style="font-size:14px;color:${r};line-height:${i};text-align:${n};">${s}</div>`;
+      return N(c, { padding: t, extraTdStyle: a });
+    }
+  }
+}, pt = {
+  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>',
+  supportedDisplayModes: ["email", "web"],
+  position: 2,
+  options: {
+    text: {
+      title: "Heading",
+      options: {
+        text: { label: "Text", defaultValue: "Heading", widget: "text" },
+        headingType: {
+          label: "Heading Type",
+          defaultValue: "h1",
+          widget: "dropdown",
+          widgetParams: { options: [
+            { label: "H1", value: "h1" },
+            { label: "H2", value: "h2" },
+            { label: "H3", value: "h3" },
+            { label: "H4", value: "h4" }
+          ] }
+        }
+      }
+    },
+    style: {
+      title: "Style",
+      options: {
+        fontSize: {
+          label: "Font Size",
+          defaultValue: "22px",
+          widget: "dropdown",
+          widgetParams: { options: [...at] }
+        },
+        color: { label: "Text Color", defaultValue: "#000000", widget: "color_picker" },
+        textAlign: { label: "Text Align", defaultValue: "left", widget: "alignment" },
+        fontWeight: We(),
+        lineHeight: Be(),
+        letterSpacing: {
+          label: "Letter Spacing",
+          defaultValue: "0px",
+          widget: "number_unit",
+          widgetParams: { unit: "px", min: -5, max: 50, step: 0.1 }
+        }
+      }
+    },
+    spacing: G,
+    general: ne
+  },
+  defaultValues: {
+    text: "Heading",
+    headingType: "h1",
+    fontSize: "22px",
+    color: "#000000",
+    textAlign: "left",
+    fontWeight: "700",
+    lineHeight: "140%",
+    letterSpacing: "0px",
+    containerPadding: "10px"
+  },
+  renderer: {
+    renderEditor(e) {
+      const t = {
+        padding: p(e, "containerPadding", "10px"),
+        fontSize: p(e, "fontSize", "22px"),
+        color: p(e, "color", "#000000"),
+        textAlign: p(e, "textAlign", "left"),
+        fontWeight: p(e, "fontWeight", "700"),
+        lineHeight: p(e, "lineHeight", "140%"),
+        letterSpacing: p(e, "letterSpacing", "normal"),
+        fontFamily: be(e)
+      }, o = De(e, "Heading");
+      return d`<div style=${He(t)}>${ie(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}>`;
+      return N(h, { padding: t });
+    }
+  }
+}, ut = {
+  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>',
+  supportedDisplayModes: ["email", "web"],
+  position: 3,
+  options: {
+    text: {
+      title: "Paragraph",
+      options: {
+        text: {
+          label: "Text",
+          defaultValue: '<p style="font-size:14px;line-height:1.6;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>',
+          widget: "rich_text"
+        }
+      }
+    },
+    style: {
+      title: "Style",
+      options: {
+        color: { label: "Text Color", defaultValue: "#374151", widget: "color_picker" },
+        textAlign: { label: "Text Align", defaultValue: "left", widget: "alignment" },
+        lineHeight: { label: "Line Height", defaultValue: "160%", widget: "text" },
+        letterSpacing: { label: "Letter Spacing", defaultValue: "normal", widget: "text" }
+      }
+    },
+    spacing: G
+  },
+  defaultValues: {
+    text: '<p style="font-size:14px;line-height:1.6;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>',
+    color: "#374151",
+    lineHeight: "160%",
+    letterSpacing: "normal",
+    textAlign: "left",
+    containerPadding: "10px"
+  },
+  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>`;
+    },
+    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>`;
+      return N(s, { padding: t });
+    }
+  }
+}, ht = {
+  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>',
+  supportedDisplayModes: ["email", "web"],
+  position: 3,
+  options: {
+    image: {
+      title: "Image",
+      options: {
+        src: { label: "Image URL", defaultValue: "", widget: "text" },
+        alt: { label: "Alt Text", defaultValue: "", widget: "text" },
+        href: { label: "Link URL", defaultValue: "", widget: "text" },
+        target: { label: "Link Target", defaultValue: "_blank", widget: "text" }
+      }
+    },
+    style: {
+      title: "Style",
+      options: {
+        width: {
+          label: "Width",
+          defaultValue: "100%",
+          widget: "dropdown",
+          widgetParams: { options: [
+            { label: "Auto", value: "auto" },
+            { label: "25%", value: "25%" },
+            { label: "50%", value: "50%" },
+            { label: "75%", value: "75%" },
+            { label: "100%", value: "100%" }
+          ] }
+        },
+        align: { label: "Align", defaultValue: "center", widget: "alignment" },
+        borderRadius: { label: "Border Radius", defaultValue: "0px", widget: "text" }
+      }
+    },
+    spacing: G,
+    general: ne
+  },
+  defaultValues: {
+    src: "https://placehold.co/600x200/e2e8f0/64748b?text=Drop+Image+Here",
+    alt: "Image",
+    href: "",
+    target: "_blank",
+    width: "100%",
+    maxWidth: "100%",
+    align: "center",
+    borderRadius: "0px",
+    containerPadding: "10px"
+  },
+  renderer: {
+    renderEditor(e) {
+      const t = Se(e.src), o = p(e, "alt"), i = Re(e.src).maxWidth || p(e, "width", "100%"), n = p(e, "borderRadius", "0px"), s = p(e, "textAlign", p(e, "align", "center"));
+      return t ? d`<div style="text-align:${s};"><img src=${t} alt=${o} style="display:inline-block;max-width:100%;width:${i};border-radius:${n};border:0;" /></div>` : d`<div style="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 = p(e, "containerPadding", "10px"), r = Se(e.src), i = p(e, "alt"), n = ot(e), s = Re(e.src), a = s.maxWidth || p(e, "width", "100%"), c = p(e, "borderRadius", "0px"), l = p(e, "textAlign", p(e, "align", "center"));
+      let u;
+      a.includes("%") ? u = Math.round(t.columnWidth * (parseFloat(a) / 100)) : a === "auto" ? u = s.width || t.columnWidth : u = parseInt(a) || t.columnWidth;
+      const h = c !== "0px" ? `border-radius:${c};` : "", g = `<img align="${l}" border="0" src="${r}" alt="${i}" title="${i}" style="display:block;border:0;height:auto;width:100%;max-width:${u}px;${h}" width="${u}" />`, b = n.href ? `<a href="${n.href}" target="${n.target}" style="text-decoration:none;">${g}</a>` : g;
+      return N(b, { padding: o, align: l });
+    }
+  }
+}, gt = {
+  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>',
+  supportedDisplayModes: ["email", "web"],
+  position: 4,
+  options: {
+    button: {
+      title: "Button",
+      options: {
+        text: { label: "Button Text", defaultValue: "Click Me", widget: "text" },
+        href: { label: "Link URL", defaultValue: "#", widget: "text" },
+        target: { label: "Target", defaultValue: "_blank", widget: "text" }
+      }
+    },
+    style: {
+      title: "Style",
+      options: {
+        backgroundColor: { label: "Button Color", defaultValue: "#3b82f6", widget: "color_picker" },
+        textColor: { label: "Text Color", defaultValue: "#ffffff", widget: "color_picker" },
+        fontSize: {
+          label: "Font Size",
+          defaultValue: "14px",
+          widget: "dropdown",
+          widgetParams: { options: [...lt] }
+        },
+        fontWeight: We("700", !0),
+        borderRadius: { label: "Border Radius", defaultValue: "4px", widget: "text" },
+        buttonWidth: {
+          label: "Width",
+          defaultValue: "auto",
+          widget: "dropdown",
+          widgetParams: { options: [
+            { label: "Auto", value: "auto" },
+            { label: "100%", value: "100%" },
+            { label: "50%", value: "50%" }
+          ] }
+        },
+        textAlign: { label: "Align", defaultValue: "center", widget: "alignment" },
+        buttonPadding: { label: "Button Padding", defaultValue: "10px 20px", widget: "padding" },
+        borderColor: { label: "Border Color", defaultValue: "", widget: "color_picker" },
+        borderWidth: { label: "Border Width", defaultValue: "0px", widget: "text" }
+      }
+    },
+    spacing: G,
+    general: ne
+  },
+  defaultValues: {
+    text: "Click Me",
+    href: "#",
+    target: "_blank",
+    backgroundColor: "#3b82f6",
+    textColor: "#ffffff",
+    fontSize: "14px",
+    fontWeight: "700",
+    borderRadius: "4px",
+    buttonWidth: "auto",
+    textAlign: "center",
+    buttonPadding: "10px 20px",
+    borderColor: "",
+    borderWidth: "0px",
+    containerPadding: "10px"
+  },
+  renderer: {
+    renderEditor(e) {
+      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>
+        </div>
+      `;
+    },
+    renderHtml(e) {
+      const t = p(e, "containerPadding", "10px"), { bg: o, color: r } = Pe(e), i = p(e, "fontSize", "14px"), n = p(e, "fontWeight", "700"), s = p(e, "borderRadius", "4px"), a = p(e, "buttonPadding", p(e, "padding", "10px 20px")), c = p(e, "text", "Click Me"), l = p(e, "textAlign", "center"), u = p(e, "href", "#"), h = p(e, "target", "_blank"), g = p(e, "borderWidth", "0px"), b = p(e, "borderColor", o), k = g !== "0px" ? `border:${g} solid ${b};` : "border:none;", $ = rt(c, u, { bgColor: o, textColor: r, fontSize: i, fontWeight: n, borderRadius: s }), m = $ ? `${$}
+  <!--[if !mso]><!-->` : "<!--[if !mso]><!-->", y = `<div align="${l}">
+      ${m}
+      <a href="${u}" target="${h}" style="display:inline-block;text-decoration:none;text-align:center;color:${r};background-color:${o};border-radius:${s};font-size:${i};font-weight:${n};padding:${a};font-family:arial,helvetica,sans-serif;${k}mso-border-alt:none;"><span style="line-height:120%;">${c}</span></a>
+      <!--<![endif]-->
+    </div>`;
+      return N(y, { padding: t, align: l });
+    }
+  }
+}, ft = {
+  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>',
+  supportedDisplayModes: ["email", "web"],
+  position: 5,
+  options: {
+    style: {
+      title: "Style",
+      options: {
+        borderTopWidth: { label: "Width", defaultValue: "1px", widget: "text" },
+        borderTopStyle: {
+          label: "Style",
+          defaultValue: "solid",
+          widget: "dropdown",
+          widgetParams: { options: [
+            { label: "Solid", value: "solid" },
+            { label: "Dashed", value: "dashed" },
+            { label: "Dotted", value: "dotted" },
+            { label: "Double", value: "double" }
+          ] }
+        },
+        borderTopColor: { label: "Color", defaultValue: "#cccccc", widget: "color_picker" },
+        width: { label: "Line Width", defaultValue: "100%", widget: "text" }
+      }
+    },
+    spacing: G,
+    general: dt
+  },
+  defaultValues: {
+    borderTopWidth: "1px",
+    borderTopStyle: "solid",
+    borderTopColor: "#cccccc",
+    width: "100%",
+    containerPadding: "10px"
+  },
+  renderer: {
+    renderEditor(e) {
+      p(e, "containerPadding", "10px");
+      const t = p(e, "width", "100%"), o = `${p(e, "borderTopWidth", "1px")} ${p(e, "borderTopStyle", "solid")} ${p(e, "borderTopColor", "#cccccc")}`;
+      return d`<div><div style="border-top:${o};width:${t};margin:0 auto;"></div></div>`;
+    },
+    renderHtml(e) {
+      const t = p(e, "containerPadding", "10px"), o = p(e, "width", "100%"), r = `${p(e, "borderTopWidth", "1px")} ${p(e, "borderTopStyle", "solid")} ${p(e, "borderTopColor", "#cccccc")}`, i = `<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="${o}" style="border-collapse:collapse;border-top:${r};"><tbody><tr><td style="font-size:0;line-height:0;">&nbsp;</td></tr></tbody></table>`;
+      return N(i, { padding: t, align: "center" });
+    }
+  }
+}, bt = [
+  ct,
+  pt,
+  ut,
+  ht,
+  gt,
+  ft
+], 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)
+  },
+  {
+    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)
+  },
+  {
+    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)
+  },
+  {
+    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)
+  },
+  {
+    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)
+  },
+  {
+    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)
+  },
+  {
+    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)
+  }
+];
+function mt(e, t, o) {
+  const r = o.backgroundColor || "#e7e7e7", i = o.contentWidth || "600px", n = o.fontFamily?.value || "arial,helvetica,sans-serif", s = o.textColor || "#000000", a = o.preheaderText || "" || "&zwnj;", c = `<div style="display:none;font-size:1px;color:${r};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>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="x-apple-disable-message-reformatting">
+  <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no">
+  <meta name="color-scheme" content="light dark">
+  <meta name="supported-color-schemes" content="light dark">
+  <title></title>
+  <!--[if mso]>
+  <noscript><xml>
+    <o:OfficeDocumentSettings>
+      <o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch>
+    </o:OfficeDocumentSettings>
+  </xml></noscript>
+  <style type="text/css">
+    table, td, th { font-family: ${n} !important; }
+  </style>
+  <![endif]-->
+  <!--[if !mso]><!-->
+  <style type="text/css">
+    ${t}
+  </style>
+  <!--<![endif]-->
+  <style type="text/css">
+    body { margin: 0; padding: 0; word-break: normal; }
+    table, tr, td { vertical-align: top; border-collapse: collapse; }
+    p { margin: 0; }
+    a[x-apple-data-detectors='true'] { color: inherit !important; text-decoration: none !important; }
+  </style>
+</head>
+<body class="clean-body u_body" style="margin:0;padding:0;-webkit-text-size-adjust:100%;background-color:${r};color:${s};">
+  ${c}
+  <table id="u_body" role="presentation" style="border-collapse:collapse;border-spacing:0;margin:0 auto;background-color:${r};width:100%;" cellpadding="0" cellspacing="0" border="0">
+    <tbody>
+      <tr>
+        <td style="vertical-align:top;">
+          <!--[if (mso)|(IE)]><table width="${parseInt(i)}" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
+          ${e}
+          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</body>
+</html>`;
+}
+function yt(e, t, o) {
+  const r = parseInt(t.contentWidth || "600"), i = e.values.backgroundColor || "", n = e.values.columnsBackgroundColor || "", s = e.values.padding || "0px", a = e.cells.reduce((m, f) => m + f, 0), c = i ? `background-color:${i};` : "", l = e.values.backgroundImage;
+  let u = "";
+  if (l?.url) {
+    const m = l.repeat === !0 || l.repeat === "repeat" ? "repeat" : "no-repeat", f = l.cover === !0 ? "cover" : l.fullWidth === !0 ? "100% auto" : "auto", y = l.center !== !1 ? "center top" : "left top";
+    u = `background-image:url('${l.url}');background-repeat:${m};background-position:${y};background-size:${f};`;
+  }
+  const h = e.columns.length > 1, g = e.columns.map((m, f) => {
+    const y = Math.round(e.cells[f] / a * r);
+    return { colHtml: xt(m, y, n, t, o), colWidthPx: y };
+  });
+  let b;
+  if (h) {
+    const m = g.map(
+      ({ colHtml: f, colWidthPx: y }) => `<!--[if (mso)|(IE)]><td align="center" width="${y}" style="width:${y}px;padding:0px;" valign="top"><![endif]-->${f}<!--[if (mso)|(IE)]></td><![endif]-->`
+    );
+    b = `<!--[if (mso)|(IE)]><table role="presentation" width="${r}" cellpadding="0" cellspacing="0" border="0"><tr><![endif]-->${m.join("")}<!--[if (mso)|(IE)]></tr></table><![endif]-->`;
+  } else
+    b = g.map(({ colHtml: m }) => m).join("");
+  const k = e.values.hideDesktop ? " u_hide_desktop" : "", $ = e.values.hideMobile ? " u_hide_mobile" : "";
+  return `<div class="u_row${k}${$}" style="padding:${s};${c}${u}">
+  <div style="margin:0 auto;max-width:${r}px;${h ? "font-size:0;" : ""}text-align:center;">${b}</div>
+</div>`;
+}
+function xt(e, t, o, r, i) {
+  const n = e.values.backgroundColor || o || "", s = e.values.padding || "0px", a = e.values.borderRadius || "0px", c = n ? `background-color:${n};` : "", l = e.contents.map((u) => {
+    const h = i.get(u.type);
+    if (!h) return `<!-- unknown tool: ${u.type} -->`;
+    const g = {
+      columnWidth: t,
+      displayMode: "email",
+      contentWidth: parseInt(r.contentWidth || "600"),
+      bodyValues: r
+    };
+    let b = h(u.values, g);
+    const k = !!u.values.hideDesktop, $ = !!u.values.hideMobile;
+    return (k || $) && (b = `<div class="${[k && "u_hide_desktop", $ && "u_hide_mobile"].filter(Boolean).join(" ")}">${b}</div>`), b;
+  }).join(`
+`);
+  return `<div class="u_column" style="display:inline-block;vertical-align:top;width:${t}px;max-width:${t}px;font-size:14px;text-align:left;">
+  <div style="width:100%;${c}${a !== "0px" ? `border-radius:${a};` : ""}">
+    <div style="padding:${s};">
+      ${l || "&nbsp;"}
+    </div>
+  </div>
+</div>`;
+}
+function vt(e) {
+  return `
+@media only screen and (min-width: ${e + 20}px) {
+  .u_row .u_column { display: inline-block !important; }
+}
+
+@media only screen and (max-width: ${e + 20}px) {
+  .u_row .u_column {
+    display: block !important;
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+  .u_row {
+    width: 100% !important;
+  }
+}
+
+@media only screen and (max-width: 620px) {
+  .u_row-container {
+    max-width: 100% !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  /* Dark mode overrides — add per-client rules as needed */
+}
+
+/* Outlook dark mode */
+[data-ogsb] body,
+[data-ogsb] table,
+[data-ogsb] td {
+  /* Preserve original colors */
+}
+
+.u_hide_desktop { display: block !important; }
+.u_hide_mobile { display: block !important; }
+
+@media only screen and (max-width: ${e + 20}px) {
+  .u_hide_desktop { display: block !important; }
+  .u_hide_mobile { display: none !important; }
+}
+
+@media only screen and (min-width: ${e + 21}px) {
+  .u_hide_desktop { display: none !important; }
+  .u_hide_mobile { display: block !important; }
+}`;
+}
+const wt = [
+  "box-sizing",
+  "overflow-wrap",
+  "word-break",
+  "word-wrap",
+  "outline",
+  "cursor",
+  "transition",
+  "animation",
+  "transform",
+  "z-index",
+  "display:\\s*flex",
+  "display:\\s*grid",
+  "gap"
+], kt = new RegExp(
+  `(?:;\\s*|^\\s*)(${wt.join("|")})\\s*:[^;]*;?`,
+  "gi"
+), $t = /var\(--[^)]*\)/gi;
+function Ct(e) {
+  return e.replace(/style="([^"]*)"/gi, (t, o) => {
+    let r = o;
+    return r = r.replace(kt, ""), r = r.replace($t, "inherit"), r = r.replace(/;\s*;/g, ";").replace(/^\s*;\s*/, "").replace(/;\s*$/, "").trim(), r ? `style="${r}"` : "";
+  });
+}
+function It(e, t, o) {
+  const r = e.body.values, i = parseInt(r.contentWidth || "600"), n = e.body.rows.map((g) => yt(g, r, t)).join(`
+`), s = vt(i), a = Ct(n);
+  let c = mt(a, s, r);
+  if (o?.mergeTags)
+    for (const [g, b] of Object.entries(o.mergeTags))
+      c = c.replaceAll(`{{${g}}}`, b);
+  const l = c.match(/<body[^>]*>([\s\S]*)<\/body>/i), u = c.match(/<style[^>]*>([\s\S]*?)<\/style>/gi), h = [];
+  return r.fontFamily?.url && h.push(r.fontFamily.url), {
+    design: structuredClone(e),
+    html: c,
+    chunks: {
+      body: l?.[1] ?? n,
+      css: u?.map((g) => g.replace(/<\/?style[^>]*>/gi, "")).join(`
+`) ?? s,
+      fonts: h,
+      js: ""
+    }
+  };
+}
+function _t(e) {
+  return typeof e == "number" ? e : typeof e == "string" && parseInt(e, 10) || 0;
+}
+function Tt(e) {
+  return typeof e == "string" ? e.includes("px") ? e : e + "px" : typeof e == "number" ? e + "px" : "0px";
+}
+function me(e) {
+  return e ? {
+    url: e.url || "",
+    fullWidth: e.fullWidth ?? !0,
+    repeat: e.repeat ?? !1,
+    center: e.position === "center" || e.center === !0,
+    cover: e.size === "cover" || e.cover === !0
+  } : { url: "", fullWidth: !0, repeat: !1, center: !0, cover: !1 };
+}
+function pe(e) {
+  return {
+    url: e.url || "",
+    fullWidth: e.fullWidth,
+    repeat: e.repeat,
+    size: e.cover ? "cover" : "custom",
+    position: e.center ? "center" : "top left"
+  };
+}
+function St(e, t) {
+  const o = { ...t };
+  if (e === "image") {
+    if (o.src && typeof o.src == "object") {
+      const r = o.src;
+      o.src = r.url || "", r.width && (o.maxWidth = r.width + "px");
+    }
+    if (o.altText !== void 0 && o.alt === void 0 && (o.alt = o.altText, delete o.altText), o.action && typeof o.action == "object") {
+      const r = o.action;
+      o.href = r.values?.href || "", o.target = r.values?.target || "_blank", delete o.action;
+    }
+  }
+  if (e === "button") {
+    if (o.href && typeof o.href == "object") {
+      const r = o.href;
+      o.href = r.values?.href || "", o.target = r.values?.target || "_blank";
+    }
+    if (o.buttonColors && typeof o.buttonColors == "object") {
+      const r = o.buttonColors;
+      o.backgroundColor = r.backgroundColor || o.backgroundColor, o.textColor = r.color || o.textColor, delete o.buttonColors;
+    }
+    if (o.size && typeof o.size == "object") {
+      const r = o.size;
+      o.buttonWidth = r.autoWidth ? "auto" : r.width ? Tt(r.width) : "auto", delete o.size;
+    }
+    if (o.padding !== void 0 && o.buttonPadding === void 0 && (o.buttonPadding = o.padding), o.border && typeof o.border == "object") {
+      const r = o.border;
+      o.borderColor = r.borderTopColor || "", o.borderWidth = r.borderTopWidth || "0px", delete o.border;
+    }
+    typeof o.fontWeight == "number" && (o.fontWeight = String(o.fontWeight));
+  }
+  if (e === "heading" && typeof o.fontWeight == "number" && (o.fontWeight = String(o.fontWeight)), e === "divider" && o.border && typeof o.border == "object") {
+    const r = o.border;
+    o.borderTopWidth = r.borderTopWidth || "1px", o.borderTopStyle = r.borderTopStyle || "solid", o.borderTopColor = r.borderTopColor || "#cccccc", delete o.border;
+  }
+  if (e === "menu") {
+    if (o.menu && typeof o.menu == "object") {
+      const r = o.menu;
+      Array.isArray(r.items) && (o.items = JSON.stringify(r.items.map((i) => ({
+        text: i.text || "",
+        href: i.link?.values?.href || "#"
+      })))), o.menu.separator && (o.separator = o.menu.separator), delete o.menu;
+    }
+    o.linkColor && !o.color && (o.color = o.linkColor);
+  }
+  return o;
+}
+function Rt(e, t) {
+  const o = { ...t };
+  if (e === "image") {
+    const r = typeof o.src == "string" ? o.src : "";
+    o.src = {
+      url: r,
+      width: _t(o.maxWidth) || null,
+      height: null,
+      autoWidth: !0
+    }, o.alt !== void 0 && (o.altText = o.alt, delete o.alt), (o.href !== void 0 || o.target !== void 0) && (o.action = {
+      name: "web",
+      values: { href: o.href || "", target: o.target || "_blank" }
+    }, delete o.href, delete o.target), delete o.maxWidth;
+  }
+  if (e === "button" && (typeof o.href == "string" && (o.href = {
+    name: "web",
+    values: { href: o.href, target: o.target || "_blank" }
+  }, delete o.target), o.buttonColors = {
+    color: o.textColor || "#ffffff",
+    backgroundColor: o.backgroundColor || "#3b82f6",
+    hoverColor: o.textColor || "#ffffff",
+    hoverBackgroundColor: o.backgroundColor || "#3b82f6"
+  }, o.buttonWidth !== void 0 && (o.size = {
+    autoWidth: o.buttonWidth === "auto",
+    width: o.buttonWidth === "auto" ? "100%" : o.buttonWidth
+  }, delete o.buttonWidth), o.buttonPadding !== void 0 && (o.padding = o.buttonPadding, delete o.buttonPadding), (o.borderColor !== void 0 || o.borderWidth !== void 0) && (o.border = {
+    borderTopWidth: o.borderWidth || "0px",
+    borderTopStyle: "solid",
+    borderTopColor: o.borderColor || "",
+    borderRightWidth: o.borderWidth || "0px",
+    borderRightStyle: "solid",
+    borderRightColor: o.borderColor || "",
+    borderBottomWidth: o.borderWidth || "0px",
+    borderBottomStyle: "solid",
+    borderBottomColor: o.borderColor || "",
+    borderLeftWidth: o.borderWidth || "0px",
+    borderLeftStyle: "solid",
+    borderLeftColor: o.borderColor || ""
+  }, delete o.borderColor, delete o.borderWidth), typeof o.fontWeight == "string" && (o.fontWeight = parseInt(o.fontWeight, 10) || 400)), e === "heading" && typeof o.fontWeight == "string" && (o.fontWeight = parseInt(o.fontWeight, 10) || 400), e === "divider" && (o.border = {
+    borderTopWidth: o.borderTopWidth || "1px",
+    borderTopStyle: o.borderTopStyle || "solid",
+    borderTopColor: o.borderTopColor || "#cccccc"
+  }, delete o.borderTopWidth, delete o.borderTopStyle, delete o.borderTopColor), e === "menu") {
+    if (typeof o.items == "string") {
+      try {
+        const r = JSON.parse(o.items);
+        o.menu = {
+          items: r.map((i, n) => ({
+            key: String(n),
+            text: i.text || "",
+            link: {
+              name: "web",
+              values: { href: i.href || "#", target: "_blank" }
+            }
+          }))
+        };
+      } catch {
+      }
+      delete o.items;
+    }
+    o.color && !o.linkColor && (o.linkColor = o.color, o.textColor = o.color);
+  }
+  return o;
+}
+function ue(e) {
+  const t = e.values || {};
+  t.backgroundImage && typeof t.backgroundImage == "object" && (t.backgroundImage = me(t.backgroundImage)), t.hideMobile === void 0 && (t.hideMobile = !1);
+  const o = (e.columns || []).map((r) => Dt(r));
+  return {
+    id: e.id,
+    cells: e.cells,
+    columns: o,
+    values: t
+  };
+}
+function Dt(e) {
+  const t = (e.contents || []).map((o) => {
+    const r = o.type, i = St(r, o.values || {});
+    return { id: o.id, type: r, values: i };
+  });
+  return {
+    id: e.id,
+    contents: t,
+    values: e.values || {}
+  };
+}
+function Pt(e) {
+  const t = e.body || {}, o = t.values || {};
+  if (typeof o.contentWidth == "number" && (o.contentWidth = o.contentWidth + "px"), o.backgroundImage && typeof o.backgroundImage == "object" && (o.backgroundImage = me(o.backgroundImage)), o.popupBackgroundImage && typeof o.popupBackgroundImage == "object" && (o.popupBackgroundImage = me(o.popupBackgroundImage)), o.linkStyle && typeof o.linkStyle == "object") {
+    const a = o.linkStyle;
+    delete a.inherit;
+  }
+  t.id || (t.id = "u_body");
+  const r = (t.rows || []).map(ue), i = (t.headers || []).map(ue), n = (t.footers || []).map(ue);
+  return {
+    counters: At(r, i, n),
+    body: {
+      id: t.id || "u_body",
+      rows: r,
+      headers: i,
+      footers: n,
+      values: o
+    },
+    schemaVersion: 16
+  };
+}
+function Et(e) {
+  const t = { ...e.body.values };
+  typeof t.contentWidth == "string" && (t.contentWidth = parseInt(t.contentWidth, 10) || 600), t.backgroundImage && typeof t.backgroundImage == "object" && (t.backgroundImage = pe(t.backgroundImage)), t.popupBackgroundImage && typeof t.popupBackgroundImage == "object" && (t.popupBackgroundImage = pe(t.popupBackgroundImage));
+  const o = (r) => {
+    const i = { ...r.values };
+    return i.backgroundImage && typeof i.backgroundImage == "object" && (i.backgroundImage = pe(i.backgroundImage)), i.selectable === void 0 && (i.selectable = !0), i.draggable === void 0 && (i.draggable = !0), i.duplicatable === void 0 && (i.duplicatable = !0), i.deletable === void 0 && (i.deletable = !0), {
+      id: r.id,
+      cells: r.cells,
+      columns: r.columns.map((n) => ({
+        id: n.id,
+        contents: n.contents.map((s) => {
+          const a = s.type === "paragraph" ? "text" : s.type, c = Rt(a, { ...s.values });
+          return c.selectable === void 0 && (c.selectable = !0), c.draggable === void 0 && (c.draggable = !0), c.duplicatable === void 0 && (c.duplicatable = !0), c.deletable === void 0 && (c.deletable = !0), { id: s.id, type: a, values: c };
+        }),
+        values: n.values
+      })),
+      values: i
+    };
+  };
+  return {
+    counters: e.counters,
+    body: {
+      id: e.body.id,
+      rows: e.body.rows.map(o),
+      headers: e.body.headers.map(o),
+      footers: e.body.footers.map(o),
+      values: t
+    },
+    schemaVersion: 12
+    // Unlayer uses version 12
+  };
+}
+function At(...e) {
+  const t = {}, o = (r) => {
+    const i = r.match(/^(.+?)(\d+)$/);
+    if (i) {
+      const n = i[1].replace(/_$/, ""), s = parseInt(i[2], 10);
+      t[n] = Math.max(t[n] || 0, s);
+    }
+  };
+  for (const r of e)
+    for (const i of r) {
+      o(i.id);
+      for (const n of i.columns) {
+        o(n.id);
+        for (const s of n.contents)
+          o(s.id);
+      }
+    }
+  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--)
+    (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 {
+  constructor() {
+    super(...arguments), this.visible = !1, this.mergeTags = [], this.mergeDropdownOpen = !1, this._outsideClickHandler = (e) => {
+      if (!this.mergeDropdownOpen) return;
+      e.composedPath().includes(this) || (this.mergeDropdownOpen = !1);
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("mousedown", this._outsideClickHandler, !0);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("mousedown", this._outsideClickHandler, !0);
+  }
+  exec(e, t) {
+    document.execCommand(e, !1, t), this.requestUpdate();
+  }
+  isActive(e) {
+    try {
+      return document.queryCommandState(e);
+    } catch {
+      return !1;
+    }
+  }
+  /** Position the toolbar above a given element */
+  positionAbove(e) {
+    const t = e.getBoundingClientRect();
+    this.style.left = `${t.left + t.width / 2}px`, this.style.top = `${t.top - 8}px`, this.style.transform = "translate(-50%, -100%)", this.classList.add("visible");
+  }
+  hide() {
+    this.classList.remove("visible"), this.mergeDropdownOpen = !1;
+  }
+  insertMergeTag(e) {
+    document.execCommand("insertHTML", !1, e), this.mergeDropdownOpen = !1, this.requestUpdate();
+  }
+  toggleMergeDropdown(e) {
+    e.preventDefault(), this.mergeDropdownOpen = !this.mergeDropdownOpen;
+  }
+  handleLink() {
+    if (this.isActive("createLink"))
+      this.exec("unlink");
+    else {
+      const e = prompt("Enter URL:");
+      e && this.exec("createLink", e);
+    }
+  }
+  render() {
+    return d`
+      <div class="toolbar" @mousedown=${(e) => e.preventDefault()}>
+        <button class="btn ${this.isActive("bold") ? "active" : ""}"
+          @click=${() => this.exec("bold")} title="Bold (Ctrl+B)">
+          <strong>B</strong>
+        </button>
+        <button class="btn ${this.isActive("italic") ? "active" : ""}"
+          @click=${() => this.exec("italic")} title="Italic (Ctrl+I)">
+          <em>I</em>
+        </button>
+        <button class="btn ${this.isActive("underline") ? "active" : ""}"
+          @click=${() => this.exec("underline")} title="Underline (Ctrl+U)">
+          <u>U</u>
+        </button>
+        <button class="btn ${this.isActive("strikeThrough") ? "active" : ""}"
+          @click=${() => this.exec("strikeThrough")} title="Strikethrough">
+          <s>S</s>
+        </button>
+        <div class="separator"></div>
+        <button class="btn ${this.isActive("createLink") ? "active" : ""}"
+          @click=${this.handleLink} title="Link">
+          <svg viewBox="0 0 24 24"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
+        </button>
+        <div class="separator"></div>
+        <button class="btn" @click=${() => this.exec("justifyLeft")} title="Align Left">
+          <svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="15" y2="12"/><line x1="3" y1="18" x2="18" y2="18"/></svg>
+        </button>
+        <button class="btn" @click=${() => this.exec("justifyCenter")} title="Align Center">
+          <svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"/><line x1="6" y1="12" x2="18" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></svg>
+        </button>
+        <button class="btn" @click=${() => this.exec("justifyRight")} title="Align Right">
+          <svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"/><line x1="9" y1="12" x2="21" y2="12"/><line x1="6" y1="18" x2="21" y2="18"/></svg>
+        </button>
+        ${this.mergeTags.length > 0 ? d`
+          <div class="separator"></div>
+          <div class="merge-wrap">
+            <button class="btn ${this.mergeDropdownOpen ? "active" : ""}"
+              @click=${this.toggleMergeDropdown} title="Insert Merge Tag">
+              <span style="font-size:13px;font-weight:700;letter-spacing:-0.5px;">{x}</span>
+            </button>
+            ${this.mergeDropdownOpen ? d`
+              <div class="merge-dropdown" @mousedown=${(e) => e.preventDefault()}>
+                ${this.mergeTags.map((e) => d`
+                  <div class="merge-group-name">${e.name}</div>
+                  ${Object.entries(e.mergeTags).map(([t, o]) => d`
+                    <button class="merge-item" @click=${() => this.insertMergeTag(o.value)}>
+                      ${o.name}
+                    </button>
+                  `)}
+                `)}
+              </div>
+            ` : v}
+          </div>
+        ` : v}
+      </div>
+    `;
+  }
+};
+O.styles = _`
+    :host {
+      position: fixed;
+      z-index: 10000;
+      display: none;
+    }
+    :host(.visible) {
+      display: block;
+      animation: fadeIn 0.15s ease;
+    }
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(4px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .toolbar {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+      padding: 4px 6px;
+      background: #1e293b;
+      border-radius: 10px;
+      box-shadow: 0 8px 24px rgba(0,0,0,0.2);
+    }
+    .btn {
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: none;
+      border: none;
+      color: var(--me-grey-300);
+      cursor: pointer;
+      border-radius: 6px;
+      font-size: 14px;
+      font-weight: 600;
+      transition: all 0.1s ease;
+      padding: 0;
+    }
+    .btn:hover { background: rgba(255,255,255,0.08); color: white; }
+    .btn.active { background: rgba(93,118,139,0.4); color: white; }
+    .separator {
+      width: 1px;
+      height: 20px;
+      background: #334155;
+      margin: 0 2px;
+    }
+    .btn svg {
+      width: 16px;
+      height: 16px;
+      stroke: currentColor;
+      fill: none;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+    /* Merge tag dropdown */
+    .merge-wrap { position: relative; }
+    .merge-dropdown {
+      position: absolute;
+      top: calc(100% + 6px);
+      left: 50%;
+      transform: translateX(-50%);
+      background: white;
+      border: 1px solid var(--me-grey-200);
+      border-radius: 8px;
+      box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+      min-width: 200px;
+      max-height: 260px;
+      overflow-y: auto;
+      z-index: 10;
+      padding: 4px 0;
+    }
+    .merge-group-name {
+      padding: 6px 12px 2px;
+      font-size: 10px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--me-grey-500);
+      font-family: sans-serif;
+    }
+    .merge-item {
+      display: block;
+      width: 100%;
+      padding: 6px 12px;
+      background: none;
+      border: none;
+      color: var(--me-grey-600);
+      font-size: 13px;
+      text-align: left;
+      cursor: pointer;
+      white-space: nowrap;
+    }
+    .merge-item:hover {
+      background: var(--me-blue-50);
+      color: var(--me-grey-900);
+    }
+  `;
+se([
+  x({ type: Boolean })
+], O.prototype, "visible", 2);
+se([
+  x({ attribute: !1 })
+], O.prototype, "mergeTags", 2);
+se([
+  E()
+], O.prototype, "mergeDropdownOpen", 2);
+O = se([
+  S("me-inline-toolbar")
+], O);
+var Lt = Object.defineProperty, Bt = Object.getOwnPropertyDescriptor, J = (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;
+};
+const Ae = /* @__PURE__ */ new Set(["text", "heading", "paragraph"]);
+function Me(e) {
+  return e === "html" ? "html" : "text";
+}
+let M = class extends T {
+  constructor() {
+    super(...arguments), this.storeCtrl = new B(this, ["design", "selection", "viewMode"]), this.editing = !1, this.toolbar = null, this.editableEl = null, this.handleInlineInput = () => {
+      this.showToolbar();
+    }, this.handleInlineBlur = (e) => {
+      const t = e.relatedTarget;
+      t && (t.closest("me-inline-toolbar") || this.toolbar?.contains(t)) || setTimeout(() => {
+        document.activeElement !== this.editableEl && !this.toolbar?.matches(":hover") && this.stopEditing();
+      }, 150);
+    }, this.handleOverlayBlur = (e) => {
+      const t = e.relatedTarget;
+      t && (t.closest("me-inline-toolbar") || this.toolbar?.contains(t)) || setTimeout(() => {
+        document.activeElement !== this.editableEl && !this.toolbar?.matches(":hover") && this.stopEditing();
+      }, 200);
+    }, this.handleInlineKeydown = (e) => {
+      e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), this.stopEditing());
+    }, this.hoverUnsub = null;
+  }
+  set store(e) {
+    this.storeCtrl.setStore(e);
+  }
+  get store() {
+    return this.storeCtrl.store;
+  }
+  // ── Event handlers ───────────────────────────────────────
+  handleClick(e) {
+    e.stopPropagation(), this.editing || this.store.select(this.content.id);
+  }
+  handleDblClick(e) {
+    e.stopPropagation(), Ae.has(this.content.type) && this.startEditing();
+  }
+  handleMouseEnter() {
+    this.classList.add("hovered"), this.store.hover(this.content.id);
+  }
+  handleMouseLeave() {
+    this.classList.remove("hovered"), this.store.hover(null);
+  }
+  handleDelete(e) {
+    e.stopPropagation(), this.store.removeContent(this.content.id);
+  }
+  handleDuplicate(e) {
+    e.stopPropagation(), this.store.duplicateContent(this.content.id);
+  }
+  /** Called from the drag handle only (not the whole block) */
+  handleDragStart(e) {
+    e.stopPropagation(), e.dataTransfer.setData("application/maileditor-content", this.content.id), e.dataTransfer.effectAllowed = "move", this.style.opacity = "0.4", D.startContentDrag(this.content.id, this);
+  }
+  handleDragEnd() {
+    D.reset();
+  }
+  // ── Inline editing ───────────────────────────────────────
+  startEditing() {
+    this.editing = !0, this.classList.add("editing"), this.storeCtrl.hostDisconnected();
+    const e = this.getBoundingClientRect(), t = this.getInlineStyles(this.content.values), o = Me(this.content.type), r = this.content.values[o] || "", i = document.createElement("div");
+    i.contentEditable = "true", i.innerHTML = r, Object.assign(i.style, {
+      position: "fixed",
+      left: e.left + "px",
+      top: e.top + "px",
+      width: e.width + "px",
+      minHeight: e.height + "px",
+      zIndex: "9999",
+      background: "white",
+      boxShadow: "0 0 0 2px #8b5cf6, 0 4px 16px rgba(0,0,0,0.15)",
+      borderRadius: "2px",
+      outline: "none",
+      boxSizing: "border-box"
+    }), t.split(";").forEach((a) => {
+      const [c, l] = a.split(":").map((u) => u?.trim());
+      c && l && i.style.setProperty(c, l);
+    }), i.addEventListener("keydown", this.handleInlineKeydown), i.addEventListener("blur", this.handleOverlayBlur), document.body.appendChild(i), this.editableEl = i, i.focus();
+    const n = window.getSelection(), s = document.createRange();
+    s.selectNodeContents(i), s.collapse(!1), n?.removeAllRanges(), n?.addRange(s), this.showToolbar();
+  }
+  stopEditing() {
+    this.editing && (this.saveInlineContent(), this.editableEl && (this.editableEl.removeEventListener("keydown", this.handleInlineKeydown), this.editableEl.removeEventListener("blur", this.handleOverlayBlur), this.editableEl.remove()), this.editing = !1, this.classList.remove("editing"), this.editableEl = null, this.storeCtrl.hostConnected(), this.requestUpdate(), this.toolbar?.hide());
+  }
+  saveInlineContent() {
+    if (!this.editableEl) return;
+    const e = this.editableEl.innerHTML, t = Me(this.content.type), o = this.content.values[t];
+    e !== o && this.store.updateContentValues(this.content.id, { [t]: e });
+  }
+  showToolbar() {
+    this.toolbar || (this.toolbar = document.createElement("me-inline-toolbar"), document.body.appendChild(this.toolbar)), this.toolbar.mergeTags = this.store.mergeTags, this.editableEl && this.toolbar.positionAbove(this.editableEl);
+  }
+  // ── Lifecycle ────────────────────────────────────────────
+  connectedCallback() {
+    super.connectedCallback(), 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");
+    }));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.editing && this.stopEditing(), this.hoverUnsub?.(), this.toolbar?.remove(), this.toolbar = null;
+  }
+  // ── Render ───────────────────────────────────────────────
+  render() {
+    if (!this.store) return d``;
+    const e = this.store.selectedId === this.content.id, t = this.store.viewMode, o = !!this.content.values.hideDesktop, r = !!this.content.values.hideMobile, i = t === "desktop" && o || t === "mobile" && r, n = this.store.a11yIssueIds.has(this.content.id);
+    this.classList.toggle("selected", e && !this.editing), this.classList.toggle("a11y-issue", n), this.classList.toggle("hidden-in-view", i), this.removeAttribute("draggable"), this.dataset.contentId = this.content.id, this.editing && !e && this.stopEditing();
+    const s = this.toolRegistry.get(this.content.type);
+    if (!s && this.toolRegistry.has(this.content.type))
+      return this.toolRegistry.ensureLoaded(this.content.type).then(() => this.requestUpdate()), d`<div style="padding:16px;text-align:center;color:#9ca3af;font-size:13px;">Loading ${this.content.type}...</div>`;
+    const a = o ? "Hidden on desktop" : r ? "Hidden on mobile" : "", c = Ae.has(this.content.type), l = d`
+      <button class="drag-handle" draggable="true" title="Drag to move"
+        @dragstart=${(g) => this.handleDragStart(g)}
+        @dragend=${() => this.handleDragEnd()}
+        @mousedown=${(g) => g.stopPropagation()}>
+        <svg viewBox="0 0 16 16"><circle cx="5" cy="3" r="1.5"/><circle cx="11" cy="3" r="1.5"/><circle cx="5" cy="8" r="1.5"/><circle cx="11" cy="8" r="1.5"/><circle cx="5" cy="13" r="1.5"/><circle cx="11" cy="13" r="1.5"/></svg>
+      </button>
+    `, u = s?.renderer.renderEditor(this.content.values, {
+      isSelected: e,
+      isHovered: this.classList.contains("hovered"),
+      columnWidth: 600,
+      displayMode: "email"
+    });
+    if (this.editing && c)
+      return d`${l}<div class="content-wrapper" style="visibility:hidden;">${u}</div>`;
+    const h = this.content.values.containerPadding || "0px";
+    return d`
+      ${i ? d`<div class="hidden-badge">${a}</div>` : ""}
+      ${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.handleDelete} title="Delete">&#10005;</button>
+      </div>
+      <div class="content-wrapper" style="padding:${h};"
+        @click=${this.handleClick}
+        @dblclick=${this.handleDblClick}
+        @mouseenter=${this.handleMouseEnter}
+        @mouseleave=${this.handleMouseLeave}>
+        ${u ?? d`<div style="padding:10px;color:#999;font-style:italic;">Unknown tool: ${this.content.type}</div>`}
+      </div>
+    `;
+  }
+  /** Build inline CSS for the contenteditable area based on content values */
+  getInlineStyles(e) {
+    const t = [], o = (h, g = "") => {
+      const b = e[h];
+      return typeof b == "string" ? b : typeof b == "number" ? String(b) : g;
+    };
+    t.push(`padding:${o("containerPadding", "10px")}`);
+    const r = o("backgroundColor");
+    r && t.push(`background-color:${r}`);
+    const i = o("color");
+    i && t.push(`color:${i}`);
+    const n = o("fontSize");
+    n && t.push(`font-size:${n}`);
+    const s = o("fontWeight");
+    s && t.push(`font-weight:${s}`);
+    const a = o("lineHeight", "140%");
+    t.push(`line-height:${a}`);
+    const c = o("textAlign");
+    c && t.push(`text-align:${c}`);
+    const l = o("letterSpacing");
+    l && l !== "normal" && t.push(`letter-spacing:${l}`);
+    const u = e.fontFamily;
+    return typeof u == "string" ? t.push(`font-family:${u}`) : u && typeof u == "object" && t.push(`font-family:${u.value || "inherit"}`), t.push("word-break:break-word", "outline:none", "min-height:1em"), t.join(";");
+  }
+};
+M.styles = _`
+    :host {
+      display: block; position: relative;
+      transition: outline 0.15s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
+    }
+    :host(.selected) { outline: 2px solid var(--me-primary); outline-offset: -1px; box-shadow: 0 0 0 4px var(--me-primary-10); }
+    :host(.hovered:not(.selected)) { outline: 2px dashed var(--me-primary-30); outline-offset: -1px; box-shadow: 0 0 0 4px var(--me-primary-5); }
+    :host(.hovered.a11y-issue) {
+      outline: 2px solid var(--me-danger) !important; outline-offset: -1px;
+      animation: a11yPulse 1s ease-in-out infinite;
+    }
+    @keyframes a11yPulse {
+      0%, 100% { box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15); }
+      50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.25); }
+    }
+    :host(.editing) { outline: 2px solid #32769B; outline-offset: -1px; }
+    :host(.just-dropped) {
+      animation: dropIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+    :host(.hidden-in-view) { opacity: 0.3; position: relative; }
+    .hidden-badge {
+      position: absolute; top: 4px; right: 4px; z-index: 5;
+      background: #f59e0b; color: white; font-size: 10px; font-weight: 600;
+      padding: 2px 6px; border-radius: 3px; font-family: sans-serif;
+      pointer-events: none;
+    }
+    @keyframes dropIn {
+      0% { opacity: 0; transform: scale(0.92) translateY(-8px); }
+      100% { opacity: 1; transform: scale(1) translateY(0); }
+    }
+    /* Drag handle — straddles the right border, vertically centered */
+    .drag-handle {
+      display: none;
+      position: absolute;
+      top: 50%;
+      right: -12px;
+      transform: translateY(-50%);
+      width: 24px;
+      height: 24px;
+      background: var(--me-primary);
+      color: white;
+      border: 2px solid white;
+      border-radius: 50%;
+      cursor: grab;
+      z-index: 20;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      box-shadow: 0 1px 4px rgba(0,0,0,0.2);
+      transition: background 0.15s ease, transform 0.15s ease;
+    }
+    .drag-handle:hover {
+      background: var(--me-primary-dark);
+      transform: translateY(-50%) scale(1.15);
+    }
+    .drag-handle:active { cursor: grabbing; }
+    .drag-handle svg {
+      width: 12px; height: 12px; fill: currentColor; stroke: none;
+    }
+    :host(.selected) .drag-handle,
+    :host(.hovered) .drag-handle { display: flex; }
+    :host(.editing) .drag-handle { display: none; }
+    /* Action bar */
+    .action-bar {
+      display: none; position: absolute; top: -28px; right: 4px;
+      background: var(--me-primary); border-radius: 6px; padding: 2px; gap: 2px; z-index: 10;
+      align-items: center;
+    }
+    :host(.selected:not(.editing)) .action-bar { display: flex; }
+    .action-bar-label {
+      font-size: 10px; color: rgba(255,255,255,0.6); font-weight: 600;
+      text-transform: uppercase; letter-spacing: 0.03em;
+      padding: 0 4px;
+    }
+    .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.15); }
+    .content-wrapper { position: relative; cursor: default; box-sizing: border-box; }
+    /* Reset paragraph margins in user content to match email rendering.
+       Override inline margin from external editors (e.g. margin: 1.25em 0px). */
+    .content-wrapper p { margin: 0 !important; }
+    .inline-editable {
+      outline: none; cursor: text; min-height: 1em;
+    }
+    .inline-editable:focus { outline: none; }
+  `;
+J([
+  x({ attribute: !1 })
+], M.prototype, "content", 2);
+J([
+  x({ attribute: !1 })
+], M.prototype, "store", 1);
+J([
+  x({ attribute: !1 })
+], M.prototype, "toolRegistry", 2);
+J([
+  E()
+], M.prototype, "editing", 2);
+M = J([
+  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--)
+    (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 {
+  constructor() {
+    super(...arguments), this.storeCtrl = new B(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 ? d`
+        <div class="empty-column" data-column-id=${this.column.id}>
+          Drag content here
+        </div>
+      ` : d`
+      ${ye(o, (r) => r.id, (r) => d`
+          <me-content-renderer
+            .content=${r}
+            .store=${this.store}
+            .toolRegistry=${this.toolRegistry}
+          ></me-content-renderer>
+        `)}
+    `;
+  }
+};
+z.styles = _`
+    :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;
+    }
+  `;
+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([
+  S("me-column-renderer")
+], z);
+var jt = 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;
+};
+let j = 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);
+    }, this.handleDragEnd = () => {
+      D.reset();
+    };
+  }
+  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() {
+    if (!this.store) return d``;
+    const { row: e, store: t, toolRegistry: o } = this, r = e.values.backgroundColor || "transparent", i = e.values.columnsBackgroundColor || "transparent", n = e.values.padding || "0px", s = e.cells.reduce((f, y) => f + y, 0), a = e.values.backgroundImage, c = typeof a == "object" && a?.url ? a.url : "";
+    let l = "";
+    if (c) {
+      const f = a.repeat === !0 || a.repeat === "repeat" ? "repeat" : "no-repeat", y = a.cover === !0 ? "cover" : a.fullWidth === !0 ? "100% auto" : "auto", w = a.center !== !1 ? "center" : "top left";
+      l = `background-image:url('${c}');background-size:${y};background-position:${w};background-repeat:${f};`;
+    }
+    const u = t.viewMode, h = !!e.values.hideDesktop, g = !!e.values.hideMobile, b = u === "desktop" && h || u === "mobile" && g, k = h ? "Hidden on desktop" : g ? "Hidden on mobile" : "";
+    this.classList.toggle("hidden-in-view", b), this.removeAttribute("draggable"), this.dataset.rowId = e.id;
+    const $ = t.getRowIndex(e.id), m = t.getRows().length;
+    return d`
+      ${b ? d`<div class="row-hidden-badge">${k}</div>` : ""}
+      <button class="drag-handle" draggable="true" title="Drag to reorder"
+        @dragstart=${this.handleDragStart}
+        @dragend=${this.handleDragEnd}
+        @mousedown=${(f) => f.stopPropagation()}>
+        <svg viewBox="0 0 16 16"><circle cx="5" cy="3" r="1.5"/><circle cx="11" cy="3" r="1.5"/><circle cx="5" cy="8" r="1.5"/><circle cx="11" cy="8" r="1.5"/><circle cx="5" cy="13" r="1.5"/><circle cx="11" cy="13" r="1.5"/></svg>
+      </button>
+      <div class="action-bar">
+        <span class="action-bar-label">Row</span>
+        ${$ > 0 ? d`
+          <button class="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>
+        ` : ""}
+        ${$ < m - 1 ? d`
+          <button class="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>
+        ` : ""}
+        <div class="action-separator"></div>
+        <button class="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:${r};padding:${n};${l}"
+      >
+        ${ye(e.columns, (f) => f.id, (f, y) => {
+      const w = e.cells[y] / s * 100;
+      return d`
+            <me-column-renderer
+              .column=${f}
+              .store=${t}
+              .toolRegistry=${o}
+              .widthPercent=${w}
+              style="background-color:${i};"
+            ></me-column-renderer>
+          `;
+    })}
+      </div>
+    `;
+  }
+};
+j.styles = _`
+    :host {
+      display: block;
+      position: relative;
+      transition: opacity 0.2s ease;
+    }
+    :host(.hidden-in-view) { opacity: 0.3; }
+    .row-hidden-badge {
+      position: absolute; top: 4px; left: 4px; z-index: 5;
+      background: #f59e0b; color: white; font-size: 10px; font-weight: 600;
+      padding: 2px 6px; border-radius: 3px; font-family: sans-serif;
+      pointer-events: none;
+    }
+    .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 2px var(--me-primary-30);
+    }
+
+    /* Drop-in animation for newly added rows */
+    :host(.just-added) {
+      animation: rowSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+    @keyframes rowSlideIn {
+      0% { opacity: 0; transform: translateY(-10px) scaleY(0.95); }
+      100% { opacity: 1; transform: translateY(0) scaleY(1); }
+    }
+
+    /* ── Drag handle — right side, vertically centered ── */
+    .drag-handle {
+      display: none;
+      position: absolute;
+      right: -12px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 24px;
+      height: 24px;
+      background: var(--me-primary);
+      color: white;
+      border: 2px solid white;
+      border-radius: 50%;
+      cursor: grab;
+      z-index: 20;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      box-shadow: 0 1px 4px rgba(0,0,0,0.2);
+      transition: background 0.15s ease, transform 0.15s ease;
+    }
+    .drag-handle:hover {
+      background: var(--me-primary-dark);
+      transform: translateY(-50%) scale(1.15);
+    }
+    .drag-handle:active { cursor: grabbing; }
+    .drag-handle svg {
+      width: 12px; height: 12px; fill: currentColor; stroke: none;
+    }
+    :host(:hover) .drag-handle { display: flex; }
+
+    /* ── Action bar — top-right ── */
+    .action-bar {
+      display: none;
+      position: absolute;
+      top: -28px;
+      right: 4px;
+      background: var(--me-primary);
+      border-radius: 6px;
+      padding: 2px;
+      gap: 2px;
+      z-index: 10;
+      align-items: center;
+    }
+    :host(:hover) .action-bar { display: flex; }
+    .action-bar-label {
+      font-size: 10px; color: rgba(255,255,255,0.6); font-weight: 600;
+      text-transform: uppercase; letter-spacing: 0.03em;
+      padding: 0 4px;
+    }
+    .action-btn {
+      background: none;
+      border: none;
+      color: white;
+      cursor: pointer;
+      padding: 2px 6px;
+      font-size: 12px;
+      line-height: 1;
+      border-radius: 2px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .action-btn:hover { background: rgba(255,255,255,0.15); }
+    .action-btn.danger:hover { background: rgba(239,68,68,0.5); }
+    .action-btn svg {
+      width: 14px;
+      height: 14px;
+      stroke: currentColor;
+      fill: none;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+    .action-separator {
+      width: 1px;
+      background: rgba(255,255,255,0.3);
+      margin: 2px 1px;
+    }
+  `;
+ae([
+  x({ attribute: !1 })
+], j.prototype, "row", 2);
+ae([
+  x({ attribute: !1 })
+], j.prototype, "store", 1);
+ae([
+  x({ attribute: !1 })
+], j.prototype, "toolRegistry", 2);
+j = ae([
+  S("me-row-renderer")
+], j);
+var Vt = Object.defineProperty, Ft = Object.getOwnPropertyDescriptor, Z = (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 {
+  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);
+  }
+  set store(e) {
+    this.storeCtrl.setStore(e);
+  }
+  get store() {
+    return this.storeCtrl.store;
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this.boundCloseQuickAdd);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this.boundCloseQuickAdd);
+  }
+  handleCanvasClick() {
+    this.store.select(null);
+  }
+  setViewMode(e) {
+    this.store.setViewMode(e);
+  }
+  // ── Quick-add methods ──────────────────────────────────────
+  openQuickAdd(e, t) {
+    e.stopPropagation();
+    const r = e.currentTarget.getBoundingClientRect();
+    this.quickAddPos = {
+      x: r.left + r.width / 2,
+      y: r.bottom + 6
+    }, this.quickAddIndex = t;
+  }
+  closeQuickAdd() {
+    this.quickAddIndex !== null && (this.quickAddIndex = null);
+  }
+  async quickAddTool(e, t) {
+    await this.toolRegistry.ensureLoaded(e);
+    const o = this.toolRegistry.getDefaultValues(e), r = this.store.createRow([1]), n = this.store.addRow(r, t).columns[0].id, s = this.store.createContent(e, o);
+    this.store.addContent(n, s), this.quickAddIndex = null;
+  }
+  quickAddLayout(e, t) {
+    const o = this.store.createRow(e);
+    this.store.addRow(o, t), this.quickAddIndex = null;
+  }
+  renderRowGap(e) {
+    return d`
+      <div class="row-gap">
+        <button
+          class="add-btn"
+          @click=${(t) => this.openQuickAdd(t, e)}
+          title="Add row"
+        >+</button>
+      </div>
+    `;
+  }
+  renderQuickAddMenu() {
+    if (this.quickAddIndex === null) return "";
+    const e = this.quickAddIndex, t = this.quickAddPos.x, o = this.quickAddPos.y;
+    return d`
+      <div
+        class="quick-add-menu"
+        style="position:fixed;left:${t}px;top:${o}px;transform:translateX(-50%)"
+        @click=${(i) => i.stopPropagation()}
+      >
+        <div class="quick-tools">
+          <button @click=${() => this.quickAddTool("text", e)} title="Text">T</button>
+          <button @click=${() => this.quickAddTool("heading", e)} title="Heading">H</button>
+          <button @click=${() => this.quickAddTool("image", e)} title="Image">
+            <svg width="16" height="16" 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"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
+          </button>
+          <button @click=${() => this.quickAddTool("button", e)} title="Button">
+            <svg width="16" height="16" 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="3"/></svg>
+          </button>
+          <button @click=${() => this.quickAddTool("divider", e)} title="Divider">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="12" x2="21" y2="12"/></svg>
+          </button>
+        </div>
+        <div class="quick-separator"></div>
+        <div class="quick-layouts">
+          ${[
+      { cells: [1], label: "100%" },
+      { cells: [1, 1], label: "50/50" },
+      { cells: [1, 1, 1], label: "33/33/33" },
+      { cells: [2, 1], label: "66/33" },
+      { cells: [1, 2], label: "33/66" },
+      { cells: [1, 1, 1, 1], label: "25x4" }
+    ].map(
+      (i) => {
+        const n = i.cells.reduce((s, a) => s + a, 0);
+        return d`
+                <button
+                  @click=${() => this.quickAddLayout(i.cells, e)}
+                  title=${i.label}
+                >
+                  ${i.cells.map((s) => d`<div class="ql-col" style="--col-flex:${s / n}"></div>`)}
+                </button>
+              `;
+      }
+    )}
+        </div>
+      </div>
+    `;
+  }
+  render() {
+    const e = this.store.getRows(), t = this.store.getBodyValues(), o = t.contentWidth || "600px", r = t.backgroundColor || "#e7e7e7", i = this.store.viewMode, n = i === "mobile" ? "375px" : o;
+    return d`
+      <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-bg" style="background-color:${r};" @click=${this.handleCanvasClick}>
+        <div
+          class="canvas-body"
+          style="max-width:${n};"
+        >
+          ${e.length === 0 ? d`
+                <div class="empty-canvas">
+                  <div class="empty-icon">&#9776;</div>
+                  <div>Drag a content block here</div>
+                </div>
+                ${this.renderRowGap(0)}
+              ` : d`
+                ${this.renderRowGap(0)}
+                ${ye(e, (s) => s.id, (s, a) => d`
+                  <me-row-renderer
+                    .row=${s}
+                    .store=${this.store}
+                    .toolRegistry=${this.toolRegistry}
+                  ></me-row-renderer>
+                  ${this.renderRowGap(a + 1)}
+                `)}
+              `}
+        </div>
+      </div>
+      ${this.renderQuickAddMenu()}
+    `;
+  }
+};
+L.styles = _`
+    :host {
+      display: block;
+      flex: 1;
+      overflow-y: auto;
+      background: var(--me-grey-100);
+    }
+    /* Full-width body background — mirrors the email <body> */
+    .canvas-bg {
+      min-height: 100%;
+      padding: 0 20px 20px;
+    }
+    .canvas-body {
+      margin: 0 auto;
+      background: #ffffff;
+      min-height: 200px;
+      position: relative;
+    }
+    .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;
+    }
+    .empty-icon {
+      font-size: 40px;
+      opacity: 0.4;
+    }
+    .view-toggle {
+      display: flex;
+      justify-content: center;
+      margin: 8px 0 12px;
+      gap: 4px;
+    }
+    .view-btn {
+      padding: 6px 16px;
+      border: 1px solid var(--me-grey-200);
+      background: white;
+      cursor: pointer;
+      font-size: 11px;
+      font-weight: 600;
+      font-family: sans-serif;
+      color: var(--me-grey-700);
+      transition: all 0.15s ease;
+    }
+    .view-btn:hover { background: var(--me-grey-50); }
+    .view-btn:first-child { border-radius: 8px 0 0 8px; }
+    .view-btn:last-child { border-radius: 0 8px 8px 0; }
+    .view-btn.active {
+      background: var(--me-primary);
+      border-color: var(--me-primary);
+      color: white;
+    }
+
+    /* ── Quick-add row gaps ─────────────────────────── */
+    .row-gap {
+      height: 20px;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 2;
+    }
+    .row-gap .add-btn {
+      opacity: 0;
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      border: none;
+      background: var(--me-primary);
+      color: white;
+      font-size: 16px;
+      line-height: 1;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: opacity 0.15s, transform 0.15s;
+      padding: 0;
+      font-family: sans-serif;
+    }
+    .row-gap:hover .add-btn {
+      opacity: 1;
+    }
+    .row-gap .add-btn:hover {
+      transform: scale(1.1);
+    }
+    .row-gap::before {
+      content: '';
+      position: absolute;
+      left: 5%;
+      right: 5%;
+      top: 50%;
+      height: 2px;
+      background: transparent;
+      border-radius: 1px;
+      transition: background 0.2s ease;
+    }
+    .row-gap:hover::before {
+      background: rgba(93, 118, 139, 0.2);
+    }
+
+    /* ── Quick-add floating menu ───────────────────── */
+    .quick-add-menu {
+      background: white;
+      border: 1px solid var(--me-grey-200);
+      border-radius: 10px;
+      box-shadow: 0 4px 20px rgba(0,0,0,0.12);
+      padding: 8px;
+      z-index: 100;
+      animation: qaFadeIn 0.12s ease-out;
+      font-family: sans-serif;
+    }
+    @keyframes qaFadeIn {
+      from { opacity: 0; transform: scale(0.95); }
+      to   { opacity: 1; transform: scale(1); }
+    }
+    .quick-tools {
+      display: flex;
+      gap: 4px;
+    }
+    .quick-tools button {
+      width: 36px;
+      height: 36px;
+      border: none;
+      border-radius: 8px;
+      background: var(--me-grey-50);
+      cursor: pointer;
+      font-size: 14px;
+      font-family: sans-serif;
+      color: var(--me-grey-700);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background 0.12s, color 0.12s;
+    }
+    .quick-tools button:hover {
+      background: var(--me-primary);
+      color: white;
+    }
+    .quick-separator {
+      height: 1px;
+      background: var(--me-grey-200);
+      margin: 6px 0;
+    }
+    .quick-layouts {
+      display: flex;
+      gap: 4px;
+    }
+    .quick-layouts button {
+      flex: 1;
+      height: 28px;
+      border: 1px solid var(--me-grey-200);
+      border-radius: 6px;
+      background: white;
+      cursor: pointer;
+      padding: 3px 4px;
+      display: flex;
+      gap: 2px;
+      align-items: stretch;
+      transition: border-color 0.12s;
+    }
+    .quick-layouts button:hover {
+      border-color: var(--me-primary);
+    }
+    .quick-layouts button .ql-col {
+      background: var(--me-grey-300);
+      border-radius: 2px;
+      flex-grow: var(--col-flex, 1);
+      transition: background 0.12s;
+    }
+    .quick-layouts button:hover .ql-col {
+      background: var(--me-primary);
+    }
+  `;
+Z([
+  x({ attribute: !1 })
+], L.prototype, "store", 1);
+Z([
+  x({ attribute: !1 })
+], L.prototype, "toolRegistry", 2);
+Z([
+  E()
+], L.prototype, "quickAddIndex", 2);
+Z([
+  E()
+], L.prototype, "quickAddPos", 2);
+L = Z([
+  S("me-editor-canvas")
+], L);
+var Ut = Object.defineProperty, qt = Object.getOwnPropertyDescriptor, Oe = (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;
+};
+const he = [
+  // System / email-safe fonts
+  { label: "Arial", value: "arial,helvetica,sans-serif", url: "" },
+  { label: "Helvetica", value: "helvetica,sans-serif", url: "" },
+  { label: "Georgia", value: "georgia,serif", url: "" },
+  { label: "Times New Roman", value: "'times new roman',times,serif", url: "" },
+  { label: "Trebuchet MS", value: "trebuchet ms,helvetica,sans-serif", url: "" },
+  { label: "Verdana", value: "verdana,geneva,sans-serif", url: "" },
+  { label: "Courier New", value: "'courier new',courier,monospace", url: "" },
+  // Google Fonts
+  { label: "Lato", value: "'Lato',sans-serif", url: "https://fonts.googleapis.com/css?family=Lato:400,700" },
+  { label: "Montserrat", value: "'Montserrat',sans-serif", url: "https://fonts.googleapis.com/css?family=Montserrat:400,700" },
+  { label: "Old Standard TT", value: "'Old Standard TT',serif", url: "https://fonts.googleapis.com/css?family=Old+Standard+TT:400,700" },
+  { label: "Open Sans", value: "'Open Sans',sans-serif", url: "https://fonts.googleapis.com/css?family=Open+Sans:400,700" },
+  { label: "Pacifico", value: "'Pacifico',cursive", url: "https://fonts.googleapis.com/css?family=Pacifico:400" },
+  { label: "Playfair Display", value: "'Playfair Display',serif", url: "https://fonts.googleapis.com/css?family=Playfair+Display:400,700" },
+  { label: "Raleway", value: "'Raleway',sans-serif", url: "https://fonts.googleapis.com/css?family=Raleway:400,700" },
+  { label: "Roboto", value: "'Roboto',sans-serif", url: "https://fonts.googleapis.com/css?family=Roboto:400,700" },
+  { label: "Rubik", value: "'Rubik',sans-serif", url: "https://fonts.googleapis.com/css?family=Rubik:400,700" },
+  { label: "Source Sans Pro", value: "'Source Sans Pro',sans-serif", url: "https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" }
+];
+let K = class extends T {
+  constructor() {
+    super(...arguments), this.storeCtrl = new B(this, ["design"]);
+  }
+  set store(e) {
+    this.storeCtrl.setStore(e);
+  }
+  get store() {
+    return this.storeCtrl.store;
+  }
+  /** Scroll to preheader field, focus it, and pulse highlight */
+  highlightPreheader() {
+    const e = this.shadowRoot?.getElementById("preheader-field"), t = this.shadowRoot?.getElementById("preheader-input");
+    e && (e.scrollIntoView({ behavior: "smooth", block: "center" }), e.classList.add("highlight"), t?.focus(), setTimeout(() => e.classList.remove("highlight"), 5e3));
+  }
+  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 = he.find((r) => r.value === e), o = { label: t?.label || e, value: e };
+    if (t?.url) {
+      o.url = t.url;
+      const r = `emabuild-font-${e.replace(/[^a-z]/gi, "")}`;
+      if (!document.getElementById(r)) {
+        const i = document.createElement("link");
+        i.id = r, i.rel = "stylesheet", i.href = t.url, document.head.appendChild(i);
+      }
+    }
+    this.store.updateBodyValues({ fontFamily: o });
+  }
+  render() {
+    const e = this.store.getBodyValues();
+    return d`
+      ${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) => d`
+            <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)}>
+          <optgroup label="System Fonts">
+            ${he.filter((t) => !t.url).map((t) => d`<option value=${t.value} ?selected=${e.fontFamily?.value === t.value}>${t.label}</option>`)}
+          </optgroup>
+          <optgroup label="Google Fonts">
+            ${he.filter((t) => !!t.url).map((t) => d`<option value=${t.value} ?selected=${e.fontFamily?.value === t.value}>${t.label}</option>`)}
+          </optgroup>
+        </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" id="preheader-field">
+        <label class="field-label">Preheader Text</label>
+        <textarea class="input" id="preheader-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 d`
+      <div class="field">
+        <label class="field-label">${e}</label>
+        <div class="color-row">
+          <input class="color-swatch" type="color" .value=${t} @input=${(r) => o(r.target.value)} />
+          <input class="input" type="text" .value=${t} style="flex:1;" @change=${(r) => o(r.target.value)} />
+        </div>
+      </div>
+    `;
+  }
+};
+K.styles = _`
+    :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; }
+    .field.highlight textarea {
+      animation: preheaderPulse 0.6s ease-in-out 4;
+      border-color: #dc2626;
+    }
+    @keyframes preheaderPulse {
+      0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
+      50% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.2); }
+    }
+  `;
+Oe([
+  x({ attribute: !1 })
+], K.prototype, "store", 1);
+K = Oe([
+  S("me-body-settings")
+], K);
+var Nt = Object.defineProperty, Gt = Object.getOwnPropertyDescriptor, le = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? Gt(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 && Nt(t, o, i), i;
+};
+const ze = {
+  text: { label: "Text", tools: ["text", "heading", "paragraph"] },
+  media: { label: "Media", tools: ["image", "video"] },
+  actions: { label: "Actions", tools: ["button", "social", "menu"] },
+  structure: { label: "Structure", tools: ["divider", "html", "timer", "table", "form"] }
+};
+let H = class extends T {
+  constructor() {
+    super(...arguments), this.storeCtrl = new B(this, ["activeTab", "design"]), this.searchQuery = "";
+  }
+  set store(e) {
+    this.storeCtrl.setStore(e);
+  }
+  get store() {
+    return this.storeCtrl.store;
+  }
+  getA11ySeverities() {
+    const e = ve(this.store);
+    return {
+      errors: e.some((t) => t.severity === "error"),
+      warnings: e.some((t) => t.severity === "warning"),
+      infos: e.some((t) => t.severity === "info")
+    };
+  }
+  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;
+    return d`
+      <div class="tabs">
+        <button class="tab ${e === "content" ? "active" : ""}"
+          @click=${() => this.store.setActiveTab("content")}>Elements</button>
+        <button class="tab ${e === "body" ? "active" : ""}"
+          @click=${() => this.store.setActiveTab("body")}>Body</button>
+        <button class="tab ${e === "a11y" ? "active" : ""}"
+          @click=${() => this.store.setActiveTab("a11y")}>A11y${this.renderA11yBadge()}</button>
+      </div>
+
+      ${e === "content" ? this.renderElementsTab() : ""}
+      ${e === "body" ? d`<div class="tab-content" style="padding-top:12px;">${this.renderBodyTab()}</div>` : ""}
+      ${e === "a11y" ? d`<div class="tab-content" style="padding-top:12px;"><me-a11y-checker .store=${this.store} .toolRegistry=${this.toolRegistry}></me-a11y-checker></div>` : ""}
+    `;
+  }
+  renderElementsTab() {
+    const e = this.toolRegistry.getAllMeta(), t = this.searchQuery.toLowerCase().trim(), o = /* @__PURE__ */ new Map();
+    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 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));
+    a.length > 0 && (i = !0);
+    const c = !t || "layout".includes(t) || "row".includes(t) || "column".includes(t);
+    return d`
+      <div class="search-wrap">
+        <input class="search-input"
+          type="text"
+          placeholder="Search elements..."
+          .value=${this.searchQuery}
+          @input=${(l) => {
+      this.searchQuery = l.target.value;
+    }}
+        />
+      </div>
+      <div class="tab-content">
+        ${n.map(
+      (l) => l.tools.length === 0 ? v : d`
+            <div class="category">
+              <div class="category-title">${l.label}</div>
+              <div class="tool-grid">
+                ${l.tools.map((u) => this.renderToolItem(u))}
+              </div>
+            </div>
+          `
+    )}
+        ${a.length > 0 ? d`
+          <div class="category">
+            <div class="category-title">Custom</div>
+            <div class="tool-grid">
+              ${a.map((l) => this.renderToolItem(l))}
+            </div>
+          </div>
+        ` : ""}
+        ${c ? d`
+          <div class="layout-section">
+            <div class="category-title">Rows</div>
+            <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>
+          </div>
+        ` : ""}
+        ${!i && !c ? d`
+          <div class="no-results">No elements match "${this.searchQuery}"</div>
+        ` : ""}
+      </div>
+    `;
+  }
+  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>`;
+  }
+  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>
+        <span>${e.label}</span>
+      </div>
+    `;
+  }
+  renderLayoutOption(e, t) {
+    const o = e.reduce((r, i) => r + i, 0);
+    return d`
+      <div class="layout-item" draggable="true"
+        @click=${() => this.addRowWithLayout(e)}
+        @dragstart=${(r) => this.handleLayoutDragStart(r, e)}
+        title=${t}>
+        ${e.map((r) => d`<div class="layout-col" style="width:${r / o * 100}%;"></div>`)}
+      </div>
+    `;
+  }
+  renderBodyTab() {
+    return d`<me-body-settings .store=${this.store}></me-body-settings>`;
+  }
+};
+H.styles = _`
+    :host {
+      display: flex;
+      flex-direction: column;
+      width: 280px;
+      min-width: 280px;
+      background: #ffffff;
+      border-right: 1px solid var(--me-grey-100);
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      overflow-y: auto;
+      transition: width 200ms ease, min-width 200ms ease;
+      position: relative;
+    }
+    :host(.collapsed) {
+      width: 0; min-width: 0; overflow: hidden; border-right: none;
+    }
+
+    /* ── Tabs ── */
+    .tabs {
+      display: flex;
+      border-bottom: 1px solid var(--me-grey-200);
+      background: #ffffff;
+      flex-shrink: 0;
+    }
+    .tab {
+      flex: 1; padding: 10px 8px; border: none; background: none;
+      cursor: pointer; font-size: 11px; font-weight: 600;
+      text-transform: uppercase; letter-spacing: 0.05em;
+      color: var(--me-grey-500); text-align: center;
+      transition: all 150ms ease; border-bottom: 2px solid transparent;
+    }
+    .tab:hover { color: var(--me-grey-700); background: var(--me-grey-100); }
+    .tab.active { color: var(--me-primary); border-bottom-color: var(--me-primary); }
+
+    /* ── Search ── */
+    .search-wrap {
+      padding: 10px 12px 6px;
+      flex-shrink: 0;
+    }
+    .search-input {
+      width: 100%;
+      border: 1px solid var(--me-grey-200);
+      border-radius: 8px;
+      padding: 6px 10px 6px 30px;
+      font-size: 12px;
+      color: var(--me-grey-700);
+      background: var(--me-grey-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") 10px center no-repeat;
+      outline: none;
+      transition: all 150ms ease;
+      box-sizing: border-box;
+    }
+    .search-input::placeholder { color: var(--me-grey-400); }
+    .search-input:focus {
+      border-color: var(--me-primary);
+      background-color: #fff;
+      box-shadow: 0 0 0 2px rgba(93,118,139,0.15);
+    }
+
+    /* ── Scrollable content ── */
+    .tab-content {
+      padding: 0 12px 16px;
+      flex: 1;
+      overflow-y: auto;
+    }
+
+    /* ── Category groups ── */
+    .category {
+      margin-top: 12px;
+    }
+    .category-title {
+      font-size: 10px;
+      font-weight: 700;
+      text-transform: uppercase;
+      color: var(--me-blue-600);
+      letter-spacing: 0.06em;
+      margin: 0 0 6px 2px;
+      padding: 4px 0;
+      border-bottom: 1px solid var(--me-blue-50);
+    }
+
+    /* ── Tool grid (2 columns) ── */
+    .tool-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 4px;
+    }
+    .tool-item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 8px;
+      border: 1px solid transparent;
+      border-radius: 8px;
+      cursor: grab;
+      background: transparent;
+      transition: all 150ms ease;
+      font-size: 11px;
+      color: var(--me-grey-600);
+    }
+    .tool-item:hover {
+      border-color: var(--me-grey-200);
+      background: var(--me-grey-50);
+    }
+    .tool-item:hover .tool-icon { color: var(--me-primary); }
+    .tool-item:active { cursor: grabbing; background: var(--me-primary-5); }
+    .tool-icon {
+      width: 18px; height: 18px;
+      display: flex; align-items: center; justify-content: center;
+      color: var(--me-grey-400);
+      transition: color 150ms ease;
+      flex-shrink: 0;
+    }
+    .tool-icon svg { width: 18px; height: 18px; }
+
+    /* ── Layout presets ── */
+    .layout-section { margin-top: 14px; }
+    .layout-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      gap: 6px;
+    }
+    .layout-item {
+      display: flex; align-items: center; justify-content: center;
+      gap: 2px; padding: 8px 4px;
+      border: 1px solid var(--me-grey-200); border-radius: 8px;
+      cursor: pointer; background: white;
+      transition: all 150ms ease;
+    }
+    .layout-item:hover { border-color: var(--me-primary); background: var(--me-primary-5); }
+    .layout-item:hover .layout-col { background: var(--me-primary); }
+    .layout-item:active { background: var(--me-primary-10); }
+    .layout-col {
+      height: 18px; background: var(--me-grey-300); border-radius: 2px;
+      transition: background 150ms ease;
+    }
+
+    /* ── A11y tab badge ── */
+    .tab-badge {
+      display: inline-flex;
+      gap: 3px;
+      margin-left: 4px;
+      vertical-align: middle;
+    }
+    .tab-dot {
+      width: 6px; height: 6px; border-radius: 50%;
+    }
+    .tab-dot.error { background: var(--me-danger); }
+    .tab-dot.warning { background: var(--me-warning); }
+    .tab-dot.info { background: var(--me-blue-600); }
+
+    /* ── No results ── */
+    .no-results {
+      text-align: center; color: var(--me-grey-400); font-size: 12px;
+      padding: 24px 0;
+    }
+  `;
+le([
+  x({ attribute: !1 })
+], H.prototype, "store", 1);
+le([
+  x({ attribute: !1 })
+], H.prototype, "toolRegistry", 2);
+le([
+  E()
+], H.prototype, "searchQuery", 2);
+H = le([
+  S("me-editor-sidebar")
+], H);
+function Qt(e, t, o) {
+  const r = e && /^#[0-9a-fA-F]{3,8}$/.test(e) ? e : "#000000";
+  return d`
+    <div class="prop-row">
+      <label class="prop-label">${o}</label>
+      <div class="prop-color">
+        <input class="color-swatch" type="color" .value=${r}
+          @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 Yt(e, t, o, r) {
+  const i = r?.options || [];
+  return d`
+    <div class="prop-row">
+      <label class="prop-label">${o}</label>
+      <select class="prop-input" @change=${(n) => t(n.target.value)}>
+        ${i.map((n) => d`<option value=${n.value} ?selected=${e === n.value}>${n.label}</option>`)}
+      </select>
+    </div>
+  `;
+}
+function Kt(e, t, o) {
+  return d`
+    <div class="prop-row">
+      <label class="prop-label">${o}</label>
+      <div style="display:flex;gap:2px;">
+        ${["left", "center", "right"].map((r) => d`
+          <button
+            style="flex:1;padding:6px;border:1px solid ${e === r ? "#3b82f6" : "#d1d5db"};background:${e === r ? "#eff6ff" : "white"};border-radius:4px;cursor:pointer;font-size:11px;text-transform:capitalize;color:${e === r ? "#3b82f6" : "#6b7280"};"
+            @click=${() => t(r)}
+          >${r}</button>
+        `)}
+      </div>
+    </div>
+  `;
+}
+function Jt(e) {
+  const t = (e || "0px").split(/\s+/).map((s) => parseInt(s) || 0), o = t[0], r = t[1] ?? o, i = t[2] ?? o, n = t[3] ?? r;
+  return [o, r, i, n];
+}
+function Xt(e, t, o, r) {
+  return e === t && t === o && o === r ? `${e}px` : e === o && t === r ? `${e}px ${t}px` : `${e}px ${t}px ${o}px ${r}px`;
+}
+function Zt(e, t, o) {
+  const [r, i, n, s] = Jt(e), a = (l, u, h, g) => t(Xt(l, u, h, g));
+  return d`
+    <div class="prop-row">
+      <label class="prop-label">${o}</label>
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;">
+        ${[
+    { label: "T", val: r, change: (l) => a(l, i, n, s) },
+    { label: "R", val: i, change: (l) => a(r, l, n, s) },
+    { label: "B", val: n, change: (l) => a(r, i, l, s) },
+    { label: "L", val: s, change: (l) => a(r, i, n, l) }
+  ].map((l) => d`
+          <div style="display:flex;align-items:center;gap:4px;">
+            <span style="font-size:10px;color:#9ca3af;width:12px;">${l.label}</span>
+            <input type="number" .value=${l.val} min="0"
+              @change=${(u) => l.change(parseInt(u.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 eo(e, t, o) {
+  return d`
+    <div class="prop-row">
+      <div class="prop-toggle">
+        <input type="checkbox" .checked=${!!e}
+          @change=${(r) => t(r.target.checked)} />
+        <label class="prop-label" style="margin:0;">${o}</label>
+      </div>
+    </div>
+  `;
+}
+function to(e, t, o) {
+  return d`
+    <div class="prop-row">
+      <label class="prop-label">${o}</label>
+      <input class="prop-input" type="text" .value=${e ?? ""}
+        @change=${(r) => t(r.target.value)} />
+    </div>
+  `;
+}
+function oo(e, t, o) {
+  return d`
+    <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=${(r) => t(r.target.value)}
+      ></textarea>
+    </div>
+  `;
+}
+function ro(e, t, o, r) {
+  const i = r?.unit || "px", n = r?.min ?? 0, s = r?.max ?? 100, a = r?.step ?? 0.1, c = parseFloat(e) || 0, l = (u) => {
+    const h = parseFloat(u.target.value) || 0;
+    t(`${h}${i}`);
+  };
+  return d`
+    <div class="prop-row">
+      <label class="prop-label">${o}</label>
+      <div style="display:flex;align-items:center;gap:4px;">
+        <input
+          type="number"
+          .value=${String(c)}
+          min=${n}
+          max=${s}
+          step=${a}
+          @input=${l}
+          style="flex:1;padding:6px 8px;border:1px solid #d1d5db;border-radius:4px;font-size:13px;color:#111827;"
+        />
+        <span style="font-size:12px;color:#9ca3af;min-width:20px;">${i}</span>
+      </div>
+    </div>
+  `;
+}
+var 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--)
+    (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
+  return r && i && io(t, o, i), i;
+};
+let q = class extends T {
+  constructor() {
+    super(...arguments), this.storeCtrl = new B(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, t = e ? this.store.findContent(e) : void 0;
+    if (this.classList.toggle("hidden", !t), !t)
+      return d``;
+    const o = this.toolRegistry.get(t.type);
+    return o ? d`
+      <div class="header">
+        <p class="header-title">${o.label}</p>
+        <p class="header-type">${t.type}</p>
+      </div>
+      ${Object.entries(o.options).map(([, r]) => this.renderGroup(t, r))}
+    ` : d`<div class="no-selection">Unknown tool: ${t.type}</div>`;
+  }
+  renderGroup(e, t) {
+    return d`
+      <div class="group">
+        <div class="group-title">${t.title}</div>
+        <div class="group-body">
+          ${Object.entries(t.options).map(
+      ([o, r]) => this.renderWidget(e, o, r)
+    )}
+        </div>
+      </div>
+    `;
+  }
+  /** Delegate to the correct widget function based on the property's widget type */
+  renderWidget(e, t, o) {
+    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);
+      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);
+      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 "text":
+      default:
+        return to(r, i, o.label);
+    }
+  }
+};
+q.styles = _`
+    :host {
+      display: flex; flex-direction: column; width: 280px; min-width: 280px;
+      background: #fff; border-left: 1px solid var(--me-grey-100);
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      overflow-y: auto;
+      transition: width 200ms ease, min-width 200ms ease, opacity 200ms ease;
+    }
+    :host(.hidden) {
+      width: 0; min-width: 0; opacity: 0; overflow: hidden; border-left: none;
+    }
+
+    /* ── Panel header ── */
+    .header {
+      padding: 10px 12px; border-bottom: 1px solid var(--me-grey-100); background: #fff;
+      flex-shrink: 0;
+    }
+    .header-title {
+      font-size: 12px; font-weight: 700; color: var(--me-grey-900); margin: 0;
+    }
+    .header-type {
+      font-size: 10px; color: var(--me-grey-400); text-transform: uppercase;
+      letter-spacing: 0.03em; margin: 2px 0 0 0;
+    }
+
+    /* ── Empty state ── */
+    .no-selection {
+      display: flex; flex-direction: column; align-items: center; justify-content: center;
+      flex: 1; color: var(--me-grey-400); font-size: 12px; gap: 8px; padding: 40px 16px; text-align: center;
+    }
+
+    /* ── Property groups ── */
+    .group { padding: 0 12px 4px; }
+    .group-title {
+      padding: 8px 0 4px; font-size: 10px; font-weight: 700; color: var(--me-blue-600);
+      cursor: default; user-select: none;
+      display: flex; align-items: center; justify-content: space-between;
+      text-transform: uppercase; letter-spacing: 0.06em;
+      border-bottom: 1px solid var(--me-blue-50);
+      margin-bottom: 8px;
+    }
+    .group-body { display: flex; flex-direction: column; gap: 8px; padding-bottom: 4px; }
+
+    /* ── Property rows ── */
+    .prop-row { margin-bottom: 0; display: flex; flex-direction: column; gap: 4px; }
+    .prop-label {
+      display: block; font-size: 11px; font-weight: 500; color: var(--me-grey-600);
+      letter-spacing: 0.01em;
+    }
+
+    /* ── Inputs & selects ── */
+    .prop-input {
+      width: 100%; padding: 6px 10px; border: 1px solid var(--me-grey-200); border-radius: 8px;
+      font-size: 12px; color: var(--me-grey-700); background: #fff; box-sizing: border-box;
+      transition: border-color 150ms ease, box-shadow 150ms ease;
+    }
+    .prop-input:focus {
+      outline: none; border-color: var(--me-primary);
+      box-shadow: 0 0 0 2px var(--me-primary-30);
+    }
+    select.prop-input {
+      appearance: none; padding-right: 28px;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+      background-repeat: no-repeat; background-position: right 8px center;
+    }
+    textarea.prop-input { min-height: 80px; resize: vertical; font-family: monospace; }
+
+    /* ── Toggle ── */
+    .prop-toggle { display: flex; align-items: center; gap: 8px; }
+
+    /* ── Color picker ── */
+    .prop-color { display: flex; align-items: center; gap: 8px; }
+    .color-swatch {
+      width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--me-grey-200);
+      cursor: pointer; padding: 0; transition: border-color 150ms ease;
+    }
+    .color-swatch:hover { border-color: var(--me-primary); }
+  `;
+we([
+  x({ attribute: !1 })
+], q.prototype, "store", 1);
+we([
+  x({ 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--)
+    (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
+  return r && i && so(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);
+      });
+      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));
+    };
+  }
+  updateA11yState() {
+    this.a11yDebounceTimer && clearTimeout(this.a11yDebounceTimer), this.a11yDebounceTimer = setTimeout(() => {
+      const e = ve(this.store);
+      this.a11yHasErrors = e.some((o) => o.severity === "error"), this.a11yHasWarnings = e.some((o) => o.severity === "warning"), this.a11yHasInfos = e.some((o) => o.severity === "info");
+      const t = /* @__PURE__ */ new Set();
+      for (const o of e)
+        o.elementId && (o.severity === "error" || o.severity === "warning") && t.add(o.elementId);
+      this.store.setA11yIssueIds(t);
+    }, 300);
+  }
+  toggleSidebar() {
+    this.sidebarCollapsed = !this.sidebarCollapsed, this.shadowRoot?.querySelector("me-editor-sidebar")?.classList.toggle("collapsed", this.sidebarCollapsed);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.registerBuiltInTools(), this.applyOptions(), this.setAttribute("tabindex", "0"), this.addEventListener("keydown", this._handleKeydown);
+  }
+  firstUpdated() {
+    this.dragManager = new tt(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 }));
+    }), this.unsubscribe = this.store.subscribeChannels(["design"], () => this.updateA11yState()), this.updateA11yState(), this.dispatchEvent(new CustomEvent("editor:ready", { bubbles: !0, composed: !0 })), this.preloadLazyTools();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.dragManager?.detach(), this.unsubscribe?.(), this.store.events.removeAllListeners(), this.removeEventListener("keydown", this._handleKeydown);
+  }
+  // ----------------------------------------------------------
+  // Public API — public API
+  // ----------------------------------------------------------
+  loadDesign(e) {
+    this.store.loadDesign(e);
+  }
+  /** Load an Unlayer design JSON, converting it to Emabuild format */
+  loadUnlayerDesign(e) {
+    this.store.loadDesign(Pt(e));
+  }
+  saveDesign(e) {
+    e(structuredClone(this.store.getDesign()));
+  }
+  /** Save the design as Unlayer-compatible JSON */
+  saveUnlayerDesign(e) {
+    e(Et(this.store.getDesign()));
+  }
+  exportHtml(e, t) {
+    const o = this.store.getDesign(), r = /* @__PURE__ */ new Set();
+    for (const n of o.body.rows)
+      for (const s of n.columns)
+        for (const a of s.contents)
+          r.add(a.type);
+    const i = Array.from(r).filter((n) => !this.toolRegistry.isLoaded(n)).map((n) => this.toolRegistry.ensureLoaded(n));
+    i.length > 0 ? Promise.all(i).then(() => this.doExport(o, e, t)) : this.doExport(o, e, t);
+  }
+  doExport(e, t, o) {
+    const r = /* @__PURE__ */ new Map();
+    for (const i of this.toolRegistry.getAll())
+      r.set(i.name, (n, s) => i.renderer.renderHtml(n, s));
+    t(It(e, r, o));
+  }
+  async exportHtmlAsync(e) {
+    return new Promise((t) => this.exportHtml(t, e));
+  }
+  registerTool(e) {
+    this.toolRegistry.register(e), this.requestUpdate();
+  }
+  registerPropertyEditor(e, t) {
+  }
+  registerTab(e) {
+  }
+  registerCallback(e, t) {
+    this.callbacks.set(e, t);
+  }
+  setMergeTags(e) {
+    this.store.setMergeTags(e);
+  }
+  undo() {
+    this.store.undo();
+  }
+  redo() {
+    this.store.redo();
+  }
+  setBodyValues(e) {
+    this.store.updateBodyValues(e);
+  }
+  // ----------------------------------------------------------
+  // Internal
+  // ----------------------------------------------------------
+  /**
+   * Preload lazy tools during browser idle time.
+   * Uses requestIdleCallback to avoid blocking the main thread.
+   * Falls back to setTimeout(1000) for browsers without idle callback support.
+   */
+  preloadLazyTools() {
+    const e = window.requestIdleCallback ?? ((t) => setTimeout(t, 1e3));
+    for (const { meta: t } of Ee)
+      e(() => {
+        this.toolRegistry.ensureLoaded(t.name);
+      });
+  }
+  registerBuiltInTools() {
+    for (const e of bt)
+      this.toolRegistry.register(e);
+    for (const { meta: e, loader: t } of Ee)
+      this.toolRegistry.registerLazy(e, t);
+  }
+  applyOptions() {
+    if (this.options.design && this.store.loadDesign(this.options.design), this.options.mergeTags) {
+      const e = this.options.mergeTags, t = Array.isArray(e) ? e : Object.values(e);
+      this.store.setMergeTags(t);
+    }
+  }
+  render() {
+    return d`
+      <me-editor-sidebar
+        .store=${this.store}
+        .toolRegistry=${this.toolRegistry}
+      ></me-editor-sidebar>
+      <button class="sidebar-toggle ${this.sidebarCollapsed ? "collapsed" : ""}"
+        @click=${this.toggleSidebar}
+        title="${this.sidebarCollapsed ? "Show tools" : "Hide tools"}"
+        style="left:${this.sidebarCollapsed ? "10px" : "290px"}">
+        ${this.sidebarCollapsed ? d`<svg viewBox="0 0 24 24"><path d="M13 18l-6-6 6-6"/><path d="M19 18l-6-6 6-6"/></svg>` : d`<svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg>`}
+      </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}
+        </div>
+      ` : v}
+      <me-editor-canvas
+        .store=${this.store}
+        .toolRegistry=${this.toolRegistry}
+      ></me-editor-canvas>
+      <me-property-panel
+        .store=${this.store}
+        .toolRegistry=${this.toolRegistry}
+      ></me-property-panel>
+    `;
+  }
+};
+P.styles = _`
+    :host {
+      /* ── Design tokens ── */
+      --me-primary: #5d768b;
+      --me-primary-dark: #4a6070;
+      --me-primary-5: rgba(93,118,139,0.05);
+      --me-primary-10: rgba(93,118,139,0.1);
+      --me-primary-30: rgba(93,118,139,0.3);
+
+      --me-grey-900: #111827;
+      --me-grey-700: #374151;
+      --me-grey-600: #4b5563;
+      --me-grey-500: #6b7280;
+      --me-grey-400: #9ca3af;
+      --me-grey-300: #d1d5db;
+      --me-grey-200: #e5e7eb;
+      --me-grey-100: #f3f4f6;
+      --me-grey-50: #f9fafb;
+
+      --me-blue-50: #EDF5FF;
+      --me-blue-600: #245A7F;
+
+      --me-danger: #dc2626;
+      --me-warning: #d97706;
+      --me-success: #16a34a;
+
+      --me-radius-sm: 6px;
+      --me-radius: 8px;
+      --me-radius-lg: 10px;
+
+      --me-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --me-transition: 150ms ease;
+
+      /* ── Layout ── */
+      display: flex;
+      width: 100%;
+      height: 100%;
+      flex: 1;
+      min-height: 500px;
+      font-family: var(--me-font);
+      color: var(--me-grey-900);
+      box-sizing: border-box;
+      overflow: hidden;
+      position: relative;
+    }
+    * { box-sizing: border-box; }
+    .sidebar-toggle {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      left: 10px;
+      width: 28px;
+      height: 28px;
+      border-radius: var(--me-radius);
+      border: 1px solid var(--me-grey-200);
+      background: white;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 40;
+      box-shadow: 0 1px 4px rgba(0,0,0,0.08);
+      transition: all var(--me-transition);
+      padding: 0;
+      color: var(--me-grey-500);
+    }
+    .sidebar-toggle:hover {
+      background: var(--me-grey-50);
+      color: var(--me-primary);
+      box-shadow: 0 2px 8px rgba(0,0,0,0.12);
+    }
+    .sidebar-toggle svg {
+      width: 14px;
+      height: 14px;
+      stroke: currentColor;
+      fill: none;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      transition: transform 200ms ease;
+    }
+    .sidebar-toggle.collapsed {
+      width: 20px;
+      height: 20px;
+      border: none;
+      background: transparent;
+      box-shadow: none;
+      color: var(--me-primary);
+      animation: pulse-hint 2s ease-in-out infinite;
+    }
+    .sidebar-toggle.collapsed:hover {
+      background: transparent;
+      color: var(--me-primary-dark);
+      animation: none;
+      transform: translateY(-50%) scale(1.2);
+    }
+    .sidebar-toggle.collapsed svg {
+      width: 22px;
+      height: 22px;
+      transform: rotate(180deg);
+    }
+    @keyframes pulse-hint {
+      0%, 100% { opacity: 0.5; }
+      50% { opacity: 1; }
+    }
+
+    /* ── A11y dots when sidebar collapsed ── */
+    .a11y-dots {
+      position: absolute;
+      left: 14px;
+      top: calc(50% + 18px);
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      z-index: 40;
+    }
+    .a11y-dot {
+      width: 8px; height: 8px; border-radius: 50%;
+    }
+    .a11y-dot.error { background: #dc2626; animation: pulse-e 1.8s ease-in-out infinite; }
+    .a11y-dot.warning { background: #d97706; animation: pulse-w 2.3s ease-in-out infinite; }
+    .a11y-dot.info { background: #5d768b; animation: pulse-i 2.7s ease-in-out infinite; }
+    @keyframes pulse-e {
+      0%, 100% { opacity: 0.4; transform: scale(0.85); }
+      50% { opacity: 1; transform: scale(1.1); }
+    }
+    @keyframes pulse-w {
+      0%, 100% { opacity: 0.35; transform: scale(0.9); }
+      60% { opacity: 1; transform: scale(1.15); }
+    }
+    @keyframes pulse-i {
+      0%, 100% { opacity: 0.3; transform: scale(0.9); }
+      40% { opacity: 0.9; transform: scale(1.05); }
+    }
+  `;
+Q([
+  x({ type: Object })
+], P.prototype, "options", 2);
+Q([
+  E()
+], P.prototype, "sidebarCollapsed", 2);
+Q([
+  E()
+], P.prototype, "a11yHasErrors", 2);
+Q([
+  E()
+], P.prototype, "a11yHasWarnings", 2);
+Q([
+  E()
+], P.prototype, "a11yHasInfos", 2);
+P = Q([
+  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-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-a11y-checker", U);
+const bo = customElements.get("mail-editor") !== void 0;
+export {
+  bo as E,
+  P as M,
+  et as T,
+  Ze as a,
+  N as e,
+  Pt as f,
+  fo as j,
+  p as s,
+  Et as t
+};
+//# sourceMappingURL=index-zy5NbC2E.js.map