@emabuild/core 0.0.8 → 0.1.0

package/dist/index-CZt184D3.js

@@ -0,0 +1,2695 @@
+import { html as c, LitElement as v, css as $ } from "lit";
+import { property as f, customElement as k } from "lit/decorators.js";
+import { unsafeHTML as q } from "lit/directives/unsafe-html.js";
+function lt() {
+  const t = {};
+  return {
+    getCounters() {
+      return { ...t };
+    },
+    setCounters(e) {
+      for (const o of Object.keys(t))
+        delete t[o];
+      Object.assign(t, e);
+    },
+    next(e) {
+      const o = t[e] ?? 0;
+      return t[e] = o + 1, t[e];
+    }
+  };
+}
+class dt {
+  constructor() {
+    this.listeners = /* @__PURE__ */ new Map();
+  }
+  /** Register a listener for an event */
+  on(e, o) {
+    this.listeners.has(e) || this.listeners.set(e, /* @__PURE__ */ new Set()), this.listeners.get(e).add(o);
+  }
+  /** Remove a specific listener */
+  off(e, o) {
+    this.listeners.get(e)?.delete(o);
+  }
+  /** Emit an event with a payload. Errors in listeners are caught and logged. */
+  emit(e, o) {
+    this.listeners.get(e)?.forEach((n) => {
+      try {
+        n(o);
+      } catch (i) {
+        console.error(`[emabuild] Error in "${e}" listener:`, i);
+      }
+    });
+  }
+  /** Remove all listeners, optionally scoped to a single event */
+  removeAllListeners(e) {
+    e ? this.listeners.delete(e) : this.listeners.clear();
+  }
+}
+class ct {
+  constructor(e = 50) {
+    this.undoStack = [], this.redoStack = [], this.maxHistory = e;
+  }
+  /** 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(e) {
+    this.undoStack.push(structuredClone(e)), 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(e) {
+    const o = this.undoStack.pop();
+    if (o)
+      return this.redoStack.push(structuredClone(e)), o;
+  }
+  /** Restore the next state, pushing current state to undo. Returns the restored design or undefined. */
+  redo(e) {
+    const o = this.redoStack.pop();
+    if (o)
+      return this.undoStack.push(structuredClone(e)), o;
+  }
+  /** Clear all history (e.g. when loading a new design) */
+  clear() {
+    this.undoStack = [], this.redoStack = [];
+  }
+}
+function pt() {
+  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 ht(t, e) {
+  const o = t.next("u_row"), n = e.map(() => {
+    const i = t.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: e,
+    columns: n,
+    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 ut(t, e, o = {}) {
+  const n = t.next(`u_content_${e}`), i = `u_content_${e}_${n}`;
+  return {
+    id: i,
+    type: e,
+    values: {
+      containerPadding: "10px",
+      anchor: "",
+      hideDesktop: !1,
+      hideMobile: !1,
+      displayCondition: null,
+      _meta: { htmlID: i, htmlClassNames: `u_content_${e}` },
+      ...o
+    }
+  };
+}
+function U(t, e) {
+  return t.body.rows.find((o) => o.id === e);
+}
+function H(t, e) {
+  for (const o of t.body.rows) {
+    const n = o.columns.find((i) => i.id === e);
+    if (n) return n;
+  }
+}
+function O(t, e) {
+  for (const o of t.body.rows)
+    for (const n of o.columns) {
+      const i = n.contents.find((r) => r.id === e);
+      if (i) return i;
+    }
+}
+function gt(t, e) {
+  for (const o of t.body.rows)
+    for (const n of o.columns)
+      if (n.contents.some((i) => i.id === e)) return n;
+}
+function bt(t, e) {
+  for (const o of t.body.rows)
+    if (o.columns.some((n) => n.id === e)) return o;
+}
+function F(t, e) {
+  return t.body.rows.findIndex((o) => o.id === e);
+}
+class ft {
+  constructor() {
+    this.history = new ct(), this.counterManager = lt(), this.subscribers = /* @__PURE__ */ new Set(), this.channelSubscribers = /* @__PURE__ */ new Map(), this.events = new dt(), this._selectedId = null, this._hoveredId = null, this._viewMode = "desktop", this._activeTab = "content", this.design = pt();
+  }
+  // ── Subscriptions ──────────────────────────────────────────
+  /** Subscribe to ALL state changes (legacy). Returns an unsubscribe function. */
+  subscribe(e) {
+    return this.subscribers.add(e), () => this.subscribers.delete(e);
+  }
+  /**
+   * 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(e, o) {
+    for (const n of e)
+      this.channelSubscribers.has(n) || this.channelSubscribers.set(n, /* @__PURE__ */ new Set()), this.channelSubscribers.get(n).add(o);
+    return () => {
+      for (const n of e)
+        this.channelSubscribers.get(n)?.delete(o);
+    };
+  }
+  /** Notify legacy (all) subscribers */
+  notify() {
+    this.subscribers.forEach((e) => e());
+  }
+  /** Notify only subscribers of specific channels + legacy subscribers */
+  notifyChannels(...e) {
+    const o = /* @__PURE__ */ new Set();
+    for (const n of this.subscribers) o.add(n);
+    for (const n of e) {
+      const i = this.channelSubscribers.get(n);
+      if (i) for (const r of i) o.add(r);
+    }
+    o.forEach((n) => n());
+  }
+  // ── 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 canUndo() {
+    return this.history.canUndo;
+  }
+  get canRedo() {
+    return this.history.canRedo;
+  }
+  // ── Design Loading ─────────────────────────────────────────
+  /** Load a design document, resetting history and selection */
+  loadDesign(e) {
+    this.design = structuredClone(e), 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 e = this.history.undo(this.design);
+    e && (this.design = e, this.counterManager.setCounters(this.design.counters), this.notifyChannels("design"), this.emitUpdate("content_updated"));
+  }
+  redo() {
+    const e = this.history.redo(this.design);
+    e && (this.design = e, this.counterManager.setCounters(this.design.counters), this.notifyChannels("design"), this.emitUpdate("content_updated"));
+  }
+  // ── Selection / UI State ───────────────────────────────────
+  select(e) {
+    this._selectedId = e, this.notifyChannels("selection");
+  }
+  hover(e) {
+    this._hoveredId = e, this.notifyChannels("hover");
+  }
+  setViewMode(e) {
+    this._viewMode = e, this.notifyChannels("viewMode");
+  }
+  setActiveTab(e) {
+    this._activeTab = e, this.notifyChannels("activeTab");
+  }
+  // ── Row Operations ─────────────────────────────────────────
+  /** Add a row at the given index (or at the end) */
+  addRow(e, o) {
+    this.history.push(this.design);
+    const n = this.design.body.rows, i = structuredClone(e);
+    o !== void 0 && o >= 0 && o <= n.length ? n.splice(o, 0, i) : n.push(i), this.syncCounters(), this.notifyChannels("design"), this.emitUpdate("row_added", i);
+  }
+  /** Remove a row by ID */
+  removeRow(e) {
+    const o = F(this.design, e);
+    o !== -1 && (this.history.push(this.design), this.design.body.rows.splice(o, 1), this._selectedId === e && (this._selectedId = null), this.notifyChannels("design"), this.emitUpdate("row_removed"));
+  }
+  /** Move a row from one index to another */
+  moveRow(e, o) {
+    this.history.push(this.design);
+    const n = this.design.body.rows, [i] = n.splice(e, 1);
+    n.splice(o, 0, i), this.notifyChannels("design"), this.emitUpdate("row_reordered");
+  }
+  /** Duplicate a row, assigning fresh IDs to all nested elements */
+  duplicateRow(e) {
+    const o = U(this.design, e);
+    if (!o) return;
+    this.history.push(this.design);
+    const n = structuredClone(o), i = this.counterManager.next("u_row");
+    n.id = `u_row_${i}`, n.values._meta = { htmlID: n.id, htmlClassNames: "u_row" };
+    for (const s of n.columns) {
+      const l = this.counterManager.next("u_column");
+      s.id = `u_column_${l}`, s.values._meta = { htmlID: s.id, htmlClassNames: "u_column" };
+      for (const d of s.contents) {
+        const p = this.counterManager.next(`u_content_${d.type}`);
+        d.id = `u_content_${d.type}_${p}`, d.values._meta = { htmlID: d.id, htmlClassNames: `u_content_${d.type}` };
+      }
+    }
+    const r = F(this.design, e);
+    this.design.body.rows.splice(r + 1, 0, n), this.syncCounters(), this.notifyChannels("design"), this.emitUpdate("row_added", n);
+  }
+  /** Get the index of a row */
+  getRowIndex(e) {
+    return F(this.design, e);
+  }
+  /** Update row-level values */
+  updateRowValues(e, o) {
+    const n = U(this.design, e);
+    n && (this.history.push(this.design), Object.assign(n.values, o), this.notifyChannels("design"), this.emitUpdate("content_updated"));
+  }
+  // ── Column Operations ──────────────────────────────────────
+  /** Update column-level values */
+  updateColumnValues(e, o) {
+    const n = H(this.design, e);
+    n && (this.history.push(this.design), Object.assign(n.values, o), this.notifyChannels("design"), this.emitUpdate("content_updated"));
+  }
+  // ── Content Operations ─────────────────────────────────────
+  /** Add content to a column at the given index */
+  addContent(e, o, n) {
+    const i = H(this.design, e);
+    if (!i) return;
+    this.history.push(this.design);
+    const r = structuredClone(o);
+    n !== void 0 && n >= 0 && n <= i.contents.length ? i.contents.splice(n, 0, r) : i.contents.push(r), this.syncCounters(), this.notifyChannels("design"), this.emitUpdate("content_added", r);
+  }
+  /** Remove a content block by ID */
+  removeContent(e) {
+    for (const o of this.design.body.rows)
+      for (const n of o.columns) {
+        const i = n.contents.findIndex((r) => r.id === e);
+        if (i !== -1) {
+          this.history.push(this.design), n.contents.splice(i, 1), this._selectedId === e && (this._selectedId = null), this.notifyChannels("design"), this.emitUpdate("content_removed");
+          return;
+        }
+      }
+  }
+  /** Update content values by ID */
+  updateContentValues(e, o) {
+    const n = O(this.design, e);
+    n && (this.history.push(this.design), Object.assign(n.values, o), this.notifyChannels("design"), this.emitUpdate("content_updated"));
+  }
+  /** Move a content block to a different column at a given index */
+  moveContent(e, o, n) {
+    const i = O(this.design, e);
+    if (!i) return;
+    this.history.push(this.design);
+    for (const s of this.design.body.rows)
+      for (const l of s.columns) {
+        const d = l.contents.findIndex((p) => p.id === e);
+        if (d !== -1) {
+          l.contents.splice(d, 1);
+          break;
+        }
+      }
+    const r = H(this.design, o);
+    r && r.contents.splice(n, 0, i), this.notifyChannels("design"), this.emitUpdate("content_reordered");
+  }
+  /** Duplicate a content block, inserting the copy right after the original */
+  duplicateContent(e) {
+    const o = O(this.design, e);
+    if (o)
+      for (const n of this.design.body.rows)
+        for (const i of n.columns) {
+          const r = i.contents.findIndex((s) => s.id === e);
+          if (r !== -1) {
+            this.history.push(this.design);
+            const s = structuredClone(o), l = this.counterManager.next(`u_content_${o.type}`);
+            s.id = `u_content_${o.type}_${l}`, s.values._meta = { htmlID: s.id, htmlClassNames: `u_content_${o.type}` }, i.contents.splice(r + 1, 0, s), this.syncCounters(), this.notifyChannels("design"), this.emitUpdate("content_added", s);
+            return;
+          }
+        }
+  }
+  // ── Body Values ────────────────────────────────────────────
+  /** Update body-level values (background, fonts, etc.) */
+  updateBodyValues(e) {
+    this.history.push(this.design), Object.assign(this.design.body.values, e), this.notifyChannels("design"), this.emitUpdate("body_updated");
+  }
+  // ── Lookups (delegate to design-lookup) ────────────────────
+  findRow(e) {
+    return U(this.design, e);
+  }
+  findColumn(e) {
+    return H(this.design, e);
+  }
+  findContent(e) {
+    return O(this.design, e);
+  }
+  findParentColumn(e) {
+    return gt(this.design, e);
+  }
+  findParentRow(e) {
+    return bt(this.design, e);
+  }
+  // ── Factory Methods (delegate to design-factory) ───────────
+  /** Create a new row with the given column layout */
+  createRow(e) {
+    const o = ht(this.counterManager, e);
+    return this.syncCounters(), o;
+  }
+  /** Create a new content block for the given tool type */
+  createContent(e, o = {}) {
+    const n = ut(this.counterManager, e, o);
+    return this.syncCounters(), n;
+  }
+  // ── Private Helpers ────────────────────────────────────────
+  syncCounters() {
+    this.design.counters = this.counterManager.getCounters();
+  }
+  emitUpdate(e, o) {
+    this.events.emit("design:updated", { type: e, item: o });
+  }
+}
+class mt {
+  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(e) {
+    this.tools.set(e.name, e), this.lazyLoaders.delete(e.name), this.lazyMeta.delete(e.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(e, o) {
+    this.tools.has(e.name) || (this.lazyMeta.set(e.name, e), this.lazyLoaders.set(e.name, o));
+  }
+  /** Get a tool by name. Returns undefined if not loaded yet (use ensureLoaded for lazy tools). */
+  get(e) {
+    return this.tools.get(e);
+  }
+  /** Check if a tool is registered (eager or lazy) */
+  has(e) {
+    return this.tools.has(e) || this.lazyLoaders.has(e);
+  }
+  /** Check if a tool is fully loaded and ready to render */
+  isLoaded(e) {
+    return this.tools.has(e);
+  }
+  /**
+   * 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(e) {
+    if (this.tools.has(e)) return this.tools.get(e);
+    if (this.loadingPromises.has(e)) return this.loadingPromises.get(e);
+    const o = this.lazyLoaders.get(e);
+    if (!o) return;
+    const n = o().then((i) => (this.tools.set(e, i), this.lazyLoaders.delete(e), this.lazyMeta.delete(e), this.loadingPromises.delete(e), i));
+    return this.loadingPromises.set(e, n), n;
+  }
+  /**
+   * 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((e, o) => (e.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 e = [];
+    for (const o of this.tools.values())
+      e.push({ name: o.name, label: o.label, icon: o.icon, position: o.position });
+    for (const o of this.lazyMeta.values())
+      e.push(o);
+    return e.sort((o, n) => (o.position ?? 0) - (n.position ?? 0));
+  }
+  /** Get default values for a tool. Loads lazily if needed (sync — returns empty if not loaded). */
+  getDefaultValues(e) {
+    const o = this.tools.get(e);
+    if (!o) return {};
+    const n = { ...o.defaultValues };
+    for (const i of Object.values(o.options))
+      for (const [r, s] of Object.entries(i.options))
+        r in n || (n[r] = s.defaultValue);
+    return n;
+  }
+  /** Get property groups for a tool */
+  getPropertyGroups(e) {
+    return this.tools.get(e)?.options ?? {};
+  }
+}
+const E = {
+  /** ID of the content currently being dragged (null if not dragging content) */
+  draggingContentId: null,
+  startContentDrag(t) {
+    this.draggingContentId = t;
+  },
+  reset() {
+    this.draggingContentId = null;
+  }
+};
+function J(t) {
+  const e = document.createElement("div");
+  return Object.assign(e.style, {
+    position: "absolute",
+    left: "0",
+    right: "0",
+    height: "3px",
+    background: t,
+    borderRadius: "2px",
+    pointerEvents: "none",
+    zIndex: "1000",
+    display: "none",
+    boxShadow: `0 0 6px ${t}80`
+  }), e;
+}
+function X(t, e, o, n, i = "4px") {
+  t.parentNode !== e && (t.remove(), e.appendChild(t));
+  const s = (e instanceof ShadowRoot ? e.host : e).getBoundingClientRect();
+  let l;
+  o.length === 0 || n === 0 ? l = o.length === 0 ? 0 : o[0].getBoundingClientRect().top - s.top : n >= o.length ? l = o[o.length - 1].getBoundingClientRect().bottom - s.top : l = o[n].getBoundingClientRect().top - s.top, Object.assign(t.style, {
+    display: "block",
+    top: `${l}px`,
+    left: i,
+    right: i,
+    width: "auto"
+  });
+}
+function M(t) {
+  t && (t.style.display = "none");
+}
+function N(t, e) {
+  const o = (t instanceof ShadowRoot, t.children);
+  for (const n of Array.from(o)) {
+    const i = n;
+    e(i), i.shadowRoot && N(i.shadowRoot, e), i.children?.length && N(i, e);
+  }
+}
+function Q(t, e) {
+  const o = [];
+  return N(t, (n) => {
+    n.matches?.(e) && o.push(n);
+  }), o;
+}
+class xt {
+  constructor(e, o, n) {
+    this.currentDrop = null, this.contentIndicator = null, this.rowIndicator = null, this.onDragOver = (i) => {
+      const r = i.dataTransfer?.types || [], s = r.includes("application/maileditor-tool"), l = r.includes("application/maileditor-layout"), d = r.includes("application/maileditor-content") || !!E.draggingContentId;
+      !s && !d && !l || (i.preventDefault(), i.dataTransfer.dropEffect = s || l ? "copy" : "move", l ? (this.currentDrop = this.findRowDropTarget(i.clientY), M(this.contentIndicator), this.showRowIndicator()) : (this.currentDrop = this.findContentDropTarget(i.clientX, i.clientY), M(this.rowIndicator), this.showContentIndicator()));
+    }, this.onDrop = (i) => {
+      i.preventDefault(), this.hideAllIndicators();
+      const r = this.currentDrop, s = i.dataTransfer?.getData("application/maileditor-layout");
+      if (s) {
+        this.handleLayoutDrop(JSON.parse(s), r), this.reset();
+        return;
+      }
+      const l = i.dataTransfer?.getData("application/maileditor-tool");
+      if (l) {
+        this.handleToolDrop(l, r), this.reset();
+        return;
+      }
+      const d = i.dataTransfer?.getData("application/maileditor-content") || E.draggingContentId;
+      d && this.handleContentDrop(d, r), this.reset();
+    }, this.onDragEnd = () => {
+      this.hideAllIndicators(), this.reset();
+    }, this.onDragLeave = (i) => {
+      const r = i.relatedTarget;
+      (!r || !this.root.contains(r)) && (this.hideAllIndicators(), this.currentDrop = null);
+    }, this.store = e, this.toolRegistry = o, this.root = n;
+  }
+  /** 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 = J("#3b82f6"), this.rowIndicator = J("#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 ──────────────────────────────────────────
+  handleLayoutDrop(e, o = this.currentDrop) {
+    const n = this.store.createRow(e), i = o?.type === "row" ? o.rowIndex : void 0;
+    this.store.addRow(n, i);
+  }
+  async handleToolDrop(e, o) {
+    if (await this.toolRegistry.ensureLoaded(e), o?.type === "content" && o.columnId) {
+      const n = this.toolRegistry.getDefaultValues(e), i = this.store.createContent(e, n);
+      this.store.addContent(o.columnId, i, o.contentIndex), this.store.select(i.id);
+    } else {
+      const n = this.store.createRow([1]);
+      this.store.addRow(n);
+      const i = this.toolRegistry.getDefaultValues(e), r = this.store.createContent(e, i);
+      this.store.addContent(n.columns[0].id, r), this.store.select(r.id);
+    }
+  }
+  handleContentDrop(e, o) {
+    o?.type === "content" && o.columnId && (this.store.moveContent(e, o.columnId, o.contentIndex), this.store.select(e));
+  }
+  // ── Drop Target Detection ─────────────────────────────────
+  findRowDropTarget(e) {
+    const o = this.root.querySelector("me-editor-canvas");
+    if (!o?.shadowRoot) return null;
+    const n = Array.from(o.shadowRoot.querySelectorAll("me-row-renderer"));
+    if (n.length === 0) return { type: "row", rowIndex: 0, y: 0 };
+    let i = Math.abs(e - n[0].getBoundingClientRect().top), r = { type: "row", rowIndex: 0, y: n[0].getBoundingClientRect().top };
+    for (let s = 0; s < n.length; s++) {
+      const l = n[s].getBoundingClientRect().bottom, d = Math.abs(e - l);
+      d < i && (i = d, r = { type: "row", rowIndex: s + 1, y: l });
+    }
+    return r;
+  }
+  findContentDropTarget(e, o) {
+    const n = Q(this.root, "me-column-renderer");
+    let i = null, r = 1 / 0;
+    for (const s of n) {
+      const l = s.dataset.columnId;
+      if (!l || !s.shadowRoot) continue;
+      const d = s.getBoundingClientRect();
+      if (e < d.left || e > d.right) continue;
+      const p = Array.from(s.shadowRoot.querySelectorAll("me-content-renderer"));
+      if (p.length === 0) {
+        const u = Math.abs(o - (d.top + d.height / 2));
+        u < r && (r = u, i = { type: "content", columnId: l, contentIndex: 0, y: d.top + d.height / 2 });
+        continue;
+      }
+      const h = p[0].getBoundingClientRect().top;
+      let g = Math.abs(o - h);
+      g < r && (r = g, i = { type: "content", columnId: l, contentIndex: 0, y: h });
+      for (let u = 0; u < p.length; u++) {
+        const m = p[u].getBoundingClientRect(), x = p[u + 1]?.getBoundingClientRect(), b = x ? (m.bottom + x.top) / 2 : m.bottom;
+        g = Math.abs(o - b), g < r && (r = g, i = { type: "content", columnId: l, contentIndex: u + 1, y: b });
+      }
+    }
+    return i;
+  }
+  // ── Indicator Positioning ──────────────────────────────────
+  showContentIndicator() {
+    if (!this.contentIndicator || !this.currentDrop?.columnId) {
+      M(this.contentIndicator);
+      return;
+    }
+    const o = Q(this.root, "me-column-renderer").find((i) => i.dataset.columnId === this.currentDrop.columnId);
+    if (!o?.shadowRoot) return;
+    const n = Array.from(o.shadowRoot.querySelectorAll("me-content-renderer"));
+    X(this.contentIndicator, o.shadowRoot, n, this.currentDrop.contentIndex ?? 0, "4px");
+  }
+  showRowIndicator() {
+    if (!this.rowIndicator || !this.currentDrop) {
+      M(this.rowIndicator);
+      return;
+    }
+    const e = this.root.querySelector("me-editor-canvas"), o = e?.shadowRoot?.querySelector(".canvas-body");
+    if (!o) return;
+    const n = Array.from(e.shadowRoot.querySelectorAll("me-row-renderer"));
+    X(this.rowIndicator, o, n, this.currentDrop.rowIndex ?? 0, "0");
+  }
+  hideAllIndicators() {
+    M(this.contentIndicator), M(this.rowIndicator);
+  }
+  reset() {
+    this.currentDrop = null, E.reset();
+  }
+}
+function a(t, e, o = "") {
+  const n = t[e];
+  return typeof n == "string" && n !== "" ? n : typeof n == "number" ? String(n) : o;
+}
+function Z(t) {
+  return typeof t == "string" ? t : t && typeof t == "object" && "url" in t && t.url || "";
+}
+function tt(t) {
+  if (t && typeof t == "object") {
+    const e = t;
+    return {
+      width: typeof e.width == "number" ? e.width : void 0,
+      maxWidth: typeof e.maxWidth == "string" ? e.maxWidth : void 0
+    };
+  }
+  return {};
+}
+function yt(t) {
+  const e = t.action;
+  if (e && typeof e == "object") {
+    const o = e.values;
+    return {
+      href: o?.href || "",
+      target: o?.target || "_blank"
+    };
+  }
+  return {
+    href: a(t, "href"),
+    target: a(t, "target", "_blank")
+  };
+}
+function et(t, e = "") {
+  const o = t.text;
+  if (typeof o == "string" && o !== "") return o;
+  const n = t.textJson;
+  if (typeof n == "string")
+    try {
+      const i = JSON.parse(n), r = [], s = (l) => {
+        typeof l.text == "string" && r.push(l.text), l.type === "linebreak" && r.push("<br/>");
+        const d = l.children;
+        d && d.forEach(s);
+      };
+      if (s(i.root || i), r.length > 0) return r.join("");
+    } catch {
+    }
+  return e;
+}
+function se(t, e) {
+  if (typeof t != "string") return e;
+  try {
+    return JSON.parse(t);
+  } catch {
+    return e;
+  }
+}
+function V(t, e) {
+  const { padding: o, align: n = "left", extraTdStyle: i = "" } = e;
+  return `<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
+  <tbody><tr><td style="${`overflow-wrap:break-word;word-break:break-word;padding:${o};font-family:arial,helvetica,sans-serif;${i}`}" align="${n}">
+    ${t}
+  </td></tr></tbody>
+</table>`;
+}
+function wt(t, e, o) {
+  const { bgColor: n, textColor: i, fontSize: r, fontWeight: s, borderRadius: l } = o, d = parseInt(l) || 0;
+  if (d <= 0) return "";
+  const p = Math.round(d / 20 * 100);
+  return `<!--[if mso]>
+  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${e}" style="height:auto;v-text-anchor:middle;width:auto;" arcsize="${p}%" stroke="f" fillcolor="${n}">
+    <w:anchorlock/>
+    <center style="color:${i};font-family:arial,helvetica,sans-serif;font-size:${r};font-weight:${s};">${t}</center>
+  </v:roundrect>
+  <![endif]-->`;
+}
+const vt = {
+  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: {
+          label: "Line Height",
+          defaultValue: "140%",
+          widget: "dropdown",
+          widgetParams: { options: [
+            { label: "100%", value: "100%" },
+            { label: "120%", value: "120%" },
+            { label: "140%", value: "140%" },
+            { label: "160%", value: "160%" },
+            { label: "180%", value: "180%" },
+            { label: "200%", value: "200%" }
+          ] }
+        }
+      }
+    },
+    spacing: {
+      title: "Spacing",
+      options: {
+        containerPadding: { label: "Padding", defaultValue: "10px", widget: "padding" }
+      }
+    },
+    general: {
+      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" }
+      }
+    }
+  },
+  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(t) {
+      const e = a(t, "containerPadding", "10px"), o = a(t, "backgroundColor", "transparent"), n = a(t, "color", "inherit"), i = a(t, "lineHeight", "140%"), r = a(t, "text");
+      return c`
+        <div style="padding:${e};background-color:${o};color:${n};line-height:${i};word-break:break-word;">
+          ${q(r)}
+        </div>
+      `;
+    },
+    renderHtml(t) {
+      const e = a(t, "containerPadding", "10px"), o = a(t, "backgroundColor"), n = a(t, "color", "#000000"), i = a(t, "lineHeight", "140%"), r = a(t, "textAlign", "left"), s = a(t, "text"), l = o ? `background-color:${o};` : "", d = `<div style="font-size:14px;color:${n};line-height:${i};text-align:${r};word-wrap:break-word;">${s}</div>`;
+      return V(d, { padding: e, extraTdStyle: l });
+    }
+  }
+}, $t = {
+  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: [
+            { 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" }
+          ] }
+        },
+        color: { label: "Text Color", defaultValue: "#000000", widget: "color_picker" },
+        textAlign: { label: "Text Align", defaultValue: "left", widget: "alignment" },
+        fontWeight: {
+          label: "Font Weight",
+          defaultValue: "700",
+          widget: "dropdown",
+          widgetParams: { options: [
+            { label: "Normal", value: "400" },
+            { label: "Medium", value: "500" },
+            { label: "Semi Bold", value: "600" },
+            { label: "Bold", value: "700" },
+            { label: "Extra Bold", value: "800" }
+          ] }
+        },
+        lineHeight: {
+          label: "Line Height",
+          defaultValue: "140%",
+          widget: "dropdown",
+          widgetParams: { options: [
+            { label: "100%", value: "100%" },
+            { label: "120%", value: "120%" },
+            { label: "140%", value: "140%" },
+            { label: "160%", value: "160%" },
+            { label: "180%", value: "180%" },
+            { label: "200%", value: "200%" }
+          ] }
+        },
+        letterSpacing: { label: "Letter Spacing", defaultValue: "normal", widget: "text" }
+      }
+    },
+    spacing: {
+      title: "Spacing",
+      options: {
+        containerPadding: { label: "Padding", defaultValue: "10px", widget: "padding" }
+      }
+    },
+    general: {
+      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" }
+      }
+    }
+  },
+  defaultValues: {
+    text: "Heading",
+    headingType: "h1",
+    fontSize: "22px",
+    color: "#000000",
+    textAlign: "left",
+    fontWeight: "700",
+    lineHeight: "140%",
+    letterSpacing: "normal",
+    containerPadding: "10px"
+  },
+  renderer: {
+    renderEditor(t) {
+      const e = a(t, "containerPadding", "10px"), o = a(t, "fontSize", "22px"), n = a(t, "color", "#000000"), i = a(t, "textAlign", "left"), r = a(t, "fontWeight", "700"), s = a(t, "lineHeight", "140%"), l = et(t, "Heading");
+      return c`
+        <div style="padding:${e};font-size:${o};color:${n};text-align:${i};font-weight:${r};line-height:${s};">
+          ${l}
+        </div>
+      `;
+    },
+    renderHtml(t) {
+      const e = a(t, "containerPadding", "10px"), o = a(t, "fontSize", "22px"), n = a(t, "color", "#000000"), i = a(t, "textAlign", "left"), r = a(t, "fontWeight", "700"), s = a(t, "lineHeight", "140%"), l = a(t, "letterSpacing", "normal"), d = a(t, "headingType", "h1"), p = et(t, "Heading"), h = `<${d} style="margin:0;font-size:${o};color:${n};text-align:${i};font-weight:${r};line-height:${s};letter-spacing:${l};">${p}</${d}>`;
+      return V(h, { padding: e });
+    }
+  }
+}, kt = {
+  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: {
+      title: "Spacing",
+      options: {
+        containerPadding: { label: "Padding", defaultValue: "10px", widget: "padding" }
+      }
+    }
+  },
+  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(t) {
+      const e = a(t, "containerPadding", "10px"), o = a(t, "color", "#374151"), n = a(t, "lineHeight", "160%");
+      return c`<div style="padding:${e};color:${o};line-height:${n};word-break:break-word;">${q(a(t, "text"))}</div>`;
+    },
+    renderHtml(t) {
+      const e = a(t, "containerPadding", "10px"), o = a(t, "color", "#374151"), n = a(t, "lineHeight", "160%"), i = a(t, "textAlign", "left"), r = a(t, "letterSpacing", "normal"), s = `<div style="font-size:14px;color:${o};line-height:${n};text-align:${i};letter-spacing:${r};word-wrap:break-word;">${a(t, "text")}</div>`;
+      return V(s, { padding: e });
+    }
+  }
+}, Ct = {
+  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: {
+      title: "Spacing",
+      options: { containerPadding: { label: "Padding", defaultValue: "10px", widget: "padding" } }
+    },
+    general: {
+      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" }
+      }
+    }
+  },
+  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(t) {
+      const e = a(t, "containerPadding", "10px"), o = Z(t.src), n = a(t, "alt"), r = tt(t.src).maxWidth || a(t, "width", "100%"), s = a(t, "borderRadius", "0px"), l = a(t, "textAlign", a(t, "align", "center"));
+      return o ? c`<div style="padding:${e};text-align:${l};"><img src=${o} alt=${n} style="display:inline-block;max-width:100%;width:${r};border-radius:${s};border:0;" /></div>` : c`<div style="padding:${e};text-align:${l};"><div style="background:#f1f5f9;border:2px dashed #cbd5e1;border-radius:8px;padding:40px 20px;text-align:center;color:#94a3b8;font-size:13px;">No image set. Enter a URL in the property panel.</div></div>`;
+    },
+    renderHtml(t, e) {
+      const o = a(t, "containerPadding", "10px"), n = Z(t.src), i = a(t, "alt"), r = yt(t), l = tt(t.src).maxWidth || a(t, "width", "100%"), d = a(t, "borderRadius", "0px"), p = a(t, "textAlign", a(t, "align", "center")), h = l === "100%" ? e.columnWidth : parseInt(l) || e.columnWidth, g = d !== "0px" ? `border-radius:${d};` : "", u = `<img align="${p}" border="0" src="${n}" alt="${i}" title="${i}" style="outline:none;text-decoration:none;clear:both;display:inline-block!important;border:none;height:auto;float:none;width:${l};max-width:${h}px;${g}" width="${h}" />`, m = r.href ? `<a href="${r.href}" target="${r.target}" style="text-decoration:none;">${u}</a>` : u;
+      return V(m, { padding: o, align: p });
+    }
+  }
+}, _t = {
+  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: [
+            { label: "12px", value: "12px" },
+            { label: "13px", value: "13px" },
+            { label: "14px", value: "14px" },
+            { label: "16px", value: "16px" },
+            { label: "18px", value: "18px" },
+            { label: "20px", value: "20px" }
+          ] }
+        },
+        fontWeight: {
+          label: "Font Weight",
+          defaultValue: "700",
+          widget: "dropdown",
+          widgetParams: { options: [{ label: "Normal", value: "400" }, { label: "Bold", value: "700" }] }
+        },
+        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: {
+      title: "Spacing",
+      options: { containerPadding: { label: "Padding", defaultValue: "10px", widget: "padding" } }
+    },
+    general: {
+      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" }
+      }
+    }
+  },
+  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(t) {
+      const e = a(t, "containerPadding", "10px"), o = a(t, "backgroundColor", "#3b82f6"), n = a(t, "textColor", "#ffffff"), i = a(t, "fontSize", "14px"), r = a(t, "fontWeight", "700"), s = a(t, "borderRadius", "4px"), l = a(t, "buttonPadding", "10px 20px"), d = a(t, "text", "Click Me"), p = a(t, "textAlign", "center"), h = a(t, "buttonWidth", "auto"), g = a(t, "borderWidth", "0px"), u = a(t, "borderColor", o), m = g !== "0px" ? `border:${g} solid ${u};` : "border:none;", x = h === "auto" ? "display:inline-block;" : `display:block;width:${h};`;
+      return c`
+        <div style="padding:${e};text-align:${p};">
+          <a style="${x}background-color:${o};color:${n};font-size:${i};font-weight:${r};border-radius:${s};padding:${l};text-decoration:none;text-align:center;${m}cursor:pointer;font-family:arial,helvetica,sans-serif;box-sizing:border-box;">${d}</a>
+        </div>
+      `;
+    },
+    renderHtml(t) {
+      const e = a(t, "containerPadding", "10px"), o = a(t, "backgroundColor", "#3b82f6"), n = a(t, "textColor", "#ffffff"), i = a(t, "fontSize", "14px"), r = a(t, "fontWeight", "700"), s = a(t, "borderRadius", "4px"), l = a(t, "buttonPadding", "10px 20px"), d = a(t, "text", "Click Me"), p = a(t, "textAlign", "center"), h = a(t, "href", "#"), g = a(t, "target", "_blank"), u = a(t, "borderWidth", "0px"), m = a(t, "borderColor", o), x = u !== "0px" ? `border:${u} solid ${m};` : "border:none;", b = wt(d, h, { bgColor: o, textColor: n, fontSize: i, fontWeight: r, borderRadius: s }), y = b ? `${b}
+  <!--[if !mso]><!-->` : "<!--[if !mso]><!-->", z = `<div align="${p}">
+      ${y}
+      <a href="${h}" target="${g}" style="box-sizing:border-box;display:inline-block;text-decoration:none;text-align:center;color:${n};background-color:${o};border-radius:${s};font-size:${i};font-weight:${r};padding:${l};font-family:arial,helvetica,sans-serif;${x}mso-border-alt:none;word-break:keep-all;"><span style="line-height:120%;">${d}</span></a>
+      <!--<![endif]-->
+    </div>`;
+      return V(z, { padding: e, align: p });
+    }
+  }
+}, Dt = {
+  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: {
+      title: "Spacing",
+      options: { containerPadding: { label: "Padding", defaultValue: "10px", widget: "padding" } }
+    },
+    general: {
+      title: "General",
+      options: {
+        hideDesktop: { label: "Hide on Desktop", defaultValue: !1, widget: "toggle" },
+        hideMobile: { label: "Hide on Mobile", defaultValue: !1, widget: "toggle" }
+      }
+    }
+  },
+  defaultValues: {
+    borderTopWidth: "1px",
+    borderTopStyle: "solid",
+    borderTopColor: "#cccccc",
+    width: "100%",
+    containerPadding: "10px"
+  },
+  renderer: {
+    renderEditor(t) {
+      const e = a(t, "containerPadding", "10px"), o = a(t, "width", "100%"), n = `${a(t, "borderTopWidth", "1px")} ${a(t, "borderTopStyle", "solid")} ${a(t, "borderTopColor", "#cccccc")}`;
+      return c`<div style="padding:${e};"><div style="border-top:${n};width:${o};margin:0 auto;"></div></div>`;
+    },
+    renderHtml(t) {
+      const e = a(t, "containerPadding", "10px"), o = a(t, "width", "100%"), n = `${a(t, "borderTopWidth", "1px")} ${a(t, "borderTopStyle", "solid")} ${a(t, "borderTopColor", "#cccccc")}`, i = `<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="${o}" style="border-collapse:collapse;border-top:${n};"><tbody><tr><td style="font-size:0;line-height:0;">&nbsp;</td></tr></tbody></table>`;
+      return V(i, { padding: e, align: "center" });
+    }
+  }
+}, St = [
+  vt,
+  $t,
+  kt,
+  Ct,
+  _t,
+  Dt
+], ot = [
+  {
+    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-Be4HAhoj.js").then((t) => t.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-bc46FNgk.js").then((t) => t.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-HPxxeiRV.js").then((t) => t.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-CPjCWbTX.js").then((t) => t.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-GPhdsvRE.js").then((t) => t.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-LzRcAPFb.js").then((t) => t.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-DSXsWpjQ.js").then((t) => t.formTool)
+  }
+];
+function Rt(t, e, o) {
+  const n = o.backgroundColor || "#e7e7e7", i = o.contentWidth || "600px", r = o.fontFamily?.value || "arial,helvetica,sans-serif", s = o.textColor || "#000000", l = o.preheaderText || "", d = l ? `<div style="display:none;font-size:1px;color:${n};line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">${l}${"&zwnj;&nbsp;".repeat(80)}</div>` : "";
+  return `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+<head>
+  <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: ${r} !important; }
+  </style>
+  <![endif]-->
+  <!--[if !mso]><!-->
+  <style type="text/css">
+    ${e}
+  </style>
+  <!--<![endif]-->
+  <style type="text/css">
+    body { margin: 0; padding: 0; }
+    table, tr, td { vertical-align: top; border-collapse: collapse; }
+    p { margin: 0; }
+    .ie-container table, .mso-container table { table-layout: fixed; }
+    * { line-height: inherit; }
+    a[x-apple-data-detectors='true'] { color: inherit !important; text-decoration: none !important; }
+  </style>
+</head>
+<body class="clean-body u_body" style="margin:0;padding:0;-webkit-text-size-adjust:100%;background-color:${n};color:${s};">
+  ${d}
+  <table id="u_body" style="border-collapse:collapse;table-layout:fixed;border-spacing:0;mso-table-lspace:0pt;mso-table-rspace:0pt;vertical-align:top;min-width:320px;margin:0 auto;background-color:${n};width:100%;" cellpadding="0" cellspacing="0" border="0">
+    <tbody>
+      <tr style="vertical-align:top;">
+        <td style="word-break:break-word;border-collapse:collapse !important;vertical-align:top;">
+          <!--[if (mso)|(IE)]><table width="${parseInt(i)}" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
+          ${t}
+          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</body>
+</html>`;
+}
+function Mt(t, e, o) {
+  const n = parseInt(e.contentWidth || "600"), i = t.values.backgroundColor || "", r = t.values.columnsBackgroundColor || "", s = t.values.padding || "0px", l = t.cells.reduce((b, y) => b + y, 0), d = i ? `background-color:${i};` : "", p = t.values.backgroundImage?.url ? `background-image:url('${t.values.backgroundImage.url}');background-repeat:${t.values.backgroundImage.repeat ? "repeat" : "no-repeat"};background-position:center top;background-size:${t.values.backgroundImage.cover ? "cover" : "auto"};` : "", h = t.columns.map((b, y) => {
+    const R = Math.round(t.cells[y] / l * n);
+    return nt(b, R, r, e, o);
+  }), g = t.columns.length > 1;
+  let u;
+  if (g) {
+    const b = t.columns.map((y, R) => {
+      const z = Math.round(t.cells[R] / l * n), at = nt(y, z, r, e, o);
+      return `<!--[if (mso)|(IE)]><td align="center" width="${z}" style="width:${z}px;padding:0px;border:none;" valign="top"><![endif]-->
+${at}
+<!--[if (mso)|(IE)]></td><![endif]-->`;
+    });
+    u = `<!--[if (mso)|(IE)]><table role="presentation" width="${n}" cellpadding="0" cellspacing="0" border="0"><tr>${b.join(`
+`)}</tr></table><![endif]-->
+
+<!--[if !mso]><!-->
+<div style="max-width:${n}px;margin:0 auto;">
+${h.join(`
+`)}
+</div>
+<!--<![endif]-->`;
+  } else
+    u = h.join(`
+`);
+  const m = t.values.hideDesktop ? " u_hide_desktop" : "", x = t.values.hideMobile ? " u_hide_mobile" : "";
+  return `<div class="u_row${m}${x}" style="padding:${s};${d}${p}">
+  <div style="margin:0 auto;min-width:320px;max-width:${n}px;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;background-color:transparent;">
+    <div style="border-collapse:collapse;display:table;width:100%;height:100%;background-color:transparent;">
+      ${u}
+    </div>
+  </div>
+</div>`;
+}
+function nt(t, e, o, n, i) {
+  const r = t.values.backgroundColor || o || "", s = t.values.padding || "0px", l = t.values.borderRadius || "0px", d = r ? `background-color:${r};` : "", p = t.contents.map((h) => {
+    const g = i.get(h.type);
+    if (!g) return `<!-- unknown tool: ${h.type} -->`;
+    const u = {
+      columnWidth: e,
+      displayMode: "email",
+      contentWidth: parseInt(n.contentWidth || "600"),
+      bodyValues: n
+    };
+    let m = g(h.values, u);
+    const x = !!h.values.hideDesktop, b = !!h.values.hideMobile;
+    return (x || b) && (m = `<div class="${[x && "u_hide_desktop", b && "u_hide_mobile"].filter(Boolean).join(" ")}">${m}</div>`), m;
+  }).join(`
+`);
+  return `<div class="u_column" style="max-width:${e}px;min-width:${Math.min(e, 320)}px;display:table-cell;vertical-align:top;">
+  <div style="height:100%;width:100% !important;border-radius:${l};-webkit-border-radius:${l};${d}">
+    <div style="box-sizing:border-box;height:100%;padding:${s};border:none;border-radius:${l};-webkit-border-radius:${l};">
+      ${p || '<!--[if (!mso)&(!IE)]><!--><div style="height:0;min-height:1px;font-size:0;">&nbsp;</div><!--<![endif]-->'}
+    </div>
+  </div>
+</div>`;
+}
+function It(t) {
+  return `
+@media only screen and (min-width: ${t + 20}px) {
+  .u_row .u_column { display: table-cell; }
+}
+
+@media only screen and (max-width: ${t + 20}px) {
+  .u_row .u_column {
+    display: block !important;
+    width: 100% !important;
+    min-width: 320px !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: ${t + 20}px) {
+  .u_hide_desktop { display: block !important; }
+  .u_hide_mobile { display: none !important; }
+}
+
+@media only screen and (min-width: ${t + 21}px) {
+  .u_hide_desktop { display: none !important; }
+  .u_hide_mobile { display: block !important; }
+}`;
+}
+function Tt(t, e, o) {
+  const n = t.body.values, i = parseInt(n.contentWidth || "600"), r = t.body.rows.map((g) => Mt(g, n, e)).join(`
+`), s = It(i);
+  let l = Rt(r, s, n);
+  if (o?.mergeTags)
+    for (const [g, u] of Object.entries(o.mergeTags))
+      l = l.replaceAll(`{{${g}}}`, u);
+  const d = l.match(/<body[^>]*>([\s\S]*)<\/body>/i), p = l.match(/<style[^>]*>([\s\S]*?)<\/style>/gi), h = [];
+  return n.fontFamily?.url && h.push(n.fontFamily.url), {
+    design: structuredClone(t),
+    html: l,
+    chunks: {
+      body: d?.[1] ?? r,
+      css: p?.map((g) => g.replace(/<\/?style[^>]*>/gi, "")).join(`
+`) ?? s,
+      fonts: h,
+      js: ""
+    }
+  };
+}
+class S {
+  /**
+   * @param host - The Lit component that owns this controller
+   * @param channels - Which store channels to subscribe to
+   */
+  constructor(e, o) {
+    this.store = null, this.host = e, this.channels = o, e.addController(this);
+  }
+  /** Set or change the store reference. Re-subscribes automatically. */
+  setStore(e) {
+    this.store !== e && (this.unsub?.(), this.store = e, 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 Pt = Object.defineProperty, Vt = Object.getOwnPropertyDescriptor, j = (t, e, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? Vt(e, o) : e, r = t.length - 1, s; r >= 0; r--)
+    (s = t[r]) && (i = (n ? s(e, o, i) : s(i)) || i);
+  return n && i && Pt(e, o, i), i;
+};
+let _ = class extends v {
+  constructor() {
+    super(...arguments), this.storeCtrl = new S(this, ["design", "selection", "hover", "viewMode"]), this._onDragStart = (t) => {
+      t.dataTransfer.setData("application/maileditor-content", this.content.id), t.dataTransfer.effectAllowed = "move", this.style.opacity = "0.4", E.startContentDrag(this.content.id);
+    }, this._onDragEnd = () => {
+      this.style.opacity = "1", E.reset();
+    };
+  }
+  set store(t) {
+    this.storeCtrl.setStore(t);
+  }
+  get store() {
+    return this.storeCtrl.store;
+  }
+  handleClick(t) {
+    t.stopPropagation(), this.store.select(this.content.id);
+  }
+  handleMouseEnter() {
+    this.store.hover(this.content.id);
+  }
+  handleMouseLeave() {
+    this.store.hover(null);
+  }
+  handleDelete(t) {
+    t.stopPropagation(), this.store.removeContent(this.content.id);
+  }
+  handleDuplicate(t) {
+    t.stopPropagation(), this.store.duplicateContent(this.content.id);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("dragstart", this._onDragStart), this.addEventListener("dragend", this._onDragEnd);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("dragstart", this._onDragStart), this.removeEventListener("dragend", this._onDragEnd);
+  }
+  render() {
+    if (!this.store) return c``;
+    const t = this.store.selectedId === this.content.id, e = this.store.hoveredId === this.content.id, o = this.store.viewMode, n = !!this.content.values.hideDesktop, i = !!this.content.values.hideMobile, r = o === "desktop" && n || o === "mobile" && i;
+    this.classList.toggle("selected", t), this.classList.toggle("hovered", e), this.classList.toggle("hidden-in-view", r), this.setAttribute("draggable", "true"), this.dataset.contentId = this.content.id;
+    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()), c`<div style="padding:16px;text-align:center;color:#9ca3af;font-size:13px;font-family:sans-serif;">Loading ${this.content.type}...</div>`;
+    const l = s?.renderer.renderEditor(this.content.values, {
+      isSelected: t,
+      isHovered: e,
+      columnWidth: 600,
+      displayMode: "email"
+    });
+    return c`
+      ${r ? c`<div class="hidden-badge">${n ? "Hidden on desktop" : i ? "Hidden on mobile" : ""}</div>` : ""}
+      <div class="action-bar">
+        <button class="action-btn" @click=${this.handleDuplicate} title="Duplicate">&#9851;</button>
+        <button class="action-btn" @click=${this.handleDelete} title="Delete">&#10005;</button>
+      </div>
+      <div class="content-wrapper" @click=${this.handleClick}
+        @mouseenter=${this.handleMouseEnter} @mouseleave=${this.handleMouseLeave}>
+        ${l ?? c`<div style="padding:10px;color:#999;font-style:italic;">Unknown tool: ${this.content.type}</div>`}
+      </div>
+    `;
+  }
+};
+_.styles = $`
+    :host {
+      display: block; position: relative; cursor: pointer;
+      transition: outline 0.15s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
+    }
+    :host(.selected) { outline: 2px solid #3b82f6; outline-offset: -1px; }
+    :host(.hovered:not(.selected)) { outline: 2px dashed #93c5fd; outline-offset: -1px; }
+    :host(.just-dropped) {
+      animation: dropIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+    :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); }
+    }
+    .action-bar {
+      display: none; position: absolute; top: -28px; right: 4px;
+      background: #3b82f6; border-radius: 4px; padding: 2px; gap: 2px; z-index: 10;
+    }
+    :host(.selected) .action-bar { display: flex; }
+    .action-btn {
+      background: none; border: none; color: white; cursor: pointer;
+      padding: 2px 6px; font-size: 12px; line-height: 1; border-radius: 2px;
+    }
+    .action-btn:hover { background: rgba(255,255,255,0.2); }
+    .content-wrapper { position: relative; }
+  `;
+j([
+  f({ attribute: !1 })
+], _.prototype, "content", 2);
+j([
+  f({ attribute: !1 })
+], _.prototype, "store", 1);
+j([
+  f({ attribute: !1 })
+], _.prototype, "toolRegistry", 2);
+_ = j([
+  k("me-content-renderer")
+], _);
+var zt = Object.defineProperty, Et = Object.getOwnPropertyDescriptor, B = (t, e, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? Et(e, o) : e, r = t.length - 1, s; r >= 0; r--)
+    (s = t[r]) && (i = (n ? s(e, o, i) : s(i)) || i);
+  return n && i && zt(e, o, i), i;
+};
+let w = class extends v {
+  constructor() {
+    super(...arguments), this.storeCtrl = new S(this, ["design"]), this.widthPercent = 100;
+  }
+  set store(t) {
+    this.storeCtrl.setStore(t);
+  }
+  get store() {
+    return this.storeCtrl.store;
+  }
+  render() {
+    const t = this.column.values.padding || "0px", e = this.column.values.backgroundColor || "transparent", o = this.column.contents;
+    return this.dataset.columnId = this.column.id, this.style.width = `${this.widthPercent}%`, this.style.padding = t, this.style.backgroundColor = e, this.style.verticalAlign = "top", this.style.boxSizing = "border-box", o.length === 0 ? c`
+        <div class="empty-column" data-column-id=${this.column.id}>
+          Drag content here
+        </div>
+      ` : c`
+      ${o.map(
+      (n) => c`
+          <me-content-renderer
+            .content=${n}
+            .store=${this.store}
+            .toolRegistry=${this.toolRegistry}
+          ></me-content-renderer>
+        `
+    )}
+    `;
+  }
+};
+w.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;
+    }
+  `;
+B([
+  f({ attribute: !1 })
+], w.prototype, "column", 2);
+B([
+  f({ attribute: !1 })
+], w.prototype, "store", 1);
+B([
+  f({ attribute: !1 })
+], w.prototype, "toolRegistry", 2);
+B([
+  f({ type: Number })
+], w.prototype, "widthPercent", 2);
+w = B([
+  k("me-column-renderer")
+], w);
+var Lt = Object.defineProperty, At = Object.getOwnPropertyDescriptor, W = (t, e, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? At(e, o) : e, r = t.length - 1, s; r >= 0; r--)
+    (s = t[r]) && (i = (n ? s(e, o, i) : s(i)) || i);
+  return n && i && Lt(e, o, i), i;
+};
+let D = class extends v {
+  constructor() {
+    super(...arguments), this.storeCtrl = new S(this, ["design", "viewMode"]);
+  }
+  set store(t) {
+    this.storeCtrl.setStore(t);
+  }
+  get store() {
+    return this.storeCtrl.store;
+  }
+  handleMoveUp(t) {
+    t.stopPropagation();
+    const e = this.store.getRowIndex(this.row.id);
+    e > 0 && this.store.moveRow(e, e - 1);
+  }
+  handleMoveDown(t) {
+    t.stopPropagation();
+    const e = this.store.getRowIndex(this.row.id), o = this.store.getRows().length;
+    e < o - 1 && this.store.moveRow(e, e + 1);
+  }
+  handleDuplicate(t) {
+    t.stopPropagation(), this.store.duplicateRow(this.row.id);
+  }
+  handleDelete(t) {
+    t.stopPropagation(), this.store.removeRow(this.row.id);
+  }
+  render() {
+    if (!this.store) return c``;
+    const { row: t, store: e, toolRegistry: o } = this, n = t.values.backgroundColor || "transparent", i = t.values.columnsBackgroundColor || "transparent", r = t.values.padding || "0px", s = t.cells.reduce((b, y) => b + y, 0), l = t.values.backgroundImage, d = typeof l == "object" && l?.url ? l.url : "", p = d ? `background-image:url('${d}');background-size:${l?.cover ? "cover" : "contain"};background-position:${l?.center ? "center" : "top left"};background-repeat:${l?.repeat ? "repeat" : "no-repeat"};` : "", h = e.viewMode, g = !!t.values.hideDesktop, u = !!t.values.hideMobile, m = h === "desktop" && g || h === "mobile" && u, x = g ? "Hidden on desktop" : u ? "Hidden on mobile" : "";
+    return this.classList.toggle("hidden-in-view", m), this.setAttribute("draggable", "true"), this.dataset.rowId = t.id, c`
+      ${m ? c`<div class="row-hidden-badge">${x}</div>` : ""}
+      <div class="row-actions">
+        <button class="row-action-btn" @click=${this.handleMoveUp} title="Move Up">
+          <svg viewBox="0 0 24 24"><path d="M12 19V5"/><path d="m5 12 7-7 7 7"/></svg>
+        </button>
+        <button class="row-action-btn" @click=${this.handleMoveDown} title="Move Down">
+          <svg viewBox="0 0 24 24"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
+        </button>
+        <button class="row-action-btn" @click=${this.handleDuplicate} title="Duplicate Row">
+          <svg viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+        </button>
+        <button class="row-action-btn danger" @click=${this.handleDelete} title="Delete Row">
+          <svg viewBox="0 0 24 24"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+        </button>
+      </div>
+      <div
+        class="row-wrapper"
+        style="background-color:${n};padding:${r};${p}"
+      >
+        ${t.columns.map((b, y) => {
+      const R = t.cells[y] / s * 100;
+      return c`
+            <me-column-renderer
+              .column=${b}
+              .store=${e}
+              .toolRegistry=${o}
+              .widthPercent=${R}
+              style="background-color:${i};"
+            ></me-column-renderer>
+          `;
+    })}
+      </div>
+    `;
+  }
+};
+D.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 1px #93c5fd;
+    }
+    .row-actions {
+      display: none;
+      position: absolute;
+      right: -36px;
+      top: 50%;
+      transform: translateY(-50%);
+      flex-direction: column;
+      gap: 2px;
+      z-index: 10;
+    }
+    :host(:hover) .row-actions {
+      display: flex;
+    }
+    .row-action-btn {
+      width: 28px;
+      height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #6b7280;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 12px;
+      line-height: 1;
+      transition: background 0.15s ease;
+      padding: 0;
+    }
+    .row-action-btn:hover { background: #3b82f6; }
+    .row-action-btn.danger:hover { background: #ef4444; }
+    .row-action-btn svg {
+      width: 14px;
+      height: 14px;
+      stroke: currentColor;
+      fill: none;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+  `;
+W([
+  f({ attribute: !1 })
+], D.prototype, "row", 2);
+W([
+  f({ attribute: !1 })
+], D.prototype, "store", 1);
+W([
+  f({ attribute: !1 })
+], D.prototype, "toolRegistry", 2);
+D = W([
+  k("me-row-renderer")
+], D);
+var Bt = Object.defineProperty, Ht = Object.getOwnPropertyDescriptor, G = (t, e, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? Ht(e, o) : e, r = t.length - 1, s; r >= 0; r--)
+    (s = t[r]) && (i = (n ? s(e, o, i) : s(i)) || i);
+  return n && i && Bt(e, o, i), i;
+};
+let I = class extends v {
+  constructor() {
+    super(...arguments), this.storeCtrl = new S(this, ["design", "viewMode"]);
+  }
+  set store(t) {
+    this.storeCtrl.setStore(t);
+  }
+  get store() {
+    return this.storeCtrl.store;
+  }
+  handleCanvasClick() {
+    this.store.select(null);
+  }
+  setViewMode(t) {
+    this.store.setViewMode(t);
+  }
+  render() {
+    const t = this.store.getRows(), e = this.store.getBodyValues(), o = e.contentWidth || "600px", n = e.backgroundColor || "#e7e7e7", i = this.store.viewMode;
+    return c`
+      <div class="view-toggle">
+        <button
+          class="view-btn ${i === "desktop" ? "active" : ""}"
+          @click=${() => this.setViewMode("desktop")}
+        >Desktop</button>
+        <button
+          class="view-btn ${i === "mobile" ? "active" : ""}"
+          @click=${() => this.setViewMode("mobile")}
+        >Mobile</button>
+      </div>
+
+      <div
+        class="canvas-body"
+        style="max-width:${i === "mobile" ? "375px" : o};background-color:${n};"
+        @click=${this.handleCanvasClick}
+      >
+        ${t.length === 0 ? c`
+              <div class="empty-canvas">
+                <div class="empty-icon">&#9776;</div>
+                <div>Drag a content block here</div>
+              </div>
+            ` : t.map(
+      (s) => c`
+                <me-row-renderer
+                  .row=${s}
+                  .store=${this.store}
+                  .toolRegistry=${this.toolRegistry}
+                ></me-row-renderer>
+              `
+    )}
+      </div>
+    `;
+  }
+};
+I.styles = $`
+    :host {
+      display: block;
+      flex: 1;
+      overflow-y: auto;
+      background: #f3f4f6;
+      padding: 20px;
+    }
+    .canvas-body {
+      margin: 0 auto;
+      background: #ffffff;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
+      min-height: 200px;
+      position: relative;
+    }
+    .empty-canvas {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      min-height: 300px;
+      color: #9ca3af;
+      font-family: sans-serif;
+      font-size: 14px;
+      gap: 8px;
+    }
+    .empty-icon {
+      font-size: 40px;
+      opacity: 0.4;
+    }
+    .view-toggle {
+      display: flex;
+      justify-content: center;
+      margin-bottom: 12px;
+      gap: 4px;
+    }
+    .view-btn {
+      padding: 6px 16px;
+      border: 1px solid #d1d5db;
+      background: white;
+      cursor: pointer;
+      font-size: 13px;
+      font-family: sans-serif;
+      color: #374151;
+      transition: all 0.15s ease;
+    }
+    .view-btn:first-child { border-radius: 6px 0 0 6px; }
+    .view-btn:last-child { border-radius: 0 6px 6px 0; }
+    .view-btn.active {
+      background: #3b82f6;
+      border-color: #3b82f6;
+      color: white;
+    }
+  `;
+G([
+  f({ attribute: !1 })
+], I.prototype, "store", 1);
+G([
+  f({ attribute: !1 })
+], I.prototype, "toolRegistry", 2);
+I = G([
+  k("me-editor-canvas")
+], I);
+var Ot = Object.defineProperty, jt = Object.getOwnPropertyDescriptor, rt = (t, e, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? jt(e, o) : e, r = t.length - 1, s; r >= 0; r--)
+    (s = t[r]) && (i = (n ? s(e, o, i) : s(i)) || i);
+  return n && i && Ot(e, o, i), i;
+};
+const it = [
+  { label: "Arial", value: "arial,helvetica,sans-serif" },
+  { label: "Helvetica", value: "helvetica,sans-serif" },
+  { label: "Georgia", value: "georgia,serif" },
+  { label: "Times New Roman", value: "'times new roman',times,serif" },
+  { label: "Trebuchet MS", value: "trebuchet ms,helvetica,sans-serif" },
+  { label: "Verdana", value: "verdana,geneva,sans-serif" },
+  { label: "Courier New", value: "'courier new',courier,monospace" }
+];
+let L = class extends v {
+  constructor() {
+    super(...arguments), this.storeCtrl = new S(this, ["design"]);
+  }
+  set store(t) {
+    this.storeCtrl.setStore(t);
+  }
+  get store() {
+    return this.storeCtrl.store;
+  }
+  update_(t, e) {
+    this.store.updateBodyValues({ [t]: e });
+  }
+  updateLinkStyle(t, e) {
+    const o = this.store.getBodyValues().linkStyle;
+    this.store.updateBodyValues({ linkStyle: { ...o, [t]: e } });
+  }
+  updateFontFamily(t) {
+    const e = it.find((o) => o.value === t);
+    this.store.updateBodyValues({ fontFamily: { label: e?.label || t, value: t } });
+  }
+  render() {
+    const t = this.store.getBodyValues();
+    return c`
+      ${this.renderColorField("Background Color", t.backgroundColor || "#e7e7e7", (e) => this.update_("backgroundColor", e))}
+
+      <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(t.contentWidth || "600")} min="320" max="960" step="10"
+          @change=${(e) => this.update_("contentWidth", e.target.value + "px")} />
+      </div>
+      <div class="field">
+        <label class="field-label">Content Align</label>
+        <div class="align-group">
+          ${["left", "center", "right"].map((e) => c`
+            <button class="align-btn ${t.contentAlign === e ? "active" : ""}"
+              @click=${() => this.update_("contentAlign", e)}>${e}</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=${(e) => this.updateFontFamily(e.target.value)}>
+          ${it.map((e) => c`<option value=${e.value} ?selected=${t.fontFamily?.value === e.value}>${e.label}</option>`)}
+        </select>
+      </div>
+      ${this.renderColorField("Text Color", t.textColor || "#000000", (e) => this.update_("textColor", e))}
+
+      <p class="section-title" style="margin-top:16px;">Links</p>
+      ${this.renderColorField("Link Color", t.linkStyle?.linkColor || "#0000ee", (e) => this.updateLinkStyle("linkColor", e))}
+      <div class="field">
+        <label style="display:flex;align-items:center;gap:8px;font-size:12px;color:#6b7280;cursor:pointer;">
+          <input type="checkbox" .checked=${t.linkStyle?.linkUnderline ?? !0}
+            @change=${(e) => this.updateLinkStyle("linkUnderline", e.target.checked)} />
+          Underline Links
+        </label>
+      </div>
+
+      <p class="section-title" style="margin-top:16px;">Email</p>
+      <div class="field">
+        <label class="field-label">Preheader Text</label>
+        <textarea class="input" .value=${t.preheaderText || ""} placeholder="Preview text shown in inbox..."
+          style="min-height:60px;resize:vertical;font-family:inherit;"
+          @change=${(e) => this.update_("preheaderText", e.target.value)}></textarea>
+      </div>
+    `;
+  }
+  /** Reusable color field (swatch + hex input) */
+  renderColorField(t, e, o) {
+    return c`
+      <div class="field">
+        <label class="field-label">${t}</label>
+        <div class="color-row">
+          <input class="color-swatch" type="color" .value=${e} @input=${(n) => o(n.target.value)} />
+          <input class="input" type="text" .value=${e} style="flex:1;" @change=${(n) => o(n.target.value)} />
+        </div>
+      </div>
+    `;
+  }
+};
+L.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; }
+  `;
+rt([
+  f({ attribute: !1 })
+], L.prototype, "store", 1);
+L = rt([
+  k("me-body-settings")
+], L);
+var Wt = Object.defineProperty, Ut = Object.getOwnPropertyDescriptor, Y = (t, e, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? Ut(e, o) : e, r = t.length - 1, s; r >= 0; r--)
+    (s = t[r]) && (i = (n ? s(e, o, i) : s(i)) || i);
+  return n && i && Wt(e, o, i), i;
+};
+let T = class extends v {
+  constructor() {
+    super(...arguments), this.storeCtrl = new S(this, ["activeTab"]);
+  }
+  set store(t) {
+    this.storeCtrl.setStore(t);
+  }
+  get store() {
+    return this.storeCtrl.store;
+  }
+  handleDragStart(t, e) {
+    t.dataTransfer.setData("application/maileditor-tool", e), t.dataTransfer.effectAllowed = "copy";
+  }
+  handleLayoutDragStart(t, e) {
+    t.dataTransfer.setData("application/maileditor-layout", JSON.stringify(e)), t.dataTransfer.effectAllowed = "copy";
+  }
+  addRowWithLayout(t) {
+    const e = this.store.createRow(t);
+    this.store.addRow(e);
+  }
+  render() {
+    const t = this.store.activeTab, e = this.toolRegistry.getAllMeta();
+    return c`
+      <div class="tabs">
+        <button class="tab ${t === "content" ? "active" : ""}" @click=${() => this.store.setActiveTab("content")}>Content</button>
+        <button class="tab ${t === "blocks" ? "active" : ""}" @click=${() => this.store.setActiveTab("blocks")}>Blocks</button>
+        <button class="tab ${t === "body" ? "active" : ""}" @click=${() => this.store.setActiveTab("body")}>Body</button>
+      </div>
+
+      <div class="tab-content">
+        ${t === "content" ? this.renderContentTab(e) : ""}
+        ${t === "blocks" ? this.renderBlocksTab() : ""}
+        ${t === "body" ? this.renderBodyTab() : ""}
+      </div>
+    `;
+  }
+  renderContentTab(t) {
+    return c`
+      <p class="section-title">Content</p>
+      <div class="tool-grid">
+        ${t.map(
+      (e) => c`
+            <div
+              class="tool-item"
+              draggable="true"
+              @dragstart=${(o) => this.handleDragStart(o, e.name)}
+            >
+              <div class="tool-icon">${q(e.icon)}</div>
+              <span>${e.label}</span>
+            </div>
+          `
+    )}
+      </div>
+
+      <p class="section-title" style="margin-top:20px;">Layout</p>
+      <div class="layout-grid">
+        ${this.renderLayoutOption([1], "100%")}
+        ${this.renderLayoutOption([1, 1], "50/50")}
+        ${this.renderLayoutOption([1, 1, 1], "33/33/33")}
+        ${this.renderLayoutOption([2, 1], "66/33")}
+        ${this.renderLayoutOption([1, 2], "33/66")}
+        ${this.renderLayoutOption([1, 1, 1, 1], "25x4")}
+      </div>
+    `;
+  }
+  renderLayoutOption(t, e) {
+    const o = t.reduce((n, i) => n + i, 0);
+    return c`
+      <div
+        class="layout-item"
+        draggable="true"
+        @click=${() => this.addRowWithLayout(t)}
+        @dragstart=${(n) => this.handleLayoutDragStart(n, t)}
+        title=${e}
+      >
+        ${t.map(
+      (n) => c`<div class="layout-col" style="width:${n / o * 100}%;"></div>`
+    )}
+      </div>
+    `;
+  }
+  renderBlocksTab() {
+    return c`
+      <p style="color:#9ca3af;font-size:13px;text-align:center;margin-top:40px;">
+        No saved blocks yet.<br/>Select a row in the editor and save it as a block.
+      </p>
+    `;
+  }
+  renderBodyTab() {
+    return c`<me-body-settings .store=${this.store}></me-body-settings>`;
+  }
+};
+T.styles = $`
+    :host {
+      display: flex;
+      flex-direction: column;
+      width: 280px;
+      min-width: 280px;
+      background: #ffffff;
+      border-right: 1px solid #e5e7eb;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      overflow-y: auto;
+    }
+    .tabs {
+      display: flex;
+      border-bottom: 1px solid #e5e7eb;
+      background: #f9fafb;
+    }
+    .tab {
+      flex: 1;
+      padding: 10px 8px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      font-size: 12px;
+      font-weight: 500;
+      color: #6b7280;
+      text-align: center;
+      transition: all 0.15s ease;
+      border-bottom: 2px solid transparent;
+    }
+    .tab:hover {
+      color: #374151;
+      background: #f3f4f6;
+    }
+    .tab.active {
+      color: #3b82f6;
+      border-bottom-color: #3b82f6;
+    }
+    .tab-content {
+      padding: 12px;
+      flex: 1;
+    }
+    .section-title {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      color: #9ca3af;
+      letter-spacing: 0.05em;
+      margin: 0 0 8px 0;
+    }
+    .tool-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 8px;
+    }
+    .tool-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 6px;
+      padding: 12px 8px;
+      border: 1px solid #e5e7eb;
+      border-radius: 6px;
+      cursor: grab;
+      background: white;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      font-size: 12px;
+      color: #374151;
+    }
+    .tool-item:hover {
+      border-color: #3b82f6;
+      background: #eff6ff;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
+    }
+    .tool-item:hover .tool-icon {
+      transform: scale(1.15);
+    }
+    .tool-item:active {
+      transform: translateY(0px);
+      box-shadow: 0 1px 4px rgba(59, 130, 246, 0.1);
+    }
+    .tool-item:active {
+      cursor: grabbing;
+    }
+    .tool-icon {
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      justify-content: center;
+      color: #6b7280;
+    }
+    .tool-icon svg {
+      width: 20px;
+      height: 20px;
+    }
+    .layout-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      gap: 8px;
+      margin-top: 16px;
+    }
+    .layout-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 2px;
+      padding: 10px 4px;
+      border: 1px solid #e5e7eb;
+      border-radius: 6px;
+      cursor: pointer;
+      background: white;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .layout-item:hover {
+      border-color: #3b82f6;
+      background: #eff6ff;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
+    }
+    .layout-item:hover .layout-col {
+      background: #93c5fd;
+    }
+    .layout-item:active {
+      transform: translateY(0px);
+    }
+    .layout-col {
+      height: 20px;
+      background: #d1d5db;
+      border-radius: 2px;
+      transition: background 0.2s ease;
+    }
+  `;
+Y([
+  f({ attribute: !1 })
+], T.prototype, "store", 1);
+Y([
+  f({ attribute: !1 })
+], T.prototype, "toolRegistry", 2);
+T = Y([
+  k("me-editor-sidebar")
+], T);
+function Ft(t, e, o) {
+  const n = t && /^#[0-9a-fA-F]{3,8}$/.test(t) ? t : "#000000";
+  return c`
+    <div class="prop-row">
+      <label class="prop-label">${o}</label>
+      <div class="prop-color">
+        <input class="color-swatch" type="color" .value=${n}
+          @input=${(i) => e(i.target.value)} />
+        <input class="prop-input" type="text" .value=${t ?? ""} style="flex:1;"
+          @change=${(i) => e(i.target.value)} />
+      </div>
+    </div>
+  `;
+}
+function Nt(t, e, o, n) {
+  const i = n?.options || [];
+  return c`
+    <div class="prop-row">
+      <label class="prop-label">${o}</label>
+      <select class="prop-input" @change=${(r) => e(r.target.value)}>
+        ${i.map((r) => c`<option value=${r.value} ?selected=${t === r.value}>${r.label}</option>`)}
+      </select>
+    </div>
+  `;
+}
+function qt(t, e, o) {
+  return c`
+    <div class="prop-row">
+      <label class="prop-label">${o}</label>
+      <div style="display:flex;gap:2px;">
+        ${["left", "center", "right"].map((n) => c`
+          <button
+            style="flex:1;padding:6px;border:1px solid ${t === n ? "#3b82f6" : "#d1d5db"};background:${t === n ? "#eff6ff" : "white"};border-radius:4px;cursor:pointer;font-size:11px;text-transform:capitalize;color:${t === n ? "#3b82f6" : "#6b7280"};"
+            @click=${() => e(n)}
+          >${n}</button>
+        `)}
+      </div>
+    </div>
+  `;
+}
+function Gt(t) {
+  const e = (t || "0px").split(/\s+/).map((s) => parseInt(s) || 0), o = e[0], n = e[1] ?? o, i = e[2] ?? o, r = e[3] ?? n;
+  return [o, n, i, r];
+}
+function Yt(t, e, o, n) {
+  return t === e && e === o && o === n ? `${t}px` : t === o && e === n ? `${t}px ${e}px` : `${t}px ${e}px ${o}px ${n}px`;
+}
+function Kt(t, e, o) {
+  const [n, i, r, s] = Gt(t), l = (p, h, g, u) => e(Yt(p, h, g, u));
+  return c`
+    <div class="prop-row">
+      <label class="prop-label">${o}</label>
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;">
+        ${[
+    { label: "T", val: n, change: (p) => l(p, i, r, s) },
+    { label: "R", val: i, change: (p) => l(n, p, r, s) },
+    { label: "B", val: r, change: (p) => l(n, i, p, s) },
+    { label: "L", val: s, change: (p) => l(n, i, r, p) }
+  ].map((p) => c`
+          <div style="display:flex;align-items:center;gap:4px;">
+            <span style="font-size:10px;color:#9ca3af;width:12px;">${p.label}</span>
+            <input type="number" .value=${p.val} min="0"
+              @change=${(h) => p.change(parseInt(h.target.value) || 0)}
+              style="flex:1;padding:4px 6px;border:1px solid #d1d5db;border-radius:3px;font-size:12px;width:50px;" />
+          </div>
+        `)}
+      </div>
+    </div>
+  `;
+}
+function Jt(t, e, o) {
+  return c`
+    <div class="prop-row">
+      <div class="prop-toggle">
+        <input type="checkbox" .checked=${!!t}
+          @change=${(n) => e(n.target.checked)} />
+        <label class="prop-label" style="margin:0;">${o}</label>
+      </div>
+    </div>
+  `;
+}
+function Xt(t, e, o) {
+  return c`
+    <div class="prop-row">
+      <label class="prop-label">${o}</label>
+      <input class="prop-input" type="text" .value=${t ?? ""}
+        @change=${(n) => e(n.target.value)} />
+    </div>
+  `;
+}
+function Qt(t, e, o) {
+  return c`
+    <div class="prop-row">
+      <label class="prop-label">${o}</label>
+      <textarea class="prop-input"
+        style="min-height:100px;font-family:'SF Mono',Menlo,monospace;font-size:12px;"
+        .value=${t ?? ""}
+        @change=${(n) => e(n.target.value)}
+      ></textarea>
+    </div>
+  `;
+}
+var Zt = Object.defineProperty, te = Object.getOwnPropertyDescriptor, K = (t, e, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? te(e, o) : e, r = t.length - 1, s; r >= 0; r--)
+    (s = t[r]) && (i = (n ? s(e, o, i) : s(i)) || i);
+  return n && i && Zt(e, o, i), i;
+};
+let P = class extends v {
+  constructor() {
+    super(...arguments), this.storeCtrl = new S(this, ["design", "selection"]);
+  }
+  set store(t) {
+    this.storeCtrl.setStore(t);
+  }
+  get store() {
+    return this.storeCtrl.store;
+  }
+  /** Create a change handler bound to a specific content ID and property key */
+  onChange(t, e) {
+    return (o) => {
+      this.store.updateContentValues(t, { [e]: o });
+    };
+  }
+  render() {
+    const t = this.store.selectedId;
+    if (!t)
+      return c`<div class="no-selection">Select an element to edit its properties</div>`;
+    const e = this.store.findContent(t);
+    if (!e)
+      return c`<div class="no-selection">Select an element to edit its properties</div>`;
+    const o = this.toolRegistry.get(e.type);
+    return o ? c`
+      <div class="header">
+        <p class="header-title">${o.label}</p>
+        <p class="header-type">${e.type}</p>
+      </div>
+      ${Object.entries(o.options).map(([, n]) => this.renderGroup(e, n))}
+    ` : c`<div class="no-selection">Unknown tool: ${e.type}</div>`;
+  }
+  renderGroup(t, e) {
+    return c`
+      <div class="group">
+        <div class="group-title">${e.title}</div>
+        <div class="group-body">
+          ${Object.entries(e.options).map(
+      ([o, n]) => this.renderWidget(t, o, n)
+    )}
+        </div>
+      </div>
+    `;
+  }
+  /** Delegate to the correct widget function based on the property's widget type */
+  renderWidget(t, e, o) {
+    const n = t.values[e] ?? o.defaultValue, i = this.onChange(t.id, e);
+    switch (o.widget) {
+      case "color_picker":
+        return Ft(n, i, o.label);
+      case "toggle":
+        return Jt(n, i, o.label);
+      case "rich_text":
+        return Qt(n, i, o.label);
+      case "dropdown":
+        return Nt(n, i, o.label, o.widgetParams);
+      case "alignment":
+        return qt(n, i, o.label);
+      case "padding":
+        return Kt(n, i, o.label);
+      case "text":
+      default:
+        return Xt(n, i, o.label);
+    }
+  }
+};
+P.styles = $`
+    :host {
+      display: flex; flex-direction: column; width: 300px; min-width: 300px;
+      background: #fff; border-left: 1px solid #e5e7eb;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      overflow-y: auto;
+    }
+    .header { padding: 12px 16px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; }
+    .header-title { font-size: 14px; font-weight: 600; color: #111827; margin: 0; }
+    .header-type { font-size: 11px; color: #9ca3af; text-transform: uppercase; margin: 2px 0 0 0; }
+    .no-selection {
+      display: flex; flex-direction: column; align-items: center; justify-content: center;
+      flex: 1; color: #9ca3af; font-size: 13px; gap: 8px; padding: 40px 20px; text-align: center;
+    }
+    .group { border-bottom: 1px solid #f3f4f6; }
+    .group-title {
+      padding: 10px 16px; font-size: 12px; font-weight: 600; color: #6b7280;
+      background: #f9fafb; cursor: pointer; user-select: none;
+      display: flex; align-items: center; justify-content: space-between;
+    }
+    .group-title:hover { background: #f3f4f6; }
+    .group-body { padding: 12px 16px; }
+    .prop-row { margin-bottom: 12px; }
+    .prop-label { display: block; font-size: 12px; color: #6b7280; margin-bottom: 4px; }
+    .prop-input {
+      width: 100%; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 4px;
+      font-size: 13px; color: #111827; background: white; box-sizing: border-box;
+    }
+    .prop-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }
+    .prop-toggle { display: flex; align-items: center; gap: 8px; }
+    .prop-color { display: flex; align-items: center; gap: 8px; }
+    .color-swatch { width: 28px; height: 28px; border-radius: 4px; border: 1px solid #d1d5db; cursor: pointer; padding: 0; }
+    textarea.prop-input { min-height: 80px; resize: vertical; font-family: monospace; }
+  `;
+K([
+  f({ attribute: !1 })
+], P.prototype, "store", 1);
+K([
+  f({ attribute: !1 })
+], P.prototype, "toolRegistry", 2);
+P = K([
+  k("me-property-panel")
+], P);
+var ee = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, st = (t, e, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? oe(e, o) : e, r = t.length - 1, s; r >= 0; r--)
+    (s = t[r]) && (i = (n ? s(e, o, i) : s(i)) || i);
+  return n && i && ee(e, o, i), i;
+};
+let A = class extends v {
+  constructor() {
+    super(...arguments), this.options = {}, this.store = new ft(), this.toolRegistry = new mt(), this.dragManager = null, this.callbacks = /* @__PURE__ */ new Map(), this.unsubscribe = null, this._handleKeydown = (t) => {
+      const e = t.metaKey || t.ctrlKey, n = t.composedPath().some((i) => {
+        const r = i?.tagName;
+        return r === "INPUT" || r === "TEXTAREA" || r === "SELECT";
+      });
+      n && !e || (e && t.key === "z" && !t.shiftKey ? (t.preventDefault(), this.store.undo()) : e && (t.key === "y" || t.key === "z" && t.shiftKey) ? (t.preventDefault(), this.store.redo()) : (t.key === "Delete" || t.key === "Backspace") && this.store.selectedId && !n ? (t.preventDefault(), this.store.removeContent(this.store.selectedId)) : t.key === "Escape" && this.store.select(null));
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.registerBuiltInTools(), this.applyOptions(), this.setAttribute("tabindex", "0"), this.addEventListener("keydown", this._handleKeydown);
+  }
+  firstUpdated() {
+    this.dragManager = new xt(this.store, this.toolRegistry, this.shadowRoot), this.dragManager.attach(), this.store.events.on("design:loaded", (t) => {
+      this.dispatchEvent(new CustomEvent("design:loaded", { detail: t, bubbles: !0, composed: !0 }));
+    }), this.store.events.on("design:updated", (t) => {
+      this.dispatchEvent(new CustomEvent("design:updated", { detail: t, bubbles: !0, composed: !0 }));
+    }), 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(t) {
+    this.store.loadDesign(t);
+  }
+  saveDesign(t) {
+    t(structuredClone(this.store.getDesign()));
+  }
+  exportHtml(t, e) {
+    const o = this.store.getDesign(), n = /* @__PURE__ */ new Set();
+    for (const r of o.body.rows)
+      for (const s of r.columns)
+        for (const l of s.contents)
+          n.add(l.type);
+    const i = Array.from(n).filter((r) => !this.toolRegistry.isLoaded(r)).map((r) => this.toolRegistry.ensureLoaded(r));
+    i.length > 0 ? Promise.all(i).then(() => this.doExport(o, t, e)) : this.doExport(o, t, e);
+  }
+  doExport(t, e, o) {
+    const n = /* @__PURE__ */ new Map();
+    for (const i of this.toolRegistry.getAll())
+      n.set(i.name, (r, s) => i.renderer.renderHtml(r, s));
+    e(Tt(t, n, o));
+  }
+  async exportHtmlAsync(t) {
+    return new Promise((e) => this.exportHtml(e, t));
+  }
+  registerTool(t) {
+    this.toolRegistry.register(t), this.requestUpdate();
+  }
+  registerPropertyEditor(t, e) {
+  }
+  registerTab(t) {
+  }
+  registerCallback(t, e) {
+    this.callbacks.set(t, e);
+  }
+  setMergeTags(t) {
+  }
+  undo() {
+    this.store.undo();
+  }
+  redo() {
+    this.store.redo();
+  }
+  setBodyValues(t) {
+    this.store.updateBodyValues(t);
+  }
+  // ----------------------------------------------------------
+  // 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 t = window.requestIdleCallback ?? ((e) => setTimeout(e, 1e3));
+    for (const { meta: e } of ot)
+      t(() => {
+        this.toolRegistry.ensureLoaded(e.name);
+      });
+  }
+  registerBuiltInTools() {
+    for (const t of St)
+      this.toolRegistry.register(t);
+    for (const { meta: t, loader: e } of ot)
+      this.toolRegistry.registerLazy(t, e);
+  }
+  applyOptions() {
+    this.options.design && this.store.loadDesign(this.options.design);
+  }
+  render() {
+    return c`
+      <me-editor-sidebar
+        .store=${this.store}
+        .toolRegistry=${this.toolRegistry}
+      ></me-editor-sidebar>
+      <me-editor-canvas
+        .store=${this.store}
+        .toolRegistry=${this.toolRegistry}
+      ></me-editor-canvas>
+      <me-property-panel
+        .store=${this.store}
+        .toolRegistry=${this.toolRegistry}
+      ></me-property-panel>
+    `;
+  }
+};
+A.styles = $`
+    :host {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      flex: 1;
+      min-height: 500px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      color: #111827;
+      box-sizing: border-box;
+      overflow: hidden;
+      position: relative;
+    }
+    * { box-sizing: border-box; }
+  `;
+st([
+  f({ type: Object })
+], A.prototype, "options", 2);
+A = st([
+  k("mail-editor")
+], A);
+function C(t, e) {
+  customElements.get(t) || customElements.define(t, e);
+}
+C("mail-editor", A);
+C("me-editor-canvas", I);
+C("me-row-renderer", D);
+C("me-column-renderer", w);
+C("me-content-renderer", _);
+C("me-editor-sidebar", T);
+C("me-body-settings", L);
+C("me-property-panel", P);
+const ae = customElements.get("mail-editor") !== void 0;
+export {
+  ae as E,
+  A as M,
+  mt as T,
+  ft as a,
+  V as e,
+  se as j,
+  a as s
+};
+//# sourceMappingURL=index-CZt184D3.js.map