@emabuild/core 0.0.3 → 0.0.5

package/README.md

@@ -0,0 +1,425 @@
+# @emabuild — Drag & Drop Email Editor
+
+A fully embeddable drag-and-drop email editor Web Component. Cross-client email HTML export, and 13 built-in content blocks.
+
+Built with [Lit 3](https://lit.dev/) — works in Angular, React, Vue, or plain HTML.
+
+## Quick Start
+
+```bash
+npm install @emabuild/core lit
+```
+
+```html
+<mail-editor id="editor" style="height:100vh;"></mail-editor>
+
+<script type="module">
+  import '@emabuild/core/mail-editor';
+
+  const editor = document.getElementById('editor');
+
+  editor.addEventListener('editor:ready', () => {
+    console.log('Editor is ready');
+  });
+</script>
+```
+
+## Packages
+
+| Package | Description | Size |
+|---------|-------------|------|
+| [`@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
+
+### Angular
+
+```bash
+npm install @emabuild/core lit
+```
+
+```typescript
+// app.module.ts
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class AppModule {}
+```
+
+```typescript
+// app.component.ts
+import '@emabuild/core/mail-editor';
+
+@Component({
+  template: `<mail-editor #editor style="height:100vh;"></mail-editor>
+             <button (click)="exportHtml()">Export</button>`,
+})
+export class AppComponent {
+  @ViewChild('editor') editor!: ElementRef;
+
+  exportHtml() {
+    this.editor.nativeElement.exportHtml((result) => {
+      console.log(result.html);
+    });
+  }
+}
+```
+
+### React
+
+```tsx
+import '@emabuild/core/mail-editor';
+import { useRef, useEffect } from 'react';
+
+export function EmailEditor() {
+  const editorRef = useRef<any>(null);
+
+  useEffect(() => {
+    const el = editorRef.current;
+    el?.addEventListener('editor:ready', () => {
+      el.loadDesign(myDesign);
+    });
+  }, []);
+
+  const handleExport = () => {
+    editorRef.current?.exportHtml((result) => {
+      console.log(result.html);
+    });
+  };
+
+  return (
+    <div style={{ height: '100vh' }}>
+      <mail-editor ref={editorRef} />
+      <button onClick={handleExport}>Export HTML</button>
+    </div>
+  );
+}
+```
+
+### Vue
+
+```vue
+<template>
+  <mail-editor ref="editor" style="height: 100vh" />
+  <button @click="exportHtml">Export</button>
+</template>
+
+<script setup>
+import '@emabuild/core/mail-editor';
+import { ref, onMounted } from 'vue';
+
+const editor = ref(null);
+
+onMounted(() => {
+  editor.value.addEventListener('editor:ready', () => {
+    editor.value.loadDesign(myDesign);
+  });
+});
+
+function exportHtml() {
+  editor.value.exportHtml((result) => {
+    console.log(result.html);
+  });
+}
+</script>
+```
+
+## API Reference
+
+### Methods
+
+```typescript
+// Load a design JSON
+editor.loadDesign(design: EmailDesign): void;
+
+// Save the current design as JSON
+editor.saveDesign(callback: (design: EmailDesign) => void): void;
+
+// Export email-ready HTML
+editor.exportHtml(callback: (result: ExportResult) => void, options?: ExportOptions): void;
+
+// Promise-based export
+const result = await editor.exportHtmlAsync(options?: ExportOptions);
+
+// Undo / Redo
+editor.undo(): void;
+editor.redo(): void;
+
+// Register a custom tool
+editor.registerTool(definition: ToolDefinition): void;
+
+// Register a callback (e.g. for image upload)
+editor.registerCallback(type: string, callback: Function): void;
+
+// Update body-level settings
+editor.setBodyValues(values: Partial<BodyValues>): void;
+```
+
+### Events
+
+```typescript
+editor.addEventListener('editor:ready', () => {
+  // Editor is fully initialized
+});
+
+editor.addEventListener('design:loaded', (e) => {
+  // A design was loaded via loadDesign()
+  console.log(e.detail.design);
+});
+
+editor.addEventListener('design:updated', (e) => {
+  // User made a change
+  console.log(e.detail.type); // 'content_updated' | 'row_added' | ...
+});
+```
+
+### Export Result
+
+```typescript
+editor.exportHtml((result) => {
+  result.design;  // EmailDesign JSON — save this for future editing
+  result.html;    // Complete HTML document (<!DOCTYPE> to </html>)
+  result.chunks;  // { body, css, fonts[], js }
+});
+```
+
+### Export Options
+
+```typescript
+editor.exportHtml(callback, {
+  minify: true,           // Minify HTML output
+  inlineStyles: true,     // Inline CSS into style attributes
+  cleanup: true,          // Remove unused CSS classes
+  mergeTags: {            // Replace merge tags with values
+    first_name: 'John',
+    company: 'Acme',
+  },
+});
+```
+
+## Built-in Content Blocks
+
+| Block | Description | Email Safe |
+|-------|-------------|:----------:|
+| Text | Rich text with formatting | Yes |
+| Heading | H1-H4 with size/weight/color | Yes |
+| Paragraph | Block text with line-height | Yes |
+| Image | Responsive image with link | Yes |
+| Button | CTA button (VML Outlook fallback) | Yes |
+| Divider | Horizontal line | Yes |
+| HTML | Raw HTML injection | Yes |
+| Social | Social media icon links | Yes |
+| Menu | Horizontal navigation | Yes |
+| Video | YouTube/Vimeo thumbnail + play | Yes |
+| Timer | Countdown display | Yes |
+| Table | Data table with headers | Yes |
+| Form | Input form (web mode only) | Web only |
+
+## Layout Presets
+
+Drag or click to add rows with predefined column layouts:
+
+- `100%` — single column
+- `50 / 50` — two equal columns
+- `33 / 33 / 33` — three equal columns
+- `66 / 33` — two-thirds + one-third
+- `33 / 66` — one-third + two-thirds
+- `25 / 25 / 25 / 25` — four equal columns
+
+## Custom Tools
+
+Register custom content blocks with their own properties and renderers:
+
+```typescript
+import { html } from 'lit';
+
+editor.registerTool({
+  name: 'product_card',
+  label: 'Product Card',
+  icon: '<svg>...</svg>',
+  supportedDisplayModes: ['email'],
+  options: {
+    product: {
+      title: 'Product',
+      options: {
+        name: { label: 'Name', defaultValue: 'Product', widget: 'text' },
+        price: { label: 'Price', defaultValue: '$0.00', widget: 'text' },
+        image: { label: 'Image URL', defaultValue: '', widget: 'text' },
+        bgColor: { label: 'Background', defaultValue: '#ffffff', widget: 'color_picker' },
+      },
+    },
+  },
+  defaultValues: {
+    name: 'Product', price: '$0.00', image: '', bgColor: '#ffffff',
+  },
+  renderer: {
+    renderEditor(values) {
+      return html`
+        <div style="background:${values.bgColor};padding:16px;text-align:center;">
+          <img src="${values.image}" style="max-width:100%;border-radius:8px;" />
+          <h3 style="margin:12px 0 4px;">${values.name}</h3>
+          <p style="color:#3b82f6;font-weight:bold;">${values.price}</p>
+        </div>
+      `;
+    },
+    renderHtml(values, ctx) {
+      return `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
+        <tr><td style="background-color:${values.bgColor};padding:16px;text-align:center;">
+          <img src="${values.image}" width="${ctx.columnWidth}" style="max-width:100%;" />
+          <h3 style="margin:12px 0 4px;">${values.name}</h3>
+          <p style="color:#3b82f6;font-weight:bold;">${values.price}</p>
+        </td></tr>
+      </table>`;
+    },
+  },
+});
+```
+
+## Design JSON Structure
+
+Designs are stored as structured JSON. The format is interoperable with other email editor tools.
+
+```json
+{
+  "counters": { "u_row": 1, "u_column": 1, "u_content_text": 1 },
+  "body": {
+    "id": "u_body",
+    "rows": [
+      {
+        "id": "u_row_1",
+        "cells": [1],
+        "columns": [
+          {
+            "id": "u_column_1",
+            "contents": [
+              {
+                "id": "u_content_text_1",
+                "type": "text",
+                "values": {
+                  "text": "<p>Hello World</p>",
+                  "containerPadding": "10px",
+                  "_meta": { "htmlID": "u_content_text_1", "htmlClassNames": "u_content_text" }
+                }
+              }
+            ],
+            "values": { "backgroundColor": "", "padding": "0px", "_meta": { "htmlID": "u_column_1", "htmlClassNames": "u_column" } }
+          }
+        ],
+        "values": { "backgroundColor": "", "columnsBackgroundColor": "#ffffff", "padding": "0px", "_meta": { "htmlID": "u_row_1", "htmlClassNames": "u_row" } }
+      }
+    ],
+    "headers": [],
+    "footers": [],
+    "values": {
+      "backgroundColor": "#e7e7e7",
+      "contentWidth": "600px",
+      "fontFamily": { "label": "Arial", "value": "arial,helvetica,sans-serif" },
+      "textColor": "#000000",
+      "preheaderText": "",
+      "_meta": { "htmlID": "u_body", "htmlClassNames": "u_body" }
+    }
+  },
+  "schemaVersion": 16
+}
+```
+
+## Server-Side Rendering
+
+Use `@emabuild/email-renderer` to generate HTML from design JSON on the server (Node.js):
+
+```typescript
+import { renderDesignToHtml } from '@emabuild/email-renderer';
+
+const toolRenderers = new Map();
+// Register tool HTML renderers...
+
+const result = renderDesignToHtml(designJson, toolRenderers, {
+  minify: true,
+  mergeTags: { first_name: 'John' },
+});
+
+console.log(result.html); // Complete email HTML
+```
+
+## Email Client Support
+
+Exported HTML uses fluid hybrid design with MSO conditional comments for maximum compatibility:
+
+- Gmail (Web, iOS, Android)
+- Outlook (2016, 2019, 365, Outlook.com)
+- Apple Mail (macOS, iOS)
+- Yahoo Mail
+- Thunderbird
+- Samsung Mail
+
+Key techniques used:
+- Table-based layout with `role="presentation"`
+- MSO ghost tables (`<!--[if mso]>`) for Outlook column rendering
+- VML roundrect for Outlook button border-radius
+- Responsive CSS with `@media` queries
+- Fluid hybrid columns (`display:inline-block` + `max-width`)
+- Dark mode support (`prefers-color-scheme`)
+- Preheader text with invisible padding fill
+
+## Keyboard Shortcuts
+
+| Shortcut | Action |
+|----------|--------|
+| `Ctrl/Cmd + Z` | Undo |
+| `Ctrl/Cmd + Y` | Redo |
+| `Ctrl/Cmd + Shift + Z` | Redo |
+| `Delete` / `Backspace` | Delete selected element |
+| `Escape` | Deselect |
+
+## Property Widgets
+
+Available widget types for tool property definitions:
+
+| Widget | Type | Description |
+|--------|------|-------------|
+| `text` | `string` | Single-line text input |
+| `rich_text` | `string` | Multi-line textarea (HTML) |
+| `color_picker` | `string` | Color swatch + hex input |
+| `toggle` | `boolean` | Checkbox toggle |
+| `dropdown` | `string` | Select dropdown (requires `widgetParams.options`) |
+| `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
+# Install dependencies
+pnpm install
+
+# Start the demo app
+pnpm --filter @emabuild/demo dev
+
+# Build all packages
+pnpm build
+
+# Publish to npm
+pnpm -r publish --access public
+```
+
+## License
+
+MIT

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":";;AAgBA,MAAMA,IAA8B;AAAA,EAClC,EAAE,OAAO,QAAQ,MAAM,QAAQ,MAAM,QAAQ,aAAa,YAAA;AAAA,EAC1D,EAAE,OAAO,SAAS,MAAM,SAAS,MAAM,SAAS,aAAa,iBAAA;AAC/D,GAEaC,IAA8B;AAAA,EACzC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,uBAAuB,CAAC,KAAK;AAAA,EAC7B,UAAU;AAAA,EACV,SAAS;AAAA,IACP,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,SAAS;AAAA,QACP,WAAW,EAAE,OAAO,cAAc,cAAc,KAAK,QAAQ,OAAA;AAAA,QAC7D,QAAQ,EAAE,OAAO,UAAU,cAAc,QAAQ,QAAQ,OAAA;AAAA,QACzD,YAAY,EAAE,OAAO,eAAe,cAAc,UAAU,QAAQ,OAAA;AAAA,QACpE,QAAQ,EAAE,OAAO,iBAAiB,cAAc,KAAK,UAAUD,CAAc,GAAG,QAAQ,YAAA;AAAA,MAAY;AAAA,IACtG;AAAA,IAEF,OAAO;AAAA,MACL,OAAO;AAAA,MACP,SAAS;AAAA,QACP,UAAU,EAAE,OAAO,gBAAgB,cAAc,WAAW,QAAQ,eAAA;AAAA,QACpE,aAAa,EAAE,OAAO,eAAe,cAAc,WAAW,QAAQ,eAAA;AAAA,MAAe;AAAA,IACvF;AAAA,IAEF,SAAS;AAAA,MACP,OAAO;AAAA,MACP,SAAS,EAAE,kBAAkB,EAAE,OAAO,WAAW,cAAc,QAAQ,QAAQ,UAAA,EAAU;AAAA,IAAE;AAAA,EAC7F;AAAA,EAEF,eAAe;AAAA,IACb,WAAW;AAAA,IAAK,QAAQ;AAAA,IAAQ,YAAY;AAAA,IAC5C,QAAQ,KAAK,UAAUA,CAAc;AAAA,IAAG,UAAU;AAAA,IAClD,aAAa;AAAA,IAAW,kBAAkB;AAAA,EAAA;AAAA,EAE5C,UAAU;AAAA,IACR,aAAaE,GAAuC;AAClD,YAAMC,IAAUC,EAAIF,GAAQ,oBAAoB,MAAM,GAChDG,IAAaD,EAAIF,GAAQ,cAAc,QAAQ,GAC/CI,IAAQF,EAAIF,GAAQ,YAAY,SAAS,GACzCK,IAAWH,EAAIF,GAAQ,eAAe,SAAS,GAC/CM,IAASC,EAAuBP,EAAO,QAAQF,CAAc;AAEnE,aAAOU;AAAA,8BACiBP,CAAO;AAAA,YACzBK,EAAO,IAAI,CAACG,MAAMD;AAAA;AAAA,6GAE+EC,EAAE,KAAK;AAAA,4BACxFA,EAAE,QAAQ,MAAM,gBAAgBA,EAAE,eAAe,EAAE;AAAA;AAAA,WAEpE,CAAC;AAAA,sCAC0BL,CAAK,UAAUC,CAAQ,oGAAoGF,CAAU;AAAA;AAAA;AAAA,IAGvK;AAAA,IACA,WAAWH,GAA+B;AACxC,YAAMC,IAAUC,EAAIF,GAAQ,oBAAoB,MAAM,GAChDU,IAAYR,EAAIF,GAAQ,aAAa,GAAG,GACxCW,IAAST,EAAIF,GAAQ,UAAU,MAAM,GACrCG,IAAaD,EAAIF,GAAQ,cAAc,QAAQ,GAC/CI,IAAQF,EAAIF,GAAQ,YAAY,SAAS,GACzCK,IAAWH,EAAIF,GAAQ,eAAe,SAAS,GAC/CM,IAASC,EAAuBP,EAAO,QAAQF,CAAc,GAC7Dc,IAAO,2CAEPC,IAAaP,EAAO;AAAA,QAAI,CAACG,MAC7B,+HAA+HG,CAAI,KAAKH,EAAE,KAAK,wBAAwBA,EAAE,QAAQ,MAAM,WAAWA,EAAE,IAAI,kBAAkBA,EAAE,eAAe,EAAE,wHAAwHG,CAAI;AAAA,MAAA,EACzW,KAAK,EAAE,GAEHE,IAAQ,iBAAiBJ,CAAS,aAAaC,CAAM,KAAKE,CAAU,iDAAiDT,CAAK,UAAUC,CAAQ,kGAAkGO,CAAI,KAAKT,CAAU;AACvQ,aAAOY,EAAeD,GAAO,EAAE,SAAAb,GAAS;AAAA,IAC1C;AAAA,EAAA;AAEJ;"}