better-react-email-editor 0.1.4 → 0.1.7

package/dist/index.js

@@ -1,28 +1,29 @@
-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 { 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 k, Selection as A, TextSelection as j } 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 { Extension as te, mergeAttributes as ne } from "@tiptap/core";
+import { ReplaceStep as re } from "@tiptap/pm/transform";
+import { Decoration as ie, DecorationSet as ae } from "@tiptap/pm/view";
+import { AlignCenterIcon as oe, AlignLeftIcon as se, AlignRightIcon as ce, BoldIcon as le, BubbleMenu as ue, CodeIcon as de, Columns2Icon as fe, Columns3Icon as pe, Columns4Icon as me, EditorFocusScope as M, Heading1Icon as he, ImageIcon as ge, Inspector as N, ItalicIcon as _e, LayoutIcon as ve, LinkIcon as ye, ListIcon as be, ListOrderedIcon as xe, MinusIcon as Se, MousePointerClickIcon as P, PanelLeftIcon as Ce, PanelTopIcon as we, PlusIcon as F, SlashCommand as Te, SquareCodeIcon as Ee, StrikethroughIcon as De, TableIcon as Oe, TextQuoteIcon as ke, TypeIcon as Ae, UnderlineIcon as je, XIcon as Me, defaultSlashCommands as Ne } from "@react-email/editor/ui";
+import { Fragment as Pe, jsx as I, jsxs as L } from "react/jsx-runtime";
+import * as Fe from "@radix-ui/react-popover";
+import { HexColorInput as Ie, HexColorPicker as Le } from "react-colorful";
+import { Column as Re, Img as ze, Link as Be, Row as Ve, Section as He } from "react-email";
+import { createPortal as Ue } from "react-dom";
 //#region \0rolldown/runtime.js
-var ze = Object.defineProperty, Be = (e, t) => {
+var We = Object.defineProperty, Ge = (e, t) => {
 	let n = {};
-	for (var r in e) ze(n, r, {
+	for (var r in e) We(n, r, {
 		get: e[r],
 		enumerable: !0
 	});
-	return t || ze(n, Symbol.toStringTag, { value: "Module" }), n;
+	return t || We(n, Symbol.toStringTag, { value: "Module" }), n;
 };
 //#endregion
 //#region src/core/cx.ts
@@ -31,23 +32,23 @@ function R(...e) {
 }
 //#endregion
 //#region src/core/dnd.ts
-var Ve = /* @__PURE__ */ new Set([
+var Ke = /* @__PURE__ */ new Set([
 	"container",
 	"section",
 	"columnsColumn"
-]), He = /* @__PURE__ */ new Set([
+]), qe = /* @__PURE__ */ new Set([
 	"twoColumns",
 	"threeColumns",
 	"fourColumns"
-]), Ue = "application/x-email-block";
-function We(e, t) {
+]), Je = "application/x-email-block";
+function Ye(e, t) {
 	let n = e.nodeDOM(t);
 	return n instanceof HTMLElement ? n.getBoundingClientRect() : null;
 }
-function Ge(e, t, n) {
+function Xe(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 = Ye(e, a);
 		o && r.push({
 			node: t,
 			pos: a,
@@ -55,10 +56,10 @@ function Ge(e, t, n) {
 		});
 	}), r;
 }
-function Ke(e) {
+function Ze(e) {
 	return e.type.name === "paragraph" && e.childCount === 0;
 }
-function qe(e) {
+function Qe(e) {
 	let t = null;
 	return e.forEach((e, n) => {
 		!t && e.type.name === "container" && (t = {
@@ -67,28 +68,28 @@ function qe(e) {
 		});
 	}), t;
 }
-function Je(e, t, n, r, i) {
-	let a = qe(e.state.doc);
+function $e(e, t, n, r, i) {
+	let a = Qe(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 = Xe(e, i, a), l = Ye(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 (Ke.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 (qe.has(u)) {
+				let n = Xe(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 && Ze(c[0].node) && !o(c[0].pos)) {
 			let e = c[0];
 			return i.type.validContent(r) ? {
 				pos: e.pos,
@@ -133,57 +134,57 @@ function Je(e, t, n, r, i) {
 	};
 	return s(a.node, a.pos);
 }
-function Ye(e, t) {
+function et(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 tt(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(j.near(e.doc.resolve(t + 1))));
 }
-function Ze(e) {
+function nt(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(A.near(n.resolve(t.from))));
 }
-function Qe(e, t) {
+function rt(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 || !Ze(i) ? t : {
 		...t,
 		pos: t.pos - i.nodeSize
 	};
 }
-function $e(e, t, n) {
+function it(e, t, n) {
 	let { view: r } = e;
-	Ze(r);
-	let i = Ye(r, t);
+	nt(r);
+	let i = et(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 = rt(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), tt(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);
+		at(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);
+		tt(o, s);
 	}
 	return r.dispatch(o.scrollIntoView()), r.focus(), !0;
 }
-function et(e, t, n) {
+function at(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 && Ke.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) {
 	if (t < 0 || t > e.content.size) return null;
@@ -199,14 +200,14 @@ 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 (Ke.has(n) || qe.has(n)) return t;
 	}
 	return null;
 }
-function tt(e) {
+function ot(e) {
 	return e.node.type.name === "columnsColumn";
 }
-function nt(e, t) {
+function st(e, t) {
 	let n = e.resolve(t.pos);
 	for (let r = n.depth; r > 0; r--) {
 		let i = z(e, n.before(r));
@@ -214,40 +215,40 @@ function nt(e, t) {
 	}
 	return null;
 }
-function rt(e) {
+function ct(e) {
 	let { selection: t, doc: n } = e.state;
-	return t instanceof w ? z(n, t.from) ?? {
+	return t instanceof D ? z(n, t.from) ?? {
 		pos: t.from,
 		node: t.node
 	} : z(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 lt(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 ut(e, t) {
 	let { view: n } = e;
-	Ze(n);
+	nt(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 dt(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);
+	at(i, t.pos, t.pos + r.nodeSize), n.dispatch(i);
 }
-function st(e, t) {
-	let n = qe(e.state.doc);
+function ft(e, t) {
+	let n = Qe(e.state.doc);
 	if (!n) return;
 	let r = n.node.lastChild, i = n.pos + n.node.nodeSize - 1;
-	$e(e, {
+	it(e, {
 		kind: "new",
 		label: "",
 		content: () => t
-	}, r && Ke(r) && n.node.childCount > 1 ? {
+	}, r && Ze(r) && n.node.childCount > 1 ? {
 		pos: i - r.nodeSize,
 		replaceTo: i,
 		line: {
@@ -266,7 +267,7 @@ function st(e, t) {
 }
 //#endregion
 //#region src/core/paste.ts
-var ct = v.extend({ parseHTML() {
+var pt = y.extend({ parseHTML() {
 	return [{
 		tag: "a[data-id=\"react-email-button\"]",
 		getAttrs: (e) => {
@@ -281,29 +282,29 @@ var ct = v.extend({ parseHTML() {
 		}
 	}];
 } });
-function lt(e, t) {
+function mt(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 (qe.has(n.parent.type.name) || !n.parent.canReplaceWith(n.index(), n.index(), r)) return !1;
+		i.dispatch(a.tr.setSelection(j.near(n)));
 		let s = i.state.tr.insert(t, r.create());
-		s.setSelection(O.create(s.doc, t + 1)), i.dispatch(s);
+		s.setSelection(j.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 ht = /class="[^"]*node-/, gt = [
 	"script",
 	"iframe",
 	"object",
 	"embed",
 	"meta",
 	"base"
-], ft = ["href", "src"], pt = {
+], _t = ["href", "src"], vt = {
 	a: [
 		"href",
 		"target",
@@ -328,49 +329,49 @@ var ut = /class="[^"]*node-/, dt = [
 	],
 	"*": ["id"]
 };
-function mt(e, t) {
+function yt(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 bt(e) {
+	let t = /* @__PURE__ */ new Set([...vt[e.tagName.toLowerCase()] ?? [], ...vt["*"]]);
 	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 xt(e) {
+	e.nodeType === Node.ELEMENT_NODE && bt(e);
+	for (let t of Array.from(e.childNodes)) xt(t);
 }
-function _t(e) {
+function St(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 gt) 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 _t) {
 			let r = e.getAttribute(n);
-			r !== null && !mt(r, t) && e.removeAttribute(n);
+			r !== null && !yt(r, t) && e.removeAttribute(n);
 		}
 	}
-	return ut.test(e) || gt(t.body), t.body.innerHTML;
+	return ht.test(e) || xt(t.body), t.body.innerHTML;
 }
-function vt(e) {
+function Ct(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 = ee(St(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 wt = /* @__PURE__ */ new Set(["columnsColumn", "codeBlock"]), Tt = te.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 (wt.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 +379,87 @@ 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(j.create(t.doc, a, o))), !0;
 		} };
 	},
 	addProseMirrorPlugins() {
-		return [new T({
-			key: new E("selectAllFix"),
+		return [new O({
+			key: new k("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 j) || r.$from.parent.inlineContent && r.$to.parent.inlineContent || !e.some((e) => e.steps.some((e) => e instanceof re && 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 j && 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(A.findFrom(s, 1, !0) ?? A.near(s));
 			}
 		})];
 	}
-});
+}), Et = te.create({
+	name: "focusedSpellcheck",
+	addProseMirrorPlugins() {
+		let { editor: e } = this;
+		return [new O({
+			key: new k("focusedSpellcheck"),
+			props: {
+				attributes: { spellcheck: "false" },
+				decorations: (t) => {
+					if (!e.isFocused) return ae.empty;
+					let { from: n, to: r, $from: i } = t.selection, a = [];
+					return t.doc.nodesBetween(n, r, (e, t) => !e.isTextblock || (a.push(ie.node(t, t + e.nodeSize, { spellcheck: "true" })), !1)), !a.length && i.parent.isTextblock && i.depth > 0 && a.push(ie.node(i.before(), i.after(), { spellcheck: "true" })), ae.create(t.doc, a);
+				}
+			}
+		})];
+	}
+}), Dt = [
+	{
+		label: "Inter",
+		value: "Inter, Arial, Helvetica, sans-serif",
+		href: "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap"
+	},
+	{
+		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 Ot(e) {
+	return e.split(",")[0].trim().replace(/^['"]|['"]$/g, "").toLowerCase();
+}
+function kt(e, t) {
+	if (!t) return;
+	let n = Ot(t);
+	return e.find((e) => Ot(e.value) === n);
+}
+function At(e, t) {
+	let n = /* @__PURE__ */ new Set();
+	for (let t of e.matchAll(/font-family:\s*([^;"]+)/gi)) n.add(Ot(t[1].replace(/&#x27;|&quot;/g, "'")));
+	return t.filter((e) => e.href && n.has(Ot(e.value)));
+}
+function jt(e, t) {
+	let n = At(e, t).map((e) => `<link href="${e.href.replace(/&/g, "&amp;")}" rel="stylesheet" />`).join("");
+	return n ? e.replace("</head>", `${n}</head>`) : e;
+}
 //#endregion
 //#region src/core/stores.ts
-function xt() {
+function Mt() {
 	let e = null;
 	return {
 		get: () => e,
@@ -411,7 +471,7 @@ function xt() {
 		}
 	};
 }
-function St() {
+function Nt() {
 	let e = null, t = /* @__PURE__ */ new Set();
 	return {
 		get: () => e,
@@ -428,7 +488,7 @@ function St() {
 }
 //#endregion
 //#region src/i18n/en.ts
-var Ct = {
+var Pt = {
 	topBar: {
 		layers: "Layers",
 		toggleLayers: "Show / hide layers",
@@ -473,6 +533,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 +552,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 +562,8 @@ var Ct = {
 	},
 	inspector: {
 		typography: "Typography",
+		font: "Font",
+		fontDefault: "Default (email font)",
 		color: "Color",
 		size: "Size",
 		weight: "Weight",
@@ -697,7 +767,7 @@ var Ct = {
 		starterTitle: "Our favourites"
 	},
 	slashCommands: {}
-}, wt = {
+}, Ft = {
 	topBar: {
 		layers: "Calques",
 		toggleLayers: "Afficher / masquer les calques",
@@ -742,6 +812,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 +831,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 +841,8 @@ var Ct = {
 	},
 	inspector: {
 		typography: "Typographie",
+		font: "Police",
+		fontDefault: "Par défaut (police de l’email)",
 		color: "Couleur",
 		size: "Taille",
 		weight: "Graisse",
@@ -1023,43 +1103,43 @@ var Ct = {
 			description: "Mise en page sur quatre colonnes"
 		}
 	}
-}, Tt = {
-	en: Ct,
-	fr: wt
+}, It = {
+	en: Pt,
+	fr: Ft
 };
-function Et(e, t) {
+function Lt(e, t) {
 	return typeof e == "function" ? e(t) : e;
 }
-function Dt(e) {
+function Rt(e) {
 	return typeof e == "object" && !!e && !Array.isArray(e);
 }
-function Ot(e, t) {
-	if (!Dt(t) || !Dt(e)) return t ?? e;
+function zt(e, t) {
+	if (!Rt(t) || !Rt(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] = Rt(r) && Rt(n[e]) ? zt(n[e], r) : r);
 	return n;
 }
-function kt(e, t) {
-	let n = Tt[e] ?? Ct;
-	return t ? Ot(n, t) : n;
+function Bt(e, t) {
+	let n = It[e] ?? Pt;
+	return t ? zt(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 Vt = /* @__PURE__ */ Ge({
+	CopyIcon: () => Ut,
+	DesktopIcon: () => Jt,
+	GripIcon: () => Ht,
+	LayersIcon: () => Xt,
+	MobileIcon: () => Yt,
+	OneColumnIcon: () => tn,
+	ParentIcon: () => Gt,
+	PipetteIcon: () => Zt,
+	RedoIcon: () => qt,
+	SocialIcon: () => en,
+	SpacerIcon: () => Qt,
+	SpacerTileIcon: () => $t,
+	TrashIcon: () => Wt,
+	UndoIcon: () => Kt
 }), B = (e, t = 2) => ({
 	viewBox: "0 0 24 24",
 	width: e,
@@ -1070,7 +1150,7 @@ var At = /* @__PURE__ */ Be({
 	strokeLinecap: "round",
 	strokeLinejoin: "round",
 	"aria-hidden": !0
-}), jt = ({ size: e = 14 }) => /* @__PURE__ */ I("svg", {
+}), Ht = ({ size: e = 14 }) => /* @__PURE__ */ I("svg", {
 	viewBox: "0 0 24 24",
 	width: e,
 	height: e,
@@ -1089,7 +1169,7 @@ var At = /* @__PURE__ */ Be({
 		cy: e,
 		r: "1.6"
 	})] }, e))
-}), Mt = ({ size: e = 14 }) => /* @__PURE__ */ L("svg", {
+}), Ut = ({ size: e = 14 }) => /* @__PURE__ */ L("svg", {
 	...B(e),
 	children: [/* @__PURE__ */ I("rect", {
 		x: "8",
@@ -1098,19 +1178,19 @@ var At = /* @__PURE__ */ Be({
 		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", {
+}), Wt = ({ size: e = 14 }) => /* @__PURE__ */ I("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", {
+}), Gt = ({ size: e = 14 }) => /* @__PURE__ */ I("svg", {
 	...B(e),
 	children: /* @__PURE__ */ I("path", { d: "M12 19V5M6 11l6-6 6 6" })
-}), Ft = ({ size: e = 16 }) => /* @__PURE__ */ L("svg", {
+}), Kt = ({ size: e = 16 }) => /* @__PURE__ */ L("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", {
+}), qt = ({ size: e = 16 }) => /* @__PURE__ */ L("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", {
+}), Jt = ({ size: e = 16 }) => /* @__PURE__ */ L("svg", {
 	...B(e),
 	children: [/* @__PURE__ */ I("rect", {
 		x: "3",
@@ -1119,7 +1199,7 @@ var At = /* @__PURE__ */ Be({
 		height: "12",
 		rx: "2"
 	}), /* @__PURE__ */ I("path", { d: "M8 20h8M12 16v4" })]
-}), Rt = ({ size: e = 16 }) => /* @__PURE__ */ L("svg", {
+}), Yt = ({ size: e = 16 }) => /* @__PURE__ */ L("svg", {
 	...B(e),
 	children: [/* @__PURE__ */ I("rect", {
 		x: "7",
@@ -1128,23 +1208,23 @@ var At = /* @__PURE__ */ Be({
 		height: "20",
 		rx: "2"
 	}), /* @__PURE__ */ I("path", { d: "M11 18h2" })]
-}), zt = ({ size: e = 16 }) => /* @__PURE__ */ L("svg", {
+}), Xt = ({ size: e = 16 }) => /* @__PURE__ */ L("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", {
+}), Zt = ({ size: e = 15 }) => /* @__PURE__ */ L("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" })
 	]
-}), Vt = ({ size: e = 14 }) => /* @__PURE__ */ I("svg", {
+}), Qt = ({ size: e = 14 }) => /* @__PURE__ */ I("svg", {
 	...B(e),
 	children: /* @__PURE__ */ I("path", { d: "M4 4h16M4 20h16M12 8v8" })
-}), Ht = ({ size: e = 22 }) => /* @__PURE__ */ I("svg", {
+}), $t = ({ size: e = 22 }) => /* @__PURE__ */ I("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", {
+}), en = ({ size: e = 22 }) => /* @__PURE__ */ L("svg", {
 	...B(e, 1.8),
 	children: [
 		/* @__PURE__ */ I("circle", {
@@ -1164,7 +1244,7 @@ var At = /* @__PURE__ */ Be({
 		}),
 		/* @__PURE__ */ I("path", { d: "m8.2 10.8 7.6-3.6M8.2 13.2l7.6 3.6" })
 	]
-}), Wt = ({ size: e = 22 }) => /* @__PURE__ */ I("svg", {
+}), tn = ({ size: e = 22 }) => /* @__PURE__ */ I("svg", {
 	...B(e, 1.8),
 	children: /* @__PURE__ */ I("rect", {
 		x: "4",
@@ -1177,7 +1257,7 @@ 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);
+	let [a, o] = u(n);
 	return /* @__PURE__ */ L("section", {
 		className: R("bree-group", r),
 		style: i,
@@ -1210,12 +1290,12 @@ function H({ label: e, children: t, stacked: n, className: r, style: i }) {
 		})]
 	});
 }
-function Gt(e) {
-	let [t, n] = l(e), [r, i] = l(e);
+function nn(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);
+	let [o, s] = nn(e);
 	return /* @__PURE__ */ I("input", {
 		className: R("bree-input", i),
 		style: a,
@@ -1229,8 +1309,8 @@ 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);
+function rn({ value: e, onChange: t, rows: n = 8, className: r, style: i }) {
+	let [a, o] = nn(e);
 	return /* @__PURE__ */ I("textarea", {
 		className: R("bree-input bree-textarea", r),
 		style: i,
@@ -1241,13 +1321,13 @@ function Kt({ value: e, onChange: t, rows: n = 8, className: r, style: i }) {
 		onBlur: () => a !== e && t(a)
 	});
 }
-function qt(e) {
+function an(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] = nn(String(an(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)));
@@ -1265,7 +1345,7 @@ 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 = (an(u) || 0) + (e.key === "ArrowUp" ? a : -a) * (e.shiftKey ? 10 : 1);
 					d(String(t)), f(String(t));
 				}
 			}
@@ -1275,8 +1355,8 @@ function W({ value: e, onChange: t, unit: n = "px", min: r = 0, max: i, step: a
 		})]
 	});
 }
-function Jt({ value: e, onChange: t, min: n, max: r, unit: i = "px", className: a, style: o }) {
-	let s = qt(e) || n;
+function on({ value: e, onChange: t, min: n, max: r, unit: i = "px", className: a, style: o }) {
+	let s = an(e) || n;
 	return /* @__PURE__ */ L("span", {
 		className: R("bree-range", a),
 		style: o,
@@ -1292,7 +1372,7 @@ function Jt({ value: e, onChange: t, min: n, max: r, unit: i = "px", className:
 		})]
 	});
 }
-var Yt = [
+var sn = [
 	"#111827",
 	"#374151",
 	"#6b7280",
@@ -1312,26 +1392,26 @@ var Yt = [
 	"#ecfdf5",
 	"#fef3c7"
 ];
-function Xt(e) {
+function cn(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 = sn, placeholder: a, className: o, style: s, popoverClassName: c }) {
+	let d = $(), f = a ?? d.fields.colorDefault, p = typeof e == "string" ? e : "", m = cn(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(cn(e) ?? _), y.current(e);
+	}, T = typeof window < "u" ? window.EyeDropper : void 0, E = [...new Set(n.map((e) => cn(e)).filter((e) => !!e))].slice(0, 9);
+	return /* @__PURE__ */ L(Fe.Root, {
 		open: h,
 		onOpenChange: (e) => {
 			e ? v(m ?? "#ffffff") : S(), g(e);
@@ -1339,7 +1419,7 @@ function G({ value: e, onChange: t, presets: n = [], swatches: r = Yt, placehold
 		children: [/* @__PURE__ */ L("span", {
 			className: R("bree-color-field", o),
 			style: s,
-			children: [/* @__PURE__ */ I(Ae.Trigger, {
+			children: [/* @__PURE__ */ I(Fe.Trigger, {
 				asChild: !0,
 				children: /* @__PURE__ */ I("button", {
 					type: "button",
@@ -1352,15 +1432,15 @@ function G({ value: e, onChange: t, presets: n = [], swatches: r = Yt, placehold
 				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__ */ I(Fe.Portal, { children: /* @__PURE__ */ I(M, { children: /* @__PURE__ */ L(Fe.Content, {
+			className: R("bree bree-color-popover", c),
 			side: "left",
 			align: "start",
 			sideOffset: 10,
 			collisionPadding: 12,
 			onOpenAutoFocus: (e) => e.preventDefault(),
 			children: [
-				/* @__PURE__ */ I(Me, {
+				/* @__PURE__ */ I(Le, {
 					color: _,
 					onChange: C
 				}),
@@ -1373,7 +1453,7 @@ function G({ value: e, onChange: t, presets: n = [], swatches: r = Yt, placehold
 						}),
 						/* @__PURE__ */ L("label", {
 							className: "bree-hex-field",
-							children: [/* @__PURE__ */ I("span", { children: "#" }), /* @__PURE__ */ I(je, {
+							children: [/* @__PURE__ */ I("span", { children: "#" }), /* @__PURE__ */ I(Ie, {
 								color: _,
 								onChange: w,
 								"aria-label": d.fields.hexCode
@@ -1384,11 +1464,11 @@ function G({ value: e, onChange: t, presets: n = [], swatches: r = Yt, placehold
 							className: "bree-icon-button",
 							title: d.fields.eyedropper,
 							onClick: () => new T().open().then((e) => w(e.sRGBHex)).catch(() => {}),
-							children: /* @__PURE__ */ I(Bt, {})
+							children: /* @__PURE__ */ I(Zt, {})
 						})
 					]
 				}),
-				E.length > 0 && /* @__PURE__ */ L(F, { children: [/* @__PURE__ */ I("span", {
+				E.length > 0 && /* @__PURE__ */ L(Pe, { children: [/* @__PURE__ */ I("span", {
 					className: "bree-color-popover-title",
 					children: d.fields.documentColors
 				}), /* @__PURE__ */ I("div", {
@@ -1427,7 +1507,7 @@ function G({ value: e, onChange: t, presets: n = [], swatches: r = Yt, placehold
 		}) }) })]
 	});
 }
-function Zt({ value: e, onChange: t, options: n, className: r, style: i }) {
+function ln({ value: e, onChange: t, options: n, className: r, style: i }) {
 	return /* @__PURE__ */ I("select", {
 		className: R("bree-input bree-select", r),
 		style: i,
@@ -1439,7 +1519,30 @@ function Zt({ value: e, onChange: t, options: n, className: r, style: i }) {
 		}, e))
 	});
 }
-function Qt({ value: e, onChange: t, options: n, ariaLabel: r, className: i, style: a }) {
+function un({ value: e, onChange: t, emptyLabel: n, className: r, style: i }) {
+	let a = nr()?.fonts ?? Dt, o = kt(a, e), s = e && !o ? {
+		label: e.split(",")[0].replace(/['"]/g, "").trim(),
+		value: e
+	} : null, c = s ? [...a, s] : a;
+	return /* @__PURE__ */ L("select", {
+		className: R("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__ */ I("option", {
+			value: "",
+			children: n ?? ""
+		}), c.map((e) => /* @__PURE__ */ I("option", {
+			value: e.value,
+			style: { fontFamily: e.value },
+			children: e.label
+		}, e.value))]
+	});
+}
+function dn({ value: e, onChange: t, options: n, ariaLabel: r, className: i, style: a }) {
 	return /* @__PURE__ */ I("span", {
 		className: R("bree-segmented", i),
 		style: a,
@@ -1456,9 +1559,9 @@ function Qt({ value: e, onChange: t, options: n, ariaLabel: r, className: i, sty
 		}, n.value))
 	});
 }
-function $t({ value: e, onChange: t, className: n, style: r }) {
+function fn({ value: e, onChange: t, className: n, style: r }) {
 	let i = $();
-	return /* @__PURE__ */ I(Qt, {
+	return /* @__PURE__ */ I(dn, {
 		className: n,
 		style: r,
 		value: e || "left",
@@ -1466,29 +1569,29 @@ function $t({ value: e, onChange: t, className: n, style: r }) {
 		options: [
 			{
 				value: "left",
-				label: /* @__PURE__ */ I(ie, { size: 14 }),
+				label: /* @__PURE__ */ I(se, { size: 14 }),
 				title: i.fields.alignLeft
 			},
 			{
 				value: "center",
-				label: /* @__PURE__ */ I(re, { size: 14 }),
+				label: /* @__PURE__ */ I(oe, { size: 14 }),
 				title: i.fields.alignCenter
 			},
 			{
 				value: "right",
-				label: /* @__PURE__ */ I(ae, { size: 14 }),
+				label: /* @__PURE__ */ I(ce, { size: 14 }),
 				title: i.fields.alignRight
 			}
 		]
 	});
 }
-function en({ get: e, set: t, className: n, style: r }) {
+function pn({ 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) => an(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,
@@ -1514,7 +1617,7 @@ function en({ get: e, set: t, className: n, style: r }) {
 			children: [/* @__PURE__ */ I("input", {
 				type: "checkbox",
 				checked: c,
-				onChange: (e) => u(e.target.checked)
+				onChange: (e) => l(e.target.checked)
 			}), i.fields.moreOptions]
 		})]
 	});
@@ -1522,13 +1625,21 @@ 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 mn({ ctx: e, alignment: t, setAlignment: n, className: r, style: i }) {
 	let a = $().inspector;
 	return /* @__PURE__ */ L(V, {
 		title: a.typography,
 		className: r,
 		style: i,
 		children: [
+			/* @__PURE__ */ I(H, {
+				label: a.font,
+				children: /* @__PURE__ */ I(un, {
+					value: e.getStyle(K("fontFamily")),
+					emptyLabel: a.fontDefault,
+					onChange: (t) => e.setStyle(K("fontFamily"), t)
+				})
+			}),
 			/* @__PURE__ */ I(H, {
 				label: a.color,
 				stacked: !0,
@@ -1549,7 +1660,7 @@ function tn({ ctx: e, alignment: t, setAlignment: n, className: r, style: i }) {
 			}),
 			/* @__PURE__ */ I(H, {
 				label: a.weight,
-				children: /* @__PURE__ */ I(Zt, {
+				children: /* @__PURE__ */ I(ln, {
 					value: String(e.getStyle(K("fontWeight")) ?? "400"),
 					onChange: (t) => e.setStyle(K("fontWeight"), t),
 					options: [
@@ -1574,7 +1685,7 @@ function tn({ ctx: e, alignment: t, setAlignment: n, className: r, style: i }) {
 			}),
 			n && /* @__PURE__ */ I(H, {
 				label: a.alignment,
-				children: /* @__PURE__ */ I($t, {
+				children: /* @__PURE__ */ I(fn, {
 					value: t ?? "left",
 					onChange: n
 				})
@@ -1582,7 +1693,7 @@ 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, {
 		title: t ?? i.inspector.spacing,
@@ -1591,7 +1702,7 @@ function nn({ ctx: e, title: t, className: n, style: r }) {
 		children: /* @__PURE__ */ I(H, {
 			label: i.inspector.padding,
 			stacked: !0,
-			children: /* @__PURE__ */ I(en, {
+			children: /* @__PURE__ */ I(pn, {
 				get: (t) => e.getStyle(K(`padding${t}`)) ?? e.getStyle(K("padding")),
 				set: (t) => e.batchSetStyle([{
 					prop: K("padding"),
@@ -1604,7 +1715,7 @@ function nn({ ctx: e, title: t, className: n, style: r }) {
 		})
 	});
 }
-function rn({ ctx: e, className: t, style: n }) {
+function hn({ ctx: e, className: t, style: n }) {
 	let r = $().inspector;
 	return /* @__PURE__ */ L(V, {
 		title: r.box,
@@ -1654,7 +1765,7 @@ function rn({ ctx: e, className: t, style: n }) {
 }
 //#endregion
 //#region src/components/inspectors/ButtonInspector.tsx
-function an({ ctx: e, className: t, style: n }) {
+function gn({ ctx: e, className: t, style: n }) {
 	let r = $().inspector;
 	return /* @__PURE__ */ L("div", {
 		className: R("bree-inspector", t),
@@ -1677,7 +1788,7 @@ function an({ ctx: e, className: t, style: n }) {
 				children: [
 					/* @__PURE__ */ I(H, {
 						label: r.alignment,
-						children: /* @__PURE__ */ I($t, {
+						children: /* @__PURE__ */ I(fn, {
 							value: String(e.getAttr("alignment") ?? "left"),
 							onChange: (t) => e.setAttr("alignment", t)
 						})
@@ -1718,7 +1829,7 @@ function an({ ctx: e, className: t, style: n }) {
 					})
 				]
 			}),
-			/* @__PURE__ */ I(nn, {
+			/* @__PURE__ */ I(q, {
 				ctx: e,
 				title: r.buttonPadding
 			})
@@ -1727,7 +1838,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 _n({ ctx: e, className: t, style: n }) {
 	let { editor: r, t: i } = Q(), a = i.inspector, o = {
 		twoColumns: 2,
 		threeColumns: 3,
@@ -1760,7 +1871,7 @@ 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),
@@ -1801,7 +1912,7 @@ function on({ ctx: e, className: t, style: n }) {
 }
 //#endregion
 //#region src/components/inspectors/HeadingInspector.tsx
-function sn({ ctx: e, className: t, style: n }) {
+function vn({ ctx: e, className: t, style: n }) {
 	let r = $();
 	return /* @__PURE__ */ L("div", {
 		className: R("bree-inspector", t),
@@ -1811,7 +1922,7 @@ function sn({ ctx: e, className: t, style: n }) {
 				title: r.inspector.heading,
 				children: /* @__PURE__ */ I(H, {
 					label: r.inspector.level,
-					children: /* @__PURE__ */ I(Qt, {
+					children: /* @__PURE__ */ I(dn, {
 						value: String(e.getAttr("level") ?? 1),
 						onChange: (t) => e.setAttr("level", Number(t)),
 						options: [
@@ -1831,19 +1942,19 @@ function sn({ ctx: e, className: t, style: n }) {
 					})
 				})
 			}),
-			/* @__PURE__ */ I(tn, {
+			/* @__PURE__ */ I(mn, {
 				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__ */ I(q, { ctx: e }),
+			/* @__PURE__ */ I(hn, { ctx: e })
 		]
 	});
 }
 //#endregion
 //#region src/components/inspectors/ImageInspector.tsx
-function cn({ ctx: e, className: t, style: n }) {
+function yn({ 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),
@@ -1903,7 +2014,7 @@ function cn({ ctx: e, className: t, style: n }) {
 					}),
 					o !== "auto" && /* @__PURE__ */ I(H, {
 						label: a.width,
-						children: /* @__PURE__ */ I(Jt, {
+						children: /* @__PURE__ */ I(on, {
 							value: o,
 							min: 20,
 							max: 900,
@@ -1912,7 +2023,7 @@ function cn({ ctx: e, className: t, style: n }) {
 					}),
 					/* @__PURE__ */ I(H, {
 						label: a.alignment,
-						children: /* @__PURE__ */ I($t, {
+						children: /* @__PURE__ */ I(fn, {
 							value: String(e.getAttr("alignment") ?? "center"),
 							onChange: (t) => e.setAttr("alignment", t)
 						})
@@ -1938,13 +2049,13 @@ function cn({ ctx: e, className: t, style: n }) {
 					})
 				})
 			}),
-			/* @__PURE__ */ I(nn, { ctx: e })
+			/* @__PURE__ */ I(q, { ctx: e })
 		]
 	});
 }
 //#endregion
 //#region src/components/inspectors/SimpleInspectors.tsx
-function ln({ ctx: e, className: t, style: n }) {
+function bn({ ctx: e, className: t, style: n }) {
 	let r = $();
 	return /* @__PURE__ */ I("div", {
 		className: R("bree-inspector", t),
@@ -1953,7 +2064,7 @@ function ln({ ctx: e, className: t, style: n }) {
 			title: r.inspector.spacer,
 			children: /* @__PURE__ */ I(H, {
 				label: r.inspector.height,
-				children: /* @__PURE__ */ I(Jt, {
+				children: /* @__PURE__ */ I(on, {
 					value: e.getAttr("height"),
 					min: 4,
 					max: 160,
@@ -1963,14 +2074,14 @@ function ln({ ctx: e, className: t, style: n }) {
 		})
 	});
 }
-function un({ ctx: e, className: t, style: n }) {
+function xn({ ctx: e, className: t, style: n }) {
 	let r = $();
 	return /* @__PURE__ */ I("div", {
 		className: R("bree-inspector", t),
 		style: n,
 		children: /* @__PURE__ */ L(V, {
 			title: r.inspector.htmlCode,
-			children: [/* @__PURE__ */ I(Kt, {
+			children: [/* @__PURE__ */ I(rn, {
 				value: String(e.getAttr("html") ?? ""),
 				onChange: (t) => e.setAttr("html", t),
 				rows: 14
@@ -1981,7 +2092,7 @@ function un({ ctx: e, className: t, style: n }) {
 		})
 	});
 }
-function dn({ ctx: e, className: t, style: n }) {
+function Sn({ ctx: e, className: t, style: n }) {
 	let r = $().inspector;
 	return /* @__PURE__ */ I("div", {
 		className: R("bree-inspector", t),
@@ -2015,7 +2126,7 @@ function dn({ ctx: e, className: t, style: n }) {
 				}),
 				/* @__PURE__ */ I(H, {
 					label: r.lineStyle,
-					children: /* @__PURE__ */ I(Qt, {
+					children: /* @__PURE__ */ I(dn, {
 						value: String(e.getStyle(K("borderTopStyle")) ?? "solid"),
 						onChange: (t) => e.setStyle(K("borderTopStyle"), t),
 						options: [
@@ -2038,16 +2149,16 @@ function dn({ ctx: e, className: t, style: n }) {
 		})
 	});
 }
-function fn({ ctx: e, className: t, style: n }) {
+function Cn({ ctx: e, className: t, style: n }) {
 	return /* @__PURE__ */ L("div", {
 		className: R("bree-inspector", t),
 		style: n,
-		children: [/* @__PURE__ */ I(rn, { ctx: e }), /* @__PURE__ */ I(nn, { ctx: e })]
+		children: [/* @__PURE__ */ I(hn, { ctx: e }), /* @__PURE__ */ I(q, { ctx: e })]
 	});
 }
 //#endregion
 //#region src/core/style-utils.ts
-function pn(e) {
+function wn(e) {
 	if (typeof e != "string" || !e.trim()) return {};
 	let t = {};
 	for (let n of e.split(";")) {
@@ -2060,18 +2171,18 @@ function pn(e) {
 }
 //#endregion
 //#region src/nodes/custom-nodes.tsx
-var mn = { style: {
+var Tn = { style: {
 	default: null,
 	parseHTML: (e) => e.getAttribute("style"),
 	renderHTML: (e) => e.style ? { style: e.style } : {}
-} }, hn = g.create({
+} }, En = _.create({
 	name: "spacer",
 	group: "block",
 	atom: !0,
 	selectable: !0,
 	addAttributes() {
 		return {
-			...mn,
+			...Tn,
 			height: {
 				default: 32,
 				parseHTML: (e) => Number(e.dataset.height) || 32,
@@ -2083,7 +2194,7 @@ var mn = { style: {
 		return [{ tag: "div[data-type=\"spacer\"]" }];
 	},
 	renderHTML({ node: e, HTMLAttributes: t }) {
-		return ["div", te(t, {
+		return ["div", ne(t, {
 			"data-type": "spacer",
 			class: "node-spacer",
 			style: `height:${Number(e.attrs.height)}px`
@@ -2091,17 +2202,17 @@ var mn = { style: {
 	},
 	renderToReactEmail({ node: e }) {
 		let t = Number(e.attrs?.height ?? 32);
-		return /* @__PURE__ */ I(Le, {
+		return /* @__PURE__ */ I(He, {
 			style: {
 				height: t,
 				lineHeight: `${t}px`,
 				fontSize: "1px",
-				...pn(e.attrs?.style)
+				...wn(e.attrs?.style)
 			},
 			children: "\xA0"
 		});
 	}
-}), gn = {
+}), Dn = {
 	facebook: {
 		label: "Facebook",
 		slug: "facebook",
@@ -2137,13 +2248,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;
+}, On = { linkedin: "https://cdn.jsdelivr.net/npm/simple-icons@9.21.0/icons/linkedin.svg" };
+function kn(e) {
+	if (On[e]) return On[e];
+	let t = Dn[e] ?? Dn.facebook;
 	return `https://cdn.simpleicons.org/${t.slug}/${t.color}`;
 }
-function yn(e) {
+function An(e) {
 	if (Array.isArray(e)) return e;
 	if (typeof e == "string") try {
 		return JSON.parse(e);
@@ -2152,14 +2263,14 @@ function yn(e) {
 	}
 	return [];
 }
-var bn = g.create({
+var jn = _.create({
 	name: "socialLinks",
 	group: "block",
 	atom: !0,
 	selectable: !0,
 	addAttributes() {
 		return {
-			...mn,
+			...Tn,
 			links: {
 				default: [
 					{
@@ -2179,7 +2290,7 @@ var bn = g.create({
 						url: "https://linkedin.com/"
 					}
 				],
-				parseHTML: (e) => yn(e.dataset.links),
+				parseHTML: (e) => An(e.dataset.links),
 				renderHTML: (e) => ({ "data-links": JSON.stringify(e.links ?? []) })
 			},
 			size: { default: 28 },
@@ -2191,10 +2302,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 = An(e.attrs.links);
 		return [
 			"div",
-			te(t, {
+			ne(t, {
 				"data-type": "social-links",
 				class: "node-socialLinks",
 				alignment: e.attrs.alignment
@@ -2206,37 +2317,37 @@ var bn = g.create({
 					style: `margin-left:${t === 0 ? 0 : r}px`
 				},
 				["img", {
-					src: vn(e.network),
+					src: kn(e.network),
 					width: String(n),
 					height: String(n),
-					alt: gn[e.network]?.label ?? e.network
+					alt: Dn[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 = An(e.attrs?.links), i = e.attrs?.alignment ?? "center";
+		return /* @__PURE__ */ I(He, {
+			style: wn(e.attrs?.style),
+			children: /* @__PURE__ */ I(Ve, { children: /* @__PURE__ */ I(Re, {
 				align: i,
-				children: r.map((e, r) => /* @__PURE__ */ I(Fe, {
+				children: r.map((e, r) => /* @__PURE__ */ I(Be, {
 					href: e.url,
 					style: {
 						display: "inline-block",
 						marginLeft: r === 0 ? 0 : n
 					},
-					children: /* @__PURE__ */ I(Pe, {
-						src: vn(e.network),
+					children: /* @__PURE__ */ I(ze, {
+						src: kn(e.network),
 						width: t,
 						height: t,
-						alt: gn[e.network]?.label ?? e.network
+						alt: Dn[e.network]?.label ?? e.network
 					})
 				}, `${e.network}-${r}`))
 			}) })
 		});
 	}
-}), xn = g.create({
+}), Mn = _.create({
 	name: "htmlBlock",
 	group: "block",
 	atom: !0,
@@ -2252,7 +2363,7 @@ var bn = g.create({
 		return [{ tag: "div[data-type=\"html-block\"]" }];
 	},
 	renderHTML({ node: e, HTMLAttributes: t }) {
-		return ["div", te(t, {
+		return ["div", ne(t, {
 			"data-type": "html-block",
 			class: "node-htmlBlock",
 			"data-html": e.attrs.html
@@ -2276,7 +2387,7 @@ var bn = g.create({
 });
 //#endregion
 //#region src/components/inspectors/SocialLinksInspector.tsx
-function Sn({ ctx: e, className: t, style: n }) {
+function Nn({ 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),
@@ -2289,13 +2400,13 @@ function Sn({ ctx: e, className: t, style: n }) {
 					children: a.map((e, t) => /* @__PURE__ */ L("div", {
 						className: "bree-social-row",
 						children: [
-							/* @__PURE__ */ I(Zt, {
+							/* @__PURE__ */ I(ln, {
 								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(Dn).map(([e, t]) => [e, t.label])
 							}),
 							/* @__PURE__ */ I(U, {
 								value: e.url,
@@ -2309,7 +2420,7 @@ function Sn({ ctx: e, className: t, style: n }) {
 								className: "bree-icon-button",
 								title: r.removeNetwork,
 								onClick: () => o(a.filter((e, n) => n !== t)),
-								children: /* @__PURE__ */ I(Oe, { size: 14 })
+								children: /* @__PURE__ */ I(Me, { size: 14 })
 							})
 						]
 					}, t))
@@ -2328,7 +2439,7 @@ function Sn({ ctx: e, className: t, style: n }) {
 				children: [
 					/* @__PURE__ */ I(H, {
 						label: r.iconSize,
-						children: /* @__PURE__ */ I(Jt, {
+						children: /* @__PURE__ */ I(on, {
 							value: e.getAttr("size"),
 							min: 16,
 							max: 64,
@@ -2337,7 +2448,7 @@ function Sn({ ctx: e, className: t, style: n }) {
 					}),
 					/* @__PURE__ */ I(H, {
 						label: r.gap,
-						children: /* @__PURE__ */ I(Jt, {
+						children: /* @__PURE__ */ I(on, {
 							value: e.getAttr("gap"),
 							min: 0,
 							max: 40,
@@ -2346,45 +2457,45 @@ function Sn({ ctx: e, className: t, style: n }) {
 					}),
 					/* @__PURE__ */ I(H, {
 						label: r.alignment,
-						children: /* @__PURE__ */ I($t, {
+						children: /* @__PURE__ */ I(fn, {
 							value: String(e.getAttr("alignment") ?? "center"),
 							onChange: (t) => e.setAttr("alignment", t)
 						})
 					})
 				]
 			}),
-			/* @__PURE__ */ I(nn, { ctx: e })
+			/* @__PURE__ */ I(q, { ctx: e })
 		]
 	});
 }
 //#endregion
 //#region src/registry/default-nodes.tsx
-function Cn(e, t = 36) {
+function Pn(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 Fn = (e, { t }) => Pn(e.textContent) || t.layers.empty, In = () => "", Ln = [
 	{
 		type: "paragraph",
-		icon: Ee
+		icon: Ae
 	},
 	{
 		type: "heading",
-		icon: de,
-		inspector: sn
+		icon: he,
+		inspector: vn
 	},
 	{
 		type: "image",
-		icon: fe,
-		inspector: cn,
+		icon: ge,
+		inspector: yn,
 		preview: (e, { t }) => {
 			let { attrs: n } = e;
-			if (n.alt) return Cn(n.alt);
+			if (n.alt) return Pn(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 Pn(e.searchParams.get("text") ?? decodeURIComponent(e.pathname.split("/").pop() ?? ""));
 			} catch {
 				return "";
 			}
@@ -2392,124 +2503,124 @@ var wn = (e, { t }) => Cn(e.textContent) || t.layers.empty, Tn = () => "", En =
 	},
 	{
 		type: "button",
-		icon: ye,
-		inspector: an
+		icon: P,
+		inspector: gn
 	},
 	{
 		type: "horizontalRule",
-		icon: ve,
-		inspector: dn,
-		preview: Tn
+		icon: Se,
+		inspector: Sn,
+		preview: In
 	},
 	{
 		type: "spacer",
-		icon: Vt,
-		inspector: ln,
+		icon: Qt,
+		inspector: bn,
 		preview: (e) => `${e.attrs.height}px`,
-		extensions: [hn]
+		extensions: [En]
 	},
 	{
 		type: "socialLinks",
-		icon: he,
-		inspector: Sn,
+		icon: ye,
+		inspector: Nn,
 		preview: (e) => Array.isArray(e.attrs.links) ? e.attrs.links.map((e) => e.network).join(", ") : "",
-		extensions: [bn]
+		extensions: [jn]
 	},
 	{
 		type: "htmlBlock",
-		icon: Ce,
-		inspector: un,
-		preview: (e) => Cn(String(e.attrs.html ?? "").replace(/<[^>]+>/g, " ")),
-		extensions: [xn]
+		icon: Ee,
+		inspector: xn,
+		preview: (e) => Pn(String(e.attrs.html ?? "").replace(/<[^>]+>/g, " ")),
+		extensions: [Mn]
 	},
 	{
 		type: "section",
-		icon: me,
-		inspector: fn,
-		preview: Tn
+		icon: ve,
+		inspector: Cn,
+		preview: In
 	},
 	{
 		type: "columnsColumn",
-		icon: be,
-		inspector: fn,
-		preview: Tn
+		icon: Ce,
+		inspector: Cn,
+		preview: In
 	},
 	{
 		type: "twoColumns",
-		icon: ce,
-		inspector: on,
-		preview: Tn
+		icon: fe,
+		inspector: _n,
+		preview: In
 	},
 	{
 		type: "threeColumns",
-		icon: le,
-		inspector: on,
-		preview: Tn
+		icon: pe,
+		inspector: _n,
+		preview: In
 	},
 	{
 		type: "fourColumns",
-		icon: ue,
-		inspector: on,
-		preview: Tn
+		icon: me,
+		inspector: _n,
+		preview: In
 	},
 	{
 		type: "bulletList",
-		icon: ge
+		icon: be
 	},
 	{
 		type: "orderedList",
-		icon: _e
+		icon: xe
 	},
 	{
 		type: "blockquote",
-		icon: Te
+		icon: ke
 	},
 	{
 		type: "codeBlock",
-		icon: A
+		icon: de
 	},
 	{
 		type: "table",
-		icon: we
+		icon: Oe
 	}
-], Dn = /* @__PURE__ */ Be({
-	button: () => On,
-	column: () => An,
+], Rn = /* @__PURE__ */ Ge({
+	button: () => Bn,
+	column: () => Hn,
 	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: () => Jn,
+	heading: () => zn,
+	image: () => Vn,
+	link: () => Kn,
+	padding: () => Gn,
+	paragraph: () => Y,
+	placeholderImage: () => qn,
+	section: () => Wn,
+	sized: () => Un,
+	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
+}), zn = (e, t, n = {}) => ({
 	type: "heading",
 	attrs: {
 		level: e,
 		...n
 	},
-	content: [q(t)]
-}), On = (e, t = {}) => ({
+	content: [J(t)]
+}), Bn = (e, t = {}) => ({
 	type: "button",
 	attrs: {
 		href: "https://example.com",
 		alignment: "center",
 		...t
 	},
-	content: [q(e)]
-}), kn = (e, t = {}) => ({
+	content: [J(e)]
+}), Vn = (e, t = {}) => ({
 	type: "image",
 	attrs: {
 		src: e,
@@ -2517,10 +2628,10 @@ var wn = (e, { t }) => Cn(e.textContent) || t.layers.empty, Tn = () => "", En =
 		alignment: "center",
 		...t
 	}
-}), An = (...e) => ({
+}), Hn = (...e) => ({
 	type: "columnsColumn",
-	content: e.length ? e : [J()]
-}), jn = (e, t) => ({
+	content: e.length ? e : [Y()]
+}), Un = (e, t) => ({
 	...e,
 	attrs: {
 		...e.attrs,
@@ -2533,100 +2644,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 }, () => Hn())
+}), Wn = (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) => [{
+}), Gn = (e, t = e) => `padding-top:${e}px;padding-right:${t}px;padding-bottom:${e}px;padding-left:${t}px`, Kn = (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) => ({
+}], qn = (e, t, n = "Image") => `https://placehold.co/${e}x${t}/e2e8f0/64748b/png?text=${encodeURIComponent(n)}`, Jn = (...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 = [{
+}), Yn = ({ t: e }, t = "center") => Y([
+	J(e.content.menuHome, Kn("https://example.com")),
+	J("  ·  "),
+	J(e.content.menuShop, Kn("https://example.com/shop")),
+	J("  ·  "),
+	J(e.content.menuBlog, Kn("https://example.com/blog")),
+	J("  ·  "),
+	J(e.content.menuContact, Kn("https://example.com/contact"))
+], { alignment: t }), Xn = [{
 	id: "layout",
 	title: ({ t: e }) => e.sidebar.layoutTitle
 }, {
 	id: "content",
 	title: ({ t: e }) => e.sidebar.contentTitle
-}], zn = [
+}], Zn = [
 	{
 		id: "section",
 		group: "layout",
 		label: ({ t: e }) => e.palette.oneColumn,
-		icon: /* @__PURE__ */ I(Wt, {}),
-		content: () => [Mn(Nn(16), J())]
+		icon: /* @__PURE__ */ I(tn, {}),
+		content: () => [Wn(Gn(16), Y())]
 	},
 	{
 		id: "columns-2",
 		group: "layout",
 		label: ({ t: e }) => e.palette.twoColumns,
-		icon: /* @__PURE__ */ I(ce, { size: 22 }),
+		icon: /* @__PURE__ */ I(fe, { size: 22 }),
 		content: () => [X(2)]
 	},
 	{
 		id: "columns-3",
 		group: "layout",
 		label: ({ t: e }) => e.palette.threeColumns,
-		icon: /* @__PURE__ */ I(le, { size: 22 }),
+		icon: /* @__PURE__ */ I(pe, { size: 22 }),
 		content: () => [X(3)]
 	},
 	{
 		id: "columns-4",
 		group: "layout",
 		label: ({ t: e }) => e.palette.fourColumns,
-		icon: /* @__PURE__ */ I(ue, { size: 22 }),
+		icon: /* @__PURE__ */ I(me, { 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__ */ I(he, { size: 22 }),
+		content: ({ t: e }) => [zn(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__ */ I(Ae, { 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__ */ I(P, { size: 22 }),
+		content: ({ t: e }) => [Bn(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__ */ I(ge, { size: 22 }),
+		content: ({ t: e }) => [Vn(qn(600, 300, e.content.image))]
 	},
 	{
 		id: "divider",
 		group: "content",
 		label: ({ t: e }) => e.palette.divider,
-		icon: /* @__PURE__ */ I(ve, { size: 22 }),
+		icon: /* @__PURE__ */ I(Se, { size: 22 }),
 		content: () => [{ type: "horizontalRule" }]
 	},
 	{
 		id: "spacer",
 		group: "content",
 		label: ({ t: e }) => e.palette.spacer,
-		icon: /* @__PURE__ */ I(Ht, {}),
+		icon: /* @__PURE__ */ I($t, {}),
 		content: () => [{
 			type: "spacer",
 			attrs: { height: 32 }
@@ -2636,26 +2747,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__ */ I(en, {}),
 		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__ */ I(we, { size: 22 }),
+		content: (e) => [Yn(e)]
 	},
 	{
 		id: "list",
 		group: "content",
 		label: ({ t: e }) => e.palette.list,
-		icon: /* @__PURE__ */ I(ge, { size: 22 }),
+		icon: /* @__PURE__ */ I(be, { size: 22 }),
 		content: ({ t: e }) => [{
 			type: "bulletList",
 			content: e.content.listItems.map((e) => ({
 				type: "listItem",
-				content: [J(e)]
+				content: [Y(e)]
 			}))
 		}]
 	},
@@ -2663,17 +2774,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__ */ I(ke, { 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__ */ I(Ee, { size: 22 }),
 		content: ({ t: e }) => [{
 			type: "htmlBlock",
 			attrs: { html: e.content.html }
@@ -2683,8 +2794,8 @@ 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__ */ I(ve, { size: 22 }),
+		content: ({ t: e }) => [Wn(`${Gn(24)};background-color:#f1f5f9;border-radius:12px`, zn(3, e.content.cardTitle), Y(e.content.cardText))]
 	}
 ];
 //#endregion
@@ -2700,47 +2811,47 @@ function Z({ variant: e }) {
 		]
 	});
 }
-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), {
+		content: (e) => [X(2, [Un(Hn(Vn(qn(140, 40, e.t.content.logo), {
 			alignment: "left",
 			width: "140"
-		})), 33), jn(An(Ln(e, "right")), 67)])]
+		})), 33), Un(Hn(Yn(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` }))]
+		content: ({ t: e }) => [Wn(`${Gn(40, 24)};background-color:#eef2ff;border-radius:12px`, zn(1, e.content.heroTitle, { alignment: "center" }), Y(e.content.heroText, { alignment: "center" }), Bn(e.content.heroButton, { style: `background-color:#4f46e5;color:#ffffff;${Gn(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 })]
+		content: ({ t: e }) => [X(2, [e.content.productA, e.content.productB].map((t) => Hn(Vn(qn(280, 200, t)), zn(3, t, { alignment: "center" }), Y(e.content.productText, { alignment: "center" }), Bn(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" }))))]
+		content: ({ t: e }) => [X(3, e.content.features.map((t) => Hn(zn(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`, {
+		content: ({ t: e }) => [Wn(`${Gn(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"
 		}))]
@@ -2753,18 +2864,18 @@ var Bn = [
 		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, Kn("https://example.com/unsubscribe"))], {
 				alignment: "center",
 				style: "font-size:12px"
 			})
 		]
 	}
-], Vn = (e, t) => Bn.find((t) => t.id === e)?.content(t) ?? [];
-function Hn(e) {
+], $n = (e, t) => Qn.find((t) => t.id === e)?.content(t) ?? [];
+function er(e) {
 	let t = {
 		type: "spacer",
 		attrs: { height: 16 }
@@ -2772,39 +2883,39 @@ function Hn(e) {
 	return {
 		type: "doc",
 		content: [
-			...Vn("header", e),
+			...$n("header", e),
 			t,
-			...Vn("hero", e),
+			...$n("hero", e),
 			t,
-			Y(2, e.t.content.starterTitle, { alignment: "center" }),
-			...Vn("products", e),
+			zn(2, e.t.content.starterTitle, { alignment: "center" }),
+			...$n("products", e),
 			t,
-			...Vn("footer", e)
+			...$n("footer", e)
 		]
 	};
 }
 //#endregion
 //#region src/context.tsx
-var Un = e(null);
+var tr = e(null);
 function Q() {
-	let e = r(Un);
+	let e = r(tr);
 	if (!e) throw Error("useEmailEditor must be used inside <EditorRoot> or <BetterEmailEditor>.");
 	return e;
 }
-function Wn() {
-	return r(Un);
+function nr() {
+	return r(tr);
 }
 function $() {
-	return r(Un)?.t ?? Ct;
+	return r(tr)?.t ?? Pt;
 }
-function Gn() {
+function rr() {
 	let { locale: e, t } = Q();
-	return s(() => ({
+	return c(() => ({
 		locale: e,
 		t
 	}), [e, t]);
 }
-var Kn = x("basic", {
+var ir = S("basic", {
 	body: {
 		backgroundColor: "#eef1f5",
 		padding: "32px 16px"
@@ -2814,185 +2925,207 @@ var Kn = x("basic", {
 		padding: "24px",
 		borderRadius: "12px"
 	}
-}), qn = (e) => new Promise((t, n) => {
+}), ar = (e) => new Promise((t, n) => {
 	let r = new FileReader();
 	r.onload = () => t({ url: String(r.result) }), r.onerror = n, r.readAsDataURL(e);
-}), Jn = {
+}), or = {
 	type: "doc",
 	content: [{ type: "paragraph" }]
 };
-function Yn(e) {
+function sr(e) {
 	return typeof e == "object" && !!e && "doc" in e;
 }
-function Xn(e) {
-	return e ? Yn(e) ? {
+function cr(e) {
+	let t = {
+		subject: "",
+		previewText: ""
+	};
+	return e ? sr(e) ? {
 		doc: e.doc,
 		settings: {
+			...t,
 			...e.settings,
 			previewText: e.settings?.previewText ?? ""
 		}
 	} : {
 		doc: e,
-		settings: { previewText: "" }
+		settings: t
 	} : {
-		doc: Jn,
-		settings: { previewText: "" }
+		doc: or,
+		settings: t
 	};
 }
-function Zn(e, t, r) {
-	let [i, a] = l(t);
+function lr(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 ur = t(function({ defaultValue: e, onChange: t, onReady: r, locale: a = "en", messages: d, nodes: p = Ln, palette: g = Zn, paletteGroups: _ = Xn, templates: y = Qn, fonts: S = Dt, starterDocument: C = er, extensions: w, theme: E = ir, uploadImage: D = ar, editable: O = !0, device: k, defaultDevice: A = "desktop", onDeviceChange: j, layersOpen: ee, defaultLayersOpen: te = !0, onLayersOpenChange: ne, className: re, style: ie, children: ae }, oe) {
+	let se = c(() => Bt(a, d), [a, d]), [ce] = u(() => cr(e)), [le, ue] = u(ce.settings), de = l(le), fe = l(se), pe = l(t), me = l(r), M = l(D), he = l(S);
+	s(() => {
+		fe.current = se, pe.current = t, me.current = r, M.current = D, he.current = S;
 	});
-	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 [ge, N] = lr(k, A, j), [_e, ve] = lr(ee, te, ne), [ye] = u(() => ({
+		dragSession: Mt(),
+		hoverStore: Nt()
+	})), be = n((e) => M.current(e), []), xe = T({ uploadImage: be }), [Se] = 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,
+		pt,
+		Tt,
+		Et,
+		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({
-		extensions: xe,
+		xe
+	]), P = h({
+		extensions: Se,
 		content: ce.doc,
-		editable: D,
+		editable: O,
 		immediatelyRender: !1,
-		editorProps: { handlePaste: vt(xe) }
+		editorProps: { handlePaste: Ct(Se) }
 	}, []);
 	i(() => {
-		N?.setEditable(D);
-	}, [N, D]);
-	let Se = n(() => ({
-		doc: N?.getJSON() ?? Jn,
-		settings: j.current
-	}), [N]), Ce = n((e) => {
+		P?.setEditable(O);
+	}, [P, O]);
+	let Ce = n(() => ({
+		doc: P?.getJSON() ?? or,
+		settings: de.current
+	}), [P]), we = 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 && pe.current?.({
+			doc: P.getJSON(),
 			settings: t
 		});
-	}, [N]), P = s(() => {
-		let e = async () => N ? _({
-			editor: N,
-			preview: j.current.previewText || void 0
-		}) : {
-			html: "",
-			text: "",
-			unformattedHtml: ""
+	}, [P]), F = c(() => {
+		let e = async () => {
+			if (!P) return {
+				html: "",
+				text: "",
+				unformattedHtml: ""
+			};
+			let e = await v({
+				editor: P,
+				preview: de.current.previewText || void 0
+			});
+			return {
+				...e,
+				html: jt(e.html, he.current),
+				unformattedHtml: jt(e.unformattedHtml, he.current)
+			};
 		};
 		return {
-			editor: N,
-			getValue: Se,
-			getJSON: () => N?.getJSON() ?? Jn,
+			editor: P,
+			getValue: Ce,
+			getJSON: () => P?.getJSON() ?? or,
 			setValue: (e) => {
-				let t = Xn(e);
-				j.current = t.settings, ue(t.settings), N?.commands.setContent(t.doc, { emitUpdate: !0 });
+				let t = cr(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 && ft(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, Ce]);
+	o(oe, () => F, [F]), i(() => {
+		if (!P) return;
+		me.current?.(F);
+		let e = () => pe.current?.(Ce());
+		return P.on("update", e), () => {
+			P.off("update", e);
 		};
 	}, [
-		N,
 		P,
-		Se
-	]);
-	let we = s(() => new Map(h.map((e) => [e.type, e])), [h]), Te = s(() => {
-		if (!N) return null;
+		F,
+		Ce
+	]), i(() => {
+		for (let { href: e } of S) {
+			if (!e || document.querySelector(`link[data-bree-font="${CSS.escape(e)}"]`)) continue;
+			let t = document.createElement("link");
+			t.rel = "stylesheet", t.href = e, t.dataset.breeFont = e, document.head.appendChild(t);
+		}
+	}, [S]);
+	let Te = c(() => new Map(p.map((e) => [e.type, e])), [p]), Ee = c(() => {
+		if (!P) return null;
 		let e = {
-			locale: u,
-			t: A
+			locale: a,
+			t: se
 		};
 		return {
 			...e,
-			editor: N,
-			handle: P,
-			nodes: we,
+			editor: P,
+			handle: F,
+			nodes: Te,
 			nodeLabel: (t) => {
-				let n = we.get(t)?.label;
-				return n ? Et(n, e) : A.nodes[t] ?? t;
+				let n = Te.get(t)?.label;
+				return n ? Lt(n, e) : se.nodes[t] ?? t;
 			},
 			palette: g,
-			paletteGroups: v,
-			templates: x,
+			paletteGroups: _,
+			templates: y,
+			fonts: S,
 			starterDocument: C,
-			uploadImage: ye,
-			...ve,
-			device: me,
-			setDevice: he,
-			layersOpen: ge,
-			setLayersOpen: _e,
+			uploadImage: be,
+			...ye,
+			device: ge,
+			setDevice: N,
+			layersOpen: _e,
+			setLayersOpen: ve,
 			settings: le,
-			updateSettings: Ce
+			updateSettings: we
 		};
 	}, [
-		N,
-		u,
-		A,
 		P,
-		we,
+		a,
+		se,
+		F,
+		Te,
 		g,
-		v,
-		x,
+		_,
+		y,
+		S,
 		C,
+		be,
 		ye,
-		ve,
-		me,
-		he,
 		ge,
+		N,
 		_e,
+		ve,
 		le,
-		Ce
-	]), Ee = s(() => ({ editor: N }), [N]), De = {
-		"--bree-empty-zone-label": JSON.stringify(A.canvas.emptyZone),
-		...ae
+		we
+	]), De = c(() => ({ editor: P }), [P]), Oe = {
+		"--bree-empty-zone-label": JSON.stringify(se.canvas.emptyZone),
+		...ie
 	};
 	return /* @__PURE__ */ I("div", {
-		className: R("bree bree-root", ie),
-		style: De,
-		lang: u,
-		children: Te && /* @__PURE__ */ I(p.Provider, {
-			value: Ee,
-			children: /* @__PURE__ */ I(Un.Provider, {
-				value: Te,
-				children: oe
+		className: R("bree bree-root", re),
+		style: Oe,
+		lang: a,
+		children: Ee && /* @__PURE__ */ I(m.Provider, {
+			value: De,
+			children: /* @__PURE__ */ I(tr.Provider, {
+				value: Ee,
+				children: ae
 			})
 		})
 	});
 });
 //#endregion
 //#region src/components/CanvasOverlay.tsx
-function $n(e, t) {
+function dr(e, t) {
 	let n = e.getBoundingClientRect();
 	return {
 		top: t.top - n.top + e.scrollTop,
@@ -3001,38 +3134,38 @@ function $n(e, t) {
 		height: t.height ?? 0
 	};
 }
-function er(e, t, n) {
+function fr(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 ? dr(t, r.getBoundingClientRect()) : null;
 }
-function tr(e, t, n) {
+function pr(e, t, n) {
 	let r = e.view.posAtCoords({
 		left: t,
 		top: n
 	});
 	return r && r.inside >= 0 ? z(e.state.doc, r.inside) : null;
 }
-function nr(e) {
+function mr(e) {
 	let t = e.node.type.name;
-	return Ve.has(t) || He.has(t);
+	return Ke.has(t) || qe.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 hr({ 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 = ct(e);
 			return t ? `${t.pos}:${t.node.type.name}:${e.state.doc.content.size}` : null;
 		}
-	}) ? rt(e) : null;
+	}) ? ct(e) : null;
 	i(() => {
 		let n = () => S(), r = () => {
 			a.set(null), S();
@@ -3050,7 +3183,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(pr(e, t.clientX, t.clientY)?.pos ?? null);
 			}));
 		}, o = () => a.set(null);
 		return t.addEventListener("mousemove", i), t.addEventListener("mouseleave", o), () => {
@@ -3063,7 +3196,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 +3207,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 = pr(e, n.clientX, n.clientY);
+			if (r && mr(r)) {
+				n.preventDefault(), lt(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) && mt(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 +3222,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 = et(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 $e(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 +3236,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 && it(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 = () => {
@@ -3112,15 +3245,15 @@ function rr({ editor: e, host: 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({
+			a && !ot(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 = ct(e), r = n ? st(e.state.doc, n) : null;
+			if (t.preventDefault(), r) lt(e, r);
 			else {
 				let t = document.activeElement;
 				t instanceof HTMLElement && t.blur(), e.commands.blur();
@@ -3135,104 +3268,104 @@ 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(Je, "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;
+	}, T = y !== null, E = h && h.pos !== C?.pos ? fr(e, t, h) : null, O = fr(e, t, C), k = T ? fr(e, t, z(e.state.doc, y)) : null, A = C ? st(e.state.doc, C) : null;
 	return /* @__PURE__ */ L("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,
+			E && h && /* @__PURE__ */ I("div", {
+				className: R("bree-ov-frame bree-ov-hover", T && "bree-ov-ghost"),
+				style: E,
 				children: /* @__PURE__ */ I("button", {
 					type: "button",
 					className: "bree-ov-tag",
 					onMouseDown: (t) => {
-						t.preventDefault(), it(e, g);
+						t.preventDefault(), lt(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"),
+				className: R("bree-ov-frame bree-ov-selected", T && "bree-ov-ghost"),
 				style: O,
 				children: [
 					/* @__PURE__ */ I("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", {
+					!ot(C) && /* @__PURE__ */ I(M, { children: /* @__PURE__ */ I("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__ */ I(Ht, {})
 					}) }),
-					/* @__PURE__ */ I(j, { children: /* @__PURE__ */ L("div", {
+					/* @__PURE__ */ I(M, { children: /* @__PURE__ */ L("div", {
 						className: "bree-ov-toolbar",
 						onMouseDown: (e) => e.preventDefault(),
-						children: [k && /* @__PURE__ */ I("button", {
+						children: [A && /* @__PURE__ */ I("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(A.node.type.name)),
+							onClick: () => lt(e, A),
+							children: /* @__PURE__ */ I(Gt, {})
+						}), !ot(C) && /* @__PURE__ */ L(Pe, { children: [/* @__PURE__ */ I("button", {
 							type: "button",
 							className: "bree-ov-tool",
-							title: d.canvas.duplicate,
-							onClick: () => at(e, C),
-							children: /* @__PURE__ */ I(Mt, {})
+							title: c.canvas.duplicate,
+							onClick: () => ut(e, C),
+							children: /* @__PURE__ */ I(Ut, {})
 						}), /* @__PURE__ */ I("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: () => dt(e, C),
+							children: /* @__PURE__ */ I(Wt, {})
 						})] })]
 					}) })
 				]
 			}),
-			ee && /* @__PURE__ */ I("div", {
+			k && /* @__PURE__ */ I("div", {
 				className: "bree-ov-frame bree-ov-source",
-				style: ee
+				style: k
 			}),
-			_ && /* @__PURE__ */ I(ir, {
+			_ && /* @__PURE__ */ I(gr, {
 				host: t,
 				target: _,
 				label: r.get()?.label ?? "",
-				messages: d
+				messages: c
 			})
 		]
 	});
 }
-function ir({ host: e, target: t, label: n, messages: r }) {
+function gr({ host: e, target: t, label: n, messages: r }) {
 	if (t.emptyZone) {
-		let i = $n(e, t.emptyZone);
+		let i = dr(e, t.emptyZone);
 		return /* @__PURE__ */ I("div", {
 			className: "bree-ov-dropzone",
 			style: i,
 			children: /* @__PURE__ */ L("span", { children: [
-				/* @__PURE__ */ I(N, { size: 14 }),
+				/* @__PURE__ */ I(F, { size: 14 }),
 				" ",
 				r.canvas.dropLabel(n)
 			] })
 		});
 	}
 	if (!t.line) return null;
-	let i = $n(e, {
+	let i = dr(e, {
 		...t.line,
 		height: 0
 	});
@@ -3250,72 +3383,149 @@ function ir({ host: e, target: t, label: n, messages: r }) {
 	});
 }
 //#endregion
+//#region src/components/EmailHeader.tsx
+function _r({ className: e, style: t }) {
+	let { settings: n, updateSettings: r, t: i } = Q(), o = i.emailHeader, s = a();
+	return /* @__PURE__ */ L("div", {
+		className: R("bree-email-header", e),
+		style: t,
+		children: [/* @__PURE__ */ L("div", {
+			className: "bree-email-header-row",
+			children: [/* @__PURE__ */ I("label", {
+				htmlFor: `${s}-subject`,
+				children: o.subject
+			}), /* @__PURE__ */ I("input", {
+				id: `${s}-subject`,
+				className: "bree-email-header-subject",
+				value: n.subject ?? "",
+				placeholder: o.subjectPlaceholder,
+				onChange: (e) => r({ subject: e.target.value })
+			})]
+		}), /* @__PURE__ */ L("div", {
+			className: "bree-email-header-row",
+			children: [/* @__PURE__ */ I("label", {
+				htmlFor: `${s}-preview`,
+				children: o.previewText
+			}), /* @__PURE__ */ I("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 vr(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 yr({ 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), _ = vr(s, f, r ? h : null), v = c(() => Array.isArray(n) ? n : Ne.map((e) => ({
 		...e,
-		...u.slashCommands[e.title]
-	})), [n, u]);
+		...d.slashCommands[e.title]
+	})), [n, d]);
 	return /* @__PURE__ */ L("div", {
-		ref: p,
-		className: R("bree-canvas", r),
-		style: i,
-		"data-device": c,
+		ref: m,
+		className: R("bree-canvas", i),
+		style: a,
+		"data-device": l,
+		"data-email-header": r || void 0,
 		children: [
-			/* @__PURE__ */ I(f, {
-				editor: o,
+			r && /* @__PURE__ */ I("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__ */ I(_r, {})
+			}),
+			/* @__PURE__ */ I(p, {
+				editor: s,
 				className: "bree-canvas-content"
 			}),
-			t && /* @__PURE__ */ L(F, { children: [
-				/* @__PURE__ */ I(se, {
+			t && /* @__PURE__ */ L(Pe, { children: [
+				/* @__PURE__ */ I(ue, {
 					hideWhenActiveNodes: ["button", "horizontalRule"],
 					hideWhenActiveMarks: ["link"]
 				}),
-				/* @__PURE__ */ I(se.LinkDefault, {}),
-				/* @__PURE__ */ I(se.ButtonDefault, {}),
-				/* @__PURE__ */ I(se.ImageDefault, {})
+				/* @__PURE__ */ I(ue.LinkDefault, {}),
+				/* @__PURE__ */ I(ue.ButtonDefault, {}),
+				/* @__PURE__ */ I(ue.ImageDefault, {})
 			] }),
-			n !== !1 && /* @__PURE__ */ I(Se, { items: m }),
-			e && d && /* @__PURE__ */ I(rr, {
-				editor: o,
-				host: d
+			n !== !1 && /* @__PURE__ */ I(Te, { items: v }),
+			e && f && /* @__PURE__ */ I(hr, {
+				editor: s,
+				host: f
 			}),
-			a
+			o
 		]
 	});
 }
 //#endregion
 //#region src/core/layers.ts
-function or(e, t) {
+function br(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 && Ze(n) && e.child(t - 1).type.name !== "paragraph";
 }
-function sr(e, t, n, r) {
+function xr(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 (br(e, s)) return;
+		let c = t + 1 + o, l = a.type.name, u = `${r}${s}`, d = Ke.has(l), f = d && a.childCount === 1 && Ze(a.firstChild), p = d || qe.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 ? xr(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 Sr(e) {
+	let t = Qe(e);
+	return t ? xr(t.node, t.pos, 0, "") : [];
 }
-function lr(e, t) {
+function Cr(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 wr(e, t, n, r, i) {
 	let a, o;
 	if (n === "inside") {
 		if (!t.accepts) return null;
@@ -3333,26 +3543,26 @@ 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 Tr({ 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 ?? Fn)(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 ? ct(e)?.pos ?? null : null
+	}), S = d(_.subscribe, _.get), C = c(() => b ? Sr(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]);
-	let ee = (e) => T((t) => {
+	let k = (e) => T((t) => {
 		let n = new Set(t);
 		return n.has(e) ? n.delete(e) : n.add(e), n;
-	}), k = (e) => {
-		it(o, {
+	}), A = (e) => {
+		lt(o, {
 			pos: e.pos,
 			node: e.node
 		});
@@ -3361,24 +3571,24 @@ function dr({ onClose: e, title: t, expandCollapseButtons: n = !0, className: r,
 			block: "nearest",
 			behavior: "smooth"
 		});
-	}, te = (e, t) => {
-		let n = g.get();
+	}, j = (e, t) => {
+		let n = h.get();
 		if (!n) return null;
-		let r = Ye(o.view, n);
+		let r = et(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 = Cr(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 = wr(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;
+	}, ee = () => {
+		h.end(), D(null);
+	}, te = (e) => e.map((e) => {
+		let t = p.get(e.node.type.name)?.icon ?? ve, 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", {
 			role: "none",
 			children: [
@@ -3391,11 +3601,11 @@ function dr({ onClose: e, title: t, expandCollapseButtons: n = !0, className: r,
 					className: R("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,
-					onClick: () => k(e),
+					title: e.fixed ? s.layers.fixedHint : s.layers.itemHint,
+					onClick: () => A(e),
 					onKeyDown: (t) => {
-						if (t.key === "Enter" || t.key === " ") t.preventDefault(), k(e);
-						else if (t.key === "ArrowLeft" && n && !r || t.key === "ArrowRight" && r) ee(e.key);
+						if (t.key === "Enter" || t.key === " ") t.preventDefault(), A(e);
+						else if (t.key === "ArrowLeft" && n && !r || t.key === "ArrowRight" && r) k(e.key);
 						else if (t.key === "ArrowDown" || t.key === "ArrowUp") {
 							t.preventDefault();
 							let e = [...O.current?.querySelectorAll("[role=\"treeitem\"]") ?? []];
@@ -3405,15 +3615,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(Je, "move"), t.dataTransfer.effectAllowed = "move";
 					},
-					onDragEnd: ne,
+					onDragEnd: ee,
 					onDragOver: (t) => {
-						let n = te(t, e);
+						let n = j(t, e);
 						if (!n) {
 							E?.key === e.key && D(null);
 							return;
@@ -3424,17 +3634,17 @@ 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 = j(t, e);
+						t.preventDefault(), n && it(o, n.payload, n.target), ee();
 					},
 					children: [
 						n ? /* @__PURE__ */ I("button", {
 							type: "button",
 							className: R("bree-layer-caret", !r && "bree-open"),
-							"aria-label": r ? d.layers.expand : d.layers.collapse,
+							"aria-label": r ? s.layers.expand : s.layers.collapse,
 							tabIndex: -1,
 							onClick: (t) => {
-								t.stopPropagation(), ee(e.key);
+								t.stopPropagation(), k(e.key);
 							},
 							children: "›"
 						}) : /* @__PURE__ */ I("span", { className: "bree-layer-caret-spacer" }),
@@ -3455,35 +3665,35 @@ function dr({ onClose: e, title: t, expandCollapseButtons: n = !0, className: r,
 				e.empty && /* @__PURE__ */ I("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", {
 					role: "group",
-					children: re(e.children)
+					children: te(e.children)
 				})
 			]
 		}, e.key);
 	});
-	return /* @__PURE__ */ I(j, { children: /* @__PURE__ */ L("aside", {
+	return /* @__PURE__ */ I(M, { children: /* @__PURE__ */ L("aside", {
 		className: R("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", {
 			className: "bree-layers-header",
-			children: [/* @__PURE__ */ I("h2", { children: t ?? d.layers.title }), /* @__PURE__ */ L("div", {
+			children: [/* @__PURE__ */ I("h2", { children: t ?? s.layers.title }), /* @__PURE__ */ L("div", {
 				className: "bree-layers-actions",
-				children: [n && /* @__PURE__ */ L(F, { children: [/* @__PURE__ */ I("button", {
+				children: [n && /* @__PURE__ */ L(Pe, { children: [/* @__PURE__ */ I("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", {
 					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);
@@ -3494,51 +3704,51 @@ function dr({ onClose: e, title: t, expandCollapseButtons: n = !0, className: r,
 				})] }), e && /* @__PURE__ */ I("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__ */ I(Me, { size: 14 })
 				})]
 			})]
 		}), /* @__PURE__ */ I("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 ? te(C) : /* @__PURE__ */ I("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 }) {
+function Er({ ctx: e, className: t, style: n }) {
 	return /* @__PURE__ */ L("div", {
 		className: R("bree-inspector", t),
 		style: n,
 		children: [
-			/* @__PURE__ */ I(tn, {
+			/* @__PURE__ */ I(mn, {
 				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__ */ I(q, { ctx: e }),
+			/* @__PURE__ */ I(hn, { ctx: e })
 		]
 	});
 }
 //#endregion
 //#region src/components/PropertiesPanel.tsx
-function pr() {
+function Dr() {
 	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();
+function Or({ title: e, children: t, breadcrumb: n = !0, className: r, style: i }) {
+	let { t: a, nodeLabel: o } = Q(), s = Dr();
 	return /* @__PURE__ */ L("div", {
 		className: R("bree-properties", r),
 		style: i,
@@ -3553,10 +3763,10 @@ function mr({ title: e, children: t, breadcrumb: n = !0, className: r, style: i
 					className: "bree-icon-button",
 					title: a.sidebar.closeProperties,
 					onClick: s,
-					children: /* @__PURE__ */ I(Oe, { size: 16 })
+					children: /* @__PURE__ */ I(Me, { size: 16 })
 				})]
 			}),
-			n && /* @__PURE__ */ I(M.Breadcrumb, { children: (e) => e.length > 1 && /* @__PURE__ */ I("nav", {
+			n && /* @__PURE__ */ I(N.Breadcrumb, { children: (e) => e.length > 1 && /* @__PURE__ */ I("nav", {
 				className: "bree-breadcrumb",
 				"aria-label": a.sidebar.breadcrumb,
 				children: e.map((t, n) => /* @__PURE__ */ L("span", {
@@ -3581,9 +3791,9 @@ 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 kr({ ctx: e, className: t, style: n }) {
+	let { nodes: r, nodeLabel: i } = Q(), a = r.get(e.nodeType)?.inspector ?? Er;
+	return /* @__PURE__ */ I(Or, {
 		title: i(e.nodeType),
 		className: t,
 		style: n,
@@ -3592,7 +3802,7 @@ function hr({ ctx: e, className: t, style: n }) {
 }
 //#endregion
 //#region src/components/useDraggableBlock.ts
-function gr(e, t) {
+function Ar(e, t) {
 	let { editor: n, dragSession: r } = Q();
 	return {
 		draggable: !0,
@@ -3601,16 +3811,16 @@ function gr(e, t) {
 				kind: "new",
 				label: e,
 				content: t
-			}), n.dataTransfer.setData(Ue, e), n.dataTransfer.effectAllowed = "copy";
+			}), n.dataTransfer.setData(Je, e), n.dataTransfer.effectAllowed = "copy";
 		},
 		onDragEnd: () => r.end(),
-		onClick: () => st(n, t())
+		onClick: () => ft(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));
+function jr({ template: e, className: t, style: n }) {
+	let r = rr(), i = Lt(e.label, r), a = Ar(i, () => e.content(r));
 	return /* @__PURE__ */ L("button", {
 		type: "button",
 		className: R("bree-block-card", t),
@@ -3618,107 +3828,143 @@ function _r({ template: e, className: t, style: n }) {
 		...a,
 		children: [e.thumbnail ?? /* @__PURE__ */ I(Z, { variant: "default" }), /* @__PURE__ */ L("span", {
 			className: "bree-block-text",
-			children: [/* @__PURE__ */ I("strong", { children: i }), e.description && /* @__PURE__ */ I("span", { children: Et(e.description, r) })]
+			children: [/* @__PURE__ */ I("strong", { children: i }), e.description && /* @__PURE__ */ I("span", { children: Lt(e.description, r) })]
 		})]
 	});
 }
-function vr({ templates: e, className: t, style: n }) {
+function Mr({ templates: e, className: t, style: n }) {
 	let r = Q();
 	return /* @__PURE__ */ I("div", {
 		className: R("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__ */ I(jr, { template: e }, e.id))
+	});
+}
+//#endregion
+//#region src/core/email-font.ts
+var Nr = ["body", "blockquote"];
+function Pr(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 Fr(e, t) {
+	let { styles: n } = C(e), r = (e) => e.prop === "fontFamily" && Nr.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 = Nr.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;
+function Ir({ 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__ */ L("div", {
 		className: R("bree-body-tab", t),
 		style: n,
 		children: [
 			/* @__PURE__ */ I(V, {
-				title: o.general,
+				title: s.general,
 				children: /* @__PURE__ */ I(H, {
-					label: o.previewText,
+					label: s.previewText,
 					stacked: !0,
 					children: /* @__PURE__ */ I(U, {
-						value: r.previewText,
-						onChange: (e) => i({ previewText: e }),
-						placeholder: o.previewTextPlaceholder
+						value: i.previewText,
+						onChange: (e) => a({ previewText: e }),
+						placeholder: s.previewTextPlaceholder
 					})
 				})
 			}),
 			/* @__PURE__ */ L(V, {
-				title: o.background,
+				title: s.background,
 				children: [/* @__PURE__ */ I(H, {
-					label: o.backgroundColor,
+					label: s.backgroundColor,
 					stacked: !0,
 					children: /* @__PURE__ */ I(G, {
-						value: s("body", "backgroundColor"),
-						onChange: (e) => c("body", "backgroundColor", e)
+						value: c("body", "backgroundColor"),
+						onChange: (e) => l("body", "backgroundColor", e)
 					})
 				}), /* @__PURE__ */ I(H, {
-					label: o.outerPadding,
+					label: s.outerPadding,
 					children: /* @__PURE__ */ I(W, {
-						value: s("body", "padding"),
-						onChange: (e) => c("body", "padding", e)
+						value: c("body", "padding"),
+						onChange: (e) => l("body", "padding", e)
 					})
 				})]
 			}),
 			/* @__PURE__ */ L(V, {
-				title: o.content,
+				title: s.content,
 				children: [
 					/* @__PURE__ */ I(H, {
-						label: o.width,
+						label: s.width,
 						children: /* @__PURE__ */ I(W, {
-							value: s("container", "width"),
-							onChange: (e) => c("container", "width", e),
+							value: c("container", "width"),
+							onChange: (e) => l("container", "width", e),
 							min: 320,
 							max: 900
 						})
 					}),
 					/* @__PURE__ */ I(H, {
-						label: o.contentColor,
+						label: s.contentColor,
 						stacked: !0,
 						children: /* @__PURE__ */ I(G, {
-							value: s("container", "backgroundColor"),
-							onChange: (e) => c("container", "backgroundColor", e)
+							value: c("container", "backgroundColor"),
+							onChange: (e) => l("container", "backgroundColor", e)
 						})
 					}),
 					/* @__PURE__ */ I(H, {
-						label: o.innerPadding,
+						label: s.innerPadding,
 						children: /* @__PURE__ */ I(W, {
-							value: s("container", "padding"),
-							onChange: (e) => c("container", "padding", e)
+							value: c("container", "padding"),
+							onChange: (e) => l("container", "padding", e)
 						})
 					}),
 					/* @__PURE__ */ I(H, {
-						label: o.radius,
+						label: s.radius,
 						children: /* @__PURE__ */ I(W, {
-							value: s("container", "borderRadius"),
-							onChange: (e) => c("container", "borderRadius", e)
+							value: c("container", "borderRadius"),
+							onChange: (e) => l("container", "borderRadius", e)
 						})
 					})
 				]
 			}),
 			/* @__PURE__ */ L(V, {
-				title: o.defaultStyles,
+				title: s.defaultStyles,
 				children: [
 					/* @__PURE__ */ I(H, {
-						label: o.text,
+						label: s.font,
+						children: /* @__PURE__ */ I(un, {
+							value: Pr(r),
+							emptyLabel: s.fontDefault,
+							onChange: (e) => Fr(r, e)
+						})
+					}),
+					/* @__PURE__ */ I(H, {
+						label: s.text,
 						stacked: !0,
 						children: /* @__PURE__ */ I(G, {
-							value: s("paragraph", "color"),
-							onChange: (e) => c("paragraph", "color", e)
+							value: c("paragraph", "color"),
+							onChange: (e) => l("paragraph", "color", e)
 						})
 					}),
 					/* @__PURE__ */ I(H, {
-						label: o.headings,
+						label: s.headings,
 						stacked: !0,
 						children: /* @__PURE__ */ I(G, {
-							value: s("h1", "color"),
+							value: c("h1", "color"),
 							onChange: (t) => e.batchSetGlobalStyle([
 								"h1",
 								"h2",
@@ -3731,27 +3977,27 @@ function yr({ ctx: e, className: t, style: n }) {
 						})
 					}),
 					/* @__PURE__ */ I(H, {
-						label: o.links,
+						label: s.links,
 						stacked: !0,
 						children: /* @__PURE__ */ I(G, {
-							value: s("link", "color"),
-							onChange: (e) => c("link", "color", e)
+							value: c("link", "color"),
+							onChange: (e) => l("link", "color", e)
 						})
 					}),
 					/* @__PURE__ */ I(H, {
-						label: o.buttonBackground,
+						label: s.buttonBackground,
 						stacked: !0,
 						children: /* @__PURE__ */ I(G, {
-							value: s("button", "backgroundColor"),
-							onChange: (e) => c("button", "backgroundColor", e)
+							value: c("button", "backgroundColor"),
+							onChange: (e) => l("button", "backgroundColor", e)
 						})
 					}),
 					/* @__PURE__ */ I(H, {
-						label: o.buttonText,
+						label: s.buttonText,
 						stacked: !0,
 						children: /* @__PURE__ */ I(G, {
-							value: s("button", "color"),
-							onChange: (e) => c("button", "color", e)
+							value: c("button", "color"),
+							onChange: (e) => l("button", "color", e)
 						})
 					})
 				]
@@ -3761,8 +4007,8 @@ 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));
+function Lr({ item: e, className: t, style: n }) {
+	let r = rr(), i = Lt(e.label, r), a = Ar(i, () => e.content(r));
 	return /* @__PURE__ */ L("button", {
 		type: "button",
 		className: R("bree-tile", t),
@@ -3778,7 +4024,7 @@ function br({ item: e, className: t, style: n }) {
 		})]
 	});
 }
-function xr({ items: e, groups: t, hint: n, className: r, style: i }) {
+function Rr({ 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
@@ -3790,10 +4036,10 @@ function xr({ items: e, groups: t, hint: n, className: r, style: i }) {
 			let t = o.filter((t) => t.group === e.id);
 			return t.length ? /* @__PURE__ */ L("section", { children: [/* @__PURE__ */ I("h3", {
 				className: "bree-panel-title",
-				children: Et(e.title, a)
+				children: Lt(e.title, a)
 			}), /* @__PURE__ */ I("div", {
 				className: "bree-tiles",
-				children: t.map((e) => /* @__PURE__ */ I(br, { item: e }, e.id))
+				children: t.map((e) => /* @__PURE__ */ I(Lr, { item: e }, e.id))
 			})] }, e.id) : null;
 		}), n !== null && /* @__PURE__ */ I("p", {
 			className: "bree-hint",
@@ -3803,7 +4049,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 zr({ ctx: e, tabs: t = [
 	"content",
 	"blocks",
 	"body"
@@ -3812,19 +4058,19 @@ function Sr({ ctx: e, tabs: t = [
 		content: {
 			id: "content",
 			label: a.sidebar.tabContent,
-			render: () => /* @__PURE__ */ I(xr, {})
+			render: () => /* @__PURE__ */ I(Rr, {})
 		},
 		blocks: {
 			id: "blocks",
 			label: a.sidebar.tabBlocks,
-			render: () => /* @__PURE__ */ I(vr, {})
+			render: () => /* @__PURE__ */ I(Mr, {})
 		},
 		body: {
 			id: "body",
 			label: a.sidebar.tabBody,
-			render: (e) => /* @__PURE__ */ I(yr, { ctx: e })
+			render: (e) => /* @__PURE__ */ I(Ir, { 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];
+	}, 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__ */ L("div", {
 		className: R("bree-content-panel", r),
 		style: i,
@@ -3836,7 +4082,7 @@ function Sr({ ctx: e, tabs: t = [
 				role: "tab",
 				"aria-selected": e.id === d?.id,
 				className: R(e.id === d?.id && "bree-active"),
-				onClick: () => u(e.id),
+				onClick: () => l(e.id),
 				children: e.label
 			}, e.id))
 		}), /* @__PURE__ */ I("div", {
@@ -3847,30 +4093,30 @@ function Sr({ ctx: e, tabs: t = [
 }
 //#endregion
 //#region src/components/TextProperties.tsx
-function Cr({ ctx: e, className: t, style: n }) {
+function Br({ ctx: e, className: t, style: n }) {
 	let r = $(), i = r.inspector, a = [
 		{
 			mark: "bold",
-			Icon: oe,
+			Icon: le,
 			title: i.bold
 		},
 		{
 			mark: "italic",
-			Icon: pe,
+			Icon: _e,
 			title: i.italic
 		},
 		{
 			mark: "underline",
-			Icon: De,
+			Icon: je,
 			title: i.underline
 		},
 		{
 			mark: "strike",
-			Icon: P,
+			Icon: De,
 			title: i.strike
 		}
 	];
-	return /* @__PURE__ */ L(mr, {
+	return /* @__PURE__ */ L(Or, {
 		title: r.sidebar.selectedText,
 		className: t,
 		style: n,
@@ -3889,7 +4135,7 @@ function Cr({ ctx: e, className: t, style: n }) {
 					}, t))
 				})
 			}),
-			/* @__PURE__ */ I(tn, {
+			/* @__PURE__ */ I(mn, {
 				ctx: e,
 				alignment: e.alignment,
 				setAlignment: e.setAlignment
@@ -3918,32 +4164,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 Vr({ renderDocument: e = (e) => /* @__PURE__ */ I(zr, { ctx: e }), renderNode: t = (e) => /* @__PURE__ */ I(kr, { ctx: e }), renderText: n = (e) => /* @__PURE__ */ I(Br, { ctx: e }), className: r, style: i }) {
 	let { t: a } = Q();
-	return /* @__PURE__ */ L(M.Root, {
+	return /* @__PURE__ */ L(N.Root, {
 		className: R("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__ */ I(N.Document, { children: e }),
+			/* @__PURE__ */ I(N.Node, { children: t }),
+			/* @__PURE__ */ I(N.Text, { children: n })
 		]
 	});
 }
 //#endregion
 //#region src/components/PreviewDialog.tsx
-function Tr(e, t, n) {
+function Hr(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 Ur({ 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,8 +4201,8 @@ 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 Ue(/* @__PURE__ */ I(M, { children: /* @__PURE__ */ I("div", {
 		className: "bree bree-modal-backdrop",
 		onMouseDown: (t) => t.target === t.currentTarget && e(),
 		children: /* @__PURE__ */ L("div", {
@@ -3990,7 +4236,7 @@ function Er({ onClose: e, defaultView: t = "desktop", views: n = [
 						p && /* @__PURE__ */ I("button", {
 							type: "button",
 							className: "bree-btn bree-primary",
-							onClick: () => Tr(r, p.unformattedHtml, "text/html"),
+							onClick: () => Hr(r, p.unformattedHtml, "text/html"),
 							children: b.download
 						}),
 						/* @__PURE__ */ I("button", {
@@ -3998,7 +4244,7 @@ function Er({ onClose: e, defaultView: t = "desktop", views: n = [
 							className: "bree-icon-button",
 							onClick: e,
 							title: b.close,
-							children: /* @__PURE__ */ I(Oe, { size: 18 })
+							children: /* @__PURE__ */ I(Me, { size: 18 })
 						})
 					]
 				})]
@@ -4036,7 +4282,7 @@ function Er({ onClose: e, defaultView: t = "desktop", views: n = [
 }
 //#endregion
 //#region src/components/TopBar.tsx
-function Dr({ className: e, style: t }) {
+function Wr({ className: e, style: t }) {
 	let { layersOpen: n, setLayersOpen: r, t: i } = Q();
 	return /* @__PURE__ */ L("button", {
 		type: "button",
@@ -4046,14 +4292,14 @@ function Dr({ className: e, style: t }) {
 		onClick: () => r(!n),
 		title: i.topBar.toggleLayers,
 		children: [
-			/* @__PURE__ */ I(zt, {}),
+			/* @__PURE__ */ I(Xt, {}),
 			" ",
 			i.topBar.layers
 		]
 	});
 }
-function Or({ className: e, style: t }) {
-	let { editor: n, t: r } = Q(), i = h({
+function Gr({ className: e, style: t }) {
+	let { editor: n, t: r } = Q(), i = g({
 		editor: n,
 		selector: ({ editor: e }) => ({
 			undo: !!e?.can().undo(),
@@ -4069,26 +4315,26 @@ function Or({ className: e, style: t }) {
 			title: r.topBar.undo,
 			disabled: !i?.undo,
 			onClick: () => n.chain().focus().undo().run(),
-			children: /* @__PURE__ */ I(Ft, {})
+			children: /* @__PURE__ */ I(Kt, {})
 		}), /* @__PURE__ */ I("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__ */ I(qt, {})
 		})]
 	});
 }
-function kr({ className: e, style: t }) {
+function Kr({ className: e, style: t }) {
 	let { device: n, setDevice: r, t: i } = Q(), a = [{
 		id: "desktop",
 		label: i.topBar.desktop,
-		Icon: Lt
+		Icon: Jt
 	}, {
 		id: "mobile",
 		label: i.topBar.mobile,
-		Icon: Rt
+		Icon: Yt
 	}];
 	return /* @__PURE__ */ I("div", {
 		className: R("bree-segmented bree-device-toggle", e),
@@ -4106,7 +4352,7 @@ function kr({ className: e, style: t }) {
 		}, e))
 	});
 }
-function Ar({ className: e, style: t }) {
+function qr({ className: e, style: t }) {
 	let { editor: n, starterDocument: r, locale: i, t: a } = Q();
 	return /* @__PURE__ */ I("button", {
 		type: "button",
@@ -4121,15 +4367,15 @@ 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 Jr({ 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__ */ L(Pe, { children: [/* @__PURE__ */ I("button", {
 		type: "button",
 		className: R("bree-btn bree-ghost", e),
 		style: t,
@@ -4146,82 +4392,86 @@ function jr({ className: e, style: t }) {
 		}
 	})] });
 }
-function Mr({ className: e, style: t, filename: n = "email.json" }) {
+function Yr({ className: e, style: t, filename: n = "email.json" }) {
 	let { handle: r, t: i } = Q();
 	return /* @__PURE__ */ I("button", {
 		type: "button",
 		className: R("bree-btn bree-ghost", e),
 		style: t,
-		onClick: () => Tr(n, JSON.stringify(r.getValue(), null, 2), "application/json"),
+		onClick: () => Hr(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 Xr({ view: e = "desktop", variant: t = "default", children: n, className: r, style: i }) {
+	let { t: a } = Q(), [o, s] = u(!1);
+	return /* @__PURE__ */ L(Pe, { children: [/* @__PURE__ */ I("button", {
 		type: "button",
 		className: R("bree-btn", t !== "default" && `bree-${t}`, r),
 		style: i,
 		onClick: () => s(!0),
 		children: n ?? a.topBar.preview
-	}), o && /* @__PURE__ */ I(Er, {
+	}), o && /* @__PURE__ */ I(Ur, {
 		defaultView: e,
 		onClose: () => s(!1)
 	})] });
 }
-function Pr(e) {
+function Zr(e) {
 	let { t } = Q();
-	return /* @__PURE__ */ I(Nr, {
+	return /* @__PURE__ */ I(Xr, {
 		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", {
+function Qr({ brand: e, actions: t, children: n, className: r, style: i }) {
+	return /* @__PURE__ */ I(M, { children: /* @__PURE__ */ L("header", {
 		className: R("bree-topbar", r),
 		style: i,
 		children: [/* @__PURE__ */ I("div", {
 			className: "bree-topbar-start",
 			children: e
-		}), n ?? /* @__PURE__ */ L(F, { children: [/* @__PURE__ */ I("div", {
+		}), n ?? /* @__PURE__ */ L(Pe, { children: [/* @__PURE__ */ I("div", {
 			className: "bree-topbar-center",
-			children: /* @__PURE__ */ I(kr, {})
+			children: /* @__PURE__ */ I(Kr, {})
 		}), /* @__PURE__ */ L("div", {
 			className: "bree-topbar-actions",
-			children: [t, /* @__PURE__ */ I(Pr, {})]
+			children: [t, /* @__PURE__ */ I(Zr, {})]
 		})] })]
 	}) });
 }
 //#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;
+function $r({ 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 = Tr, Canvas: l = yr, Sidebar: u = Vr } = i, d = t && o;
 	return /* @__PURE__ */ L("div", {
-		className: R("bree-layout", e && "bree-with-topbar", u && "bree-with-layers", n && "bree-with-sidebar"),
+		className: R("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__ */ I(s, { ...a.topBar }),
+			d && /* @__PURE__ */ I(c, { ...a.layersPanel }),
+			/* @__PURE__ */ I(l, {
+				header: r,
+				...a.canvas
+			}),
+			n && /* @__PURE__ */ I(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 ei = t(function({ showTopBar: e, showLayers: t, showSidebar: n, showEmailHeader: r, components: i, slotProps: a, ...o }, s) {
+	return /* @__PURE__ */ I(ur, {
+		ref: s,
+		...o,
+		children: /* @__PURE__ */ I($r, {
 			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 { fn as AlignInput, Ke as BLOCK_CONTAINERS, ei as BetterEmailEditor, kr as BlockProperties, Mr as BlocksTab, Ir as BodyTab, hn as BoxGroup, gn as ButtonInspector, qe as COLUMN_PARENTS, yr as Canvas, hr as CanvasOverlay, G as ColorInput, _n as ColumnsInspector, Cn as ContainerInspector, zr as ContentPanel, Rr as ContentTab, sn as DEFAULT_SWATCHES, Er as DefaultInspector, Kr as DeviceToggle, Sn as DividerInspector, ur as EditorRoot, pt as EmailButton, _r as EmailHeader, Zr as ExportHtmlButton, Yr as ExportJsonButton, H as Field, un as FontInput, V as Group, vn as HeadingInspector, Mn as HtmlBlock, xn as HtmlInspector, yn as ImageInspector, Jr as ImportButton, Tr as LayersPanel, Wr as LayersToggle, W as NumberInput, pn as PaddingInput, Lr as PaletteTile, Xr as PreviewButton, Ur as PreviewDialog, Or as PropertiesPanel, on as RangeInput, Dn as SOCIAL_NETWORKS, dn as Segmented, ln as Select, Vr as Sidebar, jn as SocialLinks, Nn as SocialLinksInspector, En as Spacer, bn as SpacerInspector, q as SpacingGroup, qr as TemplateButton, jr as TemplateCard, Z as TemplateThumbnail, rn as TextArea, U as TextInput, Br as TextProperties, Qr as TopBar, mn as TypographyGroup, Gr as UndoRedo, ft as appendBlocks, it as applyDrop, Rn as content, er as createStarterDocument, K as css, R as cx, Dt as defaultFonts, Ln as defaultNodes, Zn as defaultPalette, Xn as defaultPaletteGroups, Qn as defaultTemplates, ir as defaultTheme, dt as deleteUnit, Hr as download, ut as duplicateUnit, Pt as en, $e as findDropTarget, kt as findFont, Ft as fr, kn as iconUrl, Vt as icons, wn as inlineStyleToObject, jt as linkWebFonts, It as locales, Yn as menuParagraph, st as parentUnit, ar as readFileAsDataUrl, Lt as resolveLabel, Bt as resolveMessages, lt as selectUnit, ct as selectedUnit, Fn as textPreview, cn as toHex, Pn as truncate, z as unitAt, Dr as useDeselect, Ar as useDraggableBlock, Q as useEmailEditor, rr as useI18n, $ as useMessages, nr as useOptionalEmailEditor, At as usedWebFonts };
 
 //# sourceMappingURL=index.js.map