best-email-builder 0.3.0 → 0.5.0

package/dist/types/ai/subjects.d.ts

@@ -0,0 +1,97 @@
+/**
+ * The words of an email, as a reader sees them: the head, the styles and the
+ * markup left out.
+ * @param {string} mjml
+ */
+export function emailWords(mjml: string): string;
+/**
+ * The request as the model sees it, or an error when there is nothing to
+ * draw subjects from.
+ * @param {SubjectsInput} input
+ */
+export function cleanSubjectsInput(input: SubjectsInput): {
+    subject: string;
+    preheader: string;
+    text: string;
+    language: string;
+    variables: {
+        key: string;
+        label: string;
+    }[];
+    avoid: string[];
+};
+/** @param {ReturnType<typeof cleanSubjectsInput>} request */
+export function buildSubjectsPrompt({ subject, preheader, text, language, variables, avoid }: ReturnType<typeof cleanSubjectsInput>): string;
+/**
+ * The subjects in a model's answer: the strings of its JSON field
+ * `subjects`; an answer that is no JSON at all, one per line (list marks,
+ * quotes and introductions left out). JSON without that field gives none —
+ * the model is asked again.
+ * @param {string} answer @param {string} [language] the email's, for the capital letter
+ */
+export function parseSubjects(answer: string, language?: string): string[];
+/**
+ * The usable subjects, and what is wrong with the others (for the model).
+ * Left out: a repeat (of the current subject, the preview text, an idea
+ * already shown or another one), a merge tag the list does not have or one
+ * written for another tool, a word in capitals the email does not have, more
+ * than one "!", a subject longer than an inbox shows.
+ * @param {string[]} subjects @param {ReturnType<typeof cleanSubjectsInput>} request
+ */
+export function reviewSubjects(subjects: string[], request: ReturnType<typeof cleanSubjectsInput>): {
+    usable: string[];
+    problems: string[];
+};
+/**
+ * @param {{model: import('./generator.js').EmailModel, maxAttempts?: number}} options
+ * @returns {(input: SubjectsInput, options?: {signal?: AbortSignal}) => Promise<{subjects: string[], attempts: number}>}
+ */
+export function createSubjectSuggester({ model, maxAttempts }: {
+    model: import("./generator.js").EmailModel;
+    maxAttempts?: number;
+}): (input: SubjectsInput, options?: {
+    signal?: AbortSignal;
+}) => Promise<{
+    subjects: string[];
+    attempts: number;
+}>;
+export const SUBJECT_COUNT: 3;
+export const MAX_SUBJECT_LENGTH: 150;
+export const MAX_EMAIL_WORDS: 4000;
+export namespace SUBJECTS_SCHEMA {
+    let type: string;
+    namespace properties {
+        namespace subjects {
+            let type_1: string;
+            export { type_1 as type };
+            export let description: string;
+            export namespace items {
+                let type_2: string;
+                export { type_2 as type };
+            }
+        }
+    }
+    let required: string[];
+    let additionalProperties: boolean;
+}
+export const SUBJECTS_SYSTEM_PROMPT: "You write email subject lines. You get an email (its current subject, its preview text and its words) and answer three NEW subject lines for it, in the JSON field \"subjects\".\n\nEach subject:\n- tells what the email brings, specific to its content: under 50 characters when possible, 70 at most;\n- takes its own angle: one clear and direct, one that makes the reader curious, one personal or timely;\n- is written in the language of the email;\n- invents no facts: no price, discount, date, number, name or promise the email does not contain;\n- is plain text: no HTML, no quotation marks around it, no line break;\n- has no word in capitals, at most one \"!\", no spam wording (\"free!!!\", \"act now\", \"100% guaranteed\");\n- has no emoji, unless the current subject has one;\n- differs from the current subject and from the two others, and does not repeat the preview text.\n\nMerge tags: you may personalise ONE of the three with a merge tag from the list you are given, written exactly as listed, e.g. {{contact.firstname}}. No other merge tag.";
+/** Longer than any inbox shows. */
+export const MAX_SUBJECT_SHOWN: 90;
+/**
+ * `text`: the words of the email (`emailWords`); `language`: the one of the
+ * interface, used when the email has no words yet and its subject does not
+ * tell; `variables`: a link variable (`kind: 'link'`) is never offered;
+ * `avoid`: ideas already shown ("More ideas" asks for new ones).
+ */
+export type SubjectsInput = {
+    subject?: string;
+    preheader?: string;
+    text?: string;
+    language?: string;
+    variables?: {
+        key: string;
+        label?: string;
+        kind?: string;
+    }[];
+    avoid?: string[];
+};

package/dist/types/blocks/shared.d.ts

@@ -1,3 +1,23 @@
+/**
+ * Building blocks shared by all blocks: palette, fonts, recurring properties.
+ *
+ * -- DEFAULT PALETTE ---------------------------------------------------------
+ * Plain hex values: email clients load no stylesheet and understand neither
+ * `var()` nor modern color functions, so every value ends up inline in a
+ * `style=""` attribute.
+ *
+ * -- EVERY BLOCK SETS ITS OWN TEXT ATTRIBUTES --------------------------------
+ * Font, size, line height and color are written on the element itself, never
+ * left to MJML defaults (the "Ubuntu" font loaded from Google, line height 1):
+ * the canvas and the sent email then render the same thing, and Outlook gets
+ * explicit values.
+ *
+ * Fonts: only web-safe stacks, installed everywhere and understood by
+ * Outlook - a web font only renders in a minority of email clients.
+ */
+/** @typedef {import('../core/EmailEditor.js').BlockProperty} BlockProperty */
+/** Text for an MJML attribute or element. @param {string} text */
+export function escapeXml(text: string): string;
 /**
  * White one-column section: the wrapper of a content block dropped outside
  * any column (MJML does not accept text directly inside the body).

package/dist/types/core/EmailEditor.d.ts

@@ -27,7 +27,9 @@
  *   `structure` : body, section, column — selectable, not addable.
  *
  * `mjml` is the inserted fragment; `sectionMjml` the same wrapped in a
- * section, for when it must go outside any column; `tagName` identifies the
+ * section, for when it must go outside any column. Either may be a function
+ * of the translator, so the texts a block brings arrive in the interface's
+ * language; `tagName` identifies the
  * block of a selected element (`mj-text` → text).
  * `editableContent`: the content is editable (canvas for text, panel for a
  * button label).
@@ -43,8 +45,8 @@
  *   kind: 'content'|'layout'|'structure',
  *   tagName: string,
  *   order?: number,
- *   mjml?: string,
- *   sectionMjml?: string,
+ *   mjml?: string | ((t: import('../i18n/index.js').Translate) => string),
+ *   sectionMjml?: string | ((t: import('../i18n/index.js').Translate) => string),
  *   properties: BlockProperty[],
  *   editableContent?: boolean,
  *   insertOnly?: boolean,
@@ -59,20 +61,30 @@
  *   tagName: string,
  *   attributes: Record<string, string>,
  *   content: string|null,
+ *   html?: string|null,
  *   canRemove: boolean,
  *   canDuplicate: boolean,
  *   canMoveUp: boolean,
  *   canMoveDown: boolean,
+ *   columnCount?: number,
+ *   multiple?: number,
  * }} EngineSelection
+ *   `content`: the label of a button or a menu link, as plain text.
+ *   `html`: the HTML of a text (`mj-text`), as stored.
+ *   `columnCount`: for a section, how many columns it holds (its name).
+ *   `multiple`: the whole email is selected (Ctrl+A) — how many sections;
+ *   the selection is then described as the body, and only removal applies.
  */
 /**
- * Selected element, in the builder's vocabulary: its block and its property
- * values (padding recombined, see mjmlAttributes).
+ * Selected element, in the builder's vocabulary: its block, its property
+ * values (padding recombined, see mjmlAttributes) and, for the properties left
+ * empty, what MJML renders instead (`defaults`, see mjmlDefaults).
  *
  * @typedef {EngineSelection & {
  *   blockId: string|null,
  *   label: string,
  *   values: Record<string, string>,
+ *   defaults: Record<string, string>,
  * }} EmailSelection
  */
 /**
@@ -98,6 +110,8 @@
  *     blocks: EmailBlock[],
  *     document: EmailDocument|null,
  *     onEvent: (type: string, payload?: any) => void,
+ *     t?: import('../i18n/index.js').Translate,
+ *     labelOf?: (selection: EngineSelection) => string,
  *   }) => Promise<void>,
  *   destroy: () => void,
  *   addBlock: (block: EmailBlock, options?: {targetId?: string|null}) => string|null,
@@ -120,13 +134,15 @@
  *   getProject: () => object,
  *   loadProject: (project: object) => void,
  *   loadMjml: (mjml: string) => void,
+ *   setMjml?: (mjml: string) => void,
  *   exportMjml: () => string,
- *   exportHtml: (mjml?: string|null) => HtmlExport,
+ *   exportHtml: (mjml?: string|null) => Promise<HtmlExport>,
  *   setDevice: (device: EmailDevice) => void,
  *   getDevice: () => EmailDevice,
  *   startBlockDrag: (block: EmailBlock, event: Event) => void,
  *   endBlockDrag: (cancel?: boolean) => void,
  *   addShortcut: (id: string, keys: string, handler: () => void) => (() => void),
+ *   selectAll?: () => void,
  * }} EmailEditorAdapter
  */
 /**
@@ -163,6 +179,7 @@
  *   duplicate: (id?: string|null) => string|null,
  *   move: (direction: -1|1, id?: string|null) => boolean,
  *   select: (id: string|null) => void,
+ *   selectAll: () => void,
  *   getSelection: () => EmailSelection|null,
  *   getElement: (id: string) => EmailSelection|null,
  *   getRootId: () => string|null,
@@ -175,10 +192,12 @@
  *   canUndo: () => boolean,
  *   canRedo: () => boolean,
  *   getDocument: () => EmailDocument,
- *   loadDocument: (document: unknown) => void,
+ *   loadDocument: (document: unknown, options?: {mjml?: string|null}) => void,
  *   loadMjml: (mjml: string) => void,
+ *   setMjml: (mjml: string) => void,
  *   exportMjml: () => string,
- *   exportHtml: (mjml?: string|null) => HtmlExport,
+ *   exportHtml: (mjml?: string|null) => Promise<HtmlExport>,
+ *   setBrand: (brand: import('../features/brand/brand.js').Brand|null) => void,
  *   setDevice: (device: EmailDevice) => void,
  *   getDevice: () => EmailDevice,
  *   startBlockDrag: (blockId: string, event: Event) => void,
@@ -187,18 +206,33 @@
  *   on: (event: string, listener: (payload?: any) => void) => () => void,
  * }} EmailEditor
  */
+/**
+ * A block with its MJML (and section MJML) as strings, its texts in the
+ * translator's language.
+ * @param {EmailBlock} block
+ * @param {import('../i18n/index.js').Translate} [t]
+ * @returns {EmailBlock & {mjml?: string, sectionMjml?: string}}
+ */
+export function resolveBlock(block: EmailBlock, t?: import("../i18n/index.js").Translate): EmailBlock & {
+    mjml?: string;
+    sectionMjml?: string;
+};
 /**
  * @param {{
  *   adapter: EmailEditorAdapter,
  *   blocks: import('./registry.js').Registry<EmailBlock>,
  *   features?: import('./registry.js').Registry<EmailBuilderFeature> | null,
+ *   t?: import('../i18n/index.js').Translate,
  * }} options
+ *   `t`: the interface's translator — texts of inserted blocks, names shown
+ *   in the canvas.
  * @returns {EmailEditor}
  */
-export function createEmailEditor({ adapter, blocks, features }: {
+export function createEmailEditor({ adapter, blocks, features, t }: {
     adapter: EmailEditorAdapter;
     blocks: import("./registry.js").Registry<EmailBlock>;
     features?: import("./registry.js").Registry<EmailBuilderFeature> | null;
+    t?: import("../i18n/index.js").Translate;
 }): EmailEditor;
 export type EmailDevice = import("./constants.js").EmailDevice;
 export type EmailDocument = import("./document.js").EmailDocument;
@@ -229,7 +263,9 @@ export type BlockProperty = {
  *   `structure` : body, section, column — selectable, not addable.
  *
  * `mjml` is the inserted fragment; `sectionMjml` the same wrapped in a
- * section, for when it must go outside any column; `tagName` identifies the
+ * section, for when it must go outside any column. Either may be a function
+ * of the translator, so the texts a block brings arrive in the interface's
+ * language; `tagName` identifies the
  * block of a selected element (`mj-text` → text).
  * `editableContent`: the content is editable (canvas for text, panel for a
  * button label).
@@ -245,34 +281,42 @@ export type EmailBlock = {
     kind: "content" | "layout" | "structure";
     tagName: string;
     order?: number;
-    mjml?: string;
-    sectionMjml?: string;
+    mjml?: string | ((t: import("../i18n/index.js").Translate) => string);
+    sectionMjml?: string | ((t: import("../i18n/index.js").Translate) => string);
     properties: BlockProperty[];
     editableContent?: boolean;
     insertOnly?: boolean;
 };
 /**
- * Selected element as described by the ENGINE: MJML tag and raw attributes,
- * nothing more.
+ * `content`: the label of a button or a menu link, as plain text.
+ * `html`: the HTML of a text (`mj-text`), as stored.
+ * `columnCount`: for a section, how many columns it holds (its name).
+ * `multiple`: the whole email is selected (Ctrl+A) — how many sections;
+ * the selection is then described as the body, and only removal applies.
  */
 export type EngineSelection = {
     id: string;
     tagName: string;
     attributes: Record<string, string>;
     content: string | null;
+    html?: string | null;
     canRemove: boolean;
     canDuplicate: boolean;
     canMoveUp: boolean;
     canMoveDown: boolean;
+    columnCount?: number;
+    multiple?: number;
 };
 /**
- * Selected element, in the builder's vocabulary: its block and its property
- * values (padding recombined, see mjmlAttributes).
+ * Selected element, in the builder's vocabulary: its block, its property
+ * values (padding recombined, see mjmlAttributes) and, for the properties left
+ * empty, what MJML renders instead (`defaults`, see mjmlDefaults).
  */
 export type EmailSelection = EngineSelection & {
     blockId: string | null;
     label: string;
     values: Record<string, string>;
+    defaults: Record<string, string>;
 };
 export type HtmlExport = {
     html: string;
@@ -302,6 +346,8 @@ export type EmailEditorAdapter = {
         blocks: EmailBlock[];
         document: EmailDocument | null;
         onEvent: (type: string, payload?: any) => void;
+        t?: import("../i18n/index.js").Translate;
+        labelOf?: (selection: EngineSelection) => string;
     }) => Promise<void>;
     destroy: () => void;
     addBlock: (block: EmailBlock, options?: {
@@ -326,13 +372,15 @@ export type EmailEditorAdapter = {
     getProject: () => object;
     loadProject: (project: object) => void;
     loadMjml: (mjml: string) => void;
+    setMjml?: (mjml: string) => void;
     exportMjml: () => string;
-    exportHtml: (mjml?: string | null) => HtmlExport;
+    exportHtml: (mjml?: string | null) => Promise<HtmlExport>;
     setDevice: (device: EmailDevice) => void;
     getDevice: () => EmailDevice;
     startBlockDrag: (block: EmailBlock, event: Event) => void;
     endBlockDrag: (cancel?: boolean) => void;
     addShortcut: (id: string, keys: string, handler: () => void) => (() => void);
+    selectAll?: () => void;
 };
 /**
  * Pluggable feature. `setup` receives the ready editor and may return a
@@ -369,6 +417,7 @@ export type EmailEditor = {
     duplicate: (id?: string | null) => string | null;
     move: (direction: -1 | 1, id?: string | null) => boolean;
     select: (id: string | null) => void;
+    selectAll: () => void;
     getSelection: () => EmailSelection | null;
     getElement: (id: string) => EmailSelection | null;
     getRootId: () => string | null;
@@ -381,10 +430,14 @@ export type EmailEditor = {
     canUndo: () => boolean;
     canRedo: () => boolean;
     getDocument: () => EmailDocument;
-    loadDocument: (document: unknown) => void;
+    loadDocument: (document: unknown, options?: {
+        mjml?: string | null;
+    }) => void;
     loadMjml: (mjml: string) => void;
+    setMjml: (mjml: string) => void;
     exportMjml: () => string;
-    exportHtml: (mjml?: string | null) => HtmlExport;
+    exportHtml: (mjml?: string | null) => Promise<HtmlExport>;
+    setBrand: (brand: import("../features/brand/brand.js").Brand | null) => void;
     setDevice: (device: EmailDevice) => void;
     getDevice: () => EmailDevice;
     startBlockDrag: (blockId: string, event: Event) => void;

package/dist/types/core/constants.d.ts

@@ -6,7 +6,7 @@
  * project JSON). Both are written with every template, so a document read by
  * a newer version knows whether it must be migrated (see `core/document.js`).
  */
-export const EMAIL_BUILDER_VERSION: "0.3.0";
+export const EMAIL_BUILDER_VERSION: "0.5.0";
 export const EMAIL_DOCUMENT_SCHEMA_VERSION: 1;
 /** @typedef {'desktop'|'mobile'} EmailDevice */
 /** @type {EmailDevice[]} */

package/dist/types/core/mjmlDefaults.d.ts

@@ -0,0 +1,13 @@
+/**
+ * MJML DEFAULTS — what MJML 5 renders when an attribute is not written.
+ *
+ * The properties panel shows them, greyed, in empty fields: an empty
+ * "Padding" of a section is not "0" — MJML gives it 20 px above and below,
+ * and the panel must say so (and start from there when one side is edited).
+ *
+ * Copied from the `defaultAttributes` of the mjml 5 components (the same
+ * version the server and the canvas compile with); the unit tests check them
+ * against the installed components.
+ */
+/** @type {Record<string, Record<string, string>>} */
+export const MJML_DEFAULTS: Record<string, Record<string, string>>;

package/dist/types/core/scrollbars.d.ts

@@ -1,5 +1,5 @@
 /**
- * Scrollbars inside the builder's frames (the GrapesJS canvas, the preview),
+ * Scrollbars inside the builder's frames (the canvas, the preview),
  * the same as in the rest of the builder: a 5.6 px gutter, a 2.8 px thumb,
  * no arrows, shown only while the pointer is over the scrolling block. A frame is a
  * document of its own, so `styles.css` does not reach it — the same rules

package/dist/types/defaultEditor.d.ts

@@ -1,8 +1,11 @@
 /**
  * An editor wired to the default engine and the built-in registries.
  *
- * @param {{locale?: string}} [options]  `locale`: engine UI locale (`'en'` by default)
+ * @param {{locale?: string, t?: import('./i18n/index.js').Translate}} [options]
+ *   `t`: the interface's translator (texts of inserted blocks, names in the
+ *   canvas); by default the built-in one of `locale` (`'en'`).
  */
 export function createDefaultEmailEditor(options?: {
     locale?: string;
+    t?: import("./i18n/index.js").Translate;
 }): import("./core/EmailEditor.js").EmailEditor;

package/dist/types/engine/NativeAdapter.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @param {{
+ *   loadCompiler?: () => Promise<(mjml: string) => Promise<{html: string, errors: any[]}>>,
+ * }} [options]
+ * @returns {EmailEditorAdapter & {readonly view: any, readonly root: EmailNode|null}}
+ */
+export function createNativeAdapter({ loadCompiler }?: {
+    loadCompiler?: () => Promise<(mjml: string) => Promise<{
+        html: string;
+        errors: any[];
+    }>>;
+}): EmailEditorAdapter & {
+    readonly view: any;
+    readonly root: EmailNode | null;
+};
+/**
+ * @typedef {import('../core/EmailEditor.js').EmailEditorAdapter} EmailEditorAdapter
+ * @typedef {import('../core/EmailEditor.js').EmailBlock} EmailBlock
+ * @typedef {import('../core/EmailEditor.js').EngineSelection} EngineSelection
+ * @typedef {import('./model.js').EmailNode} EmailNode
+ */
+export const ENGINE_NAME: "beb-mjml";
+export const ENGINE_VERSION: "0.5.0";
+export const EMPTY_MJML: "<mjml><mj-body background-color=\"#eceff4\" width=\"600px\"></mj-body></mjml>";
+export type EmailEditorAdapter = import("../core/EmailEditor.js").EmailEditorAdapter;
+export type EmailBlock = import("../core/EmailEditor.js").EmailBlock;
+export type EngineSelection = import("../core/EmailEditor.js").EngineSelection;
+export type EmailNode = import("./model.js").EmailNode;

package/dist/types/engine/canvas/CanvasView.d.ts

@@ -0,0 +1,88 @@
+/**
+ * @param {{
+ *   container: HTMLElement,
+ *   compile: (mjml: string) => Promise<{html: string, errors: any[]}>,
+ *   getRoot: () => EmailNode,
+ *   t: (key: string, values?: Record<string, any>) => string,
+ *   info: (id: string) => {label: string, tag: string, canRemove: boolean, canDuplicate: boolean, canMove: boolean, hasParent: boolean, parentLabel: string}|null,
+ *   onSelect: (id: string|null) => void,
+ *   onAction: (action: 'parent'|'duplicate'|'remove', id: string) => void,
+ *   onDrop: (payload: DragPayload, target: DropTarget) => void,
+ *   onEditStart: (id: string) => void,
+ *   onEditInput: (id: string, html: string) => void,
+ *   onEditEnd: (id: string, html: string) => void,
+ *   onKeyDown: (event: KeyboardEvent) => void,
+ * }} options
+ */
+export function createCanvasView(options: {
+    container: HTMLElement;
+    compile: (mjml: string) => Promise<{
+        html: string;
+        errors: any[];
+    }>;
+    getRoot: () => EmailNode;
+    t: (key: string, values?: Record<string, any>) => string;
+    info: (id: string) => {
+        label: string;
+        tag: string;
+        canRemove: boolean;
+        canDuplicate: boolean;
+        canMove: boolean;
+        hasParent: boolean;
+        parentLabel: string;
+    } | null;
+    onSelect: (id: string | null) => void;
+    onAction: (action: "parent" | "duplicate" | "remove", id: string) => void;
+    onDrop: (payload: DragPayload, target: DropTarget) => void;
+    onEditStart: (id: string) => void;
+    onEditInput: (id: string, html: string) => void;
+    onEditEnd: (id: string, html: string) => void;
+    onKeyDown: (event: KeyboardEvent) => void;
+}): {
+    frame: HTMLIFrameElement;
+    document: Document;
+    render: () => Promise<void>;
+    refresh: () => void;
+    /** @param {string|null} id */
+    setSelection(id: string | null): void;
+    /** Ctrl+A: boxes on every given element (empty array: none). @param {string[]} ids */
+    setMultiSelection(ids: string[]): void;
+    /** @param {'desktop'|'mobile'} next */
+    setDevice(next: "desktop" | "mobile"): void;
+    getDevice: () => "desktop" | "mobile";
+    startDrag: (start: {
+        payload: DragPayload;
+        label: string;
+        source: "host" | "frame";
+        pointerId: number;
+        captureTarget: Element;
+        x: number;
+        y: number;
+    }) => void;
+    cancelDrag: () => void;
+    isDragging: () => boolean;
+    /** @param {string} id @param {{x: number, y: number}|null} [at] */
+    startEditing: (id: string, at?: {
+        x: number;
+        y: number;
+    } | null) => void;
+    finishEditing: () => void;
+    editingId: () => string | null;
+    /** @param {string} text */
+    insertText(text: string): boolean;
+    /** @param {string} html */
+    insertHtml(html: string): boolean;
+    destroy(): void;
+};
+/** @typedef {import('../model.js').EmailNode} EmailNode */
+/** @typedef {import('../placement.js').DropTarget} DropTarget */
+/** @typedef {{kind: 'content'|'layout', nodeId?: string|null, block?: any}} DragPayload */
+/** Elements edited as rich text in the canvas. */
+export const EDITABLE_TAGS: Set<string>;
+export type EmailNode = import("../model.js").EmailNode;
+export type DropTarget = import("../placement.js").DropTarget;
+export type DragPayload = {
+    kind: "content" | "layout";
+    nodeId?: string | null;
+    block?: any;
+};

package/dist/types/engine/canvas/canvasStyles.d.ts

@@ -0,0 +1,3 @@
+export const CANVAS_CSS: "\nhtml, body { min-height: 100%; }\nbody { margin: 0; }\n.eb-node { cursor: default; }\n.eb-node a { cursor: pointer; }\n[contenteditable=\"true\"] { outline: none; cursor: text; caret-color: #5b4ff0; }\ntd.eb-placeholder { outline: 1.5px dashed #c3cad6; outline-offset: -8px; }\n.eb-placeholder { user-select: none; }\n\n#eb-ui { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 2147483000;\n  font: 500 11px/1.2 system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }\n#eb-ui * { box-sizing: border-box; }\n#eb-ui [hidden] { display: none !important; }\n.eb-ui-box { position: absolute; pointer-events: none; }\n.eb-ui-hover { box-shadow: inset 0 0 0 1px rgba(91, 79, 240, 0.55); }\n.eb-ui-select { box-shadow: inset 0 0 0 2px #5b4ff0; }\n.eb-ui-chip { position: absolute; pointer-events: none; white-space: nowrap; color: #fff; background: #5b4ff0;\n  padding: 4px 7px; border-radius: 5px; font-weight: 600; letter-spacing: 0.01em; }\n.eb-ui-hover-chip { background: rgba(91, 79, 240, 0.85); }\n.eb-ui-tools { position: absolute; display: flex; gap: 1px; padding: 2px; border-radius: 6px; background: #5b4ff0;\n  box-shadow: 0 4px 12px -4px rgba(40, 30, 120, 0.5); pointer-events: auto; }\n.eb-ui-tools button { all: unset; box-sizing: border-box; width: 26px; height: 24px; display: grid; place-items: center;\n  color: #fff; border-radius: 4px; cursor: pointer; }\n.eb-ui-tools button:hover, .eb-ui-tools button:focus-visible { background: rgba(255, 255, 255, 0.2); }\n.eb-ui-tools button[data-action=\"move\"] { cursor: grab; touch-action: none; }\n.eb-ui-tools button.eb-ui-parent { width: auto; gap: 4px; padding: 0 7px 0 5px; display: inline-flex; align-items: center;\n  font-weight: 600; white-space: nowrap; }\n.eb-ui-tools button.eb-ui-parent + button { margin-left: 2px; box-shadow: -1px 0 0 rgba(255, 255, 255, 0.25); }\n.eb-ui-drop { position: absolute; height: 4px; margin-top: -2px; border-radius: 2px; background: #5b4ff0;\n  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); pointer-events: none; }\n.eb-ui-drop::before, .eb-ui-drop::after { content: ''; position: absolute; top: -3px; width: 10px; height: 10px;\n  border-radius: 50%; background: #5b4ff0; box-shadow: 0 0 0 2px #fff; }\n.eb-ui-drop::before { left: -5px; }\n.eb-ui-drop::after { right: -5px; }\n.eb-ui-text { position: absolute; display: flex; align-items: center; gap: 1px; padding: 3px; border-radius: 8px;\n  background: #fff; border: 1px solid #dfe3ea; box-shadow: 0 8px 22px -10px rgba(16, 24, 40, 0.35); pointer-events: auto; }\n.eb-ui-text button { all: unset; box-sizing: border-box; width: 28px; height: 26px; display: grid; place-items: center;\n  color: #2b3038; border-radius: 5px; cursor: pointer; }\n.eb-ui-text button:hover, .eb-ui-text button:focus-visible { background: #eef0f6; }\n.eb-ui-text button[aria-pressed=\"true\"] { background: #e8e6fd; color: #5b4ff0; }\n.eb-ui-text .eb-ui-sep { width: 1px; height: 18px; margin: 0 3px; background: #e3e6ec; }\n.eb-ui-text input { all: unset; box-sizing: border-box; width: 220px; height: 26px; padding: 0 8px; border-radius: 5px;\n  border: 1px solid #dfe3ea; font: 400 12px/1 system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; color: #2b3038; }\n.eb-ui-text input:focus { border-color: #5b4ff0; }\n\n::-webkit-scrollbar{width:5.6px;height:5.6px;background:transparent}\n::-webkit-scrollbar-button{display:none;width:0;height:0}\n::-webkit-scrollbar-track,::-webkit-scrollbar-track-piece,::-webkit-scrollbar-corner{background:transparent;border:0;box-shadow:none}\n::-webkit-scrollbar-thumb{background-color:rgba(156,163,175,.45);border:1.4px solid transparent;background-clip:content-box;border-radius:9999px;min-height:2rem;min-width:2rem}\n::-webkit-scrollbar-thumb:hover{background-color:rgba(107,114,128,.7)}\n@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:rgba(156,163,175,.45) transparent}}\n@media (hover:hover) and (pointer:fine){\n::-webkit-scrollbar-thumb{background-color:transparent}\n*:hover::-webkit-scrollbar-thumb{background-color:rgba(156,163,175,.45)}\n*:hover::-webkit-scrollbar-thumb:hover{background-color:rgba(107,114,128,.7)}\n@supports not selector(::-webkit-scrollbar){*{scrollbar-color:transparent transparent}*:hover{scrollbar-color:rgba(156,163,175,.45) transparent}}\n}\n";
+/** The drag label, in the host page (outside the frame): inline styles only. */
+export const GHOST_STYLE: string;

package/dist/types/engine/canvas/icons.d.ts

@@ -0,0 +1,14 @@
+export namespace ICONS {
+    let parent: string;
+    let move: string;
+    let duplicate: string;
+    let remove: string;
+    let bold: string;
+    let italic: string;
+    let underline: string;
+    let strike: string;
+    let link: string;
+    let unlink: string;
+    let clear: string;
+    let check: string;
+}

package/dist/types/engine/canvas/morph.d.ts

@@ -0,0 +1,21 @@
+/**
+ * MORPH — updates the canvas DOM to a newly compiled email in place.
+ *
+ * Replacing the whole page at every change would reload the images (the
+ * email jumps while they come back), lose the scroll position and the caret
+ * of a text being typed. Nodes are compared position by position instead:
+ * same kind of node → its attributes and children are updated, otherwise it
+ * is replaced. An unchanged image keeps its element, so it never reloads.
+ *
+ * `skip(element)`: an element left exactly as it is, children included (the
+ * text being edited: the browser owns it until the edit ends).
+ */
+/**
+ * @param {Element} from @param {Element} to
+ */
+export function syncAttributes(from: Element, to: Element): void;
+/**
+ * Makes `from`'s children match `to`'s.
+ * @param {Node} from @param {Node} to @param {(element: Element) => boolean} [skip]
+ */
+export function morphChildren(from: Node, to: Node, skip?: (element: Element) => boolean): void;

package/dist/types/engine/canvasMjml.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Grey frame of an image without a file (an SVG data URL, canvas only),
+ * drawn at the width it will be shown so its text stays readable in a narrow
+ * column (it says where to choose the image only when there is room).
+ * @param {string} label @param {number} [width]
+ */
+export function imagePlaceholder(label: string, width?: number): string;
+/**
+ * @param {EmailNode} root
+ * @param {{t?: (key: string) => string}} [options]
+ * @returns {string}
+ */
+export function canvasMjml(root: EmailNode, { t }?: {
+    t?: (key: string) => string;
+}): string;
+/**
+ * Id of the model element an HTML element belongs to (its own marker or its
+ * closest marked ancestor's), or null.
+ * @param {Element|null} element
+ * @returns {{id: string, element: Element}|null}
+ */
+export function markedAncestor(element: Element | null): {
+    id: string;
+    element: Element;
+} | null;
+export const NODE_CLASS: "eb-node";
+export const ID_CLASS_PREFIX: "eb-id-";
+export const TAG_CLASS_PREFIX: "eb-tag-";
+export const PLACEHOLDER_CLASS: "eb-placeholder";
+export type EmailNode = import("./model.js").EmailNode;

package/dist/types/engine/mjml.d.ts

@@ -0,0 +1,31 @@
+/** @param {string} value */
+export function decodeAttribute(value: string): string;
+/** @param {string} value */
+export function encodeAttribute(value: string): string;
+/**
+ * MJML elements of a fragment (no `<mjml>` needed): `<mj-section>…</mj-section><mj-section>…`.
+ * @param {string} source
+ * @returns {EmailNode[]}
+ */
+export function parseMjmlFragment(source: string): EmailNode[];
+/**
+ * A whole email. Always returns an `mjml` root holding an `mj-body`: a bare
+ * fragment is wrapped, a missing body is added.
+ * @param {string} source
+ * @returns {EmailNode}
+ */
+export function parseMjml(source: string): EmailNode;
+/**
+ * The MJML of a tree. `pretty`: one element per line, indented (what is
+ * stored and downloaded); otherwise on one line.
+ * @param {EmailNode} node
+ * @param {{pretty?: boolean, attributes?: (node: EmailNode) => Record<string, string>, extraChildren?: (node: EmailNode) => string}} [options]
+ *   `attributes`: replaces a node's attributes on write (the canvas adds its
+ *   markers there); `extraChildren`: MJML appended inside a container.
+ */
+export function serializeMjml(node: EmailNode, options?: {
+    pretty?: boolean;
+    attributes?: (node: EmailNode) => Record<string, string>;
+    extraChildren?: (node: EmailNode) => string;
+}): string;
+export type EmailNode = import("./model.js").EmailNode;