@emabuild/core 0.0.1 → 0.0.3

package/dist/{mail-editor-DzI7SmSe.js → mail-editor-ClkIyPni.js}

@@ -1,9 +1,6 @@
 import { html, css, LitElement } from "lit";
 import { property, customElement } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
-function deepClone(obj) {
-  return structuredClone(obj);
-}
 function createCounterManager() {
   const counters = {};
   return {
@@ -11,7 +8,9 @@ function createCounterManager() {
       return { ...counters };
     },
     setCounters(c) {
-      Object.keys(counters).forEach((k) => delete counters[k]);
+      for (const key of Object.keys(counters)) {
+        delete counters[key];
+      }
       Object.assign(counters, c);
     },
     next(prefix) {
@@ -25,24 +24,28 @@ 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(event, ...args) {
+  /** Emit an event with a payload. Errors in listeners are caught and logged. */
+  emit(event, payload) {
     this.listeners.get(event)?.forEach((fn) => {
       try {
-        fn(...args);
+        fn(payload);
       } catch (e) {
-        console.error(`[maileditor] Error in "${event}" listener:`, 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);
@@ -51,6 +54,48 @@ class EventEmitter {
     }
   }
 }
+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 },
@@ -96,13 +141,98 @@ function createEmptyDesign() {
     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.undoStack = [];
-    this.redoStack = [];
-    this.maxHistory = 50;
-    this.subscribers = /* @__PURE__ */ new Set();
+    this.history = new HistoryManager();
     this.counterManager = createCounterManager();
+    this.subscribers = /* @__PURE__ */ new Set();
     this.events = new EventEmitter();
     this._selectedId = null;
     this._hoveredId = null;
@@ -110,9 +240,8 @@ class EditorStore {
     this._activeTab = "content";
     this.design = createEmptyDesign();
   }
-  // ----------------------------------------------------------
-  // Subscriptions (for Lit reactive controllers)
-  // ----------------------------------------------------------
+  // ── Subscriptions ──────────────────────────────────────────
+  /** Subscribe to all state changes. Returns an unsubscribe function. */
   subscribe(fn) {
     this.subscribers.add(fn);
     return () => this.subscribers.delete(fn);
@@ -120,18 +249,20 @@ class EditorStore {
   notify() {
     this.subscribers.forEach((fn) => fn());
   }
-  // ----------------------------------------------------------
-  // Getters
-  // ----------------------------------------------------------
+  // ── 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;
   }
@@ -148,54 +279,39 @@ class EditorStore {
     return this._activeTab;
   }
   get canUndo() {
-    return this.undoStack.length > 0;
+    return this.history.canUndo;
   }
   get canRedo() {
-    return this.redoStack.length > 0;
+    return this.history.canRedo;
   }
-  // ----------------------------------------------------------
-  // Design loading
-  // ----------------------------------------------------------
+  // ── Design Loading ─────────────────────────────────────────
+  /** Load a design document, resetting history and selection */
   loadDesign(design) {
-    this.design = deepClone(design);
+    this.design = structuredClone(design);
     this.counterManager.setCounters(this.design.counters);
-    this.undoStack = [];
-    this.redoStack = [];
+    this.history.clear();
     this._selectedId = null;
     this.notify();
     this.events.emit("design:loaded", { design: this.design });
   }
-  // ----------------------------------------------------------
-  // History (undo/redo)
-  // ----------------------------------------------------------
-  pushHistory() {
-    this.undoStack.push(deepClone(this.design));
-    if (this.undoStack.length > this.maxHistory) {
-      this.undoStack.shift();
-    }
-    this.redoStack = [];
-  }
+  // ── Undo / Redo ────────────────────────────────────────────
   undo() {
-    const prev = this.undoStack.pop();
+    const prev = this.history.undo(this.design);
     if (!prev) return;
-    this.redoStack.push(deepClone(this.design));
     this.design = prev;
     this.counterManager.setCounters(this.design.counters);
     this.notify();
     this.emitUpdate("content_updated");
   }
   redo() {
-    const next = this.redoStack.pop();
+    const next = this.history.redo(this.design);
     if (!next) return;
-    this.undoStack.push(deepClone(this.design));
     this.design = next;
     this.counterManager.setCounters(this.design.counters);
     this.notify();
     this.emitUpdate("content_updated");
   }
-  // ----------------------------------------------------------
-  // Selection / UI state
-  // ----------------------------------------------------------
+  // ── Selection / UI State ───────────────────────────────────
   select(id) {
     this._selectedId = id;
     this.notify();
@@ -212,67 +328,95 @@ class EditorStore {
     this._activeTab = tab;
     this.notify();
   }
-  // ----------------------------------------------------------
-  // Row operations
-  // ----------------------------------------------------------
+  // ── Row Operations ─────────────────────────────────────────
+  /** Add a row at the given index (or at the end) */
   addRow(row, index) {
-    this.pushHistory();
+    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, deepClone(row));
+      rows.splice(index, 0, cloned);
     } else {
-      rows.push(deepClone(row));
+      rows.push(cloned);
     }
     this.syncCounters();
     this.notify();
-    this.emitUpdate("row_added", row);
+    this.emitUpdate("row_added", cloned);
   }
+  /** Remove a row by ID */
   removeRow(rowId) {
-    this.pushHistory();
-    const rows = this.design.body.rows;
-    const idx = rows.findIndex((r) => r.id === rowId);
-    if (idx !== -1) {
-      rows.splice(idx, 1);
-      if (this._selectedId === rowId) this._selectedId = null;
-      this.notify();
-      this.emitUpdate("row_removed");
-    }
+    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.pushHistory();
+    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 = this.findRow(rowId);
+    const row = findRow(this.design, rowId);
     if (!row) return;
-    this.pushHistory();
+    this.history.push(this.design);
     Object.assign(row.values, patch);
     this.notify();
     this.emitUpdate("content_updated");
   }
-  // ----------------------------------------------------------
-  // Column operations
-  // ----------------------------------------------------------
+  // ── Column Operations ──────────────────────────────────────
+  /** Update column-level values */
   updateColumnValues(columnId, patch) {
-    const col = this.findColumn(columnId);
+    const col = findColumn(this.design, columnId);
     if (!col) return;
-    this.pushHistory();
+    this.history.push(this.design);
     Object.assign(col.values, patch);
     this.notify();
     this.emitUpdate("content_updated");
   }
-  // ----------------------------------------------------------
-  // Content operations
-  // ----------------------------------------------------------
+  // ── Content Operations ─────────────────────────────────────
+  /** Add content to a column at the given index */
   addContent(columnId, content, index) {
-    const col = this.findColumn(columnId);
+    const col = findColumn(this.design, columnId);
     if (!col) return;
-    this.pushHistory();
-    const cloned = deepClone(content);
+    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 {
@@ -282,12 +426,13 @@ class EditorStore {
     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.pushHistory();
+          this.history.push(this.design);
           col.contents.splice(idx, 1);
           if (this._selectedId === contentId) this._selectedId = null;
           this.notify();
@@ -297,49 +442,47 @@ class EditorStore {
       }
     }
   }
+  /** Update content values by ID */
   updateContentValues(contentId, patch) {
-    const content = this.findContent(contentId);
+    const content = findContent(this.design, contentId);
     if (!content) return;
-    this.pushHistory();
+    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 = this.findContent(contentId);
+    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) {
-          this.pushHistory();
           col.contents.splice(idx, 1);
           break;
         }
       }
     }
-    const targetCol = this.findColumn(targetColumnId);
-    if (targetCol) {
-      targetCol.contents.splice(targetIndex, 0, content);
-    }
+    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 = this.findContent(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) {
-          const cloned = deepClone(content);
+          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}`
-          };
-          this.pushHistory();
+          cloned.values._meta = { htmlID: cloned.id, htmlClassNames: `u_content_${content.type}` };
           col.contents.splice(idx + 1, 0, cloned);
           this.syncCounters();
           this.notify();
@@ -349,109 +492,44 @@ class EditorStore {
       }
     }
   }
-  // ----------------------------------------------------------
-  // Body values
-  // ----------------------------------------------------------
+  // ── Body Values ────────────────────────────────────────────
+  /** Update body-level values (background, fonts, etc.) */
   updateBodyValues(patch) {
-    this.pushHistory();
+    this.history.push(this.design);
     Object.assign(this.design.body.values, patch);
     this.notify();
     this.emitUpdate("body_updated");
   }
-  // ----------------------------------------------------------
-  // Lookup helpers
-  // ----------------------------------------------------------
+  // ── Lookups (delegate to design-lookup) ────────────────────
   findRow(rowId) {
-    return this.design.body.rows.find((r) => r.id === rowId);
+    return findRow(this.design, rowId);
   }
   findColumn(columnId) {
-    for (const row of this.design.body.rows) {
-      const col = row.columns.find((c) => c.id === columnId);
-      if (col) return col;
-    }
-    return void 0;
+    return findColumn(this.design, columnId);
   }
   findContent(contentId) {
-    for (const row of this.design.body.rows) {
-      for (const col of row.columns) {
-        const content = col.contents.find((c) => c.id === contentId);
-        if (content) return content;
-      }
-    }
-    return void 0;
+    return findContent(this.design, contentId);
   }
   findParentColumn(contentId) {
-    for (const row of this.design.body.rows) {
-      for (const col of row.columns) {
-        if (col.contents.some((c) => c.id === contentId)) return col;
-      }
-    }
-    return void 0;
+    return findParentColumn(this.design, contentId);
   }
   findParentRow(columnId) {
-    for (const row of this.design.body.rows) {
-      if (row.columns.some((c) => c.id === columnId)) return row;
-    }
-    return void 0;
+    return findParentRow(this.design, columnId);
   }
-  // ----------------------------------------------------------
-  // Helpers
-  // ----------------------------------------------------------
-  /** Creates a new row with the given column layout */
+  // ── Factory Methods (delegate to design-factory) ───────────
+  /** Create a new row with the given column layout */
   createRow(cellProportions) {
-    const rowNum = this.counterManager.next("u_row");
-    const columns = cellProportions.map((_, i) => {
-      const colNum = this.counterManager.next("u_column");
-      return {
-        id: `u_column_${colNum}`,
-        contents: [],
-        values: {
-          backgroundColor: "",
-          padding: "0px",
-          border: {},
-          borderRadius: "0px",
-          _meta: { htmlID: `u_column_${colNum}`, htmlClassNames: "u_column" }
-        }
-      };
-    });
+    const row = createRow(this.counterManager, cellProportions);
     this.syncCounters();
-    return {
-      id: `u_row_${rowNum}`,
-      cells: cellProportions,
-      columns,
-      values: {
-        displayCondition: null,
-        columns: false,
-        backgroundColor: "",
-        columnsBackgroundColor: "",
-        backgroundImage: { url: "", fullWidth: true, repeat: false, center: true, cover: false },
-        padding: "0px",
-        anchor: "",
-        hideDesktop: false,
-        hideMobile: false,
-        _meta: { htmlID: `u_row_${rowNum}`, htmlClassNames: "u_row" }
-      }
-    };
+    return row;
   }
-  /** Creates a new content block for the given tool type */
+  /** Create a new content block for the given tool type */
   createContent(type, values = {}) {
-    const counter = this.counterManager.next(`u_content_${type}`);
-    const id = `u_content_${type}_${counter}`;
+    const content = createContent(this.counterManager, type, values);
     this.syncCounters();
-    return {
-      id,
-      type,
-      values: {
-        containerPadding: "10px",
-        anchor: "",
-        hideDesktop: false,
-        hideMobile: false,
-        displayCondition: null,
-        _meta: { htmlID: id, htmlClassNames: `u_content_${type}` },
-        ...values
-      }
-    };
+    return content;
   }
+  // ── Private Helpers ────────────────────────────────────────
   syncCounters() {
     this.design.counters = this.counterManager.getCounters();
   }
@@ -502,14 +580,72 @@ const dragState = {
     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.indicator = null;
+    this.contentIndicator = null;
     this.rowIndicator = null;
-    this.handleDragStart = (_e) => {
-    };
-    this.handleDragOver = (e) => {
+    this.onDragOver = (e) => {
       const types = e.dataTransfer?.types || [];
       const isToolDrag = types.includes("application/maileditor-tool");
       const isLayoutDrag = types.includes("application/maileditor-layout");
@@ -518,76 +654,42 @@ class DragManager {
       e.preventDefault();
       e.dataTransfer.dropEffect = isToolDrag || isLayoutDrag ? "copy" : "move";
       if (isLayoutDrag) {
-        const drop = this.findRowDropPosition(e.clientY);
-        this.hideIndicator();
-        if (drop) {
-          this.currentDrop = drop;
-          this.showRowIndicator(drop);
-        } else {
-          this.hideRowIndicator();
-          this.currentDrop = null;
-        }
+        this.currentDrop = this.findRowDropTarget(e.clientY);
+        hideIndicator(this.contentIndicator);
+        this.showRowIndicator();
       } else {
-        const drop = this.findContentDropPosition(e.clientX, e.clientY);
-        this.hideRowIndicator();
-        if (drop) {
-          this.currentDrop = drop;
-          this.showContentIndicator(drop);
-        } else {
-          this.hideIndicator();
-          this.currentDrop = null;
-        }
+        this.currentDrop = this.findContentDropTarget(e.clientX, e.clientY);
+        hideIndicator(this.rowIndicator);
+        this.showContentIndicator();
       }
     };
-    this.handleDrop = (e) => {
+    this.onDrop = (e) => {
       e.preventDefault();
-      this.hideIndicator();
-      this.hideRowIndicator();
+      this.hideAllIndicators();
       const layoutData = e.dataTransfer?.getData("application/maileditor-layout");
       if (layoutData) {
-        const cells = JSON.parse(layoutData);
-        const row = this.store.createRow(cells);
-        const rowIndex = this.currentDrop?.type === "row" ? this.currentDrop.rowIndex : void 0;
-        this.store.addRow(row, rowIndex);
-        this.reset();
-        return;
+        this.handleLayoutDrop(JSON.parse(layoutData));
+        return this.reset();
       }
       const toolName = e.dataTransfer?.getData("application/maileditor-tool");
       if (toolName) {
-        if (this.currentDrop?.type === "content" && this.currentDrop.columnId) {
-          const defaults = this.toolRegistry.getDefaultValues(toolName);
-          const content = this.store.createContent(toolName, defaults);
-          this.store.addContent(this.currentDrop.columnId, content, this.currentDrop.contentIndex);
-          this.store.select(content.id);
-        } else {
-          const row = this.store.createRow([1]);
-          this.store.addRow(row);
-          const defaults = this.toolRegistry.getDefaultValues(toolName);
-          const content = this.store.createContent(toolName, defaults);
-          this.store.addContent(row.columns[0].id, content);
-          this.store.select(content.id);
-        }
-        this.reset();
-        return;
+        this.handleToolDrop(toolName);
+        return this.reset();
       }
       const contentId = e.dataTransfer?.getData("application/maileditor-content") || dragState.draggingContentId;
-      if (contentId && this.currentDrop?.type === "content" && this.currentDrop.columnId) {
-        this.store.moveContent(contentId, this.currentDrop.columnId, this.currentDrop.contentIndex);
-        this.store.select(contentId);
+      if (contentId) {
+        this.handleContentDrop(contentId);
       }
       this.reset();
-      dragState.reset();
     };
-    this.handleDragEnd = () => {
-      this.hideIndicator();
-      this.hideRowIndicator();
+    this.onDragEnd = () => {
+      this.hideAllIndicators();
       this.reset();
     };
-    this.handleDragLeave = (e) => {
+    this.onDragLeave = (e) => {
       const related = e.relatedTarget;
       if (!related || !this.root.contains(related)) {
-        this.hideIndicator();
-        this.hideRowIndicator();
+        this.hideAllIndicators();
         this.currentDrop = null;
       }
     };
@@ -595,56 +697,61 @@ class DragManager {
     this.toolRegistry = toolRegistry;
     this.root = root;
   }
+  /** Attach all drag event listeners to the shadow root */
   attach() {
-    this.root.addEventListener("dragover", this.handleDragOver);
-    this.root.addEventListener("drop", this.handleDrop);
-    this.root.addEventListener("dragend", this.handleDragEnd);
-    this.root.addEventListener("dragleave", this.handleDragLeave);
-    this.root.addEventListener("dragstart", this.handleDragStart);
-    this.indicator = this.createIndicator("#3b82f6");
-    this.rowIndicator = this.createIndicator("#8b5cf6");
-  }
-  createIndicator(color) {
-    const el = document.createElement("div");
-    Object.assign(el.style, {
-      position: "absolute",
-      left: "0",
-      right: "0",
-      height: "3px",
-      background: color,
-      borderRadius: "2px",
-      pointerEvents: "none",
-      zIndex: "1000",
-      display: "none",
-      boxShadow: `0 0 6px ${color}80`
-    });
-    return el;
-  }
+    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.handleDragOver);
-    this.root.removeEventListener("drop", this.handleDrop);
-    this.root.removeEventListener("dragend", this.handleDragEnd);
-    this.root.removeEventListener("dragleave", this.handleDragLeave);
-    this.root.removeEventListener("dragstart", this.handleDragStart);
-    this.indicator?.remove();
+    this.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();
   }
-  // ----------------------------------------------------------
-  // Find row drop position (between rows)
-  // ----------------------------------------------------------
-  findRowDropPosition(clientY) {
+  // ── 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 };
-    }
-    const firstRect = rows[0].getBoundingClientRect();
-    let bestDist = Math.abs(clientY - firstRect.top);
-    let bestTarget = { type: "row", rowIndex: 0, y: firstRect.top };
+    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 rect = rows[i].getBoundingClientRect();
-      const y = rect.bottom;
+      const y = rows[i].getBoundingClientRect().bottom;
       const dist = Math.abs(clientY - y);
       if (dist < bestDist) {
         bestDist = dist;
@@ -653,21 +760,16 @@ class DragManager {
     }
     return bestTarget;
   }
-  // ----------------------------------------------------------
-  // Find content drop position (inside columns)
-  // ----------------------------------------------------------
-  findContentDropPosition(clientX, clientY) {
-    const columns = this.queryShadowAll(this.root, "me-column-renderer");
+  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) continue;
-      const colShadow = colEl.shadowRoot;
-      if (!colShadow) continue;
+      if (!columnId || !colEl.shadowRoot) continue;
       const colRect = colEl.getBoundingClientRect();
       if (clientX < colRect.left || clientX > colRect.right) continue;
-      const contentEls = Array.from(colShadow.querySelectorAll("me-content-renderer"));
+      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) {
@@ -676,11 +778,11 @@ class DragManager {
         }
         continue;
       }
-      const firstRect = contentEls[0].getBoundingClientRect();
-      let dist = Math.abs(clientY - firstRect.top);
+      const firstY = contentEls[0].getBoundingClientRect().top;
+      let dist = Math.abs(clientY - firstY);
       if (dist < bestDist) {
         bestDist = dist;
-        bestTarget = { type: "content", columnId, contentIndex: 0, y: firstRect.top };
+        bestTarget = { type: "content", columnId, contentIndex: 0, y: firstY };
       }
       for (let i = 0; i < contentEls.length; i++) {
         const rect = contentEls[i].getBoundingClientRect();
@@ -695,113 +797,72 @@ class DragManager {
     }
     return bestTarget;
   }
-  // ----------------------------------------------------------
-  // Indicator positioning
-  // ----------------------------------------------------------
-  showContentIndicator(drop) {
-    if (!this.indicator || !drop.columnId) return;
-    const columns = this.queryShadowAll(this.root, "me-column-renderer");
-    const colEl = columns.find((c) => c.dataset.columnId === drop.columnId);
-    if (!colEl?.shadowRoot) return;
-    if (this.indicator.parentNode !== colEl.shadowRoot) {
-      this.indicator.remove();
-      colEl.shadowRoot.appendChild(this.indicator);
+  // ── 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"));
-    const colRect = colEl.getBoundingClientRect();
-    let indicatorY;
-    if (contentEls.length === 0 || drop.contentIndex === 0) {
-      indicatorY = 0;
-    } else if (drop.contentIndex >= contentEls.length) {
-      const lastRect = contentEls[contentEls.length - 1].getBoundingClientRect();
-      indicatorY = lastRect.bottom - colRect.top;
-    } else {
-      const elRect = contentEls[drop.contentIndex].getBoundingClientRect();
-      indicatorY = elRect.top - colRect.top;
-    }
-    Object.assign(this.indicator.style, {
-      display: "block",
-      top: `${indicatorY}px`,
-      left: "4px",
-      right: "4px",
-      width: "auto"
-    });
+    positionIndicator(this.contentIndicator, colEl.shadowRoot, contentEls, this.currentDrop.contentIndex ?? 0, "4px");
   }
-  showRowIndicator(drop) {
-    if (!this.rowIndicator) return;
+  showRowIndicator() {
+    if (!this.rowIndicator || !this.currentDrop) {
+      hideIndicator(this.rowIndicator);
+      return;
+    }
     const canvas = this.root.querySelector("me-editor-canvas");
-    if (!canvas?.shadowRoot) return;
-    const canvasBody = canvas.shadowRoot.querySelector(".canvas-body");
+    const canvasBody = canvas?.shadowRoot?.querySelector(".canvas-body");
     if (!canvasBody) return;
-    if (this.rowIndicator.parentNode !== canvasBody) {
-      this.rowIndicator.remove();
-      canvasBody.appendChild(this.rowIndicator);
-    }
     const rows = Array.from(canvas.shadowRoot.querySelectorAll("me-row-renderer"));
-    const bodyRect = canvasBody.getBoundingClientRect();
-    let indicatorY;
-    if (rows.length === 0 || drop.rowIndex === 0) {
-      indicatorY = 0;
-    } else if (drop.rowIndex >= rows.length) {
-      const lastRect = rows[rows.length - 1].getBoundingClientRect();
-      indicatorY = lastRect.bottom - bodyRect.top;
-    } else {
-      const elRect = rows[drop.rowIndex].getBoundingClientRect();
-      indicatorY = elRect.top - bodyRect.top;
-    }
-    Object.assign(this.rowIndicator.style, {
-      display: "block",
-      top: `${indicatorY}px`,
-      left: "0",
-      right: "0",
-      width: "auto"
-    });
-  }
-  hideIndicator() {
-    if (this.indicator) this.indicator.style.display = "none";
+    positionIndicator(this.rowIndicator, canvasBody, rows, this.currentDrop.rowIndex ?? 0, "0");
   }
-  hideRowIndicator() {
-    if (this.rowIndicator) this.rowIndicator.style.display = "none";
+  hideAllIndicators() {
+    hideIndicator(this.contentIndicator);
+    hideIndicator(this.rowIndicator);
   }
   reset() {
     this.currentDrop = null;
-    this.hideIndicator();
-    this.hideRowIndicator();
+    dragState.reset();
   }
-  // ----------------------------------------------------------
-  // Shadow DOM traversal
-  // ----------------------------------------------------------
-  queryShadowAll(root, selector) {
-    const results = [];
-    this.walkShadowDom(root, (el) => {
-      if (el.matches?.(selector)) results.push(el);
-    });
-    return results;
-  }
-  walkShadowDom(root, callback) {
-    const children = root instanceof ShadowRoot ? root.children : root.children;
-    for (const child of Array.from(children)) {
-      const el = child;
-      callback(el);
-      if (el.shadowRoot) this.walkShadowDom(el.shadowRoot, callback);
-      if (el.children?.length) this.walkShadowDom(el, callback);
-    }
-  }
-  findContentElement(el) {
-    while (el) {
-      if (el.dataset?.contentId) return el;
-      if (el.tagName?.toLowerCase() === "me-content-renderer") return el;
-      if (el.parentElement) {
-        el = el.parentElement;
-      } else if (el.getRootNode().host) {
-        el = el.getRootNode().host;
-      } else {
-        break;
-      }
-    }
-    return null;
+}
+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",
@@ -813,7 +874,7 @@ const textTool = {
       title: "Text",
       options: {
         text: {
-          label: "Text",
+          label: "Text Content",
           defaultValue: '<p style="font-size: 14px;">This is a new text block. Change the text.</p>',
           widget: "rich_text"
         }
@@ -824,8 +885,20 @@ const textTool = {
       options: {
         color: { label: "Text Color", defaultValue: "#000000", widget: "color_picker" },
         backgroundColor: { label: "Background Color", defaultValue: "", widget: "color_picker" },
-        lineHeight: { label: "Line Height", defaultValue: "140%", widget: "text" },
-        linkStyle: { label: "Link Style", defaultValue: void 0, widget: "link_style" }
+        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: {
@@ -852,37 +925,28 @@ const textTool = {
     textAlign: "left"
   },
   renderer: {
-    renderEditor(values, context) {
-      const padding = values.containerPadding || "10px";
-      const bgColor = values.backgroundColor || "transparent";
-      const color = values.color || "inherit";
-      const lineHeight = values.lineHeight || "140%";
-      const textContent = values.text || "";
+    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, context) {
-      const padding = values.containerPadding || "10px";
-      const bgColor = values.backgroundColor || "";
-      const color = values.color || "#000000";
-      const lineHeight = values.lineHeight || "140%";
-      const textContent = values.text || "";
-      const textAlign = values.textAlign || "left";
+    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};` : "";
-      return `<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
-  <tbody>
-    <tr>
-      <td style="overflow-wrap:break-word;word-break:break-word;padding:${padding};${bgStyle}font-family:arial,helvetica,sans-serif;" align="left">
-        <div style="font-size:14px;color:${color};line-height:${lineHeight};text-align:${textAlign};word-wrap:break-word;">
-          ${textContent}
-        </div>
-      </td>
-    </tr>
-  </tbody>
-</table>`;
+      const 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 });
     }
   }
 };
@@ -896,41 +960,74 @@ const headingTool = {
     text: {
       title: "Heading",
       options: {
-        text: {
-          label: "Text",
-          defaultValue: "Heading",
-          widget: "text"
-        },
+        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" }
-            ]
-          }
+          widgetParams: { options: [
+            { label: "H1", value: "h1" },
+            { label: "H2", value: "h2" },
+            { label: "H3", value: "h3" },
+            { label: "H4", value: "h4" }
+          ] }
         }
       }
     },
     style: {
       title: "Style",
       options: {
-        fontSize: { label: "Font Size", defaultValue: "22px", widget: "text" },
+        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: "text" },
-        fontWeight: { label: "Font Weight", defaultValue: "700", widget: "text" },
-        lineHeight: { label: "Line Height", defaultValue: "140%", widget: "text" },
+        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: "text" }
+        containerPadding: { label: "Padding", defaultValue: "10px", widget: "padding" }
       }
     },
     general: {
@@ -954,35 +1051,32 @@ const headingTool = {
     containerPadding: "10px"
   },
   renderer: {
-    renderEditor(values, ctx) {
-      const padding = values.containerPadding || "10px";
-      const fontSize = values.fontSize || "22px";
-      const color = values.color || "#000000";
-      const textAlign = values.textAlign || "left";
-      const fontWeight = values.fontWeight || "700";
-      const lineHeight = values.lineHeight || "140%";
-      const text = values.text || "Heading";
+    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, ctx) {
-      const padding = values.containerPadding || "10px";
-      const fontSize = values.fontSize || "22px";
-      const color = values.color || "#000000";
-      const textAlign = values.textAlign || "left";
-      const fontWeight = values.fontWeight || "700";
-      const lineHeight = values.lineHeight || "140%";
-      const letterSpacing = values.letterSpacing || "normal";
-      const tag = values.headingType || "h1";
-      const text = values.text || "Heading";
-      return `<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
-  <tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:${padding};font-family:arial,helvetica,sans-serif;" align="left">
-    <${tag} style="margin:0;font-size:${fontSize};color:${color};text-align:${textAlign};font-weight:${fontWeight};line-height:${lineHeight};letter-spacing:${letterSpacing};">${text}</${tag}>
-  </td></tr></tbody>
-</table>`;
+    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 });
     }
   }
 };
@@ -1007,20 +1101,20 @@ const paragraphTool = {
       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" },
-        textAlign: { label: "Text Align", defaultValue: "left", widget: "text" }
+        letterSpacing: { label: "Letter Spacing", defaultValue: "normal", widget: "text" }
       }
     },
     spacing: {
       title: "Spacing",
       options: {
-        containerPadding: { label: "Padding", defaultValue: "10px", widget: "text" }
+        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. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>',
+    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",
@@ -1029,24 +1123,19 @@ const paragraphTool = {
   },
   renderer: {
     renderEditor(values) {
-      const padding = values.containerPadding || "10px";
-      const color = values.color || "#374151";
-      const lineHeight = values.lineHeight || "160%";
-      const text = values.text || "";
-      return html`<div style="padding:${padding};color:${color};line-height:${lineHeight};word-break:break-word;">${unsafeHTML(text)}</div>`;
+      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 = values.containerPadding || "10px";
-      const color = values.color || "#374151";
-      const lineHeight = values.lineHeight || "160%";
-      const letterSpacing = values.letterSpacing || "normal";
-      const textAlign = values.textAlign || "left";
-      const text = values.text || "";
-      return `<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
-  <tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:${padding};font-family:arial,helvetica,sans-serif;" align="left">
-    <div style="font-size:14px;color:${color};line-height:${lineHeight};text-align:${textAlign};letter-spacing:${letterSpacing};word-wrap:break-word;">${text}</div>
-  </td></tr></tbody>
-</table>`;
+      const 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 });
     }
   }
 };
@@ -1069,17 +1158,25 @@ const imageTool = {
     style: {
       title: "Style",
       options: {
-        width: { label: "Width", defaultValue: "100%", widget: "text" },
-        maxWidth: { label: "Max Width", defaultValue: "100%", widget: "text" },
-        align: { label: "Align", defaultValue: "center", widget: "text" },
+        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: "text" }
-      }
+      options: { containerPadding: { label: "Padding", defaultValue: "10px", widget: "padding" } }
     },
     general: {
       title: "General",
@@ -1102,46 +1199,32 @@ const imageTool = {
     containerPadding: "10px"
   },
   renderer: {
-    renderEditor(values, ctx) {
-      const padding = values.containerPadding || "10px";
-      const src = values.src || "";
-      const alt = values.alt || "";
-      const width = values.width || "100%";
-      const borderRadius = values.borderRadius || "0px";
-      const align = values.align || "center";
+    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-family:sans-serif;font-size:13px;">
-              No image set. Enter a URL in the property panel.
-            </div>
-          </div>
-        `;
+        return html`<div style="padding:${padding};text-align:${align};"><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>
-      `;
+      return html`<div style="padding:${padding};text-align:${align};"><img src=${src} alt=${alt} style="display:inline-block;max-width:100%;width:${width};border-radius:${borderRadius};border:0;" /></div>`;
     },
     renderHtml(values, ctx) {
-      const padding = values.containerPadding || "10px";
-      const src = values.src || "";
-      const alt = values.alt || "";
-      const href = values.href || "";
-      const target = values.target || "_blank";
-      const width = values.width || "100%";
-      const borderRadius = values.borderRadius || "0px";
-      const align = values.align || "center";
+      const 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 borderStyle = borderRadius !== "0px" ? `border-radius:${borderRadius};` : "";
-      const imgTag = `<img align="${align}" border="0" src="${src}" alt="${alt}" title="${alt}" style="outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;clear:both;display:inline-block!important;border:none;height:auto;float:none;width:${width};max-width:${widthPx}px;${borderStyle}" width="${widthPx}" />`;
+      const 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 `<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
-  <tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:${padding};font-family:arial,helvetica,sans-serif;" align="${align}">
-    ${content}
-  </td></tr></tbody>
-</table>`;
+      return emailTableCell(content, { padding, align });
     }
   }
 };
@@ -1165,21 +1248,45 @@ const buttonTool = {
       options: {
         backgroundColor: { label: "Button Color", defaultValue: "#3b82f6", widget: "color_picker" },
         textColor: { label: "Text Color", defaultValue: "#ffffff", widget: "color_picker" },
-        fontSize: { label: "Font Size", defaultValue: "14px", widget: "text" },
-        fontWeight: { label: "Font Weight", defaultValue: "700", widget: "text" },
+        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: "text" },
-        textAlign: { label: "Align", defaultValue: "center", widget: "text" },
-        buttonPadding: { label: "Button Padding", defaultValue: "10px 20px", 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: "text" }
-      }
+      options: { containerPadding: { label: "Padding", defaultValue: "10px", widget: "padding" } }
     },
     general: {
       title: "General",
@@ -1207,64 +1314,52 @@ const buttonTool = {
     containerPadding: "10px"
   },
   renderer: {
-    renderEditor(values, ctx) {
-      const padding = values.containerPadding || "10px";
-      const bgColor = values.backgroundColor || "#3b82f6";
-      const textColor = values.textColor || "#ffffff";
-      const fontSize = values.fontSize || "14px";
-      const fontWeight = values.fontWeight || "700";
-      const borderRadius = values.borderRadius || "4px";
-      const buttonPadding = values.buttonPadding || "10px 20px";
-      const text = values.text || "Click Me";
-      const textAlign = values.textAlign || "center";
-      const buttonWidth = values.buttonWidth || "auto";
-      const borderColor = values.borderColor || bgColor;
-      const borderWidth = values.borderWidth || "0px";
-      const borderStyle = borderWidth !== "0px" ? `border:${borderWidth} solid ${borderColor};` : "border:none;";
-      const widthStyle = buttonWidth === "auto" ? "display:inline-block;" : `display:block;width:${buttonWidth};`;
+    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:${textAlign};">
-          <a style="${widthStyle}background-color:${bgColor};color:${textColor};font-size:${fontSize};font-weight:${fontWeight};border-radius:${borderRadius};padding:${buttonPadding};text-decoration:none;text-align:center;${borderStyle}cursor:pointer;font-family:arial,helvetica,sans-serif;box-sizing:border-box;">
-            ${text}
-          </a>
+        <div 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, ctx) {
-      const padding = values.containerPadding || "10px";
-      const bgColor = values.backgroundColor || "#3b82f6";
-      const textColor = values.textColor || "#ffffff";
-      const fontSize = values.fontSize || "14px";
-      const fontWeight = values.fontWeight || "700";
-      const borderRadius = values.borderRadius || "4px";
-      const buttonPadding = values.buttonPadding || "10px 20px";
-      const text = values.text || "Click Me";
-      const textAlign = values.textAlign || "center";
-      const href = values.href || "#";
-      const target = values.target || "_blank";
-      const borderColor = values.borderColor || bgColor;
-      const borderWidth = values.borderWidth || "0px";
-      const borderStyle = borderWidth !== "0px" ? `border:${borderWidth} solid ${borderColor};` : "border:none;";
-      const vml = parseInt(borderRadius) > 0 ? `
-  <!--[if mso]>
-  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${href}" style="height:auto;v-text-anchor:middle;width:auto;" arcsize="${Math.round(parseInt(borderRadius) / 20 * 100)}%" stroke="f" fillcolor="${bgColor}">
-    <w:anchorlock/>
-    <center style="color:${textColor};font-family:arial,helvetica,sans-serif;font-size:${fontSize};font-weight:${fontWeight};">${text}</center>
-  </v:roundrect>
-  <![endif]-->
+    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 vmlEnd = parseInt(borderRadius) > 0 ? "<!--<![endif]-->" : "<!--<![endif]-->";
-      return `<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
-  <tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:${padding};font-family:arial,helvetica,sans-serif;" align="${textAlign}">
-    <div align="${textAlign}">
-      ${vml}
-      <a href="${href}" target="${target}" style="box-sizing:border-box;display:inline-block;text-decoration:none;-webkit-text-size-adjust:none;text-align:center;color:${textColor};background-color:${bgColor};border-radius:${borderRadius};-webkit-border-radius:${borderRadius};-moz-border-radius:${borderRadius};font-size:${fontSize};font-weight:${fontWeight};padding:${buttonPadding};font-family:arial,helvetica,sans-serif;${borderStyle}mso-border-alt:none;word-break:keep-all;">
-        <span style="line-height:120%;">${text}</span>
-      </a>
-      ${vmlEnd}
-    </div>
-  </td></tr></tbody>
-</table>`;
+      const 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 });
     }
   }
 };
@@ -1279,16 +1374,24 @@ const dividerTool = {
       title: "Style",
       options: {
         borderTopWidth: { label: "Width", defaultValue: "1px", widget: "text" },
-        borderTopStyle: { label: "Style", defaultValue: "solid", 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: "text" }
-      }
+      options: { containerPadding: { label: "Padding", defaultValue: "10px", widget: "padding" } }
     },
     general: {
       title: "General",
@@ -1307,30 +1410,17 @@ const dividerTool = {
   },
   renderer: {
     renderEditor(values) {
-      const padding = values.containerPadding || "10px";
-      const width = values.width || "100%";
-      const bw = values.borderTopWidth || "1px";
-      const bs = values.borderTopStyle || "solid";
-      const bc = values.borderTopColor || "#cccccc";
-      return html`
-        <div style="padding:${padding};">
-          <div style="border-top:${bw} ${bs} ${bc};width:${width};margin:0 auto;"></div>
-        </div>
-      `;
+      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 = values.containerPadding || "10px";
-      const width = values.width || "100%";
-      const bw = values.borderTopWidth || "1px";
-      const bs = values.borderTopStyle || "solid";
-      const bc = values.borderTopColor || "#cccccc";
-      return `<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
-  <tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:${padding};font-family:arial,helvetica,sans-serif;" align="center">
-    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="${width}" style="border-collapse:collapse;table-layout:fixed;border-spacing:0;mso-table-lspace:0;mso-table-rspace:0;vertical-align:top;border-top:${bw} ${bs} ${bc};-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;">
-      <tbody><tr><td style="font-size:0;line-height:0;">&nbsp;</td></tr></tbody>
-    </table>
-  </td></tr></tbody>
-</table>`;
+      const 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" });
     }
   }
 };
@@ -1353,9 +1443,7 @@ const htmlTool = {
     },
     spacing: {
       title: "Spacing",
-      options: {
-        containerPadding: { label: "Padding", defaultValue: "10px", widget: "text" }
-      }
+      options: { containerPadding: { label: "Padding", defaultValue: "10px", widget: "text" } }
     },
     general: {
       title: "General",
@@ -1371,22 +1459,14 @@ const htmlTool = {
   },
   renderer: {
     renderEditor(values) {
-      const padding = values.containerPadding || "10px";
-      const content = values.html || "";
-      return html`<div style="padding:${padding};">${unsafeHTML(content)}</div>`;
+      return html`<div style="padding:${str(values, "containerPadding", "10px")};">${unsafeHTML(str(values, "html"))}</div>`;
     },
     renderHtml(values) {
-      const padding = values.containerPadding || "10px";
-      const content = values.html || "";
-      return `<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
-  <tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:${padding};font-family:arial,helvetica,sans-serif;" align="left">
-    ${content}
-  </td></tr></tbody>
-</table>`;
+      return emailTableCell(str(values, "html"), { padding: str(values, "containerPadding", "10px") });
     }
   }
 };
-const defaultSocials = [
+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" },
@@ -1402,26 +1482,22 @@ const socialTool = {
     icons: {
       title: "Social Icons",
       options: {
-        icons: { label: "Icons (JSON)", defaultValue: JSON.stringify(defaultSocials), widget: "rich_text" },
+        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: "text" }
-      }
+      options: { textAlign: { label: "Align", defaultValue: "center", widget: "alignment" } }
     },
     spacing: {
       title: "Spacing",
-      options: {
-        containerPadding: { label: "Padding", defaultValue: "10px", widget: "text" }
-      }
+      options: { containerPadding: { label: "Padding", defaultValue: "10px", widget: "padding" } }
     }
   },
   defaultValues: {
-    icons: JSON.stringify(defaultSocials),
+    icons: JSON.stringify(DEFAULT_ICONS),
     iconSize: "32px",
     iconSpacing: "8px",
     textAlign: "center",
@@ -1429,55 +1505,34 @@ const socialTool = {
   },
   renderer: {
     renderEditor(values) {
-      const padding = values.containerPadding || "10px";
-      const textAlign = values.textAlign || "center";
-      const iconSize = values.iconSize || "32px";
-      const spacing = values.iconSpacing || "8px";
-      let icons = defaultSocials;
-      try {
-        icons = JSON.parse(values.icons);
-      } catch {
-      }
+      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:${textAlign};">
-          ${icons.map(
-        (s) => html`
-              <a href=${s.url} target="_blank" style="display:inline-block;width:${iconSize};height:${iconSize};line-height:${iconSize};text-align:center;background:${s.color};color:white;border-radius:50%;text-decoration:none;font-size:14px;font-weight:bold;margin:0 ${spacing};font-family:arial,sans-serif;vertical-align:middle;">${s.icon}</a>
-            `
-      )}
+        <div 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 = values.containerPadding || "10px";
-      const textAlign = values.textAlign || "center";
-      const iconSize = parseInt(values.iconSize || "32");
-      const spacing = values.iconSpacing || "8px";
-      let icons = defaultSocials;
-      try {
-        icons = JSON.parse(values.icons);
-      } catch {
-      }
-      const iconsHtml = icons.map(
-        (s) => `<td align="center" valign="middle" style="padding:0 ${spacing};">
-          <a href="${s.url}" target="_blank" style="text-decoration:none;">
-            <table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr>
-              <td width="${iconSize}" height="${iconSize}" align="center" valign="middle" style="width:${iconSize}px;height:${iconSize}px;background:${s.color};border-radius:50%;color:#ffffff;font-size:14px;font-weight:bold;font-family:arial,sans-serif;">
-                ${s.icon}
-              </td>
-            </tr></table>
-          </a>
-        </td>`
+      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");
-      return `<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
-  <tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:${padding};font-family:arial,helvetica,sans-serif;" align="${textAlign}">
-    <table role="presentation" cellpadding="0" cellspacing="0" border="0" align="${textAlign}"><tr>${iconsHtml}</tr></table>
-  </td></tr></tbody>
-</table>`;
+      const inner = `<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="${align}"><tr>${cells}</tr></table>`;
+      return emailTableCell(inner, { padding, align });
     }
   }
 };
-const defaultItems = [
+const DEFAULT_ITEMS = [
   { text: "Home", href: "#" },
   { text: "About", href: "#" },
   { text: "Contact", href: "#" }
@@ -1491,14 +1546,12 @@ const menuTool = {
   options: {
     menu: {
       title: "Menu",
-      options: {
-        items: { label: "Items (JSON)", defaultValue: JSON.stringify(defaultItems), widget: "rich_text" }
-      }
+      options: { items: { label: "Items (JSON)", defaultValue: JSON.stringify(DEFAULT_ITEMS), widget: "rich_text" } }
     },
     style: {
       title: "Style",
       options: {
-        textAlign: { label: "Align", defaultValue: "center", widget: "text" },
+        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" },
@@ -1507,13 +1560,11 @@ const menuTool = {
     },
     spacing: {
       title: "Spacing",
-      options: {
-        containerPadding: { label: "Padding", defaultValue: "10px", widget: "text" }
-      }
+      options: { containerPadding: { label: "Padding", defaultValue: "10px", widget: "padding" } }
     }
   },
   defaultValues: {
-    items: JSON.stringify(defaultItems),
+    items: JSON.stringify(DEFAULT_ITEMS),
     textAlign: "center",
     fontSize: "14px",
     color: "#333333",
@@ -1523,47 +1574,33 @@ const menuTool = {
   },
   renderer: {
     renderEditor(values) {
-      const padding = values.containerPadding || "10px";
-      const textAlign = values.textAlign || "center";
-      const fontSize = values.fontSize || "14px";
-      const color = values.color || "#333333";
-      const sep = values.separator || "|";
-      const sepColor = values.separatorColor || "#cccccc";
-      let items = defaultItems;
-      try {
-        items = JSON.parse(values.items);
-      } catch {
-      }
+      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:${textAlign};font-size:${fontSize};font-family:arial,sans-serif;">
-          ${items.map(
-        (item, i) => html`${i > 0 ? html`<span style="color:${sepColor};padding:0 8px;">${sep}</span>` : ""}
-              <a href=${item.href} style="color:${color};text-decoration:none;">${item.text}</a>`
-      )}
+        <div 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 = values.containerPadding || "10px";
-      const textAlign = values.textAlign || "center";
-      const fontSize = values.fontSize || "14px";
-      const color = values.color || "#333333";
-      const sep = values.separator || "|";
-      const sepColor = values.separatorColor || "#cccccc";
-      let items = defaultItems;
-      try {
-        items = JSON.parse(values.items);
-      } catch {
-      }
-      const linksHtml = items.map((item, i) => {
+      const 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 `<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
-  <tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:${padding};font-family:arial,helvetica,sans-serif;" align="${textAlign}">
-    <div style="text-align:${textAlign};">${linksHtml}</div>
-  </td></tr></tbody>
-</table>`;
+      return emailTableCell(`<div style="text-align:${align};">${links}</div>`, { padding, align });
     }
   }
 };
@@ -1588,15 +1625,11 @@ const videoTool = {
     },
     style: {
       title: "Style",
-      options: {
-        textAlign: { label: "Align", defaultValue: "center", widget: "text" }
-      }
+      options: { textAlign: { label: "Align", defaultValue: "center", widget: "alignment" } }
     },
     spacing: {
       title: "Spacing",
-      options: {
-        containerPadding: { label: "Padding", defaultValue: "10px", widget: "text" }
-      }
+      options: { containerPadding: { label: "Padding", defaultValue: "10px", widget: "padding" } }
     }
   },
   defaultValues: {
@@ -1608,46 +1641,23 @@ const videoTool = {
   },
   renderer: {
     renderEditor(values) {
-      const padding = values.containerPadding || "10px";
-      const url = values.url || "";
-      const thumbnail = values.thumbnailUrl || getYouTubeThumbnail(url) || "";
-      const textAlign = values.textAlign || "center";
+      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:${textAlign};">
-            <div style="background:#0f172a;border-radius:8px;padding:40px;text-align:center;color:white;font-family:sans-serif;position:relative;">
-              <div style="font-size:48px;opacity:0.8;">▶</div>
-              <div style="font-size:12px;margin-top:8px;opacity:0.6;">${url || "Enter video URL"}</div>
-            </div>
-          </div>
-        `;
+        return html`<div style="padding:${padding};text-align:${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:${textAlign};">
-          <div style="position:relative;display:inline-block;max-width:100%;cursor:pointer;">
-            <img src=${thumbnail} alt="Video thumbnail" style="display:block;max-width:100%;border-radius:4px;" />
-            <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;">
-              <div style="width:60px;height:60px;background:rgba(0,0,0,0.7);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:24px;">▶</div>
-            </div>
-          </div>
-        </div>
-      `;
+      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 = values.containerPadding || "10px";
-      const url = values.url || "#";
-      const thumbnail = values.thumbnailUrl || getYouTubeThumbnail(url) || "";
-      const alt = values.alt || "Video";
-      const textAlign = values.textAlign || "center";
-      const widthPx = ctx.columnWidth;
-      const imgTag = thumbnail ? `<img src="${thumbnail}" alt="${alt}" width="${widthPx}" style="display:block;max-width:100%;width:${widthPx}px;border:0;" />` : `<div style="background:#0f172a;padding:40px;text-align:center;color:white;font-family:arial,sans-serif;font-size:16px;">▶ Watch Video</div>`;
-      return `<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
-  <tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:${padding};font-family:arial,helvetica,sans-serif;" align="${textAlign}">
-    <a href="${url}" target="_blank" style="text-decoration:none;">
-      ${imgTag}
-    </a>
-  </td></tr></tbody>
-</table>`;
+      const 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 });
     }
   }
 };
@@ -1668,7 +1678,7 @@ const timerTool = {
     style: {
       title: "Style",
       options: {
-        textAlign: { label: "Align", defaultValue: "center", widget: "text" },
+        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" }
@@ -1676,9 +1686,7 @@ const timerTool = {
     },
     spacing: {
       title: "Spacing",
-      options: {
-        containerPadding: { label: "Padding", defaultValue: "10px", widget: "text" }
-      }
+      options: { containerPadding: { label: "Padding", defaultValue: "10px", widget: "padding" } }
     }
   },
   defaultValues: {
@@ -1692,39 +1700,25 @@ const timerTool = {
   },
   renderer: {
     renderEditor(values) {
-      const padding = values.containerPadding || "10px";
-      const bg = values.backgroundColor || "#1f2937";
-      const color = values.textColor || "#ffffff";
-      const fontSize = values.fontSize || "32px";
-      const textAlign = values.textAlign || "center";
-      return html`
-        <div style="padding:${padding};">
-          <div style="background:${bg};color:${color};font-size:${fontSize};text-align:${textAlign};padding:20px;border-radius:4px;font-family:monospace;font-weight:bold;letter-spacing:4px;">
-            00 : 00 : 00 : 00
-            <div style="font-size:11px;letter-spacing:8px;opacity:0.6;margin-top:4px;">DAYS &nbsp; HRS &nbsp; MIN &nbsp; SEC</div>
-          </div>
-        </div>
-      `;
+      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 = values.containerPadding || "10px";
-      const bg = values.backgroundColor || "#1f2937";
-      const color = values.textColor || "#ffffff";
-      const fontSize = values.fontSize || "32px";
-      const textAlign = values.textAlign || "center";
-      values.endDate || "";
-      return `<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
-  <tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:${padding};font-family:arial,helvetica,sans-serif;" align="${textAlign}">
-    <div style="background-color:${bg};color:${color};font-size:${fontSize};text-align:${textAlign};padding:20px;border-radius:4px;font-family:'Courier New',monospace;font-weight:bold;letter-spacing:4px;">
-      <div>00 : 00 : 00 : 00</div>
-      <div style="font-size:11px;letter-spacing:8px;opacity:0.6;margin-top:4px;">DAYS &nbsp; HRS &nbsp; MIN &nbsp; SEC</div>
-    </div>
-  </td></tr></tbody>
-</table>`;
+      const 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 defaultTableData = [
+const DEFAULT_DATA = [
   ["Header 1", "Header 2", "Header 3"],
   ["Cell 1", "Cell 2", "Cell 3"],
   ["Cell 4", "Cell 5", "Cell 6"]
@@ -1738,9 +1732,7 @@ const tableTool = {
   options: {
     table: {
       title: "Table",
-      options: {
-        tableData: { label: "Table Data (JSON)", defaultValue: JSON.stringify(defaultTableData), widget: "rich_text" }
-      }
+      options: { tableData: { label: "Table Data (JSON)", defaultValue: JSON.stringify(DEFAULT_DATA), widget: "rich_text" } }
     },
     style: {
       title: "Style",
@@ -1754,13 +1746,11 @@ const tableTool = {
     },
     spacing: {
       title: "Spacing",
-      options: {
-        containerPadding: { label: "Padding", defaultValue: "10px", widget: "text" }
-      }
+      options: { containerPadding: { label: "Padding", defaultValue: "10px", widget: "padding" } }
     }
   },
   defaultValues: {
-    tableData: JSON.stringify(defaultTableData),
+    tableData: JSON.stringify(DEFAULT_DATA),
     headerBg: "#f3f4f6",
     headerColor: "#111827",
     borderColor: "#e5e7eb",
@@ -1770,69 +1760,42 @@ const tableTool = {
   },
   renderer: {
     renderEditor(values) {
-      const padding = values.containerPadding || "10px";
-      const headerBg = values.headerBg || "#f3f4f6";
-      const headerColor = values.headerColor || "#111827";
-      const borderColor = values.borderColor || "#e5e7eb";
-      const cellPadding = values.cellPadding || "8px 12px";
-      const fontSize = values.fontSize || "14px";
-      let data = defaultTableData;
-      try {
-        data = JSON.parse(values.tableData);
-      } catch {
-      }
-      const headerRow = data[0] || [];
-      const bodyRows = data.slice(1);
+      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:${fontSize};font-family:arial,sans-serif;">
-            <thead>
-              <tr>
-                ${headerRow.map((cell) => html`<th style="padding:${cellPadding};background:${headerBg};color:${headerColor};border:1px solid ${borderColor};text-align:left;font-weight:600;">${cell}</th>`)}
-              </tr>
-            </thead>
-            <tbody>
-              ${bodyRows.map((row) => html`
-                <tr>
-                  ${row.map((cell) => html`<td style="padding:${cellPadding};border:1px solid ${borderColor};">${cell}</td>`)}
-                </tr>
-              `)}
-            </tbody>
+          <table 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 = values.containerPadding || "10px";
-      const headerBg = values.headerBg || "#f3f4f6";
-      const headerColor = values.headerColor || "#111827";
-      const borderColor = values.borderColor || "#e5e7eb";
-      const cellPadding = values.cellPadding || "8px 12px";
-      const fontSize = values.fontSize || "14px";
-      let data = defaultTableData;
-      try {
-        data = JSON.parse(values.tableData);
-      } catch {
-      }
-      const headerRow = data[0] || [];
-      const bodyRows = data.slice(1);
-      const headerHtml = headerRow.map(
-        (c) => `<th style="padding:${cellPadding};background-color:${headerBg};color:${headerColor};border:1px solid ${borderColor};text-align:left;font-weight:600;font-family:arial,helvetica,sans-serif;font-size:${fontSize};">${c}</th>`
-      ).join("");
-      const bodyHtml = bodyRows.map(
-        (row) => `<tr>${row.map((c) => `<td style="padding:${cellPadding};border:1px solid ${borderColor};font-family:arial,helvetica,sans-serif;font-size:${fontSize};">${c}</td>`).join("")}</tr>`
-      ).join("");
-      return `<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
-  <tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:${padding};font-family:arial,helvetica,sans-serif;" align="left">
-    <table cellpadding="0" cellspacing="0" width="100%" border="0" style="border-collapse:collapse;">
-      <thead><tr>${headerHtml}</tr></thead>
-      <tbody>${bodyHtml}</tbody>
-    </table>
-  </td></tr></tbody>
-</table>`;
+      const 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",
@@ -1846,10 +1809,7 @@ const formTool = {
         actionUrl: { label: "Action URL", defaultValue: "#", widget: "text" },
         method: { label: "Method", defaultValue: "POST", widget: "text" },
         submitText: { label: "Submit Text", defaultValue: "Submit", widget: "text" },
-        fields: { label: "Fields (JSON)", defaultValue: JSON.stringify([
-          { label: "Name", name: "name", type: "text", placeholder: "Your name" },
-          { label: "Email", name: "email", type: "email", placeholder: "your@email.com" }
-        ]), widget: "rich_text" }
+        fields: { label: "Fields (JSON)", defaultValue: JSON.stringify(DEFAULT_FIELDS), widget: "rich_text" }
       }
     },
     style: {
@@ -1861,34 +1821,25 @@ const formTool = {
     },
     spacing: {
       title: "Spacing",
-      options: {
-        containerPadding: { label: "Padding", defaultValue: "10px", widget: "text" }
-      }
+      options: { containerPadding: { label: "Padding", defaultValue: "10px", widget: "padding" } }
     }
   },
   defaultValues: {
     actionUrl: "#",
     method: "POST",
     submitText: "Submit",
-    fields: JSON.stringify([
-      { label: "Name", name: "name", type: "text", placeholder: "Your name" },
-      { label: "Email", name: "email", type: "email", placeholder: "your@email.com" }
-    ]),
+    fields: JSON.stringify(DEFAULT_FIELDS),
     buttonBg: "#3b82f6",
     buttonColor: "#ffffff",
     containerPadding: "10px"
   },
   renderer: {
     renderEditor(values) {
-      const padding = values.containerPadding || "10px";
-      const submitText = values.submitText || "Submit";
-      const buttonBg = values.buttonBg || "#3b82f6";
-      const buttonColor = values.buttonColor || "#ffffff";
-      let fields = [];
-      try {
-        fields = JSON.parse(values.fields);
-      } catch {
-      }
+      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`
@@ -1897,36 +1848,24 @@ const formTool = {
               <input type=${f.type || "text"} placeholder=${f.placeholder || ""} style="width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:4px;font-size:14px;box-sizing:border-box;" />
             </div>
           `)}
-          <button style="background:${buttonBg};color:${buttonColor};border:none;padding:10px 24px;border-radius:4px;font-size:14px;font-weight:600;cursor:pointer;">${submitText}</button>
+          <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 = values.containerPadding || "10px";
-      const actionUrl = values.actionUrl || "#";
-      const method = values.method || "POST";
-      const submitText = values.submitText || "Submit";
-      const buttonBg = values.buttonBg || "#3b82f6";
-      const buttonColor = values.buttonColor || "#ffffff";
-      let fields = [];
-      try {
-        fields = JSON.parse(values.fields);
-      } catch {
-      }
+      const 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-family:arial,helvetica,sans-serif;">${f.label}</label>
-          <input type="${f.type || "text"}" name="${f.name}" placeholder="${f.placeholder || ""}" style="width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:4px;font-size:14px;box-sizing:border-box;font-family:arial,helvetica,sans-serif;" />
-        </div>`
+        (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("");
-      return `<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
-  <tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:${padding};font-family:arial,helvetica,sans-serif;" align="left">
-    <form action="${actionUrl}" method="${method}">
-      ${fieldsHtml}
-      <button type="submit" style="background-color:${buttonBg};color:${buttonColor};border:none;padding:10px 24px;border-radius:4px;font-size:14px;font-weight:600;cursor:pointer;font-family:arial,helvetica,sans-serif;">${submitText}</button>
-    </form>
-  </td></tr></tbody>
-</table>`;
+      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 });
     }
   }
 };
@@ -2151,11 +2090,30 @@ let MailEditorElement = class extends LitElement {
     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);
@@ -2174,6 +2132,7 @@ let MailEditorElement = class extends LitElement {
     this.dragManager?.detach();
     this.unsubscribe?.();
     this.store.events.removeAllListeners();
+    this.removeEventListener("keydown", this._handleKeydown);
   }
   // ----------------------------------------------------------
   // Public API — mirrors Unlayer
@@ -2283,4 +2242,4 @@ export {
   MailEditorElement as M,
   ToolRegistry as T
 };
-//# sourceMappingURL=mail-editor-DzI7SmSe.js.map
+//# sourceMappingURL=mail-editor-ClkIyPni.js.map