themelia-react-ui 0.0.0-stage → 1.0.1

package/dist/features/email-composer.js

@@ -0,0 +1,1099 @@
+"use client";
+import { useStrings as e } from "../lib/strings.js";
+import { t } from "../utils-C2EKeIw3.js";
+import { n } from "../buttons-Co6GavvM.js";
+import { a as r } from "../typography-Cv8MT-82.js";
+import { i, t as a } from "../structure-MvKVq-oL.js";
+import { _ as o, f as s, m as c, t as l } from "../smart-card-CYLn46e6.js";
+import { n as u, t as d } from "../feedback-DWUkgEjR.js";
+import { n as f, t as p } from "../action-menu-Cx3SdfbN.js";
+import { n as m, r as h, t as g } from "../overlays-B11wZka6.js";
+import { n as _ } from "../content-typography-CnwgMJ37.js";
+import { t as v } from "../accordion-B-5Focs8.js";
+import { t as y } from "../input-WwYQZJzG.js";
+import { a as b, c as x, d as S, o as C, s as w } from "../text-inputs-Dh9XGyiS.js";
+import { t as T } from "../scroll-area-BheMQ270.js";
+import { t as E } from "../form-field-Bn7ZH1rA.js";
+import { c as D } from "../choice-inputs-CC7XqPQO.js";
+import { i as O, n as k, r as ee, t as te } from "../tabs-B5cNMWiP.js";
+import { t as ne } from "../popover-menu-GLIQTJTx.js";
+import { n as A, t as j } from "../rich-text-editor.recipes-DxvOE0Lp.js";
+import { t as M } from "../rich-text-editor.strings-BpnIQgMl.js";
+import { a as N, c as P, i as F, l as I, n as L, o as R, r as z, s as B, t as V, u as H } from "../http-CLTVJc5I.js";
+import { useEffect as U, useId as W, useImperativeHandle as G, useMemo as re, useRef as K, useState as q } from "react";
+import { Fragment as J, jsx as Y, jsxs as X } from "react/jsx-runtime";
+import { Bold as ie, Italic as ae, Link as oe, List as se, ListOrdered as ce, Plus as Z, Redo2 as le, Send as ue, Undo2 as de, X as fe } from "lucide-react";
+import { EditorContent as pe, Node as me, generateJSON as he, mergeAttributes as ge, useEditor as _e } from "@tiptap/react";
+import ve from "@tiptap/starter-kit";
+//#region src/components/features/email-composer/partials/data-status.tsx
+function Q(e) {
+	return !!(e?.loading || e?.error);
+}
+function ye({ state: e, label: t, retryLabel: n, report: r }) {
+	return e?.loading ? /* @__PURE__ */ Y(u, { label: t }) : e?.error ? /* @__PURE__ */ Y(d, {
+		variant: "inline",
+		description: e.error,
+		retryLabel: n,
+		onRetry: e.onRetry ? () => {
+			Promise.resolve().then(e.onRetry).catch(r);
+		} : void 0
+	}) : null;
+}
+//#endregion
+//#region src/components/features/email-composer/use-composer.ts
+function be(t) {
+	let n = e(H, t.strings), r = K(null);
+	r.current ||= structuredClone({
+		to: [],
+		cc: [],
+		bcc: [],
+		subject: "",
+		body: {
+			kind: "rich",
+			document: I
+		},
+		placeholderOverrides: {},
+		...t.value ?? t.defaultValue
+	});
+	let [i, a] = q(r.current), o = t.value ?? i, s = K({
+		props: t,
+		draft: o,
+		strings: n
+	});
+	s.current = {
+		props: t,
+		draft: o,
+		strings: n
+	};
+	let c = K(o);
+	t.value !== void 0 && (c.current = t.value);
+	let l = K(null), u = K(null), [d, f] = q(!1), [p, m] = q(""), [h, g] = q(""), [_, v] = q(!1), [y, b] = q([]), x = K(!0);
+	U(() => (x.current = !0, () => {
+		x.current = !1;
+	}), []);
+	let S = re(() => {
+		let e = Object.create(null);
+		for (let r of t.placeholders?.sets ?? []) for (let t of Object.keys(r.definitions)) {
+			if (Object.hasOwn(e, t)) throw Error(n.duplicateVariable(t));
+			r.definitions[t] && (e[t] = r.definitions[t]);
+		}
+		return e;
+	}, [t.placeholders?.sets, n]), C = re(() => [...t.templates?.items ?? [], ...y], [t.templates?.items, y]), w = K(C);
+	if (w.current = C, new Set(C.map((e) => e.id)).size !== C.length) throw Error(n.duplicateTemplate);
+	let T = () => s.current.props.value ?? c.current, E = (e) => C.find((t) => t.id === e.templateId), D = K(null), O = (e = T()) => {
+		let t = s.current.props.context, n = E(e), r = s.current.strings, i = D.current;
+		if (i && i.draft === e && i.context === t && i.definitions === S && i.template === n && i.strings === r) return i.result;
+		let a = L(e, t, S, n, r);
+		return D.current = {
+			draft: e,
+			context: t,
+			definitions: S,
+			template: n,
+			strings: r,
+			result: a
+		}, a;
+	}, k = () => {
+		let { props: e, strings: t } = s.current, n = [];
+		for (let r of [
+			"to",
+			"cc",
+			"bcc"
+		]) Q(e.recipients?.[r]) && n.push({
+			field: r,
+			message: t.dataUnavailable
+		});
+		return Q(e.placeholders) && n.push({
+			field: "placeholders",
+			message: t.dataUnavailable
+		}), n;
+	}, ee = k().length > 0, te = (e = T()) => structuredClone([...k(), ...O(e).issues]), ne = () => {
+		let e = T(), t = [...O(e).rendered?.unresolved ?? []];
+		return {
+			draft: structuredClone(e),
+			dirty: JSON.stringify(e) !== JSON.stringify(r.current),
+			busy: u.current !== null,
+			issues: te(e),
+			unresolvedPlaceholders: t
+		};
+	}, A = (e) => {
+		let t = e instanceof Error ? e : Error(String(e));
+		x.current && m(t.message), s.current.props.onError?.(t);
+	}, j = (e, t = "api", n = !1) => {
+		if (!x.current || !n && u.current && u.current !== "action") return;
+		let r = structuredClone(e(structuredClone(T())));
+		s.current.props.value === void 0 && (c.current = r, a(r)), s.current.props.onChange?.(structuredClone(r)), s.current.props.onEdit?.(structuredClone(r), { source: t }), m(""), g("");
+	}, M = K(null);
+	async function N(e, t, n = !1) {
+		if (u.current && !(n && u.current === "action") || !x.current) return;
+		let r = {
+			kind: e,
+			settled: !1,
+			parent: n ? M.current : null
+		};
+		M.current = r, u.current = e, f(!0), m(""), g("");
+		try {
+			await t();
+		} catch (e) {
+			A(e);
+		} finally {
+			if (r.settled = !0, M.current === r) {
+				let e = r.parent;
+				for (; e?.settled;) e = e.parent;
+				M.current = e, u.current = e?.kind ?? null, x.current && f(e !== null);
+			}
+		}
+	}
+	let P = () => {
+		if (!l.current) throw Error(n.editorNotReady);
+		if (T().body.kind === "html") throw Error(n.editableRequired);
+		return l.current.synchronize(T().body), l.current;
+	};
+	function F(e, t = {}, r = !1) {
+		if (!r && u.current && u.current !== "action") return;
+		let i = t.body ?? "replace";
+		if (i !== "replace" && (e.body.kind === "html" || T().body.kind === "html")) throw Error(n.editableRequired);
+		let a = i === "replace" ? e.body : P().insert(e.body, i);
+		j((n) => ({
+			...n,
+			body: a,
+			subject: t.subject === "preserve" ? n.subject : e.subject ?? n.subject,
+			templateId: e.id,
+			placeholderOverrides: t.overrides === "reset" ? {} : n.placeholderOverrides
+		}), "template", r);
+	}
+	let R = K(null), z = K(null);
+	z.current ||= {
+		getState: () => R.current.getState(),
+		update: (e) => R.current.update(e),
+		setSubject: (e) => R.current.setSubject(e),
+		setRecipients: (e, t) => R.current.setRecipients(e, t),
+		setBody: (e) => R.current.setBody(e),
+		importBody: (e) => R.current.importBody(e),
+		setPlaceholder: (e, t) => R.current.setPlaceholder(e, t),
+		clearPlaceholderOverride: (e) => R.current.clearPlaceholderOverride(e),
+		insertPlaceholder: (e) => R.current.insertPlaceholder(e),
+		applyTemplate: (e, t) => R.current.applyTemplate(e, t),
+		insertText: (e) => R.current.insertText(e),
+		focusBody: () => R.current.focusBody(),
+		validate: () => R.current.validate(),
+		prepare: () => R.current.prepare(),
+		send: () => R.current.send(),
+		discard: () => R.current.discard()
+	};
+	let B = z.current, V = async () => {
+		if (k().length) throw Error(s.current.strings.dataUnavailable);
+		let e = O();
+		if (e.issues.length || !e.rendered) throw Error(e.issues.map((e) => e.message).join(" "));
+		return structuredClone(e.rendered.email);
+	}, W = (e = !1) => N("send", async () => {
+		let e = s.current.props;
+		v(!0);
+		let t = await V();
+		if (e.onBeforeSend) {
+			let n = await e.onBeforeSend(t, B);
+			if (n === !1 || !x.current) return;
+			t = n;
+		}
+		x.current && (t = structuredClone(t), await e.onSend(structuredClone(t)), x.current && (g(n.sent), e.onSent?.(t)));
+	}, e), J = (e = !1) => N("discard", async () => {
+		let e = s.current.props, t = T();
+		await e.onDiscard?.(B), x.current && T() === t && (j(() => r.current, "api", !0), v(!1), g(n.discarded), e.onClose?.());
+	}, e);
+	R.current = {
+		getState: ne,
+		update: (e) => j(e),
+		setSubject: (e) => j((t) => ({
+			...t,
+			subject: e
+		})),
+		setRecipients: (e, t) => j((n) => ({
+			...n,
+			[e]: t
+		})),
+		setBody: (e) => j((t) => ({
+			...t,
+			body: e
+		})),
+		importBody: (e) => j((t) => ({
+			...t,
+			body: e
+		})),
+		setPlaceholder: (e, t) => {
+			if (!Object.hasOwn(S, e)) throw Error(n.unknownVariable(e));
+			j((n) => ({
+				...n,
+				placeholderOverrides: {
+					...n.placeholderOverrides,
+					[e]: t
+				}
+			}), "placeholder");
+		},
+		clearPlaceholderOverride: (e) => j((t) => (delete t.placeholderOverrides[e], t), "placeholder"),
+		insertPlaceholder: (e) => {
+			if (u.current && u.current !== "action") return;
+			if (!Object.hasOwn(S, e)) throw Error(n.unknownVariable(e));
+			let t = P().insertPlaceholder(e);
+			j((e) => ({
+				...e,
+				body: t
+			}));
+		},
+		insertText: (e) => {
+			if (u.current && u.current !== "action") return;
+			let t = P().insertText(e);
+			j((e) => ({
+				...e,
+				body: t
+			}));
+		},
+		focusBody: () => l.current?.focus(),
+		applyTemplate: (e, t) => {
+			if (Q(s.current.props.templates)) throw Error(s.current.strings.templatesUnavailable);
+			let r = C.find((t) => t.id === e);
+			if (!r) throw Error(n.unknownTemplate(e));
+			F(r, t);
+		},
+		validate: () => te(),
+		prepare: V,
+		send: () => W(),
+		discard: () => J()
+	}, G(t.apiRef, () => B, [B]);
+	let Y = (e) => N("action", async () => {
+		await e.onSelect(Object.assign(Object.create(B), {
+			send: () => W(!0),
+			discard: () => J(!0)
+		}));
+	}), X = () => N("import", async () => {
+		let e = T(), t = await s.current.props.templates?.onImport?.();
+		if (t && x.current) {
+			if (w.current.some((e) => e.id === t.id)) throw Error(n.duplicateTemplate);
+			b((e) => [...e, structuredClone(t)]), T() === e && F(t, {}, !0);
+		}
+	}), { rendered: ie, renderError: ae } = O(o);
+	return {
+		api: B,
+		draft: o,
+		strings: n,
+		busy: d,
+		dataPending: ee,
+		error: p,
+		notice: h,
+		attempted: _,
+		rendered: ie,
+		renderError: ae,
+		definitions: S,
+		templates: C,
+		values: ie?.email.resolvedPlaceholders ?? {},
+		editorRef: l,
+		state: ne(),
+		report: A,
+		runAction: Y,
+		importTemplate: X,
+		changeBody: (e) => j((t) => ({
+			...t,
+			body: e
+		}), "body"),
+		changeSubject: (e) => j((t) => ({
+			...t,
+			subject: e
+		}), "subject"),
+		changeRecipients: (e, t) => j((n) => ({
+			...n,
+			[e]: t
+		}), "recipient")
+	};
+}
+//#endregion
+//#region src/components/features/email-composer/partials/recipients.tsx
+function xe({ recipient: e, field: t, index: n, options: r, busy: i, strings: a, change: o, remove: s, add: c, id: l, errorId: u }) {
+	let [d, f] = q(F(e));
+	U(() => {
+		f(F(e));
+	}, [e.name, e.email]);
+	let p = r.mode === "readonly", m = r.mode === "disabled" || i, h = r.mode !== "disabled" && r.allowRemove !== !1 && (!p || r.allowRemove === !0), g = () => {
+		!p && !m && d !== F(e) && o({
+			id: e.id,
+			...z(d)
+		});
+	};
+	return /* @__PURE__ */ X(b, {
+		className: "min-w-0 w-full",
+		children: [/* @__PURE__ */ Y(x, {
+			id: l,
+			"aria-invalid": !!u,
+			"aria-describedby": u,
+			"aria-label": a.recipientLabel(t, n),
+			value: d,
+			readOnly: p,
+			disabled: m,
+			title: F(e),
+			onChange: (e) => f(e.target.value),
+			onBlur: g,
+			onKeyDown: (t) => {
+				t.key === "Enter" && (t.preventDefault(), g()), t.key === "Escape" && (t.preventDefault(), f(F(e)));
+			}
+		}), (h || c) && /* @__PURE__ */ X(C, {
+			align: "inline-end",
+			children: [h && /* @__PURE__ */ Y(w, {
+				type: "button",
+				iconOnly: !0,
+				size: "sm",
+				disabled: i,
+				"aria-label": a.removeRecipient(e.email),
+				onClick: s,
+				children: /* @__PURE__ */ Y(fe, { className: "size-icon" })
+			}), c && /* @__PURE__ */ Y(w, {
+				type: "button",
+				iconOnly: !0,
+				size: "sm",
+				disabled: i,
+				"aria-label": a.addRecipient(t),
+				title: a.addRecipient(t),
+				onClick: c,
+				children: /* @__PURE__ */ Y(Z, { className: "size-icon" })
+			})]
+		})]
+	});
+}
+function Se({ field: e, value: t, options: n = {}, busy: r, strings: i, onChange: o, error: s, actions: c, report: l }) {
+	let [u, d] = q(!1), [f, p] = q(""), m = W(), h = s ? `${m}-error` : void 0, g = K(null), _ = K(t);
+	_.current = t;
+	let v = n.mode !== "disabled" && n.allowAdd !== !1 && (n.mode !== "readonly" || n.allowAdd === !0), y = u || t.length === 0, S = Q(n), T = () => {
+		if (r || !v || !y || S) return;
+		let e = z(f);
+		f.trim() && !_.current.some((t) => t.email.toLowerCase() === e.email.toLowerCase()) && o([..._.current, e]), p(""), d(!1);
+	};
+	U(() => {
+		u && g.current?.focus();
+	}, [u]);
+	let D = () => {
+		y && T(), d(!0), g.current?.focus();
+	};
+	return /* @__PURE__ */ Y(E, {
+		label: i[e],
+		required: e === "to",
+		error: s,
+		supportingTextId: h,
+		htmlFor: t.length ? `${m}-0` : `${m}-new`,
+		children: /* @__PURE__ */ X(a, {
+			id: `${m}-group`,
+			gap: "sm",
+			children: [S ? /* @__PURE__ */ Y(ye, {
+				state: n,
+				label: i.loadingRecipients(i[e]),
+				retryLabel: i.retry,
+				report: l
+			}) : /* @__PURE__ */ X(J, { children: [t.map((a, s) => /* @__PURE__ */ Y(xe, {
+				id: `${m}-${s}`,
+				errorId: h,
+				recipient: a,
+				field: i[e],
+				index: s,
+				options: n,
+				busy: r,
+				strings: i,
+				change: (e) => o(t.map((t, n) => n === s ? e : t)),
+				remove: () => o(t.filter((e, t) => t !== s)),
+				add: v && !y && s === t.length - 1 ? D : void 0
+			}, a.id ?? s)), y && /* @__PURE__ */ X(b, {
+				className: "min-w-0 w-full",
+				children: [/* @__PURE__ */ Y(x, {
+					id: `${m}-new`,
+					ref: g,
+					autoFocus: e !== "to",
+					"aria-invalid": !!s,
+					"aria-describedby": h,
+					"aria-label": i.newRecipient(i[e]),
+					placeholder: i.recipientPlaceholder,
+					value: f,
+					disabled: r || n.mode === "disabled",
+					readOnly: !v,
+					onChange: (e) => p(e.target.value),
+					onBlur: T,
+					onKeyDown: (e) => {
+						e.key === "Enter" && (e.preventDefault(), T()), e.key === "Escape" && (e.preventDefault(), p(""), d(!1));
+					}
+				}), v && /* @__PURE__ */ Y(C, {
+					align: "inline-end",
+					children: /* @__PURE__ */ Y(w, {
+						type: "button",
+						iconOnly: !0,
+						size: "sm",
+						disabled: r,
+						"aria-label": i.addRecipient(i[e]),
+						title: i.addRecipient(i[e]),
+						onMouseDown: (e) => e.preventDefault(),
+						onClick: D,
+						children: /* @__PURE__ */ Y(Z, { className: "size-icon" })
+					})
+				})]
+			})] }), c && /* @__PURE__ */ Y(a, {
+				direction: "horizontal",
+				gap: "xs",
+				justify: "end",
+				children: c
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/components/features/email-composer/partials/variables.tsx
+function Ce({ definitions: e, values: t, draft: r, api: o, strings: s, busy: c, editable: l }) {
+	let u = W();
+	return /* @__PURE__ */ Y(i, {
+		minColumnWidth: "sm",
+		gap: "md",
+		children: Object.keys(e).map((i) => {
+			let d = e[i], f = Object.hasOwn(r.placeholderOverrides, i), p = `${u}-email-variable-${i}`, m = {
+				id: p,
+				value: String(t[i] ?? ""),
+				disabled: c,
+				readOnly: !d.editable
+			}, h = d.input === "textarea" ? /* @__PURE__ */ Y(S, {
+				...m,
+				onChange: (e) => o.setPlaceholder(i, e.target.value)
+			}) : d.input === "select" ? /* @__PURE__ */ Y(D, {
+				...m,
+				placeholder: s.choose,
+				options: [...d.options ?? []],
+				onValueChange: (e) => o.setPlaceholder(i, e ?? "")
+			}) : /* @__PURE__ */ Y(y, {
+				...m,
+				type: d.input === "number" ? "number" : d.input === "date" ? "date" : "text",
+				onChange: (e) => o.setPlaceholder(i, d.input === "number" && e.target.value !== "" ? Number(e.target.value) : e.target.value)
+			});
+			return /* @__PURE__ */ Y(E, {
+				label: d.group ? `${d.group} · ${d.label}` : d.label,
+				htmlFor: p,
+				required: d.required,
+				helperText: `${f ? s.overridden : s.dynamic}${d.description ? ` · ${d.description}` : ""}`,
+				children: /* @__PURE__ */ X(a, {
+					id: `${p}-group`,
+					direction: "horizontal",
+					gap: "sm",
+					align: "start",
+					wrap: !1,
+					children: [
+						/* @__PURE__ */ Y("div", {
+							className: "min-w-0 flex-1",
+							children: h
+						}),
+						/* @__PURE__ */ Y(n, {
+							type: "button",
+							iconOnly: !0,
+							size: "sm",
+							buttonStyle: "ghost",
+							tone: "secondary",
+							disabled: c || !l,
+							"aria-label": s.insertVariable(d.label),
+							onClick: () => o.insertPlaceholder(i),
+							children: /* @__PURE__ */ Y(Z, { className: "size-icon" })
+						}),
+						f && /* @__PURE__ */ Y(n, {
+							type: "button",
+							size: "sm",
+							buttonStyle: "ghost",
+							tone: "secondary",
+							disabled: c,
+							onClick: () => o.clearPlaceholderOverride(i),
+							children: s.reset
+						})
+					]
+				})
+			}, i);
+		})
+	});
+}
+//#endregion
+//#region src/components/features/email-composer/partials/body-editor.tsx
+var we = me.create({
+	name: "placeholderToken",
+	group: "inline",
+	inline: !0,
+	atom: !0,
+	addAttributes: () => ({ key: {
+		default: "",
+		parseHTML: (e) => e.getAttribute("data-placeholder")
+	} }),
+	parseHTML: () => [{ tag: "span[data-placeholder]" }],
+	renderHTML: ({ node: e, HTMLAttributes: t }) => [
+		"span",
+		ge(t, {
+			"data-placeholder": e.attrs.key,
+			class: "rounded-inner bg-accent text-accent-foreground",
+			contenteditable: "false"
+		}),
+		`{{${e.attrs.key}}}`
+	],
+	renderText: ({ node: e }) => `{{${e.attrs.key}}}`
+}), $ = [ve.configure({ link: { openOnClick: !1 } }), we];
+function Te({ body: n, disabled: r, onChange: i, adapterRef: o, strings: l }) {
+	let u = K(i);
+	u.current = i;
+	let d = K(!1), [f, p] = q(!1), [m, g] = q(""), [v, b] = q(""), x = K({
+		from: 1,
+		to: 1
+	}), S = e(M, {
+		editorLabel: l.body,
+		toolbar: l.toolbar
+	}), C = _e({
+		extensions: $,
+		immediatelyRender: !1,
+		shouldRerenderOnTransaction: !0,
+		content: n.kind === "rich" ? n.document : P(n),
+		editable: !r,
+		editorProps: { attributes: {
+			role: "textbox",
+			"aria-label": l.body,
+			"aria-multiline": "true",
+			class: _
+		} },
+		onUpdate: ({ editor: e }) => {
+			d.current || u.current({
+				kind: "rich",
+				document: e.getJSON()
+			});
+		}
+	});
+	U(() => {
+		if (C) try {
+			let e = n.kind === "rich" ? C.schema.nodeFromJSON(n.document).toJSON() : he(P(n), $);
+			JSON.stringify(C.getJSON()) !== JSON.stringify(e) && C.commands.setContent(e, { emitUpdate: !1 });
+		} catch {}
+	}), U(() => {
+		C?.setEditable(!r && n.kind !== "html", !1);
+	}, [
+		C,
+		r,
+		n.kind
+	]), U(() => {
+		(r || n.kind === "html") && p(!1);
+	}, [r, n.kind]), G(o, () => {
+		let e = (e) => {
+			if (!C) throw Error(l.editorNotReady);
+			d.current = !0;
+			try {
+				return e(), {
+					kind: "rich",
+					document: C.getJSON()
+				};
+			} finally {
+				d.current = !1;
+			}
+		};
+		return {
+			synchronize: (e) => {
+				if (!C) return;
+				let t = e.kind === "rich" ? C.schema.nodeFromJSON(e.document).toJSON() : he(P(e), $);
+				JSON.stringify(C.getJSON()) !== JSON.stringify(t) && C.commands.setContent(t, { emitUpdate: !1 });
+			},
+			focus: () => {
+				C?.commands.focus();
+			},
+			convert: (e) => ({
+				kind: "rich",
+				document: e.kind === "rich" ? e.document : he(P(e), $)
+			}),
+			insert: (t, n) => e(() => {
+				n === "append" && C.commands.focus("end"), C.chain().focus().insertContent(t.kind === "rich" ? t.document.content ?? [] : P(t)).run();
+			}),
+			insertText: (t) => e(() => {
+				t && C.chain().focus().insertContent({
+					type: "text",
+					text: t
+				}).run();
+			}),
+			insertPlaceholder: (t) => e(() => {
+				C.chain().focus().insertContent({
+					type: "placeholderToken",
+					attrs: { key: t }
+				}).run();
+			})
+		};
+	}, [C, l]);
+	let w = [
+		{
+			id: "bold",
+			icon: ie,
+			label: S.toolbar.bold,
+			isActive: () => !!C?.isActive("bold"),
+			run: () => {
+				C?.chain().focus().toggleBold().run();
+			}
+		},
+		{
+			id: "italic",
+			icon: ae,
+			label: S.toolbar.italic,
+			isActive: () => !!C?.isActive("italic"),
+			run: () => {
+				C?.chain().focus().toggleItalic().run();
+			}
+		},
+		{
+			id: "bullet",
+			icon: se,
+			label: S.toolbar.bulletList,
+			isActive: () => !!C?.isActive("bulletList"),
+			run: () => {
+				C?.chain().focus().toggleBulletList().run();
+			}
+		},
+		{
+			id: "ordered",
+			icon: ce,
+			label: S.toolbar.orderedList,
+			isActive: () => !!C?.isActive("orderedList"),
+			run: () => {
+				C?.chain().focus().toggleOrderedList().run();
+			}
+		},
+		{
+			id: "undo",
+			icon: de,
+			label: S.toolbar.undo,
+			isActive: () => !1,
+			run: () => {
+				C?.chain().focus().undo().run();
+			},
+			disabled: !C?.can().undo()
+		},
+		{
+			id: "redo",
+			icon: le,
+			label: S.toolbar.redo,
+			isActive: () => !1,
+			run: () => {
+				C?.chain().focus().redo().run();
+			},
+			disabled: !C?.can().redo()
+		}
+	];
+	return /* @__PURE__ */ X(a, {
+		gap: "none",
+		className: t("email-composer--editor", j.frame, r && j.disabled),
+		children: [
+			/* @__PURE__ */ Y(A, {
+				buttons: w,
+				disabled: r,
+				hasEditor: !!C,
+				sourceMode: !1,
+				hideSourceToggle: !0,
+				toggleSourceMode: () => {},
+				strings: S,
+				extraToolbarItems: [{
+					id: "link",
+					icon: oe,
+					label: l.link,
+					onClick: () => {
+						C && (x.current = {
+							from: C.state.selection.from,
+							to: C.state.selection.to
+						}, g(String(C.getAttributes("link").href ?? "")), b(""), p(!0));
+					}
+				}]
+			}),
+			/* @__PURE__ */ Y(pe, {
+				editor: C,
+				className: t(j.content, "min-h-64 w-full min-w-0 [&_.ProseMirror]:min-h-64")
+			}),
+			/* @__PURE__ */ Y(h, {
+				open: f,
+				onOpenChange: p,
+				title: l.linkTitle,
+				strings: {
+					confirm: l.apply,
+					cancel: l.cancel,
+					close: l.closeLink
+				},
+				closeOnAsyncComplete: !1,
+				onAsyncConfirm: async () => {
+					let e = m.trim();
+					if (e && !/^(https?:\/\/|mailto:)/i.test(e)) {
+						b(l.invalidLink);
+						return;
+					}
+					C?.commands.setTextSelection(x.current), e ? C?.chain().focus().extendMarkRange("link").setLink({ href: e }).run() : C?.chain().focus().extendMarkRange("link").unsetLink().run(), p(!1);
+				},
+				children: /* @__PURE__ */ X(a, {
+					gap: "md",
+					children: [/* @__PURE__ */ Y(E, {
+						label: l.linkUrl,
+						children: /* @__PURE__ */ Y(y, {
+							value: m,
+							onChange: (e) => g(e.target.value)
+						})
+					}), v && /* @__PURE__ */ Y(s, {
+						tone: "destructive",
+						children: /* @__PURE__ */ Y(c, { children: v })
+					})]
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/features/email-composer/partials/html-preview.tsx
+function Ee({ html: e, subject: t, strings: n }) {
+	return /* @__PURE__ */ X(a, {
+		gap: "normal",
+		className: "min-w-0",
+		children: [/* @__PURE__ */ X(r, {
+			type: "secondary",
+			children: [
+				n.subject,
+				": ",
+				t
+			]
+		}), /* @__PURE__ */ Y(l, {
+			surface: "card",
+			padding: "none",
+			children: /* @__PURE__ */ Y("iframe", {
+				title: n.previewLabel,
+				sandbox: "",
+				referrerPolicy: "no-referrer",
+				className: "h-80 w-full border-0",
+				srcDoc: `<!doctype html><html><head><meta charset="utf-8"><meta name="color-scheme" content="only light"><meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src https:; style-src 'unsafe-inline'; base-uri 'none'; form-action 'none';"></head><body>${e}</body></html>`
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/components/features/email-composer/email-composer.tsx
+function De(e) {
+	let r = be(e), { api: i, draft: u, strings: d, busy: _, state: b } = r, [x, S] = q("editor"), [C, w] = q(e.placeholders?.showEditor ?? !1), [D, A] = q(!1), [j, M] = q(!1), [N, P] = q(!1), F = W(), I = x === "preview" || u.body.kind === "html", L = (t) => (e.actions ?? []).filter((e) => (e.position ?? "toolbar") === t && (e.visible?.(b) ?? !0)).map((e) => ({
+		id: e.id,
+		label: e.label,
+		icon: e.icon,
+		disabled: _ || e.disabled?.(b),
+		onClick: () => {
+			r.runAction(e);
+		},
+		buttonStyle: "ghost",
+		tone: "secondary"
+	})), R = /* @__PURE__ */ X(a, {
+		direction: {
+			base: "vertical",
+			sm: "horizontal"
+		},
+		gap: "sm",
+		align: {
+			base: "stretch",
+			sm: "center"
+		},
+		justify: "between",
+		className: "w-full",
+		children: [/* @__PURE__ */ X(a, {
+			direction: "horizontal",
+			gap: "sm",
+			children: [e.buttons?.discard !== !1 && /* @__PURE__ */ Y(n, {
+				type: "button",
+				tone: "secondary",
+				buttonStyle: "ghost",
+				disabled: _,
+				onClick: () => {
+					i.discard();
+				},
+				children: e.buttons?.discard?.label ?? d.discard
+			}), /* @__PURE__ */ Y(p, { actions: L("footer-start") })]
+		}), /* @__PURE__ */ X(a, {
+			direction: "horizontal",
+			gap: "sm",
+			justify: "end",
+			children: [
+				/* @__PURE__ */ Y(p, { actions: L("footer-end") }),
+				!!L("overflow").length && /* @__PURE__ */ Y(f, {
+					actions: L("overflow"),
+					srText: d.more,
+					buttonProps: { disabled: _ }
+				}),
+				e.buttons?.send !== !1 && /* @__PURE__ */ X(n, {
+					type: "button",
+					tone: "primary",
+					disabled: _ || r.dataPending,
+					loading: _,
+					strings: { loading: d.working },
+					onClick: () => {
+						i.send();
+					},
+					children: [/* @__PURE__ */ Y(ue, { className: "size-icon" }), _ ? d.working : e.buttons?.send?.label ?? d.send]
+				})
+			]
+		})]
+	}), z = (e) => r.attempted ? b.issues.find((t) => t.field === e)?.message : void 0, B = /* @__PURE__ */ X(a, {
+		gap: "lg",
+		className: "email-composer--body min-w-0",
+		children: [
+			/* @__PURE__ */ X(a, {
+				gap: "md",
+				className: "email-composer--details",
+				children: [/* @__PURE__ */ Y(a, {
+					gap: "md",
+					children: [
+						"to",
+						"cc",
+						"bcc"
+					].filter((t) => t === "to" || t === "cc" && (D || u.cc.length || Q(e.recipients?.cc)) || t === "bcc" && (j || u.bcc.length || Q(e.recipients?.bcc))).map((t) => /* @__PURE__ */ Y(Se, {
+						field: t,
+						value: u[t],
+						options: e.recipients?.[t],
+						strings: d,
+						busy: _,
+						report: r.report,
+						error: z(t),
+						onChange: (e) => r.changeRecipients(t, e),
+						actions: t === "to" ? /* @__PURE__ */ X(J, { children: [!D && !u.cc.length && /* @__PURE__ */ Y(n, {
+							type: "button",
+							size: "sm",
+							buttonStyle: "ghost",
+							tone: "secondary",
+							disabled: _,
+							onClick: () => A(!0),
+							children: d.cc
+						}), !j && !u.bcc.length && /* @__PURE__ */ Y(n, {
+							type: "button",
+							size: "sm",
+							buttonStyle: "ghost",
+							tone: "secondary",
+							disabled: _,
+							onClick: () => M(!0),
+							children: d.bcc
+						})] }) : void 0
+					}, t))
+				}), /* @__PURE__ */ Y(E, {
+					label: d.subject,
+					required: !0,
+					htmlFor: `${F}-subject`,
+					error: z("subject"),
+					supportingTextId: `${F}-subject-error`,
+					children: /* @__PURE__ */ Y(y, {
+						id: `${F}-subject`,
+						value: u.subject,
+						readOnly: e.subject?.readOnly,
+						disabled: _,
+						invalid: !!z("subject"),
+						"aria-describedby": z("subject") ? `${F}-subject-error` : void 0,
+						onChange: (e) => r.changeSubject(e.target.value)
+					})
+				})]
+			}),
+			/* @__PURE__ */ Y(te, {
+				value: I ? "preview" : "editor",
+				onValueChange: (e) => {
+					e && S(e);
+				},
+				children: /* @__PURE__ */ X(l, {
+					surface: "flat",
+					padding: "none",
+					contentGap: "md",
+					title: d.body,
+					headerAction: /* @__PURE__ */ X(ee, { children: [/* @__PURE__ */ Y(O, {
+						value: "editor",
+						disabled: u.body.kind === "html",
+						children: d.editor
+					}), /* @__PURE__ */ Y(O, {
+						value: "preview",
+						children: d.preview
+					})] }),
+					children: [
+						(!!e.templates || !!r.templates.length || L("toolbar").length > 0) && /* @__PURE__ */ X(a, {
+							direction: "horizontal",
+							gap: "sm",
+							align: "center",
+							className: "email-composer--message-actions",
+							children: [
+								(e.templates || !!r.templates.length) && /* @__PURE__ */ Y(ne, {
+									trigger: /* @__PURE__ */ Y(n, {
+										type: "button",
+										tone: "secondary",
+										buttonStyle: "outline",
+										size: "sm",
+										disabled: _,
+										children: d.templates
+									}),
+									items: r.templates.map((e) => ({
+										value: e.id,
+										label: e.name,
+										description: e.description ?? e.category,
+										data: e
+									})),
+									onSelect: (e) => {
+										try {
+											i.applyTemplate(e.value);
+										} catch (e) {
+											r.report(e);
+										}
+									},
+									loading: e.templates?.loading,
+									error: e.templates?.error,
+									onRetry: e.templates?.onRetry ? () => {
+										Promise.resolve().then(e.templates.onRetry).catch(r.report);
+									} : void 0,
+									onOpenChange: e.templates?.onOpenChange,
+									strings: {
+										searchPlaceholder: d.searchTemplates,
+										empty: d.noTemplates,
+										loading: d.loadingTemplates,
+										retry: d.retry
+									}
+								}),
+								e.templates?.allowImport && e.templates.onImport && /* @__PURE__ */ Y(n, {
+									type: "button",
+									tone: "secondary",
+									buttonStyle: "ghost",
+									size: "sm",
+									disabled: _,
+									onClick: () => {
+										r.importTemplate();
+									},
+									children: d.importTemplate
+								}),
+								/* @__PURE__ */ Y(p, {
+									size: "sm",
+									actions: L("toolbar")
+								})
+							]
+						}),
+						/* @__PURE__ */ Y(k, {
+							value: "editor",
+							keepMounted: !0,
+							children: /* @__PURE__ */ Y(Te, {
+								body: u.body,
+								disabled: _ || I,
+								onChange: r.changeBody,
+								adapterRef: r.editorRef,
+								strings: d
+							})
+						}),
+						/* @__PURE__ */ Y(k, {
+							value: "preview",
+							children: r.rendered && /* @__PURE__ */ Y(Ee, {
+								html: r.rendered.email.html,
+								subject: r.rendered.email.subject,
+								strings: d
+							})
+						})
+					]
+				})
+			}),
+			(!!Object.keys(r.definitions).length || Q(e.placeholders)) && /* @__PURE__ */ Y(v, {
+				value: C ? ["variables"] : [],
+				onValueChange: (e) => w(e.includes("variables")),
+				items: [{
+					value: "variables",
+					title: d.variables,
+					description: d.variablesDescription,
+					content: Q(e.placeholders) ? /* @__PURE__ */ Y(ye, {
+						state: e.placeholders,
+						label: d.loadingVariables,
+						retryLabel: d.retry,
+						report: r.report
+					}) : /* @__PURE__ */ Y(Ce, {
+						definitions: r.definitions,
+						values: r.values,
+						draft: u,
+						api: i,
+						strings: d,
+						busy: _,
+						editable: !I
+					})
+				}]
+			}),
+			u.body.kind === "html" && /* @__PURE__ */ Y(n, {
+				type: "button",
+				tone: "secondary",
+				buttonStyle: "outline",
+				disabled: _,
+				onClick: () => P(!0),
+				children: d.convert
+			}),
+			(r.error || !r.dataPending && r.renderError) && /* @__PURE__ */ X(s, {
+				tone: "destructive",
+				children: [/* @__PURE__ */ Y(o, { children: d.errorTitle }), /* @__PURE__ */ Y(c, { children: r.error || r.renderError })]
+			}),
+			r.notice && /* @__PURE__ */ Y(s, {
+				tone: "success",
+				role: "status",
+				children: /* @__PURE__ */ Y(c, { children: r.notice })
+			}),
+			e.children?.(i)
+		]
+	}), V = e.title ?? d.title, H = e.onClose ? /* @__PURE__ */ Y(n, {
+		type: "button",
+		iconOnly: !0,
+		tone: "secondary",
+		buttonStyle: "ghost",
+		size: "sm",
+		disabled: _,
+		"aria-label": d.close,
+		onClick: e.onClose,
+		children: /* @__PURE__ */ Y(fe, { className: "size-icon" })
+	}) : void 0, U, G = t("email-composer--component min-w-0", e.className);
+	if (e.position === "dialog" || e.position === "sheet") {
+		let t = {
+			open: !0,
+			title: V,
+			description: e.description,
+			onOpenChange: (t) => {
+				!t && !_ && e.onClose?.();
+			},
+			closeOnEscape: !_ && !!e.onClose,
+			closeOnBackdropClick: !1,
+			loading: _,
+			strings: { close: d.close },
+			showCancel: !1,
+			showConfirm: !1,
+			showCloseButton: !!e.onClose && !_,
+			footer: R,
+			className: G
+		};
+		U = e.position === "dialog" ? /* @__PURE__ */ Y(h, {
+			...t,
+			size: "3xl",
+			showCloseButton: !!e.onClose && !_,
+			children: B
+		}) : /* @__PURE__ */ Y(m, {
+			...t,
+			width: "3xl",
+			children: B
+		});
+	} else {
+		let t = /* @__PURE__ */ Y(l, {
+			className: G,
+			surface: "card",
+			title: V,
+			description: e.description,
+			headerAction: H,
+			headerDivider: !0,
+			footerDivider: !0,
+			footerSlot: R,
+			children: B
+		});
+		U = e.position === "floating" ? /* @__PURE__ */ Y("div", {
+			className: "fixed bottom-space-md end-space-md z-40 w-[min(42rem,calc(100vw-2rem))]",
+			children: /* @__PURE__ */ Y(T, {
+				className: "max-h-[calc(100dvh-2rem)]",
+				viewportClassName: "max-h-[calc(100dvh-2rem)]",
+				children: t
+			})
+		}) : t;
+	}
+	return /* @__PURE__ */ X(J, { children: [U, /* @__PURE__ */ Y(g, {
+		open: N,
+		onOpenChange: P,
+		title: d.convertTitle,
+		description: d.convertDescription,
+		strings: {
+			confirm: d.convert,
+			cancel: d.cancel,
+			close: d.closeConversion
+		},
+		onConfirm: () => {
+			!_ && r.editorRef.current && (i.setBody(r.editorRef.current.convert(u.body)), S("editor"));
+		}
+	})] });
+}
+//#endregion
+export { De as EmailComposer, P as bodyHtml, V as createHttpSender, H as defaultEmailComposerStrings, z as parseRecipient, F as recipientLabel, N as renderEmail, R as resolveValues, B as validate };
+
+//# sourceMappingURL=email-composer.js.map