@templatical/editor 0.0.4 → 0.0.6

package/dist/cdn/editor.js

@@ -1,33 +1,20 @@
-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 ee, j as te, lt as d, m as f, n as ne, r as p, st as m, w as h, y as g } from "./chunks/draggable-BQNU47zu.js";
-import { $ as _, $t as re, Bt as ie, Ft as ae, Gt as oe, Ht as se, In as ce, It as v, J as y, Jt as b, Kt as x, Lt as S, Mt as C, Pt as w, Qt as T, Ut as E, Vt as D, Wt as O, Zt as k, k as A, qt as j, un as M, zt as N } from "./chunks/features-ofOGnSC0.js";
-import { S as P } from "./chunks/icons-bIb7PBOE.js";
-import { a as F, i as I, n as L, o as le, r as R, t as z } from "./chunks/styles-DQFExz-T.js";
-import { t as B } from "./chunks/_rolldown_dynamic_import_helper-DMEI4TQ3.js";
+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, j as f, lt as p, m, n as h, r as g, st as _, w as v, y } from "./chunks/draggable-m78lz0gI.js";
+import { $ as b, J as x, Mn as S, k as C, on as w } from "./chunks/features-B5dGxWLi.js";
+import { S as ee } from "./chunks/icons-hflTyPmb.js";
+import { a as T, i as E, n as D, o as O, r as k, s as A, t as j } from "./chunks/styles-hCOCOR6K.js";
+import { t as M } from "./chunks/_rolldown_dynamic_import_helper-DMEI4TQ3.js";
 //#region src/Editor.vue?vue&type=script&setup=true&lang.ts
-var V = ["data-tpl-theme"], H = {
+var N = ["data-tpl-theme"], P = {
 	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)"
 	}
-}, U = { class: "tpl:flex tpl:items-center tpl:gap-2.5" }, W = {
+}, F = { class: "tpl:flex tpl:items-center tpl:gap-2.5" }, I = {
 	class: "tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]",
 	style: { "letter-spacing": "-0.01em" }
-}, ue = { class: "tpl:flex tpl:items-center tpl:justify-center tpl:gap-10" }, de = { class: "tpl:sticky tpl:top-0 tpl:z-40 tpl:h-0" }, fe = { class: "tpl:flex tpl:justify-center tpl:p-8" }, pe = {
-	class: "tpl:pointer-events-auto tpl:flex tpl:items-center tpl:gap-1.5 tpl:rounded-tl-lg tpl:p-1",
-	style: {
-		"background-color": "color-mix(\n            in srgb,\n            var(--tpl-canvas-bg) 85%,\n            transparent\n          )",
-		"backdrop-filter": "blur(8px)",
-		"-webkit-backdrop-filter": "blur(8px)"
-	}
-}, me = {
-	href: "https://github.com/templatical/sdk",
-	target: "_blank",
-	rel: "noopener noreferrer",
-	class: "tpl:transition-colors tpl:duration-150 hover:tpl:opacity-80 tpl:text-[var(--tpl-text-dim)]",
-	style: { "text-decoration": "none" }
-}, he = ["aria-label"], ge = /* @__PURE__ */ _(/* @__PURE__ */ i({
+}, L = { class: "tpl:flex tpl:items-center tpl:justify-center tpl:gap-10" }, R = { class: "tpl:sticky tpl:top-0 tpl:z-40 tpl:h-0" }, z = { class: "tpl:flex tpl:justify-center tpl:p-8" }, B = ["aria-label"], V = /* @__PURE__ */ b(/* @__PURE__ */ i({
 	__name: "Editor",
 	props: {
 		config: {},
@@ -35,83 +22,83 @@ var V = ["data-tpl-theme"], H = {
 		fontsManager: {}
 	},
 	setup(e, { expose: i }) {
-		let p = e, h = M({
-			content: p.config.content,
-			templateDefaults: p.config.templateDefaults
-		}), _ = A({
-			editor: h,
+		let g = e, v = w({
+			content: g.config.content,
+			templateDefaults: g.config.templateDefaults
+		}), b = C({
+			editor: v,
 			config: {
-				uiTheme: p.config.uiTheme,
-				theme: p.config.theme,
-				blockDefaults: p.config.blockDefaults,
-				customBlocks: p.config.customBlocks,
-				mergeTags: p.config.mergeTags,
-				displayConditions: p.config.displayConditions,
-				onRequestMedia: p.config.onRequestMedia,
-				onSave: p.config.onSave ? () => p.config.onSave(JSON.parse(JSON.stringify(h.state.content))) : void 0
+				uiTheme: g.config.uiTheme,
+				theme: g.config.theme,
+				blockDefaults: g.config.blockDefaults,
+				customBlocks: g.config.customBlocks,
+				mergeTags: g.config.mergeTags,
+				displayConditions: g.config.displayConditions,
+				onRequestMedia: g.config.onRequestMedia,
+				onSave: g.config.onSave ? () => g.config.onSave(JSON.parse(JSON.stringify(v.state.content))) : void 0
 			},
-			translations: p.translations,
-			fontsManager: p.fontsManager,
-			autoSaveOptions: p.config.onChange ? { onChange: () => p.config.onChange(JSON.parse(JSON.stringify(h.state.content))) } : null
+			translations: g.translations,
+			fontsManager: g.fontsManager,
+			autoSaveOptions: g.config.onChange ? { onChange: () => g.config.onChange(JSON.parse(JSON.stringify(v.state.content))) } : null
 		});
-		return te(async () => {
-			await p.fontsManager.loadCustomFonts();
+		return f(async () => {
+			await g.fontsManager.loadCustomFonts();
 		}), n(() => {
-			p.fontsManager.cleanupFontLinks(), _.destroy();
+			g.fontsManager.cleanupFontLinks(), b.destroy();
 		}), i({
-			getContent: () => h.content.value,
-			setContent: (e) => h.setContent(e),
-			setTheme: (e) => h.setUiTheme(e)
+			getContent: () => v.content.value,
+			setContent: (e) => v.setContent(e),
+			setTheme: (e) => v.setUiTheme(e)
 		}), (e, n) => (r(), o("div", {
-			class: m(["tpl tpl:relative tpl:h-full tpl:overflow-hidden", { "tpl:dark": s(h).state.darkMode }]),
-			"data-tpl-theme": s(_).resolvedTheme.value,
-			style: u(s(_).themeStyles.value)
+			class: _(["tpl tpl:relative tpl:h-full tpl:overflow-hidden", { "tpl:dark": s(v).state.darkMode }]),
+			"data-tpl-theme": s(b).resolvedTheme.value,
+			style: u(s(b).themeStyles.value)
 		}, [
-			f("header", H, [
-				f("div", U, [n[5] ||= f("img", {
+			m("header", P, [
+				m("div", F, [n[5] ||= m("img", {
 					width: "24",
 					height: "24",
 					src: "https://templatical.com/logo.svg",
 					alt: "Templatical"
-				}, null, -1), f("span", W, d(s(_).t.header.title), 1)]),
-				f("div", ue, [
-					c(R, {
-						viewport: s(h).state.viewport,
-						onChange: s(h).setViewport
+				}, null, -1), m("span", I, p(s(b).t.header.title), 1)]),
+				m("div", L, [
+					c(E, {
+						viewport: s(v).state.viewport,
+						onChange: s(v).setViewport
 					}, null, 8, ["viewport", "onChange"]),
-					c(z, {
-						"dark-mode": s(h).state.darkMode,
-						onChange: s(h).setDarkMode
+					c(D, {
+						"dark-mode": s(v).state.darkMode,
+						onChange: s(v).setDarkMode
 					}, null, 8, ["dark-mode", "onChange"]),
-					c(L, {
-						"preview-mode": s(h).state.previewMode,
-						onChange: s(h).setPreviewMode
+					c(k, {
+						"preview-mode": s(v).state.previewMode,
+						onChange: s(v).setPreviewMode
 					}, null, 8, ["preview-mode", "onChange"])
 				]),
-				n[6] ||= f("div", { class: "tpl:flex tpl:min-w-[200px] tpl:items-center tpl:justify-end tpl:gap-3" }, null, -1)
+				n[6] ||= m("div", { class: "tpl:flex tpl:min-w-[200px] tpl:items-center tpl:justify-end tpl:gap-3" }, null, -1)
 			]),
-			a(c(F, null, null, 512), [[l, !s(h).state.previewMode]]),
-			f("div", {
-				class: m(["tpl-body tpl:absolute tpl:bottom-0 tpl:overflow-auto tpl:bg-[var(--tpl-canvas-bg)]", [s(h).state.previewMode ? "tpl:left-0 tpl:right-0" : "tpl:left-12 tpl:right-[320px]", "tpl:top-14"]]),
+			a(c(O, null, null, 512), [[l, !s(v).state.previewMode]]),
+			m("div", {
+				class: _(["tpl-body tpl:absolute tpl:bottom-0 tpl:overflow-auto tpl:bg-[var(--tpl-canvas-bg)]", [s(v).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)" }
-			}, [f("div", de, [c(ne, { name: "tpl-restore-btn" }, {
-				default: t(() => [s(_).conditionPreview.hasHiddenBlocks.value ? (r(), o("button", {
+			}, [m("div", R, [c(h, { name: "tpl-restore-btn" }, {
+				default: t(() => [s(b).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: n[0] ||= (e) => s(_).conditionPreview.reset()
-				}, [c(s(P), {
+					onClick: n[0] ||= (e) => s(b).conditionPreview.reset()
+				}, [c(s(ee), {
 					size: 13,
 					"stroke-width": 2
-				}), g(" " + d(s(_).t.blockSettings.restoreHiddenBlocks), 1)])) : ee("", !0)]),
+				}), y(" " + p(s(b).t.blockSettings.restoreHiddenBlocks), 1)])) : d("", !0)]),
 				_: 1
-			})]), f("div", fe, [c(le, {
-				viewport: s(h).state.viewport,
-				content: s(h).content.value,
-				"selected-block-id": s(h).state.selectedBlockId,
-				"dark-mode": s(h).state.darkMode,
-				"preview-mode": s(h).state.previewMode,
-				onSelectBlock: s(h).selectBlock
+			})]), m("div", z, [c(A, {
+				viewport: s(v).state.viewport,
+				content: s(v).content.value,
+				"selected-block-id": s(v).state.selectedBlockId,
+				"dark-mode": s(v).state.darkMode,
+				"preview-mode": s(v).state.previewMode,
+				onSelectBlock: s(v).selectBlock
 			}, null, 8, [
 				"viewport",
 				"content",
@@ -120,142 +107,126 @@ var V = ["data-tpl-theme"], H = {
 				"preview-mode",
 				"onSelectBlock"
 			])])], 2),
-			f("footer", { class: m(["tpl:pointer-events-none tpl:absolute tpl:bottom-0 tpl:z-50 tpl:flex tpl:h-8 tpl:items-center tpl:justify-end tpl:pr-4 tpl:text-[9px] tpl:opacity-90 tpl:transition-all tpl:duration-300 tpl:text-[var(--tpl-text-dim)]", [s(h).state.previewMode ? "tpl:left-0 tpl:right-0" : "tpl:left-12 tpl:right-[320px]"]]) }, [f("div", pe, [
-				f("span", null, d(s(_).t.footer.poweredBy), 1),
-				n[7] ||= f("a", {
-					href: "https://templatical.com",
-					target: "_blank",
-					rel: "noopener noreferrer",
-					class: "tpl:inline-flex tpl:items-center tpl:gap-1 tpl:font-medium tpl:transition-colors tpl:duration-150 hover:tpl:opacity-80 tpl:text-[var(--tpl-text-muted)]",
-					style: { "text-decoration": "none" }
-				}, [f("img", {
-					width: "14",
-					height: "14",
-					src: "https://templatical.com/logo.svg",
-					alt: ""
-				}), g(" Templatical ")], -1),
-				n[8] ||= f("span", { class: "tpl:text-[var(--tpl-border)]" }, "·", -1),
-				f("a", me, d(s(_).t.footer.openSource), 1)
-			])], 2),
-			f("div", {
+			c(j, { "position-class": [s(v).state.previewMode ? "tpl:left-0 tpl:right-0" : "tpl:left-12 tpl:right-[320px]"] }, null, 8, ["position-class"]),
+			m("div", {
 				class: "tpl-sr-only",
 				role: "status",
 				"aria-live": "polite",
 				"aria-atomic": "true",
-				"aria-label": s(_).t.landmarks.reorderAnnouncements
-			}, d(s(_).keyboardReorder.announcement.value), 9, he),
-			a(c(I, {
-				"selected-block": s(h).selectedBlock.value,
-				settings: s(h).content.value.settings,
-				onUpdateBlock: n[1] ||= (e) => s(h).updateBlock(s(h).state.selectedBlockId, e),
+				"aria-label": s(b).t.landmarks.reorderAnnouncements
+			}, p(s(b).keyboardReorder.announcement.value), 9, B),
+			a(c(T, {
+				"selected-block": s(v).selectedBlock.value,
+				settings: s(v).content.value.settings,
+				onUpdateBlock: n[1] ||= (e) => s(v).updateBlock(s(v).state.selectedBlockId, e),
 				onDeleteBlock: n[2] ||= () => {
-					s(h).state.selectedBlockId && s(_).blockActions.deleteBlock(s(h).state.selectedBlockId);
+					s(v).state.selectedBlockId && s(b).blockActions.deleteBlock(s(v).state.selectedBlockId);
 				},
 				onDuplicateBlock: n[3] ||= () => {
-					s(h).selectedBlock.value && s(_).blockActions.duplicateBlock(s(h).selectedBlock.value);
+					s(v).selectedBlock.value && s(b).blockActions.duplicateBlock(s(v).selectedBlock.value);
 				},
-				onUpdateSettings: n[4] ||= (e) => s(h).updateSettings(e)
-			}, null, 8, ["selected-block", "settings"]), [[l, !s(h).state.previewMode]])
-		], 14, V));
+				onUpdateSettings: n[4] ||= (e) => s(v).updateSettings(e)
+			}, null, 8, ["selected-block", "settings"]), [[l, !s(v).state.previewMode]])
+		], 14, N));
 	}
-}), [["__scopeId", "data-v-7e34c788"]]), _e = ["en", "de"];
-function ve(e) {
+}), [["__scopeId", "data-v-8c8f0453"]]), H = ["en", "de"];
+function U(e) {
 	return e.split("-")[0].toLowerCase();
 }
-async function G(e) {
-	let t = ve(e), n = _e.includes(t) ? t : "en";
-	return (await B(/* @__PURE__ */ Object.assign({
-		"./locales/de.ts": () => import("./chunks/de-BB3dgVOc.js"),
-		"./locales/en.ts": () => import("./chunks/en-DeDcpnoS.js")
+async function W(e) {
+	let t = U(e), n = H.includes(t) ? t : "en";
+	return (await M(/* @__PURE__ */ Object.assign({
+		"./locales/de.ts": () => import("./chunks/de-D8oDPhBD.js"),
+		"./locales/en.ts": () => import("./chunks/en-HseRPPeK.js")
 	}), `./locales/${n}.ts`, 3)).default;
 }
 //#endregion
 //#region src/index.ts
-var K = null, q = e(null);
-async function J(e) {
+var G = null, K = e(null);
+async function q(e) {
 	let t = typeof e.container == "string" ? document.querySelector(e.container) : e.container;
 	if (!t) throw Error(`[Templatical] Container element not found: ${e.container}`);
-	K && Z();
-	let n = await G(e.locale ?? "en"), r = y(e.fonts);
-	K = p({ setup() {
-		return () => h(ge, {
+	G && Z();
+	let n = await W(e.locale ?? "en"), r = x(e.fonts);
+	G = g({ setup() {
+		return () => v(V, {
 			config: e,
 			translations: n,
 			fontsManager: r,
-			ref: q
+			ref: K
 		});
-	} }), K.mount(t);
+	} }), G.mount(t);
 	let i = {
 		getContent() {
-			return JSON.parse(JSON.stringify(q.value ? q.value.getContent() : e.content));
+			return JSON.parse(JSON.stringify(K.value ? K.value.getContent() : e.content));
 		},
 		setContent(t) {
-			q.value && q.value.setContent(t), e.content = t;
+			K.value && K.value.setContent(t), e.content = t;
 		},
 		setTheme(e) {
-			q.value && q.value.setTheme(e);
+			K.value && K.value.setTheme(e);
 		},
 		unmount: Z
 	};
 	return $(i), i;
 }
-var Y = null, X = e(null);
-async function ye(e) {
+var J = null, Y = e(null);
+async function X(e) {
 	let t = typeof e.container == "string" ? document.querySelector(e.container) : e.container;
 	if (!t) throw Error(`[Templatical] Container element not found: ${e.container}`);
-	Y && Q();
-	let { default: n } = await import("./chunks/CloudEditor-Bmp5IlWi.js"), r = await G(e.locale ?? "en"), i = y(e.fonts);
+	J && Q();
+	let { default: n } = await import("./chunks/CloudEditor-Bca3RyBW.js"), r = await W(e.locale ?? "en"), i = x(e.fonts);
 	await new Promise((a, o) => {
 		let s = setTimeout(() => {
 			o(/* @__PURE__ */ Error("[Templatical] Cloud editor initialization timed out"));
-		}, ce);
-		Y = p({ setup() {
-			return () => h(n, {
+		}, S);
+		J = g({ setup() {
+			return () => v(n, {
 				config: e,
 				translations: r,
 				fontsManager: i,
-				ref: X,
+				ref: Y,
 				onReady: () => {
 					clearTimeout(s), a();
 				}
 			});
-		} }), Y.mount(t);
+		} }), J.mount(t);
 	});
 	let a = {
 		getContent() {
-			return JSON.parse(JSON.stringify(X.value ? X.value.getContent() : e.content));
+			return JSON.parse(JSON.stringify(Y.value ? Y.value.getContent() : e.content));
 		},
 		setContent(e) {
-			X.value && X.value.setContent(e);
+			Y.value && Y.value.setContent(e);
 		},
 		setTheme(e) {
-			X.value && X.value.setTheme(e);
+			Y.value && Y.value.setTheme(e);
 		},
 		unmount: Q,
 		create(e) {
-			return X.value ? X.value.create(e) : Promise.reject(/* @__PURE__ */ Error("[Templatical] Cloud editor not ready"));
+			return Y.value ? Y.value.create(e) : Promise.reject(/* @__PURE__ */ Error("[Templatical] Cloud editor not ready"));
 		},
 		load(e) {
-			return X.value ? X.value.load(e) : Promise.reject(/* @__PURE__ */ Error("[Templatical] Cloud editor not ready"));
+			return Y.value ? Y.value.load(e) : Promise.reject(/* @__PURE__ */ Error("[Templatical] Cloud editor not ready"));
 		},
 		save() {
-			return X.value ? X.value.save() : Promise.reject(/* @__PURE__ */ Error("[Templatical] Cloud editor not ready"));
+			return Y.value ? Y.value.save() : Promise.reject(/* @__PURE__ */ Error("[Templatical] Cloud editor not ready"));
 		}
 	};
 	return $(a), a;
 }
 function Z() {
-	K && (K.unmount(), K = null, q.value = null);
+	G && (G.unmount(), G = null, K.value = null);
 }
 function Q() {
-	Y && (Y.unmount(), Y = null, X.value = null);
+	J && (J.unmount(), J = null, Y.value = null);
 }
 function $(e) {
-	import("./chunks/dist-B878xb_62.js").then((t) => {
+	import("./chunks/dist-BUmN5e4r.js").then((t) => {
 		e.toMjml = () => t.renderToMjml(e.getContent());
 	}).catch(() => {});
 }
 //#endregion
-export { C as ALLOW_CUSTOM_CONDITIONS_KEY, w as BLOCK_ACTIONS_KEY, ae as BLOCK_DEFAULTS_KEY, v as BLOCK_REGISTRY_KEY, S as CAPABILITIES_KEY, N as CONDITION_PREVIEW_KEY, ie as CUSTOM_BLOCK_DEFINITIONS_KEY, D as DISPLAY_CONDITIONS_KEY, se as EDITOR_KEY, E as FONTS_MANAGER_KEY, O as HISTORY_KEY, oe as MERGE_TAGS_KEY, x as MERGE_TAG_SYNTAX_KEY, j as ON_REQUEST_MEDIA_KEY, b as ON_REQUEST_MERGE_TAG_KEY, k as THEME_STYLES_KEY, T as TRANSLATIONS_KEY, re as UI_THEME_KEY, J as init, ye as initCloud, Z as unmount, y as useFonts };
+export { q as init, X as initCloud, Z as unmount, x as useFonts };
 
 //# sourceMappingURL=editor.js.map

package/dist/cdn/editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"editor.js","names":[],"sources":["../../src/Editor.vue","../../src/Editor.vue","../../src/i18n/index.ts","../../src/index.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, onUnmounted } from \"vue\";\nimport type { TemplaticalEditorConfig } from \"./index\";\nimport { useEditor } from \"@templatical/core\";\nimport type { TemplateContent, UiTheme } from \"@templatical/types\";\nimport { useEditorCore } from \"./composables/useEditorCore\";\nimport type { Translations } from \"./i18n\";\nimport type { UseFontsReturn } from \"./composables/useFonts\";\n\nimport { RotateCcw } from \"@lucide/vue\";\nimport Canvas from \"./components/Canvas.vue\";\nimport Sidebar from \"./components/Sidebar.vue\";\nimport RightSidebar from \"./components/RightSidebar.vue\";\nimport ViewportToggle from \"./components/ViewportToggle.vue\";\nimport PreviewToggle from \"./components/PreviewToggle.vue\";\nimport DarkModeToggle from \"./components/DarkModeToggle.vue\";\nimport \"./styles/index.css\";\n\nconst props = defineProps<{\n  config: TemplaticalEditorConfig;\n  translations: Translations;\n  fontsManager: UseFontsReturn;\n}>();\n\n// --- Core editor state ---\nconst editor = useEditor({\n  content: props.config.content!,\n  templateDefaults: props.config.templateDefaults,\n});\n\n// --- Shared editor core (composables, provides, plugins, keyboard) ---\nconst core = useEditorCore({\n  editor,\n  config: {\n    uiTheme: props.config.uiTheme,\n    theme: props.config.theme,\n    blockDefaults: props.config.blockDefaults,\n    customBlocks: props.config.customBlocks,\n    mergeTags: props.config.mergeTags,\n    displayConditions: props.config.displayConditions,\n    onRequestMedia: props.config.onRequestMedia,\n    onSave: props.config.onSave\n      ? () =>\n          props.config.onSave!(JSON.parse(JSON.stringify(editor.state.content)))\n      : undefined,\n  },\n  translations: props.translations,\n  fontsManager: props.fontsManager,\n  autoSaveOptions: props.config.onChange\n    ? {\n        onChange: () =>\n          props.config.onChange!(\n            JSON.parse(JSON.stringify(editor.state.content)),\n          ),\n      }\n    : null,\n});\n\n// --- Lifecycle ---\nonMounted(async () => {\n  await props.fontsManager.loadCustomFonts();\n});\n\nonUnmounted(() => {\n  props.fontsManager.cleanupFontLinks();\n  core.destroy();\n});\n\n// --- Public API (accessed via template ref from init()) ---\ndefineExpose({\n  getContent: () => editor.content.value,\n  setContent: (content: TemplateContent) => editor.setContent(content),\n  setTheme: (theme: UiTheme) => editor.setUiTheme(theme),\n});\n</script>\n\n<template>\n  <div\n    class=\"tpl tpl:relative tpl:h-full tpl:overflow-hidden\"\n    :class=\"{ 'tpl:dark': editor.state.darkMode }\"\n    :data-tpl-theme=\"core.resolvedTheme.value\"\n    :style=\"core.themeStyles.value\"\n  >\n    <!-- Header — absolute, full width, above everything -->\n    <header\n      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)]\"\n      style=\"\n        background-color: color-mix(in srgb, var(--tpl-bg) 80%, transparent);\n        backdrop-filter: blur(12px);\n        -webkit-backdrop-filter: blur(12px);\n      \"\n    >\n      <!-- Left: Logo -->\n      <div class=\"tpl:flex tpl:items-center tpl:gap-2.5\">\n        <img\n          width=\"24\"\n          height=\"24\"\n          src=\"https://templatical.com/logo.svg\"\n          alt=\"Templatical\"\n        />\n        <span\n          class=\"tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n          style=\"letter-spacing: -0.01em\"\n        >\n          {{ core.t.header.title }}\n        </span>\n      </div>\n\n      <!-- Center: viewport + preview + dark mode -->\n      <div class=\"tpl:flex tpl:items-center tpl:justify-center tpl:gap-10\">\n        <ViewportToggle\n          :viewport=\"editor.state.viewport\"\n          @change=\"editor.setViewport\"\n        />\n        <DarkModeToggle\n          :dark-mode=\"editor.state.darkMode\"\n          @change=\"editor.setDarkMode\"\n        />\n        <PreviewToggle\n          :preview-mode=\"editor.state.previewMode\"\n          @change=\"editor.setPreviewMode\"\n        />\n      </div>\n\n      <!-- Right: empty in OSS mode -->\n      <div\n        class=\"tpl:flex tpl:min-w-[200px] tpl:items-center tpl:justify-end tpl:gap-3\"\n      ></div>\n    </header>\n\n    <!-- Left sidebar — absolute, below header -->\n    <Sidebar v-show=\"!editor.state.previewMode\" />\n\n    <!-- Canvas area — absolute, fills remaining space -->\n    <div\n      class=\"tpl-body tpl:absolute tpl:bottom-0 tpl:overflow-auto tpl:bg-[var(--tpl-canvas-bg)]\"\n      style=\"transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1)\"\n      :class=\"[\n        editor.state.previewMode\n          ? 'tpl:left-0 tpl:right-0'\n          : 'tpl:left-12 tpl:right-[320px]',\n        'tpl:top-14',\n      ]\"\n    >\n      <!-- Restore hidden blocks button -->\n      <div class=\"tpl:sticky tpl:top-0 tpl:z-40 tpl:h-0\">\n        <Transition name=\"tpl-restore-btn\">\n          <button\n            v-if=\"core.conditionPreview.hasHiddenBlocks.value\"\n            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)]\"\n            style=\"backdrop-filter: blur(8px)\"\n            @click=\"core.conditionPreview.reset()\"\n          >\n            <RotateCcw :size=\"13\" :stroke-width=\"2\" />\n            {{ core.t.blockSettings.restoreHiddenBlocks }}\n          </button>\n        </Transition>\n      </div>\n      <div class=\"tpl:flex tpl:justify-center tpl:p-8\">\n        <Canvas\n          :viewport=\"editor.state.viewport\"\n          :content=\"editor.content.value\"\n          :selected-block-id=\"editor.state.selectedBlockId\"\n          :dark-mode=\"editor.state.darkMode\"\n          :preview-mode=\"editor.state.previewMode\"\n          @select-block=\"editor.selectBlock\"\n        />\n      </div>\n    </div>\n\n    <!-- Footer — OSS branding -->\n    <footer\n      class=\"tpl:pointer-events-none tpl:absolute tpl:bottom-0 tpl:z-50 tpl:flex tpl:h-8 tpl:items-center tpl:justify-end tpl:pr-4 tpl:text-[9px] tpl:opacity-90 tpl:transition-all tpl:duration-300 tpl:text-[var(--tpl-text-dim)]\"\n      :class=\"[\n        editor.state.previewMode\n          ? 'tpl:left-0 tpl:right-0'\n          : 'tpl:left-12 tpl:right-[320px]',\n      ]\"\n    >\n      <div\n        class=\"tpl:pointer-events-auto tpl:flex tpl:items-center tpl:gap-1.5 tpl:rounded-tl-lg tpl:p-1\"\n        style=\"\n          background-color: color-mix(\n            in srgb,\n            var(--tpl-canvas-bg) 85%,\n            transparent\n          );\n          backdrop-filter: blur(8px);\n          -webkit-backdrop-filter: blur(8px);\n        \"\n      >\n        <span>{{ core.t.footer.poweredBy }}</span>\n        <a\n          href=\"https://templatical.com\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          class=\"tpl:inline-flex tpl:items-center tpl:gap-1 tpl:font-medium tpl:transition-colors tpl:duration-150 hover:tpl:opacity-80 tpl:text-[var(--tpl-text-muted)]\"\n          style=\"text-decoration: none\"\n        >\n          <img\n            width=\"14\"\n            height=\"14\"\n            src=\"https://templatical.com/logo.svg\"\n            alt=\"\"\n          />\n          Templatical\n        </a>\n        <span class=\"tpl:text-[var(--tpl-border)]\">·</span>\n        <a\n          href=\"https://github.com/templatical/sdk\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          class=\"tpl:transition-colors tpl:duration-150 hover:tpl:opacity-80 tpl:text-[var(--tpl-text-dim)]\"\n          style=\"text-decoration: none\"\n        >\n          {{ core.t.footer.openSource }}\n        </a>\n      </div>\n    </footer>\n\n    <!-- Keyboard reorder announcement region (visually hidden, screen-reader live) -->\n    <div\n      class=\"tpl-sr-only\"\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n      :aria-label=\"core.t.landmarks.reorderAnnouncements\"\n    >\n      {{ core.keyboardReorder.announcement.value }}\n    </div>\n\n    <!-- Right sidebar — persisted with v-show -->\n    <RightSidebar\n      v-show=\"!editor.state.previewMode\"\n      :selected-block=\"editor.selectedBlock.value\"\n      :settings=\"editor.content.value.settings\"\n      @update-block=\"\n        (updates) => editor.updateBlock(editor.state.selectedBlockId!, updates)\n      \"\n      @delete-block=\"\n        () => {\n          if (editor.state.selectedBlockId) {\n            core.blockActions.deleteBlock(editor.state.selectedBlockId);\n          }\n        }\n      \"\n      @duplicate-block=\"\n        () => {\n          if (editor.selectedBlock.value) {\n            core.blockActions.duplicateBlock(editor.selectedBlock.value);\n          }\n        }\n      \"\n      @update-settings=\"(updates) => editor.updateSettings(updates)\"\n    />\n  </div>\n</template>\n\n<style scoped>\n.tpl-restore-btn-enter-active {\n  transition:\n    opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),\n    transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-restore-btn-leave-active {\n  transition:\n    opacity 150ms ease-in,\n    transform 150ms ease-in;\n}\n\n.tpl-restore-btn-enter-from,\n.tpl-restore-btn-leave-to {\n  opacity: 0;\n  transform: translateY(-8px) scale(0.9);\n}\n\n.tpl-restore-btn-enter-to,\n.tpl-restore-btn-leave-from {\n  opacity: 1;\n  transform: translateY(0) scale(1);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { onMounted, onUnmounted } from \"vue\";\nimport type { TemplaticalEditorConfig } from \"./index\";\nimport { useEditor } from \"@templatical/core\";\nimport type { TemplateContent, UiTheme } from \"@templatical/types\";\nimport { useEditorCore } from \"./composables/useEditorCore\";\nimport type { Translations } from \"./i18n\";\nimport type { UseFontsReturn } from \"./composables/useFonts\";\n\nimport { RotateCcw } from \"@lucide/vue\";\nimport Canvas from \"./components/Canvas.vue\";\nimport Sidebar from \"./components/Sidebar.vue\";\nimport RightSidebar from \"./components/RightSidebar.vue\";\nimport ViewportToggle from \"./components/ViewportToggle.vue\";\nimport PreviewToggle from \"./components/PreviewToggle.vue\";\nimport DarkModeToggle from \"./components/DarkModeToggle.vue\";\nimport \"./styles/index.css\";\n\nconst props = defineProps<{\n  config: TemplaticalEditorConfig;\n  translations: Translations;\n  fontsManager: UseFontsReturn;\n}>();\n\n// --- Core editor state ---\nconst editor = useEditor({\n  content: props.config.content!,\n  templateDefaults: props.config.templateDefaults,\n});\n\n// --- Shared editor core (composables, provides, plugins, keyboard) ---\nconst core = useEditorCore({\n  editor,\n  config: {\n    uiTheme: props.config.uiTheme,\n    theme: props.config.theme,\n    blockDefaults: props.config.blockDefaults,\n    customBlocks: props.config.customBlocks,\n    mergeTags: props.config.mergeTags,\n    displayConditions: props.config.displayConditions,\n    onRequestMedia: props.config.onRequestMedia,\n    onSave: props.config.onSave\n      ? () =>\n          props.config.onSave!(JSON.parse(JSON.stringify(editor.state.content)))\n      : undefined,\n  },\n  translations: props.translations,\n  fontsManager: props.fontsManager,\n  autoSaveOptions: props.config.onChange\n    ? {\n        onChange: () =>\n          props.config.onChange!(\n            JSON.parse(JSON.stringify(editor.state.content)),\n          ),\n      }\n    : null,\n});\n\n// --- Lifecycle ---\nonMounted(async () => {\n  await props.fontsManager.loadCustomFonts();\n});\n\nonUnmounted(() => {\n  props.fontsManager.cleanupFontLinks();\n  core.destroy();\n});\n\n// --- Public API (accessed via template ref from init()) ---\ndefineExpose({\n  getContent: () => editor.content.value,\n  setContent: (content: TemplateContent) => editor.setContent(content),\n  setTheme: (theme: UiTheme) => editor.setUiTheme(theme),\n});\n</script>\n\n<template>\n  <div\n    class=\"tpl tpl:relative tpl:h-full tpl:overflow-hidden\"\n    :class=\"{ 'tpl:dark': editor.state.darkMode }\"\n    :data-tpl-theme=\"core.resolvedTheme.value\"\n    :style=\"core.themeStyles.value\"\n  >\n    <!-- Header — absolute, full width, above everything -->\n    <header\n      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)]\"\n      style=\"\n        background-color: color-mix(in srgb, var(--tpl-bg) 80%, transparent);\n        backdrop-filter: blur(12px);\n        -webkit-backdrop-filter: blur(12px);\n      \"\n    >\n      <!-- Left: Logo -->\n      <div class=\"tpl:flex tpl:items-center tpl:gap-2.5\">\n        <img\n          width=\"24\"\n          height=\"24\"\n          src=\"https://templatical.com/logo.svg\"\n          alt=\"Templatical\"\n        />\n        <span\n          class=\"tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n          style=\"letter-spacing: -0.01em\"\n        >\n          {{ core.t.header.title }}\n        </span>\n      </div>\n\n      <!-- Center: viewport + preview + dark mode -->\n      <div class=\"tpl:flex tpl:items-center tpl:justify-center tpl:gap-10\">\n        <ViewportToggle\n          :viewport=\"editor.state.viewport\"\n          @change=\"editor.setViewport\"\n        />\n        <DarkModeToggle\n          :dark-mode=\"editor.state.darkMode\"\n          @change=\"editor.setDarkMode\"\n        />\n        <PreviewToggle\n          :preview-mode=\"editor.state.previewMode\"\n          @change=\"editor.setPreviewMode\"\n        />\n      </div>\n\n      <!-- Right: empty in OSS mode -->\n      <div\n        class=\"tpl:flex tpl:min-w-[200px] tpl:items-center tpl:justify-end tpl:gap-3\"\n      ></div>\n    </header>\n\n    <!-- Left sidebar — absolute, below header -->\n    <Sidebar v-show=\"!editor.state.previewMode\" />\n\n    <!-- Canvas area — absolute, fills remaining space -->\n    <div\n      class=\"tpl-body tpl:absolute tpl:bottom-0 tpl:overflow-auto tpl:bg-[var(--tpl-canvas-bg)]\"\n      style=\"transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1)\"\n      :class=\"[\n        editor.state.previewMode\n          ? 'tpl:left-0 tpl:right-0'\n          : 'tpl:left-12 tpl:right-[320px]',\n        'tpl:top-14',\n      ]\"\n    >\n      <!-- Restore hidden blocks button -->\n      <div class=\"tpl:sticky tpl:top-0 tpl:z-40 tpl:h-0\">\n        <Transition name=\"tpl-restore-btn\">\n          <button\n            v-if=\"core.conditionPreview.hasHiddenBlocks.value\"\n            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)]\"\n            style=\"backdrop-filter: blur(8px)\"\n            @click=\"core.conditionPreview.reset()\"\n          >\n            <RotateCcw :size=\"13\" :stroke-width=\"2\" />\n            {{ core.t.blockSettings.restoreHiddenBlocks }}\n          </button>\n        </Transition>\n      </div>\n      <div class=\"tpl:flex tpl:justify-center tpl:p-8\">\n        <Canvas\n          :viewport=\"editor.state.viewport\"\n          :content=\"editor.content.value\"\n          :selected-block-id=\"editor.state.selectedBlockId\"\n          :dark-mode=\"editor.state.darkMode\"\n          :preview-mode=\"editor.state.previewMode\"\n          @select-block=\"editor.selectBlock\"\n        />\n      </div>\n    </div>\n\n    <!-- Footer — OSS branding -->\n    <footer\n      class=\"tpl:pointer-events-none tpl:absolute tpl:bottom-0 tpl:z-50 tpl:flex tpl:h-8 tpl:items-center tpl:justify-end tpl:pr-4 tpl:text-[9px] tpl:opacity-90 tpl:transition-all tpl:duration-300 tpl:text-[var(--tpl-text-dim)]\"\n      :class=\"[\n        editor.state.previewMode\n          ? 'tpl:left-0 tpl:right-0'\n          : 'tpl:left-12 tpl:right-[320px]',\n      ]\"\n    >\n      <div\n        class=\"tpl:pointer-events-auto tpl:flex tpl:items-center tpl:gap-1.5 tpl:rounded-tl-lg tpl:p-1\"\n        style=\"\n          background-color: color-mix(\n            in srgb,\n            var(--tpl-canvas-bg) 85%,\n            transparent\n          );\n          backdrop-filter: blur(8px);\n          -webkit-backdrop-filter: blur(8px);\n        \"\n      >\n        <span>{{ core.t.footer.poweredBy }}</span>\n        <a\n          href=\"https://templatical.com\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          class=\"tpl:inline-flex tpl:items-center tpl:gap-1 tpl:font-medium tpl:transition-colors tpl:duration-150 hover:tpl:opacity-80 tpl:text-[var(--tpl-text-muted)]\"\n          style=\"text-decoration: none\"\n        >\n          <img\n            width=\"14\"\n            height=\"14\"\n            src=\"https://templatical.com/logo.svg\"\n            alt=\"\"\n          />\n          Templatical\n        </a>\n        <span class=\"tpl:text-[var(--tpl-border)]\">·</span>\n        <a\n          href=\"https://github.com/templatical/sdk\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          class=\"tpl:transition-colors tpl:duration-150 hover:tpl:opacity-80 tpl:text-[var(--tpl-text-dim)]\"\n          style=\"text-decoration: none\"\n        >\n          {{ core.t.footer.openSource }}\n        </a>\n      </div>\n    </footer>\n\n    <!-- Keyboard reorder announcement region (visually hidden, screen-reader live) -->\n    <div\n      class=\"tpl-sr-only\"\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n      :aria-label=\"core.t.landmarks.reorderAnnouncements\"\n    >\n      {{ core.keyboardReorder.announcement.value }}\n    </div>\n\n    <!-- Right sidebar — persisted with v-show -->\n    <RightSidebar\n      v-show=\"!editor.state.previewMode\"\n      :selected-block=\"editor.selectedBlock.value\"\n      :settings=\"editor.content.value.settings\"\n      @update-block=\"\n        (updates) => editor.updateBlock(editor.state.selectedBlockId!, updates)\n      \"\n      @delete-block=\"\n        () => {\n          if (editor.state.selectedBlockId) {\n            core.blockActions.deleteBlock(editor.state.selectedBlockId);\n          }\n        }\n      \"\n      @duplicate-block=\"\n        () => {\n          if (editor.selectedBlock.value) {\n            core.blockActions.duplicateBlock(editor.selectedBlock.value);\n          }\n        }\n      \"\n      @update-settings=\"(updates) => editor.updateSettings(updates)\"\n    />\n  </div>\n</template>\n\n<style scoped>\n.tpl-restore-btn-enter-active {\n  transition:\n    opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),\n    transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-restore-btn-leave-active {\n  transition:\n    opacity 150ms ease-in,\n    transform 150ms ease-in;\n}\n\n.tpl-restore-btn-enter-from,\n.tpl-restore-btn-leave-to {\n  opacity: 0;\n  transform: translateY(-8px) scale(0.9);\n}\n\n.tpl-restore-btn-enter-to,\n.tpl-restore-btn-leave-from {\n  opacity: 1;\n  transform: translateY(0) scale(1);\n}\n</style>\n","import type en from \"./locales/en\";\n\nexport type Translations = typeof en;\nexport type TranslationKey = keyof Translations;\n\nconst supportedLocales = [\"en\", \"de\"];\n\n/**\n * Get the base language code from a locale string.\n * e.g., 'en-GB' -> 'en', 'de-DE' -> 'de'\n */\nexport function getBaseLocale(locale: string): string {\n  return locale.split(\"-\")[0].toLowerCase();\n}\n\n/**\n * Load translations for a given locale.\n * Falls back to English if the locale is not supported.\n * Only loads the required locale file.\n */\nexport async function loadTranslations(locale: string): Promise<Translations> {\n  const baseLocale = getBaseLocale(locale);\n  const targetLocale = supportedLocales.includes(baseLocale)\n    ? baseLocale\n    : \"en\";\n\n  const module = await import(`./locales/${targetLocale}.ts`);\n  return module.default as Translations;\n}\n\n/**\n * Check if a locale is supported.\n */\nexport function isLocaleSupported(locale: string): boolean {\n  return (\n    supportedLocales.includes(locale) ||\n    supportedLocales.includes(getBaseLocale(locale))\n  );\n}\n\n/**\n * Get list of supported locales.\n */\nexport function getSupportedLocales(): string[] {\n  return [...supportedLocales];\n}\n","import { createApp, h, ref, type App, type Ref } from \"vue\";\nimport { INIT_TIMEOUT_MS } from \"./constants/timeouts\";\nimport type {\n  BlockDefaults,\n  CustomBlockDefinition,\n  DisplayConditionsConfig,\n  FontsConfig,\n  MediaResult,\n  MergeTagsConfig,\n  SaveResult,\n  Template,\n  TemplateContent,\n  TemplateDefaults,\n  ThemeOverrides,\n  UiTheme,\n} from \"@templatical/types\";\nimport type { MediaRequestContext } from \"@templatical/media-library\";\n\nimport Editor from \"./Editor.vue\";\nimport { loadTranslations } from \"./i18n\";\nimport { useFonts } from \"./composables\";\n\n// ---------------------------------------------------------------------------\n// OSS config + return types\n// ---------------------------------------------------------------------------\n\nexport interface TemplaticalEditorConfig {\n  container: string | HTMLElement;\n  content?: TemplateContent;\n\n  onChange?: (content: TemplateContent) => void;\n  onSave?: (content: TemplateContent) => void;\n  onError?: (error: Error) => void;\n\n  onRequestMedia?: OnRequestMedia;\n\n  mergeTags?: MergeTagsConfig;\n  displayConditions?: DisplayConditionsConfig;\n  customBlocks?: CustomBlockDefinition[];\n  fonts?: FontsConfig;\n\n  blockDefaults?: BlockDefaults;\n  templateDefaults?: TemplateDefaults;\n\n  theme?: ThemeOverrides;\n  uiTheme?: UiTheme;\n  locale?: string;\n}\n\n/** Function type for media browser requests, used by both OSS and Cloud editors. */\nexport type OnRequestMedia = (\n  context?: MediaRequestContext,\n) => Promise<MediaResult | null>;\n\nexport interface TemplaticalEditor {\n  getContent(): TemplateContent;\n  setContent(content: TemplateContent): void;\n  setTheme(theme: UiTheme): void;\n  unmount(): void;\n  toMjml?(): string;\n}\n\nexport interface TemplaticalCloudEditor extends TemplaticalEditor {\n  create(content?: TemplateContent): Promise<Template>;\n  load(templateId: string): Promise<Template>;\n  save(): Promise<SaveResult>;\n}\n\n// ---------------------------------------------------------------------------\n// OSS init — sync\n// ---------------------------------------------------------------------------\n\nlet appInstance: App | null = null;\nconst editorRef: Ref<InstanceType<typeof Editor> | null> = ref(null);\n\nexport async function init(\n  config: TemplaticalEditorConfig,\n): Promise<TemplaticalEditor> {\n  const container =\n    typeof config.container === \"string\"\n      ? document.querySelector(config.container)\n      : config.container;\n\n  if (!container) {\n    throw new Error(\n      `[Templatical] Container element not found: ${config.container}`,\n    );\n  }\n\n  if (appInstance) {\n    unmount();\n  }\n\n  // Load translations before mounting so child components can use useI18n synchronously\n  const translations = await loadTranslations(config.locale ?? \"en\");\n\n  // Create fonts manager to pass to Editor\n  const fontsManager = useFonts(config.fonts);\n\n  appInstance = createApp({\n    setup() {\n      return () =>\n        h(Editor, {\n          config,\n          translations,\n          fontsManager,\n          ref: editorRef,\n        });\n    },\n  });\n\n  appInstance.mount(container);\n\n  const instance: TemplaticalEditor = {\n    getContent() {\n      if (editorRef.value) {\n        return JSON.parse(JSON.stringify(editorRef.value.getContent()));\n      }\n      return JSON.parse(JSON.stringify(config.content));\n    },\n    setContent(content: TemplateContent) {\n      if (editorRef.value) {\n        editorRef.value.setContent(content);\n      }\n      config.content = content;\n    },\n    setTheme(theme: UiTheme) {\n      if (editorRef.value) {\n        editorRef.value.setTheme(theme);\n      }\n    },\n    unmount,\n  };\n\n  // Try to detect @templatical/renderer for export methods\n  attachRenderer(instance);\n\n  return instance;\n}\n\n// ---------------------------------------------------------------------------\n// Cloud init — async, flat config, tree-shaken when not called\n// ---------------------------------------------------------------------------\n\nlet cloudAppInstance: App | null = null;\n\nconst cloudEditorRef: Ref<InstanceType<\n  typeof import(\"./cloud/CloudEditor.vue\").default\n> | null> = ref(null);\n\nexport async function initCloud(\n  config: import(\"./cloud/CloudEditor.vue\").TemplaticalCloudEditorConfig,\n): Promise<TemplaticalCloudEditor> {\n  const container =\n    typeof config.container === \"string\"\n      ? document.querySelector(config.container)\n      : config.container;\n\n  if (!container) {\n    throw new Error(\n      `[Templatical] Container element not found: ${config.container}`,\n    );\n  }\n\n  if (cloudAppInstance) {\n    unmountCloud();\n  }\n\n  // Dynamic import — CloudEditor.vue is tree-shaken from the OSS bundle\n  const { default: CloudEditor } = await import(\"./cloud/CloudEditor.vue\");\n\n  // Load translations before mounting so child components can use useI18n synchronously\n  const translations = await loadTranslations(config.locale ?? \"en\");\n\n  // Create fonts manager to pass to CloudEditor\n  const fontsManager = useFonts(config.fonts);\n\n  // Promise that resolves when CloudEditor emits 'ready'\n  const readyPromise = new Promise<void>((resolve, reject) => {\n    const timeout = setTimeout(() => {\n      reject(new Error(\"[Templatical] Cloud editor initialization timed out\"));\n    }, INIT_TIMEOUT_MS);\n\n    cloudAppInstance = createApp({\n      setup() {\n        return () =>\n          h(CloudEditor, {\n            config,\n            translations,\n            fontsManager,\n            ref: cloudEditorRef,\n            onReady: () => {\n              clearTimeout(timeout);\n              resolve();\n            },\n          });\n      },\n    });\n\n    cloudAppInstance.mount(container);\n  });\n\n  await readyPromise;\n\n  const instance: TemplaticalCloudEditor = {\n    getContent() {\n      if (cloudEditorRef.value) {\n        return JSON.parse(JSON.stringify(cloudEditorRef.value.getContent()));\n      }\n      return JSON.parse(JSON.stringify(config.content));\n    },\n    setContent(content: TemplateContent) {\n      if (cloudEditorRef.value) {\n        cloudEditorRef.value.setContent(content);\n      }\n    },\n    setTheme(theme: UiTheme) {\n      if (cloudEditorRef.value) {\n        cloudEditorRef.value.setTheme(theme);\n      }\n    },\n    unmount: unmountCloud,\n    create(content?: TemplateContent) {\n      if (!cloudEditorRef.value) {\n        return Promise.reject(\n          new Error(\"[Templatical] Cloud editor not ready\"),\n        );\n      }\n      return cloudEditorRef.value.create(content);\n    },\n    load(templateId: string) {\n      if (!cloudEditorRef.value) {\n        return Promise.reject(\n          new Error(\"[Templatical] Cloud editor not ready\"),\n        );\n      }\n      return cloudEditorRef.value.load(templateId);\n    },\n    save() {\n      if (!cloudEditorRef.value) {\n        return Promise.reject(\n          new Error(\"[Templatical] Cloud editor not ready\"),\n        );\n      }\n      return cloudEditorRef.value.save();\n    },\n  };\n\n  // Try to detect @templatical/renderer for export methods\n  attachRenderer(instance);\n\n  return instance;\n}\n\n// ---------------------------------------------------------------------------\n// Unmount helpers\n// ---------------------------------------------------------------------------\n\nexport function unmount(): void {\n  if (appInstance) {\n    appInstance.unmount();\n    appInstance = null;\n    editorRef.value = null;\n  }\n}\n\nfunction unmountCloud(): void {\n  if (cloudAppInstance) {\n    cloudAppInstance.unmount();\n    cloudAppInstance = null;\n    cloudEditorRef.value = null;\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Renderer attachment (shared by OSS + Cloud)\n// ---------------------------------------------------------------------------\n\nfunction attachRenderer(instance: TemplaticalEditor): void {\n  import(\"@templatical/renderer\")\n    .then((renderer) => {\n      instance.toMjml = () => renderer.renderToMjml(instance.getContent());\n    })\n    .catch(() => {\n      // @templatical/renderer not installed — export methods not available\n    });\n}\n\n// ---------------------------------------------------------------------------\n// Re-exports\n// ---------------------------------------------------------------------------\n\nexport type { TemplaticalCloudEditorConfig } from \"./cloud/CloudEditor.vue\";\nexport type {\n  BlockDefaults,\n  TemplateContent,\n  TemplateDefaults,\n  ThemeOverrides,\n  UiTheme,\n  MergeTagsConfig,\n  DisplayConditionsConfig,\n  CustomBlockDefinition,\n  ViewportSize,\n  CustomFont,\n  FontsConfig,\n  SaveResult,\n  Template,\n} from \"@templatical/types\";\n\nexport type { UseFontsReturn, FontOption } from \"./composables/useFonts\";\nexport { useFonts } from \"./composables/useFonts\";\nexport type { EditorCapabilities } from \"./types/editor-capabilities\";\nexport {\n  TRANSLATIONS_KEY,\n  EDITOR_KEY,\n  HISTORY_KEY,\n  BLOCK_ACTIONS_KEY,\n  CONDITION_PREVIEW_KEY,\n  FONTS_MANAGER_KEY,\n  THEME_STYLES_KEY,\n  UI_THEME_KEY,\n  BLOCK_DEFAULTS_KEY,\n  BLOCK_REGISTRY_KEY,\n  CUSTOM_BLOCK_DEFINITIONS_KEY,\n  MERGE_TAGS_KEY,\n  MERGE_TAG_SYNTAX_KEY,\n  ON_REQUEST_MERGE_TAG_KEY,\n  ON_REQUEST_MEDIA_KEY,\n  DISPLAY_CONDITIONS_KEY,\n  ALLOW_CUSTOM_CONDITIONS_KEY,\n  CAPABILITIES_KEY,\n} from \"./keys\";\n"],"mappings":"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"}
+{"version":3,"file":"editor.js","names":[],"sources":["../../src/Editor.vue","../../src/Editor.vue","../../src/i18n/index.ts","../../src/index.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, onUnmounted } from \"vue\";\nimport type { TemplaticalEditorConfig } from \"./index\";\nimport { useEditor } from \"@templatical/core\";\nimport type { TemplateContent, UiTheme } from \"@templatical/types\";\nimport { useEditorCore } from \"./composables/useEditorCore\";\nimport type { Translations } from \"./i18n\";\nimport type { UseFontsReturn } from \"./composables/useFonts\";\n\nimport { RotateCcw } from \"@lucide/vue\";\nimport Canvas from \"./components/Canvas.vue\";\nimport Sidebar from \"./components/Sidebar.vue\";\nimport RightSidebar from \"./components/RightSidebar.vue\";\nimport ViewportToggle from \"./components/ViewportToggle.vue\";\nimport PreviewToggle from \"./components/PreviewToggle.vue\";\nimport DarkModeToggle from \"./components/DarkModeToggle.vue\";\nimport EditorFooter from \"./components/EditorFooter.vue\";\nimport \"./styles/index.css\";\n\nconst props = defineProps<{\n  config: TemplaticalEditorConfig;\n  translations: Translations;\n  fontsManager: UseFontsReturn;\n}>();\n\n// --- Core editor state ---\nconst editor = useEditor({\n  content: props.config.content!,\n  templateDefaults: props.config.templateDefaults,\n});\n\n// --- Shared editor core (composables, provides, plugins, keyboard) ---\nconst core = useEditorCore({\n  editor,\n  config: {\n    uiTheme: props.config.uiTheme,\n    theme: props.config.theme,\n    blockDefaults: props.config.blockDefaults,\n    customBlocks: props.config.customBlocks,\n    mergeTags: props.config.mergeTags,\n    displayConditions: props.config.displayConditions,\n    onRequestMedia: props.config.onRequestMedia,\n    onSave: props.config.onSave\n      ? () =>\n          props.config.onSave!(JSON.parse(JSON.stringify(editor.state.content)))\n      : undefined,\n  },\n  translations: props.translations,\n  fontsManager: props.fontsManager,\n  autoSaveOptions: props.config.onChange\n    ? {\n        onChange: () =>\n          props.config.onChange!(\n            JSON.parse(JSON.stringify(editor.state.content)),\n          ),\n      }\n    : null,\n});\n\n// --- Lifecycle ---\nonMounted(async () => {\n  await props.fontsManager.loadCustomFonts();\n});\n\nonUnmounted(() => {\n  props.fontsManager.cleanupFontLinks();\n  core.destroy();\n});\n\n// --- Public API (accessed via template ref from init()) ---\ndefineExpose({\n  getContent: () => editor.content.value,\n  setContent: (content: TemplateContent) => editor.setContent(content),\n  setTheme: (theme: UiTheme) => editor.setUiTheme(theme),\n});\n</script>\n\n<template>\n  <div\n    class=\"tpl tpl:relative tpl:h-full tpl:overflow-hidden\"\n    :class=\"{ 'tpl:dark': editor.state.darkMode }\"\n    :data-tpl-theme=\"core.resolvedTheme.value\"\n    :style=\"core.themeStyles.value\"\n  >\n    <!-- Header — absolute, full width, above everything -->\n    <header\n      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)]\"\n      style=\"\n        background-color: color-mix(in srgb, var(--tpl-bg) 80%, transparent);\n        backdrop-filter: blur(12px);\n        -webkit-backdrop-filter: blur(12px);\n      \"\n    >\n      <!-- Left: Logo -->\n      <div class=\"tpl:flex tpl:items-center tpl:gap-2.5\">\n        <img\n          width=\"24\"\n          height=\"24\"\n          src=\"https://templatical.com/logo.svg\"\n          alt=\"Templatical\"\n        />\n        <span\n          class=\"tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n          style=\"letter-spacing: -0.01em\"\n        >\n          {{ core.t.header.title }}\n        </span>\n      </div>\n\n      <!-- Center: viewport + preview + dark mode -->\n      <div class=\"tpl:flex tpl:items-center tpl:justify-center tpl:gap-10\">\n        <ViewportToggle\n          :viewport=\"editor.state.viewport\"\n          @change=\"editor.setViewport\"\n        />\n        <DarkModeToggle\n          :dark-mode=\"editor.state.darkMode\"\n          @change=\"editor.setDarkMode\"\n        />\n        <PreviewToggle\n          :preview-mode=\"editor.state.previewMode\"\n          @change=\"editor.setPreviewMode\"\n        />\n      </div>\n\n      <!-- Right: empty in OSS mode -->\n      <div\n        class=\"tpl:flex tpl:min-w-[200px] tpl:items-center tpl:justify-end tpl:gap-3\"\n      ></div>\n    </header>\n\n    <!-- Left sidebar — absolute, below header -->\n    <Sidebar v-show=\"!editor.state.previewMode\" />\n\n    <!-- Canvas area — absolute, fills remaining space -->\n    <div\n      class=\"tpl-body tpl:absolute tpl:bottom-0 tpl:overflow-auto tpl:bg-[var(--tpl-canvas-bg)]\"\n      style=\"transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1)\"\n      :class=\"[\n        editor.state.previewMode\n          ? 'tpl:left-0 tpl:right-0'\n          : 'tpl:left-12 tpl:right-[320px]',\n        'tpl:top-14',\n      ]\"\n    >\n      <!-- Restore hidden blocks button -->\n      <div class=\"tpl:sticky tpl:top-0 tpl:z-40 tpl:h-0\">\n        <Transition name=\"tpl-restore-btn\">\n          <button\n            v-if=\"core.conditionPreview.hasHiddenBlocks.value\"\n            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)]\"\n            style=\"backdrop-filter: blur(8px)\"\n            @click=\"core.conditionPreview.reset()\"\n          >\n            <RotateCcw :size=\"13\" :stroke-width=\"2\" />\n            {{ core.t.blockSettings.restoreHiddenBlocks }}\n          </button>\n        </Transition>\n      </div>\n      <div class=\"tpl:flex tpl:justify-center tpl:p-8\">\n        <Canvas\n          :viewport=\"editor.state.viewport\"\n          :content=\"editor.content.value\"\n          :selected-block-id=\"editor.state.selectedBlockId\"\n          :dark-mode=\"editor.state.darkMode\"\n          :preview-mode=\"editor.state.previewMode\"\n          @select-block=\"editor.selectBlock\"\n        />\n      </div>\n    </div>\n\n    <EditorFooter\n      :position-class=\"[\n        editor.state.previewMode\n          ? 'tpl:left-0 tpl:right-0'\n          : 'tpl:left-12 tpl:right-[320px]',\n      ]\"\n    />\n\n    <!-- Keyboard reorder announcement region (visually hidden, screen-reader live) -->\n    <div\n      class=\"tpl-sr-only\"\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n      :aria-label=\"core.t.landmarks.reorderAnnouncements\"\n    >\n      {{ core.keyboardReorder.announcement.value }}\n    </div>\n\n    <!-- Right sidebar — persisted with v-show -->\n    <RightSidebar\n      v-show=\"!editor.state.previewMode\"\n      :selected-block=\"editor.selectedBlock.value\"\n      :settings=\"editor.content.value.settings\"\n      @update-block=\"\n        (updates) => editor.updateBlock(editor.state.selectedBlockId!, updates)\n      \"\n      @delete-block=\"\n        () => {\n          if (editor.state.selectedBlockId) {\n            core.blockActions.deleteBlock(editor.state.selectedBlockId);\n          }\n        }\n      \"\n      @duplicate-block=\"\n        () => {\n          if (editor.selectedBlock.value) {\n            core.blockActions.duplicateBlock(editor.selectedBlock.value);\n          }\n        }\n      \"\n      @update-settings=\"(updates) => editor.updateSettings(updates)\"\n    />\n  </div>\n</template>\n\n<style scoped>\n.tpl-restore-btn-enter-active {\n  transition:\n    opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),\n    transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-restore-btn-leave-active {\n  transition:\n    opacity 150ms ease-in,\n    transform 150ms ease-in;\n}\n\n.tpl-restore-btn-enter-from,\n.tpl-restore-btn-leave-to {\n  opacity: 0;\n  transform: translateY(-8px) scale(0.9);\n}\n\n.tpl-restore-btn-enter-to,\n.tpl-restore-btn-leave-from {\n  opacity: 1;\n  transform: translateY(0) scale(1);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { onMounted, onUnmounted } from \"vue\";\nimport type { TemplaticalEditorConfig } from \"./index\";\nimport { useEditor } from \"@templatical/core\";\nimport type { TemplateContent, UiTheme } from \"@templatical/types\";\nimport { useEditorCore } from \"./composables/useEditorCore\";\nimport type { Translations } from \"./i18n\";\nimport type { UseFontsReturn } from \"./composables/useFonts\";\n\nimport { RotateCcw } from \"@lucide/vue\";\nimport Canvas from \"./components/Canvas.vue\";\nimport Sidebar from \"./components/Sidebar.vue\";\nimport RightSidebar from \"./components/RightSidebar.vue\";\nimport ViewportToggle from \"./components/ViewportToggle.vue\";\nimport PreviewToggle from \"./components/PreviewToggle.vue\";\nimport DarkModeToggle from \"./components/DarkModeToggle.vue\";\nimport EditorFooter from \"./components/EditorFooter.vue\";\nimport \"./styles/index.css\";\n\nconst props = defineProps<{\n  config: TemplaticalEditorConfig;\n  translations: Translations;\n  fontsManager: UseFontsReturn;\n}>();\n\n// --- Core editor state ---\nconst editor = useEditor({\n  content: props.config.content!,\n  templateDefaults: props.config.templateDefaults,\n});\n\n// --- Shared editor core (composables, provides, plugins, keyboard) ---\nconst core = useEditorCore({\n  editor,\n  config: {\n    uiTheme: props.config.uiTheme,\n    theme: props.config.theme,\n    blockDefaults: props.config.blockDefaults,\n    customBlocks: props.config.customBlocks,\n    mergeTags: props.config.mergeTags,\n    displayConditions: props.config.displayConditions,\n    onRequestMedia: props.config.onRequestMedia,\n    onSave: props.config.onSave\n      ? () =>\n          props.config.onSave!(JSON.parse(JSON.stringify(editor.state.content)))\n      : undefined,\n  },\n  translations: props.translations,\n  fontsManager: props.fontsManager,\n  autoSaveOptions: props.config.onChange\n    ? {\n        onChange: () =>\n          props.config.onChange!(\n            JSON.parse(JSON.stringify(editor.state.content)),\n          ),\n      }\n    : null,\n});\n\n// --- Lifecycle ---\nonMounted(async () => {\n  await props.fontsManager.loadCustomFonts();\n});\n\nonUnmounted(() => {\n  props.fontsManager.cleanupFontLinks();\n  core.destroy();\n});\n\n// --- Public API (accessed via template ref from init()) ---\ndefineExpose({\n  getContent: () => editor.content.value,\n  setContent: (content: TemplateContent) => editor.setContent(content),\n  setTheme: (theme: UiTheme) => editor.setUiTheme(theme),\n});\n</script>\n\n<template>\n  <div\n    class=\"tpl tpl:relative tpl:h-full tpl:overflow-hidden\"\n    :class=\"{ 'tpl:dark': editor.state.darkMode }\"\n    :data-tpl-theme=\"core.resolvedTheme.value\"\n    :style=\"core.themeStyles.value\"\n  >\n    <!-- Header — absolute, full width, above everything -->\n    <header\n      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)]\"\n      style=\"\n        background-color: color-mix(in srgb, var(--tpl-bg) 80%, transparent);\n        backdrop-filter: blur(12px);\n        -webkit-backdrop-filter: blur(12px);\n      \"\n    >\n      <!-- Left: Logo -->\n      <div class=\"tpl:flex tpl:items-center tpl:gap-2.5\">\n        <img\n          width=\"24\"\n          height=\"24\"\n          src=\"https://templatical.com/logo.svg\"\n          alt=\"Templatical\"\n        />\n        <span\n          class=\"tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n          style=\"letter-spacing: -0.01em\"\n        >\n          {{ core.t.header.title }}\n        </span>\n      </div>\n\n      <!-- Center: viewport + preview + dark mode -->\n      <div class=\"tpl:flex tpl:items-center tpl:justify-center tpl:gap-10\">\n        <ViewportToggle\n          :viewport=\"editor.state.viewport\"\n          @change=\"editor.setViewport\"\n        />\n        <DarkModeToggle\n          :dark-mode=\"editor.state.darkMode\"\n          @change=\"editor.setDarkMode\"\n        />\n        <PreviewToggle\n          :preview-mode=\"editor.state.previewMode\"\n          @change=\"editor.setPreviewMode\"\n        />\n      </div>\n\n      <!-- Right: empty in OSS mode -->\n      <div\n        class=\"tpl:flex tpl:min-w-[200px] tpl:items-center tpl:justify-end tpl:gap-3\"\n      ></div>\n    </header>\n\n    <!-- Left sidebar — absolute, below header -->\n    <Sidebar v-show=\"!editor.state.previewMode\" />\n\n    <!-- Canvas area — absolute, fills remaining space -->\n    <div\n      class=\"tpl-body tpl:absolute tpl:bottom-0 tpl:overflow-auto tpl:bg-[var(--tpl-canvas-bg)]\"\n      style=\"transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1)\"\n      :class=\"[\n        editor.state.previewMode\n          ? 'tpl:left-0 tpl:right-0'\n          : 'tpl:left-12 tpl:right-[320px]',\n        'tpl:top-14',\n      ]\"\n    >\n      <!-- Restore hidden blocks button -->\n      <div class=\"tpl:sticky tpl:top-0 tpl:z-40 tpl:h-0\">\n        <Transition name=\"tpl-restore-btn\">\n          <button\n            v-if=\"core.conditionPreview.hasHiddenBlocks.value\"\n            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)]\"\n            style=\"backdrop-filter: blur(8px)\"\n            @click=\"core.conditionPreview.reset()\"\n          >\n            <RotateCcw :size=\"13\" :stroke-width=\"2\" />\n            {{ core.t.blockSettings.restoreHiddenBlocks }}\n          </button>\n        </Transition>\n      </div>\n      <div class=\"tpl:flex tpl:justify-center tpl:p-8\">\n        <Canvas\n          :viewport=\"editor.state.viewport\"\n          :content=\"editor.content.value\"\n          :selected-block-id=\"editor.state.selectedBlockId\"\n          :dark-mode=\"editor.state.darkMode\"\n          :preview-mode=\"editor.state.previewMode\"\n          @select-block=\"editor.selectBlock\"\n        />\n      </div>\n    </div>\n\n    <EditorFooter\n      :position-class=\"[\n        editor.state.previewMode\n          ? 'tpl:left-0 tpl:right-0'\n          : 'tpl:left-12 tpl:right-[320px]',\n      ]\"\n    />\n\n    <!-- Keyboard reorder announcement region (visually hidden, screen-reader live) -->\n    <div\n      class=\"tpl-sr-only\"\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n      :aria-label=\"core.t.landmarks.reorderAnnouncements\"\n    >\n      {{ core.keyboardReorder.announcement.value }}\n    </div>\n\n    <!-- Right sidebar — persisted with v-show -->\n    <RightSidebar\n      v-show=\"!editor.state.previewMode\"\n      :selected-block=\"editor.selectedBlock.value\"\n      :settings=\"editor.content.value.settings\"\n      @update-block=\"\n        (updates) => editor.updateBlock(editor.state.selectedBlockId!, updates)\n      \"\n      @delete-block=\"\n        () => {\n          if (editor.state.selectedBlockId) {\n            core.blockActions.deleteBlock(editor.state.selectedBlockId);\n          }\n        }\n      \"\n      @duplicate-block=\"\n        () => {\n          if (editor.selectedBlock.value) {\n            core.blockActions.duplicateBlock(editor.selectedBlock.value);\n          }\n        }\n      \"\n      @update-settings=\"(updates) => editor.updateSettings(updates)\"\n    />\n  </div>\n</template>\n\n<style scoped>\n.tpl-restore-btn-enter-active {\n  transition:\n    opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),\n    transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-restore-btn-leave-active {\n  transition:\n    opacity 150ms ease-in,\n    transform 150ms ease-in;\n}\n\n.tpl-restore-btn-enter-from,\n.tpl-restore-btn-leave-to {\n  opacity: 0;\n  transform: translateY(-8px) scale(0.9);\n}\n\n.tpl-restore-btn-enter-to,\n.tpl-restore-btn-leave-from {\n  opacity: 1;\n  transform: translateY(0) scale(1);\n}\n</style>\n","import type en from \"./locales/en\";\n\nexport type Translations = typeof en;\nexport type TranslationKey = keyof Translations;\n\nconst supportedLocales = [\"en\", \"de\"];\n\n/**\n * Get the base language code from a locale string.\n * e.g., 'en-GB' -> 'en', 'de-DE' -> 'de'\n */\nexport function getBaseLocale(locale: string): string {\n  return locale.split(\"-\")[0].toLowerCase();\n}\n\n/**\n * Load translations for a given locale.\n * Falls back to English if the locale is not supported.\n * Only loads the required locale file.\n */\nexport async function loadTranslations(locale: string): Promise<Translations> {\n  const baseLocale = getBaseLocale(locale);\n  const targetLocale = supportedLocales.includes(baseLocale)\n    ? baseLocale\n    : \"en\";\n\n  const module = await import(`./locales/${targetLocale}.ts`);\n  return module.default as Translations;\n}\n\n/**\n * Check if a locale is supported.\n */\nexport function isLocaleSupported(locale: string): boolean {\n  return (\n    supportedLocales.includes(locale) ||\n    supportedLocales.includes(getBaseLocale(locale))\n  );\n}\n\n/**\n * Get list of supported locales.\n */\nexport function getSupportedLocales(): string[] {\n  return [...supportedLocales];\n}\n","import { createApp, h, ref, type App, type Ref } from \"vue\";\nimport { INIT_TIMEOUT_MS } from \"./constants/timeouts\";\nimport type {\n  BlockDefaults,\n  CustomBlockDefinition,\n  DisplayConditionsConfig,\n  FontsConfig,\n  MediaResult,\n  MergeTagsConfig,\n  SaveResult,\n  Template,\n  TemplateContent,\n  TemplateDefaults,\n  ThemeOverrides,\n  UiTheme,\n} from \"@templatical/types\";\nimport type { MediaRequestContext } from \"@templatical/media-library\";\n\nimport Editor from \"./Editor.vue\";\nimport { loadTranslations } from \"./i18n\";\nimport { useFonts } from \"./composables\";\n\n// ---------------------------------------------------------------------------\n// OSS config + return types\n// ---------------------------------------------------------------------------\n\nexport interface TemplaticalEditorConfig {\n  container: string | HTMLElement;\n  content?: TemplateContent;\n\n  onChange?: (content: TemplateContent) => void;\n  onSave?: (content: TemplateContent) => void;\n  onError?: (error: Error) => void;\n\n  onRequestMedia?: OnRequestMedia;\n\n  mergeTags?: MergeTagsConfig;\n  displayConditions?: DisplayConditionsConfig;\n  customBlocks?: CustomBlockDefinition[];\n  fonts?: FontsConfig;\n\n  blockDefaults?: BlockDefaults;\n  templateDefaults?: TemplateDefaults;\n\n  theme?: ThemeOverrides;\n  uiTheme?: UiTheme;\n  locale?: string;\n}\n\n/** Function type for media browser requests, used by both OSS and Cloud editors. */\nexport type OnRequestMedia = (\n  context?: MediaRequestContext,\n) => Promise<MediaResult | null>;\n\nexport interface TemplaticalEditor {\n  getContent(): TemplateContent;\n  setContent(content: TemplateContent): void;\n  setTheme(theme: UiTheme): void;\n  unmount(): void;\n  toMjml?(): string;\n}\n\nexport interface TemplaticalCloudEditor extends TemplaticalEditor {\n  create(content?: TemplateContent): Promise<Template>;\n  load(templateId: string): Promise<Template>;\n  save(): Promise<SaveResult>;\n}\n\n// ---------------------------------------------------------------------------\n// OSS init — sync\n// ---------------------------------------------------------------------------\n\nlet appInstance: App | null = null;\nconst editorRef: Ref<InstanceType<typeof Editor> | null> = ref(null);\n\nexport async function init(\n  config: TemplaticalEditorConfig,\n): Promise<TemplaticalEditor> {\n  const container =\n    typeof config.container === \"string\"\n      ? document.querySelector(config.container)\n      : config.container;\n\n  if (!container) {\n    throw new Error(\n      `[Templatical] Container element not found: ${config.container}`,\n    );\n  }\n\n  if (appInstance) {\n    unmount();\n  }\n\n  // Load translations before mounting so child components can use useI18n synchronously\n  const translations = await loadTranslations(config.locale ?? \"en\");\n\n  // Create fonts manager to pass to Editor\n  const fontsManager = useFonts(config.fonts);\n\n  appInstance = createApp({\n    setup() {\n      return () =>\n        h(Editor, {\n          config,\n          translations,\n          fontsManager,\n          ref: editorRef,\n        });\n    },\n  });\n\n  appInstance.mount(container);\n\n  const instance: TemplaticalEditor = {\n    getContent() {\n      if (editorRef.value) {\n        return JSON.parse(JSON.stringify(editorRef.value.getContent()));\n      }\n      return JSON.parse(JSON.stringify(config.content));\n    },\n    setContent(content: TemplateContent) {\n      if (editorRef.value) {\n        editorRef.value.setContent(content);\n      }\n      config.content = content;\n    },\n    setTheme(theme: UiTheme) {\n      if (editorRef.value) {\n        editorRef.value.setTheme(theme);\n      }\n    },\n    unmount,\n  };\n\n  // Try to detect @templatical/renderer for export methods\n  attachRenderer(instance);\n\n  return instance;\n}\n\n// ---------------------------------------------------------------------------\n// Cloud init — async, flat config, tree-shaken when not called\n// ---------------------------------------------------------------------------\n\nlet cloudAppInstance: App | null = null;\n\nconst cloudEditorRef: Ref<InstanceType<\n  typeof import(\"./cloud/CloudEditor.vue\").default\n> | null> = ref(null);\n\nexport async function initCloud(\n  config: import(\"./cloud/CloudEditor.vue\").TemplaticalCloudEditorConfig,\n): Promise<TemplaticalCloudEditor> {\n  const container =\n    typeof config.container === \"string\"\n      ? document.querySelector(config.container)\n      : config.container;\n\n  if (!container) {\n    throw new Error(\n      `[Templatical] Container element not found: ${config.container}`,\n    );\n  }\n\n  if (cloudAppInstance) {\n    unmountCloud();\n  }\n\n  // Dynamic import — CloudEditor.vue is tree-shaken from the OSS bundle\n  const { default: CloudEditor } = await import(\"./cloud/CloudEditor.vue\");\n\n  // Load translations before mounting so child components can use useI18n synchronously\n  const translations = await loadTranslations(config.locale ?? \"en\");\n\n  // Create fonts manager to pass to CloudEditor\n  const fontsManager = useFonts(config.fonts);\n\n  // Promise that resolves when CloudEditor emits 'ready'\n  const readyPromise = new Promise<void>((resolve, reject) => {\n    const timeout = setTimeout(() => {\n      reject(new Error(\"[Templatical] Cloud editor initialization timed out\"));\n    }, INIT_TIMEOUT_MS);\n\n    cloudAppInstance = createApp({\n      setup() {\n        return () =>\n          h(CloudEditor, {\n            config,\n            translations,\n            fontsManager,\n            ref: cloudEditorRef,\n            onReady: () => {\n              clearTimeout(timeout);\n              resolve();\n            },\n          });\n      },\n    });\n\n    cloudAppInstance.mount(container);\n  });\n\n  await readyPromise;\n\n  const instance: TemplaticalCloudEditor = {\n    getContent() {\n      if (cloudEditorRef.value) {\n        return JSON.parse(JSON.stringify(cloudEditorRef.value.getContent()));\n      }\n      return JSON.parse(JSON.stringify(config.content));\n    },\n    setContent(content: TemplateContent) {\n      if (cloudEditorRef.value) {\n        cloudEditorRef.value.setContent(content);\n      }\n    },\n    setTheme(theme: UiTheme) {\n      if (cloudEditorRef.value) {\n        cloudEditorRef.value.setTheme(theme);\n      }\n    },\n    unmount: unmountCloud,\n    create(content?: TemplateContent) {\n      if (!cloudEditorRef.value) {\n        return Promise.reject(\n          new Error(\"[Templatical] Cloud editor not ready\"),\n        );\n      }\n      return cloudEditorRef.value.create(content);\n    },\n    load(templateId: string) {\n      if (!cloudEditorRef.value) {\n        return Promise.reject(\n          new Error(\"[Templatical] Cloud editor not ready\"),\n        );\n      }\n      return cloudEditorRef.value.load(templateId);\n    },\n    save() {\n      if (!cloudEditorRef.value) {\n        return Promise.reject(\n          new Error(\"[Templatical] Cloud editor not ready\"),\n        );\n      }\n      return cloudEditorRef.value.save();\n    },\n  };\n\n  // Try to detect @templatical/renderer for export methods\n  attachRenderer(instance);\n\n  return instance;\n}\n\n// ---------------------------------------------------------------------------\n// Unmount helpers\n// ---------------------------------------------------------------------------\n\nexport function unmount(): void {\n  if (appInstance) {\n    appInstance.unmount();\n    appInstance = null;\n    editorRef.value = null;\n  }\n}\n\nfunction unmountCloud(): void {\n  if (cloudAppInstance) {\n    cloudAppInstance.unmount();\n    cloudAppInstance = null;\n    cloudEditorRef.value = null;\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Renderer attachment (shared by OSS + Cloud)\n// ---------------------------------------------------------------------------\n\nfunction attachRenderer(instance: TemplaticalEditor): void {\n  import(\"@templatical/renderer\")\n    .then((renderer) => {\n      instance.toMjml = () => renderer.renderToMjml(instance.getContent());\n    })\n    .catch(() => {\n      // @templatical/renderer not installed — export methods not available\n    });\n}\n\n// ---------------------------------------------------------------------------\n// Re-exports\n// ---------------------------------------------------------------------------\n\nexport type { TemplaticalCloudEditorConfig } from \"./cloud/CloudEditor.vue\";\nexport type {\n  BlockDefaults,\n  TemplateContent,\n  TemplateDefaults,\n  ThemeOverrides,\n  UiTheme,\n  MergeTagsConfig,\n  DisplayConditionsConfig,\n  CustomBlockDefinition,\n  ViewportSize,\n  CustomFont,\n  FontsConfig,\n  SaveResult,\n  Template,\n} from \"@templatical/types\";\n\nexport type { UseFontsReturn, FontOption } from \"./composables/useFonts\";\nexport { useFonts } from \"./composables/useFonts\";\nexport type { EditorCapabilities } from \"./types/editor-capabilities\";\n"],"mappings":"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"}

package/dist/{check-B7kDuZmP.js → check-B5S-C0bz.js}

@@ -1,4 +1,4 @@
-import { n as e } from "./_plugin-vue_export-helper-B1-bu7yR.js";
+import { n as e } from "./_plugin-vue_export-helper-5TQrnOhO.js";
 var t = e("check", [["path", {
 	d: "M20 6 9 17l-5-5",
 	key: "1gmf2c"

package/dist/{chevron-down-DJLW2Q9Z.js → chevron-down-CjsV1T0W.js}

@@ -1,4 +1,4 @@
-import { n as e } from "./_plugin-vue_export-helper-B1-bu7yR.js";
+import { n as e } from "./_plugin-vue_export-helper-5TQrnOhO.js";
 var t = e("chevron-down", [["path", {
 	d: "m6 9 6 6 6-6",
 	key: "qrunsl"

package/dist/{circle-alert-E2vYPs5r.js → circle-alert-CVTmJHKW.js}

@@ -1,4 +1,4 @@
-import { n as e } from "./_plugin-vue_export-helper-B1-bu7yR.js";
+import { n as e } from "./_plugin-vue_export-helper-5TQrnOhO.js";
 var t = e("circle-alert", [
 	["circle", {
 		cx: "12",

package/dist/{clock-lWIIQA3C.js → clock-CAjdSHBy.js}

@@ -1,4 +1,4 @@
-import { n as e } from "./_plugin-vue_export-helper-B1-bu7yR.js";
+import { n as e } from "./_plugin-vue_export-helper-5TQrnOhO.js";
 var t = e("clock", [["circle", {
 	cx: "12",
 	cy: "12",

package/dist/{dist-CG-vEqSU.js → dist-Ac4o1O4a.js}

@@ -1,5 +1,5 @@
 import { computed as e, getCurrentInstance as t, getCurrentScope as n, hasInjectionContext as r, inject as i, isRef as a, nextTick as o, onMounted as s, onScopeDispose as c, shallowReadonly as l, shallowRef as u, toValue as d, unref as f, watch as p, watchEffect as m } from "vue";
-//#region ../../node_modules/.bun/@vueuse+shared@14.2.1+cc44681ce9393ba4/node_modules/@vueuse/shared/dist/index.js
+//#region ../../node_modules/.bun/@vueuse+shared@14.2.1+987b49219a7ab62d/node_modules/@vueuse/shared/dist/index.js
 function h(e, t) {
 	return n() ? (c(e, t), !0) : !1;
 }
@@ -113,7 +113,7 @@ function F(e, t, n) {
 	});
 }
 //#endregion
-//#region ../../node_modules/.bun/@vueuse+core@14.2.1+cc44681ce9393ba4/node_modules/@vueuse/core/dist/index.js
+//#region ../../node_modules/.bun/@vueuse+core@14.2.1+987b49219a7ab62d/node_modules/@vueuse/core/dist/index.js
 var I = v ? window : void 0;
 v && window.document, v && window.navigator, v && window.location;
 function L(e) {