@aswin.dev/editor 0.8.5 → 0.8.7

package/dist/templatical-editor.js

@@ -1,25 +1,25 @@
-import { At as e, C as t, Ft as n, M as r, N as i, P as a, T as o, U as s, W as c, _ as l, b as ee, et as u, f as te, g as d, h as f, j as ne, jt as p, l as m, m as h, n as g, st as _, t as re, v, x as y, y as ie } from "./vue.runtime.esm-bundler-CjauPXjj.js";
-import { r as b } from "./timeouts-BSGxjuUF.js";
-import { f as ae, r as x } from "./dist-Bcqepqv3.js";
-import { V as oe, t as se, w as S, z as C } from "./useEditorCore-BHSyoxSK.js";
-import { w } from "./keys-CvX8D-8C.js";
-import { _ as T, a as ce, c as le, d as ue, f as de, g as fe, h as E, i as pe, l as me, m as D, n as he, o as O, p as k, r as A, s as j, t as M, u as N } from "./styles-ZIYLQwFf.js";
-import { t as P } from "./_plugin-vue_export-helper-BVAJ4lgT.js";
+import { At as e, C as t, Ft as n, M as r, N as i, P as a, T as o, U as s, W as c, _ as l, b as ee, et as u, f as te, g as d, h as f, j as p, jt as m, l as h, m as g, n as _, st as v, t as ne, v as y, x as b, y as re } from "./vue.runtime.esm-bundler-CjauPXjj.js";
+import { r as x } from "./timeouts-BSGxjuUF.js";
+import { f as S, r as ie } from "./dist-Bcqepqv3.js";
+import { V as ae, t as oe, w as C, z as w } from "./useEditorCore-DB4A_cje.js";
+import { T, m as se } from "./keys-CqdzeWhT.js";
+import { _ as ce, a as le, c as ue, d as de, f as fe, g as pe, h as E, i as me, l as he, m as D, n as O, o as k, p as A, r as j, s as M, t as N, u as P } from "./styles-BRNubGRJ.js";
+import { t as F } from "./_plugin-vue_export-helper-BVAJ4lgT.js";
 //#region src/Editor.vue?vue&type=script&setup=true&lang.ts
-var F = ["data-tpl-theme"], I = {
+var I = ["data-tpl-theme"], L = {
 	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)"
 	}
-}, 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" }, ge = {
+}, R = { class: "tpl:flex tpl:items-center tpl:justify-center tpl:gap-10" }, ge = { class: "tpl:sticky tpl:top-0 tpl:z-40 tpl:h-0" }, _e = {
 	key: 0,
 	class: "tpl:flex tpl:w-full tpl:flex-col tpl:gap-3 tpl:px-4 tpl:pt-4 tpl:pb-6"
-}, _e = { class: "tpl-popup-browser-frame tpl:flex tpl:min-h-[calc(100vh-11rem)] tpl:w-full tpl:flex-col tpl:overflow-hidden tpl:rounded-xl tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:shadow-[var(--tpl-shadow-xl)]" }, ve = {
+}, ve = { class: "tpl-popup-browser-frame tpl:flex tpl:min-h-[calc(100vh-11rem)] tpl:w-full tpl:flex-col tpl:overflow-hidden tpl:rounded-xl tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:shadow-[var(--tpl-shadow-xl)]" }, ye = {
 	key: 1,
 	class: "tpl:flex tpl:w-full tpl:flex-col tpl:items-center tpl:gap-3 tpl:p-8"
-}, ye = ["aria-label"], z = /* @__PURE__ */ P(/* @__PURE__ */ t({
+}, be = ["aria-label"], z = /* @__PURE__ */ F(/* @__PURE__ */ t({
 	__name: "Editor",
 	props: {
 		config: {},
@@ -27,118 +27,120 @@ var F = ["data-tpl-theme"], I = {
 		fontsManager: {}
 	},
 	setup(t, { expose: o }) {
-		let g = u(null), b = t, S = oe({
-			content: b.config.content,
-			templateDefaults: b.config.templateDefaults
-		}), O = se({
-			editor: S,
+		let _ = u(null), x = u(null);
+		a(se, x);
+		let C = t, k = ae({
+			content: C.config.content,
+			templateDefaults: C.config.templateDefaults
+		}), F = oe({
+			editor: k,
 			config: {
-				uiTheme: b.config.uiTheme,
-				theme: b.config.theme,
-				blockDefaults: b.config.blockDefaults,
-				customBlocks: b.config.customBlocks,
-				mergeTags: b.config.mergeTags,
-				displayConditions: b.config.displayConditions,
-				onRequestMedia: b.config.onRequestMedia,
-				editorType: b.config.editorType,
-				accessibility: fe(b.config),
-				onSave: b.config.onSave ? () => b.config.onSave(JSON.parse(JSON.stringify(S.state.content))) : void 0
+				uiTheme: C.config.uiTheme,
+				theme: C.config.theme,
+				blockDefaults: C.config.blockDefaults,
+				customBlocks: C.config.customBlocks,
+				mergeTags: C.config.mergeTags,
+				displayConditions: C.config.displayConditions,
+				onRequestMedia: C.config.onRequestMedia,
+				editorType: C.config.editorType,
+				accessibility: pe(C.config),
+				onSave: C.config.onSave ? () => C.config.onSave(JSON.parse(JSON.stringify(k.state.content))) : void 0
 			},
-			translations: b.translations,
-			fontsManager: b.fontsManager,
-			autoSaveOptions: b.config.onChange ? { onChange: () => b.config.onChange(JSON.parse(JSON.stringify(S.state.content))) } : null
+			translations: C.translations,
+			fontsManager: C.fontsManager,
+			autoSaveOptions: C.config.onChange ? { onChange: () => C.config.onChange(JSON.parse(JSON.stringify(k.state.content))) } : null
 		});
-		ne(async () => {
-			if (await b.fontsManager.loadCustomFonts(), C(b.config.editorType) === "popup" && !S.content.value.settings.popup) {
-				let e = ae();
-				S.updateSettings({
+		p(async () => {
+			if (await C.fontsManager.loadCustomFonts(), w(C.config.editorType) === "popup" && !k.content.value.settings.popup) {
+				let e = S();
+				k.updateSettings({
 					popup: e,
-					width: x[e.design.sizePreset]
+					width: ie[e.design.sizePreset]
 				});
 			}
 		}), r(() => {
-			b.fontsManager.cleanupFontLinks(), O.destroy();
+			C.fontsManager.cleanupFontLinks(), F.destroy();
 		});
-		let P = u("blocks");
-		a(w, P);
-		let z = h(() => C(b.config.editorType) === "popup"), B = h(() => z.value && P.value === "displayRules"), V = h(() => z.value && P.value === "schedule"), H = h(() => P.value === "design"), U = h(() => z.value && (B.value || V.value || H.value)), W = h(() => {
-			if (S.state.previewMode) return ["tpl:left-0", "tpl:right-0"];
-			if (!z.value) return ["tpl:left-12", "tpl:right-[320px]"];
+		let z = u("blocks");
+		a(T, z);
+		let B = g(() => w(C.config.editorType) === "popup"), V = g(() => B.value && z.value === "displayRules"), H = g(() => B.value && z.value === "schedule"), U = g(() => z.value === "design"), W = g(() => B.value && (V.value || H.value || U.value)), G = g(() => {
+			if (k.state.previewMode) return ["tpl:left-0", "tpl:right-0"];
+			if (!B.value) return ["tpl:left-12", "tpl:right-[320px]"];
 			let e;
-			e = P.value === "blocks" ? "tpl:left-[272px]" : H.value ? "tpl:left-[392px]" : "tpl:left-[72px]";
-			let t = U.value ? "tpl:right-0" : "tpl:right-[320px]";
+			e = z.value === "blocks" ? "tpl:left-[272px]" : U.value ? "tpl:left-[392px]" : "tpl:left-[72px]";
+			let t = W.value ? "tpl:right-0" : "tpl:right-[320px]";
 			return [e, t];
-		}), G = h(() => B.value || V.value);
+		}), K = g(() => V.value || H.value);
 		return o({
-			getContent: () => S.content.value,
-			setContent: (e) => S.setContent(e),
-			setTheme: (e) => S.setUiTheme(e),
-			undo: () => O.history.undo(),
-			redo: () => O.history.redo(),
-			canUndo: () => O.history.canUndo.value,
-			canRedo: () => O.history.canRedo.value,
-			renderCustomBlock: O.registry.renderCustomBlock,
-			startTour: (e) => g.value?.start(e),
-			dismissTour: () => g.value?.dismiss(),
-			resetTourDismissed: () => pe(b.config.tour),
-			isTourDismissed: () => b.config.tour ? ce(b.config.tour) : !0
-		}), (r, a) => (i(), v("div", {
-			class: e(["tpl tpl:relative tpl:h-full tpl:overflow-hidden", { "tpl:dark": _(S).state.darkMode }]),
-			"data-tpl-theme": _(O).resolvedTheme.value,
-			style: p(_(O).themeStyles.value)
+			getContent: () => k.content.value,
+			setContent: (e) => k.setContent(e),
+			setTheme: (e) => k.setUiTheme(e),
+			undo: () => F.history.undo(),
+			redo: () => F.history.redo(),
+			canUndo: () => F.history.canUndo.value,
+			canRedo: () => F.history.canRedo.value,
+			renderCustomBlock: F.registry.renderCustomBlock,
+			startTour: (e) => _.value?.start(e),
+			dismissTour: () => _.value?.dismiss(),
+			resetTourDismissed: () => me(C.config.tour),
+			isTourDismissed: () => C.config.tour ? le(C.config.tour) : !0
+		}), (r, a) => (i(), y("div", {
+			class: e(["tpl tpl:relative tpl:h-full tpl:overflow-hidden", { "tpl:dark": v(k).state.darkMode }]),
+			"data-tpl-theme": v(F).resolvedTheme.value,
+			style: m(v(F).themeStyles.value)
 		}, [
-			f("header", I, [
+			f("header", L, [
 				a[5] ||= f("div", { class: "tpl:flex tpl:items-center tpl:gap-2.5" }, null, -1),
-				f("div", L, [
-					y(ue),
-					y(N, {
-						viewport: _(S).state.viewport,
-						onChange: _(S).setViewport
+				f("div", R, [
+					b(de),
+					b(P, {
+						viewport: v(k).state.viewport,
+						onChange: v(k).setViewport
 					}, null, 8, ["viewport", "onChange"]),
-					y(le, {
-						"dark-mode": _(S).state.darkMode,
-						onChange: _(S).setDarkMode
+					b(ue, {
+						"dark-mode": v(k).state.darkMode,
+						onChange: v(k).setDarkMode
 					}, null, 8, ["dark-mode", "onChange"]),
-					y(me, {
-						"preview-mode": _(S).state.previewMode,
-						onChange: _(S).setPreviewMode
+					b(he, {
+						"preview-mode": v(k).state.previewMode,
+						onChange: v(k).setPreviewMode
 					}, null, 8, ["preview-mode", "onChange"])
 				]),
 				a[6] ||= f("div", { class: "tpl:flex tpl:min-w-[200px] tpl:items-center tpl:justify-end tpl:gap-3" }, null, -1)
 			]),
-			c(y(k, null, null, 512), [[m, !_(S).state.previewMode]]),
+			c(b(A, null, null, 512), [[h, !v(k).state.previewMode]]),
 			f("div", {
-				class: e(["tpl-body tpl:absolute tpl:bottom-0 tpl:overflow-auto", [...W.value, "tpl:top-14"]]),
-				style: p({
+				class: e(["tpl-body tpl:absolute tpl:bottom-0 tpl:overflow-auto", [...G.value, "tpl:top-14"]]),
+				style: m({
 					transition: "all 300ms cubic-bezier(0.34, 1.56, 0.64, 1)",
-					backgroundColor: G.value ? "var(--tpl-bg)" : "var(--tpl-canvas-bg)"
+					backgroundColor: K.value ? "var(--tpl-bg)" : "var(--tpl-canvas-bg)"
 				})
-			}, [z.value && P.value === "displayRules" ? (i(), d(he, { key: 0 })) : z.value && P.value === "schedule" ? (i(), d(M, {
+			}, [B.value && z.value === "displayRules" ? (i(), d(O, { key: 0 })) : B.value && z.value === "schedule" ? (i(), d(N, {
 				key: 1,
 				layout: "standalone"
-			})) : (i(), v(te, { key: 2 }, [f("div", R, [y(re, { name: "tpl-restore-btn" }, {
-				default: s(() => [_(O).conditionPreview.hasHiddenBlocks.value ? (i(), v("button", {
+			})) : (i(), y(te, { key: 2 }, [f("div", ge, [b(ne, { name: "tpl-restore-btn" }, {
+				default: s(() => [v(F).conditionPreview.hasHiddenBlocks.value ? (i(), y("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: a[0] ||= (e) => _(O).conditionPreview.reset()
-				}, [y(_(T), {
+					onClick: a[0] ||= (e) => v(F).conditionPreview.reset()
+				}, [b(v(ce), {
 					size: 13,
 					"stroke-width": 2
-				}), ee(" " + n(_(O).t.blockSettings.restoreHiddenBlocks), 1)])) : l("", !0)]),
+				}), ee(" " + n(v(F).t.blockSettings.restoreHiddenBlocks), 1)])) : l("", !0)]),
 				_: 1
-			})]), z.value ? (i(), v("div", ge, [y(D, {
-				"preview-mode": _(S).state.previewMode,
+			})]), B.value ? (i(), y("div", _e, [b(D, {
+				"preview-mode": v(k).state.previewMode,
 				"multi-page-canvas": t.config.multiPageCanvas ?? !1
-			}, null, 8, ["preview-mode", "multi-page-canvas"]), f("div", _e, [a[7] ||= ie("<div class=\"tpl-popup-browser-bar tpl:relative tpl:flex tpl:h-9 tpl:items-center tpl:gap-1.5 tpl:border-b tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:px-3\" aria-hidden=\"true\" data-v-186f5453><span class=\"tpl:block tpl:size-3 tpl:rounded-full\" style=\"background-color:#ff5f57;\" data-v-186f5453></span><span class=\"tpl:block tpl:size-3 tpl:rounded-full\" style=\"background-color:#febc2e;\" data-v-186f5453></span><span class=\"tpl:block tpl:size-3 tpl:rounded-full\" style=\"background-color:#28c840;\" data-v-186f5453></span><div class=\"tpl:pointer-events-none tpl:absolute tpl:left-1/2 tpl:top-1/2 tpl:-translate-x-1/2 tpl:-translate-y-1/2 tpl:rounded-md tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-0.5 tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-text-muted)] tpl:tracking-tight\" data-v-186f5453> yourstore.com </div></div>", 1), y(E, {
+			}, null, 8, ["preview-mode", "multi-page-canvas"]), f("div", ve, [a[7] ||= re("<div class=\"tpl-popup-browser-bar tpl:relative tpl:flex tpl:h-9 tpl:items-center tpl:gap-1.5 tpl:border-b tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:px-3\" aria-hidden=\"true\" data-v-1fdbd0b6><span class=\"tpl:block tpl:size-3 tpl:rounded-full\" style=\"background-color:#ff5f57;\" data-v-1fdbd0b6></span><span class=\"tpl:block tpl:size-3 tpl:rounded-full\" style=\"background-color:#febc2e;\" data-v-1fdbd0b6></span><span class=\"tpl:block tpl:size-3 tpl:rounded-full\" style=\"background-color:#28c840;\" data-v-1fdbd0b6></span><div class=\"tpl:pointer-events-none tpl:absolute tpl:left-1/2 tpl:top-1/2 tpl:-translate-x-1/2 tpl:-translate-y-1/2 tpl:rounded-md tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-0.5 tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-text-muted)] tpl:tracking-tight\" data-v-1fdbd0b6> yourstore.com </div></div>", 1), b(E, {
 				class: "tpl:flex tpl:min-h-0 tpl:flex-1 tpl:flex-col",
-				viewport: _(S).state.viewport,
-				content: _(S).content.value,
-				"selected-block-id": _(S).state.selectedBlockId,
-				"dark-mode": _(S).state.darkMode,
-				"preview-mode": _(S).state.previewMode,
+				viewport: v(k).state.viewport,
+				content: v(k).content.value,
+				"selected-block-id": v(k).state.selectedBlockId,
+				"dark-mode": v(k).state.darkMode,
+				"preview-mode": v(k).state.previewMode,
 				"multi-page-canvas": t.config.multiPageCanvas ?? !1,
-				onSelectBlock: _(S).selectBlock
+				onSelectBlock: v(k).selectBlock
 			}, null, 8, [
 				"viewport",
 				"content",
@@ -147,17 +149,17 @@ var F = ["data-tpl-theme"], I = {
 				"preview-mode",
 				"multi-page-canvas",
 				"onSelectBlock"
-			])])])) : (i(), v("div", ve, [y(D, {
-				"preview-mode": _(S).state.previewMode,
+			])])])) : (i(), y("div", ye, [b(D, {
+				"preview-mode": v(k).state.previewMode,
 				"multi-page-canvas": t.config.multiPageCanvas ?? !1
-			}, null, 8, ["preview-mode", "multi-page-canvas"]), y(E, {
-				viewport: _(S).state.viewport,
-				content: _(S).content.value,
-				"selected-block-id": _(S).state.selectedBlockId,
-				"dark-mode": _(S).state.darkMode,
-				"preview-mode": _(S).state.previewMode,
+			}, null, 8, ["preview-mode", "multi-page-canvas"]), b(E, {
+				viewport: v(k).state.viewport,
+				content: v(k).content.value,
+				"selected-block-id": v(k).state.selectedBlockId,
+				"dark-mode": v(k).state.darkMode,
+				"preview-mode": v(k).state.previewMode,
 				"multi-page-canvas": t.config.multiPageCanvas ?? !1,
-				onSelectBlock: _(S).selectBlock
+				onSelectBlock: v(k).selectBlock
 			}, null, 8, [
 				"viewport",
 				"content",
@@ -167,39 +169,44 @@ var F = ["data-tpl-theme"], I = {
 				"multi-page-canvas",
 				"onSelectBlock"
 			])]))], 64))], 6),
-			t.config.branding === !1 ? l("", !0) : (i(), d(j, {
+			t.config.branding === !1 ? l("", !0) : (i(), d(M, {
 				key: 0,
-				"position-class": W.value
+				"position-class": G.value
 			}, null, 8, ["position-class"])),
 			f("div", {
 				class: "tpl-sr-only",
 				role: "status",
 				"aria-live": "polite",
 				"aria-atomic": "true",
-				"aria-label": _(O).t.landmarks.reorderAnnouncements
-			}, n(_(O).keyboardReorder.announcement.value), 9, ye),
-			c(y(de, {
-				"selected-block": _(S).selectedBlock.value,
-				settings: _(S).content.value.settings,
-				onUpdateBlock: a[1] ||= (e) => _(S).updateBlock(_(S).state.selectedBlockId, e),
+				"aria-label": v(F).t.landmarks.reorderAnnouncements
+			}, n(v(F).keyboardReorder.announcement.value), 9, be),
+			c(b(fe, {
+				"selected-block": v(k).selectedBlock.value,
+				settings: v(k).content.value.settings,
+				onUpdateBlock: a[1] ||= (e) => v(k).updateBlock(v(k).state.selectedBlockId, e),
 				onDeleteBlock: a[2] ||= () => {
-					_(S).state.selectedBlockId && _(O).blockActions.deleteBlock(_(S).state.selectedBlockId);
+					v(k).state.selectedBlockId && v(F).blockActions.deleteBlock(v(k).state.selectedBlockId);
 				},
 				onDuplicateBlock: a[3] ||= () => {
-					_(S).selectedBlock.value && _(O).blockActions.duplicateBlock(_(S).selectedBlock.value);
+					v(k).selectedBlock.value && v(F).blockActions.duplicateBlock(v(k).selectedBlock.value);
 				},
-				onUpdateSettings: a[4] ||= (e) => _(S).updateSettings(e)
-			}, null, 8, ["selected-block", "settings"]), [[m, !_(S).state.previewMode && !U.value]]),
-			t.config.tour ? (i(), d(A, {
+				onUpdateSettings: a[4] ||= (e) => v(k).updateSettings(e)
+			}, null, 8, ["selected-block", "settings"]), [[h, !v(k).state.previewMode && !W.value]]),
+			f("div", {
+				ref_key: "floatingUiTeleportEl",
+				ref: x,
+				class: "tpl-editor-floating-ui tpl:pointer-events-none tpl:fixed tpl:inset-0 tpl:z-[9999] tpl:overflow-visible"
+			}, null, 512),
+			t.config.tour ? (i(), d(j, {
 				key: 1,
 				ref_key: "editorTourRef",
-				ref: g,
+				ref: _,
 				"tour-config": t.config.tour,
-				"dark-mode": _(S).state.darkMode
+				"dark-mode": v(k).state.darkMode
 			}, null, 8, ["tour-config", "dark-mode"])) : l("", !0)
-		], 14, F));
+		], 14, I));
 	}
-}), [["__scopeId", "data-v-186f5453"]]), B = /* @__PURE__ */ Object.assign({
+}), [["__scopeId", "data-v-1fdbd0b6"]]), B = /* @__PURE__ */ Object.assign({
 	"./locales/de.ts": () => import("./de-DP4gn3tf.js"),
 	"./locales/en.ts": () => import("./en-CyZxmGTU.js")
 }), V = /* @__PURE__ */ Object.assign({
@@ -221,13 +228,13 @@ async function q(e) {
 	let t = B[`./locales/${K(e, U)}.ts`];
 	return (await t()).default;
 }
-async function be(e) {
+async function xe(e) {
 	let t = V[`./locales/cloud/${K(e, W)}.ts`];
 	return (await t()).default;
 }
 //#endregion
 //#region src/utils/toMjml.ts
-async function xe(e) {
+async function Se(e) {
 	let t;
 	try {
 		t = await import("@aswin.dev/renderer");
@@ -239,11 +246,11 @@ async function xe(e) {
 //#endregion
 //#region src/index.ts
 var J = null, Y = u(null);
-async function Se(e) {
+async function Ce(e) {
 	let t = typeof e.container == "string" ? document.querySelector(e.container) : e.container;
 	if (!t) throw Error(`[Templatical] Container element not found: ${e.container}`);
-	let n = await q(e.locale ?? "en"), r = S(e.fonts);
-	J && Q(), J = g({ setup() {
+	let n = await q(e.locale ?? "en"), r = C(e.fonts);
+	J && Q(), J = _({ setup() {
 		return () => o(z, {
 			config: e,
 			translations: n,
@@ -289,20 +296,20 @@ async function Se(e) {
 		renderCustomBlock(e) {
 			return Y.value ? Y.value.renderCustomBlock(e) : Promise.reject(/* @__PURE__ */ Error("[Templatical] Editor not ready"));
 		},
-		toMjml: () => xe(i)
+		toMjml: () => Se(i)
 	};
 	return i;
 }
 var X = null, Z = u(null);
-async function Ce(e) {
+async function we(e) {
 	let t = typeof e.container == "string" ? document.querySelector(e.container) : e.container;
 	if (!t) throw Error(`[Templatical] Container element not found: ${e.container}`);
-	let { default: n } = await import("./CloudEditor-BUlmUuhO.js"), [r, i] = await Promise.all([q(e.locale ?? "en"), be(e.locale ?? "en")]), a = S(e.fonts);
+	let { default: n } = await import("./CloudEditor-BNEIze18.js"), [r, i] = await Promise.all([q(e.locale ?? "en"), xe(e.locale ?? "en")]), a = C(e.fonts);
 	return X && $(), await new Promise((s, c) => {
 		let l = setTimeout(() => {
 			c(/* @__PURE__ */ Error("[Templatical] Cloud editor initialization timed out"));
-		}, b);
-		X = g({ setup() {
+		}, x);
+		X = _({ setup() {
 			return () => o(n, {
 				config: e,
 				translations: r,
@@ -367,4 +374,4 @@ function $() {
 	X && (X.unmount(), X = null, Z.value = null);
 }
 //#endregion
-export { O as DEFAULT_EDITOR_TOUR_STORAGE_KEY, Se as init, Ce as initCloud, Q as unmount, S as useFonts };
+export { k as DEFAULT_EDITOR_TOUR_STORAGE_KEY, Ce as init, we as initCloud, Q as unmount, C as useFonts };

package/dist/{useCloudI18n-DOKSZql1.js → useCloudI18n-CDhjmAgB.js}

@@ -1,5 +1,5 @@
 import { D as e, Y as t } from "./vue.runtime.esm-bundler-CjauPXjj.js";
-import { l as n } from "./keys-CvX8D-8C.js";
+import { l as n } from "./keys-CqdzeWhT.js";
 //#region src/composables/useCloudI18n.ts
 function r(e, t) {
 	return e.replace(/\{(\w+)\}/g, (e, n) => n in t ? String(t[n]) : `{${n}}`);

package/dist/{useEditorCore-BHSyoxSK.js → useEditorCore-DB4A_cje.js}

@@ -2,17 +2,17 @@ import { a as e, i as t, n, r, t as i } from "./rolldown-runtime-BZGGJVDF.js";
 import { $ as a, A as o, At as s, C as c, Ct as l, D as u, Dt as d, Et as f, F as p, Ft as m, G as h, I as g, It as _, J as v, Mt as y, N as b, Nt as x, Ot as S, P as C, Pt as w, Q as T, R as E, S as D, St as O, Tt as ee, U as te, V as k, W as ne, Y as re, Z as ie, _ as ae, _t as oe, a as se, b as ce, bt as le, ct as ue, d as A, dt as de, et as j, f as fe, ft as pe, g as me, gt as he, h as M, ht as ge, j as _e, jt as N, k as ve, kt as ye, l as be, lt as xe, m as P, mt as Se, nt as Ce, o as we, ot as Te, pt as Ee, q as De, r as Oe, st as F, u as ke, ut as Ae, v as I, vt as je, wt as Me, x as L, xt as Ne, yt as Pe } from "./vue.runtime.esm-bundler-CjauPXjj.js";
 import { C as Fe, D as Ie, E as Le, H as Re, M as ze, O as Be, S as Ve, T as He, U as Ue, V as We, b as Ge, c as Ke, d as qe, g as Je, h as Ye, k as Xe, l as Ze, p as Qe, s as $e, t as et, u as tt, v as nt, w as rt, x as it, y as at, z as ot } from "./dist-Bcqepqv3.js";
 import { c as st, d as ct, f as lt, i as ut, n as dt, r as ft, u as pt } from "./dist-Djgi0A6k.js";
-import { A as mt, C as ht, D as gt, O as _t, S as vt, _ as yt, a as bt, b as xt, c as St, d as Ct, f as wt, g as Tt, h as Et, k as Dt, m as Ot, o as kt, p as At, r as jt, s as Mt, t as Nt, v as Pt, x as Ft, y as It } from "./keys-CvX8D-8C.js";
-import { t as Lt } from "./useI18n-C2xQZ6K9.js";
+import { A as mt, C as ht, O as gt, S as _t, _ as vt, a as yt, b as bt, c as xt, d as St, f as Ct, g as wt, h as Tt, j as Et, k as Dt, o as Ot, p as kt, r as At, s as jt, t as Mt, v as Nt, w as Pt, x as Ft, y as It } from "./keys-CqdzeWhT.js";
+import { t as Lt } from "./useI18n-DLZJ6wNn.js";
 import { t as Rt } from "./createLucideIcon-ClREiSx3.js";
 import { t as zt } from "./message-circle-B39qAHxs.js";
 import { t as Bt } from "./trash-2-CtK2apEH.js";
 import { t as Vt } from "./triangle-alert-KpDVNbpn.js";
 import { t as Ht } from "./LoadingTrack-Ba2pfF57.js";
 import { t as Ut } from "./_plugin-vue_export-helper-BVAJ4lgT.js";
-import "./useCloudI18n-DOKSZql1.js";
-import { t as Wt } from "./useMergeTag-BfVcyNSv.js";
-import { t as Gt } from "./CountdownBlock-Ba3T-i2X.js";
+import "./useCloudI18n-CDhjmAgB.js";
+import { t as Wt } from "./useMergeTag-D-kqWENN.js";
+import { t as Gt } from "./CountdownBlock-CrpaDWze.js";
 //#region ../core/dist/index.js
 v();
 function Kt(e) {
@@ -797,7 +797,7 @@ var vn = { class: "tpl:text-center" }, yn = ["href"], bn = /* @__PURE__ */ c({
 		viewport: {}
 	},
 	setup(e) {
-		let t = e, n = u(Ot, null), r = P(() => t.block.clickAction ?? "none"), i = P(() => {
+		let t = e, n = u(Tt, null), r = P(() => t.block.clickAction ?? "none"), i = P(() => {
 			if (r.value === "scroll_anchor") {
 				let e = t.block.clickActionAnchorId?.trim().replace(/^#/, "") ?? "";
 				return e ? `#${e}` : t.block.url || "#";
@@ -1336,7 +1336,7 @@ function Gn(e) {
 //#endregion
 //#region src/composables/useRichTextEditor.ts
 function Kn(e) {
-	let t = u(Ot, null), { mergeTags: n, canRequestMergeTag: r, isRequesting: i, requestMergeTag: a, syntax: s, autocomplete: c } = Wt(), l = u(_t, null), d = (re(l) ? l.value : l)?.mergeTag?.suggestionEmpty ?? "No matching merge tags", f = ze(s), p = Ce(null), { showLinkDialog: m, linkUrl: h, linkDialogRef: g, openLinkDialog: _, insertLink: v, removeLink: y, closeLinkDialog: b, handleLinkKeydown: x } = Gn(p), { start: S, stop: C } = pt(() => p.value?.commands.focus("end"), 0, { immediate: !1 }), w = Ce(null), T = j(!0), E = j(null), D = !1;
+	let t = u(Tt, null), { mergeTags: n, canRequestMergeTag: r, isRequesting: i, requestMergeTag: a, syntax: s, autocomplete: c } = Wt(), l = u(Dt, null), d = (re(l) ? l.value : l)?.mergeTag?.suggestionEmpty ?? "No matching merge tags", f = ze(s), p = Ce(null), { showLinkDialog: m, linkUrl: h, linkDialogRef: g, openLinkDialog: _, insertLink: v, removeLink: y, closeLinkDialog: b, handleLinkKeydown: x } = Gn(p), { start: S, stop: C } = pt(() => p.value?.commands.focus("end"), 0, { immediate: !1 }), w = Ce(null), T = j(!0), E = j(null), D = !1;
 	async function O() {
 		E.value = null, T.value = !0;
 		try {
@@ -1435,7 +1435,7 @@ var qn = { class: "tpl:w-full" }, Jn = {
 	},
 	emits: ["fetchData"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, { t: i } = Lt(), a = u(Mt, null), o = j(""), s = j(!1), c = P(() => a?.getDefinition(n.block.customType)), l = P(() => !!c.value), { isFetching: d, fetch: f, needsFetch: p, hasDataSource: h } = en({
+		let n = e, r = t, { t: i } = Lt(), a = u(jt, null), o = j(""), s = j(!1), c = P(() => a?.getDefinition(n.block.customType)), l = P(() => !!c.value), { isFetching: d, fetch: f, needsFetch: p, hasDataSource: h } = en({
 			definition: c,
 			block: P(() => n.block),
 			onUpdate: (e, t) => {
@@ -1505,7 +1505,7 @@ var qn = { class: "tpl:w-full" }, Jn = {
 	setup(e) {
 		let t = e, { t: n } = Lt();
 		t.viewport;
-		let r = u(Ot, null), i = P(() => {
+		let r = u(Tt, null), i = P(() => {
 			let e = t.block;
 			return e.discountMode === "none" ? "" : e.discountMode === "manual_shopify" && e.manualDiscountCode.trim() || n.discountCoupon.previewSampleCode;
 		}), a = P(() => t.block.discountMode !== "none"), s = P(() => t.block.copyConfirmationText?.trim() || n.discountCoupon.copyCodeFlash), c = j(!1), l = null;
@@ -1619,7 +1619,7 @@ var qn = { class: "tpl:w-full" }, Jn = {
 	},
 	emits: ["update"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, { t: i } = Lt(), { syntax: a } = Wt(), o = u(vt, null), s = P(() => !!o);
+		let n = e, r = t, { t: i } = Lt(), { syntax: a } = Wt(), o = u(ht, null), s = P(() => !!o);
 		async function c() {
 			let e = await o?.({ accept: ["images"] });
 			if (e) {
@@ -1806,7 +1806,7 @@ var qn = { class: "tpl:w-full" }, Jn = {
 //#endregion
 //#region src/composables/useEditableTextBlock.ts
 function Rr(e) {
-	let t = u(It, []), { syntax: n } = Wt(), r = P(() => We(Re(e(), t), n)), i = j(!1), a = j(null), { top: o, left: s } = dt(a), c = P(() => ({
+	let t = u(bt, []), { syntax: n } = Wt(), r = P(() => We(Re(e(), t), n)), i = j(!1), a = j(null), { top: o, left: s } = dt(a), c = P(() => ({
 		top: o.value - 8,
 		left: s.value
 	}));
@@ -1834,7 +1834,7 @@ var zr = ["innerHTML"], Br = /* @__PURE__ */ c({
 		viewport: {}
 	},
 	setup(e) {
-		let t = e, n = D(() => import("./ParagraphEditor-CFuaZKGk.js")), { isEditing: r, blockRef: i, toolbarPosition: a, resolvedContent: o, handleDoubleClick: s, handleEditorDone: c } = Rr(() => t.block.content);
+		let t = e, n = D(() => import("./ParagraphEditor-C2d9O2P4.js")), { isEditing: r, blockRef: i, toolbarPosition: a, resolvedContent: o, handleDoubleClick: s, handleEditorDone: c } = Rr(() => t.block.content);
 		return (t, l) => (b(), I("div", {
 			ref_key: "blockRef",
 			ref: i,
@@ -1898,7 +1898,7 @@ var Ur = ["data-block-id", "data-block-type"], Wr = ["aria-label"], Gr = [
 	},
 	emits: ["select"],
 	setup(e, { emit: t }) {
-		let n = D(() => import("./BlockA11yBadge-Qs6HtXid.js")), r = e, i = t, { t: a, format: o } = Lt(), c = u(Pt, null), l = j(null), d = P(() => c?.liftedBlockId.value === r.block.id), f = P(() => d.value ? o(a.blockActions.dragLifted, { block: r.block.type }) : a.blockActions.drag);
+		let n = D(() => import("./BlockA11yBadge-Dr854uEe.js")), r = e, i = t, { t: a, format: o } = Lt(), c = u(It, null), l = j(null), d = P(() => c?.liftedBlockId.value === r.block.id), f = P(() => d.value ? o(a.blockActions.dragLifted, { block: r.block.type }) : a.blockActions.drag);
 		async function p() {
 			await ve(), l.value?.focus();
 		}
@@ -1925,7 +1925,7 @@ var Ur = ["data-block-id", "data-block-type"], Wr = ["aria-label"], Gr = [
 			desktop: a.viewport.desktop,
 			tablet: a.viewport.tablet,
 			mobile: a.viewport.mobile
-		}[r.viewport] ?? r.viewport : ""), y = P(() => !!r.block.displayCondition), x = u(bt, null), S = u(Ct, null), C = u(St, {}), w = P(() => !!C.savedModules), T = P(() => C.comments?.getBlockCount(r.block.id) ?? 0), E = P(() => Hr(r.block));
+		}[r.viewport] ?? r.viewport : ""), y = P(() => !!r.block.displayCondition), x = u(yt, null), S = u(St, null), C = u(xt, {}), w = P(() => !!C.savedModules), T = P(() => C.comments?.getBlockCount(r.block.id) ?? 0), E = P(() => Hr(r.block));
 		function O(e) {
 			r.previewMode || (e.stopPropagation(), i("select"));
 		}
@@ -2351,7 +2351,7 @@ var Ur = ["data-block-id", "data-block-type"], Wr = ["aria-label"], Gr = [
 		viewport: {}
 	},
 	setup(e) {
-		let t = e, n = mt(Ot, "SpacerBlock"), r = P(() => ({
+		let t = e, n = Et(Tt, "SpacerBlock"), r = P(() => ({
 			height: `${t.block.height}px`,
 			minHeight: `${t.block.height}px`,
 			...n.state.previewMode ? {} : { borderColor: "var(--tpl-border)" }
@@ -2386,7 +2386,7 @@ var Ur = ["data-block-id", "data-block-type"], Wr = ["aria-label"], Gr = [
 			updated(e, t) {
 				t.value !== t.oldValue && e.ownerDocument.activeElement !== e && (e.textContent = t.value ?? "");
 			}
-		}, n = e, { t: r } = Lt(), i = mt(Ot, "TableBlock"), a = P(() => n.block.rows.length > 0), o = P(() => ({
+		}, n = e, { t: r } = Lt(), i = Et(Tt, "TableBlock"), a = P(() => n.block.rows.length > 0), o = P(() => ({
 			width: "100%",
 			borderCollapse: "collapse",
 			fontSize: `${n.block.fontSize}px`,
@@ -2446,7 +2446,7 @@ var Ur = ["data-block-id", "data-block-type"], Wr = ["aria-label"], Gr = [
 		viewport: {}
 	},
 	setup(e) {
-		let t = e, n = D(() => import("./TitleEditor-CHmL3FFR.js")), { isEditing: r, blockRef: i, toolbarPosition: a, resolvedContent: o, handleDoubleClick: s, handleEditorDone: c } = Rr(() => t.block.content), l = P(() => {
+		let t = e, n = D(() => import("./TitleEditor-C8Qyr_U3.js")), { isEditing: r, blockRef: i, toolbarPosition: a, resolvedContent: o, handleDoubleClick: s, handleEditorDone: c } = Rr(() => t.block.content), l = P(() => {
 			let e = {
 				fontSize: `${et[t.block.level]}px`,
 				color: t.block.color,
@@ -9562,7 +9562,7 @@ var Kd, qd, Jd, Yd, Xd, Zd, Qd, $d, ef, tf, nf, rf, af, of, sf, cf, Y, lf, X, Z,
 			form: ci,
 			discountCoupon: dr,
 			custom: tr
-		}, n = e, { t: r } = Lt(), i = mt(Ot, "SectionBlock"), a = u(Ct, null), o = u(Mt, null), c = P(() => {
+		}, n = e, { t: r } = Lt(), i = Et(Tt, "SectionBlock"), a = u(St, null), o = u(jt, null), c = P(() => {
 			switch (n.block.columns) {
 				case "2": return ["50%", "50%"];
 				case "3": return [
@@ -9659,7 +9659,7 @@ var Kd, qd, Jd, Yd, Xd, Zd, Qd, $d, ef, tf, nf, rf, af, of, sf, cf, Y, lf, X, Z,
 	table: Di,
 	spacer: xi,
 	html: vr,
-	countdown: D(() => import("./CountdownBlock-Ba3T-i2X.js").then((e) => e.n)),
+	countdown: D(() => import("./CountdownBlock-CrpaDWze.js").then((e) => e.n)),
 	discountCoupon: dr
 };
 function Tp(e) {
@@ -9707,16 +9707,16 @@ function Tp(e) {
 			onBeforeUndo: e.keyboardOptions?.onBeforeUndo
 		});
 	}
-	ft(document, "keydown", v), C(_t, r), C(Ot, t), C(Et, nn(n.editorType)), C(yt, u), C(bt, d), C(Ct, f), C(Tt, i), C(gt, l), C(Dt, s), C(kt, n.blockDefaults), C(Mt, g), C(wt, n.customBlocks ?? []);
+	ft(document, "keydown", v), C(Dt, r), C(Tt, t), C(wt, nn(n.editorType)), C(Nt, u), C(yt, d), C(St, f), C(vt, i), C(gt, l), C(mt, s), C(Ot, n.blockDefaults), C(jt, g), C(Ct, n.customBlocks ?? []);
 	let y = Ue(n.mergeTags?.syntax);
-	C(It, n.mergeTags?.tags ?? []), C(Ft, y), C(ht, n.mergeTags?.onRequest ?? null), C(xt, n.mergeTags?.autocomplete !== !1), C(vt, n.onRequestMedia ?? null), C(At, n.displayConditions?.conditions ?? []), C(jt, n.displayConditions?.allowCustom ?? !1), C(St, e.capabilities ?? {}), C(Pt, h);
+	C(bt, n.mergeTags?.tags ?? []), C(_t, y), C(Pt, n.mergeTags?.onRequest ?? null), C(Ft, n.mergeTags?.autocomplete !== !1), C(ht, n.onRequestMedia ?? null), C(kt, n.displayConditions?.conditions ?? []), C(At, n.displayConditions?.allowCustom ?? !1), C(xt, e.capabilities ?? {}), C(It, h);
 	let b = n.accessibility?.disabled === !0 ? null : rn({
 		content: t.content,
 		options: n.accessibility ?? {},
 		updateBlock: t.updateBlock,
 		updateSettings: t.updateSettings
 	});
-	C(Nt, b);
+	C(Mt, b);
 	function x() {
 		m?.(), b?.destroy(), p?.destroy(), u.destroy();
 	}

package/dist/{useI18n-C2xQZ6K9.js → useI18n-DLZJ6wNn.js}

@@ -1,5 +1,5 @@
 import { D as e, Y as t } from "./vue.runtime.esm-bundler-CjauPXjj.js";
-import { O as n } from "./keys-CvX8D-8C.js";
+import { k as n } from "./keys-CqdzeWhT.js";
 //#region src/composables/useI18n.ts
 function r(r) {
 	let i = r ?? e(n, null);

package/dist/{useMergeTag-BfVcyNSv.js → useMergeTag-D-kqWENN.js}

@@ -1,9 +1,9 @@
 import { D as e, et as t } from "./vue.runtime.esm-bundler-CjauPXjj.js";
 import { F as n, i as r, j as i } from "./dist-Bcqepqv3.js";
-import { C as a, b as o, h as s, x as c, y as l } from "./keys-CvX8D-8C.js";
+import { S as a, b as o, g as s, w as c, x as l } from "./keys-CqdzeWhT.js";
 //#region src/composables/useMergeTag.ts
 function u() {
-	let u = e(s, "email") === "popup", d = u ? [] : e(l, []), f = e(c, r.liquid), p = u ? null : e(a, null), m = u ? !1 : e(o, !0), h = t(!1);
+	let u = e(s, "email") === "popup", d = u ? [] : e(o, []), f = e(a, r.liquid), p = u ? null : e(c, null), m = u ? !1 : e(l, !0), h = t(!1);
 	function g(e) {
 		return n(e, f);
 	}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aswin.dev/editor",
   "description": "Vue 3 visual drag-and-drop email editor powered by Templatical",
-  "version": "0.8.5",
+  "version": "0.8.7",
   "bugs": "https://github.com/templatical/sdk/issues",
   "devDependencies": {
     "@lucide/vue": "^1.11.0",
@@ -33,9 +33,9 @@
     "vue": "^3.5.33",
     "vue-tsc": "^3.2.7",
     "vuedraggable": "^4.1.0",
-    "@aswin.dev/quality": "0.8.5",
-    "@aswin.dev/core": "0.8.5",
-    "@aswin.dev/types": "0.8.5"
+    "@aswin.dev/core": "0.8.7",
+    "@aswin.dev/types": "0.8.7",
+    "@aswin.dev/quality": "0.8.7"
   },
   "exports": {
     ".": {
@@ -63,9 +63,9 @@
   "license": "SEE LICENSE IN LICENSE",
   "module": "./dist/templatical-editor.js",
   "peerDependencies": {
-    "@aswin.dev/media-library": "0.8.5",
-    "@aswin.dev/quality": "0.8.5",
-    "@aswin.dev/renderer": "0.8.5"
+    "@aswin.dev/media-library": "0.8.7",
+    "@aswin.dev/quality": "0.8.7",
+    "@aswin.dev/renderer": "0.8.7"
   },
   "peerDependenciesMeta": {
     "@aswin.dev/renderer": {