@emabuild/core 0.0.1

package/dist/mail-editor-DzI7SmSe.js

@@ -0,0 +1,2286 @@
+import { html, css, LitElement } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+function deepClone(obj) {
+  return structuredClone(obj);
+}
+function createCounterManager() {
+  const counters = {};
+  return {
+    getCounters() {
+      return { ...counters };
+    },
+    setCounters(c) {
+      Object.keys(counters).forEach((k) => delete counters[k]);
+      Object.assign(counters, c);
+    },
+    next(prefix) {
+      const current = counters[prefix] ?? 0;
+      counters[prefix] = current + 1;
+      return counters[prefix];
+    }
+  };
+}
+class EventEmitter {
+  constructor() {
+    this.listeners = /* @__PURE__ */ new Map();
+  }
+  on(event, listener) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, /* @__PURE__ */ new Set());
+    }
+    this.listeners.get(event).add(listener);
+  }
+  off(event, listener) {
+    this.listeners.get(event)?.delete(listener);
+  }
+  emit(event, ...args) {
+    this.listeners.get(event)?.forEach((fn) => {
+      try {
+        fn(...args);
+      } catch (e) {
+        console.error(`[maileditor] Error in "${event}" listener:`, e);
+      }
+    });
+  }
+  removeAllListeners(event) {
+    if (event) {
+      this.listeners.delete(event);
+    } else {
+      this.listeners.clear();
+    }
+  }
+}
+function createEmptyDesign() {
+  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: true,
+          linkColor: "#0000ee",
+          linkHoverColor: "#0000ee",
+          linkUnderline: true,
+          linkHoverUnderline: true
+        },
+        preheaderText: "",
+        popupPosition: "center",
+        popupWidth: "600px",
+        popupHeight: "auto",
+        borderRadius: "10px",
+        popupBackgroundColor: "#FFFFFF",
+        popupBackgroundImage: { url: "", fullWidth: true, repeat: "no-repeat", center: true, cover: true },
+        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
+  };
+}
+class EditorStore {
+  constructor() {
+    this.undoStack = [];
+    this.redoStack = [];
+    this.maxHistory = 50;
+    this.subscribers = /* @__PURE__ */ new Set();
+    this.counterManager = createCounterManager();
+    this.events = new EventEmitter();
+    this._selectedId = null;
+    this._hoveredId = null;
+    this._viewMode = "desktop";
+    this._activeTab = "content";
+    this.design = createEmptyDesign();
+  }
+  // ----------------------------------------------------------
+  // Subscriptions (for Lit reactive controllers)
+  // ----------------------------------------------------------
+  subscribe(fn) {
+    this.subscribers.add(fn);
+    return () => this.subscribers.delete(fn);
+  }
+  notify() {
+    this.subscribers.forEach((fn) => fn());
+  }
+  // ----------------------------------------------------------
+  // Getters
+  // ----------------------------------------------------------
+  getDesign() {
+    return this.design;
+  }
+  getBody() {
+    return this.design.body;
+  }
+  getRows() {
+    return this.design.body.rows;
+  }
+  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.undoStack.length > 0;
+  }
+  get canRedo() {
+    return this.redoStack.length > 0;
+  }
+  // ----------------------------------------------------------
+  // Design loading
+  // ----------------------------------------------------------
+  loadDesign(design) {
+    this.design = deepClone(design);
+    this.counterManager.setCounters(this.design.counters);
+    this.undoStack = [];
+    this.redoStack = [];
+    this._selectedId = null;
+    this.notify();
+    this.events.emit("design:loaded", { design: this.design });
+  }
+  // ----------------------------------------------------------
+  // History (undo/redo)
+  // ----------------------------------------------------------
+  pushHistory() {
+    this.undoStack.push(deepClone(this.design));
+    if (this.undoStack.length > this.maxHistory) {
+      this.undoStack.shift();
+    }
+    this.redoStack = [];
+  }
+  undo() {
+    const prev = this.undoStack.pop();
+    if (!prev) return;
+    this.redoStack.push(deepClone(this.design));
+    this.design = prev;
+    this.counterManager.setCounters(this.design.counters);
+    this.notify();
+    this.emitUpdate("content_updated");
+  }
+  redo() {
+    const next = this.redoStack.pop();
+    if (!next) return;
+    this.undoStack.push(deepClone(this.design));
+    this.design = next;
+    this.counterManager.setCounters(this.design.counters);
+    this.notify();
+    this.emitUpdate("content_updated");
+  }
+  // ----------------------------------------------------------
+  // Selection / UI state
+  // ----------------------------------------------------------
+  select(id) {
+    this._selectedId = id;
+    this.notify();
+  }
+  hover(id) {
+    this._hoveredId = id;
+    this.notify();
+  }
+  setViewMode(mode) {
+    this._viewMode = mode;
+    this.notify();
+  }
+  setActiveTab(tab) {
+    this._activeTab = tab;
+    this.notify();
+  }
+  // ----------------------------------------------------------
+  // Row operations
+  // ----------------------------------------------------------
+  addRow(row, index) {
+    this.pushHistory();
+    const rows = this.design.body.rows;
+    if (index !== void 0 && index >= 0 && index <= rows.length) {
+      rows.splice(index, 0, deepClone(row));
+    } else {
+      rows.push(deepClone(row));
+    }
+    this.syncCounters();
+    this.notify();
+    this.emitUpdate("row_added", row);
+  }
+  removeRow(rowId) {
+    this.pushHistory();
+    const rows = this.design.body.rows;
+    const idx = rows.findIndex((r) => r.id === rowId);
+    if (idx !== -1) {
+      rows.splice(idx, 1);
+      if (this._selectedId === rowId) this._selectedId = null;
+      this.notify();
+      this.emitUpdate("row_removed");
+    }
+  }
+  moveRow(fromIndex, toIndex) {
+    this.pushHistory();
+    const rows = this.design.body.rows;
+    const [row] = rows.splice(fromIndex, 1);
+    rows.splice(toIndex, 0, row);
+    this.notify();
+    this.emitUpdate("row_reordered");
+  }
+  updateRowValues(rowId, patch) {
+    const row = this.findRow(rowId);
+    if (!row) return;
+    this.pushHistory();
+    Object.assign(row.values, patch);
+    this.notify();
+    this.emitUpdate("content_updated");
+  }
+  // ----------------------------------------------------------
+  // Column operations
+  // ----------------------------------------------------------
+  updateColumnValues(columnId, patch) {
+    const col = this.findColumn(columnId);
+    if (!col) return;
+    this.pushHistory();
+    Object.assign(col.values, patch);
+    this.notify();
+    this.emitUpdate("content_updated");
+  }
+  // ----------------------------------------------------------
+  // Content operations
+  // ----------------------------------------------------------
+  addContent(columnId, content, index) {
+    const col = this.findColumn(columnId);
+    if (!col) return;
+    this.pushHistory();
+    const cloned = deepClone(content);
+    if (index !== void 0 && index >= 0 && index <= col.contents.length) {
+      col.contents.splice(index, 0, cloned);
+    } else {
+      col.contents.push(cloned);
+    }
+    this.syncCounters();
+    this.notify();
+    this.emitUpdate("content_added", cloned);
+  }
+  removeContent(contentId) {
+    for (const row of this.design.body.rows) {
+      for (const col of row.columns) {
+        const idx = col.contents.findIndex((c) => c.id === contentId);
+        if (idx !== -1) {
+          this.pushHistory();
+          col.contents.splice(idx, 1);
+          if (this._selectedId === contentId) this._selectedId = null;
+          this.notify();
+          this.emitUpdate("content_removed");
+          return;
+        }
+      }
+    }
+  }
+  updateContentValues(contentId, patch) {
+    const content = this.findContent(contentId);
+    if (!content) return;
+    this.pushHistory();
+    Object.assign(content.values, patch);
+    this.notify();
+    this.emitUpdate("content_updated");
+  }
+  moveContent(contentId, targetColumnId, targetIndex) {
+    const content = this.findContent(contentId);
+    if (!content) return;
+    for (const row of this.design.body.rows) {
+      for (const col of row.columns) {
+        const idx = col.contents.findIndex((c) => c.id === contentId);
+        if (idx !== -1) {
+          this.pushHistory();
+          col.contents.splice(idx, 1);
+          break;
+        }
+      }
+    }
+    const targetCol = this.findColumn(targetColumnId);
+    if (targetCol) {
+      targetCol.contents.splice(targetIndex, 0, content);
+    }
+    this.notify();
+    this.emitUpdate("content_reordered");
+  }
+  duplicateContent(contentId) {
+    const content = this.findContent(contentId);
+    if (!content) return;
+    for (const row of this.design.body.rows) {
+      for (const col of row.columns) {
+        const idx = col.contents.findIndex((c) => c.id === contentId);
+        if (idx !== -1) {
+          const cloned = deepClone(content);
+          const counter = this.counterManager.next(`u_content_${content.type}`);
+          cloned.id = `u_content_${content.type}_${counter}`;
+          cloned.values._meta = {
+            htmlID: cloned.id,
+            htmlClassNames: `u_content_${content.type}`
+          };
+          this.pushHistory();
+          col.contents.splice(idx + 1, 0, cloned);
+          this.syncCounters();
+          this.notify();
+          this.emitUpdate("content_added", cloned);
+          return;
+        }
+      }
+    }
+  }
+  // ----------------------------------------------------------
+  // Body values
+  // ----------------------------------------------------------
+  updateBodyValues(patch) {
+    this.pushHistory();
+    Object.assign(this.design.body.values, patch);
+    this.notify();
+    this.emitUpdate("body_updated");
+  }
+  // ----------------------------------------------------------
+  // Lookup helpers
+  // ----------------------------------------------------------
+  findRow(rowId) {
+    return this.design.body.rows.find((r) => r.id === rowId);
+  }
+  findColumn(columnId) {
+    for (const row of this.design.body.rows) {
+      const col = row.columns.find((c) => c.id === columnId);
+      if (col) return col;
+    }
+    return void 0;
+  }
+  findContent(contentId) {
+    for (const row of this.design.body.rows) {
+      for (const col of row.columns) {
+        const content = col.contents.find((c) => c.id === contentId);
+        if (content) return content;
+      }
+    }
+    return void 0;
+  }
+  findParentColumn(contentId) {
+    for (const row of this.design.body.rows) {
+      for (const col of row.columns) {
+        if (col.contents.some((c) => c.id === contentId)) return col;
+      }
+    }
+    return void 0;
+  }
+  findParentRow(columnId) {
+    for (const row of this.design.body.rows) {
+      if (row.columns.some((c) => c.id === columnId)) return row;
+    }
+    return void 0;
+  }
+  // ----------------------------------------------------------
+  // Helpers
+  // ----------------------------------------------------------
+  /** Creates a new row with the given column layout */
+  createRow(cellProportions) {
+    const rowNum = this.counterManager.next("u_row");
+    const columns = cellProportions.map((_, i) => {
+      const colNum = this.counterManager.next("u_column");
+      return {
+        id: `u_column_${colNum}`,
+        contents: [],
+        values: {
+          backgroundColor: "",
+          padding: "0px",
+          border: {},
+          borderRadius: "0px",
+          _meta: { htmlID: `u_column_${colNum}`, htmlClassNames: "u_column" }
+        }
+      };
+    });
+    this.syncCounters();
+    return {
+      id: `u_row_${rowNum}`,
+      cells: cellProportions,
+      columns,
+      values: {
+        displayCondition: null,
+        columns: false,
+        backgroundColor: "",
+        columnsBackgroundColor: "",
+        backgroundImage: { url: "", fullWidth: true, repeat: false, center: true, cover: false },
+        padding: "0px",
+        anchor: "",
+        hideDesktop: false,
+        hideMobile: false,
+        _meta: { htmlID: `u_row_${rowNum}`, htmlClassNames: "u_row" }
+      }
+    };
+  }
+  /** Creates a new content block for the given tool type */
+  createContent(type, values = {}) {
+    const counter = this.counterManager.next(`u_content_${type}`);
+    const id = `u_content_${type}_${counter}`;
+    this.syncCounters();
+    return {
+      id,
+      type,
+      values: {
+        containerPadding: "10px",
+        anchor: "",
+        hideDesktop: false,
+        hideMobile: false,
+        displayCondition: null,
+        _meta: { htmlID: id, htmlClassNames: `u_content_${type}` },
+        ...values
+      }
+    };
+  }
+  syncCounters() {
+    this.design.counters = this.counterManager.getCounters();
+  }
+  emitUpdate(type, item) {
+    this.events.emit("design:updated", { type, item });
+  }
+}
+class ToolRegistry {
+  constructor() {
+    this.tools = /* @__PURE__ */ new Map();
+  }
+  register(tool) {
+    this.tools.set(tool.name, tool);
+  }
+  get(name) {
+    return this.tools.get(name);
+  }
+  getAll() {
+    return Array.from(this.tools.values()).sort((a, b) => (a.position ?? 0) - (b.position ?? 0));
+  }
+  has(name) {
+    return this.tools.has(name);
+  }
+  getDefaultValues(name) {
+    const tool = this.tools.get(name);
+    if (!tool) return {};
+    const defaults = { ...tool.defaultValues };
+    for (const group of Object.values(tool.options)) {
+      for (const [key, prop] of Object.entries(group.options)) {
+        if (!(key in defaults)) {
+          defaults[key] = prop.defaultValue;
+        }
+      }
+    }
+    return defaults;
+  }
+  getPropertyGroups(name) {
+    return this.tools.get(name)?.options ?? {};
+  }
+}
+const dragState = {
+  /** ID of the content currently being dragged (null if not dragging content) */
+  draggingContentId: null,
+  startContentDrag(contentId) {
+    this.draggingContentId = contentId;
+  },
+  reset() {
+    this.draggingContentId = null;
+  }
+};
+class DragManager {
+  constructor(store, toolRegistry, root) {
+    this.currentDrop = null;
+    this.indicator = null;
+    this.rowIndicator = null;
+    this.handleDragStart = (_e) => {
+    };
+    this.handleDragOver = (e) => {
+      const types = e.dataTransfer?.types || [];
+      const isToolDrag = types.includes("application/maileditor-tool");
+      const isLayoutDrag = types.includes("application/maileditor-layout");
+      const isContentDrag = types.includes("application/maileditor-content") || !!dragState.draggingContentId;
+      if (!isToolDrag && !isContentDrag && !isLayoutDrag) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = isToolDrag || isLayoutDrag ? "copy" : "move";
+      if (isLayoutDrag) {
+        const drop = this.findRowDropPosition(e.clientY);
+        this.hideIndicator();
+        if (drop) {
+          this.currentDrop = drop;
+          this.showRowIndicator(drop);
+        } else {
+          this.hideRowIndicator();
+          this.currentDrop = null;
+        }
+      } else {
+        const drop = this.findContentDropPosition(e.clientX, e.clientY);
+        this.hideRowIndicator();
+        if (drop) {
+          this.currentDrop = drop;
+          this.showContentIndicator(drop);
+        } else {
+          this.hideIndicator();
+          this.currentDrop = null;
+        }
+      }
+    };
+    this.handleDrop = (e) => {
+      e.preventDefault();
+      this.hideIndicator();
+      this.hideRowIndicator();
+      const layoutData = e.dataTransfer?.getData("application/maileditor-layout");
+      if (layoutData) {
+        const cells = JSON.parse(layoutData);
+        const row = this.store.createRow(cells);
+        const rowIndex = this.currentDrop?.type === "row" ? this.currentDrop.rowIndex : void 0;
+        this.store.addRow(row, rowIndex);
+        this.reset();
+        return;
+      }
+      const toolName = e.dataTransfer?.getData("application/maileditor-tool");
+      if (toolName) {
+        if (this.currentDrop?.type === "content" && this.currentDrop.columnId) {
+          const defaults = this.toolRegistry.getDefaultValues(toolName);
+          const content = this.store.createContent(toolName, defaults);
+          this.store.addContent(this.currentDrop.columnId, content, this.currentDrop.contentIndex);
+          this.store.select(content.id);
+        } else {
+          const row = this.store.createRow([1]);
+          this.store.addRow(row);
+          const defaults = this.toolRegistry.getDefaultValues(toolName);
+          const content = this.store.createContent(toolName, defaults);
+          this.store.addContent(row.columns[0].id, content);
+          this.store.select(content.id);
+        }
+        this.reset();
+        return;
+      }
+      const contentId = e.dataTransfer?.getData("application/maileditor-content") || dragState.draggingContentId;
+      if (contentId && this.currentDrop?.type === "content" && this.currentDrop.columnId) {
+        this.store.moveContent(contentId, this.currentDrop.columnId, this.currentDrop.contentIndex);
+        this.store.select(contentId);
+      }
+      this.reset();
+      dragState.reset();
+    };
+    this.handleDragEnd = () => {
+      this.hideIndicator();
+      this.hideRowIndicator();
+      this.reset();
+    };
+    this.handleDragLeave = (e) => {
+      const related = e.relatedTarget;
+      if (!related || !this.root.contains(related)) {
+        this.hideIndicator();
+        this.hideRowIndicator();
+        this.currentDrop = null;
+      }
+    };
+    this.store = store;
+    this.toolRegistry = toolRegistry;
+    this.root = root;
+  }
+  attach() {
+    this.root.addEventListener("dragover", this.handleDragOver);
+    this.root.addEventListener("drop", this.handleDrop);
+    this.root.addEventListener("dragend", this.handleDragEnd);
+    this.root.addEventListener("dragleave", this.handleDragLeave);
+    this.root.addEventListener("dragstart", this.handleDragStart);
+    this.indicator = this.createIndicator("#3b82f6");
+    this.rowIndicator = this.createIndicator("#8b5cf6");
+  }
+  createIndicator(color) {
+    const el = document.createElement("div");
+    Object.assign(el.style, {
+      position: "absolute",
+      left: "0",
+      right: "0",
+      height: "3px",
+      background: color,
+      borderRadius: "2px",
+      pointerEvents: "none",
+      zIndex: "1000",
+      display: "none",
+      boxShadow: `0 0 6px ${color}80`
+    });
+    return el;
+  }
+  detach() {
+    this.root.removeEventListener("dragover", this.handleDragOver);
+    this.root.removeEventListener("drop", this.handleDrop);
+    this.root.removeEventListener("dragend", this.handleDragEnd);
+    this.root.removeEventListener("dragleave", this.handleDragLeave);
+    this.root.removeEventListener("dragstart", this.handleDragStart);
+    this.indicator?.remove();
+    this.rowIndicator?.remove();
+  }
+  // ----------------------------------------------------------
+  // Find row drop position (between rows)
+  // ----------------------------------------------------------
+  findRowDropPosition(clientY) {
+    const canvas = this.root.querySelector("me-editor-canvas");
+    if (!canvas?.shadowRoot) return null;
+    const rows = Array.from(canvas.shadowRoot.querySelectorAll("me-row-renderer"));
+    if (rows.length === 0) {
+      return { type: "row", rowIndex: 0, y: 0 };
+    }
+    const firstRect = rows[0].getBoundingClientRect();
+    let bestDist = Math.abs(clientY - firstRect.top);
+    let bestTarget = { type: "row", rowIndex: 0, y: firstRect.top };
+    for (let i = 0; i < rows.length; i++) {
+      const rect = rows[i].getBoundingClientRect();
+      const y = rect.bottom;
+      const dist = Math.abs(clientY - y);
+      if (dist < bestDist) {
+        bestDist = dist;
+        bestTarget = { type: "row", rowIndex: i + 1, y };
+      }
+    }
+    return bestTarget;
+  }
+  // ----------------------------------------------------------
+  // Find content drop position (inside columns)
+  // ----------------------------------------------------------
+  findContentDropPosition(clientX, clientY) {
+    const columns = this.queryShadowAll(this.root, "me-column-renderer");
+    let bestTarget = null;
+    let bestDist = Infinity;
+    for (const colEl of columns) {
+      const columnId = colEl.dataset.columnId;
+      if (!columnId) continue;
+      const colShadow = colEl.shadowRoot;
+      if (!colShadow) continue;
+      const colRect = colEl.getBoundingClientRect();
+      if (clientX < colRect.left || clientX > colRect.right) continue;
+      const contentEls = Array.from(colShadow.querySelectorAll("me-content-renderer"));
+      if (contentEls.length === 0) {
+        const dist2 = Math.abs(clientY - (colRect.top + colRect.height / 2));
+        if (dist2 < bestDist) {
+          bestDist = dist2;
+          bestTarget = { type: "content", columnId, contentIndex: 0, y: colRect.top + colRect.height / 2 };
+        }
+        continue;
+      }
+      const firstRect = contentEls[0].getBoundingClientRect();
+      let dist = Math.abs(clientY - firstRect.top);
+      if (dist < bestDist) {
+        bestDist = dist;
+        bestTarget = { type: "content", columnId, contentIndex: 0, y: firstRect.top };
+      }
+      for (let i = 0; i < contentEls.length; i++) {
+        const rect = contentEls[i].getBoundingClientRect();
+        const nextRect = contentEls[i + 1]?.getBoundingClientRect();
+        const y = nextRect ? (rect.bottom + nextRect.top) / 2 : rect.bottom;
+        dist = Math.abs(clientY - y);
+        if (dist < bestDist) {
+          bestDist = dist;
+          bestTarget = { type: "content", columnId, contentIndex: i + 1, y };
+        }
+      }
+    }
+    return bestTarget;
+  }
+  // ----------------------------------------------------------
+  // Indicator positioning
+  // ----------------------------------------------------------
+  showContentIndicator(drop) {
+    if (!this.indicator || !drop.columnId) return;
+    const columns = this.queryShadowAll(this.root, "me-column-renderer");
+    const colEl = columns.find((c) => c.dataset.columnId === drop.columnId);
+    if (!colEl?.shadowRoot) return;
+    if (this.indicator.parentNode !== colEl.shadowRoot) {
+      this.indicator.remove();
+      colEl.shadowRoot.appendChild(this.indicator);
+    }
+    const contentEls = Array.from(colEl.shadowRoot.querySelectorAll("me-content-renderer"));
+    const colRect = colEl.getBoundingClientRect();
+    let indicatorY;
+    if (contentEls.length === 0 || drop.contentIndex === 0) {
+      indicatorY = 0;
+    } else if (drop.contentIndex >= contentEls.length) {
+      const lastRect = contentEls[contentEls.length - 1].getBoundingClientRect();
+      indicatorY = lastRect.bottom - colRect.top;
+    } else {
+      const elRect = contentEls[drop.contentIndex].getBoundingClientRect();
+      indicatorY = elRect.top - colRect.top;
+    }
+    Object.assign(this.indicator.style, {
+      display: "block",
+      top: `${indicatorY}px`,
+      left: "4px",
+      right: "4px",
+      width: "auto"
+    });
+  }
+  showRowIndicator(drop) {
+    if (!this.rowIndicator) return;
+    const canvas = this.root.querySelector("me-editor-canvas");
+    if (!canvas?.shadowRoot) return;
+    const canvasBody = canvas.shadowRoot.querySelector(".canvas-body");
+    if (!canvasBody) return;
+    if (this.rowIndicator.parentNode !== canvasBody) {
+      this.rowIndicator.remove();
+      canvasBody.appendChild(this.rowIndicator);
+    }
+    const rows = Array.from(canvas.shadowRoot.querySelectorAll("me-row-renderer"));
+    const bodyRect = canvasBody.getBoundingClientRect();
+    let indicatorY;
+    if (rows.length === 0 || drop.rowIndex === 0) {
+      indicatorY = 0;
+    } else if (drop.rowIndex >= rows.length) {
+      const lastRect = rows[rows.length - 1].getBoundingClientRect();
+      indicatorY = lastRect.bottom - bodyRect.top;
+    } else {
+      const elRect = rows[drop.rowIndex].getBoundingClientRect();
+      indicatorY = elRect.top - bodyRect.top;
+    }
+    Object.assign(this.rowIndicator.style, {
+      display: "block",
+      top: `${indicatorY}px`,
+      left: "0",
+      right: "0",
+      width: "auto"
+    });
+  }
+  hideIndicator() {
+    if (this.indicator) this.indicator.style.display = "none";
+  }
+  hideRowIndicator() {
+    if (this.rowIndicator) this.rowIndicator.style.display = "none";
+  }
+  reset() {
+    this.currentDrop = null;
+    this.hideIndicator();
+    this.hideRowIndicator();
+  }
+  // ----------------------------------------------------------
+  // Shadow DOM traversal
+  // ----------------------------------------------------------
+  queryShadowAll(root, selector) {
+    const results = [];
+    this.walkShadowDom(root, (el) => {
+      if (el.matches?.(selector)) results.push(el);
+    });
+    return results;
+  }
+  walkShadowDom(root, callback) {
+    const children = root instanceof ShadowRoot ? root.children : root.children;
+    for (const child of Array.from(children)) {
+      const el = child;
+      callback(el);
+      if (el.shadowRoot) this.walkShadowDom(el.shadowRoot, callback);
+      if (el.children?.length) this.walkShadowDom(el, callback);
+    }
+  }
+  findContentElement(el) {
+    while (el) {
+      if (el.dataset?.contentId) return el;
+      if (el.tagName?.toLowerCase() === "me-content-renderer") return el;
+      if (el.parentElement) {
+        el = el.parentElement;
+      } else if (el.getRootNode().host) {
+        el = el.getRootNode().host;
+      } else {
+        break;
+      }
+    }
+    return null;
+  }
+}
+const textTool = {
+  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",
+          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" },
+        lineHeight: { label: "Line Height", defaultValue: "140%", widget: "text" },
+        linkStyle: { label: "Link Style", defaultValue: void 0, widget: "link_style" }
+      }
+    },
+    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: false, widget: "toggle" },
+        hideMobile: { label: "Hide on Mobile", defaultValue: false, 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(values, context) {
+      const padding = values.containerPadding || "10px";
+      const bgColor = values.backgroundColor || "transparent";
+      const color = values.color || "inherit";
+      const lineHeight = values.lineHeight || "140%";
+      const textContent = values.text || "";
+      return html`
+        <div style="padding:${padding};background-color:${bgColor};color:${color};line-height:${lineHeight};word-break:break-word;">
+          ${unsafeHTML(textContent)}
+        </div>
+      `;
+    },
+    renderHtml(values, context) {
+      const padding = values.containerPadding || "10px";
+      const bgColor = values.backgroundColor || "";
+      const color = values.color || "#000000";
+      const lineHeight = values.lineHeight || "140%";
+      const textContent = values.text || "";
+      const textAlign = values.textAlign || "left";
+      const bgStyle = bgColor ? `background-color:${bgColor};` : "";
+      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:${padding};${bgStyle}font-family:arial,helvetica,sans-serif;" align="left">
+        <div style="font-size:14px;color:${color};line-height:${lineHeight};text-align:${textAlign};word-wrap:break-word;">
+          ${textContent}
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>`;
+    }
+  }
+};
+const headingTool = {
+  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: "text" },
+        color: { label: "Text Color", defaultValue: "#000000", widget: "color_picker" },
+        textAlign: { label: "Text Align", defaultValue: "left", widget: "text" },
+        fontWeight: { label: "Font Weight", defaultValue: "700", widget: "text" },
+        lineHeight: { label: "Line Height", defaultValue: "140%", widget: "text" },
+        letterSpacing: { label: "Letter Spacing", defaultValue: "normal", widget: "text" }
+      }
+    },
+    spacing: {
+      title: "Spacing",
+      options: {
+        containerPadding: { label: "Padding", defaultValue: "10px", widget: "text" }
+      }
+    },
+    general: {
+      title: "General",
+      options: {
+        anchor: { label: "Anchor", defaultValue: "", widget: "text" },
+        hideDesktop: { label: "Hide on Desktop", defaultValue: false, widget: "toggle" },
+        hideMobile: { label: "Hide on Mobile", defaultValue: false, widget: "toggle" }
+      }
+    }
+  },
+  defaultValues: {
+    text: "Heading",
+    headingType: "h1",
+    fontSize: "22px",
+    color: "#000000",
+    textAlign: "left",
+    fontWeight: "700",
+    lineHeight: "140%",
+    letterSpacing: "normal",
+    containerPadding: "10px"
+  },
+  renderer: {
+    renderEditor(values, ctx) {
+      const padding = values.containerPadding || "10px";
+      const fontSize = values.fontSize || "22px";
+      const color = values.color || "#000000";
+      const textAlign = values.textAlign || "left";
+      const fontWeight = values.fontWeight || "700";
+      const lineHeight = values.lineHeight || "140%";
+      const text = values.text || "Heading";
+      return html`
+        <div style="padding:${padding};font-size:${fontSize};color:${color};text-align:${textAlign};font-weight:${fontWeight};line-height:${lineHeight};">
+          ${text}
+        </div>
+      `;
+    },
+    renderHtml(values, ctx) {
+      const padding = values.containerPadding || "10px";
+      const fontSize = values.fontSize || "22px";
+      const color = values.color || "#000000";
+      const textAlign = values.textAlign || "left";
+      const fontWeight = values.fontWeight || "700";
+      const lineHeight = values.lineHeight || "140%";
+      const letterSpacing = values.letterSpacing || "normal";
+      const tag = values.headingType || "h1";
+      const text = values.text || "Heading";
+      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:${padding};font-family:arial,helvetica,sans-serif;" align="left">
+    <${tag} style="margin:0;font-size:${fontSize};color:${color};text-align:${textAlign};font-weight:${fontWeight};line-height:${lineHeight};letter-spacing:${letterSpacing};">${text}</${tag}>
+  </td></tr></tbody>
+</table>`;
+    }
+  }
+};
+const paragraphTool = {
+  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" },
+        lineHeight: { label: "Line Height", defaultValue: "160%", widget: "text" },
+        letterSpacing: { label: "Letter Spacing", defaultValue: "normal", widget: "text" },
+        textAlign: { label: "Text Align", defaultValue: "left", widget: "text" }
+      }
+    },
+    spacing: {
+      title: "Spacing",
+      options: {
+        containerPadding: { label: "Padding", defaultValue: "10px", widget: "text" }
+      }
+    }
+  },
+  defaultValues: {
+    text: '<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>',
+    color: "#374151",
+    lineHeight: "160%",
+    letterSpacing: "normal",
+    textAlign: "left",
+    containerPadding: "10px"
+  },
+  renderer: {
+    renderEditor(values) {
+      const padding = values.containerPadding || "10px";
+      const color = values.color || "#374151";
+      const lineHeight = values.lineHeight || "160%";
+      const text = values.text || "";
+      return html`<div style="padding:${padding};color:${color};line-height:${lineHeight};word-break:break-word;">${unsafeHTML(text)}</div>`;
+    },
+    renderHtml(values) {
+      const padding = values.containerPadding || "10px";
+      const color = values.color || "#374151";
+      const lineHeight = values.lineHeight || "160%";
+      const letterSpacing = values.letterSpacing || "normal";
+      const textAlign = values.textAlign || "left";
+      const text = values.text || "";
+      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:${padding};font-family:arial,helvetica,sans-serif;" align="left">
+    <div style="font-size:14px;color:${color};line-height:${lineHeight};text-align:${textAlign};letter-spacing:${letterSpacing};word-wrap:break-word;">${text}</div>
+  </td></tr></tbody>
+</table>`;
+    }
+  }
+};
+const imageTool = {
+  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: "text" },
+        maxWidth: { label: "Max Width", defaultValue: "100%", widget: "text" },
+        align: { label: "Align", defaultValue: "center", widget: "text" },
+        borderRadius: { label: "Border Radius", defaultValue: "0px", widget: "text" }
+      }
+    },
+    spacing: {
+      title: "Spacing",
+      options: {
+        containerPadding: { label: "Padding", defaultValue: "10px", widget: "text" }
+      }
+    },
+    general: {
+      title: "General",
+      options: {
+        anchor: { label: "Anchor", defaultValue: "", widget: "text" },
+        hideDesktop: { label: "Hide on Desktop", defaultValue: false, widget: "toggle" },
+        hideMobile: { label: "Hide on Mobile", defaultValue: false, 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(values, ctx) {
+      const padding = values.containerPadding || "10px";
+      const src = values.src || "";
+      const alt = values.alt || "";
+      const width = values.width || "100%";
+      const borderRadius = values.borderRadius || "0px";
+      const align = values.align || "center";
+      if (!src) {
+        return html`
+          <div style="padding:${padding};text-align:${align};">
+            <div style="background:#f1f5f9;border:2px dashed #cbd5e1;border-radius:8px;padding:40px 20px;text-align:center;color:#94a3b8;font-family:sans-serif;font-size:13px;">
+              No image set. Enter a URL in the property panel.
+            </div>
+          </div>
+        `;
+      }
+      return html`
+        <div style="padding:${padding};text-align:${align};">
+          <img src=${src} alt=${alt} style="display:inline-block;max-width:100%;width:${width};border-radius:${borderRadius};border:0;" />
+        </div>
+      `;
+    },
+    renderHtml(values, ctx) {
+      const padding = values.containerPadding || "10px";
+      const src = values.src || "";
+      const alt = values.alt || "";
+      const href = values.href || "";
+      const target = values.target || "_blank";
+      const width = values.width || "100%";
+      const borderRadius = values.borderRadius || "0px";
+      const align = values.align || "center";
+      const widthPx = width === "100%" ? ctx.columnWidth : parseInt(width);
+      const borderStyle = borderRadius !== "0px" ? `border-radius:${borderRadius};` : "";
+      const imgTag = `<img align="${align}" border="0" src="${src}" alt="${alt}" title="${alt}" style="outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;clear:both;display:inline-block!important;border:none;height:auto;float:none;width:${width};max-width:${widthPx}px;${borderStyle}" width="${widthPx}" />`;
+      const content = href ? `<a href="${href}" target="${target}" style="text-decoration:none;">${imgTag}</a>` : imgTag;
+      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:${padding};font-family:arial,helvetica,sans-serif;" align="${align}">
+    ${content}
+  </td></tr></tbody>
+</table>`;
+    }
+  }
+};
+const buttonTool = {
+  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: "text" },
+        fontWeight: { label: "Font Weight", defaultValue: "700", widget: "text" },
+        borderRadius: { label: "Border Radius", defaultValue: "4px", widget: "text" },
+        buttonWidth: { label: "Width", defaultValue: "auto", widget: "text" },
+        textAlign: { label: "Align", defaultValue: "center", widget: "text" },
+        buttonPadding: { label: "Button Padding", defaultValue: "10px 20px", widget: "text" },
+        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: "text" }
+      }
+    },
+    general: {
+      title: "General",
+      options: {
+        anchor: { label: "Anchor", defaultValue: "", widget: "text" },
+        hideDesktop: { label: "Hide on Desktop", defaultValue: false, widget: "toggle" },
+        hideMobile: { label: "Hide on Mobile", defaultValue: false, 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(values, ctx) {
+      const padding = values.containerPadding || "10px";
+      const bgColor = values.backgroundColor || "#3b82f6";
+      const textColor = values.textColor || "#ffffff";
+      const fontSize = values.fontSize || "14px";
+      const fontWeight = values.fontWeight || "700";
+      const borderRadius = values.borderRadius || "4px";
+      const buttonPadding = values.buttonPadding || "10px 20px";
+      const text = values.text || "Click Me";
+      const textAlign = values.textAlign || "center";
+      const buttonWidth = values.buttonWidth || "auto";
+      const borderColor = values.borderColor || bgColor;
+      const borderWidth = values.borderWidth || "0px";
+      const borderStyle = borderWidth !== "0px" ? `border:${borderWidth} solid ${borderColor};` : "border:none;";
+      const widthStyle = buttonWidth === "auto" ? "display:inline-block;" : `display:block;width:${buttonWidth};`;
+      return html`
+        <div style="padding:${padding};text-align:${textAlign};">
+          <a style="${widthStyle}background-color:${bgColor};color:${textColor};font-size:${fontSize};font-weight:${fontWeight};border-radius:${borderRadius};padding:${buttonPadding};text-decoration:none;text-align:center;${borderStyle}cursor:pointer;font-family:arial,helvetica,sans-serif;box-sizing:border-box;">
+            ${text}
+          </a>
+        </div>
+      `;
+    },
+    renderHtml(values, ctx) {
+      const padding = values.containerPadding || "10px";
+      const bgColor = values.backgroundColor || "#3b82f6";
+      const textColor = values.textColor || "#ffffff";
+      const fontSize = values.fontSize || "14px";
+      const fontWeight = values.fontWeight || "700";
+      const borderRadius = values.borderRadius || "4px";
+      const buttonPadding = values.buttonPadding || "10px 20px";
+      const text = values.text || "Click Me";
+      const textAlign = values.textAlign || "center";
+      const href = values.href || "#";
+      const target = values.target || "_blank";
+      const borderColor = values.borderColor || bgColor;
+      const borderWidth = values.borderWidth || "0px";
+      const borderStyle = borderWidth !== "0px" ? `border:${borderWidth} solid ${borderColor};` : "border:none;";
+      const vml = parseInt(borderRadius) > 0 ? `
+  <!--[if mso]>
+  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${href}" style="height:auto;v-text-anchor:middle;width:auto;" arcsize="${Math.round(parseInt(borderRadius) / 20 * 100)}%" stroke="f" fillcolor="${bgColor}">
+    <w:anchorlock/>
+    <center style="color:${textColor};font-family:arial,helvetica,sans-serif;font-size:${fontSize};font-weight:${fontWeight};">${text}</center>
+  </v:roundrect>
+  <![endif]-->
+  <!--[if !mso]><!-->` : "<!--[if !mso]><!-->";
+      const vmlEnd = parseInt(borderRadius) > 0 ? "<!--<![endif]-->" : "<!--<![endif]-->";
+      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:${padding};font-family:arial,helvetica,sans-serif;" align="${textAlign}">
+    <div align="${textAlign}">
+      ${vml}
+      <a href="${href}" target="${target}" style="box-sizing:border-box;display:inline-block;text-decoration:none;-webkit-text-size-adjust:none;text-align:center;color:${textColor};background-color:${bgColor};border-radius:${borderRadius};-webkit-border-radius:${borderRadius};-moz-border-radius:${borderRadius};font-size:${fontSize};font-weight:${fontWeight};padding:${buttonPadding};font-family:arial,helvetica,sans-serif;${borderStyle}mso-border-alt:none;word-break:keep-all;">
+        <span style="line-height:120%;">${text}</span>
+      </a>
+      ${vmlEnd}
+    </div>
+  </td></tr></tbody>
+</table>`;
+    }
+  }
+};
+const dividerTool = {
+  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: "text" },
+        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: "text" }
+      }
+    },
+    general: {
+      title: "General",
+      options: {
+        hideDesktop: { label: "Hide on Desktop", defaultValue: false, widget: "toggle" },
+        hideMobile: { label: "Hide on Mobile", defaultValue: false, widget: "toggle" }
+      }
+    }
+  },
+  defaultValues: {
+    borderTopWidth: "1px",
+    borderTopStyle: "solid",
+    borderTopColor: "#cccccc",
+    width: "100%",
+    containerPadding: "10px"
+  },
+  renderer: {
+    renderEditor(values) {
+      const padding = values.containerPadding || "10px";
+      const width = values.width || "100%";
+      const bw = values.borderTopWidth || "1px";
+      const bs = values.borderTopStyle || "solid";
+      const bc = values.borderTopColor || "#cccccc";
+      return html`
+        <div style="padding:${padding};">
+          <div style="border-top:${bw} ${bs} ${bc};width:${width};margin:0 auto;"></div>
+        </div>
+      `;
+    },
+    renderHtml(values) {
+      const padding = values.containerPadding || "10px";
+      const width = values.width || "100%";
+      const bw = values.borderTopWidth || "1px";
+      const bs = values.borderTopStyle || "solid";
+      const bc = values.borderTopColor || "#cccccc";
+      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:${padding};font-family:arial,helvetica,sans-serif;" align="center">
+    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="${width}" style="border-collapse:collapse;table-layout:fixed;border-spacing:0;mso-table-lspace:0;mso-table-rspace:0;vertical-align:top;border-top:${bw} ${bs} ${bc};-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;">
+      <tbody><tr><td style="font-size:0;line-height:0;">&nbsp;</td></tr></tbody>
+    </table>
+  </td></tr></tbody>
+</table>`;
+    }
+  }
+};
+const htmlTool = {
+  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>`,
+  supportedDisplayModes: ["email", "web"],
+  position: 6,
+  options: {
+    html: {
+      title: "HTML",
+      options: {
+        html: {
+          label: "Custom HTML",
+          defaultValue: '<div style="padding:20px;text-align:center;color:#999;">Custom HTML Block</div>',
+          widget: "rich_text"
+        }
+      }
+    },
+    spacing: {
+      title: "Spacing",
+      options: {
+        containerPadding: { label: "Padding", defaultValue: "10px", widget: "text" }
+      }
+    },
+    general: {
+      title: "General",
+      options: {
+        hideDesktop: { label: "Hide on Desktop", defaultValue: false, widget: "toggle" },
+        hideMobile: { label: "Hide on Mobile", defaultValue: false, widget: "toggle" }
+      }
+    }
+  },
+  defaultValues: {
+    html: '<div style="padding:20px;text-align:center;color:#999;">Custom HTML Block</div>',
+    containerPadding: "10px"
+  },
+  renderer: {
+    renderEditor(values) {
+      const padding = values.containerPadding || "10px";
+      const content = values.html || "";
+      return html`<div style="padding:${padding};">${unsafeHTML(content)}</div>`;
+    },
+    renderHtml(values) {
+      const padding = values.containerPadding || "10px";
+      const content = values.html || "";
+      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:${padding};font-family:arial,helvetica,sans-serif;" align="left">
+    ${content}
+  </td></tr></tbody>
+</table>`;
+    }
+  }
+};
+const defaultSocials = [
+  { name: "Facebook", url: "https://facebook.com/", icon: "f", color: "#1877F2" },
+  { name: "Twitter", url: "https://twitter.com/", icon: "𝕏", color: "#000000" },
+  { name: "Instagram", url: "https://instagram.com/", icon: "📷", color: "#E4405F" },
+  { name: "LinkedIn", url: "https://linkedin.com/", icon: "in", color: "#0A66C2" }
+];
+const socialTool = {
+  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>`,
+  supportedDisplayModes: ["email", "web"],
+  position: 8,
+  options: {
+    icons: {
+      title: "Social Icons",
+      options: {
+        icons: { label: "Icons (JSON)", defaultValue: JSON.stringify(defaultSocials), widget: "rich_text" },
+        iconSize: { label: "Icon Size", defaultValue: "32px", widget: "text" },
+        iconSpacing: { label: "Spacing", defaultValue: "8px", widget: "text" }
+      }
+    },
+    style: {
+      title: "Style",
+      options: {
+        textAlign: { label: "Align", defaultValue: "center", widget: "text" }
+      }
+    },
+    spacing: {
+      title: "Spacing",
+      options: {
+        containerPadding: { label: "Padding", defaultValue: "10px", widget: "text" }
+      }
+    }
+  },
+  defaultValues: {
+    icons: JSON.stringify(defaultSocials),
+    iconSize: "32px",
+    iconSpacing: "8px",
+    textAlign: "center",
+    containerPadding: "10px"
+  },
+  renderer: {
+    renderEditor(values) {
+      const padding = values.containerPadding || "10px";
+      const textAlign = values.textAlign || "center";
+      const iconSize = values.iconSize || "32px";
+      const spacing = values.iconSpacing || "8px";
+      let icons = defaultSocials;
+      try {
+        icons = JSON.parse(values.icons);
+      } catch {
+      }
+      return html`
+        <div style="padding:${padding};text-align:${textAlign};">
+          ${icons.map(
+        (s) => html`
+              <a href=${s.url} target="_blank" style="display:inline-block;width:${iconSize};height:${iconSize};line-height:${iconSize};text-align:center;background:${s.color};color:white;border-radius:50%;text-decoration:none;font-size:14px;font-weight:bold;margin:0 ${spacing};font-family:arial,sans-serif;vertical-align:middle;">${s.icon}</a>
+            `
+      )}
+        </div>
+      `;
+    },
+    renderHtml(values) {
+      const padding = values.containerPadding || "10px";
+      const textAlign = values.textAlign || "center";
+      const iconSize = parseInt(values.iconSize || "32");
+      const spacing = values.iconSpacing || "8px";
+      let icons = defaultSocials;
+      try {
+        icons = JSON.parse(values.icons);
+      } catch {
+      }
+      const iconsHtml = icons.map(
+        (s) => `<td align="center" valign="middle" style="padding:0 ${spacing};">
+          <a href="${s.url}" target="_blank" style="text-decoration:none;">
+            <table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr>
+              <td width="${iconSize}" height="${iconSize}" align="center" valign="middle" style="width:${iconSize}px;height:${iconSize}px;background:${s.color};border-radius:50%;color:#ffffff;font-size:14px;font-weight:bold;font-family:arial,sans-serif;">
+                ${s.icon}
+              </td>
+            </tr></table>
+          </a>
+        </td>`
+      ).join("\n");
+      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:${padding};font-family:arial,helvetica,sans-serif;" align="${textAlign}">
+    <table role="presentation" cellpadding="0" cellspacing="0" border="0" align="${textAlign}"><tr>${iconsHtml}</tr></table>
+  </td></tr></tbody>
+</table>`;
+    }
+  }
+};
+const defaultItems = [
+  { text: "Home", href: "#" },
+  { text: "About", href: "#" },
+  { text: "Contact", href: "#" }
+];
+const menuTool = {
+  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>`,
+  supportedDisplayModes: ["email", "web"],
+  position: 9,
+  options: {
+    menu: {
+      title: "Menu",
+      options: {
+        items: { label: "Items (JSON)", defaultValue: JSON.stringify(defaultItems), widget: "rich_text" }
+      }
+    },
+    style: {
+      title: "Style",
+      options: {
+        textAlign: { label: "Align", defaultValue: "center", widget: "text" },
+        fontSize: { label: "Font Size", defaultValue: "14px", widget: "text" },
+        color: { label: "Text Color", defaultValue: "#333333", widget: "color_picker" },
+        separator: { label: "Separator", defaultValue: "|", widget: "text" },
+        separatorColor: { label: "Separator Color", defaultValue: "#cccccc", widget: "color_picker" }
+      }
+    },
+    spacing: {
+      title: "Spacing",
+      options: {
+        containerPadding: { label: "Padding", defaultValue: "10px", widget: "text" }
+      }
+    }
+  },
+  defaultValues: {
+    items: JSON.stringify(defaultItems),
+    textAlign: "center",
+    fontSize: "14px",
+    color: "#333333",
+    separator: "|",
+    separatorColor: "#cccccc",
+    containerPadding: "10px"
+  },
+  renderer: {
+    renderEditor(values) {
+      const padding = values.containerPadding || "10px";
+      const textAlign = values.textAlign || "center";
+      const fontSize = values.fontSize || "14px";
+      const color = values.color || "#333333";
+      const sep = values.separator || "|";
+      const sepColor = values.separatorColor || "#cccccc";
+      let items = defaultItems;
+      try {
+        items = JSON.parse(values.items);
+      } catch {
+      }
+      return html`
+        <div style="padding:${padding};text-align:${textAlign};font-size:${fontSize};font-family:arial,sans-serif;">
+          ${items.map(
+        (item, i) => html`${i > 0 ? html`<span style="color:${sepColor};padding:0 8px;">${sep}</span>` : ""}
+              <a href=${item.href} style="color:${color};text-decoration:none;">${item.text}</a>`
+      )}
+        </div>
+      `;
+    },
+    renderHtml(values) {
+      const padding = values.containerPadding || "10px";
+      const textAlign = values.textAlign || "center";
+      const fontSize = values.fontSize || "14px";
+      const color = values.color || "#333333";
+      const sep = values.separator || "|";
+      const sepColor = values.separatorColor || "#cccccc";
+      let items = defaultItems;
+      try {
+        items = JSON.parse(values.items);
+      } catch {
+      }
+      const linksHtml = items.map((item, i) => {
+        const prefix = i > 0 ? `<span style="color:${sepColor};padding:0 8px;">${sep}</span>` : "";
+        return `${prefix}<a href="${item.href}" target="_blank" style="color:${color};text-decoration:none;font-family:arial,helvetica,sans-serif;font-size:${fontSize};">${item.text}</a>`;
+      }).join("");
+      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:${padding};font-family:arial,helvetica,sans-serif;" align="${textAlign}">
+    <div style="text-align:${textAlign};">${linksHtml}</div>
+  </td></tr></tbody>
+</table>`;
+    }
+  }
+};
+function getYouTubeThumbnail(url) {
+  const match = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/);
+  return match ? `https://img.youtube.com/vi/${match[1]}/maxresdefault.jpg` : null;
+}
+const videoTool = {
+  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>`,
+  supportedDisplayModes: ["email", "web"],
+  position: 10,
+  options: {
+    video: {
+      title: "Video",
+      options: {
+        url: { label: "Video URL", defaultValue: "https://www.youtube.com/watch?v=dQw4w9WgXcQ", widget: "text" },
+        thumbnailUrl: { label: "Thumbnail URL (auto)", defaultValue: "", widget: "text" },
+        alt: { label: "Alt Text", defaultValue: "Video", widget: "text" }
+      }
+    },
+    style: {
+      title: "Style",
+      options: {
+        textAlign: { label: "Align", defaultValue: "center", widget: "text" }
+      }
+    },
+    spacing: {
+      title: "Spacing",
+      options: {
+        containerPadding: { label: "Padding", defaultValue: "10px", widget: "text" }
+      }
+    }
+  },
+  defaultValues: {
+    url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+    thumbnailUrl: "",
+    alt: "Video",
+    textAlign: "center",
+    containerPadding: "10px"
+  },
+  renderer: {
+    renderEditor(values) {
+      const padding = values.containerPadding || "10px";
+      const url = values.url || "";
+      const thumbnail = values.thumbnailUrl || getYouTubeThumbnail(url) || "";
+      const textAlign = values.textAlign || "center";
+      if (!thumbnail) {
+        return html`
+          <div style="padding:${padding};text-align:${textAlign};">
+            <div style="background:#0f172a;border-radius:8px;padding:40px;text-align:center;color:white;font-family:sans-serif;position:relative;">
+              <div style="font-size:48px;opacity:0.8;">▶</div>
+              <div style="font-size:12px;margin-top:8px;opacity:0.6;">${url || "Enter video URL"}</div>
+            </div>
+          </div>
+        `;
+      }
+      return html`
+        <div style="padding:${padding};text-align:${textAlign};">
+          <div style="position:relative;display:inline-block;max-width:100%;cursor:pointer;">
+            <img src=${thumbnail} alt="Video thumbnail" style="display:block;max-width:100%;border-radius:4px;" />
+            <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;">
+              <div style="width:60px;height:60px;background:rgba(0,0,0,0.7);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:24px;">▶</div>
+            </div>
+          </div>
+        </div>
+      `;
+    },
+    renderHtml(values, ctx) {
+      const padding = values.containerPadding || "10px";
+      const url = values.url || "#";
+      const thumbnail = values.thumbnailUrl || getYouTubeThumbnail(url) || "";
+      const alt = values.alt || "Video";
+      const textAlign = values.textAlign || "center";
+      const widthPx = ctx.columnWidth;
+      const imgTag = thumbnail ? `<img src="${thumbnail}" alt="${alt}" width="${widthPx}" style="display:block;max-width:100%;width:${widthPx}px;border:0;" />` : `<div style="background:#0f172a;padding:40px;text-align:center;color:white;font-family:arial,sans-serif;font-size:16px;">▶ Watch Video</div>`;
+      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:${padding};font-family:arial,helvetica,sans-serif;" align="${textAlign}">
+    <a href="${url}" target="_blank" style="text-decoration:none;">
+      ${imgTag}
+    </a>
+  </td></tr></tbody>
+</table>`;
+    }
+  }
+};
+const timerTool = {
+  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>`,
+  supportedDisplayModes: ["email", "web"],
+  position: 11,
+  options: {
+    timer: {
+      title: "Timer",
+      options: {
+        endDate: { label: "End Date (ISO)", defaultValue: new Date(Date.now() + 7 * 864e5).toISOString().split("T")[0], widget: "text" },
+        expiredMessage: { label: "Expired Message", defaultValue: "This offer has expired", widget: "text" }
+      }
+    },
+    style: {
+      title: "Style",
+      options: {
+        textAlign: { label: "Align", defaultValue: "center", widget: "text" },
+        backgroundColor: { label: "Background", defaultValue: "#1f2937", widget: "color_picker" },
+        textColor: { label: "Text Color", defaultValue: "#ffffff", widget: "color_picker" },
+        fontSize: { label: "Font Size", defaultValue: "32px", widget: "text" }
+      }
+    },
+    spacing: {
+      title: "Spacing",
+      options: {
+        containerPadding: { label: "Padding", defaultValue: "10px", widget: "text" }
+      }
+    }
+  },
+  defaultValues: {
+    endDate: new Date(Date.now() + 7 * 864e5).toISOString().split("T")[0],
+    expiredMessage: "This offer has expired",
+    textAlign: "center",
+    backgroundColor: "#1f2937",
+    textColor: "#ffffff",
+    fontSize: "32px",
+    containerPadding: "10px"
+  },
+  renderer: {
+    renderEditor(values) {
+      const padding = values.containerPadding || "10px";
+      const bg = values.backgroundColor || "#1f2937";
+      const color = values.textColor || "#ffffff";
+      const fontSize = values.fontSize || "32px";
+      const textAlign = values.textAlign || "center";
+      return html`
+        <div style="padding:${padding};">
+          <div style="background:${bg};color:${color};font-size:${fontSize};text-align:${textAlign};padding:20px;border-radius:4px;font-family:monospace;font-weight:bold;letter-spacing:4px;">
+            00 : 00 : 00 : 00
+            <div style="font-size:11px;letter-spacing:8px;opacity:0.6;margin-top:4px;">DAYS &nbsp; HRS &nbsp; MIN &nbsp; SEC</div>
+          </div>
+        </div>
+      `;
+    },
+    renderHtml(values) {
+      const padding = values.containerPadding || "10px";
+      const bg = values.backgroundColor || "#1f2937";
+      const color = values.textColor || "#ffffff";
+      const fontSize = values.fontSize || "32px";
+      const textAlign = values.textAlign || "center";
+      values.endDate || "";
+      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:${padding};font-family:arial,helvetica,sans-serif;" align="${textAlign}">
+    <div style="background-color:${bg};color:${color};font-size:${fontSize};text-align:${textAlign};padding:20px;border-radius:4px;font-family:'Courier New',monospace;font-weight:bold;letter-spacing:4px;">
+      <div>00 : 00 : 00 : 00</div>
+      <div style="font-size:11px;letter-spacing:8px;opacity:0.6;margin-top:4px;">DAYS &nbsp; HRS &nbsp; MIN &nbsp; SEC</div>
+    </div>
+  </td></tr></tbody>
+</table>`;
+    }
+  }
+};
+const defaultTableData = [
+  ["Header 1", "Header 2", "Header 3"],
+  ["Cell 1", "Cell 2", "Cell 3"],
+  ["Cell 4", "Cell 5", "Cell 6"]
+];
+const tableTool = {
+  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>`,
+  supportedDisplayModes: ["email", "web"],
+  position: 12,
+  options: {
+    table: {
+      title: "Table",
+      options: {
+        tableData: { label: "Table Data (JSON)", defaultValue: JSON.stringify(defaultTableData), widget: "rich_text" }
+      }
+    },
+    style: {
+      title: "Style",
+      options: {
+        headerBg: { label: "Header Background", defaultValue: "#f3f4f6", widget: "color_picker" },
+        headerColor: { label: "Header Text Color", defaultValue: "#111827", widget: "color_picker" },
+        borderColor: { label: "Border Color", defaultValue: "#e5e7eb", widget: "color_picker" },
+        cellPadding: { label: "Cell Padding", defaultValue: "8px 12px", widget: "text" },
+        fontSize: { label: "Font Size", defaultValue: "14px", widget: "text" }
+      }
+    },
+    spacing: {
+      title: "Spacing",
+      options: {
+        containerPadding: { label: "Padding", defaultValue: "10px", widget: "text" }
+      }
+    }
+  },
+  defaultValues: {
+    tableData: JSON.stringify(defaultTableData),
+    headerBg: "#f3f4f6",
+    headerColor: "#111827",
+    borderColor: "#e5e7eb",
+    cellPadding: "8px 12px",
+    fontSize: "14px",
+    containerPadding: "10px"
+  },
+  renderer: {
+    renderEditor(values) {
+      const padding = values.containerPadding || "10px";
+      const headerBg = values.headerBg || "#f3f4f6";
+      const headerColor = values.headerColor || "#111827";
+      const borderColor = values.borderColor || "#e5e7eb";
+      const cellPadding = values.cellPadding || "8px 12px";
+      const fontSize = values.fontSize || "14px";
+      let data = defaultTableData;
+      try {
+        data = JSON.parse(values.tableData);
+      } catch {
+      }
+      const headerRow = data[0] || [];
+      const bodyRows = data.slice(1);
+      return html`
+        <div style="padding:${padding};overflow-x:auto;">
+          <table style="width:100%;border-collapse:collapse;font-size:${fontSize};font-family:arial,sans-serif;">
+            <thead>
+              <tr>
+                ${headerRow.map((cell) => html`<th style="padding:${cellPadding};background:${headerBg};color:${headerColor};border:1px solid ${borderColor};text-align:left;font-weight:600;">${cell}</th>`)}
+              </tr>
+            </thead>
+            <tbody>
+              ${bodyRows.map((row) => html`
+                <tr>
+                  ${row.map((cell) => html`<td style="padding:${cellPadding};border:1px solid ${borderColor};">${cell}</td>`)}
+                </tr>
+              `)}
+            </tbody>
+          </table>
+        </div>
+      `;
+    },
+    renderHtml(values) {
+      const padding = values.containerPadding || "10px";
+      const headerBg = values.headerBg || "#f3f4f6";
+      const headerColor = values.headerColor || "#111827";
+      const borderColor = values.borderColor || "#e5e7eb";
+      const cellPadding = values.cellPadding || "8px 12px";
+      const fontSize = values.fontSize || "14px";
+      let data = defaultTableData;
+      try {
+        data = JSON.parse(values.tableData);
+      } catch {
+      }
+      const headerRow = data[0] || [];
+      const bodyRows = data.slice(1);
+      const headerHtml = headerRow.map(
+        (c) => `<th style="padding:${cellPadding};background-color:${headerBg};color:${headerColor};border:1px solid ${borderColor};text-align:left;font-weight:600;font-family:arial,helvetica,sans-serif;font-size:${fontSize};">${c}</th>`
+      ).join("");
+      const bodyHtml = bodyRows.map(
+        (row) => `<tr>${row.map((c) => `<td style="padding:${cellPadding};border:1px solid ${borderColor};font-family:arial,helvetica,sans-serif;font-size:${fontSize};">${c}</td>`).join("")}</tr>`
+      ).join("");
+      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:${padding};font-family:arial,helvetica,sans-serif;" align="left">
+    <table cellpadding="0" cellspacing="0" width="100%" border="0" style="border-collapse:collapse;">
+      <thead><tr>${headerHtml}</tr></thead>
+      <tbody>${bodyHtml}</tbody>
+    </table>
+  </td></tr></tbody>
+</table>`;
+    }
+  }
+};
+const formTool = {
+  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>`,
+  supportedDisplayModes: ["web"],
+  position: 13,
+  options: {
+    form: {
+      title: "Form",
+      options: {
+        actionUrl: { label: "Action URL", defaultValue: "#", widget: "text" },
+        method: { label: "Method", defaultValue: "POST", widget: "text" },
+        submitText: { label: "Submit Text", defaultValue: "Submit", widget: "text" },
+        fields: { label: "Fields (JSON)", defaultValue: JSON.stringify([
+          { label: "Name", name: "name", type: "text", placeholder: "Your name" },
+          { label: "Email", name: "email", type: "email", placeholder: "your@email.com" }
+        ]), widget: "rich_text" }
+      }
+    },
+    style: {
+      title: "Style",
+      options: {
+        buttonBg: { label: "Button Color", defaultValue: "#3b82f6", widget: "color_picker" },
+        buttonColor: { label: "Button Text", defaultValue: "#ffffff", widget: "color_picker" }
+      }
+    },
+    spacing: {
+      title: "Spacing",
+      options: {
+        containerPadding: { label: "Padding", defaultValue: "10px", widget: "text" }
+      }
+    }
+  },
+  defaultValues: {
+    actionUrl: "#",
+    method: "POST",
+    submitText: "Submit",
+    fields: JSON.stringify([
+      { label: "Name", name: "name", type: "text", placeholder: "Your name" },
+      { label: "Email", name: "email", type: "email", placeholder: "your@email.com" }
+    ]),
+    buttonBg: "#3b82f6",
+    buttonColor: "#ffffff",
+    containerPadding: "10px"
+  },
+  renderer: {
+    renderEditor(values) {
+      const padding = values.containerPadding || "10px";
+      const submitText = values.submitText || "Submit";
+      const buttonBg = values.buttonBg || "#3b82f6";
+      const buttonColor = values.buttonColor || "#ffffff";
+      let fields = [];
+      try {
+        fields = JSON.parse(values.fields);
+      } catch {
+      }
+      return html`
+        <div style="padding:${padding};font-family:arial,sans-serif;">
+          ${fields.map((f) => html`
+            <div style="margin-bottom:12px;">
+              <label style="display:block;font-size:13px;color:#374151;margin-bottom:4px;font-weight:500;">${f.label}</label>
+              <input type=${f.type || "text"} placeholder=${f.placeholder || ""} style="width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:4px;font-size:14px;box-sizing:border-box;" />
+            </div>
+          `)}
+          <button style="background:${buttonBg};color:${buttonColor};border:none;padding:10px 24px;border-radius:4px;font-size:14px;font-weight:600;cursor:pointer;">${submitText}</button>
+        </div>
+      `;
+    },
+    renderHtml(values) {
+      const padding = values.containerPadding || "10px";
+      const actionUrl = values.actionUrl || "#";
+      const method = values.method || "POST";
+      const submitText = values.submitText || "Submit";
+      const buttonBg = values.buttonBg || "#3b82f6";
+      const buttonColor = values.buttonColor || "#ffffff";
+      let fields = [];
+      try {
+        fields = JSON.parse(values.fields);
+      } catch {
+      }
+      const fieldsHtml = fields.map(
+        (f) => `<div style="margin-bottom:12px;">
+          <label style="display:block;font-size:13px;color:#374151;margin-bottom:4px;font-weight:500;font-family:arial,helvetica,sans-serif;">${f.label}</label>
+          <input type="${f.type || "text"}" name="${f.name}" placeholder="${f.placeholder || ""}" style="width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:4px;font-size:14px;box-sizing:border-box;font-family:arial,helvetica,sans-serif;" />
+        </div>`
+      ).join("");
+      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:${padding};font-family:arial,helvetica,sans-serif;" align="left">
+    <form action="${actionUrl}" method="${method}">
+      ${fieldsHtml}
+      <button type="submit" style="background-color:${buttonBg};color:${buttonColor};border:none;padding:10px 24px;border-radius:4px;font-size:14px;font-weight:600;cursor:pointer;font-family:arial,helvetica,sans-serif;">${submitText}</button>
+    </form>
+  </td></tr></tbody>
+</table>`;
+    }
+  }
+};
+function wrapInDocumentShell(bodyHtml, cssBlock, bodyValues) {
+  const bgColor = bodyValues.backgroundColor || "#e7e7e7";
+  const contentWidth = bodyValues.contentWidth || "600px";
+  const fontFamily = bodyValues.fontFamily?.value || "arial,helvetica,sans-serif";
+  const textColor = bodyValues.textColor || "#000000";
+  const preheaderText = bodyValues.preheaderText || "";
+  const preheader = preheaderText ? `<div style="display:none;font-size:1px;color:${bgColor};line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">${preheaderText}${"&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: ${fontFamily} !important; }
+  </style>
+  <![endif]-->
+  <!--[if !mso]><!-->
+  <style type="text/css">
+    ${cssBlock}
+  </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:${bgColor};color:${textColor};">
+  ${preheader}
+  <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:${bgColor};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(contentWidth)}" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
+          ${bodyHtml}
+          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</body>
+</html>`;
+}
+function renderRow(row, bodyValues, toolRenderers) {
+  const contentWidth = parseInt(bodyValues.contentWidth || "600");
+  const bgColor = row.values.backgroundColor || "";
+  const colsBgColor = row.values.columnsBackgroundColor || "";
+  const padding = row.values.padding || "0px";
+  const totalCells = row.cells.reduce((a, b) => a + b, 0);
+  const bgStyle = bgColor ? `background-color:${bgColor};` : "";
+  const bgImage = row.values.backgroundImage?.url ? `background-image:url('${row.values.backgroundImage.url}');background-repeat:${row.values.backgroundImage.repeat ? "repeat" : "no-repeat"};background-position:center top;background-size:${row.values.backgroundImage.cover ? "cover" : "auto"};` : "";
+  const columnsHtml = row.columns.map((col, i) => {
+    const colWidthPx = Math.round(row.cells[i] / totalCells * contentWidth);
+    return renderColumn(col, colWidthPx, colsBgColor, bodyValues, toolRenderers);
+  });
+  const needsGhostTable = row.columns.length > 1;
+  let innerHtml;
+  if (needsGhostTable) {
+    const ghostCols = row.columns.map((col, i) => {
+      const colWidthPx = Math.round(row.cells[i] / totalCells * contentWidth);
+      const colHtml = renderColumn(col, colWidthPx, colsBgColor, bodyValues, toolRenderers);
+      return `<!--[if (mso)|(IE)]><td align="center" width="${colWidthPx}" style="width:${colWidthPx}px;padding:0px;border:none;" valign="top"><![endif]-->
+${colHtml}
+<!--[if (mso)|(IE)]></td><![endif]-->`;
+    });
+    innerHtml = `<!--[if (mso)|(IE)]><table role="presentation" width="${contentWidth}" cellpadding="0" cellspacing="0" border="0"><tr>${ghostCols.join("\n")}</tr></table><![endif]-->
+
+<!--[if !mso]><!-->
+<div style="max-width:${contentWidth}px;margin:0 auto;">
+${columnsHtml.join("\n")}
+</div>
+<!--<![endif]-->`;
+  } else {
+    innerHtml = columnsHtml.join("\n");
+  }
+  const hideDesktop = row.values.hideDesktop ? " u_hide_desktop" : "";
+  const hideMobile = row.values.hideMobile ? " u_hide_mobile" : "";
+  return `<div class="u_row${hideDesktop}${hideMobile}" style="padding:${padding};${bgStyle}${bgImage}">
+  <div style="margin:0 auto;min-width:320px;max-width:${contentWidth}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;">
+      ${innerHtml}
+    </div>
+  </div>
+</div>`;
+}
+function renderColumn(col, widthPx, colsBgColor, bodyValues, toolRenderers) {
+  const bgColor = col.values.backgroundColor || colsBgColor || "";
+  const padding = col.values.padding || "0px";
+  const borderRadius = col.values.borderRadius || "0px";
+  const bgStyle = bgColor ? `background-color:${bgColor};` : "";
+  const contentsHtml = col.contents.map((content) => {
+    const renderer = toolRenderers.get(content.type);
+    if (!renderer) return `<!-- unknown tool: ${content.type} -->`;
+    const ctx = {
+      columnWidth: widthPx,
+      displayMode: "email",
+      contentWidth: parseInt(bodyValues.contentWidth || "600"),
+      bodyValues
+    };
+    return renderer(content.values, ctx);
+  }).join("\n");
+  return `<div class="u_column" style="max-width:${widthPx}px;min-width:${Math.min(widthPx, 320)}px;display:table-cell;vertical-align:top;">
+  <div style="height:100%;width:100% !important;border-radius:${borderRadius};-webkit-border-radius:${borderRadius};${bgStyle}">
+    <div style="box-sizing:border-box;height:100%;padding:${padding};border:none;border-radius:${borderRadius};-webkit-border-radius:${borderRadius};">
+      ${contentsHtml || '<!--[if (!mso)&(!IE)]><!--><div style="height:0;min-height:1px;font-size:0;">&nbsp;</div><!--<![endif]-->'}
+    </div>
+  </div>
+</div>`;
+}
+function getResponsiveCss(contentWidth) {
+  return `
+@media only screen and (min-width: ${contentWidth + 20}px) {
+  .u_row .u_column { display: table-cell; }
+}
+
+@media only screen and (max-width: ${contentWidth + 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: ${contentWidth + 20}px) {
+  .u_hide_desktop { display: block !important; }
+  .u_hide_mobile { display: none !important; }
+}
+
+@media only screen and (min-width: ${contentWidth + 21}px) {
+  .u_hide_desktop { display: none !important; }
+  .u_hide_mobile { display: block !important; }
+}`;
+}
+function renderDesignToHtml(design, toolRenderers, options) {
+  const bodyValues = design.body.values;
+  const contentWidth = parseInt(bodyValues.contentWidth || "600");
+  const rowsHtml = design.body.rows.map((row) => renderRow(row, bodyValues, toolRenderers)).join("\n");
+  const cssBlock = getResponsiveCss(contentWidth);
+  let fullHtml = wrapInDocumentShell(rowsHtml, cssBlock, bodyValues);
+  if (options?.mergeTags) {
+    for (const [tag, value] of Object.entries(options.mergeTags)) {
+      fullHtml = fullHtml.replaceAll(`{{${tag}}}`, value);
+    }
+  }
+  const bodyMatch = fullHtml.match(/<body[^>]*>([\s\S]*)<\/body>/i);
+  const cssMatch = fullHtml.match(/<style[^>]*>([\s\S]*?)<\/style>/gi);
+  const fontsUsed = [];
+  if (bodyValues.fontFamily?.url) {
+    fontsUsed.push(bodyValues.fontFamily.url);
+  }
+  return {
+    design: structuredClone(design),
+    html: fullHtml,
+    chunks: {
+      body: bodyMatch?.[1] ?? rowsHtml,
+      css: cssMatch?.map((s) => s.replace(/<\/?style[^>]*>/gi, "")).join("\n") ?? cssBlock,
+      fonts: fontsUsed,
+      js: ""
+    }
+  };
+}
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let MailEditorElement = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.options = {};
+    this.store = new EditorStore();
+    this.toolRegistry = new ToolRegistry();
+    this.dragManager = null;
+    this.callbacks = /* @__PURE__ */ new Map();
+    this.unsubscribe = null;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.registerBuiltInTools();
+    this.applyOptions();
+  }
+  firstUpdated() {
+    this.dragManager = new DragManager(this.store, this.toolRegistry, this.shadowRoot);
+    this.dragManager.attach();
+    this.unsubscribe = this.store.subscribe(() => this.requestUpdate());
+    this.store.events.on("design:loaded", (detail) => {
+      this.dispatchEvent(new CustomEvent("design:loaded", { detail, bubbles: true, composed: true }));
+    });
+    this.store.events.on("design:updated", (detail) => {
+      this.dispatchEvent(new CustomEvent("design:updated", { detail, bubbles: true, composed: true }));
+    });
+    this.dispatchEvent(new CustomEvent("editor:ready", { bubbles: true, composed: true }));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.dragManager?.detach();
+    this.unsubscribe?.();
+    this.store.events.removeAllListeners();
+  }
+  // ----------------------------------------------------------
+  // Public API — mirrors Unlayer
+  // ----------------------------------------------------------
+  loadDesign(design) {
+    this.store.loadDesign(design);
+  }
+  saveDesign(callback) {
+    callback(structuredClone(this.store.getDesign()));
+  }
+  exportHtml(callback, options) {
+    const design = this.store.getDesign();
+    const toolRenderers = /* @__PURE__ */ new Map();
+    for (const tool of this.toolRegistry.getAll()) {
+      toolRenderers.set(tool.name, (values, ctx) => tool.renderer.renderHtml(values, ctx));
+    }
+    const result = renderDesignToHtml(design, toolRenderers, options);
+    callback(result);
+  }
+  async exportHtmlAsync(options) {
+    return new Promise((resolve) => this.exportHtml(resolve, options));
+  }
+  registerTool(definition) {
+    this.toolRegistry.register(definition);
+    this.requestUpdate();
+  }
+  registerPropertyEditor(_name, _editor) {
+  }
+  registerTab(_tab) {
+  }
+  registerCallback(type, callback) {
+    this.callbacks.set(type, callback);
+  }
+  setMergeTags(_tags) {
+  }
+  undo() {
+    this.store.undo();
+  }
+  redo() {
+    this.store.redo();
+  }
+  setBodyValues(values) {
+    this.store.updateBodyValues(values);
+  }
+  // ----------------------------------------------------------
+  // Internal
+  // ----------------------------------------------------------
+  registerBuiltInTools() {
+    this.toolRegistry.register(textTool);
+    this.toolRegistry.register(headingTool);
+    this.toolRegistry.register(paragraphTool);
+    this.toolRegistry.register(imageTool);
+    this.toolRegistry.register(buttonTool);
+    this.toolRegistry.register(dividerTool);
+    this.toolRegistry.register(htmlTool);
+    this.toolRegistry.register(socialTool);
+    this.toolRegistry.register(menuTool);
+    this.toolRegistry.register(videoTool);
+    this.toolRegistry.register(timerTool);
+    this.toolRegistry.register(tableTool);
+    this.toolRegistry.register(formTool);
+  }
+  applyOptions() {
+    if (this.options.design) {
+      this.store.loadDesign(this.options.design);
+    }
+  }
+  render() {
+    return html`
+      <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>
+    `;
+  }
+};
+MailEditorElement.styles = css`
+    :host {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      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; }
+  `;
+__decorateClass([
+  property({ type: Object })
+], MailEditorElement.prototype, "options", 2);
+MailEditorElement = __decorateClass([
+  customElement("mail-editor")
+], MailEditorElement);
+export {
+  EditorStore as E,
+  MailEditorElement as M,
+  ToolRegistry as T
+};
+//# sourceMappingURL=mail-editor-DzI7SmSe.js.map