best-email-builder 0.2.0 → 0.4.0

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

@@ -0,0 +1,13 @@
+/**
+ * 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
+ * are injected into it. Added to the canvas and the preview only, never to
+ * the HTML that is saved or sent.
+ *
+ * Chromium ≥ 121 drops `::-webkit-scrollbar` (and brings back the arrows)
+ * as soon as `scrollbar-width` or `scrollbar-color` is set, so those two are
+ * kept for Firefox alone.
+ */
+export const FRAME_SCROLLBAR_CSS: "\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}";

package/dist/types/defaultEditor.d.ts

@@ -0,0 +1,11 @@
+/**
+ * An editor wired to the default engine and the built-in registries.
+ *
+ * @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.4.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;

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

@@ -0,0 +1,130 @@
+/** A fresh id: short, unique for the page's lifetime, `[a-z0-9]` only. */
+export function createId(): string;
+/**
+ * @param {string} tag
+ * @param {{attributes?: Record<string, string>, children?: EmailNode[], content?: string|null, id?: string}} [parts]
+ * @returns {EmailNode}
+ */
+export function createNode(tag: string, { attributes, children, content, id }?: {
+    attributes?: Record<string, string>;
+    children?: EmailNode[];
+    content?: string | null;
+    id?: string;
+}): EmailNode;
+/**
+ * Deep copy with NEW ids everywhere (duplicate, paste, insert a block twice).
+ * @param {EmailNode} node
+ * @returns {EmailNode}
+ */
+export function cloneWithNewIds(node: EmailNode): EmailNode;
+/**
+ * The node with this id and its ancestors (root first), or null.
+ * @param {EmailNode} root @param {string} id
+ * @returns {EmailNode[]|null}
+ */
+export function pathTo(root: EmailNode, id: string): EmailNode[] | null;
+/** @param {EmailNode} root @param {string|null|undefined} id */
+export function findNode(root: EmailNode, id: string | null | undefined): EmailNode | null;
+/** @param {EmailNode} root @param {string} id */
+export function parentOf(root: EmailNode, id: string): EmailNode | null;
+/**
+ * Closest node (itself included) whose tag is one of `tags`.
+ * @param {EmailNode} root @param {string} id @param {Set<string>|string[]} tags
+ */
+export function closestOfTags(root: EmailNode, id: string, tags: Set<string> | string[]): EmailNode | null;
+/** First node of a tag, depth first. @param {EmailNode} root @param {string} tag @returns {EmailNode|null} */
+export function findFirst(root: EmailNode, tag: string): EmailNode | null;
+/** Every node, depth first. @param {EmailNode} root @param {(node: EmailNode) => void} visit */
+export function walk(root: EmailNode, visit: (node: EmailNode) => void): void;
+/**
+ * The tree with the node `id` replaced by `update(node)`.
+ * @param {EmailNode} root @param {string} id @param {(node: EmailNode) => EmailNode} update
+ * @returns {EmailNode}
+ */
+export function updateNode(root: EmailNode, id: string, update: (node: EmailNode) => EmailNode): EmailNode;
+/**
+ * Sets (string) or removes (null, '') attributes.
+ * @param {EmailNode} root @param {string} id @param {Record<string, string|null|undefined>} attributes
+ */
+export function setAttributes(root: EmailNode, id: string, attributes: Record<string, string | null | undefined>): EmailNode;
+/** @param {EmailNode} root @param {string} id @param {string} content */
+export function setContent(root: EmailNode, id: string, content: string): EmailNode;
+/**
+ * Inserts nodes into `parentId` at `index` (clamped).
+ * @param {EmailNode} root @param {string} parentId @param {number} index @param {EmailNode[]} nodes
+ */
+export function insertNodes(root: EmailNode, parentId: string, index: number, nodes: EmailNode[]): EmailNode;
+/** @param {EmailNode} root @param {string} id */
+export function removeNode(root: EmailNode, id: string): EmailNode;
+/**
+ * Moves a node under `parentId` at `index`, where `index` counts the target's
+ * children BEFORE the node leaves its place (what a drop indicator shows).
+ * @param {EmailNode} root @param {string} id @param {string} parentId @param {number} index
+ */
+export function moveNode(root: EmailNode, id: string, parentId: string, index: number): EmailNode;
+/**
+ * Index of a node among its siblings, and their count.
+ * @param {EmailNode} root @param {string} id
+ */
+export function positionOf(root: EmailNode, id: string): {
+    parent: null;
+    index: number;
+    count: number;
+} | {
+    parent: EmailNode;
+    index: number;
+    count: number;
+};
+/** @param {EmailNode} root */
+export function toProject(root: EmailNode): {
+    format: number;
+    root: any;
+};
+/**
+ * Reads a stored project back into a tree. Ids are kept when they are valid
+ * and unique, replaced otherwise. Throws on anything that is not a project of
+ * this format.
+ * @param {unknown} project
+ * @returns {EmailNode}
+ */
+export function fromProject(project: unknown): EmailNode;
+/**
+ * THE EMAIL MODEL — the builder's own document, an MJML tree with ids.
+ *
+ *   { id, tag: 'mj-text', attributes: { color: '#2b3038' }, children: [], content: 'Hello' }
+ *
+ * One node per MJML element. "Ending" elements (`mj-text`, `mj-button`…)
+ * keep their inner HTML in `content`; the others hold `children`. Ids are
+ * opaque, unique within a tree, made of `[a-z0-9]` so they can live in a CSS
+ * class (the canvas finds an element by them, see `canvasMjml.js`).
+ *
+ * Every operation is PURE: it returns a new tree and never changes the one it
+ * got, sharing the untouched branches. The undo history is then just a list
+ * of trees.
+ *
+ * Dependency-free: runs in the browser, on the server and in unit tests.
+ */
+/**
+ * @typedef {{
+ *   id: string,
+ *   tag: string,
+ *   attributes: Record<string, string>,
+ *   children: EmailNode[],
+ *   content: string|null,
+ * }} EmailNode
+ */
+/** MJML elements whose inner content is HTML (MJML calls them "ending tags"). */
+export const ENDING_TAGS: Set<string>;
+/** Elements that hold a whole section's place in the body. */
+export const SECTION_TAGS: Set<string>;
+/** Elements that are never removed, moved or duplicated. */
+export const LOCKED_TAGS: Set<string>;
+/** Shape version of the stored project (`{ format, root }`). */
+export const PROJECT_FORMAT: 1;
+export type EmailNode = {
+    id: string;
+    tag: string;
+    attributes: Record<string, string>;
+    children: EmailNode[];
+    content: string | null;
+};

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

@@ -0,0 +1,69 @@
+/**
+ * @typedef {{parentId: string, index: number, wrap: boolean}} Placement
+ *   `wrap`: the content must be wrapped in a new section first.
+ */
+/**
+ * Click placement.
+ * @param {EmailNode} root
+ * @param {'content'|'layout'} kind
+ * @param {string|null} targetId  selected element, if any
+ * @returns {Placement}
+ */
+export function placementFor(root: EmailNode, kind: "content" | "layout", targetId: string | null): Placement;
+/**
+ * The body-level section holding a node (itself if it is one).
+ * @param {EmailNode} root @param {string} id @param {EmailNode} body
+ */
+export function sectionOf(root: EmailNode, id: string, body: EmailNode): import("./model.js").EmailNode | null;
+/**
+ * @typedef {{top: number, bottom: number, left: number, right: number}} Box
+ * @typedef {Placement & {line: {x: number, y: number, width: number}}} DropTarget
+ *   `line`: where the canvas draws the drop indicator (frame coordinates).
+ */
+/**
+ * Drop placement for a pointer at (x, y), in canvas frame coordinates.
+ *
+ * @param {EmailNode} root
+ * @param {{kind: 'content'|'layout', nodeId?: string|null}} dragged
+ *   `nodeId`: the element being moved (it is skipped when measuring, and
+ *   cannot be dropped into itself)
+ * @param {{x: number, y: number}} point
+ * @param {string|null} hitId  the marked element under the pointer
+ * @param {(id: string) => Box|null} boxOf  its box in the frame
+ * @returns {DropTarget|null}
+ */
+export function dropTargetFor(root: EmailNode, dragged: {
+    kind: "content" | "layout";
+    nodeId?: string | null;
+}, point: {
+    x: number;
+    y: number;
+}, hitId: string | null, boxOf: (id: string) => Box | null): DropTarget | null;
+/** @typedef {import('./model.js').EmailNode} EmailNode */
+/** Containers whose children are content blocks. */
+export const CONTENT_CONTAINERS: Set<string>;
+/**
+ * `wrap`: the content must be wrapped in a new section first.
+ */
+export type Placement = {
+    parentId: string;
+    index: number;
+    wrap: boolean;
+};
+export type Box = {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
+/**
+ * `line`: where the canvas draws the drop indicator (frame coordinates).
+ */
+export type DropTarget = Placement & {
+    line: {
+        x: number;
+        y: number;
+        width: number;
+    };
+};
+export type EmailNode = import("./model.js").EmailNode;

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

@@ -0,0 +1,15 @@
+/**
+ * @param {string} html
+ * @param {Document} document  any document (to parse without running anything)
+ */
+export function cleanRichText(html: string, document: Document): string;
+/**
+ * Plain text, escaped, for a label (button, menu link).
+ * @param {string} text
+ */
+export function escapeText(text: string): string;
+/**
+ * The text of an HTML fragment (`<br>` as a space), entities decoded.
+ * @param {string} html
+ */
+export function textOfHtml(html: string): string;

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

@@ -0,0 +1,29 @@
+/**
+ * A dynamically imported module → the value it exports by default.
+ *
+ * `mjml-browser` (the canvas compiler) is a CommonJS/UMD module. How
+ * `import()` hands such a module over depends on the bundler:
+ *
+ *   Vite, esbuild               { default: value }
+ *   webpack (Next.js), from an   { default: { __esModule: true, default: value } }
+ *   ES module package
+ *
+ * so a single `.default` once returned an object instead of the function under
+ * Next.js (0.1.1: "mjmlPlugin is not a function"). Every interop layer is peeled —
+ * a module namespace or an `__esModule` object — never the value itself.
+ *
+ * @param {any} mod
+ * @returns {any}
+ */
+export function unwrapModule(mod: any): any;
+/**
+ * A module whose export is a FUNCTION (`mjml-browser`) → that function, under
+ * any bundler. On top of `unwrapModule`, Vite's dynamic import of a CommonJS
+ * module hands over a plain object `{ ...props, default: fn }` (no module
+ * flag): since a function is expected, `default` is followed while the value
+ * is not one.
+ *
+ * @param {any} mod
+ * @returns {Function|null}
+ */
+export function functionExport(mod: any): Function | null;

package/dist/types/features/brand/BrandButton.d.ts

@@ -0,0 +1,4 @@
+export default function BrandButton({ context }: {
+    context: any;
+}): import("react").JSX.Element;
+export type Brand = import("./brand.js").Brand;

package/dist/types/features/brand/brand.d.ts

@@ -0,0 +1,108 @@
+/**
+ * A CSS color as RGB(A), or null: #rgb, #rgba, #rrggbb, #rrggbbaa, rgb(),
+ * rgba(), hsl(), hsla(), and the keywords white and black.
+ * @param {unknown} value
+ * @returns {{r: number, g: number, b: number, a: number}|null}
+ */
+export function parseColor(value: unknown): {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+} | null;
+/** Hue (0-360), saturation and lightness (0-1). @param {{r: number, g: number, b: number}} color */
+export function toHsl({ r, g, b }: {
+    r: number;
+    g: number;
+    b: number;
+}): {
+    h: number;
+    s: number;
+    l: number;
+};
+/** WCAG contrast ratio of two colors (1 to 21). @param {string} a @param {string} b */
+export function contrastRatio(a: string, b: string): number;
+/** The text color that reads on `background`: white or ink. @param {string} background */
+export function readableOn(background: string): string;
+/**
+ * A color meant to be noticed (a banner, a filled button), as opposed to
+ * white, light tints, grays and near-black.
+ * @param {unknown} value
+ */
+export function isColored(value: unknown): boolean;
+/**
+ * A brand as stored and used: unknown fields dropped, colors as #rrggbb,
+ * the font one of the builder's stacks, the logo an https or site-relative
+ * image. Whatever is invalid is left out (the builder's default is used).
+ * @param {unknown} input
+ * @returns {Brand}
+ */
+export function cleanBrand(input: unknown): Brand;
+/**
+ * The sender the templates use: the brand's name and logo over the host's
+ * sender (whose postal address stays).
+ * @param {import('../templates/starter.js').StarterSender|null|undefined} sender
+ * @param {Brand|null|undefined} brand
+ */
+export function brandedSender(sender: import("../templates/starter.js").StarterSender | null | undefined, brand: Brand | null | undefined): {
+    name?: string;
+    address?: string;
+    logoUrl?: string;
+    logoWidth?: number;
+};
+/**
+ * An email in the brand's look.
+ * @param {string} mjml
+ * @param {Brand|null|undefined} brand
+ * @param {{header?: boolean, previous?: {names?: (string|undefined)[], logos?: (string|undefined)[]}}} [options]
+ *   `header`: also put the logo (or name) at the top and the name in the
+ *   footer, replacing what `previous` lists (the names and logos the email
+ *   may still show: the host's sender, the brand before, "Your company").
+ * @returns {string}
+ */
+export function applyBrand(mjml: string, brand: Brand | null | undefined, { header, previous }?: {
+    header?: boolean;
+    previous?: {
+        names?: (string | undefined)[];
+        logos?: (string | undefined)[];
+    };
+}): string;
+/**
+ * A fragment (a block about to be inserted) in the brand's look.
+ * @param {string} mjml @param {Brand|null|undefined} brand
+ */
+export function applyBrandToFragment(mjml: string, brand: Brand | null | undefined): string;
+/**
+ * A ready-made email (the starter, a gallery template) in the brand's look,
+ * its header and footer naming the brand rather than the host's sender or
+ * the "Your company" placeholder.
+ * @param {string} mjml
+ * @param {Brand|null|undefined} brand
+ * @param {{sender?: import('../templates/starter.js').StarterSender|null, t?: (key: string) => string}} [context]
+ */
+export function brandTemplate(mjml: string, brand: Brand | null | undefined, { sender, t }?: {
+    sender?: import("../templates/starter.js").StarterSender | null;
+    t?: (key: string) => string;
+}): string;
+export const MAX_LOGO_WIDTH: 240;
+export function toHex({ r, g, b }: {
+    r: number;
+    g: number;
+    b: number;
+}): string;
+export function hasBrand(brand: Brand | null | undefined): boolean;
+/**
+ * `primary`: buttons, banners, links; `heading`: headings; colors as
+ * `#rrggbb`. `font`: one of the builder's web-safe stacks (FONT_OPTIONS).
+ * `website`: where it was read from, to read it again.
+ */
+export type Brand = {
+    name?: string;
+    logoUrl?: string;
+    logoWidth?: number;
+    primary?: string;
+    heading?: string;
+    font?: string;
+    website?: string;
+};
+export type EmailNode = import("../../engine/model.js").EmailNode;