@emabuild/core 0.0.4 → 0.0.6

package/README.md

@@ -28,8 +28,8 @@ npm install @emabuild/core lit
 
 | Package | Description | Size |
 |---------|-------------|------|
-| [`@emabuild/core`](https://www.npmjs.com/package/@emabuild/core) | `<mail-editor>` Web Component | ~17KB gzip |
-| [`@emabuild/email-renderer`](https://www.npmjs.com/package/@emabuild/email-renderer) | Standalone HTML export engine (works server-side) | ~3KB gzip |
+| [`@emabuild/core`](https://www.npmjs.com/package/@emabuild/core) | `<mail-editor>` Web Component | ~14.6KB gzip |
+| [`@emabuild/email-renderer`](https://www.npmjs.com/package/@emabuild/email-renderer) | Standalone HTML export engine (works server-side) | ~2.7KB gzip |
 | [`@emabuild/types`](https://www.npmjs.com/package/@emabuild/types) | TypeScript type definitions | types only |
 
 ## Framework Integration
@@ -389,6 +389,21 @@ Available widget types for tool property definitions:
 | `alignment` | `string` | Left/center/right visual picker |
 | `padding` | `string` | 4-side padding editor (CSS shorthand) |
 
+## Performance
+
+The editor is optimized for speed, even with large designs (100+ rows):
+
+- **Fine-grained reactivity** — Components subscribe only to the store channels they need. A hover event re-renders only the affected block, not the entire tree.
+- **Lazy tool loading** — 7 secondary tools are loaded on-demand via dynamic imports. The initial bundle contains only the 6 most-used tools. All lazy tools are preloaded during browser idle time via `requestIdleCallback`.
+- **Minified bundle** — esbuild minification reduces the core package to ~63KB (14.6KB gzip).
+
+| Metric | Value |
+|--------|-------|
+| Initial bundle | 63KB min / 14.6KB gzip |
+| Lazy tool chunks | 7 × ~3KB each |
+| Hover re-renders | O(1) — only the affected block |
+| Time to interactive | < 200ms |
+
 ## Development
 
 ```bash

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

@@ -2,14 +2,14 @@ import { LitElement } from 'lit';
 import { DesignColumn } from '@emabuild/types';
 import { EditorStore } from '../state/editor-store.js';
 import { ToolRegistry } from '../tools/tool-registry.js';
-declare const ColumnRenderer_base: (new (...args: any[]) => LitElement) & typeof LitElement;
-export declare class ColumnRenderer extends ColumnRenderer_base {
+export declare class ColumnRenderer extends LitElement {
     static styles: import('lit').CSSResult;
+    private storeCtrl;
     column: DesignColumn;
-    store: EditorStore;
+    set store(s: EditorStore);
+    get store(): EditorStore;
     toolRegistry: ToolRegistry;
     widthPercent: number;
     render(): import('lit').TemplateResult<1>;
 }
-export {};
 //# sourceMappingURL=column-renderer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"column-renderer.d.ts","sourceRoot":"","sources":["../../src/canvas/column-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAE9D,OAAO,uBAAuB,CAAC;;AAE/B,qBACa,cAAe,SAAQ,mBAA2B;IAC7D,MAAM,CAAC,MAAM,0BA6BX;IAE8B,MAAM,EAAG,YAAY,CAAC;IACtB,KAAK,EAAG,WAAW,CAAC;IACpB,YAAY,EAAG,YAAY,CAAC;IAChC,YAAY,SAAO;IAE/C,MAAM;CAgCP"}
+{"version":3,"file":"column-renderer.d.ts","sourceRoot":"","sources":["../../src/canvas/column-renderer.ts"],"names":[],"mappings":"AAAA,qDAAqD;AACrD,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAE9D,OAAO,uBAAuB,CAAC;AAE/B,qBACa,cAAe,SAAQ,UAAU;IAC5C,MAAM,CAAC,MAAM,0BA6BX;IAEF,OAAO,CAAC,SAAS,CAAyC;IAE1B,MAAM,EAAG,YAAY,CAAC;IAEtD,IACI,KAAK,CAAC,CAAC,EAAE,WAAW,EAAiC;IACzD,IAAI,KAAK,IAAI,WAAW,CAAkC;IAE1B,YAAY,EAAG,YAAY,CAAC;IAChC,YAAY,SAAO;IAE/C,MAAM;CAgCP"}

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

@@ -2,11 +2,12 @@ import { LitElement } from 'lit';
 import { DesignContent } from '@emabuild/types';
 import { EditorStore } from '../state/editor-store.js';
 import { ToolRegistry } from '../tools/tool-registry.js';
-declare const ContentRenderer_base: (new (...args: any[]) => LitElement) & typeof LitElement;
-export declare class ContentRenderer extends ContentRenderer_base {
+export declare class ContentRenderer extends LitElement {
     static styles: import('lit').CSSResult;
+    private storeCtrl;
     content: DesignContent;
-    store: EditorStore;
+    set store(s: EditorStore);
+    get store(): EditorStore;
     toolRegistry: ToolRegistry;
     private handleClick;
     private handleMouseEnter;
@@ -19,5 +20,4 @@ export declare class ContentRenderer extends ContentRenderer_base {
     disconnectedCallback(): void;
     render(): import('lit').TemplateResult<1>;
 }
-export {};
 //# sourceMappingURL=content-renderer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"content-renderer.d.ts","sourceRoot":"","sources":["../../src/canvas/content-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;;AAI9D,qBACa,eAAgB,SAAQ,oBAA2B;IAC9D,MAAM,CAAC,MAAM,0BA6CX;IAE8B,OAAO,EAAG,aAAa,CAAC;IACxB,KAAK,EAAG,WAAW,CAAC;IACpB,YAAY,EAAG,YAAY,CAAC;IAE5D,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,YAAY,CAMlB;IAEF,OAAO,CAAC,UAAU,CAGhB;IAEF,iBAAiB;IAMjB,oBAAoB;IAMpB,MAAM;CAkCP"}
+{"version":3,"file":"content-renderer.d.ts","sourceRoot":"","sources":["../../src/canvas/content-renderer.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAI9D,qBACa,eAAgB,SAAQ,UAAU;IAC7C,MAAM,CAAC,MAAM,0BAyBX;IAEF,OAAO,CAAC,SAAS,CAA+D;IAEhD,OAAO,EAAG,aAAa,CAAC;IAExD,IACI,KAAK,CAAC,CAAC,EAAE,WAAW,EAAiC;IACzD,IAAI,KAAK,IAAI,WAAW,CAAkC;IAE1B,YAAY,EAAG,YAAY,CAAC;IAE5D,OAAO,CAAC,WAAW;IACnB,OAAO,CAAC,gBAAgB;IACxB,OAAO,CAAC,gBAAgB;IACxB,OAAO,CAAC,YAAY;IACpB,OAAO,CAAC,eAAe;IAEvB,OAAO,CAAC,YAAY,CAKlB;IAEF,OAAO,CAAC,UAAU,CAGhB;IAEF,iBAAiB;IAMjB,oBAAoB;IAMpB,MAAM;CAiCP"}

package/dist/canvas/editor-canvas.d.ts

@@ -1,14 +1,14 @@
 import { LitElement } from 'lit';
 import { EditorStore } from '../state/editor-store.js';
 import { ToolRegistry } from '../tools/tool-registry.js';
-declare const EditorCanvas_base: (new (...args: any[]) => LitElement) & typeof LitElement;
-export declare class EditorCanvas extends EditorCanvas_base {
+export declare class EditorCanvas extends LitElement {
     static styles: import('lit').CSSResult;
-    store: EditorStore;
+    private storeCtrl;
+    set store(s: EditorStore);
+    get store(): EditorStore;
     toolRegistry: ToolRegistry;
     private handleCanvasClick;
     private setViewMode;
     render(): import('lit').TemplateResult<1>;
 }
-export {};
 //# sourceMappingURL=editor-canvas.d.ts.map

package/dist/canvas/editor-canvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor-canvas.d.ts","sourceRoot":"","sources":["../../src/canvas/editor-canvas.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAE9D,OAAO,mBAAmB,CAAC;;AAE3B,qBACa,YAAa,SAAQ,iBAA2B;IAC3D,MAAM,CAAC,MAAM,0BAqDX;IAE8B,KAAK,EAAG,WAAW,CAAC;IACpB,YAAY,EAAG,YAAY,CAAC;IAE5D,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,WAAW;IAInB,MAAM;CA4CP"}
+{"version":3,"file":"editor-canvas.d.ts","sourceRoot":"","sources":["../../src/canvas/editor-canvas.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAE9D,OAAO,mBAAmB,CAAC;AAE3B,qBACa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,MAAM,0BAqDX;IAEF,OAAO,CAAC,SAAS,CAAqD;IAEtE,IACI,KAAK,CAAC,CAAC,EAAE,WAAW,EAAiC;IACzD,IAAI,KAAK,IAAI,WAAW,CAAkC;IAE1B,YAAY,EAAG,YAAY,CAAC;IAE5D,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,WAAW;IAInB,MAAM;CA4CP"}

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

@@ -2,11 +2,12 @@ import { LitElement } from 'lit';
 import { DesignRow } from '@emabuild/types';
 import { EditorStore } from '../state/editor-store.js';
 import { ToolRegistry } from '../tools/tool-registry.js';
-declare const RowRenderer_base: (new (...args: any[]) => LitElement) & typeof LitElement;
-export declare class RowRenderer extends RowRenderer_base {
+export declare class RowRenderer extends LitElement {
     static styles: import('lit').CSSResult;
+    private storeCtrl;
     row: DesignRow;
-    store: EditorStore;
+    set store(s: EditorStore);
+    get store(): EditorStore;
     toolRegistry: ToolRegistry;
     private handleMoveUp;
     private handleMoveDown;
@@ -14,5 +15,4 @@ export declare class RowRenderer extends RowRenderer_base {
     private handleDelete;
     render(): import('lit').TemplateResult<1>;
 }
-export {};
 //# sourceMappingURL=row-renderer.d.ts.map

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,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"}
+{"version":3,"file":"row-renderer.d.ts","sourceRoot":"","sources":["../../src/canvas/row-renderer.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,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,UAAU;IACzC,MAAM,CAAC,MAAM,0BAuDX;IAEF,OAAO,CAAC,SAAS,CAAyC;IAE1B,GAAG,EAAG,SAAS,CAAC;IAEhD,IACI,KAAK,CAAC,CAAC,EAAE,WAAW,EAAiC;IACzD,IAAI,KAAK,IAAI,WAAW,CAAkC;IAE1B,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/dnd/drag-manager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drag-manager.d.ts","sourceRoot":"","sources":["../../src/dnd/drag-manager.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAe9D,qBAAa,WAAW;IACtB,OAAO,CAAC,KAAK,CAAc;IAC3B,OAAO,CAAC,YAAY,CAAe;IACnC,OAAO,CAAC,IAAI,CAAa;IACzB,OAAO,CAAC,WAAW,CAA2B;IAC9C,OAAO,CAAC,gBAAgB,CAA4B;IACpD,OAAO,CAAC,YAAY,CAA4B;gBAEpC,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,IAAI,EAAE,UAAU;IAM5E,yDAAyD;IACzD,MAAM,IAAI,IAAI;IASd,yDAAyD;IACzD,MAAM,IAAI,IAAI;IAWd,OAAO,CAAC,UAAU,CAoBhB;IAEF,OAAO,CAAC,MAAM,CAqBZ;IAEF,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,WAAW,CAMjB;IAIF,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,iBAAiB;IAqBzB,OAAO,CAAC,qBAAqB;IAgD7B,OAAO,CAAC,oBAAoB;IAc5B,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,KAAK;CAId"}
+{"version":3,"file":"drag-manager.d.ts","sourceRoot":"","sources":["../../src/dnd/drag-manager.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAe9D,qBAAa,WAAW;IACtB,OAAO,CAAC,KAAK,CAAc;IAC3B,OAAO,CAAC,YAAY,CAAe;IACnC,OAAO,CAAC,IAAI,CAAa;IACzB,OAAO,CAAC,WAAW,CAA2B;IAC9C,OAAO,CAAC,gBAAgB,CAA4B;IACpD,OAAO,CAAC,YAAY,CAA4B;gBAEpC,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,IAAI,EAAE,UAAU;IAM5E,yDAAyD;IACzD,MAAM,IAAI,IAAI;IASd,yDAAyD;IACzD,MAAM,IAAI,IAAI;IAWd,OAAO,CAAC,UAAU,CAoBhB;IAEF,OAAO,CAAC,MAAM,CA0BZ;IAEF,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,WAAW,CAMjB;IAIF,OAAO,CAAC,gBAAgB;YAMV,cAAc;IAmB5B,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,iBAAiB;IAqBzB,OAAO,CAAC,qBAAqB;IAgD7B,OAAO,CAAC,oBAAoB;IAc5B,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,KAAK;CAId"}

package/dist/form-tool-BucdYK9Z.js

@@ -0,0 +1,69 @@
+import { html as b } from "lit";
+import { s as o, j as f, e as u } from "./mail-editor-DNPaJKo3.js";
+const n = [
+  { label: "Name", name: "name", type: "text", placeholder: "Your name" },
+  { label: "Email", name: "email", type: "email", placeholder: "your@email.com" }
+], y = {
+  name: "form",
+  label: "Form",
+  icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M7 7h10"/><path d="M7 12h10"/><path d="M7 17h6"/></svg>',
+  supportedDisplayModes: ["web"],
+  position: 13,
+  options: {
+    form: {
+      title: "Form",
+      options: {
+        actionUrl: { label: "Action URL", defaultValue: "#", widget: "text" },
+        method: { label: "Method", defaultValue: "POST", widget: "text" },
+        submitText: { label: "Submit Text", defaultValue: "Submit", widget: "text" },
+        fields: { label: "Fields (JSON)", defaultValue: JSON.stringify(n), widget: "rich_text" }
+      }
+    },
+    style: {
+      title: "Style",
+      options: {
+        buttonBg: { label: "Button Color", defaultValue: "#3b82f6", widget: "color_picker" },
+        buttonColor: { label: "Button Text", defaultValue: "#ffffff", widget: "color_picker" }
+      }
+    },
+    spacing: {
+      title: "Spacing",
+      options: { containerPadding: { label: "Padding", defaultValue: "10px", widget: "padding" } }
+    }
+  },
+  defaultValues: {
+    actionUrl: "#",
+    method: "POST",
+    submitText: "Submit",
+    fields: JSON.stringify(n),
+    buttonBg: "#3b82f6",
+    buttonColor: "#ffffff",
+    containerPadding: "10px"
+  },
+  renderer: {
+    renderEditor(t) {
+      const l = o(t, "containerPadding", "10px"), r = o(t, "submitText", "Submit"), d = o(t, "buttonBg", "#3b82f6"), a = o(t, "buttonColor", "#ffffff"), s = f(t.fields, n);
+      return b`
+        <div style="padding:${l};font-family:arial,sans-serif;">
+          ${s.map((e) => b`
+            <div style="margin-bottom:12px;">
+              <label style="display:block;font-size:13px;color:#374151;margin-bottom:4px;font-weight:500;">${e.label}</label>
+              <input type=${e.type || "text"} placeholder=${e.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:${d};color:${a};border:none;padding:10px 24px;border-radius:4px;font-size:14px;font-weight:600;cursor:pointer;">${r}</button>
+        </div>
+      `;
+    },
+    renderHtml(t) {
+      const l = o(t, "containerPadding", "10px"), r = o(t, "actionUrl", "#"), d = o(t, "method", "POST"), a = o(t, "submitText", "Submit"), s = o(t, "buttonBg", "#3b82f6"), e = o(t, "buttonColor", "#ffffff"), m = f(t.fields, n), p = "font-family:arial,helvetica,sans-serif;", c = m.map(
+        (i) => `<div style="margin-bottom:12px;"><label style="display:block;font-size:13px;color:#374151;margin-bottom:4px;font-weight:500;${p}">${i.label}</label><input type="${i.type || "text"}" name="${i.name}" placeholder="${i.placeholder || ""}" style="width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:4px;font-size:14px;box-sizing:border-box;${p}" /></div>`
+      ).join(""), x = `<form action="${r}" method="${d}">${c}<button type="submit" style="background-color:${s};color:${e};border:none;padding:10px 24px;border-radius:4px;font-size:14px;font-weight:600;cursor:pointer;${p}">${a}</button></form>`;
+      return u(x, { padding: l });
+    }
+  }
+};
+export {
+  y as formTool
+};
+//# sourceMappingURL=form-tool-BucdYK9Z.js.map

package/dist/form-tool-BucdYK9Z.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-tool-BucdYK9Z.js","sources":["../src/tools/built-in/form-tool.ts"],"sourcesContent":["/**\n * @module form-tool\n *\n * Input form with configurable fields and submit button.\n * Only available in \"web\" display mode (forms don't work in email).\n *\n * Email compatibility: N/A — this tool is for web/popup display mode only.\n */\n\nimport { html, TemplateResult } from 'lit';\nimport type { ContentValues } from '@emabuild/types';\nimport type { LitToolDefinition } from '../tool-registry.js';\nimport { str, jsonParse } from '../helpers/value-extractor.js';\nimport { emailTableCell } from '../helpers/email-html.js';\nimport type { FormField } from '../helpers/types.js';\n\nconst DEFAULT_FIELDS: FormField[] = [\n  { label: 'Name', name: 'name', type: 'text', placeholder: 'Your name' },\n  { label: 'Email', name: 'email', type: 'email', placeholder: 'your@email.com' },\n];\n\nexport const formTool: LitToolDefinition = {\n  name: 'form',\n  label: 'Form',\n  icon: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><path d=\"M7 7h10\"/><path d=\"M7 12h10\"/><path d=\"M7 17h6\"/></svg>`,\n  supportedDisplayModes: ['web'],\n  position: 13,\n  options: {\n    form: {\n      title: 'Form',\n      options: {\n        actionUrl: { label: 'Action URL', defaultValue: '#', widget: 'text' },\n        method: { label: 'Method', defaultValue: 'POST', widget: 'text' },\n        submitText: { label: 'Submit Text', defaultValue: 'Submit', widget: 'text' },\n        fields: { label: 'Fields (JSON)', defaultValue: JSON.stringify(DEFAULT_FIELDS), widget: 'rich_text' },\n      },\n    },\n    style: {\n      title: 'Style',\n      options: {\n        buttonBg: { label: 'Button Color', defaultValue: '#3b82f6', widget: 'color_picker' },\n        buttonColor: { label: 'Button Text', defaultValue: '#ffffff', widget: 'color_picker' },\n      },\n    },\n    spacing: {\n      title: 'Spacing',\n      options: { containerPadding: { label: 'Padding', defaultValue: '10px', widget: 'padding' } },\n    },\n  },\n  defaultValues: {\n    actionUrl: '#', method: 'POST', submitText: 'Submit',\n    fields: JSON.stringify(DEFAULT_FIELDS), buttonBg: '#3b82f6',\n    buttonColor: '#ffffff', containerPadding: '10px',\n  },\n  renderer: {\n    renderEditor(values: ContentValues): TemplateResult {\n      const padding = str(values, 'containerPadding', '10px');\n      const submitText = str(values, 'submitText', 'Submit');\n      const btnBg = str(values, 'buttonBg', '#3b82f6');\n      const btnColor = str(values, 'buttonColor', '#ffffff');\n      const fields = jsonParse<FormField[]>(values.fields, DEFAULT_FIELDS);\n\n      return html`\n        <div style=\"padding:${padding};font-family:arial,sans-serif;\">\n          ${fields.map((f) => html`\n            <div style=\"margin-bottom:12px;\">\n              <label style=\"display:block;font-size:13px;color:#374151;margin-bottom:4px;font-weight:500;\">${f.label}</label>\n              <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;\" />\n            </div>\n          `)}\n          <button style=\"background:${btnBg};color:${btnColor};border:none;padding:10px 24px;border-radius:4px;font-size:14px;font-weight:600;cursor:pointer;\">${submitText}</button>\n        </div>\n      `;\n    },\n    renderHtml(values: ContentValues): string {\n      const padding = str(values, 'containerPadding', '10px');\n      const actionUrl = str(values, 'actionUrl', '#');\n      const method = str(values, 'method', 'POST');\n      const submitText = str(values, 'submitText', 'Submit');\n      const btnBg = str(values, 'buttonBg', '#3b82f6');\n      const btnColor = str(values, 'buttonColor', '#ffffff');\n      const fields = jsonParse<FormField[]>(values.fields, DEFAULT_FIELDS);\n      const font = 'font-family:arial,helvetica,sans-serif;';\n\n      const fieldsHtml = fields.map((f) =>\n        `<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>`\n      ).join('');\n\n      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>`;\n      return emailTableCell(inner, { padding });\n    },\n  },\n};\n"],"names":["DEFAULT_FIELDS","formTool","values","padding","str","submitText","btnBg","btnColor","fields","jsonParse","html","f","actionUrl","method","font","fieldsHtml","inner","emailTableCell"],"mappings":"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"}

package/dist/html-tool-CDX3fL-9.js

@@ -0,0 +1,49 @@
+import { html as l } from "lit";
+import { unsafeHTML as i } from "lit/directives/unsafe-html.js";
+import { e as o, s as t } from "./mail-editor-DNPaJKo3.js";
+const r = {
+  name: "html",
+  label: "HTML",
+  icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>',
+  supportedDisplayModes: ["email", "web"],
+  position: 6,
+  options: {
+    html: {
+      title: "HTML",
+      options: {
+        html: {
+          label: "Custom HTML",
+          defaultValue: '<div style="padding:20px;text-align:center;color:#999;">Custom HTML Block</div>',
+          widget: "rich_text"
+        }
+      }
+    },
+    spacing: {
+      title: "Spacing",
+      options: { containerPadding: { label: "Padding", defaultValue: "10px", widget: "text" } }
+    },
+    general: {
+      title: "General",
+      options: {
+        hideDesktop: { label: "Hide on Desktop", defaultValue: !1, widget: "toggle" },
+        hideMobile: { label: "Hide on Mobile", defaultValue: !1, widget: "toggle" }
+      }
+    }
+  },
+  defaultValues: {
+    html: '<div style="padding:20px;text-align:center;color:#999;">Custom HTML Block</div>',
+    containerPadding: "10px"
+  },
+  renderer: {
+    renderEditor(e) {
+      return l`<div style="padding:${t(e, "containerPadding", "10px")};">${i(t(e, "html"))}</div>`;
+    },
+    renderHtml(e) {
+      return o(t(e, "html"), { padding: t(e, "containerPadding", "10px") });
+    }
+  }
+};
+export {
+  r as htmlTool
+};
+//# sourceMappingURL=html-tool-CDX3fL-9.js.map

package/dist/html-tool-CDX3fL-9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"html-tool-CDX3fL-9.js","sources":["../src/tools/built-in/html-tool.ts"],"sourcesContent":["/**\n * @module html-tool\n *\n * Raw HTML content block for custom code injection.\n *\n * Email compatibility: Content is inserted as-is inside a table cell.\n * The user is responsible for email-safe HTML in this block.\n */\n\nimport { html, TemplateResult } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport type { ContentValues } from '@emabuild/types';\nimport type { LitToolDefinition } from '../tool-registry.js';\nimport { str } from '../helpers/value-extractor.js';\nimport { emailTableCell } from '../helpers/email-html.js';\n\nexport const htmlTool: LitToolDefinition = {\n  name: 'html',\n  label: 'HTML',\n  icon: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"16 18 22 12 16 6\"/><polyline points=\"8 6 2 12 8 18\"/></svg>`,\n  supportedDisplayModes: ['email', 'web'],\n  position: 6,\n  options: {\n    html: {\n      title: 'HTML',\n      options: {\n        html: {\n          label: 'Custom HTML',\n          defaultValue: '<div style=\"padding:20px;text-align:center;color:#999;\">Custom HTML Block</div>',\n          widget: 'rich_text',\n        },\n      },\n    },\n    spacing: {\n      title: 'Spacing',\n      options: { containerPadding: { label: 'Padding', defaultValue: '10px', widget: 'text' } },\n    },\n    general: {\n      title: 'General',\n      options: {\n        hideDesktop: { label: 'Hide on Desktop', defaultValue: false, widget: 'toggle' },\n        hideMobile: { label: 'Hide on Mobile', defaultValue: false, widget: 'toggle' },\n      },\n    },\n  },\n  defaultValues: {\n    html: '<div style=\"padding:20px;text-align:center;color:#999;\">Custom HTML Block</div>',\n    containerPadding: '10px',\n  },\n  renderer: {\n    renderEditor(values: ContentValues): TemplateResult {\n      return html`<div style=\"padding:${str(values, 'containerPadding', '10px')};\">${unsafeHTML(str(values, 'html'))}</div>`;\n    },\n    renderHtml(values: ContentValues): string {\n      return emailTableCell(str(values, 'html'), { padding: str(values, 'containerPadding', '10px') });\n    },\n  },\n};\n"],"names":["htmlTool","values","html","str","unsafeHTML","emailTableCell"],"mappings":";;;AAgBO,MAAMA,IAA8B;AAAA,EACzC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,uBAAuB,CAAC,SAAS,KAAK;AAAA,EACtC,UAAU;AAAA,EACV,SAAS;AAAA,IACP,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,SAAS;AAAA,QACP,MAAM;AAAA,UACJ,OAAO;AAAA,UACP,cAAc;AAAA,UACd,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,IACF;AAAA,IAEF,SAAS;AAAA,MACP,OAAO;AAAA,MACP,SAAS,EAAE,kBAAkB,EAAE,OAAO,WAAW,cAAc,QAAQ,QAAQ,OAAA,EAAO;AAAA,IAAE;AAAA,IAE1F,SAAS;AAAA,MACP,OAAO;AAAA,MACP,SAAS;AAAA,QACP,aAAa,EAAE,OAAO,mBAAmB,cAAc,IAAO,QAAQ,SAAA;AAAA,QACtE,YAAY,EAAE,OAAO,kBAAkB,cAAc,IAAO,QAAQ,SAAA;AAAA,MAAS;AAAA,IAC/E;AAAA,EACF;AAAA,EAEF,eAAe;AAAA,IACb,MAAM;AAAA,IACN,kBAAkB;AAAA,EAAA;AAAA,EAEpB,UAAU;AAAA,IACR,aAAaC,GAAuC;AAClD,aAAOC,wBAA2BC,EAAIF,GAAQ,oBAAoB,MAAM,CAAC,MAAMG,EAAWD,EAAIF,GAAQ,MAAM,CAAC,CAAC;AAAA,IAChH;AAAA,IACA,WAAWA,GAA+B;AACxC,aAAOI,EAAeF,EAAIF,GAAQ,MAAM,GAAG,EAAE,SAASE,EAAIF,GAAQ,oBAAoB,MAAM,EAAA,CAAG;AAAA,IACjG;AAAA,EAAA;AAEJ;"}

package/dist/index.js

@@ -1,7 +1,7 @@
-import { E, M, T } from "./mail-editor-D0FbEUZu.js";
+import { E as t, M as e, T as a } from "./mail-editor-DNPaJKo3.js";
 export {
-  E as EditorStore,
-  M as MailEditorElement,
-  T as ToolRegistry
+  t as EditorStore,
+  e as MailEditorElement,
+  a as ToolRegistry
 };
 //# sourceMappingURL=index.js.map