better-react-email-editor 0.1.3 → 0.1.6

package/dist/index.js

@@ -1,53 +1,53 @@
-import { createContext as e, forwardRef as t, useCallback as n, useContext as r, useEffect as i, useImperativeHandle as a, useLayoutEffect as o, useMemo as s, useRef as c, useState as l, useSyncExternalStore as u } from "react";
-import { Placeholder as d } from "@tiptap/extension-placeholder";
-import { EditorContent as f, EditorContext as p, useEditor as m, useEditorState as h } from "@tiptap/react";
-import { EmailNode as g, composeReactEmail as _ } from "@react-email/editor/core";
-import { Button as v, StarterKit as y } from "@react-email/editor/extensions";
-import { EmailTheming as b, extendTheme as x, useEditorImage as S } from "@react-email/editor/plugins";
-import { Fragment as C } from "@tiptap/pm/model";
-import { NodeSelection as w, Plugin as T, PluginKey as E, Selection as D, TextSelection as O } from "@tiptap/pm/state";
-import { generateJSON as ee } from "@tiptap/html";
-import { Extension as k, mergeAttributes as te } from "@tiptap/core";
-import { ReplaceStep as ne } from "@tiptap/pm/transform";
-import { AlignCenterIcon as re, AlignLeftIcon as ie, AlignRightIcon as ae, BoldIcon as oe, BubbleMenu as se, CodeIcon as A, Columns2Icon as ce, Columns3Icon as le, Columns4Icon as ue, EditorFocusScope as j, Heading1Icon as de, ImageIcon as fe, Inspector as M, ItalicIcon as pe, LayoutIcon as me, LinkIcon as he, ListIcon as ge, ListOrderedIcon as _e, MinusIcon as ve, MousePointerClickIcon as ye, PanelLeftIcon as be, PanelTopIcon as xe, PlusIcon as N, SlashCommand as Se, SquareCodeIcon as Ce, StrikethroughIcon as P, TableIcon as we, TextQuoteIcon as Te, TypeIcon as Ee, UnderlineIcon as De, XIcon as Oe, defaultSlashCommands as ke } from "@react-email/editor/ui";
-import { Fragment as F, jsx as I, jsxs as L } from "react/jsx-runtime";
-import * as Ae from "@radix-ui/react-popover";
-import { HexColorInput as je, HexColorPicker as Me } from "react-colorful";
-import { Column as Ne, Img as Pe, Link as Fe, Row as Ie, Section as Le } from "react-email";
-import { createPortal as Re } from "react-dom";
+import { createContext as e, forwardRef as t, useCallback as n, useContext as r, useEffect as i, useId as a, useImperativeHandle as o, useLayoutEffect as s, useMemo as c, useRef as l, useState as u, useSyncExternalStore as d } from "react";
+import { Placeholder as f } from "@tiptap/extension-placeholder";
+import { EditorContent as p, EditorContext as m, useEditor as h, useEditorState as g } from "@tiptap/react";
+import { EmailNode as _, composeReactEmail as v } from "@react-email/editor/core";
+import { Button as y, StarterKit as b } from "@react-email/editor/extensions";
+import { EmailTheming as x, extendTheme as S, getEmailTheming as C, setGlobalStyles as w, useEditorImage as T } from "@react-email/editor/plugins";
+import { Fragment as E } from "@tiptap/pm/model";
+import { NodeSelection as D, Plugin as O, PluginKey as ee, Selection as k, TextSelection as A } from "@tiptap/pm/state";
+import { generateJSON as te } from "@tiptap/html";
+import { Extension as ne, mergeAttributes as re } from "@tiptap/core";
+import { ReplaceStep as ie } from "@tiptap/pm/transform";
+import { AlignCenterIcon as ae, AlignLeftIcon as oe, AlignRightIcon as se, BoldIcon as j, BubbleMenu as ce, CodeIcon as le, Columns2Icon as ue, Columns3Icon as de, Columns4Icon as fe, EditorFocusScope as M, Heading1Icon as pe, ImageIcon as me, Inspector as N, ItalicIcon as he, LayoutIcon as ge, LinkIcon as _e, ListIcon as ve, ListOrderedIcon as ye, MinusIcon as be, MousePointerClickIcon as xe, PanelLeftIcon as P, PanelTopIcon as Se, PlusIcon as Ce, SlashCommand as F, SquareCodeIcon as we, StrikethroughIcon as Te, TableIcon as Ee, TextQuoteIcon as De, TypeIcon as Oe, UnderlineIcon as ke, XIcon as Ae, defaultSlashCommands as je } from "@react-email/editor/ui";
+import { Fragment as I, jsx as L, jsxs as R } from "react/jsx-runtime";
+import * as Me from "@radix-ui/react-popover";
+import { HexColorInput as Ne, HexColorPicker as Pe } from "react-colorful";
+import { Column as Fe, Img as Ie, Link as Le, Row as Re, Section as ze } from "react-email";
+import { createPortal as Be } from "react-dom";
 //#region \0rolldown/runtime.js
-var ze = Object.defineProperty, Be = (e, t) => {
+var Ve = Object.defineProperty, He = (e, t) => {
 	let n = {};
-	for (var r in e) ze(n, r, {
+	for (var r in e) Ve(n, r, {
 		get: e[r],
 		enumerable: !0
 	});
-	return t || ze(n, Symbol.toStringTag, { value: "Module" }), n;
+	return t || Ve(n, Symbol.toStringTag, { value: "Module" }), n;
 };
 //#endregion
 //#region src/core/cx.ts
-function R(...e) {
+function z(...e) {
 	return e.filter(Boolean).join(" ");
 }
 //#endregion
 //#region src/core/dnd.ts
-var Ve = /* @__PURE__ */ new Set([
+var Ue = /* @__PURE__ */ new Set([
 	"container",
 	"section",
 	"columnsColumn"
-]), He = /* @__PURE__ */ new Set([
+]), We = /* @__PURE__ */ new Set([
 	"twoColumns",
 	"threeColumns",
 	"fourColumns"
-]), Ue = "application/x-email-block";
-function We(e, t) {
+]), Ge = "application/x-email-block";
+function Ke(e, t) {
 	let n = e.nodeDOM(t);
 	return n instanceof HTMLElement ? n.getBoundingClientRect() : null;
 }
-function Ge(e, t, n) {
+function qe(e, t, n) {
 	let r = [];
 	return t.forEach((t, i) => {
-		let a = n + 1 + i, o = We(e, a);
+		let a = n + 1 + i, o = Ke(e, a);
 		o && r.push({
 			node: t,
 			pos: a,
@@ -55,10 +55,10 @@ function Ge(e, t, n) {
 		});
 	}), r;
 }
-function Ke(e) {
+function Je(e) {
 	return e.type.name === "paragraph" && e.childCount === 0;
 }
-function qe(e) {
+function Ye(e) {
 	let t = null;
 	return e.forEach((e, n) => {
 		!t && e.type.name === "container" && (t = {
@@ -67,28 +67,28 @@ function qe(e) {
 		});
 	}), t;
 }
-function Je(e, t, n, r, i) {
-	let a = qe(e.state.doc);
+function Xe(e, t, n, r, i) {
+	let a = Ye(e.state.doc);
 	if (!a) return null;
 	let o = (e) => !!i && e >= i.from && e < i.to, s = (i, a) => {
-		let c = Ge(e, i, a), l = We(e, a);
+		let c = qe(e, i, a), l = Ke(e, a);
 		if (!l) return null;
 		for (let r of c) {
 			let { rect: i } = r, a = Math.min(12, i.height / 4), c = n > i.top + a && n < i.bottom - a, l = t >= i.left && t <= i.right;
 			if (!c || !l || o(r.pos)) continue;
 			let u = r.node.type.name;
-			if (Ve.has(u)) {
+			if (Ue.has(u)) {
 				let e = s(r.node, r.pos);
 				if (e) return e;
-			} else if (He.has(u)) {
-				let n = Ge(e, r.node, r.pos), i = n.find((e) => t >= e.rect.left && t <= e.rect.right) ?? (t < n[0]?.rect.left ? n[0] : n[n.length - 1]);
+			} else if (We.has(u)) {
+				let n = qe(e, r.node, r.pos), i = n.find((e) => t >= e.rect.left && t <= e.rect.right) ?? (t < n[0]?.rect.left ? n[0] : n[n.length - 1]);
 				if (i && !o(i.pos)) {
 					let e = s(i.node, i.pos);
 					if (e) return e;
 				}
 			}
 		}
-		if (c.length === 1 && Ke(c[0].node) && !o(c[0].pos)) {
+		if (c.length === 1 && Je(c[0].node) && !o(c[0].pos)) {
 			let e = c[0];
 			return i.type.validContent(r) ? {
 				pos: e.pos,
@@ -133,59 +133,59 @@ function Je(e, t, n, r, i) {
 	};
 	return s(a.node, a.pos);
 }
-function Ye(e, t) {
+function Ze(e, t) {
 	let { schema: n, doc: r } = e.state;
 	if (t.kind === "new") try {
-		return C.fromArray(t.content().map((e) => n.nodeFromJSON(e)));
+		return E.fromArray(t.content().map((e) => n.nodeFromJSON(e)));
 	} catch (e) {
 		return console.error("Invalid block content", e), null;
 	}
 	let i = r.nodeAt(t.pos);
-	return i ? C.from(i) : null;
+	return i ? E.from(i) : null;
 }
-function Xe(e, t) {
+function Qe(e, t) {
 	let n = e.doc.nodeAt(t);
-	n && (n.isAtom || n.type.name === "horizontalRule" ? e.setSelection(w.create(e.doc, t)) : e.setSelection(O.near(e.doc.resolve(t + 1))));
+	n && (n.isAtom || n.type.name === "horizontalRule" ? e.setSelection(D.create(e.doc, t)) : e.setSelection(A.near(e.doc.resolve(t + 1))));
 }
-function Ze(e) {
+function $e(e) {
 	let { selection: t, doc: n } = e.state;
-	t instanceof w && e.dispatch(e.state.tr.setSelection(D.near(n.resolve(t.from))));
+	t instanceof D && e.dispatch(e.state.tr.setSelection(k.near(n.resolve(t.from))));
 }
-function Qe(e, t) {
+function et(e, t) {
 	if (t.replaceTo !== void 0) return t;
 	let n = e.resolve(t.pos), r = n.parent, i = r.lastChild;
-	return n.index() !== r.childCount || !i || r.childCount < 2 || !Ke(i) ? t : {
+	return n.index() !== r.childCount || !i || r.childCount < 2 || !Je(i) ? t : {
 		...t,
 		pos: t.pos - i.nodeSize
 	};
 }
-function $e(e, t, n) {
+function tt(e, t, n) {
 	let { view: r } = e;
-	Ze(r);
-	let i = Ye(r, t);
+	$e(r);
+	let i = Ze(r, t);
 	if (!i) return !1;
-	let a = Qe(r.state.doc, n), o = r.state.tr;
-	if (t.kind === "new") a.replaceTo === void 0 ? o.insert(a.pos, i) : o.replaceWith(a.pos, a.replaceTo, i), Xe(o, a.pos);
+	let a = et(r.state.doc, n), o = r.state.tr;
+	if (t.kind === "new") a.replaceTo === void 0 ? o.insert(a.pos, i) : o.replaceWith(a.pos, a.replaceTo, i), Qe(o, a.pos);
 	else {
 		let e = r.state.doc.nodeAt(t.pos);
 		if (!e) return !1;
 		let n = t.pos, i = n + e.nodeSize;
 		if (a.replaceTo === void 0 && (a.pos === n || a.pos === i)) return !1;
-		et(o, n, i);
+		nt(o, n, i);
 		let s = o.mapping.map(a.pos, -1);
 		if (a.replaceTo !== void 0) {
 			let t = o.mapping.map(a.replaceTo, 1);
 			o.replaceWith(s, t, e);
 		} else o.insert(s, e);
-		Xe(o, s);
+		Qe(o, s);
 	}
 	return r.dispatch(o.scrollIntoView()), r.focus(), !0;
 }
-function et(e, t, n) {
+function nt(e, t, n) {
 	let r = e.doc.resolve(t).parent;
-	r.childCount === 1 && Ve.has(r.type.name) ? e.replaceWith(t, n, e.doc.type.schema.nodes.paragraph.create()) : e.delete(t, n);
+	r.childCount === 1 && Ue.has(r.type.name) ? e.replaceWith(t, n, e.doc.type.schema.nodes.paragraph.create()) : e.delete(t, n);
 }
-function z(e, t, n = !0) {
+function rt(e, t, n = !0) {
 	if (t < 0 || t > e.content.size) return null;
 	let r = [], i = e.nodeAt(t);
 	n && i && r.push({
@@ -199,55 +199,55 @@ function z(e, t, n = !0) {
 	});
 	for (let t of r) {
 		let n = e.resolve(t.pos).parent.type.name;
-		if (Ve.has(n) || He.has(n)) return t;
+		if (Ue.has(n) || We.has(n)) return t;
 	}
 	return null;
 }
-function tt(e) {
+function it(e) {
 	return e.node.type.name === "columnsColumn";
 }
-function nt(e, t) {
+function at(e, t) {
 	let n = e.resolve(t.pos);
 	for (let r = n.depth; r > 0; r--) {
-		let i = z(e, n.before(r));
+		let i = rt(e, n.before(r));
 		if (i && i.pos !== t.pos) return i;
 	}
 	return null;
 }
-function rt(e) {
+function ot(e) {
 	let { selection: t, doc: n } = e.state;
-	return t instanceof w ? z(n, t.from) ?? {
+	return t instanceof D ? rt(n, t.from) ?? {
 		pos: t.from,
 		node: t.node
-	} : z(n, t.from, !1);
+	} : rt(n, t.from, !1);
 }
-function it(e, t) {
-	let { view: n } = e, r = n.state.tr.setSelection(w.create(n.state.doc, t.pos));
+function st(e, t) {
+	let { view: n } = e, r = n.state.tr.setSelection(D.create(n.state.doc, t.pos));
 	n.dispatch(r), n.focus();
 }
-function at(e, t) {
+function ct(e, t) {
 	let { view: n } = e;
-	Ze(n);
+	$e(n);
 	let r = n.state.doc.nodeAt(t.pos);
 	if (!r) return;
 	let i = t.pos + r.nodeSize, a = n.state.tr.insert(i, r.copy(r.content));
-	a.setSelection(w.create(a.doc, i)), n.dispatch(a.scrollIntoView()), n.focus();
+	a.setSelection(D.create(a.doc, i)), n.dispatch(a.scrollIntoView()), n.focus();
 }
-function ot(e, t) {
+function lt(e, t) {
 	let { view: n } = e, r = n.state.doc.nodeAt(t.pos);
 	if (!r) return;
 	let i = n.state.tr;
-	et(i, t.pos, t.pos + r.nodeSize), n.dispatch(i);
+	nt(i, t.pos, t.pos + r.nodeSize), n.dispatch(i);
 }
-function st(e, t) {
-	let n = qe(e.state.doc);
+function ut(e, t) {
+	let n = Ye(e.state.doc);
 	if (!n) return;
 	let r = n.node.lastChild, i = n.pos + n.node.nodeSize - 1;
-	$e(e, {
+	tt(e, {
 		kind: "new",
 		label: "",
 		content: () => t
-	}, r && Ke(r) && n.node.childCount > 1 ? {
+	}, r && Je(r) && n.node.childCount > 1 ? {
 		pos: i - r.nodeSize,
 		replaceTo: i,
 		line: {
@@ -266,7 +266,7 @@ function st(e, t) {
 }
 //#endregion
 //#region src/core/paste.ts
-var ct = v.extend({ parseHTML() {
+var dt = y.extend({ parseHTML() {
 	return [{
 		tag: "a[data-id=\"react-email-button\"]",
 		getAttrs: (e) => {
@@ -281,29 +281,29 @@ var ct = v.extend({ parseHTML() {
 		}
 	}];
 } });
-function lt(e, t) {
+function ft(e, t) {
 	let n = t.clipboardData?.getData("text/html") ?? "", r = n.includes("data-pm-slice");
 	if ((t.clipboardData?.files?.length ?? 0) > 0) return !1;
 	let { view: i } = e, { state: a } = i, { selection: o } = a;
-	if (o instanceof w && o.node.isBlock) {
+	if (o instanceof D && o.node.isBlock) {
 		let e = o.node, t = e.type.name === "columnsColumn" ? o.from + e.nodeSize - 1 : o.from + e.nodeSize, n = a.doc.resolve(t), r = a.schema.nodes.paragraph;
-		if (He.has(n.parent.type.name) || !n.parent.canReplaceWith(n.index(), n.index(), r)) return !1;
-		i.dispatch(a.tr.setSelection(O.near(n)));
+		if (We.has(n.parent.type.name) || !n.parent.canReplaceWith(n.index(), n.index(), r)) return !1;
+		i.dispatch(a.tr.setSelection(A.near(n)));
 		let s = i.state.tr.insert(t, r.create());
-		s.setSelection(O.create(s.doc, t + 1)), i.dispatch(s);
+		s.setSelection(A.create(s.doc, t + 1)), i.dispatch(s);
 	}
 	return r ? (t.preventDefault(), t.stopPropagation(), i.pasteHTML(n), !0) : !1;
 }
 //#endregion
 //#region src/core/paste-handler.ts
-var ut = /class="[^"]*node-/, dt = [
+var pt = /class="[^"]*node-/, mt = [
 	"script",
 	"iframe",
 	"object",
 	"embed",
 	"meta",
 	"base"
-], ft = ["href", "src"], pt = {
+], ht = ["href", "src"], gt = {
 	a: [
 		"href",
 		"target",
@@ -328,49 +328,49 @@ var ut = /class="[^"]*node-/, dt = [
 	],
 	"*": ["id"]
 };
-function mt(e, t) {
+function _t(e, t) {
 	let n = e.trim().toLowerCase();
 	return n.startsWith("javascript:") || n.startsWith("vbscript:") ? !1 : !n.startsWith("data:") || t && n.startsWith("data:image/");
 }
-function ht(e) {
-	let t = /* @__PURE__ */ new Set([...pt[e.tagName.toLowerCase()] ?? [], ...pt["*"]]);
+function vt(e) {
+	let t = /* @__PURE__ */ new Set([...gt[e.tagName.toLowerCase()] ?? [], ...gt["*"]]);
 	for (let n of Array.from(e.attributes)) (n.name.startsWith("data-") || !t.has(n.name)) && e.removeAttribute(n.name);
 }
-function gt(e) {
-	e.nodeType === Node.ELEMENT_NODE && ht(e);
-	for (let t of Array.from(e.childNodes)) gt(t);
+function yt(e) {
+	e.nodeType === Node.ELEMENT_NODE && vt(e);
+	for (let t of Array.from(e.childNodes)) yt(t);
 }
-function _t(e) {
+function bt(e) {
 	let t = new DOMParser().parseFromString(e, "text/html");
-	for (let e of dt) for (let n of Array.from(t.body.getElementsByTagName(e))) n.remove();
+	for (let e of mt) for (let n of Array.from(t.body.getElementsByTagName(e))) n.remove();
 	for (let e of Array.from(t.body.querySelectorAll("[href], [src]"))) {
 		let t = e.tagName.toLowerCase() === "img";
-		for (let n of ft) {
+		for (let n of ht) {
 			let r = e.getAttribute(n);
-			r !== null && !mt(r, t) && e.removeAttribute(n);
+			r !== null && !_t(r, t) && e.removeAttribute(n);
 		}
 	}
-	return ut.test(e) || gt(t.body), t.body.innerHTML;
+	return pt.test(e) || yt(t.body), t.body.innerHTML;
 }
-function vt(e) {
+function xt(e) {
 	return (t, n, r) => {
 		if (r.content.childCount === 1) return !1;
 		let i = n.clipboardData?.getData?.("text/html");
 		if (!i) return !1;
 		n.preventDefault();
-		let a = ee(_t(i), e), o = t.state.schema.nodeFromJSON(a);
+		let a = te(bt(i), e), o = t.state.schema.nodeFromJSON(a);
 		return t.dispatch(t.state.tr.replaceSelectionWith(o, !1)), !0;
 	};
 }
 //#endregion
 //#region src/core/select-all.ts
-var yt = /* @__PURE__ */ new Set(["columnsColumn", "codeBlock"]), bt = k.create({
+var St = /* @__PURE__ */ new Set(["columnsColumn", "codeBlock"]), Ct = ne.create({
 	name: "selectAllFix",
 	priority: 101,
 	addKeyboardShortcuts() {
 		return { "Mod-a": ({ editor: e }) => {
 			let { state: t } = e, { $from: n } = t.selection;
-			for (let e = n.depth; e > 0; e--) if (yt.has(n.node(e).type.name) && (t.selection.from !== n.start(e) || t.selection.to !== n.end(e))) return !1;
+			for (let e = n.depth; e > 0; e--) if (St.has(n.node(e).type.name) && (t.selection.from !== n.start(e) || t.selection.to !== n.end(e))) return !1;
 			let r = -1;
 			t.doc.forEach((e, t) => {
 				r < 0 && e.type.name === "container" && (r = t);
@@ -378,28 +378,57 @@ var yt = /* @__PURE__ */ new Set(["columnsColumn", "codeBlock"]), bt = k.create(
 			let i = r < 0 ? null : t.doc.nodeAt(r);
 			if (!i) return !1;
 			let a = r + 1, o = r + i.nodeSize - 1;
-			return (t.selection.from !== a || t.selection.to !== o) && e.view.dispatch(t.tr.setSelection(O.create(t.doc, a, o))), !0;
+			return (t.selection.from !== a || t.selection.to !== o) && e.view.dispatch(t.tr.setSelection(A.create(t.doc, a, o))), !0;
 		} };
 	},
 	addProseMirrorPlugins() {
-		return [new T({
-			key: new E("selectAllFix"),
+		return [new O({
+			key: new ee("selectAllFix"),
 			appendTransaction(e, t, n) {
 				let r = t.selection;
-				if (!(r instanceof O) || r.$from.parent.inlineContent && r.$to.parent.inlineContent || !e.some((e) => e.steps.some((e) => e instanceof ne && e.from === r.from && e.to === r.to))) return null;
+				if (!(r instanceof A) || r.$from.parent.inlineContent && r.$to.parent.inlineContent || !e.some((e) => e.steps.some((e) => e instanceof ie && e.from === r.from && e.to === r.to))) return null;
 				let i = r.from, a = r.to;
 				for (let t of e) i = t.mapping.map(i, -1), a = t.mapping.map(a, 1);
 				let { selection: o } = n;
-				if (o instanceof O && o.from >= i && o.to <= a) return null;
+				if (o instanceof A && o.from >= i && o.to <= a) return null;
 				let s = n.doc.resolve(i);
-				return n.tr.setSelection(D.findFrom(s, 1, !0) ?? D.near(s));
+				return n.tr.setSelection(k.findFrom(s, 1, !0) ?? k.near(s));
 			}
 		})];
 	}
-});
+}), wt = [
+	{
+		label: "Arial",
+		value: "Arial, Helvetica, sans-serif"
+	},
+	{
+		label: "Verdana",
+		value: "Verdana, Geneva, sans-serif"
+	},
+	{
+		label: "Tahoma",
+		value: "Tahoma, Verdana, Segoe, sans-serif"
+	},
+	{
+		label: "Georgia",
+		value: "Georgia, 'Times New Roman', Times, serif"
+	},
+	{
+		label: "Times New Roman",
+		value: "'Times New Roman', Times, serif"
+	}
+];
+function Tt(e) {
+	return e.split(",")[0].trim().replace(/^['"]|['"]$/g, "").toLowerCase();
+}
+function Et(e, t) {
+	if (!t) return;
+	let n = Tt(t);
+	return e.find((e) => Tt(e.value) === n);
+}
 //#endregion
 //#region src/core/stores.ts
-function xt() {
+function Dt() {
 	let e = null;
 	return {
 		get: () => e,
@@ -411,7 +440,7 @@ function xt() {
 		}
 	};
 }
-function St() {
+function Ot() {
 	let e = null, t = /* @__PURE__ */ new Set();
 	return {
 		get: () => e,
@@ -428,7 +457,7 @@ function St() {
 }
 //#endregion
 //#region src/i18n/en.ts
-var Ct = {
+var kt = {
 	topBar: {
 		layers: "Layers",
 		toggleLayers: "Show / hide layers",
@@ -473,6 +502,12 @@ var Ct = {
 		breadcrumb: "Hierarchy",
 		selectedText: "Selected text"
 	},
+	emailHeader: {
+		subject: "Subject",
+		subjectPlaceholder: "Subject line",
+		previewText: "Preview",
+		previewTextPlaceholder: "Shown after the subject line in the inbox"
+	},
 	body: {
 		general: "General",
 		previewText: "Preview text",
@@ -486,6 +521,8 @@ var Ct = {
 		innerPadding: "Inner padding",
 		radius: "Corner radius",
 		defaultStyles: "Default styles",
+		font: "Font",
+		fontDefault: "Default (system font)",
 		text: "Text",
 		headings: "Headings",
 		links: "Links",
@@ -494,6 +531,8 @@ var Ct = {
 	},
 	inspector: {
 		typography: "Typography",
+		font: "Font",
+		fontDefault: "Default (email font)",
 		color: "Color",
 		size: "Size",
 		weight: "Weight",
@@ -697,7 +736,7 @@ var Ct = {
 		starterTitle: "Our favourites"
 	},
 	slashCommands: {}
-}, wt = {
+}, At = {
 	topBar: {
 		layers: "Calques",
 		toggleLayers: "Afficher / masquer les calques",
@@ -742,6 +781,12 @@ var Ct = {
 		breadcrumb: "Hiérarchie",
 		selectedText: "Texte sélectionné"
 	},
+	emailHeader: {
+		subject: "Objet",
+		subjectPlaceholder: "Objet de l’email",
+		previewText: "Aperçu",
+		previewTextPlaceholder: "Affiché après l’objet dans la boîte de réception"
+	},
 	body: {
 		general: "Général",
 		previewText: "Texte d’aperçu",
@@ -755,6 +800,8 @@ var Ct = {
 		innerPadding: "Marge intérieure",
 		radius: "Arrondi",
 		defaultStyles: "Styles par défaut",
+		font: "Police",
+		fontDefault: "Par défaut (police système)",
 		text: "Texte",
 		headings: "Titres",
 		links: "Liens",
@@ -763,6 +810,8 @@ var Ct = {
 	},
 	inspector: {
 		typography: "Typographie",
+		font: "Police",
+		fontDefault: "Par défaut (police de l’email)",
 		color: "Couleur",
 		size: "Taille",
 		weight: "Graisse",
@@ -1023,43 +1072,43 @@ var Ct = {
 			description: "Mise en page sur quatre colonnes"
 		}
 	}
-}, Tt = {
-	en: Ct,
-	fr: wt
+}, jt = {
+	en: kt,
+	fr: At
 };
-function Et(e, t) {
+function Mt(e, t) {
 	return typeof e == "function" ? e(t) : e;
 }
-function Dt(e) {
+function Nt(e) {
 	return typeof e == "object" && !!e && !Array.isArray(e);
 }
-function Ot(e, t) {
-	if (!Dt(t) || !Dt(e)) return t ?? e;
+function Pt(e, t) {
+	if (!Nt(t) || !Nt(e)) return t ?? e;
 	let n = { ...e };
-	for (let [e, r] of Object.entries(t)) r !== void 0 && (n[e] = Dt(r) && Dt(n[e]) ? Ot(n[e], r) : r);
+	for (let [e, r] of Object.entries(t)) r !== void 0 && (n[e] = Nt(r) && Nt(n[e]) ? Pt(n[e], r) : r);
 	return n;
 }
-function kt(e, t) {
-	let n = Tt[e] ?? Ct;
-	return t ? Ot(n, t) : n;
+function Ft(e, t) {
+	let n = jt[e] ?? kt;
+	return t ? Pt(n, t) : n;
 }
 //#endregion
 //#region src/components/icons.tsx
-var At = /* @__PURE__ */ Be({
-	CopyIcon: () => Mt,
-	DesktopIcon: () => Lt,
-	GripIcon: () => jt,
-	LayersIcon: () => zt,
-	MobileIcon: () => Rt,
-	OneColumnIcon: () => Wt,
-	ParentIcon: () => Pt,
-	PipetteIcon: () => Bt,
-	RedoIcon: () => It,
-	SocialIcon: () => Ut,
-	SpacerIcon: () => Vt,
-	SpacerTileIcon: () => Ht,
-	TrashIcon: () => Nt,
-	UndoIcon: () => Ft
+var It = /* @__PURE__ */ He({
+	CopyIcon: () => Rt,
+	DesktopIcon: () => Ut,
+	GripIcon: () => Lt,
+	LayersIcon: () => Gt,
+	MobileIcon: () => Wt,
+	OneColumnIcon: () => Xt,
+	ParentIcon: () => Bt,
+	PipetteIcon: () => Kt,
+	RedoIcon: () => Ht,
+	SocialIcon: () => Yt,
+	SpacerIcon: () => qt,
+	SpacerTileIcon: () => Jt,
+	TrashIcon: () => zt,
+	UndoIcon: () => Vt
 }), B = (e, t = 2) => ({
 	viewBox: "0 0 24 24",
 	width: e,
@@ -1070,7 +1119,7 @@ var At = /* @__PURE__ */ Be({
 	strokeLinecap: "round",
 	strokeLinejoin: "round",
 	"aria-hidden": !0
-}), jt = ({ size: e = 14 }) => /* @__PURE__ */ I("svg", {
+}), Lt = ({ size: e = 14 }) => /* @__PURE__ */ L("svg", {
 	viewBox: "0 0 24 24",
 	width: e,
 	height: e,
@@ -1080,93 +1129,93 @@ var At = /* @__PURE__ */ Be({
 		6,
 		12,
 		18
-	].map((e) => /* @__PURE__ */ L("g", { children: [/* @__PURE__ */ I("circle", {
+	].map((e) => /* @__PURE__ */ R("g", { children: [/* @__PURE__ */ L("circle", {
 		cx: "9",
 		cy: e,
 		r: "1.6"
-	}), /* @__PURE__ */ I("circle", {
+	}), /* @__PURE__ */ L("circle", {
 		cx: "15",
 		cy: e,
 		r: "1.6"
 	})] }, e))
-}), Mt = ({ size: e = 14 }) => /* @__PURE__ */ L("svg", {
+}), Rt = ({ size: e = 14 }) => /* @__PURE__ */ R("svg", {
 	...B(e),
-	children: [/* @__PURE__ */ I("rect", {
+	children: [/* @__PURE__ */ L("rect", {
 		x: "8",
 		y: "8",
 		width: "12",
 		height: "12",
 		rx: "2"
-	}), /* @__PURE__ */ I("path", { d: "M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" })]
-}), Nt = ({ size: e = 14 }) => /* @__PURE__ */ I("svg", {
+	}), /* @__PURE__ */ L("path", { d: "M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" })]
+}), zt = ({ size: e = 14 }) => /* @__PURE__ */ L("svg", {
 	...B(e),
-	children: /* @__PURE__ */ I("path", { d: "M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3" })
-}), Pt = ({ size: e = 14 }) => /* @__PURE__ */ I("svg", {
+	children: /* @__PURE__ */ L("path", { d: "M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3" })
+}), Bt = ({ size: e = 14 }) => /* @__PURE__ */ L("svg", {
 	...B(e),
-	children: /* @__PURE__ */ I("path", { d: "M12 19V5M6 11l6-6 6 6" })
-}), Ft = ({ size: e = 16 }) => /* @__PURE__ */ L("svg", {
+	children: /* @__PURE__ */ L("path", { d: "M12 19V5M6 11l6-6 6 6" })
+}), Vt = ({ size: e = 16 }) => /* @__PURE__ */ R("svg", {
 	...B(e),
-	children: [/* @__PURE__ */ I("path", { d: "M9 14 4 9l5-5" }), /* @__PURE__ */ I("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 0 11H11" })]
-}), It = ({ size: e = 16 }) => /* @__PURE__ */ L("svg", {
+	children: [/* @__PURE__ */ L("path", { d: "M9 14 4 9l5-5" }), /* @__PURE__ */ L("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 0 11H11" })]
+}), Ht = ({ size: e = 16 }) => /* @__PURE__ */ R("svg", {
 	...B(e),
-	children: [/* @__PURE__ */ I("path", { d: "m15 14 5-5-5-5" }), /* @__PURE__ */ I("path", { d: "M20 9H9.5a5.5 5.5 0 0 0 0 11H13" })]
-}), Lt = ({ size: e = 16 }) => /* @__PURE__ */ L("svg", {
+	children: [/* @__PURE__ */ L("path", { d: "m15 14 5-5-5-5" }), /* @__PURE__ */ L("path", { d: "M20 9H9.5a5.5 5.5 0 0 0 0 11H13" })]
+}), Ut = ({ size: e = 16 }) => /* @__PURE__ */ R("svg", {
 	...B(e),
-	children: [/* @__PURE__ */ I("rect", {
+	children: [/* @__PURE__ */ L("rect", {
 		x: "3",
 		y: "4",
 		width: "18",
 		height: "12",
 		rx: "2"
-	}), /* @__PURE__ */ I("path", { d: "M8 20h8M12 16v4" })]
-}), Rt = ({ size: e = 16 }) => /* @__PURE__ */ L("svg", {
+	}), /* @__PURE__ */ L("path", { d: "M8 20h8M12 16v4" })]
+}), Wt = ({ size: e = 16 }) => /* @__PURE__ */ R("svg", {
 	...B(e),
-	children: [/* @__PURE__ */ I("rect", {
+	children: [/* @__PURE__ */ L("rect", {
 		x: "7",
 		y: "2",
 		width: "10",
 		height: "20",
 		rx: "2"
-	}), /* @__PURE__ */ I("path", { d: "M11 18h2" })]
-}), zt = ({ size: e = 16 }) => /* @__PURE__ */ L("svg", {
+	}), /* @__PURE__ */ L("path", { d: "M11 18h2" })]
+}), Gt = ({ size: e = 16 }) => /* @__PURE__ */ R("svg", {
 	...B(e),
-	children: [/* @__PURE__ */ I("path", { d: "m12 3 9 5-9 5-9-5 9-5Z" }), /* @__PURE__ */ I("path", { d: "m3 13 9 5 9-5" })]
-}), Bt = ({ size: e = 15 }) => /* @__PURE__ */ L("svg", {
+	children: [/* @__PURE__ */ L("path", { d: "m12 3 9 5-9 5-9-5 9-5Z" }), /* @__PURE__ */ L("path", { d: "m3 13 9 5 9-5" })]
+}), Kt = ({ size: e = 15 }) => /* @__PURE__ */ R("svg", {
 	...B(e),
 	children: [
-		/* @__PURE__ */ I("path", { d: "m2 22 1-1h3l9-9" }),
-		/* @__PURE__ */ I("path", { d: "M3 21v-3l9-9" }),
-		/* @__PURE__ */ I("path", { d: "m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8a2.1 2.1 0 1 1 3-3l.4.4Z" })
+		/* @__PURE__ */ L("path", { d: "m2 22 1-1h3l9-9" }),
+		/* @__PURE__ */ L("path", { d: "M3 21v-3l9-9" }),
+		/* @__PURE__ */ L("path", { d: "m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8a2.1 2.1 0 1 1 3-3l.4.4Z" })
 	]
-}), Vt = ({ size: e = 14 }) => /* @__PURE__ */ I("svg", {
+}), qt = ({ size: e = 14 }) => /* @__PURE__ */ L("svg", {
 	...B(e),
-	children: /* @__PURE__ */ I("path", { d: "M4 4h16M4 20h16M12 8v8" })
-}), Ht = ({ size: e = 22 }) => /* @__PURE__ */ I("svg", {
+	children: /* @__PURE__ */ L("path", { d: "M4 4h16M4 20h16M12 8v8" })
+}), Jt = ({ size: e = 22 }) => /* @__PURE__ */ L("svg", {
 	...B(e, 1.8),
-	children: /* @__PURE__ */ I("path", { d: "M4 4h16M4 20h16M12 7v10M9 9.5 12 7l3 2.5M9 14.5l3 2.5 3-2.5" })
-}), Ut = ({ size: e = 22 }) => /* @__PURE__ */ L("svg", {
+	children: /* @__PURE__ */ L("path", { d: "M4 4h16M4 20h16M12 7v10M9 9.5 12 7l3 2.5M9 14.5l3 2.5 3-2.5" })
+}), Yt = ({ size: e = 22 }) => /* @__PURE__ */ R("svg", {
 	...B(e, 1.8),
 	children: [
-		/* @__PURE__ */ I("circle", {
+		/* @__PURE__ */ L("circle", {
 			cx: "6",
 			cy: "12",
 			r: "2.5"
 		}),
-		/* @__PURE__ */ I("circle", {
+		/* @__PURE__ */ L("circle", {
 			cx: "18",
 			cy: "6",
 			r: "2.5"
 		}),
-		/* @__PURE__ */ I("circle", {
+		/* @__PURE__ */ L("circle", {
 			cx: "18",
 			cy: "18",
 			r: "2.5"
 		}),
-		/* @__PURE__ */ I("path", { d: "m8.2 10.8 7.6-3.6M8.2 13.2l7.6 3.6" })
+		/* @__PURE__ */ L("path", { d: "m8.2 10.8 7.6-3.6M8.2 13.2l7.6 3.6" })
 	]
-}), Wt = ({ size: e = 22 }) => /* @__PURE__ */ I("svg", {
+}), Xt = ({ size: e = 22 }) => /* @__PURE__ */ L("svg", {
 	...B(e, 1.8),
-	children: /* @__PURE__ */ I("rect", {
+	children: /* @__PURE__ */ L("rect", {
 		x: "4",
 		y: "4",
 		width: "16",
@@ -1177,47 +1226,47 @@ var At = /* @__PURE__ */ Be({
 //#endregion
 //#region src/components/fields.tsx
 function V({ title: e, children: t, defaultOpen: n = !0, className: r, style: i }) {
-	let [a, o] = l(n);
-	return /* @__PURE__ */ L("section", {
-		className: R("bree-group", r),
+	let [a, o] = u(n);
+	return /* @__PURE__ */ R("section", {
+		className: z("bree-group", r),
 		style: i,
-		children: [/* @__PURE__ */ L("button", {
+		children: [/* @__PURE__ */ R("button", {
 			type: "button",
 			className: "bree-group-header",
 			onClick: () => o(!a),
 			"aria-expanded": a,
-			children: [/* @__PURE__ */ I("span", { children: e }), /* @__PURE__ */ I("span", {
-				className: R("bree-chevron", a && "bree-open"),
+			children: [/* @__PURE__ */ L("span", { children: e }), /* @__PURE__ */ L("span", {
+				className: z("bree-chevron", a && "bree-open"),
 				"aria-hidden": !0,
 				children: "›"
 			})]
-		}), a && /* @__PURE__ */ I("div", {
+		}), a && /* @__PURE__ */ L("div", {
 			className: "bree-group-body",
 			children: t
 		})]
 	});
 }
 function H({ label: e, children: t, stacked: n, className: r, style: i }) {
-	return /* @__PURE__ */ L("label", {
-		className: R("bree-field", n && "bree-stacked", r),
+	return /* @__PURE__ */ R("label", {
+		className: z("bree-field", n && "bree-stacked", r),
 		style: i,
-		children: [/* @__PURE__ */ I("span", {
+		children: [/* @__PURE__ */ L("span", {
 			className: "bree-field-label",
 			children: e
-		}), /* @__PURE__ */ I("span", {
+		}), /* @__PURE__ */ L("span", {
 			className: "bree-field-control",
 			children: t
 		})]
 	});
 }
-function Gt(e) {
-	let [t, n] = l(e), [r, i] = l(e);
+function Zt(e) {
+	let [t, n] = u(e), [r, i] = u(e);
 	return Object.is(e, r) || (i(e), n(e)), [t, n];
 }
 function U({ value: e, onChange: t, placeholder: n, type: r = "text", className: i, style: a }) {
-	let [o, s] = Gt(e);
-	return /* @__PURE__ */ I("input", {
-		className: R("bree-input", i),
+	let [o, s] = Zt(e);
+	return /* @__PURE__ */ L("input", {
+		className: z("bree-input", i),
 		style: a,
 		type: r,
 		value: o,
@@ -1229,10 +1278,10 @@ function U({ value: e, onChange: t, placeholder: n, type: r = "text", className:
 		}
 	});
 }
-function Kt({ value: e, onChange: t, rows: n = 8, className: r, style: i }) {
-	let [a, o] = Gt(e);
-	return /* @__PURE__ */ I("textarea", {
-		className: R("bree-input bree-textarea", r),
+function Qt({ value: e, onChange: t, rows: n = 8, className: r, style: i }) {
+	let [a, o] = Zt(e);
+	return /* @__PURE__ */ L("textarea", {
+		className: z("bree-input bree-textarea", r),
 		style: i,
 		rows: n,
 		value: a,
@@ -1241,21 +1290,21 @@ function Kt({ value: e, onChange: t, rows: n = 8, className: r, style: i }) {
 		onBlur: () => a !== e && t(a)
 	});
 }
-function qt(e) {
+function $t(e) {
 	if (e == null || e === "" || e === "auto") return "";
 	let t = Number.parseFloat(String(e));
 	return Number.isFinite(t) ? t : "";
 }
 function W({ value: e, onChange: t, unit: n = "px", min: r = 0, max: i, step: a = 1, placeholder: o, className: s, style: c }) {
-	let l = $(), [u, d] = Gt(String(qt(e))), f = (e) => {
+	let l = $(), [u, d] = Zt(String($t(e))), f = (e) => {
 		if (e.trim() === "") return t("");
 		let n = Number.parseFloat(e);
 		Number.isFinite(n) && t(Math.max(r, i === void 0 ? n : Math.min(i, n)));
 	};
-	return /* @__PURE__ */ L("span", {
-		className: R("bree-number", s),
+	return /* @__PURE__ */ R("span", {
+		className: z("bree-number", s),
 		style: c,
-		children: [/* @__PURE__ */ I("input", {
+		children: [/* @__PURE__ */ L("input", {
 			className: "bree-input",
 			inputMode: "decimal",
 			value: u,
@@ -1265,34 +1314,34 @@ function W({ value: e, onChange: t, unit: n = "px", min: r = 0, max: i, step: a
 			onKeyDown: (e) => {
 				if (e.key === "Enter" && f(u), e.key === "ArrowUp" || e.key === "ArrowDown") {
 					e.preventDefault();
-					let t = (qt(u) || 0) + (e.key === "ArrowUp" ? a : -a) * (e.shiftKey ? 10 : 1);
+					let t = ($t(u) || 0) + (e.key === "ArrowUp" ? a : -a) * (e.shiftKey ? 10 : 1);
 					d(String(t)), f(String(t));
 				}
 			}
-		}), n && /* @__PURE__ */ I("span", {
+		}), n && /* @__PURE__ */ L("span", {
 			className: "bree-unit",
 			children: n
 		})]
 	});
 }
-function Jt({ value: e, onChange: t, min: n, max: r, unit: i = "px", className: a, style: o }) {
-	let s = qt(e) || n;
-	return /* @__PURE__ */ L("span", {
-		className: R("bree-range", a),
+function en({ value: e, onChange: t, min: n, max: r, unit: i = "px", className: a, style: o }) {
+	let s = $t(e) || n;
+	return /* @__PURE__ */ R("span", {
+		className: z("bree-range", a),
 		style: o,
-		children: [/* @__PURE__ */ I("input", {
+		children: [/* @__PURE__ */ L("input", {
 			type: "range",
 			min: n,
 			max: r,
 			value: s,
 			onChange: (e) => t(Number(e.target.value))
-		}), /* @__PURE__ */ L("span", {
+		}), /* @__PURE__ */ R("span", {
 			className: "bree-range-value",
 			children: [s, i]
 		})]
 	});
 }
-var Yt = [
+var tn = [
 	"#111827",
 	"#374151",
 	"#6b7280",
@@ -1312,88 +1361,88 @@ var Yt = [
 	"#ecfdf5",
 	"#fef3c7"
 ];
-function Xt(e) {
+function nn(e) {
 	let t = e.trim().toLowerCase();
 	if (/^#[0-9a-f]{6}$/.test(t)) return t;
 	if (/^#[0-9a-f]{3}$/.test(t)) return `#${[...t.slice(1)].map((e) => e + e).join("")}`;
 	let n = t.match(/^rgba?\(\s*(\d+)[\s,]+(\d+)[\s,]+(\d+)/);
 	return n ? `#${n.slice(1, 4).map((e) => Number(e).toString(16).padStart(2, "0")).join("")}` : null;
 }
-function G({ value: e, onChange: t, presets: n = [], swatches: r = Yt, placeholder: a, className: o, style: s, popoverClassName: u }) {
-	let d = $(), f = a ?? d.fields.colorDefault, p = typeof e == "string" ? e : "", m = Xt(p), [h, g] = l(!1), [_, v] = l(m ?? "#ffffff"), y = c(t);
+function G({ value: e, onChange: t, presets: n = [], swatches: r = tn, placeholder: a, className: o, style: s, popoverClassName: c }) {
+	let d = $(), f = a ?? d.fields.colorDefault, p = typeof e == "string" ? e : "", m = nn(p), [h, g] = u(!1), [_, v] = u(m ?? "#ffffff"), y = l(t);
 	i(() => {
 		y.current = t;
 	});
-	let b = c(null), x = c(0), S = () => {
+	let b = l(null), x = l(0), S = () => {
 		window.clearTimeout(x.current), x.current = 0, b.current && y.current(b.current), b.current = null;
 	}, C = (e) => {
 		v(e), b.current = e, x.current ||= window.setTimeout(S, 60);
 	}, w = (e) => {
-		b.current = null, window.clearTimeout(x.current), x.current = 0, v(Xt(e) ?? _), y.current(e);
-	}, T = typeof window < "u" ? window.EyeDropper : void 0, E = [...new Set(n.map((e) => Xt(e)).filter((e) => !!e))].slice(0, 9);
-	return /* @__PURE__ */ L(Ae.Root, {
+		b.current = null, window.clearTimeout(x.current), x.current = 0, v(nn(e) ?? _), y.current(e);
+	}, T = typeof window < "u" ? window.EyeDropper : void 0, E = [...new Set(n.map((e) => nn(e)).filter((e) => !!e))].slice(0, 9);
+	return /* @__PURE__ */ R(Me.Root, {
 		open: h,
 		onOpenChange: (e) => {
 			e ? v(m ?? "#ffffff") : S(), g(e);
 		},
-		children: [/* @__PURE__ */ L("span", {
-			className: R("bree-color-field", o),
+		children: [/* @__PURE__ */ R("span", {
+			className: z("bree-color-field", o),
 			style: s,
-			children: [/* @__PURE__ */ I(Ae.Trigger, {
+			children: [/* @__PURE__ */ L(Me.Trigger, {
 				asChild: !0,
-				children: /* @__PURE__ */ I("button", {
+				children: /* @__PURE__ */ L("button", {
 					type: "button",
-					className: R("bree-color-trigger", !m && "bree-empty"),
+					className: z("bree-color-trigger", !m && "bree-empty"),
 					style: m ? { background: m } : void 0,
 					"aria-label": d.fields.chooseColor(p || f)
 				})
-			}), /* @__PURE__ */ I(U, {
+			}), /* @__PURE__ */ L(U, {
 				value: p,
 				onChange: t,
 				placeholder: f
 			})]
-		}), /* @__PURE__ */ I(Ae.Portal, { children: /* @__PURE__ */ I(j, { children: /* @__PURE__ */ L(Ae.Content, {
-			className: R("bree bree-color-popover", u),
+		}), /* @__PURE__ */ L(Me.Portal, { children: /* @__PURE__ */ L(M, { children: /* @__PURE__ */ R(Me.Content, {
+			className: z("bree bree-color-popover", c),
 			side: "left",
 			align: "start",
 			sideOffset: 10,
 			collisionPadding: 12,
 			onOpenAutoFocus: (e) => e.preventDefault(),
 			children: [
-				/* @__PURE__ */ I(Me, {
+				/* @__PURE__ */ L(Pe, {
 					color: _,
 					onChange: C
 				}),
-				/* @__PURE__ */ L("div", {
+				/* @__PURE__ */ R("div", {
 					className: "bree-color-popover-row",
 					children: [
-						/* @__PURE__ */ I("span", {
+						/* @__PURE__ */ L("span", {
 							className: "bree-color-preview",
 							style: { background: _ }
 						}),
-						/* @__PURE__ */ L("label", {
+						/* @__PURE__ */ R("label", {
 							className: "bree-hex-field",
-							children: [/* @__PURE__ */ I("span", { children: "#" }), /* @__PURE__ */ I(je, {
+							children: [/* @__PURE__ */ L("span", { children: "#" }), /* @__PURE__ */ L(Ne, {
 								color: _,
 								onChange: w,
 								"aria-label": d.fields.hexCode
 							})]
 						}),
-						T && /* @__PURE__ */ I("button", {
+						T && /* @__PURE__ */ L("button", {
 							type: "button",
 							className: "bree-icon-button",
 							title: d.fields.eyedropper,
 							onClick: () => new T().open().then((e) => w(e.sRGBHex)).catch(() => {}),
-							children: /* @__PURE__ */ I(Bt, {})
+							children: /* @__PURE__ */ L(Kt, {})
 						})
 					]
 				}),
-				E.length > 0 && /* @__PURE__ */ L(F, { children: [/* @__PURE__ */ I("span", {
+				E.length > 0 && /* @__PURE__ */ R(I, { children: [/* @__PURE__ */ L("span", {
 					className: "bree-color-popover-title",
 					children: d.fields.documentColors
-				}), /* @__PURE__ */ I("div", {
+				}), /* @__PURE__ */ L("div", {
 					className: "bree-swatches",
-					children: E.map((e) => /* @__PURE__ */ I("button", {
+					children: E.map((e) => /* @__PURE__ */ L("button", {
 						type: "button",
 						className: "bree-swatch",
 						style: { background: e },
@@ -1401,21 +1450,21 @@ function G({ value: e, onChange: t, presets: n = [], swatches: r = Yt, placehold
 						onClick: () => w(e)
 					}, e))
 				})] }),
-				/* @__PURE__ */ I("span", {
+				/* @__PURE__ */ L("span", {
 					className: "bree-color-popover-title",
 					children: d.fields.palette
 				}),
-				/* @__PURE__ */ I("div", {
+				/* @__PURE__ */ L("div", {
 					className: "bree-swatches",
-					children: r.map((e) => /* @__PURE__ */ I("button", {
+					children: r.map((e) => /* @__PURE__ */ L("button", {
 						type: "button",
-						className: R("bree-swatch", e === _ && "bree-active"),
+						className: z("bree-swatch", e === _ && "bree-active"),
 						style: { background: e },
 						title: e,
 						onClick: () => w(e)
 					}, e))
 				}),
-				/* @__PURE__ */ I("button", {
+				/* @__PURE__ */ L("button", {
 					type: "button",
 					className: "bree-color-reset",
 					onClick: () => {
@@ -1427,38 +1476,61 @@ function G({ value: e, onChange: t, presets: n = [], swatches: r = Yt, placehold
 		}) }) })]
 	});
 }
-function Zt({ value: e, onChange: t, options: n, className: r, style: i }) {
-	return /* @__PURE__ */ I("select", {
-		className: R("bree-input bree-select", r),
+function rn({ value: e, onChange: t, options: n, className: r, style: i }) {
+	return /* @__PURE__ */ L("select", {
+		className: z("bree-input bree-select", r),
 		style: i,
 		value: e,
 		onChange: (e) => t(e.target.value),
-		children: n.map(([e, t]) => /* @__PURE__ */ I("option", {
+		children: n.map(([e, t]) => /* @__PURE__ */ L("option", {
 			value: e,
 			children: t
 		}, e))
 	});
 }
-function Qt({ value: e, onChange: t, options: n, ariaLabel: r, className: i, style: a }) {
-	return /* @__PURE__ */ I("span", {
-		className: R("bree-segmented", i),
+function an({ value: e, onChange: t, emptyLabel: n, className: r, style: i }) {
+	let a = Zn()?.fonts ?? wt, o = Et(a, e), s = e && !o ? {
+		label: e.split(",")[0].replace(/['"]/g, "").trim(),
+		value: e
+	} : null, c = s ? [...a, s] : a;
+	return /* @__PURE__ */ R("select", {
+		className: z("bree-input bree-select", r),
+		style: {
+			fontFamily: e || void 0,
+			...i
+		},
+		value: o?.value ?? e ?? "",
+		onChange: (e) => t(e.target.value),
+		children: [(n !== void 0 || !e) && /* @__PURE__ */ L("option", {
+			value: "",
+			children: n ?? ""
+		}), c.map((e) => /* @__PURE__ */ L("option", {
+			value: e.value,
+			style: { fontFamily: e.value },
+			children: e.label
+		}, e.value))]
+	});
+}
+function on({ value: e, onChange: t, options: n, ariaLabel: r, className: i, style: a }) {
+	return /* @__PURE__ */ L("span", {
+		className: z("bree-segmented", i),
 		style: a,
 		role: "radiogroup",
 		"aria-label": r,
-		children: n.map((n) => /* @__PURE__ */ I("button", {
+		children: n.map((n) => /* @__PURE__ */ L("button", {
 			type: "button",
 			role: "radio",
 			"aria-checked": e === n.value,
 			title: n.title,
-			className: R(e === n.value && "bree-active"),
+			className: z(e === n.value && "bree-active"),
 			onClick: () => t(n.value),
 			children: n.label
 		}, n.value))
 	});
 }
-function $t({ value: e, onChange: t, className: n, style: r }) {
+function sn({ value: e, onChange: t, className: n, style: r }) {
 	let i = $();
-	return /* @__PURE__ */ I(Qt, {
+	return /* @__PURE__ */ L(on, {
 		className: n,
 		style: r,
 		value: e || "left",
@@ -1466,55 +1538,55 @@ function $t({ value: e, onChange: t, className: n, style: r }) {
 		options: [
 			{
 				value: "left",
-				label: /* @__PURE__ */ I(ie, { size: 14 }),
+				label: /* @__PURE__ */ L(oe, { size: 14 }),
 				title: i.fields.alignLeft
 			},
 			{
 				value: "center",
-				label: /* @__PURE__ */ I(re, { size: 14 }),
+				label: /* @__PURE__ */ L(ae, { size: 14 }),
 				title: i.fields.alignCenter
 			},
 			{
 				value: "right",
-				label: /* @__PURE__ */ I(ae, { size: 14 }),
+				label: /* @__PURE__ */ L(se, { size: 14 }),
 				title: i.fields.alignRight
 			}
 		]
 	});
 }
-function en({ get: e, set: t, className: n, style: r }) {
+function cn({ get: e, set: t, className: n, style: r }) {
 	let i = $(), a = [
 		"Top",
 		"Right",
 		"Bottom",
 		"Left"
-	], o = a.map((t) => qt(e(t))), s = o.every((e) => e === o[0]), [c, u] = l(!s), d = {
+	], o = a.map((t) => $t(e(t))), s = o.every((e) => e === o[0]), [c, l] = u(!s), d = {
 		Top: i.fields.top,
 		Right: i.fields.right,
 		Bottom: i.fields.bottom,
 		Left: i.fields.left
 	};
-	return /* @__PURE__ */ L("div", {
-		className: R("bree-padding", n),
+	return /* @__PURE__ */ R("div", {
+		className: z("bree-padding", n),
 		style: r,
-		children: [c ? /* @__PURE__ */ I("div", {
+		children: [c ? /* @__PURE__ */ L("div", {
 			className: "bree-padding-grid",
-			children: a.map((e, n) => /* @__PURE__ */ L("label", {
+			children: a.map((e, n) => /* @__PURE__ */ R("label", {
 				className: "bree-padding-side",
-				children: [/* @__PURE__ */ I("span", { children: d[e] }), /* @__PURE__ */ I(W, {
+				children: [/* @__PURE__ */ L("span", { children: d[e] }), /* @__PURE__ */ L(W, {
 					value: o[n],
 					onChange: (n) => t([[e, n]])
 				})]
 			}, e))
-		}) : /* @__PURE__ */ I(W, {
+		}) : /* @__PURE__ */ L(W, {
 			value: o[0],
 			onChange: (e) => t(a.map((t) => [t, e]))
-		}), /* @__PURE__ */ L("label", {
+		}), /* @__PURE__ */ R("label", {
 			className: "bree-checkbox",
-			children: [/* @__PURE__ */ I("input", {
+			children: [/* @__PURE__ */ L("input", {
 				type: "checkbox",
 				checked: c,
-				onChange: (e) => u(e.target.checked)
+				onChange: (e) => l(e.target.checked)
 			}), i.fields.moreOptions]
 		})]
 	});
@@ -1522,34 +1594,42 @@ function en({ get: e, set: t, className: n, style: r }) {
 //#endregion
 //#region src/components/inspectors/groups.tsx
 var K = (e) => e;
-function tn({ ctx: e, alignment: t, setAlignment: n, className: r, style: i }) {
+function ln({ ctx: e, alignment: t, setAlignment: n, className: r, style: i }) {
 	let a = $().inspector;
-	return /* @__PURE__ */ L(V, {
+	return /* @__PURE__ */ R(V, {
 		title: a.typography,
 		className: r,
 		style: i,
 		children: [
-			/* @__PURE__ */ I(H, {
+			/* @__PURE__ */ L(H, {
+				label: a.font,
+				children: /* @__PURE__ */ L(an, {
+					value: e.getStyle(K("fontFamily")),
+					emptyLabel: a.fontDefault,
+					onChange: (t) => e.setStyle(K("fontFamily"), t)
+				})
+			}),
+			/* @__PURE__ */ L(H, {
 				label: a.color,
 				stacked: !0,
-				children: /* @__PURE__ */ I(G, {
+				children: /* @__PURE__ */ L(G, {
 					value: e.getStyle(K("color")),
 					presets: e.presetColors,
 					onChange: (t) => e.setStyle(K("color"), t)
 				})
 			}),
-			/* @__PURE__ */ I(H, {
+			/* @__PURE__ */ L(H, {
 				label: a.size,
-				children: /* @__PURE__ */ I(W, {
+				children: /* @__PURE__ */ L(W, {
 					value: e.getStyle(K("fontSize")),
 					onChange: (t) => e.setStyle(K("fontSize"), t),
 					min: 8,
 					max: 96
 				})
 			}),
-			/* @__PURE__ */ I(H, {
+			/* @__PURE__ */ L(H, {
 				label: a.weight,
-				children: /* @__PURE__ */ I(Zt, {
+				children: /* @__PURE__ */ L(rn, {
 					value: String(e.getStyle(K("fontWeight")) ?? "400"),
 					onChange: (t) => e.setStyle(K("fontWeight"), t),
 					options: [
@@ -1561,9 +1641,9 @@ function tn({ ctx: e, alignment: t, setAlignment: n, className: r, style: i }) {
 					]
 				})
 			}),
-			/* @__PURE__ */ I(H, {
+			/* @__PURE__ */ L(H, {
 				label: a.lineHeight,
-				children: /* @__PURE__ */ I(W, {
+				children: /* @__PURE__ */ L(W, {
 					value: e.getStyle(K("lineHeight")),
 					unit: "%",
 					onChange: (t) => e.setStyle(K("lineHeight"), t),
@@ -1572,9 +1652,9 @@ function tn({ ctx: e, alignment: t, setAlignment: n, className: r, style: i }) {
 					step: 5
 				})
 			}),
-			n && /* @__PURE__ */ I(H, {
+			n && /* @__PURE__ */ L(H, {
 				label: a.alignment,
-				children: /* @__PURE__ */ I($t, {
+				children: /* @__PURE__ */ L(sn, {
 					value: t ?? "left",
 					onChange: n
 				})
@@ -1582,16 +1662,16 @@ function tn({ ctx: e, alignment: t, setAlignment: n, className: r, style: i }) {
 		]
 	});
 }
-function nn({ ctx: e, title: t, className: n, style: r }) {
+function q({ ctx: e, title: t, className: n, style: r }) {
 	let i = $();
-	return /* @__PURE__ */ I(V, {
+	return /* @__PURE__ */ L(V, {
 		title: t ?? i.inspector.spacing,
 		className: n,
 		style: r,
-		children: /* @__PURE__ */ I(H, {
+		children: /* @__PURE__ */ L(H, {
 			label: i.inspector.padding,
 			stacked: !0,
-			children: /* @__PURE__ */ I(en, {
+			children: /* @__PURE__ */ L(cn, {
 				get: (t) => e.getStyle(K(`padding${t}`)) ?? e.getStyle(K("padding")),
 				set: (t) => e.batchSetStyle([{
 					prop: K("padding"),
@@ -1604,32 +1684,32 @@ function nn({ ctx: e, title: t, className: n, style: r }) {
 		})
 	});
 }
-function rn({ ctx: e, className: t, style: n }) {
+function un({ ctx: e, className: t, style: n }) {
 	let r = $().inspector;
-	return /* @__PURE__ */ L(V, {
+	return /* @__PURE__ */ R(V, {
 		title: r.box,
 		className: t,
 		style: n,
 		children: [
-			/* @__PURE__ */ I(H, {
+			/* @__PURE__ */ L(H, {
 				label: r.backgroundColor,
 				stacked: !0,
-				children: /* @__PURE__ */ I(G, {
+				children: /* @__PURE__ */ L(G, {
 					value: e.getStyle(K("backgroundColor")),
 					presets: e.presetColors,
 					onChange: (t) => e.setStyle(K("backgroundColor"), t)
 				})
 			}),
-			/* @__PURE__ */ I(H, {
+			/* @__PURE__ */ L(H, {
 				label: r.radius,
-				children: /* @__PURE__ */ I(W, {
+				children: /* @__PURE__ */ L(W, {
 					value: e.getStyle(K("borderRadius")),
 					onChange: (t) => e.setStyle(K("borderRadius"), t)
 				})
 			}),
-			/* @__PURE__ */ I(H, {
+			/* @__PURE__ */ L(H, {
 				label: r.border,
-				children: /* @__PURE__ */ I(W, {
+				children: /* @__PURE__ */ L(W, {
 					value: e.getStyle(K("borderWidth")),
 					onChange: (t) => e.batchSetStyle([{
 						prop: K("borderWidth"),
@@ -1640,10 +1720,10 @@ function rn({ ctx: e, className: t, style: n }) {
 					}])
 				})
 			}),
-			/* @__PURE__ */ I(H, {
+			/* @__PURE__ */ L(H, {
 				label: r.borderColor,
 				stacked: !0,
-				children: /* @__PURE__ */ I(G, {
+				children: /* @__PURE__ */ L(G, {
 					value: e.getStyle(K("borderColor")),
 					presets: e.presetColors,
 					onChange: (t) => e.setStyle(K("borderColor"), t)
@@ -1654,71 +1734,71 @@ function rn({ ctx: e, className: t, style: n }) {
 }
 //#endregion
 //#region src/components/inspectors/ButtonInspector.tsx
-function an({ ctx: e, className: t, style: n }) {
+function dn({ ctx: e, className: t, style: n }) {
 	let r = $().inspector;
-	return /* @__PURE__ */ L("div", {
-		className: R("bree-inspector", t),
+	return /* @__PURE__ */ R("div", {
+		className: z("bree-inspector", t),
 		style: n,
 		children: [
-			/* @__PURE__ */ I(V, {
+			/* @__PURE__ */ L(V, {
 				title: r.action,
-				children: /* @__PURE__ */ I(H, {
+				children: /* @__PURE__ */ L(H, {
 					label: r.linkUrl,
 					stacked: !0,
-					children: /* @__PURE__ */ I(U, {
+					children: /* @__PURE__ */ L(U, {
 						value: String(e.getAttr("href") ?? ""),
 						onChange: (t) => e.setAttr("href", t),
 						placeholder: "https://"
 					})
 				})
 			}),
-			/* @__PURE__ */ L(V, {
+			/* @__PURE__ */ R(V, {
 				title: r.button,
 				children: [
-					/* @__PURE__ */ I(H, {
+					/* @__PURE__ */ L(H, {
 						label: r.alignment,
-						children: /* @__PURE__ */ I($t, {
+						children: /* @__PURE__ */ L(sn, {
 							value: String(e.getAttr("alignment") ?? "left"),
 							onChange: (t) => e.setAttr("alignment", t)
 						})
 					}),
-					/* @__PURE__ */ I(H, {
+					/* @__PURE__ */ L(H, {
 						label: r.backgroundColor,
 						stacked: !0,
-						children: /* @__PURE__ */ I(G, {
+						children: /* @__PURE__ */ L(G, {
 							value: e.getStyle(K("backgroundColor")),
 							presets: e.presetColors,
 							onChange: (t) => e.setStyle(K("backgroundColor"), t)
 						})
 					}),
-					/* @__PURE__ */ I(H, {
+					/* @__PURE__ */ L(H, {
 						label: r.textColor,
 						stacked: !0,
-						children: /* @__PURE__ */ I(G, {
+						children: /* @__PURE__ */ L(G, {
 							value: e.getStyle(K("color")),
 							presets: e.presetColors,
 							onChange: (t) => e.setStyle(K("color"), t)
 						})
 					}),
-					/* @__PURE__ */ I(H, {
+					/* @__PURE__ */ L(H, {
 						label: r.textSize,
-						children: /* @__PURE__ */ I(W, {
+						children: /* @__PURE__ */ L(W, {
 							value: e.getStyle(K("fontSize")),
 							onChange: (t) => e.setStyle(K("fontSize"), t),
 							min: 8,
 							max: 48
 						})
 					}),
-					/* @__PURE__ */ I(H, {
+					/* @__PURE__ */ L(H, {
 						label: r.radius,
-						children: /* @__PURE__ */ I(W, {
+						children: /* @__PURE__ */ L(W, {
 							value: e.getStyle(K("borderRadius")),
 							onChange: (t) => e.setStyle(K("borderRadius"), t)
 						})
 					})
 				]
 			}),
-			/* @__PURE__ */ I(nn, {
+			/* @__PURE__ */ L(q, {
 				ctx: e,
 				title: r.buttonPadding
 			})
@@ -1727,7 +1807,7 @@ function an({ ctx: e, className: t, style: n }) {
 }
 //#endregion
 //#region src/components/inspectors/ColumnsInspector.tsx
-function on({ ctx: e, className: t, style: n }) {
+function fn({ ctx: e, className: t, style: n }) {
 	let { editor: r, t: i } = Q(), a = i.inspector, o = {
 		twoColumns: 2,
 		threeColumns: 3,
@@ -1760,38 +1840,38 @@ function on({ ctx: e, className: t, style: n }) {
 				...n.attrs,
 				style: `${s ? `${s};` : ""}width:${t[i]}%`
 			});
-		}), n.selection instanceof w && a.setSelection(w.create(a.doc, e.nodePos.pos)), r.view.dispatch(a);
+		}), n.selection instanceof D && a.setSelection(D.create(a.doc, e.nodePos.pos)), r.view.dispatch(a);
 	};
-	return /* @__PURE__ */ I("div", {
-		className: R("bree-inspector", t),
+	return /* @__PURE__ */ L("div", {
+		className: z("bree-inspector", t),
 		style: n,
-		children: /* @__PURE__ */ L(V, {
+		children: /* @__PURE__ */ R(V, {
 			title: a.columns,
 			children: [
-				/* @__PURE__ */ I(H, {
+				/* @__PURE__ */ L(H, {
 					label: a.distribution,
 					stacked: !0,
-					children: /* @__PURE__ */ I("div", {
+					children: /* @__PURE__ */ L("div", {
 						className: "bree-ratio-grid",
-						children: s.map(([e, t]) => /* @__PURE__ */ L("button", {
+						children: s.map(([e, t]) => /* @__PURE__ */ R("button", {
 							type: "button",
 							className: "bree-ratio",
 							onClick: () => c(t),
-							children: [/* @__PURE__ */ I("span", {
+							children: [/* @__PURE__ */ L("span", {
 								className: "bree-ratio-bars",
-								children: t.map((e, t) => /* @__PURE__ */ I("i", { style: { flex: e } }, t))
+								children: t.map((e, t) => /* @__PURE__ */ L("i", { style: { flex: e } }, t))
 							}), e]
 						}, e))
 					})
 				}),
-				/* @__PURE__ */ I(H, {
+				/* @__PURE__ */ L(H, {
 					label: a.columnGap,
-					children: /* @__PURE__ */ I(W, {
+					children: /* @__PURE__ */ L(W, {
 						value: e.getAttr("cellspacing") ?? 0,
 						onChange: (t) => e.setAttr("cellspacing", t === "" ? null : t)
 					})
 				}),
-				/* @__PURE__ */ I("p", {
+				/* @__PURE__ */ L("p", {
 					className: "bree-hint",
 					children: a.columnsHint
 				})
@@ -1801,17 +1881,17 @@ function on({ ctx: e, className: t, style: n }) {
 }
 //#endregion
 //#region src/components/inspectors/HeadingInspector.tsx
-function sn({ ctx: e, className: t, style: n }) {
+function pn({ ctx: e, className: t, style: n }) {
 	let r = $();
-	return /* @__PURE__ */ L("div", {
-		className: R("bree-inspector", t),
+	return /* @__PURE__ */ R("div", {
+		className: z("bree-inspector", t),
 		style: n,
 		children: [
-			/* @__PURE__ */ I(V, {
+			/* @__PURE__ */ L(V, {
 				title: r.inspector.heading,
-				children: /* @__PURE__ */ I(H, {
+				children: /* @__PURE__ */ L(H, {
 					label: r.inspector.level,
-					children: /* @__PURE__ */ I(Qt, {
+					children: /* @__PURE__ */ L(on, {
 						value: String(e.getAttr("level") ?? 1),
 						onChange: (t) => e.setAttr("level", Number(t)),
 						options: [
@@ -1831,37 +1911,37 @@ function sn({ ctx: e, className: t, style: n }) {
 					})
 				})
 			}),
-			/* @__PURE__ */ I(tn, {
+			/* @__PURE__ */ L(ln, {
 				ctx: e,
 				alignment: String(e.getAttr("alignment") ?? "left"),
 				setAlignment: (t) => e.setAttr("alignment", t)
 			}),
-			/* @__PURE__ */ I(nn, { ctx: e }),
-			/* @__PURE__ */ I(rn, { ctx: e })
+			/* @__PURE__ */ L(q, { ctx: e }),
+			/* @__PURE__ */ L(un, { ctx: e })
 		]
 	});
 }
 //#endregion
 //#region src/components/inspectors/ImageInspector.tsx
-function cn({ ctx: e, className: t, style: n }) {
+function mn({ ctx: e, className: t, style: n }) {
 	let { t: r, uploadImage: i } = Q(), a = r.inspector, o = String(e.getAttr("width") ?? "auto");
-	return /* @__PURE__ */ L("div", {
-		className: R("bree-inspector", t),
+	return /* @__PURE__ */ R("div", {
+		className: z("bree-inspector", t),
 		style: n,
 		children: [
-			/* @__PURE__ */ L(V, {
+			/* @__PURE__ */ R(V, {
 				title: a.image,
 				children: [
-					/* @__PURE__ */ I("div", {
+					/* @__PURE__ */ L("div", {
 						className: "bree-image-preview",
-						children: e.getAttr("src") ? /* @__PURE__ */ I("img", {
+						children: e.getAttr("src") ? /* @__PURE__ */ L("img", {
 							src: String(e.getAttr("src")),
 							alt: ""
 						}) : null
 					}),
-					/* @__PURE__ */ L("label", {
+					/* @__PURE__ */ R("label", {
 						className: "bree-button-like",
-						children: [a.uploadImage, /* @__PURE__ */ I("input", {
+						children: [a.uploadImage, /* @__PURE__ */ L("input", {
 							type: "file",
 							accept: "image/*",
 							hidden: !0,
@@ -1871,18 +1951,18 @@ function cn({ ctx: e, className: t, style: n }) {
 							}
 						})]
 					}),
-					/* @__PURE__ */ I(H, {
+					/* @__PURE__ */ L(H, {
 						label: a.imageUrl,
 						stacked: !0,
-						children: /* @__PURE__ */ I(U, {
+						children: /* @__PURE__ */ L(U, {
 							value: String(e.getAttr("src") ?? ""),
 							onChange: (t) => e.setAttr("src", t)
 						})
 					}),
-					/* @__PURE__ */ I(H, {
+					/* @__PURE__ */ L(H, {
 						label: a.altText,
 						stacked: !0,
-						children: /* @__PURE__ */ I(U, {
+						children: /* @__PURE__ */ L(U, {
 							value: String(e.getAttr("alt") ?? ""),
 							onChange: (t) => e.setAttr("alt", t),
 							placeholder: a.altPlaceholder
@@ -1890,70 +1970,70 @@ function cn({ ctx: e, className: t, style: n }) {
 					})
 				]
 			}),
-			/* @__PURE__ */ L(V, {
+			/* @__PURE__ */ R(V, {
 				title: a.layout,
 				children: [
-					/* @__PURE__ */ I(H, {
+					/* @__PURE__ */ L(H, {
 						label: a.autoWidth,
-						children: /* @__PURE__ */ I("input", {
+						children: /* @__PURE__ */ L("input", {
 							type: "checkbox",
 							checked: o === "auto",
 							onChange: (t) => e.setAttr("width", t.target.checked ? "auto" : "300")
 						})
 					}),
-					o !== "auto" && /* @__PURE__ */ I(H, {
+					o !== "auto" && /* @__PURE__ */ L(H, {
 						label: a.width,
-						children: /* @__PURE__ */ I(Jt, {
+						children: /* @__PURE__ */ L(en, {
 							value: o,
 							min: 20,
 							max: 900,
 							onChange: (t) => e.setAttr("width", String(t))
 						})
 					}),
-					/* @__PURE__ */ I(H, {
+					/* @__PURE__ */ L(H, {
 						label: a.alignment,
-						children: /* @__PURE__ */ I($t, {
+						children: /* @__PURE__ */ L(sn, {
 							value: String(e.getAttr("alignment") ?? "center"),
 							onChange: (t) => e.setAttr("alignment", t)
 						})
 					}),
-					/* @__PURE__ */ I(H, {
+					/* @__PURE__ */ L(H, {
 						label: a.radius,
-						children: /* @__PURE__ */ I(W, {
+						children: /* @__PURE__ */ L(W, {
 							value: e.getStyle(K("borderRadius")),
 							onChange: (t) => e.setStyle(K("borderRadius"), t)
 						})
 					})
 				]
 			}),
-			/* @__PURE__ */ I(V, {
+			/* @__PURE__ */ L(V, {
 				title: a.action,
-				children: /* @__PURE__ */ I(H, {
+				children: /* @__PURE__ */ L(H, {
 					label: a.clickLink,
 					stacked: !0,
-					children: /* @__PURE__ */ I(U, {
+					children: /* @__PURE__ */ L(U, {
 						value: String(e.getAttr("href") ?? ""),
 						onChange: (t) => e.setAttr("href", t || null),
 						placeholder: "https://"
 					})
 				})
 			}),
-			/* @__PURE__ */ I(nn, { ctx: e })
+			/* @__PURE__ */ L(q, { ctx: e })
 		]
 	});
 }
 //#endregion
 //#region src/components/inspectors/SimpleInspectors.tsx
-function ln({ ctx: e, className: t, style: n }) {
+function hn({ ctx: e, className: t, style: n }) {
 	let r = $();
-	return /* @__PURE__ */ I("div", {
-		className: R("bree-inspector", t),
+	return /* @__PURE__ */ L("div", {
+		className: z("bree-inspector", t),
 		style: n,
-		children: /* @__PURE__ */ I(V, {
+		children: /* @__PURE__ */ L(V, {
 			title: r.inspector.spacer,
-			children: /* @__PURE__ */ I(H, {
+			children: /* @__PURE__ */ L(H, {
 				label: r.inspector.height,
-				children: /* @__PURE__ */ I(Jt, {
+				children: /* @__PURE__ */ L(en, {
 					value: e.getAttr("height"),
 					min: 4,
 					max: 160,
@@ -1963,44 +2043,44 @@ function ln({ ctx: e, className: t, style: n }) {
 		})
 	});
 }
-function un({ ctx: e, className: t, style: n }) {
+function gn({ ctx: e, className: t, style: n }) {
 	let r = $();
-	return /* @__PURE__ */ I("div", {
-		className: R("bree-inspector", t),
+	return /* @__PURE__ */ L("div", {
+		className: z("bree-inspector", t),
 		style: n,
-		children: /* @__PURE__ */ L(V, {
+		children: /* @__PURE__ */ R(V, {
 			title: r.inspector.htmlCode,
-			children: [/* @__PURE__ */ I(Kt, {
+			children: [/* @__PURE__ */ L(Qt, {
 				value: String(e.getAttr("html") ?? ""),
 				onChange: (t) => e.setAttr("html", t),
 				rows: 14
-			}), /* @__PURE__ */ I("p", {
+			}), /* @__PURE__ */ L("p", {
 				className: "bree-hint",
 				children: r.inspector.htmlHint
 			})]
 		})
 	});
 }
-function dn({ ctx: e, className: t, style: n }) {
+function _n({ ctx: e, className: t, style: n }) {
 	let r = $().inspector;
-	return /* @__PURE__ */ I("div", {
-		className: R("bree-inspector", t),
+	return /* @__PURE__ */ L("div", {
+		className: z("bree-inspector", t),
 		style: n,
-		children: /* @__PURE__ */ L(V, {
+		children: /* @__PURE__ */ R(V, {
 			title: r.line,
 			children: [
-				/* @__PURE__ */ I(H, {
+				/* @__PURE__ */ L(H, {
 					label: r.color,
 					stacked: !0,
-					children: /* @__PURE__ */ I(G, {
+					children: /* @__PURE__ */ L(G, {
 						value: e.getStyle(K("borderTopColor")),
 						presets: e.presetColors,
 						onChange: (t) => e.setStyle(K("borderTopColor"), t)
 					})
 				}),
-				/* @__PURE__ */ I(H, {
+				/* @__PURE__ */ L(H, {
 					label: r.thickness,
-					children: /* @__PURE__ */ I(W, {
+					children: /* @__PURE__ */ L(W, {
 						value: e.getStyle(K("borderTopWidth")) ?? 1,
 						onChange: (t) => e.batchSetStyle([{
 							prop: K("borderTopWidth"),
@@ -2013,9 +2093,9 @@ function dn({ ctx: e, className: t, style: n }) {
 						max: 12
 					})
 				}),
-				/* @__PURE__ */ I(H, {
+				/* @__PURE__ */ L(H, {
 					label: r.lineStyle,
-					children: /* @__PURE__ */ I(Qt, {
+					children: /* @__PURE__ */ L(on, {
 						value: String(e.getStyle(K("borderTopStyle")) ?? "solid"),
 						onChange: (t) => e.setStyle(K("borderTopStyle"), t),
 						options: [
@@ -2038,16 +2118,16 @@ function dn({ ctx: e, className: t, style: n }) {
 		})
 	});
 }
-function fn({ ctx: e, className: t, style: n }) {
-	return /* @__PURE__ */ L("div", {
-		className: R("bree-inspector", t),
+function vn({ ctx: e, className: t, style: n }) {
+	return /* @__PURE__ */ R("div", {
+		className: z("bree-inspector", t),
 		style: n,
-		children: [/* @__PURE__ */ I(rn, { ctx: e }), /* @__PURE__ */ I(nn, { ctx: e })]
+		children: [/* @__PURE__ */ L(un, { ctx: e }), /* @__PURE__ */ L(q, { ctx: e })]
 	});
 }
 //#endregion
 //#region src/core/style-utils.ts
-function pn(e) {
+function yn(e) {
 	if (typeof e != "string" || !e.trim()) return {};
 	let t = {};
 	for (let n of e.split(";")) {
@@ -2060,18 +2140,18 @@ function pn(e) {
 }
 //#endregion
 //#region src/nodes/custom-nodes.tsx
-var mn = { style: {
+var bn = { style: {
 	default: null,
 	parseHTML: (e) => e.getAttribute("style"),
 	renderHTML: (e) => e.style ? { style: e.style } : {}
-} }, hn = g.create({
+} }, xn = _.create({
 	name: "spacer",
 	group: "block",
 	atom: !0,
 	selectable: !0,
 	addAttributes() {
 		return {
-			...mn,
+			...bn,
 			height: {
 				default: 32,
 				parseHTML: (e) => Number(e.dataset.height) || 32,
@@ -2083,7 +2163,7 @@ var mn = { style: {
 		return [{ tag: "div[data-type=\"spacer\"]" }];
 	},
 	renderHTML({ node: e, HTMLAttributes: t }) {
-		return ["div", te(t, {
+		return ["div", re(t, {
 			"data-type": "spacer",
 			class: "node-spacer",
 			style: `height:${Number(e.attrs.height)}px`
@@ -2091,17 +2171,17 @@ var mn = { style: {
 	},
 	renderToReactEmail({ node: e }) {
 		let t = Number(e.attrs?.height ?? 32);
-		return /* @__PURE__ */ I(Le, {
+		return /* @__PURE__ */ L(ze, {
 			style: {
 				height: t,
 				lineHeight: `${t}px`,
 				fontSize: "1px",
-				...pn(e.attrs?.style)
+				...yn(e.attrs?.style)
 			},
 			children: "\xA0"
 		});
 	}
-}), gn = {
+}), Sn = {
 	facebook: {
 		label: "Facebook",
 		slug: "facebook",
@@ -2137,13 +2217,13 @@ var mn = { style: {
 		slug: "github",
 		color: "181717"
 	}
-}, _n = { linkedin: "https://cdn.jsdelivr.net/npm/simple-icons@9.21.0/icons/linkedin.svg" };
-function vn(e) {
-	if (_n[e]) return _n[e];
-	let t = gn[e] ?? gn.facebook;
+}, Cn = { linkedin: "https://cdn.jsdelivr.net/npm/simple-icons@9.21.0/icons/linkedin.svg" };
+function wn(e) {
+	if (Cn[e]) return Cn[e];
+	let t = Sn[e] ?? Sn.facebook;
 	return `https://cdn.simpleicons.org/${t.slug}/${t.color}`;
 }
-function yn(e) {
+function Tn(e) {
 	if (Array.isArray(e)) return e;
 	if (typeof e == "string") try {
 		return JSON.parse(e);
@@ -2152,14 +2232,14 @@ function yn(e) {
 	}
 	return [];
 }
-var bn = g.create({
+var En = _.create({
 	name: "socialLinks",
 	group: "block",
 	atom: !0,
 	selectable: !0,
 	addAttributes() {
 		return {
-			...mn,
+			...bn,
 			links: {
 				default: [
 					{
@@ -2179,7 +2259,7 @@ var bn = g.create({
 						url: "https://linkedin.com/"
 					}
 				],
-				parseHTML: (e) => yn(e.dataset.links),
+				parseHTML: (e) => Tn(e.dataset.links),
 				renderHTML: (e) => ({ "data-links": JSON.stringify(e.links ?? []) })
 			},
 			size: { default: 28 },
@@ -2191,10 +2271,10 @@ var bn = g.create({
 		return [{ tag: "div[data-type=\"social-links\"]" }];
 	},
 	renderHTML({ node: e, HTMLAttributes: t }) {
-		let n = Number(e.attrs.size), r = Number(e.attrs.gap), i = yn(e.attrs.links);
+		let n = Number(e.attrs.size), r = Number(e.attrs.gap), i = Tn(e.attrs.links);
 		return [
 			"div",
-			te(t, {
+			re(t, {
 				"data-type": "social-links",
 				class: "node-socialLinks",
 				alignment: e.attrs.alignment
@@ -2206,37 +2286,37 @@ var bn = g.create({
 					style: `margin-left:${t === 0 ? 0 : r}px`
 				},
 				["img", {
-					src: vn(e.network),
+					src: wn(e.network),
 					width: String(n),
 					height: String(n),
-					alt: gn[e.network]?.label ?? e.network
+					alt: Sn[e.network]?.label ?? e.network
 				}]
 			])
 		];
 	},
 	renderToReactEmail({ node: e }) {
-		let t = Number(e.attrs?.size ?? 28), n = Number(e.attrs?.gap ?? 12), r = yn(e.attrs?.links), i = e.attrs?.alignment ?? "center";
-		return /* @__PURE__ */ I(Le, {
-			style: pn(e.attrs?.style),
-			children: /* @__PURE__ */ I(Ie, { children: /* @__PURE__ */ I(Ne, {
+		let t = Number(e.attrs?.size ?? 28), n = Number(e.attrs?.gap ?? 12), r = Tn(e.attrs?.links), i = e.attrs?.alignment ?? "center";
+		return /* @__PURE__ */ L(ze, {
+			style: yn(e.attrs?.style),
+			children: /* @__PURE__ */ L(Re, { children: /* @__PURE__ */ L(Fe, {
 				align: i,
-				children: r.map((e, r) => /* @__PURE__ */ I(Fe, {
+				children: r.map((e, r) => /* @__PURE__ */ L(Le, {
 					href: e.url,
 					style: {
 						display: "inline-block",
 						marginLeft: r === 0 ? 0 : n
 					},
-					children: /* @__PURE__ */ I(Pe, {
-						src: vn(e.network),
+					children: /* @__PURE__ */ L(Ie, {
+						src: wn(e.network),
 						width: t,
 						height: t,
-						alt: gn[e.network]?.label ?? e.network
+						alt: Sn[e.network]?.label ?? e.network
 					})
 				}, `${e.network}-${r}`))
 			}) })
 		});
 	}
-}), xn = g.create({
+}), Dn = _.create({
 	name: "htmlBlock",
 	group: "block",
 	atom: !0,
@@ -2252,7 +2332,7 @@ var bn = g.create({
 		return [{ tag: "div[data-type=\"html-block\"]" }];
 	},
 	renderHTML({ node: e, HTMLAttributes: t }) {
-		return ["div", te(t, {
+		return ["div", re(t, {
 			"data-type": "html-block",
 			class: "node-htmlBlock",
 			"data-html": e.attrs.html
@@ -2271,49 +2351,49 @@ var bn = g.create({
 		};
 	},
 	renderToReactEmail({ node: e }) {
-		return /* @__PURE__ */ I("div", { dangerouslySetInnerHTML: { __html: e.attrs?.html ?? "" } });
+		return /* @__PURE__ */ L("div", { dangerouslySetInnerHTML: { __html: e.attrs?.html ?? "" } });
 	}
 });
 //#endregion
 //#region src/components/inspectors/SocialLinksInspector.tsx
-function Sn({ ctx: e, className: t, style: n }) {
+function On({ ctx: e, className: t, style: n }) {
 	let r = $().inspector, i = e.getAttr("links"), a = Array.isArray(i) ? i : [], o = (t) => e.setAttr("links", t);
-	return /* @__PURE__ */ L("div", {
-		className: R("bree-inspector", t),
+	return /* @__PURE__ */ R("div", {
+		className: z("bree-inspector", t),
 		style: n,
 		children: [
-			/* @__PURE__ */ L(V, {
+			/* @__PURE__ */ R(V, {
 				title: r.networks,
-				children: [/* @__PURE__ */ I("div", {
+				children: [/* @__PURE__ */ L("div", {
 					className: "bree-social-list",
-					children: a.map((e, t) => /* @__PURE__ */ L("div", {
+					children: a.map((e, t) => /* @__PURE__ */ R("div", {
 						className: "bree-social-row",
 						children: [
-							/* @__PURE__ */ I(Zt, {
+							/* @__PURE__ */ L(rn, {
 								value: e.network,
 								onChange: (e) => o(a.map((n, r) => r === t ? {
 									...n,
 									network: e
 								} : n)),
-								options: Object.entries(gn).map(([e, t]) => [e, t.label])
+								options: Object.entries(Sn).map(([e, t]) => [e, t.label])
 							}),
-							/* @__PURE__ */ I(U, {
+							/* @__PURE__ */ L(U, {
 								value: e.url,
 								onChange: (e) => o(a.map((n, r) => r === t ? {
 									...n,
 									url: e
 								} : n))
 							}),
-							/* @__PURE__ */ I("button", {
+							/* @__PURE__ */ L("button", {
 								type: "button",
 								className: "bree-icon-button",
 								title: r.removeNetwork,
 								onClick: () => o(a.filter((e, n) => n !== t)),
-								children: /* @__PURE__ */ I(Oe, { size: 14 })
+								children: /* @__PURE__ */ L(Ae, { size: 14 })
 							})
 						]
 					}, t))
-				}), /* @__PURE__ */ I("button", {
+				}), /* @__PURE__ */ L("button", {
 					type: "button",
 					className: "bree-button-like",
 					onClick: () => o([...a, {
@@ -2323,68 +2403,68 @@ function Sn({ ctx: e, className: t, style: n }) {
 					children: r.addNetwork
 				})]
 			}),
-			/* @__PURE__ */ L(V, {
+			/* @__PURE__ */ R(V, {
 				title: r.appearance,
 				children: [
-					/* @__PURE__ */ I(H, {
+					/* @__PURE__ */ L(H, {
 						label: r.iconSize,
-						children: /* @__PURE__ */ I(Jt, {
+						children: /* @__PURE__ */ L(en, {
 							value: e.getAttr("size"),
 							min: 16,
 							max: 64,
 							onChange: (t) => e.setAttr("size", t)
 						})
 					}),
-					/* @__PURE__ */ I(H, {
+					/* @__PURE__ */ L(H, {
 						label: r.gap,
-						children: /* @__PURE__ */ I(Jt, {
+						children: /* @__PURE__ */ L(en, {
 							value: e.getAttr("gap"),
 							min: 0,
 							max: 40,
 							onChange: (t) => e.setAttr("gap", t)
 						})
 					}),
-					/* @__PURE__ */ I(H, {
+					/* @__PURE__ */ L(H, {
 						label: r.alignment,
-						children: /* @__PURE__ */ I($t, {
+						children: /* @__PURE__ */ L(sn, {
 							value: String(e.getAttr("alignment") ?? "center"),
 							onChange: (t) => e.setAttr("alignment", t)
 						})
 					})
 				]
 			}),
-			/* @__PURE__ */ I(nn, { ctx: e })
+			/* @__PURE__ */ L(q, { ctx: e })
 		]
 	});
 }
 //#endregion
 //#region src/registry/default-nodes.tsx
-function Cn(e, t = 36) {
+function kn(e, t = 36) {
 	let n = e.replace(/\s+/g, " ").trim();
 	return n.length > t ? `${n.slice(0, t)}…` : n;
 }
-var wn = (e, { t }) => Cn(e.textContent) || t.layers.empty, Tn = () => "", En = [
+var An = (e, { t }) => kn(e.textContent) || t.layers.empty, jn = () => "", Mn = [
 	{
 		type: "paragraph",
-		icon: Ee
+		icon: Oe
 	},
 	{
 		type: "heading",
-		icon: de,
-		inspector: sn
+		icon: pe,
+		inspector: pn
 	},
 	{
 		type: "image",
-		icon: fe,
-		inspector: cn,
+		icon: me,
+		inspector: mn,
 		preview: (e, { t }) => {
 			let { attrs: n } = e;
-			if (n.alt) return Cn(n.alt);
+			if (n.alt) return kn(n.alt);
 			let r = String(n.src ?? "");
 			if (r.startsWith("data:")) return t.layers.uploadedImage;
 			try {
 				let e = new URL(r);
-				return Cn(e.searchParams.get("text") ?? decodeURIComponent(e.pathname.split("/").pop() ?? ""));
+				return kn(e.searchParams.get("text") ?? decodeURIComponent(e.pathname.split("/").pop() ?? ""));
 			} catch {
 				return "";
 			}
@@ -2392,124 +2472,124 @@ var wn = (e, { t }) => Cn(e.textContent) || t.layers.empty, Tn = () => "", En =
 	},
 	{
 		type: "button",
-		icon: ye,
-		inspector: an
+		icon: xe,
+		inspector: dn
 	},
 	{
 		type: "horizontalRule",
-		icon: ve,
-		inspector: dn,
-		preview: Tn
+		icon: be,
+		inspector: _n,
+		preview: jn
 	},
 	{
 		type: "spacer",
-		icon: Vt,
-		inspector: ln,
+		icon: qt,
+		inspector: hn,
 		preview: (e) => `${e.attrs.height}px`,
-		extensions: [hn]
+		extensions: [xn]
 	},
 	{
 		type: "socialLinks",
-		icon: he,
-		inspector: Sn,
+		icon: _e,
+		inspector: On,
 		preview: (e) => Array.isArray(e.attrs.links) ? e.attrs.links.map((e) => e.network).join(", ") : "",
-		extensions: [bn]
+		extensions: [En]
 	},
 	{
 		type: "htmlBlock",
-		icon: Ce,
-		inspector: un,
-		preview: (e) => Cn(String(e.attrs.html ?? "").replace(/<[^>]+>/g, " ")),
-		extensions: [xn]
+		icon: we,
+		inspector: gn,
+		preview: (e) => kn(String(e.attrs.html ?? "").replace(/<[^>]+>/g, " ")),
+		extensions: [Dn]
 	},
 	{
 		type: "section",
-		icon: me,
-		inspector: fn,
-		preview: Tn
+		icon: ge,
+		inspector: vn,
+		preview: jn
 	},
 	{
 		type: "columnsColumn",
-		icon: be,
-		inspector: fn,
-		preview: Tn
+		icon: P,
+		inspector: vn,
+		preview: jn
 	},
 	{
 		type: "twoColumns",
-		icon: ce,
-		inspector: on,
-		preview: Tn
+		icon: ue,
+		inspector: fn,
+		preview: jn
 	},
 	{
 		type: "threeColumns",
-		icon: le,
-		inspector: on,
-		preview: Tn
+		icon: de,
+		inspector: fn,
+		preview: jn
 	},
 	{
 		type: "fourColumns",
-		icon: ue,
-		inspector: on,
-		preview: Tn
+		icon: fe,
+		inspector: fn,
+		preview: jn
 	},
 	{
 		type: "bulletList",
-		icon: ge
+		icon: ve
 	},
 	{
 		type: "orderedList",
-		icon: _e
+		icon: ye
 	},
 	{
 		type: "blockquote",
-		icon: Te
+		icon: De
 	},
 	{
 		type: "codeBlock",
-		icon: A
+		icon: le
 	},
 	{
 		type: "table",
-		icon: we
+		icon: Ee
 	}
-], Dn = /* @__PURE__ */ Be({
-	button: () => On,
-	column: () => An,
+], Nn = /* @__PURE__ */ He({
+	button: () => Fn,
+	column: () => Ln,
 	columns: () => X,
-	doc: () => In,
-	heading: () => Y,
-	image: () => kn,
-	link: () => Pn,
-	padding: () => Nn,
-	paragraph: () => J,
-	placeholderImage: () => Fn,
-	section: () => Mn,
-	sized: () => jn,
-	text: () => q
-}), q = (e, t) => ({
+	doc: () => Un,
+	heading: () => Pn,
+	image: () => In,
+	link: () => Vn,
+	padding: () => Bn,
+	paragraph: () => Y,
+	placeholderImage: () => Hn,
+	section: () => zn,
+	sized: () => Rn,
+	text: () => J
+}), J = (e, t) => ({
 	type: "text",
 	text: e,
 	...t ? { marks: t } : {}
-}), J = (e = "", t = {}) => ({
+}), Y = (e = "", t = {}) => ({
 	type: "paragraph",
 	attrs: t,
-	content: typeof e == "string" ? e ? [q(e)] : [] : e
-}), Y = (e, t, n = {}) => ({
+	content: typeof e == "string" ? e ? [J(e)] : [] : e
+}), Pn = (e, t, n = {}) => ({
 	type: "heading",
 	attrs: {
 		level: e,
 		...n
 	},
-	content: [q(t)]
-}), On = (e, t = {}) => ({
+	content: [J(t)]
+}), Fn = (e, t = {}) => ({
 	type: "button",
 	attrs: {
 		href: "https://example.com",
 		alignment: "center",
 		...t
 	},
-	content: [q(e)]
-}), kn = (e, t = {}) => ({
+	content: [J(e)]
+}), In = (e, t = {}) => ({
 	type: "image",
 	attrs: {
 		src: e,
@@ -2517,10 +2597,10 @@ var wn = (e, { t }) => Cn(e.textContent) || t.layers.empty, Tn = () => "", En =
 		alignment: "center",
 		...t
 	}
-}), An = (...e) => ({
+}), Ln = (...e) => ({
 	type: "columnsColumn",
-	content: e.length ? e : [J()]
-}), jn = (e, t) => ({
+	content: e.length ? e : [Y()]
+}), Rn = (e, t) => ({
 	...e,
 	attrs: {
 		...e.attrs,
@@ -2533,100 +2613,100 @@ var wn = (e, { t }) => Cn(e.textContent) || t.layers.empty, Tn = () => "", En =
 		4: "fourColumns"
 	}[e],
 	...n ? { attrs: n } : {},
-	content: t ?? Array.from({ length: e }, () => An())
-}), Mn = (e, ...t) => ({
+	content: t ?? Array.from({ length: e }, () => Ln())
+}), zn = (e, ...t) => ({
 	type: "section",
 	attrs: { style: e },
 	content: t
-}), Nn = (e, t = e) => `padding-top:${e}px;padding-right:${t}px;padding-bottom:${e}px;padding-left:${t}px`, Pn = (e) => [{
+}), Bn = (e, t = e) => `padding-top:${e}px;padding-right:${t}px;padding-bottom:${e}px;padding-left:${t}px`, Vn = (e) => [{
 	type: "link",
 	attrs: { href: e }
-}], Fn = (e, t, n = "Image") => `https://placehold.co/${e}x${t}/e2e8f0/64748b/png?text=${encodeURIComponent(n)}`, In = (...e) => ({
+}], Hn = (e, t, n = "Image") => `https://placehold.co/${e}x${t}/e2e8f0/64748b/png?text=${encodeURIComponent(n)}`, Un = (...e) => ({
 	type: "doc",
 	content: e
-}), Ln = ({ t: e }, t = "center") => J([
-	q(e.content.menuHome, Pn("https://example.com")),
-	q("  ·  "),
-	q(e.content.menuShop, Pn("https://example.com/shop")),
-	q("  ·  "),
-	q(e.content.menuBlog, Pn("https://example.com/blog")),
-	q("  ·  "),
-	q(e.content.menuContact, Pn("https://example.com/contact"))
-], { alignment: t }), Rn = [{
+}), Wn = ({ t: e }, t = "center") => Y([
+	J(e.content.menuHome, Vn("https://example.com")),
+	J("  ·  "),
+	J(e.content.menuShop, Vn("https://example.com/shop")),
+	J("  ·  "),
+	J(e.content.menuBlog, Vn("https://example.com/blog")),
+	J("  ·  "),
+	J(e.content.menuContact, Vn("https://example.com/contact"))
+], { alignment: t }), Gn = [{
 	id: "layout",
 	title: ({ t: e }) => e.sidebar.layoutTitle
 }, {
 	id: "content",
 	title: ({ t: e }) => e.sidebar.contentTitle
-}], zn = [
+}], Kn = [
 	{
 		id: "section",
 		group: "layout",
 		label: ({ t: e }) => e.palette.oneColumn,
-		icon: /* @__PURE__ */ I(Wt, {}),
-		content: () => [Mn(Nn(16), J())]
+		icon: /* @__PURE__ */ L(Xt, {}),
+		content: () => [zn(Bn(16), Y())]
 	},
 	{
 		id: "columns-2",
 		group: "layout",
 		label: ({ t: e }) => e.palette.twoColumns,
-		icon: /* @__PURE__ */ I(ce, { size: 22 }),
+		icon: /* @__PURE__ */ L(ue, { size: 22 }),
 		content: () => [X(2)]
 	},
 	{
 		id: "columns-3",
 		group: "layout",
 		label: ({ t: e }) => e.palette.threeColumns,
-		icon: /* @__PURE__ */ I(le, { size: 22 }),
+		icon: /* @__PURE__ */ L(de, { size: 22 }),
 		content: () => [X(3)]
 	},
 	{
 		id: "columns-4",
 		group: "layout",
 		label: ({ t: e }) => e.palette.fourColumns,
-		icon: /* @__PURE__ */ I(ue, { size: 22 }),
+		icon: /* @__PURE__ */ L(fe, { size: 22 }),
 		content: () => [X(4)]
 	},
 	{
 		id: "heading",
 		group: "content",
 		label: ({ t: e }) => e.palette.heading,
-		icon: /* @__PURE__ */ I(de, { size: 22 }),
-		content: ({ t: e }) => [Y(2, e.content.heading)]
+		icon: /* @__PURE__ */ L(pe, { size: 22 }),
+		content: ({ t: e }) => [Pn(2, e.content.heading)]
 	},
 	{
 		id: "text",
 		group: "content",
 		label: ({ t: e }) => e.palette.text,
-		icon: /* @__PURE__ */ I(Ee, { size: 22 }),
-		content: ({ t: e }) => [J(e.content.text)]
+		icon: /* @__PURE__ */ L(Oe, { size: 22 }),
+		content: ({ t: e }) => [Y(e.content.text)]
 	},
 	{
 		id: "button",
 		group: "content",
 		label: ({ t: e }) => e.palette.button,
-		icon: /* @__PURE__ */ I(ye, { size: 22 }),
-		content: ({ t: e }) => [On(e.content.button)]
+		icon: /* @__PURE__ */ L(xe, { size: 22 }),
+		content: ({ t: e }) => [Fn(e.content.button)]
 	},
 	{
 		id: "image",
 		group: "content",
 		label: ({ t: e }) => e.palette.image,
-		icon: /* @__PURE__ */ I(fe, { size: 22 }),
-		content: ({ t: e }) => [kn(Fn(600, 300, e.content.image))]
+		icon: /* @__PURE__ */ L(me, { size: 22 }),
+		content: ({ t: e }) => [In(Hn(600, 300, e.content.image))]
 	},
 	{
 		id: "divider",
 		group: "content",
 		label: ({ t: e }) => e.palette.divider,
-		icon: /* @__PURE__ */ I(ve, { size: 22 }),
+		icon: /* @__PURE__ */ L(be, { size: 22 }),
 		content: () => [{ type: "horizontalRule" }]
 	},
 	{
 		id: "spacer",
 		group: "content",
 		label: ({ t: e }) => e.palette.spacer,
-		icon: /* @__PURE__ */ I(Ht, {}),
+		icon: /* @__PURE__ */ L(Jt, {}),
 		content: () => [{
 			type: "spacer",
 			attrs: { height: 32 }
@@ -2636,26 +2716,26 @@ var wn = (e, { t }) => Cn(e.textContent) || t.layers.empty, Tn = () => "", En =
 		id: "social",
 		group: "content",
 		label: ({ t: e }) => e.palette.social,
-		icon: /* @__PURE__ */ I(Ut, {}),
+		icon: /* @__PURE__ */ L(Yt, {}),
 		content: () => [{ type: "socialLinks" }]
 	},
 	{
 		id: "menu",
 		group: "content",
 		label: ({ t: e }) => e.palette.menu,
-		icon: /* @__PURE__ */ I(xe, { size: 22 }),
-		content: (e) => [Ln(e)]
+		icon: /* @__PURE__ */ L(Se, { size: 22 }),
+		content: (e) => [Wn(e)]
 	},
 	{
 		id: "list",
 		group: "content",
 		label: ({ t: e }) => e.palette.list,
-		icon: /* @__PURE__ */ I(ge, { size: 22 }),
+		icon: /* @__PURE__ */ L(ve, { size: 22 }),
 		content: ({ t: e }) => [{
 			type: "bulletList",
 			content: e.content.listItems.map((e) => ({
 				type: "listItem",
-				content: [J(e)]
+				content: [Y(e)]
 			}))
 		}]
 	},
@@ -2663,17 +2743,17 @@ var wn = (e, { t }) => Cn(e.textContent) || t.layers.empty, Tn = () => "", En =
 		id: "quote",
 		group: "content",
 		label: ({ t: e }) => e.palette.quote,
-		icon: /* @__PURE__ */ I(Te, { size: 22 }),
+		icon: /* @__PURE__ */ L(De, { size: 22 }),
 		content: ({ t: e }) => [{
 			type: "blockquote",
-			content: [J(e.content.quote)]
+			content: [Y(e.content.quote)]
 		}]
 	},
 	{
 		id: "html",
 		group: "content",
 		label: ({ t: e }) => e.palette.html,
-		icon: /* @__PURE__ */ I(Ce, { size: 22 }),
+		icon: /* @__PURE__ */ L(we, { size: 22 }),
 		content: ({ t: e }) => [{
 			type: "htmlBlock",
 			attrs: { html: e.content.html }
@@ -2683,64 +2763,64 @@ var wn = (e, { t }) => Cn(e.textContent) || t.layers.empty, Tn = () => "", En =
 		id: "card",
 		group: "content",
 		label: ({ t: e }) => e.palette.card,
-		icon: /* @__PURE__ */ I(me, { size: 22 }),
-		content: ({ t: e }) => [Mn(`${Nn(24)};background-color:#f1f5f9;border-radius:12px`, Y(3, e.content.cardTitle), J(e.content.cardText))]
+		icon: /* @__PURE__ */ L(ge, { size: 22 }),
+		content: ({ t: e }) => [zn(`${Bn(24)};background-color:#f1f5f9;border-radius:12px`, Pn(3, e.content.cardTitle), Y(e.content.cardText))]
 	}
 ];
 //#endregion
 //#region src/registry/default-templates.tsx
 function Z({ variant: e }) {
-	return /* @__PURE__ */ L("span", {
+	return /* @__PURE__ */ R("span", {
 		className: `bree-block-thumb bree-thumb-${e}`,
 		"aria-hidden": !0,
 		children: [
-			/* @__PURE__ */ I("i", {}),
-			/* @__PURE__ */ I("i", {}),
-			/* @__PURE__ */ I("i", {})
+			/* @__PURE__ */ L("i", {}),
+			/* @__PURE__ */ L("i", {}),
+			/* @__PURE__ */ L("i", {})
 		]
 	});
 }
-var Bn = [
+var qn = [
 	{
 		id: "header",
 		label: ({ t: e }) => e.templates.header,
 		description: ({ t: e }) => e.templates.headerDescription,
-		thumbnail: /* @__PURE__ */ I(Z, { variant: "header" }),
-		content: (e) => [X(2, [jn(An(kn(Fn(140, 40, e.t.content.logo), {
+		thumbnail: /* @__PURE__ */ L(Z, { variant: "header" }),
+		content: (e) => [X(2, [Rn(Ln(In(Hn(140, 40, e.t.content.logo), {
 			alignment: "left",
 			width: "140"
-		})), 33), jn(An(Ln(e, "right")), 67)])]
+		})), 33), Rn(Ln(Wn(e, "right")), 67)])]
 	},
 	{
 		id: "hero",
 		label: ({ t: e }) => e.templates.hero,
 		description: ({ t: e }) => e.templates.heroDescription,
-		thumbnail: /* @__PURE__ */ I(Z, { variant: "hero" }),
-		content: ({ t: e }) => [Mn(`${Nn(40, 24)};background-color:#eef2ff;border-radius:12px`, Y(1, e.content.heroTitle, { alignment: "center" }), J(e.content.heroText, { alignment: "center" }), On(e.content.heroButton, { style: `background-color:#4f46e5;color:#ffffff;${Nn(12, 24)};border-radius:8px` }))]
+		thumbnail: /* @__PURE__ */ L(Z, { variant: "hero" }),
+		content: ({ t: e }) => [zn(`${Bn(40, 24)};background-color:#eef2ff;border-radius:12px`, Pn(1, e.content.heroTitle, { alignment: "center" }), Y(e.content.heroText, { alignment: "center" }), Fn(e.content.heroButton, { style: `background-color:#4f46e5;color:#ffffff;${Bn(12, 24)};border-radius:8px` }))]
 	},
 	{
 		id: "products",
 		label: ({ t: e }) => e.templates.products,
 		description: ({ t: e }) => e.templates.productsDescription,
-		thumbnail: /* @__PURE__ */ I(Z, { variant: "products" }),
-		content: ({ t: e }) => [X(2, [e.content.productA, e.content.productB].map((t) => An(kn(Fn(280, 200, t)), Y(3, t, { alignment: "center" }), J(e.content.productText, { alignment: "center" }), On(e.content.productButton))), { cellspacing: 16 })]
+		thumbnail: /* @__PURE__ */ L(Z, { variant: "products" }),
+		content: ({ t: e }) => [X(2, [e.content.productA, e.content.productB].map((t) => Ln(In(Hn(280, 200, t)), Pn(3, t, { alignment: "center" }), Y(e.content.productText, { alignment: "center" }), Fn(e.content.productButton))), { cellspacing: 16 })]
 	},
 	{
 		id: "features",
 		label: ({ t: e }) => e.templates.features,
 		description: ({ t: e }) => e.templates.featuresDescription,
-		thumbnail: /* @__PURE__ */ I(Z, { variant: "features" }),
-		content: ({ t: e }) => [X(3, e.content.features.map((t) => An(Y(3, t, { alignment: "center" }), J(e.content.featureText, { alignment: "center" }))))]
+		thumbnail: /* @__PURE__ */ L(Z, { variant: "features" }),
+		content: ({ t: e }) => [X(3, e.content.features.map((t) => Ln(Pn(3, t, { alignment: "center" }), Y(e.content.featureText, { alignment: "center" }))))]
 	},
 	{
 		id: "testimonial",
 		label: ({ t: e }) => e.templates.testimonial,
 		description: ({ t: e }) => e.templates.testimonialDescription,
-		thumbnail: /* @__PURE__ */ I(Z, { variant: "testimonial" }),
-		content: ({ t: e }) => [Mn(`${Nn(24)};background-color:#f8fafc;border-radius:12px`, {
+		thumbnail: /* @__PURE__ */ L(Z, { variant: "testimonial" }),
+		content: ({ t: e }) => [zn(`${Bn(24)};background-color:#f8fafc;border-radius:12px`, {
 			type: "blockquote",
-			content: [J(e.content.testimonialQuote)]
-		}, J(e.content.testimonialAuthor, {
+			content: [Y(e.content.testimonialQuote)]
+		}, Y(e.content.testimonialAuthor, {
 			alignment: "right",
 			style: "color:#64748b"
 		}))]
@@ -2749,22 +2829,22 @@ var Bn = [
 		id: "footer",
 		label: ({ t: e }) => e.templates.footer,
 		description: ({ t: e }) => e.templates.footerDescription,
-		thumbnail: /* @__PURE__ */ I(Z, { variant: "footer" }),
+		thumbnail: /* @__PURE__ */ L(Z, { variant: "footer" }),
 		content: ({ t: e }) => [
 			{ type: "horizontalRule" },
 			{ type: "socialLinks" },
-			J(e.content.footerAddress, {
+			Y(e.content.footerAddress, {
 				alignment: "center",
 				style: "color:#94a3b8;font-size:12px"
 			}),
-			J([q(e.content.unsubscribe, Pn("https://example.com/unsubscribe"))], {
+			Y([J(e.content.unsubscribe, Vn("https://example.com/unsubscribe"))], {
 				alignment: "center",
 				style: "font-size:12px"
 			})
 		]
 	}
-], Vn = (e, t) => Bn.find((t) => t.id === e)?.content(t) ?? [];
-function Hn(e) {
+], Jn = (e, t) => qn.find((t) => t.id === e)?.content(t) ?? [];
+function Yn(e) {
 	let t = {
 		type: "spacer",
 		attrs: { height: 16 }
@@ -2772,39 +2852,39 @@ function Hn(e) {
 	return {
 		type: "doc",
 		content: [
-			...Vn("header", e),
+			...Jn("header", e),
 			t,
-			...Vn("hero", e),
+			...Jn("hero", e),
 			t,
-			Y(2, e.t.content.starterTitle, { alignment: "center" }),
-			...Vn("products", e),
+			Pn(2, e.t.content.starterTitle, { alignment: "center" }),
+			...Jn("products", e),
 			t,
-			...Vn("footer", e)
+			...Jn("footer", e)
 		]
 	};
 }
 //#endregion
 //#region src/context.tsx
-var Un = e(null);
+var Xn = e(null);
 function Q() {
-	let e = r(Un);
+	let e = r(Xn);
 	if (!e) throw Error("useEmailEditor must be used inside <EditorRoot> or <BetterEmailEditor>.");
 	return e;
 }
-function Wn() {
-	return r(Un);
+function Zn() {
+	return r(Xn);
 }
 function $() {
-	return r(Un)?.t ?? Ct;
+	return r(Xn)?.t ?? kt;
 }
-function Gn() {
+function Qn() {
 	let { locale: e, t } = Q();
-	return s(() => ({
+	return c(() => ({
 		locale: e,
 		t
 	}), [e, t]);
 }
-var Kn = x("basic", {
+var $n = S("basic", {
 	body: {
 		backgroundColor: "#eef1f5",
 		padding: "32px 16px"
@@ -2814,141 +2894,147 @@ var Kn = x("basic", {
 		padding: "24px",
 		borderRadius: "12px"
 	}
-}), qn = (e) => new Promise((t, n) => {
+}), er = (e) => new Promise((t, n) => {
 	let r = new FileReader();
 	r.onload = () => t({ url: String(r.result) }), r.onerror = n, r.readAsDataURL(e);
-}), Jn = {
+}), tr = {
 	type: "doc",
 	content: [{ type: "paragraph" }]
 };
-function Yn(e) {
+function nr(e) {
 	return typeof e == "object" && !!e && "doc" in e;
 }
-function Xn(e) {
-	return e ? Yn(e) ? {
+function rr(e) {
+	let t = {
+		subject: "",
+		previewText: ""
+	};
+	return e ? nr(e) ? {
 		doc: e.doc,
 		settings: {
+			...t,
 			...e.settings,
 			previewText: e.settings?.previewText ?? ""
 		}
 	} : {
 		doc: e,
-		settings: { previewText: "" }
+		settings: t
 	} : {
-		doc: Jn,
-		settings: { previewText: "" }
+		doc: tr,
+		settings: t
 	};
 }
-function Zn(e, t, r) {
-	let [i, a] = l(t);
+function ir(e, t, r) {
+	let [i, a] = u(t);
 	return [e === void 0 ? i : e, n((t) => {
 		e === void 0 && a(t), r?.(t);
 	}, [e, r])];
 }
-var Qn = t(function({ defaultValue: e, onChange: t, onReady: r, locale: u = "en", messages: f, nodes: h = En, palette: g = zn, paletteGroups: v = Rn, templates: x = Bn, starterDocument: C = Hn, extensions: w, theme: T = Kn, uploadImage: E = qn, editable: D = !0, device: O, defaultDevice: ee = "desktop", onDeviceChange: k, layersOpen: te, defaultLayersOpen: ne = !0, onLayersOpenChange: re, className: ie, style: ae, children: oe }, se) {
-	let A = s(() => kt(u, f), [u, f]), [ce] = l(() => Xn(e)), [le, ue] = l(ce.settings), j = c(le), de = c(A), fe = c(t), M = c(r), pe = c(E);
-	o(() => {
-		de.current = A, fe.current = t, M.current = r, pe.current = E;
+var ar = t(function({ defaultValue: e, onChange: t, onReady: r, locale: a = "en", messages: d, nodes: p = Mn, palette: g = Kn, paletteGroups: _ = Gn, templates: y = qn, fonts: S = wt, starterDocument: C = Yn, extensions: w, theme: E = $n, uploadImage: D = er, editable: O = !0, device: ee, defaultDevice: k = "desktop", onDeviceChange: A, layersOpen: te, defaultLayersOpen: ne = !0, onLayersOpenChange: re, className: ie, style: ae, children: oe }, se) {
+	let j = c(() => Ft(a, d), [a, d]), [ce] = u(() => rr(e)), [le, ue] = u(ce.settings), de = l(le), fe = l(j), M = l(t), pe = l(r), me = l(D);
+	s(() => {
+		fe.current = j, M.current = t, pe.current = r, me.current = D;
 	});
-	let [me, he] = Zn(O, ee, k), [ge, _e] = Zn(te, ne, re), [ve] = l(() => ({
-		dragSession: xt(),
-		hoverStore: St()
-	})), ye = n((e) => pe.current(e), []), be = S({ uploadImage: ye }), [xe] = l(() => [
-		y.configure({
+	let [N, he] = ir(ee, k, A), [ge, _e] = ir(te, ne, re), [ve] = u(() => ({
+		dragSession: Dt(),
+		hoverStore: Ot()
+	})), ye = n((e) => me.current(e), []), be = T({ uploadImage: ye }), [xe] = u(() => [
+		b.configure({
 			TiptapStarterKit: { dropcursor: !1 },
 			Button: !1
 		}),
-		ct,
-		bt,
-		d.configure({
-			placeholder: ({ node: e }) => e.type.name === "heading" ? de.current.placeholder.heading : de.current.placeholder.paragraph,
+		dt,
+		Ct,
+		f.configure({
+			placeholder: ({ node: e }) => e.type.name === "heading" ? fe.current.placeholder.heading : fe.current.placeholder.paragraph,
 			includeChildren: !0
 		}),
-		b.configure({ theme: T }),
-		...h.flatMap((e) => e.extensions ?? []),
+		x.configure({ theme: E }),
+		...p.flatMap((e) => e.extensions ?? []),
 		...w ?? [],
 		be
-	]), N = m({
+	]), P = h({
 		extensions: xe,
 		content: ce.doc,
-		editable: D,
+		editable: O,
 		immediatelyRender: !1,
-		editorProps: { handlePaste: vt(xe) }
+		editorProps: { handlePaste: xt(xe) }
 	}, []);
 	i(() => {
-		N?.setEditable(D);
-	}, [N, D]);
+		P?.setEditable(O);
+	}, [P, O]);
 	let Se = n(() => ({
-		doc: N?.getJSON() ?? Jn,
-		settings: j.current
-	}), [N]), Ce = n((e) => {
+		doc: P?.getJSON() ?? tr,
+		settings: de.current
+	}), [P]), Ce = n((e) => {
 		let t = {
-			...j.current,
+			...de.current,
 			...e
 		};
-		j.current = t, ue(t), N && fe.current?.({
-			doc: N.getJSON(),
+		de.current = t, ue(t), P && M.current?.({
+			doc: P.getJSON(),
 			settings: t
 		});
-	}, [N]), P = s(() => {
-		let e = async () => N ? _({
-			editor: N,
-			preview: j.current.previewText || void 0
+	}, [P]), F = c(() => {
+		let e = async () => P ? v({
+			editor: P,
+			preview: de.current.previewText || void 0
 		}) : {
 			html: "",
 			text: "",
 			unformattedHtml: ""
 		};
 		return {
-			editor: N,
+			editor: P,
 			getValue: Se,
-			getJSON: () => N?.getJSON() ?? Jn,
+			getJSON: () => P?.getJSON() ?? tr,
 			setValue: (e) => {
-				let t = Xn(e);
-				j.current = t.settings, ue(t.settings), N?.commands.setContent(t.doc, { emitUpdate: !0 });
+				let t = rr(e);
+				de.current = t.settings, ue(t.settings), P?.commands.setContent(t.doc, { emitUpdate: !0 });
 			},
 			exportEmail: e,
 			getHtml: async () => (await e()).html,
 			getText: async () => (await e()).text,
 			insertBlocks: (e) => {
-				N && st(N, e);
+				P && ut(P, e);
 			}
 		};
-	}, [N, Se]);
-	a(se, () => P, [P]), i(() => {
-		if (!N) return;
-		M.current?.(P);
-		let e = () => fe.current?.(Se());
-		return N.on("update", e), () => {
-			N.off("update", e);
+	}, [P, Se]);
+	o(se, () => F, [F]), i(() => {
+		if (!P) return;
+		pe.current?.(F);
+		let e = () => M.current?.(Se());
+		return P.on("update", e), () => {
+			P.off("update", e);
 		};
 	}, [
-		N,
 		P,
+		F,
 		Se
 	]);
-	let we = s(() => new Map(h.map((e) => [e.type, e])), [h]), Te = s(() => {
-		if (!N) return null;
+	let we = c(() => new Map(p.map((e) => [e.type, e])), [p]), Te = c(() => {
+		if (!P) return null;
 		let e = {
-			locale: u,
-			t: A
+			locale: a,
+			t: j
 		};
 		return {
 			...e,
-			editor: N,
-			handle: P,
+			editor: P,
+			handle: F,
 			nodes: we,
 			nodeLabel: (t) => {
 				let n = we.get(t)?.label;
-				return n ? Et(n, e) : A.nodes[t] ?? t;
+				return n ? Mt(n, e) : j.nodes[t] ?? t;
 			},
 			palette: g,
-			paletteGroups: v,
-			templates: x,
+			paletteGroups: _,
+			templates: y,
+			fonts: S,
 			starterDocument: C,
 			uploadImage: ye,
 			...ve,
-			device: me,
+			device: N,
 			setDevice: he,
 			layersOpen: ge,
 			setLayersOpen: _e,
@@ -2956,34 +3042,35 @@ var Qn = t(function({ defaultValue: e, onChange: t, onReady: r, locale: u = "en"
 			updateSettings: Ce
 		};
 	}, [
-		N,
-		u,
-		A,
 		P,
+		a,
+		j,
+		F,
 		we,
 		g,
-		v,
-		x,
+		_,
+		y,
+		S,
 		C,
 		ye,
 		ve,
-		me,
+		N,
 		he,
 		ge,
 		_e,
 		le,
 		Ce
-	]), Ee = s(() => ({ editor: N }), [N]), De = {
-		"--bree-empty-zone-label": JSON.stringify(A.canvas.emptyZone),
+	]), Ee = c(() => ({ editor: P }), [P]), De = {
+		"--bree-empty-zone-label": JSON.stringify(j.canvas.emptyZone),
 		...ae
 	};
-	return /* @__PURE__ */ I("div", {
-		className: R("bree bree-root", ie),
+	return /* @__PURE__ */ L("div", {
+		className: z("bree bree-root", ie),
 		style: De,
-		lang: u,
-		children: Te && /* @__PURE__ */ I(p.Provider, {
+		lang: a,
+		children: Te && /* @__PURE__ */ L(m.Provider, {
 			value: Ee,
-			children: /* @__PURE__ */ I(Un.Provider, {
+			children: /* @__PURE__ */ L(Xn.Provider, {
 				value: Te,
 				children: oe
 			})
@@ -2992,7 +3079,7 @@ var Qn = t(function({ defaultValue: e, onChange: t, onReady: r, locale: u = "en"
 });
 //#endregion
 //#region src/components/CanvasOverlay.tsx
-function $n(e, t) {
+function or(e, t) {
 	let n = e.getBoundingClientRect();
 	return {
 		top: t.top - n.top + e.scrollTop,
@@ -3001,38 +3088,38 @@ function $n(e, t) {
 		height: t.height ?? 0
 	};
 }
-function er(e, t, n) {
+function sr(e, t, n) {
 	if (!n) return null;
 	let r = e.view.nodeDOM(n.pos);
-	return r instanceof HTMLElement ? $n(t, r.getBoundingClientRect()) : null;
+	return r instanceof HTMLElement ? or(t, r.getBoundingClientRect()) : null;
 }
-function tr(e, t, n) {
+function cr(e, t, n) {
 	let r = e.view.posAtCoords({
 		left: t,
 		top: n
 	});
-	return r && r.inside >= 0 ? z(e.state.doc, r.inside) : null;
+	return r && r.inside >= 0 ? rt(e.state.doc, r.inside) : null;
 }
-function nr(e) {
+function lr(e) {
 	let t = e.node.type.name;
-	return Ve.has(t) || He.has(t);
+	return Ue.has(t) || We.has(t);
 }
-function rr({ editor: e, host: t }) {
-	let { dragSession: r, hoverStore: a, nodeLabel: s, t: d } = Q(), f = c(s);
-	o(() => {
-		f.current = s;
+function ur({ editor: e, host: t }) {
+	let { dragSession: r, hoverStore: a, nodeLabel: o, t: c } = Q(), f = l(o);
+	s(() => {
+		f.current = o;
 	});
-	let p = u(a.subscribe, a.get), m = p === null ? null : e.state.doc.nodeAt(p), g = p !== null && m ? {
+	let p = d(a.subscribe, a.get), m = p === null ? null : e.state.doc.nodeAt(p), h = p !== null && m ? {
 		pos: p,
 		node: m
-	} : null, [_, v] = l(null), [y, b] = l(null), [, x] = l(0), S = n(() => x((e) => e + 1), []), C = h({
+	} : null, [_, v] = u(null), [y, b] = u(null), [, x] = u(0), S = n(() => x((e) => e + 1), []), C = g({
 		editor: e,
 		selector: ({ editor: e }) => {
 			if (!e?.isFocused) return null;
-			let t = rt(e);
+			let t = ot(e);
 			return t ? `${t.pos}:${t.node.type.name}:${e.state.doc.content.size}` : null;
 		}
-	}) ? rt(e) : null;
+	}) ? ot(e) : null;
 	i(() => {
 		let n = () => S(), r = () => {
 			a.set(null), S();
@@ -3050,7 +3137,7 @@ function rr({ editor: e, host: t }) {
 	]), i(() => {
 		let n = 0, i = (t) => {
 			r.get() || t.target.closest(".bree-ov-toolbar, .bree-ov-handle, .bree-ov-tag") || (cancelAnimationFrame(n), n = requestAnimationFrame(() => {
-				a.set(tr(e, t.clientX, t.clientY)?.pos ?? null);
+				a.set(cr(e, t.clientX, t.clientY)?.pos ?? null);
 			}));
 		}, o = () => a.set(null);
 		return t.addEventListener("mousemove", i), t.addEventListener("mouseleave", o), () => {
@@ -3063,7 +3150,7 @@ function rr({ editor: e, host: t }) {
 		a
 	]), i(() => {
 		let n = (n) => {
-			if (n.button !== 0 || n.shiftKey || n.metaKey || n.ctrlKey || n.target.closest(".bree-ov-layer")) return;
+			if (n.button !== 0 || n.shiftKey || n.metaKey || n.ctrlKey || n.target.closest(".bree-ov-layer, .bree-canvas-header")) return;
 			if ([
 				t,
 				e.view.dom,
@@ -3074,14 +3161,14 @@ function rr({ editor: e, host: t }) {
 				t instanceof HTMLElement && t.blur(), e.commands.blur();
 				return;
 			}
-			let r = tr(e, n.clientX, n.clientY);
-			if (r && nr(r)) {
-				n.preventDefault(), it(e, r);
+			let r = cr(e, n.clientX, n.clientY);
+			if (r && lr(r)) {
+				n.preventDefault(), st(e, r);
 				return;
 			}
-			!e.isFocused && e.state.selection instanceof w && e.view.focus();
+			!e.isFocused && e.state.selection instanceof D && e.view.focus();
 		}, r = (t) => {
-			e.view.dom.contains(t.target) && lt(e, t);
+			e.view.dom.contains(t.target) && ft(e, t);
 		};
 		return t.addEventListener("mousedown", n, !0), t.addEventListener("paste", r, !0), () => {
 			t.removeEventListener("mousedown", n, !0), t.removeEventListener("paste", r, !0);
@@ -3089,12 +3176,12 @@ function rr({ editor: e, host: t }) {
 	}, [e, t]), i(() => {
 		let n = 0, i = null, o = null, s = (t) => {
 			let n = r.get();
-			if (!n || (i !== n && (i = n, o = Ye(e.view, n)), !o)) return null;
+			if (!n || (i !== n && (i = n, o = Ze(e.view, n)), !o)) return null;
 			let a = n.kind === "move" ? {
 				from: n.pos,
 				to: n.pos + (e.state.doc.nodeAt(n.pos)?.nodeSize ?? 0)
 			} : void 0;
-			return Je(e.view, t.clientX, t.clientY, o, a);
+			return Xe(e.view, t.clientX, t.clientY, o, a);
 		}, c = (e) => {
 			let t = r.get();
 			t && (e.preventDefault(), e.stopPropagation(), e.dataTransfer && (e.dataTransfer.dropEffect = t.kind === "move" ? "move" : "copy"), cancelAnimationFrame(n), n = requestAnimationFrame(() => v(s(e))));
@@ -3103,7 +3190,7 @@ function rr({ editor: e, host: t }) {
 			if (!i) return;
 			t.preventDefault(), t.stopPropagation(), cancelAnimationFrame(n);
 			let o = s(t);
-			o && $e(e, i, o), e.view.dragging = null, r.end(), v(null), b(null), a.set(null);
+			o && tt(e, i, o), e.view.dragging = null, r.end(), v(null), b(null), a.set(null);
 		}, u = (e) => {
 			r.get() && (t.contains(e.relatedTarget) || (cancelAnimationFrame(n), v(null)));
 		}, d = () => {
@@ -3111,16 +3198,16 @@ function rr({ editor: e, host: t }) {
 		}, p = (t) => {
 			let n = t.target;
 			if (r.get() || n.tagName !== "IMG" || !e.view.dom.contains(n)) return;
-			let i = e.view.posAtDOM(n, 0), a = z(e.state.doc, i);
-			a && !tt(a) && (r.start({
+			let i = e.view.posAtDOM(n, 0), a = rt(e.state.doc, i);
+			a && !it(a) && (r.start({
 				kind: "move",
 				pos: a.pos,
 				label: f.current(a.node.type.name)
 			}), requestAnimationFrame(() => b(a.pos)));
 		}, m = (t) => {
 			if (t.key !== "Escape" || !e.isFocused) return;
-			let n = rt(e), r = n ? nt(e.state.doc, n) : null;
-			if (t.preventDefault(), r) it(e, r);
+			let n = ot(e), r = n ? at(e.state.doc, n) : null;
+			if (t.preventDefault(), r) st(e, r);
 			else {
 				let t = document.activeElement;
 				t instanceof HTMLElement && t.blur(), e.commands.blur();
@@ -3135,187 +3222,264 @@ function rr({ editor: e, host: t }) {
 		r,
 		a
 	]);
-	let T = (t, n) => {
+	let w = (t, n) => {
 		let i = e.view.nodeDOM(n.pos);
 		if (r.start({
 			kind: "move",
 			pos: n.pos,
-			label: s(n.node.type.name)
-		}), t.dataTransfer.setData(Ue, "move"), t.dataTransfer.effectAllowed = "move", i instanceof HTMLElement) {
+			label: o(n.node.type.name)
+		}), t.dataTransfer.setData(Ge, "move"), t.dataTransfer.effectAllowed = "move", i instanceof HTMLElement) {
 			let e = i.getBoundingClientRect();
 			t.dataTransfer.setDragImage(i, Math.min(24, e.width / 2), Math.min(24, e.height / 2));
 		}
 		requestAnimationFrame(() => b(n.pos));
-	}, E = y !== null, D = g && g.pos !== C?.pos ? er(e, t, g) : null, O = er(e, t, C), ee = E ? er(e, t, z(e.state.doc, y)) : null, k = C ? nt(e.state.doc, C) : null;
-	return /* @__PURE__ */ L("div", {
+	}, T = y !== null, E = h && h.pos !== C?.pos ? sr(e, t, h) : null, O = sr(e, t, C), ee = T ? sr(e, t, rt(e.state.doc, y)) : null, k = C ? at(e.state.doc, C) : null;
+	return /* @__PURE__ */ R("div", {
 		className: "bree-ov-layer",
 		children: [
-			D && g && /* @__PURE__ */ I("div", {
-				className: R("bree-ov-frame bree-ov-hover", E && "bree-ov-ghost"),
-				style: D,
-				children: /* @__PURE__ */ I("button", {
+			E && h && /* @__PURE__ */ L("div", {
+				className: z("bree-ov-frame bree-ov-hover", T && "bree-ov-ghost"),
+				style: E,
+				children: /* @__PURE__ */ L("button", {
 					type: "button",
 					className: "bree-ov-tag",
 					onMouseDown: (t) => {
-						t.preventDefault(), it(e, g);
+						t.preventDefault(), st(e, h);
 					},
-					children: s(g.node.type.name)
+					children: o(h.node.type.name)
 				})
 			}),
-			O && C && /* @__PURE__ */ L("div", {
-				className: R("bree-ov-frame bree-ov-selected", E && "bree-ov-ghost"),
+			O && C && /* @__PURE__ */ R("div", {
+				className: z("bree-ov-frame bree-ov-selected", T && "bree-ov-ghost"),
 				style: O,
 				children: [
-					/* @__PURE__ */ I("span", {
+					/* @__PURE__ */ L("span", {
 						className: "bree-ov-tag bree-ov-tag-selected",
-						children: s(C.node.type.name)
+						children: o(C.node.type.name)
 					}),
-					!tt(C) && /* @__PURE__ */ I(j, { children: /* @__PURE__ */ I("span", {
+					!it(C) && /* @__PURE__ */ L(M, { children: /* @__PURE__ */ L("span", {
 						className: "bree-ov-handle",
 						role: "button",
 						tabIndex: -1,
 						draggable: !0,
-						title: d.canvas.move,
-						"aria-label": d.canvas.moveLabel(s(C.node.type.name)),
-						onDragStart: (e) => T(e, C),
-						children: /* @__PURE__ */ I(jt, {})
+						title: c.canvas.move,
+						"aria-label": c.canvas.moveLabel(o(C.node.type.name)),
+						onDragStart: (e) => w(e, C),
+						children: /* @__PURE__ */ L(Lt, {})
 					}) }),
-					/* @__PURE__ */ I(j, { children: /* @__PURE__ */ L("div", {
+					/* @__PURE__ */ L(M, { children: /* @__PURE__ */ R("div", {
 						className: "bree-ov-toolbar",
 						onMouseDown: (e) => e.preventDefault(),
-						children: [k && /* @__PURE__ */ I("button", {
+						children: [k && /* @__PURE__ */ L("button", {
 							type: "button",
 							className: "bree-ov-tool",
-							title: d.canvas.selectParent(s(k.node.type.name)),
-							onClick: () => it(e, k),
-							children: /* @__PURE__ */ I(Pt, {})
-						}), !tt(C) && /* @__PURE__ */ L(F, { children: [/* @__PURE__ */ I("button", {
+							title: c.canvas.selectParent(o(k.node.type.name)),
+							onClick: () => st(e, k),
+							children: /* @__PURE__ */ L(Bt, {})
+						}), !it(C) && /* @__PURE__ */ R(I, { children: [/* @__PURE__ */ L("button", {
 							type: "button",
 							className: "bree-ov-tool",
-							title: d.canvas.duplicate,
-							onClick: () => at(e, C),
-							children: /* @__PURE__ */ I(Mt, {})
-						}), /* @__PURE__ */ I("button", {
+							title: c.canvas.duplicate,
+							onClick: () => ct(e, C),
+							children: /* @__PURE__ */ L(Rt, {})
+						}), /* @__PURE__ */ L("button", {
 							type: "button",
 							className: "bree-ov-tool bree-ov-danger",
-							title: d.canvas.delete,
-							onClick: () => ot(e, C),
-							children: /* @__PURE__ */ I(Nt, {})
+							title: c.canvas.delete,
+							onClick: () => lt(e, C),
+							children: /* @__PURE__ */ L(zt, {})
 						})] })]
 					}) })
 				]
 			}),
-			ee && /* @__PURE__ */ I("div", {
+			ee && /* @__PURE__ */ L("div", {
 				className: "bree-ov-frame bree-ov-source",
 				style: ee
 			}),
-			_ && /* @__PURE__ */ I(ir, {
+			_ && /* @__PURE__ */ L(dr, {
 				host: t,
 				target: _,
 				label: r.get()?.label ?? "",
-				messages: d
+				messages: c
 			})
 		]
 	});
 }
-function ir({ host: e, target: t, label: n, messages: r }) {
+function dr({ host: e, target: t, label: n, messages: r }) {
 	if (t.emptyZone) {
-		let i = $n(e, t.emptyZone);
-		return /* @__PURE__ */ I("div", {
+		let i = or(e, t.emptyZone);
+		return /* @__PURE__ */ L("div", {
 			className: "bree-ov-dropzone",
 			style: i,
-			children: /* @__PURE__ */ L("span", { children: [
-				/* @__PURE__ */ I(N, { size: 14 }),
+			children: /* @__PURE__ */ R("span", { children: [
+				/* @__PURE__ */ L(Ce, { size: 14 }),
 				" ",
 				r.canvas.dropLabel(n)
 			] })
 		});
 	}
 	if (!t.line) return null;
-	let i = $n(e, {
+	let i = or(e, {
 		...t.line,
 		height: 0
 	});
-	return /* @__PURE__ */ I("div", {
+	return /* @__PURE__ */ L("div", {
 		className: "bree-ov-dropline",
 		style: {
 			top: i.top,
 			left: i.left,
 			width: i.width
 		},
-		children: /* @__PURE__ */ I("span", {
+		children: /* @__PURE__ */ L("span", {
 			className: "bree-ov-dropline-label",
 			children: r.canvas.dropHere
 		})
 	});
 }
 //#endregion
+//#region src/components/EmailHeader.tsx
+function fr({ className: e, style: t }) {
+	let { settings: n, updateSettings: r, t: i } = Q(), o = i.emailHeader, s = a();
+	return /* @__PURE__ */ R("div", {
+		className: z("bree-email-header", e),
+		style: t,
+		children: [/* @__PURE__ */ R("div", {
+			className: "bree-email-header-row",
+			children: [/* @__PURE__ */ L("label", {
+				htmlFor: `${s}-subject`,
+				children: o.subject
+			}), /* @__PURE__ */ L("input", {
+				id: `${s}-subject`,
+				className: "bree-email-header-subject",
+				value: n.subject ?? "",
+				placeholder: o.subjectPlaceholder,
+				onChange: (e) => r({ subject: e.target.value })
+			})]
+		}), /* @__PURE__ */ R("div", {
+			className: "bree-email-header-row",
+			children: [/* @__PURE__ */ L("label", {
+				htmlFor: `${s}-preview`,
+				children: o.previewText
+			}), /* @__PURE__ */ L("input", {
+				id: `${s}-preview`,
+				value: n.previewText,
+				placeholder: o.previewTextPlaceholder,
+				onChange: (e) => r({ previewText: e.target.value })
+			})]
+		})]
+	});
+}
+//#endregion
 //#region src/components/Canvas.tsx
-function ar({ overlay: e = !0, bubbleMenu: t = !0, slashCommands: n = !0, className: r, style: i, children: a }) {
-	let { editor: o, device: c, t: u } = Q(), [d, p] = l(null), m = s(() => Array.isArray(n) ? n : ke.map((e) => ({
+function pr(e, t, n) {
+	let [r, a] = u(null);
+	return i(() => {
+		if (!t || !n) return;
+		let r = 0, i = null, o = () => {
+			t.style.setProperty("--bree-email-header-height", `${n.offsetHeight}px`);
+			let r = e.view.dom.querySelector(":scope > .node-container");
+			if (r !== i && (i && c.unobserve(i), r && c.observe(r), i = r), !(r instanceof HTMLElement)) {
+				a(null);
+				return;
+			}
+			let o = t.getBoundingClientRect(), s = r.getBoundingClientRect(), l = {
+				top: s.top - o.top + t.scrollTop - n.offsetHeight,
+				left: s.left - o.left + t.scrollLeft,
+				width: s.width,
+				radius: getComputedStyle(r).borderBottomLeftRadius
+			};
+			a((e) => e && e.top === l.top && e.left === l.left && e.width === l.width && e.radius === l.radius ? e : l);
+		}, s = () => {
+			cancelAnimationFrame(r), r = requestAnimationFrame(o);
+		}, c = new ResizeObserver(s);
+		return c.observe(t), c.observe(n), o(), e.on("update", s), () => {
+			cancelAnimationFrame(r), c.disconnect(), e.off("update", s), t.style.removeProperty("--bree-email-header-height");
+		};
+	}, [
+		e,
+		t,
+		n
+	]), n ? r : null;
+}
+function mr({ overlay: e = !0, bubbleMenu: t = !0, slashCommands: n = !0, header: r = !1, className: i, style: a, children: o }) {
+	let { editor: s, device: l, t: d } = Q(), [f, m] = u(null), [h, g] = u(null), _ = pr(s, f, r ? h : null), v = c(() => Array.isArray(n) ? n : je.map((e) => ({
 		...e,
-		...u.slashCommands[e.title]
-	})), [n, u]);
-	return /* @__PURE__ */ L("div", {
-		ref: p,
-		className: R("bree-canvas", r),
-		style: i,
-		"data-device": c,
+		...d.slashCommands[e.title]
+	})), [n, d]);
+	return /* @__PURE__ */ R("div", {
+		ref: m,
+		className: z("bree-canvas", i),
+		style: a,
+		"data-device": l,
+		"data-email-header": r || void 0,
 		children: [
-			/* @__PURE__ */ I(f, {
-				editor: o,
+			r && /* @__PURE__ */ L("div", {
+				ref: g,
+				className: "bree-canvas-header",
+				"data-placed": _ ? "" : void 0,
+				style: _ ? {
+					position: "absolute",
+					top: _.top,
+					left: _.left,
+					width: _.width,
+					"--bree-email-header-radius": _.radius
+				} : void 0,
+				children: /* @__PURE__ */ L(fr, {})
+			}),
+			/* @__PURE__ */ L(p, {
+				editor: s,
 				className: "bree-canvas-content"
 			}),
-			t && /* @__PURE__ */ L(F, { children: [
-				/* @__PURE__ */ I(se, {
+			t && /* @__PURE__ */ R(I, { children: [
+				/* @__PURE__ */ L(ce, {
 					hideWhenActiveNodes: ["button", "horizontalRule"],
 					hideWhenActiveMarks: ["link"]
 				}),
-				/* @__PURE__ */ I(se.LinkDefault, {}),
-				/* @__PURE__ */ I(se.ButtonDefault, {}),
-				/* @__PURE__ */ I(se.ImageDefault, {})
+				/* @__PURE__ */ L(ce.LinkDefault, {}),
+				/* @__PURE__ */ L(ce.ButtonDefault, {}),
+				/* @__PURE__ */ L(ce.ImageDefault, {})
 			] }),
-			n !== !1 && /* @__PURE__ */ I(Se, { items: m }),
-			e && d && /* @__PURE__ */ I(rr, {
-				editor: o,
-				host: d
+			n !== !1 && /* @__PURE__ */ L(F, { items: v }),
+			e && f && /* @__PURE__ */ L(ur, {
+				editor: s,
+				host: f
 			}),
-			a
+			o
 		]
 	});
 }
 //#endregion
 //#region src/core/layers.ts
-function or(e, t) {
+function hr(e, t) {
 	let n = e.child(t);
-	return t === e.childCount - 1 && e.childCount > 1 && Ke(n) && e.child(t - 1).type.name !== "paragraph";
+	return t === e.childCount - 1 && e.childCount > 1 && Je(n) && e.child(t - 1).type.name !== "paragraph";
 }
-function sr(e, t, n, r) {
+function gr(e, t, n, r) {
 	let i = [];
 	return e.forEach((a, o, s) => {
-		if (or(e, s)) return;
-		let c = t + 1 + o, l = a.type.name, u = `${r}${s}`, d = Ve.has(l), f = d && a.childCount === 1 && Ke(a.firstChild), p = d || He.has(l);
+		if (hr(e, s)) return;
+		let c = t + 1 + o, l = a.type.name, u = `${r}${s}`, d = Ue.has(l), f = d && a.childCount === 1 && Je(a.firstChild), p = d || We.has(l);
 		i.push({
 			key: u,
 			pos: c,
 			node: a,
 			depth: n,
 			index: s + 1,
-			children: p && !f ? sr(a, c, n + 1, `${u}.`) : [],
+			children: p && !f ? gr(a, c, n + 1, `${u}.`) : [],
 			accepts: d,
 			fixed: l === "columnsColumn",
 			empty: f
 		});
 	}), i;
 }
-function cr(e) {
-	let t = qe(e);
-	return t ? sr(t.node, t.pos, 0, "") : [];
+function _r(e) {
+	let t = Ye(e);
+	return t ? gr(t.node, t.pos, 0, "") : [];
 }
-function lr(e, t) {
+function vr(e, t) {
 	return e.fixed ? "inside" : e.accepts ? t < .25 ? "before" : t > .75 ? "after" : "inside" : t < .5 ? "before" : "after";
 }
-function ur(e, t, n, r, i) {
+function yr(e, t, n, r, i) {
 	let a, o;
 	if (n === "inside") {
 		if (!t.accepts) return null;
@@ -3333,18 +3497,18 @@ function ur(e, t, n, r, i) {
 }
 //#endregion
 //#region src/components/LayersPanel.tsx
-function dr({ onClose: e, title: t, expandCollapseButtons: n = !0, className: r, style: a }) {
-	let { editor: o, t: d, locale: f, nodes: p, nodeLabel: m, dragSession: g, hoverStore: _ } = Q(), v = (e) => e.node.type.name === "columnsColumn" ? d.layers.column(e.index) : m(e.node.type.name), y = (e) => (p.get(e.node.type.name)?.preview ?? wn)(e.node, {
+function br({ onClose: e, title: t, expandCollapseButtons: n = !0, className: r, style: a }) {
+	let { editor: o, t: s, locale: f, nodes: p, nodeLabel: m, dragSession: h, hoverStore: _ } = Q(), v = (e) => e.node.type.name === "columnsColumn" ? s.layers.column(e.index) : m(e.node.type.name), y = (e) => (p.get(e.node.type.name)?.preview ?? An)(e.node, {
 		locale: f,
-		t: d
-	}), b = h({
+		t: s
+	}), b = g({
 		editor: o,
 		selector: ({ editor: e }) => e?.state.doc ?? null,
 		equalityFn: (e, t) => e === t
-	}), x = h({
+	}), x = g({
 		editor: o,
-		selector: ({ editor: e }) => e?.isFocused ? rt(e)?.pos ?? null : null
-	}), S = u(_.subscribe, _.get), C = s(() => b ? cr(b) : [], [b]), [w, T] = l(() => /* @__PURE__ */ new Set()), [E, D] = l(null), O = c(null);
+		selector: ({ editor: e }) => e?.isFocused ? ot(e)?.pos ?? null : null
+	}), S = d(_.subscribe, _.get), C = c(() => b ? _r(b) : [], [b]), [w, T] = u(() => /* @__PURE__ */ new Set()), [E, D] = u(null), O = l(null);
 	i(() => {
 		x !== null && O.current?.querySelector("[aria-selected=\"true\"]")?.scrollIntoView({ block: "nearest" });
 	}, [x]);
@@ -3352,7 +3516,7 @@ function dr({ onClose: e, title: t, expandCollapseButtons: n = !0, className: r,
 		let n = new Set(t);
 		return n.has(e) ? n.delete(e) : n.add(e), n;
 	}), k = (e) => {
-		it(o, {
+		st(o, {
 			pos: e.pos,
 			node: e.node
 		});
@@ -3361,37 +3525,37 @@ function dr({ onClose: e, title: t, expandCollapseButtons: n = !0, className: r,
 			block: "nearest",
 			behavior: "smooth"
 		});
-	}, te = (e, t) => {
-		let n = g.get();
+	}, A = (e, t) => {
+		let n = h.get();
 		if (!n) return null;
-		let r = Ye(o.view, n);
+		let r = Ze(o.view, n);
 		if (!r) return null;
-		let i = e.currentTarget.getBoundingClientRect(), a = lr(t, (e.clientY - i.top) / i.height), s = n.kind === "move" ? o.state.doc.nodeAt(n.pos) : null, c = n.kind === "move" && s ? {
+		let i = e.currentTarget.getBoundingClientRect(), a = vr(t, (e.clientY - i.top) / i.height), s = n.kind === "move" ? o.state.doc.nodeAt(n.pos) : null, c = n.kind === "move" && s ? {
 			from: n.pos,
 			to: n.pos + s.nodeSize
-		} : void 0, l = ur(o.state.doc, t, a, r, c);
+		} : void 0, l = yr(o.state.doc, t, a, r, c);
 		return l ? {
 			zone: a,
 			target: l,
 			payload: n
 		} : null;
-	}, ne = () => {
-		g.end(), D(null);
-	}, re = (e) => e.map((e) => {
-		let t = p.get(e.node.type.name)?.icon ?? me, n = e.children.length > 0, r = w.has(e.key), i = y(e), a = E?.key === e.key ? E.zone : null;
-		return /* @__PURE__ */ L("div", {
+	}, te = () => {
+		h.end(), D(null);
+	}, ne = (e) => e.map((e) => {
+		let t = p.get(e.node.type.name)?.icon ?? ge, n = e.children.length > 0, r = w.has(e.key), i = y(e), a = E?.key === e.key ? E.zone : null;
+		return /* @__PURE__ */ R("div", {
 			role: "none",
 			children: [
-				/* @__PURE__ */ L("div", {
+				/* @__PURE__ */ R("div", {
 					role: "treeitem",
 					tabIndex: x === e.pos || x === null && e.key === "0" ? 0 : -1,
 					"aria-level": e.depth + 1,
 					"aria-selected": x === e.pos,
 					"aria-expanded": n ? !r : void 0,
-					className: R("bree-layer", x === e.pos && "bree-selected", S === e.pos && "bree-hovered", a && `bree-drop-${a}`, e.fixed && "bree-fixed"),
+					className: z("bree-layer", x === e.pos && "bree-selected", S === e.pos && "bree-hovered", a && `bree-drop-${a}`, e.fixed && "bree-fixed"),
 					style: { paddingLeft: 6 + e.depth * 16 },
 					draggable: !e.fixed,
-					title: e.fixed ? d.layers.fixedHint : d.layers.itemHint,
+					title: e.fixed ? s.layers.fixedHint : s.layers.itemHint,
 					onClick: () => k(e),
 					onKeyDown: (t) => {
 						if (t.key === "Enter" || t.key === " ") t.preventDefault(), k(e);
@@ -3405,15 +3569,15 @@ function dr({ onClose: e, title: t, expandCollapseButtons: n = !0, className: r,
 					onMouseEnter: () => _.set(e.pos),
 					onMouseLeave: () => _.set(null),
 					onDragStart: (t) => {
-						t.stopPropagation(), g.start({
+						t.stopPropagation(), h.start({
 							kind: "move",
 							pos: e.pos,
 							label: v(e)
-						}), t.dataTransfer.setData(Ue, "move"), t.dataTransfer.effectAllowed = "move";
+						}), t.dataTransfer.setData(Ge, "move"), t.dataTransfer.effectAllowed = "move";
 					},
-					onDragEnd: ne,
+					onDragEnd: te,
 					onDragOver: (t) => {
-						let n = te(t, e);
+						let n = A(t, e);
 						if (!n) {
 							E?.key === e.key && D(null);
 							return;
@@ -3424,66 +3588,66 @@ function dr({ onClose: e, title: t, expandCollapseButtons: n = !0, className: r,
 						});
 					},
 					onDrop: (t) => {
-						let n = te(t, e);
-						t.preventDefault(), n && $e(o, n.payload, n.target), ne();
+						let n = A(t, e);
+						t.preventDefault(), n && tt(o, n.payload, n.target), te();
 					},
 					children: [
-						n ? /* @__PURE__ */ I("button", {
+						n ? /* @__PURE__ */ L("button", {
 							type: "button",
-							className: R("bree-layer-caret", !r && "bree-open"),
-							"aria-label": r ? d.layers.expand : d.layers.collapse,
+							className: z("bree-layer-caret", !r && "bree-open"),
+							"aria-label": r ? s.layers.expand : s.layers.collapse,
 							tabIndex: -1,
 							onClick: (t) => {
 								t.stopPropagation(), ee(e.key);
 							},
 							children: "›"
-						}) : /* @__PURE__ */ I("span", { className: "bree-layer-caret-spacer" }),
-						/* @__PURE__ */ I("span", {
+						}) : /* @__PURE__ */ L("span", { className: "bree-layer-caret-spacer" }),
+						/* @__PURE__ */ L("span", {
 							className: "bree-layer-icon",
-							children: /* @__PURE__ */ I(t, { size: 14 })
+							children: /* @__PURE__ */ L(t, { size: 14 })
 						}),
-						/* @__PURE__ */ I("span", {
+						/* @__PURE__ */ L("span", {
 							className: "bree-layer-label",
 							children: v(e)
 						}),
-						i && /* @__PURE__ */ I("span", {
+						i && /* @__PURE__ */ L("span", {
 							className: "bree-layer-preview",
 							children: i
 						})
 					]
 				}),
-				e.empty && /* @__PURE__ */ I("div", {
+				e.empty && /* @__PURE__ */ L("div", {
 					className: "bree-layer-empty",
 					style: { paddingLeft: 6 + (e.depth + 1) * 16 + 18 },
-					children: d.layers.emptyZone
+					children: s.layers.emptyZone
 				}),
-				n && !r && /* @__PURE__ */ I("div", {
+				n && !r && /* @__PURE__ */ L("div", {
 					role: "group",
-					children: re(e.children)
+					children: ne(e.children)
 				})
 			]
 		}, e.key);
 	});
-	return /* @__PURE__ */ I(j, { children: /* @__PURE__ */ L("aside", {
-		className: R("bree-layers", r),
+	return /* @__PURE__ */ L(M, { children: /* @__PURE__ */ R("aside", {
+		className: z("bree-layers", r),
 		style: a,
-		"aria-label": t ?? d.layers.title,
+		"aria-label": t ?? s.layers.title,
 		tabIndex: -1,
 		onDragLeave: (e) => !e.currentTarget.contains(e.relatedTarget) && D(null),
-		children: [/* @__PURE__ */ L("header", {
+		children: [/* @__PURE__ */ R("header", {
 			className: "bree-layers-header",
-			children: [/* @__PURE__ */ I("h2", { children: t ?? d.layers.title }), /* @__PURE__ */ L("div", {
+			children: [/* @__PURE__ */ L("h2", { children: t ?? s.layers.title }), /* @__PURE__ */ R("div", {
 				className: "bree-layers-actions",
-				children: [n && /* @__PURE__ */ L(F, { children: [/* @__PURE__ */ I("button", {
+				children: [n && /* @__PURE__ */ R(I, { children: [/* @__PURE__ */ L("button", {
 					type: "button",
 					className: "bree-icon-button bree-small",
-					title: d.layers.expandAll,
+					title: s.layers.expandAll,
 					onClick: () => T(/* @__PURE__ */ new Set()),
 					children: "⊞"
-				}), /* @__PURE__ */ I("button", {
+				}), /* @__PURE__ */ L("button", {
 					type: "button",
 					className: "bree-icon-button bree-small",
-					title: d.layers.collapseAll,
+					title: s.layers.collapseAll,
 					onClick: () => {
 						let e = /* @__PURE__ */ new Set(), t = (n) => n.forEach((n) => {
 							n.children.length && e.add(n.key), t(n.children);
@@ -3491,80 +3655,80 @@ function dr({ onClose: e, title: t, expandCollapseButtons: n = !0, className: r,
 						t(C), T(e);
 					},
 					children: "⊟"
-				})] }), e && /* @__PURE__ */ I("button", {
+				})] }), e && /* @__PURE__ */ L("button", {
 					type: "button",
 					className: "bree-icon-button bree-small",
-					title: d.layers.close,
+					title: s.layers.close,
 					onClick: e,
-					children: /* @__PURE__ */ I(Oe, { size: 14 })
+					children: /* @__PURE__ */ L(Ae, { size: 14 })
 				})]
 			})]
-		}), /* @__PURE__ */ I("div", {
+		}), /* @__PURE__ */ L("div", {
 			className: "bree-layers-list",
 			role: "tree",
-			"aria-label": d.layers.tree,
+			"aria-label": s.layers.tree,
 			ref: O,
-			children: C.length ? re(C) : /* @__PURE__ */ I("p", {
+			children: C.length ? ne(C) : /* @__PURE__ */ L("p", {
 				className: "bree-hint",
-				children: d.layers.emptyEmail
+				children: s.layers.emptyEmail
 			})
 		})]
 	}) });
 }
 //#endregion
 //#region src/components/inspectors/DefaultInspector.tsx
-function fr({ ctx: e, className: t, style: n }) {
-	return /* @__PURE__ */ L("div", {
-		className: R("bree-inspector", t),
+function xr({ ctx: e, className: t, style: n }) {
+	return /* @__PURE__ */ R("div", {
+		className: z("bree-inspector", t),
 		style: n,
 		children: [
-			/* @__PURE__ */ I(tn, {
+			/* @__PURE__ */ L(ln, {
 				ctx: e,
 				alignment: String(e.getAttr("alignment") ?? "left"),
 				setAlignment: (t) => e.setAttr("alignment", t)
 			}),
-			/* @__PURE__ */ I(nn, { ctx: e }),
-			/* @__PURE__ */ I(rn, { ctx: e })
+			/* @__PURE__ */ L(q, { ctx: e }),
+			/* @__PURE__ */ L(un, { ctx: e })
 		]
 	});
 }
 //#endregion
 //#region src/components/PropertiesPanel.tsx
-function pr() {
+function Sr() {
 	let { editor: e } = Q();
 	return () => {
 		let t = document.activeElement;
 		t instanceof HTMLElement && t.blur(), e.commands.blur();
 	};
 }
-function mr({ title: e, children: t, breadcrumb: n = !0, className: r, style: i }) {
-	let { t: a, nodeLabel: o } = Q(), s = pr();
-	return /* @__PURE__ */ L("div", {
-		className: R("bree-properties", r),
+function Cr({ title: e, children: t, breadcrumb: n = !0, className: r, style: i }) {
+	let { t: a, nodeLabel: o } = Q(), s = Sr();
+	return /* @__PURE__ */ R("div", {
+		className: z("bree-properties", r),
 		style: i,
 		children: [
-			/* @__PURE__ */ L("header", {
+			/* @__PURE__ */ R("header", {
 				className: "bree-properties-header",
-				children: [/* @__PURE__ */ L("div", { children: [/* @__PURE__ */ I("span", {
+				children: [/* @__PURE__ */ R("div", { children: [/* @__PURE__ */ L("span", {
 					className: "bree-eyebrow",
 					children: a.sidebar.propertiesEyebrow
-				}), /* @__PURE__ */ I("h2", { children: e })] }), /* @__PURE__ */ I("button", {
+				}), /* @__PURE__ */ L("h2", { children: e })] }), /* @__PURE__ */ L("button", {
 					type: "button",
 					className: "bree-icon-button",
 					title: a.sidebar.closeProperties,
 					onClick: s,
-					children: /* @__PURE__ */ I(Oe, { size: 16 })
+					children: /* @__PURE__ */ L(Ae, { size: 16 })
 				})]
 			}),
-			n && /* @__PURE__ */ I(M.Breadcrumb, { children: (e) => e.length > 1 && /* @__PURE__ */ I("nav", {
+			n && /* @__PURE__ */ L(N.Breadcrumb, { children: (e) => e.length > 1 && /* @__PURE__ */ L("nav", {
 				className: "bree-breadcrumb",
 				"aria-label": a.sidebar.breadcrumb,
-				children: e.map((t, n) => /* @__PURE__ */ L("span", {
+				children: e.map((t, n) => /* @__PURE__ */ R("span", {
 					className: "bree-crumb",
-					children: [n > 0 && /* @__PURE__ */ I("span", {
+					children: [n > 0 && /* @__PURE__ */ L("span", {
 						className: "bree-crumb-sep",
 						children: "/"
-					}), /* @__PURE__ */ I("button", {
+					}), /* @__PURE__ */ L("button", {
 						type: "button",
 						disabled: n === e.length - 1,
 						onClick: t.focus,
@@ -3572,7 +3736,7 @@ function mr({ title: e, children: t, breadcrumb: n = !0, className: r, style: i
 					})]
 				}, `${t.node.nodeType}-${t.node.nodePos.pos}`))
 			}) }),
-			/* @__PURE__ */ I("div", {
+			/* @__PURE__ */ L("div", {
 				className: "bree-panel-scroll",
 				children: t
 			})
@@ -3581,18 +3745,18 @@ function mr({ title: e, children: t, breadcrumb: n = !0, className: r, style: i
 }
 //#endregion
 //#region src/components/BlockProperties.tsx
-function hr({ ctx: e, className: t, style: n }) {
-	let { nodes: r, nodeLabel: i } = Q(), a = r.get(e.nodeType)?.inspector ?? fr;
-	return /* @__PURE__ */ I(mr, {
+function wr({ ctx: e, className: t, style: n }) {
+	let { nodes: r, nodeLabel: i } = Q(), a = r.get(e.nodeType)?.inspector ?? xr;
+	return /* @__PURE__ */ L(Cr, {
 		title: i(e.nodeType),
 		className: t,
 		style: n,
-		children: /* @__PURE__ */ I(a, { ctx: e }, `${e.nodeType}-${e.nodePos.pos}`)
+		children: /* @__PURE__ */ L(a, { ctx: e }, `${e.nodeType}-${e.nodePos.pos}`)
 	});
 }
 //#endregion
 //#region src/components/useDraggableBlock.ts
-function gr(e, t) {
+function Tr(e, t) {
 	let { editor: n, dragSession: r } = Q();
 	return {
 		draggable: !0,
@@ -3601,124 +3765,160 @@ function gr(e, t) {
 				kind: "new",
 				label: e,
 				content: t
-			}), n.dataTransfer.setData(Ue, e), n.dataTransfer.effectAllowed = "copy";
+			}), n.dataTransfer.setData(Ge, e), n.dataTransfer.effectAllowed = "copy";
 		},
 		onDragEnd: () => r.end(),
-		onClick: () => st(n, t())
+		onClick: () => ut(n, t())
 	};
 }
 //#endregion
 //#region src/components/BlocksTab.tsx
-function _r({ template: e, className: t, style: n }) {
-	let r = Gn(), i = Et(e.label, r), a = gr(i, () => e.content(r));
-	return /* @__PURE__ */ L("button", {
+function Er({ template: e, className: t, style: n }) {
+	let r = Qn(), i = Mt(e.label, r), a = Tr(i, () => e.content(r));
+	return /* @__PURE__ */ R("button", {
 		type: "button",
-		className: R("bree-block-card", t),
+		className: z("bree-block-card", t),
 		style: n,
 		...a,
-		children: [e.thumbnail ?? /* @__PURE__ */ I(Z, { variant: "default" }), /* @__PURE__ */ L("span", {
+		children: [e.thumbnail ?? /* @__PURE__ */ L(Z, { variant: "default" }), /* @__PURE__ */ R("span", {
 			className: "bree-block-text",
-			children: [/* @__PURE__ */ I("strong", { children: i }), e.description && /* @__PURE__ */ I("span", { children: Et(e.description, r) })]
+			children: [/* @__PURE__ */ L("strong", { children: i }), e.description && /* @__PURE__ */ L("span", { children: Mt(e.description, r) })]
 		})]
 	});
 }
-function vr({ templates: e, className: t, style: n }) {
+function Dr({ templates: e, className: t, style: n }) {
 	let r = Q();
-	return /* @__PURE__ */ I("div", {
-		className: R("bree-block-list", t),
+	return /* @__PURE__ */ L("div", {
+		className: z("bree-block-list", t),
 		style: n,
-		children: (e ?? r.templates).map((e) => /* @__PURE__ */ I(_r, { template: e }, e.id))
+		children: (e ?? r.templates).map((e) => /* @__PURE__ */ L(Er, { template: e }, e.id))
+	});
+}
+//#endregion
+//#region src/core/email-font.ts
+var Or = ["body", "blockquote"];
+function kr(e) {
+	let { styles: t } = C(e), n = t.flatMap((e) => e.inputs).find((e) => e.prop === "fontFamily" && e.classReference === "body");
+	return String(n?.value ?? "");
+}
+function Ar(e, t) {
+	let { styles: n } = C(e), r = (e) => e.prop === "fontFamily" && Or.includes(e.classReference ?? ""), i = Math.max(0, n.findIndex((e) => e.id === "body")), a = n.map((e, n) => {
+		let a = e.inputs.filter((e) => !r(e));
+		if (n !== i || !t) return {
+			...e,
+			inputs: a
+		};
+		let o = Or.map((e) => ({
+			label: "Font",
+			type: "text",
+			prop: "fontFamily",
+			classReference: e,
+			value: t
+		}));
+		return {
+			...e,
+			inputs: [...a, ...o]
+		};
 	});
+	w(e, a);
 }
 //#endregion
 //#region src/components/BodyTab.tsx
-function yr({ ctx: e, className: t, style: n }) {
-	let { settings: r, updateSettings: i, t: a } = Q(), o = a.body, { findStyleValue: s, setGlobalStyle: c } = e;
-	return /* @__PURE__ */ L("div", {
-		className: R("bree-body-tab", t),
+function jr({ ctx: e, className: t, style: n }) {
+	let { editor: r, settings: i, updateSettings: a, t: o } = Q(), s = o.body, { findStyleValue: c, setGlobalStyle: l } = e;
+	return /* @__PURE__ */ R("div", {
+		className: z("bree-body-tab", t),
 		style: n,
 		children: [
-			/* @__PURE__ */ I(V, {
-				title: o.general,
-				children: /* @__PURE__ */ I(H, {
-					label: o.previewText,
+			/* @__PURE__ */ L(V, {
+				title: s.general,
+				children: /* @__PURE__ */ L(H, {
+					label: s.previewText,
 					stacked: !0,
-					children: /* @__PURE__ */ I(U, {
-						value: r.previewText,
-						onChange: (e) => i({ previewText: e }),
-						placeholder: o.previewTextPlaceholder
+					children: /* @__PURE__ */ L(U, {
+						value: i.previewText,
+						onChange: (e) => a({ previewText: e }),
+						placeholder: s.previewTextPlaceholder
 					})
 				})
 			}),
-			/* @__PURE__ */ L(V, {
-				title: o.background,
-				children: [/* @__PURE__ */ I(H, {
-					label: o.backgroundColor,
+			/* @__PURE__ */ R(V, {
+				title: s.background,
+				children: [/* @__PURE__ */ L(H, {
+					label: s.backgroundColor,
 					stacked: !0,
-					children: /* @__PURE__ */ I(G, {
-						value: s("body", "backgroundColor"),
-						onChange: (e) => c("body", "backgroundColor", e)
+					children: /* @__PURE__ */ L(G, {
+						value: c("body", "backgroundColor"),
+						onChange: (e) => l("body", "backgroundColor", e)
 					})
-				}), /* @__PURE__ */ I(H, {
-					label: o.outerPadding,
-					children: /* @__PURE__ */ I(W, {
-						value: s("body", "padding"),
-						onChange: (e) => c("body", "padding", e)
+				}), /* @__PURE__ */ L(H, {
+					label: s.outerPadding,
+					children: /* @__PURE__ */ L(W, {
+						value: c("body", "padding"),
+						onChange: (e) => l("body", "padding", e)
 					})
 				})]
 			}),
-			/* @__PURE__ */ L(V, {
-				title: o.content,
+			/* @__PURE__ */ R(V, {
+				title: s.content,
 				children: [
-					/* @__PURE__ */ I(H, {
-						label: o.width,
-						children: /* @__PURE__ */ I(W, {
-							value: s("container", "width"),
-							onChange: (e) => c("container", "width", e),
+					/* @__PURE__ */ L(H, {
+						label: s.width,
+						children: /* @__PURE__ */ L(W, {
+							value: c("container", "width"),
+							onChange: (e) => l("container", "width", e),
 							min: 320,
 							max: 900
 						})
 					}),
-					/* @__PURE__ */ I(H, {
-						label: o.contentColor,
+					/* @__PURE__ */ L(H, {
+						label: s.contentColor,
 						stacked: !0,
-						children: /* @__PURE__ */ I(G, {
-							value: s("container", "backgroundColor"),
-							onChange: (e) => c("container", "backgroundColor", e)
+						children: /* @__PURE__ */ L(G, {
+							value: c("container", "backgroundColor"),
+							onChange: (e) => l("container", "backgroundColor", e)
 						})
 					}),
-					/* @__PURE__ */ I(H, {
-						label: o.innerPadding,
-						children: /* @__PURE__ */ I(W, {
-							value: s("container", "padding"),
-							onChange: (e) => c("container", "padding", e)
+					/* @__PURE__ */ L(H, {
+						label: s.innerPadding,
+						children: /* @__PURE__ */ L(W, {
+							value: c("container", "padding"),
+							onChange: (e) => l("container", "padding", e)
 						})
 					}),
-					/* @__PURE__ */ I(H, {
-						label: o.radius,
-						children: /* @__PURE__ */ I(W, {
-							value: s("container", "borderRadius"),
-							onChange: (e) => c("container", "borderRadius", e)
+					/* @__PURE__ */ L(H, {
+						label: s.radius,
+						children: /* @__PURE__ */ L(W, {
+							value: c("container", "borderRadius"),
+							onChange: (e) => l("container", "borderRadius", e)
 						})
 					})
 				]
 			}),
-			/* @__PURE__ */ L(V, {
-				title: o.defaultStyles,
+			/* @__PURE__ */ R(V, {
+				title: s.defaultStyles,
 				children: [
-					/* @__PURE__ */ I(H, {
-						label: o.text,
+					/* @__PURE__ */ L(H, {
+						label: s.font,
+						children: /* @__PURE__ */ L(an, {
+							value: kr(r),
+							emptyLabel: s.fontDefault,
+							onChange: (e) => Ar(r, e)
+						})
+					}),
+					/* @__PURE__ */ L(H, {
+						label: s.text,
 						stacked: !0,
-						children: /* @__PURE__ */ I(G, {
-							value: s("paragraph", "color"),
-							onChange: (e) => c("paragraph", "color", e)
+						children: /* @__PURE__ */ L(G, {
+							value: c("paragraph", "color"),
+							onChange: (e) => l("paragraph", "color", e)
 						})
 					}),
-					/* @__PURE__ */ I(H, {
-						label: o.headings,
+					/* @__PURE__ */ L(H, {
+						label: s.headings,
 						stacked: !0,
-						children: /* @__PURE__ */ I(G, {
-							value: s("h1", "color"),
+						children: /* @__PURE__ */ L(G, {
+							value: c("h1", "color"),
 							onChange: (t) => e.batchSetGlobalStyle([
 								"h1",
 								"h2",
@@ -3730,28 +3930,28 @@ function yr({ ctx: e, className: t, style: n }) {
 							})))
 						})
 					}),
-					/* @__PURE__ */ I(H, {
-						label: o.links,
+					/* @__PURE__ */ L(H, {
+						label: s.links,
 						stacked: !0,
-						children: /* @__PURE__ */ I(G, {
-							value: s("link", "color"),
-							onChange: (e) => c("link", "color", e)
+						children: /* @__PURE__ */ L(G, {
+							value: c("link", "color"),
+							onChange: (e) => l("link", "color", e)
 						})
 					}),
-					/* @__PURE__ */ I(H, {
-						label: o.buttonBackground,
+					/* @__PURE__ */ L(H, {
+						label: s.buttonBackground,
 						stacked: !0,
-						children: /* @__PURE__ */ I(G, {
-							value: s("button", "backgroundColor"),
-							onChange: (e) => c("button", "backgroundColor", e)
+						children: /* @__PURE__ */ L(G, {
+							value: c("button", "backgroundColor"),
+							onChange: (e) => l("button", "backgroundColor", e)
 						})
 					}),
-					/* @__PURE__ */ I(H, {
-						label: o.buttonText,
+					/* @__PURE__ */ L(H, {
+						label: s.buttonText,
 						stacked: !0,
-						children: /* @__PURE__ */ I(G, {
-							value: s("button", "color"),
-							onChange: (e) => c("button", "color", e)
+						children: /* @__PURE__ */ L(G, {
+							value: c("button", "color"),
+							onChange: (e) => l("button", "color", e)
 						})
 					})
 				]
@@ -3761,41 +3961,41 @@ function yr({ ctx: e, className: t, style: n }) {
 }
 //#endregion
 //#region src/components/ContentTab.tsx
-function br({ item: e, className: t, style: n }) {
-	let r = Gn(), i = Et(e.label, r), a = gr(i, () => e.content(r));
-	return /* @__PURE__ */ L("button", {
+function Mr({ item: e, className: t, style: n }) {
+	let r = Qn(), i = Mt(e.label, r), a = Tr(i, () => e.content(r));
+	return /* @__PURE__ */ R("button", {
 		type: "button",
-		className: R("bree-tile", t),
+		className: z("bree-tile", t),
 		style: n,
 		title: r.t.sidebar.tileTitle(i),
 		...a,
-		children: [/* @__PURE__ */ I("span", {
+		children: [/* @__PURE__ */ L("span", {
 			className: "bree-tile-icon",
 			children: e.icon
-		}), /* @__PURE__ */ I("span", {
+		}), /* @__PURE__ */ L("span", {
 			className: "bree-tile-label",
 			children: i
 		})]
 	});
 }
-function xr({ items: e, groups: t, hint: n, className: r, style: i }) {
+function Nr({ items: e, groups: t, hint: n, className: r, style: i }) {
 	let a = Q(), o = e ?? a.palette, s = t ?? a.paletteGroups, c = [...s, ...[...new Set(o.map((e) => e.group))].filter((e) => !s.some((t) => t.id === e)).map((e) => ({
 		id: e,
 		title: e
 	}))];
-	return /* @__PURE__ */ L("div", {
-		className: R("bree-content-tab", r),
+	return /* @__PURE__ */ R("div", {
+		className: z("bree-content-tab", r),
 		style: i,
 		children: [c.map((e) => {
 			let t = o.filter((t) => t.group === e.id);
-			return t.length ? /* @__PURE__ */ L("section", { children: [/* @__PURE__ */ I("h3", {
+			return t.length ? /* @__PURE__ */ R("section", { children: [/* @__PURE__ */ L("h3", {
 				className: "bree-panel-title",
-				children: Et(e.title, a)
-			}), /* @__PURE__ */ I("div", {
+				children: Mt(e.title, a)
+			}), /* @__PURE__ */ L("div", {
 				className: "bree-tiles",
-				children: t.map((e) => /* @__PURE__ */ I(br, { item: e }, e.id))
+				children: t.map((e) => /* @__PURE__ */ L(Mr, { item: e }, e.id))
 			})] }, e.id) : null;
-		}), n !== null && /* @__PURE__ */ I("p", {
+		}), n !== null && /* @__PURE__ */ L("p", {
 			className: "bree-hint",
 			children: n ?? a.t.sidebar.dragHint
 		})]
@@ -3803,7 +4003,7 @@ function xr({ items: e, groups: t, hint: n, className: r, style: i }) {
 }
 //#endregion
 //#region src/components/ContentPanel.tsx
-function Sr({ ctx: e, tabs: t = [
+function Pr({ ctx: e, tabs: t = [
 	"content",
 	"blocks",
 	"body"
@@ -3812,34 +4012,34 @@ function Sr({ ctx: e, tabs: t = [
 		content: {
 			id: "content",
 			label: a.sidebar.tabContent,
-			render: () => /* @__PURE__ */ I(xr, {})
+			render: () => /* @__PURE__ */ L(Nr, {})
 		},
 		blocks: {
 			id: "blocks",
 			label: a.sidebar.tabBlocks,
-			render: () => /* @__PURE__ */ I(vr, {})
+			render: () => /* @__PURE__ */ L(Dr, {})
 		},
 		body: {
 			id: "body",
 			label: a.sidebar.tabBody,
-			render: (e) => /* @__PURE__ */ I(yr, { ctx: e })
+			render: (e) => /* @__PURE__ */ L(jr, { ctx: e })
 		}
-	}, s = t.map((e) => typeof e == "string" ? o[e] : e), [c, u] = l(n ?? s[0]?.id), d = s.find((e) => e.id === c) ?? s[0];
-	return /* @__PURE__ */ L("div", {
-		className: R("bree-content-panel", r),
+	}, s = t.map((e) => typeof e == "string" ? o[e] : e), [c, l] = u(n ?? s[0]?.id), d = s.find((e) => e.id === c) ?? s[0];
+	return /* @__PURE__ */ R("div", {
+		className: z("bree-content-panel", r),
 		style: i,
-		children: [s.length > 1 && /* @__PURE__ */ I("nav", {
+		children: [s.length > 1 && /* @__PURE__ */ L("nav", {
 			className: "bree-tabs",
 			role: "tablist",
-			children: s.map((e) => /* @__PURE__ */ I("button", {
+			children: s.map((e) => /* @__PURE__ */ L("button", {
 				type: "button",
 				role: "tab",
 				"aria-selected": e.id === d?.id,
-				className: R(e.id === d?.id && "bree-active"),
-				onClick: () => u(e.id),
+				className: z(e.id === d?.id && "bree-active"),
+				onClick: () => l(e.id),
 				children: e.label
 			}, e.id))
-		}), /* @__PURE__ */ I("div", {
+		}), /* @__PURE__ */ L("div", {
 			className: "bree-panel-scroll",
 			children: d?.render(e)
 		})]
@@ -3847,66 +4047,66 @@ function Sr({ ctx: e, tabs: t = [
 }
 //#endregion
 //#region src/components/TextProperties.tsx
-function Cr({ ctx: e, className: t, style: n }) {
+function Fr({ ctx: e, className: t, style: n }) {
 	let r = $(), i = r.inspector, a = [
 		{
 			mark: "bold",
-			Icon: oe,
+			Icon: j,
 			title: i.bold
 		},
 		{
 			mark: "italic",
-			Icon: pe,
+			Icon: he,
 			title: i.italic
 		},
 		{
 			mark: "underline",
-			Icon: De,
+			Icon: ke,
 			title: i.underline
 		},
 		{
 			mark: "strike",
-			Icon: P,
+			Icon: Te,
 			title: i.strike
 		}
 	];
-	return /* @__PURE__ */ L(mr, {
+	return /* @__PURE__ */ R(Cr, {
 		title: r.sidebar.selectedText,
 		className: t,
 		style: n,
 		children: [
-			/* @__PURE__ */ I(V, {
+			/* @__PURE__ */ L(V, {
 				title: i.formatting,
-				children: /* @__PURE__ */ I("div", {
+				children: /* @__PURE__ */ L("div", {
 					className: "bree-mark-row",
-					children: a.map(({ mark: t, Icon: n, title: r }) => /* @__PURE__ */ I("button", {
+					children: a.map(({ mark: t, Icon: n, title: r }) => /* @__PURE__ */ L("button", {
 						type: "button",
 						title: r,
 						"aria-pressed": !!e.marks[t],
-						className: R("bree-mark", e.marks[t] && "bree-active"),
+						className: z("bree-mark", e.marks[t] && "bree-active"),
 						onClick: () => e.toggleMark(t),
-						children: /* @__PURE__ */ I(n, { size: 14 })
+						children: /* @__PURE__ */ L(n, { size: 14 })
 					}, t))
 				})
 			}),
-			/* @__PURE__ */ I(tn, {
+			/* @__PURE__ */ L(ln, {
 				ctx: e,
 				alignment: e.alignment,
 				setAlignment: e.setAlignment
 			}),
-			e.isLinkActive && /* @__PURE__ */ L(V, {
+			e.isLinkActive && /* @__PURE__ */ R(V, {
 				title: i.link,
-				children: [/* @__PURE__ */ I(H, {
+				children: [/* @__PURE__ */ L(H, {
 					label: i.url,
 					stacked: !0,
-					children: /* @__PURE__ */ I("span", {
+					children: /* @__PURE__ */ L("span", {
 						className: "bree-readonly",
 						children: e.linkHref
 					})
-				}), /* @__PURE__ */ I(H, {
+				}), /* @__PURE__ */ L(H, {
 					label: i.linkColor,
 					stacked: !0,
-					children: /* @__PURE__ */ I(G, {
+					children: /* @__PURE__ */ L(G, {
 						value: e.linkColor,
 						presets: e.presetColors,
 						onChange: e.setLinkColor
@@ -3918,32 +4118,32 @@ function Cr({ ctx: e, className: t, style: n }) {
 }
 //#endregion
 //#region src/components/Sidebar.tsx
-function wr({ renderDocument: e = (e) => /* @__PURE__ */ I(Sr, { ctx: e }), renderNode: t = (e) => /* @__PURE__ */ I(hr, { ctx: e }), renderText: n = (e) => /* @__PURE__ */ I(Cr, { ctx: e }), className: r, style: i }) {
+function Ir({ renderDocument: e = (e) => /* @__PURE__ */ L(Pr, { ctx: e }), renderNode: t = (e) => /* @__PURE__ */ L(wr, { ctx: e }), renderText: n = (e) => /* @__PURE__ */ L(Fr, { ctx: e }), className: r, style: i }) {
 	let { t: a } = Q();
-	return /* @__PURE__ */ L(M.Root, {
-		className: R("bree-sidebar", r),
+	return /* @__PURE__ */ R(N.Root, {
+		className: z("bree-sidebar", r),
 		style: i,
 		"aria-label": a.sidebar.label,
 		children: [
-			/* @__PURE__ */ I(M.Document, { children: e }),
-			/* @__PURE__ */ I(M.Node, { children: t }),
-			/* @__PURE__ */ I(M.Text, { children: n })
+			/* @__PURE__ */ L(N.Document, { children: e }),
+			/* @__PURE__ */ L(N.Node, { children: t }),
+			/* @__PURE__ */ L(N.Text, { children: n })
 		]
 	});
 }
 //#endregion
 //#region src/components/PreviewDialog.tsx
-function Tr(e, t, n) {
+function Lr(e, t, n) {
 	let r = URL.createObjectURL(new Blob([t], { type: n })), i = document.createElement("a");
 	i.href = r, i.download = e, i.click(), URL.revokeObjectURL(r);
 }
-function Er({ onClose: e, defaultView: t = "desktop", views: n = [
+function Rr({ onClose: e, defaultView: t = "desktop", views: n = [
 	"desktop",
 	"mobile",
 	"html",
 	"text"
 ], filename: r = "email.html", className: a, style: o }) {
-	let { handle: s, settings: c, t: u } = Q(), [d, f] = l(t), [p, m] = l(null), [h, g] = l(null), [_, v] = l(!1);
+	let { handle: s, settings: c, t: l } = Q(), [d, f] = u(t), [p, m] = u(null), [h, g] = u(null), [_, v] = u(!1);
 	i(() => {
 		let e = !1;
 		return s.exportEmail().then((t) => !e && m(t)).catch((t) => !e && g(t instanceof Error ? t.message : String(t))), () => {
@@ -3955,77 +4155,77 @@ function Er({ onClose: e, defaultView: t = "desktop", views: n = [
 	}, [e]);
 	let y = async () => {
 		p && (await navigator.clipboard.writeText(d === "text" ? p.text : p.html), v(!0), setTimeout(() => v(!1), 1500));
-	}, b = u.preview;
-	return Re(/* @__PURE__ */ I(j, { children: /* @__PURE__ */ I("div", {
+	}, b = l.preview;
+	return Be(/* @__PURE__ */ L(M, { children: /* @__PURE__ */ L("div", {
 		className: "bree bree-modal-backdrop",
 		onMouseDown: (t) => t.target === t.currentTarget && e(),
-		children: /* @__PURE__ */ L("div", {
-			className: R("bree-modal", a),
+		children: /* @__PURE__ */ R("div", {
+			className: z("bree-modal", a),
 			style: o,
 			role: "dialog",
 			"aria-modal": "true",
 			"aria-label": b.dialogLabel,
-			children: [/* @__PURE__ */ L("header", {
+			children: [/* @__PURE__ */ R("header", {
 				className: "bree-modal-header",
-				children: [/* @__PURE__ */ I("nav", {
+				children: [/* @__PURE__ */ L("nav", {
 					className: "bree-tabs bree-compact",
 					role: "tablist",
-					children: n.map((e) => /* @__PURE__ */ I("button", {
+					children: n.map((e) => /* @__PURE__ */ L("button", {
 						type: "button",
 						role: "tab",
 						"aria-selected": d === e,
-						className: R(d === e && "bree-active"),
+						className: z(d === e && "bree-active"),
 						onClick: () => f(e),
 						children: b[e]
 					}, e))
-				}), /* @__PURE__ */ L("div", {
+				}), /* @__PURE__ */ R("div", {
 					className: "bree-modal-actions",
 					children: [
-						p && (d === "html" || d === "text") && /* @__PURE__ */ I("button", {
+						p && (d === "html" || d === "text") && /* @__PURE__ */ L("button", {
 							type: "button",
 							className: "bree-btn",
 							onClick: y,
 							children: _ ? b.copied : b.copy
 						}),
-						p && /* @__PURE__ */ I("button", {
+						p && /* @__PURE__ */ L("button", {
 							type: "button",
 							className: "bree-btn bree-primary",
-							onClick: () => Tr(r, p.unformattedHtml, "text/html"),
+							onClick: () => Lr(r, p.unformattedHtml, "text/html"),
 							children: b.download
 						}),
-						/* @__PURE__ */ I("button", {
+						/* @__PURE__ */ L("button", {
 							type: "button",
 							className: "bree-icon-button",
 							onClick: e,
 							title: b.close,
-							children: /* @__PURE__ */ I(Oe, { size: 18 })
+							children: /* @__PURE__ */ L(Ae, { size: 18 })
 						})
 					]
 				})]
-			}), /* @__PURE__ */ L("div", {
+			}), /* @__PURE__ */ R("div", {
 				className: "bree-modal-body",
 				children: [
-					h && /* @__PURE__ */ I("p", {
+					h && /* @__PURE__ */ L("p", {
 						className: "bree-error",
 						children: b.renderError(h)
 					}),
-					!p && !h && /* @__PURE__ */ I("p", {
+					!p && !h && /* @__PURE__ */ L("p", {
 						className: "bree-loading",
 						children: b.rendering
 					}),
-					p && (d === "desktop" || d === "mobile") && /* @__PURE__ */ I("div", {
-						className: R("bree-preview-frame", `bree-preview-${d}`),
-						children: /* @__PURE__ */ I("iframe", {
+					p && (d === "desktop" || d === "mobile") && /* @__PURE__ */ L("div", {
+						className: z("bree-preview-frame", `bree-preview-${d}`),
+						children: /* @__PURE__ */ L("iframe", {
 							title: b.iframeTitle,
 							srcDoc: p.html,
 							sandbox: "allow-same-origin allow-popups"
 						})
 					}),
-					p && d === "html" && /* @__PURE__ */ I("pre", {
+					p && d === "html" && /* @__PURE__ */ L("pre", {
 						className: "bree-code",
 						children: p.html
 					}),
-					p && d === "text" && /* @__PURE__ */ I("pre", {
+					p && d === "text" && /* @__PURE__ */ L("pre", {
 						className: "bree-code",
 						children: p.text
 					})
@@ -4036,81 +4236,81 @@ function Er({ onClose: e, defaultView: t = "desktop", views: n = [
 }
 //#endregion
 //#region src/components/TopBar.tsx
-function Dr({ className: e, style: t }) {
+function zr({ className: e, style: t }) {
 	let { layersOpen: n, setLayersOpen: r, t: i } = Q();
-	return /* @__PURE__ */ L("button", {
+	return /* @__PURE__ */ R("button", {
 		type: "button",
-		className: R("bree-btn bree-ghost bree-layers-toggle", n && "bree-active", e),
+		className: z("bree-btn bree-ghost bree-layers-toggle", n && "bree-active", e),
 		style: t,
 		"aria-pressed": n,
 		onClick: () => r(!n),
 		title: i.topBar.toggleLayers,
 		children: [
-			/* @__PURE__ */ I(zt, {}),
+			/* @__PURE__ */ L(Gt, {}),
 			" ",
 			i.topBar.layers
 		]
 	});
 }
-function Or({ className: e, style: t }) {
-	let { editor: n, t: r } = Q(), i = h({
+function Br({ className: e, style: t }) {
+	let { editor: n, t: r } = Q(), i = g({
 		editor: n,
 		selector: ({ editor: e }) => ({
 			undo: !!e?.can().undo(),
 			redo: !!e?.can().redo()
 		})
 	});
-	return /* @__PURE__ */ L("div", {
-		className: R("bree-btn-group", e),
+	return /* @__PURE__ */ R("div", {
+		className: z("bree-btn-group", e),
 		style: t,
-		children: [/* @__PURE__ */ I("button", {
+		children: [/* @__PURE__ */ L("button", {
 			type: "button",
 			className: "bree-icon-button",
 			title: r.topBar.undo,
 			disabled: !i?.undo,
 			onClick: () => n.chain().focus().undo().run(),
-			children: /* @__PURE__ */ I(Ft, {})
-		}), /* @__PURE__ */ I("button", {
+			children: /* @__PURE__ */ L(Vt, {})
+		}), /* @__PURE__ */ L("button", {
 			type: "button",
 			className: "bree-icon-button",
 			title: r.topBar.redo,
 			disabled: !i?.redo,
 			onClick: () => n.chain().focus().redo().run(),
-			children: /* @__PURE__ */ I(It, {})
+			children: /* @__PURE__ */ L(Ht, {})
 		})]
 	});
 }
-function kr({ className: e, style: t }) {
+function Vr({ className: e, style: t }) {
 	let { device: n, setDevice: r, t: i } = Q(), a = [{
 		id: "desktop",
 		label: i.topBar.desktop,
-		Icon: Lt
+		Icon: Ut
 	}, {
 		id: "mobile",
 		label: i.topBar.mobile,
-		Icon: Rt
+		Icon: Wt
 	}];
-	return /* @__PURE__ */ I("div", {
-		className: R("bree-segmented bree-device-toggle", e),
+	return /* @__PURE__ */ L("div", {
+		className: z("bree-segmented bree-device-toggle", e),
 		style: t,
 		role: "radiogroup",
 		"aria-label": i.topBar.canvasWidth,
-		children: a.map(({ id: e, label: t, Icon: i }) => /* @__PURE__ */ I("button", {
+		children: a.map(({ id: e, label: t, Icon: i }) => /* @__PURE__ */ L("button", {
 			type: "button",
 			role: "radio",
 			"aria-checked": n === e,
-			className: R(n === e && "bree-active"),
+			className: z(n === e && "bree-active"),
 			onClick: () => r(e),
 			title: t,
-			children: /* @__PURE__ */ I(i, {})
+			children: /* @__PURE__ */ L(i, {})
 		}, e))
 	});
 }
-function Ar({ className: e, style: t }) {
+function Hr({ className: e, style: t }) {
 	let { editor: n, starterDocument: r, locale: i, t: a } = Q();
-	return /* @__PURE__ */ I("button", {
+	return /* @__PURE__ */ L("button", {
 		type: "button",
-		className: R("bree-btn bree-ghost", e),
+		className: z("bree-btn bree-ghost", e),
 		style: t,
 		onClick: () => {
 			confirm(a.topBar.confirmTemplate) && n.commands.setContent(r({
@@ -4121,21 +4321,21 @@ function Ar({ className: e, style: t }) {
 		children: a.topBar.template
 	});
 }
-function jr({ className: e, style: t }) {
-	let { handle: n, t: r } = Q(), i = c(null), a = async (e) => {
+function Ur({ className: e, style: t }) {
+	let { handle: n, t: r } = Q(), i = l(null), a = async (e) => {
 		try {
 			n.setValue(JSON.parse(await e.text()));
 		} catch (e) {
 			alert(r.topBar.invalidFile(e instanceof Error ? e.message : String(e)));
 		}
 	};
-	return /* @__PURE__ */ L(F, { children: [/* @__PURE__ */ I("button", {
+	return /* @__PURE__ */ R(I, { children: [/* @__PURE__ */ L("button", {
 		type: "button",
-		className: R("bree-btn bree-ghost", e),
+		className: z("bree-btn bree-ghost", e),
 		style: t,
 		onClick: () => i.current?.click(),
 		children: r.topBar.import
-	}), /* @__PURE__ */ I("input", {
+	}), /* @__PURE__ */ L("input", {
 		ref: i,
 		type: "file",
 		accept: "application/json,.json",
@@ -4146,82 +4346,86 @@ function jr({ className: e, style: t }) {
 		}
 	})] });
 }
-function Mr({ className: e, style: t, filename: n = "email.json" }) {
+function Wr({ className: e, style: t, filename: n = "email.json" }) {
 	let { handle: r, t: i } = Q();
-	return /* @__PURE__ */ I("button", {
+	return /* @__PURE__ */ L("button", {
 		type: "button",
-		className: R("bree-btn bree-ghost", e),
+		className: z("bree-btn bree-ghost", e),
 		style: t,
-		onClick: () => Tr(n, JSON.stringify(r.getValue(), null, 2), "application/json"),
+		onClick: () => Lr(n, JSON.stringify(r.getValue(), null, 2), "application/json"),
 		children: i.topBar.exportJson
 	});
 }
-function Nr({ view: e = "desktop", variant: t = "default", children: n, className: r, style: i }) {
-	let { t: a } = Q(), [o, s] = l(!1);
-	return /* @__PURE__ */ L(F, { children: [/* @__PURE__ */ I("button", {
+function Gr({ view: e = "desktop", variant: t = "default", children: n, className: r, style: i }) {
+	let { t: a } = Q(), [o, s] = u(!1);
+	return /* @__PURE__ */ R(I, { children: [/* @__PURE__ */ L("button", {
 		type: "button",
-		className: R("bree-btn", t !== "default" && `bree-${t}`, r),
+		className: z("bree-btn", t !== "default" && `bree-${t}`, r),
 		style: i,
 		onClick: () => s(!0),
 		children: n ?? a.topBar.preview
-	}), o && /* @__PURE__ */ I(Er, {
+	}), o && /* @__PURE__ */ L(Rr, {
 		defaultView: e,
 		onClose: () => s(!1)
 	})] });
 }
-function Pr(e) {
+function Kr(e) {
 	let { t } = Q();
-	return /* @__PURE__ */ I(Nr, {
+	return /* @__PURE__ */ L(Gr, {
 		view: "html",
 		variant: "primary",
 		...e,
 		children: t.topBar.exportHtml
 	});
 }
-function Fr({ brand: e, actions: t, children: n, className: r, style: i }) {
-	return /* @__PURE__ */ I(j, { children: /* @__PURE__ */ L("header", {
-		className: R("bree-topbar", r),
+function qr({ brand: e, actions: t, children: n, className: r, style: i }) {
+	return /* @__PURE__ */ L(M, { children: /* @__PURE__ */ R("header", {
+		className: z("bree-topbar", r),
 		style: i,
-		children: [/* @__PURE__ */ I("div", {
+		children: [/* @__PURE__ */ L("div", {
 			className: "bree-topbar-start",
 			children: e
-		}), n ?? /* @__PURE__ */ L(F, { children: [/* @__PURE__ */ I("div", {
+		}), n ?? /* @__PURE__ */ R(I, { children: [/* @__PURE__ */ L("div", {
 			className: "bree-topbar-center",
-			children: /* @__PURE__ */ I(kr, {})
-		}), /* @__PURE__ */ L("div", {
+			children: /* @__PURE__ */ L(Vr, {})
+		}), /* @__PURE__ */ R("div", {
 			className: "bree-topbar-actions",
-			children: [t, /* @__PURE__ */ I(Pr, {})]
+			children: [t, /* @__PURE__ */ L(Kr, {})]
 		})] })]
 	}) });
 }
 //#endregion
 //#region src/components/BetterEmailEditor.tsx
-function Ir({ showTopBar: e = !0, showLayers: t = !0, showSidebar: n = !0, components: r = {}, slotProps: i = {} }) {
-	let { layersOpen: a } = Q(), { TopBar: o = Fr, LayersPanel: s = dr, Canvas: c = ar, Sidebar: l = wr } = r, u = t && a;
-	return /* @__PURE__ */ L("div", {
-		className: R("bree-layout", e && "bree-with-topbar", u && "bree-with-layers", n && "bree-with-sidebar"),
+function Jr({ showTopBar: e = !0, showLayers: t = !0, showSidebar: n = !0, showEmailHeader: r = !1, components: i = {}, slotProps: a = {} }) {
+	let { layersOpen: o } = Q(), { TopBar: s = qr, LayersPanel: c = br, Canvas: l = mr, Sidebar: u = Ir } = i, d = t && o;
+	return /* @__PURE__ */ R("div", {
+		className: z("bree-layout", e && "bree-with-topbar", d && "bree-with-layers", n && "bree-with-sidebar"),
 		children: [
-			e && /* @__PURE__ */ I(o, { ...i.topBar }),
-			u && /* @__PURE__ */ I(s, { ...i.layersPanel }),
-			/* @__PURE__ */ I(c, { ...i.canvas }),
-			n && /* @__PURE__ */ I(l, { ...i.sidebar })
+			e && /* @__PURE__ */ L(s, { ...a.topBar }),
+			d && /* @__PURE__ */ L(c, { ...a.layersPanel }),
+			/* @__PURE__ */ L(l, {
+				header: r,
+				...a.canvas
+			}),
+			n && /* @__PURE__ */ L(u, { ...a.sidebar })
 		]
 	});
 }
-var Lr = t(function({ showTopBar: e, showLayers: t, showSidebar: n, components: r, slotProps: i, ...a }, o) {
-	return /* @__PURE__ */ I(Qn, {
-		ref: o,
-		...a,
-		children: /* @__PURE__ */ I(Ir, {
+var Yr = t(function({ showTopBar: e, showLayers: t, showSidebar: n, showEmailHeader: r, components: i, slotProps: a, ...o }, s) {
+	return /* @__PURE__ */ L(ar, {
+		ref: s,
+		...o,
+		children: /* @__PURE__ */ L(Jr, {
 			showTopBar: e,
 			showLayers: t,
 			showSidebar: n,
-			components: r,
-			slotProps: i
+			showEmailHeader: r,
+			components: i,
+			slotProps: a
 		})
 	});
 });
 //#endregion
-export { $t as AlignInput, Ve as BLOCK_CONTAINERS, Lr as BetterEmailEditor, hr as BlockProperties, vr as BlocksTab, yr as BodyTab, rn as BoxGroup, an as ButtonInspector, He as COLUMN_PARENTS, ar as Canvas, rr as CanvasOverlay, G as ColorInput, on as ColumnsInspector, fn as ContainerInspector, Sr as ContentPanel, xr as ContentTab, Yt as DEFAULT_SWATCHES, fr as DefaultInspector, kr as DeviceToggle, dn as DividerInspector, Qn as EditorRoot, ct as EmailButton, Pr as ExportHtmlButton, Mr as ExportJsonButton, H as Field, V as Group, sn as HeadingInspector, xn as HtmlBlock, un as HtmlInspector, cn as ImageInspector, jr as ImportButton, dr as LayersPanel, Dr as LayersToggle, W as NumberInput, en as PaddingInput, br as PaletteTile, Nr as PreviewButton, Er as PreviewDialog, mr as PropertiesPanel, Jt as RangeInput, gn as SOCIAL_NETWORKS, Qt as Segmented, Zt as Select, wr as Sidebar, bn as SocialLinks, Sn as SocialLinksInspector, hn as Spacer, ln as SpacerInspector, nn as SpacingGroup, Ar as TemplateButton, _r as TemplateCard, Z as TemplateThumbnail, Kt as TextArea, U as TextInput, Cr as TextProperties, Fr as TopBar, tn as TypographyGroup, Or as UndoRedo, st as appendBlocks, $e as applyDrop, Dn as content, Hn as createStarterDocument, K as css, R as cx, En as defaultNodes, zn as defaultPalette, Rn as defaultPaletteGroups, Bn as defaultTemplates, Kn as defaultTheme, ot as deleteUnit, Tr as download, at as duplicateUnit, Ct as en, Je as findDropTarget, wt as fr, vn as iconUrl, At as icons, pn as inlineStyleToObject, Tt as locales, Ln as menuParagraph, nt as parentUnit, qn as readFileAsDataUrl, Et as resolveLabel, kt as resolveMessages, it as selectUnit, rt as selectedUnit, wn as textPreview, Xt as toHex, Cn as truncate, z as unitAt, pr as useDeselect, gr as useDraggableBlock, Q as useEmailEditor, Gn as useI18n, $ as useMessages, Wn as useOptionalEmailEditor };
+export { sn as AlignInput, Ue as BLOCK_CONTAINERS, Yr as BetterEmailEditor, wr as BlockProperties, Dr as BlocksTab, jr as BodyTab, un as BoxGroup, dn as ButtonInspector, We as COLUMN_PARENTS, mr as Canvas, ur as CanvasOverlay, G as ColorInput, fn as ColumnsInspector, vn as ContainerInspector, Pr as ContentPanel, Nr as ContentTab, tn as DEFAULT_SWATCHES, xr as DefaultInspector, Vr as DeviceToggle, _n as DividerInspector, ar as EditorRoot, dt as EmailButton, fr as EmailHeader, Kr as ExportHtmlButton, Wr as ExportJsonButton, H as Field, an as FontInput, V as Group, pn as HeadingInspector, Dn as HtmlBlock, gn as HtmlInspector, mn as ImageInspector, Ur as ImportButton, br as LayersPanel, zr as LayersToggle, W as NumberInput, cn as PaddingInput, Mr as PaletteTile, Gr as PreviewButton, Rr as PreviewDialog, Cr as PropertiesPanel, en as RangeInput, Sn as SOCIAL_NETWORKS, on as Segmented, rn as Select, Ir as Sidebar, En as SocialLinks, On as SocialLinksInspector, xn as Spacer, hn as SpacerInspector, q as SpacingGroup, Hr as TemplateButton, Er as TemplateCard, Z as TemplateThumbnail, Qt as TextArea, U as TextInput, Fr as TextProperties, qr as TopBar, ln as TypographyGroup, Br as UndoRedo, ut as appendBlocks, tt as applyDrop, Nn as content, Yn as createStarterDocument, K as css, z as cx, wt as defaultFonts, Mn as defaultNodes, Kn as defaultPalette, Gn as defaultPaletteGroups, qn as defaultTemplates, $n as defaultTheme, lt as deleteUnit, Lr as download, ct as duplicateUnit, kt as en, Xe as findDropTarget, Et as findFont, At as fr, wn as iconUrl, It as icons, yn as inlineStyleToObject, jt as locales, Wn as menuParagraph, at as parentUnit, er as readFileAsDataUrl, Mt as resolveLabel, Ft as resolveMessages, st as selectUnit, ot as selectedUnit, An as textPreview, nn as toHex, kn as truncate, rt as unitAt, Sr as useDeselect, Tr as useDraggableBlock, Q as useEmailEditor, Qn as useI18n, $ as useMessages, Zn as useOptionalEmailEditor };
 
 //# sourceMappingURL=index.js.map