@emabuild/core 0.0.1 → 0.0.2

package/dist/canvas/row-renderer.d.ts

@@ -8,6 +8,10 @@ export declare class RowRenderer extends RowRenderer_base {
     row: DesignRow;
     store: EditorStore;
     toolRegistry: ToolRegistry;
+    private handleMoveUp;
+    private handleMoveDown;
+    private handleDuplicate;
+    private handleDelete;
     render(): import('lit').TemplateResult<1>;
 }
 export {};

package/dist/canvas/row-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"row-renderer.d.ts","sourceRoot":"","sources":["../../src/canvas/row-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAE9D,OAAO,sBAAsB,CAAC;;AAE9B,qBACa,WAAY,SAAQ,gBAA2B;IAC1D,MAAM,CAAC,MAAM,0BAoCX;IAE8B,GAAG,EAAG,SAAS,CAAC;IAChB,KAAK,EAAG,WAAW,CAAC;IACpB,YAAY,EAAG,YAAY,CAAC;IAE5D,MAAM;CA+BP"}
+{"version":3,"file":"row-renderer.d.ts","sourceRoot":"","sources":["../../src/canvas/row-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAE9D,OAAO,sBAAsB,CAAC;;AAE9B,qBACa,WAAY,SAAQ,gBAA2B;IAC1D,MAAM,CAAC,MAAM,0BAuDX;IAE8B,GAAG,EAAG,SAAS,CAAC;IAChB,KAAK,EAAG,WAAW,CAAC;IACpB,YAAY,EAAG,YAAY,CAAC;IAE5D,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,YAAY;IAKpB,MAAM;CA4CP"}

package/dist/index.js

@@ -1,4 +1,4 @@
-import { E, M, T } from "./mail-editor-DzI7SmSe.js";
+import { E, M, T } from "./mail-editor-CoB2C5CT.js";
 export {
   E as EditorStore,
   M as MailEditorElement,

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

@@ -246,6 +246,34 @@ class EditorStore {
     this.notify();
     this.emitUpdate("row_reordered");
   }
+  duplicateRow(rowId) {
+    const row = this.findRow(rowId);
+    if (!row) return;
+    this.pushHistory();
+    const cloned = deepClone(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 rows = this.design.body.rows;
+    const idx = rows.findIndex((r) => r.id === rowId);
+    rows.splice(idx + 1, 0, cloned);
+    this.syncCounters();
+    this.notify();
+    this.emitUpdate("row_added", cloned);
+  }
+  getRowIndex(rowId) {
+    return this.design.body.rows.findIndex((r) => r.id === rowId);
+  }
   updateRowValues(rowId, patch) {
     const row = this.findRow(rowId);
     if (!row) return;
@@ -813,7 +841,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 +852,24 @@ 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: {
@@ -919,18 +963,57 @@ const headingTool = {
     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: {
@@ -1009,13 +1092,13 @@ const paragraphTool = {
         color: { label: "Text Color", defaultValue: "#374151", widget: "color_picker" },
         lineHeight: { label: "Line Height", defaultValue: "160%", widget: "text" },
         letterSpacing: { label: "Letter Spacing", defaultValue: "normal", widget: "text" },
-        textAlign: { label: "Text Align", defaultValue: "left", widget: "text" }
+        textAlign: { label: "Text Align", defaultValue: "left", widget: "alignment" }
       }
     },
     spacing: {
       title: "Spacing",
       options: {
-        containerPadding: { label: "Padding", defaultValue: "10px", widget: "text" }
+        containerPadding: { label: "Padding", defaultValue: "10px", widget: "padding" }
       }
     }
   },
@@ -1069,16 +1152,26 @@ 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" }
+        containerPadding: { label: "Padding", defaultValue: "10px", widget: "padding" }
       }
     },
     general: {
@@ -1165,12 +1258,41 @@ 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" }
       }
@@ -1178,7 +1300,7 @@ const buttonTool = {
     spacing: {
       title: "Spacing",
       options: {
-        containerPadding: { label: "Padding", defaultValue: "10px", widget: "text" }
+        containerPadding: { label: "Padding", defaultValue: "10px", widget: "padding" }
       }
     },
     general: {
@@ -1279,7 +1401,17 @@ 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" }
       }
@@ -1287,7 +1419,7 @@ const dividerTool = {
     spacing: {
       title: "Spacing",
       options: {
-        containerPadding: { label: "Padding", defaultValue: "10px", widget: "text" }
+        containerPadding: { label: "Padding", defaultValue: "10px", widget: "padding" }
       }
     },
     general: {
@@ -2151,11 +2283,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 +2325,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 +2435,4 @@ export {
   MailEditorElement as M,
   ToolRegistry as T
 };
-//# sourceMappingURL=mail-editor-DzI7SmSe.js.map
+//# sourceMappingURL=mail-editor-CoB2C5CT.js.map