@emabuild/core 0.0.3 → 0.0.5

package/dist/mail-editor-ClkIyPni.js

@@ -1,2245 +0,0 @@
-import { html, css, LitElement } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
-function createCounterManager() {
-  const counters = {};
-  return {
-    getCounters() {
-      return { ...counters };
-    },
-    setCounters(c) {
-      for (const key of Object.keys(counters)) {
-        delete counters[key];
-      }
-      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();
-  }
-  /** Register a listener for an event */
-  on(event, listener) {
-    if (!this.listeners.has(event)) {
-      this.listeners.set(event, /* @__PURE__ */ new Set());
-    }
-    this.listeners.get(event).add(listener);
-  }
-  /** Remove a specific listener */
-  off(event, listener) {
-    this.listeners.get(event)?.delete(listener);
-  }
-  /** Emit an event with a payload. Errors in listeners are caught and logged. */
-  emit(event, payload) {
-    this.listeners.get(event)?.forEach((fn) => {
-      try {
-        fn(payload);
-      } catch (e) {
-        console.error(`[emabuild] Error in "${event}" listener:`, e);
-      }
-    });
-  }
-  /** Remove all listeners, optionally scoped to a single event */
-  removeAllListeners(event) {
-    if (event) {
-      this.listeners.delete(event);
-    } else {
-      this.listeners.clear();
-    }
-  }
-}
-class HistoryManager {
-  constructor(maxHistory = 50) {
-    this.undoStack = [];
-    this.redoStack = [];
-    this.maxHistory = maxHistory;
-  }
-  /** 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(design) {
-    this.undoStack.push(structuredClone(design));
-    if (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(currentDesign) {
-    const prev = this.undoStack.pop();
-    if (!prev) return void 0;
-    this.redoStack.push(structuredClone(currentDesign));
-    return prev;
-  }
-  /** Restore the next state, pushing current state to undo. Returns the restored design or undefined. */
-  redo(currentDesign) {
-    const next = this.redoStack.pop();
-    if (!next) return void 0;
-    this.undoStack.push(structuredClone(currentDesign));
-    return next;
-  }
-  /** Clear all history (e.g. when loading a new design) */
-  clear() {
-    this.undoStack = [];
-    this.redoStack = [];
-  }
-}
-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
-  };
-}
-function createRow(cm, cellProportions) {
-  const rowNum = cm.next("u_row");
-  const columns = cellProportions.map(() => {
-    const colNum = cm.next("u_column");
-    return {
-      id: `u_column_${colNum}`,
-      contents: [],
-      values: {
-        backgroundColor: "",
-        padding: "0px",
-        border: {},
-        borderRadius: "0px",
-        _meta: { htmlID: `u_column_${colNum}`, htmlClassNames: "u_column" }
-      }
-    };
-  });
-  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" }
-    }
-  };
-}
-function createContent(cm, type, values = {}) {
-  const counter = cm.next(`u_content_${type}`);
-  const id = `u_content_${type}_${counter}`;
-  return {
-    id,
-    type,
-    values: {
-      containerPadding: "10px",
-      anchor: "",
-      hideDesktop: false,
-      hideMobile: false,
-      displayCondition: null,
-      _meta: { htmlID: id, htmlClassNames: `u_content_${type}` },
-      ...values
-    }
-  };
-}
-function findRow(design, rowId) {
-  return design.body.rows.find((r) => r.id === rowId);
-}
-function findColumn(design, columnId) {
-  for (const row of design.body.rows) {
-    const col = row.columns.find((c) => c.id === columnId);
-    if (col) return col;
-  }
-  return void 0;
-}
-function findContent(design, contentId) {
-  for (const row of 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;
-}
-function findParentColumn(design, contentId) {
-  for (const row of design.body.rows) {
-    for (const col of row.columns) {
-      if (col.contents.some((c) => c.id === contentId)) return col;
-    }
-  }
-  return void 0;
-}
-function findParentRow(design, columnId) {
-  for (const row of design.body.rows) {
-    if (row.columns.some((c) => c.id === columnId)) return row;
-  }
-  return void 0;
-}
-function getRowIndex(design, rowId) {
-  return design.body.rows.findIndex((r) => r.id === rowId);
-}
-class EditorStore {
-  constructor() {
-    this.history = new HistoryManager();
-    this.counterManager = createCounterManager();
-    this.subscribers = /* @__PURE__ */ new Set();
-    this.events = new EventEmitter();
-    this._selectedId = null;
-    this._hoveredId = null;
-    this._viewMode = "desktop";
-    this._activeTab = "content";
-    this.design = createEmptyDesign();
-  }
-  // ── Subscriptions ──────────────────────────────────────────
-  /** Subscribe to all state changes. Returns an unsubscribe function. */
-  subscribe(fn) {
-    this.subscribers.add(fn);
-    return () => this.subscribers.delete(fn);
-  }
-  notify() {
-    this.subscribers.forEach((fn) => fn());
-  }
-  // ── 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(design) {
-    this.design = structuredClone(design);
-    this.counterManager.setCounters(this.design.counters);
-    this.history.clear();
-    this._selectedId = null;
-    this.notify();
-    this.events.emit("design:loaded", { design: this.design });
-  }
-  // ── Undo / Redo ────────────────────────────────────────────
-  undo() {
-    const prev = this.history.undo(this.design);
-    if (!prev) return;
-    this.design = prev;
-    this.counterManager.setCounters(this.design.counters);
-    this.notify();
-    this.emitUpdate("content_updated");
-  }
-  redo() {
-    const next = this.history.redo(this.design);
-    if (!next) return;
-    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 ─────────────────────────────────────────
-  /** Add a row at the given index (or at the end) */
-  addRow(row, index) {
-    this.history.push(this.design);
-    const rows = this.design.body.rows;
-    const cloned = structuredClone(row);
-    if (index !== void 0 && index >= 0 && index <= rows.length) {
-      rows.splice(index, 0, cloned);
-    } else {
-      rows.push(cloned);
-    }
-    this.syncCounters();
-    this.notify();
-    this.emitUpdate("row_added", cloned);
-  }
-  /** Remove a row by ID */
-  removeRow(rowId) {
-    const idx = getRowIndex(this.design, rowId);
-    if (idx === -1) return;
-    this.history.push(this.design);
-    this.design.body.rows.splice(idx, 1);
-    if (this._selectedId === rowId) this._selectedId = null;
-    this.notify();
-    this.emitUpdate("row_removed");
-  }
-  /** Move a row from one index to another */
-  moveRow(fromIndex, toIndex) {
-    this.history.push(this.design);
-    const rows = this.design.body.rows;
-    const [row] = rows.splice(fromIndex, 1);
-    rows.splice(toIndex, 0, row);
-    this.notify();
-    this.emitUpdate("row_reordered");
-  }
-  /** Duplicate a row, assigning fresh IDs to all nested elements */
-  duplicateRow(rowId) {
-    const row = findRow(this.design, rowId);
-    if (!row) return;
-    this.history.push(this.design);
-    const cloned = structuredClone(row);
-    const rowNum = this.counterManager.next("u_row");
-    cloned.id = `u_row_${rowNum}`;
-    cloned.values._meta = { htmlID: cloned.id, htmlClassNames: "u_row" };
-    for (const col of cloned.columns) {
-      const colNum = this.counterManager.next("u_column");
-      col.id = `u_column_${colNum}`;
-      col.values._meta = { htmlID: col.id, htmlClassNames: "u_column" };
-      for (const content of col.contents) {
-        const cNum = this.counterManager.next(`u_content_${content.type}`);
-        content.id = `u_content_${content.type}_${cNum}`;
-        content.values._meta = { htmlID: content.id, htmlClassNames: `u_content_${content.type}` };
-      }
-    }
-    const idx = getRowIndex(this.design, rowId);
-    this.design.body.rows.splice(idx + 1, 0, cloned);
-    this.syncCounters();
-    this.notify();
-    this.emitUpdate("row_added", cloned);
-  }
-  /** Get the index of a row */
-  getRowIndex(rowId) {
-    return getRowIndex(this.design, rowId);
-  }
-  /** Update row-level values */
-  updateRowValues(rowId, patch) {
-    const row = findRow(this.design, rowId);
-    if (!row) return;
-    this.history.push(this.design);
-    Object.assign(row.values, patch);
-    this.notify();
-    this.emitUpdate("content_updated");
-  }
-  // ── Column Operations ──────────────────────────────────────
-  /** Update column-level values */
-  updateColumnValues(columnId, patch) {
-    const col = findColumn(this.design, columnId);
-    if (!col) return;
-    this.history.push(this.design);
-    Object.assign(col.values, patch);
-    this.notify();
-    this.emitUpdate("content_updated");
-  }
-  // ── Content Operations ─────────────────────────────────────
-  /** Add content to a column at the given index */
-  addContent(columnId, content, index) {
-    const col = findColumn(this.design, columnId);
-    if (!col) return;
-    this.history.push(this.design);
-    const cloned = structuredClone(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);
-  }
-  /** Remove a content block by ID */
-  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.history.push(this.design);
-          col.contents.splice(idx, 1);
-          if (this._selectedId === contentId) this._selectedId = null;
-          this.notify();
-          this.emitUpdate("content_removed");
-          return;
-        }
-      }
-    }
-  }
-  /** Update content values by ID */
-  updateContentValues(contentId, patch) {
-    const content = findContent(this.design, contentId);
-    if (!content) return;
-    this.history.push(this.design);
-    Object.assign(content.values, patch);
-    this.notify();
-    this.emitUpdate("content_updated");
-  }
-  /** Move a content block to a different column at a given index */
-  moveContent(contentId, targetColumnId, targetIndex) {
-    const content = findContent(this.design, contentId);
-    if (!content) return;
-    this.history.push(this.design);
-    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) {
-          col.contents.splice(idx, 1);
-          break;
-        }
-      }
-    }
-    const targetCol = findColumn(this.design, targetColumnId);
-    if (targetCol) targetCol.contents.splice(targetIndex, 0, content);
-    this.notify();
-    this.emitUpdate("content_reordered");
-  }
-  /** Duplicate a content block, inserting the copy right after the original */
-  duplicateContent(contentId) {
-    const content = findContent(this.design, 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.history.push(this.design);
-          const cloned = structuredClone(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}` };
-          col.contents.splice(idx + 1, 0, cloned);
-          this.syncCounters();
-          this.notify();
-          this.emitUpdate("content_added", cloned);
-          return;
-        }
-      }
-    }
-  }
-  // ── Body Values ────────────────────────────────────────────
-  /** Update body-level values (background, fonts, etc.) */
-  updateBodyValues(patch) {
-    this.history.push(this.design);
-    Object.assign(this.design.body.values, patch);
-    this.notify();
-    this.emitUpdate("body_updated");
-  }
-  // ── Lookups (delegate to design-lookup) ────────────────────
-  findRow(rowId) {
-    return findRow(this.design, rowId);
-  }
-  findColumn(columnId) {
-    return findColumn(this.design, columnId);
-  }
-  findContent(contentId) {
-    return findContent(this.design, contentId);
-  }
-  findParentColumn(contentId) {
-    return findParentColumn(this.design, contentId);
-  }
-  findParentRow(columnId) {
-    return findParentRow(this.design, columnId);
-  }
-  // ── Factory Methods (delegate to design-factory) ───────────
-  /** Create a new row with the given column layout */
-  createRow(cellProportions) {
-    const row = createRow(this.counterManager, cellProportions);
-    this.syncCounters();
-    return row;
-  }
-  /** Create a new content block for the given tool type */
-  createContent(type, values = {}) {
-    const content = createContent(this.counterManager, type, values);
-    this.syncCounters();
-    return content;
-  }
-  // ── Private Helpers ────────────────────────────────────────
-  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;
-  }
-};
-function createDropIndicator(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;
-}
-function positionIndicator(indicator, container, items, index, insetX = "4px") {
-  if (indicator.parentNode !== container) {
-    indicator.remove();
-    container.appendChild(indicator);
-  }
-  const containerEl = container instanceof ShadowRoot ? container.host : container;
-  const containerRect = containerEl.getBoundingClientRect();
-  let indicatorY;
-  if (items.length === 0 || index === 0) {
-    indicatorY = items.length === 0 ? 0 : items[0].getBoundingClientRect().top - containerRect.top;
-  } else if (index >= items.length) {
-    const lastRect = items[items.length - 1].getBoundingClientRect();
-    indicatorY = lastRect.bottom - containerRect.top;
-  } else {
-    const elRect = items[index].getBoundingClientRect();
-    indicatorY = elRect.top - containerRect.top;
-  }
-  Object.assign(indicator.style, {
-    display: "block",
-    top: `${indicatorY}px`,
-    left: insetX,
-    right: insetX,
-    width: "auto"
-  });
-}
-function hideIndicator(indicator) {
-  if (indicator) indicator.style.display = "none";
-}
-function 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) walkShadowDom(el.shadowRoot, callback);
-    if (el.children?.length) walkShadowDom(el, callback);
-  }
-}
-function queryShadowAll(root, selector) {
-  const results = [];
-  walkShadowDom(root, (el) => {
-    if (el.matches?.(selector)) results.push(el);
-  });
-  return results;
-}
-class DragManager {
-  constructor(store, toolRegistry, root) {
-    this.currentDrop = null;
-    this.contentIndicator = null;
-    this.rowIndicator = null;
-    this.onDragOver = (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) {
-        this.currentDrop = this.findRowDropTarget(e.clientY);
-        hideIndicator(this.contentIndicator);
-        this.showRowIndicator();
-      } else {
-        this.currentDrop = this.findContentDropTarget(e.clientX, e.clientY);
-        hideIndicator(this.rowIndicator);
-        this.showContentIndicator();
-      }
-    };
-    this.onDrop = (e) => {
-      e.preventDefault();
-      this.hideAllIndicators();
-      const layoutData = e.dataTransfer?.getData("application/maileditor-layout");
-      if (layoutData) {
-        this.handleLayoutDrop(JSON.parse(layoutData));
-        return this.reset();
-      }
-      const toolName = e.dataTransfer?.getData("application/maileditor-tool");
-      if (toolName) {
-        this.handleToolDrop(toolName);
-        return this.reset();
-      }
-      const contentId = e.dataTransfer?.getData("application/maileditor-content") || dragState.draggingContentId;
-      if (contentId) {
-        this.handleContentDrop(contentId);
-      }
-      this.reset();
-    };
-    this.onDragEnd = () => {
-      this.hideAllIndicators();
-      this.reset();
-    };
-    this.onDragLeave = (e) => {
-      const related = e.relatedTarget;
-      if (!related || !this.root.contains(related)) {
-        this.hideAllIndicators();
-        this.currentDrop = null;
-      }
-    };
-    this.store = store;
-    this.toolRegistry = toolRegistry;
-    this.root = root;
-  }
-  /** 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 = createDropIndicator("#3b82f6");
-    this.rowIndicator = createDropIndicator("#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(cells) {
-    const row = this.store.createRow(cells);
-    const rowIndex = this.currentDrop?.type === "row" ? this.currentDrop.rowIndex : void 0;
-    this.store.addRow(row, rowIndex);
-  }
-  handleToolDrop(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);
-    }
-  }
-  handleContentDrop(contentId) {
-    if (this.currentDrop?.type === "content" && this.currentDrop.columnId) {
-      this.store.moveContent(contentId, this.currentDrop.columnId, this.currentDrop.contentIndex);
-      this.store.select(contentId);
-    }
-  }
-  // ── Drop Target Detection ─────────────────────────────────
-  findRowDropTarget(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 };
-    let bestDist = Math.abs(clientY - rows[0].getBoundingClientRect().top);
-    let bestTarget = { type: "row", rowIndex: 0, y: rows[0].getBoundingClientRect().top };
-    for (let i = 0; i < rows.length; i++) {
-      const y = rows[i].getBoundingClientRect().bottom;
-      const dist = Math.abs(clientY - y);
-      if (dist < bestDist) {
-        bestDist = dist;
-        bestTarget = { type: "row", rowIndex: i + 1, y };
-      }
-    }
-    return bestTarget;
-  }
-  findContentDropTarget(clientX, clientY) {
-    const columns = queryShadowAll(this.root, "me-column-renderer");
-    let bestTarget = null;
-    let bestDist = Infinity;
-    for (const colEl of columns) {
-      const columnId = colEl.dataset.columnId;
-      if (!columnId || !colEl.shadowRoot) continue;
-      const colRect = colEl.getBoundingClientRect();
-      if (clientX < colRect.left || clientX > colRect.right) continue;
-      const contentEls = Array.from(colEl.shadowRoot.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 firstY = contentEls[0].getBoundingClientRect().top;
-      let dist = Math.abs(clientY - firstY);
-      if (dist < bestDist) {
-        bestDist = dist;
-        bestTarget = { type: "content", columnId, contentIndex: 0, y: firstY };
-      }
-      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() {
-    if (!this.contentIndicator || !this.currentDrop?.columnId) {
-      hideIndicator(this.contentIndicator);
-      return;
-    }
-    const columns = queryShadowAll(this.root, "me-column-renderer");
-    const colEl = columns.find((c) => c.dataset.columnId === this.currentDrop.columnId);
-    if (!colEl?.shadowRoot) return;
-    const contentEls = Array.from(colEl.shadowRoot.querySelectorAll("me-content-renderer"));
-    positionIndicator(this.contentIndicator, colEl.shadowRoot, contentEls, this.currentDrop.contentIndex ?? 0, "4px");
-  }
-  showRowIndicator() {
-    if (!this.rowIndicator || !this.currentDrop) {
-      hideIndicator(this.rowIndicator);
-      return;
-    }
-    const canvas = this.root.querySelector("me-editor-canvas");
-    const canvasBody = canvas?.shadowRoot?.querySelector(".canvas-body");
-    if (!canvasBody) return;
-    const rows = Array.from(canvas.shadowRoot.querySelectorAll("me-row-renderer"));
-    positionIndicator(this.rowIndicator, canvasBody, rows, this.currentDrop.rowIndex ?? 0, "0");
-  }
-  hideAllIndicators() {
-    hideIndicator(this.contentIndicator);
-    hideIndicator(this.rowIndicator);
-  }
-  reset() {
-    this.currentDrop = null;
-    dragState.reset();
-  }
-}
-function str(values, key, fallback = "") {
-  const v = values[key];
-  if (typeof v === "string" && v !== "") return v;
-  return fallback;
-}
-function jsonParse(value, fallback) {
-  if (typeof value !== "string") return fallback;
-  try {
-    return JSON.parse(value);
-  } catch {
-    return fallback;
-  }
-}
-function emailTableCell(content, options) {
-  const { padding, align = "left", extraTdStyle = "" } = options;
-  const tdStyle = `overflow-wrap:break-word;word-break:break-word;padding:${padding};font-family:arial,helvetica,sans-serif;${extraTdStyle}`;
-  return `<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
-  <tbody><tr><td style="${tdStyle}" align="${align}">
-    ${content}
-  </td></tr></tbody>
-</table>`;
-}
-function vmlRoundrectButton(text, href, options) {
-  const { bgColor, textColor, fontSize, fontWeight, borderRadius } = options;
-  const radiusPx = parseInt(borderRadius) || 0;
-  if (radiusPx <= 0) return "";
-  const arcsize = Math.round(radiusPx / 20 * 100);
-  return `<!--[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="${arcsize}%" 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]-->`;
-}
-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 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: 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) {
-      const padding = str(values, "containerPadding", "10px");
-      const bgColor = str(values, "backgroundColor", "transparent");
-      const color = str(values, "color", "inherit");
-      const lineHeight = str(values, "lineHeight", "140%");
-      const textContent = str(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) {
-      const padding = str(values, "containerPadding", "10px");
-      const bgColor = str(values, "backgroundColor");
-      const color = str(values, "color", "#000000");
-      const lineHeight = str(values, "lineHeight", "140%");
-      const textAlign = str(values, "textAlign", "left");
-      const textContent = str(values, "text");
-      const bgStyle = bgColor ? `background-color:${bgColor};` : "";
-      const inner = `<div style="font-size:14px;color:${color};line-height:${lineHeight};text-align:${textAlign};word-wrap:break-word;">${textContent}</div>`;
-      return emailTableCell(inner, { padding, extraTdStyle: bgStyle });
-    }
-  }
-};
-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: "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: 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) {
-      const padding = str(values, "containerPadding", "10px");
-      const fontSize = str(values, "fontSize", "22px");
-      const color = str(values, "color", "#000000");
-      const textAlign = str(values, "textAlign", "left");
-      const fontWeight = str(values, "fontWeight", "700");
-      const lineHeight = str(values, "lineHeight", "140%");
-      const text = str(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) {
-      const padding = str(values, "containerPadding", "10px");
-      const fontSize = str(values, "fontSize", "22px");
-      const color = str(values, "color", "#000000");
-      const textAlign = str(values, "textAlign", "left");
-      const fontWeight = str(values, "fontWeight", "700");
-      const lineHeight = str(values, "lineHeight", "140%");
-      const letterSpacing = str(values, "letterSpacing", "normal");
-      const tag = str(values, "headingType", "h1");
-      const text = str(values, "text", "Heading");
-      const inner = `<${tag} style="margin:0;font-size:${fontSize};color:${color};text-align:${textAlign};font-weight:${fontWeight};line-height:${lineHeight};letter-spacing:${letterSpacing};">${text}</${tag}>`;
-      return emailTableCell(inner, { padding });
-    }
-  }
-};
-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" },
-        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(values) {
-      const padding = str(values, "containerPadding", "10px");
-      const color = str(values, "color", "#374151");
-      const lineHeight = str(values, "lineHeight", "160%");
-      return html`<div style="padding:${padding};color:${color};line-height:${lineHeight};word-break:break-word;">${unsafeHTML(str(values, "text"))}</div>`;
-    },
-    renderHtml(values) {
-      const padding = str(values, "containerPadding", "10px");
-      const color = str(values, "color", "#374151");
-      const lineHeight = str(values, "lineHeight", "160%");
-      const textAlign = str(values, "textAlign", "left");
-      const letterSpacing = str(values, "letterSpacing", "normal");
-      const inner = `<div style="font-size:14px;color:${color};line-height:${lineHeight};text-align:${textAlign};letter-spacing:${letterSpacing};word-wrap:break-word;">${str(values, "text")}</div>`;
-      return emailTableCell(inner, { padding });
-    }
-  }
-};
-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: "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: 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) {
-      const padding = str(values, "containerPadding", "10px");
-      const src = str(values, "src");
-      const alt = str(values, "alt");
-      const width = str(values, "width", "100%");
-      const borderRadius = str(values, "borderRadius", "0px");
-      const align = str(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-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 = str(values, "containerPadding", "10px");
-      const src = str(values, "src");
-      const alt = str(values, "alt");
-      const href = str(values, "href");
-      const target = str(values, "target", "_blank");
-      const width = str(values, "width", "100%");
-      const borderRadius = str(values, "borderRadius", "0px");
-      const align = str(values, "align", "center");
-      const widthPx = width === "100%" ? ctx.columnWidth : parseInt(width);
-      const brStyle = borderRadius !== "0px" ? `border-radius:${borderRadius};` : "";
-      const imgTag = `<img align="${align}" border="0" src="${src}" alt="${alt}" title="${alt}" style="outline:none;text-decoration:none;clear:both;display:inline-block!important;border:none;height:auto;float:none;width:${width};max-width:${widthPx}px;${brStyle}" width="${widthPx}" />`;
-      const content = href ? `<a href="${href}" target="${target}" style="text-decoration:none;">${imgTag}</a>` : imgTag;
-      return emailTableCell(content, { padding, align });
-    }
-  }
-};
-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: "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: 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) {
-      const padding = str(values, "containerPadding", "10px");
-      const bg = str(values, "backgroundColor", "#3b82f6");
-      const color = str(values, "textColor", "#ffffff");
-      const fontSize = str(values, "fontSize", "14px");
-      const fontWeight = str(values, "fontWeight", "700");
-      const radius = str(values, "borderRadius", "4px");
-      const btnPad = str(values, "buttonPadding", "10px 20px");
-      const text = str(values, "text", "Click Me");
-      const align = str(values, "textAlign", "center");
-      const btnWidth = str(values, "buttonWidth", "auto");
-      const bw = str(values, "borderWidth", "0px");
-      const bc = str(values, "borderColor", bg);
-      const borderStyle = bw !== "0px" ? `border:${bw} solid ${bc};` : "border:none;";
-      const widthStyle = btnWidth === "auto" ? "display:inline-block;" : `display:block;width:${btnWidth};`;
-      return html`
-        <div style="padding:${padding};text-align:${align};">
-          <a style="${widthStyle}background-color:${bg};color:${color};font-size:${fontSize};font-weight:${fontWeight};border-radius:${radius};padding:${btnPad};text-decoration:none;text-align:center;${borderStyle}cursor:pointer;font-family:arial,helvetica,sans-serif;box-sizing:border-box;">${text}</a>
-        </div>
-      `;
-    },
-    renderHtml(values) {
-      const padding = str(values, "containerPadding", "10px");
-      const bg = str(values, "backgroundColor", "#3b82f6");
-      const color = str(values, "textColor", "#ffffff");
-      const fontSize = str(values, "fontSize", "14px");
-      const fontWeight = str(values, "fontWeight", "700");
-      const radius = str(values, "borderRadius", "4px");
-      const btnPad = str(values, "buttonPadding", "10px 20px");
-      const text = str(values, "text", "Click Me");
-      const align = str(values, "textAlign", "center");
-      const href = str(values, "href", "#");
-      const target = str(values, "target", "_blank");
-      const bw = str(values, "borderWidth", "0px");
-      const bc = str(values, "borderColor", bg);
-      const borderStyle = bw !== "0px" ? `border:${bw} solid ${bc};` : "border:none;";
-      const vml = vmlRoundrectButton(text, href, { bgColor: bg, textColor: color, fontSize, fontWeight, borderRadius: radius });
-      const vmlOpen = vml ? `${vml}
-  <!--[if !mso]><!-->` : "<!--[if !mso]><!-->";
-      const vmlClose = "<!--<![endif]-->";
-      const inner = `<div align="${align}">
-      ${vmlOpen}
-      <a href="${href}" target="${target}" style="box-sizing:border-box;display:inline-block;text-decoration:none;text-align:center;color:${color};background-color:${bg};border-radius:${radius};font-size:${fontSize};font-weight:${fontWeight};padding:${btnPad};font-family:arial,helvetica,sans-serif;${borderStyle}mso-border-alt:none;word-break:keep-all;"><span style="line-height:120%;">${text}</span></a>
-      ${vmlClose}
-    </div>`;
-      return emailTableCell(inner, { padding, align });
-    }
-  }
-};
-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: "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: 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 = str(values, "containerPadding", "10px");
-      const width = str(values, "width", "100%");
-      const border = `${str(values, "borderTopWidth", "1px")} ${str(values, "borderTopStyle", "solid")} ${str(values, "borderTopColor", "#cccccc")}`;
-      return html`<div style="padding:${padding};"><div style="border-top:${border};width:${width};margin:0 auto;"></div></div>`;
-    },
-    renderHtml(values) {
-      const padding = str(values, "containerPadding", "10px");
-      const width = str(values, "width", "100%");
-      const border = `${str(values, "borderTopWidth", "1px")} ${str(values, "borderTopStyle", "solid")} ${str(values, "borderTopColor", "#cccccc")}`;
-      const inner = `<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="${width}" style="border-collapse:collapse;border-top:${border};"><tbody><tr><td style="font-size:0;line-height:0;">&nbsp;</td></tr></tbody></table>`;
-      return emailTableCell(inner, { padding, align: "center" });
-    }
-  }
-};
-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) {
-      return html`<div style="padding:${str(values, "containerPadding", "10px")};">${unsafeHTML(str(values, "html"))}</div>`;
-    },
-    renderHtml(values) {
-      return emailTableCell(str(values, "html"), { padding: str(values, "containerPadding", "10px") });
-    }
-  }
-};
-const DEFAULT_ICONS = [
-  { 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(DEFAULT_ICONS), 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: "alignment" } }
-    },
-    spacing: {
-      title: "Spacing",
-      options: { containerPadding: { label: "Padding", defaultValue: "10px", widget: "padding" } }
-    }
-  },
-  defaultValues: {
-    icons: JSON.stringify(DEFAULT_ICONS),
-    iconSize: "32px",
-    iconSpacing: "8px",
-    textAlign: "center",
-    containerPadding: "10px"
-  },
-  renderer: {
-    renderEditor(values) {
-      const padding = str(values, "containerPadding", "10px");
-      const align = str(values, "textAlign", "center");
-      const iconSize = str(values, "iconSize", "32px");
-      const spacing = str(values, "iconSpacing", "8px");
-      const icons = jsonParse(values.icons, DEFAULT_ICONS);
-      return html`
-        <div style="padding:${padding};text-align:${align};">
-          ${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 = str(values, "containerPadding", "10px");
-      const align = str(values, "textAlign", "center");
-      const iconSize = str(values, "iconSize", "32");
-      const spacing = str(values, "iconSpacing", "8px");
-      const icons = jsonParse(values.icons, DEFAULT_ICONS);
-      const cells = 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:#fff;font-size:14px;font-weight:bold;font-family:arial,sans-serif;">${s.icon}</td></tr></table></a></td>`
-      ).join("\n");
-      const inner = `<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="${align}"><tr>${cells}</tr></table>`;
-      return emailTableCell(inner, { padding, align });
-    }
-  }
-};
-const DEFAULT_ITEMS = [
-  { 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(DEFAULT_ITEMS), widget: "rich_text" } }
-    },
-    style: {
-      title: "Style",
-      options: {
-        textAlign: { label: "Align", defaultValue: "center", widget: "alignment" },
-        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: "padding" } }
-    }
-  },
-  defaultValues: {
-    items: JSON.stringify(DEFAULT_ITEMS),
-    textAlign: "center",
-    fontSize: "14px",
-    color: "#333333",
-    separator: "|",
-    separatorColor: "#cccccc",
-    containerPadding: "10px"
-  },
-  renderer: {
-    renderEditor(values) {
-      const padding = str(values, "containerPadding", "10px");
-      const align = str(values, "textAlign", "center");
-      const fontSize = str(values, "fontSize", "14px");
-      const color = str(values, "color", "#333333");
-      const sep = str(values, "separator", "|");
-      const sepColor = str(values, "separatorColor", "#cccccc");
-      const items = jsonParse(values.items, DEFAULT_ITEMS);
-      return html`
-        <div style="padding:${padding};text-align:${align};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 = str(values, "containerPadding", "10px");
-      const align = str(values, "textAlign", "center");
-      const fontSize = str(values, "fontSize", "14px");
-      const color = str(values, "color", "#333333");
-      const sep = str(values, "separator", "|");
-      const sepColor = str(values, "separatorColor", "#cccccc");
-      const items = jsonParse(values.items, DEFAULT_ITEMS);
-      const links = 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 emailTableCell(`<div style="text-align:${align};">${links}</div>`, { padding, align });
-    }
-  }
-};
-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: "alignment" } }
-    },
-    spacing: {
-      title: "Spacing",
-      options: { containerPadding: { label: "Padding", defaultValue: "10px", widget: "padding" } }
-    }
-  },
-  defaultValues: {
-    url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
-    thumbnailUrl: "",
-    alt: "Video",
-    textAlign: "center",
-    containerPadding: "10px"
-  },
-  renderer: {
-    renderEditor(values) {
-      const padding = str(values, "containerPadding", "10px");
-      const url = str(values, "url");
-      const thumbnail = str(values, "thumbnailUrl") || getYouTubeThumbnail(url) || "";
-      const align = str(values, "textAlign", "center");
-      if (!thumbnail) {
-        return html`<div style="padding:${padding};text-align:${align};"><div style="background:#0f172a;border-radius:8px;padding:40px;text-align:center;color:white;font-family:sans-serif;"><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:${align};"><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 = str(values, "containerPadding", "10px");
-      const url = str(values, "url", "#");
-      const thumbnail = str(values, "thumbnailUrl") || getYouTubeThumbnail(url) || "";
-      const alt = str(values, "alt", "Video");
-      const align = str(values, "textAlign", "center");
-      const imgTag = thumbnail ? `<img src="${thumbnail}" alt="${alt}" width="${ctx.columnWidth}" style="display:block;max-width:100%;width:${ctx.columnWidth}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 emailTableCell(`<a href="${url}" target="_blank" style="text-decoration:none;">${imgTag}</a>`, { padding, align });
-    }
-  }
-};
-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: "alignment" },
-        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: "padding" } }
-    }
-  },
-  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 = str(values, "containerPadding", "10px");
-      const bg = str(values, "backgroundColor", "#1f2937");
-      const color = str(values, "textColor", "#ffffff");
-      const fontSize = str(values, "fontSize", "32px");
-      const align = str(values, "textAlign", "center");
-      return html`<div style="padding:${padding};"><div style="background:${bg};color:${color};font-size:${fontSize};text-align:${align};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 = str(values, "containerPadding", "10px");
-      const bg = str(values, "backgroundColor", "#1f2937");
-      const color = str(values, "textColor", "#ffffff");
-      const fontSize = str(values, "fontSize", "32px");
-      const align = str(values, "textAlign", "center");
-      const inner = `<div style="background-color:${bg};color:${color};font-size:${fontSize};text-align:${align};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>`;
-      return emailTableCell(inner, { padding, align });
-    }
-  }
-};
-const DEFAULT_DATA = [
-  ["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(DEFAULT_DATA), 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: "padding" } }
-    }
-  },
-  defaultValues: {
-    tableData: JSON.stringify(DEFAULT_DATA),
-    headerBg: "#f3f4f6",
-    headerColor: "#111827",
-    borderColor: "#e5e7eb",
-    cellPadding: "8px 12px",
-    fontSize: "14px",
-    containerPadding: "10px"
-  },
-  renderer: {
-    renderEditor(values) {
-      const padding = str(values, "containerPadding", "10px");
-      const hBg = str(values, "headerBg", "#f3f4f6");
-      const hColor = str(values, "headerColor", "#111827");
-      const bColor = str(values, "borderColor", "#e5e7eb");
-      const cPad = str(values, "cellPadding", "8px 12px");
-      const fSize = str(values, "fontSize", "14px");
-      const data = jsonParse(values.tableData, DEFAULT_DATA);
-      return html`
-        <div style="padding:${padding};overflow-x:auto;">
-          <table style="width:100%;border-collapse:collapse;font-size:${fSize};font-family:arial,sans-serif;">
-            <thead><tr>${data[0]?.map((c) => html`<th style="padding:${cPad};background:${hBg};color:${hColor};border:1px solid ${bColor};text-align:left;font-weight:600;">${c}</th>`)}</tr></thead>
-            <tbody>${data.slice(1).map((row) => html`<tr>${row.map((c) => html`<td style="padding:${cPad};border:1px solid ${bColor};">${c}</td>`)}</tr>`)}</tbody>
-          </table>
-        </div>
-      `;
-    },
-    renderHtml(values) {
-      const padding = str(values, "containerPadding", "10px");
-      const hBg = str(values, "headerBg", "#f3f4f6");
-      const hColor = str(values, "headerColor", "#111827");
-      const bColor = str(values, "borderColor", "#e5e7eb");
-      const cPad = str(values, "cellPadding", "8px 12px");
-      const fSize = str(values, "fontSize", "14px");
-      const data = jsonParse(values.tableData, DEFAULT_DATA);
-      const font = "font-family:arial,helvetica,sans-serif;";
-      const hCells = (data[0] || []).map((c) => `<th style="padding:${cPad};background-color:${hBg};color:${hColor};border:1px solid ${bColor};text-align:left;font-weight:600;${font}font-size:${fSize};">${c}</th>`).join("");
-      const bRows = data.slice(1).map((row) => `<tr>${row.map((c) => `<td style="padding:${cPad};border:1px solid ${bColor};${font}font-size:${fSize};">${c}</td>`).join("")}</tr>`).join("");
-      const inner = `<table cellpadding="0" cellspacing="0" width="100%" border="0" style="border-collapse:collapse;"><thead><tr>${hCells}</tr></thead><tbody>${bRows}</tbody></table>`;
-      return emailTableCell(inner, { padding });
-    }
-  }
-};
-const DEFAULT_FIELDS = [
-  { label: "Name", name: "name", type: "text", placeholder: "Your name" },
-  { label: "Email", name: "email", type: "email", placeholder: "your@email.com" }
-];
-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(DEFAULT_FIELDS), 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: "padding" } }
-    }
-  },
-  defaultValues: {
-    actionUrl: "#",
-    method: "POST",
-    submitText: "Submit",
-    fields: JSON.stringify(DEFAULT_FIELDS),
-    buttonBg: "#3b82f6",
-    buttonColor: "#ffffff",
-    containerPadding: "10px"
-  },
-  renderer: {
-    renderEditor(values) {
-      const padding = str(values, "containerPadding", "10px");
-      const submitText = str(values, "submitText", "Submit");
-      const btnBg = str(values, "buttonBg", "#3b82f6");
-      const btnColor = str(values, "buttonColor", "#ffffff");
-      const fields = jsonParse(values.fields, DEFAULT_FIELDS);
-      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:${btnBg};color:${btnColor};border:none;padding:10px 24px;border-radius:4px;font-size:14px;font-weight:600;cursor:pointer;">${submitText}</button>
-        </div>
-      `;
-    },
-    renderHtml(values) {
-      const padding = str(values, "containerPadding", "10px");
-      const actionUrl = str(values, "actionUrl", "#");
-      const method = str(values, "method", "POST");
-      const submitText = str(values, "submitText", "Submit");
-      const btnBg = str(values, "buttonBg", "#3b82f6");
-      const btnColor = str(values, "buttonColor", "#ffffff");
-      const fields = jsonParse(values.fields, DEFAULT_FIELDS);
-      const font = "font-family:arial,helvetica,sans-serif;";
-      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}">${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}" /></div>`
-      ).join("");
-      const inner = `<form action="${actionUrl}" method="${method}">${fieldsHtml}<button type="submit" style="background-color:${btnBg};color:${btnColor};border:none;padding:10px 24px;border-radius:4px;font-size:14px;font-weight:600;cursor:pointer;${font}">${submitText}</button></form>`;
-      return emailTableCell(inner, { padding });
-    }
-  }
-};
-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;
-    this._handleKeydown = (e) => {
-      const mod = e.metaKey || e.ctrlKey;
-      const tag = e.target?.tagName;
-      if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
-      if (mod && e.key === "z" && !e.shiftKey) {
-        e.preventDefault();
-        this.store.undo();
-      } else if (mod && (e.key === "y" || e.key === "z" && e.shiftKey)) {
-        e.preventDefault();
-        this.store.redo();
-      } else if ((e.key === "Delete" || e.key === "Backspace") && this.store.selectedId) {
-        e.preventDefault();
-        this.store.removeContent(this.store.selectedId);
-      } else if (e.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 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();
-    this.removeEventListener("keydown", this._handleKeydown);
-  }
-  // ----------------------------------------------------------
-  // 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-ClkIyPni.js.map