@templatical/editor 0.0.4 → 0.0.5

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-BQNU47zu.js";
+import { $ as b, J as x, Mn as S, k as C, on as w } from "./chunks/features-Ds0XUfte.js";
+import { S as ee } from "./chunks/icons-fWsuSvgd.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-Dgijy53u.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({
+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-BB3dgVOc.js"),
 		"./locales/en.ts": () => import("./chunks/en-DeDcpnoS.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-DeTolKnf.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-KYv9v_1z2.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkBA,IAAM,IAAQ,GAOR,IAAS,EAAU;GACvB,SAAS,EAAM,OAAO;GACtB,kBAAkB,EAAM,OAAO;GAChC,CAAC,EAGI,IAAO,EAAc;GACzB;GACA,QAAQ;IACN,SAAS,EAAM,OAAO;IACtB,OAAO,EAAM,OAAO;IACpB,eAAe,EAAM,OAAO;IAC5B,cAAc,EAAM,OAAO;IAC3B,WAAW,EAAM,OAAO;IACxB,mBAAmB,EAAM,OAAO;IAChC,gBAAgB,EAAM,OAAO;IAC7B,QAAQ,EAAM,OAAO,eAEf,EAAM,OAAO,OAAQ,KAAK,MAAM,KAAK,UAAU,EAAO,MAAM,QAAQ,CAAC,CAAA,GACvE,KAAA;IACL;GACD,cAAc,EAAM;GACpB,cAAc,EAAM;GACpB,iBAAiB,EAAM,OAAO,WAC1B,EACE,gBACE,EAAM,OAAO,SACX,KAAK,MAAM,KAAK,UAAU,EAAO,MAAM,QAAQ,CAAC,CACjD,EACL,GACA;GACL,CAAC;SAGF,GAAU,YAAY;AACpB,SAAM,EAAM,aAAa,iBAAiB;IAC1C,EAEF,QAAkB;AAEhB,GADA,EAAM,aAAa,kBAAkB,EACrC,EAAK,SAAS;IACd,EAGF,EAAa;GACX,kBAAkB,EAAO,QAAQ;GACjC,aAAa,MAA6B,EAAO,WAAW,EAAQ;GACpE,WAAW,MAAmB,EAAO,WAAW,EAAM;GACvD,CAAC,kBAIA,EAkLM,OAAA;GAjLJ,OAAK,EAAA,CAAC,mDAAiD,EAAA,YACjC,EAAA,EAAM,CAAC,MAAM,UAAQ,CAAA,CAAA;GAC1C,kBAAgB,EAAA,EAAI,CAAC,cAAc;GACnC,OAAK,EAAE,EAAA,EAAI,CAAC,YAAY,MAAK;;GAG9B,EA4CS,UA5CT,GA4CS;IAnCP,EAaM,OAbN,GAaM,CAAA,AAAA,EAAA,OAZJ,EAKE,OAAA;KAJA,OAAM;KACN,QAAO;KACP,KAAI;KACJ,KAAI;kBAEN,EAKO,QALP,GAKO,EADF,EAAA,EAAI,CAAC,EAAE,OAAO,MAAK,EAAA,EAAA,CAAA,CAAA;IAK1B,EAaM,OAbN,IAaM;KAZJ,EAGE,GAAA;MAFC,UAAU,EAAA,EAAM,CAAC,MAAM;MACvB,UAAQ,EAAA,EAAM,CAAC;;KAElB,EAGE,GAAA;MAFC,aAAW,EAAA,EAAM,CAAC,MAAM;MACxB,UAAQ,EAAA,EAAM,CAAC;;KAElB,EAGE,GAAA;MAFC,gBAAc,EAAA,EAAM,CAAC,MAAM;MAC3B,UAAQ,EAAA,EAAM,CAAC;;;aAKpB,EAEO,OAAA,EADL,OAAM,yEAAuE,EAAA,MAAA,GAAA;;KAKjF,EAA8C,GAAA,MAAA,MAAA,IAAA,EAAA,CAAA,CAAA,GAAA,CAA5B,EAAA,EAAM,CAAC,MAAM,YAAW,CAAA,CAAA;GAG1C,EAkCM,OAAA;IAjCJ,OAAK,EAAA,CAAC,sFAAoF,CAExE,EAAA,EAAM,CAAC,MAAM,cAAA,2BAAA,iCAAA,aAAA,CAAA,CAAA;IAD/B,OAAA,EAAA,YAAA,+CAA+D;OAS/D,EAYM,OAZN,IAYM,CAXJ,EAUa,IAAA,EAVD,MAAK,mBAAiB,EAAA;qBASvB,CAPD,EAAA,EAAI,CAAC,iBAAiB,gBAAgB,SAAA,GAAA,EAD9C,EAQS,UAAA;;KANP,OAAM;KACN,OAAA,EAAA,mBAAA,aAAkC;KACjC,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,EAAI,CAAC,iBAAiB,OAAK;QAEnC,EAA0C,EAAA,EAAA,EAAA;KAA9B,MAAM;KAAK,gBAAc;UAAK,MAC1C,EAAG,EAAA,EAAI,CAAC,EAAE,cAAc,oBAAmB,EAAA,EAAA,CAAA,CAAA,IAAA,GAAA,IAAA,GAAA,CAAA,CAAA;;SAIjD,EASM,OATN,IASM,CARJ,EAOE,IAAA;IANC,UAAU,EAAA,EAAM,CAAC,MAAM;IACvB,SAAS,EAAA,EAAM,CAAC,QAAQ;IACxB,qBAAmB,EAAA,EAAM,CAAC,MAAM;IAChC,aAAW,EAAA,EAAM,CAAC,MAAM;IACxB,gBAAc,EAAA,EAAM,CAAC,MAAM;IAC3B,eAAc,EAAA,EAAM,CAAC;;;;;;;;;GAM5B,EA+CS,UAAA,EA9CP,OAAK,EAAA,CAAC,0NAAwN,CAC5M,EAAA,EAAM,CAAC,MAAM,cAAA,2BAAA,gCAAA,CAAA,CAAA,EAAA,EAAA,CAM/B,EAsCM,OAtCN,IAsCM;IA1BJ,EAA0C,QAAA,MAAA,EAAjC,EAAA,EAAI,CAAC,EAAE,OAAO,UAAS,EAAA,EAAA;aAChC,EAcI,KAAA;KAbF,MAAK;KACL,QAAO;KACP,KAAI;KACJ,OAAM;KACN,OAAA,EAAA,mBAAA,QAA6B;QAE7B,EAKE,OAAA;KAJA,OAAM;KACN,QAAO;KACP,KAAI;KACJ,KAAI;UACJ,gBAEJ,CAAA,EAAA,GAAA;aACA,EAAmD,QAAA,EAA7C,OAAM,gCAA8B,EAAC,KAAC,GAAA;IAC5C,EAQI,KARJ,IAQI,EADC,EAAA,EAAI,CAAC,EAAE,OAAO,WAAU,EAAA,EAAA;;GAMjC,EAQM,OAAA;IAPJ,OAAM;IACN,MAAK;IACL,aAAU;IACV,eAAY;IACX,cAAY,EAAA,EAAI,CAAC,EAAE,UAAU;QAE3B,EAAA,EAAI,CAAC,gBAAgB,aAAa,MAAK,EAAA,GAAA,GAAA;KAI5C,EAsBE,GAAA;IApBC,kBAAgB,EAAA,EAAM,CAAC,cAAc;IACrC,UAAU,EAAA,EAAM,CAAC,QAAQ,MAAM;IAC/B,eAAY,AAAA,EAAA,QAAY,MAAY,EAAA,EAAM,CAAC,YAAY,EAAA,EAAM,CAAC,MAAM,iBAAkB,EAAO;IAG7F,eAAY,AAAA,EAAA,aAAA;KAAiC,EAAA,EAAM,CAAC,MAAM,mBAA+B,EAAA,EAAI,CAAC,aAAa,YAAY,EAAA,EAAM,CAAC,MAAM,gBAAe;;IAOnJ,kBAAe,AAAA,EAAA,aAAA;KAAiC,EAAA,EAAM,CAAC,cAAc,SAAqB,EAAA,EAAI,CAAC,aAAa,eAAe,EAAA,EAAM,CAAC,cAAc,MAAK;;IAOrJ,kBAAe,AAAA,EAAA,QAAG,MAAY,EAAA,EAAM,CAAC,eAAe,EAAO;sDApBnD,EAAA,EAAM,CAAC,MAAM,YAAW,CAAA,CAAA;;;yCEpOjC,KAAmB,CAAC,MAAM,KAAK;AAMrC,SAAgB,GAAc,GAAwB;AACpD,QAAO,EAAO,MAAM,IAAI,CAAC,GAAG,aAAa;;AAQ3C,eAAsB,EAAiB,GAAuC;CAC5E,IAAM,IAAa,GAAc,EAAO,EAClC,IAAe,GAAiB,SAAS,EAAW,GACtD,IACA;AAGJ,SADe,MAAM,EAAA,uBAAA,OAAA;EAAA,yBAAA,OAAA;EAAA,yBAAA,OAAA;EAAA,CAAA,EAAA,aAAA,EAAA,MAAA,EAAiC,EACxC;;;;AC6ChB,IAAI,IAA0B,MACxB,IAAqD,EAAI,KAAK;AAEpE,eAAsB,EACpB,GAC4B;CAC5B,IAAM,IACJ,OAAO,EAAO,aAAc,WACxB,SAAS,cAAc,EAAO,UAAU,GACxC,EAAO;AAEb,KAAI,CAAC,EACH,OAAU,MACR,8CAA8C,EAAO,YACtD;AAGH,CAAI,KACF,GAAS;CAIX,IAAM,IAAe,MAAM,EAAiB,EAAO,UAAU,KAAK,EAG5D,IAAe,EAAS,EAAO,MAAM;AAc3C,CAZA,IAAc,EAAU,EACtB,QAAQ;AACN,eACE,EAAE,IAAQ;GACR;GACA;GACA;GACA,KAAK;GACN,CAAC;IAEP,CAAC,EAEF,EAAY,MAAM,EAAU;CAE5B,IAAM,IAA8B;EAClC,aAAa;AAIX,UAFS,KAAK,MAAM,KAAK,UADrB,EAAU,QACqB,EAAU,MAAM,YAAY,GAE9B,EAAO,QAH1B,CACmD;;EAInE,WAAW,GAA0B;AAInC,GAHI,EAAU,SACZ,EAAU,MAAM,WAAW,EAAQ,EAErC,EAAO,UAAU;;EAEnB,SAAS,GAAgB;AACvB,GAAI,EAAU,SACZ,EAAU,MAAM,SAAS,EAAM;;EAGnC;EACD;AAKD,QAFA,EAAe,EAAS,EAEjB;;AAOT,IAAI,IAA+B,MAE7B,IAEM,EAAI,KAAK;AAErB,eAAsB,GACpB,GACiC;CACjC,IAAM,IACJ,OAAO,EAAO,aAAc,WACxB,SAAS,cAAc,EAAO,UAAU,GACxC,EAAO;AAEb,KAAI,CAAC,EACH,OAAU,MACR,8CAA8C,EAAO,YACtD;AAGH,CAAI,KACF,GAAc;CAIhB,IAAM,EAAE,SAAS,MAAgB,MAAM,OAAO,qCAGxC,IAAe,MAAM,EAAiB,EAAO,UAAU,KAAK,EAG5D,IAAe,EAAS,EAAO,MAAM;AA2B3C,OAxBqB,IAAI,SAAe,GAAS,MAAW;EAC1D,IAAM,IAAU,iBAAiB;AAC/B,KAAO,gBAAI,MAAM,sDAAsD,CAAC;KACvE,GAAgB;AAkBnB,EAhBA,IAAmB,EAAU,EAC3B,QAAQ;AACN,gBACE,EAAE,GAAa;IACb;IACA;IACA;IACA,KAAK;IACL,eAAe;AAEb,KADA,aAAa,EAAQ,EACrB,GAAS;;IAEZ,CAAC;KAEP,CAAC,EAEF,EAAiB,MAAM,EAAU;GACjC;CAIF,IAAM,IAAmC;EACvC,aAAa;AAIX,UAFS,KAAK,MAAM,KAAK,UADrB,EAAe,QACgB,EAAe,MAAM,YAAY,GAEnC,EAAO,QAHrB,CACmD;;EAIxE,WAAW,GAA0B;AACnC,GAAI,EAAe,SACjB,EAAe,MAAM,WAAW,EAAQ;;EAG5C,SAAS,GAAgB;AACvB,GAAI,EAAe,SACjB,EAAe,MAAM,SAAS,EAAM;;EAGxC,SAAS;EACT,OAAO,GAA2B;AAMhC,UALK,EAAe,QAKb,EAAe,MAAM,OAAO,EAAQ,GAJlC,QAAQ,OACb,gBAAI,MAAM,uCAAuC,CAClD;;EAIL,KAAK,GAAoB;AAMvB,UALK,EAAe,QAKb,EAAe,MAAM,KAAK,EAAW,GAJnC,QAAQ,OACb,gBAAI,MAAM,uCAAuC,CAClD;;EAIL,OAAO;AAML,UALK,EAAe,QAKb,EAAe,MAAM,MAAM,GAJzB,QAAQ,OACb,gBAAI,MAAM,uCAAuC,CAClD;;EAIN;AAKD,QAFA,EAAe,EAAS,EAEjB;;AAOT,SAAgB,IAAgB;AAC9B,CAAI,MACF,EAAY,SAAS,EACrB,IAAc,MACd,EAAU,QAAQ;;AAItB,SAAS,IAAqB;AAC5B,CAAI,MACF,EAAiB,SAAS,EAC1B,IAAmB,MACnB,EAAe,QAAQ;;AAQ3B,SAAS,EAAe,GAAmC;AACzD,QAAO,8BACJ,MAAM,MAAa;AAClB,IAAS,eAAe,EAAS,aAAa,EAAS,YAAY,CAAC;GACpE,CACD,YAAY,GAEX"}
+{"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/{dist-BkIys9zn.js → dist-Ci5lFuUy.js}

@@ -1,4 +1,4 @@
-import { I as e } from "./useEditorCore-CjwRMl7K.js";
+import { L as e } from "./useEditorCore-DUGD6pq_.js";
 import { $ as t, $t as n, A as r, At as i, B as a, Bt as o, C as ee, Ct as te, D as ne, Dt as re, E as ie, Et as ae, F as oe, Ft as se, G as ce, Gt as le, H as ue, Ht as de, I as fe, It as pe, J as me, Jt as he, K as ge, Kt as _e, L as ve, Lt as ye, M as s, Mt as c, N as l, Nt as u, O as d, Ot as f, P as p, Pt as m, Q as h, Qt as g, R as _, Rt as v, S as y, St as b, T as x, Tt as S, U as C, Ut as w, V as T, Vt as E, W as D, Wt as O, X as k, Xt as A, Y as j, Yt as M, Z as N, Zt as P, _ as be, _t as F, a as xe, an as I, at as Se, b as Ce, bt as we, c as Te, cn as Ee, ct as De, d as Oe, dn as ke, dt as Ae, en as je, et as Me, f as L, fn as Ne, ft as Pe, g as Fe, gt as Ie, h as Le, ht as Re, i as ze, in as Be, it as Ve, j as He, jt as Ue, k as We, kt as Ge, l as R, ln as Ke, lt as qe, m as Je, mn as Ye, mt as Xe, n as z, nn as Ze, nt as Qe, o as $e, on as et, ot as tt, p as nt, pn as rt, pt as it, q as at, qt as ot, r as st, rn as ct, rt as lt, s as ut, sn as dt, st as ft, t as pt, tn as mt, tt as ht, u as gt, un as _t, ut as vt, v as yt, vt as bt, w as xt, wt as St, x as Ct, xt as wt, y as B, yt as Tt, z as Et, zt as Dt } from "./dist-C_ymrGFi.js";
 import { customRef as Ot, defineComponent as V, getCurrentInstance as kt, h as H, markRaw as U, nextTick as At, onBeforeUnmount as W, onMounted as jt, provide as G, reactive as Mt, ref as K, render as q, shallowRef as Nt, toRaw as Pt, unref as Ft, watchEffect as It } from "vue";
 //#region ../../node_modules/.bun/@tiptap+vue-3@3.22.1+bbf5de022be137e7/node_modules/@tiptap/vue-3/dist/index.js

package/dist/{extensions-DEjfEFhD.js → extensions-DWx_jj8v.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./useI18n-D6m7ZUgY.js";
 import { t } from "./useMergeTag-BZ3X0bNr.js";
 import { Wt as n, i as r, o as i, p as a, u as o } from "./dist-C_ymrGFi.js";
-import { n as s, t as c } from "./dist-BkIys9zn.js";
+import { n as s, t as c } from "./dist-Ci5lFuUy.js";
 import { computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, defineComponent as m, nextTick as h, normalizeClass as g, normalizeStyle as _, openBlock as v, ref as y, toDisplayString as b, unref as x, vModelText as S, withCtx as C, withDirectives as w, withKeys as T, withModifiers as E } from "vue";
 import { SYNTAX_PRESETS as D, getLogicMergeTagKeyword as O, getMergeTagLabel as k, isLogicMergeTagValue as A } from "@templatical/types";
 //#region src/extensions/FontSize.ts

package/dist/{styleConstants-D4SOZGBV.js → styleConstants-Cxw88naD.js}

@@ -38,7 +38,7 @@ var t = e("text-align-center", [
 		d: "M17 19H3",
 		key: "z6ezky"
 	}]
-]), i = "tpl:block tpl:mb-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]", a = "tpl:w-full tpl:h-10 tpl:px-3.5 tpl:py-1.5 tpl:text-sm tpl:border tpl:rounded-[var(--tpl-radius-sm)] tpl:shadow-xs tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:outline-none focus:tpl:border-[var(--tpl-primary)] focus:tpl:shadow-[var(--tpl-ring)] placeholder:tpl:text-[var(--tpl-text-dim)]", o = "tpl:w-full tpl:h-10 tpl:px-3.5 tpl:py-1.5 tpl:text-sm tpl:border tpl:rounded-l-[var(--tpl-radius-sm)] tpl:rounded-r-none tpl:border-r-0 tpl:shadow-xs tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:outline-none focus:tpl:border-[var(--tpl-primary)] focus:tpl:shadow-[var(--tpl-ring)] placeholder:tpl:text-[var(--tpl-text-dim)]", s = "tpl:flex tpl:items-center tpl:px-2.5 tpl:text-xs tpl:border tpl:border-l-0 tpl:text-[var(--tpl-text-dim)] tpl:bg-[var(--tpl-bg-hover)] tpl:border-[var(--tpl-border)] tpl:rounded-r-[var(--tpl-radius-sm)]", c = "tpl:flex-1 tpl:h-10 tpl:px-3.5 tpl:py-1.5 tpl:text-xs tpl:font-mono tpl:border tpl:rounded-[var(--tpl-radius-sm)] tpl:shadow-xs tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:outline-none focus:tpl:border-[var(--tpl-primary)] focus:tpl:shadow-[var(--tpl-ring)]", l = "tpl:rounded-[var(--tpl-radius)] tpl:bg-[var(--tpl-bg-elevated)] tpl:p-4 tpl:border tpl:border-[var(--tpl-border)] tpl:transition-colors tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] hover:tpl:bg-[var(--tpl-bg-hover)]", u = "tpl-btn tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:px-3.5 tpl:py-2 tpl:text-sm tpl:font-medium tpl:whitespace-nowrap tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] hover:tpl:bg-[var(--tpl-primary)] hover:tpl:text-[var(--tpl-bg)] tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50", d = [
+]), i = "tpl:block tpl:mb-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]", a = "tpl:w-full tpl:h-10 tpl:px-3.5 tpl:py-1.5 tpl:text-sm tpl:border tpl:rounded-[var(--tpl-radius-sm)] tpl:shadow-xs tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:outline-none focus:tpl:border-[var(--tpl-primary)] focus:tpl:shadow-[var(--tpl-ring)] placeholder:tpl:text-[var(--tpl-text-dim)]", o = "tpl:w-full tpl:h-10 tpl:px-3.5 tpl:py-1.5 tpl:text-sm tpl:border tpl:rounded-l-[var(--tpl-radius-sm)] tpl:rounded-r-none tpl:border-r-0 tpl:shadow-xs tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:outline-none focus:tpl:border-[var(--tpl-primary)] focus:tpl:shadow-[var(--tpl-ring)] placeholder:tpl:text-[var(--tpl-text-dim)]", s = "tpl:flex tpl:items-center tpl:px-2.5 tpl:text-xs tpl:border tpl:border-l-0 tpl:text-[var(--tpl-text-dim)] tpl:bg-[var(--tpl-bg-hover)] tpl:border-[var(--tpl-border)] tpl:rounded-r-[var(--tpl-radius-sm)]", c = "tpl:flex-1 tpl:h-10 tpl:px-3.5 tpl:py-1.5 tpl:text-xs tpl:font-mono tpl:border tpl:rounded-[var(--tpl-radius-sm)] tpl:shadow-xs tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:outline-none focus:tpl:border-[var(--tpl-primary)] focus:tpl:shadow-[var(--tpl-ring)]", l = "tpl:rounded-[var(--tpl-radius)] tpl:bg-[var(--tpl-bg-elevated)] tpl:p-4 tpl:border tpl:border-[var(--tpl-border)] tpl:transition-colors tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] hover:tpl:bg-[var(--tpl-bg-hover)]", u = "tpl:flex tpl:size-8 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-150 tpl:hover:border-[var(--tpl-danger)] tpl:hover:bg-[var(--tpl-danger-light)] tpl:hover:text-[var(--tpl-danger)]", d = "tpl:flex tpl:w-full tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border tpl:border-dashed tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-2 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-150 tpl:hover:border-[var(--tpl-primary)] tpl:hover:text-[var(--tpl-primary)]", f = "tpl:w-full tpl:resize-y tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-2.5 tpl:py-2 tpl:font-mono tpl:text-xs tpl:text-[var(--tpl-text)] tpl:outline-none tpl:transition-all tpl:duration-150 tpl:placeholder:text-[var(--tpl-text-dim)] tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[0_0_0_3px_var(--tpl-primary-light)]", p = "tpl-btn tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:px-3.5 tpl:py-2 tpl:text-sm tpl:font-medium tpl:whitespace-nowrap tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] hover:tpl:bg-[var(--tpl-primary)] hover:tpl:text-[var(--tpl-bg)] tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50", m = [
 	"10px",
 	"12px",
 	"14px",
@@ -51,7 +51,7 @@ var t = e("text-align-center", [
 	"36px",
 	"48px",
 	"64px"
-], f = [
+], h = [
 	"1",
 	"1.2",
 	"1.4",
@@ -60,7 +60,7 @@ var t = e("text-align-center", [
 	"1.8",
 	"2",
 	"2.5"
-], p = [
+], g = [
 	{
 		label: "Normal",
 		value: "normal"
@@ -89,6 +89,6 @@ var t = e("text-align-center", [
 		label: "3px",
 		value: "3px"
 	}
-], m = "#000000", h = "#ffffff", g = "#ffff00", _ = "#f2f2f2";
+], _ = "#000000", v = "#ffffff", y = "#ffff00", b = "#f2f2f2";
 //#endregion
-export { t as _, d as a, l as c, a as d, o as f, n as g, r as h, m as i, c as l, i as m, g as n, p as o, s as p, _ as r, f as s, h as t, u };
+export { u as _, m as a, t as b, d as c, p as d, a as f, f as g, i as h, _ as i, l, s as m, y as n, g as o, o as p, b as r, h as s, v as t, c as u, r as v, n as y };