import { $ as e, H as t, M as n, N as r, S as i, U as a, _ as o, at as s, b as c, c as l, ct as u, g as d, h as f, j as p, lt as m, m as h, n as g, r as _, st as v, w as y, y as b } from "./chunks/draggable-Bcb86AsV.js";
import { Fn as x, J as S, k as C, ln as w, tt as T } from "./chunks/features-BnG-dhzy.js";
import { S as ee } from "./chunks/icons-B_185qj_.js";
import { a as te, i as ne, n as re, o as E, r as D, s as O, t as k } from "./chunks/styles-DYDpAUsJ.js";
//#region src/Editor.vue?vue&type=script&setup=true&lang.ts
var A = ["data-tpl-theme"], j = {
	class: "tpl-header tpl:absolute tpl:top-0 tpl:right-0 tpl:left-0 tpl:z-50 tpl:grid tpl:h-14 tpl:grid-cols-[1fr_auto_1fr] tpl:items-center tpl:px-4 tpl:shadow-[var(--tpl-shadow-md)] tpl:border-b tpl:border-[var(--tpl-border)]",
	style: {
		"background-color": "color-mix(in srgb, var(--tpl-bg) 80%, transparent)",
		"backdrop-filter": "blur(12px)",
		"-webkit-backdrop-filter": "blur(12px)"
	}
}, M = { class: "tpl:flex tpl:items-center tpl:justify-center tpl:gap-10" }, N = { class: "tpl:sticky tpl:top-0 tpl:z-40 tpl:h-0" }, P = { class: "tpl:flex tpl:justify-center tpl:p-8" }, F = ["aria-label"], I = /* @__PURE__ */ T(/* @__PURE__ */ i({
	__name: "Editor",
	props: {
		config: {},
		translations: {},
		fontsManager: {}
	},
	setup(e, { expose: i }) {
		let _ = e, y = w({
			content: _.config.content,
			templateDefaults: _.config.templateDefaults
		}), x = C({
			editor: y,
			config: {
				uiTheme: _.config.uiTheme,
				theme: _.config.theme,
				blockDefaults: _.config.blockDefaults,
				customBlocks: _.config.customBlocks,
				mergeTags: _.config.mergeTags,
				displayConditions: _.config.displayConditions,
				onRequestMedia: _.config.onRequestMedia,
				onSave: _.config.onSave ? () => _.config.onSave(JSON.parse(JSON.stringify(y.state.content))) : void 0
			},
			translations: _.translations,
			fontsManager: _.fontsManager,
			autoSaveOptions: _.config.onChange ? { onChange: () => _.config.onChange(JSON.parse(JSON.stringify(y.state.content))) } : null
		});
		return p(async () => {
			await _.fontsManager.loadCustomFonts();
		}), n(() => {
			_.fontsManager.cleanupFontLinks(), x.destroy();
		}), i({
			getContent: () => y.content.value,
			setContent: (e) => y.setContent(e),
			setTheme: (e) => y.setUiTheme(e),
			renderCustomBlock: x.registry.renderCustomBlock
		}), (n, i) => (r(), o("div", {
			class: v(["tpl tpl:relative tpl:h-full tpl:overflow-hidden", { "tpl:dark": s(y).state.darkMode }]),
			"data-tpl-theme": s(x).resolvedTheme.value,
			style: u(s(x).themeStyles.value)
		}, [
			h("header", j, [
				i[5] ||= h("div", { class: "tpl:flex tpl:items-center tpl:gap-2.5" }, null, -1),
				h("div", M, [
					c(ne, {
						viewport: s(y).state.viewport,
						onChange: s(y).setViewport
					}, null, 8, ["viewport", "onChange"]),
					c(re, {
						"dark-mode": s(y).state.darkMode,
						onChange: s(y).setDarkMode
					}, null, 8, ["dark-mode", "onChange"]),
					c(D, {
						"preview-mode": s(y).state.previewMode,
						onChange: s(y).setPreviewMode
					}, null, 8, ["preview-mode", "onChange"])
				]),
				i[6] ||= h("div", { class: "tpl:flex tpl:min-w-[200px] tpl:items-center tpl:justify-end tpl:gap-3" }, null, -1)
			]),
			a(c(E, null, null, 512), [[l, !s(y).state.previewMode]]),
			h("div", {
				class: v(["tpl-body tpl:absolute tpl:bottom-0 tpl:overflow-auto tpl:bg-[var(--tpl-canvas-bg)]", [s(y).state.previewMode ? "tpl:left-0 tpl:right-0" : "tpl:left-12 tpl:right-[320px]", "tpl:top-14"]]),
				style: { transition: "all 300ms cubic-bezier(0.34, 1.56, 0.64, 1)" }
			}, [h("div", N, [c(g, { name: "tpl-restore-btn" }, {
				default: t(() => [s(x).conditionPreview.hasHiddenBlocks.value ? (r(), o("button", {
					key: 0,
					class: "tpl:absolute tpl:left-1/2 tpl:top-2 tpl:-translate-x-1/2 tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:rounded-full tpl:border tpl:px-3.5 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:whitespace-nowrap tpl:shadow-md tpl:hover:opacity-80 tpl:bg-[var(--tpl-warning-light)] tpl:text-[var(--tpl-warning)] tpl:border-[var(--tpl-warning)]",
					style: { "backdrop-filter": "blur(8px)" },
					onClick: i[0] ||= (e) => s(x).conditionPreview.reset()
				}, [c(s(ee), {
					size: 13,
					"stroke-width": 2
				}), b(" " + m(s(x).t.blockSettings.restoreHiddenBlocks), 1)])) : d("", !0)]),
				_: 1
			})]), h("div", P, [c(O, {
				viewport: s(y).state.viewport,
				content: s(y).content.value,
				"selected-block-id": s(y).state.selectedBlockId,
				"dark-mode": s(y).state.darkMode,
				"preview-mode": s(y).state.previewMode,
				onSelectBlock: s(y).selectBlock
			}, null, 8, [
				"viewport",
				"content",
				"selected-block-id",
				"dark-mode",
				"preview-mode",
				"onSelectBlock"
			])])], 2),
			e.config.branding === !1 ? d("", !0) : (r(), f(k, {
				key: 0,
				"position-class": [s(y).state.previewMode ? "tpl:left-0 tpl:right-0" : "tpl:left-12 tpl:right-[320px]"]
			}, null, 8, ["position-class"])),
			h("div", {
				class: "tpl-sr-only",
				role: "status",
				"aria-live": "polite",
				"aria-atomic": "true",
				"aria-label": s(x).t.landmarks.reorderAnnouncements
			}, m(s(x).keyboardReorder.announcement.value), 9, F),
			a(c(te, {
				"selected-block": s(y).selectedBlock.value,
				settings: s(y).content.value.settings,
				onUpdateBlock: i[1] ||= (e) => s(y).updateBlock(s(y).state.selectedBlockId, e),
				onDeleteBlock: i[2] ||= () => {
					s(y).state.selectedBlockId && s(x).blockActions.deleteBlock(s(y).state.selectedBlockId);
				},
				onDuplicateBlock: i[3] ||= () => {
					s(y).selectedBlock.value && s(x).blockActions.duplicateBlock(s(y).selectedBlock.value);
				},
				onUpdateSettings: i[4] ||= (e) => s(y).updateSettings(e)
			}, null, 8, ["selected-block", "settings"]), [[l, !s(y).state.previewMode]])
		], 14, A));
	}
}), [["__scopeId", "data-v-1bfc44e9"]]), L = /* @__PURE__ */ Object.assign({
	"./locales/de.ts": () => import("./chunks/de-BSWt7lYu.js"),
	"./locales/en.ts": () => import("./chunks/en-9-vIGlc7.js")
}), R = /* @__PURE__ */ Object.assign({
	"./locales/cloud/de.ts": () => import("./chunks/de-Db6I9YdS.js"),
	"./locales/cloud/en.ts": () => import("./chunks/en-BbqBJ2Q3.js")
});
function z(e) {
	return Object.keys(e).map((e) => e.match(/\/([^/]+)\.ts$/)?.[1]).filter((e) => !!e);
}
var B = z(L), V = z(R);
function H(e) {
	return e.split("-")[0].toLowerCase();
}
function U(e, t) {
	let n = H(e);
	return t.includes(n) ? n : "en";
}
async function W(e) {
	let t = L[`./locales/${U(e, B)}.ts`];
	return (await t()).default;
}
async function G(e) {
	let t = R[`./locales/cloud/${U(e, V)}.ts`];
	return (await t()).default;
}
//#endregion
//#region src/utils/toMjml.ts
async function K(e) {
	let t;
	try {
		t = await import("./chunks/dist-MGrg9tLo.js");
	} catch {
		throw Error("[Templatical] toMjml() requires the @templatical/renderer package. Please install it.");
	}
	return t.renderToMjml(e.getContent(), { renderCustomBlock: e.renderCustomBlock });
}
//#endregion
//#region src/index.ts
var q = null, J = e(null);
async function Y(e) {
	let t = typeof e.container == "string" ? document.querySelector(e.container) : e.container;
	if (!t) throw Error(`[Templatical] Container element not found: ${e.container}`);
	let n = await W(e.locale ?? "en"), r = S(e.fonts);
	q && Q(), q = _({ setup() {
		return () => y(I, {
			config: e,
			translations: n,
			fontsManager: r,
			ref: J
		});
	} }), q.mount(t);
	let i = {
		getContent() {
			return JSON.parse(JSON.stringify(J.value ? J.value.getContent() : e.content));
		},
		setContent(t) {
			J.value && J.value.setContent(t), e.content = t;
		},
		setTheme(e) {
			J.value && J.value.setTheme(e);
		},
		unmount: Q,
		renderCustomBlock(e) {
			return J.value ? J.value.renderCustomBlock(e) : Promise.reject(/* @__PURE__ */ Error("[Templatical] Editor not ready"));
		},
		toMjml: () => K(i)
	};
	return i;
}
var X = null, Z = e(null);
async function ie(e) {
	let t = typeof e.container == "string" ? document.querySelector(e.container) : e.container;
	if (!t) throw Error(`[Templatical] Container element not found: ${e.container}`);
	let { default: n } = await import("./chunks/CloudEditor-CRYF-bR3.js"), [r, i] = await Promise.all([W(e.locale ?? "en"), G(e.locale ?? "en")]), a = S(e.fonts);
	return X && $(), await new Promise((o, s) => {
		let c = setTimeout(() => {
			s(/* @__PURE__ */ Error("[Templatical] Cloud editor initialization timed out"));
		}, x);
		X = _({ setup() {
			return () => y(n, {
				config: e,
				translations: r,
				cloudTranslations: i,
				fontsManager: a,
				ref: Z,
				onReady: () => {
					clearTimeout(c), o();
				}
			});
		} }), X.mount(t);
	}), {
		getContent() {
			return JSON.parse(JSON.stringify(Z.value ? Z.value.getContent() : e.content));
		},
		setContent(e) {
			Z.value && Z.value.setContent(e);
		},
		setTheme(e) {
			Z.value && Z.value.setTheme(e);
		},
		unmount: $,
		create(e) {
			return Z.value ? Z.value.create(e) : Promise.reject(/* @__PURE__ */ Error("[Templatical] Cloud editor not ready"));
		},
		load(e) {
			return Z.value ? Z.value.load(e) : Promise.reject(/* @__PURE__ */ Error("[Templatical] Cloud editor not ready"));
		},
		save() {
			return Z.value ? Z.value.save() : Promise.reject(/* @__PURE__ */ Error("[Templatical] Cloud editor not ready"));
		}
	};
}
function Q() {
	q && (q.unmount(), q = null, J.value = null);
}
function $() {
	X && (X.unmount(), X = null, Z.value = null);
}
//#endregion
export { Y as init, ie as initCloud, Q as unmount, S as useFonts };

//# sourceMappingURL=editor.js.map